/* Wunschraum – träumerischer Nachtraum, weiche Lichter */
:root{
  --ink:#fbf6ff; --ink2:#e4dcf5; --muted:#b9b2d4; --bg0:#0c0d24; --bg1:#1a1840; --bg2:#2d2457;
  --gold:#ffd88a; --gold2:#ffe7b3; --rose:#ff93ab; --card:rgba(26,24,62,.93); --line:rgba(220,210,255,.18);
  --radius:22px; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --cy:44%;
  --dock:74px; /* freier Streifen unten für den Raus-Knopf */
}
html[data-fs="l"]{font-size:19px} html[data-fs="xl"]{font-size:21.5px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg0);color:var(--ink);font-family:var(--sans);font-size:inherit;line-height:1.5}
html{font-size:17px}
body{overflow:hidden;overscroll-behavior:none;font-size:1rem}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px;border-radius:14px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Bühne ---------- */
#stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 80% at 50% 38%,#2c2560 0%,#16153a 55%,#0a0a20 100%)}
#stage .sky{position:absolute;inset:-70%;transform-origin:50% 45%;will-change:transform}
.sky-l{position:absolute;background-repeat:repeat;will-change:transform;backface-visibility:hidden}
/* eine Kachel Überstand: die Parallaxe verschiebt die Ebene nur (Modulo Kachelgröße), statt sie neu zu malen */
.sky-l.s1{inset:-420px;background-size:420px 420px;opacity:.7;background-image:
 radial-gradient(1.2px 1.2px at 20px 30px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 140px 90px,#fff 50%,transparent 51%),
 radial-gradient(1.4px 1.4px at 260px 40px,#ffe9c8 50%,transparent 51%),radial-gradient(1px 1px at 330px 170px,#fff 50%,transparent 51%),
 radial-gradient(1.1px 1.1px at 80px 220px,#dfe4ff 50%,transparent 51%),radial-gradient(1px 1px at 200px 300px,#fff 50%,transparent 51%),
 radial-gradient(1.5px 1.5px at 380px 340px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30px 380px,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 300px 260px,#ffd6e2 50%,transparent 51%)}
.sky-l.s2{inset:-620px;background-size:620px 620px;opacity:.55;animation:twinkle 7s ease-in-out infinite alternate;background-image:
 radial-gradient(2px 2px at 100px 120px,#fff 40%,transparent 60%),radial-gradient(1.8px 1.8px at 480px 80px,#fff1c9 40%,transparent 60%),
 radial-gradient(2.2px 2.2px at 300px 420px,#e6dcff 40%,transparent 60%),radial-gradient(1.6px 1.6px at 560px 520px,#fff 40%,transparent 60%)}
.aurora{position:absolute;inset:0;background:radial-gradient(40% 30% at 25% 20%,rgba(255,147,171,.13),transparent 70%),radial-gradient(45% 30% at 78% 30%,rgba(143,214,255,.12),transparent 70%),radial-gradient(60% 40% at 50% 95%,rgba(127,227,180,.08),transparent 70%);animation:drift 26s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:.75}}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.06)}}
.viewport{position:absolute;inset:0;perspective:820px;perspective-origin:50% var(--cy)}
.world{position:absolute;left:50%;top:var(--cy);width:0;height:0;transform-style:preserve-3d}
.world>*{transform-style:preserve-3d}
.floor{position:absolute;width:520px;height:520px;left:-260px;top:-260px;border-radius:50%;transform:translate3d(0,76px,0) rotateX(90deg);
 background:radial-gradient(circle,rgba(255,226,170,.28) 0%,rgba(180,160,255,.12) 30%,rgba(120,110,220,.06) 55%,transparent 70%)}
.floor i{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(230,220,255,.16)}
.floor i:nth-child(1){width:34%;height:34%}.floor i:nth-child(2){width:60%;height:60%;border-style:dashed;opacity:.7}.floor i:nth-child(3){width:86%;height:86%;opacity:.5}
.bb{position:absolute;left:0;top:0;width:0;height:0}
.bb>*{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.mote i{display:block;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:#fff6df;box-shadow:0 0 8px 2px rgba(255,236,190,.55);animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 50% 45%,transparent 55%,rgba(5,5,18,.65) 100%)}

/* Figur */
.fig{width:180px;height:200px}
.fv{position:absolute;left:30px;top:20px;width:120px;height:160px;transition:opacity .45s ease}
.fv svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.fv-front{opacity:0}.figure.front .fv-front{opacity:1}.figure.front .fv-back{opacity:0}
.aura{position:absolute;left:50%;top:56.5%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.35),rgba(255,214,140,.1) 45%,transparent 70%);opacity:.5;transition:opacity 1.5s,transform 1.5s}
.heart{position:absolute;left:50%;top:132px;width:0;height:0}
.heart b{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff3d2;box-shadow:0 0 14px 6px rgba(255,220,150,.6);opacity:0;transition:opacity 1.4s,transform 1.4s}
.heart .inner{position:absolute;left:0;top:0}
#stage.paradox .heart .inner{animation:spin 14s linear infinite}
.heart .inner i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px 2px var(--c);transform:rotate(var(--a)) translateY(-17px);opacity:0;transition:opacity 1.2s}
@keyframes spin{to{transform:rotate(360deg)}}
#stage.centered .aura{opacity:1;transform:scale(1.18)}
#stage.centered .heart b{opacity:1}
#stage.paradox .heart b{opacity:1;transform:scale(1.5)}
#stage.paradox .heart .inner i{opacity:1}
#stage.paradox .orb .halo{animation:pulse 3.2s ease-in-out infinite}

/* Wunschlichter */
.orb{position:relative;width:128px;height:128px;padding:0;border:0;background:none;display:grid;place-items:center;opacity:0;transform:scale(.2);transition:opacity .9s,transform 1.1s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.orb.placed{opacity:1;transform:scale(1);pointer-events:auto}
.orb .halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 45%,transparent) 45%,color-mix(in srgb,var(--c) 12%,transparent) 75%,transparent 100%);opacity:.8}
.orb .core{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#2a2050;background:radial-gradient(circle at 38% 32%,#fff,var(--c) 70%)}
.orb .core .ico{width:28px;height:28px}
.orb .lbl{position:absolute;top:calc(50% + 33px);left:50%;transform:translateX(-50%);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;color:var(--ink);text-shadow:0 1px 6px #000;opacity:.9}
.orb.none .core{background:transparent;box-shadow:none;border:2px dashed var(--c);color:var(--c)}
.orb.none .halo{opacity:.25}
.orb.appear .core{animation:appear 1.4s ease-out}
.orb.focus .halo{animation:pulse 1.6s ease-in-out infinite;opacity:1}
.orb.felt .core::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #fff7dc;opacity:.8}
@keyframes appear{0%{transform:scale(.2);filter:brightness(2.5)}60%{transform:scale(1.2)}100%{transform:scale(1);filter:none}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:1}}
.spark{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff6d8;box-shadow:0 0 8px 3px rgba(255,230,170,.8);animation:spark 1.2s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.traveler i{display:block;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px 5px var(--c)}
.theme{width:110px;height:110px;--soft:0}
.theme .tart{position:absolute;inset:0;filter:saturate(calc(1 - var(--soft)*.6)) brightness(calc(1 + var(--soft)*.6));opacity:calc(1 - var(--soft)*.25);transition:filter 1.5s,opacity 1.5s}
.theme .tart svg{width:100%;height:100%}
.theme .tglow{position:absolute;inset:18%;border-radius:50%;transition:box-shadow 1.5s}

/* Abdunkeln ohne filter: eine ruhige Ebene, die nur ihre Deckkraft ändert (früher blur+brightness auf der ganzen 3D-Bühne – jedes Bild neu gefiltert) */
.shade{position:absolute;inset:0;background:#06061a;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
#stage.backdrop .shade{opacity:.42}
#stage.dim .shade{opacity:.45}
/* eingefroren (Seite verdeckt die Bühne) bzw. Stromsparmodus: keine Endlosanimationen */
#stage.frozen *{animation-play-state:paused!important}
body.ps .mote i,body.ps .sky-l.s2,body.ps .aurora,body.ps .preview.bob svg,body.ps .orb.await:not(.placed) .halo{animation:none!important}
.bb.figure{transition:opacity .6s}#stage.nofig .bb.figure{opacity:0}

/* ---------- Oberfläche ---------- */
#ui{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;pointer-events:none}
#ui>*{pointer-events:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--safe-t) + 10px) 14px 0;min-height:56px;pointer-events:none}
.topbar>*{pointer-events:auto}
.iconbtn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(20,18,50,.8);display:grid;place-items:center;font-size:1.3rem;line-height:1}
.iconbtn svg{width:22px;height:22px}
.iconbtn[hidden]{display:none}
.caption{margin:8px 18px 0;padding:14px 18px;min-height:3.4em;border-radius:18px;background:linear-gradient(180deg,rgba(18,16,48,.8),rgba(18,16,48,.62));font-family:var(--serif);font-size:1.22rem;line-height:1.45;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .5s;cursor:pointer;user-select:none}
.caption[hidden]{display:none}
.caption.fade{opacity:0}
.caption small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-top:6px}
.spacer{flex:1;pointer-events:none}
.panel{margin:0 10px calc(var(--safe-b) + var(--dock));padding:16px 16px 14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:0 -10px 40px rgba(0,0,0,.35);max-height:62vh;overflow:auto;animation:rise .45s ease-out}
.panel:empty{display:none}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.page{position:fixed;top:0;left:0;right:0;bottom:calc(var(--safe-b) + var(--dock));z-index:3;overflow-y:auto;padding:calc(var(--safe-t) + 22px) 18px 14px;animation:fadein .5s ease-out} /* endet über dem Raus-Streifen: nichts scrollt unter den Knopf */
.page[hidden]{display:none}
.page .inner{max-width:520px;margin:0 auto}
@keyframes fadein{from{opacity:0}to{opacity:1}}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:.2em 0 .5em}
h1{font-size:2.3rem;letter-spacing:.01em}
h2{font-size:1.55rem}
h3{font-size:1.15rem}
p{margin:.4em 0 .8em}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.center{text-align:center}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1}
.stack{display:flex;flex-direction:column;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 20px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.07);font-weight:600;text-align:center;text-decoration:none;color:var(--ink);transition:transform .15s,background .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2b1f45;border:0;box-shadow:0 6px 24px rgba(255,210,130,.28)}
.btn.ghost{background:transparent}
.btn.small{min-height:44px;padding:8px 14px;font-size:.92rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .ico{width:22px;height:22px}
.link{background:none;border:0;color:var(--gold2);text-decoration:underline;padding:10px 4px;min-height:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card+.card{margin-top:12px}
.titlewrap{min-height:calc(100vh - 100px);min-height:calc(100dvh - var(--safe-t) - var(--safe-b) - var(--dock) - 32px);display:flex;flex-direction:column;justify-content:space-between;text-align:center}
.logo{margin-top:0}
.logo .mark{width:84px;height:84px;margin:0 auto 10px;display:block}
.logo p{color:var(--ink2);font-family:var(--serif);font-size:1.12rem;max-width:22em;margin:0 auto}
.menu{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.menu .row .btn{font-size:.95rem}

/* Hinweis */
.notice li{margin:.45em 0}
.notice ul{padding-left:1.1em;margin:.3em 0}
.help{display:grid;gap:8px;margin-top:10px}
.help a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.help a b{font-size:1.3rem;color:var(--gold2);min-width:2.6em}
.help a span{font-size:.88rem;color:var(--muted)}
.check{display:flex;gap:12px;align-items:flex-start;padding:10px 2px;cursor:pointer}
.check input{width:24px;height:24px;margin-top:2px;accent-color:var(--gold)}

/* Figurwahl */
.preview{height:230px;display:grid;place-items:center;position:relative}
.preview .ring{position:absolute;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(255,228,170,.25),transparent 65%)}
.preview svg{width:150px;height:200px;position:relative;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.preview.bob svg{animation:float 5s ease-in-out infinite}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:16px;border:2px solid transparent;background:rgba(255,255,255,.06);font-size:.78rem;min-height:92px}
.tile svg{width:44px;height:58px}
.tile[aria-pressed="true"]{border-color:var(--gold);background:rgba(255,216,138,.12)}
.swatches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.sw{width:42px;height:42px;border-radius:50%;border:3px solid transparent;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.sw[aria-pressed="true"]{border-color:#fff;transform:scale(1.08)}

/* Vorbereitung */
.opt{display:flex;gap:14px;align-items:center;text-align:left;width:100%;padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink)}
.opt .oi{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,216,138,.16);color:var(--gold2)}
.opt .oi svg{width:26px;height:26px}
.opt b{display:block}
.opt span{font-size:.88rem;color:var(--muted)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.toggle:last-child{border-bottom:0}
.toggle small{display:block;color:var(--muted);font-size:.82rem}
.switch{position:relative;flex:0 0 56px;height:32px;border-radius:999px;border:0;background:rgba(255,255,255,.18);transition:background .2s}
.switch::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-checked="true"]{background:var(--gold)}
.switch[aria-checked="true"]::after{transform:translateX(24px)}
.seg{display:flex;border-radius:999px;background:rgba(255,255,255,.08);padding:3px;gap:3px}
.seg button{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;font-size:.88rem;padding:4px 10px}
.seg button[aria-pressed="true"]{background:var(--gold);color:#2b1f45;font-weight:600}

/* Atemkreis / Zählen */
.breath{position:fixed;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.breath .c{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.55),rgba(255,200,140,.18) 55%,transparent 72%);transform:scale(.55);transition:transform 4s ease-in-out}
.breath .c.in{transform:scale(1.15)}
.breath .t{position:absolute;font-family:var(--serif);font-size:1.4rem;color:var(--ink2)}
.bigarrow{position:fixed;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;font-size:5rem;color:rgba(255,236,190,.55);text-shadow:0 0 30px rgba(255,220,150,.5)}
.count{position:fixed;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.count b{font-family:var(--serif);font-size:7rem;font-weight:400;color:var(--gold2);text-shadow:0 0 40px rgba(255,216,138,.6);animation:fadein 1s}

/* Wunsch-Eingabe */
.wishhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.wishhead .dot{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.wishhead b{font-family:var(--serif);font-size:1.15rem}
.wishhead .step{margin-left:auto;font-size:.8rem;color:var(--muted)}
.field{width:100%;min-height:52px;padding:12px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(8,8,30,.5);font-size:1rem}
.field::placeholder{color:#9690b4}
textarea.field{min-height:84px;resize:vertical}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:.9rem}
.chip .ico{width:20px;height:20px}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--c,#ffd88a) 30%,transparent);border-color:var(--c,var(--gold))}
.hint{font-size:.84rem;color:var(--muted);margin:6px 2px 10px}
.suggest{font-family:var(--serif);font-size:1.18rem;text-align:center;margin:6px 0 12px}
.suggest b{color:var(--gold2);font-weight:600}

/* Wirkungen */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.dirbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;min-height:78px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:.86rem}
.dirbtn .o{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 32%,#fff,var(--c) 70%);color:#2a2050}
.dirbtn .o .ico{width:18px;height:18px}
.dirbtn.done::after{content:"✓";position:absolute;top:6px;right:9px;font-size:.85rem;color:var(--gold2)}
.dirbtn[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}

/* Wunschhimmel */
.jlist{display:flex;flex-direction:column;gap:10px}
.jitem{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:10px 14px;border-radius:18px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.jitem .const{flex:0 0 auto;background:radial-gradient(circle,#2b2560,#141233);border-radius:50%}
.jitem b{display:block;font-family:var(--serif);font-size:1.08rem}
.jitem span{font-size:.84rem;color:var(--muted)}
.jitem .fav{margin-left:auto;color:var(--gold);font-size:1.3rem}
.bigconst{display:grid;place-items:center;margin:4px 0 10px}
.bigconst .const{background:radial-gradient(circle,#2b2560,#141233 70%);border-radius:50%}
.wlist{list-style:none;padding:0;margin:0}
.wlist li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.wlist li:last-child{border-bottom:0}
.wlist .o{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 32%,#fff,var(--c) 70%);color:#2a2050}
.wlist .o.none{background:none;border:2px dashed var(--c);color:var(--c)}
.wlist .o .ico{width:18px;height:18px}
.wlist small{display:block;color:var(--muted)}
.tag{display:inline-block;padding:1px 9px;margin:3px 4px 0 0;border-radius:999px;background:rgba(255,255,255,.09);font-size:.78rem}
.empty{text-align:center;padding:30px 10px;color:var(--muted)}
.empty svg{width:80px;height:80px;opacity:.6}

/* Extras */
.xcard{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.xcard .xi{flex:0 0 50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(255,216,138,.25),rgba(165,151,255,.2));color:var(--gold2)}
.xcard .xi svg{width:28px;height:28px}
.xcard b{display:block}
.xcard span{font-size:.86rem;color:var(--muted)}
.xcard .lock{margin-left:auto;font-size:1.1rem;opacity:.7}
.paywall{text-align:center;margin-top:16px;padding:18px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,216,138,.14),rgba(165,151,255,.12));border:1px solid rgba(255,216,138,.3)}
.themegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.themegrid .tile svg{width:52px;height:52px}

/* Modal / Toast */
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(6,6,20,.78);animation:fadein .3s}
.modal[hidden]{display:none}
.modal .card{max-width:420px;width:100%}
.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + var(--dock) + 8px);transform:translate(-50%,30px);z-index:30;max-width:90vw;padding:12px 18px;border-radius:16px;background:#2c2660;border:1px solid var(--line);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Kontrast & Bewegung */
body.hc{--ink:#fff;--ink2:#fff;--muted:#e6e2f5;--card:rgba(0,0,0,.92);--line:rgba(255,255,255,.65)}
body.hc .caption{background:rgba(0,0,0,.88);text-shadow:none}
body.hc .btn{border-color:#fff}
body.hc .btn.primary{background:#ffe08f;color:#000}
body.hc .orb .lbl{background:#000;padding:0 6px;border-radius:6px}
body.hc .field{background:#000;border-color:#fff}
body.rm *,body.rm *::before,body.rm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
body.rm .heart .inner{animation:none}
@media (min-width:700px){.panel{max-width:560px;margin-left:auto;margin-right:auto;width:100%}}
@media (max-height:700px){.caption{font-size:1.08rem;padding:10px 14px}.panel{max-height:58vh}}
body.hc .menu .btn:not(.primary){background:#000}

/* ---- Wunschphase: Ruhe und Freiraum ---- */
.orb.await:not(.placed){opacity:1;transform:scale(1)}
.orb.await:not(.placed) .core,.orb.await:not(.placed) .lbl{opacity:0}
.orb.await:not(.placed) .halo{background:radial-gradient(circle closest-side,transparent 52%,color-mix(in srgb,var(--c) 55%,transparent) 60%,color-mix(in srgb,var(--c) 14%,transparent) 76%,transparent 100%);opacity:.55;animation:awaitb 7s ease-in-out infinite}
@keyframes awaitb{0%,100%{transform:scale(.86);opacity:.35}50%{transform:scale(1.08);opacity:.75}}
.caption .selfq{display:block;font-style:italic;font-size:1.12em;color:var(--gold2);letter-spacing:.005em}
.panel:has(.stillness),.panel:has(.choices){background:transparent;border-color:transparent;box-shadow:none;animation:fadein 1.6s ease-out}
.stillness{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 0 6px}
.breathdot{width:14px;height:14px;border-radius:50%;background:var(--gold2);box-shadow:0 0 18px var(--gold);animation:breathdot 8s ease-in-out infinite}
@keyframes breathdot{0%,100%{transform:scale(.7);opacity:.35}45%{transform:scale(1.5);opacity:.9}}
.still-t{font-size:.86rem;color:var(--muted);letter-spacing:.06em;text-shadow:0 1px 6px #000}
.choices{display:flex;flex-direction:column;align-items:center;gap:4px;animation:fadein 2.2s ease-out}
.choices .felt-btn{max-width:360px}
.quietrow{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);margin-top:4px}
.link.soft{color:var(--ink2);text-decoration:none;font-size:.95rem;opacity:.85;text-shadow:0 1px 6px #000;padding:10px 10px}
.link.soft:hover{opacity:1;text-decoration:underline}
.wishhead.calm .jg{font-size:.85rem;color:var(--gold2);font-style:italic;font-family:var(--serif)}
body.hc .link.soft{color:#fff;opacity:1;text-decoration:underline}
body.hc .still-t{color:#fff}
body.hc .panel:has(.choices){background:#000;border-color:#fff}
body.rm .breathdot,body.rm .orb.await .halo{animation:none!important;opacity:.7}
.panel:has(.wishhead.calm) .btn.primary{display:flex;width:fit-content;min-width:240px;margin:12px auto 0}

/* ---------- 0.3: offener Start, Raus-Knopf, Raus-Fenster, Stimmen-Auswahl ---------- */
.mote.far i{box-shadow:0 0 5px 1px rgba(255,236,190,.35)}
#stage .vignette{transition:opacity 2.5s ease}
#stage.open .vignette{opacity:.35}
.titlewrap .logo .mark{width:62px;height:62px;margin-bottom:6px}
.titlewrap h1{font-size:clamp(1.9rem,7vw,2.5rem);letter-spacing:.04em;text-shadow:0 2px 18px rgba(5,5,20,.8)}
.titlewrap .logo p{font-size:1rem;text-shadow:0 1px 10px rgba(5,5,20,.9)}
.titlewrap .menu{gap:8px;margin-top:20px}
.titlewrap .tnote{margin-top:2px;text-shadow:0 1px 6px #000}
.titlewrap.fly .logo{animation:fadein 2.4s ease-out 1.2s both}
.titlewrap.fly .menu{animation:fadein 2s ease-out 4.2s both}
body.rm .titlewrap.fly .logo,body.rm .titlewrap.fly .menu{animation:none}
.tlinks{gap:0 2px}
.vchip{display:flex;align-items:center;gap:10px;margin:0 auto 4px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(20,18,50,.84);color:var(--ink);font-size:.95rem}
.vchip b{color:var(--gold2);font-weight:600}
.vchip .mic{width:20px;height:20px;color:var(--gold2);flex:none}
.vchip i{font-style:normal;opacity:.7;transition:transform .3s}
.vchip[aria-expanded="true"] i{transform:rotate(180deg)}
.vcard{text-align:left;background:rgba(20,18,50,.94);border:1px solid var(--line);border-radius:18px;padding:6px 14px 12px;margin-bottom:6px;animation:fadein .3s}
.vcard[hidden]{display:none}
.voices{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
.vopt{display:flex;gap:8px;align-items:stretch}
.vpick{flex:1;display:flex;align-items:center;gap:12px;text-align:left;min-height:52px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink)}
.vpick>i{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink2);display:grid;place-items:center}
.vpick[aria-checked="true"]{border-color:var(--gold2);background:rgba(255,216,138,.1)}
.vpick[aria-checked="true"]>i{border-color:var(--gold2)}
.vpick[aria-checked="true"]>i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold2)}
.vpick b{display:block}
.vpick span span{display:block;font-size:.85rem;color:var(--ink2)}
.vplay{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--gold2);font-size:.78rem}
.vplay svg{width:20px;height:20px}
body.hc .vpick,body.hc .vplay,body.hc .vcard,body.hc .vchip{background:#000;border-color:#fff;color:#fff}
/* Raus-Knopf: immer sichtbar, unten rechts im Daumenbereich (Safe-Area beachtet), über allem.
   Unten ist dafür ein eigener Streifen frei (--dock), damit nichts darunter liegt. */
.exitbtn{position:fixed;bottom:calc(var(--safe-b) + 12px);right:calc(var(--safe-r, 0px) + 14px);z-index:50;display:flex;align-items:center;gap:7px;height:50px;min-width:104px;justify-content:center;padding:0 20px 0 15px;border-radius:999px;border:1px solid rgba(255,236,190,.42);background:rgba(20,18,50,.92);color:var(--ink);font-size:1rem;font-weight:600;letter-spacing:.02em;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.exitbtn svg{width:21px;height:21px;color:var(--gold2);position:relative}
.exitbtn .lbl{position:relative}
.exitbtn .hold{position:absolute;inset:0;background:rgba(255,216,138,.35);transform:scaleX(0);transform-origin:left;pointer-events:none}
.exitbtn.holding .hold{transform:scaleX(1);transition:transform 1s linear}
body.rm .exitbtn.holding .hold{transition:transform 1s linear!important}
.exitbtn:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
body.hc .exitbtn{background:#000;border-color:#fff;color:#fff}
/* Raus-Fenster */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;padding:20px 16px calc(var(--safe-b) + var(--dock) + 4px);background:rgba(6,6,20,.74);animation:fadein .2s}
.sheet[hidden]{display:none}
.sheet .card{max-width:440px;width:100%;margin:0}
.sheet .btn small{display:block;font-size:.8rem;font-weight:400;opacity:.8;margin-top:2px}
.sheet-tip{margin:12px 0 0}
@media (min-height:640px){.sheet{align-items:center}}
ul.ground{margin:0;padding-left:1.2em;line-height:1.7}
ul.ground li{margin:4px 0}
.sheet .btn{flex-direction:column;gap:0}
.tlinks .link.soft{padding:10px 6px;font-size:.92rem}