/* ===========================================================================
   Gestaltung - dieselbe Sprache wie das Live-Dashboard unter /
   ---------------------------------------------------------------------------
   1. FARBE GEHOERT DEN DATEN. Gelb = Energie, Gruen = Nutzen/Ertrag,
      Rot = Kosten. Kein Menuepunkt, kein Knopf und kein Link benutzt diese
      Farben - sonst heisst Gelb an einer Stelle "Sonne" und an der naechsten
      "hier klicken".
   2. DREI FLAECHEN, NICHT ZEHN. Seite, erhabene Karte, eingelassene Kachel.
      Karten tragen einen Rahmen, Kacheln nicht - sonst zerfaellt die Seite in
      lauter gleich laute Kaestchen.
   3. KEINE VERSALIEN AUSSER ALS ABSCHNITTSMARKE. Alles in Grossbuchstaben zu
      setzen macht jede Zeile gleich wichtig.
   Die Werte sind identisch mit assets/globals.css des Dashboards.
   =========================================================================== */
:root {
  --bg: #070b14;
  --bg-karte: #0c121e;
  --bg-tief: #0a0f1a;
  --linie: #1a2233;
  --text: #e8edf6;
  --text-leise: #94a3b8;
  --text-blass: #64748b;
  --gelb: #fbbf24;
  --gruen: #34d399;
  --rot: #fb7185;
  --radius: 16px;
  --radius-klein: 12px;
  /* Das Dashboard kommt ohne Schlagschatten aus; Flaechen trennen sich ueber
     Helligkeit und Haarlinien. */
  --schatten: none;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Kein Farbschleier mehr im Kopfbereich: er faerbte alles darunter leicht
     warm und passte nicht zur ruhigen Flaeche des Dashboards. */
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------------- Kopf/Nav */

.kopf {
  padding: 18px 16px 10px;
  display: flex;
  justify-content: center;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 18px;
  letter-spacing: -.01em;
}
.marke strong { font-weight: 600; }
.marke-text { font-weight: 400; }
.marke-icon {
  font-size: 18px;
  color: var(--text-leise);
}

.nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 12px 12px;
  scrollbar-width: none;
  justify-content: center;
  /* Passen die Punkte nicht nebeneinander, darf der erste nicht links
     aus dem Bild geschoben werden - dann beginnt die Leiste am Rand. */
  justify-content: safe center;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--text-leise);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.nav a:hover { color: var(--text); }
/* Unbunt: ein Menuepunkt ist kein Messwert. */
.nav a.aktiv {
  color: var(--text);
  background: #1e293b;
  font-weight: 500;
}

.huelle {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 16px 40px;
}

/* ------------------------------------------------------------------ Texte */

.seiten-titel { font-size: 20px; font-weight: 600; margin: 8px 0 2px; letter-spacing: -.01em; }
.unterzeile { color: var(--text-leise); font-size: 14px; margin: 0 0 18px; }
.hinweis { color: var(--text-leise); font-size: 13px; margin: 12px 0 0; }
/* Ohne diese Regel faerbt der Browser Links im Fliesstext blau - auf dunklem
   Grund kaum lesbar und in dieser App eine Farbe zu viel. */
/* Knoepfe sind ausgenommen - sie tragen ihren eigenen Rahmen. */
.hinweis a, .karte p a, .liste a:not(.knopf), .fuss a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--text-blass);
  text-underline-offset: 2px;
}
.hinweis a:hover, .karte p a:hover { text-decoration-color: var(--text); }
.leer { color: var(--text-leise); font-size: 14px; margin: 6px 0; }
.leer a { color: var(--text); }
.meta { display: block; color: var(--text-blass); font-size: 11.5px; margin-top: 2px; }
.notiz { font-style: italic; }
.rot { color: var(--rot); }
.gruen { color: var(--gruen); }
.gelb { color: var(--gelb); }
code {
  background: var(--bg-tief);
  color: var(--text-leise);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 12.5px;
}

/* ----------------------------------------------------------------- Kacheln */

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
/* Eingelassen und ohne Rahmen - eine Kachel ist eine Zahl, keine eigene
   Karte. */
.kachel {
  background: var(--bg-tief);
  border-radius: var(--radius-klein);
  padding: 12px 14px;
}
.kachel-label { display: block; color: var(--text-leise); font-size: 11px; }
.kachel-wert {
  display: block;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  letter-spacing: -.01em;
}
.kachel-fuss { display: block; color: var(--text-blass); font-size: 11px; margin-top: 3px; }

.mini-kacheln {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.mini-kacheln div {
  background: var(--bg-tief);
  border-radius: var(--radius-klein);
  padding: 10px 12px;
}
.mini-kacheln span { display: block; color: var(--text-leise); font-size: 11px; }
.mini-kacheln strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Karten */

.karte {
  background: var(--bg-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 14px;
}
.karte-schmal { max-width: 400px; margin: 40px auto; }
.karte h1 { margin: 0 0 6px; font-size: 22px; }
.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.karte-kopf h2 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
/* Den Anteil traegt der Balken darunter - die Zahl bleibt unbunt. */
.prozent { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.klein-link { color: var(--text-leise); font-size: 13px; text-decoration: none; }
.klein-link:hover { color: var(--text); }

.zwei-spalten { display: grid; gap: 14px; }

/* ------------------------------------------------------------------ Balken */

.balken {
  height: 12px;
  background: var(--bg-tief);
  border-radius: 999px;
  overflow: hidden;
}
.balken-klein { height: 6px; margin-top: 5px; }
.balken-fuellung {
  height: 100%;
  /* Einfarbig statt Verlauf: der Balken zeigt, wie viel schon wieder drin
     ist - und "wieder drin" ist in dieser App gruen. */
  background: var(--gruen);
  border-radius: 999px;
  transition: width .5s ease;
}
.balken-rot { background: var(--rot); opacity: .7; }

.verteilung { list-style: none; margin: 0; padding: 0; }
.verteilung li { margin-bottom: 12px; }
.verteilung-zeile { display: flex; justify-content: space-between; font-size: 14px; }
.verteilung-zeile strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Listen */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
}
.liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.liste-gross li { flex-wrap: wrap; }
.betrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.zeilen-aktionen { display: flex; align-items: center; gap: 6px; }
.zeilen-aktionen form { margin: 0; }

/* ----------------------------------------------------------------- Tabelle */

.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  text-align: left;
  color: var(--text-leise);
  font-size: 11.5px;
  font-weight: 500;
  padding: 0 10px 8px 0;
  white-space: nowrap;
}
.tabelle td { padding: 10px 10px 10px 0; border-top: 1px solid var(--linie); white-space: nowrap; }

/* ----------------------------------------------------------------- Formular */

.form { display: grid; gap: 12px; }
.form-raster { grid-template-columns: repeat(2, 1fr); }
.form-raster .breit, .form-raster button { grid-column: 1 / -1; }
.form label { display: grid; gap: 5px; font-size: 13px; color: var(--text-leise); }
.form label em { font-style: normal; color: var(--text-blass); font-size: 11.5px; }
.form label em strong { color: var(--text-leise); }

input, select, textarea {
  width: 100%;
  background: var(--bg-tief);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text);
  font: inherit;
  font-size: 16px; /* verhindert Zoom auf iOS */
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #475569;
  box-shadow: 0 0 0 3px rgba(148,163,184,.15);
}
input[type=file] { padding: 9px; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%), linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.filter { display: flex; gap: 8px; margin-bottom: 12px; }
.filter select { flex: 1; }

/* ------------------------------------------------------------------ Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: var(--bg-tief);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .1s, border-color .15s, background .15s;
}
.knopf:hover { border-color: #334155; color: var(--text); }
.knopf:active { transform: translateY(1px); }
/* Hell statt bunt: die Hauptaktion hebt sich ueber Helligkeit ab, ohne eine
   Datenfarbe zu belegen. */
.knopf-haupt {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 600;
  padding: 13px 16px;
}
.knopf-haupt:hover { filter: brightness(.93); }
.knopf-mini { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }
.knopf-gefahr { color: var(--rot); border-color: rgba(251,113,133,.35); }
.knopf-gefahr:hover { background: rgba(251,113,133,.1); border-color: var(--rot); }
.knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ------------------------------------------------------------------- Rest */

.flash {
  border-radius: 12px;
  padding: 11px 14px;
  margin: 10px 0 16px;
  font-size: 14px;
  border: 1px solid;
}
.flash-ok { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.35); color: var(--gruen); }
.flash-fehler { background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.35); color: var(--rot); }

.status { font-size: 13px; margin: 10px 0 0; }
.status-ok { color: var(--gruen); }
.status-fehler { color: var(--rot); }

canvas { width: 100%; display: block; }

.legende { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--text-leise); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.punkt { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.rot-bg { background: var(--rot); }
.gruen-bg { background: var(--gruen); }

.fuss {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 34px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-blass);
  font-size: 11.5px;
  border-top: 1px solid var(--linie);
}
.fuss a { color: var(--text-leise); }

/* ---------------------------------------------------------------- Größer */

@media (min-width: 640px) {
  .kacheln { grid-template-columns: repeat(4, 1fr); }
  .mini-kacheln { grid-template-columns: repeat(4, 1fr); }
  .zwei-spalten { grid-template-columns: 1fr 1fr; }
  .seiten-titel { font-size: 22px; }
}

@media (max-width: 520px) {
  .form-raster { grid-template-columns: 1fr; }
  .liste-gross li > div:first-child { flex: 1 1 100%; }
  .zeilen-aktionen { flex: 1 1 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ======================================================= Erweiterungen v2 */

.anlagen-wahl {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 12px 2px;
}
.anlagen-wahl a {
  font-size: 12.5px;
  color: var(--text-leise);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--linie);
}
.anlagen-wahl a.aktiv {
  color: var(--text);
  border-color: #334155;
  background: #1e293b;
}

.reiter {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
}
.reiter a {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: var(--bg-karte);
  color: var(--text-leise);
  text-decoration: none;
  font-size: 14px;
}
.reiter a.aktiv {
  background: #1e293b;
  border-color: #334155;
  color: var(--text);
  font-weight: 500;
}

.karte-akzent { border-color: #334155; }

.marke-klein {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-tief);
  border: 1px solid var(--linie);
  color: var(--text-leise);
  white-space: nowrap;
  vertical-align: middle;
}
.marke-warnung {
  color: var(--gelb);
  border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.08);
}

.flash-warnung {
  background: rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.35);
  color: var(--gelb);
}
.flash a { color: inherit; }

.unter-titel { font-size: 14px; margin: 0 0 8px; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: 20px 0 16px; }

.codeblock {
  background: var(--bg-tief);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 12px;
  overflow-x: auto;
  color: var(--text-leise);
  margin: 0 0 12px;
  -webkit-user-select: all;
  user-select: all;
}

.schalter {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
}
.schalter input[type=checkbox] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: #94a3b8;
}

.kopplung-block {
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--bg-tief);
}
.kopplung-block .knopf-reihe { margin-bottom: 0; }

.zeile-plus td { background: rgba(52,211,153,.05); }

.klein-wert { font-size: 13px; font-weight: 500; word-break: break-word; }

.gelb-bg { background: var(--gelb); }
.grau-bg { background: var(--text-leise); }

.kacheln + .kacheln { margin-top: -4px; }

@media (min-width: 640px) {
  .reiter { max-width: 420px; }
}

.kopf { flex-direction: column; align-items: center; gap: 4px; }
.zum-dashboard {
  font-size: 12.5px;
  color: var(--text-leise);
  text-decoration: none;
}
.zum-dashboard:hover { color: var(--text); }
.karte-schmal .form { margin-top: 16px; }

/* Sichtbarer Tastaturfokus. Gleiche Regel wie im Dashboard. */
:where(a, button, [role="button"]):focus-visible {
  outline: 2px solid var(--text-leise);
  outline-offset: 2px;
  border-radius: 8px;
}