/* ==========================================================================
   Formie → Bootstrap 5.3.8 / Brand-Anpassung
   Seiten-scoped (nur via {% block head %} auf request/index.twig geladen).
   Behält Formies eigenes Markup (wichtig für Composite-Felder Dropdown/
   Phone/Address) und mappt nur seine CSS-Custom-Properties auf die
   Site-Tokens. Offizieller Weg: Formie front-end-css.md (Variablen auf
   der Form-Wrapper-Klasse .fui-i setzen).
   ========================================================================== */

.fui-i,
.fui-form {
	/* Schrift + Farben aus dem Bootstrap-Theme erben */
	--fui-font: var(--bs-body-font-family);
	--fui-color: var(--bs-body-color);

	/* Akzentfarbe = Teal (Buttons/Focus/aktive States) */
	--fui-primary-color: var(--bs-primary);
	--fui-primary-color-hover: #269aa7;

	/* Rahmen wie Bootstrap-Form-Controls */
	--fui-border-color: var(--bs-border-color);
	--fui-border-radius: var(--bs-border-radius);

	/* Focus-Ring im Bootstrap-Stil (Teal, .25rem) */
	--fui-focus-border-color: var(--bs-primary);
	--fui-focus-shadow: 0 0 0 .25rem rgba(0, 136, 152, .25);

	/* Fehlerfarbe = Bootstrap-Danger */
	--fui-error-color: var(--bs-danger);
}

/* Inputs/Selects auf Bootstrap-Sizing (Padding, Schriftgröße) */
.fui-i .fui-input,
.fui-i .fui-select {
	--fui-input-font-size: 1rem;
	--fui-input-padding: .375rem .75rem;
	--fui-input-border-radius: var(--bs-border-radius);
}

/* Select-Textfarbe explizit pinnen. Formie setzt appearance:none ohne Farbe →
   iOS rendert den Select-Wert sonst im System-Blau. */
.fui-i .fui-select {
	color: var(--bs-body-color);
	-webkit-text-fill-color: var(--bs-body-color);
}

.fui-i .fui-select option {
	color: var(--bs-body-color);
}

/* Labels wie .form-label */
.fui-i .fui-label {
	margin-bottom: .5rem;
	font-weight: 500;
	color: var(--bs-body-color);
}

/* Agree-/Checkbox-Beschriftung ist Fließtext → Body-Größe (statt Formie-14px) */
.fui-i .fui-checkbox-label {
	font-size: 1rem;
	line-height: 1.5;
}

/* Hilfetext/Instructions wie .form-text */
.fui-i .fui-instructions {
	font-size: .875em;
	color: var(--bs-secondary-color);
}

/* Fehler-Zustand auf Bootstrap-Invalid mappen
   (.fui-error wird laut Formie dem fehlerhaften Input zugefügt) */
.fui-i .fui-input.fui-error,
.fui-i .fui-select.fui-error,
.fui-i .fui-input.fui-error:focus,
.fui-i .fui-select.fui-error:focus {
	border-color: var(--bs-danger);
}

.fui-i .fui-error-message,
.fui-i .fui-errors {
	font-size: .875em;
	color: var(--bs-danger);
}

/* Submit-Button-Text bündig mit den Agree-Checkbox-Texten (Datenschutz/Marketing).
   Formie gibt dem Wrapper margin-left:-8px (Gutter-Ausgleich) → der Button steht
   sonst links über die Felder hinaus. 1.8rem = padding-left der .fui-checkbox-label. */
.fui-i .fui-btn-wrapper {
	margin-left: 1.8rem;
}

/* Formular-Feldbreiten. Formies Grid (repeat(auto-fit,minmax)) kann nur gleiche
   Spalten — schmale Leitfelder/Telefon/PLZ daher hier kappen. Erst ab SM, damit
   bei XS alles volle Breite bleibt. Werte content-orientiert und anpassbar. */
@media (min-width: 576px) {
	/* Anrede schmal (eigene Zeile, linksbündig) */
	.fui-i [data-field-handle="salutationName"] {
		max-width: 12rem;
	}

	/* Land + Telefon exakt so breit wie ein Feld eines 50/50-Paars (z. B. E-Mail):
	   50% minus halber Gutter (Gutter = 1rem). */
	.fui-i [data-field-handle="addressCountry"],
	.fui-i [data-field-handle="phoneNumber"] {
		max-width: calc(50% - 0.5rem);
	}

	/* PLZ breiter, Ort füllt den Rest (überschreibt das 50/50-Auto-Grid der Zeile) */
	.fui-i .fui-row:has([data-field-handle="addressPostalCode"]) {
		grid-template-columns: 12rem 1fr;
	}
}

/* Formular-Fehler-Banner schlanker (Default-Padding wirkt zu hoch). Greift am
   Original-Ort UND im Slot, in den consultant-picker.js das Banner zieht. */
.fui-i .fui-alert,
[data-form-alert-slot] .fui-alert {
	padding: .75rem 1rem;
	margin-bottom: 1.25rem;
}

/* Inneren Absatz NUR im Fehler-Banner auf margin:0 (sonst Rand unten ungleich).
   Die Success-Box hat mehrere Absätze und braucht ihren Abstand -> unangetastet. */
.fui-i .fui-alert-error p,
[data-form-alert-slot] .fui-alert-error p {
	margin: 0;
}

/* Erfolgsmeldung wie normaler Fließtext (am Footer orientiert): kein grüner
   Kasten, Body-Farbe, normale Schriftgröße — überschreibt Formies Success-Stil. */
.fui-i .fui-alert-success {
	background: transparent;
	padding: 0;
}

.fui-i .fui-alert-success,
.fui-i .fui-alert-success p {
	color: var(--bs-body-color);
	font-size: 1rem;
	line-height: 1.5;
}

/* Agree-Feld-Fehler (z. B. „Kenntnisnahme erforderlich.") unter den Text
   einrücken — auf Höhe des Checkbox-Labels (padding-left 1.8rem). */
.fui-i .fui-type-agree .fui-error-message {
	padding-left: 1.8rem;
}