/* rallio design system — light blue / white */
:root {
  /* ------------------------------------------------------------------------
   * Rallio Design-System — Aufbau nach iOS (gruppierte Listen), Ton von Rallio.
   *
   * Die Struktur ist bewusst aus der nativen App uebernommen: gruppierter
   * Hintergrund, Karten mit 10px-Radius, eingerueckte Trennlinien, versale
   * Sektionsueberschriften. Die FARBE bleibt Rallio-Blau statt Apples
   * Systemblau — sonst faellt ausgerechnet die Android-App aus dem Branding
   * von Landingpage, Preisseite und Vereins-Konsole heraus.
   *
   * Jedes Text/Flaeche-Paar unten ist auf mindestens 4.5:1 gerechnet (WCAG AA),
   * in BEIDEN Themes. Die krummen Werte sind das Ergebnis dieser Rechnung —
   * nicht auf "schoenere" Zahlen runden.
   * --------------------------------------------------------------------- */

  /* Flaechen (iOS: systemGroupedBackground / secondarySystemGroupedBackground) */
  --bg:           #eef4f9;
  --card:         #ffffff;
  --surface-2:    #eef4f9;
  --card-blur:    rgba(238,244,249,.82);
  --card-blur-2:  rgba(238,244,249,.94);
  --scrim:        rgba(0,0,0,.4);

  /* Linien (iOS separator) — dekorativ, daher bewusst unter 3:1 */
  --line:         #cfdce6;
  --line-soft:    #e2ebf2;

  /* Schrift */
  --ink:          #0d1a24;
  --ink-soft:     #3a4b58;
  --muted:        #5f707a;

  /* Akzent — Rallio-Blau. --accent traegt Text/Symbole, --accent-fill Flaechen. */
  --accent:       #19699f;
  --accent-fill:  #1c7bbd;
  --accent-soft:  #e3f0fa;
  --on-accent:    #ffffff;

  /* Zustaende */
  --ok:           #197e56;
  --ok-bg:        #e6f6ef;
  --warn:         #976420;
  --warn-bg:      #fbf1e0;
  --danger:       #c63246;
  --danger-bg:    #fbe9ec;
  --danger-line:  #f2c9d0;
  --on-danger:    #ffffff;

  /* Raster-Zustaende */
  --slot-wl-bg:   #fbf1e0;
  --slot-wl-ink:  #976420;
  --past-a:       #e6edf3;
  --past-b:       #dde6ee;

  /* Toast — eigene Marken, weil --ink im Dunkeln kippt */
  --toast-bg:     #12202b;
  --toast-ink:    #ffffff;

  /* Markenblau fuer Flaechen, die NICHT mit dem Theme kippen duerfen
     (Landingpage-Kacheln, Logo-Umfeld). Bewusst ohne Dunkelmodus-Umkehr. */
  --brand:        #2b8fcf;
  --brand-dark:   #1c7bbd;
  --brand-darker: #155f93;

  /* Rueckwaertskompatible Aliase: aeltere Regeln und die Admin-Templates
     benutzen noch die alten Namen. */
  --brand-50:     #f2f9fe;
  --brand-100:    #e4f2fc;
  --brand-200:    #cbe6f8;
  --brand-300:    #a9d6f1;
  --sky:          #7cc3ec;
  --accent-green: #b6e04a;

  --radius:       10px;   /* iOS insetGrouped */
  --radius-lg:    14px;
  --radius-sm:    8px;
  --shadow:       none;   /* iOS-Listen arbeiten ohne Schatten */
  --shadow-sm:    none;
  --shadow-lg:    0 20px 50px rgba(0,0,0,.25);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Dunkelmodus. Nur Variablen werden umdefiniert.
 *
 * Zwei Stellen brauchen mehr als ein Umkippen: --on-accent und --on-danger
 * werden DUNKEL. Weisse Schrift auf dem aufgehellten Blau bzw. Rot erreichte
 * nur 3,5:1 bzw. 2,7:1 — die Beschriftung des Hauptknopfs waere beim
 * Ueberfahren fast verschwunden. Dunkle Schrift darauf ergibt 5,3:1 und 6,7:1.
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0a1017;
    --card:         #151e26;
    --surface-2:    #1d2831;
    --card-blur:    rgba(21,30,38,.82);
    --card-blur-2:  rgba(21,30,38,.94);
    --scrim:        rgba(0,0,0,.66);

    --line:         #2c3a45;
    --line-soft:    #222e38;

    --ink:          #ffffff;
    --ink-soft:     #c3d2dd;
    --muted:        #93a5b1;

    --accent:       #5cb4e8;
    --accent-fill:  #2b8fcf;
    --accent-soft:  #16293a;
    --brand-50:     #101c26;
    --brand-100:    #16293a;
    --brand-200:    #1e3b4d;
    --brand-300:    #2a5273;
    --sky:          #3f7ea6;
    --on-accent:    #06121c;

    --ok:           #4ecf9a;
    --ok-bg:        #12312a;
    --warn:         #e0a75a;
    --warn-bg:      #33280f;
    --danger:       #f07886;
    --danger-bg:    #3a1b21;
    --danger-line:  #5c2b33;
    --on-danger:    #2a0d11;

    --slot-wl-bg:   #33280f;
    --slot-wl-ink:  #e0a75a;
    --past-a:       #101820;
    --past-b:       #151e26;

    --toast-bg:     #e8f0f6;
    --toast-ink:    #15242f;

    --shadow-lg:    0 20px 50px rgba(0,0,0,.7);
  }
}


/* ---------------------------------------------------------------------------
 * Oeffentliche Seiten (Startseite, Preise, Rechtstexte).
 *
 * Die App laeuft auf einem neutralen, gruppierten Hintergrund — das ist im
 * Produkt richtig, wirkt auf einer Startseite aber kuehl und abweisend. Hier
 * kommt deshalb der warme Rallio-Ton zurueck, mit dem die Marke bisher
 * aufgetreten ist. Struktur und Schrift bleiben identisch.
 * ------------------------------------------------------------------------- */
body.public {
  --bg:          #f4f9fd;
  --surface-2:   #eef6fc;
  --card-blur:   rgba(244,249,253,.85);
  --card-blur-2: rgba(244,249,253,.94);
  --line:        #d7e6f1;
  --line-soft:   #e8f1f8;
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  body.public {
    --bg:          #0b141d;
    --surface-2:   #14212c;
    --card-blur:   rgba(11,20,29,.85);
    --card-blur-2: rgba(11,20,29,.94);
    --line:        #23343f;
    --line-soft:   #1a2833;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
img, svg { max-width: 100%; }

/* ---------- wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.wordmark .logo { width: 1.35em; height: 1.35em; flex: none; }
.wordmark .name { font-size: 1.05em; }
.wordmark .name b { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 650; font-size: 15px; line-height: 1;
  padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--accent-fill); color: var(--on-accent); cursor: pointer; transition: .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.sec { background: var(--card); color: var(--accent); border-color: var(--line); }
.btn.sec:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--accent); padding-left: 8px; padding-right: 8px; }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.danger { background: var(--danger); color: var(--on-danger); }
.btn.danger:hover { filter: brightness(1.08); }
.btn.sec.danger { background: var(--card); color: var(--danger); border-color: var(--danger-line); }
.btn.sec.danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn.sm { padding: 8px 13px; font-size: 13.5px; }
.btn.block { width: 100%; }
.btn.lg { padding: 15px 28px; font-size: 16px; }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); transition: .15s ease;
}
input[type=checkbox], input[type=radio] {
  width: auto; padding: 0; margin: 0; box-shadow: none; vertical-align: -1px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: #9fb0bd; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 0; border-radius: var(--radius);
  padding: 16px; box-shadow: none;
}
.card + .card { margin-top: 16px; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.statcard { background: var(--card); border: 0; border-radius: var(--radius); padding: 18px 12px; text-align: center; box-shadow: none; }
.statcard .n { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.statcard .l { color: var(--muted); font-size: 13px; margin-top: 2px; }
/* Sektionsueberschrift wie in iOS: versal, klein, gedaempft — und optisch
   AUSSERHALB der Karte, auf dem gruppierten Hintergrund. Das ist das
   auffaelligste Merkmal gruppierter iOS-Listen.
   Umgesetzt ohne Umbau des Markups: die Ueberschrift wird per negativem
   Rand ueber die Kartenkante gezogen und mit der Seitenfarbe hinterlegt;
   ::after setzt darunter wieder eine runde weisse Kappe, damit die Karte
   nicht mit eckiger Oberkante beginnt. */
.card > h2:first-child {
  position: relative;
  font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  margin: -16px -16px 10px;
  padding: 2px 4px 8px;
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card > h2:first-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: var(--radius); background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
}
/* Ueberschriften mitten in einer Karte bleiben normale Zwischentitel. */
.card h2 { font-size: 15px; font-weight: 650; margin: 18px 0 8px; color: var(--ink); }
.card > h2:first-child { margin-top: -16px; }
.card h3 { font-size: 15px; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650;
  padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.mut { background: var(--line-soft); color: var(--muted); }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.grow { flex: 1; }

/* ---------- app shell ---------- */
.appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--card-blur); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.appbar-inner { max-width: 1080px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 18px; }
.appbar .wordmark { font-size: 20px; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  padding: 8px 13px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--ink-soft);
}
.nav a:hover { background: var(--accent-soft); text-decoration: none; color: var(--accent); }
.nav a.active { background: var(--accent-soft); color: var(--accent); }
.container { max-width: 1080px; margin: 0 auto; padding: 24px 18px 60px; }
.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: 26px; margin-bottom: 3px; }

/* ---------- booking grid ---------- */
.grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.grid { border-collapse: collapse; width: 100%; min-width: 520px; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line-soft); padding: 0; text-align: center; }
table.grid thead th {
  position: sticky; top: 0; background: var(--accent-soft); font-size: 13px; font-weight: 700;
  color: var(--accent); padding: 11px 8px; border-bottom: 1px solid var(--line);
}
table.grid tbody th { font-size: 12.5px; font-weight: 650; color: var(--muted); background: var(--surface-2); padding: 0 12px; white-space: nowrap; width: 78px; }
.slot { display: block; width: 100%; min-height: 46px; border: 0; background: transparent; font: inherit; cursor: default; padding: 6px 4px; }
.slot.free { background: var(--accent-soft); cursor: pointer; color: var(--accent); font-weight: 650; font-size: 13px; }
.slot.free:hover { background: var(--line); }
.slot.busy { background: var(--card); color: var(--muted); font-size: 12px; }
.slot.mine { background: var(--ok-bg); color: var(--ok); font-weight: 650; font-size: 12px; }
.slot.tourn { background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; }
button.slot.busy { cursor: pointer; }
button.slot.busy:hover { background: var(--slot-wl-bg); }
.slot.wl { background: var(--slot-wl-bg); color: var(--slot-wl-ink); font-size: 11.5px; font-weight: 600; }
/* Vergangene Zeiten: nicht buchbar. Bewusst NICHT nur ausgegraut — Helligkeit
   allein ist ein Farbsignal und faellt bei Sonnenlicht oder Sehschwaeche weg.
   Der Text sagt zusaetzlich "vorbei". */
.slot.past { background: repeating-linear-gradient(135deg, var(--past-a), var(--past-a) 6px, var(--past-b) 6px, var(--past-b) 12px);
             color: var(--muted); font-size: 11.5px; cursor: default; }
/* Namen duerfen die Spalte nicht sprengen — Vollname steht im Detail-Dialog. */
.slot .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            max-width: 100%; line-height: 1.25; }
.slot .sub { display: block; font-size: 10px; opacity: .75; margin-top: 1px; }

/* ---------- lists ---------- */
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .ttl { font-weight: 650; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }

/* ---------- tournament bracket ---------- */
.round { margin-bottom: 14px; }
.round h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.match { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--card); }
.match .mt { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.match .side { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.match .side.win { font-weight: 700; color: var(--ink); }
.match .side .sc { color: var(--muted); font-variant-numeric: tabular-nums; }
/* visual bracket tree */
.bracket-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; }
.bracket { display: flex; align-items: stretch; min-width: min-content; }
.bround { display: flex; flex-direction: column; min-width: 190px; }
.bround-name { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; margin-bottom: 8px; }
.bround-body { display: flex; flex-direction: column; justify-content: space-around; flex: 1 0 auto; }
.bmatch { background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-sm); overflow: hidden; margin: 9px 0; }
.bmatch-side { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 11px; font-size: 13.5px; }
.bmatch-side + .bmatch-side { border-top: 1px solid var(--line-soft); }
/* Sieger ueber einen schmalen Balken markieren statt die ganze Zeile zu
   toenen — der Name bleibt so auf ruhigem Grund und damit besser lesbar.
   Gleiche Loesung wie in der iOS-App, damit beide Baeume gleich aussehen. */
.bmatch-side { position: relative; }
.bmatch-side.win { font-weight: 700; }
.bmatch-side.win::before { content: ""; position: absolute; left: 4px; top: 7px; bottom: 7px;
                           width: 3px; border-radius: 999px; background: var(--accent); }
.bmatch-side.win .nm { padding-left: 5px; }
.bmatch-side.lost .nm { color: var(--muted); }
.bmatch-side.tbd .nm { color: var(--muted); font-style: italic; }
.bmatch.done { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.bmatch-side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmatch-side .sc { color: var(--accent); font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.bmatch-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 11px; border-top: 1px solid var(--line-soft); background: var(--surface-2); font-size: 11px; color: var(--muted); min-height: 26px; }
.bmatch-edit { background: transparent; border: 1px solid var(--line); color: var(--accent); border-radius: 6px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; cursor: pointer; flex: none; line-height: 1; }
.bmatch-edit:hover { background: var(--accent-soft); border-color: var(--line); }
.bconn { display: flex; flex-direction: column; flex: 0 0 28px; }
.bmerge { flex: 1 0 auto; position: relative; margin: 9px 0; }
.bmerge::before { content: ''; position: absolute; top: 25%; bottom: 25%; left: 0; right: 50%; border: 2px solid var(--line); border-left: 0; }
.bmerge::after { content: ''; position: absolute; top: 50%; right: 0; width: 50%; height: 2px; background: var(--line); }

/* ---------- toast + modal + spinner ---------- */
#toasts { position: fixed; z-index: 90; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; width: 92%; max-width: 420px; }
.toast { background: var(--toast-bg); color: var(--toast-ink); padding: 12px 18px; border-radius: 11px; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 550; animation: pop .2s ease; }
.toast.err { background: var(--danger); }
.toast.ok { background: var(--ok); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(21,50,72,.45); display: flex; align-items: center; justify-content: center; padding: 18px; animation: pop .15s ease; }
.modal { background: var(--card); border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; }
.modal h3 { font-size: 19px; }

.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty { text-align: center; color: var(--muted); padding: 34px 16px; }
.empty .em { font-size: 30px; margin-bottom: 6px; }

/* ---------- auth screen ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background:
  radial-gradient(1100px 500px at 50% -10%, var(--accent-soft), transparent), var(--bg); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand-top { text-align: center; margin-bottom: 20px; }
.auth-card .brand-top .wordmark { font-size: 30px; }
.auth-tabs { display: flex; gap: 4px; background: var(--accent-soft); padding: 4px; border-radius: 11px; margin-bottom: 18px; }
.auth-tabs button { flex: 1; border: 0; background: transparent; padding: 9px; border-radius: 8px; font: inherit; font-weight: 650; font-size: 14px; color: var(--accent); cursor: pointer; }
.auth-tabs button.active { background: var(--card); box-shadow: var(--shadow-sm); }

@media (max-width: 640px) {
  .container { padding: 18px 14px 60px; }
  .nav a { padding: 7px 10px; font-size: 14px; }
  .appbar .wordmark .name { display: none; }
  .page-head h1 { font-size: 22px; }
}

/* --- Handy: gemeinsame Regeln fuer alle Seiten ---------------------------
   Ein einziges zu breites Element (eine nicht umbrechende Buttonzeile, eine
   Tabelle mit min-width) macht sonst das ganze Dokument breiter als den
   Bildschirm — dann laeuft JEDER Abschnitt rechts raus, nicht nur der
   Verursacher. */
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  /* Breite Inhalte scrollen in sich selbst statt die Seite zu sprengen. */
  .table-scroll, .bracket-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .appbar-inner { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .row.wrap { gap: 8px; }
  /* iOS zoomt bei Feldern unter 16px automatisch rein. */
  input, select, textarea { font-size: 16px; }
  .modal { padding: 20px; border-radius: 14px; }
  .lg-bar-in { padding: 11px 16px; }
  .lg-wrap { padding: 26px 16px 60px; }
  .lg-wrap h2 { font-size: 17.5px; margin-top: 24px; }
  .lg-foot { gap: 12px; }
}
@media (max-width: 640px) and (pointer: coarse) {
  .btn, .lg-foot a { min-height: 44px; display: inline-flex;
                     align-items: center; justify-content: center; }
}

/* ---------- Handy: Tableiste unten statt Linkzeile oben -------------------
   Bis zu acht Links als umbrechende Zeile in einer klebenden Kopfleiste
   fraßen auf einem 667px-Display rund ein Viertel der Hoehe. Unten liegt die
   Navigation ausserdem in Daumenreichweite — dieselbe Loesung wie in der
   iOS-App, die fuenf feste Tabs hat.

   ACHTUNG Reihenfolge: Die Grundregel (am Rechner ausgeblendet) MUSS vor der
   Media Query stehen. Media Queries erhoehen die Spezifitaet nicht — stuende
   `display:none` danach, gewaenne es auch auf dem Handy. */
.tabbar { display: none; }

@media (max-width: 720px) {
  .appbar-inner { padding: 10px 14px; }
  /* Die alte Linkzeile verschwindet; die Marke bleibt oben stehen. */
  .appbar .nav { display: none; }

  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--card-blur-2); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    /* Gestenleiste von Android/iOS nicht ueberdecken. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a {
    flex: 1; min-width: 0; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px;
    font-size: 10.5px; font-weight: 600; color: var(--muted);
    text-decoration: none; position: relative;
  }
  .tabbar a.active { color: var(--accent); }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar .nbadge { top: 4px; right: 50%; margin-right: -20px; }

  /* Platz fuer die Leiste schaffen, sonst verdeckt sie den letzten Eintrag. */
  .container { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Buchungsraster auf dem Handy ----------
     Nicht zusammenquetschen, sondern waagerecht scrollen lassen: bei 6 Plaetzen
     blieben sonst ~45px pro Spalte, in die ganze Namenspaare gesetzt werden.
     Die Zeitspalte klebt links, sonst weiss man beim Scrollen nicht mehr,
     welche Zeile man liest. */
  /* Eigener Scrollbereich statt die ganze Seite zu verschieben — so bleiben
     Datumsauswahl und Trainingskarte sichtbar, waehrend man durch die Zeiten
     scrollt. Gleiches Verhalten wie im Raster der iOS-App. */
  .grid-wrap { overflow: auto; -webkit-overflow-scrolling: touch;
               overscroll-behavior: contain; max-height: 62vh; }
  /* Feste Spaltenbreite statt Ausrichtung am laengsten Namen: sonst wird eine
     Spalte mit "Michael Wagner & Katharina Schmidt" 180px breit und man
     scrollt ewig. 112px zeigen drei Plaetze gleichzeitig; der vollstaendige
     Name steht im Detail-Dialog. */
  table.grid { table-layout: fixed; width: max-content; min-width: 100%; }
  table.grid thead th:not(:first-child),
  table.grid tbody td { width: 112px; min-width: 112px; max-width: 112px; }
  table.grid thead th:not(:first-child) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  table.grid tbody th,
  table.grid thead th:first-child {
    position: sticky; left: 0; z-index: 2;
    width: 58px; min-width: 58px; padding: 0 8px;
    box-shadow: 1px 0 0 var(--line);
  }
  /* Die Kopfzeile klebt oben UND die Ecke links-oben ueber beiden Achsen. */
  table.grid thead th:first-child { z-index: 3; }
  table.grid tbody th { background: var(--surface-2); }

  .slot { min-height: 52px; padding: 6px 5px; }
  .slot.busy, .slot.mine, .slot.wl, .slot.past { font-size: 11.5px; }
}

/* notifications badge on the nav "Mitteilungen" link */
.nbadge { display: none; position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: var(--on-danger); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.nbadge.show { display: inline-block; }