/* Design 2: Terminal / Zeitung. Flach, Linien statt Karten, eckig, Zahlen in
   Monospace. Omni-Farben (Nachtblau + Blau), Blau nur als Akzent. */
:root {
  --bg: #06090f;
  --flaeche: #0a0e16;
  --linie: #1a212d;
  --linie-2: #2a3342;
  --text: #c6ceda;
  --hell: #eef2f7;
  --leise: #6c7a8d;
  --blau: #4c9af8;
  --gruen: #56c75d;
  --rot: #ff6467;
  --gelb: #fdc700;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --eng: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
button, input { font: inherit; color: inherit; }
b, strong { font-weight: 600; }

/* Kopfleiste + Laufband */
.leiste { border-bottom: 1px solid var(--linie); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.leiste-innen { max-width: 1180px; margin: 0 auto; padding: 11px 16px; display: flex; justify-content: space-between; gap: 16px; }
.marke { color: var(--hell); white-space: nowrap; }
.marke em { font-style: normal; color: var(--leise); margin-left: 8px; }
.status { color: var(--leise); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--gruen); margin-right: 8px; vertical-align: 1px; }
.status.fehler { color: var(--gelb); }
.status.fehler::before { background: var(--gelb); }

.ticker { border-bottom: 1px solid var(--linie); overflow: hidden; font: 12px/1 var(--mono); color: var(--leise); height: 34px; }
.ticker-lauf { display: inline-flex; white-space: nowrap; padding: 11px 0; animation: lauf 60s linear infinite; }
.ticker span { padding: 0 22px; border-right: 1px solid var(--linie); }
.ticker b { color: var(--text); font-weight: 500; margin-right: 8px; }
@keyframes lauf { to { transform: translateX(-50%); } }

main { max-width: 1180px; margin: 0 auto; padding: 0 16px calc(40px + env(safe-area-inset-bottom)); }

.kopf { padding: 36px 0 28px; }
h1 {
  font: 700 clamp(40px, 11vw, 84px)/.92 var(--eng); letter-spacing: -.01em; text-transform: uppercase;
  color: var(--hell); margin: 0 0 14px;
}
.unter { margin: 0; color: var(--leise); max-width: 34em; }

.label { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }

/* Ergebnis */
.ergebnis { border-top: 2px solid var(--hell); border-bottom: 1px solid var(--linie); padding: 20px 0 24px; }
.erg-wert {
  font: 500 clamp(64px, 20vw, 132px)/1 var(--mono); letter-spacing: -.05em; color: var(--hell);
  margin: 10px 0 12px; font-variant-numeric: tabular-nums;
}
.formel { font: 14px/1.4 var(--mono); color: var(--blau); }
.erg-zeile { display: none; }
.erg-seite { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); display: grid; gap: 10px; }
.eingabe-gross {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--linie-2); border-radius: 0;
  padding: 6px 0 8px; font: 500 30px/1.1 var(--mono); color: var(--hell); outline: none;
}
.eingabe-gross:focus { border-bottom-color: var(--blau); }
.eingabe-gross::placeholder { color: var(--linie-2); }
.erg-du { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.erg-du strong { font: 500 26px/1.1 var(--mono); color: var(--gruen); }
.erg-du.leer strong { font-size: 13px; color: var(--leise); font-weight: 400; }
.erg-aktionen { display: flex; gap: 8px; margin-top: 8px; }
.erg-aktionen .knopf { flex: 1; }

/* Bloecke */
.block { border-bottom: 1px solid var(--linie); padding: 22px 0 26px; }
h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font: 600 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hell);
}
h2 span {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--linie-2);
  font-size: 11px; color: var(--leise); letter-spacing: 0;
}
.feld-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 14px; color: var(--text); margin: 18px 0 8px;
}
.feld-label output { font: 500 15px var(--mono); color: var(--hell); white-space: nowrap; }
.hinweis { color: var(--leise); font-size: 13px; margin: 8px 0 0; }
.hinweis.oben { margin: 0 0 4px; }
.hinweis b { color: var(--text); }

.tabs { display: flex; border-bottom: 1px solid var(--linie); gap: 22px; }
.tabs button {
  appearance: none; background: none; border: 0; padding: 8px 0 10px; margin-bottom: -1px; cursor: pointer;
  font: 500 14px var(--sans); color: var(--leise); border-bottom: 2px solid transparent;
}
.tabs.klein button { font-size: 13px; }
.tabs button.an { color: var(--hell); border-bottom-color: var(--blau); }
.tabs button:hover { color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none; cursor: pointer; background: transparent; border: 1px solid var(--linie-2); border-radius: 0;
  font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); padding: 9px 12px;
}
.chip:hover { border-color: var(--leise); }
.chip.an { background: var(--blau); border-color: var(--blau); color: var(--bg); }

.tabelle { margin-top: 16px; border-top: 1px solid var(--linie); }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.eingabe-geld { display: inline-flex; align-items: baseline; gap: 3px; font: 13px var(--mono); color: var(--leise); }
.eingabe-geld input {
  width: 76px; text-align: right; background: transparent; border: 0; border-bottom: 1px solid var(--linie-2); border-radius: 0;
  font: 500 14px var(--mono); color: var(--hell); padding: 3px 0; outline: none;
}
.eingabe-geld input:focus { border-bottom-color: var(--blau); }

.schalter { position: relative; display: inline-block; width: 34px; height: 18px; flex: none; }
.schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.schalter i { position: absolute; inset: 0; border: 1px solid var(--linie-2); pointer-events: none; }
.schalter i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: var(--leise); transition: transform .12s; }
.schalter input:checked + i { border-color: var(--blau); }
.schalter input:checked + i::after { background: var(--blau); transform: translateX(16px); }
.schalter input:focus-visible + i { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Schieber: Linie + eckiger Griff */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: pointer; --pct: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--blau) 0 var(--pct), var(--linie-2) var(--pct) 100%); }
input[type=range]::-moz-range-track { height: 2px; background: var(--linie-2); }
input[type=range]::-moz-range-progress { height: 2px; background: var(--blau); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 20px; margin-top: -9px; background: var(--hell); border: 0; border-radius: 0; }
input[type=range]::-moz-range-thumb { width: 12px; height: 20px; background: var(--hell); border: 0; border-radius: 0; }
input[type=range]:focus-visible { outline: 1px dashed var(--blau); outline-offset: 4px; }
.skala { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--leise); margin-top: 2px; }

/* Szenarien als Tabelle */
.szenarien { border-top: 1px solid var(--linie-2); }
.sz {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 10px 0 11px;
  border-bottom: 1px solid var(--linie); font-size: 14px;
  background-size: 100% 2px !important; background-position: left bottom !important; background-repeat: no-repeat !important;
}
.sz.kopfzeile { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); padding: 8px 0; }
.sz .name { color: var(--text); }
.sz .name small { display: block; color: var(--leise); font-size: 12px; margin-top: 1px; }
.sz .w, .sz .du { font: 500 14px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.sz .w { color: var(--hell); min-width: 70px; }
.sz .du { color: var(--gruen); min-width: 84px; }
.sz.kopfzeile .w, .sz.kopfzeile .du { font: 500 11px var(--mono); color: var(--leise); }
.sz.aktuell { box-shadow: inset 2px 0 0 var(--blau); padding-left: 12px; }
.sz.aktuell .name { color: var(--hell); font-weight: 600; }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 0; border-top: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2); }
.kennzahlen div { padding: 12px 10px 12px 0; }
.kennzahlen div + div { border-left: 1px solid var(--linie); padding-left: 12px; }
.kennzahlen dt { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.kennzahlen dd { margin: 6px 0 0; font: 500 19px var(--mono); color: var(--hell); }
.gut { color: var(--gruen) !important; }
.schlecht { color: var(--rot) !important; }

/* Season-Fortschritt */
.saison-balken { height: 6px; background: var(--linie); margin-top: 4px; }
.saison-balken i { display: block; height: 100%; background: var(--blau); width: 0; transition: width .2s; }
.saison-skala { margin-top: 8px; }
.b-saison .kennzahlen { margin-top: 16px; }

/* Knoepfe */
.knopf {
  display: inline-flex; justify-content: center; align-items: center; cursor: pointer; text-decoration: none;
  font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--blau); color: var(--bg); border: 1px solid var(--blau); border-radius: 0; padding: 12px 16px;
}
.knopf:hover { background: #6aacfa; }
.knopf.leise { background: transparent; color: var(--text); border-color: var(--linie-2); }
.knopf.leise:hover { border-color: var(--leise); }
.knopf.gross { font-size: 13px; padding: 15px 20px; width: 100%; }
.cta p { margin: 0 0 16px; }
.cta .hinweis { margin: 10px 0 0; }

.fuss { padding: 26px 0 0; font-size: 12px; color: var(--leise); }
.fuss p { margin: 0 0 8px; max-width: 70em; }
.textknopf { appearance: none; background: none; border: 0; padding: 0; margin-left: 6px; color: var(--blau); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.macher { margin-top: 18px !important; font: 11px var(--mono); }
.macher a { color: var(--leise); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--hell); color: var(--bg); font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px; z-index: 10;
}

/* Handy: eine Spalte in der Reihenfolge A Bewertung, B Punkte, C Kosten, D Szenarien, Omni */
.raster { display: flex; flex-direction: column; }
.links, .rechts { display: contents; }
.b-bew { order: 1; } .b-pkt { order: 2; } .b-kost { order: 3; } .b-szen { order: 4; } .b-saison { order: 5; } .b-cta { order: 6; border-bottom: 0; }

/* PC: Ergebnis als breite Zeile, darunter Regler links, Tabelle rechts,
   getrennt von einer durchgehenden Linie (wie Zeitungsspalten) */
@media (min-width: 960px) {
  .leiste-innen { padding: 12px 24px; }
  main { padding: 0 24px 48px; }
  .kopf { display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: 40px; padding: 56px 0 36px; }
  .unter { font-size: 16px; padding-bottom: 8px; }
  .ergebnis { display: grid; grid-template-columns: 7fr 5fr; gap: 0; padding: 26px 0 30px; }
  .erg-haupt { padding-right: 40px; }
  .erg-seite { margin: 0; padding: 4px 0 0 40px; border-top: 0; border-left: 1px solid var(--linie); align-content: start; }
  .raster {
    display: grid; grid-template-columns: 7fr 5fr; align-items: start;
    background: linear-gradient(var(--linie), var(--linie)) no-repeat calc(700% / 12) 0 / 1px 100%;
  }
  .links, .rechts { display: block; }
  .links { padding-right: 40px; }
  .rechts { padding-left: 40px; }
  .b-cta { border-bottom: 0; }
  .links .block:last-child, .rechts .block:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .ticker-lauf { animation: none; } * { transition: none !important; } }