/* ============================================================
   SCN Hauptnavigation — nach dem Vorbild der Mouratoglou Academy:
   schlanke Kopfleiste mit Hinweisleiste darüber, ein Hamburger-Button,
   ein Vollbild-Overlay mit bildgestützten, horizontal aufklappenden
   Ebenen. Nur „Mannschaften" nutzt Ebene 2/3; alle anderen Hauptpunkte
   verlinken direkt.
   ============================================================ */

/* ---------------------------------------------------------
   Hinweisleiste ("Neuer Kunstrasen ...") — schließbar, Zustand
   wird per body-Klasse gesteuert (siehe nav.js), damit Kopfleiste,
   Seiteninhalt und Menü-Overlay gemeinsam nachrücken.
--------------------------------------------------------- */
.promo-bar{
  height:var(--promo-h); overflow:hidden;
  background:var(--blue-900); color:#fff;
  transition:height .25s var(--ease);
}
.promo-bar-inner{
  height:var(--promo-h); max-width:1180px; margin:0 auto; padding:0 5%;
  display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:.82rem; white-space:nowrap;
  transition:opacity .2s var(--ease);
}
.promo-bar-text strong{ font-weight:700; }
.promo-bar-cta{
  font-weight:700; text-decoration:underline; text-underline-offset:3px;
  flex:none;
}
.promo-bar-close{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:2px;
  background:none; border:0; color:#fff; opacity:.65; cursor:pointer;
}
.promo-bar-close:hover{ opacity:1; }

/* Geschlossene Hinweisleiste: Variable auf 0, damit Kopfleiste, Overlay,
   Jumpbar und Anker-Offsets dieselbe Rechnung nutzen — und aus dem Tab-Flow
   nehmen (visibility), sonst landen Tastatur-Nutzer auf unsichtbaren Links. */
body.promo-dismissed{ --promo-h:0px; }
body.promo-dismissed .promo-bar{ height:0; visibility:hidden; transition:height .25s var(--ease), visibility 0s linear .25s; }
body.promo-dismissed .promo-bar-inner{ opacity:0; }

/* ---------------------------------------------------------
   Kopfleiste
--------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:calc(var(--promo-h) + var(--nav-h-live));
  transition:height .25s var(--ease);
}
body.promo-dismissed .site-header{ height:var(--nav-h-live); }

/* Der alte .site-nav war sticky (im Fluss), der neue .site-header ist
   fixed (aus dem Fluss raus) — #main braucht daher jetzt eigenen
   Abstand, sonst rutscht der Seiteninhalt unter die Kopfleiste. */
#main{
  padding-top:calc(var(--promo-h) + var(--nav-h));
  transition:padding-top .25s var(--ease);
}
body.promo-dismissed #main{ padding-top:var(--nav-h); }

.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h-live); padding:0 5%;
  background:var(--white); color:var(--blue-900);
  border-bottom:1px solid var(--line);
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), height .25s var(--ease), box-shadow .25s var(--ease);
}
/* Kompakter Zustand nach dem ersten Scrollen (body.is-scrolled, main.js):
   Leiste wird 20px flacher, Wappen kleiner, weicher Schatten trennt sie
   vom vorbeiziehenden Inhalt. */
body.is-scrolled .header-bar{ box-shadow:0 8px 24px -14px rgba(20,30,80,.35); }
body.is-scrolled .site-header.is-open .header-bar{ box-shadow:none; }
.site-header.is-open .header-bar{
  background:var(--blue-900); color:var(--white); border-bottom-color:var(--blue-900);
}
.brand{
  display:flex; align-items:center; gap:.9em;
  color:inherit; /* die alte, fest codierte Farbe aus style.css überschreiben —
                     sonst bleibt der Vereinsname bei offenem Menü dunkelblau
                     auf dunkelblau und verschwindet. */
}
/* Wappen bleibt immer die positive Version (Navy/Weiß/Rot) — auch bei
   offenem, dunklem Menü, damit das Logo nicht "wegkippt". Die zweite
   Bild-Variante liegt ungenutzt im Markup, falls sie später doch
   gebraucht wird. */
.brand-mark{ position:relative; display:inline-flex; flex:none; }
.brand-logo{ height:58px; width:auto; display:block; transition:height .25s var(--ease); }
body.is-scrolled .brand-logo{ height:46px; }
.brand-logo--neg{ display:none; }
/* Das Wappen hat selbst einen dünnen Navy-Rand — der verschwindet bei
   offenem, dunkelblauem Menü fast vollständig. Vier gerichtete
   drop-shadows folgen der Wappen-Silhouette (kein Rechteck) und legen
   einen weißen Rand darüber, damit sich das Logo weiter vom Blau abhebt. */
.site-header.is-open .brand-logo{
  filter:
    drop-shadow(1.5px 0 0 #fff)
    drop-shadow(-1.5px 0 0 #fff)
    drop-shadow(0 1.5px 0 #fff)
    drop-shadow(0 -1.5px 0 #fff);
}

.brand-word{ display:flex; flex-direction:column; line-height:1.2; white-space:nowrap; }
.brand-name{
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
}
.brand-sub{
  font-family:var(--font-mono); font-weight:500; font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--red-600);
}
.site-header.is-open .brand-sub{ color:#ff9d98; }

.header-actions{ display:flex; align-items:center; gap:10px; }

.header-btn{
  display:inline-flex; align-items:center;
  padding:9px 16px; border-radius:999px;
  font-size:.86rem; font-weight:700; color:#fff;
  transition:background-color .18s var(--ease), transform .1s var(--ease);
}
.header-btn--red{ background:var(--red-600); }
.header-btn--red:hover{ background:var(--red-500); }
.header-btn--blue{ background:var(--blue-600); }
.header-btn--blue:hover{ background:var(--blue-700); }
.header-btn:active{ transform:scale(.96); }

.menu-toggle{
  display:flex; align-items:center; gap:10px;
  background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  color:inherit; padding:8px 4px;
  transition:transform .1s var(--ease);
}
.menu-toggle:active{ transform:scale(.96); }
.menu-toggle .bars{ position:relative; width:22px; height:16px; }
.menu-toggle .bars span{
  position:absolute; left:0; width:100%; height:2px; background:currentColor;
  transition:transform .25s var(--ease), opacity .2s var(--ease), top .25s var(--ease);
}
.menu-toggle .bars span:nth-child(1){ top:0; }
.menu-toggle .bars span:nth-child(2){ top:7px; }
.menu-toggle .bars span:nth-child(3){ top:14px; }
.site-header.is-open .menu-toggle .bars span:nth-child(1){ top:7px; transform:rotate(45deg); }
.site-header.is-open .menu-toggle .bars span:nth-child(2){ opacity:0; }
.site-header.is-open .menu-toggle .bars span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* ---------------------------------------------------------
   Overlay
--------------------------------------------------------- */
.menu-overlay{
  position:fixed; inset:0; top:calc(var(--promo-h) + var(--nav-h-live));
  background:var(--white);
  visibility:hidden; opacity:0;
  transition:opacity .25s var(--ease), visibility 0s linear .25s, top .25s var(--ease), height .25s var(--ease);
  z-index:90;
  display:flex; flex-direction:column;
  height:calc(100vh - var(--promo-h) - var(--nav-h-live));
  height:calc(100dvh - var(--promo-h) - var(--nav-h-live)); /* iOS: dynamische Adressleiste */
  overflow:hidden;
}
body.promo-dismissed .menu-overlay{
  top:var(--nav-h-live); height:calc(100vh - var(--nav-h-live)); height:calc(100dvh - var(--nav-h-live));
}
.site-header.is-open .menu-overlay{
  visibility:visible; opacity:1;
  transition:opacity .25s var(--ease);
}
/* Bugfix: Kindelemente mit eigenem visibility:visible / pointer-events:auto
   (die vorausgewählte Ebene-3-Teamliste, Bildspalte) blieben bei
   geschlossenem Overlay klickbar — unsichtbar (opacity 0), aber über dem
   Seiteninhalt. Klicks auf der rechten Bildschirmhälfte landeten so auf
   Team-Links statt auf Buttons. Solange das Menü zu ist, wird deshalb der
   gesamte Overlay-Baum hart aus dem Hit-Test genommen. */
.site-header:not(.is-open) .menu-overlay,
.site-header:not(.is-open) .menu-overlay *{ visibility:hidden; pointer-events:none; }
/* Seite hinter dem offenen Menü nicht mitscrollen lassen (nav.js setzt die Klasse). */
body.menu-open{ overflow:hidden; }
html:has(body.menu-open){ overflow:hidden; } /* iOS Safari ignoriert overflow nur auf body */

.overlay-grid{
  position:relative;
  flex:1 1 auto; min-height:0;
  display:flex; width:100%;
  overflow-y:auto; overflow-x:hidden;
}

/* Wiederverwendbarer Bild-Cover-Baustein */
.media-cover{ position:relative; overflow:hidden; background:var(--blue-050); }
.media-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Ebene 1 */
.level-one{
  width:26%; flex:0 0 26%;
  padding:40px 24px 40px 5%;
  border-right:1px solid var(--line);
  position:relative; z-index:2; background:var(--white);
}
.level-one-list{ list-style:none; margin:0; padding:0; }
.level-one-list li + li{ margin-top:2px; }
/* Hauptpunkte staffeln sich beim Öffnen (40 ms Abstand, fill:backwards —
   nach dem Einlauf sind Hover/Active der Links wieder frei). */
.site-header.is-open .level-one-list li{
  animation:menu-rise .5s var(--ease-out) backwards;
  animation-delay:calc(80ms + var(--i, 0) * 40ms);
}
.level-one-list li:nth-child(1){--i:0;} .level-one-list li:nth-child(2){--i:1;}
.level-one-list li:nth-child(3){--i:2;} .level-one-list li:nth-child(4){--i:3;}
.level-one-list li:nth-child(5){--i:4;} .level-one-list li:nth-child(6){--i:5;}
.level-one-list li:nth-child(n+7){--i:6;}
@keyframes menu-rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.level-one-link{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem, 2.3vw, 2.2rem);
  letter-spacing:-0.02em;
  color:var(--blue-900); padding:8px 0;
  transition:color .2s var(--ease), transform .1s var(--ease);
}
.level-one-link .count{
  font-family:var(--font-mono); font-size:.62rem; font-weight:500;
  color:var(--red-600); border:1px solid var(--red-600); border-radius:999px;
  padding:2px 8px; letter-spacing:.02em;
}
.level-one-link:hover,
.level-one-link.is-active,
.level-one-link.is-current,
.level-one-link[aria-current="page"]{ color:var(--red-600); }
.level-one-link.is-active .count{ background:var(--red-600); color:#fff; }
.level-one-link:active{ transform:scale(.98); transition:transform .1s var(--ease); }

/* Ebenen 2 + 3 Container (die Bildspalte .level-image liegt daneben, siehe
   unten — eigenes Element, damit sie ganz links im Overlay sitzen kann) */
.levels-container{
  width:52%; flex:0 0 52%;
  display:flex;
  opacity:0; transform:translateX(16px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events:none;
}
.levels-container.is-visible{
  opacity:1; transform:translateX(0);
  pointer-events:auto;
}

/* Farbhintergrund rechts neben Ebene 1 (Desktop): Vereinsfarben als ruhige
   Diagonale — großer dunkelblauer Block von rechts, davor ein schmaler roter
   Streifen, dazwischen bleibt Weiß. Absolut positioniert, damit er sich die
   Fläche mit .level-image/.levels-container teilt (die beim Aufklappen von
   "Mannschaften" sichtbar werden) — dann blendet er aus. Beim Öffnen des
   Menüs laufen beide Flächen von rechts ein, der rote Streifen kurz nach dem
   blauen Block (ein Moment, kein Effekt-Stapel). */
.menu-backdrop{
  position:absolute; top:0; right:0; bottom:0; left:26%;
  overflow:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), visibility 0s linear 0s;
}
.menu-backdrop.is-hidden{ opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility 0s linear .2s; }
.menu-backdrop-blue,
.menu-backdrop-red{
  position:absolute; inset:0; display:block;
  transform:translateX(104%);
  transition:transform .45s var(--ease-out);
}
.menu-backdrop-blue{
  background:var(--blue-900);
  background-image:radial-gradient(circle at 88% 12%, rgba(255,255,255,.07), transparent 45%);
  clip-path:polygon(36% 0, 100% 0, 100% 100%, 14% 100%);
}
.menu-backdrop-red{
  background:var(--red-600);
  clip-path:polygon(30.5% 0, 33.5% 0, 11.5% 100%, 8.5% 100%);
  transition-delay:.06s;
}
.site-header.is-open .menu-backdrop-blue,
.site-header.is-open .menu-backdrop-red{ transform:translateX(0); }

/* Hinweistext im blauen Block, unten rechts. Weiß auf Dunkelblau statt
   grau auf Weiß — und mit Standardtext, damit die Fläche nie stumm ist. */
.level-one-hint{
  position:absolute; right:0; bottom:0;
  width:58%; padding:40px 5% 44px 3%;
  color:#fff;
}
.level-one-hint-text{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem, 2.4vw, 2.3rem); line-height:1.12; letter-spacing:-0.01em;
  color:#fff; margin:0; max-width:20ch; text-wrap:balance;
}

/* Großformatiges Motiv ganz links im aufgeklappten Menü, noch vor Ebene 1 —
   das i-Tüpfelchen, das aus einer reinen Text-Navigation ein Erlebnis macht
   (Vorbild: Mouratoglou-Academy-Menü). order:-1 stellt sie visuell an den
   Anfang, ohne die DOM-Reihenfolge zu ändern — mobil (kein Flex-Layout mehr)
   bleibt sie dadurch weiterhin nach Ebene 1 im Lesefluss. */
.level-image{
  width:22%; flex:0 0 0; min-width:0;
  order:-1;
  position:relative; overflow:hidden;
  opacity:0; pointer-events:none;
  /* Im Standardzustand ganz zusammengefaltet (Breite 0), damit Ebene 1
     am linken Rand steht und das Standard-Panel daneben Platz hat. Beim
     Aufklappen von "Mannschaften" schiebt sich das Motiv von links ein
     und rückt die Linkliste nach rechts — die "horizontal aufklappenden
     Ebenen" aus dem Vorbild. Einmal pro Klick, daher darf hier ausnahmsweise
     flex-basis animiert werden. */
  transition:opacity .3s var(--ease), flex-basis .4s var(--ease-in-out);
}
.level-image.is-visible{ flex-basis:22%; opacity:1; pointer-events:auto; }
.level-image .level-image-item{ width:22vw; min-width:100%; }
/* Ein Bild je Kategorie, übereinandergelegt und überblendet — synchron mit
   der Ebene-2-Auswahl (siehe nav.js). Motion-Grundsatz "materialize, don't
   just fade": läuft parallel zur Textebene, nie schneller als sie. */
.level-image-item{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.level-image-item.is-visible{ opacity:1; pointer-events:auto; }
.level-image-caption{
  position:relative; z-index:1; margin:0; padding:18px 16px;
  font-family:var(--font-mono); font-size:.68rem; color:#fff;
  background:linear-gradient(0deg, rgba(20,30,80,.88), transparent);
  width:100%;
}

.level-two{
  width:45%; flex:0 0 45%;
  padding:36px 3.5% 36px 3.5%;
  border-right:1px solid var(--line);
  overflow-y:auto; background:var(--white);
}
.level-three{
  width:55%; flex:0 0 55%;
  padding:36px 3.5%;
  background:var(--blue-050);
  overflow-y:auto;
}

.panel-eyebrow{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red-600); margin-bottom:.9em;
}
.panel-title{ font-size:1.25rem; margin-bottom:.4em; line-height:1.15; }
.panel-desc{ color:var(--ink-soft); font-size:.9rem; margin-bottom:1em; max-width:34ch; }

.panel-primary-link{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:.92rem; color:var(--red-600);
  margin-bottom:1.6em;
}
.panel-primary-link .arrow{ width:15px; height:15px; transition:transform .2s var(--ease); }
.panel-primary-link:hover .arrow{ transform:translateX(3px); }

.level-two-list, .level-three-list{ list-style:none; margin:0; padding:0; }
.level-two-list li, .level-three-list li{ border-bottom:1px solid var(--line); }
.level-two-list li:first-child, .level-three-list li:first-child{ border-top:1px solid var(--line); }

.level-two-btn{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:12px 2px; font-family:var(--font-body); font-weight:700;
  font-size:1rem; color:var(--blue-900);
  transition:color .2s var(--ease), transform .1s var(--ease);
}
.level-two-btn:active{ transform:scale(.99); }
.level-two-btn-thumb{
  width:46px; height:46px; flex:none; border-radius:8px;
}
.level-two-btn-text{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.level-two-btn small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.78rem; margin-top:2px; }
.level-two-btn .arrow{ flex:none; width:16px; height:16px; color:var(--ink-soft); transition:transform .2s var(--ease), color .2s var(--ease); }
.level-two-btn:hover,
.level-two-btn.is-active{ color:var(--red-600); }
.level-two-btn.is-active .arrow{ color:var(--red-600); transform:translateX(3px); }

.team-link{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 -8px; padding:13px 8px; border-radius:var(--radius);
  font-size:.98rem; font-weight:600; color:var(--blue-900);
  transition:color .2s var(--ease), background-color .1s var(--ease);
}
.team-link:hover{ color:var(--red-600); }
.team-link:active{ background:var(--blue-050); }
.team-link .meta{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; color:var(--ink-soft); white-space:nowrap; }

/* Panels teilen sich eine Grid-Zelle (statt display:none/block), damit die
   ausgehende und die einlaufende Kategorie sanft überblenden können, statt
   hart umzuschalten — die Spalte übernimmt dabei automatisch die Höhe der
   jeweils größten Kategorie. */
.level-three{ display:grid; }
.level-three-panel{
  grid-area:1/1;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.level-three-panel.is-visible{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}

.panel-category-title{
  font-size:1.05rem; margin-bottom:1.1em;
  padding-bottom:.6em; border-bottom:1px solid var(--line);
}

.level-three-empty{ color:var(--ink-soft); font-size:.9rem; }

/* ---------------------------------------------------------
   Statischer Fuß des Overlays
--------------------------------------------------------- */
.menu-static-footer{
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 5%; background:var(--blue-900); color:#fff;
  font-size:.85rem;
}
.menu-static-footer ul{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.menu-static-footer a{ color:rgba(255,255,255,.72); }
.menu-static-footer a:hover{ color:#fff; }

/* ---------------------------------------------------------
   Mobil
--------------------------------------------------------- */
@media (max-width:860px){
  :root{ --promo-h:34px; --nav-h:72px; --nav-h-compact:60px; }
  body.is-scrolled .brand-logo{ height:36px; }
  .promo-bar-text{ overflow:hidden; text-overflow:ellipsis; }
  .promo-bar-cta{ display:none; }

  .brand-logo{ height:40px; }
  .brand-name{ font-size:1.05rem; }
  .header-btn{ padding:8px 12px; font-size:.8rem; }

  .overlay-grid{ display:block; }
  /* Padding wandert von der Spalte auf die Links, damit das Akkordeon
     (Bild + Ebenen im <li> von "Mannschaften") randbündig liegen kann. */
  .level-one{ width:100%; padding:16px 0 8px; border-right:0; }
  .level-one-link{ font-size:1.6rem; padding:10px 5%; }
  /* Chevron am aufklappbaren Punkt, dreht sich beim Öffnen. */
  .level-one-link[data-has-children]::after{
    content:""; width:.55em; height:.55em; margin-left:auto; flex:none;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform .25s var(--ease-out);
  }
  .level-one-link[data-has-children].is-active::after{ transform:rotate(180deg); }
  .level-one-list li:has(> .levels-container.is-visible){
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    margin:6px 0 10px; padding-bottom:6px;
  }
  .menu-backdrop{ display:none; }

  .levels-container{
    display:none; width:100%; flex-direction:column;
    opacity:1; transform:none; pointer-events:auto;
  }
  .levels-container.is-visible{ display:flex; }
  .level-image{
    display:none; width:100%; height:140px; flex:none; order:0;
    opacity:1; pointer-events:auto; transition:none;
  }
  .level-image .level-image-item{ width:100%; }
  .level-one{ z-index:auto; }
  .level-image.is-visible{ display:block; }
  .level-two, .level-three{ width:100%; flex:none; border-right:0; padding:20px 5%; }
  .level-three{ background:var(--blue-050); }

  .menu-static-footer{ flex-direction:column; align-items:flex-start; gap:10px; }
  .menu-static-footer ul{ flex-wrap:wrap; gap:10px 20px; }
}

@media (max-width:560px){
  .header-btn--blue{ display:none; }
  /* Bei offenem Menü weicht der rote Kopf-Button (der Menüpunkt
     "Probetraining" steht direkt darunter), sonst bricht der Vereinsname
     neben "Schließen" zweizeilig um. */
  .site-header.is-open .header-btn--red{ display:none; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion:reduce){
  .menu-overlay, .levels-container, .level-one-link, .level-two-btn, .team-link, .promo-bar, #main, .site-header,
  .level-image-item, .level-three-panel, .menu-toggle{ transition:none !important; transform:none !important; }
  .site-header.is-open .level-one-list li{ animation:none; }
  .menu-backdrop-blue, .menu-backdrop-red{ transition:none; }
}