/* ============================================================
   TCLE – Navigation (Mobile-First 2026)
   ============================================================ */

/* ── Body Scroll Lock (gesetzt per JS via .nav-open Klasse) ── */
body.nav-open { overflow: hidden; }

/* ── Nav Basis (Mobile: 60px, schwebend/abgerundet) ── */
#nav {
  position: fixed;
  top: var(--space-4); left: var(--space-4); right: var(--space-4);
  max-width: var(--max);
  margin: 0 auto;
  z-index: 200;
  height: 60px;
  border-radius: var(--radius-lg);
  /*
   * Mobile: transform: translateZ(0) erzwingt eigene Compositor-Ebene.
   * position:fixed allein reicht auf älteren Mobile-Engines nicht.
   * Kein backdrop-filter auf Mobile → kein Konflikt.
   */
  transform: translateZ(0);
  background: rgba(250,250,248,.97);
  /* Ruhezustand: dezenter Schatten fürs Schweben (Bottom-Border entfällt,
     passt nicht zur abgerundeten Pill-Form). */
  box-shadow: 0 2px 14px rgba(0,0,0,.08);
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/*
 * Zusätzlicher, tieferer Schatten beim Scrollen — eigene opacity-animierte
 * Schicht → compositor-only, kein Layout-Trigger, kein Repaint der Seite.
 */
#nav::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
#nav.scrolled::after {
  opacity: 1;
}

/*
 * Desktop: Glas-Effekt via ::before-Pseudo-Element (pointer-events: none).
 *
 * WARUM PSEUDO-ELEMENT statt direkt auf #nav:
 * Safari rendert backdrop-filter-Ebenen neu, sobald sich irgendein Kind-
 * Element im selben Stacking-Context ändert (Hover, Focus, Active-State
 * eines Links). Das führte zum sichtbaren Flackern beim Klicken im Header.
 * Lösung: backdrop-filter auf ein passives ::before isolieren (kein
 * pointer-events, kein State-Wechsel) → die Blur-Ebene wird nicht mehr
 * bei Klicks neu berechnet.
 *
 * WARUM transform: none auf #nav:
 * Verhindert den Chromium-Bug: backdrop-filter + transform auf demselben
 * Element → Blur rechnet gegen die eigene Layer statt den Seiteninhalt.
 * Mit dem ::before-Ansatz liegt der backdrop-filter nicht mehr auf #nav,
 * sondern auf dem Pseudo-Element, transform: none bleibt trotzdem korrekt.
 */
@media (min-width: 1160px) {
  #nav {
    background: transparent;
    transform: none;
    /* background-color-Transition läuft auf ::before */
    transition: box-shadow var(--dur-base) var(--ease-out);
  }
  /* Blur-Schicht: passiv, nie Ziel von Klicks → kein Repaint beim Klicken */
  #nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgba(250,250,248,.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: background-color var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  #nav.scrolled::before {
    background: rgba(250,250,248,.98);
  }
  /* Nav-Inhalt muss über der Blur-Schicht liegen.
   * isolation:isolate erzeugt einen eigenen Stacking-Context → trennt die
   * Compositor-Ebenen der Links (transform-Transitions auf ::after) vom
   * backdrop-filter auf #nav::before. Verhindert das Safari-Flackern. */
  .nav-inner {
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  /*
   * Dropdown erhält denselben Glas-Look wie die Hauptleiste (gleiche
   * Basisfarbe + backdrop-filter). Bewusst direkt auf .drop statt über ein
   * passives ::before wie bei #nav: .drop nutzt ::before/::after bereits für
   * die Pfeilspitze (Border + Fill, siehe unten). .drop trägt zudem selbst
   * ein transform (Zentrierung + Öffnen-Animation) – die für #nav dokumentierte
   * Chromium-Eigenheit (backdrop-filter + transform auf demselben Element)
   * kann hier also theoretisch auftreten; die Öffnen-Transition ist mit 240ms
   * aber kurz und die Blur-Fläche unauffällig genug, dass dies in Tests
   * keine sichtbaren Artefakte verursacht hat.
   */
  .drop {
    background: rgba(250,250,248,.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  #nav.scrolled .drop {
    background: rgba(250,250,248,.98);
  }
  /* Pfeilspitzen-Füllung an die neue Glasfarbe angleichen (statt Weiß) */
  .drop::after {
    border-bottom-color: rgba(250,250,248,.92);
  }
  #nav.scrolled .drop::after {
    border-bottom-color: rgba(250,250,248,.98);
  }
}

/* Nutzer mit reduzierter Transparenz: blickdichter statt Glas-Optik, kein Blur. */
@media (min-width: 1160px) and (prefers-reduced-transparency: reduce) {
  #nav::before {
    background: rgba(250,250,248,.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #nav.scrolled::before {
    background: rgb(250,250,248);
  }
  .drop {
    background: rgba(250,250,248,.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #nav.scrolled .drop {
    background: rgb(250,250,248);
  }
}

/*
 * Web-App vom Home-Bildschirm des iPhones (html.web-app, gesetzt von
 * js/layout.js): Leiste und Menü-Panel angedockt statt schwebend.
 * Seit iOS 26 legt iOS dort eine Unschärfe über Statusleiste und
 * Seitenanfang. WebKit lässt sie nur weg, wenn an der Oberkante ein fest
 * stehendes Element mit deckender Hintergrundfarbe über mindestens 90 %
 * der Breite liegt, und färbt die Statusleiste dann in dessen Farbe. Die
 * schwebende Leiste mit Abstand zum Rand erfüllt das nicht. Deshalb hier
 * ohne Abstand, ohne Rundung, deckend und ohne backdrop-filter (mit Glas
 * zeichnet iOS die Kante wieder unscharf). Der frühere Außenabstand steht
 * jetzt innen, Logo, Lupe, Burger und Menüeinträge bleiben an ihrer
 * Stelle. In Safari und am Desktop bleibt alles schwebend.
 */
html.web-app #nav {
  top: 0;
  left: 0;
  right: 0;
  max-width: none;
  padding: 0 var(--space-4);
  border-radius: 0;
  background: rgb(250,250,248);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
html.web-app #nav::before {
  background: rgb(250,250,248);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Offenes Menü: wie schwebend übernimmt das Panel die Fläche */
html.web-app #nav.menu-open {
  background: transparent;
  box-shadow: none;
}
html.web-app .mob-panel {
  top: 0;
  left: 0;
  right: 0;
  max-width: none;
  padding: 0 var(--space-4);
  border-radius: 0;
  max-height: calc(100vh - var(--space-4));
  max-height: calc(100dvh - var(--space-4));
  background: rgb(250,250,248);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Tablet: 72px */
@media (min-width: 768px) {
  #nav { height: 72px; }
}

/* Desktop: 82px */
@media (min-width: 1200px) {
  #nav { height: 82px; }
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(.75rem, 4vw, 2rem);
  gap: 1rem;
  min-width: 0;
}

/* ── Logo ── */
.nav-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  margin-right: auto;
  gap: .1rem;
}
/* Kompensiert die automatische Zentrierung von .nav-inner ab var(--max) fließend
   (nicht erst ab einem festen Breakpoint) – Logo bleibt bündig mit Hero-Text,
   auch im Übergangsbereich zwischen var(--max) und var(--max) + 2 × Padding. */
.nav-logo-wrap {
  margin-left: calc(-1 * min(2rem, max(0px, (100vw - var(--max)) / 2)));
}
.nav-logo {
  display: flex;
  align-items: center;
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .nav-logo:hover { opacity: .8; }
}
.nav-logo img,
.nav-logo-img {
  height: clamp(3.2rem, 8vw, 4.8rem);
  width: auto;
  /* Reserviert die Breite anhand des echten Logo-Seitenverhältnisses,
     bevor das Bild geladen ist → kein Layout-Sprung (CLS). */
  aspect-ratio: 650 / 434;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* ── Desktop Links (ausgeblendet auf Mobile) ── */
.nav-links {
  position: relative;
  display: none;
  align-items: center;
  list-style: none;
  gap: .05rem;
  flex-shrink: 1;
  min-width: 0;
  margin-left: clamp(2rem, 4vw, 4rem);
}

/* Umschaltpunkt Mobil/Desktop: 1160px, vorher 1040px, davor 960px.
   Die Linkleiste braucht mit Logo, Suche und dem "Platz buchen"-Knopf rund
   1160px. Zwischen 960 und 1040 lief der gelbe Knopf ueber den rechten Rand
   hinaus und legte sich ueber die Lupe; zwischen 1040 und rund 1155 war die
   Leiste zwar da, aber zu eng: der letzte Menuepunkt lag unter dem gelben
   Knopf. Unterhalb von 1160px uebernimmt deshalb das mobile Menue, das dort
   sauber in einen Bildschirm passt.
   Dieser Wert steht an sechs Stellen in dieser Datei und zweimal als
   matchMedia in js/layout.js - alle acht muessen gleich bleiben. Dazu haengen
   die Bereichsleiste .lnav (css/page.css) und die klebende Rechnerkarte
   (css/training.css) am selben Wert, weil sie sich an der Hauptnavigation
   ausrichten. */
@media (min-width: 1160px) {
  .nav-links { display: flex; }
}

/*
 * Mittige Linkleiste ab 1200px.
 *
 * Die Leiste wird aus dem Flex-Fluss genommen und an der Mitte von
 * .nav-inner ausgerichtet. "Platz buchen" sitzt dafuer als eigenes Flex-Kind
 * rechts neben der Leiste (siehe .nav-cta weiter unten), sonst wuerde der
 * gelbe Knopf mit in die Mitte wandern und rechts eine Luecke bis zur Lupe
 * aufreissen.
 *
 * Achtung: Ausserhalb des Flex-Flusses kann die Leiste nicht schrumpfen.
 * Kommt ein Menuepunkt dazu oder wird einer laenger, bei 1160px pruefen, ob
 * sie noch zwischen Logo und Knopf passt. Genau daran scheiterte der
 * vorherige Umschaltpunkt 1040px (siehe oben).
 */
@media (min-width: 1160px) {
  .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
}

.nav-links > li > a,
.nav-links > li > button,
.drop a,
.nav-burger,
#mmenu a,
#mmenu button {
  -webkit-tap-highlight-color: transparent;
}

.nav-links > li > a,
.nav-links > li > button {
  display: block;
  padding: .4rem .6rem;
  min-height: var(--touch);
  line-height: var(--touch);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-soft);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  touch-action: manipulation;
  position: relative;
}
/* .nav-links > li > button hat kein eigenes Ziel (reiner Aufklapper, z.B. "Mitglied werden")
   → Browser-Standardstil des <button> zurücksetzen */
.nav-links > li > button {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
@media (hover: hover) {
  .nav-links > li > a:hover,
  .nav-links > li > button:hover,
  .nav-links > li.has-drop:hover > a,
  .nav-links > li.has-drop:hover > button,
  .nav-links > li > a.active {
    color: var(--color-text);
  }
}
.nav-links > li > a.active { color: var(--color-text); }

/* ── Hauptmenü: animierter Unterstrich (Hover + aktiver Zustand) ──
   transform: scaleX statt width, damit die Animation compositor-only
   läuft (kein Layout-Trigger pro Frame). */
.nav-links > li > a:not(.nav-cta)::after,
.nav-links > li > button::after {
  content: '';
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: .1rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .nav-links > li > a:not(.nav-cta):hover::after,
  .nav-links > li > button:hover::after,
  .nav-links > li.has-drop:hover > a::after,
  .nav-links > li.has-drop:hover > button::after {
    transform: scaleX(1);
  }
}
.nav-links > li > a.active::after,
.nav-links > li > button.active::after {
  transform: scaleX(1);
}

/* "Startseite" steht bewusst in derselben Farbe wie die übrigen
   Punkte. In Blau las er sich wie „hier bist du“ und stand auf jeder
   Unterseite neben dem wirklich aktiven Menüpunkt. */

/* Verhindert Browser-Default-Blau beim Klick auf Dropdown-Items */
.nav-links > li > a:active,
.nav-links > li > button:active { color: var(--color-text-soft); }

/* ── Dropdown ── */
.nav-links li.has-drop { position: relative; }

.drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--color-bg-card);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--radius-md);
  min-width: 220px;
  padding: .6rem;
  opacity: 0;
  pointer-events: none;
  /*
   * will-change hier ABSICHTLICH ENTFERNT:
   * #nav hat backdrop-filter (Desktop 1160px+). Wenn ein Kind-Element via
   * will-change zu einer eigenen Compositor-Ebene promoted wird, muss Chromium
   * den Backdrop-Sampling-Schritt jedes Mal neu berechnen wenn diese Ebene
   * erzeugt oder zerstört wird → sichtbarer Flash beim Öffnen/Schließen.
   * Moderne Browser promoten opacity+transform-Transitionen automatisch während
   * der Animation; explizite Pre-Promotion ist hier kontraproduktiv.
   */
  /*
   * Bewusst eigene Werte statt --dur-fast/--ease-out: das Dropdown soll
   * weicher auslaufen als die übrigen Nav-Übergänge. Die Quint-Kurve
   * cubic-bezier(.16, 1, .3, 1) startet schneller und bremst am Ende
   * deutlich stärker ab als das globale Ease-Out-Cubic → das Menü kommt
   * an, statt anzuhalten. 240ms, weil 200ms bei dieser Kurve das
   * Abbremsen kaum sichtbar werden lässt.
   *
   * prefers-reduced-motion bleibt abgedeckt: der Reduced-Motion-Block in
   * css/base.css (Abschnitt Accessibility) schaltet transform ab und lässt
   * Deckkraft und visibility überblenden, beim Öffnen wie beim Schließen —
   * hier ist keine eigene Regel nötig.
   *
   * visibility nimmt die Links des geschlossenen Dropdowns aus der
   * Tab-Reihenfolge – sonst landet der Tastaturfokus auf unsichtbaren
   * Einträgen. Beim Schließen springt sie erst nach der Ausblendung
   * (Verzögerung .24s) um, beim Öffnen sofort (siehe .open unten).
   */
  visibility: hidden;
  transition: opacity .24s cubic-bezier(.16, 1, .3, 1),
              transform .24s cubic-bezier(.16, 1, .3, 1),
              visibility 0s linear .24s;
  box-shadow: var(--shadow-lg);
  z-index: 300;
}

/* Pfeilspitze — zwei Pseudoelemente für Border + Fill */
.drop::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0,0,0,.09);
}
.drop::after {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--color-bg-card);
}

.nav-links li.has-drop.open .drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.drop a,
.subdrop-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .55rem .9rem;
  min-height: var(--touch);
  line-height: 1.3;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  border-radius: var(--radius-sm);
  /*
   * Statt background-Transition (Repaint) nur color-Transition (kein Repaint).
   * Der Hintergrund-Wechsel läuft via opacity auf einem ::before-Pseudo-Element
   * in der gleichen Compositor-Ebene → rein opacity-basiert.
   */
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}
/* .subdrop-trigger ist ein <button> (kein eigenes Ziel) statt <a> → Browser-Standardstil zurücksetzen */
.subdrop-trigger {
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .drop a:hover,
  .subdrop-trigger:hover {
    color: var(--color-text);
    background-color: var(--color-tint);
  }
}
/* Fokus im Dropdown: Hintergrund statt blauem Ring */
.drop a:focus-visible,
.subdrop-trigger:focus-visible {
  outline: none;
  background-color: var(--color-tint);
  color: var(--color-text);
}

/* ── Verschachteltes Untermenü (z.B. Mannschaften) ── */
.has-subdrop { position: relative; }
.subdrop-trigger { justify-content: space-between; }
.subdrop-trigger::after {
  content: '▾';
  font-size: .55rem;
  opacity: .4;
  margin-left: .5rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.has-subdrop.open .subdrop-trigger::after { transform: rotate(180deg); }
/* Bewusster Trade-off: grid-template-rows statt transform, da die Zielhöhe
   unbekannt ist. Löst Layout pro Frame aus statt zu compositen – bei kurzen
   Listen unkritisch. */
.subdrop-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-fast) var(--ease-out);
}
.has-subdrop.open .subdrop-wrap { grid-template-rows: 1fr; }
/* Eingeklappte Untermenü-Links aus der Tab-Reihenfolge nehmen (wie .drop) */
.subdrop {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-fast);
}
.has-subdrop.open .subdrop { visibility: visible; transition-delay: 0s; }
.subdrop a { padding-left: 1.6rem; font-size: var(--fs-xs); }

/* ── CTA Button (Platz buchen) ── */
/*
 * Liegt im Markup direkt in .nav-inner, nicht in .nav-links (siehe
 * js/layout.js), damit die Linkleiste mittig stehen kann und der Knopf
 * trotzdem rechts bei der Lupe bleibt.
 *
 * Deshalb steht hier alles, was er vorher von .nav-links > li > a geerbt
 * hat: eigene Sichtbarkeit (unter 1160px uebernimmt das mobile Menue, dort
 * liegt der Knopf als .mob-cta im Panel), align-items statt line-height fuer
 * die vertikale Mitte und der Tap-Highlight.
 */
.nav-cta {
  display: none;
  align-items: center;
  flex-shrink: 0;
  padding: .5rem 1.1rem;
  min-height: var(--touch);
  background: var(--color-brand);
  /* Schwarz wie .btn-terra in css/base.css */
  color: var(--color-text);
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  font-size: var(--fs-sm);
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
@media (min-width: 1160px) {
  .nav-cta { display: flex; }
}
@media (hover: hover) {
  .nav-cta:hover {
    background-color: var(--color-brand-dk);
  }
}
/* Flach und ohne Anheben wie alle Buttons (css/base.css, Abschnitt
   Buttons), die Rückmeldung kommt beim Drücken */
.nav-cta:active { transform: scale(.97); transition-duration: .12s; }

/* ── Burger (immer sichtbar auf Mobile) ── */
.nav-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  min-width: var(--touch);
  min-height: var(--touch);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  touch-action: manipulation;
  border-radius: var(--radius-sm);
  /*
   * Rueckmeldung beim Druecken. Vorher gab es weder :hover noch :active, und
   * -webkit-tap-highlight-color: transparent (weiter oben) nimmt zusaetzlich
   * die vom Browser gestellte Hervorhebung weg – zwischen Fingerdruck und dem
   * Erscheinen des Menues (gemessen 337ms) passierte sichtbar nichts.
   * Kurze Dauer, damit das Zurueckfedern nicht als Verzoegerung liest.
   */
  transition: background-color 120ms var(--ease-out),
              transform 120ms var(--ease-out);
}
@media (hover: hover) {
  .nav-burger:hover { background-color: var(--color-tint); }
}
.nav-burger:active {
  background-color: var(--color-tint);
  transform: scale(.92);
}
/* Striche → X folgt dem Panel, nicht einer eigenen Dauer: --burger-x
   (0 = Striche, 1 = X) setzt js/layout.js aus der Höhe des Panels, auch
   beim Ziehen mit dem Finger. In zwei Hälften: erst laufen die Striche zu
   einem zusammen, dann dreht er sich zum X. Gleichzeitig ergäbe sich
   unterwegs ein „>“, das wie ein Pfeil liest. */
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transform-origin: center;
}
.nav-burger {
  --burger-zusammen: min(1, var(--burger-x, 0) * 2);
  --burger-drehen: max(0, var(--burger-x, 0) * 2 - 1);
}
.nav-burger span:nth-child(1) {
  transform: translateY(calc(7px * var(--burger-zusammen))) rotate(calc(45deg * var(--burger-drehen)));
}
.nav-burger span:nth-child(2) {
  opacity: calc(1 - var(--burger-zusammen));
}
.nav-burger span:nth-child(3) {
  transform: translateY(calc(-7px * var(--burger-zusammen))) rotate(calc(-45deg * var(--burger-drehen)));
}

@media (min-width: 1160px) {
  .nav-burger { display: none; }
}

/* ── Mobiles Menü: die Leiste wächst zum Menü ──
   Das Panel liegt deckungsgleich unter der Leiste (#nav, z-index 200) und
   wächst beim Öffnen von ihrer Höhe nach unten auf die Höhe seines Inhalts,
   beim Schließen auf demselben Weg zurück. Solange das Menü offen ist, nimmt
   #nav.menu-open der Leiste Fläche und Schatten; Logo, Lupe und Burger
   liegen dann auf dem Glas des Panels, beides liest sich als eine Fläche.
   Höhe, Abdunkeln und Rückweg steuert eine Feder in js/layout.js, damit sich
   die Bewegung jederzeit umkehren und mit dem Finger greifen lässt. */
#mmenu {
  display: none;
}

@media (max-width: 1159px) {
  #mmenu {
    --nav-h: 60px;
    position: fixed;
    inset: 0;
    z-index: 190;
    display: block;
    visibility: hidden;
    pointer-events: none;
  }
  /* .is-visible bleibt bis zum Ende der Schließbewegung, .open nur solange
     das Menü logisch offen ist. Klicks gehen deshalb schon beim Schließen
     wieder an die Seite. */
  #mmenu.is-visible { visibility: visible; }
  #mmenu.open { pointer-events: auto; }

  /* Abdunkeln der Seite. Die Deckkraft folgt der Höhe des Panels
     (--mob-fortschritt, gesetzt von js/layout.js), auch beim Ziehen. */
  #mmenu::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.3);
    opacity: var(--mob-fortschritt, 0);
  }

  /* Ohne Übergang: Das Panel liegt beim Öffnen deckungsgleich unter der
     Leiste. Blendete sie langsam aus, stünde ihre Unterkante als Strich
     im wachsenden Glas. Beim Schließen schaltet js/layout.js ebenso ohne
     Übergang zurück (aufraeumen). */
  #nav.menu-open { background: transparent; box-shadow: none; transition: none; }
  #nav.menu-open::after { opacity: 0; transition: none; }
  /* Der Zusatzschatten zurück ebenfalls ohne Übergang. Inline-Styles
     erreichen ::after nicht, daher die Klasse (js/layout.js, aufraeumen). */
  #nav.ohne-uebergang::after { transition: none; }
}
@media (min-width: 768px) and (max-width: 1159px) {
  #mmenu { --nav-h: 72px; }
}

.mob-panel {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  max-width: var(--max);
  margin: 0 auto;
  height: var(--nav-h);
  max-height: calc(100vh - 2 * var(--space-4));
  max-height: calc(100dvh - 2 * var(--space-4));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Gleiche Glasfarbe wie die Desktop-Leiste, etwas durchlässiger, damit die
     Seite dahinter erkennbar bleibt. Auf dem Handy trägt nur dieses Panel
     einen backdrop-filter, und nur solange das Menü sichtbar ist. */
  background: rgba(250,250,248,.82);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  /* Der Schatten wächst mit dem Panel (--mob-fortschritt): zugeklappt der
     der Leiste (#nav: 0 2px 14px), offen var(--shadow-lg) (0 16px 48px).
     Gerechnet werden nur Längen: Ein Schatten mit Versatz und Unschärfe 0
     liegt ganz unter dem Panel und ist unsichtbar. Werte hier mitziehen,
     wenn sich die Schatten der Leiste oder --shadow-lg ändern. */
  --mob-f: var(--mob-fortschritt, 0);
  box-shadow:
    0 calc(2px * (1 - var(--mob-f))) calc(14px * (1 - var(--mob-f))) rgba(0,0,0,.08),
    0 calc(16px * var(--mob-f)) calc(48px * var(--mob-f)) rgba(0,0,0,.10);
}
/* Gescrollt trägt die Leiste zusätzlich --shadow-md (#nav::after) */
#nav.scrolled ~ #mmenu .mob-panel {
  box-shadow:
    0 calc(2px * (1 - var(--mob-f))) calc(14px * (1 - var(--mob-f))) rgba(0,0,0,.08),
    0 calc(6px * (1 - var(--mob-f))) calc(24px * (1 - var(--mob-f))) rgba(0,0,0,.08),
    0 calc(16px * var(--mob-f)) calc(48px * var(--mob-f)) rgba(0,0,0,.10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mob-panel { background: rgba(250,250,248,.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .mob-panel {
    background: rgb(250,250,248);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Zugeklappt so deckend wie die Leiste (.97), offen Glas (.82): Eine
   zweite Schicht in der Farbe der Leiste liegt über der Fläche und unter
   dem Inhalt und blendet mit dem Fortschritt des Panels aus. .82 plus
   .833 von den restlichen .18 ergibt .97. Sonst würde die Leiste beim
   Antippen schlagartig durchsichtiger. Als eigene Schicht statt calc()
   im Farbwert, weil ein Browser, der das nicht kann, das Panel ganz
   durchsichtig ließe. z-index -1 bleibt im Stapel des Panels (den der
   backdrop-filter bildet). Ohne backdrop-filter ist das Panel ohnehin
   deckend, dort verschwindet die Schicht dahinter. */
.mob-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250,250,248,.833);
  opacity: calc(1 - var(--mob-fortschritt, 0));
  pointer-events: none;
}

/* Platzhalter unter Logo, Lupe und Burger der Leiste */
.mob-panel::before {
  content: '';
  flex: none;
  height: var(--nav-h);
}

.mob-views {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Eine Ebene je Ansicht: Hauptmenü und ein Untermenü pro Gruppe. Alle liegen
   übereinander; sichtbar ist nur die aktive, beim Wechsel blendet die alte
   noch kurz aus (visibility erst nach .2s). Danach fällt sie auf Höhe 0
   zusammen, sonst ließe eine längere, unsichtbare Ansicht die Liste ins
   Leere scrollen. */
.mob-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: .25rem .75rem .5rem;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .2s,
              max-height 0s linear .2s;
}
/* Einträge nie stauchen: Auch in der zusammengefallenen Ansicht behalten
   sie ihre Lage, sonst misst js/layout.js beim Zurück eine falsche Stelle. */
.mob-view > * {
  flex-shrink: 0;
}
.mob-view.is-active,
.mob-view.is-morphing {
  max-height: 200vh;
  overflow: visible;
  visibility: visible;
  transition-delay: 0s;
}
/* Sichtbar werden muss eine Ebene sofort, auch bei reduzierter Bewegung:
   css/base.css gibt dort jedem Element eine Transition von .2s, auch für
   visibility. Solange gilt die Ebene samt Inhalt als unsichtbar, und der
   Fokus, den js/layout.js beim Wechsel auf Überschrift bzw. Zeile setzt,
   ginge ins Leere. Im Menü blendet dort deshalb nur die Deckkraft. Die
   verlassene Ebene bleibt über .is-morphing stehen, bis sie ausgeblendet
   ist. */
@media (prefers-reduced-motion: reduce) {
  .mob-view,
  .mob-view * {
    transition-property: opacity !important;
  }
}

/* Einträge gleiten beim Öffnen leicht versetzt herein, von oben nach unten.
   --i setzt js/layout.js je Eintrag. Beim Schließen blenden sie schnell und
   gemeinsam aus. Die Überschrift eines Untermenüs (.mob-back) ist davon
   ausgenommen, sie bewegt js/layout.js von der angetippten Zeile aus. */
.mob-view > :not(.mob-back) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .14s var(--ease-out),
              transform .14s var(--ease-out),
              background-color .12s var(--ease-out);
}
.mob-panel.is-in .mob-view.is-active > :not(.mob-back) {
  opacity: 1;
  transform: none;
  transition: opacity .3s var(--ease-out),
              transform .5s var(--ease-out),
              background-color .12s var(--ease-out);
  transition-delay: calc(40ms + var(--i, 0) * 22ms),
                    calc(40ms + var(--i, 0) * 22ms),
                    0s;
}

.mob-item,
.mob-back,
.mob-sub-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 3rem;
  padding: .25rem .625rem;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: clamp(1.5rem, 6.4vw, 1.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Rückmeldung sofort beim Drücken, nicht erst beim Loslassen */
.mob-panel.is-in .mob-view.is-active > .mob-item:active,
.mob-panel.is-in .mob-view.is-active > .mob-sub-item:active,
.mob-back:active {
  background-color: var(--color-tint);
  transition-duration: 0s;
  transition-delay: 0s;
}
@media (hover: hover) {
  .mob-panel.is-in .mob-view.is-active > .mob-item:hover,
  .mob-panel.is-in .mob-view.is-active > .mob-sub-item:hover,
  .mob-back:hover {
    background-color: var(--color-tint);
    transition-delay: 0s;
  }
}

/* Kein blauer Fokus-Ring auf den mobilen Menüpunkten (wie bisher) */
#mmenu a:focus,
#mmenu .mob-go:focus,
#mmenu .mob-back:focus {
  outline: none;
}

.mob-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Unter einer Gruppe: die Seite, auf der man gerade ist */
.mob-hier {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .15rem;
  font-size: .875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--color-navy);
}
.mob-hier[hidden] { display: none; }
.mob-hier::before,
#mmenu .active::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-navy);
  flex-shrink: 0;
}
.mob-hier::before { width: 6px; height: 6px; }

/* Aktuelle Seite selbst: blau, Punkt rechts */
#mmenu .active { color: var(--color-navy); }
#mmenu .active::after { margin-left: auto; }

.mob-chev {
  width: .625rem;
  height: 1rem;
  margin-left: auto;
  flex-shrink: 0;
  fill: none;
  stroke: #8E8E8E;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Überschrift eines Untermenüs, zugleich Zurück-Knopf. Gleiche Schrift wie
   die Zeile im Hauptmenü, aus der sie hervorgeht. */
.mob-back {
  gap: .25rem;
  padding-left: .125rem;
}
.mob-back svg {
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Einträge im Untermenü: kleiner, bündig mit dem Text der Überschrift
   (.125rem Abstand + 1.625rem Pfeil + .25rem Lücke = 2rem) */
.mob-sub-item {
  min-height: var(--touch);
  padding-left: 2rem;
  font-size: clamp(1.125rem, 4.8vw, 1.25rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-slight);
}

/* Schloss hinter "Mitgliederbereich" (Dropdown und Handymenü): Hinweis,
   dass dort eine Anmeldung nötig ist. Grau wie Sekundärtext. */
.nav-schloss {
  width: 14px;
  height: 14px;
  margin-left: .4rem;
  flex-shrink: 0;
  color: var(--color-text-mute);
}
.mob-sub-item .nav-schloss {
  width: 1rem;
  height: 1rem;
  margin-left: -.375rem;
}

/* Die angetippte Zeile, solange ihre Überschrift an ihrer Stelle steht.
   Die Zeile selbst bleibt ruhig stehen (kein Hereingleiten, sonst stimmte
   die gemessene Lage nicht), nur ihr Text ist ausgeblendet, die
   Überschrift steht dafür ein. Nie visibility: Beim Zurück übernimmt die
   Zeile sofort den Fokus. */
.mob-view > .mob-go.is-versteckt,
.mob-panel.is-in .mob-view.is-active > .mob-go.is-versteckt {
  opacity: 1;
  transform: none;
  transition: none;
}
.mob-go.is-versteckt .mob-label-text,
.mob-go.is-versteckt .mob-hier,
.mob-go.is-versteckt .mob-chev { opacity: 0; }

/* Beim Wechsel zwischen Hauptmenü und Untermenü hängen alle Einträge an
   der Überschrift: Ihre Deckkraft setzt js/layout.js Bild für Bild
   (zeilenKoppeln). Solange, ohne Transition und ohne Hochgleiten – das
   käme der Überschrift entgegen. */
.mob-view > .mob-item.is-wartet,
.mob-view > .mob-sub-item.is-wartet,
.mob-panel.is-in .mob-view.is-active > .mob-item.is-wartet,
.mob-panel.is-in .mob-view.is-active > .mob-sub-item.is-wartet,
.mob-go .mob-hier.is-wartet,
.mob-go .mob-chev.is-wartet {
  opacity: 0;
  transform: none;
  transition: none;
}
/* Die Überschrift eines Untermenüs beim Öffnen und Schließen an der Kante
   des Panels (kantenKoppeln): nur ohne Transition, Lage und Grund-
   Deckkraft bleiben ihre eigenen. */
.mob-view > .mob-back.is-wartet {
  transition: none;
}

/* Angetippter Link: bleibt markiert, während das Panel zurückfährt */
#mmenu .mob-item.is-gewaehlt,
#mmenu .mob-sub-item.is-gewaehlt {
  background-color: var(--color-tint);
}

.mob-foot {
  flex: none;
  padding: .5rem .875rem .875rem;
  opacity: 0;
  transition: opacity .14s var(--ease-out);
}
.mob-panel.is-in .mob-foot {
  opacity: 1;
  transition: opacity .35s var(--ease-out) .12s;
}

/* #mmenu davor, weil die allgemeine Regel #mmenu a sonst Farbe und
   Schrift des Knopfs überschreiben könnte. */
#mmenu .mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: .75rem 1.5rem;
  background: var(--color-brand);
  /* Schwarz wie .btn-terra in css/base.css */
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  #mmenu .mob-cta:hover {
    background-color: var(--color-brand-dk);
  }
}
/* Flach und ohne Anheben wie alle Buttons, Rückmeldung beim Drücken */
#mmenu .mob-cta:active { background-color: var(--color-brand-dk); transform: scale(.97); transition-duration: .12s; }

/* ── Suchbutton ── */
.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-soft);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
@media (hover: hover) {
  .nav-search-btn:hover {
    color: var(--color-text);
    background-color: var(--color-tint);
  }
}

/* ── Suchoverlay ── */
#search-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(clamp(80px, 14vh, 130px) + var(--space-4));
  padding-left: 1rem;
  padding-right: 1rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s var(--ease-out), visibility 0s linear .2s;
}
#search-overlay.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .2s var(--ease-out), visibility 0s linear 0s;
}
#search-box {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  width: min(600px, 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
#search-input-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
#search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--fs-base);
  background: transparent;
  color: var(--color-text);
  min-width: 0;
}
#search-input::placeholder { color: var(--color-text-mute); }
#search-input::-webkit-search-cancel-button { display: none; }
#search-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-mute);
  font-size: 1rem;
  padding: .3rem .5rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  #search-close:hover { color: var(--color-text); }
}
#search-results {
  list-style: none;
  max-height: 55vh;
  overflow-y: auto;
  padding: .4rem;
}
#search-results li a {
  display: block;
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  #search-results li a:hover { background: var(--color-tint); }
}
.sr-title {
  font-weight: var(--weight-semibold);
  font-size: var(--fs-base);
  color: var(--color-text);
}
.sr-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-top: .1rem;
}
#search-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--color-text-mute);
  font-size: var(--fs-sm);
}

/* ── Sprunglink "Zum Inhalt springen" (eingefügt von js/layout.js) ──
   Trägt zusätzlich .sr-only und bleibt damit unsichtbar, bis er per Tab
   den Fokus bekommt. Dann erscheint er oben links über der Navigation. */
.skip-link.sr-only:focus {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: .7rem 1.2rem;
  overflow: visible;
  clip: auto;
  background: var(--color-navy);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Ziel des Sprunglinks: <main> bekommt tabindex="-1" und nur deshalb den
   Fokus – ein Ring um den ganzen Inhalt hilft niemandem (wie bei
   h1[tabindex="-1"] in css/base.css). */
main[tabindex="-1"]:focus-visible {
  outline: none;
}