/* ===========================================================================
   QuantLab — Stilbogen der Kundenplattform

   Herausgeloest aus design/dashboard_prototype.html. Der Prototyp bleibt die
   Referenz zum Anschauen; DIESE Datei ist die, die ausgeliefert wird. Wer
   etwas am Aussehen aendert, aendert es hier - und zieht den Prototypen nach,
   nicht umgekehrt.
   ======================================================================== */
/* ============================================================================
   QUANTLAB — Design-Tokens

   Ladder statt Flaeche: base -> surface -> raised -> overlay, jede Stufe nur
   knapp heller. Tiefe entsteht aus Hierarchie und Hairlines, nicht aus
   Schatten. Kein einziger Gradient im Interface.

   Abweichung von marketing/website-assets/quantlab_mockup.html, bewusst: die
   Marken-Hexes (#070a10 / #2bd47d) sind fuer ein Marketing-Dark ausgelegt und
   ziehen im Produkt zu stark ins Blaue bzw. Neon. Hier steht eine neutralere
   Kohle-Leiter, und die Semantikfarben sind entsaettigt. Das Blau bleibt als
   Bedienfarbe erkennbar verwandt.
   ========================================================================= */
:root{
  --base:#08090c; --surface:#0d0f14; --raised:#12151c; --overlay:#171b23;
  --bd:#1b202a; --bd2:#29303d;
  --fg:#e6e9ef; --fg2:#98a1b0; --fg3:#5d6675;
  --accent:#4a9eff; --accent-bg:rgba(74,158,255,.10);
  --pos:#3fb950; --pos-bg:rgba(63,185,80,.11);
  --neg:#f0574f; --neg-bg:rgba(240,87,79,.11);
  --warn:#d29922; --warn-bg:rgba(210,153,34,.11);

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px;
  --r1:6px;  --r2:8px;  --r3:10px; --r4:12px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --rail:216px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--base);color:var(--fg2);font:400 13.5px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{color:var(--fg);font-weight:600;letter-spacing:-.012em;line-height:1.25}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Jede Zahl monospaced und tabellarisch. Der wichtigste einzelne Wert in
   einem Finanzprodukt: ohne ihn springen Ziffern in Spalten. */
.n{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lbl{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg3)}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warnc{color:var(--warn)}

/* ------------------------------------------------------------------ Shell */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
/* Die Umbrueche stehen gesammelt am ENDE der Datei. Hier haetten sie
   dieselbe Spezifitaet wie die Regeln darunter und wuerden von ihnen still
   ueberschrieben - genau das ist beim ersten Durchgang passiert. */

.rail{background:var(--surface);border-right:1px solid var(--bd);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  padding:var(--s4) var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2) var(--s5)}
.brand .mk{width:22px;height:22px;border-radius:var(--r1);background:var(--fg);
  color:var(--base);display:grid;place-items:center;font:700 11px/1 var(--mono);flex:none}
.brand b{color:var(--fg);font:600 13.5px/1 var(--sans);letter-spacing:-.01em}
.brand span{color:var(--fg3);font:400 13.5px/1 var(--sans)}

.kbtn{display:flex;align-items:center;gap:var(--s2);width:100%;
  border:1px solid var(--bd);border-radius:var(--r2);background:var(--base);
  padding:6px var(--s2);color:var(--fg3);font-size:12.5px;margin-bottom:var(--s5);
  transition:border-color .12s,color .12s}
.kbtn:hover{border-color:var(--bd2);color:var(--fg2)}
.kbtn kbd{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--fg3);
  border:1px solid var(--bd);border-radius:4px;padding:3px 5px;background:var(--surface)}

.ngrp{padding:0 var(--s2);margin:var(--s5) 0 var(--s2)}
.ngrp:first-of-type{margin-top:0}
nav{display:flex;flex-direction:column;gap:1px}
nav a{display:flex;align-items:center;gap:var(--s3);padding:6px var(--s2);
  border-radius:var(--r1);font-size:13px;color:var(--fg2);
  transition:background .12s,color .12s}
nav a:hover{background:var(--raised);color:var(--fg)}
nav a[aria-current]{background:var(--raised);color:var(--fg);font-weight:500;
  box-shadow:inset 2px 0 0 var(--accent)}
nav svg{flex:none;color:var(--fg3)}
nav a:hover svg,nav a[aria-current] svg{color:var(--fg2)}
nav .tag{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--fg3)}

.railfoot{margin-top:auto;border-top:1px solid var(--bd);padding-top:var(--s3);
  display:flex;align-items:center;gap:var(--s2)}
.railfoot .st{width:6px;height:6px;border-radius:50%;background:var(--pos);flex:none}
.railfoot div{min-width:0}
.railfoot .a{font-size:12px;color:var(--fg);white-space:nowrap}
.railfoot .b{font-size:11px;color:var(--fg3)}

/* -------------------------------------------------------------------- Top */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;
  gap:var(--s3);height:52px;padding:0 var(--s6);background:var(--base);
  border-bottom:1px solid var(--bd)}
.top .bc{display:flex;align-items:center;gap:var(--s2);font-size:13px;min-width:0}
.top .bc a{color:var(--fg3)} .top .bc a:hover{color:var(--fg2)}
.top .bc .sep{color:var(--fg3);opacity:.5}
.top .bc strong{color:var(--fg);font-weight:600}
.top .sp{flex:1}
.acct{display:flex;align-items:center;gap:var(--s2);padding:3px var(--s2) 3px 3px;
  border:1px solid var(--bd);border-radius:999px;font-size:12px;color:var(--fg2)}
.acct .av{width:20px;height:20px;border-radius:50%;background:var(--raised);
  border:1px solid var(--bd2);color:var(--fg2);display:grid;place-items:center;
  font:600 9.5px/1 var(--mono);flex:none}
@media(max-width:600px){.acct span{display:none}}

.wrap{padding:var(--s6);max-width:1440px;width:100%}
[hidden]{display:none!important}

/* --------------------------------------------------------------- Elemente */
.ph{display:flex;align-items:flex-start;gap:var(--s5);margin-bottom:var(--s6)}
.ph h1{font-size:22px}
.ph p{font-size:13px;color:var(--fg2);margin-top:var(--s1);max-width:64ch}
.ph .act{margin-left:auto;display:flex;gap:var(--s2);flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 var(--s3);border-radius:var(--r1);font-size:12.5px;
  font-weight:500;border:1px solid transparent;transition:.12s;white-space:nowrap}
.btn-1{background:var(--fg);color:var(--base);font-weight:600}
.btn-1:hover{background:#fff}
.btn-2{border-color:var(--bd2);color:var(--fg)}
.btn-2:hover{background:var(--raised);border-color:var(--fg3)}
.btn-3{color:var(--fg2)} .btn-3:hover{color:var(--fg);background:var(--raised)}
.btn-w{width:100%}

.bdg{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 6px;
  border-radius:4px;font:600 10.5px/1 var(--mono);letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap}
.bdg.live{background:var(--pos-bg);color:var(--pos)}
.bdg.beta{background:var(--warn-bg);color:var(--warn)}
.bdg.new{background:var(--accent-bg);color:var(--accent)}
.bdg.off{background:rgba(93,102,117,.12);color:var(--fg3)}
.bdg i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

/* Panel = konzeptuelle Grenze, nicht Standardbehaelter. Viele Bereiche
   nutzen stattdessen nur eine Ueberschrift und eine Hairline. */
.panel{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r3)}
.ph2{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--bd);min-height:44px}
.ph2 h2,.ph2 h3{font-size:13px;font-weight:600}
.ph2 .sp{flex:1}
.pb{padding:var(--s4)}

.sect{margin-top:var(--s7)}
.sect>.hd{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s3);
  border-bottom:1px solid var(--bd);margin-bottom:var(--s4)}
.sect>.hd h2{font-size:14px}
.sect>.hd .sp{flex:1}

/* Segmented control */
.seg{display:inline-flex;border:1px solid var(--bd);border-radius:var(--r1);
  padding:2px;background:var(--base);gap:1px}
.seg button{height:22px;padding:0 9px;border-radius:4px;font:500 11.5px/1 var(--mono);
  color:var(--fg3);letter-spacing:.02em;transition:.12s}
.seg button:hover{color:var(--fg2)}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--fg)}

/* ------------------------------------------------------------ Metrikband */
.mstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  border:1px solid var(--bd);border-radius:var(--r3);background:var(--surface);
  overflow:hidden}
.mstrip>div{padding:var(--s3) var(--s4);border-left:1px solid var(--bd)}
.mstrip>div:first-child{border-left:0}
.mstrip .v{font:600 19px/1.2 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--fg);letter-spacing:-.03em;margin-top:7px}
.mstrip .v small{font-size:12px;color:var(--fg3);font-weight:400;letter-spacing:0}
.mstrip .s{font-size:11px;color:var(--fg3);margin-top:3px}
.mstrip .hint{cursor:help;border-bottom:1px dotted var(--fg3);padding-bottom:1px}

/* --------------------------------------------------------------- Tabelle */
.tw{border:1px solid var(--bd);border-radius:var(--r3);overflow:hidden;
  background:var(--surface)}
.tscroll{overflow-x:auto}
thead th{text-align:left;font:600 10.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg3);padding:0 var(--s4);height:34px;
  border-bottom:1px solid var(--bd);background:var(--surface);white-space:nowrap}
thead th.r{text-align:right}
thead th button{display:inline-flex;align-items:center;gap:5px;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;height:34px}
thead th button:hover{color:var(--fg2)}
thead th .ar{opacity:0;transition:opacity .12s;font-size:9px}
thead th[aria-sort] button{color:var(--fg2)}
thead th[aria-sort] .ar{opacity:1;color:var(--accent)}
tbody tr{border-bottom:1px solid var(--bd);cursor:pointer;transition:background .1s}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:var(--raised)}
tbody tr:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
tbody td{padding:0 var(--s4);height:46px;font-size:13px;color:var(--fg2);
  white-space:nowrap}
tbody td.r{text-align:right}
tbody td .nm{color:var(--fg);font-weight:500}
tbody td .mk{font:400 11px/1 var(--mono);color:var(--fg3);margin-top:3px}
tbody td .stack{display:flex;flex-direction:column;justify-content:center}
.spk{display:block}
@media(max-width:1180px){.hide-lg{display:none}}
@media(max-width:840px){.hide-md{display:none}}

/* --------------------------------------------------------------- Detail */
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:var(--s6);
  align-items:start;margin-top:var(--s6)}
@media(max-width:1080px){.dgrid{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:76px}

.dhd{display:flex;align-items:flex-start;gap:var(--s4)}
.dhd h1{font-size:24px}
.dhd .meta{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);
  font:400 11.5px/1 var(--mono);color:var(--fg3);flex-wrap:wrap}
.dhd .meta .d{width:3px;height:3px;border-radius:50%;background:var(--fg3);opacity:.6}
.dhd .act{margin-left:auto;display:flex;gap:var(--s2);flex:none}

/* Chart */
.cwrap{position:relative;padding:var(--s3) var(--s3) 0}
#cv{display:block;width:100%;height:auto;cursor:crosshair}
.tip{position:absolute;pointer-events:none;background:var(--overlay);
  border:1px solid var(--bd2);border-radius:var(--r2);padding:var(--s2) var(--s3);
  font-size:11.5px;opacity:0;transition:opacity .1s;z-index:5;min-width:132px}
.tip.on{opacity:1}
.tip .dt{font:500 10.5px/1 var(--mono);color:var(--fg3);letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:6px}
.tip .rw{display:flex;align-items:center;gap:var(--s2);margin-top:4px}
.tip .rw i{width:8px;height:2px;border-radius:1px;flex:none}
.tip .rw span{color:var(--fg2)}
.tip .rw b{margin-left:auto;font:600 12px/1 var(--mono);
  font-variant-numeric:tabular-nums;color:var(--fg)}
.lg{display:flex;gap:var(--s5);flex-wrap:wrap;padding:var(--s3) var(--s4);
  border-top:1px solid var(--bd);font-size:11.5px;color:var(--fg2)}
.lg div{display:flex;align-items:center;gap:7px}
.lg i{width:11px;height:2px;border-radius:1px;flex:none}
.lg i.dash{background:repeating-linear-gradient(90deg,var(--fg3) 0 3px,transparent 3px 6px)}

/* Heatmap */
.hm{display:grid;grid-template-columns:38px repeat(12,1fr);gap:2px;font-size:10px}
.hm .yl{font:500 10.5px/22px var(--mono);color:var(--fg3);text-align:right;
  padding-right:var(--s2)}
.hm .mh{font:500 10px/16px var(--mono);color:var(--fg3);text-align:center;
  letter-spacing:.04em}
.hm .c{height:22px;border-radius:3px;display:grid;place-items:center;
  font:500 10px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg2);
  transition:transform .1s}
.hm .c:hover{transform:scale(1.12);position:relative;z-index:2}
.hm .c.na{background:var(--base);color:var(--fg3);opacity:.4}

/* Robustheit */
.rob{display:flex;flex-direction:column}
.rob .r{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-top:1px solid var(--bd)}
.rob .r:first-child{border-top:0;padding-top:0}
.rob .k{font-size:12.5px;color:var(--fg2)}
.rob .k .hint{cursor:help;border-bottom:1px dotted var(--fg3)}
.rob .v{margin-left:auto;font:600 13px/1 var(--mono);
  font-variant-numeric:tabular-nums;color:var(--fg)}
.rob .bar{width:56px;height:3px;border-radius:2px;background:var(--bd);flex:none;
  overflow:hidden}
.rob .bar i{display:block;height:100%;border-radius:2px}

/* Prose */
.prose{font-size:13.5px;line-height:1.68;color:var(--fg2);max-width:70ch}
.prose h3{font-size:13px;margin:var(--s5) 0 var(--s2)}
.prose h3:first-child{margin-top:0}
.prose p+p{margin-top:var(--s3)}
.prose ul{margin-top:var(--s2);padding-left:var(--s5);display:flex;
  flex-direction:column;gap:6px}
.prose b{color:var(--fg);font-weight:600}
.prose code{font:400 12px/1 var(--mono);background:var(--base);border:1px solid var(--bd);
  border-radius:4px;padding:2px 5px;color:var(--fg2)}

/* Seitenleiste */
.kv{display:flex;align-items:center;gap:var(--s3);padding:7px 0;font-size:12.5px}
.kv .k{color:var(--fg3)}
.kv .v{margin-left:auto;font:500 12px/1 var(--mono);
  font-variant-numeric:tabular-nums;color:var(--fg2)}
.key{display:flex;align-items:center;gap:var(--s2);background:var(--base);
  border:1px solid var(--bd);border-radius:var(--r2);padding:7px var(--s3);
  margin-top:6px}
.key code{font:500 12.5px/1 var(--mono);letter-spacing:.07em;color:var(--fg);flex:1}
.key button{color:var(--fg3);display:grid;place-items:center}
.key button:hover{color:var(--accent)}
.steps{display:flex;flex-direction:column}
.steps li{display:flex;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--bd);
  font-size:12.5px;list-style:none}
.steps li:first-child{border-top:0;padding-top:0}
.steps .i{font:600 10.5px/1.6 var(--mono);color:var(--fg3);flex:none;width:14px}
.steps b{color:var(--fg);font-weight:500;display:block;margin-bottom:2px}
.steps code{font:400 11.5px/1.5 var(--mono);color:var(--accent);word-break:break-all}
.vlist{display:flex;flex-direction:column}
.vlist .v{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-top:1px solid var(--bd);font-size:12.5px}
.vlist .v:first-child{border-top:0;padding-top:0}
.vlist .t{font:600 12px/1 var(--mono);color:var(--fg);width:34px}
.vlist .d{font:400 11px/1 var(--mono);color:var(--fg3)}
.vlist .a{margin-left:auto;color:var(--fg3);font-size:11.5px}
.vlist .a:hover{color:var(--accent)}

/* Zustaende */
.sk{background:linear-gradient(90deg,var(--raised) 25%,#171b23 50%,var(--raised) 75%);
  background-size:200% 100%;animation:sh 1.3s linear infinite;border-radius:var(--r1)}
@keyframes sh{to{background-position:-200% 0}}
.skrow{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5) var(--s4)}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--s9) var(--s5);gap:var(--s3)}
.state .ic{width:34px;height:34px;border-radius:var(--r2);display:grid;
  place-items:center;border:1px solid var(--bd);color:var(--fg3)}
.state h3{font-size:13.5px}
.state p{font-size:12.5px;color:var(--fg3);max-width:42ch}
.state .btn{margin-top:var(--s2)}
/* Fehler an einem Nebenwert ist eine Zeile, kein Leerzustand: die zuletzt
   bekannten Zahlen bleiben stehen, der Hinweis sagt nur, dass sie alt sind. */
.err{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r2);background:var(--warn-bg);
  border:1px solid rgba(210,153,34,.22);font-size:11.5px;color:#dcc48a;line-height:1.45}
.err svg{color:var(--warn);flex:none;margin-top:1px}
.err button{margin-left:auto;color:var(--warn);font-weight:600;flex:none;
  text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------- Cockpit */
.cock{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s4);
  margin-top:var(--s4)}
.cock2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media(max-width:1080px){.cock,.cock2{grid-template-columns:minmax(0,1fr)}}

/* Der Streifen erscheint nur, wenn wirklich etwas ansteht. Er sitzt UEBER
   den Kennzahlen, weil er sonst zwischen ihnen untergeht. */
.alert{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r3);margin-bottom:var(--s4);font-size:13px;line-height:1.45}
.alert b{font-weight:600}
.alert svg{flex:none}
.alert .btn{margin-left:auto;flex:none}
.alert.krit{background:var(--neg-bg);border:1px solid rgba(240,87,79,.28);
  color:#f3b3af}
.alert.krit svg{color:var(--neg)} .alert.krit b{color:#ffd9d6}
.alert.warn{background:var(--warn-bg);border:1px solid rgba(210,153,34,.28);
  color:#dcc48a}
.alert.warn svg{color:var(--warn)} .alert.warn b{color:#f3e0b4}

.wl{display:flex;flex-direction:column;padding:var(--s2) var(--s4) var(--s4)}
.wl .w{display:flex;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--bd);
  font-size:12.5px;line-height:1.45}
.wl .w:first-child{border-top:0}
.wl .w i{width:3px;border-radius:2px;flex:none;align-self:stretch}
.wl .w.kritisch i{background:var(--neg)}
.wl .w.warnung i{background:var(--warn)}
.wl .w.info i{background:var(--fg3)}
.wl .w b{display:block;color:var(--fg);font-weight:500;margin-bottom:2px}
.wl .w span{color:var(--fg3)}
.wl .leer{padding:var(--s6) 0;text-align:center;font-size:12.5px;color:var(--fg3)}

/* Pufferbalken: die Zahl allein zwingt zum Nachdenken, der Balken nicht.
   Die Skala ist bei 5 Punkten gedeckelt - darueber ist der Unterschied
   zwischen 6 und 9 Punkten fuer die Entscheidung ohne Belang. */
.buf{display:flex;align-items:center;gap:var(--s3)}
.buf .track{flex:1;height:5px;border-radius:3px;background:var(--bd);
  overflow:hidden;min-width:56px}
.buf .fill{display:block;height:100%;border-radius:3px}
.buf .val{font:600 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;
  width:52px;text-align:right}
.buf .na{font:400 12px/1 var(--mono);color:var(--fg3)}

.kname{display:flex;flex-direction:column;gap:3px}
.kname b{color:var(--fg);font-weight:500;font-size:13px}
.kname span{font:400 11px/1 var(--mono);color:var(--fg3)}
.bots{display:flex;gap:5px;flex-wrap:wrap}
.bots em{font:500 10.5px/1 var(--mono);font-style:normal;padding:3px 6px;
  border-radius:4px;background:var(--raised);color:var(--fg2);white-space:nowrap}


/* Zeitleiste statt Tabelle: die Trades haben eine Reihenfolge in der ZEIT,
   und die traegt hier die Information - eine Tabelle daneben haette dieselbe
   Form wie die links und beide waeren schwerer zu unterscheiden. */
.tl{list-style:none;position:relative;padding:var(--s2) 0 0 var(--s5);margin:0}
.tl::before{content:"";position:absolute;left:57px;top:12px;bottom:14px;
  width:1px;background:var(--bd)}
.tl .tag{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 var(--s2);
  font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg3)}
.tl .tag:first-child{margin-top:0}
.tl .ev{display:grid;grid-template-columns:38px 16px minmax(0,1fr) auto;
  align-items:center;gap:var(--s2);padding:7px 0}
.tl .ev .t{font:400 11.5px/1 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--fg3);text-align:right}
.tl .ev .pt{display:grid;place-items:center}
.tl .ev .pt i{width:7px;height:7px;border-radius:50%;display:block;
  box-shadow:0 0 0 3px var(--base)}
.tl .ev.win .pt i{background:var(--pos)}
.tl .ev.loss .pt i{background:var(--neg)}
.tl .ev .c{min-width:0}
.tl .ev .c b{color:var(--fg);font-weight:500;font-size:13px}
.tl .ev .c em{font:500 10.5px/1 var(--mono);font-style:normal;color:var(--fg3);
  margin-left:7px}
.tl .ev .c span{display:block;font:400 11px/1.4 var(--mono);color:var(--fg3);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl .ev .r{font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;
  padding-left:var(--s3)}
.tl .ev:hover .c b{color:#fff}
@media(max-width:520px){.tl{padding-left:0}.tl::before{left:37px}
  .tl .ev{grid-template-columns:32px 16px minmax(0,1fr) auto}}


/* --------------------------------------------------------- Prop-Panel */
.propgrund{font-size:12.5px;line-height:1.6;color:var(--fg2);
  padding-bottom:var(--s3);border-bottom:1px solid var(--bd);margin-bottom:var(--s2)}
.propgrund b{color:var(--fg);font-weight:600}
.proplist{display:flex;flex-direction:column}
.proplist .h{display:grid;grid-template-columns:14px minmax(0,1fr) auto;
  align-items:start;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--bd);
  font-size:12.5px}
.proplist .h:first-child{border-top:0}
.proplist .ic{display:grid;place-items:center;padding-top:1px}
.proplist .ic i{width:8px;height:8px;border-radius:50%;display:block}
.proplist .h.info .ic i{background:var(--pos)}
.proplist .h.achtung .ic i{background:var(--warn)}
.proplist .h.kritisch .ic i{background:var(--neg)}
.proplist .t b{display:block;color:var(--fg);font-weight:500;margin-bottom:2px}
.proplist .t span{color:var(--fg3);font-size:11.5px;line-height:1.5}
.proplist .w{font:600 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--fg2);white-space:nowrap;padding-top:1px}
.bdg.bedingt{background:var(--warn-bg);color:var(--warn)}
.bdg.untauglich{background:var(--neg-bg);color:var(--neg)}

/* Sprachwahl - klein, im Kopf, keine Flaggen (eine Sprache ist kein Land). */
.lang{display:inline-flex;border:1px solid var(--bd);border-radius:var(--r1);
  padding:2px;gap:1px;background:var(--base);margin-right:var(--s2)}
.lang a,.lang button{display:grid;place-items:center;height:22px;padding:0 8px;border-radius:4px;
  font:600 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--fg3);transition:.12s}
.lang a:hover,.lang button:hover{color:var(--fg2)}
.lang a[aria-current],.lang button[aria-pressed="true"]{background:var(--raised);color:var(--fg)}
/* Auf der Anmeldeseite steht der Umschalter mittig unter dem Kasten. */
.mitte-lang{margin:var(--s5) auto 0;width:fit-content}
/* Abmelden sitzt als letztes im Kopf und soll nicht mitwandern. */
.top .ab{flex:none;display:flex}

/* Glossar: erklaert die Spalten der Tabelle. Bewusst keine Kacheln, nur
   Spalten mit Hairline dazwischen - es ist Fliesstext, kein Datensatz. */
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s5)}
.gloss>div{border-left:1px solid var(--bd);padding-left:var(--s4)}
.gloss p{font-size:12.5px;color:var(--fg3);line-height:1.6;margin-top:7px;
  max-width:40ch}

/* Aktivitaet */
.act-list{display:flex;flex-direction:column}
.act-list .it{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;
  border-top:1px solid var(--bd);font-size:13px}
.act-list .it:first-child{border-top:0;padding-top:0}
.act-list .dt{font:400 11px/1 var(--mono);color:var(--fg3);width:44px;flex:none}
.act-list .tx{color:var(--fg2);min-width:0}
.act-list .tx b{color:var(--fg);font-weight:500}

/* Command palette */
.scrim{position:fixed;inset:0;background:rgba(4,5,8,.66);z-index:80;
  display:grid;place-items:start center;padding-top:14vh;
  opacity:0;pointer-events:none;transition:opacity .13s}
.scrim.on{opacity:1;pointer-events:auto}
.cmd{width:min(560px,92vw);background:var(--overlay);border:1px solid var(--bd2);
  border-radius:var(--r4);overflow:hidden;transform:translateY(-6px);
  transition:transform .13s;box-shadow:0 16px 48px -12px rgba(0,0,0,.7)}
.scrim.on .cmd{transform:none}
.cmd .in{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);
  height:46px;border-bottom:1px solid var(--bd)}
.cmd .in input{flex:1;background:none;border:0;outline:0;color:var(--fg);
  font:400 14px var(--sans)}
.cmd .in input::placeholder{color:var(--fg3)}
.cmd .in kbd{font:500 10px/1 var(--mono);color:var(--fg3);border:1px solid var(--bd);
  border-radius:4px;padding:3px 5px}
.cmd .res{max-height:340px;overflow-y:auto;padding:var(--s2)}
.cmd .gl{padding:var(--s2) var(--s3) 5px}
.cmd .it{display:flex;align-items:center;gap:var(--s3);padding:7px var(--s3);
  border-radius:var(--r1);font-size:13px;color:var(--fg2);cursor:pointer}
.cmd .it[data-sel]{background:var(--raised);color:var(--fg)}
.cmd .it svg{color:var(--fg3);flex:none}
.cmd .it .hintk{margin-left:auto;font:400 11px/1 var(--mono);color:var(--fg3)}
.cmd .none{padding:var(--s6);text-align:center;font-size:12.5px;color:var(--fg3)}

/* Toast */
.toast{position:fixed;bottom:var(--s6);left:50%;transform:translate(-50%,10px);
  background:var(--overlay);border:1px solid var(--bd2);border-radius:var(--r2);
  padding:var(--s2) var(--s4);font-size:12.5px;color:var(--fg);z-index:90;
  opacity:0;pointer-events:none;transition:.16s;display:flex;align-items:center;
  gap:var(--s2)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.foot{margin-top:auto;border-top:1px solid var(--bd);padding:var(--s4) var(--s6);
  font-size:11.5px;color:var(--fg3);display:flex;gap:var(--s4);flex-wrap:wrap}

/* ====================================================== Umbrueche (Ende) */
.menu{display:none;place-items:center;width:30px;height:30px;flex:none;
  border:1px solid var(--bd);border-radius:var(--r1);color:var(--fg2)}
.menu:hover{border-color:var(--bd2);color:var(--fg)}
.nvsc{display:none;position:fixed;inset:0;background:rgba(4,5,8,.6);z-index:55}

@media(max-width:1180px){.hide-lg{display:none}}
@media(max-width:840px){.hide-md{display:none}}

@media(max-width:940px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* Leiste wird zur Schublade statt zu verschwinden: ohne sie haette Mobil
     ueberhaupt keine Navigation. */
  .rail{position:fixed;top:0;left:0;bottom:0;width:262px;height:100dvh;z-index:60;
    transform:translateX(-100%);transition:transform .2s ease}
  body.nav .rail{transform:none}
  body.nav .nvsc{display:block}
  .menu{display:grid}
  .top{padding:0 var(--s4)}
  .wrap{padding:var(--s4)}
  .dhd{flex-wrap:wrap}
  .dhd .act{margin-left:0;width:100%}
  .dhd .act .btn{flex:1}
  .side{position:static}
  .ph{flex-wrap:wrap}
  .ph .act{margin-left:0;width:100%}
  .seg{width:100%}
  .seg button{flex:1}
}
@media(max-width:520px){
  .mstrip{grid-template-columns:repeat(2,1fr)}
  .mstrip>div{border-left:1px solid var(--bd);border-top:1px solid var(--bd)}
  .mstrip>div:nth-child(2n+1){border-left:0}
  .mstrip>div:nth-child(-n+2){border-top:0}
  .hm{grid-template-columns:30px repeat(12,1fr);gap:1px}
  .hm .c{height:18px;font-size:8px}
  .hm .yl{font-size:9px;line-height:18px}
}

/* ==========================================================================
   Seiten ohne Geruest: Anmeldung, Fehler.

   Ein eigener, sehr schmaler Satz Regeln. Wer hier ankommt, hat genau eine
   Sache zu tun - alles, was ihn davon ablenkt, gehoert weg.
   ========================================================================= */
body.blank{display:grid;place-items:center;min-height:100vh;padding:var(--s5)}
.mitte{width:100%;max-width:400px}
.kasten{background:var(--surface);border:1px solid var(--bd);
  border-radius:var(--r4);padding:var(--s7) var(--s6) var(--s6)}
.kasten h1{font-size:20px;margin-bottom:var(--s2)}
.kasten .lead{font-size:13px;color:var(--fg2);line-height:1.6}
.kasten .fein{font-size:11.5px;color:var(--fg3);line-height:1.55;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--bd)}
.kasten .btn{margin-top:var(--s4)}

.feld{display:flex;flex-direction:column;gap:6px;margin-top:var(--s5)}
.feld label{font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg3)}
.feld input{height:38px;padding:0 var(--s3);border-radius:var(--r2);
  border:1px solid var(--bd);background:var(--base);color:var(--fg);
  font:400 14px var(--sans);transition:border-color .12s}
.feld input::placeholder{color:var(--fg3)}
.feld input:focus{outline:none;border-color:var(--accent)}
.feld .btn{margin-top:var(--s2)}

/* Der Abmeldeknopf sitzt als letztes im Kopf und soll nicht mitwandern. */
.top .ab{flex:none;display:flex}
/* Ein Konto ohne tragenden Zugang: der Punkt in der Leiste bleibt, aber
   grau - so sieht man den Unterschied, ohne dass etwas verschwindet. */
.railfoot .st.aus{background:var(--fg3)}