/* Bauteil 03 - Positionszeile des Warenkorbs.
 *
 * Angelegt 2026-08-09 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md,
 * Abschnitt 2, Block 03. Markup: template-parts/kauf/positionszeile.php.
 *
 * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN RADIUS AUSSER 4px/3px/50%,
 * KEIN !important. Alle Werte aus css/iz-tokens.css.
 *
 * DIE BILDGROESSE STEHT IN PX (70px), UND ZWAR ABSICHTLICH:
 * Der Gestaltungskatalog schreibt rem ausschliesslich fuer SCHRIFTGROESSEN
 * vor. Eine Bildkante in rem wuerde mit der Schriftgroesse des Nutzers
 * mitwachsen und die Zeile sprengen. 70px ist der Wert des Bestands
 * (iz-checkout.css Z. 95-99), unveraendert uebernommen.
 */

.iz-kauf-position > td {
	padding: var(--sp-4) var(--sp-2);
	border-bottom: 1px solid var(--iz-border);
	vertical-align: top;
	color: var(--iz-text);
	font-size: var(--fs-base);
}

.iz-kauf-position__bild img {
	display: block;
	width: 70px;
	height: 70px;
	object-fit: cover;
	/* Bestand: 6px. Der Katalog kennt nur 4px, 3px und 50%. */
	border-radius: var(--r-standard);
}

.iz-kauf-position__bezeichnung {
	display: block;
	font-weight: 700;
}

.iz-kauf-position__bezeichnung a {
	color: var(--iz-text);
	text-decoration: none;
}

.iz-kauf-position__bezeichnung a:hover,
.iz-kauf-position__bezeichnung a:focus-visible {
	color: var(--iz-rot);
	text-decoration: underline;
}

/* ---- Die Pflichtangaben je Abo-Position ----
 * Zwei Spalten: Bezeichnung der Angabe, dann der Wert. Bewusst als <dl>,
 * weil jede Angabe ein benanntes Wertepaar ist - Vorlesewerkzeuge geben die
 * Zuordnung damit mit aus. */
.iz-kauf-position__angaben {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-1) var(--sp-3);
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-sm);
}

.iz-kauf-position__angaben dt {
	margin: 0;
	color: var(--iz-text-muted);
}

.iz-kauf-position__angaben dd {
	margin: 0;
	color: var(--iz-text);
}

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

.iz-kauf-position__angaben a:visited {
	color: var(--iz-rot);
}

.iz-kauf-position__angaben a:hover {
	color: var(--iz-rot-hover);
}

/* Der Versandhinweis kommt aus dem Bestand (checkout-shared.php Z. 676,
 * Hook woocommerce_after_cart_item_name) und traegt dessen Klasse. Er wird
 * hier nur an das Schriftbild der Angabenliste angeglichen - im Bestand
 * gestaltet ihn iz-checkout.css Z. 321 mit 0.85em und #666, und diese Datei
 * wird auf der Alternativseite nicht geladen. Kein Nachbau, nur Anschluss. */
.iz-kauf-position__name .iz-cart-item-shipping {
	margin-top: var(--sp-1);
	color: var(--iz-text-muted);
	font-size: var(--fs-sm);
}

/* ---- Der Versand als eigene Zeile (Auslandsfall) ----
 * Angelegt 2026-08-09. Markup: template-parts/kauf/versandzeile.php.
 *
 * Die Zeile erbt bewusst ALLE Regeln der Positionszeile - Zellabstand,
 * Trennlinie, Bildkante 70px, rechtsbuendige Betraege. Hier stehen nur die
 * drei Unterschiede, die aus der Sache folgen, kein zweiter Regelsatz.
 *
 * object-fit: contain statt cover. Beim quadratischen Wagen macht das heute
 * keinen Unterschied; sollte das Symbol je durch ein nicht quadratisches
 * ersetzt werden, wuerde cover es beschneiden - bei einem Piktogramm ist das
 * ein Fehler, bei einem Produktfoto nicht. */
.iz-kauf-position--versand .iz-kauf-position__bild img {
	object-fit: contain;
}

/* Versandmethode und Zielland - dasselbe Schriftbild wie die Pflichtangaben
 * der Abo-Positionen, damit die Zeile sich nicht als Fremdkoerper liest. */
.iz-kauf-position__versandangabe {
	margin-top: var(--sp-1);
	color: var(--iz-text-muted);
	font-size: var(--fs-sm);
}

/* ---- Preis, Menge, Summe ---- */
.iz-kauf-position__preis,
.iz-kauf-position__summe {
	text-align: right;
	white-space: nowrap;
	/* Ziffern gleicher Breite, damit Betraege untereinander fluchten. */
	font-variant-numeric: tabular-nums;
}

.iz-kauf-position__summe {
	font-weight: 700;
}

.iz-kauf-position__menge {
	text-align: center;
}

/* Die Beschriftung ist fuer Vorlesewerkzeuge immer da (WCAG 3.3.2), sichtbar
 * aber erst dann, wenn die Tabelle stapelt und der Spaltenkopf "Anzahl"
 * verschwindet. Auf dem Desktop stuende sie sonst direkt unter dem
 * gleichlautenden Spaltenkopf - gemessen am 2026-08-09 im gelieferten HTML.
 * Die Verdeckungstechnik ist bewusst ausgeschrieben und nicht von der
 * Theme-Klasse .screen-reader-text geborgt: das Bauteil soll auch dann
 * tragen, wenn das Parent-Theme diese Klasse einmal umbaut. */
.iz-kauf-position__menge-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Erhoehte Spezifitaet statt !important, und zwar aus einem gemessenen
 * Grund: Das Parent-Theme setzt
 * input[type="number"] { font-size: 15px } (Spezifitaet 0,0,1,1). Eine
 * einzelne Klasse (0,0,1,0) verliert dagegen - am 2026-08-09 im Browser
 * gemessen: das Feld kam mit 15px heraus. 15px sind unter 16px, und darunter
 * zoomt iOS-Safari beim Antippen automatisch in die Seite hinein. Zwei
 * Klassen plus Element (0,0,2,1) schlagen die Theme-Regel ohne !important. */
.iz-kauf-position input.iz-kauf-position__menge-feld {
	box-sizing: border-box;
	width: var(--sp-16);
	min-height: var(--sp-12);
	padding: var(--sp-2);
	border: 1px solid var(--iz-border);
	border-radius: var(--r-standard);
	background: var(--iz-weiss);
	color: var(--iz-text);
	font-size: var(--fs-base);
	text-align: center;
}

.iz-kauf-position input.iz-kauf-position__menge-feld:focus-visible {
	outline: 2px solid var(--iz-rot);
	outline-offset: 2px;
}

/* ---- "Entfernen" ----
 * Text statt "x": WCAG 1.1.1. Trefflaeche mindestens 44px hoch
 * (Gestaltungskatalog Abschnitt 6). */
.iz-kauf-position__entfernen-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--sp-12);
	color: var(--iz-text-muted);
	font-size: var(--fs-sm);
	text-decoration: underline;
}

.iz-kauf-position__entfernen-link:visited {
	color: var(--iz-text-muted);
}

.iz-kauf-position__entfernen-link:hover {
	color: var(--iz-rot);
}

/* EIN Fokusring fuer JEDEN Verweis der Zeile, nicht nur fuer "Entfernen".
 * Anlass, am 2026-08-09 mit der Tabulatortaste gemessen: Der Verweis auf die
 * Kuendigungsseite in der Angabenliste bekam nur die Browservorgabe - 1px
 * gepunktet. Der Gestaltungskatalog Abschnitt 6 sagt dazu ausdruecklich, dass
 * die Browservorgabe nicht genuegt. Die Regel steht bewusst am Container und
 * nicht an jedem einzelnen Verweis, damit ein spaeter hinzukommender Verweis
 * sie nicht wieder verliert. */
.iz-kauf-position a:focus-visible {
	outline: 2px solid var(--iz-rot);
	outline-offset: 2px;
}

/* ---- Unter 600px: gestapelt statt sechs Spalten ----
 * NICHT VERIFIZIERT. Der Testbrowser erzeugt in dieser Arbeitsumgebung
 * nachweislich keine Breiten unter etwa 825px (Regel 14). Die Regeln stehen
 * hier, sind aber ausschliesslich am Geraet pruefbar.
 *
 * Sobald display von table-cell abweicht, verlieren Vorlesewerkzeuge die
 * Tabellenbedeutung - deshalb tragen die Elemente im Markup ausdrueckliche
 * role-Attribute. */
@media (max-width: 600px) {
	.iz-kauf-position {
		display: grid;
		grid-template-columns: 70px 1fr;
		gap: var(--sp-2) var(--sp-3);
		padding: var(--sp-4) 0;
		border-bottom: 1px solid var(--iz-border);
	}

	.iz-kauf-position > td {
		padding: 0;
		border-bottom: 0;
	}

	.iz-kauf-position__bild {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.iz-kauf-position__name,
	.iz-kauf-position__preis,
	.iz-kauf-position__menge,
	.iz-kauf-position__summe,
	.iz-kauf-position__entfernen {
		grid-column: 2;
		text-align: left;
	}

	.iz-kauf-position__preis::before,
	.iz-kauf-position__summe::before {
		content: attr(data-titel) ": ";
		color: var(--iz-text-muted);
	}

	.iz-kauf-position__menge {
		text-align: left;
	}

	/* Gestapelt gibt es keinen Spaltenkopf mehr - jetzt muss die
	 * Beschriftung sichtbar sein. */
	.iz-kauf-position__menge-label {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin: 0 0 var(--sp-1);
		overflow: visible;
		clip-path: none;
		color: var(--iz-text-muted);
		font-size: var(--fs-sm);
	}
}