/* Tabelle (DESIGN 6.1) und Spielplan/Ergebnisse (DESIGN 6.2).
 * Nur Farbvariablen aus theme.css; Grundbausteine kommen aus app.css. */

/* --- Tabelle --------------------------------------------------------------- */

.liga-tabelle { min-width: 720px; }
.liga-tabelle .sp-platz { width: 56px; }
.liga-tabelle .sp-name { min-width: 220px; }
.liga-tabelle .sp-spiele { width: 56px; }
.liga-tabelle .sp-sieg { width: 48px; }
.liga-tabelle .sp-punkte { width: 64px; font-weight: 700; }
.liga-tabelle .sp-saetze { width: 96px; }
.liga-tabelle .sp-baelle { width: 120px; }
.liga-tabelle th.zentriert, .liga-tabelle td.zentriert { text-align: center; }
.liga-tabelle th[title] { cursor: help; }

.liga-tabelle tr.erster td:first-child { box-shadow: inset 4px 0 0 var(--farbe-akzent); }
.liga-tabelle tr.zurueckgezogen td { color: var(--farbe-text-gedaempft); }
.liga-tabelle tr.zurueckgezogen.trenner td { border-top: 2px solid var(--farbe-linie); }
.liga-tabelle .name-zelle { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.liga-tabelle sup { font-size: 11px; color: var(--farbe-akzent); margin-left: 2px; }
.gedaempft { color: var(--farbe-text-gedaempft); }

.fussnoten {
  margin: 16px 0 0;
  padding-left: 24px;
  font-size: 13px;
  color: var(--farbe-text-gedaempft);
}
.fussnoten li { margin-bottom: 4px; }
.fussnoten a { margin-left: 8px; color: var(--farbe-akzent); }

/* --- Spielplan: Filterleiste ---------------------------------------------- */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 24px;
  margin-bottom: 24px;
}
.filterleiste .feld { margin-bottom: 0; }
.filterleiste .zaehler { margin-left: auto; font-size: 13px; color: var(--farbe-text-gedaempft); align-self: center; }

/* --- Spielplan: Spieltage -------------------------------------------------- */

.spieltag-block { margin-bottom: 24px; }
.spieltag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.spieltag-kopf h3 { margin: 0; font-size: 16px; }
.spieltag-kopf .frei { font-weight: 400; color: var(--farbe-text-gedaempft); }
.spieltag-kopf .frei strong { color: var(--farbe-text); }

.spiel-tabelle { min-width: 1060px; table-layout: fixed; }
.spiel-tabelle .sp-nr { width: 48px; }
.spiel-tabelle .sp-termin { width: 190px; }
.spiel-tabelle .sp-heim { width: 200px; text-align: right; }
.spiel-tabelle .sp-strich { width: 24px; text-align: center; padding: 0; }
.spiel-tabelle .sp-gast { width: 200px; }
.spiel-tabelle .sp-aktionen { width: 300px; }
.spiel-tabelle td { padding-top: 6px; padding-bottom: 6px; height: auto; min-height: 40px; }
.spiel-tabelle .zweitzeile { display: block; font-size: 13px; color: var(--farbe-akzent); }
.spiel-tabelle .ergebnis-saetze { font-family: var(--schrift-zahlen); font-variant-numeric: tabular-nums; font-weight: 700; }
.spiel-tabelle .ergebnis-einzel {
  margin-left: 6px;
  font-size: 13px;
  color: var(--farbe-text-gedaempft);
  font-family: var(--schrift-zahlen);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spiel-tabelle .ergebnis-zelle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.spiel-tabelle .aktionen-zelle { display: flex; flex-wrap: wrap; gap: 4px; }
.spiel-tabelle tr.entfaellt td { color: var(--farbe-text-gedaempft); }
.spiel-tabelle tr.gespeichert td {
  background: color-mix(in srgb, var(--farbe-erfolg) 18%, var(--farbe-flaeche)) !important;
  transition: background .3s;
}

/* --- Ergebnis-Dialog (DESIGN 6.2.1) ---------------------------------------- */

.dialog-unterzeile { margin: -4px 0 16px; font-size: 13px; color: var(--farbe-text-gedaempft); }
.modus-leiste { margin-bottom: 16px; }
@media (max-width: 767px) {
  .modus-leiste .segmente { display: flex; }
  .modus-leiste .segmente button { flex: 1 1 0; white-space: normal; height: auto; min-height: 36px; padding: 6px 8px; line-height: 1.2; }
}

/* Mannschaftsspalten wachsen bis zur Kopfbreite (max. 112px) mit, damit ein Wort wie
   „Unglaublichen“ ganz in eine Zeile passt. Silbentrennung (hyphens) wirkt nur, wenn der
   Browser ein deutsches Trennwörterbuch hat – darauf wird sich nicht verlassen. */
.satz-raster { display: grid; grid-template-columns: 72px minmax(72px, auto) 24px minmax(72px, auto) 1fr; align-items: center; gap: 8px 8px; }
.satz-raster .feld-zahl, .gesamt-raster .feld-zahl { justify-self: center; }
.satz-raster .satz-kopf, .gesamt-raster .satz-kopf { font-size: 13px; font-weight: 600; text-align: center; white-space: normal; line-height: 1.2; max-width: 112px; justify-self: center;
  /* Nur zwischen Wörtern bzw. an Silbengrenzen (lang="de") trennen, kurze Wörter nie;
     break-word greift erst, wenn ein einzelnes Wort breiter als 112px ist. */
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.satz-raster .satz-name { font-size: 13px; font-weight: 600; }
.satz-raster .satz-name small { display: block; font-weight: 400; color: var(--farbe-text-gedaempft); }
.satz-raster .trenn { text-align: center; }
.satz-raster .nicht-noetig { font-size: 13px; color: var(--farbe-text-gedaempft); }
.satz-raster input:disabled { opacity: .45; }
.satz-raster .satz-meldung { grid-column: 2 / -1; margin-top: -4px; }

.gesamt-raster { display: grid; grid-template-columns: 120px minmax(72px, auto) 24px minmax(72px, auto); align-items: center; gap: 8px; margin-bottom: 8px; }
.gesamt-raster .feld-zahl { width: 72px; }

.zusammenfassung {
  margin: 16px 0;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--farbe-zeile-wechsel);
  font-family: var(--schrift-zahlen);
  font-variant-numeric: tabular-nums;
}
.dialog-meldungen { display: grid; gap: 4px; margin-bottom: 8px; }
.dialog-meldungen:empty { display: none; }

.warn-kasten {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--farbe-warnung);
  border-radius: 4px;
  background: color-mix(in srgb, var(--farbe-warnung) 10%, var(--farbe-flaeche));
}
.warn-kasten ul { margin: 4px 0 8px; padding-left: 20px; }

.abzug-felder { display: grid; grid-template-columns: 80px 1fr 160px; gap: 12px; margin-top: 8px; }
.abzug-felder .feld { margin-bottom: 0; }

.verwerfen-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--farbe-warnung) 10%, var(--farbe-flaeche));
}
.verwerfen-leiste span { font-weight: 600; margin-right: auto; }

.historie { margin: 0 0 16px; padding-left: 20px; font-size: 13px; color: var(--farbe-text-gedaempft); }

@media (max-width: 640px) {
  .abzug-felder { grid-template-columns: 1fr; }
  .filterleiste .zaehler { margin-left: 0; }
}

.spiel-tabelle .ort { display: block; font-size: 13px; color: var(--farbe-text-gedaempft); }
.gesamt-raster .satz-meldung { grid-column: 2 / -1; }

/* app.css setzt th auf top: 92px; innerhalb von .tabelle-rahmen (overflow-x) bezieht sich
   sticky aber auf den Rahmen, der Kopf rutscht dann in die Tabelle. */
.tabelle-rahmen .spiel-tabelle th, .tabelle-rahmen .liga-tabelle th { top: 0; }