/* TrueWagyu Bausteine, die mehr als eine Seite braucht: Buttons,
 * Sektionsgeruest, Scroll-Reveal, Produktkarte.
 *
 * Herkunft: aus css/startseite.css herausgeloest, als das Kategorie-Paket
 * dieselben Teile brauchte. Werte unveraendert aus
 * design/handoff/Startseite V3.dc.html.
 *
 * Der Geltungsbereich ist `.tw` — die Klasse traegt jeder eigene Seitenkoerper
 * (page/index.tpl, productlist/index.tpl, ...). Eingegrenzt bleiben muss es,
 * weil .btn, .btn-lg und .sec auch Bootstrap- und NOVA-Klassen sind: ohne
 * Grenze entschiede die Ladereihenfolge, und NOVA-Eigenschaften, die wir nicht
 * setzen, blieben stehen.
 */

/* ================= Buttons ================= */
.tw .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 15px/1 var(--font-body);border-radius:var(--radius-pill);padding:16px 27px;cursor:pointer;border:0;transition:all var(--transition-fast);text-decoration:none;letter-spacing:.01em}
.tw .btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tw .btn-pri{background:var(--color-cta);color:var(--color-cta-ink);box-shadow:0 12px 26px -14px rgba(17,28,53,.4)}
.tw .btn-pri:hover{background:var(--color-cta-hover);transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(17,28,53,.48);color:var(--color-cta-ink)}
/* Gesperrt (Befund 23: "Zur Kasse" unter dem Mindestbestellwert). Tokens, kein Anheben. */
.tw .btn[disabled],.tw .btn[disabled]:hover{background:var(--color-surface-2);color:var(--color-text-muted);box-shadow:inset 0 0 0 1.5px var(--color-border);transform:none;cursor:not-allowed}
.tw .btn-lg{padding:19px 33px;font-size:16px}
.tw .btn-gho{background:transparent;color:var(--navy-800);box-shadow:inset 0 0 0 1.5px var(--color-border)}
.tw .btn-gho:hover{box-shadow:inset 0 0 0 1.5px var(--navy-800);color:var(--navy-950)}
[data-theme="dark"] .tw .btn-gho{color:var(--sky-300);box-shadow:inset 0 0 0 1.5px rgba(160,218,254,.4)}
[data-theme="dark"] .tw .btn-gho:hover{box-shadow:inset 0 0 0 1.5px var(--sky-300)}
.tw .btn-hero{box-shadow:0 18px 36px -12px rgba(17,28,53,.55),0 4px 14px -4px rgba(17,28,53,.32)}
.tw .btn-hero:hover{box-shadow:0 22px 42px -12px rgba(17,28,53,.6),0 4px 14px -4px rgba(17,28,53,.36)}
.tw .btn-navy{background:var(--navy-900);color:#fff;box-shadow:0 12px 26px -14px rgba(17,28,53,.5)}
.tw .btn-navy:hover{background:var(--navy-800);color:#fff;transform:translateY(-1px)}
[data-theme="dark"] .tw .btn-navy{background:rgba(224,242,254,.14);color:#e0f2fe}
[data-theme="dark"] .tw .btn-navy:hover{background:rgba(224,242,254,.22)}

/* NOVA-Buttons in unseren Seiten. Wo NOVAs Formulare stehen bleiben (Kasse,
   Konto), heissen die Knoepfe .btn-primary und traegen NOVAs Gelb. Umgefaerbt
   wird nur, die Masse bleiben NOVAs - sonst zerfaellt deren Zeilenraster. */
.tw .btn-primary,.tw .btn-outline-primary,.tw .btn-outline-secondary{white-space:nowrap}
.tw .btn-primary{background:var(--color-cta);border-color:var(--color-cta);color:var(--color-cta-ink)}
.tw .btn-primary:hover,.tw .btn-primary:focus,.tw .btn-primary:active{background:var(--color-cta-hover);border-color:var(--color-cta-hover);color:var(--color-cta-ink)}
.tw .btn-outline-primary{border-color:var(--color-border-strong);color:var(--navy-800)}
.tw .btn-outline-primary:hover{background:var(--color-cta);border-color:var(--color-cta);color:var(--color-cta-ink)}
[data-theme="dark"] .tw .btn-outline-primary{color:var(--sky-300)}
/* :focus statt :focus-visible - bewusst, nicht aus Versehen. NOVAs eigene
   .btn-primary:focus/.btn-outline-primary:focus setzen einen gelben
   box-shadow-Ring (rgba(223,175,12,.5)) und unsere Basisregeln oben (Zeile
   36/38) setzen dafuer gar keinen box-shadow. Bei :focus-visible gewinnt
   das zwar bei Tab-Fokus (hoehere Spezifitaet), nicht aber bei einem echten
   Mausklick: Chromium setzt :focus-visible fuer Buttons nach Klick nicht,
   NOVAs :focus-Regel bleibt dann konkurrenzlos und der Ring blitzt gelb auf
   - gemessen per echtem Mausklick, nicht nur .focus(). Gleiches Muster wie
   Checkboxen/Radios (Commit 977b984), dort stand seit jeher :focus. */
.tw .btn-primary:focus,.tw .btn-outline-primary:focus{outline:none;box-shadow:var(--focus-ring)}

/* ================= Sektionen ================= */
.sec{padding:148px 0}
.eyebrow{font-family:var(--font-accent);font-size:16px;font-weight:700;color:var(--navy-700)}
[data-theme="dark"] .eyebrow{color:#9db0c9}
.stitle{font-family:var(--font-display);font-weight:400;font-size:38px;line-height:1.08;text-transform:uppercase;margin:6px 0 12px;letter-spacing:.02em;color:var(--color-ink);text-wrap:pretty}
[data-theme="dark"] .stitle{color:var(--color-text-inverse)}
.slead{font-size:15.5px;color:var(--color-text-muted);max-width:560px;line-height:1.65;margin:0}
.shead{margin-bottom:44px}
.srow{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.shoplink{display:inline-flex;align-items:center;gap:7px;font:700 13.5px/1 var(--font-body);color:var(--color-cta-ink);background:var(--color-cta);text-decoration:none;padding:12px 19px;border-radius:var(--radius-pill);white-space:nowrap;transition:all var(--transition-fast)}
.shoplink:hover{background:var(--color-cta-hover);color:var(--color-cta-ink);transform:translateY(-1px)}
.shoplink:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.shoplink .ic18{width:16px;height:16px}

/* Reveal beim Scrollen. Sichtbar als Ausgangszustand: erst wenn das Skript
   nachweislich laeuft, setzt es data-anim und blendet ein. Ohne JS bleibt
   alles sichtbar. */
.rv{transition:opacity .9s ease,transform .9s ease}
.rv[data-anim]:not([data-in]){opacity:0;transform:translateY(22px)}
@media (prefers-reduced-motion:reduce){.rv{transition:none}.rv[data-anim]:not([data-in]){opacity:1;transform:none}}

/* ================= Produktkarte ================= */
.pcard{background:var(--color-surface);border:1px solid var(--hair);border-radius:16px;overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);position:relative;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(17,28,53,.28);border-color:#dfe7f0}
[data-theme="dark"] .pcard{border-color:rgba(160,218,254,.14)}
[data-theme="dark"] .pcard:hover{border-color:rgba(160,218,254,.3);box-shadow:0 24px 44px -28px rgba(0,0,0,.6)}
/* Bildbuehne auf --product-stage gepinnt (vorher --color-bg-alt aus der
   Referenz): die generierte Produktserie traegt ihren Hintergrund gebacken
   (#ffffff bzw. #101b36), jede andere Flaechenfarbe stuende als Kante um
   das Bild. Karte, Rahmen und Schatten behalten ihre Token. */
/* Vollflaechig statt auf einer Buehne (13.09.2026). Die Artikelbilder sind
   seit dem Marmor-Tausch echte Fotos auf blauer Marmorplatte, deckend und
   quadratisch - kein freigestelltes PNG mehr. Buehnenfarbe, Innenabstand und
   Schlagschatten haben damit keine Aufgabe mehr: die Buehne liegt unsichtbar
   hinter einem deckenden Bild, der Innenabstand stellt das Foto als Kaestchen
   in einen Rahmen, und ein Schatten um ein rechteckiges Foto sieht aus wie ein
   zweiter Rahmen. --product-stage bleibt als Grund stehen, solange der Shop
   laedt und fuer die vier Artikel, die noch ihr altes Freistellerbild tragen
   (Beinscheibe, Fett gewolft, Fett im Glas, Fond im Glas). */
.pimg{height:225px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--product-stage);margin:10px;border-radius:10px;overflow:hidden}
/* Der Schatten kommt aus dem Template, nicht aus dem Bild: die Artikelbilder
   sind seit 14.08.2026 ohne Schlagschatten freigestellt (Magnific), weil ein
   gebackener Schatten auf Weiss im Dunkelmodus als helle Kruste stehenblieb.
   Navy auf der dunklen Buehne ist praktisch dieselbe Farbe - dort deshalb
   Schwarz und kraeftiger. */
.pphoto{width:100%;height:100%;object-fit:cover;display:block}
/* Die Sonderregeln fuer die Tag/Nacht-Kartenbilder standen hier bis zum
   13.08.2026. Seit die Artikelbilder freigestellt sind, traegt ein Bild
   beide Modi - .lightonly/.darkonly kommen auf Produktbildern nicht mehr
   vor. Die allgemeine Mechanik in base.css bleibt (Hero, Zahlungsarten). */
/* Hover: blendet langsam auf die gebratene Variante um (vorletztes
   Galeriebild, siehe tw_produktkarte.tpl). Absolut im Kasten, weil .pimg
   flex ist - als weiteres Flex-Kind stuende das Bild daneben statt
   darueber; die 16px entsprechen dem .pimg-padding. Einblenden bewusst
   traege, ausblenden zuegig, sonst haengt der Braten noch auf der Karte,
   wenn die Maus laengst weg ist. Geraete ohne Hover bleiben beim
   Startbild; focus-within nimmt Tastaturnutzer mit. */
.pphoto.phover{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.pcard:hover .pphoto.phover,.pcard:focus-within .pphoto.phover{opacity:1;transition:opacity 2.5s ease}
/* Der <picture>-Wrapper um das Hover-Bild darf im Layout nicht mitzaehlen:
   das Bild darin ist absolut positioniert, der Wrapper spannte sonst eine
   leere Zeilenbox in der Kachel auf. */
.pcard picture{display:contents}
.bdgrow{position:absolute;top:20px;left:20px;display:flex;gap:6px;z-index:2}
.bdg{display:inline-flex;align-items:center;gap:5px;font:700 11px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:var(--radius-pill)}
.bdg-sale{background:var(--color-sale);color:#fff}
.bdg-best{background:var(--navy-900);color:#fff}
.bdg-new{background:var(--sky-300);color:var(--navy-900)}
.pbody{padding:4px 18px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.pname{font:400 17.5px/1.15 var(--font-display);text-transform:uppercase;letter-spacing:.035em;margin:0;color:var(--color-ink)}
.pname a{color:inherit;text-decoration:none}
.pname a:hover{color:var(--color-link)}
.pname a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
[data-theme="dark"] .pname{color:var(--color-text-inverse)}
.pmeta{font:400 12px/1.4 var(--font-body);color:var(--color-text-muted)}
.szrow{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;margin-top:4px;padding-bottom:2px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.szrow::-webkit-scrollbar{display:none}
.szrow .sz{white-space:nowrap;flex:none}
.sz{font:600 12px/1 var(--font-body);padding:8px 11px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--navy-800);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;display:inline-flex;align-items:center}
.sz:hover{border-color:var(--navy-800);color:var(--navy-800)}
.sz.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
/* Der gewaehlte Chip braucht seinen eigenen Hover: .sz:hover setzt nur
   Rahmen- und Schriftfarbe, beides ueberschreibt .sz.on eine Zeile darueber -
   der aktive Chip reagierte deshalb auf Ueberfahren gar nicht. Aufgefallen
   erst, seit ci-audit.mjs Zustaende misst (08.09.2026); im Ruhezustand ist
   so etwas nicht zu sehen. Etwas heller statt dunkler, weil die Flaeche
   bereits das dunkelste Navy traegt - die Richtung ist zweitrangig, die
   Rueckmeldung nicht. */
.sz.on:hover{background:var(--navy-800);border-color:var(--navy-800)}
.sz:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sz[disabled]{opacity:.45;cursor:not-allowed}
/* "+N" der Produktkarte: gestrichelt, damit es als Verweis auf die
   Detailseite lesbar ist und nicht als weitere waehlbare Variante. */
.szmore{border-style:dashed;color:var(--color-text-muted)}
[data-theme="dark"] .sz{background:transparent;color:var(--navy-100)}
[data-theme="dark"] .sz:hover{color:var(--navy-100)}
[data-theme="dark"] .sz.on{background:var(--sky-300);border-color:var(--sky-300);color:var(--navy-900)}
/* Auch im Dunkelmodus eigener Hover: die Regel eine Zeile darueber ist
   spezifischer als .sz.on:hover und haette ihn sonst geschluckt. */
[data-theme="dark"] .sz.on:hover{background:var(--sky-200);border-color:var(--sky-200)}
.prow{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap}
.pricebig{font:700 16px/1 var(--font-body);color:var(--color-price);font-feature-settings:'tnum'}
.pcard .uvpline{font:400 12px/1.4 var(--font-body);color:var(--color-text-muted);margin-top:10px}
.pcard .uvpline s{text-decoration:line-through}
.discb{display:inline-flex;font:800 11.5px/1 var(--font-body);padding:5px 8px;border-radius:8px;background:var(--color-price-strike);color:#fff}
.basep{font:500 12px/1.4 var(--font-body);color:var(--color-text-muted)}
.stx{color:var(--color-text-muted);font-weight:500;font-style:normal;margin-left:1px}
.f1{flex:1}
.tw .pcart{width:100%;margin-top:10px;padding:13px 18px;font-size:13.5px}
/* Mengenfeld + Kaufknopf nebeneinander. Der Stepper (.cq/.cqb/.cqv) ist die
   Komponente aus dem Warenkorb (css/kasse.css) - hier nur in der Breite
   fixiert, der Knopf nimmt den Rest der Zeile. Schmalste Karte im Slider
   (268px, siehe startseite.css) bleibt einzeilig: Stepper ~91px + Knopf-
   Mindestbreite passen auch dort ohne Umbruch. */
/* Mengenwahl und Kaufknopf als eine Zeile. Beide auf dieselbe Hoehe
   gebracht (Ansage Bert 08.09.2026): Der Stepper mass 30px gegen 41px des
   Knopfs und sass sichtbar tiefer in der Zeile - zwei Bedienelemente
   nebeneinander muessen wie eines wirken. Die Hoehe steht als Variable, weil
   sie an zwei Stellen gebraucht wird und sonst auseinanderlaeuft.

   Der Knopf gibt dafuer seitlichen Innenabstand ab (12px statt der 27px der
   Grundform, ausdruecklich so freigegeben) - in der schmalen Karte ist die
   Breite das knappe Gut, nicht die Hoehe. Nur hier: der Stepper im Warenkorb
   und auf der Produktseite behaelt seine Masse. */
.pcartrow{--pcart-h:41px;display:flex;align-items:stretch;gap:8px;margin-top:10px}
.pcartrow .cq{flex:none;height:var(--pcart-h);box-sizing:border-box}
.pcartrow .cqb{width:30px;height:100%}
.pcartrow .cqv{height:100%;font-size:14px}
.pcartrow .pcart{width:auto;flex:1;min-width:0;margin-top:0;height:var(--pcart-h);padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nicht kaufbar: dieselbe Grundform wie der Kaufknopf, damit die Kachelhoehe
   nicht springt, aber ohne Knopf-Semantik - gedaempfte Flaeche statt CTA.
   Kein Rot: das ist laut DESIGN_SYSTEM.md fuer Sale und Fehler reserviert,
   und ein fehlender Bestand ist keins von beidem. Farben aus den Tokens,
   damit der Dunkelmodus mitkommt. */
.tw .pcart-soon{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--radius-pill);font-weight:700;line-height:1;
  background:var(--color-surface-2);color:var(--color-text-muted);
  box-shadow:inset 0 0 0 1.5px var(--color-border);cursor:default}
/* Auf der Detailseite traegt der Hinweis die Groesse des dortigen Kaufknopfs. */
.tw .pcart-soon-lg{width:auto;padding:16px 27px;font-size:15px}

/* ================= Responsive ================= */
@media (max-width:920px){
.sec{padding:96px 0}
.stitle{font-size:28px}
}
@media (max-width:640px){
.sec{padding:88px 0}
.stitle{font-size:32px}
.tw .btn-lg{width:100%}
}

/* ---- Lieferzeit-Countdown (Produktdetail + Kasse) -----------------------
 * Restzeit bis zum Versandschluss. Die Geometrie stammt unveraendert aus der
 * Vorgabe; ersetzt sind nur die Farbliterale durch die Tokens, sonst braeche
 * der Dunkelmodus, und die Schrift: die Vorgabe nennt Inter, das Projekt
 * bindet keine fremden Web-Fonts ein (DSGVO, DESIGN_SYSTEM.md), also
 * --font-body. Tabellenziffern ueberall, wo Zahlen ticken - sonst springt
 * die Zeile im Sekundentakt.
 */
.lzbox{--lz-akzent:var(--sky-600);
       max-width:390px;box-sizing:border-box;
       background:var(--sky-50);border:1px solid var(--lz-rand,#cbe6fb);
       border-radius:13px;padding:15px 18px 16px;margin-top:20px;max-width:none}
/* Urgent: eine Stunde vor Schluss wechselt der Akzent auf Rot. Rot ist hier
   keine Schaltflaeche, sondern Dringlichkeit - die Ausnahme, die
   DESIGN_SYSTEM.md dafuer vorsieht. Kein Blinken, kein Wackeln. */
.lzurgent{--lz-akzent:var(--cta-a)}

/* Die DHL-Pille sitzt in derselben Zeile wie die Restzeit statt in einer
   eigenen: Das nutzt die gewonnene Breite und spart eine Zeilenhoehe. */
.lzhead{display:flex;align-items:center;gap:13px}
/* Doppelte Klasse, nicht aus Vorliebe: .shippill steht in content.css, und
   die wird nach dieser Datei geladen. Mit nur .lzdhl gewann dort die
   Grundgroesse von 42px, und die Pille war auf der Produktseite breiter als
   die Restzeit daneben. */
.shippill.lzdhl{margin-left:auto;flex:none;height:20px;padding-right:9px;gap:5px;font-size:8.5px}
.shippill.lzdhl .shipsep{height:11px}
.lzclock{flex:none}
.lzclockface{fill:var(--color-surface);stroke:var(--lz-akzent);stroke-width:2}
.lzclockdot{fill:var(--lz-akzent)}
.lzhand{transform-origin:13px 13px;animation:lzsweep 60s linear infinite}
.lzhand path{stroke:var(--lz-akzent);stroke-width:2;stroke-linecap:round}
.lzlabel{font:600 11.5px/1 var(--font-body);letter-spacing:.02em;color:var(--color-text-muted);margin-bottom:7px}
.lznum{font:800 21px/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--lz-akzent);white-space:nowrap}

.lzfolge{display:flex;align-items:center;gap:8px;margin:12px 0 13px;
         font:600 13.5px/1.3 var(--font-body);color:var(--navy-700)}
.lzfolge svg{flex:none}
.lzfolge b{font-weight:800;color:var(--color-ink)}

.lzaxis{position:relative;height:8px;border-radius:99px;background:var(--lz-spur,#dfeaf3)}
.lzfill{position:absolute;top:0;bottom:0;border-radius:99px;overflow:hidden;
        background:linear-gradient(90deg,var(--sky-300),var(--lz-akzent));
        transition:left .9s linear,width .9s linear}
.lzshim{position:absolute;inset:0;width:40%;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
        animation:lzshim 2.4s ease-in-out infinite}
.lzmark{position:absolute;top:50%;width:13px;height:13px;margin-left:-6px;border-radius:99px;
        background:var(--navy-800);border:2.5px solid var(--color-surface);
        box-shadow:0 2px 6px rgba(17,28,53,.3);transform:translateY(-50%);transition:left .9s linear}
/* Die Fahne markiert den Versandschluss am rechten Ende der Achse. */
.lzflag{position:absolute;top:-5px;right:-1px;width:2.5px;height:18px;border-radius:2px;background:var(--navy-800)}

.lzlabels{position:relative;height:13px;margin-top:10px;
          font:600 11px/1 var(--font-body);color:var(--color-text-muted)}
.lznow{position:absolute;top:0;transform:translateX(-50%);transition:left .9s linear;white-space:nowrap}
.lzcut{position:absolute;top:0;right:0;white-space:nowrap}
.lzstatic{display:flex;justify-content:space-between;height:auto}

.lzalt{margin-top:12px;padding-top:11px;border-top:1px dashed var(--lz-trenn,#c3dcf0);
       font:400 13.5px/1.35 var(--font-accent);color:var(--sky-700)}

/* Kasse: schmaler, ohne Uhr, ohne wandernde Marke. */
/* Keine eigene Maximalbreite: Die Kasse gibt die Breite vor, eine
   zusaetzliche Grenze sah willkuerlich aus und liess rechts Platz stehen. */
.lzmini{max-width:none;width:100%;margin-top:14px;border-radius:11px;padding:14px 16px 15px}
.lzline{font:600 13px/1.4 var(--font-body);color:var(--navy-700);margin-bottom:11px}
.lzline b{font-weight:800;color:var(--color-ink)}
.lzline b[data-lz-rest]{font-variant-numeric:tabular-nums;color:var(--lz-akzent)}
.lzmini .lzaxis{height:6px}
.lzmini .lzflag{top:-4px;width:2px;height:14px}
.lzmini .lzlabels{margin-top:10px;font:500 11px/1 var(--font-body)}

@keyframes lzsweep{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes lzshim{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* Dunkelmodus: eigene Flaechen statt abgeleiteter - die helle Panel-Farbe
   waere auf Nachthimmel ein Leuchtkasten. */
[data-theme="dark"] .lzbox{--lz-akzent:var(--sky-400);--lz-rand:rgba(160,218,254,.2);
                           --lz-spur:var(--navy-700);--lz-trenn:rgba(160,218,254,.2);
                           background:var(--navy-900)}
[data-theme="dark"] .lzurgent{--lz-akzent:#f8776c}
/* --navy-700 und --sky-700 sind Palettenwerte und kippen im Dunkelmodus
   nicht mit. Auf der hellen Flaeche stimmen sie, auf der dunklen ergaeben
   sie 1,3:1 (Folgezeile) und 2,2:1 (Handschrift) - gemessen, unlesbar. */
[data-theme="dark"] .lzfolge,
[data-theme="dark"] .lzline{color:var(--color-text)}
[data-theme="dark"] .lzalt{color:var(--sky-400)}
[data-theme="dark"] .lzclockface{fill:transparent}
[data-theme="dark"] .lzmark{border-color:var(--navy-900);background:var(--sky-300)}
[data-theme="dark"] .lzflag{background:var(--sky-300)}

@media (max-width:480px){
.lzbox{padding:14px 15px 15px}
/* Auf schmalen Schirmen bleibt von der Pille nur die Wortmarke: Mit dem
   Zusatz "Overnight" daneben blieb fuer die Restzeit so wenig Platz, dass
   sie auf vier Zeilen umbrach. */
.shippill.lzdhl{height:18px;padding-right:0}
.shippill.lzdhl .shipsep,.lzdhlw{display:none}
.lznum{font-size:19px}
.lzalt{font-size:13px}
}

/* Zeiger und Shimmer sind Zierde, die Zahlen sind die Information: die
   ticken auch hier weiter. */
@media (prefers-reduced-motion:reduce){
.lzhand,.lzshim{animation:none}
.lzfill,.lzmark,.lznow{transition:none}
}

/* ================= Auswahlfelder =================
 * NOVA faerbt angehakte Checkboxen und Radios in seiner Theme-Farbe Gelb.
 * Gelb kommt in dieser Marke nicht vor - DESIGN_SYSTEM.md kennt Himmelblau,
 * Navy und Rot nur als Verkaufssemantik. Ansage Bert 07.09.2026.
 *
 * Angehakt heisst hier: Navy-Flaeche mit hellem Haken, dieselbe Paarung wie
 * .twfaktic und .twfaktpfeil.on. Der Haken wird gezeichnet statt geladen -
 * Bootstrap liefert ihn als SVG im data-URI, und dort liesse sich die Farbe
 * nur hartkodieren. Zwei Rahmenkanten plus Drehung koennen aus den Tokens
 * kommen und stimmen damit in beiden Modi.
 */
.tw .custom-control-label::before{
  background-color:var(--color-surface);
  border-color:var(--color-border-strong);
  transition:background-color var(--transition-fast),border-color var(--transition-fast)}
.tw .custom-control-input:checked ~ .custom-control-label::before{
  background-color:var(--navy-900);
  border-color:var(--navy-900)}
.tw .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow:var(--focus-ring)}
.tw .custom-control-input:disabled ~ .custom-control-label::before{
  background-color:var(--color-bg-alt);
  border-color:var(--color-border)}

/* Der gezeichnete Haken. Masse an Bootstraps 1rem-Box ausgerichtet: die
   liegt auf top .25rem / left -1.5rem, der Haken sitzt mittig darin. */
.tw .custom-control-input:checked ~ .custom-control-label::after{
  background-image:none;
  width:.34rem;height:.6rem;
  top:.38rem;left:-1.19rem;
  border:solid var(--sky-100);
  border-width:0 2px 2px 0;
  transform:rotate(42deg)}

/* Radios bleiben rund: dort ist der Punkt richtig, nicht der Haken. */
.tw .custom-control-input:checked ~ .custom-radio .custom-control-label::after,
.tw .custom-radio .custom-control-input:checked ~ .custom-control-label::after{
  width:.5rem;height:.5rem;
  top:.5rem;left:-1.25rem;
  border:0;border-radius:var(--radius-pill);
  background-color:var(--sky-100);
  transform:none}

/* Dunkelmodus: Navy auf Navy waere nicht zu erkennen. Navy-600 traegt hier
   dieselbe Rolle wie beim CTA (tokens.css), der Rand macht die Kante
   sichtbar. */
[data-theme="dark"] .tw .custom-control-input:checked ~ .custom-control-label::before{
  background-color:var(--navy-600);
  border-color:var(--sky-300)}

/* ================= Knopf "Nach oben" =================
 *
 * NOVAs .smoothscroll-top steht fest unten rechts auf JEDER Seite - und war
 * die einzige Stelle, die der CI-Audit am 07.09.2026 auf allen 22 gemessenen
 * Seiten gemeldet hat, oeffentliche wie angemeldete. Gemessen: weisser Kasten
 * 47x44px, border-radius 2px, graues Zeichen (#707070), generischer
 * Schlagschatten rgba(0,0,0,.2).
 *
 * Der Grund, warum ihn nie jemand erwischt hat: Er haengt AUSSERHALB des
 * .tw-Wrappers direkt im Body. Saemtliche Hausstile fuer Knoepfe beginnen mit
 * `.tw .btn` und greifen deshalb nicht - er ist die letzte Bootstrap-Insel im
 * Shop. Er braucht darum seinen eigenen Selektor, nicht den Wrapper.
 *
 * Rund statt eckig, Flaeche und Zeichen aus den Tokens, im Dunkelmodus die
 * helle Kante statt des Schlagschattens (DESIGN_SYSTEM.md: Elevation entsteht
 * dort ueber Helligkeit, nicht ueber Schatten). */
.smoothscroll-top{
  width:46px;height:46px;
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-card);
  transition:all var(--transition-fast)}
.smoothscroll-top:hover{
  background:var(--color-cta);
  color:var(--color-cta-ink);
  box-shadow:var(--shadow-card-hover)}
.smoothscroll-top:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Das Zeichen ist ein fa-2x-Chevron und sprengt den runden Knopf. */
.smoothscroll-top .fa-chevron-up{font-size:17px}
[data-theme="dark"] .smoothscroll-top{
  background:var(--color-surface-2);
  color:var(--color-text-inverse)}

/* ================= Consent-Modal: Schliessen-Kreuz =================
 * NOVAs eingebauter Consent-Manager (Vendor-Einstellungen, oeffnet ueber
 * "Konfigurieren" im Cookie-Banner) faerbt sein "x" auf Hover UND Fokus in
 * .consent-modal-close:hover,:focus{color:#F8BF00} - reines NOVA-Gelb, auf
 * jeder Seite erreichbar, weil der Banner ueberall steht. Gefunden nur durch
 * echten Mausklick/Hover, nicht durch ci-audit.mjs: das Element traegt kein
 * .btn und keine der FREMD-Kennungen, und selbst wenn - der Audit prueft nur
 * Hintergrundfarben im Ruhezustand, keine Textfarbe und keine Hover/Fokus-
 * Zustaende.
 *
 * Wie .smoothscroll-top haengt das Modal AUSSERHALB von .tw direkt im Body -
 * eigener Selektor noetig. Nur die Farbe wird ersetzt, nichts an Struktur,
 * Text oder Funktion des Consent-Managers. */
.consent-modal-close:hover,.consent-modal-close:focus{color:var(--navy-900)}

/* Consent-Banner und -Modal im Dunkelmodus (29.09.2026). NOVA verdrahtet
 * Flaechen, Rahmen und Text fest auf Weiss/Grau - im Dunkelmodus stand der
 * Banner als weisser Kasten ueber dem Nachthimmel. Nur Farben, nichts an
 * Struktur oder Funktion. */
[data-theme="dark"] :is(#consent-banner,.consent-modal-content,.consent-more-description,#consent-settings-btn){background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}
[data-theme="dark"] :is(#consent-manager,.consent-help,.consent-modal-close){color:var(--color-text-muted)}
[data-theme="dark"] #consent-manager :is(strong,.consent-display-1,.consent-display-2,.consent-display-3,.consent-modal-icon,.consent-switch .consent-label){color:var(--color-text)}
[data-theme="dark"] #consent-manager a{color:var(--color-link)}
[data-theme="dark"] :is(.consent-banner-icon,.consent-info){border-color:var(--color-border)}
[data-theme="dark"] #consent-manager hr{border-bottom-color:var(--color-border)}
[data-theme="dark"] .consent-btn-outline-primary{border-color:rgba(160,218,254,.4);color:var(--sky-300)}
[data-theme="dark"] .consent-btn-outline-primary:is(:hover,:focus){background:var(--color-cta);border-color:var(--color-cta);color:var(--color-cta-ink)}
[data-theme="dark"] .consent-switch .consent-label::before{background-color:var(--color-surface-2)}
[data-theme="dark"] .consent-modal-close:is(:hover,:focus){color:var(--sky-300)}
/* "Uebernehmen" im Modal war NOVA-Gruen (.consent-btn-tertiary) - CTA-Farbe
 * in beiden Modi. */
.consent-btn-tertiary{background:var(--color-cta);border-color:var(--color-cta);color:var(--color-cta-ink)}
.consent-btn-tertiary:is(:hover,:focus){background:var(--color-cta-hover);border-color:var(--color-cta-hover);color:var(--color-cta-ink)}