/* ═══════════════════════════════════════════════════════════════════════
   DIE KOPFLEISTE — für alle Seiten
   
   Sie stand bis 07.09.2026 nur in index.html, und die Unterseiten trugen
   eine schlanke Ersatzleiste mit Markennamen und einem Zurück-Verweis.
   Das war ein Bruch: Wer von der Startseite auf „Über uns" klickte,
   verlor die Navigation und musste zurück, um weiterzukommen.
   
   Jetzt liegt sie in einer eigenen Datei, die alle fünf Seiten laden.
   Auf Unterseiten zeigen die Sprungmarken auf `index.html#…`, damit sie
   dort genauso funktionieren.
   ═══════════════════════════════════════════════════════════════════════ */

/* Drei Spalten statt flex-center: so bleibt das Wappen exakt in der Mitte,
   auch wenn links „Kämpfer · Rückblick" breiter baut als rechts
   „Location · Tickets". */
.nav{position:fixed;inset:0 0 auto;z-index:80;height:63px;overflow:visible;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(10px,1.6vw,26px);
  padding-inline:clamp(16px,2.6vw,44px);background:transparent}

.nav__marke{display:grid;place-items:start center;position:relative;z-index:2;
  align-self:start;margin-top:6px}

.nav__marke img{height:clamp(50px,5.8vw,88px);width:auto;
  filter:drop-shadow(0 10px 26px rgba(4,5,4,.85))}

.nav__hinter{position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(rgba(7,8,7,.92),rgba(7,8,7,.62) 62%,rgba(7,8,7,0));
  backdrop-filter:blur(6px);transition:opacity 380ms var(--e1)}

.nav.fest .nav__hinter{opacity:1}

/* Die Sprungmarken sitzen auf der senkrechten Mitte des Wappens, nicht
   auf der Mitte der Leiste — das Wappen hängt nach unten heraus. */
.nav__seite{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);
  margin-top:clamp(12px,1.6vw,26px)}
.nav__seite--l{justify-content:flex-end}
.nav__seite--r{justify-content:flex-start}
.nav__seite a{font-family:"Lobos FC",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(13px,1.35vw,21px);letter-spacing:.03em;line-height:1;
  color:var(--weiss);white-space:nowrap;position:relative;
  padding-block:6px;                      /* Klickziel auf 44 px bringen */
  transition:color var(--reaktion) var(--e1)}
/* Kein Unterstrich im Ruhezustand — die Seite kennt keine. Beim Zeigen
   fährt eine Goldlinie von links aus. */
.nav__seite a::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform 340ms var(--e1)}
.nav__seite a:hover,.nav__seite a:focus-visible{color:var(--gold)}
.nav__seite a:hover::after,.nav__seite a:focus-visible::after{transform:scaleX(1)}

/* Der Strich zeigt auch, WO man ist, nicht nur wohin man klicken kann.
   Der Abschnitt, der gerade im Bild steht, bekommt ihn dauerhaft. Ohne
   das musste man beim Scrollen raten, in welchem Teil der Seite man sich
   befindet — die Abschnitte gehen ohne harte Kante ineinander über. */
.nav__seite a.hier{color:var(--gold)}
.nav__seite a.hier::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){.nav__seite a::after{transition:none}}

@media (max-width:833px){
  .nav{height:52px;gap:8px}
  /* Am Handy bleibt neben dem Wappen wenig Platz. Die Marken rücken
     enger zusammen und werden kleiner, statt umzubrechen. */
  .nav__seite{gap:clamp(9px,3.2vw,16px);margin-top:clamp(8px,2.4vw,14px)}
  .nav__seite a{font-size:clamp(10px,2.9vw,14px);letter-spacing:.02em}
  .nav__marke img{height:clamp(44px,12vw,58px)}
}

/* ── Auf Unterseiten ─────────────────────────────────────────────────
   Dort gibt es kein Hero-Bild, über dem die Leiste schweben könnte —
   sie braucht von Anfang an ihren Grund. Und sie steht `sticky` statt
   `fixed`, damit sie beim Blättern in einem langen Text mitläuft, ohne
   den Satzspiegel zu überdecken. */
body.unterseite .nav{position:sticky;
  /* Auf den Unterseiten fluchtet die Leiste mit dem Satzspiegel: außen
     dieselbe Kante wie Titel, Text und Bilder. Gemessen bei 1440 px saß
     der Text bei 337 px, die Leiste bei 37 — zwei Linien, wo eine
     gehört.

     Der Innenabstand rechnet den Satzspiegel nach: `.rinhalt` ist
     `min(100% - 2*--rand, --satzbreite)` breit und zentriert; der Rand
     daneben ist der größere von --rand und der Hälfte des Überschusses.
     Beide greifen auf dieselbe Variable zu — sonst laufen sie
     auseinander, sobald einer der Werte geändert wird. */
  padding-inline:max(var(--rand), calc((100vw - var(--satzbreite)) / 2))}

/* Und die Marken rücken nach außen, nicht ans Wappen: Nur so trifft die
   erste Marke links dieselbe Linie wie der Titel darunter. Das Wappen
   bekommt dadurch Luft — es bleibt mittig, hängt aber nicht mehr am
   Text. */
body.unterseite .nav__seite--l{justify-content:flex-start}
body.unterseite .nav__seite--r{justify-content:flex-end}
body.unterseite .nav__hinter{opacity:1}
body.unterseite{padding-top:0}