/* Lernhelden – Aufgabenformate: Raster, Würfel, Spiegeln, Zahlenstrahl, Zuordnen, Sortieren, Stellenwerttabelle. */
/* ---------- 8. Aufgabenformate ---------- */
/* Kästchenraster (Anschauung) und Würfelbauwerke */
.raster{display:grid;grid-template-columns:repeat(var(--spalten),minmax(34px,48px));gap:3px;justify-content:center}
.raster-zelle{aspect-ratio:1;border:1px solid var(--line);border-radius:4px;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900}
.raster-zelle.voll{background:var(--brand);border-color:var(--brand)}
.raster-zelle.text{background:var(--surface)}
.wuerfel-svg{width:min(260px,70vw);height:auto}
.w-vorne{fill:var(--wuerfel-vorne);stroke:var(--wuerfel-kante);stroke-width:1.5}
.w-oben{fill:var(--wuerfel-oben);stroke:var(--wuerfel-kante);stroke-width:1.5}
.w-seite{fill:var(--wuerfel-seite);stroke:var(--wuerfel-kante);stroke-width:1.5}
/* Spiegeln: antippbare Kästchen, rote Spiegelachse */
.spiegel-raster{display:grid;grid-template-columns:repeat(var(--spalten),minmax(40px,56px));gap:0;justify-content:center;margin:6px auto}
.spiegel-zelle{aspect-ratio:1;min-width:40px;min-height:40px;border:1px solid var(--line);background:var(--panel);border-radius:0;padding:0}
.spiegel-zelle.fest.voll{background:var(--brand)}
.spiegel-zelle.frei{cursor:pointer}
.spiegel-zelle.frei[aria-pressed="true"]{background:var(--brand-ink);box-shadow:inset 0 0 0 3px var(--panel)}
.achse-senkrecht .spiegel-zelle.vor-achse{border-right:4px solid var(--spiegel-achse)}
.achse-senkrecht .spiegel-zelle.nach-achse{border-left:4px solid var(--spiegel-achse)}
.achse-waagerecht .spiegel-zelle.vor-achse{border-bottom:4px solid var(--spiegel-achse)}
.achse-waagerecht .spiegel-zelle.nach-achse{border-top:4px solid var(--spiegel-achse)}
.spiegel-zelle.correct{outline:4px solid var(--good);outline-offset:-4px}
.spiegel-zelle.incorrect{outline:4px solid var(--bad);outline-offset:-4px}
.spiegel-zelle.fehlt{outline:4px dashed var(--good);outline-offset:-4px}

.answer-area.tense-table-wrap{display:block;overflow-x:auto}
table.tense-table{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--panel)}
table.tense-table th{background:var(--soft);color:var(--chip-ink);font-weight:900;text-align:left;padding:12px 14px;border-bottom:2px solid var(--line)}
table.tense-table td{padding:12px;border-right:1px solid var(--line)}
table.tense-table td:last-child,table.tense-table th:last-child{border-right:0}
table.tense-table .answer-input{font-size:1.05rem;min-width:180px}

.numberline-wrap{display:grid;gap:10px}
.numberline-svg{overflow-x:auto}
.nl-svg{width:100%;max-width:620px;height:auto;display:block;margin:0 auto}
.nl-axis{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.nl-tick{stroke:var(--muted);stroke-width:1.5}
.nl-tick.major{stroke:var(--ink);stroke-width:2.5}
.nl-num{font-size:13px;font-weight:800;fill:var(--ink);text-anchor:middle}
.nl-mark{fill:var(--brand-ink)}
.nl-gap{font-size:22px;font-weight:900;fill:var(--brand-ink);text-anchor:middle}
/* Die Bahn deckt sich mit der Achse im SVG: 34 von 620 Einheiten Rand = 5.48 % */
.numberline-track{max-width:620px;margin:0 auto;padding:0 5.48%;width:100%}
.numberline-controls{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}
.numberline-step{min-width:56px;font-size:1.6rem;line-height:1;padding:6px 14px}
.numberline-range{display:block;width:100%;height:44px;padding:0;margin:0;accent-color:var(--brand-ink)}
.numberline-out{font-variant-numeric:tabular-nums;font-weight:900;font-size:1.6rem;min-width:3.5ch;text-align:center}
.numberline-range.correct{accent-color:var(--good)}
.numberline-range.incorrect{accent-color:var(--bad)}

.match-list{display:grid;gap:10px}
.match-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.match-left{font-weight:900;font-size:1.05rem}
.match-select{font-size:1rem}
.match-select.correct{border-color:var(--good);background:var(--good-soft)}
.match-select.incorrect{border-color:var(--bad);background:var(--bad-soft)}

.order-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.order-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
  border:2px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;background:var(--panel)}
.order-nr{font-weight:900;color:var(--muted);min-width:2ch}
.order-text{font-weight:800}
.order-move{min-width:48px;min-height:44px;padding:4px 10px;font-size:1.1rem}
.order-move:disabled{opacity:.3}
.order-item.correct{border-color:var(--good);background:var(--good-soft)}
.order-item.incorrect{border-color:var(--bad);background:var(--bad-soft)}

.pv-wrap{overflow-x:auto}
.pv-table{border-collapse:collapse;margin:0 auto;font-variant-numeric:tabular-nums}
.pv-table th,.pv-table td{border:1px solid var(--line);padding:4px;text-align:center;min-width:48px}
.pv-head th{background:var(--soft);font-size:.8rem;font-weight:900;color:var(--muted)}
.pv-label{background:var(--soft);font-weight:900;min-width:36px}
.pv-digit{font-size:1.4rem;font-weight:800}
.pv-carry td{background:var(--surface)}
.pv-carry-input,.pv-input{width:44px;min-height:44px;text-align:center;border:0;background:transparent;font-variant-numeric:tabular-nums}
.pv-carry-input{font-size:max(16px,.9rem);color:var(--muted)}      /* unter 16 px zoomt iOS beim Antippen */
.pv-input{font-size:1.4rem;font-weight:900;color:var(--ink)}
.pv-result td{border-top:3px double var(--ink)}
.pv-input.correct{background:var(--good-soft);color:var(--good)}
.pv-input.incorrect{background:var(--bad-soft);color:var(--bad)}

.cloze-text{font-size:1.15rem;line-height:2.2;font-weight:650;margin:0}
.cloze-input,.cloze-select{display:inline-block;width:auto;padding:4px 8px;margin:0 3px;font-size:1.05rem;min-height:40px;vertical-align:baseline}
.cloze-select{min-width:7ch}
.kind-live{margin:8px 0 0;font-size:.82rem;color:var(--muted);font-weight:700;min-height:1.2em}

/* ─── Bedienbare Anschauungen (seit 8.4) ─────────────────────
   Nur Tippen: jedes Teil ist ein button (≥ 44 px). Farben aus den Anschauungs-Tokens. */
.kind-bedienbar{display:grid;justify-items:center;gap:10px;max-width:100%}

/* Plättchen im Zehnerfeld */
.pl-felder{display:grid;gap:12px}
.pl-feld{display:grid;grid-template-columns:repeat(5,minmax(44px,58px));border:3px solid var(--anschauung-linie);border-radius:10px;background:var(--panel);overflow:hidden}
.pl-platz{display:grid;place-items:center;aspect-ratio:1;min-height:44px;margin:0;padding:0;border:0;border-right:1px solid var(--anschauung-linie);border-bottom:1px solid var(--anschauung-linie);background:transparent;border-radius:0;touch-action:manipulation}
.pl-platz:nth-child(5n){border-right:0}
.pl-platz:nth-child(n+6){border-bottom:0}
.pl-platz.frei{cursor:pointer}
.pl-platz.frei:focus-visible{outline:3px solid var(--brand);outline-offset:-5px}
.pl-stein{display:block;width:68%;aspect-ratio:1;border-radius:50%}
.pl-stein-a{background:var(--anschauung-a)}
.pl-stein-b{background:var(--anschauung-b)}
.pl-wrap.correct .pl-feld{border-color:var(--good)}
.pl-wrap.incorrect .pl-feld{border-color:var(--bad)}

/* Uhr stellen */
.us-uhr-box{position:relative;width:min(240px,62vw)}
.us-uhr{display:block;width:100%;height:auto}
.us-zeiger{transform-origin:60px 60px;transform-box:view-box;transition:transform calc(var(--dauer-lang) * 1.4) var(--kurve-standard)}
.us-ohne-uebergang .us-zeiger{transition:none}
.us-soll{position:absolute;inset:0;pointer-events:none}
.us-soll .clock-face,.us-soll .clock-tick,.us-soll .clock-tick-major,.us-soll .clock-num,.us-soll .clock-center{display:none}
.us-soll .us-zeiger{stroke:var(--good);stroke-dasharray:4 3;transition:none}
.us-steuerung{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.us-reihe{display:flex;align-items:center;gap:8px}
.us-name{min-width:7.5em;text-align:center;font-weight:800}
.us-knopf{min-width:52px;min-height:52px;padding:0 10px;font-size:1.5rem;line-height:1}
.us-wrap.correct .clock-face{stroke:var(--good)}
.us-wrap.incorrect .us-uhr:not(.us-soll) .clock-face{stroke:var(--bad)}

/* Stellenwerte legen und bündeln */
.sw-tafel{display:grid;grid-template-columns:repeat(var(--stellen),minmax(96px,150px));max-width:100%;border:2px solid var(--anschauung-linie);border-radius:10px;background:var(--panel);overflow:hidden}
.sw-spalte{display:grid;grid-template-rows:auto 1fr auto;border-right:2px solid var(--anschauung-linie)}
.sw-spalte:last-child{border-right:0}
.sw-kopf{padding:6px;text-align:center;font-weight:900;background:var(--soft);border-bottom:2px solid var(--anschauung-linie)}
.sw-feld{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:4px;min-height:150px;padding:8px 6px}
.sw-spalte.sw-voll .sw-feld{outline:3px dashed var(--anschauung-a);outline-offset:-5px}
.sw-teil{display:block;border-radius:2px}
.sw-e{width:14px;height:14px;background:var(--anschauung-b)}
.sw-z{width:9px;height:60px;background:var(--anschauung-a);background-image:repeating-linear-gradient(to bottom,transparent 0 5px,rgba(0,0,0,.2) 5px 6px)}
.sw-h{width:36px;height:36px;background:var(--anschauung-a);background-image:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.2) 3px 3.6px),repeating-linear-gradient(to right,transparent 0 3px,rgba(0,0,0,.2) 3px 3.6px)}
.sw-knoepfe{display:flex;justify-content:center;gap:6px;padding:6px;border-top:1px solid var(--line)}
.sw-knopf{min-width:44px;min-height:44px;padding:0 8px;font-size:1.3rem;line-height:1}
.sw-buendeln{justify-content:center}
.sw-buendel-knopf[aria-disabled="true"]{opacity:.55}
.sw-hinweis{margin:0;color:var(--muted);font-weight:700;text-align:center}
.sw-wrap.correct .sw-tafel{border-color:var(--good)}
.sw-wrap.incorrect .sw-tafel{border-color:var(--bad)}

/* Brüche färben */
.bf-streifen{display:grid;grid-template-columns:repeat(var(--teile),minmax(0,1fr));width:min(100%,calc(var(--teile) * 64px));height:72px;border:3px solid var(--ink);border-radius:6px;overflow:hidden}
.bf-teil{margin:0;padding:0;border:0;background:var(--panel);color:var(--ink);cursor:pointer;touch-action:manipulation}
.bf-streifen .bf-teil{border-right:2px solid var(--ink);border-radius:0}
.bf-streifen .bf-teil:last-child{border-right:0}
.bf-teil[aria-pressed="true"]{background-color:var(--anschauung-b)}
.bf-teil:focus-visible{outline:none;background-image:repeating-linear-gradient(45deg,currentColor 0 2px,transparent 2px 9px)}
.bf-kreis{position:relative;width:min(240px,64vw);aspect-ratio:1;max-width:100%}
.bf-kreis .bf-teil{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.bf-linien{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bf-rand{fill:none;stroke:var(--ink);stroke-width:2.5}
.bf-linie{stroke:var(--ink);stroke-width:1.8}
.bf-wrap.correct .bf-streifen{border-color:var(--good)}
.bf-wrap.correct .bf-rand{stroke:var(--good)}
.bf-wrap.incorrect .bf-streifen{border-color:var(--bad)}
.bf-wrap.incorrect .bf-rand{stroke:var(--bad)}
@media (hover:hover) and (pointer:fine){
  .pl-platz.frei:hover:not(:disabled),.bf-teil:hover:not(:disabled):not([aria-pressed="true"]){background-color:var(--soft)}
}
/* Stand der bedienbaren Formate nur für Screenreader: sichtbar würde er das Zählen und Ablesen abnehmen */
.kind-bedienbar .kind-live{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sw-meldung{margin:0;min-height:1.2em;color:var(--muted);font-weight:700;font-size:.9rem;text-align:center}