/* Lernwelt – eine Waldlichtung. Der Steinweg mit dem Fuchs ist das eine auffällige Element; alles andere ist ruhig.
   Kinderbereich ohne Text, grosse Bildknöpfe. Elternbereich: ruhige Textseiten. Hell und dunkel. */
@font-face { font-family: "Lernwelt Schrift"; src: url("../fonts/lernwelt-schrift-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lernwelt Schrift"; src: url("../fonts/lernwelt-schrift-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --wiese: #eaf3e2;        /* Hintergrund */
  --wiese-2: #d7e9c8;
  --moos: #2f6b4f;         /* Hauptfarbe */
  --moos-hell: rgba(47, 107, 79, .1);
  --fuchs: #e8772e;        /* Akzent: Start, Fuchs */
  --fuchs-dunkel: #c95e1c;
  --stein: #ddd5c4;
  --stein-rand: #b9ae97;
  --rinde: #3b2a1f;        /* Text */
  --rinde-2: #6b5646;
  --creme: #fffaf0;        /* Flächen */
  --sonne: #f4c542;
  --beere: #8e3b8f;        /* Deutsch */
  --see: #1f78a8;          /* Mathematik */
  --gut: #2f7d4a;
  --warn: #b5470e;
  --gefahr: #b42318;
  --linie: rgba(59, 42, 31, .14);
  --schatten: 0 1px 2px rgba(59, 42, 31, .08), 0 10px 24px -14px rgba(59, 42, 31, .45);
  --ls-fern: #c6e0b4; --ls-nah: #a9d08f; --ls-wiese: #8fc174; --ls-baum: #4f8f5f; --ls-tanne: #3d7a52; --ls-stamm: #7a5a3f; --ls-busch: #6aa86a;
  --schrift: "Lernwelt Schrift", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wiese: #13241b; --wiese-2: #1c3326; --moos: #6dbb8e; --moos-hell: rgba(109, 187, 142, .14); --fuchs: #f08a45; --fuchs-dunkel: #d9702c;
    --stein: #4b5a4f; --stein-rand: #6e7d70; --rinde: #efe9dd; --rinde-2: #c6bcab; --creme: #1e3027; --sonne: #e2b23a;
    --beere: #d98bd9; --see: #6fbbe6; --gut: #6fcf8f; --warn: #f59b62; --gefahr: #f87167; --linie: rgba(239, 233, 221, .14);
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -14px rgba(0, 0, 0, .8);
    --ls-fern: #1f3a2b; --ls-nah: #244633; --ls-wiese: #2a5139; --ls-baum: #2f5e40; --ls-tanne: #234c34; --ls-stamm: #4a3a2c; --ls-busch: #2f5b3d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wiese: #13241b; --wiese-2: #1c3326; --moos: #6dbb8e; --moos-hell: rgba(109, 187, 142, .14); --fuchs: #f08a45; --fuchs-dunkel: #d9702c;
  --stein: #4b5a4f; --stein-rand: #6e7d70; --rinde: #efe9dd; --rinde-2: #c6bcab; --creme: #1e3027; --sonne: #e2b23a;
  --beere: #d98bd9; --see: #6fbbe6; --gut: #6fcf8f; --warn: #f59b62; --gefahr: #f87167; --linie: rgba(239, 233, 221, .14);
  --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -14px rgba(0, 0, 0, .8);
  --ls-fern: #1f3a2b; --ls-nah: #244633; --ls-wiese: #2a5139; --ls-baum: #2f5e40; --ls-tanne: #234c34; --ls-stamm: #4a3a2c; --ls-busch: #2f5b3d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--wiese); }
body { margin: 0; min-height: 100dvh; color: var(--rinde); background: var(--wiese); font: 18px/1.5 var(--schrift); -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; margin-top: 1.2em; }
p { margin: 0 0 .75em; }
a { color: var(--moos); }
.leise { color: var(--rinde-2); }
.klein { font-size: .88rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--fuchs); outline-offset: 3px; border-radius: 8px; }
.laden { min-height: 100dvh; display: grid; place-items: center; color: var(--rinde-2); }

/* ---------- Kinderbereich ---------- */
body.kindmodus { overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.kind { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); font-size: 28px; }
.landschaft { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; z-index: -1; pointer-events: none; }
.ls-huegel-fern { fill: var(--ls-fern); } .ls-huegel-nah { fill: var(--ls-nah); } .ls-wiese { fill: var(--ls-wiese); }
.ls-tanne path { fill: var(--ls-tanne); } .ls-laub circle { fill: var(--ls-baum); } .ls-stamm { fill: var(--ls-stamm); } .ls-busch circle { fill: var(--ls-busch); }
.kind-oben, .kind-unten { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; }
.kind-inhalt { position: relative; display: grid; place-items: center; min-height: 0; }
.k-platz { width: 84px; height: 84px; }
.k-mitte-oben { display: grid; place-items: center; color: var(--rinde-2); }

/* Runde Bildknöpfe: Lautsprecher, Fragezeichen, Haken, Pfeil */
.kk { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--creme); color: var(--moos); display: grid; place-items: center; box-shadow: var(--schatten); cursor: pointer; transition: transform .12s ease, opacity .2s ease; }
.kk:active { transform: scale(.94); }
.kk .sym { width: 52px; height: 52px; }
.kk.k-haken { background: var(--moos); color: var(--creme); }
.kk.k-weiter { background: var(--fuchs); color: #fff; }
.kk.gedimmt { opacity: .35; }
.kk.leuchtet { opacity: 1; box-shadow: 0 0 0 6px var(--sonne), var(--schatten); animation: leuchten 1.6s ease-in-out infinite; }
@keyframes leuchten { 50% { box-shadow: 0 0 0 12px rgba(244, 197, 66, .45), var(--schatten); } }
.kk-eltern { width: 52px; height: 52px; border: 0; border-radius: 14px; background: transparent; color: var(--rinde-2); opacity: .55; display: grid; place-items: center; cursor: pointer; }
.kk-eltern .sym { width: 30px; height: 30px; }

/* Bildsymbole */
.sym { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.sym .voll { fill: currentColor; stroke: none; }
.sym .flaeche { fill: var(--creme); }
.sym .duenn { stroke-width: 2.4; }

/* Fuchs */
.fuchs { display: block; width: 100%; height: auto; overflow: visible; }
.fx-fell { fill: var(--fuchs); } .fx-creme { fill: #fff4e2; } .fx-dunkel { fill: #3b2a1f; } .fx-licht { fill: #fff; } .fx-pfote { fill: #5a3d2b; } .fx-ohr { fill: #3b2a1f; opacity: .85; }
.fx-strich { fill: none; stroke: #3b2a1f; stroke-width: 3; stroke-linecap: round; }
.fx-zzz text { font: 700 22px var(--schrift); fill: var(--rinde-2); } .fx-zzz .klein { font-size: 16px; }
.fuchs.hopp { animation: hopp .55s cubic-bezier(.3, .7, .3, 1); }
@keyframes hopp { 40% { transform: translateY(-14%); } 70% { transform: translateY(2%); } }

/* Start */
.k-startseite .kind-inhalt { grid-template-rows: 1fr auto; gap: 18px; padding-bottom: 6vh; }
.k-fuchs { width: min(42vh, 60vw); border: 0; background: none; padding: 0; cursor: pointer; align-self: end; }
.k-start { width: 132px; height: 132px; border-radius: 50%; border: 0; background: var(--fuchs); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 0 var(--fuchs-dunkel), var(--schatten); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.k-start .sym { width: 70px; height: 70px; margin-left: 8px; }
.k-start:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--fuchs-dunkel), var(--schatten); }
.k-start.klein { width: 104px; height: 104px; }
.k-start.klein .sym { width: 54px; height: 54px; }
.k-frei .kind-inhalt { grid-template-rows: 1fr auto; gap: 18px; padding-bottom: 6vh; }
/* Kurze Szenen (Zeig-Runde, Schatzkarte, Stern) und Schlusskarte */
.k-szene .kind-unten, .k-schluss .kind-unten { justify-content: center; }
.szene { display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 4vw, 48px); }
.szene .k-fuchs { width: min(38vh, 44vw); cursor: default; }
.szene-stern, .szene-schatz { width: min(22vh, 26vw); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--moos-hell); color: var(--fuchs); box-shadow: var(--schatten); }
.szene-stern .sym, .szene-schatz .sym { width: 62%; height: 62%; }
.szene-stern.gross { width: min(28vh, 32vw); animation: sternAuf .8s cubic-bezier(.3, 1.5, .5, 1) both; }
.szene-schatz.offen { animation: sternAuf .8s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes sternAuf { from { transform: scale(.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.schluss { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; width: min(100%, 1100px); }
.schluss-bild { min-width: 0; }
.schluss .k-fuchs { width: min(26vh, 22vw); cursor: default; }
.schluss .k-fuchs .fuchs:not(.gross) { width: 100%; }
@media (max-width: 700px) { .schluss { grid-template-columns: 1fr; justify-items: center; } .schluss .k-fuchs { width: 34vw; } }
@media (prefers-reduced-motion: reduce) { .szene-stern.gross, .szene-schatz.offen { animation: none; } }

/* Tagesweg */
.weg { position: relative; width: min(100%, 1100px, 200vh); aspect-ratio: 1000 / 440; }
.weg-pfad { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.weg-pfad path { fill: none; stroke: var(--stein); stroke-width: 34; stroke-linecap: round; stroke-dasharray: 2 46; opacity: .9; }
.stein { position: absolute; transform: translate(-50%, -50%); width: clamp(84px, 12vw, 128px); height: clamp(72px, 10vw, 108px); border-radius: 46% 54% 50% 50% / 58% 52% 48% 42%; border: 0; background: var(--stein); color: var(--rinde-2); display: grid; place-items: center; box-shadow: inset 0 -8px 0 var(--stein-rand), var(--schatten); cursor: pointer; transition: transform .15s ease; }
.stein .sym { width: 56%; height: 56%; }
.stein.jetzt { background: var(--creme); color: var(--moos); box-shadow: inset 0 -8px 0 var(--stein-rand), 0 0 0 6px var(--sonne), var(--schatten); animation: leuchten 1.8s ease-in-out infinite; }
.stein.jetzt.fd { color: var(--beere); } .stein.jetzt.fm { color: var(--see); }
.stein.spaeter { opacity: .7; }
.stein.erledigt { background: var(--wiese-2); color: var(--moos); opacity: .9; }
.stein:active { transform: translate(-50%, -50%) scale(.95); }
.stein-haken { position: absolute; right: -6px; top: -8px; width: 40px; height: 40px; border-radius: 50%; background: var(--moos); color: var(--creme); display: grid; place-items: center; }
.stein-haken .sym { width: 26px; height: 26px; stroke-width: 5; }
.weg-fuchs { position: absolute; width: clamp(90px, 13vw, 150px); transform: translate(-50%, -122%); pointer-events: none; transition: left .6s ease, top .6s ease; }

/* Einführung */
.einf { display: grid; justify-items: center; gap: 20px; width: 100%; }
.einf-fuchs { width: min(36vh, 50vw); transition: width .4s ease; }
.einf-fuchs.klein { width: min(20vh, 28vw); }
.einf-bilder { display: flex; gap: clamp(16px, 4vw, 40px); justify-content: center; flex-wrap: wrap; }
.bildkarte { width: clamp(120px, 20vw, 190px); aspect-ratio: 1; border-radius: 24px; border: 0; background: var(--creme); box-shadow: var(--schatten); display: grid; place-items: center; cursor: pointer; transition: transform .12s ease; }
.bildkarte:active { transform: scale(.95); }
.bildkarte .emoji { font-size: clamp(64px, 11vw, 110px); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.bildkarte.richtig { box-shadow: 0 0 0 6px var(--gut), var(--schatten); }
.bildkarte.erscheint { animation: erscheint .4s ease both; }
.bildkarte.erscheint:nth-child(2) { animation-delay: .12s; } .bildkarte.erscheint:nth-child(3) { animation-delay: .24s; }
@keyframes erscheint { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* Zeigehand */
.zeigehand { position: fixed; left: 0; top: 0; width: 72px; height: 96px; z-index: 50; pointer-events: none; opacity: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
.zeigehand.da { opacity: 1; }
.zeigehand-svg { width: 100%; height: 100%; }
.zh-hand { fill: #fff; stroke: #3b2a1f; stroke-width: 2.6; stroke-linejoin: round; }
.zh-linie { fill: none; stroke: #3b2a1f; stroke-width: 2; stroke-linecap: round; opacity: .5; }
.zh-welle { position: fixed; z-index: 49; width: 110px; height: 110px; border-radius: 50%; border: 6px solid var(--sonne); pointer-events: none; }

/* ---------- Aufgaben ---------- */
.k-aufgabe .kind-inhalt { padding: 6px 0; overflow: hidden; }
.k-aufgabe .landschaft { height: 30%; opacity: .55; }
.art-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--creme); color: var(--rinde-2); box-shadow: var(--schatten); }
.art-symbol .sym { width: 32px; height: 32px; }
.k-aufgabe.fm .art-symbol { color: var(--see); } .k-aufgabe.fd .art-symbol { color: var(--beere); }
.k-mitte-oben { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; justify-content: center; }
.fortschritt { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; justify-content: center; }
.kind { grid-template-columns: minmax(0, 1fr); }
.kind-oben > .kk, .kind-oben > .k-platz, .kind-oben > .kk-eltern { flex: none; }
.fp { width: 12px; height: 12px; border-radius: 50%; background: var(--stein); }
.fp.fertig { background: var(--moos); } .fp.jetzt { background: var(--sonne); box-shadow: 0 0 0 3px rgba(244, 197, 66, .35); }
.kk-haus { width: 56px; height: 56px; border: 0; border-radius: 16px; background: transparent; color: var(--rinde-2); opacity: .5; display: grid; place-items: center; cursor: pointer; }
.kk-haus .sym { width: 34px; height: 34px; }
.kk.versteckt { visibility: hidden; pointer-events: none; }
.kk.klein { width: 64px; height: 64px; } .kk.klein .sym { width: 38px; height: 38px; }
.buehne { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.5vh, 26px); min-height: 0; }
.k-aufgabe.freut .buehne { animation: freut .5s ease; }
@keyframes freut { 40% { transform: scale(1.025); } }

/* Antwortfelder und Rechnungen */
.af { display: inline-grid; place-items: center; min-width: 84px; height: 84px; padding: 0 10px; border-radius: 18px; border: 3px dashed var(--moos); background: var(--creme); color: var(--rinde); font: 700 46px/1 var(--schrift); vertical-align: middle; cursor: pointer; transition: box-shadow .15s ease, background .15s ease; }
.af:empty::before { content: '?'; color: var(--stein-rand); font-weight: 700; }
.af.aktiv:empty::before { color: var(--sonne); }
.af.aktiv { border-style: solid; box-shadow: 0 0 0 5px rgba(244, 197, 66, .55); }
.af.voll { border-style: solid; }
.af.ok { background: var(--gut); border-color: var(--gut); color: #fff; }
.af.loesung { background: var(--sonne); border-color: var(--sonne); color: #3b2a1f; }
.rechnungen { display: grid; gap: 10px; justify-items: center; }
.rechnung { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font: 700 54px/1.1 var(--schrift); }
.rechnung.hilfszeile { font-size: 36px; color: var(--rinde-2); }
.rechnung.hilfszeile .af { min-width: 60px; height: 60px; font-size: 34px; }
.rz-zeichen { color: var(--rinde-2); }
.rz-text { font-family: var(--schrift), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.rz-platz { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; border: 3px dashed var(--rinde-2); color: var(--moos); }
.rz-platz.voll { border-style: solid; border-color: var(--gut); }
.einheit { font: 700 40px var(--schrift); color: var(--rinde-2); margin-left: 6px; }
.antwort-zeile { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Zahl eingeben: Bild links, Zahlenfeld rechts */
.typ-zahl { flex-direction: row; gap: clamp(16px, 4vw, 48px); }
.zahl-links { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-width: 0; flex: 1; max-width: 680px; }
.nach-fehler:empty { display: none; }
.zahlenfeld { display: grid; gap: 10px; flex: none; }
.zf-reihe { display: grid; grid-template-columns: repeat(5, 68px); gap: 10px; }
.zf-reihe.null { grid-template-columns: 68px; }
.taste { height: 68px; border-radius: 16px; border: 0; background: var(--creme); color: var(--see); font: 700 32px var(--schrift); box-shadow: inset 0 -5px 0 rgba(59, 42, 31, .12), var(--schatten); cursor: pointer; }
.k-aufgabe.fd .taste { color: var(--beere); }
.taste:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(59, 42, 31, .12); }
.taste.aus { visibility: hidden; }
.zahlenfeld.ziffern { grid-template-columns: repeat(3, 76px); }
.zahlenfeld.ziffern .taste { height: 70px; }
.taste.loeschen { color: var(--rinde-2); display: grid; place-items: center; } .taste.loeschen .sym { width: 38px; height: 38px; }

/* Auswahlkarten */
.wahl-oben { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; }
.wahl { display: flex; gap: clamp(14px, 3vw, 32px); justify-content: center; flex-wrap: wrap; }
.wkarte { min-width: 120px; min-height: 120px; padding: 12px; border-radius: 24px; border: 0; background: var(--creme); color: var(--rinde); box-shadow: var(--schatten); display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, opacity .25s ease, box-shadow .2s ease; }
.wkarte:active { transform: scale(.96); }
.wkarte.bild { width: clamp(120px, 18vw, 180px); aspect-ratio: 1; }
.wkarte.bild.gross { width: auto; min-width: clamp(140px, 20vw, 220px); max-width: 46vw; aspect-ratio: auto; min-height: 140px; }
.wkarte .ding { font-size: clamp(22px, 2.6vw, 32px); } .wkarte .dinge { gap: 14px; } .wkarte .dinge-gruppe { padding: 4px 6px; gap: 2px 4px; }
.wahl > * { flex: none; }
.wkarte.wort { min-width: 130px; font-size: 52px; font-weight: 700; padding: 14px 26px; }
.wkarte.wort.lang { padding: 12px 20px; } .wkarte.wort.lang .k-text { font-size: 38px; white-space: nowrap; }
.wkarte .emoji, .hding .emoji, .zding .emoji, .lkarte .emoji, .zkarte .emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }
.lkarte.gehoert { box-shadow: 0 0 0 5px var(--fuchs), var(--schatten); transform: translateY(-4px); }
.wkarte .emoji { font-size: clamp(64px, 10vw, 104px); }
.k-text { font: 700 52px/1 var(--schrift); }
.wkarte.weg { visibility: hidden; }
.wkarte.blass { opacity: .35; }
.wkarte.richtig { box-shadow: 0 0 0 7px var(--gut), var(--schatten); }
.wkarte.nennt { box-shadow: 0 0 0 7px var(--sonne), var(--schatten); transform: scale(1.04); }
.wkarte .dst { pointer-events: none; }

/* Darstellungen */
.dst { display: flex; justify-content: center; max-width: 100%; }
.dst-svg { width: 100%; height: auto; max-height: 36vh; overflow: visible; }
.dst-zehnerfeld { width: min(330px, 80vw); } .dst-zwanzigerfeld { width: min(640px, 88vw); }
.dst-plaettchen { width: min(560px, 88vw); } .dst-zehnerstreifen { width: min(300px, 70vw); }
.dst-uhr { width: min(250px, 60vw); } .dst-waage { width: min(400px, 80vw); } .dst-schuettelbox { width: min(340px, 80vw); }
.dst-fingerbild { width: min(330px, 80vw); } .dst-formen { width: min(560px, 88vw); } .dst-koerper { width: min(180px, 40vw); }
.dst-rechenstrich { width: min(680px, 90vw); } .dst-laengen { width: min(700px, 90vw); }
.dst.klein .dst-svg { max-height: 22vh; }
.wkarte .dst-zehnerfeld, .wkarte .dst-fingerbild { width: 200px; } .wkarte .dst-zwanzigerfeld { width: 260px; } .wkarte .dst-uhr { width: 150px; }
.wkarte .dst-koerper { width: 130px; } .wkarte .dst-plaettchen { width: 220px; }
.wkarte .dst-formen { width: 210px; } .wkarte .dst-laengen { width: auto; max-width: 42vw; } .wkarte .dst-spiegel { width: 200px; } .wkarte .dst-geld { width: auto; }
.wkarte .dst-waage { width: 220px; } .wkarte .dst-zahlenstrahl { width: 260px; }
.feld-rand { fill: var(--creme); stroke: var(--rinde-2); stroke-width: 3; }
.feld-zelle { fill: var(--wiese-2); }
.pl circle { fill: none; } .pl.rot circle { fill: #d8453b; } .pl.blau circle { fill: #2f6fbf; }
.pl-strich { stroke: none; stroke-width: 4; stroke-linecap: round; }
.pl.weg circle { opacity: .35; } .pl.weg .pl-strich { stroke: var(--rinde); }
.tippfeld .feld-zelle, .tippfeld .pl { cursor: pointer; }
.tippfeld.loesung .feld-rand { stroke: var(--sonne); stroke-width: 6; } .tippfeld.ok .feld-rand { stroke: var(--gut); stroke-width: 6; }
.wuerfelreihe { display: flex; gap: 18px; justify-content: center; } .wuerfelreihe .dst-svg { width: clamp(90px, 14vw, 140px); }
.wf { fill: #fff; stroke: var(--rinde-2); stroke-width: 3; } .wf-punkt { fill: #3b2a1f; }
.fi { fill: #f4cfa5; stroke: #9a6b4b; stroke-width: 2.5; } .fi.falt { fill: #e9b98c; }
.dinge { display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; }
.dinge-gruppe { display: grid; grid-template-columns: repeat(5, auto); gap: 6px 8px; padding: 8px 10px; border-radius: 16px; background: var(--moos-hell); }
.ding { font-size: clamp(36px, 5vw, 52px); line-height: 1.1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ding.weg { opacity: .3; filter: grayscale(.6); position: relative; }
.ding.weg::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 4px solid var(--rinde); transform: rotate(-35deg); }
.zs { fill: #9cc7ea; stroke: #2f6fbf; stroke-width: 2; } .zs.einer { fill: #f7c27d; stroke: #c96f1e; }
.zhaus { display: grid; justify-items: center; }
.zhaus-dach { width: 220px; height: 96px; display: grid; place-items: end center; padding-bottom: 10px; background: var(--fuchs); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.zhaus-dach .dst-zahl { color: #fff; } .zhaus-dach .af { min-width: 70px; height: 64px; font-size: 38px; }
.zhaus-zeilen { display: grid; gap: 0; border: 4px solid var(--fuchs); border-top: 0; background: var(--creme); }
.zhaus-zeile { display: grid; grid-template-columns: 96px 96px; }
.zhaus-zeile > * { height: 70px; display: grid; place-items: center; border-top: 3px solid var(--linie); }
.zhaus-zeile > :first-child { border-right: 3px solid var(--linie); }
.zhaus-zeile .af { min-width: 64px; height: 58px; font-size: 34px; margin: 6px auto; }
.zhaus.viele .zhaus-dach { height: 70px; width: 180px; } .zhaus.viele .zhaus-zeile { grid-template-columns: 84px 84px; } .zhaus.viele .zhaus-zeile > * { height: 46px; }
.zhaus.viele .zhaus-zeile .af { min-width: 52px; height: 38px; font-size: 26px; margin: 4px auto; border-width: 2px; border-radius: 10px; } .zhaus.viele .dst-zahl { font-size: 28px; }
.dst-zahl { font: 700 40px var(--schrift); }
.sb-box { fill: #ead9b5; stroke: #8a5a3c; stroke-width: 4; } .sb-deckel { fill: #a87650; stroke: #6d4529; stroke-width: 4; }
.sb-griff { stroke: #6d4529; stroke-width: 8; stroke-linecap: round; } .sb-zahl-bg { fill: var(--fuchs); } .sb-zahl { font: 700 30px var(--schrift); fill: #fff; text-anchor: middle; } .sb-pl { fill: #d8453b; }
.zst { position: relative; width: min(100%, calc(var(--zst-breite) * 1px)); }
.zst.mit-marken { padding-top: 64px; }
.zst-linie { stroke: var(--rinde); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.zst-strich { stroke: var(--rinde); stroke-width: 2.5; } .zst-strich.fuenf { stroke-width: 3.5; }
.zst-text { font: 700 22px var(--schrift); fill: var(--rinde); text-anchor: middle; }
.zst-bogen { stroke: var(--fuchs); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.zst-marke { fill: var(--fuchs); }
.zst-ueber { position: absolute; top: 0; transform: translateX(-50%); }
.zst-ueber .af { min-width: 64px; height: 58px; font-size: 32px; }
.zst-markentext { font: 700 32px var(--schrift); color: var(--fuchs-dunkel); }
.tipp-ziel { fill: transparent; cursor: pointer; }
.tipp-ziel.markiert { fill: rgba(244, 197, 66, .5); } .tipp-ziel.fest, .tipp-ziel.ok { fill: rgba(47, 125, 74, .35); } .tipp-ziel.loesung { fill: rgba(244, 197, 66, .7); }
.rs-sprung { font: 700 22px var(--schrift); fill: var(--fuchs-dunkel); text-anchor: middle; }
.zmauer { display: grid; justify-items: center; gap: 0; }
.zm-reihe { display: flex; }
.zm-stein { width: 104px; height: 72px; display: grid; place-items: center; border: 3px solid #a2563a; background: #f3d9c6; margin: -1.5px; }
.zm-stein .af { min-width: 70px; height: 56px; font-size: 32px; }
.zm-stein .dst-zahl { font-size: 34px; color: #3b2a1f; }
.geld { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.muenze .dst-svg, .muenze svg { width: calc(var(--d, 40) * 1.7px); height: calc(var(--d, 40) * 1.7px); }
.mz-rand { fill: #b9bfc8; } .mz-innen { fill: #dde1e7; stroke: #a5acb7; stroke-width: 2; }
.muenze.gold .mz-rand { fill: #c9a23a; } .muenze.gold .mz-innen { fill: #ead27f; stroke: #b48f2c; }
.mz-zahl { font: 700 34px var(--schrift); fill: #3b3f46; text-anchor: middle; } .mz-zahl.rp { font-size: 30px; }
.mz-einheit { font: 700 16px var(--schrift); fill: #3b3f46; text-anchor: middle; }
.note svg { width: 150px; height: 80px; }
.nt-flaeche { stroke: rgba(0, 0, 0, .25); stroke-width: 2; } .note.zehn .nt-flaeche { fill: #f2cf55; } .note.zwanzig .nt-flaeche { fill: #e7756c; }
.nt-kreis { fill: rgba(255, 255, 255, .45); } .nt-text { font: 700 40px var(--schrift); fill: #3b2a1f; text-anchor: middle; } .nt-klein { font: 700 18px var(--schrift); fill: #3b2a1f; text-anchor: middle; }
.uhr-rand { fill: var(--creme); stroke: var(--rinde); stroke-width: 5; } .uhr-zahl { font: 700 20px var(--schrift); fill: var(--rinde); text-anchor: middle; }
.uhr-strich { stroke: var(--rinde-2); stroke-width: 2; } .uhr-std { stroke: var(--rinde); stroke-width: 9; stroke-linecap: round; } .uhr-min { stroke: var(--fuchs-dunkel); stroke-width: 5; stroke-linecap: round; } .uhr-mitte { fill: var(--rinde); }
.wg-fuss { fill: #8a5a3c; } .wg-balken { stroke: #6d4529; stroke-width: 10; stroke-linecap: round; } .wg-achse { fill: #3b2a1f; }
.wg-seil { stroke: var(--rinde-2); stroke-width: 2; } .wg-schale { fill: #c9a23a; stroke: #8a6a1c; stroke-width: 2; }
.wg-bild { font-size: 46px; text-anchor: middle; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.strichliste { display: grid; gap: 8px; }
.sl-zeile { display: flex; align-items: center; gap: 14px; padding: 6px 14px; border-radius: 14px; background: var(--creme); }
.sl-bild { font-size: 44px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.sl-striche { display: flex; gap: 12px; } .sl-buendel { width: 54px; height: 50px; } .sl-strich { stroke: var(--rinde); stroke-width: 4; stroke-linecap: round; }
.bilddiagramm { display: flex; gap: 18px; align-items: flex-end; justify-content: center; padding: 10px 16px 6px; border-radius: 18px; background: var(--creme); }
.bd-spalte { display: grid; justify-items: center; gap: 6px; }
.bd-saeule { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; min-height: calc(var(--zeilen, 5) * 27px); justify-content: flex-start; }
.bd-bild { font-size: 24px; line-height: 25px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.bd-bild.fuenf { border-top: 2px solid var(--stein-rand); padding-top: 1px; }
.bd-name { font-size: 40px; border-top: 3px solid var(--rinde-2); padding-top: 4px; min-width: 64px; text-align: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.form-flaeche { stroke: rgba(0, 0, 0, .28); stroke-width: 2; }
.tipp-form { cursor: pointer; } .tipp-form.markiert .form-flaeche { stroke: var(--sonne); stroke-width: 7; } .tipp-form.loesung .form-flaeche, .tipp-form.fest .form-flaeche, .tipp-form.ok .form-flaeche { stroke: var(--gut); stroke-width: 7; }
.kp { stroke: #2b4b69; stroke-width: 3; stroke-linejoin: round; } .kp.vorn { fill: #8fb8de; } .kp.oben { fill: #c4dcf1; } .kp.seite { fill: #6a9cc9; } .kp.kugel { fill: #8fb8de; }
.kp-linie { fill: none; stroke: #2b4b69; stroke-width: 2; stroke-dasharray: 6 5; opacity: .6; } .kp-licht { fill: #fff; opacity: .55; }
.gitter { display: grid; justify-items: center; gap: 12px; } .gitter .dst-svg { max-height: 44vh; max-width: 100%; }
.gt-zelle { fill: var(--creme); stroke: var(--linie); stroke-width: 2; }
.gt-bild { font-size: 40px; text-anchor: middle; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; pointer-events: none; }
.tipp-zelle { cursor: pointer; } .tipp-zelle.markiert { fill: var(--see); } .tipp-zelle.fest, .tipp-zelle.ok { fill: var(--gut); } .tipp-zelle.loesung { fill: var(--sonne); }
.gt-stein { fill: #9a9389; stroke: #6d675e; stroke-width: 2; }
.waagen { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .waagen .dst-svg { width: min(340px, 44vw); }
.gt-pfeile { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pfeil-k { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--creme); color: var(--fuchs-dunkel); box-shadow: var(--schatten); }
.pfeil-k .sym { width: 38px; height: 38px; stroke-width: 4.5; }
.sp-zelle { fill: var(--creme); stroke: var(--linie); stroke-width: 2; } .sp-zelle.voll { fill: var(--see); }
.sp-achse { stroke: var(--fuchs); stroke-width: 5; stroke-dasharray: 10 7; }
.lg-kaestchen { fill: none; stroke: var(--linie); stroke-width: 1.5; } .lg-stab { stroke: rgba(0, 0, 0, .25); stroke-width: 2; }
.lg-massstab { fill: #f3e3b5; stroke: #b49a5a; stroke-width: 2; } .lg-strich { stroke: #3b2a1f; stroke-width: 2; } .lg-zahl { font: 700 16px var(--schrift); fill: #3b2a1f; text-anchor: middle; }
.zreihe { display: flex; gap: clamp(8px, 1.6vw, 16px); flex-wrap: wrap; justify-content: center; }
.zr-stein { width: clamp(74px, 9vw, 96px); height: clamp(74px, 9vw, 96px); border-radius: 46% 54% 50% 50% / 58% 52% 48% 42%; background: var(--stein); box-shadow: inset 0 -7px 0 var(--stein-rand); display: grid; place-items: center; }
.zr-stein .dst-zahl { font-size: clamp(32px, 4vw, 42px); color: #3b2a1f; }
.zr-stein.frage { background: transparent; box-shadow: none; }
.zr-stein .af { min-width: 0; width: 100%; height: 100%; border-radius: 46% 54% 50% 50% / 58% 52% 48% 42%; font-size: 38px; }

/* Zählen */
.typ-zaehlen { flex-direction: row; gap: clamp(16px, 3vw, 40px); }
.zaehl-links { position: relative; flex: 1; width: 100%; max-width: 780px; display: grid; }
.zaehlfeld { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 62vh; border-radius: 24px; background: var(--creme); box-shadow: var(--schatten); }
.zding { position: absolute; transform: translate(-50%, -50%); width: 72px; height: 72px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
.zding .emoji { font-size: 50px; }
.zaehlfeld.raster { display: grid; grid-template-columns: repeat(5, 1fr); place-items: center; align-content: center; gap: 6px; aspect-ratio: auto; padding: 14px 8px; }
.zaehlfeld.raster .zding { position: relative; left: auto !important; top: auto !important; transform: none; width: 60px; height: 60px; } .zaehlfeld.raster .zding .emoji { font-size: 40px; }
.zaehlfeld.viele .zding { width: 64px; height: 64px; } .zaehlfeld.viele .zding .emoji { font-size: 40px; }
.zding.gezaehlt { background: rgba(244, 197, 66, .35); box-shadow: 0 0 0 4px var(--sonne); }
.zding.loesung { background: rgba(47, 125, 74, .2); box-shadow: 0 0 0 4px var(--gut); }
.zmarke { position: absolute; right: -6px; top: -8px; min-width: 30px; height: 30px; border-radius: 15px; background: var(--moos); color: var(--creme); font: 700 18px/30px var(--schrift); text-align: center; padding: 0 6px; }
.zmarke:empty { display: none; }
.k-nochmal { position: absolute; left: -10px; bottom: -10px; }
.zaehl-antwort { display: grid; gap: 16px; justify-items: center; }
.wahl.zahlen { flex-direction: column; } .zahlkarte { min-width: 120px; min-height: 100px; }

/* Legen und Reihenfolge */
.typ-legen { gap: clamp(14px, 3vh, 30px); }
.lziel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lplatz { display: inline-grid; place-items: center; min-width: 96px; height: 96px; border-radius: 18px; border: 3px dashed var(--moos); background: var(--moos-hell); }
.lplatz.voll { border-style: solid; }
.lplatz.ok { border-color: var(--gut); background: rgba(47, 125, 74, .18); } .lplatz.loesung { border-color: var(--sonne); background: rgba(244, 197, 66, .3); }
.lplatz .lkarte { box-shadow: none; }
.lfest { font: 700 52px var(--schrift); color: var(--rinde-2); padding: 0 4px; }
.lpool > *, .lziel > *, .vorrat > *, .zspalte > * { flex: none; }
.lpool { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; min-height: 96px; }
.lkarte { min-width: 88px; height: 88px; padding: 0 14px; border-radius: 16px; border: 0; background: var(--creme); color: var(--rinde); box-shadow: var(--schatten); display: grid; place-items: center; cursor: pointer; }
.lkarte .k-text { font-size: 44px; } .lkarte .emoji { font-size: 56px; } .lkarte .pfeil-k { box-shadow: none; background: transparent; }
.lkarte .dst { pointer-events: none; } .lkarte .dst-svg { max-height: 80px; }
.richtung { display: grid; place-items: center; width: 64px; height: 64px; color: var(--rinde-2); }
.richtung .sym { width: 52px; height: 52px; } .richtung .sym.ab { transform: scaleX(-1); }

/* Menge legen, Zehner und Einer, Münzen */
.typ-menge .menge-feld { width: min(660px, 92vw); display: flex; justify-content: center; }
.typ-menge .menge-feld .dst-svg, .menge-feld svg { width: 100%; max-height: 42vh; }
.typ-menge .pl.leer circle { fill: transparent; }
.ze-flaeche { min-height: 160px; min-width: min(520px, 90vw); display: grid; gap: 12px; justify-items: center; padding: 14px; border-radius: 20px; border: 3px dashed var(--moos); background: var(--moos-hell); }
.ze-flaeche.ok { border-color: var(--gut); border-style: solid; } .ze-flaeche.loesung { border-color: var(--sonne); border-style: solid; }
.ze-zehnerreihe, .ze-einerreihe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ze-zehner, .ze-quelle { border: 0; background: transparent; padding: 4px; cursor: pointer; border-radius: 12px; }
.ze-zehner svg, .ze-quelle svg { width: min(240px, 46vw); }
.ze-einer { width: 30px; height: 30px; border-radius: 4px; border: 2px solid #c96f1e; background: #f7c27d; cursor: pointer; display: inline-block; }
button.ze-einer { padding: 0; min-width: 44px; min-height: 44px; background-clip: content-box; border-width: 7px; border-color: transparent; box-shadow: inset 0 0 0 2px #c96f1e; }
.ze-quellen { display: flex; gap: 24px; align-items: center; }
.ze-quelle { background: var(--creme); box-shadow: var(--schatten); padding: 12px; min-height: 72px; min-width: 72px; display: grid; place-items: center; }
.ze-quelle.einer .ze-einer { width: 40px; height: 40px; }
.ablage { min-height: 130px; min-width: min(560px, 90vw); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 12px; border-radius: 20px; border: 3px dashed var(--moos); background: var(--moos-hell); }
.ablage.ok { border-color: var(--gut); border-style: solid; } .ablage.loesung { border-color: var(--sonne); border-style: solid; }
.ablage .tippbar { cursor: pointer; }
.vorrat { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; }
.vorrat-knopf { border: 0; background: transparent; padding: 4px; border-radius: 50%; cursor: pointer; min-width: 64px; min-height: 64px; }

/* Hören und antippen */
.hreihe { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 18px); padding: 14px 18px; border-radius: 24px; background: var(--creme); }
.hstart { font-size: 56px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; margin-right: 6px; }
.hding { position: relative; min-width: 72px; min-height: 72px; width: clamp(72px, 8.5vw, 104px); aspect-ratio: 1; border: 0; border-radius: 20px; background: var(--creme); box-shadow: var(--schatten); display: grid; place-items: center; cursor: pointer; }
.hding .emoji { font-size: clamp(44px, 5.5vw, 64px); }
.hreihe.lang { gap: 8px; padding: 12px 14px; } .hreihe.lang .hding { width: clamp(64px, 7.2vw, 92px); } .hreihe.lang .hstart { font-size: 48px; }
.hding.gewaehlt { box-shadow: 0 0 0 6px var(--sonne), var(--schatten); }
.hding.ok { box-shadow: 0 0 0 6px var(--gut), var(--schatten); } .hding.loesung { box-shadow: 0 0 0 6px var(--sonne), var(--schatten); background: rgba(244, 197, 66, .3); }
.hding.weg-leise { opacity: .45; }
.hmarke { position: absolute; right: -8px; top: -8px; min-width: 30px; height: 30px; border-radius: 15px; background: var(--moos); color: var(--creme); font: 700 18px/30px var(--schrift); text-align: center; }
.hmarke:empty { display: none; }
.hfrei { position: relative; width: min(860px, 94vw); aspect-ratio: 4 / 3; max-height: 62vh; border-radius: 24px; background: var(--creme); }
.hfrei .hding { position: absolute; transform: translate(-50%, -50%); width: calc(var(--w, .14) * 100%); min-width: 64px; background: transparent; box-shadow: none; }
.hfrei .hding .emoji { font-size: clamp(40px, calc(var(--w, .14) * 46vw), 110px); }
.hfrei .hding.deko { cursor: default; }
.hfrei .hding.gewaehlt, .hfrei .hding.ok, .hfrei .hding.loesung { background: var(--moos-hell); }

/* Zuordnen */
.typ-zuordnen { flex-direction: row; gap: clamp(40px, 10vw, 140px); }
.zspalte { display: flex; flex-direction: column; gap: 14px; }
.zkarte { min-width: 140px; min-height: 92px; padding: 8px 16px; border-radius: 20px; border: 4px solid transparent; background: var(--creme); color: var(--rinde); box-shadow: var(--schatten); display: grid; place-items: center; cursor: pointer; }
.zkarte .k-text { font-size: 42px; } .zkarte .emoji { font-size: 56px; } .zkarte .dst { pointer-events: none; } .zkarte .dst-svg { max-height: 90px; }
.zkarte.gewaehlt { border-color: var(--sonne); }
.zkarte.verbunden { cursor: default; } .zkarte.p1 { border-color: #2f6fbf; background: #e3eefa; } .zkarte.p2 { border-color: #3f9a52; background: #e4f3e6; } .zkarte.p3 { border-color: #8a55b5; background: #f0e6f8; } .zkarte.p4 { border-color: #ee8a2c; background: #fdeedd; }
:root[data-theme="dark"] .zkarte.verbunden { color: #1d1d1d; }
.zkarte.wackeln { animation: wackeln .4s ease; }
@keyframes wackeln { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

/* Muster */
.muster-folge { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.mu-el { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; background: var(--creme); }
.mu-el svg { width: 60px; height: 60px; }
.mu-el.zahl { font: 700 40px var(--schrift); }
.mu-el.luecke { border: 3px dashed var(--moos); color: var(--moos); font: 700 40px var(--schrift); }
.wkarte .mu-el { background: transparent; width: 84px; height: 84px; } .wkarte .mu-el svg { width: 76px; height: 76px; }

/* Nachspuren */
.typ-nachspuren { position: relative; }
.ns-rahmen { height: min(62vh, 520px); aspect-ratio: 3 / 4; max-width: 92vw; border-radius: 24px; background: #fffdf7; box-shadow: var(--schatten); padding: 10px; touch-action: none; }
.ns-flaeche { width: 100%; height: 100%; touch-action: none; }
.ns-linie { stroke: #c9bfae; stroke-width: .8; } .ns-linie.mitte { stroke-dasharray: 3 3; }
.ns-vorlage { fill: none; stroke: #e2dccf; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.ns-flaeche.ok .ns-vorlage { stroke: #bfe3c9; } .ns-flaeche.loesung .ns-vorlage { stroke: #f6dd8b; }
.ns-start { fill: var(--gut); } .ns-nr { font: 700 7px var(--schrift); fill: #fff; text-anchor: middle; }
.ns-pfeil { fill: none; stroke: #8f8371; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ns-strich { fill: none; stroke: var(--see); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.typ-nachspuren .k-nochmal { position: absolute; right: 8%; bottom: 4%; }

/* Lesetext (Deutsch) */
.lesetext { font: 700 clamp(44px, 7vw, 72px)/1.2 var(--schrift); text-align: center; }

/* Szenen (Bilder aus mehreren Teilen) */
.szene { display: inline-flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap; }
.szene.menge .emoji { font-size: 40px; } .szene.groesse.klein .emoji { font-size: 40px; } .szene.groesse.gross .emoji { font-size: 96px; }
.szene.farbe svg { width: 100px; height: 100px; }
.szene.aktion { position: relative; } .szene.aktion .zeichen { font-size: 40px; position: absolute; right: -14px; top: -8px; }

/* Elternbereich: Aufgaben ansehen */
.aufgabenliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.aufgabenliste > li { border-top: 1px solid var(--linie); padding-top: 12px; }
.al-name { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.al-stufen { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.btn.aus { opacity: .4; pointer-events: none; }
.al-texte { margin: 4px 0 0; padding-left: 1.4em; }
/* Elternbereich: Stand, Heute, Schatzkarten, Rückmeldungen */
.st-gruppe { border-top: 1px solid var(--linie); padding: 8px 0; }
.st-gruppe > summary { cursor: pointer; padding: 4px 0; }
.st-liste { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.st-liste li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.st-name { flex: 1 1 220px; }
.st-stufen { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; border: 1px solid var(--linie); white-space: nowrap; }
.st-neu { color: var(--rinde-2); }
.st-vermutet { border-style: dashed; border-color: var(--moos); }
.st-ueben { background: rgba(244, 197, 66, .22); }
.st-fast { background: var(--moos-hell); border-color: var(--moos); }
.st-sicher { background: var(--moos); color: var(--creme); border-color: var(--moos); }
.heute-liste { margin: 8px 0; } .heute-liste > summary { cursor: pointer; }
.heute-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.schatz-bericht { border-top: 1px solid var(--linie); padding-top: 8px; margin-top: 8px; }
.schatz-bericht h3 { margin: 4px 0; font-size: 1rem; }
.hinweis-blatt { border-left: 5px solid var(--sonne); }
.block { display: block; }
.vorschau-melden { font: 600 .9rem var(--schrift); border: 0; border-radius: 999px; padding: 6px 12px; background: var(--creme); color: var(--rinde-2); box-shadow: var(--schatten); cursor: pointer; }
.lw-eingabe { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; } .lw-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .lw-liste li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--linie); padding-top: 8px; } .lw-liste li .btn { margin-left: auto; }
@media (max-width: 640px) { .lw-eingabe { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .typ-zahl, .typ-zaehlen { flex-direction: column; }
  .hreihe.lang { flex-direction: column; gap: 4px; padding: 8px; } .hreihe.lang .hstart { margin: 0; font-size: 40px; } .hreihe.lang .hding { width: 60px; min-width: 60px; min-height: 60px; } .hreihe.lang .hding .emoji { font-size: 40px; }
}
@media (max-width: 640px) {
  .hreihe { flex-direction: column; gap: 4px; padding: 8px; } .hreihe .hstart { margin: 0; font-size: 36px; }
  .hreihe .hding, .hreihe.lang .hding { width: 56px; min-width: 56px; min-height: 52px; aspect-ratio: auto; height: 52px; } .hreihe .hding .emoji, .hreihe.lang .hding .emoji { font-size: 36px; }
  .zf-reihe { grid-template-columns: repeat(5, 60px); } .taste { height: 60px; font-size: 28px; }
  .zf-reihe.null { grid-template-columns: 60px; }
}
@media (max-width: 640px) {
  .k-aufgabe .kind-inhalt { overflow-y: auto; align-items: start; }
  .k-aufgabe .buehne { height: auto; min-height: 100%; }
  .typ-zaehlen .k-nochmal { left: auto; right: -8px; bottom: auto; top: -8px; width: 52px; height: 52px; } .typ-zaehlen .k-nochmal .sym { width: 32px; height: 32px; }
  .zaehlfeld.raster .zding { width: 54px; height: 54px; } .zaehlfeld.raster .zding .emoji { font-size: 36px; }
  .zf-reihe { grid-template-columns: repeat(5, 56px); gap: 8px; } .zahlenfeld { gap: 8px; } .taste { height: 52px; font-size: 26px; } .zf-reihe.null { grid-template-columns: 56px; }
  .wahl.zahlen { flex-direction: row; gap: 10px; } .zahlkarte { min-width: 88px; min-height: 80px; } .zahlkarte .k-text { font-size: 40px; }
  .rechnung { font-size: 40px; gap: 8px; }
  .af { min-width: 64px; height: 64px; font-size: 34px; }
  .lplatz { min-width: 70px; height: 70px; } .lkarte { min-width: 64px; height: 64px; } .lkarte .k-text { font-size: 32px; }
  .zaehlfeld { aspect-ratio: 4 / 5; }
}
@media (max-height: 700px) and (orientation: landscape) {
  .zf-reihe { grid-template-columns: repeat(5, 58px); gap: 8px; } .taste { height: 54px; font-size: 26px; } .zf-reihe.null { grid-template-columns: 58px; }
  .zahlenfeld { gap: 8px; }
}

/* ---------- Deutsch: Lesen, Hören, Schreiben ---------- */
.grossbild { display: grid; place-items: center; min-width: 120px; min-height: 110px; padding: 6px 18px; border-radius: 22px; background: var(--creme); box-shadow: var(--schatten); }
.grossbild > .emoji { font-size: clamp(72px, 11vw, 128px); line-height: 1.05; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.lesetext { color: var(--rinde); letter-spacing: .02em; }
.lesetext.silbig { display: inline-flex; gap: 3px; }
.lesetext .silbe { position: relative; display: inline-block; }
.lesetext.boegen .silbe { padding-bottom: 16px; }
.lesetext.boegen .silbe::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 2px; height: 16px; border: 4px solid var(--beere); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.lesetext.mit-luecke { display: inline-flex; align-items: flex-end; gap: 2px; }
.luecke { display: inline-grid; place-items: center; min-width: .75em; height: 1.1em; margin: 0 2px; border-bottom: 5px dashed var(--moos); color: var(--moos); }
.luecke.voll { border-bottom-style: solid; border-color: var(--gut); }
.anlautbild { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--creme); box-shadow: var(--schatten); }
.anlautbild .emoji { font-size: 56px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.anlautbild.versteckt { display: none; }
.k-buchstabe { font-size: 64px; }

/* Hörkarten */
.hkarte { width: clamp(110px, 15vw, 150px); height: clamp(110px, 15vw, 150px); border-radius: 28px; border: 0; display: grid; place-items: center; box-shadow: var(--schatten); cursor: pointer; color: #fff; transition: transform .12s ease, opacity .2s ease, box-shadow .2s ease; }
.hkarte .sym { width: 56%; height: 56%; }
.f-blau { background: #2f6fbf; } .f-gelb { background: #e2a913; } .f-gruen { background: #3f9a52; }
.hkarte.gewaehlt { box-shadow: 0 0 0 7px var(--sonne), var(--schatten); transform: scale(1.04); }
.hkarte.richtig { box-shadow: 0 0 0 7px var(--gut), var(--schatten); } .hkarte.blass { opacity: .35; } .hkarte.weg { visibility: hidden; }
.hoerinhalt { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; color: #fff; } .hoerinhalt .sym { width: 40px; height: 40px; }
.typ-wahl-hoeren .wahl { gap: clamp(18px, 4vw, 44px); }

/* Silben: Trommel und Bögen */
.typ-silben { gap: 22px; }
.silben-boegen { display: flex; gap: 14px; min-height: 56px; align-items: flex-start; justify-content: center; }
.sbogen { width: 86px; height: 44px; border: 6px solid var(--beere); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; animation: erscheint .25s ease both; }
.silben-boegen.ok .sbogen { border-color: var(--gut); } .silben-boegen.loesung .sbogen { border-color: var(--sonne); }
.trommel-reihe { display: flex; align-items: center; gap: 24px; }
.trommel { width: 150px; height: 130px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.trommel:active { transform: scale(.94); }
.trommel-svg { width: 100%; height: 100%; }
.tr-fell { fill: #f4e6c8; stroke: #8a5a3c; stroke-width: 4; } .tr-koerper { fill: #d8453b; stroke: #8a2a22; stroke-width: 4; } .tr-schnur { fill: none; stroke: #f4e6c8; stroke-width: 4; stroke-linejoin: round; }
.k-nochmal.statisch { position: static; }

/* Laut im Wort: Zug mit Wagen */
.lp-oben { display: flex; gap: 26px; align-items: center; justify-content: center; }
.lp-laut { display: grid; place-items: center; min-width: 120px; height: 120px; padding: 0 16px; border-radius: 24px; background: var(--creme); box-shadow: var(--schatten); font: 700 84px/1 var(--schrift); color: var(--beere); }
.lp-zug { display: flex; align-items: flex-end; gap: 8px; }
.wagen { width: clamp(110px, 14vw, 150px); height: clamp(84px, 10.5vw, 112px); border: 0; border-radius: 16px; background: transparent; cursor: pointer; padding: 4px; }
.wagen:active { transform: scale(.95); }
.wagen-svg { width: 100%; height: 100%; }
.wg-lok { fill: var(--beere); } .wg-wagen { fill: #c46fc4; } .wg-fenster { fill: #fff6fb; } .wg-rad { fill: #3b2a1f; } .wg-leer { fill: none; stroke: var(--rinde-2); stroke-width: 5; stroke-dasharray: 10 7; } .wg-strich { stroke: var(--rinde-2); stroke-width: 6; stroke-linecap: round; }
.wagen.ok { box-shadow: 0 0 0 6px var(--gut); } .wagen.loesung { box-shadow: 0 0 0 6px var(--sonne); background: rgba(244, 197, 66, .2); } .wagen.weg-leise { opacity: .35; }
.lp-trenner { width: 28px; }
@media (max-width: 640px) {
  .typ-zuordnen { gap: 28px; } .zspalte { gap: 10px; } .zkarte { min-width: 112px; min-height: 72px; padding: 6px 10px; } .zkarte .emoji { font-size: 44px; } .zkarte .k-text { font-size: 32px; }
  .lp-oben { flex-wrap: wrap; gap: 14px; } .lp-laut { min-width: 88px; height: 88px; font-size: 56px; padding: 0 10px; } .lp-zug { gap: 4px; flex-wrap: wrap; justify-content: center; } .wagen { width: 76px; height: 58px; } .lp-trenner { width: 8px; }
}

/* Vorlesen (mit einer erwachsenen Person) */
.vorlese-text { font-size: clamp(48px, 8vw, 84px); text-align: center; max-width: 90vw; }
.vorlese-knoepfe { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.btn.gross { min-height: 64px; padding: 14px 26px; font-size: 1.2rem; }
.vorlese-hinweis { font-size: 16px; color: var(--rinde-2); max-width: 520px; text-align: center; }

/* Laute und Wörter zählen: Plättchen bzw. Karten in einer Reihe */
.rreihe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 14px 18px; border-radius: 22px; background: var(--creme); }
.rplatz { width: 72px; height: 72px; border-radius: 50%; border: 3px dashed var(--stein-rand); background: transparent; cursor: pointer; }
.rplatz.voll { border: 0; background: #d8453b; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18); }
.rplatz.karte { border-radius: 12px; width: 64px; height: 88px; }
.rplatz.karte.voll { background: var(--see); }
.rplatz.ok { box-shadow: 0 0 0 5px var(--gut); } .rplatz.loesung { box-shadow: 0 0 0 5px var(--sonne); }

/* Buchstaben oder Wörter antippen */
.lesetext.tippbar { font-size: clamp(48px, 8vw, 80px); display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.zielzeichen { font: 700 clamp(48px, 9vh, 84px)/1 var(--schrift-schule, var(--schrift)); color: var(--rinde-2); background: var(--moos-hell); border-radius: 18px; padding: 8px 26px 14px; margin-bottom: 10px; letter-spacing: .12em; }
.lesetext.tippbar.woerter { font-size: clamp(36px, 5.5vw, 56px); gap: 14px; }
.tteil { display: inline-grid; place-items: center; min-width: 56px; padding: 2px 6px; border-radius: 14px; cursor: pointer; border: 3px solid transparent; }
.tteil.markiert { background: rgba(244, 197, 66, .55); border-color: var(--sonne); }
.tteil.fest, .tteil.ok { background: rgba(47, 125, 74, .25); border-color: var(--gut); } .tteil.loesung { background: rgba(244, 197, 66, .75); }
.tleer { width: 16px; }

/* Anlauttabelle (Hilfe beim Schreiben) */
.anlauttabelle { position: fixed; inset: 6vh 4vw; z-index: 45; display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 18px; border-radius: 24px; background: var(--creme); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.at-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; overflow-y: auto; align-content: start; }
.at-feld { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 6px; min-height: 72px; border-radius: 14px; border: 0; background: var(--moos-hell); color: var(--rinde); cursor: pointer; }
.at-zeichen { font: 700 30px var(--schrift); } .at-feld .emoji { font-size: 34px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.at-zu { justify-self: center; }

/* Szenen mit Orten (Ding an einen Ort bringen) */
.hfrei.mit-orten .hort { position: absolute; z-index: 1; border-radius: 18px; border: 3px dashed var(--stein-rand); background: transparent; cursor: pointer; }
.hfrei.mit-orten .hding { z-index: 5; } .hfrei .hding.deko { pointer-events: none; }

/* Wort legen: Lautkästchen, Abschreiben */
.lziel.laute .lplatz { min-width: 84px; height: 92px; border-radius: 12px; }
.lfest.ende { font-size: 60px; color: var(--rinde); padding: 0 2px; }
.abschreiben { display: flex; align-items: center; gap: 18px; padding: 6px 18px; border-radius: 20px; background: var(--creme); box-shadow: var(--schatten); }
.vorlage-text { font-size: clamp(44px, 7vw, 70px); }
.vorlage-text.zugedeckt { color: transparent; background: repeating-linear-gradient(45deg, var(--stein) 0 12px, var(--stein-rand) 12px 24px); border-radius: 12px; }
.richtung.lese .sym { width: 44px; height: 44px; color: var(--beere); }

/* Nachspuren eines Worts */
.typ-nachspuren.wort .ns-rahmen { aspect-ratio: auto; height: auto; width: min(96vw, 1100px); }
.typ-nachspuren.wort .ns-flaeche { height: auto; max-height: 58vh; }

/* Lage-Szenen: Ding auf, unter, neben, in, vor, hinter einem Bezug */
.szene.lage { position: relative; display: inline-block; width: 150px; height: 140px; }
.szene.lage .emoji { position: absolute; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; transform: translate(-50%, -50%); }
.szene.lage .bezug { font-size: 76px; left: 50%; top: 58%; z-index: 2; }
.szene.lage .ding { font-size: 44px; left: 50%; top: 50%; z-index: 3; }
.szene.lage.auf .ding { top: 16%; } .szene.lage.unter .bezug { top: 38%; } .szene.lage.unter .ding { top: 88%; }
.szene.lage.neben .bezug { left: 34%; } .szene.lage.neben .ding { left: 84%; top: 66%; }
.szene.lage.in .ding { font-size: 34px; top: 58%; }
.szene.lage.vor .ding { top: 74%; left: 56%; font-size: 50px; z-index: 4; }
.szene.lage.hinter .ding { top: 38%; left: 62%; z-index: 1; }
.wkarte .szene.lage { transform: scale(.9); }

/* ---------- Elternbereich und Einrichtung ---------- */
body.elternmodus { background: var(--wiese); }
.seite { max-width: 860px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px 80px; }
.seite:focus { outline: none; }
.blatt { background: var(--creme); border-radius: var(--r); padding: 22px 24px; margin: 0 0 16px; box-shadow: var(--schatten); }
.blatt > :last-child { margin-bottom: 0; }
.einrichtung { max-width: 680px; }
.einr-fuchs { width: 120px; margin: 8px auto 12px; }
.schritt { color: var(--rinde-2); font-size: .9rem; margin-bottom: .3em; }
.eltern-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.eltern-kopf h1 { margin: 0; }
.eltern-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 18px; }
.eltern-nav a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--rinde); background: var(--moos-hell); font-size: .95rem; }
.eltern-nav a.an { background: var(--moos); color: var(--creme); }
.massstab { color: var(--rinde-2); font-size: .9rem; border-left: 4px solid var(--sonne); padding-left: 10px; }
.banner { background: rgba(244, 197, 66, .22); border-radius: 12px; padding: 12px 14px; }
.liste { padding-left: 1.2em; } .liste li { margin-bottom: .45em; }
.fehlertext { color: var(--gefahr); min-height: 1.4em; }
.chip { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--moos-hell); font-size: .85rem; }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--linie); background: var(--creme); color: var(--rinde); font: 600 1rem var(--schrift); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--moos); }
.btn.haupt { background: var(--moos); border-color: var(--moos); color: var(--creme); }
.btn.leise { background: transparent; }
.btn.gefahr { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.btn.klein { min-height: 38px; padding: 6px 12px; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sym { width: 22px; height: 22px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.feld { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--linie); background: var(--wiese); color: var(--rinde); font: 1.05rem var(--schrift); }
.feld.pin { max-width: 220px; letter-spacing: .3em; font-size: 1.3rem; }
select.feld { appearance: auto; }
.formular { display: grid; gap: 6px; margin: 12px 0; font-weight: 600; }
.regler { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 400; }
.regler input[type=range] { flex: 1; min-width: 180px; accent-color: var(--moos); }
.wahlreihe { display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 400; }
.wahl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.wahl input, .schalter input, .bk-wahl input { width: 22px; height: 22px; accent-color: var(--moos); }
.schalter { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linie); }
.schalter span { display: grid; }
.anleitung ol { padding-left: 1.3em; } .anleitung li { margin-bottom: .4em; }
.hoertest { border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 12px; }
.hoertest-kopf { display: flex; gap: 10px; align-items: center; }
.bkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 10px; }
.bkachel { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 6px 6px 10px; border-radius: 12px; background: var(--wiese); }
.bk-wahl { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; cursor: pointer; min-width: 0; }
.bk-wahl input { grid-row: span 2; }
.bk-pfeile { display: flex; flex-direction: column; gap: 2px; }
.bk-pfeil { width: 26px; height: 22px; border: 0; border-radius: 6px; background: var(--creme); color: var(--rinde-2); font: 700 16px/1 var(--schrift); cursor: pointer; padding: 0; }
.bk-zeichen { font-size: 1.25rem; font-weight: 700; }
.bk-wort { font-size: .8rem; }
.gefahr-blatt h2 { color: var(--gefahr); }
details summary { cursor: pointer; color: var(--moos); margin: 6px 0; }
.pin-blatt { max-width: 440px; margin: 10vh auto 0; }

/* Meldungen, Dialoge, Hinweise */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 60; background: var(--rinde); color: var(--creme); padding: 12px 18px; border-radius: 12px; max-width: min(92vw, 560px); transition: opacity .25s ease, transform .25s ease; font-size: .95rem; }
.toast.da { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { background: var(--warn); color: #fff; }
.dlg { border: 0; border-radius: var(--r); padding: 22px; max-width: min(92vw, 480px); background: var(--creme); color: var(--rinde); box-shadow: var(--schatten); }
.dlg::backdrop { background: rgba(20, 30, 24, .45); }
.dlg-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.update-hinweis, .speicherwarnung { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 55; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--creme); color: var(--rinde); border-radius: 14px; padding: 10px 14px; box-shadow: var(--schatten); max-width: min(94vw, 620px); font-size: .95rem; }
.speicherwarnung { border: 2px solid var(--warn); }
.datei-knopf { position: relative; }

@media (max-width: 640px) {
  .kind { font-size: 24px; }
  .k-mitte-oben { gap: 8px; } .fortschritt { gap: 4px; max-width: 150px; } .fp { width: 9px; height: 9px; }
  .kk { width: 72px; height: 72px; } .kk .sym { width: 44px; height: 44px; }
  .k-platz { width: 72px; height: 72px; }
  .blatt { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-transparency: reduce) { .dlg::backdrop { background: rgba(20, 30, 24, .8); } }

/* --- Sammelbild (Belohnung): eine Szene füllt sich Teil für Teil. Das neue Teil wächst aus dem Boden. --- */
.sammelbild { display: block; width: 100%; height: auto; border-radius: 24px; background: var(--creme); box-shadow: var(--schatten); }
.sammelbild.klein { border-radius: 14px; box-shadow: none; }
.sammelbild .teil > g { transform-box: fill-box; transform-origin: 50% 100%; }
.sammelbild .teil.neu > g { animation: sbild-auftauchen .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes sbild-auftauchen { from { transform: scale(.2); opacity: 0; } 45% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes sbild-einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sammelbild .teil.neu > g { animation: sbild-einblenden .6s ease both !important; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sammelbild { filter: brightness(.9); } }
:root[data-theme="dark"] .sammelbild { filter: brightness(.9); }

/* Schmale Geräte: Karten mit Szenen, Zehner und Einer, Dinge in Gruppen (zuletzt, damit es die Grundregeln überschreibt) */
@media (max-width: 640px) {
  .zkarte { max-width: 44vw; }
  .zkarte .szene.lage { width: 96px; height: 92px; } .zkarte .szene.lage .bezug { font-size: 50px; } .zkarte .szene.lage .ding { font-size: 28px; }
  .zkarte .szene.menge { flex-wrap: wrap; justify-content: center; max-width: 40vw; } .zkarte .szene.menge .emoji { font-size: 26px; }
  .zkarte .szene.groesse.gross .emoji { font-size: 60px; } .zkarte .szene.groesse.klein .emoji { font-size: 26px; }
  .ze-quellen { gap: 12px; flex-wrap: wrap; justify-content: center; } .ze-zehner svg, .ze-quelle svg { width: min(190px, 52vw); }
  .ze-flaeche { min-width: 0; width: 100%; box-sizing: border-box; }
  .ding { font-size: 30px; } .dinge { gap: 12px; } .dinge-gruppe { gap: 4px; padding: 6px 8px; }
}