/* Plättchenfeld (Kinderwelt) — gemeinsamer Look von Zehnerfeld und Zwanzigerfeld.
   Logik: plaettchenfeld.js. Rechnen wie mit den rot-blauen Holzplättchen im
   Klassenzimmer (Zainab 2026-10-01): erste Zahl blau, zweite Zahl rot. */
#buehne { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.zf-aufgabe {
  min-height: 72px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-weight: 900; font-size: clamp(44px, 12vw, 68px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.zf-aufgabe[hidden] { display: none !important; }
.zf-aufgabe .op { color: var(--k-ink-2); }
.zf-aufgabe .frage { color: var(--k-ink-3); }
.zf-aufgabe .loesung { color: var(--k-erfolg); animation: kw-hops .45s ease; }
.zf-aufgabe .ziel {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4em; height: 1.35em; padding: 0 .2em;
  border-radius: 20px; background: var(--k-taste-bg);
}
.zf-aufgabe .ziel.geschafft { background: var(--k-erfolg); color: #fff; }

/* Die beiden Zahlen der Rechenaufgabe sind Tasten: blau zuerst, dann rot. */
.zf-zahltaste {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; min-height: 56px; height: 1.3em; padding: 0 .18em;
  border-radius: var(--k-r-gross);
  background: var(--k-taste-bg);
  font: inherit; line-height: 1;
  cursor: pointer; touch-action: manipulation;
  transition: transform .12s ease, background-color .2s ease, color .2s ease;
}
.zf-zahltaste.blau { color: var(--k-blau); }
.zf-zahltaste.rot { color: var(--k-koralle); }
.zf-zahltaste:active { transform: scale(.94); }
.zf-zahltaste.an.blau { background: var(--k-blau); color: #fff; }
.zf-zahltaste.an.rot { background: var(--k-koralle); color: #fff; }
.zf-zahltaste.ruft { animation: zf-ruft 1.4s ease-in-out infinite; }
@keyframes zf-ruft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.zf-feld {
  --c: 36px; --g: 5px; --mitte: 14px; --rg: 14px;
  display: flex; flex-direction: column; gap: var(--rg);
  padding: calc(var(--c) * .28);
  border-radius: calc(var(--c) * .45);
  background: var(--k-flaeche-2);
  box-shadow: inset 0 0 0 3px var(--k-taste-an);
  touch-action: manipulation;
}
/* Ein Zehner: quer = eine Reihe (5 | 5), hoch = Zehnerfeld 2 × 5. */
.zf-zehner {
  display: flex; gap: var(--mitte);
  padding: var(--g); border-radius: calc(var(--c) * .34);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.zf-feld.hoch .zf-zehner { flex-direction: column; gap: var(--g); }
.zf-zehner.voll { box-shadow: inset 0 0 0 3px var(--k-erfolg); background: color-mix(in srgb, var(--k-erfolg) 10%, transparent); }
.zf-haelfte { display: flex; gap: var(--g); }
.zf-zelle {
  width: var(--c); height: var(--c); flex: none;
  border-radius: 50%;
  background: var(--k-taste-bg);
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
}
.zf-pl {
  width: 86%; height: 86%; border-radius: 50%;
  background: var(--k-blau);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), inset 0 3px 0 rgba(255, 255, 255, .22);
  animation: zf-rein .22s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.zf-pl.rot { background: var(--k-koralle); }
.zf-pl.weg { background: transparent; box-shadow: inset 0 0 0 3px var(--k-koralle); animation: none; }
.zf-pl.weg::before, .zf-pl.weg::after {
  content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 2px; background: var(--k-koralle);
}
.zf-pl.weg::before { transform: rotate(45deg); }
.zf-pl.weg::after { transform: rotate(-45deg); }
.zf-feld.hops .zf-pl:not(.weg) { animation: kw-hops .45s ease; }
@keyframes zf-rein { from { transform: scale(.2); } to { transform: none; } }

.zf-zahl { min-height: 64px; font-weight: 900; font-size: 60px; line-height: 1; color: var(--k-blau); font-variant-numeric: tabular-nums; }
.zf-zahl:empty { visibility: hidden; }
.zf-zahl[hidden] { display: none; }

.kw-fuss .kw-reihe { width: 100%; max-width: 560px; }
#btn-fertig { flex: 1 1 auto; max-width: 240px; }
#btn-fertig svg { width: 34px; height: 34px; }

/* Flache Bühne (Handy quer): Aufgabenzeile kleiner, damit das Feld Platz hat. */
@media (max-height: 560px) {
  #buehne { gap: 10px; padding: 10px; }
  .zf-aufgabe { min-height: 56px; font-size: 40px; gap: 10px; }
  .zf-zahltaste { min-height: 56px; height: 56px; min-width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .zf-zahltaste.ruft { animation: none; box-shadow: inset 0 0 0 4px currentColor; }
}