/*
 * Up2you Arena — Lobby (Eingangshalle)
 * App-artige, eigenständige Shell. Bewusst KEINE Abhängigkeit zum
 * Tracker-Core (GPS/Leaflet) — die Lobby listet nur Challenges auf
 * und führt in die jeweilige Challenge-View (../arena/).
 */

/* ── Schriftart Montserrat — LOKAL gehostet (DSGVO) ──────────────────────
   Bewusst NICHT von fonts.googleapis.com geladen: das würde die IP jedes
   Besuchers ungefragt an Google/USA senden (abmahnbar, LG München 2022).
   Die woff2-Dateien liegen unter public/assets/fonts/ (SIL Open Font License,
   Selbst-Hosting ausdrücklich erlaubt). font-display:swap → Text sofort
   sichtbar, kein "unsichtbarer Text"-Blitz. Pfad relativ von lobby/lobby.css. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-800.woff2') format('woff2');
}

/* ══════════════════════════════════════════════════════════════════
   Farbsystem der Arena (PO 2026-09-13): EIN Satz semantischer Tokens,
   ZWEI Belegungen (hell/dunkel). Bausteine sagen nur, was eine Farbe TUT
   („Fläche", „Markentext", „Fehler-Fläche"), nie welchen Wert sie hat.
   Belegung: DUNKEL ist Standard (PO 2026-09-25), unabhängig vom Gerät.
   Hell nur mit <html data-theme="light"> (Schalter im Konto, Schritt 3).
   Der :root-Block unten bleibt die vollständige helle Grundbelegung.

   Bewusste Konstanten OHNE Token (in beiden Belegungen gleich): Weiß im
   Logo-Rahmen, der Puck-Kern und der Primär-Knopf (weiß = stärkste Aktion
   auch auf dunklem Grund), Schwarz hinter dem Kamerabild, Text auf Fotos.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* Marke */
  --lobby-green: #007A31;                 /* Flächen: Knöpfe, aktive Chips, Tags */
  --lobby-green-dark: #005f26;            /* Hover/gedrückt auf Markengrün */
  --lobby-brand-text: #007A31;            /* grüner Text, Icons, Werte (dunkel: heller) */
  --lobby-brand-soft: #eef5ea;            /* grün getönte Flächen (Icons, Tags, Hinweise) */
  --lobby-brand-soft-border: #cce8d6;
  --lobby-brand-border: rgba(0, 122, 49, .35);
  --lobby-on-brand: #fff;                 /* Text/Icons auf Markengrün */
  --lobby-on-brand-hover: rgba(255, 255, 255, .14);
  --lobby-ring: rgba(255, 255, 255, .7);  /* helle Rahmen im Header (Avatar, Logo, Knöpfe) */

  /* Grund und Flächen */
  --lobby-bg: #eaf2e1;
  --lobby-surface: #ffffff;               /* Karten, Sheets, Felder */
  --lobby-surface-2: #f1f5f9;             /* Flächen in Karten, Hover, gesperrte Knöpfe */
  --lobby-border: #e5e7eb;
  --lobby-border-strong: #cbd5e1;         /* Griff, deutlichere Trennung */
  --lobby-header: #007A31;
  --lobby-header-fade: #dbe9d1;           /* weicher Übergang unter dem Header */
  --lobby-tabbar: #ffffff;
  --lobby-glass: rgba(255, 255, 255, .94);/* Aktionsleiste, Tags auf Bildern */
  --lobby-overlay: rgba(15, 23, 42, .45); /* Abdunklung hinter Sheets */
  --lobby-media-bg: #dbe7cf;              /* Bildfläche ohne Bild */
  --lobby-placeholder: linear-gradient(135deg, #cfe2bd, #a9cf98);

  /* Text */
  --lobby-text: #1e293b;
  --lobby-text-muted: #64748b;
  --lobby-neutral: #94a3b8;               /* zurückgetretene Markierungen (erledigt) */

  /* Zustände: je Fläche + Text, damit Pillen und Meldungen ein Paar bleiben */
  --lobby-ok-soft: #e3f5e9;  --lobby-ok-text: #137a3b;  --lobby-ok-border: #a7dfba;
  --lobby-warn: #ea580c;     --lobby-warn-soft: #fff7ed; --lobby-warn-text: #9a3412; --lobby-warn-border: #fed7aa;
  --lobby-danger: #dc2626;   --lobby-danger-soft: #fef2f2; --lobby-danger-text: #b91c1c; --lobby-danger-border: #fecaca;
  --lobby-gold-soft: linear-gradient(135deg, #fff7e6, #fffdf7); --lobby-gold-text: #b45309; --lobby-gold-border: #f5d9a6;
  --lobby-info-soft: #e0e7ff; --lobby-info-text: #3730a3;

  /* Form */
  --lobby-radius: 14px;
  --lobby-shadow: 0 2px 10px rgba(0, 0, 0, .08);

  /* ── November-Formsprache (helle Adaption, Up2you-Grün) ──────────────
     Übernommen werden FORMEN & Effekte aus november-design.css — große
     Rundungen, gestufte Schatten, Glow und die weiche Bewegungskurve —
     NICHT deren Farben (kein Golden-Hour). */
  --lobby-radius-lg: 24px;                          /* großer Karten-Radius wie .glass-card */
  --lobby-ease: cubic-bezier(.4, 0, .2, 1);          /* November-Transition */
  --lobby-shadow-soft: 0 8px 32px rgba(0, 0, 0, .10);/* weicher Ruhe-Schatten */
  --lobby-shadow-lift: 0 16px 40px rgba(0, 0, 0, .16);/* Hover-Schatten */
  --lobby-glow: 0 0 0 1px rgba(0, 122, 49, .12), 0 16px 40px rgba(0, 122, 49, .22); /* grüner Glow statt Golden-Hour */
  /* Akzent-Streifen oben auf Karten — November nutzt hier einen Verlauf;
     in Up2you-Grün statt Blau→Gold→Grün. */
  --lobby-accent-line: linear-gradient(90deg, var(--lobby-green-dark) 0%, var(--lobby-green) 50%, #2fb866 100%);

  color-scheme: light;
}

/* ── Dunkle Belegung ────────────────────────────────────────────────
   Grund statt Schwarz: ein sehr dunkles Grün-Grau, das aus der Marke wächst.
   Höhe über Helligkeit: Karten ohne Schatten, dafür hellere Fläche + Rand.
   Zwei Grüns: Markengrün trägt Knöpfe; Text und Icons bekommen ein helleres
   Grün mit Kontrast ≥ 4,5:1 auf den Flächen. Werte in EINER Mixin-Liste,
   gespiegelt in :root[data-theme="dark"] (Schalter, Schritt 3). */
:root:not([data-theme="light"]) {
  --lobby-green: #0d7f38;
  --lobby-green-dark: #0b6b2f;
  --lobby-brand-text: #4cc97a;
  --lobby-brand-soft: #1f3a26;
  --lobby-brand-soft-border: #2d5a3a;
  --lobby-brand-border: rgba(76, 201, 122, .45);
  --lobby-ring: rgba(255, 255, 255, .35);

  --lobby-bg: #101610;
  --lobby-surface: #1b231a;
  --lobby-surface-2: #222c21;
  --lobby-border: #2c3729;
  --lobby-border-strong: #3a4838;
  --lobby-header: #0a6b2d;
  --lobby-header-fade: #14301c;
  --lobby-tabbar: #151c14;
  --lobby-glass: rgba(27, 35, 26, .94);
  --lobby-overlay: rgba(0, 0, 0, .6);
  --lobby-media-bg: #1f2b1e;
  --lobby-placeholder: linear-gradient(135deg, #24402a, #1a2f1f);

  --lobby-text: #e7efe0;
  --lobby-text-muted: #a3b39a;
  --lobby-neutral: #6b7a6a;

  --lobby-ok-soft: #1f3a26;  --lobby-ok-text: #8fe0ab;  --lobby-ok-border: #2d5a3a;
  --lobby-warn: #c2410c;     --lobby-warn-soft: #3a2415; --lobby-warn-text: #fbaa6d; --lobby-warn-border: #5a3a1e;
  --lobby-danger: #e05353;   --lobby-danger-soft: #3b1c1c; --lobby-danger-text: #f2a0a0; --lobby-danger-border: #5a2a2a;
  --lobby-gold-soft: #3d2f10; --lobby-gold-text: #f5c56b; --lobby-gold-border: #5a4520;
  --lobby-info-soft: #26305a; --lobby-info-text: #b4bdf7;

  --lobby-shadow: none;
  --lobby-shadow-soft: none;
  --lobby-shadow-lift: none;
  --lobby-glow: 0 0 0 1px rgba(76, 201, 122, .25);
  --lobby-accent-line: linear-gradient(90deg, #0b6b2f 0%, #0d7f38 50%, #4cc97a 100%);

  color-scheme: dark;
}
:root[data-theme="dark"] {
  --lobby-green: #0d7f38;
  --lobby-green-dark: #0b6b2f;
  --lobby-brand-text: #4cc97a;
  --lobby-brand-soft: #1f3a26;
  --lobby-brand-soft-border: #2d5a3a;
  --lobby-brand-border: rgba(76, 201, 122, .45);
  --lobby-ring: rgba(255, 255, 255, .35);

  --lobby-bg: #101610;
  --lobby-surface: #1b231a;
  --lobby-surface-2: #222c21;
  --lobby-border: #2c3729;
  --lobby-border-strong: #3a4838;
  --lobby-header: #0a6b2d;
  --lobby-header-fade: #14301c;
  --lobby-tabbar: #151c14;
  --lobby-glass: rgba(27, 35, 26, .94);
  --lobby-overlay: rgba(0, 0, 0, .6);
  --lobby-media-bg: #1f2b1e;
  --lobby-placeholder: linear-gradient(135deg, #24402a, #1a2f1f);

  --lobby-text: #e7efe0;
  --lobby-text-muted: #a3b39a;
  --lobby-neutral: #6b7a6a;

  --lobby-ok-soft: #1f3a26;  --lobby-ok-text: #8fe0ab;  --lobby-ok-border: #2d5a3a;
  --lobby-warn: #c2410c;     --lobby-warn-soft: #3a2415; --lobby-warn-text: #fbaa6d; --lobby-warn-border: #5a3a1e;
  --lobby-danger: #e05353;   --lobby-danger-soft: #3b1c1c; --lobby-danger-text: #f2a0a0; --lobby-danger-border: #5a2a2a;
  --lobby-gold-soft: #3d2f10; --lobby-gold-text: #f5c56b; --lobby-gold-border: #5a4520;
  --lobby-info-soft: #26305a; --lobby-info-text: #b4bdf7;

  --lobby-shadow: none;
  --lobby-shadow-soft: none;
  --lobby-shadow-lift: none;
  --lobby-glow: 0 0 0 1px rgba(76, 201, 122, .25);
  --lobby-accent-line: linear-gradient(90deg, #0b6b2f 0%, #0d7f38 50%, #4cc97a 100%);

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TTS-Theme (Trail Trophy Series) — Pink/Magenta statt Grün.
   ───────────────────────────────────────────────────────────────────────────
   ZENTRAL für ALLE TTS-Lobby-Seiten. Aktiv, sobald <body class="tts-theme">
   gesetzt ist — statisch (trail-trophy.html) oder per JS (leaderboard.js, wenn
   ein Series-Slug vorliegt). Damit erben Series-Seite, Ranglisten und jede
   KÜNFTIGE TTS-Seite (z. B. TTS 2027) dasselbe grün-freie Farbschema, ohne dass
   der Block je wieder pro Datei kopiert werden muss.
   Greift über Light- UND Dark-:root (steht dahinter). Gilt NICHT für den
   Tracker/App-Kontext — der bringt sein eigenes body.tts-theme in tracker.css.
   Pink-Werte: #d61f82 (primary) · #e0218a (light) · #a1145f (dark).
   ═══════════════════════════════════════════════════════════════════════════ */
body.tts-theme {
  --lobby-green: #d61f82;
  --lobby-green-dark: #a1145f;
  --lobby-bg: #fbeef4;
  --lobby-surface: #ffffff;
  --lobby-accent-line: linear-gradient(90deg, #a1145f 0%, #d61f82 50%, #e0218a 100%);
  --lobby-glow: 0 0 0 1px rgba(214,31,130,.14), 0 16px 40px rgba(214,31,130,.24);
  /* Header-Balken oben: lobby.css nutzt hier --lobby-header (NICHT --lobby-green),
     das sonst grün bliebe. */
  --lobby-header: #d61f82;
  /* Weicher Übergang unter dem Header (.lobby-Hintergrundverlauf): Standardwert
     ist grün getönt (#dbe9d1) und ergäbe sonst einen grünlichen Streifen unter
     dem magenta Header. Auf einen hellen Rosé-Ton setzen, der in --lobby-bg
     (#fbeef4) ausläuft. */
  --lobby-header-fade: #f6dced;
  /* Restliche marken-GRÜNEN Töne auf Pink/Rosé, damit im TTS-Kontext nirgends
     Grün durchschlägt (grüner Text/Icons, grün getönte Flächen + Ränder,
     Bild-Platzhalter ohne Bild). NICHT angefasst: die semantischen Zustands-
     farben (ok/warn/danger) — deren Grün trägt Bedeutung (Ampel) und bleibt. */
  --lobby-brand-text: #a1145f;
  --lobby-brand-soft: #fbe3ef;
  --lobby-brand-soft-border: #f2b6d5;
  --lobby-brand-border: rgba(214,31,130,.35);
  --lobby-media-bg: #f6dced;
  --lobby-placeholder: linear-gradient(135deg, #f6dced, #eab3d3);
  /* Text-Tokens: seit „Dunkel = Standard" (:root:not([data-theme="light"]))
     liefern diese sonst fast-weiße Werte (#e7efe0 / #a3b39a) — auf den hellen
     TTS-Flächen (#fbeef4 / #ffffff) unlesbar. Hier auf dunkle Marken-Töne, damit
     ALLE TTS-Seiten (Series, Rangliste, Auth) lesbaren Text erben. Kontrast auf
     #fff/#fbeef4: #2a0d1c ≥ 15:1, #7a4560 ≥ 5:1. */
  --lobby-text: #2a0d1c;
  --lobby-text-muted: #7a4560;
  --lobby-neutral: #a06a85;
  /* Flächen-/Rand-Tokens: blieben sonst dunkel (Dark-Standard) und stünden auf
     dem hellen TTS-Grund. Auf helle Rosé-Töne, damit auch künftig hier gerenderte
     geteilte Klassen (Karten-Flächen, Ränder, Spinner-Ring) nicht brechen. */
  --lobby-surface-2: #f7e6f0;
  --lobby-border: #f2d3e4;
  --lobby-border-strong: #e6b8d1;
  --lobby-glass: rgba(255, 255, 255, .94);
  /* Fehler-/danger-Tokens: der Dark-Standard (dunkelbrauner Grund #3b1c1c) stünde
     auf den hellen TTS-Flächen und macht z. B. die Login-Fehlermeldung
     (.lobby-form-error) kaum lesbar. Auf die hellen Light-Werte zurücksetzen —
     dunkelroter Text auf hellrotem Grund, klarer Kontrast auf #fff/#fbeef4. */
  --lobby-danger: #dc2626;
  --lobby-danger-soft: #fef2f2;
  --lobby-danger-text: #b91c1c;
  --lobby-danger-border: #fecaca;
}
/* „Etappen-Rangliste ansehen"-Link: schwarz statt Marken-Grün. Gezielt nur auf
   .challenge-infolink, damit die übrigen magenta Werte/Icons (die ebenfalls
   --lobby-brand-text nutzen) unberührt bleiben. */
body.tts-theme .challenge-infolink { color: #111; }
/* Ranglisten-Links pro Etappe („Etappen-Rangliste" via data-stage-lb,
   „Zielzeit-Rangliste" via data-stage-target-lb): als Soft-Button darstellen —
   gleiche Optik wie „Etappe ansehen" (.lobby-btn--soft). Die übrigen Info-Links
   („Video ansehen", „Alle Ranglisten ansehen") bleiben schlichte Textlinks. */
body.tts-theme .challenge-infolink[data-stage-lb],
body.tts-theme .challenge-infolink[data-stage-target-lb] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 8px 16px;
  background: #fbe3ef;
  border: 1.5px solid #f2b6d5;
  border-radius: 999px;
  color: #a1145f;
  font-weight: 700;
  text-decoration: none;
}
body.tts-theme .challenge-infolink[data-stage-lb]:hover,
body.tts-theme .challenge-infolink[data-stage-target-lb]:hover {
  background: #f7d3e6;
  text-decoration: none;
}
/* Harte Farben in den fest-*-Ergänzungen der Series-Seite scopen. */
body.tts-theme .fest-card { background: #ffffff; border-color: rgba(142,26,99,.14); }
body.tts-theme .fest-stage-name,
body.tts-theme .fest-section-title { color: #6f0e42; }
/* Filter-Selects der Gesamtwertung: setzen inline weder Fläche noch Textfarbe
   (trail-trophy.html .fest-filters) → der Browser rendert sie im Dark-Standard
   (color-scheme:dark) schwarz. Im TTS als Marken-Pill: pinke Fläche + weißer,
   lesbarer Text (wie die Primär-Buttons #d61f82/#fff). color-scheme:light hält
   den Dropdown-Pfeil/Innenraum hell. */
body.tts-theme .fest-filters select {
  background: #d61f82;
  color: #ffffff;
  border: 1px solid #a1145f;
  color-scheme: light;
  font-weight: 700;
}
/* Registrierungs-Felder (Freitext/Auswahl): helle Fläche, dunkler Marken-Text —
   hier ist Lesbarkeit beim Tippen wichtiger als der Marken-Ton. */
body.tts-theme .fest-fld select,
body.tts-theme .fest-fld input {
  background: #ffffff;
  color: #2a0d1c;
  border-color: #e6b8d1;
  color-scheme: light;
}
/* Primär-Buttons: Pink mit weißem Text (wie Homepage). */
body.tts-theme .lobby-btn--primary { background: #d61f82; color: #fff; }
body.tts-theme .lobby-btn--primary:hover { background: #e0218a; }
/* Soft-Button ("Etappe ansehen" u. ä.): lobby.css nutzt hier hartcodiertes Grün. */
body.tts-theme .lobby-btn--soft {
  background: #fbe3ef;
  border-color: #f2b6d5;
  color: #a1145f;
}
body.tts-theme .lobby-btn--soft:hover { background: #f7d3e6; }
/* Ausgewählte Radios/Checkboxen: Browser-Default ist Blau. Im TTS-Kontext auf
   Pink. Deckt auch die .fest-*-Formulare ab, die keine eigene accent-color haben. */
body.tts-theme input[type="radio"],
body.tts-theme input[type="checkbox"] { accent-color: #d61f82; }
/* Etappen-Status „kommt bald": Standard-Pill ist gelb. Im TTS-Kontext kräftiges
   Voll-Pink mit weißem Text (deutlich sichtbar, im Marken-Ton).
   (Die anderen Zustände: --open ist bereits pink; --locked/--closed bleiben als
   klar unterscheidbare Neutraltöne.) */
body.tts-theme .fest-pill--soon { background: #d61f82; color: #fff; }
/* Live-Countdowns (Etappe/Event/Rangliste): dezenter Magenta-Chip. */
body.tts-theme .tts-countdown-row { margin: 2px 0 6px; }
body.tts-theme .tts-countdown {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(214,31,130,.12);
  color: #a1145f;
  font-weight: 700;
  font-size: .86rem;
}
/* Event-Countdown im Hero: auf dem dunklen Bild-Overlay hell/transluzent. */
body.tts-theme .tts-event-countdown { margin-top: 8px; }
body.tts-theme .tts-event-countdown .tts-countdown {
  background: rgba(255,255,255,.9);
  color: #a1145f;
}
/* Rangliste-Sperr-Hinweis mit Countdown: klar sichtbar, Marken-Ton. */
body.tts-theme .lb-countdown {
  color: #6f0e42;
  font-weight: 600;
}
body.tts-theme .lb-countdown .tts-countdown { margin: 0 2px; }
/* GPX-Download-Button: Soft-Button-Look genügt (erbt aus .lobby-btn--soft),
   nur etwas Abstand nach oben. */
body.tts-theme .tts-gpx-btn { display: inline-block; }
/* „Zielzeit-Wertung verwalten": aufklappbarer Bereich. Das <summary> nutzt den
   Soft-Button-Look; das Default-Dreieck ausblenden. */
body.tts-theme .fest-target-manage > summary { display: inline-block; }
body.tts-theme .fest-target-manage > summary::-webkit-details-marker { display: none; }
body.tts-theme .fest-target-manage > summary::marker { content: ''; }
/* Drei Zielzeit-Felder (Std/Min/Sek): kompakt, im Marken-Ton. */
body.tts-theme .fest-target-fields .lobby-input { border-color: #f2b6d5; }
body.tts-theme .fest-target-fields .lobby-input:focus { border-color: #d61f82; }
/* Zwischenstand-Hinweis über der Gesamtwertung. */
body.tts-theme .lb-progress {
  margin: 0 0 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(214,31,130,.1);
  color: #6f0e42;
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
}
/* Urkunde-Hinweis (Gesamtwertung, Series-Seite): wie .lb-progress, aber als
   weichere Info-Zeile mit etwas mehr Zeilenhöhe (längerer Text). */
body.tts-theme .lb-cert-note {
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.35;
  padding: 8px 14px;
}
/* „Im Ziel"-Liste (laufende Etappe): Hinweiszeile + Magenta-Häkchen-Badge. */
body.tts-theme .lb-finish-note {
  margin: 12px 0 8px;
  color: #6f0e42;
  font-weight: 600;
  font-size: .9rem;
}
body.tts-theme .lb-finish-cell { text-align: right; }
body.tts-theme .lb-finish-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(214,31,130,.14);
  color: #d61f82;
  font-weight: 700;
  font-size: .84rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lobby-bg);
  color: var(--lobby-text);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

.lobby {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Weicher Übergang unter dem Header: der Grund beginnt im Header-Ton und
     läuft über 260px in den eigentlichen Grund aus. Scrollt mit dem Inhalt —
     beim Scrollen sitzt der sticky Header wieder klar auf dem Grund. */
  background: linear-gradient(180deg, var(--lobby-header-fade) 0, var(--lobby-bg) 260px) no-repeat;
}

/* ── Header ─────────────────────────────────────────── */
.lobby-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  background: var(--lobby-header);
  color: var(--lobby-on-brand);
}

/* Startseite: Avatar links, Logo mittig, Aktionen rechts. Drei feste Spalten mit
   expliziter Zuordnung, damit das Logo auch bei leerem linken Slot (ausgeloggt)
   zentriert bleibt — bei Auto-Platzierung rutschte die Marke sonst nach links. */
.lobby-header--centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.lobby-header--centered .lobby-header-left    { grid-column: 1; justify-self: start; }
.lobby-header--centered .lobby-header-brand   { grid-column: 2; }
.lobby-header--centered .lobby-header-actions { grid-column: 3; justify-self: end; }

/* Linke Spalte: Avatar + Teilnahme-Puck nebeneinander (zusammen so breit wie
   die zwei Aktions-Buttons rechts, damit die Marke mittig bleibt). */
.lobby-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Avatar-Slot: 40px-Tap-Ziel, Bild oder Initiale darin. */
.lobby-header-user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--lobby-on-brand);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lobby-header-user[hidden] { display: none; }

.lobby-header-avatar {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--lobby-ring);
  background: var(--lobby-surface);
  box-sizing: border-box;
}
.lobby-header-avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lobby-brand-soft);
  color: var(--lobby-brand-text);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
}

.lobby-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* Schnelles Mehrfachtippen (versteckter Diagnose-Zugang, 5x) darf auf iOS
     weder Text markieren noch das Bild-Kontextmenue oeffnen. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.lobby-header-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  /* Dezenter heller Rahmen, damit sich das Up2you-Arena-Logo vom
     gleichfarbig gruenen Header abhebt. */
  border: 1px solid var(--lobby-ring);
  box-sizing: border-box;
  background: #fff;
}

.lobby-header-title {
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Header-Aktionen rechts (lobby-header.js) ─────────────────
   Aktualisieren · Glocke mit Zähler. Weiße Line-Icons per Mask
   (icons/refresh.svg, icons/bell.svg), 40px-Tap-Ziele, kein Rahmen —
   der Header bleibt ruhig, wie bei Garmin Connect. */
.lobby-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.lobby-header-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--lobby-on-brand);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.lobby-header-btn:hover,
.lobby-header-btn:focus-visible { background: var(--lobby-on-brand-hover); }
.lobby-header-btn:disabled { cursor: default; }
.lobby-header-btn[hidden] { display: none; }

.lobby-header-icon {
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.lobby-header-icon--refresh { -webkit-mask-image: url(icons/refresh.svg); mask-image: url(icons/refresh.svg); }
.lobby-header-icon--bell    { -webkit-mask-image: url(icons/bell.svg);    mask-image: url(icons/bell.svg); }

/* Läuft die Aktualisierung, dreht sich das Icon (Keyframes lobby-spin, s. u.). */
.lobby-header-actions.is-refreshing .lobby-header-icon--refresh {
  animation: lobby-spin .8s linear infinite;
}

/* Zähler ungelesener Meldungen: roter Punkt mit Zahl, grüner Ring trennt ihn vom Icon. */
.lobby-header-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1.5px solid var(--lobby-green);
  background: var(--lobby-danger);
  color: var(--lobby-on-brand);
  font-size: .62rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.lobby-header-badge[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lobby-header-actions.is-refreshing .lobby-header-icon--refresh { animation: none; opacity: .5; }
}

/* ── Buttons ────────────────────────────────────────── */
.lobby-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}

/* hidden-Attribut muss auch gegen display:inline-flex gewinnen. */
.lobby-btn[hidden] { display: none; }

.lobby-btn--primary {
  background: #fff;
  color: var(--lobby-green-dark);
}

.lobby-btn--primary:hover { background: #f1f5f9; }

.lobby-btn--ghost {
  background: transparent;
  color: var(--lobby-on-brand);
  border-color: var(--lobby-ring);
}

.lobby-btn--ghost:hover { background: var(--lobby-on-brand-hover); }

/* In Hinweis-Karten steht der Primary-Button auf hellem Grund */
.lobby-locked-hint .lobby-btn--primary {
  background: var(--lobby-green);
  color: var(--lobby-on-brand);
}
.lobby-locked-hint .lobby-btn--primary:hover { background: var(--lobby-green-dark); }

/* ── Main / Hero ────────────────────────────────────── */
.lobby-main {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  /* Unten Platz für die fixierte Tab-Bar (Höhe + Safe-Area). */
  padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 84px);
}

/* ── Wortmarke im Header: Logo + „Up2you Arena" in Weiß, zwei Gewichte ──
   „Up2you" halbfett, „Arena" fett — liest sich als Marke, nicht als Beschriftung. */
.lobby-header-wordmark {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--lobby-on-brand);
}
.lobby-header-wordmark-light { font-weight: 500; }

/* ── Teilnahme-Puck im Header (nur eingeloggt, nur mit Teilnahmen) ────
   Zahl der aktiven Challenges in der Formsprache des Aktivitäts-Markers auf
   der Karte: weißer Kern mit Zahl, gestrichelter Orbit-Ring, Puls-Ring.
   Bewegung ausschließlich über transform/opacity — der Compositor rechnet
   sie ohne Layout und ohne Neuzeichnen der Seite. Der Puls läuft nur mit
   Modifier --active (heute gilt eine Station), sonst steht der Puck still. */
.lobby-header-count {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lobby-header-count[hidden] { display: none; }

.lobby-puck-core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--lobby-green-dark);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lobby-puck-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .7);
  animation: lobby-puck-orbit 14s linear infinite;
}

.lobby-puck-pulse {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  opacity: 0;
}
.lobby-header-count--active .lobby-puck-pulse {
  animation: lobby-puck-pulse 2.2s ease-out infinite;
}

@keyframes lobby-puck-orbit { to { transform: rotate(360deg); } }
@keyframes lobby-puck-pulse {
  0%   { transform: scale(.8);  opacity: .9; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-puck-orbit,
  .lobby-header-count--active .lobby-puck-pulse { animation: none; }
}

/* Offenes Panel: Orbit-Ring wächst und wird durchgezogen — der Puck ist dann
   sichtbar ein Schalter, kein Sprunganker. */
.lobby-header-count[aria-expanded="true"] .lobby-puck-orbit {
  transform: scale(1.12);
  border-style: solid;
}
.lobby-header-count .lobby-puck-orbit { transition: transform .26s var(--lobby-ease); }

/* ── Teilnahmen-Panel unter dem Header (PO 2026-09-13) ───
   Der Puck klappt eine Übersicht der aktiven Teilnahmen auf: Summenzeile,
   eine Zeile je Challenge mit Stand, Fuß mit Link auf die vollständige Liste.
   Alle Daten kommen aus dem bereits geladenen Lobby-Vorrat — kein Abruf.
   Das Sheet schiebt sich hinter dem Header hervor (translateY), der Scrim
   darunter fängt Tipps daneben ab. */
.lobby-panel {
  position: sticky;
  top: 0;
  z-index: 9;                      /* unter dem Header (10), über dem Inhalt */
  height: 0;                       /* schiebt den Seiteninhalt nicht */
}
.lobby-panel[hidden] { display: none; }

.lobby-panel-sheet {
  position: relative;
  z-index: 2;
  background: var(--lobby-surface);
  border-bottom: 1px solid var(--lobby-border);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
  transform: translateY(-101%);
  transition: transform .26s var(--lobby-ease);
}
.lobby-panel.is-open .lobby-panel-sheet { transform: translateY(0); }

/* Abdunklung: beginnt unter dem Sheet, deckt den Rest der Seite ab. */
.lobby-panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--lobby-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s var(--lobby-ease);
}
.lobby-panel.is-open .lobby-panel-scrim { opacity: 1; pointer-events: auto; }

.lobby-panel-sum {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);   /* minmax(0,…): Zellen dürfen schrumpfen */
  gap: 6px;
  padding: 12px 16px 10px;
}
.lobby-panel-sum-cell { text-align: center; min-width: 0; overflow: hidden; }
.lobby-panel-sum-cell b {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.lobby-panel-sum-cell span {
  display: block;
  margin-top: 2px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lobby-text-muted);
}

/* Ab PANEL_SCROLL_FROM Zeilen scrollt die Liste innen, statt die Seite zu füllen. */
.lobby-panel-list--scroll {
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lobby-panel-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--lobby-border);
  background: transparent;
  color: var(--lobby-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lobby-panel-row:hover { background: var(--lobby-surface-2); }

/* Sportart als Symbol. Wie auf den Karten per Maske eingefärbt — ein
   background-image bliebe schwarz und würde im Dunkelmodus verschwinden. */
.lobby-panel-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--lobby-brand-soft);
}
.lobby-panel-icon--hiking::after,
.lobby-panel-icon--cycling::after,
.lobby-panel-icon--running::after,
.lobby-panel-icon--skiing::after {
  content: "";
  position: absolute;
  inset: 7px;
  background-color: var(--lobby-brand-text);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.lobby-panel-icon--hiking::after  { -webkit-mask-image: url(icons/hiking.svg);  mask-image: url(icons/hiking.svg); }
.lobby-panel-icon--cycling::after { -webkit-mask-image: url(icons/cycling.svg); mask-image: url(icons/cycling.svg); }
.lobby-panel-icon--running::after { -webkit-mask-image: url(icons/running.svg); mask-image: url(icons/running.svg); }
.lobby-panel-icon--skiing::after  { -webkit-mask-image: url(icons/skiing.svg);  mask-image: url(icons/skiing.svg); }

.lobby-panel-body { min-width: 0; }
.lobby-panel-title {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-panel-stat {
  display: block;
  margin-top: 1px;
  font-size: .74rem;
  color: var(--lobby-text-muted);
}
.lobby-panel-stat b { color: var(--lobby-brand-text); font-weight: 700; }

.lobby-panel-today {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lobby-warn-soft);
  color: var(--lobby-warn-text);
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
}
.lobby-panel-chevron { color: var(--lobby-text-muted); font-size: 1.1rem; line-height: 1; }

.lobby-panel-all {
  display: block;
  padding: 11px 16px calc(env(safe-area-inset-bottom, 0px) + 11px);
  border-top: 1px solid var(--lobby-border);
  color: var(--lobby-brand-text);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.lobby-panel-all:hover { background: var(--lobby-surface-2); }

/* Zeilen-Symbole ohne Sportart (Ziel-Sheet „Aufzeichnen für / Scannen für"):
   dieselbe Maskentechnik, Formen aus dem Line-Icon-Satz. */
.lobby-panel-icon--qr::after,
.lobby-panel-icon--record::after {
  content: "";
  position: absolute;
  inset: 7px;
  background-color: var(--lobby-brand-text);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.lobby-panel-icon--qr::after     { -webkit-mask-image: url(../assets/img/icons/mobile-line/qr.svg);     mask-image: url(../assets/img/icons/mobile-line/qr.svg); }
.lobby-panel-icon--record::after { -webkit-mask-image: url(../assets/img/icons/mobile-line/record.svg); mask-image: url(../assets/img/icons/mobile-line/record.svg); }

/* ── Ziel-Sheet „Für welche Challenge?" (Footer Aufzeichnen / Scannen) ──
   Nutzt die Zeilen des Teilnahmen-Panels im Bottom-Sheet des Menüs. Die
   Liste geht bis an die Sheet-Ränder, damit die Trennlinien durchlaufen. */
.lobby-target-sheet { text-align: left; }
.lobby-target-list {
  margin: 4px -12px 0;
  border-bottom: 1px solid var(--lobby-border);
}
.lobby-target-list--scroll {
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lobby-target-list .lobby-panel-stat {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Link unter der Sportwahl, wenn keine passende Teilnahme da ist. */
.lobby-target-link {
  display: block;
  padding: 14px 4px 0;
  color: var(--lobby-brand-text);
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .lobby-panel-sheet,
  .lobby-panel-scrim,
  .lobby-header-count .lobby-puck-orbit { transition: none; }
}

/* ── Funktionszeilen (nur ausgeloggt) ────────────────────
   Eine Zeile, was die Arena ist, dann drei Zeilen Icon + Stichwort + Halbsatz.
   Bewusst kein Karten-Look und kein Verlauf: erklärt, wirbt nicht. Icons sind
   die geteilten Line-Icons, per Mask in Markengrün eingefärbt. */
.lobby-valueprops-lead {
  margin: 0 0 4px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--lobby-text);
  line-height: 1.4;
}

.lobby-valueprops {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 24px;
  padding: 14px 16px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
}

.lobby-valueprop {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--lobby-text-muted);
}
.lobby-valueprop b { color: var(--lobby-text); font-weight: 700; }

.lobby-valueprop-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: var(--lobby-green);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.lobby-valueprop-icon--record  { -webkit-mask-image: url(../assets/img/icons/mobile-line/record.svg);  mask-image: url(../assets/img/icons/mobile-line/record.svg); }
.lobby-valueprop-icon--collect { -webkit-mask-image: url(../assets/img/icons/mobile-line/trophy.svg);  mask-image: url(../assets/img/icons/mobile-line/trophy.svg); }
.lobby-valueprop-icon--compare { -webkit-mask-image: url(../assets/img/icons/mobile-line/chart.svg);   mask-image: url(../assets/img/icons/mobile-line/chart.svg); }

/* ── Freie Aufzeichnung (Auswahl-Sheet) ─────────────────
   Der Einstieg liegt jetzt als Tab „Aufzeichnen" in der unteren Leiste;
   beim Tap öffnet dieses Sheet die Aktivitätsauswahl. */
.lobby-freerec-sheet-title {
  margin: 4px 4px 4px;
  font-size: 1.15rem;
}

/* Untertitel in Sheets: eine Zeile, die sagt, was hier passiert. */
.lobby-sheet-sub {
  margin: 0 4px 16px;
  font-size: .88rem;
  color: var(--lobby-text-muted);
}

/* Aktivitäts-Auswahl: ruhige Karten in einer Reihe, große Tap-Ziele in der
   Thumb-Zone. Bewusst icon-basiert (kein Emoji) für plattformübergreifende
   Konsistenz — ein wiederverwendbarer Baustein des Design-Systems. */
.lobby-freerec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 4px 4px;
}

.lobby-freerec-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 116px;
  padding: 18px 8px;
  border: 1px solid var(--lobby-border);
  border-radius: 20px;
  background: var(--lobby-surface);
  color: var(--lobby-text);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s cubic-bezier(.2, .8, .2, 1),
              border-color .16s ease,
              box-shadow .16s ease,
              background .16s ease;
  /* Funktionales Motion Design: gestaffeltes Eintreten der Karten. */
  opacity: 0;
  transform: translateY(8px);
}

.lobby-menu.is-open .lobby-freerec-card {
  opacity: 1;
  transform: translateY(0);
  transition: transform .14s cubic-bezier(.2, .8, .2, 1),
              border-color .16s ease,
              box-shadow .16s ease,
              background .16s ease,
              opacity .34s ease calc(var(--i) * 55ms + 80ms);
}

@media (hover: hover) {
  .lobby-freerec-card:hover {
    border-color: var(--lobby-brand-border);
    transform: translateY(-4px);
    box-shadow: var(--lobby-shadow-lift), var(--lobby-glow);
  }
}

/* Tap-Feedback: deutlich, aber dezent — leitet visuell statt nur zu dekorieren. */
.lobby-freerec-card:active {
  transform: scale(.96);
  background: var(--lobby-brand-soft);
  border-color: var(--lobby-green);
}

.lobby-freerec-card-iconwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--lobby-brand-soft);
  color: var(--lobby-brand-text);
}

/* SVG via Mask eingefärbt: die Datei liefert nur die Form, die Farbe kommt aus
   --lobby-green. So bleibt ein Icon-Tausch trivial und farblich konsistent. */
.lobby-freerec-card-icon {
  display: block;
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.lobby-freerec-card-label {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Sehr schmale Screens: Labels minimal kleiner, damit nichts umbricht. */
@media (max-width: 360px) {
  .lobby-freerec-grid { gap: 8px; }
  .lobby-freerec-card { padding: 16px 4px; }
  .lobby-freerec-card-label { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-freerec-card,
  .lobby-menu.is-open .lobby-freerec-card {
    opacity: 1;
    transform: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  }
}

/* ── Sektionen + Grid ───────────────────────────────── */
/* overflow-x: clip als Schutznetz gegen horizontales Seiten-Scrollen (z. B.
   durch nicht umbrechende Inhalte). Das Aktivitäten-Karussell läuft seit
   30.08. ohne negativen Rand, braucht das Clipping also nicht mehr selbst. */
.lobby-section {
  margin-bottom: 28px;
  overflow-x: clip;
}

.lobby-section-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Untertitel direkt unter einem Sektionstitel (rückt an ihn heran). */
.lobby-section-sub {
  margin: -8px 0 12px;
  font-size: .85rem;
  color: var(--lobby-text-muted);
}

/* Sektions-Kopf mit Titel links und Aktions-Link rechts („Alle ansehen ›"). */
.lobby-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.lobby-section-link {
  flex-shrink: 0;
  margin-bottom: 12px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--lobby-brand-text);
  text-decoration: none;
}
.lobby-section-link:hover { text-decoration: underline; }

/* ── Challenge-Karten (lobby-challenges.js) ───────────────────────────
   Zwei Formen aus einem Bausatz:
     .lobby-grid  → Raster-Karten: Bild 16:10, Titel, Faktenzeilen
                    (Sportarten, Preis, Zugang, Plätze). Handy 2 Spalten, ab 560px 3.
     .lobby-stack → breite Karten für laufende Teilnahmen: Bild links,
                    Stand (km · Punkte) + Meta rechts, Start-Knopf am Rand.
   Die Up2you-Grün-Farbwelt bleibt; Akzent-Streifen/Hover wie bisher. */
.lobby-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 0 8px;                    /* 4px oben für Hover-Lift-Raum */
}
@media (min-width: 560px) {
  .lobby-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lobby-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
}

.lobby-challenge {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 0;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  box-shadow: var(--lobby-shadow);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--lobby-ease), box-shadow .25s var(--lobby-ease),
              border-color .25s var(--lobby-ease);
}

/* Akzent-Streifen oben in Up2you-Grün — blendet beim Hover sanft ein. */
.lobby-challenge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lobby-accent-line);
  opacity: 0;
  transition: opacity .25s var(--lobby-ease);
  z-index: 3;
  pointer-events: none;
}

@media (hover: hover) {
  .lobby-challenge:hover {
    transform: translateY(-3px);
    border-color: var(--lobby-brand-border);
    box-shadow: var(--lobby-shadow-lift), var(--lobby-glow);
  }
  .lobby-challenge:hover::before { opacity: 1; }
}
.lobby-challenge:active { transform: translateY(-1px); }
.lobby-challenge:focus-visible { outline: 2px solid var(--lobby-green-dark); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lobby-challenge { transition: box-shadow .2s ease, border-color .2s ease; }
  .lobby-challenge:hover { transform: none; }
}

/* Hervorhebung nach Rückkehr aus der Arena (?event=<slug>): kurzer Puls. */
.lobby-challenge--returned { animation: lobby-challenge-return 1.8s ease-out 1; }
@keyframes lobby-challenge-return {
  0%, 100% { box-shadow: var(--lobby-shadow); }
  20%, 60% { box-shadow: 0 0 0 3px var(--lobby-green), var(--lobby-shadow-lift); }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-challenge--returned { animation: none; box-shadow: 0 0 0 3px var(--lobby-green); }
}

/* Bildfläche: 16:10, Foto formatfüllend; Logos (Serien) eingepasst auf Weiß. */
.lobby-challenge-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--lobby-media-bg);
  overflow: hidden;
}
.lobby-challenge-media--placeholder { background: var(--lobby-placeholder); }
.lobby-challenge-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.lobby-challenge-img--contain { object-fit: contain; background: var(--lobby-surface); padding: 6px; box-sizing: border-box; }

/* Etiketten oben links auf dem Bild: Dabei, Empfohlen, Testphase, Beendet, Serie. */
.lobby-challenge-tags {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 16px);
}
.lobby-challenge-tag {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--lobby-glass);
  color: var(--lobby-text);
}
.lobby-challenge-tag--green  { background: var(--lobby-green); color: var(--lobby-on-brand); }
.lobby-challenge-tag--orange { background: var(--lobby-warn); color: var(--lobby-on-brand); }
.lobby-challenge-tag--grey   { background: var(--lobby-surface-2); color: var(--lobby-text-muted); }

.lobby-challenge-body { padding: 9px 10px 10px; min-width: 0; }

.lobby-challenge-title {
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Faktenzeilen: Sportart-Icons, dann Text-Teile, getrennt durch Punkte. */
.lobby-challenge-facts {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  font-size: .74rem;
  color: var(--lobby-text-muted);
  font-variant-numeric: tabular-nums;
}
.lobby-challenge-facts + .lobby-challenge-facts { margin-top: 2px; }
.lobby-challenge-dot::before { content: '·'; }
.lobby-challenge-sports { display: inline-flex; gap: 2px; }
.lobby-challenge-sport {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: var(--lobby-green);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.lobby-challenge-sport--hiking  { -webkit-mask-image: url(icons/hiking.svg);  mask-image: url(icons/hiking.svg); }
.lobby-challenge-sport--cycling { -webkit-mask-image: url(icons/cycling.svg); mask-image: url(icons/cycling.svg); }
.lobby-challenge-sport--running { -webkit-mask-image: url(icons/running.svg); mask-image: url(icons/running.svg); }
.lobby-challenge-sport--skiing  { -webkit-mask-image: url(icons/skiing.svg);  mask-image: url(icons/skiing.svg); }

/* Breite Karte: laufende Teilnahme. */
.lobby-challenge--wide {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-left: 3px solid var(--lobby-green);
}
.lobby-challenge--wide .lobby-challenge-media { width: 96px; height: 96px; aspect-ratio: auto; }
.lobby-challenge--wide .lobby-challenge-tags { display: none; } /* Status steht rechts im Text */
.lobby-challenge--wide .lobby-challenge-body { padding: 10px 12px 10px 0; }
.lobby-challenge--wide .lobby-challenge-title { font-size: .95rem; margin-bottom: 4px; }
.lobby-challenge-stat {
  font-size: .82rem;
  color: var(--lobby-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}
.lobby-challenge-stat b { color: var(--lobby-text); font-weight: 700; }
.lobby-challenge-meta { font-size: .74rem; color: var(--lobby-text-muted); }

/* Zustände */
.lobby-challenge--joined { border-color: var(--lobby-green); }
.lobby-challenge--done .lobby-challenge-media { filter: grayscale(.6); opacity: .8; }
.lobby-challenge--scc { border-color: var(--lobby-brand-border); }
.lobby-challenge--scc::before { opacity: 1; }
/* Angepinnte Challenge (Deep-Link/QR, ?pin=<slug>): voller grüner Ring, kein Puls —
   sie ist der Grund des Besuchs, kein Ereignis. */
.lobby-challenge--pinned {
  border-color: var(--lobby-green);
  box-shadow: 0 0 0 2px var(--lobby-green), var(--lobby-shadow-lift);
}
.lobby-challenge--pinned::before { opacity: 1; }

/* ── Listenseite „Challenges" (challenges.html) ───────────────── */
.challenges-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0 0 12px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  color: var(--lobby-text-muted);
  transition: border-color .12s;
}
.challenges-search:focus-within { border-color: var(--lobby-green); }
.challenges-search-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box;
}
.challenges-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;          /* unter 16px zoomt iOS beim Fokus in die Seite */
  color: var(--lobby-text);
}
.challenges-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Chips: eine wischbare Reihe; pan-x hält das vertikale Scrollen der Seite frei. */
.challenges-chips {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.challenges-chips::-webkit-scrollbar { display: none; }
.challenges-chip {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--lobby-border);
  background: var(--lobby-surface);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--lobby-text);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.challenges-chip[aria-pressed="true"] { background: var(--lobby-green); border-color: var(--lobby-green); color: var(--lobby-on-brand); }
.challenges-chip:focus-visible { outline: 2px solid var(--lobby-green-dark); outline-offset: 2px; }

.challenges-sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 8px;
  font-size: .8rem;
  color: var(--lobby-text-muted);
}
.challenges-sort-select select {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--lobby-text);
  cursor: pointer;
}
.challenges-more { display: flex; justify-content: center; margin: 16px 0 8px; }
.challenges-more .lobby-btn { min-width: 160px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── „Heute aktiv": Stationen des Tages (Modul Aktionen & Stationen) ──
   Listenkarten statt Foto-Kacheln: hier zählt der Text (was, wofür, wie
   viele Punkte) und der Scan-Knopf — kein Bild, keine Karte. */
.lobby-today {
  display: grid;
  gap: 10px;
}

.lobby-today-card {
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-left: 4px solid var(--lobby-green);
  border-radius: var(--lobby-radius);
  box-shadow: var(--lobby-shadow);
  padding: 12px 14px;
}

/* Erledigt: bleibt sichtbar (Bestätigung), tritt aber zurück. */
.lobby-today-card--done {
  border-left-color: var(--lobby-neutral);
  opacity: .78;
}

.lobby-today-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.lobby-today-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--lobby-text);
}

.lobby-today-points {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--lobby-green);
  color: var(--lobby-on-brand);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.lobby-today-card--done .lobby-today-points { background: var(--lobby-neutral); }

.lobby-today-event {
  margin-top: 2px;
  font-size: .78rem;
  color: var(--lobby-text-muted);
}

.lobby-today-desc {
  margin: 8px 0 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--lobby-text);
}

.lobby-today-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.lobby-today-hint {
  font-size: .78rem;
  color: var(--lobby-text-muted);
}

.lobby-today-scan {
  border: none;
  border-radius: 999px;
  background: var(--lobby-green);
  color: var(--lobby-on-brand);
  font-weight: 600;
  font-size: .85rem;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.lobby-today-scan:hover { background: var(--lobby-green-dark); }

/* ── Status / Leer / Fehler ─────────────────────────── */
.lobby-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 16px;
  color: var(--lobby-text-muted);
  text-align: center;
}

.lobby-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--lobby-border);
  border-top-color: var(--lobby-green);
  border-radius: 50%;
  animation: lobby-spin .8s linear infinite;
}

@keyframes lobby-spin { to { transform: rotate(360deg); } }

.lobby-status--error { color: var(--lobby-danger-text); }

/* Nächster Schritt im Leer-/Fehlerzustand (showStatus mit action). */
.lobby-status-action { margin-top: 4px; }

/* ── Hinweis "geschlossene Challenges" ──────────────────
   Dezente, kompakte Zeile ganz unten (kein Karten-Look) — Mini-Schloss + gedeckter
   Text. Bewusst ohne Rahmen/Schatten, damit es sich der Anmeldung unterordnet. */
.lobby-locked-hint {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 4px 12px;
  color: var(--lobby-text-muted);
  font-size: .82rem;
}

/* Schloss als einfärbbares Mask-Icon (lock.svg) statt Emoji — konsistent über
   alle Plattformen, erbt die Hinweis-Farbe (--lobby-text-muted) via currentColor. */
.lobby-locked-hint-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url(icons/lock.svg) no-repeat center / contain;
          mask: url(icons/lock.svg) no-repeat center / contain;
}
.lobby-locked-hint p { margin: 0; }

/* ── Bottom-Tab-Bar ─────────────────────────────────── */
.lobby-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 4px;
  padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: var(--lobby-tabbar);
  border-top: 1px solid var(--lobby-border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}

.lobby-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  background: none;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  color: var(--lobby-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color .12s, background .12s;
}

.lobby-tab:hover { background: var(--lobby-surface-2); }
.lobby-tab.is-active { color: var(--lobby-brand-text); }

.lobby-tab-icon {
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── Menü-Bottom-Sheet ──────────────────────────────── */
.lobby-menu[hidden] { display: none; }

.lobby-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
}

.lobby-menu-overlay {
  position: absolute;
  inset: 0;
  background: var(--lobby-overlay);
  opacity: 0;
  transition: opacity .18s ease;
}

.lobby-menu-sheet {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  background: var(--lobby-surface);
  border-radius: 18px 18px 0 0;
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .22);
  transform: translateY(100%);
  transition: transform .22s ease;
}

.lobby-menu.is-open .lobby-menu-overlay { opacity: 1; }
.lobby-menu.is-open .lobby-menu-sheet { transform: translateY(0); }

/* Während der Finger zieht, folgt das Sheet direkt (ohne Transition) —
   sonst hinkt es der Geste hinterher. enableSheetSwipe() setzt die Klasse. */
.lobby-menu.is-dragging .lobby-menu-sheet { transition: none; }
.lobby-menu.is-dragging .lobby-menu-overlay { transition: none; }

/* Griff zum Herunterwischen. Die Trefferfläche ist bewusst größer als der
   sichtbare Balken (::before), damit die Geste auch mit dem Daumen sitzt. */
.lobby-menu-handle {
  position: relative;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--lobby-border-strong);
  margin: 8px auto 12px;
  cursor: grab;
  touch-action: none;
}

.lobby-menu-handle::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -40px;
  right: -40px;
}

.lobby-menu.is-dragging .lobby-menu-handle { cursor: grabbing; }

/* ── QR-Code-Scanner-Sheet ───────────────────────────── */
/* Das Sheet darf nie höher als der Schirm werden, sonst rutscht der
   Abbrechen-Button unter den Rand und die Kamera lässt sich nicht mehr
   schließen. Kopf (Titel) und Fuß (Status + Abbrechen) bleiben fix, die
   Kamera-Bühne dazwischen schrumpft. */
.lobby-scan-sheet {
  text-align: center;
  display: flex;
  flex-direction: column;
  max-height: 100dvh;
}

.lobby-scan-title {
  margin: 0 0 12px;
  text-align: center;
  flex: none;
}

/* Quadratische Bühne für das Kamerabild — vermeidet Layout-Sprünge,
   bevor der Videostream Maße liefert. Schrumpft bei knappem Platz. */
.lobby-scan-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 14px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  flex: 0 1 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--lobby-shadow-soft);
}

.lobby-scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dezenter Scan-Rahmen als Zielhilfe. */
.lobby-scan-stage::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 12px;
  pointer-events: none;
}

.lobby-scan-status {
  margin: 0 0 8px;
  font-size: .92rem;
  color: var(--lobby-text-muted);
  min-height: 1.2em;
  flex: none;
}
.lobby-scan-status--error { color: var(--lobby-danger-text); }

.lobby-scan-cancel {
  margin-top: 6px;
  flex: none;
}

/* Zweiter Ausstieg oben rechts: erreichbar, auch wenn der Fuß bei sehr
   kleinen Schirmen einmal zu weit unten landen sollte. */
.lobby-scan-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lobby-surface-2);
  color: var(--lobby-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lobby-scan-close:hover { background: var(--lobby-border-strong); }

.lobby-scan-result {
  margin: 4px auto 16px;
  max-width: 420px;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--lobby-text);
}
.lobby-scan-result--ok { color: var(--lobby-brand-text); font-weight: 600; }
.lobby-scan-result--error { color: var(--lobby-danger-text); }

/* ── Erfolgs-Sheet nach Scan/Check-in einer Station ────────────
   Häkchen-Kreis, Stationsname, Punkte groß; neue Abzeichen als Karte mit
   dem echten Bild (statt 🏅 im Fließtext); erledigte Aufgaben als Zeilen. */
.lobby-scan-hero { margin: 2px auto 14px; }

.lobby-scan-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--lobby-green);
  color: var(--lobby-on-brand);
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 122, 49, .28);
  animation: lobby-scan-pop .35s cubic-bezier(.2, .9, .3, 1.3);
}
.lobby-scan-hero--muted .lobby-scan-check { background: var(--lobby-neutral); box-shadow: none; animation: none; }

.lobby-scan-station { font-size: 1.05rem; font-weight: 700; color: var(--lobby-text); }

.lobby-scan-pts {
  margin-top: 4px;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--lobby-brand-text);
}

.lobby-scan-sub {
  max-width: 380px;
  margin: 6px auto 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--lobby-text-muted);
}

.lobby-scan-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 380px;
  margin: 0 auto 10px;
  padding: 12px 14px;
  text-align: left;
  background: var(--lobby-gold-soft);
  border: 1px solid var(--lobby-gold-border);
  border-radius: 14px;
}
.lobby-scan-badge img,
.lobby-scan-badge-fallback {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lobby-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.lobby-scan-badge-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lobby-gold-text); }
.lobby-scan-badge-title  { margin-top: 2px; font-size: 1.02rem; font-weight: 700; color: var(--lobby-text); }
.lobby-scan-badge-bonus  { margin-top: 2px; font-size: .85rem; font-weight: 600; color: var(--lobby-brand-text); }

.lobby-scan-quest { max-width: 380px; margin: 0 auto 8px; font-size: .92rem; color: var(--lobby-text); }
.lobby-scan-quest span { font-weight: 700; color: var(--lobby-brand-text); }

@keyframes lobby-scan-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.lobby-scan-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}

/* Stationen der gewählten Challenge unter der Kamera („Scannen für …").
   Scrollt innen, wenn die Kamera-Bühne den Platz braucht. */
.lobby-scan-stations {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 12px;
  border: 1px solid var(--lobby-border);
  border-radius: 14px;
  text-align: left;
}
.lobby-scan-stations-head {
  padding: 8px 12px 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lobby-text-muted);
}
.lobby-scan-stations-empty {
  margin: 0 0 12px;
  font-size: .85rem;
  color: var(--lobby-text-muted);
  flex: none;
}
.lobby-scan-station-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--lobby-border);
}
.lobby-scan-station-row--done { opacity: .6; }
.lobby-scan-station-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lobby-scan-station-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--lobby-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-scan-station-pts { font-size: .74rem; font-weight: 700; color: var(--lobby-brand-text); }
.lobby-scan-station-btn { flex: none; padding: 6px 12px; font-size: .8rem; }
.lobby-scan-station-hint,
.lobby-scan-station-done { flex: none; font-size: .78rem; color: var(--lobby-text-muted); }
.lobby-scan-station-done { color: var(--lobby-brand-text); font-weight: 700; }

.lobby-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--lobby-text);
  font-weight: 600;
  font-size: .98rem;
}

.lobby-menu-item:hover { background: var(--lobby-surface-2); }
.lobby-menu-item--danger { color: var(--lobby-danger-text); }

.lobby-menu-item-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── Unterseiten (Konto, Impressum, Datenschutz) ─────── */
.lobby-page {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
}

.lobby-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  color: var(--lobby-brand-text);
  font-weight: 700;
  text-decoration: none;
}

.lobby-card {
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius-lg);
  box-shadow: var(--lobby-shadow-soft);
  padding: 22px;
}

.lobby-page h1 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; }
.lobby-page h2 { margin: 22px 0 6px; font-size: 1.05rem; font-weight: 700; }
.lobby-page p,
.lobby-page li { line-height: 1.55; color: var(--lobby-text); }
.lobby-card a { color: var(--lobby-brand-text); font-weight: 600; }

/* Deutlich sichtbarer Platzhalter für noch fehlende Rechtstexte. */
.lobby-placeholder {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px dashed var(--lobby-warn);
  border-radius: 12px;
  background: var(--lobby-warn-soft);
  color: var(--lobby-warn-text);
  font-size: .9rem;
}

/* Schlankes Arena-Konto */
.lobby-account-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lobby-border);
}
.lobby-account-row:last-of-type { border-bottom: none; }
.lobby-account-label { color: var(--lobby-text-muted); }
.lobby-account-value { font-weight: 700; }

.lobby-btn--block {
  display: flex;
  width: 100%;
  margin-top: 18px;
}
.lobby-btn--danger {
  background: var(--lobby-danger-soft);
  color: var(--lobby-danger-text);
  border-color: var(--lobby-danger-border);
}
.lobby-btn--danger:hover { background: var(--lobby-danger-border); }

/* ── Anmeldung-Block (nur ausgeloggt) ───────────────────
   Zwei moderne, dezente Buttons untereinander statt einer Karte mit Zeilen.
   Anmelden = grün gefüllt (primär), Registrieren = umrandet (sekundär). */
.lobby-authcard { margin-bottom: 12px; }

/* Eine Zeile über den Buttons: wofür das Konto gebraucht wird. */
.lobby-authcard-note {
  margin: 0 0 10px;
  font-size: .85rem;
  color: var(--lobby-text-muted);
  text-align: center;
}

.lobby-authcard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lobby-authbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: var(--lobby-radius);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  transition: background-color .15s var(--lobby-ease), border-color .15s var(--lobby-ease);
}
.lobby-authbtn--primary {
  background: var(--lobby-green);
  color: var(--lobby-on-brand);
  border: 1.5px solid var(--lobby-green);
}
.lobby-authbtn--primary:hover { background: var(--lobby-green-dark); border-color: var(--lobby-green-dark); }
.lobby-authbtn--outline {
  background: var(--lobby-surface);
  color: var(--lobby-text);
  border: 1.5px solid var(--lobby-border);
}
.lobby-authbtn--outline:hover { border-color: var(--lobby-brand-text); color: var(--lobby-green); }

/* ── Auth-Formulare (Login / Registrierung) ─────────── */
.lobby-field { margin-bottom: 16px; }

.lobby-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: .92rem;
}

.lobby-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--lobby-border);
  border-radius: 12px;
  background: var(--lobby-surface-2);
  font-family: inherit;
  font-size: 1rem;
  color: var(--lobby-text);
}

.lobby-field input:focus {
  outline: none;
  border-color: var(--lobby-green);
  background: var(--lobby-surface);
}

.lobby-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: .92rem;
  line-height: 1.45;
  cursor: pointer;
}
.lobby-check input { margin-top: 3px; }
.lobby-check a { color: var(--lobby-brand-text); }

.lobby-btn--submit {
  background: var(--lobby-green);
  color: var(--lobby-on-brand);
}
.lobby-btn--submit:hover { background: var(--lobby-green-dark); }
.lobby-btn--submit:disabled { opacity: .6; cursor: wait; }

.lobby-form-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--lobby-danger-soft);
  border: 1px solid var(--lobby-danger-border);
  color: var(--lobby-danger-text);
  font-size: .9rem;
}

.lobby-form-success h2 { margin: 0 0 8px; font-size: 1.15rem; }
.lobby-form-success p { margin: 0 0 14px; }

/* ── E-Mail-Bestätigung (confirm.html) ──────────────── */
.lobby-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.lobby-confirm .lobby-spinner { margin-bottom: 4px; }
.lobby-confirm-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.lobby-confirm-title--ok { color: var(--lobby-brand-text); }
.lobby-confirm-title--error { color: var(--lobby-danger-text); }
.lobby-confirm-text { margin: 0 0 6px; color: var(--lobby-text-muted); }
.lobby-confirm #confirmAction { width: 100%; }

.lobby-form-intro {
  margin: 0 0 16px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--lobby-text-muted);
}

.lobby-field-hint {
  margin: 6px 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--lobby-text-muted);
}

.lobby-form-hint {
  margin: 16px 0 0;
  text-align: center;
  font-size: .92rem;
  color: var(--lobby-text-muted);
}
.lobby-form-hint a { color: var(--lobby-brand-text); font-weight: 700; }

/* ── Footer ─────────────────────────────────────────── */
.lobby-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 8px;
  color: var(--lobby-text-muted);
  font-size: .85rem;
}
.lobby-footer a {
  color: var(--lobby-text-muted);
  text-decoration: none;
}
.lobby-footer a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   Challenge-Infoseite (challenge.html / challenge.js)
   Eigenständige Seite vor der Streckenauswahl. Nutzt dieselben
   Variablen/Buttons wie die Lobby für ein konsistentes Bild.
   ════════════════════════════════════════════════════════════════ */

/* Zurück-Pfeil im Header (links neben dem Logo). */
.lobby-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 2px;
  border-radius: 50%;
  color: var(--lobby-on-brand);
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .12s;
}
.lobby-header-back:hover { background: var(--lobby-on-brand-hover); }
/* TTS-Header: Zurück-Pfeil bleibt weiß, aber dezent dicker (besser sichtbar auf
   dem pinken Header). Das ← ist ein Glyph — text-stroke verdickt die Kontur. */
body.tts-theme .lobby-header-back {
  font-weight: 700;
  -webkit-text-stroke: 0.6px currentColor;
}
/* Schwarzes TTS-Logo (arena-logo-black-192.png): transparente Ecken, daher KEINEN
   weißen Kachel-Hintergrund/Rahmen zeigen — das schwarze Icon steht direkt auf
   dem pinken Header. */
body.tts-theme .lobby-header-logo {
  background: transparent;
  border-color: transparent;
}

.challenge {
  display: block;
}

/* Über der fixierten Aktionsleiste Platz lassen. */
.challenge ~ .challenge-actionbar,
.lobby-main:has(.challenge:not(.hidden)) {
  /* Fallback ohne :has — Action-Bar ist fixiert, Main bekommt unten Luft. */
}

/* ── Hero (Bild + Titel-Overlay) ────────────────────── */
/* Kopf „Emblem" (PO 2026-09-13): flaches Markenband, Bild-Kachel ragt über
   die Bandkante, Titel daneben. Kein 16:10-Rahmen mehr, kein Titel auf dem
   Bild. Illustrationen auf Weiß werden zur Kachel mit Kante (Absicht statt
   harter Block), Fotos füllen die Kachel (--cover, per JS am Seitenverhältnis). */
.challenge-hero {
  margin: -20px -16px 0;          /* Band randlos bis an die Main-Kanten */
}

.challenge-hero-band {
  height: 72px;
  background: linear-gradient(180deg, var(--lobby-header), var(--lobby-green-dark));
}

.challenge-hero-head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 16px;
  margin-top: -56px;              /* Kachel beginnt 16px unter dem Header */
}

.challenge-hero-tile {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  padding: 8px;
  border-radius: 22px;
  background: #fff;               /* Konstante: Illustrationen liegen auf Weiß */
  box-shadow: var(--lobby-shadow-soft), 0 0 0 3px var(--lobby-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.challenge-hero-tile--cover { padding: 0; }
.challenge-hero-tile--placeholder {
  background: var(--lobby-accent-line);
  color: #fff;
  font-weight: 800;
  font-size: 2.4rem;
}

.challenge-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.challenge-hero-tile--cover .challenge-hero-img { object-fit: cover; }
/* TTS-Hero: das Logo oben ausrichten. Nur im TTS-Kontext. */
body.tts-theme .challenge-hero-img { object-position: top center; }

/* TTS-Hero: Titel „TTS Freistadt" + Countdown-Pille UNTER das Emblem stellen statt
   als Overlay darauf (sonst überschneiden sie sich). Nur im TTS-Kontext, damit
   normale Challenge-Heroes ihr Overlay-Layout behalten. */
body.tts-theme .challenge-hero:has(> .challenge-hero-overlay) {
  aspect-ratio: auto;         /* kein 16:10-Crop mehr — Bild + Titel stapeln frei */
  max-height: none;
  overflow: visible;
  background: var(--lobby-header);   /* Magenta-Grund unter Bild UND Titel */
}
body.tts-theme .challenge-hero > .challenge-hero-img {
  height: auto;
  max-height: 220px;          /* Emblem groß, aber begrenzt */
  padding-top: 10px;
}
body.tts-theme .challenge-hero-overlay {
  position: static;           /* raus aus der absoluten Überlagerung */
  background: none;           /* dunkler Verlauf entfällt (steht auf Magenta) */
  padding: 6px 16px 18px;     /* klarer Abstand zwischen Emblem und Titel */
}
body.tts-theme .challenge-hero-overlay .challenge-title {
  text-shadow: none;          /* auf glattem Magenta-Grund nicht nötig */
}

/* Altes Vollbild-Hero (Bild + Overlay-Titel): nutzt noch trail-trophy.js.
   Bleibt hier scoped erhalten, bis die Series-Seite nachzieht. */
.challenge-hero:has(> .challenge-hero-overlay) {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 320px;
  overflow: hidden;
  background: var(--lobby-green-dark);
}
.challenge-hero > .challenge-hero-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.challenge-hero > .challenge-hero-img--placeholder {
  display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center;
  color: rgba(255, 255, 255, .85); font-weight: 800; font-size: 1.3rem; background: var(--lobby-accent-line);
}
.challenge-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 100%);
}
.challenge-hero-overlay .challenge-title { color: #fff; padding-bottom: 0; font-size: clamp(1.5rem, 5.5vw, 2rem); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }

.challenge-title {
  margin: 0;
  padding-bottom: 6px;
  color: var(--lobby-text);
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

/* ── Body ───────────────────────────────────────────── */
.challenge-body {
  padding: 18px 0 12px;
}

.challenge-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.challenge-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  background: var(--lobby-surface-2);
  color: var(--lobby-text-muted);
}
.challenge-badge--free   { background: var(--lobby-brand-soft); color: var(--lobby-brand-text); }
.challenge-badge--full   { background: var(--lobby-danger-soft); color: var(--lobby-danger-text); }

/* Teilnahme-Box: Beitritt je Zugangsmodus direkt auf der Infoseite */
.challenge-join {
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-left: 4px solid var(--lobby-green);
  border-radius: var(--lobby-radius);
  padding: 14px 16px;
}
.challenge-join .challenge-section-title { font-size: .95rem; margin-bottom: 8px; }
.challenge-join-terms {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .92rem; line-height: 1.45; cursor: pointer;
}
.challenge-join-terms input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--lobby-green); }
.challenge-join-code { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.challenge-join-input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; letter-spacing: .04em;
  border: 1px solid var(--lobby-border); border-radius: 12px; background: var(--lobby-surface);
}
.challenge-join-input:focus { outline: 2px solid var(--lobby-green); outline-offset: 1px; }
/* Pflichtangabe fehlt: Feld markieren — die Meldung allein übersieht man (challenge.js showJoinError). */
.challenge-join-input--error,
.challenge-join-input--error:focus { border-color: var(--lobby-danger-text); outline: 2px solid var(--lobby-danger-text); outline-offset: 1px; }
.challenge-join-ext { display: inline-flex; width: 100%; margin: 4px 0 6px; }
.challenge-join-group { margin-top: 10px; }
.challenge-join-group-label { display: block; font-size: .82rem; font-weight: 700; color: var(--lobby-text-muted); margin-bottom: 4px; }
.challenge-join-group select { letter-spacing: normal; }
.challenge-join-error { margin: 10px 0 0; font-size: .88rem; font-weight: 600; color: var(--lobby-danger-text); }
.challenge-badge--paid   { background: var(--lobby-gold-soft); color: var(--lobby-gold-text); }
.challenge-badge--external { background: var(--lobby-info-soft); color: var(--lobby-info-text); }

.challenge-section {
  margin-bottom: 22px;
}

.challenge-section-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lobby-text);
}

.challenge-text {
  margin: 0;
  color: var(--lobby-text);
  font-size: .98rem;
  line-height: 1.6;
}
.challenge-text--muted { color: var(--lobby-text-muted); }

/* ── Neuigkeiten (Modul) ────────────────────────────── */
.challenge-news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.challenge-news-item { border-left: 3px solid var(--lobby-green); padding-left: 12px; }
.challenge-news-date { font-size: .78rem; color: var(--lobby-text-muted); }
.challenge-news-title { font-weight: 700; margin: 2px 0 4px; }

/* ── Belohnung ──────────────────────────────────────── */
.challenge-reward-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.challenge-reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  box-shadow: var(--lobby-shadow);
}
.challenge-reward-label { font-weight: 600; }
.challenge-reward-points {
  font-weight: 800;
  color: var(--lobby-brand-text);
  white-space: nowrap;
}

/* ── Gemeinschaftsziel (Challenge-Infoseite) ────────── */
.challenge-goal {
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  padding: 14px;
}
.challenge-goal-line { margin: 0 0 10px; font-size: .95rem; }
.challenge-goal-line strong { font-size: 1.25rem; color: var(--lobby-brand-text); }
.challenge-goal-bar {
  display: block; height: 12px; border-radius: 6px;
  background: var(--lobby-border);
  overflow: hidden;
}
.challenge-goal-bar > span {
  display: block; height: 100%;
  background: var(--lobby-green);
  border-radius: 6px;
  transition: width .6s ease;
}
.challenge-goal-pct { margin: 8px 0 0; font-size: .82rem; color: var(--lobby-text-muted); }

/* ── Abzeichen-Galerie (Challenge-Infoseite) ────────── */
.challenge-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.challenge-badgecard {
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  padding: 12px 8px 10px;
  text-align: center;
  opacity: .55;
  filter: grayscale(.7);
}
.challenge-badgecard--done { opacity: 1; filter: none; }
/* Live: Ereignis gerade freigegeben — farbig wie „geschafft", aber mit grünem Rahmen als Aufforderung. */
.challenge-badgecard--live { opacity: 1; filter: none; border-color: var(--lobby-green); }
.challenge-badgecard-live { color: var(--lobby-brand-text); font-weight: 700; }
/* Grafik bewusst groß (Katalog-Upload ist 256 px, reicht für Retina) —
   das Abzeichen ist der Star der Karte, nicht der Text. */
.challenge-badgecard-icon {
  width: 76px; height: 76px; margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--lobby-brand-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.challenge-badgecard-img { width: 100%; height: 100%; object-fit: cover; }
.challenge-badgecard-emoji { font-size: 2.1rem; }
.challenge-badgecard-title { font-size: .78rem; font-weight: 700; line-height: 1.25; }
.challenge-badgecard-times { color: var(--lobby-brand-text); font-weight: 800; }
.challenge-badgecard-sub { font-size: .68rem; color: var(--lobby-text-muted); margin-top: 4px; }
.challenge-badgecard-bar {
  display: block; height: 5px; border-radius: 3px;
  background: var(--lobby-border);
  overflow: hidden;
}
.challenge-badgecard-bar > span {
  display: block; height: 100%;
  background: var(--lobby-green);
  border-radius: 3px;
}

/* ── Sammelpass (Modul Sammelpass, Challenge-Infoseite) ─ */
/* Felder teilen sich Raster und Kachel-Bausteine mit der Galerie; nur der
   Zustand ist dreistufig: leer grau, teilweise farbig, voll mit Rahmen. */
.challenge-pass-head { margin: -4px 0 10px; font-size: .9rem; color: var(--lobby-text-muted); }
.challenge-pass-head strong { font-size: 1.15rem; color: var(--lobby-brand-text); }
.challenge-passfield {
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  padding: 12px 8px 10px;
  text-align: center;
}
.challenge-passfield--empty { opacity: .55; filter: grayscale(.7); }
.challenge-passfield--full { border-color: var(--lobby-brand-text); }
.challenge-passfield--live { border-color: var(--lobby-green); }
.challenge-passfield .challenge-badgecard-sub { display: flex; flex-direction: column; gap: 4px; }
.challenge-passfield-count { font-size: 1.5rem; font-weight: 800; color: var(--lobby-brand-text); }

/* ── Aufgaben (Modul Aufgaben, Challenge-Infoseite) ──── */
.challenge-quest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.challenge-quest {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--lobby-border);
  border-radius: 10px;
  background: var(--lobby-surface);
}
.challenge-quest--done { border-color: var(--lobby-green); }
.challenge-quest-check {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  background: var(--lobby-border);
  color: var(--lobby-text-muted);
}
.challenge-quest--done .challenge-quest-check {
  background: var(--lobby-green);
  color: var(--lobby-on-brand);
}
.challenge-quest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.challenge-quest-title { font-weight: 700; }
.challenge-quest-sub { font-size: .78rem; color: var(--lobby-text-muted); }
.challenge-quest-bar {
  display: block; height: 5px; border-radius: 3px; max-width: 220px;
  background: var(--lobby-border);
  overflow: hidden;
}
.challenge-quest-bar > span {
  display: block; height: 100%;
  background: var(--lobby-green);
  border-radius: 3px;
}
.challenge-quest-points { font-weight: 800; color: var(--lobby-brand-text); white-space: nowrap; }

/* ── Rangliste (Challenge-Infoseite) ────────────────── */
.challenge-lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.challenge-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  font-size: .95rem;
}
.challenge-lb-rank {
  flex: 0 0 26px;
  text-align: center;
  font-weight: 800;
  color: var(--lobby-brand-text);
}
.challenge-lb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.challenge-lb-muted { color: var(--lobby-text-muted); font-weight: 400; }
.challenge-lb-streak { margin-left: 6px; font-size: .82em; font-weight: 700; color: var(--lobby-warn-text); white-space: nowrap; }
.challenge-lb-value { font-weight: 800; color: var(--lobby-brand-text); white-space: nowrap; }
.challenge-lb-subtitle { margin: 14px 0 8px; font-size: .95rem; font-weight: 800; color: var(--lobby-text); }

/* ── Strecken-Übersicht ─────────────────────────────── */
.challenge-route-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.challenge-route {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  box-shadow: var(--lobby-shadow);
}
.challenge-route-img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.challenge-route-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lobby-surface-2);
  color: var(--lobby-text-muted);
  font-size: .72rem;
  font-weight: 700;
}
.challenge-route-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.challenge-route-name {
  font-weight: 700;
  font-size: .98rem;
}
.challenge-route-meta {
  color: var(--lobby-text-muted);
  font-size: .85rem;
}

.challenge-infolink {
  display: inline-block;
  margin-top: 4px;
  color: var(--lobby-brand-text);
  font-weight: 700;
  text-decoration: none;
}
.challenge-infolink:hover { text-decoration: underline; }

.challenge-error { color: var(--lobby-danger-text); font-weight: 600; }

/* ── Seite „Meine Challenges" (Menü → Verwaltung) ───────
   Liste statt Kacheln: Hier wird verwaltet, nicht eingestiegen — eine Zeile
   je Teilnahme mit dem Austritt rechts. Der Titel bleibt ein Link in die
   Challenge, damit der Weg zur Detailseite erhalten bleibt. */
.mychallenges-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mychallenges-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--lobby-border);
  border-radius: 14px;
  background: var(--lobby-surface);
}

.mychallenges-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.mychallenges-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: var(--lobby-surface-2);
}
.mychallenges-thumb--empty { display: block; }

.mychallenges-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mychallenges-title {
  font-weight: 700;
  font-size: .98rem;
  color: var(--lobby-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mychallenges-meta {
  font-size: .84rem;
  color: var(--lobby-text-muted);
}

/* Typ-Kennzeichnung (derzeit „TTS" für Serien) — Events tragen keine, sie sind
   der Normalfall. */
.mychallenges-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--lobby-info-soft);
  color: var(--lobby-info-text);
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}

.mychallenges-leave {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--lobby-danger-border);
  border-radius: 10px;
  background: transparent;
  color: var(--lobby-danger-text);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.mychallenges-leave:hover { background: var(--lobby-danger-soft); }

/* ── Challenge verlassen ────────────────────────────────
   Destruktive Aktion: bewusst ganz unten, textlich statt als Knopf und
   deutlich vom grünen „Strecke starten" der Aktionsleiste abgesetzt, damit
   sie nicht versehentlich unter den Daumen gerät. Die Trennlinie schließt
   die Seite ab und markiert den Bereich als „Verwaltung", nicht „Aktion". */
.challenge-leave {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--lobby-border);
  text-align: center;
}

.challenge-leave-btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lobby-danger-text);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
.challenge-leave-btn:hover { background: var(--lobby-danger-soft); }

/* Im Bestätigungs-Sheet steht „Abbrechen" zuerst und bekommt das visuelle
   Gewicht — die destruktive Wahl bleibt bewusst die zurückhaltendere. */
.challenge-leave-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.challenge-leave-actions .lobby-btn { flex: 1; justify-content: center; }

/* ── Fixierte Aktionsleiste ─────────────────────────── */
.challenge-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--lobby-glass);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--lobby-border);
}
.challenge-start-btn {
  flex: 1;
  padding: 14px 16px;
  font-size: 1rem;
}
/* Zweiter Knopf „Scannen" (PO 2026-09-13): sekundär, gleiche Höhe, feste Breite —
   der Hauptknopf behält den Rest. Icon per Maske wie die Mitmachen-Karten. */
.challenge-actionbar { gap: 10px; }
.challenge-scan-btn {
  flex: 0 0 auto;
  gap: 8px;
  padding: 14px 18px;
  font-size: 1rem;
  background: var(--lobby-surface);
  color: var(--lobby-text);
  border-color: var(--lobby-border);
}
.challenge-scan-btn:hover { background: var(--lobby-surface-2); }
.challenge-scan-btn-icon {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url(../assets/img/icons/mobile-line/qr.svg) center / contain no-repeat;
  mask: url(../assets/img/icons/mobile-line/qr.svg) center / contain no-repeat;
}

/* ── Challenge als Drehscheibe (PO 2026-09-13) ─────────────────────
   Stand als Kennzahlen-Zeile, Chips als Navigation innerhalb der Seite,
   „Mitmachen" als eine Karte je Weg, Auswahl-Sheet der Aktionsleiste. */
.challenge-section-sub {
  margin: -4px 0 10px;
  font-size: .8rem;
  color: var(--lobby-text-muted);
}

.challenge-stand {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 12px 8px;
  background: var(--lobby-surface);
  border-radius: var(--lobby-radius);
  box-shadow: var(--lobby-shadow);
}
.challenge-stand-tile { text-align: center; min-width: 0; }
/* Klickbare Kachel (Punkte/km/Aktivitäten → eigene Seite, Platz → Rangliste).
   Als <button> ohne Button-Optik, damit Link und Knopf identisch aussehen. */
.challenge-stand-tile--link {
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.challenge-stand-tile--link .challenge-stand-value { color: var(--lobby-brand-text); }
.challenge-stand-tile--link:active { background: var(--lobby-surface-2); }
.challenge-stand-value {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.challenge-stand-label {
  display: block;
  margin-top: 2px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lobby-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chips kleben unter dem 60px-Header (10px Padding + 40px Logo). */
.challenge-chips {
  position: sticky;
  top: 60px;
  z-index: 9;
  display: flex;
  gap: 6px;
  margin: 0 -16px 16px;
  padding: 10px 16px 8px;
  background: var(--lobby-bg);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.challenge-chips::-webkit-scrollbar { display: none; }
.challenge-chip {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--lobby-border);
  background: var(--lobby-surface);
  color: var(--lobby-text);
  cursor: pointer;
}
.challenge-chip[aria-current="true"] {
  background: var(--lobby-green);
  border-color: var(--lobby-green);
  color: var(--lobby-on-brand);
}
/* Sprungziele landen unter Header + Chips, nicht darunter versteckt. */
#secMit, #secProgress, #lbSlot, #secInfo { scroll-margin-top: 112px; }

.challenge-way {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--lobby-surface);
  border-radius: var(--lobby-radius);
  box-shadow: var(--lobby-shadow);
}
.challenge-way-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--lobby-brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.challenge-way-icon span {
  display: block;
  width: 22px;
  height: 22px;
  background-color: var(--lobby-green);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.challenge-way-body { min-width: 0; display: flex; flex-direction: column; }
.challenge-way-title { font-weight: 700; font-size: .9rem; }
.challenge-way-meta { font-size: .74rem; color: var(--lobby-text-muted); margin-top: 2px; }
.challenge-way-meta b { color: var(--lobby-brand-text); font-weight: 700; }
/* Angebots-Verzeichnis (Modul directory, Migration 155): Filterleiste + Karte. */
.challenge-dir-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.challenge-dir-select, .challenge-dir-input {
  flex: 1; min-width: 140px; font: inherit; font-size: .88rem; padding: 8px 10px;
  border: 1px solid var(--lobby-border); border-radius: 10px; background: var(--lobby-surface); color: var(--lobby-text);
}
.challenge-dir-count { font-size: .78rem; color: var(--lobby-text-muted); margin-left: auto; }
.challenge-dir-map { height: 300px; border-radius: var(--lobby-radius); overflow: hidden; margin: 0 0 12px; box-shadow: var(--lobby-shadow); isolation: isolate; }
#secDir { scroll-margin-top: 112px; }
.challenge-way-go {
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: var(--lobby-green);
  color: var(--lobby-on-brand);
  white-space: nowrap;
  cursor: pointer;
}
.challenge-way-go:hover, .challenge-way-go:focus-visible { background: var(--lobby-green-dark); }
.challenge-way-go:disabled { background: var(--lobby-surface-2); color: var(--lobby-text-muted); cursor: default; }
.challenge-way--muted { opacity: .72; }
.challenge-way--muted .challenge-way-icon { background: var(--lobby-surface-2); }
.challenge-way--muted .challenge-way-icon span { background-color: var(--lobby-text-muted); }
.challenge-way-state {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
}
.challenge-way-state--hot  { background: var(--lobby-warn-soft); color: var(--lobby-warn-text); }
.challenge-way-state--ok   { background: var(--lobby-brand-soft); color: var(--lobby-brand-text); }
.challenge-way-state--grey { background: var(--lobby-surface-2); color: var(--lobby-text-muted); }

/* Auswahl-Sheet: eine Zeile je Weg, gleiche Bausteine wie die Karten. */
.challenge-ways-sheet { padding-left: 16px; padding-right: 16px; }
.challenge-way-opt {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px 4px;
  border: 0;
  border-top: 1px solid var(--lobby-border);
  background: transparent;
  color: var(--lobby-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.challenge-way-opt:first-of-type { border-top: 0; }
.challenge-way-opt .challenge-way-icon { width: 36px; height: 36px; border-radius: 10px; }
.challenge-way-opt .challenge-way-icon span { width: 20px; height: 20px; }
.challenge-way-opt-pts {
  font-size: .78rem;
  font-weight: 700;
  color: var(--lobby-brand-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   „Meine Aktivitäten" — persönliche Absolvierungs-Historie als Lobby-Section.
   Gerendert vom geteilten ArenaActivities-Modul (.arena-*-Klassen). Die Styles
   sind hier auf das Lobby-Design-System (--lobby-*) gemappt, NICHT aus dem
   Tracker-CSS importiert — die Lobby bleibt unabhängig vom Tracker-Core.
   ════════════════════════════════════════════════════════════════ */
.lobby-activities {
  display: block;
}

/* Lade-Spinner des Moduls (rendert <div class="spinner">). Im Lobby-Grün. */
.lobby-activities .spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--lobby-border);
  border-top-color: var(--lobby-green);
  border-radius: 50%;
  animation: lobby-spin .8s linear infinite;
  margin: 0 auto 12px;
}

/* Stats-Kopf: 4 Kennzahl-Kacheln (2×2 auf schmal). */
.arena-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.arena-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: 12px;
}
.arena-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--lobby-brand-text);
}
.arena-stat-label {
  font-size: .78rem;
  color: var(--lobby-text-muted);
  text-align: center;
}

/* Aktivitäten-Liste */
.arena-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.arena-activity {
  padding: 14px 16px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Karussell-Variante (Lobby „Letzte Aktivitäten"): horizontal wischbar mit
   nativem Scroll-Snap — keine JS-Slider-Logik.
   Bewusst KEIN negativer Rand (kein Edge-to-Edge): Die Karten scrollen
   innerhalb der Inhaltskante und verschwinden dort — bündig mit den
   Überschriften, der Seitenabstand bleibt beim Wischen immer sichtbar.
   Vorher liefen sie bis unter den Bildschirmrand, was beim Ziehen wie eine
   „abgeschnittene" Karte wirkte (User-Feedback 30.08.). */
.arena-activity-list--carousel {
  flex-direction: row;
  gap: 10px;
  padding: 4px 0 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.arena-activity-list--carousel::-webkit-scrollbar { display: none; }
/* min-width: 0 ist Pflicht: Ohne das nimmt das Flex-Item die Breite seines
   nicht umbrechenden Titels an (min-width: auto) und sprengt den Bildschirm —
   statt dass der Titel mit „…" gekürzt wird. Breite explizit, damit die Karte
   unabhängig vom Inhalt immer ins Fenster passt. */
.arena-activity-list--carousel .arena-activity {
  flex: 0 0 auto;
  /* 78vw ließ die zweite Karte fast bündig mit dem rechten Rand abschließen
     (kein Luftpolster, wirkte "klebend"). 70vw zeigt bewusst einen Streifen
     der Folgekarte an, das deutet das Wischen zusätzlich an. */
  width: min(70vw, 280px);
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
}
/* Im Karussell die Kennzahlen kompakt in einer Reihe, Badges darunter. */
.arena-activity-list--carousel .arena-activity-meta {
  gap: 8px;
}
.arena-activity:hover {
  border-color: var(--lobby-brand-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.arena-activity-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.arena-activity-title {
  font-weight: 700;
  color: var(--lobby-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arena-activity-date {
  font-size: .8rem;
  color: var(--lobby-text-muted);
  flex-shrink: 0;
}
.arena-activity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--lobby-text-muted);
}
.arena-activity-type {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--lobby-brand-text);
}
.arena-activity-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.arena-activity-badge--ok { background: var(--lobby-ok-soft); color: var(--lobby-ok-text); }
.arena-activity-badge--fail { background: var(--lobby-danger-soft); color: var(--lobby-danger-text); }
/* Herkunft „aus der SC-Challenge aufgezeichnet": Up2you-Grün, klar als Kontext-
   Marker erkennbar (nicht als Bestanden/Fehler-Status). */
.arena-activity-badge--scc { background: var(--lobby-green); color: var(--lobby-on-brand); }
/* Challenge-Zuordnung (Event) in der Detail-Ansicht: umrandet statt gefuellt,
   damit sie nicht mit Bestanden-/Herkunfts-Badges verwechselt wird. */
.arena-activity-badge--challenge {
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-green);
  color: var(--lobby-brand-text);
}
/* Modul Plausibilität: Wertungsstatus. „In Prüfung" orange (offen),
   „Zählt nicht"/„Nicht anerkannt" grau (endgültig, kein Fehler des Users). */
.arena-activity-badge--review { background: var(--lobby-gold-soft); color: var(--lobby-gold-text); }
.arena-activity-badge--notcount { background: var(--lobby-surface-2); color: var(--lobby-text-muted); }
.arena-activity--muted .arena-activity-title,
.arena-activity--muted .arena-activity-meta > span:not(.arena-activity-badge) { opacity: .6; }

/* Hinweisbox in der Detailansicht (Grund + Bedeutung des Status). */
.arena-review-box {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--lobby-radius);
  border: 1px solid;
  font-size: .85rem;
  line-height: 1.5;
}
.arena-review-box--warn { background: var(--lobby-warn-soft); border-color: var(--lobby-warn-border); color: var(--lobby-warn-text); }
.arena-review-box--ok { background: var(--lobby-ok-soft); border-color: var(--lobby-ok-border); color: var(--lobby-ok-text); }
.arena-review-box p { margin: 0; }
.arena-review-box .arena-review-reason { font-weight: 600; margin-bottom: 4px; }

/* Zustände: Laden / leer / Fehler */
.arena-loading, .arena-empty, .arena-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
  color: var(--lobby-text-muted);
}
.arena-loading p, .arena-empty p, .arena-error p { margin: 0; }
.arena-empty-hint, .arena-error-detail {
  font-size: .82rem;
  color: var(--lobby-text-muted);
}
.arena-error-detail {
  font-family: monospace;
  word-break: break-all;
}

/* ── Aktivitäts-Detail (Modal: Karte + Kennzahlen) ─────────────────────
   Öffnet beim Tap auf einen Eintrag der Aktivitäten-Liste. z-index über
   Tab-Bar (20) und Menü-Sheets (30). */
/* WICHTIG: display:flex der Klasse wuerde das hidden-Attribut sonst
   ueberstimmen (UA-Stylesheet hat geringere Spezifitaet) — das Modal
   liesse sich nicht mehr schliessen. */
.arena-detail-backdrop[hidden] { display: none; }
.arena-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--lobby-overlay);
}
.arena-detail {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px;
  background: var(--lobby-surface);
  border-radius: var(--lobby-radius-lg);
  box-shadow: var(--lobby-shadow-lift);
}
.arena-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--lobby-surface-2);
  color: var(--lobby-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.arena-detail-close:hover { background: var(--lobby-border); }
.arena-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  padding-right: 40px; /* Platz für den Schließen-Button */
}
.arena-detail-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lobby-text);
}
.arena-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.arena-detail-map {
  position: relative;
  z-index: 0; /* eigener Stacking-Context: Leaflet-Panes bleiben im Modal */
  height: 260px;
  margin-bottom: 14px;
  border: 1px solid var(--lobby-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--lobby-brand-soft);
}
.arena-detail-map-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--lobby-text-muted);
  font-size: .9rem;
}
.arena-detail-stats { margin-bottom: 0; }

/* ── Aktivität verwerfen (in der Detail-Ansicht) ─────────────────────── */
.arena-detail-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lobby-border);
}
.arena-detail-delete {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--lobby-danger-text);
  background: transparent;
  border: 1.5px solid var(--lobby-danger-border);
  border-radius: var(--lobby-radius);
  transition: background-color .12s;
}
.arena-detail-delete:hover:not(:disabled) { background: var(--lobby-danger-soft); }
.arena-detail-delete:disabled { opacity: .6; cursor: default; }
.arena-detail-hint {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--lobby-text-muted);
}

/* ── Konto löschen (Gefahrenzone) ──────────────────────────────────────
   Dezent abgesetzt, klar als kritisch erkennbar, ohne die Seite zu dominieren. */
.lobby-danger-zone {
  margin-top: 18px;
  border-color: var(--lobby-danger-border);
}
.lobby-danger-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lobby-danger-text);
}
.lobby-danger-text {
  margin: 0 0 16px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--lobby-text-muted);
}

/* Ausgangs-Button: umrandet statt gefüllt — signalisiert „bewusst öffnen". */
.lobby-btn--danger-outline {
  background: transparent;
  color: var(--lobby-danger-text);
  border-color: var(--lobby-danger-border);
}
.lobby-btn--danger-outline:hover { background: var(--lobby-danger-soft); }

.lobby-delete-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* hidden-Attribut muss display:flex schlagen, sonst ist das Formular immer sichtbar. */
.lobby-delete-form[hidden] { display: none; }
.lobby-field-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--lobby-text);
}
.lobby-input {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  color: var(--lobby-text);
  background: var(--lobby-surface);
  border: 1.5px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  transition: border-color .12s;
}
.lobby-input:focus {
  outline: none;
  border-color: var(--lobby-green);
}
.lobby-delete-error {
  margin: 0;
  font-size: .85rem;
  color: var(--lobby-danger-text);
}
.lobby-delete-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.lobby-delete-actions .lobby-btn { flex: 1; }

/* Ghost-Button auf hellem Card-Grund (Basis-Ghost ist für dunklen Grund). */
.lobby-delete-actions .lobby-btn--ghost {
  color: var(--lobby-text-muted);
  border-color: var(--lobby-border);
}
.lobby-delete-actions .lobby-btn--ghost:hover { background: var(--lobby-surface-2); }

/* ── Kontoverwaltung (Profil, Bild, Passwort) ────────────────────────── */
.lobby-card + .lobby-card { margin-top: 16px; }

.lobby-card-title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lobby-text);
}

/* Responsive Feld-Raster: eine Spalte auf schmalem Screen, zwei ab 480px. */
.lobby-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 480px) {
  .lobby-form-grid { grid-template-columns: 1fr 1fr; }
  .lobby-field--small { grid-column: auto; }
}

.lobby-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Eingabefelder (falls .lobby-input aus der Löschzone noch nicht griff). */
.lobby-input {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  color: var(--lobby-text);
  background: var(--lobby-surface);
  border: 1.5px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  transition: border-color .12s;
}
.lobby-input:focus { outline: none; border-color: var(--lobby-green); }

.lobby-hint {
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--lobby-text-muted);
}

/* Profilbild */
.lobby-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lobby-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lobby-border);
  background: var(--lobby-surface-2);
  flex: none;
}
.lobby-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Soft-Button: heller Grün-Ton für sekundäre Aktionen (Bild auswählen). */
.lobby-btn--soft {
  display: inline-block;
  background: var(--lobby-brand-soft);
  color: var(--lobby-brand-text);
  border-color: var(--lobby-brand-soft-border);
  cursor: pointer;
  width: auto;
}
.lobby-btn--soft:hover { background: var(--lobby-brand-soft-border); }

/* Nicht gesendete Aufzeichnung (Lobby-Start): Hinweis-Karte in Warnfarbe
   mit Absenden-Knopf. Vorher Inline-Styles in lobby.js. */
.lobby-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--lobby-warn-border);
  border-radius: var(--lobby-radius);
  background: var(--lobby-warn-soft);
}
.lobby-resume-body { min-width: 180px; flex: 1; }
.lobby-resume-title { font-weight: 700; font-size: .95rem; color: var(--lobby-warn-text); }
.lobby-resume-text { margin-top: 2px; font-size: .85rem; color: var(--lobby-text); }

/* Toast: Status oben auf der Seite */
.lobby-toast {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--lobby-radius);
  font-size: .9rem;
  font-weight: 600;
}
.lobby-toast--ok {
  background: var(--lobby-brand-soft);
  color: var(--lobby-brand-text);
  border: 1px solid var(--lobby-brand-soft-border);
}
.lobby-toast--error {
  background: var(--lobby-danger-soft);
  color: var(--lobby-danger-text);
  border: 1px solid var(--lobby-danger-border);
}
.lobby-toast[hidden] { display: none; }

/* Neuigkeiten-Overlay: Kachel über dem Dashboard, Rest verschwommen */
.lobby-news-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px calc(16px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  background: var(--lobby-overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: lobby-news-overlay-in .2s ease-out;
}
.lobby-news-overlay-card {
  position: relative; width: 100%; max-width: 420px; max-height: 80vh; overflow: auto;
  background: var(--lobby-surface); border-top: 4px solid var(--lobby-green);
  border-radius: var(--lobby-radius, 14px); box-shadow: 0 20px 50px rgba(0,0,0,.3);
  padding: 20px 20px 16px;
  animation: lobby-news-overlay-card-in .25s ease-out;
}
.lobby-news-overlay-close {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  font-size: 1.6rem; line-height: 1; color: var(--lobby-text-muted); cursor: pointer; padding: 4px;
}
.lobby-news-overlay-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lobby-brand-text); }
.lobby-news-overlay-title { font-weight: 700; font-size: 1.15rem; margin: 4px 24px 0 0; }
.lobby-news-overlay-meta { font-size: .82rem; color: var(--lobby-text-muted); margin-top: 2px; }
.lobby-news-overlay-body { font-size: .92rem; color: var(--lobby-text); line-height: 1.5; margin-top: 10px; white-space: pre-line; }
.lobby-news-overlay-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.lobby-news-overlay-actions .lobby-btn { width: 100%; text-align: center; text-decoration: none; }

/* Ab drei ungelesenen Meldungen: Titelliste statt einer ausgeschriebenen Meldung */
.lobby-news-overlay-list { list-style: none; margin: 8px 0 0; padding: 0; }
.lobby-news-overlay-list li {
  padding: 9px 0; border-top: 1px solid var(--lobby-border);
  font-weight: 600; font-size: .95rem; line-height: 1.35;
}
.lobby-news-overlay-list li:first-child { border-top: 0; }
.lobby-news-overlay-list li span { display: block; font-weight: 400; font-size: .8rem; color: var(--lobby-text-muted); margin-top: 1px; }
.lobby-news-overlay-list li.is-important { color: var(--lobby-danger-text); }

/* Wichtige Meldung: rote Kante und roter Kicker, sonst identisch */
.lobby-news-overlay--important .lobby-news-overlay-card { border-top-color: var(--lobby-danger); }
.lobby-news-overlay--important .lobby-news-overlay-kicker { color: var(--lobby-danger); }
@keyframes lobby-news-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lobby-news-overlay-card-in { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Formular-Baukasten (form-fields.js): vom Admin gebaute Formulare ── */
.lobby-form-heading {
  margin: 22px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--lobby-border);
  font-size: .95rem;
  font-weight: 700;
  color: var(--lobby-text);
}
.lobby-form-info {
  margin: 0 0 14px;
  font-size: .85rem;
  color: var(--lobby-text-muted);
  white-space: pre-line;
}
.lobby-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--lobby-text);
  cursor: pointer;
}
.lobby-check input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--lobby-green);
}
.lobby-check-link { white-space: nowrap; }
.lobby-check-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lobby-input-suffix {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lobby-text-muted);
  font-size: .9rem;
}
.lobby-input-suffix .lobby-input { max-width: 140px; }
.lobby-field-error {
  margin: 6px 0 0;
  font-size: .82rem;
  color: var(--lobby-danger-text);
}
.lobby-field.has-error .lobby-input { border-color: var(--lobby-danger-text); }