/* aufgaben-geraete.css – Aufgaben-Ansicht für iPhone und iPad (4.15)
 *
 * Ziele: Euli und Sprechblase überlappen nie, der Hinweistext ist immer ganz zu lesen, und auf dem Handy bleiben
 * Antwortfeld, Zahlentasten und „Weiter“ immer unten im Bild (nur der Aufgabenteil darüber scrollt).
 * Wird nach uebungen.css und lernreise-4.css geladen und überschreibt dort gezielt. Aufgaben und
 * Auswertung bleiben unverändert.
 */

/* ── Euli neben der Sprechblase: Boxbreite passt zur Bildbreite (vorher 42 px breite Box, 112 px hohes Bild) ── */
#screen-lernen { --euli-h: 84px; }
#screen-lernen .begleiter { align-items: center; gap: .7rem; }
#screen-lernen .begleiter .willi-box { height: var(--euli-h); width: calc(var(--euli-h) * .873); min-width: 0; flex: 0 0 calc(var(--euli-h) * .873); }
#screen-lernen .willi-bubble { flex: 1 1 auto; min-width: 0; max-width: none; max-height: none; overflow: visible; overflow-wrap: break-word; hyphens: manual; font-size: 1.05rem; line-height: 1.45; padding: .75rem 1rem; }
#screen-lernen .willi-bubble::before { left: -9px; bottom: auto; top: calc(50% - 8px); }
#screen-lernen .entdeckung-text, #screen-lernen .feedback-leiste, #screen-lernen .rechenweg li, #screen-lernen .enaktiv-hinweis { overflow-wrap: anywhere; }
#screen-lernen .feedback-leiste.richtig, #screen-lernen .feedback-leiste.schau { font-size: 1.05rem; line-height: 1.4; }

/* ── iPad (Hochformat und Querformat): größere Berührungsflächen ── */
@media (min-width: 681px) and (min-height: 561px) {
  #screen-lernen { --euli-h: 96px; }
  #screen-lernen .kopf { padding: .55rem max(1rem, env(safe-area-inset-left)); }
  #screen-lernen .pad button { min-height: 64px; font-size: 1.8rem; }
  #screen-lernen .antwort-anzeige { min-height: 72px; font-size: 2.6rem; }
  #screen-lernen .wahl { min-height: 88px; font-size: 2rem; }
  #screen-lernen .aktionen .btn, #screen-lernen .enaktiv-knoepfe .btn { min-height: 54px; font-size: 1rem; }
  #screen-lernen .buehne .vis { max-height: 360px; }
  #screen-lernen .willi-bubble { font-size: 1.15rem; }
}
/* 4.17: Das frühere iPad-„zoom“ ist entfernt. Tablets bekommen eigene Anordnungen in design-mobil.css
   (hochkant untereinander, quer nebeneinander) mit größeren Schriften statt einer skalierten Oberfläche. */
/* ── iPhone im Hochformat: Kopf einzeilig, Antwort unten fest, Aufgabe scrollt dazwischen ── */
@media (max-width: 680px) {
  #screen-lernen { --euli-h: 62px; }
  #screen-lernen.aktiv { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  #screen-lernen .kopf { flex: none; flex-wrap: nowrap; padding: max(.3rem, env(safe-area-inset-top)) .5rem .3rem; gap: .35rem; position: static; }
  /* Der Etappenname bekommt Platz (bis zu zwei Zeilen), statt am Tagesziel-Band abgeschnitten zu werden */
  #screen-lernen .kopf .titel { flex: 1 1 auto; min-width: 0; font-size: .95rem; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  #screen-lernen .kopf .titel { line-height: 1.25; }
  #screen-lernen .kopf .titel::before { display: inline-block; font-size: 1.1rem; line-height: 1; vertical-align: -.1em; margin-right: .3rem; }
  #screen-lernen .kopf .btn-rund { width: 42px; height: 42px; min-height: 42px; }
  #screen-lernen .kopf .sprecher { width: 42px; height: 42px; min-height: 42px; }
  #screen-lernen .tagesziel-leiste { flex: none; transform: scale(.85); transform-origin: right center; margin-left: -.4rem; }
  #screen-lernen .inhalt.lern-layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; max-width: none; width: 100%; }
  #screen-lernen .lern-aufgabe { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .5rem .6rem .6rem; gap: .5rem; display: flex; flex-direction: column; align-items: stretch; }
  #screen-lernen .lern-aufgabe > * { flex: none; }
  #screen-lernen .antwort-bereich { flex: none; align-self: stretch; width: auto; position: static; max-height: 58vh; max-height: 58dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin: 0; border-radius: 22px 22px 0 0; border-width: 2px 0 0; padding: .55rem .7rem max(.6rem, env(safe-area-inset-bottom)); gap: .4rem; box-shadow: 0 -8px 22px rgba(38, 58, 87, .12); }
  #screen-lernen .begleiter:not(:has(.willi-bubble.sichtbar)) { display: none; }
  #screen-lernen .willi-bubble { font-size: .98rem; padding: .55rem .75rem; }
  #screen-lernen .frage-kopf { min-height: 72px; }
  #screen-lernen .buehne .vis { max-height: 170px; }
  #screen-lernen .antwort-kopf { font-size: .78rem; }
  #screen-lernen .antwort-anzeige { min-height: 50px; font-size: 1.9rem; }
  #screen-lernen .aktionen { flex-wrap: wrap; }
  #screen-lernen .aktionen .btn { min-height: 46px; font-size: .92rem; }
  #screen-lernen .feedback-leiste.richtig, #screen-lernen .feedback-leiste.schau { min-height: 40px; }
}
/* kompakte Zahlentasten (3 × 4 neben Löschen/0/Fertig) auf allen Handys, auch im Querformat */
@media (max-width: 680px), (max-height: 560px) {
  #screen-lernen .pad { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: .35rem; }
  #screen-lernen .pad { grid-auto-rows: 1fr; }
  #screen-lernen .pad button, #screen-lernen .pad #btnFertig { min-height: 46px; padding: 0; font-size: 1.4rem; }
  #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; }
}
/* iPhone im Querformat: Aufgabe links, Antwort rechts, beides ohne Scrollen der Seite */
@media (max-height: 560px) and (orientation: landscape) {
  #screen-lernen { --euli-h: 48px; }
  #screen-lernen.aktiv { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  #screen-lernen .kopf { flex: none; flex-wrap: nowrap; padding: .25rem max(.6rem, env(safe-area-inset-left)); position: static; }
  #screen-lernen .kopf .btn-rund, #screen-lernen .kopf .sprecher { width: 40px; height: 40px; min-height: 40px; }
  #screen-lernen .inhalt.lern-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 40%); gap: .6rem; padding: .4rem max(.6rem, env(safe-area-inset-left)) .4rem max(.6rem, env(safe-area-inset-right)); max-width: none; align-items: stretch; }
  #screen-lernen .lern-aufgabe { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
  #screen-lernen .lern-aufgabe > * { flex: none; }
  #screen-lernen .antwort-bereich { position: static; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .5rem; gap: .35rem; }
  #screen-lernen .antwort-tipp { display: none; }
  #screen-lernen .antwort-anzeige { min-height: 44px; font-size: 1.6rem; }
  #screen-lernen .frage-kopf { min-height: 64px; padding: .4rem; }
  #screen-lernen .frage-zeile { font-size: clamp(1.3rem, 4vw, 1.9rem); }
  #screen-lernen .buehne .vis { max-height: 120px; }
  #screen-lernen .pad button, #screen-lernen .pad #btnFertig { min-height: 40px; font-size: 1.2rem; }
}
/* Handy: Antwortbereich schlank halten, damit Hinweis, Frage und Bild gleichzeitig zu sehen sind.
 * „Zeig mir den Weg“ wird ein kleines Chip oben rechts; „Weiter“ und „Jetzt ich“ bleiben große Knöpfe unten. */
@media (max-width: 680px) {
  #screen-lernen .antwort-bereich { position: relative; top: auto; }   /* top: 82px gehört nur zum Tablet-Layout */
  #screen-lernen .antwort-tipp { display: none; }
  #screen-lernen .aktionen:not(:has(#btnWeiter:not([hidden]), #btnNochmal:not([hidden]), #btnRaetsel:not([hidden]))) { position: absolute; top: .4rem; right: .65rem; width: auto; flex-wrap: nowrap; gap: 0; z-index: 2; }
  #screen-lernen .aktionen:not(:has(#btnWeiter:not([hidden]), #btnNochmal:not([hidden]), #btnRaetsel:not([hidden]))) .btn { flex: none; min-height: 40px; padding: .15rem .75rem; font-size: .85rem; border-radius: 999px; }
  #screen-lernen .antwort-kopf { min-height: 40px; }
  #screen-lernen .frage-kopf { min-height: 64px; padding: .4rem .4rem; }
}
@media (max-width: 680px) and (max-height: 760px) {
  #screen-lernen { --euli-h: 54px; }
  #screen-lernen .willi-bubble { font-size: .92rem; padding: .45rem .65rem; line-height: 1.38; }
  #screen-lernen .lern-aufgabe { gap: .4rem; padding: .4rem .55rem .5rem; }
  #screen-lernen .buehne { padding: .45rem; }
  #screen-lernen .buehne .vis { max-height: 150px; }
  #screen-lernen .antwort-bereich { padding-top: .4rem; gap: .3rem; }
  #screen-lernen .antwort-anzeige { min-height: 42px; font-size: 1.7rem; }
  #screen-lernen .pad { gap: .3rem; }
  #screen-lernen .pad button { min-height: 42px; font-size: 1.3rem; }
}
/* Niedrige Handy-Bildschirme (z. B. iPhone SE in Safari, unter etwa 620 px Höhe): alles etwas enger, damit Aufgabe und Antwort zusammen passen */
@media (max-width: 680px) and (max-height: 620px) {
  #screen-lernen .kopf { padding-top: max(.2rem, env(safe-area-inset-top)); padding-bottom: .2rem; }
  #screen-lernen .kopf .btn-rund, #screen-lernen .kopf .sprecher { width: 40px; height: 40px; min-height: 40px; min-width: 40px; }
  #screen-lernen .lern-aufgabe { gap: .3rem; padding: .3rem .5rem .4rem; }
  #screen-lernen .frage-kopf { min-height: 54px; padding: .25rem .4rem; }
  #screen-lernen .frage-zeile { font-size: clamp(1.2rem, 5.6vw, 1.6rem); }
  #screen-lernen .zahl-chip { min-height: 40px; }
  #screen-lernen .buehne { padding: .35rem; }
  #screen-lernen .buehne .vis { max-height: 125px; }
  #screen-lernen .willi-bubble { font-size: .88rem; padding: .35rem .55rem; }
  #screen-lernen .antwort-bereich { padding: .35rem .6rem max(.45rem, env(safe-area-inset-bottom)); gap: .25rem; }
  #screen-lernen .antwort-kopf { min-height: 36px; }
  #screen-lernen .aktionen:not(:has(#btnWeiter:not([hidden]), #btnNochmal:not([hidden]), #btnRaetsel:not([hidden]))) .btn { min-height: 36px; }
  #screen-lernen .antwort-anzeige { min-height: 38px; font-size: 1.5rem; }
  #screen-lernen .pad { gap: .25rem; }
  #screen-lernen .pad button, #screen-lernen .pad #btnFertig { min-height: 38px; font-size: 1.2rem; }
  #screen-lernen .paar-feld { min-height: 44px; font-size: 1.3rem; }
  #screen-lernen .wahl { min-height: 56px; font-size: 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) { #screen-lernen .antwort-bereich { transition: box-shadow var(--dauer, .2s); } }

/* sehr schmale Handys: Tagesziel-Punkte weglassen (der Fortschritt steht auf der Karte), damit der Etappenname lesbar bleibt */
@media (max-width: 430px) {
  #screen-lernen .tagesziel-leiste { display: none; }
}