/* easykompass – Design-System
   Zwei Stimmungen: ruhig für Eltern/Redaktion, verspielt für Kinder (body.kids).
   Keine externen Schriften/Bilder (CSP + Datenschutz); Grafiken sind Inline-SVG-Symbole (templates/_icons.html). */

:root{
  --ink:#1f2350;--muted:#4a5078;--bg:#fff8ec;--paper:#fff;--line:#e0d8c6;--line-strong:#8b86a8;
  --primary:#3a47d5;--primary-dark:#2630a3;--sun:#ffc93c;--sun-dark:#e0a400;
  --de:#e8505b;--de-soft:#ffe5e3;--ma:#2478c9;--ma-soft:#dcedff;
  --mint:#168a6c;--success:#e2f6ed;--error:#fff0ee;--neutral:#eceefb;--surface:#f4f1e8;
  --radius:1rem;--shadow:0 .25rem 0 rgba(31,35,80,.12),0 .8rem 1.6rem rgba(31,35,80,.08);
  --font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.55;-webkit-text-size-adjust:100%}
body{margin:0;font-size:1.05rem;min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(circle at 12% 8%,rgba(255,201,60,.22) 0 6rem,transparent 6.1rem),
  radial-gradient(circle at 92% 30%,rgba(58,71,213,.08) 0 9rem,transparent 9.1rem),var(--bg)}
main{flex:1}
svg{flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Grundlayout ---------- */
.skip-link{position:absolute;left:.5rem;top:-6rem;background:#fff;padding:.75rem;z-index:20;border-radius:.5rem}
.skip-link:focus{top:.5rem}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--paper);border-bottom:4px solid var(--sun);padding:.7rem max(1rem,calc((100% - 65rem)/2));position:sticky;top:0;z-index:10}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.4rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand-logo{width:2.6rem;height:2.6rem}
nav{display:flex;gap:.4rem;flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:2rem;font-weight:800;color:var(--ink);text-decoration:none}
nav a:hover{background:var(--neutral)}
nav a svg{width:1.6rem;height:1.6rem;color:var(--primary)}
main,footer{width:100%;max-width:65rem;margin:0 auto;padding:1.5rem}
footer{color:var(--muted);font-size:.95rem;text-align:center}
h1{font-size:clamp(2rem,5.5vw,3.1rem);line-height:1.1;margin:.2em 0 .45em;letter-spacing:-.02em}
h2{line-height:1.25;margin-top:1.6em}
a{color:#1d3fae;text-underline-offset:.15em}
a:hover{color:var(--primary-dark)}
p{margin:.5em 0}

/* ---------- Formulare & Buttons ---------- */
button,.button,input,select,textarea{font:inherit;min-height:46px;border-radius:.8rem}
input,select,textarea{border:2px solid var(--line-strong);padding:.6rem .8rem;width:100%;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:3px solid var(--primary);padding:.5rem 1.1rem;background:#fff;color:var(--primary);font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--primary);transition:transform .08s,box-shadow .08s}
button:hover,.button:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--primary)}
button:active,.button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--primary)}
.primary{background:var(--primary);color:#fff;border-color:var(--primary-dark);box-shadow:0 4px 0 var(--primary-dark)}
.primary:hover{background:var(--primary-dark);color:#fff;box-shadow:0 5px 0 #171d73}
.go{background:var(--sun);color:var(--ink);border-color:var(--sun-dark);box-shadow:0 4px 0 var(--sun-dark)}
.go:hover{background:#ffd45f;color:var(--ink);box-shadow:0 5px 0 var(--sun-dark)}
.big{font-size:1.2rem;padding:.7rem 1.6rem;min-height:56px;border-radius:1rem}
button svg,.button svg{width:1.5rem;height:1.5rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.hotspot-region:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--sun)}
label{display:block;font-weight:700;margin-top:.8rem}
.hint{color:var(--muted);font-size:.92rem;margin:.2rem 0 .8rem}
.eyebrow{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-size:.82rem;font-weight:800;margin:0}
.actions,.page-heading{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.actions.center{justify-content:center}
.page-heading{justify-content:space-between}
.narrow{max-width:36rem;margin:auto}
.narrow form,.panel{background:var(--paper);border:2px solid var(--line);padding:clamp(1rem,3vw,1.5rem);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.25rem 1rem}
.form-grid .hint,.form-grid button{align-self:end}
textarea{min-height:8rem}
table{border-collapse:collapse;width:100%;background:var(--paper);border-radius:.6rem;overflow:hidden}
th,td{border:1px solid var(--line);padding:.6rem;text-align:left}
th{background:var(--neutral)}

/* ---------- Hinweise ---------- */
.notice,.alert,.empty,.status-neutral{padding:.9rem 1.1rem;border-radius:.8rem;background:var(--neutral)}
.notice.small{font-size:.92rem;color:var(--muted);background:transparent;padding:.4rem 0;text-align:center}
.alert{border-left:6px solid #40638d}
.alert.success{background:var(--success);border-left-color:var(--mint)}
.alert.error{background:var(--error);border-left-color:#b3261e}
.empty{display:flex;align-items:center;gap:1rem;background:var(--paper);border:3px dashed var(--line-strong)}
.empty p{margin:0}
.empty-icon{width:3.5rem;height:3.5rem;color:var(--primary)}
.back-link{display:inline-block;font-weight:800;text-decoration:none;padding:.4rem .2rem}
.back-link:hover{text-decoration:underline}

/* ---------- Karten (Eltern/Redaktion) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.profile-card,.task-card,article{border:2px solid var(--line);border-radius:var(--radius);padding:1.2rem;background:var(--paper)}
.profile-card h3{font-size:1.4rem;margin:.35rem 0}
.avatar{display:inline-block;background:var(--neutral);padding:.35rem .7rem;border-radius:2rem;font-weight:800}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));align-items:end;gap:.75rem;background:var(--paper);padding:1rem;border-radius:var(--radius);border:2px solid var(--line)}
.banner-preview{border:3px dashed var(--sun-dark)}
.hero{padding:clamp(1rem,5vw,3rem) 0}
.hero>p,.hero-copy>p{max-width:44rem;font-size:1.2rem}

/* ================================================================
   KINDERBEREICH (body.kids)
   ================================================================ */
.kids{background:
  radial-gradient(circle at 8% 12%,rgba(255,201,60,.35) 0 4.5rem,transparent 4.6rem),
  radial-gradient(circle at 96% 22%,rgba(232,80,91,.14) 0 7rem,transparent 7.1rem),
  radial-gradient(circle at 90% 85%,rgba(36,120,201,.14) 0 8rem,transparent 8.1rem),var(--bg)}
.kids h1{font-size:clamp(1.9rem,5vw,2.6rem)}
.kids nav{gap:.3rem}
.kids nav a{background:var(--neutral);border:3px solid transparent}
.kids nav a:hover,.kids nav a:focus-visible{background:#fff;border-color:var(--primary)}
.kids .site-header{border-bottom-width:6px;border-radius:0 0 1.5rem 1.5rem}

/* Maskottchen + Sprechblase */
.fox{width:7rem;height:7rem;flex:none;filter:drop-shadow(0 .3rem 0 rgba(31,35,80,.12))}
.hero-kids{display:flex;align-items:center;gap:1.2rem;margin:.5rem 0 1rem}
.speech{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:1.4rem;padding:.7rem 1.3rem;box-shadow:0 5px 0 var(--ink);flex:1}
.speech::before{content:"";position:absolute;left:-.85rem;top:50%;width:1.3rem;height:1.3rem;background:var(--paper);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.speech h1{margin:0}
.speech p{margin:.2rem 0 0;color:var(--muted);font-weight:600}
@media(prefers-reduced-motion:no-preference){.hero-kids .fox{animation:bob 3.2s ease-in-out infinite}}
@keyframes bob{50%{transform:translateY(-.4rem) rotate(-2deg)}}

/* Weg-Sprache im Lernbereich */
.exercise-links{font-size:.95rem;font-weight:700}
.stars{display:flex;gap:.1rem;margin:0}
.star{width:2rem;height:2rem;color:#e8e6f2}
.star.is-on{color:var(--sun)}
.stars .star{width:2.2rem;height:2.2rem}
progress{appearance:none;-webkit-appearance:none;width:100%;height:1.1rem;border:0;border-radius:2rem;overflow:hidden;background:#e8e6f2;accent-color:var(--primary)}
progress::-webkit-progress-bar{background:#e8e6f2;border-radius:2rem}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--primary),#6c79ff);border-radius:2rem}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--primary),#6c79ff);border-radius:2rem}

/* Filter einklappbar */
.filter-box{margin:1rem 0}
.filter-box summary{display:inline-block;cursor:pointer;font-weight:800;color:var(--primary);padding:.5rem 1rem;border-radius:2rem;background:var(--paper);border:2px solid var(--line)}
.filter-box[open] summary{margin-bottom:.7rem}

/* Lesetexte (Stimuli) über Aufgabengruppen */
.stimulus-box{margin:1.25rem 0;border:3px solid var(--ink);border-radius:1.4rem;background:var(--paper);box-shadow:0 6px 0 var(--ink)}
.stimulus-box summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:800;font-size:1.15rem;padding:.9rem 1.2rem;list-style:none}
.stimulus-box summary::-webkit-details-marker{display:none}
.stimulus-box summary::after{content:"";margin-left:auto;flex:none;width:.8rem;height:.8rem;border-right:3px solid var(--primary);border-bottom:3px solid var(--primary);transform:rotate(45deg);transition:transform .15s}
.stimulus-box[open] summary::after{transform:rotate(-135deg)}
.stimulus-box summary svg{width:1.5rem;height:1.5rem;color:var(--primary)}
.stimulus-body{padding:0 1.2rem 1.1rem}
.stimulus-figure{margin:.2rem 0 .8rem}
.stimulus-figure img{max-width:100%;height:auto;border-radius:.8rem;border:2px solid var(--line)}
.stimulus-figure figcaption{font-size:.95rem;color:var(--muted);margin-top:.3rem}
.stimulus-text{white-space:pre-line;line-height:1.65;font-size:1.12rem;max-height:45vh;overflow-y:auto;padding-right:.4rem;margin:0}

/* Aufgabenkarte */
.task-list{display:grid;gap:1.25rem;margin:1.25rem 0}
.task-card{border:3px solid var(--ink);border-radius:1.4rem;padding:clamp(1rem,3vw,1.7rem);box-shadow:0 6px 0 var(--ink);position:relative;scroll-margin-top:6rem}
.task-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.6rem}
.task-head h2{margin:0;font-size:1.3rem}
.task-badge{width:3.2rem;height:3.2rem;color:var(--primary);background:var(--neutral);border-radius:1rem;padding:.5rem}
.level{display:flex;align-items:center;gap:.5rem;text-transform:none;letter-spacing:0}
.level-stars{display:inline-flex}
.level-stars .star{width:1.2rem;height:1.2rem}
.task-card .prompt{font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;line-height:1.4;background:#fffbe9;border-left:6px solid var(--sun);border-radius:.6rem;padding:.7rem 1rem}
.prompt-row{display:flex;gap:.6rem;align-items:flex-start}
.prompt-row .prompt{flex:1;margin:0}
.task-card .task-context{border:2px dashed var(--line-strong);background:var(--surface);border-radius:.6rem;padding:.6rem 1rem;margin:0 0 .9rem}
.task-card .task-context p{margin:0;font-size:1.05rem;font-weight:400;line-height:1.5}
.speech-btn{display:inline-grid;place-content:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border:3px solid var(--primary);border-radius:50%;background:#fff;color:var(--primary);cursor:pointer}
.speech-btn:hover{background:#f6f7ff}
.speech-btn svg{width:1.5rem;height:1.5rem}
.speech-btn[hidden]{display:none}
.speech-btn.is-speaking{background:var(--primary);color:#fff}
.task-card fieldset{border:0;padding:0;margin:1rem 0}
.task-card legend{font-weight:800;margin-bottom:.4rem;color:var(--muted)}
.task-card button.primary{margin-top:.6rem}
.preanswer-hint{margin-top:1rem;padding-top:1rem;border-top:2px solid var(--line)}
.preanswer-hint form{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.preanswer-hint .hint{flex:1 1 16rem;margin:0}
.preanswer-hint .hint-complete{display:flex;align-items:center;gap:.5rem}
.preanswer-hint .hint-complete svg{width:1.5rem;height:1.5rem}

/* Antwortmöglichkeiten als große Tipp-Karten */
.choice-row{display:flex;align-items:stretch;gap:.65rem;margin:.55rem 0;border-radius:1rem}
.choice-row .choice{flex:1;margin:0}
.choice-row .speech-btn{align-self:center}
.choice-row:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.choice{display:flex;align-items:center;gap:.85rem;border:3px solid var(--line);background:#fff;padding:.35rem 1rem;margin:.55rem 0;border-radius:1rem;font-weight:700;min-height:56px;cursor:pointer;transition:border-color .1s,background .1s,transform .1s}
.choice:hover{border-color:var(--primary);background:#f6f7ff}
.choice:has(input:checked){border-color:var(--primary);background:#e8eaff;box-shadow:0 4px 0 var(--primary);transform:translateY(-2px)}
.choice input{appearance:none;-webkit-appearance:none;display:grid;place-content:center;flex:none;width:2.75rem;height:2.75rem;min-width:44px;min-height:44px;padding:0;border:3px solid var(--primary);border-radius:50%;background:#fff;transform:none}
.choice input[type="checkbox"]{border-radius:.45rem}
.choice input::after{content:"";width:.8rem;height:.8rem;border-radius:50%;background:var(--primary);transform:scale(0);transition:transform .12s}
.choice input[type="checkbox"]::after{border-radius:.15rem}
.choice input:checked::after{transform:scale(1)}
.task-card label[for]{font-size:1.05rem}
.task-card input[type="text"]{font-size:1.3rem;font-weight:700;border-width:3px;border-radius:1rem;min-height:58px;max-width:22rem}
.task-card select{border-width:3px;border-radius:1rem;font-weight:700}

/* Hotspots */
.hotspot{margin:1rem 0}
.hotspot-svg{display:block;width:100%;max-width:44rem;height:auto;border:3px solid var(--line);border-radius:1rem;background:#fff}
.hotspot-region{cursor:pointer;fill:rgba(58,71,213,.1);stroke:var(--primary);stroke-width:3;stroke-dasharray:8 6;transition:fill .15s}
.hotspot-region:hover,.hotspot-region:focus-visible{fill:rgba(255,201,60,.4);stroke:#b07a00}
.hotspot-region.is-selected{fill:rgba(22,138,108,.4);stroke:var(--mint);stroke-dasharray:none;stroke-width:5}
.hotspot-fallback{margin-top:.8rem}

/* Kindgerechte Formate: Sortieren, Zuordnen, Lückentext im Satz */
.sorting,.matching{margin:1rem 0}
.format-status{min-height:1.4rem;margin:.4rem 0;font-weight:700}
.sort-cards{display:flex;flex-direction:column;gap:.7rem;list-style:none;padding:0;margin:.8rem 0;max-width:42rem}
.sort-card{position:relative;display:flex;align-items:stretch;gap:.55rem;width:100%;border-radius:1rem;cursor:grab}
.sort-card:active{cursor:grabbing}
.sort-card-item{flex:1;min-height:58px;padding:.65rem 1.1rem;border:3px solid var(--primary);border-radius:1rem;background:#fff;font-weight:700;font-size:1.1rem;text-align:left;cursor:grab;box-shadow:0 4px 0 var(--line);touch-action:none}
.sort-card-item:hover{border-color:var(--ink)}
.sort-card-item[aria-pressed="true"]{background:#e8eaff;border-color:var(--ink);box-shadow:0 4px 0 var(--ink);transform:translateY(-2px)}
.sort-controls{display:flex;gap:.35rem}
.sort-move{min-width:52px;min-height:58px;padding:.3rem .7rem;border:3px solid var(--line);border-radius:1rem;background:var(--paper);font-weight:800;font-size:1.2rem;cursor:pointer}
.sort-move:hover{border-color:var(--primary)}
.sort-move:disabled{opacity:.35;cursor:not-allowed}
.sort-card.is-dragging{opacity:.55}
.sort-card.is-dragging .sort-card-item{box-shadow:none;cursor:grabbing}
.sort-card.is-drop-before::before,.sort-card.is-drop-after::after{content:"";position:absolute;left:0;right:0;height:5px;border-radius:5px;background:var(--primary);pointer-events:none}
.sort-card.is-drop-before::before{top:-.6rem}
.sort-card.is-drop-after::after{bottom:-.6rem}
.sorting-fallback{margin-top:.8rem}
.match-board{margin:.8rem 0}
.match-targets,.match-chips{list-style:none;padding:0;margin:.4rem 0;display:flex;flex-wrap:wrap;gap:.6rem}
.match-target{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.match-target-key{font-weight:800;font-size:1.1rem}
.match-target-pick{min-height:52px;padding:.4rem 1rem;border:3px dashed var(--primary);border-radius:1rem;background:#fff;cursor:pointer}
.match-target-pick.is-assigned{border-style:solid;border-color:var(--ink);background:#e8eaff;font-weight:700;box-shadow:0 4px 0 var(--ink)}
.match-target-pick.is-drag-over{border-style:solid;border-color:var(--sun-dark);background:#fff3c4;box-shadow:0 0 0 4px var(--sun)}
.match-chip{min-height:52px;padding:.4rem 1.1rem;border:3px solid var(--primary);border-radius:1.4rem;background:#fff;font-weight:700;cursor:grab;box-shadow:0 4px 0 var(--line);touch-action:none}
.match-chip.is-dragging{opacity:.65;cursor:grabbing;transform:scale(.98)}
.match-chip:hover{border-color:var(--ink)}
.match-chip.is-selected{background:#fff3c4;border-color:var(--ink);box-shadow:0 4px 0 var(--ink);transform:translateY(-2px)}
.match-chip.is-assigned{background:#e8eaff}
.match-chip.is-assigned::after{content:" ✓";font-weight:800}
.matching-fallback{margin-top:.8rem}
.cloze-text{font-size:1.2rem;line-height:2.1;font-weight:600}
.task-card .cloze-text input[type="text"]{display:inline-block;width:auto;min-width:7ch;max-width:16ch;min-height:52px;margin:0 .25rem;padding:0 .5rem;font-size:1.2rem;text-align:center;vertical-align:baseline}

/* Rückmeldung */
.feedback{position:relative;display:flex;align-items:center;gap:1.1rem;border:3px solid var(--ink);border-radius:1.4rem;padding:1rem 1.3rem;margin:1rem 0;background:var(--neutral);box-shadow:0 6px 0 var(--ink);overflow:hidden;scroll-margin-top:6rem}
.feedback-success{background:var(--success)}
.feedback-error{background:var(--error)}
.feedback-body{flex:1;min-width:0}
.feedback-title{font-size:1.25rem;margin:.1rem 0}
.feedback-explanation{display:flex;gap:.6rem;align-items:flex-start;background:rgba(255,255,255,.75);padding:.6rem .8rem;border-radius:.8rem}
.feedback-explanation svg{width:1.8rem;height:1.8rem;margin-top:.1rem}
.feedback-hint{display:flex;gap:.6rem;align-items:flex-start;background:rgba(255,255,255,.75);padding:.6rem .8rem;border-radius:.8rem}
.feedback-hint p{display:flex;gap:.6rem;align-items:flex-start;margin:0}
.feedback-hint svg{width:1.8rem;height:1.8rem;margin-top:.1rem;flex-shrink:0}
.feedback:focus{outline:none}
.feedback:focus-visible{box-shadow:0 0 0 7px var(--sun),0 6px 0 var(--ink)}
@media(prefers-reduced-motion:no-preference){.feedback-success .fox{animation:hop .7s ease-out 1}.feedback{animation:pop .35s ease-out 1}}
@keyframes hop{30%{transform:translateY(-1rem) rotate(-6deg)}60%{transform:translateY(0)}80%{transform:translateY(-.3rem)}}
@keyframes pop{from{transform:scale(.96);opacity:0}}

/* Konfetti (rein dekorativ, deterministisch, kein Zufallsbelohnungs-Mechanismus) */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-1rem;width:.6rem;height:1rem;border-radius:.15rem;opacity:0}
.confetti i:nth-child(4n+1){background:var(--sun)}
.confetti i:nth-child(4n+2){background:var(--de)}
.confetti i:nth-child(4n+3){background:var(--ma)}
.confetti i:nth-child(4n){background:var(--mint)}
.confetti i:nth-child(1){left:4%}.confetti i:nth-child(2){left:12%}.confetti i:nth-child(3){left:21%}.confetti i:nth-child(4){left:30%}
.confetti i:nth-child(5){left:40%}.confetti i:nth-child(6){left:49%}.confetti i:nth-child(7){left:58%}.confetti i:nth-child(8){left:67%}
.confetti i:nth-child(9){left:76%}.confetti i:nth-child(10){left:84%}.confetti i:nth-child(11){left:91%}.confetti i:nth-child(12){left:97%}
@media(prefers-reduced-motion:no-preference){
  .confetti i{animation:fall 1.8s ease-in 1 both}
  .confetti i:nth-child(odd){animation-delay:.15s;animation-duration:2.1s}
  .confetti i:nth-child(3n){animation-delay:.3s}
}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(9rem) rotate(380deg)}}

/* ---------- Dein Kompass-Weg: Wegleiste, Wegkarte, Etappe ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wegleiste{display:flex;align-items:center;gap:.8rem;background:var(--paper);border:3px solid var(--line);border-radius:var(--radius);padding:.45rem 1rem;margin:.8rem 0;box-shadow:var(--shadow)}
.wegleiste-icon{width:1.9rem;height:1.9rem;color:var(--primary);flex:none}
.wegleiste-text{margin:0;font-weight:700;white-space:nowrap}
.wegleiste-trail{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;flex:1;min-width:0}
.wegleiste-trail li{position:relative;flex:1;min-width:.55rem;height:1.6rem;display:flex;align-items:center;justify-content:flex-end}
.wegleiste-trail li::before{content:"";position:absolute;left:0;right:0;top:50%;height:.35rem;margin-top:-.175rem;background:#e0dcee;border-radius:1rem}
.wegleiste-trail li.is-done::before{background:var(--mint)}
.wegleiste-trail li svg{position:relative;width:1.05rem;height:1.05rem;color:var(--mint);background:var(--bg);border-radius:50%}
.wegleiste-trail li .fox{background:none;border-radius:0;width:1.5rem;height:1.5rem;margin:-.2rem 0}
.wegleiste-trail li.is-here{min-width:2.3rem} /* Fuchs hat immer eigenen Platz und überlappt nicht den Text */
.wegleiste-trail li.is-here .fox{position:relative;width:2.3rem;height:2.3rem;margin:-.55rem 0;z-index:1}
.wegleiste-link{font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:.2rem .4rem}
.wegkarte{display:flex;gap:1.2rem;align-items:center;background:var(--paper);border:3px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin:.8rem 0;box-shadow:var(--shadow)}
.wegkarte-svg{flex:1;min-width:0;width:100%;height:auto}
.weg-abschnitt{fill:none;stroke:#c9c4dd;stroke-width:6;stroke-linecap:round;stroke-dasharray:10 8}
.weg-abschnitt.is-done{stroke:var(--mint);stroke-dasharray:none}
.weg-station circle{fill:#fff;stroke:var(--line-strong);stroke-width:3}
.weg-station.is-done circle{stroke:var(--mint)}
.weg-station.is-here circle{stroke:var(--ink);stroke-width:4}
.weg-station-label{font-size:11px;font-weight:800;fill:var(--ink)}
.weg-haken{color:var(--mint)}
.weg-fox{filter:drop-shadow(0 2px 0 rgba(31,35,80,.18))}
.wegkarte-text{flex:none;max-width:17rem;margin:0}
.wegkarte-text>p{margin:.15rem 0}
.positionszeile{font-weight:800;margin:.4rem 0}
.weg-satz{font-weight:700;background:var(--paper);border:3px dashed var(--line-strong);border-radius:1rem;padding:.6rem 1rem}
@media(max-width:46rem){
  .wegkarte{flex-direction:column;align-items:stretch;gap:.6rem}
  .wegkarte-text{max-width:none}
}
@media(max-width:38rem){
  .wegleiste{gap:.35rem;padding:.3rem .45rem;margin:.6rem 0;border-width:2px}
  .wegleiste-icon{width:1.4rem;height:1.4rem}
  .wegleiste-text{font-size:.85rem;white-space:nowrap;flex:none}
  .wegleiste-link{font-size:.85rem;padding:.1rem .15rem;flex:none}
  .wegleiste-trail li{min-width:3px;height:1.3rem}
  .wegleiste-trail li:nth-child(even){display:none} /* Platz sparend, Zahl bleibt in aria-label */
  .wegleiste-trail li.is-here{min-width:1.5rem}
  .wegleiste-trail li svg{width:.8rem;height:.8rem}
  .wegleiste-trail li .fox{width:1.1rem;height:1.1rem;margin:-.1rem 0}
  .wegleiste-trail li.is-here .fox{width:1.5rem;height:1.5rem;margin:-.3rem 0}
}
@media(forced-colors:active){
  .weg-abschnitt{stroke:CanvasText}
  .weg-station circle{fill:Canvas}
  .weg-station.is-done circle,.weg-station.is-here circle{stroke:Highlight}
}

/* Übungsrunde: Weg mit Stationen */
.trail{display:flex;align-items:center;gap:0;list-style:none;margin:1rem 0 1.2rem;padding:.8rem 0}
.trail li{position:relative;flex:1;min-width:0;height:2.4rem;display:flex;align-items:center;justify-content:flex-end}
.trail li::before{content:"";position:absolute;left:0;right:0;top:50%;height:.5rem;margin-top:-.25rem;background:#e0dcee;border-radius:1rem}
.trail li.is-done::before{background:var(--mint)}
.trail li svg{position:relative;width:2.1rem;height:2.1rem;color:var(--mint);background:var(--bg);border-radius:50%}
.trail li .fox{background:none;border-radius:0}
.trail li.is-here .fox{position:relative;width:3.6rem;height:3.6rem;margin:-.6rem 0;z-index:1}
.trail li:last-child svg:not(.fox){color:var(--de)}
.celebrate{position:relative;overflow:hidden;text-align:center;padding:1.6rem 1rem;border-radius:1.4rem;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink)}
.trophy{width:8rem;height:8rem}
.big-text{font-size:1.4rem}

/* Themenstapel */
.deck-fieldset{border:0;padding:0;margin:0}
.deck-fieldset legend{font-weight:800;font-size:1.2rem;margin-bottom:.6rem}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1rem}
.deck-de{--tone:var(--de);--tone-soft:var(--de-soft)}
.deck-ma{--tone:var(--ma);--tone-soft:var(--ma-soft)}
.deck-card{position:relative;display:flex;align-items:center;gap:1rem;border:3px solid var(--ink);border-radius:1.2rem;padding:1rem 3.2rem 1rem 1rem;background:var(--tone-soft);font-weight:600;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.deck-card:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--ink)}
.deck-card input[type="checkbox"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;min-height:0}
.deck-card:focus-within{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--sun),0 5px 0 var(--ink)}
.deck-icon{width:4rem;height:4rem;padding:.6rem;border-radius:1.1rem;background:#fff;color:var(--tone);border:3px solid var(--tone)}
.deck-text{display:block;min-width:0}
.deck-title{display:block;font-size:1.2rem;font-weight:800;line-height:1.25;margin:.15rem 0 .1rem}
.deck-meta{display:block;color:var(--muted);font-size:.95rem}
.deck-tick{position:absolute;right:.9rem;top:50%;width:2rem;height:2rem;margin-top:-1rem;color:var(--mint);opacity:0;transform:scale(.4);transition:opacity .12s,transform .15s}
.deck-card:has(input:checked){background:#fff;border-color:var(--mint);box-shadow:0 5px 0 var(--mint)}
.deck-card:has(input:checked) .deck-tick{opacity:1;transform:scale(1)}
.deck-card[aria-disabled="true"]{opacity:.6;background:var(--surface);cursor:not-allowed;box-shadow:none}
.deck-card[aria-disabled="true"]:hover{transform:none}
.deck-card[aria-disabled="true"] input{cursor:not-allowed}
.start-row{margin-top:1.4rem;text-align:center}

/* Kompetenzkarte */
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.map-card{border:3px solid var(--ink);background:var(--tone-soft);box-shadow:0 5px 0 var(--ink)}
.map-head{display:flex;align-items:center;gap:.8rem}
.map-head h2{margin:0;font-size:1.1rem}
.gauge{position:relative;width:6.5rem;height:6.5rem;margin:.6rem auto}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:4.2;stroke-linecap:round}
.gauge-track{stroke:#fff}
.gauge-fill{stroke:var(--tone)}
.gauge-value{position:absolute;inset:0;display:grid;place-items:center;font-size:1.4rem;font-weight:900}
.map-card progress{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.map-card .status-neutral{background:rgba(255,255,255,.7)}

/* Abzeichen */
.badge-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}
.badge{text-align:center;border:3px solid var(--line);border-radius:1.2rem;padding:1rem;background:#fff}
.badge.is-earned{border-color:var(--sun-dark);background:#fffbe9;box-shadow:0 5px 0 var(--sun-dark)}
.badge[aria-disabled="true"]{background:var(--surface)}
.badge .medal{width:5rem;height:6rem}
.badge h3{margin:.3rem 0}
.status-earned{font-weight:800;color:var(--mint)}
.invites{padding-left:0;list-style:none;display:grid;gap:.6rem}
.invites li{background:var(--paper);border:3px solid var(--line);border-radius:1rem;padding:.7rem 1rem .7rem 3rem;position:relative;font-weight:700}
.invites li::before{content:"";position:absolute;left:.9rem;top:50%;width:1.4rem;height:1.4rem;margin-top:-.7rem;background:var(--sun);border:3px solid var(--ink);border-radius:50%}

/* Kinder-Login */
.login-card{text-align:center}
.login-card .fox{width:8rem;height:8rem}
.login-card form{text-align:left}

/* ---------- Startseite ---------- */
.landing{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:2rem}
.hero-art{position:relative;display:grid;place-items:center;min-height:16rem;background:var(--ma-soft);border:3px solid var(--ink);border-radius:50% 50% 45% 55%/55% 45% 55% 45%;box-shadow:0 8px 0 var(--ink)}
.hero-art .fox{width:min(70%,13rem);height:auto}
.float{position:absolute;width:3.4rem;height:3.4rem;padding:.6rem;border-radius:1rem;background:#fff;border:3px solid var(--ink);color:var(--primary)}
.f1{top:6%;right:12%;color:var(--sun-dark)}.f2{top:18%;left:2%;color:var(--de)}.f3{bottom:8%;left:10%}.f4{bottom:14%;right:4%;color:var(--mint)}
@media(prefers-reduced-motion:no-preference){.float{animation:bob 4s ease-in-out infinite}.f2{animation-delay:-1s}.f3{animation-delay:-2s}.f4{animation-delay:-3s}}
.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;margin:1rem 0 2rem}
.feature-row article{text-align:center;border:3px solid var(--ink);border-radius:1.2rem;box-shadow:0 5px 0 var(--ink)}
.feature-row article svg{width:3.6rem;height:3.6rem;color:var(--primary)}
.feature-row h2{margin:.3rem 0;font-size:1.2rem}
.feature-row p{margin:0;color:var(--muted)}

/* ---------- Responsive ---------- */
@media(max-width:46rem){
  .landing{grid-template-columns:1fr}
  .hero-art{min-height:13rem;order:-1}
}
@media(max-width:38rem){
  .site-header{align-items:flex-start;flex-direction:column;gap:.4rem}
  .site-header nav{margin-left:-.5rem}
  main,footer{padding:1rem}
  .actions>*{width:100%}
  .page-heading{align-items:flex-start}
  .task-card{padding:1rem}
  .fox{width:5rem;height:5rem}
  .hero-kids{gap:.9rem}
  .feedback{flex-direction:column;text-align:center}
  .feedback-explanation{text-align:left}
  /* Kinder: Navigation als feste Leiste unten – gut mit dem Daumen erreichbar */
  .kids .site-header{position:static;flex-direction:row;align-items:center;border-radius:0 0 1.2rem 1.2rem}
  .kids .site-header nav{position:fixed;left:0;right:0;bottom:0;z-index:10;margin:0;justify-content:space-around;flex-wrap:nowrap;background:var(--paper);border-top:4px solid var(--sun);padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom))}
  .kids .site-header nav a{flex-direction:column;gap:0;font-size:.85rem;padding:.3rem .6rem;border-radius:1rem;flex:1;text-align:center}
  .kids nav:empty{display:none}
  .kids main{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
  .kids footer{padding-bottom:5.5rem}
  .login-card .fox{width:6rem;height:6rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.match-chip.is-dragging,.sort-card.is-dragging{transform:none}}
@media(forced-colors:active){.choice:has(input:checked),.deck-card:has(input:checked),.sort-card-item[aria-pressed="true"],.sort-card.is-dragging,.sort-card.is-drop-before,.sort-card.is-drop-after,.match-chip.is-selected,.match-chip.is-assigned,.match-target-pick.is-assigned,.match-target-pick.is-drag-over{outline:3px solid Highlight}.sort-card.is-drop-before::before,.sort-card.is-drop-after::after{background:Highlight}}
@media(max-width:38rem){.sort-card{gap:.4rem}.sort-move{min-width:48px;min-height:48px}.sort-card-item{min-height:104px}}

/* ---------- Erklärfilme ---------- */
.explainer{margin:1rem 0}
.explainer-stage{display:block;width:100%;height:auto;border:3px solid var(--ink);border-radius:1.4rem;box-shadow:0 6px 0 var(--ink);background:#fffbe9}
.explainer-stage text{font-family:var(--font);font-weight:900;text-anchor:middle;fill:var(--ink)}
.stage-bg{fill:#fffbe9}
.stage-title{font-size:56px;fill:var(--primary)}
.col-chip{stroke:var(--ink);stroke-width:3}
.col-h{fill:#ffd9b8}.col-z{fill:var(--ma-soft)}.col-e{fill:#d6f5e9}
.col-label{font-size:22px}
.digit{font-size:52px}
.digit.result{fill:var(--mint)}
.carry{font-size:24px;fill:var(--de)!important}
.sum-line{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.col-hl{fill:rgba(255,201,60,.35);stroke:var(--sun-dark);stroke-width:3;stroke-dasharray:8 6}
.result-hl{fill:rgba(22,138,108,.14);stroke:var(--mint);stroke-width:3}
.calc rect{fill:#fff;stroke:var(--ink);stroke-width:3}
.calc text{font-size:26px}
.calc-ok rect{fill:var(--success);stroke:var(--mint)}
.spark{color:var(--sun)}
.rule-arrow{fill:none;stroke:var(--de);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.rule-text{font-size:24px;fill:var(--de)!important}
/* Ohne JS: Endbild zeigen (alles mit Enddatum ausblenden) */
.explainer [data-until]{display:none}
.explainer.is-enhanced [data-until]{display:inline}
.explainer.is-enhanced [data-from],.explainer.is-enhanced [data-until]{opacity:0}
.explainer.is-ready [data-from],.explainer.is-ready [data-until]{transition:opacity .45s ease}
.explainer.is-enhanced .is-shown{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .explainer.is-enhanced .digit.is-shown,.explainer.is-enhanced .carry.is-shown,.explainer.is-enhanced .calc.is-shown{animation:pop-in .5s cubic-bezier(.3,1.6,.6,1) both;transform-box:fill-box;transform-origin:center}
  .explainer.is-enhanced .carry.is-shown{animation-name:hop-in}
  .explainer.is-playing .spark{animation:twinkle 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes pop-in{from{transform:scale(.2)}}
@keyframes hop-in{from{transform:translate(70px,-40px) scale(.5)}}
@keyframes twinkle{50%{transform:scale(1.3) rotate(15deg)}}
.explainer-caption{min-height:4.6rem;margin:1rem 0 .6rem;padding:.8rem 1.1rem;font-size:clamp(1.1rem,2.6vw,1.3rem);font-weight:700;background:var(--paper);border:3px solid var(--ink);border-radius:1.2rem;box-shadow:0 4px 0 var(--ink)}
.explainer-caption:empty{display:none}
.explainer-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.explainer-controls[hidden],.explainer-controls [hidden]{display:none}
.explainer-controls progress{flex:1;min-width:8rem}
.explainer-counter{font-weight:800;color:var(--muted);min-width:3.5rem;text-align:right}
.explainer-transcript{margin-top:1rem}
.explainer-transcript summary{cursor:pointer;font-weight:800;color:var(--primary)}
.explainer-steps{padding-left:1.4rem}
.explainer-steps li{margin:.35rem 0}
.film-card{text-decoration:none;color:var(--ink)}

/* ---------- PWA: Offline-Hinweis & Bildschirm-Zifferntastatur (Issue 10) ---------- */
.offline-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:30;max-width:min(92vw,34rem);padding:.7rem 1.2rem;border-radius:2rem;background:var(--ink);color:#fff;font-weight:800;font-size:.95rem;text-align:center;box-shadow:var(--shadow)}
.kids .offline-banner{bottom:calc(5.5rem + env(safe-area-inset-bottom))}
.offline-banner[hidden]{display:none}
.numpad{position:fixed;left:50%;transform:translateX(-50%);bottom:.6rem;z-index:40;display:grid;grid-template-columns:repeat(3,minmax(3.2rem,1fr));gap:.45rem;width:min(94vw,20rem);padding:.7rem;background:var(--paper);border:3px solid var(--ink);border-radius:1.2rem;box-shadow:0 6px 0 var(--ink)}
.numpad[hidden]{display:none}
.numpad-key{min-width:48px;min-height:48px;font-size:1.5rem;font-weight:900;border-radius:.9rem}
.numpad-done{grid-column:1/-1;background:var(--sun);color:var(--ink);border-color:var(--sun-dark);box-shadow:0 4px 0 var(--sun-dark);font-size:1.05rem}
.numpad-back{font-size:1.3rem}
.numpad-toggle{margin-top:.4rem;font-size:.95rem;min-height:44px}
@media(max-width:38rem){
  /* Über der festen Kinder-Navigationsleiste anordnen */
  .kids .numpad{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  .kids .numpad-toggle{margin-bottom:.4rem}
}

/* ---------- Lernentwicklung pro Woche & Arbeitsblatt-Druckansicht (Issue 11) ---------- */
.trend-chart{margin:1.2rem 0 .4rem}
.trend-chart svg{display:block;width:100%;max-width:22rem;height:auto;background:var(--paper);border:2px solid var(--line);border-radius:var(--radius)}
.trend-chart figcaption{font-weight:800;margin-top:.3rem}
#verlauf table{max-width:36rem}
.invite{font-weight:700}
.worksheet-meta{font-weight:700;letter-spacing:.02em}
.worksheet-tasks>li{margin:1rem 0}
.worksheet-prompt{font-weight:700;margin-bottom:.3rem}
.worksheet-options{list-style:upper-alpha;margin:.2rem 0 0 1.4rem;padding:0}
.worksheet-options li{margin:.15rem 0}
.print-solutions{margin-top:1rem;border:2px dashed var(--line-strong);border-radius:var(--radius);padding:.4rem 1rem;background:var(--paper)}
.print-solutions summary{cursor:pointer;font-weight:800;color:var(--primary);padding:.6rem 0}
@media print{
  /* Ausdruck = nur Arbeitsblatt (Seite 1) und Lösungen (Seite 2). Nur auf der
     Eltern-Fortschrittsseite (body.print-progress); andere Seiten bleiben unverändert. */
  body.print-progress{background:#fff}
  body.print-progress .site-header,body.print-progress .skip-link,body.print-progress footer,body.print-progress .no-print{display:none!important}
  body.print-progress main>:not(.print-area){display:none}
  body.print-progress main{padding:0}
  body.print-progress .print-area{display:block}
  body.print-progress #arbeitsblatt{border:none}
  /* geschlossenes <details> im Ausdruck öffnen, damit die Lösungen sichtbar sind */
  body.print-progress .print-solutions{border:none;padding:0}
  body.print-progress .print-solutions>summary{display:none}
  body.print-progress .print-solutions>*:not(summary){display:block}
  body.print-progress .print-solutions::details-content{content-visibility:visible}
  body.print-progress .print-solutions{break-before:page;page-break-before:always}
}

/* Navigation innerhalb eines Probetests */
.test-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.75rem;margin:1.25rem 0}
.test-nav>*:last-child{justify-self:end}
.test-position{font-weight:800;text-align:center}
.test-nav-disabled{display:inline-flex;align-items:center;min-height:46px;padding:.5rem 1.1rem;border:3px solid var(--line-strong);border-radius:.8rem;color:var(--muted);background:var(--surface);font-weight:800}
@media(max-width:38rem){.test-nav{grid-template-columns:1fr 1fr}.test-position{grid-column:1/-1;grid-row:1}.test-nav>*:last-child{justify-self:stretch}.test-nav .button,.test-nav-disabled{width:100%}}

/* Zuordnen/Sortieren mit JS: Brett ersetzt die Auswahllisten; Zeilen untereinander */
.matching.is-enhanced .matching-fallback,.sorting.is-enhanced .sorting-fallback{display:none}
.matching .match-board{display:none}
.matching.is-enhanced .match-board{display:block}
.match-targets{flex-direction:column;align-items:stretch;gap:.7rem}
.match-target{flex-wrap:nowrap;gap:.9rem;padding:.4rem .6rem;border-radius:1rem;background:#fff;border:2px solid var(--line)}
.match-target-key{font-size:1.25rem}
.match-target-pick{min-width:5.5rem;font-size:1.15rem;font-weight:800;color:var(--primary)}
.match-chips{margin-top:1rem}