/* ═══ Design-Tokens · Richtung B „Club" (E2, Design-Masterplan) ═══════════
   Quelle der Wahrheit für Farben, Typografie, Radien, Linien, Motion.
   Ruhig-premium: warmes Papier, Haarlinien statt Schatten, Serifen-Akzente,
   Blau nur als Linien-/Text-Akzent. Nur-hell (Entscheid Aug 2026).
   Neue/umgestellte Screens nutzen NUR Tokens bzw. .rb-*-Klassen — keine
   neuen Hardcode-Hexwerte. Tailwind-Mapping: tailwind.config.js.          */
:root {
  /* Flächen */
  --rb-paper: #FAF9F7;         /* App-Grund, warmes Papier */
  --rb-surface: #FFFFFF;       /* Karten */
  --rb-surface-warm: #F0EDE7;  /* gefüllte Neutralfläche (Avatare, stille Chips) */
  /* Tinte (warme Grauachse) */
  --rb-ink: #22252A;
  --rb-ink-soft: #77726A;
  --rb-ink-faint: #9B958C;
  /* Linien */
  --rb-hairline: #E7E4DE;
  --rb-hairline-soft: #ECEAE5;
  /* Marke — Blau als Akzent, nicht als Fläche */
  --rb-brand: #29ABE2;         /* Markenblau (Logo, kleine Füllungen) */
  --rb-brand-deep: #0E86C0;    /* Links/Aktionstext auf hell */
  --rb-brand-ink: #0B6FA8;     /* betonter Text (z.B. eigene Zeile) */
  --rb-brand-wash: #F3F8FB;    /* zarte Blau-Fläche */
  --rb-brand-line: #CFE4F0;    /* blaue Haarlinie */
  /* Auszeichnung + Semantik */
  --rb-gold: #8A6D3B;          /* Rang 1, Auszeichnungen */
  --rb-good: #2E7D5B;  --rb-good-wash: #E7F2EC;
  --rb-bad:  #B0453E;  --rb-bad-wash:  #F7E9E7;
  /* Typografie — abgeleitet aus dem Logo (fettes geometrisches Sans-R mit
     runden Bögen und weichen Enden). Keine Serife: die widerspricht der Marke.
     Display = dieselbe Familie, nur schwerer und enger gesetzt. */
  --rb-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --rb-font-ui: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  /* Form */
  --rb-r-sm: 10px;
  --rb-r: 12px;
  --rb-r-lg: 14px;
  --rb-r-sheet: 18px;
  /* Schatten: Richtung B ist schattenlos; einzig Sheets/Overlays heben ab */
  --rb-shadow-sheet: 0 -8px 40px -18px rgba(34,37,42,0.25);
  /* Motion */
  --rb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rb-dur: 0.22s;
}

/* ─── .rb-* Basiskomponenten (Richtung B) ────────────────────────────────
   Bewusst klein gehalten: das sind die Bausteine, auf die E3/E4 umstellen. */
/* Wie die Wortmarke neben dem Logo: schwer und eng — das ist die Stimme der Marke. */
.rb-display { font-family: var(--rb-font-display); font-weight: 800; letter-spacing: -0.025em; }
.rb-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rb-ink-faint); }
.rb-num { font-variant-numeric: tabular-nums; }

.rb-card { background: var(--rb-surface); border: 1px solid var(--rb-hairline); border-radius: var(--rb-r-lg); }
.rb-card-accent { border-left: 3px solid var(--rb-brand); }
.rb-row + .rb-row { border-top: 1px solid var(--rb-hairline-soft); }

.rb-btn { font-family: var(--rb-font-ui); font-weight: 700; border-radius: var(--rb-r-sm); transition: transform 0.12s var(--rb-ease), opacity 0.12s; }
.rb-btn:active { transform: scale(0.98); }
.rb-btn-primary { background: var(--rb-ink); color: var(--rb-paper); }
.rb-btn-primary:disabled { background: var(--rb-surface-warm); color: var(--rb-ink-faint); }
.rb-btn-brand { background: var(--rb-brand-deep); color: #fff; }
.rb-btn-quiet { background: transparent; color: var(--rb-brand-deep); border: 1px solid var(--rb-brand-line); }
.rb-link { color: var(--rb-brand-deep); font-weight: 700; }

.rb-seg { display: flex; gap: 2px; border: 1px solid var(--rb-hairline); border-radius: 999px; padding: 3px; background: transparent; }
.rb-seg-btn { flex: 1; text-align: center; padding: 7px 4px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--rb-ink-soft); white-space: nowrap; }
.rb-seg-btn.on { background: var(--rb-ink); color: var(--rb-paper); }

.rb-tabs { display: flex; border-bottom: 1px solid var(--rb-hairline); }
.rb-tab { flex: 1; text-align: center; padding: 9px 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--rb-ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rb-tab.on { color: var(--rb-ink); border-bottom-color: var(--rb-ink); }

.rb-input { background: var(--rb-surface); border: 1px solid var(--rb-hairline); border-radius: var(--rb-r); font-family: var(--rb-font-ui); color: var(--rb-ink); }
.rb-input:focus { outline: none; border-color: var(--rb-brand-deep); }

/* Eigene Zeile in Ranglisten (matches.js renderLeaderboardDB; auch Scroll-Ziel) */
.lb-row-me { background: var(--rb-brand-wash); border-color: var(--rb-brand-line); }

/* Einstellungs-/Menülisten (Konto-Screen): Karte + Haarlinien-Trenner */
.rb-list { background: var(--rb-surface); border: 1px solid var(--rb-hairline); border-radius: var(--rb-r-lg); overflow: hidden; }
.rb-list-label { padding: 14px 16px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rb-ink-faint); }
.rb-list-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; text-align: left; transition: background 0.14s var(--rb-ease); }
.rb-list-item + .rb-list-item { border-top: 1px solid var(--rb-hairline-soft); }
.rb-list-item:active { background: var(--rb-surface-warm); }
.rb-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--rb-surface-warm); color: var(--rb-ink-soft); }
.rb-badge-alert { background: var(--rb-bad-wash); color: var(--rb-bad); }

/* Schalter (Benachrichtigungen): aus = neutral, an = Tinte. Rot war irreführend
   (las sich wie ein Fehlerzustand statt „ausgeschaltet"). */
.rb-switch { width: 44px; height: 26px; border-radius: 999px; position: relative; flex: none; background: var(--rb-surface-warm); border: 1px solid var(--rb-hairline); transition: background 0.18s var(--rb-ease), border-color 0.18s var(--rb-ease); }
.rb-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--rb-surface); border: 1px solid var(--rb-hairline); transition: transform 0.18s var(--rb-ease); }
.rb-switch.on { background: var(--rb-ink); border-color: var(--rb-ink); }
.rb-switch.on .rb-switch-knob { transform: translateX(18px); border-color: transparent; }

/* ── Landing (Spur P) ─────────────────────────────────────────────────────
   Nur für ausgeloggte Desktop-Besucher. Richtung B: Papier, Haarlinien,
   Tinte-Buttons; keine erfundenen Fotos — die Typografie trägt die Seite. */
.lp-wrap { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 7vh, 88px) 24px 64px; }
.lp-hero { text-align: center; padding-bottom: clamp(40px, 6vh, 72px); border-bottom: 1px solid var(--rb-hairline); }
.lp-mark { width: 60px; height: 60px; border-radius: 14px; margin: 0 auto 22px; display: block; background: var(--rb-surface); }
.lp-h1 { font-family: var(--rb-font-display); font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.03; color: var(--rb-ink); margin: 10px 0 0; text-wrap: balance; }
.lp-lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--rb-ink-soft);
  max-width: 46ch; margin: 18px auto 0; text-wrap: pretty; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.lp-btn { padding: 13px 26px; font-size: 0.95rem; }
.lp-proof { margin-top: 20px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rb-ink-faint); }

.lp-loop { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px;
  padding: clamp(40px, 6vh, 68px) 0; border-bottom: 1px solid var(--rb-hairline); }
.lp-step-n { font-family: var(--rb-font-display); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.14em; color: var(--rb-brand-deep); font-variant-numeric: tabular-nums; }
.lp-step h2 { font-family: var(--rb-font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: 1.22rem; color: var(--rb-ink); margin: 10px 0 8px; }
.lp-step p { font-size: 0.94rem; line-height: 1.6; color: var(--rb-ink-soft); margin: 0; }

.lp-clubs { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
  padding: clamp(36px, 5vh, 56px) 0; }
.lp-h2 { font-family: var(--rb-font-display); font-weight: 800; letter-spacing: -0.025em;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--rb-ink); margin: 0 0 8px; }
.lp-clubs-p { font-size: 0.95rem; line-height: 1.6; color: var(--rb-ink-soft); max-width: 52ch; margin: 0; }

.lp-foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center;
  padding-top: 28px; border-top: 1px solid var(--rb-hairline); font-size: 0.82rem; color: var(--rb-ink-faint); }
.lp-foot .rb-link { font-size: 0.82rem; }

/* ── Sheet-Physik (E5) ────────────────────────────────────────────────────
   Alle Bottom-Sheets tragen .rb-sheet. Der Hintergrund blendet auf, das Panel
   fährt hoch — iOS-nah gedämpft (0.32,0.72,0,1). Die Animation startet neu,
   sobald .hidden fällt (display:none → flex setzt CSS-Animationen zurück). */
.rb-sheet { animation: sheetFade 0.2s ease-out; }
.rb-sheet > * { animation: sheetUp 0.28s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rb-sheet, .rb-sheet > * { animation: none; }
}

/* ── Level-Held + Aussagekraft-Meter (E3.3) ──────────────────────────────
   Für eine Rating-App IST die Zahl die Identität — vorher war die ELO eine
   von vier gleich großen Zellen. Das Meter erklärt frühe Ausschläge als
   gewollt („kalibriert sich"), statt sie wie Zufall wirken zu lassen. */
.rb-level-hero { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.rb-level-num { font-family: var(--rb-font-display); font-size: 3rem; font-weight: 800;
  letter-spacing: -0.035em; line-height: 0.92; color: var(--rb-ink); font-variant-numeric: tabular-nums; }
.rb-level-unit { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rb-ink-faint); padding-bottom: 7px; }
.rb-level-tier { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; color: var(--rb-brand-ink); }
.rb-meter { height: 6px; border-radius: 4px; background: var(--rb-surface-warm);
  border: 1px solid var(--rb-hairline); overflow: hidden; }
.rb-meter > i { display: block; height: 100%; border-radius: 4px;
  background: var(--rb-brand-deep); transition: width 0.5s var(--rb-ease); }
.rb-meter-cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rb-ink-faint); }

/* ── Satz-Stepper (E3.2) ──────────────────────────────────────────────────
   Ergebnis eintragen ist der Auslöser des Kern-Loops — er muss ohne Tastatur
   gehen. Tippen bleibt möglich (Eingabefeld), ist aber nicht mehr nötig. */
.rb-set-row { display: flex; align-items: center; gap: 8px; }
/* styles.css lädt nach Tailwind: ohne diese Zeile schlüge display:flex das
   .hidden von Satz 3 (gleiche Spezifität, spätere Regel gewinnt). */
.rb-set-row.hidden { display: none; }
.rb-set-label { flex: none; width: 46px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rb-ink-faint); }
.rb-stepper { display: flex; align-items: center; gap: 2px; flex: 1; }
.rb-step-btn { flex: none; width: 38px; height: 44px; border-radius: var(--rb-r-sm);
  background: var(--rb-surface-warm); color: var(--rb-ink); font-size: 20px; font-weight: 700;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s var(--rb-ease), background 0.12s; }
.rb-step-btn:active { transform: scale(0.92); background: var(--rb-hairline); }
.rb-step-val { flex: 1; min-width: 0; height: 44px; text-align: center;
  font-family: var(--rb-font-display); font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--rb-ink);
  background: var(--rb-surface); border: 1px solid var(--rb-hairline);
  border-radius: var(--rb-r-sm); }
.rb-step-val:focus { outline: none; border-color: var(--rb-brand-deep); }
.rb-set-sep { flex: none; font-weight: 800; color: var(--rb-ink-faint); }
.rb-set-mark { flex: none; width: 20px; text-align: center; font-size: 15px; font-weight: 800; }
.rb-set-mark.ok  { color: var(--rb-good); }
.rb-set-mark.bad { color: var(--rb-bad); }

/* ── ELO-Reveal (E3.1): der Moment, in dem die Zahl sich bewegt ────────── */
.rb-reveal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(34,37,42,0.55); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s var(--rb-ease); }
.rb-reveal.on { opacity: 1; }
.rb-reveal-card { background: var(--rb-surface); border-radius: var(--rb-r-sheet); padding: 26px 22px 20px;
  width: 100%; max-width: 340px; text-align: center;
  transform: translateY(10px) scale(0.97); transition: transform 0.28s var(--rb-ease); }
.rb-reveal.on .rb-reveal-card { transform: none; }
.rb-reveal-nums { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 14px 0 12px; }
.rb-reveal-from { font-size: 1.15rem; font-weight: 700; color: var(--rb-ink-faint); }
.rb-reveal-arrow { color: var(--rb-ink-faint); font-size: 1rem; }
.rb-reveal-to { font-family: var(--rb-font-display); font-size: 2.6rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--rb-ink); line-height: 1; }
.rb-reveal-delta { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 0.95rem;
  padding: 5px 13px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.rb-reveal-delta.up      { background: var(--rb-good-wash); color: var(--rb-good); }
.rb-reveal-delta.down    { background: var(--rb-bad-wash);  color: var(--rb-bad); }
.rb-reveal-delta.neutral { background: var(--rb-surface-warm); color: var(--rb-ink-soft); font-size: 0.8rem; font-weight: 700; }
.rb-reveal-level { margin: 12px 0 0; font-size: 0.88rem; color: var(--rb-ink-soft); }
.rb-reveal-level b { color: var(--rb-ink); font-weight: 800; }
.rb-reveal-note { margin: 8px 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--rb-ink-faint); }
.rb-reveal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) {
  .rb-reveal, .rb-reveal-card { transition: none; }
}

.rb-skeleton { position: relative; overflow: hidden; background: var(--rb-surface-warm); border-radius: var(--rb-r-sm); }
.rb-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: rbShimmer 1.4s var(--rb-ease) infinite; }
@keyframes rbShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .rb-skeleton::after { animation: none; } }

/* ─── Base ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--rb-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: max(884px, 100dvh);
  overscroll-behavior: none;
  background: var(--rb-paper);
  color: var(--rb-ink);
}

/* Premium display-Headings: etwas engeres Tracking für mehr Präsenz */
h1, h2 { letter-spacing: -0.02em; }
/* Tabellarische Ziffern für Daten (Preise, ELO, Statistik) — sauber ausgerichtet */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* (Dark mode removed — app stays white + brand blue only) */

.material-symbols-outlined {
  /* Rounded statt Outlined → weicher, weniger „Android", mehr iOS/Premium-Feel */
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
}
/* Diese Regel lädt nach Tailwind und hat gleiche Spezifität wie .hidden —
   ohne die folgende Zeile blieb ein `hidden`-Icon sichtbar. */
.material-symbols-outlined.hidden { display: none; }

/* ─── Screen Router ──────────────────────────────────────────────────────── */
.screen { display: none; min-height: 100dvh; }
.screen.active { display: block; animation: fadeIn 0.22s cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) { .screen.active { animation: none; } }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Premium: gestaffeltes Einblenden von Listen-Karten ──────────────────
   Bewusst NUR transform (kein opacity:0) + fill backwards → Inhalt kann NIE
   unsichtbar „hängen bleiben", falls Animationen pausiert sind (Hintergrund-Tab). */
@keyframes cardIn {
  from { transform: translateY(16px); }
  to   { transform: none; }
}
.stagger > * { animation: cardIn 0.44s cubic-bezier(0.22,1,0.36,1) backwards; }
.stagger > *:nth-child(2) { animation-delay: 0.05s; }
.stagger > *:nth-child(3) { animation-delay: 0.10s; }
.stagger > *:nth-child(4) { animation-delay: 0.15s; }
.stagger > *:nth-child(5) { animation-delay: 0.20s; }
.stagger > *:nth-child(6) { animation-delay: 0.25s; }
.stagger > *:nth-child(n+7) { animation-delay: 0.30s; }
@media (prefers-reduced-motion: reduce) {
  .stagger > * { animation: none; }
}

/* Smooth click feedback on all interactive elements (iOS-friendly) */
button, [onclick], a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ─── Loading Skeletons ─────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite ease-in-out;
  border-radius: 0.5rem;
}
.skeleton-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.skeleton-line { height: 12px; border-radius: 4px; }

/* ─── Empty-State pretty box ───────────────────────────────────────────── */
.empty-state {
  background: #ffffff;
  border: 1px solid #eef1f4;
  border-radius: 1.25rem;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(17,24,39,0.05), 0 16px 32px -16px rgba(17,24,39,0.12);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  background: var(--rb-surface-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Bottom Nav ─────────────────────────────────────────────────────────── */
.nav-item {
  transition: color 0.18s ease;
  color: #9ca3af;
}
.nav-item.active { color: #29ABE2 !important; }
.nav-item .nav-pill {
  padding: 4px 12px;
  border-radius: 1rem;
  transition: background 0.18s ease;
}
.nav-item.active .nav-pill { background: rgba(41,171,226,0.10); }

/* ─── Chips ──────────────────────────────────────────────────────────────── */
.chip {
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.chip.active {
  background: var(--rb-ink) !important;
  color: #ffffff !important;
}
.chip:not(.active) {
  background: #f1f3f5 !important;
  color: #374151 !important;
}

/* ─── Cards (Premium: weiche, geschichtete Schatten) ──────────────────────── */
.court-card {
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: #ffffff;
  border: 1px solid #eef1f4;
  box-shadow: 0 2px 6px rgba(17,24,39,0.05), 0 16px 34px -14px rgba(17,24,39,0.16);
}
.court-card:active { transform: scale(0.97); }
.featured-court-card {
  min-width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);
  scroll-snap-align: center;
}
@media (hover: hover) {
  .court-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(17,24,39,0.06), 0 24px 46px -16px rgba(17,24,39,0.22); }
}

/* ─── Time Slots ─────────────────────────────────────────────────────────── */
.slot-available {
  cursor: pointer;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.slot-available:hover  { border-color: rgba(41,171,226,0.5); }
.slot-available:active { transform: scale(0.96); }
.slot-selected {
  background: var(--rb-ink) !important;
  color: var(--rb-paper) !important;
  border: 1.5px solid var(--rb-ink) !important;
}
.slot-booked {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
}

/* ─── Filter Sheet ───────────────────────────────────────────────────────── */
#filter-backdrop {
  position: fixed; inset: 0;
  background: rgba(17,24,39,0.4);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
#filter-backdrop.open { display: flex; }

/* ─── Liga sub-view toggle (Tabelle | Spielplan) ─────────────────────────── */
.liga-view-btn { color: #6b7280; }
.liga-view-btn.active { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ─── Bottom-Sheet slide-up (resting state visible — animation only on open) ── */
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
#topup-sheet:not(.hidden) .topup-panel { animation: sheetUp 0.24s cubic-bezier(0.32, 0.72, 0, 1); }

/* ─── Safe Area ──────────────────────────────────────────────────────────── */
.safe-bottom { padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px); }
.pb-nav { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* ─── Success Overlay ────────────────────────────────────────────────────── */
#success-overlay { animation: successPop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes successPop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Date picker dot ────────────────────────────────────────────────────── */
.date-today-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin: 0 auto;
  margin-top: 3px;
}

/* ─── Hero back button ───────────────────────────────────────────────────── */
.hero-back-btn {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 10;
  background: rgba(17,24,39,0.48);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  cursor: pointer;
  transition: background 0.15s;
}
.hero-back-btn:hover { background: rgba(17,24,39,0.62); }

/* ─── Booking confirm card ───────────────────────────────────────────────── */
.confirm-card {
  background: var(--rb-ink);
  border-radius: 2rem;
  padding: 2rem;
  color: var(--rb-paper);
  position: relative;
  overflow: hidden;
}
.confirm-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}

/* ─── Review stars ───────────────────────────────────────────────────────── */
.star-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ─── Duration picker ────────────────────────────────────────────────────── */
.dur-btn {
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  cursor: pointer;
  border: 1px solid #e5e7eb;
}
.dur-btn.selected {
  background: var(--rb-ink) !important;
  color: var(--rb-paper) !important;
  border-color: var(--rb-ink) !important;
}
.dur-btn:not(.selected) {
  background: #ffffff;
  color: #111827;
}

/* ─── Hero search bar ────────────────────────────────────────────────────── */
.hero-search {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

/* ─── Live tabs ─────────────────────────────────────────────────────────── */
/* E4: gleiche Segment-Sprache wie .compete-sport-btn — Tinte statt Marken-
   Blau, ohne Schlagschatten (Richtung B). */
.live-tab,
.book-section-tab,
.activity-tab {
  color: var(--rb-ink-soft) !important;
  background: transparent !important;
}
.live-tab.active,
.book-section-tab.active,
.activity-tab.active {
  color: var(--rb-paper) !important;
  background: var(--rb-ink) !important;
  box-shadow: none !important;
}

/* Spielen-Tabs — Richtung B (E2): Unterstrich statt gefüllter Pille */
.compete-tab {
  color: var(--rb-ink-faint);
  background: transparent;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.compete-tab.active {
  color: var(--rb-ink);
  border-bottom-color: var(--rb-ink);
}

/* Sport filter buttons (compete) — Richtung B: Tinte-gefüllt im Linien-Container */
.compete-sport-btn {
  color: var(--rb-ink-soft);
  background: transparent;
}
.compete-sport-btn.active {
  color: var(--rb-paper);
  background: var(--rb-ink);
}

/* ─── Betreiber-Dashboard Tabs ─────────────────────────────────────────── */
.op-tab {
  color: #6b7280 !important;
  background: transparent !important;
}
.op-tab.active {
  color: #ffffff !important;
  background: var(--rb-ink) !important;
}

/* ─── Betreiber-Dashboard Raster (Premium) ─────────────────────────────── */
#op-grid {
  min-width: max-content;
  padding-bottom: 4px;
}
.op-grid-inner {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.op-grid-body {
  margin-top: 0;
}
.op-cell {
  flex-shrink: 0;
  border-radius: 12px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.op-cell-corner {
  width: 44px;
  background: transparent;
  color: #b0b6c0;
  font-weight: 800;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.op-cell-head {
  width: 100px;
  padding: 8px 4px;
  background: linear-gradient(160deg,#1f2937 0%,#0f172a 100%);
  color: #fff;
  min-height: 50px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.22);
}
.op-court-name {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: -0.2px;
}
.op-court-surface {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.op-cell-time {
  width: 44px;
  background: transparent;
  color: #9ca3af;
  font-weight: 700;
  font-size: 10px;
  min-height: 50px;
}
.op-slot {
  width: 100px;
  min-height: 50px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  padding: 4px;
  position: relative;
}
.op-slot:active { transform: scale(0.95); }
/* Frei: dezent, fast leer — kein lautes Raster mehr */
.op-slot-free {
  background: #f6f7f9;
  border: 1px solid transparent;
}
.op-slot-free:hover {
  background: #eef6fc;
  box-shadow: inset 0 0 0 1.5px #bfe3f7;
}
.op-slot-late {
  background: #fafbfc;
  opacity: 0.5;
}
.op-slot-plus {
  color: #cbd2db;
  font-size: 16px;
  font-weight: 300;
}
.op-slot-free:hover .op-slot-plus { color: #29ABE2; }
/* Belegt: satte Verläufe + Tiefe = premium */
.op-slot-app {
  background: var(--rb-brand-deep);
}
.op-slot-app .op-slot-who { color: #fff; }
.op-slot-phone {
  background: var(--rb-clay, #b06a2c);
  box-shadow: 0 4px 12px rgba(234,88,12,0.30);
}
.op-slot-phone .op-slot-who { color: #fff; }
.op-slot-blocked {
  background: linear-gradient(145deg,#9ca3af 0%,#6b7280 100%);
  box-shadow: 0 3px 10px rgba(107,114,128,0.25);
}
.op-slot-blocked .op-slot-who { color: #fff; }
.op-slot-who {
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  word-break: break-word;
  letter-spacing: -0.1px;
}

/* ─── Coach Specialty Chips ─────────────────────────────────────────────── */
.coach-spec-chip {
  background: #f5f5f5;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.coach-spec-chip.active {
  background: var(--rb-ink);
  color: var(--rb-paper);
  border-color: var(--rb-ink);
}
.coach-spec-chip:active { transform: scale(0.96); }

/* ─── Tournament Bracket ────────────────────────────────────────────────── */
.bracket-grid {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  align-items: stretch;
}
.bracket-grid::-webkit-scrollbar { display: none; }

.bracket-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 180px;
  position: relative;
}

.bracket-match {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-bottom: 12px;
  position: relative;
  transition: transform 0.16s, box-shadow 0.16s;
}
.bracket-match:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

/* Connector lines from match to next round (right-side) */
.bracket-round:not(:last-child) .bracket-match::after {
  content: '';
  position: absolute;
  right: -14px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: #d1d5db;
}
/* Vertical connector pairing two matches */
.bracket-round:not(:last-child) .bracket-match:nth-child(odd)::before {
  content: '';
  position: absolute;
  right: -14px;
  top: 50%;
  width: 1.5px;
  height: calc(100% + 12px);
  background: #d1d5db;
}

.bracket-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 0.12s;
  min-height: 36px;
}
.bracket-slot:last-child { border-bottom: none; }
.bracket-slot:active { background: #f9fafb; }
.bracket-slot.empty {
  color: #9ca3af;
  font-size: 11px;
  font-style: italic;
  cursor: default;
  background: #fafafa;
}
.bracket-slot.winner {
  background: var(--rb-surface-warm);
  font-weight: 800;
  border-left: 3px solid #29ABE2;
  padding-left: 9px;
}
.bracket-slot.loser {
  opacity: 0.55;
}

.bracket-seed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: 4px;
}
.bracket-slot.winner .bracket-seed {
  background: #29ABE2;
  color: #fff;
}

.bracket-round-label {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  padding: 4px 10px;
  background: #f9fafb;
  border-radius: 12px;
  align-self: center;
}
.bracket-round:last-child .bracket-round-label {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

/* ─── Format Chips (Tournament) ─────────────────────────────────────────── */
.format-chip {
  background: #f5f5f5;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.format-chip.active {
  background: var(--rb-ink);
  color: var(--rb-paper);
  border-color: var(--rb-ink);
}
.format-chip:active { transform: scale(0.96); }

/* ─── League Chips ──────────────────────────────────────────────────────── */
.league-chip {
  background: #f5f5f5;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.league-chip.active {
  background: var(--rb-ink);
  color: var(--rb-paper);
  border-color: var(--rb-ink);
}
.league-chip:active { transform: scale(0.96); }

/* ─── Split Bill Chips ───────────────────────────────────────────────────── */
.split-chip {
  background: #f5f5f5;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.split-chip.active {
  background: var(--rb-ink);
  color: var(--rb-paper);
  border-color: var(--rb-ink);
}
.split-chip:active { transform: scale(0.96); }

/* ─── Image Carousel Dots ────────────────────────────────────────────────── */
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.55);
  transition: width 0.2s, background 0.2s;
}
.carousel-dot.active {
  width: 18px;
  background: #ffffff;
}

/* ─── Map Price Markers (Leaflet) ────────────────────────────────────────── */
.price-marker {
  background: transparent !important;
  border: none !important;
}
.price-marker-inner {
  background: #ffffff;
  color: #111827;
  border: 2px solid #29ABE2;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  position: relative;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
.price-marker-inner::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #29ABE2;
}
.price-marker.selected .price-marker-inner {
  background: var(--rb-ink);
  color: var(--rb-paper);
  transform: scale(1.15);
}
.price-marker.selected .price-marker-inner::after {
  border-top-color: #29ABE2;
}

/* Cluster bubble for dense venues (AirBnB-style) */
.cluster-marker {
  background: transparent !important;
  border: none !important;
}
.cluster-marker-inner {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #29ABE2;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  border-radius: 9999px;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.15s;
}
.cluster-marker-inner:active { transform: scale(0.94); }

/* Map screen needs full viewport — override .screen min-height behavior */
#screen-map { height: 100dvh; min-height: 100dvh; position: relative; }
#map-container { width: 100%; height: 100%; }
.leaflet-container { background: #f0f0f0; height: 100%; width: 100%; }

/* ─── Search Sheet Chips ─────────────────────────────────────────────────── */
.search-when-chip,
.search-surface-chip {
  background: #f5f5f5;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.search-when-chip.active,
.search-surface-chip.active {
  background: var(--rb-ink);
  color: var(--rb-paper);
  border-color: var(--rb-ink);
}
.search-when-chip:active,
.search-surface-chip:active { transform: scale(0.96); }

.search-players-chip {
  background: #f5f5f5;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.search-players-chip.active {
  background: var(--rb-ink);
  color: var(--rb-paper);
  border-color: var(--rb-ink);
}
.search-players-chip:active { transform: scale(0.95); }

/* ─── Sport toggle (Tennis / Padel) ─────────────────────────────────────── */
.sport-btn {
  color: #6b7280 !important;
  background: transparent !important;
  border: none;
}
.sport-btn.active {
  color: #ffffff !important;
  background: #29ABE2 !important;
}
.sport-btn .material-symbols-outlined {
  transition: color 0.15s;
}

/* ─── Section header ─────────────────────────────────────────────────────── */
.section-header {
  font-weight: 800;
  font-size: 20px;
  color: #111827;
  letter-spacing: -0.4px;
}

/* ─── White card base (Premium-Schatten) ──────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(17,24,39,0.06);
}

/* Premium-Schatten-Utility */
.shadow-premium {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(17,24,39,0.07) !important;
}
/* Tailwind shadow-sm app-weit aufwerten → mehr Tiefe, edler */
.shadow-sm {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(17,24,39,0.06) !important;
}
/* Weiße Karten bekommen einen Hauch weicheren Rand */
.bg-white.rounded-2xl, .bg-white.rounded-3xl { border-color: #eef0f3; }

/* ─── Sort/filter bar ────────────────────────────────────────────────────── */
.sort-bar {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

/* ─── Widget card ────────────────────────────────────────────────────────
   Weiße Schwebe-Karte (Flächen neutral, Marke nur als Akzent).
   --ink = die eine Hero-Ausnahme (Nächste Buchung), Signatur wie Compete-Hero. */
.widget-card {
  background: #ffffff;
  border: 1px solid rgba(17,24,39,0.05);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 14px 30px -18px rgba(17,24,39,0.14);
  overflow: hidden;
  position: relative;
  color: #111827;
}
.widget-card--ink {
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(41,171,226,0.28), transparent 55%),
    linear-gradient(150deg, #151f32 0%, #0b1220 100%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px -10px rgba(11,18,32,0.5);
  color: #ffffff;
}

/* ─── Full listing card (book courts) ───────────────────────────────────── */
.listing-card {
  background: #ffffff;
  border: 1px solid #eef1f4;
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(17,24,39,0.05), 0 18px 38px -16px rgba(17,24,39,0.18);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.listing-card:active { transform: scale(0.985); }
@media (hover: hover) {
  .listing-card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(17,24,39,0.07), 0 28px 52px -18px rgba(17,24,39,0.24); }
}

/* ─── Availability badge ─────────────────────────────────────────────────── */
.badge-available {
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.badge-limited {
  background: #fffbeb;
  color: #d97706;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — echtes Website-Layout (ab 900px)
   Top-Navigationsleiste statt Bottom-Tabs, breiter zentrierter Inhalt,
   Karten-Listen als mehrspaltiges Raster. Mobile-first bleibt unverändert.
   ═══════════════════════════════════════════════════════════════════════════ */
#desktop-nav { display: none; }

.auth-context-message {
  max-width: 18rem;
  padding: 0.75rem 0.9rem;
  border-radius: 1rem;
  background: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
}

.auth-guest-btn {
  background: #fff;
}

body[data-runtime="web"] .auth-brand-card {
  width: 6.5rem;
  height: 6.5rem;
  background: #fff !important;
  border: 1px solid #eef2f7;
  border-radius: 2rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  padding: 0.62rem;
}

body[data-runtime="web"] .auth-brand-logo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 1.45rem;
}

body[data-auth-blocked="true"] #desktop-nav,
body[data-auth-blocked="true"] #bottom-nav,
body[data-auth-blocked="true"]:not([data-auth-legal-open="true"]) #app-main,
body[data-auth-blocked="true"] .screen {
  visibility: hidden;
  pointer-events: none;
}

body[data-auth-blocked="true"][data-auth-legal-open="true"] .screen[id^="screen-legal-"] {
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 900px) {
  /* ── Top-Navigation ── */
  #desktop-nav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid #e9ebef;
  }
  .dn-inner {
    max-width: 1120px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.7rem 1.5rem;
  }
  .dn-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; color: #111827; }
  .dn-links { display: flex; align-items: center; gap: 0.15rem; }
  .dn-link { padding: 0.5rem 0.95rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.92rem; color: #6b7280; transition: background 0.15s, color 0.15s; }
  .dn-link:hover { background: #f3f4f6; color: #111827; }
  .dn-link.active { color: #29ABE2; background: #eaf6fc; }
  .dn-actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
  .dn-chip { display: flex; align-items: center; gap: 0.35rem; height: 40px; padding: 0 0.75rem; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; font-weight: 800; font-size: 0.85rem; color: #111827; box-shadow: 0 1px 4px rgba(0,0,0,0.07); }
  .dn-chip:hover { background: #f9fafb; }
  .dn-icon { width: 40px; height: 40px; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; color: #111827; }
  .dn-icon:hover { background: #f9fafb; }
  .dn-avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; border: 2px solid #29ABE2; cursor: pointer; }

  /* ── Bottom-Tabs aus, Inhalt breit & zentriert ── */
  nav.fixed.bottom-0 { display: none; }
  main { max-width: 1120px; margin-inline: auto; padding-inline: 0.5rem; }
  .pb-nav { padding-bottom: 2.5rem !important; }

  /* Doppelte Branding-Elemente ausblenden (jetzt im Top-Nav) */
  .screen .header-wallet-chip { display: none !important; }
  #discover-topbar { display: none !important; }
  /* Etwas Luft oben auf Discover, da die Top-Bar entfällt */
  #screen-discover { padding-top: 0.5rem; }

  /* ── Karten-Listen als Raster ── */
  #nearby-courts,
  #book-courts-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
  }

  /* ── Modals/Sheets als zentrierte Dialoge ── */
  .fixed.inset-0 { align-items: center; }
  .fixed.inset-0 > .rounded-t-3xl,
  .fixed.inset-0 .safe-bottom.rounded-t-3xl {
    max-width: 480px;
    margin-inline: auto;
    border-radius: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP-POLITUR — pro Screen optimieren (ab 900px)
   Listen-Screens (Entdecken/Buchen) bleiben breit; Lese-/Formular-Screens
   bekommen eine angenehme zentrierte Spalte, Bedienelemente stretchen nicht.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Lese-/Formular-Screens: zentrierte, lesbare Spalte statt voller Breite */
  #screen-account, #screen-wallet, #screen-court-detail, #screen-book,
  #screen-book-summary, #screen-checkout, #screen-confirm, #screen-activity,
  #screen-help-legal, #screen-legal-impressum, #screen-legal-datenschutz,
  #screen-legal-agb, #screen-help, #screen-tournament-detail, #screen-player-profile,
  #screen-coaches, #screen-coach-detail, #screen-calendar, #screen-club-detail,
  #screen-compete, #screen-live, #screen-gear-finder {
    max-width: 860px;
    margin-inline: auto;
  }

  /* Segmented-Controls / Umschalter nicht über die volle Breite ziehen */
  .screen .rounded-2xl.p-1.flex.border { max-width: 460px; }

  /* „Empfohlen"-Karussell als Raster statt einer überbreiten Karte */
  #featured-courts {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
    overflow: visible !important;
  }
  .featured-court-card {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  /* „Karte zeigen"-Float unten rechts, nicht mittig über dem Inhalt */
  #discover-map-fab {
    left: auto !important;
    right: 2rem !important;
    transform: none !important;
    bottom: 2rem !important;
  }

  /* Fixe CTA-Leiste im Buchungs-Flow an die Inhaltsspalte angleichen */
  #confirm-bar { max-width: 860px; }

  /* Hover-Feedback auf Karten am Desktop (fühlt sich „web" an) */
  .court-card, .listing-card, .club-card { cursor: pointer; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM-PASS R2 — Craft-Details, Richtung unverändert (Weiß + Brand-Blau)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tabellenziffern app-weit: Preise, ELO, Zeiten stehen ruhig & bündig */
body { font-variant-numeric: tabular-nums; }

/* Primäre CTAs: ein Licht — sanfter Markenverlauf + geschichteter Schatten.
   Greift alle bg-[#29ABE2]-Buttons (HTML + JS-Templates) ohne Markup-Änderung. */
button[class*="bg-[#29ABE2]"], [onclick][class*="bg-[#29ABE2]"] {
  background-image: linear-gradient(160deg, #3db9ec 0%, #1d9fd8 100%);
  box-shadow: 0 1px 2px rgba(29,159,216,0.30), 0 10px 26px -10px rgba(41,171,226,0.55);
}
button[class*="bg-[#29ABE2]"]:active, [onclick][class*="bg-[#29ABE2]"]:active {
  box-shadow: 0 1px 2px rgba(29,159,216,0.25), 0 5px 14px -8px rgba(41,171,226,0.5);
}

/* Sichtbarer Fokus für Tastatur-Nutzer — Brand-Ring statt Browser-Default */
:focus-visible {
  outline: 2px solid rgba(41,171,226,0.75);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Hero-Bilder: getönter Lade-Hintergrund statt Weiß-Blitz */
#detail-img, #club-detail-img, #book-hero-img, .court-card img {
  background: linear-gradient(135deg, #e8eef4 0%, #dde7f0 100%);
}

/* Hero-Titel: hauchdünner Schatten für Lesbarkeit auf hellen Fotos */
#detail-name, #club-detail-name { text-shadow: 0 1px 14px rgba(0,0,0,0.35); }

/* Benachrichtigungs-Badge: weißer Ring — sitzt bewusst, statt abgeschnitten */
#notif-badge { box-shadow: 0 0 0 2px #ffffff; }

/* Karten-FAB: Haarlinie als Ebenen-Trennung */
#discover-map-fab { border: 1px solid rgba(255,255,255,0.14); }

/* ═══════════════════════════════════════════════════════════════════════════
   FELDER & FORMULARE — ein Eingabe-System für alle ~90 Felder
   (Baseline via :where = null Spezifität: vorhandene Utility-Klassen gewinnen.
    Fokus-Ring bewusst mit !important: EIN konsistenter Zustand app-weit.)
   ═══════════════════════════════════════════════════════════════════════════ */

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
:where(textarea) { min-height: 96px; resize: vertical; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select, textarea {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* DER Premium-Moment: einheitlicher Marken-Fokus mit weichem Ring */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
  outline: none !important;
  border-color: #29ABE2 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(41,171,226,0.14) !important;
}

::placeholder { color: #9ca3af; font-weight: 400; opacity: 1; }

/* Auswahl-Elemente in Markenfarbe statt Browser-Grau */
input[type="checkbox"], input[type="radio"] {
  accent-color: #29ABE2;
  width: 18px; height: 18px;
  cursor: pointer;
}

/* Selects: eigener Chevron statt Browser-Pfeil (identisch auf iOS/Android/Web) */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

/* Datum/Zeit: native Optik angleichen (iOS rendert sonst eigenwillig) */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* Zahlenfelder ohne Spinner-Pfeile */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-SPRACHE V3 — Atmosphäre & Ebenen (Richtung unverändert)
   Statt flachem Grau: kühler Verlauf + Markenglow oben. Karten schweben
   einheitlich, Leisten werden Milchglas. Das nimmt den "Standard-Look".
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  background:
    radial-gradient(130% 42% at 50% -6%, rgba(41,171,226,0.10) 0%, rgba(41,171,226,0.04) 38%, rgba(41,171,226,0) 66%),
    linear-gradient(180deg, #f8fafc 0%, #f2f4f7 100%);
}

/* Titel: engeres Tracking = mehr Präsenz */
h1, h2 { letter-spacing: -0.03em; }

/* Alle weißen Inhalts-Karten schweben gleich (eine Ebene, ein Schatten) */
div[class*="bg-white"][class*="rounded-2xl"],
div[class*="bg-white"][class*="rounded-3xl"] {
  border: 1px solid rgba(17,24,39,0.05);
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 14px 30px -18px rgba(17,24,39,0.14);
}

/* Navigation & fixierte Leisten: Milchglas statt Deckweiß */
#bottom-nav {
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(17,24,39,0.06);
  box-shadow: 0 -10px 26px -14px rgba(17,24,39,0.10);
}
div[class*="fixed"][class*="bg-white"][class*="border-t"] {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(17,24,39,0.06);
}

/* Eyebrow-Labels (EINSTELLUNGEN, PROMO-CODE, …): feiner gesperrt.
   Die Sperrung gilt überall, die Farbe nur wo das Markup keine eigene
   setzt: auf den blauen Karten stehen text-white/70-Labels, die dieses
   Grau sonst überschreibt — dort war es Grau auf Blau. */
p[class*="uppercase"][class*="tracking-wide"] { letter-spacing: 0.09em; }
p[class*="uppercase"][class*="tracking-wide"]:not([class*="text-white"]):not([class*="text-\["]) { color: #8b93a1; }

/* ── Ausgegraut-Zustand für Buttons ──────────────────────────────────────
   Ersetzt Tailwinds `disabled:opacity-40`: das lokal gebündelte Tailwind
   (Offline-Härtung) enthält nur die Klassen, die beim Bundle-Bau benutzt
   wurden — neue Klassen wirken sonst still gar nicht. */
.rb-disable-fade:disabled { opacity: .4; cursor: default; }

/* ── Leere Zustände mit Persönlichkeit ───────────────────────────────────
   Statt toter „Keine Daten"-Zeilen: dieselbe Ink-Platzlinien-Signatur wie
   die Foto-Platzhalter, plus ein konkreter nächster Schritt. */
.rb-empty {
  border-radius: 1rem;
  padding: 18px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(41,171,226,0.16) 0%, rgba(41,171,226,0) 60%),
    linear-gradient(150deg, #151f32 0%, #0b1220 100%);
}
/* Platzlinien als Signatur — dezent, nie störend */
.rb-empty::before {
  content: '';
  position: absolute;
  inset: 10px 14px;
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 3px;
  background-image:
    linear-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255,255,255,0.10) 1.5px, transparent 1.5px);
  background-size: 100% 50%, 33.333% 100%;
  background-position: 0 0, 0 0;
  pointer-events: none;
}
.rb-empty > * { position: relative; }
.rb-empty-title { color: #ffffff; font-weight: 700; font-size: 13px; }
.rb-empty-text  { color: rgba(255,255,255,0.62); font-size: 11px; margin-top: 2px; line-height: 1.45; }
.rb-empty-cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; padding: 7px 14px; border-radius: 999px;
  background: #ffffff; color: #111827;
  font-weight: 700; font-size: 11px;
  transition: transform .12s ease;
}
.rb-empty-cta:active { transform: scale(.95); }

/* Große Variante für ganze Screens (Rangliste, Freunde, Turniere) */
.rb-empty--lg { padding: 30px 22px; border-radius: 1.25rem; }
.rb-empty--lg .rb-empty-title { font-size: 16px; }
.rb-empty--lg .rb-empty-text  { font-size: 12.5px; margin-top: 5px; }
.rb-empty--lg .rb-empty-cta   { margin-top: 16px; padding: 10px 20px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — umschaltbar (Hell / Dunkel / System)
   Ansatz: die App nutzt durchgängig eine feste Neutral-Palette (#111827 Text,
   #ffffff Karten, #e5e7eb Rahmen …). Statt jede Komponente umzubauen, wird
   diese Palette hier EINMAL zentral umgeschlüsselt. Markenblau (#29ABE2) und
   die Ink-Signatur bleiben — die Richtung ändert sich nicht, nur die Fläche.
   Aktiv über <html data-theme="dark">.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] { color-scheme: dark; }

/* ── Fläche & Grundtext ───────────────────────────────────────────────── */
/* Neutrales Schwarz, kein Blaustich. Off-Black statt #000 — reines Schwarz
   lässt OLED-Ränder gegen die Karten hart abreißen.
   body trägt die Klasse bg-[#f5f5f5], die unten auf die erhöhte Ebene
   gemappt wird (richtig für Chips, falsch für die Seite). Darum hier die
   Klasse mitnennen: sonst gewinnt die Gruppenregel und der Seitengrund
   bekommt Kartenfarbe — dann ist jede Tiefenstaffelung platt. */
html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-\[\#f5f5f5\] {
  background: #0a0a0a;
  color: #ededed;
}

/* ── Karten-Flächen: Weiß → erhöhte dunkle Ebene ──────────────────────── */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class*="bg-white"] { background-color: #151515 !important; }

html[data-theme="dark"] .bg-\[\#f9fafb\],
html[data-theme="dark"] .bg-\[\#f5f5f5\]:not(body),
html[data-theme="dark"] .bg-\[\#f3f4f6\],
html[data-theme="dark"] .bg-\[\#f1f3f5\],
html[data-theme="dark"] .bg-\[\#eef0f2\],
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-gray-50 { background-color: #1e1e1e !important; }

/* Karten schweben auch im Dunkeln — Schatten wirkt hier über Kontur */
html[data-theme="dark"] div[class*="bg-white"][class*="rounded-2xl"],
html[data-theme="dark"] div[class*="bg-white"][class*="rounded-3xl"] {
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 14px 30px -18px rgba(0,0,0,0.7);
}

/* ── Text-Hierarchie ──────────────────────────────────────────────────── */
html[data-theme="dark"] .text-\[\#111827\] { color: #ededed !important; }
html[data-theme="dark"] .text-\[\#374151\] { color: #d4d4d4 !important; }
html[data-theme="dark"] .text-\[\#4b5563\] { color: #b8b8b8 !important; }
html[data-theme="dark"] .text-\[\#6b7280\] { color: #a1a1a1 !important; }
html[data-theme="dark"] .text-\[\#9ca3af\] { color: #8a8a8a !important; }
html[data-theme="dark"] .text-\[\#d1d5db\] { color: #6e6e6e !important; }
html[data-theme="dark"] .text-black       { color: #ededed !important; }

/* ── Rahmen & Trennlinien ─────────────────────────────────────────────── */
html[data-theme="dark"] .border-\[\#e5e7eb\],
html[data-theme="dark"] .border-\[\#d1d5db\] { border-color: rgba(255,255,255,0.11) !important; }
html[data-theme="dark"] .border-\[\#f3f4f6\],
html[data-theme="dark"] .border-\[\#f1f3f5\],
html[data-theme="dark"] .border-\[\#f5f5f5\],
html[data-theme="dark"] .border-\[\#f0f2f5\],
html[data-theme="dark"] .border-\[\#eef1f4\] { border-color: rgba(255,255,255,0.07) !important; }

/* ── Blau-Chips (helle Markenflächen) ─────────────────────────────────── */
html[data-theme="dark"] .bg-\[\#eff6ff\],
html[data-theme="dark"] .bg-\[\#dbeafe\],
html[data-theme="dark"] .bg-\[\#eaf6fc\],
html[data-theme="dark"] .bg-\[\#e8f4fd\],
html[data-theme="dark"] .bg-\[\#d0eefb\],
html[data-theme="dark"] .bg-\[\#d0e8f5\] { background-color: rgba(41,171,226,0.16) !important; }

/* Markenblau auf dunklem Grund minimal aufhellen (Lesbarkeit) */
html[data-theme="dark"] .text-\[\#29ABE2\] { color: #5BC4EE !important; }

/* ── Eigene Komponenten ───────────────────────────────────────────────── */
html[data-theme="dark"] .empty-state {
  background: #151515;
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 16px 32px -16px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .empty-state-icon {
  background: linear-gradient(135deg, rgba(41,171,226,0.20) 0%, rgba(41,171,226,0.10) 100%);
}
html[data-theme="dark"] .court-card,
html[data-theme="dark"] .listing-card,
html[data-theme="dark"] .featured-court-card {
  background: #151515;
  border-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .hero-search {
  background: #151515;
  border-color: rgba(255,255,255,0.09);
}

/* Navigation & fixierte Leisten: dunkles Milchglas */
html[data-theme="dark"] #bottom-nav {
  background: rgba(10,10,10,0.88);
  border-top-color: rgba(255,255,255,0.07);
  box-shadow: 0 -10px 26px -14px rgba(0,0,0,0.7);
}
html[data-theme="dark"] div[class*="fixed"][class*="bg-white"][class*="border-t"] {
  background: rgba(12,12,12,0.92) !important;
  border-top-color: rgba(255,255,255,0.07);
}

/* ── Formularfelder ───────────────────────────────────────────────────── */
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background: #1e1e1e;
  border-color: rgba(255,255,255,0.11);
  color: #ededed;
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  background-color: #262626 !important;
  border-color: #29ABE2 !important;
}
html[data-theme="dark"] ::placeholder { color: #737373; }

/* ── Ink-Signatur bleibt Ink — bekommt aber Kontur, um sich von der
      dunklen Fläche abzuheben (sonst verschwindet der Hero). ─────────── */
html[data-theme="dark"] .rb-empty,
html[data-theme="dark"] .widget-card--ink {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 12px 30px -12px rgba(0,0,0,0.8);
}
html[data-theme="dark"] .rb-empty {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(41,171,226,0.13) 0%, rgba(41,171,226,0) 60%),
    linear-gradient(150deg, #1c1c1c 0%, #101010 100%);
}

/* Sheets/Modale liegen auf dunklem Grund — Backdrop dunkler */
html[data-theme="dark"] div[class*="fixed"][class*="inset-0"][style*="rgba(17,24,39"] {
  background: rgba(0,0,0,0.66) !important;
}

/* Weiße Karten INNERHALB der Ink-Flächen bleiben weiß (z.B. CTA-Pillen) */
html[data-theme="dark"] .widget-card {
  background: #151515;
  border-color: rgba(255,255,255,0.08);
  color: #ededed;
}
/* Ink-Karte: im Hellen die navy Signatur, im Dunkeln neutral schwarz —
   sonst ist sie die einzige blaue Fläche und sticht als Fremdkörper raus.
   Der blaue Radial-Akzent bleibt, der ist die Marke. */
html[data-theme="dark"] .widget-card--ink {
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(41,171,226,0.22), transparent 55%),
    linear-gradient(150deg, #1c1c1c 0%, #101010 100%);
  color: #ffffff;
}

html[data-theme="dark"] .rb-empty-cta,
html[data-theme="dark"] .widget-card--ink .bg-white { background-color: #ffffff !important; }
html[data-theme="dark"] .rb-empty-cta { color: #111827 !important; }

/* Karten-Kacheln (Leaflet) im Dunkeln entsättigen — sonst leuchtet die
   Karte als einzige Fläche grell heraus. */
html[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.72) saturate(0.72) contrast(1.06); }

/* ── Dark Mode: Inline-Styles im Markup ──────────────────────────────────
   Ein Teil der Flächen setzt Farbe per style="" statt per Utility-Klasse.
   Klassen-Regeln greifen dort nicht — nur !important schlägt ein Inline-
   Style. Nur die neutralen Grautöne umschlüsseln: getönte Chips (#fef3c7,
   #ecfdf5, #fee2e2 …) tragen ihre eigene dunkle Schrift und bleiben lesbar. */
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background:#e5e7eb"] { background: #1e1e1e !important; }

html[data-theme="dark"] [style*="rgba(17,24,39,0.07)"],
html[data-theme="dark"] [style*="rgba(17,24,39,0.06)"] { background: rgba(255,255,255,0.11) !important; }

/* Ink-Verläufe stehen an ~10 Stellen inline im Markup. Im Dunkeln müssen
   sie neutral werden, sonst sind sie die einzigen blauen Flächen. */
html[data-theme="dark"] [style*="#151f32"] {
  background: linear-gradient(150deg, #1c1c1c 0%, #101010 100%) !important;
}
html[data-theme="dark"] [style*="background:#111827"],
html[data-theme="dark"] [style*="background:linear-gradient(135deg,#111827"] {
  background: #1c1c1c !important;
}

/* Hellblaue Inline-Familie: Icon-Plättchen und Belag-Chips. Die blieben im
   Dunkeln hell und standen als weiße Löcher in der Fläche. Getöntes Blau
   statt Grau, damit die blauen Icons darauf ihren Akzent behalten. */
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background:#e0f2fe"],
html[data-theme="dark"] [style*="background:linear-gradient(135deg,#dbeafe"],
html[data-theme="dark"] [style*="background:linear-gradient(135deg,#eff6ff"] {
  background: rgba(41,171,226,0.16) !important;
}

html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border:1px solid #f3f4f6"] { border-color: rgba(255,255,255,0.11) !important; }

/* Dunkle Inline-Schrift aufhellen — außer sie sitzt auf einer Fläche, die
   auch im Dunkeln weiß bleibt (weiße Pillen auf Ink-Karten). */
html[data-theme="dark"] [style*="color:#111827"]:not([style*="rgba(255,255,255"]),
html[data-theme="dark"] [style*="color:#1f2937"]:not([style*="rgba(255,255,255"]) { color: #ededed !important; }

/* ── Dark Mode: eigene Komponenten mit fest gesetzten Farben ─────────────
   Diese Klassen setzen ihre Farbe direkt in styles.css (nicht über
   Tailwind-Utilities) und brauchen darum eine eigene Umschlüsselung. */
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .liga-view-btn.active,
html[data-theme="dark"] .dn-brand,
html[data-theme="dark"] .dn-chip,
html[data-theme="dark"] .dn-icon { color: #ededed; }

html[data-theme="dark"] .liga-view-btn,
html[data-theme="dark"] .dn-link { color: #a1a1a1; }
html[data-theme="dark"] .dn-link:hover { background: #1e1e1e; color: #ededed; }

html[data-theme="dark"] .liga-view-btn.active { background: #262626; }
html[data-theme="dark"] .dn-chip,
html[data-theme="dark"] .dn-icon { background: #151515; border-color: rgba(255,255,255,0.11); }

/* Segment-/Tab-Leisten (Sport-Umschalter, Compete-Tabs) */
html[data-theme="dark"] .sport-btn.active,
html[data-theme="dark"] .compete-tab.active { color: #ffffff; }
html[data-theme="dark"] .sport-btn,
html[data-theme="dark"] .compete-tab { color: #a1a1a1; }

/* Liga-Chips */
html[data-theme="dark"] .league-chip {
  background: #1e1e1e; color: #d4d4d4; border-color: rgba(255,255,255,0.10);
}

/* Zeit-Slots (Buchung) */
html[data-theme="dark"] .slot-available {
  background: #151515; border-color: rgba(255,255,255,0.10);
}

/* Ladeskelette dürfen im Dunkeln nicht weiß blitzen */
html[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1e1e1e 25%, #232f42 50%, #1e1e1e 75%);
}

/* ── Segment-Umschalter (Erscheinungsbild) ─────────────────────────────── */
.rb-segment { background: #f3f4f6; }
.rb-segment-btn { background: transparent; color: #6b7280; }
.rb-segment-btn.is-active { background: #29ABE2; color: #ffffff; box-shadow: 0 2px 8px rgba(41,171,226,0.35); }
html[data-theme="dark"] .rb-segment { background: #1e1e1e; }
html[data-theme="dark"] .rb-segment-btn { color: #a1a1a1; }
html[data-theme="dark"] .rb-segment-btn.is-active { background: #29ABE2; color: #ffffff; }

/* ── Logo-Platte ─────────────────────────────────────────────────────────
   logo.png ist blau-auf-weiß und die Spielerfigur ist Negativraum im
   Weiß — freistellen würde den Spieler löschen. Das Logo braucht darum
   immer eine helle Fläche. Statt eines scharfkantigen weißen Rechtecks
   (das im Dunkeln wie ein kaputtes Bild aussieht) bekommt es eine
   bewusste, gerundete Platte wie ein App-Icon. */
.rb-logo-plate {
  border-radius: 9px;
  object-fit: cover;
  background: #ffffff;
}
html[data-theme="dark"] .rb-logo-plate {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 2px 8px rgba(0,0,0,0.4);
}

/* ── „Karte"-Umschalter im Sektions-Kopf ─────────────────────────────────
   War vorher ein schwebender Button über dem Inhalt und hat beim Scrollen
   Vereinsnamen verdeckt. Jetzt inline, wo er inhaltlich hingehört. */
.rb-map-btn {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(17,24,39,0.18);
}
html[data-theme="dark"] .rb-map-btn {
  background: rgba(255,255,255,0.11);
  color: #ededed;
  box-shadow: none;
}

/* ══ Dark Mode: restliche Screens ═════════════════════════════════════════
   Systematischer Durchlauf über alle 28 Screens. Gruppiert nach Ursache,
   nicht nach Screen — dieselbe Farbe taucht an vielen Stellen auf.        */

/* ── 1. Helle Neutralflächen aus Inline-Styles ────────────────────────── */
html[data-theme="dark"] [style*="background:#f6f7f9"],
html[data-theme="dark"] [style*="background:#e8edf3"],
html[data-theme="dark"] [style*="background:#e2e8f0"],
html[data-theme="dark"] [style*="background:#f0f2f5"] { background: #1e1e1e !important; }
html[data-theme="dark"] [style*="color:#475569"] { color: #b8b8b8 !important; }

/* ── 2. Navy-Reste → neutral ──────────────────────────────────────────── */
html[data-theme="dark"] [style*="background:#1f2937"] { background: #262626 !important; }
html[data-theme="dark"] [style*="background:#0b1220"] { background: #101010 !important; }
/* Fixierte Fußleisten (Platz-/Trainer-Detail) lagen in Navy-Transparenz */
html[data-theme="dark"] [style*="rgba(15,22,33,0.9)"],
html[data-theme="dark"] [style*="rgba(15, 22, 33, 0.9)"] { background: rgba(10,10,10,0.92) !important; }
/* Weiße Glas-Leisten (Aktivität) — im Dunkeln dunkles Glas.
   Bewusst nur fixiert/sticky: dieselbe Transparenz wird auch für helle
   Plättchen auf farbigen Karten benutzt, die weiß bleiben müssen. */
html[data-theme="dark"] [class*="fixed"][style*="rgba(255,255,255,0.85)"],
html[data-theme="dark"] [class*="sticky"][style*="rgba(255,255,255,0.85)"] {
  background: rgba(16,16,16,0.85) !important;
}

/* ── Ausnahme: Elemente AUF farbigen Markenflächen ────────────────────────
   Blaue Wallet-Karten, Ink-Karten und Verlaufs-Banner setzen text-white auf
   den Container. Was darin liegt, sitzt auf einer farbigen Fläche und muss
   hell bleiben — sonst reißen weiße Knöpfe und Icon-Plättchen dort schwarze
   Löcher (z. B. „+ Aufladen" auf der Guthaben-Karte). */
html[data-theme="dark"] :is(
  [class*="text-white"],
  .confirm-card,
  .widget-card--ink,
  .rb-empty,
  [style*="background:#29ABE2"],
  [style*="linear-gradient(135deg,#29ABE2"],
  [style*="linear-gradient(135deg,#1f6feb"],
  [style*="linear-gradient(135deg,#2563eb"]
) .bg-white {
  background-color: #ffffff !important;
}

/* ── 3. Status-Töne: Farbton behalten, Helligkeit drehen ──────────────────
   Grün bleibt Erfolg, Rot bleibt Fehler — nur die Fläche wird dunkel und
   die Schrift hell, sonst ist die Bedeutung weg. */
html[data-theme="dark"] [style*="background:#ecfdf5"],
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-green-50 { background: rgba(16,185,129,0.15) !important; }
html[data-theme="dark"] [style*="color:#059669"],
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-green-700 { color: #4ade80 !important; }

html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-yellow-50 { background: rgba(245,158,11,0.15) !important; }
html[data-theme="dark"] [style*="color:#92400e"],
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800 { color: #fbbf24 !important; }

html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] .bg-red-50 { background: rgba(239,68,68,0.15) !important; }
html[data-theme="dark"] [style*="color:#dc2626"],
html[data-theme="dark"] [style*="color:#b91c1c"],
html[data-theme="dark"] .text-red-700 { color: #f87171 !important; }

html[data-theme="dark"] [style*="background:#fff7ed"],
html[data-theme="dark"] .bg-orange-50 { background: rgba(249,115,22,0.15) !important; }

/* ── 4. Segmentierte Schalter: weißer Reiter → helle Ebene ────────────────
   Ein rein weißer Reiter auf schwarzem Grund reißt ein Loch. */
html[data-theme="dark"] .dur-btn { border-color: rgba(255,255,255,0.11); }
html[data-theme="dark"] .dur-btn:not(.selected) { background: #1e1e1e; color: #ededed; }
html[data-theme="dark"] .compete-sport-btn.active {
  background: #2e2e2e !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .split-chip {
  background: #1e1e1e;
  color: #a1a1a1;
  border-color: rgba(255,255,255,0.11);
}
/* :not(.active) ist Pflicht — sonst überschreibt diese Regel das Weiß des
   aktiven Reiters und der Text verschwindet fast im Markenblau. */
html[data-theme="dark"] .compete-tab:not(.active),
html[data-theme="dark"] .compete-sport-btn:not(.active) { color: #a1a1a1 !important; }

/* ── 5. Bild-Skelett hinter Fotos ─────────────────────────────────────── */
html[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1a1a1a 0%, #262626 50%, #1a1a1a 100%);
  background-size: 200% 100%;
}

/* ── 6. Aus-Zustand der Schalter, die JS inline setzt ─────────────────────
   JS-gesetzte Farben landen normalisiert im style-Attribut
   ("background: rgb(233, 231, 237)"), darum greift kein
   [style*="#e9e7ed"]. Deshalb über Variablen, die das JS referenziert. */
:root { --rb-off-bg: #e9e7ed; --rb-off-fg: #2a3a4a; }
html[data-theme="dark"] { --rb-off-bg: #2e2e2e; --rb-off-fg: #d4d4d4; }

/* Hero-Bild-Ladehintergrund: im Dunkeln dunkel, sonst blitzt beim Laden
   eine hellblaue Fläche auf, wo gleich ein Foto kommt. */
html[data-theme="dark"] #detail-img,
html[data-theme="dark"] #club-detail-img,
html[data-theme="dark"] #book-hero-img,
html[data-theme="dark"] .court-card img {
  background: linear-gradient(135deg, #1c1c1c 0%, #141414 100%);
}

/* ── Nachtrag: dunkle Schrift auf getönten Flächen ────────────────────────
   Die Flächen wurden oben abgedunkelt, die zugehörige Schrift blieb dunkel
   — die Paare müssen gemeinsam kippen, sonst dunkel auf dunkel. */
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color:#4b5563"] { color: #d4d4d4 !important; }
html[data-theme="dark"] [style*="color:#9a6e3a"],
html[data-theme="dark"] .text-amber-900 { color: #fbbf24 !important; }
html[data-theme="dark"] .text-\[\#1e3a8a\],
html[data-theme="dark"] .text-\[\#1e40af\],
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-900 { color: #7dd3fc !important; }
html[data-theme="dark"] [style*="border:1px solid #bfdbfe"] { border-color: rgba(41,171,226,0.28) !important; }

/* Vollflächige Screen-Hintergründe: Seitenschwarz, nicht Kartenton —
   sonst ist ein ganzer Screen heller als der Rest der App. */
html[data-theme="dark"] .screen[style*="background:#f5f5f5"] { background: #0a0a0a !important; }

/* Eyebrow-Labels im Dunkeln: neutrales Grau statt des blaustichigen #8b93a1 */
html[data-theme="dark"] p[class*="uppercase"][class*="tracking-wide"]:not([class*="text-white"]):not([class*="text-\["]) {
  color: #8a8a8a;
}

/* ── Einheitliches Druck-Feedback für ALLES Klickbare ────────────────────
   Der native graue Tap-Blitz ist bewusst aus (-webkit-tap-highlight-color),
   aber nur ein Teil der Elemente bringt eigenes active:scale mit — der Rest
   fühlte sich tot an und war von nicht-klickbaren Karten nicht zu
   unterscheiden. Alles Klickbare dimmt darum beim Druck kurz ab.
   :where() hält die Spezifität bei 0 → vorhandene :active-Regeln gewinnen.
   Ausgenommen: fixierte Container/Backdrops — :active gilt auch für
   VORFAHREN des gedrückten Elements; ohne Ausnahme dimmt beim Tippen im
   Sheet das ganze Sheet. */
:where(button:not(:disabled),
       [role="button"],
       [onclick]:not(.fixed):not([class*="inset-0"]):not([id*="backdrop"])):active {
  opacity: .85;
}

/* Sport-Wahl-Gate entfernt (Buchen zeigt sofort beide Sportarten;
   Eingrenzen im Filter-Sheet). */

/* Vereinskarte ohne Foto: kompakte Zeile statt großer dunkler Bildfläche.
   Der Name braucht rechts Platz für das Sport-Icon. */
.listing-card.no-photo .p-4 > p:first-of-type { padding-right: 3rem; }

/* Sanfter Verlauf am Foto-Unterrand: verankert das Bild optisch in der
   Karte und gibt Tiefe — statt harter Foto/Weiß-Kante. */
.rb-photoshade::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(11,18,32,0.16));
  pointer-events: none;
}

/* ═══ RACKBOOK Intro (Splash-Bühne) ═══ */
#splash { overflow: hidden; -webkit-tap-highlight-color: transparent; }
#splash .rbi-static { width: min(42vw, 184px); height: auto; display: block; }
#splash .rbi-stage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#splash .rbi-stage text { font-kerning: normal; }
#splash .rbi-fig { fill: var(--rb-brand, #29ABE2); } /* Figur = Splash-Farbe */
@media (forced-colors: active) { #splash { forced-color-adjust: none; } } /* Logo bleibt auch im Kontrastmodus sichtbar */