/* Bauteil 06 - Schrittanzeige der Kaufstrecke.
 *
 * Angelegt 2026-08-09 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md,
 * Abschnitt 2, Block 06. Markup: template-parts/kauf/schrittanzeige.php.
 *
 * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN RADIUS AUSSER 4px/3px/50%.
 * Jeder Wert kommt aus css/iz-tokens.css (Gestaltungskatalog, Regel 13).
 *
 * KEIN !important - anders als der Bestand in iz-checkout.css, der fuer
 * dieselbe Anzeige acht Regeln mit !important gegen zwei fremde Stylesheets
 * setzt. Das ist hier nicht noetig, weil die Klassennamen neu sind und mit
 * keinem fremden Selektor kollidieren: iz-kauf-* war vor Vergabe sitesweit
 * geprueft.
 *
 * DER ROTE BALKEN IST --sp-1 HOCH (4px), NICHT 3px:
 * Der Gestaltungskatalog kennt keine Skala fuer Linienstaerken; er legt nur
 * fest, dass Rahmen 1px sind. Der Zustandsbalken ist kein Rahmen. Statt
 * einen Wert zu erfinden, wird die kleinste Stufe der Abstandsskala benutzt.
 * Jeder Schritt traegt denselben Balken in transparent, damit der aktive
 * Schritt nicht um 4px verrutscht.
 */

.iz-kauf-schritte {
	margin: 0 0 var(--sp-6);
}

.iz-kauf-schritte__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.iz-kauf-schritte__schritt {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	box-sizing: border-box;
	min-height: var(--sp-12);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--iz-border);
	border-top: var(--sp-1) solid transparent;
	border-radius: var(--r-standard);
	background: var(--iz-weiss);
	color: var(--iz-text-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

.iz-kauf-schritte__schritt.is-erledigt {
	color: var(--iz-text);
}

.iz-kauf-schritte__schritt.is-aktiv {
	border-top-color: var(--iz-rot);
	background: var(--iz-flaeche);
	color: var(--iz-text);
	font-weight: 700;
}

.iz-kauf-schritte__marke {
	color: var(--iz-rot);
}

.iz-kauf-schritte__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Unter 600px stehen drei Beschriftungen nicht mehr nebeneinander, ohne
 * abgeschnitten zu werden. Sie stapeln sich dann. Die Grenze ist dieselbe
 * wie im Bestand (iz-checkout.css, die einzige Medienabfrage der Datei).
 *
 * NICHT VERIFIZIERT: Der Testbrowser erzeugt in dieser Arbeitsumgebung
 * nachweislich keine Breiten unter etwa 825px. Diese Regel ist am Geraet zu
 * pruefen (Regel 14). */
@media (max-width: 600px) {
	.iz-kauf-schritte__liste {
		flex-direction: column;
	}

	.iz-kauf-schritte__schritt {
		flex: 1 1 auto;
		justify-content: flex-start;
		min-height: 0;
		text-align: left;
	}
}

/*
 * ================================================================
 * NACHTRAG 2026-08-11 (Block 52) - Haekchen und Vorlesetext ausblenden
 * ================================================================
 * ANLASS: Die Vorlage template-parts/kauf/schrittanzeige.php gibt beide
 * Elemente seit dem 2026-08-11 IMMER aus, damit
 * js/kauf/abschnittswechsel.js den Zustand ohne neuen Seitenaufbau
 * umschalten kann, ohne Markup in einer Skriptdatei zu erzeugen.
 *
 * WARUM display:none UND NICHT visibility ODER opacity: Nur display:none
 * nimmt das Wort "erledigt" auch aus dem, was Vorlesewerkzeuge lesen. Waere
 * es nur durchsichtig, meldete die Vorlesesoftware jeden Schritt als
 * erledigt - auch die noch offenen.
 *
 * AM WARENKORB AENDERT SICH DADURCH NICHTS: Dort traegt kein Schritt
 * "is-erledigt", also greift diese Regel auf alle drei und die Anzeige
 * sieht aus wie vorher.
 */
.iz-kauf-schritte__schritt:not(.is-erledigt) .iz-kauf-schritte__marke,
.iz-kauf-schritte__schritt:not(.is-erledigt) .iz-kauf-schritte__erledigt {
	display: none;
}