:root {
  --bg: #0d1117;
  --karte: #161b22;
  --karte2: #1c232d;
  --linie: #2a3340;
  --text: #e6edf3;
  --leise: #8b98a8;
  --gruen: #2ecc71;
  --rot: #ff5c5c;
  --gelb: #f5c542;
  --blau: #58a6ff;
  --grau: #6e7681;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* „hidden“ muss immer gewinnen – sonst bleibt z. B. die Login-Box (display: grid) nach dem Login sichtbar */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--blau); }
button, input, select { font: inherit; color: inherit; }

/* Kopf + Navigation */
.kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: rgba(13,17,23,.95); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 700; white-space: nowrap; }
.demo-schild { font-size: 11px; font-weight: 700; color: #000; background: var(--gelb); padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { text-decoration: none; color: var(--leise); padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; gap: 6px; }
.nav a.aktiv { color: var(--text); background: var(--karte2); }
.nav .ico { font-size: 15px; }
.aktuell { color: var(--leise); font-size: 13px; white-space: nowrap; }

.inhalt { max-width: 1200px; margin: 0 auto; padding: 16px; padding-bottom: 96px; }

/* Handy: Navigation unten fest, große Knöpfe, alles mit dem Daumen erreichbar */
html { -webkit-tap-highlight-color: transparent; }
a, button, input, summary { touch-action: manipulation; } /* kein Doppeltipp-Zoom, keine Verzögerung */
@media (max-width: 760px) {
  .kopf { justify-content: space-between; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .aktuell { font-size: 12px; }
  .nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; justify-content: space-around; background: rgba(13,17,23,.98); border-top: 1px solid var(--linie);
    padding: 4px 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); gap: 2px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .nav a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; font-size: 12px; padding: 6px 2px; min-height: 56px; border-radius: 12px; }
  .nav a.aktiv { color: var(--blau); background: transparent; }
  .nav .ico { font-size: 22px; line-height: 1; }
  .inhalt { padding: 12px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .knopf, button { min-height: 44px; }
  .knopf-klein { min-height: 40px; padding: 8px 12px; }
  .tv-tab, .tv-knopf { min-height: 40px; }
  input[type=text], input[type=password], .tv-suche input { font-size: 16px; } /* sonst zoomt das iPhone beim Antippen */
  .zeile { min-height: 48px; }
  .dialog { padding: 0; place-items: end stretch; }
  .dialog-box { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .dialog-kopf button { min-width: 96px; }
}

/* Bausteine */
h2 { font-size: 18px; margin: 24px 0 10px; color: var(--leise); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
h2:first-child { margin-top: 4px; }
.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 16px; }
.karte h3 { margin: 0 0 4px; font-size: 16px; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.gross { font-size: 34px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.mittel { font-size: 22px; font-weight: 700; }
.plus { color: var(--gruen); }
.minus { color: var(--rot); }
.zahlenreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.zahlenreihe > div { background: var(--karte2); border-radius: 10px; padding: 8px 10px; }
.zahlenreihe .label { font-size: 12px; color: var(--leise); }
.zahlenreihe .wert { font-size: 18px; font-weight: 700; }
.zahlenreihe .r { font-size: 13px; color: var(--leise); }

.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.punkt.laeuft, .punkt.gruen { background: var(--gruen); box-shadow: 0 0 8px var(--gruen); }
.punkt.offline, .punkt.grau, .punkt.unbekannt { background: var(--grau); }
.punkt.fehler, .punkt.rot { background: var(--rot); box-shadow: 0 0 8px var(--rot); }
.punkt.pause, .punkt.gelb { background: var(--gelb); }

.zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.zeile:last-child { border-bottom: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--leise); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
td.z, th.z { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle { overflow-x: auto; }

.balken { height: 8px; background: var(--karte2); border-radius: 4px; overflow: hidden; margin: 6px 0 2px; }
.balken > div { height: 100%; background: var(--blau); }

.hinweis { background: #2b2410; border: 1px solid #5c4a12; color: #f3d37a; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.fehlerbox { background: #2d1416; border: 1px solid #6b2328; color: #ffb3b3; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.hinweis-leise { background: var(--karte2); border: 1px solid var(--linie); color: var(--leise); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.fehler { color: var(--rot); min-height: 1.4em; }
.leer { color: var(--leise); padding: 12px 0; }

.knopf, button { background: var(--karte2); border: 1px solid var(--linie); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.knopf.an { background: var(--blau); color: #000; border-color: var(--blau); }
.knopf-klein { padding: 4px 10px; font-size: 13px; }
.knopfreihe { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
input[type=text], input[type=password] { background: var(--karte2); border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; }

.ampel { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }
.pruefung { font-size: 14px; margin: 4px 0; }

/* Cockpit „Heute“ */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.kachel { display: block; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; color: inherit; text-decoration: none; min-width: 0; }
.kachel:active { background: var(--karte2); }
.kachel-zahl { font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aufgabe { display: flex; align-items: flex-start; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linie); color: inherit; text-decoration: none; min-height: 48px; }
.aufgabe:last-child { border-bottom: 0; }
.aufgabe .punkt { margin-top: 6px; flex: none; }
.zeile-link { color: inherit; text-decoration: none; }
@media (max-width: 760px) {
  .kacheln { gap: 8px; }
  .kachel { padding: 10px; border-radius: 12px; }
  .kachel-zahl { font-size: 19px; }
  .kachel .klein { font-size: 11px; }
}

/* Chart im TradingView-Stil: volle Breite/Höhe, Tabs + Leiste oben, Legende im Chart */
.inhalt.voll { max-width: none; padding: 0; }
.tv { display: flex; flex-direction: column; height: 70vh; min-height: 360px; background: #131722; border-bottom: 1px solid #2a2e39; }
.tv.vollbild { position: fixed; inset: 0; z-index: 30; height: 100dvh !important; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.tv-tabs, .tv-leiste { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid #2a2e39; overflow-x: auto; scrollbar-width: none; flex: none; }
.tv-tabs::-webkit-scrollbar, .tv-leiste::-webkit-scrollbar { display: none; }
.tv-tab, .tv-knopf { background: transparent; border: 0; border-radius: 6px; color: #b2b5be; padding: 6px 10px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.tv-tab:hover, .tv-knopf:hover { background: #2a2e39; color: #d1d4dc; }
.tv-tab.an { background: #2a2e39; color: #fff; font-weight: 600; }
.tv-knopf.an { color: #2962ff; }
.tv-gruppe { display: flex; gap: 0; padding-right: 6px; margin-right: 6px; border-right: 1px solid #2a2e39; }
.tv-rechts { margin-left: auto; font-size: 18px; padding: 2px 10px; }
.tv-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.tv-punkt.plus { background: #089981; } .tv-punkt.minus { background: #f23645; }
.tv-suche input { background: #1e222d; border: 1px solid #2a2e39; border-radius: 6px; padding: 5px 8px; font-size: 14px; width: 90px; margin-left: 6px; }
.tv-flaeche { position: relative; flex: 1; min-height: 0; }
.tv-chart { position: absolute; inset: 0; }
.tv-ohlc { position: absolute; top: 6px; left: 8px; z-index: 3; font-size: 13px; color: #d1d4dc; pointer-events: none; text-shadow: 0 0 4px #131722; line-height: 1.5; }
.tv-ohlc .tv-werte b { font-weight: 600; margin-right: 2px; }
.tv-ohlc .plus { color: #089981; } .tv-ohlc .minus { color: #f23645; }
.tv-hinweis { position: absolute; top: 30px; left: 8px; right: 70px; z-index: 3; pointer-events: none; }
.tv-hinweis .hinweis { display: inline-block; font-size: 12px; padding: 4px 8px; opacity: .9; }
.legende { display: block; font-size: 13px; color: var(--leise); padding: 6px 12px; }
.legende summary { cursor: pointer; }
.legende span { display: inline-block; margin: 4px 14px 0 0; }
.legende i { display: inline-block; width: 14px; height: 4px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }
@media (max-width: 760px) { .tv-ohlc { font-size: 11px; right: 60px; } .tv-tab, .tv-knopf { padding: 6px 8px; } }

/* Login */
.login { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 50; }
.login-box { width: min(360px, 90vw); display: grid; gap: 12px; text-align: center; }
.login-box h1 { margin: 0; }
.login-box button { background: var(--blau); color: #000; border: 0; font-weight: 700; padding: 12px; }
.login-box input { padding: 12px; font-size: 18px; }

/* Dialog */
.dialog { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 40; display: grid; place-items: center; padding: 12px; }
.dialog-box { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; width: min(900px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.dialog-inhalt { padding: 12px 16px; overflow: auto; }
.md table { margin: 8px 0; }
.md pre { background: var(--karte2); padding: 10px; border-radius: 8px; overflow-x: auto; font-size: 13px; }
.md code { background: var(--karte2); padding: 1px 4px; border-radius: 4px; }