/**
 * Codewerk Forms — Frontend-Styles
 *
 * BEM-Klassen mit Prefix .cod-form / .cod-thankyou / .cod-form-popup.
 * CSS Custom Properties scoped auf .cod-form — Theme-Variablen (Elementor)
 * werden bevorzugt, sodass das Theme durchschlagen kann.
 */

/* ─── Box-Sizing Reset (isoliert auf Plugin-Scope) ──────────────────────── */

.cod-form,
.cod-form *,
.cod-form *::before,
.cod-form *::after,
.cod-form-popup,
.cod-form-popup *,
.cod-form-popup *::before,
.cod-form-popup *::after {
	box-sizing: border-box;
}

/* ─── Design-Tokens ──────────────────────────────────────────────────────── */

.cod-form {
	/* Radius: dezent, B2B-Ton */
	--cod-radius:        3px;
	/* Vertikaler Abstand zwischen Feldern */
	--cod-spacing-y:     14px;
	/* Typografie: Default Codewerk-Dunkelblau, unabhängig vom Theme. Kann per
	   Variable überschrieben werden. */
	--cod-color-text:    #1a2a4f;
	--cod-color-muted:   rgba(0, 0, 0, .55);
	--cod-color-border:  rgba(0, 0, 0, .2);
	/* Focus-Farbe: Elementor-Primary bevorzugt, Fallback auf Codewerk-Blau */
	--cod-color-focus:   var(--e-global-color-primary, #0066cc);
	/* Accent für Buttons: Elementor-Accent bevorzugt */
	--cod-color-accent:  var(--e-global-color-accent, var(--e-global-color-primary, #0066cc));
	--cod-color-error:   #b00020;
	--cod-color-success: #1a7f37;
	--cod-font:          inherit;
}

/* ─── Form-Hülle ─────────────────────────────────────────────────────────── */

.cod-form {
	font-family:  var(--cod-font);
	color:        var(--cod-color-text);
	line-height:  1.5;
	max-width:    560px;
}

.cod-form--inline {
	width: 100%;
}

/* ─── Steps-Navigation (Breadcrumb-Leiste) ───────────────────────────────── */

.cod-form__steps-nav {
	margin-bottom: 20px;
}

.cod-form__steps-list {
	display:         flex;
	gap:             8px;
	list-style:      none;
	margin:          0;
	padding:         0;
	flex-wrap:       wrap;
}

.cod-form__steps-item {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   .8125rem;
	color:       var(--cod-color-muted);
	cursor:      default;
}

.cod-form__steps-item--active {
	color:       var(--cod-color-text);
	font-weight: 600;
}

.cod-form__steps-index {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            22px;
	height:           22px;
	border-radius:    50%;
	border:           1px solid currentColor;
	font-size:        .75rem;
	font-weight:      600;
	flex-shrink:      0;
}

.cod-form__steps-item--active .cod-form__steps-index {
	background-color: var(--cod-color-accent);
	border-color:     var(--cod-color-accent);
	color:            #fff;
}

/* ─── Step-Block ─────────────────────────────────────────────────────────── */

.cod-form__step {
	/* Sichtbarkeit per hidden-Attribut gesteuert, kein eigenes display nötig */
}

.cod-form__step-title {
	font-size:     1.0625rem;
	font-weight:   600;
	margin:        0 0 14px;
}

.cod-form__step-description {
	margin:     0 0 14px;
	color:      var(--cod-color-muted);
	font-size:  .9375rem;
}

/* ─── Feld-Wrapper ───────────────────────────────────────────────────────── */

.cod-form__field {
	display:         flex;
	flex-direction:  column;
	gap:             4px;
	margin-bottom:   var(--cod-spacing-y);
}

.cod-form__field:last-child {
	margin-bottom: 0;
}

/* ─── Label ──────────────────────────────────────────────────────────────── */

.cod-form__label {
	display:      block;
	font-size:    .875rem;
	font-weight:  500;
	color:        var(--cod-color-text);
}

.cod-form__required {
	color:       var(--cod-color-error);
	margin-left: 2px;
}

/* ─── Floating-Label (Material-Style) ────────────────────────────────────────
   Markup-Konvention: Wrapper `.cod-form__field--floating` mit `position:relative`,
   Input/Textarea direkt gefolgt vom `<label class="cod-form__floating-label">`.
   Logik per `:placeholder-shown`-Pseudoklasse: solange der Input ein
   Placeholder zeigt (also leer ist) und nicht fokussiert ist, sitzt das Label
   über dem Input wie ein Placeholder. Bei Fokus oder ausgefülltem Wert
   verschiebt es sich nach oben links und wird kleiner.
   Voraussetzung: das Input hat einen Placeholder (im Renderer wird ggf. ein
   Space als Placeholder-Fallback gesetzt). */

.cod-form__field--floating {
	position: relative;
	gap: 0;
}

.cod-form__field--floating .cod-form__input,
.cod-form__field--floating .cod-form__textarea {
	padding-top:    18px;
	padding-bottom: 6px;
}

.cod-form__field--floating .cod-form__textarea {
	padding-top: 22px;
}

/* Placeholder unsichtbar machen — das Floating-Label übernimmt seine Rolle. */
.cod-form__field--floating .cod-form__input::placeholder,
.cod-form__field--floating .cod-form__textarea::placeholder {
	color: transparent;
}

.cod-form__floating-label {
	position:        absolute;
	left:            10px;
	top:             50%;
	transform:       translateY(-50%);
	font-size:       .9375rem;
	font-weight:     400;
	color:           var(--cod-color-muted);
	pointer-events:  none;
	transition:      top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
	background:      transparent;
	max-width:       calc(100% - 20px);
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

/* Textarea: Label oben statt vertikal zentriert positionieren. */
.cod-form__field--floating.cod-form__field--textarea .cod-form__floating-label {
	top:        14px;
	transform:  none;
}

/* Aktiver Zustand: Input fokussiert ODER hat einen Wert (Placeholder verdeckt). */
.cod-form__field--floating .cod-form__input:focus + .cod-form__floating-label,
.cod-form__field--floating .cod-form__input:not(:placeholder-shown) + .cod-form__floating-label,
.cod-form__field--floating .cod-form__textarea:focus + .cod-form__floating-label,
.cod-form__field--floating .cod-form__textarea:not(:placeholder-shown) + .cod-form__floating-label,
.cod-form__field--floating.is-floating .cod-form__floating-label {
	top:         4px;
	transform:   none;
	font-size:   .6875rem;
	font-weight: 500;
	color:       var(--cod-color-focus);
}

/* JS-Fallback-Klasse `is-floating` (für Browser ohne `:placeholder-shown`). */
.cod-form__field--floating.cod-form__field--textarea.is-floating .cod-form__floating-label {
	top: 4px;
}

/* ─── Text-Inputs, E-Mail, Tel ───────────────────────────────────────────── */

.cod-form__input {
	display:          block;
	width:            100%;
	padding:          8px 10px;
	font-family:      inherit;
	font-size:        .9375rem;
	color:            var(--cod-color-text);
	background-color: #fff;
	border:           1px solid var(--cod-color-border);
	border-radius:    var(--cod-radius);
	outline:          none;
	transition:       border-color .15s, box-shadow .15s;
	/* Kein appearance-Override — Browser-Default für Text-Inputs ist korrekt */
}

.cod-form__input::placeholder {
	color:   var(--cod-color-muted);
	opacity: 1;
}

.cod-form__input:focus {
	border-color: var(--cod-color-focus);
	box-shadow:   0 0 0 2px color-mix(in srgb, var(--cod-color-focus) 20%, transparent);
}

/* Fallback für Browser ohne color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cod-form__input:focus {
		box-shadow: 0 0 0 2px rgba(0, 102, 204, .2);
	}
}

/* ─── Textarea ───────────────────────────────────────────────────────────── */

.cod-form__textarea {
	display:          block;
	width:            100%;
	padding:          8px 10px;
	font-family:      inherit;
	font-size:        .9375rem;
	color:            var(--cod-color-text);
	background-color: #fff;
	border:           1px solid var(--cod-color-border);
	border-radius:    var(--cod-radius);
	outline:          none;
	resize:           vertical;
	min-height:       96px;
	transition:       border-color .15s, box-shadow .15s;
}

.cod-form__textarea:focus {
	border-color: var(--cod-color-focus);
	box-shadow:   0 0 0 2px color-mix(in srgb, var(--cod-color-focus) 20%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cod-form__textarea:focus {
		box-shadow: 0 0 0 2px rgba(0, 102, 204, .2);
	}
}

/* ─── Select ─────────────────────────────────────────────────────────────── */

.cod-form__select {
	display:          block;
	width:            100%;
	padding:          8px 32px 8px 10px;
	font-family:      inherit;
	font-size:        .9375rem;
	color:            var(--cod-color-text);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 10px center;
	border:           1px solid var(--cod-color-border);
	border-radius:    var(--cod-radius);
	outline:          none;
	appearance:       none;
	-webkit-appearance: none;
	cursor:           pointer;
	transition:       border-color .15s, box-shadow .15s;
}

.cod-form__select:focus {
	border-color: var(--cod-color-focus);
	box-shadow:   0 0 0 2px color-mix(in srgb, var(--cod-color-focus) 20%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cod-form__select:focus {
		box-shadow: 0 0 0 2px rgba(0, 102, 204, .2);
	}
}

/* ─── Radio-Liste (kompakte vertikale Liste, keine Karten) ───────────────── */

.cod-form__radio-list {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.cod-form__radio-list-item {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	cursor:      pointer;
	font-size:   .9375rem;
	line-height: 1.4;
}

.cod-form__radio {
	flex-shrink:  0;
	margin-top:   .2em;
	accent-color: var(--cod-color-accent);
	width:        16px;
	height:       16px;
	cursor:       pointer;
}

.cod-form__radio:focus-visible {
	outline:        2px solid var(--cod-color-focus);
	outline-offset: 2px;
}

.cod-form__radio-label {
	color: var(--cod-color-text);
}

/* ─── Topic-Tiles (Kachel-Grid, Single-Choice) ───────────────────────────── */

/* Farb-Tokens: Codewerk-Brand-Werte, identisch mit cod-angebotsfinder.
   Lokal definiert, damit cod-forms unabhängig von cod-angebotsfinder bleibt. */
.cod-tiles {
	--cod-tile-bg:        #022b4d; /* Codewerk-Dunkelblau (= --cod-af-blue) */
	--cod-tile-selected:  #92EC40; /* Codewerk-Grün      (= --cod-af-green) */
	--cod-tile-text:      #ffffff;
	--cod-tile-text-dark: #022b4d; /* Text auf grünem Selected-Hintergrund */
}

/* Box-Sizing-Scoping gilt bereits über den .cod-form-Wrapper — kein
   zusätzlicher Reset nötig. */

.cod-tiles {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   10px;
}

/* Das versteckte Input aus dem Grid-Flow nehmen */
.cod-tiles input[type="hidden"] {
	display: none;
}

/* Popup-Kontext: 2 Spalten bleiben auch auf größeren Screens (kein 4er-Grid).
   Die Kacheln sind kompakter als im Angebotsfinder. */

button.cod-tile {
	/* Layout: Title oben links, Icon unten links (space-between) */
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	justify-content: space-between;
	padding:         16px;
	min-height:      150px;

	/* Grid-Cell-Fix: ohne min-width:0 zwingt min-content (langes Wort)
	   das Grid-Item, die Track-Breite zu sprengen — Label überläuft. */
	width:           100%;
	min-width:       0;
	max-width:       100%;
	box-sizing:      border-box;
	overflow-wrap:   anywhere;

	/* Codewerk-Look: dunkelblau mit weißer Outline */
	background:      var(--cod-tile-bg);
	border:          1.5px solid rgba(255, 255, 255, .6);
	border-radius:   10px;

	cursor:          pointer;
	font-family:     inherit;
	font-size:       1rem;
	font-weight:     700;
	color:           var(--cod-tile-text);
	line-height:     1.3;
	text-align:      left;
	transition:      border-color .15s, background-color .15s, box-shadow .15s, color .15s;
}

@media (max-width: 480px) {
	button.cod-tile {
		min-height: 120px;
		padding:    14px;
		font-size:  .9375rem;
	}
}

/* Hover: grün wie Selected — Background Codewerk-Grün, Text + Icon dunkelblau.
   Bei Tastatur-Bedienung wird der Hover-Style auch für :focus-visible angezeigt. */
button.cod-tile:hover {
	background-color: var(--cod-tile-selected);
	border-color:     var(--cod-tile-selected);
	color:            var(--cod-tile-text-dark);
}

button.cod-tile:hover .cod-tile__icon,
button.cod-tile:hover .cod-tile__label {
	color: var(--cod-tile-text-dark);
}

button.cod-tile:hover .cod-tile__icon img {
	filter: none;
}

/* Focus: sichtbarer Keyboard-Ring (a11y) */
button.cod-tile:focus-visible {
	outline:        3px solid var(--cod-tile-selected);
	outline-offset: 2px;
	border-color:   #fff;
}

/* Ausgewählter Zustand — grüner Hintergrund, dunkelblauer Text */
button.cod-tile[aria-pressed="true"],
button.cod-tile.cod-tile--selected {
	background-color: var(--cod-tile-selected);
	border-color:     var(--cod-tile-selected);
	color:            var(--cod-tile-text-dark);
	box-shadow:       0 0 0 2px rgba(146, 236, 64, .4);
}

/* Icon-Wrapper: unten links, kleinere Abmessungen als im Angebotsfinder */
button.cod-tile .cod-tile__icon {
	display:         flex;
	align-items:     center;
	justify-content: flex-start;
	width:           32px;
	height:          32px;
	flex-shrink:     0;
	color:           inherit;
}

/* Backward-Compat: <img>-Pfad-Variante */
button.cod-tile .cod-tile__icon img {
	width:      100%;
	height:     100%;
	object-fit: contain;
	display:    block;
	/* Weiß-Filter für dunklen Hintergrund */
	filter:     brightness(0) invert(1);
}

/* Auf Selected-State: kein Filter (Icon ist nun auf hellem Hintergrund) */
button.cod-tile[aria-pressed="true"] .cod-tile__icon img,
button.cod-tile.cod-tile--selected .cod-tile__icon img {
	filter: none;
}

/* Dashicon-Variante */
button.cod-tile .cod-tile__icon--dashicon {
	font-size: 24px;
	color:     inherit;
}

/* Codewerk-Icon-Font (iconcod-/icon-cod-*) — Größe kompakter als im AF.
   Die <img>-Regeln oben bleiben als Backward-Compat für Datei-Pfad-Variante. */
button.cod-tile .cod-tile__icon i[class^="iconcod-"],
button.cod-tile .cod-tile__icon i[class*=" iconcod-"] {
	font-size:   30px;
	line-height: 1;
	display:     inline-block;
	color:       inherit;
}

@media (max-width: 480px) {
	button.cod-tile .cod-tile__icon i[class^="iconcod-"],
	button.cod-tile .cod-tile__icon i[class*=" iconcod-"] {
		font-size: 26px;
	}
}

/* Label: oben links, Bold — Reihenfolge im DOM: Label zuerst, dann Icon.
   Durch justify-content: space-between und flex-direction: column wandern
   sie automatisch an die richtigen Positionen. */
button.cod-tile .cod-tile__label {
	display:         block;
	width:           100%;
	min-width:       0;
	max-width:       100%;
	box-sizing:      border-box;
	word-break:      break-word;
	overflow-wrap:   anywhere;
	hyphens:         auto;
	white-space:     normal;
	/* Theme-Reset: Hello-Elementor / Elementor setzt auf button-Elementen
	   text-transform: uppercase + letter-spacing — beides macht den Text
	   breiter und sprengt den Kachel-Container. Explizit zurücksetzen. */
	text-transform:  none;
	letter-spacing:  normal;
	font-size:       inherit;
	font-weight:     inherit;
	color:           inherit;
}

/* Validierungs-Fehler-Hervorhebung auf der Gruppe */
.cod-form__field--has-error .cod-tiles {
	outline:        2px solid var(--cod-color-error);
	outline-offset: 2px;
	border-radius:  10px;
}

/* ─── Checkbox / Consent ─────────────────────────────────────────────────── */

.cod-form__checkbox-wrap {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	cursor:      pointer;
}

.cod-form__checkbox {
	flex-shrink:  0;
	margin-top:   .2em;
	accent-color: var(--cod-color-accent);
	width:        16px;
	height:       16px;
	cursor:       pointer;
}

.cod-form__checkbox:focus-visible {
	outline:        2px solid var(--cod-color-focus);
	outline-offset: 2px;
}

.cod-form__checkbox-label {
	font-size:   .875rem;
	color:       var(--cod-color-muted);
	line-height: 1.4;
}

/* ─── Fehler-Zustand ─────────────────────────────────────────────────────── */

.cod-form__field--has-error .cod-form__input,
.cod-form__field--has-error .cod-form__textarea,
.cod-form__field--has-error .cod-form__select {
	border-color: var(--cod-color-error);
}

.cod-form__field-error {
	font-size:   .8125rem;
	color:       var(--cod-color-error);
	line-height: 1.3;
}

/* ─── Feld-Hinweis (Topic-Copy, z. B. Begründung Telefon) ────────────────── */

.cod-form__hint {
	font-size:   .8125rem;
	color:       var(--cod-color-muted);
	line-height: 1.3;
	margin:      4px 0 0;
}

/* ─── Erklärtext + Trust-Liste unter dem Submit-Button ───────────────────── */

.cod-form__after-submit {
	font-size:   .8125rem;
	color:       var(--cod-color-muted);
	line-height: 1.45;
	margin:      12px 0 0;
}

/* Spezifität bewusst erhöht: Theme-/Elementor-Link-Styles greifen sonst
   durch und setzen die Farbe auf ein dunkles Grau, das im dunkelblauen
   Popup nicht mehr lesbar ist. */
.cod-form .cod-form__after-submit-link {
	color:           var(--cod-color-focus);
	text-decoration: underline;
}

.cod-form .cod-form__after-submit-link:hover,
.cod-form .cod-form__after-submit-link:focus-visible {
	color:           var(--cod-color-focus);
	text-decoration: none;
}

.cod-form__trust {
	display:        flex;
	flex-wrap:      wrap;
	gap:            6px 20px;
	list-style:     none;
	margin:         12px 0 0;
	padding:        12px 0 0;
	border-top:     1px solid var(--cod-color-border);
}

.cod-form__trust-item {
	display:     flex;
	align-items: center;
	gap:         7px;
	font-size:   .8125rem;
	line-height: 1.3;
	color:       var(--cod-color-text);
	margin:      0;
}

.cod-form__trust-check {
	display:     inline-flex;
	flex:        0 0 auto;
	color:       var(--cod-color-success);
	font-size:   .75rem;
}

.cod-form--on-dark .cod-form__hint,
.cod-form--on-dark .cod-form__after-submit {
	color: rgba(255, 255, 255, .75);
}

.cod-form--on-dark .cod-form__trust {
	border-top-color: rgba(255, 255, 255, .25);
}

.cod-form--on-dark .cod-form__trust-item {
	color: #fff;
}

.cod-form--on-dark .cod-form__trust-check {
	color: #4ade80;
}

/* ─── Globale Feedback-Leiste ────────────────────────────────────────────── */

.cod-form__feedback {
	font-size:     .875rem;
	margin-top:    8px;
	min-height:    1.2em; /* verhindert Layout-Sprung, wenn Slot leer ist */
}

.cod-form__feedback--error {
	color: var(--cod-color-error);
}

.cod-form__feedback--success {
	color: var(--cod-color-success);
}

/* ─── Turnstile-Wrapper ──────────────────────────────────────────────────── */

.cod-form__turnstile {
	margin-top: var(--cod-spacing-y);
}

/* Invisible-Mode: Off-Screen statt display:none — Cloudflare-Turnstile muss
   im Layout-Tree sein, damit der Token ins Hidden-Field geschrieben wird. */
.cod-form__turnstile--invisible {
	position:      absolute !important;
	left:          -9999px !important;
	top:           -9999px !important;
	width:         1px !important;
	height:        1px !important;
	opacity:       0 !important;
	pointer-events: none !important;
	overflow:      hidden !important;
}

/* ─── Actions (Buttons) ──────────────────────────────────────────────────── */

.cod-form__actions {
	display:    flex;
	gap:        8px;
	margin-top: 20px;
	flex-wrap:  wrap;
	align-items: center;
}

/* Sicherheitsnetz: hidden-Attribut auf Step-Nav-/Submit-Buttons hat höhere
   Priorität als jedes inline-flex aus dem Theme. */
.cod-form .cod-form__nav[hidden],
.cod-form .cod-form__submit[hidden] {
	display: none !important;
}

/* Single-Step-Mode: gesetzt vom JS, wenn das Form initial auf einem Step >0
   startet (Topic-Skip-Mechanismus aus v0.4.1). Wir blenden den Step-Indicator
   und die Prev/Next-Nav komplett aus — der Submit-Button bleibt sichtbar.
   Greift sowohl auf Inline- als auch Popup-Forms. */
.cod-form--single-step .cod-form__steps-nav,
.cod-form--single-step .cod-form__nav {
	display: none !important;
}

/* Submit-Button: Standard dunkelblau (Primary), Hover-Wechsel auf Akzent (Grün).
   Selektor mit zwei Klassen, damit generische Theme-/Elementor-Button-Styles
   (.elementor-button, button.btn) den Plugin-Style nicht überschreiben. */
.cod-form .cod-form__submit {
	display:          inline-flex;
	align-items:      center;
	gap:              6px;
	padding:          10px 20px;
	font-family:      inherit;
	font-size:        .9375rem;
	font-weight:      600;
	color:            #fff;
	background-color: var(--cod-color-focus);
	border:           1px solid transparent;
	border-radius:    var(--cod-radius);
	cursor:           pointer;
	transition:       background-color .15s, color .15s, border-color .15s;
	white-space:      nowrap;
}

.cod-form .cod-form__submit:hover {
	background-color: var(--cod-color-accent);
	color:            #fff;
}

.cod-form .cod-form__submit:focus-visible {
	outline:        2px solid var(--cod-color-focus);
	outline-offset: 2px;
}

.cod-form .cod-form__submit:disabled {
	opacity: .5;
	cursor:  not-allowed;
	filter:  none;
}

/* Loading-Indikator — dezenter rotierender Ring */
.cod-form .cod-form__submit[aria-busy="true"]::after {
	content:      '';
	display:      inline-block;
	width:        13px;
	height:       13px;
	border:       2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation:    cod-spin .65s linear infinite;
}

@keyframes cod-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cod-form .cod-form__submit[aria-busy="true"]::after {
		animation: none;
		opacity: .6;
	}
}

/* Navigation-Buttons (Zurück / Weiter) — geometrisch identisch zum Submit-Button
   (Padding, Font-Size/Weight, Border-Width, Border-Radius), unterscheiden sich nur
   farblich. So entsteht eine konsistente Button-Reihe im Form-Footer. */
.cod-form .cod-form__nav {
	display:          inline-flex;
	align-items:      center;
	padding:          10px 20px;
	font-family:      inherit;
	font-size:        .9375rem;
	font-weight:      600;
	color:            var(--cod-color-text);
	background-color: transparent;
	border:           1px solid var(--cod-color-border);
	border-radius:    var(--cod-radius);
	cursor:           pointer;
	transition:       border-color .15s, background-color .15s, color .15s;
	white-space:      nowrap;
}

.cod-form .cod-form__nav:hover {
	background-color: rgba(0, 0, 0, .04);
	border-color:     rgba(0, 0, 0, .3);
}

.cod-form .cod-form__nav:focus-visible {
	outline:        2px solid var(--cod-color-focus);
	outline-offset: 2px;
}

/* ─── CTA-Button (öffnet Popup) ──────────────────────────────────────────────
   Style angeglichen an den Codewerk-Hero-CTA „BERATUNG VEREINBAREN ›":
   grüner Hintergrund (`--e-global-color-secondary` = #9EFC4F),
   dunkelblauer Text (`--e-global-color-primary` = #022B4D),
   Pfeil-Icon rechts vom Label, Padding 15px 20px, font-weight 500.
   Wrapper sorgt für horizontale Zentrierung in der Section. */

.cod-form-button-wrapper {
	display:    block;
	text-align: center;
	width:      100%;
	margin:     0;
}

.cod-form-button {
	--cod-btn-radius:       3px;
	--cod-btn-color-focus:  var(--e-global-color-primary, #022B4D);
	--cod-btn-color-bg:     var(--e-global-color-secondary, #9EFC4F);
	--cod-btn-color-text:   var(--e-global-color-primary, #022B4D);

	display:          inline-flex;
	align-items:      center;
	flex-direction:   row-reverse;
	gap:              10px;
	padding:          15px 20px;
	font-family:      inherit;
	font-size:        .9375rem;
	font-weight:      500;
	line-height:      1.2;
	color:            var(--cod-btn-color-text);
	fill:             var(--cod-btn-color-text);
	background-color: var(--cod-btn-color-bg);
	border:           none;
	border-radius:    var(--cod-btn-radius);
	cursor:           pointer;
	text-decoration:  none;
	transition:       filter .15s, background-color .15s, color .15s, transform .15s;
	white-space:      nowrap;
	letter-spacing:   .02em;
}

.cod-form-button:hover {
	filter: brightness(.95);
}

.cod-form-button:hover .cod-form-button__icon {
	transform: translateX(2px);
}

.cod-form-button:focus-visible {
	outline:        2px solid var(--cod-btn-color-focus);
	outline-offset: 2px;
}

.cod-form-button:disabled {
	opacity: .5;
	cursor:  not-allowed;
	filter:  none;
}

.cod-form-button__icon {
	display:     inline-flex;
	align-items: center;
	transition:  transform .15s ease;
}

.cod-form-button__icon svg {
	display: block;
}

/* On-dark-Variante: identisch zur Default-Optik (Codewerks Hero-CTA hat
   bereits Grün-auf-Dunkelblau-Charakter), bleibt aus
   Backward-Compatibility-Gründen aber als eigene Modifier-Klasse erhalten. */
.cod-form-button.cod-form-button--on-dark {
	background-color: #9EFC4F;
	color:            #022B4D;
	fill:             #022B4D;
}

.cod-form-button.cod-form-button--on-dark:hover {
	filter: brightness(.95);
}

.cod-form-button.cod-form-button--on-dark:focus-visible {
	outline-color: #9EFC4F;
}

@media (max-width: 639px) {
	.cod-form-button {
		padding:   12px 16px;
		font-size: .875rem;
	}
}

/* ─── Popup-Overlay / Modal ──────────────────────────────────────────────── */

/*
 * z-index: Der Popup-Root liegt als direktes Body-Kind neben dem
 * mmenu-Wrapper `.mm-page.mm-slideout` (WP-Mega-Menu), der sich selbst
 * `z-index: 2147483000` gibt. Mit dem früheren Wert 99999 wurde das Popup
 * deshalb vom kompletten Seiteninhalt überdeckt und war nur dort sichtbar,
 * wo zufällig kein Inhalt darüber lag ("Popup erscheint unter dem Element").
 * Der Wert muss also über dem mmenu-Wrapper liegen.
 */
.cod-form-popup {
	position:       fixed;
	inset:          0;
	z-index:        2147483600;
	isolation:      isolate;
	display:        flex;
	align-items:    center;
	justify-content: center;
	padding:        16px;
}

.cod-form-popup[hidden] {
	display: none;
}

.cod-form-popup__overlay {
	position:         absolute;
	inset:            0;
	background-color: rgba(0, 0, 0, .5);
	cursor:           pointer;
}

.cod-form-popup__dialog {
	--cod-popup-bg:     var(--e-global-color-primary, #022B4D);
	--cod-popup-text:   #ffffff;
	--cod-popup-muted:  rgba(255, 255, 255, .72);
	--cod-popup-border: rgba(255, 255, 255, .32);

	position:         relative;
	width:            100%;
	max-width:        540px;
	max-height:       90vh;
	overflow-y:       auto;
	background-color: var(--cod-popup-bg);
	color:            var(--cod-popup-text);
	border-radius:    4px;
	padding:          28px 32px;
	box-shadow:       0 8px 32px rgba(0, 0, 0, .35);
}

.cod-form-popup__close {
	position:         absolute;
	top:              12px;
	right:            12px;
	width:            32px;
	height:           32px;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	background:       transparent;
	border:           none;
	cursor:           pointer;
	color:            var(--cod-popup-muted, rgba(255,255,255,.72));
	font-size:        1.25rem;
	line-height:      1;
	border-radius:    var(--cod-radius);
	transition:       color .15s, background-color .15s;
}

.cod-form-popup__close:hover {
	color:            #ffffff;
	background-color: rgba(255, 255, 255, .08);
}

.cod-form-popup__close:focus-visible {
	outline:        2px solid var(--cod-color-focus);
	outline-offset: 2px;
}

.cod-form-popup__title {
	/* Nur für Screen-Reader sichtbar */
	position:  absolute;
	width:     1px;
	height:    1px;
	padding:   0;
	margin:    -1px;
	overflow:  hidden;
	clip:      rect(0, 0, 0, 0);
	white-space: nowrap;
	border:    0;
}

.cod-form-popup__content {
	/* Inhalt sitzt direkt unter dem Dialog-Padding */
}

.cod-form-popup__loading {
	padding:    24px 0;
	text-align: center;
	color:      var(--cod-color-muted);
	font-size:  .9375rem;
}

/* Formular innerhalb des Popups: max-width aufheben, volle Breite nutzen.
   Zusätzlich Tokens auf helle Farben drehen, weil der Popup-Dialog
   Dunkelblau ist (Codewerk-Primary). Inputs bleiben transparent mit
   weißer Schrift und hellem Border-Bottom (Material-Style auf Dark). */
.cod-form-popup__content .cod-form {
	max-width:           none;
	--cod-color-text:    #ffffff;
	--cod-color-muted:   rgba(255, 255, 255, .72);
	--cod-color-border:  rgba(255, 255, 255, .35);
	--cod-color-focus:   var(--e-global-color-secondary, #9EFC4F);
	--cod-color-accent:  var(--e-global-color-secondary, #9EFC4F);
}

.cod-form-popup__content .cod-form__step-title,
.cod-form-popup__content .cod-form__step-description {
	color: #ffffff;
}

.cod-form-popup__content .cod-form__steps-item {
	color: rgba(255, 255, 255, .55);
}

.cod-form-popup__content .cod-form__steps-item--active {
	color: #ffffff;
}

.cod-form-popup__content .cod-form__steps-item--active .cod-form__steps-index {
	background-color: var(--e-global-color-secondary, #9EFC4F);
	border-color:     var(--e-global-color-secondary, #9EFC4F);
	color:            var(--e-global-color-primary, #022B4D);
}

/* Inputs/Textareas: transparent mit hellem Underline-Style. */
.cod-form-popup__content .cod-form__input,
.cod-form-popup__content .cod-form__textarea {
	background-color: rgba(255, 255, 255, .06);
	color:            #ffffff;
	border-color:     rgba(255, 255, 255, .35);
}

.cod-form-popup__content .cod-form__input:focus,
.cod-form-popup__content .cod-form__textarea:focus {
	border-color: var(--e-global-color-secondary, #9EFC4F);
	box-shadow:   0 0 0 2px rgba(158, 252, 79, .25);
}

.cod-form-popup__content .cod-form__input::placeholder,
.cod-form-popup__content .cod-form__textarea::placeholder {
	color: rgba(255, 255, 255, .45);
}

/* Floating-Label im Popup: hell statt dunkel. */
.cod-form-popup__content .cod-form__floating-label {
	color: rgba(255, 255, 255, .65);
}

.cod-form-popup__content .cod-form__field--floating .cod-form__input:focus + .cod-form__floating-label,
.cod-form-popup__content .cod-form__field--floating .cod-form__input:not(:placeholder-shown) + .cod-form__floating-label,
.cod-form-popup__content .cod-form__field--floating .cod-form__textarea:focus + .cod-form__floating-label,
.cod-form-popup__content .cod-form__field--floating .cod-form__textarea:not(:placeholder-shown) + .cod-form__floating-label,
.cod-form-popup__content .cod-form__field--floating.is-floating .cod-form__floating-label {
	color: var(--e-global-color-secondary, #9EFC4F);
}

/* Submit-Button im Popup: grüner 1px-Border von Anfang an, kein Layout-Shift bei Hover.
   Hover invertiert nur Background ↔ Text, der Border bleibt grün. */
.cod-form-popup__content .cod-form .cod-form__submit {
	background-color: var(--e-global-color-secondary, #9EFC4F);
	color:            var(--e-global-color-primary, #022B4D);
	border:           1px solid var(--e-global-color-secondary, #9EFC4F);
	border-radius:    0;
	filter:           none;
}

.cod-form-popup__content .cod-form .cod-form__submit:hover {
	background-color: var(--e-global-color-primary, #022B4D);
	color:            var(--e-global-color-secondary, #9EFC4F);
	border-color:     var(--e-global-color-secondary, #9EFC4F);
	filter:           none;
}

/* Nav-Buttons im Popup: heller 1px-Border, transparenter Background — geometrisch
   identisch zum Submit-Button im Popup (Padding/Font/Border-Width/Radius via Base-Style),
   nur farblich anders (weißer Border statt grün). */
.cod-form-popup__content .cod-form .cod-form__nav {
	color:            #ffffff;
	border:           1px solid rgba(255, 255, 255, .4);
	border-radius:    0;
	background-color: transparent;
}

.cod-form-popup__content .cod-form .cod-form__nav:hover {
	background-color: rgba(255, 255, 255, .08);
	border-color:     rgba(255, 255, 255, .6);
}

/* DSGVO-Checkbox-Label und Datenschutz-Link im Popup hell. */
.cod-form-popup__content .cod-form__checkbox-label {
	color: rgba(255, 255, 255, .85);
}

.cod-form-popup__content .cod-form__checkbox-label a {
	color:           var(--e-global-color-secondary, #9EFC4F);
	text-decoration: underline;
}

/* Danke-Block im Popup: ersetzt nach dem Absenden das Formular. Auf dem
   dunklen Popup-Hintergrund (Codewerk-Primary) hell und zentriert; die
   Popup-Custom-Props des Dialogs (--cod-popup-text/-muted) greifen hier. */
.cod-form-thankyou {
	padding:    32px 8px 24px;
	text-align: center;
	color:      var(--cod-popup-text, #ffffff);
}

/* Doppelt gescopte Selektoren: Theme-/Elementor-Kit-Regeln wie
   `.elementor-kit-7 h3 { color: var(--e-global-color-text) }` haben höhere
   Spezifität als eine Einzelklasse und würden den Titel auf dem dunklen
   Popup sonst dunkelgrau (unlesbar) färben. */
.cod-form-popup .cod-form-thankyou__title,
.cod-form-thankyou__title {
	margin:      0 0 12px;
	font-size:   1.5rem;
	line-height: 1.25;
	font-weight: 700;
	color:       var(--cod-popup-text, #ffffff);
}

.cod-form-popup .cod-form-thankyou__text,
.cod-form-thankyou__text {
	margin:      0 auto;
	max-width:   38ch;
	font-size:   1rem;
	line-height: 1.55;
	color:       var(--cod-popup-muted, rgba(255, 255, 255, .78));
}

/* Body-Scroll-Lock */
body.cod-form-popup-open {
	overflow: hidden;
}

/* ─── Dankeseite ─────────────────────────────────────────────────────────── */
/* Container-Layout angeglichen an Codewerk-Standard-Content-Pages: zentrierter
   Block mit großzügigem Vertikal-Padding, max-width auf Codewerk-Content-
   Niveau (ca. 1140px), aber Lese-Komfort durch zusätzliche `__inner`-Spalte
   bei ca. 720px. Schrift- und Farbwerte erben vom Theme. */

.cod-thankyou {
	max-width:  1140px;
	margin:     0 auto;
	padding:    60px 20px 80px;
	text-align: center;
}

.cod-thankyou__inner {
	max-width: 720px;
	margin:    0 auto;
}

.cod-thankyou__title {
	font-size:   2rem;
	font-weight: 700;
	margin:      0 0 20px;
	line-height: 1.2;
}

.cod-thankyou__lead {
	color:       var(--cod-color-muted);
	font-size:   1.0625rem;
	margin:      0 0 28px;
	line-height: 1.55;
}

.cod-thankyou__hint {
	color:       var(--cod-color-muted);
	font-size:   .9375rem;
	margin:      0 0 28px;
	line-height: 1.5;
}

.cod-thankyou__back-wrap {
	margin:     32px 0 0;
	display:    flex;
	flex-wrap:  wrap;
	gap:        12px;
	justify-content: center;
}

/* Zurück-Button im Codewerk-Hero-CTA-Style — grüner Button, dunkler Text,
   Pfeil-Icon. Wiederverwendet die `.cod-form-button`-Tokens, damit das Look
   automatisch mitzieht, falls Hero-Tokens später geändert werden. */
.cod-thankyou__back {
	display:          inline-flex;
	align-items:      center;
	flex-direction:   row-reverse;
	gap:              10px;
	padding:          15px 20px;
	font-family:      inherit;
	font-size:        .9375rem;
	font-weight:      500;
	color:            var(--e-global-color-primary, #022B4D);
	fill:             var(--e-global-color-primary, #022B4D);
	background-color: var(--e-global-color-secondary, #9EFC4F);
	border:           none;
	border-radius:    3px;
	cursor:           pointer;
	text-decoration:  none;
	transition:       filter .15s ease, transform .15s ease;
	letter-spacing:   .02em;
}

.cod-thankyou__back:hover,
.cod-thankyou__back:focus {
	filter:          brightness(.95);
	text-decoration: none;
	color:           var(--e-global-color-primary, #022B4D);
}

.cod-thankyou__back__icon {
	display:     inline-flex;
	align-items: center;
	transition:  transform .15s ease;
}

.cod-thankyou__back:hover .cod-thankyou__back__icon {
	transform: translateX(-2px);
}

.cod-thankyou__back__icon svg {
	display: block;
}

@media (max-width: 639px) {
	.cod-thankyou {
		padding: 40px 16px 56px;
	}
	.cod-thankyou__title {
		font-size: 1.625rem;
	}
}

/* ─── Variant: on-dark — für dunkle Section-Backgrounds ──────────────────── */

.cod-form.cod-form--on-dark {
	--cod-color-text:   #ffffff;
	--cod-color-muted:  rgba(255, 255, 255, 0.72);
	--cod-color-border: rgba(255, 255, 255, 0.32);
	--cod-color-error:  #ff8a99;
}

/* Inputs/Selects/Textareas bleiben hell-mit-dunklem-Text für Lesbarkeit. */
.cod-form--on-dark .cod-form__input,
.cod-form--on-dark .cod-form__textarea,
.cod-form--on-dark .cod-form__select {
	background-color: #ffffff;
	color:            #1a2a4f;
	border-color:     rgba(255, 255, 255, 0.4);
}

.cod-form--on-dark .cod-form__input::placeholder,
.cod-form--on-dark .cod-form__textarea::placeholder {
	color: rgba(0, 0, 0, 0.45);
}

/* Submit-Button auf dunklem Hintergrund: heller Akzent (Codewerk-Grün), dunkler Text.
   Selektor mit zwei Klassen am gleichen Element, damit höhere Spezifität als
   .cod-form .cod-form__submit (Default-Light-Variante). */
.cod-form.cod-form--on-dark .cod-form__submit {
	background-color: #9EFC4F;
	color:            #022B4D;
}

/* Nav-Buttons: heller Border + transparenter Background. */
.cod-form.cod-form--on-dark .cod-form__nav {
	color:            #ffffff;
	border-color:     rgba(255, 255, 255, 0.4);
	background-color: transparent;
}

.cod-form.cod-form--on-dark .cod-form__nav:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color:     rgba(255, 255, 255, 0.6);
}

/* Checkbox-Label-Lesbarkeit verbessern. */
.cod-form--on-dark .cod-form__checkbox-label {
	color: rgba(255, 255, 255, 0.85);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
	.cod-form {
		--cod-spacing-y: 12px;
		font-size:       .9375rem;
	}

	.cod-form .cod-form__submit,
	.cod-form .cod-form__nav {
		padding:   9px 14px;
		font-size: .875rem;
	}

	.cod-form-popup__dialog {
		padding: 20px 18px;
	}

	.cod-form__actions {
		flex-direction: column;
		align-items:    stretch;
	}

	.cod-form .cod-form__submit,
	.cod-form .cod-form__nav {
		width:           100%;
		justify-content: center;
	}
}