/* ============================================================
   WatchGuide 2026 — Design-System ("Style-Set" / roter Faden)
   Globale Tokens (aus der Startrampe gehoben) + Header-Navi Konzept B.
   Site-weit geladen; ERGÄNZT wg-2026-header.css (Bar/Suche/Mobile bleiben dort).
   ============================================================ */
:root{
  /* Flächen — Zentrale-Palette (design-system-zentrale-2026.md §1, 14.07.2026) */
  --wg-bg:#0d0f14;--wg-bg-2:#12151c;--wg-panel:#161a23;--wg-ink:#070809;
  /* Text */
  --wg-txt:#eef0f4;--wg-muted:#a3abba;--wg-dim:#6b7383;
  /* Marke: Orange-first */
  --wg-o:#ff6b00;--wg-o-2:#ff8533;--wg-o-ink:#160c02;
  /* Signal-Engine (Marken-Held) */
  --wg-spot:#ff7a1a;--wg-tick:#f5a623;--wg-jewel:#46d989;
  /* Linien / Glas / Schatten */
  --wg-line:rgba(255,255,255,.08);--wg-line-2:rgba(255,255,255,.15);
  --wg-glass:rgba(12,14,18,.85);
  --wg-e2:0 16px 40px -16px rgba(0,0,0,.8);--wg-e3:0 40px 90px -28px rgba(0,0,0,.9);
  /* Maße / Schrift */
  --wg-radius:14px;--wg-max:1340px;
  --wg-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wg-num:ui-monospace,"SF Mono","Segoe UI Mono",Menlo,Consolas,monospace;
}

/* ============================================================
   HEADER-NAVI — Konzept B: kompakte Dropdowns
   Panels hängen am Nav-<li> (saubere Positionierung), öffnen per KLICK
   (Hover-Open ist im JS entfernt), Content-groß statt bildschirmfüllend.
   ============================================================ */
/* Nav füllt die Bar-Höhe, damit das li-verankerte Dropdown sauber UNTER der Bar sitzt */
.wg2026-header__bar > .wg2026-main-nav{align-self:stretch}
.wg2026-main-nav .wg2026-nav-list{position:relative;height:100%}
.wg2026-nav-li{position:relative;list-style:none;display:flex;align-items:center}

.wgh-drop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  width:max-content;max-width:min(600px,84vw);
  background:linear-gradient(180deg,#12161d,#0b0d11);
  border:1px solid var(--wg-line-2);border-radius:16px;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.8);
  padding:14px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
  transform-origin:top left;
}
.wgh-drop--end{left:auto;right:0;transform-origin:top right}
.wgh-drop.is-open{opacity:1;visibility:visible;transform:none}
.wgh-drop::before{content:"";position:absolute;top:-7px;left:28px;width:13px;height:13px;
  background:#12161d;border-left:1px solid var(--wg-line-2);border-top:1px solid var(--wg-line-2);transform:rotate(45deg)}
.wgh-drop--end::before{left:auto;right:28px}

.wgh-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px 18px}
.wgh-cols--2{grid-template-columns:1fr 1fr}
.wgh-ct{grid-column:1/-1;font-family:var(--wg-num);font-size:.62rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--wg-o-2);padding:3px 8px 7px}
.wgh-lnk{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;
  color:var(--wg-muted);font-weight:650;font-size:.9rem;transition:background .12s,color .12s;white-space:nowrap}
.wgh-lnk:hover,.wgh-lnk:focus-visible{background:rgba(255,107,0,.16);color:var(--wg-txt);box-shadow:inset 0 0 0 1px rgba(255,107,0,.34);outline:none}
.wgh-lnk:hover .wgh-cnt,.wgh-lnk:focus-visible .wgh-cnt{color:var(--wg-o-2)}
.wgh-lnk .wgh-ic{width:18px;text-align:center;opacity:.95;flex:0 0 auto}
.wgh-lnk .wgh-cnt{margin-left:auto;font:700 .66rem/1 var(--wg-num);color:var(--wg-dim);padding-left:10px}
.wgh-foot{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid var(--wg-line)}
.wgh-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:11px;
  font-weight:750;font-size:.82rem;border:1px solid var(--wg-line-2);background:rgba(255,255,255,.03);
  color:var(--wg-muted);transition:border-color .14s,color .14s}
.wgh-pill:hover{border-color:rgba(255,107,0,.5);color:var(--wg-o-2)}
.wgh-pill.is-hot{background:linear-gradient(135deg,var(--wg-o-2),var(--wg-o));color:var(--wg-o-ink);border:0}
.wgh-plogo{min-width:23px;height:20px;padding:0 5px;border-radius:5px;display:grid;place-items:center;
  font:900 .6rem/1 var(--wg-num);color:#fff;flex:0 0 auto}
.wgh-lnk .p-netflix{background:#e50914}.p-hbomax{background:#7b2bf9}.wgh-lnk .p-disney{background:#0b3d91}.wgh-lnk .p-prime{background:#00a8e1}
.wgh-lnk .p-wow{background:#00aa9e}.wgh-lnk .p-paramount{background:#0064ff}.wgh-lnk .p-apple{background:#1c1c1e;box-shadow:inset 0 0 0 1px #555}
.wgh-lnk .p-joyn{background:#fa0a5a}.wgh-lnk .p-magenta{background:#e20074}.wgh-lnk .p-crunchyroll{background:#f47521}

/* Scrim entfernt: kein Page-Dim / Viewport-Backdrop-Blur mehr -> Dropdowns oeffnen sofort
   (der Blur war der Render-Stau beim Aufklappen, nicht die Icons). */

@media (max-width:1180px){.wgh-cols{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.wgh-drop{display:none!important}} /* < Tablet: bestehendes Mobile-Menü übernimmt */