/* Touch-friendly exercise desk. Task generation and scoring remain unchanged. */
#screen-lernen {
  background: radial-gradient(ellipse at 0 0, #e0efe6 0, transparent 52%), #f6f5ed;
  min-height:100svh;
}
#screen-lernen .kopf {padding:.45rem clamp(.65rem,2vw,1.4rem);gap:.6rem;background:#fffdf7;}
#screen-lernen .kopf .titel {font-size:clamp(.95rem,2vw,1.2rem);min-width:0;line-height:1.25;}
#screen-lernen .kopf .btn-rund {width:46px;height:46px;min-height:46px;flex:none;}
#screen-lernen .kopf .sprecher {flex:none;}
#screen-lernen .inhalt.lern-layout {
  width:100%;max-width:1180px;padding:clamp(.65rem,2vw,1.35rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,350px);
  gap:clamp(.8rem,2vw,1.5rem);align-items:start;
}
.lern-aufgabe {display:grid;gap:.8rem;min-width:0;}
#screen-lernen .begleiter {margin:0;gap:.65rem;align-items:center;min-height:0;}
#screen-lernen .willi-box {width:64px;height:64px;min-width:64px;flex:0 0 64px;}
#screen-lernen .willi-bubble {padding:.65rem .85rem;font-size:.95rem;line-height:1.4;min-height:0;background:#fffdf7;box-shadow:none;}
#screen-lernen .frage-kopf {
  position:relative;padding:1rem .7rem;min-height:110px;gap:.5rem;
  background:#fffdf7;border:2px solid #c9dfd2;border-radius:24px;
  box-shadow:0 5px 0 #c9dfd2,0 12px 28px #294c3910;
}
#screen-lernen .frage-zeile {min-width:0;gap:.3rem;font-size:clamp(1.7rem,3.8vw,2.7rem);padding:.2rem;}
#screen-lernen .frage-kopf>.sprecher {flex:0 0 44px;align-self:center;}
#screen-lernen .zahl-chip {min-height:44px;align-items:center;justify-content:center;border:1px solid #d5e7dd;background:#eaf3ed;box-shadow:0 3px 0 #d3e3d8;border-radius:14px;padding:.1em .26em;}
#screen-lernen .zahl-chip.ergebnis {background:#fce9ac;border-color:#e6c96d;box-shadow:0 3px 0 #e6c96d;}
#screen-lernen .ergebnis-chip {background:#fff5d4;border-color:#d6b85d;color:#826c2c;}
#screen-lernen .frage-text {font-size:clamp(1rem,2vw,1.2rem);line-height:1.5;overflow-wrap:anywhere;}
#screen-lernen .buehne {
  min-width:0;padding:clamp(.65rem,1.6vw,1.1rem);gap:.6rem;border-radius:22px;
  background:linear-gradient(135deg,#fffdf7,#edf5eb);border:1px solid #d3e3d5;
  box-shadow:0 4px 0 #dfe8da;
}
#screen-lernen .buehne .vis {max-height:280px;}
#screen-lernen .vis-strahl .vis {max-height:155px;}
#screen-lernen .antwort-bereich {
  position:sticky;top:82px;min-width:0;padding:1rem;gap:.65rem;
  background:#fffdf8;border:2px solid #d9e2ed;border-radius:24px;
  box-shadow:0 5px 0 #d9e2ed,0 12px 28px #263a5710;
}
.antwort-kopf {display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.82rem;color:#36526a;font-weight:700;}
.antwort-tipp {font-size:.72rem;font-weight:400;color:#667362;}
#screen-lernen .antwort-anzeige {min-height:62px;font-size:2.2rem;border:1px solid #d8e3ec;background:#edf3f8;border-radius:14px;padding:.3rem;}
#screen-lernen .antwort-anzeige .vis {max-height:80px;}
#screen-lernen .pad {width:100%;max-width:330px;gap:.45rem;}
#screen-lernen .pad button {
  min-height:54px;font-size:1.55rem;border:1px solid #d4ddd8;border-radius:14px;
  background:#fff;box-shadow:0 3px 0 #d4ddd8;touch-action:manipulation;
}
#screen-lernen .pad button:hover {background:#edf5ee;border-color:#a0b9a7;}
#screen-lernen .pad button:active {transform:translateY(2px);box-shadow:0 1px 0 #d4ddd8;}
#screen-lernen .pad .loeschen {background:#f6efe6;color:#795c3e;}
#screen-lernen .pad #btnFertig {background:#287452;color:white;border-color:#206044;box-shadow:0 3px 0 #19503a;}
#screen-lernen .wahl-bereich {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;}
#screen-lernen .wahl {min-width:0;min-height:76px;padding:.55rem .35rem;border-radius:18px;border:2px solid #d4e3db;background:#f0f6ef;box-shadow:0 4px 0 #d4e3db;font-size:1.8rem;touch-action:manipulation;}
#screen-lernen .wahl.ist-richtig {background:var(--gut-hell);border-color:var(--gut);}
#screen-lernen .wahl.schau {background:var(--schau-hell);border-color:var(--schau);}
#screen-lernen .mini-feld {grid-template-columns:repeat(5,14px);gap:4px;justify-content:center;}
#screen-lernen .mini-feld i.luecke {grid-column:auto;}
#screen-lernen .mini-feld i {width:14px;height:14px;}
#screen-lernen .aktionen {gap:.5rem;}
#screen-lernen .aktionen .btn {min-height:46px;padding:.55rem .7rem;font-size:.9rem;flex:1;}
#screen-lernen .feedback-leiste:empty {height:4px;}
#screen-lernen .feedback-leiste.richtig,#screen-lernen .feedback-leiste.schau {min-height:44px;font-size:1rem;padding:.45rem;}
#screen-lernen .enaktiv-knoepfe {gap:.45rem;}
#screen-lernen .enaktiv-knoepfe .btn {min-height:48px;padding:.55rem .7rem;font-size:.9rem;}
#screen-lernen .enaktiv-hinweis {font-size:.95rem;margin:.2rem 0;}
#screen-lernen .paar-bereich {gap:.4rem;}
#screen-lernen .paar-feld {min-width:0;flex:1;min-height:60px;font-size:1.5rem;}
#screen-lernen .rechenweg {padding:1rem;border-radius:20px;}
#screen-lernen .entdeckung {padding:.7rem;gap:.6rem;font-size:.95rem;}
#screen-lernen.zeigt-rechenweg .antwort-kopf,
#screen-lernen.zeigt-rechenweg .antwort-anzeige,
#screen-lernen.zeigt-rechenweg .pad,
#screen-lernen.zeigt-rechenweg .wahl-bereich,
#screen-lernen.zeigt-rechenweg .paar-bereich,
#screen-lernen.zeigt-rechenweg .enaktiv-bereich {display:none;}
@media(max-width:680px) {
  #screen-lernen .inhalt.lern-layout {grid-template-columns:minmax(0,1fr);max-width:540px;gap:.7rem;padding:.6rem .65rem max(.85rem,env(safe-area-inset-bottom));}
  .lern-aufgabe {gap:.6rem;}
  #screen-lernen .kopf {gap:.35rem;}
  #screen-lernen .kopf .titel {font-size:.9rem;}
  #screen-lernen .funken-anzeige {font-size:.85rem;white-space:nowrap;}
  #screen-lernen .willi-box {width:42px;height:42px;min-width:42px;flex-basis:42px;}
  #screen-lernen .willi-bubble {font-size:.85rem;padding:.45rem .6rem;border-radius:14px;}
  #screen-lernen .frage-kopf {min-height:78px;padding:.6rem .4rem;border-radius:18px;}
  #screen-lernen .frage-zeile {font-size:clamp(1.4rem,6.7vw,2rem);gap:.2rem;}
  #screen-lernen .zahl-chip.gross {font-size:2.3rem;}
  #screen-lernen .buehne {border-radius:18px;padding:.6rem;}
  #screen-lernen .buehne .vis {max-height:200px;}
  #screen-lernen .antwort-bereich {position:static;padding:.7rem;gap:.45rem;border-radius:20px;}
  #screen-lernen .antwort-anzeige {min-height:48px;font-size:1.85rem;}
  #screen-lernen .pad {max-width:none;gap:.35rem;}
  #screen-lernen .pad button {min-height:46px;font-size:1.4rem;border-radius:11px;}
  #screen-lernen .wahl {min-height:64px;}
  #screen-lernen .aktionen .btn {min-height:44px;font-size:.85rem;}
}
@media(min-width:560px) and (max-height:560px) and (orientation:landscape) {
  #screen-lernen .inhalt.lern-layout {max-width:1100px;grid-template-columns:minmax(0,1fr) minmax(250px,38%);padding:.6rem;}
  #screen-lernen .antwort-bereich {position:static;padding:.65rem;gap:.4rem;}
  #screen-lernen .antwort-tipp {display:none;}
  #screen-lernen .pad button {min-height:44px;font-size:1.3rem;}
  #screen-lernen .antwort-anzeige {min-height:44px;}
  #screen-lernen .willi-box {width:40px;height:40px;min-width:40px;flex-basis:40px;}
  #screen-lernen .buehne .vis {max-height:210px;}
}
body.kontrast #screen-lernen,body.kontrast #screen-lernen .frage-kopf,body.kontrast #screen-lernen .buehne,body.kontrast #screen-lernen .antwort-bereich {background:white;border-color:black;box-shadow:none;}
body.kontrast #screen-lernen .zahl-chip,body.kontrast #screen-lernen .pad button,body.kontrast #screen-lernen .wahl {border:2px solid black;box-shadow:none;}

/* Keep a silent mascot from reserving empty vertical space on small displays. */
@media(max-width:680px) {
  #screen-lernen .begleiter:not(:has(.willi-bubble.sichtbar)) {display:none;}
  #screen-lernen .pad #btnFertig {padding:.3rem;}
}
/* Compact keyboard retains the 1–9 block; delete, zero and confirm sit beside it. */
@media(max-width:680px) and (max-height:740px) and (orientation:portrait) {
  #screen-lernen .inhalt.lern-layout {gap:.5rem;padding:.5rem;}
  #screen-lernen .buehne .vis {max-height:155px;}
  #screen-lernen .pad {grid-template-columns:repeat(4,minmax(0,1fr));}
  #screen-lernen .pad [data-z="1"] {grid-area:1 / 1;}
  #screen-lernen .pad [data-z="2"] {grid-area:1 / 2;}
  #screen-lernen .pad [data-z="3"] {grid-area:1 / 3;}
  #screen-lernen .pad [data-z="4"] {grid-area:2 / 1;}
  #screen-lernen .pad [data-z="5"] {grid-area:2 / 2;}
  #screen-lernen .pad [data-z="6"] {grid-area:2 / 3;}
  #screen-lernen .pad [data-z="7"] {grid-area:3 / 1;}
  #screen-lernen .pad [data-z="8"] {grid-area:3 / 2;}
  #screen-lernen .pad [data-z="9"] {grid-area:3 / 3;}
  #screen-lernen .pad [data-z="loeschen"] {grid-area:1 / 4;}
  #screen-lernen .pad [data-z="0"] {grid-area:2 / 4;}
  #screen-lernen .pad #btnFertig {grid-area:3 / 4;}
}

#screen-lernen .antwort-bereich>.rechenweg {padding:0;background:transparent;border:0;box-shadow:none;}
#screen-lernen .antwort-bereich>.rechenweg ol {gap:.5rem;margin:.7rem 0;}
#screen-lernen .antwort-bereich>.rechenweg li {padding:.65rem;line-height:1.45;}

body.kleine-schritte #btnFreunde,body.kleine-schritte #btnSiegertafel{display:none!important}

#discoveryPanel{background:#fffdf7;border:1px solid #c9ddd2;border-radius:18px;padding:1.2rem;margin:1rem auto;max-width:760px}body.kleine-schritte .feedback-leiste{flex-wrap:wrap;gap:.6rem}body.kleine-schritte .feedback-leiste .btn{min-height:44px}