/* ==========================================================================
   RECHT//LAB v2 — Struktur nach Vorbild der Verkehrsgeo-Lernplattform
   (Dashboard, Kapitel-Liste, Kapitelseite, Player, Glossar, Testmodus)
   ========================================================================== */
#top nav a{ font-size:13.5px; padding:9px 11px; }
.lead{ font-size:17px; line-height:1.65; color:#c9ced2; max-width:68ch; margin:-6px 0 18px; }
.tabnote{ border:1px solid var(--line); border-left:3px solid var(--cy); background:#14181c; color:#b9bfc4; font-size:14.5px; padding:10px 14px; margin:0 0 22px; }
.stat{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); border:1px solid #3a3a44; padding:2px 8px; white-space:nowrap; }
.stat.ok{ color:#0a0a0c; background:var(--gr); border-color:var(--gr); }
.star{ color:var(--ye); }

/* dashboard hero */
.hero.dash .dash-in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding-block:26px 30px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:30px; align-items:center; }
.hero.dash .glitch{ font-size:clamp(46px,8vw,92px); height:clamp(52px,9vw,100px); margin-top:8px; }
.hero.dash .sub{ font-size:clamp(18px,2.6vw,28px); }
.dash-lead{ color:#c4c9cd; font-size:16px; line-height:1.65; max-width:56ch; margin:14px 0 0; }
.hero.dash .cta{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.dash-side{ display:grid; gap:14px; min-width:0; }
.dash-art svg{ width:100%; height:auto; display:block; aspect-ratio:182/118; max-width:430px; margin-inline:auto; overflow:hidden; }
.prog{ background:#050506; border:1px solid #26262c; padding:14px 18px 16px; }
.prog-top{ display:flex; justify-content:space-between; gap:10px; }
.prog-big{ font-family:'VT323',monospace; font-size:74px; line-height:.9; color:var(--gr); text-shadow:0 0 12px rgba(57,255,136,.5); margin-top:4px; }
.prog-big small{ font-size:34px; }
.prog-txt{ color:#b9bfc4; font-size:14px; margin:4px 0 10px; }
.prog-stats{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.06em; color:var(--mute); text-transform:uppercase; }
.prog-stats b{ color:var(--led); font-weight:700; }
.mission{ display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:8px 0 6px; }
.mission-t{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:22px; color:#fff; text-transform:uppercase; margin:4px 0; }
.mission-s{ color:#c4c9cd; }
.countdown{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
@media (max-width:900px){ .hero.dash .dash-in{ grid-template-columns:1fr; } .dash-art svg{ max-width:340px; } }

/* chapter cards + list */
a.kcard .mc-top{ gap:10px; }
a.kcard p{ min-height:3.1em; }
.klist{ display:grid; gap:8px; }
a.krow{ display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 16px; background:var(--bg2); border:1px solid var(--line); color:inherit; transition:border-color .12s, transform .12s; }
a.krow:hover{ border-color:var(--or); transform:translateX(3px); }
.kr-id{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; color:#0a0a0c; background:var(--or); padding:3px 8px; text-align:center; }
.kr-main{ min-width:0; }
.kr-main b{ display:block; font-family:'Chakra Petch',sans-serif; text-transform:uppercase; letter-spacing:.03em; color:#fff; font-size:16px; }
.kr-main span{ display:block; color:var(--mute); font-size:13px; }
.kr-chips{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.kr-chips .chip{ margin:0; }
@media (max-width:640px){ a.krow{ grid-template-columns:56px minmax(0,1fr); } .kr-chips{ grid-column:1 / -1; justify-content:flex-start; } }

/* chapter page */
.crumbline{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); border-top:1px dashed var(--or); border-bottom:1px dashed var(--or); padding:8px 0; margin-bottom:22px; }
.crumbline a{ color:var(--cy); }
.crumbline b{ color:var(--or); }
.goals{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 24px; }
.goals .lbl{ margin-right:4px; color:var(--or); }
.goal{ border:1px solid #3a3a44; background:#17171a; color:#d9dde0; font-size:13.5px; padding:5px 11px; }
.goal::before{ content:"\25C6  "; color:var(--cy); font-size:10px; }
.box.bsp{ border-color:var(--or); background:linear-gradient(90deg, rgba(255,98,0,.10), rgba(255,98,0,.02)); }
.box.bsp>.tag{ color:var(--or); }
.termgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.termgrid>*{ min-width:0; }
a.term{ display:block; border:1px solid var(--line); background:var(--bg2); padding:10px 13px; color:inherit; }
a.term:hover{ border-color:var(--cy); }
a.term b{ display:block; color:#fff; font-weight:600; }
a.term span{ font-size:13.5px; color:#b9bfc4; }
.toc-foot{ border-top:1px solid var(--line); margin:10px 0 0; padding-top:8px; font-size:12px; color:var(--mute); }
.oq{ border:1px solid var(--line); border-left:3px solid var(--mg); background:var(--bg2); padding:14px 16px 4px; margin:14px 0; }
.oq .qt{ color:#fff; font-weight:600; }
.donebox{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:30px; }
details.transcript{ margin:4px 0 26px; }
details.transcript summary{ cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--cy); text-transform:uppercase; }
details.transcript p{ font-size:14.5px; color:#c4c9cd; margin-top:8px; }

/* video player v2 */
.vp2{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.vp2 .vstage{ border-right:1px solid #1e1e24; min-width:0; }
.vp2 .vside{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; min-width:0; }
.vmeta{ display:flex; justify-content:space-between; gap:10px; }
.vmeta b{ color:var(--or); }
.vname{ text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.vcap{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:21px; text-transform:uppercase; letter-spacing:.03em; color:var(--cy); line-height:1.15; }
.vnar{ color:#e2e5e7; font-size:15.5px; line-height:1.6; flex:1; }
.vbar{ height:6px; background:#1b1b20; position:relative; overflow:hidden; }
.vbar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--or); box-shadow:0 0 8px rgba(255,98,0,.6); }
.vp2 .ctl{ border:0; padding:0; gap:8px; }
.vp2 .ctl button{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.02em; }
.vp2 .ctl .play{ min-width:0; }
.vrate{ display:flex; gap:6px; align-items:center; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--mute); }
.vrate select{ background:#121215; border:1px solid #3a3a44; color:var(--ink); padding:6px 8px; font:inherit; }
.vdots{ display:flex; gap:6px; flex-wrap:wrap; }
.vdots button{ width:14px; height:14px; border:1px solid #4b4b56; background:#121215; cursor:pointer; padding:0; }
.vdots button.done{ background:#7a3a10; border-color:#7a3a10; }
.vdots button.on{ background:var(--or); border-color:var(--or); box-shadow:0 0 8px var(--or); }
.vtip{ font-size:12px; color:var(--mute); margin:0; }
@media (max-width:1000px){ .vp2{ grid-template-columns:1fr; } .vp2 .vstage{ border-right:0; border-bottom:1px solid #1e1e24; } }

/* glossar */
.glist{ display:grid; gap:10px; }
.gcard{ display:flex; gap:14px; justify-content:space-between; align-items:flex-start; border:1px solid var(--line); background:var(--bg2); padding:14px 16px; }
.gcard>div{ min-width:0; }
.gcard.ok{ border-color:rgba(57,255,136,.5); }
.gcard h4{ margin:0 0 4px; }
.gcard p{ color:#c4c9cd; font-size:14.5px; margin:0 0 8px; }
.gcard .chip{ margin:0; }
.gbtn{ flex:none; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; background:transparent; border:1px solid #4b4b56; color:var(--steel); padding:7px 11px; cursor:pointer; }
.gbtn:hover{ border-color:var(--gr); color:var(--gr); }
.gbtn.ok{ background:var(--gr); border-color:var(--gr); color:#0a0a0c; font-weight:700; }

/* testmodus */
.modebar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; border:1px solid var(--line); background:var(--bg2); padding:10px; margin-bottom:14px; }
.mbtn{ font-family:'Chakra Petch',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:13px; background:#121215; border:1px solid #3a3a44; color:var(--steel); padding:8px 12px; cursor:pointer; }
a.mbtn{ border-bottom:1px solid #3a3a44; }
.mbtn:hover{ border-color:var(--or); color:#fff; }
.mbtn.on{ background:var(--or); color:#0a0a0c; border-color:var(--or); }
.modebar select{ background:#0a0a0c; border:1px solid var(--cy); color:#fff; padding:8px 10px; font:inherit; font-size:14px; max-width:100%; }
.thist{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 18px; }
.thist .lbl{ margin-right:6px; }
.thist .chip{ margin:0; }
.shead2{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--steel); padding-bottom:8px; margin:8px 0 6px; }
.sres{ text-align:right; }
.sq{ border:1px solid var(--line); background:var(--bg2); padding:14px 16px 6px; margin:12px 0; }
.sq.good{ border-color:rgba(57,255,136,.55); }
.sq.bad{ border-color:rgba(255,43,43,.55); }
.sq-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px; }
.sq-meta .chip{ margin:0; }
.sq .qq{ font-size:17px; }
.opt.sel{ border-color:var(--cy); box-shadow:0 0 0 1px var(--cy); }
.opt.sel::before{ background:var(--cy); }
.selfchk{ display:flex; gap:8px; align-items:center; margin:8px 0 2px; cursor:pointer; color:#fff; }
.selfchk input{ accent-color:var(--gr); width:18px; height:18px; }
:focus-visible{ outline:2px solid var(--cy); outline-offset:2px; }

#app{ overflow-x:clip; }

/* ---------- Erklärfilm-Player v3: groß, Vollbild, Zeitleiste ---------- */
.vp3{ background:#050506; border:1px solid #2b2b33; margin:14px 0 8px; outline:none; }
.vp3 .vscreen{ position:relative; cursor:pointer; outline:none; }
.vp3 .vscreen:focus-visible{ box-shadow:inset 0 0 0 2px var(--cy); }
.vp3 .scr{ max-height:78vh; }
.vbig{ position:absolute; inset:0; margin:auto; width:84px; height:84px; border:2px solid var(--or); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--or); font-size:34px; padding-left:6px; background:rgba(10,10,12,.72); box-shadow:0 0 22px rgba(255,98,0,.45); z-index:3; pointer-events:none; transition:opacity .2s; }
.vp3.is-playing .vbig{ opacity:0; }
.vsubs{ display:none; }
.vtl{ position:relative; height:26px; margin:0 14px; cursor:pointer; touch-action:none; }
.vtl-track{ position:absolute; left:0; right:0; top:9px; height:8px; display:flex; gap:3px; }
.vtl-seg{ background:#24242b; min-width:4px; }
.vtl-seg.on{ background:#33333c; }
.vtl-fill{ position:absolute; left:0; top:9px; height:8px; width:0; background:var(--or); box-shadow:0 0 8px rgba(255,98,0,.55); pointer-events:none; mix-blend-mode:normal; }
.vtl-knob{ position:absolute; top:6px; width:14px; height:14px; margin-left:-7px; background:#fff; border:2px solid var(--or); border-radius:50%; pointer-events:none; transition:transform .1s; }
.vtl:hover .vtl-knob,.vtl.drag .vtl-knob{ transform:scale(1.3); }
.vtl:hover .vtl-track,.vtl.drag .vtl-track{ top:8px; height:10px; }
.vtl:hover .vtl-fill,.vtl.drag .vtl-fill{ top:8px; height:10px; }
.vtl-tip{ position:absolute; bottom:26px; transform:translateX(-50%); white-space:nowrap; background:#0a0a0c; border:1px solid var(--or); color:#fff; font-family:'JetBrains Mono',monospace; font-size:11.5px; padding:3px 8px; pointer-events:none; z-index:4; }
.vp3 .ctl{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:6px 14px 12px; border:0; }
.vp3 .ctl button{ background:#121215; border:1px solid #3a3a44; color:var(--steel); font-family:'JetBrains Mono',monospace; font-size:12px; padding:7px 11px; cursor:pointer; }
.vp3 .ctl button:hover{ border-color:var(--or); color:#fff; }
.vp3 .ctl button.on{ border-color:var(--cy); color:var(--cy); }
.vp3 .ctl button.play{ background:var(--or); color:#0a0a0c; border-color:var(--or); font-weight:700; min-width:118px; }
.vp3 .ctl .vfs{ margin-left:auto; border-color:var(--or); color:var(--or); }
.vtime{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--mute); font-variant-numeric:tabular-nums; }
.vtime b{ color:#fff; font-weight:700; }
.vinfo{ border-top:1px solid #1e1e24; padding:12px 16px 16px; display:grid; gap:6px; }
.vp3.no-subs .vnar{ display:none; }

/* Vollbild (echtes Fullscreen oder Seiten-Overlay) */
html.vfull-lock{ overflow:hidden; }
.vp3.vfull{ position:fixed; inset:0; z-index:300; margin:0; border:0; display:flex; flex-direction:column; padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
.vp3.vfull .vscreen{ flex:1; min-height:0; }
.vp3.vfull .scr{ aspect-ratio:auto; height:100%; max-height:none; }
.vp3.vfull .vinfo{ display:none; }
.vp3.vfull .vsubs{ display:block; position:absolute; left:50%; bottom:28px; transform:translateX(-50%); width:min(92%,1000px); text-align:center; z-index:3; background:rgba(5,5,6,.84); border:1px solid #2b2b33; color:#f1f3f4; font-size:clamp(16px,1.9vw,24px); line-height:1.45; padding:10px 18px; pointer-events:none; }
.vp3.vfull.no-subs .vsubs{ display:none; }
.vp3.vfull .vtl{ margin-top:8px; }
@media (max-width:640px){ .vp3 .ctl .vfs{ margin-left:0; } .vbig{ width:64px; height:64px; font-size:26px; } }
/* v3.1 — keine Überdeckung: HUD-Zeile bekommt eigenen Streifen, Vollbild-Untertitel unter dem Bild statt darüber */
.vp3 .scr svg{ top:clamp(18px,4.2%,30px); height:calc(100% - clamp(18px,4.2%,30px)); }
.vp3 .scr .hud,.vp3 .scr .rec{ top:6px; font-size:clamp(8.5px,1.6vw,10.5px); }
@media (max-width:520px){ .vp3 .scr .rec{ display:none; } }
.vp3.vfull .vscreen{ display:flex; flex-direction:column; }
.vp3.vfull .scr{ flex:1; min-height:0; height:auto; }
.vp3.vfull .vsubs{ position:static; transform:none; flex:none; margin:8px auto 0; }
.case-id small{ display:block; line-height:1.2; margin-bottom:5px; }
@media (max-height:520px){ .vp3.vfull .vsubs{ font-size:13px; line-height:1.35; padding:5px 10px; margin-top:4px; } .vp3.vfull .vtl{ margin-top:4px; } }