/* ═══════════════════════════════════════════════════════════════════════
   ÖFFENTLICH · LIGA
   Die Bauteile des Crossfire-Teils: Ansichts-Umschalter, Tabelle mit
   Formkurve, Match-Zeilen, Playoff-Baum, Statistik.

   ⚠ Warum eigene Datei und nicht `oe-seiten.css`: Diese Teile kommen auf
     sechs Seiten vor (Liga-Start, Season, Division, Team, Spieler, Match).
     Was sechsmal vorkommt, ist ein Baustein und kein Einzelfall.

   Sie liegt in `oe-bausteine` — sie ergänzt den Baukasten, sie überschreibt
   ihn nicht.
   ═════════════════════════════════════════════════════════════════════ */

@layer oe-bausteine {

/* ── Ansichts-Umschalter (Kap. 03.6.2) ───────────────────────────────
   Echte Links, keine Schalter: Der Zustand steht in der Adresse, damit
   „schau dir die Tabelle an" ein Link ist und keine Klickanleitung. */
.liga-ansichten {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  padding: var(--s-1); margin-bottom: var(--s-6);
  background: var(--flaeche-2); border-radius: var(--r-full);
  width: fit-content; max-width: 100%;
}
.liga-ansichten a {
  padding: var(--s-2) var(--s-5); border-radius: var(--r-full);
  color: var(--text-leise); font-size: var(--t-klein); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dauer-schnell) var(--kurve), color var(--dauer-schnell) var(--kurve);
}
.liga-ansichten a:hover { color: var(--text); }
.liga-ansichten a[aria-current] {
  background: var(--flaeche); color: var(--text); box-shadow: var(--heben-1);
}
.liga-ansichten a .zahl { margin-left: var(--s-2); color: var(--text-still); font-variant-numeric: tabular-nums; }

/* ── Tabelle ─────────────────────────────────────────────────────────
   Der Kopf klebt: Wer bei Platz 11 steht, weiss sonst nicht mehr, welche
   Spalte er liest. Zebra-Streifen erst ab sechs Zeilen (Kap. 10.6.2) —
   darunter sind sie Dekoration. */
/* ⚠ KEIN `overflow-x: auto` auf dem Standardweg. Ein Vorfahr mit `overflow`
   macht aus `position: sticky` einen Kleber, der am KASTEN hängt statt am
   Fenster — der Tabellenkopf rutschte dadurch 72 px nach unten und legte
   sich über die erste Zeile. Unter 720 px wird die Tabelle ohnehin zu
   Karten; dazwischen darf sie scrollen, dann klebt der Kopf eben oben im
   Kasten. */
.liga-tabelle-huelle { border-radius: var(--r-l);
                       border: 1px solid var(--linie); background: var(--flaeche); }
@media (max-width: 900px) {
  .liga-tabelle-huelle { overflow-x: auto; }
  .liga-tabelle thead th { top: 0; }
}
.liga-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-klein); }
.liga-tabelle thead th {
  position: sticky; top: var(--nav-h); z-index: 2;
  padding: var(--s-3) var(--s-3); text-align: right;
  background: var(--flaeche-2);
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-still);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.liga-tabelle thead th.links { text-align: left; }
.liga-tabelle td { padding: var(--s-3); text-align: right; border-bottom: 1px solid var(--linie); }
.liga-tabelle tbody tr:last-child td { border-bottom: 0; }
.liga-tabelle tbody tr:hover { background: var(--flaeche-2); }
.liga-tabelle .platz {
  width: 3rem; text-align: center; font-family: var(--font-mono);
  font-weight: 700; color: var(--text-still);
}
/* Die Playoff-Grenze ist eine Linie, keine Farbe: Wer die Farbe nicht
   unterscheiden kann, sieht sie trotzdem. */
.liga-tabelle tr.playoff td { border-bottom-color: var(--marke); }
.liga-tabelle tr.playoff .platz { color: var(--marke-text); }
.liga-tabelle .team { text-align: left; }
.liga-tabelle .team a {
  display: flex; align-items: center; gap: var(--s-3);
  color: inherit; text-decoration: none; font-weight: 600;
}
.liga-tabelle .team a:hover { color: var(--marke-text); }
.liga-tabelle .team img, .liga-tabelle .team .team-logo {
  width: 28px; height: 28px; object-fit: contain; flex: none;
}
.liga-tabelle .punkte { font-family: var(--font-display); font-size: var(--t-gross); }
.liga-tabelle .leise { color: var(--text-still); }
.liga-legende { display: flex; flex-wrap: wrap; gap: var(--s-4);
                margin-top: var(--s-3); font-size: var(--t-mikro); color: var(--text-still); }

/* ── Formkurve ───────────────────────────────────────────────────────
   Fünf Punkte, älteste links. Farbe UND Form: Ein Sieg ist gefüllt, eine
   Niederlage hohl — sonst ist die Kurve für ein Zehntel der Leser eine
   Reihe grauer Punkte. */
.liga-form { display: inline-flex; gap: 3px; }
.liga-form span {
  width: 10px; height: 10px; border-radius: var(--r-full);
  border: 1.5px solid var(--text-still);
}
.liga-form .sieg       { background: var(--ok-500);  border-color: var(--ok-500); }
.liga-form .niederlage { background: transparent;    border-color: var(--err-500); }
.liga-form .remis      { background: var(--n-30);    border-color: var(--n-30); }

/* ── Mobile Karten statt gequetschter Tabelle ────────────────────────
   Eine elfspaltige Tabelle auf 375 px ist keine Tabelle mehr, sondern ein
   Suchbild. Unter 720 px wird jede Zeile eine Karte. */
.liga-karten { display: none; }
@media (max-width: 720px) {
  .liga-tabelle-huelle { display: none; }
  .liga-karten { display: grid; gap: var(--s-2); }
  .liga-karte {
    display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--s-2) var(--s-3);
    align-items: center; padding: var(--s-3) var(--s-4);
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
    color: inherit; text-decoration: none;
  }
  .liga-karte.playoff { border-left: 3px solid var(--marke); }
  .liga-karte .platz { font-family: var(--font-mono); font-weight: 700; color: var(--text-still);
                       text-align: center; }
  .liga-karte .wer { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; min-width: 0; }
  .liga-karte .wer img, .liga-karte .wer .team-logo { width: 24px; height: 24px; object-fit: contain; flex: none; }
  .liga-karte .punkte { font-family: var(--font-display); font-size: var(--t-gross); }
  .liga-karte .unten { grid-column: 2 / -1; display: flex; gap: var(--s-3); align-items: center;
                       font-size: var(--t-mikro); color: var(--text-still); }
}

/* ── Matchzeile ──────────────────────────────────────────────────────
   Zwei Teams, ein Ergebnis in der Mitte. Das Ergebnis ist die grösste
   Zahl der Zeile — es ist der Grund, warum jemand hinsieht. */
.liga-match {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3);
  align-items: center; padding: var(--s-4) var(--s-5);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  color: inherit; text-decoration: none;
  transition: border-color var(--dauer-schnell) var(--kurve), box-shadow var(--dauer-schnell) var(--kurve);
}
a.liga-match:hover { border-color: var(--linie-stark); box-shadow: var(--heben-1); }
.liga-match .seite { display: flex; align-items: center; gap: var(--s-3); min-width: 0; font-weight: 600; }
.liga-match .seite.rechts { flex-direction: row-reverse; text-align: right; }
.liga-match .seite img, .liga-match .seite .team-logo { width: 34px; height: 34px; object-fit: contain; flex: none; }
.liga-match .seite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liga-match .mitte { display: grid; gap: 2px; justify-items: center; min-width: 6rem; }
.liga-match .ergebnis { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1; }
.liga-match .wann { font-size: var(--t-mikro); color: var(--text-still); white-space: nowrap; }
/* Der Verlierer wird zurückgenommen, nicht der Sieger hervorgehoben — so
   bleibt die Zeile ruhig und man sieht den Ausgang trotzdem sofort. */
.liga-match .seite.verloren { opacity: .55; }
.liga-liste { display: grid; gap: var(--s-2); }
@media (max-width: 620px) {
  .liga-match { grid-template-columns: 1fr auto; row-gap: var(--s-2); }
  .liga-match .seite.rechts { flex-direction: row; text-align: left; }
  .liga-match .mitte { grid-row: 1 / 3; grid-column: 2; }
}

/* ── Playoff-Baum ────────────────────────────────────────────────────
   Er scrollt seitwärts in seinem eigenen Kasten. Auf dem Handy ist das die
   ehrlichere Lösung als ein Baum, der auf Briefmarkengrösse schrumpft. */
.liga-baum { overflow-x: auto; padding-bottom: var(--s-4); }
.liga-baum-hinweis { font-size: var(--t-mikro); color: var(--text-still); margin-bottom: var(--s-3); }

/* ── Statistik ───────────────────────────────────────────────────────── */
.liga-zahlen { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
               margin-bottom: var(--s-6); }
.liga-zahl {
  padding: var(--s-5); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r-l);
}
.liga-zahl .wert { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1; }
.liga-zahl .was { display: block; margin-top: var(--s-2);
                  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
                  letter-spacing: .08em; text-transform: uppercase; color: var(--text-still); }
/* Ein Balken sagt mehr als eine Zahl, wenn es um Verhältnisse geht. */
.liga-balken { display: grid; gap: var(--s-3); }
.liga-balken .zeile { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr auto; gap: var(--s-3);
                      align-items: center; font-size: var(--t-klein); }
.liga-balken .spur { height: 8px; border-radius: var(--r-full); background: var(--flaeche-2); overflow: hidden; }
.liga-balken .fuell { height: 100%; background: var(--marke); border-radius: var(--r-full); }
.liga-balken .n { font-variant-numeric: tabular-nums; color: var(--text-still); }
.liga-balken .modus { color: var(--text-still); font-size: var(--t-mikro); }

}

@layer oe-seiten {

/* ── Der Kopf einer Liga-Seite ───────────────────────────────────────── */
/* ⚠ Kein Abstand nach oben, wenn der erste Block die Breite sprengt: Ein
   Bildkopf oder ein dunkles Band soll unter der Leiste kleben, nicht
   32 px tiefer anfangen. Die `:has`-Regel spart die Ausnahme je Seite —
   dieselbe Lösung wie beim Ausgleich, den wir in Etappe 5 losgeworden
   sind. */
.oe-liga { padding: var(--s-6) 0 var(--abschnitt); }
.oe-liga:has(> .oe-hero:first-child),
.oe-liga:has(> .oe-band:first-child) { padding-top: 0; }
.liga-kopf {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--s-6);
}
.liga-kopf h1 { margin: var(--s-2) 0; }
.liga-kopf .satz { color: var(--text-leise); font-size: var(--t-klein); }
.liga-gruppe { margin-top: var(--s-8); }
.liga-gruppe:first-of-type { margin-top: 0; }
.liga-filter { margin-bottom: var(--s-6); }
.liga-filter .oe-feld { max-width: 20rem; }
.liga-fuss { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--linie); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

}

@layer oe-seiten {

/* ── Matchseite (Kap. 03.6.4) ────────────────────────────────────────
   Ergebnis zuerst, dann Maps, dann Aufstellungen, dann das Veto zum
   Aufklappen. Vorher stand der Kader vor den Maps und das Veto mittendrin —
   man las an dem vorbei, wofür man gekommen war. */
.match-seite .oe-breite { display: grid; gap: var(--s-7); }

.match-ergebnis {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5);
  align-items: center; padding: var(--s-7) var(--s-5);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); box-shadow: var(--heben-1);
}
.match-ergebnis .wer {
  display: grid; justify-items: center; gap: var(--s-3);
  color: inherit; text-decoration: none; min-width: 0;
}
.match-ergebnis .wer img, .match-ergebnis .wer .team-logo {
  width: 76px; height: 76px; object-fit: contain;
}
.match-ergebnis .wer .name {
  font-family: var(--font-display); font-size: var(--t-h3);
  text-transform: uppercase; text-align: center; line-height: var(--zeile-eng);
}
.match-ergebnis .wer:hover .name { color: var(--marke-text); }
/* Der Verlierer wird zurückgenommen, statt den Sieger zu schmücken. */
.match-ergebnis .wer.verloren { opacity: .5; }
.match-ergebnis .stand { display: grid; justify-items: center; gap: var(--s-2); }
.match-ergebnis .zahl {
  font-family: var(--font-display); font-size: var(--t-display); line-height: 1;
  color: var(--marke-text); font-variant-numeric: tabular-nums;
}
.match-ergebnis .zahl.offen { color: var(--text-still); font-size: var(--t-h2); }
.match-ergebnis .wann { font-size: var(--t-klein); color: var(--text-leise); text-align: center; }

.match-cast {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-m);
  background: var(--marke-weich); border: 1px solid var(--marke-linie);
  font-size: var(--t-klein);
}
.match-cast .oe-knopf { margin-left: auto; }

.match-block { display: grid; gap: var(--s-5); }
.match-block .oe-kopf { margin-bottom: 0; }

.match-maps { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.match-map {
  display: grid; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-m); overflow: hidden;
}
.match-map .bild { position: relative; aspect-ratio: 4 / 3; background: var(--dunkel); }
.match-map .bild img { width: 100%; height: 100%; object-fit: cover; }
.match-map .nr {
  position: absolute; top: var(--s-2); left: var(--s-2);
  padding: 2px var(--s-2); border-radius: var(--r-s);
  background: rgba(13, 12, 17, .72); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
/* Text auf einem Foto braucht einen Verlauf, sonst hängt seine Lesbarkeit
   davon ab, welches Bild jemand hochgeladen hat. */
.match-map .was {
  position: absolute; inset: auto 0 0 0; padding: var(--s-6) var(--s-3) var(--s-3);
  background: linear-gradient(transparent, rgba(13, 12, 17, .92));
}
.match-map .modus { display: block; color: var(--marke-hell);
                    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
                    letter-spacing: .08em; text-transform: uppercase; }
.match-map .karte { display: block; color: #fff; font-family: var(--font-display);
                    font-size: var(--t-gross); line-height: 1.1; text-transform: uppercase; }
.match-map .stand { padding: var(--s-3) var(--s-3) 0; text-align: center;
                    font-family: var(--font-display); font-size: var(--t-h3); }
.match-map .stand .sieg { color: var(--marke-text); }
.match-map .stand .trenner { color: var(--text-still); }
.match-map .sieger { padding: 0 var(--s-3) var(--s-3); text-align: center;
                     font-size: var(--t-mikro); color: var(--text-still); }
.match-map .nicht { padding: var(--s-4) var(--s-3); text-align: center;
                    font-family: var(--font-mono); font-size: var(--t-mikro);
                    letter-spacing: .08em; text-transform: uppercase; color: var(--text-still); }
.match-map.aus { opacity: .45; filter: grayscale(.9); }
/* Der Blowout bleibt (Kap. 03.6.4) — aber als Glühen, nicht als Emoji. */
.match-map.blowout { border-color: #ff7a1a; box-shadow: 0 0 0 1px #ff7a1a, 0 0 18px rgba(255, 122, 26, .35); }
.match-map.blowout .stand .sieg { color: #d95c00; }

.match-roster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.match-roster .kopf {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3);
  color: inherit; text-decoration: none; font-weight: 600;
}
.match-roster .kopf:hover { color: var(--marke-text); }
.match-roster .kopf img, .match-roster .kopf .team-logo { width: 36px; height: 36px; object-fit: contain; }
.match-roster ul { list-style: none; display: grid; gap: var(--s-2); }
.match-roster li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
}
.match-roster li img, .match-roster li .ohne {
  width: 40px; height: 40px; border-radius: var(--r-s); object-fit: cover; flex: none;
}
.match-roster li .ohne { display: grid; place-items: center; background: var(--flaeche-3);
                         color: var(--text-still); font-family: var(--font-display); font-size: var(--t-gross); }
.match-roster li .wer { display: grid; min-width: 0; }
.match-roster li small { color: var(--text-still); font-size: var(--t-mikro); }
.match-roster .leer { color: var(--text-still); font-size: var(--t-klein); }

.match-veto { border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche); }
.match-veto > summary {
  padding: var(--s-4) var(--s-5); cursor: pointer;
  font-size: var(--t-klein); font-weight: 600; color: var(--text-leise);
}
.match-veto > summary:hover { color: var(--text); }
.match-veto ol { list-style: none; counter-reset: v; padding: 0 var(--s-5) var(--s-5); display: grid; gap: var(--s-2); }
.match-veto li {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  padding-left: var(--s-6); position: relative; font-size: var(--t-klein);
}
.match-veto li::before {
  counter-increment: v; content: counter(v);
  position: absolute; left: 0; width: var(--s-5); text-align: right;
  font-family: var(--font-mono); font-size: var(--t-mikro); color: var(--text-still);
}
.match-veto .tat { font-family: var(--font-mono); font-size: var(--t-mikro);
                   letter-spacing: .06em; text-transform: uppercase; }
.match-veto li.ban  .tat { color: var(--err-500); }
.match-veto li.pick .tat { color: var(--ok-500); }
.match-veto .karte { color: var(--text-leise); }

@media (max-width: 620px) {
  .match-ergebnis { grid-template-columns: 1fr; gap: var(--s-4); }
  .match-ergebnis .stand { order: -1; }
  .match-roster { grid-template-columns: 1fr; }
  .match-cast .oe-knopf { margin-left: 0; }
}

}

@layer oe-seiten {

/* ── Season-Kopf ─────────────────────────────────────────────────────── */
.season-kopf {
  display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; justify-content: space-between;
  padding: var(--s-8) var(--s-7); margin-bottom: var(--s-7);
  border-radius: var(--r-l); background: var(--dunkel) center/cover;
  color: var(--text-invers);
}
.season-kopf h1 { color: var(--n-00); margin: var(--s-2) 0; }
.season-kopf .oe-kicker { color: var(--marke-hell); }
.season-kopf .satz { max-width: 48ch; color: var(--text-invers-leise); font-size: var(--t-klein); }
.season-kopf .fakten { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.season-kopf .oe-chip { background: rgba(255,255,255,.10); color: var(--text-invers); }
.season-kopf .oe-chip.marke { background: var(--marke); color: #fff; }
.season-kopf .wappen { max-width: 120px; height: auto; }

.division-karte .zahlen { display: flex; flex-wrap: wrap; gap: var(--s-4);
                          font-size: var(--t-klein); color: var(--text-leise); }
/* Der Balken ist bewusst dünn: Er ordnet ein, er ist nicht die Aussage. */
.division-karte .fortschritt { display: block; height: 5px; border-radius: var(--r-full);
                               background: var(--flaeche-2); overflow: hidden; }
.division-karte .fortschritt > span { display: block; height: 100%; background: var(--marke);
                                      border-radius: var(--r-full); }
.division-karte .fuehrt { display: flex; align-items: center; gap: var(--s-2);
                          font-size: var(--t-klein); color: var(--text-leise); }
.division-karte .fuehrt img, .division-karte .fuehrt .team-logo { width: 22px; height: 22px; object-fit: contain; }

@media (max-width: 620px) {
  .season-kopf { padding: var(--s-6) var(--s-5); }
  .season-kopf .wappen { max-width: 84px; }
}

}

@layer oe-seiten {

/* ── Ligaseite eines Teams ───────────────────────────────────────────── */
.team-kopf {
  display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center;
  padding-bottom: var(--s-6); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--linie);
}
.team-kopf > img, .team-kopf > .team-logo { width: 96px; height: 96px; object-fit: contain; flex: none; }
.team-kopf .wer { flex: 1 1 18rem; min-width: 0; }
.team-kopf h1 { margin: var(--s-2) 0; }
.team-kopf .bilanz { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
                     font-size: var(--t-klein); color: var(--text-leise); }
.team-kopf .platz { font-family: var(--font-display); font-size: var(--t-h3);
                    color: var(--marke-text); text-transform: uppercase; }

.team-band {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-6);
  border-left: 4px solid var(--marke); background: var(--marke-weich);
  border-radius: var(--r-s); font-size: var(--t-klein);
}

.team-spalten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-7); }
.team-neben { display: grid; gap: var(--s-4); align-content: start; }
.team-neben h3 { font-size: var(--t-gross); }

.team-kader { list-style: none; display: grid; gap: var(--s-2);
              grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.team-kader li { display: flex; align-items: center; gap: var(--s-3);
                 padding: var(--s-2) var(--s-3);
                 background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); }
.team-kader img, .team-kader .ohne { width: 40px; height: 40px; border-radius: var(--r-s);
                                     object-fit: cover; flex: none; }
.team-kader .ohne { display: grid; place-items: center; background: var(--flaeche-3);
                    color: var(--text-still); font-family: var(--font-display); font-size: var(--t-gross); }
.team-kader .wer { display: grid; min-width: 0; }
.team-kader small { color: var(--text-still); font-size: var(--t-mikro); }

.team-seasons, .team-wechsel { list-style: none; display: grid; gap: var(--s-2); }
.team-seasons a { display: grid; color: inherit; text-decoration: none; }
.team-seasons a:hover strong { color: var(--marke-text); }
.team-seasons small { color: var(--text-still); font-size: var(--t-mikro); }
.team-wechsel li { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline;
                   font-size: var(--t-klein); }
.team-wechsel .tat { font-family: var(--font-mono); font-size: 10px; font-weight: 600;
                     letter-spacing: .06em; text-transform: uppercase;
                     padding: 1px var(--s-2); border-radius: var(--r-s); }
.team-wechsel .tat.rein { background: var(--ok-bg);  color: var(--ok-500); }
.team-wechsel .tat.raus { background: var(--err-bg); color: var(--err-500); }
.team-wechsel time { margin-left: auto; color: var(--text-still); font-size: var(--t-mikro); }

@media (max-width: 860px) { .team-spalten { grid-template-columns: minmax(0, 1fr); } }

}

@layer oe-seiten {

/* ── Spielerprofil ───────────────────────────────────────────────────
   Das Markup bleibt, wie es in Phase 6d gebaut wurde — es ist richtig
   aufgeteilt. Nur die Gestalt zieht nach: dieselben Karten, dieselben
   Beschriftungen, dieselbe Ruhe wie überall sonst. */
.cf-spieler { max-width: var(--seitenbreite-eng); margin-inline: auto;
              padding: var(--s-6) var(--s-5) var(--abschnitt); display: grid; gap: var(--s-6); }
.cf-spieler .kopf {
  display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center;
  padding-bottom: var(--s-6); border-bottom: 1px solid var(--linie);
}
.cf-spieler .avatar { width: 96px; height: 96px; border-radius: var(--r-full);
                      object-fit: cover; flex: none; }
.cf-spieler .avatar.leer { display: grid; place-items: center;
                           background: var(--flaeche-3); color: var(--text-still);
                           font-family: var(--font-display); font-size: var(--t-h2); }
.cf-spieler .kopf h1 { display: flex; align-items: center; gap: var(--s-3); }
.cf-spieler .flagge { font-size: .8em; }
.cf-spieler .unter { margin-top: var(--s-2); color: var(--text-leise); font-size: var(--t-klein); }
.cf-spieler .bilanz { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.cf-spieler .block {
  padding: var(--s-5); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r-l);
}
.cf-spieler .block h2 { font-size: var(--t-h3); margin-bottom: var(--s-4); }
/* Die Karriere als Zeitstrahl — ein Verlauf sagt, wo jemand herkommt; eine
   Liste sagt nur, wo er war. */
.cf-spieler .zeitstrahl { list-style: none; display: grid; gap: var(--s-4);
                          padding-left: var(--s-5); position: relative; }
.cf-spieler .zeitstrahl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
                                  width: 2px; background: var(--linie-stark); }
.cf-spieler .zeitstrahl > li { position: relative; }
.cf-spieler .zeitstrahl > li::before {
  content: ''; position: absolute; left: calc(-1 * var(--s-5) + 1px); top: 6px;
  width: 10px; height: 10px; border-radius: var(--r-full);
  background: var(--marke); box-shadow: 0 0 0 3px var(--grund);
}

/* ── Matches auf einer Spielerseite ──────────────────────────────────
   Drei Spalten: wann, gegen wen, wie es ausging. Das Ergebnis traegt die
   Farbe — Sieg und Niederlage sind der Grund, warum man die Liste liest. */
.sp-matchliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sp-matchliste a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-m);
  background: var(--flaeche); color: inherit; text-decoration: none;
}
.sp-matchliste a:hover { background: var(--flaeche-2); }
.sp-matchliste .wann { font-family: var(--font-mono); font-size: var(--t-mikro); color: var(--text-still); }
.sp-matchliste .wer { font-size: var(--t-klein); overflow-wrap: anywhere; }
.sp-matchliste .wer em { font-style: normal; color: var(--text-still); }
.sp-matchliste .stand { font-family: var(--font-display); font-size: var(--t-h3);
                        font-variant-numeric: tabular-nums; }
.sp-matchliste .stand.sieg       { color: var(--ok-500); }
.sp-matchliste .stand.niederlage { color: var(--text-still); }
.sp-matchliste .stand.offen      { font-family: var(--font-mono); font-size: var(--t-mikro);
                                   color: var(--text-still); }
@media (max-width: 520px) {
  .sp-matchliste a { grid-template-columns: minmax(0, 1fr) auto; }
  .sp-matchliste .wann { grid-column: 1 / -1; }
}

/* Woher die Seite kommt — steht unten, nicht oben: Es ist eine Fussnote,
   keine Ansage. Enthaelt den Weg zum Widerspruch. */
.cf-spieler-herkunft { margin-top: var(--s-7); padding: var(--s-4);
                       border-radius: var(--r-m); background: var(--flaeche);
                       font-size: var(--t-klein); color: var(--text-leise); line-height: 1.6; }

/* ── Teamliste der Liga ──────────────────────────────────────────────── */
.division-block { margin-bottom: var(--s-8); }
.division-titel {
  display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4);
  font-family: var(--font-display); font-size: var(--t-h3); text-transform: uppercase;
}
.division-titel a { color: inherit; text-decoration: none; }
.division-titel a:hover { color: var(--marke-text); }
/* Die Zahl daneben, nicht darunter: Wie viele Teams in dieser Division
   spielen, ist Teil der Überschrift und keine eigene Zeile. */
.division-titel .n { font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
                     letter-spacing: .08em; color: var(--text-still); }
.oe-leer.klein { padding: var(--s-5); font-size: var(--t-klein); }

/* Der Filter der Teamübersicht — dasselbe Muster wie in der Spielerliste. */
.team-filter { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end;
               margin-bottom: var(--s-6); padding-bottom: var(--s-5);
               border-bottom: 1px solid var(--linie); }
.team-filter .oe-feld { flex: 1 1 12rem; }
.team-filter .oe-knopf { min-height: 42px; }
.division-logos {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}
.division-logos a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  color: inherit; text-decoration: none; font-size: var(--t-klein); font-weight: 600;
  transition: border-color var(--dauer-schnell) var(--kurve), transform var(--dauer-schnell) var(--kurve);
}
.division-logos a:hover { border-color: var(--linie-stark); transform: translateY(-2px); color: var(--marke-text); }
.division-logos img, .division-logos .team-logo { width: 34px; height: 34px; object-fit: contain; flex: none; }
.division-logos span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

}

@layer oe-seiten {

/* ── Liga-Startseite ───────────────────────────────────────────────────
   ⚠ Hier stand `.liga-start { padding: 0 }` — eine von vier Stellen, die
     den Ausgleich für die früher schwebende Navigation einzeln
     zurücknahmen. Der Ausgleich selbst ist raus (siehe oe-seiten.css);
     die Ausnahme braucht es damit auch nicht mehr. */

/* Der Rumpf steht als `.oe-hero` im Baukasten — hier nur, was die Liga
   zusätzlich mitbringt: das Wappen und die Zahlenreihe. */
.liga-hero .wappen { width: 84px; height: 84px; object-fit: contain; }

.liga-live .liga-match.live { border-color: var(--marke-linie); background: var(--marke-weich);
                              grid-template-columns: 1fr auto 1fr auto; }
.liga-live .liga-match.live .oe-knopf { margin-left: var(--s-3); }

.liga-div { min-height: 9rem; align-content: start; }
.liga-div h3 { font-size: var(--t-h3); }
.liga-div p { color: var(--text-leise); font-size: var(--t-klein); }
.liga-div .oe-weiter { margin-top: auto; color: var(--marke-text); }

.liga-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s-7); }
.liga-zwei .mehr { margin-top: var(--s-4); }

.liga-mitmachen { display: flex; flex-wrap: wrap; gap: var(--s-6);
                  align-items: center; justify-content: space-between; }
.liga-mitmachen .oe-kopf { margin-bottom: 0; }

@media (max-width: 720px) {
  .liga-live .liga-match.live { grid-template-columns: 1fr auto; }
  .liga-live .liga-match.live .oe-knopf { grid-column: 1 / -1; margin: var(--s-2) 0 0; }
}

/* ═══ ALLE SEASONS  `/crossfire/seasons` ════════════════════════════════ */

.season-liste { display: grid; gap: var(--s-4); }
.season-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-5); align-items: center;
  padding: var(--s-5); text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l);
  transition: border-color var(--dauer-normal) var(--kurve),
              transform var(--dauer-normal) var(--kurve);
}
.season-karte:hover { border-color: var(--marke-linie); transform: translateY(-2px); }
.season-karte.laeuft { border-color: var(--marke-linie); }
.season-karte .wappen { width: 56px; height: 56px; object-fit: contain; }
.season-karte .haupt { display: grid; gap: var(--s-2); }
.season-karte .zeile { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.season-karte strong { font-family: var(--font-display); font-size: var(--t-h2);
                       text-transform: uppercase; letter-spacing: .01em; }
.season-karte small { color: var(--text-still); font-size: var(--t-klein); }
.season-karte .zahlen { display: flex; flex-wrap: wrap; gap: var(--s-4);
                        color: var(--text-leise); font-size: var(--t-klein); }
.season-karte .zahlen span { font-variant-numeric: tabular-nums; }

/* Wie weit die Season ist — dieselbe Spur wie in der Map-Statistik. */
.season-karte .fortschritt { display: block; height: 6px; max-width: 22rem;
                             border-radius: var(--r-full); background: var(--flaeche-2); overflow: hidden; }
.season-karte .fortschritt > span { display: block; height: 100%; background: var(--marke); }
.season-karte .stand { font-variant-numeric: tabular-nums; }

.season-karte .sieger { display: grid; gap: var(--s-1); justify-items: end; text-align: right; }
.season-karte .sieger .wer { display: inline-flex; align-items: center; gap: var(--s-2);
                             font-weight: 600; }
.season-karte .sieger img { width: 28px; height: 28px; object-fit: contain; }
.oe-chip.laeuft { background: var(--marke-weich); color: var(--marke-text); }

@media (max-width: 720px) {
  .season-karte { grid-template-columns: auto minmax(0, 1fr); }
  .season-karte .sieger { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* ═══ ALLE SPIELER  `/crossfire/spieler` ════════════════════════════════ */

.spieler-filter {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end;
  margin-bottom: var(--s-6); padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--linie);
}
.spieler-filter .oe-feld { flex: 1 1 14rem; }
.spieler-filter .oe-knopf { min-height: 42px; }

.liste-anzahl { margin: 0 0 var(--s-3); color: var(--text-still); font-size: var(--t-klein); }

.spieler-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
                 background: var(--linie); border: 1px solid var(--linie);
                 border-radius: var(--r-m); overflow: hidden; }
.spieler-liste li {
  display: grid; grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr) 7rem;
  gap: var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-4); background: var(--flaeche);
}
.spieler-liste .avatar { width: 40px; height: 40px; border-radius: var(--r-full); object-fit: cover; }
.spieler-liste .avatar.leer { display: grid; place-items: center; background: var(--flaeche-2);
                              color: var(--text-still); font-family: var(--font-display);
                              font-size: var(--t-klein); }
.spieler-liste .wer { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
                      min-width: 0; font-weight: 600; }
.spieler-liste .wer a { color: var(--text); text-decoration: none; }
.spieler-liste .wer a:hover { color: var(--marke-text); text-decoration: underline; }
/* Wer kein Profil hat, ist kein toter Link — er ist einfach kein Link. */
.spieler-liste .ohne-profil { color: var(--text-leise); font-weight: 500; }
.spieler-liste .team { display: inline-flex; align-items: center; gap: var(--s-2);
                       min-width: 0; color: var(--text-leise); font-size: var(--t-klein);
                       text-decoration: none; }
.spieler-liste .team:hover { color: var(--marke-text); }
.spieler-liste .team img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.spieler-liste .rolle { color: var(--text-still); font-size: var(--t-mikro);
                        text-transform: uppercase; letter-spacing: .06em; text-align: right; }

@media (max-width: 720px) {
  .spieler-liste li { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s-2); }
  .spieler-liste .team { grid-column: 2; }
  .spieler-liste .rolle { grid-column: 2; text-align: left; }
}

/* ═══ SPIELPLAN  `/crossfire/kalender` ══════════════════════════════════
   Erbt alles vom Vereinskalender (`.pn-kalender`). Eigen ist nur, dass die
   Farbe hier die DIVISION meint und nicht die Terminart — und dass neben
   jeder Farbe ihr Name steht. */

.cf-kalender .arten { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.cf-kalender .chip .punkt {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--chip); flex: 0 0 auto;
}
.cf-kalender .agenda .art .punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--art); margin-right: var(--s-1);
}
.cf-kalender .oe-zurueck { max-width: var(--seitenbreite); }

}