/* Schachtraining – gemeinsames Design. Komponenten-Klassen sind in der CLAUDE.md beschrieben;
   app-eigene Ergänzungen liegen in static/<app>/<app>.css und kommen über {% block extra_head %}. */

:root {
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-2: #faf7f0;
  --border: #e4ddcc;
  --text: #1f2421;
  --muted: #6b7068;
  --accent: #1f5c45;          /* Brettgrün */
  --accent-hover: #174836;
  --accent-soft: #e3efe8;
  --on-accent: #fff;          /* Schrift auf --accent (Knöpfe, aktive Chips) */
  --topbar: var(--accent);    /* Kopfzeile */
  --gold: #b8892b;            /* Hervorhebung, Platz 1 */
  --gold-soft: #f6ecd2;
  --silver: #8d96a0;
  --bronze: #a8693a;
  --ok: #2e7d4f;
  --ok-soft: #e2f2e8;
  --warn: #b7791f;
  --warn-soft: #fbf0d9;
  --danger: #b4443a;
  --danger-soft: #f8e3e0;
  --info: #2f6290;
  --info-soft: #e1ecf6;
  --up: #2e7d4f;
  --down: #b4443a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(31, 36, 33, .06), 0 4px 14px rgba(31, 36, 33, .05);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  /* Diagrammfarben je Kategorie */
  --c-dwz: #1f5c45;
  --c-elo: #2f6290;
  --c-blitz: #c2410c;
  --c-rapid: #7c3aed;
  --c-puzzle: #b8892b;
  --c-storm: #0e7490;
  --c-eroeffnung: #be185d; /* Eröffnungstraining (Kurse, Wettbewerb „Eröffnungszeilen“) */
  /* Serie (Startseite, Fortschritt): Flamme und Joker */
  --flamme: #ea580c;
  --flamme-2: #fbbf24;
  --flamme-soft: #ffedd5;
  --eis: #0284c7;
  --eis-soft: #e0f2fe;
  /* Vorschau „Als Kind ansehen“ (Balken oben, core/ansicht.py): Bernstein mit Warnstreifen – nicht zu verwechseln */
  --vorschau-bg: #fde68a;
  --vorschau-text: #3b2606;
  --vorschau-rand: #d4a72c;
  --vorschau-band-1: #f2b705;
  --vorschau-band-2: #2b2205;
  /* „Live“ (Roman, 23.10.2026: „Roter Balken oben, damit man es nie verwechselt“): alles wird als das Kind gespeichert */
  --live-bg: #b91c1c;
  --live-text: #ffffff;
  --live-rand: #fca5a5;
  --live-band-1: #ef4444;
  --live-band-2: #450a0a;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151917;
    --surface: #1d2320;
    --surface-2: #232a26;
    --border: #2f3833;
    --text: #e8ebe6;
    --muted: #9aa39c;
    --accent: #5fb38e;
    --accent-hover: #74c49f;
    --accent-soft: #20372c;
    /* Weiß auf dem hellen Grün wäre im Dunkelmodus kaum lesbar (Kontrast 2,5:1): dunkle Schrift auf Knöpfen,
       die Kopfzeile in dunklem Brettgrün */
    --on-accent: #0f1a14;
    --topbar: #1e4a3a;
    --gold: #e0b452;
    --gold-soft: #3a3020;
    --ok: #5fb38e;
    --ok-soft: #1f3529;
    --warn: #e0a84a;
    --warn-soft: #3a2f1c;
    --danger: #e07a6f;
    --danger-soft: #3d2320;
    --info: #79a9d6;
    --info-soft: #1e2d3b;
    --up: #5fb38e;
    --down: #e07a6f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --c-dwz: #5fb38e;
    --c-elo: #79a9d6;
    --c-blitz: #f08a4b;
    --c-rapid: #a78bfa;
    --c-puzzle: #e0b452;
    --c-storm: #38bdf8;
    --c-eroeffnung: #f472b6;
    --flamme: #fb923c;
    --flamme-2: #fde047;
    --flamme-soft: #3b2414;
    --eis: #7dd3fc;
    --eis-soft: #10293a;
    --vorschau-bg: #3f310b;
    --vorschau-text: #fde68a;
    --vorschau-rand: #8a6d1d;
    --vorschau-band-1: #f2b705;
    --vorschau-band-2: #151917;
    --live-bg: #7f1d1d;
    --live-text: #fee2e2;
    --live-rand: #ef4444;
    --live-band-1: #ef4444;
    --live-band-2: #151917;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
img, svg { max-width: 100%; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main.container { padding-top: 24px; padding-bottom: 40px; }

/* ---------- Kopfzeile ---------- */
.topbar { background: var(--topbar); color: #fff; position: sticky; top: 0; z-index: 20; }
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 16px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.mainnav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.mainnav a, .nav-logout button {
  color: rgba(255,255,255,.88); padding: 8px 10px; border-radius: 8px; font-size: .95rem; white-space: nowrap;
}
.nav-user { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.mainnav a:hover, .nav-logout button:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.mainnav a.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.nav-spacer { flex: 1; }
.nav-secondary { font-size: .88rem !important; }
.nav-logout { margin: 0; }
.nav-logout button { background: none; border: 0; font: inherit; font-size: .88rem; cursor: pointer; }
.nav-toggle, .nav-burger { display: none; }
/* Im Burger-Modus bleibt das Kontrollkästchen per Tastatur erreichbar (Tab, Leertaste) und zeigt den Fokus am Burger. */
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
.mainnav a:focus-visible, .nav-logout button:focus-visible, .nav-mehr > summary:focus-visible, .brand:focus-visible {
  outline: 2px solid #fff; outline-offset: 1px;
}

/* Untermenü „Mehr“ (nur Trainer): details/summary, öffnet unter dem Knopf. Im Burger-Menü stehen dieselben Punkte
   flach (.nav-mehr-flach), das Untermenü ist dort ausgeblendet. */
.nav-mehr { position: relative; }
.nav-mehr > summary {
  list-style: none; cursor: pointer; color: rgba(255,255,255,.88); padding: 8px 10px; border-radius: 8px;
  font-size: .95rem; white-space: nowrap; user-select: none;
}
.nav-mehr > summary::-webkit-details-marker { display: none; }
.nav-mehr > summary::after {
  content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0;
}
.nav-mehr[open] > summary::after { border-top-color: transparent; border-bottom: 4px solid currentColor; border-top-width: 0; }
.nav-mehr > summary:hover, .nav-mehr[open] > summary { background: rgba(255,255,255,.12); color: #fff; }
.nav-mehr.active > summary { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.nav-mehr-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.mainnav .nav-mehr-panel a { color: var(--text); }
.mainnav .nav-mehr-panel a:hover { background: var(--surface-2); color: var(--text); }
.mainnav .nav-mehr-panel a.active { background: var(--accent-soft); color: var(--accent); }
.mainnav .nav-mehr-panel a:focus-visible { outline-color: var(--accent); }
.nav-mehr-flach { display: none; }

/* Der Trainer hat mehr Menüpunkte: zwischen Burger und breitem Bildschirm nur das Logo zeigen */
@media (min-width: 981px) and (max-width: 1240px) {
  .topbar.is-trainer .brand span { display: none; }
  .topbar.is-trainer .mainnav a, .topbar.is-trainer .nav-mehr > summary { padding-left: 9px; padding-right: 9px; }
}

@media (max-width: 980px) {
  .topbar-inner { flex-wrap: wrap; }
  .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
  .nav-burger { display: block; margin-left: auto; width: 40px; height: 40px; cursor: pointer; position: relative; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    position: absolute; left: 9px; width: 22px; height: 2px; background: #fff; content: ""; border-radius: 2px;
  }
  .nav-burger span { top: 19px; }
  .nav-burger span::before { top: -7px; left: 0; }
  .nav-burger span::after { top: 7px; left: 0; }
  .mainnav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: 12px; }
  .nav-toggle:checked ~ .mainnav { display: flex; }
  .nav-spacer { display: none; }
  .nav-mehr { display: none; }
  .nav-mehr-flach {
    display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.2);
  }
  .nav-logout button { width: 100%; text-align: left; }
  .nav-user { max-width: none; }
  /* „Verwaltung“ gehört zum Konto (Roman, 23.10.2026) – im Burger-Menü durch eine Linie von „Mehr“ getrennt */
  .nav-verwaltung { position: relative; margin-top: 9px; }
  .nav-verwaltung::before {
    content: ""; position: absolute; left: 0; right: 0; top: -5px; border-top: 1px solid rgba(255,255,255,.2);
  }
}

/* ---------- Vorschau „Als Kind ansehen“ (Roman, 22.10.2026 abends, core/ansicht.py) ----------
   Balken über der Kopfzeile: wen der Trainer gerade sieht, Wechseln, Beenden. Er scrollt mit weg; die feste Kopfzeile
   trägt in der Vorschau unten einen Warnstreifen, damit man es auch weiter unten auf der Seite nicht vergisst. */
.vorschau-balken { background: var(--vorschau-bg); color: var(--vorschau-text); }
.vorschau-balken::after {
  content: ""; display: block; height: 5px;
  background: repeating-linear-gradient(-45deg, var(--vorschau-band-1) 0 8px, var(--vorschau-band-2) 8px 16px);
}
.vorschau-inner {
  max-width: 1120px; margin: 0 auto; padding: 8px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
}
.vorschau-text { margin: 0; flex: 1 1 14rem; min-width: 0; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.vorschau-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vorschau-wechsel, .vorschau-ende { display: flex; align-items: center; gap: 6px; margin: 0; }
.vorschau-wechsel select {
  font: inherit; font-size: .85rem; padding: 4px 6px; max-width: 11rem; min-width: 0;
  border: 1px solid var(--vorschau-rand); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.vorschau-balken .btn { border-color: var(--vorschau-rand); }
.vorschau-balken .vorschau-beenden { background: var(--vorschau-text); border-color: var(--vorschau-text); color: var(--vorschau-bg); }
.vorschau-balken .vorschau-beenden:hover { opacity: .9; }
.vorschau-balken select:focus-visible, .vorschau-balken .btn:focus-visible { outline: 2px solid var(--vorschau-text); outline-offset: 2px; }
body:has(.vorschau-balken) .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--vorschau-band-1) 0 8px, var(--vorschau-band-2) 8px 16px);
}
.vorschau-ende-kurz, .vorschau-wechsel-kurz { display: none; }
/* Umschalter „Ansicht“ | „Live“ (Roman, 23.10.2026: „die Optionen Ansicht und Live“): das Gewählte gefüllt */
.vorschau-modus {
  display: inline-flex; margin: 0; border: 1px solid var(--vorschau-rand); border-radius: 999px; overflow: hidden;
  flex: none;
}
.vorschau-modus-wahl {
  font: inherit; font-size: .85rem; line-height: 1.3; padding: 4px 10px; border: 0; margin: 0; white-space: nowrap;
  background: transparent; color: var(--vorschau-text);
}
button.vorschau-modus-wahl { cursor: pointer; }
button.vorschau-modus-wahl:hover { box-shadow: inset 0 0 0 999px rgba(127, 127, 127, .18); }
.vorschau-modus-wahl.is-an { background: var(--vorschau-text); color: var(--vorschau-bg); font-weight: 700; }
.vorschau-balken .vorschau-modus-wahl:focus-visible { outline: 2px solid var(--vorschau-text); outline-offset: -3px; }
.vorschau-modus .live-punkt { color: var(--live-band-1); }
/* Live: dieselben Bausteine in Rot – die Farben gelten im Balken, im Hinweis unten und am Streifen der Kopfzeile */
.vorschau-balken.is-live, .vorschau-hinweis.is-live, body:has(.vorschau-balken.is-live) {
  --vorschau-bg: var(--live-bg); --vorschau-text: var(--live-text); --vorschau-rand: var(--live-rand);
  --vorschau-band-1: var(--live-band-1); --vorschau-band-2: var(--live-band-2);
}
.vorschau-balken.is-live .vorschau-wort { letter-spacing: .06em; }
.vorschau-balken.is-live .vorschau-modus .live-punkt { color: inherit; }
body:has(.vorschau-balken.is-live) .topbar::after { height: 5px; }
.vorschau-text .live-punkt { display: inline-block; animation: live-puls 1.6s ease-in-out infinite; }
@keyframes live-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .vorschau-text .live-punkt { animation: none; } }
/* Am Handy eine Zeile (Prüfung 22.10.2026: dreizeilig sah Roman oben bis zu 18 % weniger als das Kind) – der Name
   steht in der Auswahl, der Umschalter sagt Ansicht oder Live, „Wechseln“ wird zum ⇄ und „… beenden“ zum ✕
   (aria-label bleibt); in Live bleibt vorn „● LIVE“ stehen */
@media (max-width: 599px) {
  .vorschau-inner { flex-wrap: nowrap; padding: 5px 16px; gap: 8px; }
  .vorschau-text { flex: 0 0 auto; white-space: nowrap; }
  .vorschau-balken:not(.is-live) .vorschau-text, .vorschau-lang { display: none; }
  .vorschau-knoepfe { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; gap: 6px; }
  .vorschau-wechsel { min-width: 0; gap: 4px; }
  .vorschau-wechsel select { flex: 0 1 auto; min-width: 3.5rem; max-width: 8.5rem; }
  .vorschau-modus-wahl { padding: 4px 8px; }
  .vorschau-wechsel-lang, .vorschau-ende-lang { display: none; }
  .vorschau-wechsel-kurz, .vorschau-ende-kurz { display: inline; }
}
@media (max-width: 399px) { .vorschau-modus-wahl [aria-hidden] { display: none; } }
/* ganz schmal nur noch der rote Punkt – „Live“ steht dann im Umschalter */
@media (max-width: 359px) { .vorschau-balken.is-live .vorschau-wort { display: none; } }
/* „In der Vorschau wird nichts gespeichert“ bzw. in Live „Im Live-Modus gesperrt“ – kurz unten eingeblendet, wenn
   etwas abgeschickt würde; auf Seiten des Trainers, solange in einem anderen Tab Ansicht oder Live läuft, mit
   „Vorschau beenden und speichern“ bzw. „Live beenden und speichern“ (vorschau.js) */
.vorschau-hinweis {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; text-align: center;
  border-radius: var(--radius-sm); background: var(--vorschau-text); color: var(--vorschau-bg); font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.vorschau-hinweis[hidden] { display: none; }
.vorschau-tab { width: min(34rem, calc(100% - 32px)); text-align: left; font-weight: 500; }
.vorschau-tab p { margin: 0 0 8px; }
.vorschau-tab-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.vorschau-tab .btn { border-color: var(--vorschau-bg); }
.vorschau-tab .vorschau-beenden { background: var(--vorschau-bg); color: var(--vorschau-text); }

/* ---------- Seitenkopf ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-header h1 { margin: 0; }
.page-header .subtitle { color: var(--muted); margin: 4px 0 0; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.section-title h2 { margin: 0; }

/* ---------- Karten und Raster ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.card + .card { margin-top: 16px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card-header h2, .card-header h3 { margin: 0; }
.card.narrow { max-width: 520px; }
.card.flush { padding: 0; overflow: hidden; }
.card-link { display: block; color: inherit; }
/* Fußzeile einer Karte (rutscht in Flex-Karten nach unten), Chip-Reihe, Notiz-Kasten (Text mit Zeilenumbrüchen) */
.card-footer { margin-top: auto; padding-top: 12px; font-size: .92rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.notiz { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; white-space: pre-line; }
.card-link:hover { text-decoration: none; border-color: var(--accent); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.grid > * { min-width: 0; }
.grid > .card + .card { margin-top: 0; }
.stack > * + * { margin-top: 16px; }

/* ---------- Kennzahlen ---------- */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-meta { font-size: .85rem; color: var(--muted); }
.delta { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-up { color: var(--up); }
.delta-up::before { content: "▲ "; font-size: .75em; }
.delta-down { color: var(--down); }
.delta-down::before { content: "▼ "; font-size: .75em; }
.delta-zero { color: var(--muted); }

/* ---------- Tabellen ---------- */
/* position: relative hält Screenreader-Text (.sr-only, absolut) in der scrollenden Tabelle – sonst ragt er am Handy
   aus ihr heraus und die ganze Seite lässt sich seitlich verschieben. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.highlight { background: var(--accent-soft); }
.table tr.highlight:hover { background: var(--accent-soft); }

/* ---------- Plaketten ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge-gold { background: var(--gold-soft); color: var(--gold); border-color: transparent; }

/* Platzierungen 1–3 */
.rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--muted); }
.rank-1 { background: var(--gold); color: #fff; }
.rank-2 { background: var(--silver); color: #fff; }
.rank-3 { background: var(--bronze); color: #fff; }

/* ---------- Schaltflächen und Formulare ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-danger { color: var(--danger); }
.btn-small { padding: 5px 10px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.btn.is-selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.form label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 6px; }
.form input[type=text], .form input[type=password], .form input[type=email], .form input[type=number],
.form input[type=date], .form input[type=datetime-local], .form input[type=time], .form input[type=url],
.form input[type=search], .form select, .form textarea,
.form .field input, .form .field select, .form .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit;
}
.form input[type=checkbox], .form input[type=radio],
.form .field input[type=checkbox], .form .field input[type=radio] { width: auto; padding: 0; margin: 0; accent-color: var(--accent); }
.form textarea { min-height: 90px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.form button[type=submit] { margin-top: 18px; }
.form .help { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.field-error { color: var(--danger); font-size: .88rem; margin-top: 4px; }
.inline-form { display: inline; margin: 0; }

/* ---------- Filterleiste und Reiter ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.chip { display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .88rem; font-weight: 500; }
.chip:hover { border-color: var(--accent); text-decoration: none; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Fortschrittsbalken ---------- */
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.progress.is-done > span { background: var(--ok); }
.progress.is-late > span { background: var(--danger); }
.progress-label { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: 4px; }

/* ---------- Listen ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.list > li:last-child { border-bottom: 0; }
.list .list-main { flex: 1; min-width: 0; }
.list .list-title { font-weight: 600; overflow-wrap: anywhere; hyphens: auto; } /* „Bezirksjugendeinzelmeisterschaft“ bei 320 px */
.list .list-meta { font-size: .88rem; color: var(--muted); }

/* Datumsblock (Kalender, Turniere, Termine) */
.datebox { flex: none; width: 54px; text-align: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); padding: 6px 0; line-height: 1.1; }
.datebox .d { display: block; font-size: 1.35rem; font-weight: 700; }
.datebox .m { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* ---------- Diagramme (core/charts.py) ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis-label { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .series { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--surface); stroke-width: 1.5; }
.sparkline { display: inline-block; vertical-align: middle; }
.sparkline path { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.sparkline[class*="c-"] path { stroke: currentColor; }
/* Farbpunkt je Kategorie: <span class="kat-punkt c-blitz"> (Farbe kommt über .c-* als currentColor) */
.kat-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: baseline; flex: none; }
.c-dwz { color: var(--c-dwz); stroke: var(--c-dwz); }
.c-elo { color: var(--c-elo); stroke: var(--c-elo); }
.c-blitz { color: var(--c-blitz); stroke: var(--c-blitz); }
.c-rapid { color: var(--c-rapid); stroke: var(--c-rapid); }
.c-puzzle { color: var(--c-puzzle); stroke: var(--c-puzzle); }
.c-storm { color: var(--c-storm); stroke: var(--c-storm); }
.c-eroeffnung { color: var(--c-eroeffnung); stroke: var(--c-eroeffnung); }

/* ---------- Kurze, aufklappbare Erklärung für den Trainer: {% include "core/_info.html" with text="…" %} ----------
   Roman, 22.10.2026: weniger Erklärungen – je Bereich höchstens eine kurze Regel, eingeklappt. Gedacht für das rechte
   Ende eines .card-header (das Kästchen öffnet sich nach links unten und bleibt so am Handy im Bild). */
.info { position: relative; display: inline-block; vertical-align: middle; flex: none; }
.info > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font: italic 700 .78rem/1 Georgia, "Times New Roman", serif; user-select: none;
}
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover, .info[open] > summary { border-color: var(--accent); color: var(--accent); }
.info > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-text {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: max-content;
  max-width: min(320px, calc(100vw - 48px)); margin: 0; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  font-size: .86rem; font-weight: 400; font-style: normal; line-height: 1.45; color: var(--text);
  text-transform: none; letter-spacing: 0; white-space: normal;
}

/* ---------- Meldungen, Leerzustände, Hilfsklassen ---------- */
.messages { margin-bottom: 16px; }
/* Sprungziele (#…) nicht unter der festen Kopfzeile (56 px) verstecken */
[id] { scroll-margin-top: 72px; }
.message { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info); margin-bottom: 8px; }
.message-success { background: var(--ok-soft); color: var(--ok); }
.message-warning { background: var(--warn-soft); color: var(--warn); }
.message-error { background: var(--danger-soft); color: var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 32px 20px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.hidden-mobile { }
/* Nur für Screenreader sichtbar */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  h1 { font-size: 1.4rem; }
  .hidden-mobile { display: none; }
  .card { padding: 16px; }
  .stat-value { font-size: 1.6rem; }
}

/* ---------- Login ---------- */
.page-login main.container { display: flex; align-items: center; justify-content: center; }
.login-wrap { width: 100%; display: flex; justify-content: center; padding: 6vh 0; }
.login-card { width: 100%; max-width: 400px; text-align: center; }
.login-card .form { text-align: left; }
.login-logo { border-radius: 14px; margin-bottom: 12px; }

/* Fehlerseiten (403, 404, CSRF) */
.fehlerseite { margin: 6vh auto 0; }
.fehlerseite h1 { font-size: 1.4rem; }

.footer { color: var(--muted); font-size: .82rem; padding: 20px 0 28px; border-top: 1px solid var(--border); }

/* Abzeichen der Meilensteine (7, 30, 100, 365 Tage) – Sechseck in den Metallen des Trophäenschranks
   (ranglisten.css .pk-bronze/-silber/-gold/-diamant), dunkles Feld, Zahl in hellem Metall – core/_abzeichen.svg auf
   Startseite und Fortschritt (der Schrank hat eigene: ranglisten/_abzeichen.html) */
.abzeichen { --abz-m: #c47a40; --abz-h: #f0c39a; }
.abzeichen.abz-30 { --abz-m: #b9c2cb; --abz-h: #eef1f4; }
.abzeichen.abz-100 { --abz-m: #e0ae38; --abz-h: #f8dd8c; }
.abzeichen.abz-365 { --abz-m: #8b9cf7; --abz-h: #dbeafe; }
.abzeichen .abz-metall { fill: var(--abz-m); }
.abzeichen .abz-schatten { fill: #000; opacity: .14; }
.abzeichen .abz-feld { fill: #1e293b; }
.abzeichen .abz-zahl { fill: var(--abz-h); font-weight: 800; font-family: var(--font); }
.abzeichen.is-offen { opacity: .6; }