/* Do-matik – Mathe-Bereich: mathe/index.html (Stufen), stufe.html (Kapitel), thema.html (Einstieg nur Lehrkräfte,
   Teil A 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); }
/* Spickzettel unter Teil C als Textlink wie die Wege der Stufenseite (2026-10-22) */
.mathe-spick { margin: var(--space-5) 0 0; font-size: var(--fs-ui); }
.mathe-spick a { font-weight: var(--fw-mittel); text-decoration: none; }
.mathe-spick a:hover { text-decoration: underline; }

/* Spickzettel je Kapitel (mathe/spickzettel.html, js/mathe-spickzettel.js, 2026-10-22) */
.sz-werkzeug { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.sz-thema { margin-bottom: var(--space-6); }
/* Themen-Kopf im Stil „Do-matik“ (2026-10-22): „/ Thema 2“ als Eyebrow, Titel 600, Link rechts unten ohne Unterstrich (Hover unterstreicht) */
.sz-thema__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.sz-thema__kopf .eyebrow { margin-bottom: 0.2rem; }
.sz-thema__kopf h2 { margin: 0; font-size: 1.35rem; font-weight: var(--fw-titel); letter-spacing: -0.01em; }
.sz-thema__link { font-size: var(--fs-ui); white-space: nowrap; text-decoration: none; }
.sz-thema__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.sz-gesperrt { display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 0.8em 1em; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
@media print {
  body[data-mathe="spickzettel"] #site-header, body[data-mathe="spickzettel"] #site-footer, .sz-werkzeug, .mathe-zurueck, .sz-thema__link { display: none !important; }
  .sz-thema { break-inside: avoid; margin-bottom: 1rem; }
  .sz-gesperrt { display: none; }
}

/* 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 { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
/* Musterlösung unter der jeweiligen Aufgabe (2026-10-26): Container mit grünem Strich links wie die Lernkästen */
.mathe-tr__loesung { position: relative; margin-top: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 4px);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2, var(--surface-2)); }
.mathe-tr__loesung::before { content: ""; position: absolute; left: 0; top: var(--radius-lg); bottom: var(--radius-lg); width: 3px; background: var(--color-success, var(--color-primary)); }
.mathe-tr__loesung p { margin: 0; }
.mathe-tr__loesung .mathe-tr__loesung-titel { margin-bottom: var(--space-1); font-weight: var(--fw-halbfett); }
.mathe-tr__info p { margin: 0 0 0.4rem; }
/* Hinweis vor jedes Kapitel-Checks: Ü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;
  --mx-strich: var(--color-warning); 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-knopf); }
/* 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, .tr-spick, .rl,
  .mathe-tr__info .tr__aktionen, .mathe-tr__loesung[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] { 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); }
/* Stil „Do-matik“ (2026-10-22): Motiv wie in den Kapitel-Karten auf getönter 14-px-Fläche statt blass im Hintergrund */
.mathe-kopf__motiv { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: min(28%, 200px); aspect-ratio: 16 / 9;
  border-radius: var(--radius-flaeche); background: color-mix(in srgb, var(--k) 9%, var(--color-surface)); pointer-events: none; }
.mathe-kopf__motiv svg { display: block; width: 62%; height: auto; }
@media (max-width: 560px) { .mathe-kopf.mit-motiv { padding-right: 0; } .mathe-kopf__motiv { display: none; } }
.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-knopf);
  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-halbfett); 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: Einstieg (nur Lehrkräfte) */
.mathe-teil-a { margin-bottom: var(--space-6); }   /* runde Fläche: nur der feine Rand wie .card, keine farbige Einzelkante */
.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); }
/* Einstieg, Lehreransicht (Nutzer-Vorgabe 2026-10-25): nur „Beamer starten“ und daneben der Link zum Arbeitsblatt */
.mathe-a-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.mathe-a-start .btn { display: inline-flex; align-items: center; gap: 0.5em; }
/* Einstieg und Sicherung als Karte mit Foliensätzen untereinander (2026-10-27, js/mathe.js beamerKarte) */
.mathe-lk { margin-bottom: var(--space-6); }
.mathe-lk h2 { display: flex; align-items: center; gap: var(--space-2); }
.mathe-lk__liste { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.mathe-lk__satz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.mathe-lk__nr { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--fach-mathe); font-size: var(--fs-hilfe); }
.mathe-lk__text { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; }
.mathe-lk__text small { font-size: var(--fs-meta); color: var(--text-muted); }
.mathe-lk__satz .btn { flex: none; display: inline-flex; align-items: center; gap: 0.4em; }
.mathe-lk__fuss { margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mathe-lk__fuss a { display: inline-flex; align-items: center; gap: 0.4em; }
/* Kasten „Ohne iPads“ im Reiter Unterricht (2026-10-27): Fläche mit zwei Kacheln für AB 1 und AB 2 */
.mathe-ab { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-flaeche); background: var(--color-surface); }
.mathe-ab h3 { margin: 0 0 var(--space-3); }
.mathe-ab__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3); }
.mathe-ab__kachel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.mathe-ab__icon { flex: none; display: grid; place-items: center; color: var(--fach-mathe); }
.mathe-ab__icon svg { width: 1.6rem; height: 1.6rem; color: inherit; stroke: currentColor; }
.mathe-ab__text { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; }
.mathe-ab__text small { font-size: var(--fs-meta); color: var(--text-muted); }
.mathe-ab__kachel .btn { flex: none; }
.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-halbfett); 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) */
/* Stil „Do-matik“ (2026-10-22): Leiste als Karte wie .st-karte (14 px, Rand, zarter Schatten, dunkel ohne), aktiver Reiter mit gerader
   Linie unten (var(--linie-unten)) auf blasser Akzentfläche, Hover nur Fläche */
.mathe-teile { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 var(--space-6);
  padding: 6px; border-radius: var(--radius-flaeche); background: var(--color-surface); border: 1px solid var(--border); scroll-margin-top: 5rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 5%, transparent); }
:root[data-theme="dark"] .mathe-teile { box-shadow: none; }
.mathe-teile button { display: flex; align-items: center; gap: var(--space-3); min-height: 3.4rem; padding: 0.45rem 0.8rem; text-align: left; cursor: pointer;
  font: var(--fw-halbfett) var(--fs-ui) var(--font, inherit); color: var(--text-secondary); background: none; border: 0; border-radius: var(--radius-knopf);
  transition: background var(--transition-fast), color var(--transition-fast); }
.mathe-teile button:hover { color: var(--color-text); background: var(--surface-sunken); }
.mathe-teile button[aria-selected="true"] { color: var(--color-text); background: var(--linie-unten), var(--nav-aktiv-soft); }
.mathe-teile button > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mathe-teile small { font-size: var(--fs-meta); font-weight: var(--fw-normal); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mathe-teile__b { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-family: var(--font-label); font-weight: 500;
  font-size: var(--fs-hilfe); color: var(--fach-mathe); border: 1.5px 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); }
/* Fokusring nur bei Tastatur (2026-10-27): nach dem Klick sah der aktive Reiter sonst doppelt umrandet aus */
.mathe-teile button:focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* Reiter „Unterricht“ (Lehrkraft): Icon statt Buchstabe im Kreis */
.mathe-teile__b--i svg { width: 1rem; height: 1rem; color: inherit; stroke: currentColor; }
/* Unterricht (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; }
.mathe-teile button[data-teil="a"][aria-selected="true"] .mathe-teile__b { color: var(--color-on-primary); border-style: solid; }
@media (max-width: 560px) {
  /* Handy: Reiter so breit wie ihr Wort */
  .mathe-teile { grid-auto-columns: auto; justify-content: space-between; gap: 0; padding: 4px; }
  .mathe-teile button { flex-direction: column; align-items: center; gap: 2px; padding: 0.4rem 0.15rem; letter-spacing: -0.01em; text-align: center; font-size: var(--fs-meta); }
  .mathe-teile button > 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; padding: 0.4rem 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-flaeche);   /* wie die Flächen darüber und darunter (2026-11-03, Nutzer) */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.mu__niveau:hover { border-color: var(--hover-rand); }
/* gewähltes Niveau: gerade Linie unten wie die Reiter (Stil „Do-matik“, 2026-10-22), endet vor den Rundungen */
.mu__niveau[aria-pressed="true"] { border-color: var(--fach-mathe); background: linear-gradient(var(--nav-aktiv), var(--nav-aktiv)) 50% 100% / calc(100% - 2 * var(--radius-flaeche)) 2px no-repeat, var(--nav-aktiv-soft); }
.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; flex: 1 1 12rem; gap: 4px; margin: 0; }
.mu__balken { align-items: center; }
.mu__zaehler { font-size: var(--fs-hilfe); color: var(--color-text-muted); white-space: nowrap; }
/* dünner, voll gerundeter Balken (Apple-Art); die Trefferfläche wächst über ::after, die aktuelle Aufgabe ist gefüllt und höher */
.mu__segment { flex: 1; display: grid; place-items: center; height: 8px; border-radius: 999px; font-size: 0; line-height: 1;
  color: var(--color-text-muted); background: var(--color-border); border: 0; transition: background var(--transition-fast), height var(--transition-fast); }
/* Erreichte Aufgaben sind anklickbar (Nutzer-Vorgabe 2026-10-22); die Trefferfläche reicht über den schmalen Balken hinaus (Finger) */
button.mu__segment { position: relative; padding: 0; font: inherit; font-size: 0.65rem; cursor: pointer; }
button.mu__segment::after { content: ''; position: absolute; inset: -10px 0; }
button.mu__segment:hover { border-color: var(--fach-mathe); }
button.mu__segment:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mu__segment.is-jetzt { background: var(--fach-mathe); height: 12px; }
.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-text-muted); }
.mu__segment.is-ansicht { height: 12px; }
.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-knopf); }
.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); --mx-strich: var(--color-warning); }
.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; --mx-strich: var(--border-strong); }
.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; }
/* Ähnliches Beispiel direkt an der Aufgabe in Teil C (js/mathe-ueben.js, 2026-10-25): ruhiger Knopf neben „Tipp“, Karte darunter */
.mu__bsp-btn { margin: 0.6rem 0 0 var(--space-2); min-height: 44px; }
/* Tipp, Ähnliches Beispiel und Lösung stehen in einer Reihe: gleich hoch und mittig (2026-10-27) */
.mathe-applet .tipps__btn, .mathe-applet .mu__loesung-btn { min-height: 44px; }
.mathe-applet .tipps__btn, .mathe-applet .mu__bsp-btn, .mathe-applet .mu__loesung-btn { vertical-align: middle; }
.mu__bsp-btn .icon, .mu__bsp-karte h4 .icon { width: var(--icon-inhalt); height: auto; }
.mu__bsp-karte { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); --mx-strich: var(--color-primary); }
.mu__bsp-karte h4 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.mu__bsp-karte .mu__knoepfe { margin-top: var(--space-2); scroll-margin-bottom: var(--space-4); }
.mu__bsp-karte .btn { min-height: 44px; }
.mu__bsp-zurueck { padding-top: var(--space-2); }
.mu__bsp-luecke { display: inline-block; min-width: 3ch; padding: 0 0.3rem; text-align: center; color: var(--text-secondary);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.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, seit 2026-11-03): fest am unteren Rand wie die Apple-Tastatur. Hängt an body (bzw. im offenen Dialog),
   damit container-type und transform der Spalten sie nicht verschieben; js/mathe-eingabe.js setzt --tl-links/--tl-breite (Spalte mit dem Feld),
   --tl-unten (Systemtastatur) und gibt dem Scrollbereich über .mx-tl-platz unten so viel Platz wie die Leiste hoch ist. */
.mx-tastenleiste { position: fixed; left: var(--tl-links, 0px); width: var(--tl-breite, 100%); bottom: var(--tl-unten, 0px); z-index: 2100; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-surface); box-shadow: var(--shadow-lift); }
.mx-tastenleiste[hidden] { display: none; }
.mx-tl-platz { padding-bottom: calc(var(--tl-platz, 0px) + var(--space-3)) !important; }
/* Tasten fein wie bei Taschenrechner-Apps (Nutzer-Vorgabe 2026-10-25): Mathe-Schrift normal (nicht fett), Platzhalter als dünne Kästchen */
.mx-tl { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 2.75rem; padding: 0 0.3rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-soft); color: var(--color-text);
  font: 400 1.3rem/1 "Cambria Math", "STIX Two Math", Cambria, "Times New Roman", serif; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.mx-tl:hover, .mx-tl:focus-visible { border-color: var(--color-primary); }
.mx-tl:active { background: var(--color-primary-soft, var(--color-bg-soft)); transform: translateY(1px); }
.mx-tl i { font-style: italic; }
.mx-tl sup { font-size: 0.62em; align-self: flex-start; margin-top: 0.55rem; margin-left: 0.04em; }
.mx-tl sub { font-size: 0.62em; align-self: flex-end; margin-bottom: 0.6rem; margin-left: 0.04em; }
.mx-tl__k { display: inline-block; width: 0.55em; height: 0.7em; border: 1px solid currentColor; opacity: 0.6; vertical-align: middle; }
.mx-tl sup .mx-tl__k, .mx-tl sub .mx-tl__k { width: 0.6em; height: 0.75em; }
/* Bruch: zwei Kästchen, dazwischen ein feiner Strich */
.mx-tl__bruch { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 0.12em;
  background: linear-gradient(currentColor, currentColor) center / 0.85em 1px no-repeat; }
.mx-tl__bruch .mx-tl__k { width: 0.5em; height: 0.5em; }
/* Wurzel-Tasten als SVG: Haken und Strich in einem Zug, feine Linie */
.mx-tl__svg { width: 1.45em; height: 1em; overflow: visible; }
.mx-tl__svg--n { width: 1.65em; }
.mx-tl__svg path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.mx-tl__svg .mx-tl__svgk { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.6; }
.mx-tl--wort, .mx-tl--mehr, .mx-tl--weg, .mx-tl--abc, .mx-tl--trenner { font: 400 0.95rem/1 var(--font) !important; }
.mx-tl--mehr { color: var(--color-primary); }
.mx-tl--mehr.ist-an { background: var(--color-primary-soft); border-color: var(--color-primary); }
/* Flach (2026-11-03): Zeichen (zwei Reihen) | Ziffern (6 × 2) | Löschen, ← →, Schließen, Prüfen; bei wenig Platz bricht die Leiste in weitere Reihen um, Tasten mindestens 44 px */
/* Immer derselbe Aufbau (Breite ändert nur, ob die Blöcke neben- oder untereinander stehen): links die Zeichen, zwei Reihen, wischbar; rechts Ziffern und Aktionen, nie getrennt */
.mx-tastenleiste--block { align-items: flex-start; justify-content: flex-start; }
.mx-tl__zeichen { display: grid; flex: 1 1 14rem; min-width: 0; grid-template-rows: repeat(2, 2.75rem); grid-auto-flow: column; grid-auto-columns: minmax(2.6rem, auto); gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; }
.mx-tl__zeichen > .mx-tl--wort, .mx-tl__zeichen > .mx-tl--trenner, .mx-tl__zeichen > .mx-tl--mehr { padding: 0 0.4rem; }
.mx-tl__zeichen > .mx-tl--mehr { box-sizing: border-box; width: 3.1rem; padding: 0 0.2rem; line-height: 1.25 !important; text-align: center; }   /* „weni-/ger“ in zwei Zeilen, verdeckt sonst die Taste „keine“ */
.mx-tl__zeichen > .mx-tl--mehr { grid-row: 1 / span 2; position: sticky; right: 0; background: var(--color-surface); }
/* Aufgabe ohne Sonderzeichen: „mehr“ als flache Leiste über die ganze Breite, kein hoher Block (2026-11-03) */
.mx-tl__zeichen:has(> .mx-tl--mehr:only-child) { grid-template-rows: 2.25rem; grid-auto-columns: minmax(0, 1fr); }
.mx-tl__zeichen > .mx-tl--mehr:only-child { grid-row: auto; width: 100%; min-height: 0; position: static; }
.mx-tl__rechts { display: flex; flex: 0 1 30.1rem; min-width: 0; gap: 10px; margin-left: auto; }
.mx-tl__ziffern, .mx-tl__aktionen { display: grid; min-width: 0; grid-auto-rows: 2.75rem; gap: 4px; align-content: start; }   /* Spalten schrumpfen bei wenig Platz bis etwa 40 px */
.mx-tl__ziffern { flex: 0 1 17.75rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mx-tl__aktionen { flex: 0 1 11.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-tl__pfeile { display: contents; }
.mx-tl--pfeil { font: 400 1.35rem/1 var(--font) !important; }   /* ← → wie beim Taschenrechner, z. B. aus der Wurzel heraus */
.mx-tl--zu { color: var(--color-text-muted); }
.mx-tl--ziffer { background: var(--color-surface); font: 400 1.35rem/1 var(--font) !important; }
.mx-tl--ok { grid-column: 1 / -1; background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font: 400 1.5rem/1 var(--font) !important; }
.mx-tl--abc + .mx-tl--ok { grid-column: span 3; }
.mx-tl--ok:active { background: var(--color-primary); }
.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 A) */
.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-knopf); transition: border-color var(--transition-fast), background var(--transition-fast); }
.mu__option > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.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 { outline: var(--hover-umriss); outline-offset: -1.5px; }
.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 (Einstieg) */
.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-radius: var(--radius-lg); font-size: var(--fs-ui);
  background: linear-gradient(var(--border-strong), var(--border-strong)) 0 50% / 3px calc(100% - 2 * var(--radius-lg)) no-repeat, var(--color-bg-soft); }
.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-border-strong); padding-left: 0.9em; }   /* neutral seit 2026-10-22 */
.tafelbild ul { margin: var(--space-3) 0 0; padding-left: 1.4em; }
.tafelbild li + li { margin-top: var(--space-2); }
/* Größen in em (2026-10-21): wachsen am Beamer mit der Folienschrift mit, auf der Seite wie bisher (1,3 × 1rem) */
.tb-zeile { font-size: 1.3em; margin-bottom: var(--space-2); }
/* Seit 2026-10-22 schwarz statt Akzentfarbe: Hervorhebung macht der Textmarker (.marker--begriff, js/site.js) */
.tb-gross { font-size: 1.3em; font-weight: var(--fw-halbfett); color: var(--color-text); }
.tafelbild b { color: var(--color-text); }
.tafelbild i { font-style: normal; font-weight: var(--fw-halbfett); color: var(--color-pink); }
.tb-komma { font-weight: var(--fw-halbfett); font-size: 1.25em; }

/* Merkkasten (js/mathe.js merkkastenHtml): gerahmt wie im Schulbuch, Kopfleiste, Text links, Skizze rechts, Beispiel abgesetzt.
   Seit 2026-10-22 neutral (grauer Rahmen, schwarze Überschrift, vorher grün) – Farbe tragen nur Marker und Skizze */
.merkkasten { border: 1px solid var(--color-border-strong); border-radius: var(--radius-flaeche); background: var(--color-surface); overflow: hidden; }
.merkkasten + .merkkasten { margin-top: var(--space-4); }
.merkkasten__kopf { display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 0.45em 0.9em;
  background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); color: var(--color-text);
  font-family: var(--font-label); font-weight: var(--fw-halbfett); }
.merkkasten__kopf .icon { color: var(--color-text-secondary); }
.merkkasten__rumpf { display: grid; gap: 1em 1.5em; padding: 0.8em 1em; }
/* Mit Skizze: nebeneinander, solange beides passt. Der Text ist nie schmaler als sein Inhalt (Tabellen wie die Vierfeldertafel),
   sonst rutscht die Skizze darunter statt darüber (Großansicht/Beamer mit großer Schrift, 2026-10-22) */
.merkkasten--bild .merkkasten__rumpf { display: flex; flex-wrap: wrap; align-items: center; }
.merkkasten--bild .merkkasten__text { flex: 1 1 12em; }
.merkkasten--bild .merkkasten__bild { flex: 1 1 30%; min-width: 0; }
/* In der Spickzettel-Schublade (js/mathe.js spickSchublade, 2026-10-26): schmal, daher Skizze unter dem Text, Schrift wie die Bedienung */
.mathe-spick-box .nsl__inhalt { padding: 0.6rem; }
.mathe-spick-box .merkkasten { font-size: var(--fs-ui); }
.mathe-spick-box .merkkasten--bild .merkkasten__rumpf { display: grid; }
.mathe-spick-box .merkkasten__bild svg { max-width: 18rem; max-height: 14rem; margin: 0 auto; }
.merkkasten .tafelbild { border-left: 0; padding-left: 0; }
.merkkasten .tafelbild > ul:first-child { margin-top: 0; }
.merkkasten__bild svg { display: block; width: 100%; height: auto; max-height: 46vh; }
.merkkasten__beispiel { display: flex; gap: 0.8em; align-items: baseline; margin: 0 1em 0.9em; padding: 0.5em 0.8em;
  border-radius: var(--radius-lg);   /* Farbmarke als Hintergrundstrich, der vor den Rundungen endet (design.md, 2026-10-25) */
  background: linear-gradient(var(--color-pink), var(--color-pink)) 0 50% / 3px calc(100% - 2 * var(--radius-lg)) no-repeat, var(--color-surface-raised); }
.merkkasten__beispiel-label { flex: none; font-family: var(--font-label); font-weight: var(--fw-halbfett); color: var(--color-pink); }
/* Skizzen im Merkkasten: Linien, Flächen und Beschriftung nur über Tokens */
.mk-linie { fill: none; stroke: var(--color-text); stroke-width: 2; }
.mk-a { fill: color-mix(in srgb, var(--color-primary) 18%, transparent); stroke: var(--color-primary); stroke-width: 2.5; }
.mk-b { fill: color-mix(in srgb, var(--color-pink) 16%, transparent); stroke: var(--color-pink); stroke-width: 2.5; }
.mk-raster { fill: none; stroke: var(--color-pink); stroke-width: 1; stroke-dasharray: 4 3; }
.mk-winkel { fill: color-mix(in srgb, var(--color-success) 35%, transparent); stroke: var(--color-success); stroke-width: 1.5; }
.mk-text { fill: var(--color-text); font-family: var(--font-label); font-size: 15px; }
.mk-text--a { fill: var(--color-primary); font-weight: 600; }
.mk-text--b { fill: var(--color-pink); font-weight: 600; }
.mk-text--klein { font-size: 12px; fill: var(--color-text-muted); }

/* 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); }
/* Beamer-Gestaltung (Nutzer-Vorgabe 2026-10-21): Inhalt oben statt zentriert (nichts springt beim Aufdecken), Kopfzeile + Fortschritt,
   größere Schrift, Textzeilen höchstens ca. 60 Zeichen, neuer Schritt blendet kurz ein, Leiste blendet sich ohne Maus aus */
.mathe-beamer__kopf { display: flex; align-items: center; padding: 0.7rem clamp(1rem, 6vw, 6rem) 0.5rem;
  font-family: var(--font-label); font-size: clamp(0.85rem, 1.1vw, 1.05rem); color: var(--color-text-muted); }
.mathe-beamer__fortschritt { height: 3px; margin: 0 clamp(1rem, 6vw, 6rem); background: var(--color-border); border-radius: 2px; overflow: hidden; }
.mathe-beamer__fortschritt span { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width 250ms ease; }
.mathe-beamer__folie { flex: 1; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(1rem, 4vh, 3.5rem) clamp(1rem, 6vw, 6rem); font-size: clamp(1.25rem, min(2.3vw, 4.2vh), 2.8rem); line-height: 1.45; }
.mathe-beamer__folie > * { width: 100%; max-width: 80rem; margin-inline: auto; }
.mathe-beamer__folie p, .mathe-beamer__folie li { max-width: 60ch; }
.mathe-beamer__folie .mb-optionen li, .mathe-beamer__folie .mb-werkzeuge p { max-width: none; }
.mathe-beamer__folie .ist-neu { animation: mb-ein 220ms ease-out; }
@keyframes mb-ein { from { opacity: 0; transform: translateY(0.25em); } }
.mathe-beamer__folie.hat-fokus .merkkasten__text .mb-schritt:not(.ist-neu) { opacity: 0.6; transition: opacity 200ms ease; }
@media (prefers-reduced-motion: reduce) { .mathe-beamer__folie .ist-neu { animation: none; } }
.mathe-beamer__leiste { transition: opacity 300ms ease; }
.mathe-beamer.ist-ruhig { cursor: none; }
.mathe-beamer:not(.ist-touch).ist-ruhig .mathe-beamer__leiste:not(:has(:focus-visible)) { opacity: 0; }
/* iPad (2026-11-02, js/folien-touch.js): Folie nutzt den ganzen Bildschirm, Kopf und Leiste liegen darüber und erscheinen auf Tipp in die Mitte.
   „Lösung zeigen“ bleibt stehen, solange etwas aufzudecken ist; darum unten Platz in der Folie. Beim gewählten Stift bleibt die Leiste offen. */
.mathe-beamer.ist-touch { padding-bottom: 0; }
.mathe-beamer.ist-touch .mathe-beamer__kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: var(--color-surface); transition: opacity 200ms ease; }
.mathe-beamer.ist-touch .mathe-beamer__fortschritt { margin: 0; }
.mathe-beamer.ist-touch .mathe-beamer__folie { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); }
.mathe-beamer.ist-touch .mathe-beamer__leiste { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; flex-wrap: wrap; gap: var(--space-2);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
.mathe-beamer.ist-touch .mathe-beamer__leiste [data-b="zu"] { position: static; }
.mathe-beamer.ist-touch .mathe-beamer__leiste .btn { min-height: 44px; min-width: 44px; padding-inline: 0.7rem; }
.mathe-beamer.ist-touch.ist-ruhig:not(:has([data-stift][aria-pressed="true"])) .mathe-beamer__kopf { opacity: 0; pointer-events: none; }
.mathe-beamer.ist-touch.ist-ruhig:not(:has([data-stift][aria-pressed="true"])) .mathe-beamer__leiste { background: transparent; border-color: transparent; pointer-events: none; }
.mathe-beamer.ist-touch.ist-ruhig:not(:has([data-stift][aria-pressed="true"])) .mathe-beamer__leiste > :not([data-b="auf"]) { display: none; }
.mathe-beamer.ist-touch.ist-ruhig:not(:has([data-stift][aria-pressed="true"])) .mathe-beamer__leiste > [data-b="auf"] { pointer-events: auto; }
.mathe-beamer__folie h2 { font-size: clamp(1.6rem, min(3.5vw, 6.4vh), 3.8rem); font-weight: var(--fw-titel); letter-spacing: -0.02em; line-height: 1.15; 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; }
/* Erkennungszeichen „/“ wie .eyebrow (style.css), nicht vor Eyebrows mit eigenem Icon */
.mb-eyebrow:not(:has(> .icon))::before { content: "/"; margin-right: 0.35em; font-weight: var(--fw-normal); color: var(--nav-aktiv); opacity: 0.75; }
.mb-gross { font-size: 1.3em; 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; justify-content: center; }
.mathe-beamer__folie--runde p { margin-inline: auto; }
.mb-frage { font-weight: var(--fw-halbfett); color: var(--color-primary); }
.mb-bild svg { display: block; width: 100%; max-height: 52vh; height: auto; }
/* 3D-Bilder aus Blender (2026-10-26, Regel teil-d.md „3D-Bilder“): transparente WebP, zentriert, nie größer als die Folie */
.mx-3d { display: block; width: 100%; max-height: 52vh; height: auto; object-fit: contain; margin-inline: auto; }
.mb-zwei__bild .mx-3d { max-height: calc(86vh - 8rem); }
/* Dunkel: feiner heller Saum, damit dunkle Kanten (Rahmen, Stäbe) nicht im Hintergrund verschwinden */
:root[data-theme="dark"] .mx-3d,
:root[data-theme="dark"] image[href*="mathe3d"] { filter: drop-shadow(0 0 1px color-mix(in srgb, var(--color-text) 55%, transparent)); }
.mb-bild--klein { margin-top: 1em; opacity: 0.85; }
.mb-bild--klein svg { max-height: 34vh; }
.mb-loesung { margin-top: 1em; padding: 0.6em 0.9em; border-radius: var(--radius-lg); background: var(--color-success-soft);
  color: var(--color-text); font-weight: var(--fw-halbfett); }
.mb-loesung::before { content: '✓ '; color: var(--color-success); }
.mathe-beamer__folie--tafel .tafelbild { font-size: 1em; }
.mathe-beamer__folie .tb-zeile { font-size: 1.1em; margin-bottom: 0.4em; }
/* Ohne Skizze kein Balken über die ganze Breite: Kasten so breit wie der Text, mittig */
.mathe-beamer__folie--tafel .merkkasten:not(.merkkasten--bild) { max-width: 36em; }
.mathe-beamer__folie--tafel .merkkasten__kopf { font-size: 1.15em; }
.mathe-beamer__folie--tafel .merkkasten__rumpf { padding: 0.8em 1.2em; }
.mathe-beamer__folie--tafel .merkkasten__bild svg { max-height: 56vh; }
.mathe-beamer__folie--tafel .merkkasten--bild-breit .merkkasten__bild { flex-basis: 100%; }
.mb-szene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em; align-items: center; }
/* Jede Folie mit Bild nutzt die ganze Breite (Nutzer-Vorgabe 2026-10-25, js/mathe.js zweiSpalten): Problembild (Szene, Impulse, Merkkasten,
   „Zurück zum Problem“) und Bild zur Aufgabe (Blitzrunde, Schnelltest, Stolpersteine, Finde den Fehler). Text links mit Eyebrow und Titel,
   Bild rechts (≈ 45 %) so hoch wie die Folie, beides senkrecht mittig. Noch verdeckte Schritte behalten ihren Platz (unsichtbar statt entfernt),
   damit beim Aufdecken nichts springt. */
.mathe-beamer__folie > .mb-zwei { max-width: 120rem; flex: 1 0 auto; }
.mathe-beamer__folie:has(> .mb-zwei) { padding-inline: clamp(1rem, 4vw, 4rem); line-height: 1.4; }
.mb-zwei { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(1.5rem, 3.5vw, 4.5rem); align-items: center; }
/* Stolpersteine/Finde den Fehler mit Bild (js/mathe.js fehlerFolie): links die falsche Rechnung, rechts unter dem Bild Auflösung und richtige Rechnung */
.mb-zwei__bild { display: grid; gap: 0.7em; min-width: 0; }
.mb-zwei__bild:has(.mb-zwei__unter) .mb-bild svg { max-height: 36vh; }
.mb-zwei__unter { display: grid; gap: 0.7em; font-size: 0.9em; }
.mb-zwei__unter .mb-loesung { margin: 0; }
.mathe-beamer .mb-zwei__unter :is(.mb-schritt, .mb-loesung)[hidden] { display: block !important; visibility: hidden; }
.mb-zwei__text h2 { font-size: clamp(1.4rem, min(2.9vw, 5.4vh), 3.2rem); }
.mathe-beamer .mb-zwei__text :is(.mb-schritt, .mb-loesung)[hidden] { display: block !important; visibility: hidden; }
.mathe-beamer .mb-zwei__text li.mb-schritt[hidden] { display: list-item !important; }
.mb-zwei__bild .mb-bild svg { width: 100%; max-height: calc(86vh - 8rem); }
.mb-zwei__text { min-width: 0; }
.mb-zwei__text > :first-child { margin-top: 0; }
/* Merkkasten neben dem Problembild: der Hefteintrag bekommt 60 % der Breite, eine eigene Skizze bleibt schmal, damit nichts scrollt */
.mathe-beamer__folie--tafel .mb-zwei { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.mb-zwei__text .merkkasten--bild .merkkasten__rumpf { flex-wrap: nowrap; gap: 0.8em; }
.mb-zwei__text .merkkasten--bild .merkkasten__bild { flex: 0 1 30%; }
.mb-zwei__text .merkkasten--bild .merkkasten__bild svg { max-height: 34vh; }
/* Flache Skizzen (Zahlengerade) unter dem Text in voller Breite, Skizzen nicht auf 420 px begrenzt, verdeckter Beispielkasten so hoch wie aufgedeckt (js/mathe.js merkBilderLesbar, einpassen; 2026-11-02) */
.mb-zwei__text .merkkasten--bild-breit .merkkasten__rumpf { flex-wrap: wrap; }
.mb-zwei__text .merkkasten--bild-breit .merkkasten__bild { flex: 1 1 100%; }
.mathe-beamer__folie--tafel .mb-zwei.mb-zwei--voll { grid-template-columns: minmax(0, 1fr); }
.mb-zwei--voll > .mb-zwei__bild { display: none; }
.mb-zwei--voll .merkkasten__kopf { max-width: none; }
.mb-zwei--voll .mb-zwei__text .merkkasten--bild .merkkasten__bild { flex: 0 1 42%; }
.mb-zwei--voll .mb-zwei__text .merkkasten--bild .merkkasten__bild svg { max-height: 56vh; }
.mathe-beamer .mx-skizze { max-width: none; margin-block: 0; }
.mathe-beamer .mb-zwei__text .merkkasten__beispiel.mb-schritt[hidden] { display: flex !important; }
.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: 1px 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: 2em; height: 2em; border-radius: 50%; font-weight: var(--fw-halbfett); color: var(--fach-mathe); border: 2px solid currentColor; }
.mb-optionen__t { position: relative; z-index: 1; }
.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-halbfett); }
.mb-fest { margin: 0; padding-left: 1.2em; }
.mb-fest li + li { margin-top: 0.4em; }
.mb-offen { margin-top: 1em; padding: 0.6em 0.9em; border-radius: var(--radius-lg); 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(8.5em, 1fr)); gap: 0.8em; margin-top: 0.8em; }
.mb-werkzeug { font-size: 0.85em; padding: 0.6em 0.8em; border-radius: var(--radius-lg); background: var(--surface-sunken); }
.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.6em 0.9em; border-radius: var(--radius-lg); background: var(--color-primary-soft); font-weight: var(--fw-halbfett); }

/* ---------- Ruhige Folien (Nutzer-Vorgabe 2026-10-25, Apple-Stil, ersetzt die Kasten-Sprache vom 2026-10-21) ----------
   Keine Rahmen um Abschnitte: kleine Überschrift mit Icon in der Abschnittsfarbe, darunter der Inhalt. Nur Rechnungen liegen auf einer
   leicht getönten Fläche (Container-Rundung). Einziger gerahmter Kasten bleibt der Merkkasten (Hefteintrag). */
.mb-kasten { --k: var(--color-primary); }
.mb-kasten--notiz { --k: var(--color-text-secondary); }
.mb-kasten--check { --k: var(--color-success); }
.mb-kasten__kopf { display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.5em; font-family: var(--font-label); font-size: 0.75em;
  font-weight: 500; color: var(--color-text-secondary); }
.mb-kasten__kopf .icon { color: var(--k); }
.mb-kasten--rechnung .mb-kasten__rumpf { padding: 0.6em 0.9em; border-radius: var(--radius-lg); background: var(--surface-sunken); }
.mb-fragekasten { display: flex; gap: 0.6em; align-items: flex-start; }
.mb-fragekasten > .icon { flex: none; width: 1.3em; height: 1.3em; margin-top: 0.15em; color: var(--color-primary); }
.mb-fragekasten + .mb-optionen { margin-top: 0.7em; }
.mb-optionen.ist-aufgeloest li:not(.is-richtig) { opacity: 0.45; transition: opacity 200ms ease; }
/* Auflösung deutlich wie im Quiz (Nutzer-Vorgabe 2026-10-21, ohne Abstimmungs-Zwischenstufe): richtige Antwort grün gefüllt,
   leuchtet einmal kurz auf und bleibt dann ruhig; keine Töne, kein Dauer-Effekt */
.mb-optionen.ist-aufgeloest li.is-richtig { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-primary);
  font-weight: var(--fw-halbfett); animation: mb-richtig 700ms ease-out; }
.mb-optionen.ist-aufgeloest li.is-richtig .mb-optionen__b { color: var(--color-on-primary); }
.mb-optionen.ist-aufgeloest li.is-richtig::after { color: var(--color-on-primary); font-size: 1.3em; }
@keyframes mb-richtig {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 55%, transparent); }
  35% { transform: scale(1.03); }
  100% { transform: scale(1); box-shadow: 0 0 0 0.6em transparent; }
}
@media (prefers-reduced-motion: reduce) { .mb-optionen.ist-aufgeloest li.is-richtig { animation: none; } }
/* Antwortsatz wie im Heft: doppelt unterstrichen */
.mb-antwort { margin-top: 0.8em; font-weight: var(--fw-halbfett); }
.mb-antwort__label { margin-right: 0.3em; font-family: var(--font-label); font-size: 0.8em; color: var(--color-primary); }
.mb-antwort { text-decoration: underline double var(--color-primary); text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
/* Titelfolien wie Kapiteltrenner */
.mb-titel { display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 1.2em 1em 1.4em; }
.mb-titel__icon { display: grid; place-items: center; width: 3.2em; height: 3.2em; margin-bottom: 0.4em; border-radius: 50%;
  color: var(--color-primary); background: var(--color-primary-soft); }
.mb-titel__icon .icon { width: 1.7em; height: 1.7em; }
.mb-titel .mb-riesig { margin: 0; }
.mb-titel .mb-gross { margin-top: 0.4em; font-size: 1.1em; font-weight: var(--fw-normal, 400); color: var(--color-text-muted); }
/* Rechnungen am Gleichheitszeichen ausgerichtet wie im Heft (zeilenHtml) */
.mb-rechnung--gleich { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 0.35em; }
.mb-rechnung--gleich .mb-rz { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
.mb-rechnung--gleich .mb-rz--voll { display: block; }
.mb-rz__l { text-align: right; }
.mb-rz__g { color: var(--color-text-muted); }
/* Stolpersteine und Finde den Fehler (2026-10-25 ruhig): zwei gleich breite Flächen ohne Rahmen, nur leicht getönt */
.mb-stolper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); margin-top: 0.6em; align-items: start; }
.mb-stolper__falsch, .mb-stolper__richtig { padding: 0.8em 1em; border-radius: var(--radius-lg); background: var(--surface-sunken); }
.mb-stolper__richtig { background: var(--color-success-soft); }
.mb-stolper__label { display: flex; align-items: center; gap: 0.4em; margin: 0 0 0.4em; font-family: var(--font-label); font-size: 0.75em; font-weight: 500; color: var(--color-text-secondary); }
.mb-stolper__falsch > .mb-stolper__label .icon { color: var(--color-danger); }
.mb-stolper__richtig > .mb-stolper__label .icon { color: var(--color-success); }
.mb-rechnung .mb-rz { margin: 0.15em 0; }
/* Fehlerzeile: nach dem Aufdecken umkreist (D.umkreisen, js/site.js) statt roter Rahmen */
.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-halbfett); }
/* 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__rechts { display: grid; gap: 0.7em; align-content: start; }
.mb-stolper__rechts .mb-loesung, .mb-stolper__aufl { margin: 0; }
.mb-stolper__probe { margin: 0.4em 0 0; font-size: 0.9em; }
.mb-stolper__tipp { margin: 0.7em 0 0; font-size: 0.95em; }
/* Zwei Wege: beide Lösungen neutral grau (keiner „falsch“), Icon im Kopf entfällt */
.mb-wege { margin: 0.6em 0; }
.mb-wege ~ .mb-schritt .mb-stolper__fehler { color: inherit; }
.mb-weg__antwort { margin: 0.6em 0 0; font-weight: var(--fw-halbfett); }
.mb-hinweis-klein { margin: 0.2em 0 0; font-size: 0.8em; color: var(--color-text-muted); }
.mb-check { margin: 0; padding: 0; list-style: none; }
.mb-check li { display: flex; gap: 0.5em; align-items: baseline; }   /* Lesehilfe, nie abhakbar: Haken nur als Zeichen */
.mb-check li .icon { flex: none; color: var(--color-success); transform: translateY(0.15em); }
.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-family: var(--font-label); font-size: 0.75em; font-weight: 500; color: var(--color-text-secondary); border-bottom-color: var(--color-border-strong); }
.mb-tabelle td:last-child { font-weight: var(--fw-halbfett); color: var(--color-primary); }
@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; }

/* Teil A: Erkunden am Gerät (js/mathe-erkunden.js) */
.mathe-erkunden { margin-top: 0; }
/* Rahmenfläche von Teil A (und Hinweis-Flächen der Teile) wie .st-karte: 14 px, Rand, zarter Schatten, dunkel ohne (Stil „Do-matik“, 2026-10-22) */
.mathe-seite [role="tabpanel"] > .panel { border: 1px solid var(--border); border-radius: var(--radius-flaeche);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 5%, transparent); }
:root[data-theme="dark"] .mathe-seite [role="tabpanel"] > .panel { box-shadow: none; }
.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-lg); 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)); }
/* Rückmeldung nur am gewählten Chip, kein Rahmen um die ganze Gruppe (Nutzer-Hinweis 2026-10-22) */
.mathe-beob__wahl.is-ok .mathe-beob__chip[aria-pressed="true"] { border-color: var(--color-success); background: var(--color-success-soft); }
.mathe-beob__wahl.is-falsch .mathe-beob__chip[aria-pressed="true"] { border-color: var(--color-danger); background: var(--color-danger-soft); }
.mathe-beob__wahl.is-fast .mathe-beob__chip[aria-pressed="true"] { border-color: var(--color-primary); border-style: dashed; background: var(--color-primary-soft); }
/* Farbmarke links nur als gerader Hintergrundstrich, der vor den Rundungen endet (design.md, nie border-left an runden Kästen; 2026-10-25).
   Jeder Kasten setzt nur --mx-strich (Farbe) und --mx-flaeche (Grund), Rundung einheitlich --radius-lg (Container in einer Fläche). */
.mathe-merksatz, .mathe-erk__geschafft, .mathe-erk__offen, .mathe-erk__schnelle, .mathe-erk__antwort,
.mu__frage, .mathe-tr .tr__kontext, .mu__kontrolle, .tr__kontrolle, .mu__loesung, .mu__bsp-karte, .mathe-tr__hinweis,
.ql__probe, .ql__dk-kasten, .ql__aussage, .sy__detektor, .sa__text, .kw__rueck, .sto__bezug, .sto__zahlen, .gl-erklaert {
  border-radius: var(--radius-lg);
  background: linear-gradient(var(--mx-strich), var(--mx-strich)) 0 50% / 3px calc(100% - 2 * var(--radius-lg)) no-repeat, var(--mx-flaeche, var(--surface-sunken)); }
.mathe-merksatz { padding: var(--space-3) var(--space-4); --mx-strich: var(--progress);
  --mx-flaeche: 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 { --mx-strich: 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); --mx-flaeche: var(--color-success-soft); --mx-strich: 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: 0; --mx-strich: var(--color-warning); }
/* Wortspeicher zum Merksatz (2026-10-25): Wort antippen setzt es in die gewählte Lücke (js/mathe-erkunden.js), Ziehen geht auch */
.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__wort { min-height: 2.75rem; padding: 0.25rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text); font: inherit; font-weight: var(--fw-halbfett); cursor: pointer; touch-action: manipulation; }
.mathe-erk__wort:hover { border-color: var(--color-primary); }
.mathe-erk__wort:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mathe-merksatz .mu__luecke.is-gewaehlt { border-color: var(--color-primary); background: var(--color-primary-soft); }
.mathe-erk__schnelle { padding: var(--space-3) var(--space-4); border: 0; --mx-strich: var(--border-strong); --mx-flaeche: transparent; }
/* Leitproblem: Frage aus Einstieg, 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-radius: var(--radius-flaeche);
  background: linear-gradient(var(--color-primary), var(--color-primary)) 0 50% / 3px calc(100% - 2 * var(--radius-flaeche)) no-repeat, 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); --mx-strich: var(--border-strong); --mx-flaeche: 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 { 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-lg); 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-lg); 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: var(--radius-sm); }
.mu__option .mx-striche { background: none; }

/* Labore Kapitel I (js/applets/mathe/diagramm.js, zahlen.js, rechnen.js, groessen.js) */
/* .rl ohne role: die Leiste am rechten Rand (site.js D.rechteLeiste, role="toolbar") heißt ebenfalls .rl und bleibt flex */
.dl, .zl, .rl:not([role="toolbar"]), .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-knopf); }
.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-halbfett); }
.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-zwei, .geldlabor__tresen { grid-template-columns: 1fr; }
  .mb-zwei__bild { order: -1; }
  .mb-zwei__bild .mb-bild svg { max-height: 30vh; }
  .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; }
.mx-koord--schieb { touch-action: none; cursor: grab; }   /* Ausschnitt verschieben (D.matheVerschieben) */
.mx-koord--schieb.is-schieben { 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: var(--control-h-klein); 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); }
/* Umschalter in Laboren (2026-11-03): Text in Inter statt Monospace (das bleibt den Rechentasten), Auswahl ruhig statt vollflächig blau */
.ql__modus .mx-taste { padding: 0 0.85rem; font: 500 var(--fs-ui) var(--font); border-radius: var(--radius-knopf); }
.ql__modus .mx-taste[aria-pressed="true"] { color: var(--fach-mathe); background: var(--nav-aktiv-soft); border-color: var(--fach-mathe); }
/* Hauptumschalter: Knöpfe auf gemeinsamer Fläche; Auswahlen darunter (z. B. Gegenstand) bleiben einzelne Knöpfe */
.ql__modus[role="group"]:not(:has(.btn)) { width: fit-content; max-width: 100%; gap: 2px; padding: 3px; background: var(--surface-sunken); border-radius: var(--radius-lg); }
.ql__modus[role="group"]:not(:has(.btn)) .mx-taste { border-color: transparent; background: transparent; }
.ql__modus[role="group"]:not(:has(.btn)) .mx-taste:hover { color: var(--fach-mathe); }
.ql__modus[role="group"]:not(:has(.btn)) .mx-taste[aria-pressed="true"] { color: var(--color-text); background: var(--color-surface); border-color: var(--color-border-strong); }
.kr .kr > .ql__modus[role="group"]:not(:has(.btn)), .ql__seite .ql__modus[role="group"]:not(:has(.btn)) { gap: var(--space-2); padding: 0; background: none; }
.kr .kr > .ql__modus[role="group"] .mx-taste, .ql__seite .ql__modus[role="group"] .mx-taste { border-color: var(--color-border-strong); background: var(--color-surface); }
.kr .kr > .ql__modus[role="group"] .mx-taste[aria-pressed="true"], .ql__seite .ql__modus[role="group"] .mx-taste[aria-pressed="true"] { color: var(--fach-mathe); background: var(--nav-aktiv-soft); border-color: var(--fach-mathe); }
.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-lg); 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-halbfett); }
.ql__f2 { color: var(--color-primary); font-weight: var(--fw-halbfett); }
.ql__f3 { color: var(--color-success); font-weight: var(--fw-halbfett); }
.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); --mx-strich: var(--fach-mathe); --mx-flaeche: var(--color-bg-soft); }
.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); }
/* pq-Labor: Kontrollwert (p/2)² − q als eigener Kasten über der Rechnung */
.ql__dk-kasten { display: flex; flex-direction: column; gap: 0.15rem; margin: 0 0 var(--space-3) !important; padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border); --mx-strich: var(--color-warning); --mx-flaeche: var(--color-surface); }
.ql__dk-kasten.is-zwei { --mx-strich: var(--color-success); }
.ql__dk-kasten.is-keine { --mx-strich: var(--color-danger); }
.ql__dk-kasten .mu__klein { color: var(--color-text-muted); }
.ql__garten svg { max-width: 460px; }
.ql__aussage { font-size: 1.15rem; font-weight: var(--fw-halbfett); padding: var(--space-2) var(--space-3); --mx-strich: var(--fach-mathe); --mx-flaeche: var(--color-bg-soft); }
.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-knopf); 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-halbfett); }
.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); }

/* Umformungsbalken am Zeilenende („| : 4“), automatisch über D.matheUmformung (js/mathe-eingabe.js) */
.mx-umform { display: inline-block; margin-left: 1.6em; white-space: nowrap; color: var(--color-text-muted); font-weight: 400; }

/* 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; }
/* Grundlinie vom Radikanden, nicht vom Haken: sonst rutscht die Wurzel mit einem Bruch darin nach unten (2026-10-22) */
.mx-wurzel__r { align-self: baseline; }

/* ---------- 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-halbfett); }
.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; }
/* Geodreieck-Werkzeug (js/applets/mathe/geodreieck-werkzeug.js, Doku .claude/mathe-bauplan/geodreieck.md): nutzt den Körper .sy__gd-* des Labors mit */
.gdw-aktiv { touch-action: none; }
.gdw__gd--aus { display: none; }
.gdw__gd--stift { cursor: crosshair; }
.gdw__band { fill: transparent; }
.gdw__linien, .gdw__vorschau { pointer-events: none; }
.gdw__linie { stroke: var(--color-pink); stroke-width: 2.8; stroke-linecap: round; fill: none; }
.gdw__linie--vor { stroke-dasharray: 7 5; opacity: 0.8; }
.gdw__name { fill: var(--color-pink); font: italic 700 17px system-ui, sans-serif; paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; }
.gdw-winkel { stroke: var(--color-text); stroke-width: 0.7; opacity: 0.75; }
.gdw-winkel-zahl { fill: var(--color-text); font: 600 9px system-ui, sans-serif; pointer-events: none; }
.gdw-winkel-zahl--innen { fill: var(--color-primary); }
.gdw-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.gdw-leiste__werkzeug { display: contents; }
.gdw-leiste [hidden] { display: none !important; }
.gdw-status { margin: var(--space-1) 0 0; min-height: 1.5em; }
.gdw-status__pruefung { display: block; font-weight: var(--fw-halbfett); }
.gdw-status__pruefung.is-ok { color: var(--color-success); }
/* 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-halbfett); }
.sy__y { color: var(--color-primary); font-weight: var(--fw-halbfett); }
.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-halbfett); color: var(--color-success); font-size: 0.9rem; }
.sy__detektor { padding: var(--space-2) var(--space-3); --mx-strich: var(--fach-mathe); --mx-flaeche: var(--color-bg-soft); }
.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-lg); 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-halbfett); 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); --mx-flaeche: var(--color-bg-soft); --mx-strich: 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-knopf); }
.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, Kapitel-Check 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: 1px solid currentColor; }
.mx-hb__n { padding: 0.08em 0.15em 0; }
/* leere Stelle (Zähler, Hochzahl, Radikand …): dünnes Kästchen wie auf der Taste */
.mx-hb__leer { display: inline-block; width: 0.55em; height: 0.75em; border: 1px solid var(--color-text-muted); vertical-align: middle; }
.mx-heft__inhalt sub { font-size: 0.7em; vertical-align: -0.35em; line-height: 0; }
.mx-heft__inhalt .mx-hw__i { font-size: 0.6em; vertical-align: 0.9em; margin-right: -0.3em; }
/* Wurzel mit Strich über dem Radikanden: Darstellung wie .mx-wurzel (Haken als Maske, geht nahtlos in den Strich über) */
/* 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 { color: var(--color-primary); }
.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; }
/* Strecke mit Überstrich (js/mathe-eingabe.js, 2026-10-25): Strich über beiden Punktnamen samt ′ */
.mx-strecke { display: inline-block; line-height: 1.05; border-top: max(1px, 0.065em) solid currentColor; padding-top: 0.06em; 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; }
/* Vorgaben in Aufgaben stehen oft in <strong>: die Formel selbst trotzdem normal wie im Heft (Nutzer-Vorgabe 2026-10-25) */
.mx-z, .mx-o, .mx-v, strong .mx-wurzel, strong .mx-bruch, b .mx-wurzel, b .mx-bruch { font-weight: 400; }
.mx-teil { margin-right: 0.35rem; font-weight: var(--fw-halbfett); color: var(--color-primary); }

/* Aufgabentext als Karte mit blauem Strich links (Hintergrundstrich, Regel bei .mathe-merksatz) */
.mu__frage, .mathe-tr .tr__kontext { padding: 0.85rem 1.1rem 0.85rem 1.25rem; border: 1px solid var(--color-border);
  --mx-strich: var(--color-primary); --mx-flaeche: var(--color-surface); font-size: 1.02rem; line-height: 1.7; }
/* Aufgabe über Größe hervorheben, nicht über Fettung oder Farbe (2026-10-27): Auftrag deutlich größer als Hinweise und Tags */
.mu__frage { margin-bottom: var(--space-3); font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.6; }
.mu__frage p.muted { font-size: 0.85em; }
.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-halbfett); letter-spacing: 0.02em; text-transform: none; color: var(--color-text-muted); }

/* Formeln in eigener Zeile und Rechenzeilen: auf dem Seitenweiß, leicht eingerückt (kein grauer Kasten, keine Linie, 2026-10-27) */
.mx-formel { font-weight: 400; overflow-y: hidden; padding: 0.3rem 0 0.3rem 0.9rem; margin: 0.4rem 0; border-radius: 0; background: none; 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.3rem 0 0.3rem 0.9rem; border-radius: 0; background: none;
  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-knopf); 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-knopf); 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; margin-inline: auto; }
.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-halbfett); 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-lg); 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; --mx-strich: var(--color-border-strong); --mx-flaeche: transparent; }
.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-lg); 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-halbfett); }
.br-pfeil { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.br-pfeil small { color: var(--color-primary); font-weight: var(--fw-halbfett); 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-halbfett); }
.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 A: 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); --mx-strich: var(--fach-mathe); --mx-flaeche: var(--color-bg-soft); }
.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-knopf); 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, Sicherung): 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); --mx-strich: var(--color-primary); --mx-flaeche: 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-bildbox { margin: var(--space-2) 0 var(--space-3); }
.gl-bild { display: block; width: 100%; max-width: 280px; height: auto; font: inherit; font-size: 13px; }
.gl-bild text { fill: var(--color-text); }
.gl-bild__a { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 1.5; }
.gl-bild__b { fill: var(--color-surface-raised); stroke: var(--color-primary); stroke-width: 1.5; }
.gl-bild__l { stroke: var(--color-text); stroke-width: 2; stroke-linecap: round; }
.gl-nurneue { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.gl-koord svg { display: block; width: 100%; max-width: 340px; height: auto; margin: var(--space-2) 0; }

/* ---------- Alles auf einen Blick (Prototyp 2026-10-21, m5-runden) ----------
   Teil A layout: 'nebeneinander' (js/mathe-erkunden.js): links das Labor (bleibt beim Scrollen stehen), rechts die Schritte.
   Teil C: offene Schreibfläche rechts neben der Aufgabe. Beides nur, wenn der Kasten breit genug ist (iPad quer, PC);
   schmal (iPad hochkant, Handy) bleibt alles untereinander. Container-Abfragen, damit auch Großansicht/Beamer passen. */
.mathe-erkunden--neben, .mathe-seite .mu { container-type: inline-size; container-name: mathe-kasten; }
/* schmal: eine Spalte in der gewohnten Reihenfolge (Vermuten vor dem Labor) */
.mathe-erk__raster { display: flex; flex-direction: column; }
.mathe-erk__werkbank, .mathe-erk__wege { display: contents; }
.mathe-erk__raster .mathe-erk__schritt:has(.mathe-erk__vermutung) { order: -1; }
.mathe-erk__merkfrage { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.mathe-erk__merkfrage summary { cursor: pointer; font-weight: var(--fw-halbfett); }
.mathe-erk__merkfrage p { margin: var(--space-2) 0 0; }
/* inline statt Flex: nur so bricht der Text in der Tabellenbreite um */
.mathe-beob__laden { display: inline; padding: 0.2rem 0.5rem; margin: -0.2rem -0.5rem; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
/* lange Zeilenköpfe („Aquarium: 5 dm lang, …“) dürfen umbrechen, auch untereinander (iPad hochkant) */
.mathe-beob tbody th:has(.mathe-beob__laden) { white-space: normal; min-width: 7rem; }
.mathe-beob:has(thead th:nth-child(5)) input { width: 4.4rem; }   /* breite Tabellen auch untereinander ohne seitliches Scrollen */
.mathe-beob:has(thead th:nth-child(6)) input { width: 3.8rem; }
.mathe-beob:has(thead th:nth-child(5)) .mathe-beob__wahl { flex-wrap: wrap; }
.mathe-beob:has(thead th:nth-child(5)) thead th { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.mathe-beob__laden .icon, .mathe-beob__laden svg { vertical-align: -0.15em; margin-left: 0.3rem; width: var(--icon-inhalt); height: var(--icon-inhalt); color: var(--color-text-muted); }
.mathe-beob__laden:hover { border-color: var(--fach-mathe); }
.mathe-beob__laden:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mathe-beob tr.is-im-labor > th { background: color-mix(in srgb, var(--fach-mathe) 14%, var(--color-surface)); }
.mathe-beob tr.is-im-labor .mathe-beob__laden svg { color: var(--fach-mathe); }
/* Strichlisten-Labor: angetippter Buchstabe aus der Tabelle */
.dl__zeile.is-markiert, .dl__knopf.is-markiert > span:first-child { box-shadow: inset 3px 0 0 var(--fach-mathe); background: color-mix(in srgb, var(--fach-mathe) 12%, var(--color-surface)); }
.dl__knopf.is-markiert > span:first-child { padding: 0 0.4rem; border-radius: var(--radius-knopf); }
/* Sachaufgaben-Karten der angetippten Familie, Zahl im Primzahlsieb (Tabellen-Kopplung, 2026-10-21) */
.sa__karte.is-markiert { box-shadow: inset 3px 0 0 var(--fach-mathe); border-color: var(--fach-mathe); }
.hf__zahl.is-markiert { outline: 2px dashed var(--fach-mathe); outline-offset: 1px; }
@container (min-width: 860px) {
  .mathe-erk__werkbank, .mathe-erk__wege { display: block; }
  .mathe-erk__raster:has(.mathe-beob thead th:nth-child(5)) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }   /* breite Tabellen bekommen mehr Platz */
  .mathe-erk__raster .mathe-erk__schritt:has(.mathe-erk__vermutung) { order: 0; }
  .mathe-erk__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .mathe-erk__werkbank { position: relative; padding: 0 var(--space-3) var(--space-3); margin-top: var(--space-6);
    border-radius: var(--radius-lg); background: var(--surface-sunken); }
  /* Arbeitsbereich (2026-11-03): der Raster füllt die Höhe unter der Kopfzeile, Labor und Schritte scrollen jeder für sich
     (overscroll-behavior: contain, die Seite scrollt nur bis hierher; Knopf „Zu den Reitern“ in js/mathe-erkunden.js).
     Nicht bei Labor groß und nicht bei Schreibfläche „unter“ (eigene Regeln unten). Schreibfläche „neben“: steht in der rechten Spalte unter ihrem Schritt, das Labor bleibt links stehen (2026-11-03). */
  .mathe-erk__raster:not(.is-gross):not(:has(.sf-schalter.is-offen[data-lage="unten"])) { scroll-margin-top: var(--header-h); }
  .mathe-erk__raster:not(.is-gross):not(:has(.sf-schalter.is-offen[data-lage="unten"])) > :is(.mathe-erk__werkbank, .mathe-erk__wege) { min-height: 0; margin-top: 0; max-height: calc(100dvh - var(--header-h) - var(--space-4));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mathe-erk__raster:not(.is-gross):not(:has(.sf-schalter.is-offen[data-lage="unten"])) > .mathe-erk__wege { padding: 0 var(--space-2) var(--space-5) 0; }
  .mathe-erk__raster:not(.is-gross):not(:has(.sf-schalter.is-offen[data-lage="unten"])) > .mathe-erk__wege > .mathe-erk__schritt:first-child { margin-top: 0; }
  /* Schreibfläche „unten“: Labor bleibt links stehen, die Seite scrollt wie bisher */
  .mathe-erk__raster:not(.is-gross):has(.mathe-erk__schreib .sf-schalter.is-offen[data-lage="unten"]) > .mathe-erk__werkbank {
    position: sticky; top: calc(var(--header-h) + var(--space-3)); max-height: calc(100dvh - var(--header-h) - var(--space-5)); overflow-y: auto; overscroll-behavior: contain; }
  .mathe-erk__werkbank > .mathe-erk__schritt { margin-top: var(--space-3); }
  /* Labore mit eigener Seitenspalte (Koordinaten, Vierecke): in der halben Breite Bild über die Bedienung */
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql__oben { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  /* Vierecks-Aufträge kompakt: nur der Name, die Beschreibung beim gewählten Auftrag */
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sy__ziele { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sy__ziel { padding: 0.4rem 0.6rem; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sy__ziel span { display: none; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sy__ziel[aria-pressed="true"] span { display: block; }
  /* Sachaufgaben-Labor: langer Aufgabentext scrollt in seiner Box, Karten enger (sonst weit höher als der Bildschirm) */
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sa__text { max-height: 9.5rem; overflow-y: auto; font-size: var(--fs-hilfe); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sa__karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sa__karte { min-width: 0; min-height: 3.2rem; padding: 0.3rem 0.5rem; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sa__karte span { font-size: 0.78rem; }
  /* Graphen-Labore (Kl. 9, parabellabor.js): Graph auf ~40 % der Höhe begrenzen und die Wertetabelle direkt darunter,
     Regler und Hinweise danach – so stehen Graph, Werte und Regler zusammen im Blick (2026-10-21) */
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql__oben svg.mx-koord { max-height: min(64dvh, 620px); width: auto; max-width: 100%; display: block; margin-inline: auto; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql:has(> .pl__tabelle) { display: flex; flex-direction: column; gap: var(--space-2); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql:has(> .pl__tabelle) > .ql__oben { display: contents; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql:has(> .pl__tabelle) svg.mx-koord { max-height: min(58dvh, 540px); }   /* mit Wertetabelle: Platz für die Werte; der Graph schrumpft mit der Höhe */
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql:has(> .pl__tabelle) > .pl__tabelle { order: 1; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql:has(> .pl__tabelle) .ql__seite { order: 2; }
  /* Wachstums-Labor (Kl. 10, wachstumlabor.js): Ablesestelle und abgelesener Wert direkt unter den Graphen, Regler und Wertetabelle danach */
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql.wl:has(.wl__wert) { display: flex; flex-direction: column; gap: var(--space-2); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql.wl:has(.wl__wert) > .ql__oben, .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql.wl:has(.wl__wert) .ql__seite { display: contents; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql.wl:has(.wl__wert) .wl__ablesen, .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql.wl:has(.wl__wert) .wl__wert { order: 1; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql.wl:has(.wl__wert) .ql__seite > :not(.wl__ablesen):not(.wl__wert) { order: 2; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql.wl:has(.wl__wert) > .wl__tabwrap { order: 3; }
  /* Pizza-Labor: Pizzen und Teller kleiner, damit Pizzen und alle Teller zusammen sichtbar sind */
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .br-pizza { width: min(92px, 20%); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .br-teller-reihe { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .br-teller { padding: var(--space-1) var(--space-2); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .br-teller__svg { max-height: 64px; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .br-teller__zahl { font-size: var(--fs-hilfe); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .sy:has(.sy__ziele) .ql__oben svg { max-height: min(34dvh, 280px); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql__seite:has(.sy__detektor) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
  .mathe-erk__wege > .mathe-erk__schritt:first-child { margin-top: var(--space-6); }
  .mathe-erk__wege .mathe-beob input { width: 4.5rem; }
  .mathe-erk__wege .mathe-beob th, .mathe-erk__wege .mathe-beob td { padding: 0.35rem 0.45rem; }
  /* schmale Spalte: lange Zeilenköpfe („① A und A′: Abstand zur Achse“) umbrechen statt seitlich zu scrollen */
  .mathe-erk__wege .mathe-beob tbody th, .mathe-erk__wege .mathe-beob__laden { white-space: normal; hyphens: auto; -webkit-hyphens: auto; }
  .mathe-erk__wege .mathe-beob__chip { min-width: 2.6rem; padding: 0.25rem 0.5rem; }
  .mathe-erk__wege .mathe-beob__wahl { flex-wrap: wrap; }   /* drei Chips (kleiner, gleich, größer) dürfen untereinander */
  .mathe-erk__wege .mathe-beob thead th { font-size: var(--fs-meta); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .mathe-erk__wege .mathe-beob:has(thead th:nth-child(4)) input { width: 3.8rem; }
  .mathe-erk__wege .mathe-beob:has(thead th:nth-child(5)) input { width: 3.1rem; }
  /* Regler kompakt (2026-10-22): Name, Regler und Wert dicht beieinander, zwei Regler nebeneinander, sobald die Spalte breit genug ist */
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql__regler { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap: var(--space-5); row-gap: var(--space-1); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql__regler label { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql__regler output { min-width: 2.6rem; }
  /* Ansicht-Reiter (2026-10-22, js/mathe-erkunden.js): Labor-Teile mit data-ansicht stehen als Reiter statt untereinander */
  .mathe-erk__raster:not(.is-gross) .mathe-erk__reiter { display: flex; }
  .mathe-erk__raster:not(.is-gross) .is-ansicht-aus { display: none !important; }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql > [data-ansicht] > svg.mx-koord { max-height: min(64dvh, 620px); width: auto; max-width: 100%; display: block; margin-inline: auto; }
  /* Labor groß (2026-10-22): Knopf oben rechts im Labor; groß = Labor über die volle Breite, Schritte darunter */
  .mathe-erk__werkbank > .mathe-erk__gross { display: inline-flex; position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; }
  .mathe-erk__raster.is-gross { display: flex; flex-direction: column; align-items: stretch; }
  .mathe-erk__raster.is-gross > .mathe-erk__werkbank { position: relative; max-height: none; overflow: visible; }
  /* groß: Vermuten bleibt vor dem Labor (Nummer 1 vor 2), deshalb lösen sich die Schritte aus ihrer Spalte */
  .mathe-erk__raster.is-gross > .mathe-erk__wege { display: contents; }
  .mathe-erk__raster.is-gross .mathe-erk__schritt:has(.mathe-erk__vermutung) { order: -1; }
  /* offen „unter“: Vermuten über die volle Breite oben, darunter Labor und Schritte weiter nebeneinander, die Fläche unter beiden (js/mathe-erkunden.js) */
  .mathe-erk__raster:not(.is-gross):has(.mathe-erk__schreib .sf-schalter.is-offen[data-lage="unten"]) { grid-template-rows: auto repeat(14, auto) 1fr; row-gap: 0; }
  .mathe-erk__raster:not(.is-gross):has(.mathe-erk__schreib .sf-schalter.is-offen[data-lage="unten"]) > .mathe-erk__wege { display: contents; }
  .mathe-erk__raster:not(.is-gross):has(.mathe-erk__schreib .sf-schalter.is-offen[data-lage="unten"]) > .mathe-erk__wege > * { grid-column: 2; }
  .mathe-erk__raster:not(.is-gross):has(.mathe-erk__schreib .sf-schalter.is-offen[data-lage="unten"]) > .mathe-erk__wege > .mathe-erk__schritt:has(.mathe-erk__vermutung) { grid-column: 1 / -1; grid-row: 1; }
  .mathe-erk__raster:not(.is-gross):has(.mathe-erk__schreib .sf-schalter.is-offen[data-lage="unten"]) > .mathe-erk__werkbank { grid-column: 1; grid-row: 2 / -1; }
  .mathe-erk__schreibplatz { margin-top: var(--space-4); }
  .mathe-erk__raster.is-gross .ql__oben svg.mx-koord { max-height: min(72dvh, 640px); width: auto; max-width: 100%; display: block; margin-inline: auto; }
}
/* iPad: früher kein eigenes Scrollfeld (Safari zeichnete den unteren Teil erst beim Scrollen, 2026-10-25). Jetzt hat der Raster eine feste Höhe
   und die Spalten scrollen darin; --erk-top und das sticky-Labor sind entfallen (2026-11-03). Am echten iPad prüfen: Zeichnen beim Scrollen. */
/* Breite Seite (ab 1300 px Fenster, Seite bis 1400 px): das Labor bekommt die breitere Spalte */
@container (min-width: 1200px) {
  .mathe-erk__raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .mathe-erk__raster:has(.mathe-beob thead th:nth-child(5)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.mathe-erk__gross, .mathe-erk__reiter, .mathe-erk__hoch { display: none; }
/* Leiste über dem Arbeitsbereich: gleiche Fläche, auf der die Seite scrollt; Knopf bringt zu den Reitern zurück */
@container (min-width: 860px) { .mathe-erkunden:not(:has(.mathe-erk__raster.is-gross)):not(:has(.sf-schalter.is-offen[data-lage="unten"])) .mathe-erk__hoch { display: flex; justify-content: flex-end; margin: var(--space-3) 0 var(--space-2); } }
@container (min-width: 680px) { .mathe-erkunden--abschnitte:not(:has(.mathe-erk__raster.is-gross)):not(:has(.sf-schalter.is-offen[data-lage="unten"])) .mathe-erk__hoch { display: flex; justify-content: flex-end; margin: var(--space-3) 0 var(--space-2); } }
.mathe-erk__reiter { flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.mathe-erk__reiter button { padding: 0.35rem 0.8rem; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 2px solid transparent;
  background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--fs-hilfe); font-weight: var(--fw-halbfett); cursor: pointer; }
.mathe-erk__reiter button:hover { color: var(--color-text); }
.mathe-erk__reiter button[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--fach-mathe); }
.mathe-erk__reiter button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (min-width: 1300px) { .mathe-seite:has(.mathe-erkunden--neben) { max-width: 1400px; } }
/* Teil C: Schreibfläche geöffnet mit Platz „rechts“ → rechte Spalte, bleibt beim Scrollen stehen (Tipps, Rückmeldung wachsen links);
   „unten“ (Nutzer-Vorgabe 2026-10-25) bleibt zwischen Frage und Ergebnis in voller Breite. Die Wahl gibt es nur, wenn die Spalte passt. */
.mathe-seite .mu .sf-schalter__lage { display: none; }
@container (min-width: 820px) { .mathe-seite .mu .sf-schalter__lage { display: inline-flex; } }
@container (min-width: 820px) {
  .mu__ansicht:has(> .mu__schreib .sf-schalter.is-offen[data-lage="rechts"]) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: repeat(14, auto) 1fr; column-gap: var(--space-5); align-items: start;
  }
  .mu__ansicht:has(> .mu__schreib .sf-schalter.is-offen[data-lage="rechts"]) > * { grid-column: 1; }
  .mu__ansicht:has(> .mu__schreib .sf-schalter.is-offen[data-lage="rechts"]) > .mu__schreib { grid-column: 2; grid-row: 1 / -1;
    position: sticky; top: calc(var(--header-h) + var(--space-3)); max-height: calc(100dvh - var(--header-h) - var(--space-5));
    overflow-y: auto; overscroll-behavior: contain; }
  .mu__ansicht:has(> .mu__schreib .sf-schalter.is-offen[data-lage="rechts"]) > .mu__schreib .sf-schalter { margin-top: 0; }
  .mu__ansicht:has(> .mu__schreib .sf-schalter.is-offen[data-lage="rechts"]) .sf__blatt { min-height: min(62dvh, 560px); }
  /* Variationsreihe: Fläche je Teil, „neben“ = rechte Spalte neben ihrem Teil (2026-10-27) */
  .mu__reihe-teil:has(> .mu__reihe-schreib .sf-schalter.is-offen[data-lage="rechts"]) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: var(--space-5); align-items: start;
  }
  .mu__reihe-teil:has(> .mu__reihe-schreib .sf-schalter.is-offen[data-lage="rechts"]) > * { grid-column: 1; }
  .mu__reihe-teil:has(> .mu__reihe-schreib .sf-schalter.is-offen[data-lage="rechts"]) > .mu__reihe-schreib { grid-column: 2; grid-row: 1 / -1;
    position: sticky; top: calc(var(--header-h) + var(--space-3)); max-height: calc(100dvh - var(--header-h) - var(--space-5));
    overflow-y: auto; overscroll-behavior: contain; }
  .mu__reihe-teil:has(> .mu__reihe-schreib .sf-schalter.is-offen[data-lage="rechts"]) > .mu__reihe-schreib .sf-schalter { margin-top: 0; }
  .mu__reihe-teil:has(> .mu__reihe-schreib .sf-schalter.is-offen[data-lage="rechts"]) .sf__blatt { min-height: min(50dvh, 420px); }
}
/* Werkzeugleiste der Schreibfläche klebt beim Scrollen (2026-11-03, css/style.css .sf__leiste): ist die Spalte der Scrollbereich, klebt sie ganz oben in der Spalte,
   sonst unter der Kopfzeile (Standard --header-h). */
@container mathe-kasten (min-width: 820px) {
  :is(.mu__schreib, .mu__reihe-schreib, .mathe-erk__schreib) .sf-schalter.is-offen[data-lage="rechts"] { --sf-leiste-top: 0px; }
}
@container (min-width: 680px) { .mathe-mr__wege { --sf-leiste-top: 0px; } }
/* „neben“ in Teil A: genug Blatt in der rechten Spalte (benannter Container: die Spalte selbst ist schmaler als die Schwelle) */
@container mathe-kasten (min-width: 820px) {
  .mathe-erk__raster:not(.is-gross) .mathe-erk__schritt:has(.mathe-erk__schreib .sf-schalter.is-offen[data-lage="rechts"]) .sf__blatt { min-height: min(55dvh, 480px); }
}
/* Teil A: Schreibfläche „neben | unter“ (Nutzer-Vorgabe 2026-10-25, Wahl im Gerät gemerkt, js/schreibflaeche.js). Ab 820 px Kastenbreite
   (iPad quer, PC) steht sie bei „neben“ neben dem Labor unter ihrem Schritt (2026-11-03); nur bei Labor groß als rechte Spalte neben dem Schritt.
   Schmaler (iPad hochkant) gibt es keine Wahl und die Fläche steht immer unter der Aufgabe. */
.mathe-erkunden { container-type: inline-size; container-name: mathe-kasten; }
.mathe-erk__schreib .sf-schalter__lage { display: none; }
@container (min-width: 820px) {
  .mathe-erk__schreib .sf-schalter__lage { display: inline-flex; }
  .mathe-erk__raster.is-gross .mathe-erk__schritt:has(> .mathe-erk__schreib .sf-schalter.is-offen[data-lage="rechts"]) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: repeat(14, auto) 1fr; column-gap: var(--space-5); align-items: start;
  }
  .mathe-erk__raster.is-gross .mathe-erk__schritt:has(> .mathe-erk__schreib .sf-schalter.is-offen[data-lage="rechts"]) > * { grid-column: 1; }
  .mathe-erk__raster.is-gross .mathe-erk__schritt:has(> .mathe-erk__schreib .sf-schalter.is-offen[data-lage="rechts"]) > .mathe-erk__schreib { grid-column: 2; grid-row: 1 / -1;
    position: sticky; top: calc(var(--header-h) + var(--space-3)); max-height: calc(100dvh - var(--header-h) - var(--space-5));
    overflow-y: auto; overscroll-behavior: contain; }
  .mathe-erk__raster.is-gross .mathe-erk__schritt:has(> .mathe-erk__schreib .sf-schalter.is-offen[data-lage="rechts"]) > .mathe-erk__schreib .sf-schalter { margin-top: 0; }
  .mathe-erk__raster.is-gross .mathe-erk__schritt:has(> .mathe-erk__schreib .sf-schalter.is-offen[data-lage="rechts"]) .sf__blatt { min-height: min(62dvh, 520px); }
  .mathe-erk__raster.is-gross .mathe-erk__schreib .sf-schalter.is-offen[data-lage="rechts"] { --sf-leiste-top: var(--header-h); }
}

/* ==========================================================
   Mathe-Übersicht und Mathe-Stufe im Stil „Do-matik“ (2026-10-22, js/mathe.js baender/uebersicht/stufe):
   Bänder und Karten wie die Informatik-Stufen (Klassen st-* in seiten.css); hier nur die Mathe-Besonderheiten.
   ========================================================== */
.mathe-baender { padding: 0; }
/* Stufenkarte der Übersicht: große Stufenzahl als Bildfläche in der Kapitelfarbe */
.st-karte__motiv.mk-zahl { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: var(--fw-titel); letter-spacing: -0.03em; line-height: 1; color: var(--k); }
.st-karte.ist-bald .st-karte__motiv.mk-zahl { color: var(--text-muted); }
/* Kapitel-Karte der Stufe: Titel als h2 in Kartengröße, darunter die Themenliste und die Wege zu Trainer und Spickzettel */
.mk-raster { align-items: start; }
.mk-karte .mk-karte__titel { margin: 0; font-size: 1.25rem; font-weight: var(--fw-titel); line-height: 1.25; letter-spacing: -0.01em; }
.mk-karte .mst-themen { padding: 0.5rem 0.75rem 0.75rem; }
.mk-karte .mst-kap__hinweis { margin: 0.5rem 1.25rem 0; font-size: var(--fs-meta); color: var(--text-muted); }
.mk-karte .mst-mehr { margin: 0 0.75rem 0.75rem; }
.mk-karte .mst-trainer { margin: 0 1.25rem 0.75rem; }
.mk-karte .mst-trainer:last-child { margin-bottom: 1.25rem; }
.mk-karte .st-karte__text { padding-bottom: 0.25rem; }

/* ==========================================================
   Erarbeitung im Mathigon-/ANTON-Format (Prototyp 2026-10-25, js/mathe-mitrechnen.js, Bauplan mitrechnen.md):
   kurze Abschnitte erscheinen nacheinander, Lücken im Text (Zahl, Chip, Aufklappliste), daneben die Visualisierung.
   Teil A nutzt das Zwei-Spalten-Labor von oben, „Mitrechnen“ ein eigenes Raster (zweispaltig schon ab iPad hochkant).
   ========================================================== */
.mx-abschnitte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }   /* minmax(0, …): lange Auswahllisten sprengen sonst die Spalte */
.mx-abschnitte [hidden], .mathe-mitrechnen [hidden], .ps [hidden] { display: none !important; }   /* display-Regeln unten dürfen hidden nicht überstimmen */
/* Abschnitt: feine Linie links (gerader Hintergrundstrich, keine Rundung), blau = gerade dran, grau = erledigt */
.mx-ab { min-width: 0; padding-left: var(--space-4); background: linear-gradient(var(--color-primary), var(--color-primary)) 0 0 / 2px 100% no-repeat; }
.mx-ab.is-fertig { background-image: linear-gradient(var(--color-border), var(--color-border)); }
.mx-ab.is-uebersprungen { background-image: linear-gradient(var(--color-warning), var(--color-warning)); }
.mx-ab.is-neu { animation: mx-ab-ein 0.35s ease-out; }
@keyframes mx-ab-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mx-ab.is-neu { animation: none; } }
.mx-ab__text { margin: 0; font-size: 1.08rem; line-height: 2.1; }
.mx-ab__formeln { margin: var(--space-1) 0 0; }
.mx-ab__formelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin: 0.3rem 0; }
.mx-ab__formelzeile .mx-formel { margin: 0; }
.mx-ab__marke { color: var(--color-text-secondary); }
.mx-ab__warte { display: flex; align-items: center; gap: 0.5rem; margin: var(--space-2) 0 0; font-weight: var(--fw-halbfett); color: var(--color-primary); }
.mx-ab__warte-marke { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.mx-ab__warte.is-ok { color: var(--color-success); }
.mx-ab__danach { margin-top: var(--space-2); color: var(--color-text-secondary); }
.mx-ab__knoepfe { margin-top: var(--space-2); }
.mx-ab .task__feedback:empty, .mx-ab__tipps:empty { display: none; }
.mx-ab__tipps { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.mx-ab__wahl { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; vertical-align: middle; }
.mx-ab__chip, .mx-ab__liste { min-height: 2.5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface);
  color: var(--color-text); font: inherit; line-height: 1.3; vertical-align: middle; touch-action: manipulation; }
.mx-ab__chip { min-width: 2.75rem; padding: 0.2rem 0.75rem; cursor: pointer; }
.mx-ab__liste { max-width: 100%; padding: 0.2rem 0.5rem; cursor: pointer; }
.mx-ab__liste-text { display: inline-block; padding: 0.4rem 0.6rem; cursor: default; }
.mx-ab__chip:hover:not(:disabled), .mx-ab__liste:hover:not(:disabled) { border-color: var(--color-primary); }
.mx-ab__chip:focus-visible, .mx-ab__liste:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mx-ab__chip[aria-pressed="true"] { border-color: var(--color-primary); background-color: var(--color-primary-soft); }
.mx-ab__chip:disabled, .mx-ab__liste:disabled { cursor: default; color: var(--color-text); opacity: 1; }
.mx-ab__wahl.is-ok .mx-ab__chip[aria-pressed="true"], .mx-ab__liste.is-ok { border-color: var(--color-success); background-color: var(--color-success-soft); }
.mx-ab__wahl.is-falsch .mx-ab__chip[aria-pressed="true"], .mx-ab__liste.is-falsch { border-color: var(--color-danger); background-color: var(--color-danger-soft); }
.mx-ab__wahl.is-ok .mx-ab__chip:not([aria-pressed="true"]) { opacity: 0.45; }
.mx-ab__wahl.is-gewaehlt .mx-ab__chip:not([aria-pressed="true"]) { opacity: 0.6; }

/* Teil A mit Abschnitten: zweispaltig schon ab 680 px Kastenbreite (iPad hochkant), damit der Regler beim Lesen im Blick bleibt;
   ab 860 px gelten die allgemeinen Regeln des Zwei-Spalten-Labors oben */
@container (min-width: 680px) and (max-width: 859.98px) {
  .mathe-erkunden--abschnitte .mathe-erk__werkbank, .mathe-erkunden--abschnitte .mathe-erk__wege { display: block; }
  .mathe-erkunden--abschnitte .mathe-erk__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .mathe-erkunden--abschnitte .mathe-erk__raster .mathe-erk__schritt:has(.mathe-erk__vermutung) { order: 0; }
  .mathe-erkunden--abschnitte .mathe-erk__werkbank { position: relative; padding: 0 var(--space-3) var(--space-3); margin-top: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-sunken); }
  .mathe-erkunden--abschnitte .mathe-erk__raster:not(.is-gross):not(:has(.sf-schalter.is-offen[data-lage="unten"])) { scroll-margin-top: var(--header-h); }
  .mathe-erkunden--abschnitte .mathe-erk__raster:not(.is-gross):not(:has(.sf-schalter.is-offen[data-lage="unten"])) > :is(.mathe-erk__werkbank, .mathe-erk__wege) { min-height: 0; margin-top: 0; max-height: calc(100dvh - var(--header-h) - var(--space-4));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mathe-erkunden--abschnitte .mathe-erk__raster:not(.is-gross):not(:has(.sf-schalter.is-offen[data-lage="unten"])) > .mathe-erk__wege { padding: 0 var(--space-2) var(--space-5) 0; }
  .mathe-erkunden--abschnitte .mathe-erk__raster.is-gross { display: flex; flex-direction: column; align-items: stretch; }
  .mathe-erkunden--abschnitte .mathe-erk__raster.is-gross > .mathe-erk__werkbank { position: relative; max-height: none; overflow: visible; }
  /* Koordinatensystem im Labor (2026-11-02, iPad hochkant): breitere Spalte, Knopf „Labor groß“ wie im Querformat; groß = Schritte darunter */
  .mathe-erkunden--abschnitte .mathe-erk__raster:has(.mathe-erk__werkbank svg.mx-koord) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .mathe-erkunden--abschnitte .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank:has(svg.mx-koord) { padding-inline: var(--space-2); }
  .mathe-erkunden--abschnitte .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql__oben svg.mx-koord, .mathe-erkunden--abschnitte .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .ql > [data-ansicht] > svg.mx-koord {
    max-height: min(64dvh, 620px); width: auto; max-width: 100%; display: block; margin-inline: auto; }
  .mathe-erkunden--abschnitte .mathe-erk__werkbank > .mathe-erk__gross { display: inline-flex; position: absolute; top: var(--space-3); right: var(--space-2); z-index: 2; }
  .mathe-erkunden--abschnitte .mathe-erk__raster.is-gross > .mathe-erk__wege { display: contents; }
  .mathe-erkunden--abschnitte .mathe-erk__raster.is-gross .mathe-erk__schritt:has(.mathe-erk__vermutung) { order: -1; }
  .mathe-erkunden--abschnitte .mathe-erk__raster.is-gross .ql__oben svg.mx-koord { max-width: 100%; max-height: min(66dvh, 760px); width: auto; display: block; margin-inline: auto; }
}
/* iPad quer (2026-11-02): Labore mit Koordinatensystem bekommen auch unter 1200 px die breitere Spalte (breite Tabellen rechts behalten ihren Platz) */
@container (min-width: 860px) and (max-width: 1199.98px) {
  .mathe-erk__raster:has(.mathe-erk__werkbank svg.mx-koord):not(:has(.mathe-beob thead th:nth-child(5))) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank:has(svg.mx-koord) { padding-inline: var(--space-2); }
  .mathe-erk__raster:not(.is-gross) > .mathe-erk__werkbank .pl__tabelle :is(th, td) { padding-block: 0.15rem; }   /* flache Wertetabelle: mehr Höhe für den Graphen */
}

/* Visualisierungen (js/applets/mathe/punktsymmetrie.js): Figur oder Gitter, darunter der Regler */
.ps { display: grid; gap: var(--space-2); }
.ps__wahl { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ps__bild { display: block; width: 100%; height: auto; max-height: min(52dvh, 440px); margin-inline: auto; border-radius: var(--radius-lg); background: var(--color-surface); }
.ps__bild--punkt { touch-action: none; }
.ps__regler { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.4rem; align-items: center; gap: var(--space-3); padding: 0.3rem var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ps__regler label { font-weight: var(--fw-halbfett); }
.ps__regler input { width: 100%; min-height: 2.75rem; margin: 0; accent-color: var(--color-primary); }
.ps__regler output { font-weight: var(--fw-halbfett); font-size: 1.1rem; text-align: right; font-variant-numeric: tabular-nums; }
.ps__regler.is-gesperrt { opacity: 0.55; }
.ps__hilfe { margin: 0; }

/* Reiter „Mitrechnen“ zwischen B und C (js/mathe.js) */
.mathe-teile__b--m svg { width: 1rem; height: 1rem; }
.mathe-mitrechnen { container-type: inline-size; }
/* Rechenzeilen im Abschnittstext: eingerückt, „=“ hängt links, Terme bündig (2026-10-27) */
.mx-pfeil { display: inline-block; margin-left: 1.4em; font-family: var(--font); font-style: normal; font-weight: 400; font-size: 0.9em; color: var(--color-text-secondary); }
.mx-pfeil b { font-weight: 600; color: var(--color-primary); }
.mx-da { position: relative; display: inline-block; padding-top: 2.1em; }
.mx-da__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: var(--color-primary); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mx-hz { display: block; margin: 0.35em 0 0.2em 0.9em; }
.mx-hz__z { display: block; margin: 0.3em 0; }
.mx-hz__gl { display: inline-block; width: 1.5em; }
.mx-hz__z--erst { padding-left: 1.5em; }
.mathe-mr__info { max-width: 62ch; color: var(--color-text-secondary); }
/* „So steht es im Heft“: die vollständige Rechnung, ohne Karo und ohne grauen Formelgrund (2026-10-27) */
.mathe-mr__heft { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg); }
.mathe-mr__heft .mathe-label { margin: 0 0 var(--space-2); }
.mathe-mr__heftzeile { margin: 0 0 var(--space-2); line-height: 1.5; }
.mathe-mr__heftraster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-3); }
.mathe-mr__heftraster .rkk-wrap { margin: 0; }
.mathe-mr__heftzeile .mx-formel { background: none; padding: 0; border-radius: 0; box-shadow: none; }
.mathe-mr__leiste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: var(--space-4) 0 var(--space-5); padding: 4px;
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--border); }
/* gleicher aktiver Zustand wie Teile-Leiste und Niveaus (2026-10-27): gerade Linie unten auf blasser Akzentfläche */
.mathe-mr__leiste button { display: flex; align-items: center; gap: var(--space-2); min-height: 3rem; padding: 0.4rem 0.7rem; border: 0; border-radius: var(--radius-knopf);
  background: transparent; color: var(--color-text-secondary); font: inherit; line-height: 1.25; text-align: left; cursor: pointer; }
/* fünf Beispiele (Geodreieck-Beispiele, 2026-11-01): lange Titel trennen statt in den Nachbarknopf zu ragen */
.mathe-mr__leiste button > span:last-child { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.mathe-mr__leiste button:hover { color: var(--color-text); background: var(--surface-sunken); }
.mathe-mr__leiste button[aria-selected="true"] { color: var(--color-text); background: var(--linie-unten), var(--nav-aktiv-soft); }
.mathe-mr__leiste button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mathe-mr__leiste small { display: block; font-size: var(--fs-meta); color: var(--text-muted); }
.mathe-mr--ohne-afb .mathe-mr__afb { display: none; }
.mathe-mr__nr { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 500;
  font-size: var(--fs-hilfe); color: var(--fach-mathe); }
.mathe-mr__leiste button[aria-selected="true"] .mathe-mr__nr { border-color: var(--fach-mathe); color: var(--color-on-primary); background: var(--fach-mathe); }
.mathe-mr__nr svg { width: 1rem; height: 1rem; }
.mathe-mr__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.mathe-mr__kopf h3 { margin: 0 auto 0 0; }
.mathe-mr__aufgabe { margin-bottom: var(--space-4); padding: 0.85rem 1.1rem 0.85rem 1.25rem; --mx-strich: var(--color-primary); }
.mathe-mr__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.mathe-mr__raster > * { min-width: 0; }
.mathe-mr__bild { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.mathe-mr__wege > .mathe-label { margin: 0 0 var(--space-3); }
.mathe-mr__schreib { margin-top: var(--space-4); }
.mathe-mr__schreib .sf-schalter__lage { display: none; }   /* Wahl „neben | unter“ nur bei zwei Spalten */
.mathe-mr__schreibplatz:not(:empty) { margin-top: var(--space-4); }
.mathe-mr__fertig { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
/* „Jetzt du“: dieselbe Aufgabe ohne Anleitung unter dem Beispiel (2026-10-26) */
.mathe-mr__selbst { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.mathe-mr__selbst .mathe-mr__info { margin: 0 0 var(--space-4); }
@container (min-width: 680px) {
  .mathe-mr__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-5); }
  .mathe-mr__schreib .sf-schalter__lage { display: inline-flex; }
  /* Arbeitsbereich (2026-11-03): Bild links und Schritte rechts scrollen jeder für sich, die Seite nur bis hierher */
  .mathe-mr__raster { scroll-margin-top: var(--header-h); }
  .mathe-mr__raster > * { max-height: calc(100dvh - var(--header-h) - var(--space-4)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mathe-mr__wege { padding-bottom: var(--space-5); }
}
@container (max-width: 560px) { .mathe-mr__leiste small { display: none; } }
/* sehr schmal (Handy, 2026-10-27): nur die Nummern, der Titel steht direkt darunter als „Beispiel n: …“ */
@container (max-width: 420px) {
  .mathe-mr__leiste button { justify-content: center; padding-inline: 0.2rem; }
  .mathe-mr__leiste button > span:last-child { display: none; }
}

/* Gegenereignis mit Querstrich (Ā, lies „nicht A“), Stochastik-Seiten */
.mx-quer { text-decoration: overline; text-decoration-thickness: 1.5px; text-underline-offset: 0; }

/* Zufallslabor (js/applets/mathe/zufallslabor.js, m9-6): Versuch auslösen, Strichliste, Vierfeldertafel selbst eintragen, gekoppelter Baum */
.zl { display: grid; gap: var(--space-3); }
.zl__bild, .zl__baum { display: block; width: 100%; height: auto; }
.zl__leiste, .zl__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.zl__regel { margin: 0; max-width: 62ch; }
.zl__wurfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.zl__wurf { width: 11rem; height: auto; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--color-surface); }
.zl__n { margin: 0; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.zl__strich { border-collapse: collapse; margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.zl__strich caption { text-align: left; font-size: var(--fs-meta); color: var(--text-muted); padding-bottom: var(--space-1); }
.zl__strich th, .zl__strich td { padding: 0.25rem 0.6rem; border-bottom: 1px solid var(--color-border); text-align: left; font-weight: 400; }
.zl__strich th { white-space: nowrap; }
.zl__strich .zl__zahl { text-align: right; font-weight: var(--fw-halbfett); min-width: 3ch; }
.zl__striche { display: block; height: 22px; }
.zl__titel { margin: 0 0 var(--space-1); }
.zl__titel .muted { font-weight: 400; }
.zl__vf { width: 100%; font-size: 0.95rem; }
.zl__vf td { padding: 0.35rem 0.45rem; white-space: nowrap; }
.zl__vf td.zl__zelle { cursor: pointer; transition: background-color var(--dur-fast, 120ms); }
.zl__vf td.zl__zelle.is-mark { background: var(--color-primary-soft); }
.zl__vf td.zl__zelle.is-ok { background: var(--color-success-soft); }
.zl__vf td.zl__zelle.is-falsch { background: var(--color-danger-soft); }
.zl__vf td.is-verdeckt { color: var(--fach-mathe); font-weight: var(--fw-halbfett); text-align: center; }
.zl__vf th { padding: 0; }
.zl__vf tr:first-child th:last-child, .zl__vf tr:last-child th { padding: 0.35rem 0.5rem; }
.zl__kopf { display: block; width: 100%; min-height: 2.5rem; padding: 0.35rem 0.5rem; border: 0; background: transparent; color: var(--color-primary);
  font: inherit; font-weight: var(--fw-halbfett); text-align: left; cursor: pointer; }
.zl__kopf.is-an { background: var(--color-primary); color: var(--color-on-primary); }
.zl__kopf:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.zl__eingabe { width: 6ch; min-width: 5ch; text-align: right; }
.zl__vf td:has(.zl__eingabe) { padding: 0.2rem 0.3rem; }
.zl__hinweis { margin: var(--space-1) 0 0; }
.zl__bezug { margin: var(--space-2) 0 0; padding: 0.5rem 0.8rem; border-radius: var(--radius-lg); background: var(--color-primary-soft); }
.zl__vergleich .mathe-label { margin: 0 0 var(--space-2); }
.zl__balkenzeile { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.zl__balken { display: block; height: 1.1rem; border-radius: var(--radius-sm); background: var(--surface-sunken); overflow: hidden; }
.zl__balken-fuell { display: block; height: 100%; background: var(--color-primary); }
.zl__balken-fuell--1 { background: var(--color-warning); }
.zl__balken-fuell--2 { background: var(--color-text-muted); }

/* Streck-, Ähnlichkeits- und Strahlensatzbühne (js/applets/mathe/strecklabore.js, Kl. 10 Kapitel III, 2026-10-25) */
.sb, .ab, .st { display: grid; gap: var(--space-2); }
.sb__bild { max-height: min(46dvh, 420px); }
.sb__werte { overflow-x: auto; }
.sb__werte p { margin: var(--space-1) 0 0; }
.sb__tab { width: 100%; font-size: 0.95rem; }
.sb__tab th, .sb__tab td { padding: 0.2rem 0.5rem; }
.sb__tab td { font-size: 1rem; }
.sb__tab .sb__leer { border: 0; }
.sb__haken-einzeln { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: var(--fw-halbfett); }
.sb [hidden], .ab [hidden], .st [hidden] { display: none; }

/* Kapitel I: Rechenbild für Mitrechnen und Teil A (js/applets/mathe/groessen-erarbeiten.js) */
.rb { margin: 0; }
.rb__kopf { margin-bottom: var(--space-2); font-weight: var(--fw-halbfett); }
.rb__svg { display: block; width: 100%; max-width: 640px; height: auto; }
.rb__svg--blech { max-width: 340px; }
.rb__svg--mauer { max-width: 380px; }
.rb__muenzen { display: grid; gap: var(--space-3); }
.rb__zone { padding: var(--space-3); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-soft); }
.rb__titel { margin: 0 0 var(--space-2); font-weight: var(--fw-halbfett); font-size: var(--fs-ui); }
.rb__reihe { display: flex; flex-wrap: wrap; gap: 4px; min-height: 3rem; align-items: center; }
.rb__reihe .kasse__geld { cursor: default; width: 2.6rem; height: 2.6rem; font-size: 0.72rem; }
.rb__reihe .kasse__geld:hover { outline: 0; }
.rb__summe { margin: var(--space-2) 0 0; font: 800 1.2rem var(--font-mono, monospace); }
.rb__tafel td.is-stelle { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--fw-halbfett); }
.rb__tafel td.is-komma { box-shadow: inset -3px 0 0 var(--color-primary); }

/* Funktionsbild (js/applets/mathe/funktionsbild.js, Umbau m9-2 2026-10-25): Graph, Regler, Term und Wertetabelle einspaltig untereinander,
   passt in die halbe Breite von Teil A und in die Bildspalte von Mitrechnen */
.ql.fb { grid-template-columns: minmax(0, 1fr); }   /* sonst drückt die Wertetabelle das Labor über die Spalte hinaus */
.fb .ql__oben { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.fb .ql__oben svg.mx-koord { max-height: min(62dvh, 600px); width: auto; max-width: 100%; display: block; margin-inline: auto; }
.fb .ql__seite { display: grid; gap: var(--space-2); align-content: start; }
.fb .ql__regler { display: grid; gap: var(--space-1); }
.fb .ql__regler[hidden], .fb .ql__gleichung[hidden], .fb .fb__hinweis[hidden] { display: none; }
.fb .ql__gleichung { margin: 0; font-size: 1.15rem; font-weight: var(--fw-halbfett); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fb .fb__extra { display: grid; gap: var(--space-2); }
.fb .fb__treffer { margin: 0; }
.fb .fb__flaeche { margin: 0; display: grid; gap: var(--space-1); justify-items: center; }

/* Streifen (js/applets/mathe/streifen.js, Kl. 5 bis 9): Labor-Leiste unter dem Bild, Teile antippbar */
.streifen { display: grid; gap: var(--space-2); }
.streifen__bild { max-width: 760px; }
.streifen--tippen [data-i] { cursor: pointer; }
.streifen__leiste { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.streifen__leiste[hidden] { display: none; }
.streifen__teile, .streifen__wahl { display: inline-flex; gap: var(--space-1); align-items: center; }
.streifen__teile strong { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.streifen__wahl .btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }

/* Variationsreihe in Teil C (js/mathe-ueben.js D.matheReihe): Teile untereinander, das geänderte Merkmal liegt auf einem Marker */
.mu__reihe-teil { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.mu__reihe-teil:first-child { border-top: 0; }
.mu__reihe-teil[hidden] { display: none; }
.mu__reihe-kopf { display: flex; gap: var(--space-3); align-items: baseline; }
.mu__reihe-nr { min-width: 1.6ch; font-weight: 600; }
.mu__reihe-frage { flex: 1; min-width: 0; }
.mu__reihe-frage > p:first-child { margin-top: 0; }
.mu__reihe-teil.is-geloest .mu__reihe-nr { color: var(--color-success, var(--color-primary)); }
.mu__reihe-teil.is-geloest { opacity: 0.92; }
.mu__neu { padding: 0 0.08em; background: linear-gradient(var(--marker-mathe), var(--marker-mathe)) no-repeat 0 86% / 100% 38%; }
.mu__reihe-feld, .mu__reihe .tipps { margin-left: calc(1.6ch + var(--space-3)); }

/* Blender-Bild zur Textaufgabe in Teil C (js/mathe-ueben.js bild3d, 2026-10-27): klein rechts neben dem Text, eigene Spalte, nie über der SVG-Skizze;
   schmal rutscht es unter den Text. Transparente WebP, im Dunkeln mit feinem Saum wie .mx-3d */
.mu__mit-bild { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-start; }
.mu__mit-bild-text { flex: 1 1 20rem; min-width: 0; }
.mu__bild3d { flex: 0 1 12.5rem; width: 12.5rem; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius-lg); }
:root[data-theme="dark"] .mu__bild3d { filter: drop-shadow(0 0 1px color-mix(in srgb, var(--color-text) 55%, transparent)); }
/* ---------- Beamerfolien zu Teil A für Kl. 5–8 ohne iPads (2026-10-27, js/mathe-ohne-ipad.js) ----------
   Text links (Stelle „AB 1 c)“, Lücken wie auf AB 1), Labor groß rechts, „Erst vermuten“ deckt das Labor ab, bis die Lehrkraft aufdeckt. */
.mathe-beamer__folie > .mb-b { max-width: 120rem; flex: 1 0 auto; }
.mathe-beamer__folie:has(> .mb-b) { padding-inline: clamp(1rem, 3vw, 3rem); }
.mb-b { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(1rem, 3vw, 3.5rem); align-items: start; }
.mb-b__links > :first-child { margin-top: 0; }
.mb-b__links h2 { font-size: clamp(1.4rem, min(2.6vw, 5vh), 3rem); margin-bottom: 0.3em; }
.mb-b__text { line-height: 1.9; }
.mb-b__rechts { position: relative; min-width: 0; }
/* Labor in Bedienschrift statt Folienschrift, Bild so hoch wie die Folie erlaubt */
.mb-b__labor { font-size: clamp(1rem, 1.25vw, 1.35rem); line-height: 1.4; max-height: calc(100vh - 9rem); overflow: auto; }
.mb-b__labor svg { max-height: calc(100vh - 16rem); }
/* Statuszeile hält von Anfang an Platz für zwei Zeilen: Das Bild darüber springt nicht, wenn beim Einrasten der längere Text erscheint (2026-11-03) */
.mb-b__labor .sy__status { min-height: 2.8em; }
/* Hauptbild füllt die freie Fläche, Breite/Höhe rechnet bildFuellen() in js/mathe-ohne-ipad.js aus (2026-11-01); Seitenleisten darunter */
.mb-b__labor .mb-b__hauptbild { max-width: 100%; max-height: none; display: block; margin-inline: auto; }
.mb-b__labor .mb-b__stapel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; flex-direction: column; }
.mb-b__labor .mb-b__stapel > :not(.mb-b__hauptbild) { max-width: none; width: auto; }
/* Seitenleiste unter dem Bild in die Breite legen, damit das Bild mehr Höhe bekommt */
.mb-b__labor .mb-b__stapel > :not(.mb-b__hauptbild):not(:has(.mb-b__hauptbild)) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 1.2em; }
.mb-b__labor .mb-b__stapel > :not(.mb-b__hauptbild):not(:has(.mb-b__hauptbild)) > * { margin-block: 0; }
.mb-b__halt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 0.3em; padding: 1em;
  background: color-mix(in srgb, var(--color-surface) 94%, transparent); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.mb-b__halt p { margin: 0; max-width: 24ch; }
.mb-b__halt strong { font-size: 1.3em; font-weight: var(--fw-titel); }
.mb-b__halt-text, .mb-b__los { display: flex; align-items: center; gap: 0.5em; color: var(--color-text-secondary); font-size: 0.85em; }
.mb-b__hinweis { padding: 0.5em 0.8em; background: var(--color-bg-soft); border-radius: var(--radius-lg); }
.mb-b__struktur { margin-top: 0.6em; font-size: 0.85em; }
.mb-b__struktur-titel { font-weight: var(--fw-titel); margin: 0 0 0.3em; }
.mb-b__struktur table { border-collapse: collapse; }
.mb-b__struktur th, .mb-b__struktur td { border: 1px solid var(--color-border-strong); padding: 0.25em 0.6em; text-align: left; }
.mb-b__struktur th { background: var(--color-bg-soft); font-weight: var(--fw-halbfett); }
.mb-b__notiz { margin-top: 0.8em; font-size: var(--fs-ui); }
.mb-b__notiz .sf-schalter { max-width: none; }
.mb-b__wortspeicher { display: flex; flex-wrap: wrap; gap: 0.4em 0.6em; align-items: center; font-size: 0.8em; margin-top: 0.8em; }
.mb-b__wortspeicher > span:first-child { color: var(--color-text-muted); }
.mb-b__wortspeicher > span + span { padding: 0.05em 0.6em; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.mb-b__jetzt { display: grid; gap: 0.5em; line-height: 1.9; }
.mb-b__merk li { line-height: 1.9; }
/* Lücke wie auf AB 1: Linie mit Platz für das Wort; das Wort erscheint auf Klick, ohne dass die Zeile springt */
.mb-luecke { display: inline-block; min-width: calc(var(--n, 4) * 0.6em + 1em); border-bottom: 2px solid var(--color-text); text-align: center;
  line-height: 1.2; margin: 0 0.15em; }
.mb-luecke--eigen { border-bottom-style: dashed; border-color: var(--color-text-muted); }
.mb-luecke__w { color: var(--color-primary); font-weight: var(--fw-halbfett); }
.mb-luecke.is-offen .mb-luecke__w { color: var(--color-text); }
.mathe-beamer .mb-b__links .mb-schritt[hidden] { display: flex !important; visibility: hidden; }
.mathe-beamer .mb-luecke__w.mb-schritt[hidden] { display: inline !important; visibility: hidden; }
@media (max-width: 900px) { .mb-b { grid-template-columns: 1fr; } }

/* ---------- Beamer Kl. 6 Sonderfälle (2026-11-01): nur auf der Folie, die Lernseite bleibt unverändert ---------- */
/* Bild bleibt schmal, weil Hinweise und Regler darunter Höhe brauchen (Klasse mb-b__eng setzt bildFuellen): Hinweise weg, Regler zweispaltig */
.mb-b__labor.mb-b__eng .mu__klein, .mb-b__labor.mb-b__eng .ps__hilfe { display: none; }
/* Beziehungen-Labore (m6-7: Dreisatz, Strukturen, Terme, Graphen): Tabellen, Beschriftungen und Hinweise in Bedienschrift statt kleiner UI-Schrift */
.mb-b__labor .bzl { --fs-ui: 1em; }
/* m6-periodisch: Divisionsraster mit vielen Zeilen startet klein, damit es unverzoomt in die Höhe passt; die Folie vergrößert es danach selbst */
.mb-b__labor .dzl .rkk { --rkk: 1.4rem; }
.mb-b__labor.mb-b__eng .bq__regler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }

/* ---------- Beamer Kl. 5 Sonderfälle (2026-11-01): nur auf der Folie, die Lernseite bleibt unverändert ---------- */
/* Klassenname-Kollision: das Rundenlabor (js/applets/mathe/zahlen.js) heißt ebenfalls .rl wie die rechte Leiste in style.css (seit 2026-11-01 fixiert, 44 px breit,
   ausgeblendet ohne Knopf). Leiste hat role="toolbar", das Labor nicht: Labor wieder normal im Fluss zeigen (gilt auch für die Lernseite). */
.rl.rl.rl:not([role="toolbar"]) { position: static; z-index: auto; width: auto; padding: 0; background: none; border: 0; display: grid; justify-content: normal; }
/* m5-zaehlen: Stimmzettel und Strichliste links untereinander, Säulendiagramm groß rechts */
.mb-b__labor .dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); align-items: start; }
.mb-b__labor .dl__oben { grid-template-columns: minmax(0, 1fr); align-content: start; }
.mb-b__labor .dl__knoepfe .mx-nowrap { display: inline-flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); white-space: normal; }

/* Schriftlich multiplizieren Ziffer für Ziffer (2026-10-27, js/applets/mathe/schriftlich.js multweg, MATHE_MULT in js/mathe/m5-3.js):
   Marker auf der unteren Zellhälfte für die gerade gerechneten Ziffern, aktives Kästchen mit Eingabe, Beamer-Raster mit Klick für Klick sichtbaren Ziffern */
.rkk__z--marke { background-image: linear-gradient(to top, color-mix(in srgb, var(--fach-mathe) 38%, transparent) 55%, transparent 55%); }
.rkk__z--leer { background: var(--color-bg-soft); }
.rkk__z--jetzt { background: color-mix(in srgb, var(--fach-mathe) 18%, transparent); }
.rkk__z--fest { color: var(--color-text); }
.rkk__zeile--klein .rkk__z--wert { color: var(--color-text-muted); }
.mw { display: grid; gap: var(--space-3); min-width: 0; }
.mw__aufgabe { margin: 0; font-weight: var(--fw-halbfett); }
.mw__hinweis { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-bg-soft); border: 1px solid var(--color-border); min-height: 3.2em; }
.mw__hinweis.is-falsch { border-color: var(--color-danger); }
.mw__hinweis.is-ok { border-color: var(--color-success); }
.mw__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mw .rkk { --rkk: clamp(1.9rem, 6vw, 2.4rem); }
.mw .rkk__in { text-align: center; }
.mw .rkk__z--wert.rkk__z--neu { animation: mw-neu 0.5s ease; }
@keyframes mw-neu { from { background-color: var(--color-success-soft); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .mw .rkk__z--wert.rkk__z--neu { animation: none; } }
.mb-rk { display: grid; gap: var(--space-3); justify-items: start; }
.mb-rk .rkk { --rkk: clamp(2.4rem, 5.5vw, 4rem); }
.mb-rk .rkk__z--spaeter { color: transparent; }
.mb-rk .rkk__z--spaeter.is-da { color: var(--color-primary); }
.mb-rk .rkk__zeile--klein .rkk__z--spaeter.is-da { color: var(--color-text-muted); }
.mb-rk__text { margin: 0; font-size: 1.25em; min-height: 2.6em; }
.mb-rk__klick { display: none; }
.tafelbild .rkk { --rkk: clamp(1.7rem, 3.2vw, 2.4rem); }
.ml__oben { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ml .mw__aufgabe { display: none; }
.ml .sl__schrift .mw .rkk { --rkk: clamp(1.7rem, 5vw, 2.2rem); }
.mathe-beamer .tafelbild .rkk { --rkk: clamp(2rem, 4.2vw, 3.2rem); }
/* Lücken im Raster (Arbeitsblatt-Folie): die Lücke ist das Kästchen selbst */
.rkk .mb-luecke { display: grid; place-items: center; min-width: 0; width: 100%; height: 100%; margin: 0; border-bottom: 0; line-height: 1; }
.mb-rkz { visibility: hidden; }
.mb-rkz.ist-da { visibility: visible; }
.mb-rkz { visibility: hidden; }
.mb-rkz.ist-da { visibility: visible; }

/* Eingesetzte Werte: In der Zeile nach dem Einsetzen sind die für die Variable gesetzten Werte markiert (Regel .claude/mathe-bauplan/mitrechnen.md) */
.mx-ein { background: var(--marker-gelb); border-radius: var(--radius-sm); padding: 0 0.12em; }
/* Vektoren (EF, seit 2026-11-02): Spaltenvektor .mx-vek mit runden Klammern, Name mit Pfeil .mx-vp (data-roh, sonst wird AB zur Strecke); Helfer window.MEF5.V / .VP in js/mathe/m-ef-5.js */
.mx-vek { position: relative; display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0.12em 0.2em; padding: 0.1em 0.5em; line-height: 1.22; }
.mx-vek > span { display: block; white-space: nowrap; text-align: center; }
.mx-vek::before, .mx-vek::after { content: ''; position: absolute; top: 0; bottom: 0; width: 0.34em; border: 0 solid currentColor; }
.mx-vek::before { left: 0; border-left-width: 1.5px; border-radius: 0.5em 0 0 0.5em / 50% 0 0 50%; }
.mx-vek::after { right: 0; border-right-width: 1.5px; border-radius: 0 0.5em 0.5em 0 / 0 50% 50% 0; }
.mx-vp { position: relative; display: inline-block; padding: 0.34em 0.1em 0 0.02em; line-height: 1; white-space: nowrap; }
.mx-vp::before { content: ''; position: absolute; left: 0.04em; right: 0.08em; top: 0.13em; border-top: 1.2px solid currentColor; }
.mx-vp::after { content: ''; position: absolute; right: 0; top: calc(0.13em - 0.15em + 0.6px); border-left: 0.3em solid currentColor; border-top: 0.15em solid transparent; border-bottom: 0.15em solid transparent; }
.mx-vp--v { font-style: italic; }

/* Übertrag der Werkstatt-Gestaltung (2026-10-31, Regeln bei css/lernen.css): Antwortflächen als Tonfläche ohne Rand,
   Rand erst bei Hover/Auswahl in der Interaktionsfarbe Blau, richtig = Grün + Haken (nie nur Farbe) */
.mu__option, .mu__karte { background: var(--ton); border: 1.5px solid transparent; border-radius: var(--radius-knopf); box-shadow: none; }
.mu__option { min-height: var(--control-h); }
.mu__option:hover:not([disabled]), .mu__karte:hover:not([disabled]) { border-color: var(--interactive-primary); background: var(--surface); }
.mu__option[aria-pressed="true"] { border-color: var(--interactive-primary); box-shadow: none; background: var(--primary-soft); }
.mu__option[aria-pressed="true"] .mu__buchstabe { color: var(--interactive-primary); border-color: var(--interactive-primary); }
.mu__option.is-falsch { border-color: transparent; background: var(--ton); }
.mu.is-solved .mu__option[aria-pressed="true"] { position: relative; padding-right: 2.6rem; border-color: var(--color-success); background: var(--color-success-soft); }
.mu.is-solved .mu__option[aria-pressed="true"]::after {
  content: ""; position: absolute; right: 0.9rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; background: var(--color-success);
  -webkit-mask: url("../images/ui/ui-haken.svg") center / contain no-repeat; mask: url("../images/ui/ui-haken.svg") center / contain no-repeat;
}
.mu__platz.is-gewaehlt { border-color: var(--interactive-primary); }

/* Auswahl als gruppierte Liste wie .mc in css/lernen.css (2026-11-01): untereinander, eine Tonfläche, feine Trennlinien,
   Auswahl = Akzentfläche; nur höchstens drei sehr kurze Optionen (.mu__optionen--kurz, js/mathe-ueben.js) als Segmentleiste */
.mu__optionen { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--ton); border-radius: var(--radius-lg); overflow: hidden; }
.mu__option, .mu__option:hover:not([disabled]), .mu__option[aria-pressed="true"], .mu__option.is-falsch,
.mu.is-solved .mu__option[aria-pressed="true"] { border: 0; border-radius: 0; box-shadow: inset 0 1px 0 var(--border); }
.mu__option { background: transparent; font-weight: 400; }
.mu__option:first-child { box-shadow: none; }
.mu__option:hover:not([disabled]) { background: var(--ton-hover); }
.mu__option[aria-pressed="true"] { background: var(--primary-soft); }
.mu__option:focus-visible { outline-offset: -3px; }
.mu__optionen--kurz { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); width: fit-content; max-width: 100%; }
.mu__optionen--kurz .mu__option { padding-right: 1.6rem; white-space: nowrap; box-shadow: inset 1px 0 0 var(--border); }
.mu__optionen--kurz .mu__option:first-child { box-shadow: none; }
@media (max-width: 40rem) {
  .mu__optionen--kurz { grid-auto-flow: row; width: auto; }
  .mu__optionen--kurz .mu__option { box-shadow: inset 0 1px 0 var(--border); }
  .mu__optionen--kurz .mu__option:first-child { box-shadow: none; }
}

/* Kapitelkarten ruhiger (2026-11-01): ganze Themenzeile klickbar mit grauem Pfeil statt „Üben →“, Abschlusstraining und Spickzettel als Listenzeilen,
   Curriculum-Hinweis klein mit Info-Symbol */
.mst-rechts { display: inline-flex; align-items: center; gap: 0.6rem; }
.mst-pfeil { color: var(--text-muted); font-size: 1.25em; line-height: 1; }
.mst-thema a:hover .mst-pfeil { color: var(--text); }
.mk-karte .mst-kap__hinweis { display: flex; align-items: center; gap: 0.35rem; margin: 0 1.25rem 0.25rem; font-size: var(--fs-meta); line-height: 1.4; color: var(--text-muted); }
.mk-karte .mst-kap__hinweis .icon { flex: none; width: 1em; height: 1em; }
.mk-karte .mst-fuss { margin: 0.25rem 0.75rem 0.5rem; padding-top: 0.25rem; border-top: 1px solid var(--trenner); }
.mk-karte .mst-fuss .mst-trainer {
  margin: 0; padding: 0.7rem 0.6rem; border: 0; border-radius: var(--radius-sm); background: transparent; font-weight: var(--fw-normal); font-size: var(--fs-ui);
}
.mk-karte .mst-fuss .mst-trainer + .mst-trainer { border-top: 1px solid var(--trenner); border-top-left-radius: 0; border-top-right-radius: 0; }
.mk-karte .mst-fuss .mst-trainer:hover { background: var(--ton-leicht); color: var(--text); }
.mk-karte .mst-fuss .mst-trainer:last-child { margin-bottom: 0; }
.mx-vek input { margin: 0.08em 0; }

/* Raum3D (js/applets/mathe/raum3d.js, Bauplan raum3d.md): Bühne groß, Objektliste daneben, schmal darunter */
.r3d { container-type: inline-size; }
.r3d__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.r3d__bild { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.r3d__bild.is-ziehen { cursor: grabbing; }
.r3d__bild.is-griff { cursor: move; }
.r3d__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.r3d__zoom { flex: 1 1 11rem; grid-template-columns: auto minmax(0, 1fr) 3.6rem; }
.r3d__zoom output { white-space: nowrap; font-size: var(--fs-ui); }
.r3d__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.r3d__hilfe { margin: var(--space-2) 0 0; }
.r3d__neu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.r3d__wort { font-size: var(--fs-ui); }
.r3d__liste { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.r3d__obj { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.r3d__obj.is-aktiv { border-color: var(--color-border-strong); background: var(--color-surface-raised); }
.r3d__obj.is-aus .r3d__gl, .r3d__obj.is-aus .r3d__regler, .r3d__obj.is-aus .r3d__lauf { opacity: 0.45; }
.r3d__leer { padding: var(--space-2) 0; }
.r3d__kopf { display: flex; align-items: center; gap: var(--space-2); }
.r3d__name { font-weight: var(--fw-titel); font-size: 1.1rem; font-style: italic; }
.r3d__aktionen { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.r3d__minus { min-width: 2.5rem; min-height: 2.5rem; padding: 0; }
.r3d__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--color-text-secondary); background: transparent; border: 0; border-radius: var(--radius-knopf); cursor: pointer; }
.r3d__icon:hover { background: var(--color-bg-soft); color: var(--color-text); }
.r3d__icon svg { width: var(--icon-status); height: var(--icon-status); }
.r3d__gl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.r3d__teil { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.r3d__nm { font-weight: var(--fw-titel); font-style: italic; }
.r3d__punkt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.r3d__spalte { flex: none; }
.r3d__zahl { display: block; width: 3.1rem; min-height: 2.2rem; padding: 0.1rem 0.2rem; font: inherit; font-size: 1rem; text-align: center; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.r3d__zahl:focus { outline: 2px solid var(--color-primary); outline-offset: 0; }
.r3d__zahl.is-falsch { border-color: var(--color-danger); }
.r3d__regler { margin-top: var(--space-2); padding-inline: 0; }
.r3d__lauf, .r3d__warn { margin: var(--space-1) 0 0; font-size: var(--fs-ui); }
.r3d__warn { color: var(--color-danger); }
.r3d-tipp { margin-top: var(--space-2); }
.r3d-tipp > summary { cursor: pointer; color: var(--color-primary); }
.r3d-tipp__labor { margin-top: var(--space-2); }
@container (min-width: 760px) {
  .r3d__raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .r3d__liste { max-height: 34rem; overflow-y: auto; }
}

/* Touch (iPad, 2026-11-03): kleine Bedienflächen auf Fingergröße. Optik bleibt, nur die Trefferfläche wächst. */
@media (pointer: coarse) {
  .mathe-zurueck a, .mathe-spick a { display: inline-flex; align-items: center; min-height: var(--control-h-klein); }
  .mx-hilfe > summary { display: flex; align-items: center; min-height: var(--control-h-klein); }
  button.mu__segment::after { inset: -16px 0; }
}

/* Vermutung zu einer Zeile eingeklappt (js/mathe-erkunden.js vermutZu, 2026-11-03) */
.mathe-erk__vermutkurz { display: none; margin: var(--space-2) 0 0; }
.mathe-erk__schritt.is-vermutet .mathe-erk__vermutung, .mathe-erk__schritt.is-vermutet > .mu__klein { display: none; }
.mathe-erk__schritt.is-vermutet .mathe-erk__vermutkurz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Merkkasten in schmalen Fenstern (Spickzettel am iPad/Handy, 2026-11-03): Grid- und Flex-Teile dürfen schmaler werden als ihr Inhalt,
   sonst schiebt eine lange Formel die ganze Karte über den Rand und der Text wird abgeschnitten */
.merkkasten__rumpf > *, .merkkasten--bild .merkkasten__text { min-width: 0; }
.merkkasten__text :is(.tb-zeile, .tb-gross, li) { overflow-wrap: anywhere; }

/* ==========================================================
   Do-matik – neue Startseite (Entwurf index-entwurf.html)
   Lernen zuerst; die Spielwelt als ein Kreislauf (roter Faden). Spielanteil ca. 30–40 %.
   ========================================================== */

/* ---------- Hero „Mach Wissen sichtbar.“ (Redesign 2026-10) ----------
   Ebenen (images/startseite/): Himmel (deckend) → Wissenswelt mit Glow (transparent, dominant, rechts der Mitte) →
   Partikel → Vordergrund-Felsen. Links ein Schleier für lesbaren Text. Der Begleiter steht auf der Steinplattform
   im Vordergrund und zeigt auf die Welt. Bleibt in beiden Modi dunkel (.thema-dunkel-Werte über den Bildern). */
.welt-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 78vh, 760px); display: grid; align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(5.5rem, 9vw, 7.5rem);
  color: #f1f5ff; background: #0a1030;
}
.welt-hero__buehne { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.welt-hero__ebene { position: absolute; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.welt-hero__himmel { object-position: 50% 40%; }
/* Hauptwelt: dominant, rechts der Mitte; schwebt langsam */
.welt-hero__welt { left: 18%; top: -2%; width: 92%; height: 100%; object-fit: contain; object-position: 50% 45%;
  filter: drop-shadow(0 30px 50px rgb(10 10 50 / 0.35)); animation: welt-schweben 14s ease-in-out infinite; }
.welt-hero__partikel { opacity: 0.75; mix-blend-mode: screen; animation: partikel-ziehen 22s ease-in-out infinite alternate; }
.welt-hero__felsen { object-position: 50% 100%; top: auto; bottom: -2%; height: 62%; }
.welt-hero__schleier { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(6 10 32 / 0.86) 0%, rgb(6 10 32 / 0.62) 28%, rgb(6 10 32 / 0.08) 52%, transparent 70%),
              linear-gradient(0deg, var(--color-bg) 0%, transparent 18%); }
@keyframes welt-schweben { 50% { transform: translateY(-1.2%); } }
@keyframes partikel-ziehen { to { transform: translateX(-2%) translateY(-1.5%); } }
@media (prefers-reduced-motion: reduce) { .welt-hero__welt, .welt-hero__partikel { animation: none; } }

.welt-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 1.5rem; align-items: end; max-width: var(--maxw-weit); }
.welt-hero .hero__text { align-self: center; max-width: 34rem; text-shadow: 0 2px 18px rgb(0 0 20 / 0.55); }
.welt-hero .eyebrow { color: #7fe3ff; }
.welt-hero__titel { font-size: clamp(3rem, 7.2vw, 6rem); font-weight: var(--fw-halbfett); line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 1.1rem; color: #fff; }
.welt-hero .hero__accent { color: #3ad7ff; text-shadow: 0 0 26px rgb(58 215 255 / 0.55); }
.welt-hero .hero__lead { color: #d4def5; font-size: clamp(1.05rem, 1.5vw, 1.22rem); max-width: 30rem; }
.welt-hero .hero__cta { margin-top: 1.5rem; }
.welt-hero .hero__cta .btn--cyan { color: #f1f5ff; }
.hero__weiter-info { flex-basis: 100%; margin: 0.15rem 0 0; font-size: 0.9rem; color: #c9d5f0; }
/* Design-Pass 2: eine dominante Hauptaktion, Nebenwege nur als Textlinks */
.hero__haupt { flex-direction: column; gap: 0.1rem; padding: 0.85em 2em; font-size: 1.15rem; }
.hero__haupt small { font-size: 0.8rem; font-weight: var(--fw-halbfett); opacity: 0.78; }
.hero__nebenwege { flex-basis: 100%; margin: 0.5rem 0 0; font-size: 0.88rem; color: #aebbdb; }
.hero__nebenwege a { color: #cfe9ff; text-decoration: underline; text-decoration-color: rgb(58 215 255 / 0.45); text-underline-offset: 3px; }
.hero__nebenwege a:hover { color: #fff; text-decoration-color: var(--color-cyan); }
.hero__begleiter.ohne-blase .hero__bubble { display: none; }
.welt-hero .start-fakten { color: #c3cfea; }
.welt-hero .start-fakten strong { color: #fff; }
.welt-hero .hero__timer { margin-top: 1.4rem; opacity: 0.82; transform-origin: 0 0; scale: 0.88; }   /* Nebeninfo: ruhiger als die Hauptaktion */
.welt-hero .hero__timer:hover { opacity: 1; }
.welt-hero .start-fakten { font-size: 0.85rem; opacity: 0.85; }
.welt-hero .ferien-timer { background: rgb(6 10 32 / 0.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #f1f5ff; text-shadow: none; }

/* Begleiter im Vordergrund: auf der Plattform, links von der Welt (zeigt hinein) */
.hero__begleiter { position: relative; display: grid; justify-items: center; align-self: end; width: min(100%, 430px); justify-self: start; margin-left: -16%; margin-bottom: -3.5rem; }
.hero__plattform { grid-area: 1 / 1; align-self: end; width: 92%; margin-bottom: -8%; filter: drop-shadow(0 18px 24px rgb(0 0 20 / 0.5)); }
.hero__begleiter .hero__figur { grid-area: 1 / 1; position: relative; z-index: 1; width: 86%; height: auto; margin-bottom: 18%; object-fit: contain;
  filter: drop-shadow(0 14px 22px rgb(0 0 30 / 0.5)) drop-shadow(0 0 14px rgb(58 215 255 / 0.18)); }
.hero__begleiter .hero__bubble { position: absolute; top: 2%; right: -12%; left: auto; z-index: 3; max-width: 15rem; text-align: center; font-size: 0.92rem; font-weight: var(--fw-halbfett); color: var(--color-text); }
/* Sprechblase leicht durchscheinend (Figur bleibt präsent, Text gut lesbar) */
.hero__begleiter .hero__bubble, .hero__begleiter .hero__bubble::after {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent); border-color: var(--panel-border);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__begleiter .hero__bubble::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.hero__hinweis, .hero__karte {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 3;
  border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: color-mix(in srgb, #0a1233 78%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card); color: #f1f5ff; text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.hero__hinweis { padding: 0.45rem 0.95rem; font-weight: var(--fw-halbfett); font-size: 0.92rem; white-space: nowrap; }
.hero__hinweis:hover, .hero__karte:hover { color: #fff; border-color: var(--color-cyan); }
.hero__karte { display: grid; gap: 0.3rem; padding: 0.55rem 0.9rem; width: min(84%, 290px); }
.hero__karte[hidden], .hero__hinweis[hidden] { display: none; }
.hero__karte-kopf { display: flex; align-items: center; gap: 0.4rem; }
.hero__karte-kopf .lv-badge { margin-left: auto; }
.hero__karte .progress { height: 6px; }
.hero__karte small { color: #b9c6e4; font-size: 0.8rem; }
/* kleine Bewegung passend zur Pose – nur beim Laden, reduzierte Bewegung respektiert */
.hero__begleiter[data-pose="jubel"] .hero__figur, .hero__begleiter[data-pose="kampf"] .hero__figur { animation: hero-hopser 400ms ease-out 1; }
@keyframes hero-hopser { 40% { transform: translateY(-5%); } }
@media (prefers-reduced-motion: reduce) { .hero__begleiter .hero__figur { animation: none; } }

/* ---------- Ton „erwachsen“ (Nutzer-Vorgabe 2026-10-08, alle Klassen) ----------
   Weltbild gedämpft (--welt-filter), keine Partikel/Schweben, kleinere zweizeilige Headline, Begleiter als Karte (Deck-Bühne). */
.welt-hero__ebene { filter: var(--welt-filter); }
.welt-hero__welt { animation: none; filter: var(--welt-filter) drop-shadow(0 30px 50px rgb(10 10 50 / 0.35)); }
.welt-hero__partikel { display: none; }
.welt-hero__schleier { background:
  linear-gradient(90deg, rgb(5 8 24 / 0.92) 0%, rgb(5 8 24 / 0.72) 30%, rgb(5 8 24 / 0.2) 58%, rgb(5 8 24 / 0.1) 100%),
  radial-gradient(120% 90% at 60% 40%, transparent 50%, rgb(5 8 24 / 0.6) 100%),
  linear-gradient(0deg, var(--color-bg) 0%, transparent 18%); }
.welt-hero__titel { font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 760; line-height: 1.04; letter-spacing: -0.035em; }
.welt-hero .hero__accent { text-shadow: 0 0 18px rgb(58 215 255 / 0.35); }
.welt-hero .hero__lead { max-width: 33rem; }

.hero-deck { position: relative; justify-self: center; align-self: center; width: min(100%, 520px); aspect-ratio: 1 / 1; margin-bottom: 1.5rem; }
.hero-deck__karte {
  position: absolute; inset: 0 19% 0 19%; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.14); background: linear-gradient(165deg, #18234a 0%, #0b1130 70%);
  box-shadow: 0 24px 50px rgb(0 0 20 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.08);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hero-deck__karte > img { flex: 1; width: 100%; height: 100%; object-fit: contain; padding: 14% 8% 8%; filter: drop-shadow(0 10px 16px rgb(0 0 20 / 0.5)); }
.hero-deck__karte--hinten2 { transform: translate(-38%, 5%) rotate(-11deg) scale(0.88); opacity: 0.7; }
.hero-deck__karte--hinten1 { transform: translate(38%, 3%) rotate(9deg) scale(0.92); opacity: 0.85; }
.hero-deck__karte.ist-zu > img { filter: grayscale(1) brightness(0.35); }
.hero-deck__karte.ist-zu::after { content: attr(data-ab); position: absolute; left: 0; right: 0; bottom: 8%; text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c7d2ee; }
/* Vordere Karte: Goldrahmen wie eine besondere Sammelkarte, Form als römische Zahl */
.hero-deck__karte--vorn { z-index: 2; color: #f1f5ff; text-decoration: none; padding: 2px;
  background: linear-gradient(150deg, #fff3c4, #d29a12 30%, #fff9e3 50%, #a46d08 72%, #ffd968); }
.hero-deck__karte--vorn > * { position: relative; }
.hero-deck__karte--vorn::before { content: ""; position: absolute; inset: 2px; border-radius: calc(var(--radius-lg) - 2px);
  background: radial-gradient(80% 60% at 50% 45%, #22337a 0%, #101a45 55%, #080d26 100%); }
.hero-deck__karte--vorn:hover { color: #fff; }
.hero-deck__kopf { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem 0; }
.hero-deck__kopf strong { display: block; font-size: 1.05rem; line-height: 1.15; }
.hero-deck__kopf small { display: block; font-size: 0.74rem; color: #c3cdea; }
.hero-deck__form { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  font-family: Georgia, "Times New Roman", serif; font-weight: var(--fw-halbfett); font-size: 0.95rem; color: #2a1a00; background: var(--gold-verlauf); }
.hero-deck__bild { flex: 1; display: grid; place-items: center; min-height: 0; padding: 0.4rem 0.6rem; position: relative; }
.hero-deck__bild img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgb(0 0 20 / 0.55)); }
.hero-deck__fuss { display: block; margin: 0 0.9rem 0.8rem; padding-top: 0.55rem; border-top: 1px solid rgb(255 255 255 / 0.12);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c3cdea; }
.hero-deck__fuss[hidden] { display: none; }
.hero-deck__fuss--stand { display: grid; gap: 0.3rem; text-transform: none; letter-spacing: 0.02em; }
.hero-deck__lv { font-weight: var(--fw-halbfett); color: var(--color-cyan); font-size: 0.78rem; }
.hero-deck__fuss--stand .progress { height: 5px; }
.hero-deck__fuss--stand small { font-size: 0.72rem; color: #c3cdea; }
.hero-deck.ist-levelup .hero-deck__karte--vorn { box-shadow: 0 24px 50px rgb(0 0 20 / 0.55), 0 0 34px rgb(255 203 71 / 0.45); }
@media (max-width: 860px) {
  .hero-deck { width: min(70%, 300px); margin: 0 auto 1rem; }
}

/* „Dein nächster Schritt“ als große Karten unter dem Hero – ragen in die Welt hinein (js/start-leiste.js, 2–4 Einträge) */
.welt-kacheln { position: relative; z-index: 2; margin-top: -4.2rem; max-width: var(--maxw-weit); }
.welt-kacheln__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.welt-kacheln__liste > li { display: grid; }
.welt-kachel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem 0.9rem 0.8rem;
  text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--color-surface) 84%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.welt-kachel img { width: 4.2rem; height: 4.2rem; object-fit: contain; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35)); transition: transform var(--transition-normal); }
.welt-kachel strong { display: block; font-size: 1.08rem; line-height: 1.25; }
.welt-kachel small { display: block; color: var(--text-muted); font-size: 0.88rem; }
.welt-kachel__pfeil { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-weight: var(--fw-halbfett);
  color: var(--k, var(--color-cyan)); border: 1.5px solid color-mix(in srgb, var(--k, var(--color-cyan)) 65%, transparent); }
.welt-kachel:hover, .welt-kachel:focus-visible { color: var(--text); border-color: color-mix(in srgb, var(--k, var(--color-cyan)) 60%, transparent); }
.welt-kachel:hover .welt-kachel__pfeil { background: color-mix(in srgb, var(--k, var(--color-cyan)) 18%, transparent); }

@media (max-width: 860px) {
  .welt-hero { min-height: 0; padding-bottom: 5rem; }
  .welt-hero__inner { grid-template-columns: 1fr; }
  .welt-hero__welt { left: 0; width: 100%; top: auto; bottom: 18%; height: 60%; opacity: 0.85; }
  .welt-hero__schleier { background: linear-gradient(180deg, rgb(6 10 32 / 0.82) 0%, rgb(6 10 32 / 0.55) 45%, rgb(6 10 32 / 0.15) 70%, var(--color-bg) 100%); }
  .hero__begleiter { justify-self: center; margin: 0 0 -3rem; width: min(78%, 330px); }
  .hero__begleiter .hero__bubble { display: none; }
  .hero__hinweis { font-size: 0.82rem; }
}
@media (max-width: 860px) {
  .hero__begleiter { margin-bottom: 0; }
  .welt-kacheln { margin-top: -2rem; }
}
@media (max-width: 520px) {
  .welt-kacheln__liste { gap: 0.6rem; }
  .welt-kachel { gap: 0.7rem; padding: 0.7rem 0.8rem; }
  .welt-kachel img { width: 3rem; height: 3rem; }
  .welt-kachel strong { font-size: 0.98rem; }
  .welt-kachel small { font-size: 0.8rem; }
}

/* Fakten im Hero (für Eltern und Lehrkräfte) */
.start-fakten { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; list-style: none; padding: 0; margin: 1.1rem 0 0; color: var(--text-muted); font-size: 0.95rem; }
.start-fakten strong { color: var(--text); font-size: 1.15rem; margin-right: 0.25rem; }

/* Kompakter Rhythmus: etwas kleinere Abschnittsabstände als auf den übrigen Seiten (ohne gequetscht zu wirken) */
#inhalt > .section:not(.section--tight) { padding-block: clamp(2.5rem, 5vw, 4rem); }
#inhalt > .welt-kacheln { margin-bottom: 0.5rem; }
#inhalt .section-head { margin-bottom: 1.75rem; }
/* Jahrgangsstufen direkt unter der Leiste: kein doppelter Abschnittsabstand (sonst ~150 px Lücke) */
#inhalt > #stufen { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Persönliche Leiste: der nächste Schritt */
.start-leiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; }
.start-leiste__eintrag a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; height: 100%;
  padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--text); text-decoration: none; box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast, 150ms), transform var(--transition-fast, 150ms);
}
.start-leiste__eintrag a:hover, .start-leiste__eintrag a:focus-visible { border-color: var(--leiste-farbe, var(--primary)); color: var(--text); }
.start-leiste__eintrag--lernen { --leiste-farbe: var(--color-cyan); }
.start-leiste__eintrag--lernen a { border-left: 4px solid var(--color-cyan); }
.start-leiste__eintrag--begleiter { --leiste-farbe: var(--color-gold-bright); }
.start-leiste__eintrag--wdh { --leiste-farbe: var(--color-success); }
.start-leiste__eintrag--boss { --leiste-farbe: var(--color-pink); }
.start-leiste__icon { display: grid; }
.start-leiste__icon .icon { width: 2.1rem; height: 2.1rem; }
.start-leiste__eintrag strong { display: block; font-size: 0.98rem; line-height: 1.3; }
.start-leiste__eintrag small { display: block; color: var(--text-muted); font-size: 0.84rem; line-height: 1.35; }
.start-leiste__pfeil { color: var(--text-muted); }

/* Didaktik: vier Schritte als Prozess – Icon + „Schritt n“, Pfeil zum nächsten Schritt (nur bei 4 Spalten) */
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps--prozess .step { padding: 1.3rem 1.3rem 1.2rem; }
.step__kopf { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.steps--prozess .step__nr {
  position: static; font-family: var(--font-mono); font-size: 0.78rem; font-weight: var(--fw-halbfett); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-cyan);
}
.steps--prozess .step h3 { margin: 0 0 0.4rem; }
.steps--prozess .step p { margin: 0; }
@media (min-width: 981px) {
  .steps--prozess .step:not(:last-child)::after {
    content: ""; position: absolute; top: 2.3rem; right: -1.35rem; width: 1.2rem; height: 0.9rem; z-index: 1;
    background: color-mix(in srgb, var(--color-cyan) 70%, var(--border));
    clip-path: polygon(0 40%, 60% 40%, 60% 0, 100% 50%, 60% 100%, 60% 60%, 0 60%);
  }
}

/* Kreislauf der Spielwelt */
.kreis-bereich { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.5rem; align-items: center; }
.kreis-text h2 { margin-top: 0.2rem; }
.kreis-grundsatz { padding: 0.8rem 1rem; border-left: 4px solid var(--color-success); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.95rem; }
.kreis { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: center; }
.kreis__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.kreis__ring path { fill: none; stroke: color-mix(in srgb, var(--color-cyan) 55%, var(--border)); stroke-width: 0.8; stroke-dasharray: 2 1.6; }
.kreis__ring marker path { fill: color-mix(in srgb, var(--color-cyan) 70%, var(--border)); stroke: none; }
.kreis__mitte { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; }
.kreis__mitte img { width: 92%; height: auto; }
.kreis__stationen { list-style: none; margin: 0; padding: 0; }
.kreis__stationen li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1; }
.kreis__stationen a {
  display: grid; justify-items: center; gap: 0.1rem; width: 9.2rem; padding: 0.55rem 0.5rem; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card);
  color: var(--text); text-decoration: none; transition: border-color var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}
.kreis__stationen a:hover, .kreis__stationen a:focus-visible { border-color: var(--color-cyan); color: var(--text); }
.kreis__stationen .icon { width: 2rem; height: 2rem; margin-bottom: 0.1rem; }
.kreis__stationen strong { font-size: 0.95rem; line-height: 1.2; }
.kreis__stationen small { font-size: 0.82rem; line-height: 1.3; color: var(--text-muted); }   /* ≥ 13 px: auf dunklem Grund lesbar */

/* Design-Pass 2: Kreislauf als kleine Reise – Begleiter auf Plattform im Lichtschein, Stationen als schwebende Inseln,
   verbunden durch den Licht-Orbit (images/startseite/orbit-ring.webp). Logik und Links unverändert. */
.kreis { isolation: isolate; }
.kreis__orbit { position: absolute; inset: 6% 2%; width: 96%; height: 88%; object-fit: contain; opacity: 0.55; z-index: -1; pointer-events: none;
  animation: kreis-orbit 60s linear infinite; }
@keyframes kreis-orbit { to { rotate: 360deg; } }
.kreis__ring path { stroke: color-mix(in srgb, var(--color-gold-bright) 55%, var(--color-cyan)); stroke-width: 0.6; opacity: 0.6; }
.kreis__ring marker path { fill: var(--color-gold-bright); }
.kreis__mitte { display: grid; place-items: end center; }
.kreis__mitte img { grid-area: 1 / 1; }
.kreis__mitte .kreis__glow { width: 130%; max-width: none; align-self: center; opacity: 0.45; mix-blend-mode: screen; }
.kreis__mitte .kreis__plattform { width: 90%; margin-bottom: -6%; filter: drop-shadow(0 12px 16px rgb(0 0 20 / 0.5)); }
.kreis__mitte .kreis__tier { width: 82%; margin-bottom: 16%; filter: drop-shadow(0 10px 16px rgb(0 0 30 / 0.5)); }
/* Redesign 2.0: Mitte nur das Tier auf einem dezenten Lichtschein (keine Plattform), Stationen mit Icons */
.kreis__mitte--ruhig { place-items: center; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 16%, transparent), transparent); }
.kreis__mitte--ruhig .kreis__tier { margin: 0; width: 78%; }
:root .kreis__icon { width: 3.2rem; height: 3.2rem; margin: -1.8rem 0 0.25rem; }
.kreis__stationen a { padding-top: 0.2rem; background: color-mix(in srgb, var(--color-surface) 82%, transparent); }
.kreis__insel { width: 5.6rem; height: 4.4rem; max-width: none; object-fit: contain; margin: -2.2rem 0 0.1rem; filter: drop-shadow(0 6px 10px rgb(0 0 20 / 0.45)); transition: transform var(--transition-normal); }
@media (prefers-reduced-motion: reduce) { .kreis__orbit { animation: none; } }
@media (max-width: 640px) {
  .kreis__orbit { display: none; }
  .kreis__insel { grid-row: span 2; margin: 0; width: 3.4rem; height: 3rem; }
}

/* Für Eltern & Lehrkräfte */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.info-karte { padding: 1.3rem 1.4rem; }
.info-karte h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.info-karte p { margin: 0; }

@media (max-width: 980px) {
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .kreis-bereich { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
}
/* Handy: Kreis wird zur Liste, das Tier bleibt klein darüber */
@media (max-width: 640px) {
  .steps--4 { grid-template-columns: 1fr; }
  .kreis { aspect-ratio: auto; max-width: none; }
  .kreis__ring { display: none; }
  .kreis__mitte { position: static; transform: none; width: 140px; margin: 0 auto 0.8rem; }
  .kreis__stationen { display: grid; gap: 0.5rem; counter-reset: station; }
  .kreis__stationen li { position: static; transform: none; }
  .kreis__stationen a { width: auto; grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 0.7rem; }
  .kreis__stationen .icon { grid-row: span 2; align-self: center; margin: 0; }
}

/* Hero-Begleiter: sichtbare Ausrüstung (js/hero-begleiter.js, Bausteine aus style.css .beg-buehne) */
.hero__begleiter > .beg-buehne__zeichen { top: 10%; bottom: auto; right: 4%; font-size: 1.1rem; }
.hero__begleiter > .beg-buehne__aura { inset: 8% 14%; }
.hero__titel { display: block; font-size: 0.75rem; font-weight: var(--fw-halbfett); color: var(--color-gold); }

/* ==========================================================
   Startseite Redesign 2.0 (Master-Prompt 2026-10-11, Anhang/Domatik Design/Entwurf_Herosection.png)
   Hero mit Schreibtisch-Bild (Hell/Dunkel), Fach- und Stufenwahl, Einheiten-Karten, Begleiter + Meine Welt.
   Nur Tokens aus css/style.css; ruhige Karten, keine Neon-Effekte.
   ========================================================== */

/* ---------- Hero (kompakt, 2026-10-16): Eyebrow, „Lerne /…“ mit Schreibmaschine, Unterzeile; rechts bewusst leer ---------- */
.s2-hero { background: transparent; }   /* Randmuster scheint durch */
/* 2026-10-21: Hero steht im linken Hauptbereich des Rasters – der Abstand nach oben kommt vom Raster, damit Überschrift
   und Seitenleiste („Termine“) oben auf einer Linie beginnen */
.s2-hero__inner { padding-block: 0 0.5rem; }
.s2-hero .eyebrow { margin: 0 0 0.75rem; }
.s2-hero__titel {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.32em; margin: 0 0 0.75rem;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); font-weight: var(--fw-halbfett); line-height: 1.1; letter-spacing: -0.025em;
}
/* Platz fürs längste Wort („/Mathematik.“, 12 Zeichen) fest reserviert → kein Layout-Shift */
.s2-tipp {
  display: inline-flex; align-items: baseline; min-width: 13ch; white-space: nowrap;
  font-family: var(--font-akzent); font-weight: 500; font-size: 0.92em; letter-spacing: 0; color: var(--primary);   /* Mono nie enger stellen (2026-10-21) */
}
.s2-tipp__cursor {
  display: inline-block; width: 0.08em; height: 0.95em; margin-left: 0.06em; align-self: center; background: currentColor;
  animation: s2-cursor 1.1s steps(1, end) infinite;
}
.s2-tipp.ist-ruhig .s2-tipp__cursor { display: none; }
/* Variante C (2026-10-19): alle Wörter in der Primärfarbe (Grün/Mint) – eine Markenfarbe statt Regionsfarben */
@keyframes s2-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .s2-tipp__cursor { animation: none; } }
.s2-hero__lead { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text-muted); }
/* Text links, „Weiterlernen“ (js/start-leiste.js) rechts im freien Raum – klein, bis zu 4 Zeilen */
/* 2026-10-21: eine Spalte – „Weiterlernen“ steht unter dem persönlichen Satz (vorher rechts daneben, der Hero war dadurch so
   hoch wie diese Spalte und ließ eine Lücke über den Fach-Knöpfen). Erster Eintrag = Hauptaktion, der zweite ruhig daneben. */
.s2-hero__inner { display: block; }
.s2-weiterlernen { margin-top: 1.1rem; }
.s2-weiterlernen:has(#start-leiste:empty) { display: none; }
.s2-weiterlernen .welt-kacheln__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.s2-weiterlernen li:first-child { flex: 0 1 26rem; min-width: min(100%, 18rem); }
.s2-weiterlernen li:not(:first-child) { flex: 0 1 20rem; min-width: 0; }
.s2-weiterlernen .welt-kachel {
  display: flex; align-items: center; gap: 0.75rem; min-height: 0; padding: 0.55rem 0.75rem; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--border); box-shadow: none; text-decoration: none; color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.s2-weiterlernen .welt-kachel::before, .s2-weiterlernen .welt-kachel::after { content: none; }
.s2-weiterlernen .welt-kachel:hover { transform: none; box-shadow: none; background: var(--color-surface-raised); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--text); }
.s2-weiterlernen .welt-kachel > img, .s2-weiterlernen .welt-kachel > .icon { width: var(--icon-inhalt); height: var(--icon-inhalt); flex: none; object-fit: contain; filter: none; }
.s2-weiterlernen .welt-kachel > .icon.icon--flaeche { width: 2.25rem; height: 2.25rem; }
.s2-weiterlernen .welt-kachel > span:not(.welt-kachel__pfeil) { flex: 1; min-width: 0; display: grid; gap: 0.05rem; }
.s2-weiterlernen .welt-kachel strong { font-size: var(--fs-hilfe); font-weight: var(--fw-halbfett); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2-weiterlernen .welt-kachel small { font-size: var(--fs-meta); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2-weiterlernen .welt-kachel__pfeil {
  position: static; width: auto; height: auto; border: 0; background: none; box-shadow: none; font-size: var(--fs-ui); color: var(--text-muted);
}
.s2-weiterlernen .welt-kachel:hover .welt-kachel__pfeil { color: var(--primary); background: none; }
/* Rangfolge (2026-10-21, Apple-Design-Prüfung): der erste Eintrag ist der häufigste Klick der Seite und sieht so aus –
   Akzentfläche, größere Schrift; weitere Einträge treten als ruhige Zeilen zurück */
.s2-weiterlernen li:first-child .welt-kachel {
  padding: 0.85rem 0.95rem; background: color-mix(in srgb, var(--nav-aktiv) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--nav-aktiv) 55%, var(--border));
}
.s2-weiterlernen li:first-child .welt-kachel:hover { background: color-mix(in srgb, var(--nav-aktiv) 16%, var(--color-surface)); border-color: var(--nav-aktiv); }
.s2-weiterlernen li:first-child .welt-kachel strong { font-size: var(--fs-ui); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.s2-weiterlernen li:first-child .welt-kachel__pfeil { color: var(--nav-aktiv); }
.s2-weiterlernen li:not(:first-child) .welt-kachel { background: transparent; border-color: transparent; }
.s2-weiterlernen li:not(:first-child) .welt-kachel:hover { border-color: var(--border); }
@media (max-width: 900px) {
  .s2-hero__inner { grid-template-columns: 1fr; }
}
.s2-link { font-weight: 500; font-size: var(--fs-hilfe); text-decoration: none; color: var(--nav-aktiv); }
.s2-link:hover { text-decoration: underline; color: var(--nav-aktiv); }
.s2-hero .hero__timer { margin-top: 0.75rem; }
.s2-hero .hero__timer:has(> [hidden]:only-child) { display: none; }
@media (max-width: 600px) {
  /* Handy: „Lerne“ oben, Begriff darunter */
  .s2-hero__titel { display: block; }
  .s2-tipp { display: flex; }
}

/* ---------- Raster: links Wahl + Einheiten, rechts Begleiter + Meine Welt ---------- */
.s2-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 2rem; align-items: start;   /* Iteration 2: Hauptbereich stärker, Seitenspalte schmaler */
  max-width: var(--maxw-weit); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 1rem;
}
.s2-raster--ohne-seite { grid-template-columns: minmax(0, 1fr); }   /* Gäste: ohne Seitenspalte (2026-10-22) */
.s2-seite[hidden] { display: none; }
.s2-haupt, .s2-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
/* Flächen 2026-10-16: Rand statt Schatten, Rundung 12 px */
.s2-raster .panel { padding: 1.25rem; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--border); box-shadow: none; }
.s2-raster h2 { margin: 0; font-size: 1.25rem; font-weight: var(--fw-halbfett); letter-spacing: -0.01em; }

/* Fach + Jahrgangsstufe – Steuerleiste ohne eigenen Kasten (Variante C, 2026-10-19): Trennlinie unten,
   Auswahl = zurückhaltende Fläche + Rand/Text in der Primärfarbe (keine kräftige Füllung) */
.s2-wahl { scroll-margin-top: calc(var(--header-h) + 16px); padding: 0 0 1.25rem; border-bottom: 1px solid var(--border-divider); }
/* Fach-Wahl direkt über den Klassen statt weit rechts (2026-10-21: Bedienelement nah bei dem, was es steuert) */
.s2-wahl__kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; }
.s2-wahl h2 { font-size: var(--fs-ui) !important; font-weight: var(--fw-halbfett) !important; color: var(--text-secondary); }
.s2-fach { display: inline-flex; gap: 0.5rem; }
.s2-fach[hidden] { display: none; }
.s2-fach button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.4rem 0.9rem; border-radius: var(--radius-knopf); cursor: pointer;
  border: 1px solid var(--border); background: var(--color-surface); color: var(--text-secondary); font: inherit; font-weight: var(--fw-mittel); font-size: var(--fs-hilfe);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.s2-fach .icon { width: var(--icon-status); height: var(--icon-status); }
.s2-fach button[aria-selected="true"] { background: var(--color-primary-soft); border-color: var(--primary); color: var(--text); font-weight: var(--fw-halbfett); }
.s2-fach button:not([aria-selected="true"]):hover { color: var(--text); border-color: var(--border-strong); }
.s2-klassen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.s2-klasse {
  display: inline-flex; align-items: baseline; gap: 0.35rem; min-height: 40px; padding: 0.45rem 0.85rem;
  border-radius: var(--radius-knopf); cursor: pointer; font: inherit; color: var(--text); white-space: nowrap;
  background: var(--color-surface); border: 1px solid var(--border); transition: border-color var(--transition-fast), background var(--transition-fast);
}
.s2-klasse strong { font-family: inherit; font-size: var(--fs-ui);   /* eine Schrift je Knopf (2026-10-21) */ font-weight: var(--fw-mittel); line-height: 1; font-variant-numeric: tabular-nums; }
.s2-klasse small { font-size: var(--fs-meta); color: var(--text-muted); }
/* Gruppen „Klasse“ und „Oberstufe“ (2026-10-21): kleine Überschrift über jeder Reihe, Abstand statt Trennlinie */
.s2-klassen { gap: 0.5rem 1.5rem; align-items: flex-end; }
.s2-klassen__gruppe { display: grid; gap: 0.35rem; }
.s2-klassen__titel { font-family: var(--font-label); font-size: var(--fs-meta); color: var(--text-muted); line-height: 1; }
.s2-klassen__reihe { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.375rem; }
.s2-klasse { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.s2-klassen__reihe li { flex: none; }
.s2-klasse:hover { border-color: var(--border-strong); }
.s2-klasse[aria-pressed="true"] { background: var(--linie-unten), var(--color-primary-soft); border-color: var(--primary); box-shadow: none; }
.s2-klasse[aria-pressed="true"] strong { color: var(--primary); font-weight: var(--fw-halbfett); }
.s2-klasse[aria-pressed="true"] small { color: var(--text); }
.s2-fach button:focus-visible, .s2-klasse:focus-visible, .s2-karte:focus-visible, .s2-welt__liste a:focus-visible, .s2-begleiter__link:focus-visible, .s2-weiter:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px;
}

/* Unterrichtseinheiten */
.s2-einheiten__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.s2-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 0.9rem; }
.s2-karte {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: var(--text);
  background: var(--color-surface-raised); border: 1px solid var(--border); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
a.s2-karte:hover { color: var(--text); border-color: var(--primary); }   /* ruhig: nur Rahmen, kein Anheben */
.s2-karte.ist-bald { opacity: 0.7; }
.s2-karte__bild {
  display: grid; place-items: center; aspect-ratio: 16 / 8;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--r, var(--primary)) 38%, transparent), transparent 70%),
              linear-gradient(160deg, color-mix(in srgb, var(--r, var(--primary)) 18%, var(--color-bg-soft)), var(--color-bg-soft));
  border-bottom: 1px solid var(--border);
}
.s2-karte__bild .icon { width: var(--icon-auszeichnung); height: var(--icon-auszeichnung); }
/* Kompakte Karten ohne Thumbnails (Nutzer-Entscheidung 2026-10-11, js/start2.js MIT_BILDERN = false):
   links kleines Icon auf Fläche in Themengebiets-Farbe, rechts Titel + Kurztext; darunter Gebiet, XP, Status, Fortschritt */
/* Kompakte Karte (2026-10-16): oben Icon + Titel + Kurztext + Pfeil, unten ein Status, XP sekundär, schlanker Balken.
   Ganze Karte klickbar; Hover nur Fläche/Rand, kein Anheben, kein Schatten. */
/* Variante C (2026-10-19): nummerierte, rechteckige Lernkarte – Nummer (Plex) oben links, Pfeil rechts, Titel, Kurztext,
   Status unten; das Themen-Motiv steht klein und gedämpft unten rechts (keine Fläche dahinter). */
.s2-karten--kompakt { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 0.75rem; }
.s2-karten--kompakt .s2-karte {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0.75rem; padding: 1.1rem 1.1rem 1rem; min-height: 190px;
  border-radius: var(--radius-md); background: var(--color-surface); border-color: var(--border);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.s2-karten--kompakt a.s2-karte:hover { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); background: var(--color-surface); }
.s2-karten--kompakt a.s2-karte:hover .s2-karte__text strong { color: var(--primary); }
/* Iteration 2: Nummer kräftiger, Titel 17 px, Beschreibung Sekundärtext; Status und Metadaten immer unten an derselben Stelle */
.s2-karte__oben { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border-divider); }
.s2-karte__nr { font-family: var(--font-akzent); font-size: 1.75rem; font-weight: var(--fw-mittel); line-height: 1; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.s2-karte--aktiv .s2-karte__nr { color: var(--progress); }
.s2-karte.ist-bald .s2-karte__nr, .s2-karte--gesperrt .s2-karte__nr { color: var(--text-muted); }
.s2-karte__symbol { position: absolute; right: 1rem; bottom: 0.9rem; display: grid; place-items: center; width: 40px; height: 40px; pointer-events: none; opacity: 0.9; }
.s2-karte__symbol .icon { width: var(--icon-reihe); height: var(--icon-reihe); }
.s2-karte.ist-bald .s2-karte__symbol { opacity: 0.55; filter: grayscale(0.8); }
.s2-karten--kompakt .s2-karte__unten { margin-top: auto; padding-right: 48px; }
.s2-karten--kompakt .s2-karte__text { padding: 0; gap: 0.3rem; flex: none; }
.s2-karten--kompakt .s2-karte__text strong { font-size: var(--fs-lern); font-weight: var(--fw-halbfett); line-height: 1.3; color: var(--text); transition: color var(--transition-fast); }
.s2-karten--kompakt .s2-karte__kurz { font-size: var(--fs-hilfe); color: var(--text-secondary); }
/* Zustände: In Arbeit = türkise Kante oben + Balken; Abgeschlossen = nur Statuszeile mit Haken; Bald = ruhig, aber lesbar (kein Ausgrauen der ganzen Karte) */
.s2-karten--kompakt .s2-karte--aktiv { box-shadow: inset 0 2px 0 var(--progress); }
.s2-karten--kompakt .s2-karte.ist-bald { opacity: 1; background: transparent; border-style: dashed; }
.s2-karten--kompakt .s2-karte.ist-bald .s2-karte__kurz { color: var(--text-muted); }
/* Kurztext bis drei Zeilen (2026-10-20: bei zwei Zeilen wurden Beschreibungen wie „… & Fotos teilen“ abgeschnitten) */
.s2-karten--kompakt .s2-karte__kurz { font-size: var(--fs-meta); -webkit-line-clamp: 3; line-clamp: 3; }
.s2-karten--kompakt .s2-karte__los {
  position: static; width: auto; height: auto; padding-top: 0.1rem; border: 0; background: none; font-size: var(--fs-ui); color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.s2-karten--kompakt a.s2-karte:hover .s2-karte__los { color: var(--primary); }
.s2-karte__unten { display: grid; gap: 0.5rem; }
.s2-karte__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }
/* Status in der Karte als Zeile aus Icon + Text, ohne eigenen Rahmen (die Karte ist schon die Fläche) */
.s2-karte__zeile .status { font-size: var(--fs-meta); padding: 0; border: 0; background: none; }
.s2-karte__zeile .status--neu { color: var(--text-muted); }
.s2-karte__meta { font-family: var(--font-label); font-size: var(--fs-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.s2-balken { display: block; height: 4px; border-radius: 2px; background: var(--color-bg-soft); overflow: hidden; }
.s2-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--progress); }
.s2-karte--fertig .s2-balken > span { background: color-mix(in srgb, var(--success) 80%, var(--color-surface)); }
.s2-karte--neu .s2-balken > span, .s2-karte--bald .s2-balken > span, .s2-karte--gesperrt .s2-balken > span { background: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .s2-karten--kompakt .s2-karte__los { transition: none; } }
/* Kapitel-Akzente (Feinschliff 2026-10-19, Entwurf Variante C): jede Karte hat ihre Akzentfarbe --k (js/start2.js AKZENTE).
   Hell: weiße Karte, Hauch Farbe in Rand und Fläche, Nummer farbig. Dunkel: getönte Fläche, farbiger Rand. Status bleibt in seinen eigenen Farben. */
/* Feinschliff 2026-10-20: Akzent zurückgenommen (Fläche und Rand nur noch angedeutet), damit die Karten nicht um Aufmerksamkeit
   konkurrieren – Farbe tragen Nummer und Motiv; beim Darüberfahren kommt der volle Akzentrand. Hell und Dunkel gleiche Abstufung. */
/* 2026-10-21 (Apple-Design-Prüfung): Fläche und Rand neutral – die Kapitelfarbe tragen nur noch Nummer und Motiv
   (vorher zwölf Farbakzente auf einer Seite); beim Darüberfahren kommt der Akzentrand als Rückmeldung. */
.s2-karten--kompakt .s2-karte[style*="--k"] { background: var(--color-surface); border-color: var(--border); }
.s2-karten--kompakt .s2-karte[style*="--k"] .s2-karte__nr { color: var(--k); }
.s2-karten--kompakt .s2-karte[style*="--k"] .s2-karte__oben { border-bottom-color: var(--border-divider); }
.s2-karten--kompakt a.s2-karte[style*="--k"]:hover { border-color: var(--k); background: var(--color-surface); }
.s2-karten--kompakt a.s2-karte[style*="--k"]:hover .s2-karte__text strong, .s2-karten--kompakt a.s2-karte[style*="--k"]:hover .s2-karte__los { color: var(--k); }
/* In Arbeit bleibt deutlich: türkise Kante oben (s. o.) und kräftigerer Rand als die übrigen Karten */
:root .s2-karten--kompakt .s2-karte.s2-karte--aktiv[style*="--k"]:not(:hover) { border-color: color-mix(in srgb, var(--progress) 45%, var(--border)); }
/* Bald/gesperrt: Farbe nur angedeutet, gestrichelt wie bisher */
.s2-karten--kompakt .s2-karte.ist-bald[style*="--k"], :root[data-theme="dark"] .s2-karten--kompakt .s2-karte.ist-bald[style*="--k"] {
  background: transparent; border-color: var(--border);
}
.s2-karten--kompakt .s2-karte.ist-bald[style*="--k"] .s2-karte__nr, .s2-karten--kompakt .s2-karte--gesperrt[style*="--k"] .s2-karte__nr { color: color-mix(in srgb, var(--k) 45%, var(--text-muted)); }
/* Geometrisches SVG-Motiv (js/einheiten-svg.js): unten rechts, randabfallend, hinter Text und Status */
/* Motiv im Fluss (Nutzer 2026-10-19: Motiv überdeckte Text): Text – Motiv rechtsbündig bis an den Rand – Statuszeile über die volle Breite.
   Die Karte wird dafür etwas höher, nichts überschneidet sich, auch nicht bei schmalen Karten. */
/* Abstand zum Rand wie Text und Pfeil (Nutzer 2026-10-19: randbündig wirkte unstimmig) */
.s2-karte__motiv { display: block; align-self: flex-end; width: min(58%, 124px); aspect-ratio: 4 / 3; margin: auto 0 0 auto; pointer-events: none; }
.s2-karte__motiv svg { display: block; width: 100%; height: 100%; }
.s2-karten--kompakt .s2-karte:has(.s2-karte__motiv) .s2-karte__unten { margin-top: 0; }
/* Kompakter (2026-10-21, Apple-Design-Prüfung): Das Motiv sitzt klein oben rechts in der Kopfzeile statt in einer eigenen
   Zeile – die Karten werden rund 40 % niedriger, ohne leere Mitte. Der Pfeil entfällt dort (die ganze Karte ist der Link). */
.s2-karten--kompakt .s2-karte:has(.s2-karte__motiv) { position: relative; min-height: 0; }
.s2-karten--kompakt .s2-karte__motiv { position: absolute; top: 0.6rem; right: 0.9rem; width: 56px; margin: 0; }
.s2-karten--kompakt .s2-karte:has(.s2-karte__motiv) .s2-karte__los { display: none; }
.s2-karten--kompakt .s2-karte:has(.s2-karte__motiv) .s2-karte__unten { margin-top: auto; }
.s2-karte.ist-bald .s2-karte__motiv { opacity: 0.7; }
a.s2-karte .s2-karte__motiv svg { transition: transform var(--transition-fast); transform-origin: 100% 100%; }
@media (prefers-reduced-motion: reduce) { a.s2-karte .s2-karte__motiv svg { transition: none; } a.s2-karte:hover .s2-karte__motiv svg { transform: none; } }
/* Motiv unten rechts in der Akzentfläche (bis die Illustrationen geliefert sind: vorhandenes Icon) */
.s2-karten--kompakt .s2-karte[style*="--k"] .s2-karte__symbol { border-radius: var(--radius-sm, 3px); background: color-mix(in srgb, var(--k) 14%, transparent); }
/* Echtes Thumbnail (images/einheiten/<id>.webp) füllt die Bildfläche */
/* Die Bilder aus thumbnails.png sind freigestellt (unregelmäßiger Rand) → ganz zeigen, auf dem Verlauf der Karte */
/* Bilder in die Karte einbetten statt „aufkleben“: Fläche ganz füllen und leicht vergrößern (gezackte Ränder verschwinden),
   Sättigung dämpfen, unten weicher Übergang in die Kartenfarbe – in Hell und Dunkel */
.s2-karte__bild--foto { position: relative; padding: 0; overflow: hidden; background: #0d1728; }
.s2-karte__bild--foto img {
  width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.16);
  filter: saturate(0.78) brightness(0.92); transition: transform var(--transition-normal, 250ms) ease;
}
.s2-karte__bild--foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--color-surface-raised) 70%, transparent) 100%);
}
:root:not([data-theme-current="dark"]) .s2-karte__bild--foto img { filter: saturate(0.72) brightness(1.04) contrast(0.94); }
@media (prefers-reduced-motion: reduce) { .s2-karte__bild--foto img { transition: none; } }
/* Übergangsbild: Komposition aus 2–3 Icons (js/einheiten-motive.js) – Hauptmotiv vorn, zwei kleinere schräg dahinter,
   Lichtschein und weicher Bodenschatten in der Farbe des Themengebiets */
.s2-komp { position: relative; overflow: hidden; isolation: isolate; }
.s2-komp::before {
  content: ""; position: absolute; left: 50%; top: 52%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--r, var(--primary)) 42%, transparent), transparent);
}
.s2-komp::after {
  content: ""; position: absolute; left: 50%; bottom: 13%; width: 46%; height: 9%; transform: translateX(-50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.32), transparent);
}
.s2-komp__teil { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; transition: transform var(--transition-normal, 250ms) ease; }
.s2-komp .s2-komp__teil .icon { width: 100%; height: 100%; }
.s2-komp__teil--1 { width: 34%; aspect-ratio: 1; transform: translate(-50%, -54%); z-index: 3; }
.s2-komp__teil--1 .icon { filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.32)); }
.s2-komp__teil--2, .s2-komp__teil--3 { width: 22%; aspect-ratio: 1; z-index: 2; opacity: 0.92; }
.s2-komp__teil--2 { transform: translate(-128%, -40%) rotate(-10deg); }
.s2-komp__teil--3 { transform: translate(28%, -40%) rotate(9deg); }
.s2-komp__teil--2 .icon, .s2-komp__teil--3 .icon { filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.28)) saturate(0.9); }
@media (prefers-reduced-motion: reduce) { .s2-komp__teil { transition: none; } }
.s2-karte__los {
  position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 85%, transparent); border: 1px solid var(--border); font-size: var(--fs-ui);
}
.s2-karte__text { display: grid; gap: 0.3rem; padding: 0.85rem 0.95rem 0.4rem; flex: 1; }
.s2-karte__text strong { font-size: 0.98rem; line-height: 1.25; }
.s2-karte__kurz { font-size: var(--fs-meta); line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.s2-karte__info { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; padding: 0.3rem 0.95rem; font-size: var(--fs-meta); color: var(--text-muted); }
.s2-karte__info span { display: inline-flex; align-items: center; gap: 0.3rem; }
.s2-karte__info .icon { width: 1.05rem; height: 1.05rem; }
.s2-karte__fuss { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.95rem 0.85rem; }
.s2-karte__fuss .progress { flex: 1; }
.s2-karte__fuss small { font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; }
.s2-leer { margin: 0; }

/* Design System 2.0 (2026-10-19): Einheiten, Begleiter und Meine Welt stehen direkt auf der Seite (kein äußeres Panel).
   Die Einheiten-Karten sind die einzige Fläche; die Seitenleiste wird über Trennlinien gegliedert und tritt zurück. */
.s2-einheiten { padding-top: 0.25rem; }
@media (min-width: 1101px) {
  .s2-seite { gap: 0; }
  /* Iteration 2: Abschnitte der Seitenspalte nur über Abstand + Überschrift getrennt, keine Linien */
  .s2-seite > section:not([hidden]) + section { margin-top: 1.75rem; }
  .s2-seite > .s2-termine { margin-bottom: 0.25rem; }
}

/* Dein Begleiter – kompakt (2026-10-11): kleines Bild links, Name/Level und XP-Balken rechts; die Einheiten haben Vorrang */
.s2-begleiter { overflow: hidden; }
.s2-begleiter__link {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "bild kopf" "bild fuss";
  column-gap: 0.9rem; align-items: center; padding: 0.5rem; margin: -0.5rem; border-radius: var(--radius-md); text-decoration: none; color: var(--text);
  transition: background var(--transition-fast);
}
.s2-begleiter__link:hover { color: var(--text); background: var(--surface); }
.s2-begleiter__kopf { grid-area: kopf; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.s2-begleiter__kopf strong { display: block; font-size: 1rem; }
.s2-begleiter__kopf small { display: block; font-size: var(--fs-meta); color: var(--text-muted); }
.s2-begleiter__buehne { grid-area: bild; display: grid; place-items: center; width: 80px; height: 80px; }
.s2-begleiter__buehne img { max-height: 80px; width: auto; max-width: 100%; object-fit: contain; }
.s2-begleiter__fuss { grid-area: fuss; display: grid; gap: 0.35rem; padding-top: 0.45rem; }
.s2-begleiter__fuss small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 0.5rem; font-size: var(--fs-meta); color: var(--text-muted); }
.s2-begleiter__fuss .btn { justify-self: start; }
.s2-begleiter__link:hover .s2-pfeil { color: var(--primary); }
.s2-pfeil { font-size: 1.3rem; line-height: 1; color: var(--text-muted); }

/* Meine Welt (2026-10-16): schlichte Navigationszeilen; Trainingshalle + Wissensprüfungen (Lernen) leicht hervorgehoben,
   Kartensammlung + Spiele kleiner und ohne Fläche */
.s2-welt h2 { margin-bottom: 0.5rem !important; font-size: 1rem !important; }
.s2-begleiter__kopf strong, .s2-welt h2 { color: var(--text-secondary); }
.s2-welt__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.s2-welt__liste a {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
  border: 1px solid transparent; transition: background var(--transition-fast), border-color var(--transition-fast);
}
.s2-welt__liste { margin-inline: -0.6rem; }
/* Trennlinie spaltenbündig (2026-10-21): die Liste ist für die Hover-Fläche 0,6rem breiter – die Linie rückt so weit ein */
.s2-welt__liste .ist-lernen + li:not(.ist-lernen) { position: relative; margin-top: 0.4rem; padding-top: 0.4rem; }
.s2-welt__liste .ist-lernen + li:not(.ist-lernen)::before { content: ""; position: absolute; top: 0; left: 0.6rem; right: 0.6rem; border-top: 1px solid var(--border); }
.s2-welt__liste a:hover { color: var(--text); background: var(--surface); border-color: var(--border); }
.s2-welt__liste img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.s2-welt__liste li:not(.ist-lernen) img { width: 28px; height: 28px; margin-inline: 4px; }
/* Icon-System 2026-10-19: Bereichsicons mit dezenter Fläche, alle gleich groß */
.s2-welt__liste .icon.icon--flaeche { width: 2.25rem; height: 2.25rem; flex: none; }
.s2-welt__liste a > span:nth-child(2) { flex: 1; min-width: 0; }
.s2-welt__liste strong { display: block; font-size: var(--fs-ui); font-weight: var(--fw-halbfett); }
.s2-welt__liste li:not(.ist-lernen) strong { font-size: var(--fs-hilfe); font-weight: 500; }
.s2-welt__liste small { display: block; font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.35; }
.s2-welt__liste .s2-pfeil { font-size: 1.1rem; }
.s2-welt__liste a:hover .s2-pfeil { color: var(--primary); }

/* Klassenarbeiten & Klausuren (2026-10-11): Kalenderblatt je Termin, nächster Termin hervorgehoben, ≤ 7 Tage golden */
.s2-termine[hidden] { display: none; }
/* 2026-10-21: ohne eigenen Kasten wie Begleiter und „Meine Welt“ – nur die Kalenderblätter haben einen Rahmen */
.s2-termine { padding: 0; border: 0; background: none; }
.s2-termine h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.8rem !important; font-size: 1.15rem; }
.s2-termine h2 .icon { width: 1.4em; height: 1.4em; }
.s2-termine__liste { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.5rem; }
.s2-termine__liste li { display: flex; align-items: center; gap: 0.75rem; padding: 0.2rem 0; }
/* nächster Termin bzw. ≤ 7 Tage: nur das Kalenderblatt farbig, die Zeile selbst bleibt ohne Kasten */
.s2-termine__liste li.ist-naechste .s2-termine__datum { border-color: var(--primary); }
.s2-termine__datum { flex: none; width: 3rem; display: grid; justify-items: center; padding: 0.25rem 0; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--border); line-height: 1.05; }
.s2-termine__datum b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.s2-termine__datum small { font-size: var(--fs-meta); text-transform: none; letter-spacing: 0.02em; color: var(--text-muted); }
.s2-termine__liste li.ist-bald .s2-termine__datum { border-color: var(--color-gold-bright); }
.s2-termine__text { display: grid; min-width: 0; }
.s2-termine__text strong { font-size: var(--fs-ui); }
.s2-termine__text small { font-size: var(--fs-meta); color: var(--text-muted); }
.s2-termine__liste li.ist-bald .s2-termine__text small, .s2-termine__liste li.ist-heute .s2-termine__text small { color: var(--color-gold); font-weight: var(--fw-halbfett); }
.s2-termine__ueben { width: 100%; justify-content: center; }
.s2-termine__link { display: inline-block; padding: 0.15rem 0.1rem 0.35rem; }
.s2-termine__liste li.s2-termine__knopf { display: block; padding: 0; border: 0; background: none; }
.s2-termine__liste { margin-bottom: 0; }

/* Dein nächster Schritt */
.s2-schritt { padding-top: 1.5rem; }
.section-head--links { text-align: left; margin-inline: 0; }

@media (max-width: 1100px) {
  .s2-raster { grid-template-columns: minmax(0, 1fr); }   /* minmax: die waagerecht scrollende Stufenleiste darf die Spalte nicht verbreitern */
  .s2-seite { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
}
@media (max-width: 1100px) {
  /* schmaler: kein Platz neben dem Text → Hero-Bild entfällt (Nutzer-Vorgabe 2026-10-11) */
  .s2-hero__bild { display: none; }
}
@media (max-width: 600px) {
  /* Handy: Jahrgänge waagerecht scrollbar */
  .s2-klassen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; margin-inline: -0.25rem; padding-inline: 0.25rem; }
  .s2-klassen li { flex: none; }
  .s2-karten--kompakt { grid-auto-rows: auto; }
}
@media (max-width: 600px) {
  /* Handy, Bild-Karten (MIT_BILDERN): quer – Bild links, Text rechts */
  .s2-karten:not(.s2-karten--kompakt) .s2-karte { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .s2-karte__bild { grid-row: 1 / 4; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--border); }
  .s2-karte__bild .icon { width: var(--icon-kachel); height: var(--icon-kachel); }
  .s2-karten:not(.s2-karten--kompakt) .s2-karte__los { display: none; }
  .s2-karte__text { padding: 0.7rem 0.8rem 0.2rem; }
  .s2-karte__info { padding: 0.2rem 0.8rem; }
  .s2-karte__fuss { padding: 0.3rem 0.8rem 0.7rem; }
}
@media (max-width: 520px) {
  .s2-klassen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s2-fach { width: 100%; }
  .s2-fach button { flex: 1; justify-content: center; padding-inline: 0.5rem; }
  .s2-raster .panel { padding: 1rem; }
}

/* ---------- Iteration 3 (2026-10-19): Seitenleiste harmonisiert ----------
   Weiterlernen, Begleiter und Meine Welt bekommen dieselbe kleine Mono-Überschrift (wie .eyebrow), dieselbe Icon-Spalte
   (2.25rem) und werden durch eine feine Trennlinie mit gleichem Abstand getrennt. Farben und Icons bleiben; die Spalte
   bleibt leiser als die Unterrichtseinheiten (kleinere Schrift, keine eigene Fläche außer der Weiterlernen-Zeile). */
/* 2026-10-21: auch „Klassenarbeiten & Klausuren“ (vorher die größte Überschrift der Spalte) */
.s2-begleiter__kopf strong, .s2-welt h2, .s2-termine h2 {
  font-family: var(--font-label); font-size: var(--fs-meta) !important; font-weight: var(--fw-mittel) !important; letter-spacing: 0;
  color: var(--text-secondary); line-height: var(--lh-ui);
}
.s2-termine h2 .icon { width: var(--icon-status, 18px); height: var(--icon-status, 18px); }
.s2-welt h2 { margin: 0 0 0.6rem !important; }
.s2-begleiter__kopf small { margin-top: 0.15rem; color: var(--text); font-size: var(--fs-hilfe); font-weight: var(--fw-mittel); }
.s2-weiterlernen .eyebrow { margin: 0 0 0.6rem; }
.s2-weiterlernen .welt-kachel > .icon.icon--flaeche, .s2-welt__liste .icon.icon--flaeche { width: 2.25rem; height: 2.25rem; }
.s2-welt__liste a { padding-block: 0.45rem; }
.s2-welt__liste a:hover .s2-pfeil, .s2-begleiter__link:hover .s2-pfeil, .s2-weiterlernen .welt-kachel:hover .welt-kachel__pfeil { color: var(--nav-aktiv); }
@media (min-width: 1101px) {
  .s2-seite > section:not([hidden]) + section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-divider); }
}

/* ==========================================================
   (Stand 2026-10-22 abends: zentrierter Einheiten-Kopf, neu hochgeladen)
   Startseite – ruhiger Aufbau (seit 2026-10-22, vom Nutzer nach Vergleich übernommen), Hook body[data-start-v3] in index.html.
   Baut auf css/start2.css auf und ändert nur die Gestaltung; Schwerpunkt klare Schriftstufen (Hero 42–72 px, Stufe 24–28 px,
   Kartentitel 19 px, Text 14 px):
   ein Blickfang (große Überschrift + ein gefüllter Knopf), mehr Luft, Karten ohne Rahmen mit großem Motiv oben,
   Fach/Klasse als ruhige Textleiste direkt über den Karten, rechts nur Termine und Begleiter.
   Nur Tokens aus css/style.css; kein Anheben, keine Schatten (design.md).
   ========================================================== */

/* ---------- Bänder (2026-10-22, design-vorbilder.md §4.3): jeder Abschnitt eine eigene Fläche über die volle Breite ----------
   Hero Weiß, Einheiten Hellgrau mit weißen Karten, Termine Weiß; keine Trennlinien, 64–140 px Luft je Band (Apple 140 px) */
/* seit 2026-10-22 (Nutzerwunsch) knapper: 48–80 statt 64–140 px je Band */
[data-start-v3] .s3-band { padding-block: clamp(3rem, 6vw, 5rem); }
[data-start-v3] .s3-band--weiss { background: var(--color-surface); }
[data-start-v3] .s3-band--grau { background: var(--color-bg); }
/* unten seit 2026-10-22 rund 45 px knapper (68 statt 112 px): mit dem Verlauf ins Hellgrau bleibt keine leere Zwischenzone */
[data-start-v3] .s2-hero.s3-band { padding-block: clamp(3rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3rem); }
/* Erster Abschnitt füllt den Bildschirm (2026-10-23, Nutzer nach iPad-Test): Inhalt senkrecht mittig, „Klasse 6. Deine Kapitel.“
   erscheint erst beim Scrollen. Ab Tablet-Breite und genug Höhe; Handys und quer gehaltene Handys behalten den kompakten Kopf. */
@media (min-width: 768px) and (min-height: 600px) {
  [data-start-v3] .s2-hero.s3-band { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); }
  /* Komposition rund 36 px höher (2026-10-23): unten 72 px mehr Innenabstand, die senkrechte Mitte rückt um die Hälfte nach oben */
  [data-start-v3] .s2-hero.s3-band { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 4.5rem); }
}
[data-start-v3] .s3-band > .container { max-width: var(--maxw); }
/* Übergang Hero → Einheiten (2026-10-22): das Weiß läuft im unteren Drittel weich ins Hellgrau aus, keine harte Kante;
   Einheiten-Band oben rund 50 px knapper (88 statt 140 px), damit „Deine Reihen.“ näher am Hero steht */
[data-start-v3] .s2-hero.s3-band--weiss { background: linear-gradient(var(--color-surface) 60%, var(--color-bg)); }
[data-start-v3] .s2-einheiten.s3-band { padding-top: clamp(2rem, 4vw, 3.25rem); }
/* Fach-Farbband (2026-10-23, design.md „Erkennungszeichen“): das Hellgrau aus dem Hero läuft oben weich in die Fachfarbe über;
   data-fach setzt js/start2.js beim Wechsel des Fachs */
[data-start-v3] .s2-einheiten[data-fach] {
  background: linear-gradient(var(--color-bg), transparent 9rem), linear-gradient(135deg, var(--band-a), var(--band-b));
}
[data-start-v3] .s2-einheiten[data-fach="mathe"] { --band-a: var(--fach-band-mathe-a); --band-b: var(--fach-band-mathe-b); }
[data-start-v3] .s2-einheiten[data-fach="informatik"] { --band-a: var(--fach-band-informatik-a); --band-b: var(--fach-band-informatik-b); }

/* ---------- Karopapier und Hero-Bild (2026-10-22) ----------
   Raster (.mit-karo) und Diagramm-Bausteine (.sz-bild) gemeinsam mit den Stufenseiten in css/seiten.css; hier nur die Lage im Hero.
   Raster zur Mitte hin am schwächsten (hinter Überschrift und Knöpfen), zum Rand ausgeblendet; eine Linie läuft genau durch die Mitte.
   Seit 2026-10-25 nur noch ein Bild (Nutzer: Skizze links und Körper rechts waren zwei Bildsprachen): der Drahtkörper rechts. */
[data-start-v3] .s2-hero { --karo-maske: radial-gradient(ellipse 70% 55% at 50% 50%, rgb(0 0 0 / 0.45) 0%, #000 50%, transparent 100%); }
/* Text optisch über der Mitte (2026-10-25, wie Apple): rund 8 svh höher, auf 24 px gerundet, damit der Körper auf dem Karo bleibt */
[data-start-v3] .s2-hero { --hero-hoch: 0px; }
@media (min-width: 768px) and (min-height: 600px) {
  @supports (width: round(1px, 1px)) {
    [data-start-v3] .s2-hero { --hero-hoch: round(8svh, 24px); }
    [data-start-v3] .s2-hero.s3-band { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 4.5rem + 2 * var(--hero-hoch)); }
  }
}
/* Größe und Lage (2026-10-23, Nutzer: größer, nie auf den Knöpfen): mit --hero-frei Abstand zur Mitte (Gast: Einleitung bis rund
   ±260 px; angemeldet: zwei Weiterlernen-Karten je 23,5 rem = ±386 px). --hero-ab rückt ihn so weit nach außen, dass die volle Größe
   (--hero-bild) passt, höchstens bis zum Containerrand; bei wenig Platz wird er schmaler statt die Knöpfe zu überdecken. */
[data-start-v3] .s2-hero { --hero-frei: 288px; --hero-bild: 336px; --hero-ab: clamp(var(--hero-frei), calc(50% - var(--hero-bild) - 24px), calc(var(--maxw) / 2 + 24px)); }
[data-start-v3] .s2-hero:has(#start-leiste > li + li) { --hero-frei: 432px; }
/* Drahtkörper (2026-10-23, js/drahtkoerper.js) auf Höhe von Einleitung und Knopf; Höhe der Schiene bis zu den Kapitelkarten setzt
   js/drahtkoerper.js (data-koerper-bis). Ab 1560 px im freien Rand und sticky, bis die Karten kommen. Erst ab 960 px. */
[data-start-v3] .s2-koerper { position: absolute; left: calc(50% + var(--hero-ab)); top: calc(50% - var(--hero-hoch) - 96px); width: min(var(--hero-bild), calc(50% - var(--hero-ab) - 24px)); z-index: -1; display: none; pointer-events: none; }
[data-start-v3] .s2-koerper__buehne { display: grid; }
[data-start-v3] .s2-koerper__buehne > svg { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
/* läuft über das Kapitel-Band: Linien so kräftig wie auf den Mathe-Seiten (.sz-bild.st-bild in seiten.css) */
[data-start-v3] .s2-koerper__bild { --sz-linie: color-mix(in srgb, var(--text) 30%, transparent); --sz-weg: color-mix(in srgb, var(--akzent-blau) 80%, transparent); }
[data-start-v3] .s2-koerper__bild .sz-kante { stroke-width: 1.5; }
/* Ball als markanter Punkt (2026-10-25, Nutzer): größer, mit hellblauem Hof statt weißem Rand; läuft beim Erscheinen einmal seine Bahn */
[data-start-v3] .s2-koerper__bild .sz-ball { r: 6px; stroke: color-mix(in srgb, var(--akzent-blau) 22%, transparent); stroke-width: 8; paint-order: stroke; }
@media (min-width: 1280px) { [data-start-v3] .s2-koerper { display: block; } }
@media (min-width: 1560px) {
  [data-start-v3] .s2-koerper { left: calc(50% + var(--maxw) / 2 + 24px); width: min(var(--hero-bild), calc(50% - var(--maxw) / 2 - 48px)); }
  [data-start-v3] .s2-koerper__buehne { position: sticky; top: calc(var(--header-h) + 48px); }
}
/* iPad quer und kleine Laptops (960–1279 px, Nutzerwunsch 2026-10-22); mit zwei Weiterlernen-Karten ist dort kein Platz */
@media (min-width: 960px) and (max-width: 1279px) {
  [data-start-v3] .s2-koerper { display: block; }
  [data-start-v3] .s2-hero:has(#start-leiste > li + li) .s2-koerper { display: none; }
}
@media print { [data-start-v3] .s2-koerper { display: none; } }

/* ---------- Hero: groß, eine Aussage, eine Aktion ---------- */
[data-start-v3] .s2-hero__titel { font-size: clamp(2.6rem, 1.2rem + 4.2vw, 4.5rem); font-weight: var(--fw-titel); letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 1.1rem; }
[data-start-v3] .s2-hero__lead { font-size: clamp(1.2rem, 1rem + 0.55vw, 1.375rem);   /* Einleitung 19–22 px wie Apple */ line-height: 1.45; color: var(--text-secondary); max-width: 44ch; }
/* Textmarker (2026-10-22, .marker in style.css): das getippte Wort schwarz auf Leuchtstift statt grüner Schrift –
   Mathematik gelb, Informatik blau, die übrigen Wörter violett; der Marker wächst beim Tippen mit */
[data-start-v3] .s2-tipp { color: var(--text); }
/* Zwei Schriften abgestimmt (2026-10-22): gemessen haben Inter und IBM Plex Mono dieselbe x-Höhe (0,52 em); mit 0,92 em war das
   getippte Wort 8 % (Versalien 12 %) kleiner als „Lerne“. 0,96 em gleicht das aus, ohne dass die breiteren Mono-Buchstaben größer
   wirken. Plex Mono liegt nur als Medium (500) vor, Inter steht halbfett (600): eine Kontur von 0,016 em gleicht die Strichstärke an
   (gleichmäßig, kein künstlicher Fettschnitt). Laufweite bleibt (Mono nie enger stellen, start2.css). */
[data-start-v3] .s2-tipp { font-size: 0.96em; -webkit-text-stroke: 0.016em currentColor; }
[data-start-v3] .s2-tipp__cursor { -webkit-text-stroke: 0; }
[data-start-v3] .s2-tipp .marker { --mk: var(--marker-botschaft); padding: 0 0.06em; }
[data-start-v3] .s2-tipp[data-fach="mathe"] .marker { --mk: var(--marker-mathe); }
[data-start-v3] .s2-tipp[data-fach="informatik"] .marker { --mk: var(--marker-informatik); }
[data-start-v3] .s2-hero__lead .unterstrich { --ul: var(--unterstrich-botschaft); color: var(--text); }
/* Zwei Gruppen wie bei Apple (2026-10-25): Überschrift + Satz eng (Titel-Abstand 1,1 rem), die Handlung deutlich abgesetzt,
   rund das Doppelte darüber (40–52 px statt 32 px) */
[data-start-v3] .s2-weiterlernen { margin-top: clamp(2.5rem, 1.75rem + 1.25vw, 3.25rem); }
[data-start-v3] .s2-weiterlernen .welt-kacheln__liste { gap: 0.75rem 1.25rem; }
/* Hero zentriert wie der Einheiten-Kopf (2026-10-22): eine Mittelachse für die ganze Seite. Das getippte Wort hat seit jeher
   eine Mindestbreite (13ch, start2.css), dadurch steht „Lerne“ beim Tippen still; Weiter-Knopf und Zweitlink mittig nebeneinander */
[data-start-v3] .s2-hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
[data-start-v3] .s2-hero__lead { margin-inline: auto; max-width: 40ch; text-wrap: balance; }   /* keine Einzelwörter in Zeile 2 (2026-10-25) */
[data-start-v3] .s2-weiterlernen { align-self: stretch; }
[data-start-v3] .s2-weiterlernen .welt-kacheln__liste { justify-content: center; }
[data-start-v3] .s2-weiterlernen .welt-kachel { text-align: left; }
[data-start-v3] .s2-weiterlernen li:first-child { flex: 0 1 auto; min-width: 0; }
/* Hauptaktion als gefüllter Knopf; das Symbol entfällt, der Text trägt */
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel {
  gap: 1rem; padding: 1.1rem 1.4rem 1.1rem 1.6rem; border: 0; border-radius: var(--radius-md);
  background: var(--interactive-primary); color: var(--on-primary);
}
/* Hover und gedrückt wie .btn (2026-10-23, style.css): dieselben Blau-Stufen für dieselben Zustände; Fokus bleibt der Ring */
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel:hover { background: var(--interactive-hover); color: var(--on-primary); }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel:active { background: var(--interactive-pressed); }
/* Pfeil rückt beim Überfahren/Fokus 3 px nach rechts (2026-10-22), beide Fortsetzen-Karten gleich; reduzierte Bewegung: steht still */
[data-start-v3] .s2-weiterlernen .welt-kachel { transition: background var(--transition-fast), border-color var(--transition-fast); }
[data-start-v3] .s2-weiterlernen .welt-kachel__pfeil { transition: transform var(--transition-normal); }
[data-start-v3] .s2-weiterlernen .welt-kachel:is(:hover, :focus-visible) .welt-kachel__pfeil { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { [data-start-v3] .s2-weiterlernen .welt-kachel__pfeil { transition: none; transform: none !important; } }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel > .icon { display: none; }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel strong { font-size: calc(var(--fs-lern) * 1.08); }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel small { color: inherit; opacity: 0.82; font-size: var(--fs-hilfe); }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel__pfeil,
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel:hover .welt-kachel__pfeil { color: inherit; font-size: 1.15rem; }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel > .icon { display: none; }
/* Zweite Fortsetzung als Geschwister des Hauptknopfs (2026-10-22): gleiche Form, Höhe und Schrift, aber weiße Fläche mit
   feiner Kontur statt Füllung – primär/sekundär nur über die Fläche, nicht über eine andere Bauart */
[data-start-v3] .s2-weiterlernen .welt-kacheln__liste { align-items: stretch; }
[data-start-v3] .s2-weiterlernen li:not(:first-child) { flex: 0 1 auto; min-width: 0; }
/* Beide Fortsetzen-Karten gleich breit (21rem, 2026-10-22): genug Platz für Reihentitel wie „Objektorientierung mit PAKO“,
   die Zeile bleibt trotzdem schmal genug für die Hero-Szenen (≤ 346 px ab Mitte). Aufbau in drei Zeilen (js/start-leiste.js):
   kleine Kennzeile („Weiterlernen“ bzw. Fach), Titel (höchstens zwei Zeilen), Stand (genau eine Zeile); Pfeil rechts mittig */
[data-start-v3] .s2-weiterlernen li,
[data-start-v3] .s2-weiterlernen li:first-child,
[data-start-v3] .s2-weiterlernen li:not(:first-child) { flex: 0 1 23.5rem; min-width: 0; max-width: 100%; }
/* Seit 2026-10-23 rund 12 % größer (23,5 statt 21 rem, Innenabstand 1,1 statt 0,95 rem, Titel 8 % größer): neben der großen Überschrift präsenter */
[data-start-v3] .s2-weiterlernen .welt-kachel { height: 100%; align-items: center; }
[data-start-v3] .s2-weiterlernen .welt-kachel > span:not(.welt-kachel__pfeil) { gap: 0.15rem; }
[data-start-v3] .s2-weiterlernen .welt-kachel__kennung { font-size: var(--fs-meta); font-weight: var(--fw-mittel); line-height: 1.3; color: var(--text-secondary); }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel__kennung { color: inherit; opacity: 0.82; }
[data-start-v3] .s2-weiterlernen .welt-kachel strong {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25;
}
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel {
  /* hebt sich seit 2026-10-23 etwas klarer vom hellen Hero ab: Rand ein Drittel Richtung --border-strong, zarter Schatten
     wie die Kapitelkarten (Ebene 1), im Dunkelmodus ohne Schatten */
  gap: 1rem; padding: 1.1rem 1.4rem 1.1rem 1.6rem; border: 1px solid color-mix(in srgb, var(--border-strong) 35%, var(--border)); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 5%, transparent);
}
:root[data-theme="dark"] [data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel { box-shadow: none; }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel:hover { border-color: var(--hover-rand); background: var(--color-surface); }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel strong { font-size: calc(var(--fs-lern) * 1.08); }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel small { color: var(--text-secondary); font-size: var(--fs-hilfe); }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel__pfeil { color: var(--text-secondary); font-size: 1.15rem; }

/* ---------- Kopf der Einheiten: Stufe groß, Fach/Klasse als Textleiste darunter ---------- */
/* Kopf zentriert wie Apple (2026-10-22): Fach-Hinweis grau, Stufe 36–56 px mit Marker, ein Satz, Fach/Klasse darunter mittig */
[data-start-v3] .s2-einheiten__kopf { display: block; max-width: 980px; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
[data-start-v3] .s3-eyebrow { margin: 0 0 0.6rem; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); font-weight: var(--fw-halbfett); color: var(--text-secondary); }
[data-start-v3] .s2-einheiten__kopf h2 { margin: 0; font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.5rem); font-weight: var(--fw-titel); letter-spacing: -0.03em; line-height: 1.07; }
[data-start-v3] .s3-intro { max-width: 40ch; margin: 1rem auto 0; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem); line-height: 1.35; color: var(--text); }
[data-start-v3] .s3-intro:empty { display: none; }
[data-start-v3] .s2-wahl {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.75rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; border: 0;
}
[data-start-v3] .s3-alle { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; text-align: center; font-size: var(--fs-lern); }

/* Stil „Do-matik“ (2026-10-22, Nutzer-Entscheidung nach Vergleich mit „Apple-nah“): eigene Handschrift statt Apple-Kopie.
   Schrägstrich als Erkennungszeichen (wie „Lerne /…“, Regel zentral in style.css bei .eyebrow): „/ Informatik“, Text in Inter,
   nur der Strich in Code-Schrift (CLAUDE.md: Labels in Inter); Einheiten-Kopf seit 2026-10-22 (Nutzerwunsch) wieder zentriert
   auf derselben Mittelachse wie der Hero: Fach-Hinweis, „Q2. Deine Reihen.“, Satz, Fach-/Klassenleiste und „Alle Einheiten“ mittig */
[data-start-v3] .s3-eyebrow { font-weight: var(--fw-mittel); font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); letter-spacing: 0; color: var(--nav-aktiv); }
[data-start-v3] .s2-wahl__kopf { margin: 0; }
/* Feiner Strich zwischen Fach und Klassen, nur wenn die Fach-Wahl sichtbar ist (Lehrkraft; 2026-10-25) */
[data-start-v3] .s2-wahl__kopf:has(.s2-fach:not([hidden])) { padding-right: 1.75rem; border-right: 1px solid var(--border-divider); }
/* Fach: Segment-Schalter (eine Fläche, Auswahl hebt sich hell ab); 44 px Trefferfläche fürs iPad, bewusst kleiner als die Hero-Knöpfe (2026-10-25) */
[data-start-v3] .s2-fach { gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); }
[data-start-v3] .s2-fach button { min-height: 44px; padding: 0.4rem 1rem; border: 0; background: transparent; color: var(--text-secondary); font-size: var(--fs-ui); }
[data-start-v3] .s2-fach button[aria-selected="true"] { background: var(--surface); color: var(--text); }
[data-start-v3] .s2-fach button:not([aria-selected="true"]):hover { color: var(--text); }
/* Klassen: nur Ziffern, Auswahl = Akzentfarbe + Strich darunter; Gruppen durch eine feine Linie getrennt */
[data-start-v3] .s2-klassen { gap: 0; align-items: center; }
[data-start-v3] .s2-klassen__gruppe { display: flex; align-items: center; }
[data-start-v3] .s2-klassen__gruppe + .s2-klassen__gruppe { margin-left: 0.6rem; padding-left: 0.6rem; border-left: 1px solid var(--border-divider); }
[data-start-v3] .s2-klassen__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-start-v3] .s2-klassen__reihe { gap: 0; }
[data-start-v3] .s2-klasse { min-width: 44px; min-height: 44px; padding: 0.3rem 0.6rem; border: 0; background: transparent; color: var(--text-secondary); border-radius: var(--radius-knopf); }
[data-start-v3] .s2-klasse:hover { background: var(--surface-sunken); color: var(--text); }
[data-start-v3] .s2-klasse[aria-pressed="true"] { background: var(--linie-unten); box-shadow: none; }
[data-start-v3] .s2-klasse[aria-pressed="true"] strong { color: var(--nav-aktiv); }
[data-start-v3] .s2-klasse strong { font-size: 1rem; }

/* ---------- Karten: ohne Rahmen, Motiv groß als Bildfläche oben ---------- */
/* 3er-Raster (2026-10-22): drei Karten je Reihe, Rinne 24 px, Rundung --radius-kachel; Motiv als „Fenster“ mit 8 px Innenrand */
[data-start-v3] .s2-karten--kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 24px; }
[data-start-v3] .s2-karten--kompakt .s2-karte {
  /* Stil „Do-matik“ (2026-10-22): straffer (14 px), feiner Rand + zarter Schatten (Microsoft-Ebene 1) statt flacher Apple-Kachel */
  gap: 0; padding: 0; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-flaeche);
  background: var(--color-surface); transition: background var(--transition-fast), border-color var(--transition-fast);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 5%, transparent);
}
:root[data-theme="dark"] [data-start-v3] .s2-karten--kompakt .s2-karte { box-shadow: none; }
[data-start-v3] .s2-karten--kompakt a.s2-karte:hover { border-color: var(--hover-rand); background: var(--color-surface); }
[data-start-v3] .s2-karten--kompakt .s2-karte__motiv {
  order: -1; position: static; align-self: auto; display: grid; place-items: center; width: calc(100% - 12px); aspect-ratio: 16 / 9; margin: 6px 6px 0;
  border-radius: calc(var(--radius-flaeche) - 6px); background: color-mix(in srgb, var(--k) 9%, var(--color-surface));
}
[data-start-v3] .s2-karten--kompakt .s2-karte__motiv svg { width: 62%; height: auto; transform-origin: 50% 50%; }
[data-start-v3] .s2-karten--kompakt .s2-karte__oben { padding: 1.1rem 1.25rem 0.35rem; border: 0; }
[data-start-v3] .s2-karten--kompakt .s2-karte__nr { font-family: var(--font); font-size: var(--fs-hilfe); font-weight: var(--fw-halbfett); letter-spacing: 0; }
[data-start-v3] .s2-karten--kompakt .s2-karte__text { padding: 0 1.25rem; gap: 0.35rem; }
[data-start-v3] .s2-karten--kompakt .s2-karte__text strong { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }
[data-start-v3] .s2-karten--kompakt .s2-karte__kurz { font-size: var(--fs-hilfe); line-height: 1.45; color: var(--text-secondary); -webkit-line-clamp: 2; line-clamp: 2; }
[data-start-v3] .s2-karten--kompakt .s2-karte__unten,
[data-start-v3] .s2-karten--kompakt .s2-karte:has(.s2-karte__motiv) .s2-karte__unten { margin-top: auto; padding: 1rem 1.25rem 1.15rem; }
[data-start-v3] .s2-karten--kompakt .s2-karte.ist-bald { border: 1px dashed var(--border); background: transparent; }
[data-start-v3] .s2-karten--kompakt .s2-karte.ist-bald .s2-karte__motiv { background: transparent; }

/* Leitkarte (2026-10-22, Microsoft-Muster): aktuelle bzw. nächste Einheit über die volle Breite, Text links, Motiv rechts */
[data-start-v3] .s2-karten--kompakt .s2-karte--leit {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "oben motiv" "text motiv" "pfeil motiv" "unten motiv";   /* Zeile „pfeil“: Stiftstrich, seiten.css .st-karte__pfeil */
}
[data-start-v3] .s2-karte--leit .s2-karte__oben { grid-area: oben; flex-wrap: wrap; justify-content: flex-start; gap: 0.3rem 0.75rem; padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) 0.5rem; }
[data-start-v3] .s2-karte__leit { flex: 0 0 100%; font-size: var(--fs-meta); font-weight: var(--fw-mittel); color: var(--nav-aktiv); }
[data-start-v3] .s2-karte--leit .s2-karte__text { grid-area: text; padding: 0 clamp(1.5rem, 3vw, 2.5rem); gap: 0.6rem; }
[data-start-v3] .s2-karte--leit .s2-karte__text strong { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.12; letter-spacing: -0.02em; }
[data-start-v3] .s2-karte--leit .s2-karte__kurz { font-size: var(--fs-lern); -webkit-line-clamp: 3; line-clamp: 3; }
[data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__unten { grid-area: unten; align-self: end; margin-top: 0; padding: 1.25rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
[data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__motiv { grid-area: motiv; order: 0; margin: 6px; aspect-ratio: auto; min-height: clamp(200px, 19vw, 256px); }
[data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__motiv svg { width: 52%; }
[data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__motiv .heft-probe svg { width: auto; max-width: 100%; }   /* Handschrift in Originalgröße (seiten.css) */
/* Kompakter seit 2026-10-23 (Desktop rund 270 statt 354 px hoch): weniger Luft um Text und Heftblatt, das Blatt selbst behält seine
   Größe und bleibt senkrecht mittig; ohne feste Höhe, längere Inhalte machen die Karte weiterhin höher */
[data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__motiv .heft-probe { padding: clamp(0.75rem, 1.5vw, 1.25rem); }
/* Informatik hell (2026-10-23): die Vorschau im Türkis-Akzent lag mit 9 % fast im Ton des türkisfarbenen Bands; mit 5 % heller
   und weniger gesättigt, bleibt aber im Kapitelton. Dunkel trennt die Fläche schon deutlich. */
:root:not([data-theme="dark"]) [data-start-v3] .s2-einheiten[data-fach="informatik"] .s2-karte--leit .s2-karte__motiv { background: color-mix(in srgb, var(--k) 5%, var(--color-surface)); }
@media (max-width: 900px) {
  [data-start-v3] .s2-karten--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  [data-start-v3] .s2-karten--kompakt .s2-karte--leit { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "motiv" "oben" "text" "unten"; }
  [data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__motiv { margin: 6px 6px 0; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  [data-start-v3] .s2-karten--kompakt { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Einmaliges ruhiges Einblenden, wenn Karten erscheinen (Laden, Wechsel von Fach/Klasse) */
@keyframes s3-ein { from { opacity: 0; transform: translateY(8px); } }
[data-start-v3] .s2-karten > .s2-karte { animation: s3-ein 340ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
[data-start-v3] .s2-karten > .s2-karte:nth-child(2) { animation-delay: 40ms; }
[data-start-v3] .s2-karten > .s2-karte:nth-child(3) { animation-delay: 80ms; }
[data-start-v3] .s2-karten > .s2-karte:nth-child(4) { animation-delay: 120ms; }
[data-start-v3] .s2-karten > .s2-karte:nth-child(n+5) { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  [data-start-v3] .s2-karten > .s2-karte { animation: none; }
  [data-start-v3] a.s2-karte:hover .s2-karte__motiv svg { transform: none; }
}

/* ---------- Seitenspalte: nur Termine und Begleiter, etwas größer ---------- */
[data-start-v3] .s2-begleiter__link { grid-template-columns: 96px minmax(0, 1fr); }
[data-start-v3] .s2-begleiter__buehne { width: 96px; height: 96px; }
[data-start-v3] .s2-begleiter__buehne img { max-height: 96px; }

@media (max-width: 1100px) {
  [data-start-v3] .s2-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  [data-start-v3] .s2-wahl { flex-direction: column; align-items: stretch; }
  [data-start-v3] .s2-wahl__kopf:has(.s2-fach:not([hidden])) { padding-right: 0; border-right: 0; }
  [data-start-v3] .s2-klassen { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---------- Termine unter den Einheiten (2026-10-22, vorher rechte Spalte) ----------
   eigener Abschnitt mit Überschrift wie „Klasse 5“, Termine als Reihe von Kalenderblättern */
[data-start-v3] .s2-termine.s3-band { border-top: 0; }
/* 2026-10-25: Überschrift zentriert wie die übrigen Bänder („Termine.“ mit Punkt, ohne Icon); Liste als schmaler Block
   in der Mitte, Einträge darin linksbündig (Kalenderblätter bleiben untereinander vergleichbar) */
[data-start-v3] .s2-termine h2 { justify-content: center; text-align: center; margin: 0 0 clamp(1.5rem, 3vw, 2rem) !important; font-family: var(--font); font-size: var(--fs-h2) !important; font-weight: var(--fw-titel) !important; color: var(--text); letter-spacing: -0.02em; }
[data-start-v3] .s2-termine__liste { grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 30rem; margin-inline: auto; }
[data-start-v3] .s2-termine__liste li { align-items: flex-start; }
[data-start-v3] .s2-termine__text .s2-termine__link { justify-self: start; margin-top: 0.35rem; padding: 0; font-size: var(--fs-hilfe); }
[data-start-v3] .s2-termine__text .s2-termine__ueben { justify-self: start; width: auto; margin-top: 0.5rem; }
/* Schmale Handys (2026-10-22): Fach-Umschalter über die volle Breite, getipptes Wort ohne feste Mindestbreite */
@media (max-width: 600px) {
  [data-start-v3] .s2-wahl__kopf, [data-start-v3] .s2-fach { width: 100%; }
  [data-start-v3] .s2-fach button { flex: 1 1 0; justify-content: center; padding-inline: 0.5rem; }
}
@media (max-width: 380px) {
  [data-start-v3] .s2-tipp { min-width: 0; }
  [data-start-v3] .s2-hero__titel { font-size: 2.35rem; }
}

/* Link zur Einführungsseite unter dem Hero, nur für nicht angemeldete Besucher (2026-10-22) */
[data-start-v3] .s2-hero__mehr { margin: 1.25rem 0 0; font-size: var(--fs-ui); }
[data-start-v3] .s2-hero__mehr[hidden] { display: none; }
[data-start-v3] .s2-hero__ueben { margin: 1.25rem 0 0; text-align: center; }
[data-start-v3] .s2-hero__ueben[hidden] { display: none; }