/* =====================================================================
   terminal.css — Gann S&P 500 Live-Terminal
   Dunkel / kosmisch (Stock-Map-DNA) + Gann-Gold. Zwei Stil-Varianten
   über [data-variant]: "cosmic" (Marineblau/Gold/Glas) und
   "carbon" (Graphit/Bronze, dichter).
   ===================================================================== */
:root {
  /* Layout-Palette */
  --bg: #04080f;
  --bg2: #060d18;
  --panel: rgba(8, 15, 26, 0.62);
  --panel-bd: rgba(110, 165, 210, 0.30);
  --hair: rgba(95, 150, 200, 0.14);
  --ink: #e3eaf3;
  --ink-soft: #9fb0c2;
  --ink-dim: #6a7b8d;
  --ink-faint: #45566a;
  --gold: #ffd75e;
  --bronze: #f4b942;
  --acc-rgb: 255, 215, 94;
  --c-astro: #7da0ff;
  --c-anniv: #c08adf;
  --c-half: #6fe3c8;
  --up: #37d56f;
  --down: #e0593f;
  --cyan: #5fc6e8;
  --violet: #c08adf;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --acc: var(--gold);

  /* Chart-Farben (von chart.js gelesen) */
  --c-grid: rgba(120, 150, 180, 0.10);
  --c-gridm: rgba(120, 150, 180, 0.20);
  --c-axis: #6a7b8d;
  --c-ink: #e3eaf3;
  --c-soft: #9fb0c2;
  --c-dim: #6a7b8d;
  /* Kerzen: Graphit = Long, Hellgrau = Short (Docht heller als Körper für Kontur) */
  --c-up: #8a96a8;
  --c-down: #eef2f8;
  --c-upbody: rgba(74, 85, 102, 0.92);
  --c-downbody: rgba(202, 211, 223, 0.95);
  --c-gold: #ffd75e;
  --c-bronze: #f4b942;
  --c-fan: rgba(244, 185, 66, 0.55);
  --c-fanmain: #ffd75e;
  --c-fanweak: rgba(159, 176, 194, 0.28);
  --c-s9: rgba(95, 198, 232, 0.5);
  --c-s9card: #5fc6e8;
  --c-retr: rgba(159, 176, 194, 0.4);
  --c-retrkey: #c08adf;
  --c-retrzone: rgba(192, 138, 223, 0.09);
  --c-cycle: rgba(244, 185, 66, 0.3);
  --c-cyclekey: #f4b942;
  --c-squ: #46e08a;
  --c-squ-box: rgba(70, 224, 138, 0.35);
  --c-conf: #ffd75e;
  --c-pivot: #e3eaf3;
  --c-cross: rgba(227, 234, 243, 0.32);
  --c-lab-bg: rgba(4, 9, 16, 0.85);
  --c-future: rgba(8, 14, 24, 0.22);
  --c-anchor-fill: #06101a;
}

/* ---------- Variante: Carbon (monochromes Graphit-Grau) ---------- */
:root[data-variant="carbon"] {
  --bg: #0a0b0d;
  --bg2: #121317;
  --panel: rgba(24, 26, 30, 0.66);
  --panel-bd: rgba(150, 160, 174, 0.24);
  --hair: rgba(150, 160, 174, 0.11);
  --ink: #e8ebf0;
  --ink-soft: #aeb6c1;
  --ink-dim: #79818d;
  --ink-faint: #4c545e;
  --gold: #cdd5df;
  --bronze: #9aa3ae;
  --cyan: #aab3bf;
  --violet: #b7bfca;
  --acc: #cdd5df;
  --acc-rgb: 205, 213, 223;
  --c-astro: #9aa8c4;
  --c-anniv: #b1b8c6;
  --c-half: #aebccb;

  --c-grid: rgba(150, 162, 176, 0.08);
  --c-gridm: rgba(150, 162, 176, 0.18);
  --c-ink: #e8ebf0;
  --c-soft: #aeb6c1;
  --c-dim: #79818d;
  /* Kerzen: Graphit = Long, Hellgrau = Short */
  --c-up: #8a96a8;
  --c-down: #eef2f8;
  --c-upbody: rgba(74, 85, 102, 0.92);
  --c-downbody: rgba(202, 211, 223, 0.95);
  --c-gold: #cdd5df;
  --c-bronze: #9aa3ae;
  /* Gann-Overlays: Helligkeits-/Strich-Hierarchie statt Farbe */
  --c-fan: rgba(160, 170, 184, 0.55);
  --c-fanmain: #dfe5ec;
  --c-fanweak: rgba(120, 130, 144, 0.30);
  --c-s9: rgba(150, 162, 176, 0.5);
  --c-s9card: #b3bcc8;
  --c-retr: rgba(140, 150, 164, 0.42);
  --c-retrkey: #c4ccd6;
  --c-retrzone: rgba(180, 190, 204, 0.06);
  --c-cycle: rgba(150, 162, 176, 0.3);
  --c-cyclekey: #c8d0da;
  --c-squ: #e8edf2;
  --c-squ-box: rgba(200, 210, 222, 0.3);
  --c-conf: #d8dee6;
  --c-pivot: #e8ebf0;
  --c-cross: rgba(232, 235, 240, 0.32);
  --c-lab-bg: rgba(10, 11, 13, 0.88);
  --c-future: rgba(20, 22, 26, 0.25);
  --c-anchor-fill: #15161a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(60, 90, 140, 0.16), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(120, 90, 30, 0.10), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
:root[data-variant="carbon"] body {
  background:
    radial-gradient(1100px 650px at 82% -10%, rgba(150, 160, 175, 0.10), transparent 60%),
    var(--bg);
}
.tnum { font-variant-numeric: tabular-nums; }

/* =================== TOP BAR =================== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 9px 18px;
  background: linear-gradient(180deg, rgba(4, 8, 15, 0.92), rgba(4, 8, 15, 0.72));
  border-bottom: 1px solid var(--panel-bd);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  flex-wrap: wrap;
}
.brand { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.brand .mark {
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 21px;
  letter-spacing: -0.01em; color: var(--ink);
}
.brand .mark b { color: var(--acc); font-style: normal; }
.brand .sub {
  font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap;
}

/* Instrument-Dropdown */
.seg-wrap { position: relative; display: inline-flex; align-items: center; }
.instsel {
  appearance: none; -webkit-appearance: none;
  background: rgba(8, 15, 26, 0.7); color: var(--ink);
  border: 1px solid var(--panel-bd); border-radius: 4px;
  padding: 8px 30px 8px 13px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  transition: border-color 0.15s;
}
.instsel:hover { border-color: var(--acc); }
.instsel:focus { outline: none; border-color: var(--acc); }
.seg-wrap::after {
  content: '▾'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--acc); font-size: 10px;
}
.instsel optgroup { background: #0a1422; color: var(--ink-dim); font-style: normal; }
.instsel option { background: #0a1422; color: var(--ink); padding: 4px; }
.seg-wrap.strat .instsel { font-size: 10px; padding: 7px 26px 7px 11px; color: var(--ink-soft); background: rgba(8, 15, 26, 0.4); }
.seg-wrap.strat .instsel.dim { opacity: 0.42; }
.seg-wrap.strat::after { font-size: 9px; right: 9px; }

/* Timeframe-Segment */
.tfseg { display: inline-flex; border: 1px solid var(--panel-bd); border-radius: 4px; overflow: hidden; }
.tfseg button {
  appearance: none; background: transparent; color: var(--ink-dim); border: none;
  border-right: 1px solid var(--hair); padding: 8px 11px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; transition: all 0.15s;
}
.tfseg button:last-child { border-right: none; }
.tfseg button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.tfseg button.active { background: var(--acc); color: #08111d; font-weight: 700; }
:root[data-variant="carbon"] .tfseg button.active { color: #15161a; }

/* Auto-Modus-Button */
.automode {
  display: inline-flex; align-items: center; gap: 7px;
  appearance: none; cursor: pointer;
  background: rgba(8, 15, 26, 0.5); color: var(--ink-dim);
  border: 1px solid var(--panel-bd); border-radius: 4px; padding: 8px 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; transition: all 0.15s;
}
.automode .am-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; transition: all 0.2s; }
.automode .am-state { color: var(--ink-faint); }
.automode:hover { color: var(--ink-soft); border-color: var(--ink-faint); }
.automode.on { color: var(--acc); border-color: var(--acc); background: rgba(var(--acc-rgb), 0.08); }
.automode.on .am-dot { background: var(--up); box-shadow: 0 0 9px var(--up); animation: ampulse 2s ease-in-out infinite; }
.automode.on .am-state { color: var(--up); }
@keyframes ampulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Live-Kurs */
.live { display: flex; align-items: baseline; gap: 12px; }
.live .live-sym { display: none; }
.live .live-px { font-family: var(--serif); font-size: 28px; color: var(--ink); line-height: 1; letter-spacing: -0.01em; }
.live .live-ch { font-size: 13px; font-weight: 600; }
.live .live-ch.up { color: var(--up); }
.live .live-ch.down { color: var(--down); }
.live-meta { display: flex; flex-direction: column; gap: 1px; font-size: 9px; color: var(--ink-dim); letter-spacing: 0.04em; }
.live-meta b { color: var(--ink-soft); font-weight: 500; }
.liverefresh {
  appearance: none; cursor: pointer; background: transparent; border: 1px solid var(--panel-bd);
  border-radius: 4px; color: var(--ink-soft); width: 26px; height: 26px; font-size: 13px; line-height: 1;
  transition: color 0.15s, border-color 0.15s, transform 0.5s cubic-bezier(.4,0,.2,1);
}
.liverefresh:hover { color: var(--acc); border-color: var(--acc); }
.liverefresh.spin { transform: rotate(360deg); }
.live-meta .mkt {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 3px;
  font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.live-meta .mkt::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }
.live-meta .mkt.open { color: #46d39a; background: rgba(70, 211, 154, 0.1); }
.live-meta .mkt.pre, .live-meta .mkt.post { color: #e8b54a; background: rgba(232, 181, 74, 0.1); }
.live-meta .mkt.closed { color: var(--ink-dim); background: rgba(255, 255, 255, 0.05); }
.live-meta .qts { color: var(--ink-dim); }
@keyframes flup { 0% { color: var(--up); text-shadow: 0 0 14px var(--up); } 100% {} }
@keyframes fldn { 0% { color: var(--down); text-shadow: 0 0 14px var(--down); } 100% {} }
.flash-up { animation: flup 0.7s ease-out; }
.flash-down { animation: fldn 0.7s ease-out; }

.topbar .spacer { flex: 1; }

/* Skala */
.scalebox { display: flex; align-items: center; gap: 9px; }
.scalebox .sl-lab { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.scalebox input[type=range] { -webkit-appearance: none; appearance: none; width: 110px; height: 20px; background: transparent; cursor: pointer; }
.scalebox input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--ink-faint); }
.scalebox input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--acc); margin-top: -6px; border: none; }
.scalebox input[type=range]::-moz-range-track { height: 2px; background: var(--ink-faint); }
.scalebox input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--acc); border: none; }
.scalebox .sl-read { font-size: 10px; color: var(--acc); min-width: 84px; }
.scalebox .sl-read small { color: var(--ink-dim); display: block; font-size: 8.5px; }

.tbtn {
  appearance: none; background: transparent; color: var(--ink-soft);
  border: 1px solid var(--panel-bd); border-radius: 4px; padding: 7px 11px; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.15s;
}
.tbtn:hover { color: var(--ink); border-color: var(--acc); }

/* Varianten-Switch (klein, rechts) */
.varsw { display: inline-flex; border: 1px solid var(--panel-bd); border-radius: 4px; overflow: hidden; }
.varsw button { appearance: none; background: transparent; color: var(--ink-dim); border: none; border-right: 1px solid var(--hair); padding: 6px 10px; cursor: pointer; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.varsw button:last-child { border-right: none; }
.varsw button.active { background: rgba(255, 255, 255, 0.07); color: var(--acc); }

/* Werkzeugleiste (zweite Reihe) */
.subbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 18px;
  background: linear-gradient(180deg, rgba(4, 8, 15, 0.92), rgba(4, 8, 15, 0.7));
  border-bottom: 1px solid var(--panel-bd);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}
.subbar .sub-div { width: 1px; height: 18px; background: var(--panel-bd); margin: 0 5px; }
.subbar .lb-lab { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.layerchips { display: flex; gap: 5px; flex-wrap: wrap; }

/* =================== CHART =================== */
.chart-stage {
  position: relative;
  margin: 12px 12px 0;
  border: 1px solid var(--panel-bd);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.5), rgba(4, 8, 15, 0.35));
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
#chart { display: block; width: 100%; height: 56vh; min-height: 380px; cursor: crosshair; }
.chart-head {
  position: absolute; top: 10px; left: 12px; z-index: 6;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 8, 15, 0.82), rgba(4, 8, 15, 0));
  padding: 4px 28px 4px 4px; border-radius: 4px;
}
.chart-head .ch-title { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.chart-head .ch-tag { font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); }
.chart-head .chart-i { pointer-events: auto; background: transparent; border: none; cursor: pointer; color: var(--ink-soft); font-size: 13px; line-height: 1; padding: 2px 5px; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); }
.chart-head .chart-i:hover { color: var(--acc); }
.chart-head .bias {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 2px 8px; border-radius: 3px; pointer-events: auto; text-shadow: none;
}
.chart-head .bias.up { color: #46d39a; background: rgba(70, 211, 154, 0.12); }
.chart-head .bias.dn { color: #ee6a5a; background: rgba(238, 106, 90, 0.12); }
:root[data-variant="carbon"] .chart-head .bias.up { color: #d8dee6; background: rgba(216, 222, 230, 0.12); }
:root[data-variant="carbon"] .chart-head .bias.dn { color: #9aa3ae; background: rgba(154, 163, 174, 0.14); }

/* Lesart-Karte */
.readcard { border-color: rgba(var(--acc-rgb), 0.3); }
.rd-trend { font-size: 14px; color: var(--ink); margin-bottom: 11px; letter-spacing: 0.01em; }
.rd-trend .rd-up { color: #46d39a; font-weight: 700; }
.rd-trend .rd-dn { color: #ee6a5a; font-weight: 700; }
:root[data-variant="carbon"] .rd-trend .rd-up { color: #e8edf2; }
:root[data-variant="carbon"] .rd-trend .rd-dn { color: #9aa3ae; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 5px; overflow: hidden; }
.rd-cell { background: var(--panel); padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; }
.rd-k { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.rd-v { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.rd-v.up { color: #46d39a; } .rd-v.dn { color: #ee6a5a; } .rd-v.gold { color: var(--acc); }
:root[data-variant="carbon"] .rd-v.up, :root[data-variant="carbon"] .rd-v.dn { color: var(--ink); }
.rd-pct { font-size: 10px; color: var(--ink-dim); }
.rd-note { margin-top: 9px; font-size: 9px; letter-spacing: 0.06em; color: var(--ink-faint); text-transform: uppercase; }

/* Astro-Tabelle */
.astrotab .ast-gl { font-size: 14px; color: var(--c-astro); width: 22px; text-align: center; }
.astrotab .ast-lon { color: var(--ink-soft); }
.astrotab td { padding: 5px 7px; }
.chart-head .tgtseg { pointer-events: auto; margin-left: 2px; }
.tgtseg button { padding: 5px 9px; font-size: 9px; letter-spacing: 0.06em; }

/* Layer-Chips über dem Chart */
.layerbar {
  position: absolute; left: 12px; bottom: 10px; z-index: 6;
  display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 24px); pointer-events: auto;
}
.chip {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6, 11, 20, 0.7); border: 1px solid var(--hair); border-radius: 3px;
  color: var(--ink-dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em;
  padding: 4px 9px; transition: all 0.14s; backdrop-filter: blur(4px);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.chip:hover { color: var(--ink-soft); border-color: var(--ink-faint); }
.chip.on { color: var(--acc); border-color: var(--acc); }
.chip.on .dot { background: var(--acc); }

.crosshelp {
  position: absolute; right: 12px; top: 10px; z-index: 6; pointer-events: none;
  font-size: 8.5px; letter-spacing: 0.1em; color: var(--ink-dim); text-align: right; line-height: 1.6;
  background: linear-gradient(270deg, rgba(4, 8, 15, 0.82), rgba(4, 8, 15, 0));
  padding: 4px 6px 4px 28px; border-radius: 4px; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

/* Tooltip */
#tooltip {
  position: absolute; z-index: 8; display: none; pointer-events: none;
  background: rgba(4, 9, 16, 0.94); border: 1px solid var(--panel-bd); border-radius: 4px;
  padding: 8px 10px; font-size: 10px; color: var(--ink); min-width: 150px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.5);
}
#tooltip .tt-d { color: var(--acc); font-size: 10.5px; margin-bottom: 5px; letter-spacing: 0.04em; }
#tooltip .tt-ohlc { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; color: var(--ink-soft); }
#tooltip .tt-ohlc b { color: var(--ink); font-weight: 500; }
#tooltip .tt-ohlc b.u { color: var(--up); }
#tooltip .tt-ohlc b.d { color: var(--down); }
#tooltip .tt-chg { margin-top: 4px; font-weight: 600; }
#tooltip .tt-chg.u { color: var(--up); }
#tooltip .tt-chg.d { color: var(--down); }
#tooltip .tt-lv { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); color: var(--cyan); font-size: 9px; line-height: 1.5; }

/* =================== KARTEN-BEREICH =================== */
.cards-wrap { padding: 10px 12px 40px; }
.cards-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--panel-bd); border-radius: 5px;
  backdrop-filter: blur(9px);
}
.cards-toolbar .ct-lab { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-right: 4px; }
#cardChips { display: flex; gap: 5px; flex-wrap: wrap; }
#cardChips .chip { background: rgba(6, 11, 20, 0.4); }

.grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px;
}
.card {
  background: var(--panel); border: 1px solid var(--panel-bd); border-radius: 5px;
  backdrop-filter: blur(9px) saturate(1.1); -webkit-backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; overflow: hidden;
}
.card.hidden { display: none; }
.card-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--hair);
}
.card-h .ch-n { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc); }
.card-h .ch-x { font-size: 11px; color: var(--ink-faint); cursor: pointer; line-height: 1; padding: 2px 4px; }
.card-h .ch-x:hover { color: var(--down); }
.card-h .ch-i {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: 13px; line-height: 1; padding: 2px 4px; transition: color 0.14s;
}
.card-h .ch-i:hover { color: var(--acc); }
.s9sp { flex: 1; }
.s9ctl { display: flex; gap: 5px; margin-left: 10px; }

/* Info-Popover */
.infopop {
  position: absolute; z-index: 60; width: 320px; max-width: calc(100vw - 28px);
  background: rgba(8, 14, 24, 0.97); border: 1px solid var(--panel-bd); border-radius: 6px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6); backdrop-filter: blur(14px);
  padding: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.infopop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.infopop .ip-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 13px 8px; border-bottom: 1px solid var(--hair); }
.infopop .ip-t { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); }
.infopop .ip-x { cursor: pointer; color: var(--ink-faint); font-size: 13px; line-height: 1; padding: 2px 4px; }
.infopop .ip-x:hover { color: var(--down); }
.infopop .ip-b { padding: 11px 13px 13px; font-size: 11.5px; line-height: 1.62; color: var(--ink-soft); }
.infopop .ip-b b { color: var(--ink); font-weight: 600; }
.infopop .ip-b .ip-read { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.s9btn {
  appearance: none; cursor: pointer; background: rgba(95, 198, 232, 0.06);
  border: 1px solid var(--hair); border-radius: 3px; color: var(--ink-dim);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em; padding: 3px 7px; transition: all 0.14s;
}
.s9btn:hover { color: var(--ink-soft); border-color: var(--ink-faint); }
.s9btn.on { color: var(--cyan); border-color: var(--cyan); background: rgba(95, 198, 232, 0.1); }
:root[data-variant="carbon"] .s9btn.on { color: var(--acc); border-color: var(--acc); background: rgba(var(--acc-rgb), 0.1); }
.card-b { padding: 11px 13px; font-size: 11px; }

/* Spalten-Spans */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-12 { grid-column: span 12; }

/* generische kv */
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; line-height: 1.7; }
.kv .k { color: var(--ink-dim); letter-spacing: 0.02em; }
.kv .v { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.kv .v.hi { color: var(--acc); }
.hint { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 8.5px; color: var(--ink-faint); line-height: 1.5; letter-spacing: 0.02em; }
.sub-h { margin: 9px 0 4px; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.empty { color: var(--ink-faint); font-size: 10px; padding: 8px 0; }

/* Tabellen */
.ltab { width: 100%; border-collapse: collapse; }
.ltab th { text-align: right; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 500; padding: 3px 6px; border-bottom: 1px solid var(--hair); }
.ltab th:first-child { text-align: left; }
.ltab td { padding: 3px 6px; font-size: 10.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-soft); border-bottom: 1px solid rgba(120, 150, 180, 0.05); }
.ltab td:first-child { text-align: left; }
.ltab td.deg, .ltab td.lab { color: var(--ink-dim); letter-spacing: 0.02em; }
.ltab td.val { color: var(--ink); }
.ltab tr.up td.val { color: var(--up); }
.ltab tr.down td.val, .ltab tr.dn td.val { color: var(--down); }
.ltab tr.mid td { background: rgba(var(--acc-rgb), 0.08); }
.ltab tr.mid td.val { color: var(--acc); font-weight: 600; }
.ltab td.d { color: var(--ink-dim); font-size: 9.5px; }
.ltab td.fib { color: var(--violet); font-size: 9.5px; }
.retrtab tr.key td { background: rgba(192, 138, 223, 0.07); }
.retrtab tr.key td.lab { color: var(--violet); }
.retrtab tr.half td.val { color: var(--violet); font-weight: 600; }

/* Square of Nine */
.s9grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.s9dial { width: 100%; height: auto; }
.s9dial .s9ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.s9dial .s9ring.faint { stroke: rgba(120, 150, 180, 0.07); }
.s9dial .s9spoke { stroke: var(--c-s9); stroke-width: 0.8; stroke-dasharray: 2 3; }
.s9dial .s9spoke.card { stroke: var(--c-s9card); stroke-width: 1.2; stroke-dasharray: none; }
.s9dial .s9lab { font-family: var(--mono); font-size: 7px; }
.s9dial .s9lab.up { fill: var(--up); }
.s9dial .s9lab.dn { fill: var(--down); }
.s9dial .s9core { fill: rgba(var(--acc-rgb), 0.12); stroke: var(--acc); stroke-width: 1.4; }
.s9dial .s9now { font-family: var(--serif); font-size: 13px; fill: var(--acc); }
.s9dial .s9nowlab { font-family: var(--mono); font-size: 6px; letter-spacing: 0.18em; fill: var(--ink-dim); }

/* Zyklen */
.cyc-list { display: flex; flex-direction: column; gap: 1px; }
.cyc-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: baseline; padding: 4px 6px; border-radius: 3px; }
.cyc-row .cyc-n { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); }
.cyc-row .cyc-dt { color: var(--ink); font-size: 10.5px; }
.cyc-row .cyc-cd { font-size: 9.5px; color: var(--ink-dim); }
.cyc-row.key .cyc-n { color: var(--acc); }
.cyc-row.key .cyc-n::after { content: ' ★'; font-size: 8px; color: var(--acc); }
.cyc-row.soon { background: rgba(var(--acc-rgb), 0.07); }
.cyc-row.soon .cyc-cd { color: var(--acc); }

/* Drittel-Chips */
.thirds { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.thirds .tl { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.chip-static, .thirds .chip { background: rgba(120, 150, 180, 0.08); border: 1px solid var(--hair); border-radius: 3px; padding: 3px 7px; font-size: 9.5px; color: var(--ink-soft); }

/* Konfluenz */
.conf-sec-h { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 7px; font-size: 10px; color: var(--acc); letter-spacing: 0.04em; }
.conf-sec-h:not(:first-child) { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--hair); }
.conf-sec-h span { font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.conf-row { padding: 5px 0; border-bottom: 1px solid rgba(120, 150, 180, 0.05); }
.conf-top { display: flex; justify-content: space-between; font-size: 10.5px; }
.conf-top .conf-dt { color: var(--ink); }
.conf-top .conf-cd { color: var(--ink-dim); font-size: 9.5px; }
.conf-bar { position: relative; height: 14px; background: rgba(120, 150, 180, 0.08); border-radius: 2px; margin: 4px 0; overflow: hidden; }
.conf-bar .cb-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.35), var(--acc)); border-radius: 2px; }
.conf-bar .cb-sc { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-size: 8.5px; color: var(--bg); font-weight: 700; }
.conf-mem { font-size: 8.5px; color: var(--ink-dim); letter-spacing: 0.02em; }
.pz-row { display: grid; grid-template-columns: 18px auto auto auto 1fr; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 10px; border-bottom: 1px solid rgba(120, 150, 180, 0.05); }
.pz-row .pz-tag { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 8.5px; font-weight: 700; }
.pz-row.r .pz-tag { background: rgba(224, 89, 63, 0.18); color: var(--down); }
.pz-row.s .pz-tag { background: rgba(55, 213, 111, 0.18); color: var(--up); }
.pz-row .pz-px { color: var(--ink); font-variant-numeric: tabular-nums; }
.pz-row .pz-d { color: var(--ink-dim); font-size: 9px; }
.pz-row .pz-sc { color: var(--acc); font-size: 9px; }
.pz-row .pz-mem { color: var(--ink-dim); font-size: 8.5px; text-align: right; }

/* Fächer-Liste */
.fan-list { display: flex; flex-direction: column; gap: 2px; }
.fan-row { display: grid; grid-template-columns: 44px 48px 1fr auto; gap: 8px; align-items: baseline; width: 100%;
  appearance: none; cursor: pointer; text-align: left; background: transparent; border: none; border-left: 2px solid transparent;
  padding: 4px 8px; transition: background 0.13s; }
.fan-row:hover { background: rgba(255, 255, 255, 0.03); }
.fan-row .fr-lab { font-family: var(--serif); font-size: 13px; color: var(--ink-soft); }
.fan-row .fr-deg { font-size: 9px; color: var(--ink-dim); }
.fan-row .fr-px { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 10.5px; text-align: right; }
.fan-row .fr-d { font-size: 9px; color: var(--ink-dim); text-align: right; }
.fan-row.on { border-left-color: var(--acc); }
.fan-row.on .fr-lab { color: var(--acc); }
.fan-row.main .fr-lab { font-weight: 600; }
.fan-row.off { opacity: 0.4; }

/* Footer */
.tfoot { text-align: center; padding: 22px 16px 30px; font-size: 8.5px; letter-spacing: 0.08em; color: var(--ink-faint); line-height: 1.8; }
.tfoot .warn { color: var(--ink-dim); }

/* =================== RESPONSIVE =================== */
@media (max-width: 1100px) {
  .col-3 { grid-column: span 6; } .col-4 { grid-column: span 6; }
  .col-5 { grid-column: span 6; } .col-7 { grid-column: span 6; } .col-6 { grid-column: span 12; }
  .col-12 { grid-column: span 12; }
}
@media (max-width: 680px) {
  .grid > .card { grid-column: span 12 !important; }
  .live .live-px { font-size: 22px; }
  #chart { height: 48vh; }
  .topbar { gap: 10px; }
}