/* ==================================================================
   kern.css — Aussehen des Werkstatt-Kerns
   Die Detektiv-Werkstatt · © 2026 Steffen Klee     (Stufe 12, AP P.5b)
   ==================================================================

   Farben aus tokens.css (= src/styles/02-tokens.css, vom Build kopiert).
   Die Akzentfarbe des Moduls setzt die Seite als --akzent (aus
   module.js). Bedienung wie in der Wortarten-Werkstatt: Kopfleiste,
   drei Bereiche, große Ziele (--tap: 52 px).

   Schrift: Andika (SIL) für alles, was Kinder lesen.
   Andika © SIL International, SIL Open Font License 1.1 —
   https://openfontlicense.org. Dieser Hinweis muss bleiben.
   ================================================================== */

@font-face { font-family: "Andika"; src: url("../schriften/andika-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("../schriften/andika-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root { --akzent: var(--brand); color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* --- Grund ---------------------------------------------------------- */
* { box-sizing: border-box; }
html { font-size: calc(16px * var(--scale)); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); min-height: 100dvh; overflow-x: hidden; background: var(--paper);
  background-image: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--akzent) 14%, transparent) 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 110%, var(--amber-soft) 0%, transparent 50%); background-attachment: fixed; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.15; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none; }
.ks-noscript, .ks-laden { padding: 2rem; text-align: center; }

/* --- Knöpfe und Felder (wie src/styles/04-…) ------------------------- */
.btn { display: inline-flex; align-items: center; gap: .5em; justify-content: center; min-height: var(--tap); padding: .55em 1.05em;
  font: 700 1rem var(--font-body); color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-s);
  cursor: pointer; box-shadow: var(--shadow-1); transition: transform .08s, box-shadow .15s, background .15s; user-select: none; -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); border-color: var(--brand-ink); color: #fff; }
.btn-primary:hover { background: var(--brand-ink); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-danger { color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { min-height: 40px; padding: .35em .7em; font-size: .85rem; border-radius: 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.icon-btn { min-width: var(--tap); padding: 0; font-size: 1.1rem; font-weight: 800; }
.pill { display: inline-flex; align-items: center; padding: .2em .7em; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--paper-2); color: var(--ink-soft); }
input[type=text] { font: 1rem var(--font-body); color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 10px;
  padding: .5em .65em; width: 100%; min-width: 0; min-height: 46px; }
label.field { display: block; font-weight: 700; font-size: .9rem; color: var(--ink-soft); margin: .9em 0 .35em; }
.ks-mini { min-width: 40px; min-height: 40px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink-soft);
  font-weight: 800; cursor: pointer; }
.ks-mini:disabled { opacity: .35; cursor: default; }
.ks-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* --- Kopfleiste (wie src/styles/05-topbar.css) ------------------------ */
.topbar { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .55rem clamp(.6rem, 2vw, 1.2rem); border-bottom: 2px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font-size: 1.4rem;
  background: color-mix(in srgb, var(--akzent) 22%, var(--card)); border: 2px solid var(--akzent); transform: rotate(-4deg); }
.brand-name { font-size: 1.15rem; }
.brand-name small { display: block; font-size: .62rem; color: var(--ink-soft); letter-spacing: .14em; text-transform: uppercase; }
.mode-switch { display: flex; background: var(--paper-2); border: 2px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; }
.mode-switch button { border: none; background: transparent; font: 800 .98rem var(--font-body); color: var(--ink-soft);
  padding: .5em 1em; min-height: 44px; border-radius: 10px; cursor: pointer; }
.mode-switch button[aria-selected="true"] { background: var(--card); color: var(--brand-ink); box-shadow: var(--shadow-1); }
html[data-theme="dark"] .mode-switch button[aria-selected="true"] { color: var(--brand); }
.tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
.tools .divider { width: 2px; height: 34px; background: var(--line); border-radius: 2px; }

/* --- Inhalt, Rechtszeile --------------------------------------------- */
.ks-inhalt { position: relative; padding: clamp(.8rem, 2.5vw, 1.6rem); max-width: 1400px; margin: 0 auto; }
.ks-fuss { text-align: center; font-size: .8rem; color: var(--ink-soft); padding: 1.2rem 1rem 1.6rem; }
.ks-fuss a { color: inherit; }
body[data-bereich="tafel"] .ks-fuss { padding-top: .4rem; }

/* --- Vorbereitung ------------------------------------------------------ */
.ks-vorbereitung { display: grid; grid-template-columns: minmax(240px, 330px) 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 820px) { .ks-vorbereitung { grid-template-columns: 1fr; } }
.ks-vorbereitung > * { min-width: 0; }
.ks-seite, .ks-editor, .ks-typwahl, .ks-tafel-wahl { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-1); }
.ks-seite-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.ks-seite-kopf h2 { font-size: 1.1rem; }
.ks-liste { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .45rem; }
.ks-liste-karte { width: 100%; display: flex; align-items: center; gap: .6rem; text-align: left; padding: .55rem .65rem; min-height: var(--tap);
  border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.ks-liste-karte[aria-current="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--card)); }
.ks-liste-symbol { font-size: 1.4rem; }
.ks-liste-text { display: grid; flex: 1; min-width: 0; }
.ks-liste-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-liste-text small { color: var(--ink-soft); }
.ks-pill-offen { background: var(--amber-soft); color: var(--ink); }
.ks-leer { color: var(--ink-soft); }
.ks-willkommen h2 { margin-bottom: .5rem; }
.ks-editor-kopf { display: flex; align-items: center; gap: .5rem; }
.ks-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem;
  border-radius: var(--radius-s); background: var(--blue-soft); margin-bottom: .8rem; }
.ks-typfeld { margin-top: 1rem; }
.ks-maengel { margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--radius-s); }
.ks-maengel ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.ks-maengel.ks-offen { background: var(--amber-soft); }
.ks-maengel.ks-bereit { background: var(--green-soft); }
.ks-warnung { margin: .4rem 0 0; font-weight: 700; color: var(--red); }

.ks-typwahl h2, .ks-tafel-wahl h2 { margin-bottom: .8rem; }
.ks-typwahl-gitter, .ks-tafel-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; margin-bottom: .8rem; }
.ks-typ { display: grid; gap: .25rem; justify-items: start; text-align: left; padding: .9rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; min-height: 110px; }
.ks-typ:hover { border-color: var(--akzent); }
.ks-typ small { color: var(--ink-soft); }
.ks-typ-symbol { font-size: 1.7rem; }

/* Gruppen (Mathe Z.G, app/gruppen.js): Themen in Liste, Typ-Auswahl, Tafel-Übersicht und „Aufs Blatt“. */
.ks-gruppen { display: grid; gap: .45rem; margin-bottom: .6rem; }
.ks-gruppe { border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--paper); }
.ks-gruppe > summary { display: flex; align-items: center; gap: .55rem; min-height: var(--tap); padding: .35rem .65rem; cursor: pointer;
  list-style: none; border-radius: var(--radius-s); }
.ks-gruppe > summary::-webkit-details-marker { display: none; }
.ks-gruppe > summary::after { content: "▸"; margin-left: .2rem; color: var(--ink-soft); transition: transform .15s; }
.ks-gruppe[open] > summary::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .ks-gruppe > summary::after { transition: none; } }
.ks-gruppe > summary:hover { background: color-mix(in srgb, var(--akzent) 7%, var(--paper)); }
.ks-gruppe > summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.ks-gruppe > summary b { flex: 1; min-width: 0; }
.ks-gruppe-symbol { font-size: 1.25rem; }
.ks-gruppe-zahl { min-width: 1.8rem; padding: .05rem .45rem; border-radius: 999px; text-align: center; font-size: .85rem; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); }
.ks-gruppe[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ks-gruppe > .ks-liste { margin: 0; padding: .45rem; }
.ks-themen { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.ks-thema { min-height: var(--tap); padding: .35rem .8rem; border: 2px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink); font: inherit; cursor: pointer; }
.ks-thema:hover { border-color: var(--akzent); }
.ks-thema[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, var(--card)); font-weight: 700; }
.ks-typwahl-gruppe h3, .ks-tafel-gruppe { font-size: 1.05rem; margin: .4rem 0 .5rem; }
.ks-gruppe-text { margin: -.3rem 0 .6rem; color: var(--ink-soft); font-size: .92rem; }

/* Unterrichtspakete (K.7): Katalog in der Vorbereitung, Stunde an der Tafel. Farbe je Gruppe des Bausteins. */
.ks-paket-knopf { width: 100%; margin-top: .4rem; }
.ks-paket-knopf[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--card)); }
.ks-paket-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ks-paket-intro { color: var(--ink-soft); margin: .6rem 0 1rem; }
.ks-paket-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.ks-paket-karte { display: grid; gap: .45rem; text-align: left; padding: 1rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.ks-paket-karte:hover { border-color: var(--akzent); }
.ks-paket-band { display: flex; align-items: center; gap: .6rem; }
.ks-paket-band b { font-size: 1.15rem; }
.ks-paket-band-gross { margin: .8rem 0; }
.ks-paket-band-gross h2 { font-size: 1.5rem; }
.ks-paket-ziel { display: block; color: var(--ink-soft); }
.ks-paket-fakten { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .88rem; color: var(--ink-soft); }
.ks-paket-mehr { font-weight: 800; color: var(--akzent); }
.ks-paket-status { justify-self: start; padding: .15em .6em; border-radius: 999px; background: var(--green-soft); font-size: .8rem; font-weight: 800; }
.ks-paket-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin: 0 0 .8rem; }
.ks-paket-info dt { font-size: .8rem; font-weight: 800; color: var(--ink-soft); }
.ks-paket-info dd { margin: 0; }
/* Lehrplanbezug (Mathe Z.7): lange Zeilen über die ganze Breite, Wahl des Plans über dem Katalog. */
.ks-paket-info .ks-paket-lehrplan { grid-column: 1 / -1; }
.ks-paket-lehrplan ul { margin: 0; padding-left: 1.1rem; }
.ks-paket-bezug { font-size: .85rem; color: var(--ink-soft); }
.ks-paket-plan { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; font-weight: 700; }
.ks-paket-plan select { font: inherit; min-height: var(--tap); padding: 0 .6rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--card); color: var(--ink); }
.ks-paket-hinweis { padding: .6rem .8rem; border-radius: var(--radius-s); background: var(--amber-soft); margin: 0 0 .8rem; }
.ks-paket-stunden { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: 1rem 0; }
.ks-paket-stunde { display: grid; gap: .1rem; text-align: left; padding: .55rem .75rem; min-height: var(--tap); border: 2px solid var(--line);
  border-radius: var(--radius-s); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.ks-paket-stunde[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, var(--card)); }
.ks-paket-stunde span { color: var(--ink-soft); font-size: .9rem; }
.ks-paket-stunde-titel { font-size: 1.15rem; margin-top: .4rem; }
.ks-paket-stunde-ziel { margin: .3rem 0 .8rem; }
.ks-paket-ablauf, .ks-std-schritte { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.ks-paket-schritt, .ks-std-schritt { --gruppe: var(--blue-soft); display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .75rem;
  border: 2px solid var(--line); border-left: 8px solid color-mix(in srgb, var(--gruppe) 100%, var(--ink) 12%); border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--gruppe) 35%, var(--card)); }
[data-gruppe="niveau"] { --gruppe: var(--amber-soft); }
[data-gruppe="gestalten"] { --gruppe: var(--green-soft); }
[data-gruppe="forschen"] { --gruppe: var(--brand-soft); }
[data-gruppe="blatt"] { --gruppe: var(--purple-soft); }
[data-gruppe="abschluss"] { --gruppe: var(--red-soft); }
.ks-paket-nr, .ks-std-nr { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--card);
  border: 2px solid var(--line); font-weight: 800; }
.ks-paket-schritt-text, .ks-std-text { display: grid; gap: .1rem; min-width: 0; }
.ks-paket-art { font-size: .78rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.ks-paket-schritt small, .ks-std-text small { color: var(--ink-soft); }
.ks-paket-erfolg { padding: .8rem 1rem; border-radius: var(--radius-s); background: var(--green-soft); }
.ks-paket-erfolg p { margin: 0; }
.ks-paket-schon { color: var(--ink-soft); margin: 0 0 .6rem; }
.ks-std .ks-kopf { margin-bottom: 1rem; }
.ks-std-schritt { width: 100%; text-align: left; color: var(--ink); font: inherit; font-size: 1.1rem; cursor: pointer; min-height: var(--tap); }
.ks-std-schritt:hover:not(:disabled) { border-color: var(--akzent); }
.ks-std-schritt:disabled { opacity: .55; cursor: not-allowed; }
.ks-std-nr { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
.ks-std-knopf { border-color: color-mix(in srgb, var(--akzent) 45%, var(--line)); }

/* Editor der Typen */
.ks-ed-hilfe { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .92rem; }
.ks-ed-liste { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .45rem; }
.ks-ed-zeile { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ks-ed-zeile > .ks-karte-edit { flex: 1 1 180px; }
.ks-ed-zeile > input { flex: 1 1 200px; }
.ks-ed-pfeil, .ks-ed-nr { font-weight: 800; color: var(--ink-soft); min-width: 1.4em; text-align: center; }
.ks-ed-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin-bottom: .6rem; }
.ks-ed-gruppe { border: 2px solid var(--line); border-radius: var(--radius-s); padding: .6rem .7rem .8rem; margin: 0 0 .7rem; min-width: 0; }
.ks-ed-gruppe legend { font-weight: 800; padding: 0 .3rem; }
.ks-ed-gruppe select { max-width: 100%; } /* lange Wahltexte („●● kurz gezeigt, dann verdeckt …“) brechen sonst bei 320 px aus */
.ks-ed-gruppe > .ks-ed-zeile { margin-bottom: .5rem; }
.ks-ed-label { font-size: .85rem; color: var(--ink-soft); }
.ks-ed-richtig { display: grid; place-items: center; min-width: 40px; min-height: 40px; }
.ks-ed-richtig input { width: 22px; height: 22px; accent-color: var(--green); }
.ks-karte-edit { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.ks-karte-edit-bild { position: relative; flex: none; }
.ks-karte-edit-bild .ks-bild { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); display: block; }
/* Bild per Link (K.12b): das Feld klappt unter der Karte auf */
.ks-karte-edit.ks-link-offen { flex-wrap: wrap; }
.ks-karte-edit.ks-link-offen > input { flex: 1 1 120px; width: auto; min-width: 0; }
.ks-link-feld { flex: 1 0 100%; display: grid; gap: .3rem; padding: .5rem .6rem; border: 2px dashed var(--line); border-radius: var(--radius-s); background: var(--paper); }
.ks-link-zeile { display: flex; gap: .4rem; min-width: 0; }
.ks-link-adresse { flex: 1 1 auto; min-width: 0; }
.ks-link-hinweis, .ks-link-meldung { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.ks-link-meldung:empty { display: none; }
.ks-karte-edit-bild .ks-mini { position: absolute; top: -10px; right: -10px; min-width: 26px; min-height: 26px; padding: 0; font-size: .7rem; }
/* Mathe: „🎲 Zufällige Aufgaben“ oben im Editor (Z.4c, EZ37) und „Genauer einstellen“ */
.ks-wf { border: 2px solid color-mix(in srgb, var(--akzent) 40%, var(--line)); border-radius: var(--radius-s); background: color-mix(in srgb, var(--akzent) 5%, var(--card)); padding: .7rem .8rem .5rem; margin: 0 0 .8rem; display: grid; gap: .5rem; min-width: 0; }
.ks-wf-titel { margin: 0; font-size: 1.05rem; }
.ks-wf-stufen { display: flex; flex-wrap: wrap; gap: .4rem; }
.ks-wf-stufe { flex: 1 1 7.5rem; min-height: var(--tap, 44px); padding: .35rem .7rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.ks-wf-stufe:hover { border-color: var(--akzent); }
.ks-wf-stufe[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, var(--card)); }
.ks-wf-text { margin: 0; min-height: 2.6em; }
.ks-wf-zeile { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.ks-wf-zeile .field { flex: 1 0 100%; margin: 0; }
.ks-wf-anzahl { width: 6rem; min-height: var(--tap, 44px); }
.ks-wf-los { flex: 1 1 auto; min-height: var(--tap, 44px); }
.ks-wf-hinweis, .ks-wf-fuss { margin: 0; }
.ks-wf-genauer { margin: 0 0 .7rem; }
.ks-wf-genauer > summary { cursor: pointer; font-weight: 800; min-height: var(--tap, 44px); display: flex; align-items: center; }
.ks-wf-genauer[open] > summary { margin-bottom: .4rem; }

/* --- Tafel: Bühne ------------------------------------------------------ */
.ks-buehne { display: grid; gap: 1rem; }
.ks-kopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ks-kopf-text { flex: 1; min-width: 220px; }
.ks-titel { font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
.ks-auftrag { margin: .25rem 0 0; font-family: var(--font-read); font-size: clamp(1.1rem, 2.2vw, 1.6rem); }
.ks-vorlesen { min-width: 36px; min-height: 36px; vertical-align: middle; }
.ks-stand { display: grid; gap: .3rem; justify-items: end; min-width: 140px; }
.ks-stand-text { font-weight: 800; color: var(--ink-soft); }
.ks-stand-balken { width: 140px; height: 12px; border-radius: 99px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
.ks-stand-balken span { display: block; height: 100%; background: var(--green); transition: width .3s; }
.ks-tipp { justify-self: center; max-width: 46rem; padding: .7rem 1.1rem; border-radius: 16px; background: var(--amber-soft); border: 2px solid var(--amber);
  font-family: var(--font-read); font-size: clamp(1.05rem, 2vw, 1.4rem); }
.ks-tipp::before { content: "💡 "; }
.ks-feld { min-height: 40vh; }
.ks-hilfen { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }

/* Karten an der Tafel: groß, Leseschrift, Bild über dem Wort */
.ks-karte { display: grid; place-items: center; gap: .4rem; min-height: calc(var(--tap) * 1.4); padding: .6rem 1rem; border: 3px solid var(--line);
  border-radius: var(--radius-s); background: var(--card); color: var(--ink); font: 700 clamp(1.1rem, 2.4vw, 1.8rem) var(--font-read);
  box-shadow: var(--shadow-1); cursor: pointer; text-align: center; transition: transform .1s, border-color .15s, background .15s; }
button.ks-karte:not(:disabled):hover { transform: translateY(-2px); border-color: var(--akzent); }
.ks-karte:disabled { cursor: default; }
.ks-karte .ks-bild { max-width: 100%; max-height: 22vh; border-radius: 8px; display: block; }
.ks-bild-fehlt { font-size: 2rem; }
.ks-karte.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); transform: scale(1.03); }
.ks-karte.ks-geloest { border-color: var(--green); background: var(--green-soft); opacity: 1; }
.ks-karte.ks-gross { font-size: clamp(1.4rem, 3.2vw, 2.4rem); min-width: min(320px, 80vw); min-height: 120px; }
.ks-karte.ks-klein { font-size: clamp(.95rem, 1.6vw, 1.2rem); min-height: 0; padding: .35rem .6rem; box-shadow: none; }
.ks-karte.ks-klein .ks-bild { max-height: 9vh; }
/* Gelöste Paare: dieselbe Farbe UND dieselbe Nummer — Farbe nie allein (Kunst Regel 5) */
.ks-paar-0 { --paar: var(--green); } .ks-paar-1 { --paar: var(--blue); } .ks-paar-2 { --paar: var(--purple); }
.ks-paar-3 { --paar: var(--amber); } .ks-paar-4 { --paar: var(--red); } .ks-paar-5 { --paar: var(--brand); }
.ks-zu .ks-geloest { border-color: var(--paar); background: color-mix(in srgb, var(--paar) 16%, var(--card)); }

.ks-zu { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 6vw, 5rem); }
.ks-zu-spalte { display: grid; gap: .7rem; align-content: start; }

.ks-so { display: grid; gap: 1.2rem; }
.ks-so-stapel { display: grid; justify-items: center; gap: .5rem; }
.ks-so-frage { font-family: var(--font-read); font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--ink-soft); }
.ks-so-rest { color: var(--ink-soft); }
.ks-so-gruppen { display: grid; grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr)); gap: 1rem; }
.ks-so-gruppe { display: grid; grid-template-rows: auto 1fr; border: 3px dashed var(--line); border-radius: var(--radius); background: var(--paper-2); min-height: 26vh; overflow: hidden; }
.ks-so-kopf { min-height: calc(var(--tap) * 1.3); border: none; border-bottom: 3px solid var(--line); background: var(--card); color: var(--ink);
  font: 800 clamp(1.1rem, 2.2vw, 1.6rem) var(--font-read); cursor: pointer; }
.ks-so-kopf:not(:disabled):hover { background: color-mix(in srgb, var(--akzent) 12%, var(--card)); }
.ks-so-ablage { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem; align-content: start; }

.ks-qu { display: grid; justify-items: center; gap: 1rem; }
.ks-qu-bild .ks-bild { max-height: 38vh; max-width: min(100%, 720px); border-radius: var(--radius-s); box-shadow: var(--shadow-2); }
.ks-qu-frage { margin: 0; text-align: center; font: 700 clamp(1.2rem, 2.6vw, 2rem) var(--font-read); }
.ks-qu-antworten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .8rem; width: min(100%, 1000px); }
.ks-qu-stand { margin: 0; color: var(--ink-soft); }

.ks-rf { display: grid; gap: 1.4rem; }
.ks-rf-reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .7rem; }
.ks-rf-platz { display: grid; grid-template-rows: auto 1fr; gap: .3rem; min-height: 110px; padding: .4rem; border: 3px dashed var(--line); border-radius: var(--radius-s); }
.ks-rf-platz.ks-dran { border-color: var(--akzent); }
.ks-rf-platz.ks-belegt { border-style: solid; border-color: var(--green); }
.ks-rf-nr { font-weight: 800; color: var(--ink-soft); }
.ks-rf-stapel { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

/* Rückmeldung */
.ks-wackeln { animation: ks-wackeln .4s; border-color: var(--red); }
@keyframes ks-wackeln { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.ks-blitz { animation: ks-blitz .6s; }
@keyframes ks-blitz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }

/* Geschafft */
.ks-geschafft { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 35%, transparent); overflow: hidden; }
.ks-geschafft-karte { position: relative; z-index: 1; text-align: center; padding: 1.6rem 2rem; max-width: min(92vw, 520px);
  background: var(--card); border: 3px solid var(--akzent); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.ks-geschafft-karte h2 { font-size: 2rem; margin: .3rem 0; }
.ks-geschafft-karte p { font-family: var(--font-read); font-size: 1.2rem; }
.ks-geschafft-karte .ks-knoepfe { justify-content: center; }
.ks-sterne { font-size: 2.6rem; letter-spacing: .2em; }
.ks-konfetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 16px; border-radius: 3px;
  background: hsl(calc(var(--i) * 47) 80% 58%); animation: ks-fallen 2.4s calc(var(--i) * 45ms) ease-in forwards; }
@keyframes ks-fallen { to { transform: translateY(110vh) rotate(540deg); } }

@media (prefers-reduced-motion: reduce) {
  .ks-wackeln, .ks-blitz, .ks-konfetti i { animation: none; }
  .ks-konfetti { display: none; }
  .btn, .ks-karte { transition: none; }
}
@media (max-width: 560px) {
  /* Der Bereichsumschalter bekommt eine eigene Zeile über die volle Breite. */
  .mode-switch { order: 3; width: 100%; }
  .mode-switch button { flex: 1; justify-content: center; padding: .5em .3em; font-size: .85rem; }
  .ks-zu { gap: .6rem; }
  .ks-so-gruppen { grid-template-columns: 1fr 1fr; }
  .brand-name small { display: none; }
}
@media (max-width: 400px) {
  .mode-switch button > span { display: none; }
}

/* --- Arbeitsblätter (AP P.5c) ------------------------------------------ */
.ks-blatt-wahl[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--card)); }
.ks-reihe { margin-top: 1rem; }
.ks-reihe h3 { font-size: 1rem; margin-bottom: .4rem; }
.ks-reihe ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; counter-reset: reihe; }
.ks-reihe li { display: flex; align-items: center; gap: .3rem; counter-increment: reihe; }
.ks-reihe li::before { content: counter(reihe) "."; font-weight: 800; color: var(--ink-soft); min-width: 1.4em; }
.ks-reihe li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-blatt-leiste, .ks-blatt-sicht { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; }
.ks-niveaus { display: flex; flex-wrap: wrap; gap: .4rem; }
.ks-niveau-knopf[aria-pressed="true"], .ks-blatt-sicht [aria-selected="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, var(--card)); }
.ks-schalter { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; font-weight: 700; cursor: pointer; }
.ks-schalter input { width: 22px; height: 22px; accent-color: var(--akzent); }
.ks-papier-rahmen { margin-top: 1rem; padding: clamp(.4rem, 2vw, 1.2rem); background: var(--paper-2); border-radius: var(--radius-s); overflow-x: auto; }

/* Das Papier: immer hell, wie gedruckt — auch im Nachtmodus. */
.ks-a4 { --p-ink: #1d1a16; --p-soft: #5c5346; --p-line: #8d8373; --p-loes: #c0262d;
  width: 100%; max-width: 210mm; margin: 0 auto; padding: 11mm 14mm 7mm; background: #fff; color: var(--p-ink); color-scheme: light;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); font: 12pt/1.4 var(--font-read); }
.ks-a4-leer { text-align: center; color: var(--p-soft); padding-block: 30mm; }
.ks-a4-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; flex-wrap: wrap; padding-bottom: 3mm; border-bottom: 2px solid var(--p-ink); margin-bottom: 4mm; }
.ks-a4-marke { display: flex; gap: 3mm; align-items: center; min-width: 0; }
.ks-a4-zeichen { font-size: 22pt; }
.ks-a4-titel { font: 700 17pt/1.2 var(--font-read); overflow-wrap: anywhere; }
.ks-a4-unter { font-size: 10pt; color: var(--p-soft); }
.ks-niveau { font-size: 12pt; letter-spacing: .1em; color: var(--p-ink); }
.ks-a4-name { font-size: 11pt; white-space: nowrap; display: flex; align-items: flex-end; gap: 2mm; flex-wrap: wrap; }
.ks-a4-name .ks-linie { min-width: 45mm; }
.ks-a4-name .ks-linie.ks-kurz { min-width: 25mm; }
.ks-a4-loesungsmarke { font: 700 13pt var(--font-read); color: var(--p-loes); border: 2px solid var(--p-loes); border-radius: 6px; padding: 1mm 4mm; }
.ks-a4-block { margin-bottom: 5mm; break-inside: avoid; }
.ks-a4-block-kopf { display: flex; align-items: center; gap: 2.5mm; font: 700 13.5pt/1.25 var(--font-read); margin-bottom: 1.5mm; }
.ks-a4-nr { display: inline-grid; place-items: center; width: 7mm; height: 7mm; border-radius: 50%; background: var(--p-ink); color: #fff; font-size: 11pt; flex: none; }
.ks-a4-auftrag { margin: 0 0 1mm; }
.ks-a4-anweisung { margin: 0 0 2mm; color: var(--p-soft); font-size: 11pt; }
.ks-a4-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1mm 4mm; margin-top: 4mm; padding-top: 2mm; border-top: 1px solid var(--p-line); font-size: 8.5pt; color: var(--p-soft); }
/* Der Lehrplanbezug eines Pakets (Mathe Z.7): eine eigene Zeile unter Name und Copyright. */
.ks-a4-bezug { order: 3; flex-basis: 100%; }

.ks-pk { display: inline-flex; flex-direction: column; align-items: center; gap: 1mm; vertical-align: middle; }
.ks-pk .ks-bild { max-width: 32mm; max-height: 24mm; object-fit: contain; border-radius: 2mm; }
.ks-pk .ks-bild-fehlt { font-size: 18pt; }
.ks-kasten { display: inline-grid; place-items: center; width: 7mm; height: 7mm; border: 1.5px solid var(--p-ink); border-radius: 1.5mm; flex: none; font-weight: 700; }
.ks-linie { display: inline-block; flex: 1; min-width: 40mm; min-height: 7mm; border-bottom: 1.5px solid var(--p-line); padding: 0 1mm; }
.ks-eintrag { color: var(--p-loes); font-weight: 700; }
.ks-vorgegeben { color: var(--p-soft); font-weight: 700; }
.ks-nr { font-weight: 700; min-width: 5mm; text-align: right; }
.ks-punkt { width: 3mm; height: 3mm; border-radius: 50%; background: var(--p-ink); flex: none; }

.ks-verbinden { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 28mm; }
.ks-verbinden ol, .ks-verbinden ul, .ks-zeilen, .ks-fragen, .ks-wahl, .ks-nummerieren { list-style: none; margin: 0; padding: 0; }
.ks-vb-links li, .ks-vb-rechts li { display: flex; align-items: center; gap: 3mm; min-height: 9.5mm; padding: .5mm 0; }
.ks-vb-links li .ks-pk { flex: 1; align-items: flex-end; text-align: right; }
.ks-vb-links li { justify-content: flex-end; }
.ks-zeilen { display: grid; gap: 2.5mm; }
.ks-figuren { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5mm 8mm; align-items: flex-start; }
.ks-figur-blatt { display: flex; align-items: flex-start; gap: 2mm; break-inside: avoid; }
.ks-figur-blatt .ks-bild { width: auto; height: auto; max-width: var(--fig-breite, 80mm); max-height: 70mm; }
.ks-figur-mit { display: grid; justify-items: center; gap: 1mm; }
/* Mathe Z.11a (`festeBreite`): ein langer Satz darunter macht die Figur nicht breiter als ihr Bild (sonst eine je Zeile) */
.ks-figuren-fest .ks-figur-mit { max-width: var(--fig-breite, 80mm); text-align: center; }
.ks-figur-unter { font-size: 14pt; font-weight: 700; }
/* Z.6b: eine Figur je Zeile, so breit wie das Blatt */
.ks-figuren-breit { flex-direction: column; flex-wrap: nowrap; gap: 4mm; }
.ks-figuren-breit .ks-figur-blatt { width: 100%; justify-content: center; }
.ks-figuren-breit .ks-figur-blatt .ks-bild { max-width: var(--fig-breite, 100%); max-height: 190mm; }
.ks-zeilen li { display: flex; align-items: flex-end; gap: 4mm; }
.ks-zeilen li > .ks-pk { min-width: 35mm; align-items: flex-start; }
.ks-zeilen-gross .ks-pk .ks-bild { max-width: 70mm; max-height: 45mm; }
.ks-speicher { border: 1.5px dashed var(--p-line); border-radius: 2mm; padding: 2mm 3mm; margin-bottom: 3mm; }
.ks-speicher-titel { display: block; font-size: 9pt; color: var(--p-soft); margin-bottom: 1mm; }
.ks-speicher-karten { display: flex; flex-wrap: wrap; gap: 2mm 6mm; }
.ks-fragen { display: grid; gap: 3mm; counter-reset: frage; }
.ks-frage { break-inside: avoid; }
.ks-frage-bild .ks-bild { max-width: 70mm; max-height: 50mm; object-fit: contain; display: block; margin-bottom: 1.5mm; }
.ks-frage-text { margin: 0 0 1.5mm; font-weight: 700; }
.ks-frage-linie { display: flex; }
.ks-wahl { display: flex; flex-wrap: wrap; gap: 2mm 9mm; }
.ks-wahl li, .ks-nummerieren li { display: flex; align-items: center; gap: 2.5mm; }
.ks-nummerieren { display: grid; grid-template-columns: repeat(auto-fill, minmax(55mm, 1fr)); gap: 3mm 6mm; }
.ks-tabelle { border-collapse: collapse; width: 100%; }
.ks-tabelle th, .ks-tabelle td { border: 1px solid var(--p-line); padding: 1mm 2mm; text-align: center; }
.ks-tabelle td .ks-kasten { vertical-align: middle; width: 6mm; height: 6mm; }
.ks-tabelle thead th { font-size: 11pt; }
.ks-tabelle tbody th { text-align: left; font-weight: 400; }
.ks-spalten { display: grid; grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr)); gap: 6mm; }
.ks-spalte { display: grid; gap: 2mm; align-content: start; }
.ks-spalte .ks-linie { min-width: 0; width: 100%; }
.ks-spalte-name { border-bottom: 2px solid var(--p-ink); padding-bottom: 1mm; }
.ks-frei { font-style: italic; font-weight: 400; text-align: right; }
.ks-frei:empty::after { content: "eigenes Beispiel"; font-size: 8pt; color: var(--p-soft); }

/* Gedruckt wird nur #ks-druck — die App selbst bleibt am Bildschirm. */
#ks-druck { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  body > *:not(#ks-druck) { display: none; }
  #ks-druck { display: block; }
  #ks-druck .ks-a4 { box-shadow: none; max-width: none; width: 210mm; min-height: 297mm; margin: 0; break-after: page; }
  #ks-druck .ks-a4:last-child { break-after: auto; }
  .ks-a4, .ks-a4 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Einstieg, Konto, Demo (AP P.5d) ------------------------------------ */
.ks-einstieg { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.ks-einstieg-karte { width: min(100%, 30rem); background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 4vw, 1.8rem); box-shadow: var(--shadow-2); }
.ks-einstieg-kopf { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.ks-einstieg-kopf h1 { font-size: 1.5rem; }
.ks-einstieg-kopf h1 small { display: block; font-size: .62rem; color: var(--ink-soft); letter-spacing: .14em; text-transform: uppercase; }
.ks-weg { display: grid; gap: .15rem; width: 100%; margin-top: .65rem; padding: .75rem 1rem; min-height: var(--tap); text-align: left; cursor: pointer;
  border: 2px solid var(--akzent); border-radius: var(--radius-s); background: var(--card); color: var(--ink); font: inherit; }
.ks-weg:hover { background: color-mix(in srgb, var(--akzent) 9%, var(--card)); }
.ks-weg b { font-size: 1.02rem; }
.ks-weg span { font-size: .85rem; color: var(--ink-soft); }
.ks-link { margin-top: .6rem; padding: 0; border: 0; background: none; color: var(--ink-soft); font: 700 .88rem var(--font-body); text-decoration: underline; cursor: pointer; }
.ks-leise { color: var(--ink-soft); }
.ks-fein { font-size: .82rem; color: var(--ink-soft); }
.ks-fein a, .ks-einstieg a { color: inherit; }
.ks-reiter { display: flex; gap: .4rem; margin: .8rem 0 .3rem; }
.ks-reiter [aria-selected="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, var(--card)); }
.ks-eingabe { display: grid; gap: .3rem; margin-top: .6rem; font-weight: 700; font-size: .9rem; color: var(--ink-soft); }
.ks-eingabe input { font: 1rem var(--font-body); color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 10px; padding: .5em .65em; min-height: 46px; width: 100%; min-width: 0; }
.ks-konto-form .btn.ks-breit { width: 100%; margin-top: .8rem; }
.ks-konto-hinweis { min-height: 1.2em; margin: .6rem 0 0; color: var(--red); font-size: .88rem; }
.ks-konto-hinweis.ks-leise { color: var(--ink-soft); }
.ks-konto-knopf[data-stand="warnung"], .ks-konto-knopf[data-stand="konflikt"] { border-color: var(--amber); }
.ks-konto-knopf[data-stand="demo"] { border-color: var(--purple); }
.ks-konto-huelle { position: relative; z-index: 80; }
.ks-konto-tafel { position: absolute; right: clamp(.6rem, 2vw, 1.2rem); top: .4rem; width: min(26rem, calc(100vw - 1.2rem)); max-height: calc(100dvh - 7rem); overflow: auto;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-2); }
.ks-konto-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.ks-konto-kopf h2 { font-size: 1.15rem; }
.ks-konto-tafel p { margin: .5rem 0; }
.ks-konflikte { margin-top: .8rem; padding: .7rem; border-radius: var(--radius-s); background: var(--amber-soft); }
.ks-konflikte h3 { font-size: 1rem; }
.ks-konflikte ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.ks-konflikte .ks-knoepfe { margin-top: .3rem; gap: .4rem; }
.ks-demo-leiste { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem 1rem; padding: .35rem 1rem;
  background: var(--purple-soft); border-bottom: 2px solid var(--purple); font-weight: 700; }

/* --- Fallseite (AP P.5e) ----------------------------------------------- */
/* Wie src/fall/fall.css: eine schmale Kopfzeile, die Übung, „Fall gelöst!“ mit Stempel. 320 px bis Tablet. */
.ks-fall { max-width: 1100px; margin: 0 auto; padding: 0 clamp(.6rem, 2.5vw, 1.4rem) 1rem; }
.ks-fall-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 0; border-bottom: 2px solid var(--line); margin-bottom: 1rem; }
.ks-fall-akte { font-weight: 700; color: var(--ink); text-decoration: none; min-height: var(--tap, 44px); display: inline-flex; align-items: center; padding: 0 .4rem; }
.ks-fall-akte:hover, .ks-fall-akte:focus-visible { text-decoration: underline; }
.ks-fall-name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 800; color: var(--akzent); overflow-wrap: anywhere; hyphens: auto; }
/* Seit dem Vollbild-Knopf stehen drei Knöpfe im Kopf: Auf dem Handy trennte der Name sonst mitten im Wort. */
@media (max-width: 26rem) { .ks-fall-name { font-size: .85rem; } .ks-fall-kopf { gap: .4rem; } }
/* Ganz schmal (wie .fall-marke der Wortarten-Fallseite): nur die Figur, kein in Silben zerhackter Name. */
@media (max-width: 22.4rem) { .ks-fall-titel { display: none; } .ks-fall-kopf { justify-content: space-between; } .ks-fall-name { flex: none; } }
.ks-fall-werkzeuge { display: flex; gap: .4rem; flex: none; }
.ks-fall-status, .ks-fall-geloest { max-width: 34rem; margin: 2rem auto; padding: 1.4rem 1.2rem; text-align: center;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); font-family: var(--font-read); }
.ks-fall-status-text { font-size: 1.2rem; line-height: 1.5; margin: 0 0 1rem; }
.ks-fall-status .ks-knoepfe, .ks-fall-geloest .ks-knoepfe { justify-content: center; }
.ks-fall-stoerung { font-size: .85rem; margin: 1rem 0 0; color: var(--ink-soft); }
.ks-fall-stoerung a { color: inherit; }
.ks-fall-knopf { text-decoration: none; }
.ks-fall-geloest { border-color: var(--green); margin-top: 1.5rem; }
.ks-fall-geloest p { font-size: 1.15rem; line-height: 1.45; margin: 0 0 .8rem; }
.ks-fall-geloest .ks-fall-geloest-titel { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--green); margin-bottom: .4rem; }
.ks-fall-geloest .ks-fall-abgabe { color: var(--ink-soft); font-size: 1rem; }
.ks-fall-geloest .ks-fall-rang-neu { font-weight: 800; font-size: 1.3rem; }
/* Derselbe Stempel wie im Stempelheft der Fallakte (E64). */
.ks-fall-geloest .ks-fall-stempel { display: grid; place-items: center; width: 6rem; aspect-ratio: 1; margin: 0 auto .8rem; border-radius: 50%;
  border: 4px double var(--green); color: var(--green); font-family: var(--font-display); font-weight: 800;
  font-size: 1.2rem; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-8deg);
  animation: ks-stempeln .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ks-stempeln { from { opacity: 0; transform: rotate(-8deg) scale(1.8); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ks-fall-stempel { animation: none; } }
/* Auf der Fallseite liest ein Kind: Leseschrift, das Feld ohne Mindesthöhe der Tafel. */
.ks-buehne-fall { font-family: var(--font-read); }
.ks-buehne-fall .ks-feld { min-height: 0; }
@media (max-width: 560px) {
  .ks-buehne-fall .ks-kopf { gap: .6rem; }
  .ks-buehne-fall .ks-stand { justify-items: start; }
}

/* --- Farbfelder (AP K.1) ----------------------------------------------- */
/* Die Fläche über dem Namen; Weiß bekommt seinen Rand vom Rahmen. Auf Papier druckt sie auch mit „Hintergrund aus“. */
.ks-farbfeld, .ks-pk-farbe { display: block; background: var(--farbe); border: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ks-farbfeld { width: clamp(3.2rem, 9vw, 5.5rem); aspect-ratio: 1; border-radius: 14px; }
.ks-karte.ks-gross .ks-farbfeld { width: clamp(4.5rem, 14vw, 8rem); }
.ks-klein .ks-farbfeld, .ks-so-ablage .ks-farbfeld { width: 1.6rem; border-radius: 6px; }
.ks-so-ablage .ks-karte.ks-klein:has(.ks-farbfeld) { display: inline-flex; gap: .35rem; }
.ks-pk-farbe { width: 13mm; height: 13mm; border-radius: 3mm; margin: 0 auto 1mm; border-color: #555; }
.ks-farbwahl-huelle { display: inline-flex; align-items: center; border-radius: var(--radius-s); border-left: 10px solid var(--farbe, transparent); }
.ks-farbwahl { min-height: var(--tap); max-width: 8.5rem; font: inherit; padding: 0 .4rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--card); color: var(--ink); }

/* --- Farbmischer (Kunst, AP K.2) ---------------------------------------- */
/* Töpfe antippen → Schale → „Mischen!“. Jede Farbe mit Namen (Kunst-Regel 5). */
.ks-fm-huelle { display: grid; justify-items: center; gap: .8rem; }
.ks-fm { display: grid; justify-items: center; gap: 1rem; width: min(100%, 1000px); }
.ks-fm-frage { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem;
  text-align: center; font: 700 clamp(1.2rem, 2.6vw, 2rem) var(--font-read); }
.ks-fm-klecks { display: inline-grid; justify-items: center; gap: .25rem; }
.ks-fm-frage .ks-fm-klecks, .ks-fm-drin .ks-fm-klecks { grid-auto-flow: column; align-items: center; }
.ks-fm-name { font: 700 1em var(--font-read); }
.ks-farbfeld.ks-fm-mini { width: clamp(1.6rem, 4vw, 2.4rem); border-radius: 8px; }
.ks-farbfeld.ks-fm-gross { width: clamp(4.5rem, 14vw, 8rem); border-radius: 50%; }
.ks-fm-toepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: .7rem; width: 100%; }
.ks-fm-topf { display: grid; place-items: center; min-height: calc(var(--tap) * 2); padding: .6rem; border: 3px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--ink); font: 700 clamp(1rem, 2vw, 1.4rem) var(--font-read); cursor: pointer; box-shadow: var(--shadow-1); }
.ks-fm-topf:not(:disabled):hover { border-color: var(--akzent); }
.ks-fm-topf.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); }
.ks-fm-topf:disabled { cursor: default; }
.ks-fm-topf:disabled:not(.ks-gewaehlt) { opacity: .55; }
.ks-fm-schale { display: grid; justify-items: center; gap: .5rem; min-height: 7rem; width: min(100%, 560px); padding: .8rem 1rem;
  border: 3px dashed var(--line); border-radius: 0 0 999px 999px / 0 0 60% 60%; background: var(--paper-2); }
.ks-fm-drin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font: 700 clamp(1.05rem, 2vw, 1.4rem) var(--font-read); }
.ks-fm-plus { color: var(--ink-soft); }
.ks-fm-fest { font-size: .8em; color: var(--ink-soft); font-weight: 400; }
.ks-fm-ergebnis { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; font: 700 clamp(1.1rem, 2.2vw, 1.6rem) var(--font-read); }
.ks-fm-hinweis { margin: 0; text-align: center; color: var(--ink-soft); font: 1.05rem var(--font-read); }
.ks-fm-mischen { min-height: calc(var(--tap) * 1.2); font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.ks-fm-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ks-fm-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; }
.ks-fm-chip .ks-fm-klecks { grid-auto-flow: column; align-items: center; }
.ks-fm-chip .ks-farbfeld.ks-fm-mini { width: 1.3rem; border-radius: 5px; }
.ks-fm-wahl { min-height: var(--tap); font: inherit; padding: 0 .4rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--card); color: var(--ink); max-width: 11rem; }
.ks-fm-gleich { font-weight: 700; }

/* --- Muster auf Farbfeldern (Kunst-Regel 5, zuschaltbar, AP K.2) -------- */
/* Ein Zeichen je Farbe (farben.js), groß in der Fläche; hell oder dunkel nach dem Ton. Druckt mit. */
.ks-muster-an .ks-farbfeld, .ks-muster-an .ks-pk-farbe { display: grid; place-items: center; container-type: inline-size; }
.ks-muster-an .ks-farbfeld::after, .ks-muster-an .ks-pk-farbe::after { content: attr(data-muster); color: var(--muster-farbe, #141414);
  font: 700 58cqi/1 system-ui, "Segoe UI Symbol", sans-serif; }

/* --- Blattarten „rechnung“ und „kreis“ (AP K.2) -------------------------- */
.ks-rechnungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4mm; }
.ks-rechnungen li { display: flex; flex-wrap: wrap; align-items: center; gap: 3mm; font-size: 12pt; }
.ks-rechnungen .ks-beispiel { opacity: .8; }
.ks-zeichen { font: 700 18pt var(--font-read); }
.ks-luecke { display: inline-flex; flex-direction: column; align-items: center; gap: 1mm; }
.ks-luecke-klecks { width: 13mm; height: 13mm; border-radius: 50%; border: 2px dashed var(--p-line); }
.ks-luecke .ks-linie { min-width: 24mm; }
.ks-pk.ks-eintrag .ks-pk-text { color: var(--p-loes); font-weight: 700; }
.ks-pk.ks-eintrag .ks-pk-farbe { outline: 2px solid var(--p-loes); outline-offset: 1mm; }
.ks-kreis-blatt { display: grid; justify-items: center; gap: 4mm; }
.ks-kreis { width: min(125mm, 100%); height: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ks-kreis-feld { stroke: #1d1a16; stroke-width: 1.2; }
.ks-kreis-wort { font: 700 11px var(--font-read); text-anchor: middle; }
.ks-kreis-hinweis { font: 400 7.5px var(--font-read); text-anchor: middle; }
.ks-kreis-klecks { stroke: #1d1a16; stroke-width: .8; }
.ks-kreis-linie { stroke: #8d8373; stroke-width: .8; }
.ks-vorschau { margin-top: .6rem; padding: .6rem .8rem; border-radius: var(--radius-s); background: var(--amber-soft, #fff4d6); color: var(--ink); }

/* --- Bild-Detektiv, Werke, „Bild aufdecken“ (AP K.3) --------------------- */
.ks-bd { display: grid; justify-items: center; gap: .8rem; width: min(100%, 1100px); margin-inline: auto; }
.ks-bd-auftraege { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ks-bd-chip { min-width: var(--tap); min-height: var(--tap); padding: 0 .7rem; border: 2px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: 700 1.05rem var(--font-read); cursor: pointer; }
.ks-bd-chip.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); }
.ks-bd-chip.ks-geloest { border-color: var(--green); color: var(--green); cursor: default; }
.ks-bd-rahmen { width: 100%; max-width: min(100%, calc(62vh * var(--verhaeltnis, 1.333))); border-radius: var(--radius-s); box-shadow: var(--shadow-2); overflow: hidden; }
.ks-bd-rahmen.ks-bd-lupe { max-width: 100%; max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
.ks-bd-bild { position: relative; display: block; width: 100%; cursor: crosshair; overflow: hidden; touch-action: manipulation; }
.ks-bd-lupe .ks-bd-bild { width: 200%; }
.ks-bd-bild > img, .ks-werk-bild { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.ks-bd-fund { position: absolute; border: 4px solid var(--green); border-radius: 10px; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.ks-bd-fund.ks-bd-neu { animation: ks-blitz .6s; }
.ks-bd-marke { position: absolute; left: -4px; bottom: 100%; margin-bottom: 2px; padding: .05rem .4rem; border-radius: 6px; white-space: nowrap;
  background: var(--green); color: #fff; font: 700 clamp(.8rem, 1.6vw, 1.05rem) var(--font-read); }
.ks-bd-suchbereich { position: absolute; border: 3px dashed #fff; border-radius: 8px; box-shadow: 0 0 0 200vmax rgba(20, 18, 15, .55); pointer-events: none; }
.ks-bd-tipp { position: absolute; transform: translate(-50%, -50%); color: var(--red, #c0392b); font: 900 clamp(1.4rem, 3vw, 2.2rem)/1 system-ui, sans-serif;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff; pointer-events: none; }
.ks-bd-hinweis { min-height: 1.4em; }
.ks-bd-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; }
.ks-bd-leiste .ks-an { border-color: var(--blue); background: var(--blue-soft); }
.ks-bd-vorschau { max-width: 420px; border-radius: var(--radius-s); cursor: default; margin-top: .5rem; }
.ks-werk-zeile { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; color: var(--ink-soft); font-size: .95rem; }
.ks-werk-info { width: min(100%, 560px); padding: .9rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--card);
  font: 1.1rem/1.5 var(--font-read); }
.ks-werk-info h3 { margin: 0 0 .2rem; }
.ks-werk-info p { margin: .3rem 0; }
.ks-werk-wer { color: var(--ink-soft); }
.ks-auf-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: .8rem; }
.ks-auf-werk { display: grid; gap: .3rem; justify-items: start; text-align: left; padding: .6rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.ks-auf-werk:hover { border-color: var(--akzent); }
.ks-auf-werk small { color: var(--ink-soft); }
.ks-auf-vorschau { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper); border-radius: 6px; }
.ks-auf-buehne { display: grid; gap: .8rem; justify-items: center; }
.ks-auf-buehne > .ks-kopf { width: 100%; }
.ks-auf-bild { position: relative; width: 100%; max-width: min(100%, calc(64vh * var(--verhaeltnis, 1.333))); border-radius: var(--radius-s); overflow: hidden; box-shadow: var(--shadow-2); }
.ks-auf-kacheln { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--spalten), 1fr); grid-template-rows: repeat(var(--zeilen), 1fr); }
.ks-auf-kachel { border: 2px solid var(--card); background: var(--akzent); color: #fff; font: 700 clamp(1rem, 3vw, 2rem) var(--font-read); cursor: pointer;
  background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%); }
.ks-auf-kachel:hover { filter: brightness(1.08); }
.ks-auf-kachel:focus-visible { outline: 4px solid var(--ink); outline-offset: -6px; }
.ks-auf-loch { pointer-events: none; }

/* Tafel-Werkzeug „Künstler-Steckbrief“ (K.8, kunst/src/tafel/steckbrief.js) */
.ks-st-wahl, .ks-st-karte { display: grid; gap: .9rem; }
.ks-st-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: .8rem; }
.ks-st-person { display: grid; gap: .3rem; justify-items: start; text-align: left; padding: .6rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.ks-st-person:hover { border-color: var(--akzent); }
.ks-st-person small { color: var(--ink-soft); }
.ks-st-vorschau { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper); border-radius: 6px; }
.ks-st-arten { display: flex; gap: .4rem; flex-wrap: wrap; }
.ks-st-arten .btn[aria-selected="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, var(--card)); }
.ks-st-reihe { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.ks-st-werke { flex: 1 1 360px; display: grid; gap: .8rem; min-width: 0; }
.ks-st-werk { margin: 0; display: grid; gap: .3rem; justify-items: center; }
.ks-st-bild { display: block; max-width: 100%; max-height: 52vh; width: auto; height: auto; border-radius: var(--radius-s); box-shadow: var(--shadow-2); }
.ks-st-text { flex: 1 1 320px; display: grid; gap: .6rem; align-content: start; font: 1.25rem/1.5 var(--font-read); min-width: 0; }
.ks-st-daten { margin: 0; display: grid; gap: .3rem; }
.ks-st-daten div { display: flex; gap: .6rem; }
.ks-st-daten dt { font-weight: 700; min-width: 4.5em; }
.ks-st-daten dd { margin: 0; }
.ks-st-typisch-kopf { font-size: 1.15rem; margin: .4rem 0 0; }
.ks-st-typisch { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; }
.ks-st-hinweise { margin: 0; padding-left: 1.6rem; display: grid; gap: .5rem; font: clamp(1.15rem, 2.2vw, 1.6rem)/1.45 var(--font-read); }
.ks-st-hinweise li:last-child { animation: ks-blitz .6s; border-radius: 8px; }

/* Tafel-Werkzeug „Galerie“ (K.11c, kunst/src/tafel/galerie.js) */
.ks-gal-wahl, .ks-gal-wand { display: grid; gap: .9rem; }
.ks-gal-fehler { padding: .8rem 1rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--card); font: 1.1rem/1.5 var(--font-read); }
.ks-gal-frist { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.ks-gal-gruppe[disabled] { opacity: .55; cursor: default; }
.ks-gal-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .9rem; }
.ks-gal-foto { display: grid; gap: .3rem; justify-items: start; align-content: start; text-align: left; padding: .6rem; border: 2px solid var(--line);
  border-radius: var(--radius-s); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
.ks-gal-foto:hover { border-color: var(--akzent); }
.ks-gal-foto b { font: 700 1.1rem/1.3 var(--font-read); overflow-wrap: anywhere; }
.ks-gal-name { color: var(--ink-soft); }
.ks-gal-vorschau { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper); border-radius: 6px; }
.ks-gal-platz { display: grid; place-items: center; color: var(--ink-soft); }
.ks-gal-buehne { display: grid; gap: .8rem; justify-items: center; outline: none; }
.ks-gal-buehne > .ks-kopf { width: 100%; }
.ks-gal-gross { margin: 0; width: 100%; display: grid; justify-items: center; }
.ks-gal-bild { display: block; max-width: 100%; max-height: 68vh; width: auto; height: auto; border-radius: var(--radius-s); box-shadow: var(--shadow-2); }
.ks-gal-bild.ks-gal-platz { width: min(100%, 640px); aspect-ratio: 4 / 3; height: auto; background: var(--paper); }
.ks-gal-stand { align-self: center; font: 700 1.1rem var(--font-read); }

/* Blattart „suchbild“ (K.3) */
.ks-suchbild-blatt { display: grid; gap: 4mm; }
.ks-sb-bild { position: relative; justify-self: center; width: min(165mm, 100%); }
.ks-sb-bild .ks-bild { display: block; width: 100%; height: auto; border-radius: 2mm; }
.ks-sb-marke { position: absolute; border: 2.5px solid var(--p-loes); border-radius: 50%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ks-sb-marke.ks-vorgegeben { border-color: #1d1a16; border-style: dashed; }
.ks-sb-nr { position: absolute; right: -3mm; top: -3mm; min-width: 6mm; height: 6mm; display: grid; place-items: center; border-radius: 50%;
  background: #fff; border: 1.5px solid currentColor; font: 700 9pt var(--font-read); color: var(--p-loes); }
.ks-sb-marke.ks-vorgegeben .ks-sb-nr { color: #1d1a16; }
.ks-sb-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(45mm, 1fr)); gap: 2.5mm 6mm; font-size: 13pt; }
.ks-sb-liste li { display: flex; align-items: center; gap: 2.5mm; }
.ks-sb-text { font-family: var(--font-read); }
.ks-sb-frei { display: grid; gap: 4mm; }
.ks-sb-frei-frage { margin: 0; font-weight: 700; }
.ks-bd-werkwahl { max-width: 100%; }
.ks-bd-vorschau .ks-bd-fund { border-width: 2px; border-radius: 6px; }
.ks-bd-vorschau .ks-bd-marke { bottom: auto; margin: 0; left: -.5rem; top: -.6rem; padding: 0 .3rem; font-size: .75rem; }

/* --- Raster-Baustein: Rasterbild, Spiegelbild (AP K.4) ------------------ */
.ks-ra { display: grid; justify-items: center; gap: .8rem; width: min(100%, 1100px); margin-inline: auto; }
.ks-ra-auftrag { margin: 0; text-align: center; font: 700 clamp(1.1rem, 2.4vw, 1.5rem) var(--font-read); }
.ks-ra-ein-pinsel { margin: 0; font: 700 1.05rem var(--font-read); color: var(--ink-soft); }
.ks-ra-pinsel { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ks-ra-pin { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: .2rem .7rem; border: 2px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--ink); font: 700 1.05rem var(--font-read); cursor: pointer; }
.ks-ra-pin.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px var(--blue); }
.ks-ra-pin.ks-geloest { border-color: var(--green); color: var(--green); cursor: default; opacity: .75; }
.ks-ra-pin-nr { min-width: 1.6em; text-align: center; font-size: 1.15em; }
.ks-farbfeld.ks-ra-klecks { width: 1.7rem; border-radius: 6px; }
.ks-ra-rahmen { position: relative; width: min(100%, calc(56vh * var(--spalten) / var(--zeilen)), calc(var(--spalten) * 3.6rem)); }
.ks-ra-gitter { display: grid; grid-template-columns: repeat(var(--spalten), 1fr); border: 2px solid var(--ink); background: #fff;
  container-type: inline-size; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ks-ra-zelle { aspect-ratio: 1; min-width: 0; margin: 0; padding: 0; display: grid; place-items: center; border: 0; border-right: 1px solid #b9b0a2;
  border-bottom: 1px solid #b9b0a2; background: #fff; color: #3a342c; font: 700 1rem/1 var(--font-read); }
.ks-ra-zelle { font-size: clamp(.55rem, calc(60cqi / var(--spalten)), 1.4rem); }
button.ks-ra-zelle { cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { button.ks-ra-zelle:not(.ks-ra-voll):hover { background: #dfe8ff; } }
.ks-ra-zelle.ks-ra-voll { background: var(--farbe); }
.ks-muster-an .ks-ra-zelle.ks-ra-voll::after { content: attr(data-muster); color: var(--muster-farbe, #141414); font: 700 1em/1 system-ui, "Segoe UI Symbol", sans-serif; }
.ks-ra-zelle.ks-ra-hilfe { outline: 4px solid var(--amber, #e8a10c); outline-offset: -4px; animation: ks-ra-puls 1.2s ease-in-out infinite; }
@keyframes ks-ra-puls { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .ks-ra-zelle.ks-ra-hilfe { animation: none; } }
.ks-ra-achse { position: absolute; background: var(--red, #c0392b); pointer-events: none; border-radius: 3px; }
.ks-ra-senkrecht { left: 50%; top: -10px; bottom: -10px; width: 5px; transform: translateX(-50%); }
.ks-ra-waagerecht { top: 50%; left: -10px; right: -10px; height: 5px; transform: translateY(-50%); }
.ks-ra-editor { display: grid; gap: .7rem; }
.ks-ra-ed-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ks-ra-ed-feld { display: inline-flex; align-items: center; gap: .3rem; }
.ks-ra-ed-weg { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.ks-ra-ed-gitter { justify-self: start; width: min(100%, calc(var(--spalten) * 2.4rem)); }
.ks-ra-radierer { font-weight: 400; }

/* Blattart „raster“ (K.4): Kästchenpapier mit Legende */
.ks-raster-blatt { display: grid; justify-items: center; gap: 5mm; }
.ks-rb-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5mm 7mm; font-size: 13pt; }
.ks-rb-legende li { display: flex; align-items: center; gap: 2mm; }
.ks-rb-legende .ks-pk-farbe { width: 8mm; height: 8mm; border-radius: 1.5mm; }
.ks-rb-code { min-width: 6mm; text-align: center; font: 700 14pt var(--font-read); }
.ks-rb-rahmen { position: relative; }
.ks-rb-gitter { display: grid; grid-template-columns: repeat(var(--spalten), var(--zelle)); border: .6mm solid #1d1a16; }
.ks-rb-zelle { position: relative; width: var(--zelle); height: var(--zelle); display: grid; place-items: center; box-sizing: border-box;
  border-right: .25mm solid #8d8373; border-bottom: .25mm solid #8d8373; font: 700 calc(var(--zelle) * .5)/1 var(--font-read); color: #3a342c;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ks-rb-zelle.ks-rb-voll { background: var(--farbe); color: var(--muster-farbe); }
.ks-muster-an .ks-rb-zelle.ks-rb-voll:empty::after { content: attr(data-muster); font: 700 calc(var(--zelle) * .55)/1 system-ui, "Segoe UI Symbol", sans-serif; }
.ks-rb-punkt { width: 1.6mm; height: 1.6mm; border-radius: 50%; background: #1d1a16; }
.ks-rb-achse { position: absolute; background: #1d1a16; }
.ks-rb-senkrecht { left: 50%; top: -3mm; bottom: -3mm; width: 1.2mm; transform: translateX(-50%); }
.ks-rb-waagerecht { top: 50%; left: -3mm; right: -3mm; height: 1.2mm; transform: translateY(-50%); }

/* --- Muster fortsetzen (AP K.4) --------------------------------------- */
.ks-form { display: block; width: 100%; height: auto; overflow: visible; }
.ks-form-muster { display: none; font: 700 34px/1 system-ui, "Segoe UI Symbol", sans-serif; text-anchor: middle; }
.ks-muster-an .ks-form-muster { display: inline; }
.ks-mu { display: grid; justify-items: center; gap: .9rem; width: min(100%, 1100px); margin-inline: auto; }
.ks-mu-block { width: 100%; box-sizing: border-box; display: grid; justify-items: center; gap: .5rem; padding: .6rem; border: 2px solid transparent; border-radius: var(--radius-s); }
.ks-mu-block.ks-gewaehlt { border-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 45%, transparent); }
.ks-mu-block.ks-geloest { opacity: .8; }
.ks-mu-kopf { justify-self: start; min-height: 2.4rem; padding: .1rem .8rem; border: 2px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--ink); font: 700 1rem var(--font-read); cursor: pointer; }
.ks-mu-kopf:disabled { cursor: default; }
.ks-mu-block.ks-geloest .ks-mu-kopf { border-color: var(--green); color: var(--green); }
.ks-mu-reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.ks-mu-feld { width: clamp(2.4rem, 7vw, 4rem); aspect-ratio: 1; display: grid; place-items: center; padding: .25rem; box-sizing: border-box;
  border-radius: 10px; background: #fff; border: 2px solid #d9d1c3; }
.ks-mu-feld.ks-mu-frei { border-style: dashed; border-color: #9a907f; }
.ks-mu-feld.ks-mu-ab { margin-left: .6rem; }
.ks-mu-leer { width: 40%; height: 40%; }
.ks-mu-bausteine { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.ks-mu-baustein { display: grid; justify-items: center; gap: .2rem; min-width: 5.5rem; padding: .5rem .6rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--ink); font: 700 1rem var(--font-read); cursor: pointer; }
.ks-mu-baustein .ks-form { width: clamp(2.6rem, 7vw, 3.6rem); }
.ks-mu-baustein.ks-ra-hilfe { outline: 4px solid var(--amber, #e8a10c); outline-offset: 2px; animation: ks-ra-puls 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ks-mu-baustein.ks-ra-hilfe { animation: none; } }
.ks-mu-ed { display: grid; gap: .5rem; }
.ks-mu-ed-einheit { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ks-mu-ed-baustein { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 10px; }
.ks-form.ks-mu-mini { width: 1.8rem; }
.ks-mu-vorschau .ks-mu-feld { width: 2rem; padding: .15rem; }

/* Blattart „muster“ (K.4) */
.ks-muster-blatt { display: grid; gap: 6mm; }
.ks-mb-reihen { list-style: none; margin: 0; padding: 0; display: grid; gap: 5mm; }
.ks-mb-reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5mm; }
.ks-mb-feld { display: grid; justify-items: center; gap: .5mm; width: 14mm; }
.ks-mb-kasten { width: 14mm; height: 14mm; box-sizing: border-box; padding: 1.5mm; border: .3mm solid #8d8373; border-radius: 1.5mm; display: block; }
.ks-mb-form { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ks-mb-wort { min-height: 3.2mm; font: 400 7pt/1 var(--font-read); color: #4a443b; }
.ks-mb-feld.ks-eintrag .ks-mb-kasten { border-color: var(--p-loes); border-width: .5mm; }
.ks-mb-frei { display: grid; gap: 2mm; }

/* --- Meinung (Kern), Bild beschreiben, Reflexion (AP K.5) -------------- */
.ks-me, .ks-me-huelle { display: grid; justify-items: center; gap: .8rem; width: min(100%, 900px); margin-inline: auto; }
.ks-me-kein-falsch { margin: 0; color: var(--ink-soft); font: italic 1rem var(--font-read); text-align: center; }
.ks-me-antworten { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; width: 100%; }
.ks-me-zeile { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto; align-items: center; gap: .6rem; }
.ks-me-wahl, .ks-me-karte { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); padding: .3rem .9rem; border: 2px solid var(--line);
  border-radius: var(--radius-s); background: var(--card); color: var(--ink); font: 700 1.15rem var(--font-read); cursor: pointer; }
.ks-me-zeichen { font-size: 1.6em; line-height: 1; }
.ks-me-striche { font: 700 1.3rem/1 monospace; letter-spacing: .1em; color: var(--blue); overflow: hidden; white-space: nowrap; }
.ks-me-balken { position: relative; height: 2rem; border-radius: 6px; background: color-mix(in srgb, var(--line) 50%, transparent); overflow: hidden; }
.ks-me-balken::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--anteil) * 100%); background: var(--blue); border-radius: 6px; }
.ks-me-balken b { position: relative; padding-left: .5rem; line-height: 2rem; color: var(--ink); text-shadow: 0 0 3px var(--card); }
.ks-me-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; }
.ks-me-karten { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.ks-me-karte { flex-direction: column; min-width: 7rem; padding: .7rem 1rem; }
.ks-me-karte .ks-me-zeichen { font-size: 2.6rem; }
.ks-me-karte.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px var(--blue); }
@media (max-width: 560px) { .ks-me-zeile { grid-template-columns: 1fr; } }
.ks-sf { display: grid; gap: .5rem; width: min(100%, 760px); }
.ks-sf-anfang { margin: 0; font: 700 clamp(1.1rem, 2.4vw, 1.4rem) var(--font-read); }
.ks-sf-feld { width: 100%; box-sizing: border-box; min-height: 5.5rem; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: #fff; color: #1d1a16; font: 1.25rem/1.5 var(--font-read); resize: vertical; }
.ks-sf-woerter, .ks-be-speicher { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.ks-sf-titel { color: var(--ink-soft); font-weight: 700; }
.ks-sf-wort { min-height: 2.6rem; padding: .2rem .8rem; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink);
  font: 700 1.05rem var(--font-read); cursor: pointer; }
.ks-sf-wort.ks-ra-hilfe { outline: 4px solid var(--amber, #e8a10c); outline-offset: 2px; animation: ks-ra-puls 1.2s ease-in-out infinite; }
.ks-sf-hinweis { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.ks-sf-fertig { justify-self: end; }
.ks-be { display: grid; justify-items: center; gap: .8rem; width: min(100%, 900px); margin-inline: auto; }
.ks-be-bild { margin: 0; display: grid; gap: .3rem; width: min(100%, 640px); }
.ks-be-bild .ks-werk-bild { max-height: 44vh; width: auto; max-width: 100%; justify-self: center; border-radius: var(--radius-s); }
.ks-be-saetze { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; width: 100%; }
.ks-be-satz { display: flex; align-items: center; gap: .4rem; }
.ks-be-satzknopf { flex: 1; text-align: left; min-height: var(--tap); padding: .3rem .8rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--ink); font: 700 1.15rem var(--font-read); cursor: pointer; }
.ks-be-satz.ks-gewaehlt .ks-be-satzknopf { border-color: var(--blue); background: var(--blue-soft); }
.ks-be-satz.ks-geloest .ks-be-satzknopf { border-color: var(--green); color: var(--green); cursor: default; }
.ks-be-luecke { color: var(--ink-soft); letter-spacing: .05em; }
.ks-be-ed { flex-wrap: wrap; }
.ks-rx { display: grid; justify-items: center; gap: .8rem; width: min(100%, 860px); margin-inline: auto; }
.ks-rx-fertig { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; width: 100%; color: var(--green); font: 700 1.05rem var(--font-read); }
.ks-rx-frage { display: grid; justify-items: center; gap: .7rem; width: 100%; }
.ks-rx-smileys { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.ks-rx-smiley { display: grid; justify-items: center; gap: .2rem; min-width: 6.5rem; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--ink); font: 700 1.05rem var(--font-read); cursor: pointer; }
.ks-rx-gesicht { font-size: 2.8rem; line-height: 1; }
.ks-rx-woerter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* Blattarten „saetze“ und „reflexion“ (K.5) */
.ks-saetze-blatt { display: grid; gap: 4mm; }
.ks-sz-bild { justify-self: center; width: min(110mm, 100%); }
.ks-sz-bild .ks-bild { display: block; width: 100%; height: auto; max-height: 85mm; object-fit: contain; border-radius: 2mm; }
.ks-sz-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4mm; font-size: 13pt; }
.ks-sz-zeilen li { display: grid; gap: 2mm; }
.ks-sz-zeilen .ks-beispiel { opacity: .8; }
.ks-sz-anfang { margin: 0; font: 700 13pt var(--font-read); }
.ks-sz-linien { display: grid; gap: 3mm; }
.ks-rb-fragen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6mm; }
.ks-rb-frage { display: grid; gap: 2.5mm; }
.ks-rb-smileys, .ks-rb-woerter { display: flex; flex-wrap: wrap; gap: 5mm; }
.ks-rb-smiley { display: grid; justify-items: center; gap: 1mm; min-width: 20mm; }
.ks-rb-gesicht { font-size: 26pt; line-height: 1; }
.ks-rb-smiley-wort { font: 400 9pt var(--font-read); }
.ks-rb-wort { padding: 1mm 3mm; border: .3mm solid #8d8373; border-radius: 3mm; font: 400 12pt var(--font-read); }

/* Bildkarten (K.6): Piktogramme sind gezeichnet für hellen Grund — auch im dunklen Design auf hellem Feld */
.ks-bild[src^="data:image/svg+xml"] { background: #fffdf8; padding: 4px; box-sizing: border-box; }

/* Ablaufplan (K.6) */
.ks-ab { display: grid; gap: .8rem; width: 100%; }
.ks-ab-material { display: grid; justify-items: center; gap: .4rem; width: 100%; }
.ks-ab-dinge { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ks-ab-ding { min-height: 0; padding: .35rem .6rem; font-size: clamp(.9rem, 1.6vw, 1.15rem); cursor: default; }
.ks-ab-ding .ks-bild { max-height: min(9vh, 70px); }
.ks-ab-leiste-knopf { display: flex; justify-content: center; }
.ks-rf-reihe .ks-karte .ks-bild, .ks-rf-stapel .ks-karte .ks-bild { max-height: min(14vh, 110px); }
.ks-ab-ed-titel { margin: .8rem 0 .3rem; font: 700 1.05rem var(--font-body); }
.ks-ab-ed-zeile, .ks-ab-ed-material .ks-ed-zeile { flex-wrap: wrap; }
.ks-ab-pikto { font: 1rem var(--font-body); color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 10px; min-height: 46px; padding: 0 .4rem; max-width: 12rem; }
.ks-ab-min { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-soft); font-weight: 700; }
.ks-ab-min input { width: 4.2rem; font: 1rem var(--font-body); color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 10px; min-height: 46px; padding: 0 .4rem; }
.ks-ab-aufraeumen { margin-top: .8rem; }

/* Schrittleiste (K.6): liegt über allem, solange die Klasse arbeitet */
/* Eine Spalte, in der nichts schrumpft (die Leiste scrollt waagerecht und würde sonst gestaucht); die Mitte füllt den Rest. */
.ks-sl { position: fixed; inset: 0; z-index: 210; display: flex; flex-direction: column; gap: clamp(.3rem, 1.2vh, 1rem);
  padding: clamp(.6rem, 2vw, 1.4rem); background: var(--paper); color: var(--ink); overflow: auto; font-family: var(--font-read); }
.ks-sl > * { flex: none; }
.ks-sl > .ks-sl-mitte { flex: 1 0 auto; }
.ks-sl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.ks-sl-titel { margin: 0; font: 700 clamp(1.1rem, 2.2vw, 1.6rem) var(--font-display); flex: 1 1 12rem; }
.ks-sl-material { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ks-sl-material-titel { font-weight: 700; color: var(--ink-soft); }
.ks-sl-ding { display: grid; justify-items: center; gap: .1rem; padding: .25rem .45rem; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-s); font: 700 .9rem var(--font-read); }
.ks-sl-ding .ks-bild { width: clamp(34px, 5vw, 56px); height: clamp(34px, 5vw, 56px); object-fit: contain; border-radius: 6px; }
.ks-sl-leiste { list-style: none; margin: 0; padding: 0 0 .2rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.5rem, 1fr); gap: .45rem; overflow-x: auto; overflow-y: hidden; }
.ks-sl-schritt-knopf { width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: .2rem; padding: .35rem; border: 3px solid var(--line);
  border-radius: var(--radius-s); background: var(--card); color: var(--ink); font: 700 clamp(.8rem, 1.3vw, 1rem) var(--font-read); cursor: pointer; }
.ks-sl-klein { display: grid; justify-items: center; gap: .1rem; }
.ks-sl-klein .ks-bild { width: clamp(36px, min(6vw, 7vh), 72px); height: clamp(36px, min(6vw, 7vh), 72px); object-fit: contain; border-radius: 6px; }
.ks-sl-klein .ks-karte-text { font-size: inherit; text-align: center; }
.ks-sl-nr { display: grid; place-items: center; min-width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--paper-2); }
.ks-sl-min { font-size: .8em; color: var(--ink-soft); }
.ks-sl-erledigt .ks-sl-schritt-knopf { opacity: .55; border-color: var(--green); }
.ks-sl-erledigt .ks-sl-nr { background: var(--green); color: #fff; }
.ks-sl-dran .ks-sl-schritt-knopf { border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 30%, transparent); }
.ks-sl-dran .ks-sl-nr { background: var(--akzent); color: #fff; }
/* Kein min-height: 0 — sonst schiebt sich die Uhr bei wenig Höhe unter die Knöpfe; lieber scrollt die Leiste. */
.ks-sl-mitte { display: grid; justify-items: center; align-content: center; gap: clamp(.3rem, 1.2vh, .8rem); text-align: center; }
.ks-sl-wieviel { margin: 0; font-weight: 700; color: var(--ink-soft); font-size: clamp(1rem, 1.8vw, 1.3rem); }
.ks-sl-gross { display: grid; place-items: center; }
.ks-sl-gross .ks-bild { width: clamp(90px, 20vh, 300px); height: clamp(90px, 20vh, 300px); object-fit: contain; border-radius: var(--radius); }
.ks-sl-gross:not(:has(.ks-bild)) { font-size: clamp(4rem, 18vh, 11rem); line-height: 1; }
.ks-sl-gross .ks-karte-text { display: none; }
.ks-sl-wort { margin: 0; font: 700 clamp(1.6rem, min(5.5vw, 7vh), 4rem)/1.1 var(--font-read); display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; }
/* Balken über die ganze Breite, darunter Zeit und Knöpfe in EINER Zeile — sonst passt die Leiste nicht in 1280 × 800. */
.ks-sl-uhr { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .9rem; width: min(100%, 34rem); }
.ks-sl-uhr > .ks-sl-zeit { flex: 1 0 100%; }
.ks-sl-zeit { width: 100%; height: 18px; border-radius: 9px; background: var(--paper-2); border: 2px solid var(--line); overflow: hidden; }
.ks-sl-zeit span { display: block; height: 100%; width: calc(var(--anteil) * 100%); background: var(--blue); transition: width .25s linear; }
.ks-sl-zeittext { font: 700 clamp(1.8rem, min(6vw, 7.5vh), 4.2rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ks-sl-uhrknoepfe { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.ks-sl-um .ks-sl-zeittext { color: var(--red); animation: ks-sl-blinken 1s ease-in-out infinite alternate; font-size: clamp(1.6rem, 4.5vw, 3rem); }
.ks-sl-um .ks-sl-zeit { border-color: var(--red); }
@keyframes ks-sl-blinken { from { opacity: 1; } to { opacity: .45; } }
.ks-sl-aufraeumen .ks-sl-wort { color: var(--akzent); }
.ks-sl-aufraeumen, .ks-sl-fertig { animation: ks-sl-auf .4s ease-out; }
@keyframes ks-sl-auf { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
/* Klebt unten: Auch auf einer niedrigen Tafel (1024 × 600) bleiben Weiter und Aufräumen ohne Scrollen erreichbar. */
.ks-sl-knoepfe { position: sticky; bottom: calc(-1 * clamp(.6rem, 2vw, 1.4rem)); display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  padding: .5rem 0 clamp(.6rem, 2vw, 1.4rem); background: var(--paper); }
.ks-sl-knoepfe .btn { min-height: calc(var(--tap) * 1.15); font-size: clamp(1rem, 1.8vw, 1.3rem); padding-inline: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .ks-sl-um .ks-sl-zeittext, .ks-sl-aufraeumen, .ks-sl-fertig { animation: none; } .ks-sl-zeit span { transition: none; } }

/* Blattart „ablauf“ (K.6): Ablaufkarte zum Abhaken mit Materialliste */
.ks-ablauf-blatt { display: grid; gap: 5mm; }
.ks-ab-mat { display: grid; gap: 2mm; padding: 3mm; border: .4mm solid #8d8373; border-radius: 3mm; }
.ks-ab-mat-titel { font: 700 13pt var(--font-read); }
.ks-ab-mat-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(36mm, 1fr)); gap: 3mm; }
.ks-ab-mat-liste li, .ks-ab-schritte li { display: flex; align-items: center; gap: 3mm; }
.ks-ab-mat-liste .ks-bild { max-width: 18mm; max-height: 18mm; }
.ks-ab-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 3mm; font-size: 14pt; }
.ks-ab-schritte li { padding: 2mm 3mm; border: .4mm solid #8d8373; border-radius: 3mm; break-inside: avoid; }
.ks-ab-schritte .ks-pk { flex-direction: row; gap: 4mm; }
.ks-ab-schritte .ks-bild { max-width: 24mm; max-height: 22mm; }
.ks-ab-schritte .ks-pk-text { font: 700 14pt var(--font-read); }
.ks-ab-haken { flex: none; }
.ks-ab-zeit { margin-left: auto; font-size: 11pt; color: #5d5446; }
.ks-a4 .ks-bild[src^="data:image/svg+xml"] { padding: 0; background: none; }

/* Formen-Collage (K.8): Fläche mit Kästchen, Formen im Raster (grid-column/-row aus stueckOrt) */
.ks-co { display: grid; gap: .8rem; }
.ks-co-auftrag { margin: 0; font-size: 1.15rem; }
.ks-co-reihe { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.ks-co-links { flex: 3 1 420px; min-width: 0; }
.ks-co-rechts { flex: 1 1 240px; min-width: 0; display: grid; gap: .8rem; align-content: start; }
.ks-co-flaeche { position: relative; display: grid; grid-template-columns: repeat(var(--b), 1fr); grid-template-rows: repeat(var(--h), 1fr);
  aspect-ratio: var(--b) / var(--h); width: 100%; background-color: #fffdf8; border: 2px solid var(--line); border-radius: var(--radius-s);
  background-image: linear-gradient(to right, #e6dfd2 1px, transparent 1px), linear-gradient(to bottom, #e6dfd2 1px, transparent 1px);
  background-size: calc(100% / var(--b)) calc(100% / var(--h)); }
.ks-co-zelle { margin: 0; padding: 0; border: 0; background: transparent; cursor: default; min-width: 0; min-height: 0; }
.ks-co-hand .ks-co-zelle { cursor: pointer; }
.ks-co-hand .ks-co-zelle:hover { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.ks-co-stueck { position: relative; z-index: 1; margin: 0; padding: 0; border: 0; background: transparent; min-width: 0; min-height: 0; cursor: pointer; }
.ks-co-hand .ks-co-stueck, .ks-co-fest, .ks-co-umriss { pointer-events: none; }
.ks-co-stueck.ks-gewaehlt { outline: 3px dashed var(--blue); outline-offset: 2px; border-radius: 6px; z-index: 2; }
.ks-co-fest { z-index: 0; }
.ks-co-umriss { z-index: 0; opacity: .85; }
.ks-co-form { display: block; width: 100%; height: 100%; overflow: visible; }
.ks-co-bild .ks-co-stueck { display: block; }
.ks-co-vorlage { margin: 0; display: grid; gap: .3rem; }
.ks-co-vorlage figcaption { font-weight: 800; color: var(--ink-soft); font-size: .9rem; }
.ks-co-vorrat { display: flex; flex-wrap: wrap; gap: .5rem; }
.ks-co-vorrat-knopf { width: 64px; height: 64px; padding: 6px; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--card); cursor: pointer; }
.ks-co-vorrat-knopf.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px var(--blue); }
.ks-co-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem; border-radius: var(--radius-s); background: var(--paper-2); }
.ks-co-hand-name { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; width: 100%; }
.ks-co-mini { width: 1.8rem; height: 1.8rem; flex: none; }
.ks-co-hinweis { margin: 0; color: var(--ink-soft); }
.ks-co-groesse { font-weight: 700; min-width: 4.5em; text-align: center; }
.ks-co-farben { display: flex; flex-wrap: wrap; gap: .4rem; }
.ks-co-farbe { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; min-height: 44px; border: 2px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.ks-co-farbe.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); }
.ks-co-klecks { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-block; }
.ks-co-fertig { margin: 0; padding: .5rem .8rem; border-radius: var(--radius-s); background: var(--green-soft); font-weight: 700; }
.ks-co-art { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.ks-co-art-knopf { display: grid; gap: .15rem; text-align: left; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.ks-co-art-knopf[aria-checked="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, var(--card)); }
.ks-co-art-knopf small { color: var(--ink-soft); }
.ks-co-ed-kopf { font-size: 1rem; margin: .8rem 0 .4rem; }
.ks-co-ed-wahl { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.ks-co-ed-haken { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; }
.ks-co-ed-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.ks-co-ed-leiste select { min-height: 40px; font: inherit; }
.ks-ed .ks-co-flaeche { max-width: 640px; margin-bottom: .6rem; }

/* Blattart „steckbrief“ (K.8) */
.ks-steckbrief-blatt { display: grid; gap: 5mm; }
.ks-stb-kopf { display: flex; gap: 6mm; align-items: flex-start; }
.ks-stb-bild { flex: 0 0 62mm; }
.ks-stb-bild .ks-bild { display: block; width: 100%; height: auto; max-height: 70mm; object-fit: contain; border-radius: 2mm; }
.ks-stb-daten { flex: 1; display: grid; gap: 4mm; }
.ks-stb-name { margin: 0; font: 700 20pt var(--font-read); }
.ks-stb-feld { margin: 0; display: flex; align-items: flex-end; gap: 2mm; font: 400 13pt var(--font-read); }
.ks-stb-feld .ks-linie { flex: 1; }
.ks-stb-luecken { margin: 0; padding-left: 6mm; display: grid; gap: 5mm; font: 400 13pt/1.6 var(--font-read); }
.ks-stb-luecken .ks-linie { display: inline-block; min-width: 38mm; margin: 0 1mm; }

/* Blattart „collage“ (K.8): Kästchen der Klebefläche = Kästchengröße der Formen (12 mm) */
.ks-collage-blatt { display: grid; gap: 4mm; --kasten: 12mm; }
.ks-cb-vorlage { margin: 0; display: flex; align-items: flex-end; gap: 4mm; }
.ks-cb-vorlage figcaption { font: 400 10pt var(--font-read); color: #4a443b; }
.ks-cb-klein { width: 60mm; border-width: .3mm; }
.ks-cb-formen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4mm 6mm; }
.ks-cb-form { display: grid; justify-items: center; gap: 1mm; }
.ks-cb-schnitt { width: calc(var(--g) * var(--kasten)); height: calc(var(--g) * var(--kasten)); }
.ks-cb-name { font: 400 8pt/1 var(--font-read); color: #4a443b; }
.ks-cb-klebe-titel { margin: 0; font: 700 11pt var(--font-read); }
.ks-cb-klebe, .ks-cb-loesung { width: calc(var(--b) * var(--kasten)); background-image: none; border: .4mm solid #8d8373; border-radius: 2mm; }
.ks-cb-raster { background-image: linear-gradient(to right, #d9d1c2 .2mm, transparent .2mm), linear-gradient(to bottom, #d9d1c2 .2mm, transparent .2mm); }

/* --- Die Figur des Moduls (app/figur.js, K.10a) --------------------- */
.brand-mark.ks-mit-figur { padding: 0; overflow: hidden; background: var(--card); }
.brand-mark.ks-mit-figur img, .ks-figur-rund img, .ks-figur-knopf img { display: block; width: 100%; height: 100%; }
.ks-figur-knopf { padding: 3px; }
.ks-figur-knopf img { width: 34px; height: 34px; border-radius: 50%; }
.ks-figur-rund { display: inline-block; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--akzent); background: var(--card); vertical-align: middle; }
.ks-figur-tipp { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .5rem .8rem;
  width: calc(100% - 2 * clamp(.8rem, 2.5vw, 1.6rem)); max-width: calc(1400px - 2 * clamp(.8rem, 2.5vw, 1.6rem));
  margin: clamp(.8rem, 2.5vw, 1.6rem) auto -.4rem; border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--akzent) 9%, var(--card)); border: 2px solid color-mix(in srgb, var(--akzent) 40%, var(--line)); }
.ks-figur-tipp p { flex: 1 1 18rem; margin: 0; line-height: 1.45; }
.ks-figur-tipp-knoepfe { display: flex; gap: .4rem; margin-left: auto; }
.ks-tipp.ks-mit-figur { display: flex; align-items: center; gap: .7rem; }
.ks-tipp.ks-mit-figur[hidden] { display: none; }
.ks-tipp.ks-mit-figur::before { content: none; }
.ks-tipp.ks-mit-figur .ks-figur-rund { border-color: var(--amber); }
.ks-figur-gruss { display: flex; align-items: flex-end; gap: .5rem; margin: 0 0 .9rem; }
.ks-figur-gruss .ks-figur-ganz { width: 92px; height: auto; flex: none; }
.ks-figur-blase { position: relative; margin: 0 0 1.4rem; padding: .6rem .85rem; border-radius: 16px; font-family: var(--font-read); line-height: 1.45;
  background: color-mix(in srgb, var(--akzent) 9%, var(--card)); border: 2px solid var(--akzent); }
.ks-figur-blase::before { content: ""; position: absolute; left: -11px; bottom: 14px; width: 18px; height: 18px; background: inherit;
  border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(45deg); }
.ks-fall-name { display: inline-flex; align-items: center; gap: .45rem; }
.ks-fall-lob { display: flex; align-items: center; justify-content: center; gap: .55rem; }

/* Die Mappe der Figur — Kurzanleitung wie „Wandas Akte“ */
.ks-mappe { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, var(--ink) 40%, transparent); overflow: auto; }
.ks-mappe-karte { width: min(100%, 48rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 1.6rem);
  background: var(--card); border: 3px solid var(--akzent); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.ks-mappe-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.ks-mappe-kopf h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: 1.4rem; }
.ks-mappe-hallo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ks-mappe-hallo .ks-figur-ganz { width: clamp(84px, 20vw, 140px); height: auto; flex: none; }
.ks-mappe-gruss p { margin: 0 0 .4rem; font-family: var(--font-read); line-height: 1.5; }
.ks-mappe-gruss .ks-mappe-gruss-titel { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--akzent); }
.ks-mappe-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.ks-mappe-schritt { position: relative; padding: .75rem .8rem .8rem 2.7rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--paper); }
.ks-mappe-schritt h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.ks-mappe-schritt p { margin: 0; font-size: .92rem; line-height: 1.45; }
.ks-mappe-nr { position: absolute; left: .65rem; top: .7rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--akzent); color: #fff; font-weight: 800; }
.ks-mappe-leiste { margin: .9rem 0; color: var(--ink-soft); }
.ks-mappe-zwischen { margin: 1rem 0 .5rem; font-size: 1.05rem; }
.ks-mappe-extras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem .9rem; }
.ks-mappe-extras li { display: grid; grid-template-columns: 2rem 1fr; column-gap: .4rem; align-items: start; }
.ks-mappe-ico { grid-row: span 2; font-size: 1.4rem; line-height: 1.2; }
.ks-mappe-extras li > span:last-child { font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.ks-mappe-typen { margin-top: 1rem; }
.ks-mappe-typen summary { cursor: pointer; font-weight: 800; min-height: var(--tap, 44px); display: flex; align-items: center; }
.ks-mappe-typen ul { list-style: none; margin: .4rem 0 0; padding: 0; columns: 2 16rem; column-gap: 1.2rem; }
.ks-mappe-typen li { break-inside: avoid; margin-bottom: .45rem; }
.ks-mappe-typen small { display: block; color: var(--ink-soft); }
.ks-mappe-fuss { display: flex; justify-content: flex-end; margin-top: 1rem; }
@media print { .ks-figur-tipp, .ks-mappe { display: none !important; } }

/* Ziffernblock (Mathematik, AP Z.1): große Tasten, drei Spalten — Tippen statt Tastatur */
.ks-zb { display: grid; gap: .6rem; width: min(100%, 19rem); margin-inline: auto; }
.ks-zb:focus { outline: none; }
.ks-zb-feld { display: flex; align-items: center; justify-content: center; min-height: 4.2rem; padding: 0 1rem;
  font: 800 clamp(2rem, 6vw, 3rem) var(--font-read); letter-spacing: .06em; background: var(--card);
  border: 3px solid var(--akzent); border-radius: var(--radius-s); }
.ks-zb-feld.ks-zb-leer::after { content: "?"; color: var(--ink-soft); }
.ks-zb-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ks-zb-taste { min-height: max(var(--tap, 44px), 3.6rem); font: 800 clamp(1.5rem, 4.5vw, 2rem) var(--font-read); color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow-1);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ks-zb-taste:active { transform: translateY(1px); box-shadow: none; }
.ks-zb-zurueck { color: var(--ink-soft); }
.ks-zb-ok { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.ks-zb-mit-komma .ks-zb-ok { grid-column: 1 / -1; }

/* Blitzblick (Mathematik, AP Z.1): die Menge groß in der Mitte, darunter der Ziffernblock */
.ks-bb { display: grid; gap: 1rem; justify-items: center; }
.ks-bb-buehne { display: grid; place-items: center; width: 100%; min-height: clamp(8rem, 26vh, 15rem); }
.ks-bb-bild { width: min(100%, 28rem); height: auto; max-height: 34vh; object-fit: contain; }
.ks-bb-mini { height: 2.4rem; width: auto; border-radius: 4px; }
.ks-bb-verdeckt { display: grid; justify-items: center; gap: .6rem; }
.ks-bb-frage { font: 800 clamp(3.5rem, 12vw, 5.5rem) var(--font-read); line-height: 1; color: var(--ink-soft); }

/* Arbeitsmittel (Mathematik, AP Z.2): Zehner-/Zwanzigerfeld und Rechenrahmen zum Antippen.
   Rot = volle Scheibe, blau/weiß = Ring — die Form unterscheidet, nie die Farbe allein. */
.ks-zf { --platz: clamp(2.75rem, 9vw, 3.8rem); display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.6rem; }
.ks-zf-feld { display: grid; grid-template-columns: repeat(5, var(--platz)); grid-auto-rows: var(--platz); gap: 0; border: 3px solid var(--ink); border-radius: 6px; background: var(--card); }
.ks-zf-platz { position: relative; display: grid; place-items: center; padding: 0; margin: 0; background: transparent; border: 1px solid var(--line); border-radius: 0;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ks-zf-platz:disabled { cursor: default; }
.ks-zf-platz::before { content: ""; width: 72%; height: 72%; border-radius: 50%; box-sizing: border-box; transform: scale(0); transition: transform .12s; }
.ks-zf-rot::before { transform: scale(1); background: #d9483b; border: 3px solid #8f2a21; }
.ks-zf-blau::before { transform: scale(1); background: #fff; border: 7px solid #2f6fd0; }
.ks-zf-platz:focus-visible { outline: 3px solid var(--akzent); outline-offset: -3px; z-index: 1; }
/* zweite Reihe eines Zehnerfelds etwas deutlicher abgesetzt: man sieht die Fünfer */
.ks-zf-feld .ks-zf-platz:nth-child(n+6) { border-top-width: 1px; }
.ks-dz-hilfe .ks-zf-feld { border-color: var(--akzent); }
.ks-dz-hilfe .ks-zf-feld .ks-zf-platz:nth-child(-n+5) { background: color-mix(in srgb, var(--akzent) 12%, transparent); }

.ks-rr { --kugel: 2.75rem; display: grid; gap: .6rem; width: min(100%, 36rem); margin-inline: auto; padding: .7rem .8rem;
  background: var(--card); border: 3px solid var(--ink); border-radius: var(--radius-s); }
.ks-rr-stange { position: relative; display: flex; align-items: center; min-height: calc(var(--kugel) + .6rem); }
.ks-rr-stange::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: #7a5236; border-radius: 2px; }
.ks-rr-luecke { flex: 1 1 auto; min-width: 1rem; }
.ks-rr-kugel { position: relative; flex: none; box-sizing: border-box; width: var(--kugel); height: var(--kugel); padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ks-rr-kugel:disabled { cursor: default; }
.ks-rr-rot { background: #d9483b; border: 3px solid #8f2a21; }
.ks-rr-weiss { background: #fff; border: 6px solid #2f6fd0; }
.ks-rr-kugel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* Zahlen darstellen (Z8) */
.ks-dz { display: grid; gap: 1rem; justify-items: center; }
.ks-dz-vorgabe { display: grid; place-items: center; width: 100%; min-height: clamp(5rem, 16vh, 9rem); }
.ks-dz-zahl { font: 800 clamp(4rem, 14vw, 7rem) var(--font-read); line-height: 1; color: var(--ink); }
.ks-dz-material { width: 100%; }
.ks-dz-fertig { min-height: max(var(--tap, 44px), 3.4rem); padding-inline: 2rem; font-size: 1.3rem; }

/* Zählen (Z4) */
.ks-zl { display: grid; gap: 1rem; justify-items: center; }
.ks-zl-flaeche { position: relative; width: min(100%, 30rem); aspect-ratio: 5 / 4; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-s); }
.ks-zl-geordnet { aspect-ratio: 5 / 2; }
.ks-zl-ding { position: absolute; width: 14%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; margin: 0; background: transparent; border: 0; border-radius: 50%;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ks-zl-geordnet .ks-zl-ding { width: 15%; }
.ks-zl-ding img { width: 100%; height: 100%; display: block; }
.ks-zl-markiert img { opacity: .45; }
.ks-zl-nr { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(1rem, 4.6vw, 1.7rem) var(--font-read); color: var(--ink); text-shadow: 0 0 4px var(--card), 0 0 4px var(--card); pointer-events: none; }
.ks-zl-ding:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* Mehr oder weniger? (Z2) */
.ks-mv { display: grid; gap: 1rem; justify-items: center; }
.ks-mv-frage { margin: 0; font: 800 clamp(1.3rem, 4vw, 1.8rem) var(--font-read); text-align: center; }
.ks-mv-paar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; }
.ks-mv-menge { flex: 1 1 12rem; max-width: 22rem; padding: .8rem; background: var(--card); border: 3px solid var(--line); border-radius: var(--radius-s); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ks-mv-menge:disabled { cursor: default; }
.ks-mv-menge img { display: block; width: 100%; height: auto; max-height: 24vh; object-fit: contain; }
.ks-mv-richtig { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent); }
.ks-mv-gleich { min-height: max(var(--tap, 44px), 3.2rem); padding-inline: 1.6rem; font-size: 1.2rem; }

/* Schmale Bildschirme: eine Stange des Rechenrahmens bricht in zwei Reihen zu fünf (rot / weiß) um — so bleibt jede Kugel fingergroß.
   Geschobene Kugeln sind kräftig umrandet. */
@media (max-width: 35rem) {
  .ks-rr-stange { flex-wrap: wrap; justify-content: center; gap: .15rem; padding-block: .2rem; }
  .ks-rr-stange::before, .ks-rr-luecke { display: none; }
  .ks-rr-links { box-shadow: 0 0 0 3px var(--ink); }
}

/* Zahlenstrahl, Material-Tisch und Blitzblick-Projektor (Mathematik, AP Z.2b) */
.ks-zs { display: grid; gap: .6rem; width: 100%; }
.ks-zs-bild { width: 100%; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-s); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ks-zs-bild:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.ks-zs-bild svg { display: block; width: 100%; height: auto; }
.ks-zs-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.btn.ks-an, .ks-an[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.ks-mt { display: grid; gap: 1rem; }
.ks-mt-leiste, .ks-pj-leiste { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ks-mt-hinweis { margin: 0; text-align: center; color: var(--ink-soft); min-height: 1.2em; }
.ks-mt-tisch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.ks-mt-slot { display: grid; gap: .6rem; padding: .8rem; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-s); min-width: 0; }
.ks-mt-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ks-mt-kopf select { min-height: var(--tap, 44px); }
.ks-mt-flaeche { display: grid; justify-items: center; min-width: 0; }
.ks-mt-zahl { text-align: center; font: 800 clamp(2rem, 6vw, 3.2rem) var(--font-read); line-height: 1.1; }
.ks-mt-verborgen { color: var(--ink-soft); }

.ks-pj { display: grid; gap: 1rem; justify-items: center; }
.ks-pj-wahl { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: center; }
.ks-pj-wahl select { min-height: var(--tap, 44px); }
.ks-pj-zahlen { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; max-width: 40rem; }
.ks-pj-zahl { min-width: 2.75rem; min-height: 2.75rem; }
.ks-pj-buehne { display: grid; place-items: center; gap: .6rem; width: 100%; min-height: clamp(10rem, 34vh, 18rem); }
.ks-pj-text { margin: 0; color: var(--ink-soft); font-size: 1.2rem; text-align: center; }
.ks-pj-loesung { font: 800 clamp(3rem, 10vw, 5rem) var(--font-read); line-height: 1; }
.ks-pj-zeigen { min-height: max(var(--tap, 44px), 3.2rem); padding-inline: 1.8rem; font-size: 1.25rem; }

.ks-mt-kopf .btn[hidden] { display: none; }
.ks-pj > .ks-kopf { justify-self: stretch; }

/* Rechnen (Mathematik, AP Z.3): die Aufgabe groß, darunter Arbeitsmittel und Ziffernblock */
.ks-rn { display: grid; gap: 1rem; justify-items: center; }
.ks-rn-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; width: 100%; }
.ks-rn-aufgabe { font: 800 clamp(2.2rem, 8vw, 4.2rem) var(--font-read); line-height: 1.1; letter-spacing: .02em; text-align: center; }
.ks-rn-hilfe { margin: 0; padding: .5rem 1rem; max-width: 36rem; text-align: center; font-size: 1.2rem; background: color-mix(in srgb, var(--akzent) 14%, var(--card)); border: 2px solid var(--akzent); border-radius: var(--radius-s); }
.ks-rn-material { display: grid; place-items: center; width: 100%; }
/* Einmaleins-Reihen im Editor (Z.9): zehn Haken in Reihen, Trefferflaeche wie ein Knopf */
.ks-ed-reihen { display: flex; flex-wrap: wrap; gap: .3rem .9rem; border: 2px solid var(--line); border-radius: var(--radius-s); padding: .4rem .7rem .6rem; margin: .4rem 0; min-width: 0; }
.ks-ed-reihen legend { font-weight: 800; padding: 0 .3rem; }
.ks-ed-reihen .ks-ed-haken { min-height: 44px; display: inline-flex; align-items: center; gap: .3rem; }
.ks-rn-ergebnis { min-width: 3rem; text-align: center; font-weight: 800; }
.ks-rn-zahl { width: 6rem; }
.ks-ed-zeile > input.ks-rn-zahl { flex: 0 0 5.5rem; min-width: 0; }

/* Zahlenformat (Mathematik, AP Z.4): eine Figur mit Zahlenfeldern — Zahlenhaus, Zehnerfreunde, Nachbarhaus.
   Felder: fest (Zahl steht da), offen (Knopf, antippen wählt), gewählt (dicker Rand + Hintergrund), gelöst (grün + Haken-Rand). */
.ks-zfg { --feld: clamp(3.4rem, 15vw, 5rem); display: grid; gap: 1rem; justify-items: center; }
.ks-zfg-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; }
.ks-zfg-figur { display: grid; justify-items: center; }
.ks-zfg-feld { display: grid; place-items: center; box-sizing: border-box; width: var(--feld); height: var(--feld); margin: 0; padding: 0;
  font: 800 clamp(1.6rem, 6.5vw, 2.5rem) var(--font-read); line-height: 1; color: var(--ink); background: var(--card); border: 3px solid var(--ink); border-radius: 0; }
.ks-zfg-offen { cursor: pointer; color: var(--ink-soft); background: color-mix(in srgb, var(--card) 70%, var(--line)); border-style: dashed; }
.ks-zfg-gewaehlt { color: var(--ink); border: 5px solid var(--akzent); border-style: solid; background: color-mix(in srgb, var(--akzent) 16%, var(--card)); }
.ks-zfg-offen:focus-visible { outline: 4px solid var(--akzent); outline-offset: 2px; }
.ks-zfg-geloest { color: #1d6b35; background: color-mix(in srgb, #2e9a4f 16%, var(--card)); border-color: #2e9a4f; }
/* Zahlenhaus: Dach als Dreieck, darunter die Stockwerke mit zwei Zimmern */
.ks-zh-haus { display: grid; justify-items: center; }
.ks-zh-dach { display: grid; place-items: end center; width: calc(2 * var(--feld) + 2rem); height: calc(var(--feld) * 1.15); padding-bottom: .3rem; box-sizing: border-box;
  background: #fbe3c8; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ks-zh-dach .ks-zfg-feld { width: calc(var(--feld) * .9); height: max(44px, calc(var(--feld) * .72)); }
.ks-zh-stockwerke { display: grid; border: 3px solid var(--ink); border-top-width: 4px; }
.ks-zh-stock { display: flex; }
.ks-zh-stock .ks-zfg-feld { border-width: 2px; }
.ks-zh-ed-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ks-zh-ed-haus { padding: .6rem .8rem; border: 2px solid var(--line); border-radius: var(--radius-s); }
/* Zehnerfreunde: „zusammen 10“, zwei Felder mit Herz */
.ks-fr-ziel { margin: 0; font: 700 clamp(1.4rem, 5vw, 2rem) var(--font-read); }
.ks-fr-paar { display: flex; align-items: center; gap: .6rem; }
.ks-fr-herz { color: #d9483b; font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1; }
/* Nachbarhaus: drei Fenster unter einem Dach */
.ks-nb-haus { display: grid; justify-items: center; }
.ks-nb-dach { width: calc(3 * var(--feld) + 1.5rem); height: calc(var(--feld) * .8); background: #fbe3c8; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ks-nb-fenster { display: flex; border: 3px solid var(--ink); }
.ks-nb-fenster .ks-zfg-feld { border-width: 2px; }
/* Versteckte Plättchen */
.ks-vs { display: grid; gap: 1rem; justify-items: center; }
.ks-vs-satz { font: 800 clamp(1.8rem, 6.5vw, 3rem) var(--font-read); line-height: 1.15; text-align: center; }
.ks-vs-bild { max-height: 30vh; }
/* Zahlenfolge: das Zahlenband bricht auf schmalen Geräten um */
.ks-zr-art { margin: 0; font: 700 clamp(1.2rem, 4.5vw, 1.6rem) var(--font-read); color: var(--ink-soft); }
.ks-zr-band { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; max-width: 100%; }
.ks-zr-ed { flex-wrap: wrap; }
.ks-zr-ed-band { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.ks-zr-ed-zahl { min-width: 2.75rem; min-height: 2.75rem; font: 700 1.1rem var(--font-read); border: 2px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); cursor: pointer; }
.ks-zr-ed-luecke { border-style: dashed; border-color: var(--akzent); color: var(--akzent); }
/* Zahlenmauer (Z.5a): versetzte Reihen, die Steine breiter als hoch; vier Steine passen bei 320 px */
.ks-zm { --stein: min(calc(var(--feld) * 1.35), calc((100vw - 3.5rem) / 4)); }
.ks-zm-mauer { display: grid; justify-items: center; }
.ks-zm-reihe { display: flex; }
.ks-zm-reihe .ks-zfg-feld { width: var(--stein); height: max(44px, calc(var(--feld) * .85)); margin: -1.5px; font-size: clamp(1.3rem, 5.5vw, 2.2rem); }
.ks-zm-ed { display: grid; justify-items: center; gap: .2rem; margin: .4rem 0; }
.ks-zm-ed-reihe { display: flex; gap: .2rem; }
.ks-zm-ed-reihe .ks-zr-ed-zahl { min-width: 3.4rem; }
/* Rechendreieck (Mathe Z.14a): Form als Bild, Felder darüber an DREIECK_ORTE (Prozent) */
.ks-rd-dreieck { position: relative; width: min(30rem, calc(100vw - 2.5rem)); aspect-ratio: 300 / 320; }
.ks-rd-form { display: block; width: 100%; height: 100%; }
.ks-rd-platz { position: absolute; transform: translate(-50%, -50%); }
.ks-rd-dreieck .ks-zfg-feld { width: max(44px, calc(var(--feld) * 1.05)); height: max(44px, calc(var(--feld) * .78)); font-size: clamp(1.3rem, 5.5vw, 2.1rem); }
.ks-rd-dreieck { container-type: inline-size; }
.ks-rd-pl { display: grid; grid-template-columns: repeat(var(--spalten, 5), 5.5cqw); gap: .8cqw; place-content: center; width: auto !important; height: auto !important;
  min-width: 44px; min-height: 44px; padding: .8cqw 1.2cqw; background: #fbe3c8; border-style: dotted; }
.ks-rd-punkt { width: 5.5cqw; aspect-ratio: 1; border-radius: 50%; background: #d9483b; box-shadow: inset 0 0 0 2px #8f2a21; }
.ks-rd-klein { width: min(17rem, calc(100vw - 4rem)); }
.ks-rd-klein .ks-zr-ed-zahl { min-width: 2.9rem; min-height: 2.2rem; }
/* Runden und Überschlagen, Schätzen (Mathe Z.14b) */
.ks-ru, .ks-sz { display: grid; gap: 1rem; justify-items: center; }
.ks-ru-gerundet, .ks-ru-ueberschlag, .ks-sz-geschaetzt { margin: 0; font: 700 clamp(1.15rem, 4vw, 1.6rem) var(--font-read); text-align: center; white-space: pre-wrap; }
.ks-sz-frage { font: 800 clamp(1.3rem, 5vw, 2rem) var(--font-read); text-align: center; }
.ks-sz-glas { display: grid; place-items: center; min-height: min(22rem, 40vh); width: 100%; }
.ks-sz-bild { width: min(100%, 20rem); height: auto; max-height: 40vh; object-fit: contain; }
.ks-sz-reihen { width: min(100%, 26rem); height: auto; max-height: 46vh; object-fit: contain; }
.ks-sz-nochmal { min-height: 3.5rem; font-size: 1.15rem; }
.ks-sz-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ks-sz-knopf { min-width: 10rem; min-height: 4.5rem; font: 800 clamp(1.2rem, 4.5vw, 1.6rem) var(--font-read); }
.ks-sz-zehn { display: grid; justify-items: center; gap: .2rem; margin: 0; }
.ks-sz-zehn img { width: min(100%, 22rem); height: auto; }
.ks-sz-zehn figcaption { font-weight: 700; }
.ks-sz-meldung { margin: 0; padding: .5rem .9rem; border-radius: .8rem; background: var(--green-soft); font-weight: 700; text-align: center; }
/* Mathe Z.14c: Schriftlich rechnen — Kästchenraster, die Spalte, die dran ist, leuchtet */
.ks-sr { display: grid; gap: .9rem; justify-items: center; }
.ks-sr-titel { font: 700 1.2rem var(--font-read); color: var(--ink-soft); }
.ks-sr-raster { --k: clamp(2.6rem, 12vw, 4.2rem); display: grid; grid-template-columns: repeat(var(--spalten), var(--k)); padding: .4rem;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-s);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(var(--k) / 2) calc(var(--k) / 2); background-position: .4rem .4rem; }
.ks-sr-z { display: grid; place-items: center; height: var(--k); font: 800 calc(var(--k) * .62) var(--font-read); line-height: 1; color: var(--ink); }
.ks-sr-kopf, .ks-sr-klein { height: calc(var(--k) * .62); font-size: calc(var(--k) * .4); }
.ks-sr-kopf { font-weight: 800; }
.ks-sr-ue { justify-items: end; padding-right: .2rem; color: var(--brand); }
.ks-sr-neu { color: var(--brand); }
.ks-sr-weg { text-decoration: line-through; text-decoration-thickness: .12em; text-decoration-color: var(--brand); }
.ks-sr-op { color: var(--ink-soft); }
.ks-sr-erg { border-top: 4px solid var(--ink); }
.ks-sr-fertig { color: var(--brand); }
.ks-sr-jetzt { background: color-mix(in srgb, #ffd23f 45%, transparent); }
.ks-sr-frage { outline: 3px solid var(--akzent); outline-offset: -3px; border-radius: 4px; color: var(--ink-soft); }
.ks-sr-ue.ks-sr-frage { justify-items: center; padding-right: 0; }
.ks-sr-rechnung { margin: 0; font: 800 clamp(1.3rem, 5vw, 1.9rem) var(--font-read); text-align: center; }
.ks-sr-entb { min-height: 3rem; font-size: 1.15rem; }
/* Je mehr – desto mehr (Z.14d, Vorsilbe ks-zo): Tabelle mit zwei Spalten; die Zeile, die dran ist, leuchtet — Hilfszeile „für 1“ gestrichelt */
.ks-zo { display: grid; gap: .8rem; justify-items: center; }
.ks-zo-tabelle { border-collapse: collapse; min-width: min(100%, 22rem); font: 700 clamp(1.15rem, 4.4vw, 1.6rem) var(--font-read); background: var(--card, #fff); }
.ks-zo-tabelle th, .ks-zo-tabelle td { padding: .45rem 1rem; border: 2px solid var(--ink); text-align: center; }
.ks-zo-tabelle thead th { background: var(--surface-2, #f1f3f8); font-size: .85em; }
.ks-zo-menge { font-weight: 700; }
.ks-zo-wert { min-width: 7rem; }
.ks-zo-jetzt td, .ks-zo-jetzt th { background: color-mix(in srgb, #ffd23f 45%, transparent); }
.ks-zo-frage { outline: 3px solid var(--akzent); outline-offset: -5px; color: var(--ink-soft); }
.ks-zo-spaeter { color: var(--ink-soft); }
.ks-zo-gefuellt { color: var(--brand); }
.ks-zo-hilfszeile th, .ks-zo-hilfszeile td { border-style: dashed; font-weight: 400; background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.ks-zo-rechnung { margin: 0; font: 800 clamp(1.3rem, 5vw, 1.9rem) var(--font-read); text-align: center; }
.ks-zo-ed { flex-wrap: wrap; }
.ks-zo-ed-zeilen { display: grid; gap: .3rem; flex-basis: 100%; margin: .3rem 0; padding-left: 1.4rem; }
.ks-zo-ed-zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ks-zo-ed-fehler { flex-basis: 100%; margin: 0; color: #b3261e; }
.ks-zo-ed-fehler:empty { display: none; }
/* Kann man das rechnen? (Z.14d, Vorsilbe ks-us): Karte wie bei der Sachaufgabe, große Knöpfe zum Entscheiden */
.ks-us { --feld: clamp(3.4rem, 15vw, 5rem); display: grid; gap: .8rem; justify-items: center; }
.ks-us-nummer { margin: 0; font: 700 1rem var(--font-read); color: var(--ink-soft); }
.ks-us-wahl { min-height: 56px; padding: .5rem 1rem; font: 700 clamp(1.05rem, 4vw, 1.35rem) var(--font-read); white-space: normal; text-align: left; }
/* Bild-Gleichungen (Z.14d, Vorsilbe ks-bg): Zeilen aus Bildern, bekannte Werte unter dem Bild, die Zeile, die weiterhilft, leuchtet */
.ks-bg { --feld: clamp(3.4rem, 15vw, 5rem); display: grid; gap: .8rem; justify-items: center; }
.ks-bg-raetsel { display: grid; gap: .5rem; justify-items: start; padding: .6rem 1rem; border: 2px solid var(--line, #c9d1de); border-radius: .8rem; background: var(--card, #fff); max-width: 100%; box-sizing: border-box; }
.ks-bg-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 3px solid transparent; border-radius: .6rem; }
.ks-bg-zeile.ks-bg-jetzt { border-color: var(--akzent); background: color-mix(in srgb, #ffd23f 35%, transparent); }
.ks-bg-platz { display: grid; justify-items: center; min-width: 3.4rem; }
.ks-bg-bild { width: clamp(2.8rem, 11vw, 4rem); height: auto; }
.ks-bg-klein { width: 2rem; vertical-align: middle; }
.ks-bg-wert { min-height: 1.3em; font: 800 1.05rem var(--font-read); color: var(--brand); }
.ks-bg-zeichen, .ks-bg-summe { font: 800 clamp(1.4rem, 5.5vw, 2.1rem) var(--font-read); padding: 0 .2rem; }
.ks-bg-zeichen { color: var(--ink-soft); }
.ks-bg-liste { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; font: 700 1.2rem var(--font-read); }
.ks-bg-gefunden { display: inline-flex; align-items: center; gap: .2rem; }
.ks-bg-frage { display: flex; align-items: center; gap: .5rem; }
.ks-bg-ed-werte { display: flex; flex-wrap: wrap; gap: .6rem; flex-basis: 100%; }
/* Wer bin ich? (Z.14e, Vorsilbe ks-zd): Hinweise als nummerierte Karten, Zahlentafel zum Durchstreichen (Raster von ks-ht) */
.ks-zd { --feld: clamp(3.4rem, 15vw, 5rem); display: grid; gap: .8rem; justify-items: center; }
.ks-zd-hinweise { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; width: min(100%, 36rem); }
.ks-zd-hinweis { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border: 2px solid var(--line); border-radius: .7rem; background: var(--card);
  font: 700 clamp(1.1rem, 4.2vw, 1.4rem) var(--font-read); }
.ks-zd-nr { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--akzent); color: #2e2118; font-weight: 900; }
.ks-zd-weiter { min-height: 52px; font: 700 1.15rem var(--font-read); }
.ks-zd-alle, .ks-zd-leise { margin: 0; font: 600 1rem var(--font-read); color: var(--ink-soft); }
.ks-zd-brett.ks-zd-zwanzig { width: min(100%, 30rem); }
.ks-zd-feld { position: relative; }
.ks-zd-feld.ks-zd-weg { color: var(--ink-soft); background: color-mix(in srgb, var(--card) 70%, var(--line)); }
.ks-zd-feld.ks-zd-weg::after { content: ""; position: absolute; inset: 18% 12%; background: linear-gradient(to top right, transparent calc(50% - 2px), #d9483b calc(50% - 2px), #d9483b calc(50% + 2px), transparent calc(50% + 2px)); pointer-events: none; }
.ks-zd-feld.ks-zd-auto::after { background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink-soft) calc(50% - 1.5px), var(--ink-soft) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.ks-zd-antwort { align-items: center; }
.ks-zd-ichbin { font: 800 clamp(1.4rem, 5.5vw, 2rem) var(--font-read); }
.ks-zd-beispiel { margin: 0; max-width: 36rem; font: 600 1.05rem var(--font-read); color: var(--ink-soft); }
.ks-zd-ed-zeile { flex-wrap: wrap; }
.ks-zd-ed-hinweise { display: grid; gap: .3rem; flex-basis: 100%; margin: 0; padding-left: 1.4rem; }
.ks-zd-ed-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ks-zd-ed-status { flex-basis: 100%; }
/* Rechenweg erklären (Z.14e, Vorsilbe ks-er): Aufgabe groß, Malias Notizzettel, Satz mit Kästchen — das Kästchen, das dran ist, leuchtet */
.ks-er { --feld: clamp(3.2rem, 13vw, 4.6rem); display: grid; gap: .8rem; justify-items: center; }
.ks-er-aufgabe { display: flex; align-items: center; gap: .6rem; }
.ks-er-rechnung { font: 800 clamp(1.8rem, 7vw, 2.8rem) var(--font-read); }
.ks-er-zettel { display: grid; gap: .2rem; width: min(100%, 36rem); padding: .6rem 1rem; border: 2px dashed var(--line); border-radius: .7rem; background: color-mix(in srgb, #fff8d6 60%, var(--card)); color: #2e2118; box-sizing: border-box; }
.ks-er-weg { margin: 0; font: 700 .95rem var(--font-read); color: #5b4a3c; }
.ks-er-satz { margin: 0; font: 700 clamp(1.05rem, 4vw, 1.3rem) var(--font-read); }
.ks-er-baustein { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin: 0; font: 800 clamp(1.3rem, 5vw, 1.9rem) var(--font-read); }
.ks-er-anfang { font-weight: 700; }
.ks-er-kasten { min-width: var(--feld); }
.ks-er-wahl { min-height: 56px; padding: .5rem 1rem; font: 700 clamp(1.05rem, 4vw, 1.3rem) var(--font-read); white-space: normal; text-align: left; }
.ks-er-ed-zeile { flex-wrap: wrap; }
.ks-er-ed-weg { flex-basis: 100%; }
/* Rechen-Bingo (Z.14f, T7, Vorsilbe ks-bn): Ausrufer mit großer Aufgabe, Liste, Karte prüfen */
.ks-bn { display: grid; gap: 1rem; }
.ks-bn-flaeche { display: grid; gap: .9rem; justify-items: center; }
.ks-bn-einstellung { width: min(100%, 44rem); padding: .6rem .9rem; border: 2px solid var(--line); border-radius: .8rem; background: var(--card); box-sizing: border-box; }
.ks-bn-einstellung summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.ks-bn-einstellung[open] { display: grid; gap: .6rem; }
.ks-bn-feld { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ks-bn-feld select, .ks-bn-feld input { max-width: 100%; min-height: 40px; }
.ks-bn-druck { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ks-bn-ruf { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 5rem; padding: .6rem 1.4rem; border: 3px solid var(--ink); border-radius: 1rem; background: var(--card); max-width: 100%; box-sizing: border-box; }
.ks-bn-aufgabe { font: 800 clamp(2.2rem, 10vw, 4.4rem) var(--font-read); text-align: center; overflow-wrap: anywhere; }
.ks-bn-leer { font: 700 1.2rem var(--font-read); color: var(--ink-soft); }
.ks-bn-weiter { min-height: 56px; font-size: 1.2rem; }
.ks-bn-zahl { margin: 0; font: 600 1rem var(--font-read); color: var(--ink-soft); }
.ks-bn-liste { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: 0; padding: 0; list-style: none; width: min(100%, 44rem); font: 600 1rem var(--font-read); }
.ks-bn-liste li { padding: .15rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); white-space: nowrap; }
.ks-bn-pruefen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.ks-bn-nr { width: 5.5rem; min-height: 44px; font-size: 1.2rem; }
.ks-bn-pruefung { display: grid; gap: .6rem; justify-items: center; max-width: 100%; }
.ks-bn-karte { display: grid; grid-template-columns: repeat(var(--g, 3), minmax(0, 1fr)); width: min(100%, calc(var(--g, 3) * 5.5rem)); border: 3px solid var(--ink); background: #f6f8fc; color: #2e2118; }
.ks-bn-feld-k { display: grid; place-items: center; min-height: 4.4rem; padding: .2rem; border: 1px solid #8d99ad; font: 700 clamp(1.1rem, 4.5vw, 1.6rem) var(--font-read); text-align: center; overflow-wrap: anywhere; }
.ks-bn-aufgaben .ks-bn-feld-k { font-size: clamp(.85rem, 3.4vw, 1.1rem); }
.ks-bn-dran { background: #ffe08a; outline: 3px solid #2e2118; outline-offset: -3px; }
.ks-bn-urteil { margin: 0; font: 700 1.15rem var(--font-read); }
.ks-bn-bingo { color: var(--brand); font-size: 1.4rem; }
/* Zahl des Tages (Z.14f, T8, Vorsilbe ks-tz): Zahl groß, Material und Strahl, Fragen zum Aufdecken */
.ks-tz { display: grid; gap: 1rem; }
.ks-tz-wahl { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.ks-tz-knopf, .ks-tz-zufall, .ks-tz-heute { min-width: var(--tap, 44px); min-height: var(--tap, 44px); font-weight: 800; }
.ks-tz-flaeche { display: grid; gap: 1rem; justify-items: center; }
.ks-tz-zahl { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .4rem 1rem; }
.ks-tz-ziffer { font: 900 clamp(4rem, 20vw, 7rem) var(--font-read); line-height: 1; }
.ks-tz-wort { font: 700 clamp(1.3rem, 5vw, 2rem) var(--font-read); color: var(--ink-soft); }
.ks-tz-bilder { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; width: 100%; }
.ks-tz-bild { display: grid; gap: .3rem; justify-items: center; align-content: start; margin: 0; max-width: min(100%, 22rem); }
.ks-tz-bild img { display: block; max-width: 100%; height: auto; max-height: 14rem; }
.ks-tz-strahl { max-width: min(100%, 36rem); }
.ks-tz-bild figcaption { font: 600 .95rem var(--font-read); color: var(--ink-soft); }
.ks-tz-fragen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .6rem; width: min(100%, 60rem); }
.ks-tz-frage { display: grid; gap: .3rem; align-content: start; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: .7rem; background: var(--card); }
.ks-tz-frage p { margin: 0; font: 700 1.05rem var(--font-read); }
.ks-tz-antwort { color: var(--brand); }
.ks-tz-aufdecken { justify-self: start; min-height: var(--tap, 44px); min-width: var(--tap, 44px); }
/* Ziffern-Schreibweg (Z.14f, T6, Vorsilbe ks-zw): Ziffern zum Wählen, die Ziffer groß zwischen Schreiblinien */
.ks-zw { display: grid; gap: .9rem; justify-items: center; }
.ks-zw-wahl { display: grid; grid-template-columns: repeat(5, minmax(var(--tap, 44px), 4rem)); gap: .4rem; }
@media (min-width: 40rem) { .ks-zw-wahl { grid-template-columns: repeat(10, minmax(var(--tap, 44px), 4rem)); } }
.ks-zw-ziffer { min-height: var(--tap, 44px); font: 800 1.5rem var(--font-read); }
.ks-zw-an { outline: 4px solid var(--akzent); outline-offset: 2px; }
.ks-zw-titel { margin: 0; font: 800 1.3rem var(--font-read); }
.ks-zw-bild { display: block; width: min(100%, 22rem); height: auto; border-radius: 14px; box-shadow: var(--shadow-2); }
.ks-zw-vers { margin: 0; max-width: 36rem; font: 700 clamp(1.1rem, 4vw, 1.4rem) var(--font-read); text-align: center; }
.ks-bg-ed-bild { width: 2rem; height: 2rem; vertical-align: middle; }
.ks-bg-ed-weg { padding: .1rem; min-width: 44px; min-height: 44px; }
.ks-bg-ed { flex-wrap: wrap; }
/* Rechenkette (Z.5a): Zahl → Pfeil mit Schritt → Zahl, umbrechend */
.ks-rk-kette { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: .6rem; max-width: 100%; }
.ks-rk-glied { display: inline-flex; align-items: center; }
.ks-rk-pfeil { display: inline-grid; justify-items: center; padding: 0 .3rem; font: 800 clamp(1.5rem, 6vw, 2rem) var(--font-read); color: var(--ink-soft); line-height: 1; }
.ks-rk-schritt { font-size: clamp(1.05rem, 4vw, 1.35rem); color: var(--ink); }
.ks-rk-ed-schritt { display: inline-flex; align-items: center; gap: .2rem; }
/* Aufgabenfamilie (Z.5a): das Ganze über den zwei Teilen, daneben die vier Aufgaben */
.ks-fa-figur { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; }
.ks-fa-familie { display: grid; justify-items: center; gap: .35rem; padding: .6rem .7rem; border: 3px solid var(--ink); border-radius: 14px; background: color-mix(in srgb, #fbe3c8 55%, var(--card)); }
.ks-fa-teile { display: flex; gap: .35rem; }
.ks-fa-aufgaben { --feld: clamp(2.75rem, 12vw, 3.6rem); display: grid; gap: .45rem; }
.ks-fa-aufgaben .ks-zfg-feld { font-size: clamp(1.3rem, 5vw, 1.9rem); }
.ks-fa-aufgabe { display: flex; align-items: center; gap: .3rem; }
.ks-fa-zeichen { min-width: 1.2em; text-align: center; font: 800 clamp(1.3rem, 5vw, 1.9rem) var(--font-read); }
/* Über die Zehn (Z.5b): Aufgabe in einer Reihe, darunter der Bogen unter der zweiten Zahl */
.ks-zn-figur { display: grid; grid-template-columns: repeat(5, auto); align-items: center; justify-items: center; column-gap: .35rem; row-gap: .9rem; }
.ks-zn-zahl, .ks-zn-zeichen { font: 800 clamp(1.6rem, 6.5vw, 2.5rem) var(--font-read); color: var(--ink); }
.ks-zn-zeichen { color: var(--ink-soft); min-width: .8em; text-align: center; }
.ks-zn-bogen { grid-column: 2 / 5; grid-row: 2; position: relative; display: flex; gap: .4rem; padding-top: .2rem; }
.ks-zn-bogen::before { content: ""; position: absolute; left: 22%; right: 22%; top: -1.05rem; height: 1.1rem; border: 3px solid var(--ink-soft); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
/* Verdoppeln (Z.5b) */
.ks-vd-zeile { display: flex; align-items: center; justify-content: center; gap: .35rem; flex-wrap: wrap; }
.ks-vd-fast { display: grid; gap: .6rem; }
.ks-vd-satz { font: 700 clamp(1.3rem, 5vw, 1.9rem) var(--font-read); }
/* Malbilder (Z.9b): Bild oben, Felder mit einem Wort darunter; beim Legen ein Feld 6 x 6 zum Antippen (44 px je Platz) */
.ks-mal-bilder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; }
.ks-mal-bild { width: auto; max-width: min(100%, 26rem); max-height: 30vh; height: auto; }
.ks-mal-dreh { font: 800 2rem var(--font-read); color: var(--ink-soft); }
.ks-mal-plus { display: grid; gap: .8rem; justify-items: center; }
.ks-mal-zaehlen { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }
.ks-mal-mitwort { display: inline-grid; justify-items: center; gap: .2rem; }
.ks-mal-wort { font: 700 .95rem var(--font-read); color: var(--ink-soft); }
.ks-mal-satz { font: 700 clamp(1.3rem, 5vw, 1.9rem) var(--font-read); }
.ks-mal-tausch { display: grid; gap: .6rem; }
.ks-mal-legen { display: grid; gap: 1rem; justify-items: center; }
.ks-mal-auftrag { margin: 0; font: 700 clamp(1.6rem, 6vw, 2.6rem) var(--font-read); }
.ks-mal-feld { display: grid; gap: 4px; padding: 8px; background: #f6f8fc; border: 3px solid var(--ink); border-radius: var(--radius-s); }
.ks-mal-reihe { display: flex; gap: 4px; }
.ks-mal-platz { width: 44px; height: 44px; margin: 0; padding: 0; border: 2px dashed #8d99ad; border-radius: 50%; background: transparent; cursor: pointer; }
.ks-mal-platz.ks-mal-an { border: 2px solid #8f2a21; background: #d9483b; }
.ks-mal-platz:focus-visible { outline: 4px solid var(--akzent); outline-offset: 2px; }
.ks-mal-legen .ks-knoepfe { justify-content: center; margin-top: 0; }
.ks-mal-ed-zeile { flex-wrap: wrap; }
.ks-mal-ed-vorschau img { height: 3.2rem; width: auto; vertical-align: middle; }
@media (max-width: 22rem) { .ks-mal-feld { gap: 2px; padding: 4px; } .ks-mal-reihe { gap: 2px; } }
/* Einmaleins (Z.9c): das Malkreuz als kleine Tabelle mit Feldern, darunter die Summe */
.ks-ein-kreuz-huelle { display: grid; gap: .8rem; justify-items: center; }
.ks-ein-kreuz { border-collapse: collapse; }
.ks-ein-kreuz th, .ks-ein-kreuz td { padding: .3rem .6rem; border: 3px solid var(--ink); text-align: center; font: 800 clamp(1.4rem, 5.5vw, 2.2rem) var(--font-read); color: var(--ink); }
.ks-ein-kreuz th { background: color-mix(in srgb, var(--akzent) 14%, var(--card)); }
.ks-ein-kreuz td { padding: .2rem; }
/* Verteilen und Aufteilen (Z.9d): Korb oben, darunter Teller bzw. Tüten zum Antippen, je mit „↩“ (44 px) */
.ks-tl-legen { display: grid; gap: .9rem; justify-items: center; }
.ks-tl-auftrag { margin: 0; max-width: 40rem; text-align: center; font: 700 clamp(1.2rem, 4.5vw, 1.8rem) var(--font-read); }
.ks-tl-korb { margin: 0; padding: 0; border: 3px dashed transparent; border-radius: var(--radius-s); background: none; cursor: pointer; }
.ks-tl-korb:not(:disabled):hover, .ks-tl-korb:focus-visible { border-color: var(--akzent); }
.ks-tl-korb img, .ks-tl-korb-ort img { display: block; width: min(13rem, 60vw); height: auto; }
.ks-tl-gruppen { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 100%; }
.ks-tl-gruppe { display: grid; justify-items: center; gap: .3rem; padding: .3rem; border: 3px solid transparent; border-radius: var(--radius-s); }
.ks-tl-offen { border-color: var(--akzent); }
.ks-tl-ziel { display: block; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; min-width: 44px; min-height: 44px; }
.ks-tl-ziel:disabled { cursor: default; }
.ks-tl-ziel img { display: block; width: clamp(6.5rem, 26vw, 9rem); height: auto; }
.ks-tl-zurueck { min-width: 44px; min-height: 44px; }
.ks-tl-frage { margin: 0; font: 700 1.15rem var(--font-read); text-align: center; }
.ks-tl-rest, .ks-tl-probe { font: 700 clamp(1.2rem, 4.5vw, 1.7rem) var(--font-read); color: var(--ink-soft); }
/* Geld (Z.10a): Kasse und Geldbörse zum Antippen, Ablesen mit großem Bild. Münzen und Scheine sind Bilder in Knöpfen ≥ 44 px */
.ks-gd { display: grid; gap: .9rem; justify-items: center; }
.ks-gd-legen { display: grid; gap: .8rem; justify-items: center; width: 100%; }
.ks-gd-auftrag { margin: 0; max-width: 40rem; text-align: center; font: 700 clamp(1.2rem, 4.5vw, 1.8rem) var(--font-read); }
.ks-gd-kasse { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; max-width: 46rem; padding: .5rem; border-radius: var(--radius-s); background: var(--card); border: 2px solid var(--line); }
.ks-gd-stueck { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; margin: 0; padding: .2rem; border: 3px solid transparent; border-radius: var(--radius-s); background: none; cursor: pointer; }
.ks-gd-stueck:hover, .ks-gd-stueck:focus-visible { border-color: var(--akzent); }
.ks-gd-stueck img { display: block; pointer-events: none; }
.ks-gd-muenze { height: clamp(2.6rem, 9vw, 3.6rem); width: auto; }
.ks-gd-schein { width: clamp(5.5rem, 22vw, 8rem); height: auto; }
.ks-gd-boerse { display: grid; gap: .3rem; justify-items: center; width: min(46rem, 100%); min-height: 6rem; padding: .5rem; border: 3px dashed var(--line); border-radius: var(--radius-m, 14px); }
.ks-gd-boerse-name { font: 700 1rem var(--font-read); color: var(--ink-soft); }
.ks-gd-boerse-inhalt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem; }
.ks-gd-leer { color: var(--ink-soft); font-style: italic; }
.ks-gd-zwischen { margin: 0; font: 700 1.2rem var(--font-read); }
.ks-gd-ablesen { display: grid; gap: .5rem; justify-items: center; }
.ks-gd-frage { margin: 0; font: 700 clamp(1.1rem, 4vw, 1.5rem) var(--font-read); text-align: center; max-width: 36rem; }
.ks-gd-bild { display: block; max-width: min(100%, 36rem); height: auto; }
.ks-gd-gross { max-height: 9rem; width: auto; }
.ks-gd-wechsel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; }
.ks-gd-gleich, .ks-gd-fragezeichen { font: 700 clamp(1.4rem, 5vw, 2rem) var(--font-read); }
.ks-gd-werte { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; }
.ks-gd-wert { padding: .15rem .6rem; border-radius: 999px; background: var(--card); border: 2px solid var(--line); font: 700 clamp(1.2rem, 4.5vw, 1.6rem) var(--font-read); }
.ks-gd-ed-geld, .ks-gd-ed-wechsel, .ks-gd-ed-betrag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
/* Einkaufen (Z.10b): Zettel, Waren mit Preisschild, Kassenzettel über Kasse und Geldbörse; Wahlknöpfe groß */
.ks-ek { display: grid; gap: .9rem; justify-items: center; }
.ks-ek-oben { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .6rem; max-width: 100%; }
.ks-ek-regal { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ks-ek-ware { display: block; width: clamp(5.5rem, 22vw, 8rem); height: auto; }
.ks-ek-zettel, .ks-ek-bild { display: block; width: clamp(11rem, 50vw, 15rem); height: auto; max-width: 100%; }
.ks-ek-angebote { display: block; width: min(100%, 30rem); height: auto; }
.ks-ek-bezahlt, .ks-ek-hat { display: grid; justify-items: center; gap: .3rem; font: 700 1.1rem var(--font-read); }
.ks-ek-stueck { display: block; width: clamp(7rem, 30vw, 10rem); height: auto; }
.ks-ek-geld { display: block; max-width: min(100%, 22rem); height: auto; }
.ks-ek-knoepfe { gap: .6rem; }
.ks-ek-wahl { min-height: 52px; min-width: 8rem; font: 700 clamp(1.1rem, 4vw, 1.4rem) var(--font-read); }
.ks-ek-ed-teile { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ks-ek-ed-teil { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .15rem .35rem; border: 1px solid var(--line); border-radius: var(--radius-s); }
/* Uhr (Z.10c): die Lernuhr groß; Knöpfe zum Stellen in zwei Reihen; Sätze als große Knöpfe */
.ks-uh { display: grid; gap: .9rem; justify-items: center; }
.ks-uh-kopf { display: grid; gap: .5rem; justify-items: center; }
.ks-uh-uhr { display: block; width: clamp(12rem, 60vw, 17rem); height: auto; }
.ks-uh-knoepfe { display: grid; gap: .5rem; justify-items: center; }
.ks-uh-reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.ks-uh-name { min-width: 5.5rem; font: 700 1.1rem var(--font-read); text-align: right; }
.ks-uh-dreh { min-width: 52px; min-height: 52px; font: 700 1.3rem var(--font-read); }
.ks-uh-saetze { gap: .6rem; }
.ks-uh-satz { min-height: 52px; font: 700 clamp(1.1rem, 4vw, 1.4rem) var(--font-read); }
.ks-uh-ed-bild { width: 3rem; height: auto; }
/* Zeit und Kalender (Z.10d): Wochenleiste und Monate als Knöpfe, Kalenderblatt, Zeitleiste */
.ks-zt { display: grid; gap: .9rem; justify-items: center; }
.ks-zt-kopf { display: grid; gap: .5rem; justify-items: center; max-width: 100%; }
.ks-zt-kalender { display: block; width: clamp(15rem, 70vw, 21rem); height: auto; }
.ks-zt-leistebild { display: block; width: min(100%, 38rem); height: auto; }
.ks-zt-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr)); gap: .4rem; width: min(100%, 60rem); }
.ks-zt-monate { grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); }
.ks-zt-wahl { min-height: 52px; padding: .3rem .4rem; font: 700 clamp(1rem, 3.6vw, 1.25rem) var(--font-read); }
.ks-zt-heute { outline: 4px solid var(--akzent); outline-offset: 2px; }
.ks-zt-ed-zeit { min-height: 2.2rem; }
/* Morgenkreis (Z.10e, T5): Karten im Raster, „Erst fragen“ verdeckt die Antworten */
.ks-mk { display: grid; gap: 1rem; }
.ks-mk-einstellung { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.ks-mk-datum { font: 700 1.15rem var(--font-read); min-width: 12rem; text-align: center; }
.ks-mk-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: .8rem; }
.ks-mk-karte { display: grid; gap: .5rem; align-content: start; justify-items: center; padding: .8rem; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--card); }
.ks-mk-titel { margin: 0; font: 700 1.15rem var(--font-read); text-align: center; }
.ks-mk-antwort { display: grid; gap: .4rem; justify-items: center; }
.ks-mk-satz { margin: 0; font: 700 clamp(1.1rem, 4vw, 1.45rem) var(--font-read); text-align: center; }
.ks-mk-leise { margin: 0; color: var(--ink-soft); }
.ks-mk-verdeckt { min-height: 52px; min-width: 10rem; font: 700 1.2rem var(--font-read); }
.ks-mk-woche { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.ks-mk-tag { min-width: 2.4rem; padding: .2rem .3rem; border: 2px solid var(--line); border-radius: 8px; text-align: center; font: 700 1rem var(--font-read); }
.ks-mk-jetzt { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 18%, var(--card)); }
.ks-mk-kalender { width: min(100%, 15rem); height: auto; }
.ks-mk-uhr { width: min(100%, 11rem); height: auto; }
.ks-mk-buendel { max-width: 100%; height: auto; max-height: 12rem; }
.ks-mk-wetter { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.ks-mk-wetterknopf { min-width: 52px; min-height: 52px; font-size: 1.6rem; }
.ks-mk-wetterknopf.ks-an { outline: 4px solid var(--akzent); outline-offset: 2px; }
.ks-mk-leiste { display: flex; gap: .4rem; }
.ks-mk-leiste .btn, .ks-mk-einstellung .btn { min-width: 52px; min-height: 44px; }
/* Messen (Z.10f): das Lineal so breit wie möglich, Knöpfe zum Schieben und Wählen groß */
.ks-ms { display: grid; gap: .9rem; justify-items: center; }
.ks-ms-kopf { display: grid; gap: .5rem; justify-items: center; width: 100%; }
.ks-ms-lineal { display: block; width: min(100%, 52rem); height: auto; }
.ks-ms-ort { width: 100%; display: grid; justify-items: center; }
.ks-ms-zwei { display: block; max-width: min(100%, 40rem); height: auto; }
.ks-ms-schieben, .ks-ms-wahl { min-height: 52px; min-width: 7rem; font: 700 clamp(1.05rem, 4vw, 1.3rem) var(--font-read); }

/* Formen-Detektiv (Z.11a): Bild mit Knöpfen darüber — jede Form, jedes Ding im Suchbild ist ein Knopf.
   Ausgewählt: dicker Ring UND Haken (Farbe nie allein). Der Suchbereich dunkelt alles außer sich ab. */
.ks-fo { display: grid; gap: .9rem; justify-items: center; }
.ks-fo-kopf { display: grid; gap: .5rem; justify-items: center; width: 100%; }
.ks-fo-form { display: block; width: min(60vw, 14rem); height: auto; }
.ks-fo-wahl { min-height: 52px; min-width: 8rem; font: 700 clamp(1.05rem, 4vw, 1.3rem) var(--font-read); }
.ks-fo-reihe { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; width: 100%; }
.ks-fo-haufen, .ks-fo-szene { position: relative; width: min(100%, 40rem); }
.ks-fo-szene { overflow: hidden; border-radius: .6rem; }
.ks-fo-bild { display: block; width: 100%; height: auto; }
.ks-fo-platz, .ks-fo-ding { position: absolute; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 3px solid transparent; border-radius: 50%; cursor: pointer; }
.ks-fo-ding { border-radius: .6rem; }
.ks-fo-platz:focus-visible, .ks-fo-ding:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ks-fo-platz[aria-pressed="true"] { border: 5px solid #2e7a45; background: rgba(46, 154, 79, .14); }
.ks-fo-platz[aria-pressed="true"]::after { content: "✓"; position: absolute; top: -.35rem; right: -.35rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #2e9a4f; color: #fff; font: 700 1.1rem/1.7rem var(--font-read); text-align: center; }
.ks-fo-bereich { position: absolute; border: 4px dashed #f4c430; border-radius: .6rem; box-shadow: 0 0 0 999rem rgba(20, 24, 32, .45); pointer-events: none; }
.ks-fo-vorbild { margin: 0; display: grid; justify-items: center; gap: .2rem; font: 700 1.1rem var(--font-read); }
.ks-fo-vorbild img { width: 8rem; height: auto; }
.ks-fo-ed-anzahl { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.ks-fo-ed-anzahl .ks-rn-zahl { width: 3.5rem; }

/* Wo ist was? (Z.11b): Regal und Kiste mit Knöpfen darüber (leere Fächer, fünf Plätze), Sätze zur Wahl untereinander */
.ks-lg { display: grid; gap: .9rem; justify-items: center; }
.ks-lg-regal, .ks-lg-kiste { position: relative; width: min(100%, 34rem); }
.ks-lg-kiste { width: min(100%, 38rem); }
.ks-lg-bild { display: block; width: 100%; height: auto; }
.ks-lg-sicht { width: min(70vw, 18rem); }
.ks-lg-satzbild { width: min(100%, 26rem); }
.ks-lg-fach, .ks-lg-platz { position: absolute; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 3px dashed transparent; border-radius: .5rem; cursor: pointer; }
/* die Plätze um die Kiste sieht man immer (zart gestrichelt) — sonst weiß kein Kind, wohin es tippen kann */
.ks-lg-platz { border: 2px dashed rgba(141, 153, 173, .75); }
.ks-lg-fach:hover, .ks-lg-platz:hover { border-color: rgba(201, 154, 18, .8); }
.ks-lg-fach:focus-visible, .ks-lg-platz:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ks-lg-wahl { min-height: 52px; min-width: 8rem; font: 700 clamp(1.05rem, 4vw, 1.3rem) var(--font-read); }
.ks-lg-saetze { display: grid; gap: .6rem; width: min(100%, 34rem); }
.ks-lg-saetze .ks-lg-wahl { width: 100%; text-align: left; white-space: normal; }

/* Detektiv-Wege (Z.11c): Karte mit Feldern zum Antippen, Pfeilcode groß, Pfeilknöpfe als Kreuz */
.ks-wg { display: grid; gap: .8rem; justify-items: center; }
.ks-wg-karte { position: relative; width: min(100%, 32rem); }
.ks-wg-bild { display: block; width: 100%; height: auto; }
.ks-wg-feld { position: absolute; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 3px solid transparent; border-radius: .4rem; cursor: pointer; }
.ks-wg-feld:hover { border-color: rgba(45, 95, 168, .6); }
.ks-wg-feld:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.ks-wg-code { margin: 0; font: 700 clamp(1.4rem, 6vw, 2rem) var(--font-read); letter-spacing: .05em; text-align: center; }
.ks-wg-eigen { font-size: clamp(1.1rem, 4.5vw, 1.5rem); min-height: 1.6em; }
.ks-wg-pfeile { display: grid; grid-template-columns: repeat(3, 3.6rem); gap: .4rem; justify-content: center; }
.ks-wg-pfeil, .ks-wg-weg { min-height: 3.2rem; padding: 0; font: 700 1.6rem var(--font-read); }
.ks-wg-ed-steine { width: 9rem; }
.ks-wg-ed-abschnitt { display: inline-flex; gap: .2rem; align-items: center; }
.ks-wg-ed-abschnitt .ks-rn-zahl { width: 3.5rem; }

/* Strichliste (Z.11d, Vorsilbe ks-sli — ks-sl ist die Schrittleiste des Kerns, ks-st der Steckbrief der Kunst): Zählbild mit Knöpfen zum Abhaken (✓ UND Ring, Farbe nie allein), darunter je Sorte eine Zeile */
.ks-sli { display: grid; gap: .8rem; justify-items: center; }
.ks-sli-bild { position: relative; width: min(100%, 34rem); }
.ks-sli-zaehlbild { display: block; width: 100%; height: auto; }
.ks-sli-ding { position: absolute; min-width: 36px; min-height: 36px; padding: 0; background: transparent; border: 3px solid transparent; border-radius: 50%; cursor: pointer; }
.ks-sli-ding:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.ks-sli-ding[aria-pressed="true"] { border-color: #2e7a45; background: rgba(46, 154, 79, .12); }
.ks-sli-ding[aria-pressed="true"]::after { content: "✓"; position: absolute; top: -.4rem; right: -.4rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #2e9a4f; color: #fff; font: 700 .95rem/1.4rem var(--font-read); text-align: center; }
.ks-sli-tabelle { display: grid; gap: .5rem; width: min(100%, 40rem); }
.ks-sli-zeile { display: grid; grid-template-columns: minmax(7rem, auto) 1fr auto; gap: .5rem; align-items: center; padding: .4rem .6rem; border: 2px solid var(--line, #c9d1de); border-radius: .6rem; background: var(--card, #fff); }
.ks-sli-fertig { border-color: #2e9a4f; }
.ks-sli-sorte { display: flex; align-items: center; gap: .4rem; font: 700 1.15rem var(--font-read); }
.ks-sli-sorte img { width: 2.2rem; height: 2.2rem; }
.ks-sli-striche { height: 2.6rem; width: auto; max-width: 100%; justify-self: start; border-radius: .3rem; }
.ks-sli-knoepfe { gap: .35rem; flex-wrap: nowrap; }
.ks-sli-knoepfe .btn { min-height: 44px; min-width: 44px; font: 700 1.1rem var(--font-read); }
.ks-sli-ok { font: 700 1.6rem var(--font-read); color: #2e7a45; }
.ks-sli-hilfe { grid-column: 1 / -1; margin: 0; }
.ks-sli-kopf { display: grid; gap: .5rem; justify-items: center; width: 100%; }
.ks-sli-tabellenbild { display: block; width: min(100%, 30rem); height: auto; }
.ks-sli-lesen { display: grid; gap: .4rem; justify-items: start; }
@media (max-width: 30rem) {
  .ks-sli-zeile { grid-template-columns: 1fr; justify-items: start; }
}

/* Diagramm (Z.11e): Titel über dem Diagramm, Wahl mit Bild und Name, beim Bauen Tabelle neben dem Gitter, − und ＋ unter jeder Säule */
.ks-dg { display: grid; gap: .8rem; justify-items: center; }
.ks-dg-kopf { display: grid; gap: .5rem; justify-items: center; width: 100%; }
.ks-dg-figur { margin: 0; display: grid; gap: .3rem; justify-items: center; width: min(100%, 30rem); }
.ks-dg-titel { font: 700 1.15rem var(--font-read); }
.ks-dg-bild { display: block; width: 100%; height: auto; border-radius: .5rem; }
.ks-dg-wahl { min-height: 52px; display: inline-flex; align-items: center; gap: .4rem; font: 700 clamp(1.05rem, 4vw, 1.25rem) var(--font-read); }
.ks-dg-wahl img, .ks-dg-tabelle img { width: 2rem; height: 2rem; }
.ks-dg-bauen { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; width: 100%; }
.ks-dg-tabelle { border-collapse: collapse; font: 1.15rem var(--font-read); }
.ks-dg-tabelle th, .ks-dg-tabelle td { border: 2px solid var(--line, #c9d1de); padding: .3rem .6rem; text-align: left; }
.ks-dg-tabelle td img { vertical-align: middle; margin-right: .3rem; }
.ks-dg-zahl { font-weight: 700; text-align: center !important; }
.ks-dg-bauflaeche { width: min(100%, 30rem); display: grid; gap: .3rem; }
.ks-dg-saeulenknoepfe { display: grid; box-sizing: border-box; }
.ks-dg-paar { display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.ks-dg-paar .btn { min-width: 44px; min-height: 44px; padding: 0 .4rem; font: 700 1.3rem var(--font-read); }

/* Klassenumfrage (Z.11f, Tafel-Werkzeug T4): große Antwortknöpfe, darunter das Säulendiagramm (HTML, wächst mit), Strichliste, Fragen */
.ks-uf { display: grid; gap: 1rem; padding-bottom: 1rem; }
.ks-uf-einstellung { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; }
.ks-uf-einstellung select { min-height: 44px; font-size: 1.05rem; }
.ks-uf .btn-sm { min-height: 44px; }
.ks-uf-eigen { display: grid; gap: .4rem; justify-items: center; }
.ks-uf-feld { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ks-uf-feld input { min-height: 40px; font-size: 1.05rem; width: min(80vw, 22rem); }
.ks-uf-flaeche { display: grid; gap: 1rem; justify-items: center; }
.ks-uf-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ks-uf-antwort { display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.ks-uf-stimme { min-width: 7rem; min-height: 64px; display: flex; flex-direction: column; align-items: center; gap: .2rem; font: 700 1.1rem var(--font-read); }
.ks-uf-bild { width: 2.4rem; height: 2.4rem; }
.ks-uf-zeichen { font-size: 1.9rem; line-height: 1; }
.ks-uf-zurueck { min-width: 44px; min-height: 44px; }
.ks-uf-diagramm { position: relative; display: flex; gap: .8rem; align-items: flex-end; height: 16rem; padding: 0 0 0 2.4rem; border-bottom: 3px solid currentColor; border-left: 3px solid currentColor; width: min(100%, 36rem); box-sizing: border-box; }
.ks-uf-achse { position: absolute; left: 0; top: 0; bottom: 0; width: 2rem; }
.ks-uf-achse span { position: absolute; right: .3rem; transform: translateY(50%); font: .9rem var(--font-read); }
.ks-uf-spalte { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ks-uf-saeule { width: min(100%, 5rem); border: 2px solid #2e2118; border-bottom: 0; border-radius: .4rem .4rem 0 0; display: flex; justify-content: center; transition: height .3s ease; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .ks-uf-saeule { transition: none; } }
.ks-uf-zahl { margin-top: -1.6rem; font: 700 1.2rem var(--font-read); }
.ks-uf-diagrammblock { width: min(100%, 36rem); display: grid; gap: .3rem; }
.ks-uf-diagrammblock .ks-uf-diagramm { width: 100%; }
.ks-uf-namen { display: flex; gap: .8rem; padding-left: 2.4rem; }
.ks-uf-name { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; font: 700 .95rem var(--font-read); text-align: center; overflow-wrap: anywhere; }
.ks-uf-name .ks-uf-bild { width: 1.8rem; height: 1.8rem; }
.ks-uf-name .ks-uf-zeichen { font-size: 1.4rem; }
.ks-uf-mehr summary { cursor: pointer; font: 700 1.05rem var(--font-read); min-height: 44px; display: flex; align-items: center; }
.ks-uf-striche th { text-align: left; padding-right: .6rem; font: 1rem var(--font-read); }
.ks-uf-striche img { height: 2.2rem; width: auto; }
.ks-uf-fragen { display: grid; gap: .5rem; width: min(100%, 36rem); }
.ks-uf-frage { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: .4rem .6rem; border: 2px solid var(--line, #c9d1de); border-radius: .5rem; }
.ks-uf-frage p { margin: 0; font: 1.05rem var(--font-read); }
.ks-uf-loesung { font-weight: 700 !important; }
.ks-uf-aufdecken { min-height: 44px; }

/* Symmetrie (Z.11h): Figur groß, Wahlknöpfe darunter; beim Ergänzen das Raster des Kerns */
.ks-sy { display: grid; gap: .8rem; justify-items: center; }
.ks-sy-bild { display: block; width: min(100%, 22rem); height: auto; border-radius: .5rem; }
.ks-sy-wahl { min-height: 52px; display: inline-flex; align-items: center; gap: .4rem; font: 700 clamp(1.05rem, 4vw, 1.25rem) var(--font-read); }
.ks-sy-wahl img { width: 28px; height: 28px; }
.ks-sy-raster { width: min(100%, 26rem); }
/* am Handy greift das Raster etwas in den Seitenrand, damit 8 Kästchen je mindestens 36 px haben */
@media (max-width: 24rem) { .ks-sy-raster { width: calc(100% + 1rem); margin-inline: -.5rem; } }
.ks-sy-ed-zeile select { max-width: 100%; }
.ks-sy-anleitung { margin: 0; font: 1.05rem var(--font-read); color: var(--ink-soft); text-align: center; }
.ks-sy-zaehler { margin: 0; font: 700 1.1rem var(--font-read); }
.ks-sy-zeichnen { position: relative; width: min(100%, 24rem); aspect-ratio: 1; }
.ks-sy-zeichnen .ks-sy-bild { width: 100%; }
/* Punkte am Rahmen: unsichtbare Knöpfe von 44 px über den gezeichneten Punkten */
.ks-sy-punkt { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; touch-action: manipulation; }
.ks-sy-punkt::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 3px solid transparent; }
@media (hover: hover) { .ks-sy-punkt:hover::after { border-color: var(--blue, #2f6fd0); } }
.ks-sy-punkt.ks-gewaehlt::after { inset: 8px; border: 5px solid var(--blue, #2f6fd0); background: rgba(47, 111, 208, .25); }
.ks-sy-punkt.ks-sy-leuchtet::after { inset: 6px; border: 5px solid var(--amber, #e8a10c); animation: ks-ra-puls 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ks-sy-punkt.ks-sy-leuchtet::after { animation: none; } }
.ks-sy-suche { width: min(100%, 24rem); cursor: pointer; border-radius: .5rem; touch-action: manipulation; }
.ks-sy-suche .ks-sy-bild { width: 100%; }
.ks-sy-gefunden { margin: 0; font: 700 1.1rem var(--font-read); color: var(--green); text-align: center; }

/* Sachaufgabe in Schritten (Z.12a, Vorsilbe ks-sa): oben die Schritte (✓ und Rahmen, Farbe nie allein), die Aufgabe als Karte;
   je nach Schritt sind Sätze, Zahlen oder Wörter Knöpfe (mindestens 44 px). Gefunden: Frage unterstrichen, Zahlen umkreist, Hinweiswörter hinterlegt */
.ks-sa { display: grid; gap: .8rem; justify-items: center; }
.ks-sa-schritte { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: 0; padding: 0; }
.ks-sa-schritt { padding: .2rem .65rem; border: 2px solid var(--line, #c9d1de); border-radius: 999px; font: 700 .95rem var(--font-read); color: var(--ink-soft); }
.ks-sa-schritt.ks-sa-fertig { border-color: #2e9a4f; color: var(--ink); background: var(--green-soft); }
.ks-sa-schritt.ks-sa-dran { border-color: var(--brand); border-width: 3px; color: var(--ink); background: var(--card, #fff); }
.ks-sa-karte { position: relative; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; width: min(100%, 44rem); padding: .9rem 2.8rem .9rem 1rem; border: 2px solid var(--line, #c9d1de); border-radius: .8rem; background: var(--card, #fff); box-sizing: border-box; }
.ks-sa-bild { width: min(100%, 16rem); height: auto; border-radius: .4rem; }
.ks-sa-text { flex: 1 1 18rem; font: 600 clamp(1.15rem, 4.2vw, 1.55rem)/1.9 var(--font-read); }
.ks-sa-vorlesen { position: absolute; top: .4rem; right: .4rem; }
.ks-sa-satz { display: inline; padding: .25rem .3rem; min-height: 44px; font: inherit; line-height: inherit; color: inherit; text-align: left; background: transparent; border: 2px dashed var(--line, #c9d1de); border-radius: .4rem; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; touch-action: manipulation; }
.ks-sa-satz:hover, .ks-sa-satz:focus-visible { border-color: var(--brand); outline: none; }
.ks-sa-tok { display: inline-block; min-height: 44px; min-width: 44px; padding: 0 .3rem; margin: .1rem 0; font: inherit; line-height: 1.6; color: inherit; background: transparent; border: 2px dashed var(--line, #c9d1de); border-radius: .4rem; cursor: pointer; touch-action: manipulation; }
.ks-sa-tok:hover, .ks-sa-tok:focus-visible { border-color: var(--brand); outline: none; }
.ks-sa-frage { text-decoration: underline wavy var(--brand); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.ks-sa-umkreist { border: 3px solid #2e9a4f !important; border-radius: 999px; padding: 0 .3rem; }
.ks-sa-z.ks-sa-umkreist { display: inline-block; line-height: 1.3; }
.ks-sa-hinweis { background: var(--amber-soft); border-bottom: 3px solid #c47f12; border-radius: .25rem; }
.ks-sa-tipp { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .25em; text-decoration-color: #d9483b; }
.ks-sa-heft { display: grid; gap: .2rem; width: min(100%, 44rem); padding: .5rem 1rem; border-left: 4px solid var(--brand); box-sizing: border-box; }
.ks-sa-heft-zeile { margin: 0; font: 600 clamp(1.1rem, 4vw, 1.4rem) var(--font-read); }
.ks-sa-wahl { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ks-sa-rechnung, .ks-sa-pruefen { min-height: 56px; min-width: 8rem; font: 800 clamp(1.4rem, 5.5vw, 2rem) var(--font-read); }
.ks-sa-saetze { flex-direction: column; align-items: stretch; width: min(100%, 36rem); }
.ks-sa-antwort { min-height: 52px; font: 700 clamp(1.05rem, 4vw, 1.35rem) var(--font-read); white-space: normal; text-align: left; }
.ks-sa-rechnen { display: grid; gap: .6rem; justify-items: center; }
.ks-sa-ed-text { margin: .3rem 0 0; flex-basis: 100%; }

/* Fehler-Detektiv (Z.12b, Vorsilbe ks-fd): Malias Notizbuch — liniertes Blatt, je Rechnung eine Zeile; beim Finden ein Knopf (≥ 44 px).
   Falsch: ✗ und roter Rand, Malias Zahl durchgestrichen, die richtige grün daneben; richtig: ✓ (Zeichen UND Farbe) */
.ks-fd { display: grid; gap: .8rem; justify-items: center; }
.ks-fd-buch { width: min(100%, 30rem); padding: .6rem 1rem 1rem 2.4rem; border: 2px solid var(--line, #c9d1de); border-radius: .4rem .9rem .9rem .4rem; box-sizing: border-box;
  background: var(--card, #fff) linear-gradient(90deg, transparent 1.7rem, rgba(217, 72, 59, .45) 1.7rem, rgba(217, 72, 59, .45) calc(1.7rem + 2px), transparent calc(1.7rem + 2px)); }
.ks-fd-kopf { margin: 0 0 .4rem; font: 700 1rem var(--font-read); color: var(--ink-soft); }
.ks-fd-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ks-fd-zeile { display: grid; gap: .1rem; border-bottom: 1px solid var(--line, #c9d1de); padding-bottom: .25rem; }
.ks-fd-rechnung { display: flex; align-items: center; gap: .35rem; min-height: 48px; padding: .1rem .5rem; font: 700 clamp(1.35rem, 5.5vw, 1.9rem) var(--font-read); color: var(--ink); background: transparent; border: 2px solid transparent; border-radius: .5rem; text-align: left; }
button.ks-fd-rechnung { cursor: pointer; border: 2px dashed var(--line, #c9d1de); touch-action: manipulation; }
button.ks-fd-rechnung:hover, button.ks-fd-rechnung:focus-visible { border-color: var(--brand); outline: none; }
.ks-fd-falsch .ks-fd-rechnung { border: 3px solid #d9483b; }
.ks-fd-richtig .ks-fd-rechnung { border-color: #2e9a4f; }
.ks-fd-dran .ks-fd-rechnung { border: 3px solid var(--brand); background: var(--blue-soft); }
.ks-fd-weg { text-decoration: line-through; text-decoration-color: #d9483b; text-decoration-thickness: 3px; opacity: .75; }
.ks-fd-neu { color: var(--green); }
.ks-fd-zeichen { margin-left: auto; font-size: 1.3em; }
.ks-fd-x { color: #d9483b; }
.ks-fd-ok { color: var(--green); }
.ks-fd-probe { padding-left: .6rem; font: 600 1rem var(--font-read); color: var(--ink-soft); }
.ks-fd-rechnung .ks-zfg-feld { font-size: .9em; }
.ks-fd-wahl { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ks-fd-art { min-height: 52px; font: 700 clamp(1.05rem, 4vw, 1.3rem) var(--font-read); white-space: normal; }
.ks-fd-ed-seiten { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .6rem; }
.ks-fd-ed-zeile .ks-rn-zahl { width: 4.5rem; }

/* Würfel und Glücksrad (Z.11g, Tafel-Werkzeug T3): Würfel bzw. Rad groß, daneben die Strichliste, darunter sicher/möglich/unmöglich */
.ks-gr { display: grid; gap: 1rem; padding-bottom: 1rem; }
.ks-gr .btn-sm { min-height: 44px; }
.ks-gr-einstellung { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; }
.ks-gr-einstellung select { min-height: 44px; font-size: 1.05rem; }
.ks-gr-modus.ks-an { outline: 3px solid var(--brand); }
.ks-gr-felder { display: grid; gap: .4rem; justify-items: center; flex-basis: 100%; }
.ks-gr-felder summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.ks-gr-felder input { min-height: 40px; font-size: 1.05rem; width: min(70vw, 14rem); }
.ks-gr-mitte { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: flex-start; }
.ks-gr-buehne { display: grid; gap: .8rem; justify-items: center; min-width: min(100%, 18rem); }
.ks-gr-wurf { display: flex; gap: .8rem; justify-content: center; min-height: 6rem; align-items: center; }
.ks-gr-wuerfel { width: 6rem; height: 6rem; }
.ks-gr-zahl { display: grid; place-items: center; width: 6rem; height: 6rem; border: 4px solid currentColor; border-radius: 1rem; font: 700 2.6rem var(--font-read); }
.ks-gr-summe { margin: 0; font: 700 1.4rem var(--font-read); }
.ks-gr-los { min-height: 56px; min-width: 10rem; font: 700 1.3rem var(--font-read); }
.ks-gr-radrahmen { position: relative; display: grid; justify-items: center; }
.ks-gr-zeiger { font-size: 2.2rem; line-height: 1; color: #d9483b; margin-bottom: -.5rem; z-index: 1; }
.ks-gr-radfenster { display: block; width: min(80vw, 18rem); aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
.ks-gr-rad { display: block; width: 100%; height: auto; }
.ks-gr-dreht { transition: transform 2.4s cubic-bezier(.15, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .ks-gr-dreht { transition: none; } }
.ks-gr-liste h3, .ks-gr-fragen h3 { margin: 0 0 .4rem; font: 700 1.1rem var(--font-read); }
.ks-gr-striche th { text-align: right; padding-right: .6rem; font: 700 1rem var(--font-read); }
.ks-gr-striche img { height: 2rem; width: auto; }
.ks-gr-anzahl { padding-left: .6rem; font: 1rem var(--font-read); }
.ks-gr-fragen { display: grid; gap: .5rem; width: min(100%, 36rem); justify-self: center; }
.ks-gr-aufdecken { min-height: 44px; }
/* Päckchen-Detektiv (Z.5b): Zeilen untereinander; beim Suchen ist jede Zeile ein Knopf. Wurzel .ks-pc — .ks-pk ist die Karte auf dem Blatt */
.ks-pc { --feld: clamp(2.9rem, 13vw, 3.8rem); display: grid; gap: .9rem; justify-items: center; }
.ks-pc .ks-zfg-feld { font-size: clamp(1.3rem, 5.5vw, 2rem); }
.ks-pc-paeckchen { display: grid; gap: .35rem; }
.ks-pc-zeile { display: flex; align-items: center; gap: .3rem; padding: .15rem .4rem; border: 3px solid transparent; border-radius: var(--radius-s); background: none; color: inherit; font: inherit; }
.ks-pc-wahl { cursor: pointer; border-color: var(--line); background: var(--card); }
.ks-pc-wahl:hover { border-color: var(--akzent); }
.ks-pc-wahl:focus-visible { outline: 4px solid var(--akzent); outline-offset: 2px; }
.ks-pc-wahl .ks-zfg-feld { pointer-events: none; }
.ks-pc-stoer { border-color: var(--akzent); border-style: dashed; }
.ks-pc-veraenderung { margin: 0; font: 700 1.05rem var(--font-read); color: var(--ink-soft); text-align: center; max-width: 34rem; }
.ks-pc-saetze { display: grid; gap: .5rem; width: min(100%, 34rem); }
.ks-pc-satz { min-height: var(--tap, 44px); text-align: left; font: 700 1.05rem var(--font-read); white-space: normal; }
/* Rechenkartei (Z.5c): eine große Karteikarte; hinten mit Lösung (blau, fett, unterstrichen) */
.ks-kt { display: grid; gap: .9rem; justify-items: center; }
.ks-kt-stapel { margin: 0; font: 700 1rem var(--font-read); color: var(--ink-soft); }
.ks-kt-karte { position: relative; display: grid; gap: .6rem; justify-items: center; width: min(100%, 30rem); min-height: 11rem; box-sizing: border-box; padding: 1.4rem 1rem 1rem;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 25%, transparent); }
.ks-kt-hinten { background: color-mix(in srgb, #2e9a4f 8%, var(--card)); border-style: dashed; }
.ks-kt-aufgabe { margin: 0; font: 800 clamp(2rem, 9vw, 3.4rem) var(--font-read); text-align: center; overflow-wrap: anywhere; }
.ks-kt-loesung { color: #1d4fa8; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
html[data-theme="dark"] .ks-kt-loesung { color: #8fb4ff; }
.ks-kt-wieder { margin: 0; font: 700 .95rem var(--font-read); color: var(--ink-soft); }
.ks-kt-bild { max-width: 100%; height: auto; }
.ks-kt-karte .ks-vorlesen { position: absolute; top: .4rem; right: .4rem; }
.ks-kt-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ks-kt-knoepfe .btn { min-height: 52px; min-width: 9rem; font-size: 1.15rem; }
/* Rechengeschichten (Z.5c): Geschichte groß, Bild vorher → nachher, Wahl als Knöpfe */
.ks-rg { display: grid; gap: .9rem; justify-items: center; }
.ks-rg-text { margin: 0; max-width: 38rem; font: 700 clamp(1.15rem, 4.2vw, 1.6rem) var(--font-read); text-align: center; line-height: 1.35; }
.ks-rg-bild, .ks-rg-plaettchen { max-width: 100%; height: auto; }
.ks-rg-wahl { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ks-rg-aufgabe { min-height: 56px; min-width: 7.5rem; font: 800 clamp(1.5rem, 6vw, 2.1rem) var(--font-read); }
.ks-rg-bilder { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; width: min(100%, 34rem); }
.ks-rg-bildwahl { display: block; width: 100%; padding: .35rem; border: 3px solid var(--line); border-radius: var(--radius-s); background: var(--card); cursor: pointer; }
.ks-rg-bildwahl:hover { border-color: var(--akzent); }
.ks-rg-bildwahl:focus-visible { outline: 4px solid var(--akzent); outline-offset: 2px; }
.ks-rg-bildwahl img { display: block; width: 100%; height: auto; }
.ks-rg-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.ks-rg-zeichenwahl { display: inline-flex; gap: .35rem; }
.ks-rg-zeichen { min-height: 52px; font: 800 1.2rem var(--font-read); }
.ks-rg-ed-text { margin: .3rem 0 0; }
/* Zahlen hören */
.ks-hz { display: grid; gap: 1rem; justify-items: center; }
.ks-hz-hoer { min-height: 4.4rem; padding-inline: 2.2rem; font-size: clamp(1.5rem, 5.5vw, 2rem); }
.ks-hz-wort { font: 800 clamp(1.8rem, 7vw, 3.4rem) var(--font-read); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.ks-hz-geschrieben { margin: 0; font-size: 1.25rem; text-align: center; }
.ks-hz-ze { display: flex; gap: .3rem; font: 800 1.3rem var(--font-read); }
.ks-hz-ze span { display: grid; place-items: center; width: 3rem; height: 2.4rem; border: 3px solid var(--akzent); border-radius: 6px; color: var(--akzent); }
/* Größer, kleiner, gleich: drei große Knöpfe mit Zeichen UND Wort */
.ks-vg { display: grid; gap: 1rem; justify-items: center; }
.ks-vg-aufgabe { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em; }
.ks-vg-kreis { color: var(--ink-soft); }
.ks-vg-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ks-vg-zeichen { display: grid; justify-items: center; gap: .1rem; min-width: 5.5rem; min-height: 5rem; padding: .4rem .9rem; }
.ks-vg-z { font: 800 2.6rem var(--font-read); line-height: 1; }
.ks-vg-wort { font-size: 1rem; }
.ks-vg-ed-seite { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
/* Mathe Z.6a: Rechenbild (Bild aus Kästchen + Aufgaben mit Farbe) */
.ks-ed-titel { margin: .8rem 0 .2rem; font: 700 1.05rem var(--font-read); }
.ks-rcb { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; }
@media (min-width: 60rem) { .ks-rcb { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.ks-rcb .ks-ra-rahmen.ks-rcb-bild { container-type: inline-size; }
.ks-rcb-arbeit { display: grid; gap: .8rem; justify-items: center; width: 100%; }
.ks-rcb-aufgaben { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.ks-rcb-aufgabe { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap, 44px); padding: .2rem .7rem; border: 2px solid var(--line);
  border-radius: var(--radius-s); background: var(--card); color: var(--ink); font: 700 1.05rem var(--font-read); cursor: pointer; }
.ks-rcb-aufgabe.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px var(--blue); }
.ks-rcb-aufgabe.ks-geloest { border-color: var(--green); color: var(--green); cursor: default; opacity: .8; }
.ks-farbfeld.ks-rcb-klecks { width: 1.5rem; height: 1.5rem; border-radius: 6px; flex: none; }
.ks-farbfeld.ks-rcb-jetzt { width: 2.4rem; height: 2.4rem; }
.ks-rcb-name { font-weight: 400; }
.ks-rcb-ok { font-weight: 800; }
/* Mathe Z.6a: Geheimcode */
.ks-gc { display: grid; gap: 1rem; justify-items: center; }
.ks-gc-wort { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.ks-gc-wort li { display: grid; justify-items: center; gap: .15rem; }
.ks-gc-kasten { width: 3.2rem; height: 3.6rem; display: grid; place-items: center; border: 3px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--ink); font: 800 2rem var(--font-read); cursor: pointer; }
.ks-gc-kasten.ks-gewaehlt { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px var(--blue); }
.ks-gc-kasten.ks-geloest { border-color: var(--green); color: var(--green); cursor: default; }
.ks-gc-kasten:disabled { opacity: 1; }
.ks-gc-nr { font: 400 .85rem var(--font-read); color: var(--ink-soft); }
.ks-gc-tabelle { display: grid; gap: 0; max-width: 100%; overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--radius-s); background: var(--card); }
.ks-gc-zeile { display: flex; }
.ks-gc-zeile + .ks-gc-zeile { border-top: 2px solid var(--ink); }
.ks-gc-zeile span { min-width: 2.4rem; padding: .3rem .4rem; text-align: center; font: 700 1.15rem var(--font-read); border-left: 1px solid var(--line); }
.ks-gc-zeile .ks-gc-kopf { min-width: 5.5rem; text-align: left; border-left: 0; font-weight: 400; font-size: .95rem; }
.ks-gc-buchstabe { font-weight: 800; }
.ks-gc-fuer { font: 700 1rem var(--font-read); color: var(--ink-soft); }
.ks-gc-geschafft { margin: 0; font: 800 clamp(1.4rem, 5vw, 2rem) var(--font-read); }
.ks-gc-ed-buchstabe { min-width: 1.6rem; font: 800 1.3rem var(--font-read); text-align: center; }
.ks-gc-ed-ablenker { width: 3rem; text-align: center; text-transform: uppercase; }
.ks-ed-zeile > input.ks-gc-ed-ablenker { flex: 0 0 3.5rem; min-width: 0; }
/* Mathe Z.6a: Blätter Rechenbild (Legende mit Aufgaben) und Geheimcode */
.ks-rb-aufgaben .ks-pk-farbe { margin: 0; }
.ks-rb-legende.ks-rb-aufgaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 3mm 8mm; width: 100%; }
.ks-rb-rechnung { display: inline-flex; align-items: center; gap: 1.2mm; font: 700 14pt var(--font-read); white-space: nowrap; }
.ks-rb-rechnung .ks-kasten { width: 10mm; height: 8mm; }
.ks-rb-rechenbild .ks-rb-zelle { font-size: 9pt; }
.ks-code-blatt { display: grid; gap: 7mm; justify-items: center; }
.ks-code-tabelle { border-collapse: collapse; font: 700 13pt var(--font-read); }
.ks-code-tabelle th, .ks-code-tabelle td { border: .4mm solid #1d1a16; padding: 1.5mm 2.2mm; text-align: center; }
.ks-code-tabelle th { font-weight: 400; font-size: 11pt; text-align: left; }
.ks-code-b { font-weight: 800; }
.ks-code-aufgaben { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm 10mm; width: 100%; margin: 0; padding: 0; }
.ks-code-aufgaben li { display: flex; align-items: center; gap: 2.5mm; font: 700 14pt var(--font-read); }
.ks-code-aufgaben .ks-kasten { width: 10mm; height: 9mm; }
.ks-code-aufgaben .ks-nr { display: inline-grid; place-items: center; min-width: 0; width: 6.5mm; height: 6.5mm; margin-right: 1.5mm; border-radius: 50%; background: #1d1a16; color: #fff; font: 700 10pt var(--font-read); text-align: center; }
.ks-code-wort { display: grid; justify-items: center; gap: 2mm; }
.ks-code-wort-titel { margin: 0; font: 700 13pt var(--font-read); }
.ks-code-kaesten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5mm; }
.ks-code-kaesten li { display: grid; justify-items: center; gap: 1mm; }
.ks-code-kaesten .ks-kasten { width: 12mm; height: 13mm; font-size: 18pt; }
.ks-code-nr { font: 400 9pt var(--font-read); }

/* --- Mathe Z.6b: Ich-kann-Liste und Wortkarten --------------------------------------------------- */
/* Mathe Z.12a: Sachaufgaben auf Papier — Text, darunter F / R / A mit Linien */
.ks-sach-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5mm; }
.ks-sach { display: flex; gap: 2mm; align-items: flex-start; break-inside: avoid; }
.ks-sach-inhalt { flex: 1; display: grid; gap: 1.5mm; }
.ks-sach-kopf { display: flex; gap: 4mm; align-items: flex-start; }
.ks-sach-bild .ks-bild { display: block; max-width: 45mm; max-height: 32mm; object-fit: contain; }
.ks-sach-text { margin: 0; font-size: 13pt; line-height: 1.5; }
.ks-sach-feld { display: flex; gap: 3mm; align-items: flex-start; }
.ks-sach-kurz { min-width: 6mm; font-size: 13pt; line-height: 7mm; padding-top: .5mm; } /* bei zwei Linien (zwei Rechenschritte) steht „R:“ an der ersten */
.ks-sach-linien { flex: 1; display: grid; gap: 1.5mm; }
.ks-sach-linien .ks-linie { min-width: 0; width: 100%; box-sizing: border-box; }
.ks-ik-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ks-ik-zeile { display: grid; grid-template-columns: 30mm 1fr auto; align-items: center; gap: 4mm; padding: 2mm 0; border-bottom: 1px solid var(--p-line); break-inside: avoid; }
.ks-ik-zeile:not(:has(.ks-ik-bild)) { grid-template-columns: 1fr auto; }
.ks-ik-bild .ks-bild { display: block; max-width: 30mm; max-height: 18mm; margin: 0 auto; object-fit: contain; }
.ks-ik-text { font-size: 13pt; }
.ks-ik-skala { display: flex; gap: 3mm; }
.ks-ik-wahl { display: grid; justify-items: center; gap: .5mm; min-width: 13mm; }
.ks-ik-zeichen { font-size: 20pt; line-height: 1; }
.ks-ik-wort { font-size: 8pt; color: var(--p-soft); }
.ks-unsichtbar { visibility: hidden; }
.ks-wortkarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ks-wk-karte { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 2mm; height: 50mm;
  padding: 3mm; border: 1.5px dashed var(--p-line); margin: -0.75px; break-inside: avoid; }
.ks-wk-bild .ks-bild { display: block; max-width: 70mm; max-height: 30mm; object-fit: contain; }
.ks-wk-malen { width: 60mm; height: 30mm; border: 1.5px solid var(--p-line); border-radius: 2mm; display: grid; place-items: center; font-size: 9pt; color: var(--p-soft); }
.ks-wk-wort { font-size: 26pt; font-weight: 700; letter-spacing: .02em; }

/* --- Mathe Z.8: Zahlenraum 100 ------------------------------------------------------------------
   Hunderterfeld, Hundertertafel, Stellenwerttafel mit Bündelmaterial (Arbeitsmittel), dazu die Tafeln von
   Stellenwerte, Hundertertafel, Zahlenstrahl und Rechenstrich. Jede Fläche zum Antippen mindestens 44 px (Regel 12). */
.ks-hf { display: grid; gap: .6rem; justify-items: center; width: 100%; }
.ks-hf-bild { width: min(100%, 26rem); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ks-hf-bild svg { display: block; width: 100%; height: auto; }
.ks-hf-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ks-hf-knopf { min-width: var(--tap, 44px); min-height: var(--tap, 44px); font-weight: 800; }

.ks-ht { display: grid; grid-template-columns: repeat(10, 1fr); width: min(100%, 30rem); border: 3px solid var(--ink); background: var(--card); }
.ks-ht-feld { aspect-ratio: 1; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 600 clamp(.7rem, 2.6vw, 1.05rem) var(--font-read); cursor: pointer; touch-action: manipulation; }
.ks-ht-feld:nth-child(10n + 5) { border-right: 3px solid var(--ink); }
.ks-ht-feld:nth-child(n + 41):nth-child(-n + 50) { border-bottom: 3px solid var(--ink); }
.ks-ht-an { background: #ffe08a; color: #2e2118; font-weight: 900; outline: 3px solid #2e2118; outline-offset: -3px; }
.ks-ht-feld:focus-visible { outline: 3px solid var(--akzent); outline-offset: -2px; }

.ks-sw { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: min(100%, 40rem); border: 3px solid var(--ink); background: #f6f8fc; color: #2e2118; }
.ks-sw-spalte { display: grid; grid-template-rows: auto 1fr auto auto auto; gap: .4rem; min-width: 0; padding-bottom: .5rem; border-left: 3px solid var(--ink); }
.ks-sw-spalte:first-child { border-left: 0; }
.ks-sw-kopf { display: flex; align-items: baseline; justify-content: center; gap: .4rem; margin: 0; padding: .3rem; background: var(--stelle); color: #fff; font-size: 1rem; }
.ks-sw-buchstabe { font: 800 1.6rem var(--font-read); }
.ks-sw-name { font-size: .85rem; font-weight: 700; }
.ks-sw-material { display: grid; place-items: start center; min-height: 6rem; padding: .3rem; }
.ks-sw-material svg { display: block; width: 100%; max-width: 12rem; height: auto; }
.ks-sw-ziffer { text-align: center; font: 800 2rem var(--font-read); border-top: 2px solid #2e2118; }
.ks-sw-knoepfe, .ks-sw-buendel { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; padding-inline: .3rem; }
.ks-sw-knoepfe .btn { min-width: var(--tap, 44px); min-height: var(--tap, 44px); font-size: 1.3rem; font-weight: 800; }
.ks-sw-buendel .btn { min-height: var(--tap, 44px); font-size: .85rem; white-space: normal; }
.ks-sw .btn[hidden] { display: none; }
.ks-sw-voll .ks-sw-material { background: color-mix(in srgb, var(--stelle) 12%, transparent); }
.ks-swt { display: grid; gap: 1rem; justify-items: center; }
.ks-swt-frage { font: 700 clamp(1.3rem, 4.5vw, 2rem) var(--font-read); }
.ks-swt-bild { width: min(100%, 34rem); max-height: 40vh; }
.ks-swt-material { display: grid; place-items: center; width: 100%; }
.ks-sw-ed-stellen { display: inline-flex; align-items: center; gap: .25rem; }
.ks-sw-ed-stellen .ks-rn-zahl { width: 4rem; }
.ks-ed-arten { display: flex; flex-wrap: wrap; gap: .3rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .4rem .8rem; }

.ks-hta { display: grid; grid-template-columns: repeat(3, var(--feld)); grid-template-rows: repeat(3, var(--feld)); }
.ks-hta-platz { display: grid; margin: -1.5px; }
.ks-hta-platz .ks-zfg-feld { border-width: 3px; }
.ks-hta-klein { --feld: 2.9rem; gap: 2px; }
.ks-hta-ed { min-width: 0; min-height: var(--tap, 44px); padding: 0; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 700 1rem var(--font-read); cursor: pointer; }
.ks-hta-ed-leer { border-style: dashed; color: var(--ink-soft); background: color-mix(in srgb, var(--card) 70%, var(--line)); }
.ks-htp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.ks-htp-pfeil, .ks-htp-pfeile { font: 800 clamp(1.8rem, 7vw, 2.8rem) var(--font-read); line-height: 1; }
.ks-htp-pfeile { letter-spacing: .15em; padding-inline: .4rem; }
.ks-htp-ed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.ks-htp-ed-weg { min-width: 4rem; font-size: 1.3rem; font-weight: 800; }
.ks-ed-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.ks-ed-fehlt { outline: 2px dashed #c0392b; outline-offset: 2px; }
.ks-ed-klein { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; }

.ks-zst { display: grid; gap: 1rem; justify-items: center; width: 100%; }
.ks-zst-bild, .ks-zst-material { width: min(100%, 48rem); }
.ks-zst-strahl { display: block; width: 100%; height: auto; }
.ks-zs-mini { height: 2rem; }

.ks-rst .ks-zfg-figur { width: 100%; overflow-x: auto; }
.ks-rs-figur { display: grid; gap: .8rem; justify-items: center; }
.ks-rs { --feld: clamp(2.8rem, 11vw, 4.4rem); display: grid; grid-template-rows: auto 2.2rem 0 auto; align-items: end; padding-inline: .9rem; }
.ks-rs-sprung { display: flex; align-items: center; justify-content: center; gap: .2rem; padding-bottom: .2rem; color: #2f6fd0; font: 800 clamp(1.3rem, 5vw, 2rem) var(--font-read); }
.ks-rs-sprung .ks-zfg-feld { border-color: #2f6fd0; }
.ks-rs-bogen { align-self: stretch; margin-inline: calc(var(--feld) / -2.4); border: 4px solid #2f6fd0; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; position: relative; }
.ks-rs-bogen::after { content: ""; position: absolute; right: -9px; bottom: -2px; border: 8px solid transparent; border-top: 12px solid #2f6fd0; }
.ks-rs-links .ks-rs-bogen::after { right: auto; left: -9px; }
.ks-rs-linie { align-self: start; border-top: 4px solid var(--ink); margin-inline: -.8rem; }
.ks-rs-strich { align-self: start; justify-self: center; width: 4px; height: 1.4rem; margin-top: -.7rem; background: var(--ink); }
.ks-rs-station { padding-top: .9rem; justify-self: center; }
.ks-rs-zusammen { display: flex; align-items: center; gap: .5rem; margin: 0; font: 800 clamp(1.4rem, 5vw, 2.2rem) var(--font-read); }
.ks-rs-zusammen .ks-zfg-feld { width: calc(var(--feld) * 1.1); }