/* TippChamp — Stil. Dunkel als Standard, hell nach Systemwunsch.
   Vorgabe: design/TIPPCHAMP-DESIGN-SYSTEM.md (02.09.2026). Ein Akzent (Gruen),
   Gold nur fuer gekippte Tipps, Barlow Condensed fuer Zahlen und Titel, Manrope
   fuer Text. Schriften liegen selbst hier (schriften/), kein Abruf bei Google. */

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url(/schriften/BarlowCondensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;
  src:url(/schriften/BarlowCondensed-800.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/schriften/Manrope-variabel.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --grund:#0f1318; --flaeche:#171b21; --flaeche2:#1e232b; --rand:#2b323c;
  --glas:rgba(255,255,255,.06); --glas-rand:rgba(255,255,255,.10); --glas-zart:rgba(255,255,255,.04);
  --text:#e9edf2; --hell:#ffffff; --gedaempft:#9aa4b2; --leise:#6b7480;
  --akzent:#48b48c; --akzent-text:#08110d; --akzent-hell:rgba(72,180,140,.14); --marke:#116149;
  --stufe-1:rgba(72,180,140,.16); --stufe-2:rgba(72,180,140,.34); --stufe-3:rgba(72,180,140,.50);
  --balken-remis:#2b323c; --balken-anders:#6b7480;
  --gold:#e0b25f; --gold-flaeche:rgba(224,178,95,.12); --gold-rand:rgba(224,178,95,.45); --gold-text:#d9c7a0;
  --fehler:#f08a8a; --fehler-flaeche:rgba(240,138,138,.10);
  --schatten:0 12px 32px rgba(0,0,0,.35); --schatten-knopf:0 10px 24px rgba(72,180,140,.30);
  --glow:rgba(17,97,73,.55);
  --radius:20px; --radius-klein:12px; --radius-knopf:16px;
  --cond:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --grund:#f6f7f9; --flaeche:#ffffff; --flaeche2:#eceef2; --rand:#dfe3e9;
    --glas:#ffffff; --glas-rand:#dfe3e9; --glas-zart:#ffffff;
    --text:#15181d; --hell:#15181d; --gedaempft:#5c6572; --leise:#6b7480;
    --akzent:#116149; --akzent-text:#ffffff; --akzent-hell:#e6f2ee; --marke:#116149;
    --stufe-1:rgba(17,97,73,.16); --stufe-2:rgba(17,97,73,.34); --stufe-3:rgba(17,97,73,.50);
    --balken-remis:#c9d0d8; --balken-anders:#8a94a3;
    --gold:#8a5a00; --gold-flaeche:#fff6e3; --gold-rand:#e0b25f; --gold-text:#6b4a0a;
    --fehler:#a02222; --fehler-flaeche:#fdecec;
    --schatten:0 1px 2px rgba(16,20,26,.06),0 8px 24px rgba(16,20,26,.06); --schatten-knopf:0 10px 24px rgba(17,97,73,.28);
    --glow:rgba(17,97,73,.16);
  }
}

/* ============================================================ Grundgeruest */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Doppeltipp auf Knoepfe und Tipps darf nicht zoomen - das Video vom 09.09.2026
   zeigt genau das: Kopf auf der Statusleiste, Seite seitlich verschoben. Im
   Browser bleibt Pinch-Zoom erlaubt (Barrierefreiheit), in der Huelle nicht:
   dort ist die Seite eine App, und pan-y laesst nur senkrechtes Wischen zu. */
button,.tab,.tippzeile,.kopf{touch-action:manipulation}
body.in-app{touch-action:pan-y}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--sans);font-size:17px;
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(640px 420px at 8% -8%,var(--glow),transparent 70%)}
.huelle{max-width:600px;margin:0 auto;padding:0 16px}
.huelle.breit{max-width:900px}
.huelle.schmal{max-width:720px}
h1,h2,h3{line-height:1.15;margin:0 0 .4em}
h1{font-family:var(--cond);font-weight:800;font-size:clamp(2rem,7vw,2.6rem);letter-spacing:.005em}
h2{font-family:var(--cond);font-weight:700;font-size:clamp(1.5rem,4.5vw,1.9rem);letter-spacing:.005em}
h3{font-size:1rem;font-weight:700}
p{margin:0 0 1em}
a{color:var(--akzent)}
em{font-style:italic}
.klein{font-size:.85rem;line-height:1.5}
.grau{color:var(--gedaempft)}
.label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent)}
.zahl{font-family:var(--cond);font-weight:800;line-height:1}
[hidden]{display:none!important}
svg{flex:none}

/* ================================================================== Kopf */
/* Der Kopf klebt oben - und rutscht auf dem iPhone unter Statusleiste und
   Dynamic Island, wenn er den Sicherheitsrand nicht selbst freihaelt. */
.kopf{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top);background:color-mix(in srgb,var(--grund) 86%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--glas-rand)}
.kopf-inhalt{display:flex;align-items:center;justify-content:space-between;gap:10px;height:60px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--hell);
  font-family:var(--cond);font-weight:700;font-size:1.45rem;letter-spacing:.01em}
.marke-kachel{width:34px;height:34px;border-radius:10px;background:var(--marke);display:flex;
  align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(17,97,73,.45)}
.kopf-nav{display:flex;gap:16px}
.kopf-nav a{color:var(--gedaempft);text-decoration:none;font-size:.85rem;font-weight:600}
.kopf-nav a:hover{color:var(--text)}
.marke{flex:none}
.runde-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;padding:7px 11px;border-radius:99px;
  background:var(--glas);border:1px solid var(--glas-rand);font-size:.78rem;font-weight:600;color:var(--gedaempft)}
.runde-chip svg{flex:none}
.runde-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ======================================================== Erster Start */
.start{padding:26px 0 24px;text-align:center}
.start-logo{width:76px;height:76px;border-radius:22px;background:var(--marke);margin:0 auto 12px;display:flex;
  align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(17,97,73,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.start .wortmarke{font-family:var(--cond);font-weight:700;font-size:1.6rem;color:var(--hell);margin-bottom:18px}
.start h1{color:var(--hell);margin-bottom:.35em}
.start .unter{max-width:34rem;margin:0 auto 18px;font-size:.95rem;color:var(--gedaempft)}
.start .unter strong{color:var(--hell)}
.belege{display:flex;flex-direction:column;gap:8px;text-align:left;margin:0 0 16px}
.beleg{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--radius-knopf);
  background:var(--glas);border:1px solid var(--glas-rand);backdrop-filter:blur(14px)}
.beleg-icon{width:38px;height:38px;border-radius:11px;background:var(--akzent-hell);display:flex;
  align-items:center;justify-content:center;flex:none}
.beleg b{display:block;font-size:.92rem;color:var(--hell)}
.beleg span{font-size:.8rem;color:var(--gedaempft)}
.einstiege{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.einstieg{margin-top:12px;text-align:left;scroll-margin-top:84px}
.vertrauen-zeile{font-size:.8rem;color:var(--gedaempft);margin:8px 0 0}
body.mit-plan .start{display:none}

/* ================================================================ Karten */
.karte{background:var(--glas);border:1px solid var(--glas-rand);border-radius:var(--radius);padding:16px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--schatten)}
.karte-kopf h2{font-size:1.35rem;margin-bottom:.15em}
.karte-kopf .klein{color:var(--gedaempft);margin-bottom:.9em}
.kasten{border:1px solid var(--glas-rand);background:var(--glas-zart);border-radius:var(--radius-klein);
  padding:12px 14px;margin-top:12px;font-size:.9rem}
.kasten.warn{border-color:var(--gold-rand);background:var(--gold-flaeche);color:var(--gold-text)}
.kasten.warn h3,.kasten.warn strong{color:var(--hell)}
.kasten h3{font-size:.92rem;margin-bottom:.3em}
.kasten ul{margin:.4em 0 0;padding-left:1.2em}
.kasten p{margin:0}
.info-karte{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-knopf);
  background:rgba(17,97,73,.18);border:1px solid rgba(72,180,140,.25);font-size:.82rem;line-height:1.5;color:var(--gedaempft);margin-top:12px}
.info-karte b{color:var(--hell)}
@media (prefers-color-scheme:light){.info-karte{background:#e6f2ee;border-color:#bfe0d1;color:#3a5a4c}.info-karte b{color:#116149}}

/* ================================================================ Knoepfe */
.knopf{font-family:inherit;font-size:.95rem;font-weight:800;border:1px solid var(--akzent);background:var(--akzent);
  color:var(--akzent-text);border-radius:var(--radius-knopf);padding:0 18px;min-height:50px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--schatten-knopf);
  text-decoration:none;transition:transform .08s ease,filter .12s ease}
.knopf:hover{filter:brightness(1.06)}
.knopf:active{transform:translateY(1px)}
.knopf:disabled{opacity:.5;cursor:default;box-shadow:none}
.knopf.gross{width:100%;min-height:52px;font-size:1rem}
.knopf.sekundaer,.knopf.leise{background:transparent;color:var(--text);border-color:var(--glas-rand);box-shadow:none;font-weight:700}
.knopf.sekundaer:hover,.knopf.leise:hover{border-color:var(--akzent);color:var(--akzent);filter:none}
.knopf.symbol{width:50px;min-width:50px;padding:0;background:var(--glas);border-color:var(--glas-rand);color:var(--text);box-shadow:none}
.knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.chip{font-size:.8rem;font-weight:600;border:1px solid var(--glas-rand);background:var(--glas);color:var(--text);
  border-radius:99px;padding:7px 12px;cursor:pointer;font-family:inherit;min-height:34px}
.chip:hover{border-color:var(--akzent);color:var(--akzent)}
.chip.gold{background:var(--gold-flaeche);border-color:var(--gold-rand);color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ============================================================ Regelform */
.voreinstellungen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.regeltabelle{width:100%;border-collapse:collapse;margin-bottom:10px}
.regeltabelle th,.regeltabelle td{padding:5px 4px;text-align:center}
.regeltabelle thead th{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gedaempft);font-weight:700}
.zeilenkopf{text-align:left!important;font-weight:700;font-size:.9rem;white-space:nowrap}
.regeltabelle input{width:100%;max-width:74px;padding:10px 6px;text-align:center;font-size:1.05rem;font-weight:700;
  font-family:var(--cond);border:1px solid var(--glas-rand);border-radius:10px;background:var(--flaeche2);color:var(--text);min-height:44px}
.regeltabelle input:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
.leer .strich{color:var(--gedaempft);cursor:help;border-bottom:1px dotted var(--gedaempft)}
.haken{display:flex;gap:9px;align-items:flex-start;margin:8px 0;cursor:pointer;font-size:.9rem}
.haken input{margin-top:4px;accent-color:var(--akzent);flex:none;width:18px;height:18px}
.verbote{border:1px solid var(--glas-rand);border-radius:var(--radius-klein);padding:12px 14px;margin:14px 0 16px}
.verbote legend{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--akzent);font-weight:700;padding:0 6px}
.verbote .klein{margin:6px 0 0}
.import-feld label{display:block;margin-bottom:6px;color:var(--gedaempft)}
.feldzeile{display:flex;align-items:center;border:1px solid var(--glas-rand);border-radius:var(--radius-klein);
  background:var(--flaeche2);margin-bottom:10px;min-height:48px}
.feldzeile:focus-within{outline:2px solid var(--akzent);outline-offset:1px}
.praefix{padding:0 2px 0 12px;color:var(--gedaempft);font-size:.9rem;font-family:var(--mono);white-space:nowrap}
.feldzeile input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);padding:11px 11px 11px 2px;font-size:1rem;font-family:var(--mono)}
.feldzeile input:focus{outline:none}
.import-ergebnis{margin-top:14px;border:1px solid var(--glas-rand);border-radius:var(--radius-klein);padding:12px 14px;font-size:.9rem;background:var(--glas-zart)}
.import-ergebnis dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0 0}
.import-ergebnis dt{color:var(--gedaempft)}
.import-ergebnis dd{margin:0}
.hinweis-kasten{margin-top:14px;border-radius:var(--radius-klein);background:var(--akzent-hell);padding:11px 13px;font-size:.85rem;color:var(--gedaempft)}
.hinweis-kasten strong{color:var(--text)}
.lade{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gedaempft);font-size:.92rem}
.lade[hidden]{display:none}
.ring{width:18px;height:18px;border-radius:50%;border:2px solid var(--glas-rand);border-top-color:var(--akzent);animation:dreh .8s linear infinite;flex:none}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ring{animation:none;border-color:var(--akzent)}}
.fehler{margin-top:20px;border:1px solid color-mix(in srgb,var(--fehler) 45%,var(--rand));background:var(--fehler-flaeche);
  color:var(--fehler);border-radius:var(--radius-klein);padding:12px 14px;font-size:.9rem;scroll-margin-top:84px}
.fehler .knopf{display:flex;margin-top:10px;min-height:44px}

/* ====================================================== Ergebnis: Tippen */
.ergebnis{margin-top:14px}
.spieltag-karte{display:flex;flex-direction:column;gap:12px;margin-top:10px}
/* Kopf der Spieltag-Karte: Label und Stand-Zeile ueber die volle Breite,
   dazwischen Anpfiff links und die Punkte-Kachel rechts. So bricht auf dem
   Telefon nichts neben der Kachel um. */
.st-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "titel kachel" "stand stand";
  align-items:center;column-gap:12px;row-gap:2px}
.st-label{grid-area:label}
.st-titel{grid-area:titel;font-family:var(--cond);font-weight:700;font-size:clamp(1.4rem,5.5vw,1.75rem);line-height:1;color:var(--hell);margin:3px 0}
.st-stand{grid-area:stand;font-size:.78rem;color:var(--gedaempft);margin-top:4px}
.st-kachel{grid-area:kachel;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 12px;border-radius:14px;
  background:rgba(17,97,73,.35);border:1px solid rgba(72,180,140,.35);flex:none}
@media (prefers-color-scheme:light){.st-kachel{background:#116149;border-color:#116149}}
.st-kachel .zahl{font-size:2.1rem;color:#fff}
.st-kachel .label{font-size:.62rem;letter-spacing:.08em;color:#8fd8b8}
@media (prefers-color-scheme:light){.st-kachel .label{color:#cfe9de}}
@media (max-width:440px){.st-kachel{padding:7px 10px}.st-kachel .zahl{font-size:1.9rem}
  .st-kachel .label{max-width:7.6em;text-align:right;line-height:1.2;letter-spacing:.06em}}
.sv-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--glas-rand)}
.sv-zeile .schalter-text{font-size:.85rem;font-weight:600}
.sv-zeile .klein{margin:0;font-size:.78rem}
.sv-schalter{display:flex;flex-direction:column;gap:4px;width:100%}
.schalter{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;justify-content:space-between}
.schalter input{position:absolute;opacity:0;width:0;height:0}
.gleis{flex:none;width:44px;height:26px;border-radius:14px;background:var(--flaeche2);border:1px solid var(--glas-rand);position:relative;transition:background .15s}
.knauf{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--gedaempft);transition:left .15s,background .15s}
.schalter input:checked+.gleis{background:var(--akzent);border-color:var(--akzent)}
.schalter input:checked+.gleis .knauf{left:21px;background:var(--grund)}
.schalter input:focus-visible+.gleis{outline:2px solid var(--akzent);outline-offset:2px}
.warnton{color:var(--gold)}

.tippliste{margin-top:12px;border-radius:var(--radius);background:var(--glas-zart);border:1px solid var(--glas-rand);overflow:hidden}
.tippzeile{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;padding:10px 14px;border-bottom:1px solid var(--glas-rand);min-height:56px}
.tippzeile:last-child{border-bottom:0}
.tz-zeit{font-size:.68rem;font-weight:600;color:var(--gedaempft)}
.tz-team{font-size:.92rem;font-weight:600;color:var(--gedaempft);line-height:1.25}
.tz-team.favorit{font-weight:800;color:var(--hell)}
.tz-rechts{text-align:right}
.tz-mitte{display:flex;flex-direction:column;align-items:center;gap:3px;justify-self:center}
.tz-hinweis{font-size:.66rem;font-weight:700;color:var(--gold);white-space:nowrap}
.tz-hinweis.leise{color:var(--gedaempft);font-weight:600}
.pille{min-width:74px;text-align:center;padding:5px 12px;border-radius:var(--radius-klein);background:var(--glas);
  border:1px solid var(--glas-rand);font-family:var(--cond);font-weight:800;font-size:1.5rem;line-height:1;color:var(--hell);letter-spacing:.04em}
@media (prefers-color-scheme:light){.pille{background:#eceef2;border-color:#dfe3e9}}
.pille.gold{background:var(--gold-flaeche);border-color:var(--gold-rand)}
.pille.leer{color:var(--gedaempft);font-weight:700}
.tippzeile.ohnequote .tz-team{color:var(--gedaempft)}

/* ---------------------------------------------------------------- Pro */
/* Verborgener Tipp: ein Schloss in der Pille, die Zeile sonst wie immer. */
.pille.schloss{display:inline-flex;align-items:center;justify-content:center;color:var(--gedaempft);min-height:36px}
.ak-tipp .pille.schloss{min-width:52px;padding:5px 10px;min-height:30px}
.tippliste.gesperrt .tz-team{color:var(--gedaempft)}
.tippliste.gesperrt .tz-team.favorit{color:var(--text)}
/* Kaufkarte: die eine Stelle, an der TippChamp etwas verkauft. Sagt, was es
   kostet, was frei bleibt, und wo man Kaeufe wiederholt - mehr nicht. */
.kaufkarte{margin-top:12px;border-color:var(--gold-rand);background:linear-gradient(160deg,rgba(224,178,95,.10),var(--glas) 60%)}
@media (prefers-color-scheme:light){.kaufkarte{background:linear-gradient(160deg,#fbf3e2,#fff 60%)}}
.kk-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.kk-saison{font-size:.8rem;font-weight:700;color:var(--gedaempft)}
.kaufkarte h3{font-family:var(--cond);font-weight:700;font-size:1.45rem;line-height:1.1;color:var(--hell);margin:0 0 .4em}
.kaufkarte p{margin:0 0 .6em;font-size:.9rem;color:var(--gedaempft)}
.kk-liste{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.88rem}
.kk-liste li{padding-left:22px;position:relative}
.kk-liste li::before{content:"";position:absolute;left:0;top:.35em;width:12px;height:12px;border-radius:50%;background:var(--akzent);
  box-shadow:inset 0 0 0 3px var(--grund)}
.kaufkarte .knopf.gross{margin-bottom:10px}
.kaufkarte .knopf[aria-disabled="true"]{opacity:.55;cursor:default}
.kk-frei{font-size:.82rem}
.kk-frei a{font-weight:700}
.kk-wieder{width:100%;min-height:44px}
.kk-stufen{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.kk-stufen .knopf{width:100%;min-height:44px}
.probe-hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;padding:10px 14px;border-radius:var(--radius-klein);
  background:var(--gold-flaeche);border:1px solid var(--gold-rand);font-size:.85rem;color:var(--text)}
.probe-hinweis .knopf{min-height:40px;margin-left:auto}
.erinnerung-karte{margin-top:12px;padding:6px 16px}
.erinnerung-karte .schalter{gap:16px}
.erinnerung-karte .schalter>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.erinnerung-karte .schalter-text{font-size:.9rem;font-weight:700}
.aktionen{display:flex;gap:10px;margin-top:12px}
.aktionen .knopf.gross{flex:1}
.abtipp-zeile{font-size:.8rem;color:var(--gedaempft);margin:12px 0 0;text-align:center}
.werkzeugzeile{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center}

/* ==================================================== Ergebnis: Analyse */
.tafel-titel{font-family:var(--cond);font-weight:700;font-size:1.35rem;margin:20px 0 10px}
.tafel-titel:first-child{margin-top:0}
.analyse-karte{margin-top:10px;padding:14px 16px;border-radius:18px;background:var(--glas);border:1px solid var(--glas-rand);
  backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:10px}
.analyse-karte.gekippt{border-color:var(--gold-rand)}
.ak-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.regel-kopf{flex-wrap:wrap;gap:4px 10px}
.regel-kopf h3{white-space:nowrap}
.regel-kopf .klein{white-space:nowrap;margin-left:auto}
.ak-partie{font-size:.95rem;font-weight:700;color:var(--hell);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ak-badge{padding:3px 8px;border-radius:99px;background:var(--gold-flaeche);color:var(--gold);font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ak-tipp{display:flex;align-items:baseline;gap:6px;flex:none}
.ak-tipp .zahl{font-size:1.6rem;color:var(--hell)}
.ak-tipp small{font-size:.78rem;font-weight:600;color:var(--akzent)}
.balken{display:flex;height:12px;gap:3px}
.balken>div{background:var(--balken-anders);border-radius:4px;min-width:4px}
.balken>div.top{background:var(--akzent)}
.balken>div.mitte{background:var(--balken-remis)}
.balken>div.leer{display:none}
.balken-legende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font-size:.78rem;color:var(--gedaempft)}
.balken-legende .top{color:var(--text);font-weight:700}
.balken-legende div:nth-child(2){text-align:center}
.balken-legende div:nth-child(3){text-align:right}
.ak-fuss{display:flex;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--glas-rand);font-size:.78rem;color:var(--gedaempft);flex-wrap:wrap}
.ak-fuss b{color:var(--text)}
.ak-hinweis{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--radius-klein);background:var(--gold-flaeche);font-size:.8rem;line-height:1.45;color:var(--gold-text)}
.ak-hinweis b{color:var(--hell)}


/* ================================================= Ergebnis: Meine Runde */
.kennzahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kennzahl{padding:12px 12px;border-radius:var(--radius-knopf);background:var(--glas);border:1px solid var(--glas-rand)}
.kennzahl .zahl{font-size:1.8rem;color:var(--hell)}
.kennzahl .zahl.gold{color:var(--gold)}
.kennzahl span{display:block;font-size:.7rem;font-weight:600;color:var(--gedaempft);margin-top:2px}
.rundendaten{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:12px;font-size:.88rem}
.rundendaten dt{color:var(--gedaempft)}
.rundendaten dd{margin:0}
.rundendaten code{font-family:var(--mono);font-size:.86em}
.belege-klein{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.belege-klein>div{padding:11px 10px;border-radius:var(--radius-knopf);background:rgba(17,97,73,.20);border:1px solid rgba(72,180,140,.25)}
@media (prefers-color-scheme:light){.belege-klein>div{background:#e6f2ee;border-color:#bfe0d1}}
.belege-klein .zahl{font-size:1.5rem;color:var(--hell)}
.belege-klein span{display:block;font-size:.66rem;line-height:1.3;font-weight:600;color:#8fd8b8;margin-top:3px}
@media (prefers-color-scheme:light){.belege-klein span{color:#3a5a4c}}

/* ============================================================ Tab-Leiste */
.tableiste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:20px;
  border:1px solid var(--glas-rand);border-radius:var(--radius-knopf);background:var(--glas);padding:4px}
.tab{min-height:50px;border:0;background:transparent;font-family:inherit;font-size:.72rem;font-weight:600;color:var(--gedaempft);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px}
.tab svg{stroke:currentColor}
.tab.aktiv{color:var(--akzent);font-weight:800;background:var(--akzent-hell)}
.tab:focus-visible{outline:2px solid var(--akzent);outline-offset:-3px}
.tafel{margin-top:16px}

/* ============================================================ Install */
.install-kasten{margin-top:18px;border:1px solid var(--glas-rand);background:var(--glas);border-radius:var(--radius-klein);padding:12px 14px;font-size:.88rem}
.install-kasten>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.install-kasten .knopf{flex:none}
.ios-symbol{display:inline-block;transform:translateY(1px);color:var(--akzent);font-weight:700}

/* ============================================================ Bewegung */
@keyframes kipp{from{opacity:.25;transform:translateY(-5px)}to{opacity:1;transform:none}}
.tippwert{display:inline-block}
.pille.kippt,.tippwert.kippt{animation:kipp .3s ease-out}
@media (prefers-reduced-motion:reduce){.pille.kippt,.tippwert.kippt{animation:none}.knopf{transition:none}}

/* ========================================================== Abschnitte */
.abschnitt{padding:40px 0;border-top:1px solid var(--glas-rand)}
.abschnitt.dunkel,.abschnitt.grau-flaeche{background:var(--glas-zart)}
.fuehrung{max-width:720px;font-size:.98rem;color:var(--gedaempft)}
.fuehrung strong{color:var(--text)}
.schritte{list-style:none;counter-reset:s;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:800px){.schritte{grid-template-columns:1fr}}
.schritte li{counter-increment:s;background:var(--glas);border:1px solid var(--glas-rand);border-radius:var(--radius);padding:18px}
.schritte li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:99px;
  background:var(--akzent);color:var(--akzent-text);font-size:.82rem;font-weight:800;margin-bottom:10px;font-family:var(--cond)}
.schritte p{margin:0;font-size:.9rem;color:var(--gedaempft)}
.vertrauen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
@media(max-width:800px){.vertrauen{grid-template-columns:1fr}}
.vertrauen>div{background:var(--glas);border:1px solid var(--glas-rand);border-radius:var(--radius);padding:16px}
.vertrauen p{margin:0;font-size:.86rem;color:var(--gedaempft)}
details{border-bottom:1px solid var(--glas-rand);padding:13px 0}
summary{cursor:pointer;font-weight:700;list-style:none;min-height:24px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--akzent);font-weight:800;margin-right:9px;font-family:var(--cond)}
details[open] summary::before{content:"–"}
details p{margin:.7em 0 0;color:var(--gedaempft);font-size:.92rem}
.fuss{border-top:1px solid var(--glas-rand);padding:24px 0 40px;background:var(--glas-zart)}
.fuss a{color:var(--gedaempft);text-decoration:underline;text-underline-offset:2px}
.fuss a:hover{color:var(--text)}
body.mit-tableiste .fuss{padding-bottom:96px}

/* Rechtsseiten */
.rechtstext{border-top:0;padding-top:32px}
.rechtstext h1{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:.6em}
.rechtstext h2{font-size:1.05rem;font-family:var(--sans);font-weight:700;margin:1.8em 0 .4em}
.rechtstext p,.rechtstext li{max-width:62ch}
.rechtstext ul{margin:.4em 0 1em;padding-left:1.2em}
.rechtstext li{margin-bottom:.3em}
.zurueck{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--glas-rand)}

/* ============================================================== Telefon */
/* Vereinsnamen: lang auf breiten Schirmen, kurz auf dem Telefon — gilt in
   Tippliste, Analyse und Einordnung gleichermassen (app.js: teamName/partie). */
.kurz{display:none}
@media (max-width:560px){
  .lang{display:none}.kurz{display:inline}
  .tableiste{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;border-radius:0;border:0;border-top:1px solid var(--glas-rand);
    background:color-mix(in srgb,var(--grund) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));gap:2px}
  .tab.aktiv{background:transparent}
  body.mit-tableiste{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .kopf-nav{display:none}
  .fuss a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
}
@media (min-width:561px){.kopf-nav{display:flex}}

/* ============================================================ i-Punkte */
/* Erklaerungen liegen hinter i-Punkten in einem Blatt von unten, nicht im
   Fliesstext - auf der Hauptebene bleibt Platz fuer das Wesentliche. */
.info-knopf{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--akzent);color:var(--akzent);background:transparent;font:800 .72rem/1 var(--sans);cursor:pointer;
  vertical-align:middle;margin-left:6px;padding:0;flex:none}
.info-knopf:hover{background:var(--akzent-hell)}
.info-knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.info-knopf.gross{width:44px;height:44px;border:0;font-size:1rem;margin:0}
.info-knopf.klein{width:15px;height:15px;font-size:.58rem;border-width:1px;margin-left:3px;border-color:currentColor;color:inherit;vertical-align:-2px}
button.st-kachel{font-family:inherit;cursor:pointer;text-align:right;color:inherit}
button.st-kachel:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.leise-link .info-knopf{margin-left:4px}
.zeile-mit-info{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 6px}
.zeile-mit-info .label{margin:0}
.zeile-mit-info button.leise-link{background:none;border:0;color:var(--akzent);font:600 .82rem var(--sans);cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:6px}

/* ============================================================== Blatt */
.blatt-huelle{position:fixed;inset:0;z-index:80}
.blatt-schleier{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .22s}
.blatt{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--flaeche);color:var(--text);
  border-radius:22px 22px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .22s ease-out;
  box-shadow:0 -12px 40px rgba(0,0,0,.4)}
.blatt-huelle.auf .blatt-schleier{opacity:1}
.blatt-huelle.auf .blatt{transform:none}
.blatt-griff{width:44px;height:4px;border-radius:2px;background:var(--glas-rand);margin:0 auto 14px}
.blatt-zu{position:absolute;top:10px;right:14px;width:40px;height:40px;border:0;background:transparent;color:var(--akzent);font-size:1.7rem;line-height:1;cursor:pointer}
.blatt h2{font-family:var(--sans);font-weight:700;font-size:1.15rem;margin:4px 40px 12px 0}
.blatt-inhalt{font-size:.95rem;line-height:1.55;color:var(--text)}
.blatt-inhalt p{margin:0 0 .8em}
.blatt-inhalt p:last-child{margin-bottom:0}
.blatt-inhalt strong{color:var(--hell)}
.blatt-inhalt .gross-zahl{font-family:var(--cond);font-weight:800;font-size:2.6rem;line-height:1;color:var(--hell)}
.blatt-inhalt ul{margin:.4em 0 .8em;padding-left:1.2em}
.blatt-inhalt li{margin:.25em 0}
.blatt-ok{margin-top:16px}
body.blatt-offen{overflow:hidden}
@media (min-width:640px){.blatt{left:50%;right:auto;width:520px;transform:translate(-50%,100%)}.blatt-huelle.auf .blatt{transform:translate(-50%,0)}}


/* =============================================================== Tour */
.tour{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .22s;padding:0 0 env(safe-area-inset-bottom)}
.tour.auf{opacity:1}
.tour-karte{width:100%;max-width:520px;background:var(--flaeche);border-radius:22px 22px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));
  text-align:center;transform:translateY(40px);transition:transform .22s ease-out}
.tour.auf .tour-karte{transform:none}
@media (min-width:640px){.tour{align-items:center}.tour-karte{border-radius:22px;padding-bottom:22px}}
.tour-bild{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tour-bild svg{width:110px;height:110px}
.tour-karte h2{font-family:var(--cond);font-weight:700;font-size:1.7rem;color:var(--hell);margin:0 0 8px}
.tour-karte p{margin:0 auto;max-width:34rem;font-size:.95rem;color:var(--gedaempft);min-height:3.2em}
.tour-punkte{display:flex;justify-content:center;gap:6px;margin:18px 0}
.tour-punkte span{width:7px;height:7px;border-radius:50%;background:var(--glas-rand)}
.tour-punkte span.an{background:var(--akzent);width:20px;border-radius:4px}
.tour-knoepfe{display:flex;gap:10px}
.tour-knoepfe .knopf.gross{flex:1}

/* ============================================================ Rechnung */
.rechnung{margin:16px auto 0;max-width:420px;border:1px solid var(--glas-rand);border-radius:var(--radius);background:var(--glas);padding:14px 16px;text-align:left}
.rechnung-kopf{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--hell);margin-bottom:10px}
.rechnung-schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rechnung-schritte li{position:relative;padding-left:26px;font-size:.86rem;color:var(--gedaempft);transition:color .2s}
.rechnung-schritte li::before{content:"";position:absolute;left:0;top:.2em;width:14px;height:14px;border-radius:50%;border:2px solid var(--glas-rand);box-sizing:border-box;transition:all .2s}
.rechnung-schritte li.aktiv{color:var(--text)}
.rechnung-schritte li.aktiv::before{border-color:var(--akzent);border-top-color:transparent;animation:dreh .7s linear infinite}
.rechnung-schritte li.fertig{color:var(--text)}
.rechnung-schritte li.fertig::before{background:var(--akzent);border-color:var(--akzent);animation:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308110d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");background-size:10px;background-position:center;background-repeat:no-repeat}
.lade .rechnung{width:100%}

/* ================================================== Tipp-Check, Anpassen */
.tc-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--glas-rand);font-size:.8rem;color:var(--gedaempft)}
.tc-zeile b{color:var(--text)}
.tc-zeile .tc-modus{flex:1 1 100%}
.tc-eingabe{display:inline-flex;align-items:center;gap:4px}
.tc-eingabe input{width:40px;height:34px;text-align:center;border-radius:9px;border:1px solid var(--glas-rand);background:var(--glas);color:var(--hell);
  font:800 1rem var(--cond);padding:0}
.tc-eingabe input:focus{outline:2px solid var(--akzent);border-color:transparent}
.tc-ergebnis{font-weight:700;color:var(--text)}
.tc-ergebnis .gut{color:var(--akzent)}
.tc-ergebnis .schlecht{color:var(--gold)}
button.pille{appearance:none;-webkit-appearance:none;font-family:var(--cond)}
.pille.klickbar{cursor:pointer}
.pille.klickbar:hover{border-color:var(--akzent)}
.pille.angepasst{border-color:var(--akzent);box-shadow:0 0 0 2px var(--akzent-hell)}
.wahl-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}
.wahl{border:1px solid var(--glas-rand);background:var(--glas);border-radius:12px;padding:8px 4px;text-align:center;cursor:pointer;color:var(--text);font-family:inherit}
.wahl .zahl{font-size:1.35rem;color:var(--hell)}
.wahl small{display:block;font-size:.66rem;color:var(--gedaempft);margin-top:2px}
.wahl.aktiv{border-color:var(--akzent);background:var(--akzent-hell)}
.wahl.aktiv .zahl{color:var(--akzent)}
.wahl-frei{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.85rem;color:var(--gedaempft)}
.anpassung-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--glas-rand);font-size:.85rem}
.anpassung-zeile.warn{color:var(--gold)}
.anpassung-zeile button{background:none;border:0;color:var(--akzent);font:700 .85rem var(--sans);cursor:pointer;padding:6px 0}

/* In der App-Huelle: nur das Werkzeug. Die Erklaertexte bleiben der Website. */
body.in-app .abschnitt{display:none}
body.in-app .fuss{padding-top:14px}

/* ⓘ-Blätter: Ergebnis-Matrix (grafik.js). Farbe ist Zweitkanal - Zahl und Glyphe tragen die Aussage. */
.mx-achse{display:flex;justify-content:space-between;font-size:.72rem;color:var(--leise);font-weight:700;margin:6px 0 2px 26px}
.mx-achse.unten{margin:4px 0 0 0}
table.matrix{border-collapse:separate;border-spacing:3px;width:100%;table-layout:fixed}
table.matrix th{font-size:.72rem;color:var(--leise);font-weight:700;width:22px}
table.matrix td.mz{height:44px;text-align:center;border-radius:7px;background:var(--flaeche2);font-size:.8rem;color:var(--gedaempft);position:relative}
table.matrix td.e1{background:var(--stufe-1);color:var(--hell)}
table.matrix td.e2{background:var(--stufe-2);color:var(--hell)}
table.matrix td.e3{background:var(--stufe-3);color:var(--hell);font-weight:700}
table.matrix td.tipp{outline:2px solid var(--hell);outline-offset:-2px}
table.matrix td.modus{outline:2px dashed var(--gedaempft);outline-offset:-2px}
table.matrix td.tipp.modus{outline:2px solid var(--hell)}
table.matrix td.frei{outline:2px dotted var(--hell);outline-offset:-2px}
/* Marken als CSS-Formen, nicht als Glyphen: Manrope und Barlow haben keine geometrischen Formen (Kreis, Ring, Raute) - die Rueckfallschrift der Runtime ist nicht auf jedem iOS dieselbe. Reihenfolge traegt (gleiche Spezifitaet, das spaetere gewinnt). */
table.matrix td.modus::after,table.matrix td.tipp::after,table.matrix td.frei::after,table.matrix td.tipp.modus::before,table.matrix td.frei.modus::before{content:"";position:absolute;top:4px;width:7px;height:7px;box-sizing:border-box}
table.matrix td.modus::after{right:5px;border:1.5px solid var(--gedaempft);transform:rotate(45deg)}
table.matrix td.tipp::after{right:4px;border-radius:50%;background:var(--hell)}
table.matrix td.frei::after{right:4px;border-radius:50%;border:1.5px solid var(--hell)}
table.matrix td.tipp.modus::before,table.matrix td.frei.modus::before{right:14px;border:1.5px solid var(--gedaempft);transform:rotate(45deg)}
table.matrix.klein{border-spacing:2px;margin:6px 0 0}
table.matrix.klein td.mz{height:24px;font-size:.66rem;border-radius:4px}
table.matrix.klein th{font-size:.62rem;width:14px}
.mx-legende{display:flex;gap:10px;flex-wrap:wrap;font-size:.74rem;color:var(--gedaempft);margin-top:10px}
.mx-legende i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px;background:var(--flaeche2)}
.mx-legende i.e1{background:var(--stufe-1)} .mx-legende i.e2{background:var(--stufe-2)} .mx-legende i.e3{background:var(--stufe-3)}
.mx-marken{font-size:.9rem;margin:10px 0 0}
.mk{display:inline-block;width:.55em;height:.55em;margin-right:.25em;vertical-align:0;box-sizing:border-box}
.mk-tipp{border-radius:50%;background:currentColor}
.mk-frei{border-radius:50%;border:1.5px solid currentColor}
.mk-modus{border:1.5px solid currentColor;transform:rotate(45deg)}
/* Analyse-Karten: Aufklapper, Matrix je Spiel antippbar (app.js tippCheckVerdrahten) */
.mx-rest{font-size:.72rem;color:var(--leise);text-align:right;margin-top:2px}
.ak-auf{margin-top:10px;width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border-radius:12px;border:1px solid var(--glas-rand);background:transparent;color:var(--akzent);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.ak-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.ak-details{margin-top:12px;padding-top:12px;border-top:1px solid var(--glas-rand)}
.ak-details .tc-modus{font-size:.8rem;color:var(--gedaempft);margin:0 0 6px} .ak-details .tc-modus b{color:var(--text)}
.ak-matrix{margin-top:4px}
.ak-matrix table.matrix td.mz{cursor:pointer}
.ak-matrix table.matrix td.mz:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px}
.ak-matrix table.matrix td.gewaehlt{box-shadow:inset 0 0 0 2px var(--akzent)}
.tc-antwort{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--gedaempft);padding-top:6px}
.tc-antwort .tc-ergebnis.leise{font-weight:400;color:var(--gedaempft)}

/* ⓘ-Blatt Erwartete Punkte: Skala (grafik.js) */
.sk-gross{display:flex;align-items:baseline;gap:10px;margin:4px 0 2px}
.sk-gross .zahl{font-family:var(--cond);font-weight:800;font-size:2.6rem;line-height:1;color:var(--hell)}
.sk-kasten{background:var(--akzent);color:var(--akzent-text);font-weight:800;font-size:.72rem;letter-spacing:.06em;padding:4px 8px;border-radius:6px}
.skala{position:relative;height:14px;border-radius:7px;background:var(--rand);margin:56px 0 48px}
.skala .voll{position:absolute;left:0;top:0;bottom:0;border-radius:7px 0 0 7px;background:var(--akzent)}
/* Die Marken sind unter .skala gescopt: .marke allein ist die Kopfzeilen-Marke (display:flex). */
.skala .marke{display:block;position:absolute;transform:translateX(-50%);text-align:center;font-size:.72rem;font-weight:700;color:var(--gedaempft);white-space:nowrap;line-height:1.2}
.skala .marke.oben{bottom:100%} .skala .marke.oben::after{content:"";display:block;width:2px;height:14px;margin:3px auto 0;background:currentColor}
.skala .marke.unten{top:100%} .skala .marke.unten::before{content:"";display:block;width:2px;height:14px;margin:0 auto 3px;background:currentColor}
.skala .marke.links{left:0;transform:none} .skala .marke.rechts{left:100%;transform:translateX(-100%)}
.skala .marke.du{color:var(--hell)} .skala .marke.du b{display:block;font-family:var(--cond);font-size:1.2rem;font-weight:800} .skala .marke.du.oben::after{height:26px;width:3px;background:var(--akzent)}
.sk-legende{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:.8rem;color:var(--gedaempft);margin-top:8px}
.sk-legende b{font-family:var(--cond);font-size:1.05rem;color:var(--hell);text-align:right}

/* ⓘ-Blatt So rechnet TippChamp: Stationen (grafik.js) */
.kette{position:relative;margin:8px 0 4px;padding-left:26px}
.kette::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2px;background:var(--rand)}
.station{position:relative;background:var(--glas);border:1px solid var(--glas-rand);border-radius:14px;padding:10px 12px;margin-bottom:10px}
.station::before{content:"";position:absolute;left:-23px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--akzent);border:2px solid var(--flaeche)}
.station .label{display:block;margin-bottom:3px}
.station .zahl{font-family:var(--cond);font-weight:800;font-size:1.55rem;line-height:1.1;color:var(--hell)}
.station .zahl small{font-family:var(--sans);font-weight:600;font-size:.72rem;color:var(--gedaempft);margin-left:6px}
.station .note{font-size:.8rem;color:var(--gedaempft);margin-top:3px}
.station.ziel{border-color:var(--akzent);background:var(--akzent-hell)}
.trio{display:flex;gap:6px} .trio>div{flex:1;background:var(--flaeche2);border-radius:8px;padding:6px 4px;text-align:center}
.trio .k{font-size:.62rem;color:var(--leise);font-weight:700;letter-spacing:.06em} .trio .zahl{font-size:1.3rem}
.ergebnisse{display:flex;gap:6px;margin-top:6px} .ergebnisse>div{flex:1;border:1px solid var(--glas-rand);border-radius:8px;padding:6px 4px;text-align:center}
.ergebnisse .e{font-family:var(--cond);font-weight:800;font-size:1.2rem;color:var(--hell)} .ergebnisse .pkt{font-size:.72rem;color:var(--gedaempft)}
.ergebnisse .best{border-color:var(--akzent);background:var(--akzent-hell)}
.station .st-fuss{font-size:.74rem;color:var(--leise);margin-top:6px}

/* Analyse-Karte: Einordnung im Aufklapper (grafik.js G.einordnung) */
.einordnung{margin-top:14px;padding-top:12px;border-top:1px solid var(--glas-rand)}
.ein-kopf{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.ein-block{margin-top:10px} .ein-titel{font-size:.74rem;font-weight:700;color:var(--gedaempft);margin-bottom:4px}
.ein-zeile{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:8px;padding:3px 0;font-size:.8rem}
.ein-zeile .team{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ein-zeile .tore{color:var(--gedaempft);font-size:.74rem;white-space:nowrap}
.form-kette{display:inline-flex;gap:4px}
.form-kette i{font-style:normal;width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem}
.form-kette .p-S{background:var(--akzent);color:var(--akzent-text)}
.form-kette .p-U{background:var(--rand);color:var(--text)}
.form-kette .p-N{background:var(--flaeche2);color:var(--gedaempft);border:1px solid var(--glas-rand)}
.ein-zeile.xg{grid-template-columns:78px 1fr} .xg-paar{display:flex;flex-direction:column;gap:3px}
.xg-zeile{display:flex;align-items:center;gap:8px} .xg-zeile b{font-family:var(--cond);font-size:.95rem;color:var(--hell);min-width:26px;text-align:right}
.xg-balken{flex:1;height:9px;background:var(--flaeche2);border-radius:4px;overflow:hidden} .xg-balken>div{height:100%;border-radius:4px}
.xg-balken .fuer{background:var(--akzent)} .xg-balken .gegen{background:var(--balken-anders)}
.ein-chips{display:flex;gap:8px;flex-wrap:wrap}
.ein-chip{padding:5px 10px;border-radius:99px;background:var(--flaeche2);border:1px solid var(--glas-rand);font-size:.78rem;color:var(--gedaempft)}
.ein-chip b{color:var(--hell);font-family:var(--cond);font-size:1rem;margin-right:2px}