/* Kurier Connect – Kennzahlen-Dashboard
   Aufbau nach dem KI-Benji-Dashboard: EIN Token-Set, kein Farbwert hart im Markup,
   der Dunkelmodus definiert jedes Token neu. Grün/Rot nur für Geld und Deltas,
   die Ampel trägt Farbe UND Form UND Wort. Serienfarben (#2a78d6 / #eb6834,
   dunkel #3987e5 / #d95926) mit dem dataviz-Validator geprüft: alle Checks PASS. */
:root {
  color-scheme: light dark;
  --grund: #f5f5f7;
  --karte: #ffffff;
  --text: #1d1d1f;
  --neben: #6e6e73;
  --linie: rgba(0, 0, 0, .10);
  --linie-zart: rgba(0, 0, 0, .06);
  --navy: #192b47;
  --gold: #fdc938;
  --gold-text: #8a6b00;
  --gold-flaeche: rgba(253, 201, 56, .18);
  --gold-balken: #a87e08;
  --auf-gold: #192b47;
  --fokus: #8a6b00;
  --gut: #147a3c;
  --gut-flaeche: rgba(20, 122, 60, .12);
  --schlecht: #c62a20;
  --schlecht-flaeche: rgba(198, 42, 32, .10);
  --unbekannt: #5f6570;
  --unbekannt-flaeche: rgba(95, 101, 112, .12);
  --seg: rgba(0, 0, 0, .05);
  --spur: rgba(0, 0, 0, .06);
  --schatten: 0 1px 3px rgba(0, 0, 0, .06);
  --kopf-grund: #192b47;
  --kopf-text: #ffffff;
  --kopf-neben: rgba(255, 255, 255, .68);
  --kopf-feld: rgba(255, 255, 255, .12);
  --demo: #b4231a;
  --demo-flaeche: rgba(198, 42, 32, .08);
  --serie1: #2a78d6;
  --serie2: #eb6834;
  --balken: #2a78d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #000000;
    --karte: #1c1c1e;
    --text: #f5f5f7;
    --neben: #98989d;
    --linie: rgba(255, 255, 255, .14);
    --linie-zart: rgba(255, 255, 255, .08);
    --navy: #9db4dd;
    --gold-text: #fdc938;
    --gold-flaeche: rgba(253, 201, 56, .16);
    --gold-balken: #fdc938;
    --fokus: #fdc938;
    --gut: #30d158;
    --gut-flaeche: rgba(48, 209, 88, .16);
    --schlecht: #ff453a;
    --schlecht-flaeche: rgba(255, 69, 58, .10);
    --unbekannt: #9aa0aa;
    --unbekannt-flaeche: rgba(154, 160, 170, .16);
    --seg: rgba(255, 255, 255, .09);
    --spur: rgba(255, 255, 255, .08);
    --schatten: 0 1px 3px rgba(0, 0, 0, .5);
    --kopf-grund: #101c30;
    --kopf-feld: rgba(255, 255, 255, .10);
    --demo: #ff7a70;
    --demo-flaeche: rgba(255, 69, 58, .12);
    --serie1: #3987e5;
    --serie2: #d95926;
    --balken: #3987e5;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Kopf */
.kopf { background: var(--kopf-grund); color: var(--kopf-text); position: sticky; top: 0; z-index: 5; }
.kopf-innen { max-width: 1180px; margin: 0 auto; padding: 14px 16px 0; }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marke { margin: 0; font-size: inherit; font-weight: inherit; }
.marke-name { font-weight: 700; font-size: 18px; }
.marke-neben { color: var(--kopf-neben); font-size: 13px; margin-left: 8px; }
.demo-plakette {
  background: var(--gold); color: var(--auf-gold); font-weight: 800; font-size: 12px;
  letter-spacing: .08em; padding: 4px 10px; border-radius: 6px;
}
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0 8px; }
.seg { display: inline-flex; background: var(--kopf-feld); border-radius: 9px; padding: 2px; }
.seg button { background: none; border: 0; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--kopf-text); font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--auf-gold); font-weight: 600; }
.zeitraumtext { font-size: 13px; color: var(--kopf-neben); width: 100%; }
.zeitraumtext b { color: var(--kopf-text); font-weight: 600; }
.reiter { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.reiter button {
  background: none; border: 0; color: var(--kopf-neben); padding: 10px 12px; cursor: pointer;
  white-space: nowrap; border-bottom: 3px solid transparent; font-size: 14px;
}
.reiter button[aria-selected="true"] { color: var(--kopf-text); border-bottom-color: var(--gold); font-weight: 600; }

.demo-band {
  max-width: 1180px; margin: 12px auto 0; padding: 10px 14px; border-radius: 10px;
  background: var(--demo-flaeche); color: var(--demo); border: 1px solid var(--demo); font-size: 14px;
}
.demo-band, main, .fuss { margin-left: max(16px, calc((100% - 1180px) / 2)); margin-right: max(16px, calc((100% - 1180px) / 2)); }

main { max-width: 1180px; padding: 16px 0 40px; }
h2 { font-size: 17px; margin: 0 0 10px; color: var(--navy); }
h3 { font-size: 14px; margin: 0 0 6px; color: var(--neben); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.abschnitt { margin-top: 22px; }
.hinweis { color: var(--neben); font-size: 13px; margin: 6px 0 0; }

.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.raster-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.karte { background: var(--karte); border-radius: 14px; padding: 14px 16px; box-shadow: var(--schatten); border: 1px solid var(--linie-zart); position: relative; }
.kennzahl .titel { font-size: 13px; color: var(--neben); display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.kennzahl .titel > span:first-child { flex: 1 1 auto; }
.kennzahl .demo-marke { position: static; flex: none; }
.kennzahl .wert { font-size: 26px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.kennzahl .wert.leer { color: var(--neben); }
.kennzahl .art { font-size: 12px; color: var(--neben); }
.delta { font-size: 12px; color: var(--neben); display: block; }
.delta svg { display: inline-block; margin-right: 3px; vertical-align: 0; }
.delta.gut { color: var(--gut); }
.delta.schlecht { color: var(--schlecht); }
.delta svg { width: 9px; height: 9px; fill: currentColor; }
.delta .vor { color: var(--neben); }
.demo-marke {
  position: absolute; top: 8px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  color: var(--demo); border: 1px solid var(--demo); border-radius: 4px; padding: 0 4px;
}

/* Ampel: Farbe + Form + Wort */
.ampel { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ampel svg { width: 11px; height: 11px; flex: none; }
.ampel.ok { background: var(--gut-flaeche); color: var(--gut); }
.ampel.warn { background: var(--gold-flaeche); color: var(--gold-text); }
.ampel.alarm { background: var(--schlecht-flaeche); color: var(--schlecht); }
.ampel.unbekannt { background: var(--unbekannt-flaeche); color: var(--unbekannt); }

/* Zielbalken */
.ziel .zahlen { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 10px; }
.ziel .gross { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spur { position: relative; height: 14px; background: var(--spur); border-radius: 7px; overflow: visible; }
.spur .fuell { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold-balken); border-radius: 7px; }
.spur .hoch { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--navy); }
.spur .ziellinie { position: absolute; right: 0; top: -6px; bottom: -6px; width: 2px; background: var(--text); }
.legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--neben); margin-top: 10px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Trichter */
.trichter-zeile { display: grid; grid-template-columns: minmax(130px, 200px) 1fr minmax(90px, 120px); gap: 10px; align-items: center; padding: 6px 0; }
.trichter-zeile .name { font-size: 14px; }
.trichter-zeile .quelle { font-size: 11px; color: var(--neben); display: block; }
.trichter-zeile .bahn { height: 22px; background: var(--spur); border-radius: 4px; position: relative; }
.trichter-zeile .bahn span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--balken); border-radius: 0 4px 4px 0; min-width: 2px; }
.trichter-zeile .zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.trichter-abbruch { margin-left: min(200px, 40%); font-size: 12px; color: var(--neben); padding: 0 0 2px 10px; border-left: 2px dotted var(--linie); }

/* Tabellen */
.tab-rahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--linie-zart); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { font-size: 12px; color: var(--neben); font-weight: 600; }
tr.summe td { font-weight: 700; border-top: 1px solid var(--linie); }
.stumm { color: var(--neben); }
.geld-gut { color: var(--gut); }
.geld-schlecht { color: var(--schlecht); }

/* Diagramm */
.diagramm svg { width: 100%; height: auto; display: block; }
.diagramm .achse text { font-size: 11px; fill: var(--neben); }
.diagramm .gitter { stroke: var(--linie-zart); stroke-width: 1; }
.diagramm .bar { fill: var(--balken); }
.diagramm .bar:hover, .diagramm .bar.aktiv { opacity: .75; }
.diagramm .s1 { fill: var(--serie1); }
.diagramm .s2 { fill: var(--serie2); }
.tip {
  position: fixed; z-index: 20; pointer-events: none; background: var(--karte); color: var(--text);
  border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; font-size: 13px; box-shadow: var(--schatten);
}

/* Alarme */
.alarm-liste { list-style: none; margin: 0; padding: 0; }
.alarm-liste li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linie-zart); }
.alarm-liste li:last-child { border-bottom: 0; }

.fuss { max-width: 1180px; padding: 0 0 30px; color: var(--neben); font-size: 12px; }
.fuss p { margin: 4px 0; }

@media (max-width: 560px) {
  .kopf { position: static; }
  .kennzahl .wert { font-size: 22px; }
  .trichter-zeile { grid-template-columns: 1fr 80px; }
  .trichter-zeile .bahn { grid-column: 1 / -1; grid-row: 2; }
  .trichter-abbruch { margin-left: 0; }
}
@media (forced-colors: active) {
  .spur .fuell, .trichter-zeile .bahn span, .diagramm .bar { forced-color-adjust: none; background: Highlight; fill: Highlight; }
}

.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.schluessel { max-width: 1180px; margin: 12px max(16px, calc((100% - 1180px) / 2)) 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.schluessel input { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); }
.schluessel button { padding: 6px 14px; border-radius: 8px; border: 0; background: var(--gold); color: var(--auf-gold); font-weight: 600; cursor: pointer; }
.schluessel .hinweis { width: 100%; }
th[scope="row"] { font-weight: 400; text-align: left; font-size: 14px; color: var(--text); }
.schluessel[hidden] { display: none; }

/* ------------------------------------------------------------ Version 2: neue Bausteine */
:root { --kohorte0: rgba(42,120,214,.06); --kohorte1: rgba(42,120,214,.18); --kohorte2: rgba(42,120,214,.32); --kohorte3: rgba(42,120,214,.50); --kohorte4: rgba(42,120,214,.70); --kohorte5: rgba(42,120,214,.90); --linie-ziel: #6e6e73; --team: #147a3c; }
@media (prefers-color-scheme: dark) { :root { --kohorte0: rgba(57,135,229,.10); --kohorte1: rgba(57,135,229,.22); --kohorte2: rgba(57,135,229,.36); --kohorte3: rgba(57,135,229,.52); --kohorte4: rgba(57,135,229,.72); --kohorte5: rgba(57,135,229,.92); --linie-ziel: #98989d; --team: #30d158; } }

.rolle { font-size: 11px; letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; margin-left: 6px; }
.rolle.intern { background: #c62a20; color: #fff; }
.rolle.team { background: var(--team); color: #fff; }
.tasten { font-size: 11px; color: var(--kopf-neben); width: 100%; }
.stand { color: var(--kopf-neben); }

.kernsatz { position: relative; background: var(--karte); border-left: 4px solid var(--gold-balken); border-radius: 10px; padding: 12px 16px 12px 14px; margin: 0 0 14px; font-size: 16px; box-shadow: var(--schatten); }
.kernsatz .demo-marke { position: static; margin-right: 8px; vertical-align: 2px; }

.spark { width: 100%; max-width: 140px; height: 28px; display: block; margin: 2px 0 4px; }
.spark path { fill: none; stroke: var(--serie1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--serie1); }

.diagramm .bar.spitze { fill: var(--navy); }
.diagramm .linie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .linie.s1 { stroke: var(--serie1); }
.diagramm .linie.s2 { stroke: var(--serie2); stroke-dasharray: 5 4; }
.diagramm .punkt.s1 { fill: var(--serie1); stroke: var(--karte); stroke-width: 2; }
.diagramm .ziellinie-svg { stroke: var(--linie-ziel); stroke-width: 1.5; stroke-dasharray: 2 4; }
.diagramm .linien-text { font-size: 12px; fill: var(--text); font-weight: 600; }
.diagramm .stumm-text { fill: var(--neben); font-weight: 400; }
.leg { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.leg.s1 { background: var(--serie1); } .leg.s2 { background: var(--serie2); } .leg.ziel { background: var(--linie-ziel); }
th .leg { width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }

.trichter-abbruch.groesster { color: var(--schlecht); font-weight: 700; border-left-color: var(--schlecht); }

.rang { display: grid; gap: 6px; }
.rang-zeile { display: grid; grid-template-columns: minmax(150px, 280px) 1fr minmax(80px, 130px); gap: 10px; align-items: center; }
.rang-name { font-size: 14px; }
.rang-name .quelle { display: block; font-size: 11px; color: var(--neben); }
.rang-zeile .bahn { height: 18px; background: var(--spur); border-radius: 4px; position: relative; }
.rang-zeile .bahn span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--unbekannt); border-radius: 0 4px 4px 0; min-width: 2px; transition: width .5s ease; }
.rang-zeile.erster .bahn span { background: var(--gold-balken); }
.rang-zeile .zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }

.befund { border-top: 1px solid var(--linie-zart); padding: 8px 0; }
.befund:first-of-type { border-top: 0; }
.befund summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.befund summary::-webkit-details-marker { display: none; }
.befund summary::after { content: "Was ist zu tun? ▸"; margin-left: auto; font-size: 12px; color: var(--neben); }
.befund[open] summary::after { content: "Zuklappen ▾"; }
.befund p { margin: 6px 0 0 4px; font-size: 14px; }

table.kohorten td.kohorte { text-align: center; }
.kohorte.s0 { background: var(--kohorte0); } .kohorte.s1 { background: var(--kohorte1); } .kohorte.s2 { background: var(--kohorte2); }
.kohorte.s3 { background: var(--kohorte3); } .kohorte.s4 { background: var(--kohorte4); color: #fff; } .kohorte.s5 { background: var(--kohorte5); color: #fff; }
.kohorte.leer { color: var(--neben); }

.jourfixe ul { margin: 0; padding-left: 20px; } .jourfixe li { margin: 4px 0; }
.bericht { white-space: pre-wrap; background: var(--seg); padding: 12px; border-radius: 8px; font-size: 13px; }
.knopf { background: var(--gold); color: var(--auf-gold); border: 0; border-radius: 8px; padding: 7px 14px; font-weight: 600; cursor: pointer; }
td.links, th.links { text-align: left; white-space: normal; }
.karte { transition: transform .15s ease, box-shadow .15s ease; }
.kennzahl:hover { transform: translateY(-1px); }

/* Team: motivierend, ohne interne Bausteine */
.team-hero { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.abzeichen { display: inline-block; background: var(--gold-flaeche); color: var(--gold-text); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; margin-left: 6px; }
.termin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.termin-liste li { background: var(--seg); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.termin-liste b { display: block; font-size: 16px; }

@media (max-width: 560px) {
  .rang-zeile { grid-template-columns: 1fr 90px; }
  .rang-zeile .bahn { grid-column: 1 / -1; grid-row: 2; }
  .befund summary::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .kopf { position: static; background: #fff; color: #000; }
  .filter, .reiter, .tasten, .knopf, .demo-band, .schluessel, details > summary.hinweis { display: none !important; }
  body { background: #fff; }
  .karte { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .marke-name, .marke-neben { color: #000; }
}

.abdeckung-zeile { display: grid; grid-template-columns: minmax(180px, 320px) 1fr minmax(150px, 220px); gap: 10px; align-items: center; padding: 6px 0; }
.abdeckung-zeile .name { font-size: 14px; } .abdeckung-zeile .quelle { display: block; font-size: 11px; color: var(--neben); }
.abdeckung-zeile .zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.spur.klein { height: 10px; }
@media (max-width: 560px) { .abdeckung-zeile { grid-template-columns: 1fr; } .abdeckung-zeile .zahl { justify-content: flex-start; } }
.experiment { border-top: 1px solid var(--linie-zart); padding: 10px 0; }
.experiment summary { cursor: pointer; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stat-liste { margin: 8px 0; padding-left: 20px; font-size: 14px; } .stat-liste li { margin: 3px 0; }
.rechner-felder { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rechner-felder label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--neben); }
.rechner-felder input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); font: inherit; }
.rechner-ergebnis { font-size: 16px; margin: 10px 0 0; }
.erkenntnisse { margin: 0; padding-left: 0; list-style: none; } .erkenntnisse li { padding: 8px 0; border-top: 1px solid var(--linie-zart); font-size: 14px; } .erkenntnisse li:first-child { border-top: 0; }
.stat-liste.vorlaeufig { color: var(--neben); }
.leer-band { background: var(--unbekannt-flaeche); color: var(--text); border-color: var(--unbekannt); }

/* Sichten-Überschrift (Für Kolja / Für Beni) */
.sicht-titel { max-width: 1180px; margin: 22px max(16px, calc((100% - 1180px) / 2)) 8px; font-size: 17px; }
.sicht-titel span { color: var(--neben); font-weight: 500; font-size: 14px; margin-left: 6px; }