/* =========================================================================
   Echt Stuttgart - Navigation v4
   Alle Klassen mit Praefix "enav-" (bewusst NICHT "esn-": Kollision mit dem
   News-Widget, siehe Lehre vom 09/2026). Farben als Variablen auf ALLEN
   Wurzeln (.enav-scope), weil Overlays und Tab-Leiste neben .enav im DOM
   stehen.
   ========================================================================= */
.enav-scope{
  --rot:#B00009; --signal:#E63329; --tinte:#111111; --grau:#6b6b6b; --hell:#8a8a8a;
  --linie:#e8e4de; --linie2:#f0ece6; --creme:#F7F5F1; --weiss:#ffffff; --nacht:#111111;
  --markier:#FCE3E1; --schatten:0 24px 60px rgba(0,0,0,.16);
  --serif:'Fraunces','Playfair Display',Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  box-sizing:border-box;
}
.enav-scope *, .enav-scope *::before, .enav-scope *::after{ box-sizing:border-box; }

/* Resets ohne Spezifitaet (Lehre v3: sonst schlagen sie die Komponentenregeln) */
.enav-scope :where(a){ color:inherit; text-decoration:none; }
.enav-scope :where(button){ font:inherit; color:inherit; border:0; padding:0; margin:0; cursor:pointer; text-align:left; letter-spacing:inherit; text-transform:none; line-height:inherit; }
.enav-scope :where(ul){ list-style:none; margin:0; padding:0; }
.enav-scope :where(li){ margin:0; padding:0; }
.enav-scope :where(p){ margin:0; }
.enav-scope :where(kbd){ font:inherit; }
.enav-scope svg{ display:block; flex:0 0 auto; }
.enav-scope img{ max-width:100%; height:auto; display:block; }
.enav-scope [hidden], .enav-scope[hidden]{ display:none !important; }

/* Schutz vor fremden Button-Regeln: Theme-Hover UND die Dark-Mode-Engine
   ([data-theme="dark"] button:not(.es-theme-toggle){background:#C41E3A!important}).
   Jeder eigene Button traegt .enav-b und bekommt Farben nur ueber Variablen. */
.enav-scope button.enav-b,
.enav-scope button.enav-b:hover,
.enav-scope button.enav-b:focus,
[data-theme="dark"] .enav-scope button.enav-b,
[data-theme="dark"] .enav-scope button.enav-b:hover{
  background:var(--bbg,transparent) !important;
  color:var(--bfg,inherit) !important;
  border-color:var(--bbd,transparent) !important;
  box-shadow:none !important;
}
.enav-scope :focus-visible{ outline:2px solid var(--signal) !important; outline-offset:2px; border-radius:6px; }
.enav-wrap{ max-width:100%; margin:0 auto; padding:0 44px; width:100%; }
.enav-flex{ flex:1 1 auto; }

/* ---------- Wurzel: sticky + Smart Sticky -------------------------------- */
/* Seitenbreite: Die Website ist auf 1400px begrenzt (boxed). Die Navigation
   haelt sich exakt daran - nichts laeuft links/rechts in den Seitenrand.
   Anpassbar ueber die Variable, z. B. .enav{ --enav-breite:1440px; } */
.enav{
  --enav-breite:1400px;
  width:100%; max-width:var(--enav-breite); margin-left:auto; margin-right:auto;
  font-family:inherit; color:var(--tinte);
  position:sticky; top:0; z-index:9000;
  transition:transform .32s var(--ease);
  will-change:transform;
}
.enav.is-weg{ transform:translateY(-100%); }
.enav-skip{ position:absolute; left:-9999px; top:0; z-index:20; background:var(--tinte); color:var(--weiss); padding:10px 16px; font-size:14px; }
.enav-skip:focus{ left:8px; top:8px; }
.enav-bar{
  background:var(--weiss); position:relative;
  box-shadow:0 1px 0 rgba(17,17,17,.07), 0 8px 22px -8px rgba(0,0,0,.14);
}

@keyframes enavPuls{ 0%,100%{ box-shadow:0 0 0 0 rgba(230,51,41,.55); } 60%{ box-shadow:0 0 0 6px rgba(230,51,41,0); } }
@keyframes enavBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@keyframes enavDrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---------- Live-Zeile (ersetzt Topbar + Eventband) ----------------------- */
.enav-live{ background:var(--nacht); color:#fff; font-size:12.5px; line-height:1.2; }
.enav-live-in{ display:flex; align-items:center; gap:14px; height:34px; min-width:0; }
.enav-live-datum{ font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.enav-trenner{ width:1px; height:14px; background:rgba(255,255,255,.22); flex:0 0 auto; }
.enav-live-item{ display:flex; align-items:center; gap:7px; min-width:0; color:#fff !important; white-space:nowrap; }
.enav-live-item:hover{ opacity:.8; }
.enav-live-ic{ color:#F5B82E; }
.enav-live-ic svg{ width:15px; height:15px; }
.enav-vvs{ flex:0 1 auto; }
.enav-vvs-tag{ font-weight:800; font-size:10px; letter-spacing:.08em; padding:2px 6px; border-radius:4px; background:rgba(255,255,255,.14); }
.enav-vvs-text{ overflow:hidden; text-overflow:ellipsis; opacity:.85; max-width:430px; }
.enav-weiter{
  display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.3); color:#fff !important; font-weight:600; font-size:11.5px; white-space:nowrap;
  max-width:300px; overflow:hidden; text-overflow:ellipsis;
}
.enav-weiter:hover{ border-color:#fff; }
.enav-event{
  display:inline-flex; align-items:center; gap:8px; height:24px; padding:0 12px; border-radius:999px;
  background:#B00009; color:#fff !important; font-weight:700; font-size:11.5px; white-space:nowrap;
}
.enav-event.is-live{ background:#D42A20; }
.enav-event.is-danach{ background:#3a3f45; }
.enav-event-punkt{ width:7px; height:7px; border-radius:50%; background:#fff; flex:0 0 auto; }
.is-live .enav-event-punkt, .enav-karte.is-live .enav-event-punkt{ animation:enavBlink 1.4s infinite; }
.enav-scope button.enav-viertel-chip{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px;
  border:1px solid; --bbd:rgba(255,255,255,.3); --bfg:#fff; font-size:11.5px; font-weight:600; white-space:nowrap;
}
.enav-scope button.enav-viertel-chip:hover{ --bbd:#fff; }
.enav-scope button.enav-viertel-chip.is-gesetzt{ --bbg:#B00009; --bbd:#B00009; }
.enav-viertel-chip svg{ width:13px; height:13px; }
.enav-scope button.enav-live-theme{ width:26px; height:24px; display:inline-flex; align-items:center; justify-content:center; --bfg:#fff; border-radius:6px; }
.enav-live-theme svg{ width:15px; height:15px; }
.enav-ic-mond{ display:none; }
[data-theme="dark"] .enav-ic-sonne{ display:none; }
[data-theme="dark"] .enav-ic-mond{ display:block; }

/* ---------- Kopf: Zeitungs-Masthead --------------------------------------- */
.enav-kopf{ border-bottom:1px solid var(--linie); height:104px; overflow:hidden; opacity:1;
  transition:height .26s cubic-bezier(.4,0,.2,1), opacity .18s ease, border-color .2s ease; }
.enav-kopf-in{ display:flex; align-items:center; justify-content:center; height:104px; position:relative; }
.enav.is-klein .enav-kopf{ height:0; opacity:0; border-bottom-color:transparent; }
.enav-logo{ display:block; }
.enav-logo-dunkel{ display:none !important; }
[data-theme="dark"] .enav-logo-hell{ display:none !important; }
[data-theme="dark"] .enav-logo-dunkel{ display:block !important; }
.enav-logo-gross img{ width:auto; height:62px; }
.enav-kopf-mobil{ display:none; }

/* ---------- Menueleiste ----------------------------------------------------- */
.enav-leiste-in{
  display:grid; grid-template-columns:190px minmax(0,1fr) auto; align-items:center; column-gap:16px;
  height:62px; transition:height .22s ease;
}
.enav.is-klein .enav-leiste-in{ height:56px; }
.enav-logo-klein{ opacity:0; pointer-events:none; transition:opacity .2s ease; }
.enav-logo-klein img{ width:auto; height:30px; }
.enav.is-klein .enav-logo-klein{ opacity:1; pointer-events:auto; }
.enav-nav{ display:flex; justify-content:center; min-width:0; }
.enav-liste{ display:flex; align-items:center; gap:2px; }
.enav-item{ position:static; }
.enav-scope .enav-top{
  display:inline-flex; align-items:center; gap:7px; position:relative;
  padding:19px 16px; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  line-height:1.15; white-space:nowrap; --bfg:var(--tinte); color:var(--tinte); transition:color .18s ease;
}
.enav-scope .enav-top::after{
  content:''; position:absolute; left:16px; right:16px; bottom:12px; height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left center; transition:transform .22s ease; pointer-events:none;
}
.enav-scope .enav-top:hover, .enav-scope .enav-item-panel.is-offen .enav-top, .enav-scope .enav-top.is-aktiv{ --bfg:var(--rot); color:var(--rot); }
.enav-scope .enav-top:hover::after, .enav-scope .enav-item-panel.is-offen .enav-top::after, .enav-scope .enav-top.is-aktiv::after{ transform:scaleX(1); }
.enav-heute-ic svg{ width:14px; height:14px; }
.enav-neu{ width:6px; height:6px; border-radius:50%; background:var(--signal); flex:0 0 auto; animation:enavPuls 2.4s ease-in-out infinite; }
.enav-caret svg{ width:9px; height:6px; opacity:.45; transition:transform .18s ease; }
.enav-item-panel.is-offen .enav-caret svg{ transform:rotate(180deg); }

.enav-aktionen{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.enav-scope button.enav-such-trigger{
  display:inline-flex; align-items:center; gap:9px; height:40px; width:190px; padding:0 7px 0 14px;
  border:1px solid; border-radius:999px; --bbd:var(--linie); --bbg:var(--creme); --bfg:var(--grau);
  font-size:13.5px; font-weight:500;
}
.enav-scope button.enav-such-trigger:hover{ --bbd:var(--tinte); }
.enav-such-trigger svg{ width:17px; height:17px; }
.enav-such-label{ flex:1 1 auto; }
.enav-kbd, .enav-such-fuss kbd{
  font-size:10.5px; font-weight:600; border:1px solid var(--linie); border-radius:6px; padding:2px 6px;
  background:var(--weiss); color:var(--grau); white-space:nowrap; line-height:1.3;
}
.enav-cta{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px;
  border:1px solid var(--linie); color:var(--tinte) !important; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; transition:background .18s, color .18s, border-color .18s;
}
.enav-cta svg{ width:16px; height:16px; color:var(--rot); }
.enav-cta:hover{ background:var(--rot); border-color:var(--rot); color:#fff !important; }
.enav-cta:hover svg{ color:#fff; }

.enav-fortschritt{ position:absolute; left:0; bottom:-1px; height:3px; width:0; background:var(--signal); display:none; transition:width .1s linear; }
.enav.hat-fortschritt .enav-fortschritt{ display:block; }

/* ---------- Mega-Panels ------------------------------------------------------ */
.enav-panel{
  position:absolute; left:0; right:0; top:100%; background:var(--weiss);
  border-top:1px solid var(--linie); box-shadow:0 24px 50px rgba(0,0,0,.14);
  max-height:calc(100vh - 140px); overflow-y:auto; overscroll-behavior:contain;
}
.enav-item-panel.is-offen .enav-panel{ animation:enavDrop .2s ease both; }
.enav-panel-in{ padding:26px 24px 32px; }
.enav-panel-kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:14px; margin-bottom:22px; border-bottom:1px solid var(--linie); }
.enav-panel-titel{ font-family:var(--serif); font-size:28px; font-weight:700; line-height:1.05; }
.enav-panel-hint{ font-size:13.5px; color:var(--grau); margin-top:6px; }
.enav-panel-alle{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--rot) !important; white-space:nowrap; padding-bottom:3px; border-bottom:2px solid var(--rot); }
.enav-panel-alle:hover{ color:var(--tinte) !important; border-color:var(--tinte); }

.enav-p-raster{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 300px; }
.enav-p-lead{ display:flex; flex-direction:column; gap:10px; padding-right:32px; min-width:0; }
.enav-p-dach{ font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.enav-neu-tag{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:var(--signal); color:#fff; font-size:9.5px; letter-spacing:.06em; vertical-align:1px; }
.enav-p-bild{ display:block; position:relative; aspect-ratio:16/9; max-height:230px; border-radius:6px; overflow:hidden; background:var(--creme); margin-bottom:4px; }
.enav-p-bild img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.enav-p-lead:hover .enav-p-bild img{ transform:scale(1.04); }
.enav-p-bild .enav-neu-tag{ position:absolute; top:10px; left:10px; margin:0; }
.enav-ohne-bild{ display:block; width:100%; height:100%; background:var(--creme); border-top:4px solid var(--c,var(--rot)); }
.enav-p-lead-titel{ font-family:var(--serif); font-size:26px; font-weight:700; line-height:1.16; color:var(--tinte); transition:color .16s ease; }
.enav-p-lead:hover .enav-p-lead-titel{ color:var(--rot); }
.enav-p-meta{ font-size:12px; color:var(--grau); }
.enav-p-mehr{ margin-top:6px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--rot); }
.enav-p-liste{ border-left:1px solid var(--linie); padding:0 28px; min-width:0; }
.enav-p-label{ font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--hell); margin-bottom:6px; }
.enav-p-zeile{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:14px; align-items:start; padding:11px 0; border-bottom:1px solid var(--linie2); }
.enav-p-thumb{ display:block; width:92px; height:64px; border-radius:5px; overflow:hidden; background:var(--creme); }
.enav-p-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.enav-p-zeile:hover .enav-p-thumb img{ transform:scale(1.06); }
.enav-p-zeile-text{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.enav-p-zeile:last-child{ border-bottom:0; }
.enav-p-zeit{ font-size:11.5px; color:var(--grau); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.enav-p-zeile-titel{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--serif); font-size:15.5px; font-weight:600; line-height:1.28; color:var(--tinte); transition:color .16s ease; }
.enav-p-zeile:hover .enav-p-zeile-titel{ color:var(--rot); }
.enav-p-leiste{ border-left:1px solid var(--linie); padding-left:28px; min-width:0; }
.enav-p-leiste .enav-p-label{ margin-bottom:12px; }
.enav-p-kachel{ display:flex; align-items:center; gap:10px; padding:12px 14px; margin-bottom:8px; border-radius:10px; background:var(--creme); transition:background .16s ease; }
.enav-p-kachel:hover{ background:var(--linie); }
.enav-p-kachel-text{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.enav-p-kachel-name{ font-size:14px; font-weight:600; color:var(--tinte); }
.enav-p-kachel-hint{ font-size:12px; color:var(--grau); }
.enav-p-kachel-pfeil{ color:var(--rot); }
.enav-live-tag{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:#D42A20; border-radius:999px; padding:2px 7px; vertical-align:1px; }

.enav-spalten{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.enav-spalte{ padding:0 26px; border-left:1px solid var(--linie); min-width:0; }
.enav-spalte:first-child{ padding-left:0; border-left:0; }
.enav-spalte:last-child{ padding-right:0; }
.enav-spalte-titel{ font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--rot); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--linie); }
.enav-spalte-liste li{ margin-bottom:12px; }
.enav-spalte-liste a{ display:flex; align-items:flex-start; gap:11px; }
.enav-spalte-icon{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--creme); color:var(--rot); transition:background .16s, color .16s; }
.enav-spalte-icon svg{ width:16px; height:16px; }
.enav-spalte-liste a:hover .enav-spalte-icon{ background:var(--rot); color:#fff; }
.enav-spalte-text{ display:block; min-width:0; padding-top:2px; }
.enav-spalte-name{ display:block; font-size:14.5px; font-weight:600; color:var(--tinte); transition:color .16s; }
.enav-spalte-liste a:hover .enav-spalte-name{ color:var(--rot); }
.enav-spalte-hint{ display:block; font-size:12px; color:var(--grau); margin-top:2px; }

/* ---------- Gemeinsames: runde Knoepfe, Schatten, Toast ------------------- */
.enav-scope button.enav-rund{
  width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid; --bbd:var(--linie); --bfg:var(--tinte);
}
.enav-scope button.enav-rund:hover{ --bbg:var(--creme); --bbd:var(--tinte); }
.enav-scope button.enav-rund svg{ width:19px; height:19px; }
.enav-scope button.enav-rund.enav-klein{ width:38px; height:38px; }
.enav-scope button.enav-rund.enav-klein svg{ width:17px; height:17px; }
.enav-scope button.enav-rund.enav-mini{ width:30px; height:30px; --bbd:transparent; }
.enav-scope button.enav-rund.enav-mini svg{ width:15px; height:15px; }

.enav-schatten{ position:fixed; inset:0; z-index:9500; background:rgba(17,17,17,.45); opacity:0; transition:opacity .22s ease; }
.enav-schatten.is-sichtbar{ opacity:1; }
.enav-schatten.is-leise{ background:transparent; }

.enav-toast{
  position:fixed; left:50%; bottom:28px; z-index:9800; transform:translate(-50%,12px); opacity:0; pointer-events:none;
  background:#111; color:#fff; padding:11px 18px; border-radius:999px; font-size:13px; font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,.25); transition:opacity .2s ease, transform .2s ease; max-width:calc(100vw - 32px); text-align:center;
}
.enav-toast.is-sichtbar{ opacity:1; transform:translate(-50%,0); }

.enav-overlay{ font-family:inherit; color:var(--tinte); }
.enav-griff{ display:none; }
.enav-nur-mobil{ display:none; }

/* ---------- Suche (Befehlspalette) ----------------------------------------- */
.enav-suche{
  position:fixed; z-index:9600; left:50%; top:11vh; width:min(760px, calc(100vw - 32px));
  background:var(--weiss); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.35);
  display:flex; flex-direction:column; max-height:78vh; overflow:hidden;
  opacity:0; transform:translate(-50%,10px) scale(.985); transition:opacity .2s ease, transform .22s var(--ease);
}
.enav-suche.is-offen{ opacity:1; transform:translate(-50%,0); }
.enav-such-kopf{ position:relative; display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--linie); margin:0; }
.enav-such-ic{ color:var(--hell); }
.enav-such-ic svg{ width:22px; height:22px; }
.enav-scope input.enav-such-feld,
.enav-scope input.enav-such-feld:focus,
[data-theme="dark"] .enav-scope input.enav-such-feld{
  flex:1 1 auto; min-width:0; width:auto !important; height:auto !important; margin:0 !important; padding:6px 0 !important;
  border:0 !important; border-radius:0 !important; outline:0 !important; box-shadow:none !important;
  background:transparent !important; background-image:none !important;
  font:inherit; font-size:20px !important; font-weight:500; color:var(--tinte) !important;
  -webkit-appearance:none; appearance:none;
}
.enav-scope input.enav-such-feld::-webkit-search-cancel-button{ -webkit-appearance:none; }
.enav-scope input.enav-such-feld::placeholder{ color:var(--hell) !important; opacity:1; }
.enav-scope button.enav-such-zu{
  font-size:11px; font-weight:600; border:1px solid; --bbd:var(--linie); --bbg:var(--creme); --bfg:var(--grau);
  border-radius:6px; padding:4px 8px;
}
.enav-such-body{ overflow-y:auto; overscroll-behavior:contain; padding:8px 10px 12px; flex:1 1 auto; }
.enav-chipzeile{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 12px 4px; font-size:12.5px; color:var(--grau); }
.enav-scope button.enav-chip, .enav-chip{
  display:inline-flex; align-items:center; padding:6px 13px; border-radius:999px; --bbg:var(--creme); background:var(--creme);
  --bfg:var(--tinte); color:var(--tinte); font-size:12.5px; font-weight:600; transition:background .16s, color .16s;
}
.enav-scope button.enav-chip:hover, .enav-chip:hover{ --bbg:var(--rot); --bfg:#fff; background:var(--rot); color:#fff !important; }
.enav-gruppe-label{ padding:12px 12px 6px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--hell); }
.enav-opt{ display:flex; align-items:center; gap:14px; width:100%; padding:10px 12px; border-radius:10px; cursor:pointer; color:var(--tinte) !important; }
.enav-opt.is-aktiv{ background:var(--creme); }
.enav-opt-ic{ flex:0 0 auto; width:36px; height:36px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--creme); color:var(--rot); transition:background .12s, color .12s; }
.enav-opt.is-aktiv .enav-opt-ic{ background:var(--rot); color:#fff; }
.enav-opt-ic svg{ width:17px; height:17px; }
.enav-opt-ic.hat-bild{ width:52px; height:40px; border-radius:6px; overflow:hidden; background:var(--creme); }
.enav-opt-ic.hat-bild img{ width:100%; height:100%; object-fit:cover; }
.enav-opt.is-aktiv .enav-opt-ic.hat-bild{ box-shadow:0 0 0 2px var(--rot); }
.enav-opt-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.enav-opt-titel{ font-size:15px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.enav-opt-titel mark{ background:var(--markier); color:var(--rot); border-radius:3px; padding:0; }
.enav-opt-sub{ font-size:12.5px; color:var(--grau); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.enav-opt-enter{ opacity:0; font-size:11px; font-weight:600; color:var(--grau); border:1px solid var(--linie); border-radius:6px; padding:3px 7px; background:var(--weiss); }
.enav-opt.is-aktiv .enav-opt-enter{ opacity:1; }
.enav-leer{ padding:18px 12px 6px; font-size:14px; color:var(--grau); }
.enav-leer a{ color:var(--rot) !important; font-weight:600; }
.enav-lade{ padding:8px 12px; font-size:12.5px; color:var(--hell); }
.enav-such-fuss{ display:flex; gap:18px; align-items:center; padding:11px 20px; border-top:1px solid var(--linie); background:var(--creme); font-size:12px; color:var(--grau); }
.enav-such-fuss kbd{ margin-right:3px; }

/* ---------- Mein Viertel ----------------------------------------------------- */
.enav-viertel{
  position:fixed; z-index:9600; top:44px; right:max(24px, calc((100vw - 1400px) / 2 + 24px)); width:480px;
  background:var(--weiss); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.24); padding:20px 20px 18px;
  opacity:0; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease;
  max-height:calc(100vh - 64px); overflow-y:auto;
}
.enav-viertel.is-offen{ opacity:1; transform:none; }
.enav-viertel-kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.enav-viertel-titel{ font-family:var(--serif); font-size:21px; font-weight:700; }
.enav-viertel-text{ font-size:13px; color:var(--grau); line-height:1.45; margin:6px 0 14px; }
.enav-viertel-raster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.enav-scope button.enav-bezirk{
  padding:8px 6px; border-radius:8px; border:1px solid; --bbd:var(--linie); --bbg:var(--weiss); --bfg:var(--tinte);
  font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; min-height:36px;
}
.enav-scope button.enav-bezirk:hover{ --bbd:var(--tinte); }
.enav-scope button.enav-bezirk[aria-pressed="true"]{ --bbg:#B00009; --bbd:#B00009; --bfg:#fff; }
.enav-viertel-fuss{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid var(--linie); font-size:12.5px; }
.enav-viertel-fuss a{ color:var(--rot) !important; font-weight:600; }
.enav-scope button.enav-viertel-weg{ --bfg:var(--grau); text-decoration:underline; font-size:12.5px; }

/* ---------- Handy-Elemente: standardmaessig aus ----------------------------- */
.enav-event-mobil, .enav-tabs, .enav-sheet, .enav-weiter-mobil{ display:none; }

/* ---------- Mittlere Breiten ------------------------------------------------ */
@media (max-width:1360px){
  .enav-wrap{ padding:0 24px; }
  .enav-leiste-in{ grid-template-columns:120px minmax(0,1fr) auto; }
  .enav-scope button.enav-such-trigger{ width:auto; padding:0 12px; }
  .enav-such-label, .enav-cta-text{ display:none; }
  .enav-cta{ padding:0 12px; }
  .enav-scope .enav-top{ padding:19px 12px; }
  .enav-scope .enav-top::after{ left:12px; right:12px; }
  .enav-p-raster{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 250px; }
  .enav-vvs-text{ max-width:280px; }
}

/* =========================================================================
   HANDY UND TABLET (bis 1180px) - gleiche Schwelle wie v3
   ========================================================================= */
@media (max-width:1180px){
  .enav-live, .enav-leiste{ display:none; }
  .enav-wrap{ padding:0 16px; }
  .enav-kopf{ height:auto !important; opacity:1 !important; border-bottom:0; overflow:visible; }
  .enav-kopf .enav-wrap.enav-kopf-in{ height:auto; min-height:58px; padding:8px 12px 8px 16px; justify-content:space-between; }
  .enav.is-klein .enav-kopf .enav-wrap.enav-kopf-in{ min-height:52px; padding-top:6px; padding-bottom:6px; }
  .enav-logo-gross img{ height:40px; }
  .enav.is-klein .enav-logo-gross img{ height:34px; }
  .enav-kopf-mobil{ display:flex; align-items:center; gap:8px; }
  .enav-scope .enav-kopf-mobil button.enav-rund{ width:44px; height:44px; }

  .enav-event-mobil{
    display:flex; align-items:center; gap:8px; height:30px; padding:0 16px; background:#B00009; color:#fff !important;
    font-size:11.5px; font-weight:700;
  }
  .enav-event-mobil.is-live{ background:#D42A20; }
  .enav-event-mobil.is-danach{ background:#3a3f45; }
  .enav-event-mobil-text{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .enav.hat-fortschritt .enav-fortschritt{ display:block; }

  /* Tab-Leiste */
  .enav-tabs{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9300;
    background:var(--weiss); border-top:1px solid var(--linie); box-shadow:0 -2px 14px rgba(0,0,0,.06);
    padding-bottom:env(safe-area-inset-bottom); font-family:inherit;
  }
  .enav-scope .enav-tab{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:60px; padding:8px 2px 7px; font-size:10.5px; font-weight:600; --bfg:var(--grau); color:var(--grau);
    text-align:center;
  }
  .enav-scope .enav-tab span{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .enav-scope .enav-tab svg{ width:23px; height:23px; }
  .enav-scope .enav-tab.is-aktiv, .enav-scope .enav-tab[aria-expanded="true"], .enav-scope .enav-tab.is-gesetzt{ --bfg:var(--rot); color:var(--rot); }
  .enav-tab-fortschritt{ color:var(--rot) !important; font-weight:700 !important; }
  body.enav-hat-tabs{ padding-bottom:calc(60px + env(safe-area-inset-bottom)) !important; }

  /* Ring (Lesefortschritt / Weiterlesen) - Wert kommt als --p (0..100) */
  .enav-ring{ --p:0; width:25px; height:25px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:conic-gradient(var(--signal) calc(var(--p) * 1%), var(--linie) 0); }
  .enav-ring > span{ width:19px; height:19px; border-radius:50%; background:var(--weiss); }

  /* Weiterlesen-Pille ueber der Tab-Leiste */
  .enav-weiter-mobil{
    display:flex; align-items:center; gap:4px; position:fixed; left:12px; right:12px; z-index:9250;
    bottom:calc(70px + env(safe-area-inset-bottom)); padding:6px 6px 6px 12px; border-radius:14px;
    background:var(--weiss); border:1px solid var(--linie); box-shadow:0 10px 30px rgba(0,0,0,.14);
    transform:translateY(0); transition:transform .3s var(--ease), opacity .3s ease;
  }
  .enav-weiter-mobil[hidden]{ display:none !important; }
  .enav-weiter-mobil-link{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; }
  .enav-weiter-mobil .enav-ring{ width:34px; height:34px; }
  .enav-weiter-mobil .enav-ring > span{ width:27px; height:27px; }
  .enav-weiter-mobil-text{ min-width:0; display:flex; flex-direction:column; gap:1px; }
  .enav-weiter-mobil-lab{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rot); }
  .enav-weiter-mobil-titel{ font-family:var(--serif); font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tinte); }

  /* Bottom-Sheets: Menue, Suche, Viertel */
  .enav-griff{ display:flex; justify-content:center; padding:9px 0 5px; touch-action:none; cursor:grab; flex:0 0 auto; }
  .enav-griff span{ width:40px; height:5px; border-radius:3px; background:var(--linie); }
  .enav-nur-desk{ display:none !important; }
  .enav-nur-mobil{ display:inline; }

  .enav-sheet, .enav-suche, .enav-viertel{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; margin:0; z-index:9600;
    background:var(--weiss); border-radius:22px 22px 0 0; box-shadow:0 -20px 60px rgba(0,0,0,.25);
    display:flex; flex-direction:column; opacity:1;
    transform:translateY(100%); transition:transform .32s var(--ease);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .enav-sheet[hidden], .enav-suche[hidden], .enav-viertel[hidden]{ display:none !important; }
  .enav-sheet.is-offen, .enav-suche.is-offen, .enav-viertel.is-offen{ transform:translateY(var(--zieh,0px)); }
  .enav-sheet.is-ziehen, .enav-suche.is-ziehen, .enav-viertel.is-ziehen{ transition:none; }
  .enav-sheet{ height:88vh; height:88dvh; }
  .enav-suche{ top:12px; max-height:none; border-radius:20px 20px 0 0; }
  .enav-suche.is-offen{ transform:translateY(var(--zieh,0px)); }
  .enav-viertel{ max-height:78vh; padding:0 16px calc(18px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }
  .enav-viertel-raster{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .enav-scope button.enav-bezirk{ min-height:44px; font-size:13px; }

  .enav-such-kopf{ padding:6px 14px 12px; border-bottom:0; gap:10px; }
  .enav-such-kopf .enav-such-ic{ position:absolute; left:28px; top:19px; pointer-events:none; }
  .enav-such-kopf .enav-such-ic svg{ width:18px; height:18px; }
  .enav-scope input.enav-such-feld, .enav-scope input.enav-such-feld:focus, [data-theme="dark"] .enav-scope input.enav-such-feld{
    font-size:16px !important; height:44px !important; padding:0 14px 0 40px !important; border-radius:999px !important; background:var(--creme) !important;
  }
  .enav-scope button.enav-such-zu{ --bbd:transparent; --bbg:transparent; --bfg:var(--rot); font-size:15px; padding:10px 4px; }
  .enav-such-body{ padding:0 8px 24px; }
  .enav-opt{ min-height:56px; padding:9px 10px; }
  .enav-opt-titel{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:14.5px; }
  .enav-opt-enter{ display:none; }

  .enav-sheet-kopf{ display:flex; align-items:center; gap:8px; padding:0 12px 6px 18px; flex:0 0 auto; }
  .enav-sheet-titel{ flex:1 1 auto; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hell); }
  .enav-sheet-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 16px 28px; }
  .enav-heute-karte{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:#111; color:#fff !important; margin-bottom:6px; }
  .enav-heute-karte-ic{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:inline-flex; align-items:center; justify-content:center; }
  .enav-heute-karte-ic svg{ width:22px; height:22px; }
  .enav-heute-karte-text{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
  .enav-heute-karte-lab{ font-size:16px; font-weight:700; }
  .enav-heute-karte-dat{ font-size:12.5px; color:rgba(255,255,255,.6); }
  .enav-pfeil-ic svg{ width:18px; height:18px; }
  .enav-heute-karte .enav-pfeil-ic{ color:rgba(255,255,255,.5); }
  .enav-neu-karten{ display:flex; gap:12px; overflow-x:auto; margin:0 -16px 6px; padding:0 16px 4px; scroll-snap-type:x mandatory; scroll-padding:0 16px; scrollbar-width:none; }
  .enav-neu-karten::-webkit-scrollbar{ display:none; }
  .enav-neu-karte{ flex:0 0 auto; width:212px; display:flex; flex-direction:column; gap:6px; scroll-snap-align:start; }
  .enav-neu-karte-bild{ display:block; width:212px; height:120px; border-radius:10px; overflow:hidden; background:var(--creme); }
  .enav-neu-karte-bild img{ width:100%; height:100%; object-fit:cover; }
  .enav-neu-karte-dach{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .enav-neu-karte-titel{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--serif); font-size:15px; font-weight:700; line-height:1.25; color:var(--tinte); }
  .enav-sheet-rubrik{ display:flex; align-items:center; gap:10px; padding:16px 2px; border-bottom:1px solid var(--linie2); }
  .enav-sheet-rubrik-name{ font-size:13.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
  .enav-sheet-rubrik-hint{ flex:1 1 auto; text-align:right; font-size:12.5px; color:var(--grau); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .enav-sheet-rubrik .enav-pfeil-ic{ color:var(--rot); }
  .enav-sheet-label{ font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--rot); margin:22px 0 10px; }
  .enav-karten{ display:flex; gap:10px; overflow-x:auto; margin:0 -16px; padding:0 16px 4px; scroll-snap-type:x mandatory; scroll-padding:0 16px; scrollbar-width:none; }
  .enav-karten::-webkit-scrollbar{ display:none; }
  .enav-karte{ flex:0 0 auto; width:158px; min-height:104px; padding:12px; border-radius:12px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; scroll-snap-align:start; }
  .enav-karte-dach{ display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.3; }
  .enav-karte-titel{ font-family:var(--serif); font-size:18px; font-weight:700; line-height:1.12; }
  .enav-karte.is-live{ background:#D42A20; color:#fff !important; }
  .enav-karte.is-s0{ background:#111; color:#fff !important; }
  .enav-karte.is-s0 .enav-karte-dach{ color:rgba(255,255,255,.65); }
  .enav-karte.is-s1{ background:var(--weiss); border:1px solid var(--linie); color:var(--tinte) !important; }
  .enav-karte.is-s1 .enav-karte-dach, .enav-karte.is-s2 .enav-karte-dach{ color:var(--rot); }
  .enav-karte.is-s2{ background:var(--creme); color:var(--tinte) !important; }
  .enav-karte.is-alle{ border:1px dashed var(--hell); color:var(--tinte) !important; justify-content:flex-end; width:128px; }
  .enav-karte.is-alle .enav-karte-dach{ display:none; }
  .enav-karte.is-alle .enav-karte-titel{ font-family:inherit; font-size:13px; }
  .enav-kacheln{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .enav-kachel{ display:flex; flex-direction:column; gap:3px; padding:12px; border-radius:12px; background:var(--creme); }
  .enav-kachel-ic{ color:var(--rot); margin-bottom:4px; }
  .enav-kachel-ic svg{ width:18px; height:18px; }
  .enav-kachel-name{ font-size:14px; font-weight:700; }
  .enav-kachel-hint{ font-size:11.5px; color:var(--grau); line-height:1.35; }
  .enav-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .enav-chips .enav-chip{ background:transparent; border:1px solid var(--linie); padding:9px 14px; font-size:13px; }
  .enav-news-karte{ display:flex; align-items:center; gap:13px; margin-top:24px; padding:14px 16px; border:1px solid var(--linie); border-radius:12px; }
  .enav-news-karte-ic{ width:38px; height:38px; border-radius:50%; background:var(--creme); color:var(--rot); display:inline-flex; align-items:center; justify-content:center; }
  .enav-news-karte-ic svg{ width:19px; height:19px; }
  .enav-news-karte-text{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; }
  .enav-news-karte-lab{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
  .enav-news-karte-hint{ font-size:12.5px; color:var(--grau); }
  .enav-news-karte .enav-pfeil-ic{ color:var(--rot); }
  .enav-sheet-fuss{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; font-size:13px; }
  .enav-sheet-fuss a{ color:var(--grau) !important; }

  .enav-toast{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width:420px){
  .enav-scope .enav-tab{ font-size:10px; }
}

/* =========================================================================
   DARK MODE - Variablen auf allen Wurzeln neu belegen
   ========================================================================= */
[data-theme="dark"] .enav-scope{
  --rot:#ff5a52; --signal:#ff6b5e; --tinte:#eaeaea; --grau:#a8adb4; --hell:#8a8f96;
  --linie:#2f343a; --linie2:#262a2f; --creme:#20242a; --weiss:#16191c; --nacht:#0b0d0f; --markier:#4a2323;
}
[data-theme="dark"] .enav-bar{ box-shadow:0 1px 0 rgba(0,0,0,.5), 0 8px 22px -8px rgba(0,0,0,.5); }
[data-theme="dark"] .enav-panel{ box-shadow:0 22px 50px rgba(0,0,0,.5); }
[data-theme="dark"] .enav-live{ border-bottom:1px solid #22262b; }
[data-theme="dark"] .enav-heute-karte{ background:#0b0d0f; border:1px solid #2f343a; }
[data-theme="dark"] .enav-karte.is-s0{ background:#0b0d0f; border:1px solid #2f343a; }
[data-theme="dark"] .enav-schatten{ background:rgba(0,0,0,.65); }
[data-theme="dark"] .enav-schatten.is-leise{ background:transparent; }
[data-theme="dark"] .enav-toast{ background:#eaeaea; color:#111; }
[data-theme="dark"] .enav-scope button.enav-bezirk[aria-pressed="true"],
[data-theme="dark"] .enav-scope button.enav-viertel-chip.is-gesetzt{ --bbg:#B00009; --bbd:#B00009; --bfg:#fff; }

@media (prefers-reduced-motion:reduce){
  .enav-scope, .enav-scope *{ transition:none !important; animation:none !important; }
}
@media print{
  .enav, .enav-tabs, .enav-sheet, .enav-suche, .enav-viertel, .enav-schatten, .enav-weiter-mobil, .enav-toast{ display:none !important; }
  body.enav-hat-tabs{ padding-bottom:0 !important; }
}