/* Block 52 - Der Abschnittswechsel der Datenseite.
 *
 * Angelegt 2026-08-11 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md,
 * Abschnitt 5a, Block 52. Markup: inc/kauf-abschnittswechsel.php,
 * Verhalten: js/kauf/abschnittswechsel.js.
 *
 * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN !important, KEIN RADIUS
 * AUSSER 4px/3px/50%. Jeder Wert kommt aus css/iz-tokens.css
 * (Gestaltungskatalog, Regel 13).
 *
 * ================================================================
 * DIESE DATEI IST BEWUSST KLEIN
 * ================================================================
 * Der Wechsel ist eine Sichtbarkeitsfrage, keine Gestaltungsfrage. Die
 * Abschnitte selbst bringen ihre Gestaltung aus den Bloecken 21, 22, 23, 24,
 * 51 und 54 mit; hier steht nichts davon noch einmal.
 *
 * ================================================================
 * DER SCHALTER IST DIE KLASSE, NICHT DIE SEITE
 * ================================================================
 * Alle Regeln haengen an ".iz-kauf-wechsel" auf dem Formular. Diese Klasse
 * setzt ausschliesslich js/kauf/abschnittswechsel.js - und erst dann, wenn
 * beide Abschnitte tatsaechlich im DOM stehen. Ohne JavaScript greift keine
 * einzige Regel dieser Datei, und beide Abschnitte stehen untereinander
 * sichtbar. Das ist der Rueckfall, nicht ein Nebeneffekt.
 *
 * Keine Seiten-ID im Selektor: 11_IZ_Umschaltliste.md, Punkt 2 der acht Orte.
 */

/*
 * ================================================================
 * 1. SICHTBARKEIT DER BEIDEN ABSCHNITTE
 * ================================================================
 * WARUM display:none UND NICHT visibility/opacity: Ein nur durchsichtiger
 * Abschnitt bleibt in der Tabulatorreihenfolge und wird von Vorlesewerkzeugen
 * mitgelesen. Genau daran ist die Germanized-Fassung erkennbar - sie haelt
 * alle Schritte gleichzeitig im DOM und schaltet sie ueber opacity/visibility
 * um (Kommentar in checkout-flow.php Z. 1104-1108). Der Kunde konnte sich mit
 * der Tabulatortaste in einen Abschnitt bewegen, den er nicht sieht.
 *
 * DIE FELDER BLEIBEN IM FORMULAR. display:none entfernt ein Feld NICHT aus
 * der Absendung - das ist der Grund, warum es genau EINEN POST geben kann,
 * der alles enthaelt: Anschrift, Datenschutz-Bestaetigung (Block 53),
 * Zahlungsart und Rechts-Checkboxen.
 */
.iz-kauf-wechsel .iz-kauf-abschnitt {
	display: block;
}

.iz-kauf-wechsel--daten .iz-kauf-abschnitt--kasse,
.iz-kauf-wechsel--kasse .iz-kauf-abschnitt--daten {
	display: none;
}

/*
 * Der Weiter-Knopf gehoert zum ersten Abschnitt und steht in der Vorlage
 * innerhalb von .iz-kauf-abschnitt--daten. Er braucht deshalb KEINE eigene
 * Sichtbarkeitsregel. Diese Zeile steht hier nur als Vermerk, damit niemand
 * spaeter eine zweite, ueberfluessige Regel dafuer anlegt (Regel 1).
 */

/*
 * ================================================================
 * 2. DER FOKUS AUF DER ABSCHNITTSUEBERSCHRIFT
 * ================================================================
 * ANLASS: js/kauf/abschnittswechsel.js setzt tabindex="-1" auf die
 * Ueberschrift des neuen Abschnitts und fokussiert sie (WCAG 2.1 AA, 2.4.3).
 * Ein Element mit tabindex="-1" bekommt in Chrome und Safari einen
 * Standard-Fokusring, der wie ein Bedienfehler aussieht - die Ueberschrift
 * ist ja nichts, was man bedienen kann.
 *
 * :focus-visible statt :focus: Wer mit der Tastatur navigiert, SOLL den
 * Ring sehen. Nur der programmatisch gesetzte Fokus nach einem Mausklick
 * wird stumm geschaltet. Das ist der Unterschied zwischen "Fokus
 * unterdrueckt" (waere ein Zugaenglichkeitsfehler) und "Fokus nicht
 * aufgedraengt".
 */
.iz-kauf-wechsel #order_review_heading:focus:not(:focus-visible),
.iz-kauf-wechsel .iz-kauf-anker:focus:not(:focus-visible) {
	outline: none;
}

.iz-kauf-wechsel #order_review_heading:focus-visible {
	outline: 2px solid var(--iz-rot);
	outline-offset: var(--sp-1);
	border-radius: var(--r-standard);
}

/*
 * ================================================================
 * 3. ABSTAND UNTER DEM ERSTEN ABSCHNITT
 * ================================================================
 * Ohne den Wechsel folgte auf den Feldbereich unmittelbar die Ueberschrift
 * "Kasse". Mit dem Wechsel endet der erste Abschnitt am Weiter-Knopf; der
 * braucht Luft nach unten, sonst klebt er am Seitenende.
 */
.iz-kauf-wechsel--daten .iz-kauf-abschnitt--daten {
	margin-bottom: var(--sp-8);
}

/*
 * ================================================================
 * 4. MOBIL
 * ================================================================
 * 📱 NUR AM GERAET VERIFIZIERBAR (Regel 14). Die Testumgebung erzeugt keine
 * Breiten unter etwa 825 px; was hier steht, ist als CSS-Regel belegt und
 * NICHT als Darstellung geprueft.
 *
 * Der Weiter-Knopf ueber die volle Breite und mit mindestens 44 px
 * Trefffliche (Gestaltungskatalog Abschnitt 6). position:sticky ist hier
 * bewusst NICHT gesetzt: Block 24 hat den Bestellknopf bereits klebend
 * gemacht; zwei klebende Knoepfe auf derselben Strecke waeren ein Flicken
 * auf einem Flicken (Regel 1).
 */
@media ( max-width: 600px ) {
	.iz-kauf-wechsel .iz-kauf-daten-weiter__knopf {
		display: block;
		width: 100%;
		min-height: 44px;
	}
}