/* ==========================================================================
   lernen.css — Stile für die Altersauswahl und das Lern-Overlay.
   Additiv: ändert NICHTS am bestehenden style.css. Nutzt dessen Design-Tokens
   (--senf, --pflaume, --salbei, --pink, --creme, --font-titel …).
   Nur auf ?seite=spielen geladen.
   ========================================================================== */

/* ---- 1) Vollbild-Altersauswahl ------------------------------------------ */

/* Solange der Altersscreen sichtbar ist (noch nicht ".weg"), die dahinter-
   liegende Spielszene komplett ausblenden. Sonst ragt der Spiel-Benji oben
   über den cremefarbenen Screen und überlappt den Titel (iPhone 12 Pro u.a.).
   Sobald ".weg" gesetzt ist (Alter gewählt), wird die Szene wieder sichtbar. */
.alter-screen:not(.weg) ~ .szene-wrap,
.alter-screen:not(.weg) ~ .spiel-fortschritt,
.alter-screen:not(.weg) ~ .abzeichen-reihe {
  visibility: hidden;
}

/* Lade-Glitch beheben: Das Start-Overlay ("Hilfst du Benji?") darf am Anfang
   NICHT kurz aufblitzen, bevor JS es versteckt. Solange der Altersscreen noch
   da ist (nicht ".weg"), blenden wir #spielStart per CSS sofort aus — kein
   Warten auf das (deferred) Skript, kein Flackern beim ersten Laden. */
.alter-screen:not(.weg) ~ #spielStart {
  display: none !important;
}

/* Die Bühne soll während der Altersauswahl so hoch sein, dass alle Karten
   hineinpassen — der Altersscreen liegt absolut darüber und füllt sie aus.
   So muss nicht gescrollt werden, und nichts ragt heraus. */
.spiel-buehne:has(.alter-screen:not(.weg)) {
  min-height: 600px;
}

.alter-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 18px;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(245,181,61,.16), transparent 60%),
    var(--creme, #fff7e8);
  gap: 6px;
  animation: alterRein .35s ease both;
  /* Falls der Screen doch einmal zu klein ist: scrollen statt überlaufen */
  overflow-y: auto;
}
@keyframes alterRein { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* WICHTIG: Wenn das Alter gewählt ist (".weg") oder der Screen versteckt wird
   ([hidden]), MUSS er komplett verschwinden. Ohne diese Regel überschreibt
   das obige display:flex sowohl das hidden-Attribut als auch ".weg" — dann
   bleibt der Altersscreen sichtbar, obwohl er weg sein soll. */
.alter-screen.weg {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.alter-screen[hidden] {
  display: none !important;
}

.alter-benji { display: block; margin-bottom: 2px; }
.alter-benji img { width: 84px; height: 84px; }

.alter-frage {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.05;
  margin: 4px 0 0;
  color: var(--pflaume, #6b4aa0);
}
.alter-hinweis {
  max-width: 30ch;
  margin: 0 0 14px;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted, #8a7d6b);
}

.alter-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(78px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 380px;
}

/* die „Bauklotz"-Karten — großes Tap-Target, kindgerecht */
.alter-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: 12px 6px;
  border: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(107,74,160,.18), 0 8px 16px rgba(107,74,160,.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  touch-action: manipulation;
}
/* unsichtbares Extra-Trefferfeld für kleine Finger */
.alter-karte::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.alter-karte:nth-child(6n+1) { background: #fff3d6; }
.alter-karte:nth-child(6n+2) { background: #ffe1ec; }
.alter-karte:nth-child(6n+3) { background: #e3f1de; }
.alter-karte:nth-child(6n+4) { background: #ece3fb; }
.alter-karte:nth-child(6n+5) { background: #fdf0d0; }
.alter-karte:nth-child(6n+6) { background: #def0f6; }

.alter-karte:hover { transform: translateY(-2px); }
.alter-karte:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(107,74,160,.18); }
.alter-karte:focus-visible { outline: 3px solid var(--pink, #e85d9a); outline-offset: 3px; }
.alter-karte.gewaehlt {
  background: var(--senf, #f5b53d);
  transform: translateY(3px) scale(1.02);
  box-shadow: 0 2px 0 rgba(107,74,160,.25);
}

.ak-zahl {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--pflaume, #5b3a82);
}
.ak-klasse {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--muted, #8a7d6b);
}
.alter-karte-mehr .ak-zahl { font-size: 24px; }

/* ---- 2) Lern-Overlay (Aufgabe mitten im Spiel) -------------------------- */

.lern-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: inherit;
  background: rgba(43, 28, 70, .42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease;
}
.lern-overlay.sichtbar { opacity: 1; }
.lern-overlay[hidden] { display: none; }

.lern-karte {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 26px;
  padding: 20px 18px 22px;
  box-shadow: 0 18px 40px rgba(43,28,70,.3);
  text-align: center;
  transform: translateY(12px) scale(.97);
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2);
}
.lern-overlay.sichtbar .lern-karte { transform: none; }

.lern-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.lern-icon { font-size: 26px; line-height: 1; }
.lern-titel {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: 19px;
  color: var(--pflaume, #6b4aa0);
}

/* Die Frage — je nach Typ groß und klar */
.lern-frage { margin: 6px 0 18px; min-height: 64px; display: flex; align-items: center; justify-content: center; }
.lf-rechnung {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 800;
  color: var(--pflaume, #5b3a82);
  letter-spacing: .02em;
}
.lf-emoji { font-size: clamp(54px, 18vw, 84px); line-height: 1; }
.lf-symbole { font-size: clamp(26px, 7vw, 36px); line-height: 1.4; word-spacing: 2px; }
.lf-wort {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: clamp(34px, 11vw, 50px);
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--pflaume, #5b3a82);
}
.lf-wort-emoji { display: block; font-size: 46px; margin-bottom: 4px; }
.lf-text { font-size: 19px; font-weight: 800; color: var(--pflaume, #5b3a82); }

/* Antwort-„Pad": große Tap-Knöpfe */
.lern-optionen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lern-opt {
  min-height: 60px;
  padding: 14px 8px;
  border: none;
  border-radius: 18px;
  background: var(--salbei, #e3f1de);
  color: var(--pflaume, #2f5c34);
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 0 rgba(47,92,52,.18);
  transition: transform .1s ease, box-shadow .1s ease, background .2s ease;
  touch-action: manipulation;
}
.lern-opt::after { content: ""; position: absolute; inset: -6px; }
.lern-opt:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(47,92,52,.18); }
.lern-opt:focus-visible { outline: 3px solid var(--pink, #e85d9a); outline-offset: 2px; }
.lern-opt.ist-richtig {
  background: #7ec98f;
  color: #fff;
  animation: richtigHuepf .4s ease;
}
.lern-opt.ist-falsch {
  background: #f3c0cf;
  color: #a23a5c;
  opacity: .8;
  animation: falschWackel .3s ease;
}
@keyframes richtigHuepf { 0%,100% { transform: none; } 40% { transform: translateY(-6px) scale(1.06); } }
@keyframes falschWackel { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Vokal-Fluss-Sprung: Steine über dem „Wasser" */
.optionen-fluss {
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px 4px 6px;
  margin-top: 4px;
  border-radius: 18px;
  background: linear-gradient(180deg, #cfeffb 0%, #9fdcf3 100%);
  box-shadow: inset 0 2px 6px rgba(40,90,120,.18);
}
.lern-stein {
  background: #f4d9a6;
  color: #6b4a2a;
  box-shadow: 0 4px 0 rgba(150,110,60,.35);
  font-size: 22px;
  min-height: 56px;
  border-radius: 50% 50% 46% 46%;
}
.lern-stein:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(150,110,60,.35); }
.lern-stein.ist-richtig { background: #7ec98f; color: #fff; box-shadow: 0 4px 0 rgba(47,92,52,.3); }
.lern-stein.ist-falsch { background: #e9a9a9; color: #7a2e2e; }

.lern-feedback {
  margin: 14px 0 0;
  min-height: 22px;
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: 17px;
  font-weight: 700;
}
.lern-feedback.gut { color: #3a9d57; }
.lern-feedback.hinweis { color: var(--pink, #e85d9a); }

/* ---- 3) Admin: Lern-Kacheln (greift auf bestehende .stat-* zu) ---------- */
.lern-balken-zeile { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.lern-balken-name { width: 92px; font-weight: 800; font-size: 13px; color: var(--pflaume, #6b4aa0); text-transform: capitalize; }
.lern-balken-spur { flex: 1; height: 14px; background: #eee4cf; border-radius: 7px; overflow: hidden; }
.lern-balken-fuell { height: 100%; background: #7ec98f; border-radius: 7px; transition: width .4s ease; }
.lern-balken-wert { width: 54px; text-align: right; font-weight: 800; font-size: 13px; color: var(--muted, #8a7d6b); }

/* ---- Klein/Schmal: Karten enger stellen --------------------------------- */
@media (max-width: 360px) {
  .alter-raster { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .alter-karte { min-height: 74px; border-radius: 16px; }
  .ak-zahl { font-size: 26px; }
  .lern-optionen { gap: 9px; }
  .lern-opt { min-height: 54px; font-size: 22px; }
}

/* ---- Reduce Motion respektieren ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .alter-screen, .alter-screen.weg,
  .lern-overlay, .lern-karte,
  .lern-opt.ist-richtig, .lern-opt.ist-falsch {
    animation: none !important;
    transition: opacity .15s linear !important;
  }
  .alter-karte:hover, .alter-karte:active { transform: none; }
}

/* ==========================================================================
   LERN-STATIONEN ALS EIGENE SZENEN (kein Overlay)
   Die Aufgabe wird direkt in die Spielszene (#spielSzene) gemalt.
   Benji bleibt links mit Sprechblase — gleicher Aufbau wie beim Sammeln.
   ========================================================================== */

/* Frage groß in der Szene (Rechnung, Symbole, Wort) */
.lern-szene-frage {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  pointer-events: none;
}
.lsz-rechnung {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 800;
  color: #5b3a82;
  background: rgba(255,255,255,.78);
  padding: 6px 18px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(91,58,130,.16);
}
.lsz-symbole {
  font-size: clamp(26px, 8vw, 40px);
  line-height: 1.35;
  word-spacing: 3px;
  background: rgba(255,255,255,.7);
  padding: 8px 16px;
  border-radius: 16px;
  max-width: 90%;
}
.lsz-emoji { font-size: clamp(48px, 16vw, 76px); line-height: 1; }
.lsz-wortfrage {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: clamp(16px, 4.5vw, 22px);
  font-weight: 800;
  color: #5b3a82;
  background: rgba(255,255,255,.82);
  padding: 8px 16px;
  border-radius: 14px;
}

/* Antwort-Felder (Rechnen, Zählen, Wörter): Reihe unten in der Szene */
.lern-felder {
  position: absolute;
  bottom: 7%;
  left: 30%;       /* Platz für Benji unten links */
  right: 5%;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.lern-felder-wort { gap: 8px; }

.lern-feld {
  min-width: 58px;
  min-height: 54px;
  padding: 10px 14px;
  border: none;
  border-radius: 16px;
  background: #fff;
  color: #5b3a82;
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 0 rgba(91,58,130,.2);
  transition: transform .1s ease, box-shadow .1s ease, background .2s ease;
  touch-action: manipulation;
}
.lern-feld::after { content: ""; position: absolute; inset: -8px; }
.lern-feld:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(91,58,130,.2); }
.lern-feld:focus-visible { outline: 3px solid var(--pink, #e85d9a); outline-offset: 2px; }
.lern-feld.ist-richtig {
  background: #7ec98f; color: #fff;
  animation: lfRichtig .4s ease;
}
.lern-feld.ist-falsch {
  background: #f3c0cf; color: #a23a5c; opacity: .85;
  animation: lfFalsch .3s ease;
}
@keyframes lfRichtig { 0%,100%{transform:none;} 40%{transform:translateY(-6px) scale(1.08);} }
@keyframes lfFalsch { 0%,100%{transform:none;} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

/* Wort-Felder dürfen breiter sein (ganze Wörter) */
.lern-felder-wort .lern-feld {
  font-size: 18px;
  letter-spacing: .04em;
  min-width: 70px;
}

/* Fluss-Sprung: Buchstaben-Steine im Wasser (rechts neben Benji) */
.fluss-steine {
  position: absolute;
  top: 40%;
  left: 30%;       /* Platz für Benji links lassen */
  right: 3%;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  align-items: center;
}
.fluss-stein {
  flex: 0 1 auto;
  min-width: 40px;
  min-height: 44px;
  padding: 6px;
  border: none;
  border-radius: 50% 50% 44% 44%;
  background: #f4d9a6;
  color: #6b4a2a;
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 5px 0 rgba(150,110,60,.4), 0 6px 10px rgba(0,0,0,.18);
  transition: transform .1s ease, box-shadow .1s ease;
  touch-action: manipulation;
}
.fluss-stein::after { content: ""; position: absolute; inset: -8px; }
.fluss-stein:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(150,110,60,.4); }
.fluss-stein:focus-visible { outline: 3px solid var(--pink, #e85d9a); outline-offset: 2px; }
.fluss-stein.ist-richtig {
  background: #7ec98f; color: #fff;
  box-shadow: 0 5px 0 rgba(47,92,52,.4);
  animation: lfRichtig .4s ease;
}
.fluss-stein.ist-falsch { background: #e9a9a9; color: #7a2e2e; animation: lfFalsch .3s ease; }

/* Fortschrittspunkt für Lern-Stationen optisch leicht abheben */
.stationen i.lern-punkt { border: 2px solid var(--pink, #e85d9a); box-sizing: border-box; }

@media (max-width: 380px) {
  .lern-feld { min-width: 50px; min-height: 48px; font-size: 20px; }
  .fluss-stein { min-width: 40px; min-height: 44px; font-size: 19px; }
  .fluss-steine { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .lern-feld.ist-richtig, .lern-feld.ist-falsch,
  .fluss-stein.ist-richtig, .fluss-stein.ist-falsch { animation: none !important; }
}

/* ==========================================================================
   UPDATE: Sprechblase Altersauswahl, Fullbild-Spiel, großes Aufgaben-Display,
   Ton-Knopf, Rätsel-Overlay (Punkte 1,3,4,6,7)
   ========================================================================== */

/* --- Sprechblase im Altersscreen (Punkt 1) --- */
.alter-benji-block {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2px;
}
.alter-sprechblase {
  position: relative;
  background: #fff;
  color: var(--pflaume, #5b3a82);
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: 17px;
  padding: 9px 16px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(91,58,130,.16);
  margin-bottom: 8px;
}
.alter-sprechblase::after {
  content: "";
  position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

/* --- Fullbild-Spiel (Punkt 4): Bühne ohne enge Umrandung, volle Breite --- */
.spiel-buehne.spiel-vollbild {
  border: none;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  max-width: none;
}
/* Szene füllt die volle Breite; Benji weiter links, mehr Platz rechts */
.spiel-vollbild .szene-wrap {
  border-radius: 16px;
  overflow: hidden;
}

/* --- Großes Aufgaben-Display über der Szene (Punkt 6) --- */
.aufgabe-gross {
  position: absolute;
  top: 10px;
  left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 12px;
}
.aufgabe-gross[hidden] { display: none; }
.ag-wort {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: clamp(34px, 11vw, 56px);
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(91,58,130,.35), 0 4px 14px rgba(0,0,0,.25);
  background: rgba(91,58,130,.32);
  padding: 6px 22px;
  border-radius: 18px;
}
.ag-rechnung {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-size: clamp(32px, 10vw, 52px);
  font-weight: 800;
  color: #5b3a82;
  background: rgba(255,255,255,.85);
  padding: 6px 22px;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(91,58,130,.18);
}
.ag-symbole {
  font-size: clamp(26px, 8vw, 40px);
  line-height: 1.3;
  word-spacing: 4px;
  background: rgba(255,255,255,.8);
  padding: 8px 18px;
  border-radius: 16px;
  max-width: 92%;
  text-align: center;
}
.ag-emoji { font-size: clamp(50px, 16vw, 80px); line-height: 1; }

/* --- Ton-Knopf (Punkt 5): dezent oben rechts in der Szene --- */
.ton-knopf {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 7;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: var(--pflaume, #5b3a82);
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.16);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ton-knopf:active { transform: scale(.94); }
.ton-knopf.ist-aus { background: rgba(255,255,255,.6); color: #b0a8c0; }

/* --- Rätsel-Overlay am Ende (Punkt 7): eigene Ebene, nichts schneidet ab --- */
.raetsel-overlay {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 22px;
  text-align: center;
  overflow-y: auto;
}
.raetsel-frage {
  font-family: var(--font-titel, 'Baloo 2', cursive);
  font-weight: 800;
  font-size: clamp(20px, 5.5vw, 26px);
  color: var(--pflaume, #5b3a82);
  margin: 0;
  max-width: 22ch;
  line-height: 1.2;
}
.raetsel-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
}
.raetsel-knopf { width: 100%; font-size: 20px; }

/* --- Benji weiter links im Fullbild: Fluss-Steine & Felder mehr Raum --- */
.spiel-vollbild .fluss-steine { left: 30%; right: 4%; gap: 3px; }
.spiel-vollbild .lern-felder { left: 28%; right: 5%; }
.spiel-vollbild .fluss-stein { min-width: 38px; font-size: 19px; }
/* Ton-Knopf immer obenauf, auch über dem großen Wort */
.ton-knopf { z-index: 9; }
/* Großes Wort etwas schmaler, damit es den Ton-Knopf nicht berührt */
.aufgabe-gross { right: 56px; }

/* ==========================================================================
   ROBUSTHEIT v2 — Lern-Stationen passen auf ALLE Frames ohne Überlauf.
   Behebt: lange Wörter (SCHMETTERLING/KICHERHAUSEN), 20 Zähl-Symbole,
   enge Antwortreihen, Überlappung mit Benji, leere Fläche auf Desktop.
   Additiv & am Dateiende -> gewinnt per Kaskade, ändert nichts Bestehendes.
   ========================================================================== */

/* --- 1) Großes Aufgaben-Display: nie breiter als die Szene, passt sich an --- */
.aufgabe-gross{
  top:8px; left:56px; right:56px;        /* Platz für Alter-Knopf (links) + Ton (rechts) */
  padding:0;
}
.aufgabe-gross > span{
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:center;
}
/* Vokal-Wort: kleinere, fluss­fähige Schrift + engeres Tracking auf Schmalgeräten,
   damit KICHERH_USEN nie an den Rändern abgeschnitten wird. */
.ag-wort{
  letter-spacing:.06em;
  font-size:clamp(22px,8.5vw,52px);
  line-height:1.05;
  padding:6px 14px;
  max-width:100%;
}
.ag-rechnung{
  font-size:clamp(26px,8.5vw,50px);
  line-height:1.05;
  white-space:nowrap;                   /* "87 − 49 = ?" bleibt einzeilig */
  padding:6px 16px;
  max-width:100%;
}
/* Zähl-Symbole: Höhe deckeln + scrollbar statt die halbe Szene zu fluten. */
.ag-symbole{
  font-size:clamp(22px,6vw,38px);
  line-height:1.25;
  max-height:34%;
  overflow:hidden;
  padding:6px 14px;
  max-width:100%;
}

/* --- 2) Antwortreihen: zentriert, mit klarem Sicherheitsrand zu Benji --- */
/* Benji nimmt unten links ~34% ein. Wir geben den Feldern einen eigenen,
   weniger aggressiven Korridor und zentrieren sie darin. */
.lern-felder{
  left:36%;
  right:4%;
  bottom:8%;
  gap:8px;
  align-items:center;
}
/* Rechnen/Zählen: drei Felder sollen nie umbrechen und nie rausragen */
.lern-feld{
  min-width:0;
  flex:0 1 auto;
  font-size:clamp(18px,5.2vw,24px);
  padding:10px 12px;
}
/* Wort-Felder (ganze Wörter) untereinander stapeln statt nebeneinander —
   so passt auch SCHMETTERLING immer rein und bleibt gut tippbar. */
.lern-felder-wort{
  left:34%;
  right:4%;
  bottom:6%;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.lern-felder-wort .lern-feld{
  width:100%;
  min-width:0;
  font-size:clamp(15px,4.4vw,18px);
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* --- 3) Fluss-Steine: alle fünf passen rein, nichts hinter Benji --- */
.fluss-steine,
.spiel-vollbild .fluss-steine{
  left:35%;
  right:3%;
  gap:3px;
  flex-wrap:nowrap;
}
.fluss-stein,
.spiel-vollbild .fluss-stein{
  flex:1 1 0;
  min-width:0;
  font-size:clamp(15px,4.6vw,20px);
  padding:6px 2px;
}

/* --- 4) Sehr schmale Geräte (≤360px): noch mehr Sicherheitsabstand --- */
@media (max-width:360px){
  .aufgabe-gross{ left:48px; right:48px; }
  .ag-wort{ font-size:clamp(20px,8vw,30px); letter-spacing:.03em; }
  .lern-felder{ left:34%; gap:6px; }
  .lern-feld{ font-size:18px; padding:9px 8px; }
  .lern-felder-wort{ left:30%; }
  .fluss-steine{ left:33%; gap:2px; }
  .fluss-stein{ font-size:15px; }
}

/* --- 5) Breite Frames (Tablet/Desktop): keine tote Fläche mehr --- */
/* Auf großen Screens würde aspect-ratio 4/3 eine riesige leere Mitte erzeugen.
   Wir begrenzen die Szenenhöhe und ziehen die Antwortfelder mittig nach oben. */
@media (min-width:760px){
  .spiel-vollbild .szene{ aspect-ratio:16/9; max-height:440px; }
  .lern-felder{
    bottom:auto;
    top:58%;
    left:0; right:0;
    justify-content:center;
    gap:14px;
  }
  .lern-felder-wort{
    top:54%;
    left:0; right:0;
    align-items:center;
    max-width:420px;
    margin:0 auto;
  }
  .fluss-steine,
  .spiel-vollbild .fluss-steine{
    left:0; right:0;
    justify-content:center;
    gap:10px;
    max-width:520px;
    margin:0 auto;
  }
  .fluss-stein,
  .spiel-vollbild .fluss-stein{ flex:0 0 auto; min-width:56px; }
  .aufgabe-gross{ left:0; right:0; }
  .aufgabe-gross > span{ max-width:80%; margin:0 auto; }
}

/* ==========================================================================
   KINDERPSYCHOLOGIE v3 — Feedback-Schleife, Inklusion, Orientierung.
   Mini-Hinweis am Ort der Handlung, Lösungs-Glühen nach 2 Fehlern,
   ✓/✗-Symbole (Farbfehlsicht), Alter-ändern-Knopf, Fortschrittstext.
   Additiv, markenkonform (nutzt Tokens), ändert nichts Bestehendes.
   ========================================================================== */

/* --- Mini-Hinweis mitten in der Szene (dort wo das Kind tippt) ----------- */
.lern-mini-hinweis{
  position:absolute;
  left:50%; top:38%;
  transform:translate(-50%,-8px);
  z-index:8;
  max-width:72%;
  background:var(--pink, #ff5d9e);
  color:#fff;
  font-family:var(--font-titel, 'Baloo 2', cursive);
  font-weight:800;
  font-size:clamp(13px,3.4vw,16px);
  line-height:1.2;
  padding:8px 14px;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(224,64,126,.3);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.lern-mini-hinweis.zeig{
  opacity:1;
  transform:translate(-50%,0);
}

/* --- Lösung nach 2 Fehlern sanft zeigen (nie feststecken) ---------------- */
.lern-feld.zeig-loesung,
.fluss-stein.zeig-loesung{
  animation:loesungPuls 1s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(126,201,143,.9), 0 6px 16px rgba(58,157,87,.4) !important;
}
@keyframes loesungPuls{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-2px) scale(1.05); }
}

/* --- ✓ / ✗ Symbole zusätzlich zur Farbe (Farbfehlsichtigkeit, C2) -------- */
.lern-feld.ist-richtig::before,
.fluss-stein.ist-richtig::before{
  content:"✓";
  position:absolute;
  top:-8px; right:-6px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:#2f9d57; color:#fff;
  border-radius:50%;
  font-size:14px; font-weight:900;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.lern-feld.ist-falsch::before,
.fluss-stein.ist-falsch::before{
  content:"✗";
  position:absolute;
  top:-8px; right:-6px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:#d2618a; color:#fff;
  border-radius:50%;
  font-size:13px; font-weight:900;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
/* Damit das ::before-Badge sichtbar ist, ::after-Trefferfeld nicht überdecken */
.lern-feld, .fluss-stein{ overflow:visible; }

/* --- Falsch ist NICHT mehr „tot": nicht ausgrauen, nur kurz wackeln ------ */
.lern-feld.ist-falsch,
.fluss-stein.ist-falsch{
  opacity:1;                  /* vorher .8/.85 – grau wirkt wie Bestrafung */
}
.lern-feld:disabled,
.fluss-stein:disabled{
  opacity:1;                  /* kurze Sperre während Wackeln, nicht grau */
  cursor:default;
}

/* --- Alter-ändern-Knopf (oben links in der Szene, dezent) ---------------- */
.alter-zurueck-knopf{
  position:absolute;
  top:10px; left:10px;
  z-index:7;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:var(--pflaume, #5b3a82);
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.16);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.alter-zurueck-knopf:active{ transform:scale(.94); }
/* Solange die Altersauswahl sichtbar ist, den Knopf nicht zeigen. */
.alter-screen:not(.weg) ~ .szene-wrap .alter-zurueck-knopf{ display:none; }

/* --- B5: Zähl-Symbole nicht hinter Benjis Sprechblase --------------------
   Die Sprechblase sitzt unten links; Zähl-Symbole oben. Das große
   Symbol-Display bekommt etwas mehr Luft nach unten, damit beim Zählen
   nichts verdeckt ist. */
.ag-symbole{ margin-bottom:2px; }
.szene-wrap .sprechblase{ z-index:7; }

/* --- Reduzierte Bewegung: Glühen/Hinweis ruhiger ------------------------- */
@media (prefers-reduced-motion: reduce){
  .lern-feld.zeig-loesung, .fluss-stein.zeig-loesung{ animation:none !important; }
  .lern-mini-hinweis{ transition:opacity .15s linear !important; }
}

/* --- C1: Emoji zuverlässiger rendern (alte Android-/Schul-Tablets) -------
   Erzwingt eine Emoji-fähige Schriftfamilie, damit Zähl-/Bild-Aufgaben nicht
   als leere Kästchen erscheinen. Reines Rendering, kein Inhaltswechsel. */
.ag-symbole, .ag-emoji, .lf-emoji, .lsz-emoji,
.lf-wort-emoji, .ag-wort-emoji{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
              "Android Emoji","EmojiSymbols",sans-serif;
}

/* ==========================================================================
   FIX Zähl-Aufgabe (Worst Case 20 Symbole) — endgültige Geometrie.
   Symbol-Band oben mit fester Höhe + Scroll; Antwortfelder garantiert darunter.
   Kommt zuletzt -> gewinnt die Kaskade.
   ========================================================================== */
.aufgabe-gross .ag-symbole{
  display:block;
  max-height:120px;            /* feste Obergrenze statt Prozent */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  font-size:clamp(20px,5.4vw,32px);
  line-height:1.2;
  text-align:center;
  scrollbar-width:thin;
}
/* Bei Zähl-Aufgaben sitzt das Symbol-Band oben; die Antwortfelder rücken
   sicher in die untere Hälfte, mit klarem Abstand zum Band und zu Benji. */
.szene .lern-felder{ bottom:8%; }
@media (max-width:520px){
  .aufgabe-gross .ag-symbole{ max-height:104px; }
  .szene .lern-felder{ bottom:7%; }
}
@media (min-width:760px){
  .aufgabe-gross .ag-symbole{ max-height:120px; }
}

/* ==========================================================================
   v4 — Belohnung (Sticker-Album) + Stream-Knopf am Spielende, Silben-Wort.
   Bindung & Wiederkommen: das Kind sieht seine Sammlung wachsen und wird
   zum Anhören der ganzen Geschichte eingeladen (mehr Streams).
   ========================================================================== */

/* Kleiner „Jetzt anhören"-Knopf am Spielende — dezent, in Spotify-Grün. */
.btn-anhoeren{
  display:inline-flex; align-items:center; gap:8px;
  margin:4px 0 12px;
  padding:9px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#1ed760 0%,#1db954 100%);
  color:#fff; text-decoration:none;
  font-family:var(--font-titel, 'Baloo 2', cursive);
  font-weight:800; font-size:15px;
  box-shadow:0 4px 0 #169c46, 0 10px 22px rgba(29,185,84,.28);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s ease;
}
.btn-anhoeren:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 #169c46, 0 6px 14px rgba(29,185,84,.25);
}

/* Silben-Aufgabe: das Wort groß und ruhig (kein Tracking-Wirrwarr). */
.ag-wort-silben{
  letter-spacing:.04em;
  color:#5b3a82;
  background:rgba(255,255,255,.85);
  text-shadow:none;
}

/* ==========================================================================
   SILBEN-SCHWUNGBÖGEN — Zählhilfe wie im Schulheft.
   Jede Silbe steht über einem Bogen; Kinder klatschen die Silben mit.
   ========================================================================== */
.ag-silben{
  display:flex; align-items:flex-end; justify-content:center;
  gap:6px; flex-wrap:wrap;
  font-family:var(--font-titel, 'Baloo 2', cursive);
  font-weight:800;
  color:var(--pflaume, #5b3a82);
  line-height:1;
  max-width:100%;
}
.ag-silben .silbe{
  display:flex; flex-direction:column; align-items:center;
  gap:4px;
}
.ag-silben .silbe-text{
  font-size:clamp(22px,7vw,44px);
  letter-spacing:.02em;
}
.ag-silben .silbe-bogen{
  width:100%; min-width:32px; height:14px;
  color:var(--pink, #ff5d9e);
  display:block;
}
/* Auf sehr breiten Screens die Silben etwas luftiger */
@media (min-width:760px){
  .ag-silben{ gap:12px; }
  .ag-silben .silbe-bogen{ height:18px; }
}
/* Sehr schmal: enger zusammen, damit lange Wörter passen */
@media (max-width:360px){
  .ag-silben{ gap:3px; }
  .ag-silben .silbe-text{ font-size:clamp(18px,6.5vw,26px); }
}