/* ============================================================
   header.css — DIE EINE Navigationsleiste von leicky.fun
   Alle Seiten nutzen exakt dieselbe Leiste (gleiche Größe,
   gleiche Position):
     - Unterseiten: styles.css zieht diese Datei per @import;
       das Markup erzeugt site.js in <div id="site-header"></div>.
     - Landing (index.html): bindet diese Datei direkt und setzt
       <body class="home">. Über dem Hero ist die Leiste glas-trans-
       parent (helle Pills, weißer Text); ab 40 px Scroll setzt
       site.js die Klasse .solid — danach sieht sie exakt aus wie
       auf allen anderen Seiten.
   Änderungen hier gelten überall — keine Seite bekommt eigene
   Nav-Regeln.
   ============================================================ */
:root {
  --header-h: 72px;
  --pill: 500px;
  --line: rgba(24, 26, 24, .10);
  --line-strong: rgba(24, 26, 24, .22);
  --txt: #232422;
  --dim-2: #82857d;
  --radius: 8px;
  --font: "DM Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(250, 250, 248, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s;
}
.site-header.solid { background: rgba(250, 250, 248, .96); }
.site-header .inner {
  max-width: 1200px; height: 100%; margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
}
.wordmark {
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .05em;
  white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
  transition: color .3s;
}
.wordmark span.dot { color: var(--dim-2); }
.wordmark svg { width: 20px; height: 20px; color: var(--txt); flex: none; }
.menu {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
}
.menu a {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border-radius: var(--pill);
  border: 1px solid rgba(35,36,34,.22);
  background: #fff;
  color: #232422;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Füllung läuft weich ein — gilt für Hover UND für den aktiven Punkt */
  transition: color .3s ease, background .5s cubic-bezier(.4,0,.2,1),
              border-color .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
}
.menu a svg, .menu a img { display: none; }  /* reine Text-Pills */
.menu a { padding: 0 18px; }
.menu .nav-cta { margin-left: 6px; background: #fff; color: #232422;
  height: 36px; padding: 0 20px; transition: background .18s; border-color: rgba(35,36,34,.22); }
.menu .nav-cta:hover { background: #232422; color: #fff; border-color: #232422; }
.menu .nav-cta svg { display: none; }

/* ---- Sprachenschalter: geteilte Pille in derselben Form wie die Menü-Buttons
        (36 px, gleicher Rand, gleiche Schrift). Der aktive Teil ist gefüllt,
        genau wie der aktive Menüpunkt. Keine Trennlinie — die Füllung trennt. ---- */
.nav-lang { display: inline-flex; align-items: center; margin-left: 10px; }
.lang-switch {
  display: inline-flex; align-items: stretch;
  height: 36px; border-radius: var(--pill); overflow: hidden;
  border: 1px solid rgba(35,36,34,.22); background: #fff;
  transition: background .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1),
              box-shadow .5s ease;
}
.lang-switch button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-width: 46px; padding: 0 14px;
  font-family: var(--font); font-size: 11.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: #232422;
  transition: background .4s cubic-bezier(.4,0,.2,1), color .3s ease;
}
.lang-switch button:hover { background: rgba(35,36,34,.08); }
.lang-switch button.on { background: #232422; color: #fff; }
.lang-switch button.on:hover { background: #232422; }
.lang-switch button:focus-visible { outline: 2px solid #232422; outline-offset: -3px; }
.menu a img.mark-football { width: 22px; height: 22px; object-fit: contain; flex: none; }
.menu a img.mark-rl { width: 20px; height: 20px; object-fit: contain; flex: none; }
.menu a:hover { color: #fff; background: #232422; border-color: #232422; }

.menu a.active { color: #fff; background: #232422; border-color: #232422;
  box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.menu a.active:hover { background: #000; border-color: #000; color: #fff; }

.sep { width: 1px; height: 22px; background: var(--line-strong); margin: 0 8px; }

/* Sprachumschalter in der dunklen Fußzeile: gleiche Form, dunkler Grund */
.legal .lang-switch, .site-footer .lang-switch {
  background: rgba(250,250,248,.06);
  border-color: rgba(250,250,248,.22);
}
.legal .lang-switch button, .site-footer .lang-switch button { color: rgba(250,250,248,.72); }
.legal .lang-switch button:hover, .site-footer .lang-switch button:hover { background: rgba(250,250,248,.14); }
.legal .lang-switch button.on, .site-footer .lang-switch button.on {
  background: rgba(250,250,248,.94); color: #17181a;
}
.legal .lang-switch button.on:hover, .site-footer .lang-switch button.on:hover {
  background: rgba(250,250,248,.94);
}
.legal .lang-switch button:focus-visible, .site-footer .lang-switch button:focus-visible { outline-color: #f6f6f2; }
.burger {
  display: none;
  position: relative;   /* Bezug für die absolut gesetzten Balken */
  margin-left: auto;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--txt); width: 42px; height: 38px; cursor: pointer; padding: 0;
}
.burger svg { width: 20px; height: 20px; margin: 0 auto; }

/* ---- Landing (body.home): glas before scrolling ---- */
body.home .site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.home .site-header:not(.solid) .wordmark { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
body.home .site-header:not(.solid) .wordmark span.dot { color: rgba(255,255,255,.72); text-shadow: none; }
body.home .site-header:not(.solid) .wordmark svg { color: #fff; }
/* Lesbarkeit der Glas-Pills auf hellen Bildpartien */
body.home .site-header:not(.solid) .menu a,
body.home .site-header:not(.solid) .menu .nav-cta {
  color: #fff;
  background: rgba(20,20,20,.28);
  border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0,0,0,.1);
}
body.home .site-header:not(.solid) .menu a:hover,
body.home .site-header:not(.solid) .menu .nav-cta:hover {
  background: #232422; border-color: #232422; color: #fff;
}
/* Sprachenschalter im Glas-Zustand der Startseite */
body.home .site-header:not(.solid) .lang-switch {
  background: rgba(20,20,20,.28);
  border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0,0,0,.1);
}
body.home .site-header:not(.solid) .lang-switch button { color: #fff; }
body.home .site-header:not(.solid) .lang-switch button:hover { background: rgba(255,255,255,.18); }
body.home .site-header:not(.solid) .lang-switch button.on {
  background: rgba(250,250,248,.96); color: #17181a;
}
body.home .site-header:not(.solid) .lang-switch button.on:hover { background: rgba(250,250,248,.96); }
body.home .site-header:not(.solid) .lang-switch button:focus-visible { outline-color: #fff; }
body.home .site-header:not(.solid) .burger {
  color: #fff; border-color: rgba(255,255,255,.32);
  background: rgba(20,20,20,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* ab 40 px Scroll (site.js setzt .solid): exakt der Look aller anderen Seiten */
body.home .site-header.solid {
  background: rgba(250, 250, 248, .96);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}

/* ---- Mobil: ein gemeinsamer Drawer für alle Seiten ---- */
/* Burger: drei Balken, die beim Öffnen zum Kreuz werden.
   Alle Balken liegen absolut auf derselben Mitte — der Ruhezustand schiebt die
   äußeren um 7 px nach oben/unten, das Öffnen dreht dieselben Balken um die
   Mitte. Dadurch liegen beide Striche exakt übereinander (sauberes Kreuz). */
.burger .bar {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 2px;
  margin: -1px 0 0 -11px; border-radius: 2px; background: currentColor;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.burger .bar:nth-child(1) { transform: translateY(-7px); }
.burger .bar:nth-child(3) { transform: translateY(7px); }
/* Geöffnet entsteht ein „L": oberer Balken wird hochkant an die linke Kante
   gedreht, unterer bleibt waagerecht liegen, der mittlere verschwindet.
   Beide Striche treffen sich in der unteren linken Ecke. */
.burger.open .bar:nth-child(1) { transform: translate(-10px, 0) rotate(90deg); }
.burger.open .bar:nth-child(2) { opacity: 0; }
.burger.open .bar:nth-child(3) { transform: translateY(10px); }
.menu .chev, .menu-lab { display: none; }
.menu-veil { display: none; }

@media (max-width: 780px) {
  .burger { display: grid; place-items: center; }
  /* Abdunkelung hinter dem Drawer */
  .menu-veil {
    display: block; position: fixed; left: 0; right: 0;
    top: var(--header-h); height: calc(100dvh - var(--header-h)); z-index: 30;
    background: rgba(16,17,16,.44); backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  body.menu-open .menu-veil { opacity: 1; pointer-events: auto; }
  .menu {
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 40;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    overscroll-behavior: contain;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    background: rgba(250,250,248,.985);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid var(--line); border-radius: 0 0 24px 24px;
    box-shadow: 0 30px 70px -28px rgba(0,0,0,.45);
    opacity: 0; transform: translateY(-14px); visibility: hidden; pointer-events: none;
    transition: opacity .26s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility .34s;
  }
  .menu.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  /* Große, ruhige Zeilen: nur Text + Pfeil, kein Rahmen, keine Trennpunkte */
  .menu a {
    display: flex; align-items: center; gap: 14px;
    min-height: 62px; padding: 0 20px; border: 0; border-radius: 16px;
    background: transparent; color: var(--txt);
    font-size: 16px; font-weight: 400; letter-spacing: .04em;
  }
  .menu a .lbl { flex: 1; }
  .menu .chev { display: block; width: 18px; height: 18px; opacity: .3; flex: none; }
  .menu a.active, .menu a.active:hover {
    background: #232422; color: #fff; border-color: #232422; box-shadow: none;
  }
  .menu a.active .chev { opacity: .75; }
  .menu a:not(.active):hover { background: rgba(35,36,34,.06); }
  .menu-lab {
    display: block; padding: 12px 20px 6px; color: var(--dim);
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  }
  /* Sprache als eigener Block: feine Linie trennt ihn von der Navigation */
  .menu-lab.lab-sub { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
  .menu .nav-lang { margin: 0 20px 6px; }
  .menu .nav-lang .lang-switch { height: 42px; }
  .menu .lang-switch button { min-width: 58px; font-size: 12px; }
  .sep { display: none; }
  body.menu-open { overflow: hidden; }
}