/* =========================================================================
   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 */
  --rasen: #0C4A33;
  --rasen-mid: #146C4B;
  --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 */
  --verein: var(--rasen-mid);
  --verein-schrift: #FFFFFF;
  --akzent: var(--rasen-mid);
  --akzent-schrift: #FFFFFF;

  color-scheme: dark;
}

* { box-sizing: border-box; }

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. */
  padding-top: calc(.85rem + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--grund) 88%, 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; }
.naechstes__frist { color: var(--akzent); font-weight: 600; }

.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;
}

button.kopieren, #kopieren {
  flex: 0 0 auto; 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;
}
#kopieren:hover { filter: brightness(1.12); }

.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;
}
.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; }