/**
 * agenic Komponenten-CSS — Form-Block (Organismus) und Form-Panel (Sektion).
 *
 * Figma-Quellen, gemessen 18.08.2026:
 *   `form-block` 700:1002  (04 · Organisms) — Theme × Breakpoint, 4 Varianten
 *   `form-panel` 1863:34948 (05 · Sektionen) — Breakpoint × Gradient, 3 Varianten
 *
 * form-block gemessen: VERTICAL gap 32 (Values/spacing/l), Polster 32
 * (Mobil 24/16), Radius Values/radius/l, Fläche Surface/lightest mit
 * Border--subtle; dark → Surface/darkest mit Border--inverse.
 * form-panel gemessen: gap 64 (spacing/xxl), Polster 96/120, Radius unten
 * Values/radius/l, Inhalt zweispaltig 383 + 688 mit 64 Abstand.
 *
 * Die Gradient-Achse der Sektion ist ein Deko-Rechteck 1442×432 auf
 * Paint Style „Fusion | Gradients/fusion-basic--reverse-30" — im Code ein
 * ::after, weil Elementor `.e-con::before` für seinen Overlay-Layer belegt.
 *
 * OHNE VERSAND: Das Formular rendert, verarbeitet aber nichts. Kein Nonce,
 * keine Validierung, kein Empfänger, kein Spamschutz. Entscheidung Vincent
 * 18.08.2026 — die Backend-Frage ist offen und gehört vor den Livegang.
 *
 * Markup: widgets/form-block.php, widgets/form-panel.php.
 * Kontrakt Formularpaket v0.1. 1 tmp-Punkt (Polster 96 der Sektion).
 */

.ag-form-block,
.ag-form-block *,
.ag-form-panel,
.ag-form-panel * {
	box-sizing: border-box;
}

/* ── Form-Block (Organismus) ────────────────────────────────── */

.ag-form-block {
	--ag-form-block-bg: var(--color-surface-lightest);     /* Figma Surface/lightest */
	--ag-form-block-border: var(--color-border-hairline);  /* Figma Border--subtle */
	--ag-form-block-radius: var(--radius-l);               /* Figma Values/radius/l = 24 */
	--ag-form-block-gap: var(--spacing-l);                 /* Figma spacing/l = 32 */
	--ag-form-block-polster: var(--spacing-l);             /* Figma: 32 */
	--ag-form-block-titel: var(--color-text-standard);
	--ag-form-block-copy: var(--color-text-grey);
	--ag-form-block-space-before: 0px;
	--ag-form-block-space-after: 0px;

	display: flex;
	flex-direction: column;
	gap: var(--ag-form-block-gap);
	padding: var(--ag-form-block-pad-oben, var(--ag-form-block-polster)) var(--ag-form-block-polster) var(--ag-form-block-pad-unten, var(--ag-form-block-polster));
	margin-block-start: var(--ag-form-block-space-before);
	margin-block-end: var(--ag-form-block-space-after);
	background: var(--ag-form-block-bg);
	border: var(--field-border-width) solid var(--ag-form-block-border);
	border-radius: var(--ag-form-block-radius);
	font-family: var(--font-sans);
}

.ag-form-block__header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);                                 /* Figma spacing/s = 8 */
}

/* Headline/M: 24/32 Medium */
.ag-form-block__titel {
	margin: 0;
	font-size: var(--fs-600);
	line-height: calc(32 / 24);
	font-weight: var(--fw-medium);
	letter-spacing: -0.02em;
	color: var(--ag-form-block-titel);
}

/* Copy/S: 14/19 Light */
.ag-form-block__copy {
	margin: 0;
	font-size: var(--fs-200);
	line-height: calc(19 / 14);
	font-weight: var(--fw-light);
	letter-spacing: -0.02em;
	color: var(--ag-form-block-copy);
}

/* Zwei Felder nebeneinander — Quelle: row HORIZONTAL gap 24 (spacing/ml).
   Als Grid, damit beide Spalten gleich breit bleiben, auch wenn ein Feld
   einen Hinweistext trägt und das andere nicht. */
.ag-form-block__felder {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ag-form-block-gap) var(--spacing-ml);       /* Figma: 32 / 24 */
	align-items: start;
}

.ag-form-block__feld--voll {
	grid-column: 1 / -1;
}

.ag-form-block__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-ms);                                /* Figma: 12 */
}

/* Theme dunkel — Quelle: Surface/darkest mit Border--inverse. */
.ag-form-block--dunkel {
	--ag-form-block-bg: var(--color-surface-darkest);      /* Figma Surface/darkest */
	--ag-form-block-border: var(--color-border-inverse);   /* Figma Border--inverse */
	--ag-form-block-titel: var(--color-text-inverse-soft);
	--ag-form-block-copy: var(--color-text-grey-inverse);
}

/* ── Form-Panel (Sektion) ───────────────────────────────────── */

.ag-form-panel {
	--ag-form-panel-gap: var(--spacing-xxl);               /* Figma spacing/xxl = 64 */
	--ag-form-panel-radius: var(--radius-l);               /* Figma Values/radius/l */
	--ag-form-panel-space-before: 0px;
	--ag-form-panel-space-after: 0px;

	/* 24.09.2026 von 96px auf die Leiterstufe 64 gezogen — der Mobilzweig
	   weiter unten stand schon auf `--spacing-xxl`. 96 war eine ungebundene
	   Direktangabe (`tmp`) und keine Stufe der Leiter; zusammen mit dem
	   Sektionsfuß ergab sie 64 + 96 = 160 statt der 128, die das Regelset
	   zwischen zwei Abschnitten vorsieht — gemessen auf der Startseite 3234
	   zwischen dem Akkordeon und der Trennlinie „Lassen Sie uns über Ihre
	   Prozesse sprechen".
	   Dieselbe ungebundene 96 steckt laut dem abgelösten Kommentar noch in
	   stats-section, media-text-section und media-card-list — eigener
	   Durchgang, hier nicht mitgeändert. */
	--ag-form-panel-polster: var(--spacing-xxl);   /* 64 — bis 24.09.2026: 96px */

	position: relative;
	isolation: isolate;
	border-radius: 0 0 var(--ag-form-panel-radius) var(--ag-form-panel-radius);
	margin-block-start: var(--ag-form-panel-space-before);
	margin-block-end: var(--ag-form-panel-space-after);
	overflow: hidden;
	font-family: var(--font-sans);
}

.ag-form-panel__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--ag-form-panel-gap);
	padding: var(--ag-form-panel-pad-oben, var(--ag-form-panel-polster)) max(var(--spacing-ml), calc((100% - var(--content-width, 1200px)) / 2)) var(--ag-form-panel-pad-unten, var(--ag-form-panel-polster));
}

/* Achse Gradient=true — Deko-Rechteck der Quelle (1442×432, Paint Style
   „Fusion | Gradients/fusion-basic--reverse-30"). Als ::after, nicht
   ::before: Elementor belegt `.e-con::before` für seinen Overlay-Layer.
   Der Sektions-Container braucht zusätzlich `e-no-lazyload`, sonst
   entfernt Elementors Lazy-Load den Verlauf unterhalb des Folds.

   Lage neu gemessen am 18.08.2026 an der Instanz auf der Branchenseite
   (1715:19461): Das Band steht **unten bündig** — seine Unterkante fällt
   exakt mit der Sektionsunterkante zusammen (Abstand 0), es ist 432 hoch
   und ragt links und rechts je 1 px über.

   Der erste Bau rechnete stattdessen mit `top: 33%`. Das war ein
   Messfehler: Die 389 aus dem Gate-Scan sind der Abstand zum
   **Formularblock**, nicht zur Sektion — relativ zur Sektion beginnt das
   Band bei 763. Prozente wären ohnehin falsch gewesen, weil die reale
   Sektionshöhe am Inhalt hängt: Bei kürzerem Text wandert ein
   Prozentwert nach oben und schneidet mitten durch die Erläuterung. Die
   Verankerung unten hält, egal wie lang der Text wird. */
.ag-form-panel--gradient::after {
	content: '';
	position: absolute;
	inset-inline: -1px;                                    /* Quelle: 1442 bei 1440 Sektionsbreite */
	bottom: 0;                                             /* Quelle: bündig mit der Unterkante */
	height: 432px; /* tmp */                               /* Quelle: 432 — keine Stufe der Leiter */
	z-index: 0;
	background: var(--gradient-fusion-basic-reverse-30);
	pointer-events: none;
}

/* Zweispaltig: links die Erläuterung, rechts das Formular.
   Quelle: 383 + 64 + 688 = 1135 im 1200er Raster, also kein 1:1. */
.ag-form-panel__form-section {
	display: grid;
	grid-template-columns: minmax(0, 383fr) minmax(0, 688fr);
	gap: var(--ag-form-panel-gap);
	align-items: start;
}

.ag-form-panel__details {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-l);                                 /* Figma spacing/l = 32 */
}

/* Der Formularblock steht in der Sektion auf einer anderen Fläche als
   allein: Die Instanz überschreibt Surface/lightest auf Surface/light
   (gemessen 18.08.2026 an 1715:19461). Das ist kein Zufall, sondern
   nötig — auf dem hellen Sektionsgrund verschwände ein fast weißer
   Block, und über dem Verlaufsband braucht er Deckung. */
.ag-form-panel .ag-form-block {
	--ag-form-block-bg: var(--color-surface-light);        /* Figma Surface/light */
}

/* ── Karte für Quelle ClickDimensions (ag_form_panel, 17.09.2026) ──────────
   Maße 1:1 aus ag_hero_form_split__karte (Surface/light, Radius 24,
   Polster 32 / kompakt 24, Kopf Headline/M bzw. subblock-20). Keine eigene
   Figma-Quelle im form-panel — Rückspielpunkt FP-CD-1. Das Innere des
   Formulars steht in clickdimensions-form.css (.ag-cd-form). */
.ag-form-panel {
	--ag-form-panel-karte-bg: var(--color-surface-light);   /* Control karte_flaeche */
	--ag-form-panel-karte-radius: var(--radius-l);          /* 24 */
	--ag-form-panel-karte-polster: var(--spacing-l);        /* 32 */
	--ag-form-panel-karte-fg: var(--color-text-standard);
	--ag-form-panel-karte-muted: var(--color-text-grey);
}
.ag-form-panel__karte {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-l);
	padding: var(--ag-form-panel-karte-polster);
	background: var(--ag-form-panel-karte-bg);
	border-radius: var(--ag-form-panel-karte-radius);
	color: var(--ag-form-panel-karte-fg);
}
.ag-form-panel__karte-kopf {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
}
.ag-form-panel__karte-titel {
	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(--ag-titel-block-24m-fw);
}
.ag-form-panel__karte-copy {
	margin: 0;
	font-size: var(--fs-200);                               /* Copy/S */
	line-height: calc(19 / 14);
	font-weight: var(--fw-light);
	color: var(--ag-form-panel-karte-muted);
}
.ag-form-panel--karte-kompakt .ag-form-panel {
	--ag-form-panel-karte-polster: var(--spacing-ml);       /* 24 */
}
.ag-form-panel--karte-kompakt .ag-form-panel__karte {
	gap: var(--spacing-ml);
}
.ag-form-panel--karte-kompakt .ag-form-panel__karte-titel {
	font-size: var(--ag-titel-subblock-20-fs);              /* 20 (tmp in titel-stufen.css) */
	line-height: var(--ag-titel-subblock-20-lh);
}

/* Mobil — Grenze 768 = --bp-md (Festschreibung A5 offen).
   Die Quelle führt für Mobil nur Gradient=false; der Verlauf bleibt
   trotzdem erlaubt, weil er rein dekorativ ist. Paritätslücke vermerkt. */
@media (max-width: 767px) {

	.ag-form-block {
		--ag-form-block-polster: var(--spacing-ml);        /* Quelle Mobil: 24 / 16 */
		padding: var(--ag-form-block-pad-oben, var(--spacing-ml)) var(--spacing-m) var(--ag-form-block-pad-unten, var(--spacing-ml));
	}

	.ag-form-block__felder {
		grid-template-columns: 1fr;
	}

	.ag-form-panel {
		--ag-form-panel-gap: var(--spacing-l);             /* Quelle Mobil: 32 */
		--ag-form-panel-polster: var(--spacing-xxl);       /* Quelle Mobil: 64 */
	}

	/* Unten mobil höchstens 32 (Auftrag Vincent, QS 26.09.2026). min() statt
	   festem Wert: Ein kleinerer Wert aus „Innenabstand unten" gewinnt weiter,
	   ein größerer wird auf 32 gedeckelt. */
	.ag-form-panel__inner {
		padding: var(--ag-form-panel-pad-oben, var(--ag-form-panel-polster)) var(--spacing-m) min(var(--ag-form-panel-pad-unten, var(--spacing-l)), var(--spacing-l));
	}

	.ag-form-panel__form-section {
		grid-template-columns: 1fr;
	}

	.ag-form-panel__karte {
		padding: var(--spacing-ml);
	}
}