/* ============================================================
   header.css — Mega-Menü + Service-Links (Paket P1)
   Baseline: reines CSS (Hover + :focus-within für Tastatur).
   Nutzt die Design-Tokens aus site.css (kein eigener Token-Block).
   P3 (Design-System) finalisiert Interaktion/A11y in nav.js.
   Eigene Komponentendatei -> kollisionsfrei zu site.css/ui.css.
   ============================================================ */

/* ---- P2 (Marketing-Audit 2026-07-05): Beratungs-Topbar (tel:) + sichtbares Suchfeld ---- */
.topbar{border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;padding-block:.3rem}
.topbar-hint{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-phone{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted-2);font-weight:var(--fw-medium);white-space:nowrap;transition:.16s}
.topbar-phone:hover{color:#fff}
.topbar-phone svg{color:var(--red-text);flex:none}
.topbar-phone b{color:#fff;font-weight:var(--fw-bold)}
.topbar-phone .tb-hours{color:var(--muted)}
/* Header-Overflow-Audit 2026-07-18 (header-css-F3): Sprach-Umschalter wohnt ab 1301 px in der
   Topbar (Block ≥1301 unten) — margin-left:auto schiebt Telefon+Umschalter als rechte Gruppe,
   auch wenn der Umschalter (<=1300 px) fehlt (ersetzt space-between-Verhalten identisch). */
.topbar-phone{margin-left:auto}
/* Selektor bewusst .topbar-präfixiert (0,2,0): i18n.css (.lang-switch, 0,1,0) lädt NACH header.css
   (Link im Header-Partial) — ein nackter .lang-switch--topbar-Selektor verlöre jedes
   Spezifitäts-Patt gegen i18n.css und der Umschalter stünde <1301 px doppelt im Layout. */
.topbar .lang-switch{display:none}
@media (max-width:720px){
  .topbar-hint{display:none}
  .topbar .container{justify-content:center}
  .topbar-phone{margin-left:0}   /* zentriert wie vor F3 (margin-left:auto würde rechts klemmen) */
  .topbar-phone .tb-hours{display:none}
}

/* Sichtbares Suchfeld (Button, öffnet Instant-Search-Overlay). Klappt schmal auf Icon zusammen. */
.header-search{
  display:inline-flex;align-items:center;gap:.55rem;height:44px;max-width:270px;
  /* Shrinkfaehig statt starr: min-width:44px = das reine Lupen-Tap-Ziel, flex:0 1 auto
     laesst die Suche in den verbleibenden Zeilen-Slack schrumpfen, bevor sie irgendein
     Nachbar-Element (Warenkorb!) aus der Leiste draengt. */
  flex:0 1 auto;min-width:44px;
  padding:0 .95rem;border-radius:var(--r);border:1px solid var(--line-2);
  background:rgba(255,255,255,.05);color:var(--muted-2);cursor:text;
  font:inherit;font-size:var(--fs-base);text-align:left;transition:.18s;
}
.header-search:hover{border-color:var(--steel);background:rgba(255,255,255,.09);color:#fff}
.header-search svg{width:18px;height:18px;flex:none}
.header-search .hs-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ab hier zu wenig Platz -> nur noch das Icon (bleibt ein 44px-Touch-Ziel, öffnet dieselbe Suche).
   Deep-Audit 2026-07-06 (header-css-F1): das Kollaps-Band muss gegen die (statisch
   laengeren) EN-Labels dimensioniert sein — die expandierte Suche (~270px) plus Voll-Nav
   sprengte auf EN sonst bei 1301–1357 UND 1661–1784 den Container (Warenkorb weggeschnitten,
   ohne Burger >=1301 kein Ersatzweg). Icon-only daher bis 1800px; darueber ist genug Platz
   und die Suche ist zusaetzlich shrinkfaehig (flex:0 1 auto oben). Per Font-Metrik-Sweep
   (DE+EN, 1301–2600px) auf 0 Overflow-Baender verifiziert. */
@media (max-width:1180px), (min-width:1301px) and (max-width:1800px){
  .header-search{max-width:none;width:44px;padding:0;justify-content:center}
  .header-search .hs-text{display:none}
}

/* ---- Hauptnavigation: Items + Top-Links ---- */
.nav-links{align-items:center}
.nav-item{position:static;display:flex;align-items:center}
.nav-item.has-mega{position:relative}   /* Mega als inhaltsgroße Karte UNTER dem Punkt verankern */
.nav-top{display:inline-flex;align-items:center;gap:.28rem;white-space:nowrap;min-height:44px}
.site-header .brand{min-height:44px}
.nav-top .caret{opacity:.6;transition:transform .2s var(--ease, ease),opacity .2s}
.has-mega:hover .nav-top .caret,
.has-mega:focus-within .nav-top .caret{transform:rotate(180deg);opacity:1}
.has-mega:hover > .nav-top,
.has-mega:focus-within > .nav-top{color:#fff;background:rgba(255,255,255,.06)}

/* ---- Mega-Panel (Desktop): inhaltsgroße, schwebende Karte unter dem Punkt ----
   Früher volle Headerbreite + festes 3-Spalten-Raster → bei wenig Einträgen ein
   großes, halbleeres Rechteck. Jetzt: Karte nur so breit wie ihr Inhalt
   (auto-fit-Spalten), direkt unter dem Punkt verankert; nav.js klappt sie bei
   rechten Punkten nach links (.mega-right), damit nichts über den Rand läuft. */
.mega{
  position:absolute;top:100%;left:0;right:auto;
  width:max-content;max-width:min(760px,92vw);
  padding-top:12px;                       /* hoverbare Brücke Punkt↔Karte (kein Dead-Zone) */
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  pointer-events:none;z-index:60;
}
.mega.mega-right{left:auto;right:0}        /* nav.js: rechte Punkte öffnen nach links */
.has-mega:hover > .mega,
.has-mega:focus-within > .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}

.site-header .mega-inner{
  width:auto;max-width:none;margin:0;      /* .container-Zentrierung/max-width aufheben */
  display:flex;flex-direction:column;gap:.85rem;
  padding:1.35rem 1.5rem;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.mega-cols{display:flex;flex-wrap:wrap;gap:1.1rem 1.8rem;align-items:flex-start}
.mega-col{flex:0 1 auto;min-width:158px;max-width:250px}
.mega-col .mega-title{  /* Visual-Audit 2026-07-06 (#3): Markup ist <p class="mega-title"> -> h4-Qualifier entfernt, sonst ungestylt */
  font-family:'Sora';font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--muted);margin:0 0 .7rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.12rem}
.mega-col a{
  display:block;padding:.42rem .6rem;border-radius:8px;white-space:nowrap;
  color:var(--muted-2);font-size:var(--fs-base);font-weight:var(--fw-medium);transition:.16s;
}
.mega-col a:hover,.mega-col a:focus-visible{color:#fff;background:rgba(255,255,255,.06)}
.mega-all{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;
  margin-top:.1rem;padding:.5rem .6rem;border-radius:9px;
  color:var(--red);font-weight:var(--fw-semibold);font-size:var(--fs-ms);transition:.16s;
}
.mega-all:hover{background:rgba(226,0,26,.12)}

/* ---- Mega-Panel HELL (Feedback Ludwig 2026-07-11) ----------------------------
   Bei der Site-Aufhellung 2026-07-05 wurde das Mega-Panel übersehen: es erbt die
   im .site-header lokal auf DUNKEL re-scopten Tokens (--panel=#262c39 …) und blieb
   dadurch dunkel. Hier explizite Hell-Werte (= globale Light-Tokens), bewusst NUR
   im Desktop-Band ≥1301px — darunter rendert dieselbe Struktur im dunklen
   Off-Canvas-Drawer (.nav-links.open) und muss dunkel bleiben. Kontraste:
   Links #3d4654 auf #fff ≈ 9:1, Titel #5a636f ≈ 6,4:1 (beide ≥ AA). */
@media (min-width:1301px){
  .site-header .mega-inner{
    background:#ffffff;
    border-color:#e3e7ec;
    box-shadow:0 18px 44px rgba(16,24,40,.16);
  }
  .site-header .mega-inner .mega-title{color:#5a636f;border-bottom-color:#e3e7ec}
  .site-header .mega-inner .mega-col a{color:#3d4654}
  .site-header .mega-inner .mega-col a:hover,
  .site-header .mega-inner .mega-col a:focus-visible{color:#10131a;background:#e9edf2}
  .site-header .mega-inner .mega-all{color:#c00017}       /* Rot-Ton mit ≥AA auf hell */
  .site-header .mega-inner .mega-all:hover{background:rgba(226,0,26,.08)}
}

/* ---- Service-Utility-Links (rechts, vor den Icons) ---- */
/* Basis-Optik. Die Sichtbarkeit steuern ausschließlich die Breiten-Blocks unten:
   display:none bei <=1300px (Drawer, s.u.) UND bei >=1301px (horizontale Leiste, s.u.) —
   zusammen lückenlos, d. h. .nav-utility bleibt aktuell auf JEDER Breite aus der Leiste
   (Links via Footer/Drawer). Die Links (Hallenplaner/Service/Kontakt) ließen sich bei
   keiner Breite overflowfrei einblenden (s. header-css-F2). */
.nav-utility{display:flex;align-items:center;gap:.2rem}
.nav-utility a{
  padding:.45rem .65rem;border-radius:8px;color:var(--muted);font-size:var(--fs-ms);font-weight:var(--fw-medium);transition:.18s;
}
.nav-utility a:hover{color:#fff;background:rgba(255,255,255,.05)}

/* ---- Tastatur-Fokus deutlich sichtbar (A11y-Baseline) ---- */
.nav-top:focus-visible,.mega-col a:focus-visible,.nav-utility a:focus-visible,.icon-btn:focus-visible{
  outline:3px solid var(--red);outline-offset:2px;   /* Visual-Audit 2026-07-06 (#55): 2px->3px, einheitlich mit globaler Fokus-Baseline */
}

/* ============================================================
   P35 — Header-Responsive (konsolidiert). Mega-Menü-Bedienbarkeit + Overflow-Fix.
   Befund: 8 lange Kategorie-Labels (~1144 px) + Wortmarken-Logo (8,7:1) + Tools
   passen nicht in den 1240-px-Content-Container → die nav-tools liefen bei JEDER
   Desktop-Breite off-screen (durch body{overflow-x:hidden} maskiert; bei 1440 px
   standen Suche/Warenkorb bei x≈1958). Konsolidierte Lösung (ersetzt die
   widersprüchlichen Teil-Pässe P34/„Desktop kompakt"):
     • Header-Leiste nutzt die VOLLE Viewport-Breite (nicht maxw 1240).
     • Tools nie stauchen (Konto-Icon kollabierte sonst auf 0 px) + Tap-Ziel ≥44 px.
     • Bis 1300 px = Off-Canvas-Drawer als Primärnavigation (alle Kategorien +
       Subkategorien + Service + Konto inline, kein Overflow).
     • Ab 1301 px = horizontale Leiste: Logo gekappt, Nav gestrafft, redundantes
       „Sortiment" ausgeblendet; Service-Utility bleibt aus der Leiste (kein Platz;
       Links via Footer/Drawer — s. header-css-F2).
   ============================================================ */

/* Header-Leiste über die VOLLE Breite (maxw 1240 würde sonst die Tools wegkappen). */
.site-header .container.nav{width:calc(100% - var(--gutter)*2);max-width:none}

/* Tools: feste Größe (kein Flex-Shrink → sonst Konto-Icon → 0 px) + Tap-Ziel ≥44 px.
   Ausnahme ≥1801 px: F3 (unten) erlaubt dort kontrolliertes Shrinken NUR über die Suche —
   die Icons bleiben durch flex:0 0 auto + min-width-Floor der Suche kollaps-sicher. */
.site-header .nav-tools{flex:0 0 auto}
.site-header .nav-tools .icon-btn{flex:0 0 auto;width:44px;height:44px}
/* Icon-SVGs einheitlich dimensionieren: ohne explizite Größe rendert die Lupe im
   <button> bei ~30 px, Konto/Warenkorb im <a> bei ~42 px → Lupe wirkte kleiner +
   dünner. Eine feste Größe gleicht Icon UND Strichstärke über alle Tool-Icons an. */
.site-header .nav-tools .icon-btn > svg{width:38px;height:38px}

.nav-drawer-extra{display:none}

/* ---- Off-Canvas-Drawer als Primärnavigation bis 1300 px ----
   site.js togglet .nav-links.open; Mega-Inhalte werden inline sichtbar. */
@media (max-width:1300px){
  .nav-links{display:none}            /* überschreibt site.css (zeigt sie >720) */
  .burger{display:grid}               /* überschreibt site.css (.burger{display:none}) */
  .nav-utility{display:none}          /* Service-Links wandern in den Drawer/Footer */
  .nav{gap:.5rem}
  /* Visual-Audit 2026-07-06 (#2/#48): Nav-Container statisch -> Drawer verankert an .site-header
     (position:sticky) statt am eingerückten Container -> randbündig + fluchtet exakt unter dem Header. */
  .site-header .container.nav{position:static}
  .nav-spacer{display:none}
  .nav-tools{margin-left:auto;gap:.4rem}
  .site-header .brand{flex:0 1 auto;min-width:0}
  /* Logo proportional, überläuft nie (überschreibt brand.html-!important via Spezifität) */
  .site-header .brand .brand-logo{height:auto!important;width:auto!important;max-width:100%!important}

  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:.1rem;
    position:absolute;left:0;right:0;top:100%;z-index:55;/* Visual-Audit 2026-07-06 (#2/#48): unter dem Header verankert (tracked Sticky+Topbar), kein 38px-Overlap bei scrollY=0 */
    max-height:calc(100dvh - 72px);overflow:auto;
    margin:0;padding:.8rem var(--gutter) 1.4rem;
    background:var(--ink-2);
    border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
  }
  .nav-links.open .nav-item{display:block}
  .nav-links.open .nav-top{justify-content:space-between;padding:.7rem .4rem;font-size:var(--fs-md)}
  /* Marketing-Audit 2026-07-05 (P2): Drawer als Accordion — Untergruppen eingeklappt, per Tipp
     auf die Kategorie (nav.js togglet .acc-open) auf. Kein 30+-Link-Wust mehr auf einmal. */
  .nav-links.open .mega{
    position:static;overflow:hidden;max-height:0;opacity:0;visibility:hidden;pointer-events:none;
    transform:none;background:none;border:none;box-shadow:none;width:auto;max-width:none;padding-top:0;
    transition:max-height .28s var(--ease,ease),opacity .2s;
  }
  .nav-links.open .nav-item.has-mega.acc-open > .mega{
    max-height:1400px;opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav-links.open .nav-item.has-mega > .nav-top .caret{transition:transform .2s}
  .nav-links.open .nav-item.has-mega.acc-open > .nav-top .caret{transform:rotate(180deg)}
  /* Karten-Optik (Hintergrund/Rahmen/Schatten) im Drawer wieder neutralisieren. */
  .site-header .nav-links.open .mega-inner{
    display:block;padding:0 0 .6rem .4rem;
    background:none;border:none;box-shadow:none;border-radius:0;margin:0;
  }
  .site-header .nav-links.open .mega-cols{display:block}   /* Spalten gestapelt im Drawer */
  .nav-links.open .mega-col{margin:.4rem 0}
  .nav-links.open .mega-col .mega-title{margin-bottom:.3rem}
  /* Mobile-Audit 2026-07-11 (P3-6): Drawer-Unterlinks waren 250×35px (unter 44). Die Zeile ist
     nur ~250px breit; über padding-block auf eine komfortablere Touch-Höhe bringen. */
  .nav-links.open .mega-col a{padding:.6rem .5rem;font-size:var(--fs-base)}
  .nav-links.open .mega-all{margin:.4rem 0 .2rem}

  /* Service-Utility + Konto im Drawer (im schmalen Modus sonst nicht erreichbar). */
  .nav-links.open .nav-drawer-extra{
    display:flex;flex-wrap:wrap;gap:.2rem;margin-top:.7rem;padding-top:.8rem;border-top:1px solid var(--line);
  }
  .nav-links.open .nav-drawer-extra a{
    flex:1 1 40%;padding:.7rem .5rem;border-radius:8px;
    color:var(--muted-2);font-size:var(--fs-md);font-weight:var(--fw-medium);transition:.16s;
  }
  .nav-links.open .nav-drawer-extra a:hover{color:#fff;background:rgba(255,255,255,.06)}
}

/* Sehr schmal (<=560 px): Konto-Icon + Sprach-Umschalter raus aus der Top-Leiste
   (beide im Off-Canvas-Drawer erreichbar), damit Logo + 3 essenzielle Icons
   (Suche/Warenkorb/Menü, je 44 px) lesbar nebeneinander passen.
   Konto = das EINZIGE <a> unter den Tools → sprachunabhängiger Strukturselektor
   (P36-i18n übersetzt aria-label „Konto"→„Account", darum NICHT per [aria-label]). */
@media (max-width:560px){
  /* NUR Konto (href endet auf konto.html) — NICHT der Warenkorb, der seit P36
     ebenfalls ein <a class="icon-btn"> ist. href bleibt sprachunabhängig
     (i18n.js schreibt nur .lang-opt um, nicht die Icon-Links). */
  .site-header .nav-tools a.icon-btn[href$="konto.html"]{display:none}
  .site-header .nav-tools .lang-switch{display:none}
}
/* Sprach-Umschalter im Drawer nur dort zeigen, wo er aus der Leiste fliegt (<=560 px). */
.nav-drawer-extra .lang-switch{display:none}
@media (max-width:560px){
  .nav-links.open .nav-drawer-extra .lang-switch{display:inline-flex;margin:.3rem 0 0}
}

/* ---- Horizontale Leiste ab 1301 px ---- */
@media (min-width:1301px){
  /* Hover-Bridge: ::before als Teil von .mega (DOM-Kind von .nav-item) deckt den
     ~24-px-Spalt Top-Link→Panel → der Hover reißt auf dem Weg nicht ab. */
  .has-mega > .mega::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px}
  .site-header .container.nav{width:calc(100% - 40px);gap:.5rem}
  .site-header .brand{flex:0 0 auto}
  /* Deep-Audit 2026-07-06 (header-css-F1): Logo im engen 1301–1559-Band von 140px auf 112px
     gekappt — die ~28px flossen in den Kopfraum, der auf EN am 1301er-Ende fehlte (Sweep:
     erst bei 112px auch die exakte 1301px-Kante overflowfrei). Ab 1560px skaliert das Logo
     ohnehin ueber die Hoehe (Block unten), diese Kappung greift dort nicht. */
  .site-header .brand .brand-logo{height:auto!important;width:auto!important;max-width:112px!important}
  .nav-links{margin-left:0;gap:.04rem}     /* margin-left .25rem->0: Slack fuer EN-Labels am 1301er-Ende */
  .nav-links > .nav-item:first-child{display:none}      /* „Sortiment" (redundant) */
  /* Spezifität 0,3,0 schlägt site.css `.nav-links a` (0,2,0) → Straffung greift wirklich.
     Fluide Größe statt fix .75rem (war auf breiten Monitoren zu klein): bei 1301 px
     bleibt sie ~.82rem (= Platz wie bisher, kein Overflow), wächst zu breiten Screens
     auf .95rem (≈ Basis). Horizontal-Padding ebenfalls fluide, damit 1301 px sicher bleibt. */
  /* Visual-Audit 2026-07-06 (C1): Nav-Label-Wachstum gedeckelt — die alte .68vw-Kurve ließ die
     Labels auf breiten Screens so anwachsen, dass Logo+Nav+Suche+Tools den Container sprengten
     (Warenkorb wurde weggeschnitten). Sanftere Kurve, Max .96rem -> mehr Kopfraum, monoton. */
  /* Deep-Audit 2026-07-06 (header-css-F1): Padding-Floor .42rem->.34rem und Caret-Gap
     .2rem->.12rem — beide bissen nur am engen 1301er-Ende (die vw-Kurven steigen schnell
     ueber die Floors) und schaffen dort den Kopfraum fuer die laengeren EN-Labels. Ceiling
     (.72rem/.96rem) unveraendert -> breite Screens bleiben identisch. */
  .site-header .nav-links a.nav-top{
    gap:.12rem;padding:.55rem clamp(.34rem, .2rem + .18vw, .72rem);
    font-size:clamp(.8rem, .55rem + .32vw, .96rem);white-space:nowrap;
  }
  .nav-spacer{flex:1}
  .nav-tools{margin-left:0;gap:.3rem}
  /* Header-Overflow-Audit 2026-07-18 (header-css-F3): Nach der F1-Kalibrierung kamen Merkliste-Icon
     (~49 px) und P36-Sprach-Umschalter (~114 px, 2×44-px-Tap-Ziele) in die Tools-Zeile — zusammen
     ~163 px, exakt der gemessene Worst-Case-Overflow (EN 1801 px). Folge: Tools off-screen auf
     DE 1301–1490 px (bis 42 px) und EN 1301–1710 px (bis 138 px). Fix: Umschalter ab hier in die
     Topbar (Platz-Slack), kompakt ohne 44-px-Breiten-Floor (Pointer-Band, AA 2.5.8 ≥24 px genügt;
     Höhe der Topbar-Zeile bleibt). <=1300 px (Drawer-Band, per Sweep verifiziert) unverändert. */
  .site-header .nav-tools .lang-switch{display:none}
  .topbar .lang-switch{display:inline-flex;flex:none;margin-right:0;padding:0}
  .topbar .lang-switch .lang-opt{min-width:24px;min-height:24px;padding:.18rem .3rem}
  /* Service-Utility bleibt in der horizontalen Leiste dauerhaft ausgeblendet — die Links
     (Hallenplaner/Service/Kontakt) sind ueber Footer + Off-Canvas-Drawer erreichbar. Ein
     Re-Show liess sich bei KEINER Breite ohne Overflow unterbringen (s. header-css-F2). */
  .nav-utility{display:none}
  /* header-css-F3: EN-Labels sind ~100 px länger als DE (linksW 1026 vs 926 bei 1440 px) — nach
     dem Topbar-Umzug blieben auf EN 1301–1410 px noch bis ~24 px Rest-Overflow. Nur für EN das
     nav-top-Seitenpadding um konstant .13rem/Seite absenken (8 Items × 2 Seiten ≈ 33 px): gleiche
     vw-Steigung wie die Basisregel → kein Sprung im Band, DE bleibt pixelidentisch. */
  html[lang="en"] .site-header .nav-links a.nav-top{
    padding-inline:clamp(.24rem, .07rem + .18vw, .72rem);
  }
}
@media (min-width:1560px){
  /* Breite Monitore: Logo über die HÖHE skalieren (nicht per max-width breit-quetschen).
     Das Logo ist 8,75:1 — max-width staucht es flach; height:auto-Breite ist hier ok,
     weil genug Platz ist. height statt max-width → größer/höher, Seitenverhältnis bleibt. */
  .site-header .brand .brand-logo{height:clamp(24px, -30px + 3.4vw, 32px)!important;width:auto!important;max-width:none!important}
}
/* header-css-F3 (2026-07-18): Ab 1801 px expandiert die Suche (max-width 270) — ihr Shrink-Pfad
   (flex:0 1 auto, min-width 44, s. oben) war aber TOT, weil .nav-tools selbst starr ist
   (flex:0 0 auto, Zeile ~163): ein fit-content-Container gibt seinen Kindern nie Schrumpf-Druck.
   Ergebnis: harter Overflow-Sprung exakt bei 1801 px (DE 38 px, EN 163 px bis ~2100 px). Hier —
   NUR im Expand-Band, das Drawer-/Icon-Band <=1800 bleibt starr wie von F1 verifiziert — darf die
   Tools-Gruppe shrinken: einziges nachgiebiges Kind ist die Suche (Icons flex:0 0 auto, 44 px fix),
   ihr min-width-44-Floor = das automatische Minimum der Gruppe → Icons können NICHT kollabieren
   (der F1-Grund für die Starrheit). Gotcha: min-width:auto reicht NICHT — Chrome floort die
   min-content-Contribution der Suche auf ihre flex-basis (270 px), das automatische Minimum der
   Gruppe wird damit die VOLLE Inhaltsbreite und der Shrink-Pfad bleibt tot (gemessen: 416 px starr,
   15 px Overflow bei EN/1801). Darum expliziter Floor = Icon-only-Zustand: 4 Kinder à 44 px
   (Suche-Minimum + Konto + Merkliste + Warenkorb) + 3×gap .3rem — bei Gap-/Icon-Änderungen im
   ≥1301-Block MITZIEHEN. Nebeneffekt ab 1760 px: der Header-Inhalt respektiert jetzt wirklich
   die 1820-px-Kappung (die Suche gibt nach), statt unsichtbar rechts rauszulaufen. */
@media (min-width:1801px){
  .site-header .nav-tools{flex:0 1 auto;min-width:calc(4*44px + 3*.3rem)}
}

/* header-css-F2 (Deep-Audit 2026-07-06): Das fruehere '@media(min-width:2300px){.nav-utility
   {display:flex}}' wurde ENTFERNT. Ab 1760px ist der Header auf max-width:1820px zentriert
   (Block unten); der Inhalt (Logo+Nav+Utility+Tools) summierte sich >=2300px konstant auf
   ~1981px (DE) bzw. ~2107px (EN) und sprengte diese Kappung bei JEDER Breite >=2300px um
   ~160–290px (auf EN 2300–2394px sogar echter Warenkorb-Beschnitt). Utility bleibt daher
   dauerhaft aus der Leiste; Footer/Drawer decken die Links ab. Per Sweep (DE+EN) auf 0
   Overflow-Baender verifiziert. */

/* Sehr breite Monitore: Header-Inhalt zentriert auf eine Maximalbreite begrenzen,
   statt randvoll über die ganze Breite zu laufen (Logo/Tools klebten sonst an den
   Rändern mit großer Leere in der Mitte → wirkte klein/verloren). Greift erst, wo
   genug Platz ist — die enge 1301-px-Zone bleibt unberührt (volle Breite). */
@media (min-width:1760px){
  .site-header .container.nav{max-width:1820px;margin-inline:auto}
  /* Logo-Höhe regelt der fluide clamp im ≥1560-Block (wächst bis 32px); hier nur Zentrierung. */
}