/* ===========================================================================
   ALVA -- Seitennavigation (Hamburger + ausklappendes Seitenmenue)
   ---------------------------------------------------------------------------
   Bewusst EIGENSTAENDIG: index.html, monitoring.html und
   hausanschluss-datenmodell.html bringen drei verschiedene Farbtoken-Saetze
   mit (alva.css bzw. je eigene :root-Bloecke). Diese Komponente definiert
   deshalb ihre eigenen Werte und laesst sich in jede der drei Seiten
   einhaengen, ohne dort etwas voraussetzen zu muessen.

   Markup dazu erzeugt app/nav.js -- die Seiten brauchen nur diese Datei
   plus das Skript.
   =========================================================================== */

.nav-knopf {
  --nav-strich: #FFFFFF;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0 7px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.nav-knopf:hover { background: rgba(255, 255, 255, .12); }
.nav-knopf span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--nav-strich);
  transition: transform .18s, opacity .18s;
}
/* Auf hellem Grund (index.html) */
.nav-knopf.auf-hell { --nav-strich: #253040; }
.nav-knopf.auf-hell:hover { background: rgba(5, 11, 19, .07); }

/* Waehrend das Menue offen ist, wird der Hamburger zum Kreuz. */
.nav-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ Grund */
.nav-grund {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 11, 19, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.nav-grund.offen { opacity: 1; pointer-events: auto; }

/* ----------------------------------------------------------------- Schub */
.nav-schub {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 91;
  width: 288px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  background: #050B13;
  color: #FFFFFF;
  box-shadow: 4px 0 34px rgba(5, 11, 19, .4);
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-schub.offen { transform: translateX(0); }

.nav-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  flex: 0 0 auto;
}
.nav-kopf svg { width: 58px; height: auto; display: block; flex: 0 0 auto; }
.nav-kopf .nav-kopf-text {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .62);
  letter-spacing: .3px;
}
.nav-kopf .nav-zu {
  margin-left: auto;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .55);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.nav-kopf .nav-zu:hover { color: #FFFFFF; background: rgba(255, 255, 255, .12); }

.nav-gruppe { padding: 14px 12px 6px; }
.nav-gruppe + .nav-gruppe { border-top: 1px solid rgba(255, 255, 255, .1); }
.nav-gruppe-titel {
  padding: 0 8px 8px;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

.nav-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 0;
  width: 100%;
  text-align: left;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.nav-eintrag:hover {
  background: rgba(255, 255, 255, .09);
  color: #FFFFFF;
  text-decoration: none;
}
.nav-eintrag.aktiv {
  background: rgba(255, 252, 46, .13);
  color: #FFFFFF;
  box-shadow: inset 2px 0 0 0 #FFFC2E;
}
.nav-eintrag .nav-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; opacity: .75; }
.nav-eintrag.aktiv .nav-icon { opacity: 1; color: #FFFC2E; }
.nav-eintrag .nav-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-eintrag .nav-unter {
  font-family: 'Satoshi', 'Generalsans', ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .45);
  line-height: 1.4;
}
.nav-eintrag .nav-zahl {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .12);
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .7);
}
.nav-eintrag.aktiv .nav-zahl { background: #FFFC2E; color: #253040; }

.nav-fuss {
  margin-top: auto;
  padding: 14px 20px 18px;
  font-family: 'Satoshi', 'Generalsans', ui-sans-serif, system-ui, sans-serif;
  font-size: .68rem;
  color: rgba(255, 255, 255, .34);
  border-top: 1px solid rgba(255, 255, 255, .1);
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .nav-schub, .nav-grund, .nav-knopf span { transition: none !important; }
}