:root{
  --bg:#05070d; --panel:#0e162a; --fg:#e7ecf7; --muted:#9fb0c8;
  --accent:#f6d36b; --accent-2:#25e9ff; --ok:#7dff7a;
  --radius:22px; --shadow:0 15px 45px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:radial-gradient(1200px 800px at 70% -10%,#0f1b31 0%,var(--bg) 60%) fixed;
  overflow-x:hidden;
}

/* Gate */
.gate{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:radial-gradient(1200px 800px at 70% -10%,#0f1b31 0%,#05070d 60%);
  transition:opacity .6s ease}
.gate.hide{opacity:0;pointer-events:none}
.gate-card{
  width:min(820px,92vw); border-radius:20px; padding:26px 22px;
  background:linear-gradient(180deg,rgba(8,12,22,.95),rgba(6,10,18,.92));
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.gate-badge{width:56px;height:56px;border-radius:14px;
  background:conic-gradient(from 180deg,var(--accent),#946c1b,var(--accent));
  display:grid;place-items:center;font-family:Orbitron;font-weight:800;color:#111;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.gate h2{margin:10px 0 4px;font-family:Orbitron;letter-spacing:.06em}
.gate .muted{color:var(--muted)}
.gate-controls{display:flex;gap:12px;align-items:center;margin-top:14px}
.gate .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);text-decoration:none;color:var(--fg);font-weight:800;letter-spacing:.04em;
  position:relative;overflow:hidden;background:linear-gradient(180deg,var(--accent),#caa341);color:#141006;
  box-shadow:0 10px 24px rgba(246,211,107,.2)}
.gate-term{margin-top:14px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);padding:12px;max-height:200px;overflow:auto}
.gate-term pre{margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;line-height:1.45;white-space:pre-wrap;color:#e9f3ff}
.gate-progress{margin-top:10px;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.gate-progress>div{height:100%;width:0%;background:linear-gradient(90deg,#25e9ff,#f6d36b);box-shadow:0 0 18px rgba(37,233,255,.35)}
.gate-note{display:block;margin-top:10px;color:var(--muted);font-size:.84rem}

/* FX layers */
#bg3d{position:fixed;inset:0;z-index:-3;pointer-events:none}
#hud{position:fixed;inset:0;z-index:-1;filter:drop-shadow(0 0 6px rgba(37,233,255,.3));opacity:.9;pointer-events:none}
#sparks{position:fixed;inset:0;z-index:-2;pointer-events:none}
.circuit{position:fixed;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:screen;z-index:-2;
  background:linear-gradient(90deg,transparent 48%,rgba(37,233,255,.16) 50%,transparent 52%) 0 0/220px 220px,
             linear-gradient(0deg,transparent 48%,rgba(246,211,107,.16) 50%,transparent 52%) 0 0/220px 220px;
  animation:circuit 12s linear infinite}
@keyframes circuit{to{background-position:220px 0,0 220px}}
.scanlines{position:fixed;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:screen}
.scanlines::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.08) 0 1px,transparent 1px 3px)}
.grain{position:fixed;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.08}
.grain::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.10),rgba(0,0,0,0) 40%)}

/* Header */
header{position:sticky;top:0;z-index:100;background:linear-gradient(to bottom,rgba(5,7,13,.85),rgba(5,7,13,.35));backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;padding:14px 22px}
.brand{display:flex;align-items:center;gap:14px}
.badge{width:42px;height:42px;border-radius:12px;background:conic-gradient(from 180deg,var(--accent),#946c1b,var(--accent));
  display:grid;place-items:center;box-shadow:0 0 0 2px rgba(246,211,107,.25) inset,0 12px 28px rgba(246,211,107,.12)}
.badge span{font-family:Orbitron,Inter;font-weight:800;letter-spacing:.5px;color:#111;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.title{font-family:Orbitron,Inter;font-weight:800;letter-spacing:.08em}
nav a{color:var(--muted);text-decoration:none;margin:0 10px;font-weight:600}
nav a:hover{color:var(--fg)}

/* Hero */
.hero{position:relative;max-width:1200px;margin:28px auto 0;padding:42px 22px 10px}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.badge-strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:.78rem;color:#06101a;background:linear-gradient(180deg,var(--accent-2),#047f8f);padding:8px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(37,233,255,.25);font-weight:800;letter-spacing:.04em}
.chip.alt{background:linear-gradient(180deg,var(--accent),#c59f2f);color:#211d0b;box-shadow:0 6px 18px rgba(246,211,107,.25)}
.hero h1{font-family:Orbitron,Inter;font-size:clamp(2rem,3.6vw,3.6rem);margin:0 0 10px;line-height:1.05}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0}
.glitch::before{left:1px;top:-1px;color:#00e5ff;mix-blend-mode:screen;animation:gl1 3.2s infinite}
.glitch::after{left:-1px;top:1px;color:#ffd24d;mix-blend-mode:screen;animation:gl2 3.2s infinite}
@keyframes gl1{0%,12%,100%{clip-path:inset(0 0 0 0)}13%{clip-path:inset(20% 0 60% 0)}14%{clip-path:inset(40% 0 20% 0)}16%{clip-path:inset(15% 0 30% 0)}}
@keyframes gl2{
  0%,12%,100%{clip-path:inset(0 0 0 0)}
  11%{clip-path:inset(60% 0 20% 0)}
  15%{clip-path:inset(20% 0 65% 0)}
  17%{clip-path:inset(5% 0 20% 0)}
}
.hero p{color:var(--muted);margin:0 0 16px}
.hero-panel{background:linear-gradient(180deg,rgba(37,233,255,.08),rgba(246,211,107,.08));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:14px}
.stat label{display:block;color:var(--muted);font-size:.78rem}
.stat strong{display:block;font-size:1.05rem;margin-top:4px}
.cta{display:flex;gap:12px;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.1);text-decoration:none;color:var(--fg);font-weight:800;letter-spacing:.04em;transform:translateZ(0);position:relative;overflow:hidden;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,var(--accent),#caa341);color:#141006;box-shadow:0 10px 24px rgba(246,211,107,.2)}
.btn.ghost{background:linear-gradient(180deg,rgba(37,233,255,.14),rgba(37,233,255,.04))}
.btn::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent)}
.btn:hover::after{transition:transform .6s cubic-bezier(.2,.7,.2,1);transform:translateX(120%)}

/* Sections */
section{position:relative;max-width:1200px;margin:36px auto;padding:12px 22px}
.panel{background:linear-gradient(180deg,rgba(10,16,28,.9),rgba(8,12,22,.85));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;inset:-20%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),transparent);transform:translateX(-120%);animation:panelSweep 8s linear infinite;mix-blend-mode:overlay}
@keyframes panelSweep{to{transform:translateX(120%)}}
h2{font-family:Orbitron,Inter;letter-spacing:.06em;margin:0 0 14px;font-size:clamp(1.4rem,2.8vw,2rem)}
h3{font-family:Orbitron,Inter;letter-spacing:.03em;margin:16px 0 8px}
p,li{line-height:1.65}
.reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

/* Ranks */
.rank-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.rank{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;overflow:hidden}
.rank::before{content:"";position:absolute;inset:0;border:1px dashed rgba(246,211,107,.3);border-radius:14px;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:8px}
.rank .lvl{font-family:Orbitron;font-size:.8rem;color:var(--accent)}
.rank .name{font-weight:800}
.rank .pipe{height:2px;background:linear-gradient(90deg,transparent,var(--accent-2),transparent);margin:8px 0}

/* Depts */
.dept-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;overflow:hidden}
.dept-card h4{margin:0 0 6px}
.dept-card p{margin:0;color:var(--muted)}
.dept-card .tag{position:absolute;top:12px;right:12px;background:linear-gradient(180deg,rgba(246,211,107,.2),rgba(246,211,107,.08));border:1px solid rgba(246,211,107,.35);padding:6px 10px;border-radius:999px;color:var(--accent);font-weight:800;font-size:.72rem}

/* Case Files */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case{perspective:1200px}
.case .inner{position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.case:hover .inner,.case:focus-within .inner{transform:rotateY(180deg)}
.face{position:relative;min-height:220px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));box-shadow:var(--shadow);padding:18px}
.front{backface-visibility:hidden}
.back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden}
.holo{position:absolute;inset:0;border-radius:18px;background:conic-gradient(from 0deg,rgba(37,233,255,.25),rgba(246,211,107,.25),rgba(37,233,255,.25));mix-blend-mode:overlay;opacity:.25;mask:radial-gradient(120% 120% at 0% 0%,#000 40%,transparent)}

/* Requirements */
.reqs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.reqs .card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.tick{color:var(--ok);font-weight:900;margin-right:8px}
.num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:linear-gradient(180deg,var(--accent-2),rgba(37,233,255,.25));color:#002831;font-weight:900;margin-right:10px}

/* Badge */
.id-badge-wrap{position:relative}
#badge3d{position:relative;width:100%;height:260px;border-radius:18px;
  background:radial-gradient(350px 200px at 20% 20%,rgba(37,233,255,.08),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);overflow:hidden}
#badge3d.fallback{display:grid;place-items:center;font-family:Orbitron;color:var(--accent)}

/* Footer + print */
footer{max-width:1200px;margin:40px auto;padding:18px 22px;color:var(--muted)}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.muted{color:var(--muted)} .accent{color:var(--accent)}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:18px 0}
.print-only{display:none}

@page{size:A4;margin:16mm}
@media print{
  body{background:#fff !important;color:#000 !important}
  #bg3d,#hud,#sparks,.circuit,.scanlines,.grain,.gate{display:none !important}
  header{position:fixed;top:0;left:0;right:0;background:#fff;border:none}
  footer{position:fixed;bottom:0;left:0;right:0;background:#fff;color:#000}
  main{margin-top:80px;margin-bottom:60px}
  .panel,.dept-card,.rank,.card{background:#fff !important;border:1px solid #cfcfcf !important;box-shadow:none !important}
  .btn,.chip{border:1px solid #999;background:#fff !important;color:#000 !important;box-shadow:none}
  .print-only{display:block}
  .pagecount:after{content:"Seite " counter(page) " von " counter(pages)}
  .sign-line{margin-top:24px;width:320px;border-top:1px solid #000}
}