*{box-sizing:border-box}body{margin:0;font:18px/1.55 Inter,Arial,sans-serif;color:var(--d-ink)}
#app{max-width:1000px;margin:auto;padding:24px 20px 64px}h1,h2,h3{font-family:'Baloo 2',Inter,sans-serif;line-height:1.25}h1{font-size:clamp(1.7rem,4vw,2.3rem);margin:0}h2{font-size:1.5rem}h3{font-size:1.35rem}
a{color:var(--d-ink)}button,a,summary{-webkit-tap-highlight-color:transparent}button,input{font:inherit;-webkit-appearance:none}button,summary,.wk-top a{min-height:44px;min-width:44px}button{padding:10px 16px;border:1px solid var(--d-line);border-radius:12px;background:var(--d-surface-2);color:var(--d-ink);cursor:pointer;margin:4px 8px 4px 0;white-space:normal;overflow-wrap:anywhere}button:hover{border-color:var(--d-honig)}button:disabled{opacity:.55;cursor:default}input{font-size:18px;max-width:100%}.wk-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.wk-top h1{flex:1 1 300px}.wk-top a{display:inline-flex;align-items:center}.wk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:20px;margin:24px 0}.wk-card{background:var(--d-card-bg);border:var(--d-card-border);border-radius:22px;padding:20px;box-shadow:var(--d-card-shadow);margin-bottom:16px;min-width:0}.wk-card h2{margin-top:0}.wk-level{display:block;width:100%;text-align:left}.wk-primary{border:2px solid var(--d-honig)}.wk-status,.wk-note{font-size:.92rem;color:var(--d-ink-soft)}.wk-feedback{min-height:1.6em}.wk-stations{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.wk-stations button{flex:1 1 140px;margin:0;font-size:.95rem}.wk-stations [aria-current]{border:2px solid var(--d-honig)}details{margin:12px 0 20px}summary{display:flex;align-items:center;cursor:pointer;color:var(--d-honig)}summary::before{content:'▸';margin-right:10px}details[open] summary::before{content:'▾'}#lw-kopf{max-width:1000px;margin:auto;padding:12px 20px 0}.wk-task .fm-au-opt{height:auto}.wk-task .fm-zu-zonen{min-width:0}.wk-task [class*='fm-']{overflow-wrap:anywhere}@media(max-width:500px){#app{padding:16px 12px 40px}.wk-card{padding:14px}.wk-stations button{flex-basis:42%}}html[data-bewegung=aus] *,html[data-bewegung=aus] *::before,html[data-bewegung=aus] *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
/* Die gemeinsamen Formatfarben verwenden eine transparente Fläche; Prüfen braucht einen deckenden Kontrast. */
.wk-task .fm-zu-pruefen,.wk-task .fm-lu-pruefen,.wk-task .fm-au-pruefen{background:var(--d-honig);border-color:var(--d-honig);color:var(--d-bg)}
.st-knopf{min-width:44px;min-height:44px}.st-knopf svg{width:44px;height:44px}

/* Kandy bleibt als ursprüngliche Figur am Bildschirmrand; Tipps öffnen nur auf Wunsch. */
#app{padding-bottom:130px}
.wk-kandy{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:50}
.wk-kandy-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:76px;min-height:92px;margin:0;padding:5px;border:2px solid var(--d-honig);border-radius:20px;background:var(--d-surface);box-shadow:var(--d-small-shadow);font-size:14px;font-weight:700;line-height:1.2}
.wk-kandy-button img{display:block;width:60px;height:60px;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.wk-kandy-bubble{position:absolute;right:0;bottom:106px;width:min(330px,calc(100vw - 24px));max-height:55vh;overflow:auto;padding:18px;background:var(--d-surface);border:2px solid var(--d-honig);border-radius:20px;box-shadow:var(--d-card-shadow);font-size:1rem}
.wk-kandy-bubble[hidden]{display:none}.wk-kandy-bubble h3{margin:0 0 8px}.wk-kandy-bubble p{margin:0 0 12px}.wk-kandy-close{margin:0;min-height:44px}

/* Interaktionsflächen sind schon vor der ersten Berührung erkennbar.
   Zustandsfarben der gemeinsamen Formate bleiben unverändert. */
.wk-level,.wk-stations button{border:2px solid var(--d-nr-ink)}
.wk-stations [aria-current]{border-color:var(--d-honig);background:var(--d-honig-bg)}
.wk-task .fm-au-opt:not(.is-gewaehlt):not(.is-richtig):not(.is-falsch),
.wk-task .fm-zu-chip:not(.is-gewaehlt):not(.is-richtig):not(.is-falsch):not(.is-fehlt),
.wk-task .fm-lu-feld:not(.is-richtig):not(.is-falsch):not(.is-aufgeloest):not(.is-leer) .fm-lu-eingabe{
 background:var(--d-bg);border-color:var(--d-nr-ink)
}
.wk-task .fm-lu-eingabe::placeholder{color:var(--d-ink-soft);opacity:1}
.wk-task .fm-au-opt::before{content:'';display:block;flex:0 0 20px;width:20px;height:20px;border:2px solid currentColor;border-radius:50%}
.wk-task .fm-au-opt.is-gewaehlt::before{background:currentColor;box-shadow:inset 0 0 0 4px var(--d-bg)}
.wk-task .fm-zu-zonenkopf{margin:8px;padding:10px;border:2px solid var(--d-nr-ink);border-radius:12px;background:var(--d-bg);color:var(--d-ink)}
.wk-task .fm-zu-zonenkopf::after{content:'Hier einordnen';display:block;font-size:.85em;font-weight:400;color:var(--d-ink-soft)}
#app button:focus-visible,#app input:focus-visible{outline:3px solid var(--d-honig);outline-offset:3px}

/* U02: das zu schreibende Wort steht im Vordergrund; Begleittext bleibt ruhig. */
.wk-dhie .fm-lu-prompt{font-size:1.5rem;line-height:1.35;font-weight:700;margin:0 0 6px}
.wk-dhie .fm-lu-kontext,.wk-dhie .fm-lu>.fm-lu-hinweis{font-size:1rem;line-height:1.5;font-style:italic;color:var(--d-ink-soft);opacity:1}
.wk-dhie .fm-lu-kontext{margin:0 0 10px}
.wk-dhie .fm-lu-feld{margin-bottom:24px}
.wk-dhie .wk-letter{font-family:'Baloo 2',Inter,sans-serif;font-size:1.12em;font-weight:600}

/* WK1 (Roman, 06.11.2026): Stationen als Kartenstapel. Kopf in einer Zeile, Aufgabenpfad als Übersicht,
   eine Aufgabe je Karte, Rückmeldung je Aufgabe. Bewegt werden nur transform/opacity (Web Animations im Host). */
body{overflow-x:clip}
.wk-top-station{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.wk-top-station h2{margin:0;font-size:1.3rem;min-width:0}
.wk-top-station button{margin:0}
.wk-top-knoepfe{display:flex;align-items:center;gap:4px}
.wk-top-knoepfe button{margin:0}

#app .wk-stations{margin:12px 0 16px}
.wk-status{margin:10px 0 0}
.wk-buehne{padding:18px 20px 20px}
.wk-buehne-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:6px}
.wk-buehne-kopf h3{margin:0;font-size:1.25rem}
.wk-auftrag{margin:0 0 14px;color:var(--d-ink-soft);font-size:1rem}
.wk-pfad-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.wk-pfad{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;list-style:none;margin:0;padding:0}
.wk-pfad li{display:flex;align-items:center}
.wk-verbinder{display:block;width:14px;height:4px;margin:0 2px;border-radius:2px;background:rgba(169,196,255,.3);overflow:hidden}
.wk-verbinder-fuellung{display:block;height:100%;background:var(--d-ok);transform:scaleX(0);transform-origin:left center}
.wk-pfad li.ist-weg .wk-verbinder-fuellung{transform:none}
.wk-pfad-text{margin:0;font-size:.92rem;color:var(--d-ink-soft);font-variant-numeric:tabular-nums}
#app .wk-stein{position:relative;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);width:44px;height:44px;min-width:44px;margin:0;padding:0;border-radius:50%;border:3px solid var(--d-nr-ink);background:var(--d-bg);color:var(--d-ink);font:700 17px/1 'Baloo 2',Inter,sans-serif;display:grid;place-items:center;transition:background-color .2s,border-color .2s,box-shadow .2s}
#app .wk-stein[aria-current=step]{border-color:var(--d-honig);box-shadow:0 0 0 5px rgba(255,201,94,.22)}
#app .wk-stein.ist-richtig{border-color:var(--d-ok);color:#0E2A1A}
#app .wk-stein.ist-hilfe{border-color:var(--d-amber);color:var(--d-amber)}
/* Füllung: ein gerundetes Quadrat steigt beim Lösen drehend auf und wirkt wie Flüssigkeit (Animation im Host). */
.wk-fuellung{position:absolute;left:-30%;top:-30%;width:160%;height:160%;border-radius:38%;background:var(--d-ok);transform:translateY(115%);z-index:-1;pointer-events:none}
#app .wk-stein.ist-richtig .wk-fuellung{transform:none}
#app .wk-stein.ist-hilfe .wk-fuellung{transform:none;background:var(--d-amber-bg)}
.wk-stein-text{position:relative;display:block}
#app .wk-ziel{border-style:dashed;color:var(--d-ink-soft)}
#app .wk-ziel.ist-offen{border-style:solid;border-color:var(--d-honig);color:var(--d-honig)}
#app .wk-ziel:disabled{opacity:1}

/* Stapel: dahinterliegende Kartenkanten zeigen, wie viele Aufgaben noch offen sind. */
.wk-stapel{position:relative;display:grid;padding-bottom:22px}
.wk-stapel>*{grid-area:1/1;min-width:0}
.wk-geist{border-radius:22px;border:3px solid rgba(169,196,255,.4);background:#132857;pointer-events:none;transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .5s}
.wk-geist-1{transform:translateY(12px) scale(.965);opacity:.9}
.wk-geist-2{transform:translateY(24px) scale(.93);opacity:.55}
.wk-geist-1.ist-nachruecken{transform:none;opacity:1}
.wk-geist-2.ist-nachruecken{transform:translateY(12px) scale(.965);opacity:.9}
.wk-karte{position:relative;z-index:1;background:#142B66;border:3px solid rgba(169,196,255,.4);border-radius:22px;padding:20px 22px 18px;outline:none;will-change:transform,opacity}
.wk-karte:focus-visible{outline:3px solid var(--d-honig);outline-offset:3px}
.wk-karte{transition:border-color .5s ease}
.wk-karte.ist-erledigt{border-color:var(--d-ok)}
.wk-tastatur-halter{position:fixed;left:0;top:40%;width:1px;height:1px;padding:0;border:0;opacity:0;font-size:16px;pointer-events:none}

/* Das Format sitzt randlos in der Karte; die Karte ist die Aufgabe. */
.wk-karte .fm-au-liste{margin:0}
.wk-karte .fm-au-item,.wk-karte .fm-au-item.is-ok,.wk-karte .fm-au-item.is-bad,.wk-karte .fm-au-item.is-fehlt{border:0;background:none;padding:0;margin:0;box-shadow:none}
.wk-karte .fm-au-frage{font-size:1.2rem;margin-bottom:14px}
.wk-karte .fm-au-optionen{gap:10px}
.wk-karte .fm-au-opt{min-height:56px;font-size:1.15rem}
.wk-karte .fm-au-opt.is-falsch{text-decoration:line-through;text-decoration-color:var(--d-amber)}
.wk-karte .fm-au-rueck{margin:14px 0 0;padding:12px 16px;border-radius:14px;font-weight:500;color:var(--d-ink)}
.wk-karte .fm-au-rueck.is-ok{background:var(--d-ok-bg);border-left:6px solid var(--d-ok)}
.wk-karte .fm-au-rueck.is-bad{background:var(--d-amber-bg);border-left:6px solid var(--d-amber)}
.wk-karte .fm-au-ergebnis:empty,.wk-karte .fm-lu-ergebnis:empty{display:none}
.wk-karte .fm-lu-feld{margin-bottom:0}
.wk-karte .fm-au-pruefen,.wk-karte .fm-lu-pruefen{min-height:52px;padding:10px 26px;border-radius:999px;font-weight:700;margin-top:16px}
.wk-karte.ist-erledigt .fm-au-pruefen,.wk-karte.ist-erledigt .fm-lu-pruefen{display:none}
.wk-karte-aktionen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.wk-karte-aktionen:has(>:not([hidden])){margin-top:14px}
#app .wk-karte-weiter,#app .wk-abschluss .wk-weiter{min-height:52px;padding:10px 28px;border:0;border-radius:999px;background:var(--d-honig);color:var(--d-bg);font-weight:700;font-size:1.1rem;box-shadow:0 6px 18px rgba(255,201,94,.25);margin:0}
#app .wk-karte-weiter:active,#app .wk-abschluss .wk-weiter:active{transform:scale(.97)}
.wk-mit-hilfe{margin:12px 0 0;color:var(--d-amber);font-weight:600}
.wk-mit-hilfe[hidden]{display:none}

.wk-abschluss{text-align:center;padding:24px 22px}
.wk-abschluss h3{font-size:1.6rem;margin:0 0 6px}
.wk-abschluss-text{color:var(--d-ink-soft);margin:0 0 16px}
.wk-quittung{list-style:none;margin:0 auto 18px;padding:0;max-width:620px;text-align:left;display:grid;gap:8px}
.wk-quittung li{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(11,26,69,.6)}
.wk-mini{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;background:var(--d-ok);color:#0E2A1A}
.wk-quittung li.ist-hilfe .wk-mini{background:var(--d-amber-bg);color:var(--d-amber);border:2px solid var(--d-amber)}
.wk-erkl{color:var(--d-ink-soft);font-size:.95rem}
@media(max-width:600px){.wk-top-station{grid-template-columns:auto minmax(0,1fr)}.wk-top-station .wk-top-knoepfe{grid-column:1/-1;justify-self:start}.wk-verbinder{width:6px}.wk-karte{padding:16px 14px}.wk-buehne{padding:14px}}
.wk-top-station h2:focus{outline:none}
.wk-task>.wk-feedback{margin:14px 0 6px}
.wk-task>.wk-weiter{margin:4px 0 0}

/* Roman, 06.11.2026: Bewegung trotz Geräteeinstellung. design-basis.css verkürzt bei „Bewegung reduzieren“ alle Übergänge;
   für die Werkstatt-Karten wird das hier mit höherer Spezifität zurückgenommen. Die Kartenflüge laufen per Web Animations und sind davon nicht betroffen. */
@media(prefers-reduced-motion:reduce){html:not([data-bewegung=aus]) #app .wk-geist{transition-duration:.5s!important}html:not([data-bewegung=aus]) #app .wk-karte{transition-duration:.5s!important}}
/* Ton-Knopf als Lautsprecher-Symbol (Roman, 06.11.2026) */
#app .lw-ton{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:1px solid rgba(255,255,255,.24);border-radius:12px;background:rgba(255,255,255,.14);color:var(--d-ink,#EEF3FF);box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}#app .lw-ton[aria-pressed="false"]{background:transparent;border-color:transparent;color:var(--d-ink-soft,#B3C3EC)}#app .lw-ton svg{width:22px;height:22px}#app .lw-ton[aria-pressed="true"] .lw-ton-strich,#app .lw-ton[aria-pressed="false"] .lw-ton-wellen{display:none}