/* reise.css – Design-System der Lernreise
   P8 Barrierefreiheit: Andika (Leseanfänger-Schrift, eindeutige Buchstaben und Ziffern),
      Kontrast ≥ 4,5:1 für Text, Tippflächen ≥ 56 px, Fokusringe, Bewegungsreduktion.
   P5 Ruhige Oberfläche im Rechenbereich: keine Hintergrundanimation, keine Zähler, kein Timer. */

/* Farben, Schrift, Radien und Kontrastmodus: siehe tokens.css (seit Version 4.0). */
body.ruhig *, body.ruhig *::before, body.ruhig *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; font-family: var(--font); color: var(--tinte); background: var(--papier); min-height: 100vh; -webkit-tap-highlight-color: transparent; line-height: 1.4; }
button { font: inherit; color: inherit; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid var(--primaer); outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
small { font-size: .82em; color: var(--tinte-weich); }
.hinweis { color: var(--tinte-weich); text-align: center; padding: 1rem; }
[hidden] { display: none !important; }

/* ───────────────────────── Screens ───────────────────────── */
.screen { display: none; min-height: 100vh; }
.screen.aktiv { display: flex; flex-direction: column; }
.inhalt { width: min(100%, 980px); margin: 0 auto; padding: 1rem clamp(.8rem, 3vw, 2rem) 3rem; }

/* Kopfzeile */
.kopf { display: flex; align-items: center; gap: .8rem; padding: .7rem clamp(.8rem, 3vw, 2rem); background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.kopf .titel { font-weight: 700; font-size: 1.25rem; flex: 1; display: flex; align-items: center; gap: .5rem; }
.kopf .titel::before { content: attr(data-icon); font-size: 1.3rem; }
.ich { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px; background: var(--flaeche-2); font-weight: 700; }
.ich .kopf-emoji { font-size: 1.5rem; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; padding: .7rem 1.4rem; border-radius: var(--radius-klein); border: 2px solid transparent; background: var(--flaeche-2); cursor: pointer; font-weight: 700; font-size: 1.05rem; transition: transform var(--dauer) var(--kurve), background var(--dauer), box-shadow var(--dauer); box-shadow: var(--schatten-weich); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn-primaer { background: var(--primaer); color: #fff; }
.btn-primaer:hover { background: var(--primaer-tief); }
.btn-gut { background: var(--gut); color: #fff; }
.btn-rund { width: 56px; height: 56px; padding: 0; border-radius: 50%; font-size: 1.4rem; }
.btn-leise { background: transparent; box-shadow: none; }
.btn-leise:hover { background: var(--flaeche-2); }
.sprecher { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--linie); background: var(--flaeche); cursor: pointer; font-size: 1.15rem; display: inline-grid; place-items: center; }
.sprecher:hover { border-color: var(--primaer); }
.sprach-toggle.aus { opacity: .55; text-decoration: line-through; }

/* Dialoge */
dialog { border: none; border-radius: var(--radius); padding: 1.4rem; width: min(92vw, 440px); box-shadow: var(--schatten); background: var(--flaeche); color: var(--tinte); }
dialog::backdrop { background: rgba(31, 42, 55, .45); }
dialog h2 { margin-bottom: .6rem; }
.feld { display: block; margin: .8rem 0; }
.feld input, .feld select { width: 100%; min-height: 52px; font: inherit; font-size: 1.1rem; padding: .5rem .8rem; border-radius: var(--radius-klein); border: 2px solid var(--linie); background: var(--flaeche); color: var(--tinte); }
.fehler { color: var(--schau); font-weight: 700; min-height: 1.4em; }
.dialog-knoepfe { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .6rem; }

/* ───────────────────────── Login ───────────────────────── */
#screen-login .inhalt { text-align: center; padding-top: 2.5rem; }
.logo { font-size: 2.2rem; font-weight: 700; margin-bottom: .2rem; }
.logo small { display: block; font-size: 1rem; }
.kinder { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .9rem; margin: 1.6rem 0; }
.kind-karte { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.1rem .6rem; border-radius: var(--radius); border: 2px solid var(--linie); background: var(--flaeche); cursor: pointer; transition: transform var(--dauer) var(--kurve), border-color var(--dauer); box-shadow: var(--schatten-weich); }
.kind-karte:hover { transform: translateY(-3px); border-color: var(--primaer); }
.kind-emoji { font-size: 2.6rem; }
.kind-name { font-weight: 700; font-size: 1.1rem; }
.emoji-wahl { display: flex; flex-wrap: wrap; gap: .4rem; }
.emoji-wahl button { width: 52px; height: 52px; border-radius: 12px; border: 2px solid var(--linie); background: var(--flaeche); font-size: 1.5rem; cursor: pointer; }
.emoji-wahl button.aktiv { border-color: var(--primaer); background: var(--primaer-hell); }
.pin-kopf { text-align: center; }
.pin-emoji { font-size: 3rem; }
.pin-punkte { display: flex; justify-content: center; gap: .7rem; margin: .8rem 0 1rem; }
.pin-punkte span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tinte-weich); }
.pin-punkte span.voll { background: var(--primaer); border-color: var(--primaer); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pin-pad button { min-height: 60px; font-size: 1.5rem; font-weight: 700; border-radius: var(--radius-klein); border: 2px solid var(--linie); background: var(--flaeche); cursor: pointer; }
.pin-pad button:active { background: var(--primaer-hell); }

/* ───────────────────────── Start: Klasse wählen ───────────────────────── */
#screen-start .inhalt { text-align: center; }
.klasse-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.klasse-wahl button { padding: 1.4rem .8rem; border-radius: var(--radius); border: 2px solid var(--linie); background: var(--flaeche); cursor: pointer; display: flex; flex-direction: column; gap: .4rem; align-items: center; box-shadow: var(--schatten-weich); transition: transform var(--dauer) var(--kurve); }
.klasse-wahl button:hover { transform: translateY(-3px); border-color: var(--primaer); }
.klasse-wahl .k-zahl { font-size: 3rem; font-weight: 700; color: var(--primaer); }
.klasse-wahl .k-icon { font-size: 1.8rem; }

/* ───────────────────────── Begleiter Willi ───────────────────────── */
.begleiter { display: flex; align-items: flex-end; gap: .7rem; }
.begleiter .willi-box { width: 92px; height: 92px; flex: none; }
.willi { width: 100%; height: 100%; overflow: visible; }
.willi .pupille { transition: transform var(--dauer) var(--kurve); }
.willi.denkt .pupille { transform: translate(-3px, -3px); }
.willi.staunt .pupille { transform: scale(1.25); transform-origin: center; transform-box: fill-box; }
.willi.freut .willi-mund { d: path("M48,80 q12,12 24,0"); }
.willi.freut .lid, .willi.erklaert .lid { opacity: .0; }
.willi.erklaert .willi-fluegel.rechts { transform: rotate(-30deg); transform-origin: 90px 64px; }
.willi .willi-fluegel { transition: transform var(--dauer) var(--kurve); }
.willi.hopser { animation: hopser .7s var(--kurve) 2; }
@keyframes hopser { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-10px) rotate(-3deg); } 70% { transform: translateY(0) rotate(2deg); } }
.willi-bubble { position: relative; background: var(--flaeche); border: 2px solid var(--linie); border-radius: 18px; padding: .7rem 1rem; font-size: 1.08rem; max-width: 46ch; opacity: 0; transform: translateY(6px); transition: opacity var(--dauer), transform var(--dauer) var(--kurve); min-height: 3.2em; }
.willi-bubble.sichtbar { opacity: 1; transform: none; }
.willi-bubble::before { content: ""; position: absolute; left: -10px; bottom: 18px; width: 16px; height: 16px; background: var(--flaeche); border-left: 2px solid var(--linie); border-bottom: 2px solid var(--linie); transform: rotate(45deg); }

/* ───────────────────────── Reisekarte ───────────────────────── */
#screen-karte { background: linear-gradient(180deg, #e9f2fb 0%, var(--papier) 40%); }
body.kontrast #screen-karte { background: #fff; }
.wachstum { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; box-shadow: var(--schatten-weich); }
.baum-svg { width: 100%; height: auto; }
.baum-svg .boden { fill: #d8cfb8; } .baum-svg .stamm { stroke: #8a5a33; fill: none; stroke-linecap: round; } .baum-svg .ast { stroke: #8a5a33; stroke-width: 4; fill: none; stroke-linecap: round; }
.baum-svg .krone { fill: #b9dfa1; } .baum-svg .blatt { fill: #62b56a; } .baum-svg .blatt.b1 { fill: #4f9d55; } .baum-svg .blatt.b2 { fill: #86c98c; } .baum-svg .frucht { fill: #f0a030; stroke: #fff; stroke-width: 2; }
.wachstum-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.wz { background: var(--flaeche-2); border-radius: var(--radius-klein); padding: .6rem .8rem; }
.wz b { display: block; font-size: 1.6rem; }
.wz span { color: var(--tinte-weich); font-size: .9rem; }
.wachstum-aktionen { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.karte-begleiter { margin: .6rem 0 1rem; }
.land { margin: 1.4rem 0; padding: 1rem; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); border-left: 8px solid var(--land-farbe, var(--primaer)); box-shadow: var(--schatten-weich); }
.land-wiese { --land-farbe: var(--wiese); } .land-huegel { --land-farbe: var(--huegel); } .land-turm { --land-farbe: var(--turm); } .land-berg { --land-farbe: var(--berg); } .land-insel { --land-farbe: var(--insel); }
.land-kopf { display: flex; align-items: center; gap: .8rem; }
.land-kopf .land-icon { font-size: 2rem; }
.land-kopf h2 { font-size: 1.35rem; } .land-kopf p { margin: 0; color: var(--tinte-weich); }
.land-kopf .sprecher { margin-left: auto; }
.pfad { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.etappe { flex: 1 1 150px; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .4rem; border-radius: var(--radius-klein); border: 2px solid transparent; background: transparent; cursor: pointer; transition: transform var(--dauer) var(--kurve), background var(--dauer); }
.etappe:hover { background: var(--flaeche-2); transform: translateY(-2px); }
.etappe-kreis { position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche-2); border: 3px solid var(--linie); font-size: 1.8rem; }
.etappe-ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); }
.etappe-ring circle { fill: none; stroke: var(--land-farbe, var(--primaer)); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .6s var(--kurve); }
.etappe.gemeistert .etappe-kreis { background: var(--land-farbe, var(--gut)); color: #fff; border-color: transparent; }
.etappe.gesperrt { opacity: .55; }
.etappe.gesperrt .etappe-kreis { filter: grayscale(1); }
.etappe.fokus .etappe-kreis { border-color: var(--land-farbe, var(--primaer)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--land-farbe, var(--primaer)) 25%, transparent); }
.etappe.fokus .etappe-name { color: var(--primaer-tief); }
.etappe-name { font-weight: 700; font-size: .95rem; text-align: center; }

/* ───────────────────────── Lernen (ruhiger Rechenbereich) ───────────────────────── */
#screen-lernen { background: var(--papier); }
#screen-lernen .inhalt { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 900px; }
.buehne { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; box-shadow: var(--schatten-weich); display: grid; gap: .8rem; }
.buehne:empty, .buehne[hidden] { display: none; }
.vis-wrap { width: 100%; }
.vis { width: 100%; height: auto; max-height: 300px; display: block; }
.vis-strahl .vis { max-height: 160px; }
.frage-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-size: 2.2rem; font-weight: 700; padding: .4rem; }
.frage-zeile .op { color: var(--tinte-weich); padding: 0 .1em; }
.frage-text { font-size: 1.25rem; font-weight: 400; line-height: 1.5; max-width: 40ch; text-align: center; margin: 0; }
.zahl-chip { display: inline-flex; padding: .1em .35em; border-radius: 14px; border: 2px solid transparent; background: var(--flaeche); cursor: pointer; font-size: inherit; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; transition: background var(--dauer), border-color var(--dauer); box-shadow: var(--schatten-weich); }
.zahl-chip:hover { border-color: var(--primaer); }
.zahl-chip.gross { font-size: 3rem; }
.zahl-chip .ziffer { display: inline-block; padding: 0 .04em; border-radius: 8px; transition: background var(--dauer), color var(--dauer), opacity var(--dauer), transform var(--dauer); }
.ziffer.markiert { background: var(--primaer); color: #fff; transform: translateY(-2px); }
.ziffer.gedimmt { opacity: .35; }
.ergebnis-chip { display: inline-flex; min-width: 1.6em; justify-content: center; padding: .1em .35em; border-radius: 14px; border: 2px dashed var(--linie); color: var(--tinte-weich); }
.ergebnis-chip.versteckt { display: none; }
.zahl-chip.ergebnis { border-color: var(--gut); background: var(--gut-hell); }
.zahl-chip.erscheint { animation: erscheint .5s var(--kurve); }
@keyframes erscheint { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.frage-kopf { display: flex; align-items: center; gap: .6rem; justify-content: center; }

.antwort-bereich { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; box-shadow: var(--schatten-weich); display: grid; gap: .8rem; }
.antwort-anzeige { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: .3rem; font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.antwort-anzeige .platzhalter { color: var(--tinte-weich); opacity: .6; }
.antwort-anzeige .ziffer { position: relative; padding: .05em .15em; border-radius: 10px; }
.antwort-anzeige .ziffer small { position: absolute; left: 50%; bottom: -1em; transform: translateX(-50%); font-size: .3em; color: var(--tinte-weich); font-weight: 400; }
.antwort-anzeige.karten .vis { max-height: 110px; }
.stelle-E small { color: var(--a-tief); } .stelle-Z small { color: var(--b-tief); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; max-width: 360px; margin: 0 auto; }
.pad button { min-height: 62px; font-size: 1.7rem; font-weight: 700; border-radius: var(--radius-klein); border: 2px solid var(--linie); background: var(--flaeche); cursor: pointer; transition: background .12s, transform .12s; }
.pad button:active { background: var(--primaer-hell); transform: scale(.96); }
.pad .loeschen { font-size: 1.3rem; }
.wahl-bereich { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.wahl { min-width: 96px; min-height: 76px; padding: .6rem 1rem; border-radius: var(--radius-klein); border: 3px solid var(--linie); background: var(--flaeche); cursor: pointer; font-size: 1.8rem; font-weight: 700; transition: transform var(--dauer) var(--kurve), border-color var(--dauer), background var(--dauer); }
.wahl:hover { transform: translateY(-2px); border-color: var(--primaer); }
.wahl.ist-richtig { border-color: var(--gut); background: var(--gut-hell); }
.wahl.schau { border-color: var(--schau); background: var(--schau-hell); }
.mini-feld { display: grid; grid-template-columns: repeat(5, 16px) 8px repeat(5, 16px); gap: 4px; align-items: center; }
.mini-feld i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linie); background: var(--flaeche); }
.mini-feld i.voll { background: var(--a); border-color: var(--a-tief); }
.mini-feld i.luecke { grid-column: 7; }
.paar-bereich { display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: 1.8rem; font-weight: 700; }
.paar-feld { min-width: 110px; min-height: 76px; border-radius: var(--radius-klein); border: 3px dashed var(--linie); background: var(--flaeche); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-size: 1.6rem; font-weight: 700; }
.paar-feld small { font-weight: 400; }
.paar-feld.aktiv { border-style: solid; border-color: var(--primaer); background: var(--primaer-hell); }
.enaktiv-bereich { display: grid; gap: .6rem; }
.enaktiv-hinweis { text-align: center; font-size: 1.15rem; margin: 0; }
.enaktiv-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.feedback-leiste { height: 8px; border-radius: 999px; background: var(--linie); transition: background var(--dauer); }
.feedback-leiste.richtig { background: var(--gut); }
.feedback-leiste.schau { background: var(--schau); }
.entdeckung { display: flex; gap: .8rem; align-items: flex-start; background: var(--schau-hell); border: 2px solid var(--schau); border-radius: var(--radius); padding: .9rem 1rem; }
.entdeckung .e-icon { font-size: 1.8rem; }
.entdeckung-titel { font-weight: 700; color: var(--schau); margin: 0 0 .2rem; }
.entdeckung-text { margin: 0; font-size: 1.08rem; }
.funken-anzeige { position: relative; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; background: var(--flaeche-2); }
.funken-plus { position: absolute; right: 0; top: -1.2em; color: var(--gut); font-weight: 700; opacity: 0; pointer-events: none; }
.funken-plus.zeig { animation: funkenPlus 1.2s var(--kurve); }
@keyframes funkenPlus { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

/* Etappe geschafft (Feier außerhalb des Rechenbereichs erlaubt) */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(31, 42, 55, .5); }
.overlay-karte { position: relative; background: var(--flaeche); border-radius: var(--radius); padding: 2rem; width: min(92vw, 520px); text-align: center; box-shadow: var(--schatten); overflow: hidden; }
.overlay-karte h2 { font-size: 1.6rem; margin: .4rem 0; }
.funkenregen { position: absolute; inset: 0; pointer-events: none; }
.funkenregen i { position: absolute; top: -10px; width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--h, 45) 90% 55%); animation: fall 2.4s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); opacity: 0; } }

/* ───────────────────────── Einstellungen / Entdeckerbuch ───────────────────────── */
.einstellungen { display: grid; gap: .8rem; max-width: 620px; }
.einst { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: .9rem 1rem; }
.einst label { font-weight: 700; }
.einst input[type="checkbox"] { width: 28px; height: 28px; accent-color: var(--primaer); }
.einst input[type="range"] { width: 180px; accent-color: var(--primaer); }
.einst select { font: inherit; min-height: 44px; border-radius: 10px; border: 2px solid var(--linie); background: var(--flaeche); color: var(--tinte); max-width: 55%; }
.entdeckungen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.entdeckungen-liste li { display: flex; gap: .8rem; align-items: flex-start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: .8rem 1rem; }
.entdeckungen-liste li p { margin: 0 0 .2rem; font-size: 1.05rem; }
.entdeckungen-liste .sprecher { margin-left: auto; flex: none; }

/* ───────────────────────── SVG-Visualisierungen ───────────────────────── */
.blk rect { fill: var(--a); stroke: var(--a-tief); stroke-width: 1.5; }
.blk.farbe-b rect { fill: var(--b); stroke: var(--b-tief); }
.blk-linie { stroke: rgba(255,255,255,.7); stroke-width: 1; }
.blk { transition: transform .45s var(--kurve), opacity .3s; }
.blk.markiert rect { stroke: var(--tinte); stroke-width: 3; filter: drop-shadow(0 0 4px rgba(31,42,55,.35)); }
.blk.gedimmt { opacity: .35; }
.tippbar { cursor: pointer; }
.punkt { fill: var(--a); stroke: var(--a-tief); stroke-width: 2; transition: fill .25s, stroke .25s; }
.punkt.farbe-b { fill: var(--b); stroke: var(--b-tief); }
.punkt.leer { fill: var(--flaeche); stroke: var(--linie); }
.feld-rahmen { fill: none; stroke: var(--linie); stroke-width: 2.5; }
.feld-zehn { fill: none; stroke: var(--primaer); stroke-width: 3; stroke-dasharray: 8 6; }
.strahl-linie { stroke: var(--tinte); stroke-width: 3; }
.strahl-pfeil { fill: var(--tinte); }
.strahl-tick { stroke: var(--tinte-weich); stroke-width: 1.5; }
.strahl-tick.gross { stroke: var(--tinte); stroke-width: 2.5; }
.strahl-tick.mittel { stroke: var(--tinte); stroke-width: 2; }
.strahl-text { font-family: var(--font); font-size: 15px; text-anchor: middle; fill: var(--tinte-weich); font-weight: 700; }
.strahl-text.gross { fill: var(--tinte); font-size: 17px; }
.strahl-sprung { fill: none; stroke: var(--a); stroke-width: 4; stroke-linecap: round; }
.strahl-sprung.farbe-b { stroke: var(--b); }
.strahl-label { font-family: var(--font); font-size: 18px; font-weight: 700; text-anchor: middle; fill: var(--tinte); }
.strahl-punkt { fill: var(--a); stroke: #fff; stroke-width: 3; }
.strahl-punkt.farbe-b { fill: var(--b); }
.strahl-punkt.leer { fill: var(--flaeche); stroke: var(--tinte-weich); }
.strahl-punkt.wahl { fill: var(--flaeche); stroke: var(--primaer); stroke-width: 4; r: 12; cursor: pointer; }
.strahl-punkt.wahl:hover { fill: var(--primaer-hell); }
.strahl-punkt.wahl.fertig { pointer-events: none; }
.strahl-landung { font-family: var(--font); font-size: 17px; font-weight: 700; text-anchor: middle; fill: var(--tinte); }
.tg-kreis circle { fill: var(--flaeche); stroke: var(--tinte-weich); stroke-width: 3; }
.tg-kreis.tg-ganz circle { stroke: var(--tinte); stroke-width: 4; }
.tg-kreis.farbe-a circle { stroke: var(--a); } .tg-kreis.farbe-b circle { stroke: var(--b); }
.tg-kreis.offen circle { stroke-dasharray: 8 6; }
.tg-kreis.markiert circle { fill: var(--primaer-hell); }
.tg-zahl { font-family: var(--font); font-size: 34px; font-weight: 700; text-anchor: middle; fill: var(--tinte); }
.tg-linie { stroke: var(--tinte-weich); stroke-width: 3; }
.pf-gruppe { fill: none; stroke: var(--b-tief); stroke-width: 3; stroke-dasharray: 6 5; }
.swk rect { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 2.5; }
.swk.stelle-E rect { fill: #e9f1ff; } .swk.stelle-Z rect { fill: #fff2dc; } .swk.stelle-H rect { fill: #e8f7ec; } .swk.stelle-T rect { fill: #f3e9fb; }
.swk-pfeil { fill: none; stroke: var(--tinte); stroke-width: 2.5; }
.swk-zahl { font-family: var(--font); font-size: 44px; font-weight: 700; fill: var(--tinte); }
.swk { transition: transform .5s var(--kurve), opacity .3s; }
.swk.markiert rect { stroke: var(--primaer); stroke-width: 4; } .swk.gedimmt { opacity: .4; }
.mauer-reihe { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.mauer-stein { min-width: 84px; height: 60px; display: grid; place-items: center; border-radius: 10px; background: #f0d9b5; border: 2px solid #c9a97a; font-size: 1.5rem; font-weight: 700; }
.mauer-stein.offen { background: var(--flaeche); border-style: dashed; color: var(--tinte-weich); }
.mauer-stein.markiert { background: var(--primaer-hell); border-color: var(--primaer); }
.sr { display: grid; grid-template-columns: 40px repeat(var(--sr-cols), 52px); gap: 2px; justify-content: center; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-op { grid-row: 2; grid-column: 1; text-align: center; color: var(--tinte-weich); }
.sr-zeile { display: contents; }
.sr-zeile .sr-zelle { grid-column: auto; text-align: center; padding: .1em 0; border-radius: 8px; min-height: 1.4em; }
.sr-a .sr-zelle:first-child, .sr-b .sr-zelle:first-child, .sr-uebertrag .sr-zelle:first-child, .sr-ergebnis .sr-zelle:first-child { grid-column: 2; }
.sr-uebertrag .sr-zelle { font-size: .55em; color: var(--schau); border-bottom: 3px solid var(--tinte); min-height: 1.6em; }
.sr-ergebnis .sr-zelle { color: var(--gut); }
.sr-zelle.markiert { background: var(--primaer-hell); }
.malkreuz { border-collapse: separate; border-spacing: 6px; margin: 0 auto; font-size: 1.4rem; font-weight: 700; }
.malkreuz th { background: var(--flaeche-2); border-radius: 10px; padding: .5rem 1rem; }
.malkreuz td { border: 2px solid var(--linie); border-radius: 10px; padding: .5rem 1.2rem; text-align: center; min-width: 90px; }
.malkreuz td.markiert { background: var(--primaer-hell); border-color: var(--primaer); }

@media (max-width: 640px) {
  html { font-size: 16px; }
  .wachstum { grid-template-columns: 1fr; }
  .frage-zeile { font-size: 1.8rem; }
  .antwort-anzeige { font-size: 2.2rem; }
  .begleiter .willi-box { width: 72px; height: 72px; }
}

/* ───────────────────────── Freunde und Duelle ───────────────────────── */
.freunde-dialog h2 small { font-size: .7em; color: var(--tinte-weich); }
.freunde-liste { display: grid; gap: .5rem; margin: .8rem 0; max-height: 50vh; overflow: auto; }
.freund { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: var(--radius-klein); border: 2px solid var(--linie); background: var(--flaeche); cursor: pointer; font-weight: 700; font-size: 1.05rem; text-align: left; }
.freund:hover { border-color: var(--primaer); }
.freund .kind-emoji { font-size: 1.8rem; }
.freund .freund-aktion { margin-left: auto; color: var(--primaer); font-size: .95rem; }
.modus-wahl, .typ-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .4rem 0 .9rem; }
.modus-wahl button, .typ-wahl button { min-height: 60px; padding: .5rem .7rem; border-radius: var(--radius-klein); border: 2px solid var(--linie); background: var(--flaeche); cursor: pointer; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; }
.modus-wahl button small, .typ-wahl button small { font-weight: 400; color: var(--tinte-weich); }
.modus-wahl button.aktiv, .typ-wahl button.aktiv { border-color: var(--primaer); background: var(--primaer-hell); }
.eingehend-von { font-size: 1.3rem; font-weight: 700; }
.freunde-hinweis { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 30; background: var(--tinte); color: #fff; padding: .7rem 1.1rem; border-radius: 999px; box-shadow: var(--schatten); max-width: 90vw; text-align: center; margin: 0; }
#screen-duell .inhalt { display: grid; gap: 1rem; max-width: 760px; }
.duell-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--schatten-weich); }
.duell-spieler { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.duell-spieler.gegner { justify-content: flex-end; }
.duell-spieler .kind-emoji { font-size: 1.8rem; }
.duell-spieler b { font-size: 1.5rem; padding: .1rem .6rem; border-radius: 999px; background: var(--flaeche-2); }
.duell-spieler.ich b { background: var(--primaer-hell); color: var(--primaer-tief); }
.duell-vs { color: var(--tinte-weich); font-weight: 700; text-align: center; }
.duell-frage { font-size: 2.6rem; }
.duell-ergebnis { text-align: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--schatten); }
.duell-ergebnis-icon { font-size: 3.2rem; }
body[data-duelltyp="normal"] #duellZeitBox { display: none; }
@media (max-width: 520px) { .modus-wahl, .typ-wahl { grid-template-columns: 1fr; } .duell-kopf { grid-template-columns: 1fr; } .duell-spieler.gegner { justify-content: flex-start; } }

/* ───────────────────────── Siegertafel ───────────────────────── */
.siegertafel-hinweis { margin: 0 0 .6rem; color: var(--tinte-weich); }
.siegertafel { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; max-height: 55vh; overflow: auto; }
.siegertafel li { display: grid; grid-template-columns: 2.4rem auto 1fr auto; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: var(--radius-klein); background: var(--flaeche-2); font-weight: 700; }
.siegertafel li .platz { font-size: 1.3rem; text-align: center; }
.siegertafel li .kind-emoji { font-size: 1.6rem; }
.siegertafel li b { font-size: 1.15rem; white-space: nowrap; }
.siegertafel li.ich { background: var(--primaer-hell); outline: 2px solid var(--primaer); }
.siegertafel-dialog .dialog-knoepfe { justify-content: space-between; align-items: center; }

/* Illustrierte Lernwelt: klare Hierarchie, ruhige Arbeitsflächen. */
.reise-kicker { display:block; color:var(--primaer-tief); font-size:.7rem; font-weight:700; letter-spacing:.13em; line-height:1.6; margin-bottom:.65rem; }
#screen-login .inhalt { width:min(100%,1180px); padding-top:1.5rem; }
.reise-hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:1rem; text-align:left; padding:1.5rem 1rem 2rem; }
.reise-hero .logo { font-size:clamp(2rem,4.2vw,3.5rem); letter-spacing:-.055em; line-height:1.12; color:var(--primaer-tief); }
.hero-text p { max-width:38ch; color:var(--tinte-weich); line-height:1.8; margin:1.2rem 0; }
.hero-marke { display:inline-block; padding:.5rem .9rem; border:1px solid var(--linie); border-radius:30px; font-size:.8rem; background:var(--flaeche); }
.hero-bild { width:100%; height:auto; }
.login-titel { border-top:1px solid var(--linie); padding-top:1.8rem; }
.login-titel h2 { font-size:1.7rem; letter-spacing:-.03em; }
.login-titel p, .karten-titel p { color:var(--tinte-weich); }
.kinder { max-width:820px; margin:1.5rem auto; }
.kinder > .hinweis { grid-column:1 / -1; }
.kind-karte { border:1px solid var(--linie); box-shadow:0 5px 0 #e5e4d9; padding:1.25rem .6rem; }
.kind-emoji { display:grid; place-items:center; width:76px; height:76px; background:var(--primaer-hell); border-radius:26px; }
.kind-karte:nth-child(3n+2) .kind-emoji { background:#faeed8; }
.kind-karte:nth-child(3n) .kind-emoji { background:#eeebf9; }
.kopf { flex-wrap:wrap; box-shadow:0 3px 14px #243c3110; }
#screen-karte { background:linear-gradient(180deg,#e7f1e9,var(--papier) 520px); }
.wachstum { padding:1.5rem; border-radius:28px; box-shadow:0 12px 35px #274f3710; }
.wachstum h2 { margin-bottom:1rem; font-size:1.6rem; }
.wz { border:1px solid var(--linie); background:var(--papier); }
.wz b { color:var(--primaer-tief); }
.karten-titel { margin:2.2rem 0 1rem; }
.karten-titel h1 { font-size:2rem; letter-spacing:-.035em; }
.land { padding:1.4rem; border-left-width:6px; box-shadow:0 8px 24px #243c3108; }
.land-kopf .land-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:20px; background:color-mix(in srgb,var(--land-farbe) 12%,white); flex:none; }
.etappe { background:var(--papier); border:1px solid var(--linie); padding:1rem .6rem; }
.etappe.fokus { background:color-mix(in srgb,var(--land-farbe) 9%,white); border-color:var(--land-farbe); }
.etappe-kreis { background:var(--flaeche); }
#screen-lernen .inhalt { padding-top:1.5rem; gap:1.2rem; }
#screen-lernen .frage-kopf { padding:1.3rem .7rem; border-radius:24px; background:var(--flaeche); border:1px solid var(--linie); box-shadow:0 5px 0 #e5e4d9; }
.buehne { padding:1.4rem; border-radius:24px; background:linear-gradient(180deg,var(--flaeche),var(--papier)); }
.antwort-bereich { padding:1.3rem; border-radius:24px; }
.pad { width:min(100%,360px); }
.pad button { box-shadow:0 4px 0 var(--linie); }
.pad button:hover { background:var(--primaer-hell); }
.antwort-anzeige { background:var(--papier); border-radius:16px; }
.willi-bubble { line-height:1.65; box-shadow:var(--schatten-weich); }
.rechenweg { background:var(--flaeche); border:1px solid var(--linie); border-radius:24px; padding:1.3rem; }
.rechenweg h2 { font-size:1.2rem; }
.rechenweg ol { list-style:none; counter-reset:weg; padding:0; display:grid; gap:.7rem; margin:1rem 0 0; }
.rechenweg li { counter-increment:weg; display:flex; gap:.8rem; align-items:flex-start; padding:.8rem; border:2px solid transparent; border-radius:16px; background:var(--papier); line-height:1.65; }
.rechenweg li::before { content:counter(weg); display:grid; place-items:center; flex:0 0 32px; height:32px; border-radius:50%; color:white; background:var(--primaer); font-weight:700; }
.rechenweg li[aria-current] { border-color:var(--primaer); background:var(--primaer-hell); }
.schritt-text { flex:1; min-width:0; font-size:1.12rem; line-height:1.7; }
.rechenweg .sprecher { align-self:center; }
.rechenweg .sprecher:disabled { opacity:.4; cursor:default; }
.rechenweg-merksatz { border-top:1px solid var(--linie); padding-top:1rem; margin-bottom:0; line-height:1.7; }
.zeigt-rechenweg .antwort-anzeige, .zeigt-rechenweg .pad, .zeigt-rechenweg .wahl-bereich, .zeigt-rechenweg .paar-bereich, .zeigt-rechenweg .enaktiv-bereich { display:none; }
.sprecher { min-width:48px; min-height:48px; flex-shrink:0; }
body.kontrast .reise-hero, body.kontrast .buehne { background:white; }
body.kontrast .reise-kicker, body.kontrast .reise-hero .logo { color:black; }
body.kontrast .kind-karte, body.kontrast .pad button, body.kontrast #screen-lernen .frage-kopf { box-shadow:none; border:2px solid black; }
@media (max-width:640px) {
  .reise-hero { grid-template-columns:1fr; padding:.8rem 0 1.5rem; text-align:center; gap:0; }
  .hero-text p { margin:1rem auto; }
  .hero-bild { max-width:340px; margin:0 auto; }
  .reise-kicker { font-size:.65rem; letter-spacing:.09em; }
  .wachstum { padding:1rem; }
  .land { padding:1rem; }
  .land-kopf h2 { font-size:1.15rem; }
  .land-kopf .land-icon { width:48px; height:48px; border-radius:14px; }
  .frage-zeile { font-size:1.75rem; }
  .rechenweg { padding:1rem; }
}

/* Spielkarte: fünf Landschaften, ein gut erkennbarer Weg. */
#screen-karte > .inhalt { width:min(100%,1100px); }
#screen-karte { background:radial-gradient(ellipse at 10% 0,#fff7cf,transparent 45%),linear-gradient(#e6f3eb,#f8f6eb); }
#screen-karte .wachstum { grid-template-columns:140px 1fr; padding:1rem 1.4rem; background:#fffdf5; border:2px solid #e5e4ce; box-shadow:0 6px 0 #d6dfcb; }
#screen-karte .wachstum .reise-kicker { display:none; }
#screen-karte .wachstum h2 { font-size:1.25rem; margin-bottom:.6rem; }
#screen-karte .wachstum-zahlen { grid-template-columns:repeat(4,1fr); }
#screen-karte .wz { background:transparent; border:0; padding:.2rem; }
#screen-karte .wz b { font-size:1.3rem; }
#screen-karte .wz span { font-size:.75rem; }
#screen-karte .karten-titel { margin:1.8rem 0 1rem; text-align:center; }
#screen-karte .karten-titel .reise-kicker { display:none; }
.welt-wahl { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; margin-bottom:1.2rem; }
.welt-knopf { display:grid; justify-items:center; gap:.3rem; cursor:pointer; min-height:95px; border:2px solid #d8dfd3; border-radius:22px; background:#fffdf8; box-shadow:0 5px 0 #d8dfd3; padding:.7rem .2rem; transition:transform .2s,box-shadow .2s; }
.welt-knopf > span { font-size:2rem; line-height:1.2; }
.welt-knopf b { font-size:.85rem; }
.welt-knopf:hover { transform:translateY(-3px); }
.welt-knopf[aria-pressed=true] { border-color:var(--primaer); background:#e6f3df; box-shadow:0 5px 0 var(--primaer); }
.welt-knopf:active { transform:translateY(4px); box-shadow:none; }
.spiel-welt { padding:0; overflow:hidden; border:2px solid #cbd9c7; border-radius:30px; box-shadow:0 9px 0 #cbd9c7,0 22px 42px #25493612; }
.spiel-welt .land-kopf { padding:1rem 1.4rem; background:#fffdf7; border-bottom:2px solid #ffffff; }
.spiel-pfad { position:relative; height:var(--karten-hoehe); isolation:isolate; }
.spiel-landschaft { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.spiel-pfad .etappe { position:absolute; left:var(--station-x); top:var(--station-y); transform:translate(-50%,-42px); width:27%; max-width:200px; padding:0; border:0; background:transparent; gap:.55rem; }
.spiel-pfad .etappe:hover { transform:translate(-50%,-46px); background:transparent; }
.spiel-pfad .etappe-kreis { width:84px; height:84px; border:4px solid #fffdf0; background:#fffdf0; box-shadow:0 7px 0 #b9bd9d,0 10px 12px #34523c22; font-size:2rem; }
.spiel-pfad .etappe-ring { inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); }
.spiel-pfad .etappe-name { background:#fffdf4; padding:.35rem .7rem; border-radius:12px; font-size:.85rem; line-height:1.3; color:#273e33; box-shadow:0 3px 0 #0000000c; }
.spiel-pfad .etappe.fokus .etappe-kreis { background:#ffdf7a; border-color:#fff8cd; box-shadow:0 7px 0 #c69435,0 0 0 9px #fff9d177,0 13px 20px #89702126; }
.spiel-pfad .etappe.fokus .etappe-icon { animation:station-winkt 2s ease-in-out 2; }
.spiel-pfad .etappe.gemeistert .etappe-kreis { background:#387d59; border-color:#d9f0c9; box-shadow:0 7px 0 #24623e; }
.spiel-pfad .etappe.gesperrt { opacity:1; }
.spiel-pfad .etappe.gesperrt .etappe-kreis { background:#e6e9da; border-color:#f2f3e9; box-shadow:0 6px 0 #aab69d; font-size:1.5rem; }
.spiel-pfad .etappe.gesperrt .etappe-name { background:#f4f5ec; color:#53604c; }
.station-status { font-size:.7rem; font-weight:700; background:#ffdf7a; color:#5a4216; padding:.15rem .6rem; border-radius:20px; }
.station-status.geschafft { background:#e2f3d3; color:#245334; }
@keyframes station-winkt { 0%,100% { transform:rotate(0); } 30% { transform:rotate(-10deg); } 65% { transform:rotate(10deg); } }
body.kontrast #screen-karte, body.kontrast #screen-karte .wachstum { background:white; }
body.kontrast .spiel-landschaft { opacity:.2; }
body.kontrast .welt-knopf, body.kontrast .spiel-welt { border-color:black; box-shadow:none; }
body.kontrast .welt-knopf[aria-pressed=true] { outline:3px solid black; }
body.kontrast .spiel-pfad .etappe-name { color:black; background:white; border:1px solid black; }
@media(max-width:600px) {
  #screen-karte .wachstum { grid-template-columns:75px 1fr; padding:.8rem; gap:.6rem; }
  #screen-karte .wachstum-zahlen { grid-template-columns:repeat(2,1fr); }
  #screen-karte .wachstum-aktionen .btn { font-size:.9rem; padding:.5rem .7rem; }
  #screen-karte .wachstum-aktionen .sprecher { display:none; }
  .welt-wahl { gap:.4rem; }
  .welt-knopf { min-height:78px; border-radius:16px; }
  .welt-knopf > span { font-size:1.5rem; }
  .welt-knopf b { font-size:.7rem; }
  .spiel-welt { border-radius:22px; }
  .spiel-welt .land-kopf { padding:.7rem; }
  .spiel-pfad .etappe { width:31%; }
  .spiel-pfad .etappe-kreis { width:66px; height:66px; font-size:1.6rem; }
  .spiel-pfad .etappe { transform:translate(-50%,-33px); }
  .spiel-pfad .etappe:hover { transform:translate(-50%,-36px); }
  .spiel-pfad .etappe-name { font-size:.73rem; padding:.3rem .35rem; overflow-wrap:anywhere; }
  .station-status { font-size:.62rem; padding:.2rem .35rem; }
}
.feedback-leiste.richtig { display:flex; align-items:center; justify-content:center; gap:.75rem; height:auto; min-height:64px; padding:.65rem 1rem; border-radius:18px; font-size:1.25rem; font-weight:700; background:var(--gut-hell); color:var(--gut); }
.antwort-anzeige:empty { display:none; }
.erfolg-stern { display:inline-block; font-size:2rem; animation:erfolgsfreude .65s ease-out; }
@keyframes erfolgsfreude { 0% { transform:scale(.4) rotate(-25deg); } 65% { transform:scale(1.25) rotate(8deg); } 100% { transform:scale(1) rotate(0); } }
/* Persönliches Wachstumsmotiv; alle zeigen denselben Fortschritt. */
.wachstums-svg { display:block; width:100%; height:auto; }
#screen-karte .wachstum { grid-template-columns:210px 1fr; }
.wachstums-detail { color:var(--primaer-tief); font-size:.85rem; margin:0 0 .6rem; }
.motiv-wechsel { font-size:.85rem; padding:.5rem .8rem; }
#motivDialog { width:min(94vw,680px); max-height:90vh; overflow:auto; }
.motiv-auswahl { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.motiv-option { display:flex; flex-direction:column; align-items:center; gap:.4rem; border:3px solid var(--linie); border-radius:22px; padding:.7rem; background:var(--flaeche); cursor:pointer; }
.motiv-option .wachstums-svg { max-height:150px; }
.motiv-option span { font-size:.85rem; }
.motiv-option[aria-pressed=true] { border-color:var(--primaer); background:var(--primaer-hell); }
.motiv-option:hover { border-color:var(--primaer); }
@media(max-width:600px) {
  #screen-karte .wachstum { grid-template-columns:100px 1fr; }
  .motiv-option { padding:.5rem; }
  .motiv-option span { font-size:.75rem; }
  #screen-karte .wachstum h2 { font-size:1.05rem; overflow-wrap:anywhere; }
}
.feedback-leiste.schau { height:auto; min-height:56px; display:grid; place-items:center; padding:.65rem; background:var(--schau-hell); color:#754207; font-weight:700; }
/* Die große, lokal geladene Phaser-Spielwelt. */
#screen-spielwelt { background:#edf1df; }
.spielwelt-inhalt { width:min(100%,1200px); max-width:1200px; padding-top:20px; }
.spiel-rahmen { border:4px solid #fffdf3; border-radius:26px; overflow:hidden; background:#dce8bf; box-shadow:0 8px 30px #29452f20; }
.spiel-leinwand { width:100%; aspect-ratio:1000/640; overflow:hidden; }
.spiel-leinwand canvas { display:block; touch-action:none; }
.spiel-status { min-height:58px; display:grid; place-items:center; padding:12px 18px; background:#fffdf3; color:#365b40; font-weight:700; text-align:center; }
.spiel-bedienung { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:20px 0 14px; }
.spiel-ruhe[aria-pressed=true] { border-color:var(--primaer);background:var(--primaer-hell); }
.spiel-auswahl { display:flex;flex-wrap:wrap;gap:8px;justify-content:center; }
.spiel-tier { min-height:48px;padding:10px 16px;border:2px solid var(--linie);border-radius:30px;background:#fffdf4;cursor:pointer; }
.spiel-tier[aria-pressed=true] { border-color:var(--primaer);background:var(--primaer-hell);font-weight:700; }
.spiel-fortschritt { text-align:center;color:var(--tinte-weich);font-size:.9rem; }
@media(max-width:600px){.spiel-rahmen{border-width:2px;border-radius:16px}.spiel-status{font-size:.9rem}.spiel-bedienung{gap:8px}.spiel-bedienung .btn{font-size:.9rem;padding:.65rem .8rem}#screen-spielwelt .kopf .titel{font-size:1rem}.spiel-tier{padding:8px 12px;font-size:.85rem}}