/* Selbst gehostete Schriften, keine Requests an fremde Hosts. */
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-var.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
:root{--ink-1000:#05070C;--ink-950:#0A0E17;--ink-900:#10141F;--ink-800:#161B28;--ink-700:#1E2535;--ink-600:#2A3246;--ink-300:#8892A6;--ink-50:#F2F4F8;--blue-500:#2E5CFF;--blue-400:#4E7BFF;--gold-500:#EDAA3C;--gold-400:#F8C465;--ok:#3DD68C;--warn:#F7B84B;--err:#F2545B;--r-sm:4px;--r-md:8px;--r-lg:14px;--r-full:999px;--dur-fast:140ms;--dur-base:240ms;--dur-slow:480ms;--ease:cubic-bezier(0.2,0.8,0.2,1);--mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;--sans:'Montserrat',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-1000);color:var(--ink-50);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue-400);text-decoration:none}
.back{position:fixed;top:16px;left:18px;z-index:70;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:var(--ink-300);background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--r-full);padding:8px 16px;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.back:hover{color:var(--ink-50);border-color:var(--blue-400)}

/* Fortschritt */
.rail{position:fixed;top:0;left:0;right:0;height:56px;z-index:60;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(rgba(5,7,12,.92),rgba(5,7,12,.55) 80%,transparent);pointer-events:none}
.rail i{width:10px;height:10px;border-radius:50%;background:var(--ink-700);border:1px solid var(--ink-600);transition:background var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.rail i.now{border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(46,92,255,.25)}
.rail i.done{background:var(--blue-500);border-color:var(--blue-500)}
.rail i:last-child.done{background:var(--gold-500);border-color:var(--gold-500)}

/* Hero */
.s-hero{min-height:92vh;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--ink-700)}
.s-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.s-hero .shade{position:absolute;inset:0;background:linear-gradient(rgba(5,7,12,.35),rgba(5,7,12,.92)),radial-gradient(900px 420px at 18% 8%,rgba(46,92,255,.18),transparent 60%)}
.s-hero .inner{position:relative;max-width:860px;margin:0 auto;padding:110px 28px 80px}
.kicker{font-family:var(--mono);font-size:12px;color:var(--blue-400);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:16px}
h1{font-size:clamp(34px,6vw,58px);font-weight:700;line-height:1.08;letter-spacing:-0.03em;margin:0 0 18px}
h1 .accent,.h .accent{font-weight:300;color:var(--blue-400)}
.lead{font-size:18px;color:var(--ink-300);max-width:620px;margin:0}
.meta{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px}
.marker{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-300)}
.marker::before{content:"";width:16px;height:2px;background:var(--blue-500)}
.btn-primary{display:inline-block;background:var(--blue-500);color:#fff;border:0;border-radius:var(--r-full);padding:13px 30px;font-family:var(--sans);font-weight:600;font-size:15px;margin-top:30px;cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.btn-primary:hover{background:var(--blue-400);text-decoration:none}
.btn-ghost{display:inline-block;background:transparent;color:var(--ink-50);border:1px solid var(--ink-600);border-radius:var(--r-full);padding:12px 26px;font-family:var(--sans);font-weight:500;font-size:14px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease)}
.btn-ghost:hover{border-color:var(--blue-400);text-decoration:none}

/* Level */
.lvl{position:relative;border-bottom:1px solid var(--ink-700);padding:88px 0;opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.lvl.in{opacity:1;transform:none}
.lvl .wrap{max-width:960px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.lvl.locked .wrap{filter:blur(6px);pointer-events:none;user-select:none}
.lock-note{display:none;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center}
.lvl.locked .lock-note{display:flex}
.lock-note span{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-300);background:var(--ink-900);border:1px solid var(--ink-600);border-radius:var(--r-full);padding:10px 22px}

/* Guardian Figur */
.gfig{position:sticky;top:80px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ink-700);background:var(--ink-900);aspect-ratio:3/4}
.gfig img{width:100%;height:100%;object-fit:cover;display:block}
.gfig .grad{position:absolute;inset:0;background:linear-gradient(rgba(5,7,12,.1),rgba(5,7,12,.6))}
.gfig .cap{position:absolute;left:16px;bottom:14px;color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase}
.gfig .gfx{display:none;position:absolute;inset:0}
.gfig.noimg img{display:none}
.gfig.noimg .gfx{display:block}
.gfx svg{width:100%;height:100%}

/* Level Inhalt */
.h{margin:0 0 4px;font-size:25px;font-weight:700;letter-spacing:-0.015em}
.lk{font-family:var(--mono);font-size:11.5px;color:var(--gold-500);letter-spacing:0.14em;text-transform:uppercase;margin:0 0 10px}
.story{color:var(--ink-300);margin:10px 0 22px}
.story strong{color:#fff}

/* Simulation */
.sim{background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--r-lg);padding:20px}
.cmds{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.cmd{font-family:var(--mono);font-size:12.5px;color:var(--ink-50);background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--r-full);padding:9px 16px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.cmd:hover{border-color:var(--blue-400)}
.cmd:disabled{opacity:.35;cursor:default}
.cmd.action{border-color:var(--blue-500);color:#fff;background:rgba(46,92,255,.12)}
.fb{min-height:22px;font-size:13.5px;margin:12px 0 0;color:var(--ink-300)}
.fb.ok{color:var(--ok)}.fb.warn{color:var(--warn)}.fb.err{color:var(--err)}

.cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.col{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--r-md);padding:12px;min-height:120px}
.col h5{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-300)}
.chip{display:inline-flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:12px;background:var(--ink-900);border:1px solid var(--ink-600);border-radius:var(--r-sm);padding:8px 12px;transition:border-color var(--dur-base) var(--ease)}
.chip em{font-style:normal;font-size:10px;color:var(--ink-300)}
.chip[data-st=modified]{border-color:var(--gold-500)}
.chip[data-st=modified] em{color:var(--gold-400)}
.chip[data-st=staged]{border-color:var(--blue-400)}
.chip[data-st=staged] em{color:var(--blue-400)}
.hist{display:flex;gap:8px;flex-wrap:wrap}
.node{font-family:var(--mono);font-size:11px;background:rgba(46,92,255,.14);border:1px solid var(--blue-500);color:var(--blue-400);border-radius:var(--r-full);padding:5px 12px}

.chk{list-style:none;margin:18px 0 0;padding:0}
.chk li{font-size:14px;color:var(--ink-300);padding-left:26px;position:relative;margin:7px 0}
.chk li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border:1px solid var(--ink-600);border-radius:50%}
.chk li.done{color:var(--ink-50)}
.chk li.done::before{background:var(--ok);border-color:var(--ok)}

.gsvg{width:100%;height:auto;display:block}

/* Code-Ansicht (Konflikt) */
.filebox{font-family:var(--mono);font-size:13px;line-height:1.8;background:var(--ink-950);border:1px solid var(--ink-700);border-radius:var(--r-md);padding:14px 16px;overflow-x:auto}
.filebox .mk{color:var(--ink-300)}
.line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.line .keep{font-family:var(--mono);font-size:11px;border:1px solid var(--ink-600);background:var(--ink-800);color:var(--ink-50);border-radius:var(--r-full);padding:3px 12px;cursor:pointer}
.line .keep:hover{border-color:var(--blue-400)}
.lA{color:var(--blue-400)}.lB{color:var(--gold-400)}

/* Remote */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stack{display:flex;flex-direction:column;gap:6px}
.cchip{font-family:var(--mono);font-size:12px;background:var(--ink-900);border:1px solid var(--ink-600);border-radius:var(--r-sm);padding:7px 11px}
.cchip.new{border-color:var(--gold-500);color:var(--gold-400)}
.cchip.mine{border-color:var(--blue-400);color:var(--blue-400)}

/* Reihenfolge-Spiel */
.pool,.seq{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;min-height:44px}
.step{font-size:13.5px;background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--r-md);padding:9px 14px;cursor:pointer;font-family:var(--sans)}
.step:hover{border-color:var(--blue-400)}
.seq .step{border-color:var(--blue-500);background:rgba(46,92,255,.10);cursor:default;counter-increment:s}
.seq .step::before{content:counter(s) ". ";font-family:var(--mono);color:var(--blue-400)}
.seq{counter-reset:s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:shake var(--dur-base) var(--ease)}

/* Pipeline */
.pipe{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.stage{font-family:var(--mono);font-size:12px;border:1px dashed var(--ink-600);color:var(--ink-300);border-radius:var(--r-md);padding:10px 16px;min-width:96px;text-align:center;transition:all var(--dur-base) var(--ease)}
.stage.fixed{border-style:solid;color:var(--ink-50)}
.stage.filled{border-style:solid;border-color:var(--blue-500);color:var(--ink-50)}
.stage.lit{border-color:var(--ok);color:var(--ok);box-shadow:0 0 14px rgba(61,214,140,.25)}
.stage.live{background:rgba(61,214,140,.12)}
.arrow{color:var(--ink-600);font-family:var(--mono)}

/* Quiz */
.qbox{margin-top:22px;background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--r-lg);padding:20px;display:none}
.qbox.show{display:block}
.qbox .qt{font-weight:600;margin:0 0 12px}
.opt{display:block;width:100%;text-align:left;background:var(--ink-900);border:1px solid var(--ink-600);color:var(--ink-50);padding:11px 15px;border-radius:var(--r-md);margin-bottom:8px;cursor:pointer;font-size:14.5px;font-family:var(--sans);transition:border-color var(--dur-fast) var(--ease)}
.opt:hover{border-color:var(--blue-400)}
.opt.right{border-color:var(--ok);background:rgba(61,214,140,.10)}
.opt.wrong{border-color:var(--err);background:rgba(242,84,91,.10)}
.opt:disabled{cursor:default}
.hintline{font-size:13px;color:var(--warn);min-height:18px;margin:4px 0 0}
.expl{font-size:14px;color:var(--ink-300);margin:10px 0 0;padding-left:12px;border-left:2px solid var(--ok);display:none}
.expl.show{display:block}

/* Level fertig */
.lvl-done{display:none;margin-top:20px;border-left:3px solid var(--ok);background:rgba(61,214,140,.08);border-radius:0 var(--r-md) var(--r-md) 0;padding:14px 18px}
.lvl-done.show{display:block}
.lvl-done b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ok);margin-bottom:4px}

/* Finale / Ende */
.finale .wrap{grid-template-columns:1fr;max-width:720px}
.endcard{display:none;text-align:center;background:var(--ink-900);border:1px solid var(--gold-500);border-radius:var(--r-lg);padding:44px 30px;box-shadow:0 0 40px rgba(237,170,60,.12)}
.endcard.show{display:block}
.endcard h2{font-size:30px;letter-spacing:-0.015em;margin:0 0 10px}
.endcard p{color:var(--ink-300)}
.endsum{text-align:left;margin:22px auto 6px;max-width:520px;color:var(--ink-300);font-size:14.5px}
.endsum li{margin:7px 0}
.endsum strong{color:#fff}
footer{padding:36px 28px;color:var(--ink-300);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer .fm{font-family:var(--mono);font-size:12px}

@media(max-width:860px){
  .lvl .wrap{grid-template-columns:1fr}
  .gfig{position:relative;top:0;aspect-ratio:16/9}
  .cols3{grid-template-columns:1fr}
  .cols2{grid-template-columns:1fr}
  .s-hero{min-height:80vh}
}

/* ---------- Eingebautes Terminal ---------- */
.lvl .wrap>div{min-width:0}
.term{margin-top:18px;border:1px solid var(--ink-600);border-radius:var(--r-md);background:#04060a;overflow:hidden}
.tout{max-height:220px;min-height:54px;overflow-y:auto;padding:12px 14px 6px;font-family:var(--mono);font-size:13.5px;line-height:1.65}
.tout:empty::before{content:"Tippe help für die Befehle dieses Levels.";color:var(--ink-300);opacity:.7}
.tl{color:var(--ink-50);white-space:pre-wrap;word-break:break-word}
.tl.cmdline{color:var(--ink-300)}
.tl.cmdline b{color:var(--ink-50);font-weight:500}
.tl.ok{color:#3DD68C}
.tl.warn{color:var(--gold-400)}
.tl.err{color:#F2545B}
.tl.mut{color:var(--ink-300)}
.tin{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--ink-700)}
.tps{flex:0 0 auto;font-family:var(--mono);font-size:13.5px;color:var(--blue-400);white-space:nowrap}
.tin input{flex:1 1 auto;min-width:0;width:0;border:0;outline:0;background:transparent;color:var(--ink-50);font-family:var(--mono);font-size:15px;caret-color:var(--gold-400)}
.tin input::placeholder{color:var(--ink-300);opacity:.55}
.trun{flex:0 0 auto;width:38px;height:34px;border:1px solid var(--ink-600);border-radius:8px;background:rgba(255,255,255,.05);color:var(--ink-50);font-size:15px;cursor:pointer}
.trun:hover{background:rgba(46,92,255,.18);border-color:var(--blue-500)}
.tchips{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px 13px;border-top:1px solid var(--ink-700);background:rgba(255,255,255,.02)}
.tchip{border:1px solid var(--ink-600);border-radius:var(--r-full);background:transparent;color:var(--ink-300);font-family:var(--mono);font-size:12.5px;padding:6px 12px;cursor:pointer;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.tchip:hover{color:var(--ink-50);border-color:var(--blue-400)}
@media (max-width:720px){
  .tout{font-size:12.5px}
  .tps{font-size:12px}
  .tin input{font-size:16px}
}

/* «Als Nächstes»-Marker: sagt in jedem Level, was jetzt dran ist. */
.next{margin:18px 0 4px;padding:13px 16px;border:1px solid rgba(237,170,60,.3);border-left:3px solid var(--gold-500);border-radius:var(--r-sm);background:rgba(237,170,60,.06)}
.next .nxrow{display:flex;align-items:baseline;gap:12px}
.next .nxl{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);white-space:nowrap}
.next .nxt{font-size:14.5px;line-height:1.55;color:var(--ink-50)}
.next .nxt code{font-family:var(--mono);font-size:13px;color:var(--gold-400)}
.next .nxw{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-300)}
.next .nxw:empty{display:none}
.next.off{display:none}
@media (max-width:720px){
  .next .nxrow{flex-direction:column;gap:4px}
}