/* ==========================================================================
   sidebar.css — geteilte Bereichs-Navigation (Sidebar) der Mitglieder-Shell
   Gehört zu js/sidebar.js. Nach base.css einbinden (konsumiert deren Tokens).

   Muster: feste weiße Sidebar links auf der Creme-Bühne (Desktop ≥960px),
   Off-Canvas von links mit Top-Leiste + Burger (Mobil). Aktiver Punkt trägt
   einen feinen Koralle-Strich links — dezent, wie die Marker der Website.

   Vertrag (Markup pro Seite, Details in js/sidebar.js):
     <div class="hub-shell">
       <aside class="seiten-nav" id="seiten-nav" aria-label="Bereichs-Navigation"></aside>
       <div class="hub-inhalt"> … main + footer … </div>
     </div>
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell — Sidebar links, Inhalt rechts (Desktop); untereinander (Mobil)
   -------------------------------------------------------------------------- */

.hub-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Inhalt-Spalte: main wächst, damit die Fußzeile auch bei kurzen Seiten
   unten sitzt. min-width verhindert Grid-/Flex-Überlauf breiter Kinder. */
.hub-inhalt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hub-inhalt > main {
  flex: 1;
  width: 100%;
}

/* --------------------------------------------------------------------------
   2. Sidebar — Grundaufbau (Logo oben, Menü, Abmelden unten)
   -------------------------------------------------------------------------- */

.seiten-nav {
  display: flex;
  flex-direction: column;
  /* Kachelgrau als Leisten-Fläche (Entwurf-4-Look, Max 12.08.) — der
     Hauptbereich läuft weiß, Hover/Aktiv-Pillen setzen sich in Weiß ab. */
  background-color: var(--farbe-buehne);
  border-right: 1px solid var(--farbe-rahmen-warm);
  padding: var(--abstand-l) var(--abstand-m);
}

/* Kopf: Logo (Link zur Startseite), auf Mobil daneben der Schließen-Knopf */
.seiten-nav-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  padding: 0 var(--abstand-s);
}

.seiten-nav-logo {
  display: inline-flex;
  align-items: center;
}

.seiten-nav-logo img {
  height: 34px;
  width: auto;
}

/* Menü: füllt die Höhe, damit „Abmelden" unten abgesetzt sitzt */
.seiten-nav-menue {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  margin-top: var(--abstand-xl);
}

/* Ein Navigationspunkt — ruhige Pille, Touch-Ziel mindestens 44px hoch */
.seiten-nav-punkt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
  letter-spacing: 0.01em;
  color: var(--farbe-text-gedimmt);
  text-decoration: none;
  transition: color var(--uebergang), background-color var(--uebergang);
}

.seiten-nav-punkt svg {
  flex: none;
}

.seiten-nav-punkt:hover {
  color: var(--farbe-ink);
  background-color: var(--farbe-hintergrund);
}

/* Aktiver Punkt: stärkeres Gewicht, warme Fläche, feiner Koralle-Strich
   links (Website-Muster: 2px-Marker als Signal, keine Farbfläche). */
.seiten-nav-punkt[aria-current="page"] {
  color: var(--farbe-ink);
  font-weight: var(--schrift-gewicht-stark);
  background-color: var(--farbe-hintergrund);
}

.seiten-nav-punkt[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5px;
  height: 1.15rem;
  border-radius: 999px;
  background-color: var(--farbe-akzent-koralle);
}

/* Fuß: „Abmelden", durch warme Linie vom Menü abgesetzt */
.seiten-nav-fuss {
  border-top: 1px solid var(--farbe-rahmen-warm);
  padding-top: var(--abstand-m);
  margin-top: var(--abstand-m);
}

.seiten-nav-abmelden {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.seiten-nav-abmelden:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Schließen-Knopf (nur Mobil sichtbar) — 44px Touch-Ziel */
.seiten-nav-schliessen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--farbe-text-gedimmt);
  cursor: pointer;
  transition: color var(--uebergang);
}

.seiten-nav-schliessen:hover {
  color: var(--farbe-ink);
}

/* --------------------------------------------------------------------------
   3. Top-Leiste (nur Mobil) — Burger links, Logo daneben
   -------------------------------------------------------------------------- */

.hub-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  background-color: var(--farbe-hintergrund);
  border-bottom: 1px solid var(--farbe-rahmen-warm);
}

.hub-topbar-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--farbe-ink);
  cursor: pointer;
}

.hub-topbar-logo {
  display: inline-flex;
  align-items: center;
}

.hub-topbar-logo img {
  height: 24px;
  width: auto;
}

/* --------------------------------------------------------------------------
   4. Responsive Verhalten
   Desktop (≥960px): feste Sidebar, kein Overlay, keine Top-Leiste.
   Mobil (<960px):   Off-Canvas von links, Overlay dahinter.
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .hub-shell {
    display: flex;
    align-items: stretch;
  }

  .seiten-nav {
    position: sticky;
    top: 0;
    flex: none;
    width: 15rem;              /* 240px */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
  }

  .hub-inhalt {
    flex: 1;
  }

  .hub-topbar,
  .seiten-nav-schliessen {
    display: none;
  }

  .seiten-nav-overlay {
    display: none !important;
  }
}

@media (max-width: 959.98px) {
  /* Off-Canvas: liegt über allem (auch über dem Modul-Drawer der
     Lektionsansicht, z-index 50/40) und fährt von links herein. */
  .seiten-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    height: 100%;
    width: min(17rem, 85vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform 0.24s var(--ease);
  }

  .seiten-nav.seiten-nav-offen {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(17, 17, 17, 0.12);
  }

  /* Abdunkelnde Ebene hinter der offenen Sidebar (schließt per Klick) */
  .seiten-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: rgba(17, 17, 17, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
  }
}