@import url("/_gemeinsam/design-basis.css");
/* Lektüre-Engine (buchunabhängig). Farben/Schriften kommen aus dem Design (/_gemeinsam/design-basis.css, Variablen --d-*) und
   dem Buch-Theme (z. B. assets/gespenst.css überschreibt --d-* und die Engine-Variablen). Gemeinsames Design Dunkelblau seit 08.10.2026.
   Kein Tailwind, keine externen Adressen. */
:root{
  color-scheme:dark;
  --night:#0B1A45; --night2:#14307A; --lamp:var(--d-honig); --lamp-d:#E6A800; --paper:rgba(255,255,255,.10); --ink:var(--d-ink); --line:rgba(255,255,255,.24);
  --mint:#2FAE6B; --mint-bg:var(--d-ok-bg); --coral:#E5484D; --coral-bg:var(--d-bad-bg);
  --violet:#7C69F0; --violet-bg:var(--d-lila-bg); --violet-d:#C9BEFF;
  --fertig:#3FD9C4; --fertig-d:#1E8F80; --fertig-bg:#123B3B; --fertig-bg2:#0F3030; --fertig-h1:#1C5A5A; --fertig-h2:#167070; --fertig-ink:#9CF0E4;
  --seite-bg:var(--d-bg); --topbar-bg:rgba(11,26,69,.86); --hero-bg:var(--d-card-bg); --szene-bg:#0A1B40;
  --round:"Baloo 2",ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Avenir Next Rounded","Trebuchet MS",system-ui,sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);font-size:19px;line-height:1.5;color:var(--ink);background-color:var(--seite-bg);background-image:var(--d-bg-image);background-size:var(--d-bg-size);-webkit-tap-highlight-color:transparent;min-height:100vh}
h1,h2,h3,.rnd{font-family:var(--round)}
button,input,textarea,select{font-family:inherit;-webkit-appearance:none;appearance:none;border-radius:0;margin:0}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;color:inherit}
:focus-visible{outline:4px solid #ff9f1c;outline-offset:2px}
a{color:inherit}
/* Top-Leiste */
.topbar{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:var(--topbar-bg);border-bottom:3px solid var(--lamp);padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px))}
.topbar-in{max-width:980px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.pbar{flex:1 1 220px;min-width:200px}
.pbar-label{font-family:var(--round);font-weight:800;font-size:14px;color:#fff;display:flex;justify-content:space-between}
.pbar-track{height:14px;border-radius:9px;background:#32477a;overflow:hidden;margin-top:3px}
.pbar-fill{height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#ffd45a,#ffb703);transition:width .5s ease}
.starbox{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:22px;background:var(--violet-d);color:#fff;font-family:var(--round);font-weight:800;font-size:17px;white-space:nowrap}
.starbox b{color:#ffe28a;font-size:20px}
.iconbtn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:22px;border:2px solid #5d74b4;background:#22407f;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;padding:0}
.iconbtn[aria-pressed="false"]{opacity:.65}
.dots{display:flex;flex-wrap:wrap;gap:6px}
.dot{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-family:var(--round);font-weight:800;font-size:17px;background:#fff;color:var(--night);border:3px solid #fff;position:relative}
.dot.k{background:var(--violet-bg);border-color:#b79cff;color:var(--violet-d)}
.dot.done{background:var(--mint);border-color:var(--mint);color:#fff}
.dot.k.done{background:var(--violet);border-color:var(--violet)}
.dot.done::after{content:"✓";position:absolute;right:-3px;top:-6px;width:18px;height:18px;border-radius:9px;background:#fff;color:var(--mint);font-size:13px;line-height:18px;text-align:center}
.dot.k.done::after{color:var(--violet)}

/* Seite */
.wrap{max-width:900px;margin:0 auto;padding:18px 14px 70px;padding-left:calc(14px + env(safe-area-inset-left,0px));padding-right:calc(14px + env(safe-area-inset-right,0px))}
.hero{background:var(--hero-bg);border:3px solid var(--lamp);border-radius:28px;padding:18px;color:#fff;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero h1{font-size:34px;line-height:1.1;margin:0 0 6px;color:#fff}
.hero .kap{display:inline-block;background:var(--lamp);color:var(--night);font-family:var(--round);font-weight:800;border-radius:16px;padding:2px 12px;font-size:16px;margin-bottom:8px}
.bubble{background:#fff;color:var(--ink);border-radius:20px;padding:10px 14px;margin-top:10px;font-size:18px;position:relative}
.task{background:var(--paper);border:3px solid var(--line);border-radius:26px;margin-top:22px;overflow:hidden;scroll-margin-top:150px;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.task-h{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(90deg,#fff1c2,#ffe29a);border-bottom:3px solid var(--line)}
.task-n{flex:0 0 auto;width:48px;height:48px;border-radius:24px;background:var(--night);color:var(--lamp);font-family:var(--round);font-weight:800;font-size:25px;display:flex;align-items:center;justify-content:center}
.task-t{font-family:var(--round);font-weight:800;font-size:25px;line-height:1.15;margin:0}
.task-s{font-size:16px;opacity:.85;margin:0}
.task-b{padding:16px}
.task.done .task-h{background:linear-gradient(90deg,#d7f6e8,#b9ecd5)}
.task.done .task-n{background:var(--mint);color:#fff}
.tick{margin-left:auto;display:none;align-items:center;gap:6px;color:var(--mint);font-family:var(--round);font-weight:800;white-space:nowrap}
.task.done .tick{display:flex}
.task.k{background:var(--violet-bg);border-color:#b79cff}
.task.k .task-h{background:linear-gradient(90deg,#e4d8ff,#d3c0ff);border-bottom-color:#b79cff}
.task.k .task-n{background:var(--violet);color:#fff}
.task.k.done .task-h{background:linear-gradient(90deg,#d9cbff,#c4adff)}
.task.k.done .tick{color:var(--violet-d)}
.badge{display:inline-block;background:var(--violet);color:#fff;font-family:var(--round);font-weight:800;font-size:14px;border-radius:14px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.section-k{margin-top:34px;padding:14px 18px;border-radius:22px;background:var(--violet);color:#fff;font-family:var(--round);font-weight:800;font-size:22px;display:flex;align-items:center;gap:10px}
.section-k small{font-weight:600;font-size:16px;opacity:.95;display:block;font-family:var(--text)}

/* Buttons */
.btn{min-height:50px;padding:8px 22px;border-radius:25px;border:0;background:var(--night);color:#fff;font-family:var(--round);font-weight:800;font-size:19px;box-shadow:0 4px 0 #091a3d}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #091a3d}
.btn.lamp{background:var(--lamp);color:var(--night);box-shadow:0 4px 0 var(--lamp-d)}
.btn.vio{background:var(--violet);box-shadow:0 4px 0 var(--violet-d)}
.btn.ghostbtn{background:#fff;color:var(--night);border:3px solid var(--night);box-shadow:none}
.btn[disabled]{opacity:.5}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Feedback */
.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.pop{animation:pop .4s}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.note{font-size:17px;margin-top:8px;padding:8px 12px;border-radius:14px}
.note.ok{background:var(--mint-bg);color:#0d6b50}
.note.bad{background:var(--coral-bg);color:#9a2a20}
.note.info{background:#fff3cf;color:#6b4a00}
.note.vio{background:#e7dcff;color:var(--violet-d)}

/* 1 Richtig/Falsch */
.rf{background:#fff;border:3px solid var(--line);border-radius:20px;padding:12px 14px;margin-bottom:12px}
.rf.ok{border-color:var(--mint);background:var(--mint-bg)}
.rf.bad{border-color:var(--coral);background:var(--coral-bg)}
.rf-t{display:flex;gap:10px;align-items:flex-start;font-size:19px}
.rf-n{flex:0 0 auto;width:34px;height:34px;border-radius:17px;background:var(--night);color:#fff;font-family:var(--round);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px}
.rf-b{display:flex;gap:10px;margin-top:10px}
.rf-b button{flex:1;min-height:52px;border-radius:26px;border:3px solid var(--night);background:#fff;font-family:var(--round);font-weight:800;font-size:19px;color:var(--night)}
.rf-b button.r{border-color:var(--mint);color:#0d6b50}
.rf-b button.f{border-color:var(--coral);color:#9a2a20}
.rf-b button[disabled]{opacity:.45}
.rf-b button.picked{opacity:1;color:#fff}
.rf-b button.r.picked{background:var(--mint)}
.rf-b button.f.picked{background:var(--mint);border-color:var(--mint)}
.rf-b button.wrongpick{opacity:1;color:#fff;background:var(--coral);border-color:var(--coral)}

/* 2 Reihenfolge */
.sort-list{position:relative;display:flex;flex-direction:column;gap:10px;padding:0 4px}
.sort-card{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--line);border-radius:18px;padding:8px 8px 8px 10px;min-height:64px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;will-change:transform}
.sort-card *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.sort-card .pos{flex:0 0 auto;width:38px;height:38px;border-radius:19px;background:var(--night);color:var(--lamp);font-family:var(--round);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:19px}
.sort-card .grip{flex:0 0 auto;width:14px;height:34px;background-image:radial-gradient(circle,#a9b5d6 2.2px,transparent 2.6px);background-size:7px 11px;opacity:.9}
.sort-card .tx{flex:1 1 auto;font-size:18px;line-height:1.35}
.sort-card .mv{flex:0 0 auto;display:flex;flex-direction:column;gap:4px}
.sort-card .mv button{width:44px;height:44px;border-radius:12px;border:2px solid #b8c3e0;background:#eef2ff;color:var(--night);font-size:20px;font-weight:800;padding:0;display:flex;align-items:center;justify-content:center}
.sort-card .mv button[disabled]{opacity:.3}
.sort-card.bewegt{z-index:6;box-shadow:0 8px 18px rgba(0,0,0,.28)}
.sort-card.dragging{z-index:20;box-shadow:0 12px 24px rgba(0,0,0,.35);border-color:var(--lamp);background:#fffbe6;cursor:grabbing;transition:none!important}
.sort-card.ok{border-color:var(--mint);background:var(--mint-bg)}
.sort-card.bad{border-color:var(--coral);background:var(--coral-bg)}
.sort-card.fest{cursor:default;touch-action:auto}
.sort-card.fest .pos{background:var(--mint);color:#fff}
.sort-card.fest .grip{opacity:.25}
.sort-card.fest .mv{visibility:hidden}
.sort-list.locked .sort-card{cursor:default;touch-action:auto}
.sort-list.locked .mv{visibility:hidden}

/* 3 Szene (Rahmen; Kapitelspezifisches steht im Kapitel-CSS) */
.scene-box{position:relative;border-radius:22px;overflow:hidden;border:3px solid var(--night);background:var(--szene-bg)}
.scene-pixi{position:absolute;inset:0;pointer-events:none}
.scene{display:block;width:100%;height:auto}
.story{font-size:20px;line-height:2.2;margin-top:14px;background:#fff;border:3px solid var(--line);border-radius:20px;padding:12px 16px}
.gap{display:inline-block;min-width:112px;min-height:44px;padding:0 12px;margin:0 3px;border-radius:14px;border:3px dashed #9fb0d8;background:#eef2ff;color:var(--night);font-family:var(--round);font-weight:800;font-size:19px;line-height:38px;text-align:center;vertical-align:middle}
.gap.cur{border-color:var(--lamp-d);background:#fff3cf;animation:pulse 1.4s ease-in-out infinite}
.gap.sol{border:3px solid var(--mint);background:var(--mint-bg);color:#0d6b50}
.gap.wait{opacity:.6}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,183,3,.6)}50%{box-shadow:0 0 0 7px rgba(255,183,3,0)}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chip{min-height:50px;padding:6px 20px;border-radius:25px;border:3px solid var(--night);background:#fff;font-family:var(--round);font-weight:800;font-size:20px;color:var(--night)}
.chip[disabled]{opacity:.35;border-style:dashed;text-decoration:line-through}
.chip.satz{border-color:#7a8cbc;font-size:17px;background:#eef2ff}

/* 4 Detektiv */
.q{background:#fff;border:3px solid var(--line);border-radius:20px;padding:14px;margin-bottom:14px}
.q.ok{border-color:var(--mint)}
.quote{margin:0 0 10px;padding:8px 14px;border-left:6px solid var(--lamp);background:#fff6d8;border-radius:0 14px 14px 0;font-style:italic}
.quote small{font-style:normal;font-weight:700;opacity:.8;display:block}
.q-t{font-family:var(--round);font-weight:800;font-size:20px;margin:6px 0 10px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px;padding:8px 12px;margin-bottom:8px;border-radius:16px;border:3px solid #c5cfe8;background:#f7f9ff;font-size:18px;line-height:1.35}
.opt .l{flex:0 0 auto;width:34px;height:34px;border-radius:17px;background:var(--night);color:#fff;font-family:var(--round);font-weight:800;display:flex;align-items:center;justify-content:center}
.opt.ok{border-color:var(--mint);background:var(--mint-bg)}
.opt.ok .l{background:var(--mint)}
.opt.no{border-color:var(--coral);background:var(--coral-bg);opacity:.55;text-decoration:line-through}
.opt[disabled]{cursor:default}

/* 5 Woerter */
.match{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:600px){.match{grid-template-columns:1fr 1.5fr}}
.col{display:flex;flex-direction:column;gap:10px}
.mw,.me{min-height:56px;padding:8px 14px;border-radius:16px;border:3px solid #c5cfe8;background:#fff;text-align:left;font-size:18px;line-height:1.3}
.mw{font-family:var(--round);font-weight:800;font-size:20px;border-color:var(--night)}
.mw small{display:block;font-family:var(--text);font-weight:600;font-size:14px;opacity:.7}
.mw.sel{background:var(--lamp);border-color:var(--lamp-d)}
.mw.ok,.me.ok{background:var(--mint-bg);border-color:var(--mint);color:#0d6b50}
.me.lock,.mw.lock{pointer-events:none}
.me.no{background:var(--coral-bg);border-color:var(--coral)}

/* Textfelder */
textarea,.inp{width:100%;font-size:18px;line-height:1.45;padding:12px 14px;border:3px solid #b8c3e0;border-radius:16px;background:#fff;color:var(--ink);-webkit-user-select:text;user-select:text}
textarea{min-height:150px;resize:vertical;display:block}
textarea.fertig{border-color:var(--mint);background:var(--mint-bg)}
textarea:focus,.inp:focus{border-color:var(--lamp-d);outline:none;box-shadow:0 0 0 4px rgba(255,183,3,.35)}
.k textarea:focus,.k .inp:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(112,72,232,.3)}
.counter{font-size:15px;opacity:.8;margin-top:4px}
.tip{background:#fff;border:3px dashed #b79cff;border-radius:18px;padding:10px 14px;margin:10px 0;font-size:17px}
.tip b{color:var(--violet-d)}
.choice{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0}
@media (min-width:640px){.choice{grid-template-columns:repeat(3,1fr)}}
.choice button{min-height:56px;padding:8px 12px;border-radius:18px;border:3px solid var(--violet);background:#fff;color:var(--violet-d);font-family:var(--round);font-weight:800;font-size:18px;line-height:1.25}
.choice button.on{background:var(--violet);color:#fff}

/* 9 Anagramm */
.ana{background:#fff;border:3px solid #cdbcff;border-radius:20px;padding:12px 14px;margin-bottom:12px}
.ana.sol{border-color:var(--mint);background:var(--mint-bg)}
.ana.rev{border-color:#b8c0d6;background:#eef0f6}
.tiles{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.tile{width:44px;height:50px;border-radius:12px;background:#ece4ff;border:3px solid #b79cff;color:var(--violet-d);font-family:var(--round);font-weight:800;font-size:25px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tile:active{transform:translateY(2px)}
.tile.used,.tile.fix.used{background:#e6e6ec;border-color:#cfcfd8;color:#a3a3b0;cursor:default}
.tile:disabled{cursor:default;opacity:1;-webkit-text-fill-color:currentColor}
.tile.fix{background:var(--violet);border-color:var(--violet);color:#fff;text-decoration:underline;text-underline-offset:4px}
.ana-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ana-row .inp{flex:1 1 150px;min-width:130px;max-width:230px;height:52px;padding:6px 14px;text-transform:uppercase;letter-spacing:3px;font-family:var(--round);font-weight:800;font-size:22px}
.ana .btn{min-height:50px;padding:6px 18px;font-size:17px}
.btn.gruen{background:var(--mint);box-shadow:0 4px 0 #14775a}
.btn.rot{background:var(--coral);box-shadow:0 4px 0 #a2332a}
.btn.sq{border-radius:12px}
.ana.sol .inp{border-color:var(--mint);background:#effcf6}
.clue{font-size:17px;margin:0 0 4px}
/* Hinweis hinter „?“ (Roman, 01.11.2026): kleiner runder Knopf rechts neben den Kästchen, Hinweis darunter */
.ana-kopf{display:flex;align-items:flex-start;gap:10px}
.ana-kopf>.tiles{flex:1 1 auto;min-width:0}
.ana .btn.x{width:50px;min-width:50px;padding:0;font-size:22px}
.ana .btn.frage{min-height:46px;width:46px;padding:0;border-radius:50%;font-size:20px;flex:none}
.ana .btn.frage[aria-expanded="true"]{outline:3px solid var(--lamp);outline-offset:1px}
.ana .clue{margin:0 0 10px}

/* Sonstiges */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:90;background:var(--night);color:#fff;border:3px solid var(--lamp);padding:12px 22px;border-radius:26px;font-family:var(--round);font-weight:800;font-size:19px;max-width:92%;text-align:center;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;left:0;top:0;right:0;bottom:0;z-index:100;background:rgba(5,12,34,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:26px;border:4px solid var(--violet);padding:22px;max-width:480px;width:100%}
.modal-box h3{margin:0 0 8px;font-size:25px;color:var(--violet-d)}
.finale{display:none;margin-top:22px;padding:16px 18px;border-radius:26px;background:linear-gradient(135deg,#fff3cf,#ffe08a);border:4px solid var(--lamp);font-size:20px;align-items:center;gap:16px}
.finale.show{display:flex}
.confetti{position:fixed;top:-20px;width:11px;height:16px;z-index:95;pointer-events:none;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(720deg);opacity:.9}}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Website-Rahmen */
.sitebar{max-width:900px;margin:0 auto;padding:10px 14px 0;padding-top:calc(10px + env(safe-area-inset-top,0px));padding-left:calc(14px + env(safe-area-inset-left,0px));padding-right:calc(14px + env(safe-area-inset-right,0px));display:flex;align-items:center;justify-content:space-between;gap:10px}
.sitebar .zurueck{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;background:var(--paper);color:var(--night);font-family:var(--round);font-weight:700;font-size:17px;text-decoration:none;border:3px solid var(--lamp)}
#lw-kopf{display:flex;align-items:center;min-height:44px}
.hinweis-login{margin-top:14px;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:#fff3cf;border:3px solid var(--lamp);border-radius:20px;padding:10px 14px;color:#5a3d00;font-size:18px}
.hinweis-login a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;background:var(--lamp);color:var(--night);font-family:var(--round);font-weight:800;text-decoration:none}
.niveau{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:#fff}
.niveau .nl{font-family:var(--round);font-weight:800;font-size:18px}
.niveau .nb{--c:#fff;min-height:48px;padding:6px 20px 6px 14px;border-radius:24px;border:3px solid #fff;background:transparent;color:#fff;font-family:var(--round);font-weight:800;font-size:18px;line-height:1.1;display:inline-flex;align-items:center;gap:10px}
.niveau .nb .sw{width:20px;height:20px;border-radius:50%;background:var(--c);border:2px solid #fff;flex:0 0 auto}
.niveau .nb .nt small{display:block;font-family:var(--text);font-weight:600;font-size:12px;opacity:.85}
.niveau .nb.ng{--c:#5fd48f}.niveau .nb.ny{--c:#ffc94a}.niveau .nb.nr{--c:#ff8a7a}
.niveau .nb[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#1b2a4e}
.niveau .nb[aria-pressed="true"] .sw{border-color:#1b2a4e}
.niveau .nb[disabled]{opacity:.55;border-style:dashed}
.raetsel{margin-top:30px;padding:16px 18px;border-radius:24px;background:var(--paper);border:4px solid var(--lamp);display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.raetsel h2{margin:0;font-size:24px}
.raetsel p{margin:2px 0 0;font-size:17px}
.raetsel a.btn{text-decoration:none;display:inline-flex;align-items:center}
.raetsel a.btn.gesperrt{opacity:.45;filter:grayscale(1);box-shadow:none;cursor:not-allowed}
.lade{margin-top:22px;padding:26px;border-radius:26px;background:var(--paper);text-align:center;font-family:var(--round);font-weight:700;font-size:22px}
.fehler{margin-top:22px;padding:22px;border-radius:26px;background:#fff;border:4px solid var(--coral);text-align:center;font-size:20px}
.fehler .btn{margin-top:12px}
.fuss{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.datenhinweis{margin:8px 0;padding:8px 12px;border-radius:14px;background:#fff3cf;color:#5a3d00;font-size:16px}
.k .datenhinweis{background:#e7dcff;color:var(--violet-d)}
/* freiwillige Schreibaufgabe */
.section-e{margin-top:34px;padding:14px 18px;border-radius:22px;background:var(--lamp);color:var(--night);font-family:var(--round);font-weight:800;font-size:22px;display:flex;align-items:center;gap:10px}
.section-e small{font-weight:600;font-size:16px;display:block;font-family:var(--text)}
.task.erg{background:#fff6e0;border-color:#f1cd85}
.task.erg .task-h{background:linear-gradient(90deg,#ffe9b8,#ffd98a);border-bottom-color:#f1cd85}
.task.erg .task-n{background:var(--lamp);color:var(--night)}
.task.erg.done .task-h{background:linear-gradient(90deg,#d7f6e8,#b9ecd5)}
.badge.frei{background:var(--lamp);color:var(--night)}
.dot.e{background:#fff6e0;border-color:var(--lamp);color:var(--night)}
.dot.e.done{background:var(--lamp);border-color:var(--lamp)}
.dot.e.done::after{color:var(--lamp-d)}
.kopf svg{width:100%;height:auto;display:block}

/* Erledigte Textaufgabe (Schreiben, Was-wäre-wenn, Figurenentscheidung, Meinung): Kachel, Rand, Kopfleiste, Feld und Knopf in sattem Blaugrün (Roman, 06.10.2026). Steht am Dateiende, damit es `.task.erg.done` und `.task.k.done` überstimmt. Der dickere Rand ist ein Schatten-Ring (kein Layoutsprung). */
.task.txt.done,.task.k.txt.done{background:var(--fertig-bg);border-color:var(--fertig);box-shadow:0 0 0 3px var(--fertig),0 9px 0 rgba(0,0,0,.18)}
.task.txt.done .task-h,.task.k.txt.done .task-h{background:linear-gradient(90deg,var(--fertig-h1),var(--fertig-h2));border-bottom-color:var(--fertig)}
.task.txt.done .task-n,.task.k.txt.done .task-n{background:var(--fertig);color:#fff}
.task.txt.done .tick,.task.k.txt.done .tick{color:var(--fertig-ink)}
.task.txt.done textarea.fertig{border-color:var(--fertig);background:var(--fertig-bg2)}
.task.txt.done .btn.gruen{background:var(--fertig);box-shadow:0 4px 0 var(--fertig-d)}
.task.txt.done .note.ok{background:var(--fertig-bg2);color:var(--fertig-ink)}

/* ==========================================================================
   Design Dunkelblau (Glas), Stand 08.10.2026: ueberschreibt die hellen Flaechen der Komponenten.
   Farben nur ueber --d-* und die Engine-Variablen, damit ein Buch-Theme (assets/<buch>.css) die Stimmung
   der Geschichte setzen kann (siehe gespenst.css). Tippflaechen bleiben unveraendert gross (>= 44 px).
   ========================================================================== */
.topbar{background:var(--topbar-bg);border-bottom:var(--d-card-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.pbar-label{color:var(--d-ink)}
.pbar-track{background:rgba(255,255,255,.16)}
.pbar-fill{background:var(--d-bar-fill)}
.starbox{background:var(--d-btn-bg);color:var(--d-btn-ink)}
.starbox b{color:#8A5200}
.iconbtn{background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.35);color:var(--d-ink)}
.dot{background:var(--d-card-bg);color:var(--d-ink);border:var(--d-card-border);box-shadow:var(--d-small-shadow)}
.dot.k{background:var(--d-lila-bg);border-color:var(--d-lila);color:var(--d-ink)}
.dot.done{background:var(--d-ok-bg);border-color:var(--d-ok);color:var(--d-ok)}
.dot.k.done{background:var(--d-lila-bg);border-color:var(--d-lila);color:var(--d-ink)}
.dot.done::after{background:var(--d-ok);color:#0B2A18}
.dot.k.done::after{background:var(--d-lila);color:#14123A}
.dot.e{background:var(--d-honig-bg);border-color:var(--d-honig);color:var(--d-ink)}
.dot.e.done{background:var(--d-honig);border-color:var(--d-honig);color:#2B1F04}
.dot.e.done::after{background:#2B1F04;color:var(--d-honig)}

.sitebar .zurueck{background:var(--d-card-bg);color:var(--d-ink);border:var(--d-card-border);box-shadow:var(--d-small-shadow);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hero{background:var(--hero-bg);border:var(--d-card-border);box-shadow:var(--d-card-shadow);color:var(--d-ink);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hero h1{color:var(--d-ink)}
.hero .kap{background:var(--lamp);color:#2B1F04}
.bubble{background:rgba(255,255,255,.12);color:var(--d-ink);border:1px solid rgba(255,255,255,.22)}
.hinweis-login{background:rgba(255,201,94,.14);border-color:var(--lamp);color:var(--d-ink)}
.hinweis-login a{background:var(--lamp);color:#2B1F04}

.task{background:var(--d-card-bg);border:var(--d-card-border);color:var(--d-ink);box-shadow:var(--d-card-shadow);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.task-h{background:rgba(255,255,255,.08);border-bottom:var(--d-card-border)}
.task-n{background:var(--lamp);color:#2B1F04}
.task.done .task-h{background:var(--d-ok-bg)}
.task.done .task-n{background:var(--d-ok);color:#0B2A18}
.tick{color:var(--d-ok)}
.task.k{background:var(--d-card-bg);border-color:rgba(169,155,255,.55)}
.task.k .task-h{background:rgba(124,105,240,.22);border-bottom-color:rgba(169,155,255,.55)}
.task.k .task-n{background:var(--violet);color:#fff}
.task.k.done .task-h{background:rgba(124,105,240,.36)}
.task.k.done .tick{color:var(--violet-d)}
.task.erg{background:var(--d-card-bg);border-color:rgba(255,201,94,.5)}
.task.erg .task-h{background:rgba(255,201,94,.16);border-bottom-color:rgba(255,201,94,.5)}
.task.erg .task-n{background:var(--lamp);color:#2B1F04}
.task.erg.done:not(.txt) .task-h{background:var(--d-ok-bg)}

.btn{background:var(--d-card-bg);color:var(--d-ink);border:var(--d-card-border);box-shadow:var(--d-small-shadow)}
.btn:active{box-shadow:none}
.btn.lamp{background:var(--lamp);color:#2B1F04;border-color:transparent;box-shadow:0 4px 0 var(--lamp-d)}
.btn.vio{background:var(--violet);color:#fff;border-color:transparent;box-shadow:0 4px 0 #4A3AB5}
.btn.ghostbtn{background:transparent;color:var(--d-ink);border:2px solid rgba(255,255,255,.4);box-shadow:none}
.btn.gruen{background:var(--mint);color:#06220F;border-color:transparent;box-shadow:0 4px 0 #1B7C47}
.btn.rot{background:#FF8A8A;color:#2B0709;border-color:transparent;box-shadow:0 4px 0 #B5484E}
.note.ok{background:var(--d-ok-bg);color:var(--d-ok)}
.note.bad{background:var(--d-bad-bg);color:var(--d-bad)}
.note.info{background:rgba(255,201,94,.16);color:var(--d-honig)}
.note.vio{background:rgba(124,105,240,.25);color:#D6CEFF}

.rf,.q,.ana,.story{background:rgba(255,255,255,.07);border-color:var(--line);color:var(--d-ink)}
.rf.ok{border-color:var(--mint);background:var(--mint-bg)}
.rf.bad{border-color:var(--coral);background:var(--coral-bg)}
.rf-n,.opt .l,.sort-card .pos{background:var(--lamp);color:#2B1F04}
.rf-b button{background:rgba(255,255,255,.08);color:var(--d-ink);border-color:rgba(255,255,255,.35)}
.rf-b button.r{border-color:var(--d-ok);color:var(--d-ok)}
.rf-b button.f{border-color:var(--d-bad);color:var(--d-bad)}
.rf-b button.picked{color:#06220F}
.rf-b button.wrongpick{color:#2B0709;background:#FF8A8A;border-color:#FF8A8A}

.sort-card{background:rgba(255,255,255,.08);border-color:var(--line);color:var(--d-ink)}
.sort-card .grip{background-image:radial-gradient(circle,#8FA4D9 2.2px,transparent 2.6px)}
.sort-card .mv button{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.3);color:var(--d-ink)}
.sort-card.dragging{background:var(--d-surface-2);border-color:var(--lamp)}
.sort-card.ok{border-color:var(--mint);background:var(--mint-bg)}
.sort-card.bad{border-color:var(--coral);background:var(--coral-bg)}
.sort-card.fest .pos{background:var(--d-ok);color:#06220F}

.scene-box{border-color:rgba(255,255,255,.3)}
.gap{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:var(--d-ink)}
.gap.cur{border-color:var(--lamp);background:rgba(255,201,94,.18)}
.gap.sol{background:var(--d-ok-bg);border-color:var(--d-ok);color:var(--d-ok)}
.chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:var(--d-ink)}
.chip.satz{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.quote{background:rgba(255,201,94,.12);border-left-color:var(--lamp);color:var(--d-ink)}
.opt{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:var(--d-ink)}
.opt.ok{border-color:var(--mint);background:var(--mint-bg)}
.opt.ok .l{background:var(--d-ok);color:#06220F}
.opt.no{border-color:var(--coral);background:var(--coral-bg)}
.mw,.me{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:var(--d-ink)}
.mw{border-color:rgba(255,255,255,.5)}
.mw.sel{background:var(--lamp);color:#2B1F04;border-color:var(--lamp-d)}
.mw.ok,.me.ok{background:var(--d-ok-bg);border-color:var(--d-ok);color:var(--d-ok)}
.me.no{background:var(--d-bad-bg);border-color:var(--d-bad)}

textarea,.inp{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:var(--d-ink)}
textarea::placeholder,.inp::placeholder{color:var(--d-ink-soft)}
textarea.fertig{border-color:var(--mint);background:var(--mint-bg)}
.tip{background:rgba(255,255,255,.06);border-color:rgba(169,155,255,.6);color:var(--d-ink)}
.choice button{background:rgba(255,255,255,.08);color:var(--violet-d);border-color:var(--violet)}
.choice button.on{background:var(--violet);color:#fff}
.ana{border-color:rgba(169,155,255,.45)}
.ana.sol{border-color:var(--mint);background:var(--mint-bg)}
.ana.rev{background:rgba(255,255,255,.05);border-color:var(--line)}
.ana.sol .inp{background:var(--d-ok-bg)}
.tile{background:rgba(124,105,240,.25);border-color:var(--d-lila);color:#E6E0FF}
.tile.used,.tile.fix.used{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.45)}
.tile.fix{background:var(--violet);border-color:var(--violet);color:#fff}

.toast{background:var(--d-surface);color:var(--d-ink);border-color:var(--lamp)}
.modal{background:rgba(3,10,40,.7)}
.modal-box{background:var(--d-surface);color:var(--d-ink);border-color:var(--violet)}
.modal-box h3{color:#CFC6FF}
.finale{background:var(--d-honig-bg);border-color:var(--lamp);color:var(--d-ink)}
.raetsel{background:var(--d-card-bg);border-color:var(--lamp);color:var(--d-ink)}
.lade{background:var(--d-card-bg);color:var(--d-ink)}
.fehler{background:var(--d-surface);color:var(--d-ink)}
.datenhinweis{background:rgba(255,201,94,.14);color:var(--d-ink)}
.k .datenhinweis{background:rgba(124,105,240,.22);color:var(--d-ink)}

/* ===== WK2 Kartenstapel (Roman 06./07.11.2026; Rahmen 6a „Aufgabenpräsentation“) =====
   Eine Karte je Aufgabe (R/F-Aussage, Detektiv-Frage, Salat-Wort einzeln), keine geteilte Ansicht.
   Karten schlank (Roman: „zu fett“). Bewegt werden nur transform/opacity. Rückfall ohne Stapel: ?stapel=aus */
.lk-pruefen{margin-top:10px;min-height:44px;padding:4px 20px}
.rf.ok .lk-pruefen,.q.ok .lk-pruefen{display:none}
.rf-b button.gewaehlt{background:#fff3c4;border-color:var(--lamp);color:var(--night);box-shadow:0 0 0 3px rgba(255,201,94,.45)}
.opt.gewaehlt{border-color:var(--lamp);background:#fff3c4;box-shadow:0 0 0 3px rgba(255,201,94,.45)}
.iconbtn.lw-ton svg{width:22px;height:22px}
.iconbtn.lw-ton[aria-pressed="true"] .lw-ton-strich,.iconbtn.lw-ton[aria-pressed="false"] .lw-ton-wellen{display:none}

.lk-stapel-an .lk-stapelbox{max-width:720px;margin:16px auto 0}
.lk-stapel-an .hero{padding:12px 14px;gap:12px}
.lk-buehne{position:relative;display:grid;padding-bottom:20px}
.lk-buehne>section.task,.lk-buehne>.lk-abschluss{grid-area:1/1;min-width:0;margin:0;position:relative;z-index:1}
.lk-buehne>section.task:not(.lk-aktiv),.lk-buehne>.lk-abschluss:not(.lk-aktiv){position:absolute;left:0;right:0;top:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.lk-geist{grid-area:1/1;align-self:end;height:60px;border-radius:22px;border:2px solid var(--line);background:rgba(20,43,102,.75);pointer-events:none}
.lk-geist-1{transform:translateY(10px) scale(.965);opacity:.85}
.lk-geist-2{transform:translateY(20px) scale(.93);opacity:.5}
.lk-geist[hidden]{display:none}
.lk-einzeln .rf:not(.lk-dran),.lk-einzeln .q:not(.lk-dran),.lk-einzeln .ana:not(.lk-dran){display:none}
.lk-einzeln .rf,.lk-einzeln .q,.lk-einzeln .ana{margin-bottom:0}
.lk-stapel-an .lk-buehne section.task{border-width:2px;border-radius:20px;box-shadow:0 6px 16px rgba(2,8,40,.3);outline:none}
.lk-stapel-an .lk-buehne .task-h{padding:8px 12px;gap:10px}
.lk-stapel-an .lk-buehne .task-n{width:34px;height:34px;font-size:18px}
.lk-stapel-an .lk-buehne .task-t{font-size:20px}
.lk-stapel-an .lk-buehne .task-s{font-size:15px}
.lk-stapel-an .lk-buehne .task-b{padding:12px}
.lk-stapel-an .lk-buehne .rf{border-width:2px;padding:10px 12px}
.lk-stapel-an .lk-buehne .rf-t{font-size:18px}
.lk-stapel-an .lk-buehne .rf-b button{min-height:46px;font-size:17px;border-width:2px}
.lk-stapel-an .lk-buehne .q{border-width:2px;padding:12px}
.lk-stapel-an .lk-buehne .opt{min-height:48px;font-size:17px;border-width:2px}
.lk-stapel-an .lk-buehne .counter{display:none}
/* Pfad der Teilaufgaben */
.lk-pfad-wrap{display:flex;align-items:center;gap:6px 12px;min-height:32px;margin:0 0 8px;color:#fff}
.lk-pfad{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.lk-stein{position:relative;width:44px;height:44px;min-width:44px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.lk-kreis{position:relative;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);width:28px;height:28px;border-radius:50%;border:2px solid rgba(169,196,255,.6);transition:border-color .2s,box-shadow .2s}
.lk-fuellung{position:absolute;inset:0;border-radius:50%;background:var(--mint);transform:translateY(110%);z-index:-1;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.lk-stein.ist-richtig .lk-kreis{border-color:var(--mint)}
.lk-stein.ist-richtig .lk-fuellung{transform:none}
.lk-stein[aria-current=step] .lk-kreis{border-color:var(--lamp);box-shadow:0 0 0 4px rgba(255,201,94,.3)}
.lk-pfad-text{margin:0;font-size:15px;opacity:.85}
.dot.aktuell{box-shadow:0 0 0 3px var(--lamp)}
/* Aktionen */
.lk-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px}
.lk-weiter{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:6px 24px;border:0;border-radius:999px;background:var(--lamp);color:var(--night);font-family:var(--round);font-weight:800;font-size:18px;text-decoration:none;cursor:pointer;box-shadow:0 6px 16px rgba(255,201,94,.25)}
.lk-weiter[hidden],.lk-spaeter[hidden]{display:none}
.lk-spaeter{min-height:44px;padding:6px 4px;border:0;background:none;color:inherit;opacity:.8;font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lk-spaeter{color:var(--d-ink-soft,#B3C3EC)}
/* Abschluss */
.lk-abschluss{background:var(--paper);border:2px solid var(--mint);border-radius:20px;padding:16px;outline:none}
.lk-abs-titel{font-family:var(--round);font-size:26px;margin:0 0 4px}
.lk-abs-text{margin:0 0 12px}
.lk-abs-liste{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.lk-abs-liste li{display:flex;gap:10px;align-items:center;padding:6px 10px;border-radius:12px;background:rgba(11,26,69,.35);cursor:pointer;min-height:44px}
.lk-mini{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--mint);color:#fff}
.lk-abs-liste li.ist-offen .lk-mini{background:transparent;border:2px dashed currentColor}
.lk-abschluss .finale,.lk-abschluss .raetsel{margin-top:12px}
.lk-abschluss .fuss{margin-top:12px}
.lk-abs-zurueck{margin-top:12px}
/* Einzelkarte ohne zweiten Rahmen: die Karte ist die Aufgabe */
.lk-stapel-an .lk-einzeln .lk-dran{border:0;padding:0;background:none;box-shadow:none}
.lk-stapel-an .lk-einzeln .rf.ok .rf-t,.lk-stapel-an .lk-einzeln .q.ok .q-t{color:inherit}
.lk-stapel-an .lk-buehne section.task.lk-einzeln:has(.lk-dran.ok),.lk-stapel-an .lk-buehne section.task.lk-einzeln:has(.lk-dran.sol){border-color:var(--mint)}
.lk-stapel-an .hero h1{font-size:28px;margin:4px 0}
.lk-stapel-an .hero .bubble{font-size:16px;padding:8px 12px}
.lk-stapel-an .niveau{margin-top:10px}
/* Prüfbericht 07.11.2026: „Prüfen“ hellblau wie Häppchen und Werkstatt (Gelb = Weiter); Kopf kompakter */
/* fester Wert aus design-basis (--d-btn-bg Dunkelblau), weil Buch-Themes --d-btn-bg umfärben (Gespenst: gelb = wie „Weiter“) */
.lk-pruefen,.lk-pruefen.btn{background:linear-gradient(135deg,#8DB7FF,#7FD6F2);color:#0E1F4D;border:0;box-shadow:0 8px 22px rgba(100,170,255,.35);font-size:17px}
.lk-stapel-an .hero{padding:10px 12px;gap:12px;flex-wrap:nowrap}
.lk-stapel-an .hero .kopf{flex:0 0 120px!important;max-width:130px!important;width:22%!important}
.lk-stapel-an .hero h1{font-size:24px}
.lk-stapel-an .hero p{font-size:16px!important}
.lk-stapel-an .hero .bubble{font-size:15px;margin-top:6px;padding:6px 10px}
.lk-stapel-an .niveau{margin-top:8px}
.lk-stapel-an .lk-stapelbox{margin-top:10px}
@media (max-width:600px){.lk-stapel-an .hero{flex-wrap:wrap}.lk-stapel-an .hero .kopf{display:none}}
/* Hochformat (Roman, 07.11.2026): Aufgabenkachel um 30 % schmaler und mittig (Handy unter 600 px volle Breite) */
@media (min-width:600px) and (max-width:899px){
  .lk-stapel-an .lk-stapelbox{width:70%;max-width:none}
}