/* =====================================================================
   Lernen lernen · gemeinsamer Kit (Stil) · werkstatt.schule
   Abgeleitet vom 20-Minuten-Muster der Reihe „Stoffe" (Diffusion).
   Farbwelt: Violett #6a4fb3 (Hauptfarbe) · Orange #f08a24 · Mint #2fa37a
             Papier #fbf8f1 · Tinte #2b2a28
   Lern-Ebenen: Beobachten = Orange · Im Kopf = Violett · Mein Werkzeug = Mint
   ===================================================================== */
:root{
  --paper:#fbf8f1; --paper2:#fffdf8; --ink:#2b2a28; --ink2:#5b5750; --line:#d9d2c3;
  --main:#6a4fb3; --main-d:#4f3790; --main-l:#ece6f8;
  --or:#f08a24; --or-d:#b85f0b; --or-l:#fde9d3;
  --mint:#2fa37a; --mint-d:#1d7556; --mint-l:#d8f1e6;
  --ok:#2f9a55; --ok-l:#dcf1dc; --bad:#cf3b3b; --bad-l:#fbdcdc;
  --hl:#ffe27a; --hl-l:#fff4c2; --help:#e7f3ff; --help-b:#6fa6d6;
  --imm:#2f6fb3; --imm-l:#d8e8f8;
  --p0:#f08a24; --p0-l:#fde9d3; --p1:#6a4fb3; --p1-l:#ece6f8; --p2:#2fa37a; --p2-l:#d8f1e6; --p3:#d9a521; --p3-l:#fdf1cf;
  --r:255px 14px 225px 14px/14px 225px 14px 255px;
  --r2:14px 225px 14px 255px/255px 14px 225px 14px;
  --hand:"Patrick Hand","Comic Sans MS","Segoe Print",cursive;
  --head:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --body:var(--hand);
  font-size:18px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--hand);line-height:1.35;
  background-image:radial-gradient(#e6dfcf 1px,transparent 1.2px);background-size:22px 22px;overflow:hidden}
button{font-family:inherit;font-size:1rem;color:inherit;cursor:pointer}
sub,sup{font-size:.7em;line-height:0}
.hl{background:linear-gradient(transparent 55%,var(--hl) 55%,var(--hl) 90%,transparent 90%);padding:0 2px}
h1,h2,h3{font-family:var(--head);font-weight:700;margin:.1em 0 .3em;line-height:1.05}
h2{font-size:2rem} h3{font-size:1.5rem}
.small{font-size:.9rem}
.muted{color:var(--ink2)}
a.tbtn{text-decoration:none;color:inherit}

/* ---------- Kopf ---------- */
header{height:56px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:2.5px solid var(--ink);background:var(--paper2);position:relative;z-index:5}
.back{font-size:.85rem;color:var(--ink2);text-decoration:none;border:1.5px dashed var(--ink2);border-radius:var(--r);padding:2px 8px;white-space:nowrap}
.back:hover{background:var(--main-l)}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand>svg,.hdrico{width:40px;height:40px;flex-shrink:0}
.hdrico{border-radius:10px;border:2px solid var(--ink);object-fit:cover}
.brand b{font-family:var(--head);font-size:1.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.brand small{display:block;font-size:.78rem;color:var(--ink2);line-height:1;margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand>div{min-width:0}
.hspace{flex:1}
.tools{display:flex;gap:6px;flex-shrink:0}
.tbtn{border:2px solid var(--ink);background:#fff;border-radius:var(--r2);padding:4px 9px;display:flex;align-items:center;gap:5px;font-size:.92rem}
.tbtn:hover{background:var(--hl-l)} .tbtn.on{background:var(--hl)}
.tbtn svg{width:20px;height:20px}

/* ---------- Phasenleiste ---------- */
.phasebar{height:52px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;background:var(--paper2);border-bottom:2px dashed var(--line)}
.ph{display:flex;align-items:center;gap:7px;border:2.5px solid var(--ink);background:#fff;border-radius:var(--r);padding:3px 12px 3px 5px;white-space:nowrap;position:relative;transition:transform .15s;text-align:left}
.ph:hover{transform:rotate(-1deg) scale(1.03)}
.ph .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ink);background:#fff;flex-shrink:0}
.ph .ic svg{width:22px;height:22px}
.ph .nm{font-family:var(--head);font-size:1.35rem;font-weight:700;line-height:1;display:block}
.ph .tm{font-size:.78rem;color:var(--ink2);display:block;line-height:1}
.ph.p0 .ic{background:var(--p0-l)} .ph.p1 .ic{background:var(--p1-l)} .ph.p2 .ic{background:var(--p2-l)} .ph.p3 .ic{background:var(--p3-l)}
.ph.on{box-shadow:2px 3px 0 var(--ink)}
.ph.on.p0{background:var(--p0-l)} .ph.on.p1{background:var(--p1-l)} .ph.on.p2{background:var(--p2-l)} .ph.on.p3{background:var(--p3-l)}
.ph.done::after{content:"✓";position:absolute;top:-9px;right:-6px;background:var(--ok);color:#fff;border-radius:50%;width:18px;height:18px;font-size:12px;display:grid;place-items:center}
.arrow{font-family:var(--head);font-size:1.5rem;color:var(--ink2)}
.prog{height:6px;background:#ece5d6;border-bottom:1.5px solid var(--ink)}
.prog i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--main),var(--main) 8px,var(--or) 8px,var(--or) 16px);transition:width .6s}

/* ---------- Hauptbereich ---------- */
main{height:calc(100% - 56px - 52px - 6px - 50px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:12px 16px 6px}
.pane{min-width:0;background:var(--paper2);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:4px 5px 0 rgba(43,42,40,.85);display:flex;flex-direction:column;min-height:0;position:relative}
.pane.right{border-radius:var(--r2)}
.phead{display:flex;align-items:center;gap:10px;padding:7px 14px 4px;border-bottom:2px dashed var(--line);min-height:46px}
.tag{font-family:var(--head);font-size:1.3rem;font-weight:700;padding:0 10px;border-radius:6px;transform:rotate(-2deg);display:inline-block;white-space:nowrap}
.tag.t{background:var(--main-l);border:2px solid var(--main)} .tag.u{background:var(--or-l);border:2px solid var(--or)}
.phead .ttl{font-family:var(--head);font-size:1.45rem;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbody{flex:1;overflow:auto;padding:10px 18px;min-height:0}
.pfoot{display:flex;align-items:center;justify-content:center;gap:10px;padding:5px 10px 7px;border-top:2px dashed var(--line)}
#paneR .pfoot{display:none}
.dots{display:flex;gap:6px}
.dots b{width:12px;height:12px;border:2px solid var(--ink);border-radius:50%}
.dots b.on{background:var(--main)}
.tabs{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.tabs button{border:2px solid var(--ink);background:#fff;border-radius:var(--r2);padding:1px 9px;font-size:.9rem;cursor:default;pointer-events:none}
.tabs button:not(.on){opacity:.55}
.tabs button.on{background:var(--or-l);box-shadow:2px 2px 0 var(--ink);opacity:1}
.tabs button.ok{border-color:var(--ok);color:var(--ok)}
.tabs button.ok::after{content:" ✓"}
footer{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 6px;gap:10px}
footer .fbtn{border:2.5px solid var(--ink);background:#fff;border-radius:var(--r);padding:5px 16px;font-size:1.02rem;box-shadow:2px 3px 0 var(--ink);white-space:nowrap}
footer .fbtn.next{background:var(--hl)}
footer .fbtn:disabled{opacity:.35;cursor:default}
footer .where{font-size:.92rem;color:var(--ink2);text-align:center}
.switch{display:none;gap:6px}
.switch button{border:2px solid var(--ink);background:#fff;border-radius:var(--r);padding:2px 12px}
.switch button.on{background:var(--hl)}
.easy-badge{display:none;font-size:.8rem;background:var(--ok-l);border:1.5px solid var(--ok);border-radius:10px;padding:0 8px;white-space:nowrap}
body.easy .easy-badge{display:inline-block}
body.single main{grid-template-columns:minmax(0,1fr)}
body.single .switch{display:flex}
body.single .pane.hidden{display:none}
@media (max-width:1050px){ .ph .tm{display:none} .arrow{display:none} }
@media (max-width:900px){
  :root{font-size:16.5px}
  .brand b,.back,.brand small{display:none}
  .tbtn span{display:none}
  .ph{padding:2px 6px 2px 3px} .ph .nm{font-size:1.05rem} .ph .ic{width:26px;height:26px}
  .phasebar{justify-content:flex-start;overflow-x:auto;gap:5px;padding:0 6px}
  main{padding:8px 8px 4px;gap:10px}
  footer{padding:0 8px 6px} footer .where{display:none}
  .phead{flex-wrap:wrap;padding:6px 10px 4px}
  .tabs{flex:1 1 100%;order:3}
  .switch{margin-left:auto}
  .pbody{padding:8px 10px}
}
@media (max-width:420px){ .tools{gap:3px} .tbtn{padding:3px 5px} .ph .ic{display:none} .ph{padding:2px 7px} }
body.beamer{font-size:23px}
:root:has(body.beamer){font-size:23px}

/* ---------- Bausteine Theorie ---------- */
.lead{font-size:1.06rem;margin:.2em 0 .5em}
.def{border:2.5px solid var(--ink);border-radius:var(--r2);padding:14px 14px 7px;margin:14px 0 8px;position:relative;background:#fff}
.def .lab{position:absolute;top:-14px;left:12px;background:var(--paper2);font-family:var(--head);font-weight:700;font-size:1.2rem;padding:0 8px;border:2px solid currentColor;border-radius:6px;transform:rotate(-2deg);line-height:1.2}
.def.v{border-color:var(--main);background:var(--main-l)} .def.v .lab{color:var(--main)}
.def.o{border-color:var(--or);background:var(--or-l)} .def.o .lab{color:var(--or-d)}
.def.m{border-color:var(--mint);background:var(--mint-l)} .def.m .lab{color:var(--mint-d)}
.merke{background:var(--hl-l);border:2px solid #d8b93a;border-radius:4px 4px 18px 4px;padding:6px 12px;margin:8px 4px;transform:rotate(-.6deg);box-shadow:3px 3px 0 rgba(0,0,0,.12)}
.merke::before{content:"Merke: ";font-family:var(--head);font-size:1.3rem;font-weight:700}
.warum{display:flex;gap:10px;align-items:center;border:2.5px solid var(--main);background:linear-gradient(90deg,var(--main-l),#fff);border-radius:var(--r);padding:5px 12px;margin:2px 0 8px;font-size:.98rem;line-height:1.25}
.warum b.t{font-family:var(--head);font-size:1.3rem;color:var(--main-d);white-space:nowrap;line-height:1}
.warum .ic{font-size:1.5rem}
.fall{border:2.5px solid #d8a31c;background:#fff6dc;border-radius:var(--r2);padding:6px 12px 6px 48px;margin:8px 2px;position:relative;transform:rotate(-.3deg)}
.fall::before{content:"🎒";position:absolute;left:12px;top:7px;font-size:1.5rem}
.fall b.t{font-family:var(--head);font-size:1.3rem;color:#a26f00;display:block;line-height:1}
.stolper{border:2.5px dashed var(--bad);border-radius:var(--r);padding:6px 12px 6px 52px;margin:8px 2px;background:#fff7f6;position:relative;transform:rotate(.4deg)}
.stolper::before{content:"";position:absolute;left:10px;top:9px;width:32px;height:29px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 31'%3E%3Cpath d='M17 2 L32 29 L2 29 Z' fill='%23ffe27a' stroke='%232b2a28' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M17 11 V20' stroke='%232b2a28' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='17' cy='24.5' r='1.8' fill='%232b2a28'/%3E%3C/svg%3E") no-repeat}
.stolper b.t{font-family:var(--head);font-size:1.3rem;color:var(--bad);display:block;line-height:1}
.stolper .no{text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:2px;color:var(--ink2)}
.stolper .yes{color:var(--ok);font-weight:bold}
.profi{border:2.5px solid var(--main);background:var(--main-l);border-radius:var(--r);padding:6px 12px;margin:8px 2px}
.profi b.t{font-family:var(--head);font-size:1.3rem;color:var(--main)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:600px){.two,.three{grid-template-columns:1fr}}
.card{border:2px solid var(--ink);border-radius:var(--r);padding:7px 12px;background:#fff}
.mini{border:2.5px solid var(--ink);border-radius:var(--r);padding:5px 9px;font-size:.92rem;line-height:1.22;background:#fff}
.mini b.h{font-family:var(--head);font-size:1.3rem;display:block;line-height:1.05;overflow-wrap:anywhere;hyphens:auto}
.mini.o{background:var(--or-l)} .mini.v{background:var(--main-l)} .mini.m{background:var(--mint-l)} .mini.y{background:var(--hl-l)}
table.sk{border-collapse:separate;border-spacing:0;width:100%;margin:6px 0;font-size:.98rem}
table.sk th{font-family:var(--head);font-size:1.2rem;text-align:left;border-bottom:2.5px solid var(--ink);padding:2px 6px}
table.sk td{border-bottom:1.5px dashed var(--line);padding:3px 6px;vertical-align:middle}
.fw{border-bottom:2px dotted var(--imm);cursor:help;color:#1d4f86}
.fw:hover{background:var(--imm-l)}
.figimg{width:100%;height:auto;aspect-ratio:3/2;max-height:46vh;border:2.5px solid var(--ink);border-radius:var(--r2);display:block;object-fit:contain;background:#f3ecdc}
.figw{border:2.5px solid var(--ink);border-radius:var(--r2);background:#fff;padding:4px}
.figw svg{display:block;width:100%;height:auto;max-height:34vh;margin:0 auto}
.chartw{border:2.5px solid var(--ink);border-radius:var(--r2);background:#fff;padding:4px 6px}
.chartw svg{display:block;width:100%;height:auto;max-height:27vh;margin:0 auto}
.srcnote{font-size:.78rem;color:var(--ink2);text-align:center;margin-top:2px}
.leit{font-family:var(--head);font-size:1.6rem;font-weight:700;line-height:1.05;border-left:6px solid var(--or);padding:2px 0 2px 12px;margin:8px 0}
.bigstart{display:block;margin:10px auto 0;border:3px solid var(--ink);background:var(--hl);border-radius:var(--r);padding:8px 26px;font-size:1.25rem;box-shadow:3px 4px 0 var(--ink)}
.bigstart:hover{transform:rotate(-1deg) scale(1.03)}
.op{border:none;border-bottom:2.5px dotted var(--imm);background:var(--imm-l);border-radius:4px;padding:0 5px;font-weight:bold;color:var(--imm);cursor:help}
.minitab{border-collapse:collapse;font-size:.92rem;margin:4px auto}
.minitab th,.minitab td{border:1.6px solid var(--ink);padding:1px 9px;text-align:center}
.minitab th{background:#f4efe4}
.mtab{border-collapse:collapse;margin:6px auto;font-size:1rem}
.mtab th,.mtab td{border:2px solid var(--ink);padding:3px 12px;text-align:center}
.mtab th{background:#f4efe4}
svg text{font-family:var(--hand)}

/* ---------- Lern-Ebenen (statt Johnstone) ---------- */
.le{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--ink);border-radius:999px;padding:0 9px 0 4px;font-size:.82rem;font-weight:700;vertical-align:middle;background:#fff;white-space:nowrap;line-height:1.5}
.le i{font-style:normal;font-size:.95rem}
.le.le-b{background:var(--or-l);color:var(--or-d);border-color:var(--or)}
.le.le-k{background:var(--main-l);color:var(--main-d);border-color:var(--main)}
.le.le-w{background:var(--mint-l);color:var(--mint-d);border-color:var(--mint)}
.leweg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.leweg .ar{font-size:1.1rem;color:var(--ink2)}
.leweg .le.off{opacity:.35;filter:grayscale(.6)}

/* ---------- Schritt-Animation ---------- */
.llanim{border:2.5px solid var(--ink);border-radius:var(--r2);background:#fff;padding:4px 6px 4px;margin:4px 0}
.llanim canvas{display:block;width:auto;height:auto;max-width:100%;max-height:34vh;margin:0 auto}
.legend2{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:.84rem;color:var(--ink2);margin:1px 0 0;line-height:1.2}
.legend2 i{display:inline-block;width:13px;height:13px;border-radius:50%;border:1.6px solid;vertical-align:-2px;margin-right:4px}
.stepcap{display:flex;gap:10px;align-items:center;background:var(--main-l);border:2.5px solid var(--main);border-radius:var(--r);padding:6px 12px;margin:6px 0 4px;min-height:4.4em}
.stepcap .sn{font-family:var(--head);font-size:1.7rem;font-weight:700;line-height:1;flex-shrink:0;text-align:center;color:var(--main-d);min-width:40px}
.stepcap .sn small{display:block;font-family:var(--hand);font-size:.72rem;font-weight:400;color:var(--ink2)}
.stepcap .tx{font-size:1.08rem;line-height:1.28}
.ctl2{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;padding-top:2px}
.ctl2 button{border:2px solid var(--ink);background:#fff;border-radius:var(--r);padding:1px 11px;font-size:.92rem}
.ctl2 button.go{background:var(--hl);min-width:118px}
.ctl2 button.on{background:var(--ok-l);border-color:var(--ok)}
.ctl2 button:disabled{opacity:.35;cursor:default}
.ctl2 .stp{font-weight:700;min-width:44px}
.stepdots{display:flex;gap:5px;justify-content:center;margin:0 4px}
.stepdots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:#fff;transition:background .3s;cursor:pointer}
.stepdots i.on{background:var(--or)} .stepdots i.done{background:#f7c99a}
.hilfebtn{border:2px dashed var(--ink)!important;background:#fff;border-radius:var(--r2);padding:1px 10px;font-size:.9rem}
.hilfebtn:hover{background:var(--hl-l)}

/* ---------- Übungen ---------- */
.ex h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:0;margin-bottom:4px}
.lvl{font-family:var(--hand);font-size:.85rem;border:2px solid var(--ink);border-radius:20px;padding:0 9px;white-space:nowrap;line-height:1.4}
.lvl.l1{background:var(--ok-l)} .lvl.l2{background:var(--hl-l)} .lvl.l3{background:var(--main-l)}
.opts{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0}
.opt{border:2px solid var(--ink);background:#fff;border-radius:var(--r);padding:2px 11px;font-size:.96rem;transition:transform .12s;text-align:left;line-height:1.25}
.opt:hover{transform:rotate(-1deg) scale(1.03);background:var(--hl-l)}
.opt.sel{background:var(--hl)}
.opt.right{background:var(--ok-l);border-color:var(--ok)}
.opt.wrong{background:var(--bad-l);border-color:var(--bad);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.fb{font-size:.94rem;margin:2px 0 4px;line-height:1.25}
.fb:empty{margin:0}
.fb.good{color:var(--ok)} .fb.bad{color:var(--bad)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px;align-items:center}
.b{border:2.5px solid var(--ink);background:#fff;border-radius:var(--r);padding:2px 13px;box-shadow:2px 2px 0 var(--ink);text-decoration:none;color:inherit;display:inline-block}
.b.check{background:var(--ok-l)} .b.tip{background:var(--help)} .b.sol{background:var(--main-l)} .b.go{background:var(--hl)}
.b:disabled{opacity:.45;cursor:default;box-shadow:none}
.tipbox{background:var(--help);border:2px solid var(--help-b);border-radius:var(--r2);padding:4px 12px;margin:5px 0;font-size:.95rem}
.tipbox::before{content:"Tipp " attr(data-n) ": ";font-family:var(--head);font-weight:700;font-size:1.2rem;color:var(--imm)}
.solbox{background:var(--main-l);border:2px solid var(--main);border-radius:var(--r);padding:6px 12px;margin:6px 0;font-size:.96rem}
.solbox::before{content:"Musterlösung";display:block;font-family:var(--head);font-weight:700;font-size:1.2rem;color:var(--main)}
.step{border:2px solid var(--ink);border-radius:var(--r2);padding:3px 10px;margin:5px 0;background:#fff;transition:opacity .4s}
.step.lock{display:none}
.step.solved .opt:not(.right){display:none} .step.solved .opts{display:inline-flex;margin:0 0 0 4px;vertical-align:middle} .step.solved .opt.right{padding:0 8px;font-size:.86rem}
.step.solved.mini-done .fb{display:none} .step.solved{background:#f7fbf5;border-color:#9ccfa8}
.grp.done .opt:not(.right){display:none}
.step b.n{font-family:var(--head);font-size:1.25rem}
.step .opt{font-size:.9rem;padding:1px 9px}
.donebadge{display:inline-block;background:var(--ok);color:#fff;border-radius:14px;padding:0 10px;font-size:.9rem;transform:rotate(-3deg)}
.row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:3px 0;border-bottom:1.5px dashed var(--line)}
.row .it{flex:1 1 200px;min-width:0;font-size:.96rem;line-height:1.2}
.row .grp{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.row .opt{padding:0 8px;font-size:.86rem}
.row .why{flex:1 1 100%;font-size:.84rem;line-height:1.15}
.row .why:empty{display:none}
.labsteps{display:flex;gap:5px;align-items:center;font-size:.85rem;margin:3px 0 0;flex-wrap:wrap}
.labsteps span{border:1.5px solid var(--ink2);border-radius:999px;padding:0 8px;color:var(--ink2)}
.labsteps span.on{background:var(--hl);color:var(--ink);border-color:var(--ink);font-weight:700}
.labsteps span.ok{background:var(--ok-l);border-color:var(--ok);color:var(--ok)}
.labq{border:2px solid var(--ink);border-radius:var(--r2);background:#fff;padding:4px 10px;margin:4px 0}
.labq .opts{gap:4px}.labq .opt{font-size:.88rem;padding:1px 9px}
.labbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;padding:4px 2px 0}
.labbar button{border:2px solid var(--ink);background:#fff;border-radius:var(--r);padding:1px 10px;font-size:.92rem}
.labbar button.go{background:var(--hl)} .labbar button.on{background:var(--ok-l);border-color:var(--ok)}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden}
.seg button{border:none!important;border-radius:0!important;padding:1px 10px;background:#fff}
.seg button+button{border-left:2px solid var(--ink)!important}
.seg button.on{background:var(--main-l)}
.score{display:inline-block;font-family:var(--head);font-size:1.4rem;font-weight:700;border:2.5px solid var(--ink);border-radius:var(--r);padding:0 12px;background:var(--hl-l);line-height:1.2}
.pool{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.pool .opt.used{visibility:hidden}
.seqbox{display:flex;flex-wrap:wrap;gap:4px;min-height:36px;border:2px dashed var(--ink2);border-radius:var(--r2);padding:4px 6px;background:#fffdf3;align-items:center}
.seqbox .chip{border:2px solid var(--ok);background:var(--ok-l);border-radius:999px;padding:0 9px;font-size:.9rem}
.seqbox .arr{color:var(--ink2)}

/* ---------- Impuls: Denken – Austauschen – Vorstellen ---------- */
#bodyL.full{display:flex;flex-direction:column;gap:8px;padding:8px 10px;overflow:hidden}
.impfull{position:relative;flex:1;min-height:0;border:2.5px solid var(--ink);border-radius:var(--r2);overflow:hidden;background:#f3ecdc;cursor:zoom-in}
.impfull img,.impfull .figimg{width:100%;height:100%;max-height:none;object-fit:contain;display:block;border:none;border-radius:0;aspect-ratio:auto}
.impbadge{position:absolute;left:10px;top:10px;display:flex;gap:6px;align-items:center;background:rgba(255,253,248,.93);border:2px solid var(--ink);border-radius:999px;padding:2px 12px 2px 3px;font-size:.95rem;font-weight:700}
.impbig{position:absolute;right:10px;bottom:10px;border:2.5px solid var(--ink);background:var(--hl);border-radius:var(--r);padding:4px 14px;font-size:1.05rem;box-shadow:2px 3px 0 var(--ink)}
.impcap{font-size:1rem;line-height:1.3;background:var(--or-l);border:2px solid var(--or);border-radius:var(--r2);padding:6px 12px;flex-shrink:0}
.impcap .ttl{font-family:var(--head);font-size:1.4rem;font-weight:700;display:block;line-height:1;color:var(--or-d)}
.davhead{display:flex;align-items:center;gap:10px;border-bottom:2px dashed var(--line);padding-bottom:6px;flex-wrap:wrap}
.davhead b{font-family:var(--head);font-size:1.7rem;line-height:1;display:block}.davhead small{color:var(--ink2);font-size:.85rem}
.davn{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;font-family:var(--head);font-size:1.6rem;font-weight:700;flex-shrink:0}
.davn.d1{background:var(--or-l)}.davn.d2{background:var(--main-l)}.davn.d3{background:var(--mint-l)}
.davsteps{margin-left:auto;display:flex;gap:4px;align-items:center;font-size:.8rem}.davsteps span{border:1.5px solid var(--ink2);border-radius:999px;padding:0 8px;color:var(--ink2)}.davsteps span.on{background:var(--hl);color:var(--ink);border-color:var(--ink);font-weight:700}.davsteps i{font-style:normal;color:var(--ink2)}
.obsgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.obsgrid .opt{text-align:left;font-size:.95rem;line-height:1.2;padding:6px 10px}
.tagb{display:inline-block;border-radius:999px;padding:0 7px;font-size:.72rem;margin-left:4px;vertical-align:1px}.tagb.s{background:var(--or-l);color:var(--or-d);border:1.5px solid var(--or)}.tagb.e{background:#eee;color:#555;border:1.5px solid #999}
.role{border:2.5px solid var(--ink);border-radius:var(--r);padding:6px 10px;background:#fff;position:relative}
.role .rl{font-family:var(--head);font-size:1.4rem;font-weight:700;line-height:1}
.role.ra{background:var(--or-l)} .role.rb{background:var(--main-l)} .role.rc{background:var(--mint-l)}
.sb{background:#fff;border:2px dashed var(--ink2);border-radius:10px;padding:3px 10px;margin:4px 0;font-size:.96rem}
.sb i{color:var(--ink2)}
.sb .gapw{display:inline-block;min-width:60px;border-bottom:2px solid var(--ink);margin:0 3px}
.speak{counter-reset:s;list-style:none;padding:0;margin:4px 0}
.speak li{counter-increment:s;position:relative;padding:3px 0 5px 44px;margin:3px 0;border-bottom:1.5px dashed var(--line)}
.speak li::before{content:counter(s);position:absolute;left:0;top:2px;width:32px;height:32px;border:2.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1.3rem;background:var(--mint-l)}
.speak li b{font-family:var(--head);font-size:1.25rem}
.abhint{display:flex;gap:8px;align-items:center;background:#fff;border:2px dashed var(--ink);border-radius:var(--r2);padding:5px 10px;margin:6px 0;font-size:.95rem}
.abhint b{font-family:var(--head);font-size:1.2rem}
.sfshow{border-left:6px solid var(--or);background:#fff;border-radius:0 var(--r2) var(--r2) 0;padding:4px 12px;margin:4px 0 8px;font-size:1.05rem}
.sfshow small{display:block;font-size:.75rem;color:var(--ink2)}
.sfbox{border:3px solid var(--ink);border-radius:var(--r);background:#fff;padding:7px 12px;margin:6px 0}
.sfbox textarea{width:100%;min-height:62px;border:2px solid var(--ink);border-radius:var(--r2);padding:6px 8px;font:inherit;font-size:1.02rem;background:#fff;resize:vertical;margin-top:4px}
.sfbox .le{margin-right:4px}

/* ---------- Vertiefen ---------- */
.quote{background:#fff;border:2.5px solid var(--ink);border-radius:18px 18px 18px 4px;padding:7px 12px;margin:6px 0 6px 58px;position:relative;font-size:1.05rem;min-height:52px}
.quote .av{position:absolute;left:-58px;top:0;width:48px;height:48px}
.quote small{display:block;color:var(--ink2);font-size:.8rem}
.vote{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.flipgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.flip{perspective:800px;height:112px;cursor:pointer}
.flip .in{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .bk{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2.5px solid var(--ink);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;justify-content:center;font-size:.95rem;line-height:1.22;box-shadow:3px 3px 0 var(--ink)}
.flip .f{background:repeating-linear-gradient(135deg,#fff,#fff 12px,var(--main-l) 12px,var(--main-l) 24px)}
.flip .f b{background:#fff;border-radius:8px;padding:2px 6px}
.flip .bk{background:var(--ok-l);transform:rotateY(180deg)}
.flip small{color:var(--ink2);font-size:.78rem}
.sortcard{border:3px solid var(--ink);border-radius:var(--r);background:#fff;box-shadow:3px 4px 0 var(--ink);padding:10px 14px;margin:6px 0;display:flex;gap:12px;align-items:center;min-height:92px;transition:transform .35s ease,opacity .35s}
.sortcard .em{font-size:2.5rem;line-height:1}
.sortcard .tx{font-size:1.08rem;line-height:1.3}
.sortcard.out{transform:translateX(40px) rotate(4deg);opacity:0}
.bigvote{display:flex;gap:10px;justify-content:center;margin:6px 0;flex-wrap:wrap}
.bigvote button{border:3px solid var(--ink);border-radius:var(--r);padding:5px 16px;font-size:1.08rem;box-shadow:2px 3px 0 var(--ink);background:#fff}
.bigvote .y{background:var(--ok-l)} .bigvote .n{background:var(--bad-l)}
.kidnav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:2px 0 4px}
.kidnav button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:0 10px;font-size:.9rem}
.kidnav button.on{background:var(--hl);box-shadow:2px 2px 0 var(--ink)}
.kidnav button.ok{border-color:var(--ok);background:var(--ok-l)}

/* ---------- Check ---------- */
.chk{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:4px 0;border-bottom:1.5px dashed var(--line);font-size:.97rem;line-height:1.22}
.chk .st{display:flex;gap:4px}
.chk .st button{border:2px solid var(--ink);background:#fff;border-radius:var(--r);padding:0 8px;font-size:1.05rem}
.chk .st button.on{background:var(--hl)}
.stamp{display:inline-block;border:4px solid var(--ok);color:var(--ok);font-family:var(--head);font-size:2rem;font-weight:700;padding:0 16px;border-radius:10px;transform:rotate(-8deg);margin:6px 0;animation:stamp .5s ease-out}
@keyframes stamp{from{transform:rotate(-8deg) scale(2.2);opacity:0}to{transform:rotate(-8deg) scale(1);opacity:1}}

/* ---------- Overlays ---------- */
.ov{position:fixed;inset:0;background:rgba(43,42,40,.55);display:none;align-items:center;justify-content:center;z-index:40;padding:16px}
.ov.show{display:flex}
.ovc{background:var(--paper2);border:3px solid var(--ink);border-radius:var(--r);box-shadow:6px 7px 0 var(--ink);padding:18px 22px;max-width:780px;width:100%;max-height:92vh;overflow:auto;position:relative}
.ovc .x{position:absolute;top:8px;right:10px;border:2px solid var(--ink);background:#fff;border-radius:50%;width:34px;height:34px;font-size:1.1rem;z-index:2}
.qrbig{width:min(64vh,80vw);height:min(64vh,80vw);display:block;margin:6px auto}
.qrc{text-align:center}
.wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.wl-item{border:2px solid var(--ink);border-radius:var(--r2);padding:5px 10px;background:#fff}
.wl-item b{font-family:var(--head);font-size:1.35rem;color:#1d4f86}
.wl-item .pl{font-size:.82rem;color:var(--ink2)}
.wl-item .al{font-size:.95rem}
.pop{position:fixed;z-index:60;max-width:320px;background:#fff;border:2.5px solid var(--imm);border-radius:12px;box-shadow:4px 4px 0 var(--ink);padding:7px 12px;font-size:.96rem}
.pop b{color:var(--imm);font-family:var(--head);font-size:1.35rem}
.pop .pl{color:var(--ink2);font-size:.82rem}
.toast{position:fixed;left:50%;top:120px;transform:translateX(-50%) translateY(-30px);opacity:0;z-index:70;background:var(--hl);border:3px solid var(--ink);border-radius:var(--r);padding:8px 18px;box-shadow:4px 4px 0 var(--ink);font-size:1.1rem;transition:.4s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#ovFull{position:fixed;inset:0;z-index:90;background:#22201d;display:none;flex-direction:column}
#ovFull.show{display:flex}
#ovFull>img{flex:1;min-height:0;width:100%;object-fit:contain;cursor:zoom-out}
#ovFull .fcap{background:#fffdf8;font-size:clamp(18px,2.2vw,32px);line-height:1.3;padding:12px 32px 14px;border-top:5px solid var(--or)}
#ovFull .fcap b.t{font-family:var(--head);font-size:1.45em;display:block;line-height:1}
#ovFull .fq{margin-top:8px;font-family:var(--head);font-size:1.3em;font-weight:700;display:flex;gap:10px;align-items:center}
#ovFull .fq .le{font-size:.55em}
#ovFull .fbtns{position:absolute;top:12px;right:14px;display:flex;gap:8px}
#ovFull .fbtns button{border:2.5px solid var(--ink);background:#fff;border-radius:var(--r);padding:4px 14px;font-size:1.05rem}
.ffb{flex:1;min-height:0;max-height:none!important;height:auto!important;aspect-ratio:auto!important;border:none!important;border-radius:0!important}
.vcard{display:flex;gap:10px;align-items:center;border:2px dashed var(--ink);border-radius:var(--r2);padding:4px 10px 4px 4px;background:#fff;cursor:zoom-in;margin:2px 0 6px}
.vcard:hover{background:var(--hl-l)}
.vcard img,.vcard .vth{width:66px;height:44px;object-fit:contain;background:#f3ecdc;border-radius:6px;border:1.5px solid var(--ink);flex-shrink:0;display:block;overflow:hidden}
.vcard .vth svg{width:100%;height:100%;display:block}
.vcard b{display:block;font-family:var(--head);font-size:1.25rem;line-height:1}.vcard span{font-size:.88rem;color:var(--ink2)}
#ovImp .ovc{max-width:min(1300px,96vw)}
.impimg{width:100%;height:auto;max-height:44vh;object-fit:contain;border:2.5px solid var(--ink);border-radius:var(--r2);display:block;background:#f4efe4}
.ovhilfe img,.ovhilfe .figimg{max-height:58vh;width:100%;object-fit:contain}
#ovBoard .ovc{max-width:1100px}

/* ---------- Lehrkraft-Info · Kleinteile ---------- */
.lkbtn{font-size:.85rem;background:#f6f2fd;border-style:dashed;box-shadow:none;margin-top:6px;color:var(--main-d)}
.lkbox{margin:8px 0;border:2px dashed var(--main);background:#f6f2fd;border-radius:var(--r2);padding:3px 12px;font-size:.88rem;line-height:1.3}
.lkbox summary{cursor:pointer;font-weight:700;color:var(--main-d)}
.lkbox div{padding:4px 0}
.stfig{margin:2px 0 4px}
.labrow2{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:3px 0;flex-wrap:wrap}
.prot{border-collapse:collapse;font-size:.86rem;margin:0}
.prot th,.prot td{border:1.5px solid var(--ink);padding:0 8px;text-align:center;line-height:1.35}
.prot th{background:#f4efe4;font-weight:700}
.labcv{border:2.5px solid var(--ink);border-radius:var(--r2);background:#fff;padding:4px;margin:4px 0}
.labcv canvas{display:block;width:auto;height:auto;max-width:100%;max-height:28vh;margin:0 auto}
body.beamer .llanim canvas{max-height:32vh} body.beamer .labcv canvas{max-height:40vh}
body.beamer .brand small{display:none}