/* ==========================================================================
   ClickDimensions-Formular (SurveyJS „defaultV2") auf agenic-Tokens
   Handle: ag-clickdimensions-form · Scope: .ag-cd-form
   Geteilter Baustein für ag_hero_form_split und ag_form_panel (Quelle
   `clickdimensions`) — ausgelagert aus hero-form-split.css am 17.09.2026
   (dort seit 3.146.2 gewachsen, Projekt-Docs kontaktseite-elementor-bau-03-09
   und kontaktformular-zustaende-04-09). Regeln unverändert übernommen, nur
   der Scope heißt jetzt .ag-cd-form, die Größe .ag-cd-form--kompakt.
   Konsumenten setzen Fläche, Radius und Polster ihrer Karte selbst; hier
   steht nur das Innenleben des Formulars.
   ========================================================================== */
.ag-cd-form {
	box-sizing: border-box;
	min-height: var(--spacing-5xl);                                   /* Platzhalter, bis CDWidget.js gerendert hat */
}
/* Sobald CDWidget.js gerendert hat, fällt der Platzhalter weg (Auftrag Vincent,
   04.09.2026). Browser ohne `:has()` behalten ihn. */
.ag-cd-form:has(.sd-root-modern) {
	min-height: 0;
}
.ag-cd-form__hinweis {
	margin: 0;
	color: var(--color-text-grey);
	font-size: var(--fs-200);
}

/* ── Lader „wheel-puls" — bis CDWidget.js gerendert hat ─────────────────────
   Muster 21 aus dem Hintergrund-Set (Projekt-Doc hintergrund-set-prototyp-12-09,
   Auftrag Vincent, 17.09.2026): die sechs Blätter der Bildmarke leuchten
   reihum auf, versetzt um ein Sechstel der Dauer; die Marke atmet im Kreis,
   ohne sich zu drehen. Dauer loop-ambient (8 s) wie im Muster; Grundhelligkeit
   hier .25 statt .1, weil der Lader Inhalt ist, kein Hintergrund (Abweichung).
   Reihenfolge im Kreis nach dem Muster: agb3 · agb5 · agb4 · agb6 · agb1 · agb2 —
   die Pfade des Partials stehen in Dateireihenfolge agb1…agb6, daher die
   nth-child-Zuordnung. Ladeanzeigen laufen bewusst durch (WCAG 2.2.2 nimmt
   sie aus); bei prefers-reduced-motion steht die Marke still. */
.ag-cd-form__lader {
	--ag-cd-form-lader-dauer: var(--motion-duration-loop-ambient);
	--ag-cd-form-lader-deckung: .25;
	display: grid;
	place-items: center;
	min-height: var(--spacing-5xl);                                   /* 256 — wie der Platzhalter */
	color: var(--color-surface-brand-strong);
}
.ag-cd-form__lader-mark {
	display: block;
	width: var(--spacing-xxl);                                        /* 64 */
	height: auto;
}
.ag-cd-form__lader-mark path {
	opacity: var(--ag-cd-form-lader-deckung);
	animation: ag-cd-form-blatt-puls var(--ag-cd-form-lader-dauer) var(--motion-ease-inout) infinite;
	animation-delay: calc(var(--i) * var(--ag-cd-form-lader-dauer) / 6 * -1);
}
.ag-cd-form__lader-mark path:nth-child(1) { --i: 4; }
.ag-cd-form__lader-mark path:nth-child(2) { --i: 5; }
.ag-cd-form__lader-mark path:nth-child(3) { --i: 0; }
.ag-cd-form__lader-mark path:nth-child(4) { --i: 2; }
.ag-cd-form__lader-mark path:nth-child(5) { --i: 1; }
.ag-cd-form__lader-mark path:nth-child(6) { --i: 3; }
@keyframes ag-cd-form-blatt-puls {
	0%, 70%, 100% { opacity: var(--ag-cd-form-lader-deckung); }
	18%           { opacity: 1; }
}
.ag-cd-form:has(.sd-root-modern) .ag-cd-form__lader {
	display: none;
}
/* Höhe halten: Sobald die Bestätigungsseite steht, hält clickdimensions-init.js
   die zuletzt gemessene Formularhöhe in --ag-cd-form-hoehe fest — die Karte
   sackt nicht zusammen (Auftrag Vincent, 17.09.2026). */
.ag-cd-form:has(.sd-completedpage) {
	min-height: var(--ag-cd-form-hoehe, 0px);
}

/* ── ClickDimensions-Formular (SurveyJS „defaultV2") auf agenic-Tokens ──────
   Gemessen 03.09.2026 auf Seite 1633: CDWidget.js rendert kein iframe, sondern
   SurveyJS-Markup (.sd-root-modern) direkt in das Div, samt eigenem Stylesheet
   (345 kB, 215 Variablen) und CD-Vorgaben (Open Sans, Dunkelblau, Hellgrau, weiße
   Fragekarten mit Schatten, eigener Titel, Clear-Knopf). Die Anpassung läuft
   ausschließlich über die SurveyJS-Variablen und wenige Strukturregeln — alles
   innerhalb von .ag-cd-form, damit nichts nach außen bleedet.
   Ein einziges !important (Spalten-Mindestbreite K3-7, ab 768 px) — es schlägt
   einen Inline-Stil und ist dort begründet. Sonst laufen Strukturregeln über
   .sd-root-modern auf (0,3,0), weil das
   CD-Stylesheet zur Laufzeit NACH dem Widget-CSS eingehängt wird und bei
   Gleichstand gewinnt (gemessen 03.09.2026: Titel blieb mit (0,2,0) sichtbar).
   K3-5 ist seit 04.09.2026 erledigt: Der Absende-Knopf traegt den Verlauf des
   Atoms `ag_button` — seine Auswahl steht in `button.css`, nicht hier.
   TMP-Punkte: CD-eigener Titel und Clear-Knopf werden ausgeblendet, die
   Karte trägt den Titel aus dem Widget (K3-6). */
.ag-cd-form .sd-root-modern {
	--sjs-base-unit: var(--spacing-s);                                 /* 8 */
	--sjs-font-family: var(--font-sans);
	--sjs-font-size: var(--fs-300);                                    /* 16 */
	--sjs-corner-radius: var(--field-radius-pill);                     /* Figma Form/field-radius--pill */
	--sjs-general-backcolor: transparent;
	--sjs-general-backcolor-dim: transparent;                          /* keine graue Fläche */
	--sjs-general-backcolor-dim-light: var(--color-field-bg);          /* Figma Form/field-bg */
	--sjs-general-backcolor-dim-dark: var(--color-field-bg);
	--sjs-general-forecolor: var(--color-text-standard);
	--sjs-general-forecolor-light: var(--color-text-grey);
	--sjs-general-dim-forecolor: var(--color-text-standard);
	--sjs-general-dim-forecolor-light: var(--color-text-grey);
	--sjs-primary-backcolor: var(--color-brand-primary);               /* tmp K3-5 */
	--sjs-primary-backcolor-light: var(--color-surface-light);
	--sjs-primary-backcolor-dark: var(--color-brand-primary);
	--sjs-primary-forecolor: var(--color-text-inverse);
	--sjs-secondary-backcolor: var(--color-brand-primary);
	--sjs-border-default: var(--color-field-border);                   /* Figma Form/field-border */
	--sjs-border-light: var(--color-field-border);
	--sjs-border-inside: var(--color-field-border);
	--sjs-question-background: transparent;
	--sjs-questionpanel-backcolor: transparent;
	--sjs-questionpanel-hovercolor: transparent;
	--sjs-editorpanel-backcolor: var(--color-field-bg);
	--sjs-editor-background: var(--color-field-bg);
	--sjs-shadow-small: none;
	--sjs-shadow-medium: none;
	--sjs-shadow-large: none;
	--sjs-font-questiontitle-family: var(--font-sans);
	--sjs-font-questiontitle-weight: var(--fw-medium);                 /* Headline/S 16 Medium */
	--sjs-font-questiontitle-size: var(--fs-300);
	--sjs-font-questiontitle-color: var(--color-text-standard);
	--sjs-font-editorfont-family: var(--font-sans);
	--sjs-font-editorfont-size: var(--fs-300);
	--sjs-font-editorfont-color: var(--color-text-standard);
	--sjs-font-questiondescription-color: var(--color-text-grey);
	--sjs-special-red: var(--color-field-border-error);                /* Pflicht-Stern, Fehler */
	--sd-base-padding: 0px;
	--sd-base-vertical-padding: var(--spacing-m);
	background: transparent;
	letter-spacing: normal;
}
/* CD-eigener Formulartitel und Aktionsleiste („Clear") entfallen — die Karte
   trägt Titel und Erläuterung aus dem Widget (K3-6). */
.ag-cd-form .sd-root-modern .sd-container-modern__title,
.ag-cd-form .sd-root-modern .sd-action-title-bar,
.ag-cd-form .sd-root-modern .sv_custom_header {
	display: none;
}
/* Fragekarten ohne Rahmen, Schatten und Innenpolster — die Karte ist das Widget. */
.ag-cd-form .sd-root-modern .sd-element--with-frame,
.ag-cd-form .sd-root-modern .sd-question {
	padding: 0;
	box-shadow: none;
	background: transparent;
	border-radius: 0;
}
.ag-cd-form .sd-root-modern .sd-body,
.ag-cd-form .sd-root-modern .sd-body.sd-body--responsive,
.ag-cd-form .sd-root-modern .sd-page.sd-body__page,
.ag-cd-form .sd-root-modern .sd-container-modern {
	padding: 0;
	margin: 0;
	max-width: none;
}
.ag-cd-form .sd-root-modern .sd-row.sd-page__row {
	/* SurveyJS-Raster: Zeile um die Rinne nach links gezogen, Spalten polstern
	   links — dasselbe Modell wie das Original (dort 16), hier Rinne 24 wie in
	   der Quelle (row gap 24). Gemessen 03.09.2026: ohne den Ausgleich lief die
	   Zeile 16 px aus der Karte heraus. */
	--ag-cd-rinne: var(--spacing-ml);
	margin: var(--spacing-ml) 0 0 calc(-1 * var(--ag-cd-rinne));
	width: calc(100% + var(--ag-cd-rinne));
	column-gap: 0;
	row-gap: var(--spacing-ml);                                          /* umbrechende Spalten (K3-7) */
}
.ag-cd-form .sd-root-modern .sd-row.sd-page__row:first-of-type { margin-top: 0; }
.ag-cd-form .sd-root-modern .sd-row.sd-page__row > div {
	padding: 0 0 0 var(--ag-cd-rinne);
}
/* K3-7, gelöst 04.09.2026 (Entscheidung Vincent): CD setzt jeder Spalte per
   INLINE-Stil `min-width: min(100%, 300px)`. Drei Spalten brauchen damit 900 px,
   die Karte hat 768 — Nachname fiel in eine zweite Zeile und wurde volle Breite
   (Zeile 151 statt 70 hoch). Ein Inline-Stil ist nur mit !important zu schlagen;
   das ist die einzige Ausnahme in diesem Blatt und eng auf die Zeilenspalten
   gefasst. Sie entfällt, sobald die Feldbreiten in ClickDimensions gesetzt sind.
   Die Zeilenaufteilung selbst (drittel/halb/voll) kommt weiter aus CD. */
@media (min-width: 768px) {
	.ag-cd-form .sd-root-modern .sd-row.sd-page__row > div {
		min-width: 0 !important;
	}
}
/* Unter 768 bleibt CDs eigene Mindestbreite stehen — sie ist dort richtig:
   `min(100%, 300px)` laesst bei einer Zeilenbreite von 362 nur EIN Feld je
   Zeile zu, und genau so gehoert ein Formular auf das Telefon. Mit der
   Ueberstimmung standen dort drei Felder zu je 121 px nebeneinander
   (gemessen 04.09.2026 bei 386 px Ansichtsbreite). */
/* Eingabefelder wie ag-form-field: 48 hoch, 1 px Kontur, Pillenradius. */
.ag-cd-form .sd-root-modern .sd-input.sd-text,
.ag-cd-form .sd-root-modern .sd-input.sd-comment,
.ag-cd-form .sd-root-modern .sd-input.sd-dropdown {
	box-sizing: border-box;
	width: 100%;
	max-width: none;                                                   /* CD deckelt E-Mail-Felder */
	min-height: var(--field-height-m);                                 /* Figma Form/field-height-m = 48 */
	padding: var(--spacing-ms) var(--spacing-m);                       /* 12 / 16 */
	border: var(--field-border-width) solid var(--color-field-border);
	border-radius: var(--field-radius-pill);
	box-shadow: none;
	background: var(--color-field-bg);
	color: var(--color-text-standard);
	font: inherit;
	font-size: var(--fs-300);
	line-height: calc(24 / 16);
}
.ag-cd-form .sd-root-modern .sd-input.sd-comment {
	border-radius: var(--field-radius);                                /* mehrzeilig: Figma Form/field-radius */
	resize: vertical;
}
.ag-cd-form .sd-root-modern .sd-input.sd-text:focus-visible,
.ag-cd-form .sd-root-modern .sd-input.sd-comment:focus-visible,
.ag-cd-form .sd-root-modern .sd-input.sd-dropdown:focus-within {
	outline: none;
	border-width: var(--field-border-width-focus);
	border-color: var(--color-border);
}
.ag-cd-form .sd-root-modern .sd-input::placeholder {
	color: var(--color-text-placeholder, var(--color-text-grey));
}

/* Auswahlfeld (Anrede). CD rendert kein <select>, sondern ein Div
   `.sd-input.sd-dropdown` mit Wertzeile und Chevron-Knopf — die Regel oben
   greift nur `.sd-text`/`.sd-comment`, das Feld fiel deshalb bis 3.153.0 durch
   und trug CDs Optik (45 hoch, 0 px Kontur, 0 Radius, Chevron in #f5f6f7 auf
   #f8fafa, also unsichtbar). Gemessen 04.09.2026 auf Seite 1633. */
.ag-cd-form .sd-root-modern .sd-input.sd-dropdown {
	display: flex;
	align-items: center;
	gap: var(--spacing-s);
}
/* Die Wertzeile bringt eigenes Polster mit — sonst polstert das Feld doppelt.
   Das innere Filter-Input trägt zusätzlich CDs Feldoptik (1 px #666, Radius 3,
   gemessen 04.09.2026) — das gab einen Doppelrahmen im Anrede-Feld. Kontur,
   Schatten und Fokusring gehören dem äußeren `.sd-dropdown`, nicht dem Input. */
.ag-cd-form .sd-root-modern .sd-dropdown__value,
.ag-cd-form .sd-root-modern .sd-dropdown__filter-string-input {
	padding: 0;
	margin: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	width: 100%;
	line-height: inherit;
}
/* Leer ist die Wertzeile inhaltslos; das Filter-Input liegt absolut darin und
   zeigt den Platzhalter. Deshalb füllt die Wertzeile die Feldhöhe (stretch),
   sonst hätte sie 0 px und der Platzhalter wäre unsichtbar. */
.ag-cd-form .sd-root-modern .sd-dropdown__value {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
}
.ag-cd-form .sd-root-modern .sd-dropdown__filter-string-input {
	inset: 0;
	height: 100%;
	min-height: 0;
}
.ag-cd-form .sd-root-modern .sd-dropdown--empty .sd-dropdown__value {
	color: var(--color-text-placeholder, var(--color-text-grey));
}
/* Chevron: eigener Knopf, deshalb Doppelklasse gegen `.elementor-kit-7 button`
   (0,1,1) — hier (0,3,0). Ohne Reset erbt er Verlauf, Radius 999 und 22 px
   Schriftgrad aus dem Kit. */
.ag-cd-form .sd-root-modern .sd-dropdown-action-bar {
	flex: 0 0 auto;
	margin: 0;
}
.ag-cd-form .sd-root-modern .sd-editor-button-item,
.ag-cd-form .sd-root-modern button.sd-editor-button-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-ml);                                          /* 24 */
	height: var(--spacing-ml);
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: var(--color-text-standard);
	font-size: var(--fs-500);                                          /* 20 */
}
.ag-cd-form .sd-root-modern .sd-editor-button-item svg {
	width: var(--spacing-m);                                           /* 16 */
	height: var(--spacing-m);
	fill: currentColor;
}
/* Ausklappliste — liegt im Widget, nicht im Body; CD gibt ihr Radius 999. */
.ag-cd-form .sd-root-modern .sv-popup__container {
	background: var(--color-field-bg);
	border: var(--field-border-width) solid var(--color-field-border);
	border-radius: var(--field-radius);                                /* 12 */
}
.ag-cd-form .sd-root-modern .sv-list__item-body {
	padding: var(--spacing-s) var(--spacing-m);
	font-size: var(--sjs-font-size);                                   /* folgt der Kartengröße: 16 bzw. 14 kompakt */
	color: var(--color-text-standard);
}
/* Fragetitel wie field-label: Headline/S, Abstand 8 zum Feld. */
.ag-cd-form .sd-root-modern .sd-question__header.sd-element__header {
	padding: 0 0 var(--spacing-s) 0;
}
.ag-cd-form .sd-root-modern .sd-title.sd-question__title {
	font-size: var(--fs-300);
	line-height: calc(21 / 16);
	font-weight: var(--fw-medium);
	color: var(--color-text-standard);
}
.ag-cd-form .sd-root-modern .sd-question__required-text {
	color: var(--color-field-border-error);
}
/* Auswahlgruppen (Anrede, Einwilligung) — Zeilen ohne Kartenoptik. */
.ag-cd-form .sd-root-modern .sd-selectbase__item,
.ag-cd-form .sd-root-modern .sd-item {
	padding: 0;
}
.ag-cd-form .sd-root-modern .sd-selectbase__label {
	gap: var(--spacing-ms);
	font-size: var(--fs-300);
	line-height: calc(21 / 16);
}
.ag-cd-form .sd-root-modern .sd-item__decorator {
	box-shadow: 0 0 0 var(--field-border-width) var(--color-field-border);
	background: var(--color-field-bg);
}
/* Absenden: Maße wie ag_button Größe M (48 bzw. 40 kompakt). Fläche, Farbe,
   Hover-Tint und Fokusring kommen seit 04.09.2026 aus `button.css` — der
   Knopf steht dort in den Selektorlisten des Atoms (K3-5 erledigt). Deshalb
   hier KEIN background und KEIN color: sonst gäbe es zwei Quellen. */
.ag-cd-form .sd-root-modern .sd-navigation__complete-btn,
.ag-cd-form .sd-root-modern .sd-btn.sd-navigation__complete-btn {
	box-sizing: border-box;
	min-height: var(--field-height-m);
	padding: var(--spacing-ms) var(--spacing-ml);
	border: 0;
	border-radius: var(--radius-max);
	font: inherit;
	font-size: var(--fs-300);
	font-weight: var(--fw-medium);
	box-shadow: none;
	cursor: pointer;
}
.ag-cd-form .sd-root-modern .sd-action-bar.sd-footer,
.ag-cd-form .sd-root-modern .sd-body__navigation {
	padding: var(--spacing-l) 0 0 0;
	justify-content: flex-start;
}

/* ── Kompakt (Control karte_groesse der Konsumenten) ──────────────────────
   Felder 40 statt 48 (tmp: es gibt nur --field-height-m; 40 = m − spacing/s),
   Text Copy/S 14. Die Figma-Quelle zeigt die Standardgröße — Rückspielpunkt.
   Doppelklasse: (0,4,0) wie vor der Auslagerung, sonst verliert Kompakt gegen
   die .sd-btn-Doppelklasse des Grundblocks (gemessen 17.09.2026: Knopf 48 statt 40). */
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern {
	--sjs-font-size: var(--fs-200);                                    /* 14 */
	--sjs-font-questiontitle-size: var(--fs-200);
	--sjs-font-editorfont-size: var(--fs-200);
	--sd-base-vertical-padding: var(--spacing-ms);
}
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-row.sd-page__row {
	margin-top: var(--spacing-m);                                      /* 16 */
	row-gap: var(--spacing-m);
}
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-input.sd-text,
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-input.sd-comment,
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-input.sd-dropdown {
	min-height: calc(var(--field-height-m) - var(--spacing-s));        /* 40, tmp */
	padding: var(--spacing-s) var(--spacing-m);                        /* 8 / 16 */
	font-size: var(--fs-200);
	line-height: calc(20 / 14);
}
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-title.sd-question__title {
	font-size: var(--fs-200);
	line-height: calc(19 / 14);
}
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-question__header.sd-element__header {
	padding-bottom: var(--spacing-xs);                                 /* 4 */
}
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-selectbase__label {
	font-size: var(--fs-200);
	line-height: calc(19 / 14);
}
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-navigation__complete-btn {
	min-height: calc(var(--field-height-m) - var(--spacing-s));        /* 40, tmp */
	padding: var(--spacing-s) var(--spacing-ml);
	font-size: var(--fs-200);
}
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-action-bar.sd-footer,
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-body__navigation {
	padding-top: var(--spacing-ml);
}

/* Blockpolster des Auswahlfelds — muss NACH den beiden Feldregeln stehen.
   Der Chevron-Knopf ist 24 hoch und damit höher als eine Textzeile; mit
   `box-sizing: border-box` wuchs das Feld dadurch auf 42 (kompakt) bzw. 50
   (Standard) statt auf 40/48. Kleineres Blockpolster gibt die Höhe an die
   Mindesthöhe zurück, `align-items: center` hält die Optik. Gemessen
   04.09.2026 auf Seite 1633. */
.ag-cd-form .sd-root-modern .sd-input.sd-dropdown,
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-input.sd-dropdown {
	padding-block: var(--spacing-xs);                                  /* 4 */
}

/* ── Fehlermeldung: unter dem Feld, innerhalb der Spalte ───────────────────
   Auftrag Vincent, 04.09.2026 („Fehlerfelder verzerren alles"). Entscheidung
   Vincent, 04.09.2026: Meldung UNTER das Feld.

   Gemessen im Fehlerzustand auf Seite 1633 (Ansicht 2086, Karte 792 breit):
   Die Box ist das ERSTE Kind der Frage — steht also über Label und Feld — und
   trägt aus dem CD-Blatt `margin: 0 -40px` und `position: sticky`. Sie war
   dadurch 312 statt 232 px breit, ragte je 40 px in die Nachbarspalte und
   schob beim Erscheinen die ganze Zeile nach unten. Der Radius
   `999px 999px 0 0` stammt aus unserem eigenen `--sjs-corner-radius`, der
   Schriftgrad war 10,5 px (0,75 × 14) — beides unbeabsichtigt.

   Die Frage wird zur Flex-Spalte; nur die Box bekommt `order: 1`, alle anderen
   Kinder behalten 0 und damit ihre DOM-Reihenfolge. Das trägt auch bei
   Fragetypen ohne `sd-question__content` (Radiogruppe „Zustimmung
   Newsletter"), wo eine feste Ordnung je Kind die Reihenfolge zerreißen würde.

   Fläche, Innenpolster und Radius sind am 07.09.2026 auf Wunsch von Vincent
   entfallen — die Meldung ist nur noch Icon plus Textzeile. Der eigene Radius
   ist mit heraus; gemessen steht damit wieder CDs `999px 999px 0 0` im
   errechneten Stil, das bleibt aber ohne Fläche unsichtbar.

   Damit steht der Text auf der Kartenfläche statt auf der Feldfläche:
   `--color-text-error` (#c0362c) erreicht dort gemessene 4,29 : 1 und liegt
   unter den 4,5 aus WCAG 1.4.3 (Text unter 18,66 px); auf `--color-field-bg`
   waren es 5,27 : 1. Offen als Finding KF-1 — ein dunklerer Fehlerton für
   helle Flächen ist eine Token-Entscheidung und wird nicht hier getroffen.
   Icon und rote Feldkontur tragen die Bedeutung mit: Farbe ist nie der
   einzige Bedeutungsträger (CD-Grundregel Barrierefreiheit). */
.ag-cd-form .sd-root-modern .sd-question {
	display: flex;
	flex-direction: column;
}
.ag-cd-form .sd-root-modern .sd-question__erbox.sd-error,
.ag-cd-form .sd-root-modern .sd-element__erbox.sd-error {
	/* Doppelklasse `__erbox.sd-error` — (0,4,0). CD trägt für dieselbe Box
	   `.sd-element--with-frame.sd-question--title-top > .sd-question__erbox--above-question`
	   mit (0,3,0) und wird zur Laufzeit NACH diesem Blatt eingehängt; bei
	   Gleichstand gewinnt CD. Gemessen 04.09.2026: margin-bottom blieb bei 24. */
	order: 1;                                                          /* ans Ende der Spalte */
	position: static;                                                  /* CD: sticky */
	box-sizing: border-box;
	/* CD gibt der Box `width: calc(100% + 2 * var(--sd-base-padding))` und
	   `margin-right: calc(-1 * var(--sd-base-padding))`. `--sd-base-padding`
	   steht auf `.sd-root-modern` zwar auf 0, wird von SurveyJS auf
	   `.sd-element--with-frame` aber auf 40 zurückgesetzt — gemessen 312 statt
	   232 px in der Drittelspalte, also 80 px Überhang nach rechts. */
	width: 100%;
	min-height: 0;                                                     /* CD deckelt sonst auf 62 statt 36 */
	height: auto;
	display: flex;
	flex-direction: row;                                               /* CD: column — Icon stand über dem Text (Box 62 statt 36) */
	align-items: flex-start;
	gap: var(--spacing-s);                                             /* 8 */
	margin: var(--spacing-s) 0 0 0;                                    /* CD: 0 -40px, unten 24 */
	padding: 0;                                                        /* Auftrag Vincent, 07.09.2026 */
	background: none;                                                  /* Auftrag Vincent, 07.09.2026 */
	color: var(--color-text-error);
	font-size: var(--fs-200);                                          /* 14, CD: 10,5 */
	line-height: calc(20 / 14);
	animation: ag-cd-form-fehler-ein var(--motion-duration-xs) var(--motion-ease-standard) both;
}
/* Warnzeichen als Maske: die Signalfarbe trägt das Icon, nicht den Text.
   Das SVG hat keine Füllangabe — in einer Maske zählt nur die Deckung, damit
   bleibt das Blatt frei von Hex-Werten (gleiches Muster wie divider.css). */
.ag-cd-form .sd-root-modern .sd-question__erbox.sd-error::before {
	content: "";
	flex: 0 0 auto;
	width: var(--fs-300);                                              /* 16 */
	height: var(--fs-300);
	margin-top: calc((20px - var(--fs-300)) / 2);                      /* optische Mitte der ersten Zeile */
	background: var(--color-field-border-error);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a1 1 0 011 1v3.6a1 1 0 01-2 0V5.2a1 1 0 011-1zm0 8.3a1.15 1.15 0 110-2.3 1.15 1.15 0 010 2.3z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a1 1 0 011 1v3.6a1 1 0 01-2 0V5.2a1 1 0 011-1zm0 8.3a1.15 1.15 0 110-2.3 1.15 1.15 0 010 2.3z'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
/* Kontur des fehlerhaften Feldes. Die Felder tragen `border`, nicht
   `box-shadow` — deshalb hier ebenfalls die Kontur, sonst gäbe es zwei Ringe. */
.ag-cd-form .sd-root-modern .sd-question--error .sd-input.sd-text,
.ag-cd-form .sd-root-modern .sd-question--error .sd-input.sd-comment,
.ag-cd-form .sd-root-modern .sd-question--error .sd-input.sd-dropdown {
	border-color: var(--color-field-border-error);
	transition: border-color var(--motion-duration-xs) var(--motion-ease-standard);
}

/* ── Bestätigungsseite (`.sd-completedpage`) ───────────────────────────────
   Auftrag Vincent, 04.09.2026 („Bestätigungsmeldung besser layouten").
   Gemessen: CD liefert eine `h3` mit 28 px Bold, zentriert, Farbe direkt
   gesetzt — die Karte ist sonst durchgehend linksbündig und liegt auf der
   Titelleiter. Die Meldung folgt jetzt der Kartenstufe (`subblock-20`,
   dieselbe wie „Ihre Anfrage") und steht links.

   Der TEXT bleibt CD-Sache: „Thank you for completing the form" kommt wie
   „Complete" und „Response required." aus der Spracheinstellung des Formulars
   in ClickDimensions (Entscheidung Vincent, 04.09.2026: dort auf Deutsch
   stellen, keine zweite Quelle im Code). Hier nur die Gestalt. */
.ag-cd-form .sd-root-modern .sd-completedpage {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-ms);                                            /* 12 */
	padding: 0;
	text-align: left;
	animation: ag-cd-form-danke-ein var(--motion-duration-s) var(--motion-ease-standard) both;
}
.ag-cd-form .sd-root-modern .sd-completedpage::before {
	content: "";
	width: var(--spacing-l);                                           /* 32 */
	height: var(--spacing-l);
	background: var(--gradient-fusion-basic);                          /* Haken in der Marke (Fusion), Auftrag Vincent 17.09.2026 — vorher Signalgrün */
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.7 7.7l-5.6 5.6a1 1 0 01-1.42 0L7.3 12.9a1 1 0 011.4-1.42l2 2 4.9-4.9a1 1 0 011.4 1.42z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.7 7.7l-5.6 5.6a1 1 0 01-1.42 0L7.3 12.9a1 1 0 011.4-1.42l2 2 4.9-4.9a1 1 0 011.4 1.42z'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
.ag-cd-form .sd-root-modern .sd-completedpage h1,
.ag-cd-form .sd-root-modern .sd-completedpage h2,
.ag-cd-form .sd-root-modern .sd-completedpage h3,
.ag-cd-form .sd-root-modern .sd-completedpage h4 {
	margin: 0;
	font-size: var(--ag-titel-block-24m-fs);                           /* Headline/M 24/32 Medium */
	line-height: var(--ag-titel-block-24m-lh);
	font-weight: var(--fw-medium);                                     /* CD: 700 */
	color: var(--color-text-standard);
	text-align: left;
}
.ag-cd-form .sd-root-modern .sd-completedpage p,
.ag-cd-form .sd-root-modern .sd-completedpage span {
	font-size: var(--fs-300);
	line-height: calc(24 / 16);
	color: var(--color-text-grey);
}
/* Kompakte Karte: Überschrift eine Stufe kleiner — wie der Kartentitel. */
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-completedpage h1,
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-completedpage h2,
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-completedpage h3,
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-completedpage h4 {
	font-size: var(--ag-titel-subblock-20-fs);                         /* 20, wie „Ihre Anfrage" */
	line-height: var(--ag-titel-subblock-20-lh);
}
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-completedpage p,
.ag-cd-form.ag-cd-form--kompakt .sd-root-modern .sd-completedpage span {
	font-size: var(--fs-200);
	line-height: calc(20 / 14);
}

/* Bewegung: kurz für den Fehler (er erscheint während der Eingabe), etwas
   ruhiger für die Bestätigung (sie löst das ganze Formular ab). Wege aus der
   Motion-Leiter — `distance/shift` 6 px bzw. `distance/reveal` 36 px zu weit
   für einen Kartenwechsel, deshalb die kleine Stufe. */
@keyframes ag-cd-form-fehler-ein {
	from { opacity: 0; transform: translateY(calc(-1 * var(--motion-distance-shift))); }
	to   { opacity: 1; transform: none; }
}
@keyframes ag-cd-form-danke-ein {
	from { opacity: 0; transform: translateY(var(--spacing-ms)); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ag-cd-form__lader-mark path { animation: none; opacity: 1; }
	.ag-cd-form .sd-root-modern .sd-question__erbox,
	.ag-cd-form .sd-root-modern .sd-element__erbox,
	.ag-cd-form .sd-root-modern .sd-completedpage {
		animation: none;
	}
	.ag-cd-form .sd-root-modern .sd-question--error .sd-input.sd-text,
	.ag-cd-form .sd-root-modern .sd-question--error .sd-input.sd-comment,
	.ag-cd-form .sd-root-modern .sd-question--error .sd-input.sd-dropdown {
		transition: none;
	}
}