/* ============================================================
   Shared Nav-Styles für Burger-Menü auf Mobile
   ============================================================
   Wird auf allen Seiten eingebunden, die das Haupt-Menü zeigen
   (index, meine-events, chat, impressum, datenschutz).
   Die einreichen.html hat nur einen Back-Link, braucht das nicht.

   WICHTIG: <link rel="stylesheet" href="nav.css"> muss VOR dem
   inline <style>-Block jeder Seite kommen, damit Page-spezifische
   Styles diese Defaults überschreiben können (CSS-Spezifität).
   ============================================================ */

/* ====== Burger-Button (Desktop: hidden, Mobile: visible) ====== */
.burger {
  display: none;  /* hidden by default — wird auf Mobile sichtbar */
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text, #f5f0ff);
  width: 44px;   /* Apple Touch-Target Mindestmaß */
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
  z-index: 1001;  /* über Drawer */
  position: relative;
}
.burger:hover,
.burger:focus-visible {
  border-color: var(--neon-green, #9dff3a);
  background: rgba(157, 255, 58, 0.08);
}
.burger:focus-visible { outline: 2px solid var(--neon-green, #9dff3a); outline-offset: 2px; }

.burger-icon, .burger-icon::before, .burger-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
  position: relative;
}
.burger-icon::before,
.burger-icon::after { content: ""; position: absolute; left: 0; }
.burger-icon::before { top: -6px; }
.burger-icon::after  { top:  6px; }

/* Aktiv: in X-Form transformieren */
.burger[aria-expanded="true"] .burger-icon {
  background: transparent;
}
.burger[aria-expanded="true"] .burger-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] .burger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ====== Mobile Drawer-Overlay (für nav ul) ====== */
@media (max-width: 720px) {
  .burger { display: inline-flex !important; }

  /* WICHTIG: Stacking-Context-Fix
     -----------------------------
     Auf manchen Seiten hat <nav> oder <header> ein position:relative + z-index,
     das einen eigenen Stacking-Context aufmacht. Der Drawer (Kind von nav) ist
     dann nur DARIN gestapelt — Backdrop am Body-Level (z-index 998) liegt
     drüber und macht das Menü unsichtbar (User sieht nur blurred screen).
     Fix: Nav + umgebenden Header auf z-index > Backdrop heben. */
  nav,
  header.page-header,
  header > nav {
    position: relative !important;
    z-index: 1001 !important;
  }

  /* nav ul wird zum Drawer — slide-down vom oberen Rand */
  nav ul {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: rgba(10, 6, 18, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(157, 255, 58, 0.2);
    padding: 5rem 1.5rem 1.5rem;  /* Top-Padding für Header-Überlappung */
    transform: translateY(-100%);
    transition: transform .3s ease;
    z-index: 999;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
    /* sicherstellen dass eingeklappt nicht sichtbar bleibt */
    display: flex !important;
  }

  nav ul.mobile-open {
    transform: translateY(0);
  }

  nav ul li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  nav ul li:last-child { border-bottom: none; }

  nav ul li a {
    display: block;
    width: 100%;
    padding: 1rem .5rem;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    /* Touch-Target garantiert >44px hoch durch Padding */
  }

  /* Backdrop hinter dem Drawer (klickbar = schließt) */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 2, 10, 0.6);
    backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .nav-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Body-Scroll-Lock wenn Drawer offen */
  body.nav-open {
    overflow: hidden;
  }
}

/* ====== Desktop: alles wie gehabt ====== */
@media (min-width: 721px) {
  .burger { display: none !important; }
  .nav-backdrop { display: none !important; }
}