/* Markt-Terminal — Tokens */
:root{
  --ink:#0a1422;          /* Grund */
  --deck:#0f1c2e;         /* Panels */
  --deck-2:#14243a;       /* Hover / aktive Zeilen */
  --rule:#1f3350;         /* Linien */
  --text:#d6dee9;
  --dim:#7c8ca3;
  --amber:#f2a33a;        /* Tasten, Kennzahlen */
  --cyan:#5cc8e8;         /* Datenlinien */
  --up:#4cc38a;
  --down:#f0625c;
  --warn:#e9c46a;
  --paper:#e9e4d8;        /* Lesetext */
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ui:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --read:"Source Serif 4",Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--text);font:14px/1.45 var(--ui);-webkit-font-smoothing:antialiased}
a{color:var(--cyan)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)} .warn{color:var(--warn)} .dim{color:var(--dim)}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Login ---------- */
.login{min-height:100%;display:grid;place-items:center;padding:16px}
.login form{width:min(360px,100%);border:1px solid var(--rule);background:var(--deck);padding:28px}
.login h1{font:600 22px var(--ui);margin:0 0 4px;color:var(--amber)}
.login p{margin:0 0 18px;color:var(--dim)}
.login input{width:100%;padding:11px 12px;background:var(--ink);border:1px solid var(--rule);font-family:var(--mono);font-size:16px}
.login button{width:100%;margin-top:10px;padding:11px;border:0;background:var(--amber);color:#1b1205;font-weight:600}
.login .msg{margin-top:12px;min-height:20px;color:var(--down)}

/* ---------- Kopf ---------- */
.app{display:grid;grid-template-rows:auto auto 1fr;height:100vh;height:100dvh}
.top{display:flex;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid var(--rule);background:var(--deck)}
.logo{font:600 16px var(--ui);color:var(--amber);white-space:nowrap}
.cmd{flex:1;display:flex;align-items:center;gap:8px;max-width:620px;border:1px solid var(--rule);background:var(--ink);padding:0 10px}
.cmd span{color:var(--amber);font-family:var(--mono)}
.cmd input{flex:1;border:0;background:none;padding:8px 0;outline:none;font-family:var(--mono)}
.tabs{display:flex;gap:2px;margin-left:auto}
.tabs button{border:0;background:none;padding:6px 10px;color:var(--dim);display:flex;gap:6px;align-items:baseline}
.tabs button kbd{font:500 11px var(--mono);color:var(--amber);opacity:.7}
.tabs button.on{background:var(--deck-2);color:var(--text);box-shadow:inset 0 -2px var(--amber)}
.iconbtn{border:1px solid var(--rule);background:none;padding:5px 9px;color:var(--dim)}
.iconbtn.ai{color:var(--amber);border-color:#4a3a1c}

/* Laufband */
.tape{overflow:hidden;border-bottom:1px solid var(--rule);background:#08111d;white-space:nowrap;font:12.5px var(--mono)}
.tape-track{display:inline-flex;gap:28px;padding:6px 0;animation:tape 70s linear infinite}
.tape:hover .tape-track{animation-play-state:paused}
.tape b{color:var(--dim);font-weight:500;margin-right:6px}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Arbeitsfläche */
.stage{display:grid;grid-template-columns:1fr auto;min-height:0}
.view{overflow:auto;min-height:0;padding:14px 16px 40px}
.grid{display:grid;gap:12px}
.panel{background:var(--deck);border:1px solid var(--rule);min-width:0}
.panel>header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.panel>header h2{margin:0;font:600 14px var(--ui);color:var(--text)}
.panel>header .hint{color:var(--dim);font-size:12.5px}
.panel>header>div h2{display:inline;margin-right:10px}
.stamp{font:12px var(--mono);color:var(--dim);white-space:nowrap;text-align:right}
.stamp b{color:var(--text);font-weight:500}
.stamp.old b{color:var(--warn)}
/* Gestörte Datenquellen (source_health) – nur sichtbar, wenn etwas nicht läuft */
.health{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;padding:8px 14px;background:var(--deck);border:1px solid var(--rule);border-left:3px solid var(--warn);font-size:13px}
.health.bad{border-left-color:var(--down)}
.health .src{font-weight:600}
.health .bad .src{color:var(--down)} .health .warn-row .src{color:var(--warn)}
.health .why{color:var(--dim)}
.sig .k .d{font:11.5px var(--mono)}
.panel .body{padding:12px 14px}
.empty{padding:28px;text-align:center;color:var(--dim)}

/* ---------- Markt ---------- */
.markt{grid-template-columns:repeat(12,1fr)}
.markt .p-analog{grid-column:span 8}
.markt .p-bubble{grid-column:span 4}
.markt .p-signals{grid-column:span 8}
.markt .p-hot{grid-column:span 4}
.markt .p-charts{grid-column:span 8}
.markt .p-world{grid-column:span 12}
.markt .p-wire{grid-column:span 4}

.analog-now{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 14px;border-bottom:1px solid var(--rule);font-size:12.5px}
.analog-now span b{font-family:var(--mono);color:var(--text);font-weight:500;margin-left:4px}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{font-weight:500;color:var(--dim);text-align:right;padding:7px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
table.t th:first-child,table.t td:first-child{text-align:left}
table.t td{padding:7px 10px;border-bottom:1px solid #172a43;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.t tr.avg td{border-top:1px solid var(--amber);color:var(--amber)}
table.t tr:hover td{background:var(--deck-2)}
.sim{display:inline-block;width:46px;height:5px;background:#1d314d;vertical-align:middle;margin-left:8px}
.sim i{display:block;height:100%;background:var(--cyan)}
.readout{padding:12px 14px;border-top:1px solid var(--rule);color:var(--text);line-height:1.55}
.readout p{margin:0 0 6px}
.fineprint{color:var(--dim);font-size:12px;padding:0 14px 12px}

.gauge{padding:16px 14px 6px;text-align:center}
.gauge svg{width:100%;max-width:260px}
.gauge .score{font:600 34px var(--mono);margin-top:-46px}
.gauge .lbl{color:var(--dim);margin-bottom:10px}
.comp{list-style:none;margin:0;padding:0 14px 12px}
.comp li{display:grid;grid-template-columns:1fr 70px 46px;gap:8px;align-items:center;padding:5px 0;border-top:1px solid #172a43;font-size:12.5px}
.bar{height:5px;background:#1d314d}.bar i{display:block;height:100%}

.signals{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sig{padding:12px 14px;border-right:1px solid #172a43;border-bottom:1px solid #172a43;cursor:pointer}
.sig:hover{background:var(--deck-2)}
.sig .k{display:flex;justify-content:space-between;color:var(--dim);font-size:12.5px}
.sig .v{font:500 20px var(--mono);margin:4px 0 2px}
.sig .s{font-weight:600}
.sig .e{color:var(--dim);font-size:12.5px;margin-top:4px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}

.hot li{display:grid;grid-template-columns:1fr 54px 64px;gap:8px;align-items:center;padding:7px 14px;border-bottom:1px solid #172a43;cursor:pointer}
.hot li:hover{background:var(--deck-2)}
.hot ul{list-style:none;margin:0;padding:0}
.hot .mom{font-family:var(--mono);text-align:right}

.minis{display:grid;grid-template-columns:repeat(3,1fr)}
.mini{padding:10px 14px;border-right:1px solid #172a43;border-bottom:1px solid #172a43;cursor:pointer}
.mini:hover{background:var(--deck-2)}
.mini .n{color:var(--dim);font-size:12.5px}
.mini .v{font:500 18px var(--mono)}
.mini svg{width:100%;height:44px;display:block;margin-top:4px}

.wire{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}
.wire li{padding:9px 14px;border-bottom:1px solid #172a43;cursor:pointer}
.wire li:hover{background:var(--deck-2)}
.wire .m{font-size:12px;color:var(--dim);display:flex;gap:8px}
.wire .ti{margin-top:2px}

/* Quellenfarben */
.src{font-weight:600}
.s-blog{color:#f2a33a}.s-apollo{color:#b79cf2}.s-ecb{color:#6ea8ff}.s-fed{color:#5cc8e8}
.s-liberty_street{color:#7fd6b0}.s-jpm_eotm{color:#e7b8a0}.s-handelsblatt{color:#f07c6a}

/* Weltbörsen */
.world{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.wgroup{border-right:1px solid #172a43;border-bottom:1px solid #172a43;min-width:0;overflow:auto}
.wgroup h3{margin:0;padding:9px 10px 4px;font:600 13px var(--ui);color:var(--amber)}
.wgroup tr[data-id]{cursor:pointer}
.mgroup{grid-column:1/-1;margin:0;padding:12px 14px 6px;font:600 13px var(--ui);color:var(--amber);border-bottom:1px solid #172a43}

/* ---------- News ---------- */
.news{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:12px;height:100%}
.news .left{display:flex;flex-direction:column;min-height:0}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;border-bottom:1px solid var(--rule)}
.filters select,.filters input{background:var(--ink);border:1px solid var(--rule);padding:6px 8px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px;border-bottom:1px solid var(--rule)}
.chip{border:1px solid var(--rule);background:none;padding:3px 9px;font-size:12.5px;color:var(--dim)}
.chip.on{border-color:var(--amber);color:var(--amber)}
.meta{padding:6px 12px;color:var(--dim);font-size:12.5px;border-bottom:1px solid var(--rule)}
.list{overflow:auto;flex:1;min-height:0}
.item{padding:10px 12px;border-bottom:1px solid #172a43;cursor:pointer}
.item:hover{background:var(--deck-2)}
.item.on{background:var(--deck-2);box-shadow:inset 3px 0 var(--amber)}
.item .m{display:flex;gap:8px;font-size:12px;color:var(--dim);flex-wrap:wrap}
.item h3{margin:3px 0 3px;font:600 14.5px/1.3 var(--ui)}
.item p{margin:0;color:var(--dim);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{font-size:11px;border:1px solid var(--rule);padding:0 5px;color:var(--dim)}
mark{background:#f2a33a33;color:inherit;border-bottom:1px solid var(--amber)}
.pager{display:flex;justify-content:space-between;padding:8px 10px;border-top:1px solid var(--rule)}
.pager button{border:1px solid var(--rule);background:none;padding:4px 10px}
.pager button:disabled{opacity:.35;cursor:default}

/* Leser */
.reader{display:flex;flex-direction:column;min-height:0}
.reader .rh{padding:16px 22px 12px;border-bottom:1px solid var(--rule)}
.reader .rh .m{font-size:12.5px;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.reader .rh h1{font:600 24px/1.25 var(--read);color:var(--paper);margin:6px 0 8px}
.reader .rh .links{display:flex;gap:14px;font-size:13px}
.reader .close{display:none}
.article{overflow:auto;flex:1;min-height:0;padding:18px 22px 60px}
.article .inner{max-width:70ch;margin:0 auto;font:17px/1.7 var(--read);color:var(--paper)}
.article .inner h1,.article .inner h2,.article .inner h3{font-family:var(--read);color:#fff;line-height:1.3;margin:1.4em 0 .5em}
.article .inner h2{font-size:21px}.article .inner h3{font-size:18px}
.article .inner p{margin:0 0 1em}
.article .inner img{max-width:100%;height:auto;background:#fff;margin:8px 0}
.article .inner table{border-collapse:collapse;font:13px var(--ui);display:block;overflow:auto;margin:1em 0}
.article .inner td,.article .inner th{border:1px solid var(--rule);padding:4px 8px}
.article .inner blockquote{margin:1em 0;padding-left:14px;border-left:3px solid var(--amber);color:#cfc8b8}
.article .inner ul,.article .inner ol{padding-left:1.3em}
.article .inner figure{margin:1em 0}
.article .inner figcaption{font:12.5px var(--ui);color:var(--dim)}

/* ---------- Karte ---------- */
.karte{display:grid;grid-template-columns:1fr 400px;gap:12px;height:100%}
.mapwrap{position:relative;display:flex;flex-direction:column;min-height:0}
.mapwrap .body{flex:1;min-height:0;padding:0;position:relative}
#map{width:100%;height:100%;display:block}
#map path.c{stroke:#0a1422;stroke-width:.5;cursor:pointer;transition:fill .15s}
#map path.c.none{cursor:default}
#map path.c:hover{stroke:var(--amber);stroke-width:1.2}
#map path.c.sel{stroke:var(--amber);stroke-width:1.6}
#map .sphere{fill:#0c1828}
.maptip{position:absolute;pointer-events:none;background:var(--ink);border:1px solid var(--rule);padding:5px 8px;font-size:12.5px;white-space:nowrap}
.legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);padding:8px 14px;border-top:1px solid var(--rule)}
.legend .ramp{width:140px;height:8px;background:linear-gradient(90deg,#16304d,#2f6f8f,#5cc8e8,#f2a33a)}
.regbtns{display:flex;gap:4px;flex-wrap:wrap}
.side{display:flex;flex-direction:column;min-height:0}
.side .list{flex:1}

/* ---------- Makro ---------- */
.makro{grid-template-columns:1fr}
.chartbox canvas{width:100%!important;height:340px!important}
.mtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.mtile{padding:10px 14px;border-right:1px solid #172a43;border-bottom:1px solid #172a43;cursor:pointer}
.mtile:hover{background:var(--deck-2)}
.mtile.on{box-shadow:inset 0 0 0 1px var(--amber)}
.mtile .c{color:var(--dim);font-size:12px}
.mtile .n{font-size:13px;margin:1px 0 4px}
.mtile .v{font:500 19px var(--mono)}
.mtile .d{font:12.5px var(--mono);margin-left:6px}
.mtile .dt{color:var(--dim);font-size:11.5px}
.mtile svg{width:100%;height:30px;display:block;margin-top:4px}
.seg{display:flex;gap:2px}
.seg button{border:1px solid var(--rule);background:none;padding:3px 9px;font-size:12.5px;color:var(--dim)}
.seg button.on{border-color:var(--amber);color:var(--amber)}

/* ---------- KI-Panel ---------- */
.ai{width:380px;border-left:1px solid var(--rule);background:var(--deck);display:flex;flex-direction:column;min-height:0}
.ai header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--rule)}
.ai header h2{margin:0;font:600 14px var(--ui);color:var(--amber)}
.ai .log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ai .msg{padding:10px 12px;border:1px solid var(--rule);line-height:1.5}
.ai .msg.me{align-self:flex-end;background:var(--deck-2);max-width:90%}
.ai .msg.bot{background:var(--ink)}
.ai .ctx{padding:8px 14px;border-top:1px solid var(--rule);font-size:12px;color:var(--dim)}
.ai .sugg{display:flex;flex-direction:column;gap:6px}
.ai .sugg button{text-align:left;border:1px solid var(--rule);background:none;padding:7px 10px;color:var(--text)}
.ai .sugg button:hover{border-color:var(--amber)}
.ai form{display:flex;border-top:1px solid var(--rule)}
.ai form input{flex:1;border:0;background:var(--ink);padding:12px 14px;outline:none}
.ai form button{border:0;background:var(--amber);color:#1b1205;padding:0 16px;font-weight:600}

/* ---------- Responsiv ---------- */
@media (max-width:1100px){
  .markt .p-analog,.markt .p-signals,.markt .p-charts{grid-column:span 12}
  .markt .p-bubble,.markt .p-hot,.markt .p-wire{grid-column:span 6}
  .karte{grid-template-columns:1fr;height:auto}
  .mapwrap .body{height:460px}
  .side .list{max-height:520px}
}
@media (max-width:760px){
  .world{grid-template-columns:1fr}
  .top{flex-wrap:wrap;gap:8px}
  .cmd{order:3;flex-basis:100%;max-width:none}
  .tabs{margin-left:0;overflow:auto;order:2;flex-basis:100%}
  .tabs button kbd{display:none}
  .markt .p-bubble,.markt .p-hot,.markt .p-wire{grid-column:span 12}
  .minis{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:1fr;height:auto}
  .news .list{max-height:none}
  .reader{position:fixed;inset:0;z-index:20;background:var(--ink)}
  .reader .close{display:inline-block}
  .reader.idle{display:none}
  .ai{position:fixed;inset:0;width:auto;z-index:30}
  .mapwrap .body{height:300px}
  table.t th,table.t td{padding:6px 6px}
  .hide-sm{display:none}
}