/*
 * Baustein „Feld mit Beschriftung im Kasten“ (Styleguide #formulare).
 * Chris, 04.10.2026: Die Beschriftung über dem Feld nimmt zu viel Platz ein – sie gehört ins Feld.
 *
 * Barrierefrei bleibt es, weil die Beschriftung ein echtes <label for> ist, IMMER sichtbar bleibt
 * (kein Platzhalter, der beim Tippen verschwindet, kein Wegschweben) und in voller Schrift- und
 * Kontraststärke steht. Lange Beschriftungen brechen um und schieben das Feld nach unten, statt
 * über den Text zu laufen: Beschriftung und Eingabe liegen in zwei Rasterzeilen, den Kasten zeichnet
 * ::before über beide. Der ganze Kasten ist Klickfläche (Beschriftung fokussiert das Feld).
 *
 * Greift ohne Markup-Änderung überall, wo ein Feldblock mit <label> beginnt und darauf ein Textfeld
 * folgt: Kontakt, Bewerbung, Helfer, Vorschlag, Vorstellung (.wir-anmeldung__feld), Contact Form 7
 * (.wir-form-feld), Premium-Bestellung (.premium-feld), Newsletter (.wir-newsletter__teil).
 * Kästchen, Auswahlknöpfe und die Suche behalten ihre Form.
 */

:is(.wir-anmeldung__feld, .wir-form-feld, .wir-form-feld > p, .premium-feld, .wir-newsletter__teil):has(> label:first-child + :is(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="date"], [type="number"], :not([type])), textarea, select, .wpcf7-form-control-wrap)):not(:has(.wpcf7-list-item, input[type="checkbox"], input[type="radio"], input[type="file"])),
.wpcf7 p > label:has(> br + .wpcf7-form-control-wrap > :is(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="date"], [type="number"]), textarea, select)),
.wpcf7 .wpcf7-form-control-wrap > label:has(> .wpcf7-quiz-label) {
	/* Stellschrauben (mit Vorgabe): --wir-feld-randbreite, --wir-feld-grund, --wir-feld-fokus, --wir-feld-rand-fokus */
	--wir-feld-innen: .95rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	position: relative;
	isolation: isolate;
	align-self: start; /* in einer Feldreihe nicht mitwachsen, wenn der Nachbar einen Fehlertext zeigt */
	&::before {
		content: "";
		grid-area: 1 / 1 / 3 / 2;
		z-index: -1;
		border: var(--wir-feld-randbreite, 1.5px) solid var(--wp--preset--color--linie-stark);
		border-radius: var(--wp--custom--radius--knopf);
		background: var(--wir-feld-grund, var(--wp--preset--color--flaeche));
		pointer-events: none;
	}

	/* Beschriftung: oben im Kasten, klein, aber fett und in voller Textfarbe (16 px, 15,6:1) */
	> label, > .wpcf7-quiz-label {
		grid-area: 1 / 1;
		display: block;
		margin: 0;
		padding: .55rem var(--wir-feld-innen) 0;
		font: 600 var(--wp--preset--font-size--klein)/1.25 var(--wp--preset--font-family--text);
		color: var(--wp--preset--color--text);
		cursor: text;
	}
	> label .premium-hilfe { font-weight: 400; color: var(--wp--preset--color--text-leise); font-size: inherit; }
	> .wpcf7-form-control-wrap { display: contents; }

	/* Eingabe: ohne eigenen Rahmen, die Fläche ist der Kasten */
	/* :where – ohne Gewicht, damit textarea, select und der Bestandszweig unten ihn überschreiben */
	& :where(input:not([type="hidden"]), textarea, select) {
		grid-area: 2 / 1;
		width: 100%;
		max-width: none;
		min-height: 2.6rem;
		margin: 0;
		box-sizing: border-box;
		border: 0;
		border-radius: 0 0 var(--wp--custom--radius--knopf) var(--wp--custom--radius--knopf);
		background-color: transparent;
		box-shadow: none;
		outline: 0;
		padding: .15rem var(--wir-feld-innen) .6rem;
		color: var(--wp--preset--color--text);
		font: 400 var(--wp--preset--font-size--normal)/1.3 var(--wp--preset--font-family--text);
	}
	& textarea { min-height: 7rem; resize: vertical; }
	& select { appearance: none; -webkit-appearance: none; padding-right: 2.8rem; cursor: pointer; background: no-repeat right .9rem center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314201A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Pfeil wie .wir-auswahl */
	/* Browser-Autofill färbt sonst nur die Eingabezeile hellblau, nicht den Kasten */
	& input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--wir-feld-grund, var(--wp--preset--color--flaeche)) inset; -webkit-text-fill-color: var(--wp--preset--color--text); }

	/* Alles, was nach dem Feld kommt (Hilfe, Fehlertext, CF7-Hinweis), steht unter dem Kasten */
	> :not(label, input, textarea, select, .wpcf7-form-control-wrap, .wpcf7-quiz-label), .wpcf7-not-valid-tip { grid-column: 1; margin-top: .4rem; }

	/* Fokus: Ring um den ganzen Kasten (WCAG 2.4.7/2.4.11), Beschriftung bleibt stehen */
	&:has(:focus-visible)::before { border-color: var(--wir-feld-rand-fokus, var(--wp--preset--color--primaer)); outline: 3px solid var(--wir-feld-fokus, var(--wir-fokus-ring)); outline-offset: 0; }

	/* Fehler: roter Rand und Grund am Kasten, Text dazu steht darunter (nicht nur Farbe) */
	&:has(:user-invalid, .wpcf7-not-valid)::before, &[data-fehler]::before { border-color: #B3261E; background: #FFF6F5; }

	/* Ältere CF7-Formulare (Bestand, z. B. Young- und Oldtimertreffen): <label> Text<br>[feld]</label> –
	   das <label> selbst ist der Kasten, der Text steht als erste Rasterzeile darin. */
	&:is(p > label) {
		padding: .55rem var(--wir-feld-innen) 0;
		font: 600 var(--wp--preset--font-size--klein)/1.25 var(--wp--preset--font-family--text);
		color: var(--wp--preset--color--text);
		margin: 0;
		&::before { grid-area: auto; position: absolute; inset: 0; }
		> br { display: none; }
		& :is(input, textarea, select) { margin-inline: calc(-1 * var(--wir-feld-innen)); width: calc(100% + 2 * var(--wir-feld-innen)); }
	}
}

/* Datum und Spamfrage-Antwort brauchen keine volle Zeile */
.wir-form-feld:has(> p > label:first-child + .wpcf7-form-control-wrap input[type="date"]) { max-width: 18rem; }
.wir-form-feld > p { margin: 0; } /* CF7 setzt ein <p> um jedes Feld */

/* Premium-Bestellung: Rand 2 px auf Creme, Fokus in Pflaume – wie bisher in premium.css */
.premium-seite .premium-feld {
	--wir-feld-randbreite: 2px;
	--wir-feld-grund: var(--wp--preset--color--grund);
	--wir-feld-fokus: rgba(107, 44, 95, .35);
	--wir-feld-rand-fokus: var(--wp--preset--color--premium);
}

/* Newsletter: Kasten auf Creme in der weißen Leiste, Knopf so hoch wie die Kästen */
.wir-newsletter__teil { --wir-feld-grund: var(--wp--preset--color--grund); }
.wir-newsletter__leiste:has(.wir-newsletter__teil) { align-items: stretch; }

/* Ohne Beschriftungszeile darüber rücken die Kästen enger zusammen */
.wir-anmeldung { gap: .85rem; }
.wir-form-feld { margin-bottom: .85rem; }
/* PLZ und Ort auch am Handy nebeneinander – wie auf jedem Briefumschlag */
.wir-form-zeile:has(#plz):has(#ort) { grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 2.6fr); column-gap: .85rem; }
/* Spamfrage: Kasten ohne Rand – die Überschrift gehört hinein, nicht halb darüber */
.wir-form-gruppe--spamschutz { padding-top: var(--wp--custom--box--innen); }
.wir-form-gruppe--spamschutz > legend { float: left; width: 100%; padding: 0; margin: 0 0 .8rem; }
.wir-form-gruppe--spamschutz > legend + * { clear: both; }
/* Ein Abstand zwischen Kästen, senkrecht wie waagerecht: .85rem */
.wir-form-zeile { column-gap: .85rem; }
.premium-seite .premium-formular fieldset, .premium-seite .premium-zeile { gap: .85rem; }
.wpcf7 p:has(> label > br + .wpcf7-form-control-wrap) { margin-bottom: .85rem; }