@font-face{font-family:"Fraunces";src:url("fonts/fraunces-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-900.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lexend";src:url("fonts/lexend-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lexend";src:url("fonts/lexend-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* Tokens: Watte, Nachttinte, Filzgrau + je Welt eine Lichtfarbe */
:root{--watte:#F7F8FC;--tinte:#1A1D33;--filz:#4A4A52;--matt:#6B6E80;--welt:#8FA2FF;--welt-tief:#4655B8;--grund:#EEF1FF;
  --r:22px;--feder:cubic-bezier(.34,1.56,.64,1);--sanft:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;background:var(--grund);color:var(--tinte);font:400 18px/1.5 Lexend,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--welt-tief);outline-offset:3px;border-radius:14px}
[hidden]{display:none!important}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf: Wortmarke + Fortschritt */
.kopf{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:var(--grund)}
.marke{justify-self:center;font:900 26px/1 Fraunces,Georgia,serif;letter-spacing:-.02em;text-decoration:none;color:var(--tinte)}
.marke span{color:var(--welt-tief)}
.zurueck{width:44px;height:44px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.zurueck.da{opacity:1;pointer-events:auto}
.zurueck svg{width:22px;height:22px;stroke:var(--tinte);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.leiste{grid-column:1/-1;height:6px;border-radius:6px;background:rgba(26,29,51,.08);overflow:hidden}
.leiste i{display:block;height:100%;width:0;border-radius:6px;background:var(--welt);transition:width .6s var(--sanft)}

/* Bühne: Hyp + Schritt */
.buehne{max-width:1120px;margin:0 auto;padding:0 20px 40px;display:grid;gap:4px}
.hyp{position:relative;width:min(230px,52vw);aspect-ratio:1;margin:0 auto;background:var(--grund)}
.hyp video,.hyp img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.schritt{width:100%;max-width:560px;margin:0 auto}
.rein,.rein *{transition:none!important}

h1,.frage{font:900 clamp(32px,8.6vw,54px)/1.02 Fraunces,Georgia,serif;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.sub{margin:0 0 22px;color:var(--filz);font-size:17px;max-width:30em}

/* Antworten: ganze Zeile tippbar */
.wahl{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.opt{width:100%;display:flex;align-items:center;gap:14px;min-height:62px;padding:14px 18px;border:2px solid transparent;border-radius:var(--r);background:#fff;text-align:left;font-size:18px;box-shadow:0 1px 0 rgba(26,29,51,.06),0 10px 24px -18px rgba(26,29,51,.4);transition:transform .35s var(--feder),border-color .2s,background .2s}
.opt:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--welt) 55%,transparent)}
.opt:active{transform:scale(.98)}
.opt .punkt{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid color-mix(in srgb,var(--tinte) 25%,transparent);display:grid;place-items:center;transition:all .2s}
.opt[aria-pressed="true"]{border-color:var(--welt-tief);background:color-mix(in srgb,var(--welt) 14%,#fff)}
.opt[aria-pressed="true"] .punkt{border-color:var(--welt-tief);background:var(--welt-tief)}
.opt[aria-pressed="true"] .punkt::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.mehr .opt .punkt{border-radius:7px}

.feld{width:100%;min-height:62px;padding:16px 20px;border:2px solid color-mix(in srgb,var(--tinte) 14%,transparent);border-radius:var(--r);background:#fff;font-size:20px;outline:none;transition:border-color .2s}
.feld:focus{border-color:var(--welt-tief)}
textarea.feld{min-height:120px;resize:vertical;line-height:1.4}

.los{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;margin-top:16px;padding:16px 24px;border:0;border-radius:999px;background:var(--tinte);color:#fff;font-weight:700;font-size:19px;box-shadow:0 14px 30px -16px var(--tinte);transition:transform .35s var(--feder),opacity .2s}
.los:hover{transform:translateY(-2px)}
.los:disabled{opacity:.35;pointer-events:none}
.los--welt{background:var(--welt-tief);box-shadow:0 14px 30px -14px var(--welt-tief)}
.leise{display:block;margin:14px auto 0;padding:8px 12px;border:0;background:none;color:var(--matt);font-size:15px;text-decoration:underline;text-underline-offset:3px}

/* Stimme: zwei große Kacheln */
.stimmen{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stimmen .opt{flex-direction:column;justify-content:center;min-height:120px;text-align:center;font:900 30px/1 Fraunces,serif}
.stimmen .opt small{font:400 14px/1.3 Lexend,sans-serif;color:var(--matt)}
.stimmen .punkt{display:none}

/* Hyp spricht: Sprechblase aus Filz */
.blase{position:relative;margin:6px 0 18px;padding:22px 24px;border-radius:28px;background:#fff;font:700 clamp(26px,6.4vw,38px)/1.12 Fraunces,serif;box-shadow:0 18px 40px -24px rgba(26,29,51,.45)}
.blase::before{content:"";position:absolute;inset:8px;border:2px dashed color-mix(in srgb,var(--welt) 70%,transparent);border-radius:22px;pointer-events:none}
.blase::after{content:"";position:absolute;top:-12px;left:50%;width:26px;height:26px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:4px}

/* Plan = Filz-Etikett mit Naht */
.etikett{position:relative;margin:4px 0 18px;padding:22px 22px 18px;border-radius:26px;background:var(--welt);color:var(--tinte)}
.etikett::before{content:"";position:absolute;inset:7px;border:2px dashed rgba(255,255,255,.75);border-radius:20px;pointer-events:none}
.etikett h2{margin:0 0 12px;font:900 28px/1.05 Fraunces,serif}
.etikett dl{margin:0;display:grid;gap:10px}
.etikett div{display:grid;gap:1px}
.etikett dt{font-size:13px;opacity:.75}
.etikett dd{margin:0;font-weight:700;font-size:18px;line-height:1.3}
body[data-welt="rage"] .etikett,body[data-welt="schlaf"] .etikett{color:#fff}

.klein{font-size:14px;color:var(--matt);margin:12px 0 0}
.klein a{color:inherit}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:15px;color:var(--filz)}
.check input{width:22px;height:22px;margin-top:1px;accent-color:var(--welt-tief);flex:none}

/* Erstellung: Spirale füllt den Schirm */
.spirale{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--grund);visibility:hidden}
.spirale canvas{position:absolute;inset:0;width:100%;height:100%}
.spirale__mitte{position:relative;display:grid;justify-items:center;gap:10px;text-align:center;padding:24px;max-width:420px}
.spirale__hyp{width:160px;aspect-ratio:1;border-radius:50%;background:var(--grund);overflow:hidden;box-shadow:0 0 0 10px var(--grund)}
.spirale__hyp img,.spirale__hyp video{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.spirale__text{font:900 30px/1.05 Fraunces,serif;margin:6px 0 0;background:var(--grund);padding:4px 12px;border-radius:12px}
.spirale__schritt{margin:0;color:var(--filz);background:var(--grund);padding:2px 10px;border-radius:10px;min-height:1.5em}
.spirale__zahl{font:700 15px/1 Lexend;color:var(--welt-tief);background:var(--grund);padding:4px 10px;border-radius:10px;font-variant-numeric:tabular-nums}

/* Spieler */
.spieler{display:grid;justify-items:center;gap:10px;margin:0 0 26px;padding:24px 18px 20px;border-radius:30px;background:#fff;box-shadow:0 24px 50px -30px rgba(26,29,51,.5);text-align:center}
.spieler__titel{margin:0;font:900 26px/1.1 Fraunces,serif;text-wrap:balance}
.kreis{position:relative;width:132px;aspect-ratio:1;display:grid;place-items:center}
.kreis svg.ring{position:absolute;inset:0;transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke-width:6}
.ring .bahn{stroke:color-mix(in srgb,var(--welt) 22%,#fff)}
.ring .voll{stroke:var(--welt-tief);stroke-linecap:round;stroke-dasharray:364.4;stroke-dashoffset:364.4}
.play{width:96px;height:96px;border:0;border-radius:50%;background:var(--welt-tief);display:grid;place-items:center;box-shadow:0 12px 30px -10px var(--welt-tief);transition:transform .35s var(--feder)}
.play:hover{transform:scale(1.05)}
.play svg{width:36px;height:36px;fill:#fff}
.play .i-pause{display:none}.play.laeuft .i-pause{display:block}.play.laeuft .i-play{display:none}
.play:not(.laeuft) .i-play{transform:translateX(3px)}
.spieler__phase{margin:0;font:400 italic 20px/1.2 Fraunces,serif;color:var(--welt-tief);min-height:1.2em}
.spieler__zeit{margin:0;font-size:14px;color:var(--matt);font-variant-numeric:tabular-nums}
.mitlesen{margin:6px 0 0;font-size:17px;line-height:1.5;color:var(--filz);max-width:32em;min-height:0}
.mitlesen:empty{display:none}

/* Angebot */
.angebot h2{font:900 clamp(30px,7vw,44px)/1.04 Fraunces,serif;margin:0 0 14px;text-wrap:balance}
.vorteile{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.vorteile li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:17px}
.vorteile li::before{content:"";width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--welt);box-shadow:inset 0 0 0 4px #fff,0 0 0 2px var(--welt)}
.anker{margin:0 0 18px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.6);font-size:15px;color:var(--filz)}
.preis{display:grid;gap:4px;margin:0 0 4px}
.preis__heute{font:900 46px/1 Fraunces,serif}
.preis__heute small{font:700 17px/1 Lexend;color:var(--filz);margin-left:6px}
.preis__dann{margin:0;font-size:15px;color:var(--filz)}
.tarife{display:grid;gap:10px;margin:0 0 6px}
.tarif{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center;padding:16px 18px;border:2px solid transparent;border-radius:var(--r);background:#fff;text-align:left;box-shadow:0 10px 24px -18px rgba(26,29,51,.4)}
.tarif[aria-checked="true"]{border-color:var(--welt-tief);background:color-mix(in srgb,var(--welt) 12%,#fff)}
.tarif .punkt{width:22px;height:22px;border-radius:50%;border:2px solid color-mix(in srgb,var(--tinte) 25%,transparent)}
.tarif[aria-checked="true"] .punkt{border:7px solid var(--welt-tief)}
.tarif b{display:block;font-size:17px}
.tarif span{font-size:14px;color:var(--matt)}
.tarif em{font:900 22px/1 Fraunces,serif;font-style:normal;white-space:nowrap}

.fehler{padding:16px;border-radius:18px;background:#fff;border:2px solid #E5484D;color:var(--tinte)}

.fuss{max-width:560px;margin:0 auto;padding:10px 20px calc(env(safe-area-inset-bottom) + 30px);font-size:13px;line-height:1.5;color:var(--matt)}
.fuss p{margin:0 0 6px}
.fuss a{color:inherit;text-underline-offset:2px}

.dialog{position:fixed;inset:0;z-index:30;display:grid;place-items:end center;padding:16px;background:rgba(26,29,51,.45)}
.dialog[hidden]{display:none}
.dialog__box{width:100%;max-width:440px;padding:26px 22px 22px;border-radius:28px;background:#fff;text-align:center}
.dialog__box h2{font:900 30px/1.05 Fraunces,serif;margin:0 0 8px}

/* Startseite: drei Hyps */
.wahl-welten{display:grid;gap:14px;max-width:1080px;margin:0 auto;padding:0 20px 30px}
.welt-karte{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:14px;padding:12px 18px 12px 8px;border-radius:28px;text-decoration:none;color:var(--tinte);transition:transform .4s var(--feder)}
.welt-karte:hover{transform:translateY(-3px) rotate(-.6deg)}
.welt-karte .hyp{width:110px;margin:0}
.welt-karte b{display:block;font:900 26px/1.05 Fraunces,serif}
.welt-karte span{font-size:15px;color:var(--filz)}
body[data-welt="start"],body[data-welt="seite"]{--grund:#F7F8FC}
.start-kopf{max-width:1080px;margin:0 auto;padding:18px 20px 18px}
.start-kopf h1{font-size:clamp(40px,9vw,76px)}

@media (min-width:900px){
  .buehne{grid-template-columns:minmax(300px,440px) minmax(0,560px);justify-content:center;align-items:start;gap:56px;padding-top:24px}
  .hyp{width:100%;max-width:420px;position:sticky;top:110px}
  .schritt{margin:0;padding-top:36px}
  .kopf{grid-template-columns:44px 1fr 44px;max-width:1120px;margin:0 auto}
  body .kopf{background:var(--grund)}
  .wahl-welten{grid-template-columns:repeat(3,1fr)}
  .welt-karte{grid-template-columns:1fr;justify-items:center;text-align:center;padding:10px 18px 26px}
  .welt-karte .hyp{width:min(280px,100%);position:relative;top:auto}
  .dialog{place-items:center}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

/* Kasse: Blatt mit eingebettetem Stripe (Handy von unten, Desktop von rechts) */
.kasse-offen,.kasse-offen body{overflow:hidden}
.kasse{position:fixed;inset:0;z-index:40}
.kasse__grund{position:absolute;inset:0;background:color-mix(in srgb,var(--tinte) 38%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.kasse__blatt{position:absolute;left:0;right:0;bottom:0;max-height:94svh;overflow:auto;overscroll-behavior:contain;padding:26px 20px calc(env(safe-area-inset-bottom) + 24px);background:#fff;border-radius:30px 30px 0 0;box-shadow:0 -20px 60px -20px rgba(26,29,51,.35)}
.kasse__blatt::before{content:"";position:absolute;top:9px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:5px;background:rgba(26,29,51,.14)}
.kasse__zu{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:var(--grund);display:grid;place-items:center}
.kasse__zu svg{width:20px;height:20px;stroke:var(--tinte);stroke-width:2.4;stroke-linecap:round;fill:none}
.kasse__kopf{display:flex;gap:14px;align-items:center;margin:4px 52px 14px 0}
.kasse__kopf h2{margin:2px 0 0;font:900 clamp(24px,6.4vw,30px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.015em}
.kasse__hyp{flex:none;width:76px;height:76px;border-radius:50%;background:var(--grund);overflow:hidden}
.kasse__hyp img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.kasse__zeilen{margin:0 0 10px;padding:14px 18px;border-radius:20px;background:var(--grund)}
.kasse__zeilen div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.kasse__zeilen div+div{border-top:1px dashed color-mix(in srgb,var(--welt) 60%,transparent)}
.kasse__zeilen dt{color:var(--filz)}
.kasse__zeilen dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.kasse__zeilen div:first-child dd{color:var(--welt-tief);font-size:20px}
.kasse__fuss{margin:0 0 16px;font-size:14px;color:var(--matt)}
.kasse__fuss a,.kasse__stripe a{color:var(--welt-tief)}
.kasse__fehler{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#FFF0EE;color:#8A2A1B;font-size:15px}
.kasse__stripe{min-height:420px}
.kasse__laden{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 0;color:var(--matt);text-align:center}
.kasse__laden span{width:34px;height:34px;border-radius:50%;border:3px solid var(--grund);border-top-color:var(--welt-tief);animation:kreisel 1s linear infinite}
@keyframes kreisel{to{transform:rotate(360deg)}}
@media (min-width:900px){
  .kasse__blatt{left:auto;top:0;width:min(560px,46vw);max-height:none;border-radius:34px 0 0 34px;padding:34px 34px 34px}
  .kasse__blatt::before{display:none}
}
@media (prefers-reduced-motion:reduce){.kasse__laden span{animation:none}}

/* Danke nach Stripe */
.danke{max-width:34em;margin:0 auto;text-align:center}
.danke h1{margin:6px 0 12px}
.danke .sub{margin:0 auto 14px}
.danke .klein a{color:var(--welt-tief)}