/* Vigilo Design System: gemeinsames Stylesheet aller Seiten des E-Learnings Vigilo.
   Formensprache nach den Apple Human Interface Guidelines: ruhig, viel Weißraum, eine Handlungsfarbe,
   Hell- und Dunkelmodus. Werte nach project/tokens.json des Design Systems (Version 2, 21.09.2026).
   Die alten Variablennamen (--paper, --ink, --red, --soft usw.) bleiben als Aliase erhalten, weil
   Abbildungen, Schemata und Lerneinheiten sie direkt verwenden. Neue Inhalte nutzen die Vigilo-Namen. */

/* Schriften: SF Pro auf Apple-Geräten, sonst Inter; Messwerte in SF Pro Rounded, sonst Nunito.
   Das E-Learning läuft offline, darum nur lokal installierte Schriften, keine Webfonts aus dem Netz. */
@font-face{font-family:"Vigilo Sans"; src:local("SF Pro Text"), local("SFProText-Regular"), local("Inter"), local("Inter Regular"), local("Inter-Regular"); font-weight:400}
@font-face{font-family:"Vigilo Sans"; src:local("SF Pro Text Semibold"), local("SFProText-Semibold"), local("Inter SemiBold"), local("Inter-SemiBold"), local("Inter Semi Bold"); font-weight:600}
@font-face{font-family:"Vigilo Rounded"; src:local("SF Pro Rounded Semibold"), local("SFProRounded-Semibold"), local("Nunito SemiBold"), local("Nunito-SemiBold"); font-weight:600}

:root{
  /* Vigilo: Flächen und Text */
  --surface:#F5F5F7; --surface-card:#FFFFFF; --surface-fill:rgba(120,120,128,.16); --surface-fill-2:rgba(120,120,128,.24);
  --ink:#1D1D1F; --ink-secondary:#6E6E73; --separator:rgba(60,60,67,.18);
  /* Vigilo: eine Handlungsfarbe */
  --accent:#0071E3; --accent-hover:#0077ED; --accent-text:#0066CC; --on-accent:#FFFFFF; --accent-ring:rgba(0,113,227,.45);
  /* Vigilo: Vitalparameter nach Monitorkonvention, nur mit Bedeutung */
  --vital-ecg:#248A3D; --vital-spo2:#0071A4; --vital-abp:#D70015; --vital-co2:#A05A00; --vital-temp:#C93400;
  /* Vigilo: Medikamentengruppen, Hausetiketten nach ISO 26825, Farbwerte vom Etikettenspender abgenommen */
  --drug-induction:#FFED4F; --drug-opioid:#BBDBF0; --drug-relaxant:#EB5157; --drug-benzo:#F28C28;
  --drug-vasopressor:#D3ACC2; --drug-local:#B4B4B4; --drug-anticholinergic:#9FCC63; --on-drug:#1D1D1F;
  /* Vigilo: Form, Abstand, Material */
  --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:20px; --space-5:32px; --space-6:80px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --material-bar:saturate(180%) blur(20px); --bar-bg:rgba(255,255,255,.72);
  --font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Vigilo Sans", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Vigilo Sans", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-rounded:ui-rounded, "SF Pro Rounded", "Vigilo Rounded", "Nunito", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Hilfstöne für Rückmeldungen (aus den Vitalfarben abgeleitet, nie als Schmuck) */
  --ok-tint:rgba(36,138,61,.10); --alarm-tint:rgba(215,0,21,.07); --temp-tint:rgba(201,52,0,.08);
  --fill-opaque:#F2F2F7; --line-opaque:#D2D2D7; --seg-on:#FFFFFF;

  /* Aliase der bisherigen Namen */
  --bg:var(--surface); --paper:var(--surface-card); --muted:var(--ink-secondary); --line:var(--line-opaque); --soft:var(--fill-opaque);
  --block:#1D1D1F; --block-ink:#FFFFFF; --red:var(--vital-abp); --red-bg:var(--alarm-tint); --ok:var(--vital-ecg); --ok-bg:var(--ok-tint);
  --pressure:#3F6F8A; --pressure-fill:#A9C3D3; --screen:var(--fill-opaque); --alarm:var(--vital-abp); --panel:var(--surface-card);
  --amber:var(--vital-temp); --amber-bg:var(--temp-tint);
  --sans:var(--font-sans); --serif:var(--font-sans); --mono:var(--font-mono);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#000000; --surface-card:#1C1C1E; --surface-fill:rgba(120,120,128,.32); --surface-fill-2:rgba(120,120,128,.42);
    --ink:#F5F5F7; --ink-secondary:#A1A1A6; --separator:rgba(84,84,88,.6);
    --accent-text:#2997FF; --accent-hover:#0A84FF; --accent-ring:rgba(41,151,255,.55);
    --vital-ecg:#30D158; --vital-spo2:#64D2FF; --vital-abp:#FF453A; --vital-co2:#FFD60A; --vital-temp:#FF9F0A;
    --shadow-card:0 0 0 1px rgba(255,255,255,.06); --bar-bg:rgba(28,28,30,.72);
    --ok-tint:rgba(48,209,88,.16); --alarm-tint:rgba(255,69,58,.16); --temp-tint:rgba(255,159,10,.14);
    --fill-opaque:#2C2C2E; --line-opaque:#3A3A3C; --seg-on:#636366;
    --block:#3A3A3C; --block-ink:#FFFFFF; --pressure:#8DB6CC; --pressure-fill:#2F4A5A;
  }
}
:root[data-theme="dark"]{
  --surface:#000000; --surface-card:#1C1C1E; --surface-fill:rgba(120,120,128,.32); --surface-fill-2:rgba(120,120,128,.42);
  --ink:#F5F5F7; --ink-secondary:#A1A1A6; --separator:rgba(84,84,88,.6);
  --accent-text:#2997FF; --accent-hover:#0A84FF; --accent-ring:rgba(41,151,255,.55);
  --vital-ecg:#30D158; --vital-spo2:#64D2FF; --vital-abp:#FF453A; --vital-co2:#FFD60A; --vital-temp:#FF9F0A;
  --shadow-card:0 0 0 1px rgba(255,255,255,.06); --bar-bg:rgba(28,28,30,.72);
  --ok-tint:rgba(48,209,88,.16); --alarm-tint:rgba(255,69,58,.16); --temp-tint:rgba(255,159,10,.14);
  --fill-opaque:#2C2C2E; --line-opaque:#3A3A3C; --seg-on:#636366;
  --block:#3A3A3C; --block-ink:#FFFFFF; --pressure:#8DB6CC; --pressure-fill:#2F4A5A;
}

/* ================= Grundlagen ================= */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--surface); color:var(--ink); font-family:var(--font-sans); font-size:17px; line-height:1.47; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--ink); font-weight:600; hyphens:auto; overflow-wrap:break-word}
h1{font-size:clamp(32px,4.4vw,40px); line-height:1.1; letter-spacing:-.015em; margin:4px 0 12px}
h2{font-size:28px; line-height:1.18; letter-spacing:-.01em; margin:0 0 8px}
h3{font-size:19px; line-height:1.3; margin:32px 0 8px}
h3.sec{font-size:24px; line-height:1.2; letter-spacing:-.01em; margin:40px 0 12px}
h4{font-size:17px; line-height:1.3; margin:24px 0 6px}
h5{font-size:15px; margin:16px 0 4px}
p{margin:10px 0}
ul,ol{padding-left:1.35em}
li{margin:6px 0}
sub{font-size:.72em}
b,strong{font-weight:600}
a{color:var(--accent-text); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
img{max-width:100%; height:auto}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit; letter-spacing:inherit}
:focus-visible{outline:3px solid var(--accent-ring); outline-offset:2px; border-radius:6px}
::selection{background:rgba(0,113,227,.2)}
.hide{display:none!important}
.sans{font-family:var(--font-sans)}
.kicker{font-size:15px; line-height:1.4; color:var(--ink-secondary); margin:0}
.lead{font-size:21px; line-height:1.38; color:var(--ink-secondary); letter-spacing:-.01em}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
input[type=radio],input[type=checkbox]{accent-color:var(--accent)}
input[type=range]{accent-color:var(--accent)}

/* Hinweisbanner, wird bei erfolgreichem Start ausgeblendet */
#nojs{display:block; background:var(--alarm-tint); color:var(--ink); padding:12px 20px; font-size:15px}
#nojs b{color:var(--vital-abp)}
#nojs.ok{display:none}

/* ================= Knöpfe ================= */
/* Gefüllt nur die Hauptaktion (.primary, #nextBtn), sonst graue Knöpfe; .ghost ist die Textaktion. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 20px; border:0; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink); font:600 17px/1.2 var(--font-sans); letter-spacing:-.01em; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color .15s}
.btn:hover{background:var(--surface-fill-2); text-decoration:none}
.btn.primary,#nextBtn,.btn.filled{background:var(--accent); color:var(--on-accent)}
.btn.primary:hover,#nextBtn:hover,.btn.filled:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent; color:var(--accent-text); padding:0 12px}
.btn.ghost:hover{background:var(--surface-fill)}
.btn:disabled,.btn[disabled]{opacity:.35; cursor:default}
.btn:disabled:hover{background:var(--surface-fill)}
#nextBtn:disabled:hover{background:var(--accent)}
.btn.ghost:disabled:hover{background:transparent}
label.btn{cursor:pointer}
.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}

/* ================= Kursrahmen: Seitenleiste und Lektion ================= */
.app{display:grid; grid-template-columns:288px minmax(0,1fr); min-height:100vh}
aside{position:sticky; top:0; height:100vh; overflow-y:auto; padding:28px 16px 32px 20px; border-right:1px solid var(--separator); background:var(--surface)}
.brand{margin:0 0 20px; font:600 21px/1.1 var(--font-display); letter-spacing:-.02em}
.brand a{color:var(--ink); text-decoration:none}
.back{display:inline-flex; align-items:center; gap:4px; font-size:15px; line-height:1.35; color:var(--accent-text); text-decoration:none; margin:0 0 20px}
.back:hover{text-decoration:underline}
.crumb{margin:0; font-size:13px; line-height:1.38; color:var(--ink-secondary)}
.crumb a{color:var(--ink-secondary); text-decoration:none; font-weight:600}
.crumb a:hover{color:var(--ink)}
.crumb-teil{display:block; color:var(--ink-secondary); margin-top:2px}
.ctitle{margin:6px 0 16px; font:600 19px/1.25 var(--font-display); letter-spacing:-.01em}
.cnr{display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; margin-right:8px; padding:0 7px; border-radius:8px; background:var(--surface-fill); color:var(--ink); font:600 15px/1 var(--font-rounded); vertical-align:2px}
.prog{display:block; height:4px; border-radius:var(--radius-pill); background:var(--surface-fill); overflow:hidden}
.prog i{display:block; height:100%; width:0; border-radius:inherit; background:var(--accent); transition:width .4s}
.prog-txt{font-size:13px; color:var(--ink-secondary); margin:8px 0 20px}
nav ol{list-style:none; padding:0; margin:0}
nav li{margin:0}
#nav button{width:100%; display:grid; grid-template-columns:28px 1fr 18px; gap:6px; align-items:center; text-align:left; background:none; border:0; border-radius:var(--radius-sm); color:var(--ink); cursor:pointer; padding:8px 10px; margin:1px 0; font-size:15px; line-height:1.3}
#nav button:hover{background:var(--surface-fill)}
#nav button[aria-current="page"]{background:var(--surface-card); box-shadow:var(--shadow-card); font-weight:600}
#nav .n{font:600 14px/1 var(--font-rounded); color:var(--ink-secondary)}
#nav .st{color:var(--vital-ecg); font-weight:600}
.reset{margin-top:24px; min-height:32px; padding:0 14px; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--ink-secondary); font-size:13px; cursor:pointer}
.reset:hover{background:var(--surface-fill); color:var(--ink)}
main{padding:40px clamp(20px,5vw,56px) 80px; max-width:860px; min-width:0}
.app > main{min-width:0}
select{max-width:100%}
.row > *{min-width:0} .row select{width:100%}
.lesson-head{margin-bottom:24px}
.lesson-head .kicker{font-size:15px; margin-bottom:2px}
.lesson-head .lead{margin:8px 0 0}
.mobile-top{display:none}
.pager{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:48px; padding-top:20px; border-top:1px solid var(--separator)}

/* ================= Inhalt ================= */
.content{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:8px 36px 28px; margin:20px 0}
.content > h3.sec:first-child,.content > h2:first-child{margin-top:28px}
.content > p:first-child{margin-top:24px}
.fig{margin:24px 0; background:#FFFFFF; border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px var(--separator)}
.fig img{display:block; width:100%}
.fig figcaption{font-size:13px; line-height:1.4; color:#6E6E73; padding:10px 14px 12px; border-top:1px solid rgba(60,60,67,.12); background:#FFFFFF}
.fig .src{font-style:normal; color:#86868B}
.fig.htmlfig{background:var(--surface-card); padding:16px}
.fig.htmlfig figcaption{color:var(--ink-secondary); background:transparent; border-top:0; padding:12px 0 0}
.formula{font:600 19px/1.4 var(--font-sans); background:var(--fill-opaque); border-radius:12px; padding:12px 16px; margin:14px 0; overflow-x:auto}
.formula small{display:block; font-size:13px; font-weight:400; color:var(--ink-secondary); margin-top:2px}
.keynote{font:600 21px/1.35 var(--font-display); letter-spacing:-.01em; margin:24px 0}
.listhead{font-weight:600; margin-bottom:2px}
.goal{background:var(--fill-opaque); border-radius:14px; padding:14px 18px; margin:14px 0 22px; font-size:15px}
.note{background:var(--fill-opaque); border-radius:14px; padding:14px 18px; margin:18px 0; font-size:15px}
.note > b{display:block; font-size:15px; margin-bottom:2px}
.note.warn{background:var(--alarm-tint)}
.note.warn > b{color:var(--vital-abp)}
.exercise{margin-top:40px; padding-top:8px; border-top:1px solid var(--separator)}
.solution{margin:14px 0; padding:14px 18px; border-radius:12px; font-size:15px}
.solution.empty{border:1.5px dashed var(--line-opaque); color:var(--ink-secondary)}
.solution.filled,.solution[data-inline]{background:var(--ok-tint)}
.solution[data-inline]{font-size:17px}
.solution[data-inline] > b:first-child{display:block; font-size:15px; margin-bottom:4px; color:var(--vital-ecg)}
.sol-btn{margin-top:14px}
.notes-l{display:block; font-size:13px; color:var(--ink-secondary); margin-top:12px}
.notes{width:100%; font-size:15px; padding:10px 12px; border:0; border-radius:var(--radius-sm); background:var(--surface-fill); color:var(--ink); min-height:64px}
.tbl{overflow-x:auto; background:var(--surface-card); border-radius:14px; box-shadow:0 0 0 1px var(--separator); margin:16px 0}
.tbl table,.reftable{border-collapse:collapse; width:100%; font-size:15px; line-height:1.4}
.tbl table{min-width:34rem}
.tbl th,.tbl td,.reftable th,.reftable td{text-align:left; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--separator)}
.tbl th,.reftable th{font-weight:600; font-size:13px; color:var(--ink-secondary); background:var(--fill-opaque)}
.tbl tr:last-child td{border-bottom:0}
.reftable td:first-child{font-weight:600; white-space:nowrap}
.tcap{caption-side:top; text-align:left; font:600 15px/1.3 var(--font-sans); padding:12px 14px; background:var(--surface-card); border-bottom:1px solid var(--separator)}
dl.gl dt{font-weight:600; margin-top:12px}
dl.gl dd{margin:0 0 4px 0; color:var(--ink)}

/* Boxen: Physiologie, Anästhesie, Intensiv, Evidenz neutral; Messfehler und Entwurf als Warnhinweis (vital-temp),
   Merksatz als Hervorhebung. Keine farbigen Seitenkanten. */
.box{background:var(--fill-opaque); border-radius:14px; padding:14px 18px 16px; margin:20px 0}
.box > .box-t{display:block; font-size:13px; font-weight:600; line-height:1.3; color:var(--ink-secondary); margin-bottom:6px}
.box p{margin:6px 0}
.box.mess,.box.draft{background:var(--temp-tint)}
.box.mess > .box-t,.box.draft > .box-t{color:var(--vital-temp)}
.box.draft{box-shadow:inset 0 0 0 1.5px var(--vital-temp)}
.box.merk{background:transparent; padding:4px 0; font:600 21px/1.35 var(--font-display); letter-spacing:-.01em}
.box.merk > .box-t{font-family:var(--font-sans); letter-spacing:0}
.neufassung{background:var(--fill-opaque); border-radius:14px; padding:12px 16px; font-size:15px; margin:14px 0}

/* ================= Übungen ================= */
.task{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:24px 28px; margin:28px 0; font-size:17px; line-height:1.47}
.content .task{box-shadow:0 0 0 1px var(--separator)}
.task-t{font:600 19px/1.3 var(--font-display); margin:0 0 6px}
.task.done .task-t::after{content:"  ✓"; color:var(--vital-ecg)}
.q{font-weight:600; margin:6px 0 14px}
.opts{display:grid; gap:8px}
.opt{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:var(--surface-fill); cursor:pointer; box-shadow:inset 0 0 0 1.5px transparent; transition:background-color .15s}
.opt:hover{background:var(--surface-fill-2)}
.opt input{margin-top:4px; flex:none}
.opt.right{background:var(--ok-tint); box-shadow:inset 0 0 0 1.5px var(--vital-ecg)}
.opt.wrong{background:var(--alarm-tint); box-shadow:inset 0 0 0 1.5px var(--vital-abp)}
.fb{margin-top:14px; padding:12px 16px; border-radius:12px; display:none; font-size:15px}
.fb.show{display:block}
.fb.good{background:var(--ok-tint)}
.fb.bad{background:var(--alarm-tint)}
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:10px 0}
.row label{display:block; font-size:13px; color:var(--ink-secondary); margin-bottom:4px}
.row input,.row select,.sel{font-size:17px; min-height:40px; padding:6px 12px; border:0; border-radius:var(--radius-sm); background:var(--surface-fill); color:var(--ink)}
.row input{width:9rem}
.sel.right{background:var(--ok-tint); box-shadow:inset 0 0 0 1.5px var(--vital-ecg)}
.sel.wrong{background:var(--alarm-tint); box-shadow:inset 0 0 0 1.5px var(--vital-abp)}
.given{font-family:var(--font-rounded); font-weight:600; background:var(--surface-fill); border-radius:6px; padding:1px 6px}
.chip{display:inline-block; background:var(--surface-fill); border-radius:var(--radius-pill); padding:1px 10px; font-weight:600; font-size:15px}
.tag{display:inline-block; font-size:12px; font-weight:600; line-height:1.5; color:var(--ink-secondary); background:var(--surface-fill); border-radius:var(--radius-pill); padding:1px 8px; margin-left:6px; vertical-align:2px}

/* Prüfung und Bestätigung */
.score{font:600 44px/1 var(--font-rounded); margin:8px 0}
.cert{display:none; border:2px solid var(--ink); border-radius:4px; padding:40px 28px; margin-top:24px; background:var(--surface-card); text-align:center}
.cert.show{display:block}
.cert .t{font:600 30px/1.2 var(--font-display); letter-spacing:-.01em; margin:4px 0}
.cert .nm{font-size:26px; font-weight:600; border-bottom:1.5px solid var(--ink); display:inline-block; min-width:60%; margin:16px 0 10px}

/* ================= Physiologie: Sauerstoffkette und Diagramme ================= */
.chain{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--space-2); margin:28px 0 6px}
.chain div{background:var(--surface-card); border-radius:14px; box-shadow:var(--shadow-card); padding:12px 8px 14px 10px; min-height:112px; min-width:0}
.chain b{display:block; font:600 24px/1 var(--font-rounded); color:var(--ink-secondary)}
.chain span{display:block; font-size:13px; font-weight:600; line-height:1.25; margin-top:8px; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto}
.chain code{display:block; font:500 12px/1.3 var(--font-mono); color:var(--ink-secondary); margin-top:8px}
.brackets{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--space-2); font-size:13px; font-weight:600}
.brackets .mon{grid-column:3 / span 2; border:1.5px solid var(--ink-secondary); border-top:0; border-radius:0 0 8px 8px; height:10px}
.brackets .org{grid-column:5 / span 3; border:1.5px solid var(--vital-abp); border-top:0; border-radius:0 0 8px 8px; height:10px}
.brackets .t1{grid-column:3 / span 2; color:var(--ink-secondary); text-align:center}
.brackets .t2{grid-column:5 / span 3; color:var(--vital-abp); text-align:center}
.match{display:grid; grid-template-columns:7rem 1fr; gap:8px 12px; align-items:center; margin:10px 0}
.match b{font-family:var(--font-rounded)}
.match .sel{width:100%; font-size:15px}
.pool{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.pool button{min-height:36px; padding:0 14px; border:0; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink); cursor:pointer; font-size:15px; font-weight:600}
.pool button:hover{background:var(--surface-fill-2)}
.pool button:disabled{opacity:.25; cursor:default}
.seq{list-style:none; counter-reset:s; margin:10px 0; min-height:48px; border:1.5px dashed var(--line-opaque); border-radius:12px; padding:6px}
.seq li{counter-increment:s; padding:8px 10px; margin:4px 0; background:var(--surface-fill); border-radius:8px}
.seq li::before{content:counter(s) ". "; font-weight:600; color:var(--ink-secondary)}
.seq li.right{background:var(--ok-tint)}
.seq li.wrong{background:var(--alarm-tint)}

/* Rechner mit Schiebereglern: Ergebnisse als Messwertkacheln */
.calc{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:24px 28px; margin:28px 0}
.content .calc{box-shadow:0 0 0 1px var(--separator)}
.calc h3{margin:2px 0 4px; font-size:24px}
.presets{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.presets button{min-height:34px; padding:0 14px; border:0; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink); cursor:pointer; font-size:15px}
.presets button:hover{background:var(--surface-fill-2)}
.presets button.on{background:var(--accent); color:var(--on-accent)}
.presets b.sans{align-self:center; margin-right:4px; font-size:15px}
.mode{display:flex; flex-wrap:wrap; gap:16px; margin:6px 0 12px; font-size:15px}
.sliders{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:8px 28px}
.sl label{display:flex; justify-content:space-between; align-items:baseline; font-size:15px; color:var(--ink-secondary)}
.sl label output{font:600 17px/1.2 var(--font-rounded); color:var(--ink)}
.sl input[type=range]{width:100%}
.sl.off{opacity:.35}
.results{display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:var(--space-3); margin-top:18px}
.res{background:var(--fill-opaque); border-radius:14px; padding:12px 14px 14px}
.res span{display:block; font-size:13px; color:var(--ink-secondary)}
.res b{display:block; font:600 30px/1.1 var(--font-rounded); margin-top:4px; color:var(--ink)}
.res small{display:block; font-size:13px; color:var(--ink-secondary); margin-top:2px}
.res.warn{background:var(--alarm-tint)}
.res.warn span{color:var(--vital-abp); font-weight:600}
.res b.sans, .results .res b.sans{font:600 15px/1.35 var(--font-sans)}
.calc > .res{margin-top:12px}
.bar{margin:16px 0 4px; font-size:13px; color:var(--ink-secondary)}
.bar .track{display:flex; height:10px; border-radius:var(--radius-pill); overflow:hidden; background:var(--surface-fill); margin-top:6px}
.bar .hb{background:var(--ink-secondary)}
.bar .dis{background:var(--vital-abp)}
.calc-msg{font-size:15px; margin-top:10px; min-height:1.4em}
.calc-msg.warn{color:var(--vital-abp); font-weight:600}

/* Intensivmedizin: Beatmungsgerät und Kurven */
.vent{background:var(--fill-opaque); color:var(--ink); padding:14px; border-radius:var(--radius-md); margin:18px 0}
.vent-top{display:flex; justify-content:space-between; font-weight:600; margin-bottom:10px}
.vent svg{width:100%; height:auto; display:block; background:var(--surface-card); border-radius:12px}
.vals{display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:8px; margin-top:10px}
.val{background:var(--surface-card); border-radius:12px; padding:8px 12px}
.val span{display:block; font-size:13px; color:var(--ink-secondary)}
.val b{font:600 28px/1.1 var(--font-rounded)}
.val.new b{color:var(--vital-ecg)}
.vent-btns,.peep{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.vbtn{min-height:36px; padding:0 14px; border:0; border-radius:var(--radius-pill); background:var(--surface-card); color:var(--ink); cursor:pointer; font-weight:600; font-size:15px}
.vbtn[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.curve{fill:var(--pressure-fill); stroke:var(--pressure); stroke-width:2; fill-opacity:.85}
.gridl{stroke:var(--line-opaque); stroke-width:1}
.dash{stroke:var(--ink-secondary); stroke-width:1; stroke-dasharray:4 4}
.s-lbl{font-family:var(--font-sans); font-size:11px; fill:var(--ink-secondary)}
.s-big{font-family:var(--font-rounded); font-size:20px; font-weight:600; fill:var(--ink)}
.hz{fill:var(--vital-abp); opacity:.13}
.cline{fill:none; stroke:var(--pressure); stroke-width:2.5}
.curves{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:12px; margin:10px 0}
.cpick{border:0; border-radius:14px; background:var(--surface-card); box-shadow:0 0 0 1.5px var(--separator); padding:10px; cursor:pointer; text-align:left; color:var(--ink)}
.cpick svg{width:100%; height:auto; display:block}
.cpick.right{background:var(--ok-tint); box-shadow:0 0 0 2px var(--vital-ecg)}
.cpick.wrong{background:var(--alarm-tint); box-shadow:0 0 0 2px var(--vital-abp)}
.step{margin:20px 0}
.step.locked{display:none}

/* Physiologie: Mustertabelle, V/Q-Kontinuum, Ablaufschemata, Quadranten */
.patterns{display:grid; grid-template-columns:minmax(7.5rem,1.3fr) repeat(3,minmax(0,1fr)); gap:6px; margin:28px 0 10px}
.patterns .ph{font-size:13px; font-weight:600; color:var(--ink-secondary); padding:4px 8px; align-self:end}
.patterns .pn{background:var(--fill-opaque); border-radius:10px; font-weight:600; padding:12px 10px}
.patterns .pv{background:var(--surface-card); box-shadow:0 0 0 1px var(--separator); border-radius:10px; padding:12px 10px; font-weight:600}
.patterns .pv.up{color:var(--vital-abp)}
.chart{width:100%; max-width:34rem; height:auto; display:block; background:var(--surface-card); border-radius:12px; box-shadow:0 0 0 1px var(--separator); margin-top:16px}
.chart .ax{font-family:var(--font-sans); font-size:10px; fill:var(--ink-secondary)}
.chart.schema{max-width:30rem; margin:0 auto; box-shadow:none; background:transparent}
.sx{font-family:var(--font-sans); font-size:10.5px; fill:var(--ink)}
.sx.w{fill:#FFFFFF}
.vq{margin:28px 0 10px}
.vq-bar{position:relative; height:10px; border-radius:var(--radius-pill); overflow:hidden; background:var(--ink-secondary)}
.vq-bar::before,.vq-bar::after{content:""; position:absolute; top:0; bottom:0; width:33.34%}
.vq-bar::before{left:0; background:var(--vital-abp)} .vq-bar::after{right:0; background:var(--line-opaque)}
.vq-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px}
.vq-cols div{background:var(--surface-card); box-shadow:0 0 0 1px var(--separator); border-radius:12px; padding:12px; font-size:15px}
.vq-cols b{display:block; font-size:17px}
.vq-cols .v{font:500 13px/1.3 var(--font-mono); color:var(--ink-secondary); display:block; margin:2px 0 8px}
.vq-cols dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 8px}
.vq-cols dt{color:var(--ink-secondary)} .vq-cols dd{margin:0; font-weight:600}
.flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin:16px 0; font-size:15px}
.flow div{background:var(--fill-opaque); border-radius:12px; padding:10px 12px; flex:1 1 8rem}
.flow div.out{background:var(--alarm-tint); color:var(--vital-abp); font-weight:600}
.flow i{align-self:center; font-style:normal; font-weight:600; color:var(--ink-secondary)}
.flow-grid{display:grid; gap:8px}
.flow-grid .flow{margin:0; flex-wrap:nowrap}
.flow-grid .flow div{flex:1 1 0}
.flow-grid .flow div:first-child{background:transparent; box-shadow:inset 0 0 0 1px var(--separator); font-weight:600}
.quad{display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:15px}
.quad div{background:var(--fill-opaque); border-radius:12px; padding:12px 14px}
.quad b{display:block}
.quad span{display:block; font-size:13px; color:var(--ink-secondary); margin:2px 0 6px}
.quad .l1{background:var(--block); color:var(--block-ink)} .quad .l1 span{color:rgba(255,255,255,.75)}
.quad .l2{background:var(--vital-abp); color:#FFFFFF} .quad .l2 span{color:rgba(255,255,255,.85)}

/* Kreislauf: Zerlegungsbaum, Druck-Fluss-Gleichung, Fick */
.tree{display:grid; gap:8px; text-align:center}
.tree .t0{background:var(--block); color:var(--block-ink); font-weight:600; padding:12px; border-radius:12px}
.tree .t1{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center}
.tree .t1 div{background:var(--fill-opaque); font-weight:600; padding:10px; border-radius:12px}
.tree .t1 i{font-style:normal; font-weight:600; font-size:19px; color:var(--ink-secondary)}
.tree .t2{display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:8px; font-size:14px}
.tree .t2 div{background:var(--surface-card); box-shadow:0 0 0 1px var(--separator); border-radius:10px; padding:8px 6px; font-weight:600}
.ohm{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:8px; align-items:stretch; text-align:center}
.ohm div{background:var(--fill-opaque); border-radius:12px; padding:12px 8px}
.ohm div b{display:block; font:600 26px/1.1 var(--font-rounded)}
.ohm div span{display:block; font-size:13px; color:var(--ink-secondary); margin-top:2px}
.ohm i{align-self:center; font-style:normal; font-weight:600; font-size:21px; color:var(--ink-secondary)}
.fickflow{display:grid; grid-template-columns:1fr auto 1.2fr auto 1fr; gap:8px; align-items:center; text-align:center}
.fickflow div{padding:12px 8px; border-radius:12px}
.fickflow .a{background:var(--vital-abp); color:#FFFFFF}
.fickflow .t{background:var(--fill-opaque); color:var(--ink)}
.fickflow .v{background:#3F6F8A; color:#FFFFFF}
.fickflow b{display:block; font:600 22px/1.15 var(--font-rounded)}
.fickflow span{display:block; font-size:13px; opacity:.9}
.fickflow i{font-style:normal; font-weight:600; font-size:19px; color:var(--ink-secondary)}
.fickeq{text-align:center; font-weight:600; margin:10px 0 0}
.balbar{font-size:13px; color:var(--ink-secondary); margin:10px 0}
.balbar .track{display:flex; height:26px; border-radius:8px; overflow:hidden; background:var(--surface-fill); margin-top:4px}
.balbar .vo{background:var(--vital-abp); color:#FFFFFF; font-size:12px; display:flex; align-items:center; padding-left:6px; white-space:nowrap; overflow:hidden}
.balbar .rv{background:#8E8E93; color:#FFFFFF; font-size:12px; display:flex; align-items:center; padding-left:6px; white-space:nowrap; overflow:hidden}

/* Kurs 8 bis 12: Laktatpfade, CO2-Gap, Stellhebel, PBM, Monitoringlandkarte, Algorithmen, Fälle, Prüfung */
.lakt{display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:15px}
.lakt div{padding:10px 12px; border-radius:12px}
.lakt b{display:block}
.lakt .lk-src{background:var(--alarm-tint)} .lakt .lk-src b{color:var(--vital-abp)}
.lakt .lk-pool{grid-column:1 / -1; background:var(--block); color:var(--block-ink); text-align:center; font-weight:600; font-size:17px}
.lakt .lk-pool small{display:block; font-weight:400; font-size:13px; opacity:.8}
.lakt .lk-sink{background:var(--fill-opaque)}
.co2{display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:15px}
.co2 > div{background:var(--surface-card); box-shadow:0 0 0 1px var(--separator); border-radius:12px; padding:10px}
.co2 .schema{max-width:100%}
.co2 span{display:block; color:var(--ink-secondary); font-size:13px}
.matrix{display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:15px}
.matrix .mx-h{background:var(--block); color:var(--block-ink); font-weight:600; padding:8px 12px; text-align:center; border-radius:10px}
.matrix .mx-c{background:var(--fill-opaque); border-radius:12px; padding:10px 12px}
.matrix .mx-c b{display:block; margin-top:10px}
.matrix .mx-c b:first-child{margin-top:0}
.matrix .mx-c span{display:block}
.matrix .mx-c i{display:block; color:var(--ink-secondary); font-size:13px; font-style:normal; margin-bottom:6px}
.pbm{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; font-size:15px}
.pbm > div{background:var(--fill-opaque); border-radius:12px; padding:12px 14px}
.pbm .pbm-n{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--block); color:var(--block-ink); font:600 14px/1 var(--font-rounded); margin-bottom:6px}
.pbm b,.pbm span{display:block}
.land{display:grid; gap:6px; font-size:15px}
.land .ld-row{display:grid; grid-template-columns:44px 1fr; background:var(--fill-opaque); border-radius:12px; overflow:hidden}
.land .ld-n{display:flex; align-items:center; justify-content:center; font:600 19px/1 var(--font-rounded); color:var(--ink-secondary)}
.land .ld-row > div{padding:8px 12px 8px 4px}
.land b,.land span,.land i{display:block}
.land i{color:var(--vital-abp); font-style:normal; font-size:13px}
.algo{list-style:none; margin:0; padding:0; font-size:15px}
.algo li{position:relative; background:var(--fill-opaque); border-radius:12px; padding:10px 14px; margin:0 0 22px}
.algo li:not(:last-child)::after{content:"▼"; position:absolute; left:50%; bottom:-19px; transform:translateX(-50%); color:var(--ink-secondary); font-size:11px}
.algo b,.algo span{display:block}
.case .vign{background:var(--fill-opaque); border-radius:12px; padding:12px 14px; margin:6px 0 14px}
.case .step{border-top:1px solid var(--separator); padding-top:12px; margin-top:12px}
.case .step h5{margin:2px 0 8px; font-size:15px}
.case .opt{display:block; margin:6px 0}
.case .opt input{margin-right:8px}
.case .befund{background:var(--fill-opaque); border-radius:12px; font-weight:600; padding:10px 14px; margin:10px 0}
.exam-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0}
.exam-timer{font:600 21px/1 var(--font-rounded); padding:8px 16px; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink)}
.exam-timer.warn{background:var(--alarm-tint); color:var(--vital-abp)}
.exam-q{border-top:1px solid var(--separator); padding:12px 0}
.exam-q .eq-t{font-weight:600; margin-bottom:6px}
.exam-q label{display:block; margin:6px 0; padding:10px 12px; border-radius:10px; background:var(--surface-fill)}
.exam-q.ok label.sol,.exam-q.bad label.sol{background:var(--ok-tint); box-shadow:inset 0 0 0 1.5px var(--vital-ecg)}
.exam-q.bad label.pick{background:var(--alarm-tint); box-shadow:inset 0 0 0 1.5px var(--vital-abp)}
.exam-q .eq-e{font-size:13px; color:var(--ink-secondary); margin-top:6px}

/* Anhang */
.swatch{display:inline-block; width:18px; height:18px; vertical-align:middle; margin-right:4px; border-radius:5px; box-shadow:0 0 0 1px var(--separator)}
dl.swl{margin:0}
dl.swl .sw-row{display:grid; grid-template-columns:minmax(9rem,16rem) 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--separator)}
dl.swl dt{font-weight:600}
dl.swl dd{margin:0}
table.fx td:nth-child(2){font-family:var(--font-mono); font-size:14px}
ol.lit li{overflow-wrap:anywhere}

/* Bildplatzhalter: verschwinden automatisch, sobald die Bilddatei vorhanden ist */
.fig.ph{background:var(--surface-card)}
.fig.ph img{display:none}
.fig.ph.has-img img{display:block}
.fig.ph.has-img .ph-box{display:none}
.ph-box{margin:14px; padding:18px 20px; border:1.5px dashed var(--line-opaque); border-radius:12px; background:var(--fill-opaque)}
.ph-box .ph-t{display:block; font-size:13px; font-weight:600; color:var(--ink-secondary); margin-bottom:4px}
.ph-box b{display:block; font-size:17px}
.ph-box p{margin:6px 0 8px; font-size:15px}
.ph-box .ph-f{font:500 13px/1.3 var(--font-mono); color:var(--ink-secondary)}
.fig.ph figcaption{color:var(--ink-secondary); background:var(--surface-card)}

/* Schemata der Lerneinheiten: auf dem Handy lesbar, eigene Scrollfläche */
.chart.schema.fb,.chart.schema.eeg,.chart.schema.p11{max-width:40rem}
.chart.schema.fb .sx{font-size:13px}
.chart.schema.eeg .sx,.chart.schema.p11 .sx{font-size:12px}
.fig.htmlfig .scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* Textfassung von Vorträgen */
.folie{background:var(--surface-card); border-radius:14px; padding:12px 16px; margin:0 0 14px}
.content .folie{background:var(--fill-opaque)}
.content details.folie{border:0; border-radius:12px; padding:10px 16px; margin:0 0 8px; background:var(--fill-opaque)}
.content details.folie summary{cursor:pointer; font-weight:600}
.content details.folie[open]{background:transparent; box-shadow:inset 0 0 0 1px var(--separator); padding-bottom:14px}
.folie .kicker{margin-bottom:2px}
.folie h4{margin:2px 0 6px}
.folie ul{margin:4px 0 8px}
.folie .zw{margin:14px 0 4px}
.folie .hinweis{font-size:13px; color:var(--ink-secondary); font-style:italic; margin:6px 0}
.folie .quelle{font-size:13px; color:var(--ink-secondary); margin:6px 0 2px; overflow-wrap:anywhere}
.folie li{overflow-wrap:anywhere}

/* Werkzeug Verlegungsbrief */
details.brief{background:var(--surface-card); border-radius:14px; box-shadow:0 0 0 1px var(--separator); margin:10px 0; padding:2px 18px}
details.brief > summary{cursor:pointer; font-weight:600; padding:12px 0}
details.brief[open] > summary{border-bottom:1px solid var(--separator); margin-bottom:10px}
.briefbox{font-size:15px}
.briefbox h5{margin:16px 0 6px}
.tbl.vb table{min-width:44rem}
.tbl.vb td,.tbl.vb th{font-size:14px}
[data-bs]{transition:background-color .3s}
[data-bs].bs-drin{background:var(--ok-tint)}
.bs-btn{min-height:28px!important; font-size:12px!important; padding:0 10px!important; margin:4px 0 0 6px; vertical-align:baseline}
td[data-bs] > .bs-btn{display:flex; margin:6px 0 0}
.vb-teil{margin:14px 0}
.vb-teil label{display:block; font-weight:600; font-size:15px; margin-bottom:4px}
.vb-teil textarea{width:100%; font-size:15px; padding:10px 12px; border:0; border-radius:var(--radius-sm); background:var(--surface-fill); color:var(--ink)}
.vb-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--surface); font-size:15px; padding:10px 18px; border-radius:var(--radius-pill); opacity:0; pointer-events:none; transition:opacity .2s; z-index:50; max-width:90vw}
.vb-toast.show{opacity:.95}

/* ================= Portal: Navigationsleiste ================= */
.gnav{position:sticky; top:0; z-index:40; background:var(--bar-bg); -webkit-backdrop-filter:var(--material-bar); backdrop-filter:var(--material-bar); border-bottom:1px solid var(--separator)}
.gnav-in{max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,40px); min-height:52px; display:flex; align-items:center; gap:28px}
.gbrand{font:600 21px/1 var(--font-display); letter-spacing:-.02em; color:var(--ink); text-decoration:none; flex:none}
.gbrand:hover{text-decoration:none}
.glinks{display:flex; gap:22px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none}
.glinks::-webkit-scrollbar{display:none}
.glinks a{font-size:13px; color:var(--ink); opacity:.8; white-space:nowrap; padding:6px 0; text-decoration:none}
.glinks a:hover{opacity:1; text-decoration:none}
.glinks a[aria-current="page"]{opacity:1; font-weight:600}
.gsearch{flex:none; margin:0}
.gsearch input{width:200px; min-height:32px; padding:0 12px 0 32px; border:0; border-radius:var(--radius-pill); background:var(--surface-fill) no-repeat 11px 50% / 14px 14px; color:var(--ink); font-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E")}
.gsearch input::placeholder{color:var(--ink-secondary)}
.gsearch input::-webkit-search-cancel-button{-webkit-appearance:none}

/* ================= Portal: Seitenrahmen ================= */
.portal{max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,40px) 40px}
.portal.wide{padding-top:8px}
.ptop{display:flex; align-items:center; gap:12px; padding:20px 0 0}
.crumbs{font-size:15px; color:var(--ink-secondary)}
.crumbs a{color:var(--accent-text); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--ink-secondary); margin:0 6px; opacity:.6}
.ptop .psearch{display:none}
.mhead{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 40px; padding:28px 0 8px}
.mhead h1{font-size:clamp(36px,5.2vw,56px); line-height:1.07; letter-spacing:-.02em; margin:0 0 12px}
.mhead .lead{max-width:44rem; margin:0}
.mhead > div{min-width:0; max-width:100%}
.mstat{display:flex; align-items:center; gap:14px; font-size:15px; color:var(--ink-secondary)}
.mstat p{margin:0}
.ring{flex:none}
.ring-bg{fill:none; stroke:var(--surface-fill); stroke-width:5}
.ring-fg{fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset .5s}
.ring text{font-family:var(--font-rounded); font-size:10px; font-weight:600; fill:var(--ink)}
.mstat .ring text{font-size:15px}

/* Reiter als Segmented Control */
.tabs{display:inline-flex; max-width:100%; overflow-x:auto; scrollbar-width:none; gap:2px; padding:3px; margin:28px 0 8px; border-radius:var(--radius-pill); background:var(--surface-fill)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none; min-height:34px; padding:0 16px; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--ink); font-size:15px; font-weight:500; white-space:nowrap; cursor:pointer}
.tabs button:hover{background:var(--surface-fill)}
.tabs button[aria-selected="true"]{background:var(--seg-on); box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight:600}
.tabs small{display:inline-block; min-width:20px; margin-left:6px; padding:0 6px; border-radius:var(--radius-pill); background:var(--surface-fill); font:600 12px/18px var(--font-rounded); color:var(--ink-secondary); text-align:center}
.panel{padding-top:4px}
.panel > .teil:first-child{margin-top:16px}
.ov{max-width:44rem; margin-top:16px}
.ov .kette{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; counter-reset:k}
.ov .kette li{counter-increment:k; margin:0; background:var(--surface-card); box-shadow:var(--shadow-card); border-radius:var(--radius-pill); padding:6px 14px; font-weight:600; font-size:15px}
.ov .kette li::before{content:counter(k) " "; color:var(--ink-secondary); font-family:var(--font-rounded)}

/* Listen von Lerneinheiten als gruppierte Liste */
.teil{margin-top:32px}
.teil-t{font:600 21px/1.25 var(--font-display); letter-spacing:-.01em; margin:0 0 12px}
.teil-t span{color:var(--ink-secondary); font-weight:500; margin-right:8px}
.courses{list-style:none; padding:0 24px; margin:12px 0 0; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card)}
.courses:empty{display:none}
.course{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 28px; align-items:center; padding:18px 0; border-bottom:1px solid var(--separator); margin:0}
.course:last-child{border-bottom:0}
.course h3{margin:0; font-size:17px; line-height:1.3}
.course h3 a{color:var(--ink)}
.course h3 a:hover{color:var(--accent-text); text-decoration:none}
.course p{margin:4px 0 0; font-size:15px; color:var(--ink-secondary); line-height:1.4}
.course .nr,.course .cnr{display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; margin-right:10px; padding:0 7px; border-radius:7px; background:var(--surface-fill); color:var(--ink); font:600 14px/1 var(--font-rounded); vertical-align:1px}
.course.soon h3,.course.soon p:not(.siehe),.course.soon .rcol{opacity:.55}
.course.erledigt h3::after{content:"erledigt"; margin-left:8px; font-size:12px; font-weight:600; color:var(--vital-ecg); background:var(--ok-tint); border-radius:var(--radius-pill); padding:1px 8px; vertical-align:2px}
.meta{font-size:13px!important; color:var(--ink-secondary)}
.meta span+span::before{content:" | "; white-space:pre; opacity:.5}
.siehe{font-size:13px!important; color:var(--ink-secondary)}
.siehe a{font-weight:600}
.rcol{justify-self:end; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px}
.rcol audio{width:17rem; max-width:100%}
.rcol .btn{min-height:34px; padding:0 16px; font-size:15px}
.cprog{font-size:13px; color:var(--ink-secondary); min-width:12rem; text-align:right}
.cprog .prog{margin:6px 0 8px}
.cprog p{margin:0}
.pill{display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink-secondary); font-size:12px; font-weight:600; white-space:nowrap; margin:0}
.pill.stufe{color:var(--ink)}
.pill.warn{background:var(--alarm-tint); color:var(--vital-abp)}
.pill.ok{background:var(--ok-tint); color:var(--vital-ecg)}
.vslot video{width:100%; max-width:40rem; margin-top:10px; border-radius:12px; background:#000}

/* Filter, große Suche, Lernpfade */
.filters{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:20px 0 0}
.fchip{min-height:34px; padding:0 16px; border:0; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink); font-size:15px; font-weight:500; cursor:pointer}
.fchip:hover{background:var(--surface-fill-2)}
.fchip[aria-pressed="true"]{background:var(--accent); color:var(--on-accent); font-weight:600}
.bigsearch input{width:100%; min-height:56px; margin:24px 0 8px; padding:0 20px 0 52px; border:0; border-radius:14px; background:var(--surface-card) no-repeat 20px 50% / 20px 20px; box-shadow:var(--shadow-card); color:var(--ink); font-size:21px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E")}
.dh2{font-size:28px; margin:56px 0 4px}
.lphead{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 40px; align-items:flex-start; margin-top:20px}
.lphead > div:first-child{max-width:44rem}
.steps{list-style:none; padding:0; margin:20px 0 0; counter-reset:s}
.steps > .step{counter-increment:s; position:relative; padding:24px 0 0 52px; margin:0}
.steps > .step::before{content:counter(s); position:absolute; left:0; top:22px; width:34px; height:34px; line-height:34px; text-align:center; border-radius:50%; background:var(--surface-card); box-shadow:var(--shadow-card); font:600 17px/34px var(--font-rounded); color:var(--ink)}
.steps > .step.fertig::before{background:var(--vital-ecg); color:#FFFFFF; box-shadow:none}
.steps > .step h2{font-size:21px; margin:4px 0 0}
.steps > .step .courses{margin-top:10px}

/* Suche und Prüfungsmodus */
.fthits{list-style:none; padding:0 24px; margin:8px 0 24px; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card)}
.fthits:empty{display:none}
.fthits li{padding:14px 0; margin:0; border-bottom:1px solid var(--separator)}
.fthits li:last-child{border-bottom:0}
.fthits li a{font-weight:600}
.fthits li p{margin:4px 0 0; font-size:15px; color:var(--ink-secondary); overflow-wrap:anywhere}
.fthits mark{background:rgba(255,214,10,.45); color:inherit; border-radius:3px; padding:0 2px}
.prsetup fieldset,.prq fieldset{border:0; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); margin:0 0 14px; padding:16px 22px}
.prsetup legend{font:600 19px/1.2 var(--font-display); padding:12px 0 6px; float:left; width:100%}
.prsetup legend + *{clear:both}
.chk{display:block; padding:6px 0; min-height:36px}
.chk input{margin-right:8px}
.prlist{padding-left:1.4em}
.prq{margin:0 0 16px}
.prq .prf{font-weight:600; margin:2px 0 10px}
.prq .opt{display:flex; margin:6px 0; min-height:40px; cursor:pointer}
.prtab{margin:16px 0}
.prtab td:last-child,.prtab th:last-child{white-space:nowrap}
.prscore{background:var(--surface-card); box-shadow:var(--shadow-card); border-radius:var(--radius-md); padding:20px 24px}
.prscore b{display:block; font:600 34px/1.1 var(--font-rounded); margin-bottom:6px}
.prscore.good b{color:var(--vital-ecg)}
.prscore.bad b{color:var(--vital-abp)}
.prtab{background:var(--surface-card); border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px var(--separator)}

/* ================= Startseite ================= */
.portal.start{padding-bottom:40px}
.hero{padding:var(--space-6) 0 56px}
.hero h1{font-size:clamp(34px,5.4vw,56px); line-height:1.07; letter-spacing:-.02em; margin:0 0 var(--space-5)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:48px; align-items:start}
.hero-tag{font:600 28px/1.18 var(--font-display); letter-spacing:-.01em; color:var(--ink); margin:0; max-width:30rem}
.hero-lead{font-size:21px; line-height:1.38; color:var(--ink-secondary); margin:16px 0 0; max-width:32rem}
.hero-cta{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:28px}
.hero-btn{min-height:52px; padding:0 28px; font-size:19px}
.hero-cta-t{font-size:15px; line-height:1.35; color:var(--ink-secondary); padding-left:4px}
.hero .tabs{margin:32px 0 0}
.vitals{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3)}
.vgrp{grid-column:1 / -1; font-size:13px; font-weight:600; color:var(--ink-secondary); margin:6px 0 -4px 4px}
.vgrp:first-child{margin-top:0}
.vt{display:flex; flex-direction:column; min-width:0; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:16px 18px 14px; color:var(--ink); text-decoration:none; transition:transform .2s ease}
.vt:hover{text-decoration:none; transform:translateY(-2px)}
.vt-h{display:flex; align-items:center; gap:6px; font-size:15px; color:var(--ink-secondary)}
.vt-dot{width:8px; height:8px; border-radius:50%; flex:none}
.vt-v{margin-top:6px; white-space:nowrap}
.vt-v b{font:600 44px/1 var(--font-rounded); letter-spacing:-.01em; color:var(--ink)}
.vt-v span{font:500 15px/1.2 var(--font-rounded); color:var(--ink-secondary); margin-left:4px}
.vt svg{display:block; width:100%; height:30px; margin:10px 0 8px; overflow:hidden}
.vt path{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.vt-f{font-size:13px; line-height:1.3; color:var(--ink-secondary); margin-top:auto}
.vt-f b{color:var(--accent-text); font-weight:600}
.vt.v-ecg .vt-dot{background:var(--vital-ecg)} .vt.v-ecg path{stroke:var(--vital-ecg)}
.vt.v-spo2 .vt-dot{background:var(--vital-spo2)} .vt.v-spo2 path{stroke:var(--vital-spo2)}
.vt.v-abp .vt-dot{background:var(--vital-abp)} .vt.v-abp path{stroke:var(--vital-abp)}
.vt.v-co2 .vt-dot{background:var(--vital-co2)} .vt.v-co2 path{stroke:var(--vital-co2)}
.vt.v-temp .vt-dot{background:var(--vital-temp)} .vt.v-temp path{stroke:var(--vital-temp)}
@media (prefers-reduced-motion: no-preference){
  .vt path{stroke-dasharray:420; stroke-dashoffset:420; animation:vt-zeichnen 1.6s ease-out .15s forwards}
  .vt:nth-of-type(2) path{animation-delay:.3s} .vt:nth-of-type(3) path{animation-delay:.45s} .vt:nth-of-type(4) path{animation-delay:.6s}
}
@keyframes vt-zeichnen{to{stroke-dashoffset:0}}

.sec{margin-top:var(--space-6)}
.sec:first-child{margin-top:0}
.sec-h{font-size:40px; line-height:1.1; letter-spacing:-.015em; margin:0}
.sec-lead{font-size:17px; color:var(--ink-secondary); margin:8px 0 0; max-width:40rem}
.sec-body{margin-top:var(--space-5)}

/* Weiterlernen */
.hcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:var(--space-3)}
.hcard{display:flex; flex-direction:column; gap:4px; min-width:0; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:22px 24px; color:var(--ink); text-decoration:none}
.hcard:hover{text-decoration:none}
.hcard .hk{font-size:13px; color:var(--ink-secondary)}
.hcard b{font:600 21px/1.25 var(--font-display); letter-spacing:-.01em}
.hcard .hs{font-size:15px; color:var(--ink-secondary)}
.hcard .prog{margin-top:14px}
.hcard .hgo{align-self:flex-start; margin-top:16px}
.hcard .hgo.btn{min-height:36px; padding:0 18px; font-size:15px}

/* Module */
.tiles{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3)}
.tiles .tgrp{display:none}
.tile{margin:0}
.tile a{display:flex; flex-direction:column; height:100%; min-height:220px; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:22px 22px 18px; color:var(--ink); text-decoration:none; transition:box-shadow .2s}
.tile a:hover{text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 14px 32px rgba(0,0,0,.10)}
.ti{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; background:var(--fill-opaque); color:var(--ink); margin-bottom:14px}
.ti svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tile .tk{font-size:13px; color:var(--ink-secondary); margin-bottom:2px}
.tile .tt{font:600 19px/1.25 var(--font-display); letter-spacing:-.01em}
.tile .tx{font-size:15px; line-height:1.4; color:var(--ink-secondary); margin:6px 0 16px}
.tile .tf{margin-top:auto; font-size:13px; line-height:1.35; color:var(--ink-secondary)}
.tile .tf .prog{margin-bottom:8px}
.tile .tf .ring{display:none}
.tile.soon .tt,.tile.soon .tx{opacity:.55}

/* Rechner */
.rechnerreihe{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3)}
.rcard{display:flex; flex-direction:column; min-width:0; background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:28px 28px 24px; color:var(--ink); text-decoration:none}
.rcard:hover{text-decoration:none}
.rcard b{font:600 24px/1.2 var(--font-display); letter-spacing:-.01em}
.rcard > span{font-size:15px; color:var(--ink-secondary); margin-top:6px}
.rcard .rtags{display:flex; flex-wrap:wrap; gap:6px; margin:20px 0 22px}
.rcard .rgo{margin-top:auto; font-size:15px; font-weight:600; color:var(--accent-text)}
.rechnerknopf{display:flex; align-items:center; gap:16px; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:18px 22px; color:var(--ink); text-decoration:none}
.rkverweis{margin:16px 0}

/* Medikamenten-Tags nach ISO 26825: Farbe nur mit Wirkstoffname, Text immer dunkel */
.dtag{display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:var(--radius-pill); color:var(--on-drug); font-size:14px; font-weight:600; white-space:nowrap}
.dtag.induction{background:var(--drug-induction)} .dtag.opioid{background:var(--drug-opioid)} .dtag.relaxant{background:var(--drug-relaxant)}
.dtag.benzo{background:var(--drug-benzo)} .dtag.vasopressor{background:var(--drug-vasopressor)} .dtag.local{background:var(--drug-local)}
.dtag.anticholinergic{background:var(--drug-anticholinergic)}
.gtag{display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink); font-size:14px; white-space:nowrap}

/* Nachschlagen und üben: gruppierte Liste */
.einstiege{display:grid; grid-template-columns:1fr 1fr; column-gap:var(--space-3); row-gap:0; background:transparent}
.einstiege > div{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:0 20px; min-width:0}
.einstiege a{display:grid; grid-template-columns:36px minmax(0,1fr) 12px; gap:0 14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--separator); color:var(--ink); text-decoration:none}
.einstiege a:last-child{border-bottom:0}
.einstiege a:hover{text-decoration:none}
.einstiege a:hover b{color:var(--accent-text)}
.einstiege .ti{grid-row:1 / span 2; width:36px; height:36px; border-radius:10px; margin:0}
.einstiege .ti svg{width:20px; height:20px}
.einstiege b{font-size:17px; font-weight:600; line-height:1.3}
.einstiege span{font-size:13px; line-height:1.35; color:var(--ink-secondary)}
.einstiege a::after{content:""; grid-column:3; grid-row:1 / span 2; width:8px; height:8px; border-right:2px solid var(--line-opaque); border-top:2px solid var(--line-opaque); transform:rotate(45deg)}

/* Vorwort und Über das E-Learning: Lesespalte */
.startvorwort,.ueber{max-width:680px}
.startvorwort{padding:8px 0 0}
.vorwort{max-width:680px}
.vorwort p,.startvorwort p,.ueber p{font-size:17px; line-height:1.6}
.motto{font-size:15px; font-weight:600; color:var(--ink-secondary); margin:0 0 20px}
.vw-key{font:600 28px/1.25 var(--font-display)!important; letter-spacing:-.01em; margin:40px 0!important}
.sig{font-weight:600; margin-top:28px}
.sig span{font-weight:400; color:var(--ink-secondary); font-size:15px}
.ueber h2{margin-top:56px}
.ueber h3{margin-top:32px}

/* Fortschritt */
section.dash{margin-top:20px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:var(--space-3); margin:16px 0}
.stat{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:16px 18px}
.stat b{display:block; font:600 40px/1.05 var(--font-rounded); color:var(--ink)}
.stat span{display:block; font-weight:600; margin-top:6px}
.stat small{display:block; font-size:13px; color:var(--ink-secondary); margin-top:2px}
.dash-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:var(--space-3); margin:16px 0}
.dcard{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:18px 22px}
.dcard h3{margin:2px 0 6px}
.dh{font-size:28px; margin:56px 0 12px}
#areas{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:0 24px}
.area{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; padding:14px 0; border-bottom:1px solid var(--separator); align-items:center}
.area:last-child{border-bottom:0}
.area .an{font-weight:600}
.area .an a{color:var(--ink)}
.area .av{font-size:13px; color:var(--ink-secondary); text-align:right}
.area .prog{grid-column:1 / -1}
.area.soon{opacity:.55}
.chips{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.chipk{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:26px; padding:0 8px; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink); text-decoration:none; font:600 13px/1 var(--font-rounded)}
.chipk:hover{text-decoration:none; background:var(--surface-fill-2)}
.chipk.run{background:var(--surface-card); box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent-text)}
.chipk.ok{background:var(--vital-ecg); color:#FFFFFF}
.certlist{list-style:none; padding:0 24px; margin:0; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card)}
.certlist li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px 16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--separator); margin:0}
.certlist li:last-child{border-bottom:0}
.backup{margin-top:40px; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card)}
.backup summary{cursor:pointer; padding:16px 22px; font-weight:600}
.backup > div{padding:0 22px 20px}
.dash .note{margin-top:24px}

/* Kompetenzen */
.kompetenz .tabs{margin:24px 0 12px}
.kompetenz .tabs button{font-family:var(--font-sans)}
.kjahr{border-top:1px solid var(--separator); padding:16px 0}
.kjahr h2{font-size:21px}
.kcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.kcols ul{padding-left:1.1em; font-size:15px}
.kcols small{color:var(--ink-secondary)}
.kz{font-size:15px}
.kz2{color:var(--vital-ecg)} .kz1{color:var(--accent-text)} .kz0{color:var(--ink-secondary)}
table.kt{border-collapse:collapse; width:100%; font-size:14px; background:var(--surface-card)}
.kt th,.kt td{border-bottom:1px solid var(--separator); padding:8px 10px; vertical-align:top; text-align:left}
.kt th{background:var(--fill-opaque); font-size:13px; color:var(--ink-secondary); font-weight:600}
.tw{overflow-x:auto; border-radius:14px; box-shadow:0 0 0 1px var(--separator)}

/* Bildatlas */
.afilter{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:24px 0 16px}
.afilter input,.afilter select{min-height:36px; padding:0 14px; border:0; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink); font-size:15px}
.afilter input{min-width:16rem}
.agrid{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-3)}
.acard{display:flex; flex-direction:column; width:100%; height:100%; text-align:left; background:var(--surface-card); border:0; border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:10px 10px 14px; cursor:pointer; color:var(--ink)}
.acard:hover{box-shadow:0 1px 2px rgba(0,0,0,.05), 0 14px 32px rgba(0,0,0,.10)}
.athumb{display:block; height:140px; overflow:hidden; background:#FFFFFF; border-radius:10px}
.athumb img,.athumb svg{width:100%; height:140px; object-fit:contain}
.acap{font-weight:600; font-size:14px; line-height:1.3; margin-top:10px; padding:0 4px}
.aunit{font-size:12px; color:var(--ink-secondary); padding:2px 4px 0}
.alight{position:fixed; inset:0; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px}
.alight[hidden]{display:none}
.ainner{background:var(--surface-card); border-radius:var(--radius-lg); max-width:1100px; max-height:92vh; overflow:auto; padding:24px}
.ainner img,.ainner svg{width:100%; height:auto; max-height:70vh; object-fit:contain; background:#FFFFFF; border-radius:12px}

/* Fußzeile */
.sfoot{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; margin-top:var(--space-6); padding:20px 0 8px; border-top:1px solid var(--separator); font-size:13px; color:var(--ink-secondary)}
.sfoot a{color:var(--ink-secondary); text-decoration:none}
.sfoot a:hover{color:var(--ink); text-decoration:underline}
.sfoot .copy{margin-left:auto}
.sfoot .herkunft{flex-basis:100%; order:9; margin-top:4px}

/* ================= Anpassung an kleine Bildschirme ================= */
@media (max-width:1060px){
  .hero{padding-top:56px}
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .vitals{max-width:560px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  aside{position:fixed; inset:0 auto 0 0; width:86%; max-width:320px; z-index:50; transform:translateX(-100%); transition:transform .25s ease; background:var(--surface)}
  aside.open{transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .mobile-top{display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:30; min-height:52px; padding:0 12px; background:var(--bar-bg); -webkit-backdrop-filter:var(--material-bar); backdrop-filter:var(--material-bar); border-bottom:1px solid var(--separator); font-size:15px}
  .mobile-top #mobTitle{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  main{padding-top:24px}
  .chain,.brackets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .brackets{display:none}
  .chain div{min-height:auto}
  .content{padding:4px 20px 20px}
  .task,.calc{padding:20px}
  .match{grid-template-columns:1fr}
  .course{grid-template-columns:1fr}
  .rcol{justify-self:start; justify-content:flex-start}
  .cprog{text-align:left}
  .rechnerreihe,.einstiege{grid-template-columns:1fr}
  .einstiege{row-gap:var(--space-3)}
  .gsearch input{width:160px}
}
@media (max-width:620px){
  .vq-cols,.lakt,.co2,.matrix,.pbm{grid-template-columns:1fr}
  .ohm,.fickflow{grid-template-columns:1fr} .ohm i,.fickflow i{display:none}
  .flow-grid .flow{flex-wrap:wrap} .flow-grid .flow i{display:none}
  .matrix .mx-h{text-align:left}
  .patterns{font-size:13px; grid-template-columns:minmax(5.5rem,1.2fr) repeat(3,minmax(0,1fr))}
  .patterns .pn,.patterns .pv{padding:8px 6px}
  dl.swl .sw-row{grid-template-columns:1fr; gap:2px}
  .certlist li,.area{grid-template-columns:1fr}
  .area .av{text-align:left}
  .fig.htmlfig .scroll-x .chart.schema.fb,.fig.htmlfig .scroll-x .chart.schema.eeg{min-width:26rem}
  .fig.htmlfig .scroll-x .chart.schema.p11{min-width:30rem}
  .fig.htmlfig .scroll-x::after{content:"Zum Vergrößern seitlich wischen"; display:block; font-size:12px; color:var(--ink-secondary); padding-top:4px}
  .tiles{grid-template-columns:1fr}
  .tile a{min-height:0}
  .hero{padding-top:40px}
  .hero-tag{font-size:24px}
  .hero-lead{font-size:19px}
  .vt{padding:14px 14px 12px}
  .vt-v b{font-size:36px}
  .sec{margin-top:56px}
  .sec-h{font-size:32px}
  .gnav-in{flex-wrap:wrap; gap:4px 16px; padding-top:8px; padding-bottom:4px}
  .glinks{order:3; flex-basis:100%; gap:18px}
  .gsearch{margin-left:auto}
  .gsearch input{width:150px}
  .courses,.fthits,.certlist,#areas{padding:0 16px}
  .sfoot .copy{margin-left:0}
  .steps > .step{padding-left:44px}
  .steps > .step::before{width:30px; height:30px; line-height:30px}
  .rcard{padding:22px 20px}
  .mhead h1{font-size:36px}
}
@media (max-width:430px){ .mhead h1{font-size:30px} .hero h1{font-size:34px} .kopf h1,.wrap h1{font-size:30px} }
@media (max-width:520px){ .chain{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} .vt path{stroke-dashoffset:0!important} }

/* ================= Druck ================= */
@media print{
  :root{--surface:#FFFFFF; --surface-card:#FFFFFF}
  aside,.mobile-top,.pager,#nojs,.no-print,.gnav,.rechnerknopf,.rcard,.bs-btn,.vb-toast{display:none!important}
  body{background:#FFFFFF; color:#000000}
  .app{display:block}
  .content,.task,.calc,.courses{box-shadow:none; border:1px solid #D2D2D7}
  .lesson[hidden]{display:block!important}
  .ph-box{background:none}
  body.print-cert *{visibility:hidden}
  body.print-cert .cert, body.print-cert .cert *{visibility:visible}
  body.print-cert .cert{position:absolute; left:0; top:0; width:100%}
}
.rcol .btn.ghost{background:var(--surface-fill); color:var(--ink); padding:0 16px}
.rcol .btn.ghost:hover{background:var(--surface-fill-2)}

/* P51 Ankreuzliste */
.chk{display:flex; flex-direction:column; gap:12px; margin:12px 0 20px}
.chk label,.row label:has(>input[type=checkbox]){display:flex; align-items:center; gap:12px; font-size:17px; color:var(--ink); margin:0; cursor:pointer}
.chk input[type=checkbox],.row input[type=checkbox]{width:22px; height:22px; min-height:0; padding:0; margin:0; flex:none; border-radius:6px}

/* NARKO.LAB Farbmodus-Schalter */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
.themebtn{display:inline-flex; align-items:center; gap:6px; flex:none; min-height:32px; padding:6px 12px; margin-left:12px; border:0;
  border-radius:980px; background:var(--surface-fill); color:var(--ink); font:500 13px/1 var(--sans); cursor:pointer}
.themebtn:hover{background:var(--surface-fill-2)}
.themebtn:focus-visible{outline:3px solid var(--accent-ring); outline-offset:2px}
.themebtn svg{width:16px; height:16px}
#side .brand{display:flex; align-items:center; justify-content:space-between; gap:8px}
.mobile-top .themebtn{margin-left:auto}
.gnav-in .themebtn{width:32px; padding:0; justify-content:center; margin-left:0}
.gnav-in .gsearch input{width:136px}
.gnav-in .themebtn span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* Ende Farbmodus-Schalter */

/* NARKO.LAB Fragen-Engine Notfallmedizin */
.nfblock,.nffall{margin:32px 0}
.nfq [hidden],.nffall [hidden]{display:none !important}
.nfkopf{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.nfstand{margin:0; color:var(--ink-secondary); font:500 15px var(--sans)}
.nfq{background:var(--surface-card); border-radius:18px; box-shadow:var(--shadow-card); padding:20px; margin:20px 0}
.nfq-typ{margin:0 0 4px; color:var(--ink-secondary); font:500 13px var(--sans)}
.nfq-frage{margin:0 0 12px; font:600 17px/1.45 var(--sans); color:var(--ink)}
.nfopt{display:flex; align-items:flex-start; gap:12px; padding:10px 14px; margin:8px 0; border-radius:12px; background:var(--surface-fill); cursor:pointer; font:17px/1.4 var(--sans)}
.nfopt input{margin-top:3px; width:18px; height:18px; flex:none}
.nfopt.ok{box-shadow:inset 0 0 0 2px var(--vital-ecg)}
.nfopt.fehlt{box-shadow:inset 0 0 0 2px var(--vital-ecg); opacity:.75}
.nfopt.falsch{box-shadow:inset 0 0 0 2px var(--vital-abp)}
.nffolge{list-style:decimal; padding-left:28px; margin:0}
.nfrow{display:flex; align-items:center; gap:8px; padding:8px 12px; margin:6px 0; border-radius:12px; background:var(--surface-fill); font:17px/1.4 var(--sans)}
.nfrow-t{flex:1; min-width:0; overflow-wrap:anywhere; hyphens:auto}
.nfopt span,.nfzu-t{min-width:0; overflow-wrap:anywhere; hyphens:auto}
.nfrow.ok{box-shadow:inset 0 0 0 2px var(--vital-ecg)} .nfrow.falsch{box-shadow:inset 0 0 0 2px var(--vital-abp)}
.nfmini{width:32px; height:32px; border:0; border-radius:980px; background:var(--surface-fill-2); color:var(--ink); font:600 15px var(--sans); cursor:pointer}
.nfmini:disabled{opacity:.35; cursor:default}
.nfzu{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:8px 12px; margin:6px 0; border-radius:12px; background:var(--surface-fill); font:17px/1.4 var(--sans)}
.nfzu .sel{min-width:200px}
.nfzu.ok{box-shadow:inset 0 0 0 2px var(--vital-ecg)} .nfzu.falsch{box-shadow:inset 0 0 0 2px var(--vital-abp)}
.nfzahl{display:flex; align-items:center; gap:12px; border-radius:12px}
.nfzahl .sel{width:9rem; font-size:17px; min-height:40px; padding:6px 12px; border:0; border-radius:12px; background:var(--surface-fill); color:var(--ink)}
.nfzahl.ok .sel{box-shadow:inset 0 0 0 2px var(--vital-ecg)} .nfzahl.falsch .sel{box-shadow:inset 0 0 0 2px var(--vital-abp)}
.nfeinheit{color:var(--ink-secondary); font:17px var(--sans)}
.nfq-akt{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.nfbew{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; font:15px var(--sans); color:var(--ink-secondary)}
.nffb{margin-top:12px; font:16px/1.5 var(--sans)}
.nffb:empty{display:none}
.nffb.ok,.nffb.falsch,.nffb.teil,.nffb.loes{padding:12px 14px; border-radius:12px; background:var(--surface-fill)}
.nffb.ok{box-shadow:inset 3px 0 0 var(--vital-ecg)} .nffb.falsch{box-shadow:inset 3px 0 0 var(--vital-abp)}
.nffb.teil{box-shadow:inset 3px 0 0 var(--vital-temp)} .nffb.loes{box-shadow:inset 3px 0 0 var(--accent)}
.nfq-quelle{display:block; margin-top:6px; color:var(--ink-secondary); font-size:14px}
.nffall-in{background:var(--surface-card); border-radius:28px; box-shadow:var(--shadow-card); padding:24px}
.nffall-in h3{margin:0 0 8px}
.nffall-ein,.nffall-verlauf{font:17px/1.5 var(--sans)}
.nffall-verlauf{padding:12px 14px; border-radius:12px; background:var(--surface-fill)}
.nffall-schritt{box-shadow:none; background:transparent; padding:8px 0}
.nffall-ende{margin-top:16px; padding:14px; border-radius:12px; background:var(--surface-fill); font:17px/1.5 var(--sans)}
/* Ende Fragen-Engine Notfallmedizin */

/* NARKO.LAB Dashboard Zufall und Tageschallenge */
.chal{background:var(--surface-card); border-radius:28px; box-shadow:var(--shadow-card); padding:32px; max-width:860px}
.chal-bereich{margin:0 0 20px}
.chal-bereich .fchip[aria-pressed="true"]{background:var(--ink); color:var(--surface-card)}
.chal-k{margin:0 0 8px; color:var(--ink-secondary); font:500 15px var(--sans)}
.chal-h{margin:0 0 12px; font:600 28px/1.2 var(--sans); color:var(--ink)}
.chal-a{margin:0 0 20px; font:17px/1.55 var(--sans); color:var(--ink)}
.chal-f{margin:0 0 12px; font:600 17px/1.45 var(--sans); color:var(--ink)}
.chopt{display:flex; align-items:flex-start; gap:12px; padding:10px 14px; margin:8px 0; border-radius:12px; background:var(--surface-fill); cursor:pointer; font:17px/1.4 var(--sans)}
.chopt input{margin-top:3px; width:18px; height:18px; flex:none}
.chopt.ok{box-shadow:inset 0 0 0 2px var(--vital-ecg)} .chopt.falsch{box-shadow:inset 0 0 0 2px var(--vital-abp)}
.chal-akt{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.chal-akt [hidden]{display:none !important}
.chal-fb{margin-top:12px; font:16px/1.5 var(--sans)} .chal-fb:empty{display:none}
.chal-fb.ok,.chal-fb.falsch{padding:12px 14px; border-radius:12px; background:var(--surface-fill)}
.chal-fb.ok{box-shadow:inset 3px 0 0 var(--vital-ecg)} .chal-fb.falsch{box-shadow:inset 3px 0 0 var(--vital-abp)}
.chal-u,.chal-s{margin:16px 0 0; color:var(--ink-secondary); font:15px var(--sans)}
.chal-s{margin-top:4px}
@media (max-width:600px){ .chal{padding:20px; border-radius:18px} .chal-h{font-size:22px} }
.rechnerreihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.rcard{display:flex; flex-direction:column; gap:8px; min-width:0; padding:20px; border-radius:18px; background:var(--surface-card); box-shadow:var(--shadow-card); color:var(--ink); text-decoration:none}
.rcard b{font:600 17px var(--sans)} .rcard>span:not(.rtags){color:var(--ink-secondary); font:15px/1.45 var(--sans)}
.rtags{display:flex; flex-wrap:wrap; gap:6px}
.sfoot{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline}
.sfoot .copy,.sfoot .herkunft{flex-basis:100%; min-width:0}
/* Ende Dashboard Zufall und Tageschallenge */

/* NARKO.LAB Reiter Weiterbildungsordnung */
.wbo-t .wbo-abschnitt th{background:var(--surface-fill); text-align:left; font-weight:600}
.wbo-t td small{color:var(--ink-secondary)}
.ov.wbo{max-width:none}
/* Ende Reiter Weiterbildungsordnung */

/* P57: Belegziffern im Fließtext und Evidenzkasten der Klinischen Physiologie */
.ref{font-size:12px; font-weight:600; color:var(--accent-text); white-space:nowrap}
.box.evid > .box-t{color:var(--accent-text)}
ul.lit{list-style:none; padding-left:0}
ul.lit li{overflow-wrap:anywhere; margin-bottom:6px}

/* P59: Quellenknopf und Quellenfenster des EEG Bootcamps */
.qbtn{font:inherit; font-size:13px; line-height:1; padding:4px 10px; margin-left:6px; border:1px solid var(--line);
      border-radius:999px; background:var(--surface-card); color:var(--muted); cursor:pointer}
.qbtn:hover{color:var(--accent-text); border-color:var(--accent-text)}
figcaption .qbtn{vertical-align:middle}
.qmodal{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.45); display:flex; align-items:center;
        justify-content:center; padding:20px}
.qmodal[hidden]{display:none}
.qbox{background:var(--surface-card); color:var(--ink); border-radius:18px; padding:32px; max-width:640px; width:100%;
      max-height:80vh; overflow:auto; box-shadow:0 18px 60px rgba(0,0,0,.28); position:relative}
.qzu{position:absolute; top:20px; right:20px; font:inherit; font-size:13px; padding:6px 14px; border:0;
     border-radius:999px; background:var(--surface-fill); color:var(--ink); cursor:pointer}
.qt{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.qzitat{font-size:17px; line-height:1.5; margin:0 0 20px}
.qz{margin:0 0 8px; font-size:15px}
.qk{display:block; font-size:13px; color:var(--muted)}
.qwarn{margin:0 0 12px; padding:12px 16px; border-radius:12px; background:var(--surface-fill); font-size:15px}
body.qoffen{overflow:hidden}

/* P59: rechnende Signalflächen und Herstellerkasten */
.sigfig{margin:32px 0}
.sigbar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.sigb{font:inherit; font-size:14px; padding:7px 16px; border:0; border-radius:999px; background:var(--surface-fill);
      color:var(--ink); cursor:pointer}
.sigb.an{background:var(--accent); color:var(--on-accent)}
.sigb.neu{margin-left:auto; color:var(--muted)}
.sigb.richtig{background:var(--ok-bg); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ok)}
.sigb.falsch{background:var(--red-bg); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--red)}
.sigb.teils{background:var(--amber-bg); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--amber)}
.sigb[disabled]{opacity:1; cursor:default}
.antwort{display:block; width:100%; text-align:left; margin-bottom:8px}
.sigcv{display:block; width:100%; height:170px; border-radius:12px; background:var(--surface-card)}
.sigwert{margin:8px 0 0; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums}
.box.hrst > .box-t{color:var(--muted)}
@media (max-width:520px){ .sigb{font-size:13px; padding:6px 12px} .sigb.neu{margin-left:0} }

/* P64 Anästhesie-Ordner: Ordnerseite und Teilseiten */
.mhead + .hubsec{margin-top:var(--space-5)}
.hubsec .sec-h{overflow-wrap:break-word; hyphens:auto}
.huballe{margin:var(--space-4) 0 0}
.huballe .btn,.teilnav .btn{white-space:normal; max-width:100%}
.huballe .btn{padding:10px 20px; line-height:1.3}
@media (max-width:620px){ .hubsec .sec-h{font-size:28px} }
.teilnav{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-5)}
.teilnav .tnav{flex-direction:column; align-items:flex-start; gap:0; padding:8px 20px; font-size:15px; text-align:left}
.teilnav .tnav small{font-size:13px; font-weight:400; color:var(--ink-secondary)}
.teilnav .nach{margin-left:auto; align-items:flex-end; text-align:right}
.crumb-teil a{font-weight:inherit}
/* Ende P64 */