/* Block 22 - Kassenschritt "Kasse": Angaben- und Bestelluebersicht. * * Angelegt 2026-08-10 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md, * Abschnitt 5, Block 22. Alternativ-Adresse /daten-neu/. * * ================================================================ * ALLES HAENGT AN .iz-kauf-kasse - UND ZWAR MIT ABSICHT * ================================================================ * Die Selektoren des Bestands (.iz-order-summary-address und Kinder) stehen * in css/iz-checkout.css, und diese Datei wird auf JEDER is_checkout()-Seite * geladen - also auch auf der LIVE-Kasse /daten/. Wuerde hier ohne Huelle auf * dieselben Selektoren geschrieben, traefe die Aenderung beim naechsten * Ladeschalter-Wechsel unbemerkt die Live-Kasse mit. Die Huelle kommt aus * inc/kauf-schritt-kasse.php und liegt ausschliesslich dort, wo dieser Block * gilt. * * Zweitens loest die Huelle das Spezifitaetsproblem ohne !important: der * Bestand traegt (0,0,2,1), diese Datei durch die Huelle (0,0,3,1). Kein * !important in dieser Datei - Regel 1. * * ================================================================ * DER IST-ZUSTAND, GEMESSEN 2026-08-10 auf /daten-neu/ mit einem Abo im Korb * ================================================================ * Erhoben mit getComputedStyle am gerenderten Ergebnis, nicht aus der Datei * gelesen: * * Flaeche rgb(247,246,244) = #f7f6f4 -> Einzelgaenger, Katalog 8b.3 * Rahmen rgb(226,221,214) = #e2ddd6 -> Einzelgaenger, Katalog 8b.3 * Radius 8px -> Katalog 4 laesst nur 4/3/50% * h3 "Ihre Angaben" 17px, #222 -> Katalog 1 und 2 * "Bearbeiten" 15px, #8b1a1a -> richtiger Ton, aber Literal * h4 Adress-Labels 15px, #888 -> KONTRAST 3,54:1 * p Adresszeilen 16px, #333 -> Katalog 1 und 2 * Leittext 16px, #333 -> Katalog 1 und 2 * Schriftart ALLER Teile EBGaramond12-Regular -> Katalog 2 * * ================================================================ * DER SCHWERSTE BEFUND: DIE FALSCHE SCHRIFTFAMILIE * ================================================================ * Die gesamte Adressbox erbt vom Seitenkoerper EBGaramond12-Regular - die * UEBERSCHRIFTENSCHRIFT. Die Bestelltabelle unmittelbar darunter steht im * selben Moment auf OpenSans (beides am 2026-08-10 mit getComputedStyle * gemessen). Zwei Schriften auf einer Flaeche, ohne dass eine Regel das je * angeordnet haette: die Box hat schlicht nie eine font-family bekommen. * * Katalog Abschnitt 2 ordnet zu: Ueberschriften EBGaramond12-Regular, * "Fliesstext und Bedienelemente" OpenSans. Leittext, Adress-Labels, * Adresszeilen und der Verweis "Bearbeiten" sind Fliesstext und * Bedienelement. Die Ueberschrift "Ihre Angaben" ist eine Ueberschrift und * BEHAELT deshalb EBGaramond - sie wird hier nicht angefasst. * * DAS IST DERSELBE FEHLER, der am 2026-08-09 zweimal auftrat: an den * Warenkorb-Knoepfen und an den Kassen-Eingabefeldern, beide Male eine * Serifenschrift auf einem Bedienelement. Der Wert ist zeichengleich aus * iz-2025/style.css uebernommen, nicht neu erfunden. * * ================================================================ * ZU DEN SCHRIFTGROESSEN - die rem-Basis ist 18px, nicht 16 * ================================================================ * Am 2026-08-09 gemessen und im Katalog berichtigt. Die Skala kennt keine * Stufe bei 16px oder 17px; Zwischenwerte werden laut Katalog nicht * eingefuehrt. Gewaehlt wurde deshalb je Element die Stufe, die der * KATALOGROLLE entspricht, nicht die rechnerisch naechste: * * Adress-Labels, "Bearbeiten" 15px -> --fs-sm (15,75px) praktisch gleich * Adresszeilen, Leittext 16px -> --fs-base (18px) +2px, SICHTBAR * "Ihre Angaben" 17px -> --fs-md (20,25px) +3,25px, SICHTBAR * * Die beiden sichtbaren Vergroesserungen stehen einzeln in der * Abweichungsliste des Berichts, damit Christian sie einzeln zuruecknehmen * kann. Anlass ist Katalog 2 (ausschliesslich rem, feste Skala) - nicht * "waere schoener". * * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN RADIUS AUSSER 4px/3px/50%, * KEIN !important. */ /* ---- Die Box selbst ---- * Flaeche und Rahmen auf die Katalogtoene. #f7f6f4 und #e2ddd6 sind zwei der * "Einzelgaenger" aus Katalog 8b.3 - Toene, die je genau einmal vorkommen und * laut Katalog "ohne jede gestalterische Absicht entstanden" sind. Sie liegen * so dicht an --iz-flaeche und --iz-border, dass der Unterschied nicht * gestalterisch, sondern nur zufaellig ist. */ .iz-kauf-kasse .iz-order-summary-address { background: var(--iz-flaeche); border: 1px solid var(--iz-border); border-radius: var(--r-standard); padding: var(--sp-6); margin-bottom: var(--sp-6); } /* ---- Leittext ueber der Box ---- * "Bitte ueberpruefen Sie Ihre Angaben:" - Bestandstext, bleibt wortgleich * (Regel 16). Er steht ausserhalb der Box im Markup, deshalb ein eigener * Selektor. */ .iz-kauf-kasse .iz-order-summary-address-intro { font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-base); color: var(--iz-text); margin: 0 0 var(--sp-3); } /* ---- Ueberschrift "Ihre Angaben" ---- * Schriftfamilie NICHT gesetzt: eine Ueberschrift gehoert laut Katalog 2 zu * EBGaramond, und genau das erbt sie bereits. Hier wird nur der Grauton auf * die Palette geholt und die Groesse in die Skala. */ .iz-kauf-kasse .iz-order-summary-address h3 { font-size: var(--fs-md); color: var(--iz-text); margin: 0 0 var(--sp-3); } /* ---- Der Verweis "Bearbeiten" ---- * Er erfuellt bereits Paragraf 312j Abs. 2 BGB (Eingabefehler vor Abgabe * berichtigen koennen) und steht seit dem Bestand im Markup - der Bauplan * fuehrt ihn irrtuemlich als noch zu ergaenzen. Regel 16: uebernommen, nicht * ersetzt. Geaendert wird nur, was einen Anlass hat. * * :link und :visited stehen ausdruecklich - Katalog 6 nennt dafuer den * bekannten Fehlerfall der Aboseite, wo ein Knopf nach dem ersten Klick die * Farbe verlor. */ .iz-kauf-kasse .iz-order-summary-address .iz-addr-edit, .iz-kauf-kasse .iz-order-summary-address .iz-addr-edit:link, .iz-kauf-kasse .iz-order-summary-address .iz-addr-edit:visited { font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-sm); color: var(--iz-rot); text-decoration: underline; } .iz-kauf-kasse .iz-order-summary-address .iz-addr-edit:hover { color: var(--iz-rot-hover); } /* Sichtbarer Fokus - Katalog 6: "Ein Fokusring, der nur die Browservorgabe * ist, reicht nicht." Gleiche Werte wie in Bauteil 01 und 07, damit die * Kaufstrecke einen einzigen Fokusring hat und nicht drei. */ .iz-kauf-kasse .iz-order-summary-address .iz-addr-edit:focus-visible { outline: 2px solid var(--iz-rot); outline-offset: 2px; } /* ---- Die Spaltenaufteilung ---- * Uebernommen aus dem Bestand (flex, umbrechend, Mindestbreite 200px) - sie * funktioniert und hat keinen benannten Mangel. Nur der Abstand kommt aus der * Token-Skala statt als nackte 24. */ .iz-kauf-kasse .iz-order-summary-address .iz-addr-cols { gap: var(--sp-6); } /* ---- Die Adress-Labels "RECHNUNGSADRESSE" / "LIEFERADRESSE" ---- * DER EINZIGE HARTE MANGEL DIESER BOX: #888 ergibt auf der hellen Flaeche * 3,54:1 und unterschreitet damit die Schwelle 4,5:1 aus WCAG 2.1 AA 1.4.3 * klar. Der Katalog fuehrt genau diesen Wert in Abschnitt 8b.1 als * "behebt Kontrastmangel". --iz-text-muted liegt bei 5,34:1 gegen Weiss und * 4,83:1 gegen den hellen Flaechenton - beide ueber der Schwelle. * * Versalsatz und letter-spacing bleiben; Katalog 2 verlangt fuer versal * gesetzte Labels .08em, der Bestand steht auf .03em. Das ist eine * Abweichung ohne Mangel - der Katalogwert wuerde die beiden Labels * sichtbar breiter setzen, ohne dass etwas dadurch besser wird. Im Bericht * benannt, hier bewusst nicht geaendert (Regel 16). */ .iz-kauf-kasse .iz-order-summary-address .iz-addr-block h4 { font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-sm); color: var(--iz-text-muted); margin: 0 0 var(--sp-2); } /* ---- Die Adresszeilen ---- * Das ist der Text, den der Kunde vor Vertragsschluss pruefen soll. */ .iz-kauf-kasse .iz-order-summary-address .iz-addr-block p { font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-base); color: var(--iz-text); margin: 0; } /* ---- Die Abo-Pflichtangaben in der Bestelluebersicht ---- * Die Gestaltung steht vollstaendig in css/kauf/03-position.css und wird hier * NICHT wiederholt - die Liste traegt dieselbe Klasse * .iz-kauf-position__angaben wie im Warenkorb. Wer hier Farben oder Groessen * noch einmal setzte, haette das Bauteil nachgebaut statt eingesetzt. * * Die zwei Regeln unten sind reiner Anschluss an die andere Umgebung: In der * Bestelltabelle steht die Liste in einer Tabellenzelle neben einer fett * gesetzten Mengenangabe, im Warenkorb in einer eigenen Spalte. Ohne den * Zeilenumbruch klebte sie an das "x 1" an. */ .iz-kauf-kasse__angaben { display: grid; margin-top: var(--sp-2); } /* Die Mengenangabe der Bestelltabelle steht als unmittelbar vor der * Liste. Sie bleibt in der Zeile der Bezeichnung; die Liste beginnt darunter. */ .woocommerce-checkout-review-order-table td.product-name .iz-kauf-kasse__angaben { font-weight: 400; }