/* Bauteil 07 - Knoepfe der Kaufstrecke. * * Angelegt 2026-08-09 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md, * Abschnitt 2, Block 07 - dort steht die verbindliche Wertetabelle, aus der * diese Datei Zeile fuer Zeile abgeleitet ist. Nichts hier ist erfunden. * * WARUM DIESES BAUTEIL FRUEHER ENTSTANDEN IST ALS BEAUFTRAGT: * Der Auftrag umfasste die Bauteile 03, 04 und 06 sowie die Bloecke 11-13. * Die Bloecke 12 und 13 tragen aber Knoepfe ("Warenkorb aktualisieren", * "Weiter zu Persönliche Daten", "Weiter einkaufen"). Ohne Bauteil 07 * haetten sie entweder gar keine Gestaltung oder je eine eigene bekommen - * und damit genau die Doppelpflege erzeugt, die dieser Umbau beseitigen * soll (der Bestand hat acht Knopf-Selektoren mit teils eigenen Farben). * Deshalb steht die Gestaltung einmal hier statt zweimal dort. Der Umfang * ist auf die zwei Knopfarten des Bauplans begrenzt; nichts darueber hinaus. * * ZWEI KNOPFARTEN, MEHR NICHT: * .iz-kauf-knopf--haupt gefuellt - der jeweils naechste Schritt * .iz-kauf-knopf--neben Kontur - alles andere * * KEIN HEX-LITERAL, KEINE PX-SCHRIFTGROESSE, KEIN !important. * Radius var(--r-standard) statt "border-radius: 0" wie im Bestand * (iz-checkout.css Z. 494) - Gestaltungskatalog Abschnitt 4. * * :link UND :visited SIND AUSDRUECKLICH GESETZT. * Der Gestaltungskatalog Abschnitt 6 nennt den bekannten Fehlerfall der * Aboseite: ein Knopf, der als gebaut ist und dessen Textfarbe nur auf * dem Grundzustand steht, wird nach dem ersten Besuch violett. */ /* WARUM .checkout-button MIT AUFGEFUEHRT IST: * Der Knopf "Weiter zu Persönliche Daten" wird von WooCommerce selbst * gerendert (woocommerce_button_proceed_to_checkout am Hook * woocommerce_proceed_to_checkout). An diesem Hook haengen auch die * Express-Zahlungsknoepfe; er wird deshalb nicht angetastet. Statt den Knopf * nachzubauen oder seine Ausgabe zu filtern, bekommt seine * WooCommerce-Klasse hier dieselben Regeln wie der Hauptknopf. Damit steht * die Knopfgestaltung weiterhin an genau einer Stelle. */ /* ZUR SPEZIFITAET DES DRITTEN SELEKTORS, GEMESSEN STATT GESCHAETZT: * Der erste Anlauf am 2026-08-09 lautete .iz-kauf-weiterfuehrung * .checkout-button (0,0,2,0) und blieb bei der Schriftart wirkungslos - der * Knopf kam weiterhin mit Interstate-LightCond heraus. Die Ursache wurde am * gerenderten Ergebnis ermittelt, indem alle auf das Element passenden * Teilselektoren mit einer font-family aufgelistet wurden: Es gewinnt * .cart-collaterals .wc-proceed-to-checkout .wc-forward aus dem Parent mit * 0,0,3,0. Der hiesige Selektor traegt jetzt 0,0,3,1 - eine Klasse und ein * Element mehr, also die kleinstmoegliche Erhoehung, die sicher schlaegt. * Kein !important. */ .iz-kauf-knopf, a.iz-kauf-knopf, .iz-kauf-weiterfuehrung .wc-proceed-to-checkout a.checkout-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; /* Mindestens 44px Trefflaeche - Gestaltungskatalog Abschnitt 6. * --sp-12 ist 48px, die naechste Stufe der Skala darueber. */ min-height: var(--sp-12); padding: var(--sp-2) var(--sp-6); border: 1px solid var(--iz-rot); border-radius: var(--r-standard); /* NACHGETRAGEN 2026-08-09 auf Christians Hinweis: "Die Schriftart auf dem * Button 'Weiter zu persönliche Daten' stimmt nicht." * * GEMESSEN, NICHT GESCHLOSSEN (getComputedStyle auf /warenkorb-neu/, * 1440px). Es waren DREI verschiedene Schriften auf drei Knoepfen * derselben Seite: * "Weiter zu persönliche Daten" Interstate-LightCond, 17px * "Weiter einkaufen" EBGaramond12-Regular, 18px * "Warenkorb aktualisieren" EBGaramond12-Regular, 18px * * Zwei verschiedene Ursachen, eine Loesung: * - Die beiden eigenen Knoepfe hatten hier KEINE font-family. Das * Parent-Theme setzt button/input/select/textarea auf * font-family: inherit, also erbten sie die Ueberschriftenschrift des * umgebenden Bereichs. * - .checkout-button bekam Interstate-LightCond aus einer Sammelregel des * Parent (eine Klasse, 0,0,1,0). Der hiesige Selektor * .iz-kauf-weiterfuehrung .checkout-button ist 0,0,2,0 und schlaegt sie * ohne !important. * * Der Gestaltungskatalog Abschnitt 2 weist Bedienelementen OpenSans zu; * EBGaramond ist die Ueberschriften-, Interstate die Navigationsschrift. * Die Schreibweise ist zeichengleich aus iz-2025/style.css uebernommen * (dort 79-mal belegt) - keine eigene Fassung, keine zusaetzliche * Rueckfallschrift, keine Webfont-Einbindung. */ font-family: "OpenSans", "Verdana", sans-serif; font-size: var(--fs-base); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .iz-kauf-knopf:focus-visible, a.iz-kauf-knopf:focus-visible, .iz-kauf-weiterfuehrung .wc-proceed-to-checkout a.checkout-button:focus-visible { outline: 2px solid var(--iz-rot); outline-offset: 2px; } /* ---- Hauptknopf ---- */ .iz-kauf-knopf--haupt, a.iz-kauf-knopf--haupt, a.iz-kauf-knopf--haupt:link, a.iz-kauf-knopf--haupt:visited, .iz-kauf-weiterfuehrung a.checkout-button:link, .iz-kauf-weiterfuehrung a.checkout-button:visited { background: var(--iz-rot); color: var(--iz-weiss); } .iz-kauf-knopf--haupt:hover, a.iz-kauf-knopf--haupt:hover, .iz-kauf-knopf--haupt:focus-visible, a.iz-kauf-knopf--haupt:focus-visible, .iz-kauf-weiterfuehrung a.checkout-button:hover, .iz-kauf-weiterfuehrung a.checkout-button:focus-visible { background: var(--iz-rot-hover); border-color: var(--iz-rot-hover); color: var(--iz-weiss); } /* ---- Nebenknopf ---- */ .iz-kauf-knopf--neben, a.iz-kauf-knopf--neben, a.iz-kauf-knopf--neben:link, a.iz-kauf-knopf--neben:visited { background: var(--iz-weiss); color: var(--iz-rot); } .iz-kauf-knopf--neben:hover, a.iz-kauf-knopf--neben:hover, .iz-kauf-knopf--neben:focus-visible, a.iz-kauf-knopf--neben:focus-visible { background: var(--iz-rot); color: var(--iz-weiss); } /* ---- Gesperrter Zustand ---- * Wird von Block 12 gesetzt, solange eine Warenkorb-Aktualisierung laeuft. * Nicht allein ueber Farbe: der Zeiger wechselt zusaetzlich. */ .iz-kauf-knopf[disabled], .iz-kauf-knopf[aria-disabled="true"] { opacity: 0.6; cursor: progress; }