/** * Block 24 - Bestellabschluss: die Pflichtangaben unmittelbar vor dem Knopf. * * Angelegt 2026-08-10 nach IZ-Kompass/3_Architekturplan_Kaufstrecke.md, * Abschnitt 5, Block 24. Gestaltung verbindlich nach * IZ-Kompass/10_IZ_Gestaltungskatalog.md. * * ALLE REGELN HAENGEN AN .iz-kauf-abschluss. Diese Klasse setzt * ausschliesslich template-parts/kauf/bestellabschluss.php, und die Vorlage * wird nur ausgegeben, wenn iz_kauf_abschluss_aktiv() wahr ist - waehrend * der Bauphase also nur auf /daten-neu/. Ohne diese Klasse kann keine * einzige Regel dieser Datei die LIVE-Kasse erreichen. Gleiches * Sicherungsprinzip wie .iz-kauf-kasse in Block 22 und .iz-kauf-zahlung in * Block 23. * * KEINE HEX-LITERALE. Farben ausschliesslich aus css/iz-tokens.css. * SCHRIFTGROESSEN nur aus der Skala (--fs-*), Basis 18px. * RADIEN nur --r-standard (4px) - Katalog Abschnitt 4. * * ================================================================ * WARUM order: 2 - und warum das eine begruendete Abweichung vom * Bauplan ist * ================================================================ * Der Bauplan verlangt fuer Block 24 die Reihenfolge * 1. Pflichtangaben 2. Pflicht-Checkboxen 3. Bestellknopf 4. "Zurueck" * und sagt im selben Abschnitt: "Uebernommen: die Anordnung von * PayPal-/Apple-Pay-/Google-Pay-Bereich und Zurueck-Knopf ueber order-Werte * in der Flexbox - sie loest ein reales SDK-Problem und wird nicht * angetastet." * * Beides zusammen geht nicht, und das zeigt erst die Messung am gerenderten * DOM (2026-08-10, 1440px): * * #order-verify ist eine Flexbox-Spalte (css/iz-checkout.css Z. 675). * Darin gilt: Checkboxen order 0 (Standard) * PayPal / Wallets order 1 (iz-checkout.css Z. 679-683) * Bestellknopf order 2 (iz-checkout.css Z. 685-688) * * Ein Element ohne eigenen order-Wert landet bei 0 - also VOR dem * PayPal-Bereich und damit zwei Bloecke oberhalb des Knopfes. Genau die * Trennung, die Paragraf 312j Abs. 2 BGB nicht will. * * Die Checkboxen auf order 2 zu heben, um die Bauplan-Reihenfolge * herzustellen, waere der falsche Weg: Block 23 hat die Express-Knoepfe * bewusst hinter die Bestaetigung der Bedingungen gestellt, weil ein Klick * auf Apple Pay die Zahlung UNMITTELBAR ausloest. Die Checkboxen muessen * also vor dem Wallet-Bereich stehen bleiben. * * DESHALB: order 2 fuer diesen Block. Im DOM steht er vor * .wc-gzd-order-submit, bei gleichem order-Wert entscheidet die * DOM-Reihenfolge - die Pflichtangaben stehen damit UNMITTELBAR ueber dem * Bestellknopf, ohne Zwischenelement. Rechtlich ist das strenger als die * Bauplan-Reihenfolge, nicht schwaecher. * * Ohne JavaScript entsteht #order-verify nicht, es gibt keine Flexbox und * order bleibt wirkungslos. Dann gilt die DOM-Reihenfolge: Pflichtangaben, * Checkboxen, Knopf - ebenfalls tragfaehig. * * @package iz-2025-child * @since 2026-08-10 */ /* ---- Huelle ---- * Die Flaeche setzt die Angaben vom uebrigen Formular ab ("in hervorgehobener * Weise", Paragraf 312j Abs. 2 BGB) und verwendet dieselbe Flaeche und * denselben Rahmen wie die Adressbox aus Block 22 - eine Kasse, eine * Formensprache. */ .iz-kauf-abschluss { order: 2; box-sizing: border-box; margin-top: var(--sp-6); margin-bottom: 0; padding: var(--sp-4) var(--sp-6); border: 1px solid var(--iz-border); border-radius: var(--r-standard); background: var(--iz-flaeche); font-family: "OpenSans", "Verdana", sans-serif; color: var(--iz-text); } /* ---- Ueberschrift ---- * Sichtbar, nicht nur fuer Vorlesewerkzeuge: Paragraf 312j Abs. 2 BGB * verlangt die Angaben "klar und in hervorgehobener Weise". Eine unsichtbare * Ueberschrift traegt das nicht. * * EBGaramond ist hier richtig und kein Widerspruch zu Block 22: Der Katalog * weist Ueberschriften die Serifenschrift zu, Fliesstext und Bedienelemente * OpenSans. Block 22 hat genau deshalb die Ueberschrift "Ihre Angaben" bei * EBGaramond belassen und nur den Inhalt der Box umgestellt. */ .iz-kauf-abschluss__titel { margin: 0 0 var(--sp-3); font-family: "EBGaramond12-Regular", Georgia, serif; font-size: var(--fs-md); font-weight: 400; line-height: 1.25; color: var(--iz-text); } /* ---- Positionsliste ---- */ .iz-kauf-abschluss__liste { margin: 0; padding: 0; list-style: none; } .iz-kauf-abschluss__position + .iz-kauf-abschluss__position { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--iz-border-soft); } /* Wesentliche Merkmale der Leistung - Art. 246a Paragraf 1 Abs. 1 S. 1 Nr. 1 * EGBGB. Bewusst kraeftiger als die Detailangaben darunter. */ .iz-kauf-abschluss__bezeichnung { margin: 0; font-size: var(--fs-base); font-weight: 700; line-height: 1.35; color: var(--iz-text); } .iz-kauf-abschluss__menge { font-weight: 400; color: var(--iz-text-muted); white-space: nowrap; } /* ---- Abo-Pflichtangaben je Position ---- * Laufzeit, Rhythmus, erste und folgende Zahlung, Kuendigung * (Art. 246a Paragraf 1 Abs. 1 S. 1 Nr. 11 und 12 EGBGB). * Zweispaltig ab 480px, damit Label und Wert nebeneinander lesbar sind; * darunter untereinander, weil zwei Spalten auf schmalen Geraeten die Werte * zerreissen wuerden. */ .iz-kauf-abschluss__angaben { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-3); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); line-height: 1.45; } .iz-kauf-abschluss__angaben dt { margin: 0; color: var(--iz-text-muted); } .iz-kauf-abschluss__angaben dd { margin: 0 0 var(--sp-1); color: var(--iz-text); } @media screen and (min-width: 480px) { .iz-kauf-abschluss__angaben { grid-template-columns: auto 1fr; } .iz-kauf-abschluss__angaben dd { margin-bottom: 0; } } /* ---- Gesamtpreis ---- * Art. 246a Paragraf 1 Abs. 1 S. 1 Nr. 4 EGBGB. Der Preis ist die Angabe, * auf die es beim Klick ankommt, und traegt deshalb die groesste Stufe in * diesem Kasten. */ .iz-kauf-abschluss__gesamt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--iz-border); font-size: var(--fs-md); line-height: 1.3; } .iz-kauf-abschluss__gesamt-label { font-weight: 400; color: var(--iz-text); } .iz-kauf-abschluss__gesamt-wert { font-weight: 700; color: var(--iz-text); } /* ---- Steuer- und Versandhinweis ---- * Paragraf 3 Abs. 2 PAngV. Kleiner als der Preis, aber nicht kleiner als die * uebrigen Detailangaben - --fs-sm ist die unterste Stufe, die hier zulaessig * ist; --fs-xs waere fuer eine Pflichtangabe zu klein. * Farbe --iz-text-muted, nicht --iz-text: gemessener Kontrast 5,34:1 auf * --iz-flaeche (Block-22-Messung), also ueber der AA-Schwelle von 4,5:1. */ .iz-kauf-abschluss__hinweis { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--iz-text-muted); }