/* =========================================================================
   eckdaten.app — Gestaltung
   =========================================================================
   Zwei Farbebenen liegen uebereinander:

   1. Die MARKE (Rasen, Signal, Kalk) traegt Logo, Grundflaechen und alles,
      was unabhaengig vom Verein ist. Werte aus dem Logo-Entwurf.
   2. Die VEREINSFARBE uebernimmt, sobald jemand seinen Verein gewaehlt hat.
      Sie kommt in ZWEI Rollen vor, und die duerfen nicht verwechselt werden:

      --verein  ist FLAECHE: das Heldenband, die Kachel. Grosse Flaechen,
                auf denen --verein-schrift steht. Jede Vereinsfarbe taugt
                dafuer, denn das Paar ist in der Tabelle geprueft.
      --akzent  ist TINTE auf dem dunklen Grund: Frist, offene Anstosszeit,
                Rahmen, Fokus — und Flaeche dort, wo das Element klein ist
                (Kopieren-Knopf, aktiver Filter, Heim-Marke); darauf steht
                dann --akzent-schrift.

      Warum getrennt: Gladbach (#1A1A1A) erreicht gegen den Grund 1,1:1.
      Als Flaeche mit weisser Schrift ist das tadellos, als Tinte war der
      Kopieren-Knopf unsichtbar. Vier Vereine waren davon betroffen.

   Beide Schriftfarben kommen aus der Vereinstabelle im Server, nicht aus
   einer Kontrastformel: auf Dortmunder Gelb gehoert dunkle Schrift, auf
   Bayern-Rot weisse.

   Schrift: bewusst systemeigen. Der Logo-Entwurf nennt Familjen Grotesk und
   Spline Sans Mono — die kaemen von fremden Servern und sind hier deshalb
   nicht eingebunden (siehe CLAUDE.md, offener Punkt).
   ========================================================================= */

:root {
  /* Marke.
     Das Zeichen stand bis zum 25.08.2026 auf Rasengrün (#0C4A33). Gemessen
     hatten die orangen Balken darauf nur 2,83:1 — der schlechteste Wert
     aller geprüften Farbwege; bei 42 Pixeln auf dem Homebildschirm matschten
     Fahne und Fläche ineinander. Anthrazit bringt sie auf 4,85:1 und passt
     zur dunklen Oberfläche der App. */
  --marke: #16191C;
  --signal: #E8552F;
  --kalk: #F2F5EE;
  --tief: #091310;

  /* Flaechen */
  --grund: #0C100E;
  --flaeche: #141A17;
  --flaeche-2: #1A211D;
  --rand: #232D28;
  --text: #E6EBE7;
  --leise: #8FA098;

  /* Rueckfall, solange kein Verein gewaehlt ist.
     Das war das Mittelgrün der alten Marke und trug auf der Fläche nur
     2,75:1 — als Schriftfarbe also unlesbar nach jedem Maßstab. Mit dem
     anthrazitfarbenen Zeichen ist das Signalorange die Farbe der Marke;
     es misst 4,85:1 und besteht damit AA.
     Die Schrift AUF der Orangefläche muss dunkel sein: #12100B kommt auf
     5,22:1, Weiß nur auf 3,64:1. */
  --verein: var(--signal);
  --verein-schrift: #12100B;
  --akzent: var(--signal);
  --akzent-schrift: #12100B;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* `hidden` MUSS gewinnen.
   Die Regel des Browsers dafuer ist `[hidden] { display: none }` — eine
   Attributregel mit dem Gewicht 0,1,0. Jede Klassenregel mit `display:`
   schlaegt sie. Das ist hier zweimal passiert: Die Reiterleiste
   (`.reiter { display: flex }`) stand auf der Vereinsauswahl, obwohl sie
   verborgen sein sollte, und die Benachrichtigungskarte blieb sichtbar,
   nachdem sie ein <details> geworden war.
   Einmal grundsaetzlich statt bei jedem neuen Element von Hand — sonst
   faellt der naechste wieder darauf herein. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.huelle { width: min(100% - 2.25rem, 46rem); margin-inline: auto; }

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.15; margin: 0; }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem max(1.125rem, env(safe-area-inset-left));
  /* `env(safe-area-inset-top)` ist Pflicht, sobald die App im Standalone-
     Betrieb laeuft: Mit `apple-mobile-web-app-status-bar-style:
     black-translucent` beginnt die Seite GANZ OBEN, also hinter Uhr und
     Akkuanzeige. Ohne diesen Zuschlag liegt die komplette Kopfzeile darunter
     und „Verein wechseln" ist nicht zu treffen — im Browser faellt das nicht
     auf, weil der Zuschlag dort 0 ist.

     1,4 rem statt 0,85: Mit dem knappen Wert blieben zwischen der Dynamic
     Island und dem Logo nur 18 Pixel. Gemessen reicht das zwar, gefuehlt
     klebt es. */
  padding-top: calc(1.4rem + env(safe-area-inset-top));
  /* DECKEND, NICHT DURCHSCHEINEND. Bei 88 % schimmerte der Inhalt, der
     darunter wegscrollt, hinter Logo und Knopf hindurch — auf der
     Vereinsansicht ausgerechnet das grelle Farbband. Das sah aus, als waere
     die Kopfzeile verdeckt. Der Weichzeichner bleibt fuer die Kante zum
     Inhalt, traegt aber nichts mehr aus dem Hintergrund herein. */
  background: color-mix(in srgb, var(--grund) 98%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
}

.marke { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--kalk); }
.marke__zeichen { width: 1.75rem; height: 1.75rem; flex: none; }
.marke__wort { font-size: 1.25rem; font-weight: 700; letter-spacing: -.045em; }
.marke__wort em { font-style: normal; color: var(--signal); }

.wechseln {
  min-height: 2.25rem; padding: 0 .9rem;
  border: 1px solid var(--rand); border-radius: 999px;
  background: transparent; color: var(--leise);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.wechseln:hover { color: var(--text); border-color: var(--akzent); }

/* ── Einstieg ────────────────────────────────────────────────────────────── */

.einstieg { padding: clamp(2.5rem, 8vw, 4.5rem) 0 2rem; }
.einstieg h1 { font-size: clamp(2.1rem, 8vw, 3.25rem); font-weight: 700; margin-bottom: 1rem; }
.fuehrung { color: var(--leise); max-width: 34rem; }

.bereichstitel {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--leise); margin-bottom: .9rem;
}

.vereinsraster {
  display: grid; gap: .625rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  padding-bottom: 3rem;
}

/* Die Kachel IST die Vereinsfarbe — das ist der Wiedererkennungswert.
   Der Streifen links traegt die Zweitfarbe. Ohne ihn waeren zehn der
   achtzehn Kacheln dasselbe Rot: Bayern, Leipzig, Leverkusen, Frankfurt,
   Stuttgart, Freiburg, Koeln, Union, Mainz und Elversberg liegen alle
   zwischen #C3141E und #ED1C24. Erst der Streifen macht daraus rot-blau,
   rot-schwarz, rot-weiss und rot-gelb. */
.vereinskachel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .15rem;
  min-height: 5.25rem; padding: .85rem .9rem .85rem 1.4rem;
  border: 0; border-radius: .875rem;
  background: var(--kachel); color: var(--kachel-schrift);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform 140ms cubic-bezier(.32,.72,0,1), box-shadow 140ms;
}
.vereinskachel::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: .375rem;
  background: var(--kachel-zweit);
}
.vereinskachel:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.9); }
.vereinskachel:active { transform: translateY(0); }
.vereinskachel__kurz { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.vereinskachel__name { font-size: .75rem; opacity: .82; }

/* ── Vereinsansicht ──────────────────────────────────────────────────────── */

.held {
  margin: 0 -1.125rem 1.5rem;
  padding: clamp(2rem, 7vw, 3.25rem) 1.125rem clamp(1.5rem, 5vw, 2.25rem);
  background: var(--verein); color: var(--verein-schrift);
}
.held h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; }
.augenbraue {
  margin: 0 0 .5rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; opacity: .8;
}

.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 1rem; padding: 1.35rem; margin-bottom: 1rem;
}
.karte h2 { font-size: 1.05rem; font-weight: 650; margin-bottom: .65rem; }
.karte p { margin: 0 0 .7rem; }
.karte p:last-child { margin-bottom: 0; }

.karte--abo { border-color: var(--akzent); }
.naechstes { border-left: 4px solid var(--akzent); }
.naechstes__paarung { font-size: 1.15rem; font-weight: 700; margin-bottom: .3rem; }
/* Die vollen Vereinsnamen im aufgeklappten Teil. Kleiner als der Kurzname
   im Kopf — sie sind hier die Nachfrage, nicht die Ansage. */
.naechstes__voll { font-size: .95rem; font-weight: 600; color: var(--leise); margin-bottom: .5rem; }
.naechstes__wann { font-size: 1.05rem; font-weight: 600; margin-bottom: .15rem; }
.naechstes__frist { color: var(--akzent); font-weight: 600; }

/* ── Der Kopf der Kachel „Nächstes Spiel“ ───────────────────────
   Zwei Zeilen statt eines Absatzes: oben die Lage, unten die Paarung mit
   Uhrzeit oder Stand. Wetter, Spieltag und Ticker sind Nachfragen und stehen
   hinter dem Dreieck.

   EIN RASTER, KEIN FLEX. Mit `display:flex` im `summary` bekam die Paarung
   245 statt der verfügbaren 290 Pixel und wurde mitten im Vereinsnamen
   abgeschnitten, obwohl rechts Platz frei stand — das Pfeil-`::after` mit
   `margin-left:auto` und das wachsende Kind stritten um dieselbe Lücke.
   Das Raster benennt die Spalten und lässt nichts zu verhandeln.

   `minmax(0, 1fr)` statt `1fr`: Eine Rasterspalte wird von sich aus nicht
   schmaler als ihr Inhalt. Ohne das schöbe „Borussia Mönchengladbach“ die
   Uhrzeit aus der Kachel heraus, statt selbst zu kürzen. */
/* `.karte.naechstes` statt `.naechstes`: `.klapp > summary` steht weiter
   unten in dieser Datei und hat dasselbe Gewicht (0,1,1) — bei Gleichstand
   gewinnt die spätere Regel. Die Kachel blieb deshalb im Flex-Layout, und
   die Paarung bekam 91 statt 225 Pixel. Zwei Klassen heben das Gewicht auf
   (0,2,1) und beenden die Frage. */
.karte.naechstes > summary,
.karte.heute > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "lage lage pfeil" "paarung wert pfeil";
  gap: .1rem .7rem;
  padding: .85rem 1.15rem;
}
.karte.naechstes > summary::after,
.karte.heute > summary::after { grid-area: pfeil; align-self: center; margin-left: 0; }

.nk__lage {
  grid-area: lage;
  display: flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 600; color: var(--leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nk__paarung {
  grid-area: paarung; align-self: baseline;
  font-size: 1.05rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nk__wert {
  grid-area: wert; align-self: baseline;
  font-variant-numeric: tabular-nums; font-weight: 650; font-size: 1.05rem;
}
.nk__wert--stand { font-size: 1.3rem; color: var(--akzent); }
.nk__wert--offen { font-size: .85rem; font-weight: 500; color: var(--leise); }

/* Läuft ein Spiel oder ist es gerade abgepfiffen, trägt die Kachel den
   Akzent auch im Rahmen — sie ist dann kein Ausblick mehr, sondern das,
   weswegen jemand die Seite aufmacht. */
.naechstes--warm { border-color: var(--akzent); }
.naechstes--warm .nk__lage { color: var(--akzent); }

.leise { color: var(--leise); font-size: .95rem; }
.klein { font-size: .85rem; color: var(--leise); }

.adresse {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  background: var(--grund); border: 1px solid var(--rand);
  border-radius: .625rem; padding: .7rem .85rem;
}
.adresse code {
  flex: 1 1 15rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875rem; overflow-wrap: anywhere;
}

/* `#kopieren` war einmal ein grosser Knopf. Seit die Abo-Kachel zwei
   richtige Knoepfe hat (Apple, Google), ist es nur noch ein Textlink in der
   Fussnote — die alte Pillenform stand ihm sonst weiter im Weg und liess die
   Zeile aussehen, als gaebe es drei Knoepfe. Die Gestaltung steht jetzt
   allein in `.text-knopf`. */

.hinweis { margin-top: .7rem; color: var(--akzent); font-size: .875rem; }

.anleitung { margin-top: 1rem; border-top: 1px solid var(--rand); padding-top: .8rem; }
.anleitung summary { cursor: pointer; font-size: .9rem; color: var(--leise); }
.anleitung summary::marker { color: var(--akzent); }
.anleitung ol { margin: .8rem 0 0; padding-left: 1.2rem; color: var(--leise); font-size: .9rem; }
.anleitung li { margin-bottom: .45rem; }

/* ── Spielplan ───────────────────────────────────────────────────────────── */

.bereich-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 2rem 0 .9rem;
}
.bereich-kopf h2 { font-size: 1.05rem; font-weight: 650; }

.filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter__knopf {
  min-height: 2.1rem; padding: 0 .8rem;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--flaeche); color: var(--leise);
  font: inherit; font-size: .82rem; cursor: pointer;
}
.filter__knopf:hover { color: var(--text); }
.filter__knopf.ist-aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-schrift); font-weight: 600; }

.ladehinweis { color: var(--leise); padding: 1.25rem 0; }

.monat {
  margin: 1.5rem 0 .6rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--leise);
}
.monat:first-child { margin-top: 0; }

.spiel {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; align-items: center;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 3px solid var(--rand);
  border-radius: .75rem; padding: .75rem .95rem; margin-bottom: .45rem;
}
.spiel--heim { border-left-color: var(--akzent); }
.spiel--offen { border-style: dashed; }
.spiel--vorbei { opacity: .5; }

.spiel__wann { display: flex; flex-direction: column; }
.spiel__tag { font-size: .72rem; color: var(--leise); }
.spiel__datum { font-weight: 600; font-size: .95rem; }
.spiel__zeit { font-size: .85rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.spiel__zeit--offen { color: var(--akzent); font-weight: 600; }

.spiel__spieltag { font-size: .72rem; color: var(--leise); margin-bottom: .1rem; }
.spiel__paarung { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.gegner { font-weight: 600; }

/* H oder A statt einer Beschriftung: spart Platz und ist sofort lesbar. */
.ort-marke {
  flex: none; width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  border-radius: .35rem; background: var(--flaeche-2);
  font-size: .68rem; font-weight: 700; color: var(--leise);
}
.spiel--heim .ort-marke { background: var(--akzent); color: var(--akzent-schrift); }

.ergebnis {
  font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--flaeche-2); border-radius: .35rem; padding: 0 .4rem;
}

.fuss { margin-block: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rand); color: var(--leise); font-size: .8rem; }
.fuss a { color: var(--leise); }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: .4rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

@media (max-width: 26rem) {
  .spiel { grid-template-columns: 4.5rem 1fr; }
}

/* ── Ansichten und Reiterleiste ──────────────────────────────────────────────
   Umgeschaltet wird mit `.ansicht-aus`, nicht mit `hidden`: An einzelnen
   Elementen steht `hidden` schon aus inhaltlichem Grund (kein naechstes
   Spiel), und beides zu vermischen blendete beim Wechsel Leeres ein. */

.ansicht-aus { display: none; }

.reiter {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; justify-content: center; gap: .25rem;
  padding: .375rem .5rem;
  /* `env(safe-area-inset-bottom)` ist Pflicht. Ohne den Zuschlag laege die
     Leiste auf iPhones unter dem Wischstreifen und waere nicht zu treffen. */
  padding-bottom: calc(.375rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rand);
}

.reiter__knopf {
  flex: 1 1 0; max-width: 7rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-height: 2.9rem; padding: .35rem .25rem;
  border: 0; border-radius: .625rem; background: transparent;
  color: var(--leise); font: inherit; font-size: .7rem; cursor: pointer;
}
.reiter__knopf svg { width: 1.25rem; height: 1.25rem; flex: none; }
.reiter__knopf.ist-aktiv { color: var(--akzent); }
.reiter__knopf.ist-aktiv .reiter__wort { font-weight: 650; }

/* Platz fuer die Leiste, sonst deckt sie die letzte Zeile ab. */
body:has(.reiter:not([hidden])) { padding-bottom: 4.5rem; }

/* ── Tabelle ─────────────────────────────────────────────────────────────── */

.tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabelle th {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--leise); text-align: right;
  padding: 0 .3rem .5rem; white-space: nowrap;
}
.tabelle th:nth-child(1), .tabelle th:nth-child(2) { text-align: left; }
.tabelle td { padding: .5rem .3rem; border-top: 1px solid var(--rand); text-align: right; }
.tabelle td:nth-child(1), .tabelle td:nth-child(2) { text-align: left; }

.tab__platz { width: 2.2rem; color: var(--leise); font-size: .85rem; position: relative; padding-left: .55rem !important; }
/* Der Zonenstreifen steht links am Platz — Champions League bis Abstieg.
   Farbe kommt aus der Quelle bzw. aus zoneNachPlatz(); keine eigene Erfindung. */
.tab__zone { position: absolute; inset: 0 auto 0 0; width: .1875rem; border-radius: 999px; }
.tab__verein { font-weight: 600; }
.tab__punkte { font-weight: 700; }
.tabelle td.tab__weich { color: var(--leise); font-size: .9rem; }

/* Die eigene Mannschaft hervorheben — dafuer ist die App da. */
.tabelle tr.ist-eigen td { background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.tabelle tr.ist-eigen .tab__verein { color: var(--akzent); }

.zonen { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; }
.zonen__eintrag { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--leise); }
.zonen__fleck { width: .625rem; height: .625rem; border-radius: 2px; flex: none; }

/* Auf schmalen Geraeten fallen die selten gelesenen Spalten weg: Siege,
   Unentschieden und Niederlagen stehen auch im Torverhaeltnis. */
@media (max-width: 30rem) {
  .tabelle .weglassbar { display: none; }
}

/* ── Bilanz ──────────────────────────────────────────────────────────────────
   Kennzahlen sind KEIN Diagramm. Spiele, Siege, Tore, Punkte beantworten je
   eine Frage mit einer Zahl — dafuer ist die Kachel die richtige Form, nicht
   ein Balken, der eine Groessenbeziehung behauptet, die es nicht gibt.

   DIE FORMKURVE IST EINE STATUSFOLGE, KEINE KATEGORIE. Sieg, Unentschieden
   und Niederlage sind Zustaende; sie haben eine eigene, reservierte Palette,
   die sich nicht mit den Vereinsfarben mischt. Nachgerechnet gegen die
   dunkle Flaeche (#141A17): alle drei ueber 3:1, dunkle Schrift darauf 4,6
   bis 6,2:1.

   GRUEN-GELB-ROT IST DER KLASSISCHE ROT-GRUEN-FALL. Gemessen liegt das Paar
   Sieg/Unentschieden bei Protanopie nur bei ΔE 6,5 — erlaubt ist das
   ausschliesslich mit zweiter Kodierung. Deshalb steht in JEDEM Feld der
   Buchstabe S, U oder N. Wer die Buchstaben entfernt, macht die Formkurve
   fuer einen von zwanzig Maennern unlesbar. */

:root {
  --sieg: #31A85E;
  --unentschieden: #C08A1E;
  --niederlage: #E04352;
  --status-schrift: #12100B;
}

.kennzahlen {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  margin-bottom: 1rem;
}
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: .75rem; padding: .8rem .7rem;
}
.kennzahl__wert { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl__wort { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--leise); margin-top: .2rem; }
.kennzahl--gross .kennzahl__wert { font-size: 2.25rem; color: var(--akzent); }

.formkurve { display: flex; flex-wrap: wrap; gap: .3rem; }
.formfeld {
  width: 1.9rem; height: 1.9rem; flex: none;
  display: grid; place-items: center;
  border-radius: .4rem;
  font-size: .8rem; font-weight: 700; color: var(--status-schrift);
}
.formfeld--S { background: var(--sieg); }
.formfeld--U { background: var(--unentschieden); }
.formfeld--N { background: var(--niederlage); }

.bilanzliste { display: grid; gap: .4rem; margin-top: .3rem; }
.bilanzzeile { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .92rem; }
.bilanzzeile dt { color: var(--leise); }
.bilanzzeile dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.leerhinweis {
  background: var(--flaeche); border: 1px dashed var(--rand);
  border-radius: 1rem; padding: 1.5rem 1.35rem; color: var(--leise);
}
.leerhinweis strong { color: var(--text); display: block; margin-bottom: .35rem; }

/* ── Liga ────────────────────────────────────────────────────────────────── */

.blaetter { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.blaetter__wort { font-weight: 650; font-size: 1rem; }
.blaetter__knopf {
  width: 2.4rem; height: 2.4rem; flex: none;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--flaeche); color: var(--text);
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.blaetter__knopf:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.blaetter__knopf:disabled { opacity: .35; cursor: default; }

.paarung {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem;
  padding: .55rem .1rem; border-top: 1px solid var(--rand); font-size: .92rem;
}
.paarung:first-of-type { border-top: 0; }
.paarung__heim { text-align: right; }
.paarung__gast { text-align: left; }
.paarung__mitte {
  min-width: 3.4rem; text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
}
/* Im Ergebnisfeld steht das Statuszeichen klein daneben, nicht in der
   Gastspalte — dort sprengte es die Zeile auf drei Zeilen. */
.paarung__mitte .formfeld { width: 1.25rem; height: 1.25rem; border-radius: .25rem; font-size: .62rem; }
.paarung__zeit { font-weight: 400; font-size: .8rem; color: var(--leise); }
.paarung--eigen { background: color-mix(in srgb, var(--akzent) 12%, transparent); border-radius: .4rem; }
.paarung--eigen .paarung__heim, .paarung--eigen .paarung__gast { font-weight: 650; }
.spieltag__wann { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--leise); margin: .9rem 0 .3rem; }
.spieltag__wann:first-child { margin-top: 0; }

/* Rangliste — Restprogramm und Formtabelle teilen sich die Form. */
.rangliste { display: grid; gap: .1rem; margin-top: .3rem; }
.rangzeile {
  display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .6rem;
  padding: .4rem .45rem; border-radius: .4rem; font-size: .9rem;
}
.rangzeile--eigen { background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.rangzeile--eigen .rangzeile__verein { color: var(--akzent); font-weight: 650; }
.rangzeile__rang { color: var(--leise); font-size: .8rem; font-variant-numeric: tabular-nums; }
.rangzeile__wert { font-variant-numeric: tabular-nums; color: var(--leise); font-size: .85rem; }
.rangzeile__folge { display: flex; gap: .15rem; }
.rangzeile__folge .formfeld { width: 1.15rem; height: 1.15rem; border-radius: .25rem; font-size: .6rem; }

.ziel { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--rand); }
.ziel:first-of-type { border-top: 0; }
.ziel__wort { font-weight: 600; }
.ziel__platz { color: var(--leise); font-size: .82rem; }
.ziel__wert { font-variant-numeric: tabular-nums; text-align: right; }
.ziel__wert--voraus { color: var(--sieg); }
.ziel__wert--fehlt { color: var(--akzent); font-weight: 600; }

/* ── Live ────────────────────────────────────────────────────────────────── */

.karte--vorschau { border-left: 4px solid var(--akzent); }

/* Waehrend gespielt wird, raeumt die Kachel auf: Datum, Uhrzeit und Ort
   verschwinden. Sie beantworten „wann und wo?" — und die Frage stellt
   niemand mehr, waehrend die Mannschaft auf dem Platz steht. */
.laufend { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.laufend__stand { font-size: 2.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.laufend__minute {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 650; color: var(--akzent);
}
.laufend__punkt {
  width: .5rem; height: .5rem; border-radius: 999px; background: var(--akzent);
  animation: pochen 1.6s ease-in-out infinite;
}
@keyframes pochen { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .laufend__punkt { animation: none } }

.vorschauzeile {
  display: grid; grid-template-columns: 1.9rem 1fr auto; align-items: center; gap: .7rem;
  padding: .45rem 0; border-top: 1px solid var(--rand);
}
.vorschauzeile:first-of-type { border-top: 0; }
.vorschauzeile__platz { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Benachrichtigungen ──────────────────────────────────────────────────── */

.karte--push { border-color: var(--rand); }
.anlaesse { display: grid; gap: .1rem; margin: .8rem 0; }
.anlass {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .1rem; cursor: pointer;
}
.anlass input { width: 1.15rem; height: 1.15rem; accent-color: var(--akzent); flex: none; }
.anlass__wort { font-weight: 600; font-size: .95rem; }
.anlass__hinweis { color: var(--leise); font-size: .82rem; }
.push-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
#push-an, #push-aus {
  min-height: 2.6rem; padding: 0 1.1rem; border: 0; border-radius: 999px;
  background: var(--akzent); color: var(--akzent-schrift);
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
}
#push-aus { background: transparent; color: var(--leise); border: 1px solid var(--rand); }
#push-an:disabled { opacity: .5; cursor: default; }

/* ── Datenschutz ─────────────────────────────────────────────────────────── */

.rechtstext { padding: 2rem 0 3rem; }
.rechtstext h1 { font-size: clamp(1.6rem, 5vw, 2.25rem); margin-bottom: 1rem; }
.rechtstext h2 { font-size: 1.05rem; margin: 1.8rem 0 .5rem; }
.rechtstext p, .rechtstext li { color: var(--text); }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext .leise { color: var(--leise); }

/* Torschuetzen im laufenden Spiel. Fehlt der Name in der Quelle, steht dort
   nur die Minute — lieber eine Luecke als ein erfundener Name. */
.torliste { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .3rem; }
.torliste li {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .92rem; padding: .25rem 0; border-top: 1px solid var(--rand);
}
.torliste li:first-child { border-top: 0; }
.torliste__minute { color: var(--leise); font-variant-numeric: tabular-nums; min-width: 2.2rem; }
.torliste__stand { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.torliste__zusatz { color: var(--leise); font-size: .8rem; }

/* Der Pokal muss sich vom Spieltag unterscheiden. „1. Runde" allein geht
   neben lauter „1. Spieltag" unter — genau daran ist ein Pokalspiel beim
   Ueberfliegen uebersehen worden. */
.marke-pokal {
  display: inline-block; padding: .05rem .35rem; margin-right: .2rem;
  border-radius: .25rem; background: var(--signal); color: #12100B;
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; vertical-align: .05em;
}
.spiel--pokal { border-left-style: double; border-left-width: 4px; }
.laufend__abschnitt { font-size: .78rem; color: var(--leise); }

/* ── Klappbare Abschnitte ────────────────────────────────────────────────────
   Gebaut mit <details>, nicht mit eigenem Auf- und Zuklappen: Der Browser
   bringt Tastaturbedienung, Vorlesbarkeit und die Suchfunktion („Auf dieser
   Seite suchen" oeffnet zugeklappte Abschnitte von selbst) mit. Nachgebaut
   waere das alles verloren.

   WAS OFFEN IST, MERKT SICH DIE SEITE. Wer die Formtabelle jedes Mal neu
   aufklappen muss, klappt sie beim dritten Mal nicht mehr auf. */

.klapp {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 1rem; margin-bottom: 1rem;
}
.klapp > summary {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.05rem 1.35rem; cursor: pointer;
  font-size: 1.05rem; font-weight: 650;
  list-style: none;
}
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary::after {
  content: ''; margin-left: auto; flex: none;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms cubic-bezier(.32,.72,0,1);
}
.klapp[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.klapp > summary:hover::after { border-color: var(--akzent); }
.klapp__zusatz { font-size: .8rem; font-weight: 400; color: var(--leise); }
.klapp__inhalt { padding: 0 1.35rem 1.35rem; }
.klapp__inhalt > :first-child { margin-top: 0; }
/* Innerhalb eines Klappmenues braucht die Karte keinen zweiten Rahmen. */
.klapp__inhalt .karte { background: transparent; border: 0; padding: 0; margin: 0 0 1rem; }
.klapp__inhalt .karte:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .klapp > summary::after { transition: none } }

/* ── Ticker ──────────────────────────────────────────────────────────────── */

.ticker { display: grid; gap: .1rem; }
.tickerzeile {
  /* Die Minutenspalte muss „90+1." tragen, nicht nur „90.". Mit 2,6 rem
     brach die Angabe um und sichtbar blieb die halbe Zahl. */
  display: grid; grid-template-columns: 3.4rem 1.4rem 1fr auto; align-items: baseline; gap: .5rem;
  padding: .45rem .35rem; border-radius: .4rem; font-size: .92rem;
}
.tickerzeile--tor { background: color-mix(in srgb, var(--akzent) 12%, transparent); font-weight: 600; }
.tickerzeile__minute {
  color: var(--leise); font-variant-numeric: tabular-nums; font-size: .85rem;
  white-space: nowrap;   /* „90+1." darf nicht umbrechen */
}
.tickerzeile__stand { font-weight: 700; font-variant-numeric: tabular-nums; }
.tickerzeile__wer { color: var(--leise); font-size: .8rem; }
.tickerzeichen { font-size: .95rem; line-height: 1; }

.statistik { display: grid; gap: .55rem; }
.statzeile { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; gap: .6rem; font-size: .88rem; }
.statzeile__wort { text-align: center; color: var(--leise); font-size: .78rem; }
.statzeile__zahl { font-variant-numeric: tabular-nums; font-weight: 600; }
.statzeile__zahl--gast { text-align: right; }
.statbalken { display: flex; height: .35rem; border-radius: 999px; overflow: hidden; background: var(--flaeche-2); }
.statbalken__heim { background: var(--leise); }
.statbalken__gast { background: var(--akzent); }

/* Laufende Spiele auf der Vereinskachel. Der Chip liegt oben rechts und
   nimmt die Schriftfarbe der Kachel — auf Dortmunder Gelb dunkel, auf
   Bayern-Rot hell. Eine feste Farbe waere auf der Haelfte der Kacheln
   unlesbar. */
.vereinskachel--live { box-shadow: inset 0 0 0 2px var(--kachel-schrift); }
.kachel-live {
  position: absolute; top: .5rem; right: .55rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .38rem; border-radius: 999px;
  background: color-mix(in srgb, var(--kachel-schrift) 16%, transparent);
  color: var(--kachel-schrift);
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kachel-live__punkt {
  width: .35rem; height: .35rem; border-radius: 999px;
  background: currentColor; animation: pochen 1.6s ease-in-out infinite;
}
.kachel-live__minute { font-weight: 400; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .kachel-live__punkt { animation: none } }

/* ── Kompakte Partiezeile ────────────────────────────────────────────────────
   Fuer Listen, in denen viele Begebnungen untereinander stehen: Spieltage,
   Archiv, direkter Vergleich.

   DER PLATZ ENTSTEHT DURCH DEN KURZNAMEN, nicht durch kleinere Schrift.
   „Borussia Mönchengladbach – 1. FSV Mainz 05" braucht auf 390 Pixeln drei
   Zeilen, „Gladbach – Mainz" eine. Neun Partien wurden so von rund 27 auf
   9 Zeilen. Ausgeschrieben steht der Name weiterhin im `title`.

   Eine Spalte, eine Zeile: `overflow: hidden` mit Ellipse statt Umbruch —
   sonst verschoebe eine lange Paarung alle anderen Zeilen gegeneinander und
   die Uhrzeiten staenden nicht mehr untereinander. */

.partie {
  display: grid; grid-template-columns: 3rem 1fr auto;
  gap: .5rem; align-items: baseline;
  padding: .4rem .1rem; border-bottom: 1px solid var(--rand);
  font-size: .85rem;
}
.partie:last-child { border-bottom: 0; }
.partie__zeit { color: var(--leise); font-variant-numeric: tabular-nums; font-size: .8rem; }
.partie__paarung { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der eigene Verein faellt auf, ohne dass eine Farbe dazukommt. */
.partie__eigen { font-weight: 700; }
.partie__stand { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.partie__stand--live {
  padding: .05rem .35rem; border-radius: .3rem;
  background: var(--akzent); color: var(--akzent-schrift);
}
.partie__minute { margin-left: .3rem; font-weight: 400; font-size: .72rem; opacity: .85; }
.partie--live { background: color-mix(in srgb, var(--akzent) 10%, transparent); border-radius: .35rem; }
.partie--eigen { background: color-mix(in srgb, var(--akzent) 13%, transparent); border-radius: .35rem; }

/* ── Abo-Knoepfe ─────────────────────────────────────────────────────────────
   Ein Fingertipp statt Kopieren und Einfuegen. Zwei Knoepfe nebeneinander,
   unter 24 rem untereinander — zwei Stummel auf 320 Pixeln liest niemand. */

.abo-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .9rem; }
@media (max-width: 24rem) { .abo-knoepfe { grid-template-columns: 1fr; } }

.abo-knopf {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0 1rem;
  border-radius: .75rem; text-decoration: none;
  background: var(--akzent); color: var(--akzent-schrift);
  font-weight: 650; font-size: .95rem; text-align: center;
}
.abo-knopf:hover { filter: brightness(1.1); }
.abo-knopf--zweit {
  background: transparent; color: var(--text);
  border: 1px solid var(--rand);
}
.abo-knopf--zweit:hover { border-color: var(--akzent); color: var(--akzent); filter: none; }

.abo__fussnote {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0; color: var(--leise); font-size: .875rem;
}
.text-knopf {
  border: 0; background: transparent; padding: 0;
  color: var(--akzent); font: inherit; font-size: .875rem;
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.text-knopf:hover { filter: brightness(1.15); }

/* Monatsblöcke im Spielplan. Schmaler als die uebrigen Klappmenues — es
   sind bis zu zehn untereinander, und jeder Rahmen kostet Platz. */
.klapp--monat { margin-bottom: .5rem; }
.klapp--monat > summary {
  padding: .7rem 1rem;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--leise);
}
.klapp--monat[open] > summary { color: var(--text); }
.klapp--monat > .klapp__inhalt { padding: 0 .6rem .6rem; }

/* ── Spiele heute (Startseite) ───────────────────────────────────────────── */

.heute { margin-bottom: 2rem; }
/* Die Liste steckt jetzt IM aufgeklappten Teil. Ein eigener Rahmen um sie
   herum wäre ein Kasten im Kasten. */
.heute__liste { padding: 0; }
/* Auf der Startseite ist kein Verein gewaehlt — dort traegt die Marke des
   Dienstes die Hervorhebung, nicht eine Vereinsfarbe. */
.heute .partie--live { background: color-mix(in srgb, var(--signal) 14%, transparent); }
.heute .partie__stand--live { background: var(--signal); color: #12100B; }
.heute__tag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--leise); margin: .7rem 0 .2rem;
}
.heute__tag:first-child { margin-top: 0; }

/* ── Betriebspasswort setzen (/admin/passwort) ─────────────────────────────
   Eine einzelne Seite abseits der App. Sie borgt sich `.adresse` als Rahmen
   fuer die Eingabefelder und `.abo-knopf` fuer den Knopf, damit sie aussieht
   wie der Rest — eigene Formularschrift gibt es hier bewusst nicht. */
.feld {
  display: block; width: 100%; margin-bottom: .7rem;
  background: var(--grund); border: 1px solid var(--rand);
  border-radius: .625rem; padding: .8rem .85rem;
  color: var(--text); font: inherit; font-size: 1rem;
}
.feld::placeholder { color: var(--leise); }
.feld:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
.feld--fehler { border-color: var(--niederlage); }

.setzen-knopf { width: 100%; border: 0; cursor: pointer; margin-top: .3rem; }
.setzen-knopf[disabled] { opacity: .55; cursor: default; }

/* ── „EckDaten als App" ─────────────────────────────────────────────────────
   Die Kachel muss zwei Dinge zugleich sein: auffällig genug, dass jemand die
   Funktion überhaupt bemerkt, und klein genug, dass sie nicht im Weg steht.
   Deshalb der Akzentrahmen, aber keine Akzentfläche. */
.karte--app { position: relative; border: 1px solid var(--akzent); }
/* Rechts bleibt Platz für das Wegtipp-Kreuz — ohne ihn schöbe sich die
   Überschrift darunter. */
.appkachel__kopf { display: flex; align-items: center; gap: .85rem; padding-right: 2.2rem; }
.appkachel__kopf h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.appkachel__symbol { flex: none; width: 48px; height: 48px; border-radius: .7rem; }

/* Das Wegtippen ist ein echter Knopf mit 44 Pixeln Kante — Apples Mindestmaß
   für etwas, das ein Daumen treffen soll. Ein 16-Pixel-Kreuz trifft niemand
   beim ersten Versuch, und wer zweimal danebentippt, klappt stattdessen die
   Karte auf. */
.appkachel__weg {
  position: absolute; top: .35rem; right: .35rem;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--leise); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.appkachel__weg:hover { color: var(--text); background: var(--grund); }
.appkachel__weg-vom-kopf { margin-top: .9rem; }
.appkachel__fussnote { margin-top: .7rem; }

/* Die Schritte. Die Nummer steht in einer eigenen Spalte, damit mehrzeilige
   Schritte unter der Nummer einrücken statt darunter zu laufen. */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.schritt { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: start; }
.schritt__nummer {
  display: flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--akzent); color: var(--akzent-schrift);
  font-size: .8rem; font-weight: 700;
}
.schritt__text { font-size: .95rem; line-height: 1.55; }

/* Das Zeichen sitzt IN der Zeile, nicht daneben: Es steht für das Symbol, auf
   das der Finger als Nächstes trifft, und gehört deshalb mitten in den Satz.
   `vertical-align` hebt es auf die Höhe der Kleinbuchstaben. */
.schritt__zeichen {
  display: inline-block; width: 1.15em; height: 1.15em;
  vertical-align: -.22em; margin: 0 .1em; color: var(--akzent);
}

/* Der Wochentag vor der Uhrzeit: klein und zurückgenommen, weil er die
   unwichtigere Angabe ist. Er stand einmal vor der Paarung und schnitt dort
   den Vereinsnamen ab. */
.nk__tag { font-size: .75rem; font-weight: 600; color: var(--leise); margin-right: .3rem; }