/* ─── Base ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: max(884px, 100dvh);
  overscroll-behavior: none;
  background: #f5f5f5;
  color: #111827;
}

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

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

@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: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  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: linear-gradient(135deg,#29ABE2 0%,#2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(41,171,226,0.30) !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: #29ABE2 !important;
  color: #ffffff !important;
  border: 1.5px solid #29ABE2 !important;
  box-shadow: 0 4px 16px rgba(41,171,226,0.22) !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: #29ABE2;
  border-radius: 2rem;
  padding: 2rem;
  color: white;
  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: #29ABE2 !important;
  color: #ffffff !important;
  border-color: #29ABE2 !important;
  box-shadow: 0 4px 12px rgba(41,171,226,0.25);
}
.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 ─────────────────────────────────────────────────────────── */
.live-tab,
.book-section-tab,
.activity-tab,
.compete-tab {
  color: #6b7280 !important;
  background: transparent !important;
}
.live-tab.active,
.book-section-tab.active,
.activity-tab.active,
.compete-tab.active {
  color: #ffffff !important;
  background: #29ABE2 !important;
  box-shadow: 0 4px 12px rgba(41,171,226,0.30) !important;
}

/* Sport filter buttons (compete) */
.compete-sport-btn {
  color: #6b7280 !important;
  background: transparent !important;
}
.compete-sport-btn.active {
  color: #111827 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ─── Betreiber-Dashboard Tabs ─────────────────────────────────────────── */
.op-tab {
  color: #6b7280 !important;
  background: transparent !important;
}
.op-tab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg,#29ABE2 0%,#2563eb 100%) !important;
  box-shadow: 0 4px 12px rgba(41,171,226,0.30) !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: linear-gradient(145deg,#3b9eff 0%,#2563eb 100%);
  box-shadow: 0 4px 12px rgba(37,99,235,0.30);
}
.op-slot-app .op-slot-who { color: #fff; }
.op-slot-phone {
  background: linear-gradient(145deg,#fb923c 0%,#ea580c 100%);
  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: #29ABE2;
  color: #ffffff;
  border-color: #29ABE2;
  box-shadow: 0 4px 12px rgba(41,171,226,0.25);
}
.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: linear-gradient(90deg, #eff6ff 0%, #f0f9ff 100%);
  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: #29ABE2;
  color: #ffffff;
  border-color: #29ABE2;
  box-shadow: 0 4px 12px rgba(41,171,226,0.25);
}
.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: #29ABE2;
  color: #ffffff;
  border-color: #29ABE2;
  box-shadow: 0 4px 12px rgba(41,171,226,0.30);
}
.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: #29ABE2;
  color: #ffffff;
  border-color: #29ABE2;
  box-shadow: 0 4px 12px rgba(41,171,226,0.25);
}
.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: #29ABE2;
  color: #ffffff;
  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: #29ABE2;
  color: #ffffff;
  border-color: #29ABE2;
  box-shadow: 0 4px 12px rgba(41,171,226,0.30);
}
.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: #29ABE2;
  color: #ffffff;
  border-color: #29ABE2;
  box-shadow: 0 4px 12px rgba(41,171,226,0.30);
}
.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;
  box-shadow: 0 4px 12px rgba(41,171,226,0.30) !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;
}