/* Lernhelden – Anschauungen (js/ui/anschauungen): Zehnerfeld, Hunderterfeld, Malfeld, Stellenwerttafel, Bruch, Geld
   und der Rechenweg „So geht’s“. Farben nur aus Tokens (--anschauung-*, --uhr-*, --muenze-*).
   Bewegung: Bögen und Zeiger über Übergänge mit Dauer-Tokens – bei wenig Bewegung nur kurz. */

/* ---------- Felder ---------- */
.task-visual-feld{padding:4px 0}
.feld-svg{display:block;width:auto;max-width:100%;height:auto;overflow:visible}
.zehnerfeld-svg{width:min(260px,70vw)}
.hunderterfeld-svg{width:min(230px,62vw)}
.malfeld-svg{width:min(240px,64vw)}
.stellenwert-svg{width:min(240px,64vw)}
.bruch-svg{width:min(300px,76vw)}
.bruch-svg.bruch-kreis{width:min(160px,45vw)}
.geld-svg{width:auto;max-width:min(520px,92vw);height:clamp(56px,14vw,76px)}
.feld-rahmen{fill:var(--panel);stroke:var(--anschauung-linie);stroke-width:2}
.feld-zelle{fill:none;stroke:var(--anschauung-linie);stroke-width:1}
.feld-fuenf{stroke:var(--ink);stroke-width:2}
.plaettchen-a{fill:var(--anschauung-a)}
.plaettchen-b{fill:var(--anschauung-b)}
.plaettchen-weg{fill:var(--anschauung-leer);stroke:var(--anschauung-a);stroke-width:2}
.plaettchen-strich{stroke:var(--anschauung-a);stroke-width:3;stroke-linecap:round}
.hunderter-a{fill:var(--anschauung-a);stroke:none}
.hunderter-b{fill:var(--anschauung-b);stroke:none}
.hunderter-leer{fill:var(--anschauung-leer);stroke:none}
.malfeld-punkt{fill:var(--anschauung-linie);transition:fill var(--dauer-mittel)}
.malfeld-gruppe-0 .malfeld-punkt{fill:var(--anschauung-a)}
.malfeld-gruppe-1 .malfeld-punkt{fill:var(--anschauung-b)}
.stelle-kopf{font-size:15px;font-weight:900;text-anchor:middle;fill:var(--ink);font-family:system-ui,sans-serif}
.stelle-einer{fill:var(--anschauung-b)}
.stelle-buendel{fill:var(--anschauung-a)}
.bruch-teil{fill:var(--panel);stroke:var(--ink);stroke-width:2}
.bruch-teil.voll{fill:var(--anschauung-b)}
/* Geld */
.geld-muenze circle{stroke:rgba(0,0,0,.25);stroke-width:2}
.geld-euro circle{fill:var(--muenze-euro)}
.geld-gold circle{fill:var(--muenze-gold)}
.geld-kupfer circle{fill:var(--muenze-kupfer)}
.geld-schein rect{fill:var(--schein);stroke:rgba(0,0,0,.25);stroke-width:2}
.geld-svg text{font-size:13px;font-weight:900;text-anchor:middle;fill:var(--geld-ink);font-family:system-ui,sans-serif}

/* ---------- Rechenweg „So geht’s“ (js/ui/anschauungen/rechenweg.js) ---------- */
.weg-box{margin:10px 0 0;display:grid;gap:8px;justify-items:start}
.weg-inhalt{width:100%}
.rechenweg{display:grid;gap:10px;padding:14px;border-radius:var(--radius-sm);background:var(--info-soft);border:1px solid var(--info-line);color:var(--ink)}
.rechenweg-strategie{margin:0;font-weight:900;color:var(--info-ink)}
.rechenweg-bild{display:flex;justify-content:center;overflow-x:auto}
.rw-svg{display:block;height:auto;max-width:100%}
.rechenstrich-svg{width:min(100%,520px)}
.rechenweg-bild .clock-svg{width:min(190px,50vw)}
.rw-achse{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.rw-strich{stroke:var(--ink);stroke-width:2}
.rw-zahl{font-size:15px;font-weight:900;text-anchor:middle;fill:var(--ink);font-family:system-ui,sans-serif}
.rw-sprung{font-size:14px;font-weight:900;text-anchor:middle;fill:var(--anschauung-b);font-family:system-ui,sans-serif}
.rw-bogen{fill:none;stroke:var(--anschauung-b);stroke-width:3;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;
  transition:stroke-dashoffset calc(var(--dauer-lang) * 1.6) var(--kurve-standard)}
.rw-spitze{fill:none;stroke:var(--anschauung-b);stroke-width:3;stroke-linecap:round}
.rw-schritt .rw-spitze,.rw-schritt .rw-sprung,.rw-marke{opacity:0;transition:opacity var(--dauer-mittel) var(--kurve-standard)}
.rw-schritt.an .rw-bogen{stroke-dashoffset:0}
.rw-schritt.an .rw-spitze,.rw-schritt.an .rw-sprung{opacity:1;transition-delay:calc(var(--dauer-lang) * 1.2)}
.rw-marke.an{opacity:1;transition-delay:calc(var(--dauer-lang) * 1.2)}
.rw-zeiger{transform-origin:60px 60px;transition:transform calc(var(--dauer-lang) * 2.2) var(--kurve-standard)}
.rw-feld .malfeld-gruppe .malfeld-punkt{fill:var(--anschauung-linie)}
.rw-feld .malfeld-gruppe.rw-aktiv.malfeld-gruppe-0 .malfeld-punkt{fill:var(--anschauung-a)}
.rw-feld .malfeld-gruppe.rw-aktiv.malfeld-gruppe-1 .malfeld-punkt{fill:var(--anschauung-b)}
.rechenweg-schritte{margin:0;padding-left:1.4em;display:grid;gap:6px}
.rechenweg-schritt{padding:4px 0}
.rechenweg-schritt.aktuell .rw-rechnung{color:var(--ink)}
.rw-rechnung{display:block;font-weight:900;font-size:1.15rem;font-variant-numeric:tabular-nums}
.rw-erklaerung{display:block;color:var(--muted);font-weight:700}
.rechenweg-knoepfe .btn{min-height:44px}

/* ---------- Silbenbögen im Wissensbuch beim Vorlesen ---------- */
.silbe.spricht::after{border-color:var(--anschauung-a);animation:bw-einrasten var(--dauer-lang) var(--kurve-feder)}
.silbe.spricht{color:var(--anschauung-a)}