/* QUANT//TERMINAL — Sci-Fi Dashboard */
:root{
  --bg:#04060c; --bg2:#070b16; --panel:rgba(10,18,34,.72); --panel2:rgba(14,26,48,.85);
  --ink:#dff6ff; --ink2:#8fb3c9; --ink3:#5a7a91; --rule:rgba(0,240,255,.18); --grid:rgba(0,240,255,.07);
  --cyan:#00f0ff; --mag:#ff2bd6; --lime:#9dff3c; --amber:#ffb300; --red:#ff3b5c; --violet:#8a5cff;
  /* Serienfarben: halten / 200 / 100 / 50 */
  --dca:#00f0ff; --s1:#ff2bd6; --s3:#9dff3c; --s2:#ffb300;
  --good:#9dff3c; --bad:#ff3b5c; --warn:#ffb300;
  --goodbg:rgba(157,255,60,.09); --badbg:rgba(255,59,92,.10); --warnbg:rgba(255,179,0,.10);
  --head:"Orbitron","Rajdhani",system-ui,sans-serif;
  --sans:"Rajdhani",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(1200px 700px at 80% -10%,rgba(138,92,255,.18),transparent 60%),radial-gradient(900px 600px at -10% 20%,rgba(0,240,255,.12),transparent 60%),var(--bg);
  color:var(--ink);font:500 16px/1.55 var(--sans);min-height:100vh;overflow-x:hidden}
.bg-grid{position:fixed;inset:-50% -50% 0 -50%;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;transform:perspective(700px) rotateX(62deg) translateY(30%);transform-origin:50% 100%;
  mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 70%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 70%);
  animation:gridmove 12s linear infinite}
@keyframes gridmove{to{background-position:0 48px}}
.scan{position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.scan::after{content:"";position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(to bottom,transparent,rgba(0,240,255,.05),transparent);animation:sweep 7s linear infinite}
@keyframes sweep{to{top:100%}}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 20px 64px}

/* Top bar */
.hud-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--rule);font:500 12px var(--mono);letter-spacing:.12em;color:var(--ink2)}
.brand{display:flex;align-items:center;gap:10px;font:700 15px var(--head);letter-spacing:.2em;color:var(--ink)}
.brand b{color:var(--cyan)}
.logo{width:22px;height:22px;border:2px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 12px var(--cyan),inset 0 0 8px var(--cyan);animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(405deg)}}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);margin-right:8px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.boot{font:12px/1.7 var(--mono);color:var(--cyan);opacity:.75;padding-top:14px;min-height:20px;white-space:pre-wrap}

/* Hero */
.hero{padding:22px 0 8px}
.eyebrow{font:500 12px var(--mono);letter-spacing:.14em;color:var(--mag);text-shadow:0 0 8px rgba(255,43,214,.6)}
h1{font:900 clamp(34px,7vw,78px)/1 var(--head);letter-spacing:.04em;margin:14px 0 18px;color:#fff;
  text-shadow:0 0 18px rgba(0,240,255,.55),0 0 42px rgba(0,240,255,.25);position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glitch::before{color:var(--mag);transform:translate(2px,0);clip-path:inset(0 0 65% 0);opacity:.7;animation:gl1 3.2s infinite steps(1)}
.glitch::after{color:var(--cyan);transform:translate(-2px,0);clip-path:inset(60% 0 0 0);opacity:.7;animation:gl2 2.7s infinite steps(1)}
@keyframes gl1{0%,92%{transform:translate(0)}93%{transform:translate(4px,-2px)}96%{transform:translate(-3px,1px)}}
@keyframes gl2{0%,88%{transform:translate(0)}90%{transform:translate(-4px,2px)}94%{transform:translate(3px,-1px)}}
.lede{font-size:clamp(16px,1.9vw,19px);color:var(--ink2);max-width:78ch;margin:0 0 16px}
.lede b{color:var(--ink);font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.meta span{font:500 11px var(--mono);letter-spacing:.08em;color:var(--cyan);border:1px solid var(--rule);background:rgba(0,240,255,.05);padding:5px 9px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}

/* HUD-Rahmen */
.hud{position:relative;background:var(--panel);border:1px solid var(--rule);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.hud::before,.hud::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none}
.hud::before{top:0;left:0;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);filter:drop-shadow(0 0 4px var(--cyan))}
.hud::after{bottom:0;right:0;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);filter:drop-shadow(0 0 4px var(--cyan))}
.panel{padding:18px}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;margin:26px 0 8px}
.tile{padding:16px 18px 18px;transition:transform .25s,box-shadow .25s}
.tile:hover{transform:translateY(-3px);box-shadow:0 0 28px rgba(0,240,255,.15)}
.tile .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.tile .v{font:700 24px/1.15 var(--head);margin:8px 0 8px;color:var(--cyan);text-shadow:0 0 12px rgba(0,240,255,.6)}
.tile:nth-child(2) .v{color:var(--lime);text-shadow:0 0 12px rgba(157,255,60,.5)}
.tile:nth-child(3) .v{color:var(--red);text-shadow:0 0 12px rgba(255,59,92,.6)}
.tile:nth-child(4) .v{color:var(--mag);text-shadow:0 0 12px rgba(255,43,214,.55)}
.tile p{margin:0;font-size:15px;color:var(--ink2)}
.num{font-family:var(--mono);font-size:.92em;color:var(--ink)}

/* Sections */
section{margin-top:46px}
h2{font:700 clamp(18px,2.4vw,24px)/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;color:#fff;display:flex;align-items:center;gap:12px}
.h2n{width:10px;height:10px;background:var(--mag);box-shadow:0 0 10px var(--mag);transform:rotate(45deg);flex:none}
.sub{color:var(--ink2);font-size:15px;max-width:80ch}
.row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}

/* Toggles */
.toggle{display:inline-flex;flex-wrap:wrap;border:1px solid var(--rule);background:rgba(4,8,18,.7)}
.toggle button{font:500 12px var(--mono);letter-spacing:.06em;color:var(--ink2);background:none;border:0;padding:9px 14px;cursor:pointer;position:relative;transition:color .2s,background .2s}
.toggle button:hover{color:var(--ink);background:rgba(0,240,255,.06)}
.toggle button[aria-pressed="true"]{color:#001014;background:var(--cyan);box-shadow:0 0 16px rgba(0,240,255,.6);font-weight:700}
.toggle button:focus-visible,.chip:focus-visible{outline:2px solid var(--mag);outline-offset:2px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:500 12px var(--mono);color:var(--ink3);background:rgba(4,8,18,.6);border:1px solid rgba(0,240,255,.12);padding:6px 11px;cursor:pointer;transition:all .2s;opacity:.55}
.chip:hover{opacity:.85}
.chip[aria-pressed="true"]{opacity:1;color:var(--ink);border-color:var(--rule);background:rgba(0,240,255,.07);box-shadow:inset 0 0 12px rgba(0,240,255,.08)}

/* Small multiples */
.multiples{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:16px}
.chart-title{font:700 15px/1.3 var(--head);letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px;color:#fff}
.chart-note{font:12px/1.5 var(--mono);color:var(--ink3);margin:0 0 8px}
.chart-note b{color:var(--cyan);font-weight:500}
.nodata{display:flex;flex-direction:column;align-items:center;justify-content:center;height:260px;color:var(--ink3);font:13px var(--mono);letter-spacing:.08em;text-align:center;
  border:1px dashed rgba(255,59,92,.35);background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(255,59,92,.04) 10px 20px)}
.nodata::before{content:"⚠ SIGNAL LOST";color:var(--red);font:700 14px var(--head);letter-spacing:.2em;margin-bottom:8px;text-shadow:0 0 10px var(--red)}
.nodata span{font-size:12px}
.wtag{font:700 10px/1 var(--mono);letter-spacing:.08em;background:rgba(255,59,92,.15);color:var(--red);border:1px solid rgba(255,59,92,.5);padding:3px 6px;vertical-align:3px;margin-left:8px;animation:pulse 1.8s infinite}

/* Charts */
svg{display:block;width:100%;height:auto;overflow:visible}
svg text{fill:var(--ink3);font:10.5px var(--mono)}
.ln{filter:drop-shadow(0 0 3px currentColor)}
.tip{position:fixed;pointer-events:none;background:rgba(4,10,22,.94);color:var(--ink);border:1px solid var(--cyan);box-shadow:0 0 20px rgba(0,240,255,.35);font:12px/1.6 var(--mono);padding:9px 11px;z-index:60;white-space:nowrap}
.tip b{color:var(--cyan)}

/* Table */
.tbl-wrap{overflow-x:auto;padding:6px}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{padding:9px 10px;border-bottom:1px solid rgba(0,240,255,.07);text-align:left;font-size:14px}
thead th{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--rule)}
th.c,td.c{text-align:right}
td.num{font-family:var(--mono);font-size:12.5px}
tr.grp td{font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mag);padding-top:18px;border-bottom:1px solid rgba(255,43,214,.25)}
tbody tr:not(.grp):hover td{background:rgba(0,240,255,.05)}
.dot{display:inline-block;width:8px;height:8px;margin-right:8px;transform:rotate(45deg);box-shadow:0 0 6px currentColor}
.heat td.hg{background:var(--goodbg);color:#d9ffc2} .heat td.hr{background:var(--badbg);color:#ffc9d2}
.heat td.hg.strong{box-shadow:inset 3px 0 0 var(--good)} .heat td.hr.strong{box-shadow:inset 3px 0 0 var(--bad)}
.heat .rel{font-size:10.5px;color:var(--ink3)}

/* Flags */
.flag{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(0,240,255,.08)}
.flag:first-child{border-top:0;padding-top:0}
.pill{font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;flex:none;margin-top:3px;border:1px solid}
.pill.w{color:var(--amber);border-color:rgba(255,179,0,.5);background:var(--warnbg)}
.pill.b{color:var(--red);border-color:rgba(255,59,92,.5);background:var(--badbg)}
.pill.g{color:var(--lime);border-color:rgba(157,255,60,.5);background:var(--goodbg)}
.flag p{margin:0;font-size:15.5px;color:var(--ink2)} .flag b{color:var(--ink)}
.disc{margin-top:26px;font:12px/1.6 var(--mono);color:var(--ink3);max-width:90ch}
footer.sig{margin-top:40px;padding-top:16px;border-top:1px solid var(--rule);font:11px var(--mono);letter-spacing:.14em;color:var(--ink3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* Einblenden */
.reveal-in{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal-in.on{opacity:1;transform:none}

@media (max-width:560px){ .wrap{padding:0 16px 48px} .panel{padding:12px} .flag{flex-direction:column;gap:8px} .hud-top .status{font-size:10px} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important} .reveal-in{opacity:1;transform:none}}