/* =====================================================================
   KlinikDeutsch · Design-Motor (kd-design.css) · Version 1 · 4.10.2026
   EINE Quelle für das Aussehen aller KlinikDeutsch-Kursseiten.
   Ändern Sie hier einen Wert, ändert er sich auf jeder Seite, die diese Datei lädt.

   Aufbau:
     1. Marken-Tokens: Farben (wie klinikdeutsch.com: Blau #1E4ED8, Kobalt #142A6E,
        Smaragd #10B981 als Marke; #059669 als lesbare Knopf-Variante)
     2. Typografie- und Knopf-Tokens (Handy / ab 760 px), freigegeben von Ana am 4.10.2026
     3. Bausteine: Kopfzeile, Etappen, Baustein, Zyklus, Chips, Szene, Avatar,
        Knöpfe, Mikrofon, Übungen, Feedback, Dokument, Notizzettel, Satzgerüst, Profil
   Nur Tokens ändern, nie einzelne Seiten nachbauen.
   ===================================================================== */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dmsans-400-latin.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/dmsans-500-latin.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/dmsans-600-latin.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/dmsans-700-latin.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ebgaramond-500-latin.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ebgaramond-600-latin.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ebgaramond-700-latin.woff2") format("woff2")}
/* ===== KlinikDeutsch Kursraum · Design-Tokens (L05-Vorlage, Stand 4.10.2026) ===== */
:root{
 --blau:#1E4ED8;--kobalt:#142A6E;--gruen:#059669;--gruen-h:#047857;--text:#46506A;--ink:#1F2A44;--bg:#F8FAFC;--karte:#FFFFFF;--linie:#E2E8F2;
 --blau-hell:#E9F0FE;--gruen-hell:#E8F7F1;--gruen-rand:#BFE3CD;--pat:#EEF3FF;--pat-rand:#C9D7FB;--rot-hell:#FDECEC;--rot-rand:#F5C2C2;--rot:#9B1C1C;--note-linie:#DCE6FA;--emerald:#10B981;--note-rand:#E05D5D;--doc-kopf:#F1F4FA;
 --fs-h1:31px;--fs-titel:26px;--fs-h2:23px;--fs-rede:18px;--fs-body:17px;--fs-input:17px;--fs-meta:14px;--fs-chip:13px;
 --lh-body:1.55;--lh-titel:1.2;
 --btn-p-fs:16px;--btn-p-h:48px;--btn-s-fs:15px;--btn-s-h:44px;--btn-t-fs:14px;--btn-t-h:38px;--radius-btn:12px;
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--radius-card:14px;
 --portrait-gross:170px;--portrait-kompakt-b:96px;--portrait-kompakt-h:128px;--portrait-av:40px}
@media (min-width:760px){:root{--fs-h1:32px;--fs-titel:27px;--fs-h2:24px;--fs-rede:19px;--fs-body:18px;--fs-input:18px;--fs-meta:15px;--fs-chip:14px;--btn-p-fs:17px;--btn-p-h:50px;--btn-s-fs:16px;--btn-s-h:44px;--btn-t-fs:15px;--btn-t-h:40px;--portrait-gross:190px;--portrait-kompakt-b:150px;--portrait-kompakt-h:180px}}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:400 var(--fs-body)/var(--lh-body) "DM Sans",system-ui,sans-serif;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{font-family:"EB Garamond",Georgia,serif;color:var(--kobalt);line-height:var(--lh-titel);margin:0;text-wrap:balance}
.titel{font-size:var(--fs-titel);font-weight:600;margin:var(--sp-2) 0 var(--sp-1)}
h3{font-size:var(--fs-h2);font-weight:600;margin:0 0 var(--sp-2)}
p{margin:var(--sp-2) 0}b,strong{font-weight:600}
.wrap{max-width:820px;margin:0 auto;padding-inline:16px;padding-block:var(--sp-3) 56px}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--linie)}
.topin{max-width:820px;margin:0 auto;padding:var(--sp-2) 16px}
.toprow{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.toprow .tb{display:flex;gap:6px;flex:0 0 auto}
.brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;color:var(--kobalt)}.brand img{width:32px;height:32px;flex:0 0 32px}.brandname{display:block;font:700 19px/1.15 "EB Garamond",Georgia,serif}.brandcase{display:block;font-size:var(--fs-meta);line-height:1.3;font-weight:500}@media (max-width:479px){.brandname{display:none}.tb .lang{display:none}}
.kette{display:flex;gap:6px;overflow-x:auto;margin-top:var(--sp-2);scrollbar-width:none}.kette::-webkit-scrollbar{display:none}
.kette button{flex:0 0 auto;min-height:40px;border:1px solid var(--linie);background:var(--karte);border-radius:999px;padding:0 12px;font-weight:600;font-size:var(--fs-meta);color:var(--text);cursor:pointer;white-space:nowrap}
.kette button.on{background:var(--kobalt);border-color:var(--kobalt);color:#fff}
.kette button.ok{border-color:var(--gruen-rand);background:var(--gruen-hell);color:var(--gruen)}
.lbl{font-size:var(--fs-meta);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blau);margin:0 0 var(--sp-2)}
.leise{color:var(--text)}.meta{font-size:var(--fs-meta);color:var(--text)}
.zeit{font-size:var(--fs-meta);color:var(--text);margin-top:var(--sp-2)}
.baustein{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-card);padding:var(--sp-4);margin:var(--sp-4) 0}
.bkopf{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-2);flex-wrap:wrap}
.zyklus{display:flex;gap:4px;flex-wrap:wrap;margin:var(--sp-1) 0 var(--sp-3)}
.zyklus span{font-size:var(--fs-chip);font-weight:600;padding:2px 8px;border-radius:999px;color:var(--text);background:var(--bg);border:1px solid var(--linie)}
.zyklus span.on{background:var(--kobalt);border-color:var(--kobalt);color:#fff}
.zyklus span.ok{background:var(--gruen-hell);border-color:var(--gruen-rand);color:var(--gruen)}
.lz{display:block;margin:0 0 var(--sp-2);padding:0 0 var(--sp-2);border-bottom:1px dashed var(--linie);font-size:var(--fs-meta);color:var(--text)}
.lz .sep{color:var(--linie)}
.lz b{font-size:var(--fs-chip);letter-spacing:.05em;text-transform:uppercase;color:var(--blau)}
.teil{border-top:1px solid var(--linie);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.tk{font-size:var(--fs-meta);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--kobalt);margin:0 0 var(--sp-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hilfe{font-size:var(--fs-chip);font-weight:600;padding:2px 8px;border-radius:999px;background:var(--gruen-hell);color:var(--gruen);border:1px solid var(--gruen-rand)}
.chip{display:inline-block;max-width:100%;font-size:var(--fs-chip);font-weight:700;letter-spacing:.03em;border-radius:999px;padding:1px 8px;vertical-align:2px;white-space:normal;text-transform:none}
.chip.pat{background:var(--blau-hell);color:var(--blau);border:1px solid var(--pat-rand)}
.chip.fach{background:var(--kobalt);color:#fff;border:1px solid var(--kobalt)}
.chip.doku{background:var(--doc-kopf);color:var(--ink);border:1px solid #C9D1E0}
.chip.notiz{background:#FDF0F0;color:#B23A3A;border:1px solid #F1C7C7}
.chip.neu{background:#fff;color:var(--blau);border:1px solid var(--blau)}
.chip.wdh{background:#fff;color:var(--text);border:1px solid var(--linie)}
.chip.wichtig{background:var(--gruen-hell);color:var(--gruen);border:1px solid var(--gruen-rand)}
.chip.gram{background:#FFF8E6;color:#7A5200;border:1px solid #F2D58F}
/* Szenen: gross = neue Patientenszene · kompakt = Oberarzt / Folgeszene */
.szene{display:grid;border:1px solid var(--linie);border-radius:var(--radius-card);overflow:hidden;background:var(--karte);margin:var(--sp-3) 0}
.szene .foto{background:#dfe6f3;position:relative;min-width:0}
.szene .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.szene.gross{grid-template-columns:minmax(0,1fr)}.szene.gross .foto{height:var(--portrait-gross)}
.szene.kompakt{grid-template-columns:var(--portrait-kompakt-b) minmax(0,1fr)}.szene.kompakt .foto{height:auto;min-height:var(--portrait-kompakt-h)}.szene.kompakt .foto img{position:absolute;inset:0}
.szene.kompakt .ort{font-size:var(--fs-chip)}.szene.kompakt .foto img{object-position:50% 25%}
.szene .ort{max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-hyphens:manual;hyphens:manual;position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.94);color:var(--kobalt);border-radius:999px;padding:1px 9px;font-size:var(--fs-chip);font-weight:700}
.szene .rede{padding:var(--sp-3) var(--sp-4);background:var(--pat);min-width:0;display:flex;flex-direction:column;justify-content:center}
.szene.weiss .foto{background:var(--kobalt)}
.szene.weiss .rede{background:var(--kobalt);color:#fff}
.wer{font-size:var(--fs-meta);font-weight:700;color:var(--kobalt);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.szene.weiss .wer{color:#CFE0FF}.szene.weiss .chip.fach{background:#fff;color:var(--kobalt)}
.rtxt{font-size:var(--fs-rede);line-height:1.4;margin:var(--sp-1) 0 var(--sp-2)}
@media (max-width:759px){.szene.kompakt .rede{padding:var(--sp-2) var(--sp-3)}.szene.kompakt .rtxt{font-size:var(--fs-rede)}}
@media (min-width:760px){.szene.gross{grid-template-columns:220px minmax(0,1fr)}.szene.gross .foto{height:auto;min-height:var(--portrait-gross)}}
.av{display:flex;gap:var(--sp-2);align-items:flex-start;margin:var(--sp-2) 0}
.av img,.av .ini{flex:0 0 var(--portrait-av);width:var(--portrait-av);height:var(--portrait-av);border-radius:50%;object-fit:cover;object-position:50% 25%;background:var(--blau-hell);display:flex;align-items:center;justify-content:center;font-size:var(--fs-meta);font-weight:700;color:var(--kobalt)}
.av .bl{flex:1;min-width:0;border-radius:12px;padding:var(--sp-2) var(--sp-3);background:var(--pat);border:1px solid var(--pat-rand)}
.av.weiss .bl{background:var(--kobalt);border-color:var(--kobalt);color:#fff}.av.weiss .wer{color:#CFE0FF}.av.weiss .chip.fach{background:#fff;color:var(--kobalt)}
.av.du{flex-direction:row-reverse}.av.du .ini{background:var(--gruen-hell);color:var(--gruen)}.av.du .bl{background:#fff;border-color:var(--gruen-rand)}
.btn,.mic-b,.ter{border-radius:var(--radius-btn);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;line-height:1.2;text-align:center}
.btn.prim,.mic-b{border:0;background:var(--gruen);color:#fff;font-size:var(--btn-p-fs);min-height:var(--btn-p-h);padding:0 20px}
.btn.prim:hover,.mic-b:hover{background:var(--gruen-h)}
.btn.sek{background:var(--karte);border:1px solid var(--linie);color:var(--kobalt);font-size:var(--btn-s-fs);min-height:var(--btn-s-h);padding:0 14px}
.ter{background:transparent;border:1px solid var(--linie);color:var(--kobalt);font-size:var(--btn-t-fs);min-height:var(--btn-t-h);padding:0 12px}
.szene.weiss .ter,.av.weiss .ter{border-color:rgba(255,255,255,.45);color:#fff}
.btn:disabled,.mic-b:disabled{opacity:.5;cursor:default}
.btns{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3);align-items:center}
.mic{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2);align-items:flex-start}
.mic-b{min-width:min(210px,100%)}.mic-b.rec{background:#C24141;animation:p 1.2s ease-in-out infinite}
@keyframes p{50%{box-shadow:0 0 0 8px rgba(194,65,65,.15)}}
.live{align-self:stretch;border:1px dashed var(--pat-rand);border-radius:12px;padding:var(--sp-2) var(--sp-3);min-height:44px;background:var(--karte)}
.live.leer{color:var(--text);font-style:italic}
.transk{background:var(--karte);border:1px solid var(--linie);border-left:3px solid var(--blau);border-radius:10px;padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-2)}
.transk .k{font-size:var(--fs-meta);font-weight:700;color:var(--blau)}
.testein{margin-top:var(--sp-2);font-size:var(--fs-meta);color:var(--text)}
.warte{color:var(--text);font-style:italic}
.lern{border-left:0;padding-left:0}
.lern ul{margin:var(--sp-1) 0;padding-left:1.1em}.lern li{margin:var(--sp-1) 0}
.rm{font-weight:500}.hoer{display:inline-flex;align-items:center;justify-content:center;margin:0 0 0 6px;width:28px;height:24px;min-height:0;padding:0;font-size:13px;line-height:1;border:0;border-radius:6px;background:transparent;opacity:.7;color:var(--kobalt);cursor:pointer;vertical-align:middle}.hoer:focus-visible{outline:2px solid var(--blau)}
.rmg{margin:var(--sp-2) 0}.rmg .h{font-size:var(--fs-chip);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--kobalt)}
.rmg ul{margin:2px 0;padding-left:1.1em}
.regel{background:var(--blau-hell);border-radius:10px;padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0}
.regel b{color:var(--kobalt)}
.gram{background:#fff;border:1px solid var(--pat-rand);border-radius:6px;padding:0 5px;font-weight:700;color:var(--kobalt)}
.paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 10px;margin:var(--sp-2) 0}
.paar div{overflow-wrap:anywhere;padding:4px 8px;border-radius:8px;min-width:0}
.paar .p{background:var(--pat)}.paar .f{background:var(--doc-kopf)}
.kette4{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:var(--sp-2) 0}
@media (min-width:700px){.kette4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kette4>div{border-radius:10px;padding:var(--sp-2) var(--sp-3);min-width:0}
.k1{background:var(--pat);border:1px solid var(--pat-rand)}.k2{background:#fff;border:1px solid #F1C7C7}.k3{background:#fff;border:1px solid #C9D1E0}.k4{background:#F3F5FB;border:1px solid var(--kobalt)}
.kette4 textarea{margin-top:4px}
/* Anamnese-Fahrplan als Weg in fünf Abschnitten */
.fp{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);margin:var(--sp-2) 0}
@media (min-width:700px){.fp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fpp{border-top:1px solid var(--linie);padding:var(--sp-2) 0;min-width:0}
.fpp .h{font-size:var(--fs-chip);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blau);margin-bottom:2px}
.fpa{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;align-items:baseline;padding:3px 0;border-top:1px dashed var(--linie)}
.fpa:first-of-type{border-top:0}
.fpa .n{color:var(--text);font-size:var(--fs-meta);min-width:1.6em}
.fpa .t{flex:1 1 150px;min-width:0}.fpa.ok .t{color:var(--gruen);font-weight:600}
.fpsub{display:grid;gap:2px;margin:2px 0 6px 4px;padding-left:12px;border-left:2px solid var(--linie)}
.fpsub span{font-size:var(--fs-meta);color:var(--text)}
.fpsub span.ok{color:var(--gruen);font-weight:600}
details summary{cursor:pointer;font-size:var(--btn-s-fs);color:var(--kobalt);font-weight:600}
.item{margin:var(--sp-3) 0}
.item .q{margin:0 0 var(--sp-1)}
.item input{width:100%;font-size:var(--fs-input);border:1px solid var(--linie);border-radius:10px;padding:var(--sp-2) var(--sp-3);min-height:46px;background:#fff}
.opts{display:grid;gap:6px}
.opt{text-align:left;border:1px solid var(--linie);background:#fff;border-radius:10px;padding:var(--sp-2) var(--sp-3);cursor:pointer;font-size:var(--fs-body)}
.opt.richtig{border-color:var(--gruen-rand);background:var(--gruen-hell)}.opt.falsch{border-color:var(--rot-rand);background:var(--rot-hell)}
.ok{color:var(--gruen);font-weight:600}.hint{color:var(--text)}
.fb{border:1px solid var(--linie);border-radius:var(--radius-card);overflow:hidden;background:var(--karte);margin-top:var(--sp-3)}
.fb .st{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-meta);font-weight:700;border-bottom:1px solid var(--linie)}
.fb .st.ziel{color:var(--gruen);background:var(--gruen-hell)}.fb .st.bearb{color:var(--kobalt);background:var(--bg)}
.fb .kf{background:var(--rot-hell);border-bottom:1px solid var(--rot-rand);padding:var(--sp-2) var(--sp-4)}.fb .kf b{color:var(--rot)}
.fb .g{border-bottom:1px solid var(--linie);padding:var(--sp-2) var(--sp-4)}.fb .g b{color:var(--gruen)}
.fb .n{padding:var(--sp-2) var(--sp-4)}.fb .n b{color:var(--blau)}
.fb .ab{padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--linie)}.fb .ab b{color:var(--kobalt)}
.fb ul{margin:var(--sp-1) 0;padding-left:1.1em}.fb li{margin:var(--sp-1) 0}.fb q{font-style:italic}
.krit{display:flex;flex-wrap:wrap;gap:6px;padding:var(--sp-2) var(--sp-4) var(--sp-3)}
.krit span{font-size:var(--fs-meta);font-weight:600;border-radius:999px;padding:2px 10px;border:1px solid var(--linie)}
.krit .sicher{background:var(--gruen-hell);border-color:var(--gruen-rand);color:var(--gruen)}.krit .noch_nicht{background:var(--blau-hell);color:var(--kobalt)}.krit .nicht_beurteilbar{color:var(--text)}
.fb .modell{margin:0 var(--sp-4) var(--sp-3)}
.ausspr{padding:0 var(--sp-4) var(--sp-3);font-size:var(--fs-meta);color:var(--text)}
.vj{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);margin-top:var(--sp-3)}@media (min-width:640px){.vj{grid-template-columns:1fr 1fr}}
.vj div{border:1px solid var(--linie);border-radius:10px;padding:var(--sp-2) var(--sp-3);background:var(--karte);min-width:0;white-space:pre-wrap}.vj .j{border-color:var(--gruen-rand);background:var(--gruen-hell)}
.vgl{margin-top:var(--sp-2);font-weight:600;color:var(--gruen)}
textarea.feld,.doc textarea,.kette4 textarea{width:100%;font-size:var(--fs-input);line-height:1.45;border:1px solid var(--linie);border-radius:10px;padding:var(--sp-2) var(--sp-3);background:#fff;resize:none;overflow:hidden;min-height:52px}
.doc textarea{border-style:dashed;border-color:var(--pat-rand);min-height:46px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--blau-hell);border-color:var(--blau)}
select{border:1px solid var(--linie);border-radius:10px;padding:var(--sp-2);background:#fff;font-size:var(--fs-body);width:100%}
.doc{background:var(--karte);border:1px solid var(--linie);border-radius:6px;box-shadow:0 3px 12px rgba(20,42,110,.05);margin:var(--sp-3) 0}
.doc .dk{background:var(--doc-kopf);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.doc .dk b{font-family:"EB Garamond",serif;font-size:var(--fs-h2);color:var(--kobalt);font-weight:600}
.doc .db{padding:var(--sp-2) var(--sp-3)}.doc .k{font-size:var(--fs-meta);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.doc .sec{border-top:1px solid var(--linie);padding-top:var(--sp-2);margin-top:var(--sp-2)}
.doc .sec h4{margin:0;color:var(--kobalt);font-size:var(--fs-body);font-weight:600;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.doc .sec h4 small{font-size:var(--fs-meta);font-weight:500;color:var(--text)}
.verdeckt{background:repeating-linear-gradient(45deg,var(--doc-kopf),var(--doc-kopf) 8px,#fff 8px,#fff 16px);border-radius:6px;padding:1px 8px;font-style:italic;color:var(--text)}
video{width:100%;border-radius:10px;background:#000;display:block;max-height:420px}
.asset{border:1px solid #F2D58F;background:#FFF8E6;border-radius:10px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-meta);font-weight:700;color:var(--ink);margin:var(--sp-2) 0}
.tab{width:100%;border-collapse:collapse;font-size:var(--btn-s-fs);margin:var(--sp-2) 0}.tab td,.tab th{border-bottom:1px solid var(--linie);padding:4px 6px;text-align:left;vertical-align:top}.tab th{font-size:var(--fs-chip);text-transform:uppercase;letter-spacing:.05em;color:var(--kobalt)}
.tabw{overflow-x:auto}
.sheet{position:fixed;inset:auto 0 0 0;z-index:40;max-height:65vh;background:var(--karte);border-radius:16px 16px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);padding:var(--sp-3) 16px calc(var(--sp-4) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--sp-2)}
.sheet .sh{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.sheet .libin{overflow:auto;min-height:0}
@media (min-width:1100px){.sheet{inset:76px 16px auto auto;width:380px;max-height:calc(100vh - 96px);border-radius:14px}}
.paper{flex:1;min-height:30vh;width:100%;border:1px solid var(--note-linie);border-radius:6px;padding:2px 12px 2px 34px;background-color:#fff;line-height:30px;font-size:var(--fs-input);resize:none;
 background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,var(--note-linie) 29px,var(--note-linie) 30px),linear-gradient(to right,transparent 22px,var(--note-rand) 22px,var(--note-rand) 24px,transparent 24px)}
.pgr{margin:var(--sp-3) 0}.pgr h4{margin:0 0 var(--sp-1);font-size:var(--fs-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--kobalt)}
.prow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2);padding:6px 0;border-bottom:1px solid var(--linie)}
.prow .s{font-size:var(--fs-meta);font-weight:700;white-space:nowrap}.prow .sicher{color:var(--gruen)}.prow .noch_nicht{color:var(--kobalt)}.prow .nicht_beurteilbar{color:var(--text)}
.prot{font-size:var(--fs-meta);color:var(--text);margin-top:var(--sp-5)}.prot pre{white-space:pre-wrap;background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:var(--sp-2);max-height:260px;overflow:auto;font-size:12px}
.hinweis{background:#FFF8E6;border:1px solid #F2D58F;border-radius:10px;padding:var(--sp-2) var(--sp-3)}
/* Satzgerüst nutzen (wiederverwendbar, Fading über Stufen) */
.sg{margin:var(--sp-2) 0}.sg>summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--btn-t-h);padding:0 12px;border:1px solid var(--gruen-rand);border-radius:var(--radius-btn);font-size:var(--btn-t-fs);color:var(--gruen);font-weight:600;list-style:none;background:#fff}
.sg>summary::-webkit-details-marker{display:none}.sg[open]>summary{background:var(--gruen-hell)}
.sg .sgin{border-left:3px solid var(--gruen-rand);padding:var(--sp-1) var(--sp-3);margin-top:var(--sp-2)}
.sg .sgin .h,.libg .h{font-size:var(--fs-chip);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gruen)}
.sg ul{margin:2px 0 6px;padding-left:1.1em}.sg li{margin:2px 0}
.stich{display:flex;flex-wrap:wrap;gap:4px;margin:var(--sp-2) 0}.stich span{border:1px solid var(--pat-rand);background:var(--pat);border-radius:999px;padding:2px 10px;font-size:var(--fs-meta);font-weight:500;line-height:1.4}
.fokus{display:grid;gap:6px;margin:var(--sp-2) 0}
.libg{border-top:1px solid var(--linie);padding:var(--sp-2) 0}.libg>summary{font-size:var(--fs-body);font-weight:700;color:var(--kobalt)}

/* Extra-Training nach Kompetenzen */
.exg{border-top:1px solid var(--linie);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.exg>h4{margin:0 0 4px;font-size:var(--fs-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--kobalt)}
.item textarea.feld{margin-top:2px}
.hoer:hover{opacity:1;background:var(--blau-hell)}
.lern ul{margin:2px 0}.lern li{margin:2px 0}
details.baustein>summary{font-size:var(--fs-body);color:var(--kobalt);list-style:revert}
.fokus{margin-top:var(--sp-2)}
details.mehr{margin-top:var(--sp-2)}details.mehr>summary{font-size:var(--btn-t-fs);font-weight:600;color:var(--kobalt)}
.kette button.teil{border-color:var(--pat-rand);background:var(--pat)}
.kette button.warte{border-style:dashed;border-color:#E0B54A;background:#FFF8E6;color:var(--ink)}
label.opt{display:flex;gap:8px;align-items:flex-start}label.opt input{margin-top:5px}

/* ===== Lernübersicht (PDF-Komponente, druckoptimiert) ===== */
@page{size:A4;margin:13mm 14mm 15mm}
body.lue-body{background:#fff}
.lue{max-width:182mm;margin:0 auto;padding:6mm 0;font:9.4pt/1.38 "DM Sans",system-ui,sans-serif;color:var(--ink)}
.lue-kopf{display:flex;gap:10px;align-items:center;border-bottom:2px solid var(--kobalt);padding-bottom:6px;font-size:9pt;color:var(--kobalt)}
.lue-kopf img{width:26px;height:26px}.lue-kopf span{color:var(--text)}
.lue h1{font:600 21pt/1.1 "EB Garamond",Georgia,serif;color:var(--kobalt);margin:10px 0 2px}
.lue-zweck{color:var(--text);margin:0 0 6px}
.lue section{margin:11px 0 0}
.lue h2{font:600 13.5pt/1.2 "EB Garamond",Georgia,serif;color:var(--kobalt);margin:0 0 5px;padding-bottom:3px;border-bottom:1px solid var(--linie);break-after:avoid}
.lue h2 span{display:inline-block;min-width:16px;font:700 9.5pt "DM Sans",sans-serif;color:var(--blau)}
.lue h3{font:700 8.5pt "DM Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--blau);margin:8px 0 2px;break-after:avoid}
.lue table{width:100%;border-collapse:collapse;margin:2px 0 4px}
.lue th{font-size:7.5pt;text-transform:uppercase;letter-spacing:.05em;color:var(--kobalt);text-align:left;border-bottom:1.5px solid var(--kobalt);padding:2px 6px}
.lue td{border-bottom:1px solid var(--linie);padding:3px 6px;vertical-align:top}
.lue tr,.lue li,.lue .regel,.lue .muster,.lue .rm2>div{break-inside:avoid}
.lue td.pat{background:#F3F6FD}.lue td.fach{font-weight:600;color:var(--kobalt)}
.lue ul{margin:2px 0 4px;padding-left:15px}.lue li{margin:1px 0}
.lue .rm2{columns:2;column-gap:16px}.lue .rm2 h3{margin-top:4px}
.lue .regel{background:#F3F6FD;border-left:3px solid var(--blau);border-radius:0;padding:4px 8px;margin:3px 0}
.lue .regel ul{margin-bottom:0}
.lue .muster{border:1px solid var(--linie);border-left:3px solid var(--kobalt);padding:6px 9px;margin:4px 0}
.lue .check{list-style:none;padding-left:0}
.lue .hinw{color:var(--text)}
.lue b.neu{color:var(--blau);font-size:8pt;text-transform:uppercase}.lue b.wichtig{color:var(--gruen);font-size:8pt;text-transform:uppercase}
.lue .rm2.frei>div{break-inside:auto}

/* Phasen-Code (ruhig): Lernen hellblau · Üben grüner Akzent · Anwenden grüne Linie */
.teil.ph-lern,.teil.ph-ueb,.teil.ph-anw{border-top:0;padding:10px 12px;margin-top:12px}
.teil.ph-lern{background:#F6F9FE;border-left:3px solid #C9D7FB}.teil.ph-lern>.tk{color:var(--blau)}
.teil.ph-ueb{border-left:3px solid var(--gruen-rand)}.teil.ph-ueb>.tk{color:var(--gruen)}
.teil.ph-anw{border-left:3px solid var(--gruen)}.teil.ph-anw>.tk{color:var(--gruen-h)}
/* kompakte Auswahlliste */
.mlist{border-top:1px solid var(--linie);margin:4px 0}
.mlist label{display:flex;gap:10px;align-items:flex-start;padding:10px 6px;border-bottom:1px solid var(--linie);cursor:pointer;min-height:44px}
.mlist input{width:22px;height:22px;flex:0 0 22px;margin:1px 0 0;accent-color:var(--gruen)}
.mlist label:has(input:checked){background:var(--gruen-hell)}
.mfb{list-style:none;padding:0;margin:8px 0 0}.mfb li{margin:6px 0}
/* Lücke im Satz: Vorlage = Text, Eingabe = Feld */
.lueckensatz{line-height:2.2;margin:4px 0}
.item input.luecke{display:inline-block;width:9em;max-width:62%;min-height:0;padding:1px 6px;margin:0 3px;border:0;border-bottom:2px solid var(--gruen);border-radius:4px 4px 0 0;background:var(--gruen-hell);font:inherit}
/* Lernstand */
.lstand ul{list-style:none;padding:0;margin:4px 0 10px}.lstand li{margin:6px 0}.lstand .ue{color:var(--kobalt);font-weight:700}.lstand h3{margin-top:4px}

/* ===== Student View 5.10.2026: weniger Schriftgrößen, Überschrift nie kleiner als der Text darunter ===== */
/* Abschnittsüberschriften (Lernen · …, Üben, Anwenden · …) in Textgröße, fett, ohne Versalien */
.tk{font-size:var(--fs-body);letter-spacing:0;text-transform:none;font-weight:700}
.rmg .h,.sg .sgin .h,.libg .h,.fpp .h{font-size:var(--fs-body);letter-spacing:0;text-transform:none;font-weight:700}
.rm{font-weight:400}
.stich span{font-size:var(--fs-body);font-weight:400}
.fb .st{font-size:var(--fs-body)}
.lern>.meta,.lern>p.meta{font-size:var(--fs-meta)}
/* Situationszeile: wo, mit wem */
.sit{margin:0 0 var(--sp-1);font-size:var(--fs-body);font-weight:600;color:var(--blau)} /* gleich groß wie der Text darunter (Ana 5.10.2026) */
.heute{background:var(--blau-hell);border-radius:10px;padding:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0 var(--sp-2)}
.heute b{color:var(--kobalt)}
/* Aufgabe = was Sie jetzt tun */
.aufgabe{font-weight:700;margin:0 0 var(--sp-2)}
/* Hilfe nur auf Wunsch, nie im Antwortfeld */
.sa{margin:4px 0}.sa>summary{font-size:var(--btn-t-fs);font-weight:600;color:var(--gruen)}
.sa p{margin:4px 0;padding-left:var(--sp-2);border-left:3px solid var(--gruen-rand)}
.doc .sec h4{font-size:var(--fs-body)}
.fhint{margin:2px 0 4px;font-size:var(--fs-meta);color:var(--text)}
.grundlage{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin:0 0 var(--sp-2)}
.fbakt{margin:var(--sp-1) 0 0;font-weight:600}
.item input.luecke.lang{display:block;width:100%;max-width:100%;margin:6px 0 0;padding:6px 8px}
/* 5.10.2026: Kern vs. Sprachtipp im Befundgespräch */
.chip.kern{background:var(--kobalt);color:#fff}
.schritte{margin:4px 0;padding-left:1.4em}.schritte li{margin:2px 0;font-weight:600}
details.tipp{margin:var(--sp-2) 0;border:1px dashed var(--linie);border-radius:10px;padding:var(--sp-1) var(--sp-3)}
details.tipp>summary{font-size:var(--btn-t-fs);font-weight:600;color:var(--text)}
.chip.tipp{background:var(--bg);color:var(--text);border:1px dashed var(--linie)}
/* Wörter in schmalen Spalten nicht mitten im Wort umbrechen */
.paar div{overflow-wrap:break-word;word-break:normal;hyphens:manual} /* Fachwörter nie trennen: Lernende sollen das ganze Wort sehen */
/* Handy: Wortpaare untereinander statt zwei schmaler Spalten (ganze Wörter, keine Trennung) */
@media (max-width:480px){
 .paar{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center}
 .paar>.lbl{flex:0 0 auto;margin-bottom:4px!important}
 .paar>.p,.paar>.f{flex:0 0 100%}
 .paar>:nth-child(odd):not(.lbl){border-radius:8px 8px 0 0;margin-top:10px;font-weight:600}
 .paar>:nth-child(even):not(.lbl){border-radius:0 0 8px 8px}
}
.fvteile{margin:4px 0 8px;padding-left:1.4em}.fvteile li{margin:6px 0}
/* Kästchen: auf Höhe der ersten Textzeile (die allgemeine Eingabefeld-Regel machte sie 46 px hoch) */
.item .mlist input[type=checkbox]{min-height:0;height:22px;padding:0;margin:2px 0 0;border:0}
.notizhinweis{background:#FFF8E6;border:1px solid #F2D58F;border-radius:10px;padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0}
.notizhinweis p{margin:0 0 6px}
/* Lernübersicht-PDF: grüner Hauptknopf, ohne Unterstreichung */
a.btn.lue-pdf{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;background:var(--gruen);border-color:var(--gruen);max-width:100%;text-align:center}
a.btn.lue-pdf:hover{background:var(--gruen-h)}

/* Ana 9.10.2026: Ort-Etikett nie trennen, Foto füllt die Karte */
#main .szene .ort{-webkit-hyphens:manual!important;hyphens:manual!important;white-space:nowrap!important}
.szene.kompakt .ort{display:none}
/* Ana 9.10.2026: Szenenfoto ganz zeigen, Namensschild unter dem Bild statt darauf */
#main .szbild{aspect-ratio:auto!important;max-height:none!important;height:auto!important;background:transparent!important}
#main .szbild img{aspect-ratio:auto;height:auto!important;object-fit:cover} /* Handy-QA 10.10.2026: Breitbild-Szenen (2,5:1) ganz zeigen, nicht auf 16:9 beschneiden */
#main .szbild .szname{position:static!important;display:inline-block;margin:10px 0 2px;transform:none!important}
/* Handy-QA 10.10.2026: keine automatische Silbentrennung im Lerntext (etappen.js setzt hyphens:auto auf #main *).
   Wörter bleiben ganz und brechen nur zwischen Wörtern um; zu lange Wörter ohne Bindestrich als Notbehelf. */
#main,#main *{-webkit-hyphens:manual!important;hyphens:manual!important}
/* Handy-QA 10.10.2026: Lernübersicht am Handy (Bildschirm, nicht Druck): lesbare Schrift, ganze Wörter,
   Tabellen als Zeilenkarten untereinander (Patient/Fach-Paare und 3-Spalten-Tabellen), nichts ragt seitlich heraus */
@media screen and (max-width:600px){
 .lue{font-size:15px;padding:12px 16px 24px;max-width:100%;box-sizing:border-box}
 .lue th{font-size:12px}
 .lue td,.lue th{-webkit-hyphens:manual!important;hyphens:manual!important;overflow-wrap:break-word!important;word-break:normal!important}
 .lue .rm2{columns:1}
 .lue table,.lue table tbody,.lue table tr,.lue table td{display:block;width:100%;box-sizing:border-box}
 .lue table tr:has(>th){display:none}
 .lue table tr{border-bottom:1px solid var(--linie);padding:6px 0}
 .lue table td{border-bottom:0;padding:1px 0}
 .lue table td:first-child:not(.pat){font-weight:600;color:var(--kobalt)}
 .lue table td.pat{padding:3px 8px;border-radius:6px;margin-bottom:2px}
}
/* Handy-QA 10.10.2026: schmale Handys – Kopfzeile etwas dichter, damit der Lektionsname („Fachterminologie“, „Kommunikation“) ganz in eine Zeile passt */
@media (max-width:400px){
 .toprow{gap:6px}.toprow .tb{gap:4px}.brand{gap:6px}.brand img{width:28px;height:28px;flex-basis:28px}
 .toprow .tb .ter{min-width:44px;padding-left:8px;padding-right:8px}
}

/* ===== Ruhige Aufgabenkarten (Ana, 10.10.2026, nur Darstellung, Testsystem) =====
   Jede Aufgabe eine weiße Karte mit weichem Rand und mehr Luft; der Arbeitssatz als Zitat mit feiner Linie;
   Rückmeldung in eigenem Kasten, Modell als weiße Karte; größere Antwortfelder; Kopf: Art klein · Titel · Aufgabe.
   Ergänzt den Block „Aktivitäten klar unterscheiden“ (engine.js, Klassen .fk/.fk-i-*), ersetzt ihn nicht.
   Zitat- und Kopf-Teilung setzt engine.js (Block „Ruhige Aufgabenkarten“) als .kd-zitat/.kd-zwer/.kd-art/.kd-tt. */
#main .teil.ph-ueb,#main .teil.ph-anw{background:var(--bg);border-radius:12px}
#main .item.fk{border-radius:16px;border:1px solid var(--linie);border-left-width:4px;padding:var(--sp-4);margin:var(--sp-4) 0;box-shadow:0 1px 3px rgba(20,42,110,.05)}
#main .item.fk.fk-i-jetzt{border-color:var(--gruen-rand);border-left-color:var(--gruen);box-shadow:0 4px 14px rgba(5,150,105,.10)}
#main .item.fk>.q{margin-bottom:var(--sp-3)}
#main .item.fk>.q br+b:last-child{color:var(--kobalt);font-weight:600}
/* Kopf: Art der Übung klein, darunter der Titel */
#main .tk .kd-art{flex:0 0 100%;font-size:var(--fs-chip);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
#main .tk .kd-tt{color:var(--kobalt);font-size:var(--fs-body);font-weight:700;line-height:1.35}
/* Arbeitssatz als Zitat (Patient, Oberarzt oder Fachsprache) */
#main .q .kd-zitat{display:block;border-left:3px solid var(--blau);padding:2px 0 2px var(--sp-3);margin:0 0 var(--sp-2);font-size:var(--fs-rede);line-height:1.45;color:var(--ink)}
#main .q .kd-zitat+br{display:none}
#main .q .kd-zwer{display:block;font-size:var(--fs-meta);font-weight:600;color:var(--kobalt);margin-bottom:2px}
/* Rückmeldung im eigenen Kasten, Modell als weiße Karte in Lesegröße */
#main .item.fk [id^='r_']:not(:empty){border-radius:14px;padding:var(--sp-3) var(--sp-4)}
#main .item.fk [id^='r_'] p.meta{font-size:var(--fs-body);color:var(--ink);border:1px solid var(--linie);border-radius:12px;padding:var(--sp-3);margin:var(--sp-3) 0 0}
#main .item.fk [id^='r_'].fk-gut p.meta{border-color:var(--gruen-rand)}
/* Antwortfelder breiter und bequemer */
#main .item textarea.feld,#main .item input:not([type=checkbox]):not([type=radio]):not(.luecke):not(.testin){border:1px solid #D5DDEA;border-radius:14px;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-input);background:#fff}
#main .item textarea.feld{min-height:104px;line-height:1.5}
#main .item input:not([type=checkbox]):not([type=radio]):not(.luecke):not(.testin){min-height:52px}
#main .item textarea.feld:focus,#main .item input:focus{border-color:var(--blau);outline:3px solid var(--blau-hell)}
/* Handy: weniger Einzug, damit die Karte die Breite nutzt */
@media (max-width:480px){
 #main .teil.ph-lern,#main .teil.ph-ueb,#main .teil.ph-anw{padding:10px 8px}
 #main .item.fk{padding:var(--sp-3) 14px 14px}
}
/* Ana 10.10.2026: mehrere Aufgaben in einem Block klar trennen */
#main .teil .item:not(.fk)+.item:not(.fk){margin-top:28px;padding-top:22px;border-top:1px solid var(--linie)}
#main .teil .item:not(.fk)>p.q{font-weight:600;color:var(--ink)}