/* Do-matik – Mathe-Bereich: mathe/index.html (Stufen), stufe.html (Kapitel), thema.html (Teil A Einstieg nur Lehrkräfte,
Teil B Erkunden, Teil C Übung), Übungsrahmen js/mathe-ueben.js, Applets js/applets/mathe/, Beamer-Modus. Akzent: --fach-mathe */
.mathe-seite { padding-block: var(--space-6) var(--space-8); }
/* ---------- Stufenseite: Kapitelkarten (js/mathe.js stufe(), Nutzer-Wahl 2026-10-07 „Variante A“) ----------
Ruhig (Design-Optimierung 2026-10-11): neutrale Flächen und Rahmen wie die Informatik-Stufenseiten; das Teilgebiet zeigt
allein sein Icon. Blau = Aktion/Fortschritt, keine Teilgebietsfarben (Violett = Episch, Gold = XP, Pink = Fehler). */
/* Design System 2.0 (2026-10-19): Kopf direkt auf der Seite, Kapitelkarten bleiben (Nutzer-Wahl „Variante A“), Themen darin ohne eigene Kästen */
.mst-kopf { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 0 0 1.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1.6rem; }
.mst-kopf .eyebrow { margin: 0 0 0.2rem; }
.mst-kopf h1 { margin: 0 0 0.3rem; }
.mst-kopf p { margin: 0; }
.mst-ring { --p: 0; width: 108px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center;
background: radial-gradient(closest-side, var(--color-surface) 76%, transparent 78% 100%), conic-gradient(var(--progress) calc(var(--p) * 1%), var(--color-border) 0); }
.mst-ring strong { display: block; font-family: var(--font-label); font-weight: 500; font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.mst-ring small { display: block; max-width: 5.2rem; margin-top: 0.15rem; font-size: var(--fs-meta); line-height: 1.15; color: var(--text-muted); }
.mst-ring { width: 120px; }
.mst-sprung { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.mst-sprung a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem 0.25rem 0.3rem; border-radius: var(--radius-pill); font-size: var(--fs-meta); font-weight: var(--fw-halbfett);
text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--surface-2); }
.mst-sprung a:hover { border-color: var(--primary); color: var(--text); }
.mst-sprung img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
/* Geometrische Kapitel-Motive (js/einheiten-svg.js, 2026-10-19): Farbe --k je Kapitel wie auf der Startseite */
.mst-sprung a.mit-motiv { padding-left: 0.4rem; border-color: color-mix(in srgb, var(--k) 35%, var(--border)); background: color-mix(in srgb, var(--k) 5%, var(--surface-2)); }
.mst-sprung a.mit-motiv:hover { border-color: var(--k); }
.mst-sprung__motiv { display: block; width: 2rem; height: 1.5rem; flex: none; }
.mst-sprung__motiv svg { display: block; width: 100%; height: 100%; }
.mst-kap.mit-motiv { border-color: color-mix(in srgb, var(--k) 35%, var(--panel-border)); }
.mst-kap.mit-motiv .mst-kap__kopf { position: relative; overflow: hidden; grid-template-columns: 1fr auto; min-height: 84px;
background: color-mix(in srgb, var(--k) 5%, transparent); border-bottom-color: color-mix(in srgb, var(--k) 25%, var(--border)); }
.mst-kap.mit-motiv .mst-kap__kopf > :not(.mst-kap__motiv) { position: relative; }
.mst-kap.mit-motiv .mst-kap__nr { color: var(--k); }
.mst-kap__motiv { position: absolute; right: 0; bottom: 0; height: 100%; aspect-ratio: 4 / 3; opacity: 0.5; pointer-events: none; }
.mst-kap__motiv svg { display: block; width: 100%; height: 100%; }
/* Feinschliff 2026-10-20: Zähler stand direkt auf dem Motiv („0 / 8“ über den Strichen) → kleine Fläche in Kartenfarbe dahinter */
.mst-kap.mit-motiv .mst-kap__zahl { padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-bg) 88%, transparent); }
.mst-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.mst-kap { position: relative; scroll-margin-top: calc(var(--header-h) + 16px); border-radius: var(--radius-lg); border: 1px solid var(--panel-border); background: var(--panel-bg); overflow: hidden; }
.mst-kap__kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem 0.8rem;
border-bottom: 1px solid var(--border); }
.mst-kap__symbol { width: var(--icon-reihe); height: var(--icon-reihe); object-fit: contain; }
.mst-kap__nr { margin: 0; font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-halbfett); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.mst-kap h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.mst-kap__zahl { font-family: var(--font-label); font-size: var(--fs-meta); font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.mst-kap__balken { height: 4px; margin: 0.8rem 1.1rem 0; border-radius: var(--radius-sm); background: var(--color-border); overflow: hidden; }
.mst-kap__balken span { display: block; height: 100%; background: var(--progress); }
.mst-kap__hinweis { margin: 0.6rem 1.1rem 0; font-size: var(--fs-meta); color: var(--text-muted); }
.mst-themen { list-style: none; margin: 0; padding: 0.6rem 0.6rem 0.8rem; display: grid; gap: 0.2rem; }
.mst-thema a, .mst-thema > span { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0.6rem;
border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-size: var(--fs-ui); }
.mst-thema__nr { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); color: var(--text-muted); text-align: center; }
.mst-thema a { background: transparent; border: 1px solid transparent; font-weight: var(--fw-halbfett); transition: background var(--transition-fast), border-color var(--transition-fast); }
.mst-thema a:hover, .mst-thema a:focus-visible { background: var(--surface-elevated); border-color: var(--border); color: var(--text); }
.mst-thema a:hover .mst-los { text-decoration: underline; }
.mst-thema > span { color: var(--text-muted); }
.mst-niveaus { display: inline-flex; gap: 3px; align-items: center; }
.mst-niveaus i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); }
.mst-niveaus i.ok { background: var(--color-success); border-color: var(--color-success); }
.mst-los { font-size: var(--fs-meta); font-weight: var(--fw-halbfett); color: var(--primary); white-space: nowrap; }
.mst-bald { font-size: var(--fs-meta); font-weight: var(--fw-halbfett); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.mst-mehr { margin: 0 0.6rem 0.8rem; }
.mst-mehr summary { cursor: pointer; padding: 0.3rem 0.6rem; font-size: var(--fs-meta); color: var(--text-muted); }
.mst-trainer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0.6rem 0.8rem; padding: 0.55rem 0.8rem;
border-radius: var(--radius-sm); font-weight: var(--fw-halbfett); color: var(--color-text); text-decoration: none; background: transparent;
border: 1px solid var(--border-strong); }
.mst-trainer:hover { border-color: var(--primary); color: var(--color-text); }
/* Mathe-Trainer je Kapitel (mathe/trainer.html, js/mathe-trainer.js + js/trainer.js) */
.mathe-tr .tr__einheit { font-weight: var(--fw-halbfett); }
.mathe-tr .tr__vorschau { flex-basis: 100%; color: var(--color-text-muted); }
.mathe-tr .tr__merk h3 { color: var(--fach-mathe); }
.mathe-tr__heft { display: inline-block; margin: 0 0 0.6rem; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--fs-hilfe); font-weight: var(--fw-halbfett);
color: var(--color-primary); background: var(--color-primary-soft); }
.mathe-tr__info, .mathe-tr__probe, .mathe-tr__loesungen { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.mathe-tr__info p { margin: 0 0 0.4rem; }
/* Hinweis vor jeder Probearbeit: Übung ≠ echte Arbeit, AFB I/II statt I–III */
.mathe-tr__hinweis { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 0;
border-left: 3px solid var(--color-warning); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface-sunken); line-height: 1.55; }
.mathe-tr__hinweis p { margin: 0 0 0.45rem; }
.mathe-tr__hinweis p:last-child { margin-bottom: 0; }
/* Kennzeichen für Aufgaben aus Anforderungsbereich III (Text, nicht nur Farbe) */
.mathe-tr__afb { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
color: var(--color-primary); font: 500 var(--fs-meta)/1.4 var(--font-label); vertical-align: 0.1em; white-space: nowrap; }
/* Schreiblinien für offene Aufgaben (wie Heftlinien, auch im Druck) */
.mathe-tr__schreib { height: calc(var(--zeilen, 5) * 2rem); margin: 0.6rem 0 0.2rem;
background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2rem - 1px), var(--color-border) calc(2rem - 1px), var(--color-border) 2rem);
-webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mathe-tr__teil { margin: var(--space-5) 0 var(--space-3); padding: 0 0 0.4rem; border-bottom: 1px solid var(--border-strong); border-radius: 0; font-size: 1rem;
text-transform: none; letter-spacing: 0; color: var(--color-text); background: none; }
.mathe-tr__teil:first-child { margin-top: 0; }
.mathe-tr__aufgabe + .mathe-tr__aufgabe { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.mathe-tr__aufgabe h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.mathe-tr__zeilen p { margin: 0.4rem 0; font-family: var(--font-mono, monospace); }
/* Trainer: Lückenfelder direkt in der Zeile (js/trainer.js t.inline) – wie in Teil C, auch als Basis oder Exponent */
.tr__inline .mathe-tr__zeilen p { font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 2.4; }
.tr__inline .tr__luecke, .tr__inline select { width: 4ch; min-width: 4ch; max-width: 100%; padding: 0.2rem 0.4rem; text-align: center;
font: 600 1.1rem var(--font-mono, monospace); color: var(--color-text); background: var(--color-surface-raised);
border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); }
/* Auswahlfelder (Zahlenkarten) ohne Pfeil: sonst verdeckt der Pfeil die Zahl; gestrichelt = antippen und wählen */
.tr__inline select { width: auto; min-width: 3.2rem; padding: 0.2rem 0.6rem; text-align: center; text-align-last: center; cursor: pointer;
-webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; border-style: dashed; }
.tr__inline sup .tr__luecke { width: 3ch; min-width: 3ch; font-size: 0.8em; padding: 0.1rem 0.2rem; vertical-align: super; }
.tr__inline .is-ok { border-color: var(--color-success); background: var(--color-success-soft); }
.tr__inline .is-fail { border-color: var(--color-danger); background: var(--color-danger-soft); }
.mathe-tr__linie { display: inline-block; width: 4.5rem; border-bottom: 1.5px solid var(--color-text); margin: 0 0.3rem; }
.mathe-tr__optionen { margin: 0.4rem 0 0; }
.mathe-tr__liste { list-style: none; padding: 0; margin: 0.6rem 0 1rem; display: grid; gap: 0.3rem; }
.mathe-tr .kasse__zettel { margin: 0.4rem 0; }
@media print {
body:has(.mathe-tr__probe) #site-header, body:has(.mathe-tr__probe) #site-footer, .mathe-tr .tr__nav, .mathe-tr .tr__aside,
.mathe-tr__info .tr__aktionen, .mathe-tr__loesungen[hidden] { display: none !important; }
.mathe-tr .tr__grid { display: block; }
}
@media (max-width: 640px) { .mst-kopf { grid-template-columns: 1fr; padding: 0 0 1.1rem; } .mst-ring { width: 104px; } .mst-raster { grid-template-columns: 1fr; } }
/* .panel hat seit dem Redesign keinen Innenabstand mehr – im Mathe-Bereich hier zentral */
.mathe-seite .panel { padding: var(--space-5); }
@media (max-width: 560px) { .mathe-seite .panel { padding: var(--space-4); } }
/* .btn (display: inline-flex) und andere Bausteine überstimmen sonst das hidden-Attribut */
.mathe-seite [hidden], .mathe-beamer [hidden], .mathe-abstimmen [hidden] { display: none !important; }
.mathe-kopf { max-width: 760px; }
/* Kapitel-Motiv groß im Hintergrund des Themen-Kopfs (js/mathe.js thema(), 2026-10-19) */
.mathe-kopf.mit-motiv { position: relative; max-width: none; padding-right: min(30%, 220px); }
.mathe-kopf.mit-motiv > :not(.mathe-kopf__motiv) { position: relative; }
.mathe-kopf.mit-motiv .eyebrow { color: var(--k); }
.mathe-kopf__motiv { position: absolute; right: 0; bottom: -0.25rem; width: min(30%, 200px); aspect-ratio: 4 / 3; opacity: 0.55; pointer-events: none; }
.mathe-kopf__motiv svg { display: block; width: 100%; height: 100%; }
.mathe-zurueck { margin-bottom: var(--space-4); }
/* Startseite: Fach-Reiter über den Stufenkarten (js/start.js) */
.fach-reiter { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--space-5); border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface); }
.fach-reiter button { font: 700 1rem var(--font, inherit); padding: 0.5rem 1.2rem; border: 0; border-radius: var(--radius-pill);
color: var(--color-text); background: none; cursor: pointer; transition: background var(--transition-fast); }
.fach-reiter button:hover { background: var(--color-primary-soft); }
.fach-reiter button[aria-selected="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.stufen-grid[hidden], .mathe-stufen[hidden] { display: none; } /* sonst überstimmt display: grid das hidden-Attribut */
/* Übersicht: Stufenkarten (auch auf der Startseite, Reiter „Mathematik“) */
.mathe-stufen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); }
.mathe-stufe { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: var(--space-2) var(--space-4); align-items: center;
padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.mathe-stufe:hover { border-color: var(--fach-mathe); color: inherit; }
.mathe-stufe.is-locked { opacity: 0.75; }
.mathe-stufe__nr { grid-row: span 2; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: var(--radius-md);
font: 500 1.4rem var(--font-label); color: var(--fach-mathe);
background: color-mix(in srgb, var(--fach-mathe) 14%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--fach-mathe) 45%, var(--color-border)); }
.mathe-stufe__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mathe-stufe__text .status { align-self: flex-start; margin-top: 0.2rem; }
/* Feinschliff 2026-10-20: XP in der Stufenkarte als ruhige Zeile (Gold-Text + Stern) statt Goldkästchen – konkurriert nicht mehr mit Titel und Status */
.mathe-stufe .xp-badge { justify-self: start; background: transparent; border-color: transparent; padding-inline: 0; }
/* Stufe: Kapitel mit Themen */
.mathe-kapitel-liste { display: grid; gap: var(--space-4); }
.mathe-kapitel h2 { display: flex; align-items: center; gap: var(--space-3); font-size: 1.3rem; margin: 0 0 var(--space-3); }
.mathe-kapitel__nr { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.4rem; border-radius: var(--radius-sm);
font-weight: var(--fw-fett); color: var(--color-on-primary); background: var(--fach-mathe); }
.mathe-kapitel__hinweis { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: var(--fs-ui); }
.mathe-themen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); counter-reset: thema; }
.mathe-themen li { counter-increment: thema; }
.mathe-themen li > a, .mathe-themen li.is-bald { display: flex; align-items: center; gap: var(--space-3); padding: 0.55rem 0.8rem;
border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: inherit; text-decoration: none; background: transparent; }
.mathe-themen li > a::before, .mathe-themen li.is-bald::before { content: counter(thema); font-family: var(--font-label); font-weight: 500; color: var(--text-muted); min-width: 1.4rem; }
.mathe-themen li > a span:first-child, .mathe-themen li.is-bald > span:first-child { flex: 1; }
.mathe-themen li > a:hover { border-color: var(--fach-mathe); background: var(--surface-elevated); }
.mathe-themen li.is-bald { color: var(--color-text-muted); }
/* Thema: Teil A (nur Lehrkräfte) */
.mathe-teil-a { margin-bottom: var(--space-6); border-left: 3px solid var(--border-strong); }
.mathe-teil-a > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.mathe-teil-a > summary .eyebrow { flex-basis: 100%; margin: 0; }
.mathe-teil-a__inhalt { margin-top: var(--space-4); }
.mathe-teil-a .mathe-abschnitt { margin-top: var(--space-6); }
.mathe-teil-a .mathe-abschnitt--eng { margin-top: var(--space-3); }
.mathe-teil-a h3 { margin-bottom: var(--space-3); }
.mathe-teil-a__start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.mathe-teil-a__hilfe { margin: var(--space-3) 0 0; font-size: var(--fs-ui); }
.mathe-ablauf { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); counter-reset: ablauf; }
.mathe-ablauf li { counter-increment: ablauf; display: flex; flex-direction: column; padding: 0.35rem 0.7rem; border-radius: var(--radius-sm);
border: 1px solid var(--border-strong); background: transparent; font-size: var(--fs-ui); }
.mathe-ablauf li strong::before { content: counter(ablauf) ' '; font-family: var(--font-label); font-weight: 500; color: var(--text-muted); }
.mathe-ablauf li span { color: var(--color-text-muted); font-size: var(--fs-meta); }
.mathe-methode { display: inline-block; margin: var(--space-2) 0 0; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill);
font-size: var(--fs-meta); font-weight: var(--fw-halbfett); color: var(--color-primary); background: var(--color-primary-soft); }
.mathe-optionen { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 4px; }
.mathe-optionen li { display: flex; align-items: center; gap: var(--space-2); }
.mathe-optionen li.is-richtig { font-weight: var(--fw-halbfett); color: var(--color-success); }
.mathe-optionen .mb-optionen__b { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.8rem;
font-weight: var(--fw-fett); border: 1px solid var(--color-border-strong); color: var(--color-text); }
.mathe-fest ul { margin: 0 0 var(--space-2); padding-left: 1.4rem; }
.mathe-fest li + li { margin-top: var(--space-2); }
.mathe-fest p { margin: 0; }
.mathe-trenner { margin: var(--space-7) 0 var(--space-4); border: 0; border-top: 1px dashed var(--color-border-strong); }
/* Thema: Reiter A | B | C – immer nur ein Teil sichtbar (js/mathe.js teileReiter) */
.mathe-teile { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); margin: 0 0 var(--space-5);
padding: 6px; border-radius: var(--radius-lg); background: var(--color-surface-raised); border: 1px solid var(--color-border); scroll-margin-top: 5rem; }
.mathe-teile button, .mathe-teile__blatt { display: flex; align-items: center; gap: var(--space-3); min-height: 3.4rem; padding: 0.45rem 0.8rem; text-align: left; cursor: pointer;
font: 700 1.05rem var(--font, inherit); color: var(--color-text-muted); background: none; border: 2px solid transparent; border-radius: var(--radius-md);
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.mathe-teile button:hover, .mathe-teile__blatt:hover { color: var(--color-text); border-color: var(--color-border-strong); }
/* Arbeitsblatt zwischen A und B: Link auf die Druckseite, kein Reiter (wird nie „aktiv“) */
.mathe-teile__blatt { text-decoration: none; }
.mathe-teile__blatt[hidden] { display: none; }
.mathe-teile__blatt .mathe-teile__b { color: var(--color-text-muted); }
.mathe-teile button[aria-selected="true"] { color: var(--color-text); background: var(--color-surface); border-color: var(--fach-mathe); box-shadow: none; }
.mathe-teile button > span:last-child, .mathe-teile__blatt > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mathe-teile small { font-size: var(--fs-meta); font-weight: var(--fw-halbfett); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mathe-teile__b { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-family: var(--font-label); font-weight: 500;
color: var(--fach-mathe); border: 2px solid currentColor; }
.mathe-teile button[aria-selected="true"] .mathe-teile__b { color: var(--color-on-primary); background: var(--fach-mathe); border-color: var(--fach-mathe); }
/* Teil A (Lehrkraft): gleiche Form wie B/C, nur gestrichelter Kreis als Kennung (Gold bleibt XP vorbehalten) */
.mathe-teile button[data-teil="a"] .mathe-teile__b { color: var(--color-text-muted); border-style: dashed; }
@media (max-width: 560px) {
.mathe-teile button, .mathe-teile__blatt { flex-direction: column; align-items: center; gap: 2px; padding: 0.4rem 0.2rem; text-align: center; font-size: var(--fs-ui); }
.mathe-teile button > span:last-child, .mathe-teile__blatt > span:last-child { align-items: center; }
.mathe-teile small { display: none; }
}
/* Thema: Teil C (Übung, Darstellung nach Vorbild ANTON) */
.mathe-teil-c { margin-top: 0; }
.mathe-teil-c > .eyebrow, .mathe-erkunden > .eyebrow { margin-bottom: var(--space-1); }
.mu__niveaus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.mu__niveau { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.6rem 0.8rem; text-align: left; cursor: pointer;
font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.mu__niveau:hover { border-color: var(--fach-mathe); }
.mu__niveau[aria-pressed="true"] { border-color: var(--fach-mathe); box-shadow: inset 0 0 0 1px var(--fach-mathe); background: var(--surface-selected); }
.mu__niveau-nr { font-family: var(--font-label); font-size: var(--fs-meta); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.mu__niveau > span:nth-child(2) { font-weight: var(--fw-halbfett); }
.mu__niveau-stand { font-size: var(--fs-hilfe); color: var(--color-text-muted); }
.mu__niveau.is-fertig .mu__niveau-stand { color: var(--color-success); font-weight: var(--fw-halbfett); }
.mu__sterne { color: var(--color-gold-bright); letter-spacing: 0.08em; font-size: 1.05em; }
.mu .task__head { flex-wrap: wrap; }
/* Fortschrittsbalken der Runde: ein Segment je Aufgabe, ↻ = Wiederholung mit anderen Zahlen */
.mu__balken { display: flex; gap: 4px; margin: var(--space-2) 0 var(--space-4); }
.mu__segment { flex: 1; display: grid; place-items: center; height: 12px; border-radius: var(--radius-sm); font-size: 0.65rem; line-height: 1; font-weight: var(--fw-fett);
color: var(--color-text-muted); background: var(--color-surface-raised); border: 1px solid var(--color-border); transition: background var(--transition-fast); }
.mu__segment.is-jetzt { border-color: var(--fach-mathe); border-width: 2px; }
.mu__segment.is-ansicht { outline: 2px solid var(--fach-mathe); outline-offset: 2px; }
.mu__segment.is-ok { background: var(--color-success); border-color: var(--color-success); }
.mu__segment.is-nach { background: color-mix(in srgb, var(--color-success) 55%, var(--color-warning)); border-color: transparent; }
.mu__segment.is-skip { background: var(--color-surface); border-color: var(--color-text-muted); }
.mu__segment.is-wieder:not(.is-ok):not(.is-nach):not(.is-skip) { border-style: dashed; }
.mu__text { margin: 0 0 var(--space-2); }
.mu__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.mu__tags:empty { display: none; }
.mu__tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--radius-sm); font-family: var(--font-label); font-size: var(--fs-meta); font-weight: 500;
color: var(--text-secondary); background: transparent; border: 1px solid var(--border-strong); }
.mu__tag--heft { color: var(--color-primary); background: var(--color-primary-soft); border-color: transparent; }
.mu__tag--wieder { color: var(--color-warning); border-color: currentColor; }
.mu__frage { font-size: clamp(1.1rem, 2.4vw, 1.3rem); }
.mu__frage p { margin: 0 0 var(--space-3); }
.mu__feld { margin: var(--space-3) 0; }
.mu__klein { font-size: var(--fs-hilfe); margin: var(--space-2) 0 0; }
.mu__eingabe { display: inline-flex; align-items: center; gap: var(--space-2); }
.mu__eingabe input, .mu__luecke, .mathe-beob input { padding: 0.5rem 0.7rem; font: 600 1.2rem var(--font-mono, monospace); color: var(--color-text);
background: var(--color-surface-raised); border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.mu__eingabe input { width: min(14rem, 60vw); min-height: 3rem; }
.mu__eingabe input:focus, .mu__luecke:focus, .mathe-beob input:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mu__einheit { font-weight: var(--fw-halbfett); font-size: 1.2rem; }
.mu__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mu .task__feedback { min-height: 1.5em; }
/* Heftaufgaben (2026-10-19): Schreibfläche, Kontrollhilfe nach Fehler, Musterlösung nach allen Tipps */
.mu__schreib:empty { display: none; }
.mu__kontrolle, .tr__kontrolle { margin: var(--space-2) 0; padding: var(--space-3); border-left: 3px solid var(--color-warning); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-sunken); }
.mu__kontrolle ul, .tr__kontrolle ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.mu__kontrolle li + li, .tr__kontrolle li + li { margin-top: 0.3rem; }
.tr__kontrolle[hidden] { display: none; }
.mu__loesung-btn { margin: 0.6rem 0 0 var(--space-2); }
.mu__loesung { margin-top: var(--space-3); padding: var(--space-3); border: 0; border-left: 3px solid var(--border-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-sunken); }
.mu__loesung h4 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.mu__loesung h4 .icon { width: var(--icon-inhalt); height: auto; }
.mu__weg { line-height: 1.9; overflow-wrap: anywhere; }
/* Erklärte Beispiele in Teil C (js/mathe-ueben.js) */
.mu__bsp { margin: var(--space-3) 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-surface); }
.mu__bsp > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); cursor: pointer; font-weight: 600; }
.mu__bsp > summary .icon { width: var(--icon-inhalt); height: auto; }
.mu__bsp-inhalt { padding: 0 var(--space-3) var(--space-3); }
.mu__bsp-typen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.mu__bsp-typ { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.35rem 0.7rem; font: inherit; color: var(--text-primary);
background: var(--surface-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.mu__bsp-typ[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--color-primary); }
.mu__bsp-niveau { font-family: var(--font-label); font-size: var(--fs-meta); color: var(--text-secondary); }
.mu__bsp-karte { margin-top: var(--space-3); padding: var(--space-3); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-sunken); }
.mu__bsp-karte--du { border-left-color: var(--border-strong); }
.mu__bsp-karte h4 { margin: 0 0 var(--space-2); }
.mu__bsp-frage p { margin: 0 0 var(--space-2); }
.mu__bsp-schritte { margin: var(--space-2) 0; padding-left: 1.3rem; }
.mu__bsp-schritte li + li { margin-top: 0.4rem; }
.mu__bsp-rechnung { list-style: none; margin-left: -1.3rem; padding-top: var(--space-2); border-top: 1px dashed var(--border-strong); }
.mu__fehlersuche { margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px dashed var(--color-border-strong); }
.is-ok:is(input, .mu__platz) { border-color: var(--color-success); background: var(--color-success-soft); }
.is-falsch:is(input, .mu__platz) { border-color: var(--color-danger); background: var(--color-danger-soft); }
/* Rückmeldung: kurz wackeln bei falsch (Jubel kommt aus lernen.css) */
.mu.is-wackeln .mu__feld { animation: mu-wackeln 300ms ease; }
@keyframes mu-wackeln { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .mu.is-wackeln .mu__feld { animation: none; } }
/* Eingabe mit Sonderzeichen-Leiste + Live-Vorschau (js/mathe-eingabe.js) */
.mx-feld { display: grid; gap: var(--space-2); justify-items: start; }
.mx-tasten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }
/* Die Sondertasten eines Feldes stehen jetzt in der zentralen Tastenleiste (.mx-tastenleiste) */
.mx-feld > .mx-tasten, .mx-tasten--alt { display: none; }
/* Hervorgehobener Eingabe-Hinweis bei mehreren Lösungen (D.matheMehrereHinweis): Zeichen als Tasten */
.mx-eingabe-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0.8rem 0 0; padding: 0.55rem 0.8rem;
border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-soft); font-size: 0.98rem; }
.mx-eingabe-hinweis__bsp { display: inline-flex; align-items: center; gap: 0.25rem; }
.mx-eingabe-hinweis__trenner { color: var(--color-text-muted); }
.mx-eingabe-hinweis kbd { display: inline-block; min-width: 1.9rem; padding: 0.15rem 0.5rem; border: 1px solid var(--color-border-strong); border-bottom-width: 3px;
border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: 700 1rem/1.3 system-ui, sans-serif; text-align: center; }
.mx-eingabe-hinweis kbd.mx-kbd-hell { border-color: var(--color-primary); color: var(--color-primary); font-size: 1.15rem; }
/* Tastenleiste für alle Mathe-Eingaben (iPad): im Seitenfluss unter der Zeile mit dem angetippten Feld, große Touch-Flächen */
.mx-tastenleiste { display: flex; flex-wrap: wrap; gap: 5px; width: max-content; max-width: 100%; margin: 0.4rem 0 0.6rem; padding: 6px;
border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.mx-tastenleiste[hidden] { display: none; }
.mx-tl { min-width: 2.75rem; min-height: 2.6rem; padding: 0 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-bg-soft); color: var(--color-text); font: 600 1.15rem/1 "Cambria Math", "STIX Two Math", Cambria, serif; cursor: pointer;
touch-action: manipulation; }
.mx-tl:hover, .mx-tl:focus-visible { border-color: var(--fach-mathe); }
.mx-tl:active { background: var(--color-primary-soft, var(--color-bg-soft)); transform: translateY(1px); }
.mx-tl sup { font-size: 0.7em; }
.mx-tl[data-tl="keine"] { font: 600 0.95rem/1 system-ui, sans-serif; }
/* Tablet (pointer: coarse): Ziffernblock wie bei ANTON statt Systemtastatur – Ziffern | Zeichen | Löschen, abc, Prüfen */
.mx-tastenleiste--block { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; width: auto; max-width: 40rem; padding: 8px; }
.mx-tl__ziffern { display: grid; grid-template-columns: repeat(3, 3.2rem); gap: 6px; }
.mx-tl__zeichen { display: grid; grid-template-columns: repeat(3, 3.2rem); grid-auto-rows: 3rem; gap: 6px; align-content: start; }
.mx-tl__aktionen { display: grid; grid-template-rows: 3rem 3rem 1fr; gap: 6px; min-width: 4.4rem; }
.mx-tastenleiste--block .mx-tl { min-width: 0; min-height: 3rem; font-size: 1.3rem; }
.mx-tl--ziffer { background: var(--color-surface); font: 700 1.4rem/1 system-ui, sans-serif !important; }
.mx-tl--weg, .mx-tl--abc { font: 600 1.05rem/1 system-ui, sans-serif !important; }
.mx-tl--ok { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font: 800 1.6rem/1 system-ui, sans-serif !important; }
.mx-tl--ok:active { background: var(--color-primary); }
/* Handy: alles nebeneinander wie bei ANTON, dafür kleinere Tasten */
@media (max-width: 520px) {
.mx-tastenleiste--block { flex-wrap: nowrap; gap: 6px; padding: 6px; }
.mx-tl__ziffern, .mx-tl__zeichen { grid-template-columns: repeat(3, 2.25rem); grid-auto-rows: 2.6rem; gap: 4px; }
.mx-tl__aktionen { grid-template-rows: 2.6rem 2.6rem 1fr; gap: 4px; min-width: 3.1rem; }
.mx-tastenleiste--block .mx-tl { min-height: 2.6rem; padding: 0; font-size: 1.1rem; }
.mx-tl--ziffer { font-size: 1.2rem !important; }
.mx-tl--weg, .mx-tl--abc { font-size: 0.9rem !important; }
}
.mx-taste { min-width: 2.8rem; min-height: 2.6rem; padding: 0 0.7rem; font: 700 1.15rem var(--font-mono, monospace); color: var(--color-text); cursor: pointer;
background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.mx-taste:hover { border-color: var(--fach-mathe); }
.mx-taste[aria-pressed="true"] { color: var(--color-on-primary); background: var(--fach-mathe); border-color: var(--fach-mathe); }
.mx-vorschau { margin: 0; min-height: 1.6em; color: var(--color-text-muted); font-size: var(--fs-ui); }
.mx-vorschau strong { color: var(--color-text); font-size: 1.15rem; }
.mx-vorschau__fehler { color: var(--color-danger); }
.mx-bruch { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; margin: 0 0.15em; font-size: 0.9em; }
.mx-bruch > span:first-child { border-bottom: 2px solid currentColor; padding: 0 0.2em; }
.mx-hilfe { margin-top: var(--space-4); font-size: var(--fs-ui); }
.mx-hilfe summary { cursor: pointer; font-weight: var(--fw-halbfett); color: var(--color-primary); }
.mx-hilfe table { margin-top: var(--space-2); border-collapse: collapse; }
.mx-hilfe th, .mx-hilfe td { padding: 0.25rem 0.8rem 0.25rem 0; text-align: left; vertical-align: top; }
.mx-hilfe th { font-weight: var(--fw-halbfett); }
/* Lücken, Päckchen, Zahlenkarten */
.mu__luecken p { margin: 0 0 var(--space-2); font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 2.4; }
/* Lange Zeilen brechen um statt seitlich zu scrollen (Nutzer-Vorgabe 2026-10-08); kurze Rechnungen bleiben dank Flex-Zeilen zusammen */
.mu__paeckchen p { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
/* Päckchen: jede Aufgabe in einer eigenen Zeile (Nutzer-Vorgabe 2026-10-08, nie nebeneinander) */
.mu__paeckchen { display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow-x: auto;
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-soft); font-family: var(--font-mono, monospace); }
.mu__paeckchen p { flex: 0 0 auto; }
/* Teilaufgaben a), b), c): untereinander, normaler Satz mit Umbruch */
.mu__teilaufgaben { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.mu__teilaufgaben p { line-height: 1.9; }
.mu__teilaufgaben p + p { margin-top: var(--space-1); }
.mu__luecke { width: 4ch; min-width: 4ch; max-width: 100%; padding: 0.2rem 0.4rem; text-align: center; }
.mu__platz { display: inline-block; min-width: 4.5rem; min-height: 2.4rem; padding: 0.15rem 0.6rem; vertical-align: middle; cursor: pointer;
font: 700 1.1rem var(--font-mono, monospace); color: var(--color-text); background: var(--color-surface);
border: 2px dashed var(--color-border-strong); border-radius: var(--radius-sm); }
.mu__platz[data-karte] { border-style: solid; background: var(--color-primary-soft); }
.mu__platz.is-gewaehlt { border-color: var(--fach-mathe); }
.mu__karten { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.mu__karte { min-width: 4.5rem; min-height: 3rem; padding: 0.3rem 0.8rem; cursor: pointer; font: 700 1.15rem var(--font-mono, monospace); color: var(--color-text);
background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius-md);
transition: border-color var(--transition-fast), background var(--transition-fast); }
.mu__karte:hover:not([disabled]) { border-color: var(--fach-mathe); background: var(--surface-elevated); }
.mu__karte[disabled] { opacity: 0.25; cursor: default; box-shadow: none; }
/* Auswahl wie bei ANTON: große Antwortflächen (auch Vermutung in Teil B, Abstimmung) */
.mu__optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-2); }
.mu__option { display: flex; align-items: center; gap: var(--space-3); min-height: 3.2rem; padding: 0.55rem 0.9rem; text-align: left; cursor: pointer;
font: 500 1.05rem var(--font, inherit); color: var(--color-text); background: transparent;
border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), background var(--transition-fast); }
.mu__option:hover:not([disabled]) { border-color: var(--fach-mathe); background: var(--surface-elevated); }
.mu__option[aria-pressed="true"] { border-color: var(--fach-mathe); box-shadow: inset 0 0 0 1px var(--fach-mathe); background: var(--surface-selected); }
.mu__option.is-falsch { border-color: var(--color-danger); opacity: 0.55; text-decoration: line-through; cursor: default; }
.mu.is-solved .mu__option[aria-pressed="true"] { border-color: var(--color-success); background: var(--color-success-soft); }
.mu__buchstabe { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); font-family: var(--font-label); font-weight: 500;
color: var(--text-muted); border: 1px solid var(--border-strong); }
.mu__option[aria-pressed="true"] .mu__buchstabe { color: var(--fach-mathe); border-color: var(--fach-mathe); }
/* Zahlenstrahl und Anteile einfärben */
.mu__strahl { display: block; width: 100%; max-width: 760px; height: auto; touch-action: manipulation; cursor: crosshair; }
.mu__strahl line { stroke: var(--color-text); stroke-width: 2; }
.mu__strahl .mu__strahl-achse { stroke-width: 3; }
.mu__strahl .mx-karo line { stroke: var(--color-border); stroke-width: 0.8; } /* Karopapier nicht wie Striche zeichnen */
.mu__strahl text { fill: var(--color-text); font: 600 15px var(--font, system-ui, sans-serif); }
.mu__strahl-marke line { stroke: var(--fach-mathe); stroke-width: 3; }
.mu__strahl-marke circle { fill: var(--fach-mathe); }
.mu__anteil { display: block; width: 100%; height: auto; cursor: pointer; }
.mu__anteil--kreis { max-width: 260px; }
.mu__anteil--streifen { max-width: 560px; }
.mu__teil { fill: var(--color-surface-raised); stroke: var(--color-text); stroke-width: 2; transition: fill var(--transition-fast); }
.mu__teil.is-an { fill: var(--fach-mathe); }
/* Rundenende */
.mu__ende { text-align: center; padding: var(--space-4) 0; }
.mu__ende h3 { margin: 0 0 var(--space-2); }
.mu__ende .mu__knoepfe { justify-content: center; margin-top: var(--space-3); }
.mu__ende-sterne { margin: 0; font-size: clamp(2.2rem, 7vw, 3.2rem); }
/* Applet „Dienst an der Kasse“ (js/applets/mathe/kasse.js) */
.kasse { display: grid; gap: var(--space-3); }
.kasse__vorrat, .kasse__inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.kasse__teller { padding: var(--space-3); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.kasse__titel { margin: 0 0 var(--space-2); font-weight: var(--fw-halbfett); }
.kasse__inhalt { min-height: 3.4rem; }
.kasse__leeren { margin-top: var(--space-2); }
.kasse__geld { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; cursor: pointer; padding: 0;
font: 800 0.8rem var(--font, inherit); color: var(--color-text); border: 2px solid var(--color-text);
transition: transform var(--transition-fast); }
.kasse__geld:hover { transform: translateY(-2px); }
.kasse__geld:focus-visible { outline: 3px solid var(--fach-mathe); outline-offset: 2px; }
.kasse__geld[data-w="1"], .kasse__geld[data-w="2"] { width: 2.6rem; height: 2.6rem; }
.kasse__geld--kupfer { background: color-mix(in srgb, var(--color-bronze) 55%, #fff); color: var(--color-on-hell); } /* Münze immer hell, dunkle Schrift */
.kasse__geld--gold { background: var(--color-gold-bright); color: var(--color-on-hell); }
.kasse__geld--euro { background: radial-gradient(circle, var(--color-gold-bright) 0 52%, var(--color-silver) 54%); color: var(--color-on-hell); }
.kasse__geld--schein { width: 5.2rem; height: 2.8rem; border-radius: var(--radius-sm); color: var(--color-on-hell); }
/* Scheine immer hell (dunkle Schrift --color-on-hell), auch im Dunkelmodus – sonst zu wenig Kontrast */
.kasse__geld--schein5 { background: color-mix(in srgb, var(--color-silver) 55%, #fff); }
.kasse__geld--schein10 { background: color-mix(in srgb, var(--color-pink) 40%, #fff); }
.kasse__geld--schein20 { background: color-mix(in srgb, var(--color-primary) 35%, #fff); }
.kasse__preis { display: inline-block; padding: 0.1rem 0.6rem; font: 800 1.25rem var(--font-mono, monospace); border-radius: var(--radius-sm);
background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); }
.kasse__zettel { border-collapse: collapse; margin: 0 0 var(--space-2); font-variant-numeric: tabular-nums; background: var(--color-surface-raised); }
.kasse__zettel th, .kasse__zettel td { padding: 0.35rem 0.8rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.kasse__zettel td:last-child, .kasse__zettel th:last-child { text-align: right; }
/* Einstieg (Teil A) */
.mathe-abschnitt { margin-top: var(--space-7); }
.mathe-abschnitt > h2 { margin-bottom: var(--space-4); }
.mathe-liste { padding-left: 2.2rem; }
.mathe-liste li + li { margin-top: var(--space-2); }
.mathe-szene { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); align-items: center; }
.mathe-szene__bild svg { display: block; width: 100%; height: auto; }
.mathe-impulse { list-style: none; padding: 0; display: grid; gap: var(--space-4); counter-reset: impuls; }
.mathe-impuls { counter-increment: impuls; }
.mathe-impuls__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.mathe-impuls__frage { font-size: 1.15rem; font-weight: var(--fw-halbfett); color: var(--color-text); }
.mathe-impuls .mathe-impuls__frage::before { content: counter(impuls) '. '; color: var(--color-primary); }
.mathe-impuls ul { margin: var(--space-1) 0 0; padding-left: 1.4rem; }
.mathe-label { display: inline-block; font-size: var(--fs-meta); font-weight: var(--fw-halbfett); text-transform: none; letter-spacing: 0.02em;
color: var(--color-text-muted); margin-top: var(--space-3); margin-right: var(--space-2); }
.mathe-hinweis { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--border-strong);
background: var(--color-bg-soft); border-radius: var(--radius-sm); font-size: var(--fs-ui); }
.mathe-runde + .mathe-runde { margin-top: var(--space-4); }
.mathe-runde h3 { margin: 0; }
.mathe-blitz { margin: var(--space-3) 0 0; padding-left: 1.6rem; display: grid; gap: var(--space-4); }
.mathe-blitz p { margin: 0; }
.mathe-blitz .mathe-label { margin-top: var(--space-1); }
.mathe-blitz__frage { font-weight: var(--fw-halbfett); }
.mathe-fehler { color: var(--color-danger); font-size: var(--fs-ui); margin-top: var(--space-1) !important; }
/* Tafelbild (Seite + Beamer) */
/* Innenabstand und Einrückung in em: Am Beamer ist die Schrift größer, die Aufzählungspunkte dürfen nie auf dem blauen Rand liegen */
.tafelbild { border-left: 3px solid var(--color-primary); padding-left: 0.9em; }
.tafelbild ul { margin: var(--space-3) 0 0; padding-left: 1.4em; }
.tafelbild li + li { margin-top: var(--space-2); }
.tb-zeile { font-size: 1.3rem; margin-bottom: var(--space-2); }
.tb-gross { font-size: 1.7rem; font-weight: var(--fw-fett); color: var(--color-primary); }
.tafelbild b { color: var(--color-primary); }
.tafelbild i { font-style: normal; font-weight: var(--fw-halbfett); color: var(--color-pink); }
.tb-komma { font-weight: var(--fw-fett); font-size: 1.6rem; }
/* Beamer-Modus */
body.mathe-beamer-offen { overflow: hidden; }
.mathe-beamer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
background: var(--color-bg); color: var(--color-text); }
.mathe-beamer__folie { flex: 1; overflow: auto; display: flex; flex-direction: column; justify-content: center;
padding: clamp(1rem, 4vw, 4rem) clamp(1rem, 8vw, 8rem); font-size: clamp(1.1rem, 2.2vw, 1.9rem); line-height: 1.45; }
.mathe-beamer__folie h2 { font-size: clamp(1.6rem, 3.5vw, 3rem); margin: 0 0 0.5em; }
.mathe-beamer__leiste { display: flex; justify-content: center; align-items: center; gap: var(--space-3);
padding: var(--space-3); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.mathe-beamer__leiste [data-b="zu"] { position: absolute; right: var(--space-3); }
.mathe-beamer__nr { min-width: 5ch; text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mb-eyebrow { color: var(--text-secondary); font-family: var(--font-label); font-weight: 500; font-size: 0.75em; text-transform: none; letter-spacing: 0; margin: 0 0 0.6em; }
.mb-gross { font-size: 1.6em; font-weight: var(--fw-halbfett); margin: 0; }
.mb-riesig { font-size: clamp(2rem, 6vw, 4.5rem) !important; text-align: center; }
.mathe-beamer__folie--runde { align-items: center; text-align: center; }
.mb-frage { font-weight: var(--fw-halbfett); color: var(--color-primary); }
.mb-bild svg { display: block; width: 100%; max-height: 52vh; height: auto; }
.mb-bild--klein { margin-top: 1em; opacity: 0.85; }
.mb-bild--klein svg { max-height: 34vh; }
.mb-loesung { margin-top: 1em; padding: 0.5em 0.8em; border-radius: var(--radius-md); background: var(--color-success-soft);
color: var(--color-text); border-left: 3px solid var(--color-success); font-weight: var(--fw-halbfett); }
.mb-loesung::before { content: '✓ '; color: var(--color-success); }
.mathe-beamer__folie--tafel .tafelbild { font-size: 1em; }
.mb-szene { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5em; align-items: center; }
/* Problembild bleibt auf allen Folien nach der Szene stehen (js/mathe.js mitProblem) */
.mb-mitproblem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10em, 32%); gap: 1.5em; align-items: start; }
.mb-problem { position: sticky; top: 0; padding: 0.4em; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.mb-problem .mb-bild svg { max-height: 40vh; }
.mb-optionen { list-style: none; margin: 0.8em 0 0; padding: 0; display: grid; gap: 0.4em; }
.mb-optionen li { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6em;
padding: 0.35em 0.6em; border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); overflow: hidden; }
.mb-optionen__b { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; font-weight: var(--fw-fett); color: var(--fach-mathe); border: 2px solid currentColor; }
.mb-optionen__t { position: relative; z-index: 1; }
.mb-optionen__balken { position: absolute; inset: 0; pointer-events: none; }
.mb-optionen__balken span { display: block; height: 100%; width: 0; background: color-mix(in srgb, var(--color-primary) 22%, transparent); transition: width 400ms ease; }
.mb-optionen__n { position: relative; z-index: 1; font-style: normal; font-weight: var(--fw-fett); color: var(--color-primary); }
.mb-optionen li.is-richtig { border-color: var(--color-success); }
.mb-optionen li.is-richtig .mb-optionen__b { color: var(--color-success); }
.mb-optionen li.is-richtig::after { content: '✓'; position: absolute; right: 0.6em; top: 50%; transform: translateY(-50%); color: var(--color-success); font-weight: var(--fw-fett); }
.mb-fest { margin: 0; padding-left: 1.2em; }
.mb-fest li + li { margin-top: 0.4em; }
.mb-offen { margin-top: 1em; padding: 0.5em 0.8em; border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary-soft); }
.mb-weiter { margin-top: 0.8em; font-weight: var(--fw-halbfett); color: var(--color-primary); }
/* ---------- Beamer-Bausteine nach Vorbild „Die pq-Formel“ (js/mathe.js: Brücke, Werkzeugkasten, Stolpersteine, Checkliste) ---------- */
.mb-loesung > p { margin: 0; }
.mb-loesung > p:first-child { display: inline; }
.mb-bruecke { margin-top: 0.5em !important; font-weight: var(--fw-halbfett); color: var(--color-primary); }
.mb-schritt[hidden] { display: none !important; }
.mb-werkzeuge { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 0.8em; margin-top: 0.8em; }
.mb-werkzeug { padding: 0.7em 0.9em; border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.mb-werkzeug h3 { margin: 0 0 0.3em; font-size: 1.05em; }
.mb-werkzeug__bsp { margin: 0; }
.mb-werkzeug__nicht { margin: 0.6em 0 0; padding-top: 0.5em; border-top: 1px dashed var(--color-border-strong); }
.mb-fazit { margin-top: 0.9em; padding: 0.5em 0.8em; border: 2px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-soft); font-weight: var(--fw-halbfett); }
.mb-stolper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; margin-top: 0.6em; align-items: start; }
.mb-stolper__falsch, .mb-stolper__richtig { padding: 0.7em 0.9em; border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.mb-stolper__richtig { border-color: var(--color-success); }
.mb-stolper__label { margin: 0 0 0.4em; font-size: 0.8em; font-weight: var(--fw-halbfett); color: var(--color-text-muted); }
.mb-rechnung .mb-rz { margin: 0.15em 0; }
.mb-rz--fehler.is-markiert { padding: 0 0.25em; border-radius: var(--radius-sm); background: var(--color-danger-soft); outline: 2px solid var(--color-danger); }
.mb-stolper__fehler { margin: 0.7em 0 0; font-weight: var(--fw-halbfett); color: var(--color-danger); }
.mb-stolper__name { margin: 0; font-size: 1.05em; font-weight: var(--fw-fett); }
/* Auflösung als A–D-Frage: ohne grünen Haken-Kasten der Blitzrunde, sondern wie die übrigen Stolperstein-Schritte */
.mb-loesung--stolper { margin-top: 0.7em; padding: 0; border: 0; background: none; font-weight: 400; }
.mb-loesung--stolper::before { content: none; }
.mb-stolper .mb-optionen { font-size: 0.9em; }
.mb-stolper__probe { margin: 0.4em 0 0; font-size: 0.9em; }
.mb-stolper__tipp { margin: 0.7em 0 0; padding: 0.4em 0.7em; border-radius: var(--radius-sm); background: var(--color-bg-soft); font-size: 0.95em; }
.mb-hinweis-klein { margin: 0.2em 0 0; font-size: 0.8em; color: var(--color-text-muted); }
.mb-check { margin: 0.6em 0 0; padding-left: 1.4em; }
.mb-check li { list-style: disc; } /* Lesehilfe, nie abhakbar */
.mb-check li + li { margin-top: 0.45em; }
.mb-tabelle { width: 100%; margin-top: 0.6em; border-collapse: collapse; font-size: 0.9em; }
.mb-tabelle th, .mb-tabelle td { padding: 0.4em 0.6em; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.mb-tabelle th { font-size: 0.8em; color: var(--color-text-muted); }
@media (max-width: 760px) { .mb-stolper { grid-template-columns: 1fr; } }
/* Lehreransicht: Diagnose je falscher Antwort, Stolpersteine-Liste */
.mathe-diagnose { margin: 0.3rem 0 0; padding: 0; list-style: none; }
.mathe-diagnose li { display: flex; gap: 0.5rem; align-items: baseline; margin-top: 0.25rem; font-size: var(--fs-ui); }
.mathe-diagnose .mb-optionen__b { flex: none; width: 1.5em; height: 1.5em; font-size: 0.8rem; }
.mathe-stolper li + li { margin-top: 0.6rem; }
.mathe-beamer__live { padding: var(--space-2) var(--space-4); text-align: center; background: var(--color-surface-raised); border-top: 1px solid var(--color-border); }
.mathe-beamer__live select { font: inherit; padding: 0.2rem 0.4rem; margin: 0 var(--space-2); }
/* Schülerseite: Abstimmung am Beamer läuft (js/mathe.js schuelerAbstimmung) */
.mathe-abstimmen { position: fixed; left: 50%; bottom: var(--space-3); z-index: 900; transform: translateX(-50%); width: min(720px, calc(100% - 2rem));
padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--panel-bg); border: 2px solid var(--fach-mathe); box-shadow: var(--shadow-lift); }
.mathe-abstimmen__info { margin: 0 0 var(--space-2); }
.mathe-abstimmen__knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-2); }
/* Teil B: Erkunden am Gerät (js/mathe-erkunden.js) */
.mathe-erkunden { margin-top: 0; }
.mathe-erkunden h2 { margin: 0 0 var(--space-2); }
.mathe-erk__info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.mathe-erk__xp { margin-left: auto; }
.mathe-erk__auftrag { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.mathe-erk__auftrag p { margin: 0; }
.mathe-erk__auftrag ol { margin: var(--space-2) 0 0; padding-left: 1.4rem; }
.mathe-erk__schritt { margin-top: var(--space-6); }
.mathe-erk__schritt h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.mathe-erk__nr { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-family: var(--font-label); font-weight: 500; font-size: 1rem;
color: var(--color-text); background: transparent; border: 1.5px solid var(--border-strong); }
.mb-tabelle-wrap { overflow-x: auto; margin-bottom: var(--space-3); }
.mathe-beob { border-collapse: collapse; min-width: 100%; font-variant-numeric: tabular-nums; }
.mathe-beob th, .mathe-beob td { padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.mathe-beob thead th { font-size: var(--fs-hilfe); background: var(--color-surface-raised); }
.mathe-beob tbody th { white-space: nowrap; }
.mathe-beob__zelle { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.mathe-beob input { width: 5.5rem; padding: 0.25rem 0.4rem; font-size: 1.05rem; text-align: right; }
/* Auswahl-Chips (ja/nein) statt Freitext in der Beobachtungstabelle (js/mathe-erkunden.js) */
.mathe-beob__wahl { display: inline-flex; gap: 0.3rem; padding: 2px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.mathe-beob__chip { min-width: 3.2rem; padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface); color: var(--color-text); font: 600 0.95rem var(--font-body, inherit); cursor: pointer; }
.mathe-beob__chip:hover { border-color: var(--fach-mathe); }
.mathe-beob__chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mathe-beob__chip[aria-pressed="true"] { border-color: var(--fach-mathe); background: color-mix(in srgb, var(--fach-mathe) 14%, var(--color-surface)); }
.mathe-beob__wahl.is-ok { border-color: var(--color-success); background: var(--color-success-soft); }
.mathe-beob__wahl.is-falsch { border-color: var(--color-danger); background: var(--color-danger-soft); }
.mathe-merksatz { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--progress); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: color-mix(in srgb, var(--progress) 8%, var(--surface)); font-size: 1.1rem; line-height: 2.4; }
.mathe-merksatz .mu__luecke { width: 5ch; padding: 0.1rem 0.3rem; font-size: 1.05rem; }
.mathe-merksatz.is-fertig { border-left-color: var(--color-success); }
.mathe-erk__abschluss { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.mathe-erk__abschluss p { margin: 0; }
.mathe-erk__geschafft { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-success-soft); border-left: 3px solid var(--color-success); }
.mathe-erk__weiterhin { margin: 0.4rem 0 0; font-weight: 400; color: var(--color-text-muted); }
/* Soft-Break: Merksatz noch offen (kein Erfolg, aber auch kein Fehler) */
.mathe-erk__offen { padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface-sunken); border: 0;
border-left: 3px solid var(--color-warning); }
/* Wortspeicher zum Merksatz: Wörter als Kärtchen, nicht anklickbar (selbst einsetzen) */
.mathe-erk__wortspeicher { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.mathe-erk__wortspeicher p { margin: 0 0 0.3rem; }
.mathe-erk__wortspeicher ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.mathe-erk__wortspeicher li { padding: 0.25rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-weight: var(--fw-halbfett); }
.mathe-erk__schnelle { padding: var(--space-3) var(--space-4); border-radius: 0; border: 0; border-left: 3px solid var(--border-strong); }
/* Leitproblem: Frage aus Teil A, Schrittkette, Antwortsatz, Diagnose typischer Fehler (Bauplan „Gelenkte Mathematisierung“) */
.mathe-erk__leitfrage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-3);
padding: var(--space-3) var(--space-4); border: 0; border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface-selected); }
.mathe-erk__leitfrage .eyebrow { margin: 0 0 var(--space-1); }
.mathe-erk__leitbild { flex: 1 1 22rem; max-width: 32rem; }
.mathe-erk__leitbild svg { display: block; width: 100%; height: auto; }
.mathe-erk__leitfrage > div:last-child { flex: 1 1 16rem; }
/* „⛶ Großansicht“ für Szene/Leitfrage und Auftrag (data-gross, js/grossansicht.js): Platz für den Knopf, im ganzen Fenster großes Bild */
.mathe-erk__leitfrage[data-gross], .mathe-erk__auftrag[data-gross] { padding-top: 2.8rem; }
.mathe-erk__leitfrage.is-gross { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; padding-top: 3.6rem; }
.mathe-erk__leitfrage.is-gross .mathe-erk__leitbild { flex: 0 0 auto; width: min(100%, 1200px, calc((100vh - 15rem) * 2)); max-width: none; }
.mathe-erk__leitfrage.is-gross > div:last-child { flex: 0 0 auto; width: min(100%, 60rem); font-size: 1.2rem; }
.mathe-erk__auftrag.is-gross { max-width: none; font-size: 1.25rem; line-height: 1.7; }
.mathe-erk__szene { margin: 0 0 var(--space-2); }
.mathe-erk__frage { margin: 0; font-size: 1.15rem; font-weight: var(--fw-halbfett); }
.mathe-erk__schritte { display: grid; gap: var(--space-4); margin: 0; padding-left: 1.4rem; }
.mathe-erk__schritte > li { padding-left: var(--space-1); }
.mathe-erk__handlung { margin: 0 0 var(--space-2); }
.mathe-erk__zeile, .mathe-erk__antwort { font-size: 1.1rem; line-height: 2.4; }
.mathe-erk__antwort { padding: var(--space-2) var(--space-4); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--color-bg-soft); }
.mathe-erk__zeile .mu__luecke, .mathe-erk__antwort .mu__luecke { min-width: 6ch; }
.mathe-erk__probe { margin-top: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--color-success-soft); }
.mathe-erk__diagnose { margin: var(--space-2) 0 0; padding-left: 1.2rem; font-weight: 400; }
.mathe-erk__diagnose li + li { margin-top: var(--space-1); }
.mu__luecke.is-fast, .mathe-beob input.is-fast, .mathe-beob__wahl.is-fast { border-color: var(--color-primary); border-style: dashed; background: var(--color-primary-soft); }
.task__feedback.is-hinweis { color: var(--color-text); }
/* Labor „Geld“ (js/applets/mathe/geldlabor.js) */
.geldlabor { display: grid; gap: var(--space-3); }
.geldlabor__waren { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.geldlabor__ware { display: flex; flex-direction: column; align-items: flex-start; min-width: 7.5rem; padding: 0.6rem 0.9rem; cursor: pointer; font: inherit; color: var(--color-text);
background: var(--color-surface-raised); border: 2px solid var(--color-border); border-radius: var(--radius-md); transition: transform var(--transition-fast), border-color var(--transition-fast); }
.geldlabor__ware:hover { border-color: var(--fach-mathe); }
.geldlabor__ware span { font-family: var(--font-mono, monospace); color: var(--color-text-muted); }
.geldlabor__bestellung { margin: 0; }
.geldlabor__tresen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); }
.geldlabor__zone { padding: var(--space-3); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.geldlabor__zone.is-neu { animation: gl-blink 400ms ease; }
@keyframes gl-blink { 50% { border-color: var(--fach-mathe); } }
.geldlabor__titel { margin: 0 0 var(--space-2); font-weight: var(--fw-halbfett); font-size: var(--fs-ui); }
.geldlabor__muenzen { display: flex; flex-wrap: wrap; gap: 4px; min-height: 3rem; align-items: center; }
.geldlabor__muenzen .kasse__geld { cursor: default; width: 2.6rem; height: 2.6rem; font-size: 0.72rem; }
.geldlabor__muenzen .kasse__geld:hover { transform: none; }
.geldlabor__summe { margin: var(--space-2) 0 0; font: 800 1.2rem var(--font-mono, monospace); }
.geldlabor__summe.is-viel { color: var(--color-danger); }
.geldlabor__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.geldlabor__schild { justify-self: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 2px solid var(--color-text); background: var(--color-surface); }
.geldlabor__schild.is-fehler { border-color: var(--color-danger); }
.geldlabor__schild-info { margin: var(--space-2) 0 0; font-size: var(--fs-ui); max-width: 32rem; }
.geldlabor__felder { display: flex; align-items: flex-end; gap: 4px; }
.geldlabor__feld { display: grid; place-items: center; width: 2.4rem; height: 3rem; font: 800 1.8rem var(--font-mono, monospace);
border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-raised); }
.geldlabor__feld.is-ueber { border-style: dashed; border-color: var(--color-danger); color: var(--color-danger); transform: rotate(8deg) translateY(-4px); }
.geldlabor__komma, .geldlabor__eur { font: 800 1.8rem var(--font-mono, monospace); padding-bottom: 0.2rem; }
@media (prefers-reduced-motion: reduce) { .geldlabor__zone.is-neu { animation: none; } }
/* Gemeinsame Darstellungen in Aufgaben (Strichliste, Diagramm, Zahlenstrahl, Tabellen) */
.mx-striche { display: inline-block; vertical-align: middle; max-width: 100%; }
.mx-diagramm, .mx-strahl { display: block; width: 100%; max-width: 560px; height: auto; margin: var(--space-2) 0; }
.mx-diagramm { width: auto; max-width: 100%; } /* Karopapier: feste Kästchengröße aus width/height des SVG */
.mx-skizze { display: block; width: 100%; max-width: 420px; height: auto; margin: var(--space-2) 0; } /* Skizzen zu Sachaufgaben (D.matheSkizze) */
.mx-strahl { max-width: 680px; }
.mx-tab { border-collapse: collapse; margin: var(--space-2) 0; font-variant-numeric: tabular-nums; }
.mx-tab th, .mx-tab td { padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); text-align: center; vertical-align: middle; }
.mx-tab th { background: var(--color-surface-raised); font-weight: var(--fw-halbfett); }
.mx-gross { font-size: 1.35em; }
.mx-wort { font-size: 1.15em; font-weight: var(--fw-halbfett); color: var(--color-primary); overflow-wrap: anywhere; }
.mu__frage mark { background: var(--color-primary-soft); color: var(--color-primary); padding: 0 0.1em; border-radius: 3px; }
.mu__option .mx-striche { background: none; }
/* Labore Kapitel I (js/applets/mathe/diagramm.js, zahlen.js, rechnen.js, groessen.js) */
.dl, .zl, .rl, .bl, .el, .zt { display: grid; gap: var(--space-3); }
.dl__oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); }
.dl__stapel, .dl__liste, .dl__diagramm { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-soft); border: 2px dashed var(--color-border-strong); }
.dl__zettel { display: grid; place-items: center; min-height: 4.5rem; margin: var(--space-2) 0; border-radius: var(--radius-sm); background: var(--color-surface);
border: 1px solid var(--color-border-strong); box-shadow: 3px 3px 0 var(--color-border); transform: rotate(-2deg); }
.dl__zettel.is-wackeln { animation: mu-wackeln 300ms ease; }
.dl__name { font: italic 700 1.6rem var(--font, inherit); color: var(--color-primary); }
.dl__stand { margin: 0 0 var(--space-2); font-size: var(--fs-hilfe); }
.dl__zeilen { display: grid; gap: 6px; }
.dl__zeile { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: var(--space-2); min-height: 2.8rem; padding: 0.3rem 0.7rem; cursor: pointer; text-align: left;
font: 700 1rem var(--font, inherit); color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-sm); }
.dl__zeile:hover { border-color: var(--fach-mathe); }
.dl__steuer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.dl__steuer label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-halbfett); }
.dl__steuer input[type="text"], .dl__steuer input[type="number"], .dl__steuer select { font: 600 1.05rem var(--font-mono, monospace); padding: 0.35rem 0.5rem; max-width: 12rem;
color: var(--color-text); background: var(--color-surface-raised); border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.dl__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
.dl__knopf { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-halbfett); }
.rl__stellen td { min-width: 2.2rem; font: 800 1.5rem var(--font-mono, monospace); }
.rl__stellen td.is-stelle, .rl__key.is-stelle { background: var(--color-primary-soft); color: var(--color-primary); }
.rl__stellen td.is-rechts, .rl__key.is-rechts { background: var(--color-danger-soft); color: var(--color-danger); }
.rl__stellen td.is-rest { color: var(--color-text-muted); }
.rl__key { display: inline-block; padding: 0 0.4rem; border-radius: var(--radius-sm); font-weight: var(--fw-halbfett); }
.rl__frage { margin: 0; }
.rl__info { min-height: 1.5em; margin: 0; }
.bl__blech svg { display: block; width: 100%; max-width: 420px; height: auto; }
.bl input[type="range"] { width: 9rem; accent-color: var(--fach-mathe); }
.bl__rechnungen p { margin: 0.2rem 0; font: 600 1.1rem var(--font-mono, monospace); overflow-wrap: anywhere; }
.el__tab { width: 100%; max-width: 640px; }
.el__tab td { height: 2.6rem; min-width: 1.8rem; font: 800 1.3rem var(--font-mono, monospace); position: relative; }
.el__tab th.is-ziel { background: var(--color-primary-soft); color: var(--color-primary); }
.el__tab td.is-komma { box-shadow: inset -3px 0 0 var(--color-primary); }
.el__tab td.is-komma::after { content: ','; position: absolute; right: -0.35rem; bottom: 0.1rem; color: var(--color-primary); font-weight: var(--fw-fett); }
.el__ergebnis { margin: 0; font-size: 1.1rem; }
.mb-tabelle-wrap .el__tab, .el__tafel { overflow-x: auto; }
.zt svg { display: block; width: 100%; max-width: 680px; height: auto; }
.zt__info { margin: 0; min-height: 1.5em; font-size: 1.05rem; }
@media (max-width: 760px) { .dl__oben { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
.mu__niveaus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mu__niveau { padding: 0.45rem 0.5rem; font-size: var(--fs-hilfe); }
.mu__niveau-nr { font-size: var(--fs-meta); }
.mu__niveau-stand { font-size: var(--fs-meta); }
}
@media (max-width: 760px) {
.mathe-szene, .mb-szene, .mb-mitproblem, .geldlabor__tresen { grid-template-columns: 1fr; }
.mb-problem { order: -1; position: static; max-width: 22em; }
.mb-problem .mb-bild svg { max-height: 24vh; }
.mathe-impuls__kopf { flex-direction: column; }
.mathe-beamer__leiste [data-b="zu"] { position: static; }
}
/* ---------- Mathe 10 · Kapitel II: Koordinatensysteme auf Karo (D.matheKoord) und Labore (js/applets/mathe/quadlabor.js) ---------- */
.mx-koord { display: block; width: 100%; max-width: 560px; height: auto; user-select: none; -webkit-user-select: none; }
.mx-koord .mx-karo line { stroke: var(--color-border); stroke-width: 0.8; }
.mx-koord--frage { max-width: 420px; margin: 0 0 var(--space-3); }
.ql__zug, .ql__tippen { touch-action: none; cursor: grab; }
.ql__zug.is-ziehen { cursor: grabbing; }
.ql__tippen { cursor: crosshair; }
.ql { display: grid; gap: var(--space-3); }
.ql__oben { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; }
.ql__seite { display: grid; gap: var(--space-3); align-content: start; }
.ql__regler { display: grid; gap: var(--space-2); }
.ql__regler[hidden] { display: none; }
.ql__regler label { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) 3.4rem; align-items: center; gap: var(--space-2); font-weight: var(--fw-halbfett); }
.ql__regler input[type="range"] { width: 100%; min-height: 2rem; accent-color: var(--fach-mathe); }
.ql__regler output { font: 700 1.05rem var(--font-mono, monospace); text-align: right; }
.ql__haken { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-weight: var(--fw-halbfett); }
.ql__haken label { display: inline-flex; align-items: center; gap: 0.35rem; }
.ql__modus { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ql__formen { display: grid; gap: var(--space-2); }
.ql__form { padding: 0.5rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.ql__form small { display: block; color: var(--color-text-muted); font-size: 0.78rem; font-weight: var(--fw-halbfett); text-transform: none; letter-spacing: 0.02em; }
.ql__term { font: 700 1.12rem var(--font-mono, monospace); overflow-wrap: anywhere; }
.ql__f1 { color: var(--color-pink); font-weight: var(--fw-fett); }
.ql__f2 { color: var(--color-primary); font-weight: var(--fw-fett); }
.ql__f3 { color: var(--color-success); font-weight: var(--fw-fett); }
.ql__label { font: 700 13px system-ui, sans-serif; fill: currentColor; paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; }
.ql__label.ql__f1 { fill: var(--color-pink); } .ql__label.ql__f3 { fill: var(--color-success); }
.ql__info, .ql__gleichung, .ql__ziel { margin: 0; }
.ql__anzeige p { margin: 0 0 0.3rem; }
.ql__probe { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--fach-mathe); background: var(--color-bg-soft); border-radius: var(--radius-sm); }
.ql__probe p { margin: 0 0 0.3rem; }
.ql__probe-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ql__tab { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ql__tab th, .ql__tab td { padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); text-align: left; }
.ql__tab td { font: 700 1.1rem var(--font-mono, monospace); text-align: right; }
.ql__treffer { color: var(--color-success); font-weight: var(--fw-halbfett); }
.ql__schritte p { margin: 0.15rem 0; }
.ql__fazit { margin-top: var(--space-2) !important; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); font-size: 1.05rem; }
.ql__fazit.is-zwei { background: var(--color-success-soft); }
.ql__fazit.is-eins { background: var(--color-primary-soft); }
.ql__fazit.is-keine { background: var(--color-danger-soft); }
.ql__dk { color: var(--fach-mathe); }
.ql__garten svg { max-width: 460px; }
.ql__aussage { font-size: 1.15rem; font-weight: var(--fw-halbfett); padding: var(--space-2) var(--space-3); border-left: 4px solid var(--fach-mathe); background: var(--color-bg-soft); border-radius: var(--radius-sm); }
.ql__rechnung { display: inline-block; padding: var(--space-2) var(--space-4); font: 600 1.05rem var(--font-mono, monospace); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ql__rechnung p { margin: 0.2rem 0; }
.ql__blech { display: block; width: 130px; height: auto; float: right; margin: 0 0 var(--space-2) var(--space-3); }
@media (max-width: 760px) { .ql__oben { grid-template-columns: 1fr; } }
/* Mathe 10 · Kapitel IV (wachstumlabor.js): Wachstumslabor, Hochzahl-Labor, Modellwerkstatt */
.wl svg.mx-koord { display: block; width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.wl__tabwrap { max-width: 100%; max-height: 22rem; overflow: auto; }
.wl__tabwrap--breit { max-height: none; }
.wl__tab td, .wl__tab th { white-space: nowrap; }
.wl__klein { font-size: 0.9rem !important; color: var(--color-text-muted); }
.wl__terme { display: grid; gap: var(--space-2); }
.wl__wert, .wl__gleichung, .wl__rueck, .wl__grenzen, .wl__passt { margin: 0; }
.wl__gleichung .ql__term { font-size: 1.4rem; }
.wl__probieren { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wl__probieren input, .wl__parfeld input { width: 7rem; padding: 0.35rem 0.5rem; font: 700 1.05rem var(--font-mono, monospace); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.wl__par { display: grid; gap: var(--space-2); }
.wl__parfeld { display: flex; align-items: center; gap: var(--space-2); font: 700 1.05rem var(--font-mono, monospace); }
/* Mathe 10 · Kapitel VI (sinuslabor.js): Einheitskreis-Labor, Abwickler Kreis → Graph, Sinuskurven-Labor */
.tf svg.mx-koord { max-width: 520px; }
.wl.tf__breit svg.mx-koord { max-width: 940px; }
.tf__anzeige { display: grid; gap: var(--space-2); margin: 0; }
.tf__anzeige p { margin: 0; }
.tf__steuer, .tf__term { display: grid; gap: var(--space-3); }
.tf .ql__regler label { grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr) 4.6rem; }
.tf .ql__regler output { font-size: 0.95rem; }
/* Mathe 9 · Kapitel II (parabellabor.js, parabel.js, m9-2.js): waagerechte Wertetabellen, Flächenmodell, kleine Graphen im Trainer */
.pl__scroll { max-width: 100%; overflow-x: auto; }
.pl__wt td { min-width: 2.6rem; text-align: center; font-size: 1rem; }
.pl__wt th { white-space: nowrap; }
.pl__fd { color: var(--color-warning); font-weight: var(--fw-fett); }
.pl__flaeche { max-width: 300px; }
.pl__lupe .ql__tab td { text-align: left; font-size: 1rem; }
.pl__minis { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pl__mini { margin: 0; width: 190px; max-width: 100%; }
.pl__mini figcaption { font-weight: var(--fw-halbfett); margin-bottom: 0.2rem; }
/* Formel in Fragen (Blitzrunde, Vermutung, Beamer): eigene Zeile, nie umbrechen */
.mx-formel { display: block; width: fit-content; max-width: 100%; overflow-x: auto; margin: 0.35em 0 0.35em; white-space: nowrap; font-weight: var(--fw-halbfett); }
/* Wurzel wie im Heft (Nutzer-Vorgabe 2026-10-07): Strich über dem ganzen Radikanden – automatisch über D.matheWurzeln (js/mathe-eingabe.js) */
.mx-wurzel { display: inline-flex; align-items: stretch; white-space: nowrap; line-height: 1.15; vertical-align: baseline; }
/* Haken selbst gezeichnet (Maske), damit er unabhängig von der Schrift genau in den Strich übergeht; das √ bleibt für Kopieren/Vorlesen im Text */
.mx-wurzel__z { display: inline-block; width: 0.62em; overflow: hidden; -webkit-text-fill-color: transparent; background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24' preserveAspectRatio='none'%3E%3Cpath d='M0.6 14.2 L2.9 12.9 L6.1 22.6 L11.3 0.8 L12 0.8' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24' preserveAspectRatio='none'%3E%3Cpath d='M0.6 14.2 L2.9 12.9 L6.1 22.6 L11.3 0.8 L12 0.8' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mx-wurzel__r { border-top: max(1.5px, 0.07em) solid currentColor; padding: 0.08em 0.1em 0 0.06em; }
/* ---------- Mathe 5 · Kapitel III Rechnen (js/applets/mathe/terme.js, rechengesetze.js, potenzen.js, teilbarkeit.js, schriftlich.js, sachaufgaben.js) ---------- */
.tl, .vl, .pf, .po, .hl { display: grid; gap: var(--space-3); }
.tl__wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.tl__term-wahl { font-size: 1rem; }
.tl__term { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; font: 700 1.5rem var(--font-mono, monospace); }
.tl__zahl, .vl__paar { min-width: 3rem; min-height: 3rem; padding: 0 0.5rem; cursor: pointer; font: inherit; color: var(--color-text);
background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.tl__zahl:hover, .vl__paar:hover, .vl__op:hover { border-color: var(--fach-mathe); }
.tl__zahl.is-gewaehlt { border-color: var(--fach-mathe); background: color-mix(in srgb, var(--fach-mathe) 18%, var(--color-surface)); }
.tl__klammer { color: var(--fach-mathe); font-size: 1.15em; }
.tl__op { padding: 0 0.2rem; }
.vl__op { min-width: 2.6rem; min-height: 3rem; cursor: pointer; font: inherit; color: var(--color-text); background: transparent; border: 2px dashed var(--color-border); border-radius: var(--radius-sm); }
.vl__paar { background: var(--color-primary-soft); }
.tl__baum svg { display: block; width: 100%; max-width: 560px; height: auto; user-select: none; -webkit-user-select: none; }
.tl__t { fill: var(--color-text); font: 700 17px var(--font-mono, monospace); pointer-events: none; }
.tl__knoten { cursor: pointer; }
.tl__knoten circle { fill: var(--color-surface-raised); stroke: var(--color-text); stroke-width: 2; }
.tl__knoten.is-bereit circle { fill: color-mix(in srgb, var(--fach-mathe) 25%, var(--color-surface)); stroke: var(--fach-mathe); stroke-width: 3; }
.tl__knoten.is-fertig circle { fill: var(--color-success-soft); stroke: var(--color-success); }
.tl__knoten:focus-visible circle { outline: none; stroke-width: 4; }
.tl__erg { fill: var(--color-success-soft); stroke: var(--color-success); stroke-width: 2; }
.tl__info, .hl__info, .vl__warn { margin: 0; min-height: 1.5em; font-size: 1.05rem; }
.vl__warn:empty { display: none; }
.vl__warn { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-danger-soft); }
.vl__spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); }
.vl__weg { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.vl__weg h4 { margin: 0 0 var(--space-2); }
.vl__weg--stur { border-style: dashed; }
.vl__liste { margin: 0 0 var(--space-2); padding-left: 1.4rem; font: 600 1.05rem var(--font-mono, monospace); }
.vl__liste li { margin: 0.15rem 0; }
.vl__marke { font: 700 0.8rem var(--font, system-ui); padding: 0.05rem 0.4rem; border-radius: var(--radius-pill); }
.vl__liste .is-leicht .vl__marke { color: var(--color-success); background: var(--color-success-soft); }
.vl__liste .is-schwer .vl__marke { color: var(--color-danger); background: var(--color-danger-soft); }
.vl__zaehler, .vl__erg { margin: 0.2rem 0; }
.pf__feld svg { display: block; width: 100%; max-width: 680px; height: auto; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.pf__flaeche--l { fill: var(--color-primary-soft); }
.pf__flaeche--r { fill: var(--color-danger-soft); }
.pf__p--l { fill: var(--color-primary); }
.pf__p--r { fill: var(--color-danger); }
.pf__linie line { stroke: var(--color-text); stroke-width: 3; }
.pf__linie rect { fill: var(--fach-mathe); stroke: var(--color-text); stroke-width: 1.5; }
.pf__terme p { margin: 0.2rem 0; font: 600 1.1rem var(--font-mono, monospace); overflow-wrap: anywhere; }
.pf__links { color: var(--color-primary); }
.pf__rechts { color: var(--color-danger); }
.pf__klein { margin: var(--space-2) 0; }
.pf__klein .mx-karo line, .po__bild .mx-karo line, .tl__baum .mx-karo line { stroke: var(--color-border); stroke-width: 0.8; }
.po__bild svg { display: block; width: 100%; height: auto; }
.po__platte { fill: var(--color-warning); stroke: var(--color-text); stroke-width: 1.2; }
.po__w1 { fill: var(--color-gold-bright); stroke: var(--color-text); stroke-width: 1; }
.po__w2 { fill: var(--color-warning); stroke: var(--color-text); stroke-width: 1; }
.po__w3 { fill: var(--color-pink); stroke: var(--color-text); stroke-width: 1; }
.po__blatt-alt { fill: none; stroke: var(--color-border-strong); stroke-width: 1.5; stroke-dasharray: 6 5; }
.po__blatt, .po__stapel { fill: var(--color-surface-raised); stroke: var(--color-text); stroke-width: 2; }
.po__lage { stroke: var(--color-border-strong); stroke-width: 1; }
.po__t { fill: var(--color-text-muted); font: 600 14px var(--font, system-ui); }
/* Potenz-Labor 9-IV (exponentenlabor) und Größenordnungs-Leiste (groessenleiste), js/applets/mathe/potenzen.js */
.pz, .go { display: grid; gap: var(--space-3); min-width: 0; }
.pz__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pz__lbl { font-weight: var(--fw-halbfett); }
.pz__tab td.pz__l { text-align: left; font-weight: var(--fw-halbfett); }
.pz__tab tr.pz__aktiv th, .pz__tab tr.pz__aktiv td { background: var(--color-primary-soft); }
.pz__tab tr.pz__zwischen th { color: var(--color-text-muted); }
.pz__zeile, .pz__aus { margin: 0; font: 600 1.1rem var(--font-mono, monospace); line-height: 2.2; overflow-wrap: anywhere; }
.pz__aus { line-height: 1.7; }
.pz__f { display: inline-block; min-width: 1.9rem; padding: 0 0.35rem; text-align: center; line-height: 1.8; border: 2px solid var(--color-text); border-radius: var(--radius-sm); }
.pz__f--a { background: var(--color-primary-soft); }
.pz__f--b { background: var(--color-success-soft); }
.pz__f--c { background: var(--color-surface-raised); }
.pz__f--weg { opacity: 0.45; text-decoration: line-through; text-decoration-thickness: 2px; }
.pz__mal { padding: 0 0.2rem; }
.pz__gruppe { white-space: nowrap; }
.pz__achse { stroke: var(--color-text); stroke-width: 2; }
.pz__marke { stroke: var(--color-text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pz__punkt { fill: var(--fach-mathe, var(--color-primary)); stroke: var(--color-text); stroke-width: 1.5; }
.pz__t { fill: var(--color-text); font: 600 12px var(--font, system-ui); }
.pz__leiste svg, .go__leiste svg { display: block; width: 100%; height: auto; }
.pz__wuerfel { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.pz__wuerfel svg { width: min(100%, 320px); height: auto; }
.pz__w1 { fill: var(--color-primary-soft); stroke: var(--color-text); stroke-width: 2; }
.pz__w2 { fill: var(--color-surface-raised); stroke: var(--color-text); stroke-width: 2; }
.pz__w3 { fill: var(--color-bg-deep); stroke: var(--color-text); stroke-width: 2; }
.go__tippflaeche { fill: transparent; cursor: crosshair; }
.go__obj { cursor: pointer; }
.go__obj.is-wahl .pz__punkt { fill: var(--color-gold-bright); }
.go__obj.is-wahl .go__name { font-weight: var(--fw-fett); }
.go__bogen { fill: none; stroke: var(--color-gold-bright); stroke-width: 3; }
.go__meldung { margin: 0; min-height: 1.5em; }
.go__ok { color: var(--color-success); font-weight: var(--fw-halbfett); }
.mu__luecken sup .mu__luecke, .mathe-merksatz sup .mu__luecke { width: 3ch; min-width: 3ch; font-size: 0.8em; padding: 0.1rem 0.2rem; vertical-align: super; }
/* Hunderterfeld (Labor + Bedienfeld „antippen“) */
.hf { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 560px; border-top: 1px solid var(--color-border-strong); border-left: 1px solid var(--color-border-strong); }
.hf__zahl { aspect-ratio: 1; min-height: 2.2rem; padding: 0; cursor: pointer; font: 700 clamp(0.85rem, 2.6vw, 1.1rem) var(--font-mono, monospace); color: var(--color-text);
background: var(--color-surface); border: 0; border-right: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); border-radius: 0;
transition: background var(--transition-fast); }
.hf__zahl:hover { background: color-mix(in srgb, var(--fach-mathe) 12%, var(--color-surface)); }
.hf__zahl[aria-pressed="true"] { color: var(--color-on-primary); background: var(--fach-mathe); }
.hf--labor .hf__zahl[aria-pressed="true"] { color: var(--color-text); background: var(--color-surface); box-shadow: inset 0 0 0 3px var(--fach-mathe); }
.hf--labor .hf__zahl.is-vielfach { background: var(--color-warning); color: var(--color-on-hell); }
.hf__zahl.is-gestrichen { color: var(--color-text-muted); text-decoration: line-through; background: var(--color-bg-soft); }
.hf__zahl.is-prim { box-shadow: inset 0 0 0 3px var(--color-success); }
.hl__label { align-self: center; font-weight: var(--fw-halbfett); margin-right: var(--space-1); }
@media (max-width: 760px) { .vl__spalten { grid-template-columns: 1fr; } }
/* ---------- Mathe 5 · Kapitel II Symmetrie (js/applets/mathe/symmetrie.js, symmetrielabor.js): Karopapier, Geodreieck, Antippen ---------- */
.sy-karo { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 0 var(--space-3); user-select: none; -webkit-user-select: none; }
.sy-karo .mx-karo line { stroke: var(--color-border); stroke-width: 0.8; }
.sy-karo--figur, .sy__linien.sy-karo--figur { max-width: 280px; }
.sy-karo--flach { max-width: 520px; }
.sy__labor { max-width: 680px; margin: 0; }
.sy__zug { touch-action: none; cursor: grab; }
.sy__zug.is-ziehen { cursor: grabbing; }
.sy__tippen { cursor: crosshair; touch-action: none; }
.sy__zellen { max-width: 340px; touch-action: manipulation; }
.sy__zelle { fill: transparent; cursor: pointer; transition: fill var(--transition-fast); }
.sy__zelle:hover { fill: color-mix(in srgb, var(--color-pink) 18%, transparent); }
.sy__zelle.is-an { fill: var(--color-pink); fill-opacity: 0.8; }
.sy__linien { touch-action: manipulation; }
.sy__linie { cursor: pointer; outline: none; }
.sy__treffer { stroke: transparent; stroke-width: 24; pointer-events: stroke; }
.sy__linie.is-an line:not(.sy__treffer) { stroke: var(--color-pink) !important; stroke-width: 5px !important; stroke-dasharray: none !important; }
.sy__linie.is-an text { fill: var(--color-pink) !important; }
.sy__linie:focus-visible line:not(.sy__treffer) { stroke-width: 5px !important; }
.sy__kandidat { stroke: var(--color-border-strong); stroke-width: 2.5; stroke-dasharray: 8 6; }
.sy__strecke { text-decoration: overline; }
.sy__schildbox svg { display: block; width: 150px; height: auto; margin: 0 0 var(--space-2); }
/* Geodreieck */
.sy__gd { cursor: grab; }
.sy__gd-flaeche { fill: var(--color-primary); fill-opacity: 0.13; stroke: var(--color-primary); stroke-width: 1.5; }
.sy__gd-hilf { stroke: var(--color-primary); stroke-width: 0.8; opacity: 0.55; }
.sy__gd-mitte { stroke: var(--color-primary); stroke-width: 1.8; }
.sy__gd-strich { stroke: var(--color-text); stroke-width: 1; }
.sy__gd-zahl { fill: var(--color-text); font: 600 11px system-ui, sans-serif; }
.sy__dreh circle { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 2; }
.sy__dreh text { fill: var(--color-primary); font: 800 18px system-ui, sans-serif; pointer-events: none; }
/* Bedienleisten und Anzeigen */
.sy__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sy__leiste[hidden] { display: none; }
.sy__status { margin: 0; min-height: 1.5em; }
.sy__wert { display: inline-block; margin-right: var(--space-4); font-size: 1.1rem; }
.sy__koord { margin: 0; font: 800 clamp(1.6rem, 4vw, 2.2rem) var(--font-mono, monospace); }
.sy__weg { margin: 0; }
.sy__x { color: var(--color-pink); font-weight: var(--fw-fett); }
.sy__y { color: var(--color-primary); font-weight: var(--fw-fett); }
.sy__haken { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: var(--fw-halbfett); min-height: 2.2rem; }
.sy__haken-liste { display: grid; gap: var(--space-1); }
.sy__ziele { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-2); }
.sy__ziel { display: grid; gap: 0.15rem; padding: 0.55rem 0.8rem; text-align: left; cursor: pointer; color: var(--color-text); background: var(--color-surface-raised);
border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; }
.sy__ziel span { font-size: 0.85rem; color: var(--color-text-muted); }
.sy__ziel[aria-pressed="true"] { border-color: var(--fach-mathe); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fach-mathe) 35%, transparent); }
.sy__ziel.is-geschafft { border-color: var(--color-success); background: var(--color-success-soft); }
.sy__ziel-ok { font-style: normal; font-weight: var(--fw-fett); color: var(--color-success); font-size: 0.9rem; }
.sy__detektor { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--fach-mathe); background: var(--color-bg-soft); border-radius: var(--radius-sm); }
.sy__eig { margin: 0; padding-left: 1.1rem; }
.sy__warnung { margin: 0; color: var(--color-danger); font-weight: var(--fw-halbfett); }
.sy__ohne-karo .mx-karo { display: none; } /* Zöllner-Modus: weißes Plakat, Karo nur auf Wunsch */
/* Rechenkästchen (schriftlich.js): Karopapier, eine Ziffer je Kästchen, Überträge klein */
.rkk-wrap { max-width: 100%; overflow-x: auto; padding: 2px; }
.rkk { --rkk: clamp(1.9rem, 6.5vw, 2.5rem); display: inline-grid; grid-template-columns: repeat(var(--rkk-n), var(--rkk)); font: 700 calc(var(--rkk) * 0.62) var(--font-mono, monospace);
border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); background: var(--color-surface); }
.rkk__zeile { display: contents; }
.rkk__z { display: grid; place-items: center; width: var(--rkk); height: var(--rkk); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.rkk__zeile--strich .rkk__z { border-bottom: 3px solid var(--color-text); }
.rkk__zeile--klein .rkk__z { height: calc(var(--rkk) * 0.62); font-size: 0.62em; color: var(--color-text-muted); }
.rkk__z--fehler { color: var(--color-danger); }
.rkk__z--wert { color: var(--color-primary); }
.rkk__z--klein { font-size: 0.75em; }
.rkk__in { width: 100%; height: 100%; padding: 0; text-align: center; font: inherit; color: var(--color-primary); background: color-mix(in srgb, var(--fach-mathe) 16%, transparent); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fach-mathe) 55%, transparent); caret-color: var(--fach-mathe); }
.rkk__zeile--klein .rkk__in { color: var(--color-text-muted); }
.rkk__in:focus { outline: 2px solid var(--fach-mathe); outline-offset: -2px; background: color-mix(in srgb, var(--fach-mathe) 18%, transparent); }
.rkk__in.is-ok { background: var(--color-success-soft); color: var(--color-success); }
.rkk__in.is-falsch { background: var(--color-danger-soft); color: var(--color-danger); }
/* Labore Themen 6–10 */
.sl, .ml, .dv, .sa { display: grid; gap: var(--space-3); }
.sl__oben, .ml__oben { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; }
.sl__schrift { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.sl__schrift .rkk { --rkk: clamp(1.6rem, 4vw, 2rem); }
.sl__tafel, .dv__tafel { max-width: 100%; overflow-x: auto; }
.sl__tab { border-collapse: collapse; width: 100%; }
.sl__tab th, .sl__tab td { padding: 0.3rem; border: 1px solid var(--color-border-strong); text-align: center; vertical-align: middle; }
.sl__tab th { font-weight: var(--fw-fett); background: var(--color-surface-raised); }
.sl__tab th[scope="row"] { text-align: left; white-space: nowrap; font-family: var(--font-mono, monospace); }
.sl__tab td { min-width: 3.4rem; height: 3.4rem; }
.sl__tab .is-aktiv { box-shadow: inset 0 0 0 3px var(--fach-mathe); }
.sl__tab td.is-voll { background: var(--color-danger-soft); }
.sl__plaetze { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 3.4rem; justify-content: center; vertical-align: middle; }
.sl__p { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-primary); }
.sl__p--b { background: var(--color-pink); }
.sl__p--u { background: var(--color-warning); }
.sl__p--e { background: var(--color-success); }
.sl__p--geld { background: var(--color-gold-bright); }
.sl__anzahl { display: block; font: 700 0.8rem var(--font-mono, monospace); color: var(--color-text-muted); }
.sl__fertig { font-size: 1.1rem; color: var(--color-success); }
.ml__flaeche svg { display: block; width: 100%; max-width: 560px; height: auto; }
.ml__teil { fill: var(--color-surface-raised); stroke: var(--color-text); stroke-width: 2; }
.ml__teil.is-aktiv { fill: var(--color-primary-soft); }
.ml__teil.is-jetzt { fill: color-mix(in srgb, var(--fach-mathe) 35%, var(--color-surface)); }
.ml__t { fill: var(--color-text); font: 700 14px var(--font-mono, monospace); }
.ml__t--klein { font-size: 12px; }
.ml__flaeche .mx-karo line, .prl__baum .mx-karo line { stroke: var(--color-border); stroke-width: 0.8; }
.prl__knoten rect { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2; }
.prl__knoten.is-offen { cursor: pointer; }
.prl__knoten.is-offen rect { stroke: var(--fach-mathe); stroke-width: 3; stroke-dasharray: 5 3; }
.prl__knoten.is-prim circle { fill: var(--color-success-soft); stroke: var(--color-success); stroke-width: 3; }
.prl__wahl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prl__wahl p { margin: 0; }
.prl__stand { margin: var(--space-2) 0 0; }
.sa__text { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-soft); border-left: 4px solid var(--fach-mathe); }
.sa__text p { margin: 0 0 var(--space-2); }
.sa__karten { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sa__karte { display: grid; gap: 0.1rem; min-width: 7rem; min-height: 3.6rem; padding: 0.4rem 0.7rem; text-align: left; cursor: pointer; font: inherit; color: var(--color-text);
background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.sa__karte strong { font: 800 1.1rem var(--font-mono, monospace); }
.sa__karte span { font-size: 0.85rem; color: var(--color-text-muted); }
.sa__karte:hover { border-color: var(--fach-mathe); }
.sa__karte.is-gewaehlt { border-color: var(--fach-mathe); background: color-mix(in srgb, var(--fach-mathe) 15%, var(--color-surface)); }
.sa__karte.is-neu { border-color: var(--color-success); }
.sa__karte.is-weg { opacity: 0.4; text-decoration: line-through; box-shadow: none; }
.sa__ops { display: flex; gap: 6px; }
.sa__ops .mx-taste { min-width: 3.2rem; min-height: 3rem; font-size: 1.4rem; }
.sa__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--fw-halbfett); }
.sa__name input { flex: 1 1 14rem; padding: 0.4rem 0.6rem; font: inherit; color: var(--color-text); background: var(--color-surface-raised); border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.sa__plan { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.sa__schritte { margin: 0; padding-left: 1.4rem; font-family: var(--font-mono, monospace); }
@media (max-width: 760px) { .sl__oben, .ml__oben { grid-template-columns: 1fr; } }
/* ---------- Mathe 5 · Kapitel IV Flächen (js/applets/mathe/flaechenlabor.js, flaechen.js): Labore, Hilfe zum Nachprüfen, Figuren ---------- */
.fl { display: grid; gap: var(--space-3); }
.fl__svg svg, .fl-labor { display: block; width: 100%; height: auto; max-width: 640px; }
.fl__tippen { cursor: pointer; touch-action: manipulation; }
.fl-stepper { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.fl-stepper .btn { min-width: 2.6rem; min-height: 2.6rem; font-size: 1.3rem; justify-content: center; }
.fl-stepper__name { font-weight: var(--fw-halbfett); }
.fl-stepper__wert { min-width: 2ch; text-align: center; font: 800 1.25rem var(--font-mono, monospace); color: var(--color-text); }
.fl-regler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--fw-halbfett); flex: 1 1 18rem; }
.fl-regler input[type="range"] { flex: 1 1 12rem; min-height: 2.4rem; accent-color: var(--fach-mathe); }
.fl__zoom { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: center; }
.fl-zoom { display: block; width: 100%; height: auto; max-width: 420px; }
.fl-zoom--klein { max-width: 300px; }
.fl__zoom-info p { margin: 0 0 var(--space-2); }
.fl__gross { font: 800 clamp(1.8rem, 5vw, 2.6rem) var(--font-mono, monospace); color: var(--color-text); }
.fl-karte { display: block; width: 100%; height: auto; max-width: 560px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.fl__wegstueck { stroke: transparent; stroke-width: 26; cursor: pointer; pointer-events: stroke; }
.fl__nr { cursor: pointer; }
.fl__nr circle { fill: var(--color-surface); stroke: var(--color-pink); stroke-width: 2.5; }
.fl-neu { animation: fl-rein var(--transition-base, 250ms) ease-out; }
@keyframes fl-rein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fl-neu { animation: none; } }
.fl-bild { max-width: 420px; }
.fl-bild--figur { max-width: 260px; }
.fl-paar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.fl-paar .fl-bild { flex: 1 1 10rem; max-width: 260px; }
.fl-hilfe { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.fl-hilfe summary { cursor: pointer; font-weight: var(--fw-halbfett); min-height: 2rem; display: flex; align-items: center; }
.fl-hilfe[open] summary { margin-bottom: var(--space-2); }
.fl-hilfe__bild svg { display: block; width: 100%; height: auto; max-width: 360px; margin: 0 0 var(--space-2); }
.fl-hilfe__bild .fl-streifen, .fl-streifen { max-width: 100%; }
.fl-faerben { max-width: 380px; }
@media (max-width: 760px) { .fl__zoom { grid-template-columns: 1fr; } }
/* Bruch in Termen (D.matheTerm): Schrägstrich nur für textContent (Trainer, Vorlesen) */
.mx-bruch__strich { display: none; }
/* ===== Aufgaben-Design nach Vorbild (Nutzer-Vorgabe 2026-10-08): LaTeX-Satz, Rechenzeilen als graue Leisten, Eingaben „?“ =====
Gilt für Teil C, Trainer, Probearbeit und Labor-Tabellen. Mathe-Satz automatisch über D.matheSatz (js/mathe-eingabe.js). */
/* Zahlen, Variablen und Zeichen (Klammern, |, =, +, −) in derselben Mathe-Schrift. Variablen aus einer Schrift mit echter Kursiv-Form
(Cambria Math hat keine – der Browser würde nur schräg stellen), mit kleinem Nachlauf wie die Kursivkorrektur in LaTeX: f(x), P(2 | 9). */
/* Heft-Ansicht im Eingabefeld (js/mathe-eingabe.js, heftHtml): Textfeld bleibt darunter, die Anzeige liegt darüber */
.mx-heft { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
/* !important: Feldregeln wie „.tr__inline .tr__luecke { color }“ sind spezifischer – sonst stünde der Rohtext doppelt unter der Anzeige */
.mx-heft > input { color: transparent !important; caret-color: transparent !important; }
.mx-heft > input::placeholder { color: var(--color-text-muted); }
.mx-heft.roh > input { color: var(--color-text) !important; caret-color: auto !important; }
.mx-heft__anzeige { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 0.4rem;
overflow: hidden; pointer-events: none; color: var(--color-text); white-space: nowrap; }
.mx-heft.roh .mx-heft__anzeige, .mx-heft.ist-leer:not(.hat-fokus) .mx-heft__anzeige { display: none; }
.mx-heft.ist-leer > input::placeholder { color: var(--color-text-muted); }
.mx-heft.ist-leer.hat-fokus > input::placeholder { color: transparent; }
/* normaler Textfluss (kein Flex): sonst wirkt vertical-align bei Hochzahlen nicht */
.mx-heft__inhalt { display: inline-block; font: inherit; line-height: 1.2; white-space: nowrap; }
.mx-heft__inhalt i { font-family: Cambria, "STIX Two Text", "Times New Roman", serif; font-size: 1.1em; padding-right: 0.03em; }
.mx-heft__inhalt sup { font-size: 0.7em; vertical-align: 0.65em; line-height: 0; }
.mx-heft.mit-bruch > input { height: 3.4rem !important; }
/* Bruch übereinander */
.mx-hb { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0.12em; font-size: 0.82em; line-height: 1.1; vertical-align: middle; }
.mx-hb__z { padding: 0 0.15em 0.08em; border-bottom: 1.5px solid currentColor; }
.mx-hb__n { padding: 0.08em 0.15em 0; }
.mx-hb__leer { display: inline-block; width: 0.6em; height: 0.85em; border: 1px dashed var(--color-border-strong); border-radius: 2px; vertical-align: middle; }
/* Wurzel mit Strich über dem Radikanden */
.mx-hw { display: inline-flex; align-items: flex-end; }
.mx-hw__r { padding: 0.05em 0.1em 0; border-top: 1.5px solid currentColor; margin-left: -0.05em; }
/* Cursor am Ende (das echte Feld zeigt keinen, solange die Heft-Ansicht aktiv ist) */
.mx-heft__caret { display: inline-block; vertical-align: middle; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--color-text); animation: mx-blinken 1s steps(1) infinite; }
@keyframes mx-blinken { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mx-heft__caret { animation: none; } }
/* Mehrere Lösungen: je Lösung ein Kästchen („? und ?“), Einfärbung für die ganze Gruppe (Text + Farbe, nicht nur Farbe) */
.mx-mehrere { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; white-space: nowrap; }
.mx-mehrere__und { color: var(--color-text-muted); }
.mx-mehrere sub { font: 0.7em "Cambria Math", "STIX Two Math", Cambria, serif; }
.mx-tl__hinweis { flex: 1 0 100%; margin: 0 0 4px; font-size: 0.9rem; color: var(--color-text-muted); }
.mx-tl--trenner { font: 700 1rem/1 system-ui, sans-serif !important; padding: 0 0.7rem !important; }
.mx-mehrere.is-ok input { border-color: var(--color-success); background: var(--color-success-soft); }
.mx-mehrere.is-falsch input { border-color: var(--color-danger); background: var(--color-danger-soft); }
.mx-mehrere.is-fast input { border-color: var(--color-warning); }
/* Formeln nie mitten drin umbrechen (D.matheZusammen, D.matheSatz) – das ganze Stück rutscht in die nächste Zeile */
.mx-nowrap { white-space: nowrap; }
.mx-z, .mx-o { font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", Cambria, "Times New Roman", serif; font-size: 1.12em; line-height: 1; }
.mx-v { font-family: Cambria, "STIX Two Text", "Latin Modern Roman", "Times New Roman", serif; font-style: italic; font-size: 1.15em; line-height: 1; padding-right: 0.03em; }
.mx-o { padding: 0 0.04em; }
.mx-teil { margin-right: 0.35rem; font-weight: var(--fw-fett); color: var(--color-primary); }
/* Aufgabentext als Karte mit blauem Rand links */
.mu__frage, .mathe-tr .tr__kontext { padding: 0.85rem 1.1rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md); background: var(--color-surface); font-size: 1.02rem; line-height: 1.7; }
.mu__frage { margin-bottom: var(--space-3); }
.mu__frage p:last-child, .mathe-tr .tr__kontext p:last-child { margin-bottom: 0; }
.mathe-tr .tr__kontext .tr__herkunft { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: var(--fw-fett); letter-spacing: 0.02em; text-transform: none; color: var(--color-text-muted); }
/* Formeln in eigener Zeile und Rechenzeilen: hellgraue, abgerundete Leisten */
.mx-formel { font-weight: 400; overflow-y: hidden; padding: 0.55rem 1rem; margin: 0.5rem 0; border-radius: var(--radius-md); background: var(--color-bg-soft); font-size: 1.05em; }
.mu__paeckchen, .mu__teilaufgaben, .tr__inline .mathe-tr__zeilen { padding: 0; background: none; font-family: inherit; align-items: stretch; }
.mu__luecken p, .mathe-tr__zeilen p { margin: 0 0 0.55rem; padding: 0.55rem 1rem; border-radius: var(--radius-md); background: var(--color-bg-soft);
font-family: inherit; font-size: 1.05rem; line-height: 2.2; }
/* Eingaben: kleine weiße Kästchen mit „?“ direkt in der Rechnung */
.mu__luecke, .tr__inline .tr__luecke, .mathe-merksatz .mu__luecke, .mathe-beob input, .mu__eingabe input {
height: 2.3rem; width: 3.4rem; min-width: 3.4rem; padding: 0 0.6rem; vertical-align: middle; text-align: center;
font: 500 1rem var(--font, system-ui, sans-serif); color: var(--color-text); background: var(--color-surface);
border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: none; }
.mu__eingabe input { width: 9rem; min-height: 0; }
.mu__luecke::placeholder, .tr__luecke::placeholder, .mathe-beob input::placeholder, .mu__eingabe input::placeholder { color: var(--color-text-muted); opacity: 0.85; }
.mu__luecke:focus, .tr__inline .tr__luecke:focus, .mathe-beob input:focus, .mu__eingabe input:focus {
outline: none; border-color: var(--fach-mathe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fach-mathe) 25%, transparent); }
.mu__luecken sup .mu__luecke, .tr__inline sup .tr__luecke { height: 1.75rem; width: 2.5rem; min-width: 2.5rem; font-size: 0.8rem; padding: 0 0.3rem; }
.tr__inline select { height: 2.3rem; border-radius: var(--radius-md); font: 500 1rem var(--font, system-ui, sans-serif); background: var(--color-surface); }
.mu__luecke.is-ok, .tr__inline .is-ok, .mathe-beob input.is-ok { border-color: var(--color-success); background: var(--color-success-soft); }
.mu__luecke.is-falsch, .tr__inline .is-fail, .mathe-beob input.is-falsch { border-color: var(--color-danger); background: var(--color-danger-soft); }
/* ---------- Kapitel 5-V Körper (js/applets/mathe/koerper.js): drehbare Modelle, Netze, Würfelbauten, Schrägbilder ---------- */
.kr { display: grid; gap: var(--space-3); min-width: 0; }
.kr__buehne { position: relative; touch-action: none; cursor: grab; border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface); max-width: 560px; width: 100%; margin: 0 auto; }
.kr__buehne:active { cursor: grabbing; }
.kr__buehne:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.kr__buehne svg, .kr__bild svg { display: block; width: 100%; height: auto; }
.kr__ziehen { position: absolute; right: 8px; bottom: 6px; font-size: 0.78rem; color: var(--color-text-muted); pointer-events: none; }
.kr__steuer { justify-content: center; }
.kr__regler { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-halbfett); flex-wrap: wrap; }
.kr__regler input[type="range"] { width: min(16rem, 60vw); accent-color: var(--color-primary); }
.kr__regler output { min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.kr__check { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.kr__check input { width: 1.2rem; height: 1.2rem; accent-color: var(--color-primary); }
.kr__klein { font-size: 0.9rem; margin: 0; }
.kr__hinweis, .kr__info { text-align: center; margin: 0; }
.kr__zaehler { font-weight: var(--fw-halbfett); font-variant-numeric: tabular-nums; }
.kr .ql__modus { justify-content: center; }
.kr__zwei { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.kr__karo svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.kr__einst p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: center; margin: 0 0 var(--space-2); }
.kr__was { font-weight: var(--fw-halbfett); }
.kr__mehr summary { cursor: pointer; font-weight: var(--fw-halbfett); text-align: center; }
.kr__raster-wahl { display: grid; grid-template-columns: repeat(5, minmax(0, 3rem)); gap: 4px; justify-content: center; }
.kr__kaestchen { aspect-ratio: 1; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }
.kr__kaestchen[aria-pressed="true"] { background: color-mix(in srgb, var(--color-primary) 40%, var(--color-surface)); border-color: var(--color-text); }
.kr__leg { display: inline-block; width: 1.4rem; height: 0; border-top: 4px solid; vertical-align: middle; margin: 0 0.2rem 0 0.6rem; }
.kr__leg--wahl { border-color: var(--color-primary); }
.kr__leg--parallel { border-color: var(--color-gold-bright); }
.kr__leg--senkrecht { border-color: var(--color-pink); }
/* SVG-Bausteine */
.kr__grund { fill: var(--color-surface); }
.kr__schatten { fill: var(--color-on-hell); }
.kr__kante { fill: none; stroke: var(--color-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kr__duenn { stroke-width: 1.2; }
.kr__wkante { fill: none; stroke: var(--color-text); stroke-width: 1.1; stroke-opacity: 0.75; stroke-linejoin: round; }
.kr__raster { fill: none; stroke: var(--color-text); stroke-width: 0.8; stroke-opacity: 0.45; }
.kr__verdeckt { stroke-dasharray: 7 5; stroke: var(--color-text-muted); }
.kr__glas { fill: var(--color-primary); fill-opacity: 0.06; stroke: var(--color-text-muted); stroke-width: 1.4; stroke-linejoin: round; }
.kr__glas--vorn { fill-opacity: 0.04; stroke: var(--color-text); stroke-dasharray: 6 4; }
.kr__seite { fill: var(--color-primary); fill-opacity: 0.08; stroke: none; }
.kr__seite--an { fill-opacity: 0.3; }
.kr__qk { stroke: var(--color-text); stroke-width: 2.5; stroke-linecap: round; }
.kr__qk.kr__verdeckt { stroke: var(--color-text-muted); stroke-width: 2; }
.kr__qk--wahl { stroke: var(--color-primary) !important; stroke-width: 6 !important; stroke-dasharray: none; }
.kr__qk--parallel { stroke: var(--color-gold-bright) !important; stroke-width: 5 !important; }
.kr__qk--senkrecht { stroke: var(--color-pink) !important; stroke-width: 5 !important; }
.kr__hit { stroke: transparent; stroke-width: 20; cursor: pointer; }
.kr__zahl { fill: var(--color-text); font: 700 20px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.kr__mass { fill: var(--color-text); font: 600 15px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central;
paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; stroke-linejoin: round; }
.kr__buchst { fill: var(--color-primary); font: italic 700 16px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.kr__ecke { fill: var(--color-pink); stroke: var(--color-surface); stroke-width: 1.5; }
.kr__ecke--weg { fill: var(--color-surface); stroke: var(--color-pink); stroke-width: 2; }
.kr__nz { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2; }
.kr__sk { stroke: var(--color-text); stroke-width: 2.4; stroke-linecap: round; }
.kr__sk--weg { stroke-dasharray: 6 5; }
.kr__sk--eigen { stroke: var(--color-primary); }
.kr__gp { fill: var(--color-text-muted); fill-opacity: 0.6; }
.kr__gp.is-an { fill-opacity: 1; }
.kr__gp.is-an { fill: var(--color-primary); }
.kr__gp-hit { fill: transparent; cursor: pointer; }
.kr__zeichnen { max-width: 400px; margin: 0 auto; touch-action: manipulation; }
.kr__schraeg, .kr__netz, .kr__plan { display: block; width: 100%; height: auto; margin: 0 auto; }
/* Bilder in Aufgaben */
.kr__bild { max-width: 440px; margin: var(--space-2) auto; }
.kr__bild--klein { max-width: 220px; }
.kr__netze { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--space-3); margin: var(--space-2) 0; align-items: end; }
.kr__netze figure { margin: 0; text-align: center; }
.kr__netze figcaption { font-weight: var(--fw-fett); color: var(--color-primary); margin-bottom: 0.25rem; }
.kr__netze svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.kr-modell { margin-top: var(--space-2); }
/* Körper-Werkstatt (js/applets/mathe/koerperwerkstatt.js): Regal, Tisch, Aufträge */
.kr__boden { fill: var(--color-primary); fill-opacity: 0.05; stroke: var(--color-border-strong); stroke-width: 1; }
.kr__raster--boden { stroke-opacity: 0.2; }
.kw__regal { display: grid; gap: var(--space-2); }
.kw__gruppe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.kw__gname { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); margin-right: var(--space-1); }
.kw__gruppe .mx-taste:disabled { opacity: 0.4; cursor: default; }
.kw__auftrag { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); min-width: 0; }
.kw__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.kw__nummern { display: flex; flex-wrap: wrap; gap: 4px; }
.kw__nr { min-width: 2rem; height: 2rem; padding: 0 0.4rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface);
color: var(--color-text); font: 600 0.85rem var(--font-mono); cursor: pointer; }
.kw__nr[aria-current="step"] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.kw__nr.is-ok { border-color: var(--color-success); background: var(--color-success-soft); }
.kw__nr:disabled { opacity: 0.4; cursor: default; }
.kw__text { margin: 0; }
.kw__felder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.kw__feld { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: var(--fw-halbfett); }
.kw__einheit { font-weight: 500; }
.kw__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kw__rueck { margin: 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.kw__rueck:empty { display: none; }
.kw__rueck.is-ok { border-color: var(--color-success); background: var(--color-success-soft); }
.kw__rueck.is-fail { border-color: var(--color-danger); background: var(--color-danger-soft); }
.kw__rueck.is-tipp { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
.kw__mark { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); }
.kw__name { font-weight: var(--fw-halbfett); }
.kw__masse { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.kw__masse .kr__regler input[type="range"] { width: min(11rem, 60vw); }
/* 9-III: Prismen-Labor (Umfang markieren, Schnittebene, Querschnitt) und Kreis-Labore (js/applets/mathe/kreise.js) */
.kr__betont { fill: none; stroke: var(--color-pink); stroke-width: 5; stroke-linecap: round; }
.kr__ebene { fill: var(--color-primary); fill-opacity: 0.1; stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 6 4; }
.kr__schnitt { fill: var(--color-pink); fill-opacity: 0.55; stroke: var(--color-pink); stroke-width: 2.5; stroke-linejoin: round; }
.kz__bild { max-width: 640px; width: 100%; margin: 0 auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); touch-action: none; }
.kz__bild svg, .kz-modell svg { display: block; width: 100%; height: auto; }
.kz__strich { stroke: var(--color-text); stroke-width: 2; fill: none; stroke-linecap: round; }
.kz__duenn { stroke: var(--color-text); stroke-width: 1.2; }
.kz__text { fill: var(--color-text); font: 600 15px system-ui, sans-serif; paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; stroke-linejoin: round; }
.kz__text--gross { font-size: 18px; font-weight: var(--fw-halbfett); }
.kz__faden { stroke: var(--color-pink); stroke-width: 6; stroke-linecap: round; }
.kz__rand { fill: var(--color-pink); stroke: var(--color-surface); stroke-width: 2; }
.kz__scheibe { fill: var(--fach-mathe); fill-opacity: 0.16; stroke: var(--color-text); stroke-width: 2.5; }
.kz__teilA { fill: var(--color-gold-bright); fill-opacity: 0.55; stroke: var(--color-text); stroke-width: 1.2; stroke-linejoin: round; }
.kz__teilB { fill: var(--color-primary); fill-opacity: 0.45; stroke: var(--color-text); stroke-width: 1.2; stroke-linejoin: round; }
.kz__sektor { fill: var(--color-gold-bright); fill-opacity: 0.55; stroke: var(--color-text); stroke-width: 2; stroke-linejoin: round; }
.kz__bogen { fill: none; stroke: var(--color-pink); stroke-width: 6; stroke-linecap: round; }
.kz__schnittlinie { stroke: var(--color-text-muted); stroke-width: 1.5; stroke-dasharray: 6 5; }
.kz__griff { fill: var(--color-primary); stroke: var(--color-surface); stroke-width: 3; cursor: grab; }
.kz__notizen { margin: 0 auto; padding-left: 1.2rem; max-width: 34rem; }
.kz__werte { text-align: center; margin: 0; font-variant-numeric: tabular-nums; }
/* ---------- Kapitel 5-VI / 6-I Brüche (js/applets/mathe/bruchlabor.js, brueche.js) ---------- */
.br-labor { display: grid; gap: var(--space-3); }
.br-modi { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.br-modus, .br-chip { font: inherit; font-weight: var(--fw-halbfett); padding: 0.4rem 0.85rem; min-height: 2.6rem; border-radius: var(--radius-sm); border: 2px solid var(--color-border-strong);
background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.br-modus[aria-pressed="true"], .br-chip[aria-pressed="true"] { border-color: var(--fach-mathe); background: var(--color-primary-soft); }
.br-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.br-label { font-weight: var(--fw-halbfett); }
.br-klein { font-size: 0.9rem; margin: 0; }
.br-stepper { display: inline-flex; align-items: center; border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.br-stepper button { font: 800 1.2rem var(--font-mono, monospace); width: 2.6rem; min-height: 2.6rem; border: 0; background: var(--color-surface-raised); color: var(--color-text); cursor: pointer; }
.br-stepper output { min-width: 2.4rem; text-align: center; font: 800 1.15rem var(--font-mono, monospace); }
.br-regler { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--fw-halbfett); }
.br-regler input[type="range"] { width: min(14rem, 50vw); }
.br-regler output { font: 800 1.15rem var(--font-mono, monospace); min-width: 1.8rem; text-align: center; }
.br-flaeche svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.br-flaeche--tafel svg, .br-flaeche--werk svg { max-width: 420px; }
.br-flaeche--ganzes svg { max-width: 640px; }
.br-flaeche--hundert svg { max-width: 360px; touch-action: none; }
.br-flaeche--strahl svg { max-width: 760px; }
.br-anzeige { margin: 0; font-size: 1.1rem; }
.br-meldung:empty { display: none; }
/* Tafel und Teile */
.br-stueck-tafel { fill: var(--color-bg-deep); stroke: var(--color-border-strong); stroke-width: 1.2; }
.br-stueck-tafel.is-an { fill: var(--fach-mathe); stroke: var(--color-text); }
.br-gruppe { fill: transparent; stroke: var(--color-text); stroke-width: 3.5; cursor: pointer; }
.br-gruppe:hover, .br-gruppe:focus-visible { stroke: var(--color-primary); outline: none; }
.br-block { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2; stroke-dasharray: 6 4; }
.br-block.is-gegeben { stroke-dasharray: none; stroke-width: 3; }
.br-teil, .br-fteil { fill: var(--color-surface-raised); stroke: var(--color-text); stroke-width: 1.2; }
.br-teil.is-an, .br-fteil.is-an { fill: var(--fach-mathe); }
.br-grob { stroke: var(--color-text); stroke-width: 3.5; }
.br-rand { fill: none; stroke: var(--color-text); stroke-width: 3.5; }
.br-fein { stroke: var(--color-text); stroke-width: 1; stroke-dasharray: 3 3; }
.br-hilfslinie { stroke: var(--color-danger); stroke-width: 3; }
.br-werkstatt { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-3); align-items: center; }
@media (max-width: 640px) { .br-werkstatt { grid-template-columns: 1fr; } }
.br-symbol { text-align: center; }
.br-gross { font-size: 2rem; font-weight: var(--fw-fett); }
.br-pfeil { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.br-pfeil small { color: var(--color-primary); font-weight: var(--fw-fett); font-size: 1rem; }
/* Bruchstreifen */
.br-streifen-liste { display: grid; gap: var(--space-3); }
.br-sz { display: grid; gap: 6px; }
.br-sz__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.br-sz__durch { color: var(--color-text-muted); }
.br-sz__wert { font-size: 1.15rem; font-weight: var(--fw-halbfett); }
.br-sz svg { display: block; width: 100%; height: auto; cursor: pointer; }
.br-geht-nicht { font-size: 0.85rem; color: var(--color-danger); font-weight: var(--fw-halbfett); }
/* Hunderterfeld */
.br-kaestchen { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1; cursor: pointer; }
.br-kaestchen.is-an { fill: var(--fach-mathe); }
.br-hgruppe { fill: none; stroke: var(--color-text); stroke-width: 2.5; pointer-events: none; }
.br-hundert--feld { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; touch-action: none; }
.br-hlinie { fill: none; stroke: var(--color-text); stroke-width: 2; pointer-events: none; }
/* Pizzen verteilen */
.br-pizzen { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.br-pizza { width: min(124px, 28vw); height: auto; touch-action: none; }
.br-pizza__rand { fill: var(--color-warning); stroke: var(--color-text); stroke-width: 2; }
.br-pstueck { fill: var(--color-gold-bright); stroke: var(--color-text); stroke-width: 1.5; cursor: grab; }
.br-pstueck.is-weg { fill: var(--color-surface-raised); stroke-dasharray: 4 3; cursor: default; }
.br-pstueck.is-gewaehlt { fill: var(--fach-mathe); }
.br-pstueck--teller { cursor: pointer; }
.br-teller-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--space-2); }
.br-teller { padding: var(--space-2); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-soft); text-align: center; cursor: pointer; }
.br-teller.is-ziel { border-color: var(--fach-mathe); }
.br-teller__name { margin: 0; font-weight: var(--fw-fett); }
.br-teller__zahl { margin: 0; font-size: 0.95rem; }
.br-teller__svg { display: block; width: 100%; max-height: 110px; height: auto; }
.br-teller__platz { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 2; stroke-dasharray: 5 4; }
.br-geist { position: fixed; z-index: 1000; width: 70px; height: 70px; margin: -35px 0 0 -35px; pointer-events: none; opacity: 0.85; }
.br-geist svg { width: 100%; height: 100%; }
/* Zahlenstrahl */
.br-achse { stroke: var(--color-text); stroke-width: 3; }
.br-achse-pfeil { fill: var(--color-text); }
.br-strich { stroke: var(--color-text); stroke-width: 2; }
.br-strich.is-ganz { stroke-width: 3; }
.br-strich-ziel { fill: transparent; cursor: pointer; }
.br-strahl-zahl { fill: var(--color-text); font: 700 20px system-ui, sans-serif; }
.br-zaehl { stroke: var(--fach-mathe); stroke-width: 9; stroke-linecap: round; opacity: 0.55; }
.br-zaehl-text { fill: var(--color-primary); font: 800 18px system-ui, sans-serif; }
.br-punkt { fill: var(--color-primary); stroke: var(--color-text); stroke-width: 1.5; }
.br-punkt-name { fill: var(--color-primary); font: 800 22px system-ui, sans-serif; }
.br-marke { fill: var(--color-danger); stroke: var(--color-text); stroke-width: 1.5; }
.br-marke-z { fill: var(--color-danger); font: 800 17px system-ui, sans-serif; }
.br-marke-strich { stroke: var(--color-danger); stroke-width: 2; }
.br-markieren .mx-bf__bruch { margin: 0 var(--space-1); }
/* Figuren in Teil C und im Trainer */
.br-fig { display: block; width: 100%; height: auto; margin: var(--space-2) auto; }
.br-fig--kreis { max-width: 200px; }
.br-fig--rechteck { max-width: 300px; }
.br-fig--streifen { max-width: 460px; }
.br-fig--strahl { max-width: 620px; }
.br-fig--hundert { max-width: 240px; }
.br-fig--pizza { max-width: 460px; }
.br-fig--klein.br-fig--kreis { max-width: 120px; }
.br-fig--klein.br-fig--rechteck { max-width: 170px; }
.mu__option .br-fig { margin: 0; }
.br-fteil--hk { stroke-width: 0.8; stroke: var(--color-border-strong); }
.br-pizza-bild { fill: var(--color-warning); stroke: var(--color-text); stroke-width: 2; }
.br-pizza-belag { fill: var(--color-gold-bright); }
.br-teller-bild { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2; }
.br-svg-klein { fill: var(--color-text); font: 600 14px system-ui, sans-serif; }
/* Vergleichen mit Zeichen-Chips */
.br-vgl { display: grid; gap: var(--space-2); }
.br-vgl__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
background: var(--color-bg-soft); border: 2px solid transparent; }
.br-vgl__zeile.is-ok { border-color: var(--color-success); }
.br-vgl__zeile.is-falsch { border-color: var(--color-danger); }
.br-vgl__b { font-size: 1.35rem; min-width: 2.5rem; text-align: center; }
.br-chip--zeichen { min-width: 3rem; font: 800 1.3rem var(--font-mono, monospace); }
/* Teil B: Lücken mit Bruch als Lösung (Platzhalter aus js/mathe/m5-6.js) – Platzhalter nicht abschneiden */
.mathe-erkunden input[placeholder="Bruch"] { min-width: 4.6rem; }
.mathe-erkunden input[placeholder="z. B. 1 1/4"] { min-width: 7.5rem; }
/* Bruchfeld: Zähler über Nenner (js/mathe-ueben.js, art 'zahl' mit bruchfeld) */
.mx-bf { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; font-size: 1.3rem; }
.mx-bf__bruch { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; vertical-align: middle; }
.mx-bf__k { width: 3rem; min-width: 3rem; min-height: 3rem; text-align: center; font: 700 1.3rem var(--font-mono, monospace); padding: 0.2rem 0.3rem;
border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.mx-bf__k:focus { outline: 3px solid var(--color-primary); outline-offset: 1px; }
.mx-bf__strich { display: block; align-self: stretch; height: 3px; background: var(--color-text); border-radius: 2px; }
/* ---------- 9-VI / 10-I Daten und Wahrscheinlichkeit: Labore (js/applets/mathe/stochastiklabor.js) und Tafeln (stochastik.js, m9-6.js) ---------- */
.sto__balken, .sto__baum { display: block; width: 100%; height: auto; max-width: 620px; }
.sto__baum { margin-top: var(--space-3); }
.sto__vergleich { margin-top: var(--space-3); }
.sto__bezug, .sto__zahlen { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--fach-mathe); background: var(--color-bg-soft); border-radius: var(--radius-sm); }
.sto__legende { margin: 0; color: var(--color-text-muted); }
.sto__gesamt { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-halbfett); }
.sto__gesamt select { min-height: 2.4rem; padding: 0.2rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; }
.sto__vf { width: 100%; max-width: 560px; }
.sto__vf th { padding: 0; }
.sto__vf td.is-bezug { background: var(--color-primary-soft); outline: 2px solid var(--fach-mathe); outline-offset: -2px; }
.sto__summe td, .sto__summe th { border-top: 2px solid var(--color-text); }
.sto__kopf { display: block; width: 100%; min-height: 2.6rem; padding: 0.3rem 0.6rem; border: 0; background: transparent; color: var(--color-text); font: 700 1rem system-ui, sans-serif; cursor: pointer; text-align: left; }
.sto__kopf:hover, .sto__kopf:focus-visible { background: var(--color-bg-soft); }
.sto__kopf.is-an { background: var(--color-primary-soft); color: var(--fach-mathe); }
.sto__raster { display: block; max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.sto__lupe { margin-top: var(--space-3); }
.sto__punkt { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; vertical-align: middle; }
.sto__punkt--m { background: var(--color-danger); }
.sto__punkt--a { background: var(--color-warning); }
.sto__schalter { flex-direction: column; align-items: flex-start; }
/* Vierfeldertafel in Aufgaben (Teil C, Trainer, Teil D): Lücken als Buchstaben a, b, c */
.mx-vf { border-collapse: collapse; margin: var(--space-2) 0; font-variant-numeric: tabular-nums; }
.mx-vf th, .mx-vf td { padding: 0.35rem 0.8rem; border: 1px solid var(--color-border-strong); text-align: right; }
.mx-vf th { text-align: left; background: var(--color-bg-soft); }
.mx-vf tr:last-child td, .mx-vf tr:last-child th { border-top: 2px solid var(--color-text); }
.mx-vf td:last-child, .mx-vf th:last-child { border-left: 2px solid var(--color-text); }
.mx-vf .mx-vf__frei { color: var(--fach-mathe); font-weight: var(--fw-halbfett); text-align: center; }
/* ---------- Zentrale Prüfung 10 (mathe/zp10.html, js/mathe-zp10.js) ---------- */
#zp-app h2 { margin-top: var(--space-6); font-size: 1.3rem; }
.mx-skizze-box { margin: var(--space-3) 0; } /* Bilder in den ZP10-Aufgaben (js/mathe/zp10.js) */
.zp-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
.zp-teil { padding: var(--space-4); border-top: 3px solid var(--fach-mathe); }
.zp-teil h3 { margin: 0 0 var(--space-2); font-size: 1.1rem; }
.zp-teil p { margin: 0 0 var(--space-2); }
.zp-online { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.zp-online > div { flex: 1 1 22rem; }
.zp-online p { margin: 0; }
.zp-tabelle { width: 100%; border-collapse: collapse; }
.zp-tabelle th, .zp-tabelle td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); text-align: left; vertical-align: top; }
.zp-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.zp-themen { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.zp-themen li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.zp-themen li > span:last-child { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* ---------- Mathe-Grundlagen (mathe/grundlagen.html, js/mathe-grundlagen.js): Diagnose, Plan, Runde ---------- */
.gl-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
border-left: 4px solid var(--fach-mathe); color: var(--color-text); text-decoration: none; }
.gl-link:hover { border-color: var(--color-primary); }
.gl-link__text { display: grid; gap: 0.2rem; }
.gl-start { max-width: 760px; }
.gl-start h2, .gl-plan h2, .gl-runde-karte h2, .gl-ende h2 { margin-top: 0; font-size: 1.25rem; }
.gl-schritte { padding-left: 1.3rem; }
.gl-schritte li + li { margin-top: var(--space-2); }
.gl-klasse { margin: var(--space-3) 0; }
.gl-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gl-chip { min-height: 44px; padding: 0 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-raised);
color: var(--color-text); font: inherit; font-weight: var(--fw-halbfett); cursor: pointer; }
.gl-chip[aria-pressed="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.gl-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.gl-unten { margin-top: var(--space-5, 2rem); }
.gl-oben { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: var(--space-4); }
.gl-planliste { margin: 0; padding-left: 1.3rem; }
.gl-planliste li { margin-bottom: var(--space-3); }
.gl-planliste li > strong { display: block; }
.gl-planliste .btn { margin-top: 0.4rem; display: inline-flex; }
.gl-fehler { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: var(--color-text-muted); }
.gl-bausteine { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.gl-baustein { border-top: 4px solid var(--r, var(--fach-mathe)); }
.gl-baustein h3 { margin: 0 0 var(--space-2); }
.gl-baustein ul, .gl-ende__liste { list-style: none; margin: 0; padding: 0; }
.gl-fert { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--color-border); }
.gl-fert:first-child { border-top: 0; }
.gl-fert__name { flex: 1 1 10rem; font-weight: var(--fw-halbfett); }
.gl-fert .btn { margin-left: auto; }
.gl-ende__liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.45rem 0; border-top: 1px solid var(--color-border); }
.gl-meter { display: inline-flex; gap: 3px; }
.gl-meter i { width: 14px; height: 8px; border-radius: 2px; background: var(--color-bg-deep); border: 1px solid var(--color-border-strong); }
.gl-meter i.an { background: var(--color-success); border-color: var(--color-success); }
.gl-legende { max-width: 760px; font-size: 0.9rem; margin-top: var(--space-4); }
.gl-balken { display: block; height: 8px; border-radius: var(--radius-sm); background: var(--color-bg-deep); overflow: hidden; }
.gl-balken span { display: block; height: 100%; background: var(--fach-mathe); }
.gl-stand { font-size: 0.9rem; }
.gl-pause { margin-top: var(--space-3); }
.gl-hilfe:empty { display: none; }
.gl-xp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gl-hilfe + .mu__knoepfe { margin-top: var(--space-3); }
.gl-erklaert { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-surface-raised); }
.gl-erklaert h4 { margin: 0 0 var(--space-2); }
.gl-erklaert p { margin: 0 0 var(--space-2); line-height: 1.7; }
.gl-erklaert__bsp { margin-bottom: 0 !important; }
.gl-koord svg { display: block; width: 100%; max-width: 340px; height: auto; margin: var(--space-2) 0; }