/* TrueWagyu Layout: Topbar, Header, Mega-Menue, Mobile-Drawer, Footer
 *
 * Quelle: design/handoff/Startseite V3.dc.html (<style>-Block). Werte 1:1
 * uebernommen; wo die Referenz ein Literal nutzt, das exakt einem Token
 * entspricht, steht hier das Token.
 *
 * Reines Weiss (#fff) bleibt Literal: Der Footer ist in beiden Modi Navy,
 * die Ueberschriften darauf sind bewusst heller als --color-text-inverse.
 */

/* ================= Content-Shell =================
 * box-sizing bewusst content-box: Bootstrap setzt global border-box, dann
 * waere die Inhaltsspalte 1140 minus Polster = 1076 breit. Die Referenz laeuft
 * ohne Bootstrap und liefert 1140 Inhalt plus Polster. Gemessen an .lupeg und
 * .g2c der Startseite; betrifft auch das Mega-Menue, das mit min(1140px,...)
 * sonst 32px je Seite ueber die Kopfzeile hinausragt.
 */
.shell{max-width:var(--container-max);margin:0 auto;padding:0 32px;box-sizing:content-box}

/* ================= Topbar ================= */
/* Volle Fensterbreite statt 1440: das Farbband soll nicht hart abschneiden.
   Der Inhalt bleibt im Kasten - .uspin hier, .shell im Header darunter. */
.topstick{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;z-index:70}

/* Hinweisleiste ueber der Topbar (Plugin truewagyu_tracking, Markup in
   layout/header.tpl). Farben kommen als Inline-Variablen vom Server, weil sie
   je Meldung frei einstellbar sind - hier steht nur die Form.

   Masse absichtlich identisch zur Topbar darunter (.uspin): gleiche
   Schriftgroesse, gleiche Laufweite, gleicher senkrechter Innenabstand. Der
   rechte Abstand ist kleiner, weil dort nur der Schliessknopf sitzt und nicht
   Sprach- und Modusumschalter. */
.hnws{background:var(--hnws-bg);color:var(--hnws-fg)}
.hnwsin{position:relative;max-width:1440px;margin:0 auto;
  font:600 11.5px/1 var(--font-body);letter-spacing:.03em;
  display:flex;justify-content:center;align-items:center;gap:10px;padding:9px 44px 9px 16px}
/* Ohne Schliessknopf faellt der Platz rechts weg - sonst stuende der Text
   sichtbar aus der Mitte. */
.hnwsin.hnwsnox{padding-right:16px}
.hnws svg{color:currentColor;flex:none}
.hnwstx{display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;max-width:100%;min-width:0;overflow-x:auto;
  scroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none}
.hnwstx::-webkit-scrollbar{display:none}
.hnwsa{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hnwsa:hover{color:inherit}
.hnwsa:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
.hnwsx{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:0;background:transparent;color:inherit;opacity:.65;
  cursor:pointer;border-radius:var(--radius-pill);display:grid;place-items:center;
  transition:opacity var(--transition-fast),background var(--transition-fast)}
.hnwsx:hover{opacity:1;background:rgba(255,255,255,.14)}
.hnwsx:focus-visible{outline:none;opacity:1;box-shadow:var(--focus-ring)}

/* Im Dunkelmodus gelten die Nachtfarben - ohne eigene Nachtfarben sind das
   dieselben Werte. Getrennt wird dann durch eine helle Haarlinie statt durch
   eine andere Farbe: Das ist die Hausloesung des Design-Systems fuer Erhoehung
   im Dunkeln ("keine Schlagschatten, sondern helle Kanten"), und sie
   funktioniert bei jeder Farbe, die jemand einstellt - eine Aufhellrechnung
   dagegen macht aus einem Schwarz ein ausgewaschenes Grau. */
[data-theme="dark"] .hnws{background:var(--hnws-bg-d);color:var(--hnws-fg-d);
  border-bottom:1px solid rgba(160,218,254,.16)}

/* Mobil bleibt der Text einzeilig (Ansage Bert 07.09.2026): Umbruch nie, bei
   zu schmalem Schirm schiebt man die Zeile waagerecht. Gescrollt wird nur
   .hnwstx, nicht .hnwsin - der Schliessknopf haengt am Kasten und soll stehen
   bleiben. Die Rollleiste ist ausgeblendet, in einem 30px hohen Band waere sie
   dicker als der Text. */
@media (max-width:720px){
  .hnwsin{padding:9px 38px 9px 14px}
  .hnwstx{justify-content:flex-start}
}
.usp{background:var(--sky-300);color:var(--navy-900)}
.uspin{position:relative;max-width:1440px;margin:0 auto;font:600 11.5px/1 var(--font-body);letter-spacing:.03em;display:flex;justify-content:center;align-items:center;gap:26px;padding:9px 170px 9px 16px}
[data-theme="dark"] .usp{background:var(--navy-900);color:var(--color-text-inverse-muted)}
.usp svg{color:var(--navy-800)}
[data-theme="dark"] .usp svg{color:var(--sky-300)}
.uspi{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* Die Versand-Zeile ist ein Link. Farbe und Groesse bleiben wie bei den
   uebrigen Zeilen, nur der Unterstrich kommt beim Ueberfahren dazu. */
.uspl{color:inherit;text-decoration:none}
.uspl:hover{color:inherit;text-decoration:underline}
.uspl:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
.uspd{width:4px;height:4px;border-radius:99px;background:rgba(17,28,53,.35);flex:none}
[data-theme="dark"] .uspd{background:rgba(182,196,221,.45)}
.uspslide{display:flex;align-items:center;gap:26px}

.lgsw{position:absolute;right:84px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:2px;height:28px;border-radius:var(--radius-pill);border:1.5px solid rgba(17,28,53,.35);background:rgba(255,255,255,.3);padding:2px;box-sizing:border-box}
.thsw{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;width:58px;height:28px;border-radius:var(--radius-pill);border:1.5px solid rgba(17,28,53,.35);background:rgba(255,255,255,.3);cursor:pointer;padding:2px 7px;box-sizing:border-box;justify-content:space-between;transition:background var(--transition-fast)}
.thsw:hover{background:rgba(255,255,255,.55)}
.lgsw:focus-visible,.thsw:focus-visible,.lgb:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .lgsw,[data-theme="dark"] .thsw{border-color:rgba(160,218,254,.5);background:rgba(160,218,254,.14)}
.lgb{border:0;background:transparent;color:var(--navy-700);font:800 10.5px/1 var(--font-body);letter-spacing:.05em;padding:0 8px;height:21px;border-radius:99px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.lgb:hover{color:var(--navy-950)}
[data-theme="dark"] .lgb{color:var(--color-text-inverse-muted)}
[data-theme="dark"] .lgb:hover{color:#fff}
.lgb.on{background:var(--navy-900);color:#fff;cursor:default}
[data-theme="dark"] .lgb.on{background:var(--sky-300);color:var(--navy-900)}
.thknob{position:absolute;left:2px;top:50%;margin-top:-10.5px;width:21px;height:21px;border-radius:99px;background:var(--navy-900);box-shadow:0 1px 3px rgba(16,19,28,.35);transition:transform var(--transition-base);display:grid;place-items:center;color:#fff}
[data-theme="dark"] .thknob{background:var(--sky-300);transform:translateX(29px);color:var(--navy-900)}
.thsun,.thmoon{width:13px;height:13px;color:var(--navy-800)}
[data-theme="dark"] .thsun,[data-theme="dark"] .thmoon{color:var(--navy-100)}
/* display:block gehoert hierher. Bis 08.09.2026 kam es zufaellig aus
   track-imf.css (.thk ist dort auch der Name der Herkunft-Chips) und traf den
   Umschalter auf jeder Seite mit - und zwar so, dass die Sonne am oberen
   Knopfrand klebte, mit einem Fragment am unteren (Referenzbild vom
   Pixelvergleich). Ohne jede Regel sitzt sie als inline-SVG 5px zu tief. Mit
   display:block hier zentriert das Grid des Knopfs (place-items:center) sie
   sauber - das ist der beabsichtigte Zustand. */
.thk{display:block;width:12px;height:12px}
.thk-moon{display:none}
[data-theme="dark"] .thk-sun{display:none}
[data-theme="dark"] .thk-moon{display:block}

/* ================= Header ================= */
.hdr{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
[data-theme="dark"] .hdr{background:rgba(11,19,38,.94)}
.hrow{display:flex;align-items:center;gap:26px;height:84px}
.hlogo{height:30px;width:auto;display:block}
.hnav{display:flex;gap:26px;flex:1;justify-content:center}
/* 921-1139: mit 26er Abstaenden lief die Zeile ueber den Rand (bei 1024 um
   28px, bei 921 um 79px), das Warenkorb-Symbol lag ausserhalb des
   Bildschirms (gefunden 29.09.2026). Darunter uebernimmt der Burger. */
@media (max-width:1139px){.hrow,.hnav{gap:14px}}
.hnav>a,.mnav>a{position:relative;font:600 14.5px/1 var(--font-body);color:var(--navy-800);text-decoration:none;padding:12px 2px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hnav>a::after,.mnav>a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:var(--navy-900);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.hnav>a:hover::after,.mnav>a:hover::after{transform:scaleX(1)}
.hnav>a:hover,.mnav>a:hover{color:var(--navy-950)}
[data-theme="dark"] .hnav>a,[data-theme="dark"] .mnav>a{color:var(--navy-100)}
[data-theme="dark"] .hnav>a::after,[data-theme="dark"] .mnav>a::after{background:var(--sky-300)}
.hnav>a:focus-visible,.mnav>a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}

/* ================= Mega-Menue ================= */
.mnav{position:relative;display:flex;align-items:center}
/* top:128px wie in der Referenz. Der Wert wirkt nicht gegen den Viewport:
   .hdr hat backdrop-filter und ist damit Bezugsrahmen fuer position:fixed.
   Gemessen: Referenz und Umsetzung setzen das Panel beide auf y=160. */
.mega{position:fixed;top:128px;left:50%;transform:translateX(-50%) translateY(8px);width:min(var(--container-max),calc(100vw - 32px));background:var(--color-surface);border:1px solid var(--hair);border-radius:16px;box-shadow:0 30px 60px -30px rgba(17,28,53,.25);opacity:0;visibility:hidden;transition:opacity var(--transition-base),transform var(--transition-base),visibility var(--transition-base);z-index:80}
[data-theme="dark"] .mega{border-color:rgba(160,218,254,.16)}
.mega::before{content:"";position:absolute;top:-36px;left:0;right:0;height:36px}
.mnav:hover .mega,.mnav:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%)}
.megagrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:22px}
.mcol{display:flex;flex-direction:column;gap:2px}
.mcat{display:flex;flex-direction:column;gap:8px;align-items:center;text-decoration:none;color:var(--color-text);padding:12px 8px 9px;border-radius:12px;text-align:center;transition:background var(--transition-fast)}
.mcat:hover{background:var(--sky-50);color:var(--color-text)}
[data-theme="dark"] .mcat:hover{background:rgba(160,218,254,.1)}
.mcat b{font:800 13.5px/1.2 var(--font-body)}
.mcimg{width:100%;height:78px;display:grid;grid-template-rows:100%;place-items:center;filter:drop-shadow(0 8px 10px rgba(17,28,53,.13))}
.mcimg img{width:100%;height:100%;object-fit:contain}
/* Marmorfoto statt KI-Illustration (tw_kat_bild, Bootstrap.php, 29.09.2026):
   ein deckendes Quadrat, ohne Schlagschatten - um ein Foto wirkt er wie ein
   zweiter Rahmen (DECISIONS.md, 13.09.2026). Erkannt am Bildpfad, die
   Illustrationen von Boxen, Zubehoer und Gutscheinen bleiben wie sie sind. */
.mcimg:has(img:is([src*="/image/product/"],[src*="/images/kategorie/"])){filter:none}
.mcimg img:is([src*="/image/product/"],[src*="/images/kategorie/"]){width:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm)}
.msub{display:block;font:500 12.5px/1.4 var(--font-body);color:var(--color-text-muted);text-decoration:none;padding:4px 10px;border-radius:7px;text-align:center}
.msub:hover{color:var(--color-link);background:var(--sky-50)}
[data-theme="dark"] .msub:hover{background:rgba(160,218,254,.08);color:var(--sky-300)}
/* Wie .mnall im Drawer ein Knopf statt eines dritten Textlinks - hier aber
   zentriert und eine Stufe leiser. Im Drawer ist immer nur eine Kategorie
   offen, im Mega-Menue stehen fuenf nebeneinander: in voller CTA-Farbe
   nehmen sie dem "Alle Produkte ansehen" darunter die Wirkung, das
   dieselbe Farbe traegt. Getoent bleibt es ein Knopf, ohne zu schreien. */
/* margin-top:auto statt 6px: die Spalten tragen unterschiedlich viele
   Unterkategorien, dadurch standen die Knoepfe auf fuenf verschiedenen
   Hoehen. Jetzt sitzen sie alle auf der Unterkante des Rasters. */
.mall{font:700 13px/1.3 var(--font-body);color:var(--navy-900);background:var(--sky-100);border-radius:var(--radius-pill);padding:9px 14px;margin-top:auto;text-align:center;white-space:nowrap}
.mall:hover{background:var(--sky-200);color:var(--navy-900)}
[data-theme="dark"] .mall{background:rgba(160,218,254,.14);color:var(--sky-300)}
[data-theme="dark"] .mall:hover{background:rgba(160,218,254,.22);color:var(--sky-300)}
.megafoot{display:flex;justify-content:center;padding:16px 12px 20px;border-top:1px solid var(--hair)}
.megafoot a{display:inline-flex;align-items:center;gap:9px;font:700 14px/1 var(--font-body);color:var(--color-cta-ink);background:var(--color-cta);text-decoration:none;padding:14px 24px;border-radius:var(--radius-pill);box-shadow:0 12px 26px -14px rgba(17,28,53,.4);transition:all var(--transition-fast)}
.megafoot a:hover{background:var(--color-cta-hover);color:var(--color-cta-ink);transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(17,28,53,.48)}
.megafoot a svg{width:16px;height:16px}

/* ================= Suche & Icon-Leiste ================= */
.hsearch{display:flex;align-items:center;gap:8px;flex:0 1 220px;min-width:140px;height:42px;padding:0 14px;border-radius:var(--radius-pill);border:1.5px solid var(--hair);background:var(--color-bg-alt);box-sizing:border-box;margin:0;position:relative}
.hsearch svg{width:16px;height:16px;color:var(--color-text-muted);flex:none}
.hsearch input{border:0;background:none;outline:none;width:100%;font:400 13.5px/1.2 var(--font-body);color:var(--color-ink)}
.hsearch input::placeholder{color:#8b99ad}
.hsearch:focus-within{border-color:var(--sky-400);background:var(--color-surface);box-shadow:var(--focus-ring)}
[data-theme="dark"] .hsearch{background:rgba(24,39,70,.55);border-color:var(--navy-700)}
[data-theme="dark"] .hsearch input{color:var(--color-text)}
.hsearch-submit{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;background:none;flex:none;cursor:pointer;border-radius:var(--radius-pill)}
.hsearch-submit:hover svg{color:var(--color-text)}
.hsearch-submit:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* js/global.js (NOVA-Core) haengt input[name="qs"] automatisch an
   typeahead.js, das den Input in einen zweiten Wrapper mit Ghost-Feld
   (.tt-hint) packt und inline display:inline-block setzt - ohne die
   Breite hier zu erzwingen, faellt das Feld auf seine Inhaltsbreite
   zurueck. Muster wie in konto.css/kasse.css fuer dieselbe Bibliothek. */
.hsearch .twitter-typeahead{flex:1;min-width:0;display:block!important}
.hsearch .tt-hint{color:var(--color-text-muted);opacity:.7}
.hsearch .tt-menu{position:absolute;left:0;right:0;margin-top:10px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-card-hover);overflow:hidden;z-index:70}
.hsearch .tt-dataset{padding:6px}
.hsearch .tt-suggestion{padding:9px 12px;border-radius:var(--radius-xs);font:400 13.5px/1.3 var(--font-body);color:var(--color-text);cursor:pointer}
.hsearch .tt-suggestion+.tt-suggestion{margin-top:2px}
.hsearch .tt-suggestion:hover,.hsearch .tt-suggestion.tt-cursor{background:var(--color-bg-alt)}
.hsearch .tt-suggestion a{display:flex;align-items:center;justify-content:space-between;gap:12px;color:inherit;text-decoration:none}
.hsearch .tt-suggestion .badge{background:var(--color-bg-alt)!important;color:var(--color-text-muted)!important;font:600 11px/1 var(--font-body)!important;border-radius:var(--radius-pill)!important;padding:4px 8px!important}
[data-theme="dark"] .hsearch .tt-suggestion .badge{background:var(--navy-700)!important;color:var(--color-text)!important}
/* Den geoeffneten Zustand zeigt die Referenz nicht - das Feld klappt deshalb
   als eigene Zeile unter dem Header auf, statt sich in die Kopfzeile zu
   quetschen. */
.topstick[data-search="open"] .hsearch{display:flex;position:absolute;left:16px;right:16px;top:100%;flex:none;max-width:none;background:var(--color-surface);z-index:60}
.hicons{display:flex;gap:4px;align-items:center}
.icbtn{width:42px;height:42px;border-radius:var(--radius-pill);display:grid;place-items:center;color:var(--navy-800);background:transparent;border:none;cursor:pointer;position:relative;transition:background var(--transition-fast);text-decoration:none;padding:0}
.icbtn:hover{background:var(--sky-50);color:var(--navy-800)}
.icbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .icbtn{color:var(--navy-100)}
[data-theme="dark"] .icbtn:hover{background:rgba(160,218,254,.12);color:var(--navy-100)}
.cartn{position:absolute;top:2px;right:0;min-width:17px;height:17px;border-radius:var(--radius-pill);background:var(--color-sale);color:#fff;font:800 10.5px/17px var(--font-body);text-align:center;padding:0 4px}
.burger{display:none}
/* Unter 1180 px ersetzt ein Icon das Suchfeld. Reihenfolge ist hier die ganze
   Logik: nach .icbtn (sonst gewinnt dessen display:grid) und vor der Media
   Query (sonst gewinnt das display:none). Die Referenz loest dieselbe Klemme
   mit !important, weil ihr Button einen inline-style traegt. */
.icbtn-suche{display:none}
@media (max-width:1180px){.hsearch{display:none}.icbtn-suche{display:grid}}

/* ================= Mobile-Drawer ================= */
.mobscrim{position:absolute;top:0;right:0;width:100vw;height:100vh;background:rgba(11,19,38,.5);opacity:0;visibility:hidden;transition:all .25s ease;z-index:96;border:0;padding:0}
.topstick[data-mnav="open"] .mobscrim{opacity:1;visibility:visible}
/* visibility zusaetzlich zur Referenz: sie laesst den geschlossenen Drawer
   nur wegschieben, seine Links bleiben tabbar. Mit in der transition-Liste,
   sonst springt er beim Schliessen weg statt zu gleiten. */
.mobnav{position:absolute;top:0;left:0;width:min(360px,92vw);height:100vh;background:var(--color-surface);z-index:97;box-shadow:16px 0 40px -12px rgba(11,19,38,.35);transform:translateX(-110%);transition:transform .3s ease,visibility .3s;display:flex;flex-direction:column;overflow:hidden;visibility:hidden}
.topstick[data-mnav="open"] .mobnav{transform:none;visibility:visible}
.mnhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hair);flex-shrink:0}
.mnhead a{display:block}
.mnhead img{height:22px;display:block}
.mnscroll{flex:1;overflow-y:auto;padding:10px 16px 26px}
/* Jeder Menuepunkt ist eine eigene Flaeche statt einer Zeile zwischen zwei
   Haarlinien. Untereinander gereihte Textzeilen lasen sich als ein Block;
   als abgesetzte Karten ist auf einen Blick erkennbar, was ein einzelner
   Punkt ist und wo er aufhoert. */
.mncat{background:var(--color-surface-2);border:1px solid var(--hair);border-radius:12px;margin-bottom:8px;overflow:hidden}
.mncat summary{display:flex;align-items:center;gap:12px;font:800 15px/1.2 var(--font-body);color:var(--color-text);padding:12px 10px;cursor:pointer;list-style:none;border-radius:11px}
.mncat summary::-webkit-details-marker{display:none}
.mncat summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.mncimg{width:52px;height:40px;display:grid;grid-template-rows:100%;place-items:center;flex-shrink:0}
.mncimg img{width:100%;height:100%;object-fit:contain}
.mncimg img:is([src*="/image/product/"],[src*="/images/kategorie/"]){width:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-xs)}
.mnchev{width:16px;height:16px;margin-left:auto;color:var(--color-text-muted);transition:transform .2s}
.mncat[open] .mnchev{transform:rotate(180deg)}
.mncat a{display:block;font:500 14px/1.4 var(--font-body);color:var(--color-text-muted);text-decoration:none;padding:8px 12px 8px 74px;border-radius:8px}
.mncat a:hover{color:var(--color-link);background:var(--sky-50)}
.mnflat{display:flex;align-items:center;gap:12px;font:800 15px/1.2 var(--font-body);color:var(--color-text);padding:12px 10px;text-decoration:none;background:var(--color-surface-2);border:1px solid var(--hair);border-radius:12px;margin-bottom:8px}
.mnflat:hover{background:var(--sky-50);color:var(--color-text)}
/* CTA-Flaeche statt der gedaempften fuer Schnellzugriffe auf erster Ebene,
   die keine Kategorie sind (aktuell: Track deinen IMF). Der Schnellzugriff
   aufs ganze Sortiment ("Alle Artikel") ist seit der Buendelung unter "Shop"
   Teil von dessen Aufklappmenue, siehe .mncat a.mnall. Das Icon ersetzt die
   Bildscheibe der Kategorien darunter. */
.mnalle{background:var(--color-cta);color:var(--color-cta-ink);border-color:transparent;margin-bottom:14px}
.mnalle:hover{background:var(--color-cta-hover);color:var(--color-cta-ink)}
[data-theme="dark"] .mnalle{color:var(--color-cta-ink)}
[data-theme="dark"] .mnalle:hover{background:var(--color-cta-hover);color:var(--color-cta-ink)}
.mnalleic{width:24px;height:24px;flex-shrink:0;margin-left:14px}
.mnalle .mnchev{margin-left:auto}
[data-theme="dark"] .mnflat:hover{background:rgba(160,218,254,.08)}
/* "True Steaks anzeigen" war ein Textlink zwischen zwei Textlinks und ging
   als Abschluss der Liste unter. Als CTA-Knopf ist er das, was er sein
   soll: der Weg in die Kategorie. */
.mncat a.mnall{display:inline-flex;align-items:center;gap:6px;font:700 13.5px/1 var(--font-body);color:var(--color-cta-ink);background:var(--color-cta);border-radius:var(--radius-pill);padding:10px 16px;margin:6px 0 10px 74px;width:auto}
.mncat a.mnall:hover{background:var(--color-cta-hover);color:var(--color-cta-ink)}
[data-theme="dark"] .mncat a.mnall{color:var(--color-text)}
.mnlinks{display:flex;flex-direction:column;margin-top:14px;gap:8px}
.mnlinks a{display:flex;align-items:center;gap:10px;font:600 14.5px/1.3 var(--font-body);color:var(--color-text);text-decoration:none;padding:12px 10px;background:var(--color-surface-2);border:1px solid var(--hair);border-radius:12px}
.mnlinks svg{width:17px;height:17px;color:var(--navy-700)}
[data-theme="dark"] .mnlinks svg{color:var(--sky-300)}
.mntag{font-family:var(--font-accent);font-size:16px;color:var(--sky-700);text-align:center;margin:26px 0 0}
[data-theme="dark"] .mntag{color:var(--sky-300)}

/* ================= Footer ================= */
.foot{position:relative;z-index:0;color:var(--color-text-inverse);margin-top:96px}
.foot::before{content:"";position:absolute;inset:0;background:var(--navy-900);z-index:-1}
[data-theme="dark"] .foot::before{box-shadow:inset 0 1px 0 rgba(160,218,254,.16)}
/* Newsletter-Spalte. Der Schriftzug traegt die Ueberschrift, deshalb kein
   eigenes <h3> - sonst stuende die Zeile doppelt. */
.fnlcol{display:flex;flex-direction:column}
.fnlcol p{font:400 14px/1.7 var(--font-body);color:var(--color-text-inverse-muted);margin:0 0 14px}
/* Nicht in der Referenz: Pflichthinweis aus NOVAs Newsletter-Block. Kleiner
   als der Werbetext, damit die Bildhierarchie der Referenz bleibt. */
/* .fnlcol p ist spezifischer und wuerde sonst gewinnen. */
.fnlcol .fnlnote{font:400 12px/1.6 var(--font-body);color:rgba(182,196,221,.7);margin:10px 0 0}
/* .fcols a macht Linkspalten-Eintraege zu Bloecken. Der Datenschutz-Link im
   Hinweis steht mitten im Satz und muss inline bleiben. */
.fnlcol .fnlnote a{color:var(--sky-300);display:inline;padding:0;font-size:inherit;text-decoration:underline}
/* max-width:100% statt eines festen Werts: die Pille darf die Spalte nie
   aufweiten, sonst rutscht das ganze Vier-Spalten-Raster. */
.fnlform{display:flex;flex-direction:column;gap:10px;margin:0;max-width:100%}
/* Eine Pille statt zweier. Das weisse .input aus der Referenz sitzt dort in
   einem breiten Band; in der schmalen Navy-Spalte reisst es ein Loch, deshalb
   hier durchscheinendes Weiss auf dem Footer-Grund. Der Rahmen wandert auf die
   Huelle, damit Feld und Knopf einen gemeinsamen Fokusring bekommen. */
.fnlfield{display:flex;align-items:center;background:rgba(255,255,255,.07);
  border:1px solid rgba(182,196,221,.24);border-radius:var(--radius-pill);
  padding:4px;transition:border-color var(--transition-fast)}
.fnlfield:focus-within{border-color:var(--sky-400);box-shadow:var(--focus-ring)}
/* width:0 zusaetzlich zu min-width:0 - ein <input> bringt ueber sein
   size-Attribut eine Wunschbreite von rund 225px mit, und die schiebt sonst
   die ganze Spalte auf. flex:1 holt die Breite wieder zurueck. */
.fnlfield .input{flex:1;width:0;min-width:0;background:transparent;border:none;padding:9px 8px 9px 14px;
  font-size:14px;color:var(--color-text-inverse)}
.fnlfield .input::placeholder{color:rgba(182,196,221,.65)}
.fnlfield .input:focus{box-shadow:none;border-color:transparent}
/* Chrome faerbt ausgefuellte Felder hart hellblau ein und macht die Pille
   damit kaputt. Ueberdecken geht nur ueber einen Inset-Schatten in der
   Footer-Farbe; transparent laesst Chrome hier nicht zu. */
.fnlfield .input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--navy-900) inset;
  -webkit-text-fill-color:var(--color-text-inverse)}
.fnlfield .btn{flex:none;font:700 13.5px/1 var(--font-body);padding:11px 20px;box-shadow:none}
.input{font:400 14.5px/1.4 var(--font-body);padding:14px 18px;border-radius:var(--radius-pill);border:1.5px solid transparent;background:var(--color-surface);color:var(--color-ink);flex:1;min-width:180px;box-sizing:border-box}
.input::placeholder{color:#8b99ad}
.input:focus{outline:none;border-color:var(--sky-400);box-shadow:var(--focus-ring)}
/* Die Newsletter-Spalte traegt Feld und Knopf nebeneinander und bekommt
   deshalb mehr Anteil als eine reine Linkliste. Achtung, die Breiten haengen
   an der Position: Spalte 3 ist der Newsletter, 4 die Kontaktspalte. Kommt in
   der Wawi eine dritte Linkgruppen-Box dazu, rutscht beides und die Werte
   muessen mit. */
.fcols{display:grid;grid-template-columns:1fr 1fr 1.4fr 1.2fr;gap:28px;padding:44px 0 34px}
.fh{font:700 13px/1 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:#fff;margin:0 0 14px}
.fcols a{display:block;color:var(--color-text-inverse-muted);text-decoration:none;font-size:14px;padding:5px 0}
.fcols a:hover{color:var(--sky-300)}
/* Ghost-Knopf nach DESIGN_SYSTEM: transparent mit Inset-Rahmen. Auf dem
   Navy des Footers traegt der Rahmen das Himmelblau, nicht --color-border -
   das ist fuer helle Flaechen gedacht und verschwaende hier. */
.fcols a.fbtn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 16px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1.5px rgba(160,218,254,.4);color:var(--sky-300);font-weight:700;transition:background var(--transition-fast)}
.fcols a.fbtn:hover{background:rgba(160,218,254,.12);color:var(--sky-300)}
/* Logo in der vierten Fusszeilenspalte. Die Datei ist weisse Schrift mit
   schwarzer Kontur auf Transparenz - sie traegt auf dem dunklen Footer
   ohne eigene Nachtfassung. */
.flogo{width:186px;height:auto;display:block;margin:0 0 14px}
.fcontact{font:400 14px/1.7 var(--font-body);color:var(--color-text-inverse-muted);margin:12px 0 0}
.fcontact a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.fcontact a:hover{color:var(--sky-300)}
.ftag{font-family:var(--font-accent);font-size:17px;color:var(--sky-300);margin:12px 0 0}
.socrow{display:flex;gap:6px;margin-top:14px}
.socbtn{width:36px;height:36px;border:0;background:transparent;border-radius:9px;display:grid;place-items:center;color:var(--color-text-inverse-muted)}
.socbtn:hover{background:rgba(160,218,254,.15);color:var(--sky-300)}
.socbtn svg{width:19px;height:19px;display:block}
.payrow{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 22px}
.payl{height:26px;width:auto;display:block}
/* Die Umschaltung aus base.css traegt hier nicht: `.payl{display:block}` steht
   spaeter im Buendel und gewinnt gegen `.darkonly{display:none}` bei gleicher
   Spezifitaet. Deshalb die Regeln hier noch einmal, klassengenau. */
.payl.darkonly{display:none}
[data-theme="dark"] .payl.darkonly{display:block}
[data-theme="dark"] .payl.lightonly{display:none}
.payl-txt{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 10px;border-radius:6px;background:var(--color-surface);border:1px solid var(--color-border);box-sizing:border-box;font:700 9.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--navy-700)}
/* Wie die Bildkacheln: dunkle Flaeche, heller Text - sonst leuchtet das Badge
   als einziges Weiss aus der Reihe heraus. */
[data-theme="dark"] .payl-txt{background:var(--color-surface);border-color:var(--color-surface-2);color:#dfe9f8}
.legal{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 28px;border-top:1px solid rgba(182,196,221,.18);font-size:12.5px;color:var(--color-text-inverse-muted);flex-wrap:wrap}
.legal a{color:var(--color-text-inverse-muted)}
.taxfoot{font:400 11.5px/1.5 var(--font-body);color:rgba(182,196,221,.6);padding:0 0 26px}
.taxfoot a{color:rgba(182,196,221,.6)}

/* ================= Buttons (Teilmenge fuer Newsletter + Mega-Footer) ================= */
.foot .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}
.foot .btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.foot .btn-pri{background:var(--color-cta);color:var(--color-cta-ink);box-shadow:0 12px 26px -14px rgba(17,28,53,.4)}
.foot .btn-pri:hover{background:var(--color-cta-hover);color:var(--color-cta-ink);transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(17,28,53,.48)}

/* ================= Fokus =================
 * Die restlichen eigenen Links. Die Referenz laesst ihnen den Browser-Default,
 * NOVA ersetzt den aber durch ein goldenes outline, das nicht zum Tokensatz
 * gehoert - und README verlangt --focus-ring ueberall. Radius nur dort, wo das
 * Element keinen eigenen hat, sonst springt die Form beim Fokussieren.
 */
.mcat:focus-visible,.msub:focus-visible,.megafoot a:focus-visible,.mnflat:focus-visible,
.mncat a:focus-visible,.mnlinks a:focus-visible,.socbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hrow>a:focus-visible,.mnhead a:focus-visible,.fcols a:focus-visible,.legal a:focus-visible,
.taxfoot a:focus-visible,.fnlnote a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}

/* ================= Responsive ================= */
/* 900 statt der 1024 aus dem README-Abschnitt "Responsive": das dortige
   "3er-Raster -> 2er" meint die Produktraster (.g3), fuer .fcols nennt die
   Referenz 900. Bei Widerspruch gilt die Referenz. */
@media (max-width:900px){
.fcols{grid-template-columns:1fr 1fr}
}
/* Zwischen 921 und 1080 stehen die USPs noch in einer Reihe, passen aber
   neben Sprach- und Themenschalter nicht mehr alle hin. Darunter uebernimmt
   ohnehin der Zykel und zeigt wieder alle fuenf (Wunschtag seit 02.10.2026). */
@media (min-width:1081px) and (max-width:1320px){
.uspslide .uspi:nth-child(9),.uspslide .uspd:nth-child(8){display:none}
}
@media (min-width:921px) and (max-width:1080px){
.uspslide .uspi:nth-child(9),.uspslide .uspd:nth-child(8),
.uspslide .uspi:nth-child(3),.uspslide .uspd:nth-child(2){display:none}
}
@media (max-width:920px){
.shell{padding:0 20px}
.hnav{display:none}
.burger{display:grid}
.mega{display:none}
.hrow{position:relative;justify-content:center;gap:12px;height:64px}
.hlogo{height:24px}
.burger{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
.icbtn-suche{position:absolute;left:56px;top:50%;transform:translateY(-50%);display:grid}
.hrow>a:first-child{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
.hicons{margin-left:auto}
.uspin{font-size:11px;height:36px;padding:0 82px 0 96px}
.uspslide{position:relative;align-self:stretch;flex:1;max-width:560px;overflow:hidden;gap:0}
.uspslide .uspd{display:none}
.uspslide .uspi{position:absolute;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%);animation:uspcyc 20s infinite}
.uspslide .uspi:nth-child(3){animation-delay:4s}
.uspslide .uspi:nth-child(5){animation-delay:8s}
.uspslide .uspi:nth-child(7){animation-delay:12s}
.uspslide .uspi:nth-child(9){animation-delay:16s}
.lgsw{right:auto;left:14px}
}
@keyframes uspcyc{0%{opacity:0;transform:translate(-50%,calc(-50% + 11px))}2.4%,17.6%{opacity:1;transform:translate(-50%,-50%)}20%,100%{opacity:0;transform:translate(-50%,calc(-50% - 11px))}}
@media (prefers-reduced-motion:reduce){.uspslide .uspi{animation:none}.uspslide .uspi:first-child{opacity:1}}
@media (max-width:640px){
.shell{padding:0 16px}
.fcols{grid-template-columns:1fr;row-gap:32px}
}

/* Kategorien ohne Sortiment: gedaempft und nicht anklickbar. Graustufe statt
   Deckkraft, damit das Kachelbild wirklich zurueckfaellt und der Text seine
   Tokenfarbe behaelt - Deckkraft wuerde beides gleichmaessig aufhellen und
   den Kontrast des Textes mitnehmen. */
/* Graustufe auf den ganzen Eintrag statt nur aufs Bild: Sonst steht ein
   farbiges Kachelbild neben gedaempftem Text und der Eintrag wirkt halb
   aktiv. So ist der Unterschied zu den klickbaren Spalten auf einen Blick da. */
/* Graustufe nur aufs Bild: auf dem ganzen Eintrag faerbte sie im Mobil-Menue
   auch Flaeche und Rand grau (#333 statt Navy im Dunkelmodus, 29.09.2026). */
.mbald img{filter:grayscale(1)}
.mbald,.mbald .mcat,.mbald .mcat b{color:var(--color-text-muted);cursor:default}
.mbaldtag{display:inline-block;align-self:center;font:700 10.5px/1 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:5px 10px;margin-top:6px;white-space:nowrap}
.mnflat.mbald{cursor:default}
.mnflat.mbald .mbaldtag{margin-top:0;margin-left:auto}