/* MyDriveTheory – App-Stil
   Layout: eine ruhige Spalte (max. 880 px), oben die App-Leiste, auf dem Handy unten die Navigation */
:root{
  --brand:#08334F; --brand-2:#0E4A70; --brand-weak:#EAF2F8; --brand-tint:#F3F8FC;
  --text:#1F2937; --muted:#6B7280; --line:#D6E3EE; --bg:#FFFFFF; --surface:#F7FAFC;
  --good:#1E7F4E; --good-weak:#E7F5EE; --warn:#A86A00; --warn-weak:#FFF5DF; --bad:#B42335; --bad-weak:#FBECEE;
  --font:Arial, Helvetica, sans-serif; --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius:12px; --nav-h:60px;
  color-scheme:light;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%; }
[hidden]{ display:none !important; }
a{ color:var(--brand); }
h1,h2,h3{ color:var(--brand); line-height:1.15; margin:0; text-wrap:balance; }
h1{ font-size:clamp(22px,4.5vw,30px); }
h2{ font-size:20px; }
h3{ font-size:17px; }
p{ margin:0; }
.boot{ padding:40px 16px; color:var(--muted); text-align:center; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.stack{ display:grid; gap:16px; }
.stack-s{ display:grid; gap:8px; }
.row-wrap{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.spread{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; }

/* ---------- App-Rahmen ---------- */
.topbar{ position:sticky; top:0; z-index:20; background:var(--brand); color:#fff; padding-top:env(safe-area-inset-top,0px); }
.topbar-in{ max-width:960px; margin:0 auto; padding:0 16px; height:56px; display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.01em; }
.brand img{ width:30px; height:30px; border-radius:8px; }
.brand small{ display:block; font-weight:400; font-size:12px; color:#B9D3E6; letter-spacing:0; }
.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{ color:#D7E6F2; text-decoration:none; padding:8px 12px; border-radius:8px; font-size:14px; display:flex; align-items:center; gap:6px; }
.nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav a.on{ background:rgba(255,255,255,.14); color:#fff; font-weight:700; }
.nav svg{ width:18px; height:18px; }
.menu-btn{ background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:999px; padding:6px 12px; font:inherit; font-size:14px; cursor:pointer; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.menu{ position:absolute; right:16px; top:calc(56px + env(safe-area-inset-top,0px)); background:#fff; color:var(--text); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(8,51,79,.15); min-width:200px; padding:6px; display:grid; }
.menu a, .menu button{ text-align:left; background:none; border:0; font:inherit; color:var(--text); padding:9px 12px; border-radius:6px; text-decoration:none; cursor:pointer; }
.menu a:hover, .menu button:hover{ background:var(--brand-weak); }
.main{ max-width:880px; margin:0 auto; padding-inline:16px; padding-block:24px 48px; }
.main.wide{ max-width:1040px; }
@media (max-width:760px){
  .nav{ position:fixed; left:0; right:0; bottom:0; margin:0; background:#fff; border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); justify-content:space-around; z-index:30; }
  .nav a{ flex-direction:column; gap:2px; color:var(--muted); font-size:11px; padding:6px 8px; }
  .nav a.on{ background:var(--brand-weak); color:var(--brand); }
  .nav a:hover{ background:var(--brand-weak); color:var(--brand); }
  .has-nav .main{ padding-bottom:calc(var(--nav-h) + 40px); }
  .menu-btn{ margin-left:auto; }
  .brand small{ display:none; }
}

/* ---------- Bausteine ---------- */
.btn{ font:inherit; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:10px; padding:10px 16px; cursor:pointer; text-decoration:none; line-height:1.2; }
.btn:hover{ border-color:var(--brand); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700; }
.btn.primary:hover{ background:var(--brand-2); }
.btn.ghost{ background:transparent; }
.btn.danger{ color:var(--bad); }
.btn.small{ padding:6px 11px; font-size:13px; border-radius:8px; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.card{ border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:#fff; }
.card.tint{ background:var(--brand-tint); }
.card h3{ margin-bottom:4px; }
.field{ display:grid; gap:6px; }
.field label{ font-weight:700; font-size:14px; color:var(--brand); }
.field input{ font:inherit; font-size:16px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); width:100%; }
.field input:focus{ border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-weak); }
.error{ color:var(--bad); background:var(--bad-weak); border-radius:10px; padding:10px 12px; font-size:14px; }
.ok{ color:var(--good); background:var(--good-weak); border-radius:10px; padding:10px 12px; font-size:14px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; border:1px solid var(--line); color:var(--brand); font-weight:700; font-size:12px; background:#fff; white-space:nowrap; }
.chip.good{ color:var(--good); border-color:#B9E1CB; background:var(--good-weak); }
.chip.warn{ color:var(--warn); border-color:#F0D9A6; background:var(--warn-weak); }
.chip.bad{ color:var(--bad); border-color:#F0C3C9; background:var(--bad-weak); }
.chip.muted{ color:var(--muted); }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.dot.green{ background:#1E9E5A; } .dot.yellow{ background:#F2A900; } .dot.red{ background:#D7263D; }
.progress{ height:8px; background:var(--brand-weak); border-radius:999px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--brand); border-radius:999px; }
.back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:14px; }
.back:hover{ color:var(--brand); }
.toast{ position:fixed; left:50%; bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--brand); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; z-index:50; box-shadow:0 6px 20px rgba(8,51,79,.25); }

/* MyDriveTheory-Boxsystem */
.box{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff; }
.box-title{ display:flex; gap:10px; align-items:center; font-weight:700; color:var(--brand); margin:0 0 6px; }
.box-icon{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--brand-weak); color:var(--brand); font-size:15px; flex:0 0 auto; }
.box-merk{ border-left:5px solid var(--brand); background:#F8FCFF; }
.box-falle{ border-left:10px solid var(--brand); background:#F3F8FC; }
.box-logik{ border-top:4px solid var(--brand); }
.box-praxis{ border:2px dashed var(--brand); }
.box-check{ border:2px solid var(--brand); }
.box ul{ margin:0; padding-left:18px; }

/* ---------- Login & Onboarding ---------- */
.auth{ min-height:100%; display:grid; place-items:center; padding:32px 16px; background:linear-gradient(180deg, var(--brand-tint), #fff 60%); }
.auth-card{ width:100%; max-width:400px; display:grid; gap:18px; }
.auth-logo{ display:grid; justify-items:center; gap:10px; text-align:center; }
.auth-logo img{ width:120px; height:120px; }
.auth-logo p{ color:var(--muted); font-size:14px; }
.welcome{ max-width:640px; margin:0 auto; }
.steps-dots{ display:flex; gap:6px; }
.steps-dots span{ width:28px; height:5px; border-radius:3px; background:var(--line); }
.steps-dots span.on{ background:var(--brand); }
.feature{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; }
.feature .fi{ width:40px; height:40px; border-radius:10px; background:var(--brand-weak); display:grid; place-items:center; color:var(--brand); }
.feature .fi svg{ width:22px; height:22px; }
.video-box{ position:relative; aspect-ratio:16/9; max-width:100%; background:var(--brand); border-radius:var(--radius); overflow:hidden; color:#fff; display:grid; place-items:center; text-align:center; padding:24px; }
.video-box video{ position:absolute; inset:0; width:100%; height:100%; background:#000; }

/* ---------- Profil ---------- */
.hello{ display:grid; gap:4px; }
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.stat{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.stat b{ display:block; font-size:24px; color:var(--brand); font-variant-numeric:tabular-nums; line-height:1.1; }
.stat span{ font-size:13px; color:var(--muted); }
.tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tile{ display:grid; grid-template-rows:auto auto 1fr auto; gap:8px; border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-decoration:none; color:var(--text); background:#fff; transition:border-color .15s, box-shadow .15s; min-width:0; }
.tile:hover{ border-color:var(--brand); box-shadow:0 4px 16px rgba(8,51,79,.08); }
.tile .ti{ width:44px; height:44px; border-radius:12px; background:var(--brand-weak); color:var(--brand); display:grid; place-items:center; }
.tile .ti svg{ width:24px; height:24px; }
.tile h3{ font-size:18px; }
.tile .foot{ font-size:13px; color:var(--brand); font-weight:700; }
.tile.locked{ background:var(--surface); }
.next-card{ display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--brand); color:#fff; border-radius:var(--radius); padding:18px 20px; }
.next-card h3{ color:#fff; }
.next-card p{ color:#C9DDEC; font-size:14px; }
.next-card .btn{ background:#fff; color:var(--brand); border-color:#fff; font-weight:700; }
@media (max-width:760px){ .tiles{ grid-template-columns:1fr; } .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .stat{ padding:10px 12px; } .stat b{ font-size:20px; } }

/* ---------- Module & Lektionen ---------- */
.mod-list{ display:grid; gap:10px; }
.mod{ display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; text-decoration:none; color:var(--text); background:#fff; }
.mod:hover{ border-color:var(--brand); }
.mod .nr{ width:44px; height:44px; border-radius:10px; background:var(--brand-weak); color:var(--brand); font-weight:700; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.mod.passed .nr{ background:var(--good-weak); color:var(--good); }
.mod.empty{ background:var(--surface); }
.mod.empty .nr{ background:#EEF2F6; color:var(--muted); }
.mod h3{ font-size:16px; }
.mod .meta{ font-size:13px; color:var(--muted); }
.mod > div{ min-width:0; }
@media (max-width:520px){ .mod{ grid-template-columns:40px 1fr; } .mod .st{ grid-column:2; justify-self:start; } }
.lessons{ display:grid; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.lesson{ display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--text); background:#fff; }
.lesson:last-child{ border-bottom:0; }
a.lesson:hover{ background:var(--brand-tint); }
.lesson .li{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--brand-weak); color:var(--brand); font-size:13px; font-weight:700; }
.lesson.done .li{ background:var(--good-weak); color:var(--good); }
.lesson.soon{ color:var(--muted); background:var(--surface); }
.lesson.soon .li{ background:#EEF2F6; color:var(--muted); }
.lesson > div{ min-width:0; }

/* ---------- Lektionsplayer ---------- */
.player{ display:grid; gap:10px; }
.stage{ position:relative; aspect-ratio:16/9; max-width:100%; container-type:inline-size; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; color:#1F2937; }
.stage video{ position:absolute; inset:0; width:100%; height:100%; background:#000; }
.slide{ position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr auto; padding:3.4cqw 4.4cqw 2.6cqw; opacity:0; transition:opacity .45s ease; pointer-events:none; }
.slide.on{ opacity:1; }
.s-top{ display:flex; justify-content:space-between; align-items:baseline; gap:2cqw; font-size:1.5cqw; letter-spacing:.08em; text-transform:uppercase; color:#6B7280; font-weight:700; }
.s-top b{ color:#08334F; }
.s-body{ display:grid; grid-template-columns:1.1fr 1fr; gap:3.5cqw; align-items:center; min-height:0; }
.s-body.full{ grid-template-columns:1fr; }
.s-body.full > div{ max-width:72cqw; width:100%; margin:0 auto; }
.s-title{ font-size:3.9cqw; font-weight:700; color:#08334F; line-height:1.12; margin:0 0 1.5cqw; }
.s-text{ font-size:2cqw; line-height:1.5; color:#1F2937; margin:0 0 1.3cqw; }
ul.s-text{ padding-left:2.4cqw; }
ul.s-text li{ margin-bottom:.5cqw; }
.term{ display:inline-block; padding:.25cqw 1cqw; border:1px solid #D6E3EE; border-radius:999px; color:#08334F; font-weight:700; font-size:1.45cqw; background:#fff; margin-top:.4cqw; }
.s-foot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid #D6E3EE; padding-top:1.3cqw; font-size:1.4cqw; color:#6B7280; }
.s-foot .mark{ color:#08334F; font-weight:700; }
.sbox{ border:1px solid #D6E3EE; border-radius:1.2cqw; padding:1.3cqw 1.6cqw; font-size:1.8cqw; line-height:1.45; margin-bottom:1.2cqw; background:#fff; }
.sbox .bt{ display:flex; gap:1cqw; align-items:center; font-weight:700; color:#08334F; margin-bottom:.5cqw; }
.sbox .bi{ width:2.8cqw; height:2.8cqw; border-radius:.8cqw; display:grid; place-items:center; background:#EAF2F8; font-size:1.6cqw; }
.sbox ul{ margin:0; padding-left:2.4cqw; }
.sbox.b-falle{ border-left:1cqw solid #08334F; background:#F3F8FC; }
.sbox.b-merk{ border-left:.5cqw solid #08334F; background:#F8FCFF; }
.sbox.b-logik{ border-top:.45cqw solid #08334F; }
.sbox.b-praxis{ border:.2cqw dashed #08334F; }
.sbox.b-check{ border:.25cqw solid #08334F; font-size:2cqw; }
.visual{ display:flex; justify-content:center; align-items:flex-start; gap:2.4cqw; flex-wrap:wrap; }
.visual figure{ margin:0; display:grid; justify-items:center; gap:.8cqw; }
.visual figcaption{ font-size:1.55cqw; color:#4B5563; text-align:center; line-height:1.3; }
.visual .ic-tl{ height:19cqw; width:auto; }
.visual .ic{ width:11cqw; height:11cqw; }
.visual.small{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8cqw 2.4cqw; }
.visual.small .ic{ width:8.4cqw; height:8.4cqw; }
.v-cards{ display:grid; gap:1.2cqw; width:100%; }
.v-card{ border:1px solid #D6E3EE; border-radius:1.2cqw; padding:1.2cqw 1.6cqw; background:#F8FCFF; }
.v-card b{ display:block; color:#08334F; font-size:2cqw; }
.v-card span{ font-size:1.65cqw; color:#4B5563; }
.v-stats{ display:grid; gap:1.2cqw; width:100%; }
.v-stat{ display:grid; grid-template-columns:13cqw 1fr; gap:1.6cqw; align-items:center; border:1px solid #D6E3EE; border-radius:1.2cqw; padding:1.2cqw 1.6cqw; }
.v-stat b{ font-size:3.4cqw; color:#08334F; line-height:1; }
.v-stat span{ font-size:1.7cqw; color:#374151; }
.v-rank{ margin:0; padding:0; list-style:none; display:grid; gap:.9cqw; width:100%; counter-reset:r; }
.v-rank li{ counter-increment:r; display:grid; grid-template-columns:4cqw 1fr; gap:1.4cqw; align-items:center; font-size:1.85cqw; border:1px solid #D6E3EE; border-radius:1cqw; padding:.9cqw 1.4cqw; }
.v-rank li::before{ content:counter(r); width:4cqw; height:4cqw; border-radius:50%; background:#08334F; color:#fff; display:grid; place-items:center; font-weight:700; font-size:1.8cqw; }
.v-rank li:first-child{ background:#EAF2F8; font-weight:700; }
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.18} }
.blink{ animation:blink 1.1s steps(1) infinite; }
.stage.asking .slide.on, .stage.asking video{ filter:blur(2px) saturate(.6); opacity:.45; }
.pause-tag{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#08334F; color:#fff; font-weight:700; font-size:clamp(12px,2.2cqw,18px); padding:.6em 1.1em; border-radius:999px; white-space:nowrap; }
.playbig{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(52px,10cqw,84px); height:clamp(52px,10cqw,84px); border-radius:50%; border:0; background:#08334F; color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 0 0 6px rgba(8,51,79,.15); }
.playbig svg{ width:40%; height:40%; margin-left:8%; }
.bar{ display:flex; gap:3px; height:12px; align-items:stretch; }
.seg{ position:relative; flex:1 1 0; background:var(--line); border:0; padding:0; border-radius:3px; cursor:pointer; overflow:hidden; }
.seg .fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--brand); }
.seg.locked{ cursor:not-allowed; opacity:.55; }
.qdot{ flex:0 0 12px; height:12px; border-radius:50%; border:2px solid var(--brand); background:#fff; align-self:center; }
.qdot.done{ background:var(--good); border-color:var(--good); }
.vbar{ position:relative; height:10px; background:var(--line); border-radius:5px; cursor:pointer; }
.vbar .fill{ position:absolute; inset:0 auto 0 0; background:var(--brand); border-radius:5px; }
.vbar .cue{ position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; border:2px solid var(--brand); }
.vbar .cue.done{ background:var(--good); border-color:var(--good); }
.time{ font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px; }
.switch{ display:inline-flex; align-items:center; gap:7px; font-size:14px; cursor:pointer; }
.switch input{ accent-color:var(--brand); width:16px; height:16px; }
.hint{ font-size:13px; color:var(--bad); min-height:1.2em; }
.panel{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surface); }
.panel .lab{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:4px; }

/* ---------- Fragen ---------- */
.q h3{ font-size:18px; margin:2px 0 14px; line-height:1.35; }
.q-sign{ margin:0 0 14px; display:flex; gap:12px; }
.q-sign .ic, .q-sign .ic-tl{ height:84px; width:auto; }
.opts{ display:grid; gap:8px; }
.opt{ font:inherit; text-align:left; display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:10px; padding:12px 14px; cursor:pointer; width:100%; }
.opt:hover:not(:disabled){ border-color:var(--brand); }
.opt .k{ flex:0 0 auto; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--brand-weak); color:var(--brand); font-weight:700; font-size:13px; text-transform:lowercase; }
.opt.sel{ border-color:var(--brand); background:var(--brand-tint); box-shadow:inset 0 0 0 1px var(--brand); }
.opt.sel .k{ background:var(--brand); color:#fff; }
.opt.right{ border-color:var(--good); background:var(--good-weak); }
.opt.right .k{ background:var(--good); color:#fff; }
.opt.wrong{ border-color:var(--bad); background:var(--bad-weak); }
.opt.wrong .k{ background:var(--bad); color:#fff; }
.opt:disabled{ cursor:default; }
.fb{ margin-top:12px; display:grid; gap:10px; justify-items:start; }
.fb .verdict{ font-weight:700; }
.fb.good .verdict{ color:var(--good); } .fb.bad .verdict{ color:var(--bad); }
.qnav{ display:flex; flex-wrap:wrap; gap:6px; }
.qnav button{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff; font:inherit; font-size:13px; cursor:pointer; font-variant-numeric:tabular-nums; color:var(--text); }
.qnav button.answered{ background:var(--brand-weak); border-color:#B7D0E3; color:var(--brand); font-weight:700; }
.qnav button.cur{ border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.timer{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--brand); font-size:18px; }
.timer.low{ color:var(--bad); }
.result-head{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; }
.ring{ width:96px; height:96px; }
.review{ display:grid; gap:12px; }
.review .card{ display:grid; gap:8px; }
.review .ans{ font-size:14px; display:grid; gap:4px; }
.review .ans div{ display:flex; gap:8px; align-items:flex-start; }

/* ---------- Portal ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; background:var(--surface); }
th, td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
tr:last-child td{ border-bottom:0; }
td.num{ font-variant-numeric:tabular-nums; }
tr.click{ cursor:pointer; } tr.click:hover td{ background:var(--brand-tint); }
tr.inactive td{ color:var(--muted); }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tabs a{ padding:10px 14px; text-decoration:none; color:var(--muted); font-weight:700; font-size:14px; border-bottom:3px solid transparent; margin-bottom:-1px; }
.tabs a.on{ color:var(--brand); border-bottom-color:var(--brand); }
.cred{ border:2px solid var(--brand); border-radius:var(--radius); padding:16px 18px; display:grid; gap:12px; background:var(--brand-tint); }
.cred dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; }
.cred dt{ color:var(--muted); font-size:14px; }
.cred dd{ margin:0; font-family:var(--mono); font-size:15px; color:var(--brand); font-weight:700; word-break:break-all; }
.cred textarea{ font:inherit; font-size:13px; width:100%; min-height:120px; border:1px solid var(--line); border-radius:10px; padding:10px; resize:vertical; background:#fff; color:var(--text); }
.inline-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.inline-form .field{ flex:1 1 220px; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.mod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.mod-cell{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px; display:grid; gap:4px; min-width:0; }
.mod-cell b{ color:var(--brand); }
.mod-cell.passed{ background:var(--good-weak); border-color:#B9E1CB; }
.mod-cell.empty{ background:var(--surface); color:var(--muted); }
.confirm{ border:1px solid var(--bad); background:var(--bad-weak); border-radius:10px; padding:12px 14px; display:grid; gap:10px; }

/* Illustrationen auf Folien */
.v-illus{ width:100%; }
.v-illus svg{ width:100%; height:auto; display:block; }
.s-body.has-illus{ grid-template-columns:1fr 1.05fr; }
.s-vis{ min-width:0; }

/* Hochformat-Folien auf dem Handy: gleiche Inhalte, größer gesetzt */
@media (max-width:600px){ .stage.slides{ aspect-ratio:3/4; } }
@container (max-width:600px){
  .slide{ padding:5cqw 5.5cqw 4cqw; }
  .s-top{ font-size:2.8cqw; } .s-top span:first-child{ display:none; }
  .s-body, .s-body.has-illus{ grid-template-columns:1fr; align-content:center; gap:3cqw; }
  .s-body.has-illus .s-vis{ order:-1; }
  .s-body.has-illus .s-text{ font-size:4cqw; margin-bottom:2cqw; }
  .s-body.has-illus .sbox{ font-size:3.6cqw; padding:2cqw 2.6cqw; margin-bottom:2cqw; }
  .s-body.has-illus .s-title{ font-size:6.4cqw; margin-bottom:1.6cqw; }
  .s-body.has-illus .v-illus svg{ max-height:40cqw; margin:0 auto; width:auto; max-width:100%; }
  .s-body.full > div{ max-width:none; }
  .s-title{ font-size:7cqw; margin-bottom:2.5cqw; }
  .s-text{ font-size:4.2cqw; margin-bottom:2.5cqw; }
  ul.s-text{ padding-left:5cqw; } ul.s-text li{ margin-bottom:1cqw; }
  .term{ font-size:3.2cqw; padding:.5cqw 2cqw; }
  .s-foot{ font-size:2.8cqw; padding-top:2.5cqw; } .s-foot span:last-child{ display:none; }
  .sbox{ font-size:3.8cqw; padding:2.5cqw 3cqw; border-radius:2.4cqw; margin-bottom:2.5cqw; }
  .sbox .bt{ gap:2cqw; margin-bottom:1cqw; } .sbox .bi{ width:6cqw; height:6cqw; font-size:3.4cqw; border-radius:1.6cqw; }
  .sbox.b-falle{ border-left-width:2cqw; } .sbox.b-merk{ border-left-width:1cqw; } .sbox.b-logik{ border-top-width:1cqw; } .sbox.b-check{ font-size:4.2cqw; border-width:.5cqw; }
  .sbox ul{ padding-left:5cqw; }
  .visual{ gap:4cqw; } .visual .ic-tl{ height:24cqw; } .visual .ic{ width:17cqw; height:17cqw; }
  .visual.small{ gap:3cqw 4cqw; } .visual.small .ic{ width:14cqw; height:14cqw; } .visual figcaption{ font-size:3.1cqw; }
  .v-cards{ gap:2cqw; } .v-cards:has(> :nth-child(4)){ grid-template-columns:1fr 1fr; } .v-card{ padding:2cqw 3cqw; border-radius:2cqw; } .v-card b{ font-size:4cqw; } .v-card span{ font-size:3.4cqw; }
  .v-stats{ gap:2cqw; } .v-stat{ grid-template-columns:20cqw 1fr; padding:2cqw 3cqw; border-radius:2cqw; } .v-stat b{ font-size:5.6cqw; } .v-stat span{ font-size:3.4cqw; }
  .v-rank{ gap:1.6cqw; } .v-rank li{ font-size:3.7cqw; grid-template-columns:7cqw 1fr; gap:2.4cqw; padding:1.6cqw 2.4cqw; border-radius:2cqw; } .v-rank li::before{ width:7cqw; height:7cqw; font-size:3.6cqw; }
}

@media (prefers-reduced-motion: reduce){ .slide{ transition:none; } .blink{ animation:none; } .tile{ transition:none; } }