/* ══════════════════════════════════════════════════════════════════════
   Kooblenz Tipps — Gestaltung

   Dieselben Flächen, Radien, Schatten und Bewegungskurven wie Cloud,
   Dashboard und Mail. Getrennt wird nur durch den Akzent: Cloud türkis,
   Dashboard blau, Mail violett, Tipps grün. Wer hier eine Fläche, einen
   Radius oder eine Kurve ändert, ändert sie in allen vieren oder in
   keinem — die Werte stehen im Gedächtnis unter kooblenz-gestaltung.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: dark;

    --ink:          #0A0A0B;
    --ink-raised:   #101012;
    --panel:        #141416;
    --panel-hover:  #1A1A1D;

    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --paper:      #F2F2F3;
    --muted:      #8A8A92;
    --muted-dim:  #5C5C64;
    /* Drei Textstufen, und sie bedeuten etwas:
       --paper     was gelesen wird            17,7:1 auf --ink
       --muted     was mitgelesen wird          5,8:1
       --muted-dim nur Randnotizen              3,0:1  ← zu schwach für Text */

    --accent:        #3FBF6F;
    --accent-hover:  #55D485;
    --accent-soft:   rgba(63, 191, 111, 0.13);
    --accent-border: rgba(63, 191, 111, 0.32);
    --accent-ink:    #04210F;

    --ok:        #34C77B;
    --warn:      #E5A93D;
    --down:      #E5484D;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --radius:    10px;
    --radius-sm: 7px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 20px -8px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 50px -12px rgba(0,0,0,.7);
    --ease:      cubic-bezier(.22, 1, .36, 1);
    --kopf-h:    58px;
}

* { box-sizing: border-box; }
body {
    margin: 0; background: var(--ink); color: var(--paper);
    font: 15px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.021em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── Kopfleiste ────────────────────────────────────────────────────── */
.kopf {
    position: sticky; top: 0; z-index: 30; height: var(--kopf-h);
    display: flex; align-items: center; gap: 14px; padding: 0 18px;
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    backdrop-filter: saturate(170%) blur(14px);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marke-zeichen {
    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--accent-hover), var(--accent));
    color: var(--accent-ink); box-shadow: var(--shadow-sm);
}
.marke-text { font-weight: 800; font-size: .98rem; letter-spacing: -.025em; }
.marke-text span { font-weight: 500; color: var(--muted); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kopf-knopf {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--muted); font-size: .845rem; font-weight: 500; text-decoration: none;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.kopf-knopf:hover { background: var(--panel-hover); color: var(--paper); }
.kopf-knopf.an { background: var(--accent-soft); color: var(--accent-hover); }

.buehne { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; }
.leiste { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.leiste h1 { font-size: 1.4rem; }
.leiste .neben { color: var(--muted); font-size: .86rem; }

/* ── Risikostufen ──────────────────────────────────────────────────── */
.stufe { margin-bottom: 32px; }
.stufe-kopf { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.stufe-kopf h2 { font-size: 1.08rem; }
.stufe-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.stufe-niedrig .stufe-punkt { background: var(--ok); }
.stufe-mittel  .stufe-punkt { background: var(--warn); }
.stufe-hoch    .stufe-punkt { background: var(--down); }
.stufe-erklaerung { color: var(--muted); font-size: .84rem; margin: 0 0 13px 20px; }

.liste { display: flex; flex-direction: column; gap: 9px; }
.tipp {
    display: grid; grid-template-columns: 52px minmax(0,1fr) auto;
    gap: 0 15px; align-items: center;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 13px 16px;
    box-shadow: var(--shadow-sm);
    transition: border-color .16s var(--ease), background .16s var(--ease);
}
.tipp:hover { background: var(--panel-hover); border-color: var(--border-strong); }
/* Jedes Feld bekommt Spalte UND Zeile ausdrücklich genannt. Bei
   automatischer Verteilung landete die rechte Spalte vor der mittleren,
   und die Karte las sich von rechts nach links. Derselbe Fehler wie im
   Mail-Portal — dort stand die Uhrzeit im Quelltext vor dem Betreff. */
.tipp-wahr {
    grid-column: 1; grid-row: 1 / span 2;
    font-family: var(--font-mono); font-size: 1.02rem;
    font-weight: 500; text-align: right; font-variant-numeric: tabular-nums;
}
.tipp-mitte { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.stufe-niedrig .tipp-wahr { color: var(--ok); }
.stufe-mittel  .tipp-wahr { color: var(--warn); }
.stufe-hoch    .tipp-wahr { color: var(--down); }
.tipp-wette { font-weight: 600; font-size: .95rem; }
.tipp-spiel { color: var(--muted); font-size: .84rem; margin-top: 2px; }
.tipp-rechts { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
.tipp-anbieter { font-size: .82rem; color: var(--paper); font-weight: 600; }
.tipp-anstoss { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.marke-preis {
    display: inline-block; margin-top: 4px; font-size: .68rem; font-weight: 700;
    letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; border: 1px solid;
}
.preis-gut     { color: var(--ok);   border-color: var(--ok);   background: rgba(52,199,123,.12); }
.preis-schlecht{ color: var(--warn); border-color: var(--warn); background: rgba(229,169,61,.12); }

/* ── Hinweiskasten ─────────────────────────────────────────────────── */
.hinweis-kasten {
    background: var(--panel); border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 26px;
}
.hinweis-kasten h2 { font-size: .96rem; margin-bottom: 7px; }
.hinweis-kasten p { margin: 0 0 8px; font-size: .855rem; color: var(--muted); line-height: 1.6; }
.hinweis-kasten p:last-child { margin-bottom: 0; }
.hinweis-kasten strong { color: var(--paper); }

.leer {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 54px 22px; text-align: center; color: var(--muted);
}
.fuss { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border);
        color: var(--muted-dim); font-size: .78rem; text-align: center; }

/* ── Uhrzeit noch nicht angesetzt ──────────────────────────────────── */
/* Wikipedia nennt bei frisch ausgelosten Runden oft nur den Tag. Statt
   eine Anstosszeit zu erfinden, steht der Tag und daneben dieser Hinweis. */
.zeit-offen {
    font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--warn);
    border: 1px solid rgba(229,169,61,.32); border-radius: 999px;
    padding: 1px 7px; background: rgba(229,169,61,.10);
}

/* ── Laufende Spiele ──────────────────────────────────────────────── */
/* Ein laufendes Spiel bleibt in der Liste und tritt NICHT zurück — es
   ist gerade das interessanteste. Abgepfiffene stehen gar nicht mehr
   da; `.spiel-vorbei` greift nur für die Sekunden zwischen Abfrage und
   Ausgabe, in denen die Grenze überschritten wird. */
.spiel-vorbei { opacity: .6; }
.spiel-lauf {
    font-size: .66rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-dim);
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.lauf-jetzt {
    color: var(--ok); border-color: rgba(52,199,123,.34);
    background: rgba(52,199,123,.10);
}
/* Ein laufendes Spiel pulsiert leicht — aber nur, wenn das jemand sehen
   will. `prefers-reduced-motion` schaltet es ab. */
@media (prefers-reduced-motion: no-preference) {
    .lauf-jetzt { animation: pochen 2.4s var(--ease) infinite; }
}
@keyframes pochen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,123,.30); }
    55%      { box-shadow: 0 0 0 5px rgba(52,199,123,0); }
}

/* ── Suchleiste ────────────────────────────────────────────────────── */
.suche {
    position: relative; display: flex; align-items: center;
    margin: 0 0 12px; min-width: 0;
}
.suche-lupe {
    position: absolute; left: 13px; color: var(--muted-dim);
    pointer-events: none; transition: color .18s var(--ease);
}
.suche:focus-within .suche-lupe { color: var(--accent); }
.suche-feld {
    flex: 1; min-width: 0; height: 40px;
    padding: 0 76px 0 36px;
    background: var(--panel); color: var(--paper);
    border: 1px solid var(--border); border-radius: var(--radius);
    font: 500 .88rem/1 var(--font-body);
    transition: border-color .18s var(--ease), background .18s var(--ease),
                box-shadow .18s var(--ease);
}
.suche-feld::placeholder { color: var(--muted-dim); font-weight: 400; }
.suche-feld:hover { border-color: var(--border-strong); }
.suche-feld:focus {
    outline: none; background: var(--panel-hover);
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Das eingebaute Kreuz von type=search doppelt unseren eigenen Knopf */
.suche-feld::-webkit-search-cancel-button { display: none; }

.suche-weg, .suche-los {
    position: absolute; right: 9px; display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0;
    background: var(--panel-hover); color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease);
}
.suche-weg:hover { color: var(--paper); border-color: var(--border-strong); }
.suche-los { width: auto; height: 28px; padding: 0 12px; border-radius: var(--radius-sm); }

/* Der Tastenhinweis verschwindet, sobald getippt wird — dann ist der
   Platz für den Leeren-Knopf da. */
.suche-taste {
    position: absolute; right: 11px;
    padding: 2px 7px; border-radius: 5px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border);
    font: 500 .7rem/1.4 var(--font-mono); color: var(--muted-dim);
    pointer-events: none;
}
.suche:focus-within .suche-taste { opacity: 0; }

.leiste h1.klein { font-size: 1.08rem; }
.nichts-gefunden {
    margin: 26px 0; text-align: center; font-size: .88rem; color: var(--muted);
}
.wie-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent); font: inherit; text-decoration: underline;
    text-underline-offset: 2px;
}
.wie-link:hover { color: var(--accent-hover); }

/* Die Tagesabschnitte dürfen die Liste nicht umbauen: .spielliste ist ein
   Flex-Stapel mit gap, und eine echte Box dazwischen würde die Abstände
   verdoppeln. `display: contents` lässt Überschrift und Karten direkt im
   Stapel liegen — überschreibt aber `hidden`, das muss zurück. */
.tag { display: contents; }
.tag[hidden] { display: none; }

/* ── Quellenseite ──────────────────────────────────────────────────── */
.quelle {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
    min-width: 0;
}
.quelle-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quelle-kopf h2 { font-size: .98rem; }
.quelle-wo {
    font-family: var(--font-mono); font-size: .72rem; color: var(--muted-dim);
}
.quelle-bedingung { margin: 6px 0 14px; font-size: .82rem; color: var(--muted); max-width: 66ch; }
.quelle-lage {
    margin: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Die Tabelle bekommt einen eigenen Rahmen mit Querlauf — sonst schiebt
   sie am Telefon die ganze Seite zur Seite. min-width:0 auf dem Kasten
   davor gehoert dazu, sonst wirkt overflow-x gar nicht. */
.quelle-tabelle-rahmen { overflow-x: auto; min-width: 0; margin: 0 -4px; padding: 0 4px; }
.quelle-tabelle {
    width: 100%; border-collapse: collapse; font-size: .82rem;
    font-variant-numeric: tabular-nums;
}
.quelle-tabelle th, .quelle-tabelle td {
    padding: 8px 10px 8px 0; text-align: left; vertical-align: baseline;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.quelle-tabelle thead th {
    font-size: .67rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-dim); border-bottom-color: var(--border-strong);
}
.quelle-tabelle tbody th { font-weight: 600; color: var(--paper); }
.quelle-tabelle .num { text-align: right; font-family: var(--font-mono); padding-right: 18px; }
.quelle-tabelle .zart { color: var(--muted); font-size: .78rem; }
.quelle-tabelle tr:last-child th, .quelle-tabelle tr:last-child td { border-bottom: none; }
.zeile-hinweis td {
    padding-top: 0; padding-bottom: 9px; white-space: normal;
    font-size: .76rem; color: var(--muted); max-width: 62ch;
}
.zeile-fehler td {
    padding-top: 0; padding-bottom: 9px; white-space: normal;
    font-family: var(--font-mono); font-size: .72rem; color: var(--down);
}

.pille {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    border: 1px solid transparent;
}
.pille-ok   { background: rgba(52,199,123,.13); color: var(--ok);   border-color: rgba(52,199,123,.30); }
.pille-warn { background: rgba(229,169,61,.12); color: var(--warn); border-color: rgba(229,169,61,.30); }
.pille-down { background: rgba(229,72,77,.13);  color: var(--down); border-color: rgba(229,72,77,.32); }
.wort-down { color: var(--down); }

/* ── Störungsmeldung über der Spielliste ───────────────────────────── */
.stoerung {
    display: flex; align-items: flex-start; gap: 11px;
    background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.28);
    border-radius: var(--radius); padding: 13px 15px; margin-bottom: 16px;
}
.stoerung svg { flex: none; color: var(--down); margin-top: 1px; }
.stoerung p { margin: 0; font-size: .83rem; color: var(--paper); }
.stoerung p + p { margin-top: 3px; color: var(--muted); }

@media (max-width: 620px) {
    .buehne { padding: 16px 13px 56px; }
    .tipp { grid-template-columns: 46px minmax(0,1fr); gap: 2px 12px; }
    .tipp-wahr   { grid-column: 1; grid-row: 1 / span 2; }
    .tipp-mitte  { grid-column: 2; grid-row: 1; }
    .tipp-rechts { grid-column: 2; grid-row: 2; text-align: left; margin-top: 6px; }
    .marke-text { display: none; }
}

/* ── Form und Historie ─────────────────────────────────────────────────
   Das Herzstück des Info-Portals: wie die beiden zuletzt gespielt haben
   und wie ihre direkten Begegnungen ausgingen. */
.tipp-form {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-top: 7px; font-size: .74rem;
}
.form { display: inline-flex; gap: 2px; }
.form i {
    font-style: normal; width: 15px; height: 15px; border-radius: 4px;
    display: grid; place-items: center;
    font-size: .6rem; font-weight: 700; font-family: var(--font-mono);
}
.form-sieg       { background: rgba(52,199,123,.20);  color: var(--ok); }
.form-remis      { background: rgba(255,255,255,.07); color: var(--muted); }
.form-niederlage { background: rgba(229,72,77,.18);   color: var(--down); }
.form-tore { font-family: var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.form-gegen { color: var(--muted-dim); padding: 0 2px; }

.tipp-duelle {
    margin-top: 6px; font-size: .72rem; color: var(--muted);
    font-family: var(--font-mono); line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Uhrzeit noch nicht angesetzt ──────────────────────────────────── */
/* Wikipedia nennt bei frisch ausgelosten Runden oft nur den Tag. Statt
   eine Anstosszeit zu erfinden, steht der Tag und daneben dieser Hinweis. */
.zeit-offen {
    font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--warn);
    border: 1px solid rgba(229,169,61,.32); border-radius: 999px;
    padding: 1px 7px; background: rgba(229,169,61,.10);
}

/* ── Laufende Spiele ──────────────────────────────────────────────── */
/* Ein laufendes Spiel bleibt in der Liste und tritt NICHT zurück — es
   ist gerade das interessanteste. Abgepfiffene stehen gar nicht mehr
   da; `.spiel-vorbei` greift nur für die Sekunden zwischen Abfrage und
   Ausgabe, in denen die Grenze überschritten wird. */
.spiel-vorbei { opacity: .6; }
.spiel-lauf {
    font-size: .66rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-dim);
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.lauf-jetzt {
    color: var(--ok); border-color: rgba(52,199,123,.34);
    background: rgba(52,199,123,.10);
}
/* Ein laufendes Spiel pulsiert leicht — aber nur, wenn das jemand sehen
   will. `prefers-reduced-motion` schaltet es ab. */
@media (prefers-reduced-motion: no-preference) {
    .lauf-jetzt { animation: pochen 2.4s var(--ease) infinite; }
}
@keyframes pochen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,123,.30); }
    55%      { box-shadow: 0 0 0 5px rgba(52,199,123,0); }
}

/* ── Suchleiste ────────────────────────────────────────────────────── */
.suche {
    position: relative; display: flex; align-items: center;
    margin: 0 0 12px; min-width: 0;
}
.suche-lupe {
    position: absolute; left: 13px; color: var(--muted-dim);
    pointer-events: none; transition: color .18s var(--ease);
}
.suche:focus-within .suche-lupe { color: var(--accent); }
.suche-feld {
    flex: 1; min-width: 0; height: 40px;
    padding: 0 76px 0 36px;
    background: var(--panel); color: var(--paper);
    border: 1px solid var(--border); border-radius: var(--radius);
    font: 500 .88rem/1 var(--font-body);
    transition: border-color .18s var(--ease), background .18s var(--ease),
                box-shadow .18s var(--ease);
}
.suche-feld::placeholder { color: var(--muted-dim); font-weight: 400; }
.suche-feld:hover { border-color: var(--border-strong); }
.suche-feld:focus {
    outline: none; background: var(--panel-hover);
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Das eingebaute Kreuz von type=search doppelt unseren eigenen Knopf */
.suche-feld::-webkit-search-cancel-button { display: none; }

.suche-weg, .suche-los {
    position: absolute; right: 9px; display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0;
    background: var(--panel-hover); color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease);
}
.suche-weg:hover { color: var(--paper); border-color: var(--border-strong); }
.suche-los { width: auto; height: 28px; padding: 0 12px; border-radius: var(--radius-sm); }

/* Der Tastenhinweis verschwindet, sobald getippt wird — dann ist der
   Platz für den Leeren-Knopf da. */
.suche-taste {
    position: absolute; right: 11px;
    padding: 2px 7px; border-radius: 5px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border);
    font: 500 .7rem/1.4 var(--font-mono); color: var(--muted-dim);
    pointer-events: none;
}
.suche:focus-within .suche-taste { opacity: 0; }

.leiste h1.klein { font-size: 1.08rem; }
.nichts-gefunden {
    margin: 26px 0; text-align: center; font-size: .88rem; color: var(--muted);
}
.wie-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent); font: inherit; text-decoration: underline;
    text-underline-offset: 2px;
}
.wie-link:hover { color: var(--accent-hover); }

/* Die Tagesabschnitte dürfen die Liste nicht umbauen: .spielliste ist ein
   Flex-Stapel mit gap, und eine echte Box dazwischen würde die Abstände
   verdoppeln. `display: contents` lässt Überschrift und Karten direkt im
   Stapel liegen — überschreibt aber `hidden`, das muss zurück. */
.tag { display: contents; }
.tag[hidden] { display: none; }

/* ── Quellenseite ──────────────────────────────────────────────────── */
.quelle {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
    min-width: 0;
}
.quelle-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quelle-kopf h2 { font-size: .98rem; }
.quelle-wo {
    font-family: var(--font-mono); font-size: .72rem; color: var(--muted-dim);
}
.quelle-bedingung { margin: 6px 0 14px; font-size: .82rem; color: var(--muted); max-width: 66ch; }
.quelle-lage {
    margin: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Die Tabelle bekommt einen eigenen Rahmen mit Querlauf — sonst schiebt
   sie am Telefon die ganze Seite zur Seite. min-width:0 auf dem Kasten
   davor gehoert dazu, sonst wirkt overflow-x gar nicht. */
.quelle-tabelle-rahmen { overflow-x: auto; min-width: 0; margin: 0 -4px; padding: 0 4px; }
.quelle-tabelle {
    width: 100%; border-collapse: collapse; font-size: .82rem;
    font-variant-numeric: tabular-nums;
}
.quelle-tabelle th, .quelle-tabelle td {
    padding: 8px 10px 8px 0; text-align: left; vertical-align: baseline;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.quelle-tabelle thead th {
    font-size: .67rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-dim); border-bottom-color: var(--border-strong);
}
.quelle-tabelle tbody th { font-weight: 600; color: var(--paper); }
.quelle-tabelle .num { text-align: right; font-family: var(--font-mono); padding-right: 18px; }
.quelle-tabelle .zart { color: var(--muted); font-size: .78rem; }
.quelle-tabelle tr:last-child th, .quelle-tabelle tr:last-child td { border-bottom: none; }
.zeile-hinweis td {
    padding-top: 0; padding-bottom: 9px; white-space: normal;
    font-size: .76rem; color: var(--muted); max-width: 62ch;
}
.zeile-fehler td {
    padding-top: 0; padding-bottom: 9px; white-space: normal;
    font-family: var(--font-mono); font-size: .72rem; color: var(--down);
}

.pille {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    border: 1px solid transparent;
}
.pille-ok   { background: rgba(52,199,123,.13); color: var(--ok);   border-color: rgba(52,199,123,.30); }
.pille-warn { background: rgba(229,169,61,.12); color: var(--warn); border-color: rgba(229,169,61,.30); }
.pille-down { background: rgba(229,72,77,.13);  color: var(--down); border-color: rgba(229,72,77,.32); }
.wort-down { color: var(--down); }

/* ── Störungsmeldung über der Spielliste ───────────────────────────── */
.stoerung {
    display: flex; align-items: flex-start; gap: 11px;
    background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.28);
    border-radius: var(--radius); padding: 13px 15px; margin-bottom: 16px;
}
.stoerung svg { flex: none; color: var(--down); margin-top: 1px; }
.stoerung p { margin: 0; font-size: .83rem; color: var(--paper); }
.stoerung p + p { margin-top: 3px; color: var(--muted); }

@media (max-width: 620px) {
    .tipp-duelle { white-space: normal; }
}


/* ── Spielkarten ───────────────────────────────────────────────────────
   Eine Karte je Spiel, nicht eine Zeile je Einschätzung: bei 57 Spielen
   und 322 Einschätzungen wäre eine flache Liste eine Wand aus Zahlen. */
.filter { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 22px; }
.filter-knopf {
    padding: 6px 13px; border-radius: 999px; font-size: .82rem; font-weight: 500;
    text-decoration: none; color: var(--muted);
    background: var(--panel); border: 1px solid var(--border);
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.filter-knopf:hover { background: var(--panel-hover); color: var(--paper); }
.filter-knopf.an { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent-border); }

.tagtitel {
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin: 26px 0 11px;
}
.tagtitel:first-child { margin-top: 0; }
.spielliste { display: flex; flex-direction: column; gap: 11px; }

.spiel {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow-sm);
    transition: border-color .16s var(--ease);
}
.spiel:hover { border-color: var(--border-strong); }
.spiel-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.spiel-zeit {
    font-family: var(--font-mono); font-size: .82rem; color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.spiel-wettbewerb { font-size: .76rem; color: var(--muted); }

.spiel-paarung { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.seite { min-width: 0; }
.seite-rechts { text-align: right; }
.seite-name {
    font-weight: 600; font-size: .96rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seite-form { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.seite-rechts .seite-form { justify-content: flex-end; }
.gegen { color: var(--muted-dim); font-size: .9rem; }

.form { display: inline-flex; gap: 2px; }
.form i {
    font-style: normal; width: 16px; height: 16px; border-radius: 4px;
    display: grid; place-items: center;
    font-size: .62rem; font-weight: 700; font-family: var(--font-mono);
}
.form-sieg       { background: rgba(52,199,123,.20);  color: var(--ok); }
.form-remis      { background: rgba(255,255,255,.07); color: var(--muted); }
.form-niederlage { background: rgba(229,72,77,.18);   color: var(--down); }
.form-tore { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.form-leer { font-size: .74rem; color: var(--muted-dim); }

/* Die Waage: drei Anteile, die zusammen die ganze Breite ergeben. */
.waage { display: flex; height: 7px; border-radius: 999px; overflow: hidden; margin: 15px 0 7px; }
.waage span { display: block; }
.waage-h { background: var(--accent); }
.waage-u { background: rgba(255,255,255,.16); }
.waage-a { background: #7C6BF0; }
.waage-zahlen { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; }
.waage-zahlen span { display: flex; flex-direction: column; font-family: var(--font-mono);
                     font-variant-numeric: tabular-nums; }
.waage-zahlen small { font-family: var(--font-body); font-size: .68rem; color: var(--muted); margin-top: 1px; }
.waage-zahlen .z-u { text-align: center; }
.waage-zahlen .z-a { text-align: right; }
.z-h { color: var(--accent); } .z-u { color: var(--muted); } .z-a { color: #9A8CF5; }

.weitere { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.marke-stufe {
    font-size: .72rem; padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--ink-raised); color: var(--muted);
}
.marke-stufe b { color: var(--paper); font-weight: 600; }
.marke-stufe.stufe-niedrig { border-color: rgba(52,199,123,.35); }
.marke-stufe.stufe-niedrig b { color: var(--ok); }

.ohne-einschaetzung { margin: 13px 0 0; font-size: .78rem; color: var(--muted); }

/* Eine Karte ohne Zahlen trägt weniger und soll auch weniger wiegen —
   sonst sieht eine Pokalrunde aus fünftklassigen Vereinen genauso
   gewichtig aus wie ein Spitzenspiel. */
.spiel-ohne { padding: 12px 15px; background: transparent; }
.spiel-ohne .seite-name { font-size: .9rem; color: var(--muted); font-weight: 600; }
.spiel-ohne .spiel-zeit { color: var(--muted-dim); }
.spiel-ohne .form-leer { display: none; }

.duelle {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: .71rem; color: var(--muted); line-height: 1.6;
}
/* „Zuletzt gespielt": je Mannschaft eine Zeile. Der Name steht in einer
   eigenen Spalte, damit die Ergebnisse untereinander bündig anfangen —
   sonst fängt jede Zeile woanders an und man vergleicht nichts mehr.
   min-width:0 muss sein, sonst schiebt die längere Zeile die Karte auf. */
.reihe {
    display: grid; grid-template-columns: minmax(0, 16ch) minmax(0, 1fr);
    gap: 12px; align-items: baseline; min-width: 0;
}
.reihe + .reihe { margin-top: 5px; }
/* Der Name wird UMGEBROCHEN, nicht gekürzt: „FC Bayern …" hilft
   niemandem, und in der Zeile daneben steht ohnehin genug Platz. */
.reihe-wer {
    font-family: var(--font-body); font-size: .7rem; font-weight: 600;
    color: var(--paper); line-height: 1.35;
}

.duelle-titel {
    display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 4px;
}

/* ── Uhrzeit noch nicht angesetzt ──────────────────────────────────── */
/* Wikipedia nennt bei frisch ausgelosten Runden oft nur den Tag. Statt
   eine Anstosszeit zu erfinden, steht der Tag und daneben dieser Hinweis. */
.zeit-offen {
    font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--warn);
    border: 1px solid rgba(229,169,61,.32); border-radius: 999px;
    padding: 1px 7px; background: rgba(229,169,61,.10);
}

/* ── Laufende Spiele ──────────────────────────────────────────────── */
/* Ein laufendes Spiel bleibt in der Liste und tritt NICHT zurück — es
   ist gerade das interessanteste. Abgepfiffene stehen gar nicht mehr
   da; `.spiel-vorbei` greift nur für die Sekunden zwischen Abfrage und
   Ausgabe, in denen die Grenze überschritten wird. */
.spiel-vorbei { opacity: .6; }
.spiel-lauf {
    font-size: .66rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-dim);
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.lauf-jetzt {
    color: var(--ok); border-color: rgba(52,199,123,.34);
    background: rgba(52,199,123,.10);
}
/* Ein laufendes Spiel pulsiert leicht — aber nur, wenn das jemand sehen
   will. `prefers-reduced-motion` schaltet es ab. */
@media (prefers-reduced-motion: no-preference) {
    .lauf-jetzt { animation: pochen 2.4s var(--ease) infinite; }
}
@keyframes pochen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,123,.30); }
    55%      { box-shadow: 0 0 0 5px rgba(52,199,123,0); }
}

/* ── Suchleiste ────────────────────────────────────────────────────── */
.suche {
    position: relative; display: flex; align-items: center;
    margin: 0 0 12px; min-width: 0;
}
.suche-lupe {
    position: absolute; left: 13px; color: var(--muted-dim);
    pointer-events: none; transition: color .18s var(--ease);
}
.suche:focus-within .suche-lupe { color: var(--accent); }
.suche-feld {
    flex: 1; min-width: 0; height: 40px;
    padding: 0 76px 0 36px;
    background: var(--panel); color: var(--paper);
    border: 1px solid var(--border); border-radius: var(--radius);
    font: 500 .88rem/1 var(--font-body);
    transition: border-color .18s var(--ease), background .18s var(--ease),
                box-shadow .18s var(--ease);
}
.suche-feld::placeholder { color: var(--muted-dim); font-weight: 400; }
.suche-feld:hover { border-color: var(--border-strong); }
.suche-feld:focus {
    outline: none; background: var(--panel-hover);
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Das eingebaute Kreuz von type=search doppelt unseren eigenen Knopf */
.suche-feld::-webkit-search-cancel-button { display: none; }

.suche-weg, .suche-los {
    position: absolute; right: 9px; display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0;
    background: var(--panel-hover); color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease);
}
.suche-weg:hover { color: var(--paper); border-color: var(--border-strong); }
.suche-los { width: auto; height: 28px; padding: 0 12px; border-radius: var(--radius-sm); }

/* Der Tastenhinweis verschwindet, sobald getippt wird — dann ist der
   Platz für den Leeren-Knopf da. */
.suche-taste {
    position: absolute; right: 11px;
    padding: 2px 7px; border-radius: 5px;
    background: rgba(255,255,255,.05); border: 1px solid var(--border);
    font: 500 .7rem/1.4 var(--font-mono); color: var(--muted-dim);
    pointer-events: none;
}
.suche:focus-within .suche-taste { opacity: 0; }

.leiste h1.klein { font-size: 1.08rem; }
.nichts-gefunden {
    margin: 26px 0; text-align: center; font-size: .88rem; color: var(--muted);
}
.wie-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent); font: inherit; text-decoration: underline;
    text-underline-offset: 2px;
}
.wie-link:hover { color: var(--accent-hover); }

/* Die Tagesabschnitte dürfen die Liste nicht umbauen: .spielliste ist ein
   Flex-Stapel mit gap, und eine echte Box dazwischen würde die Abstände
   verdoppeln. `display: contents` lässt Überschrift und Karten direkt im
   Stapel liegen — überschreibt aber `hidden`, das muss zurück. */
.tag { display: contents; }
.tag[hidden] { display: none; }

/* ── Quellenseite ──────────────────────────────────────────────────── */
.quelle {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
    min-width: 0;
}
.quelle-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quelle-kopf h2 { font-size: .98rem; }
.quelle-wo {
    font-family: var(--font-mono); font-size: .72rem; color: var(--muted-dim);
}
.quelle-bedingung { margin: 6px 0 14px; font-size: .82rem; color: var(--muted); max-width: 66ch; }
.quelle-lage {
    margin: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Die Tabelle bekommt einen eigenen Rahmen mit Querlauf — sonst schiebt
   sie am Telefon die ganze Seite zur Seite. min-width:0 auf dem Kasten
   davor gehoert dazu, sonst wirkt overflow-x gar nicht. */
.quelle-tabelle-rahmen { overflow-x: auto; min-width: 0; margin: 0 -4px; padding: 0 4px; }
.quelle-tabelle {
    width: 100%; border-collapse: collapse; font-size: .82rem;
    font-variant-numeric: tabular-nums;
}
.quelle-tabelle th, .quelle-tabelle td {
    padding: 8px 10px 8px 0; text-align: left; vertical-align: baseline;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.quelle-tabelle thead th {
    font-size: .67rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-dim); border-bottom-color: var(--border-strong);
}
.quelle-tabelle tbody th { font-weight: 600; color: var(--paper); }
.quelle-tabelle .num { text-align: right; font-family: var(--font-mono); padding-right: 18px; }
.quelle-tabelle .zart { color: var(--muted); font-size: .78rem; }
.quelle-tabelle tr:last-child th, .quelle-tabelle tr:last-child td { border-bottom: none; }
.zeile-hinweis td {
    padding-top: 0; padding-bottom: 9px; white-space: normal;
    font-size: .76rem; color: var(--muted); max-width: 62ch;
}
.zeile-fehler td {
    padding-top: 0; padding-bottom: 9px; white-space: normal;
    font-family: var(--font-mono); font-size: .72rem; color: var(--down);
}

.pille {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    border: 1px solid transparent;
}
.pille-ok   { background: rgba(52,199,123,.13); color: var(--ok);   border-color: rgba(52,199,123,.30); }
.pille-warn { background: rgba(229,169,61,.12); color: var(--warn); border-color: rgba(229,169,61,.30); }
.pille-down { background: rgba(229,72,77,.13);  color: var(--down); border-color: rgba(229,72,77,.32); }
.wort-down { color: var(--down); }

/* ── Störungsmeldung über der Spielliste ───────────────────────────── */
.stoerung {
    display: flex; align-items: flex-start; gap: 11px;
    background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.28);
    border-radius: var(--radius); padding: 13px 15px; margin-bottom: 16px;
}
.stoerung svg { flex: none; color: var(--down); margin-top: 1px; }
.stoerung p { margin: 0; font-size: .83rem; color: var(--paper); }
.stoerung p + p { margin-top: 3px; color: var(--muted); }

@media (max-width: 620px) {
    .spiel-paarung { grid-template-columns: 1fr; gap: 8px; }
    .seite-rechts { text-align: left; }
    .seite-rechts .seite-form { justify-content: flex-start; }
    .gegen { display: none; }
    .waage-zahlen { font-size: .7rem; }
    /* Am Telefon ist für zwei Spalten kein Platz — der Name steht dann
       über dem Ergebnis statt daneben. */
    .reihe { grid-template-columns: minmax(0, 1fr); gap: 1px; }
    .reihe + .reihe { margin-top: 7px; }
    .quelle { padding: 14px; }
    .suche-feld { font-size: 16px; }   /* darunter zoomt iOS beim Antippen */
    .quelle-tabelle { font-size: .78rem; }
}