:root {
  --green: #267a43;
  --green-light: #e8f5ed;
  --red: #c0392b;
  --red-light: #fdecea;
  --blue: #1b2d4f;
  --blue-light: #ecf0f9;
  --gold: #c9941f;
  --gold-light: #fbf2e1;
  /* Gold als SCHRIFT: --gold kam dort nur auf 2,4-2,7:1, WCAG verlangt 4,5
     (Abnahme 21.09.2026). --gold bleibt fuer Linien/Flaechen ohne Text. */
  --gold-text: #8a6412;
  --gray: #f4f5f7;
  --border: #dde1e8;
  --text: #1e2330;
  --muted: #676e7c;
  --white: #ffffff;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Knoepfe und Felder erben die App-Schrift; sonst nimmt der Browser seine eigene
   (Arial) und sie sehen neben dem Text fremd aus. */
button, input, select, textarea { font-family: inherit; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #eef1f6;
  color: var(--text);
  min-height: 100vh;
}
header {
  background: var(--blue);
  color: white;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
}
header h1 { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.header-logo { height: 44px; width: auto; display: block; }
.header-user { font-size: 13px; opacity: 0.95; display: flex; align-items: center; gap: 6px; }
/* Erklaerungen an Knoepfen an/aus (Bugjagd 17.10. DW17-30), Abstand ueber margin (altes iOS ohne flex-gap) */
.kopf-tipps { display: inline-flex; align-items: center; font-size: 13px; opacity: 0.95; cursor: pointer; white-space: nowrap; }
.kopf-tipps input { margin: 0 6px 0 0; width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }

nav {
  display: flex;
  gap: 4px;
  background: var(--white);
  padding: 8px 28px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
nav button {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
}
nav button:hover { background: var(--gray); }
nav button.active { color: var(--blue); border-bottom-color: var(--blue); }

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; }
.tab-section { display: none; }
.tab-section.active { display: block; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 { font-size: 17px; margin-bottom: 14px; color: var(--blue); }
.card h3 { font-size: 15px; margin-bottom: 10px; }
.card-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-header-row h2 { margin-bottom: 0; }

.connect-screen {
  max-width: 560px;
  margin: 60px auto;
  text-align: center;
}
.connect-screen .card { padding: 32px; text-align: left; }
.connect-screen p { color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

button.btn, a.btn, label.btn {
  background: var(--blue);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.btn:hover, a.btn:hover, label.btn:hover { opacity: 0.9; }
button.btn.secondary, a.btn.secondary, label.btn.secondary { background: var(--gray); color: var(--text); border: 1px solid var(--border); }
button.btn.success { background: var(--green); }
button.btn.small, a.btn.small, label.btn.small { padding: 6px 12px; font-size: 13px; }
button.btn:disabled { opacity: 0.6; cursor: default; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.muted { color: var(--muted); font-size: 13px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }

.version-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
  margin-left: 4px;
}
.card .version-badge { background: var(--blue-light); color: var(--blue); border-color: transparent; }

#changelog-list { display: flex; flex-direction: column; gap: 8px; }
.changelog-entry { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.changelog-entry .cv { font-weight: 700; color: var(--blue); }
.changelog-group { display: flex; flex-direction: column; gap: 4px; }
.changelog-group .cg-title { font-weight: 700; font-size: 14px; color: var(--blue); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.changelog-group .cg-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--text); }

/* Haengt in der Mitte zwischen Titel+Info (links) und der Nutzergruppe
   (rechts) -- margin-left/right:auto teilen sich den Freiraum je zur Haelfte. */
.back-to-dashboard {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  transition: background 0.15s ease;
}
.back-to-dashboard:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; }

/* Steht direkt neben dem Appnamen, ohne eigenes Auto-Margin -- das Zentrieren
   von .back-to-dashboard erledigt das Wegschieben der rechten Gruppe von
   selbst mit. */
.header-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
/* Nur sichtbar, solange die App-Huelle sichtbar ist (app.js setzt hidden) --
   sonst stuende ohne Anmeldung ein Info-Knopf da, der nichts oeffnet. */
.header-info-btn[hidden] { display: none; }
.header-info-btn:hover, .header-info-btn.active { background: rgba(255, 255, 255, 0.28); }

/* ---------- Druckansicht (PDF-Export via window.print) ---------- */

#print-area { display: none; }
body.printing-report > *:not(#print-area) { display: none !important; }
body.printing-report #print-area { display: block; padding: 20px; }
#print-area h1 { font-size: 1.4rem; margin-bottom: 4px; color: #000; }
#print-area .print-meta { font-size: 0.85rem; color: #444; margin-bottom: 16px; }
.print-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.print-table th, .print-table td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; vertical-align: top; color: #000; }
.print-table th.num, .print-table td.num { text-align: right; white-space: nowrap; }
.print-table tr.total-row td { font-weight: 700; border-top: 2px solid #000; }
@media print {
  .print-table tr { page-break-inside: avoid; }
}

/* Rechte Nav-Gruppe (Einstellungen/Verwaltung + Info). Das margin haengt
   am Wrapper, damit die Gruppe rechts bleibt, auch wenn einzelne Buttons
   fuer Nicht-Admins ausgeblendet sind. */
/* flex-wrap, weil die Gruppe sonst als ein Stueck ueber den rechten Rand
   hinauslaeuft: bei 375px bleiben neben dem linken Reiter nur ~319px, und
   vier Reiter brauchen mehr. Ohne den Umbruch ist der letzte nicht antippbar. */
nav .nav-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: inherit; }

/* ---------- Handy: Formularfelder mindestens 16px ----------
   iOS Safari zoomt beim Antippen eines Feldes unter 16px automatisch in die
   Seite hinein — und wieder heraus zoomt es nicht. Die Feldregeln weiter oben
   laufen über Klassen und sind damit höher spezifisch als ein reiner
   Elementsatz, deshalb hier !important. Gilt nur auf schmalen Schirmen, das
   Desktop-Design bleibt unverändert. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Die Karte "Funktionen" im Info-Reiter teilt sich die Klassen mit der frueheren
   Aenderungsliste; nur der Abstand zwischen den Gruppen kommt von hier. */
#funktionen-list { display: flex; flex-direction: column; gap: 18px; font-size: 13px; }
/* ================= Darts: eigene Teile ================= */

[hidden] { display: none !important; }

/* Rechte: app.js setzt hidden an .editor-only / .admin-only */
.edit-fieldset { border: none; min-width: 0; }
.edit-fieldset:disabled input,
.edit-fieldset:disabled select,
.edit-fieldset:disabled textarea { background: var(--gray); color: var(--muted); cursor: not-allowed; }

.form-field.wide { grid-column: 1 / -1; }
.btn-row.end { justify-content: flex-end; }
.form-error { color: var(--red) !important; margin-top: 10px; }
.zaehler { font-size: 13px; font-weight: 600; color: var(--muted); }
.card h3.sub { font-size: 14px; color: var(--blue); margin: 18px 0 10px; }
.empty-state.small { padding: 14px 10px; font-size: 13px; }
label.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 8px; cursor: pointer; }
label.check input { width: 18px; height: 18px; }
button.btn.danger { background: var(--red); }
.card.gefahr { border-left: 4px solid var(--red); }
label.btn, .form-field label.btn { display: inline-block; user-select: none; margin-bottom: 0; font-size: 14px; color: white; }
.form-field label.btn.secondary { color: var(--text); }
.form-field label.btn.small { font-size: 13px; }
.feld-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.anzeige { padding: 8px 10px; border: 1px dashed var(--border); border-radius: 6px; font-size: 15px; font-weight: 700; color: var(--blue); min-height: 38px; }

.editor-card { border: 2px solid var(--blue-light); }

.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.filter-grid input, .filter-grid select,
#spieler-filter-mannschaft, #buchung-filter-spieler, .zeile-hinzu select, .zeile-hinzu input,
.liste input, .liste select {
  padding: 6px 10px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
}
.filter-grid input, .filter-grid select { width: 100%; }
#spieler-filter-mannschaft, #buchung-filter-spieler { max-width: 100%; }

/* Tabellen: am Handy seitlich im Kasten scrollen statt die Seite zu verbreitern */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 2px solid var(--border); white-space: nowrap; }
table.liste td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.liste th.num, table.liste td.num { text-align: right; white-space: nowrap; }
table.liste tr.gruppe td { background: var(--gray); font-weight: 700; color: var(--blue); font-size: 13px; }
table.liste tr.inaktiv td { color: var(--muted); }
table.liste tr.summe td { font-weight: 700; border-top: 2px solid var(--border); }
.unter { font-size: 12px; color: var(--muted); }

/* Eingabe-Tabellen (Einzelergebnisse): schmale Zahlenfelder */
table.liste.eingabe td, table.liste.mitte td { vertical-align: middle; }
table.liste.eingabe input.wert { width: 76px; text-align: right; }
table.liste.eingabe td.name { min-width: 130px; }
/* Abnahme 13.10. C-3: Beim seitlichen Wischen bleibt die Spielerspalte stehen,
   damit man sieht, zu wem die Werte gehoeren. */
table.liste.eingabe td.name, table.liste.eingabe thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--white);
  box-shadow: 1px 0 0 var(--border);
}

.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--gray); color: var(--text); }
.badge.ok { background: var(--green-light); color: var(--green); }
.badge.warn { background: var(--gold-light); color: var(--gold-text); }
.badge.rot { background: var(--red-light); color: var(--red); }
.badge.blau { background: var(--blue-light); color: var(--blue); }
.betrag-minus { color: var(--red); font-weight: 700; }
.betrag-plus { color: var(--green); font-weight: 700; }

/* Speicher-Leiste */
.speicher-leiste {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  background: var(--gold-light); color: var(--gold-text);
  position: sticky; top: 0; z-index: 5;
}
.speicher-leiste.fehler { background: var(--red-light); color: var(--red); }
.speicher-leiste.ok { background: var(--green-light); color: var(--green); }

/* Zeilen-Karten (Spiele, offene Zahlungen, Meisterschaften) */
.zeile {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px;
}
.zeile.klickbar { cursor: pointer; }
.zeile.klickbar:hover { background: var(--blue-light); }
.zeile-main { flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zeile-titel { font-weight: 600; font-size: 14px; }
.zeile-rechts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.zeile-hinzu { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.zeile-hinzu select, .zeile-hinzu input[type="text"] { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.zeile-hinzu input[type="number"] { width: 100px; }

/* Kleine Knoepfe in Zeilen/Tabellen: sehen aus wie button.btn.small.secondary der
   Vereins-Apps (grau, Rand, fett), bleiben aber 36px hoch zum Antippen. */
.mini-btn {
  background: var(--gray); border: 1px solid var(--border); border-radius: 8px;
  min-width: 36px; min-height: 36px; padding: 6px 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.mini-btn:hover { background: var(--blue-light); }
.mini-btn:disabled { opacity: 0.4; cursor: default; }

/* Bahnen-Auswahl */
.check-reihe { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.check-reihe label.check { margin-top: 0; }

/* Wochenplan */
.woche-nav { justify-content: flex-start; margin-bottom: 12px; }
table.liste.woche td { min-width: 110px; }
table.liste.woche td.tag { min-width: 90px; font-weight: 600; white-space: nowrap; }
table.liste.woche tr.heute td.tag { color: var(--blue); }
table.liste.woche tr.heute td { background: var(--blue-light); }
.beleg {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; line-height: 1.3;
  border: none; border-left: 4px solid var(--blue); background: var(--gray); color: var(--text);
  border-radius: 4px; padding: 4px 6px; margin-bottom: 4px; cursor: pointer;
}
.beleg:hover { background: var(--blue-light); }
.beleg.training { border-left-color: var(--green); }
.beleg.ligaspiel { border-left-color: var(--blue); }
.beleg.vermietung { border-left-color: var(--gold); }
.beleg.sonstiges { border-left-color: var(--muted); }

/* Kacheln Kasse */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kachel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.kachel-wert { font-size: 22px; font-weight: 700; color: var(--blue); }
.kachel-text { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }

@media (max-width: 560px) {
  header { padding: 12px 16px; }
  nav { padding: 8px 16px 0; }
  main { padding: 16px 16px 60px; }
  .card { padding: 16px; }
  .connect-screen { margin: 24px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .back-to-dashboard { margin-left: 0; }
  nav button { padding: 10px 10px; }
}

/* ---------- Druck ---------- */
#print-area .print-unterschrift { margin-top: 40px; display: flex; gap: 40px; flex-wrap: wrap; font-size: 0.85rem; color: #000; }
#print-area .print-unterschrift div { border-top: 1px solid #000; padding-top: 4px; min-width: 220px; }
#print-area .print-kopf { font-size: 0.85rem; color: #000; margin-bottom: 14px; border-collapse: collapse; }
#print-area .print-kopf td { padding: 2px 12px 2px 0; vertical-align: top; }
#print-area h2 { font-size: 1.05rem; margin: 18px 0 6px; color: #000; }
#print-area .print-leer td { height: 26px; }

/* Turnierplan (Gruppen + K.-o.), seit 1.3 */
.tn-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.tn-gruppe { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-width: 0; }
#ms-turnier h4 { font-size: 13px; color: var(--blue); margin: 4px 0 8px; }
.tn-ko-titel { margin-top: 16px !important; }
table.liste tr.tn-weiter td { background: var(--green-light); }
.tn-spiele { margin-top: 8px; }
.tn-spiel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.tn-spiel:last-child { border-bottom: none; }
.tn-spiel.fehler input.tn-erg { border-color: var(--red); }
.tn-spiel.offen, .tn-spiel.frei { color: var(--muted); }
.tn-name { flex: 1 1 90px; min-width: 0; overflow-wrap: anywhere; }
.tn-name.sieger { font-weight: 700; color: var(--green); }
.tn-spiel input.tn-erg { width: 56px; text-align: center; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; font-family: inherit; }
.tn-spiel .tn-fehler { flex-basis: 100%; color: var(--red); }
.tn-ko { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tn-runde { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 0; }
.tn-runden-name { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tn-platz { margin: 6px 0 4px 20px; padding: 0; font-size: 14px; list-style: none; }
.st-hinweis { white-space: normal; max-width: 220px; margin-left: auto; }
@media (max-width: 560px) {
  .tn-gruppen, .tn-ko { grid-template-columns: 1fr; }
}

.filter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.filter-min input { width: 64px; }
table.liste th.sortierbar { cursor: pointer; user-select: none; }
table.liste th.sortierbar:hover { color: var(--text); }
table.liste th.sortierbar::after { content: attr(data-pfeil); }

.qr-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0; }
.qr-box svg { background: #fff; border-radius: 8px; max-width: 100%; height: auto; }
.qr-box span { max-width: 260px; }

/* Datenschutz-Block auf Anmelden/Registrieren (Art. 13, vor dem Absenden-Knopf) */
.ds-block { margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--muted); background: var(--white); }
.ds-block summary { cursor: pointer; font-weight: 600; color: var(--text); }
.ds-block p { margin: 6px 0; }

/* Datenschutz-Karte in den Einstellungen */
.ds-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ds-teil { background: var(--gray); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.ds-teil h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); margin: 0 0 6px; }
.ds-teil p { margin: 0 0 6px; }
.ds-teil p:last-child { margin-bottom: 0; }
.ds-teil ul { margin: 0; padding-left: 18px; }
.ds-teil li { margin-bottom: 4px; }
.ds-fuss { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.ds-fuss > div { display: grid; grid-template-columns: 100px 1fr; }
.ds-label { font-weight: 600; color: var(--text); }

/* Flex-gap-Ersatz fuer Safari/iOS unter 14.1 (Bugjagd 17.10. T3-F7): dort wirkt gap in Flex-Zeilen
   nicht, Knoepfe kleben aneinander. Abstand dann ueber margin. Safari kann inset und flex-gap seit
   derselben Version (14.1) -- wer inset kennt, behaelt gap und bekommt keine margins (kein doppelter
   Abstand). @supports (gap) taugt nicht als Test, weil Grid-gap es schon wahr macht. */
@supports not (inset: 0) {
  .btn-row > * { margin-right: 10px; margin-bottom: 10px; }
  .zeile-hinzu > * { margin-right: 8px; margin-bottom: 8px; }
  .zeile-rechts > * { margin-right: 6px; margin-bottom: 6px; }
  .qr-box > * { margin-right: 16px; margin-bottom: 8px; }
}