/* ══════════════════════════════════════════════════════════
   NAV — Desktop navigation + mobile overlay panel
   Shared by all pages
══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   NAV BASE
   Fixed position, transparent on top of hero,
   becomes opaque on scroll (via JS .nav-scrolled)
───────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  background:var(--nav-bg, rgba(8,8,8,.4));
  backdrop-filter:var(--nav-blur, blur(0px));
  -webkit-backdrop-filter:var(--nav-blur, blur(0px));
  border-bottom:1px solid transparent;
  transition:background .4s, border-color .4s;
  overflow:visible;
}
.nav-inner {
  max-width:80rem; margin:0 auto;
  padding:0 1.25rem 0 9rem;
  height:100%;
  display:flex; align-items:center; gap:0;
}
@media (min-width:90.01rem) {
  .nav-inner { padding:0 2rem 0 10rem; }
}

/* ── Nav logo — fixed to left edge, hangs from top ── */
.nav-logo {
  position:fixed;
  left:1.25rem;
  top:0;
  z-index:201;
  display:flex;
  align-items:flex-start;
  /* Container needs explicit size so absolute children don't collapse it */
  width:10rem;
  height:calc(var(--nav-h) + 1.5rem);
}
.nav-logo-full {
  height:10rem; width:auto;
  margin-top:1.5rem;
  position:absolute;
  opacity:1; pointer-events:auto;
  transition:opacity .6s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-logo-small {
  height:calc(var(--nav-h) - 1rem); width:auto;
  margin-top:calc((var(--nav-h) - (var(--nav-h) - 1rem)) / 2);
  opacity:0; pointer-events:none;
  transition:opacity .6s cubic-bezier(0.4, 0, 0.2, 1);
  object-fit: contain;
  object-position: center;
}
.nav.nav-scrolled .nav-logo-full  { opacity:0; pointer-events:none; }
.nav.nav-scrolled .nav-logo-small { opacity:1; pointer-events:auto; }

/* ─────────────────────────────────────
   DESKTOP LINKS
───────────────────────────────────── */
.nav-links {
  display:flex; align-items:stretch;
  height:100%; gap:0; list-style:none; flex:1;
}
.nav-links > li {
  position:relative; display:flex; align-items:stretch;
}
.nav-links > li > a,
.nav-links > li > button {
  display:flex; align-items:center; gap:.3rem;
  padding:0 .9rem;
  font-family:'Teko',sans-serif;
  font-size: 1.1rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  background:none; border:none; cursor:pointer;
  transition:color .15s;
  position:relative;
}
.nav-links > li > a:hover,
.nav-links > li > button:hover,
.nav-links > li.open > a,
.nav-links > li.open > button { color:var(--white); }

/* Active underline */
.nav-links > li > a.active::after,
.nav-links > li.active > a::after,
.nav-links > li.active > button::after,
.nav-links > li.open > a::after,
.nav-links > li.open > button::after {
  content:''; position:absolute; bottom:0; left:.9rem; right:.9rem;
  height:2px; background:var(--white);
}
.nav-links > li > button > svg,
.nav-links > li > a > svg {
  width:.6rem; height:.6rem; stroke:currentColor; fill:none;
  stroke-width:2.5; stroke-linecap:round;
  transition:transform .2s;
}
.nav-links > li.open > button > svg,
.nav-links > li.open > a > svg,
.nav-links > li:hover > button > svg,
.nav-links > li:hover > a > svg { transform:rotate(180deg); }

/* Nav text white when nav is transparent (over hero) */
.nav.nav-transparent .nav-links > li > a,
.nav.nav-transparent .nav-links > li > button { color:var(--gray-100) !important; }
.nav.nav-transparent .nav-links > li > a:hover,
.nav.nav-transparent .nav-links > li > button:hover { color:var(--white) !important; }
.nav.nav-transparent .nav-hamburger span { background:var(--white) !important; }

/* ─────────────────────────────────────
   STANDARD DROPDOWN
───────────────────────────────────── */
.nav-drop {
  position:absolute; top:100%; left:0;
  min-width:13rem;
  background:var(--off-black);
  border:1px solid var(--border);
  border-top:2px solid var(--red);
  padding:.5rem 0;
  opacity:0; transform:translateY(-.5rem);
  pointer-events:none;
  transition:opacity .15s, transform .15s;
  list-style:none;
  z-index:300;
}
.nav-links > li.open .nav-drop,
.nav-links > li:hover .nav-drop {
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.nav-drop li a {
  display:block; padding:.625rem 1.125rem;
  font-size: 1.2rem; color:var(--muted);
  transition:color .12s, background .12s;
}
.nav-drop li a:hover { color:var(--white); background:var(--surface); }
.nav-drop li a.active {
  color:var(--white);
  padding-left:1.5rem;
  border-left:2px solid var(--red);
  margin-left:-1px;
}

/* ─────────────────────────────────────
   MEGA MENU — Mannschaften
   All groups visible at once, no clicking.
───────────────────────────────────── */
.nav-mega {
  position:absolute; top:100%; left:-2rem;
  width:44rem;
  background:var(--off-black);
  border:1px solid var(--border);
  border-top:2px solid var(--red);
  padding:1.5rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  opacity:0; transform:translateY(-.5rem);
  pointer-events:none;
  transition:opacity .15s, transform .15s;
  z-index:300;
}
.nav-links > li.open .nav-mega,
.nav-links > li:hover .nav-mega {
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.nav-mega--wide {
  width:55rem;
  grid-template-columns:repeat(5,1fr);
}
.nav-mega--two-col {
  width:26rem;
  grid-template-columns:repeat(2,1fr);
}
.mega-col-title {
  font-size: 1rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red);
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.5rem; display:block;
  white-space: nowrap;
}
.mega-col a {
  display:block; padding:.35rem 0;
  font-size: 1.2rem; color:var(--muted);
  transition:color .12s;
}
.mega-col a:hover { color:var(--white); }
.mega-col a.active {
  color: var(--white);
  padding-left: .75rem;
  border-left: 2px solid var(--red);
  margin-left: -2px;
}
.mega-col a.mega-top-link {
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:700;
  color:var(--white); letter-spacing:.04em;
  padding:.35rem 0 .5rem;
}
.mega-col a.mega-top-link:hover { color:var(--red); }

/* ─────────────────────────────────────
   NAV UTILITY (Tickets + Fanshop)
───────────────────────────────────── */
.nav-utility {
  display:flex; align-items:center; gap:.5rem;
  margin-left:auto; padding-left:1.25rem;
  flex-shrink:0;
  /* border-left removed in V8 — kept intentionally borderless */
}
.nav-util-btn {
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:900;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem 1.2rem;
  display:flex; align-items:center; gap:.375rem;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap; line-height:1;
}
.nav-util-btn svg {
  width:.8125rem; height:.8125rem;
  stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;
}
.nav-util-tickets {
  background:var(--red) !important; color:var(--white) !important; border-color:var(--red) !important;
  border:1px solid var(--red);
}
.nav-util-tickets:hover { background:var(--red-d); border-color:var(--red-d); }
.nav-util-fanshop {
  background:transparent; color:var(--muted); border:1px solid var(--border);
}
.nav-util-fanshop:hover { color:var(--white); border-color:var(--faint); }

/* ─────────────────────────────────────
   HAMBURGER (mobile only)
───────────────────────────────────── */
.nav-hamburger {
  display:none; flex-direction:column;
  justify-content:center; align-items:center;
  gap:.35rem; width:2.75rem; height:2.75rem; min-width:44px; min-height:44px;
  background:none; border:none; cursor:pointer;
  padding:0; margin-left:auto; flex-shrink:0;
}
.nav-hamburger span {
  display:block; width:1.375rem; height:1.5px;
  background:var(--white);
  transition:transform .25s, opacity .2s, width .2s;
  transform-origin:center;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(.4375rem) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; width:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-.4375rem) rotate(-45deg); }

/* ─────────────────────────────────────
   MOBILE FULL-SCREEN OVERLAY
   Covers full viewport; tapping the dark
   scrim behind the panel closes the menu.
───────────────────────────────────── */
.m-overlay {
  display:none; position:fixed; inset:0; z-index:500;
}
.m-overlay.open { display:block; }

/* Dark scrim */
.m-scrim {
  position:absolute; inset:0;
  background:rgba(var(--rgb-pure-black),.7); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s;
}
.m-overlay.open .m-scrim { opacity:1; }

/* Sliding panel from right */
.m-panel {
  position:absolute; top:0; right:0; bottom:0;
  width:min(20rem,90vw);
  background:var(--off-black);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.m-overlay.open .m-panel { transform:translateX(0); }

/* Panel top bar */
.m-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.25rem; height:var(--nav-h);
  border-bottom:2px solid var(--red); flex-shrink:0;
}
.m-bar img { height:1.875rem; }
.m-close {
  width:2rem; height:2rem; background:none; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:color .15s;
}
.m-close:hover { color:var(--white); }
.m-close svg { width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

/* Scrollable nav list */
.m-list {
  flex:1; overflow-y:auto; padding:.5rem 0 1.2rem;
}
.m-list::-webkit-scrollbar { width:.2rem; }
.m-list::-webkit-scrollbar-thumb { background:var(--border); }

/* Top-level items */
.m-item { border-bottom:1px solid rgba(var(--rgb-white),.05); }

/* Top-level button/link */
.m-top {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:.875rem 1.25rem;
  font-family:'Teko',sans-serif;
  font-size:1.125rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--white);
  background:none; border:none; cursor:pointer; text-align:left;
  transition:color .15s;
}
.m-top:hover { color:var(--red); }
.m-top.is-link { text-decoration:none; display:flex; }
.m-top > svg {
  width:.875rem; height:.875rem; stroke:var(--faint); fill:none;
  stroke-width:2.5; stroke-linecap:round; flex-shrink:0;
  transition:transform .22s, stroke .15s;
}
.m-top.open { color:var(--red); }
.m-top.open > svg { transform:rotate(90deg); stroke:var(--red); }

/* Accordion body */
.m-sub {
  display:none; flex-direction:column;
  background:rgba(var(--rgb-pure-black),.25);
}
.m-sub.open { display:flex; }

/* Group label inside sub */
.m-sub-lbl {
  padding:.5rem 1.5rem .15rem;
  font-size: 1.2rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--red);
}
/* Links inside sub */
.m-sub a {
  display:block; padding:.6rem 1.5rem;
  font-size: 1.2rem; color:var(--muted);
  transition:color .12s, background .12s;
}
.m-sub a:hover { color:var(--white); background:rgba(var(--rgb-white),.04); }
.m-sub a.active { color:var(--white); border-left:2px solid var(--red); padding-left:calc(1.5rem - 2px); }
.m-sub-div { height:1px; background:rgba(var(--rgb-white),.05); margin:.375rem 1.2rem; }

/* Panel footer CTAs */
.m-footer {
  border-top:1px solid var(--border);
  padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; flex-shrink:0;
}


/* ─────────────────────────────────────
   RESPONSIVE BREAKPOINT
───────────────────────────────────── */
@media (max-width:80rem) {
  .nav-links  { display:none; }
  .nav-utility { display:none; }
  .nav-hamburger { display:flex; }
  .nav-logo-full  { opacity:0; pointer-events:none; }
  .nav-logo-small { opacity:1; pointer-events:auto; }
}