/* ══ Wetterzentrale CI — EINE Quelle für Banner, Navigation, Menü ══
   Eigener Token-Raum (--ci-*), unabhängig von den historisch unterschiedlichen
   Variablennamen der Einzelseiten. Farben = bestehende Palette (Betreiber: ok). */
:root{
  --ci-bg:#0C0F14; --ci-panel:#141A22; --ci-panel2:#1A222C; --ci-line:#232C38;
  --ci-txt:#E7EDF3; --ci-muted:#8A97A6; --ci-faint:#5C6675; --ci-acc:#38BDF8;
  --ci-mono:ui-monospace,Menlo,monospace;
}

/* ── Der Banner: fixe Höhe, identische Position auf JEDER Seite ── */
.ci-banner{
  position:sticky; top:0;             /* bleibt beim Scrollen stehen; z>1000 = über Leaflet-Karten */
  flex:none; display:flex; align-items:center; gap:26px; height:60px;
  margin:0 calc(50% - 50vw);                 /* bricht aus zentrierten Layouts aus (voll-breit) */
  padding:0 24px; z-index:1500;
  background:#0E141C; border-bottom:1px solid #1E2833;
}
/* Marke: siehe ci-brand.css (Handoff). Banner-Spezifika: */
.ci-banner .brand{flex:none}
@media(max-width:700px){.ci-brand .brand__wave{display:none}}
.ci-nav{
  display:flex; gap:20px; align-items:center; flex:1; min-width:0;
  overflow:visible;                           /* Dropdowns dürfen aus dem Banner ragen */
  font:500 12px/1 Archivo,Inter,system-ui,sans-serif;
}

/* ── Gruppen-Dropdowns (Lage · Wasser · System): hover UND klick/touch ── */
.ci-grp{position:relative; flex:none}
.ci-grp-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:40px;
  font:500 12px/1 Archivo,Inter,system-ui,sans-serif; color:#8A97A6;
  background:transparent; border:none; padding:0 2px; cursor:pointer;
  white-space:nowrap; border-bottom:2px solid transparent; transition:.15s;
}
.ci-grp-btn:hover{color:#E7EDF3}
.ci-grp.active .ci-grp-btn{color:#E7EDF3; font-weight:700; border-bottom-color:#38BDF8}
.ci-caret{font-size:9px; opacity:.7}
.ci-menu{
  position:absolute; top:100%; left:0; margin-top:2px; min-width:200px;
  display:none; flex-direction:column;
  background:#0E141C; border:1px solid #1E2833; border-radius:12px; padding:6px;
  z-index:1600; box-shadow:0 16px 44px rgba(0,0,0,.55);
}
.ci-grp:hover .ci-menu, .ci-grp.open .ci-menu{display:flex}
.ci-menu a{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:9px 11px; border-radius:8px; text-decoration:none; white-space:nowrap;
  color:#C5CFDA; font:500 13px/1.1 Inter,system-ui,sans-serif;
}
.ci-menu a i{font-style:normal; font-size:11px; color:#5C6675}
.ci-menu a:hover{background:#161E28; color:#fff}
.ci-menu a.active{color:#38BDF8}
.ci-menu a.active i{color:#38BDF8}
.ci-pub{
  flex:none; color:#8A97A6; text-decoration:none; white-space:nowrap;
  font:500 11px/1 Archivo,Inter,system-ui,sans-serif;
}
.ci-pub:hover{color:#38BDF8}
.ci-theme{
  flex:none; font:600 10px/1 var(--ci-mono); letter-spacing:.08em;
  color:#8A97A6; background:transparent; border:1px solid #1E2833;
  border-radius:999px; padding:8px 12px; cursor:pointer; white-space:nowrap; transition:.15s;
}
.ci-theme:hover{color:#E7EDF3; border-color:#38BDF8}

/* ── Mobil: Banner zeigt nur Brand; Menü über Burger + Bottom-Sheet ── */
#ciBurger{
  display:none; position:fixed; right:16px; bottom:18px; z-index:4000;
  width:50px; height:50px; border-radius:16px; border:1px solid var(--ci-line);
  align-items:center; justify-content:center; background:var(--ci-panel);
  color:var(--ci-txt); font-size:20px; cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
}
@media(max-width:700px){
  .ci-banner{height:52px; padding:0 14px; gap:12px}
  .ci-nav,.ci-pub{display:none}
  .ci-theme{padding:7px 10px; font-size:9px}
  #ciBurger{display:flex}
}
#ciBackdrop{position:fixed; inset:0; z-index:3998; background:rgba(5,8,12,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s}
#ciBackdrop.open{opacity:1; pointer-events:auto}
#ciSheet{position:fixed; left:0; right:0; bottom:0; z-index:3999; max-height:82vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,rgba(26,34,44,.99),rgba(12,15,20,1));
  border:1px solid var(--ci-line); border-bottom:none; border-radius:22px 22px 0 0;
  padding:10px 24px calc(26px + env(safe-area-inset-bottom,0px)); overflow-y:auto;
  transform:translateY(103%); transition:transform .3s cubic-bezier(.32,.72,.28,1);
  box-shadow:0 -18px 50px rgba(0,0,0,.55)}
#ciSheet.open{transform:translateY(0)}
#ciSheet::before{content:''; width:38px; height:4px; border-radius:2px;
  background:#3A4552; margin:2px auto 10px; flex:none}
#ciSheet .gl{font-family:var(--ci-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ci-acc);
  border-left:2px solid var(--ci-acc); padding-left:9px; margin:18px 0 4px}
#ciSheet a{display:flex; justify-content:space-between; align-items:center;
  padding:14px 4px; font-size:17px; color:var(--ci-txt); text-decoration:none;
  border-bottom:1px solid var(--ci-line)}
#ciSheet a i{font-style:normal; font-size:12px; color:var(--ci-faint)}
#ciSheet a.active{color:var(--ci-acc); font-weight:700}