/* design-mobil.css – Redesign 4.17 „Eulis Lernreise“, mobil zuerst
 *
 * Grundlage: Übergabepaket (design-tokens.json, Referenzen) und docs/REDESIGN_MOBILE.md.
 * Reihenfolge der Layouts: Handy hochkant ist die Basis (keine Media Query),
 * dann Tablet hochkant (ab 600 px Breite) und Tablet quer (ab 900 px Breite im Querformat).
 * Nichts wird als Ganzes skaliert (kein zoom/transform): Komponenten brechen um und ordnen sich neu.
 * Wird als letzte Stildatei geladen und legt die Farben auf die bestehenden Variablen.
 */

:root {
  --primaer: #4f47ff;       /* 6,3:1 mit weißer Schrift */
  --primaer-tief: #3932d8;
  --primaer-hell: #eeedff;
  --primaer-mittel: #c9c6ff;
  --sonne: #ffd562;
  --sonne-tief: #d9a520;
  --sonne-hell: #fff7dc;
  --papier: #f8fafd;
  --flaeche-2: #f1f4fb;
  --linie: #dce4f2;
  --linie-stark: #c4cfe4;
  --tinte: #17233b;         /* 15:1 */
  --tinte-weich: #5b6479;   /* 5,9:1 */
  --erfolg: #22c55e;        /* nur Flächen und Symbole, Schrift bleibt --gut */
  --fehler: #e5484d;        /* sparsam: nur Fehlerhinweise */
  --fehler-tief: #b42318;
  --fehler-hell: #fff1f1;
  --radius-k: 12px;
  --radius-m: 18px;
  --radius-g: 26px;
  --abstand: 16px;
  --ziel-min: 44px;         /* kleinste Tippfläche */
}
body { background: var(--papier); }
body.kontrast { --erfolg: #006622; --fehler: #b00020; }

/* ═══ Start / Reise ═════════════════════════════════════════════════════════ */
.start-hero { display: grid; gap: .6rem; padding: .7rem .8rem .3rem; }
.start-hero .karte-begleiter { display: flex; align-items: flex-end; gap: .5rem; margin: 0; min-height: 76px; }
.start-hero .karte-begleiter .willi-box { width: 70px; height: 80px; flex: 0 0 70px; }
.start-hero .willi-bubble { flex: 1 1 auto; max-width: none; margin: 0 0 .5rem; font-size: 1rem; line-height: 1.4; padding: .6rem .85rem; border-radius: 18px 18px 18px 6px; overflow-wrap: break-word; }
.start-hero .willi-bubble:not(.sichtbar) { visibility: hidden; }

.reise-heute { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.reise-heute .tagesziel-karte, .wetter-karte {
  display: flex; align-items: center; gap: .55rem; margin: 0; min-height: 72px; padding: .55rem .7rem;
  border-radius: var(--radius-m); background: var(--flaeche); border: 1.5px solid var(--linie);
  box-shadow: var(--schatten-weich); text-align: left; font: inherit; color: var(--tinte);
}
.reise-heute .tagesziel-karte { background: var(--sonne-hell); border-color: color-mix(in srgb, var(--sonne) 55%, white); }
.reise-heute .tagesziel-karte.fertig { background: var(--gut-hell); border-color: color-mix(in srgb, var(--erfolg) 45%, white); }
.wetter-karte { cursor: pointer; min-width: 0; }
.wetter-karte:active { transform: translateY(1px); }
.karte-symbol { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.karte-text { display: grid; gap: .22rem; min-width: 0; flex: 1 1 auto; }
.karte-text b { font-size: .95rem; line-height: 1.15; }
.karte-text small { font-size: .8rem; font-weight: 700; color: var(--tinte-weich); line-height: 1.2; }
.karte-pfeil { font-size: 1.5rem; color: var(--tinte-weich); }
.reise-heute .tz-balken { display: block; height: 8px; border-radius: 99px; background: rgba(23, 35, 59, .1); overflow: hidden; margin: 0; }
.reise-heute .tz-balken i { display: block; height: 100%; border-radius: inherit; background: var(--erfolg); }
.stimmung-knopf { justify-self: start; min-height: var(--ziel-min); font-size: .9rem; }

/* Tabs Reise / Spielwelt als Segmentschalter */
.karte-tabs { margin: .3rem .8rem .5rem; padding: 4px; gap: 4px; background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: 16px; }
.karte-tab { min-height: 46px; border: 0; border-radius: 12px; background: transparent; color: var(--tinte-weich); }
.karte-tab[aria-pressed="true"] { background: var(--primaer); color: #fff; border: 0; box-shadow: 0 4px 10px -4px rgba(79, 71, 255, .6); }

/* Aktuelle Mission */
.mission-karte { margin: 0 .8rem .7rem; padding: .8rem; border-radius: var(--radius-g); background: var(--flaeche); border: 1.5px solid var(--linie); box-shadow: var(--schatten-weich); display: grid; gap: .5rem; }
.mission-kopf { display: flex; align-items: center; gap: .6rem; }
.mission-welt { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; font-size: 1.9rem; border-radius: 16px; background: var(--land-hell, var(--primaer-hell)); }
.mission-ort { display: grid; min-width: 0; flex: 1 1 auto; }
.mission-ort b { font-family: var(--font-titel); font-size: 1.25rem; line-height: 1.1; }
.mission-ort small { font-size: .8rem; font-weight: 700; color: var(--tinte-weich); }
.mission-kopf .reise-knopf { flex: 0 0 auto; }
.mission-balken { display: block; height: 8px; border-radius: 99px; background: var(--flaeche-2); overflow: hidden; }
.mission-balken i { display: block; height: 100%; background: var(--erfolg); border-radius: inherit; }
.mission-zahl { margin: -.2rem 0 0; font-size: .78rem; font-weight: 700; color: var(--tinte-weich); }
.mission-inhalt { position: relative; padding: .7rem .8rem .6rem; border-radius: var(--radius-m); background: var(--sonne-hell); border: 1.5px solid color-mix(in srgb, var(--sonne) 60%, white); }
.mission-label { display: inline-block; margin-bottom: .2rem; padding: .1rem .55rem; border-radius: 999px; background: var(--sonne); color: var(--tinte); font-size: .75rem; font-weight: 800; letter-spacing: .02em; }
.mission-inhalt h3 { margin: .15rem 0 .2rem; font-size: 1.2rem; line-height: 1.2; }
.mission-inhalt p { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--tinte); }
.mission-knoepfe { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.mission-knoepfe .sprecher { width: var(--ziel-min); height: var(--ziel-min); }

/* Weltübersicht: große Weltkarten (scrollen mit); die feste Leiste über der Karte bleibt kompakt */
.welt-uebersicht { display: flex; gap: .55rem; margin: 0 0 .7rem; padding: .15rem .8rem .35rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.welt-uebersicht::-webkit-scrollbar { display: none; }
.welt-uebersicht .welt-knopf.welt-karte {
  flex: 0 0 128px; display: grid; grid-template-rows: auto auto auto; align-items: start; gap: .25rem;
  min-height: 0; padding: .35rem .35rem .45rem; border-radius: var(--radius-m); text-align: left; overflow: hidden;
  border: 2px solid var(--linie); background: var(--flaeche);
}
.welt-karte .welt-bild { position: relative; display: grid; place-items: center; height: 58px; border-radius: 12px; overflow: hidden;
  background: var(--land-hell, var(--primaer-hell)) var(--welt-bild, none) center 38% / cover no-repeat; }
.welt-karte .welt-bild > span { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.welt-karte .welt-zeile { display: grid; gap: 0; min-width: 0; padding: 0 .15rem; }
.welt-uebersicht .welt-karte .welt-zeile b { font-size: .78rem; color: var(--tinte-weich); }
.welt-karte .welt-name { font-weight: 800; font-size: .92rem; line-height: 1.15; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welt-uebersicht .welt-karte .welt-fortschritt { position: static; display: block; height: 6px; margin: .1rem .15rem 0; border-radius: 99px; background: var(--flaeche-2); overflow: hidden; }
.welt-uebersicht .welt-karte .welt-fortschritt i { display: block; height: 100%; background: var(--erfolg); }
.welt-uebersicht .welt-karte small { padding: 0 .15rem; font-size: .75rem; }
.welt-uebersicht .welt-karte[aria-pressed="true"] { border-color: var(--primaer); background: var(--flaeche); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaer) 22%, transparent); }


/* Lernstand (Mathe-Wetter) als Blatt über die ganze Höhe */
.lernstand { position: fixed; inset: 0; z-index: 6000; display: flex; flex-direction: column; gap: .6rem; background: var(--papier); padding: max(.8rem, env(safe-area-inset-top)) .8rem max(.8rem, env(safe-area-inset-bottom)); }
.lernstand-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.lernstand-kopf h2 { margin: 0; font-size: 1.45rem; }
.lernstand-kopf p { margin: .2rem 0 0; font-size: .95rem; color: var(--tinte-weich); }
.lernstand-welten { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; flex: none; }
.lernstand-welten::-webkit-scrollbar { display: none; }
.lernstand-welten .reise-chip[aria-pressed="true"] { background: var(--primaer); color: #fff; }
.lernstand-inhalt { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; gap: .6rem; align-content: start; padding-bottom: 1rem; }
.lernstand-gruppe { background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: var(--radius-m); padding: .3rem .7rem .5rem; }
.lernstand-gruppe summary { display: flex; align-items: center; gap: .5rem; min-height: 48px; font-weight: 800; font-size: 1.05rem; cursor: pointer; list-style: none; }
.lernstand-gruppe summary::-webkit-details-marker { display: none; }
.lernstand-gruppe summary span { font-size: 1.5rem; }
.lernstand-gruppe summary small { margin-left: auto; min-width: 2em; text-align: center; padding: .1rem .5rem; border-radius: 999px; background: var(--flaeche-2); font-size: .85rem; }
.gruppe-sonne { border-left: 6px solid var(--sonne); }
.gruppe-wolke { border-left: 6px solid #9fb4d8; }
.gruppe-regen { border-left: 6px solid #6f8fc8; }
.lernstand-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lernstand-etappe { width: 100%; display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .35rem .6rem; font: inherit; text-align: left; color: var(--tinte); background: var(--flaeche-2); border: 0; border-radius: 12px; cursor: pointer; }
.lernstand-wetter { font-size: 1.4rem; }
.lernstand-name { display: grid; flex: 1 1 auto; min-width: 0; }
.lernstand-name small { font-size: .8rem; color: var(--tinte-weich); font-weight: 700; }
.lernstand-leer, .lernstand-noch { margin: .2rem .2rem 0; color: var(--tinte-weich); font-weight: 700; }
.lernstand-meldung { margin: 0; min-height: 1.2em; font-weight: 700; color: var(--tinte-weich); }

/* ═══ Tablet hochkant ═══════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .start-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; padding: 1rem 1rem .4rem; gap: .8rem 1rem; }
  .start-hero .karte-begleiter .willi-box { width: 96px; height: 110px; flex-basis: 96px; }
  .start-hero .willi-bubble { font-size: 1.1rem; }
  .reise-heute { grid-template-columns: 1fr; }
  .stimmung-knopf { grid-column: 1 / -1; }
  .karte-tabs { margin-inline: 1rem; }
  .mission-karte { margin-inline: 1rem; padding: 1rem; grid-template-columns: 1fr; }
  .mission-inhalt h3 { font-size: 1.35rem; }
  .welt-uebersicht .welt-knopf.welt-karte { flex-basis: 150px; }
  .welt-karte .welt-bild { height: 70px; }
}

/* ═══ Tablet quer ════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (orientation: landscape) {
  .reise-inhalt { max-width: 1100px; }
  .start-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reise-heute { grid-template-columns: 1fr 1fr; }
  .mission-karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
  .mission-kopf, .mission-balken, .mission-zahl { grid-column: 1; }
  .mission-inhalt { grid-column: 2; grid-row: 1 / span 3; }
}

/* ═══ Korrekturen nach der Sichtprüfung des Prototyps (V2) ═══════════════════ */
/* Tagesziel und Mathe-Wetter: Symbol links, Text rechts, kein Umbruch in vier Zeilen */
.reise-heute .tagesziel-karte, .wetter-karte { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: .35rem; text-align: left; min-width: 0; }
.karte-kopf { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.karte-kopf b { font-size: 1rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte-kopf .karte-pfeil { margin-left: auto; font-size: 1.4rem; line-height: 1; }
.karte-symbol { font-size: 1.35rem; }
.reise-heute .tagesziel-karte small, .wetter-karte small { font-size: .82rem; font-weight: 700; color: var(--tinte-weich); line-height: 1.2; }
/* Weltkarten: farbige Kachel mit Symbol statt Bildausschnitt (ruhiger, auch ohne Ladezeit) */
.welt-karte .welt-bild { background: color-mix(in srgb, var(--land-farbe, var(--primaer)) 16%, white); }
.welt-karte .welt-bild > span { font-size: 2rem; filter: none; }

/* ═══ Lernen: ruhig, Kopf mit „Reise“, Ort und Etappe ═════════════════════════ */
#screen-lernen .kopf .lern-zurueck { flex: none; display: inline-flex; align-items: center; gap: .15rem; min-height: var(--ziel-min); min-width: var(--ziel-min); padding: 0 .85rem 0 .6rem; border-radius: 999px; font-weight: 800; font-size: .95rem; }
#screen-lernen .kopf .lern-zurueck span { font-size: 1.4rem; line-height: 1; margin-top: -.1em; }
.lern-titel-block { display: grid; flex: 1 1 auto; min-width: 0; gap: 0; }
.lern-ort { font-size: .75rem; font-weight: 700; color: var(--tinte-weich); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lern-ort:empty { display: none; }
/* Während der Aufgabe keine Punkte im Kopf (Belohnung kommt danach) */
#screen-lernen .kopf .funken-anzeige { display: none; }
#screen-lernen .kopf .sprecher, #screen-lernen .kopf .btn-rund { min-width: var(--ziel-min); min-height: var(--ziel-min); width: var(--ziel-min); height: var(--ziel-min); }
#screen-lernen .kopf { background: var(--flaeche); border-bottom: 1.5px solid var(--linie); }

/* Gestufte Fehlerhilfe: ruhige, klare Karte; Rot nur als Rand und Hinweisfarbe */
#screen-lernen .feedback-leiste.hilfe { display: flex; align-items: center; gap: .5rem; min-height: var(--ziel-min); padding: .45rem .75rem; border-radius: 14px; font-size: 1rem; line-height: 1.35;
  background: var(--fehler-hell); color: var(--fehler-tief); border: 1.5px solid color-mix(in srgb, var(--fehler) 35%, white); }
#screen-lernen .feedback-leiste.hilfe b { color: var(--fehler-tief); }
.hilfe-zeichen { font-size: 1.3rem; }
#screen-lernen .entdeckung.hilfe-karte { background: var(--sonne-hell); border: 2px solid color-mix(in srgb, var(--sonne-tief) 55%, white); }
#screen-lernen .entdeckung.hilfe-karte .e-icon::before { content: ""; }

/* Fingergröße überall mindestens 44 px, auch auf kleinen Handys */
#screen-lernen .pad button, #screen-lernen .pad #btnFertig { min-height: var(--ziel-min); }
#screen-lernen .aktionen .btn, #screen-lernen .paar-feld, #screen-lernen .zahl-chip { min-height: var(--ziel-min); }
#screen-lernen .wahl { min-height: 52px; }

/* Ergebnis: Kompetenz zuerst, Lernnachweis, Belohnung danach */
#etappeOverlay h2 { margin: .2rem 0 0; }
#etappeOverlay .kompetenz-satz { margin: .3rem 0 0; font-size: 1.05rem; font-weight: 700; color: var(--tinte-weich); }
#etappeOverlay .etappe-fertig-name { margin: .1rem 0 .6rem; font-size: 1.35rem; font-weight: 800; color: var(--tinte); }
.lernnachweise { list-style: none; margin: 0 0 .7rem; padding: .6rem .8rem; display: grid; gap: .35rem; text-align: left; background: var(--gut-hell); border-radius: 16px; font-size: .95rem; }
.lernnachweise:empty { display: none; }
.lernnachweise li span { color: var(--gut); font-weight: 900; margin-right: .2rem; }
.reise-belohnung { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 .8rem; }
.reise-belohnung .overlay-pokal { font-size: 1.8rem; }
.reise-belohnung .overlay-sterne { margin: 0; font-size: 1.4rem; }
.reise-belohnung .overlay-sticker-text { margin: 0; font-size: .9rem; }
#etappeOverlay .etappe-fertig-weiter, #etappeOverlay .etappe-fertig-anschauen { min-height: 52px; width: 100%; }

/* ═══ Lernen auf dem Tablet hochkant: Aufgabe oben, Antwort unten (Umbruch statt Vergrößern) ═══ */
@media (min-width: 681px) and (orientation: portrait) {
  #screen-lernen.aktiv { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  #screen-lernen .kopf { flex: none; position: static; }
  #screen-lernen .inhalt.lern-layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; max-width: none; width: 100%; padding: 0; gap: 0; }
  #screen-lernen .lern-aufgabe { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .9rem;
    width: 100%; max-width: 860px; margin: 0 auto; padding: 1rem max(1.2rem, 4vw); }
  #screen-lernen .lern-aufgabe > * { flex: none; }
  #screen-lernen .antwort-bereich { flex: none; position: static; top: auto; width: 100%; max-width: 860px; margin: 0 auto; max-height: 48vh; max-height: 48dvh; overflow-y: auto;
    border-radius: 26px 26px 0 0; border-width: 2px 2px 0; padding: .8rem max(1.2rem, 4vw) max(.9rem, env(safe-area-inset-bottom)); }
  #screen-lernen .pad, #screen-lernen .wahl-bereich, #screen-lernen .antwort-anzeige { width: 100%; max-width: 620px; margin-inline: auto; }
  #screen-lernen .frage-zeile { font-size: clamp(2.1rem, 5vw, 3.1rem); }
  #screen-lernen .buehne .vis { max-height: 340px; }
  #screen-lernen .willi-bubble { font-size: 1.15rem; }
}
/* ═══ Lernen auf dem Tablet quer: Aufgabe und Antwort nebeneinander ═══ */
@media (min-width: 900px) and (min-height: 561px) and (orientation: landscape) {
  #screen-lernen .inhalt.lern-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 38%); max-width: 1200px; }
  #screen-lernen .antwort-bereich { top: 76px; }
  #screen-lernen .frage-zeile { font-size: clamp(2.1rem, 3.4vw, 3rem); }
  #screen-lernen .buehne .vis { max-height: 320px; }
}

/* „Weiter auf der Reise“: zentriert ohne transform, damit die kurze Wipp-Animation sie nicht verschiebt */
#btnFokus.btn-gross, #btnFokus.btn-gross:hover { left: 0; right: 0; margin-inline: auto; transform: none; }
#btnFokus.btn-gross { min-height: 60px; width: min(calc(100% - 32px), 460px); }
/* Kartentitel dürfen umbrechen statt abgeschnitten zu werden (lange Texte, große Schrift) */
.karte-kopf b { white-space: normal; overflow: visible; font-size: .95rem; }
#screen-lernen .lern-titel-block .titel { display: block; font-size: 1rem; line-height: 1.25; }
#screen-lernen .lern-titel-block .titel::before { display: inline; width: auto; height: auto; background: none; border-radius: 0; font-size: 1.05rem; margin-right: .3rem; vertical-align: 0; }

/* Kopfzeile der Reise: auf sehr schmalen Handys umbrechen statt Knöpfe abzuschneiden */
#screen-karte .kopf { flex-wrap: wrap; row-gap: .3rem; }
#screen-karte .kopf-knoepfe { flex-wrap: wrap; justify-content: flex-end; }

/* 4.17.1 Flüssiges Scrollen: feste Leiste und Köpfe ohne Weichzeichner (auf iPad/iPhone sehr teuer über der gemalten Karte) */
.reise-leiste { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--papier); }
.kopf { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--flaeche); }
.welt-uebersicht .welt-knopf.welt-karte { color: var(--tinte); cursor: pointer; font: inherit; }
/* Leuchtring der aktuellen Etappe: Ring auf eigener Ebene (transform/opacity) statt Schatten-Animation,
   die bei jedem Bild die gemalte Karte neu zeichnen ließ */
.spiel-pfad .etappe.fokus .etappe-kreis { animation: none; position: relative; }
.spiel-pfad .etappe.fokus .etappe-kreis::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 6px solid rgba(255, 200, 61, .5);
  pointer-events: none; will-change: transform, opacity; animation: fokus-ring 2.4s ease-in-out infinite; }
@keyframes fokus-ring { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.16); opacity: .3; } }
.du-bist-hier { will-change: transform; }
body.ruhig .spiel-pfad .etappe.fokus .etappe-kreis::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .spiel-pfad .etappe.fokus .etappe-kreis::after { animation: none; } }

/* ═══ 4.17.4 Euli mit acht Zustandsbildern (quadratisch, gleicher Ausschnitt) ═══ */
.willi { width: 100%; height: 100%; aspect-ratio: auto; background: url("/assets/euli/zustaende/euli-ruhig.webp") center bottom / contain no-repeat; transition: background-image .15s; }
.willi.spricht { animation: euli-spricht .9s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes euli-spricht { 0%, 100% { transform: scale(1); } 50% { transform: translateY(-1.5px) scale(1.02, .99); } }
.willi.hopser { animation: hopser .7s var(--kurve) 2; }
@media (prefers-reduced-motion: reduce) { .willi.spricht, .willi.hopser { animation: none; } }
body.ruhig .willi.spricht { animation: none; }
/* Boxen quadratisch: die Bilder haben Rand für ausgebreitete Flügel */
.start-hero .karte-begleiter .willi-box { width: 88px; height: 88px; flex: 0 0 88px; }
#screen-lernen .begleiter .willi-box { width: var(--euli-h); height: var(--euli-h); flex: 0 0 var(--euli-h); }
#screen-lernen { --euli-h: 80px; }
.begleiter .willi-box { width: 100px; height: 100px; }
@media (max-width: 680px) { #screen-lernen { --euli-h: 64px; } }
@media (max-width: 680px) and (max-height: 620px) { #screen-lernen { --euli-h: 56px; } }
@media (min-width: 600px) { .start-hero .karte-begleiter .willi-box { width: 120px; height: 120px; flex-basis: 120px; } }
@media (min-width: 681px) and (min-height: 561px) { #screen-lernen { --euli-h: 100px; } }
/* Euli auf der Karte und in kleinen Hinweisen */
.du-bist-hier, .euli-mini, .w3d-punkt.hier::after { background: url("/assets/euli/zustaende/euli-ruhig.webp") center bottom / contain no-repeat; }
.du-bist-hier { width: 66px; height: 66px; top: -54px; right: -28px; }
.euli-mini { width: 26px; height: 26px; }
@media (max-width: 600px) { .du-bist-hier { width: 56px; height: 56px; top: -46px; right: -22px; } }

/* ═══ 4.17.4 Symbole aus dem Icon-Paket ═══ */
.symbol { width: 1.5em; height: 1.5em; object-fit: contain; vertical-align: middle; flex: none; }
.welt-karte .welt-bild .symbol { width: 50px; height: 50px; }
@media (min-width: 600px) { .welt-karte .welt-bild .symbol { width: 60px; height: 60px; } }
.chip-symbol .symbol { width: 28px; height: 28px; }
.reise-leiste .welt-knopf .chip-symbol { line-height: 0; }
.mission-welt .symbol { width: 42px; height: 42px; }
.mission-label .symbol { width: 1.35em; height: 1.35em; margin: -.2em .1em -.15em -.2em; }
.mission-knoepfe .reise-knopf .symbol, .reise-icon .symbol { width: 26px; height: 26px; }
.land-kopf .land-icon .symbol { width: 46px; height: 46px; }
.uebersicht-icon .symbol { width: 40px; height: 40px; }
.karte-symbol .symbol { width: 30px; height: 30px; }
.karte-symbol { line-height: 0; }
.wetter-zahlen { display: inline-flex; align-items: center; gap: .15rem .3rem; flex-wrap: wrap; }
.wetter-zahlen .symbol { width: 20px; height: 20px; }
.lernstand-wetter .symbol, .lernstand-gruppe summary .symbol { width: 32px; height: 32px; }
.stimmung-knopf .symbol { width: 28px; height: 28px; }
.wetter-wahl button .symbol { width: 72px; height: 72px; }
.etappe-icon .symbol { width: 70%; height: 70%; }
.w3d-punkt-bild .symbol { width: 80%; height: 80%; }

/* ═══ 4.18 Fehlerkarte (gestufte Hilfe) ═══════════════════════════════════════ */
.fehlerkarte { display: grid; gap: .45rem; padding: .8rem .9rem; border-radius: var(--radius-m); background: var(--fehler-hell); border: 2px solid color-mix(in srgb, var(--fehler) 40%, white); }
.fehlerkarte[hidden] { display: none; }
.fehlerkarte-kopf { display: flex; align-items: center; gap: .5rem; }
.fehlerkarte-x { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--fehler); color: #fff; font-weight: 900; font-size: .95rem; }
.fehlerkarte-kopf b { font-size: 1.1rem; color: var(--fehler-tief); }
.fehlerkarte-stufe { margin-left: auto; font-size: .78rem; font-weight: 800; color: var(--fehler-tief); background: #fff; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.fehlerkarte-text { margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--tinte); }
.fehlerkarte-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.fehlerkarte-knoepfe .btn { flex: 1 1 140px; min-height: 48px; }
.fehlerkarte.stufe-2 { background: #fff7e6; border-color: color-mix(in srgb, var(--sonne-tief) 45%, white); }
.fehlerkarte.stufe-2 .fehlerkarte-x { background: var(--sonne-tief); }
.fehlerkarte.stufe-2 .fehlerkarte-kopf b, .fehlerkarte.stufe-2 .fehlerkarte-stufe { color: #8a5a00; }

/* ═══ 4.18 Geführte Übung: Schritte 1, 2, 3 ═══════════════════════════════════ */
.fuehrung { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fuehrung[hidden] { display: none; }
.fuehrung-bild { background: #fff; border: 1.5px solid var(--linie); border-radius: var(--radius-m); padding: .4rem .5rem; }
.fuehrung-schritt { display: flex; gap: .65rem; align-items: flex-start; background: #fff; border: 1.5px solid var(--linie); border-radius: var(--radius-m); padding: .7rem .8rem; }
.fuehrung-schritt.aktuell { border-color: var(--primaer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaer) 18%, transparent); }
.fuehrung-schritt.spaeter { opacity: .55; }
.fuehrung-schritt.fertig { background: var(--gut-hell); border-color: color-mix(in srgb, var(--erfolg) 40%, white); }
.fuehrung-nr { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--primaer); color: #fff; font-weight: 900; }
.fuehrung-schritt.fertig .fuehrung-nr { background: var(--gut); }
.fuehrung-schritt.spaeter .fuehrung-nr { background: var(--linie-stark); }
.fuehrung-inhalt { flex: 1 1 auto; min-width: 0; display: grid; gap: .45rem; }
.fuehrung-frage { margin: .2rem 0 0; font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
.fuehrung-optionen { display: flex; gap: .5rem; flex-wrap: wrap; }
.fuehrung-option { flex: 1 1 130px; min-height: 52px; padding: .4rem .7rem; border-radius: 14px; border: 2px solid var(--linie-stark); background: #fff; color: var(--primaer-tief);
  font: inherit; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.fuehrung-option:active { transform: translateY(1px); }
.fuehrung-option.richtig { border-color: var(--gut); background: var(--gut-hell); color: var(--gut-tief); }
.fuehrung-option.falsch { border-color: color-mix(in srgb, var(--fehler) 45%, white); background: var(--fehler-hell); color: var(--fehler-tief); text-decoration: line-through; }
.fuehrung-option:disabled { cursor: default; }
.fuehrung-gut { margin: 0; color: var(--gut-tief); font-weight: 700; font-size: .95rem; }
.fuehrung-tipp { margin: 0; padding: .45rem .6rem; border-radius: 12px; background: var(--sonne-hell); font-size: .98rem; line-height: 1.4; }
#screen-lernen .pad.gesperrt button:not(.loeschen) { opacity: .45; }

/* Zahlenstrahl mit Holz-Wegweisern (SVG) */
.strahl-wegweiser { display: block; width: 100%; max-width: 640px; margin: 0 auto; height: auto; }
.ws-linie { stroke: var(--tinte-weich); stroke-width: 4; stroke-linecap: round; }
.ws-tick { stroke: var(--tinte-weich); stroke-width: 2.5; }
.ws-schild rect:first-child { fill: #c98d4b; stroke: #8a5a2b; stroke-width: 3; }
.ws-schild text { font: 800 21px var(--font, system-ui); fill: #3b230d; text-anchor: middle; }
.ws-pfosten { fill: #8a5a2b; }
.ws-punkt { fill: var(--primaer); stroke: #fff; stroke-width: 4; }
.ws-zahl { font: 800 24px var(--font, system-ui); fill: var(--primaer-tief); text-anchor: middle; }
.ws-abstand { stroke-width: 4; stroke-linecap: round; }
.ws-abstand.links { stroke: var(--gut); } .ws-abstand.rechts { stroke: var(--fehler); }
.ws-abstand-text { font: 800 22px var(--font, system-ui); text-anchor: middle; }
.ws-abstand-text.links { fill: var(--gut-tief); } .ws-abstand-text.rechts { fill: var(--fehler-tief); }

/* Entdecken: Beispiel ohne Eingabe, großer Knopf „Jetzt selbst üben“ */
#screen-lernen.entdecken .antwort-kopf .antwort-tipp { display: none; }
#screen-lernen .btn-selbst { width: 100%; min-height: 56px; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; border-radius: 18px; }
.selbst-play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sonne); color: var(--primaer-tief); font-size: .95rem; }
#screen-lernen .aktionen:has(#btnSelbstUeben:not([hidden])) { position: static; width: 100%; }
#screen-lernen.entdecken .antwort-anzeige { display: none; }

/* ═══ 4.18.1 Zusatzgrafiken: Panoramen je Welt und Holzschilder (nur Gestaltung) ═══ */
/* Startseite: Panorama der aktuellen Welt hinter Euli; unten weich in den Seitenhintergrund */
.start-hero { background: linear-gradient(180deg, rgba(248, 250, 253, 0) 72%, var(--papier) 100%), var(--kopf-bild, none) 88% 75% / cover no-repeat; border-radius: 0 0 26px 26px; padding-top: 1rem; }
@media (min-width: 600px) { .start-hero { background-position: center, 70% 70%; } }
.start-hero .willi-bubble { box-shadow: 0 6px 16px -8px rgba(23, 35, 59, .35); }
.start-hero .stimmung-knopf { background: rgba(255, 255, 255, .92); }
/* Kopf jeder Welt auf der Karte */
#karte .land .land-kopf { background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0, rgba(255, 255, 255, .82) 42%, rgba(255, 255, 255, 0) 78%), var(--kopf-bild, none) 70% 60% / cover no-repeat; min-height: 112px; }
/* Lernansicht: nur ein schmaler, heller Streifen der Welt im Kopf – die Aufgabe bleibt ruhig */
#screen-lernen .kopf { background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, .96) 55%, rgba(255, 255, 255, .6) 100%), var(--kopf-bild, none) right 62% / cover no-repeat; }

/* Holzschild (9-teilig, Nägel bleiben unverzerrt) */
.mission-label, .aufgabe-marke.holz, .spiel-pfad .gebiet-schild {
  background: none; border-style: solid; border-color: transparent; border-width: 8px 24px; border-radius: 0; box-shadow: none;
  border-image: url("/assets/zusatz/holzschild-banner.webp") 40 120 fill / 8px 24px stretch;
  color: #3b230d; font-weight: 800; padding: 0 .2rem; line-height: 1.35;
}
.mission-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.aufgabe-marke.holz { font-size: .9rem; top: -1.1rem; }
.spiel-pfad .gebiet-schild { color: #3b230d; text-shadow: none; }
.spiel-pfad .gebiet-schild small { background: rgba(255, 255, 255, .7); color: #3b230d; }

/* Tipp- und Merke-Symbole */
.fuehrung-tipp .symbol, .rechenweg-merksatz .symbol { width: 28px; height: 28px; margin-right: .15rem; }
.fehlerkarte-knoepfe .symbol { width: 24px; height: 24px; }
.ws-schild text { font: 800 24px var(--font, system-ui); fill: #3b230d; text-anchor: middle; }
.ws-zahl { font-size: 28px; }
.ws-abstand-text { font-size: 24px; }
.strahl-wegweiser { max-width: 560px; }

/* ═══ 4.19 Spaß-Paket: Euli wandert, Funkeln, großer Erfolgsmoment, Schatztruhe ═══ */
/* Euli hüpft auf der Karte zur nächsten Station */
.euli-wandert { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; }
.euli-wandert-bild { position: absolute; left: -36px; top: -82px; width: 72px; height: 72px; background: url("/assets/euli/zustaende/euli-begruessen.webp") center bottom / contain no-repeat;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); animation: euli-hops .42s ease-in-out infinite; }
@keyframes euli-hops { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }

/* Funkeln nach einer richtigen Antwort */
.funkeln { position: fixed; z-index: 7000; width: 0; height: 0; pointer-events: none; }
.funkeln i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: var(--sonne);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: funkel .8s ease-out forwards; }
.funkeln i:nth-child(3n) { background: var(--primaer); } .funkeln i:nth-child(3n+1) { background: var(--erfolg); }
@keyframes funkel { 0% { transform: translate(0, 0) scale(.3); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(90deg); opacity: 0; } }

/* Großer Erfolgsmoment: Euli groß, bunte Konfetti mit Sternen */
#etappeOverlay .begleiter .willi-box, #tagOverlay .begleiter .willi-box { width: 150px; height: 150px; }
#etappeOverlay .begleiter, #tagOverlay .begleiter { flex-direction: column; align-items: center; gap: .3rem; }
#etappeOverlay .willi-bubble, #tagOverlay .willi-bubble { max-width: 34ch; }
#etappeOverlay .willi-bubble::before, #tagOverlay .willi-bubble::before { display: none; }
.funkenregen i { background: hsl(var(--h, 45) 85% 58%); }
.funkenregen i.stern { width: 16px; height: 16px; border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.reise-belohnung .overlay-pokal .symbol { width: 52px; height: 52px; }

/* Schatztruhe beim Tagesziel: wackelt und springt auf */
.overlay-pokal.truhe { animation: none; }
.overlay-pokal.truhe .symbol { width: 110px; height: 110px; animation: truhe-auf 1.6s var(--feder, ease-out) both; filter: drop-shadow(0 0 0 rgba(255, 213, 98, 0)); }
@keyframes truhe-auf {
  0% { transform: scale(.4); } 25% { transform: scale(1) rotate(0); } 35% { transform: rotate(-8deg); } 45% { transform: rotate(8deg); }
  55% { transform: rotate(-5deg); } 65% { transform: rotate(0) scale(1); }
  80% { transform: scale(1.18) translateY(-8px); filter: drop-shadow(0 0 22px rgba(255, 213, 98, .95)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 14px rgba(255, 213, 98, .7)); }
}
@media (prefers-reduced-motion: reduce) { .euli-wandert-bild, .funkeln i, .overlay-pokal.truhe .symbol { animation: none; } }
body.ruhig .euli-wandert-bild, body.ruhig .overlay-pokal.truhe .symbol { animation: none; }

/* ═══ 4.20 Startseite wie im Designboard ═══════════════════════════════════════ */
/* Kulisse: Panorama der aktuellen Welt hinter dem ganzen oberen Bereich */
#screen-karte { position: relative; }
.start-kulisse { position: absolute; left: 0; right: 0; top: 0; height: clamp(600px, 82vh, 820px); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 250, 253, 0) 52%, rgba(248, 250, 253, .85) 80%, var(--papier) 97%), var(--kopf-bild, none) 90% 30% / cover no-repeat; }
#screen-karte > .kopf, #screen-karte > .inhalt { position: relative; z-index: 1; }
#screen-karte .start-hero { background: none; border-radius: 0; }

/* Kopf: transparent über dem Panorama, runde weiße Knöpfe */
#screen-karte .kopf { background: transparent; border: 0; box-shadow: none; padding-top: max(.6rem, env(safe-area-inset-top)); }
#screen-karte .kopf .ich { background: rgba(255, 255, 255, .95); border-radius: 999px; padding: .2rem .7rem .2rem .25rem; box-shadow: 0 4px 12px -6px rgba(23, 35, 59, .45); }
#screen-karte .kopf .funken-anzeige { background: var(--sonne-hell); border: 2px solid var(--sonne); border-radius: 999px; padding: .2rem .75rem; font-weight: 800; box-shadow: 0 4px 12px -6px rgba(23, 35, 59, .4); }
#screen-karte .kopf .btn-rund { background: #fff; border: 0; border-radius: 50%; box-shadow: 0 4px 12px -5px rgba(23, 35, 59, .45); }

/* Hero: Euli groß links, Sprechblase rechts, darunter das Holz-Wegschild mit Mini-Pfad */
#screen-karte .start-hero { grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "euli blase" "euli schild" "heute heute" "stimmung stimmung"; align-items: end; gap: .4rem .5rem; padding-top: .2rem; }
#screen-karte .start-hero .karte-begleiter { display: contents; }
#screen-karte .start-hero .karte-begleiter .willi-box { grid-area: euli; width: 128px; height: 150px; flex: none; align-self: end; filter: drop-shadow(0 6px 6px rgba(23, 35, 59, .25)); }
#screen-karte .start-hero .willi-bubble { grid-area: blase; align-self: start; margin: .2rem 0 0; border-radius: 22px; font-size: 1.02rem; background: #fff; }
#screen-karte .start-hero .willi-bubble::before { left: -9px; top: 26px; bottom: auto; }
#screen-karte .start-hero .reise-heute { grid-area: heute; margin-top: .3rem; }
#screen-karte .start-hero .stimmung-knopf { grid-area: stimmung; }
.welt-wegschild { grid-area: schild; justify-self: end; display: grid; justify-items: center; gap: .35rem; padding-bottom: .4rem; }
.welt-wegschild:empty { display: none; }
.holz-tafel { display: grid; justify-items: center; line-height: 1.12; color: #3b230d; padding: 0 .2rem; transform: rotate(-3deg);
  border-style: solid; border-color: transparent; border-width: 10px 30px; border-image: url("/assets/zusatz/holzschild-banner.webp") 40 120 fill / 10px 30px stretch;
  filter: drop-shadow(0 5px 4px rgba(60, 35, 10, .35)); }
.holz-tafel b { font-family: var(--font-titel); font-size: 1.15rem; }
.holz-tafel span { font-weight: 800; font-size: .95rem; }
.mini-pfad { display: inline-flex; align-items: center; }
.mini-pfad i { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .95); border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(23, 35, 59, .3); color: #fff; font-style: normal; font-weight: 900; font-size: .72rem; }
.mini-pfad i.ok { background: var(--gut); }
.mini-pfad i.jetzt { background: var(--primaer); }
.mini-pfad b { width: 10px; height: 3px; flex: none; background: rgba(255, 255, 255, .95); }
.mini-fahne { font-size: 1.15rem; margin-left: 1px; }

/* Weltkarten mit Landschaftsbild, Haken oder Schloss */
.welt-uebersicht .welt-knopf.welt-karte { flex-basis: 136px; background: #fff; box-shadow: 0 6px 14px -8px rgba(23, 35, 59, .35); }
.welt-karte .welt-bild.mit-bild { position: relative; background: var(--welt-bild) 72% 55% / cover no-repeat; height: 70px; }
.welt-karte .welt-bild { position: relative; }
.welt-marke { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-size: .78rem; box-shadow: 0 2px 6px rgba(23, 35, 59, .3); }
.welt-marke.ok { background: var(--gut); color: #fff; font-weight: 900; }
.welt-uebersicht .welt-karte.zu .welt-bild { filter: saturate(.55) brightness(1.08); }
@media (min-width: 600px) { .welt-uebersicht .welt-knopf.welt-karte { flex-basis: 160px; } .welt-karte .welt-bild.mit-bild { height: 84px; } }

/* Aktuelle Welt */
.welt-aktuell { margin: 0 .8rem 1.6rem; padding: .8rem .9rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .8rem; align-items: center;
  background: rgba(255, 255, 255, .97); border-radius: var(--radius-g); box-shadow: 0 8px 20px -12px rgba(23, 35, 59, .4); }
.welt-aktuell-bild .symbol { width: 66px; height: 66px; }
.welt-aktuell-text { display: grid; gap: .1rem; min-width: 0; }
.welt-aktuell-text small { font-size: .82rem; font-weight: 700; color: var(--tinte-weich); }
.welt-aktuell-text b { font-family: var(--font-titel); font-size: 1.45rem; line-height: 1.1; color: var(--tinte); }
.welt-aktuell .mini-pfad { margin-top: .3rem; }
.welt-aktuell .mini-pfad i { background: #fff; border-color: var(--linie-stark); box-shadow: none; }
.welt-aktuell .mini-pfad i.ok { background: var(--gut); border-color: var(--gut); }
.welt-aktuell .mini-pfad i.jetzt { background: var(--primaer); border-color: var(--primaer); }
.welt-aktuell .mini-pfad b { background: var(--linie-stark); }
.themen-knopf { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; padding: 0 1rem; border: 0; border-radius: 16px;
  background: var(--primaer-hell); color: var(--primaer-tief); font: inherit; font-weight: 800; cursor: pointer; }
.themen-knopf .symbol { width: 26px; height: 26px; }
@media (min-width: 600px) { .welt-aktuell { grid-template-columns: auto minmax(0, 1fr) auto; } .themen-knopf { grid-column: auto; } }

/* Holz-Karte „Aktuelle Mission“ */
.mission-holz { position: relative; margin: 0 .8rem 1rem; }
.mission-tab { position: absolute; top: -1.35rem; left: .5rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; color: #3b230d;
  font-family: var(--font-titel); font-size: 1.08rem; font-weight: 800; line-height: 1.3; padding: 0 .2rem;
  border-style: solid; border-color: transparent; border-width: 9px 28px; border-image: url("/assets/zusatz/holzschild-banner.webp") 40 120 fill / 9px 28px stretch;
  filter: drop-shadow(0 4px 3px rgba(60, 35, 10, .3)); }
.mission-tab .symbol { width: 28px; height: 28px; }
.mission-papier { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; padding: 1.7rem 1rem 1rem;
  border-radius: 22px; background: #fff8e8; border: 6px solid #c98d4b; box-shadow: inset 0 0 0 2px #f2d9ad, 0 10px 22px -12px rgba(60, 35, 10, .55); }
.mission-ziel .symbol { width: 50px; height: 50px; }
.mission-text h3 { margin: 0 0 .25rem; font-size: 1.25rem; line-height: 1.2; color: var(--tinte); }
.mission-text p { margin: 0; font-size: .98rem; line-height: 1.4; color: var(--tinte-weich); }
.mission-holz .mission-knoepfe { margin-top: .6rem; }
.mission-schatzkarte { display: none; }
@media (min-width: 600px) {
  .mission-papier { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mission-schatzkarte { display: block; align-self: center; }
  .mission-schatzkarte .symbol { width: 120px; height: 120px; transform: rotate(-6deg); }
}

/* Untere Leiste (Start, Lernweg, Üben, Erfolge, Euli) */
.unten-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: .3rem .4rem max(.35rem, env(safe-area-inset-bottom)); background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 22px -12px rgba(23, 35, 59, .45); }
.unten-leiste button { display: grid; justify-items: center; align-content: center; gap: .1rem; min-height: 58px; border: 0; background: none; font: inherit; font-size: .78rem; font-weight: 800; color: var(--tinte-weich); cursor: pointer; }
.unten-leiste svg { width: 28px; height: 28px; fill: currentColor; }
.unten-leiste svg .linie { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; }
.unten-leiste [aria-current] { color: var(--primaer); }
.nav-euli { display: block; width: 30px; height: 30px; background: url("/assets/euli/zustaende/euli-ruhig.webp") center / contain no-repeat; }
.unten-leiste button:focus-visible { outline: 3px solid var(--primaer); outline-offset: -3px; border-radius: 14px; }
body.uebersicht-offen .unten-leiste, body.karte-spiel .unten-leiste [data-ziel="lernweg"][aria-current] { }
body.uebersicht-offen .unten-leiste { display: none; }
@media (min-width: 900px) { .unten-leiste { left: 50%; right: auto; width: min(640px, 100%); transform: translateX(-50%); } }
/* „Weiter auf der Reise“ sitzt über der Leiste; der Inhalt bekommt unten Platz */
#btnFokus.btn-gross { bottom: calc(68px + max(.35rem, env(safe-area-inset-bottom)) + .6rem); }
#screen-karte .reise-inhalt { padding-bottom: 190px; }

@media (min-width: 600px) {
  #screen-karte .start-hero { grid-template-columns: 170px minmax(0, 1fr) auto; grid-template-areas: "euli blase schild" "euli heute heute" "stimmung stimmung stimmung"; }
  #screen-karte .start-hero .karte-begleiter .willi-box { width: 170px; height: 200px; }
  .welt-wegschild { align-self: start; }
}
.welt-uebersicht .welt-karte .welt-bild { width: 100%; justify-self: stretch; align-self: stretch; }
@media (min-width: 600px) { #screen-karte .start-hero .reise-heute { grid-template-columns: 1fr 1fr; } }

/* ═══ 4.20.1 Karte aufgeräumt: eine schmale feste Leiste, ruhiger Weltkopf ═══ */
.reise-leiste { padding: .4rem .6rem; border-bottom: 1px solid var(--linie); box-shadow: 0 6px 14px -12px rgba(23, 35, 59, .5); }
.reise-leiste .reise-zeile2 { padding-top: 0; gap: .45rem; }
.welt-auswahl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; min-height: 46px; padding: .2rem .7rem .2rem .3rem; border-radius: 999px;
  border: 2px solid var(--primaer); background: #fff; color: var(--tinte); font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; max-width: 58%; }
.welt-auswahl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welt-auswahl small { color: var(--tinte-weich); font-size: .78rem; white-space: nowrap; }
.welt-auswahl-pfeil { color: var(--primaer); font-size: .9rem; }
.welt-auswahl .chip-symbol .symbol { width: 30px; height: 30px; }
.welt-auswahl:focus-visible { outline: 3px solid var(--primaer); outline-offset: 2px; }
/* Weltkopf über der gemalten Karte: nur eine ruhige Zeile, kein zweites Panorama, keine Sticker-Platzhalter */
#karte .land .land-kopf { background: none; min-height: 0; padding: .55rem .9rem; border: 0; box-shadow: none; }
#karte .land .land-kopf .land-icon { display: none; }
#karte .land .land-kopf h2 { font-size: 1.15rem; margin: 0; display: inline; }
#karte .land .land-kopf p { margin: 0; font-size: .85rem; color: var(--tinte-weich); }
#karte .land .land-kopf .land-sticker { display: none; }
#karte .land .land-kopf .sprecher { width: 44px; height: 44px; }
@media (max-width: 420px) { .welt-auswahl small { display: none; } }

/* ═══ 4.21 Welt als Liste (Designboard „Weltkarte / Kapitelübersicht“) ═══════ */
.ansicht-schalter { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.ansicht-schalter button { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; min-width: 44px; padding: 0 .6rem; border: 0; border-radius: 999px;
  background: none; font: inherit; font-size: .8rem; font-weight: 800; color: var(--tinte-weich); cursor: pointer; }
.ansicht-schalter button .symbol { width: 22px; height: 22px; }
.ansicht-schalter button[aria-pressed="true"] { background: #fff; color: var(--primaer-tief); box-shadow: 0 2px 6px rgba(23, 35, 59, .18); }
.ansicht-schalter button:focus-visible { outline: 3px solid var(--primaer); outline-offset: 1px; }
@media (max-width: 420px) { .ansicht-schalter button { padding: 0 .55rem; gap: .15rem; font-size: .85rem; } .ansicht-schalter button .symbol { width: 20px; height: 20px; } }   /* F-11: Beschriftung „Liste“ und „Karte“ bleibt sichtbar */

#karte .land.welt-liste { padding: .7rem .8rem 1rem; }
/* Weltkopf mit Panorama und Holz-Zähler */
#karte .land.welt-liste .land-kopf.mit-bild { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem;
  min-height: 150px; padding: .8rem; border-radius: var(--radius-g); overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(15, 25, 45, .55)), var(--kopf-bild) center 60% / cover no-repeat, var(--flaeche-2);
  box-shadow: 0 10px 22px -14px rgba(23, 35, 59, .6); }
#karte .land.welt-liste .liste-titel { color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .55); min-width: 0; }
#karte .land.welt-liste .liste-titel h2 { display: block; margin: 0; font-family: var(--font-titel); font-size: 1.55rem; line-height: 1.1; color: #fff; }
#karte .land.welt-liste .liste-titel p { margin: .15rem 0 0; font-size: .9rem; font-weight: 700; color: #fff; }
#karte .land.welt-liste .land-kopf .holz-tafel { flex: none; align-self: flex-start; }
#karte .land.welt-liste .land-kopf .holz-tafel span { font-size: .78rem; }
#karte .land.welt-liste .land-kopf .sprecher { position: absolute; top: .6rem; left: .6rem; background: rgba(255, 255, 255, .92); }
/* Gebiete und Etappen-Zeilen */
.liste-gebiet { margin-top: 1rem; }
.liste-gebiet h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem .2rem; font-size: 1.02rem; color: var(--tinte); }
.liste-gebiet h3 small { margin-left: auto; padding: .1rem .55rem; border-radius: 999px; background: var(--flaeche-2); color: var(--tinte-weich); font-size: .8rem; }
.etappen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
#karte .etappe.etappe-zeile { position: static; width: 100%; display: flex; flex-direction: row; align-items: center; gap: .7rem; min-height: 60px;
  padding: .45rem .7rem .45rem .5rem; text-align: left; border-radius: var(--radius-m); border: 2px solid var(--linie); background: #fff;
  transform: none; opacity: 1; font: inherit; color: var(--tinte); cursor: pointer; box-shadow: none; }
#karte .etappe.etappe-zeile:hover { transform: none; background: #fff; }
#karte .etappe.etappe-zeile:focus-visible { outline: 3px solid var(--primaer); outline-offset: 2px; }
.zeile-nr { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primaer-hell); color: var(--primaer-tief);
  font-weight: 900; font-size: 1.05rem; }
.zeile-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.zeile-text b { font-size: 1rem; }
.zeile-text b .symbol { width: 20px; height: 20px; vertical-align: -4px; }
.zeile-text small { font-size: .8rem; font-weight: 700; color: var(--tinte-weich); }
.zeile-zustand { flex: none; min-width: 28px; text-align: center; font-size: 1.15rem; color: var(--primaer); }
.zeile-ok { display: none; }
#karte .etappe-zeile.ok { border-color: color-mix(in srgb, var(--gut) 35%, white); background: color-mix(in srgb, var(--gut) 7%, white); }
#karte .etappe-zeile.ok .zeile-nr { background: var(--gut); color: #fff; }
#karte .etappe-zeile.fokus { border-color: var(--primaer); background: var(--primaer-hell); box-shadow: 0 8px 18px -12px var(--primaer); }
#karte .etappe-zeile.fokus .zeile-nr { background: var(--primaer); color: #fff; box-shadow: 0 0 0 4px var(--primaer-mittel); }
#karte .etappe-zeile.fokus .zeile-text small { color: var(--primaer-tief); }
#karte .etappe-zeile.gesperrt { background: var(--flaeche-2); border-color: transparent; color: var(--tinte-weich); }
#karte .etappe-zeile.gesperrt .zeile-nr { background: #e3e8f2; color: var(--tinte-weich); }
#karte .etappe-zeile.gesperrt .zeile-zustand { font-size: 1rem; opacity: .8; }
#karte .etappe-zeile.schulthema:not(.fokus) { border-color: var(--sonne); }
@media (min-width: 700px) {
  .etappen-liste { grid-template-columns: 1fr 1fr; }
  #karte .land.welt-liste .land-kopf.mit-bild { min-height: 200px; }
}

/* ═══ 4.21 Aufgabe wie im Designboard („Selbstständig üben“) ═══════════════ */
#screen-lernen .kopf .tagesziel-leiste { display: none; }
#screen-lernen.entdecken .aufgabe-fortschritt { display: none; }

/* Aufgabenkarte: Schild „Aufgabe“ oben links, Frage groß in der Mitte */
#screen-lernen .frage-kopf { position: relative; flex-wrap: wrap; padding: 2.4rem .9rem 1.1rem; border-radius: var(--radius-g); background: #fff;
  border: 0; border-left: 0; box-shadow: 0 10px 24px -16px rgba(23, 35, 59, .55), 0 0 0 1px var(--linie); }
.aufgabe-label { position: absolute; top: .7rem; left: .8rem; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .65rem .15rem .3rem;
  border-radius: 999px; background: var(--primaer-hell); color: var(--primaer-tief); font-size: .82rem; font-weight: 800; letter-spacing: .02em; }
.aufgabe-label .symbol { width: 22px; height: 22px; }
.aufgabe-marke:not([hidden]) ~ .aufgabe-label { display: none; }
#screen-lernen .frage-kopf #frageSprecher { position: absolute; top: .45rem; right: .5rem; }
#screen-lernen .frage-zeile { color: var(--tinte); }
#screen-lernen .frage-zeile .zahl-chip { background: var(--sonne-hell); border: 2px solid var(--sonne); box-shadow: 0 3px 0 var(--sonne-tief); color: var(--tinte); }
#screen-lernen .frage-zeile .zahl-chip.ergebnis { background: #fce9ac; }

/* Antwortfeld weiß mit kräftigem Rahmen, Prüfen-Knopf in der Hauptfarbe */
#screen-lernen .antwort-anzeige { background: #fff; border: 3px solid var(--primaer-mittel); border-radius: var(--radius-m); color: var(--tinte); }
#screen-lernen .antwort-anzeige:has(.ziffer) { border-color: var(--primaer); }
#screen-lernen .pad button { background: #fff; border: 1px solid var(--linie); box-shadow: 0 3px 0 var(--linie-stark); color: var(--tinte); }
#screen-lernen .pad button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--linie-stark); }
#screen-lernen .pad #btnFertig { background: var(--primaer); border-color: var(--primaer-tief); box-shadow: 0 3px 0 var(--primaer-tief); color: #fff; }
#screen-lernen .pad .loeschen { background: var(--fehler-hell); color: var(--fehler-tief); }

/* ═══ 4.22 Lernansicht mit Kulisse wie im Designboard (Bild 2) ═══════════════════ */
/* Landschaft der Welt oben, darunter warmes helles Papier; Kopf schwebt mit weißen Knöpfen darüber */
#screen-lernen { --blatt: #fdf6e3; background: var(--blatt); }
#screen-lernen.mit-kulisse { background: linear-gradient(180deg, rgba(253, 246, 227, 0) 0, rgba(253, 246, 227, 0) 150px, rgba(253, 246, 227, .85) 220px, var(--blatt) 270px),
  var(--kopf-bild) 85% -150px / max(100%, 800px) auto no-repeat, var(--blatt); }
@media (min-height: 700px) { #screen-lernen.mit-kulisse .lern-schildzeile { padding: .5rem .6rem .9rem; } }
#screen-lernen .kopf { background: none; border-bottom: 0; box-shadow: none; }
#screen-lernen .kopf .lern-zurueck, #screen-lernen .kopf .sprecher { background: #fff; border: 0; box-shadow: 0 4px 12px -4px rgba(23, 35, 59, .35); color: var(--primaer-tief); }
#screen-lernen .lern-titel-block { flex: 0 1 auto; margin-right: auto; min-width: 0; padding: .25rem .8rem .3rem .45rem; border-radius: 18px; background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 12px -6px rgba(23, 35, 59, .35); }
#screen-lernen .lern-titel-block .titel { order: 1; display: flex; align-items: center; gap: .35rem; font-size: 1.02rem; font-weight: 800; color: var(--tinte); -webkit-line-clamp: 1; }
#screen-lernen .lern-titel-block .titel .symbol { position: absolute; left: .45rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; }
#screen-lernen .lern-titel-block { position: relative; padding-left: 2.85rem; display: grid; grid-template-columns: 1fr; }
#screen-lernen .lern-titel-block .titel, #screen-lernen .lern-titel-block .lern-ort { grid-column: 1; }
#screen-lernen .lern-titel-block .lern-ort { order: 2; color: var(--tinte-weich); }
#screen-lernen .lern-titel-block .titel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Punkte und Holzschild über der Landschaft */
.lern-schildzeile { flex: none; display: grid; justify-items: center; gap: .35rem; padding: .1rem .6rem .2rem; position: relative; z-index: 2; }
#screen-lernen.entdecken .lern-schildzeile .aufgabe-fortschritt { display: none; }
.aufgabe-fortschritt { display: flex; align-items: center; gap: .55rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 12px -6px rgba(23, 35, 59, .4); font-size: .85rem; font-weight: 800; color: var(--tinte-weich); }
.aufgabe-fortschritt[hidden] { display: none; }
.af-punkte { display: inline-flex; align-items: center; }
.af-punkte i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid var(--linie-stark);
  font-style: normal; font-weight: 900; font-size: .68rem; color: #fff; }
.af-punkte i.ok { background: var(--gut); border-color: var(--gut); }
.af-punkte i.jetzt { background: var(--primaer); border-color: #fff; box-shadow: 0 0 0 2.5px var(--primaer); }
.af-punkte b { width: 7px; height: 2.5px; flex: none; background: var(--linie-stark); }
.af-punkte i.ok + b { background: var(--gut); }
.af-ziel { margin-left: .2rem; font-size: .95rem; }
.af-text { white-space: nowrap; }
.af-text b { color: var(--primaer-tief); }
.etappe-schild { display: inline-flex; align-items: center; gap: .45rem; max-width: min(100%, 520px); color: #3b230d; font-family: var(--font-titel); font-size: 1.2rem; line-height: 1.2;
  border-style: solid; border-color: transparent; border-width: 10px 30px; border-image: url("/assets/zusatz/holzschild-banner.webp") 40 120 fill / 10px 30px stretch;
  filter: drop-shadow(0 5px 5px rgba(60, 35, 10, .35)); transform: rotate(-1.5deg); padding: .05rem .2rem; }
.etappe-schild .symbol { width: 30px; height: 30px; flex: none; }
.etappe-schild span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.etappe-schild span:empty { display: none; }

/* Die Aufgabe liegt auf einem hellen Blatt mit runden Ecken; Karten darin weiß */
#screen-lernen .lern-aufgabe { background: linear-gradient(180deg, #fff9e9, var(--blatt) 160px); border-radius: 28px 28px 0 0; box-shadow: 0 -6px 18px -12px rgba(60, 35, 10, .45);
  margin-top: -.6rem; padding-top: 1.1rem; }
#screen-lernen .buehne, #screen-lernen .fuehrung > li { background: #fff; border-radius: var(--radius-m); box-shadow: 0 6px 16px -12px rgba(23, 35, 59, .5), 0 0 0 1px var(--linie); }
#screen-lernen .willi-bubble { background: #fff; }
#screen-lernen .antwort-bereich { background: #fff; }

/* Handy quer und sehr niedrige Höhen: Platz für die Aufgabe, Schild schmal */
@media (max-height: 560px) {
  .lern-schildzeile { grid-auto-flow: column; gap: .6rem; padding-bottom: .1rem; }
  .etappe-schild { font-size: .95rem; border-width: 6px 22px; }
  .etappe-schild .symbol { width: 22px; height: 22px; }
  #screen-lernen .lern-aufgabe { margin-top: 0; border-radius: 22px; }
}
@media (max-width: 380px) { .af-punkte i { width: 16px; height: 16px; font-size: .55rem; } .af-punkte b { width: 4px; } .etappe-schild { font-size: 1.05rem; } }

/* 4.22: Auf dem Handy reichte der Platz neben Welt-Knopf und Umschalter nicht für die Lernbereiche.
   Sie bekommen dort eine eigene, feste zweite Zeile (gleich hoch beim Scrollen, kein Ruckeln). */
@media (max-width: 600px) {
  .reise-leiste .reise-zeile2 { flex-wrap: wrap; row-gap: .4rem; }
  .reise-leiste .welt-auswahl { order: 1; max-width: none; flex: 0 1 auto; min-width: 0; }
  .reise-leiste .reise-werkzeuge { order: 2; margin-left: auto; }
  .reise-leiste .reise-gebiete { order: 3; flex: 1 0 100%; }
  .welt-auswahl small { display: inline; }
}

/* ═══ 4.22.1 Erfolgsfenster („Fertig für heute“, „Etappe geschafft“) passen aufs Handy und lassen sich scrollen ═══
   Vorher: mittig per Grid ohne Höhengrenze – war die Karte höher als der Bildschirm, waren Kopf und Knöpfe abgeschnitten.
   Jetzt: das Overlay scrollt selbst, die Karte wird mit margin:auto mittig gesetzt (bleibt oben erreichbar). */
.overlay { z-index: 50; display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.overlay > .overlay-karte { margin: auto; flex: none; max-width: 100%; }
.tag-knoepfe { flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px), (max-height: 760px) {
  .overlay-karte { padding: 1.3rem 1rem 1.1rem; border-radius: 28px; }
  .overlay-karte h2 { font-size: 1.7rem; margin: .2rem 0; }
  #etappeOverlay .begleiter .willi-box, #tagOverlay .begleiter .willi-box { width: 104px; height: 104px; }
  #etappeOverlay .willi-bubble, #tagOverlay .willi-bubble { font-size: .95rem; padding: .5rem .75rem; }
  .overlay-pokal.truhe .symbol { width: 76px; height: 76px; }
  .tag-zahlen { margin: .4rem 0; gap: .4rem; }
  .tag-text { margin: .3rem 0 .5rem; font-size: .95rem; }
  .tag-knoepfe .btn { flex: 1 1 calc(50% - .6rem); min-height: 48px; }
  .tag-knoepfe #tagWeiter { flex-basis: 100%; order: -1; }
}
@media (max-height: 700px) {
  #etappeOverlay .begleiter .willi-box, #tagOverlay .begleiter .willi-box { width: 84px; height: 84px; }
  .overlay-pokal.truhe .symbol { width: 60px; height: 60px; }
  .overlay-karte h2 { font-size: 1.5rem; }
}

/* ═══ 4.22.2 Nichts springt beim Eintippen ═══
   Vorher: Tippte das Kind die erste Ziffer, unterbrach die gesprochene Ziffer Eulis Hinweis; die Sprechblase ging aus,
   und auf dem Handy klappte der ganze Euli-Bereich zusammen – die Aufgabe rutschte um gut 120 px nach oben.
   Jetzt bleibt der Hinweis während der Aufgabe stehen (nach dem Sprechen etwas blasser); erst eine neue Aufgabe leert ihn.
   Außerdem ist der Platzhalter „?“ so hoch wie eine Ziffer, damit das Antwortfeld nicht wächst. */
#screen-lernen .willi-bubble:not(.sichtbar):not(:empty) { opacity: .72; transform: none; }
#screen-lernen .begleiter:not(:has(.willi-bubble.sichtbar)) { display: flex; }
#screen-lernen .begleiter:has(.willi-bubble:empty) { display: none; }
#screen-lernen .antwort-anzeige .platzhalter { padding: .05em 0; }

/* ═══ 4.25.3 Kinder-Layout auf kleinen Handys (Prüfung vom 15.10.2026: F-01, F-02, F-04, F-05, F-10, F-21 bis F-24) ═══
   Vorher: Das Antwortblatt war bis 58 % hoch, die Aufgabe lag in einem 190 bis 240 px hohen Fenster darüber;
   auf einem iPhone SE verschwand das Bild der ersten Aufgabe ganz, in „Schau mal!“ blieb kaum Platz für Frage und Bild.
   Jetzt: Blatt höchstens 44 % (beim Erklären 40 %), Aufgabenkarte ohne Schild und mit Platz für den 🔊-Knopf,
   Schild und Punkte oben kleiner. Die Regeln stehen hier am Ende, weil die Vorgaben in aufgaben-geraete.css
   sonst von den Karten-Regeln weiter oben in dieser Datei überstimmt würden. */
@media (max-width: 680px) {
  #screen-lernen .antwort-bereich { max-height: 44vh; max-height: 44dvh; }
  #screen-lernen.zeigt-rechenweg .antwort-bereich, #screen-lernen.entdecken .antwort-bereich { max-height: 40vh; max-height: 40dvh; }
  /* F-23: Der Fragetext läuft nicht unter den 🔊-Knopf */
  #screen-lernen .frage-kopf { padding-right: 3.7rem; }
  /* F-24: Beschriftungen und Chip lesbar groß */
  #screen-lernen .antwort-kopf { font-size: .95rem; min-height: 44px; }
  #screen-lernen .aktionen:not(:has(#btnWeiter:not([hidden]), #btnNochmal:not([hidden]), #btnRaetsel:not([hidden]))) .btn { min-height: 44px; font-size: 1rem; }
  /* F-22: Punkte-Pille und Holzschild laufen nie über den Rand */
  .aufgabe-fortschritt { max-width: 100%; box-sizing: border-box; flex-wrap: wrap; justify-content: center; row-gap: .15rem; }
  .etappe-schild { box-sizing: border-box; min-width: 0; max-width: calc(100% - 8px); }
  .etappe-schild span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
}
/* Hohe Handys (iPhone 12 und größer): Tasten etwas größer als das Minimum */
@media (max-width: 680px) and (min-height: 760px) {
  #screen-lernen .pad button, #screen-lernen .pad #btnFertig { min-height: 52px; }
}
/* Niedrige Handys (iPhone SE, 8): Schild, Punkte, Aufgabenkarte und Antwortfelder enger, damit das Bild der Aufgabe im Fenster bleibt */
@media (max-width: 680px) and (max-height: 720px) {
  .lern-schildzeile { gap: .2rem; padding-top: 0; padding-bottom: .1rem; }
  .aufgabe-fortschritt { padding: .2rem .6rem; font-size: .8rem; }
  .etappe-schild { font-size: 1rem; border-width: 6px 22px; padding: 0 .1rem; }
  .etappe-schild .symbol { width: 22px; height: 22px; }
  #screen-lernen .lern-aufgabe { padding-top: .8rem; }
  .aufgabe-label { display: none; }
  #screen-lernen .frage-kopf { padding-top: .55rem; padding-bottom: .55rem; min-height: 60px; }
  #screen-lernen .frage-kopf:has(.aufgabe-marke:not([hidden])) { padding-top: 1.3rem; }   /* das Holzschild („Entdecken“, „Aufwärmen“) ragt über den Rand */
  #screen-lernen .paar-feld { min-height: 48px; }
  #screen-lernen .antwort-bereich { padding-top: .3rem; }
  /* Eulis Blase hat ausgesprochen: auf kleinen Bildschirmen macht sie dem Bild Platz (vorher blieb sie 100 px hoch stehen) */
  #screen-lernen .begleiter:has(.willi-bubble:not(.sichtbar)) { display: none; }
}
@media (max-width: 680px) {
  /* F-02: Solange die Fragen der Führung offen sind, ist der Ziffernblock gesperrt – dann nimmt er auch keinen Platz weg */
  #screen-lernen .pad.gesperrt { display: none; }
  #screen-lernen.gefuehrt:has(.pad.gesperrt) .antwort-anzeige { display: none; }
  /* F-07: Hinweisstreifen sitzt direkt über dem Antwortblatt */
  .hinweis-toast.ueber-blatt { max-width: calc(100vw - 24px); font-size: 1.02rem; padding: .6rem .9rem; }
}
@media (max-width: 680px) {
  /* F-25: Fehlerkarte kompakt – eine Zeile Titel, Knöpfe nebeneinander mit höchstens zwei Zeilen Text */
  .fehlerkarte { padding: .6rem .7rem; gap: .35rem; }
  .fehlerkarte-kopf b { font-size: 1rem; }
  .fehlerkarte-stufe { display: none; }
  .fehlerkarte-text { font-size: 1rem; line-height: 1.35; }
  .fehlerkarte-knoepfe .btn { flex: 1 1 0; min-width: 0; padding: .35rem .5rem; gap: .3rem; font-size: .95rem; line-height: 1.15; }
  .fehlerkarte-knoepfe .symbol { width: 20px; height: 20px; }
}
@media (max-width: 680px) {
  /* F-01: „Jetzt selbst üben“, „Jetzt ich!“, „Weiter“ und „Rätsel“ bleiben am unteren Rand des Blatts stehen, auch wenn das Blatt scrollt */
  #screen-lernen .aktionen:has(#btnWeiter:not([hidden]), #btnNochmal:not([hidden]), #btnRaetsel:not([hidden]), #btnSelbstUeben:not([hidden])) {
    position: sticky; bottom: 0; z-index: 3; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 14px); padding-top: .8rem; margin-top: -.4rem; }
  #screen-lernen .aktionen .btn { min-width: 0; }
}

/* F-12: Die Tür („Abmelden“) liegt nicht mehr dicht neben dem Zahnrad; Abstand zwischen den Symbolen mindestens 8 px */
#screen-karte .kopf-knoepfe { gap: .5rem; }
#screen-karte .kopf-knoepfe #btnAbmelden { margin-left: .6rem; }

/* ═══ Anmeldeseite (F-17, F-36) ═══ */
.kinder { min-height: 11rem; }   /* der Platzhalter „Lade …“ ist so hoch wie die Kinderkarten: nichts springt, ein schneller Tipp trifft nie „Für Eltern“ */
.kinder > p, .kinder > .login-hinweis { grid-column: 1 / -1; }
.kinder > .login-hinweis { max-width: none; margin: 0; align-self: start; }
#screen-login.ohne-freigabe .kinder { min-height: 0; }
#screen-login.ohne-freigabe .login-titel p { display: none; }
/* Niedrige Handys: Die Profilbilder stehen ohne Scrollen im Bild (vorher schoben Text und Symbole sie unter den Rand) */
@media (max-width: 680px) and (max-height: 760px) {
  #screen-login .hero-text > p, #screen-login .hero-welten { display: none; }
  #screen-login .reise-hero { margin-bottom: .6rem; }
}

/* F-28: Auf niedrigen Handys deckt „Weiter auf der Reise“ weniger von der Startseite ab */
@media (max-width: 680px) and (max-height: 720px) {
  #btnFokus.btn-gross { padding: .35rem 1rem .35rem .6rem; min-height: 60px; }
  #btnFokus .btn-gross-icon { width: 44px; height: 44px; font-size: 1.1rem; }
  #btnFokus.btn-gross b { font-size: 1.2rem; }
  #btnFokus.btn-gross small { font-size: .88rem; }
}

/* F-21: Handy quer – Schild und Punkte in einer schmalen Zeile, Aufgabenkarte ohne Schild, Eulis Blase nur beim Sprechen; das Bild bekommt den Platz */
@media (max-height: 560px) and (orientation: landscape) {
  .lern-schildzeile { padding: 0 .6rem .1rem; }
  .aufgabe-fortschritt { padding: .15rem .6rem; font-size: .8rem; }
  #screen-lernen .lern-aufgabe { padding: .35rem .5rem; margin-top: 0; }
  .aufgabe-label { display: none; }
  #screen-lernen .frage-kopf { padding: .4rem 3.7rem .4rem .7rem; min-height: 56px; }
  #screen-lernen .frage-kopf:has(.aufgabe-marke:not([hidden])) { padding-top: 1.1rem; }
  #screen-lernen .begleiter:has(.willi-bubble:not(.sichtbar)) { display: none; }
  #screen-lernen .willi-bubble { font-size: .88rem; padding: .35rem .6rem; line-height: 1.3; }
  #screen-lernen .buehne .vis { max-height: 150px; }
  #screen-lernen .pad.gesperrt, #screen-lernen.gefuehrt:has(.pad.gesperrt) .antwort-anzeige { display: none; }
}

/* F-35: Das Konfetti liegt hinter Text und Zahlen des Fensters, nicht darüber */
.overlay-karte { isolation: isolate; }
.overlay-karte > .funkenregen { z-index: -1; }

/* Das Holzschild „Entdecken“ ragt über die Aufgabenkarte: Platz zum Bild darüber, damit es Eulis Blase nicht überdeckt */
#screen-lernen .frage-kopf:has(.aufgabe-marke:not([hidden])) { margin-top: .9rem; }
@media (max-width: 680px) {
  /* Beim Entdecken gibt es nichts einzutippen: das Blatt zeigt nur „Jetzt selbst üben“ */
  #screen-lernen.entdecken .antwort-kopf, #screen-lernen.entdecken .antwort-anzeige { display: none; }
}