/* ── Werte ────────────────────────────────────────────────────────────────
   Zwei Wertetabellen: hell und dunkel. Welche gilt, entscheidet data-theme am
   <html>. Alle Regeln weiter unten greifen nur auf diese Variablen zu, nie auf
   feste Farben – sonst bricht der Dunkelmodus.

   Das Blau ist das der Vereinsseite (#0c4da2), damit das Werkzeug spaeter ohne
   Bruch als Unterseite von tsv-blender.de stehen kann.
   ------------------------------------------------------------------------ */
:root {
  color-scheme: light;

  --blau:        #0c4da2;
  --blau-dunkel: #08376f;
  --blau-hell:   #e9f0fa;
  --blau-linie:  #c3d6ee;

  --grund:    #f4f6f9;
  --flaeche:  #ffffff;
  --flaeche-2:#eef1f6;

  --text:       #23262b;
  --text-leise: #5c6371;
  --text-zart:  #767d8b;

  --linie:       #dde2ea;
  --linie-stark: #c3cad6;

  --gut:      #17703a;  --gut-flaeche:  #e7f4ec;  --gut-linie:  #b5ddc5;
  --warn:     #9a5300;  --warn-flaeche: #fdf2e5;  --warn-linie: #f0d1a8;
  --fehler:   #b3231f;  --fehler-flaeche:#fdecec; --fehler-linie:#f3c3c2;
  --neutral-flaeche: #eef1f6;

  --radius:    10px;
  --radius-gr: 14px;
  --schatten:    0 1px 2px rgba(16, 30, 54, .06), 0 1px 3px rgba(16, 30, 54, .04);
  --schatten-pop: 0 12px 32px -14px rgba(12, 40, 90, .35);

  --kopf-hoehe: 60px;

  /* Roboto steht auf der Vereinsseite; lokal faellt es auf die Systemschrift
     zurueck – keine Anfrage an Google, das Werkzeug laeuft auch offline. */
  --schrift: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --schrift-zahl: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

  --blau:        #4f92e8;
  --blau-dunkel: #2f6dc0;
  --blau-hell:   #16273d;
  --blau-linie:  #24456e;

  --grund:    #14171c;
  --flaeche:  #1c2027;
  --flaeche-2:#242a33;

  --text:       #e7eaef;
  --text-leise: #a3abb9;
  --text-zart:  #858da0;

  --linie:       #2c323c;
  --linie-stark: #3c4451;

  --gut:      #5fc98a;  --gut-flaeche:  #162c20;  --gut-linie:  #27543a;
  --warn:     #e0a45c;  --warn-flaeche: #2c2418;  --warn-linie: #55411f;
  --fehler:   #ef7d78;  --fehler-flaeche:#2e1b1b; --fehler-linie:#5a2f2d;
  --neutral-flaeche: #242a33;

  --schatten:    0 1px 2px rgba(0, 0, 0, .4);
  --schatten-pop: 0 12px 32px -14px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--blau);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 2px 8px rgba(12,40,90,.12);
}
.kopf__innen {
  max-width: 1280px; margin: 0 auto; padding: 0 20px;
  height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: 22px;
}
.marke { display: flex; align-items: center; gap: 11px; color: #fff; flex: none; }
.marke:hover { text-decoration: none; }
/* Das Vereinswappen ist selbst dunkelblau. Auf der blauen Kopfleiste ginge es
   unter, deshalb steht es auf einer hellen Scheibe – wie auf der Vereinsseite. */
.marke__wappen {
  width: 38px; height: 38px; flex: none;
  object-fit: contain; padding: 3px;
  background: #fff; border-radius: 9px;
}
.marke__zeichen {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.16);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.marke__name { font-weight: 600; font-size: 16px; line-height: 1.1; white-space: nowrap; }
.marke__sub { font-size: 11.5px; opacity: .78; line-height: 1.1; white-space: nowrap; }

/* min-width:0 ist noetig, damit die Navigation schrumpfen darf statt die
   Kopfleiste auseinanderzudruecken; passt sie nicht, wird sie scrollbar. */
.kopf__nav {
  display: flex; gap: 2px; margin-left: 8px;
  flex: 1 1 auto; min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.kopf__nav::-webkit-scrollbar { display: none; }
.kopf__nav a {
  color: rgba(255,255,255,.86);
  padding: 7px 11px; border-radius: 8px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.kopf__nav a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.kopf__nav a.aktiv { background: rgba(255,255,255,.2); color: #fff; }

/* "Mehr": aufklappbares Feld ohne Bibliothek. <details> reicht dafuer. */
.kopf__mehr { position: relative; }
.kopf__mehr > summary {
  list-style: none; cursor: pointer;
  color: rgba(255,255,255,.86);
  padding: 7px 11px; border-radius: 8px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.kopf__mehr > summary::-webkit-details-marker { display: none; }
.kopf__mehr > summary::after { content: " ▾"; opacity: .7; }
.kopf__mehr > summary:hover,
.kopf__mehr[open] > summary { background: rgba(255,255,255,.12); color: #fff; }
.kopf__mehr > summary.aktiv { background: rgba(255,255,255,.2); color: #fff; }
.kopf__mehr-feld {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten-pop);
  padding: 6px; min-width: 190px; display: flex; flex-direction: column;
  /* Beim Administrator ist die Liste lang: Profil, Nachschlagen, Verwaltung,
     Abmelden. Ohne Hoechsthoehe waechst sie unten aus dem Fenster heraus, und
     zwar ohne Rollbalken – "Abmelden" steht dann ausserhalb des Bildschirms.
     Die 24px sind der Abstand zum unteren Rand, damit der letzte Eintrag nicht
     an der Kante klebt. */
  max-height: calc(100vh - var(--kopf-hoehe, 64px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kopf__mehr-feld a { color: var(--text); padding: 8px 12px; border-radius: 7px; }
.kopf__mehr-feld a:hover { background: var(--flaeche-2); color: var(--text); }
.kopf__mehr-feld a.aktiv { background: var(--blau-hell); color: var(--blau); }

.kopf__rechts { display: flex; align-items: center; gap: 10px; flex: none; }
.kopf__saison {
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  padding: 5px 9px; border-radius: 8px; font: inherit; font-size: 13px;
  width: auto; min-width: 72px;
}
.kopf__saison option { color: #23262b; }
.kopf__nutzer { font-size: 13px; color: rgba(255,255,255,.85); text-align: right; line-height: 1.2; }
.kopf__nutzer b { display: block; color: #fff; font-weight: 600; }
.kopf__knopf {
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center;
}
.kopf__knopf:hover { background: rgba(255,255,255,.24); }
.nav-schalter { display: none; }

/* ── Rumpf ──────────────────────────────────────────────────────────────── */
.rumpf { max-width: 1280px; margin: 0 auto; padding: 24px 20px 60px; }

.seiten-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.seiten-kopf p { margin: 0; color: var(--text-leise); font-size: 14px; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  box-shadow: var(--schatten);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.karte--eng { padding: 0; overflow: hidden; }
/* Hebt eine Karte hervor, die gerade der naechste Schritt ist. */
.karte--hinweis { border-color: var(--blau-linie); background: var(--blau-hell); }

/* Vorlagen fuer wiederkehrende Abfragen */
.vorlage {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 14px; background: var(--flaeche-2);
}
.vorlage__name { font-weight: 600; margin-bottom: 10px; }
.karte__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.karte__kopf h2 { margin: 0; }
.karte--eng .karte__kopf { padding: 16px 20px 0; }

/* Karten sollen oben buendig stehen und nicht auf die Hoehe der hoechsten
   Karte der Zeile aufgezogen werden – sonst klaffen Luecken. */
.raster { display: grid; gap: 18px; align-items: start; }
.raster--2 { grid-template-columns: 1fr; }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 1000px) { .raster--2 { grid-template-columns: 1fr 1fr; } }
/* Baum links, Meldeliste rechts: der Baum braucht den Platz. */
.raster--breit { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .raster--breit { grid-template-columns: minmax(0, 3fr) minmax(340px, 1fr); } }

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */
.zahlen { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.zahl {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten);
}
.zahl__wert { font-size: 28px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zahl__text { font-size: 12.5px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; }
.zahl--akzent { background: var(--blau-hell); border-color: var(--blau-linie); }
.zahl--akzent .zahl__wert { color: var(--blau); }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
.tabelle-huelle { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th {
  text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-leise);
  padding: 10px 12px; border-bottom: 1px solid var(--linie);
  background: var(--flaeche-2); white-space: nowrap; position: sticky; top: 0;
}
table.liste th a { color: inherit; }
table.liste td { padding: 9px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.liste tbody tr:hover { background: var(--flaeche-2); }
table.liste tbody tr:last-child td { border-bottom: 0; }
/* Unterreiter innerhalb eines Bereichs – zurzeit unter "Termine". */
.unterreiter {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px;
  border-bottom: 1px solid var(--linie); padding-bottom: 0;
}
.unterreiter a {
  padding: 9px 14px; border-radius: 9px 9px 0 0; font-size: 14px;
  font-weight: 500; color: var(--text-leise); border: 1px solid transparent;
  border-bottom: 0; margin-bottom: -1px;
}
.unterreiter a:hover { background: var(--flaeche-2); color: var(--text);
                       text-decoration: none; }
.unterreiter a.aktiv {
  background: var(--flaeche); color: var(--blau); border-color: var(--linie);
  box-shadow: inset 0 3px 0 var(--blau);
}

/* Trainingszeiten: sieben Spalten, eine je Tag, bis zu drei Zeiten darin. */
.wochenplan { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .wochenplan { grid-template-columns: repeat(7, 1fr); } }
.wochentag {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); padding: 10px; min-height: 90px;
}
.wochentag--wochenende { background: var(--flaeche-2); }
.wochentag__name { font-size: 12px; font-weight: 600; text-transform: uppercase;
                   letter-spacing: .04em; color: var(--text-leise);
                   margin-bottom: 8px; }
.platzzeit {
  border-radius: 7px; padding: 6px 8px; margin-bottom: 6px; font-size: 12.5px;
  line-height: 1.4; background: var(--blau-hell); color: var(--text);
}
.platzzeit b { display: block; font-weight: 600; font-size: 13px; }
.platzzeit__zeile { display: block; }
.platzzeit__zeit { display: block; }
.platzzeit__werkzeug { margin-top: 4px; }
.platzzeit--buchung  { background: #dff3e4; }
.platzzeit--sperrung { background: #f2f3f5; }
.platzzeit__zeit { font-variant-numeric: tabular-nums; font-weight: 500; }
.platzzeit__weg { border: 0; background: none; cursor: pointer; padding: 0 2px;
                  color: var(--text-zart); font-size: 12px; }
.platzzeit__weg:hover { color: var(--fehler); }

/* ── Turnierbaum ────────────────────────────────────────────────────────────
   Ein Baum aus Spalten: je Runde eine, die Partien darin gleichmaessig
   verteilt. Beim doppelten K.o. laeuft die zweite Flanke rueckwaerts, damit
   sich beide Seiten in der Mitte treffen. Eigene Namen (baum__…), damit sich
   nichts mit den Runden einer Mannschaft beisst. */
.baum { display: flex; align-items: stretch; gap: 8px;
        overflow-x: auto; padding-bottom: 6px; }
.baum__ueber { font-size: 12px; font-weight: 700; text-transform: uppercase;
               letter-spacing: .05em; color: var(--text-leise); margin: 18px 0 6px; }
/* Am Bildschirm behalten die Spalten ihre Breite und der Baum wird scrollbar –
   quetschen wuerde die Namen unleserlich machen. Im Ausdruck ist es umgekehrt:
   dort teilen sie sich die Seite, siehe turnier_aushang.html. */
.baum__flanke { display: flex; flex: 0 0 auto; gap: 8px; }
.baum__flanke--rueckwaerts { flex-direction: row-reverse; }
.baum__runde { display: flex; flex-direction: column; justify-content: space-around;
               flex: 0 0 auto; width: 152px; }
.baum__rundenname { font-size: 10px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .03em; color: var(--blau); text-align: center;
                    margin-bottom: 5px; }
.baum__mitte { flex: 0 0 auto; display: flex; flex-direction: column;
               justify-content: center; gap: 12px; min-width: 165px; }
.baum__mitte .baum__partie { border-color: var(--blau); border-width: 2px; }

.baum__partie { border: 1px solid var(--linie-stark); border-radius: 7px;
                margin: 5px 0; overflow: hidden; background: var(--flaeche); }
.baum__partie--fertig { border-color: var(--blau-linie); }
.baum__partie--frei { opacity: .55; }
.baum__nr { font-size: 9.5px; color: var(--text-zart); padding: 2px 7px;
            background: var(--flaeche-2); }
.baum__seite { padding: 5px 7px; font-size: 12.5px; line-height: 1.3;
               overflow-wrap: break-word; hyphens: auto; }
.baum__seite + .baum__seite { border-top: 1px solid var(--linie); }
.baum__seite--sieger { font-weight: 650; background: var(--gut-flaeche);
                       color: var(--gut); }
.baum__quelle { color: var(--text-zart); font-style: italic; }
.baum__ergebnis { display: flex; align-items: flex-end; gap: 6px;
                  border-top: 1px dashed var(--linie); padding: 5px 7px 4px;
                  min-height: 24px; font-size: 12px; }
.baum__marke { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em;
               color: var(--text-zart); }
.baum__linie { flex: 1 1 auto; height: 12px; border-bottom: 1px solid var(--linie-stark); }

/* Wer eine Partie gewonnen hat, steht hervorgehoben – so liest sich ein
   Spielplan von oben nach unten, ohne die Ergebnisspalte zu suchen. */
.sieger { color: var(--gut); }
.sieger::after { content: " ✓"; font-size: 12px; }

/* Die letzten Ergebnisse eines Turniers, klein unter dem Stand. */
.ergebnisse { margin-top: 6px; border-left: 2px solid var(--linie-stark);
              padding-left: 8px; }
.ergebnisse__zeile { font-size: 12.5px; color: var(--text-leise); line-height: 1.5; }
.ergebnisse__zeile b { color: var(--text); }

/* Von der Uebersicht angesprungen: die gemeinte Zeile hebt sich kurz ab. */
table.liste tbody tr:target { background: var(--blau-hell); scroll-margin-top: 80px; }
table.liste tbody tr:target td:first-child { box-shadow: inset 3px 0 0 var(--blau); }
.zahl-spalte { font-variant-numeric: tabular-nums; text-align: right; }
.leise { color: var(--text-leise); }
.zart { color: var(--text-zart); font-size: 12.5px; }
.nowrap { white-space: nowrap; }

/* ── Marken ─────────────────────────────────────────────────────────────── */
.marke-pill, .status {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
  background: var(--neutral-flaeche); color: var(--text-leise);
  border: 1px solid transparent;
}
.status--gut     { background: var(--gut-flaeche);    color: var(--gut);    border-color: var(--gut-linie); }
.status--warn    { background: var(--warn-flaeche);   color: var(--warn);   border-color: var(--warn-linie); }
.status--fehler  { background: var(--fehler-flaeche); color: var(--fehler); border-color: var(--fehler-linie); }
.status--blau    { background: var(--blau-hell);      color: var(--blau);   border-color: var(--blau-linie); }
.status--gold    { background: var(--warn-flaeche);   color: var(--warn);   border-color: var(--warn-linie); font-weight: 500; }

/* Der Einsatzstatus wird oft geaendert – deshalb direkt in der Liste, aber
   unauffaellig, solange er auf "spielt" steht. */
.einsatz-wahl {
  padding: 2px 6px; font-size: 12.5px; border-radius: 6px;
  border: 1px solid var(--linie); background: var(--flaeche); width: auto;
}
.einsatz-wahl--ersatz  { background: var(--warn-flaeche); color: var(--warn); border-color: var(--warn-linie); }

/* Mannschaftszuordnung in der Spielerliste: je Mannschaft ein Chip mit
   eigenem Status. Mehrere davon nebeneinander, deshalb umbruchfaehig. */
.zuordnung { min-width: 260px; }
.zuordnung__chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blau-hell); border: 1px solid var(--blau-linie);
  border-radius: 999px; padding: 2px 4px 2px 10px;
  margin: 0 4px 4px 0; font-size: 12.5px; white-space: nowrap;
}
.zuordnung__chip form { display: inline; }
.zuordnung__chip .einsatz-wahl { padding: 1px 4px; font-size: 11.5px; }
.zuordnung__weg {
  border: 0; background: transparent; color: var(--text-zart);
  cursor: pointer; font-size: 12px; padding: 0 4px; line-height: 1;
}
.zuordnung__weg:hover { color: var(--fehler); }

.lk {
  font-variant-numeric: tabular-nums; font-weight: 600;
  background: var(--blau-hell); color: var(--blau);
  border: 1px solid var(--blau-linie);
  padding: 1px 8px; border-radius: 6px; font-size: 12.5px; white-space: nowrap;
}
.lk--ohne { background: var(--neutral-flaeche); color: var(--text-zart); border-color: var(--linie); }

/* ── Bedienelemente ─────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 8px; border: 1px solid var(--linie-stark);
  background: var(--flaeche); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { background: var(--flaeche-2); text-decoration: none; }
.knopf--haupt { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf--haupt:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf--klein { padding: 4px 10px; font-size: 13px; }
.knopf--still { border-color: transparent; background: transparent; color: var(--text-leise); }
.knopf--still:hover { background: var(--flaeche-2); color: var(--text); }
.knopf--gefahr { color: var(--fehler); }
.knopf--gefahr:hover { background: var(--fehler-flaeche); }

input[type=text], input[type=search], input[type=email], input[type=password],
input[type=date], input[type=number], input[type=tel], input[type=month],
input[type=time], input[type=url], select, textarea {
  width: 100%; padding: 8px 11px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blau); outline-offset: -1px; border-color: var(--blau);
}
textarea { resize: vertical; min-height: 70px; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-leise); margin-bottom: 4px; }

.feld { margin-bottom: 12px; }
.feld-reihe { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.werkzeugleiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.werkzeugleiste .feld { margin: 0; }
.werkzeugleiste input[type=search] { min-width: 240px; }

/* ── Hinweise ───────────────────────────────────────────────────────────── */
.meldung {
  padding: 11px 15px; border-radius: var(--radius); margin-bottom: 14px;
  border: 1px solid var(--linie); background: var(--flaeche); font-size: 14px;
}
.meldung--gut    { background: var(--gut-flaeche);    border-color: var(--gut-linie);    color: var(--gut); }
.meldung--fehler { background: var(--fehler-flaeche); border-color: var(--fehler-linie); color: var(--fehler); }
.meldung--warn   { background: var(--warn-flaeche);   border-color: var(--warn-linie);   color: var(--warn); }

.leer { text-align: center; padding: 34px 20px; color: var(--text-zart); font-size: 14px; }

/* ── Meldeliste ─────────────────────────────────────────────────────────── */
.meldeliste { list-style: none; margin: 0; padding: 0; }
.meldeliste li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--linie); background: var(--flaeche);
}
.meldeliste li:last-child { border-bottom: 0; }
.meldeliste li.zieht { opacity: .45; }
.meldeliste li.verstoss { background: var(--warn-flaeche); }
.griff { cursor: grab; color: var(--text-zart); user-select: none; font-size: 15px; }
.pos {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  background: var(--blau-hell); color: var(--blau);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}
.meldeliste .name { flex: 1; font-weight: 500; }

/* ── Platzbelegung ──────────────────────────────────────────────────────────
   Die vier Zeitfenster eines Wochenendes nebeneinander. Ein belegtes Fenster
   ist gefuellt, ein doppelt belegtes rot – mehr Zustaende gibt es nicht. */
.fenster-raster { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fenster {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 10px 12px; background: var(--flaeche-2);
}
.fenster--belegt { background: var(--blau-hell); border-color: var(--blau-linie); }
.fenster--konflikt { background: var(--fehler-flaeche); border-color: var(--fehler-linie); }
.fenster__name { font-weight: 600; font-size: 13px; }
.fenster__zeit { font-size: 12px; color: var(--text-leise); margin-bottom: 6px; }
.fenster__spiel { font-size: 13.5px; font-weight: 500; }
.fenster__spiel .zart { display: block; font-weight: 400; }

/* ── Zeitleiste einer Mannschaft ────────────────────────────────────────────
   Dieselbe Mannschaft ueber alle Runden. Die laufende Runde steht hervorgehoben,
   die anderen sind anklickbar. */
.zeitleiste-karte { padding: 14px 16px; }
.zeitleiste { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding-bottom: 2px; }
.runde {
  flex: none; min-width: 168px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 10px 13px; background: var(--flaeche-2); color: var(--text);
  display: flex; flex-direction: column; gap: 3px;
}
.runde:hover { text-decoration: none; border-color: var(--linie-stark); }
.runde--aktuell {
  background: var(--blau-hell); border-color: var(--blau);
  box-shadow: inset 0 0 0 1px var(--blau);
}
.runde__name { font-weight: 600; font-size: 14px; }
.runde--aktuell .runde__name { color: var(--blau); }
.runde__zahl { font-size: 12px; color: var(--text-leise); }
.runde--neu { background: var(--flaeche); border-style: dashed; min-width: 190px; }
.runde--neu > summary { cursor: pointer; font-weight: 600; font-size: 14px;
                        color: var(--blau); list-style: none; }
.runde--neu > summary::-webkit-details-marker { display: none; }
.runde--neu[open] { min-width: 230px; }
.runde--neu form { margin-top: 8px; }
.runde--neu .feld { margin-bottom: 8px; }

/* ── Kommentare ─────────────────────────────────────────────────────────── */
.kommentar { padding: 11px 0; border-bottom: 1px solid var(--linie); }
.kommentar:last-of-type { border-bottom: 0; }
.kommentar__kopf { font-size: 12.5px; color: var(--text-leise); margin-bottom: 3px; }
.kommentar__kopf b { color: var(--text); font-weight: 600; }
.kommentar p { margin: 0; white-space: pre-wrap; }

/* ── Auswahlknoepfe auf der Antwortseite ────────────────────────────────────
   Grosse Flaechen statt winziger Radiopunkte: die Seite wird auf dem Handy im
   Vereinsheim benutzt, oft von Leuten, die keine Lust auf Zielen haben. */
.wahlknoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.wahlknoepfe label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 14px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius); background: var(--flaeche);
  font-size: 15px; font-weight: 500; text-transform: none;
  color: var(--text); cursor: pointer; flex: 1 1 auto; min-width: 140px;
}
.wahlknoepfe label:hover { background: var(--flaeche-2); }
.wahlknoepfe input { width: auto; margin: 0; }
.wahlknoepfe label:has(input:checked) {
  background: var(--blau-hell); border-color: var(--blau); color: var(--blau);
}

/* ── Mehrfachabfrage: je Wettbewerb ja oder nein ────────────────────────── */
.turnierliste { display: flex; flex-direction: column; gap: 8px; }
.turnier {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--linie-stark); border-radius: var(--radius);
  padding: 11px 14px; background: var(--flaeche);
}
.turnier__name { font-weight: 500; font-size: 15px; }
.turnier__name .zart { display: block; font-weight: 400; }
.turnier__wahl { display: flex; gap: 6px; flex: none; }
.turnier__wahl label {
  display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 7px 14px; border: 1px solid var(--linie-stark); border-radius: 8px;
  font-size: 14px; font-weight: 500; text-transform: none; color: var(--text);
  cursor: pointer; min-width: 74px;
}
.turnier__wahl input { width: auto; margin: 0; }
.turnier__wahl label:has(input:checked) {
  background: var(--blau-hell); border-color: var(--blau); color: var(--blau);
}
.turnier__wahl label:has(input[value="nein"]:checked) {
  background: var(--neutral-flaeche); border-color: var(--linie-stark);
  color: var(--text-leise);
}

/* ── Balken (Auswertung Abfragen) ───────────────────────────────────────── */
.balken-reihe { display: grid; grid-template-columns: 150px 1fr 46px; gap: 10px; align-items: center; margin-bottom: 7px; font-size: 14px; }
.balken { height: 22px; border-radius: 6px; background: var(--flaeche-2); overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--blau); }

/* ── Anmeldung ──────────────────────────────────────────────────────────── */
.anmelde-seite { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(160deg, var(--blau) 0%, var(--blau-dunkel) 100%); }
.anmelde-karte { background: var(--flaeche); border-radius: 16px; box-shadow: var(--schatten-pop);
  padding: 30px 32px; width: 100%; max-width: 380px; }
.anmelde-wappen { width: 64px; height: 64px; object-fit: contain; margin-bottom: 12px; display: block; }
.anmelde-karte h1 { font-size: 21px; margin-bottom: 2px; }
.anmelde-karte .zart { margin-bottom: 20px; }

/* ── Druck ──────────────────────────────────────────────────────────────── */
@media print {
  .kopf, .werkzeugleiste, .knopf, form.nicht-drucken { display: none !important; }
  .karte { box-shadow: none; border-color: #999; }
  body { background: #fff; }
}

/* ── Schmale Bildschirme ──────────────────────────────────────────────────
   Sieben Navigationspunkte brauchen Platz. Wird es eng, weicht zuerst der
   Untertitel der Marke, dann klappt die Navigation ganz ins Menue, und zuletzt
   bleibt von der Marke nur das Wappen.

   Fest stehen bleiben Spielzeit, Hell/Dunkel und Zahnrad: sie muessen ohne
   seitliches Schieben zu erreichen sein. Denn schiebt die Kopfleiste die Seite
   in die Breite, bleibt die blaue Flaeche beim Schieben stehen – rechts steht
   man dann vor grauem Grund. Darum darf hier nur eines wachsen und schrumpfen:
   die Marke. */
@media (max-width: 1400px) {
  .marke__sub { display: none; }
}

@media (max-width: 1000px) {
  .kopf__innen { gap: 10px; padding: 0 12px; }
  .nav-schalter { display: grid; }
  .kopf__nav {
    position: absolute; top: var(--kopf-hoehe); left: 0; right: 0;
    background: var(--blau-dunkel); flex-direction: column; gap: 0;
    padding: 8px; margin: 0; display: none; overflow: visible;
    /* Beim Administrator sind es sieben Punkte – auf einem liegenden Telefon
       passen die nicht ins Bild. */
    max-height: calc(100vh - var(--kopf-hoehe)); overflow-y: auto;
  }
  .kopf__nav.offen { display: flex; }
  .kopf__nutzer { display: none; }

  /* Die Navigation liegt ausgeklappt ueber der Seite und traegt hier nichts
     zur Zeile bei – also schiebt dieser Rand die Bedienknoepfe nach rechts. */
  .kopf__rechts { margin-left: auto; gap: 6px; }
  .marke { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .marke > span { min-width: 0; overflow: hidden; }
  .marke__name { display: block; overflow: hidden; text-overflow: ellipsis; }
  /* Breit genug fuer "Winter 2026/27" – abgeschnitten ist die Spielzeit
     wertlos, man waehlt sie ja nach dem Namen. */
  .kopf__saison {
    min-width: 0; max-width: 148px;
    font-size: 12.5px; padding: 7px 6px;
  }
  /* Mit dem Finger getroffen wird ein 32er Feld nur mit Muehe. */
  .kopf__knopf { width: 38px; height: 38px; }
}

@media (max-width: 560px) {
  /* Auf dem Telefon traegt das Wappen allein zurueck zur Uebersicht. Der Name
     stuende hier ohnehin nur abgeschnitten – er steht im Fenstertitel. */
  .marke { flex: none; }
  .marke__name { display: none; }
  .marke__wappen { width: 34px; height: 34px; }
}

/* Kleinste Telefone (320px): die Abstaende geben nach, nicht die Knoepfe. */
@media (max-width: 380px) {
  .kopf__innen { gap: 6px; padding: 0 8px; }
  .kopf__rechts { gap: 4px; }
  .kopf__knopf { width: 36px; height: 36px; }
  .kopf__saison { max-width: 124px; }
  .rumpf { padding: 18px 12px 48px; }
}

/* ── Turnierbaum ────────────────────────────────────────────────────────────
   Runden nebeneinander, Partien untereinander. Kein Liniengewirr: die Zuordnung
   ergibt sich aus der Reihenfolge, und das genügt bei unseren Feldgrößen. */
.turnierbaum { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.turnierrunde { flex: none; min-width: 230px; display: flex; flex-direction: column; gap: 10px; }
.turnierrunde__name {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-leise); padding-left: 2px;
}
.partie {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); box-shadow: var(--schatten); overflow: hidden;
}
.partie--fertig { border-color: var(--blau-linie); }
.partie--kampflos { border-color: var(--warn-linie); background: var(--warn-flaeche); }
.partie__seite { padding: 8px 12px; font-size: 14px; }
.partie__seite + .partie__seite { border-top: 1px solid var(--linie); }
.partie__seite--sieger { font-weight: 650; color: var(--blau); background: var(--blau-hell); }
.partie__fuss {
  padding: 5px 12px; font-size: 12px; color: var(--text-leise);
  background: var(--flaeche-2); border-top: 1px solid var(--linie);
}
.partie__form { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
                border-top: 1px solid var(--linie); }
.partie__form select, .partie__form input { font-size: 13px; padding: 5px 8px; }

/* Zurückgezogene Meldungen bleiben stehen, treten aber zurück. */
.meldeliste li.zurueckgezogen { background: var(--warn-flaeche); }
.meldeliste li.zurueckgezogen .name > a { text-decoration: line-through; }

/* Rückzug: klein und beiläufig, bis man ihn aufklappt. */
.rueckzug > summary { cursor: pointer; list-style: none; padding: 2px 7px;
                      border-radius: 6px; color: var(--text-zart); font-size: 13px; }
.rueckzug > summary::-webkit-details-marker { display: none; }
.rueckzug > summary:hover { background: var(--warn-flaeche); color: var(--warn); }
.rueckzug[open] { position: relative; }
.rueckzug form { position: absolute; right: 0; z-index: 20; width: 240px;
                 background: var(--flaeche); border: 1px solid var(--linie);
                 border-radius: var(--radius); box-shadow: var(--schatten-pop);
                 padding: 10px; display: flex; flex-direction: column; gap: 6px; }

/* Abmelden steht auch als Text im Menü – das Symbol allein wird übersehen. */
.kopf__mehr-trenner { height: 1px; background: var(--linie); margin: 6px 4px; }
.kopf__mehr-wer { padding: 4px 12px 8px; font-size: 12.5px; color: var(--text-leise); }
.kopf__mehr-wer b { color: var(--text); }
.kopf__mehr-feld a.kopf__abmelden { color: var(--fehler); font-weight: 500; }
.kopf__mehr-feld a.kopf__abmelden:hover { background: var(--fehler-flaeche); color: var(--fehler); }

/* ── Termine: Ziehen und Ablegen ────────────────────────────────────────────
   Der Vorrat oben hält die Mannschaften, die Zeitfenster sind die Ablegeflächen.
   Fremde Mannschaften sind sichtbar, aber nicht greifbar. */
.vorrat { display: flex; gap: 8px; flex-wrap: wrap; }
.marke-mannschaft {
  border: 1px solid var(--blau-linie); background: var(--blau-hell);
  color: var(--blau); border-radius: 999px; padding: 6px 14px;
  font-size: 14px; font-weight: 500; cursor: grab;
}
.marke-mannschaft--fremd {
  background: var(--neutral-flaeche); border-color: var(--linie);
  color: var(--text-zart); cursor: default;
}
.marke-mannschaft.zieht, .fenster__spiel.zieht { opacity: .4; }
.ablage { transition: background .12s, border-color .12s; }
.ablage--bereit { border-color: var(--blau); background: var(--blau-hell);
                  box-shadow: inset 0 0 0 1px var(--blau); }
.fenster--auswaerts { border-style: dashed; }
.fenster__spiel[draggable="true"] { cursor: grab; }

/* Aufklappbare Pflegeformulare in Tabellen und Kopfzeilen. */
.pflege { position: relative; display: inline-block; }
.pflege > summary { list-style: none; cursor: pointer; }
.pflege > summary::-webkit-details-marker { display: none; }
/* Alle Formulare eines Pflegefeldes liegen in einem Kasten – sonst wuerden
   mehrere absolut positionierte Formulare uebereinanderliegen. */
.pflege__feld {
  position: absolute; right: 0; z-index: 30; width: 260px; margin-top: 6px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten-pop);
  padding: 12px; text-align: left; white-space: normal;
}
.pflege__feld form + form { margin-top: 10px; padding-top: 10px;
                            border-top: 1px solid var(--linie); }

/* ── Zahnrad ────────────────────────────────────────────────────────────────
   Eigenes Menü für den eigenen Zugang und die Verwaltung. Baut auf demselben
   Klappfeld auf wie "Mehr", sitzt aber rechts in der Kopfleiste. */
.kopf__zahnrad { position: relative; flex: none; }
.kopf__zahnrad > summary { list-style: none; cursor: pointer; }
.kopf__zahnrad > summary::-webkit-details-marker { display: none; }
.kopf__zahnrad[open] > summary { background: rgba(255,255,255,.28); }
.kopf__zahnrad .kopf__mehr-feld { top: calc(100% + 6px); min-width: 240px; }

/* ── Kurzliste der Spieltage ────────────────────────────────────────────────
   Bei acht bis vierzehn Spieltagen wird die ausführliche Ansicht lang. Oben
   steht deshalb eine schmale Liste: Datum, Tag, und zwei Ablegeflächen. */
.kurzliste { width: 100%; border-collapse: collapse; }
.kurzliste th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-leise); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--linie);
}
.kurzliste td { padding: 6px 10px; border-bottom: 1px solid var(--linie);
                vertical-align: middle; }
.kurzliste tr:last-child td { border-bottom: 0; }
.kurzliste__tag { font-weight: 600; white-space: nowrap; }
.kurzliste__wochentag { color: var(--text-leise); font-size: 13px; }
.kurz-ablage {
  min-height: 38px; border: 1px dashed var(--linie-stark); border-radius: 8px;
  padding: 4px 8px; display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; background: var(--flaeche-2);
}
.kurz-ablage--heim.ablage--bereit,
.kurz-ablage--auswaerts.ablage--bereit {
  border-style: solid; border-color: var(--blau); background: var(--blau-hell);
}
.kurz-ablage .zart { font-size: 12px; }
.kurz-spiel {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blau-hell); border: 1px solid var(--blau-linie);
  color: var(--blau); border-radius: 999px; padding: 2px 10px;
  font-size: 13px; font-weight: 500; cursor: grab; white-space: nowrap;
}
.kurz-spiel--auswaerts { background: var(--warn-flaeche); border-color: var(--warn-linie);
                         color: var(--warn); }
.kurz-spiel--abgesagt { text-decoration: line-through; opacity: .6; }
.kurz-spiel small { font-weight: 400; opacity: .8; }
.kurzliste tr.ist-sperrtermin td { background: var(--fehler-flaeche); }

/* Das Pflegefeld in Tabellen darf nicht absolut liegen: die Tabellenhülle
   scrollt und würde es abschneiden. Es klappt stattdessen in der Zeile auf. */
.tabelle-huelle .pflege__feld,
.kurzliste .pflege__feld { position: static; width: auto; box-shadow: none;
                           margin-top: 8px; }

/* Kleiner Wegwerfknopf in der Kurzliste – für zentrale Termine, die man nicht
   im Aushang haben will. */
.kurzliste__weg {
  border: 0; background: transparent; color: var(--text-zart);
  cursor: pointer; font-size: 12px; padding: 0 4px; line-height: 1;
}
.kurzliste__weg:hover { color: var(--fehler); }

/* ── Dialogfenster ──────────────────────────────────────────────────────────
   Formulare, die in einer Tabellenzelle keinen Platz haben, öffnen als Fenster
   über der Seite. <dialog> bringt Hintergrund und Tastaturbedienung mit. */
dialog.fenster {
  border: 0; border-radius: var(--radius-gr); padding: 0;
  width: min(560px, calc(100vw - 32px)); max-height: 88vh;
  background: var(--flaeche); color: var(--text);
  box-shadow: var(--schatten-pop);
}
dialog.fenster::backdrop { background: var(--overlay, rgba(0,0,0,.35)); }
.fenster__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; background: var(--flaeche); border-radius: var(--radius-gr) var(--radius-gr) 0 0;
}
.fenster__kopf h3 { margin: 0; font-size: 16px; }
.fenster__rumpf { padding: 16px 18px 20px; overflow-y: auto; }
.fenster__rumpf h4 { margin: 0 0 4px; font-size: 14px; }
.fenster__linie { border: 0; border-top: 1px solid var(--linie); margin: 16px 0; }
.fenster__reihe { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.fenster__reihe form { flex: 1 1 220px; }

/* Verlegte Einträge: sichtbar, aber sie belegen nichts mehr. */
.kurz-spiel--verschoben { background: var(--neutral-flaeche); border-color: var(--linie);
                          color: var(--text-zart); text-decoration: line-through; }

/* Ankreuzfelder für die Mehrfachmeldung – große Flächen, damit man sie auf dem
   Handy trifft. */
.ankreuz {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 11px 14px; border: 1px solid var(--linie-stark);
  border-radius: var(--radius); background: var(--flaeche);
  font-size: 15px; font-weight: 400; text-transform: none; color: var(--text);
  cursor: pointer;
}
.ankreuz:hover { background: var(--flaeche-2); }
.ankreuz input { width: auto; margin: 2px 0 0; flex: none; }
.ankreuz b { font-weight: 600; }
.ankreuz small { display: block; }
.ankreuz:has(input:checked) { background: var(--blau-hell); border-color: var(--blau); }

/* Das (i) neben einem Wettbewerb. Ein <details> genuegt: kein Skript, und auf
   dem Handy oeffnet es sich mit demselben Fingertipp wie alles andere. */
.wahlfeld { position: relative; }
.wahlfeld .ankreuz { padding-right: 46px; }
.info { display: inline-block; }
.wahlfeld > .info { position: absolute; top: 9px; right: 10px; }
.info > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--blau); color: var(--blau); background: var(--flaeche);
  font-size: 13px; font-weight: 700; font-style: italic; line-height: 1;
}
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover { background: var(--blau); color: #fff; }
.info[open] > summary { background: var(--blau); color: #fff; }
.info__text {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--flaeche-2); border: 1px solid var(--linie);
  font-size: 13.5px; line-height: 1.55; color: var(--text); font-weight: 400;
}
.wahlfeld > .info[open] .info__text {
  position: absolute; right: 0; top: 26px; z-index: 20; width: min(320px, 78vw);
  box-shadow: var(--schatten-pop); background: var(--flaeche);
}