/**
 * Anspruch Formulare – Frontend Styles
 *
 * CI-Prinzip: Wir definieren NICHTS Eigenes hart, sondern hängen uns an
 * bestehende Theme-/Elementor-Variablen. Primärfarbe zieht zuerst aus dem
 * Eduma-Theme selbst (--ed-color-theme-primary), das auf dieser Seite die
 * verbindliche Markenfarbe führt; Elementors Global Kit
 * (--e-global-color-primary) ist der zweite Fallback, falls das Theme die
 * Variable mal nicht setzt; ein fester Hex-Wert (Marken-Türkis) ganz am
 * Ende. Änderst du die Theme- oder Kit-Farbe, zieht das Formular automatisch
 * mit – nichts davon ist im Formular selbst hart codiert.
 */

.af-form,
.af-modal {
	/* .af-modal steht im DOM VOR/UM .af-form (Trigger-Button + <dialog>
	   werden von AF_Popup::maybe_wrap() um das Formular-Markup gelegt) und
	   ist damit KEIN Nachfahre von .af-form – CSS-Custom-Properties vererben
	   sich nur an Nachfahren, daher hier dieselben Tokens noch einmal selbst
	   definieren, statt sich auf Vererbung von .af-form zu verlassen. */
	/* Theme-Variable zuerst, Elementor-Kit als Fallback, Marken-Hex zuletzt. */
	--af-primary: var(--ed-color-theme-primary, var(--e-global-color-primary, #07A698));
	--af-secondary: var(--e-global-color-secondary, #1e293b);
	--af-accent: var(--e-global-color-accent, var(--af-primary));
	--af-text: var(--e-global-color-text, #1f2937);
	--af-font: var(--e-global-typography-text-font-family, inherit);
	--af-heading-font: var(--e-global-typography-primary-font-family, var(--af-font));

	/* Neutrale, dezente Struktur – bewusst zurückhaltend. */
	--af-border: color-mix(in srgb, var(--af-text) 18%, transparent);
	--af-surface: color-mix(in srgb, var(--af-text) 3%, #fff);
	--af-text-muted: color-mix(in srgb, var(--af-text) 60%, transparent);
	--af-primary-soft: color-mix(in srgb, var(--af-primary) 10%, transparent);
	--af-radius: 8px;
	--af-radius-lg: 16px;
	--af-gap: 1rem;
	/* Zwei Schichten statt einem einzelnen weichen Blur: ein knapper
	   Kontaktschatten + ein weicher Umgebungsschatten wirken „getragen"
	   statt flach aufgeklebt. */
	--af-shadow: 0 1px 2px color-mix(in srgb, var(--af-text) 6%, transparent), 0 16px 40px color-mix(in srgb, var(--af-text) 9%, transparent);

	/* Semantische Zustandsfarben (kein Markenbezug, daher fest). */
	--af-success: #16a34a;
	--af-success-soft: color-mix(in srgb, #16a34a 12%, transparent);
	--af-error: #dc2626;
	--af-error-soft: color-mix(in srgb, #dc2626 10%, transparent);

	font-family: var(--af-font);
	color: var(--af-text);
	/* Keine eigene Breite/Obergrenze: Elementor (Spalte/Container) entscheidet.
	   Wer eine Höchstbreite will, packt den Shortcode in einen Container mit
	   eigenem max-width – das Formular füllt dann exakt diesen Container. */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Fallback für Browser ohne color-mix() (u. a. ältere, nicht mehr
   aktualisierte Android-WebViews vor Chrome 111 / März 2023 – die meisten
   Android-Geräte bekommen WebView-Updates unabhängig von der OS-Version über
   den Play Store, betrifft also nur wirklich veraltete/nicht mehr gepflegte
   Geräte). --af-primary/--af-text selbst funktionieren weiterhin (reines
   var()-Fallback, seit 2017 unterstützt) – nur die daraus ABGELEITETEN
   Transparenz-Töne lassen sich ohne color-mix() nicht dynamisch aus der
   tatsächlichen Theme-Farbe berechnen. Diese Fallbacks nutzen daher feste,
   neutrale Näherungswerte statt einer exakten Ableitung; das Formular bleibt
   voll funktionsfähig und lesbar, wirkt in diesem Fall nur minimal weniger
   fein abgestuft (z. B. Buttons ohne Hover-Verdunklung). */
@supports not (color: color-mix(in srgb, red, red)) {
	.af-form,
	.af-modal {
		--af-border: rgba(0, 0, 0, 0.16);
		--af-surface: #fafafa;
		--af-text-muted: rgba(31, 41, 55, 0.62);
		--af-primary-soft: rgba(7, 166, 152, 0.1);
		--af-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
	}
}

.af-form__title {
	font-family: var(--af-heading-font);
	color: var(--af-secondary);
	margin: 0 0 0.35em;
}

.af-form__intro {
	margin: 0 0 1.25em;
	color: var(--af-text-muted);
	line-height: 1.55;
}

.af-form__fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--af-gap);
}

.af-field {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
}

.af-field--half {
	grid-column: span 1;
}

.af-field--full {
	grid-column: span 2;
}

.af-field__label {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.af-field__input {
	font: inherit;
	/* Mindestens 16px, sonst zoomt iOS Safari beim Fokussieren automatisch
	   in die Seite hinein (unabhängig von der Theme-Basisschriftgröße) –
	   einer der zuverlässigsten Signale für ein nicht-mobil-optimiertes
	   Formular. */
	font-size: max(16px, 1em);
	color: inherit;
	width: 100%;
	padding: 0.75em 0.85em;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	background: var(--af-surface);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.af-field__input:hover:not(:focus) {
	border-color: color-mix(in srgb, var(--af-text) 32%, transparent);
}

.af-field__input:focus {
	outline: none;
	border-color: var(--af-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-primary) 22%, transparent);
}

textarea.af-field__input {
	resize: vertical;
	min-height: 96px;
}

.af-field__input.af-field__input--invalid {
	border-color: var(--af-error);
}

.af-field__hint {
	font-size: 0.85rem;
	color: var(--af-text-muted);
	margin-top: -0.3em;
}

.af-field__checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
	cursor: pointer;
	line-height: 1.4;
}

.af-field--consent {
	margin-top: 0.25rem;
	font-size: 0.9rem;
}

.af-field--consent a {
	color: var(--af-primary);
	text-decoration: underline;
}

/* Button erbt Markenfarbe. Bewegungssprache bewusst identisch zu den
   Options-Karten (leichtes Anheben + wachsender Schatten), damit sich
   Formular-Elemente wie ein System anfühlen statt wie lose Einzelteile. */
.af-btn {
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--af-primary);
	border: none;
	border-radius: var(--af-radius);
	padding: 0.8em 1.6em;
	margin-top: 1.25rem;
	cursor: pointer;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--af-primary) 25%, transparent);
	transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.af-btn:hover {
	background: color-mix(in srgb, var(--af-primary) 90%, black);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--af-primary) 30%, transparent);
	transform: translateY(-1px);
}

.af-btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--af-primary) 25%, transparent);
}

.af-btn:disabled {
	opacity: 0.55;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

.af-btn:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--af-primary) 40%, transparent);
	outline-offset: 2px;
}

.af-btn--large {
	padding: 1em 2em;
	font-size: 1.05rem;
}

.af-btn--ghost {
	background: transparent;
	color: var(--af-text-muted);
	box-shadow: none;
	padding: 0.8em 1em;
}

.af-btn--ghost:hover {
	color: var(--af-text);
	background: var(--af-primary-soft);
	box-shadow: none;
	transform: none;
}

.af-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font: inherit;
	font-size: 0.85rem;
	color: var(--af-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4em 0;
	margin: 0 0 1rem;
	transition: color 0.15s ease;
}

.af-back:hover {
	color: var(--af-text);
}

/* Statusmeldungen. */
.af-form__message {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--af-radius);
	font-size: 0.9rem;
}

.af-form__message--error {
	background: var(--af-error-soft);
	color: #b91c1c;
}

.af-form__message--success {
	background: var(--af-success-soft);
	color: #15803d;
}

/* Honeypot komplett verstecken. */
.af-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =====================================================================
 * WIZARD: gemeinsames Gerüst für Rechner & Termin (3-Schritt-Assistenten)
 * ================================================================== */

.af-wizard__progress {
	margin-bottom: 2rem;
}

.af-wizard__progress-label {
	display: flex;
	align-items: center;
	margin-bottom: 0.65rem;
}

/* Ruhiges Pill-Badge statt lauter Großbuchstaben-Zeile – hält den
   Auslesetext klein und lässt oben rechts (Popup-Schließen-Button) Platz. */
.af-wizard__progress-step {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--af-primary);
	background: var(--af-primary-soft);
	padding: 0.32em 0.85em;
	border-radius: 999px;
}

/* Die Prozentzahl bleibt für Screenreader erhalten (aktualisiert sich live
   mit dem Fortschritt), wird aber nicht mehr angezeigt – zusammen mit der
   Schritt-Angabe war sie doppelt gemoppelt und beengte gerade im Popup die
   Ecke neben dem Schließen-Button. */
.af-wizard__progress-percent {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.af-wizard__progress-bar {
	height: 6px;
	background: var(--af-primary-soft);
	border-radius: 999px;
	overflow: hidden;
}

.af-wizard__progress-fill {
	height: 100%;
	background: var(--af-primary);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
	transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.af-wizard__card {
	background: var(--af-surface);
	border: 1px solid color-mix(in srgb, var(--af-text) 6%, transparent);
	border-radius: var(--af-radius-lg);
	box-shadow: var(--af-shadow);
	padding: 2.25rem 2rem;
}

.af-wizard__step {
	display: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.af-wizard__step.is-active {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.af-wizard__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.75rem;
	flex-wrap: wrap;
}

.af-wizard__actions--center {
	justify-content: center;
}

/* ---------- Options-Karten (Radio-Gruppen, nativ & barrierefrei) ---------- */
.af-field--choice,
.af-field--yesno {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Bedingt eingeblendete Folgefragen (z. B. Verhinderungspflege/Entlastungs-
   betrag beim Pflegeanspruch-Rechner) bekommen eine dezente Trennlinie, damit
   die Hauptfrage (Options-Karten) und ihre Folgefragen als zwei klar
   unterscheidbare Schritte lesbar sind statt als eine einzige, dichte Liste.
   Nur VOR der ersten Folgefrage einer Gruppe – folgen mehrere aufeinander
   (z. B. beide Fragen bei Pflegegrad 2–5), bekommt nicht jede ihre eigene
   Linie. */
.af-conditional .af-field--yesno {
	margin-top: 0.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--af-border);
}

.af-conditional + .af-conditional .af-field--yesno {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.af-choice-grid {
	display: grid;
	/* Fest 2 pro Reihe – Breite kommt vom äußeren Elementor-Container,
	   die Spalten darin bleiben aber immer gleich groß. */
	grid-template-columns: repeat(2, 1fr);
	gap: 0.85rem;
	align-items: stretch;
}

/* Steht eine Karte allein in der letzten Reihe (ungerade Options-Anzahl),
   über die volle Breite ziehen statt eine Lücke danebenzulassen. */
.af-choice-grid > .af-choice:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Deckt praktisch alle Telefone im Hochformat ab (iPhone SE/14/Pro Max,
   Pixel, Galaxy S liegen zwischen 360–430px) – 2 enge Spalten mit mehrzeiligen
   Labels wie „IHK Sicherheitsfachkraft §34a" wären hier kaum lesbar. Ab
   Tablet-Breite (min. ~560px aufwärts) bleiben die bewusst gleich großen
   2 Spalten pro Reihe. */
@media (max-width: 560px) {
	.af-choice-grid {
		grid-template-columns: 1fr;
	}
	.af-choice-grid > .af-choice:last-child:nth-child(odd) {
		grid-column: auto;
	}
	.af-choice__box {
		min-height: 72px;
	}
}

.af-yesno-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	max-width: 360px;
	align-items: stretch;
}

.af-choice {
	position: relative;
	cursor: pointer;
	display: flex;
}

.af-choice__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.af-choice__box {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	min-height: 92px;
	padding: 1.1em 1.35em;
	border: 1.5px solid var(--af-border);
	border-radius: var(--af-radius);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.45;
	background: var(--af-surface);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--af-text) 5%, transparent);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.af-choice:hover .af-choice__box {
	border-color: var(--af-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--af-text) 8%, transparent);
}

.af-choice__input:focus-visible + .af-choice__box {
	outline: 3px solid color-mix(in srgb, var(--af-primary) 35%, transparent);
	outline-offset: 2px;
}

.af-choice__input:checked + .af-choice__box {
	border-color: var(--af-primary);
	background: var(--af-primary);
	color: #fff;
	transform: translateY(0);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--af-primary) 30%, transparent);
}

.af-choice--slot {
	display: block;
}

.af-choice--slot .af-choice__box {
	/* 44px ist die gängige Mindest-Tippfläche (Apple HIG/Material Design) –
	   bei kurzen Uhrzeit-Labels wie „09:30" sonst schnell unterschritten. */
	min-height: 44px;
	padding: 0.5em 0.5em;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
	box-shadow: none;
}

.af-choice--slot:hover .af-choice__box {
	transform: none;
}

/* ---------- Ergebnis-Schritt ---------- */
.af-result {
	text-align: center;
	padding: 0.5rem 0;
}

.af-result__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Bewusst Markenfarbe statt eines separaten „Erfolgs-Grün": das Icon ist
	   reines Dekor (kein Status-Feedback wie .af-form__message--success),
	   soll also wie jedes andere Element hier zur CI-Farbe gehören statt
	   eine zweite Akzentfarbe ins Formular zu holen. */
	background: var(--af-primary-soft);
	color: var(--af-primary);
	margin-bottom: 1.25rem;
}

.af-result__label {
	font-size: 0.95rem;
	color: var(--af-text-muted);
	margin: 0 0 0.25rem;
}

.af-result__amount {
	font-family: var(--af-heading-font);
	font-size: 3.25rem;
	font-weight: 700;
	color: var(--af-primary);
	line-height: 1;
	margin: 0.25rem 0;
	font-variant-numeric: tabular-nums;
}

.af-result__suffix {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--af-text-muted);
	margin-left: 0.15em;
}

.af-result__note {
	font-size: 0.85rem;
	color: var(--af-text-muted);
	margin: 0.5rem 0 0;
}

.af-result__period {
	font-size: 0.85rem;
	color: var(--af-text-muted);
	margin: 0 0 0.75rem;
}

.af-result__headline {
	font-family: var(--af-heading-font);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.75rem;
}

.af-result__text {
	font-size: 0.95rem;
	color: var(--af-text-muted);
	max-width: 32rem;
	margin: 0 auto 1.5rem;
	line-height: 1.6;
}

/* Bewusst eine ruhige, ungefüllte Karte statt eines farbig gefüllten
   „Alert"-Kastens: die Zahl darüber und der CTA darunter sind die einzigen
   Elemente, die hier Gewicht tragen sollen. Ein zweiter farbiger Block würde
   mit dem Button um Aufmerksamkeit konkurrieren – dieselbe zurückhaltende
   Kartenoptik wie .af-choice__box/.af-calendar statt einer eigenen Farbe. */
.af-info-hint {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	text-align: left;
	padding: 0.8rem 1rem;
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	font-size: 0.82rem;
	color: var(--af-text-muted);
	margin: 1.25rem 0;
}

.af-info-hint strong {
	color: var(--af-text);
}

.af-info-hint svg {
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: var(--af-primary);
}

/* Bedingt eingeblendete Folgefragen (z. B. abhängig vom Pflegegrad).
   display:contents nur wenn sichtbar, damit der Wrapper selbst nicht als
   Grid-Item zählt und das `grid-column: span 2` des eigentlichen Feldes
   (.af-field--choice/--yesno) weiterhin greift; [hidden] bleibt display:none
   über die UA-Stylesheet-Regel. */
.af-conditional:not([hidden]) {
	display: contents;
}

.af-thanks {
	text-align: center;
	padding: 1.5rem 0;
}

.af-thanks .af-form__title,
.af-thanks .af-form__intro {
	text-align: center;
}

/* ---------- Kalender & Zeitfenster (Termin, Schritt 2) ---------- */
.af-calendar {
	margin: 1.25rem 0;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	padding: 1rem;
}

.af-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.af-calendar__nav {
	appearance: none;
	background: none;
	border: 1px solid var(--af-border);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	cursor: pointer;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--af-text);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.af-calendar__nav:hover {
	border-color: var(--af-primary);
	color: var(--af-primary);
	background: var(--af-primary-soft);
}

.af-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	font-size: 0.75rem;
	color: var(--af-text-muted);
	text-align: center;
	margin-bottom: 0.4rem;
}

.af-calendar__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.af-calendar__day {
	appearance: none;
	background: none;
	border: none;
	border-radius: 8px;
	aspect-ratio: 1;
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	color: var(--af-text);
	transition: background 0.15s ease, color 0.15s ease;
}

.af-calendar__day:not(.is-disabled):not(.is-selected):hover {
	background: var(--af-primary-soft);
}

.af-calendar__day.is-selected {
	background: var(--af-primary);
	color: #fff;
	font-weight: 600;
}

.af-calendar__day.is-disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

.af-calendar__day--empty {
	visibility: hidden;
}

.af-slots {
	margin-top: 1rem;
}

.af-slots__label {
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.af-slots__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 0.5rem;
}

.af-slots__empty {
	font-size: 0.85rem;
	color: var(--af-text-muted);
	grid-column: 1 / -1;
}

/* ---------- Popup / Modal ---------- */
body.af-modal-open {
	overflow: hidden;
}

.af-modal {
	/* Kein eigenes `position` setzen: <dialog> ist per UA-Stylesheet bereits
	   positioniert (Voraussetzung fürs automatische Zentrieren im Top-Layer
	   via showModal()) und damit schon ein gültiger Containing Block für
	   .af-modal__close (position:absolute). */
	padding: 0;
	margin: auto;
	border: none;
	border-radius: var(--af-radius-lg);
	box-shadow: 0 24px 70px color-mix(in srgb, var(--af-text) 30%, transparent);
	background: var(--af-surface);
	width: 92vw;
	max-width: 640px;
	max-height: 88vh;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(0.97);
	transition: opacity 220ms ease, transform 220ms ease;
}

.af-modal.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.af-modal::backdrop {
	background: color-mix(in srgb, var(--af-secondary, var(--af-text)) 60%, transparent);
	opacity: 0;
	transition: opacity 220ms ease;
}

.af-modal.is-open::backdrop {
	opacity: 1;
}

.af-modal__body {
	max-height: 88vh;
	overflow-y: auto;
	/* Oben bewusst mehr Luft als seitlich/unten: reserviert verlässlich Platz
	   für den absolut positionierten Schließen-Button (endet bei 1rem+2.25rem
	   = 3.25rem von oben), unabhängig davon, was als erstes Element im
	   Formular steht (Titel, Fortschrittsanzeige, …). */
	padding: 3.75rem 2rem 2.25rem;
}

/* Verhindert eine "Karte in der Karte": der Wizard bringt seine eigene
   Karten-Optik (Schatten/Radius/Padding) mit, die im Popup redundant wäre,
   weil .af-modal selbst schon die Karte ist. */
.af-modal .af-wizard__card {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
}

.af-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: color-mix(in srgb, var(--af-text) 8%, transparent);
	color: var(--af-text-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.af-modal__close svg {
	/* !important + flex/min-width: manche Themes (u. a. BeTheme) setzen svg-Breite
	   global auf 0 – ohne diese Garde ist das X 0px breit und der Schließen-Button
	   wirkt wie ein leerer Kreis. Gilt für ALLE Popups (Rechner/Termin/
	   Bildungsgutschein). fill/stroke halten das gestrichene X sichtbar. */
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
	flex: 0 0 auto;
	fill: none !important;
	stroke: currentColor !important;
}

.af-modal__close svg path {
	fill: none !important;
	stroke: currentColor !important;
}

.af-modal__close:hover {
	background: color-mix(in srgb, var(--af-text) 14%, transparent);
	color: var(--af-text);
	transform: rotate(90deg);
}

.af-modal__close:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--af-primary) 40%, transparent);
	outline-offset: 2px;
}

/* =====================================================================
 * RESPONSIV: Telefon & Tablet (Desktop-Regeln oben bleiben die Basis)
 * ================================================================== */

/* Unter Tablet-Breite wird das Popup zum vollflächigen Bottom-Sheet statt
   einer schwebenden Karte mit Rand ringsum: mehr nutzbarer Platz für lange
   Formulare (Kalender-Schritt, viele Felder) und kein winziger Ausschnitt,
   wenn die Bildschirmtastatur ein Feld fokussiert – ein vertrautes Muster
   aus nativen Apps statt einem verkleinerten Desktop-Dialog. */
@media (max-width: 640px) {
	.af-modal {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		border-radius: 0;
		transform: translateY(100%);
	}

	.af-modal.is-open {
		transform: translateY(0);
	}

	.af-modal__body {
		height: 100%;
		max-height: none;
		padding: 3.5rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
	}

	.af-wizard__card {
		padding: 1.5rem 1.25rem;
	}
}

@media (max-width: 540px) {
	.af-form__fields {
		grid-template-columns: 1fr;
	}
	.af-field--half {
		grid-column: span 1;
	}
	.af-result__amount {
		font-size: 2.5rem;
	}

	/* Lange Button-Labels („Kostenloses Beratungsgespräch") passen auf
	   schmalen Screens nicht mehr nebeneinander – Aktionen stapeln sich
	   volle Breite. column-reverse zeigt die primäre Aktion (im Markup meist
	   zuletzt) oben, ohne die DOM-/Tab-Reihenfolge (Zurück zuerst) zu ändern;
	   das bestehende `gap` sorgt unabhängig von der Richtung für den Abstand. */
	.af-wizard__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.af-wizard__actions > .af-btn {
		width: 100%;
		text-align: center;
		margin-top: 0;
	}
}

/* Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
	.af-field__input,
	.af-btn,
	.af-choice__box,
	.af-wizard__step,
	.af-wizard__progress-fill,
	.af-modal,
	.af-modal::backdrop,
	.af-modal__close {
		transition: none;
	}

	:is(.af-calculator,.af-appointment) .af-result__icon {
		animation: none;
	}
}

/* =====================================================================
 * GEMEINSAMER „NAVY"-SKIN — Rechner (.af-calculator) + Termin (.af-appointment)
 *
 * Ursprünglich als 1:1-Portierung des freigegebenen Pflegegrad-Rechner-
 * Prototyps (Prefix .ag-*, eingebettet im BeTheme-Popup „mfn-popup-template-271")
 * gebaut; auf Wunsch des Betreibers trägt jetzt AUCH das Termin-Formular dieselbe
 * Optik. Deshalb ist der frühere `.af-calculator`-Scope auf
 * `:is(.af-calculator, .af-appointment)` erweitert und die Modal-Hülle auf
 * `.af-modal:is([id^="af-popup-rechner-"], [id^="af-popup-termin-"])` –
 * `:is()` bewahrt die Spezifität exakt, der Rechner rendert also unverändert.
 * Bildungsgutschein (.af-voucher) bleibt bewusst außen vor (Basis-Optik).
 * Modul-spezifisches: Ergebnis-Screen = nur Rechner; Kalender/Zeitfenster =
 * nur Termin (eigener Block ganz unten).
 *
 * BEWUSSTE ABWEICHUNG VOM CI-PRINZIP (§6): Die Farben sind hier fest auf die
 * Prototyp-Werte gesetzt (Navy #1a2a4a u. a.), NICHT aus den Theme-/Kit-
 * Variablen abgeleitet, damit beide Formulare pixelgenau dem freigegebenen Design
 * entsprechen. Scope strikt auf Rechner + Termin; die anderen Module behalten
 * das CI-Prinzip unverändert.
 * ================================================================== */

/* --- Design-Tokens (.ag-*) auf die gemeinsamen .af-*-Token gemappt ---
   Scope umfasst die Modal-Hülle mit, damit auch Backdrop, Karte und
   Schließen-Button des Popups die Navy-Identität tragen. */
:is(.af-calculator,.af-appointment),
.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) {
	--af-primary: #1a2a4a;			/* --ag-primary */
	--af-primary-dark: #0f1a30;		/* --ag-primary-dark (Button-Hover) */
	--af-primary-soft: #f0f3f9;		/* --ag-primary-soft (weiche Flächen) */
	--af-secondary: #1a2a4a;		/* Überschriften = Navy */
	--af-text: #1a2a4a;			/* --ag-text */
	--af-text-muted: #6b7280;		/* --ag-text-muted */
	--af-border: #e5e7eb;			/* --ag-border */
	--af-surface: #ffffff;			/* --ag-white (Optionen/Inputs) */
	--af-bg-soft: #f8f9fb;			/* --ag-bg-soft (Ja/Nein-Karte) */
	--af-success: #2d8259;			/* --ag-success */
	--af-success-soft: #e8f5ee;		/* --ag-success-soft */
	--af-error: #dc2626;			/* --ag-error */
	--af-radius: 8px;			/* --ag-radius-sm */
	--af-radius-lg: 16px;			/* --ag-radius */

	/* Eingabefelder: weiche, navy-getönte Grautöne (aus der Marke abgeleitet),
	   damit die Felder definiert wirken, ohne „muddy" zu sein. */
	--af-input-bg: color-mix(in srgb, var(--af-secondary) 5%, #ffffff);
	--af-input-border: color-mix(in srgb, var(--af-secondary) 13%, #ffffff);
	--af-input-border-strong: color-mix(in srgb, var(--af-secondary) 28%, #ffffff);

	/* Schrift wie der Prototyp (DM Sans wird vom Theme ohnehin geladen). */
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- POPUP-HÜLLE = die weiße Karte des Prototyps (.ag-card) ---------- */
.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) {
	border: 1px solid rgba(26, 42, 74, 0.08);
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
}

/* Navy-Blur-Overlay statt grauer Standard-Abdunklung (.ag-blur-overlay). */
.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"])::backdrop {
	background: rgba(26, 42, 74, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Karten-Innenabstand wie der Prototyp (28px); die Wizard-Karte bleibt im
   Popup transparent (die .af-modal IST die Karte). */
.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-modal__body {
	padding: 28px;
}

.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-wizard__card {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* Schließen-Button = .ag-close (36px, weicher Kreis, Navy-Hover + Drehung). */
.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-modal__close {
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	background: var(--af-bg-soft);
	border: 1px solid var(--af-border);
	color: var(--af-text-muted) !important;
	/* border-color mit-animieren (Basis-Transition kennt nur bg/color/transform). */
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-modal__close:hover {
	background: var(--af-primary);
	border-color: var(--af-primary);
	color: #ffffff !important;
	transform: rotate(90deg);
}

/* Die Icon-Absicherung (svg-Breite gegen Theme-Regeln) liegt an der Basis-
   Regel „.af-modal__close svg" oben – gilt damit für alle Popups. */

/* Fortschritt bekommt rechts Platz für den X-Button (.ag-progress-wrap). */
.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-wizard__progress {
	padding-right: 44px;
}

@media (max-width: 640px) {
	.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-modal__body {
		padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
	}
	.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-modal__close {
		top: 10px;
		right: 10px;
		width: 32px;
		height: 32px;
	}
}

/* ---------- KARTE (inline, ohne Popup) = .ag-card ---------- */
:is(.af-calculator,.af-appointment) .af-wizard__card {
	background: #ffffff;
	border: 1px solid rgba(26, 42, 74, 0.08);
	border-radius: var(--af-radius-lg);
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
	padding: 28px;
}

/* ---------- FORTSCHRITT: dünner Balken bündig an der Popup-Oberkante ----------
   Modernes Muster (Stripe/Typeform/Linear-Onboarding): KEIN sichtbarer
   Prozentwert mehr – der lag auf dem Desktop zu nah am X. Stattdessen eine
   ruhige „SCHRITT X VON 3"-Eyebrow links (X sitzt rechts daneben) und ein
   Fortschrittsbalken, der im Popup flush an der Kartenoberkante klebt und mit
   dem Body mitscrollt-frei oben bleibt (position:absolute gegen die .af-modal). */
:is(.af-calculator,.af-appointment) .af-wizard__progress {
	margin-bottom: 22px;
}

:is(.af-calculator,.af-appointment) .af-wizard__progress-label {
	justify-content: flex-start;
	margin-bottom: 0;
	padding-right: 44px; /* Eyebrow endet links vom X-Button */
}

:is(.af-calculator,.af-appointment) .af-wizard__progress-step {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--af-text-muted);
	background: none;
	padding: 0;
	border-radius: 0;
}

/* Prozentwert bleibt für Screenreader erhalten (live), ist aber unsichtbar. */
:is(.af-calculator,.af-appointment) .af-wizard__progress-percent {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Inline-Variante (ohne Popup): Balken normal im Fluss unter der Eyebrow. */
:is(.af-calculator,.af-appointment) .af-wizard__progress-bar {
	height: 5px;
	margin-top: 10px;
	background: var(--af-primary-soft);
	border-radius: 999px;
}

/* Popup-Variante: Balken voll-bleed an die Oberkante der Karte (5px), oben
   abgerundet wie die Karte. .af-modal hat overflow:hidden + Radius, klippt den
   Balken also automatisch an die Ecken; er bleibt beim Scrollen oben. */
.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-wizard__progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-top: 0;
	height: 5px;
	border-radius: var(--af-radius-lg) var(--af-radius-lg) 0 0;
	z-index: 4;
}

:is(.af-calculator,.af-appointment) .af-wizard__progress-fill {
	background: var(--af-primary);
	box-shadow: none;
}

/* Auf dem Handy ist die Karte ein Vollbild-Sheet ohne obere Radien – Balken
   dann ohne abgerundete Ecken über die volle Breite. */
@media (max-width: 640px) {
	.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-wizard__progress-bar {
		border-radius: 0;
	}
}

/* ---------- TYPOGRAFIE (.ag-h1 / .ag-h2 / .ag-lead) ---------- */
:is(.af-calculator,.af-appointment) .af-form__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--af-secondary);
	margin: 0 0 8px;
}

:is(.af-calculator,.af-appointment) .af-form__intro {
	font-size: 15px;
	color: var(--af-text-muted);
	line-height: 1.55;
	margin: 0 0 20px;
}

/* ---------- SCHRITTE zentriert, Formularfelder linksbündig (.ag-screen) ---------- */
:is(.af-calculator,.af-appointment) .af-wizard__step {
	text-align: center;
	padding-top: 8px;
}

:is(.af-calculator,.af-appointment) .af-form__fields,
:is(.af-calculator,.af-appointment) .af-wizard__actions,
:is(.af-calculator,.af-appointment) .af-field {
	text-align: left;
}

/* ---------- OPTIONS-KARTEN Pflegegrad (.ag-options / .ag-option) ---------- */
:is(.af-calculator,.af-appointment) .af-choice-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

:is(.af-calculator,.af-appointment) .af-choice-grid > .af-choice:last-child:nth-child(odd) {
	grid-column: auto;
}

@media (max-width: 640px) {
	:is(.af-calculator,.af-appointment) .af-choice-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

:is(.af-calculator,.af-appointment) .af-choice__box {
	min-height: 0;
	background: #ffffff;
	border: 1.5px solid var(--af-border);
	border-radius: var(--af-radius);
	padding: 18px 14px;
	font-size: 16px;
	font-weight: 600;
	color: var(--af-text) !important;
	box-shadow: none;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

:is(.af-calculator,.af-appointment) .af-choice:hover .af-choice__box {
	border-color: var(--af-primary);
	background: var(--af-primary-soft);
	color: var(--af-primary) !important;
	transform: translateY(-1px);
	box-shadow: none;
}

:is(.af-calculator,.af-appointment) .af-choice__input:checked + .af-choice__box {
	border-color: var(--af-primary);
	background: var(--af-primary);
	color: #ffffff !important;
	box-shadow: none;
}

/* ---------- JA/NEIN-FRAGEN (.ag-yesno-*) ---------- */
:is(.af-calculator,.af-appointment) .af-field--yesno {
	background: var(--af-bg-soft);
	border: 1.5px solid transparent;
	border-radius: 12px;
	padding: 18px 20px;
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

:is(.af-calculator,.af-appointment) .af-field--yesno:has(.af-choice__input:checked) {
	border-color: var(--af-primary-soft);
	background: var(--af-bg-soft);
}

:is(.af-calculator,.af-appointment) .af-field--yesno .af-field__label {
	font-size: 17px;
	font-weight: 600;
	color: var(--af-text);
	line-height: 1.35;
	margin-bottom: 4px;
	text-align: center;
}

:is(.af-calculator,.af-appointment) .af-field--yesno .af-field__hint {
	font-size: 14px;
	color: var(--af-text-muted);
	font-weight: 500;
	line-height: 1.45;
	margin-top: 0;
	text-align: center;
}

/* Trennlinie/Abstand der Basis-Folgefragen entfällt – die Karte trennt selbst. */
:is(.af-calculator,.af-appointment) .af-conditional .af-field--yesno,
:is(.af-calculator,.af-appointment) .af-conditional + .af-conditional .af-field--yesno {
	margin-top: 0;
	padding-top: 18px;
	border-top: none;
}

:is(.af-calculator,.af-appointment) .af-yesno-buttons {
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	max-width: none;
	margin-top: 14px;
}

:is(.af-calculator,.af-appointment) .af-yesno-buttons .af-choice__box {
	min-height: 0;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 500;
}

/* ---------- INFO-HINWEIS (.ag-info-hint) ---------- */
:is(.af-calculator,.af-appointment) .af-info-hint {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: var(--af-primary-soft);
	border: none;
	border-radius: var(--af-radius);
	font-size: 13px;
	color: var(--af-text);
	line-height: 1.45;
	margin: 12px 0 20px;
	text-align: left;
}

:is(.af-calculator,.af-appointment) .af-info-hint svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--af-text);
}

/* ---------- AKTIONS-LEISTE & BUTTONS (.ag-actions / .ag-btn) ---------- */
:is(.af-calculator,.af-appointment) .af-wizard__actions {
	margin-top: 20px;
	gap: 10px;
}

:is(.af-calculator,.af-appointment) .af-btn {
	font-size: 15px;
	font-weight: 600;
	border-radius: 999px;
	padding: 12px 24px;
	margin-top: 0;
	box-shadow: none;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primär: gefülltes Navy, weiße Schrift. Das !important auf color schützt
   die Textfarbe gegen globale BeTheme-Button-/Link-Regeln (button{color:
   inherit}, a:hover{color:accent} …) – genau wie im Prototyp (.ag-btn). */
:is(.af-calculator,.af-appointment) .af-btn--primary {
	background: var(--af-primary);
	color: #ffffff !important;
}

/* Hover NUR wenn nicht deaktiviert – sonst dunkelt/hebt sich der anfangs
   gesperrte „Ergebnis anzeigen"-Button beim Überfahren an (wirkte „komisch").
   Entspricht dem Prototyp: .ag-btn-primary:hover:not(:disabled). */
:is(.af-calculator,.af-appointment) .af-btn--primary:hover:not(:disabled),
:is(.af-calculator,.af-appointment) .af-btn--primary:focus-visible:not(:disabled) {
	background: var(--af-primary-dark);
	color: #ffffff !important;
	box-shadow: 0 4px 20px rgba(26, 42, 74, 0.06);
	transform: translateY(-1px);
}

:is(.af-calculator,.af-appointment) .af-btn:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: none;
}

:is(.af-calculator,.af-appointment) .af-btn:disabled {
	opacity: 0.4;
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
}

/* Ghost-Button (z. B. „Zurück") bleibt flächenlos, nur die Textfarbe wird
   dunkler. !important erneut als Schutz gegen Theme-Farb-Leaks. */
:is(.af-calculator,.af-appointment) .af-btn--ghost {
	background: transparent;
	color: var(--af-text-muted) !important;
	box-shadow: none;
	padding: 12px 14px;
}

:is(.af-calculator,.af-appointment) .af-btn--ghost:hover:not(:disabled) {
	background: transparent;
	color: var(--af-text) !important;
	box-shadow: none;
	transform: none;
}

:is(.af-calculator,.af-appointment) .af-btn--large {
	padding: 14px 28px;
	font-size: 16px;
}

:is(.af-calculator,.af-appointment) .af-back {
	font-size: 13px;
}

/* ---------- ERGEBNIS (.ag-result-*) ---------- */
:is(.af-calculator,.af-appointment) .af-result {
	padding: 8px 0;
}

:is(.af-calculator,.af-appointment) .af-result__icon {
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	background: var(--af-success-soft);
	color: var(--af-success);
	animation: af-calc-icon-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

:is(.af-calculator,.af-appointment) .af-result__icon svg {
	width: 32px;
	height: 32px;
}

:is(.af-calculator,.af-appointment) .af-result__icon--neutral {
	background: var(--af-primary-soft);
	color: var(--af-primary);
}

@keyframes af-calc-icon-pop {
	0%   { transform: scale(0); opacity: 0; }
	60%  { transform: scale(1.1); }
	100% { transform: scale(1); opacity: 1; }
}

:is(.af-calculator,.af-appointment) .af-result__label {
	font-size: 15px;
	font-weight: 500;
	color: var(--af-text-muted);
	margin: 0 0 4px;
}

:is(.af-calculator,.af-appointment) .af-result__amount {
	font-size: 56px;
	font-weight: 700;
	color: var(--af-primary);
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 4px 0;
}

:is(.af-calculator,.af-appointment) .af-result__suffix {
	font-size: 28px;
	font-weight: 600;
	color: var(--af-text-muted);
	margin-left: 4px;
}

:is(.af-calculator,.af-appointment) .af-result__period {
	font-size: 14px;
	color: var(--af-text-muted);
	margin: 0 0 20px;
}

:is(.af-calculator,.af-appointment) .af-result__headline {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 12px;
}

:is(.af-calculator,.af-appointment) .af-result__text {
	font-size: 15px;
	color: var(--af-text-muted);
	line-height: 1.55;
	max-width: 460px;
	margin: 0 auto 20px;
}

@media (max-width: 640px) {
	:is(.af-calculator,.af-appointment) .af-result__amount { font-size: 48px; }
	:is(.af-calculator,.af-appointment) .af-result__suffix { font-size: 24px; }
	:is(.af-calculator,.af-appointment) .af-result__headline { font-size: 20px; }
	:is(.af-calculator,.af-appointment) .af-result__icon { width: 56px; height: 56px; }
	:is(.af-calculator,.af-appointment) .af-result__icon svg { width: 28px; height: 28px; }
}

/* =====================================================================
 * LEAD-SCHRITT: ruhiges, präzises Kontaktformular (das „Endformular")
 * Strenge Vertikal-Rhythmik (8er-Raster), definierte Eingabefelder mit
 * weichem Fokus-Ring, ruhiger Consent, voll-breiter Abschluss-Button.
 * Linksbündig wie ein echtes Formular; Fragen/Ergebnis bleiben zentriert.
 * ================================================================== */

:is(.af-calculator,.af-appointment) .af-wizard__step:is([data-af-step="lead"],[data-af-step="contact"]) {
	text-align: left;
}

/* „Zurück"-Link über dem Titel: dezente Sekundär-Navigation mit Luft darunter. */
:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-back {
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 20px;
}

:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-form__title {
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}

:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-form__intro {
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 26px;
}

/* Felder-Raster: Name/Nachricht/Consent voll, E-Mail + Telefon nebeneinander.
   Explizit gesetzt (statt der fragilen Basis-Spans), damit es sauber sitzt. */
:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-form__fields {
	gap: 20px 16px;
}

:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-field {
	grid-column: 1 / -1;
}

:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-field--half {
	grid-column: span 1;
}

:is(.af-calculator,.af-appointment) .af-field__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--af-secondary);
	margin-bottom: 8px;
	letter-spacing: 0.005em;
}

/* Eingabefelder: definierte, weiche Felder (Füllung + sichtbarer Rahmen), die
   sich klar von der weißen Karte abheben (kein „muddy"/„schwach" mehr). Beim
   Fokus werden sie weiß und bekommen einen weichen Navy-Ring. */
:is(.af-calculator,.af-appointment) .af-field__input {
	/* width/box-sizing MIT !important: BeTheme setzt für Text-Inputs eine eigene
	   Breite (Felder wären sonst nur ~halb breit und säßen links → „wild"). */
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1.5px solid var(--af-input-border);
	border-radius: 12px;
	background: var(--af-input-bg);
	color: var(--af-text) !important;	/* getippter Text bleibt Navy (BeTheme-Leak) */
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

:is(.af-calculator,.af-appointment) .af-field__input::placeholder {
	color: color-mix(in srgb, var(--af-text-muted) 72%, transparent);
}

:is(.af-calculator,.af-appointment) .af-field__input:hover:not(:focus) {
	border-color: var(--af-input-border-strong);
}

:is(.af-calculator,.af-appointment) .af-field__input:focus {
	background: #ffffff;
	border-color: var(--af-primary);
	box-shadow: 0 0 0 4px var(--af-primary-soft);
}

:is(.af-calculator,.af-appointment) textarea.af-field__input {
	min-height: 108px;
	resize: vertical;
}

/* Consent: ruhige, gut tippbare Zustimmungszeile (20px-Checkbox, Zeilenluft). */
:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-field--consent {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--af-text-muted);
}

:is(.af-calculator,.af-appointment) .af-field__checkbox {
	gap: 12px;
	align-items: flex-start;
}

:is(.af-calculator,.af-appointment) .af-field__checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: var(--af-primary);
	cursor: pointer;
}

:is(.af-calculator,.af-appointment) .af-field--consent a {
	color: var(--af-primary);
	font-weight: 600;
}

/* Abschluss-Button: volle Breite, kräftig – klarer Formular-Abschluss. */
:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-wizard__actions {
	display: block;
	margin-top: 24px;
}

:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-wizard__actions > span {
	display: none;
}

:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-wizard__actions .af-btn {
	width: 100%;
	justify-content: center;
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 16px;
}

/* ---------- VERTRAUENS-ZEILE (.ag-trust) & Beruhigungssatz ---------- */
:is(.af-calculator,.af-appointment) .af-calc-trust {
	gap: 12px 18px;
	margin-top: 16px;
	font-size: 12.5px;
	color: var(--af-text-muted);
}

/* Im Lead-Schritt linksbündig unter dem Button (fluchtet mit dem Formular). */
:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-calc-trust {
	justify-content: flex-start;
	margin-top: 18px;
}

:is(.af-calculator,.af-appointment) .af-calc-trust__item svg {
	color: var(--af-success);
}

:is(.af-calculator,.af-appointment) .af-calc-reassurance {
	font-size: 13px;
	color: var(--af-text-muted);
	text-align: center;
	margin: 16px 0 0;
}

/* Fragen-Schritt: Feld-Raster-Abstand. */
:is(.af-calculator,.af-appointment) .af-form__fields {
	gap: 18px;
}

/* =====================================================================
 * RECHNER – MOBILE/TABLET-FEINSCHLIFF
 * ================================================================== */

/* Strikt EINE Spalte auf Handys/kleinen Tablets (E-Mail/Telefon stapeln).
   Die Basis kollabiert das Grid auf 1fr, lässt .af-field aber auf span 2 –
   das erzeugt mit .af-field--half eine implizite 2. Spalte; hier alles voll. */
@media (max-width: 600px) {
	:is(.af-calculator,.af-appointment) .af-form__fields {
		grid-template-columns: 1fr;
	}
	:is(.af-calculator,.af-appointment) .af-field,
	:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-field--half {
		grid-column: 1 / -1;
	}
}

/* Handy: großzügiger Innenabstand, ≥16px-Eingaben (kein iOS-Zoom). */
@media (max-width: 640px) {
	.af-modal:is([id^="af-popup-rechner-"],[id^="af-popup-termin-"]) .af-modal__body {
		padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
	}
	:is(.af-calculator,.af-appointment) :is([data-af-step="lead"],[data-af-step="contact"]) .af-form__title {
		font-size: 23px;
	}
}

/* =====================================================================
 * TERMIN-SPEZIFISCH: Kalender + Zeitfenster (Navy, kompakt & präzise)
 * Der Rest des Termin-Formulars (Tokens, Karten, Buttons, Inputs, Consent,
 * Progress, Modal-Hülle) kommt aus dem gemeinsamen Skin oben (via :is()).
 * ================================================================== */

/* Kalender-Karte: ruhiger Rahmen, kompaktere Innenabstände. */
.af-appointment .af-calendar {
	margin: 0;
	border: 1px solid var(--af-input-border);
	border-radius: 14px;
	padding: 16px 16px 18px;
	background: #ffffff;
}

.af-appointment .af-calendar__header {
	margin-bottom: 14px;
}

.af-appointment .af-calendar__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--af-secondary);
}

.af-appointment .af-calendar__nav {
	width: 34px;
	height: 34px;
	border: 1px solid var(--af-input-border);
	color: var(--af-text-muted) !important;
	font-size: 1.15rem;
}

.af-appointment .af-calendar__nav:hover {
	border-color: var(--af-primary);
	color: var(--af-primary) !important;
	background: var(--af-primary-soft);
}

.af-appointment .af-calendar__weekdays {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--af-text-muted);
	margin-bottom: 8px;
}

.af-appointment .af-calendar__days {
	gap: 4px;
}

/* Tageszelle: kompakt statt quadratisch-riesig, zentrierte Zahl, weiches
   Navy-Highlight bei Hover, satte Navy-Fläche bei Auswahl. !important auf color
   schützt gegen BeTheme-Button-Regeln (Zellen sind <button>). */
.af-appointment .af-calendar__day {
	aspect-ratio: auto;
	height: 44px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--af-text) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.af-appointment .af-calendar__day:not(.is-disabled):not(.is-selected):hover {
	background: var(--af-primary-soft);
	color: var(--af-primary) !important;
}

.af-appointment .af-calendar__day.is-selected {
	background: var(--af-primary);
	color: #ffffff !important;
	font-weight: 700;
}

.af-appointment .af-calendar__day.is-disabled {
	opacity: 1;
	color: color-mix(in srgb, var(--af-text-muted) 42%, transparent) !important;
	cursor: not-allowed;
}

/* Zeitfenster: kompakte Pills statt großer Options-Karten. */
.af-appointment .af-slots {
	margin-top: 22px;
}

.af-appointment .af-slots__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--af-secondary);
	margin: 0 0 10px;
	text-align: left;
}

.af-appointment .af-slots__grid {
	grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
	gap: 8px;
}

.af-appointment .af-choice--slot .af-choice__box {
	min-height: 0;
	padding: 11px 10px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
}

.af-appointment .af-slots__empty {
	grid-column: 1 / -1;
	font-size: 13px;
	color: var(--af-text-muted);
	margin: 0;
	text-align: left;
}

/* Alle Termin-Schritte: voll-breiter Primär-Button; „Zurück" sitzt oben als
   Link (der frühere doppelte Ghost-Button unten entfällt im Markup). */
.af-appointment .af-wizard__actions {
	display: block;
	margin-top: 24px;
}

.af-appointment .af-wizard__actions > span {
	display: none;
}

.af-appointment .af-wizard__actions .af-btn {
	width: 100%;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 16px;
}

/* Handy: Kalender-Innenabstand knapper, Slot-Raster etwas dichter. */
@media (max-width: 640px) {
	.af-appointment .af-calendar {
		padding: 12px 12px 14px;
	}
	.af-appointment .af-calendar__day {
		height: 42px;
	}
	.af-appointment .af-slots__grid {
		grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	}
}

/* Anliegen-Auswahl (Schritt 1): 2-spaltig statt 3-spaltig – balanciert bei
   variabler Anliegen-Zahl. Ein einzelnes letztes Feld (ungerade Anzahl) füllt
   die volle Breite, damit es nicht verwaist links steht. Auf dem Handy 1-spaltig. */
.af-appointment .af-choice-grid {
	grid-template-columns: repeat(2, 1fr);
}

.af-appointment .af-choice-grid > .af-choice:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.af-appointment .af-choice-grid {
		grid-template-columns: 1fr;
	}
	.af-appointment .af-choice-grid > .af-choice:last-child:nth-child(odd) {
		grid-column: auto;
	}
}