/* Block 53 - Die Datenschutz-Bestaetigung des ersten Abschnitts.
 *
 * Angelegt 2026-08-11 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md,
 * Abschnitt 5a, Block 53. Markup:
 * template-parts/kauf/datenschutz-hinweis.php.
 *
 * 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).
 *
 * ================================================================
 * WARUM ALLES AN ".iz-kauf-datenschutz" HAENGT
 * ================================================================
 * Die Vorlage traegt zusaetzlich die Germanized-Klassen "form-row", "legal"
 * und "data-privacy". Diese Klassen tragen im ZWEITEN Abschnitt auch die
 * AGB-, Widerrufs- und SEPA-Kaestchen. Eine Regel auf ".legal" haette sie
 * alle mit getroffen - und damit Bauteil 05 ueberschrieben, das genau dafuer
 * zustaendig ist. Deshalb die eigene Huellklasse.
 */

/*
 * ================================================================
 * 1. STELLUNG IM ERSTEN ABSCHNITT
 * ================================================================
 * Das Kaestchen steht zwischen dem Feldbereich (Block 21) und dem
 * Weiter-Knopf (Bauteil 07). Beide bringen ihre eigenen Abstaende mit; hier
 * steht nur der Zwischenraum, der sonst niemandem gehoert.
 */
.iz-kauf-datenschutz {
	margin: var(--sp-6) 0;
}

/*
 * ================================================================
 * 2. KAESTCHEN UND BESCHRIFTUNG IN EINER ZEILE
 * ================================================================
 * ANLASS: Gestaltungskatalog Abschnitt 6 - Touch-Ziele mindestens
 * 44 x 44 px. Der Bestand setzt das Kaestchen mit float und laesst den Text
 * darum herumfliessen; bei zweizeiligem Text rutscht die zweite Zeile dann
 * unter das Kaestchen.
 *
 * flex mit align-items:flex-start statt center: Bei drei Zeilen Text soll
 * das Kaestchen an der ERSTEN Zeile stehen, nicht in der Mitte des Absatzes
 * schweben.
 */
.iz-kauf-datenschutz .woocommerce-form__label {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--iz-text);
	cursor: pointer;
}

.iz-kauf-datenschutz input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	/* Die 44px Trefffliche entstehen aus Kaestchen plus Innenabstand der
	   Beschriftung; das Kaestchen selbst 44px gross zu machen waere optisch
	   ein Kasten und kein Kaestchen. */
	margin: var(--sp-3) 0 var(--sp-3) 0;
	accent-color: var(--iz-rot);
	cursor: pointer;
}

/*
 * ================================================================
 * 3. SICHTBARER FOKUS
 * ================================================================
 * Gestaltungskatalog Abschnitt 6: "Ein Fokusring, der nur die Browservorgabe
 * ist, reicht nicht."
 */
.iz-kauf-datenschutz input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--iz-rot);
	outline-offset: var(--sp-1);
}

/*
 * ================================================================
 * 4. DER VERWEIS AUF DIE DATENSCHUTZERKLAERUNG
 * ================================================================
 * Er kommt aus dem Text der Option und ist damit ein Verweis mitten im
 * Fliesstext. :link und :visited ausdruecklich beide - Gestaltungskatalog
 * Abschnitt 6, bekannter Fehlerfall vom Aboseiten-Knopf.
 */
.iz-kauf-datenschutz a:link,
.iz-kauf-datenschutz a:visited {
	color: var(--iz-rot);
	text-decoration: underline;
}

.iz-kauf-datenschutz a:hover,
.iz-kauf-datenschutz a:focus-visible {
	color: var(--iz-rot-hover);
}

/*
 * ================================================================
 * 5. DIE PFLICHTKENNZEICHNUNG
 * ================================================================
 * Gestaltungskatalog Abschnitt 6: "Bedeutung nie allein ueber Farbe." Das
 * Sternchen traegt deshalb zusaetzlich den Text "Pflichtangabe" fuer
 * Vorlesewerkzeuge (siehe Vorlage); hier bekommt es nur seine Farbe.
 */
.iz-kauf-datenschutz .required {
	color: var(--iz-rot);
	border-bottom: 0;
	text-decoration: none;
}

/*
 * ================================================================
 * 6. 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 Text bricht um, das Kaestchen bleibt daneben - das leistet bereits das
 * flex-Layout aus Abschnitt 2 und braucht keine eigene Umbruchmarke. Hier
 * steht nur die groessere Trefffliche.
 */
@media ( max-width: 600px ) {
	.iz-kauf-datenschutz input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}
}