@font-face{font-family:Lora;src:url(fonts/lora-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/oswald-latin.woff2) format("woff2");font-weight:200 700;font-display:swap}
:root{--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);--tab:60px;--ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--serif:Lora,Georgia,"Times New Roman",serif;--disp:Oswald,"Arial Narrow",Impact,sans-serif;--fs:19px;--side:224px;--ease:cubic-bezier(.2,.7,.2,1)}
[data-theme=dark]{--bg:#08090A;--bg2:#141517;--bg3:#1d1e21;--fg:#F4F1EB;--fg2:#a9a7a1;--fg3:#8c8a84;--line:#232427;--ac:#F4F1EB;--acfg:#08090A;--gl:#d9b878;--hl1:rgba(240,200,60,.26);--hl2:rgba(90,200,120,.24);--hl3:rgba(90,150,240,.28);--hl4:rgba(240,120,170,.26);--cur:rgba(244,241,235,.12)}
[data-theme=sepia]{--bg:#f1e8d3;--bg2:#e9dec4;--bg3:#dfd2b4;--fg:#33291a;--fg2:#6a5b41;--fg3:#98896b;--line:#d6c8a5;--ac:#33291a;--acfg:#f6eed9;--gl:#8a5a14;--hl1:rgba(230,180,20,.38);--hl2:rgba(70,160,90,.28);--hl3:rgba(60,120,210,.26);--hl4:rgba(220,90,140,.26);--cur:rgba(51,41,26,.1)}
[data-theme=light]{--bg:#F4F1EB;--bg2:#ffffff;--bg3:#e9e5dc;--fg:#101012;--fg2:#5b5953;--fg3:#97948b;--line:#ddd9cf;--ac:#101012;--acfg:#F4F1EB;--gl:#9a6b12;--hl1:rgba(250,205,40,.42);--hl2:rgba(80,190,110,.3);--hl3:rgba(70,130,230,.26);--hl4:rgba(240,110,160,.26);--cur:rgba(16,16,18,.08)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
svg{flex:none}
.tab svg,.nv svg,.ib svg,.sbar svg,.chv{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* ---- Marke ---- */
.lg{width:44px;height:74px;color:#fff}
.b1{font:500 12px var(--ui);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase}
.b2{font:700 54px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
#splash{position:fixed;inset:0;z-index:300;background:#08090A;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease .1s,visibility .6s}
#splash.out{opacity:0;visibility:hidden}
.sp{text-align:center;color:#F4F1EB;animation:rise .9s var(--ease) both;display:flex;flex-direction:column;align-items:center;gap:6px}
.sp .lg{width:46px;height:77px;margin-bottom:10px}
.sp .b2{font-size:44px}
.sp .ln{display:block;width:34px;height:2px;background:#F4F1EB;margin-top:12px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#welcome{position:fixed;inset:0;z-index:250;background:#08090A url(art/welcome.jpg) center/cover no-repeat;color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:calc(var(--st) + 70px) 24px calc(var(--sb) + 34px)}
#welcome[hidden]{display:none}
#welcome::after{content:"";position:absolute;inset:0;background:linear-gradient(#08090A99,transparent 28%,transparent 62%,#08090Aee);pointer-events:none}
#welcome>*{position:relative;z-index:2}
.wc{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;animation:rise 1s var(--ease) both}
.wc .lg{width:58px;height:97px;margin-bottom:6px}
.wc .b2{font-size:78px;text-shadow:0 2px 24px #0008}
.wb{width:100%;max-width:420px;text-align:center;animation:rise 1.2s var(--ease) .2s both}
.cta{width:100%;height:56px;border-radius:28px;background:#F4F1EB;color:#08090A;font-weight:600;font-size:16px;letter-spacing:.01em}
.wt{margin-top:18px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#cfcac0}
/* ---- Layout ---- */
#app{position:fixed;inset:0;display:flex;background:var(--bg)}
#side{display:none}
#main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
main{flex:1;position:relative;min-height:0}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:calc(var(--st) + 16px) 18px 32px;display:none;-webkit-overflow-scrolling:touch}
.view.on{display:block}
.wrap{max-width:1180px;margin:0 auto}
.tabbar{display:flex;height:calc(var(--tab) + var(--sb));padding-bottom:var(--sb);border-top:1px solid var(--line);background:var(--bg)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--fg3);font-size:10.5px;letter-spacing:.02em}
.tab svg{width:23px;height:23px}
.tab.on{color:var(--fg)}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);font-weight:600}
.h1{font:600 30px/1.15 var(--serif);margin:6px 0 4px}
.sub{color:var(--fg2);font-size:14px;line-height:1.5}
.sec{margin-top:26px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.sec-h h2{font:600 19px var(--ui);letter-spacing:-.005em}
.sec-h button{font-size:13px;color:var(--fg2)}
.sbar{display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 16px;background:var(--bg2);border:1px solid var(--line);border-radius:25px;color:var(--fg3);text-align:left;font-size:15px}
.sbar svg{width:19px;height:19px}
.sbar kbd{margin-left:auto;font:500 11px var(--ui);padding:3px 7px;border-radius:6px;background:var(--bg3);color:var(--fg2)}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--ac);color:var(--acfg);font-weight:600;font-size:14.5px}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.sm{min-height:38px;padding:0 16px;font-size:13px}
.btn svg{width:18px;height:18px;fill:currentColor}
.row{display:flex;gap:10px;align-items:center}
.chv{width:18px;height:18px;color:var(--fg3)}
/* ---- Start: Hero ---- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:290px;border-radius:22px;overflow:hidden;text-align:left;background:#111 center/cover no-repeat;color:#F4F1EB}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08090A22 10%,#08090Acc 100%)}
.hero .hi{position:relative;width:100%;padding:90px 20px 16px}
.hero .lab{font:600 12px var(--ui);letter-spacing:.04em;opacity:.85;margin-bottom:6px}
.hero q{display:block;font:500 25px/1.28 var(--serif);quotes:none}
.hero .ref{margin-top:8px;font-size:13px;opacity:.8}
.hero .ha{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff22}
.hero .ha span{display:flex;gap:18px}
.hero .ha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.hero .ha .go{font-size:13px;font-weight:600;display:flex;gap:6px;align-items:center}
.cont{display:flex;gap:14px;align-items:center;width:100%;text-align:left}
.cont .big{font:600 22px/1.2 var(--serif)}
.cont .pr{height:3px;background:var(--line);border-radius:3px;margin-top:10px;overflow:hidden}
.cont .pr i{display:block;height:100%;background:var(--fg)}
.cbtn{width:46px;height:46px;border-radius:50%;background:var(--ac);color:var(--acfg);display:flex;align-items:center;justify-content:center;flex:none}
.cbtn svg{width:20px;height:20px;fill:currentColor}
.car{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px;scroll-snap-type:x proximity}
.car::-webkit-scrollbar{display:none}
.tc{position:relative;flex:0 0 118px;height:150px;border-radius:14px;overflow:hidden;background:#111 center/cover no-repeat;text-align:left;color:#F4F1EB;scroll-snap-align:start}
.tc::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08090A00 35%,#08090Add)}
.tc b{position:absolute;left:11px;bottom:26px;font:600 14.5px var(--ui)}
.tc span{position:absolute;left:11px;bottom:10px;font-size:11px;opacity:.7}
.thl{display:flex;flex-direction:column;gap:8px}
.tr{position:relative;display:flex;align-items:center;gap:12px;height:68px;padding:0 16px;border-radius:14px;overflow:hidden;background:#111 center/cover no-repeat;text-align:left;color:#F4F1EB;width:100%}
.tr::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#08090Aee 0%,#08090A88 55%,#08090A55)}
.tr>*{position:relative}
.tr b{font:600 15.5px var(--ui);display:block}
.tr span{font-size:12px;opacity:.7}
.tr .chv{margin-left:auto;color:#F4F1EB;opacity:.8}
.plr{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);text-align:left;margin-bottom:8px}
.plr .th{width:62px;height:62px;border-radius:10px;background:#111 center/cover no-repeat;flex:none}
.plr>div:not(.th){flex:1;min-width:0}
.plr b{display:block;font:600 15.5px var(--ui)}
.plr span{font-size:12.5px;color:var(--fg2)}
.plr .chv{margin-left:auto}
.plr .pr{height:3px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden;width:100%}
.plr .pr i{display:block;height:100%;background:var(--fg)}
.plan .days{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.plan .d{font-size:13px;padding:8px 12px;border-radius:10px;background:var(--bg3);color:var(--fg)}
.plan .d.ok{background:var(--ac);color:var(--acfg)}
.ringbox{display:flex;align-items:center;gap:18px}
.ring{position:relative;width:124px;height:124px;flex:none}
.ring>svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .tr0{stroke:var(--line)}.ring .tr1{stroke:var(--fg);transition:stroke-dashoffset .8s var(--ease)}
.ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rc svg{width:20px;height:20px;fill:var(--fg);stroke:none;margin-bottom:2px}
.ring .rc b{font:600 30px/1 var(--ui)}
.ring .rc span{font-size:11px;color:var(--fg2);margin-top:2px;text-align:center}
.week{display:flex;gap:10px;align-items:center}
.week div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;color:var(--fg2)}
.week i{width:8px;height:8px;border-radius:50%;background:var(--bg3)}
.week i.on{background:var(--fg)}
.tiles{display:none}
.grp{margin-top:22px}
.grp h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);font-weight:600;margin-bottom:6px}
.bk{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 2px;border-bottom:1px solid var(--line);text-align:left}
.bk b{font:600 18px var(--serif)}
.bk span{color:var(--fg3);font-size:13px}
.bk .pc{height:2px;width:46px;background:var(--line);margin-top:6px;border-radius:2px;overflow:hidden}
.bk .pc i{display:block;height:100%;background:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.grid button{aspect-ratio:1;border-radius:12px;background:var(--bg3);font:600 16px var(--serif);display:flex;align-items:center;justify-content:center}
.grid button.dn{background:var(--ac);color:var(--acfg)}
.res{display:block;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--line)}
.res .r{font-size:12.5px;color:var(--fg2);font-weight:600;letter-spacing:.03em}
.res .t{font:400 16px/1.5 var(--serif);margin-top:3px;color:var(--fg)}
.res mark{background:var(--hl1);color:inherit;border-radius:3px;padding:0 1px}
.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:3px;margin-top:14px}
.seg button{flex:1;height:36px;border-radius:9px;font-size:13px;color:var(--fg2)}
.seg button.on{background:var(--bg3);color:var(--fg);font-weight:600}
.empty{color:var(--fg3);text-align:center;padding:40px 10px;font-size:14px;line-height:1.5}
.set{padding:16px 0;border-bottom:1px solid var(--line)}
.set .lb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);font-weight:600;margin-bottom:10px;display:block}
.set .seg{margin-top:0}
.set p{color:var(--fg2);font-size:13.5px;line-height:1.55}
.rng{width:100%;accent-color:var(--fg)}
.link{color:var(--fg);font-weight:600}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--fg2);font-size:14px;margin-bottom:6px;height:36px}
.back svg{width:18px;height:18px;transform:rotate(180deg)}
.mrow{display:flex;align-items:center;gap:14px;width:100%;padding:16px 4px;border-bottom:1px solid var(--line);text-align:left;font-size:15.5px}
.mrow svg:first-child{width:21px;height:21px;color:var(--fg2);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mrow .n{margin-left:auto;color:var(--fg3);font-size:13px}
/* ---- Leser ---- */
.ov{position:fixed;inset:0;z-index:50;background:var(--bg);display:none;flex-direction:column}
.ov.on{display:flex}
.rh{display:flex;align-items:center;gap:2px;padding:calc(var(--st) + 8px) 8px 8px;flex:none}
.rh .ttl{flex:1;text-align:center;font:600 17px var(--ui);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;gap:4px}
.rh .ttl svg{width:14px;height:14px;transform:rotate(90deg);color:var(--fg2);fill:none;stroke:currentColor;stroke-width:2}
.ib{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex:none}
.ib svg{width:22px;height:22px}
.ib.on{color:var(--fg)}
.ib[disabled]{opacity:.3}
.rcols{flex:1;min-height:0;display:flex}
.rnav,.rctx{display:none}
.rb{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 24px 40px}
.rtxt{max-width:680px;margin:0 auto}
.rmeta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);margin-bottom:18px;font-weight:600}
.txt{font:400 var(--fs)/1.8 var(--serif);hyphens:auto;-webkit-hyphens:auto}
.txt .v:first-child{font-size:1.42em;line-height:1.38;font-weight:400}
.txt .v:first-child sup{font-size:.4em;vertical-align:.9em}
.v{cursor:pointer;border-radius:4px;transition:background .25s}
.v sup{font:600 .55em var(--ui);color:var(--fg3);margin-right:.3em;vertical-align:.5em;letter-spacing:.02em}
.v.h1{background:var(--hl1)}.v.h2{background:var(--hl2)}.v.h3{background:var(--hl3)}.v.h4{background:var(--hl4)}
.v.cur{background:var(--cur);box-shadow:0 0 0 3px var(--cur)}
.v .nm{display:inline-block;width:.6em;height:.6em;margin-left:.3em;border-radius:50%;background:var(--fg);vertical-align:.1em;opacity:.7}
.v .bmk{display:inline-block;width:.55em;height:.8em;margin-left:.25em;background:var(--fg);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%);vertical-align:-.05em;opacity:.8}
.rend{margin:34px 0 10px;display:flex;flex-direction:column;gap:12px;align-items:center}
/* Hoeren-Ansicht */
.lbody{flex:1;min-height:0;overflow-y:auto;padding:6px 28px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lcover{width:min(70vw,300px);aspect-ratio:1;border-radius:18px;background:#111 center/cover no-repeat;box-shadow:0 20px 50px #0009}
.lbody h2{font:600 26px/1.2 var(--ui);margin-top:26px}
.lbody p{margin-top:6px;color:var(--fg2);font:400 15px/1.5 var(--serif);max-width:420px}
.ov.listen .rcols{display:none}
.ov:not(.listen) .lbody{display:none}
.pl{flex:none;background:var(--bg);padding:8px 14px calc(8px + var(--sb))}
.ov.listen .pl{padding-bottom:calc(20px + var(--sb))}
.pbar{display:flex;align-items:center;gap:10px;padding:0 4px}
.pt{font-size:11.5px;color:var(--fg2);font-variant-numeric:tabular-nums;min-width:34px;text-align:center;flex:none}
.zbar{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none}
.zbar::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--line);border-radius:2px}
.zfill{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;width:0;background:var(--fg);border-radius:2px;pointer-events:none}
.zhandle{position:absolute;top:50%;left:0;width:12px;height:12px;background:var(--fg);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 3px var(--bg)}
.zmark{position:absolute;top:50%;width:2px;height:9px;background:var(--bg);border-radius:1px;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.pctl{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.pctl .ib{width:36px;height:40px}
.pctl .ib svg{width:21px;height:21px}
.pl .play{width:54px;height:54px;border-radius:50%;background:var(--ac);color:var(--acfg);display:flex;align-items:center;justify-content:center;flex:none}
.ov.listen .pl .play{width:72px;height:72px}
.pl .play svg{width:24px;height:24px;fill:currentColor;stroke:none}
.spd{min-width:46px;height:32px;padding:0 8px;border-radius:16px;background:var(--bg3);font-size:12.5px;font-weight:700}
.pop-wrap{position:relative}
.pop{position:absolute;z-index:20;bottom:calc(100% + 10px);left:0;background:var(--bg3);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:74px}
.pop[hidden]{display:none}
.popopt{border:0;background:none;padding:8px 12px;border-radius:8px;font-size:14px;text-align:left}
.popopt.on{background:var(--ac);color:var(--acfg);font-weight:700}
.pstrip{margin-top:6px}
.pstrip[hidden]{display:none}
.zstrip{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.zstrip::-webkit-scrollbar{display:none}
.zchip{flex:0 0 auto;min-width:34px;height:30px;border-radius:15px;background:none;color:var(--fg3);font-size:13px;padding:0 6px}
.zchip.on{background:var(--ac);color:var(--acfg);font-weight:700}
.pst{text-align:center;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);margin-top:2px}
.lacts{display:none;justify-content:space-around;margin-top:14px}
.ov.listen .lacts{display:flex}
.lacts button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--fg2);min-width:60px}
.lacts svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ---- Sheets ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;opacity:0;visibility:hidden;transition:opacity .25s}
.scrim.on{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;z-index:90;background:var(--bg2);border-radius:22px 22px 0 0;padding:10px 20px calc(20px + var(--sb));transform:translateY(105%);transition:transform .3s var(--ease);max-height:86vh;overflow-y:auto;border-top:1px solid var(--line)}
.sheet.on{transform:none}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
.sheet h2{font:600 20px var(--serif);margin-bottom:4px}
.sheet .q{font:400 15px/1.55 var(--serif);color:var(--fg2);margin:6px 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acts{display:flex;flex-direction:column}
.act{display:flex;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line);font-size:15.5px;text-align:left;width:100%}
.act svg{width:20px;height:20px;fill:none;stroke:var(--fg2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cols{display:flex;gap:12px;margin:2px 0 8px}
.cols button{width:42px;height:42px;border-radius:50%;border:2px solid transparent}
.cols button.on{border-color:var(--fg)}
.c1{background:#f0c83c}.c2{background:#5ac878}.c3{background:#5a96f0}.c4{background:#f078aa}
textarea{width:100%;min-height:110px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;font:400 16px/1.5 var(--serif);resize:vertical;outline:0;margin:8px 0 12px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + var(--sb) + 20px);transform:translate(-50%,20px);background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:320;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.opt{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 2px;border-bottom:1px solid var(--line);font-size:15px;text-align:left}
.opt i{font-style:normal;color:var(--fg);font-weight:700}
.sw{width:46px;height:28px;border-radius:14px;background:var(--bg3);position:relative;flex:none;transition:.2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--fg2);transition:.2s}
.sw.on{background:var(--ac)}.sw.on::after{left:21px;background:var(--acfg)}
select{width:100%;height:46px;margin-top:8px;background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:0 12px;font-size:15px}
/* ---- Desktop (>=1000px): Sidebar + Bento + 3-Spalten-Leser ---- */
@media(min-width:1000px){
  .tabbar{display:none}
  #side{display:flex;flex-direction:column;width:var(--side);flex:none;border-right:1px solid var(--line);background:var(--bg);padding:24px 12px 14px;overflow-y:auto}
  .brand{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 26px}
  .brand .lg{width:34px;height:57px;color:var(--fg);margin-bottom:6px}
  .brand .b1{font-size:9px}.brand .b2{font-size:34px}
  #side nav{display:flex;flex-direction:column;gap:2px}
  #side hr{border:0;border-top:1px solid var(--line);margin:14px 6px}
  .nv{display:flex;align-items:center;gap:14px;height:44px;padding:0 14px;border-radius:10px;color:var(--fg2);font-size:14.5px;text-align:left;width:100%;transition:background .18s}
  .nv svg{width:20px;height:20px}
  .nv:hover{background:var(--bg2);color:var(--fg)}
  .nv.on{background:var(--bg3);color:var(--fg)}
  .side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
  .view{padding:28px 36px 48px}
  .toast{bottom:28px}
  .h1{font-size:36px}
  .home-g{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;margin-top:18px}
  .home-g .hero{grid-column:1;grid-row:1;min-height:400px;background-position:center 40%}
  .home-g .hero q{font-size:clamp(30px,3vw,40px);line-height:1.18;max-width:640px}
  .home-g .hero .hi{padding:40px 40px 28px}
  .home-g .side-card{grid-column:2;grid-row:1}
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;grid-column:1/-1}
  .tile{position:relative;height:150px;border-radius:14px;overflow:hidden;background:#111 center/cover no-repeat;text-align:left;color:#F4F1EB;padding:14px;display:flex;flex-direction:column;justify-content:flex-end}
  .tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08090A22,#08090Ae0)}
  .tile>*{position:relative}
  .tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;margin-bottom:8px;stroke-linecap:round;stroke-linejoin:round}
  .tile b{font:600 15.5px var(--ui)}.tile span{font-size:12px;opacity:.75;margin-top:2px}
  .bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;grid-column:1/-1}
  .bento .sec{margin-top:0;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:18px}
  .car{margin:0;padding:0;flex-wrap:wrap;overflow:visible}
  .tc{flex:0 0 calc(50% - 5px);height:130px}
  .ov{left:var(--side)}
  .rcols .rnav{display:block;width:250px;flex:none;border-right:1px solid var(--line);overflow-y:auto;padding:18px 14px}
  .rcols .rctx{display:block;width:320px;flex:none;border-left:1px solid var(--line);overflow-y:auto;padding:22px 20px}
  .rnav h3,.rctx h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);font-weight:600;margin:0 0 10px}
  .rnav .bkb{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--fg2)}
  .rnav .bkb.on{background:var(--bg3);color:var(--fg);font-weight:600}
  .rnav .grid{grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0 18px}
  .rnav .grid button{font-size:13px;border-radius:9px}
  .rnav .grid button.cc{outline:2px solid var(--fg)}
  .rctx .ci{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--fg2)}
  .rctx .ci b{display:block;color:var(--fg);font-size:12.5px;margin-bottom:2px}
  .rb{padding:28px 48px 60px}
  .rtxt{max-width:700px}
  .txt{font-size:calc(var(--fs) + 2px)}
  .pl{padding-left:calc(250px + 24px);padding-right:calc(320px + 24px)}
  .ov.listen .pl{padding-left:24px;padding-right:24px}
  .sheet{left:var(--side);right:0}
}
@media(min-width:1000px) and (max-width:1279px){.bento{grid-template-columns:1fr 1fr}.bento>*:last-child{grid-column:1/-1}.home-g{grid-template-columns:minmax(0,1fr)}.home-g .side-card{grid-column:1;grid-row:auto}.rcols .rctx{display:none}.pl{padding-right:24px}}

/* ---- Menue: Drawer, Untermenues, Topbar, Mini-Player, Footer (EIN Template) ---- */
.burger{color:var(--fg)}.burger svg{width:22px;height:22px}
.hsb{gap:8px}.hsb .sbar{flex:1}
.topbar{display:flex;align-items:center;gap:6px;margin:0 -8px 6px}
.topbar h1{flex:1;text-align:center;font:600 18px var(--ui)}
.has-sub .subw{margin-bottom:8px}
.subm{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px 4px}
.subm::-webkit-scrollbar{display:none}
.sm{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:38px;padding:0 14px;border-radius:19px;background:var(--bg2);border:1px solid var(--line);font-size:13.5px;color:var(--fg2)}
.sm svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sm:active,.sm:hover{background:var(--bg3);color:var(--fg)}
.subcard{position:relative;display:none;width:100%;height:96px;border-radius:14px;overflow:hidden;background:#111 center/cover no-repeat;color:#F4F1EB;text-align:left;padding:14px;margin-top:14px}
.subcard::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#08090Aee,#08090A55)}
.subcard>*{position:relative;display:block}.subcard b{font:600 15px var(--ui)}.subcard span{font-size:12.5px;opacity:.75;margin-top:2px}
#drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,340px);z-index:95;background:var(--bg);border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .3s var(--ease);display:flex;flex-direction:column;padding:calc(var(--st) + 10px) 12px calc(var(--sb) + 14px);overflow-y:auto}
#drawer.on{transform:none}
.scrim.dr{z-index:90}
.dr-h{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px}
.dr-b{display:flex;align-items:center;gap:12px}.dr-b .lg{width:26px;height:44px;color:var(--fg)}.dr-b .b1{display:block;font-size:9px}.dr-b .b2{display:block;font-size:26px}
.dr-l{flex:1}
.dr-l hr{border:0;border-top:1px solid var(--line);margin:10px 8px}
.dr-i{display:flex;align-items:center;gap:16px;width:100%;height:50px;padding:0 14px;border-radius:12px;font-size:15.5px;text-align:left;color:var(--fg2)}
.dr-i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dr-i.on,.dr-i:active{background:var(--bg3);color:var(--fg)}
.dr-i kbd{display:none}
.dr-f{padding-top:10px}
#mini{display:flex;align-items:center;gap:10px;margin:0 10px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:16px;background:var(--bg2)}
#mini[hidden]{display:none}
.mi-open{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left}
.mi-th{width:44px;height:44px;border-radius:10px;background:#111 center/cover no-repeat;flex:none}
.mi-t{min-width:0}.mi-t b{display:block;font:600 14.5px var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mi-t span{display:block;font-size:12px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mini .play{width:42px;height:42px;border-radius:50%;background:var(--ac);color:var(--acfg);display:flex;align-items:center;justify-content:center;flex:none}
#mini .play svg{width:20px;height:20px;fill:currentColor;stroke:none}
.foot{display:none}
.nv kbd{display:none}
@media(min-width:1000px){
  .burger,.hsb .burger,.topbar{display:none}
  .hsb .sbar{max-width:640px}
  #drawer,.scrim.dr{display:none}
  .has-sub{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 32px;align-items:start}
  .has-sub .subw{position:sticky;top:0}
  .has-sub .subm{flex-direction:column;overflow:visible;margin:0;padding:0;gap:2px}
  .has-sub .sm{height:44px;border-radius:10px;background:transparent;border:0;width:100%;font-size:14.5px}
  .has-sub .sm:hover{background:var(--bg2)}
  .has-sub .subcard{display:block}
  .has-sub .foot{grid-column:1/-1}
  .sidec{position:absolute;right:10px;top:22px;width:30px;height:30px;color:var(--fg3)}
  .sidec svg{width:18px;height:18px;transition:transform .25s}
  #side{position:relative;transition:width .25s var(--ease)}
  .nv kbd{display:inline;margin-left:auto;font:500 10.5px var(--ui);padding:2px 6px;border-radius:5px;background:var(--bg2);color:var(--fg3)}
  .nv.on kbd{background:var(--bg)}
  #app.collapsed{--side:76px}
  #app.collapsed .brand .b1,#app.collapsed .brand .b2,#app.collapsed .nv span,#app.collapsed .nv kbd{display:none}
  #app.collapsed .nv{justify-content:center;padding:0}
  #app.collapsed .brand{margin-bottom:34px}
  #app.collapsed .brand .lg{width:28px;height:47px}
  #app.collapsed .sidec{right:auto;left:23px;top:auto;bottom:158px}
  #app.collapsed .sidec svg{transform:rotate(180deg)}
  #app.collapsed #side{padding-left:8px;padding-right:8px}
  #mini{margin:0 28px 14px;max-width:620px;align-self:center;width:calc(100% - 56px)}
  .foot{display:block;margin-top:46px;border:1px solid var(--line);border-radius:20px;background:var(--bg2);overflow:hidden}
  .foot-g{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1.5fr;gap:28px;padding:36px 36px 30px}
  .fbrand{display:flex;flex-direction:column;align-items:center;text-align:center}
  .fbrand .lg{width:34px;height:57px;color:var(--fg);margin-bottom:8px}.fbrand .b1{font-size:10px}.fbrand .b2{font-size:38px}
  .fbrand p{margin-top:14px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg3);line-height:1.9;max-width:170px}
  .fcol h4{margin:0 0 14px;font:600 11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
  .fcol button{display:block;text-align:left;padding:6px 0;font-size:14px;color:var(--fg2)}
  .fcol button:hover{color:var(--fg)}
  .fquote{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:210px;border-radius:14px;overflow:hidden;background:#111 center/cover no-repeat;text-align:left;color:#F4F1EB;padding:18px}
  .fquote::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08090A11,#08090Aee)}
  .fquote>*{position:relative}.fquote q{font:500 17px/1.35 var(--serif);quotes:none}.fquote span{margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
  .foot-b{display:flex;justify-content:space-between;padding:16px 36px;border-top:1px solid var(--line);font-size:12.5px;color:var(--fg3)}
  .foot-b span:last-child{letter-spacing:.2em;text-transform:uppercase;font-size:10.5px}
}
@media(min-width:1000px) and (max-width:1279px){.foot-g{grid-template-columns:1fr 1fr 1fr}.fquote{grid-column:1/-1}.fbrand{grid-column:1/-1}}

.lacts button b{font:700 16px var(--ui);color:var(--fg);height:22px;display:flex;align-items:center}
.ov.listen .pctl .pop-wrap,.ov.listen #vbtn,.ov.listen .pctl>[data-act=pmore]{display:none}
.ov.listen .pctl{justify-content:center;gap:10px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;margin-top:6px}
.gi{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--fg2)}
.gi span{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--fg)}
.gi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.qa{margin:22px 0 -4px;font:600 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}
.lacts+.pst{margin-top:10px}

/* Logo: Original-Figur vom Buchcover (weiss, transparent); auf hellen Themes invertieren */
[data-theme=light] .brand .lg,[data-theme=light] .dr-b .lg,[data-theme=light] .fbrand .lg,[data-theme=sepia] .brand .lg,[data-theme=sepia] .dr-b .lg,[data-theme=sepia] .fbrand .lg{filter:invert(1)}
.lg{width:40px;height:102px}
.sp .lg{width:46px;height:118px}
.wc .lg{width:58px;height:148px}
.brand .lg{width:30px;height:77px}
.dr-b .lg{width:24px;height:61px}
.fbrand .lg{width:34px;height:87px}
@media(min-width:1000px){.brand .lg{width:30px;height:77px}#app.collapsed .brand .lg{width:24px;height:61px}.fbrand .lg{width:34px;height:87px}}

/* Tap-Ziele >= 44 px (Persona-Test) */
.hero .ha button{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.hero .ha span{gap:4px}
.hero .ha .go{padding:0 4px}
.rh .ttl{min-height:44px}
.spd{min-height:36px}
.zchip{min-height:36px}

.hdots{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.hdots span{display:flex;gap:6px;align-items:center}
.hdots i{width:34px;height:3px;border-radius:2px;background:#ffffff40}
.hdots i.on{background:#fff}
.harr{display:none!important}
.hbar{display:none}
@media(min-width:1000px){
  .harr{display:flex!important;gap:8px}
  .harr button{width:36px;height:36px;border-radius:50%;border:1px solid #ffffff55;color:#fff;font-size:20px;line-height:1}
  .hbar{display:flex;align-items:center;gap:10px;margin-left:14px}
  .hsb{align-items:center}
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#08090Aaa 0%,#08090A00 62%);pointer-events:none}
.hero .hi{z-index:1}

/* Marke oben mittig + Das Buch */
.tbrand{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;color:var(--fg)}
.tbrand .lg{width:8px;height:20px;color:inherit}
[data-theme=light] .tbrand .lg,[data-theme=sepia] .tbrand .lg{filter:invert(1)}
.tbrand b{font:600 19px/1 var(--disp);letter-spacing:-1px;text-transform:uppercase}
.mtop .topbar{margin:0 -8px 8px}
.book{padding-bottom:20px}
.bk-hero{position:relative;border-radius:22px;overflow:hidden;background:#111 center/cover no-repeat;margin-top:8px}
.bk-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08090Acc,#08090Aee)}
.bk-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px 28px;color:#F4F1EB}
.bk-cover{width:min(62vw,250px);height:auto;filter:drop-shadow(0 26px 34px #000a);animation:rise .9s var(--ease) both}
.bk-tx h1{font:600 34px/1.1 var(--serif);margin:10px 0 4px;color:#F4F1EB}
.bk-sub{font-size:14px;letter-spacing:.04em;color:#cfcac0;margin-bottom:14px}
.bk-p{max-width:480px;margin:0 auto;color:#d6d2c9;font:400 16px/1.6 var(--serif)}
.bk-cta{justify-content:center;flex-wrap:wrap;margin-top:22px}
.bk-cta .btn.ghost{color:#F4F1EB;border-color:#ffffff40}
.bk-cta .btn:first-child{background:#F4F1EB;color:#08090A}
.bk-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.bf{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px}
.bf span{display:block;font:600 11px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);margin-bottom:6px}
.bf b{font:600 15px/1.35 var(--ui)}
@media(min-width:1000px){
  .mtop{display:none}
  .bk-in{flex-direction:row;text-align:left;gap:56px;padding:60px 64px;align-items:center;justify-content:center}
  .bk-cta{justify-content:flex-start}
  .bk-p{margin:0}
  .bk-cover{width:290px}
  .bk-facts{grid-template-columns:repeat(4,1fr)}
}

/* Scrollbars ausgeblendet (Scrollen bleibt) */
*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none;width:0;height:0}
/* Skeleton-Loading (Shimmer) */
@keyframes shim{0%{background-position:-420px 0}100%{background-position:420px 0}}
.sk,.view:empty::before,body.loading .view.on::after{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 45%,var(--bg2) 65%) 0 0/840px 100%;animation:shim 1.3s linear infinite}
.view:empty::before{content:"";display:block;height:46vh;margin:18px;border-radius:20px}
body.loading .view.on{position:relative}
body.loading .view.on>*{opacity:.0;transition:none}
body.loading .view.on::after{content:"";position:absolute;left:18px;right:18px;top:18px;height:46vh;border-radius:20px}
@media(prefers-reduced-motion:reduce){.sk,.view:empty::before,body.loading .view.on::after{animation:none}}