/* ============================================================
   Schüler erziehen eine KI — Workshop-Auswertung
   Look: Deep-Space-Schaltpult (à la qdrantVisu) + Terminal/Diff-Motiv
   ============================================================ */
:root{
  --bg-0:#04050a; --bg-1:#080b14; --bg-2:#0c1120;
  --glass:rgba(13,19,34,.58); --glass-2:rgba(18,26,46,.5);
  --line:rgba(120,150,210,.16); --line-2:rgba(120,150,210,.28);
  --txt:#e7ecf6; --txt-2:#9fb0cc; --muted:#6f80a0;
  --cyan:#29e3ff; --violet:#a78bfa; --ink:#0a0e18;
  --gruen:#2af2a8; --gelb:#fbbf24; --rot:#fb7185;
  --glow-cyan:0 0 28px -6px rgba(41,227,255,.6);
  --glow-violet:0 0 28px -6px rgba(167,139,250,.55);
  --r:16px; --r-sm:10px;
  --f-display:'Chakra Petch',system-ui,sans-serif;
  --f-body:'Sora',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg-0); color:var(--txt); font-family:var(--f-body);
  font-weight:300; line-height:1.65; letter-spacing:.005em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(41,227,255,.28); color:#fff}

/* ---------- Atmosphäre ---------- */
.bg-nebula,.bg-grid,.bg-grain,.bg-vignette{position:fixed; inset:0; z-index:-1; pointer-events:none}
.bg-nebula{
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(41,227,255,.12), transparent 60%),
    radial-gradient(55% 55% at 85% 25%, rgba(167,139,250,.13), transparent 60%),
    radial-gradient(70% 60% at 60% 100%, rgba(42,242,168,.07), transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1) 55%,var(--bg-0));
}
.bg-grid{
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px; opacity:.25;
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);
}
.bg-grain{
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-vignette{box-shadow:inset 0 0 240px 40px rgba(0,0,0,.7)}

/* ---------- Fortschritt + Dot-Nav ---------- */
.progress-rail{position:fixed; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.04); z-index:50}
.progress-fill{height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:var(--glow-cyan)}
.dotnav{position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:14px}
.dotnav button{
  width:11px; height:11px; border-radius:50%; border:1px solid var(--line-2);
  background:transparent; cursor:pointer; position:relative; transition:.25s; padding:0;
}
.dotnav button:hover{border-color:var(--cyan)}
.dotnav button.active{background:var(--cyan); box-shadow:var(--glow-cyan); border-color:var(--cyan)}
.dotnav button span{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; color:var(--txt-2); background:var(--glass); border:1px solid var(--line);
  padding:3px 9px; border-radius:6px; opacity:0; pointer-events:none; transition:.25s; backdrop-filter:blur(8px);
}
.dotnav button:hover span,.dotnav button.active span{opacity:1}
@media(max-width:860px){.dotnav{display:none}}

/* ---------- Layout ---------- */
main{position:relative; z-index:1}
.stage{max-width:var(--maxw); margin:0 auto; padding:clamp(70px,11vh,150px) clamp(20px,5vw,40px)}
.stage-head{margin-bottom:46px; max-width:820px}
.stage-no{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cyan); display:inline-block; margin-bottom:14px;
}
.stage-head h2{font-family:var(--f-display); font-weight:700; font-size:clamp(30px,4.6vw,52px); line-height:1.05; letter-spacing:-.01em}
.stage-lead,.stage-head p{color:var(--txt-2); margin-top:18px; font-size:clamp(15px,1.7vw,18px)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:840px){.grid-2{grid-template-columns:1fr}}

/* ---------- Cards / Glass ---------- */
.card{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r);
  padding:28px; backdrop-filter:blur(12px); position:relative; overflow:hidden;
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.card h3{font-family:var(--f-display); font-weight:600; font-size:20px; letter-spacing:.01em; margin-bottom:14px}
.card p{color:var(--txt-2)}
.muted{color:var(--muted)} .small{font-size:13px} em{color:var(--txt); font-style:normal; border-bottom:1px dashed var(--line-2)}
code{font-family:var(--f-mono); font-size:.86em; background:rgba(41,227,255,.1); color:var(--cyan); padding:1px 6px; border-radius:5px}

/* ---------- Reveal-Animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ---------- HERO ---------- */
.hero{min-height:100vh; display:flex; align-items:center; max-width:var(--maxw); margin:0 auto; padding:80px clamp(20px,5vw,40px)}
.kicker{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-2);
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  border:1px solid var(--line); background:var(--glass); padding:8px 14px; border-radius:30px; backdrop-filter:blur(8px);
}
.dot-live{width:8px; height:8px; border-radius:50%; background:var(--gruen); box-shadow:0 0 12px var(--gruen); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero-title{font-family:var(--f-display); font-weight:700; font-size:clamp(38px,7.5vw,86px); line-height:1.02; letter-spacing:-.02em}
.grad{background:linear-gradient(100deg,var(--cyan),var(--violet) 60%,var(--gruen)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{max-width:680px; margin-top:26px; font-size:clamp(16px,2vw,20px); color:var(--txt-2)} .hero-sub strong{color:var(--txt); font-weight:600}
.hero-stats{display:flex; flex-wrap:wrap; gap:14px; margin-top:40px}
.hstat{border:1px solid var(--line); background:var(--glass); border-radius:var(--r-sm); padding:14px 20px; backdrop-filter:blur(8px); min-width:120px}
.hstat b{font-family:var(--f-display); font-weight:700; font-size:28px; display:block; color:#fff}
.hstat span{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-2)}
.scroll-hint{margin-top:54px; font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px}
.scroll-hint span{animation:bob 1.6s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- Intentions / Zielfrage / Kernfrage ---------- */
.intentions{list-style:none; display:flex; flex-direction:column; gap:13px}
.intentions li{display:flex; gap:13px; align-items:flex-start; font-size:14.5px; color:var(--txt-2)}
.intentions li b{color:var(--txt); font-weight:600}
.intentions .n{flex:0 0 auto; font-family:var(--f-mono); font-size:12px; color:var(--cyan); border:1px solid var(--line-2); border-radius:6px; padding:2px 8px; margin-top:1px}
.zielfrage{margin-top:22px; border-left:3px solid var(--cyan); padding:14px 18px; background:rgba(41,227,255,.06); border-radius:0 var(--r-sm) var(--r-sm) 0}
.zf-label{font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.zf-text{margin-top:6px; color:var(--txt)!important; font-size:18px}
.kernfrage{margin-top:30px; text-align:center; border:1px dashed var(--line-2); border-radius:var(--r); padding:30px; background:var(--glass)}
.kf-tag{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--violet)}
.kernfrage p{font-family:var(--f-display); font-size:clamp(20px,3vw,30px); margin-top:12px; color:var(--txt)}
.kf-more{display:block; font-family:var(--f-body); font-size:14px; color:var(--muted); margin-top:8px; letter-spacing:0}

/* ---------- Pipeline (Stage 2) ---------- */
.pipeline{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin-bottom:34px}
.node{flex:1; min-width:150px; background:var(--glass); border:1px solid var(--line); border-radius:var(--r); padding:18px; text-align:center; backdrop-filter:blur(10px); transition:.3s}
.node:hover{border-color:var(--line-2); transform:translateY(-3px)}
.node-ic{font-size:26px; display:block; margin-bottom:8px}
.node b{font-family:var(--f-display); font-size:16px}
.node small{display:block; color:var(--muted); font-size:12px; margin-top:5px}
.node-models{background:linear-gradient(160deg,rgba(167,139,250,.14),var(--glass)); border-color:rgba(167,139,250,.3)}
.flow{display:flex; align-items:center; color:var(--cyan); font-size:22px; opacity:.7}
@media(max-width:840px){.pipeline{flex-direction:column}.flow{transform:rotate(90deg); align-self:center}}

.bigstats{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
.bigstat b{font-family:var(--f-display); font-weight:700; font-size:30px; color:#fff; display:block; line-height:1}
.bigstat span{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-2)}
.modelbars{display:flex; flex-direction:column; gap:9px; margin-bottom:14px}
.mbar{display:grid; grid-template-columns:130px 1fr auto; gap:10px; align-items:center; font-size:12.5px}
.mbar .mname{font-family:var(--f-mono); color:var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mbar .mtrack{display:block; height:10px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden}
.mbar .mfill{display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--violet)); border-radius:6px; transform-origin:left; transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.in-view .mbar .mfill{transform:scaleX(var(--w))}
.mbar .mval{font-family:var(--f-mono); color:var(--muted); font-size:11px}

/* ---------- Timeline (Stage 3) ---------- */
.timeline{list-style:none; position:relative; margin:0 0 42px; padding-left:34px}
.timeline::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--cyan),var(--violet),rgba(255,255,255,.06))}
.tl-item{position:relative; padding:0 0 30px 8px}
.tl-item::before{content:""; position:absolute; left:-30px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--bg-0); border:2px solid var(--cyan); box-shadow:var(--glow-cyan)}
.tl-item.tl-open::before{border-color:var(--gelb); box-shadow:0 0 18px -4px var(--gelb); background:var(--bg-0)}
.tl-item.tl-key::before{background:var(--cyan)}
.tl-meta{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.tl-einheit{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
.tl-datum{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.tl-item h4{font-family:var(--f-display); font-weight:600; font-size:19px; margin:5px 0 7px}
.tl-item.tl-key h4{color:var(--cyan)}
.tl-item p{color:var(--txt-2); font-size:14.5px; max-width:760px}
.tl-mats{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.tl-mat{font-family:var(--f-mono); font-size:11px; color:var(--txt-2); border:1px solid var(--line); background:var(--glass-2); padding:4px 10px; border-radius:20px}
.tl-open .tl-einheit{color:var(--gelb)} .tl-open .tl-mat{border-style:dashed}

.cases{display:flex; flex-direction:column; gap:9px}
.case{display:grid; grid-template-columns:auto auto 1fr; gap:11px; align-items:center; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--glass-2); font-size:13.5px}
.case .cid{font-family:var(--f-display); font-weight:700; color:var(--cyan); width:34px}
.case .cstufe{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:2px 7px; border-radius:5px}
.case.c-trap{border-color:var(--rot); background:rgba(251,113,133,.08)}
.case.c-trap .cid{color:var(--rot)}
.case .ctxt b{color:var(--txt); font-weight:600} .case .ctxt span{color:var(--muted); display:block; font-size:12px}
.card-trap{border-color:rgba(251,113,133,.32); background:linear-gradient(160deg,rgba(251,113,133,.08),var(--glass))}
.card-trap h3{color:var(--rot)}

/* ---------- Prompt-Explorer (Stage 4) ---------- */
.explorer{border:1px solid var(--line-2); border-radius:var(--r); background:var(--glass); backdrop-filter:blur(14px); overflow:hidden}
.explorer-tabs{display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line)}
.gtab{flex:1; min-width:120px; padding:14px 12px; background:transparent; border:0; border-right:1px solid var(--line); color:var(--txt-2); font-family:var(--f-display); font-size:14px; cursor:pointer; transition:.2s; position:relative}
.gtab:last-child{border-right:0}
.gtab:hover{background:rgba(41,227,255,.05); color:var(--txt)}
.gtab.active{color:var(--cyan); background:rgba(41,227,255,.08)}
.gtab.active::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--cyan); box-shadow:var(--glow-cyan)}
.gtab small{display:block; font-family:var(--f-mono); font-size:10px; color:var(--muted); margin-top:2px; font-weight:400}
.explorer-body{display:grid; grid-template-columns:300px 1fr; min-height:430px}
@media(max-width:840px){.explorer-body{grid-template-columns:1fr}}
.explorer-left{padding:24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:18px}
.ver-meta{display:flex; align-items:center; gap:14px}
.ver-badge{font-family:var(--f-display); font-weight:700; font-size:26px; color:var(--ink); background:linear-gradient(135deg,var(--cyan),var(--violet)); width:58px; height:58px; border-radius:14px; display:grid; place-items:center; box-shadow:var(--glow-cyan)}
.ver-info{display:flex; flex-direction:column} .ver-info span:first-child{font-family:var(--f-mono); font-size:13px}
.rakfe{display:flex; gap:7px}
.rk{flex:1; text-align:center; border:1px solid var(--line); border-radius:8px; padding:9px 0; font-family:var(--f-display); font-weight:700; font-size:16px; color:var(--muted); background:var(--glass-2); transition:.35s; position:relative}
.rk small{display:block; font-family:var(--f-body); font-weight:400; font-size:8.5px; letter-spacing:.04em; color:var(--muted); margin-top:1px; text-transform:uppercase}
.rk.on{color:var(--ink); background:linear-gradient(135deg,var(--gruen),var(--cyan)); border-color:transparent; box-shadow:0 0 16px -4px var(--gruen)}
.rk.on small{color:rgba(10,14,24,.75)}
.slider{-webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px; background:rgba(255,255,255,.1); outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--cyan); cursor:pointer; box-shadow:var(--glow-cyan); border:3px solid var(--bg-0)}
.slider::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--cyan); cursor:pointer; border:3px solid var(--bg-0)}
.ver-dots{display:flex; gap:5px; flex-wrap:wrap; margin-top:-8px}
.ver-dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.14); cursor:pointer; transition:.2s}
.ver-dots i.active{background:var(--cyan); box-shadow:var(--glow-cyan)} .ver-dots i.seen{background:var(--violet)}
.growth{margin-top:auto}
.growth-bars{display:flex; align-items:flex-end; gap:3px; height:48px; margin-top:8px}
.growth-bars i{flex:1; background:linear-gradient(var(--cyan),rgba(41,227,255,.2)); border-radius:2px 2px 0 0; min-height:3px; opacity:.4; transition:.3s}
.growth-bars i.active{opacity:1; background:linear-gradient(var(--violet),var(--cyan))}
.explorer-right{position:relative}
.prompt-text{
  font-family:var(--f-mono); font-size:12.5px; line-height:1.7; color:var(--txt-2);
  white-space:pre-wrap; word-break:break-word; padding:24px; height:430px; overflow:auto; margin:0;
}
@media(max-width:840px){.prompt-text{height:320px}}
.prompt-text::-webkit-scrollbar{width:8px} .prompt-text::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px}
.explorer-note{padding:14px 24px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); background:var(--glass-2)}
.aha{margin-top:26px; border:1px solid rgba(41,227,255,.3); border-radius:var(--r); padding:22px 26px; background:linear-gradient(120deg,rgba(41,227,255,.08),var(--glass))}
.aha-tag{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
.aha p{margin-top:8px; color:var(--txt-2)} .aha strong{color:#fff}

/* ---------- Verdicts (Stage 5) ---------- */
.verdicts{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:60px}
@media(max-width:1000px){.verdicts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.verdicts{grid-template-columns:1fr}}
.vcard{background:var(--glass); border:1px solid var(--line); border-radius:var(--r); padding:20px; backdrop-filter:blur(12px); transition:.3s}
.vcard:hover{transform:translateY(-4px); border-color:var(--line-2)}
.vcard h4{font-family:var(--f-display); font-weight:600; font-size:16px} .vcard .vhead{color:var(--cyan); font-size:12.5px; margin:4px 0 14px; min-height:32px}
.amp{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.amp-row{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--txt-2)}
.amp-dot{width:13px; height:13px; border-radius:50%; flex:0 0 auto}
.amp-dot.gruen{background:var(--gruen); box-shadow:0 0 10px -2px var(--gruen)}
.amp-dot.gelb{background:var(--gelb); box-shadow:0 0 10px -2px var(--gelb)}
.amp-dot.rot{background:var(--rot); box-shadow:0 0 10px -2px var(--rot)}
.vstat{font-family:var(--f-mono); font-size:11px; color:var(--muted); border-top:1px solid var(--line); padding-top:11px; display:flex; justify-content:space-between}
.vnote{font-size:11.5px; color:var(--muted); margin-top:10px; line-height:1.5}
.vnote.warn{color:var(--gelb)}

/* ---------- HERO C5 ---------- */
.hero-c5{margin:20px 0 60px; border:1px solid var(--line-2); border-radius:calc(var(--r) + 6px); padding:clamp(24px,4vw,46px); background:radial-gradient(120% 100% at 50% 0,rgba(251,113,133,.08),var(--glass) 55%); backdrop-filter:blur(14px); position:relative; overflow:hidden}
.c5-head{text-align:center; max-width:760px; margin:0 auto 34px}
.c5-tag{font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--rot)}
.c5-head h3{font-family:var(--f-display); font-weight:600; font-size:clamp(19px,2.6vw,26px); margin-top:12px; color:var(--txt)}
.c5-head h3 strong{color:var(--gruen)}
.c5-steps{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0; align-items:stretch}
@media(max-width:900px){.c5-steps{grid-template-columns:1fr; gap:14px}}
.c5-step{opacity:0; transform:translateY(20px) scale(.98); transition:.7s cubic-bezier(.2,.7,.2,1); border-radius:var(--r); padding:20px; border:1px solid var(--line); background:var(--glass-2); display:flex; flex-direction:column}
.c5-step.show{opacity:1; transform:none}
.c5-step .c5-role{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px}
.c5-step .c5-when{font-family:var(--f-mono); font-size:10.5px; color:var(--muted); margin-bottom:12px}
.c5-step .c5-body{font-size:13.5px; line-height:1.6; color:var(--txt-2); overflow:auto; max-height:280px}
.c5-step.ok{border-color:rgba(42,242,168,.4)} .c5-step.ok .c5-role{color:var(--gruen)}
.c5-step.ask{border-color:rgba(41,227,255,.4)} .c5-step.ask .c5-role{color:var(--cyan)} .c5-step.ask .c5-body{font-family:var(--f-mono); color:var(--txt); font-size:15px}
.c5-step.knick{border-color:rgba(251,113,133,.5); background:linear-gradient(160deg,rgba(251,113,133,.1),var(--glass-2))} .c5-step.knick .c5-role{color:var(--rot)}
.c5-arrow{display:grid; place-items:center; color:var(--muted); font-size:22px; opacity:0; transition:.7s}
.c5-arrow.show{opacity:.6}
@media(max-width:900px){.c5-arrow{transform:rotate(90deg)}}
.c5-caption{opacity:0; transform:translateY(16px); transition:.8s; text-align:center; max-width:680px; margin:38px auto 0; font-family:var(--f-display); font-weight:600; font-size:clamp(18px,2.4vw,26px); line-height:1.4; color:#fff; border:0; padding:0; position:relative}
.c5-caption.show{opacity:1; transform:none}
.c5-caption::before{content:"„"; color:var(--rot)} .c5-caption::after{content:"“"; color:var(--rot)}
.c5-lesson{text-align:center; max-width:620px; margin:16px auto 0; opacity:0; transition:.8s} .c5-lesson.show{opacity:1}
.btn{font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt); background:var(--glass); border:1px solid var(--line-2); border-radius:30px; padding:10px 20px; cursor:pointer; transition:.25s; display:block; margin:26px auto 0}
.btn:hover{border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-cyan)}

/* ---------- Modellduell ---------- */
.duell{margin:0 0 50px}
.duell-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:760px){.duell-grid{grid-template-columns:1fr}}
.duell-side{border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--glass); backdrop-filter:blur(10px)}
.duell-side.win{border-color:rgba(42,242,168,.4)} .duell-side.lose{border-color:rgba(251,113,133,.4)}
.duell-model{font-family:var(--f-mono); font-size:13px; display:flex; align-items:center; gap:9px; margin-bottom:12px}
.duell-tagw{color:var(--gruen)} .duell-tagl{color:var(--rot)}
.duell-side .da{font-size:13px; line-height:1.65; color:var(--txt-2); max-height:300px; overflow:auto; white-space:pre-wrap}
.duell-lesson{margin-top:18px; text-align:center; color:var(--txt-2); font-size:15px; max-width:760px; margin-inline:auto}

/* ---------- These ---------- */
.thesis{margin:0 0 50px; border:1px solid var(--line-2); border-radius:var(--r); padding:clamp(24px,4vw,40px); background:var(--glass); backdrop-filter:blur(12px)}
.thesis .t-frage{font-family:var(--f-display); font-size:clamp(19px,2.6vw,26px); color:var(--txt); text-align:center}
.thesis .t-antwort{text-align:center; color:var(--cyan); font-family:var(--f-mono); letter-spacing:.06em; margin:10px 0 28px}
.t-punkte{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:840px){.t-punkte{grid-template-columns:1fr}}
.t-punkt{border-top:2px solid var(--cyan); padding:14px 4px 0} .t-punkt:nth-child(2){border-color:var(--violet)} .t-punkt:nth-child(3){border-color:var(--gelb)}
.t-punkt b{font-family:var(--f-display); font-size:16px; display:block; margin-bottom:7px} .t-punkt span{color:var(--txt-2); font-size:13.5px}

/* ---------- Quotes ---------- */
.quote{border-left:2px solid var(--line-2); padding:8px 0 8px 14px; margin:10px 0; font-size:12.5px; color:var(--txt-2)}
.quote .qmeta{font-family:var(--f-mono); font-size:10.5px; color:var(--muted); display:block; margin-top:5px}
.quote.bot{border-color:var(--cyan)} .quote.schueler{border-color:var(--gruen)}

/* ---------- Offen ---------- */
.card-open{border-style:dashed; border-color:var(--line-2); background:repeating-linear-gradient(45deg,var(--glass),var(--glass) 14px,var(--glass-2) 14px,var(--glass-2) 28px)}
.card-open .badge-soon{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gelb); border:1px solid var(--gelb); border-radius:20px; padding:3px 10px; display:inline-block; margin-bottom:12px}
.card-open .vorhersage{margin-top:14px; padding:12px 14px; border-radius:var(--r-sm); background:rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.2); font-size:13px; color:var(--txt-2)}

/* ---------- Footer ---------- */
.footer{max-width:var(--maxw); margin:0 auto; padding:70px clamp(20px,5vw,40px) 90px; border-top:1px solid var(--line)}
.footer h3{font-family:var(--f-display); font-weight:600; font-size:18px; margin-bottom:14px}
.footer p{max-width:880px; margin-bottom:10px}
.credit{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em; margin-top:18px}

/* ---------- Klickbare Fälle + Hinweise ---------- */
.hint{font-family:var(--f-body); font-weight:400; font-size:12px; color:var(--muted); letter-spacing:0}
.case{cursor:pointer}
.case:hover{border-color:var(--cyan); transform:translateX(3px); background:rgba(41,227,255,.06)}
.case:hover .ctxt b{color:var(--cyan)}
.case:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.c5-scrollhint{text-align:center; margin-top:24px; letter-spacing:.04em; transition:opacity .4s}

/* ---------- Modal (Fallbeispiele) ---------- */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(2,4,9,.72); backdrop-filter:blur(4px)}
.modal-panel{position:relative; z-index:1; width:min(720px,100%); max-height:86vh; overflow:auto; background:linear-gradient(160deg,var(--bg-2),var(--bg-1)); border:1px solid var(--line-2); border-radius:var(--r); padding:34px clamp(22px,4vw,40px); box-shadow:0 30px 80px -20px rgba(0,0,0,.8); animation:modalIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes modalIn{from{opacity:0; transform:translateY(20px) scale(.98)}to{opacity:1; transform:none}}
.modal-close{position:absolute; top:14px; right:16px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--glass); color:var(--txt-2); font-size:22px; line-height:1; cursor:pointer; transition:.2s}
.modal-close:hover{border-color:var(--rot); color:var(--rot)}
.modal-case .mc-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.modal-case .mc-head .cid{font-family:var(--f-display); font-weight:700; font-size:30px; color:var(--cyan)}
.modal-case .mc-head .cstufe{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:3px 9px; border-radius:5px}
.modal-case .mc-head h3{font-family:var(--f-display); font-weight:600; font-size:20px; margin:0}
.modal-case h4{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin:20px 0 7px}
.modal-case .mc-loesung h4{color:var(--gruen)}
.modal-case p{color:var(--txt-2); font-size:14.5px; line-height:1.7; margin:0}
.modal-case.trap .mc-head .cid{color:var(--rot)}

/* ---------- Downloads / Material ---------- */
.dl-block{margin-top:48px}
.dl-head{margin-bottom:20px}
.dl-head h3{font-family:var(--f-display); font-weight:600; font-size:22px; margin-bottom:6px}
.downloads{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(max-width:760px){.downloads{grid-template-columns:1fr}}
.dl-item{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--glass); text-decoration:none; color:var(--txt); transition:.22s; backdrop-filter:blur(8px)}
.dl-item:hover{border-color:var(--cyan); transform:translateY(-3px); box-shadow:var(--glow-cyan)}
.dl-ic{flex:0 0 auto; font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink); background:linear-gradient(135deg,var(--cyan),var(--violet)); padding:9px 9px; border-radius:8px}
.dl-txt{flex:1; display:flex; flex-direction:column; gap:3px; min-width:0}
.dl-txt b{font-family:var(--f-display); font-weight:600; font-size:15px}
.dl-txt span{color:var(--muted); font-size:12.5px; line-height:1.45}
.dl-meta{flex:0 0 auto; font-family:var(--f-mono); font-size:11px; color:var(--cyan); white-space:nowrap}

/* ---------- Visualisierungen: Lernkurve + Heatmap (Stage 4) ---------- */
.viz{display:grid; grid-template-columns:1.1fr 1fr; gap:22px; margin-bottom:26px}
@media(max-width:900px){.viz{grid-template-columns:1fr}}
.viz-card{background:var(--glass); border:1px solid var(--line); border-radius:var(--r); padding:24px; backdrop-filter:blur(12px)}
.viz-card h3{font-family:var(--f-display); font-weight:600; font-size:18px; margin-bottom:6px}
.viz-card svg{width:100%; height:auto; display:block; margin-top:12px; overflow:visible}
.lc-line{stroke-dasharray:1600; stroke-dashoffset:1600}
.in-view .lc-line{stroke-dashoffset:0; transition:stroke-dashoffset 1.7s cubic-bezier(.2,.7,.2,1)}
.lc-legend,.radar-legend{display:flex; flex-wrap:wrap; gap:9px 16px; margin-top:14px}
.lc-legend span,.radar-legend span{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--txt-2); font-family:var(--f-mono)}
.lc-legend i{width:15px; height:3px; border-radius:3px; display:inline-block}
.radar-legend span{cursor:pointer; transition:.2s} .radar-legend span:hover{color:#fff}
.radar-legend i{width:11px; height:11px; border-radius:50%; display:inline-block}
/* Heatmaps */
.hm-group{margin-bottom:15px}
.hm-title{font-family:var(--f-mono); font-size:12px; color:var(--txt-2); margin-bottom:6px; display:flex; justify-content:space-between; gap:8px}
.hm-grid{display:flex; flex-direction:column; gap:3px}
.hm-row{display:flex; align-items:center; gap:6px}
.hm-row .hm-lab{width:15px; font-family:var(--f-display); font-weight:700; font-size:12px; color:var(--muted); text-align:center}
.hm-cells{display:flex; gap:3px; flex:1}
.hm-cell{flex:1; height:13px; min-width:6px; border-radius:3px; background:rgba(255,255,255,.06); transition:.4s}
.hm-cell.on{background:linear-gradient(135deg,var(--gruen),var(--cyan)); box-shadow:0 0 8px -3px var(--gruen)}

/* ---------- Radar (Stage 5) ---------- */
.radar-wrap{display:flex; flex-direction:column; align-items:center}
#radar{width:100%; max-width:480px}
#radar svg{width:100%; height:auto; overflow:visible}
.rdr{transition:fill-opacity .25s,stroke-opacity .25s}

/* ---------- C5 Sticky-Scrollytelling ---------- */
.c5-track{position:relative; height:320vh; margin:24px 0 50px}
.hero-c5{position:sticky; top:5vh; margin:0 !important; max-height:90vh; display:flex; flex-direction:column}
.hero-c5 .c5-steps{flex:0 1 auto; min-height:0}
.hero-c5 .c5-step .c5-body{max-height:26vh}
/* Mobil: NICHT pinnen — normaler Fluss, volle Höhe, keine Überlappung von Caption/Lesson */
@media(max-width:900px){
  .c5-track{height:auto; margin:24px 0}
  .hero-c5{position:static; max-height:none}
  .hero-c5 .c5-step .c5-body{max-height:none}
  .c5-caption{margin-top:28px}
}

/* ---------- Generische Sticky-Scrollstopper ---------- */
.sticky-track{position:relative}
.sticky-inner{position:sticky; top:6vh; min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding:10px 0}
.pp{opacity:0; transform:translateY(16px); transition:.55s cubic-bezier(.2,.7,.2,1)}
.pp.show{opacity:1; transform:none}
@media(max-width:900px){
  .sticky-track{height:auto !important; margin:20px 0}
  .sticky-inner{position:static; min-height:0; display:block}
  .pp{opacity:1; transform:none}
}

/* Prompt-Evolution-Pin (Stage 4) */
.pe-head{text-align:center; margin-bottom:20px}
.pe-head h3{font-family:var(--f-display); font-weight:600; font-size:clamp(18px,2.4vw,25px)} .pe-head b{color:var(--violet)}
.pe-body{display:grid; grid-template-columns:300px 1fr; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:var(--glass); backdrop-filter:blur(12px)}
@media(max-width:900px){.pe-body{grid-template-columns:1fr}}
.pe-left{padding:24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:18px}
.pe-vnum{font-family:var(--f-display); font-weight:700; font-size:30px}
.pe-vnum .muted{font-size:13px; font-family:var(--f-mono); font-weight:400}
.pe-grow{height:8px; background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden}
.pe-grow-fill{height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--violet)); border-radius:6px; transition:width .2s}
.pe-prog{display:flex; gap:4px; flex-wrap:wrap}
.pe-prog i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14); transition:.2s}
.pe-prog i.on{background:var(--cyan); box-shadow:var(--glow-cyan)}
.pe-right .prompt-text{height:46vh}
@media(max-width:900px){.pe-right .prompt-text{height:320px}}

/* Lernkurve-Pin (Stage 4) */
.lc-pin .viz-card{max-width:840px; margin:0 auto}
.lc-line-scroll{stroke-dasharray:1600}
.lc-ring{opacity:0; transition:opacity .4s}
.lc-ring.show{opacity:1}

/* Modellduell-Pin (Stage 5) */
.duell-prompt{border:1px solid var(--line); border-left:3px solid var(--cyan); border-radius:var(--r-sm); padding:14px 18px; margin-bottom:16px; background:var(--glass-2); font-family:var(--f-mono); font-size:13px; color:var(--txt-2)}
.duell-prompt b{color:var(--cyan); font-family:var(--f-body)}
.duell-step{opacity:0; transform:translateY(18px); transition:.6s cubic-bezier(.2,.7,.2,1)}
.duell-step.show{opacity:1; transform:none}

/* Scroll-Strecken-Höhen der Pins (Desktop; mobil wird auf auto überschrieben) */
#pipeTrack{height:185vh}
#peTrack{height:320vh}
#lcTrack{height:200vh}
#duellTrack{height:240vh}