/* ─── Frischlufteulen ─ Styles ────────────────────────────────────────────── */

:root {
  /* Brand — v0.12 Petrol/Mint-Refresh (Andre 2026-05-26).
     Lila bleibt als Akzent erhalten, Türkis wird zu lebendigem Teal-Grün
     verschoben. Hauptidentität verschiebt sich von Marineblau auf
     Petrol-Grün — "frisch, draußen, Frühnebel" statt "Nachtschicht". */
  --fl-lila: #7C5CE8;
  --fl-lila-deep: #5A3FC8;
  --fl-tuerkis: #2BBFA5;
  --fl-tuerkis-deep: #0A8770;
  --fl-mint: #3BB97A;          /* dunkler (Andre 2026-05-27): satter Blattgrün-Ton statt Pastell */
  --fl-orange: #F59E5B;        /* leicht entsättigt — weniger schreiend */

  /* Dark theme (Waldgrün v0.12.1) — Andre's Feedback 2026-05-27:
     "mehr Wald-Blätter-Grün". Verschiebung von Petrol-Teal Richtung
     tiefem Tannen-/Blattgrün. Wirkt jetzt nach Waldboden + Moos statt
     Schwimmbad. */
  --bg: #0F1F18;
  --bg-2: #142A20;
  --bg-3: #1C3A2C;
  --bg-ele: #234D3B;
  --fg: #E8F2EA;
  --fg-2: #A9CDB6;
  --fg-3: #7E9F88;
  --border: rgba(169,205,182,0.10);
  --border-strong: rgba(169,205,182,0.22);
  --card: linear-gradient(180deg, #1A3527 0%, #0F2218 100%);

  /* Surface-Tokens — theme-aware Card-Backgrounds. Templates sollen diese
     statt hardcoded rgba(255,255,255,...) nutzen. */
  --surface: rgba(169,205,182,0.06);
  --surface-2: rgba(169,205,182,0.10);
  --surface-border: rgba(169,205,182,0.14);
  --surface-strong: rgba(169,205,182,0.22);

  --shadow-lg: 0 30px 80px rgba(0,18,10,0.5);
  --shadow-md: 0 12px 36px rgba(0,18,10,0.35);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --maxw: 1240px;

  /* Type */
  --f-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="light"] {
  /* Light theme (Mint-Cream v0.12) — abgestimmt auf Petrol-Dark. Cremiger
     Hintergrund mit grünem Unterton, dunkles Petrol als Schrift. Lila +
     Teal-Akzente knallen auf hellem Boden ohne zu stechen. */
  --bg: #F2F7F3;
  --bg-2: #E8F1EC;
  --bg-3: #DAE8DF;
  --bg-ele: #FFFFFF;
  --fg: #0B2A29;
  --fg-2: #3D5F60;
  --fg-3: #7C9A98;
  --border: rgba(11,42,41,0.10);
  --border-strong: rgba(11,42,41,0.20);
  --card: linear-gradient(180deg, #FFFFFF 0%, #F4FAF7 100%);
  --shadow-lg: 0 20px 60px rgba(15,90,80,0.16);
  --shadow-md: 0 10px 30px rgba(15,90,80,0.10);

  /* Surface-Tokens für Light-Mode — gleicher Sinn wie Dark, aber als
     Tintenflecke auf Mint-Creme statt Lichtflecke auf Petrol. */
  --surface: rgba(11,42,41,0.04);
  --surface-2: rgba(11,42,41,0.07);
  --surface-border: rgba(11,42,41,0.12);
  --surface-strong: rgba(11,42,41,0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--f-body); }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
  transition: background 0.4s, color 0.4s;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
code { font-family: var(--f-mono); font-size: 0.9em; background: var(--bg-3); padding: 1px 6px; border-radius: 4px; }

/* A11y (Design-Review 2026-05-30, WCAG 2.4.7): globaler Tastatur-Fokusring.
   Der Browser-Default-Outline rgb(16,16,16) ist auf dem dunklen Waldgruen
   (--bg #0F1F18) unsichtbar. Tuerkis-Ring greift site-weit; spezifischere
   Regeln (Formfelder, pwd-toggle) bleiben erhalten. Nur :focus-visible, damit
   Maus-Klicks keinen Ring zeigen. */
:focus-visible { outline: 2px solid var(--fl-tuerkis); outline-offset: 2px; }

/* ─── Layout helpers ──────────────────────────────────────────────────────── */
.fl-app { min-height: 100vh; overflow-x: hidden; overflow-x: clip; } /* hidden = Fallback fuer iOS Safari <16 */
/* v0.12.18: Default-Section-Padding deutlich reduziert (96px -> 28px Top).
   Marketing-Landing-Hero hat eigenes padding-top:64px !important (Zeile 304),
   wirkt also nicht reduziert. Funktional-Seiten (Feed, Galerie, Schwarm, ...)
   beginnen jetzt direkt nach der Nav statt nach 96px Whitespace (Andre's
   "im desktop auch, nach oben viel zu viel platz"). */
.fl-app > section { padding: 28px 32px 56px; max-width: var(--maxw); margin: 0 auto; position: relative; }

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.fl-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.fl-logo {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; /* Touch-Target (Mobile-A11y) */
  font-weight: 800; font-size: 20px; letter-spacing: -0.01em;
  font-family: var(--f-display);
}
.fl-logo-mark { display: inline-flex; }
.fl-logo-text { display: inline-flex; }
.fl-logo-dot { color: var(--fl-tuerkis); }
.fl-nav-links { display: flex; gap: 28px; }
.fl-nav-links a {
  color: var(--fg-2);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.15s;
}
.fl-nav-links a:hover { color: var(--fg); }
.fl-nav-actions { display: flex; align-items: center; gap: 10px; }
/* F1 (Design-Review 2026-05-30): Auf kleinen Phones lief die anonyme Nav ueber
   den Rand — Logo + Toggle + "Anmelden" + "Eule werden" passten nicht in <=520px,
   "Eule werden" wurde komplett abgeschnitten. Zwei-Stufen-Fix:
   1. <=640px: redundanten Primaer-CTA in der Nav ausblenden (Hero + Final-CTA +
      Sprung-Pills decken die Registrierung ab). Greift nur fuer anonyme Nutzer —
      eingeloggte Nav-Actions haben keinen .fl-btn-primary.
   2. <=480px: zusaetzlich den Logo-TEXT ausblenden, die Eule bleibt als Home-Link
      (Standard-Pattern Icon-Logo auf Phones). Erst damit passt "Anmelden" ohne
      Anschnitt (gemessen: actions-right 361px statt 380px @375). */
@media (max-width: 640px) {
  .fl-nav-actions .fl-btn-primary { display: none; }
}
@media (max-width: 480px) {
  .fl-logo-text { display: none; }
  /* Ohne Text bleibt nur die 32px-Eule -> Tap-Ziel auf 44px aufweiten
     (DESIGN.md: Logo min 44px Mobile-A11y). */
  .fl-logo { min-width: 44px; justify-content: center; }
}

.fl-icon-btn {
  width: 44px; height: 44px; /* Touch-Target (Mobile-A11y) */
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 16px;
  transition: background 0.15s, border-color 0.15s;
}
.fl-icon-btn:hover { background: var(--bg-ele); border-color: var(--fg-3); }

/* Footer-Links als Touch-Targets >= 44px (Mobile-A11y, Opus-Review) */
.fl-footer-cols a { display: inline-flex; align-items: center; min-height: 44px; }

/* Bewegung reduzieren, wenn das System es verlangt (A11y, Opus-Review) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 1100px) {
  .fl-nav-links { display: none; }
  /* v0.12.14: Bottom-Bar fuer Eulen bereits ab <=1100px aktivieren —
     gleicher Breakpoint wie Top-Nav-Aushebung. Schliesst die alte
     Luecke 641-1100px wo gar keine Navigation sichtbar war (Andre's
     Befund: "im feed verschwindet das menu").
     v0.12.44: Selektor .fl-app .fl-mobile-bar (Spezifitaet 0,2,0) statt
     .fl-mobile-bar (0,1,0). Sonst gewinnt die spaeter im File stehende
     Basis-Regel `.fl-mobile-bar { display:none }` (Zeile ~1395) per
     Quelltext-Reihenfolge und die Bar bleibt auf Mobile versteckt. */
  .fl-app .fl-mobile-bar { display: block; }
  .fl-app { padding-bottom: 68px; }
}

/* M8-1: Anonyme Mobile-Sprung-Pills im Hero. Default ausgeblendet, greift
   parallel zu .fl-nav-links-Aushebung (≤1100px). Drei Pills mit ≥44px Höhe
   (Apple-Tap-Standard, M8-2-konform). */
.fl-anon-mobile-nav { display: none; }
@media (max-width: 1100px) {
  .fl-anon-mobile-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
  }
  .fl-anon-mobile-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
  }
  .fl-anon-mobile-nav a:hover,
  .fl-anon-mobile-nav a:focus-visible {
    background: rgba(124,58,237,0.18);
    border-color: rgba(124,58,237,0.4);
    outline: none;
  }
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.fl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  transition: transform 0.12s, background 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}
.fl-btn:hover { transform: translateY(-1px); }
.fl-btn:active { transform: translateY(0); }
/* M8-2: Apple-Standard 44px Tap-Target auf Mobile — Submit-Buttons in
   Auth-Formularen waren 34px hoch und schwer zu treffen. */
@media (max-width: 640px) {
  .fl-btn,
  button[type="submit"].fl-btn,
  button[type="submit"]:not(.fl-icon-btn) {
    min-height: 44px;
  }
}
.fl-btn-primary {
  /* v0.12.58: Wald-Gruen statt Lila — tiefes Tuerkis-Gruen, Weiss-Text AA-large. */
  background: linear-gradient(135deg, var(--fl-tuerkis-deep) 0%, #075C4B 100%);
  color: #fff;
  box-shadow: 0 8px 26px rgba(10,135,112,0.42), inset 0 1px 0 rgba(255,255,255,0.18);
}
.fl-btn-primary:hover { box-shadow: 0 12px 36px rgba(10,135,112,0.52), inset 0 1px 0 rgba(255,255,255,0.22); }
.fl-btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
.fl-btn-ghost:hover { background: var(--bg-ele); border-color: var(--fg-3); }
.fl-btn-lg { padding: 14px 24px; font-size: 16px; }
.fl-btn-block { width: 100%; justify-content: center; }

/* ─── Eyebrow / Kicker ────────────────────────────────────────────────────── */
.fl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg-ele);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-2);
  font-weight: 500;
}
.fl-eyebrow-inverted { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }
.fl-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--fl-tuerkis);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--fl-tuerkis) 25%, transparent);
  animation: fl-pulse 1.8s ease-in-out infinite;
}
@keyframes fl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--fl-tuerkis) 25%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--fl-tuerkis) 10%, transparent); }
}
.fl-pulse {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--fl-tuerkis);
  animation: fl-blink 1.2s ease-in-out infinite;
}
@keyframes fl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.fl-kicker {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fl-tuerkis);
  font-weight: 600;
  margin-bottom: 14px;
}

.fl-sechead { max-width: 760px; margin-bottom: 56px; }
.fl-sub { color: var(--fg-2); font-size: 18px; margin-top: 14px; }

/* Tages-Live-Anzeige im Hero (v0.12.65). Schlanke Pille mit pulsierendem
   Tuerkis-Dot — "heute" oberhalb der 30-Tage-Stats. Surface-Tokens => theme-aware. */
.fl-livebar {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 20px 0 2px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--fg-2);
  max-width: 100%;
}
.fl-livebar-text { line-height: 1.3; }
.fl-livebar strong { color: var(--fl-tuerkis); font-weight: 700; }
/* Light-Mode: helles Tuerkis (#2BBFA5) auf Mint-Creme hat nur ~2.1:1 — WCAG-Fail
   fuer 14,5px-Bold. --fl-tuerkis-deep (#0A8770) liegt mit 4.11:1 noch knapp drunter,
   daher ein tieferes Teal mit 5.47:1 auf #F2F7F3 (gemessen). */
[data-theme="light"] .fl-livebar strong { color: #087160; }
.fl-livebar-quiet { color: var(--fg-3); }
.fl-livebar-quiet .fl-pulse { background: var(--fg-3); animation: none; }

.fl-h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 16px 0 24px;
}
.fl-h1 em { font-style: normal; color: var(--fg-3); font-weight: 600; }
.fl-h1-accent {
  background: linear-gradient(135deg, var(--fl-tuerkis) 0%, var(--fl-lila) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fl-h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0;
}

.fl-lead {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--fg-2);
  max-width: 620px;
  line-height: 1.55;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.fl-hero {
  padding-top: 64px !important;
  padding-bottom: 80px !important;
  min-height: 680px;
  display: flex;
  align-items: center;
  position: relative;
}
.fl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr);
  gap: 32px;
  align-items: center;
  width: 100%;
}
@media (max-width: 820px) {
  .fl-hero-grid { grid-template-columns: 1fr; }
}
.fl-hero-content { position: relative; z-index: 2; max-width: 640px; }

.fl-hero-art {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  pointer-events: none;
}
@media (max-width: 820px) {
  .fl-hero-art { display: none; }
}
.fl-hero-blob {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--fl-lila) 60%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--fl-tuerkis) 50%, transparent) 0%, transparent 50%);
  filter: blur(40px);
  opacity: 0.85;
  z-index: 0;
}
.fl-hero-lead {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45));
  animation: fl-float 6s ease-in-out infinite;
  text-align: center;
}
.fl-hero-leadtag {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--fg-2);
  margin-top: 8px;
  background: var(--bg-ele);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  border: 1px solid var(--border);
}
.fl-floater {
  position: absolute;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.35));
  animation: fl-float 6s ease-in-out infinite;
  z-index: 1;
}
@keyframes fl-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.fl-hero-lead {
  /* Override translate for centered lead */
  animation: fl-float-lead 7s ease-in-out infinite;
}
@keyframes fl-float-lead {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 14px)); }
}
.fl-floater:nth-child(odd) { animation-duration: 7s; }
.fl-floater:nth-child(3n) { animation-duration: 8.5s; }

.fl-cta-row { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.fl-hero-stats {
  display: flex; gap: 14px;
  flex-wrap: wrap;             /* 4 Tiles werden bei schmalen Viewports 2x2 statt 1x4 */
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  max-width: 640px;            /* etwas breiter, damit 4 Tiles auf Desktop nebeneinander passen */
}
.fl-stat { flex: 1 1 120px; }  /* min-Breite 120px, schrumpft nicht weiter */
.fl-stat-n {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fl-stat-l { font-size: 13px; color: var(--fg-3); margin-top: 6px; }
.fl-stat-highlight .fl-stat-n {
  background: linear-gradient(135deg, var(--fl-tuerkis) 0%, var(--fl-lila) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Werte / Feature cards ───────────────────────────────────────────────── */
.fl-werte-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 880px) { .fl-werte-grid { grid-template-columns: 1fr; } }

.fl-werte-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.fl-werte-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.fl-werte-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fl-tuerkis) 50%, transparent), transparent);
}
.fl-werte-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--fl-lila) 18%, transparent);
  color: var(--fl-tuerkis);
  margin-bottom: 18px;
}
.fl-werte-card h3 {
  font-family: var(--f-display);
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fl-werte-card p { color: var(--fg-2); margin: 0; font-size: 15.5px; }

/* ─── Schwarm / Avatar grid ───────────────────────────────────────────────── */
.fl-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.fl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  background: var(--bg-ele);
  color: var(--fg-2);
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.fl-chip:hover { color: var(--fg); border-color: var(--border-strong); }
.fl-chip-active {
  background: var(--fl-lila);
  color: #fff;
  border-color: var(--fl-lila);
}
.fl-chip-suggestion { background: color-mix(in oklab, var(--fl-tuerkis) 16%, var(--bg-ele)); color: var(--fl-tuerkis); }

.fl-grid-owls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
/* Galerie standardmaessig auf ~2 Reihen begrenzen (Maskottchen sind Beispiele,
   keine echten Konten) — Rest per "mehr anzeigen" einblendbar. */
.fl-grid-owls.is-collapsed > .fl-owlcard:nth-child(n+13) { display: none; }
.fl-owls-more { text-align: center; margin-top: 20px; }

.fl-owlcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.fl-owlcard:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.fl-owlcard-art {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 60%, var(--bg-ele) 0%, var(--bg-2) 100%);
  transition: transform 0.4s ease;
}
.fl-owlcard:hover .fl-owlcard-art { transform: scale(1.04) rotate(-1.5deg); }
.fl-owlcard-name {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.fl-owlcard-tag {
  font-size: 12px;
  color: var(--fl-tuerkis);
  margin-top: 4px;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
}
.fl-owlcard-bio {
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 6px;
  font-style: italic;
}
.fl-schwarm-foot {
  margin-top: 36px;
  text-align: center;
  color: var(--fg-3);
  font-size: 14px;
}

/* ─── Trainingsplan ───────────────────────────────────────────────────────── */
.fl-plan-shell {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}
@media (max-width: 1080px) { .fl-plan-shell { grid-template-columns: 1fr; } }

.fl-plan-week {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}
.fl-plan-weekhead {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.fl-plan-weeknum {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fl-tuerkis);
  font-weight: 700;
  text-transform: uppercase;
}
.fl-plan-weekrange {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.fl-plan-weektotal { text-align: right; }
.fl-plan-weekkm {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fl-plan-weeklabel { font-size: 12px; color: var(--fg-3); margin-top: 4px; }

.fl-plan-day {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
}
.fl-plan-day + .fl-plan-day { border-top: 1px solid var(--border); }
.fl-plan-daycol { text-align: center; }
.fl-plan-dayname {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.fl-plan-daydate {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.fl-plan-daydate-current {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
}

.fl-plan-card {
  background: var(--bg-ele);
  border: 1px solid var(--border);
  border-left: 4px solid var(--fl-lila);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}
.fl-plan-cardmain { min-width: 0; }
.fl-plan-cardtitle { font-weight: 600; font-size: 15.5px; }
.fl-plan-cardsub { color: var(--fg-3); font-size: 13px; margin-top: 2px; font-family: var(--f-mono); }

.fl-plan-done {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in oklab, #16A34A 22%, transparent);
  color: #6EE7B7;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--f-mono);
}
[data-theme="light"] .fl-plan-done { color: #14532D; }
.fl-plan-check {
  width: 18px; height: 18px; border-radius: 999px;
  background: #16A34A; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}

.fl-plan-current-pill {
  background: var(--fl-tuerkis);
  color: #062321;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.fl-plan-side { display: flex; flex-direction: column; gap: 14px; }
.fl-plan-vdot {
  background: linear-gradient(135deg, var(--fl-lila) 0%, var(--fl-lila-deep) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative; overflow: hidden;
}
.fl-plan-vdot::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--fl-tuerkis) 50%, transparent), transparent 70%);
}
.fl-plan-vdotnum { font-family: var(--f-display); font-size: 64px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.fl-plan-vdotlbl { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; opacity: 0.7; margin-top: 4px; }
.fl-plan-vdotdelta { font-size: 13px; margin-top: 10px; color: var(--fl-tuerkis); font-weight: 600; }

.fl-plan-zones {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}
.fl-plan-zonetitle {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-3); font-weight: 600; margin-bottom: 10px;
}
.fl-plan-zonerow { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14.5px; }
.fl-plan-zonedot { width: 10px; height: 10px; border-radius: 3px; }
.fl-plan-zonename { flex: 1; }
.fl-plan-zonepace { font-family: var(--f-mono); color: var(--fg-2); }

.fl-plan-coach {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}
.fl-plan-coachhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fl-plan-coachowl { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; overflow: hidden; }
.fl-plan-coachname { font-family: var(--f-mono); font-weight: 600; font-size: 14px; }
.fl-plan-coachrole { font-size: 12px; color: var(--fg-3); }
.fl-plan-coach p { font-size: 14.5px; color: var(--fg-2); margin: 0; font-style: italic; }

/* ─── How / Steps ─────────────────────────────────────────────────────────── */
.fl-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) { .fl-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fl-how-grid { grid-template-columns: 1fr; } }

.fl-how-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
}
.fl-how-n {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--fl-tuerkis), var(--fl-lila));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
  line-height: 1;
}
.fl-how-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  background: var(--bg-ele);
  padding: 4px 8px;
  border-radius: 999px;
}
.fl-how-step h3 { font-family: var(--f-display); margin: 18px 0 6px; font-size: 19px; font-weight: 700; }
.fl-how-step p { margin: 0; color: var(--fg-2); font-size: 14.5px; }

/* ─── Live Counter ────────────────────────────────────────────────────────── */
.fl-counter {
  /* v0.12.57: Wald-Gruen statt Lila (Brand-Refresh, kein AI-Lila mehr). */
  background: linear-gradient(135deg, var(--fl-tuerkis-deep) 0%, #134032 55%, #0B1F16 100%);
  color: #fff;
  padding: 64px 32px;
  max-width: none !important;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.fl-counter::before, .fl-counter::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.7;
}
.fl-counter::before { background: var(--fl-tuerkis); width: 360px; height: 360px; left: -100px; top: -100px; }
.fl-counter::after { background: var(--fl-orange); width: 320px; height: 320px; right: -80px; bottom: -120px; opacity: 0.45; }

.fl-counter-inner { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; }
.fl-counter-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 24px;
}
.fl-counter-row { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
.fl-counter-cell { flex: 1; min-width: 180px; }
.fl-counter-cell-big { flex: 2; min-width: 280px; }
.fl-counter-n {
  font-family: var(--f-display);
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.fl-counter-cell-big .fl-counter-n { font-size: clamp(72px, 11vw, 168px); }
.fl-counter-l { font-size: 16px; font-weight: 600; margin-top: 12px; }
.fl-counter-s { font-size: 13px; opacity: 0.7; margin-top: 2px; font-family: var(--f-mono); }

/* ─── Vids ────────────────────────────────────────────────────────────────── */
.fl-vids-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 960px) { .fl-vids-grid { grid-template-columns: 1fr; } }

.fl-vidcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
  display: block;
}
.fl-vidcard:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.fl-vidcard-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fl-vidcard[data-tone="lila"] .fl-vidcard-thumb { background: linear-gradient(135deg, #5B3FA8, #25184F); }
.fl-vidcard[data-tone="tuerkis"] .fl-vidcard-thumb { background: linear-gradient(135deg, #3FCAB8, #0E8478); }
.fl-vidcard[data-tone="orange"] .fl-vidcard-thumb { background: linear-gradient(135deg, #F97316, #9A3412); }
.fl-vidcard-pattern {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 18px);
}
.fl-vidcard-icon {
  font-size: 64px;
  position: relative; z-index: 2;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35));
}
.fl-vidcard-play {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #062321;
  display: inline-flex; align-items: center; justify-content: center;
  padding-left: 3px;
  z-index: 3;
}
.fl-vidcard-meta { padding: 18px; }
.fl-vidcard-title { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.fl-vidcard-sub { font-size: 13px; color: var(--fg-3); margin-top: 4px; font-family: var(--f-mono); }

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */
.fl-faq-list { display: flex; flex-direction: column; gap: 8px; }
.fl-faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  width: 100%;
  color: inherit;
  font-family: inherit;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s;
}
.fl-faq-item:hover { border-color: var(--border-strong); }
.fl-faq-item.fl-faq-open { border-color: var(--fl-tuerkis); }
.fl-faq-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; }
.fl-faq-q { font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: -0.005em; }
.fl-faq-toggle { font-family: var(--f-display); font-size: 24px; color: var(--fg-3); width: 24px; text-align: center; line-height: 1; }
.fl-faq-a { padding: 0 22px 22px; color: var(--fg-2); font-size: 15.5px; }

/* ─── CTA ─────────────────────────────────────────────────────────────────── */
.fl-cta { padding-bottom: 120px !important; }
.fl-cta-shell {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 48px;
}
@media (max-width: 1024px) { .fl-cta-shell { grid-template-columns: 1fr; padding: 32px; } }

.fl-cta-left h2 { margin: 16px 0 14px; }
.fl-form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.fl-field { display: flex; flex-direction: column; gap: 6px; }
.fl-field-l { font-size: 13px; font-weight: 600; color: var(--fg-2); letter-spacing: 0.01em; }
.fl-field input {
  background: var(--bg-ele);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fl-field input:focus { border-color: var(--fl-tuerkis); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fl-tuerkis) 25%, transparent); }
.fl-field-row { display: flex; align-items: center; background: var(--bg-ele); border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; }
.fl-field-row:focus-within { border-color: var(--fl-tuerkis); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fl-tuerkis) 25%, transparent); }
.fl-field-prefix { padding-left: 16px; color: var(--fg-3); font-weight: 600; }
.fl-field-row input { background: transparent; border: 0; flex: 1; }
.fl-field-row input:focus { box-shadow: none; }

.fl-suggestions { background: color-mix(in oklab, var(--fl-tuerkis) 12%, var(--bg-ele)); border: 1px dashed color-mix(in oklab, var(--fl-tuerkis) 50%, transparent); border-radius: var(--r-md); padding: 14px; }
.fl-suggestions-l { font-size: 12px; color: var(--fg-2); margin-bottom: 8px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.fl-suggestions-row { display: flex; flex-wrap: wrap; gap: 6px; }

.fl-check {
  display: flex; gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--fg-2);
  cursor: pointer;
}
.fl-check input { margin-top: 4px; accent-color: var(--fl-lila); }
.fl-check a { color: var(--fl-tuerkis); text-decoration: underline; }

.fl-form-foot {
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-3);
  margin-top: 6px;
  font-family: var(--f-mono);
}
/* Footer-Links (Passwort vergessen / registrieren) als 44px-Tap-Target auf iOS
   (Apple HIG); inline-flex + min-height statt nur 15px Textzeile. */
.fl-form-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

.fl-cta-right {
  background: linear-gradient(160deg, var(--fl-lila) 0%, var(--fl-lila-deep) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fl-cta-right::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 0%, color-mix(in oklab, var(--fl-tuerkis) 40%, transparent), transparent 60%);
  pointer-events: none;
}
.fl-avatar-pick {
  width: 240px; height: 240px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  margin: 8px 0;
  z-index: 1;
  position: relative;
}
.fl-avatar-name { font-family: var(--f-mono); font-weight: 700; font-size: 18px; z-index: 1; position: relative; }
.fl-avatar-tag { font-size: 13px; opacity: 0.75; z-index: 1; position: relative; max-width: 220px; }
.fl-avatar-note { font-size: 12px; opacity: 0.6; z-index: 1; position: relative; margin-top: 8px; }
.fl-cta-right .fl-btn { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); color: #fff; }
.fl-cta-right .fl-btn:hover { background: rgba(255,255,255,0.2); }

/* ─── Premium/Admin-Badge auf Owl-Karte (nur Icon, Andre 2026-05-23) ───── */
.fl-owl-premium-badge,
.fl-owl-admin-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 18px;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  cursor: help;
}
.fl-owl-premium-badge {
  background: radial-gradient(circle at 35% 30%, #FDE68A 0%, #FBBF24 45%, #B45309 100%);
}
.fl-owl-admin-badge {
  background: radial-gradient(circle at 35% 30%, #C7D2FE 0%, #6366F1 45%, #3730A3 100%);
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.fl-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 60px 32px 32px;
  background: var(--bg-2);
}
.fl-footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 40px;
}
@media (max-width: 880px) { .fl-footer-inner { grid-template-columns: 1fr; } }

.fl-footer-brand p { color: var(--fg-3); font-size: 14px; margin-top: 12px; max-width: 360px; }
.fl-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fl-footer-cols h4 { font-family: var(--f-display); font-size: 14px; margin: 0 0 12px; color: var(--fg); text-transform: uppercase; letter-spacing: 0.1em; }
.fl-footer-cols a { display: block; padding: 4px 0; color: var(--fg-3); font-size: 14px; }
.fl-footer-cols a:hover { color: var(--fg); }

.fl-footer-bottom {
  max-width: var(--maxw);
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--fg-3);
  font-family: var(--f-mono);
}
@media (max-width: 600px) { .fl-footer-bottom { flex-direction: column; gap: 6px; } }


/* ─── Phase 4: Foto-Galerie + Strecken-Bibliothek (Andre 2026-05-24) ──────── */

/* Masonry Pinterest-Grid via CSS columns (kein JS noetig) */
.fl-masonry {
  column-count: 1;
  column-gap: 16px;
  margin-top: 20px;
}
@media (min-width: 600px) { .fl-masonry { column-count: 2; } }
@media (min-width: 900px) { .fl-masonry { column-count: 3; } }
@media (min-width: 1280px) { .fl-masonry { column-count: 4; } }

.fl-masonry-item {
  break-inside: avoid;
  margin: 0 0 16px;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.fl-photo-link { display: block; line-height: 0; }
.fl-photo-frame {
  position: relative;
  width: 100%;
  height: 0;
  background: #0f0c20;
}
.fl-photo-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.fl-masonry-item:hover .fl-photo-frame img { transform: scale(1.04); }

.fl-photo-meta {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--fg);
}
.fl-photo-avatar { border-radius: 50%; background: var(--surface-2); }
.fl-photo-caption { margin: 4px 0; font-size: 13px; color: var(--fg-2); }

/* Strecken-Bibliothek-Grid */
.fl-track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.fl-track-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: var(--surface);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--surface-border);
  transition: border-color .15s, transform .15s;
}
.fl-track-card:hover { border-color: var(--fl-tuerkis); transform: translateY(-2px); }
.fl-track-card header { display: flex; gap: 10px; align-items: center; }
.fl-track-card header img { border-radius: 50%; }
.fl-track-card strong { display: block; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kommentare (v0.12.132) — geteilt von Feed + Activity-Detail */
.fl-comments { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.fl-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fl-comment { display: flex; gap: 8px; align-items: flex-start; }
.fl-comment-avatar { border-radius: 50%; flex: 0 0 auto; }
.fl-comment-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fl-comment-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fl-comment-head strong { font-size: 13px; color: var(--fg); }
.fl-comment-time { font-size: 11px; color: var(--fg-3); }
.fl-comment-text { font-size: 14px; color: var(--fg); line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
.fl-comment-del { margin: 0; }
.fl-comment-del button { background: none; border: 0; color: var(--fg-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.fl-comment-del button:hover { color: #FCA5A5; }
.fl-comment-form { display: flex; gap: 8px; align-items: center; }
.fl-comment-form input[type=text] { flex: 1; min-width: 0; padding: 9px 12px; background: var(--bg-3); color: var(--fg); border: 1px solid var(--border); border-radius: 999px; font-family: inherit; font-size: 14px; }
.fl-comment-form input[type=text]:focus { outline: none; border-color: var(--fl-tuerkis); }
/* Jahres-Vergleichstabelle (v0.12.136) */
.fl-year-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fl-year-table th, .fl-year-table td { text-align: right; padding: 8px 10px; white-space: nowrap; }
.fl-year-table th:first-child, .fl-year-table td:first-child { text-align: left; }
.fl-year-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); border-bottom: 1px solid var(--border); }
.fl-year-table tbody tr { border-bottom: 1px solid var(--border); }
.fl-year-table tbody tr:last-child { border-bottom: 0; }
.fl-year-table td { color: var(--fg); }

.fl-nav-feed { display: inline-flex; align-items: center; gap: 6px; }
.fl-comment-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; background: color-mix(in oklab, var(--fl-tuerkis) 22%, transparent); color: var(--fl-tuerkis); border: 1px solid color-mix(in oklab, var(--fl-tuerkis) 40%, transparent); }
.fl-track-card small { color: var(--fg-2); }
.fl-track-stats { display: flex; gap: 14px; margin: 6px 0; padding: 0; }
.fl-track-stats > div { display: flex; flex-direction: column; align-items: center; }
.fl-track-stats dt { font-size: 17px; font-weight: 700; color: var(--fl-tuerkis); }
.fl-track-stats dd { margin: 0; font-size: 11px; color: var(--fg-2); text-transform: uppercase; }

.fl-filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
}
.fl-filter-bar label { display: flex; flex-direction: column; font-size: 12px; color: var(--fg-2); }
.fl-filter-bar input { width: 90px; }
.fl-btn-text { color: var(--fl-tuerkis); font-size: 13px; }

.fl-pagination { text-align: center; margin: 24px 0; }

/* ─── Phase 5: Public-Wall (k-anonymisiert) ──────────────────────────────── */
.fl-public-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.fl-public-stat {
  text-align: center;
  padding: 18px 14px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-radius: 12px;
  border: 1px solid var(--surface-border);
}
.fl-public-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--fl-tuerkis);
  line-height: 1.1;
}
.fl-public-lbl { font-size: 13px; color: var(--fg-2); margin-top: 4px; }
.fl-histogram { margin: 16px 0; }
.fl-histbar {
  display: grid;
  grid-template-columns: 70px 1fr 50px;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.fl-histbar-label { font-size: 13px; color: var(--fg-2); text-align: right; }
.fl-histbar-track { background: var(--surface); height: 22px; border-radius: 6px; overflow: hidden; }
.fl-histbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--fl-lila) 0%, var(--fl-tuerkis) 100%);
  border-radius: 6px;
  transition: width .4s ease;
}
.fl-histbar-count { font-size: 14px; color: var(--fl-tuerkis); font-weight: 600; }

/* ─── Avatar-Picker im Reg-Form (Andre 2026-05-24 UX-Fix v2) ─────────────── */
.fl-avatar-filter-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.fl-avatar-filter-input {
  flex: 1;
  padding: 10px 36px 10px 12px;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.fl-avatar-filter-input:focus { outline: 2px solid var(--fl-tuerkis, #4FE3D2); outline-offset: 1px; }
.fl-avatar-filter-clear {
  position: absolute;
  right: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  visibility: hidden;
}
.fl-avatar-filter-clear:hover { color: var(--fl-tuerkis); }
.fl-avatar-filter-empty {
  padding: 18px;
  text-align: center;
  color: var(--fg-2);
  font-size: 14px;
}
/* Wenn alle Gruppen ausgeblendet: empty zeigt sich, sonst per hidden weg */
.fl-avatar-filter-empty[hidden] { display: none; }

/* Login-Avatar-Memory (Cookie-basiert, Andre 2026-05-24 UX) */
.fl-login-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 14px 16px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 12px;
}
.fl-login-welcome img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.fl-login-welcome-text { flex: 1; }
.fl-login-welcome-text strong { color: var(--fl-tuerkis); }
.fl-login-welcome-text small { display: block; color: var(--fg-2); font-size: 12px; margin-top: 2px; }
.fl-login-welcome a {
  font-size: 12px;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fl-login-welcome a:hover { color: var(--fl-tuerkis); }

.fl-avatar-picker-wrap {
  max-height: 420px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 12px;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fl-avatar-picker-group + .fl-avatar-picker-group { margin-top: 18px; }
.fl-avatar-picker-group-l {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fl-tuerkis);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.25);
}
.fl-avatar-picker-group-l small {
  font-weight: 400;
  font-size: 12px;
  color: var(--fg-2);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.fl-avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}
.fl-avatar-option {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 6px 4px 8px;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: border-color .15s, transform .15s, background .15s;
  position: relative;
}
.fl-avatar-option img {
  display: block;
  border-radius: 50%;
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.04);
}
.fl-avatar-option-l {
  font-size: 11px;
  line-height: 1.2;
  color: var(--fg-2);
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}
.fl-avatar-option input { position: absolute; opacity: 0; pointer-events: none; }
.fl-avatar-option:has(input:checked) {
  border-color: var(--fl-mint);
  background: color-mix(in oklab, var(--fl-mint) 16%, transparent);
}
.fl-avatar-option:has(input:checked) .fl-avatar-option-l {
  color: var(--fl-mint);
  font-weight: 600;
}
.fl-avatar-option:hover { border-color: var(--fl-tuerkis); }

/* Scrollbar styling (subtil) */
.fl-avatar-picker-wrap::-webkit-scrollbar { width: 8px; }
.fl-avatar-picker-wrap::-webkit-scrollbar-track { background: transparent; }
.fl-avatar-picker-wrap::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.4); border-radius: 4px; }

/* ─── Avatar-Galerie /avatars (Andre 2026-05-24 UX-Fix) ──────────────────── */
.fl-motif-heading {
  margin-top: 32px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}
.fl-motif-heading small { color: var(--fg-2); font-weight: 400; font-size: 14px; }
.fl-avatar-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin: 16px 0 8px;
}
.fl-avatar-tile {
  margin: 0;
  text-align: center;
  padding: 12px 8px;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .15s, transform .15s;
}
.fl-avatar-tile:hover { border-color: var(--fl-tuerkis); transform: translateY(-2px); }
.fl-avatar-tile img {
  display: block;
  margin: 0 auto;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
}
.fl-avatar-tile figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-2);
  text-transform: capitalize;
  word-break: break-word;
}

/* ─── Reaktionen (Phase 5.x) ─────────────────────────────────────────────── */
.fl-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.fl-react-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  min-height: 44px; /* M8 2026-05-30: Apple/A11y-Tap-Target statt ~36px */
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  color: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.fl-react-btn:hover { background: rgba(124, 58, 237, 0.18); border-color: var(--fl-tuerkis); }
.fl-react-btn:active { transform: scale(0.94); }
.fl-react-btn.fl-react-mine {
  background: linear-gradient(135deg, color-mix(in oklab, var(--fl-mint) 25%, transparent), color-mix(in oklab, var(--fl-lila) 20%, transparent));
  border-color: var(--fl-mint);
  color: var(--fl-mint);
}
.fl-react-btn .fl-react-count { font-size: 13px; font-weight: 600; opacity: 0.85; }
/* v0.12.26: Herz IMMER rot (egal Theme oder mine/not-mine) — Andre's Wunsch. */
.fl-react-btn.fl-react-heart .fl-react-emoji { color: #E11D48; }
.fl-react-btn.fl-react-heart.fl-react-mine {
  background: rgba(225, 29, 72, 0.15);
  border-color: #E11D48;
  color: #E11D48;
}

/* ─── Logged-in Navigation (Andre 2026-05-24) ─────────────────────────── */
.fl-nav-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--bg-ele);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
  font-size: 14px;
  transition: border-color .15s, background .15s;
}
.fl-nav-me:hover { border-color: var(--fl-tuerkis); }
.fl-nav-me img { border-radius: 50%; display: block; background: rgba(255,255,255,0.04); }
.fl-nav-me-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Mobile-Bottom-Bar fuer Logged-in-User ────────────────────────────── */
.fl-mobile-bar {
  display: none;  /* nur auf Mobile sichtbar — Media-Query unten */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: color-mix(in oklab, var(--bg, #100828) 92%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--border, #2a2447);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.fl-mobile-bar-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.fl-mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  color: var(--fg-2);
  text-decoration: none;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.fl-mobile-bar a .fl-mb-icon {
  font-size: 20px;
  line-height: 1;
}
.fl-mobile-bar a.is-active,
.fl-mobile-bar a:active {
  color: var(--fl-tuerkis);
  background: rgba(79, 227, 210, 0.1);
}
.fl-mobile-bar a img {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
}

/* ─── Reaktions-Badge am Eulen-Symbol (v0.12.46) ──────────────────────────── */
.fl-nav-me-ava { position: relative; display: inline-flex; }
.fl-mb-ava { position: relative; display: inline-flex; }
.fl-react-badge {
  position: absolute; top: -5px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fl-orange, #F97316); color: #1a1206;
  font-size: 11px; font-weight: 800; line-height: 1;
  border-radius: 9px; border: 2px solid var(--bg, #0F2218);
}
/* Mobile-Bar: nur ein Punkt, kein Zahl-Platz */
.fl-react-badge-dot {
  top: -2px; right: -2px;
  min-width: 11px; width: 11px; height: 11px; padding: 0;
  border-radius: 50%;
}

/* ─── Reaktions-Hub auf der Profil-Seite (v0.12.46) ───────────────────────── */
.fl-react-hub {
  margin: 24px 0 8px; padding: 18px;
  background: var(--card);
  border: 1px solid var(--border); border-radius: 16px;
}
.fl-react-hub-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.fl-react-hub-h { margin: 0; font-size: 18px; }
.fl-react-seen-form { margin: 0; }
.fl-react-seen-btn { font-size: 13px; padding: 8px 12px; min-height: 40px; white-space: nowrap; }
.fl-react-totals {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.fl-react-total { display: inline-flex; align-items: center; gap: 5px; font-size: 17px; }
.fl-react-total-n { font-weight: 800; font-variant-numeric: tabular-nums; }
.fl-react-total-sum {
  margin-left: auto; color: var(--fg-2); font-size: 14px; font-weight: 600;
}
.fl-react-feed { list-style: none; margin: 0; padding: 0; }
.fl-react-row + .fl-react-row { border-top: 1px solid var(--border); }
.fl-react-row a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; min-height: 44px;
  color: var(--fg); text-decoration: none; border-radius: 10px;
}
.fl-react-row a:hover { background: var(--bg-ele); }
.fl-react-row.is-new a { background: rgba(249, 115, 22, 0.08); }
.fl-react-ava { border-radius: 50%; background: rgba(255,255,255,0.05); flex: 0 0 auto; }
.fl-react-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fl-react-line { font-size: 14.5px; }
.fl-react-when { font-size: 12px; color: var(--fg-3); }
.fl-react-new {
  color: var(--fl-orange, #F97316); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.04em;
}
.fl-react-arrow { color: var(--fg-3); font-size: 18px; flex: 0 0 auto; }

/* ─── Eigene Statistik im Profil (v0.12.60) ───────────────────────────────── */
.fl-mystats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.fl-mystats-cell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fl-mystats-n { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fl-tuerkis); line-height: 1.1; }
.fl-mystats-l { font-size: 12px; color: var(--fg-2); margin-top: 3px; }
.fl-mystats-break { color: var(--fg-2); font-size: 14px; margin: 0; }
@media (max-width: 560px) { .fl-mystats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* ─── Public-Foto-Strip auf Landing (Andre 2026-05-24) ──────────────────── */
.fl-public-strip {
  padding: 56px 32px !important;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.06));
}
.fl-public-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 24px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.fl-public-photo {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-ele);
  position: relative;
}
.fl-public-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.fl-public-photo:hover img { transform: scale(1.04); }
.fl-public-photo::after {
  content: '🦉 Eine Eule';
  position: absolute;
  bottom: 8px; left: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.55);
  padding: 3px 8px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .15s;
}
.fl-public-photo:hover::after { opacity: 1; }
@media (max-width: 640px) {
  .fl-public-strip { padding: 40px 16px !important; }
  .fl-public-photos { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ─── Quick-Distance-Buttons (Termine, Andre 2026-05-24) ───────────────── */
.fl-quick-distance {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.fl-quick-distance button {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-ele);
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.fl-quick-distance button:hover {
  border-color: var(--fl-tuerkis);
  color: var(--fl-tuerkis);
}

/* ─── Admin-Tabelle (Andre 2026-05-24) ─────────────────────────────────── */
.fl-admin-tablewrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fl-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.fl-admin-table th, .fl-admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border, #2a2447);
  vertical-align: middle;
}
.fl-admin-table thead th {
  background: var(--bg-ele);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.fl-admin-table tbody tr:hover { background: rgba(124, 58, 237, 0.06); }
.fl-admin-table tr.is-deleted { opacity: 0.55; }
.fl-admin-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fl-btn-mini {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  background: var(--bg-ele);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
}
.fl-btn-mini:hover { border-color: var(--fl-tuerkis); }
.fl-btn-mini.fl-btn-danger { color: #FCA5A5; }
.fl-btn-mini.fl-btn-danger:hover { border-color: #EF4444; }
.fl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}
.fl-badge-ok { background: rgba(52, 211, 153, 0.18); color: #34D399; }
.fl-badge-warn { background: rgba(251, 191, 36, 0.18); color: #FBBF24; }
.fl-badge-err { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; }

/* Privat-Marker auf eigenen, nicht-oeffentlichen Strecken (v0.12.110) */
.fl-chip-private {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--fg-3);
  border: 1px solid var(--surface-border);
}

/* ─── Profile-Hub-Karten (Andre 2026-05-24) ────────────────────────────── */
.fl-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0 32px;
}
.fl-hub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--bg-ele);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color .15s, transform .15s, background .15s;
}
.fl-hub-card:hover {
  border-color: var(--fl-tuerkis);
  transform: translateY(-2px);
}
.fl-hub-card-icon { font-size: 28px; line-height: 1; }
.fl-hub-card-title { font-weight: 700; font-size: 16px; margin: 0; }
.fl-hub-card-desc { font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.4; }
.fl-hub-card-badge {
  align-self: flex-start;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.2);
  color: var(--fl-tuerkis);
  font-weight: 700;
}
.fl-hub-card-badge.is-warn { background: rgba(251, 191, 36, 0.18); color: #FBBF24; }
.fl-hub-card-badge.is-done { background: rgba(52, 211, 153, 0.18); color: #34D399; }
.fl-hub-card-badge.is-info { background: rgba(124, 58, 237, 0.28); color: #C4B5FD; }

/* ─── Pfad-Wahl auf /garmin: zwei gleichwertige Wege (v0.12) ───────────── */
.fl-path-pick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0 14px;
}
@media (max-width: 640px) { .fl-path-pick { grid-template-columns: 1fr; } }
.fl-path-card {
  display: flex;
  gap: 14px;
  padding: 20px 18px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  color: var(--fg);
  text-decoration: none;
  transition: border-color .15s, transform .15s, background .15s;
}
.fl-path-card:hover {
  border-color: var(--fl-tuerkis);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.fl-path-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.fl-path-card p { margin: 0 0 6px; font-size: 14px; color: var(--fg-2); line-height: 1.45; }
.fl-path-card .fl-path-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 26px;
  background: color-mix(in oklab, var(--fl-tuerkis) 22%, transparent);
}
.fl-path-garmin .fl-path-icon {
  background: color-mix(in oklab, var(--fl-tuerkis) 22%, transparent);
  color: var(--fl-tuerkis);
}
.fl-path-manual .fl-path-icon {
  background: color-mix(in oklab, var(--fl-mint) 22%, transparent);
  color: var(--fl-mint);
}
.fl-path-meta {
  font-size: 12px;
  color: var(--fg-3);
  font-family: var(--f-mono);
  letter-spacing: 0.02em;
}
.fl-path-or {
  font-size: 13px;
  color: var(--fg-3);
  text-align: center;
  margin: 6px 0 28px;
  font-style: italic;
}

/* Activity-Detail-Page Stats-Grid — v0.11.15: CSS war komplett verschwunden,
   Stats lagen daher gestapelt. v0.11.16: theme-aware via --surface-Tokens
   damit Light-Mode lesbar wird. */
.fl-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 20px 0;
  max-width: 640px;
}
.fl-stat-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
}
.fl-stat-card .fl-stat-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
}
.fl-stat-card .fl-stat-label {
  font-size: 12px;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile-Layout (Andre 2026-05-24 — iPhone-SE-3 hatte horizontal overflow
   und Mathe-Captcha lief ueber den Rand). Greift unter 640px Viewport.
   Strategie: alle horizontal-padding stark reduzieren, alle row-flex auf
   column stacken die nicht zwingend nebeneinander sein muessen, Tap-Targets
   gross halten.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Section + Outer-Container — v0.12.16: oben enger fuer iPhone-Feel
     (Andre's Befund "oben viel platz"). Top 56px -> 16px. */
  .fl-app > section { padding: 16px 16px 24px; }

  /* Nav: Title + Actions */
  .fl-nav { padding: 12px 14px; gap: 8px; }
  .fl-logo-text { font-size: 16px; }
  .fl-logo-mark img { width: 32px !important; height: 32px !important; }
  .fl-nav-actions { gap: 6px; }
  .fl-btn { padding: 9px 14px; font-size: 14px; }

  /* CTA-Shell (Registrierungs-Karte) — viel weniger Innenabstand */
  .fl-cta { padding-bottom: 56px !important; }
  .fl-cta-shell { padding: 18px; gap: 18px; border-radius: 14px; }
  .fl-cta-left h2 { margin: 12px 0 10px; }
  .fl-h2 { font-size: 28px; }
  .fl-lead { font-size: 15px; line-height: 1.45; }

  /* Aside-Box "Tipp" rueckt enger an die Form */
  .fl-cta-right { padding: 20px; margin: 0; border-radius: 14px; }

  /* Form-Inputs: 16px font-size BLEIBT (sonst iOS-Auto-Zoom!) */
  .fl-field input { padding: 12px 14px; }
  .fl-field-prefix { padding-left: 12px; }

  /* Suggestions-Generator: Input + Button stapeln statt nebeneinander */
  .fl-suggestions { padding: 12px; }
  .fl-suggestions > div[style*="flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .fl-suggestions > div[style*="flex"] button { width: 100%; }

  /* Mathe-Captcha-Input: full width statt 140px, damit Tap-Target gross */
  .fl-field input[name="math_answer"] {
    max-width: none !important;
    width: 100%;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0.05em;
  }
  .fl-field-l { font-size: 13px; line-height: 1.35; }

  /* Avatar-Picker: 4-Spalten-Grid mit kleineren Avataren, weniger Padding */
  .fl-avatar-picker-wrap { padding: 10px; max-height: 360px; }
  .fl-avatar-picker { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
  .fl-avatar-option { padding: 4px 2px 6px; }
  .fl-avatar-option img { width: 48px; height: 48px; }
  .fl-avatar-option-l { font-size: 10.5px; }
  .fl-avatar-filter-input { font-size: 16px; }  /* iOS-Zoom-Bremse */

  /* Nav-Anpassungen Mobile */
  .fl-nav-me-name { display: none; }  /* nur Avatar-Bild in Top-Nav */
  .fl-nav-me { padding: 2px; }
  /* v0.12.14 Mobile-Nav-Fallback bewusst NICHT hier gesetzt — siehe
     extra Media-Query weiter unten, die <= 1100px greift (gleicher
     Breakpoint wie Top-Nav-Aushebung). Sonst gab es Viewport-Luecke
     641-1100px ohne jegliche Navigation. */

  /* Login-Welcome-Box: kompakter + flex-wrap damit "Nicht ich"-Link nicht ueberlaeuft */
  .fl-login-welcome { padding: 12px; gap: 10px; flex-wrap: wrap; }
  .fl-login-welcome img { width: 44px; height: 44px; }
  .fl-login-welcome-text { min-width: 0; flex: 1 1 60%; }
  .fl-login-welcome a { flex: 0 0 auto; }

  /* DSGVO-Check: weniger Padding um Box */
  .fl-check { font-size: 14px; gap: 8px; }

  /* Footer */
  .fl-footer { padding: 32px 16px; }
  .fl-footer-cols { gap: 24px; }
  .fl-footer h4 { font-size: 13px; }

  /* Sichere Worttrennung damit lange Mail-Adressen + URLs nicht ueberlaufen */
  .fl-cta-shell, .fl-form, .fl-suggestions, .fl-login-welcome { word-break: break-word; overflow-wrap: anywhere; }

  /* Galerie-Tiles enger */
  .fl-avatar-gallery { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .fl-avatar-tile { padding: 8px 6px; }
  .fl-avatar-tile img { width: 80px; height: 80px; }
}

/* Extra-Schmal: iPhone-SE-3 Hochkant (375px) → noch eine Stufe weniger */
@media (max-width: 380px) {
  .fl-app > section { padding: 12px 12px 20px; }
  .fl-cta-shell { padding: 14px; }
  .fl-h2 { font-size: 24px; }
  .fl-avatar-picker { grid-template-columns: repeat(4, 1fr); }
  .fl-avatar-option img { width: 44px; height: 44px; }
  .fl-avatar-option-l { font-size: 10px; }
}

/* ─── Passwort-Toggle (Augen-Button im Input) ──────────────────────────── */
.fl-pwd-wrap { position: relative; display: block; }
.fl-pwd-wrap input { width: 100%; padding-right: 52px; box-sizing: border-box; }
.fl-pwd-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 44px; height: 44px; /* iOS-Tap-Target (Apple HIG 44px) */
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px;
  cursor: pointer; color: var(--fg-2); font-size: 18px; line-height: 1;
  padding: 0;
}
.fl-pwd-toggle:hover { background: color-mix(in oklab, var(--fl-tuerkis) 14%, transparent); color: var(--fl-tuerkis); }
.fl-pwd-toggle:focus-visible { outline: 2px solid var(--fl-tuerkis); outline-offset: 2px; }
.fl-pwd-toggle[aria-pressed="true"] { color: var(--fl-tuerkis); }

/* ── Trainingsplan: Wizard + Ansicht (v0.12.122) ──────────────────────────
   Diese Klassen fehlten — die Plan-Seiten rendeten ungestylt. Nachgezogen an
   den Waldnebel-Tokens, additiv. */
/* Basis-Sektionsbreite/-Padding kommt aus '.fl-app > section' (Zeile ~110).
   fl-section-narrow muss diese Spezifitaet (0,1,1) schlagen -> mit .fl-app > section. */
.fl-app > section.fl-section-narrow { max-width: 600px; }

.fl-card { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px; margin: 0 0 18px; }
.fl-card h3 { margin: 0 0 8px; font-size: 17px; color: var(--fg); }
.fl-card-info { border-left: 3px solid var(--fl-tuerkis); }
.fl-card-warn { border-left: 3px solid var(--fl-orange); }
.fl-card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: transparent; border: 0; padding: 0; margin-top: 18px; }

.fl-stats-row { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.fl-stats-row > div { font-size: 14px; color: var(--fg-2); }
.fl-stats-row strong { color: var(--fg); }

.fl-pace-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
  margin: 10px 0 0; font-size: 14px; }
.fl-pace-grid dt { color: var(--fl-tuerkis); font-weight: 600; }
.fl-pace-grid dd { margin: 0; color: var(--fg); }

.fl-disclaimer { background: rgba(245,158,91,0.08); border: 1px solid rgba(245,158,91,0.22);
  border-left: 3px solid var(--fl-orange); border-radius: var(--r-md);
  padding: 14px 16px; margin-top: 24px; font-size: 13px; color: var(--fg-2); }
.fl-disclaimer h4 { margin: 0 0 6px; color: var(--fl-orange); font-size: 14px; }

.fl-flash { border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 16px; font-size: 14px; }
.fl-flash-error { background: rgba(220,80,80,0.12); border: 1px solid rgba(220,80,80,0.35); color: #FCA5A5; }
.fl-flash-success { background: rgba(43,191,165,0.12); border: 1px solid rgba(43,191,165,0.30); color: var(--fl-tuerkis); }

.fl-muted { color: var(--fg-3); }

.fl-week { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); margin: 0 0 10px; padding: 2px 14px; }
.fl-week > summary { cursor: pointer; padding: 11px 0; font-size: 15px; list-style: none; }
.fl-week > summary::-webkit-details-marker { display: none; }
.fl-week[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 6px; }

.fl-workout-table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 13px; }
.fl-workout-table th { text-align: left; padding: 6px 8px; color: var(--fg-3);
  font-weight: 600; border-bottom: 1px solid var(--border); }
.fl-workout-table td { padding: 7px 8px; border-bottom: 1px solid var(--border);
  color: var(--fg-2); vertical-align: top; }
.fl-workout-today { background: rgba(43,191,165,0.07); }

.fl-status-ok { color: var(--fl-mint); text-decoration: none; }
.fl-status-miss { color: var(--fl-orange); }

/* ── Geteilte Kleinteile, die seitenübergreifend genutzt wurden (v0.12.123) ── */
.fl-flash-err { background: rgba(220,80,80,0.12); border: 1px solid rgba(220,80,80,0.35);
  color: #FCA5A5; border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 16px; font-size: 14px; }
.fl-flash-ok { background: rgba(43,191,165,0.12); border: 1px solid rgba(43,191,165,0.30);
  color: var(--fl-tuerkis); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 16px; font-size: 14px; }
.fl-fineprint { color: var(--fg-3); font-size: 12px; line-height: 1.5; }
.fl-meta { color: var(--fg-2); font-size: 13px; }

/* ── Weitere generische Kleinteile (setup/profile etc., v0.12.123) ──────── */
.fl-card-success { border-left: 3px solid var(--fl-mint); }
.fl-error-text { color: #FCA5A5; font-size: 13px; }
.fl-bullets { margin: 8px 0; padding-left: 20px; color: var(--fg-2); line-height: 1.6; }
.fl-bullets li { margin: 2px 0; }
.fl-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; margin: 8px 0; }
.fl-dl dt { color: var(--fl-tuerkis); font-weight: 600; }
.fl-dl dd { margin: 0; color: var(--fg); }