/* pz: Bestellvorgang — Stepper, Spaltenaufteilung, Button-Paare
   (Reviewer F4, m7, m8). CSS-only: der Checkout ist die getestete
   Bestellstrecke, an den .tpl wird hier NICHTS geaendert.
   Version: siehe Marker --pz-css-checkout unten (muss mit layout/header.tpl uebereinstimmen) */

:root { --pz-css-checkout: "20260821-26"; }

/* ============================================================================
   pz: D2 + D4 — CHECKOUT-KOPF IST EIN EIGENES LAYOUT
   (Ben 20.08.: "das Logo ueberlappt die Header Trennlinie wieder" —
   WIEDERHOLUNG VON SPANL, Fehlerregister 25 / FEHLERMUSTER.md Zeile 5;
   dazu D4: "Sichere Bezahlung scrollt ueber die gesamte Seite mit".)

   BEFUND, am lebenden Objekt gemessen (20.08., 1440 und 390) — beide
   Beanstandungen haben DIESELBE Wurzel, deshalb stehen sie hier zusammen:

   1) `my-nova_crit.css` (die zweite, unsichtbare Regelquelle, Lehre I.1)
      deckelt den Kopf im Bestellvorgang auf eine feste Hoehe:
        .is-checkout header, .is-checkout .navbar { height: 2.8rem }
        @media(min-width:992px) { … { height: 4.2625rem } }   = 68,19px
      NOVA rechnet dabei mit seinem eigenen Bild-Logo. Unsere Wortmarke
      (.pz-mark, 28px + Unterzeile) misst 64px und beginnt bei y=24 —
      sie endet also bei y=88, waehrend die Trennlinie des Kopfes bei y=68
      sitzt: 20px Ueberlappung. Mobil dasselbe in klein (Kopf 44,8px,
      Marke bis 48px = 3,2px).
   2) Derselbe Deckel erklaert D4: der Kopf ist `sticky-top`, sein INHALT
      (137px) ist aber doppelt so hoch wie seine Box (68px) und laeuft
      unten heraus. "Sichere Bezahlung" haengt als Teil dieses Kopfes im
      Nichts und wandert beim Scrollen ueber die ganze Seite —
      gemessen: .secure-checkout-icon y=112…137 in einem 0…68-Kasten.
      Es ist also KEIN eigenes sticky-Element (dessen `position` ist
      `static`) — wer dort nach `position: sticky` sucht, findet nichts.
      Genau das ist der Grund, warum die Stelle bisher durchrutschte.

   LOESUNG: Der Bestellvorgang bekommt seinen eigenen Kopf statt einer
   verkleinerten Fassung des Shopkopfes. Eine Zeile, Hoehe aus dem Inhalt,
   nicht klebend. Damit ist die Ueberlappung konstruktiv 0 (nicht auf einen
   Wert getrimmt) und "Sichere Bezahlung" steht dort, wo es hingehoert.

   ⚠️ Spezifitaet statt !important (Fehlerregister 16): der Deckel steht als
   `.is-checkout header` (0,1,1). `.is-checkout header#jtl-nav-wrapper`
   ist (1,1,1) und gewinnt auf beiden Ebenen. */
.is-checkout header#jtl-nav-wrapper {
  height: auto;
  /* D4: im Bestellvorgang gibt es keine Navigation, die man im Scrollen
     erreichen muesste — der Kopf hat keinen Grund zu kleben. */
  position: static;
}
/* Der Shopkopf legt ab 992px ein zweizeiliges Raster an
   (`grid-template-rows: 112px auto`, pz-header.css) — Reihe 2 ist die
   Hauptnavigation, die es hier gar nicht gibt. Genau in diese leere zweite
   Reihe fiel "Sichere Bezahlung". Hier stattdessen EINE Zeile.
   `nav.navbar` wird auf allen Breiten `display: contents`, damit
   .secure-checkout-icon ueberall ein direktes Rasterkind ist (unter 992px
   ist es sonst in die navbar eingepackt — Fehlerregister 10: dieselbe
   Mechanik verhaelt sich je Breakpoint anders). */
.is-checkout header#jtl-nav-wrapper > .container-fluid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  align-items: center;
  /* Kein gegriffener Hoehenwert: die Hoehe ist Inhalt + Polster aus der
     Skala (--pz-nav-halb = 16px, mobil 10px). */
  padding-top: var(--pz-nav-halb);
  padding-bottom: var(--pz-nav-halb);
}
.is-checkout header#jtl-nav-wrapper > .container-fluid > nav.navbar {
  display: contents;
}
.is-checkout header#jtl-nav-wrapper .toggler-logo-wrapper {
  grid-area: auto;
  grid-column: 1;
  justify-self: start;
  align-self: center;
  padding: 0;
}
.is-checkout header#jtl-nav-wrapper .secure-checkout-icon {
  grid-column: 2;
  justify-self: end;
  align-self: center;
  margin: 0;
  /* Vertrauenszeile in der Button-/Kicker-Typo der CI statt im 16px-
     Fliesstext, in dem sie mobil groesser wirkte als die Wortmarke selbst
     (Bens Screenshot 20260820-161924). */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pz-text);
  white-space: nowrap;
}
.is-checkout header#jtl-nav-wrapper .secure-checkout-icon .fa-lock { color: var(--pz-gold); }
/* Die Topbar-Spalte ist seit Lehre N.6 bewusst leer (der Kopf des sicheren
   Checkouts soll keine Verkaufszeile tragen). Als Rasterkind wuerde sie
   trotzdem eine Spalte belegen. */
.is-checkout header#jtl-nav-wrapper .secure-checkout-topbar { display: none; }
/* pz: Logo-Bild (21.08.) — der Checkout-Kopf ist von my-nova_crit.css auf
   68,19px gedeckelt und NOVA setzt hier KEINE Logohoehe, also selbst deckeln. */
.is-checkout .pz-mark img { max-height: 44px; }
@media (min-width: 992px) {
  /* Ab lg ist Platz fuer die Marke in der Mitte — dieselbe Position wie auf
     allen anderen Seiten. Darunter stuenden Marke und Vertrauenszeile bei
     390px sonst zu eng nebeneinander (gemessen: 358px nutzbar, Marke 130 +
     Zeile 120 = eine mittige Marke waere nicht mehr mittig). */
  .is-checkout header#jtl-nav-wrapper > .container-fluid {
    grid-template-columns: 1fr auto 1fr;
  }
  .is-checkout header#jtl-nav-wrapper .toggler-logo-wrapper {
    grid-column: 2;
    justify-self: center;
  }
  .is-checkout header#jtl-nav-wrapper .secure-checkout-icon { grid-column: 3; }
}
@media (max-width: 575.98px) {
  .is-checkout .pz-mark img { max-height: 32px; }
  .is-checkout header#jtl-nav-wrapper .secure-checkout-icon { font-size: 10px; letter-spacing: .1em; }
}
/* pz: Unter 360px dieselbe Logo-Stufe wie der Shopkopf (pz-header.css, 28px),
   weil `.is-checkout .pz-mark img` die dortige Regel per Spezifitaet schlaegt. */
@media (max-width: 359.98px) {
  .is-checkout .pz-mark img { max-height: 28px; }
}

/* ============================================================================
   pz: D3 — STEPPER (Ben 20.08.: "unschoen, komplett BUGGY", Desktop UND
   Mobil).
   IST gemessen 20.08. (1440): Die Leiste misst 48px, der Pfeil-Keil
   zwischen zwei Schritten ist ein Border-Dreieck von 100px Hoehe
   (`border-width: 50px 0 50px 30px`) — er ragt oben und unten je 27px aus
   der Leiste heraus. Dazu eine graue Framework-Kante (#ebebeb) und ein
   Gold-Unterstrich, der ueber ALLE bereits erledigten Schritte lief, also
   in Schritt 3 die volle Breite: der aktuelle Schritt war nicht mehr
   erkennbar.
   SOLL: drei gleich breite Felder, EINE Haarlinie dazwischen, der aktuelle
   Schritt als helle Flaeche mit Gold-Kante — ruhig und edel wie die
   Toolbar der Kategorieseite. */
.checkout-steps.stepper {
  background-color: var(--pz-ivory-2);
  border: 1px solid var(--pz-line);
  border-radius: 0;
  align-items: stretch;
}
/* Der Keil ersatzlos: ein Pfeil, der aus seiner Leiste haengt, ist keine
   Gestaltung. Die Reihenfolge liest sich aus Nummer und Kante. */
.checkout-steps.stepper .step::after,
.checkout-steps.stepper .step::before { content: none; }
.checkout-steps.stepper .step {
  background-color: transparent;
  border: 0;
  /* Gemeinsame Hoehe fuer alle drei Felder aus EINER Quelle
     (Fehlerregister 11) — dieselbe Zeilenhoehe wie die Buttons des
     Kaufpfads, definiert bei den Tokens in pz-base.css. */
  min-height: var(--pz-kaufpfad-btn-h);
  display: flex;
  align-items: center;
  padding: 0;
}
.checkout-steps.stepper .step + .step { border-left: 1px solid var(--pz-line); }
.checkout-steps.stepper .step > a,
.checkout-steps.stepper .step > .step-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--pz-nav-halb);
  text-decoration: none;
}
.checkout-steps.stepper .step .step-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* Aktueller Schritt: helle Flaeche. Der Gold-Unterstrich kommt seit 21.08.
   abends als box-shadow am .step (naechster Block), NOVAs ::after ist aus. */
/* pz: Ben 21.08. ("hier is noch n shift" / "auch der letzte step ist NICHT
   pixelgenau") — NOVAs Strich haengt an `.step-content::after`, und die ist
   bei erledigten Schritten (Link dazwischen) anders verschachtelt als beim
   aktuellen: zwei Bezugsrahmen, 1px Hoehenversatz, Luecke an der Trennlinie,
   Gutter-Ueberhang (-15px). Deshalb NOVAs Pseudo-Element aus und EINE Linie
   am `.step` selbst — ein Element, ein Bezug, alle drei Schritte identisch. */
.checkout-steps.stepper .step .step-content::after { display: none; }
.checkout-steps.stepper .step.step-active,
.checkout-steps.stepper .step.step-current { box-shadow: inset 0 -2px 0 var(--pz-gold); }
.checkout-steps.stepper .step.step-current { background-color: #fff; }
.checkout-steps.stepper .step.step-active { background-color: transparent; }
.checkout-steps.stepper .step.step-active.step-current { background-color: #fff; }
/* Nummernkreise: erledigt/aktuell in Gold, offen als leiser Umriss.
   NOVA rendert `{badge variant=primary|secondary}` — die Bootstrap-Varianten
   werden hier mit hoeherer Spezifitaet ueberschrieben, nicht mit !important. */
.checkout-steps.stepper .step .badge {
  background-color: transparent;
  border: 1px solid var(--pz-ctl-line);
  color: var(--pz-text);
  /* ⚠️ Fixrunde 8b: absoluter Wert statt Bootstraps `font-size: 75%`. Die
     Ziffer hing bisher an der Schriftgroesse des Schritts (12px x 75 % = 9px,
     gemessen) — gesetzt in einer alten Stepper-Fassung am Dateiende, die
     beim Lesen niemand mit dem Nummernkreis in Verbindung gebracht haette.
     Der Wert bleibt EXAKT der bisher gerenderte, nur seine Quelle ist jetzt
     die, an der der Kreis gebaut wird. */
  font-size: 9px;
  letter-spacing: .08em;
  font-weight: 600;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}
.checkout-steps.stepper .step.step-active .badge {
  background-color: var(--pz-gold);
  border-color: var(--pz-gold);
  color: #14110c;
}
.checkout-steps.stepper .step .step-check { color: var(--pz-gold); font-size: 13px; }
.checkout-steps.stepper .step .step-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pz-text);
  min-width: 0; /* Fehlerregister 15 / Lehre I.3 */
}
.checkout-steps.stepper .step.step-current .step-text { color: var(--pz-ink); }

/* ⚠️ MOBIL: die Leiste darf NIE umbrechen (gemessen 20.08. bei 390 nach dem
   ersten Umbau: Schritt 1+2 standen mit je 76px in Zeile 1, daneben 203px
   leer, Schritt 3 allein in Zeile 2 — genau Fehlerregister 3b, und es sah
   aus wie zwei Leisten). NOVA verteilt unterhalb md `col-auto` an die
   erledigten Schritte und die Restbreite an den aktuellen; das traegt nur,
   solange die drei Felder in EINE Zeile passen.
   `nowrap` erzwingt die Zeile, `min-width: 0` erlaubt den Feldern zu
   schrumpfen (Fehlerregister 15 / Lehre I.3 — ohne das bleibt jedes Feld so
   breit wie sein laengstes Wort und der Umbruch kommt zurueck). Die engere
   Sperrung schafft dem laengsten Label ("Zusammenfassung") den Platz, den es
   dafuer braucht. Das horizontale Polster schrumpft automatisch mit
   --pz-nav-halb (16 -> 12 -> 10px). */
@media (max-width: 991.98px) {
  .checkout-steps.stepper { flex-wrap: nowrap; }
  .checkout-steps.stepper .step { min-width: 0; }
  .checkout-steps.stepper .step .step-content { gap: 8px; }
  .checkout-steps.stepper .step .step-text { letter-spacing: .06em; }
}

/* ⚠️ FIXRUNDE 8b / N9 — DIE TABLET-BREITE HAT EINE EIGENE MECHANIK.
   Zwischen md und lg zeigt NOVA ALLE DREI Beschriftungen (unter 768px nur
   die des aktuellen Schritts, `display: none` an den uebrigen — gemessen
   @390) und verteilt die Breite nach Bootstrap-Spaltenklassen: die
   erledigten Schritte tragen `col-auto` (Inhaltsbreite), der aktuelle das
   flexible `col`. Das kehrt die Prioritaet genau um.
   IST gemessen 20.08. @768, Schritt 2 aktiv:
     Schritt 1 "RECHNUNGS- UND LIEFERADRESSE"  322px
     Schritt 2 "VERSAND- UND ZAHLUNGSART"      161px  <- AKTIV, laengster
                                                         Text, DREIZEILIG
                                                         (Textkasten 86x54)
     Schritt 3 "ZUSAMMENFASSUNG"               203px
   Der Schritt, auf dem der Kunde gerade steht, war der schmalste der Leiste.
   Loesung: in diesem Band drei GLEICHE Felder (688 / 3 = 229px). Der
   laengste Text braucht einzeilig 188px + 26 Kreis + 8 Spalt + 24 Polster =
   246px — das passt bei 768px in KEINER gleichmaessigen Aufteilung (3 x 246
   = 738 > 688), einzeilig ist hier also nicht erreichbar. Zweizeilig mit
   gleichen Feldern ist es; die Leiste liest sich als Fortschritt und nicht
   als Zufallsverteilung.
   ⚠️ Bewusst NUR bis 991.98px: darunter (ab 767.98 abwaerts) traegt NOVAs
   Verteilung, weil dort nur EIN Label sichtbar ist und genau der aktuelle
   Schritt den Rest bekommt — gemessen @390: Schritt 2 = 238px, zweizeilig.
   Eine Gleichverteilung waere dort eine Verschlechterung (119px je Feld). */
@media (min-width: 768px) and (max-width: 991.98px) {
  .checkout-steps.stepper .step {
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }
}

/* ============================================================================
   pz: D5 — POSITIONSTABELLE DER ZUSAMMENFASSUNG
   (Ben 20.08.: "richtig beschissen gestyled"; Bestellen-Button steht
   "irgendwo").
   Markup: NOVA `checkout/inc_order_items.tpl` in `.card.card-gray.card-products`.
   IST gemessen 20.08. (1440): Artikeltitel als unterstrichener Standardlink,
   Kopfzeile im Fliesstext, Trennlinien in Bootstrap-Grau, Bild 172px.
   ⚠️ Bewusst NICHT angefasst: die Spaltenbreiten (`col-2/col-4/col-1/…`).
   Kopfzeile und Datenzeile tragen dieselbe Aufteilung — wer nur eine von
   beiden aendert, schiebt "Stueckpreis"/"Anzahl"/"Preis" von ihren Werten
   weg. Geaendert wird die OPTIK, nicht das Raster. */
/* Der Kartenkopf traegt nur den "Aendern"-Link; darunter lagen noch einmal
   48px Leere, bevor die Spaltenbeschriftung kam (gemessen: Kopf endet 143,
   Kopfzeile beginnt 191). Es waren ZWEI Zuschlaege aus my-nova.css, per
   styleSheets-Iteration gefunden statt geraten (Lehre H):
     .card-products .card-body                                padding-top:1rem
     .checkout-confirmation .checkout-confirmation-items
       .card-body                                             margin-top:2rem
   Der Rand bleibt uebrig, wenn man nur das Polster senkt — deshalb beides.
   Spezifitaet: (0,3,0) gegen (0,3,0), pz-checkout.css laedt nach
   my-nova.css und gewinnt damit ohne !important (Fehlerregister 16). */
.card-products .card-body,
.checkout-confirmation .card-products .card-body {
  padding-top: var(--pz-nav-halb);
  margin-top: 0;
}
.card-products .checkout-items-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pz-text);
}
.card-products .checkout-items-header-hr {
  border-top: 1px solid var(--pz-gold);
  opacity: 1;
  margin: 10px 0 0;
}
.card-products .checkout-items-item {
  border-top: 1px solid var(--pz-line);
  padding-top: var(--pz-nav-halb);
  padding-bottom: var(--pz-nav-halb);
}
/* pz: Die erste Position folgt auf die goldene Kopflinie — `:first-of-type`
   griff nie (Kopfzeile und Kopf-hr sind Geschwister), deshalb lag die
   pz-line 1px unter dem Gold (gemessen 21.08.: 1101/1102). Ab lg traegt die
   Kopflinie, darunter (hr ist d-none) die Position selbst. */
@media (min-width: 992px) {
  .card-products .checkout-items-header-hr + .checkout-items-item { border-top: 0; }
}
/* NOVAs hr (AGB-Satz, Summenblock) in Bootstrap-Grau -> dieselbe Linie wie
   alle anderen in der Tabelle. */
#complete_order > hr,
.checkout-items-total hr { border-top-color: var(--pz-line); opacity: 1; }
/* Artikelname in der Kartentypo des Shops — dieselbe Regel wie fuer die
   Warenkorbzeile weiter oben in dieser Datei-Familie (pz-warenkorb.css
   `.cart-items-name`), damit derselbe Artikel auf beiden Stationen gleich
   aussieht. */
.card-products .checkout-items-item-main > p > a {
  font-family: var(--pz-serif);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--pz-ink);
  text-decoration: none;
}
.card-products .checkout-items-item-main > p > a:hover { color: var(--pz-gold); }
.card-products .checkout-items-item-main ul li { color: var(--pz-text); }
/* Bild auf dasselbe Mass wie die Zwischenseite (--pz-kaufpfad-img, definiert
   bei den Tokens in pz-base.css). FEHLERMUSTER #4: festes Mass, die Datenmenge
   entscheidet ueber Umbruch, nicht ueber die Elementgroesse.
   ⚠️ Hier bewusst als DECKEL (max-width), nicht als gesetzte Breite: die
   Bildspalte ist `col-3 col-lg-2` und traegt ab lg 203px — der Deckel greift
   also und macht 160px daraus. Bei 390px ist die Spalte selbst nur 74px
   breit; dort bleibt es dabei, weil ein 110px-Bild dem Artikeltitel 36px
   Lesebreite wegnaehme (gemessen). Auf Mobil ist die Spalte die engere
   Grenze, nicht das Token. */
.card-products .checkout-items-item-image-wrapper img {
  max-width: var(--pz-kaufpfad-img);
  height: auto;
}
.card-products .checkout-items-total-wrapper { border-top: 1px solid var(--pz-line); }
/* pz: FEHLERMUSTER 7 (Ben 21.08.: "hat da jemand gewuerfelt") — NOVA legt
   unter jede Linie von uns noch eine eigene: vor dem AGB-Satz die
   pre-form-hr plus ZWEI hr um den Satz, in jeder Position eine hr-Spalte
   (col-12 > hr) unter unserer border-top der Folgezeile, und der Summenkasten
   bringt einen eigenen Rahmen zum border-top des Wrappers mit. Eine Ebene
   traegt die Linie (unsere), NOVAs Doppel faellt — gleiche Mechanik wie
   cargotrike ct-checkout.css N-5b/N-5d/N-5e, Farben pz. */
.checkout-confirmation-pre-form-hr { display: none; }
#complete_order > hr + hr { display: none; }
.checkout-items-item > .col-12:last-child:has(> hr:only-child) { display: none; }
.card-products .checkout-items-total { border: 0; background: transparent; }
.card-products .checkout-items-total-wrapper .font-weight-bold-util,
.card-products .checkout-items-total-wrapper strong { color: var(--pz-ink); }

/* Bestellen-Button an die Tabellenkante (Ben: "rechtsbuendig zur
   Tabellenkante"). IST gemessen 20.08.: Tabelle 111…1329, Knopf endete bei
   1220 — 109px daneben. Ursache: der Knopf ist seit dem 19.08. `width:auto`
   (damit er nicht ueber die halbe Seite laeuft) und stand deshalb links in
   seiner Spalte, waehrend die Spalte zusaetzlich 15px Polster mitbringt.
   Zusaetzlich bekommt das Paar EINE Breite: 260 gegen 276px waren zwei
   Werte fuer zwei gleichrangige Knoepfe (Fehlerregister 11 in der Breite). */
@media (min-width: 768px) {
  /* ⚠️ NUR text-align — KEIN Eingriff ins Spaltenpolster. Gemessen: die Row
     traegt margin -16px, ihre Spalten padding 16px; Spalteninhalt steht damit
     exakt auf 111…1329, also genau auf den Kanten der Tabelle darueber. Der
     erste Versuch hat das Polster entfernt und die Knoepfe damit um je 16px
     ueber die Tabellenkante hinausgeschoben (gemessen: rechts 1345 statt
     1329, links 95 statt 111) — der Fix war schlimmer als der Befund.
     Fehlerregister 11: nicht auf "keine Ueberlappung" pruefen, sondern auf
     die gemeinsame KANTE.
     ⚠️ FIXRUNDE 8b — WARUM DIE REGEL ALLGEMEIN BLEIBT (Code-Review wollte sie
     auf `#panel-submit-order` einschraenken; einmal so gebaut, GEMESSEN und
     wieder zurueckgenommen):
     Ohne sie steht der Weiter-Knopf am LINKEN Rand seiner rechten Spalte.
     Gemessen 20.08. auf Schritt 2 (1440): Inhaltsspalte 250…1190, "Zurueck"
     250…510 (an der linken Kante), "Weiter" 817…1077 — also 113px Weiss
     rechts vom letzten Bedienelement der Seite. Zwei gleichrangige Knoepfe,
     von denen einer die Kante haelt und der andere in der Luft haengt, ist
     genau Fehlerregister 3b, und Ben hat dieselbe Anordnung im Kaufpfad
     schon zweimal beanstandet.
     Die Regel ist also KEINE unbegruendete Abweichung vom NOVA-Stand,
     sondern das Zurueck-links/Weiter-rechts-Paar, das der Bestellpfad
     braucht — sie gilt deshalb bewusst fuer JEDE `.checkout-button-row`
     (Fehlerregister 17: der Wert ist nicht auf der Zusammenfassung richtig
     und auf den anderen Schritten egal).
     Was der Review zu Recht getroffen hat, ist die BREITE darunter: die
     280px sind ein Wert der Zusammenfassung und bleiben auf
     `#panel-submit-order` gescopet. */
  .checkout-button-row > [class*="col"]:has(> .btn-primary) { text-align: right; }
  /* ⚠️ Der Anker traegt eine ID, und zwar aus Notwendigkeit, nicht aus
     Bequemlichkeit — die Begruendung ist allerdings NICHT "eine ID zieht die
     Komma-Liste hoch" (so stand es hier, und es ist falsch; Korrektur aus dem
     Code-Review, siehe NOVA-LIVE-LEHREN N.10 neue Fassung): CSS gewichtet
     JEDEN Selektor einer Liste EINZELN. Der reale Grund ist, WELCHER
     Teil-Selektor am konkreten Knopf matcht: der Bestellen-Knopf der
     Zusammenfassung liegt in `#form-confirmation` und matcht deshalb den
     ID-Teil `#form-confirmation .btn-primary` (1,1,0) der Liste weiter oben.
     Eine reine Klassenregel (0,2,0) verliert dagegen still — genau so
     gemessen: min-width blieb bei 260px, obwohl die eigene Regel spaeter in
     derselben Datei steht (Fehlerregister 16: nicht raten, den Gewinner am
     Element bestimmen; kein !important).
     `#panel-submit-order` ist eine feste Template-ID aus NOVA, kein
     Datenbankschluessel — sie ist installationsstabil (Lehre I.0). */
  #panel-submit-order .checkout-button-row .btn {
    /* 280px: der laengere der beiden Texte ("ZAHLUNGSPFLICHTIG BESTELLEN")
       misst gemessen 275,7px inkl. Polster — 280 traegt beide, ohne dass einer
       umbricht, und beide sind damit exakt gleich breit. */
    min-width: 280px;
    width: auto;
  }
}

/* ============ Schritt 1: Login-Spalte ============
   Gemessen 19.08. (1440): die Login-Spalte .checkout-existing-customer ist
   417x1110 px, die Login-Karte darin nur ~250px hoch -> 860px leere Flaeche
   neben dem langen Gastformular (Fehlerregister 3b).
   Die Karte traegt bereits eigenen Hintergrund, gestreckt ist die SPALTE.
   Loesung ohne Template-Eingriff: die Karte klebt am oberen Rand mit und
   bleibt waehrend des langen Formulars sichtbar - damit ist die Spalte in
   jeder gescrollten Position besetzt statt leer.
   ⚠️ Fehlerregister 5: KEIN margin-bottom am sticky-Element, sonst deckelt
   es seinen eigenen Klebeweg. */
@media (min-width: 992px) {
  /* ⚠️ Die Spalte MUSS gestreckt bleiben (kein align-self:flex-start) -
     sticky braucht einen hoeheren Container als das klebende Element,
     sonst hat es keinen Klebeweg. Genau daran ist der erste Versuch
     gescheitert (gemessen: top -472 nach 700px Scroll). */
  .checkout-existing-customer > * {
    position: sticky;
    /* Fehlerregister 7: fixe/klebende Elemente ueberdecken Bedienelemente.
       ⚠️ Der sticky-Kopf des sicheren Checkouts MISST nur 68px, rendert
       seine Zeile "Sichere Bezahlung" (.secure-checkout-icon) aber bis
       137px hinunter - sein Kasten ist kleiner als sein sichtbarer
       Fussabdruck. Erst mit 92px stand die Kartenueberschrift IN dieser
       Zeile (19.08. am Screenshot gesehen, nicht an der Zahl). */
    top: 150px;
    margin-bottom: 0;
  }
}

/* ============================================================================
   pz: FIXRUNDE 8b / N4 — "ANMELDEN" UND "PASSWORT VERGESSEN" AUF ZWEI HOEHEN.
   Markup: `#order_register_or_login .customer-login-buttons .form-row` mit
   zwei `col-lg-6` — dieselbe Zeile rendert auch auf der Login-Seite
   (Fehlerregister 13: ein Baustein, mehrere Huellen; die Regel haengt
   deshalb am Baustein, nicht am Bestellvorgang).
   IST gemessen 20.08. (1440, Bestellvorgang Schritt 0): Zeile 347px breit,
   je Haelfte 163px. Der Knopf "ANMELDEN" misst darin 163x39, der Link
   "Passwort vergessen" 163x64 — er passt nicht in eine 163px-Haelfte und
   bricht auf ZWEI Zeilen um. Zwei Elemente einer Zeile, zwei Hoehen
   (Fehlerregister 11) und ein Umbruch, den nur die Spaltenteilung erzwingt
   (Fehlerregister 15: die Haelfte ist schmaler als das laengste Wortpaar).
   Loesung: beide Teile inhaltsbreit auf EINER Zeile, Knopf links, Link
   rechts an der Zeilenkante, Hoehe aus der gemeinsamen Kaufpfad-Quelle. */
/* pz: 21.08. — `nowrap` war zu absolut und hat den Kaufpfad bei 320px
   gesprengt (impeccable-Audit). Gemessen 21.08. auf /Bestellvorgang bei 320:
     .form-row Inhaltsbreite 35…285 = 250px
     Knopf "Anmelden" 122px + Link "Passwort vergessen" 176px = 298px
     -> zweite Spalte 157…333, scrollWidth 333 bei clientWidth 320.
   `nowrap` verbietet dem Browser genau die eine Reaktion, die hier richtig
   ist. Mit `wrap` bleibt das Ziel der Regel unveraendert — auf jeder Breite,
   auf der beide Teile nebeneinander passen (ab ~300px Zeilenbreite, also
   ueberall ausser im 320er-Extremfall), stehen sie weiterhin auf EINER
   Zeile, Knopf links, Link rechts. Nur wenn sie es nicht tun, stapeln sie,
   statt aus der Seite zu laufen (Fehlerregister 15).
   `row-gap` sorgt dafuer, dass der gestapelte Fall nicht klebt; der Wert
   ist die kleinste Stufe der Projektskala, kein freier Pixelwert. */
#order_register_or_login .customer-login-buttons .form-row,
.customer-login .customer-login-buttons .form-row {
  flex-wrap: wrap;
  row-gap: var(--pz-nav-halb);
  align-items: stretch;
}
#order_register_or_login .customer-login-buttons .form-row > [class*="col"],
.customer-login .customer-login-buttons .form-row > [class*="col"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
}
/* Der Link an die rechte Zeilenkante — nicht mit einer festen Breite, damit
   die Zeile bei laengeren Uebersetzungen nicht wieder umbricht. */
#order_register_or_login .customer-login-buttons .form-row > [class*="col"]:last-child,
.customer-login .customer-login-buttons .form-row > [class*="col"]:last-child {
  margin-left: auto;
}
#order_register_or_login .customer-login-buttons .form-row .btn,
.customer-login .customer-login-buttons .form-row .btn {
  min-height: var(--pz-kaufpfad-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ============================================================================
   pz: FIXRUNDE 8b / N10 — "NEUES KUNDENKONTO ERSTELLEN" IN EINER 230px-HUELLE.
   Roh-NOVA-Formularzeile, nie gestaltet (Fehlerregister 25: Seiten ohne
   Mockup laufen im Framework mit).
   IST gemessen 20.08. (1440, Bestellvorgang/Registrierung):
     .row.register-form-account  = 833px
       .col.col-md-4  278px  -> Beschriftung "Neues Kundenkonto erstellen"
                                bricht darin auf ZWEI Zeilen (206x50)
       .col.col-md-8  556px  -> im UNGEHAKTEN Zustand LEER
   Also ein umbrechendes Label neben 556px Nichts (Fehlerregister 3b + 15).
   ⚠️ BEIDE Zustaende gemessen (Fehlerregister 14): angehakt fuellen zwei
   Passwortfelder die 8er-Spalte — die ist also nicht ueberfluessig, sie ist
   nur im Ruhezustand leer. Deshalb kein Zusammenstreichen der Spalte,
   sondern: die Checkbox-Zeile bekommt die volle Formularbreite und die
   Passwortfelder ruecken darunter. Das Label steht damit einzeilig, und im
   ungehakten Zustand gibt es keine halbe leere Zeile mehr. */
.checkout-register-form .row.register-form-account > .col-md-4,
.register-form .row.register-form-account > .col-md-4 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ============ Schritt 2/3: reservierte Leerspalte ============
   NOVA legt den Inhalt in .col-lg-9 und laesst die restlichen 25 % frei -
   gemessen 312px tote Flaeche rechts, ohne dass dort etwas gerendert wird
   (der Row hat nur EIN Kind, per DOM geprueft).
   Statt auf 100 % aufzuziehen (Formularzeilen wuerden auseinanderlaufen)
   auf eine Lesebreite zentriert: der Rest steht dann symmetrisch und liest
   sich als Satzspiegel, nicht als vergessene Spalte. */
@media (min-width: 992px) {
  /* Ueberschrift UND Inhalt auf dieselbe Lesebreite - beide sind
     Geschwister im .container. Nur die Spalte zu zentrieren liess die h1
     16px weiter links stehen (19.08. gemessen: h1 x=111, Inhalt x=250).

     ⚠️ FIXRUNDE 8b / N20 — DER STEPPER GEHOERT DAZU.
     Hier stand "Der Stepper bleibt bewusst vollbreit (er ist die
     Seitennavigation)". Gemessen sah das so aus (1440, Schritt 2):
       Stepper           111 … 1329   (1218px)
       h1 + Inhalt       250 … 1190   ( 940px)
     Also 139px Versatz zwischen der Leiste und dem, wozu sie navigiert —
     zwei Fluchtkanten auf einer Seite. Die Begruendung war eine
     Rationalisierung, kein Entwurf: eine Schrittleiste ist der Kopf ihrer
     Spalte, nicht ein Seitenband.
     ⚠️ Die Bindung an dieselbe `:has()`-Bedingung ist Absicht: auf der
     ZUSAMMENFASSUNG traegt der Container keine `col-lg-9:only-child`, die
     Regel greift dort also gar nicht — Stepper und Positionstabelle bleiben
     dort gemeinsam vollbreit (111…1329). Die Leiste folgt damit auf JEDEM
     Schritt der Kante ihres Inhalts, statt eine eigene zu haben. */
  #content .container:has(> .row > .col-lg-9:only-child) > .checkout-steps,
  #content .container:has(> .row > .col-lg-9:only-child) > h1,
  #content .container:has(> .row > .col-lg-9:only-child) > .row {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
  }
  #content .container:has(> .row > .col-lg-9:only-child) > .row > .col-lg-9 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============ m7: 4. card-header (nur "Aendern") war weiss ============
   NOVA: `.card-products .card-header{background:$white}` (0,2,0) schlaegt
   die Basisregel .card-header (0,1,0) - deshalb hier mit gleichem Anker. */
.card-products .card-header { background-color: var(--pz-ivory-2); }
.card-products .card-header .btn { background-color: transparent; }

/* pz: FIXRUNDE 8b / N20 — "AENDERN" BRAUCHT MOBIL SEIN WORT.
   my-nova.css blendet das Textlabel unter 768px aus
   (`.checkout-confirmation .card .checkout-confirmation-change {display:none}`,
   ab md wieder `inline-block`) — uebrig bleibt ein 14px-Bleistift.
   Gemessen 20.08. @390: der Kartenkopf der Positionstabelle ist ein
   358x48-Band, in dem NICHTS steht ausser diesem Stift bei x=329; die beiden
   Adresskoepfe zeigen ihn ohne Bezug rechts neben der Ueberschrift.
   Ein Icon ohne Wort ist auf einer Bestellseite eine Ratefrage, und ein
   48px-Band mit einem 14px-Glyph ist tote Flaeche (Fehlerregister 3b).
   ⚠️ Spezifitaet exakt gleich (0,3,0) statt !important: pz-checkout.css
   laedt nach my-nova.css und gewinnt damit den Gleichstand
   (Fehlerregister 16). */
.checkout-confirmation .card .checkout-confirmation-change { display: inline-block; }

/* ============ m8: Button-Paar "Zurueck"/"Weiter" ============
   Gemessen: Zurueck 312px, Weiter 391px, dazwischen 235px Loch, unten
   ausserdem 43 gegen 39px Hoehe. Fehlerregister 11: die Hoehe wird EINMAL
   festgelegt. Anordnung wie gebrieft: Zurueck links (ghost), Weiter rechts
   (gold) - aber als Paar mit gleicher Groesse. */
.checkout-shipping-form .btn,
.checkout-payment-form .btn,
#form-confirmation .btn,
.checkout-confirmation .btn {
  /* EINE Hoehe fuer das ganze Paar (Fehlerregister 11) — und zwar aus dem
     Kaufpfad-Token, nicht als Zahl: bis Fixrunde 8b stand hier `48px`
     ausgeschrieben, waehrend Zwischenseite, Dropdown und Stepper laengst
     --pz-kaufpfad-btn-h benutzten. Zwei Schreibweisen desselben Wertes
     laufen beim naechsten Umbau auseinander (Fehlerregister 17). */
  min-height: var(--pz-kaufpfad-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  /* ⚠️ NUR die Aktionsknoepfe - `.btn-link` ("Aendern" in den Kartenkoepfen)
     ist optisch ein Textlink und bekaeme sonst 260px unsichtbare Klickflaeche
     (19.08. gemessen, nachtraeglich ausgenommen). */
  .checkout-shipping-form .btn-primary,
  .checkout-shipping-form .btn-outline-primary,
  .checkout-shipping-form .btn-outline-secondary,
  .checkout-payment-form .btn-primary,
  .checkout-payment-form .btn-outline-primary,
  .checkout-payment-form .btn-outline-secondary,
  #form-confirmation .btn-primary,
  #form-confirmation .btn-outline-primary,
  .checkout-confirmation .btn-primary,
  .checkout-confirmation .btn-outline-primary {
    min-width: 260px;
    width: auto;
  }
  /* Die Spalten selbst nicht mehr strecken - sonst bleibt der Knopf breit */
  .checkout-shipping-form .row > .col,
  .checkout-payment-form .row > .col { align-self: center; }
  /* Gemeinsame Oberkante: NOVA haengt dem "Weiter"-Knopf ein
     margin-bottom an (.button-row-mb), wodurch seine Spalte 64 statt 48px
     misst - mit align-self:center sass er dadurch 8px hoeher als "Zurueck"
     (19.08. gemessen). Fehlerregister 11: gemeinsame Kanten pruefen,
     nicht "keine Ueberlappung". */
  .checkout-button-row { align-items: center; }
  .checkout-button-row .btn { margin-bottom: 0; }
}

/* ============ Stepper — ALTE FASSUNG ENTFERNT (Fixrunde 8b, 15c) ============
   Hier standen bis Fixrunde 8b noch drei Regeln aus der ersten Runde
   (`.stepper .step {font-size:12px; letter-spacing:.08em}` plus die
   Flaechenfarbe fuer step-current/step-active). Seit dem D3-Umbau weiter oben
   gibt es denselben Baustein ein zweites Mal unter `.checkout-steps.stepper`
   — zwei Fassungen desselben Fixes im selben Stylesheet, also genau der
   Fehler aus Register 17 ("wer eine liest, haelt die Stelle fuer erklaert").
   Belegt vor dem Loeschen, was von der alten Fassung ueberhaupt noch WIRKTE
   (nicht geraten, im Browser gemessen):
     - Flaechenfarbe: wirkungslos, der D3-Block setzt sie mit hoeherer
       Spezifitaet (0,3,0 gegen 0,2,0) auf denselben Wert.
     - `letter-spacing: .08em`: erbt nur an die Nummernkreise; `.step-text`
       hat seit D3 sein eigenes.
     - `font-size: 12px`: WIRKTE — und zwar an einer Stelle, die man beim
       Lesen nicht vermutet. Bootstraps `.badge` ist `font-size: 75%`, die
       Ziffer im Kreis mass dadurch 9px. Ohne Ersatz waere sie auf 75 % von
       16px (= 12px) gesprungen.
   Die Ziffer bekommt ihre Groesse deshalb jetzt dort, wo der Kreis definiert
   ist — direkt am `.badge` und als absoluter Wert statt als Prozentkette.
   `.stepper` ohne `.checkout-steps` gibt es im Shop nicht (gegen alle
   NOVA-Templates geprueft: einzige Instanz ist checkout/inc_steps.tpl).
   Die Ersatzregel steht im D3-Block oben am `.badge` — nicht hier, sonst
   waeren es wieder zwei Stellen fuer denselben Kreis. */