/* Anfrage-Formular (template-parts/global/formular-anfrage.php).
   Lädt immer (kein Modul-Stylesheet), weil das Formular auch außerhalb des
   Anfrage-Moduls stehen kann. Design: Handoff-README „Form" — keine Kästen,
   nur eine Unterlinie, die bei Fokus gold wird. */

.fk-formular {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fk-formular__felder {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fk-formular [hidden] { display: none; }

/* Nach dem Erfolg verschwinden die Felder; die Bestätigung steht an ihrer Stelle. */
.fk-formular.is-gesendet [data-formular-felder] { display: none; }

.fk-formular__reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}

/* ---------------------------------------------------------------------- *
 * Feld
 * ---------------------------------------------------------------------- */

.fk-feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.fk-feld__label {
	font-size: var(--fs-label-klein);
	font-weight: var(--fw-label);
	letter-spacing: var(--ls-label-klein);
	line-height: var(--lh-text);
	text-transform: uppercase;
	color: var(--text-50);
}

.fk-feld__pflicht { margin-left: 0.15em; }

.fk-feld__eingabe {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--linie-30);
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	appearance: none;
	transition: border-color var(--dur-schnell) var(--ease-aus), box-shadow var(--dur-schnell) var(--ease-aus);
}

textarea.fk-feld__eingabe {
	min-height: calc(4lh + 16px);
	resize: vertical;
}

.fk-feld__eingabe::placeholder {
	color: var(--text-45);
	opacity: 1;
}

/* Fokus: Linie gold und doppelt so kräftig — die Unterlinie ist hier der
   Fokusring; ein zusätzlicher Rahmen würde das Feld wieder zum Kasten machen. */
.fk-feld__eingabe:focus,
.fk-feld__eingabe:focus-visible {
	outline: none;
	border-bottom-color: var(--gold);
	box-shadow: 0 1px 0 0 var(--gold);
}

/* Autofill färbt Felder sonst hellblau oder gelb ein. */
.fk-feld__eingabe:-webkit-autofill,
.fk-feld__eingabe:-webkit-autofill:hover,
.fk-feld__eingabe:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
	caret-color: var(--ink);
}

/* Fehler: Farbe und Text, nie nur Farbe. */
.fk-feld__eingabe[aria-invalid="true"] { border-bottom-color: var(--fehler); }
.fk-feld__eingabe[aria-invalid="true"]:focus { box-shadow: 0 1px 0 0 var(--fehler); }

.fk-feld__fehler {
	margin: 2px 0 0;
	font-size: var(--fs-meta);
	line-height: 1.5;
	color: var(--fehler);
}

/* ---------------------------------------------------------------------- *
 * Einwilligung
 * ---------------------------------------------------------------------- */

.fk-feld__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--fs-klein);
	line-height: 1.6;
	color: var(--text-65);
	cursor: pointer;
}

.fk-feld__checkbox input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 4px 0 0;
	accent-color: var(--gold);
	cursor: pointer;
}

.fk-feld__checkbox input[aria-invalid="true"] { outline: 1px solid var(--fehler); outline-offset: 2px; }

.fk-feld__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--linie-30);
	transition: color var(--dur-schnell) var(--ease-aus), border-color var(--dur-schnell) var(--ease-aus);
}

.fk-feld__link:hover {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.fk-feld--checkbox .fk-feld__fehler { padding-left: 28px; }

/* ---------------------------------------------------------------------- *
 * Absenden
 * ---------------------------------------------------------------------- */

.fk-formular__abschluss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.fk-formular__hinweis {
	margin: 0;
	font-size: var(--fs-klein);
	color: var(--text-55);
}

.fk-formular[aria-busy="true"] .fk-formular__senden {
	opacity: 0.6;
	cursor: progress;
}

/* „Wird gesendet …" steht ohne Pfeil. */
.fk-formular[aria-busy="true"] .fk-formular__senden-pfeil { display: none; }

@media (max-width: 560px) {
	.fk-formular__senden { width: 100%; text-align: center; justify-content: center; }
}

/* ---------------------------------------------------------------------- *
 * Meldungen
 * ---------------------------------------------------------------------- */

/* Erfolg: kein Kasten — eine Linie, der Kicker „Danke", ein ruhiger Satz. */
.fk-formular__erfolg {
	padding-top: 22px;
	border-top: 1px solid var(--gold);
}

.fk-formular__erfolg:focus { outline: none; }
.fk-formular__erfolg:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.fk-formular__erfolg-kicker { margin: 0; }

.fk-formular__erfolg-text {
	max-width: 32ch;
	margin: 14px 0 0;
	font-size: var(--fs-zitat-klein);
	line-height: var(--lh-zitat);
	color: var(--ink);
}

/* Sammelmeldung über den Feldern, wenn der Server ablehnt. */
.fk-formular__meldung {
	padding-left: 14px;
	border-left: 2px solid var(--fehler);
	font-size: var(--fs-karte);
	line-height: 1.6;
	color: var(--fehler);
}

.fk-formular__meldung:focus { outline: none; }

/* Abgeschaltetes Formular (inc/forms.php). */
.fk-formular__gesperrt {
	margin: 0;
	padding-left: 14px;
	border-left: 2px solid var(--linie-30);
	font-size: var(--fs-karte);
	color: var(--text-65);
}

/* Honigtopf: aus dem Bild geschoben statt `display: none` — Bots überspringen ausgeblendete Felder, ein verschobenes füllen sie aus. */
.fk-formular__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}