/* Block 54 - Neubau "Kasse": die Angaben-Uebersicht des zweiten Abschnitts. * * Angelegt 2026-08-10 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md, * Abschnitt 5a, Block 54. Alternativ-Adresse /daten-neu/. * * ================================================================ * WARUM ALLES AN .iz-kauf-angaben HAENGT * ================================================================ * Gleiches Prinzip wie in css/kauf/22-uebersicht.css, nur einen Schritt * strenger: Dort haengen die Regeln an der Huelle .iz-kauf-kasse und greifen * auf Bestandsklassen (.iz-order-summary-address) zu. Hier gibt es keinen * einzigen Selektor, der eine Bestandsklasse beruehrt - jede Regel beginnt * mit .iz-kauf-angaben, und dieses Element erzeugt ausschliesslich * template-parts/kauf/angaben-uebersicht.php. Damit kann keine Zeile dieser * Datei die LIVE-Kasse /daten/ erreichen, auch dann nicht, wenn der * Ladeschalter einmal weiter gefasst wird. * * Zweite Folge: Der Block ist ohne Nebenwirkung zuruecknehmbar. Faellt * inc/kauf-kasse-neu.php weg, gibt es kein Element mehr, auf das diese Datei * zeigt. * * ================================================================ * DIE WERTE SIND GEMESSEN, NICHT ERFUNDEN * ================================================================ * Am 2026-08-10 mit getComputedStyle an der heutigen Adressbox auf * /daten-neu/ erhoben (1440 px, ein Abo im Korb), damit der Neubau an * derselben Stelle gleich aussieht und beim Wegfall der alten Box nichts * springt: * * Flaeche rgb(247,243,237) = #f7f3ed -> var(--iz-flaeche) * Rahmen rgb(231,221,208) = #e7ddd0 -> var(--iz-border) * Radius 4px -> var(--r-standard) * Innenabstand 24px -> var(--sp-6) * Leittext OpenSans 18px rgb(36,31,28) -> var(--fs-base), var(--iz-text) * "Ihre Angaben" EBGaramond 20,25px -> var(--fs-md), geerbt * "Bearbeiten" OpenSans 15,75px #8b1a1a -> var(--fs-sm), var(--iz-rot) * Labels OpenSans 15,75px rgb(119,104,95) -> var(--fs-sm), var(--iz-text-muted) * Anschrift OpenSans 18px rgb(36,31,28) -> var(--fs-base), var(--iz-text) * Spalten flex, wrap, gap 24px, Basis 220px, min 200px * * Die Werte der Vorlage 22-uebersicht.css sind hier bewusst wiederholt und * nicht geerbt: 22-uebersicht.css gestaltet die ALTE Box ueber deren * Bestandsklassen. Ein gemeinsamer Selektor haette beide aneinander * gekettet - und die alte faellt mit Block 56 weg. * * ================================================================ * ZWEI STELLEN, AN DENEN HIER BEWUSST NICHTS STEHT * ================================================================ * 1. font-family der Ueberschrift. Katalog 2 weist Ueberschriften * EBGaramond12-Regular zu, und genau das erbt sie bereits vom * Seitenkoerper. Eine Regel dafuer waere eine Wiederholung. * 2. border-bottom der Ueberschrift. Die schwarze Haarlinie kommt aus dem * PARENT-Theme, Regel ".woocommerce-checkout h3" (am 2026-08-10 ueber * document.styleSheets ermittelt, nicht vermutet). Sie trifft jede h3 der * Kasse gleich - Ueberschriften des Feldbereichs, "Wie moechten Sie * bezahlen?" und die alte Adressbox. SCHWARZ STEHT NICHT IN DER PALETTE * (Katalog 1); das ist ein Befund des BESTANDS und gehoert zum Aufraeumen * des Parent-Themes, nicht in diesen Block. Wuerde er hier ueberschrieben, * saehe genau eine Ueberschrift der Seite anders aus als alle uebrigen. * Im Bericht benannt, hier absichtlich nicht angefasst (Regel 16). * * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN RADIUS AUSSER 4px/3px/50%, * KEIN !important. */ /* ---- Die Box ---- */ .iz-kauf-angaben { 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 ---- * Wortgleich aus dem Bestand uebernommen (Regel 16). Er steht im Neubau * INNERHALB der Box, waehrend er im Bestand darueber stand - der Bestand * hatte dafuer keinen erkennbaren Grund, und ein Leittext, der zur Box * gehoert, gehoert in die Box. Im Bericht als Abweichung benannt. */ .iz-kauf-angaben__leittext { font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-base); color: var(--iz-text); margin: 0 0 var(--sp-3); } /* ---- Ueberschrift "Ihre Angaben" mit dem Verweis "Bearbeiten" ---- * Die Aufteilung links/rechts ist aus dem Bestand uebernommen (dort in * css/iz-checkout.css als flex mit space-between gemessen). */ .iz-kauf-angaben__titel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-md); color: var(--iz-text); margin: 0 0 var(--sp-3); } /* ---- Der Ruecksprung "Bearbeiten" ---- * Er erfuellt Paragraf 312i Abs. 1 Nr. 1 BGB: Eingabefehler muessen vor * Abgabe der Bestellung berichtigt werden koennen. * * :link und :visited stehen ausdruecklich - Katalog 6 nennt dafuer den * bekannten Fehlerfall der Aboseite, wo ein Knopf nach dem ersten Klick * seine Farbe verlor. * * min-height 44px: Katalog 6 verlangt Trefffluechen von mindestens * 44 x 44 px. Der Bestand liegt bei gemessenen 81 x 24 px. Das macht die * Ueberschriftenzeile sichtbar hoeher; die Abweichung steht im Bericht. */ .iz-kauf-angaben__bearbeiten, .iz-kauf-angaben__bearbeiten:link, .iz-kauf-angaben__bearbeiten:visited { display: inline-flex; align-items: center; min-height: 44px; font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-sm); color: var(--iz-rot); text-decoration: underline; } .iz-kauf-angaben__bearbeiten:hover, .iz-kauf-angaben__bearbeiten:focus { color: var(--iz-rot-hover); } /* Sichtbarer Fokus - Katalog 6: "Ein Fokusring, der nur die Browservorgabe * ist, reicht nicht." Gleiche Werte wie in Bauteil 01, Bauteil 07 und * 22-uebersicht.css, damit die Kaufstrecke einen einzigen Fokusring hat. */ .iz-kauf-angaben__bearbeiten:focus-visible { outline: 2px solid var(--iz-rot); outline-offset: 2px; } /* ---- Die zwei Spalten ---- * flex-basis 220px mit min-width 200px: gemessene Bestandswerte. Unterhalb * von rund 460px Innenbreite brechen die Spalten von selbst untereinander - * dafuer braucht es keine Umbruchmarke. AM GERAET NICHT GEPRUEFT: Die * Testumgebung erzeugt keine Breiten unter etwa 825px (Regel 14). */ .iz-kauf-angaben__spalten { display: flex; flex-wrap: wrap; gap: var(--sp-6); } .iz-kauf-angaben__block { flex: 1 1 220px; min-width: 200px; } /* ---- Die Labels "RECHNUNGSADRESSE" / "LIEFERADRESSE" ---- * --iz-text-muted statt des Bestandswertes #888: jener ergibt auf der hellen * Flaeche 3,54:1 und unterschreitet WCAG 2.1 AA 1.4.3 (4,5:1) klar; der * Katalog fuehrt ihn in Abschnitt 8b.1 ausdruecklich als "behebt * Kontrastmangel". --iz-text-muted liegt bei 4,83:1 gegen den hellen * Flaechenton. * * letter-spacing .08em: Katalog 2 fuer versal gesetzte Labels. Der Bestand * steht auf .03em; 22-uebersicht.css hat ihn dort bewusst gelassen, weil es * eine Bestandsdatei gestaltet. DIES IST NEUES CSS, und fuer neues CSS ist * der Katalog bindend (Katalog 8, Schritt 2). Im Bericht benannt. */ .iz-kauf-angaben__label { font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-sm); color: var(--iz-text-muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-2); } /* ---- Die Anschrift ---- * Das ist der Text, den der Kunde vor Vertragsschluss pruefen soll. */ .iz-kauf-angaben__anschrift { font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-base); color: var(--iz-text); line-height: 1.6; margin: 0; }