/* ct-version: 20260820-6 */ /* ct: Warenkorb, Bestellvorgang und Bestellabschluss — neu angelegt am 19.08.2026 im Korrekturpaket (Punkte 11, 12d, 14). Bis dahin hatte der ganze Kaufabschluss keine eigene Bereichsdatei und lief im NOVA-Default: graue Fortschrittsleiste mit runden Marken, ungleiche Feldhoehen in der Versandkostenzeile, eine Bestellbestaetigung ohne jede Gestaltung. Das ist Fehlerregister 9 (Framework-Default als Design) genau an der Stelle, an der der Kunde Geld ausgibt. Regeln wie in allen ct-Dateien: eigene Rollen-Tokens statt Pixelwerte, niedrige Spezifitaet, kein !important ohne Begruendung. */ :root{--ct-css-checkout:'20260821-13'} /* ========================================================================== 1. Versandkostenrechner im Warenkorb (Korrekturpaket 11) -------------------------------------------------------------------------- ⛔ Befund: Die drei Teile EINER Bedienzeile bezogen ihre Hoehe aus drei Quellen — Auswahlfeld 40px (unser `#content .custom-select`), Textfeld und Knopf je 43px (NOVAs Polster + Rahmen). Gemessen `bottom` 881 gegen 884. Das ist wortwoertlich Fehlerregister 11: in einer visuell zusammen- gehoerenden Gruppe wird die Hoehe EINMAL festgelegt und von allen Teilen referenziert. Ab hier ist das --ct-control-h (ct-base.css). ⚠️ `max-height:none` gehoert zwingend dazu: NOVA deckelt Form-Controls und Buttons per max-height (NOVA-LIVE-LEHREN I.6), sonst bleibt die Hoehe wirkungslos, obwohl die Regel nachweislich laedt. Der Radius war ebenfalls uneinheitlich (0 gegen 2px) — kantig fuer alle. */ .shipping-calculator-form .form-control, .shipping-calculator-form .custom-select, .shipping-calculator-form .btn{ height:var(--ct-control-h); max-height:none; border-radius:var(--ct-radius-sm); /* ct: 20260820-3 — Rolle Bedienelement */ } .shipping-calculator-form .btn{ display:inline-flex;align-items:center;justify-content:center; font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } /* ========================================================================== 2. Fortschrittsleiste des Bestellvorgangs (Korrekturpaket 14) -------------------------------------------------------------------------- NUR Farben und Typo, keine Strukturaenderung — die Leiste ist JTL-Mechanik (Schritt-Links, aktiver Zustand, Mobil-Zweig `d-none d-md-inline-block` am Schritttext). Gemessener Ausgangszustand: Band rgb(245,247,250) mit 1px-Rahmen rgb(235,235,235), runde 25px-Marken (border-radius 160px), Textfarbe NOVAs rgb(82,82,82). Weder Grau noch Rundung kommen in der Designsprache vor. ========================================================================== */ .checkout-steps.stepper{ background:var(--ct-ink); border-color:var(--ct-ink); /* ct: 20260820-3 — Rolle Karte/Band; overflow, damit die aufgehellte Flaeche des aktiven Schritts nicht ueber die Rundung des Bands steht. */ border-radius:var(--ct-radius); overflow:hidden; } .checkout-steps .step{background:transparent} /* Aktiver Schritt: leicht aufgehellte Flaeche statt weisser Kachel. */ .checkout-steps .step.step-active, .checkout-steps .step.step-current{background:var(--ct-ink-2)} .checkout-steps .step a, .checkout-steps .step .step-content{color:var(--ct-dmuted);text-decoration:none} .checkout-steps .step a:hover .step-text{color:var(--ct-volt)} .checkout-steps .step-text{ font-family:var(--ct-font-text); font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--ct-dmuted); } .checkout-steps .step.step-active .step-text, .checkout-steps .step.step-current .step-text{color:#fff} /* Schrittmarke: kantig statt Pille. Aktiv = Volt auf Ink, offen = nur Rahmen. */ .checkout-steps .badge.badge-pill{ border-radius:var(--ct-radius-sm); /* ct: 20260820-3 — Rolle Badge */ width:24px;height:24px;min-width:24px; display:inline-flex;align-items:center;justify-content:center; padding:0; font-family:var(--ct-font-display);font-weight:800;font-size:12px; } .checkout-steps .badge.badge-primary{ background:var(--ct-volt);border-color:var(--ct-volt);color:var(--ct-ink); } .checkout-steps .badge.badge-secondary{ background:transparent;border:1px solid var(--ct-dline);color:var(--ct-dmuted); } .checkout-steps .badge .badge-count{color:inherit;font-size:12px} /* ct: NOVA zeichnet die Pfeilspitze zwischen den Schritten als Pseudoelement mit der HELLEN Bandfarbe — auf Ink waere sie ein weisser Keil. Beide Zustaende mitziehen, sonst blitzt der alte Grauwert genau an der Kante auf (dieselbe Klasse von Befund wie NOVAs Gelb im ::before, LEHREN C.2). */ .checkout-steps .step::before, .checkout-steps .step::after{ border-left-color:var(--ct-ink); border-color:var(--ct-ink); background:var(--ct-ink); } .checkout-steps .step.step-active::after, .checkout-steps .step.step-current::after{ border-left-color:var(--ct-ink-2); background:var(--ct-ink-2); } /* ========================================================================== 3. Bestellbestaetigung (Korrekturpaket 12d) -------------------------------------------------------------------------- ⚠️ Diese Regeln sind gegen das ECHTE Markup gebaut, nicht gegen vermutete Klassennamen: Der erste Entwurf hing an `.checkout-completed` und `.order-number` — beide gibt es auf der Seite gar nicht. Gemessen wurde am Objekt nach einer echten Testbestellung (Gast, Nachnahme, Bestellnummer 10002): #content > div.container > h1 "Ihre Bestellung ist bei uns eingegangen." > div.container > div.order-completed p.checkout-paymentmodules-alert ul.payment-method-module-ids > li > strong "Ihre Bestellnummer: " + 10002 div.row > div.col… > a.btn.btn-primary "Weiter einkaufen" IST vorher: linksbuendiger Textblock ueber die volle 1360px-Content-Breite, ohne Rahmen, ohne Hierarchie — der Abschluss des Kaufs sah aus wie eine Fehlermeldung (Fehlerregister 9). Anker ist der INHALT (`:has(.order-completed)`), nicht eine Seiten-ID — IDs weichen zwischen Installationen ab (NOVA-LIVE-LEHREN I.0). Inhalt und Wortlaut kommen weiterhin komplett von JTL; hier steht nur der Rahmen. */ #content:has(.order-completed){ max-width:720px; margin-left:auto;margin-right:auto; padding-bottom:var(--ct-band-y); } /* Ink-Kopf: der erste .container traegt nur die H1. */ #content:has(.order-completed) > .container:first-of-type{ background:var(--ct-ink); padding:var(--ct-stack-lg); margin:0; } #content:has(.order-completed) > .container:first-of-type h1{ color:#fff; font-size:28px;line-height:1.1; margin:0; } /* Karte darunter — bewusst randlos an den Kopf angeschlossen. */ #content:has(.order-completed) .order-completed{ border:1px solid var(--ct-line); border-top:0; padding:var(--ct-stack-lg); } #content:has(.order-completed) .checkout-paymentmodules-alert{ margin:0 0 var(--ct-stack-md); font-size:14.5px;line-height:1.6;color:var(--ct-muted); } #content:has(.order-completed) .payment-method-module-ids{ margin:0 0 var(--ct-stack-lg); padding-top:var(--ct-stack-md); border-top:1px solid var(--ct-line); } #content:has(.order-completed) .payment-method-module-ids li{ margin-bottom:var(--ct-stack-sm); font-size:14px;color:var(--ct-text); } #content:has(.order-completed) .payment-method-module-ids li strong{ display:block; font-family:var(--ct-font-text); font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--ct-muted); margin-bottom:4px; } /* ct: Die Bestellnummer ist die Information, wegen der die Seite ueberhaupt aufgehoben wird — sie bekommt die Anzeigestufe. Sie steht als NACKTER Textknoten hinter dem , ist also nur ueber das
  • erreichbar; die Beschriftung darueber wird deshalb per Regel oben kleingesetzt. ⚠️ `:first-child` ist inhaltlich begruendet (JTL gibt die Bestellnummer als erste Zeile aus) und nicht gezaehlte Position im Raster — kaeme spaeter eine Zeile davor, ist das ein Befund, kein stiller Fehler. */ #content:has(.order-completed) .payment-method-module-ids li:first-child{ font-family:var(--ct-font-display); font-weight:900;font-size:26px;line-height:1.1;letter-spacing:-.01em; color:var(--ct-text); } /* CTA im Kartenstil statt in einer 2-von-12-Spalte. */ #content:has(.order-completed) .order-completed .row{margin-left:0;margin-right:0} #content:has(.order-completed) .order-completed .row > [class*="col"]{ flex:0 0 100%;max-width:100%;padding-left:0;padding-right:0; } #content:has(.order-completed) .order-completed .btn{ border-radius:var(--ct-radius-sm); /* ct: 20260820-3 — Rolle Bedienelement */ min-height:var(--ct-control-h); } /* ========================================================================== 4. Checkout-Inhaltsbreite (Ben-Review 20.08., "warum linksbuendig?") -------------------------------------------------------------------------- Die Schritte 2/3 fuellen nur eine lg-9-Spalte; auf 1889px lief der Block linksbuendig und rechts stand ein Drittel Leere. Der Kaufabschluss ist eine fokussierte Strecke — der Content bekommt einen Deckel und sitzt mittig. Anker ist die Fortschrittsleiste (gibt es nur im Bestellvorgang); die Warenkorbseite selbst behaelt ihre volle Breite. */ #content:has(.checkout-steps){ max-width:1100px; margin-left:auto;margin-right:auto; } /* ========================================================================== 5. "Artikel im Warenkorb" — Zwischenseite UND AJAX-Modal (Ben-Review) -------------------------------------------------------------------------- Markup ist NOVAs #pushed-success (Seite: als .card.alert; Modal: derselbe Inhalt im Bootstrap-Modal). Befunde: nackte Bootstrap-Optik, Bild fuellte die halbe Seite, dl-Zeilen ohne Rhythmus, zwei ungleiche Buttons. */ #pushed-success .card-header.alert-success{ background:var(--ct-band-paper); border-bottom:1px solid var(--ct-line); color:var(--ct-text); font-weight:600; } #pushed-success .productbox-title{ font-family:var(--ct-font-display);font-weight:800;font-size:18px; letter-spacing:-.01em;text-transform:uppercase;color:var(--ct-text); } /* Bilddeckel am BILD, nicht am Wrapper (Fehlerregister 1). */ #pushed-success .pushed-success-image-wrapper img{ max-height:200px;width:auto;max-width:100%;object-fit:contain; margin-left:auto;margin-right:auto;display:block; } #pushed-success dl.form-row dt{ font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--ct-muted); } #pushed-success dl.form-row dd{font-size:14px;color:var(--ct-text)} #pushed-success .pushed-success-buttons .btn{ min-height:var(--ct-control-h); display:inline-flex;align-items:center;justify-content:center; gap:8px; /* ct: 20260820-5 (Befund N-6) — Icon klebte am Label (0px) */ border-radius:var(--ct-radius-sm); /* ct: 20260820-4 — Rolle Bedienelement */ font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } /* Modal-Rahmen: mittig, im Viewport, CT-Rundung. Mobil ragte der Dialog links aus dem Schirm und scrollte horizontal (Ben-Screenshot 390px); der Rahmen wird hart auf die Viewportbreite gedeckelt. ct: 20260820-5 (Code-Review-Befund 5) — Rundung/Overflow sind auf das WARENKORB-Modal gescopet (:has, im Projekt etabliert): global machte `overflow-x:hidden` jedes Modal zum Scroll-Container (implizites overflow-y:auto clippt absolute Nachkommen) und haette Filter-Modal und PDP-Lightbox getroffen. Nur die Zentrierung bleibt global — sie ist Bootstrap-Verhalten ab sm und mobil ueberall richtig. */ .modal-dialog{margin-left:auto;margin-right:auto} .modal-dialog:has(#pushed-success) .modal-content{ border-radius:var(--ct-radius);border:1px solid var(--ct-line); } @media (max-width: 767.98px){ .modal-dialog:has(#pushed-success){ max-width:calc(100vw - 24px); margin:12px auto; } .modal-dialog:has(#pushed-success) .modal-content{overflow-x:hidden} #pushed-success .pushed-success-image-wrapper img{max-height:150px} } /* ========================================================================== 6. Fortschrittsleiste MOBIL (Ben-Review, "Steps schauen kaputt aus") -------------------------------------------------------------------------- Unter md quetschte sich der aktive Schritttext zweizeilig, die inaktiven Schritte klebten als Fragmente daneben und die Pfeil-Pseudos zerrissen die Kanten. Mobil: eine ruhige Zeile — Nummern + EIN einzeiliger Titel, Pfeile aus. */ @media (max-width: 767.98px){ .checkout-steps.stepper{flex-wrap:nowrap;align-items:stretch} .checkout-steps .step{display:flex;align-items:center;min-width:0} /* ct: 20260820-5 (Abnahme-Befund 18a) — die Breitenbegrenzung gehoert an JEDE Ebene der Kette (Register 15): Link und Content sind Flex-Kinder und ragten sonst 41-51px UEBER die Step-Box in die "3" hinein — inklusive der Volt-Unterstreichung des aktiven Schritts. */ .checkout-steps .step a{min-width:0;max-width:100%;overflow:hidden;display:block} .checkout-steps .step .step-content{ display:flex;align-items:center;gap:8px; padding:12px 10px; min-width:0;max-width:100%;overflow:hidden; } .checkout-steps .step-text{ font-size:10.5px;letter-spacing:.06em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; min-width:0; } .checkout-steps .step::before, .checkout-steps .step::after{display:none} } /* ========================================================================== 7. Versandart-Zeile MOBIL (Ben-Review, "sieht komisch aus") -------------------------------------------------------------------------- NOVAs Zeile ist ein sm-Raster (Titel 5 / Lieferdauer 3 / Preis 4); unter 576px stapelten alle drei linksbuendig untereinander und lasen sich zusammenhanglos. Mobil: Titel und Preis in EINER Zeile, Lieferdauer gedaempft darunter. */ @media (max-width: 575.98px){ /* ct: 20260820-5 (Abnahme-Befund 18b) — Titel + Preis in Zeile 1 per order, Lieferdauer gedaempft darunter; margin:0 gegen 28px-Sprung und 5px-Ueberstand aus den Bootstrap-Negativraendern. ct: 20260820-6 (Nachmessung Punkt 4) — der Anker war falsch: die Klasse `checkout-shipping-form-options-radio` sitzt am INPUT (kinderlos), die .content-Row ist sein GESCHWISTER im Label — der alte Nachfahren- Selektor traf nie. Anker ist jetzt die umgebende form-group `.checkout-shipping-form-options` (step3_shipping_options.tpl Z.36). */ .checkout-shipping-form-options .content{ display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px; margin:0; } .checkout-shipping-form-options .content > [class*="col"]{margin:0} .checkout-shipping-form-options .content > .title{order:1;flex:1 1 auto;width:auto;max-width:none;padding:0} .checkout-shipping-form-options .content > .price-col{ order:2;flex:0 0 auto;width:auto;max-width:none;padding:0;margin-left:auto;text-align:right; } .checkout-shipping-form-options .content > [class*="col"]:not(.title):not(.price-col){ order:3;flex:0 0 100%;width:100%;max-width:none;padding:0;margin-top:2px; } .checkout-shipping-form-options .content .desc{color:var(--ct-muted)} } /* ct: 20260820-5 (Abnahme-Befund N-3, Register 11) — "Zurueck"/"Weiter" und "Warenkorb aendern"/"Bestellen" schlossen 43 vs 44px (der bezieht die Hoehe aus Inhalt+Rahmen, der