/* Oasis UI-Prototyp — gezielte Design-Refinements ÜBER dem read-only referenzierten
   Original-Stylesheet (v12_webapp/css/styles.css, in index.html VOR dieser Datei verlinkt).
   Betrifft NUR die zwei überarbeiteten Tabs (Dashboard + Dynamische Simulation) + neue
   Bausteine. Die anderen fünf Tabs erben ausschließlich das Original-Styling. */

/* ── KPI Zahl/Einheit-Trennung (Bugfix: Einheit brach in die nächste Zeile) ── */
.kpi-val { white-space: nowrap; display: flex; align-items: baseline; gap: 6px; }
.kpi-num { font-family: var(--mono); font-weight: 700; }
.kpi-suffix { font-size: 13px; font-weight: 600; color: var(--text-dim); font-family: var(--sans); }
.kpi-card--hero .kpi-suffix { font-size: 15px; }
.sim-mini-kpi .kpi-suffix { font-size: 10px; }

/* ── SECTION-LABELS (Zonen-Überschriften, mehr Hierarchie) ────────────────── */
.section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim);
  margin: 32px 0 14px; display: flex; align-items: center; gap: 10px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
#tab-dashboard > .section-label:first-child { margin-top: 8px; }

/* ── KPI-REIHE: alle 5 Boxen gleich breit in EINER Reihe ──────────────────── */
.kpi-grid { grid-template-columns: repeat(5, 1fr); }
/* ── HERO-KPI (Gesamtertrag): grün hervorgehoben, aber gleiche Breite ─────── */
.kpi-card--hero {
  background: linear-gradient(135deg, var(--green-bg), var(--surface) 70%);
  border-color: var(--green-lt);
}
.kpi-card--hero .kpi-label { color: var(--green); }
.kpi-card--hero .kpi-val { font-size: 32px; color: var(--green); }

/* ── TOOLTIP-ICON — "i" statt "❓" (überschreibt gezielt die Original-Regel) ── */
.tooltip-icon {
  width: 17px; height: 17px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 700; font-size: 11px;
  text-transform: none; line-height: 1;
}

/* ── KULTUR-BALKEN (render/dashboard.js) ──────────────────────────────────── */
.c-name { display: flex; align-items: center; gap: 8px; }
.c-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.c-bar { width: 50%; }
.c-track {
  height: 10px; background: var(--surface2); border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
}
.c-fill { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── CTA-BUTTONS (Sim-Steuerung) ──────────────────────────────────────────── */
.btn-cta {
  width: 100%; padding: 12px 16px; border-radius: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: all .18s ease;
}
.btn-cta.tone-primary {
  background: var(--green); color: #fff; border: 1px solid var(--green);
  box-shadow: 0 4px 12px rgba(61,107,79,.25);
}
.btn-cta.tone-primary:hover { background: #345D42; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(61,107,79,.32); }
.btn-cta.tone-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(61,107,79,.25); }
.btn-cta.tone-secondary { background: var(--surface); color: var(--text); border: 1px dashed var(--border); }
.btn-cta.tone-secondary:hover:not(:disabled) { border-color: var(--green); color: var(--green); background: var(--green-bg); border-style: solid; }
.btn-cta:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── SIM-PARAMETER: sauber gegliedert (Group + Accordion) ─────────────────── */
.sim-param-group { margin-bottom: 4px; }
.sim-param-label { font-size: 12px; font-weight: 700; color: var(--text); display: block; margin-bottom: 6px; }

.sim-accordion { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 4px; }
.sim-accordion-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--text); padding: 10px 0;
}
.sim-accordion-head::-webkit-details-marker { display: none; }
.sim-accordion-chevron { color: var(--text-dim); font-size: 12px; transition: transform .2s ease; }
.sim-accordion[open] > .sim-accordion-head .sim-accordion-chevron { transform: rotate(180deg); }
.sim-accordion-body { padding: 4px 0 10px; display: flex; flex-direction: column; gap: 14px; }
.sim-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

/* ── SIM-KOPFLEISTE (Parameter oben über der Vorschau) ────────────────────── */
.sim-header-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 18px; padding: 16px 20px; margin-bottom: 16px; }
.sim-hb-group { display: flex; flex-direction: column; gap: 5px; }
.sim-hb-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.sim-hb-group .inline-select { min-width: 150px; }
.sim-standort-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.sim-standort-btn:hover,
.sim-standort-btn[aria-expanded="true"] { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.sim-standort-caret { font-size: 10px; color: var(--text-dim); }
.sim-hb-spacer { flex: 1 1 20px; }
.sim-hb-ticker { display: flex; gap: 10px; align-items: stretch; }
.sim-tick { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; background: var(--surface2); border-radius: 8px; border-left: 3px solid var(--border); min-width: 90px; }
.sim-tick.tone-green { border-left-color: var(--green); }
.sim-tick.tone-orange { border-left-color: var(--orange); }
.sim-tick.tone-blue { border-left-color: #3498DB; }
.sim-tick-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.sim-tick .kpi-val { font-size: 15px; }
.sim-hb-actions { display: flex; gap: 10px; align-items: flex-end; }
.sim-hb-actions .btn-cta { width: auto; padding: 9px 16px; }

.standort-panel { margin-bottom: 16px; }
.standort-panel[hidden] { display: none; }

/* Die Regeln des Sim-Tabs (Zeitreihen-Karte, Vorschau-Kennzeichnung, Ereignis-Paar)
   liegen in der eigenen Datei css/sim-tab.css — diese hier lief sonst über 800 Zeilen. */

/* ── 3D-KAUSALGRAPH (render/graph3d.js) ──────────────────────────────────── */
.cg3d-axes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cg3d-axis {
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim); transition: all .18s ease;
}
.cg3d-axis:hover { background: var(--sand-bg); border-color: var(--sand); color: var(--text); }
.cg3d-axis.active { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(61,107,79,.25); }
.cg3d-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; min-height: 26px; }
.cg3d-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--sans); font-size: 11px; font-weight: 600;
  transition: all .15s ease;
}
.cg3d-chip:hover { border-color: var(--green); background: var(--green-bg); }
.cg3d-chip.active { border-color: var(--green); background: var(--green-bg); color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.cg3d-chip-sw { width: 9px; height: 9px; border-radius: 3px; }
.cg3d-chip em { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--text-dim); }
.cg3d-hint { font-size: 10px; color: var(--text-dim); font-family: var(--mono); margin-left: 4px; }

/* Begriff/Formel-Umschalter (render/graph-controls.js buildLabelToggle) */
.cg3d-labelmode { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cg3d-labelmode-hint { font-size: 10px; color: var(--text-dim); font-family: var(--mono); margin-right: 2px; }
.cg3d-labelbtn {
  padding: 4px 12px; border-radius: 999px; cursor: pointer; font-family: var(--sans); font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim); transition: all .15s ease;
}
.cg3d-labelbtn:hover { border-color: var(--sand); color: var(--text); }
.cg3d-labelbtn.active { background: var(--sand); border-color: var(--sand); color: #2A2015; }

/* Regelkreis-Chips: die zwei Arten, wie die Anlage stirbt (O₂-Spirale, pH-Absturz).
   Sie tragen deshalb die Kreis-Farbe, nicht die Kategorie-Farbe — sie sind eine
   andere Art von Aussage als eine Kategorie und duerfen nicht wie eine aussehen. */
.cg3d-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.cg3d-chip.cg3d-cycle { border-color: #C0392B44; }
.cg3d-chip.cg3d-cycle:hover { border-color: var(--red); background: var(--red-bg); }
.cg3d-chip.cg3d-cycle.active {
  border-color: var(--red); background: var(--red-bg); color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
.cg3d-status {
  font-size: 11px; color: var(--text-dim); font-family: var(--mono);
  margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; background: var(--surface2);
  border-left: 3px solid var(--border);
}
.cg3d-status.is-ok { border-left-color: var(--green); color: var(--text); }
.cg3d-status.is-err { border-left-color: var(--red); color: var(--red); background: var(--red-bg); }
.cg3d-area { height: 560px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface2); }
/* 2D-Netz: dunkler Grund ("Obsidian-Look"), im warmen Espresso-Braun der Erdton-App
   (deckungsgleich mit graph-palette.js BG #26201A), nicht mehr im isolierten
   Kuppel-Nachtgruen — das stach zu hart heraus und kam sonst nirgends vor.
   KEINE @keyframes und KEIN opacity-Grundwert auf dieser Flaeche: genau diese
   Kombination hat in diesem Projekt schon zweimal ein Element dauerhaft auf
   opacity:0 genagelt (Klimazonen, Wetter-Layer), weil der Startwert der
   Animation den Grundwert ueberschattet, wenn die Animation nie startet — und
   sie startet nicht, wenn erst ein VORFAHRE von display:none auf sichtbar geht.
   Genau dieser Fall liegt hier vor (der Tab ist bis zum Klick display:none). */
.cg3d-area.is-dark { background: #26201A; border-color: #40372A; }

/* Umschalter 2D/3D — beide Sichten auf dasselbe Modell. */
.cg-view-switch { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; }
.cg-view-btn {
  padding: 6px 16px; border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  background: transparent; color: var(--text-dim); transition: background .18s ease, color .18s ease;
}
.cg-view-btn:hover { color: var(--text); }
.cg-view-btn.active { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(61,107,79,.25); }
#cg2d-wrap[hidden], #cg3d-wrap[hidden] { display: none; }
.cg3d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.cg3d-tag { font-size: 10px; background: var(--surface2); border-radius: 6px; padding: 3px 8px; color: var(--text); }
.cg3d-tag em { font-style: normal; color: var(--text-dim); margin-right: 4px; }

/* Inspektor-Klassen (kamen vorher aus dem Original-graph.js-<style>) */
.cg-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cg-chip { display: inline-block; font-size: 10px; font-family: var(--mono); padding: 2px 7px; border-radius: 5px; margin: 2px 0; }
.cg-in { background: rgba(61,107,79,.10); color: var(--green); border: 1px solid rgba(61,107,79,.25); }
.cg-out { background: rgba(196,168,130,.15); color: var(--sand); border: 1px solid rgba(196,168,130,.35); }
.cg-eq { text-align: center; padding: 12px; margin: 4px 0 8px; background: var(--surface2); border: 1px dashed var(--border); border-radius: 6px; overflow-x: auto; }

/* Die Regeln des Weltklima-Explorers (Karte, Ebenen, Zeitachse, Legende, Pins)
   stehen in css/klima-map.css — aus dieser Datei ausgelagert (800-Zeilen-Limit),
   wie zuvor schon die des Sim-Tabs. Beide sind in index.html verlinkt. */

/* ── SZENARIO-AUSWERTUNG (render/sim-eval.js) ─────────────────────────────── */
/* DETERMINISTISCHES 2-Spalten-Grid mit klarer Bänderung statt des alten
   align-items:start-Grids (das bei 5 ungleich hohen Karten eine LEERE Zelle und
   ragged Kanten liess — "komische Lücken, kreuz und quer"). Reihenfolge in
   sim-eval.js ist so gesetzt, dass die vollbreiten Bänder (Verdikt oben, N-Bilanz
   als Bilanz-Bande, Statik-Vergleich unten) IMMER eine ganze Reihe fuellen und die
   4 verbleibenden Karten exakt zwei saubere 2er-Reihen bilden — keine leere Zelle.
   align-items:stretch gleicht die Kartenhoehe je Reihe an -> buendige Kanten. */
.sim-eval { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; align-items: stretch; }
.eval-card { margin-bottom: 0; }
.eval-sub { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
/* Vollbreite Baender: Leerzustand, Verdikt-Hero, N-Bilanz-Bande, Referenz-Vergleich. */
.eval-na, .eval-wide { grid-column: 1 / -1; }
.eval-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.eval-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.eval-table td { padding: 7px 8px; border-bottom: 1px solid var(--surface2); font-family: var(--mono); }
.eval-table td:first-child { font-family: var(--sans); font-weight: 500; }
.eval-table tr:last-child td { border-bottom: none; }

/* Verdikt */
.eval-verdict {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--border);
  border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.eval-verdict--ok { border-left-color: var(--green); background: linear-gradient(100deg, var(--green-bg), var(--surface) 60%); }
.eval-verdict--warn { border-left-color: var(--orange); background: linear-gradient(100deg, var(--orange-bg), var(--surface) 60%); }
.eval-verdict--bad { border-left-color: var(--red); background: linear-gradient(100deg, var(--red-bg), var(--surface) 60%); }
.eval-verdict-main { display: flex; align-items: center; gap: 14px; }
.eval-verdict-icon { font-size: 26px; }
.eval-verdict-label { font-size: 17px; font-weight: 700; }
.eval-verdict-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.eval-verdict-totals { display: flex; gap: 22px; }
.eval-total { display: flex; flex-direction: column; gap: 2px; }
.eval-total span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; }
.eval-total strong { font-family: var(--mono); font-size: 18px; color: var(--green); }

/* N-Bilanz */
.nbal-bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.nbal-seg { display: block; transition: width .5s cubic-bezier(0.16,1,0.3,1); }
.nbal-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.nbal-item { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.nbal-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.nbal-k { flex: 1; }
.nbal-v { font-family: var(--mono); font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.nbal-v em { font-style: normal; font-size: 10px; color: var(--text-dim); }

/* Ernte-Ranking */
.eval-rank { display: flex; flex-direction: column; gap: 8px; }
.eval-rank-row { display: grid; grid-template-columns: 110px 1fr 72px; align-items: center; gap: 10px; font-size: 12px; }
.eval-rank-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.eval-rank-bar { height: 9px; background: var(--surface2); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.eval-rank-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-lt), var(--green)); transition: width .5s cubic-bezier(0.16,1,0.3,1); }
.eval-rank-v { font-family: var(--mono); font-weight: 700; text-align: right; }

/* Gauges */
.eval-gauges { display: flex; flex-direction: column; gap: 16px; }
.eval-gauge-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.eval-gauge-head strong { font-family: var(--mono); font-size: 15px; }
.eval-gauge-head .tone-ok { color: var(--green); }
.eval-gauge-head .tone-mid { color: var(--orange); }
.eval-gauge-head .tone-low { color: var(--red); }
.eval-gauge-track { height: 10px; background: var(--surface2); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); position: relative; }
.eval-gauge-fill { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(0.16,1,0.3,1); }
.eval-gauge-fill.tone-ok { background: var(--green); }
.eval-gauge-fill.tone-mid { background: var(--sand); }
.eval-gauge-fill.tone-low { background: #D98A6A; }
.eval-gauge-sub { font-size: 10px; color: var(--text-dim); margin-top: 5px; line-height: 1.4; }

/* Statik ↔ Szenario */
.eval-compare { grid-column: 1 / -1; }
/* N-Bilanz als vollbreite Bande: die Wasserfall-Leiste nutzt die Breite, die Legende
   laeuft dann horizontal (statt einer schmalen Spalte). */
.eval-wide .nbal-legend { flex-direction: row; flex-wrap: wrap; gap: 8px 26px; }
.eval-wide .nbal-item { flex: 0 1 auto; }
.eval-chips { display: flex; gap: 14px; flex-wrap: wrap; }
.eval-chip { flex: 1 1 220px; background: var(--surface2); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--sand); }
.eval-chip-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; }
.eval-chip-val { font-family: var(--mono); font-size: 20px; font-weight: 700; margin-top: 5px; }
.eval-chip-ref { font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.eval-chip-delta { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-top: 6px; }
.eval-chip-delta.is-good { color: var(--green); }
.eval-chip-delta.is-bad { color: var(--red); }

/* ── REGION-/KLIMA-VORSCHAU (kompakt, in der Sim-Sidebar) ─────────────────── */
.region-hint {
  font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.region-hint-badge {
  font-size: 9px; font-weight: 700; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em;
  background: var(--sand-bg); color: var(--orange); border: 1px solid var(--sand-lt);
  border-radius: 999px; padding: 2px 8px;
}
.region-hint-badge.pulse { animation: regionPulse .7s ease; }
@keyframes regionPulse { 50% { transform: scale(1.12); background: var(--sand); color: #fff; } }
.region-list { display: flex; flex-direction: column; gap: 6px; }
.region-opt {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; font-family: var(--sans); color: var(--text);
  transition: all .15s ease;
}
.region-opt:hover { border-color: var(--sand); background: var(--sand-bg); transform: translateX(2px); }
.region-opt.is-current { border-color: var(--green); background: var(--green-bg); cursor: default; }
.region-opt.is-current:hover { transform: none; }
.region-opt-flag { font-size: 18px; flex-shrink: 0; }
.region-opt-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.region-opt-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.region-opt-tag { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--green); color: #fff; border-radius: 3px; padding: 1px 5px; }
.region-opt-sub { font-size: 11px; color: var(--text-dim); }
.region-opt-stats { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 10px; color: var(--text-dim); text-align: right; flex-shrink: 0; }

/* ── CHART-TAB-BUTTONS (6 Zeitreihen-Ansichten) ──────────────────────────── */
.chart-tab-btn {
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim);
  cursor: pointer; transition: all .18s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.chart-tab-btn:hover { background: var(--sand-bg); border-color: var(--sand); color: var(--text); }
.chart-tab-btn.active { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(61,107,79,.25); }

/* ── SIM-MINI-KPIS (3-Spalten-Kompaktkarten) ─────────────────────────────── */
.sim-mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sim-mini-kpi { padding: 14px 12px; }
.sim-mini-kpi .kpi-label { font-size: 9px; margin-bottom: 6px; white-space: nowrap; }
.sim-mini-kpi .kpi-val { font-size: 17px; }
.sim-mini-kpi.tone-orange { border-top-color: var(--orange); }
.sim-mini-kpi.tone-blue { border-top-color: #3498DB; }

/* ── ALARM-ZENTRUM ───────────────────────────────────────────────────────── */
.alarm-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.alarm-row {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--surface2); border-radius: 8px; padding: 10px 14px;
  font-size: 12px; border-left: 3px solid var(--border);
}
.alarm-row--crit { border-left-color: var(--red); }
.alarm-row--warn { border-left-color: var(--orange); }
.alarm-row--ok { border-left-color: var(--green); color: var(--green); }
.alarm-row-icon { flex-shrink: 0; }
.alarm-row-msg { flex: 1; color: var(--text); }
.alarm-row-badge { color: var(--text-dim); font-size: 10px; font-family: var(--mono); white-space: nowrap; }

/* ── TERMINAL-/EVENT-LOG (Rohdaten-Fix: markenkonforme Konsole) ───────────── */
.term-console-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);
}
.term-console {
  background: #16241C; color: #D9D4C7;
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  padding: 16px; border-radius: 10px; height: 200px; overflow-y: auto;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
}

/* ── NÄHRSTOFF-PANEL + RADAR (Dashboard) ─────────────────────────────────── */
.nutrient-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.nutrient-panel { display: flex; flex-direction: column; gap: 18px; max-height: 440px; overflow-y: auto; padding-right: 8px; }
.nutrient-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.nutrient-group-count { background: var(--surface2); border-radius: 999px; padding: 1px 8px; font-size: 10px; color: var(--text-dim); }
.nutrient-rows { display: flex; flex-direction: column; gap: 7px; }
.nutrient-row { display: grid; grid-template-columns: 116px 1fr 46px; align-items: center; gap: 10px; }
.nutrient-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutrient-track { height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.nutrient-fill { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(0.16,1,0.3,1); }
.nutrient-fill.tone-ok { background: var(--green); }
.nutrient-fill.tone-mid { background: var(--sand); }
.nutrient-fill.tone-low { background: #D98A6A; }
.nutrient-pct { font-family: var(--mono); font-size: 12px; font-weight: 700; text-align: right; }
.nutrient-pct.tone-ok { color: var(--green); }
.nutrient-pct.tone-mid { color: var(--orange); }
.nutrient-pct.tone-low { color: var(--red); }
.nutrient-radar-wrap { position: sticky; top: 130px; }
/* Beide Nährstoff-Boxen gleich hoch (bündig); Radar füllt die volle Karten-Höhe */
.nutrient-layout { align-items: stretch; }
.nutrient-radar-wrap { display: flex; flex-direction: column; }
.nutrient-radar-box { flex: 1; min-height: 300px; position: relative; }

/* ── STICKSTOFF-FLUSS-KETTE (Dashboard) ──────────────────────────────────── */
.nflow-chain { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.nflow-node {
  flex: 1; min-width: 108px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface2); border-radius: 12px; padding: 14px 10px; text-align: center;
  border-top: 3px solid var(--border);
}
.nflow-node--in { border-top-color: #3498DB; }
.nflow-node--step { border-top-color: var(--sand); }
.nflow-node--ok { border-top-color: var(--green); }
.nflow-node--bad { border-top-color: var(--red); background: var(--red-bg); }
.nflow-icon { font-size: 20px; }
.nflow-val { font-family: var(--mono); font-weight: 700; font-size: 16px; display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.nflow-val em { font-style: normal; font-size: 9px; font-weight: 600; color: var(--text-dim); }
.nflow-label { font-size: 10px; color: var(--text-dim); line-height: 1.3; }
.nflow-arrow { align-self: center; color: var(--text-dim); font-size: 18px; flex-shrink: 0; }
.nflow-note { font-size: 12px; color: var(--text-dim); margin-top: 14px; line-height: 1.5; padding: 10px 14px; background: var(--surface2); border-radius: 8px; }

/* ── OPEX-DONUT (Dashboard) ──────────────────────────────────────────────── */
.opex-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.opex-donut-wrap { position: relative; height: 200px; }
.opex-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.opex-center-val { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--text); }
.opex-center-unit { font-size: 11px; color: var(--text-dim); }
.opex-legend { display: flex; flex-direction: column; gap: 14px; }
.opex-legend-row { display: flex; align-items: center; gap: 12px; }
.opex-legend-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.opex-legend-name { flex: 1; font-size: 14px; font-weight: 600; }
.opex-legend-val { font-family: var(--mono); font-weight: 700; font-size: 14px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.opex-legend-val em { font-style: normal; font-size: 11px; color: var(--text-dim); }

/* ── WIRTSCHAFTLICHKEIT-TAB (#tab-betrieb, überarbeitet) ──────────────────────
   Kennzahlen-Leiste nutzt die geteilte .kpi-grid (repeat(5,1fr)). Darunter drei
   Diagramm-Zonen mit klarem Rhythmus; die Diagramm-Boxen haben feste Höhen, damit
   die Chart.js-Canvas bündig zu ihren Nachbarn liegen (kein 0px-Klecks). */
#tab-betrieb > .section-label:first-child { margin-top: 8px; }

/* Kostenstruktur: CAPEX-Balken (breit) neben OPEX-Donut (kompakt), gleich hoch. */
.eco-cost-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: stretch; }
.eco-cost-grid > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.eco-capex-chart-box { flex: 1; position: relative; min-height: 480px; }
.eco-opex-layout { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.eco-opex-donut { height: 220px; margin: 0 auto; width: 100%; max-width: 240px; }
.eco-opex-layout .opex-legend { gap: 16px; }

/* Amortisationsverlauf: volle Breite, ruhige Höhe. */
.eco-amort-chart-box { position: relative; height: 320px; }

/* Detail-Aufschlüsselung: die beiden Original-Tabellen, unverändert. */
.eco-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.eco-detail-grid > .card { margin-bottom: 0; }

@media (max-width: 900px) {
  .eco-cost-grid, .eco-detail-grid { grid-template-columns: 1fr; }
}

/* ── BIOLOGIE & NÄHRSTOFFE-TAB (#tab-naehrstoffe, überarbeitet) ───────────────
   Nutzt die geteilten Bausteine (.kpi-grid, .nutrient-layout/-panel, .nflow-note).
   Feste Chart-Höhen -> Canvas bündig zu den Nachbarn, kein 0px-Klecks. */
#tab-naehrstoffe > .section-label:first-child { margin-top: 8px; }

/* Gruppen-Balken (Deckung je Nährstoffklasse) — ruhige, kompakte Höhe. */
.bio-group-box { position: relative; height: 160px; }

/* Stickstoff-Bilanz — 5 waagerechte Balken. */
.bio-nitro-box { position: relative; height: 230px; }

/* Sauerstoff & Belüftung: O2-Balken (breit) neben Kennzahlen-Liste, gleich hoch. */
.bio-o2-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: stretch; }
.bio-o2-grid > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.bio-o2-box { flex: 1; position: relative; min-height: 190px; }

/* Kennzahlen-Liste (Belüftungs-Auslegung) — Label · Wert · Marge-Badge. */
.bio-stat-list { display: flex; flex-direction: column; gap: 2px; }
.bio-stat-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.bio-stat-row:last-child { border-bottom: 0; }
.bio-stat-label { font-size: 12px; font-weight: 500; color: var(--text); }
.bio-stat-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.bio-stat-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px;
}
.bio-stat-badge.ok { color: var(--green); background: var(--green-bg); }
.bio-stat-badge.bad { color: var(--red); background: var(--red-bg); }

@media (max-width: 900px) {
  .bio-o2-grid { grid-template-columns: 1fr; }
}