/* ---------- Seite „Spiele“ (page-spiele.php) ----------
   Eigene Datei wie beim Videoarchiv: Diese Regeln gelten auf genau einer
   Seite, style.css bleibt frei davon. Spielzeilen (.sc-game), Tabellen
   (.ltable), Reiter und Chips kommen aus style.css und sehen hier aus wie
   überall. */

.spiele__head .entry__title { margin-top: var(--sp-3); }
.spiele__stand { font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-4); }

/* Kopf zweispaltig: links Titel und Vorspann, rechts der Weg zum Platz.
   Der Text bekommt eine Wunschbreite von 34rem – unterschreitet der Kopf sie,
   rutscht der Knopf von allein unter den Text, ohne eigene Umbruchbreite. */
.spiele__head-in {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6); flex-wrap: wrap;
}
.spiele__head-text { flex: 1 1 34rem; min-width: 0; }
.spiele__anfahrt { flex: 0 0 auto; }
.spiele__anfahrt svg { color: var(--green-700); }
.spiele__anfahrt:hover svg, .spiele__anfahrt:focus-visible svg { color: inherit; }

/* Der Filter klebt unter dem Kopf, damit man beim Lesen der Tabellen nicht
   nach oben muss, um die Mannschaft zu wechseln. */
.spiele__filter {
  position: sticky; top: var(--header-h); z-index: 20;
  /* Kommt man über einen Anker (#tabellen), rollt das Skript hierher – unter
     den Kopf, nicht dahinter. Sonst deckte die klebende Leiste die
     Überschrift des gewählten Reiters ab. */
  scroll-margin-top: var(--header-h);
  background: var(--surface-3); border-block: 1px solid var(--line);
  box-shadow: 0 10px 24px -18px rgb(0 0 0 / .35);
}
/* Zwei Zeilen, zwei Entscheidungen: oben welche Mannschaft, unten was von ihr.
   Chris am 07.09.2026: „der bereich teams und tabs muss sich stärker
   voneinander absetzen“. Deshalb steht die Mannschaftszeile auf getöntem
   Grund – die weißen Chips heben sich davon ab –, die Reiterzeile auf weiß
   wie der Inhalt darunter, den sie umschaltet. Dazwischen eine Linie. */
.spiele__filter-in {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  /* Unten mehr Luft als oben: Die Chips saßen sonst dicht auf der Linie zu
     den Reitern (Chris, 24.09.2026). */
  padding-block: .55rem .9rem;
}
.spiele__filter-tabs { background: var(--surface); border-top: 1px solid var(--line); }
.spiele__filter-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800;
  color: var(--ink-500); flex-shrink: 0;
}
.spiele__chips { margin: 0; flex: 1 1 auto; min-width: 0; }
/* Die Reiter Spielplan · Tabellen · Ergebnisse, dieselben wie auf der
   Startseite. Sie sind Verweise auf die Anker, damit sie ohne JavaScript
   zum Abschnitt springen – Unterstreichung und Linkfarbe müssen deshalb weg. */
.spiele__tabs { margin: 0; border-bottom: 0; }
.spiele__tabs .tab { padding-block: .6rem .7rem; text-decoration: none; }
.spiele__tabs .tab:not(.is-active) { color: var(--ink-500); }

/* Mit JavaScript steht nur der gewählte Abschnitt auf der Seite. Ohne
   stehen alle drei untereinander und die Reiter springen zum Anker. */
.spiele--tabs .spiele__section:not(.is-active) { display: none; }

/* Anker landen unter Kopf und Filterleiste, nicht darunter versteckt. Der
   Vorgabewert gilt ohne JavaScript; mit misst spiele.js die Leiste nach. */
.spiele__section { scroll-margin-top: calc(var(--header-h) + 9rem); }

/* Bündel nach Tag oder Monat: schmale Zwischenüberschrift mit Linie. */
.spiele__gruppe + .spiele__gruppe { margin-top: var(--sp-5); }
.spiele__gruppe-h {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 var(--sp-2);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--green-700);
}
.spiele__gruppe-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Mannschaftskürzel je Zeile in der Ansicht „Alle“. */
.spiele-tag {
  display: inline-block; vertical-align: middle; margin-right: .25rem;
  background: var(--green-50); color: var(--green-700);
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: .14rem .45rem; border-radius: 4px;
}
/* Wo bei einer gespielten Partie die Ziffer stünde, steht der Weg zu ihr:
   fussball.de gibt die Ergebnisse nur im eigenen Rahmen heraus. Die Schrift
   bleibt die der Spielzeile (.sc-game__score in style.css), damit „Ergebnis“
   auf der Spiele- und auf der Mannschaftsseite gleich aussieht – die
   Mannschaftsseite lädt diese Datei nicht. */
.sc-game__score--offen { color: var(--ink-300); }

/* Im Reiter „Ergebnisse“ steht das Widget links: dort stehen die Ziffern. Es
   bekommt nur so viel Breite, wie es braucht (unter 560 px zeigt fussball.de
   es nicht an), der Rest gehört der Liste der gespielten Partien. */
@media (min-width: 1280px) {
  #ergebnisse .duo--two { grid-template-columns: minmax(560px, 620px) minmax(0, 1fr); }
}

/* Die gespielten Partien stehen in der halben Spalte neben dem Widget. Dort
   drückte die Zusatzzeile (Kürzel, Datum, Liga, Verweis) mit ihrem Umbruch-
   verbot die Vereinsnamen auf zwei Buchstaben. Deshalb hier wie auf dem
   Handy: Zusatzzeile unter die Paarung, Namen behalten ihren Platz. */
.spiele__gespielt .sc-game { grid-template-columns: auto 1fr; }
.spiele__gespielt .sc-game__comp { grid-column: 2; white-space: normal; }
/* Und die Namen brechen um statt „FSV Neunkirchen-Seelsc…“ zu werden. */
.spiele__gespielt .sc-game__pair b { white-space: normal; line-height: 1.2; }
.sc-game__comp a { color: var(--green-700); font-weight: 700; }
.spiele__leer { color: var(--ink-500); font-size: var(--fs-sm); padding: var(--sp-3) 0; }

@media (max-width: 760px) {
  /* Eine Chipreihe: oben und unten gleich, die Leiste klebt und soll flach bleiben. */
  .spiele__filter-in { gap: var(--sp-3); flex-wrap: nowrap; padding-block: .55rem; }
  .spiele__filter-label { display: none; }
  /* Eine Zeile, seitlich scrollbar – zwanzig Chips in drei Reihen würden die
     klebende Leiste zur halben Bildschirmhöhe machen. */
  .spiele__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: .15rem; }
  .spiele__chips::-webkit-scrollbar { display: none; }
  .spiele__chips .filter-chip { flex-shrink: 0; }
  .spiele__section { scroll-margin-top: calc(var(--header-h) + 3.5rem); }
}