/* ════════════════════════════════════════════════════════════════════
   Lila Fitness – Design System v1.0  (lf-design.css)
   Stand: 2026-07-06 | Session 18

   Lädt VOR dem seitenspezifischen <style>-Block jeder Seite.
   Seitenspezifische Regeln können diese Basis-Stile überschreiben.
   Keine !important-Flags — Kaskadenordnung entscheidet.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 0. GLOBAL BASE ────────────────────────────────────────────────
   Verhindert horizontalen Scroll auf allen Seiten.
   NUR auf html, NICHT auf body: overflow-x auf body zwingt den Browser
   (CSS Overflow Spec) dazu, auch overflow-y von body auf "auto" zu setzen —
   dadurch wird body zum "nearest scrolling ancestor" und position:sticky-
   Elemente (z.B. .ds-toc auf den Rechtsseiten) kleben nicht mehr am
   Viewport, sondern brechen. html allein reicht zum horizontalen Clipping,
   da body ohnehin innerhalb von html liegt (Session: TOC-Sticky-Fix).
   ─────────────────────────────────────────────────────────────────── */
html {
  overflow-x: hidden;
}

/* ─── 0a2. GLOBALES BILD-RESET ───────────────────────────────────────
   Verhindert, dass ein <img> ohne eigene Breitenregel (oder mit
   Breiten-/Höhen-HTML-Attributen) seinen Grid-/Flex-Container über die
   Viewportbreite hinaus aufzieht. Bestehende Komponenten-Klassen mit
   eigenem width/height/object-fit überschreiben dies wie gewohnt.
   ─────────────────────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; }

/* ─── GLOBAL FONT FAMILY — Single Source of Truth ───────────────────
   Feste System-Font-Stack — KEIN Webfont/Google Fonts mehr.
   Grund: Montserrat wurde per Google Fonts nachgeladen (DSGVO-Consent-
   gated via lf-consent.js) — dadurch swapte die Schrift bei jedem
   Neuladen sichtbar von Fallback auf Montserrat um ("Zucken" in Nav-Logo
   und Headlines). Ein reiner System-Font-Stack lädt nie nach, swapt nie,
   ist immer sofort verfügbar — behebt das Problem endgültig.
   Alle Elemente erben automatisch. Kein lokales font-family nötig.
   Einzige Ausnahmen: monospace-Felder, SVG-<text> Elemente.
   Stand: Session 66 / Typografie-Architektur v1.0 (Webfont entfernt: siehe unten)
   ─────────────────────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* SSoT-Fix (2026-08-09): -webkit-font-smoothing:antialiased fehlte bisher nur
     lokal pro Seite (index.html, clubs.html etc. hatten es im eigenen body{},
     live-kurse.html/egym-bio-age.html/solarium.html/wellness-sauna.html nicht) —
     dadurch wirkte Text auf diesen 4 Seiten in WebKit/Chrome auf macOS spürbar
     fetter (Subpixel- statt Graustufen-Antialiasing), inkl. gemeinsamer
     Komponenten wie dem Nav-Login-Button. Jetzt zentral, gilt für alle Seiten. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── 0c. ANNOUNCE-BAR ICON + HINTERGRUND ───────────────────────────
   Icons setzen ihre Farbe IMMER selbst (fill="#d6b27a" hardcoded oder
   fill="none" + stroke bei den rotierenden index.html-Icons).
   KEIN globales fill:none !important hier — das killt gefüllte Icons
   (z.B. Blitz-Icon auf clubs.html/jobs.html/etc.) komplett unsichtbar.
   ─────────────────────────────────────────────────────────────────── */



/* ─── 0d. ANNOUNCE BAR ──────────────────────────────────────────────
   Single source of truth für alle Seiten mit Announce-Bar.
   Position: fixed by default (faq, kontakt, kuendigungsservice, _TEMPLATE).
   Inside #top-bar-wrapper: relative (index, clubs, jobs).
   Background: hardcoded #13101E — unabhängig von --bg der jeweiligen Seite.
   ─────────────────────────────────────────────────────────────────── */
.announce-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 201;
  background:
    radial-gradient(ellipse 50% 200% at -10% 50%, rgba(106,0,244,0.32) 0%, rgba(175,78,220,0.15) 35%, transparent 65%),
    radial-gradient(ellipse 26% 200% at -3%  50%, rgba(214,178,122,0.12), transparent 55%),
    radial-gradient(ellipse 38% 200% at 108% 50%, rgba(106,0,244,0.24) 0%, rgba(139,48,255,0.11) 45%, transparent 70%),
    #13101E;
  border-bottom: 1px solid rgba(106,0,244,0.14);
  padding: 0 var(--gutter, 32px);
  height: 38px; box-sizing: border-box;
  display: flex; align-items: center;
  overflow: hidden;
}

/* Pages with #top-bar-wrapper: bar flows with the fixed wrapper */
#top-bar-wrapper .announce-bar {
  position: relative; top: auto; left: auto; right: auto; z-index: auto;
}

.announce-inner {
  max-width: var(--container-max, 1200px); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative; width: 100%;
  text-decoration: none; color: inherit;
}

.announce-icon { flex-shrink: 0; line-height: 1; display: flex; align-items: center; }
.announce-text { line-height: 1.2; font-size: 14px; color: rgba(255,255,255,0.9); text-align: center; }
.announce-text strong { color: #fff; }
.announce-link { color: var(--gold-l, #eacda3); text-decoration: none; margin-left: 8px; font-weight: 600; }@media (hover: hover) and (pointer: fine) {

.announce-link:hover { text-decoration: underline; }
}

.announce-short { display: none; }

@media (max-width: 768px) {
  .announce-bar  { height: 34px; padding: 0 36px 0 12px; }
  /* .announce-icon: "display:none" entfernt (Nachkorrektur 2026-08-12) — auf
     Mobil wird nur der TEXT gekürzt (.announce-long → .announce-short), das
     Icon soll dabei sichtbar bleiben statt komplett zu verschwinden. */
  .announce-long { display: none; }
  .announce-short { display: inline; }
  .announce-text  { font-size: 12px; text-align: center; }
  .announce-link  { display: none; }
}

/* ─── 0b. CSS TOKEN DEFAULTS ────────────────────────────────────────
   Fallback-Werte für alle Seiten. Seitenspezifische :root-Regeln
   in <style>-Blöcken überschreiben diese (spätere Kaskadenposition).
   Neue Seiten erben automatisch die korrekten Werte.
   ─────────────────────────────────────────────────────────────────── */
:root {
  --muted:   var(--text-lo); /* Alias — siehe LESBARKEITSHIERARCHIE unten. War früher
                                 hartkodiert #9490BE; jetzt zeigt eine zentrale Änderung
                                 an --text-lo automatisch auf allen Seiten Wirkung. */
  --text-sm: 14px;    /* Standard-Label-Größe */
  --bg:      #1E1B2E; /* Standard Page-Background */
  /* Desktop-Basiswert. War früher unbedingt in jeder Seite lokal deklariert —
     hat dadurch die Mobile-Overrides unten (Section 0e) auf JEDER Seite
     ausgehebelt (gleiche Spezifität, lokale Regel stand später im Dokument
     als der <link> auf lf-design.css → gewann den Kaskaden-Tie IMMER,
     auch auf Mobile). Jetzt einzige Quelle — lokale Duplikate entfernt. */
  --gutter:  clamp(24px, 5vw, 64px);

  /* ── DESIGN FREEZE TOKENS (Task #116, ERWEITERT 2026-09-05) ────────
     Einzig gültige Radius-Werte. Karten + Modale skalieren seit
     2026-09-05 PROPORTIONAL (Nutzerfreigabe): feste px-Radien wirkten
     auf Mobile optisch ~2× runder als auf Desktop (24px auf ~294px
     Modalbreite = 8,2 % vs. 4,3 % auf Desktop). clamp(min, Ncqw, max):
     Desktop = exakt der alte Freeze-Wert (18/24px), Mobile skaliert
     mit der Breite herunter → gleiche optische Rundung überall.
     cqw = Container-Query-Einheit (Fallback: small viewport width,
     wenn kein Ancestor-Container existiert — z. B. Modale auf
     body-Ebene: dort ist Viewportbreite die korrekte Referenz, da
     Modalbreite = min(Npx, 92vw)).
     Buttons (--radius-sm) bleiben FIX — ihre Höhe (52px) skaliert
     nicht, daher stimmt die Optik ohne Anpassung.
     NIEMALS neue absolute Radius-Werte erfinden — nur diese Tokens. */
  --radius-sm: 12px;                       /* Buttons, Inputs, Nav, Close — FIX */
  --radius-md: clamp(12px, 3cqw, 18px);    /* Cards — Desktop 18px, mobil ~11–12px */
  --radius-lg: clamp(16px, 4.5cqw, 24px);  /* Modals/Overlays — Desktop 24px, mobil ~14–16px */

  /* ── BUTTON FREEZE TOKENS ──────────────────────────────────────── */
  --btn-height:         52px;
  --btn-radius:         var(--radius-sm);
  --btn-padding:        0 32px;
  --btn-font-size:      14px;
  --btn-font-weight:    600;
  --btn-letter-spacing: 0.08em;

  /* ── BUTTON MAX-WIDTH — Single Source of Truth (Session 93) ──────
     Feste Pixelbreite 280px für JEDEN Button auf der Seite — egal ob
     einzeln oder nebeneinander:
     1) --btn-max-width (280px): EINZELNER Button, allein in seiner Zeile
        (Nav-CTA, Instagram-Button, Standalone-CTAs, etc.)
     2) --btn-pair-max-width (572px): ZWEI Buttons NEBENEINANDER in einer
        Zeile (Hero "Probetraining/Tarife", Final-CTA "Probetraining/Kontakt").
        Gilt für die GESAMTE Zeile (280px + 280px + 12px Gap) — jeder
        Button landet dadurch ebenfalls bei 280px, identisch zum Einzelbutton.
     Buttons INNERHALB von Modals folgen NICHT dieser Regel — sie passen
     sich der Modal-Breite an (width:100% ohne Cap), da Modale eine eigene
     Container-Breite haben. Bei Bedarf hier ändern, NICHT lokal. */
  --btn-max-width: 280px;
  --btn-pair-max-width: 572px;

  /* ── BUTTON TRANSITION — Single Source of Truth ─────────────────
     Einen Wert ändern → alle CTA-Buttons aktualisieren.
     Mechanics (transform, opacity, shadow) global;
     Farben (background, border-color, color) bleiben lokal.     */
  --btn-transition: background 0.15s, border-color 0.15s, color 0.15s,
                    transform 0.12s ease, opacity 0.12s ease,
                    box-shadow 0.15s ease;

  /* ── LESBARKEITSHIERARCHIE (Task #256, überarbeitet Session „Textfarben-
     Lesbarkeit global") — EINZIGE QUELLE für Textfarbrollen sitewide.
     Bewusst OPAKE Farbwerte statt alpha-Blends (außer --text-disabled):
     alpha-transparenter Text verändert seine Wirkung je nach Untergrund
     (Foto, Overlay, Karte, Modal) unkontrolliert — ein fester Farbwert
     bleibt überall gleich "warm" und lesbar, ohne zu strahlen oder zu
     verblassen.
     Dunkler Hintergrund (#1E1B2E):
       --text-hi       Headings, wichtige Labels, aktive Navigation, kurze
                        zentrale Aussagen — NICHT für lange Absätze.
       --text-body     Standard-Lesefarbe: Fließtext, Erklärungen, FAQ-
                        Antworten, Modaltexte, Kartenbeschreibungen.
       --text-lo       Untertitel, Meta, Datums-/Standortzusätze, Fußnoten
                        — NICHT für wesentliche Handlungsanweisungen.
       --text-emphasis Hervorhebungen/<strong> innerhalb längerer Absätze
                        — bewusst kein reines Weiß (Kontrastsprung).
       --text-hint     Dezent wirkender Hinweistext (Mikro-Copy, Zeitangaben,
                        Platzhalter-artige Zusatzinfos), die bewusst leiser
                        als --text-lo sein sollen, aber NICHT deaktiviert
                        sind — bleibt WCAG-AA-lesbar (≥4.5:1), anders als
                        --text-disabled.
       --text-disabled NUR echte deaktivierte Buttons/Optionen/Platzhalter.
       --text-on-accent NUR Text auf gesättigten Akzentflächen (gefüllte
                        Buttons, Badges, Pills, Social-Buttons mit Marken-
                        farbe als Hintergrund) — hier bewusst reines Weiß
                        für maximalen Kontrast, da die Fläche selbst schon
                        die "Wärme" liefert. NIEMALS für normalen Seitentext
                        auf dunklem/hellem Hintergrund verwenden.
       --text-brand     NUR das Wortmarken-Element ".brand-name" ("Lila
                        Fitness" im Logo) — feste, dokumentierte Marken-
                        regel, bewusst reines Weiß, ändert sich nicht mit
                        --text-hi.
     Heller Hintergrund (Rechts-/Serviceseiten): dieselbe Rollen-Logik,
     Suffix -l.
     ──────────────────────────────────────────────────────────────── */
  --text-hi:        #F0EEF8;
  --text-body:      #B5B1CC;
  --text-lo:        #A8A4C2;
  --text-hint:      #8F8BA5; /* zw. --text-lo u. --text-disabled, ≥4.5:1 auf --bg */
  --text-emphasis:  #D8D5E4;
  --text-disabled:  rgba(168,164,194,0.55);
  --text-on-accent: #FFFFFF;
  --text-brand:     #FFFFFF;
  --text-hi-l:      #1A1729;
  --text-body-l:    #3F3B4E;
  --text-lo-l:      #625E70;
  --text-hint-l:    #7A768C;
  --text-emphasis-l: #292536;
  --text-disabled-l: rgba(98,94,112,0.55);
  --text-on-accent-l: #FFFFFF;

  /* ── GOOGLE-BEWERTUNGSBOX HINTERGRUND (SSoT) ──────────────────────
     Startseite: die Box (.review-google-row) sitzt tatsächlich in
     .social-section, NICHT in .review-section — die Box selbst ist nur
     eine 3%-weiße Überlagerung, daher MUSS der tatsächliche Sektions-
     hintergrund exakt übereinstimmen, sonst wirkt dieselbe Box je nach
     Seite unterschiedlich. Einzige Quelle für alle Seiten mit dieser Box. */
  --review-section-bg: var(--bg3, #2D2A48);

  /* ── ABSTAND BEWERTUNGSKARTEN → GOOGLE-BEWERTUNGSBOX (SSoT) ───────────
     Nachkorrektur 2026-08-09, Teil D: Die Startseite hatte lokal
     .review-grid { margin-bottom: 48px }, die 5 Clubdetailseiten hatten
     .club-review-grid OHNE jeden margin-bottom — die Google-Box klebte dort
     direkt an den Bewertungskarten. Zentraler Token, identisch auf
     Startseite und allen Clubseiten (siehe Section 21c weiter unten für
     die eigentliche Regel `.review-grid, .club-review-grid`). */
  --review-grid-to-google-gap: 48px;

  /* ── 0f. ZENTRALE DESIGN-TOKENS (Designsystem-Bereinigung 2026-08-09) ─
     Vorher: identisch (bis auf dokumentierte Abweichungen) in 26
     lokalen :root-Blöcken dupliziert. Sollwerte = index.html
     (Design-Master), abgeglichen gegen alle Fundstellen im Audit.
     Lokale :root-Overrides dieser Tokens sind ab jetzt verboten
     (Ausnahme: ausdrücklich als DESIGN-EXCEPTION markierte Varianten-
     token, z.B. jobs.html eigenes Farbsystem — siehe dort).
     ──────────────────────────────────────────────────────────────── */
  --container-max: 1200px;

  /* Hintergrundebenen (dunkles Theme) */
  --bg2: #252240;
  --bg3: #2D2A48;
  --bg4: #342F52;

  /* Primärfarbe (Lila) + Gold-/Grün-Akzent */
  --purple:   #6a00f4;
  --purple-l: #8B30FF;
  --purple-d: #4d00b3;
  /* Soll laut index.html (Design-Master). Abweichung rgba(106,0,244,0.15)
     kam auf clubs.html + 6 Clubdetailseiten vor — dort korrigiert. */
  --purple-g: rgba(103,71,187,0.18);
  --gold:     #d6b27a;
  --gold-l:   #eacda3;
  --gold-d:   #b08840;
  --gold-g:   rgba(214,178,122,0.15);

  /* Text-Aliase (Kompatibilität mit älteren Klassennamen) */
  --text:   var(--text-hi);
  --white:  var(--text-hi);
  --muted2: var(--text-body);

  /* Ränder */
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);

  /* Radius-Erweiterung (--radius-sm/md/lg bereits oben, Design Freeze) */
  --radius-xl: 28px;

  /* Textgrößen-Skala (ergänzt --text-sm oben) */
  --text-xs:  12px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: clamp(44px, 7vw, 88px);
}

/* ─── 0e. MOBILE GUTTER — Single Source of Truth ───────────────────
   Überschreibt --gutter auf mobilen Viewports global.
   Alle lokalen `--gutter: 16px` Overrides in HTML-Seiten entfernt.
   Breakpoint 900px: deckt auch #mob-footer ab (erscheint bei ≤900px).
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
}

/* ─── 1. NAV LOGIN-BUTTON ─────────────────────────────────────────
   Einheitliche Höhe 44px (Touch-Ziel), kein vertikales Padding nötig.
   ─────────────────────────────────────────────────────────────────── */
.nav-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 72px;
  padding: 0 14px;
  border-radius: var(--radius-sm, 12px);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}@media (hover: hover) and (pointer: fine) {

.nav-login-btn:hover {
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.05);
}
}

/* Kein verkleinerter Login-Button auf schmaleren Desktop-Breiten mehr —
   die Nav-Höhe ändert sich hier nicht, es gibt also keinen Anhaltspunkt
   dafür, den Button kleiner zu machen. Login-Button bleibt bis zum
   Hamburger-Breakpoint (960px) exakt in Desktop-Größe. */

/* ─── 2. NAV RIGHT LAYOUT ─────────────────────────────────────────── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Reihenfolge 2026-08-19 (Nutzerwunsch): Hamburger ganz rechts, Login direkt
   links davon, ein evtl. vorhandener Probetraining-Button (a.btn-probe)
   noch weiter links. Vorher stand der Hamburger im DOM VOR dem Login-Link
   und erschien dadurch links von ihm — widersprach der eigenen Doku aus
   Session 68 ("Login sitzt direkt links vom Hamburger"). Per `order` global
   in lf-design.css gelöst statt HTML auf allen 26 Seiten anzufassen. */
.nav-right .nav-hamburger { order: 3; }
.nav-right .nav-login-btn { order: 2; }
.nav-right a.btn-probe { order: 1; }

/* ─── 1b. MOBILE NAVIGATION — GLOBAL COMPONENT ──────────────────────
   Single Source of Truth für die mobile Navigation auf ALLEN Seiten.
   Struktur: #nav-overlay → #nav-mobile (.nav-mobile)
   Self-Link-Hiding: body[data-page="..."] steuert deklarativ via CSS.
   Änderungen: NUR HIER — niemals lokal in HTML-Dateien.
   Stand: Session 68, Task #336 / 2026-07-15
   ─────────────────────────────────────────────────────────────────── */

#nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 190;
  cursor: pointer;
}
#nav-overlay.open { display: block; }

body.menu-open { overflow: hidden; }

.nav-mobile {
  display: none;
  position: fixed;
  top: 76px;
  left: 16px; right: 16px;
  bottom: 16px;
  max-height: calc(100vh - 76px - 16px - env(safe-area-inset-bottom, 0px));
  z-index: 199;
  background: rgba(30, 27, 46, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-direction: column;
  padding: 8px 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
.nav-mobile.open { display: flex; }

@media (min-width: 480px) {
  .nav-mobile { left: 20px; right: 20px; }
}

/* Nachtrag 2026-08-25n (Nutzerauftrag: "Menüpunkte bei Mobil links bündig, etwas
   eingerückt"): justify-content/text-align von center auf flex-start/left, padding-left
   von 24px auf 32px erhöht (etwas eingerückt statt am Rand). Gilt zentral hier in
   lf-design.css, wirkt dadurch automatisch sitewide auf allen Seiten (Single Source
   of Truth, siehe CLAUDE.md "Mobile Navigation").
   Nachtrag 2026-08-30 (Nutzerauftrag: "rück den Text von links noch etwas ein, nur bei
   Hamburger"): padding-left 32px → 40px. Betrifft NUR die Mobile-Nav (Desktop-Nav
   unverändert); Gruppen-Toggles ziehen synchron mit, Sub-Items eine Stufe tiefer. */
.nav-mobile a:not(.mob-login):not(.mob-probe) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 0 24px 0 40px;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
}
.nav-mobile a:not(.mob-login):not(.mob-probe)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 20%,
    rgba(255, 255, 255, 0.07) 80%,
    transparent 100%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .nav-mobile a:not(.mob-login):not(.mob-probe):hover {
    color: rgba(255, 255, 255, 0.92);
  }
}
.nav-mobile a:not(.mob-login):not(.mob-probe):focus-visible {
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}

.nav-mobile .mob-probe {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 24px 0;
  width: calc(100% - 48px);
  min-height: 52px;
  padding: 0 24px;
  background: #553BA0;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s, transform 0.12s ease, opacity 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-mobile .mob-probe:hover {
    transform: scale(0.97);
    opacity: 0.9;
  }
}
.nav-mobile .mob-probe:active,
.nav-mobile .mob-probe:focus-visible {
  transform: scale(0.97);
  opacity: 0.9;
  outline: none;
}

/* ─── 1b3. MOBILE MENU — LOGIN-LINK (automatisch eingefügt) ─────────
   Wird per lf-core.js aus dem Header-Login-Button dupliziert und in
   .nav-mobile eingehängt, sobald der Header-Button ab ≤960px verschwindet
   (siehe Section 2b). Ghost-Gold-Optik, gleiche 44px+-Touch-Fläche wie
   .mob-probe. Hover NUR auf Geräten mit echtem Zeigegerät (kein
   Touch-"Hover-Kleben"). Stand: 2026-08-14, Mobile-UX-Pass.
   ─────────────────────────────────────────────────────────────────── */
.nav-mobile .mob-login {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 24px 0;
  width: calc(100% - 48px);
  min-height: 48px;
  padding: 0 24px;
  background: transparent;
  color: var(--gold, #d6b27a);
  border: 1px solid rgba(214, 178, 122, 0.4);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s ease, opacity 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-mobile .mob-login:hover {
    border-color: var(--gold, #d6b27a);
    background: rgba(214, 178, 122, 0.08);
  }
}
.nav-mobile .mob-login:active,
.nav-mobile .mob-login:focus-visible {
  transform: scale(0.97);
  opacity: 0.9;
  outline: none;
}

/* ── Self-Link Hiding — ENTFERNT (Session 78) ───────────────────────────
   Alle Nav-Links sind auf allen Seiten sichtbar — aktuelle Seite wird
   via JS .active-Klasse markiert (IIFE vor </body>), nicht ausgeblendet.
   ─────────────────────────────────────────────────────────────────────── */

/* ─── 1b2. NAV-INNER — SINGLE SOURCE OF TRUTH ───────────────────────
   Vollständige Definition hier, keine lokalen Overrides in HTML.
   max-width: 1300px = identisch mit footer .container + footer-bottom.
   padding: clamp(16px, 2.5vw, 40px) = identisch mit footer-bottom.
   Kein !important — Spezifität reicht (keine lokalen .nav-inner mehr).
   Stand: 2026-07-13, Session 55 — Task #253
   ─────────────────────────────────────────────────────────────────── */
.nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(16px, 2.5vw, 40px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (max-width: 1100px) {
  .nav-inner { gap: 24px; }
}

/* ─── 1c. NAV CTA BUTTONS — einheitliche Höhe 44px ───────────────────
   Alle CTA-Buttons IM NAV (Desktop) haben exakt dieselbe Höhe wie
   der Login-Button (44px). Betrifft: .btn-probe im nav-right,
   .nav-cta-praev (Prävention), künftige Nav-CTAs.
   Gilt NUR in der Nav (über parent .nav-right) — .btn-probe außerhalb
   (Hero, Sektionen) bleibt unverändert.
   Spezifität 0,2,0 schlägt lokales .btn-probe (0,1,0) — kein !important nötig.
   ─────────────────────────────────────────────────────────────────── */
.nav-right .btn-probe,
.nav-right a[class*="btn"],
.nav-right button[class*="btn"] {
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 12px);
}

/* .nav-cta-praev (Anfragen-Button auf praevention.html) — Nav-CTA-Höhe 44px */
.nav-right .nav-cta-praev {
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 12px);
}

/* ─── 2b. NAV HAMBURGER ──────────────────────────────────────────────
   Vollständige Definition hier — kein lokales CSS in HTML-Dateien.
   Desktop: display:none — Mobile (≤960px): display:flex via @media.
   Stand: Session 67, Task #331
   Korrektur 2026-08-18: Breakpoint war am 2026-08-16 versehentlich auf
   1180px angehoben worden, weil die erweiterte Desktop-Nav (Leistungen-/
   Mehr-Dropdown + eigenständiger Probetraining-Button) mehr Breite
   brauchte. Diese Erweiterung war aber nur für MOBIL beauftragt — Desktop
   hat jetzt wieder die alte, schmale Nav (6 flache Links, kein Dropdown,
   kein Probetraining-Button im Header) und kommt damit locker mit dem
   ursprünglichen 960px-Breakpoint aus. Zurückgesetzt auf 960px.
   ─────────────────────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 48px; height: 48px;
  padding: 12px;
  box-sizing: border-box;
  background: none; border: none;
  outline: none; cursor: pointer;
  flex-shrink: 0;
  z-index: 1;
  pointer-events: auto;
}
.nav-hamburger:focus { outline: 2px solid transparent; }
.nav-hamburger span {
  display: block;
  height: 2px; width: 25px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ─── 2b-STAGED. GESTUFTER NAV-RÜCKBAU (2026-08-19, Nutzerwunsch;
   Reihenfolge Stufe 2/3 am 2026-08-20 vertauscht — s. Nachtrag unten) ────
   Explizite Reihenfolge, was beim Verkleinern zuerst weicht — von "viel
   Platz" bis "sehr eng". Reihenfolge ist bewusst so gewählt (Nutzervorgabe):
     Volle Breite (>960px): Nav-Links + Wortmarke + Login sichtbar — der
                         Probetraining-Button im Header existiert HIER NOCH
                         NICHT. Er soll nicht neben der vollen Link-Leiste
                         stehen, sondern erst dann auftauchen, wenn die Links
                         dem Hamburger gewichen sind und dadurch wirklich
                         Platz für ihn da ist ("dann ist es auch wirklich
                         vorhanden, vorher nicht").
     Stufe 1 (≤960px):  Nav-Links → Hamburger. GENAU JETZT erscheint der
                         Probetraining-Button neu im Header, direkt neben
                         Login (der freigewordene Platz macht das möglich).
                         Icon, Wortmarke, Probetraining, Login sichtbar.
     Stufe 2 (≤640px):  Probetraining springt zurück in den Hamburger —
                         dort liegt bereits als `.mob-probe` eine
                         1:1-Entsprechung fest im Menü. Wortmarke, Icon,
                         Login, Hamburger bleiben sichtbar.
     Stufe 3 (≤560px):  Wird es noch enger, blendet die Wortmarke
                         "Lila Fitness" aus — nur noch das Icon bleibt vom
                         Logo stehen. Login bleibt noch.
     Stufe 4 (≤300px, Notfall): Login verlässt zusätzlich den Header und
                         wandert (wie zuvor) in den Hamburger — dort liegt
                         bereits IMMER ein automatisch injizierter .mob-login
                         Link bereit (siehe lf-core.js), unabhängig vom
                         Breakpoint. Übrig bleiben nur noch Icon + Hamburger.
   Vorherige Fassung (bis 2026-08-19) zeigte Probetraining bereits bei voller
   Breite dauerhaft im Header und ließ Login gemeinsam mit den Links bei
   960px verschwinden; die Wortmarke wurde nie fest ausgeblendet (nur smooth
   über --nav-logo-h skaliert, teils mit "…"-Kürzung) — das entsprach nicht
   der gewünschten Stufung ("erst wenn es zu eng wird").
   Nachtrag 2026-08-20 (Nutzerauftrag): Stufe 2 und Stufe 3 vertauscht.
   Vorher verschwand zuerst die Wortmarke (≤640px), dann erst Probetraining
   (≤560px) — dadurch gab es einen Breitenbereich (561–640px), in dem die
   Wortmarke schon weg war, der im Hero redundante Probetraining-Button im
   Header aber noch stand. Der Nutzer wollte es umgekehrt: die Marke ist
   wichtiger und soll länger sichtbar bleiben, der Probetraining-Button ist
   verzichtbar, weil dieselbe Aktion bereits fest im Hero-CTA steht. Neue
   Reihenfolge: Probetraining weicht zuerst (≤640px), Wortmarke erst danach
   (≤560px). ─────────────────────────────────────────────────────────────────── */

/* Volle Breite: Probetraining-Header-Button existiert noch nicht — er hat
   dort keine Daseinsberechtigung, solange die volle Link-Leiste steht.
   WICHTIG: Selektor braucht den Typ "a" (nicht nur .nav-right .btn-probe),
   sonst gewinnt die generische SSoT-Regel aus Section 1c mit dem Attribut-
   Selektor ".nav-right a[class*='btn']" (Spezifität 0,2,1 statt 0,2,0) und
   zeigt den Button trotzdem — genau das war der Bug (Button blieb bei
   voller Breite sichtbar). Mit "a.btn-probe" ziehen wir auf dieselbe
   Spezifität 0,2,1 nach, wodurch unsere spätere Regel im Quelltext gewinnt. */
@media (min-width: 961px) {
  .nav-right a.btn-probe { display: none; }
}

@media (max-width: 960px) {
  .nav-hamburger { display: flex !important; }
  .nav-links      { display: none !important; }
  /* Stufe 1: Probetraining erscheint jetzt neu im Header (siehe Kommentar
     oben). Selektor "a.btn-probe" aus demselben Spezifitätsgrund wie oben. */
  .nav-right a.btn-probe { display: inline-flex; }
  /* praevention.html: der grüne "Platz sichern"-Button im Header wurde bisher
     auf 36px/12px-Schrift gequetscht. Er hat bereits eine 1:1-Entsprechung im
     mobilen Menü (.mob-probe "Platz sichern") — daher hier ausgeblendet statt
     verkleinert. Kompound-Selektor (0,2,0) schlägt die lokale, unspezifische
     Regel unabhängig von der Dateireihenfolge. */
  .nav-right .nav-cta-praev { display: none; }
  /* Wortmarke wieder da — der Hamburger hat die Nav-Links entfernt, dadurch
     ist reichlich Platz frei (s. Nachtrag 2026-08-25 unmittelbar oberhalb
     dieses Blocks). Überschreibt den Ausblend-Zwischenschritt bewusst. */
  .nav-brand .brand-block { display: flex; }
}

/* Nachtrag 2026-08-25 (Nutzerauftrag: Wortmarke beim Verengen VOR dem
   Hamburger-Umschalten ausblenden statt abschneiden): Knapp oberhalb der
   Hamburger-Schwelle (961–1100px) stehen noch alle 6 Nav-Links + Wortmarke
   + Login gleichzeitig im Header — das wird eng. Statt die Wortmarke mit
   "…" zu kürzen (laut Nutzerregel vom 2026-08-19 verboten, s. Kommentar bei
   .nav-brand .brand-name weiter unten in dieser Datei), wird sie hier
   komplett ausgeblendet — nur das Icon bleibt stehen. Sobald der Hamburger
   übernimmt (≤960px, Block oben), verschwinden die Nav-Links und es ist
   wieder reichlich Platz frei — dort wird die Wortmarke deshalb bewusst
   wieder eingeblendet (s. `.nav-brand .brand-block { display:flex }` im
   960px-Block oben). Schwelle 1100px ist rechnerisch geschätzt (kein
   Live-Browser zur Pixel-Verifikation in dieser Session verfügbar) — bei
   Bedarf nachjustieren. */
@media (max-width: 1100px) and (min-width: 961px) {
  .nav-brand .brand-block { display: none; }
}

/* Stufe 2: Probetraining springt zurück in den Hamburger — Rest wie gehabt
   automatisch per .mob-probe im Hamburger abgedeckt (fest im HTML). Weicht
   zuerst (Nachtrag 2026-08-20): derselbe CTA steht bereits fest im Hero,
   die Wortmarke ist wichtiger und soll länger sichtbar bleiben. */
@media (max-width: 640px) {
  .nav-right a.btn-probe { display: none !important; }
}

/* Stufe 3: Wortmarke weicht, Icon bleibt allein stehen. */
@media (max-width: 560px) {
  .nav-brand .brand-block { display: none; }
}

/* Stufe 4 (Notfall): Login verlässt zusätzlich den Header — Rest wie gehabt
   automatisch per .mob-login im Hamburger abgedeckt (lf-core.js).
   Breakpoint 2026-08-19 von 480px auf 300px verengt: Screenshot-Check bei
   320px (schmalstes gängiges Handy, z. B. iPhone SE) zeigte noch deutlich
   Platz zwischen Icon und Hamburger — 480px war also viel zu früh und
   verbarg Login unnötig auf ganz normalen Handybreiten. 300px liegt unter
   jeder realistischen Gerätebreite und bleibt nur als echter Notfall-Fallback. */
@media (max-width: 300px) {
  .nav-right .nav-login-btn { display: none !important; }
}

/* ─── 2c. NAV DROPDOWNS (Desktop) — "Leistungen" / "Mehr" ────────────
   Verbindlicher Korrekturauftrag 2026-08-16: reduzierte, konsistente
   Informationsarchitektur. Single Source of Truth für ALLE 26 Seiten —
   keine lokalen Kopien, keine neuen Farben/Radien (nur bestehende Tokens:
   nav-Hintergrund rgba(30,27,46,0.98)/blur wie .nav-mobile, Kartenradius
   var(--radius-md,18px), Button-Radius var(--radius-sm,12px), Textfarben
   identisch zu .nav-links a / .nav-mobile a).
   JS: lfToggleNavDropdown() in lf-core.js (einzige Quelle).
   ─────────────────────────────────────────────────────────────────── */
.nav-links li.nav-dropdown { position: relative; list-style: none; }
.nav-dd-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 2px; margin: -4px -2px; line-height: 1;
  transition: color 0.15s;
}@media (hover: hover) and (pointer: fine) {

.nav-dd-toggle:hover { color: #fff; }
}

.nav-dd-toggle:focus-visible {
  outline: 2px solid var(--purple, #6a00f4);
  outline-offset: 3px;
  border-radius: 4px;
  color: #fff;
}
.nav-dd-toggle .nav-dd-caret {
  width: 9px; height: 9px; flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-dd-toggle[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }

.nav-dd-menu {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: calc(100% + 18px); left: 50%;
  min-width: 224px;
  background: rgba(30, 27, 46, 0.98);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 18px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 210;
}
.nav-dropdown.open .nav-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-menu li { margin: 0; }
.nav-dd-menu a {
  display: block; padding: 12px 16px; border-radius: var(--radius-sm, 12px);
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  white-space: nowrap; transition: background 0.15s, color 0.15s;
}@media (hover: hover) and (pointer: fine) {

.nav-dd-menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
}

.nav-dd-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.06); color: #fff;
  outline: 2px solid var(--purple, #6a00f4); outline-offset: -2px;
}
@media (max-width: 960px) {
  /* Desktop-Dropdown wird ab dem Hamburger-Breakpoint durch die eigene
     mobile Gruppen-Logik (.nav-group-toggle/.nav-group-panel) ersetzt. */
  .nav-links li.nav-dropdown { display: none; }
}

/* ─── 2d. MOBILE NAV-GRUPPEN — "Leistungen" / "Mehr" (aufklappbar) ───
   Wiederverwendet exakt die Typografie/Farben der bestehenden
   .nav-mobile a Zeilen (18px / rgba(255,255,255,0.65) / min-height 56px) —
   keine neuen Werte. JS: lfToggleMobileGroup() in lf-core.js.
   ─────────────────────────────────────────────────────────────────── */
/* Nachtrag 2026-08-25n (Nutzerauftrag: "Menüpunkte bei Mobil links bündig, etwas
   eingerückt"): justify-content von center auf flex-start, padding-left von 24px auf 32px
   — konsistent mit den einfachen .nav-mobile-Links (siehe dort). gap:8px bleibt, dadurch
   sitzt der Caret direkt neben dem Text statt am rechten Rand. */
.nav-mobile .nav-group-toggle {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  position: relative;
  width: 100%; box-sizing: border-box;
  /* Nachtrag 2026-08-30: 32px → 40px, synchron mit den einfachen Nav-Links (s. dort). */
  padding: 0 24px 0 40px; min-height: 56px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px; font-weight: 400; letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
}
.nav-mobile .nav-group-toggle::after {
  content: ''; position: absolute; bottom: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 20%, rgba(255,255,255,0.07) 80%, transparent 100%);
  pointer-events: none;
}
.nav-mobile .nav-group-toggle .nav-group-caret {
  width: 13px; height: 13px; flex-shrink: 0;
  transition: transform 0.25s ease;
}
.nav-mobile .nav-group-toggle[aria-expanded="true"] .nav-group-caret { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .nav-mobile .nav-group-toggle:hover { color: rgba(255, 255, 255, 0.92); }
}
.nav-mobile .nav-group-toggle:focus-visible {
  color: rgba(255, 255, 255, 0.92);
  outline: 2px solid var(--purple, #6a00f4);
  outline-offset: -2px;
}
.nav-mobile .nav-group-panel {
  max-height: 0; overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
  transition: max-height 0.28s ease;
  /* flex-shrink:0 ist zwingend: .nav-mobile ist eine Flex-Column mit
     eigenem max-height + overflow-y:auto (Scroll statt Layout-Bruch).
     Ohne flex-shrink:0 quetscht Flexbox dieses Panel (kein min-height,
     im Gegensatz zu den Nav-Links mit min-height:56px) zuerst zusammen,
     bevor der Container überhaupt scrollt — Inhalte wurden dadurch auf
     ~80px abgeschnitten. Korrekturauftrag 2026-08-16. */
  flex-shrink: 0;
}
.nav-mobile .nav-group-panel.open { max-height: 320px; }
/* Nachtrag 2026-08-25n (Nutzerauftrag: "Menüpunkte bei Mobil links bündig, etwas
   eingerückt"): justify-content von center auf flex-start — konsistent mit den
   übergeordneten Nav-Links. padding-left bleibt bei 40px (bewusst tiefer eingerückt als
   die 32px der Eltern-Ebene, damit die Sub-Items optisch als Unterpunkte erkennbar
   bleiben). */
.nav-mobile .nav-group-panel a {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 48px; width: 100%; box-sizing: border-box;
  /* Nachtrag 2026-08-30: 40px → 48px, bleibt eine Stufe tiefer als die Eltern-Ebene (40px). */
  padding: 0 24px 0 48px;
  color: rgba(255, 255, 255, 0.55); text-decoration: none;
  font-size: 16px; font-weight: 400; letter-spacing: 0.02em;
}
@media (hover: hover) and (pointer: fine) {
  .nav-mobile .nav-group-panel a:hover { color: rgba(255, 255, 255, 0.9); }
}
.nav-mobile .nav-group-panel a:focus-visible {
  color: rgba(255, 255, 255, 0.9);
  outline: 2px solid var(--purple, #6a00f4);
  outline-offset: -2px;
}

/* ─── 3. ICON ARROW ──────────────────────────────────────────────── */
/* GESETZ: Pfeil NIE unterstrichen. NIE translateY. NIE scale().      */
/* margin-left: 5px fix — in inline-flex ggf. lokal überschreiben.   */
/* WICHTIG: text-decoration vom Parent überschreibt child-none immer! */
/* Lösung: Nur den Textanteil in <span class="…-text"> wickeln und    */
/* hover-underline auf diesen Span setzen — NICHT auf den <a>-Tag.    */
.icon-arr {
  display: inline-block;
  font-size: 1.3em;
  line-height: 1;
  margin-left: 5px;
  vertical-align: 0.01em; /* Mitte Großbuchstabe – NICHT ändern */
  transform: translate3d(0, 0, 0); /* expliziter Ruhezustand — Browser interpoliert sonst von "none" aus, was in manchen Engines ein kurzes Y-Wackeln verursacht */
  /* KEIN backface-visibility/3D-Promotion hier: verschiebt in WebKit die vertical-align-Referenz vom Baseline-Mittelpunkt zur Boxkante — genau das Symptom "Pfeil sitzt an der Oberkante statt Mitte". */
  transition: transform 0.15s ease;
  text-decoration: none !important;
  text-decoration-color: transparent !important; /* Unterline vom Parent unsichtbar machen */
}@media (hover: hover) and (pointer: fine) {

a:hover .icon-arr,
button:hover .icon-arr {
  transform: translate3d(4px, 0, 0);
  text-decoration: none !important;
  text-decoration-color: transparent !important;
}
}


/* ─── 4. TEXT-LINKS ──────────────────────────────────────────────── */
/* Regel: Gold; Unterstreichung NUR on Hover (transparent im Ruhezustand). */
/* Arrow (.icon-arr) NIEMALS unterstrichen – via !important Section 3.      */
/* Pfeil bewegt sich NUR horizontal (translateX) – kein Y-Anteil.           */
a.text-link,
a.link-arrow {
  color: var(--gold, #d6b27a);
  font-weight: 500;
  text-decoration: none; /* NICHT auf dem <a> selbst — sonst zieht sich die Linie zwangsläufig
                             auch über .icon-arr (Text-decoration eines Vorfahren lässt sich von
                             Kind-Elementen nicht zuverlässig abschalten). Stattdessen bekommt NUR
                             der Textanteil (.link-text) die Unterstreichung — siehe unten. */
}
/* .link-arrow ist die EINZIGE zentrale Komponente für normale, weiterführende
   Textlinks mit Pfeil (Nachtrag 2026-08-09). Sie legt vollständig fest:
   Flex-Zentrierung (Text+Pfeil vertikal auf einer Achse — KEINE Reparatur
   über top/translateY/negative margins/Sonderwerte pro Seite mehr nötig),
   den Abstand zwischen Text und Pfeil (gap statt margin-left auf .icon-arr,
   siehe .link-arrow .icon-arr unten), Schriftgröße (14px Basis — Seiten mit
   abweichendem Kontext dürfen explizit font-size:inherit setzen, siehe
   Flaschen-Modal-Link auf index.html) und Schriftstärke (500 — siehe oben).
   Keine Seite darf .link-arrow lokal mit eigener Schriftstärke, eigenem
   Pfeilabstand oder eigener Pfeilposition erneut überschreiben.

   FESTE REGEL Pfeilhöhe (Korrektur 2026-08-09, zweiter Anlauf):
   `align-items: center` zentriert Flex-Kinder auf ihre Box-MITTE, nicht auf
   die Glyphen-Mitte — das ist der eigentliche Fehler, den `line-height: 1`
   allein NICHT behebt. `.icon-arr` ist bei font-size:1.3em spürbar höher
   als der Text (1em); zentriert man beide Boxen aufeinander, wandert die
   Grundlinie des Pfeils dadurch unter die Textgrundlinie — der Pfeil sitzt
   sichtbar zu tief, unabhängig von der Zeilenhöhe.
   Der korrekte Bezug ist NICHT die Boxmitte, sondern die GRUNDLINIE:
   `.icon-arr` wird schon im normalen Inline-Textfluss (Button-Kontext,
   Section 3) über `vertical-align: 0.01em` — praktisch Grundlinie — exakt
   auf "Mitte Großbuchstabe" positioniert, weil ein 1.3em-großes Zeichen,
   das auf derselben Grundlinie wie umgebender 1em-Text sitzt, automatisch
   höher hinausragt und optisch mittig zur Großbuchstaben-Höhe erscheint.
   `align-items: baseline` reproduziert exakt dieses bereits bewährte
   Verhalten auch im Flex-Container — KEINE Boxmitte, KEIN manuelles
   Pixel-Nudging per transform/top. Dieser Wert ist FEST. */
a.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 14px;
  line-height: 1;
}
/* Falls kein .link-text-Wrapper vorhanden ist (reiner Text ohne Pfeil), unterstreicht der <a>
   direkt sich selbst — unproblematisch, da hier kein .icon-arr im Spiel ist. */
a.text-link:not(:has(.link-text)) {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s;
}
a.text-link:not(:has(.link-text)):hover,
a.text-link:not(:has(.link-text)):focus-visible {
  text-decoration-color: rgba(214, 178, 122, 0.75);
}
a.text-link .link-text,
a.link-arrow .link-text {
  text-decoration: underline;
  text-decoration-color: transparent; /* unsichtbar im Ruhezustand */
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s;
}
a.text-link:hover .link-text,
a.text-link:focus-visible .link-text,
a.link-arrow:hover .link-text,
a.link-arrow:focus-visible .link-text {
  text-decoration-color: rgba(214, 178, 122, 0.75);
}
a.text-link:focus-visible,
a.link-arrow:focus-visible {
  outline: 2px solid var(--gold, #d6b27a);
  outline-offset: 3px;
  border-radius: 3px;
}
a.link-arrow .icon-arr {
  color: var(--gold, #d6b27a);
  text-decoration: none !important; /* Pfeil NIE unterstrichen — jetzt wirkungslos-redundant,
                                        da die Linie ohnehin nur noch auf .link-text liegt, aber
                                        als zweite Absicherung bewusst stehen gelassen. */
  /* Abstand Text↔Pfeil kommt jetzt aus dem `gap: 5px` auf .link-arrow (Flex-
     Container) — margin-left des globalen .icon-arr (Section 3, für Button-
     Kontexte gedacht) würde sonst zum Gap addieren und den Abstand verdoppeln. */
  margin-left: 0;
  /* .icon-arr ist innerhalb von .link-arrow ein Flex-Item — vertical-align
     wirkt hier nicht mehr (gilt nur für inline/inline-block-Boxen). Die
     korrekte Position kommt jetzt strukturell aus `align-items: baseline`
     auf .link-arrow selbst — gleiches Prinzip (Grundlinie statt Boxmitte)
     wie die vertical-align:0.01em-Feinjustierung im Button-Kontext. */
}
/* Führendes Icon (z. B. Briefumschlag-SVG vor "info@lila-fitness.de ›") —
   NICHT mit align-items:baseline zentrieren wie Text/Pfeil: ein <svg> hat
   keine Text-Grundlinie, seine "Baseline" ist einfach seine Unterkante,
   wodurch es bei align-items:baseline sichtbar zu tief sitzt. `align-self:
   center` zentriert zwar auf die Flex-Zeilen-Box, die sich aus Ascent+Descent
   der Baseline-Geschwister ergibt — optisch liegt die Textmitte (Versalhöhe
   bis Unterlänge) davon aber ~1-2px höher, weil der Descent-Anteil der Zeile
   kleiner ist als der Ascent-Anteil. Feinkorrektur per translateY, analog zur
   vertical-align:0.01em-Feinjustierung im Button-Kontext (Section 6). */
a.link-arrow > svg:first-child {
  align-self: center;
  transform: translateY(1.5px);
  flex-shrink: 0;
}

/* ─── 4b. DATENSCHUTZ-HINWEIS IN FORMULAREN/MODALS ──────────────────
   Korrektur 2026-08-10: .kuend-privacy-note war nur auf index.html,
   mitgliedschaft-kuendigen.html und vertrag-widerrufen.html lokal definiert —
   auf allen anderen Seiten (clubs, faq, jobs, kontakt, praevention, 6
   Clubdetailseiten, kuendigungsservice, 404) hatte die Klasse GAR KEINE
   Wirkung und der Hinweistext übernahm zufällig die Schriftgröße/Farbe des
   jeweils umgebenden Modals. Ab jetzt EIN globaler Basiswert für Schriftgröße/
   Farbe/Zeilenabstand — Box-Look (Hintergrund/Rahmen/Innenabstand) bleibt den
   zwei eigenständigen Seiten (mitgliedschaft-kuendigen/vertrag-widerrufen)
   als lokaler Zusatz vorbehalten, da dort kein Modal-Kontext existiert. */
.kuend-privacy-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 14px;
  padding-left: 4px;
}
/* Der Datenschutz-Link innerhalb dieses Hinweises ist IMMER ein reiner
   Textlink ohne Pfeil: class="text-link" (Gold, Unterstreichung nur on
   Hover) — niemals lila (var(--purple-l)), niemals fett, niemals mit
   .link-arrow/.icon-arr. */
.kuend-privacy-note a {
  color: var(--gold, #d6b27a);
  font-weight: 500;
}

/* ─── 5. CLOSE BUTTONS ──────────────────────────────────────────────
   Einheitlich 40×40px; auf Mobile 44×44px (Touch-Ziel WCAG 2.5.5).
   Position (absolute/fixed) bleibt bei den Einzelregeln pro Seite.
   ─────────────────────────────────────────────────────────────────── */
.close-btn,
.lfc-mclose,
.kuend-close,
.retain-close,
.exit-close,
.praev-close,
.studio-modal-close,
.firma-pre-close,
.apply-modal-close,
.info-modal-close,
.firma-info-close,
.modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important; /* dezenter Ruhezustand-Rahmen */
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: rgba(255, 255, 255, 0.5) !important; /* Task #137: nochmals gedaempft (0.6 war noch zu praesent) */
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  /* Nachtrag 2026-08-20 (Nutzerauftrag: "Hover-Hintergrund beim Kreuz muss auf
     Mobile weg, es gibt dort eh keinen Hover"): der eigentliche Hover-Background
     unten ist bereits korrekt in @media(hover:hover) gegated — das graue Kästchen
     auf Touch-Geräten kam stattdessen vom Browser-Standard-Tap-Highlight (WebKit/
     Chrome zeigen beim Antippen kurz ein grau-transparentes Rechteck über dem
     Element, unabhängig von CSS :hover). Fix direkt an der Quelle. */
  -webkit-tap-highlight-color: transparent !important;
}@media (hover: hover) and (pointer: fine) {

.close-btn:hover,
.lfc-mclose:hover,
.kuend-close:hover,
.retain-close:hover,
.exit-close:hover,
.praev-close:hover,
.studio-modal-close:hover,
.firma-pre-close:hover,
.apply-modal-close:hover,
.info-modal-close:hover,
.firma-info-close:hover,
.modal-close:hover {
  /* Nachtrag 2026-08-20 (Nutzerauftrag: "Hover-HG beim Kreuz endlich entfernen"):
     der graue Kasten hinter dem X kam vom background hier — testweise auch bei
     echtem Maus-Hover (Desktop/DevTools-Responsive-Modus ohne Touch-Emulation)
     sichtbar, wirkte dort wie ein "hängender" Hover-Fehler. Hover zeigt jetzt
     nur noch die Farbänderung (Rahmen + Icon heller), kein Flächen-Hintergrund
     mehr. */
  /* Task #134 (Nutzerauftrag 2026-09-07): "background: none !important" hatte durch
     die hoehere :hover-Spezifitaet den soliden var(--bg2)-Hintergrund der Kanon-
     Close-Kreise beim Hover ausgeschaltet -> Kreis wurde transparent (unpassend).
     Hover ist jetzt eine reine Rahmen-Variante: KEINE background-Deklaration mehr
     (Kanon-bg2 bleibt stehen, Nicht-Kanon-Closes bleiben transparent wie im
     Ruhezustand), Rahmen deutlich sichtbar, Kreuz hell. */
  /* Task #146 (Nutzerentscheidung "wie die Mobile-Variante"): KEINE border-color-
     Deklaration mehr im Hover — der Rahmen bleibt im Ruhezustand (0.18), die
     Hover-Rueckmeldung ist NUR das minimal wachsende Kreuz (scale 1.15, Task #145).
     Frueherer Wert border-color 0.55 (Task #134) entfernt, NICHT wiederherstellen. */
  color: rgba(255, 255, 255, 0.6) !important; /* Task #145: Kreuz beim Hover kaum heller (0.95 war zu hell, Basis 0.5) */
}

/* Task #135: Kreuz waechst NUR beim Hover (14px -> ~18px via Scale, kein Layout-Shift) */
.close-btn:hover svg, .lfc-mclose:hover svg, .kuend-close:hover svg,
.retain-close:hover svg, .exit-close:hover svg, .praev-close:hover svg,
.studio-modal-close:hover svg, .firma-pre-close:hover svg,
.apply-modal-close:hover svg, .info-modal-close:hover svg,
.firma-info-close:hover svg, .modal-close:hover svg, #kf-close:hover svg {
  transform: scale(1.15); /* Task #145: nur minimal groesser (12px -> ~14px; 1.5 war zu dominant) */
}
}

/* Task #134/#135: zentrale SVG-Groesse fuer alle Kanon-Close-Buttons.
   KORREKTUR Task #135 (Nutzerreport "riesig, dominiert"): Ruhezustand wieder
   dezent 14px — GROSS wird das Kreuz NUR beim Hover (Scale-Regel unten im
   Hover-Media-Block). CSS ueberschreibt die width/height-Attribute der
   Inline-SVGs; transform statt width-Wechsel = kein Layout-Shift. */
.close-btn svg, .lfc-mclose svg, .kuend-close svg, .retain-close svg,
.exit-close svg, .praev-close svg, .studio-modal-close svg, .firma-pre-close svg,
.apply-modal-close svg, .info-modal-close svg, .firma-info-close svg,
.modal-close svg, #kf-close svg {
  width: 12px !important;
  height: 12px !important; /* Task #137: Ruhezustand noch kleiner (14px -> 12px) */
  transition: transform 0.15s ease;
}

/* Announce-Bar Close: kein Rahmen im Ruhezustand (Bar ist dauerhaft sichtbar) */
.announce-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: none;
  border: none; border-radius: 6px;
  color: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0;
  transition: color 0.15s;
}@media (hover: hover) and (pointer: fine) {

.announce-close:hover {
  color: rgba(255, 255, 255, 0.9);
}
}

/* SVG-Kreuz in Close-Buttons kleiner — HTML-Attribut wird via CSS überschrieben */
.close-btn svg, .lfc-mclose svg, .kuend-close svg, .retain-close svg,
.exit-close svg, .praev-close svg, .studio-modal-close svg,
.firma-pre-close svg, .apply-modal-close svg, .info-modal-close svg,
.firma-info-close svg, .modal-close svg {
  width: 10px; height: 10px;
}
@media (max-width: 768px) {
  .close-btn,
  .lfc-mclose,
  .kuend-close,
  .retain-close,
  .exit-close,
  .praev-close,
  .studio-modal-close,
  .firma-pre-close,
  .apply-modal-close,
  .info-modal-close,
  .firma-info-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
  }
}
/* 2026-08-18, Nutzerwunsch: Close-Kreuz auf schmalen Screens ohne sichtbaren
   Rahmen — wirkt auf kleinen Modalen (z.B. Probetraining-Funnel) aufgeräumter.
   Touch-Ziel-Größe (44×44px, WCAG 2.5.5) bleibt unverändert, nur der Rahmen
   entfällt. Betrifft mobile ≤480px sitewide (SSoT-Klassenliste identisch mit
   Section 5 oben) — Desktop/Tablet (>480px) unverändert mit Rahmen.
   ⚠ Diese Änderung berührt die zentrale Close-Button-Designregel — aktuell
   bewusst nur mobil-scoped. Falls das auch für Desktop gelten soll, ist das
   Rücksprache wert (Design-Freeze-Komponente). */
@media (max-width: 480px) {
  .close-btn,
  .lfc-mclose,
  .kuend-close,
  .retain-close,
  .exit-close,
  .praev-close,
  .studio-modal-close,
  .firma-pre-close,
  .apply-modal-close,
  .info-modal-close,
  .firma-info-close,
  .modal-close {
    border: none !important;
  }
}

/* ─── 5b. CLOSE BUTTON :focus / :focus-visible ─────────────────────
   Kein outline bei programmatischem Fokus (Modal-Öffnung).
   Section 5d (button:focus) deckt alle <button>-Close-Elemente bereits ab.
   border-color + background nur bei reinem Fokus (kein Hover).
   ─────────────────────────────────────────────────────────────────── */
/* Nachkorrektur 2026-08-10: !important ergänzt — Close-Buttons sind bereits zweimal
   (Session 43 + hier) durch neue button:focus-visible-Regeln mit !important
   überschrieben worden. outline:none MUSS hier hart gewinnen, unabhängig davon,
   was später in der Datei für generische Buttons definiert wird. */
/* BUGFIX 2026-09-05 (Nutzerreport: "beim ersten Öffnen fehlt der Schatten am
   Close-Kreuz"): `box-shadow: none !important` hier löschte den STRUKTURELLEN
   Kanon-Schatten des schwebenden Kreis-Close (index.html, `box-shadow: 0 2px 10px
   rgba(0,0,0,0.35)` — ohne !important, verlor also den Tie). Auslöser: Beim ersten
   Modal-Öffnen setzt lfA11y den Fokus programmatisch auf den Close-Button →
   Chrome wertet das als :focus-visible → Schatten weg. Nach dem ersten Mausklick
   ist Chrome im "Mouse-Mode" → Regel greift nicht mehr → sah "manchmal" korrekt
   aus (gleiche Bug-Klasse wie Session 43). Es existiert nirgends ein Fokus-Glow
   auf Close-Buttons (grep-verifiziert) — die Zeile war rein destruktiv und wurde
   ENTFERNT. Ebenso `background: none` bei reinem Fokus: der Kanon-Kreis braucht
   sein var(--bg2) in JEDEM Zustand (überlebte nur dank !important am Kanon).
   NIEMALS box-shadow/background der Kanon-Close-Kreise über Fokus-Regeln
   anfassen — Fokus-Zustand = Ruhezustand (Design-Entscheidung: kein Ring). */
[class*="close"]:focus,
[class*="close"]:not(input):not(textarea):not(select):focus-visible {
  outline: none !important;
}

/* ─── 5d. INPUT FOCUS BORDER ─────────────────────────────────────────
   Standard: Brand-Lila rgba(106,0,244,0.6).
   Seiten mit spezifischerem Selektor (.xyz-input:focus) gewinnen
   automatisch durch höhere Spezifität – Prävention = Grün bleibt.
   ─────────────────────────────────────────────────────────────────── */
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(106, 0, 244, 0.6);
}

/* ─── 5e. KEIN NATIVER OS-FOKUSRING (Nachtrag 2026-08-11) ──────────
   Ursache des "doppelten weißen Rands" um fokussierte Inputs/Selects
   (z. B. Vorname-Feld im Probetraining-Modal): keine unserer Input-
   Klassen setzte bisher appearance:none. Ohne appearance:none behält
   das Element die native Bedienelement-Darstellung des Betriebssystems
   — bei aktivierter "Volle Tastaturzugriff"-Einstellung (macOS) bzw.
   entsprechenden Browser-A11y-Modi malt das OS einen EIGENEN Fokusring
   außerhalb der CSS-Box, der nicht über outline:none steuerbar ist
   (kein CSS-outline, sondern natives Rendering) und eckige Kanten
   ignoriert border-radius → sichtbar als weißer Ring außerhalb der
   abgerundeten grünen/lila Border = "doppelter Rand".
   Fix: appearance:none entzieht dem Element die native Darstellung
   komplett — einzig unser CSS (Border, outline:none aus 5c) bestimmt
   danach das Aussehen. Global für ALLE Text-Inputs/Selects/Textareas,
   damit der Ring auf keinem aktuellen oder künftigen Formularfeld
   sitewide wieder auftauchen kann.
   Nachtrag: !important ergänzt — Safari setzt intern -webkit-appearance:
   textfield mit ungewöhnlich hoher Priorität; ohne !important wird das
   in manchen Safari-Versionen nicht zuverlässig überschrieben. */
input, textarea, select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* ─── 5c. KEIN DOPPELRAHMEN auf Inputs & Buttons ───────────────────
   Globales :focus-visible (in jedem lokalen <style>-Block) legt
   outline: 2px solid var(--purple) über eigene Border/Ring-Styles.
   Inputs: Border-Wechsel (is-valid/is-invalid) ist der Indikator.
   Buttons: hover/active transform + bestehende border-Stile reichen.
   Beide :focus UND :focus-visible abdecken (Browser-Unterschiede).
   !important nötig — lokale Styles laden nach lf-design.css.
   ─────────────────────────────────────────────────────────────────── */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Buttons: Browser-Default-Ring nur bei reinem Maus-:focus entfernen.
   KORRIGIERT (Designsystem-Bereinigung 2026-08-09): Die vorherige Regel
   entfernte den Ring auch bei :focus-visible (Tastatur-Fokus) komplett —
   damit hatten alle <button>-Elemente sitewide (u.a. FAQ-Toggles, Tabs)
   KEINEN sichtbaren Tastaturfokus mehr. Verstößt gegen WCAG 2.4.7 und
   gegen die Auftragsvorgabe "Fokus darf nicht durch globale Regeln
   entfernt werden". Jetzt: :focus (Maus) bleibt ruhig, :focus-visible
   (Tastatur) zeigt einen einheitlichen, identischen Ring. */
button:focus,
a.btn:focus {
  outline: none;
  box-shadow: none;
}
/* Nachkorrektur 2026-08-10: Regression von Session 43 wieder aufgetreten — dieses
   !important schlug die outline:none-Regel für Close-Buttons (Section 5b, ohne
   !important) und legte erneut einen lila Ring um jeden Modal-Close-Button.
   :not([class*="close"]) ausgenommen, damit Section 5b wieder gewinnt. */
button:not([class*="close"]):focus-visible,
a.btn:not([class*="close"]):focus-visible {
  outline: 2px solid var(--purple-l, #8B30FF) !important;
  outline-offset: 2px !important;
  box-shadow: none;
}

/* ─── 6. BUTTON SYSTEM ──────────────────────────────────────────────
   Utility-Klassen für neue Elemente. Bestehende Buttons unverändert.
   Höhe: 52px (Design Freeze Token) / 40px .btn-small.
   ─────────────────────────────────────────────────────────────────── */
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: var(--btn-font-size, 14px);
  font-weight: var(--btn-font-weight, 700);
  letter-spacing: var(--btn-letter-spacing, 0.08em);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border-radius: var(--btn-radius, 12px);
  padding: var(--btn-padding, 0 32px);
  height: var(--btn-height, 52px);
  min-height: var(--btn-height, 52px);
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn.btn-primary,
a.btn.btn-primary {
  background: #553BA0;
  color: #ffffff;
  border: none;
}@media (hover: hover) and (pointer: fine) {

.btn.btn-primary:hover { transform: scale(0.97); opacity: 0.9; }
}

.btn.btn-primary:active { transform: scale(0.95); opacity: 0.9; }

.btn.btn-secondary,
a.btn.btn-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
}@media (hover: hover) and (pointer: fine) {

.btn.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
}


.btn.btn-ghost,
a.btn.btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
}@media (hover: hover) and (pointer: fine) {

.btn.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
}


.btn.btn-small {
  height: 40px;
  padding: 0 16px;
  font-size: 12px;
}

@media (max-width: 768px) {
  .btn { height: var(--btn-height, 52px); }
}

/* ─── 6b. BUTTON OVERFLOW-SCHUTZ ───────────────────────────────────
   Buttons dürfen nie umbrechen oder ihren Container sprengen.
   ─────────────────────────────────────────────────────────────────── */
button, .btn, a.btn,
.btn-primary, .btn-outline-gold, .btn-secondary, .btn-ghost {
  white-space: nowrap;
  max-width: 100%;
}

/* ─── 6b-AUSNAHME (PERMANENTE REGEL, 2026-09-04): Auswahl-Kacheln ───────
   Das nowrap oben gilt AUSSCHLIESSLICH für einzeilige CTA-Buttons.
   Buttons mit mehrzeiligem Inhalt (Label + Titel + Beschreibungstext,
   z. B. Pfad-/Studio-/Grund-Kacheln in Modalen) MÜSSEN umbrechen dürfen —
   sonst läuft der Beschreibungstext über den Kachelrand (Bug Wechselbonus-
   Modal mobil, 2026-09-04). Jede NEUE Kachel-Button-Klasse hier eintragen,
   niemals nur lokal fixen. text-wrap: pretty = Volle-Zeilen-Regel
   (keine Ein-Wort-Restzeile), vererbt sich auf die inneren Divs.
   ─────────────────────────────────────────────────────────────────────── */
.probe-path-card,
#k-path-service, #k-path-self,
.studio-card, .praev-studio-btn, .exit-studio-card,
.retain-reason {
  white-space: normal;
  text-wrap: pretty;
}

/* FAQ-Fragen (Nachtrag 2026-09-05, Nutzerfeedback egym-bio-age: Fragetext lag
   über dem Pfeil-Kreis und lief aus der Kachel): Die Frage-Buttons des zentralen
   FAQ-Kanons (Section 22a unten) sind <button>-Elemente — das nowrap oben
   verhinderte JEDEN Umbruch, wodurch lange Fragen die per flex-shrink:0
   reservierte Pfeil-Spalte überliefen. Fragen MÜSSEN mehrzeilig umbrechen
   dürfen; die Pfeil-Spalte bleibt durch das Flex-Layout garantiert frei. */
.faq-question, .lk-faq-question, .praev-faq-question, .sol-faq-question,
.ws-faq-question, .eg-faq-question, .club-faq-question {
  white-space: normal;
  text-wrap: pretty;
}

/* ─── 6b2. CTA-GROUP — Single Source of Truth für gleich breite
   Buttonpaare (Nachkorrektur 2026-08-12: Desktop-Breite bleibt beim
   Skalieren erhalten, kein Vollbreite-Stretch mehr beim Umbruch)
   Referenz: „Probetraining" / „Tarife" im Hero der Startseite.
   Gilt für ALLE Container, die zwei (oder mehr) CTA-Buttons in einer
   Zeile zeigen — unabhängig von Textlänge müssen sie gleich breit sein.
   Nutzt die bereits bestehenden Tokens --btn-max-width (280px, Einzel-
   button) und --btn-pair-max-width (572px, Paar) aus :root — KEINE
   neuen Werte. Container-Liste bewusst vollständig (jede bekannte
   CTA-Zeile sitewide), damit keine Seite mehr eine eigene, abweichende
   Breiten-Logik pflegt. GILT NICHT für Buttons in Kacheln/Karten oder
   Modals — diese haben eigene, unveränderte Breiten-Regeln.
   ─────────────────────────────────────────────────────────────────── */
.hero-btns, .clubs-hero-btns, .clubs-cta-btns, .cta-btns,
.eg-hero-btns, .eg-cta-btns, .sol-hero-btns, .sol-cta-btns,
.ws-hero-btns, .ws-cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: var(--btn-pair-max-width, 572px);
}
/* Box-Zentrierung (Nachkorrektur 2026-08-09, gefundener Bug: kontakt.html
   "Tarife ansehen"). `justify-content: center` (lokal auf jeder Seite gesetzt)
   zentriert nur die BUTTONS INNERHALB der Box — die Box selbst bleibt, weil
   sie durch `max-width` schmaler als ihr Elternelement ist, ohne `margin:auto`
   trotzdem linksbündig stehen. Betrifft ALLE 9 zentrierten CTA-Kontexte außer
   `.hero-btns` (Startseiten-Hero ist bewusst linksbündig, kein lokales
   `justify-content: center`, siehe index.html). */
.clubs-hero-btns, .clubs-cta-btns, .cta-btns,
.eg-hero-btns, .eg-cta-btns, .sol-hero-btns, .sol-cta-btns,
.ws-hero-btns, .ws-cta-btns {
  margin-left: auto;
  margin-right: auto;
}
/* Nachkorrektur 2026-08-12: `flex: 1 1 0%` (Wachstum aktiv) hat jede Zeile
   IMMER auf die volle Containerbreite gestreckt — auch sobald beim
   Verkleinern des Viewports nur noch ein Button pro Zeile Platz hatte,
   wurde dieser eine Button auf 100% der Containerbreite aufgeblasen
   (genau der gemeldete Bug: Buttons wirken beim Skalieren "zu breit").
   Fix: `flex: 0 1 auto` (KEIN Wachstum, Schrumpfen erlaubt) + `width:100%`
   + `max-width: var(--btn-max-width, 280px)` — jeder Button behält seine
   Desktop-Breite (max. 280px) unabhängig davon, ob er neben einem zweiten
   Button steht oder (nach Umbruch) allein in seiner Zeile. Da beide
   Buttons denselben Flex-Basis-Mechanismus nutzen, bleiben sie bei
   ausreichendem Platz weiterhin gleich breit (Symmetrie-Ziel von
   Session 2026-08-09 bleibt erhalten). Erst wenn der verfügbare Platz
   auch für die geschrumpfte Breite nicht mehr reicht, springt der zweite
   Button in die nächste Zeile — und behält dort ebenfalls seine
   proportionale Desktop-Breite statt auf 100% zu strecken. Der vorherige
   `:only-child`-Sonderfall UND die `@media (max-width:600px)`-
   Vollbreite-Regel sind dadurch überflüssig geworden und wurden entfernt
   (Letztere hätte den Fix exakt wieder rückgängig gemacht). */
.hero-btns > .btn, .clubs-hero-btns > .btn, .clubs-cta-btns > .btn, .cta-btns > .btn,
.eg-hero-btns > .btn, .eg-cta-btns > .btn, .sol-hero-btns > .btn, .sol-cta-btns > .btn,
.ws-hero-btns > .btn, .ws-cta-btns > .btn {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  max-width: var(--btn-max-width, 280px);
  text-align: center;
}

/* ─── 6c. SCHALTEREFFEKT – globaler Hover für alle farbigen CTAs ────
   Gilt seitenübergreifend für alle 13 Seiten.
   scale(0.97) auf hover = Press-Feeling; scale(0.95) auf :active = Klick.
   Transition ohne !important: lokale HTML-Definitionen wurden auf
   vollständige transition (inkl. transform) bereinigt (2026-07-13).
   ─────────────────────────────────────────────────────────────────── */
.btn-primary,
.btn.btn-primary {
  transition: background 0.15s, transform 0.12s ease, opacity 0.12s ease;
}@media (hover: hover) and (pointer: fine) {

.btn-primary:hover,
.btn.btn-primary:hover {
  transform: scale(0.97);
  opacity: 0.9 !important; /* index.html .btn-outline-gold:hover hat opacity:0.88 */
  background: #553BA0 !important; /* _TEMPLATE.html + praevention.html haben andere bg */
  color: #fff !important;
}
}

.btn-primary:active,
.btn.btn-primary:active {
  transform: scale(0.95);
  opacity: 0.9;
}

/* ─── 6d. SCHALTEREFFEKT – alle farbigen CTAs (seitenübergreifend) ──
   Ergänzt 6c. Gilt für alle named CTA-Klassen auf allen 13 Seiten.
   !important nur noch wo echte Konflikte existieren:
   - opacity: 0.9 auf :hover — index.html .btn-outline-gold:hover hat 0.88
   Transition ohne !important: HTML-Definitionen bereinigt (2026-07-13).
   ─────────────────────────────────────────────────────────────────── */

/* Transition-Basis — kein !important nötig nach HTML-Bereinigung */
.nav-cta-praev,
.btn-probe,
.btn-green, .btn-buchen, .btn-wa,
.btn-apply, .btn-apply-alt, .btn-cta-wa, .apply-submit,
#kf-submit,
.btn-probe-club, .btn-cta-probe,
.praev-submit-btn, .probe-send-btn,
.kuend-generate, .kuend-send-btn,
.btn-home, .btn-gold {
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s ease, opacity 0.12s ease, box-shadow 0.15s ease;
}@media (hover: hover) and (pointer: fine) {


/* Hover: Press-Feeling scale(0.97) + subtiler Schatten */
.nav-cta-praev:hover,
.btn-probe:hover,
.btn-green:hover, .btn-buchen:hover, .btn-wa:hover,
.btn-apply:hover, .btn-apply-alt:hover, .btn-cta-wa:hover,
.apply-submit:hover:not(:disabled),
#kf-submit:hover,
.btn-probe-club:hover, .btn-cta-probe:hover,
.praev-submit-btn:hover:not(:disabled), .probe-send-btn:hover:not(:disabled),
.kuend-generate:hover:not(:disabled), .kuend-send-btn:hover:not(:disabled),
.btn-home:hover, .btn-gold:hover {
  transform: scale(0.97);
  opacity: 0.9 !important; /* Konflikt: index.html .btn-outline-gold:hover hat opacity:0.88 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
}


/* Active: Klick-Feedback scale(0.95) */
.nav-cta-praev:active,
.btn-probe:active,
.btn-green:active, .btn-buchen:active, .btn-wa:active,
.btn-apply:active, .btn-apply-alt:active, .btn-cta-wa:active, .apply-submit:active,
#kf-submit:active,
.btn-probe-club:active, .btn-cta-probe:active,
.praev-submit-btn:active, .probe-send-btn:active,
.kuend-generate:active, .kuend-send-btn:active,
.btn-home:active, .btn-gold:active {
  transform: scale(0.95);
  opacity: 0.9;
}

/* ─── 7. FOOTER LEGAL LINKS ─────────────────────────────────────────
   Einheitliche Darstellung auf allen 13 Seiten.
   ─────────────────────────────────────────────────────────────────── */
.footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.footer-legal a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: color 0.2s;
}@media (hover: hover) and (pointer: fine) {

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.75);
}
}

@media (max-width: 680px) {
  .footer-legal {
    gap: 12px;
    justify-content: center;
  }
}

/* ─── 9. FOOTER LOGO ───────────────────────────────────────────────
   Einheitliche Größe auf allen Seiten. Seiten ohne eigene footer-logo-*
   Regeln erben diese Werte. Lokale Definitionen überschreiben automatisch.
   ─────────────────────────────────────────────────────────────────── */
.footer-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: 6px;
  margin-top: 18px;
}
.footer-logo-svg { width: 82px; height: 57px; display: block; }
.footer-logo-text { display: none; }
.footer-logo-prime { display: none; }

@media (max-width: 600px) {
  .footer-logo-wrap {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
  }
  .footer-logo-svg { width: 44px; height: 30px; }
  .footer-logo-text { align-items: flex-start; }
  .footer-logo-text > div:first-child { font-size: 18px !important; }
  .footer-logo-prime { display: none; }
}

/* ─── 8. HERO TYPOGRAFIE ────────────────────────────────────────────
   Entfernt (Nachkorrektur 2026-08-09): .hero-kicker/.hero-title/
   .hero-subtitle waren nie referenzierte, tote Utility-Klassen mit
   hartem #fff/rgba(255,255,255,...) — Duplikat zur echten, aktiv
   genutzten Hero-Komponente (.hero-eyebrow/.hero-title/.hero-copy,
   Section 19c, Token-basiert). Keine Seite verlinkte diese Klassen.
   ─────────────────────────────────────────────────────────────────── */


/* ─── 6e. BUTTON VERTICAL CENTERING ────────────────────────────────
   Chrome UA setzt auf <button>: display:inline-flex + align-items:flex-start.
   Buttons in Flex-Containern werden gestretcht → Text erscheint oben.
   Fix: align-items + justify-content: center für alle Button-Typen.
   Für <a>-Buttons mit display:inline-block: wechsel auf inline-flex.
   ─────────────────────────────────────────────────────────────────── */
button {
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* .btn-primary/.btn-outline-gold hier bewusst NICHT mehr gelistet —
   Button-System-Korrektur 2026-08-09: komplette Geometrie inkl. display
   kommt ausschließlich von .btn (Section 6). Diese Regel (nur align-
   items/justify-content ohne display) reichte für <a>-Elemente nicht
   aus und war die Ursache der 18px-Vertikalversatz-Regression. */
.btn-outline-white, .btn-probe,
.btn-green, .btn-buchen, .btn-wa, .btn-gold, .btn-home,
.nav-cta-praev, .btn-apply, .btn-apply-alt, .btn-cta-wa,
.praev-submit-btn, .probe-send-btn,
.kuend-generate, .kuend-send-btn,
.apply-submit, #kf-submit,
.btn-download, .btn-ghost, .btn-anfragen-link {
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─── 10. CARD HOVER SYSTEM ─────────────────────────────────────────
   Premium-Hover: alle Content-Karten heben sich einheitlich um -3px.
   (Audit #108.5, Option A). Seiten mit eigenen border-color-Overrides
   behalten diese – transform und border-color wirken additiv.
   clubs.html .club-card:hover: translateY(-4px) muss dort entfernt werden.
   ─────────────────────────────────────────────────────────────────── */
.tarif-card,
.ausst-card,
.club-card,
.job-card,
.lf-why-card,
.aktion-card,
.aktion-card-probe,
.aktion-card-featured,
.aktion-card-praev,
.firma-card,
.firma-card--wellpass,
.firma-card--hansefit {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}@media (hover: hover) and (pointer: fine) {

.tarif-card:hover,
.ausst-card:hover,
.club-card:hover,
.job-card:hover,
.lf-why-card:hover,
.aktion-card:hover,
.aktion-card-probe:hover,
.aktion-card-featured:hover,
.aktion-card-praev:hover,
.firma-card:hover,
.firma-card--wellpass:hover,
.firma-card--hansefit:hover {
  transform: translateY(-3px);
}
}


/* ─── 10b. FIRMENFITNESS "WICHTIG"-HINWEIS (Wellpass/Hansefit-Karten) ──
   Mobile-UX-Pass 2026-08-14: Ersetzt einen Button mit Inline-Styles +
   Inline-onmouseover/onmouseout-JavaScript. Der Text lief bei schmalen
   Karten über den rechten Kartenrand, weil der Pfeil kein reservierter
   Flex-Layout-Bereich war. Jetzt: Flex-Row, Pfeil fest rechts mit
   flex-shrink:0, Text bricht nur an Wortgrenzen (kein Einzelbuchstabe),
   volle verfügbare Breite, Hover nur auf echten Zeigegeräten.
   ─────────────────────────────────────────────────────────────────── */
/* Nachtrag 2026-08-20 (Nutzerauftrag: Text lief auf zwei Zeilen um, Pfeil
   dadurch isoliert in der zweiten Zeile — "muss alles auf eine Zeile,
   textlich vereinfacht"): Text gekürzt (s. HTML), Link jetzt bewusst
   einzeilig statt umbruchfähig.
   Korrektur 2026-08-20 (Nutzerauftrag: "Pfeil zu tief, nicht mittig zum
   Großbuchstaben"): `align-items: center` zentriert auf die Box-Mitte,
   nicht auf die Grundlinie — genau der Fehler, den die feste Pfeil-Regel
   (lf-design.css Section 3/4, `a.link-arrow { align-items: baseline }`)
   für exakt diesen Fall verbietet: `.icon-arr` ist bei font-size:1.3em
   höher als der Text; auf Box-Mitte zentriert rutscht seine Grundlinie
   dadurch unter die Textgrundlinie — der Pfeil sitzt sichtbar zu tief.
   Fix: `align-items: baseline` (identisches Prinzip wie `a.link-arrow`),
   NICHT wieder auf center zurücksetzen. */
.firma-wichtig-link {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gold);
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.4;
  padding: 0;
  text-align: center;
  text-decoration: none;
}
.firma-wichtig-link .wicht-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.firma-wichtig-link .icon-arr {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .firma-wichtig-link:hover .wicht-text { text-decoration: underline; }
  .firma-wichtig-link:hover .icon-arr { transform: translateX(4px); }
}
.firma-wichtig-link:focus-visible .wicht-text { text-decoration: underline; }
.firma-wichtig-link:focus-visible .icon-arr { transform: translateX(4px); }

/* ─── 11. LEGAL CONTENT LINKS ───────────────────────────────────────
   Einheitliche Darstellung für Inhalts-Links auf allen Rechtsseiten.
   Jede Seite verwendet ihre eigene Klasse (ds-section, agb-section,
   legal-card) – diese können .legal-content als zusätzliche Klasse
   erhalten, um diese Basis-Styles zu erben.
   ─────────────────────────────────────────────────────────────────── */
.legal-content a {
  color: var(--gold-l, #e8c98a);
  text-decoration: underline;
  text-decoration-color: rgba(234, 205, 163, 0.28);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s, color 0.2s;
}@media (hover: hover) and (pointer: fine) {

.legal-content a:hover {
  color: var(--gold, #d6b27a);
  text-decoration-color: rgba(234, 205, 163, 0.85);
}
}


/* ─── 12. MOBILE FOOTER – Phone & WhatsApp Buttons ──────────────────
   Hover: kein farbiger Kasten — nur Aufhellung + dezenter Rand.
   WA: grüner Text + grüner Rand. Phone: weiß + neutraler Rand.
   Stand: 2026-07-10 | Task #200 (Footer Hover Fix)
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mf-phone, .mf-wa {
    transition: color 0.2s, border-color 0.2s;
  }
  .mf-phone:hover {
    color: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.35);
  }
  .mf-wa:hover {
    color: #4ade80;
    border-color: rgba(37,211,102,0.4);
  }
}

/* ─── 13. CARD HOVER TRANSFORM — Canonical -3px ─────────────────────
   Alle Karten nutzen einheitlich translateY(-3px). Page-level Overrides
   müssen diesen Wert verwenden, keinen anderen.
   Firma-Cards: leichter Hover (-2px) wegen Layout-Sensitivität.
   ─────────────────────────────────────────────────────────────────── */
/* bereits in Section 10 definiert – diese Sektion dokumentiert nur */

/* ─── 14. FEATURE MODULE INFRASTRUCTURE ────────────────────────────
   Strukturelle CSS-Patterns für zukünftige Feature-Module.
   Diese Klassen sind UNSICHTBAR bis ein Modul sie aktiviert.
   Kein sichtbarer Inhalt. Keine Layout-Auswirkungen auf bestehende Seiten.
   Stand: 2026-07-09 | Task #110
   ─────────────────────────────────────────────────────────────────── */

/* 14a. Slide-In Panel (KI-Berater, Chat, Concierge) */
.lf-panel {
  position: fixed;
  bottom: 0; right: 0;
  width: min(420px, 100vw);
  max-height: 80vh;
  background: var(--bg2, #252240);
  border: 1px solid rgba(139, 48, 255, 0.25);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  z-index: 500;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0, 0.15, 1);
  will-change: transform;
}
.lf-panel.lf-panel--open {
  transform: translateY(0);
}
.lf-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.lf-panel__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white, #fff);
}
.lf-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.lf-panel__footer {
  padding: 12px 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
/* Panel backdrop */
.lf-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.lf-panel-backdrop.lf-panel-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

/* 14b. Floating Action Button (Panel-Öffner) */
.lf-fab {
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--btn-primary-bg, #553BA0);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(106, 0, 244, 0.4);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  z-index: 450;
  font-family: inherit;
}@media (hover: hover) and (pointer: fine) {

.lf-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(106, 0, 244, 0.55);
}
}

.lf-fab__badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #4ade80;
  font-size: 10px;
  font-weight: 700;
  color: #1E1B2E;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 14c. Feature Badge / NEW-Tag */
.lf-badge-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
}
.lf-badge-beta {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(214, 178, 122, 0.12);
  border: 1px solid rgba(214, 178, 122, 0.3);
  color: var(--gold, #d6b27a);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
}

/* 14d. Progress / Onboarding Steps */
.lf-step-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
}
.lf-step-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.lf-step-dot.active {
  background: var(--purple-l, #8B30FF);
  transform: scale(1.4);
}
.lf-step-dot.done {
  background: #4ade80;
}

/* 14e. Chat Message Bubbles (KI-Berater) */
.lf-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.lf-msg--user {
  flex-direction: row-reverse;
}
.lf-msg__bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text, rgba(255,255,255,0.9));
}
.lf-msg__bubble--ai {
  background: rgba(139, 48, 255, 0.12);
  border: 1px solid rgba(139, 48, 255, 0.2);
  border-radius: 4px 14px 14px 14px;
}
.lf-msg__bubble--user {
  background: var(--btn-primary-bg, #553BA0);
  color: #fff;
  border-radius: 14px 4px 14px 14px;
}
.lf-msg__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--btn-primary-bg, #553BA0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* 14f. Input Row (Panel-Eingabe) */
.lf-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lf-input-row input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.lf-input-row input:focus {
  border-color: rgba(106, 0, 244, 0.6);
}
.lf-input-row button {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--btn-primary-bg, #553BA0);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}@media (hover: hover) and (pointer: fine) {

.lf-input-row button:hover {
  background: var(--purple-d, #4d00b3);
}
}


/* 14g. Reveal Animation — aktiviert durch lf-core.js .lf-animated */
[data-lf-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-lf-animate].lf-animated {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-lf-animate],
  [data-lf-animate].lf-animated {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 14h. Skeleton Loader */
.lf-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: lf-shimmer 1.6s infinite;
  border-radius: 6px;
}
@keyframes lf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-skeleton { animation: none; }
}

/* 14i. Toast / Snackbar System */
.lf-toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.lf-toast {
  background: var(--bg2, #252240);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
}
.lf-toast.lf-toast--visible {
  opacity: 1;
  transform: none;
}
.lf-toast--success { border-color: rgba(74, 222, 128, 0.4); }
.lf-toast--error   { border-color: rgba(239, 68, 68, 0.4); }

/* ─── 15. SOCIAL ICON BUTTONS (.soc-btn) ────────────────────────────
   Kanonische Definition für alle 13 Seiten.
   Ruhezustand: kein Hintergrund, kein permanenter Rahmen — nur Icon.
   Hover: feiner Markenfarben-Rahmen + dezenter BG + leichte Skalierung.
   Stand: 2026-07-09 | Task #113
   ─────────────────────────────────────────────────────────────────── */
.soc-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid transparent;     /* kein permanenter Rahmen */
  background: transparent;            /* kein Hintergrund im Ruhezustand */
  display: flex; align-items: center; justify-content: center;
  /* Nachkorrektur 2026-08-09: war 0.45 — jetzt gleiche Farbe wie alle anderen
     Footer-Texte (0.38), nur .soc-btn ist auch außerhalb des Footers im Einsatz. */
  color: rgba(255,255,255,0.38); text-decoration: none;
  font-size: 12px; font-weight: 700;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.soc-btn svg { width: 22px; height: 22px; }@media (hover: hover) and (pointer: fine) {

/* Hover: einheitlich für alle Icons — nur Aufhellung + leichter Lift, keine Farbboxen */
.soc-btn:hover { color: rgba(255,255,255,0.9); transform: translateY(-1px); }
}


/* ─── 16. NAV ACTIVE / HOVER SYSTEM ────────────────────────────────
   Kanonische Prävention-Farbe (ersetzt inline style="color:#4ade80")
   + Active-Indikator für Desktop und Mobile.
   Active-Erkennung via JS-IIFE auf jeder Seite (.active Klasse).
   Stand: 2026-07-09 | Task #112.3
   ─────────────────────────────────────────────────────────────────── */

/* ── Desktop: Gradient-Underline via ::after ─────────────────────────
   position:relative auf nav-links a ermöglicht ::after Positionierung.
   Gradient faded links+rechts aus → dezenter als harter Balken.       */
.nav-links a {
  position: relative;
  text-decoration: none !important; /* ::after übernimmt die Unterstreichung */
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(214,178,122,0.62) 22%,
    rgba(214,178,122,0.62) 78%,
    transparent 100%);
  transform: scaleX(0);
  /* Kein transition – nur Einblend-Animation, Ausblenden sofort */
  pointer-events: none;
}
@keyframes navUnderlineIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  animation: navUnderlineIn 0.18s ease forwards;
}@media (hover: hover) and (pointer: fine) {


/* ── Desktop: Hover ──────────────────────────────────────────────── */
.nav-links a:hover { color: #ffffff; }
}


/* ── Desktop: Prävention Brand-Farbe ─────────────────────────────── */
.nav-links a.nav-praev { color: #4ade80; font-weight: 600; }@media (hover: hover) and (pointer: fine) {

.nav-links a.nav-praev:hover { color: #86efac; }
}

.nav-links a.nav-praev::after {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(74,222,128,0.50) 22%,
    rgba(74,222,128,0.50) 78%,
    transparent 100%);
}

/* ── Desktop: Active-Indikator ───────────────────────────────────── */
.nav-links a.active { color: rgba(255,255,255,0.95); }
.nav-links a.nav-praev.active { color: #4ade80; }

/* ── Mobile: Prävention Brand-Farbe ──────────────────────────────────
   Spezifität (0,4,1) schlägt lokales :not()-Selektor (0,3,1) ✓      */
.nav-mobile a.nav-praev:not(.mob-login):not(.mob-probe) {
  color: #4ade80;
  font-weight: 600;
}

/* ── Mobile: Active-Indikator ─────────────────────────────────────────
   Hintergrund-Tint + ::before als Unterline direkt unter dem Text
   (wie Desktop, aber im vertikalen Mobile-Layout).
   ::before = Gold-Linie 80% der Containerbreite, zentriert.
   ::after  = dezenter Trennlinie-Separator bleibt unverändert.
   Stand: 2026-07-16 | Task #399
   ─────────────────────────────────────────────────────────────────── */
.nav-mobile a.active:not(.mob-login):not(.mob-probe) {
  color: #ffffff;
  background: rgba(106,0,244,0.04);
}
/* Nachtrag 2026-08-30f (Nutzerauftrag: "den Unterstrich unter dem Menüpunkt bei Mobil
   weglassen und dafür einen gelben Punkt links vor dem aktiven Menüpunkt setzen — das
   passt bei Mobil besser"): ersetzt die vorherige links-verankerte Unterstrich-Variante
   vom selben Tag. Der aktive Menüpunkt bekommt einen kleinen goldenen Punkt vertikal
   mittig VOR dem Label (Punkt bei 24px, Text beginnt bei 40px → 10px Luft dazwischen).
   Nur Mobile-Nav — Desktop behält seinen Unterstrich. */
.nav-mobile a.active:not(.mob-login):not(.mob-probe)::before {
  content: '';
  position: absolute;
  /* Nachtrag 2026-08-30g (Nutzerauftrag: "der Punkt braucht Abstand vom Text"):
     von 24px auf 18px nach links gerückt → 16px Luft zwischen Punkt und Textbeginn (40px). */
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(214,178,122,0.9);
  pointer-events: none;
}
/* Unterpunkte in den aufklappbaren Gruppen sind tiefer eingerückt (48px) — Punkt zieht mit,
   gleicher 16px-Abstand zum Textbeginn. */
.nav-mobile .nav-group-panel a.active:not(.mob-login):not(.mob-probe)::before {
  left: 26px;
}

/* ── Mobile: Prävention Active (grüne Variante) ─────────────────── */
.nav-mobile a.nav-praev.active:not(.mob-login):not(.mob-probe) {
  background: rgba(74,222,128,0.03);
}
.nav-mobile a.nav-praev.active:not(.mob-login):not(.mob-probe)::before {
  /* Nachtrag 2026-08-30f: Punkt-Variante in Prävention-Grün statt Gold. */
  background: rgba(74,222,128,0.85);
}


/* ─── 17. FOOTER POLISH ─────────────────────────────────────────────
   Spaltenüberschriften etwas heller, Trennlinie sichtbarer,
   Copyright subtiler. Höhere Spezifität (footer .xyz) überschreibt
   lokale .xyz-Regeln auf allen Seiten.
   Stand: 2026-07-10 | Task #119 – Footer Final Polish (Design Freeze)
   ─────────────────────────────────────────────────────────────────── */

/* ── BREITEN-REGEL: Footer = 1300px (identisch mit Nav) ─────────────
   Single Source of Truth: HIER pflegen, NICHT in HTML-Dateien.
   footer .container: beinhaltet footer-grid
   footer > .footer-bottom: Copyright + Legal — direktes Footer-Kind
   ─────────────────────────────────────────────────────────────────── */
footer .container {
  max-width: 1300px;
  padding-left:  clamp(16px, 2.5vw, 40px);
  padding-right: clamp(16px, 2.5vw, 40px);
}

/* Footer-Grid: Logo-Spalte fix, 3 Textspalten gleich */
footer .footer-grid {
  grid-template-columns: minmax(240px, 360px) 0.95fr 1.05fr 1fr !important;
}

/* Tablet ≤900px: 3 Spalten, erste Spalte volle Breite (Logo-Row) */
@media (max-width: 900px) {
  footer .footer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Schmal ≤600px: 1 Spalte */
@media (max-width: 600px) {
  footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Spaltenüberschriften — neutrales Weiß statt Blau-Lila (--muted).
   Nachkorrektur 2026-08-09: war 0.55 (heller als die Linktexte darunter, die bei
   0.38 liegen — .footer-col ul li a) → Überschrift und Spaltentext auf denselben
   Wert vereinheitlicht (0.38), damit Überschrift/Text/Logo-Schriftzug im Footer
   eine einheitliche Farbe haben.
   Korrektur 2026-08-10: Überschriften (LILA FITNESS / MITGLIEDSCHAFT / KONTAKT)
   waren dadurch zu blass und setzten sich kaum von den Spaltenlinks darunter ab —
   jetzt deutlich heller (0.7) + fett (700), damit die Spalten-Header klar als
   solche erkennbar sind, während die Links selbst bei 0.38 bleiben. */
footer .footer-col h5 {
  color: rgba(255,255,255,0.7);
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
  text-transform: uppercase !important;
  margin-bottom: 22px !important;
}

/* Trennlinie footer-bottom — klar aber nicht dominant */
footer .footer-bottom {
  border-top-color: rgba(255,255,255,0.10);
  padding-top: 24px;
}

/* Footer-bottom: same nav width, eine Zeile — Copyright links bündig, Rechtstexte rechts */
footer > .footer-bottom {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding-left:  clamp(16px, 2.5vw, 40px);
  padding-right: clamp(16px, 2.5vw, 40px);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  /* Linie kürzer: border-top entfernen, stattdessen ::before mit Einzug */
  border-top: none !important;
  padding-top: 28px;
  padding-bottom: 20px;
  position: relative;
}
footer > .footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(16px, 2.5vw, 40px);
  right: clamp(16px, 2.5vw, 40px);
  height: 1px;
  background: rgba(255,255,255,0.10);
}
footer > .footer-bottom .footer-legal {
  justify-content: flex-end;
  margin-left: 0;
  order: 2;  /* Rechtstexte rechts */
}
footer > .footer-bottom .footer-copy {
  order: 1;  /* Copyright links */
  padding-bottom: 0;
  text-align: left;
}
/* Unter 900px (Mobile-Footer greift ohnehin) zurück auf gestapelt+zentriert,
   da eine Zeile mit 6 Rechtstexten + Copyright dort nicht mehr passt. */
@media (max-width: 900px) {
  footer > .footer-bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
  }
  footer > .footer-bottom .footer-legal { justify-content: center; order: 1; }
  footer > .footer-bottom .footer-copy { order: 2; text-align: center; }
}

/* Copyright — sehr dezent, maximale Ruhe */
footer .footer-copy {
  color: rgba(255,255,255,0.18);
}@media (hover: hover) and (pointer: fine) {


/* Footer column links — einheitlicher Hover (warm-weiß) */
footer .footer-col ul li a:hover {
  color: rgba(255,255,255,0.95);
}
}


/* Footer contact links — Icon + Text reagieren gemeinsam */
footer .footer-contact a.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Nachkorrektur 2026-08-09: war 0.55 — jetzt gleiche Farbe wie alle anderen
     Footer-Texte (Spaltenlinks, Logo-Schriftzug: 0.38). */
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  transition: color 0.2s;
}@media (hover: hover) and (pointer: fine) {

footer .footer-contact a.footer-contact-link:hover {
  color: rgba(255,255,255,0.92);
}
}

/* WA-Link: grün statt weiß */
footer .footer-contact a.footer-wa {
  color: rgba(255,255,255,0.38);
}@media (hover: hover) and (pointer: fine) {

footer .footer-contact a.footer-wa:hover {
  color: #4ade80;
}
}
@media (hover: hover) and (pointer: fine) {

/* Fallback für ältere Markup-Varianten */
footer .footer-contact a:not(.footer-contact-link):hover {
  color: rgba(255,255,255,0.95);
}
}


/* Footer link spacing — leicht erhöht für bessere Lesbarkeit */
footer .footer-col ul li {
  margin-bottom: 15px;
  line-height: 1;
}
footer .footer-col ul li a {
  line-height: 1.4;
}

/* Kündigung-Link — dezent im Ruhezustand, Gold erst beim Hover */
footer .footer-col ul li a.footer-kuend {
  color: rgba(255,255,255,0.42) !important;
}@media (hover: hover) and (pointer: fine) {

footer .footer-col ul li a.footer-kuend:hover {
  color: var(--gold) !important;
}
}


/* ═══════════════════════════════════════════════════════════════════
   18. DESIGN SYSTEM FREEZE (Task #116) — Vollständige Vereinheitlichung
   Einzig gültige Werte ab jetzt: --radius-sm=12px · --radius-md=18px · --radius-lg=24px
   Nur Dimensionen + Typografie. KEINE Farb-Overrides (seitenspezifisch).
   Stand: 2026-07-10 | Design Freeze — kein weiterer Umbau nach diesem Sprint.
   ══════════════════════════════════════════════════════════════════ */

/* ── REGEL: Inline-Icon-Buttons (z.B. .info-btn, Badge-Circles) ────
   Problem: vertical-align: middle zentriert am x-Höhen-Mittelwert,
   nicht am visuellen Zeilenmittelpunkt → Button erscheint zu tief.
   Lösung: vertical-align: middle + position: relative; top: -1px
   ─────────────────────────────────────────────────────────────────── */

/* ── 18a. BUTTON PROPERTIES — CTA-Buttons einheitlich ───────────────
   Single Source of Truth für alle CTA-Button-Klassen.
   Lokale HTML-Definitionen dürfen NUR noch Farben definieren
   (background, border-color, color). Alles andere kommt von hier.
   HINWEIS (Button-System-Korrektur 2026-08-09): .btn-primary und
   .btn-outline-gold sind hier bewusst NICHT mehr gelistet — ihre
   gesamte Geometrie (Höhe, Padding, Radius, Zentrierung, Display)
   kommt jetzt ausschließlich von der Basisklasse .btn (Section 6).
   Jedes Markup mit .btn-primary/.btn-outline-gold MUSS zusätzlich
   die Klasse .btn tragen — siehe Section 18a3. */
.btn-outline-white, .btn-outline-green,
.btn-probe, .btn-green, .btn-buchen, .btn-wa, .btn-gold, .btn-home,
.btn-apply, .btn-apply-alt, .btn-cta-wa, .btn-cta-probe, .btn-probe-club,
.aktion-btn,
.praev-submit-btn, .probe-send-btn,
.kuend-generate, .kuend-send-btn,
.apply-submit, #kf-submit,
.umbau-cta, .firma-cta, .firma-cta-btn, .firma-info-cta,
.tarif-btn, .mob-probe, .btn-anfragen-link,
.btn-halt-gold, .btn-halt-ghost, .btn-kuend-wa, .btn-kuend-send,
.exit-cta-btn, .exit-alt-btn, .retain-btn-primary, .firma-pre-confirm {
  min-height: var(--btn-height, 52px);
  padding: var(--btn-padding, 0 32px);
  border-radius: var(--btn-radius, 12px);
  font-size: var(--btn-font-size, 14px);
  font-weight: var(--btn-font-weight, 600);
  letter-spacing: var(--btn-letter-spacing, 0.08em);
  text-transform: uppercase;
  line-height: 1;
  /* Kanonische Transition — var(--btn-transition) ändern = alle Buttons */
  transition: var(--btn-transition,
    background 0.15s, border-color 0.15s, color 0.15s,
    transform 0.12s ease, opacity 0.12s ease, box-shadow 0.15s ease);
}

/* ── 18a3. PRIMÄR-/SEKUNDÄRBUTTON FARBEN — Single Source of Truth ──
   .btn-primary und .btn-outline-gold sind die websiteweit einzigen
   Primär-/Sekundärbutton-Rollen. Anders als die Akzent-Buttons in 18a
   (.btn-green, .btn-wa, .btn-gold — bewusst eigene Markenfarben) dürfen
   diese beiden Klassen KEINE lokale Farbabweichung mehr haben.
   Lokale HTML-Definitionen von .btn-primary/.btn-outline-gold sind ab
   sofort vollständig verboten (auch bei identischen Werten) — siehe
   Designsystem-Bereinigung 2026-08-09, Auftrag "Zentrales Designsystem".
   ─────────────────────────────────────────────────────────────────── */
.btn-primary {
  background: #553BA0;
  color: var(--text-hi);
  border: none;
}
.btn-outline-gold {
  background: rgba(255,255,255,0.04);
  color: var(--text-hi);
  border: 1px solid rgba(255,255,255,0.45);
}@media (hover: hover) and (pointer: fine) {

.btn-outline-gold:hover {
  border-color: rgba(255,255,255,0.55);
  color: var(--white);
  /* transform: scale(0.97) + opacity → lf-design.css Section 18a2 */
}
}


/* .btn-probe — Nav-CTA "Probetraining" (Korrekturauftrag 2026-08-16).
   Die Klasse hatte bisher nur Geometrie (min-height/padding/radius/
   font, s.o. Section 18a) und NIE eine Farbdefinition, weil sie vor
   diesem Auftrag nirgends im Markup tatsächlich verwendet wurde (reiner
   Vorgriff in Section 1c/18a — 0 Treffer in den 26 Seiten). Jetzt als
   einheitlicher Nav-CTA auf allen Seiten aktiv → braucht echte Farben.
   Wiederverwendet 1:1 die bestehenden .btn-primary-Werte (#553BA0 /
   var(--text-hi)) — keine neue Farbe, gleiche Rolle wie der "Probe-
   training"-Hauptbutton im Hero. */
.btn-probe {
  background: #553BA0;
  color: var(--text-hi);
  border: none;
  text-decoration: none;
}@media (hover: hover) and (pointer: fine) {

.btn-probe:hover {
  background: #553BA0 !important; /* wie .btn-primary:hover — konsistente Markenfarbe */
  color: var(--text-hi) !important;
  /* transform: scale(0.97) + opacity → lf-design.css Section 18a2 */
}
}
@media (hover: hover) and (pointer: fine) {


/* ── 18a2. HOVER MECHANICS — Einheitliches Klick-Feedback ────────────
   Mechanik (transform + opacity) global. Farben bleiben lokal.
   Lokale :hover darf background/border-color/color setzen —
   transform und opacity kommen immer von hier.
   ─────────────────────────────────────────────────────────────────── */
.btn-primary:hover, .btn-outline-gold:hover, .btn-outline-white:hover, .btn-outline-green:hover,
.btn-probe:hover, .btn-green:hover, .btn-buchen:hover, .btn-wa:hover, .btn-gold:hover, .btn-home:hover,
.btn-apply:hover, .btn-apply-alt:hover, .btn-cta-wa:hover, .btn-cta-probe:hover, .btn-probe-club:hover,
.aktion-btn:hover,
.praev-submit-btn:hover, .probe-send-btn:hover,
.kuend-generate:hover, .kuend-send-btn:hover,
.apply-submit:hover, #kf-submit:hover,
.umbau-cta:hover, .firma-cta:hover, .firma-cta-btn:hover, .firma-info-cta:hover,
.tarif-btn:hover, .mob-probe:hover, .btn-anfragen-link:hover,
.btn-halt-gold:hover, .btn-halt-ghost:hover, .btn-kuend-wa:hover, .btn-kuend-send:hover,
.exit-cta-btn:hover, .exit-alt-btn:hover, .retain-btn-primary:hover, .firma-pre-confirm:hover {
  transform: scale(0.97);
  opacity: 0.9;
}
}


.btn-primary:active, .btn-outline-gold:active, .btn-outline-white:active, .btn-outline-green:active,
.btn-probe:active, .btn-green:active, .btn-buchen:active, .btn-wa:active, .btn-gold:active, .btn-home:active,
.btn-apply:active, .btn-apply-alt:active, .btn-cta-wa:active, .btn-probe-club:active,
.aktion-btn:active, .praev-submit-btn:active, .probe-send-btn:active,
.kuend-generate:active, .kuend-send-btn:active,
.apply-submit:active, #kf-submit:active,
.umbau-cta:active, .firma-cta:active, .firma-cta-btn:active,
.tarif-btn:active, .mob-probe:active,
.btn-halt-gold:active, .btn-halt-ghost:active, .btn-kuend-wa:active, .btn-kuend-send:active,
.exit-cta-btn:active, .exit-alt-btn:active, .retain-btn-primary:active, .firma-pre-confirm:active {
  transform: scale(0.95);
  opacity: 0.85;
}

/* ── 18b. CARD RADIUS — Karten-Fallback 18px ────────────────────────
   Fallback für Karten ohne lokale border-radius Definition.
   Lokale CSS-Definitionen (border-radius: 18px) gehen vor.
   ─────────────────────────────────────────────────────────────────── */
.tarif-card,
.aktion-card,
.aktion-card-probe,
.aktion-card-featured,
.aktion-card-praev,
.ausst-card,
.ausst-card-featured,
.club-card,
.job-card,
.firma-card,
.firma-card--wellpass,
.firma-card--hansefit,
.lf-why-card,
.faq-item,
.lk-faq-item,
.praev-faq-item,
.sol-faq-item,
.ws-faq-item,
.eg-faq-item,
.club-faq-item,
.faq-card {
  border-radius: var(--radius-md, 18px);
}

/* ── 18b2. FAQ-AKKORDEON — Single Source of Truth (Designsystem-
   Bereinigung 2026-08-09). Vorher: strukturell identische, aber in
   Details abweichende FAQ-Komponente in 9 Dateien lokal dupliziert
   (faq.html: .faq-*; praevention.html: vormals ebenfalls .faq-* —
   Namenskollision mit faq.html behoben durch Umbenennung auf
   .praev-faq-* [siehe DESIGN-EXCEPTION-Farbvariante unten]; solarium.html:
   .sol-faq-*; wellness-sauna.html: .ws-faq-*; egym-bio-age.html: .eg-faq-*;
   alle 6 Clubseiten: .club-faq-*). Audit-Befund: identische 7-teilige
   DOM-Struktur überall (list → item → question-Button → question-text +
   icon → answer → answer-inner), aber echte Wertabweichungen: Club-Seiten
   nutzten display:grid statt flex + 40px-Icon statt 30px + max-height:400px
   statt 800px; 2 von 6 Clubseiten hatten var(--text-lo) statt var(--muted)
   auf dem Icon (funktional identisch, da --muted: var(--text-lo), aber
   inkonsistent notiert); praevention.html hatte max-width:900px statt
   780px und keine .faq-answer-a-Regel. Alle Abweichungen unten auf den
   Sollwert vereinheitlicht. Lokale Kopien in allen 9 Dateien entfernt.
   Akzentfarbe ist standardmäßig Lila (websiteweite Norm) — die zwei
   dokumentierten Ausnahmen (Prävention=Grün, Wellness/Sauna=Gold) sind
   inhaltlich begründete Markenfarben (siehe CLAUDE.md "Prävention-Grün"-
   Regel bzw. Gold-Akzent für Wellness/Solarium) und werden über eigene,
   auf den jeweiligen Klassennamen-Präfix beschränkte Overrides unten
   zentral (nicht lokal!) mitgeführt. ────────────────────────────────── */
.faq-list,
.lk-faq-list,
.praev-faq-list,
.sol-faq-list,
.ws-faq-list,
.eg-faq-list,
.club-faq-list {
  max-width: 780px;
  margin: var(--copy-to-content, 48px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item,
.lk-faq-item,
.praev-faq-item,
.sol-faq-item,
.ws-faq-item,
.eg-faq-item,
.club-faq-item {
  /* Nachtrag 2026-08-11 (Nutzerfeedback: FAQ-Boxen auf Unterseiten wirkten
     "gefüllter/boxiger" als auf der kanonischen faq.html): war vorher
     background:var(--bg2) — auf faq.html/egym-bio-age.html (Section-Tone-b
     = ebenfalls --bg2) dadurch flach/nur Border sichtbar, auf allen Seiten
     mit Section-Tone-c (--bg4, u.a. alle 6 Clubseiten, Prävention, Wellness/
     Sauna, Solarium, Live-Kurse) dagegen sichtbarer Hell-Kontrast → wirkte
     wie ein gefüllter Kasten. transparent macht den Look jetzt UNABHÄNGIG
     vom umschließenden Section-Tone überall identisch zur faq.html-Referenz
     (der Sektionsrhythmus a/b/c bleibt dadurch unangetastet — keine
     Section-Tone-Klasse musste geändert werden). */
  background: transparent;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
  /* border-radius: zentral bereits via 18b (.faq-item etc. in der
     Karten-Radius-Liste) — hier keine erneute Deklaration. */
}@media (hover: hover) and (pointer: fine) {

.faq-item:hover,
.lk-faq-item:hover,
.praev-faq-item:hover,
.sol-faq-item:hover,
.ws-faq-item:hover,
.eg-faq-item:hover,
.club-faq-item:hover {
  border-color: var(--border2);
}
}

/* Akzent Lila (Standard) */
.faq-item.open,
.lk-faq-item.open,
.sol-faq-item.open,
.eg-faq-item.open,
.club-faq-item.open {
  border-color: rgba(106,0,244,0.45);
}
/* DESIGN-EXCEPTION: Prävention nutzt die websiteweit etablierte
   Prävention-Grün-Markenfarbe statt Lila — inhaltlich begründet
   (§20-Gesundheitsthema), zentral hier gepflegt statt lokal. */
.praev-faq-item.open {
  border-color: rgba(74,222,128,0.45);
}
/* DESIGN-EXCEPTION: Wellness/Sauna nutzt Gold statt Lila — inhaltlich
   begründet (Wellness/Solarium-Markenfarbe), zentral hier gepflegt
   statt lokal. */
.ws-faq-item.open {
  border-color: rgba(214,178,122,0.45);
}
.faq-question,
.lk-faq-question,
.praev-faq-question,
.sol-faq-question,
.ws-faq-question,
.eg-faq-question,
.club-faq-question {
  width: 100%;
  min-width: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--white);
  font-family: inherit;
  box-sizing: border-box;
}
.faq-question-text,
.lk-faq-question-text,
.praev-faq-question-text,
.sol-faq-question-text,
.ws-faq-question-text,
.eg-faq-question-text,
.club-faq-question-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.5;
  flex: 1 1 auto;
  min-width: 0;
  /* normal statt break-word (Mobile-UX-Pass 2026-08-14): Fragen brechen nur
     noch an Wortgrenzen um — kein einzelnes Zeichen/Wortrest mehr in einer
     eigenen Zeile. Die Pfeil-Spalte (.faq-icon, flex-shrink:0, 30px) bleibt
     durch das Flex-Layout garantiert reserviert, unabhängig von der
     Fragenlänge — Text kann den Pfeil dadurch nie überlappen. */
  overflow-wrap: normal;
  word-break: normal;
}
.faq-icon,
.lk-faq-icon,
.praev-faq-icon,
.sol-faq-icon,
.ws-faq-icon,
.eg-faq-icon,
.club-faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  color: var(--muted);
}
.faq-icon svg,
.lk-faq-icon svg,
.praev-faq-icon svg,
.sol-faq-icon svg,
.ws-faq-icon svg,
.eg-faq-icon svg,
.club-faq-icon svg {
  transition: transform 0.25s ease;
  stroke-width: 2.5;
}
.faq-item.open .faq-icon,
.lk-faq-item.open .lk-faq-icon,
.sol-faq-item.open .sol-faq-icon,
.eg-faq-item.open .eg-faq-icon,
.club-faq-item.open .club-faq-icon {
  background: rgba(106,0,244,0.18);
  border-color: rgba(106,0,244,0.55);
  color: var(--purple-l);
}
.praev-faq-item.open .praev-faq-icon {
  background: rgba(74,222,128,0.15);
  border-color: rgba(74,222,128,0.55);
  color: #4ade80;
}
.ws-faq-item.open .ws-faq-icon {
  background: rgba(214,178,122,0.16);
  border-color: rgba(214,178,122,0.5);
  color: var(--gold);
}
.faq-item.open .faq-icon svg,
.lk-faq-item.open .lk-faq-icon svg,
.praev-faq-item.open .praev-faq-icon svg,
.sol-faq-item.open .sol-faq-icon svg,
.ws-faq-item.open .ws-faq-icon svg,
.eg-faq-item.open .eg-faq-icon svg,
.club-faq-item.open .club-faq-icon svg {
  transform: rotate(180deg);
}
.faq-answer,
.lk-faq-answer,
.praev-faq-answer,
.sol-faq-answer,
.ws-faq-answer,
.eg-faq-answer,
.club-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-item.open .faq-answer,
.lk-faq-item.open .lk-faq-answer,
.praev-faq-item.open .praev-faq-answer,
.sol-faq-item.open .sol-faq-answer,
.ws-faq-item.open .ws-faq-answer,
.eg-faq-item.open .eg-faq-answer,
.club-faq-item.open .club-faq-answer {
  max-height: 800px;
}
.faq-answer-inner,
.lk-faq-answer-inner,
.praev-faq-answer-inner,
.sol-faq-answer-inner,
.ws-faq-answer-inner,
.eg-faq-answer-inner,
.club-faq-answer-inner {
  padding: 14px 20px 20px;
  font-size: 14px;
  color: var(--muted2);
  line-height: 1.75;
  border-top: 1px solid var(--border);
}
.faq-answer a,
.lk-faq-answer a,
.praev-faq-answer a,
.sol-faq-answer a,
.ws-faq-answer a,
.eg-faq-answer a,
.club-faq-answer a {
  color: var(--gold);
  text-decoration: none;
}@media (hover: hover) and (pointer: fine) {

.faq-answer a:not(.link-arrow):hover,
.lk-faq-answer a:not(.link-arrow):hover,
.praev-faq-answer a:not(.link-arrow):hover,
.sol-faq-answer a:not(.link-arrow):hover,
.ws-faq-answer a:not(.link-arrow):hover,
.eg-faq-answer a:not(.link-arrow):hover,
.club-faq-answer a:not(.link-arrow):hover {
  text-decoration: underline;
}
}

@media (max-width: 480px) {
  .faq-question, .lk-faq-question, .praev-faq-question, .sol-faq-question,
  .ws-faq-question, .eg-faq-question, .club-faq-question {
    padding: 16px 14px; gap: 10px;
  }
  .faq-icon, .lk-faq-icon, .praev-faq-icon, .sol-faq-icon,
  .ws-faq-icon, .eg-faq-icon, .club-faq-icon {
    width: 26px; height: 26px;
  }
  .faq-answer-inner, .lk-faq-answer-inner, .praev-faq-answer-inner, .sol-faq-answer-inner,
  .ws-faq-answer-inner, .eg-faq-answer-inner, .club-faq-answer-inner {
    padding: 12px 14px 16px;
  }
}

/* ── 18c. FORM RADIUS — Eingabefelder 12px ──────────────────────────
   Inputs/Selects/Textareas auf 12px. iOS-Zoom-Schutz (font-size:16px)
   bleibt unberührt — nur border-radius wird standardisiert.
   ─────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea {
  border-radius: var(--radius-sm, 12px);
}

/* ── 18d. MODAL RADIUS — 24px für alle großen Overlay-Container ─────
   Innere modal-content / -inner Wrapper (nicht Backdrop = full-screen).
   ─────────────────────────────────────────────────────────────────── */
.praev-modal-inner,
.probe-modal-content,
.buch-modal-content,
.studio-modal-content,
.firma-pre-content,
.apply-modal-content,
.info-modal-content,
.kuend-modal-content,
.kf-modal-content,
.exit-overlay-inner,
.retain-overlay-inner,
.fan-modal-inner,
.gift-modal-content,
.rechner-card {
  border-radius: var(--radius-lg, 24px);
}

/* 18e entfernt — .nav-login-btn: Section 1 + lokale CSS auf 12px */
/* 18f/18g entfernt — .soc-btn: Section 15 auf 12px / 38px / 22px  */

/* ── 18h. UNIVERSAL BUTTON CATCH-ALL ────────────────────────────────────
   Deckt alle <button>-Elemente ab die nicht explizit ausgenommen sind.
   Spezifität (0,8,1) gewinnt über alle lokalen Einzel-Klassen (0,1,0).
   Inline styles werden durch Section 18h ohne !important NICHT überschrieben
   — inline styles in HTML müssen deshalb korrekt gesetzt sein.
   Ausnahmen: Hamburger, Social-Btns, FAB, Step-Dots, Toggle, Tabs.
   ─────────────────────────────────────────────────────────────────────── */
button:not(.nav-hamburger):not(.mf-social-btn):not(.lf-fab):not(.lf-step-dot):not(.lf-badge-new):not(.lf-badge-beta):not(.tflex-btn):not(.t-tab):not(#scroll-top):not(.probe-path-card):not(.solbe-sig-clear-btn) {
  border-radius: var(--radius-sm, 12px);
}

/* ═══════════════════════════════════════════════════════════════════════
   19. GLOBALES DESIGN SYSTEM — Typografie, Spacing & Logo
   Stand: 2026-07-12 | Session 38

   "Die komplette Website soll aussehen, als wäre sie aus einem einzigen
   Designsystem entstanden." — Ronny Engel
   Design-Ziel: Apple / Linear / Stripe Niveau
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Typografie-Skala ───────────────────────────────────────────────
     Pflicht-Werte — nie erfinden. Immer aus dieser Liste wählen.       */
  --ds-hero:    72px;   /* Hero H1, font-weight 800                     */
  --ds-h2:      48px;   /* Section Headings                             */
  --ds-h3:      32px;   /* Sub-Headings, Karten-Titel                   */
  --ds-desc:    20px;   /* Section Beschreibungstext                    */
  /* Fließend von 320px bis 1200px — kein fixer Breakpoint-Sprung mehr
     (getestet + freigegeben im Firmenfitness-Bereich, jetzt global).
     Eyebrow:H2 bleibt bei jeder Breite exakt 1:4 (siehe .section-h2 unten). */
  --ds-body:    clamp(15px, 0.34vw + 13.91px, 18px);   /* war fix 18px */
  --ds-small:   16px;   /* Small Text, Chips, Input                     */
  --ds-eyebrow: clamp(10px, 0.45vw + 8.55px, 14px);   /* war fix 14px */

  /* ── Button-Typografie (überschreibt Section 0b --btn-font-size) ──  */
  --btn-font-size: 14px;   /* Standard — konsistent über alle Buttons   */

  /* ── 8px Grid Tokens ───────────────────────────────────────────── */
  --space-1:   8px;    --space-2:  16px;   --space-3:  24px;
  --space-4:  32px;    --space-5:  40px;   --space-6:  48px;
  --space-7:  56px;    --space-8:  64px;   --space-9:  72px;
  --space-10: 80px;    --space-11: 88px;   --space-12: 96px;
  --space-13: 104px;   --space-14: 112px;  --space-15: 120px;
  --space-16: 128px;   --space-17: 136px;  --space-18: 144px;

  /* ── Section Spacing ────────────────────────────────────────────── */
  --section-pt: 120px;     /* Section Top Padding — Desktop             */
  --section-pb: 120px;     /* Section Bottom Padding — Desktop          */
  --section-padding-desktop: 120px;   /* Alias für neue Klassen        */
  --section-padding-tablet:   96px;   /* ≤ 1100px                      */
  --section-padding-mobile:   72px;   /* ≤ 768px                       */

  /* ── Typografische Hierarchie-Abstände (Section Header) ────────── */
  --eyebrow-to-title:   32px;  /* Eyebrow  → Headline                  */
  --title-to-subtitle:  16px;  /* Headline → Subtitle                  */
  --subtitle-to-copy:   32px;  /* Subtitle → Beschreibungstext         */
  --copy-to-content:    64px;  /* Beschreibung → Hauptinhalt           */

  /* ── Legacy-Tokens (auf neue Werte gemappt) ────────────────────── */
  --gap-eyebrow-h2:   clamp(20px, 1.36vw + 15.64px, 32px);  /* fließend, war fix 32px */
  --gap-h2-desc:      clamp(12px, 0.45vw + 10.55px, 16px);  /* fließend, war fix 16px */
  --gap-desc-content: 64px;  /* war 48px → Beschreibung → Inhalt      */
  --gap-cards:        32px;  /* Card Grid Gap                           */
  --gap-chips:        16px;  /* Chip Row Gap                            */

  /* ── Typografische Zeilenabstände ──────────────────────────────── */
  --text-line-height-body:    1.5;   /* Fließtext                       */
  --text-line-height-heading: 1;     /* Headlines, Display              */
  --text-line-height-display: 0.98;  /* Hero / Super-Display            */
}

/* ─── 19a. LOGO SYSTEM — Proportionales Nav-Scaling ─────────────────
   gap: 16px = konsistent mit Mobile-Footer Icon→Text-Abstand
   .nav-brand .lf-icon-box hat Spezifität (0,2,0) und gewinnt damit
   über die lokalen .lf-icon-box Regeln (0,1,0) ohne !important.
   Verhältnis Icon : Text ≈ 2:1 — skaliert wie der Hero.
   SVG viewBox 400×275 → aspect-ratio 400/275 ≈ 1.45:1
   ─────────────────────────────────────────────────────────────────── */
/* .nav-inner .nav-brand (Spezifität 0,2,0) schlägt die lokale, unspezifische
   .nav-brand{gap:16px}-Regel jeder einzelnen Seite unabhängig von der
   Dateireihenfolge — kein Duplizieren in 26 Dateien nötig. */
.nav-inner .nav-brand {
  --nav-logo-h: clamp(44px, 11vw, 52px); /* EINZIGE Quelle der Logo-Höhe —
    Icon-Höhe UND Wortmarken-Schriftgröße werden unten beide direkt daraus
    berechnet (calc), statt mit zwei separat getunten clamp()-Kurven nur
    ungefähr synchron zu laufen. Korrektur 2026-08-18: vorher hatten Icon
    (clamp 44–52px, 11vw) und Text (clamp 18–22px, 1.5vw) unterschiedliche
    vw-Steigungen — das Verhältnis driftete zwischen den beiden Endpunkten
    leicht auseinander. Jetzt ist die Wortmarke bei JEDER Viewport-Breite
    exakt proportional zum Icon, nicht nur an den beiden Rändern. */
  gap: clamp(10px, 1.15vw, 16px); /* skaliert mit Icon/Text (clamp) — war fix 16px, wirkte mobil zu groß */
  min-width: 0; /* erlaubt dem Brand-Block, in Flex-Layouts zu schrumpfen statt zu überlaufen */
}
.nav-brand .lf-icon-box {
  /* Logo-PROPORTIONEN unverändert (aspect-ratio aus Original-SVG) — nur die
     Darstellungshöhe skaliert. Untergrenze 44px erfüllt die Mobile-UX-Vorgabe
     "Logo ca. 44–48px hoch", Obergrenze 52px bleibt Desktop-Wert. */
  height: var(--nav-logo-h);
  width: auto;
  aspect-ratio: 400 / 275;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: none;
  background: none;
  padding: 0;
  box-sizing: border-box;
}

/* "Lila Fitness" Text: fest an die Icon-Höhe gekoppelt (calc statt eigener
   clamp-Kurve) — Faktor 0.423 entspricht exakt dem bisherigen Desktop-
   Verhältnis 22px/52px, damit sich die Optik NICHT ändert, aber jetzt bei
   jeder Breite mathematisch proportional zum Icon bleibt.

   Korrektur 2026-08-18, zweiter Anlauf (Buchstabenabstand): Die erste
   Korrektur (calc mit fixen px-Endwerten 6,5px → 1px) hat den Sprung zwar
   geglättet, aber immer noch NICHT wirklich proportional skaliert — sie
   ließ den Abstand um Faktor 6,5 schrumpfen, während Icon und Schriftgröße
   im selben Bereich nur um Faktor 1,18 (52px→44px) schrumpfen. Das sah
   weiterhin "zusammengeschoben" aus, nur ohne sichtbaren Sprung.
   Echte Proportionalität zum Icon erreicht man NICHT über eine eigene
   px-Kurve, sondern indem man den Abstand einfach in `em` angibt und sonst
   nichts weiter tut: `em` ist bereits relativ zur eigenen font-size, und
   die font-size hängt bereits über --nav-logo-h am Icon. Ein fester
   0.3em-Wert schrumpft dadurch AUTOMATISCH exakt im selben Verhältnis wie
   Icon und Schriftgröße — keine zweite, unabhängige Formel nötig. */
/* 2026-08-19, Nutzerwunsch: KEINE "..."-Kürzung der Wortmarke beim Skalieren
   mehr — entweder voll sichtbar oder (ab 640px, s. Section 2b-STAGED) ganz
   ausgeblendet. `text-overflow: ellipsis` + `overflow: hidden` wurden dafür
   entfernt; die Buchstabenspreizung skaliert bereits proportional über `em`
   (siehe Kommentar unten), braucht also keine Clip-/Kürzungs-Absicherung
   mehr, solange oberhalb von 640px genug Breite vorhanden ist. */
.nav-brand .brand-name {
  font-size: calc(var(--nav-logo-h) * 0.423);
  letter-spacing: 0.3em;
  min-width: 0;
}


/* Brand-Block: kleiner Versatz für optische Mitte */
.nav-brand .brand-block {
  margin-top: 4px;
  min-width: 0;
  overflow: hidden;
}

/* ─── 1d. MOBILE HEADER — Wortmarke bleibt sichtbar (Mobile-UX-Pass) ──
   Vorherige Regel blendete "Lila Fitness" komplett aus (≤480px) und
   quetschte den Login-Button auf 12px — beides ausdrücklich unerwünscht.
   Neue Lösung: Login-Button verlässt den Header komplett ab ≤960px
   (siehe Section 2b), wodurch für Logo + Wortmarke + Hamburger auch auf
   sehr schmalen Phones (320px) genug Platz bleibt. Zusätzlich wird die
   Buchstabenspreizung der Wortmarke skaliert seit 2026-08-18 nicht mehr
   über eigene @media-Sprünge, sondern smooth über --nav-logo-h (siehe
   .nav-brand .brand-name oben) — synchron mit Icon-Schrumpfung, spart auf
   sehr schmalen Phones (320px) weiterhin Platz, aber ohne Sprung/"Squish".
   Stand: 2026-08-14, Mobile-UX-Pass. Breakpoint 2026-08-18 wieder auf
   960px zurückgesetzt (war am 2026-08-16 versehentlich auf 1180px
   angehoben worden, s. Section 2b).
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav-inner { gap: 10px; padding: 0 clamp(16px, 4vw, 24px); }
  .nav-right { gap: 10px; }
}
@media (max-width: 400px) {
  .nav-inner .nav-brand { gap: 8px; }
}

/* ─── 19b. SECTION TYPOGRAPHY — Eyebrow · H2 · Sub ─────────────────────
   Kanonische Typografie-Hierarchie für alle Sektionen auf allen Seiten.
   Quelle der Wahrheit: index.html. Unterseiten (clubs, praevention etc.)
   erben diese Werte automatisch — kein lokaler Override nötig.
   ─────────────────────────────────────────────────────────────────── */
.section-eyebrow {
  font-size: var(--ds-eyebrow, 14px);
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: var(--gap-eyebrow-h2, 32px);
  opacity: 0.8;
}
.section-h2 {
  /* Fließend von 320px (40px) bis 1200px (56px) — kein Sprung bei 900px mehr.
     Exakt 4× die Eyebrow-Formel (--ds-eyebrow) → Verhältnis Eyebrow:H2 bleibt
     bei JEDER Breite 1:4, nicht nur an den Endpunkten. */
  font-size: clamp(40px, 1.82vw + 34.18px, 56px);
  font-weight: 400;          /* Basiswert — .heavy (700) / .light (300) überschreiben */
  line-height: 1;
  margin-top: 0;
  margin-bottom: var(--gap-desc-content, 64px);
  /* Mobile-UX-Pass 2026-08-14: verhindert einzelne Buchstaben/Wortreste in
     eigener Zeile (z. B. "WISSENSWERT" + "E."). Wörter brechen nur noch an
     Leerzeichen (word-break:normal, overflow-wrap:normal) — siehe auch die
     .heavy-Regel, die vorher aggressiv overflow-wrap:break-word setzte.
     text-wrap:balance verteilt mehrzeilige Headlines gleichmäßiger
     (progressive enhancement, in nicht unterstützten Browsern einfach kein
     Effekt — kein Fallback nötig). */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}
@media (max-width: 480px) {
  /* Untergrenze sinkt weiter, damit lange (zusammengesetzte) Wörter auf
     schmalen Phones lieber als Ganzes kleiner werden, statt umzubrechen. */
  .section-h2 { font-size: clamp(32px, 8.5vw, 56px); }
}

/* 🔴 PERMANENTE REGEL (ab 2026-08-30, Nutzerauftrag: "immer die Texte anpassen/
   einkürzen, sodass es auf volle Zeilen kommt — als Regel für die gesamte Seite"):
   text-wrap:pretty auf allen Fließtext-Absätzen und Listenpunkten. Der Browser
   optimiert damit die Umbrüche so, dass keine einzelnen Wortreste allein in der
   letzten Zeile stehen (Hurenkinder/Orphans). Progressive Enhancement: Browser
   ohne Unterstützung ignorieren die Eigenschaft einfach — kein Risiko, kein
   Fallback nötig. Der redaktionelle Teil der Regel steht in CLAUDE.md:
   Mobil-Kurztexte (text-short) beim Schreiben immer so kürzen, dass bei
   320–430px keine Ein-Wort-Zeile entsteht (Beispiel: "Datenschutzerklärung"
   → "Datenschutz" in der Modal-Datenschutznotiz). */
p, li, .kuend-privacy-note, .praev-modal-sub, .exit-sub, .praev-note {
  text-wrap: pretty;
}
@media (max-width: 360px) {
  .section-h2 { font-size: clamp(28px, 8.2vw, 56px); }
}
/* H2 gefolgt von Beschreibungsabsatz: enger */
.section-h2:has(+ p) { margin-bottom: var(--gap-h2-desc, 16px); }
/* H2 gefolgt von .section-subtitle: title-to-subtitle Gap */
.section-h2:has(+ .section-subtitle) { margin-bottom: var(--title-to-subtitle, 16px); }
/* Beschreibungsabsatz → Inhalt-Gap + kein Doppel-Abstand oben */
.section-h2 + p { margin-top: 0; margin-bottom: var(--copy-to-content, 64px); }
/* ── Section-Subtitle (zweite Zeile unter H2, keine Display-Typo) ─── */
/* Sentence Case in HTML. Kein uppercase. Kein extra letter-spacing.    */
/* Seitenspezifische Akzentfarbe via lokalem Override erlaubt.          */
.section-subtitle {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  color: var(--purple-l);
  line-height: var(--text-line-height-heading, 1);
  margin-top: 0;
  margin-bottom: var(--subtitle-to-copy, 32px);
}
/* Subtitle direkt gefolgt von Beschreibung: subtitle-to-copy Gap */
.section-subtitle + p { margin-top: 0; margin-bottom: var(--copy-to-content, 64px); }
/* ── Section-Copy (Beschreibungstext unter H2 oder Subtitle) ────── */
.section-copy {
  font-size: var(--ds-body, 18px);
  color: var(--text-body);
  line-height: var(--text-line-height-body, 1.5);
  margin-top: 0;
  margin-bottom: var(--copy-to-content, 64px);
  max-width: 640px;
}
/* ── Section-Header Wrapper (Eyebrow + H2 + Subtitle + Copy) ────── */
.section-header {
  margin-bottom: var(--copy-to-content, 64px);
}
.section-header .section-eyebrow { margin-bottom: var(--eyebrow-to-title, 32px); }
.section-header .section-copy,
.section-header p:last-child { margin-bottom: 0; }
/* Eyebrow über CTA-Bereich (global) */
.cta-eyebrow {
  font-size: var(--ds-eyebrow, 14px);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: var(--gap-eyebrow-h2, 32px);
}
/* Mobile-Regelwerk (≤700px, feste CLAUDE.md-Schwelle) — Nutzerauftrag:
   ALLE goldenen Section-Eyebrows sitewide auf Mobile ausblenden. Bislang
   war das nur für einzelne Sections (Firmenfitness, Standorte) lokal in
   index.html gelöst — ab jetzt sitewide zentral hier in lf-design.css für
   ALLE Sections auf ALLEN Seiten. Betrifft NUR die goldene Eyebrow-Zeile
   über Section-Headlines (.section-eyebrow, .cta-eyebrow) — NICHT Modal-
   Eyebrows (.praev-modal-eyebrow, .retain-eyebrow, .info-modal-label etc.),
   die einen eigenen Kontext haben. Headline (H2) trägt die Botschaft allein
   weiter, wie bereits bei den zuvor einzeln umgesetzten Sections etabliert.
   Nur per display:none versteckt, Text bleibt im DOM (Desktop unverändert).
   Nachtrag 2026-08-25: `!important` nötig — mehrere Eyebrows (Ausstattung
   "Training & Ausstattung", "Dein Start", beide "155 Bewertungen · ★ 5,0
   Google" / "★ 5,0 Google · 155 Bewertungen") haben ein inline
   `style="display:flex;..."` direkt am Element (für die Desktop-
   Zentrierung). Eine Inline-Deklaration schlägt jede externe CSS-Regel
   unabhängig von deren Spezifität — nur `!important` in der Stylesheet-
   Regel gewinnt dagegen. Ohne dieses `!important` blieben genau diese vier
   Eyebrows auf Mobile trotz der Regel sichtbar (Bug, per Screenshot vom
   Nutzer aufgedeckt). */
/* Nachtrag 2026-09-06 (Task #129, Nutzerauftrag "Startseiten-Regel zu 100% auf
   alle Standortseiten + alle anderen Seiten"): auch die gold-farbenen Section-
   Eyebrows der Studio-Seiten (.club-detail-eyebrow "Dein Studio in ...",
   .club-switch-eyebrow "Weitere Standorte") fallen unter dieselbe Regel — sie
   sind Section-Eyebrows mit eigenem Klassennamen. Hero-Eyebrows bleiben wie auf
   der Startseite (.hero-eyebrow dort mobil sichtbar) unangetastet; Modal-Eyebrows
   regelt weiterhin das Modal-Regelwerk (≤480px). */
@media (max-width: 700px) {
  .section-eyebrow, .cta-eyebrow,
  .club-detail-eyebrow, .club-switch-eyebrow { display: none !important; }
}
.section-h2 .heavy {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--white);
  /* overflow-wrap:break-word ENTFERNT (Mobile-UX-Pass 2026-08-14) — brach
     lange Wörter mitten im Wort um (z. B. "WISSENSWERT" + "E."). Schutz vor
     horizontalem Overflow übernimmt jetzt die sinkende font-size-Untergrenze
     der .section-h2-Basisregel (clamp mit kleineren Werten ≤480px/≤360px). */
  overflow-wrap: normal;
  word-break: normal;
}
.section-h2 .light {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--white);
  font-size: 0.68em;
  display: block;
  line-height: 1;
  margin-top: 0.15em;
}
.section-h2 .gold {
  color: var(--gold);
  font-weight: 300;
  font-size: 0.68em;
  display: block;
  line-height: 1;
  margin-top: 0.15em;
}
/* ─── .hero-accent-purple — zentrale Rolle für große violette Akzentzeilen
   (Nachkorrektur 2026-08-09, Teil B). Dies ist EXAKT dieselbe Farbe und
   Behandlung, die die Startseite für ihre bereits akzeptierten großen
   Akzentüberschriften nutzt (index.html: 4× <span class="light"
   style="color:var(--purple-l)"> auf .section-h2 — Drei-Wege-Karte,
   Betreuung, Community, Final-CTA). var(--purple-l) IST die zentrale,
   akzeptierte Rolle für diesen Anwendungsfall — sie wirkt nur "greller",
   wenn sie (wie zuvor auf live-kurse.html .lk-accent) auf voller H1-Größe
   mit engem letter-spacing statt in der hier zentralisierten, deutlich
   zurückhaltenderen Skalierung (0.68em, weight 300, letter-spacing 0.16em,
   line-height 1) verwendet wird. NIEMALS #6a00f4/#8B30FF hardcoden — immer
   var(--purple-l) über diese Klasse referenzieren. Für Hero-H1-Akzentzeilen
   (nicht .section-h2) direkt auf den Akzent-Span anwenden. */
.hero-accent-purple {
  color: var(--purple-l);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68em;
  display: block;
  line-height: 1;
  margin-top: 0.15em;
}
@media (max-width: 900px) {
  .hero-accent-purple { letter-spacing: 0.05em; }
}

/* ─── .h2-tight ist entfernt (Session 60) ──────────────────────────────────
   display:block + line-height:1 + margin-top:0.15em sind jetzt GLOBALER
   Standard für .section-h2 .light und .section-h2 .gold. Keine Klasse nötig. */
@media (max-width: 900px) {
  /* .section-h2 font-size ist jetzt fließend (siehe Basis-Regel oben) — kein 900px-Sprung mehr */
  .section-h2 .light { letter-spacing: 0.05em; }
}

/* ═══════════════════════════════════════════════════════════════════════
   19c. HERO HEADER VARIANTEN + KOMPONENTEN-SYSTEM
   Stand: 2026-07-15 | Session 66 — Typografie-Architektur v1.0

   KOMPONENTEN:  .hero-header .hero-eyebrow .hero-title .hero-copy
                 .hero-actions .hero-trust
   TIERS:        .hero-xl (Startseite) | .hero-lg (Clubs, Jobs)
                 .hero-md (Prävention) | .hero-sm (Legal, 404)
   VARIANTEN:    .hero-header--prevention (spezifischste, überschreibt Tiers)

   Regeln:
   - Farbmodifier ändern NUR color/background/glow — NIEMALS Typografie
   - Tiers setzen Standardwerte — Varianten überschreiben per Spezifität
   - NIEMALS visuelle Qualität für Architektur opfern
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Basis-Wrapper (keine eigenen Styles — Varianten übernehmen alles) ── */
.hero-header { /* BEM-Wrapper */ }

/* ── Globale Hero-Komponenten ────────────────────────────────────────────
   Basis-Utilities: Größe kommt vom Tier-Modifier oder von der Variante.
   ─────────────────────────────────────────────────────────────────────── */
.hero-eyebrow {
  font-size: var(--ds-eyebrow, 14px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--gap-eyebrow-h2, 32px);
}

.hero-title {
  /* font-size kommt vom Tier-Modifier */
  color: var(--white);
  text-transform: uppercase;
}

.hero-copy {
  font-size: var(--ds-body, 18px);
  line-height: var(--text-line-height-body, 1.5);
  color: rgba(255, 255, 255, 0.70);
  max-width: 600px;
  margin: 0 0 var(--copy-to-content, 64px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  font-size: 12px;                  /* Mikro-Trust-Labels — Skala: 12px */
  color: rgba(255, 255, 255, 0.55);
}

/* ── Tier XL — Startseite: maximale Display-Wirkung ─────────────────── */
.hero-xl .hero-header__title,
.hero-xl .hero-title {
  font-size: clamp(54px, 8vw, 112px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero-xl .hero-header__accent {
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Tier LG — Clubs, Jobs: Große Seiten-Heros ───────────────────────── */
.hero-lg .hero-header__title,
.hero-lg .hero-title {
  font-size: clamp(44px, 5.5vw, 78px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero-lg .hero-header__accent {
  font-size: clamp(22px, 2.5vw, 38px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Tier MD — Prävention, Kampagnenseiten ───────────────────────────── */
.hero-md .hero-header__title,
.hero-md .hero-title {
  font-size: clamp(40px, 4.8vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero-md .hero-header__accent {
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Tier SM — Legal, 404, informationale Seiten ─────────────────────── */
.hero-sm .hero-header__title,
.hero-sm .hero-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero-sm .hero-header__accent {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Variante: Prevention (praevention.html — §20 Kampagnenseite) ──────
   Anwendung: <div class="hero-header hero-header--prevention">
   Unterschied zu anderen Heros:
   - __title: Großes Display (56–88px), 700, tight line-height
   - __accent: Eigenständige Textzeile, deutlich kleiner (34–58px), 400
              Erlaubt kontrolliertes Umbrechen — KEIN white-space: nowrap
   ────────────────────────────────────────────────────────────────────── */
.hero-header--prevention .hero-header__title {
  font-size: clamp(56px, 5.2vw, 88px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  /* Kein fester max-width mehr (war 720px) — wuchs die Schrift über 768px
     hinaus weiter, blieb der Container starr und "FÜHLE DICH STARK." brach
     wieder um. Der Titel darf jetzt die volle verfügbare Breite nutzen und
     wächst mit der Schriftgröße mit. */
  max-width: 1100px;
  margin: 0 0 20px;
}

.hero-header--prevention .hero-header__accent {
  font-size: clamp(34px, 3.3vw, 58px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  max-width: 1180px;
  white-space: normal;          /* KRITISCH: kein nowrap — darf umbrechen */
  overflow-wrap: normal;
  word-break: normal;
  margin: 0 0 24px;
}

/* Goldene Regel: Eine globale Regel darf keine visuell bessere Hero-Komposition
   zerstören. Neue globale Änderungen müssen betroffene Heroes vorher prüfen. */

/* ═══════════════════════════════════════════════════════════════════════
   20. FOOTER BASE CSS — Desktop, Tablet, Mobile Footer
   Stand: 2026-07-12 | Session 40 – Footer-Rollout auf alle 13 Unterseiten

   Zentrale Quelle für alle Footer-Styles. Entfernt aus lokalen <style>-Blöcken
   aller 13 Unterseiten. Section 17 (Footer Polish) überschreibt via Spezifität.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop Footer ─────────────────────────────────────────────────── */
footer {
  background: rgba(30,27,46,0.97);
  padding: 60px 0 24px;
  position: relative;
}
.footer-grid {
  /* Korrektur 2026-08-18: der Korrekturauftrag vom 2026-08-16 (reduzierter
     Footer, nur zentrierte Markenzeile) sollte ausschließlich für MOBIL
     gelten (siehe #mob-footer weiter unten). Auf Desktop war das eine
     versehentliche Übertragung der mobilen Reduktion — hier wird das alte
     4-Spalten-Grid (Marke/Lila Fitness/Mitgliedschaft/Kontakt) wieder
     hergestellt. Die Spaltenbreiten selbst kommen mit höherer Spezifität
     aus Section 17 (footer .footer-grid, siehe unten). */
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 28px;
}
.footer-brand-desc {
  font-size: 14px;
  /* Nachkorrektur 2026-08-09: war 0.85 (viel heller als die Spaltentexte bei 0.38) —
     Nutzer wollte Logo-Schriftzug, Claim und Spaltentext in einheitlicher Farbe. */
  color: rgba(255,255,255,0.38);
  line-height: 1.7;
  margin-top: 4px;
  max-width: 240px;
}
.footer-col h5 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 22px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 14px; }
.footer-col ul li a {
  font-size: 14px;
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  transition: color 0.2s;
}@media (hover: hover) and (pointer: fine) {

.footer-col ul li a:hover { color: rgba(255,255,255,0.9); }
}

.footer-col ul li a.footer-kuend {
  color: var(--gold);
  font-size: 14px;
  transition: color 0.2s;
}@media (hover: hover) and (pointer: fine) {

.footer-col ul li a.footer-kuend:hover { color: rgba(255,255,255,0.9); }
}

.footer-contact p {
  font-size: 14px;
  /* Nachkorrektur 2026-08-09: war var(--muted2) (heller lila-grau) — jetzt gleiche
     Farbe wie alle anderen Footer-Texte (Spaltenlinks, Logo-Schriftzug). */
  color: rgba(255,255,255,0.38);
  margin-bottom: 8px;
  line-height: 1.8;
}
.footer-contact a {
  /* Nachkorrektur 2026-08-09: war 0.55 (heller als Spaltentexte bei 0.38) */
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  transition: color 0.2s;
}@media (hover: hover) and (pointer: fine) {

.footer-contact a:hover { color: rgba(255,255,255,0.9); }
}

/* Nachkorrektur 2026-08-09: Logo ist wie alle anderen Footer-Elemente ein Link
   (href="index.html") — soll beim Hover genauso hell aufleuchten wie Spaltenlinks/
   Kontakt-Links (0.38 → 0.9), nicht nur unsichtbar interaktiv bleiben. */
.footer-logo-wrap { transition: opacity 0.2s; }@media (hover: hover) and (pointer: fine) {

.footer-logo-wrap:hover .footer-logo-svg path { fill-opacity: 0.9 !important; }
}
@media (hover: hover) and (pointer: fine) {

.footer-logo-wrap:hover .footer-logo-text > div,
.footer-logo-wrap:hover .footer-logo-prime > div:not([style*="background"]) {
  color: rgba(255,255,255,0.9) !important;
}
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0 0;
  display: flex;
  align-items: center;
  gap: 32px;
}
.footer-copy {
  flex-shrink: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.footer-bottom .footer-legal { margin-left: auto; }
.footer-app-badges { display: none; /* nur mobil sichtbar */ }
.footer-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}
.footer-logo-svg { width: 82px; height: 57px; display: block; }
.footer-logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.footer-logo-prime {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.footer-social { display: flex; gap: 10px; }
/* .soc-btn → lf-design.css Section 15 */

/* ── Tablet (860px): 3-spaltig ──────────────────────────────────────── */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center;
    gap: 20px;
    justify-content: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
  }
  .footer-grid > div:first-child .footer-brand-desc { display: none !important; }
  .footer-grid > div:first-child .footer-logo-prime { display: none !important; }
  .footer-grid > div:first-child .footer-social { display: none !important; }
  .footer-col h5 { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .footer-col h5::after { content: '+'; font-size: 18px; font-weight: 300; color: rgba(255,255,255,0.35); line-height: 1; }
  .footer-col.open h5::after { content: '−'; }
  .footer-app-badges { display: flex !important; }
  .footer-bottom { flex-direction: column; gap: 16px; }
}

/* ── Mobile (768px): 2-spaltig → 1-spaltig ──────────────────────────── */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    margin-bottom: 36px !important;
  }
  footer { padding: 48px 0 28px !important; }
  .footer-brand-desc { display: none; }
  .footer-col ul li { margin-bottom: 10px !important; }
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 12px !important; }
  .footer-app-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px 0 4px;
    border-top: 1px solid var(--border);
  }
  .footer-logo-wrap {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
  }
  .footer-logo-svg { width: 44px; height: 30px; }
  .footer-logo-text { align-items: flex-start; }
  .footer-logo-text > div:first-child { font-size: 18px !important; }
  .footer-logo-prime { display: none; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ── Mobile Footer (#mob-footer) ────────────────────────────────────── */
#mob-footer { display: none; }
@media (max-width: 900px) {
  footer { display: none !important; }
  #mob-footer {
    display: block;
    background: #1E1B2E;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 32px var(--gutter, 20px) 28px;
    font-family: inherit;           /* erbt global Montserrat aus body */
    text-align: center;
  }
  .mf-brand {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    margin-bottom: 4px;
  }
  /* Nachtrag 2026-08-30 (Nutzerauftrag: "das Logo Lila Fitness hat keinen Hover
     wie bei der Startseite"): Hover hellt Icon + Wortmarke auf 0.9 auf — identisch
     mit dem lokalen index.html-Block, jetzt zentral für alle Unterseiten. Hover-
     gegated (sitewide Touch-Regel), damit auf Touch-Geräten nichts "hängen bleibt". */
  .mf-brand a { transition: opacity 0.2s; }
  @media (hover: hover) and (pointer: fine) {
    .mf-brand a:hover svg path { fill-opacity: 0.9 !important; }
    .mf-brand a:hover .mf-brand-text { color: rgba(255,255,255,0.9) !important; }
  }
  .mf-brand-text {
    /* Nachtrag 2026-08-30 (Nutzerauftrag: "Verhältnis Icon zu Wortmarke wie im
       Original-Logo, darf nie verändert werden" — abgeglichen mit
       LilaFitness-Logo-2026.pdf, Vektormaße): Im Original ist die Icon-Höhe das
       4,47-fache der Versalhöhe der Wortmarke, der Abstand Icon→Wortmarke das
       1,23-fache der Versalhöhe. Bei 57px Icon-Höhe (Kanon, wie Desktop-Footer):
       Versalhöhe 12,8px → font-size 18px (Montserrat-Versalhöhe ≈ 0,70 em),
       Abstand 16px. Vorher 14px/10px — Wortmarke war zu klein fürs Icon. */
    /* Farbe: rgba(255,255,255,0.38) wie Desktop-Wortmarke + index.html-Mobile-Footer
       (Nutzerauftrag 2026-08-20 "Farbe wie Desktop, keine Abweichung" — hier stand
       auf den Unterseiten noch 0.9, Drift am 2026-08-30 behoben). */
    font-size: 18px; font-weight: 300; letter-spacing: 0.3em;
    text-transform: uppercase; color: rgba(255,255,255,0.38);
    margin-top: 16px; margin-bottom: 0; line-height: 1;
  }
  .mf-claim {
    font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(255,255,255,0.38);
    margin: 7px 0 24px; line-height: 1;
  }
  .mf-contact {
    display: flex; flex-direction: column; gap: 8px; align-items: stretch;
    margin: 0 auto 24px; width: 100%; max-width: 260px;
  }
  .mf-phone, .mf-wa {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 13px 16px; box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.18); border-radius: 12px;
    color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, transform 0.15s;
  }
  .mf-phone:hover {
    color: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.65);
  }
  .mf-phone:active { transform: scale(0.97); }
  .mf-wa:hover {
    color: #4ade80;
    border-color: #4ade80;
  }
  .mf-wa:active { transform: scale(0.97); }
  .mf-social-section { margin-bottom: 20px; }
  .mf-social-heading {
    font-size: 10px; font-weight: 600; letter-spacing: 4px;
    text-transform: uppercase; color: rgba(255,255,255,0.28);
    margin: 0 0 4px;
  }
  .mf-social { display: flex; justify-content: center; gap: 16px; }
  .mf-social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: none; background: none; border-radius: 12px; /* Design Freeze: 8px war Verstoß, gleich .soc-btn (Desktop) */
    color: rgba(255,255,255,0.55); text-decoration: none;
    transition: color 0.2s, transform 0.2s;
  }
  .mf-social-btn svg { width: 28px; height: 28px; }
  .mf-social-btn:hover,
  .mf-social-btn:active { color: rgba(255,255,255,0.9); transform: translateY(-1px) scale(1.08); }
  .mf-apps {
    display: flex; justify-content: center; gap: 10px;
    margin: 0 0 24px; padding: 0;
  }
  .mf-apps a {
    display: inline-flex; align-items: center; gap: 8px;
    background: #000; border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; padding: 7px 14px;
    text-decoration: none; color: #fff;
    opacity: 0.85;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .mf-apps a:hover { opacity: 1; transform: translateY(-2px); }
  .mf-nav {
    display: none; flex-wrap: wrap; justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 18px; margin-bottom: 0;
  }
  .mf-nav a {
    color: rgba(255,255,255,0.52); font-size: 12px; text-decoration: none;
    padding: 5px 10px; transition: color 0.2s;
  }
  .mf-nav a:hover { color: rgba(255,255,255,0.85); }
  .mf-nav a.nav-praev { color: rgba(74,222,128,0.65); }
  .mf-nav a.nav-praev:hover { color: #4ade80; }
  .mf-accordion { width: 100%; max-width: 320px; margin: 0 auto; }
  .mf-acc-toggle {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: none; border: none;
    padding: 13px 0; color: rgba(255,255,255,0.55);
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; cursor: pointer;
    font-family: inherit; transition: color 0.2s;
  }
  .mf-acc-toggle:hover { color: rgba(255,255,255,0.75); }
  .mf-acc-icon { transition: transform 0.25s; flex-shrink: 0; }
  .mf-acc-toggle.open .mf-acc-icon { transform: rotate(180deg); }
  .mf-acc-content {
    overflow: hidden; max-height: 0;
    transition: max-height 0.28s ease;
    display: flex; flex-direction: column;
  }
  .mf-acc-content.open { max-height: 340px; }
  .mf-acc-content a {
    color: rgba(255,255,255,0.52); font-size: 12px; text-decoration: none;
    padding: 10px 0; text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: color 0.2s;
  }
  .mf-acc-content a:last-child { border-bottom: none; }
  .mf-acc-content a:hover { color: rgba(255,255,255,0.8); }
  .mf-kuend {
    display: block; text-align: center;
    color: rgba(255,255,255,0.75); font-size: 12px; font-weight: 500;
    text-decoration: none; padding: 13px 0 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    transition: color 0.2s;
  }
  .mf-kuend:hover { color: var(--gold); }
  .mf-copy {
    text-align: center; font-size: 10px;
    color: rgba(255,255,255,0.2); margin: 24px 0 14px;
    letter-spacing: 0.03em;
  }
  .mf-app-hint {
    font-size: 10px; font-weight: 600; letter-spacing: 4px;
    text-transform: uppercase; color: rgba(255,255,255,0.28);
    margin: 20px 0 12px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   Section 21 — RESPONSIVE TEXT UTILITY
   Universelles System: voller Text auf Desktop, Kurztext auf Mobil.
   Gilt auf allen 14 Seiten automatisch via lf-design.css.

   Verwendung (überall nutzbar — in h1–h6, p, div, span, button …):
     <span class="text-long">Voller Text — Desktop-Version</span>
     <span class="text-short">Kurzversion für Mobil</span>

   Breakpoint: 768px (identisch mit Mobile-Overhaul-Block)
   ─────────────────────────────────────────────────────────────────────
   Verwandte seiten-spezifische Klassen (NICHT ersetzen, backward-compat):
     .announce-long / .announce-short  — Announce-Bar (index.html)
     .hero-p-long   / .hero-p-short    — Hero-Paragraph (index.html)
   ═══════════════════════════════════════════════════════════════════════ */
.text-short { display: none; }            /* Desktop: Kurztext ausgeblendet */
@media (max-width: 768px) {
  .text-long  { display: none; }          /* Mobil: Langtext weg */
  .text-short { display: inline; }        /* Mobil: Kurztext sichtbar */
}

/* ═══════════════════════════════════════════════════════════════════════
   Section 22 — RECHTSSEITEN BLOCKSATZ (Task #257)
   Gilt für alle legalen Fließtext-Sektionen.
   Voraussetzung: lang="de" auf <html> (alle 5 Rechtsseiten ✓)

   text-align-last: left — letzte Zeile eines Absatzes NICHT strecken
   (kurze Schlusszeilen würden sonst riesige Lücken erzeugen)

   list-items (li) bleiben linksbündig — kurze Aufzählungen reißen sonst.
   ─────────────────────────────────────────────────────────────────────
   Betroffene Seiten:
     agb.html          → .agb-section p
     datenschutz.html  → .ds-section p
     hausordnung.html  → .ds-section p
     impressum.html    → .legal-card p
     widerruf.html     → .legal-card p
   ═══════════════════════════════════════════════════════════════════════ */
.agb-section p,
.ds-section p,
.legal-card p {
  /* Nutzerentscheidung 2026-09-06 (Task #130): Blocksatz erzeugte auf schmalen
     Spalten große Wortlücken → Flattersatz (linksbündig) auf allen 5 Rechtsseiten.
     &shy;-Trennstellen im Markup bleiben (harmlos, helfen weiter bei langen Wörtern),
     hyphens:manual + overflow-wrap bleiben als Fangnetz. text-align-last entfällt. */
  text-align: left;
  /* Nachkorrektur 2026-09-04: Die Absätze tragen jetzt manuelle &shy;-Trennstellen
     (pyphen de_DE, siehe CLAUDE.md). hyphens:auto + &shy; + text-wrap:pretty führte
     auf iOS/WebKit zu komplettem Umbruch-Ausfall (Zeilen liefen über den Viewport).
     Daher: manual statt auto, pretty deaktiviert, Overflow-Härtung als Fangnetz. */
  hyphens: manual;
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  text-wrap: wrap;              /* überschreibt globales p { text-wrap: pretty } */
  overflow-wrap: break-word;    /* Fangnetz: NIE über den Rand, selbst ohne Trennstelle */
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Section 23 — MODAL-SCROLLBAR: Single Source of Truth (PERMANENT)
   Einheitliche, dezente Gold-Scrollbar für ALLE scrollbaren Modal-Boxen
   und internen Scroll-Bereiche site-weit — ersetzt die native
   Browser-Scrollbar (grau/inkonsistent, siehe Screenshot-Feedback).

   REGEL: Jede neue scrollbare Modal-Box bekommt zusätzlich zur eigenen
   Klasse `class="modal-scroll"` — NIEMALS lokal eine eigene
   scrollbar-color/scrollbar-width oder ::-webkit-scrollbar-Regel
   definieren. Diese Liste hier ist die einzige Stelle.
   ─────────────────────────────────────────────────────────────────────── */
.modal-scroll,
.firma-info-box, .firma-pre-scroll, .info-modal, .studio-modal, .kuend-modal,
.kuend-autocomplete, .exit-modal, .praev-modal, .solbe-box, .conc-messages,
.apply-modal-box, #kform-box, .modal-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(214,178,122,0.35) transparent;
}
.modal-scroll::-webkit-scrollbar,
.firma-info-box::-webkit-scrollbar, .firma-pre-scroll::-webkit-scrollbar, .info-modal::-webkit-scrollbar,
.studio-modal::-webkit-scrollbar, .kuend-modal::-webkit-scrollbar, .kuend-autocomplete::-webkit-scrollbar,
.exit-modal::-webkit-scrollbar, .praev-modal::-webkit-scrollbar, .solbe-box::-webkit-scrollbar,
.conc-messages::-webkit-scrollbar, .apply-modal-box::-webkit-scrollbar, #kform-box::-webkit-scrollbar,
.modal-box::-webkit-scrollbar {
  width: 8px;
}
.modal-scroll::-webkit-scrollbar-track,
.firma-info-box::-webkit-scrollbar-track, .firma-pre-scroll::-webkit-scrollbar-track, .info-modal::-webkit-scrollbar-track,
.studio-modal::-webkit-scrollbar-track, .kuend-modal::-webkit-scrollbar-track, .kuend-autocomplete::-webkit-scrollbar-track,
.exit-modal::-webkit-scrollbar-track, .praev-modal::-webkit-scrollbar-track, .solbe-box::-webkit-scrollbar-track,
.conc-messages::-webkit-scrollbar-track, .apply-modal-box::-webkit-scrollbar-track, #kform-box::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track {
  background: transparent;
}
.modal-scroll::-webkit-scrollbar-thumb,
.firma-info-box::-webkit-scrollbar-thumb, .firma-pre-scroll::-webkit-scrollbar-thumb, .info-modal::-webkit-scrollbar-thumb,
.studio-modal::-webkit-scrollbar-thumb, .kuend-modal::-webkit-scrollbar-thumb, .kuend-autocomplete::-webkit-scrollbar-thumb,
.exit-modal::-webkit-scrollbar-thumb, .praev-modal::-webkit-scrollbar-thumb, .solbe-box::-webkit-scrollbar-thumb,
.conc-messages::-webkit-scrollbar-thumb, .apply-modal-box::-webkit-scrollbar-thumb, #kform-box::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb {
  background-color: rgba(214,178,122,0.35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}@media (hover: hover) and (pointer: fine) {

.modal-scroll::-webkit-scrollbar-thumb:hover,
.firma-info-box::-webkit-scrollbar-thumb:hover, .firma-pre-scroll::-webkit-scrollbar-thumb:hover, .info-modal::-webkit-scrollbar-thumb:hover,
.studio-modal::-webkit-scrollbar-thumb:hover, .kuend-modal::-webkit-scrollbar-thumb:hover, .kuend-autocomplete::-webkit-scrollbar-thumb:hover,
.exit-modal::-webkit-scrollbar-thumb:hover, .praev-modal::-webkit-scrollbar-thumb:hover, .solbe-box::-webkit-scrollbar-thumb:hover,
.conc-messages::-webkit-scrollbar-thumb:hover, .apply-modal-box::-webkit-scrollbar-thumb:hover, #kform-box::-webkit-scrollbar-thumb:hover,
.modal-box::-webkit-scrollbar-thumb:hover {
  background-color: rgba(214,178,122,0.55);
  background-clip: padding-box;
}
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 21 — STANDORTWECHSLER: FÜNF LINKKARTEN (Single Source of Truth)
   Ersetzt ab 2026-08-03 die Pillen-Darstellung (.club-chip) inkl. dem
   aktuellen Standort in der eigenen Liste. Der aktuell geöffnete Standort
   erscheint hier nicht mehr — es werden ausschließlich die fünf anderen
   Studios als vollständig anklickbare Karten gezeigt. Google-/Apple-
   Routenlinks liegen NICHT mehr hier, sondern beim Adressblock des
   jeweils geöffneten Studios (siehe .club-address + .club-route-links).
   ─────────────────────────────────────────────────────────────────────── */
.club-switch-section { padding: 64px 0; }
@media (max-width: 699px) { .club-switch-section { padding: 48px 0; } }
.club-switch-wrap { max-width: 1040px; margin: 0 auto; text-align: center; }
.club-switch-eyebrow {
  font-size: var(--ds-eyebrow, 14px); font-weight: 600; letter-spacing: 4px;
  color: var(--gold); text-transform: uppercase; opacity: 0.8; margin-bottom: 14px;
}
.club-switch-h2 {
  font-size: clamp(24px, 2.6vw, 34px); color: var(--white);
  line-height: 1.25; margin-bottom: 12px;
}
.club-switch-h2 .heavy { font-weight: 700; }
.club-switch-h2 .light { font-weight: 400; }
.club-switch-intro {
  font-size: var(--ds-body, 16px); color: var(--text-body);
  max-width: 480px; margin: 0 auto 36px; line-height: 1.6;
}
.club-switch-grid {
  display: flex; flex-direction: column; gap: 12px;
}
/* Standortwechsler-Karten: vollständig rahmenlos (Single Source of Truth, ab 2026-08-07,
   übernommen aus der zuvor lokal auf fitnessstudio-hohenstein-ernstthal.html verbesserten
   Version). Kein border, kein zweites Innenrahmen-Element (::after inset box-shadow) —
   beides erzeugte eine helle/bläuliche Linie an der Bildunterkante. Abdunklung ausschließlich
   über den ::before-Verlauf bis zum oberen Kartenrand, Studiofoto bleibt oben klar erkennbar. */
.club-switch-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0;
  width: 100%;
  min-height: 200px;
  background-color: var(--bg);
  background-size: cover; background-position: center;
  border: 0;
  box-shadow: none;
  border-radius: 16px;
  padding: 16px; text-decoration: none;
  transition: transform 0.2s;
}
.club-switch-card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  /* Nachkorrektur 2026-08-09: oberer Bildbereich wirkte durch die dunklen Studiofotos +
     Verlauf zu düster — Verlauf zum oberen Rand deutlich aufgehellt (0.22 → 0.08), damit
     das Foto oben klar erkennbar bleibt, während der Text unten weiterhin lesbar ist. */
  background: linear-gradient(to top, rgba(10,8,16,0.96) 0%, rgba(16,12,28,0.60) 45%, rgba(35,20,55,0.08) 100%);
  transition: background 0.2s;
}
.club-switch-card::after { content: none; }
.club-switch-card > * { position: relative; z-index: 1; }@media (hover: hover) and (pointer: fine) {

.club-switch-card:hover { transform: translateY(-2px); border: 0; box-shadow: none; }
}
@media (hover: hover) and (pointer: fine) {

.club-switch-card:hover::before { background: linear-gradient(to top, rgba(10,8,16,0.98) 0%, rgba(16,12,28,0.68) 45%, rgba(45,25,70,0.14) 100%); }
}

.club-switch-card:focus { outline: none; }
.club-switch-card:focus-visible { outline: 2px solid var(--purple-l); outline-offset: 3px; }
.csc-brand { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.csc-name { font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.25; margin: 2px 40px 0 0; text-shadow: 0 1px 6px rgba(0,0,0,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ─── TILE-ARROW: EINZIGE gemeinsame Pfeilkomponente für vollständig anklickbare
   redaktionelle Bildkacheln websiteweit (AUFTRAG Bildkacheln/Linksystem,
   2026-08-08). Referenz: EGYM-/Betreuungskachel Startseite (vormals lokal
   ".vort-tile-arrow" in index.html — jetzt hier zentralisiert, keine Seiten-
   eigene Kopie mehr). Gilt u.a. für: EGYM/Bio-Age-, Betreuungs-, Kurs-, Sauna-/
   Wellness-, Solarium-, Ausstattungs-, Trainer/Team-, Standort- und
   Clubwechsler-Kacheln.
   Regeln: rechts unten in der Kachel, kein Hintergrund, kein Rahmen, kein
   Kreis, keine Pille — nur der Pfeil. Rein visuell (aria-hidden="true"), der
   zugängliche Name kommt vom umschließenden <a> (Titel/Text im Link oder
   aria-label). Hover: Pfeil bewegt sich nur wenige Pixel nach rechts, keine
   Karten-Sprünge, kein dramatischer Schatten. prefers-reduced-motion wird
   respektiert. Bei neuen Kacheln immer diese Klasse verwenden — keine neue
   seitenbezogene Pfeilklasse anlegen. */
.tile-arrow {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  color: var(--gold);
  transition: color 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.tile-arrow svg { width: 18px; height: 18px; }
a:hover .tile-arrow, a:focus-visible .tile-arrow {
  color: var(--gold-l);
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .tile-arrow { transition: color 0.2s ease; }
  a:hover .tile-arrow, a:focus-visible .tile-arrow { transform: none; }
}
/* Mobile (<700px): horizontaler Scroll-Snap-Slider statt gestapelter Karten (Single Source
   of Truth, ab 2026-08-07, übernommen aus fitnessstudio-hohenstein-ernstthal.html). Eine
   Karte weitgehend vollständig sichtbar, nächste Karte leicht angeschnitten als Wischhinweis.
   Scrollbar optisch ausgeblendet, Touch/Tastatur/horizontales Scrollen bleiben nutzbar. */
@media (max-width: 699px) {
  .club-switch-grid {
    display: flex; flex-direction: row; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: 14px; padding: 4px 4px 8px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .club-switch-grid::-webkit-scrollbar { display: none; }
  .club-switch-card {
    flex: 0 0 82%; max-width: 320px; min-width: 220px;
    width: auto; scroll-snap-align: center;
  }
}
@media (min-width: 700px) {
  .club-switch-grid { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .club-switch-card { flex: 0 1 calc(33.333% - 11px); min-width: 180px; width: auto; }
}
@media (min-width: 1100px) {
  .club-switch-card { flex: 0 1 calc(20% - 13px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 22 — CLUB-DETAIL: SEKTIONSKOPF + BILD/VORTEILE-MODUL + ABSCHLUSSLEISTE
   (Single Source of Truth, Umbau 2026-08-05)
   Ersetzt die frühere zweispaltige Variante, bei der Eyebrow/Titel/Lead in
   der rechten Bildspalte standen und die Sektion wie ein zweiter Hero wirkte.
   Neuer Aufbau in drei klar getrennten Ebenen:
   1) .club-detail-head  — Sektionskopf über volle Inhaltsbreite (Eyebrow,
      H2, kurzer Lead-Text max. ~680px) — normale Sektionstypografie, kein Hero.
   2) .club-detail        — Kartenmodul: .club-detail-top enthält Bildseite
      (~58%) + Vorteilsseite (~42%, 2×2-Raster der 4 Standortvorteile), beide
      gleich hoch (Grid-Stretch). Ab 1000px min-height ~520px als Zielhöhe,
      darunter (Tablet/Mobil) stapeln Bild und Vorteile automatisch (Grid
      fällt auf 1 Spalte zurück).
   3) .club-detail-footer — gemeinsame Abschlussleiste als Teil derselben
      Karte: Adresse links, Route (sekundär) + Probetraining (Hauptbutton,
      ganz rechts) rechts. Auf Mobil per column-reverse Probetraining zuerst.
   Nutzt ausschließlich vorhandene Tokens/Klassen (--bg3, --bg2, --border2,
   --radius-lg, --gold, --purple-l, --text-hi/body/lo, .btn-primary,
   .btn-outline-gold, .section-h2 .heavy/.light, .club-address).
   ─────────────────────────────────────────────────────────────────────── */
.club-detail-head {
  max-width: 1040px;
  margin: 0 auto 40px;
}
.club-detail-eyebrow {
  font-size: var(--ds-eyebrow, 14px);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  margin: 0 0 12px;
}
.club-detail-title.section-h2 {
  font-size: clamp(28px, 3.8vw, 40px);
  margin-bottom: 14px;
}
.club-detail-lead {
  font-size: var(--ds-body, 16px);
  color: var(--text-body);
  line-height: 1.6;
  max-width: 680px;
  margin: 0;
}
.club-detail {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg, 24px);
}
.club-detail-top {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  /* Nachtrag 2026-08-10 (3, Nutzerwunsch): .club-detail-top ist jetzt das
     unterste sichtbare Element der Karte (die Abschlussleiste liegt nicht
     mehr als eigener Block darunter, sondern als Overlay IM Bild, siehe
     .club-detail-footer weiter unten) — deshalb an allen 4 Ecken gerundet,
     nicht mehr nur oben. */
  border-radius: var(--radius-lg, 24px);
}
.club-detail-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg2, #252240);
}
.club-detail-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Nachtrag 2026-08-10 (3, Nutzerwunsch: "Bild unten abdunken, Zeile mit Button
   und Adresse ins Bild schieben"): Gradient deutlich verstärkt (mehr Fläche,
   mehr Deckkraft) — vorher nur ein sehr dezenter Verlauf ab 68%/0.32, der für
   die jetzt direkt auf dem Foto liegende Adress-/Route-/Probetraining-Zeile
   (siehe .club-detail-footer) nicht genug Kontrast bot. */
.club-detail-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 38%, rgba(10,8,18,0.58) 70%, rgba(10,8,18,0.92) 100%);
  pointer-events: none;
}
/* Basisstil = ehemals nur für Hohenstein-Ernstthal (body[data-page=...]) —
   jetzt verbindlicher Standard für ALLE 6 Clubseiten (SOFORTAUFTRAG global CI:
   Hohenstein-Ernstthal ist der bindende Struktur-Master, kein Standort darf
   eine eigene Darstellung dieser Sektion haben). 2×2-Kachel-Raster mit
   eigenständigen Karten (Border + Hintergrund, radius 18px wie .cb-tile auf
   der Startseite), Icon mittig über dem Text.
   Nachkorrektur 2026-08-10 (5, Nutzerwunsch: "Probetraining und Route müssen auf
   einer Höhe sein, Probetraining mittig unter den 4 Kacheln"): Spalte ist jetzt
   Flex-Column (.club-detail-facts oben, .club-detail-probe-cell unten, per
   margin-top:auto an den Rand gedrückt) mit align-items:stretch (war zuvor
   flex-start durch eine zweite, spätere Regel — dadurch schrumpfte
   .club-detail-probe-cell auf Button-Breite und "justify-content:center" lief
   leer, der Button klebte links). padding-bottom ist jetzt exakt so groß wie
   .club-detail-footer's eigenes Padding (16px bzw. 14px auf ≤640px) — beide
   Buttons enden dadurch im exakt gleichen Abstand vom unteren Bild-/Spaltenrand,
   sofern Bild und Fakten-Spalte gleich hoch sind (ab 1000px via min-height auf
   .club-detail-top garantiert). */
.club-detail-facts-panel {
  padding: 28px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.club-detail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  height: auto;
}
.club-detail-fact {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-md, 18px);
  padding: 16px 12px;
  /* Feste Mindesthöhe (Nutzerfeedback 2026-08-09): die 4 Vorteils-Kacheln
     hatten je Standort unterschiedliche Höhe, weil .club-detail-fact-sub
     ohne Begrenzung wächst — je nach Textlänge (kurze Stichpunkte auf 5
     Standorten vs. ganze Sätze auf Hohenstein-Ernstthal) fiel die gesamte
     Karte unterschiedlich hoch aus. 190px deckt den längsten aktuell
     verwendeten Text (~85 Zeichen, 5 Zeilen bei 12px in der schmalsten
     Desktop-Spaltenbreite) komfortabel ab; kürzere Texte werden dank
     justify-content:center vertikal zentriert statt oben klebend. */
  min-height: 190px;
}
.club-detail-fact-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(106,0,244,0.12);
  color: var(--purple-l);
  display: flex; align-items: center; justify-content: center;
}
.club-detail-fact-icon svg { width: 20px; height: 20px; }
.club-detail-fact-label {
  font-size: 14px; font-weight: 700; color: var(--white);
  line-height: 1.3;
}
.club-detail-fact-sub {
  font-size: 12px; color: var(--text-lo); line-height: 1.4; margin-top: 2px;
}
/* Nachtrag 2026-08-10 (3, Nutzerwunsch: "Bild unten abdunken und die Zeile mit
   Button und Adresse ins Bild schieben"): die Abschlussleiste ist jetzt kein
   eigener Balken mehr UNTER dem Bild (das erzeugte den vom Nutzer bemängelten
   "unsauberen" Bruch zwischen Foto und flacher Farbfläche) — sie liegt jetzt
   als Overlay DIREKT AUF dem Bild (position:absolute, HTML-technisch ein Kind
   von .club-detail-media statt ein Geschwister-Element von .club-detail-top).
   Nachkorrektur 2026-08-10 (4, Nutzerwunsch: "Probetraining kommt rechts unter
   die 4 Kacheln"): der Probetraining-Button ist NICHT mehr Teil dieser
   Bild-Overlay-Zeile — er wurde in die rechte Fakten-Spalte verschoben (siehe
   .club-detail-probe-cell weiter unten). .club-detail-footer enthält jetzt nur
   noch .club-detail-location (Route planen + Adresse), deshalb kein
   flex-wrap/justify-content:space-between mehr nötig. */
.club-detail-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 20px;
}
.club-detail-location {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* Nachkorrektur 2026-08-10 (4): .club-detail-probe-cell ist jetzt kein Kind von
   .club-detail-footer mehr, sondern liegt in .club-detail-facts-panel, direkt
   nach den 4 Kacheln (.club-detail-facts). margin-top:auto schiebt ihn an den
   unteren Rand der Spalte, sodass er auf Desktop-Breite optisch auf Höhe des
   Bild-Footers (Route planen/Adresse) endet, ohne dafür absolute Positionierung
   zu benötigen — die Spalte ist ein normaler Flex-Container. */
.club-detail-probe-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: 20px;
}
.club-detail-probe-cell .btn-primary { width: 100%; max-width: 320px; }
/* Nachkorrektur 2026-08-10: Dropdown-Menü (Google/Apple-Wahl) entfernt — Route planen
   ist jetzt ein einzelner direkter Link, der per JS (UA-Erkennung) automatisch auf
   Apple Maps oder Google Maps zeigt. Kein Klick-Zwischenschritt mehr nötig. */
.club-detail-route-wrap { position: relative; display: inline-flex; }
.club-detail-route-btn.btn-outline-gold { gap: 8px; flex-shrink: 0; }
.club-detail-route-btn svg { flex-shrink: 0; }
/* Nachtrag 2026-08-10 (3): Adresstext liegt jetzt direkt auf dem Foto — feste
   helle Schriftfarbe + Text-Shadow statt vererbter Standardfarbe, damit sie
   unabhängig vom jeweiligen Studiofoto lesbar bleibt (vorher reichte die
   vererbte Textfarbe, weil der Hintergrund ein einfarbiger --bg2-Balken war). */
.club-detail-address {
  justify-content: flex-start;
  margin: 0;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  min-width: 0;
}
@media (max-width: 380px) {
  .club-detail-facts { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .club-detail-facts-panel { padding: 40px 44px 16px; }
}
@media (max-width: 640px) {
  .club-detail-footer { padding: 14px 16px; }
  .club-detail-probe-cell { padding-top: 16px; }
  .club-detail-facts-panel { padding-bottom: 14px; }
}
/* Nachtrag 2026-09-06 (Task #128, Nutzerreport "Route und Adresse nicht mehr
   lesbar, wenn sie im Bild stehen"): Auf Mobile (≤700px, Mobile-Regelwerk-
   Schwelle) liegt die Abschlussleiste (Route planen + Adresse) NICHT mehr als
   Overlay im Foto, sondern als eigener Balken UNTER dem Bild — wie beim
   club-photo-Kanon (Adresse unterhalb des Fotos). Desktop behält das
   Overlay-im-Bild-Design (Nutzerwunsch 2026-08-10). Technik: .club-detail-media
   wird Flex-Column, das Bild verlässt die absolute Positionierung und trägt die
   16/10-Ratio selbst, der Footer wird static; Abdunklungs-Gradient + Text-Shadow
   entfallen (kein Foto mehr dahinter). */
@media (max-width: 700px) {
  .club-detail-media { aspect-ratio: auto; display: flex; flex-direction: column; }
  /* Einzelbild-Variante: Bild verlässt die absolute Positionierung, trägt die Ratio selbst */
  .club-detail-media > img:not(.club-detail-media-slide) { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  /* Slideshow-Variante (Hohenstein-Ernstthal, .club-detail-media-slide/-duo, absolut
     gestapelt): unsichtbarer ::before-Spacer reserviert die 16/10-Bildfläche, die Slides
     decken per top:0 + eigener Ratio exakt diese Fläche ab — der statische Footer
     darunter bleibt frei. :has() ist im Projekt etabliert (.section-h2:has(+ p)). */
  .club-detail-media:has(.club-detail-media-slide)::before,
  .club-detail-media:has(.club-detail-media-duo)::before { content: ''; display: block; width: 100%; aspect-ratio: 16 / 10; }
  /* Eltern-Selektor nötig: die Basis-Definition der Slides steht WEITER UNTEN im
     Stylesheet und würde bei gleicher Spezifität (0,1,0) gewinnen — (0,2,0) sticht. */
  .club-detail-media > .club-detail-media-slide,
  .club-detail-media > .club-detail-media-duo { bottom: auto; height: auto; aspect-ratio: 16 / 10; }
  .club-detail-media::after { display: none; }
  .club-detail-footer { position: static; background: var(--bg2, #252240); border-top: 1px solid var(--border, rgba(255,255,255,0.08)); }
  .club-detail-address { color: rgba(255,255,255,0.65); text-shadow: none; }
}
@media (min-width: 1000px) {
  .club-detail-top { grid-template-columns: 60% 40%; min-height: 520px; }
  .club-detail-media { aspect-ratio: auto; height: 100%; }
  .club-detail-media::after { background: linear-gradient(to bottom, transparent 45%, rgba(10,8,18,0.55) 74%, rgba(10,8,18,0.90) 100%); }
  .club-detail-facts-panel { padding: 48px 44px 16px; }
}

/* ── Club-Detail: Auto-Slideshow im Bildbereich (borderless, kein Modal-Rahmen) ──
   Mehrere <img class="club-detail-media-slide"> liegen übereinander (position
   absolute, inset:0) und werden per JS-Intervall über die .active-Klasse mit
   Crossfade durchgewechselt. Klick öffnet die bestehende Lightbox-Galerie
   (openLightbox(i)) an der passenden Stelle. Kein zusätzlicher Rahmen/Icon-Chip
   — die Fotos liegen direkt und ungerahmt im Modul, wie das Icon in .cb-tile-icon
   auf der Startseite ohne eigene Box auskommt. */
.club-detail-media { cursor: pointer; }
.club-detail-media-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.club-detail-media-slide.active { opacity: 1; }
/* Für zukünftige Hochformat-Bildpaare: zwei Portrait-Bilder nebeneinander
   ergeben zusammen annähernd das Zielformat des Bildbereichs. */
.club-detail-media-duo { position: absolute; inset: 0; display: flex; opacity: 0; transition: opacity 1.1s ease; }
.club-detail-media-duo.active { opacity: 1; }
.club-detail-media-duo img { flex: 1 1 50%; width: 50%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 23 — CLUBSEITEN: EINHEITLICHER MOBILE-RANDABSTAND (Single Source of Truth)
   Gleicher Zusatz-Rand wie index.html-Aktionen-Karten / Hero (+15px zum
   normalen --gutter), Breakpoint 900px = identisch mit dem --gutter-
   Umschaltpunkt in Section 0e, damit kein Doppel-Sprung entsteht.
   Gilt sitewide für alle 6 Clubseiten (index.html-Hero/Section-Header/
   Features/CTA sind bereits separat weiter oben erfasst).
   Ausnahme wie auf index.html (.ausst-grid/.ausst-studios-grid): Swipe-
   Slider bleiben von diesem Zusatz-Rand ausgenommen und bleeden bewusst
   näher an den Bildschirmrand — hier betrifft das .gallery-grid (Galerie-
   Slider), daher KEIN Container-weiter Fix auf .gallery-section, sondern
   gezielt nur Kopf + Abschluss-CTA.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .clubs-section .container,
  .club-review-section .container,
  .club-faq .container,
  .club-switch-section .container {
    padding-left: calc(var(--gutter) + 15px) !important;
    padding-right: calc(var(--gutter) + 15px) !important;
  }
  /* Galerie: nur Kopf + Abschluss-CTA — .gallery-slider-wrap (Swipe) bleibt ausgenommen */
  .gallery-section-header,
  .gallery-cta {
    padding-left: calc(var(--gutter) + 15px) !important;
    padding-right: calc(var(--gutter) + 15px) !important;
  }
}

/* ─── 21. SEMANTISCHE SEKTIONSHINTERGRÜNDE (SSoT) ───────────────────────
   Zwei ruhige, alternierende Töne für Sektionsfolgen auf Landingpages und
   Clubdetailseiten. Bewusst KEINE nth-child-Logik, da optionale Sektionen
   (z. B. Trainer/Live-Kurse) die Reihenfolge pro Seite verändern können.
   Jede Sektion bekommt stattdessen ihre eigene semantische Klasse und wird
   manuell mit .section-tone-a / .section-tone-b versehen.
   ─────────────────────────────────────────────────────────────────────── */
.section-tone-a { background: var(--bg); }
.section-tone-b { background: var(--bg2, #252240); }
/* Optionaler dritter Ton (Designsystem-Bereinigung 2026-08-09): löst Fälle, in
   denen zwei A/B-Sections direkt aufeinandertreffen würden (z.B. wenn eine
   Section aus SSoT-Gründen fest an .section-tone-b gebunden ist, siehe
   .club-review-section unten). Kein neuer Ton "nach Gefühl" — nur zur
   Auflösung einer sonst unvermeidbaren gleichfarbigen Doppelsection. */
.section-tone-c { background: var(--bg4, #342F52); }

/* .club-review-section trägt zwar .section-tone-b (Rhythmus-Klasse), muss aber
   den ECHTEN Google-Bewertungsbox-Hintergrund der Startseite verwenden (siehe
   --review-section-bg, Section 0b) — nicht den alternierenden a/b-Ton. Diese
   Regel gewinnt gegen .section-tone-b durch höhere Spezifität (2 Klassen). */
.club-review-section.section-tone-b { background: var(--review-section-bg); }

/* ─── ABSTAND BEWERTUNGSKARTEN → GOOGLE-BEWERTUNGSBOX (SSoT) ─────────────
   Nachkorrektur 2026-08-09, Teil D. Einzige Quelle für den Abstand zwischen
   dem letzten Bewertungskarten-Grid und der direkt darunter folgenden
   Google-Bewertungsbox (.review-google-row) — auf Startseite (.review-grid)
   UND allen 5 Clubdetailseiten (.club-review-grid) identisch. Keine lokale
   margin-bottom-Deklaration auf diesen beiden Klassen mehr in den einzelnen
   HTML-<style>-Blöcken. NIEMALS per negative margin, transform oder
   absolute Positionierung "korrigieren" — die Box darf die Karten darüber
   nie berühren oder überlappen. */
.review-grid,
.club-review-grid {
  margin-bottom: var(--review-grid-to-google-gap, 48px);
}
@media (max-width: 768px) {
  .review-grid,
  .club-review-grid {
    margin-bottom: 32px;
  }
}

/* ─── 21c. GOOGLE-BEWERTUNGSBOX (SSoT) ───────────────────────────────────
   EINZIGE Quelle für .review-google-row & Kind-Elemente — sitewide (Start-
   seite + alle Clubdetailseiten mit dieser Box). Keine lokalen Redefinitionen
   in HTML-<style>-Blöcken mehr erlaubt (siehe CLAUDE.md).
   Grid statt Flex: feste linke Spalte (Bewertung+Sterne), damit unter-
   schiedlich lange Rezensionszahlen/Standorttexte/Linktexte NIE die Position
   der Bewertungszahl oder den Start der rechten Textspalte verschieben.
   line-height explizit auf jedem Text-Kind gesetzt — erbt NICHT die
   body-line-height der jeweiligen Seite (1.6 auf Clubseiten, normal auf
   index.html), sonst unterschiedliche Innenhöhe bei identischem CSS.
   ─────────────────────────────────────────────────────────────────────── */
.review-google-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  column-gap: 32px;
  width: 100%;
  max-width: 420px;
  min-height: 110px;
  margin-inline: auto;
  padding: 24px 28px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 18px);
  line-height: normal;
}
.review-google-rating {
  width: 112px;
  text-align: center;
}
.review-google-content {
  min-width: 0;
  display: grid;
  align-content: center;
}
.review-google-score {
  font-size: 32px; font-weight: 800; color: var(--white);
  line-height: 1;
}
.review-google-stars {
  color: #FBBC04; font-size: 18px; letter-spacing: 2px;
  line-height: 1.3;
}
.review-google-label {
  font-size: 14px; font-weight: 700; color: var(--white);
  line-height: 1.3;
}
.review-google-count {
  font-size: 12px; color: var(--text-lo); margin-top: 3px;
  line-height: 1.5;
}
.review-google-link {
  font-size: 12px; font-weight: 600; line-height: 1.5;
  display: inline-flex; align-items: center;
  width: 100%; min-width: 0;
}
/* Nachtrag 2026-08-20 (Bugfix, kein Design-Change): der Link lief auf schmalen
   Viewports über die Kartenkante hinaus. Ursache war `width: max-content` in
   Kombination mit dem klassischen Flexbox-Fallstrick `min-width: auto` — ein
   Flex-Item (.link-text) schrumpft ohne explizites min-width:0 nie unter
   seine unverpackte Text-Breite, selbst wenn der Elterncontainer schmaler
   ist. Fix: Link nimmt jetzt die volle verfügbare Grid-Spaltenbreite ein
   (width:100%, min-width:0), der Text darf normal umbrechen. */
.review-google-link .link-text { min-width: 0; }
@media (max-width: 420px) {
  .review-google-row {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 20px;
    max-width: 100%;
    padding: 20px;
    min-height: auto;
  }
  .review-google-rating { width: 96px; }
}

/* ─── 21d. BEWERTUNGSKARTEN / REVIEW CARDS (SSoT) ────────────────────────
   EINZIGE Quelle für .review-card & Kind-Elemente — sitewide (Startseite +
   alle Clubdetailseiten). Kanon = index.html (Design-Master). Vorher lokal
   auf 6 Seiten mit identischen Klassennamen aber abweichenden Werten
   dupliziert (Kartenhintergrund bg4/bg2, Textfarbe --text/--text-body,
   Avatar-Verlauf --purple/--purple-d, line-height 1.7/1.65, flex/kein flex)
   — exakt derselbe Fehlertyp wie bei .review-google-row.
   flex-direction:column + flex:1 auf .review-card-text macht alle Karten
   einer Grid-Reihe automatisch gleich hoch, unabhängig von Textlänge —
   ersetzt das bisherige feste min-height:96px auf den Clubseiten.
   ─────────────────────────────────────────────────────────────────────── */
.review-card {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: var(--radius-md, 18px); padding: 28px;
  display: flex; flex-direction: column;
  transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.15s;
}@media (hover: hover) and (pointer: fine) {

.review-card:hover { border-color: rgba(139,48,255,0.3); }
}

.review-card-stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 16px; }
.review-card-text {
  font-size: 14px; color: var(--text); line-height: 1.7;
  font-style: italic; flex: 1; margin-bottom: 24px;
}
.review-card-text::before { content: "\201C"; color: var(--purple-l); font-size: 32px; line-height: 0; vertical-align: -14px; margin-right: 3px; font-style: normal; }
.review-card-author { display: flex; align-items: center; gap: 12px; }
.review-card-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg,var(--purple),var(--purple-l));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--white); flex-shrink: 0;
}
.review-card-name { font-size: 14px; font-weight: 700; color: var(--white); }
.review-card-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ─── 21b. KARTEN-/FEATURE-HEADLINES (SSoT) ─────────────────────────────
   Zwei zentrale Größenstufen für Überschriften INNERHALB von Karten oder
   Media-/Text-Kacheln (nicht zu verwechseln mit .section-h2, das für
   Sektions-Hauptüberschriften reserviert bleibt).
   .card-headline   → kompakte Kartentitel (z. B. Vorteils-/Feature-Karten)
   .feature-headline → größere Media-Karten-Überschrift (z. B. Standort-/
                        Kurs-Karten mit Bild + Text nebeneinander)
   ─────────────────────────────────────────────────────────────────────── */
.card-headline {
  font-size: 20px; font-weight: 700; color: var(--white); line-height: 1.25;
}
.feature-headline {
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; color: var(--white);
  line-height: 1.05; text-transform: uppercase;
}

/* ─── 22. „NACH OBEN"-BUTTON — kanonische Komponente (SSoT) ─────────────
   Einzige Quelle für #scroll-top auf allen Seiten. Lokale Kopien in den
   HTML-Dateien wurden entfernt. Referenz: bisherige index.html-Gestaltung
   (Farbverlauf + Blur), jetzt aber mit <button> + aria-label auf jeder
   Seite (statt <div> ohne Tastaturfokus). Fix ggü. altem Code: fehlendes
   Semikolon nach dem letzten Gradient-Layer ergänzt (führte dazu, dass die
   gesamte background-Deklaration von Browsern als ungültig verworfen
   werden konnte).
   ─────────────────────────────────────────────────────────────────────── */
#scroll-top {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 490;
  width: 100%;
  border: none; border-radius: 0; -webkit-appearance: none; appearance: none;
  font-family: inherit; margin: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background:
          radial-gradient(ellipse 50% 200% at -10% 50%, rgba(106,0,244,0.22) 0%, rgba(175,78,220,0.10) 35%, transparent 65%),
          radial-gradient(ellipse 26% 200% at -3% 50%, rgba(214,178,122,0.09), transparent 55%),
          radial-gradient(ellipse 38% 200% at 108% 50%, rgba(106,0,244,0.16) 0%, rgba(139,48,255,0.07) 45%, transparent 70%),
          var(--bg);
  border-top: 1px solid rgba(106,0,244,0.14);
  box-shadow: none;
  color: rgba(255,255,255,0.85); cursor: pointer;
  transform: translateY(100%);
  transition: transform 0.22s ease, color 0.2s, background 0.2s;
  backdrop-filter: blur(12px);
}
#scroll-top span.st-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; line-height: 1;
}
#scroll-top.visible { transform: translateY(0); }@media (hover: hover) and (pointer: fine) {

#scroll-top:hover { color: #fff; }
}

#scroll-top:active { background: var(--purple-d); color: #fff; }
#scroll-top:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
@media (min-width: 769px) { #scroll-top { display: none !important; } }
@media (max-width: 768px) { body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } }

/* ─── 24. STANDORTKACHEL „.club-photo" — kanonische Komponente (SSoT) ────
   Ergänzung 2026-08-10 (Nutzerwunsch): war bisher NUR lokal in index.html
   definiert. Auf Nutzerwunsch 1:1 auch auf wellness-sauna.html/solarium.html
   (und künftig live-kurse.html) einsetzbar — deshalb hier zentralisiert.
   Nachtrag 2026-08-10 (Nutzerfeedback: "der border fehlt" auf solarium.html):
   Ursache war NICHT Caching, sondern ein kaputter Kommentar genau hier:
   ein versehentlich zu früh eingefügter Kommentar-Schluss-Marker hatte
   diesen Kommentarblock vorzeitig beendet — der danach folgende Fließtext
   wurde dadurch als ungültiges CSS interpretiert, wodurch der Browser die
   komplette nachfolgende .club-photo-card-Regel (Radius, overflow,
   Hintergrund) verschluckt hat. WICHTIG für künftige Kommentare in diesem
   Block: die Zeichenfolge Stern-gefolgt-von-Schrägstrich darf im Fließtext
   NICHT auftauchen (auch nicht in Anführungszeichen) — CSS-Parser erkennen
   sie unabhängig vom Kontext immer als Kommentarende.
   .club-photo-card = sichtbare Kartenhülle. Darin: .club-photo (Hauptlink,
   Foto + Stadtname + "Ansehen ›") und .club-photo-info (AUSSERHALB des
   Hauptlinks, kein verschachtelter Link) = Routen-Icon-Button (öffnet direkt
   Apple Maps auf iOS/Mac bzw. Google Maps sonst, siehe openClubRoute() in
   lf-core.js) + zweizeilige Adresse. Die 6 Standort-Bildvarianten
   (.club-photo-1..6) sind hier ebenfalls zentral hinterlegt, damit jede
   Seite dieselben (korrekten) Fotos zeigt statt eigener Kopien.
   ─────────────────────────────────────────────────────────────────────── */
/* Nachtrag 2026-08-11 (Nutzerauftrag: Kachel-Kontrast dauerhaft lösen statt
   Section-Hintergründe immer wieder pro Seite nachzuregulieren): dünner,
   permanenter Rahmen nach dem gleichen Prinzip wie .firma-card (Arbeitgeber-
   Kachel Startseite) — border: 1px solid var(--border). Damit hebt sich die
   Kachel IMMER vom Section-Hintergrund ab, unabhängig davon, welchen Ton die
   jeweilige Seite für die Section gewählt hat (betraf zuletzt clubs.html
   und solarium.html: Kachel-Hintergrund --bg2 = quasi identisch mit dem
   Section-Ton darunter, keine erkennbare Kante). Gilt jetzt automatisch für
   ALLE Seiten mit .club-photo-card. */
.club-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.club-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* Nachtrag 2026-08-11: Zoom-Transform von .club-photo-media (Flex-Box, ENTHÄLT
   .club-photo-label als echtes DOM-Kind) auf .club-photo-media::before (reine
   Bildebene) verschoben. Vorher skalierte beim Hover die GESAMTE Box inkl. Text —
   Stadtname/"Ansehen ›" wanderten dadurch minimal Richtung Kartenrand, der
   Abstand zum Rand war nicht mehr fix. Jetzt zoomt ausschließlich das Foto,
   Text bleibt an fester Position/Abstand stehen. */
.club-photo:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--gold); }
.club-photo-media {
  position: relative;
  /* Nachtrag 2026-08-30 (Nutzerkorrektur: "doch den Ortsnamen nach unten, mit Abstand
     von unten"): Stadtname bleibt UNTEN, aber mittig zentriert und mit deutlichem
     18px-Abstand zur Bildunterkante (vorher 14px, linksbündig). */
  display: flex; align-items: flex-end;
  padding: 12px 14px 18px;
  /* Nachtrag 2026-08-11: overflow:hidden ergänzt — .club-photo-card clippt nur die
     GESAMTE Karte (inkl. Adresszeile darunter), nicht die Grenze Bild/Textbereich.
     Beim Zoom (::before scale(1.03)) schob sich das Bild dadurch sichtbar über die
     Bildkante hinaus in .club-photo-info (Adresszeile). Jetzt clippt .club-photo-media
     selbst exakt an der eigenen Box-Kante — Zoom bleibt vollständig innerhalb des
     Bildbereichs, unabhängig vom äußeren Card-Clip. */
  overflow: hidden;
}
/* Bildebene als eigenes ::before — der `filter` UND der Zoom-Transform liegen
   NUR auf dieser Bildebene, nicht auf .club-photo-media selbst, damit Stadtname +
   "Ansehen ›"-Textlink (echte Kinder von .club-photo-media) beim Hover weder
   skaliert noch verschoben werden — Abstand zum Kartenrand bleibt fix. */
.club-photo-media::before {
  content: '';
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.8) brightness(0.86);
  transition: transform 0.3s ease;
}@media (hover: hover) and (pointer: fine) {

.club-photo:hover .club-photo-media::before { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .club-photo:hover .club-photo-media::before { transform: none; }
}
.club-photo-media::after {
  content: '';
  position: absolute; inset: 0;
  /* Nachtrag 2026-08-30 (Nutzerkorrektur: Stadtname doch unten): Abdunklung wieder
     auf der unteren Bildhälfte — obere Hälfte bleibt ungefiltert. */
  background: linear-gradient(to top,
    rgba(10,8,20,0.85) 0%,
    rgba(10,8,20,0.4) 25%,
    rgba(10,8,20,0) 50%);
}
.club-photo-1 .club-photo-media { background-color: #1a0d40; }
.club-photo-1 .club-photo-media::before { background-image: url('img/fitnessstudio-schneeberg-erzgebirge-lila-fitness.webp'); }
.club-photo-2 .club-photo-media { background-color: #0e1a38; }
.club-photo-2 .club-photo-media::before { background-image: url('img/fitnessstudio-schwarzenberg-erzgebirge-training.webp'); }
.club-photo-3 .club-photo-media { background-color: #1f0f38; }
.club-photo-3 .club-photo-media::before { background-image: url('img/fitnessstudio-stollberg-erzgebirge-clubs.webp'); }
.club-photo-4 .club-photo-media { background-color: #0d1f2d; }
.club-photo-4 .club-photo-media::before { background-image: url('img/fitnessstudio-floeha-erzgebirge-training-24-7.webp'); }
.club-photo-5 .club-photo-media { background-color: #1a1020; }
.club-photo-5 .club-photo-media::before { background-image: url('img/fitnessstudio-hohenstein-ernstthal-clubs-erzgebirge.webp'); background-position: 75% center; }
.club-photo-6 .club-photo-media { background-color: #0f1a10; }
.club-photo-6 .club-photo-media::before { background-image: url('img/fitnessstudio-lichtenstein-erzgebirge-neues-studio.webp'); }
/* Nachtrag 2026-08-30 (Nutzerauftrag: "Ort oben mittig, Hover-Pfeil weglassen"):
   Stadtname allein, zentriert — der "Ansehen ›"-Textlink entfällt komplett
   (Markup bleibt im DOM, nur display:none — die ganze Kachel ist ohnehin der Link). */
.club-photo-label {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; justify-content: center;
  gap: 12px; width: 100%;
}
.cpl-city {
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-hi); line-height: 1.1;
  text-align: center;
}
.club-photo-view { display: none; }
/* Nachtrag 2026-08-30: die frühere Hohenstein-Ernstthal-Sonderregel (14px statt
   16px, wegen Enge neben "Ansehen ›") ist obsolet — ohne den Textlink hat der
   lange Ortsname genug Platz, alle 6 Karten wieder einheitlich 16px/0.05em. */
/* Info-Zeile AUSSERHALB des Hauptlinks: links der Routenwahl-Button (Icon,
   wie .btn-maps auf clubs.html), daneben die zweizeilige Adresse, beide in
   einer Zeile. */
.club-photo-info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  /* Nachtrag 2026-08-30 (Nutzerauftrag: "der gesamte Bereich für die Route soll
     hovern bzw. Link sein"): ganze Zeile klickbar (Delegation in lf-core.js) +
     eigener Hover-Zustand auf der kompletten Fläche. */
  cursor: pointer;
  transition: background 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .club-photo-info:hover { background: rgba(255,255,255,0.04); }
  .club-photo-info:hover .club-photo-route-btn {
    background: rgba(255,255,255,0.08); color: var(--text-hi);
    border-color: rgba(255,255,255,0.22);
  }
  .club-photo-info:hover .club-photo-address { color: var(--text-hi); }
}
/* Route-Icon = Weiterleitungslink je nach Gerät. Klick öffnet direkt Apple
   Maps (iOS/Mac) bzw. Google Maps (Android/Rest), siehe openClubRoute() in
   lf-core.js. Die zwei Links in .club-photo-route-menu bleiben als reine
   URL-Quelle im DOM (versteckt), das Menü selbst wird nicht angezeigt. */
.club-photo-route-wrap { position: relative; flex-shrink: 0; }
.club-photo-route-btn {
  flex-shrink: 0; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10); color: var(--text-lo);
  cursor: pointer; font-family: inherit; padding: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}@media (hover: hover) and (pointer: fine) {

.club-photo-route-btn:hover {
  background: rgba(255,255,255,0.08); color: var(--text-hi);
  border-color: rgba(255,255,255,0.22); transform: translateY(-1px);
}
}

.club-photo-route-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--gold) !important;
}
.club-photo-route-btn .cpr-pin { width: 18px; height: 18px; }
/* Adresse zweizeilig: Straße / PLZ Ort — dadurch sind alle Karten
   unabhängig von der Adresslänge automatisch gleich hoch. */
.club-photo-address {
  font-style: normal; /* Standard-Kursivschrift von <address> neutralisiert */
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-body);
  margin: 0;
  min-width: 0;
}
.club-photo-route-menu {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
  flex-direction: column; gap: 2px; min-width: 220px; max-width: calc(100vw - 32px);
  z-index: 10; background: var(--bg2); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.club-photo-route-wrap.open .club-photo-route-menu { display: flex; }
.club-photo-route-menu a {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--text-hi); text-decoration: none;
  transition: background 0.15s;
}@media (hover: hover) and (pointer: fine) {

.club-photo-route-menu a:hover { background: rgba(255,255,255,0.07); }
}


/* ═══════════════════════════════════════════════════════════════════════
   20. MOBILE-UX-PASS 2026-08-14 — TOUCH-ZIEL-MINDESTGRÖSSE (≤768px)
   Einige kleine, aber echte Klick-Ziele lagen bei 40–42px (Modal-Close,
   Route-Icon, .btn-small, Suchleisten-Button) — unter dem 44px-Minimum.
   Nur auf mobilen Breiten angehoben, damit sich am Desktop-Layout nichts
   ändert (Vorgabe: Desktop-Darstellung nicht verschlechtern).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .apply-modal-close,
  .info-modal-close,
  .firma-info-close,
  .modal-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .btn.btn-small {
    height: 44px;
  }
  .lf-input-row button {
    width: 44px;
    height: 44px;
  }
  .club-photo-route-btn {
    width: 44px;
    height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   21. MOBILE-MODAL-HARTUNG 2026-08-14 — Ergänzung Mobile-UX-Pass
   Zentrale Regeln statt Einzel-Patches: box-sizing, kein Overflow durch
   Grid/Flex-Kinder, gemeinsame 2-spaltige Formularreihen (Vorname/Nachname
   etc. in Prävention-, Probetraining- und Wechselbonus-Modal) werden auf
   Mobile automatisch 1-spaltig. overflow-x:hidden wird hier NICHT als
   Maskierung eingesetzt — stattdessen werden Breiten/Boxing-Regeln gesetzt,
   die den Überlauf technisch verhindern.
   ═══════════════════════════════════════════════════════════════════════ */

/* Alle Overlay/Modal-Boxen: verbindliches Box-Modell + Innenabstand vom Rand */
.praev-overlay, .kuend-overlay, .studio-modal-overlay, .info-modal-overlay,
.firma-info-overlay, .firma-pre-overlay, .apply-modal-overlay, .exit-overlay,
.retain-overlay, #kf-modal, #idxBuchModal, #praevBuchModal {
  box-sizing: border-box;
}
.praev-modal, .kuend-modal, .studio-modal, .info-modal,
.firma-info-box, .firma-pre-box, .apply-modal-box, .exit-modal,
.retain-modal, #kform-box {
  box-sizing: border-box;
  max-width: 100%;
}
.praev-modal *, .kuend-modal *, .studio-modal *, .info-modal *,
.firma-info-box *, .firma-pre-box *, .apply-modal-box *, .exit-modal *,
.retain-modal *, #kform-box * {
  box-sizing: border-box;
  min-width: 0;
}
@media (max-width: 600px) {
  .praev-overlay, .kuend-overlay, .studio-modal-overlay, .info-modal-overlay,
  .firma-info-overlay, .firma-pre-overlay, .apply-modal-overlay, .exit-overlay,
  .retain-overlay {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Geteilte 2-spaltige Formular-Zeile (z.B. Vorname/Nachname) — auf Smartphones
   1-spaltig, damit Eingabefelder nicht auf ~120px Breite zusammengequetscht
   werden. Ersetzt lokale inline grid-template-columns:1fr 1fr Duplikate. */
.lf-2col-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .lf-2col-form-grid { grid-template-columns: 1fr; }
}

/* Mehrspaltige Formulare generell: auf Smartphones 1-spaltig (Vorgabe #10) */
@media (max-width: 480px) {
  .kuend-modal [style*="grid-template-columns:1fr 1fr"],
  .praev-modal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Erfolgs-/Fehlerzustand nach Formular-Versand (Ergänzung #5) — klare Karte statt
   ausgegrautem Button-Text. Wird von _sendPhp()/_showSendSuccess()/_showSendError()
   in index.html dynamisch neben den Submit-Button eingefügt. */
.lf-send-success-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.3);
  border-radius: 12px; padding: 14px 16px; margin-top: 10px;
}
.lf-send-success-icon { flex-shrink: 0; margin-top: 2px; }
.lf-send-success-title { font-size: 16px; font-weight: 700; color: var(--white, #fff); margin-bottom: 3px; }
.lf-send-success-sub { font-size: 14px; color: var(--muted2, rgba(255,255,255,0.7)); line-height: 1.5; margin: 0; }
.lf-send-error-note {
  font-size: 12px; color: #f87171; margin-top: 8px; text-align: center;
}

/* Schwebende Elemente bei offenem Modal ausblenden (Ergänzung #2). Die Klasse
   body.lf-modal-open wird von lf-core.js automatisch gesetzt, sobald der
   bereits bestehende Scroll-Lock (document.body.style.overflow='hidden')
   aktiv ist — kein Einzel-Patch pro Modal nötig. Der schwebende Concierge-/
   Chat-Button muss laut Vorgabe VOLLSTÄNDIG verschwinden (nicht nur optisch
   hinter dem Modal liegen), der "Nach oben"-Button darf das Modal ebenfalls
   nicht überlagern. */
.lf-modal-open #concierge-btn,
.lf-modal-open #scroll-top {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   23. WIDESCREEN ≥1600px (2026-09-11, Nutzerauftrag)
   Ausschließlich additive Regeln für sehr breite Desktop-Monitore.
   REGELN: Nichts unterhalb von 1600px verändern. --container-max (1200px)
   bleibt unangetastet — nur Nav + Footer wachsen auf eine gemeinsame
   innere Maximalbreite von 1440px. Die Zusatz-Navigationslinks
   (.nav-wide-only / .nav-wide-xl) sind im Grundzustand verborgen und
   werden NUR in den min-width-Stufen sichtbar — bestehende Nav-Stufen
   (Hamburger ≤960px etc.) bleiben unverändert.
   ═══════════════════════════════════════════════════════════════════ */
.nav-links li.nav-wide-only,
.nav-links li.nav-wide-xl { display: none; }

@media (min-width: 1600px) {
  .nav-inner { max-width: 1440px; }
  footer .container { max-width: 1440px; }
  footer > .footer-bottom { max-width: 1440px; }
  /* Zusatzlinks Stufe 1: EGYM + Solarium direkt sichtbar */
  .nav-links li.nav-wide-only { display: block; }
}

/* Stufe 2 (ab 1920px: Sauna & Wellness, Kurse, Jobs) — NICHT AKTIVIERT.
   Reale Messung 2026-09-11 (iframe 1920px + 2560px, lokaler Serverstand):
   11 Links brechen in der gemeinsamen 1440px-Nav auf ZWEI Zeilen um
   (ul-Höhe 38px statt 19px, Restabstand zu Login nur 16px) — mehr
   Fensterbreite hilft nicht, weil die Nav-Innenbreite bewusst bei 1440px
   gedeckelt bleibt. Vorgabe: Punkt bleibt dann im bisherigen Menü, statt
   Schrift oder Abstände zu verkleinern. Die .nav-wide-xl-Links bleiben im
   Markup vorhanden, aber dauerhaft verborgen, bis eine andere
   Nutzerentscheidung fällt.
@media (min-width: 1920px) {
  .nav-links li.nav-wide-xl { display: block; }
}
*/