/* Bauteil 01 - Eingabefeld.
 *
 * Angelegt 2026-08-09 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md,
 * Abschnitt 2, Block 01. Dort steht die verbindliche Wertetabelle; jede
 * Zeile hier ist daraus abgeleitet. Nichts ist erfunden.
 *
 * WOFUER:
 * Die kleinste gemeinsame Einheit von Kasse und Kundenkonto. Heute hat das
 * Formular an den beiden Orten ZWEI getrennte Gestaltungen: In 687 Zeilen
 * iz-checkout.css steht keine einzige Regel fuer input, select, textarea
 * oder :focus - die Felder der Kasse erben also das Parent-Theme. Im
 * Kundenkonto gestaltete sie bis zum 2026-08-08 das Code-Snippet #210 mit
 * eigener Rahmenfarbe, eigenem Radius und "outline: none". Dieses Bauteil
 * loest beides ab.
 *
 * ES GREIFT UEBER EINEN CONTAINER, NICHT UEBER ELEMENTNAMEN:
 * Alle Regeln haengen an .iz-kauf-formular. Damit gestaltet das Bauteil
 * ausschliesslich die Formulare, in die es ausdruecklich gesetzt wird, und
 * nicht jedes Eingabefeld der Seite. Das ist der Unterschied zu Snippet
 * #210, das sitesweit auf Kontoseiten wirkte.
 *
 * DIE SPEZIFITAET IST BEWUSST ERHOEHT, NICHT WILLKUERLICH:
 * Das Parent-Theme setzt
 * input[type="text"], ... , select, textarea { font-size: 15px }
 * mit Spezifitaet 0,0,1,1. Am 2026-08-09 am Mengenfeld des Warenkorbs
 * gemessen: eine einzelne Klasse verliert dagegen, das Feld kam mit 15px
 * heraus. 15px sind unter 16px, und darunter zoomt iOS-Safari beim Antippen
 * automatisch in die Seite hinein. Deshalb Container-Klasse plus Element
 * plus Attribut - und kein !important.
 *
 * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN RADIUS AUSSER 4px/3px/50%.
 */

/* ---- Beschriftung ---- */
.iz-kauf-formular label {
	display: block;
	margin-bottom: var(--sp-1);
	color: var(--iz-text);
	font-size: var(--fs-sm);
	line-height: 1.4;
}

/* Die Pflichtkennzeichnung steht nicht allein in Rot - Gestaltungskatalog
 * Abschnitt 6: Bedeutung nie allein ueber Farbe. Das Sternchen traegt
 * zusaetzlich einen Text fuer Vorlesewerkzeuge, den das Markup setzt. */
.iz-kauf-formular .required,
.iz-kauf-formular abbr.required {
	color: var(--iz-rot);
	text-decoration: none;
	border-bottom: 0;
}

/* ---- Felder ---- */
.iz-kauf-formular input[type="text"],
.iz-kauf-formular input[type="email"],
.iz-kauf-formular input[type="tel"],
.iz-kauf-formular input[type="url"],
.iz-kauf-formular input[type="password"],
.iz-kauf-formular input[type="number"],
.iz-kauf-formular input[type="search"],
.iz-kauf-formular input[type="date"],
.iz-kauf-formular select,
.iz-kauf-formular textarea {
	box-sizing: border-box;
	width: 100%;
	/* Mindesthoehe 48px (--sp-12) - der Katalog verlangt mindestens 44px
	 * Trefflaeche, 48px ist die naechste Stufe der Abstandsskala darueber. */
	min-height: var(--sp-12);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--iz-border);
	border-radius: var(--r-standard);
	background: var(--iz-weiss);
	color: var(--iz-text);
	/* BERICHTIGT 2026-08-09 beim Bau von Block 21, gemessen statt geschlossen.
	 *
	 * Hier stand "font-family: inherit". Solange das Bauteil nirgends aktiv
	 * war, fiel das nicht auf. In dem Moment, in dem es auf /daten-neu/ die
	 * Kassenfelder erreichte, kamen ALLE Eingabefelder in
	 * EBGaramond12-Regular heraus - der Ueberschriftenschrift
	 * (getComputedStyle auf /daten-neu/, 1440px: input, select und textarea
	 * je EBGaramond12-Regular 18px).
	 *
	 * URSACHE, an den passenden Regeln abgelesen: Das Parent-Theme setzt
	 *   input[type="text"] { font-family: OpenSans, Verdana, sans-serif }  (0,0,2,1)
	 * Der hiesige Selektor ist (0,0,3,1) und schlaegt sie - "inherit" liess
	 * die Felder daraufhin die Schrift des umgebenden Bereichs erben. Genau
	 * derselbe Fehler war am 2026-08-09 schon einmal an den Knoepfen
	 * aufgetreten (siehe 07-knoepfe.css, Z. 62 ff.), dort mit demselben
	 * Ergebnis: eine Serifenschrift auf einem Bedienelement.
	 *
	 * Der Gestaltungskatalog Abschnitt 2 weist Bedienelementen OpenSans zu.
	 * Die Schreibweise ist zeichengleich aus iz-2025/style.css uebernommen -
	 * keine eigene Fassung, keine zusaetzliche Rueckfallschrift. */
	font-family: "OpenSans", "Verdana", sans-serif;
	font-size: var(--fs-base);
	line-height: 1.4;
}

.iz-kauf-formular textarea {
	min-height: var(--sp-16);
	resize: vertical;
}

/* ---- Fokus ----
 * Ersetzt "outline: none" aus Snippet #210. Ein Rahmenfarbwechsel allein
 * genuegt WCAG 2.1 AA 2.4.7 nicht (Befund B-1). */
.iz-kauf-formular input:focus-visible,
.iz-kauf-formular select:focus-visible,
.iz-kauf-formular textarea:focus-visible {
	outline: 2px solid var(--iz-rot);
	outline-offset: 2px;
}

/* ---- Auswahlkaestchen und Schalter ----
 * Sie bekommen keine eigene Feldflaeche, sondern stehen neben ihrer
 * Beschriftung. Die Trefflaeche gilt fuer die ganze Zeile. */
.iz-kauf-formular .iz-kauf-feld--kasten label,
.iz-kauf-formular .iz-kauf-feld--schalter label {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	min-height: var(--sp-12);
	padding: var(--sp-2) 0;
	font-size: var(--fs-base);
	cursor: pointer;
}

.iz-kauf-formular input[type="checkbox"],
.iz-kauf-formular input[type="radio"] {
	flex: 0 0 auto;
	width: var(--sp-4);
	height: var(--sp-4);
	margin: 0;
	accent-color: var(--iz-rot);
}

.iz-kauf-formular input[type="radio"] {
	border-radius: var(--r-rund);
}

.iz-kauf-formular input[type="checkbox"]:focus-visible,
.iz-kauf-formular input[type="radio"]:focus-visible {
	outline: 2px solid var(--iz-rot);
	outline-offset: 2px;
}

/* ---- Hilfetext ---- */
.iz-kauf-formular .iz-kauf-feld__hilfe,
.iz-kauf-formular .description {
	display: block;
	margin-top: var(--sp-1);
	color: var(--iz-text-muted);
	font-size: var(--fs-sm);
}

/* Auf beigem Grund faellt --iz-text-muted unter 4,5:1. Der
 * Gestaltungskatalog sagt dazu ausdruecklich: nicht aufhellen, sondern
 * --iz-text verwenden. */
.iz-kauf-flaeche .iz-kauf-formular .iz-kauf-feld__hilfe,
.iz-kauf-flaeche .iz-kauf-formular .description {
	color: var(--iz-text);
}

/* ---- Fehlerzustand ----
 * Drei Signale gleichzeitig, nie nur Farbe (Katalog Abschnitt 6):
 * roter Rahmen, Fehlertext, und im Markup aria-invalid plus
 * aria-describedby. */
.iz-kauf-formular input[aria-invalid="true"],
.iz-kauf-formular select[aria-invalid="true"],
.iz-kauf-formular textarea[aria-invalid="true"] {
	border-color: var(--iz-rot);
}

.iz-kauf-formular .iz-kauf-feld__fehler {
	display: block;
	margin-top: var(--sp-1);
	color: var(--iz-rot);
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* ---- Gesperrt ---- */
.iz-kauf-formular input[disabled],
.iz-kauf-formular select[disabled],
.iz-kauf-formular textarea[disabled] {
	background: var(--iz-flaeche);
	color: var(--iz-text-muted);
	cursor: not-allowed;
}

/* ---- Bewegung ----
 * Das Bauteil bewegt nichts. Die Regel steht trotzdem, weil ein spaeterer
 * Zusatz sie sonst vergisst (Katalog, Regel 12 Punkt 5). */
@media (prefers-reduced-motion: reduce) {
	.iz-kauf-formular * {
		transition: none;
		animation: none;
	}
}