:root{--paper:#f4e9d3;--paper2:#ead9b8;--card:#fbf4e4;--ink:#3b2a1a;--mut:#7d6a52;--wood:#7a4a26;--wood2:#5a3519;--rust:#b5562b;--gold:#c99a2e;--olive:#6b7a3a;--ok:#4f8a3c;--bad:#b8402e;--line:#d8c39a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;color:var(--ink);font-family:"Segoe UI",Roboto,system-ui,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;background:var(--paper)}
body{background:radial-gradient(circle at 20% 10%,#fff7e6 0,transparent 45%),radial-gradient(circle at 90% 80%,#e7d2a9 0,transparent 50%),var(--paper)}
#app{position:fixed;inset:0;overflow:hidden}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 22px)}
.screen.on{display:flex;animation:in .25s ease}
.screen>*{flex-shrink:0}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1,h2,h3{margin:0;font-family:Georgia,"Palatino Linotype","Book Antiqua",serif}
button{font:inherit;border:0;cursor:pointer;color:inherit;background:none}
.serif{font-family:Georgia,"Palatino Linotype",serif}
.muted{color:var(--mut);font-size:13.5px}
.top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.top h2{flex:1;font-size:22px}
.back{width:44px;height:44px;border-radius:12px;background:var(--card);border:2px solid var(--line);font-size:21px;flex:none;color:var(--wood)}
/* Holzschild oben */
.hero{background:linear-gradient(170deg,#8a5630,var(--wood2));color:#fbefd6;border-radius:20px;padding:16px 16px 14px;position:relative;overflow:hidden;box-shadow:0 6px 0 #3d2410,0 10px 24px #3b2a1a55}
.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(178deg,transparent 0 9px,#ffffff08 9px 11px,transparent 11px 23px,#00000010 23px 24px);pointer-events:none}
.hero>*{position:relative}
.nail{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f1dcae,#8f7444);box-shadow:0 1px 1px #0006}
.logo{font-family:Georgia,"Palatino Linotype",serif;font-weight:700;font-size:27px;display:flex;align-items:center;gap:10px;letter-spacing:.2px}
.logo svg{flex:none}
.stats{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.pill{background:#00000030;border:1px solid #ffffff26;border-radius:999px;padding:5px 11px;font-weight:700;font-size:13.5px;white-space:nowrap}
.bar{height:9px;background:#00000035;border-radius:9px;margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#e8c56a);border-radius:9px;transition:width .6s}
.sub{font-size:13.5px;margin-top:10px;opacity:.92}
/* Karten */
.card{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 3px 0 #d3bd91}
.daily{margin-top:16px;display:flex;gap:14px;align-items:center;text-align:left;width:100%;position:relative}
.daily .big{font-size:46px;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#fff6df,#ecd6a6);display:flex;align-items:center;justify-content:center;flex:none;border:2px dashed var(--gold)}
.daily b{font-family:Georgia,serif;font-size:19px}
.daily small{display:block;color:var(--mut);font-size:13px;margin-top:3px;line-height:1.35}
.kicker{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--rust)}
.tag{position:absolute;right:10px;top:10px;background:var(--gold);color:#3a2a00;font-weight:800;font-size:11px;border-radius:8px;padding:3px 7px}
.tag.done{background:var(--ok);color:#fff}
.sec-t{font-family:Georgia,serif;font-size:18px;margin:18px 2px 8px;display:flex;align-items:center;gap:8px}
.sec-t:after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px)}
.kats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.kat{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 3px 0 #d3bd91;transition:transform .1s}
.kat:active,.tile:active,.lrow:active,.daily:active{transform:scale(.97)}
.kat b{font-size:13.5px}
.kat small{font-size:11.5px;color:var(--mut)}
.mini{height:5px;width:80%;background:#e2cfa8;border-radius:4px;overflow:hidden}
.mini i{display:block;height:100%;background:var(--olive)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tile{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px;text-align:left;display:flex;gap:10px;align-items:center;box-shadow:0 3px 0 #d3bd91;position:relative;transition:transform .1s}
.tile .ic{font-size:28px;flex:none}
.tile b{font-size:15px;display:block}
.tile small{color:var(--mut);font-size:12px;line-height:1.3}
.tile .tag{top:-7px;right:-4px}
/* Lektionsliste */
.lrow{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:8px;box-shadow:0 3px 0 #d3bd91}
.lrow .ic{font-size:30px;width:50px;height:50px;border-radius:12px;background:#efe0bf;display:flex;align-items:center;justify-content:center;flex:none}
.lrow b{display:block;font-size:15.5px}
.lrow small{color:var(--mut);font-size:12.5px}
.lrow .st{margin-left:auto;font-size:15px;flex:none;letter-spacing:-2px}
.khead{border-radius:18px;padding:14px;color:#fff;display:flex;gap:12px;align-items:center;margin-bottom:12px}
.khead p{margin:4px 0 0;font-size:13.5px;opacity:.95}
/* Lektion */
.lhead{display:flex;align-items:center;gap:10px}
.lhead .t{flex:1;min-width:0}
.lhead h2{font-size:20px;line-height:1.15}
.lhead small{color:var(--mut);font-size:12.5px}
.dots{display:flex;gap:6px;justify-content:center;margin:12px 0 10px}
.dots i{width:9px;height:9px;border-radius:50%;background:#dcc79d}
.dots i.on{background:var(--rust);width:22px;border-radius:6px}
.dots i.ok{background:var(--olive)}
.stage{position:relative;flex:1;min-height:360px;display:flex}
.step{flex:1;display:flex;flex-direction:column;background:var(--card);border:2px solid var(--line);border-radius:22px;box-shadow:0 4px 0 #d3bd91,0 10px 22px #3b2a1a1a;overflow:hidden;animation:pop .28s ease}
@keyframes pop{from{opacity:0;transform:translateX(24px) rotate(1deg)}to{opacity:1;transform:none}}
.illu{position:relative;flex:1;min-height:210px;overflow:hidden;border-bottom:2px solid var(--line)}
.step .body{flex:none}
.illu .em{font-size:118px!important}.illu .em.s2{font-size:98px!important}.illu .em.s3{font-size:76px!important}
.illu svg{position:absolute;inset:0;width:100%;height:100%}
.illu .em{position:absolute;left:0;right:0;top:50%;transform:translateY(-56%);text-align:center;font-size:76px;line-height:1;letter-spacing:6px;filter:drop-shadow(0 4px 0 #00000022)}
.illu .em.s2{font-size:64px}.illu .em.s3{font-size:52px}
.illu .no{position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:50%;background:var(--wood);color:#fbefd6;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:17px;box-shadow:0 2px 0 #3d2410}
.step .body{padding:16px 18px 18px}
.step h3{font-size:21px;margin-bottom:8px}
.step p{margin:0;font-size:17px;line-height:1.5}
.know{background:linear-gradient(160deg,#fff8e4,#f3e0b4);border:2px dashed var(--gold);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.know b{font-family:Georgia,serif;font-size:17px;color:var(--wood)}
.know p{margin:6px 0 0;font-size:16px;line-height:1.45}
.facts{margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.facts li{margin-bottom:4px}
.src{margin-top:10px;font-size:12.5px;color:var(--mut);border-top:1px dashed var(--line);padding-top:8px}
.nav{display:flex;gap:10px;margin-top:12px}
.btn{background:var(--rust);color:#fff;font-weight:800;font-size:17.5px;border-radius:14px;padding:14px 16px;box-shadow:0 4px 0 #7f3a1b;width:100%;margin-top:10px;font-family:Georgia,serif;letter-spacing:.2px}
.nav .btn{margin-top:0}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #7f3a1b}
.btn.sec{background:var(--card);color:var(--ink);box-shadow:0 4px 0 #cdb789;border:2px solid var(--line)}
.btn.sec:active{box-shadow:0 1px 0 #cdb789}
.btn.olive{background:var(--olive);box-shadow:0 4px 0 #46521f}
.btn[disabled]{opacity:.45}
/* Quiz */
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.prog{flex:1;height:12px;background:#e2cfa8;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--olive),#8fa04f);transition:width .4s}
.qcard{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 4px 0 #d3bd91}
.qmeta{font-size:12.5px;color:var(--mut);display:flex;gap:8px;align-items:center;margin-bottom:10px}
.qtext{font-family:Georgia,serif;font-size:21px;font-weight:700;line-height:1.3}
.answers{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.ans{background:#fffaf0;border:2px solid var(--line);border-radius:14px;padding:14px 14px;font-size:16.5px;font-weight:600;text-align:left;box-shadow:0 3px 0 #d3bd91;display:flex;gap:10px;align-items:center}
.ans .k{width:28px;height:28px;border-radius:8px;background:#efe0bf;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none;color:var(--wood)}
.ans.ok{background:#e3f0d5;border-color:var(--ok)}
.ans.ok .k{background:var(--ok);color:#fff}
.ans.bad{background:#f6dcd4;border-color:var(--bad)}
.ans.bad .k{background:var(--bad);color:#fff}
.ans.dim{opacity:.55}
.fb{margin-top:12px;font-weight:700;font-size:16px;min-height:22px;text-align:center}
.fb.ok{color:var(--ok)}.fb.bad{color:var(--bad)}
/* Ergebnis */
.res{text-align:center}
.res .stars{font-size:46px;letter-spacing:6px;margin:8px 0}
.res h2{font-size:26px}
.tool{width:220px;margin:16px auto 6px;border-radius:18px;background:linear-gradient(165deg,#fffaf0,#efdcb2);border:3px solid var(--wood);box-shadow:0 5px 0 var(--wood2),0 12px 24px #3b2a1a33;padding:16px 12px;position:relative;animation:flip .7s ease}
@keyframes flip{from{transform:rotateY(90deg) scale(.8)}to{transform:none}}
.tool .ti{font-size:62px;line-height:1.1}
.tool b{display:block;font-family:Georgia,serif;font-size:19px;margin-top:6px}
.tool small{display:block;font-size:13px;color:var(--mut);margin-top:6px;line-height:1.35}
.tool .rib{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--rust);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:7px;letter-spacing:.8px;white-space:nowrap}
/* Koffer */
.case{background:linear-gradient(170deg,#8a5630,var(--wood2));border-radius:20px;padding:12px;box-shadow:0 5px 0 #3d2410}
.case .lid{color:#fbefd6;font-family:Georgia,serif;font-size:15px;padding:2px 4px 10px;display:flex;justify-content:space-between}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{background:#f6ead0;border-radius:12px;padding:8px 4px;text-align:center;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:inset 0 2px 4px #0000002a}
.slot .ti{font-size:32px}
.slot b{font-size:11.5px;line-height:1.2}
.slot.lock{background:#5d3a1f;color:#c9a77f;box-shadow:inset 0 3px 8px #0006}
.slot.lock .ti{opacity:.5;filter:grayscale(1)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:6px 11px;font-size:13px;font-weight:700}
.chip.on{background:var(--wood);color:#fbefd6;border-color:var(--wood)}
/* Zeitstrahl */
.tl{position:relative;padding-left:30px}
.tl:before{content:"";position:absolute;left:12px;top:6px;bottom:6px;width:4px;border-radius:3px;background:linear-gradient(var(--gold),var(--rust),var(--wood))}
.era{position:relative;z-index:1;font-family:Georgia,serif;font-size:16px;font-weight:700;color:var(--wood);margin:16px 0 8px -30px;display:flex;align-items:center;gap:8px}
.era span{background:var(--wood);color:#fbefd6;border-radius:10px;padding:4px 10px;font-size:13.5px}
.tli{position:relative;display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 10px;margin-bottom:7px}
.tli:before{content:"";position:absolute;left:-24px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--card);border:3px solid var(--rust)}
.tli.done:before{background:var(--olive);border-color:var(--olive)}
.tli .y{font-size:11.5px;font-weight:800;color:var(--rust);min-width:74px;line-height:1.2}
.tli .ic{font-size:24px}
.tli b{font-size:14.5px}
/* Abzeichen */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.badge{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 6px;text-align:center}
.badge .bi{width:58px;height:58px;margin:0 auto 4px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold));border:3px solid #a57c1f;box-shadow:0 3px 0 #7c5c14}
.badge b{font-size:12.5px;display:block;line-height:1.2}
.badge small{font-size:11px;color:var(--mut);display:block;margin-top:3px;line-height:1.25}
.badge.lock .bi{background:#e5d5b3;border-color:#cdb789;box-shadow:none;filter:grayscale(1);opacity:.6}
.badge.lock b{color:var(--mut)}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:translateX(-50%);background:var(--wood2);color:#fbefd6;padding:11px 18px;border-radius:14px;font-weight:700;display:none;z-index:50;max-width:90%;text-align:center;box-shadow:0 6px 18px #0005}
#fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.conf{position:absolute;width:9px;height:13px;border-radius:2px}
.row{display:flex;align-items:center;gap:10px}
.info p{line-height:1.5;font-size:15px;margin:0 0 10px}
@media (min-width:700px){.screen{padding-left:calc(50% - 320px);padding-right:calc(50% - 320px)}}
.shot .screen.on,.shot .step,.shot .tool{animation:none}
.tli .y{width:96px;flex:none}
.tease{margin:16px auto 4px;width:200px;border:3px dashed var(--line);border-radius:18px;padding:14px 10px;text-align:center;background:#f6ead0}
.tease .ti{font-size:54px;filter:grayscale(.2)}
.tease b{display:block;font-family:Georgia,serif;font-size:17px;margin-top:4px}
.tease small{display:block;color:var(--mut);font-size:12.5px;margin-top:6px;line-height:1.35}
.qcard .illu{flex:none;height:130px;min-height:130px;border-radius:14px;border:0;margin-bottom:12px}
.qcard .illu .em{font-size:64px!important}
.illu:after{content:"";position:absolute;inset:7px;border:2px dashed #fffaf0b3;border-radius:14px;pointer-events:none}
.qcard .illu:after{inset:5px;border-radius:10px}

/* ---------- Extras: Tagesziele, Sperren, Krämerladen, Bonus-Spiel ---------- */
.goals{margin-top:12px}
.goals .gh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.goals .gh b{font-size:18px}
.goals .gs{background:#f6dcc4;color:var(--rust);font-weight:800;font-size:12.5px;border-radius:999px;padding:4px 10px;white-space:nowrap}
.goal{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px dashed var(--line)}
.goal .gi{font-size:19px;flex:none}
.goal .gt{flex:1;font-size:14px;line-height:1.3;min-width:0}
.goal .gp{display:block;height:5px;background:#e2cfa8;border-radius:4px;overflow:hidden;margin-top:4px}
.goal .gp i{display:block;height:100%;background:var(--olive)}
.goal small{color:var(--mut);font-weight:700;font-size:12.5px;flex:none}
.goal.cl .gt{color:var(--mut)}
.gc{background:var(--gold);color:#3a2a00;font-weight:900;border-radius:10px;padding:7px 10px;font-size:14px;box-shadow:0 3px 0 #8f6c1c;flex:none}
.gf{display:block;margin-top:6px;font-size:12px}
.btn.vid{font-size:15.5px;padding:11px 12px}
.lrow.lk{opacity:.78}
.lrow.lk .ic{filter:grayscale(.6)}
.lock{font-size:15px;letter-spacing:0}
.lockbox{width:100%;max-width:360px;text-align:center}
.lockbox h3{font-size:21px;margin:4px 0 6px}
.lockbox p{margin:0 0 4px;line-height:1.4}
.ware{display:flex;align-items:center;gap:11px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:8px;box-shadow:0 3px 0 #d3bd91}
.ware .wi{font-size:30px;width:48px;height:48px;border-radius:12px;background:#efe0bf;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.ware .wt{flex:1;min-width:0}.ware .wt b{display:block;font-size:15.5px}.ware .wt small{color:var(--mut);font-size:12.5px;line-height:1.3}
.ware .wb{width:auto;margin:0;padding:9px 12px;font-size:15px;flex:none}
.ware .wok{color:var(--ok);font-weight:900;flex:none}
.sw i{display:block;width:100%;height:100%;background:linear-gradient(170deg,#8a5630,#5a3519)}
.sw.th-eiche i{background:linear-gradient(170deg,#c99a64,#8d6338)}
.sw.th-nuss i{background:linear-gradient(170deg,#5b3a26,#2e1b10)}
.sw.th-tanne i{background:linear-gradient(170deg,#3f6b45,#1f3d27)}
.sw.th-alpen i{background:linear-gradient(170deg,#4b7ea8,#223f63)}
.sw.th-kupfer i{background:linear-gradient(170deg,#d07a45,#8a3f1c)}
.sw.th-nacht i{background:radial-gradient(circle at 50% 30%,#ffcf6b 0,#7a4a26 30%,#1e140c 80%)}
body.th-eiche .hero{background:linear-gradient(170deg,#c99a64,#8d6338)}
body.th-nuss .hero{background:linear-gradient(170deg,#5b3a26,#2e1b10)}
body.th-tanne .hero{background:linear-gradient(170deg,#3f6b45,#1f3d27)}
body.th-alpen .hero{background:linear-gradient(170deg,#4b7ea8,#223f63)}
body.th-kupfer .hero{background:linear-gradient(170deg,#d07a45,#8a3f1c)}
body.th-nacht .hero{background:radial-gradient(circle at 85% 10%,#ffcf6b55 0,transparent 35%),linear-gradient(170deg,#3a2a1c,#120c07)}
.zcard{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;background:var(--card);border:3px solid var(--line);border-radius:18px;padding:16px 12px;box-shadow:0 4px 0 #d3bd91}
.zcard .zi{font-size:44px}.zcard b{font-family:Georgia,serif;font-size:18px}
.zcard .zy{color:var(--rust);font-weight:800;min-height:16px}
.zcard.ok{background:#e3f0d5;border-color:var(--ok)}.zcard.bad{background:#f6dcd4;border-color:var(--bad)}
.zor{text-align:center;font-family:Georgia,serif;font-style:italic;color:var(--mut);margin:8px 0}