/* Bauteil 02 - Adress- und Datenformular.
 *
 * Angelegt 2026-08-09 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md,
 * Abschnitt 2, Block 02. Die Felder selbst gestaltet Bauteil 01; hier steht
 * ihre Anordnung.
 *
 * WAS UEBERNOMMEN IST (Regel 16 - der Bestand wird nicht ersetzt):
 * - die 13 Rechnungs- und 12 Lieferfelder in gemessener Reihenfolge und
 *   Pflichtbelegung; diese Datei ordnet nur an, sie entfernt kein Feld
 * - "Anrede" neben "E-Mail-Adresse" statt auf voller Breite
 *   (iz-checkout.css Z. 373)
 * - der hervorgehobene Umschalter "Lieferadresse abweichend"
 *   (iz-checkout.css Z. 569)
 *
 * WAS SICH AENDERT, MIT ANLASS:
 * - <fieldset> und <legend> je Feldgruppe. Anlass: WCAG 2.1 AA 1.3.1.
 * - Zweispaltigkeit erst ab 601px, darunter einspaltig ueber die volle
 *   Breite. Anlass: Der Bauplan, Abschnitt 8.2. Die Reihenfolge wird dabei
 *   NICHT ueber die DOM-Reihenfolge geaendert, sondern bliebe bei Bedarf
 *   eine Sache von CSS order (Regel 6).
 *
 * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN RADIUS AUSSER 4px/3px/50%,
 * KEIN !important.
 */

.iz-kauf-formular {
	color: var(--iz-text);
}

/* ---- Feldgruppe ----
 * <fieldset> traegt in allen Browsern eigene Vorgaben fuer Rahmen und
 * Abstand; sie werden zurueckgesetzt, damit die Gruppe wie ein Abschnitt
 * wirkt und nicht wie ein Kasten im Kasten. */
.iz-kauf-formular__gruppe {
	margin: 0 0 var(--sp-8);
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

/* BERICHTIGT 2026-08-10 beim Bau der Bloecke 30/31 - GEMESSEN, nicht
 * vermutet: Diese Regel griff bisher AUCH auf Legenden, die mit
 * class="screen-reader-text" bewusst versteckt sind - und genau die sind
 * bei den Feldgruppen der Regelfall (Block 21 an der Kasse, Bloecke 30/31
 * im Konto).
 *
 * Die Folge war ein waagerechter Ueberlauf der ganzen Seite: die Klasse
 * screen-reader-text setzt die Legende auf position:absolute und 1x1px;
 * width:100% von hier gewann dagegen (Spezifitaet 0,1,1 gegen 0,1,0) und
 * machte daraus einen 1440px breiten Kasten, der - absolut positioniert
 * ab der linken Kante des Inhaltsbereichs - 520px ueber den rechten Rand
 * hinausragte. clip-path verbirgt ihn zwar optisch, verkuerzt aber die
 * Scrollbreite NICHT.
 *
 * Gemessen am 2026-08-10 auf /mein-konto/edit-account/, 1440px:
 * document.documentElement.scrollWidth 1960 gegen clientWidth 1440 - die
 * Seite liess sich um 520px zur Seite schieben. Auf schmalen Geraeten ist
 * genau das der klassische "die Seite wackelt seitlich"-Fehler.
 *
 * Die Regel gilt deshalb nur noch fuer SICHTBARE Legenden. Versteckte
 * behalten die 1x1px aus screen-reader-text. Das betrifft ausser den
 * Kontoseiten auch Block 21 an der Kasse - dort war derselbe Fehler
 * angelegt und ist mit dieser Zeile mit behoben. */
.iz-kauf-formular__gruppe > legend:not(.screen-reader-text) {
	display: block;
	width: 100%;
	margin: 0 0 var(--sp-4);
	padding: 0 0 var(--sp-2);
	border-bottom: 1px solid var(--iz-border);
	color: var(--iz-text);
	font-size: var(--fs-lg);
	font-weight: 700;
}

/* ---- Raster ----
 * Zwoelf Spalten, damit halbe und drittel Breiten ohne neue Klassenfamilie
 * auskommen. Die Feldbreiten setzt inc/kauf-formular.php ueber die
 * WooCommerce-eigenen Klassen form-row-first / -last / -wide, die hier auf
 * das Raster abgebildet werden - kein zweites Klassensystem. */
.iz-kauf-formular__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
}

.iz-kauf-formular .form-row {
	margin: 0;
	padding: 0;
}

/* ---- Umschalter "Lieferadresse abweichend" ----
 * Hervorgehoben wie im Bestand, aber ueber den Flaechenton statt ueber eine
 * eigene Farbe. */
.iz-kauf-formular__umschalter {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--iz-border);
	border-radius: var(--r-standard);
	background: var(--iz-flaeche);
}

/* ---- Fussbereich mit dem Knopf ---- */
.iz-kauf-formular__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

/* ---- Erfolgsmeldung (nur Betriebsart "konto") ---- */
.iz-kauf-formular__erfolg {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--iz-border);
	border-left: var(--sp-1) solid var(--iz-rot);
	border-radius: var(--r-standard);
	background: var(--iz-flaeche);
	color: var(--iz-text);
}

/* ---- Ab 601px zweispaltig ----
 * Bewusst als min-width-Abfrage: einspaltig ist der Grundzustand, breiter
 * ist die Ausnahme. So bleibt die schmale Ansicht die, die ohne
 * Medienabfrage funktioniert - und genau die ist in dieser Arbeitsumgebung
 * nicht pruefbar (Regel 14).
 *
 * NICHT VERIFIZIERT unterhalb von etwa 825px: Der Testbrowser erzeugt diese
 * Breiten nachweislich nicht. Am Geraet gegenzupruefen. */
@media (min-width: 601px) {
	.iz-kauf-formular__raster {
		grid-template-columns: repeat(12, 1fr);
	}

	.iz-kauf-formular .form-row {
		grid-column: span 12;
	}

	.iz-kauf-formular .form-row-first,
	.iz-kauf-formular .form-row-last {
		grid-column: span 6;
	}

	.iz-kauf-formular .form-row-wide {
		grid-column: span 12;
	}

	/* "Anrede" steht neben "E-Mail-Adresse" statt auf voller Breite -
	 * uebernommen aus iz-checkout.css Z. 373. */
	.iz-kauf-formular .form-row.iz-kauf-feld--anrede {
		grid-column: span 3;
	}

	.iz-kauf-formular .form-row.iz-kauf-feld--email {
		grid-column: span 9;
	}

	/* Postleitzahl schmal, Ort breit - sie stehen im Bestand nebeneinander
	 * und behalten das. */
	.iz-kauf-formular .form-row.iz-kauf-feld--plz {
		grid-column: span 4;
	}

	.iz-kauf-formular .form-row.iz-kauf-feld--ort {
		grid-column: span 8;
	}
}