/* Lese-Reise – Art Direction „Bilderbuch-Wiese“: warmes Papier, Himmelblau → Wiesengrün, kräftiges Orange als Aktionsfarbe,
   runde Schrift (iPad: SF Pro Rounded via ui-rounded), weiche Schatten, große Touch-Ziele (≥ 56 px). Überschreibt app.css. */
:root{--sky:#bfe6ff;--sky2:#e9f6ff;--grass:#7cc96b;--grass2:#4fa65a;--ink:#24324a;--paper:#fffaf0;--o:#ff8a3d;--o2:#ff6b2c;--y:#ffd45c;--g:#2f8a5b;--g2:#47b97a;--b:#4a7fe0;--r:#e8603c;--rad:26px;
  --font:ui-rounded,"SF Pro Rounded","Nunito","Andika","Trebuchet MS",system-ui,sans-serif;--sh:0 6px 0 rgba(36,50,74,.12),0 14px 28px rgba(36,50,74,.08)}
html,body{font-family:var(--font);background:var(--sky2)}
#app{background:linear-gradient(180deg,var(--sky) 0,var(--sky2) 38%,#f4fbe9 70%,#e4f4d3 100%)}
#app:before{content:"";position:fixed;inset:auto 0 0 0;height:22vh;pointer-events:none;z-index:0;background:radial-gradient(120% 90% at 20% 100%,#a6dc8a 0 45%,transparent 46%),radial-gradient(110% 80% at 85% 100%,#8fd174 0 45%,transparent 46%);opacity:.7}
#app > *{position:relative;z-index:1}
.top{background:transparent;color:var(--ink);padding:calc(.6rem + env(safe-area-inset-top)) 1rem .4rem;gap:.7rem}
.top .title b{font-size:1.35rem;letter-spacing:.01em}
.top .logo{width:42px;height:42px;background:none}
.icon-btn{background:#fff;color:var(--ink);box-shadow:var(--sh);min-width:56px;min-height:56px;border-radius:18px}
.icon-btn:active{transform:translateY(3px)}
.stars{background:#fff;color:var(--ink);box-shadow:var(--sh);padding:.35rem .9rem;font-size:1.15rem;display:flex;align-items:center;gap:.35rem;transition:transform .2s}
.stars.bump{animation:bump .45s}@keyframes bump{40%{transform:scale(1.25)}}
.lvl{display:flex;align-items:center;gap:.5rem;background:#fff;border-radius:99px;padding:.25rem .8rem .25rem .3rem;box-shadow:var(--sh);font-weight:800;font-size:.95rem}
.lvl .badge{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(180deg,#ffe58a,#ffc23d);box-shadow:inset 0 -3px 0 #0001}
.lvl .lbar{width:90px;height:10px;background:#eef2f6;border-radius:9px;overflow:hidden}.lvl .lbar i{display:block;height:100%;background:linear-gradient(90deg,var(--y),var(--o));border-radius:9px;transition:width .8s cubic-bezier(.2,.9,.3,1.2)}
@media (max-width:700px){.lvl .lbar,.lvl .lname{display:none}}
.screen{animation:scrIn .35s ease-out}@keyframes scrIn{from{opacity:0;transform:translateY(14px)}}
/* Bruno */
.bruno{background:none;animation:none;position:relative}
.bruno .bsvg,.bruno .bimg{width:100%;height:100%;display:block;overflow:visible}
.bruno .bimg{position:absolute;inset:0;object-fit:contain;opacity:0;transition:opacity .2s}
.bruno.m-idle .bimg-idle,.bruno.m-happy .bimg-happy,.bruno.m-cheer .bimg-cheer,.bruno.m-think .bimg-think,.bruno.m-listen .bimg-listen,.bruno.m-oops .bimg-oops,.bruno.m-wave .bimg-wave,.bruno.m-read .bimg-read{opacity:1}
.bruno .head{transform-origin:112px 140px;animation:headBob 3.2s ease-in-out infinite}
.bruno .body{transform-origin:60px 160px;animation:wiggle 3.2s ease-in-out infinite}
.bruno .eye-open{animation:blink 4.5s infinite;transform-origin:113px 88px}
@keyframes headBob{50%{transform:translateY(-4px) rotate(-2deg)}}@keyframes wiggle{50%{transform:translateX(3px)}}@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
.bruno .eye-happy,.bruno .m-big,.bruno .m-o,.bruno .m-flat,.bruno .hand-ear,.bruno .thinkdots{display:none}
.bruno.m-happy .eye-open,.bruno.m-cheer .eye-open{display:none}.bruno.m-happy .eye-happy,.bruno.m-cheer .eye-happy{display:inline}
.bruno.m-happy .m-smile,.bruno.m-cheer .m-smile{display:none}.bruno.m-happy .m-big,.bruno.m-cheer .m-big{display:inline}
.bruno.m-happy .bsvg{animation:hop .5s ease-out 2}.bruno.m-cheer .bsvg{animation:cheer .6s ease-in-out 3}
.bruno.m-oops .m-smile{display:none}.bruno.m-oops .m-flat{display:inline}.bruno.m-oops .bsvg{animation:tilt 1s ease-in-out}
.bruno.m-think .m-smile{display:none}.bruno.m-think .m-o{display:inline}.bruno.m-think .thinkdots{display:inline;animation:dots 1.2s ease-in-out infinite}.bruno.m-think .pupils{transform:translate(4px,-5px)}
.bruno.m-listen .hand-ear{display:inline}.bruno.m-listen .bsvg{animation:lean 1.4s ease-in-out infinite}.bruno.m-listen .pupils{transform:translate(5px,0)}
.bruno.m-wave .bsvg{animation:tilt 1.2s ease-in-out 2}
.pupils{transition:transform .3s}
@keyframes hop{50%{transform:translateY(-22px)}}@keyframes cheer{25%{transform:translateY(-26px) rotate(-6deg)}75%{transform:translateY(-26px) rotate(6deg)}}
@keyframes tilt{30%{transform:rotate(-7deg)}70%{transform:rotate(5deg)}}@keyframes lean{50%{transform:rotate(4deg) translateX(4px)}}@keyframes dots{50%{opacity:.3}}
.bubble{border-radius:24px;box-shadow:var(--sh);font-size:1.25rem;font-weight:600;padding:1rem 1.3rem;animation:bubIn .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes bubIn{from{transform:scale(.85);opacity:0}}
/* Start */
#sStart{justify-content:center;background:var(--start-art,none) center bottom/cover no-repeat}
#sStart .hero{flex-direction:column}
#sStart .bubble:before{left:50%;top:-14px;border:8px solid transparent;border-bottom:14px solid #fff;transform:translateX(-50%)}
.card{border-radius:var(--rad);box-shadow:var(--sh)}
.login{background:#fffdf8}
input.code{border:3px solid #dbe8f5;background:#f8fbff;border-radius:18px}
input.code:focus{outline:none;border-color:var(--b);box-shadow:0 0 0 5px #4a7fe022}
.btn{border-radius:20px;min-height:58px;box-shadow:0 5px 0 rgba(36,50,74,.18);transition:transform .08s,box-shadow .08s;font-weight:800}
.btn.primary{background:linear-gradient(180deg,#ffa25c,var(--o2));box-shadow:0 5px 0 #c94f1c}
.btn.primary:active{box-shadow:0 1px 0 #c94f1c}
.btn.huge{font-size:1.7rem;border-radius:26px;padding:1.1rem 2.2rem}
.btn.huge.primary{animation:glow 2.4s ease-in-out infinite}@keyframes glow{50%{box-shadow:0 5px 0 #c94f1c,0 0 0 10px #ff8a3d22}}
/* Karte als Reise-Pfad */
#sMap{gap:.6rem}
.journey{position:relative;width:100%;max-width:1040px;margin:0 auto;aspect-ratio:16/10;border-radius:32px;overflow:hidden;box-shadow:var(--sh);
  background:var(--map-art,none) center/cover no-repeat,radial-gradient(circle at 15% 20%,#fff9 0 8%,transparent 9%),radial-gradient(circle at 80% 12%,#fff8 0 6%,transparent 7%),linear-gradient(180deg,#cfeeff 0,#e8f8df 45%,#b9e39d 100%)}
@media (orientation:portrait){.journey{aspect-ratio:3/4;max-width:760px}}
.journey svg.path{position:absolute;inset:0;width:100%;height:100%}
.journey .trail{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:round;stroke-dasharray:2 26;opacity:.9}
.journey .trail-done{fill:none;stroke:var(--y);stroke-width:14;stroke-linecap:round;stroke-dasharray:2 26}
.world-node{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;font:inherit;color:var(--ink);width:clamp(110px,15vw,160px)}
.world-node .isl{position:relative;width:clamp(92px,12vw,132px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(2.6rem,4.6vw,3.6rem);
  background:radial-gradient(circle at 35% 30%,#fff8 0 18%,transparent 19%),var(--wc);box-shadow:0 8px 0 rgba(0,0,0,.18),inset 0 -8px 0 rgba(0,0,0,.12);transition:transform .2s}
.world-node .isl img{width:86%;height:86%;object-fit:contain}
.world-node:active .isl{transform:scale(.94)}
.world-node .ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);transform:rotate(-90deg)}
.world-node .ring circle{fill:none;stroke-width:7}.world-node .ring .bg{stroke:#ffffffaa}.world-node .ring .fg{stroke:var(--y);stroke-linecap:round;transition:stroke-dashoffset 1s}
.world-node .nm{background:#fff;border-radius:99px;padding:.25rem .8rem;font-weight:800;font-size:.95rem;box-shadow:0 3px 0 #0001;white-space:nowrap}
.world-node .ws{font-size:.8rem;font-weight:700;color:#4a5a70}
.world-node.next .isl{animation:nodePulse 1.6s ease-in-out infinite}@keyframes nodePulse{50%{transform:scale(1.07)}}
.world-node.crown .isl:after{content:"👑";position:absolute;top:-26px;font-size:1.8rem;animation:hop 2s infinite}
.world-node[disabled]{filter:grayscale(.85);opacity:.55}
.world-node .lock{position:absolute;bottom:-4px;right:-4px;font-size:1.4rem}
.journey .bmarker{position:absolute;width:clamp(64px,8vw,92px);height:clamp(64px,8vw,92px);transform:translate(-10%,-95%);transition:left 1s cubic-bezier(.5,0,.3,1.3),top 1s cubic-bezier(.5,0,.3,1.3);pointer-events:none}
.mapbar{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.mapbar .bruno{width:86px;height:86px}
/* Übung */
.exhead .bruno.small{width:86px;height:86px}
.exbody{background:#fffdf8cc;border-radius:32px;box-shadow:var(--sh);padding:1.5rem 1rem;margin-bottom:.6rem}
.opt{border-radius:24px;border:4px solid #e3ebf5;box-shadow:0 6px 0 #dfe7f1;transition:transform .1s}
.opt:active{transform:translateY(4px);box-shadow:0 2px 0 #dfe7f1}
.opt.ok{animation:okPop .45s}.opt.no{animation:shake .4s}
@keyframes okPop{40%{transform:scale(1.12)}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.progress i{width:22px;height:22px;background:#fff;box-shadow:inset 0 0 0 3px #d9e4ef;transition:all .3s}
.progress i.done{background:var(--y);box-shadow:inset 0 0 0 3px #f0b72f}
.progress i.done:after{content:"★";display:block;text-align:center;font-size:14px;line-height:22px;color:#b5770a}
.progress i.cur{background:var(--o);box-shadow:0 0 0 5px #ff8a3d33}
.recbtn{width:130px;height:130px;background:radial-gradient(circle at 35% 30%,#ff9c7a,#e8463c);box-shadow:0 8px 0 #b8322a}
.recbtn.on{background:radial-gradient(circle at 35% 30%,#ff7a6a,#c0392b)}
.story{border-radius:28px;background:#fffef9;box-shadow:var(--sh);border:3px solid #f3ead2}
.w.st-ok{background:#d6f3e1;animation:wIn .4s backwards}@keyframes wIn{from{background:#fff}}
/* Belohnung */
.reward{position:relative;background:#fffdf8;border-radius:36px;box-shadow:var(--sh);padding:1.6rem 1rem 1.2rem;max-width:620px;margin:1.2rem auto}
.reward h1{font-size:3rem;color:var(--o2);text-shadow:0 3px 0 #ffd9c2;animation:bubIn .5s cubic-bezier(.2,.9,.3,1.4)}
.rwstars span{font-size:3.6rem;animation:starIn .6s cubic-bezier(.2,.9,.3,1.5) backwards}@keyframes starIn{from{transform:scale(0) rotate(-180deg)}}
.levelup{background:linear-gradient(180deg,#fff3c4,#ffe08a);border-radius:22px;padding:.8rem 1.2rem;font-weight:800;font-size:1.2rem;box-shadow:0 4px 0 #e9c35a;animation:okPop .6s .4s backwards}
.levelup .badge{font-size:2.4rem;display:block}
.trophies{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.trophies span{font-size:2rem;filter:drop-shadow(0 3px 0 #0001)}
/* Effekte */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:12px;height:16px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{top:105vh;transform:rotate(720deg) translateX(40px)}}
.flystar{position:fixed;z-index:60;font-size:2.4rem;transition:transform .85s cubic-bezier(.5,-.3,.6,1),opacity .85s;pointer-events:none}
.sndbtn.off{opacity:.55}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Kleine Geräte */
@media (max-width:760px){.world-node{width:96px}.world-node .nm{font-size:.8rem}.btn.huge{font-size:1.4rem}}
.story .w.model-on{background:#fff0a8;box-shadow:0 0 0 3px #ffd45c;border-radius:8px;transition:background .1s}
.bruno.m-read .pupils{transform:translate(2px,4px)}.bruno.m-read .bsvg{animation:lean 2.4s ease-in-out infinite}
[hidden]{display:none!important}
.journey{width:min(100%,1040px,calc((100vh - 215px) * 1.6));align-self:center;max-width:none}
@media (orientation:portrait){.journey{width:min(100%,760px,calc((100vh - 265px) * .75))}}
#toast{opacity:0;visibility:hidden;transition:transform .3s,opacity .3s,visibility .3s}#toast.show{opacity:1;visibility:visible}
@media (max-height:900px){.reward{margin:.4rem auto;padding:1rem}.reward .bruno.big{width:130px;height:130px}.reward h1{font-size:2.4rem}}

/* Review 2026-10-19: Handy-Kopfzeile passt in 390 px, Karte ohne Überlappung, iPad quer: Text und Frage nebeneinander */
.frage-grid{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:100%}
.frage-grid .qside{display:flex;flex-direction:column;align-items:center;gap:1rem}
@media (orientation:landscape) and (min-width:900px){
  .frage-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:1.2rem}
  .frage-grid .story{font-size:1.4rem;line-height:1.7;max-height:calc(100vh - 300px);overflow:auto;-webkit-overflow-scrolling:touch}
  .frage-grid .story.k1{font-size:1.8rem}.frage-grid .story.k2{font-size:1.6rem}
  .frage-grid .qside{position:sticky;top:0;padding-top:.4rem}
  .frage-grid .opts{flex-direction:column;align-items:stretch;width:100%}
  .frage-grid .question{text-align:center}
}
@media (max-width:500px){
  .top{gap:.4rem;padding-left:.6rem;padding-right:.6rem}
  .top .title b,.top .title .logo{display:none}
  .icon-btn{min-width:48px;min-height:48px;font-size:1.25rem;border-radius:15px}
  .stars{padding:.3rem .65rem;font-size:1rem}
  .lvl{padding:.2rem}.lvl .badge{width:36px;height:36px;font-size:1.15rem}
  .yesno{width:100%;gap:.8rem}.yesno .btn{min-width:0;flex:1;font-size:1.25rem;min-height:80px;padding:.6rem}
  .teppich{font-size:2rem}.teppich .trow{gap:.9rem;flex-wrap:wrap}
  .journey{aspect-ratio:auto;width:100%;height:max(430px,calc(100vh - 420px))}
  .world-node{width:112px;gap:.1rem}.world-node .isl{width:60px;font-size:1.9rem}.world-node .ws{display:none}
  .world-node .nm{font-size:.78rem;padding:.2rem .6rem}
  .world-node .ring{inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px)}
  .journey .bmarker{width:54px;height:54px}
  .adultnote{font-size:.8rem}
}
.adultnote{max-width:560px;margin:.6rem auto 0;text-align:center}