/* Warenkorb-Drawer, Warenkorbseite und Kasse.
 *
 * Quelle: design/handoff/Warenkorb.dc.html und Kasse.dc.html (<style>-Block).
 * Die Panel-Huelle steht in css/panel.css, Buttons und Karte in
 * css/komponenten.css.
 *
 * Warenkorb.dc.html definiert .cprog, .cbar, .cq, .vin, .csr und Verwandte
 * zweimal: einmal fuer die Seite, spaeter noch einmal fuer den Drawer. Im
 * Browser gewinnt die zweite Fassung ueberall - so sieht die Referenz
 * tatsaechlich aus, und so stehen die Werte auch hier. Was nur die Seite hat
 * (.witem, .wsum, .wx…), bleibt eigen.
 */

/* NOVA polstert #content-wrapper oben mit 64px; die Referenz setzt ihren
   Abstand ueber .bc. data-page 3 = PAGE_WARENKORB, 11 = PAGE_BESTELLVORGANG
   (includes/defines_inc.php). */
body[data-page="3"] #content-wrapper,
body[data-page="11"] #content-wrapper{padding-top:0}
.tw-kasse{background:var(--color-bg)}

/* ================= Seitenkopf ================= */
.bc{font:500 13px/1.4 var(--font-body);color:var(--color-text-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:36px 0 0}
.bc a{color:var(--color-text-muted);text-decoration:none}
.bc a:hover{color:var(--navy-900);text-decoration:underline}
.bc a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
.bc b{color:var(--color-ink);font-weight:600}
.bcs{color:var(--color-border-strong)}
[data-theme="dark"] .bc b{color:var(--color-text-inverse)}
.wtitle{font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.12;text-transform:uppercase;letter-spacing:.02em;color:var(--color-ink);margin:14px 0 2px}
[data-theme="dark"] .wtitle{color:var(--color-text-inverse)}
.wsub{font-family:var(--font-accent);font-size:21px;color:var(--sky-700);margin:0 0 16px}
[data-theme="dark"] .wsub{color:var(--sky-300)}
/* Rueckweg ins Sortiment ueber dem Positionsraster. Traegt .btn .btn-pri,
   liegt also auf --color-cta wie jeder Primaerknopf - keine eigene Farbe.
   Der 26px-Abstand der Subline wandert hierher, damit der Kopf gleich
   hoch bleibt. */
.wweiter{margin:0 0 26px}

/* ================= Raster und Karten ================= */
.wgrid,.kgrid{display:grid;grid-template-columns:1fr 372px;gap:28px;align-items:start;padding-bottom:84px}
.wcard{background:var(--color-surface);border:1px solid var(--hair);border-radius:16px}
[data-theme="dark"] .wcard{border-color:rgba(160,218,254,.14)}
.wsum,.ksum{position:sticky;top:132px;display:flex;flex-direction:column;gap:10px;padding:20px}

/* ================= Positionen ================= */
/* Kompakter seit 04.10.2026 (Ansage Bert): 88px Bild, 16px Spalten- und
   18/20px Innenabstand ergaben je Position rund 125px Hoehe - bei vier
   Positionen passte nichts anderes mehr ins Bild. Die Tippflaechen des
   Steppers bleiben unveraendert, gespart wird nur Luft. */
.witem{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:13px 16px;border-bottom:1px dashed var(--color-border);align-items:start}
.witem:last-child{border-bottom:0}
/* display:block ist hier nicht Zierde, sondern die Voraussetzung: .wimg ist
   ein <span>, und an einem Inline-Element wirken width und height nicht. Die
   Kachel war deshalb 0x0 gross - das Bild war gesetzt und wurde geladen, nur
   nirgends dargestellt. Gemessen im Browser, gefunden am 07.09.2026. */
.wimg{display:block;flex-shrink:0;width:72px;height:72px;border-radius:12px;background-color:var(--product-stage);background-size:cover;background-position:center;background-repeat:no-repeat}
[data-theme="dark"] .wimg{background-color:rgba(160,218,254,.08)}
/* Positionen ohne eigenes Bild - Kupon, Gutschein, Neukundenkupon - zeigen
   ein Zeichen aus dem Sprite. Ohne das blieb die Kachel leer und die Zeile
   sah aus, als fehle ein Bild. Grid statt block ist hier ungefaehrlich:
   beides ist block-level, width/height wirken weiter (siehe Kommentar oben). */
.wimg.noimg,.cimg.noimg,.ksimg.noimg{display:grid;place-items:center;color:var(--color-text-muted)}
.wimg.noimg svg{width:34px;height:34px}
.cimg.noimg svg{width:24px;height:24px}
.ksimg.noimg svg{width:19px;height:19px}
.winf{min-width:0;display:flex;flex-direction:column;gap:1px}
.winf b{font:700 15px/1.3 var(--font-body)}
.winf a{color:inherit;text-decoration:none}
.winf a:hover{color:var(--color-link)}
.winf em{font:400 12.5px/1.4 var(--font-body);font-style:normal;color:var(--color-text-muted)}
.wbase{font:500 11.5px/1.4 var(--font-body);color:var(--color-text-muted)}
/* Betraege brechen nie um, wie bei .kspr. */
.wpr{font:800 16px/1 var(--font-body);font-feature-settings:'tnum';white-space:nowrap;justify-self:end;padding-top:4px}

/* Mengenwahl und Entfernen - Werte der Drawer-Fassung, siehe Kopf. */
.crowb{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
/* Auf schmalen Schirmen nur das Symbol: Stepper und "Entfernen" passten
   nebeneinander nicht mehr in die Textspalte und rutschten auf zwei Zeilen -
   das waren je Position rund 45px Luft, bei vier Positionen fast ein halber
   Schirm (gemessen 04.10.2026: Zeilen 195px mobil gegen 130px am Desktop).
   Das Wort wird nur optisch ausgeblendet, nicht entfernt (clip-path statt
   display:none): Es IST der zugaengliche Name des Knopfs - der traegt kein
   aria-label. Mit display:none hiesse der Knopf fuer einen Screenreader
   nichts mehr. Die Tippflaeche bleibt unveraendert. */
.cq{display:inline-flex;align-items:center;border:1.5px solid var(--color-border);border-radius:var(--radius-pill)}
/* Mengenknoepfe und Entfernen auf eine treffbare Groesse (Audit 04.10.2026:
   27x27 bzw. 87x28 - unter jeder Empfehlung, und am Zeiger wie am Finger
   gleichermassen fummelig). Die Pillenform und die Zeilenhoehe bleiben, es
   waechst nur die Flaeche. */
.cqb{width:36px;height:36px;border:0;background:transparent;font:700 14px/1 var(--font-body);color:var(--navy-800);cursor:pointer;border-radius:var(--radius-pill)}
.cqb:hover{background:var(--sky-50)}
.cqb:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Grenze erreicht: der Knopf nimmt nichts mehr an und sagt es auch.
   Ohne das Abschalten des Zeigers wirkt er weiter klickbar - genau die
   stumme Sackgasse, die hier weg soll (Ansage Bert 09.09.2026). */
.cqb:disabled{opacity:.35;cursor:not-allowed}
.cqb:disabled:hover{background:transparent}
/* Hinweis zur Mengenwahl. flex-basis 100% laesst ihn in einer flex-Zeile
   (.crowb, .qtyrow) auf eine eigene Zeile rutschen, statt den Stepper zu
   quetschen; ausserhalb eines Flex-Containers ist er ohnehin ein eigener
   Absatz.

   `min-height` ist der Kern der Sache: Der Platz steht IMMER, auch solange
   der Absatz leer ist. Bis zum 10.09.2026 wurde das Element erst beim
   Erscheinen des Textes per JS eingefuegt - und genau in diesem Moment
   wuchs die Zeile. Im Drawer brach der Entfernen-Knopf dadurch um
   (gemessen: top 64/left 190 -> top 131/left 92, Positionshoehe 110 ->
   176 px), in der Produktkarte rutschte die Kaufzeile 23 px nach oben.
   Ein reservierter Platz kostet eine Zeilenhoehe und kann dafuer nicht
   springen.

   Gerendert wird er nur, wo das Mengenfeld ueberhaupt ein `max` traegt -
   Positionen ohne Bestandsgrenze behalten ihr Layout unveraendert. */
.qhint{display:block;flex:0 0 100%;margin:6px 0 0;min-height:calc(var(--text-caption) * 1.35);font-size:var(--text-caption);line-height:1.35;color:var(--color-text-muted)}
[data-theme="dark"] .cqb{color:var(--navy-100)}
[data-theme="dark"] .cqb:hover{background:rgba(160,218,254,.1)}
.cqv{width:34px;text-align:center;font:700 13px/1 var(--font-body);border:0;background:none;color:inherit;-moz-appearance:textfield}
.cqv::-webkit-outer-spin-button,.cqv::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cqv:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
/* Waehrend js/tw-cart.js eine Mengenaenderung im Warenkorb per fetch
   abschickt (Ansage Bert 08.09.2026: sofort statt erst nach "Mengen
   uebernehmen") - reine Deckkraft, keine feste Farbe, funktioniert in
   beiden Farbschemata gleich. */
.cq[aria-busy="true"]{opacity:.5;pointer-events:none}
.crem{border:0;background:transparent;color:var(--color-text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;font:500 11.5px/1 var(--font-body);padding:7px 9px;border-radius:var(--radius-pill)}
.crem:hover{color:var(--color-error);background:var(--color-error-surface)}
.crem:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (max-width:560px){
  .crem .cremt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* KEIN flex-wrap:nowrap hier. Es stand am 04.10.2026 kurz drin, um Stepper
     und Entfernen auf eine Zeile zu zwingen - und hat den Drawer waagerecht
     ueberlaufen lassen: .qhint (der reservierte Platz fuer den Mengenhinweis)
     ist ein Flex-Kind mit flex-basis:100%. Darf die Zeile nicht umbrechen,
     fordert es diese 100% NEBEN dem Stepper, und die Zeile wird 103px breiter
     als der Drawer. Mit umbrechender Zeile bekommt .qhint seine eigene Zeile,
     wie gedacht - und Stepper plus Symbolknopf passen ohnehin nebeneinander,
     seit das Wort "Entfernen" hier wegfaellt. */
  /* Ohne das Wort schrumpft der Knopf auf 32x28 - zu klein zum Treffen
     (Apple HIG: 44x44). Die Flaeche waechst ueber Polster, der negative
     Aussenabstand haelt die Zeile optisch da, wo sie war: der Knopf wirkt
     klein und ist es als Ziel nicht. */
  .crem{min-width:44px;min-height:44px;padding:0 6px;margin:-8px 0;
        display:inline-flex;align-items:center;justify-content:center}
}

/* ================= Fortschritt zur Versandschwelle ================= */
/* 14/24/30 ergaben 119px fuer eine Fortschrittsleiste - auf einem 375er
   Telefon knapp so viel wie eine ganze Warenkorbposition (gemessen
   04.10.2026: Scrollbereich 415px, davon Leiste 119px, Positionen 136px).
   Die 30px unten standen fuer die Beschriftung unter den Markern; die
   braucht ihren Platz, aber nicht so viel. */
.cprog{padding:10px 16px 14px;background:var(--sky-50);border-radius:12px}
[data-theme="dark"] .cprog{background:#111c35}
.cptxt{font:600 13px/1.4 var(--font-body)}
.cbarw{position:relative;margin:10px 4px 8px}
.cbar{height:10px;border-radius:var(--radius-pill);background:rgba(17,28,53,.08);box-sizing:border-box}
[data-theme="dark"] .cbar{background:rgba(160,218,254,.14)}
.cbarf{height:100%;border-radius:var(--radius-pill);background:var(--color-success);transition:width .4s ease}
.cmk{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:var(--radius-pill);background:var(--color-surface);border:1.5px solid var(--color-border-strong);display:grid;place-items:center;color:var(--color-text-muted);box-sizing:border-box;transition:all .3s ease}
.cmk svg{width:12px;height:12px}
.cmk.hit{background:var(--color-success);border-color:var(--color-success);color:#fff}
.cmks{display:grid;font:500 10.5px/1.35 var(--font-body);color:var(--color-text-muted);text-align:right;gap:6px}
/* Zweispaltige Beschriftung, wenn die Leiste zwei Schwellen traegt
   (Mindestbestellwert und versandkostenfrei). Die linke Spalte endet am
   ersten Marker, deshalb richtet sie rechts aus - sonst stuende der Text
   neben statt unter dem Punkt. */
/* Zwei Schwellen: die Beschriftungen haengen an ihren Markern, nicht an
   Rasterspalten. Die linke waere sonst schmaler als ihr eigener Text. */
.cmks2{position:relative;display:block;height:2.6em;margin:0 6px}
.cmks2 .cmkl{position:absolute;left:0;white-space:nowrap}
.cmks2 .cmkr{position:absolute;right:0;white-space:nowrap}
/* Beide Beschriftungen an die Aussenkanten statt mittig unter ihre Marker:
   die Leiste steht in der schmalen Summenspalte, und dort stossen zwei
   mittig gesetzte Labels aneinander. Ein Media Query half nicht - er misst
   den Viewport, eng ist aber die Spalte. */
@media (max-width:420px){.cmks{font-size:9.5px}}
@media (prefers-reduced-motion:reduce){.cbarf,.cmk{transition:none}}

/* ================= Gutschein und Summen ================= */
.cvch{display:flex;gap:8px}
/* Polster statt Schriftgroesse: Auf Beruehrungsgeraeten erzwingt touch.css
   16px, und das ist kein Geschmackswert - unter 16px zoomt Safari beim
   Antippen die ganze Seite heran. Kleiner wird das Feld deshalb ueber das
   Polster, nicht ueber die Schrift. */
.vin{flex:1;min-width:0;font:600 12.5px/1.4 var(--font-body);padding:9px 13px;border-radius:var(--radius-pill);border:1.5px dashed var(--color-border-strong);background:var(--color-surface);color:var(--color-ink);box-sizing:border-box}
.vin::placeholder{color:#8b99ad;font-weight:400}
.vin:focus{outline:none;border-style:solid;border-color:var(--sky-600);box-shadow:var(--focus-ring)}
[data-theme="dark"] .vin{color:var(--color-text-inverse)}
/* min-height, nicht nur Polster: Mit padding:9px allein kam der Knopf auf
   31px und lag damit unter jeder Tippflaechen-Empfehlung - beim
   Straffen am 04.10.2026 selbst hineingebaut und vom eigenen Audit
   gefunden. Die Hoehe ist jetzt gesetzt, das Polster darf klein sein. */
.tw .vbtn{padding:9px 16px;min-height:36px;font-size:13px}
.vok{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 12.5px/1.4 var(--font-body);color:var(--color-success);background:var(--color-success-surface);border-radius:10px;padding:9px 12px}
.vok span{display:inline-flex;align-items:center;gap:6px}
.vokx{border:0;background:transparent;cursor:pointer;color:inherit;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);flex-shrink:0}
/* Der Knopf entfernt den Gutschein, gab aber beim Ueberfahren keinerlei
   Rueckmeldung - gemessen am 08.09.2026, Ruhe- und Hover-Zustand waren
   identisch. Rot wie .crem an der Warenkorbposition daneben: in dieser Karte
   heisst Rot beim Ueberfahren "das hier loescht etwas". */
.vokx:hover,.vokx:focus-visible{color:var(--color-error)}
.vokx:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.verr{font:600 12px/1.4 var(--font-body);color:var(--color-error)}
.csr{display:flex;justify-content:space-between;gap:12px;font:500 13.5px/1.4 var(--font-body);font-feature-settings:'tnum'}
.csr.dis{color:var(--color-success);font-weight:700}
.ctot{display:flex;justify-content:space-between;gap:12px;font:800 17px/1 var(--font-body);font-feature-settings:'tnum';padding-top:9px;border-top:1px solid var(--hair)}
/* "zzgl. Versand" hinter der Summe, solange die Versandart nicht gewaehlt ist
   (Befund 06, 15.09.2026): gleiche Zeile, aber leichter als der Betrag - die
   Zahl bleibt der Anker. */
.ctotadd{font:400 12.5px/1 var(--font-body);color:var(--color-text-muted);letter-spacing:.01em;white-space:nowrap}
.csub{font:400 12px/1.5 var(--font-body);color:var(--color-text-muted)}
.wtrust{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.t3i{display:inline-flex;gap:7px;align-items:center;font:600 11.5px/1.3 var(--font-body);color:var(--navy-700)}
[data-theme="dark"] .t3i{color:var(--sky-200)}
.t3i svg{width:14px;height:14px;flex:none}

/* ================= Drawer-Innenleben ================= */
/* Der ganze Drawer scrollt, die Positionsliste nicht fuer sich - ueberall,
   ohne Medienabfrage (Ansage Bert 04.10.2026, erst mobil, dann auch Desktop).

   Vorgeschichte, damit niemand den Innenscroll zurueckbaut: Die Liste hatte
   `flex:1;overflow-y:auto`, Kopf, Versandleiste und Fuss (Gutschein, Summen,
   Knoepfe) blieben stehen. Die brauchen zusammen rund 575px und schrumpfen
   nicht - auf einem iPhone mit eingeblendeter Browserleiste (664px) blieben
   der Liste 89px, eine angeschnittene Position (gemessen 25.09.2026 bei
   390x664). Dagegen stand eine Ausnahme fuer niedrige Schirme. Seit die
   Vorschlagsliste im Fuss steht, ist er noch hoeher, und der Fehler kam auf
   hohen Telefonen zurueck: der eben gekaufte Artikel war nicht mehr zu sehen
   (gemeldet 04.10.2026).

   Zwei Scrollbereiche uebereinander sind ausserdem die unangenehmere Geste -
   man trifft beim Wischen mal den einen, mal den anderen.

   overscroll-behavior:contain bleibt: ohne sie reicht die Wischgeste am Ende
   an die Seite dahinter durch (iOS, gemeldet 08.09.2026).
   -webkit-overflow-scrolling gibt aelteren iOS-Fassungen den Impuls-Lauf
   innerhalb des Panels statt am Dokument. */
/* Ein Scrollbereich fuer den Inhalt, eine feste Leiste fuer die Tat.

   .citems hat KEINEN eigenen Scroll mehr (frueher flex:1;overflow-y:auto):
   Die Liste in einem ohnehin schmalen Panel noch einmal in einen eigenen
   Kasten zu sperren liess bei vier Positionen anderthalb Zeilen uebrig, mit
   eigener Bildlaufleiste mitten im Drawer. Jetzt scrollt alles Lesbare
   zusammen - Positionen, Gutschein, Zwischensummen, Vorschlaege.

   min-height:0 ist nicht kosmetisch: Ein Flex-Kind weigert sich sonst, unter
   seine Inhaltshoehe zu schrumpfen, und der Scroll landet wieder am Panel
   statt im Bereich. */
.cscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
         -webkit-overflow-scrolling:touch}
.citems{flex:none;overflow:visible}
.cdetail{padding:10px 16px 4px;display:flex;flex-direction:column;gap:8px;
         border-top:1px solid var(--hair)}

/* Die feste Leiste. Der Schatten nach oben sagt, dass darueber weitergeht -
   ohne ihn sieht die Leiste aus wie das Ende des Drawers, und genau das war
   die Rueckmeldung ("man weiss nicht, dass man scrollen muss").
   padding-bottom mit safe-area: auf dem iPhone liegt sonst die Home-Leiste
   auf dem Kassenknopf. */
.cfoot{flex:none;margin-top:0;position:relative;z-index:1;
       background:var(--color-surface);
       padding:12px 18px calc(14px + env(safe-area-inset-bottom));
       border-top:1px solid var(--color-border);
       box-shadow:0 -10px 20px -14px rgba(17,28,53,.35);
       display:flex;flex-direction:column;gap:8px}

/* Alle drei Knoepfe gleich hoch und gleich breit (Ansage Bert 04.10.2026).
   Gemessen waren es 50px ("Zur Kasse", durch das Pfeilsymbol), 47px
   ("Warenkorb") und daneben PayPal mit 43px in einer 323px breiten Spalte -
   drei Groessen untereinander, die wie drei verschiedene Wertigkeiten
   aussahen. Die Hoehe kommt jetzt aus der Zeile, nicht aus dem Inhalt. */
.cfoot .btn{height:48px;min-height:48px;padding:0 20px}

/* PayPal-Express: Das Plugin haengt seinen Knopf in Bootstrap-Raster
   (mt-3, row mit negativen Aussenabstaenden, col-sm-6). In unserer
   Flex-Spalte ergab das einen zusaetzlichen Abstand ueber dem eigenen gap
   und einen Knopf, der schmaler war als die beiden darueber. Die
   !important sind noetig, weil Bootstraps Hilfsklassen selbst welche
   tragen - ohne sie bleibt mt-3 stehen.
   Angefasst wird nur die Huelle; der Knopf selbst gehoert PayPal. */
.cfoot > .mt-3{margin-top:0 !important;padding:0 !important}
.cfoot .row{margin-left:0 !important;margin-right:0 !important}
.cfoot [class*="ppc-"]{padding-left:0 !important;padding-right:0 !important}
.cfoot [class^="col-"],.cfoot [class*=" col-"]{flex:0 0 100%;max-width:100%;
       padding-left:0 !important;padding-right:0 !important}
.cfoot .paypal-buttons{width:100% !important}

/* Weisser Kasten um den PayPal-Knopf im Dunkelmodus (gemeldet Bert
   05.10.2026, Chrome und Safari, dev wie live, dauerhaft).

   Es ist nichts von uns: Jedes Element der Kette - .cfoot,
   #paypal-button-*-container, .paypal-buttons, das Iframe selbst - hat
   nachgemessen background:transparent. Den Kasten malt der BROWSER.

   Nach CSS Color Adjust bekommt ein Iframe, dessen Farbschema vom
   einbettenden Dokument abweicht, eine OPAKE Flaeche statt einer
   durchsichtigen - damit fremder Inhalt nicht unlesbar auf fremdem Grund
   steht. Seit tokens.css im Dunkelmodus `color-scheme:dark` auf der Wurzel
   setzt, weicht PayPals helles Iframe genau so ab, und die Flaeche ist
   weiss. Deshalb sehen beide Engines dasselbe und deshalb ist es dauerhaft.

   Dem Iframe wieder ein helles Schema zu geben beseitigt die Abweichung.
   An PayPals Knopf aendert das nichts - er war immer hell. Wer einen
   weiteren fremden Bezahl-Rahmen einbaut (Mollie-Komponenten, Klarna),
   bekommt denselben Kasten und braucht dieselbe Zeile.

   Nachtrag 05.10.2026: Von Bert im Browser gegengesehen - der Kasten ist weg.
   Hergeleitet war die Ursache aus der Spezifikation, nachweisen liess sie sich
   headless nicht: Die Regel greift erst im echten Compositing, im Screenshot
   des Prueflaufs war nie ein weisser Kasten zu sehen. */
[data-theme="dark"] :is([id^="paypal-button-"],.paypal-buttons) iframe{color-scheme:light}
[data-theme="dark"] .cfoot{box-shadow:0 -10px 24px -14px rgba(0,0,0,.6)}
/* Die Summenzeile sitzt jetzt in der Leiste und braucht die Trennlinie des
   Scrollbereichs nicht mehr. */
.cfoot .ctot{border-top:0;padding-top:0}
.citem{display:grid;grid-template-columns:56px 1fr auto;gap:10px;padding:11px 16px;border-bottom:1px solid var(--hair);align-items:start}
/* Bildbuehnen der Warenkorb-/Kassen-Thumbs ebenfalls auf --product-stage:
   sie zeigen dieselben gebackenen Packshots wie Galerie und Karten. */
.cimg{width:56px;height:56px;border-radius:10px;background-color:var(--product-stage);background-size:cover;background-position:center;background-repeat:no-repeat}
.cinf{min-width:0}
.cinf b{font:700 13.5px/1.3 var(--font-body);display:block}
.cinf a{color:inherit;text-decoration:none}
.cinf em{font:400 12px/1.4 var(--font-body);font-style:normal;color:var(--color-text-muted)}
.cpr{font:800 14px/1 var(--font-body);font-feature-settings:'tnum';white-space:nowrap;justify-self:end;padding-top:3px}
.cempty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:56px 20px;text-align:center;color:var(--color-text-muted);font:400 14.5px/1.6 var(--font-body)}

/* ================= Cross-Sell im Warenkorb ================= */
.wx{margin-top:26px}
.wxh{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.15;text-transform:uppercase;letter-spacing:.025em;color:var(--color-text-muted);margin:0 0 12px}
.wxg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wxc{display:flex;gap:12px;align-items:center;background:var(--color-surface);border:1px solid var(--hair);border-radius:12px;padding:12px 14px}
.wxc .wimg{width:52px;height:52px;border-radius:9px}
.wxc b{display:block;font:700 13px/1.3 var(--font-body)}
.wxc a{color:inherit;text-decoration:none}
.wxc em{font:400 11.5px/1.4 var(--font-body);font-style:normal;color:var(--color-text-muted)}
[data-theme="dark"] .wxc{border-color:rgba(160,218,254,.14)}

/* ================= Kasse: Schritte ================= */
.steps{display:flex;gap:0;align-items:center;margin-bottom:28px;flex-wrap:wrap}
.stp{display:inline-flex;align-items:center;gap:9px;font:600 13px/1 var(--font-body);color:var(--color-text-muted);background:transparent;border:0;padding:8px 10px;border-radius:var(--radius-pill);text-decoration:none}
.stp:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.stpn{width:28px;height:28px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border-strong);display:grid;place-items:center;font:700 12.5px/1 var(--font-body);box-sizing:border-box;flex:none}
.stpn svg{width:14px;height:14px}
.stp.on{color:var(--color-ink)}
.stp.on .stpn{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
[data-theme="dark"] .stp.on{color:var(--color-text-inverse)}
[data-theme="dark"] .stp.on .stpn{background:var(--sky-300);border-color:var(--sky-300);color:var(--navy-900)}
.stp.done{color:var(--color-success)}
.stp.done .stpn{background:var(--color-success);border-color:var(--color-success);color:#fff}
.stpline{width:34px;height:1.5px;background:var(--color-border-strong);flex-shrink:0}

/* ================= Kasse: Panel und Formulare =================
 * NOVA rendert die Kassenformulare selbst - dort haengen Pflichtfeld-Pruefung,
 * Fehlertexte und die Zahlungsmodule dran. Umgebaut wird deshalb nur die
 * Optik: die Regeln greifen zusaetzlich auf NOVAs .form-control, .custom-select
 * und .form-group.
 */
.kpanel{padding:24px}
.kpanel h2{font:800 18px/1.3 var(--font-body);margin:0 0 16px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.flabel,.kpanel label{font:600 13px/1.3 var(--font-body)}
.req{color:var(--color-error)}
.finput,
.kpanel .form-control,
.kpanel .custom-select{font:400 14.5px/1.4 var(--font-body);min-height:44px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-ink);box-sizing:border-box;width:100%;appearance:none;height:auto}
.finput:hover,.kpanel .form-control:hover,.kpanel .custom-select:hover{border-color:var(--navy-400)}
.finput:focus,.kpanel .form-control:focus,.kpanel .custom-select:focus{outline:none;border-color:var(--sky-600);box-shadow:var(--focus-ring)}
.finput::placeholder,.kpanel .form-control::placeholder{color:#8b99ad}
[data-theme="dark"] .finput::placeholder,[data-theme="dark"] .kpanel .form-control::placeholder{color:#7f93b3}
.kpanel .invalid-feedback,.kpanel .form-error-msg,.kpanel .is-invalid ~ .invalid-feedback{color:var(--color-error);font:600 12.5px/1.5 var(--font-body)}
.kpanel .form-control.is-invalid,.kpanel .custom-select.is-invalid{border-color:var(--color-error)}
.fsel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23131f3a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:34px}

/* ---- NOVAs Spaltenraster im Panel ----
 *
 * NOVA komponiert die Kassenformulare fuer einen Container ueber die volle
 * Seitenbreite. Bei uns steht dasselbe Markup im 740px-Panel neben der
 * Bestellzusammenfassung, und NOVA schachtelt darin bis zu drei Spaltenebenen.
 * Gemessen bei 1440px im alten Stand: Kundenspalte 481px, davon 160px fuer die
 * Abschnittsueberschrift und 321px fuer die Felder, ein Vorname-Feld 149px,
 * die Hausnummer 100px. Daher alle drei gemeldeten Fehler auf einmal.
 *
 * Aufgeraeumt wird das Raster, nicht das Markup: Die Formulare bleiben NOVAs,
 * an ihnen haengen Pflichtfeldpruefung, Fehlertexte und die Zahlungsmodule.
 */

/* Ohne min-width:0 wachsen Flex-Spalten nie unter ihren laengsten Inhalt und
   schieben stattdessen die Nachbarspalte zusammen. */
.kpanel .row > [class*="col-"]{min-width:0}

/* Abschnittsueberschrift ueber die Felder statt daneben. Das ist die
   Anordnung der Referenz (Kasse.dc.html: .field mit Beschriftung oben) und
   gibt den Feldern die vollen 692px des Panels statt 321px. */
.kpanel .row > [class*="col-md-4"]:has(> .h3:only-child),
.kpanel .row > [class*="col-md-4"]:has(> .h3:only-child) + [class*="col-md-8"]{flex:0 0 100%;max-width:100%}
.kpanel .row > [class*="col-"] > .h3{font:800 15px/1.3 var(--font-body);color:var(--color-ink);margin:0 0 4px}

/* Die Lieferdauer neben der Versandart traegt NOVAs .text-info - ein Blauton,
   der fuer helle Flaechen gedacht ist und im Dunkelmodus fast verschwindet.
   Sie ist Beiwerk neben Name und Preis, also die gedaempfte Textfarbe. */
.kpanel .desc.text-info{color:var(--color-text-muted)}

/* Versandarten und Zahlarten ueber die volle Panelbreite.
   NOVA legt das Formular in eine col-lg-9 mit max-width:75%. In NOVAs eigenem
   einspaltigem Layout bleibt daneben genug uebrig; unser Panel ist wegen der
   Bestelluebersicht rechts ohnehin nur 740px breit, und davon standen die
   Versandart-Zeilen auf 510px - ein Viertel der Flaeche blieb leer, waehrend
   Name, Lieferdauer und Preis sich auf 206/124/165px draengten. */
.kpanel .row > [class*="col-lg-9"]{flex:0 0 100%;max-width:100%}

/* Karten der Zusammenfassung und die Adressspalten darin: umbrechen, sobald
   weniger als 280px bleiben. Gemessen: die Adressspalten standen auf 160px,
   dort brach "Rechnungsadresse" mitten im Wort. */
.kpanel .row > [class*="col-md-6"]{flex:1 1 280px;max-width:100%}

/* Ueberschriften im Panel auf ein Mass. NOVA setzt hier ein zweites <h1>
   ("Als Neukunde fortfahren") in Bootstrap-Groesse. */
.kpanel h1,.kpanel h2,.kpanel .h1,.kpanel .h2,.kpanel .card-title{font:800 18px/1.3 var(--font-body);color:var(--color-ink);margin:0 0 14px}

/* Beschriftung ueber das Feld statt hinein.
 *
 * NOVAs Slide-Label liegt absolut im Feld und traegt
 * text-overflow:ellipsis - bei 100px Feldbreite wurde daraus "Haus…" und
 * "Titel - option…". Statisch gestellt sitzt es ohne weiteres Zutun an der
 * richtigen Stelle: NOVAs Markup ist .d-flex.flex-column-reverse mit dem Feld
 * zuerst und der Beschriftung danach, in der Anzeige also Beschriftung oben.
 * Die zweite Regel wiederholt NOVAs Selektor fuer das leere Feld - sonst
 * gewinnt dessen groessere Schrift ueber unsere. */
.kpanel .label-slide .form-group:not(.checkbox) > .d-flex{gap:6px}
.kpanel .label-slide .form-group:not(.checkbox) label,
.kpanel .label-slide .form-group:not(.checkbox) .form-control:placeholder-shown:not(:focus) ~ label{position:static;transform:none;background:none;padding:0;max-width:none;white-space:normal;overflow:visible;font:600 13px/1.3 var(--font-body);color:var(--color-ink)}

/* Knopfbeschriftungen.
 *
 * Unsere Pillenknoepfe tragen 27px Seitenpolster (css/komponenten.css). In
 * NOVAs Kassenraster sitzen sie in Spalten ab 85px Breite; mit
 * white-space:nowrap und overflow:hidden wurde die Beschriftung abgeschnitten
 * - gemessen brauchte "Anmelden" 102px in einem 75px breiten Knopf,
 * "Kundendaten abschicken" 184px in 128px. Im Panel deshalb schmaleres
 * Polster, umbrechende Beschriftung und Mindesthoehe statt fester Zeile. */
.kpanel .btn{padding:13px 20px;white-space:normal;overflow:visible;min-height:46px;text-align:center}
/* Textknoepfe ("Passwort vergessen", "Ändern") sind Links, keine Pillen -
   mit 20px Seitenpolster brach "Passwort vergessen" zweizeilig um und die
   Ändern-Knoepfe druckten die Kartenueberschrift auf drei Zeilen. */
.kpanel .btn-link{padding:8px 2px;min-height:0;color:var(--color-link)}
.kpanel .btn-link:hover{color:var(--color-link-hover)}
/* Anmelden und "Passwort vergessen" teilen sich sonst die 241px breite
   Kundenspalte zu je 85px. */
.kpanel .customer-login-buttons .form-row > [class*="col-"]{flex:0 0 100%;max-width:100%}
/* Kontoanlage: Kaestchen links, Passwortfelder rechts - in einer 160px-Spalte
   brach schon "Neues Kundenkonto erstellen" dreizeilig um. Untereinander. */
.kpanel .register-form-account > [class*="col-"]{flex:0 0 100%;max-width:100%}
/* Der Absendeknopf steht in einer col-md-5 (160px). Er bekommt die Breite
   seiner Beschriftung und rueckt nach rechts, wie in der Referenz. */
.kpanel .checkout-button-row-submit{flex:0 0 auto;max-width:100%;margin-left:auto;display:flex;justify-content:flex-end}
.kpanel .checkout-button-row-submit .btn{width:auto}

/* ---- Was NOVA fest auf Weiss verdrahtet ----
 * Dieselben Stellen wie auf den Kontoseiten, dort steht die Begruendung
 * ausfuehrlich in css/konto.css: der Geisterinput der Adressvervollstaendigung
 * (PLZ und Ort haengen an typeahead.js), der Grund des Pflichtfeld-Sterns und
 * NOVAs graue Karte. Im dunklen Modus standen davon weisse Kloetze im Panel -
 * die Login-Karte samt Beschriftungen war weiss auf weiss. typeahead.js
 * schreibt background-color als Inline-Stil, dort hilft nur !important. */
.kpanel .tt-input{background-color:var(--color-surface)!important}
.kpanel .tt-hint{background-color:transparent!important;color:var(--color-text-muted)}
.kpanel .twitter-typeahead{width:100%;display:block!important}
.kpanel .tt-menu{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:10px;color:var(--color-ink)}
.kpanel .label-slide .form-group:not(.checkbox) label::after,
.kpanel label::after{background:none;color:var(--color-error)}
[data-theme="dark"] .kpanel :is(.card,.card-gray){background:var(--color-surface-2);border-color:rgba(160,218,254,.14);color:var(--color-ink)}

/* Positionstabelle der Zusammenfassung: die schmalste Spalte ist 58px breit,
   Bootstraps 15px Rinne liess davon 28px fuer "Anzahl" uebrig - die
   Ueberschrift brach senkrecht um. Rinne schmaler, Ueberschriften einzeilig;
   Kopf- und Positionszeilen bekommen dasselbe Polster, damit die Spalten
   untereinander stehen bleiben. */
/* Hinweis auf den Mindestbestellwert in Schritt 2, wenn keine Versandart
   verfuegbar ist. Bewusst KEIN roter Fehlerkasten: es ist kein Fehler des
   Kunden, sondern eine Bedingung, die er in einem Klick erfuellen kann.
   Rot bleibt Verkaufssemantik und Fehlerfarbe (DESIGN_SYSTEM.md). */
.kmin{border:1.5px solid var(--color-border-strong);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--color-surface)}
.kmintxt{font:800 16px/1.35 var(--font-body);color:var(--color-ink)}
.kminsub{font:400 13.5px/1.5 var(--font-body);color:var(--color-text-muted)}
.kmin .btn{margin-top:6px}

/* Kartentitel der Zusammenfassung: "Rechnungs- und Lieferadresse",
   "Versand- und Zahlungsart", "Kommentar".
 *
 * Gemessen am 07.09.2026 auf Schritt 4: die drei standen auf 16px, Gewicht
 * 400, in Montserrat und in rgb(82,82,82) - waehrend die Sektionsueberschrift
 * "Zusammenfassung" darueber 18px/800 in --font-body und Navy traegt. Die
 * Untertitel wirkten damit groesser und wichtiger als die Ueberschrift, und
 * Montserrat steht ueberhaupt nicht in DESIGN_SYSTEM.md - das ist NOVA-Erbe.
 *
 * Sie tragen NOVAs .h3, deshalb greift die Regel weiter oben nicht: die
 * verlangt einen Elternteil direkt unter .row, hier steht eine .col in einem
 * .card-header. Angeglichen wird an dieselben 15px/800, die die
 * Abschnittsueberschriften der Formularschritte schon haben. */
.kpanel .checkout-confirmation-heading{font:800 15px/1.3 var(--font-body);color:var(--color-ink)}

.kpanel .checkout-items-header{font-size:12px}
.kpanel .checkout-items-header > [class*="col-"]{white-space:nowrap}
.kpanel .checkout-items-header > [class*="col-"],
.kpanel .checkout-items-item > [class*="col-"]{padding-left:6px;padding-right:6px}

.optc{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--color-border-strong);border-radius:12px;padding:16px;cursor:pointer;transition:all var(--transition-fast);background:var(--color-surface)}
.optc:hover{border-color:var(--navy-400)}
.optc.on{border-color:var(--sky-600);box-shadow:0 0 0 1px var(--sky-600)}
.optc + .optc{margin-top:10px}
.optc:focus-within{box-shadow:var(--focus-ring)}
.optr{width:22px;height:22px;border-radius:var(--radius-pill);border:2px solid var(--color-border-strong);box-sizing:border-box;flex-shrink:0;margin-top:1px;display:grid;place-items:center;appearance:none;background:none}
.optc.on .optr,.optr:checked{border-color:var(--sky-600)}
.optr:checked::after{content:"";width:10px;height:10px;border-radius:var(--radius-pill);background:var(--sky-600)}
.optb{flex:1;min-width:0}
.optb b{display:block;font:700 14.5px/1.3 var(--font-body)}
.optb em{font:400 12.5px/1.5 var(--font-body);font-style:normal;color:var(--color-text-muted)}
.optp{font:800 14px/1 var(--font-body);white-space:nowrap;font-feature-settings:'tnum'}
.knote{background:var(--sky-50);border:1px solid var(--sky-200);border-radius:12px;padding:12px 15px;font:400 13px/1.6 var(--font-body);margin-top:16px;display:flex;gap:10px;align-items:flex-start}
.knote svg{flex-shrink:0;margin-top:2px;color:var(--sky-700);width:18px;height:18px}
[data-theme="dark"] .knote{background:rgba(160,218,254,.08);border-color:rgba(160,218,254,.25)}
[data-theme="dark"] .knote svg{color:var(--sky-300)}
.kbtns{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}

.ksitem{display:flex;gap:10px;align-items:center}
.ksimg{width:46px;height:46px;border-radius:8px;background-color:var(--product-stage);background-size:cover;background-position:center;background-repeat:no-repeat;flex-shrink:0}
[data-theme="dark"] .ksimg{background-color:rgba(160,218,254,.08)}
.ksitem b{display:block;font:700 12.5px/1.3 var(--font-body)}
.ksitem em{font:400 11.5px/1.3 var(--font-body);font-style:normal;color:var(--color-text-muted)}
/* flex:0 0 auto und nowrap: In der Flex-Zeile gab der Preis als Erstes nach,
   wenn der Name lang ist - bei "Fullblood Wagyu Markknochen 700 g" rutschte
   das Euro-Zeichen von "13,23 €" auf eine eigene Zeile (gemeldet Bert
   04.10.2026). Jetzt bricht der Name um, der Betrag nie. */
.kspr{margin-left:auto;flex:0 0 auto;white-space:nowrap;font:800 13px/1 var(--font-body);font-feature-settings:'tnum'}
.ksedit{font:600 12px/1 var(--font-body)}

/* ================= Schritt 2: Versandart und Zahlungsart =================
   NOVA legt beides in ein einziges Panel, untereinander, getrennt nur durch
   zwei Zwischenueberschriften - das liest sich als ein Block. Die beiden
   Fieldsets stehen im Markup aber schon als Geschwister nebeneinander
   (#checkout-shipping-payment und #fieldset-payment), also reicht Optik: je
   eine Karte daraus, und die Huelle drumherum wird durchsichtig. Deshalb
   traegt sie in checkout/index.tpl fuer diesen Schritt zusaetzlich .kplain. */
.kpanel.kplain{background:none;border:0;padding:0;box-shadow:none}
.kpanel.kplain form > fieldset{background:var(--color-surface);border:1px solid var(--hair);border-radius:16px;padding:24px;margin:0 0 16px}
.kpanel.kplain form > fieldset > hr{display:none}

/* Die Weiter-Zeile oben. Der untere Knopf bleibt, wo er ist - dieser hier
   erspart nur das Scrollen, wenn die Auswahl ohnehin schon passt. Er ist
   bewusst KEIN type="submit": jtl.evo.js sucht alle Submit-Knoepfe im
   Formular, blendet sie aus und zeigt nur den ersten wieder an (damit
   Zahlungsplugins keinen zweiten Knopf danebenstellen). Ein zweiter Submit
   hier wuerde also den unteren verschwinden lassen. */
.kbtns-top{display:flex;justify-content:flex-end;margin:0 0 16px}
.kbtns-top .btn{min-width:220px}

/* Icon links, Text rechts - fuer Versandarten und Zahlarten gleich.
   .optc/.optr/.optb/.optp stehen schon weiter oben, hier kommt nur die
   Bildkachel dazu. Feste Groesse, weil die Logos von Mollie in ganz
   verschiedenen Seitenverhaeltnissen kommen und die Zeilen sonst springen. */
/* Ohne Kachelgrund (27.09.2026): die Logos bringen ihre eigene Flaeche mit
   (Karte dunkel, Klarna rosa), auf dem grauen Grund standen sie wie in einem
   zu grossen Rahmen. Die feste Box bleibt, damit die Zeilen nicht springen. */
.opti{width:56px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;overflow:hidden}
.opti img{max-width:56px;max-height:38px;width:auto;height:auto;display:block;border-radius:6px}
/* Huelle je Zahlart ohne eigene Box: das PayPal-Plugin baut seine Optionen aus
   diesem Template und erwartet um .checkout-payment-method ein Elternelement
   (es ruft unwrap() auf) - ohne es verschwand PayPal aus der Liste. */
.twzw{display:contents}
/* Dunkel: PayPal-, Google-Pay- und Apple-Pay-Logo sind freigestellt und
   verschwinden auf Navy - nur sie bekommen eine helle Kachel. */
[data-theme="dark"] :is(#za_ppc_paypal,#kPlugin_5_googlepay,#kPlugin_5_applepay) .opti{background:var(--sky-50)}
[data-theme="dark"] :is(#za_ppc_paypal,#kPlugin_5_googlepay,#kPlugin_5_applepay) .opti img{max-width:48px;max-height:30px}

/* Aktiv-Markierung: Haken in CI-Farbe statt des Bootstrap-Punktes.
   NOVAs eigener Zustand war ein goldener Kreis - Gold ist im Design-System
   Akzent auf Navy und nirgends Bedienelement, das sah entsprechend fremd
   aus. Der Haken ist zwei gedrehte Rahmenkanten, damit kein zweites Sprite
   noetig ist; ::after kann kein <use> aufnehmen. */
.optr{border-radius:var(--radius-pill)}
.optr:checked{background:var(--color-cta);border-color:var(--color-cta)}
.optr:checked::after{content:"";width:5px;height:9px;border:solid var(--color-cta-ink);border-width:0 2px 2px 0;border-radius:0;background:none;transform:rotate(45deg) translate(-1px,-1px)}
.optc:has(.optr:checked){border-color:var(--color-cta);box-shadow:0 0 0 1px var(--color-cta)}

/* Die Lieferdauer rechts neben dem Namen, nicht unter ihm: sie gehoert zum
   Preis, nicht zur Beschreibung. */
.optd{font:400 12.5px/1.4 var(--font-body);color:var(--color-text-muted);text-align:right;white-space:nowrap}
.optx{display:flex;flex-direction:column;align-items:flex-end;gap:3px}

/* ================= Responsive ================= */
@media (max-width:1024px){
.wgrid,.kgrid{grid-template-columns:1fr}
.wsum,.ksum{position:static}
/* Schritt 4, einspaltig: die Bestelluebersicht muss VOR den Bestell-Knopf.
   Gemessen am 07.09.2026 bei 390px stand sie darunter - und seit die grosse
   Positionstabelle weg ist, ist sie die einzige Stelle, an der Ware und
   Gesamtsumme vor dem Knopf stehen (Button-Loesung, Paragraph 312j BGB).
   Grid statt Flex, damit die Spaltenregel oben weiter greift. */
.kgrid.klast .ksum{order:-1}
.kgrid.klast{display:grid;grid-auto-flow:row}

/* Der Bestell-Knopf nach oben, direkt unter die Bestelluebersicht
   (Ansage Bert 04.10.2026: "right now you have to go all the way down").

   Gemessen am 04.10.2026 bei 390px: Die Bestelluebersicht endete bei 951px,
   der Knopf sass bei 2177px von 3741px Seitenhoehe - dazwischen lagen die
   drei Pruefkarten mit Adresse, Zahlart und Versand, zusammen rund 1100px.
   Wer bestellen wollte, scrollte an allem vorbei, was er schon entschieden
   hatte.

   Verschoben wird der GANZE Formularblock, nicht nur der Knopf: Darin steckt
   der Rechtshinweis (.checkout-confirmation-legal-notice), und der gehoert an
   den Knopf. Ein zweiter Knopf weiter oben waere die naheliegende Loesung und
   die falsche - er haette die Erklaerung zu AGB und Widerruf hinter sich
   gelassen.

   Die Reihenfolge wird damit: Bestelluebersicht mit Ware und Gesamtsumme ->
   Rechtshinweis + "zahlungspflichtig bestellen" -> "Zusammenfassung" mit
   Adresse, Zahlart und Versand zum Nachsehen. Fuer die Button-Loesung
   (Paragraph 312j BGB) ist das besser als vorher: Ware und Preis stehen jetzt
   UNMITTELBAR ueber dem Knopf statt 1100px darueber.

   Nur einspaltig. Auf dem Desktop steht die Uebersicht ohnehin daneben im
   Blick, und die Pruefkarten unter dem Knopf saehen dort falsch aus. */
.kgrid.klast .checkout-confirmation{display:flex;flex-direction:column}
.kgrid.klast .checkout-confirmation > form{order:-1;margin-bottom:28px}
}
@media (max-width:640px){
.wtitle{font-size:30px}
.fgrid,.wxg{grid-template-columns:1fr}
.witem{grid-template-columns:56px 1fr auto}
.wimg{width:60px;height:60px}
.citem{grid-template-columns:52px 1fr auto}
.kbtns .btn{width:100%}
.kbtns-top .btn{min-width:0}
/* Preis und Lieferdauer unter den Text, statt ihm die Breite zu nehmen:
   auf 390px blieben fuer die Beschreibung sonst 120px und der Hinweistext
   stand als schmale Saeule aus Einzelwoertern da. */
.optc{flex-wrap:wrap}
.optx{flex-direction:row;align-items:baseline;gap:10px;width:100%;order:3;margin-left:36px}
}

/* ================= Meldung im offenen Drawer ================= */
/* js/tw-cart.js haengt die Servermeldung hier ein, solange der Drawer offen
   ist - auf der Seite dahinter waere sie verdeckt. Nur Abstand, das Aussehen
   kommt wie auf der Seite aus der Alert-Klasse. */
#tw-cart-alert{padding:0 20px}
/* Farben nach demselben Muster wie die Konto-Meldungen in css/konto.css:
   Flaeche und Rand aus den Semantik-Tokens, Text aus --color-text. Ohne das
   stand im Dunkelmodus ein hellgelber Kasten im dunklen Drawer - Bootstraps
   Grundfarben kennen nur ein Schema. Bewusst nur hier: die Meldungen auf den
   Seiten bleiben unangetastet. */
#tw-cart-alert .alert{margin-bottom:12px;border-radius:var(--radius-sm);border:1.5px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font:400 14px/1.55 var(--font-body)}
#tw-cart-alert :is(.alert-danger,.alert-error){background:var(--color-error-surface);border-color:var(--color-error)}
#tw-cart-alert .alert-success{background:var(--color-success-surface);border-color:var(--color-success)}
#tw-cart-alert .alert-warning{background:var(--color-warning-surface);border-color:var(--color-warning)}

/* ================= Felder auf dem Geraet ================= */
/* css/touch.css hebt jedes Eingabefeld unter 900px auf 16px, weil iOS sonst
   beim Fokus in die Seite hineinzoomt. Der 34px schmale Stepper und das
   Gutscheinfeld waren dafuer nicht gebaut: die Menge wirkte
   ueberdimensioniert, der Platzhalter wurde abgeschnitten (gemeldet
   08.09.2026). Deshalb hier die Felder passend machen statt die Schrift
   zurueckzudrehen - unter 16px zoomt iOS wieder, und groessere Touch-Ziele
   sind auf dem Geraet ohnehin richtig. */
@media (max-width:900px){
  .cqb{width:36px;height:36px;font-size:16px}
  .cqv{width:42px}
  .cvch{flex-wrap:wrap}
  .cvch .vin,.cvch .vbtn{flex:1 1 100%}
}

/* Schritt 4: NOVA gibt .card-header ein festes Hellgrau (#f5f7fa) in beiden
 * Modi. Im Dunkelmodus stand damit helle Schrift auf hellem Band, die drei
 * Kartentitel waren unsichtbar (gemessen 09.09.2026 mit kassen-konto-check.mjs:
 * rgb(232,242,252) auf rgb(245,247,250)). Band aus dem Token, wie ueberall. */
.kpanel .card-header{background:var(--color-surface-2);border-color:var(--color-border)}

/* Schritt 2: der "Aendern"-Link neben "Versand nach" war ein 15px/700-Knopf
 * mit 8px Hoehenpolster in einer 14px-Zeile (Bert 07.09.2026: "zu gross,
 * nicht smooth"). Jetzt laeuft er in der Zeile mit, Stift eine Stufe kleiner. */
.checkout-shipping-form-change .btn-link{font:600 14px/1.4 var(--font-body);padding:0 2px;min-height:0;vertical-align:baseline}
.checkout-shipping-form-change-icon{font-size:12px}
.kgast strong{font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-caps)}

/* Kasse Schritt 1 (29.09.2026): Express oben, "oder als Gast bestellen" als
 * Trenner, Konto in der schmalen Spalte. Setzt das PayPal-Plugin keinen
 * Knopf, fallen Express-Kasten und Trenner weg - der Gast steht dann oben. */
.kexpress{padding:0 0 4px}
.kexpress h2{margin:0 0 4px}
.kexpress p{margin:0;color:var(--color-text-muted);font-size:var(--text-small)}
.kexpress:not(:has([id^="paypal-button-"])),
.kexpress:not(:has([id^="paypal-button-"])) + .kexor{display:none}
.kexor{display:flex;align-items:center;gap:14px;margin:22px 0 18px;
    font:800 13px/1 var(--font-body);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--color-text)}
.kexor::before,.kexor::after{content:"";flex:1;border-top:1px solid var(--color-border)}
.kkonto .kreg{margin:14px 0 0;font-size:var(--text-small);color:var(--color-text-muted);text-align:center}
.kkonto .kreg a{color:var(--color-link);font-weight:700}
@media (max-width:991.98px){.checkout-existing-customer{margin-top:28px}}

/* Zusammenfassung, unterer Teil (27.09.2026): NOVA setzt vor das Formular
   eine Linie mit 64px Abstand oben und unten, die AGB-Zeile mit 32px und
   darunter zwei weitere Linien. Zusammen ~250px Leerraum zwischen Kommentar
   und Bestell-Knopf - der Knopf rutschte am Laptop aus dem Bild. */
.tw-kasse .checkout-confirmation-pre-form-hr{margin:8px 0 20px}
.tw-kasse #complete_order .checkout-confirmation-legal-notice{margin:0 0 20px}
.tw-kasse #complete_order .checkout-confirmation-legal-notice p{margin:0}
.tw-kasse #complete_order > hr{display:none}

/* Danke-Seite (checkout/order_completed.tpl, 27.09.2026) */
.tw-danke{padding:48px 0 88px}
.tw-danke .dk-kopf{max-width:640px;margin-bottom:28px}
.tw-danke .stitle{font-size:52px;margin:6px 0 14px}
.tw-danke .dk-lead{font:400 17px/1.6 var(--font-body);color:var(--color-text);margin:0}
.tw-danke .dk-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 28px}
.tw-danke .dk-karte{padding:24px 26px}
.tw-danke .dk-karte h2{font:800 17px/1.3 var(--font-body);color:var(--color-text);margin:0 0 16px}
.tw-danke .dk-liste{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font:400 14.5px/1.5 var(--font-body)}
.tw-danke .dk-liste dt{color:var(--color-text-muted);font-weight:400}
.tw-danke .dk-liste dd{margin:0;color:var(--color-text);font-weight:600;font-feature-settings:'tnum'}
.tw-danke .dk-summe{font-weight:800}
.tw-danke .dk-hinweis{margin:18px 0 0;padding:12px 14px;border-radius:10px;background:var(--color-bg-alt);font:400 13.5px/1.55 var(--font-body);color:var(--color-text)}
.tw-danke .dk-schritte{list-style:none;counter-reset:dk;margin:0;padding:0;display:grid;gap:16px}
.tw-danke .dk-schritte li{counter-increment:dk;display:grid;grid-template-columns:32px 1fr;column-gap:14px;font:400 14px/1.5 var(--font-body);color:var(--color-text-muted)}
.tw-danke .dk-schritte li::before{content:counter(dk);grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--color-cta);color:var(--color-cta-ink);font:800 14px/1 var(--font-body)}
.tw-danke .dk-schritte b{color:var(--color-text);font-weight:700}
.tw-danke .dk-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
[data-theme="dark"] .tw-danke .btn-gho{color:var(--sky-300);box-shadow:inset 0 0 0 1.5px rgba(160,218,254,.4)}
@media (max-width:767px){
  .tw-danke{padding:28px 0 56px}
  .tw-danke .stitle{font-size:36px}
  .tw-danke .dk-grid{grid-template-columns:1fr}
  .tw-danke .dk-knoepfe .btn{flex:1 1 100%}
}

/* Wunschtag im Versandschritt (01.10.2026, Umschalter 02.10.2026). Das
   Tageraster steht nur, wenn "Wunschtag" gewaehlt ist; der Hinweis
   "Bitte waehle einen Tag" nur, solange darin keiner gewaehlt ist. */
.wtag{border:0;margin:22px 0 0;padding:0;min-width:0}
.wtagh{border:0;padding:0;font:800 15px/1.3 var(--font-body);color:var(--color-text);margin-bottom:12px;float:none;width:auto}
.wtagfrei{font:400 17px/1 var(--font-accent);color:var(--color-link);margin-left:6px}
.wtagopt:has(input:checked){border-color:var(--sky-600);box-shadow:0 0 0 1px var(--sky-600)}
.wtagbox{display:none;margin-top:12px;border:1.5px solid var(--color-border);border-radius:12px;padding:14px 16px}
.wtag:has(.wtagwunsch:checked) .wtagbox{display:block}
.wtaginfo,.wtagfehlt{margin:0 0 4px;font:400 13px/1.5 var(--font-body);color:var(--color-text-muted)}
.wtagfehlt{color:var(--color-warning)}
.wtagbox:has(.wtagt input:checked) .wtagfehlt{display:none}
.wtaggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.wtagkw{grid-column:1/-1;font:700 11px/1 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-muted);margin-top:6px}
.wtagt{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;border:1.5px solid var(--color-border);border-radius:10px;background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:border-color var(--transition-fast)}
.wtagt:hover{border-color:var(--navy-400)}
.wtagt input{position:absolute;opacity:0;pointer-events:none}
.wtagt:has(input:checked){background:var(--navy-800);border-color:var(--navy-800);color:var(--color-surface)}
.wtagt:has(input:focus-visible){box-shadow:var(--focus-ring)}
.wtagwt{font:400 12px/1 var(--font-body)}
.wtagd{font:700 15px/1.1 var(--font-body);font-feature-settings:'tnum'}
[data-theme="dark"] .wtagt:has(input:checked){background:var(--sky-300);border-color:var(--sky-300);color:var(--navy-900)}

/* Lueckenfueller unter dem Mindestbestellwert (snippets/tw_luecke_fueller.tpl).
   Steht in der Summenkarte der Warenkorbseite UND im Drawer - beide sind
   schmal (Drawer ca. 380 px, Summenkarte in der Seitenspalte aehnlich),
   deshalb gibt es nur ein Layout: eine gestapelte Liste. Kein Raster, das
   bei 375 px Breite ohnehin wieder einspaltig waere.

   Flaechen aus den Tokens, nicht aus Literalen - sonst bricht der
   Dunkelmodus (DESIGN_SYSTEM.md). */
.wfill{margin:14px 0 10px;padding:12px;background:var(--color-surface-2);border-radius:var(--radius-md)}
.wfillh{margin:0 0 10px;font:400 13px/1.35 var(--font-body);color:var(--color-text-muted)}
.wfillh b{color:var(--color-text);font-weight:700;font-feature-settings:'tnum';white-space:nowrap}
.wfilll{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

/* Eine Zeile = Bild + Text (Link) und der Plusknopf daneben. min-width:0 auf
   der Zeile und auf .wfilltxt: ohne das sprengt ein langer Artikelname die
   Flexbox und erzeugt auf dem iPhone waagerechtes Scrollen der ganzen Seite. */
/* scroll-margin-top wie bei den Ankerzielen in content.css/recht.css: Die
   Kopfzone (Hinweisleiste + Navigation) klebt und ist rund 150px hoch. Ohne
   den Abstand parkt ein scrollIntoView die angesteuerte Zeile genau darunter,
   und der Plusknopf ist zwar da, aber verdeckt - beim Pruefen am 04.10.2026
   fing die Kopfzone den Klick ab. */
.wfillz{scroll-margin-top:150px;display:flex;align-items:center;gap:10px;min-width:0;
        background:var(--color-surface);border:1px solid var(--hair);
        border-radius:var(--radius-sm);padding:8px 8px 8px 10px}
.wfillb{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;
        text-decoration:none;color:inherit}
.wfillb:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.wfillimg{flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-xs);
          background:var(--color-bg-alt) center/cover no-repeat}
.wfilltxt{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Zwei Zeilen statt Abschneiden mit Auslassungspunkten: "Fullblood Wagyu
   Rumpsteak 300 g" waere einzeilig bei 375 px genau nach "Rumpst..." zu Ende
   und damit nicht unterscheidbar von der naechsten Grammatur. */
.wfilltxt b{font:700 13px/1.25 var(--font-body);
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wfilltxt em{font:400 12px/1 var(--font-body);font-style:normal;
             font-feature-settings:'tnum';color:var(--color-text-muted)}
.wfillf{flex:0 0 auto;margin:0}
/* 44x44 ist die Mindestgroesse fuer eine Tippflaeche auf dem iPhone (Apple
   HIG). Der Knopf traegt sonst die Pillenform der Seite.

   Mit .tw davor, nicht ohne: `.tw .btn` setzt padding:16px 27px und gewinnt
   gegen eine einzelne Klasse. Ohne den Vorrang blieb das Polster stehen, der
   Knopf war 54 px breit und voll davon - das Pluszeichen wurde auf 0 px
   Breite zusammengedrueckt und war unsichtbar (gesehen 04.10.2026 in der
   Sichtpruefung, der Knopf sah aus wie eine leere blaue Pille). */
.tw .wfilladd{width:44px;height:44px;min-height:44px;padding:0;
              border-radius:var(--radius-pill);
              display:inline-flex;align-items:center;justify-content:center}
/* flex-shrink aus: ein Flex-Kind gibt sonst als Erstes seine Breite auf. */
.tw .wfilladd .ic18{flex:0 0 auto;width:18px;height:18px}

/* Ab Tablet darf die Zeile etwas luftiger werden - mehr nicht, die Spalte
   bleibt in jeder Breite schmal. */
@media (min-width:768px){
    .wfillimg{width:44px;height:44px}
    .wfilltxt b{font-size:13.5px}
}

/* ------------------------------------------------------------------
   Gratisgeschenk-Aktion (Positionstyp 11, siehe
   project/GESCHENK-AKTION.md). Hier und nicht in einer eigenen Datei:
   kasse.css laedt layout/header.tpl auf jeder Seite, template.xml
   bleibt damit unberuehrt - eine neue Datei im Minify-Bundle wird erst
   ausgeliefert, wenn das Template im Backend neu gespeichert wurde.
   ------------------------------------------------------------------ */

/* Die Zeile selbst: Akzentkante statt Flaeche. Eine eingefaerbte Zeile
   zwischen zwei weissen wirkt wie ein Fehlerzustand, eine Kante liest
   sich als Auszeichnung. */
.wgift{position:relative}
/* Akzentkante NUR in den grossen Zeilen von Warenkorbseite (.witem) und
   Drawer (.citem). In der Bestelluebersicht der Kasse (.ksitem) ist die Zeile
   nur 46 px hohes Bild plus umbrechender Name - der Streifen lief dort ueber
   die ganze Zeilenhoehe und stand neben nichts (gemeldet Bert 05.10.2026).
   Dort tragen Abzeichen und "Gratis" die Aussage schon allein. */
.witem.wgift::before,.citem.wgift::before{content:"";position:absolute;
               left:0;top:0;bottom:0;width:3px;
               background:var(--color-cta);border-radius:0 2px 2px 0}

/* Abzeichen. Flaeche und Schrift aus den CTA-Tokens, damit es im
   Dunkelmodus von selbst dreht (hell: Himmelblau auf Navy-Text,
   dunkel: Navy-Flaeche mit hellem Text). Kein Rot - Rot bleibt Sale
   und Streichpreis vorbehalten (DESIGN_SYSTEM.md). */
.gbadge{display:inline-flex;align-items:center;gap:5px;align-self:start;
        margin-bottom:3px;padding:3px 9px 3px 7px;
        border-radius:var(--radius-pill);
        background:var(--color-cta);color:var(--color-cta-ink);
        font:700 10.5px/1 var(--font-body);
        letter-spacing:var(--tracking-caps);text-transform:uppercase}
.gbadge svg{width:12px;height:12px}

/* "Gratis" steht an der Stelle des Preises und soll dort nicht lauter
   sein als eine Zahl - gleiche Groesse, nur ohne Ziffernsatz. */
.wprg{font-feature-settings:normal;color:var(--color-cta-ink)}
[data-theme="dark"] .wprg{color:var(--color-text)}

/* Einmalige Animation beim Hinzufuegen. Zwei Dinge gleichzeitig: das
   Abzeichen wippt kurz, die Zeile bekommt fuer einen Moment einen
   Schein. Laeuft genau einmal, weil die Sitzungsmarke dahinter am
   Seitenende faellt (Bootstrap.php). */
@keyframes gbadge-ein{
    0%  {transform:scale(.72);opacity:0}
    55% {transform:scale(1.08);opacity:1}
    100%{transform:scale(1);opacity:1}
}
/* Die Zeile kommt sichtbar herein, statt einfach da zu sein (Ansage Bert
   05.10.2026: "ich will sehen, wie das Geschenk reinkommt"). Sie faellt von
   oben in ihren Platz, kurz hinterlegt, dann ruhig.

   SENKRECHT, nicht waagerecht, und das ist kein Geschmack: .cscroll im
   Drawer hat overflow-y:auto, und damit macht der Browser aus der anderen
   Achse automatisch auch auto - eine Bewegung nach rechts holt die
   waagerechte Rollleiste zurueck, die am 04.10.2026 gerade erst weg ist
   (Commit cb7f067). Ueberlauf nach OBEN wird in einem Scrollbereich
   dagegen beschnitten und erweitert den Rollbereich nicht. */
@keyframes gzeile-ein{
    0%  {opacity:0;transform:translateY(-14px) scale(.985);background:var(--gglow)}
    55% {opacity:1;transform:translateY(2px) scale(1)}
    75% {transform:translateY(0)}
    100%{opacity:1;transform:translateY(0);background:transparent}
}
/* Die Akzentkante faehrt von oben ein und macht die Bewegung mit. */
@keyframes gkante-ein{
    0%  {transform:scaleY(0)}
    100%{transform:scaleY(1)}
}
/* Der Schein kommt in beiden Modi aus Himmelblau, nur unterschiedlich
   stark - im Dunkelmodus traegt --color-cta Navy, und Navy auf Navy ist
   kein Schein. Literale Werte wie in tokens.css, dort ist color-mix
   bewusst nicht benutzt. */
.wgiftneu{--gglow:rgba(160,218,254,.45);
          animation:gzeile-ein .62s cubic-bezier(.22,.78,.3,1.03) both}
[data-theme="dark"] .wgiftneu{--gglow:rgba(160,218,254,.2)}
/* Das Abzeichen landet NACH der Zeile - erst kommt das Paket, dann die
   Schleife. Ohne die Verzoegerung passiert beides gleichzeitig und man
   sieht nur eine Unruhe. */
.wgiftneu .gbadge{animation:gbadge-ein .45s cubic-bezier(.2,.9,.3,1.2) .3s both}
.witem.wgiftneu::before,.citem.wgiftneu::before{transform-origin:top;
                                  animation:gkante-ein .5s ease-out .12s both}

/* Wer Bewegung abbestellt hat, bekommt sie nicht - das Abzeichen bleibt
   trotzdem sichtbar, es ist die eigentliche Auszeichnung. */
@media (prefers-reduced-motion:reduce){
    .wgiftneu,.wgiftneu .gbadge{animation:none}
}

/* "Noch X EUR bis zum Gratis-..." - gleicher Kasten wie die
   Fortschrittsleiste darueber (.cprog), damit beide als dieselbe Art
   Hinweis gelesen werden. Die Leiste darin benutzt deren Klassen
   (.cbarw/.cbar/.cbarf/.cmk) und damit exakt deren Geometrie; eingefaerbt
   wird nur hier. Gruen bleibt der Versandleiste, Navy gehoert dem
   Geschenk - zwei Ziele, zwei Farben (Ansage Bert 05.10.2026). */
.gbar{margin-bottom:12px;padding:11px 14px;border-radius:12px;
      background:var(--sky-50);font:600 13px/1.4 var(--font-body)}
[data-theme="dark"] .gbar{background:#111c35}
.gbartxt{display:flex;align-items:flex-start;gap:9px}
.gbar .ic18{flex:0 0 auto;width:18px;height:18px;margin-top:1px;
            color:var(--navy-600)}
[data-theme="dark"] .gbar .ic18{color:var(--color-cta)}

/* Navy fuellt die Leiste. Im Dunkelmodus traegt --navy-600 die Rolle der
   CTA-Flaeche und waere auf dem dunklen Grund kaum zu sehen - dort fuellt
   Himmelblau, genau die Rollenumkehr, die das Design-System fuer den
   Nachtmodus beschreibt. */
.gbar .cbarf{background:var(--navy-600)}
[data-theme="dark"] .gbar .cbarf{background:var(--color-cta-ink)}
.gbar .cmk.hit{background:var(--navy-600);border-color:var(--navy-600);
                color:var(--color-cta)}
[data-theme="dark"] .gbar .cmk.hit{background:var(--color-cta-ink);
                border-color:var(--color-cta-ink);color:var(--navy-900)}

/* Fusszeile: links das Ziel, rechts die Frist. Umbricht auf schmalen
   Schirmen, statt die Frist abzuschneiden. */
.gbarfuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;
          margin:0 6px;font:500 10.5px/1.35 var(--font-body);
          color:var(--color-text-muted)}
.gbaru{font-weight:400}

/* ------------------------------------------------------------------
   Einblender der Gratisgeschenk-Aktion (snippets/tw_geschenk_alert.tpl,
   project/GESCHENK-AKTION.md). Drei Zustaende in einer Karte - leise
   beim Ankuendigen (1, 2), laut beim Belohnen (3).

   Farben kommen als --ga-bg/--ga-fg aus dem Backend und gelten in
   BEIDEN Modi: Der Sticker traegt weisse Schrift mit schwarzer Kontur,
   der braucht einen dunklen Grund - auf Weiss verliert er.
   ------------------------------------------------------------------ */
.galert{position:fixed;z-index:94;right:18px;bottom:18px;
        background:var(--ga-bg,#182746);color:var(--ga-fg,#e8f2fc);
        border-radius:18px;overflow:hidden;
        box-shadow:0 22px 54px -18px rgba(11,19,38,.65),
                   0 0 0 1px rgba(160,218,254,.16);
        /* Startlage: liegt rechts ausserhalb und wird von js/tw-cart.js
           mit .auf hereingeholt. visibility statt display, damit der
           Uebergang ueberhaupt laufen kann. */
        transform:translateX(24px);opacity:0;visibility:hidden;
        transition:transform .42s cubic-bezier(.22,.78,.3,1.03),
                   opacity .32s ease, visibility .42s}
.galert.auf{transform:none;opacity:1;visibility:visible}
/* z-index 94 liegt unter dem Warenkorb-Drawer (95, css/panel.css): Wer den
   Drawer offen hat, soll nicht von einer Karte davor zugedeckt werden. */

/* Lichtschimmer aus der oberen rechten Ecke - derselbe Griff wie beim
   Dunkelmodus-Panel, nur staerker. */
.galert::after{content:"";position:absolute;inset:0;pointer-events:none;
               background:radial-gradient(120% 90% at 85% 0%,
                          rgba(160,218,254,.18),transparent 60%)}

/* Zustand 1 und 2: schmal, Bild links neben dem Text. */
.galert1,.galert2{width:min(342px,calc(100vw - 24px));
                  display:grid;grid-template-columns:104px 1fr;gap:12px;
                  align-items:center;padding:13px 14px 13px 12px}
/* Rechts Platz fuer das Kreuz, damit die Ueberschrift nicht darunter laeuft. */
.galert1 .gatitel,.galert2 .gatitel{padding-right:30px}
.galert1 .gabild,.galert2 .gabild{width:104px;height:auto}

/* Zustand 3: das Fest - Bild ueber die volle Breite. */
.galert3{width:min(330px,calc(100vw - 24px));padding:14px 15px 13px}
.galert3 .gabild{width:100%;height:auto;margin:-2px 0 4px}
/* Oben etwas Luft, damit Kreuz und Frist nicht auf dem Bild liegen. */
.galert3{padding-top:30px}

.gabild{display:block}
.gaicon{display:grid;place-items:center;width:52px;height:52px;
        border-radius:var(--radius-pill);background:var(--color-cta);
        color:var(--color-cta-ink)}
.gaicon .ic18{width:22px;height:22px}

.gatxt{min-width:0}
.gatitel{display:block;font:800 15.5px/1.2 var(--font-body);margin-bottom:3px}
.galert3 .gatitel{margin-top:4px}
.gatxt p{margin:0 0 11px;font:400 12.5px/1.45 var(--font-body);opacity:.78}

/* Mini-Fortschritt in Zustand 2 - dieselbe Aussage wie die Leiste im
   Warenkorb, nur auf Kartenbreite. */
.gabar{height:6px;border-radius:var(--radius-pill);
       background:rgba(160,218,254,.18);margin:0 0 10px;overflow:hidden}
.gabarf{height:100%;border-radius:var(--radius-pill);background:var(--sky-300);
        transition:width .4s ease}

.gareihe{display:flex;gap:8px;align-items:center}
/* .btn kommt aus komponenten.css und haengt dort an .tw - die Karte liegt
   ausserhalb des Seiteninhalts, deshalb hier die Groesse selbst. */
.galert .gabtn{flex:1;text-align:center;padding:11px 16px;font-size:13px;
               border-radius:var(--radius-pill);background:var(--sky-300);
               color:var(--navy-800);font-weight:700;text-decoration:none;
               border:0;line-height:1;display:inline-flex;
               align-items:center;justify-content:center}
.galert .gabtn:hover{background:var(--sky-200,#c7e9fe);color:var(--navy-800)}
.gaweg{border:0;background:transparent;color:inherit;opacity:.72;cursor:pointer;
       font:600 12px/1 var(--font-body);padding:11px 4px}
.gaweg:hover{opacity:1}

/* Schliesskreuz. Klein im Bild, aber 34x34 als Tippflaeche - darunter
   trifft auf dem Handy niemand zuverlaessig. */
.gax{position:absolute;top:6px;right:6px;z-index:4;width:34px;height:34px;
     border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;
     border-radius:var(--radius-pill);display:grid;place-items:center;
     transition:opacity var(--transition-fast),background var(--transition-fast)}
.gax:hover{opacity:1;background:rgba(255,255,255,.12)}
.gax:focus-visible{outline:none;opacity:1;box-shadow:var(--focus-ring)}

/* Die Frist weicht dem Kreuz und sitzt links. */
.gafrist{position:absolute;top:10px;left:10px;z-index:2;
         background:rgba(11,19,38,.6);border:1px solid rgba(160,218,254,.25);
         color:var(--sky-300);border-radius:var(--radius-pill);padding:4px 9px;
         font:700 9.5px/1 var(--font-body);letter-spacing:var(--tracking-caps);
         text-transform:uppercase}

/* Auf dem Handy von unten als Nudge, ueber die volle Breite (Ansage Bert
   05.10.2026). Rechts unten waere dort halb vom Daumen verdeckt. */
@media (max-width:600px){
    .galert{right:10px;left:10px;bottom:10px;
            transform:translateY(24px)}
    .galert1,.galert2,.galert3{width:auto}
    .galert3{display:grid;grid-template-columns:104px 1fr;gap:12px;
             align-items:center;padding:12px 14px 12px 12px}
    .galert3 .gabild{width:104px;margin:0}
    .galert3 .gafrist{display:none}
}

/* Wer Bewegung abbestellt hat, bekommt die Karte ohne Einfahrt. */
@media (prefers-reduced-motion:reduce){
    .galert{transition:opacity .2s ease, visibility .2s;transform:none}
}

/* Solange die Karte steht, tritt der Knopf "nach oben" zurueck. Er sitzt an
   derselben Stelle und kommt aus NOVA mit z-index 1030 - er laege sonst
   ueber der Karte, genau auf "Danke" (gemessen 05.10.2026).
   !important ist hier kein Reflex: NOVAs eigenes Skript steuert die Deckkraft
   dieses Knopfs beim Scrollen selbst und wuerde eine normale Regel
   ueberschreiben. */
html.galert-offen .smoothscroll-top{opacity:0 !important;pointer-events:none}

/* Wallet-Knoepfe auf CI-Mass (07.10.2026)
   ---------------------------------------
   Gemessen auf der Zusammenfassung, 390px breit: unser Abschlussknopf
   (#complete-order-button) ist 46px hoch mit Pillenradius, Apple Pay kam mit
   30px und Radius 0, Google Pay mit 40px und 4px. Apple Pay wirkte dadurch
   wie ein Hinweisstreifen statt wie der Knopf, der die Bestellung abschickt.

   Was hier NICHT passiert: umfaerben. Schwarz bzw. Weiss sind von Apple und
   Google vorgeschrieben; ein Knopf in unserem Himmelblau verstoesst gegen
   deren Markenrichtlinien und kann die Freigabe der Zahlart kosten. Hoehe und
   Radius sind ausdruecklich freigestellt - mehr greifen wir nicht an.

   Apple liefert den Knopf als Web-Component mit eigenen Variablen; eine
   Hoehe per `height` greift dort nicht, sie muss ueber
   --apple-pay-button-height gesetzt werden. */
apple-pay-button,
#ppc_btn-appl {
    --apple-pay-button-height: 46px;
    --apple-pay-button-border-radius: 999px;
    display: block;
    width: 100%;
}

/* Der Container traegt h-100 und deckelt den Knopf sonst auf seine Hoehe.
   Er bringt ausserdem einen eigenen schwarzen Hintergrund mit (gemessen:
   bg rgb(0,0,0)) - eine Rundung am Knopf verschwindet sonst dahinter, der
   Knopf sieht eckig aus, obwohl er rund ist. Deshalb Hintergrund weg und
   die Rundung zur Sicherheit auch hier, mit overflow:hidden als Deckel. */
#paypal-button-container:has(apple-pay-button),
#paypal-button-container:has(.gpay-button) {
    height: auto !important;
    min-height: 46px;
    background: transparent !important;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.gpay-button {
    height: 46px !important;
    border-radius: var(--radius-pill) !important;
    width: 100%;
}