/*
 * 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;
}

/* ── Ranopoly (Gebietsspiel): Waben, Grenzen, Legende, Standort-Puck ──────
   Eine Farbwelt Blau/Weiß für Sammeln und Erobern (ranopoly-design.md §4e, PO 2026-11-04);
   Rot und Bernstein nur in Erobern (verloren, zu holen). territory.js und territory-collection.js
   lesen die Tokens per getComputedStyle (territory-theme.js), weil Leaflet Farben als SVG-Attribute
   setzt. territory-layer.js (geteilt mit der Live-Karte beim Aufzeichnen) behält seine Standardwerte.
   Zwei Ebenen: Am Wurzelelement gelten die Werte der Oberfläche (Hell-Schalter im Konto), auf
   .ter-stage[data-map-view] die der Kartenansicht — Spiel = dunkle Belegung, Orientierung = helle.
   --ter-accent bleibt bewusst nur an der Wurzel: Bedienelemente auf der Karte folgen der Oberfläche. */
:root, .ter-stage[data-map-view="orient"] {
  --ter-mine: #1d4ed8;            /* eigenes Feld, Grenzen, Fortschrittsbalken, Puls */
  --ter-own-fill: #1d4ed8;        /* Erobern: Füllung eigener Felder (Deckkraft = Stärke) */
  --ter-own-line: #1d4ed8;        /* Erobern: Rand eigener Felder */
  --ter-collect: #1d4ed8;         /* Sammeln: gesammelte Wabe */
  --ter-other: #64748b;           /* fremdes Feld: Grau, Blau gehört dir */
  --ter-lost: #dc2626;            /* Rand: war deins (nur Erobern) */
  --ter-take: #f59e0b;            /* zu holen, angetipptes Feld (nur Erobern) */
  --ter-take-line: #d97706;
  --ter-free: #8ea3c7;            /* freies Feld, Raster, neutrale Gebietsfläche */
  --ter-free-line: #64748b;       /* Rand neutraler Gebiete */
  --ter-free-cell: #8ea3c7;       /* Erobern: Rand freier Felder */
  --ter-blocked: #6b7280;         /* gesperrt: Streifen (Muster #terHatch in territory.html) */
  --ter-blocked-bg: #cbd5e1;  --ter-blocked-line: #94a3b8;
  --ter-bronze: #b4733a;  --ter-silver: #94a3b8;  --ter-gold: #d4a017;  --ter-gold-line: #a67c00;
  --ter-fog: #0f172a;             /* Nebel (Sammeln) */
  --ter-area-line-near: #1e293b;  /* Gemeindegrenzen ab dem Feld-Zoom */
  --ter-label: #0f172a;           /* Gemeinde-Beschriftung, Rand der Standort-Wabe */
  --ter-label-halo: #fff;
  --ter-puck: #0f1b33;  --ter-puck-core: #3b82f6;
}
:root { --ter-accent: #1d4ed8; }
/* Dunkel und Spielansicht: helle, leuchtfähige Ränder auf dunkler Karte, gesammelt = weiß. */
:root:not([data-theme="light"]), :root[data-theme="dark"], .ter-stage[data-map-view="game"] {
  --ter-mine: #60a5fa;  --ter-collect: #f1f5f9;  --ter-other: #8391a7;  --ter-lost: #f87171;
  --ter-own-fill: #3b82f6;  --ter-own-line: #93c5fd;   /* Erobern-Akzent (Manuel N8): satt blau, hell leuchtender Rand */
  --ter-take: #fbbf24;  --ter-take-line: #fbbf24;
  --ter-free: #35507a;  --ter-free-line: #4b5f80;  --ter-free-cell: #6b85b0;
  --ter-blocked: #94a3b8;  --ter-blocked-bg: #0b0f17;  --ter-blocked-line: #2a3242;
  --ter-bronze: #c98a52;  --ter-silver: #c5ccd4;  --ter-gold: #f2c94c;  --ter-gold-line: #f2c94c;
  --ter-fog: #000;  --ter-area-line-near: #8fa0b8;  --ter-label: #fff;  --ter-label-halo: #000;
  --ter-puck: #0f1b33;  --ter-puck-core: #60a5fa;
}
:root:not([data-theme="light"]), :root[data-theme="dark"] { --ter-accent: #60a5fa; }

/* ═══════════════════════════════════════════════════════════════════════════
   Sportland-OÖ-Theme (Partner-Marke, PO 2026-10-13) — Rot/Schwarz/Weiß nach
   dem Logo des Landes OÖ, Blau (#004876) der Website sport-ooe.at nur für
   Überschriften und Links. Aktiv über <html class="sportooe-theme"
   data-theme="light">, gesetzt von shared/tracker-core/brand-theme.js, sobald
   ein Event dieser Marke betreten wird (Event-Seite und alle Folgeseiten).
   Immer HELL — die Partner-Seite ist hell. Zustandsfarben (ok/warn/danger)
   bleiben Ampel-Werte; Markenrot ist kräftiger als das Fehlerrot.
   Werte: #e2001a (Fläche) · #b50015 (dunkel) · #b8001a (Text) · #fdeaec (soft).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Ebene 1 „Handeln" (PO 2026-10-15): Verlauf, Lichtkante, farbiger Schatten ──
   Einmal aus den Marken-Tokens abgeleitet; jede Marke (Arena-Grün, Sportland-Rot)
   bekommt sie automatisch. Nur für Elemente, auf die man tippt: Hauptknöpfe,
   Weg-Knöpfe, Icon-Kacheln. Navigation (Chips) und Karten bleiben flach. */
html {
  --lobby-brand-gradient: linear-gradient(145deg,
    color-mix(in srgb, var(--lobby-green) 78%, #fff) 0%,
    var(--lobby-green) 55%,
    var(--lobby-green-dark) 100%);
  --lobby-brand-glow: 0 6px 14px -4px color-mix(in srgb, var(--lobby-green) 45%, transparent);
  --lobby-brand-edge: inset 0 1px 0 rgba(255, 255, 255, .35);
}

html.sportooe-theme {
  --lobby-green: #e2001a;
  --lobby-green-dark: #b50015;
  --lobby-brand-text: #b8001a;
  --lobby-brand-soft: #fdeaec;
  --lobby-brand-soft-border: #f6c3c8;
  --lobby-brand-border: rgba(226, 0, 26, .35);
  --lobby-ring: rgba(0, 0, 0, .12);

  --lobby-bg: #f4f6f8;
  --lobby-surface: #ffffff;
  --lobby-surface-2: #f0f4f8;
  --lobby-border: #e5e5e5;
  --lobby-border-strong: #c4d1e3;
  --lobby-header: #ffffff;
  --lobby-header-fade: #ffffff;
  --lobby-tabbar: #ffffff;
  --lobby-glass: rgba(255, 255, 255, .96);
  --lobby-overlay: rgba(0, 31, 51, .45);
  --lobby-media-bg: #e9eef4;
  --lobby-placeholder: linear-gradient(135deg, #dce4ed, #c4d1e3);

  --lobby-text: #010101;
  --lobby-text-muted: #5c6b7a;
  --lobby-neutral: #9e9f9f;

  --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: #dce4ed; --lobby-info-text: #004876;

  /* Ruhige Flächen wie auf sport-ooe.at: kaum Schatten, kein Glow. */
  --lobby-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  --lobby-shadow-soft: 0 1px 3px rgba(0, 0, 0, .08);
  --lobby-shadow-lift: 0 4px 12px rgba(0, 0, 0, .10);
  --lobby-glow: 0 0 0 1px rgba(226, 0, 26, .18);
  --lobby-accent-line: linear-gradient(90deg, #b50015 0%, #e2001a 100%);
}
/* Header: weiß mit schwarzem Text wie die Partner-Seite, feine Linie als
   Abschluss. Das breite Partner-Logo (brand-theme.js tauscht src) ohne Kachel. */
html.sportooe-theme .lobby-header { color: #010101; border-bottom: 1px solid #e5e5e5; }
html.sportooe-theme .lobby-header-back { color: #010101; }
html.sportooe-theme .lobby-header-back:hover { background: rgba(0, 0, 0, .06); }
html.sportooe-theme .lobby-header-logo { width: auto; height: 36px; border: 0; border-radius: 0; background: #fff; }
html.sportooe-theme .lobby-header-title { color: #004876; }
/* Primär-/Ghost-Knöpfe sind auf den weißen Header ausgelegt (weiß bzw. weiße
   Kontur) — hier rot gefüllt bzw. dunkel umrandet. */
html.sportooe-theme .lobby-btn--primary { background: #e2001a; color: #fff; }
html.sportooe-theme .lobby-btn--primary:hover { background: #b50015; }
html.sportooe-theme .lobby-btn--ghost { color: #010101; border-color: rgba(0, 0, 0, .25); }
html.sportooe-theme .lobby-btn--ghost:hover { background: rgba(0, 0, 0, .05); }
/* Event-Kopf: weißes Band mit roter Kante (der rote Kreis des Logos als Motiv),
   Bild-Kachel mit rotem Ring; Titel und Abschnitte im Blau der Website. */
html.sportooe-theme .challenge-hero-band { background: #fff; border-bottom: 4px solid #e2001a; }
/* Größere Kachel: das Kampagnen-Logo „It's up to me" trägt Kleintext, der bei
   112px unlesbar wäre. Der Titel steht bei der Partner-Marke nur für Screenreader
   im Code (challenge-title--sr), daneben der kurze Schriftzug (PO 2026-10-15). */
html.sportooe-theme .challenge-hero-tile { width: 160px; height: 160px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e2001a; }
/* Schriftzug rechts neben der Logo-Kachel, unter der roten Linie (bündig mit Kachel-Unterkante). */
.challenge-hero-side { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--lobby-text); }
html.sportooe-theme .challenge-hero-side { color: #004876; }
/* Nur für Screenreader sichtbar. */
.challenge-title--sr { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.sportooe-theme .challenge-title,
html.sportooe-theme .challenge-section-title,
html.sportooe-theme .challenge-infolink { color: #004876; }
html.sportooe-theme input[type="radio"],
html.sportooe-theme input[type="checkbox"] { accent-color: #e2001a; }
/* Formularseiten (Veranstalter-Anmeldung, Organisator, Konto): Überschriften blau,
   Rücksprung und Knöpfe laufen über die Tokens (rot). */
html.sportooe-theme .lobby-page h1,
html.sportooe-theme .lobby-card-title,
html.sportooe-theme .lobby-form-heading { color: #004876; }
html.sportooe-theme .lobby-back { color: #010101; }

/* ═══════════════════════════════════════════════════════════════════════════
   Mühl4tl-Theme (Partner-Marke, PO 2026-10-21) — Look des Mühlviertel-Trackers
   (public/tracker/core/tracker.css): Grün #007A31 / #009B3E / #00601f, immer
   HELL, grün getönte Glas-Bühne statt flacher Flächen. Aktiv über
   <html class="muehl4tl-theme" data-theme="light"> aus brand-theme.js. Die
   helle :root-Belegung ist schon Arena-Grün — hier nur, was vom Tracker abweicht.
   ═══════════════════════════════════════════════════════════════════════════ */
html.muehl4tl-theme {
  --lobby-green: #007A31;
  --lobby-green-dark: #00601f;
  --lobby-brand-text: #00601f;
  --lobby-brand-soft: #eaf2e1;
  --lobby-brand-soft-border: #cfe2bd;
  --lobby-brand-border: rgba(0, 122, 49, .35);

  --lobby-bg: #eaf2e1;                    /* Flächenwert; die Bühne (Verlauf) malt .lobby unten */
  --lobby-surface: #ffffff;
  --lobby-surface-2: #f4f9ee;
  --lobby-border: #e5e7eb;
  --lobby-header: #ffffff;                /* Tracker: weißer Header, Grün nur in Text/Icons */
  --lobby-header-fade: #f4f9ee;
  --lobby-ring: rgba(0, 122, 49, .25);
  --lobby-media-bg: #dbe7cf;
  --lobby-placeholder: linear-gradient(135deg, #cfe2bd, #a9cf98);
  --lobby-text: #111827;
  --lobby-text-muted: #6b7280;

  /* Weiche, mehrschichtige Schatten wie --shadow-soft/--shadow-float im Tracker. */
  --lobby-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06);
  --lobby-shadow-soft: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 28px rgba(16, 24, 40, .12);
  --lobby-shadow-lift: 0 2px 6px rgba(16, 24, 40, .05), 0 12px 28px rgba(16, 40, 20, .13);
  --lobby-glow: 0 0 0 1px rgba(0, 122, 49, .12), 0 12px 28px rgba(16, 40, 20, .13);
  --lobby-accent-line: linear-gradient(90deg, #00601f 0%, #007A31 50%, #009B3E 100%);
}
/* Bühne des Trackers (--stage-gradient): nach dem Header-Übergang läuft der Grund
   von fast weiß ins helle Grün aus — statt der flachen Fläche der Arena. */
html.muehl4tl-theme .lobby {
  background: linear-gradient(180deg, var(--lobby-header-fade) 0, #f4f9ee 260px, #e6f0dc 60%, #d6e8c8 100%) no-repeat;
}
/* Header wie der Tracker: weiß, grüner Text, Abschluss durch eine grüne Linie.
   Breites Partner-Logo (brand-theme.js tauscht src) ohne Kachel. */
html.muehl4tl-theme .lobby-header { color: #007A31; border-bottom: 3px solid #007A31; }
html.muehl4tl-theme .lobby-header-back { color: #007A31; }
html.muehl4tl-theme .lobby-header-back:hover { background: rgba(0, 122, 49, .08); }
html.muehl4tl-theme .lobby-header-logo { width: auto; height: 36px; border: 0; border-radius: 0; background: transparent; }
html.muehl4tl-theme .lobby-header-title { color: #007A31; }
/* Primär-/Ghost-Knöpfe sind auf den grünen Header ausgelegt (weiß bzw. weiße Kontur). */
html.muehl4tl-theme .lobby-btn--primary { background: #007A31; color: #fff; }
html.muehl4tl-theme .lobby-btn--primary:hover { background: #00601f; }
html.muehl4tl-theme .lobby-btn--ghost { color: #007A31; border-color: rgba(0, 122, 49, .35); }
html.muehl4tl-theme .lobby-btn--ghost:hover { background: rgba(0, 122, 49, .06); }
/* Event-Kopf: weißes Band mit grüner Kante, Bild-Kachel mit grünem Ring. */
html.muehl4tl-theme .challenge-hero-band { background: #fff; border-bottom: 4px solid #007A31; }
html.muehl4tl-theme .challenge-hero-tile { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007A31; }
html.muehl4tl-theme .challenge-hero-side { color: #00601f; }
html.muehl4tl-theme input[type="radio"],
html.muehl4tl-theme input[type="checkbox"] { accent-color: #007A31; }

/* ═══════════════════════════════════════════════════════════════════════════
   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;

  /* ── Die drei Rollen des TTS-Farbsystems ──────────────────────────────────
       Magenta  = Handlung und Marke (Buttons, Aktives, Header)
       Blau     = Bestzeit-Wertung — und zugleich Struktur (Überschriften, Rahmen)
       Violett  = Zielzeit-Wertung

     Daran steht oder fällt das System: Jede Wertung hat ihre eigene Farbe, und
     keine von beiden ist die Knopffarbe. Bis 16.10.2026 teilte sich die
     Zielzeit-Wertung das Magenta mit den Buttons — dadurch war nie klar, ob
     eine magentafarbene Fläche eine Wertung oder eine Handlung meint. Violett
     liegt im Farbkreis zwischen Blau und Magenta und hält beide zusammen.
     Blau und Violett bekommen nie einen Primär-Button. */
  --tts-accent: #1d4ed8;
  --tts-accent-light: #3b82f6;
  --tts-accent-soft: #e8eefc;
  --tts-accent-border: #c2d4f7;
  --tts-accent-text: #1e3a8a;

  --tts-target: #7c3aed;
  --tts-target-light: #a78bfa;
  --tts-target-soft: #f2ecfd;
  --tts-target-border: #ddcdf9;
  --tts-target-text: #5b21b6;

  /* Neutrale Töne MIT Magenta-Beimischung statt der fremden Slate-Grautöne
     (#64748b, #94a3b8, …), die aus einem anderen Design-System stammten und im
     Dark Mode nicht mitwanderten. Leicht rosé getönt, damit Grau im TTS-Kontext
     nie kalt-fremd wirkt. */
  --tts-ink: #2a0d1c;
  --tts-muted: #7a4560;
  --tts-faint: #a06a85;
  --tts-line: #f2d3e4;
}

/* Dark Mode: Die Tokens oben sind für helle Flächen gesetzt. Hier die
   Akzent-/Neutral-Töne anheben, damit sie auf dunklem Grund lesbar bleiben.
   Beide Schreibweisen abdecken (explizite Wahl + Systemeinstellung). */
body.tts-theme[data-theme="dark"],
:root[data-theme="dark"] body.tts-theme {
  --tts-accent: #7fa8f5;
  --tts-accent-light: #9dbdf9;
  --tts-accent-soft: #17254a;
  --tts-accent-border: #2e4a87;
  --tts-accent-text: #c3d8fb;
  --tts-target: #b396f7;
  --tts-target-light: #c9b4fa;
  --tts-target-soft: #2a1f4d;
  --tts-target-border: #4b3a85;
  --tts-target-text: #ddcdfb;
  --tts-ink: #f4e8ef;
  --tts-muted: #c9a3b8;
  --tts-faint: #a8859a;
  --tts-line: #4a2b3c;
}

/* ── Eigene Zeile in Ranglisten ───────────────────────────────────────────────
   „Wo stehe ich?" ist die erste Frage vor jeder Rangliste. Die Zeile des
   eingeloggten Users wird deshalb in jeder TTS-Liste hervorgehoben; gesetzt
   wird .is-self von leaderboard.js (selfClass) und trail-trophy.js.

   Bewusst ZENTRAL und für BEIDE Tabellenklassen: .lb-table steht auf der
   Ranglisten-Seite, .fest-lb-table in den aufklappbaren Gesamtwertungen der
   Series-Seite. Vorher lag die Regel inline in leaderboard.html und griff
   deshalb nur dort. Magenta (Marke) statt Indigo: Es geht um den Läufer
   selbst, nicht um Struktur. */
.lb-table tr.is-self td,
.fest-lb-table tr.is-self td {
  background: var(--lobby-brand-soft, #fbe3ef);
  color: var(--lobby-brand-text, #a1145f);
  font-weight: 700;
}
/* Linke Akzentkante über die erste Zelle — als inset-Schatten, damit das
   Tabellenraster unberührt bleibt (ein border würde die Spalten verschieben). */
.lb-table tr.is-self td:first-child,
.fest-lb-table tr.is-self td:first-child {
  box-shadow: inset 4px 0 0 var(--lobby-green, #d61f82);
}
/* Platz- und Punktespalte tragen sonst eigene Farben, die den Marken-Ton
   überschreiben würden. */
.lb-table tr.is-self .lb-rank,
.lb-table tr.is-self .lb-points,
.fest-lb-table tr.is-self strong {
  color: var(--lobby-brand-text, #a1145f);
}
/* Eigene Zeile je WERTUNG (TTS): blau = Bestzeit, violett = Zielzeit — statt
   Magenta. Gleiche Spezifität wie oben, gewinnt durch spätere Position; dunkle
   Schrift (--tts-ink flippt im Dark-Mode mit). */
.lb-table--time tr.is-self td,
.fest-lb-table--time tr.is-self td {
  background: var(--tts-accent-soft, #e8eefc);
  color: var(--tts-ink, #111);
}
.lb-table--time tr.is-self td:first-child,
.fest-lb-table--time tr.is-self td:first-child {
  box-shadow: inset 4px 0 0 var(--tts-accent, #1d4ed8);
}
.lb-table--time tr.is-self .lb-rank,
.lb-table--time tr.is-self .lb-points,
.fest-lb-table--time tr.is-self strong { color: var(--tts-ink, #111); }
.lb-table--target tr.is-self td,
.fest-lb-table--target tr.is-self td {
  background: var(--tts-target-soft, #f2ecfd);
  color: var(--tts-ink, #111);
}
.lb-table--target tr.is-self td:first-child,
.fest-lb-table--target tr.is-self td:first-child {
  box-shadow: inset 4px 0 0 var(--tts-target, #7c3aed);
}
.lb-table--target tr.is-self .lb-rank,
.lb-table--target tr.is-self .lb-points,
.fest-lb-table--target tr.is-self strong { color: var(--tts-ink, #111); }
/* „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; }
/* Die früheren Pill-Regeln für die Ranglisten-Links je Etappe
   ([data-stage-lb] / [data-stage-target-lb]) sind entfallen: Die Etappenkarten
   tragen diese Links nicht mehr, der Weg zu den Etappenwertungen führt über den
   Gesamtwertungs-Knopf. */

/* 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-section-title { color: #6f0e42; }
/* Die Etappen-Überschrift im dunklen Marken-Magenta (wie .fest-section-title) —
   Blau/Violett bleiben den beiden Wertungen vorbehalten. Diese Regel muss hier
   stehen (nicht nur im <style> der Series-Seite), weil
   `body.tts-theme .fest-stage-name` sonst die dortige Farbe überschreibt. */
body.tts-theme .fest-stage-name { 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; }
/* Wertungs-Buttons: helle Tints mit dunkler Schrift (Lesbarkeits-Vorgabe) —
   blau = Bestzeit, violett = Zielzeit. Kein Vollton: Blau/Violett bekommen
   nie einen Primär-Button. Stehen NACH --primary/--soft (gleiche Spezifität,
   Position entscheidet); --tts-ink flippt im Dark-Mode über die Token mit. */
body.tts-theme .lobby-btn--time {
  background: var(--tts-accent-soft, #e8eefc);
  border-color: var(--tts-accent-border, #c2d4f7);
  color: var(--tts-ink, #111);
}
body.tts-theme .lobby-btn--time:hover { border-color: var(--tts-accent, #1d4ed8); }
body.tts-theme .lobby-btn--target {
  background: var(--tts-target-soft, #f2ecfd);
  border-color: var(--tts-target-border, #ddcdf9);
  color: var(--tts-ink, #111);
}
body.tts-theme .lobby-btn--target:hover { border-color: var(--tts-target, #7c3aed); }
/* 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, in der Farbe ihrer Wertung. */
body.tts-theme .fest-target-fields .lobby-input { border-color: var(--tts-target-border, #ddcdf9); }
body.tts-theme .fest-target-fields .lobby-input:focus { border-color: var(--tts-target, #7c3aed); }

/* ─── Primär-Buttons im TTS-Kontext ──────────────────────────────────────────
   .lobby-btn--submit zieht --lobby-brand-gradient. Die Variable ist auf dem
   html-Element aus --lobby-green zusammengesetzt; body.tts-theme überschreibt
   --lobby-green aber erst auf body, und Custom-Properties lösen dort auf, wo sie
   DEKLARIERT sind. Ergebnis: „Etappe ansehen und starten", „Anmeldung speichern"
   und „Urkunde erzeugen" kamen im TTS-Kontext arena-GRÜN heraus.
   Dieselbe Falle wie bei der Sprungleiste — hier zentral gelöst, damit sie nicht
   auf jeder neuen TTS-Seite erneut zuschlägt. */
body.tts-theme .lobby-btn--submit {
  background: linear-gradient(135deg, #a1145f 0%, #d61f82 55%, #e0218a 100%);
  box-shadow: 0 2px 14px rgba(214, 31, 130, .35);
  color: #fff;
}

/* ─── Statusliste der beiden Wertungen (Anmeldeblock oben) ───────────────────
   Eine Zeile je Wertung mit Farbpunkt. Der Punkt trägt dieselbe Farbe wie die
   Ergebnis-Karte und der Ranglisten-Knopf der jeweiligen Wertung — damit lernt
   man die Zuordnung einmal und erkennt sie überall wieder. */
/* Zwei-Spalten-Raster: links die Bezeichnung, rechts der Wert. Das Raster ist
   der Punkt — nur so stehen alle Werte exakt untereinander, egal wie lang die
   Bezeichnung links ausfällt. Mit Flexbox je Zeile rutschten sie gegeneinander. */
.fest-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  align-items: baseline;
  font-size: .82rem;
  color: var(--tts-ink, #2a0d1c);
}
.fest-status-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.fest-status-dot--time   { background: var(--tts-accent, #1d4ed8); }
.fest-status-dot--target { background: var(--tts-target, #7c3aed); }
.fest-status-name { color: var(--tts-muted, #7a4560); }
/* Die Etappen der Zielzeit-Wertung rücken unter den Farbpunkt ein, damit die
   Zugehörigkeit ohne zweiten Punkt erkennbar bleibt. */
.fest-status-name--sub { padding-left: 16px; font-size: .8rem; }
.fest-status-val { min-width: 0; }

/* Gesamtwertungs-Knopf mit zweiter Zeile: Er führt zur Gesamtwertung UND zu den
   Etappenwertungen — seit die Etappenkarten ihre eigenen Ranglisten-Links
   verloren haben, ist er der einzige Weg dorthin.
   Der Selektor nennt BEIDE Klassen mit Absicht: .lobby-btn--soft steht weiter
   unten in dieser Datei und setzt display:inline-block. Bei gleicher
   Spezifität gewann die spätere Regel — die zweite Zeile klebte dadurch ohne
   Trennung an der ersten („GesamtwertungEtappenwertung"). */
.lobby-btn.fest-overall-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.25;
}
.fest-overall-btn-sub {
  font-size: .76rem;
  font-weight: 600;
  opacity: .72;
}
/* „Zeit eintragen" ist eine offene Aufgabe, kein Zustand — deshalb in der
   Handlungsfarbe, aber ohne Knopf-Optik (es ist nur ein Hinweis). */
.fest-status-todo {
  color: var(--lobby-brand-text, #a1145f);
  font-weight: 700;
}

/* ─── Ergebnis-Karten der beiden Wertungen (Etappenkarte, nach dem Lauf) ─────
   EIN Gerüst für beide Wertungen, unterschieden nur durch die Farbe. Vorher war
   die Bestzeit-Wertung unbeschrifteter Fließtext und die Zielzeit-Wertung eine
   gerahmte Karte — die beiden sahen aus wie Haupt- und Nebensache, statt wie
   zwei gleichrangige Wertungen.

   Farbzuordnung nach der Rollentrennung weiter oben:
     Bestzeit-Wertung → Blau    (--tts-accent-*)
     Zielzeit-Wertung → Violett (--tts-target-*)
   Beide treten hier als getönte Fläche auf, nie als Vollfarbe — es sind
   Informationsblöcke, keine Knöpfe. */
.fest-result {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 12px;
  font-size: .82rem;
}
.fest-result--time {
  border-color: var(--tts-accent-border, #c2d4f7);
  background: var(--tts-accent-soft, #e8eefc);
  color: var(--tts-accent-text, #1e3a8a);
}
.fest-result--target {
  border-color: var(--tts-target-border, #ddcdf9);
  background: var(--tts-target-soft, #f2ecfd);
  color: var(--tts-target-text, #5b21b6);
}
.fest-result-head {
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 6px;
}
.fest-result-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
/* Fußzeile: bei der Zielzeit die Abweichung, bei der Bestzeit der Hinweis auf
   die ausstehende Auswertung. Die Trennlinie erbt die Textfarbe des Modifiers,
   damit sie in beiden Welten stimmt. */
.fest-result-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid currentColor;
  border-top-color: inherit;
  opacity: .95;
  font-size: .9rem;
}
.fest-result--time .fest-result-foot { border-top-color: var(--tts-accent-border, #c2d4f7); }
.fest-result--target .fest-result-foot { border-top-color: var(--tts-target-border, #ddcdf9); }
.fest-result-pct { opacity: .75; }

/* ─── Gesamtwertung, inline aufgeklappt (in den Wertungs-Karten) ─────────── */
/* Trennlinie bewusst neutral (--tts-line): Der Bereich klappt in BEIDEN
   Wertungs-Karten auf — eine Wertungsfarbe hier wäre in einer der beiden
   Karten immer die falsche. */
.fest-overall {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tts-line, #f2d3e4);
}
.fest-overall-head {
  font-weight: 700;
  font-size: .84rem;
  margin-bottom: 8px;
}

/* ─── Tempo-Anzeige der Zielzeit-Wertung ──────────────────────────────────────
   Zeigt unter der Vorschau, wie sportlich die gewählte Zielzeit ist, und warnt,
   wenn sie aus dem Erwartungs-Fenster der Serie fällt (Admin: „Schnellste/
   Langsamste Pace"). Erscheint nur, wenn die Serie diese Werte gesetzt hat.

   Durchgehend über Tokens gefärbt, damit Light UND Dark ohne Zusatzregeln
   funktionieren. Zwei Zustände:
     .is-in   → Violett, die Farbe der Zielzeit-Wertung
     .is-warn → semantische Ampelfarbe; die bleibt bewusst orange, weil ihr
                Signal Bedeutung trägt (siehe Kommentar oben am
                tts-theme-Block). */
.fest-pace-gauge {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .78rem;
  line-height: 1.4;
}
.fest-pace-gauge.is-in {
  background: var(--tts-target-soft, #f2ecfd);
  border-color: var(--tts-target-border, #ddcdf9);
  color: var(--tts-target-text, #5b21b6);
}
.fest-pace-gauge.is-warn {
  background: var(--lobby-warn-soft);
  border-color: var(--lobby-warn-border);
  color: var(--lobby-warn-text);
}
.fest-pace-gauge-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
/* Der Zahlenwert rechts — tritt gegenüber der Einstufung bewusst zurück. */
.fest-pace-gauge-val {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.fest-pace-gauge-note { margin: 4px 0 0; }

/* Skala-Leiste: fünf Stufen nebeneinander, die aktuelle hervorgehoben.
   Auf schmalen Displays dürfen die Namen umbrechen statt zu überlaufen. */
.fest-pace-scale {
  display: flex;
  gap: 3px;
  margin-top: 7px;
}
.fest-pace-step {
  flex: 1;
  padding: 3px 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  font-size: .64rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .6;
}
.fest-pace-step.is-active {
  background: var(--lobby-green);
  color: #fff;
  font-weight: 700;
  opacity: 1;
}
/* 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/arena-line/qr-code.svg);     mask-image: url(../assets/img/icons/arena-line/qr-code.svg); }
.lobby-panel-icon--record::after { -webkit-mask-image: url(../assets/img/icons/arena-line/record.svg); mask-image: url(../assets/img/icons/arena-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/arena-line/record.svg);  mask-image: url(../assets/img/icons/arena-line/record.svg); }
.lobby-valueprop-icon--collect { -webkit-mask-image: url(../assets/img/icons/arena-line/trophy.svg);  mask-image: url(../assets/img/icons/arena-line/trophy.svg); }
.lobby-valueprop-icon--compare { -webkit-mask-image: url(../assets/img/icons/arena-line/chart.svg);   mask-image: url(../assets/img/icons/arena-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; }
/* Ranopoly-Karte im Ranopoly-Blau wie die App (§4g): Marken-Tokens nur auf der Karte umbiegen —
   Rahmen, Streifen links, Hover-Linie, Ring und Puls folgen damit von selbst. */
.lobby-challenge--ter {
  --lobby-green: var(--ter-accent);
  --lobby-green-dark: var(--ter-accent);
  --lobby-brand-border: color-mix(in srgb, var(--ter-accent) 45%, transparent);
  --lobby-accent-line: linear-gradient(90deg, #1d4ed8 0%, var(--ter-accent) 100%);
  --lobby-glow: 0 0 0 1px color-mix(in srgb, var(--ter-accent) 25%, transparent);
}
.lobby-challenge--ter .lobby-challenge-tag--green { background: #1d4ed8; }   /* weiße Schrift braucht das satte Blau */

/* ── 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); }

/* „Level 5 erreicht" in der Check-in-Bestätigung: Zahl im Kreis wie im Stand, kurz aufleuchtend. */
.lobby-scan-level {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 0; padding: 14px 16px;
  border-radius: var(--lobby-radius);
  background: var(--lobby-brand-soft);
  animation: lobby-scan-level-in .5s cubic-bezier(.2, 1.4, .4, 1) both .15s;
}
.lobby-scan-level-num {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lobby-brand-gradient); box-shadow: var(--lobby-brand-edge), 0 3px 8px -2px rgba(0, 0, 0, .3);
  color: var(--lobby-on-brand); font-size: 1.5rem; font-weight: 800;
}
.lobby-scan-level-title { font-size: 1.1rem; font-weight: 800; color: var(--lobby-brand-text); }
.lobby-scan-level-sub { font-size: .8rem; color: var(--lobby-text-muted); margin-top: 2px; }
@keyframes lobby-scan-level-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lobby-scan-level { animation: none; } }
.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-brand-gradient);
  box-shadow: var(--lobby-brand-glow), var(--lobby-brand-edge);
  color: var(--lobby-on-brand);
}
.lobby-btn--submit:hover { filter: brightness(1.06); }
.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 */
}

/* Rechts neben der Kachel, alles mittig: Avatar groß im Band ÜBER der Linie, der Nickname
   direkt darunter UNTER der Linie; Titel bzw. Schriftzug bündig mit der Kachel-Unterkante. */
.challenge-hero-aside {
  flex: 1; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  text-align: center;
}
.challenge-hero-user {
  display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%;
  margin-top: -10px;              /* Avatar (52px) endet mit Luft über der Bandkante */
  color: var(--lobby-text); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.challenge-hero-user[hidden] { display: none; }
.challenge-hero-user .lobby-header-avatar { flex-shrink: 0; width: 52px; height: 52px; border-width: 2px; }
.challenge-hero-user .lobby-header-avatar--initial { font-size: 1.4rem; }
html.sportooe-theme .challenge-hero-user .lobby-header-avatar { border-color: #e2001a; }
.challenge-hero-user .lobby-header-user-name {
  max-width: 100%; font-size: .95rem; font-weight: 800; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.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); }

/* ── Runden (Jahres-Event, Challenge-Infoseite) ──────── */
.challenge-round-list {
  list-style: none;
  margin: 0;
  padding: 0 14px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
}
.challenge-round {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--lobby-border);
}
.challenge-round:first-child { border-top: 0; }
.challenge-round-no {
  flex: 0 0 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lobby-surface-2);
  font-size: .8rem;
  font-weight: 800;
  color: var(--lobby-text-muted);
}
.challenge-round-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.challenge-round-title { font-weight: 700; font-size: .95rem; }
.challenge-round-dates { font-size: .8rem; color: var(--lobby-text-muted); }
.challenge-round-state { font-size: .82rem; font-weight: 700; color: var(--lobby-text-muted); white-space: nowrap; }
.challenge-round--current .challenge-round-no { background: var(--lobby-green); color: #fff; }
.challenge-round--current .challenge-round-title,
.challenge-round--current .challenge-round-state { color: var(--lobby-brand-text); }
.challenge-round--past { opacity: .6; }

/* ── 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; }
/* Abzeichen ohne eigene Grafik: Pokal-Linienicon in Markenfarbe (statt Emoji). */
.lobby-badge-fallback {
  display: inline-block;
  width: 34px;
  height: 34px;
  background: var(--lobby-brand-text);
  -webkit-mask: url(../assets/img/icons/arena-line/trophy.svg) center / contain no-repeat;
  mask: url(../assets/img/icons/arena-line/trophy.svg) center / contain no-repeat;
}
.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. */
/* Stempelpass (PO 2026-10-18): Papierseite mit Punktraster, Deckblatt im Markenverlauf.
   Tinte primär = Markenfarbe (Stufen), sekundär = Zweitfarbe (besondere Abzeichen). */
:root { --pass-paper: #fffdf8; --pass-paper-line: #efe7d6; --pass-dash: #d9d0bf; --pass-faint: #8a8170; --pass-ink-2: #1c6fb0; }
html.sportooe-theme { --pass-ink-2: #004876; }
/* Arena ist dunkel, solange nicht ausdrücklich hell (gleiches Muster wie die Tokens oben). */
:root:not([data-theme="light"]) { --pass-paper: #1d2420; --pass-paper-line: #2a332d; --pass-dash: #4a554d; --pass-faint: #a3ad9f; --pass-ink-2: #6fb3ea; }
.pass-book { background: var(--pass-paper); border-radius: 18px; overflow: hidden; box-shadow: var(--lobby-shadow); border: 1px solid var(--pass-paper-line); }
.pass-cover { position: relative; padding: 16px 70px 14px 16px; background: var(--lobby-brand-gradient); color: var(--lobby-on-brand); box-shadow: var(--lobby-brand-edge); }
.pass-cover-title { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.2; color: inherit; }
.pass-cover-sub { margin: 2px 0 0; font-size: .82rem; opacity: .9; }
.pass-cover-level {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid currentColor;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 800; line-height: 1;
}
.pass-cover-level small { font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.pass-page {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; padding: 18px 10px 16px;
  background-image: radial-gradient(var(--pass-paper-line) 1px, transparent 1px); background-size: 14px 14px;
}
.pass-stamp { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; }
.pass-ink {
  --ink: var(--lobby-brand-text);
  position: relative; width: 84px; height: 84px; border-radius: 50%; margin-bottom: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 9px;
  border: 2.5px solid var(--ink); color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.pass-ink::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 60%, transparent); }
.pass-ink--secondary { --ink: var(--pass-ink-2); }
.pass-ink--open { --ink: var(--pass-faint); border: 2px dashed var(--pass-dash); background: none; }
.pass-ink--open::before { display: none; }
/* Nie mitten im Wort trennen: Kurzformen (stampName) passen, lange Wörter etwas kleiner. */
.pass-ink-name { font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
.pass-ink-name--long { font-size: .5rem; letter-spacing: .02em; }
.pass-ink-date { font-size: .6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pass-ink-img { width: 26px; height: 26px; object-fit: contain; }
.pass-ink--open .pass-ink-img { filter: grayscale(1); opacity: .5; }
/* Leicht schräg aufgedrückt — je Abzeichen fest (id), damit nichts beim Neuladen springt. */
.tilt-a { transform: rotate(-9deg); } .tilt-b { transform: rotate(6deg); } .tilt-c { transform: rotate(-3deg); } .tilt-d { transform: rotate(10deg); }
.pass-stamp-title { font-size: .74rem; font-weight: 700; line-height: 1.2; color: var(--lobby-text); }
.pass-stamp-sub { font-size: .7rem; color: var(--pass-faint); }
.pass-live { color: var(--lobby-green); font-weight: 700; }
/* Gemeinde-Ziel im Pass: Ring (conic-gradient) + Beitrag, darunter ein Mini-Stempel je Runde. */
.pass-town { padding: 16px; border-top: 1px dashed var(--pass-dash); }
.pass-town-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--lobby-text); }
html.sportooe-theme .pass-town-title { color: #004876; }
.pass-town-rule { margin: 2px 0 0; font-size: .74rem; font-weight: 700; color: var(--pass-faint); font-variant-numeric: tabular-nums; }
.pass-town-sub { margin: 4px 0 12px; font-size: .84rem; line-height: 1.45; color: var(--lobby-text); }
.pass-town-main { display: flex; align-items: center; gap: 14px; }
.pass-town-ring {
  --pct: 0;
  flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--lobby-brand-text) calc(var(--pct) * 1%), var(--pass-paper-line) 0);
}
.pass-town-ring > span {
  width: 66px; height: 66px; border-radius: 50%; background: var(--pass-paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
}
.pass-town-ring b { font-size: 1.25rem; font-weight: 800; color: var(--lobby-brand-text); font-variant-numeric: tabular-nums; }
.pass-town-ring small { font-size: .62rem; color: var(--pass-faint); }
.pass-town-facts { min-width: 0; font-size: .78rem; color: var(--pass-faint); display: flex; flex-direction: column; gap: 4px; }
.pass-town-mine { font-size: .9rem; color: var(--lobby-text); }
.pass-town-mine b { color: var(--lobby-brand-text); font-size: 1.05rem; }
.pass-town-rounds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; justify-items: center; }
.pass-ink--mini { width: 58px; height: 58px; padding: 0 5px; margin: 0; }
.pass-ink--mini::before { inset: 4px; }
.pass-ink--mini .pass-ink-name { font-size: .5rem; }
.pass-ink--mini .pass-ink-date { font-size: .52rem; }
.pass-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px dashed var(--pass-dash); font-size: .8rem; color: var(--pass-faint); }
.pass-foot b { color: var(--lobby-brand-text); font-variant-numeric: tabular-nums; }

/* ── 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/arena-line/qr-code.svg) center / contain no-repeat;
  mask: url(../assets/img/icons/arena-line/qr-code.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;
}
/* Level-Zeile unter den Kacheln (Vorbild Garmin): Zahl im Kreis (Handeln-Optik), Balken
   innerhalb der Stufe, „Noch 45 Punkte bis Level 5". */
.challenge-level {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px; padding: 12px 14px;
  background: var(--lobby-surface); border-radius: var(--lobby-radius); box-shadow: var(--lobby-shadow);
}
.challenge-level-badge {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lobby-brand-gradient); box-shadow: var(--lobby-brand-edge), 0 2px 4px -1px rgba(0, 0, 0, .25);
  color: var(--lobby-on-brand); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.challenge-level-body { flex: 1; min-width: 0; }
.challenge-level-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .92rem; }
.challenge-level-row span { color: var(--lobby-text-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.challenge-level-bar { height: 6px; margin: 6px 0 5px; background: var(--lobby-surface-2); border-radius: 3px; overflow: hidden; }
.challenge-level-bar > span { display: block; height: 100%; background: var(--lobby-brand-gradient); border-radius: 3px; }
.challenge-level-next { font-size: .78rem; color: var(--lobby-text-muted); }

/* Fortschrittszeile unter „Dein Sportjahr": „Noch 2 Check-ins bis Bronze." */
.challenge-stand-next { margin: 8px 2px 0; font-size: .84rem; font-weight: 600; color: var(--lobby-brand-text); }
.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;
  /* Ebene 2 „Navigieren" (PO 2026-10-15): leicht erhaben = antippbar, aber neutral. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
html[data-theme="light"] .challenge-chip:not([aria-current="true"]) { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .7); }
.challenge-chip:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
/* Aktiv: Verlauf + Lichtkante wie Ebene 1, aber ohne farbigen Schatten — leiser als ein Knopf. */
.challenge-chip[aria-current="true"] {
  background: var(--lobby-brand-gradient);
  border-color: transparent;
  color: var(--lobby-on-brand);
  box-shadow: var(--lobby-brand-edge);
}
/* Sprungziele landen unter Header + Chips, nicht darunter versteckt. */
#secMit, #secProgress, #lbSlot, #secInfo { scroll-margin-top: 112px; }

.challenge-way {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--lobby-surface);
  border-radius: var(--lobby-radius);
  box-shadow: var(--lobby-shadow);
}
/* Icon-Kachel der Wege (PO 2026-10-15, Variante „Premium"): Markenfarbe als Verlauf
   von hell oben-links nach dunkel unten-rechts, Lichtkante oben, farbiger Schatten,
   Icon weiß. Reines CSS aus den Marken-Tokens — gilt für Arena-Grün wie Sportland-Rot. */
.challenge-way-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--lobby-brand-gradient);
  box-shadow: var(--lobby-brand-glow), var(--lobby-brand-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.challenge-way-icon span {
  display: block;
  width: 32px;
  height: 32px;
  background-color: #fff;
  -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; }
/* Knöpfe der Karten: gleiche Mindestbreite (ruhige rechte Spalte), knapper Schatten statt
   Glow, Lichtkante oben + dunkle Kante unten wie die Icon-Kacheln (PO 2026-10-15). */
.challenge-way-go {
  display: inline-block;
  box-sizing: border-box;
  min-width: 92px;
  text-align: center;
  line-height: 1.2;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 10px 16px;
  margin-left: 4px;
  border-radius: 999px;
  border: 0;
  background: var(--lobby-brand-gradient);
  box-shadow: 0 2px 4px -1px color-mix(in srgb, color-mix(in srgb, var(--lobby-green) 60%, #000) 45%, transparent),
              var(--lobby-brand-edge), inset 0 -1px 0 rgba(0, 0, 0, .14);
  color: var(--lobby-on-brand);
  white-space: nowrap;
  cursor: pointer;
}
.challenge-way-go:hover, .challenge-way-go:focus-visible { filter: brightness(1.06); }
.challenge-way-go:active { transform: translateY(1px); box-shadow: var(--lobby-brand-edge); }
.challenge-way-go:disabled { background: var(--lobby-surface-2); box-shadow: none; color: var(--lobby-text-muted); cursor: default; }
/* Verknüpfte Formate (Dach-Event): dieselbe Karte als Link. */
a.challenge-way--link { text-decoration: none; color: inherit; cursor: pointer; }
a.challenge-way--link:hover { box-shadow: var(--lobby-shadow-lift); }
.challenge-way-arrow { font-size: 1.1rem; font-weight: 700; color: var(--lobby-brand-text); padding: 0 4px; }
.challenge-way--muted { opacity: .72; }
.challenge-way--muted .challenge-way-icon { background: var(--lobby-surface-2); box-shadow: none; }
.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); }
/* Karte „Angebot eintragen" (Anbieter): Knopf ist ein Link, sonst wie die Wege. */
a.challenge-way-go { text-decoration: none; }
/* ── Angebots-Kalender (Tag / Woche / Monat) ─────────────────────── */
.cal-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.cal-views { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 12px; background: var(--lobby-surface-2); }
.cal-views button {
  appearance: none; border: 0; cursor: pointer; padding: 7px 0; border-radius: 9px;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--lobby-text-muted); background: none;
}
.cal-views button[aria-pressed="true"] { background: var(--lobby-surface); color: var(--lobby-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cal-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cal-filters::-webkit-scrollbar { display: none; }
.cal-note { margin: 0 2px 10px; font-size: .8rem; color: var(--lobby-text-muted); }
.cal-heading { margin: 16px 2px 6px; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--lobby-text); }
.cal-empty { margin: 8px 2px; font-size: .88rem; color: var(--lobby-text-muted); }
.cal-link { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--lobby-brand-text); }

/* Tagesstreifen: 14 Tage ab heute, Punkt = es gibt Angebote. */
.cal-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -2px; }
.cal-strip::-webkit-scrollbar { display: none; }
.cal-day {
  flex: 0 0 auto; width: 50px; padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  appearance: none; cursor: pointer; font: inherit; color: var(--lobby-text);
  background: var(--lobby-surface); border: 1px solid var(--lobby-border); border-radius: 12px;
}
.cal-day-wd { font-size: .66rem; font-weight: 700; color: var(--lobby-text-muted); }
.cal-day-num { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cal-day-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.cal-day.has-offers .cal-day-dot { background: var(--lobby-brand-text); }
.cal-day.is-selected { background: var(--lobby-brand-gradient); border-color: transparent; color: var(--lobby-on-brand); box-shadow: var(--lobby-brand-edge); }
.cal-day.is-selected .cal-day-wd { color: inherit; opacity: .85; }
.cal-day.is-selected .cal-day-dot { background: var(--lobby-on-brand); }

/* Blättern (Woche / Monat). */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 4px; }
.cal-nav-title { font-size: .95rem; font-weight: 800; }
.cal-nav-btn {
  appearance: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--lobby-border); background: var(--lobby-surface); color: var(--lobby-text);
  font: inherit; font-size: 1.3rem; line-height: 1;
}
.cal-nav-btn:disabled { opacity: .35; cursor: default; }

/* Monatsraster: Zahl + bis zu drei Punkte je Tag. */
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 10px 8px; background: var(--lobby-surface); border-radius: var(--lobby-radius); box-shadow: var(--lobby-shadow); }
.cal-month-wd { text-align: center; font-size: .66rem; font-weight: 700; color: var(--lobby-text-muted); padding-bottom: 2px; }
.cal-month-day {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit; color: var(--lobby-text);
  min-height: 42px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.cal-month-day.is-off { cursor: default; color: var(--lobby-text-muted); opacity: .45; }
.cal-month-num { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-month-day.is-today .cal-month-num { color: var(--lobby-brand-text); font-weight: 800; }
.cal-month-day.is-selected { background: var(--lobby-brand-gradient); color: var(--lobby-on-brand); box-shadow: var(--lobby-brand-edge); }
.cal-month-day.is-selected .cal-month-num { color: inherit; }
.cal-dots { display: flex; gap: 2px; height: 4px; }
.cal-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--lobby-brand-text); }
.cal-month-day.is-selected .cal-dots i { background: var(--lobby-on-brand); }

/* Terminzeilen: Uhrzeit links, Titel + „Anbieter · Ort", Knopf nur wenn jetzt offen. */
.cal-list { background: var(--lobby-surface); border-radius: var(--lobby-radius); box-shadow: var(--lobby-shadow); overflow: hidden; }
.cal-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--lobby-border); cursor: pointer; }
.cal-row:first-child { border-top: 0; }
.cal-row:active { background: var(--lobby-surface-2); }
.cal-row.is-open { background: var(--lobby-brand-soft); }
.cal-row.is-muted { opacity: .6; }
.cal-time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cal-time b { font-size: .9rem; font-weight: 800; color: var(--lobby-brand-text); }
html.sportooe-theme .cal-time b { color: #004876; }
.cal-time small { font-size: .7rem; color: var(--lobby-text-muted); }
.cal-title {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: .92rem; font-weight: 700; line-height: 1.25; color: var(--lobby-text);
}
.cal-title:focus-visible { outline: 2px solid var(--lobby-brand-text); outline-offset: 2px; border-radius: 4px; }
.cal-meta { margin-top: 2px; font-size: .76rem; color: var(--lobby-text-muted); overflow-wrap: anywhere; }

/* ── Angebots-Detailansicht (Vollbild, ?angebot=<id>) ── über Tab-Bar (20) und Sheets (30),
   unter Aktivitäts-Modal (60) und Scan-Overlay. */
body.offer-view-open { overflow: hidden; }
.offer-view {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: var(--lobby-bg);
  animation: offer-view-in .18s ease-out;
}
@keyframes offer-view-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .offer-view { animation: none; } }
.offer-view-bar {
  flex: 0 0 auto; display: flex; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) 8px 8px;
  background: var(--lobby-surface); border-bottom: 1px solid var(--lobby-border);
}
.offer-view-back {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 700; color: var(--lobby-brand-text);
  padding: 8px 10px; border-radius: 10px;
}
.offer-view-back span { font-size: 1.3rem; line-height: 1; vertical-align: -1px; margin-right: 2px; }
.offer-view-back:active { background: var(--lobby-surface-2); }
.offer-view-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 16px 24px; max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.offer-view-host { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lobby-text-muted); }
.offer-view-title { margin: 0 0 10px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--lobby-text); }
html.sportooe-theme .offer-view-title { color: #004876; }
.offer-view-body > .challenge-way-state { margin-left: 0; }
.offer-facts { margin: 18px 0 0; padding: 4px 16px; background: var(--lobby-surface); border-radius: var(--lobby-radius); box-shadow: var(--lobby-shadow); }
.offer-fact { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--lobby-border); }
.offer-fact:first-child { border-top: 0; }
.offer-fact dt { font-size: .78rem; font-weight: 700; color: var(--lobby-text-muted); padding-top: 1px; }
.offer-fact dd { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--lobby-text); }
.offer-view-text { margin: 18px 2px 0; font-size: .95rem; line-height: 1.55; color: var(--lobby-text); }
.offer-view-map { height: 160px; margin-top: 18px; border-radius: var(--lobby-radius); overflow: hidden; box-shadow: var(--lobby-shadow); isolation: isolate; }
.offer-view-route { display: inline-block; margin: 10px 2px 0; font-size: .88rem; font-weight: 700; color: var(--lobby-brand-text); }
.offer-view-action {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: var(--lobby-surface); border-top: 1px solid var(--lobby-border);
}
.offer-view-points { flex: 0 0 auto; font-size: .9rem; color: var(--lobby-text-muted); }
.offer-view-points b { font-size: 1.15rem; color: var(--lobby-brand-text); }
.offer-view-go { flex: 1; padding: 13px 18px; font-size: 1rem; }
.offer-view-note { flex: 1; font-size: .86rem; color: var(--lobby-text-muted); text-align: right; }
.offer-map-more {
  margin-top: 6px; padding: 4px 10px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 700;
  background: var(--lobby-brand-gradient); color: var(--lobby-on-brand);
}
.challenge-way--host { margin-top: 16px; }

/* 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: 40px; height: 40px; border-radius: 12px; }
.challenge-way-opt .challenge-way-icon span { width: 22px; height: 22px; }
.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);
}
/* Im .lobby-field schlagen „label = Block" und „input = 100 %" die Kästchen-Zeile —
   hier zurückholen: Kästchen 20 px, Text daneben mit Abstand, normales Gewicht. */
.lobby-field .lobby-check { display: flex; gap: 12px; margin-bottom: 0; font-weight: 400; }
.lobby-field .lobby-check input { width: 20px; height: 20px; flex-shrink: 0; }
.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); }

/* Gebietsspiel auf der Event-Seite (PO 2026-10-27): Stand je Bereich unter den Kacheln,
   Rangliste mit Bereichswahl und Reitern Felder/Erlaufen. */
/* Zeilen wie auf der Ranopoly-Seite (Neugestaltung Paket 6): feine Trenner, Pfeil rechts, kein Rahmen je Zeile. */
.challenge-ter-stand { list-style: none; margin: 8px 0 0; padding: 0; background: var(--lobby-surface-2); border-radius: 12px; overflow: hidden; }
.challenge-ter-stand li + li { border-top: 1px solid var(--lobby-border); }
.challenge-ter-stand-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 10px; align-items: baseline; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.challenge-ter-stand-row::after { content: '›'; color: var(--lobby-text-muted); font-size: 1.1rem; line-height: 1; }
.challenge-ter-stand-row:active { background: var(--lobby-surface); }
.challenge-ter-stand-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.challenge-ter-stand-type { font-size: .74rem; font-weight: 400; color: var(--lobby-text-muted); margin-left: 4px; }
/* Wert darf umbrechen, sonst drückt er den Namen auf null Breite und läuft darüber (Befund Handy 2026-11-03). */
.challenge-ter-stand-val { font-size: .84rem; color: var(--lobby-text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.challenge-ter-stand-val b { font-size: 1rem; color: var(--lobby-brand-text); }
/* Abstand zum Nachbarn: „−18" fehlt auf den Vorderen (gedämpft), „+8" Vorsprung (Platz 1, Markenfarbe) */
.challenge-ter-stand-gap { font-style: normal; font-weight: 700; margin-left: 10px; min-width: 2.6em; display: inline-block; color: var(--lobby-brand-text); }
.challenge-ter-stand-gap.is-behind { color: var(--lobby-text-muted); }
.challenge-ter-empty { margin: 8px 0 0; font-size: .88rem; color: var(--lobby-text-muted); }
/* Reiter Sammeln / Erobern der Local Legend (Grundform; Segment-Look unter html.ter-theme). */
.challenge-ter-tabs { display: flex; gap: 22px; margin: 0 0 10px; border-bottom: 1px solid var(--lobby-border); }
.challenge-ter-tab {
  padding: 8px 0 9px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0;
  background: none; color: var(--lobby-text-muted); font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer;
}
.challenge-ter-tab[aria-current="true"] { color: var(--lobby-text); border-bottom-color: var(--lobby-text); font-weight: 600; }
.challenge-ter-tab:focus-visible { outline: 2px solid var(--lobby-brand-text); outline-offset: 2px; }
.challenge-lb-row--self .challenge-lb-name { color: var(--lobby-brand-text); font-weight: 800; }

/* Ranopoly-Start: zwei Kacheln Sammeln/Erobern (Feinschliff unter html.ter-theme, §4g). */
.challenge-ter-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.challenge-ter-mode {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px;
  background: var(--lobby-surface); border-radius: var(--lobby-radius); box-shadow: var(--lobby-shadow);
}
.challenge-ter-mode-title { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lobby-text-muted); }
.challenge-ter-mode-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; }
.challenge-ter-mode-unit { font-size: .82rem; color: var(--lobby-text-muted); margin-bottom: 4px; }
.challenge-ter-lv {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; vertical-align: 1px;
  font-size: .68rem; font-weight: 700; background: var(--lobby-brand-soft); color: var(--lobby-brand-text);
}

/* ── Konto: Darstellung je Gerät, Dunkel (Standard) oder Hell (PO 2026-11-03). Wert hält brand-theme.js
   in localStorage (arena_theme); eine Partner-Marke setzt ihr eigenes Schema und gewinnt. ── */
.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.theme-pick-btn {
  display: grid; gap: 2px; justify-items: start; padding: 12px 14px; border: 1px solid var(--lobby-border); border-radius: 12px;
  background: var(--lobby-surface-2); color: var(--lobby-text); font: inherit; font-size: .95rem; font-weight: 600; text-align: left; cursor: pointer;
}
.theme-pick-btn small { font-size: .74rem; font-weight: 400; color: var(--lobby-text-muted); }
.theme-pick-btn[aria-checked="true"] { border-color: var(--lobby-brand-text); box-shadow: inset 0 0 0 1px var(--lobby-brand-text); }
.theme-pick-btn:focus-visible { outline: 2px solid var(--lobby-brand-text); outline-offset: 2px; }

/* ── Ranopoly-Start auf der Event-Seite (PO 2026-11-03, Regel „eine Information einmal"): Kacheln sind der
   Weg zur Karte, je Kachel Zahl + eine Zeile. Icons aus TrackerIcons. */
.ter-ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.challenge-ter-mode--tap { cursor: pointer; }
.challenge-ter-mode--tap:active { background: var(--lobby-surface-2); }
.challenge-ter-mode--tap:focus-visible { outline: 2px solid var(--ter-accent); outline-offset: 2px; }
/* Modus-Auswahl (ranopoly-design.md §4e): Zeichen + Wort im Titel; Sammeln = gefülltes Sechseck in der
   Sammelfarbe, Erobern = blaue Fahne und leuchtender Rand. Rot/Bernstein bleiben in den Erobern-Zeilen. */
.challenge-ter-mode-title { display: flex; align-items: center; gap: 6px; }
.challenge-ter-mode-title .ter-ic { width: 16px; height: 16px; vertical-align: 0; }
.challenge-ter-mode--collect .challenge-ter-mode-title { color: var(--lobby-text); }
.challenge-ter-mode--collect .challenge-ter-mode-title .ter-ic { fill: var(--ter-collect); stroke: var(--ter-collect); }
.challenge-ter-mode--conquer { box-shadow: var(--lobby-shadow), inset 0 0 0 1.5px var(--ter-accent), 0 0 16px -8px var(--ter-accent); }
.challenge-ter-mode--conquer .challenge-ter-mode-title, .challenge-ter-mode--conquer .challenge-ter-mode-title .ter-ic { color: var(--ter-accent); }
.challenge-ter-mode-value { font-weight: 700; }
.challenge-ter-row {
  display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: .84rem; color: var(--lobby-text);
  background: none; border: 0; padding: 0; font-family: inherit; text-align: left; text-decoration: none; cursor: default;
}
.challenge-ter-row .ter-ic { color: var(--lobby-text-muted); }
.challenge-ter-row--link { cursor: pointer; }
.challenge-ter-row--link.challenge-ter-mode-link--take { color: var(--ter-take); }
.challenge-ter-row--link.challenge-ter-mode-link--lost { color: var(--ter-lost); }
.challenge-chip .ter-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }

/* ── Local Legend (PO 2026-11-03): Podest für die ersten drei, darunter Zeilen; „Deine Plätze" nur „1. / 2" ── */
.challenge-ter-sub { margin: 18px 0 6px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lobby-text-muted); }
.challenge-ter-podium { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; }
.challenge-ter-podium-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 12px 8px 10px; text-align: center;
  background: var(--lobby-surface-2); border: 1px solid var(--lobby-border); border-radius: 12px;
}
.challenge-ter-podium-slot--1 { padding-top: 18px; padding-bottom: 14px; border-color: var(--ter-gold); }
.challenge-ter-podium-slot--2 { border-color: var(--ter-silver); }
.challenge-ter-podium-slot--3 { border-color: var(--ter-bronze); }
.challenge-ter-podium-slot--empty { background: transparent; border-style: dashed; min-height: 60px; }
.challenge-ter-podium-rank { font-size: .78rem; font-weight: 700; color: var(--lobby-text-muted); }
.challenge-ter-podium-slot--1 .challenge-ter-podium-rank { color: var(--ter-gold); }
.challenge-ter-podium-slot--2 .challenge-ter-podium-rank { color: var(--ter-silver); }
.challenge-ter-podium-slot--3 .challenge-ter-podium-rank { color: var(--ter-bronze); }
.challenge-ter-podium-name { font-size: .86rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-ter-podium-slot.is-me .challenge-ter-podium-name { color: var(--lobby-brand-text); }
.challenge-ter-podium-value { font-size: 1.3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.challenge-ter-podium-slot--1 .challenge-ter-podium-value { font-size: 1.6rem; }
.challenge-ter-podium-value small { display: block; font-size: .7rem; font-weight: 400; color: var(--lobby-text-muted); }
.challenge-ter-podium .challenge-ter-lv { margin: 4px 0 0; }
.rs-sphere-mark { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.rs-sphere-mark svg { display: block; }
.challenge-ter-medal { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.challenge-ter-medal--1 { background: var(--ter-gold); }
.challenge-ter-medal--2 { background: var(--ter-silver); }
.challenge-ter-medal--3 { background: var(--ter-bronze); }
.challenge-ter-stand-row.is-current .challenge-ter-stand-name { color: var(--lobby-brand-text); }
.challenge-ter-stand-val b { color: var(--lobby-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   Ranopoly-Farbwelt (ranopoly-design.md §4g, PO 2026-11-04): <html class="ter-theme"> auf allen Ranopoly-
   Seiten (Event-Start, Karte, Statistik). Gleiche Tokens wie die Lobby, andere Werte: Blau/Weiß auf
   dunklem Spielbrett-Grund statt Arena-Grün. Hell (Konto-Schalter) bleibt hell, nur Grün → Blau.
   ═══════════════════════════════════════════════════════════════════════════ */
html.ter-theme:not([data-theme="light"]) {
  --lobby-green: #2563eb;  --lobby-green-dark: #1d4ed8;  --lobby-brand-text: #93c5fd;
  --lobby-brand-soft: #16223a;  --lobby-brand-soft-border: #2c4672;  --lobby-brand-border: rgba(96, 165, 250, .45);
  --lobby-bg: #070c17;  --lobby-surface: #0f1828;  --lobby-surface-2: #16223a;
  --lobby-border: #1c2a44;  --lobby-border-strong: #2c3d5c;
  --lobby-header: #070c17;  --lobby-header-fade: #070c17;  --lobby-tabbar: #0a1220;
  --lobby-glass: rgba(15, 24, 40, .94);  --lobby-media-bg: #0a1220;
  --lobby-text: #f1f5f9;  --lobby-text-muted: #9aa8bf;  --lobby-neutral: #6b7a90;
  --lobby-ok-soft: #16223a;  --lobby-ok-text: #93c5fd;  --lobby-ok-border: #2c4672;
  --lobby-info-soft: #16223a;  --lobby-info-text: #93c5fd;
  --lobby-glow: 0 0 0 1px rgba(96, 165, 250, .3);
  --lobby-accent-line: #60a5fa;
}
html.ter-theme[data-theme="light"] {
  --lobby-green: #1d4ed8;  --lobby-green-dark: #1e40af;  --lobby-brand-text: #1d4ed8;
  --lobby-brand-soft: #e0eaff;  --lobby-brand-soft-border: #bfd3fb;  --lobby-brand-border: rgba(29, 78, 216, .4);
  --lobby-header: #0f1b33;  --lobby-header-fade: #e8eef8;  --lobby-bg: #eef2f8;
}
/* Kopf: ruhig, ohne Arena-Logo, Titel mittig, rechts der Level-Ring. */
html.ter-theme .lobby-header { border-bottom: 1px solid var(--lobby-surface-2); min-height: 56px; }
html.ter-theme .lobby-header-logo { display: none; }
html.ter-theme .lobby-header-title { position: absolute; left: 50%; transform: translateX(-50%); max-width: 60%; font-weight: 700; font-size: 1.06rem; }
html.ter-theme .lobby { background: var(--lobby-bg); }
.rs-head-level { width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--lobby-on-brand); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.rs-head-level:focus-visible { outline: 2px solid var(--ter-accent); outline-offset: 2px; }
html.rs-in-legend .rs-head-level, html.rs-in-legend .challenge-actionbar { display: none; }
.rs-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.rs-ring svg { position: absolute; inset: 0; }
.rs-ring b { position: relative; font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; }
.rs-ring-track { fill: none; stroke: var(--lobby-border-strong); stroke-width: 3; }
.rs-ring-arc { fill: none; stroke: var(--ter-accent); stroke-width: 3; stroke-linecap: round; }
/* Kugel-Ring (ranopoly-kugel.md §7): außen 12 Penta-Segmente (hell = erreicht), innen der Hexa-Bogen in Spielblau. */
.rs-sphere b { font-size: .82rem; }
.rs-sphere-penta-track, .rs-sphere-penta, .rs-sphere-hexa-track, .rs-sphere-hexa { fill: none; stroke-width: 2.4; }
.rs-sphere-penta-track { stroke: var(--lobby-border-strong); }
.rs-sphere-penta { stroke: var(--lobby-text); }
.rs-sphere-hexa-track { stroke: var(--lobby-border); }
.rs-sphere-hexa { stroke: var(--ter-accent); stroke-linecap: round; }
.rs-level .rs-sphere b { font-size: 1.7rem; }
.rs-level .rs-sphere circle { stroke-width: 2.2; }
.rs-sphere-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.rs-sphere-line { display: flex; align-items: baseline; gap: 6px; }
.rs-sphere-line b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-sphere-line span { color: var(--lobby-text-muted); font-size: .86rem; }

/* Start: Spielbrett, Kacheln, Zeilen. Abstände statt Abschnitts-Titel. */
.rs-start { display: flex; flex-direction: column; gap: 14px; }
.rs-start[hidden], .rs-legend[hidden] { display: none; }
.rs-board { display: block; padding: 22px 12px; border-radius: 18px; background: var(--lobby-media-bg); border: 1px solid var(--lobby-border); text-decoration: none; }
.rs-board:focus-visible { outline: 2px solid var(--ter-accent); outline-offset: 2px; }
.rs-board-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rs-board-at { fill: var(--lobby-surface); stroke: var(--ter-accent); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ter-accent) 65%, transparent)); }
.rs-board-dot { fill: var(--ter-collect); }
.rs-board-dot--own { fill: var(--ter-mine); }
.rs-start .challenge-ter-modes { gap: 12px; margin-top: 0; }
html.ter-theme .challenge-ter-mode { padding: 14px; border-radius: 18px; border: 1px solid var(--lobby-border-strong); box-shadow: none; }
html.ter-theme .challenge-ter-mode--conquer { border: 1.5px solid var(--ter-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--ter-accent) 35%, transparent); }
html.ter-theme .challenge-ter-mode-value { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
html.ter-theme .challenge-ter-mode .challenge-ter-row { margin-top: 10px; font-size: .84rem; }
.rs-rows { display: flex; flex-direction: column; border-radius: 14px; background: var(--lobby-surface); border: 1px solid var(--lobby-border); overflow: hidden; }
.rs-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; width: 100%; box-sizing: border-box;
  border: 0; background: none; color: var(--lobby-text); font: inherit; font-size: .9rem; text-align: left; text-decoration: none; cursor: pointer;
}
.rs-row + .rs-row, .rs-badges + .rs-row { border-top: 1px solid var(--lobby-border); }
.rs-row:active { background: var(--lobby-surface-2); }
.rs-row:focus-visible { outline: 2px solid var(--ter-accent); outline-offset: -2px; }
.rs-row .ter-ic { color: var(--lobby-text-muted); width: 20px; height: 20px; vertical-align: 0; }
.rs-row-text { flex: 1; min-width: 0; }
.rs-row-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-row-val.is-gold { color: var(--ter-gold); }
.rs-chev { color: var(--lobby-text-muted); font-size: 1.15rem; line-height: 1; }
/* Story-Zeile im selben Zeilen-Look, Abspiel-Zeichen im blauen Kreis. */
.rs-start #myStatusSlot > * + * { margin-top: 14px; }
html.ter-theme .ter-story-teaser { border-radius: 14px; background: var(--lobby-surface); border: 1px solid var(--lobby-brand-soft-border); }
html.ter-theme .ter-story-teaser-ic { width: 30px; height: 30px; background: var(--ter-accent); color: var(--lobby-bg); }
html.ter-theme .ter-story-teaser-ic .ter-ic { width: 12px; height: 12px; fill: currentColor; }

/* Local Legend (#legend): Reiter = Modi (Segmente), Gebiet als eine Auswahl, Podest wie bisher. */
html.ter-theme .challenge-ter-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px; border: 1px solid var(--lobby-border); border-radius: 14px; background: var(--lobby-surface); }
html.ter-theme .challenge-ter-tab { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 10px; font-weight: 600; }
html.ter-theme .challenge-ter-tab .ter-ic { width: 15px; height: 15px; vertical-align: 0; }
html.ter-theme .challenge-ter-tab--collect .ter-ic { fill: currentColor; }
html.ter-theme .challenge-ter-tab[aria-current="true"] { background: var(--lobby-surface-2); color: var(--lobby-text); box-shadow: inset 0 0 0 1.5px var(--ter-accent), 0 0 10px color-mix(in srgb, var(--ter-accent) 30%, transparent); font-weight: 700; }
.rs-area { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; margin: 0 0 14px; border-radius: 14px; background: var(--lobby-surface); border: 1px solid var(--lobby-border); color: var(--lobby-text-muted); }
.rs-area::after { content: '▾'; color: var(--lobby-text-muted); pointer-events: none; }
.rs-area-sel { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; color: var(--lobby-text); font: inherit; font-size: .95rem; font-weight: 700; appearance: none; -webkit-appearance: none; cursor: pointer; }
.rs-area-sel:focus-visible { outline: 2px solid var(--ter-accent); outline-offset: 2px; }
.rs-area-sel option, .rs-area-sel optgroup { background: var(--lobby-surface); color: var(--lobby-text); }
html.ter-theme .challenge-ter-podium-slot--1 { background: var(--lobby-surface-2); box-shadow: 0 0 14px color-mix(in srgb, var(--ter-gold) 25%, transparent); }
html.ter-theme .challenge-ter-podium-slot.is-me .challenge-ter-podium-name,
html.ter-theme .challenge-ter-stand-row.is-current .challenge-ter-stand-name { color: var(--lobby-brand-text); }

/* Blatt von unten (Level, Regeln) — ranopoly-start.js openSheet(). */
.rs-sheet-root { position: fixed; inset: 0; z-index: 9000; }
.rs-sheet-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .2s var(--lobby-ease); }
.rs-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; margin: 0 auto; max-width: 640px;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; box-sizing: border-box;
  background: var(--lobby-surface); border-top: 1px solid var(--lobby-border-strong); color: var(--lobby-text);
  transform: translateY(100%); transition: transform .22s var(--lobby-ease);
}
.rs-sheet-root.is-open .rs-sheet-overlay { opacity: 1; }
.rs-sheet-root.is-open .rs-sheet { transform: none; }
.rs-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--lobby-border-strong); margin: 0 auto 6px; }
.rs-sheet-close { position: absolute; top: 6px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--lobby-text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.rs-sheet-close:focus { outline: none; }
.rs-sheet-close:focus-visible { outline: 2px solid var(--ter-accent); outline-offset: -4px; }
.rs-sheet-body { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.rs-level { display: flex; align-items: center; gap: 18px; }
.rs-level .rs-ring b { font-size: 1.8rem; }
.rs-level .rs-ring-track, .rs-level .rs-ring-arc { stroke-width: 2.6; }
.rs-level-points { display: flex; align-items: baseline; gap: 6px; }
.rs-level-points b { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rs-level-points span, .rs-level-next { color: var(--lobby-text-muted); font-size: .88rem; }
.rs-level-next { margin-top: 4px; }
.rs-sheet .rs-rows { background: var(--lobby-bg); }
.rs-badges { padding: 4px 12px 12px; }
.rs-badges[hidden] { display: none; }
.rs-badges .challenge-section { margin: 0; padding: 0; background: none; border: 0; }
.rs-badges .challenge-section-title { display: none; }
.rs-info .challenge-section { margin: 0 0 14px; }
@media (prefers-reduced-motion: reduce) { .rs-sheet, .rs-sheet-overlay { transition: none; } }
.rs-aside { display: none; }   /* Karten rechts nur im PC-Layout */
/* PC: links Brett und Kacheln, rechts Story und Zeilen (PC bleibt zweispaltig, PO 2026-11-03). */
@media (min-width: 900px) {
  html.ter-theme .lobby-main:has(.rs-start), html.ter-theme .lobby-main:has(.ab-wrap) { max-width: 1080px; }
  .rs-start { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-auto-flow: dense; gap: 16px 24px; align-items: start; }
  .rs-start > .rs-board, .rs-start > .challenge-join, .rs-start .challenge-ter-modes { grid-column: 1; }
  .rs-start > #myStatusSlot { display: contents; }
  .rs-start .ter-story-teaser, .rs-start .rs-rows, .rs-start .rs-aside { grid-column: 2; }
  /* Karten rechts (challenge.js renderPcSphere/renderPcLegend): Kugel-Stand und Top 3 der Local Legend. */
  .rs-start .rs-aside { display: grid; gap: 16px; align-content: start; grid-row: 1 / span 3; }   /* neben Brett und Kacheln, schiebt sie nicht */
  .rs-card { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--lobby-surface); border: 1px solid var(--lobby-border); }
  .rs-card[hidden] { display: none; }
  .rs-start .rs-card .rs-rows { grid-column: auto; background: var(--lobby-bg); }
  .rs-start .rs-aside > .rs-rows, .rs-start .rs-aside > .ter-story-teaser { grid-column: auto; margin: 0; }
  .rs-card-k { display: flex; justify-content: space-between; gap: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lobby-text-muted); }
  .rs-card-k em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: .78rem; color: var(--lobby-text); }
  .rs-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .rs-top-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 10px; font-size: .9rem; }
  .rs-top-row.is-me { background: color-mix(in srgb, var(--ter-accent) 14%, transparent); }
  .rs-top-row.is-me .rs-top-name { color: var(--ter-accent); }
  .rs-top-rank { font-weight: 700; color: var(--lobby-text-muted); font-variant-numeric: tabular-nums; }
  .rs-top-rank.is-gold { color: #fbbf24; }
  .rs-top-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rs-top-val { font-size: .8rem; color: var(--lobby-text-muted); font-variant-numeric: tabular-nums; }
  .rs-top-val b { font-size: .95rem; color: var(--lobby-text); }
  .rs-card-more { display: flex; justify-content: space-between; align-items: center; padding: 12px 6px 0; border-top: 1px solid var(--lobby-border); color: var(--ter-accent); font-weight: 600; font-size: .88rem; text-decoration: none; }
  /* Mit Karte entfallen Ring im Kopf und Zeile „Local Legend" (eine Information einmal). */
  html.rs-aside-sphere .rs-head-level { display: none; }
  html.rs-aside-legend .rs-start .rs-rows a[href="#legend"] { display: none; }
  /* Rangliste (#legend) am PC: Reiter über beide Spalten, links Gebiet + Podest + Liste, rechts „Deine Plätze". */
  .rs-legend:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "tabs tabs" "area stand" "rank stand"; gap: 0 24px; align-items: start; }
  .rs-legend #terRankBox { display: contents; }
  .rs-legend .challenge-ter-tabs { grid-area: tabs; }
  .rs-legend .rs-area { grid-area: area; }
  .rs-legend #terRankSlot { grid-area: rank; }
  .rs-legend #terStandSlot { grid-area: stand; }
  .rs-legend #terStandSlot .challenge-ter-sub:first-child { margin-top: 0; }
  .rs-start #myStatusSlot > * + * { margin-top: 0; }
}

/* ── Ranopoly: untere Leiste (ranopoly-kugel.md §9 N4, PO 2026-11-06) ──────────────────────────────────────
   Fünf Plätze, Aufzeichnen-Puck in der Mitte; gebaut von ranopoly-nav.js auf Start, Karte und Statistik.
   html.rs-nav-on: Seiten lassen unten Luft, die alte Aktionsleiste des Starts entfällt. */
:root { --rs-nav-h: 64px; }
.rs-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: var(--lobby-tabbar); border-top: 1px solid var(--lobby-border);
}
.rs-nav-item, .rs-nav-rec {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--rs-nav-h); margin: 0; padding: 0; border: 0; background: none; font: inherit;
  font-size: .68rem; font-weight: 600; color: var(--lobby-text-muted); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rs-nav-item .ter-ic { width: 22px; height: 22px; stroke: currentColor; }
.rs-nav-item[aria-current="page"] { color: var(--ter-accent); }
.rs-nav-item:focus-visible, .rs-nav-rec:focus-visible { outline: 2px solid var(--ter-accent); outline-offset: -2px; border-radius: 10px; }
.rs-nav-rec { position: relative; justify-content: flex-end; padding-bottom: 7px; }
.rs-nav-rec i {
  position: absolute; top: -16px; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .45), 0 0 0 4px var(--lobby-tabbar);
  display: grid; place-items: center;
}
.rs-nav-rec i::after { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #fff; }   /* Aufnahme-Punkt */
.rs-nav-rec:active i { transform: scale(.96); }
html.rs-nav-on .lobby-main { padding-bottom: calc(var(--rs-nav-h) + env(safe-area-inset-bottom, 0px)); }
html.rs-nav-on .challenge-actionbar { display: none; }
/* Breite Fenster (Start, Statistik): schwebende Pille statt Leiste über die ganze Breite. */
@media (min-width: 900px) {
  html.rs-nav-on:not(.ter-web) .rs-nav { left: 50%; right: auto; bottom: 16px; width: 520px; transform: translateX(-50%); padding: 0 8px; border: 1px solid var(--lobby-border); border-radius: 999px; box-shadow: var(--lobby-shadow); }
  html.rs-nav-on:not(.ter-web) .lobby-main { padding-bottom: calc(var(--rs-nav-h) + 32px); }
}
/* Karte am PC (html.ter-web ab 900 px, wie das Spalten-Layout in territory.html): Reiterzeile oben in der rechten
   Spalte, keine schwebende Leiste. Darunter (Handy-Browser hat ebenfalls html.ter-web) bleibt die Leiste fixiert. */
@media (min-width: 900px) {
  html.ter-web .rs-nav { position: static; left: auto; width: auto; transform: none; margin-bottom: 4px; padding: 0 4px; border: 1px solid var(--lobby-border); border-radius: var(--lobby-radius); background: var(--lobby-surface); box-shadow: none; }
  html.ter-web .rs-nav-item, html.ter-web .rs-nav-rec { height: 56px; }
  html.ter-web .rs-nav-rec { justify-content: center; padding-bottom: 0; }
  html.ter-web .rs-nav-rec i { position: static; width: 32px; height: 32px; box-shadow: none; }
  html.ter-web .rs-nav-rec i::after { width: 10px; height: 10px; }
  html.ter-web.rs-nav-on .lobby-main { padding-bottom: 40px; }
}
/* Gerät mit Maus als Hauptzeiger (PC, Laptop): kein GPS-Lauf möglich, darum kein Aufzeichnen-Puck — vier Reiter.
   Bewusst über den Zeiger statt über die Breite: ein schmales PC-Fenster bleibt ein PC, ein Tablet quer kein PC.
   Handy, Tablet und die App (Touch) behalten den Puck. */
@media (hover: hover) and (pointer: fine) {
  .rs-nav { grid-template-columns: repeat(4, 1fr); }
  .rs-nav-rec { display: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  html.rs-nav-on:not(.ter-web) .rs-nav { width: 440px; }
}
/* PC: Reiterzeile oben im Inhalt statt schwebender Pille (ranopoly-nav.js setzt .rs-nav--top), Aussehen wie auf
   der Karte. Unten keine Luft mehr für die Pille nötig. */
html.rs-nav-on .rs-nav.rs-nav--top { position: static; left: auto; right: auto; bottom: auto; width: auto; max-width: 560px; transform: none;
  margin: 0 auto 16px; padding: 0 4px; border: 1px solid var(--lobby-border); border-radius: var(--lobby-radius);
  background: var(--lobby-surface); box-shadow: none; }
html.rs-nav-on .rs-nav.rs-nav--top .rs-nav-item { height: 56px; }
html.rs-nav-on.rs-nav-top .lobby-main { padding-bottom: 40px; }