/* Advanced Mystics – Vorschau-Bühne der Veröffentlichungen (roadmap.js)
   Animiert werden nur transform/opacity auf HTML-Elementen (läuft auf der GPU); ausgeblendete Szenen ruhen. */

/* ───────── Aufbau: zwei Kapitel („In Entwicklung“, „Geplant“) – je Liste links, eigene Bühne rechts ───────── */
.road2{display:block;max-width:1180px}
.road-chap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);align-items:start}
.road-chap+.road-chap{margin-top:clamp(70px,8vw,110px)}
.steps li[data-scene]{cursor:pointer;outline:none}
.steps li[data-scene]::after{content:"";position:absolute;inset:-9px -12px 11px -9px;border-radius:14px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.09),rgba(var(--gold-rgb),.02));border:1px solid rgba(var(--gold-rgb),.28)}
.steps.soft li[data-scene]::after{background:linear-gradient(90deg,rgba(var(--lav-rgb),.12),rgba(var(--lav-rgb),.02));border-color:rgba(var(--lav-rgb),.35)}
.steps li[data-scene].on::after,.steps li[data-scene]:focus-visible::after{opacity:1}
.steps li[data-scene]:hover h4{color:var(--gold)}
.steps.soft li[data-scene]:hover h4{color:#fff}
.steps li[data-scene] i{transition:transform .35s var(--ease)}
.steps li[data-scene].on i{transform:scale(1.35)}

.road-stage{position:sticky;top:92px;padding:16px 16px 18px;border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(160deg,rgba(21,19,79,.86),rgba(var(--bg-rgb),.84));box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.rs-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 4px 12px}
.rs-hint{font-size:10.5px;color:var(--mute);letter-spacing:.04em;text-align:right;line-height:1.4}
.rs-view{position:relative;height:clamp(270px,25vw,330px);border-radius:18px;overflow:hidden;container-type:size;
  background:radial-gradient(80% 90% at 50% 38%,rgba(30,26,104,.7),rgba(6,5,26,.92));border:1px solid rgba(var(--gold-rgb),.1)}
.rs-text{padding:14px 6px 2px;min-height:86px}
.rs-text h4{font-weight:300;font-size:14px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.rs-text p{font-family:var(--serif);font-size:18px;line-height:1.5;color:#d9d6f3}
.rs-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.rs-dots button{width:7px;height:7px;border-radius:99px;background:rgba(var(--lav-rgb),.35);transition:all .35s var(--ease)}
.rs-dots button.on{width:22px;background:var(--gold)}
.rs-chip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  color:var(--gold);padding:6px 12px;border:1px solid rgba(var(--gold-rgb),.35);border-radius:99px;background:rgba(var(--bg-rgb),.6)}
.rs-chip.soft{color:var(--lav-hi);border-color:rgba(var(--lav-rgb),.4)}
.sc{position:absolute;inset:0}
.road-stage:not(.live) .sc *{animation-play-state:paused!important}
.sc[hidden]{display:none}
.sc-cycles{position:relative;inset:auto}

/* Kapitel-Modus (Desktop; .pinned setzt roadmap.js): die Bühne steht, Scrollen schaltet Punkt für Punkt weiter.
   Nach dem letzten Punkt geht „In Entwicklung“ samt Vorschau nach oben weg – erst danach kommt „Geplant“ von unten. */
.road2.pinned{margin-top:0}
.road2.pinned .road-pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
  padding-top:max(84px,calc(50vh - 260px))}
.road2.pinned .road-chap{grid-area:1/1;margin:0;transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.road2.pinned .road-chap:not(.cur){opacity:0;visibility:hidden;pointer-events:none}
.road2.pinned .road-chap.past{transform:translateY(-48px)}
.road2.pinned .road-chap.next{transform:translateY(64px)}
.road2.pinned .road-chap.cur{transition:opacity .8s var(--ease) .3s,transform 1s var(--ease) .3s,visibility 0s}
.road2.pinned .road-stage{position:relative;top:auto}
.road2.pinned+.plans{margin-top:0}
.road2.pinned .cy-side{max-height:min(460px,100vh - 360px)}             /* Cycles (höchste Szene) passt auch auf niedrige Bildschirme */

/* ───────── 1 · Private Offline-KI ───────── */
.sc-offline{--cx:38%;--cy:44%;--zr:min(122px,36cqh)}
.of-zone{position:absolute;left:var(--cx);top:var(--cy);width:calc(var(--zr) * 2);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  border:1px dashed rgba(var(--gold-rgb),.45);background:radial-gradient(circle,rgba(var(--gold-rgb),.06),transparent 70%)}
.of-zone i{position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.55);animation:ofPulse 3.6s ease-out infinite}
@keyframes ofPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.2);opacity:0}}
.of-laptop{position:absolute;left:var(--cx);top:calc(var(--cy) + 4%);width:min(150px,44cqh);transform:translate(-50%,-50%);stroke:rgba(var(--lav-rgb),.9);stroke-width:2}
.of-screen{position:absolute;left:var(--cx);top:calc(var(--cy) - 1%);width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 30px 6px rgba(var(--gold-rgb),.35)}
.of-screen img{width:100%;height:100%}
.of-orbit{position:absolute;left:var(--cx);top:calc(var(--cy) - 1%);width:0;height:0;animation:spin 9s linear infinite}
.of-orbit i{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px rgba(var(--gold-rgb),.7);transform:rotate(var(--o)) translateX(min(62px,19cqh))}
.of-orbit i:nth-child(1){--o:0deg}.of-orbit i:nth-child(2){--o:60deg}.of-orbit i:nth-child(3){--o:120deg}.of-orbit i:nth-child(4){--o:180deg}.of-orbit i:nth-child(5){--o:240deg}.of-orbit i:nth-child(6){--o:300deg}
.of-try i{position:absolute;left:var(--cx);top:calc(var(--cy) - 1%);width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.6);
  opacity:0;animation:ofTry 3.6s ease-in-out infinite}
.of-try i:nth-child(2){animation-delay:1.2s}.of-try i:nth-child(3){animation-delay:2.4s}
@keyframes ofTry{0%{transform:rotate(var(--a)) translateX(0);opacity:0}15%{opacity:1}46%{transform:rotate(var(--a)) translateX(calc(var(--zr) - 6px));opacity:1}
  52%{transform:rotate(var(--a)) translateX(calc(var(--zr) - 14px)) scale(2.4);opacity:.25}100%{transform:rotate(var(--a)) translateX(0);opacity:0}}
.of-cloud{position:absolute;right:8%;top:14%;width:min(108px,22cqw);text-align:center;color:var(--lav);opacity:.6}
.of-cloud svg{width:100%;stroke:currentColor;stroke-width:1.6}
.of-cloud .x{stroke:#e7a08f;stroke-width:1.8}
.of-cloud span{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-top:4px}

/* ───────── 2 · Tägliche Prognose ───────── */
.sc-prognose{--W:min(300px,64cqw)}
.pg-sky{position:absolute;left:50%;top:10%;width:var(--W);aspect-ratio:2/1;transform:translateX(-50%);overflow:hidden}
.pg-arc{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(var(--gold-rgb),.38)}
.pg-ground{position:absolute;left:-12%;right:-12%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.65),transparent)}
.pg-sun{position:absolute;left:50%;bottom:0;width:0;height:0;animation:pgSun 4s ease-in-out infinite}
.pg-sun i{position:absolute;left:-9px;top:calc(var(--W) / -2 - 9px);width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle,#fff6e0 0 30%,var(--gold) 55%,rgba(var(--gold-rgb),0) 72%);box-shadow:0 0 26px 8px rgba(var(--gold-rgb),.45)}
@keyframes pgSun{from{transform:rotate(-74deg)}to{transform:rotate(74deg)}}
.pg-week{position:absolute;left:50%;top:52%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(7,34px);gap:6px}
.pg-week span{position:relative;z-index:1;display:grid;place-items:center;height:30px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pg-sel{position:absolute;left:0;top:0;width:34px;height:30px;border-radius:99px;border:1px solid rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.14);
  box-shadow:0 0 16px -2px rgba(var(--gold-rgb),.5);animation:pgSel 12s var(--ease) infinite}
@keyframes pgSel{0%,30%{transform:translateX(0)}33.3%,63%{transform:translateX(80px)}66.6%,97%{transform:translateX(160px)}100%{transform:translateX(0)}}
.pg-msgs{position:absolute;left:6%;right:6%;top:69%;height:48px}
.pg-msgs p{position:absolute;inset:0;text-align:center;font-family:var(--serif);font-size:clamp(16px,2.2cqw,19px);color:#e6e2fa;opacity:0;animation:pgMsg 12s infinite}
.pg-msgs p em{display:block;font-family:var(--sans);font-style:normal;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.pg-msgs p:nth-child(2){animation-delay:4s}.pg-msgs p:nth-child(3){animation-delay:8s}
@keyframes pgMsg{0%{opacity:0;transform:translateY(6px)}4%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-4px)}}

/* ───────── 3 + 6 · Gespräch ───────── */
.tk-orb{position:absolute;left:23%;top:42%;width:min(88px,28cqh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(var(--gold-rgb),.22),transparent 70%)}
.tk-orb img{width:100%;height:100%}
.tk-orb i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.5);animation:tkRing 2.4s ease-out infinite}
.tk-orb i.r2{animation-delay:1.2s}
@keyframes tkRing{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.tk-wave{position:absolute;left:23%;top:70%;transform:translateX(-50%);display:flex;gap:4px;height:30px;align-items:center;animation:tkVoice 10s infinite}
.tk-wave i{width:3px;height:100%;border-radius:2px;background:linear-gradient(var(--gold),var(--lav));transform:scaleY(.25);animation:tkBar .7s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.13s)}
@keyframes tkBar{to{transform:scaleY(1)}}
@keyframes tkVoice{0%,4%{opacity:.25}8%,26%{opacity:1}30%,48%{opacity:.25}52%,84%{opacity:1}88%,100%{opacity:.25}}
.tk-chat{position:absolute;left:43%;right:5%;top:12%;display:flex;flex-direction:column;gap:10px}
.bub{max-width:100%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.45;opacity:0}
.bub.me{align-self:flex-end;max-width:84%;color:#e9e6ff;background:rgba(var(--lav-rgb),.18);border:1px solid rgba(var(--lav-rgb),.38);border-bottom-right-radius:4px;animation:tkMe 10s infinite}
.bub.or{align-self:flex-start;display:grid;color:#f3ead5;background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.35);border-bottom-left-radius:4px;
  font-family:var(--serif);font-size:15.5px;line-height:1.4;animation:tkOr 10s infinite}
.bub.or>span{grid-area:1/1}
.bub .typing{display:flex;gap:4px;align-items:center;animation:tkType 10s infinite}
.bub .typing i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:tkDot 1s ease-in-out infinite}
.bub .typing i:nth-child(2){animation-delay:.15s}.bub .typing i:nth-child(3){animation-delay:.3s}
.bub .txt{opacity:0;animation:tkTxt 10s infinite}
@keyframes tkMe{0%,3%{opacity:0;transform:translateY(8px)}8%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tkOr{0%,30%{opacity:0;transform:translateY(8px)}34%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tkType{0%,49%{opacity:1}52%,100%{opacity:0}}
@keyframes tkTxt{0%,50%{opacity:0}54%,100%{opacity:1}}
@keyframes tkDot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-3px);opacity:1}}

.pk-phone{position:absolute;left:50%;top:47%;width:min(200px,48cqw);height:82cqh;transform:translate(-50%,-50%);border:1.5px solid rgba(var(--lav-rgb),.55);border-radius:28px;
  background:linear-gradient(180deg,rgba(14,12,52,.92),rgba(6,5,26,.95));box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 6px rgba(var(--lav-rgb),.06)}
.pk-notch{position:absolute;left:50%;top:9px;width:54px;height:6px;margin-left:-27px;border-radius:9px;background:rgba(var(--lav-rgb),.35)}
.tk-chat.in-phone{left:12px;right:12px;top:30px;gap:8px}
.tk-chat.in-phone .bub{font-size:11.5px;padding:8px 11px}
.tk-chat.in-phone .bub.or{font-size:13.5px}
.pk-lock{position:absolute;left:calc(50% + min(100px,24cqw) - 14px);top:8%;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--gold);box-shadow:0 0 22px 2px rgba(var(--gold-rgb),.5)}
.pk-lock svg{width:18px;stroke:#1a1440;stroke-width:2}
.pk-off{position:absolute;left:7%;top:12%;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--lav-hi);opacity:.8;width:90px;text-align:center}
.pk-off svg{width:30px;stroke:currentColor;stroke-width:1.6}
.pk-off .x{stroke:#e7a08f}
.pk-off span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;line-height:1.5}
.sc-privatki .rs-chip{left:auto;right:12px;transform:none}

/* ───────── 7 · Partner und Gruppen ───────── */
.pt-wheel{position:absolute;width:min(116px,36cqh);aspect-ratio:1;transform:translate(-50%,-50%);text-align:center}
.pt-wheel.a{left:28%;top:40%;animation:ptA 9s var(--ease) infinite}
.pt-wheel.b{left:72%;top:40%;animation:ptB 9s var(--ease) infinite}
.pt-wheel.c{left:50%;top:74%;width:min(92px,28cqh);animation:ptC 9s var(--ease) infinite}
.pt-rot{width:100%;height:100%;animation:spin 40s linear infinite}
.pt-wheel.b .pt-rot{animation-direction:reverse}
.pt-wheel svg{width:100%;height:100%;fill:none;stroke:rgba(var(--gold-rgb),.65);stroke-width:1}
.pt-wheel svg .dot{stroke:rgba(var(--lav-rgb),.5);stroke-dasharray:1.5 3}
.pt-wheel svg .pl{fill:var(--gold);stroke:none}
.pt-wheel.b svg .pl{fill:var(--lav-hi)}
.pt-wheel span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--lav-hi);white-space:nowrap}
.pt-links{position:absolute;inset:0}
.pt-links svg{width:100%;height:100%}
.pt-links line{stroke:rgba(var(--gold-rgb),.55);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:4 5}
.pt-links.ab{animation:ptLAB 9s infinite}
.pt-links.c{animation:ptLC 9s infinite}
@keyframes ptA{0%{opacity:0;transform:translate(calc(-50% - 36px),-50%)}16%,88%{opacity:1;transform:translate(-50%,-50%)}97%,100%{opacity:0;transform:translate(-50%,-50%)}}
@keyframes ptB{0%{opacity:0;transform:translate(calc(-50% + 36px),-50%)}16%,88%{opacity:1;transform:translate(-50%,-50%)}97%,100%{opacity:0;transform:translate(-50%,-50%)}}
@keyframes ptC{0%,40%{opacity:0;transform:translate(-50%,calc(-50% + 28px))}55%,88%{opacity:1;transform:translate(-50%,-50%)}97%,100%{opacity:0;transform:translate(-50%,-50%)}}
@keyframes ptLAB{0%,20%{opacity:0}30%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes ptLC{0%,56%{opacity:0}66%,88%{opacity:1}96%,100%{opacity:0}}

/* ───────── 8 · Pro-Version ───────── */
.pr-team{position:absolute;right:6%;top:9%;display:flex;align-items:center}
.pr-team i{display:grid;place-items:center;width:26px;height:26px;margin-left:-7px;border-radius:50%;font-style:normal;font-size:10px;color:#1a1440;
  background:var(--gold);border:2px solid #0b0a30}
.pr-team i:nth-child(2){background:var(--lav-hi)}.pr-team i:nth-child(3){background:#e7b7a3}
.pr-team span{margin-left:8px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lav-hi)}
.pr-app{position:absolute;left:50%;top:55%;width:min(450px,88cqw);height:min(200px,62cqh);transform:translate(-50%,-50%);display:grid;grid-template-columns:38% 1fr;
  border:1px solid rgba(var(--lav-rgb),.35);border-radius:16px;background:rgba(6,5,26,.8);overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.8)}
.pr-side{position:relative;padding:12px 10px;border-right:1px solid rgba(var(--lav-rgb),.2)}
.pr-side b{display:block;font-weight:400;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 8px 4px}
.pr-row{position:relative;z-index:1;display:flex;align-items:center;gap:8px;height:28px;padding:0 4px;font-size:11px;color:#d6d3f0}
.pr-row i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-style:normal;font-size:8.5px;background:rgba(var(--lav-rgb),.3);color:#fff}
.pr-hl{position:absolute;left:6px;right:6px;top:32px;height:28px;border-radius:8px;background:rgba(var(--gold-rgb),.14);border:1px solid rgba(var(--gold-rgb),.4);animation:prHl 8s var(--ease) infinite}
@keyframes prHl{0%,40%{transform:translateY(0)}48%,70%{transform:translateY(28px)}78%,100%{transform:translateY(56px)}}
.pr-main{position:relative;padding:14px 16px}
.pr-title{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lav-hi);margin-bottom:12px}
.pr-title em{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:#fff}
.pr-main .ln{display:block;height:6px;width:var(--w);margin:0 0 9px;border-radius:4px;background:rgba(var(--gold-rgb),.28);transform-origin:0 50%;
  transform:scaleX(0);animation:prLn 8s infinite;animation-delay:calc(var(--d) * .25s)}
@keyframes prLn{0%{transform:scaleX(0)}12%,90%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
.pr-done{position:absolute;left:16px;bottom:12px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#9fe0b8;opacity:0;animation:prDone 8s infinite}
@keyframes prDone{0%,30%{opacity:0;transform:translateY(4px)}36%,90%{opacity:1;transform:none}97%,100%{opacity:0}}

/* ───────── 9 · Weitere Berechnungsformen ───────── */
.mh-count{position:absolute;left:6%;top:9%;z-index:2}
.mh-count span{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--lav-hi)}
.mh-num{height:44px;overflow:hidden}
.mh-strip{animation:mhCount 10s var(--ease) infinite}
.mh-strip b{display:block;height:44px;font-family:var(--sans);font-weight:200;font-size:40px;line-height:44px;color:var(--gold)}
@keyframes mhCount{0%,23%{transform:translateY(0)}27%,48%{transform:translateY(-44px)}52%,73%{transform:translateY(-88px)}77%,96%{transform:translateY(-132px)}100%{transform:translateY(0)}}
.mh-lines{position:absolute;inset:0;width:100%;height:100%}
.mh-lines line{stroke:rgba(var(--lav-rgb),.28);stroke-width:1;vector-effect:non-scaling-stroke}
.mh-t{position:absolute;display:grid;place-items:center;width:38px;height:38px;margin:-19px;border-radius:50%;font-style:normal;font-family:var(--serif);font-size:19px;
  color:var(--lav-hi);border:1px solid rgba(var(--lav-rgb),.38);background:rgba(10,9,40,.85)}
.mh-t.neu{color:#1a1440;background:var(--gold);border-color:transparent;box-shadow:0 0 24px 4px rgba(var(--gold-rgb),.45);opacity:0}
.mh-t.n1{animation:mhN1 10s infinite}.mh-t.n2{animation:mhN2 10s infinite}.mh-t.n3{animation:mhN3 10s infinite}
@keyframes mhN1{0%,24%{opacity:0;transform:scale(0)}28%{opacity:1;transform:scale(1.25)}32%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
@keyframes mhN2{0%,49%{opacity:0;transform:scale(0)}53%{opacity:1;transform:scale(1.25)}57%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
@keyframes mhN3{0%,74%{opacity:0;transform:scale(0)}78%{opacity:1;transform:scale(1.25)}82%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}

/* ───────── 5 · Globus ───────── */
.gl-cv{position:absolute;inset:0;width:100%;height:100%}

/* ───────── 4 · Cycles live ───────── */
.is-cycles .rs-view{height:auto;background:none;border:0;overflow:visible;container-type:normal}
.cy-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,252px);gap:14px;align-items:start}
.cy-mod{position:relative;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 50%,rgba(30,26,104,.55),rgba(6,5,26,.9));border:1px solid rgba(var(--gold-rgb),.12)}
.cy-mod .module-content{position:absolute;inset:0}
.cy-load{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);font-size:12px;letter-spacing:.12em}
.cy-arm{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:6;padding:6px 12px;border-radius:99px;font-size:10px;letter-spacing:.08em;white-space:nowrap;
  color:var(--lav-hi);background:rgba(var(--bg-rgb),.72);border:1px solid rgba(var(--lav-rgb),.35);pointer-events:none;transition:opacity .4s}
.cy-mod.armed .cy-arm{opacity:0}
@media (pointer:coarse){
  .cy-arm{pointer-events:auto;font-size:11px;color:#1a1440;background:var(--gold);border-color:transparent}
  .cy-mod.armed .cy-arm{opacity:1;background:rgba(var(--bg-rgb),.8);color:var(--gold);border-color:rgba(var(--gold-rgb),.5)}
}
.cy-side{max-height:min(460px,72vh);overflow:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin;scrollbar-color:rgba(var(--gold-rgb),.3) transparent}
.cy-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 2px 10px}
.cy-head b{font-weight:400;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cy-head small{font-size:9.5px;color:var(--mute)}
.cy-x{display:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);color:var(--ink)}
.cy-list li{display:grid;grid-template-columns:14px 30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 8px 6px;margin:0 0 6px;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.03);transition:opacity .2s,border-color .2s;cursor:grab}
.cy-list li.off{opacity:.5}
.cy-list li.drag{opacity:.35;border-style:dashed}
.cy-grip{color:var(--mute);font-size:11px;letter-spacing:-2px;text-align:center}
.cy-sw{position:relative;display:block;width:30px;height:17px;cursor:pointer}
.cy-sw input{position:absolute;opacity:0;pointer-events:none}
.cy-sw i{position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.14);transition:background .2s}
.cy-sw i::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .2s}
.cy-sw input:checked+i{background:var(--gold)}
.cy-sw input:checked+i::after{transform:translateX(13px);background:#1a1440}
.cy-sw input:focus-visible+i{outline:1px solid var(--gold);outline-offset:2px}
.cy-name{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;color:#e6e3fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cy-name i{flex:none;width:9px;height:9px;border-radius:50%}
.cy-mv{display:flex;gap:2px}
.cy-mv button{width:20px;height:20px;border-radius:6px;font-size:11px;color:var(--mute);border:1px solid transparent}
.cy-mv button:hover{color:var(--gold);border-color:var(--line)}
.cy-wl{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.cy-wl input{width:100%;appearance:none;-webkit-appearance:none;height:3px;border-radius:9px;background:rgba(255,255,255,.14);outline:0}
.cy-wl input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18)}
.cy-wl input::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--gold)}
.cy-birth{display:block;margin:10px 2px 8px;font-size:10px;letter-spacing:.06em;color:var(--mute)}
.cy-birth span{display:block;margin-bottom:5px}
.cy-birth input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:13px;padding:7px 10px;border-radius:10px;color-scheme:dark}
.cy-tools{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.cy-tools button{padding:6px 11px;border-radius:99px;border:1px solid transparent;font-size:10.5px;letter-spacing:.06em;color:var(--ink);
  background:var(--btn-glass) padding-box,var(--btn-rim) border-box;box-shadow:var(--btn-depth-s);transition:color .3s,box-shadow .3s,transform .3s var(--ease)}
@media (hover:hover){.cy-tools button:hover{color:var(--gold);transform:translateY(-1px);box-shadow:var(--btn-glow-s)}}
.cy-tools button:active{transform:translateY(1px) scale(.97);transition-duration:.12s}
.cy-hint{font-size:10.5px;line-height:1.55;color:var(--mute);margin:0 2px}
/* Großansicht */
.cy-backdrop{position:fixed;inset:0;z-index:955;background:rgba(4,3,18,.78);opacity:0;transition:opacity .3s}
.cy-backdrop.on{opacity:1}
.cy-app.full{position:fixed;left:50%;top:50%;z-index:960;width:min(1240px,96vw);height:min(94vh,960px);transform:translate(-50%,-50%);padding:18px;
  grid-template-columns:minmax(0,1fr) 270px;background:rgba(var(--bg-rgb),.97);border:1px solid var(--line);border-radius:24px;box-shadow:0 40px 120px -20px #000}
.cy-app.full .cy-mod{width:auto;height:calc(min(94vh,960px) - 36px);max-width:100%;justify-self:center}
.cy-app.full .cy-side{max-height:calc(min(94vh,960px) - 36px)}
.cy-app.full .cy-x{display:block}
.cy-app.full .cy-big{display:none}

@media (max-width:1000px){
  .road-chap{grid-template-columns:1fr}
  .road-stage{position:relative;top:auto;order:-1}
}
@media (max-width:760px){
  .cy-app{grid-template-columns:1fr}
  .cy-side{max-height:none}
  .cy-app.full{grid-template-columns:1fr;overflow:auto;width:100vw;height:100vh;border-radius:0}
  .cy-app.full .cy-mod{height:auto;width:100%}
  .pg-week{grid-template-columns:repeat(7,30px);gap:4px}
  @keyframes pgSel{0%,30%{transform:translateX(0)}33.3%,63%{transform:translateX(68px)}66.6%,97%{transform:translateX(136px)}100%{transform:translateX(0)}}
  .pg-sel{width:30px}
  .tk-chat{left:40%}
}
@media (prefers-reduced-motion:reduce){
  .road2.pinned .road-chap{transition:none!important}
  .sc *{animation:none!important}
  .bub,.bub .txt,.pt-wheel,.pt-links,.pr-done,.mh-t.neu,.pg-msgs p:first-child{opacity:1!important}
  .bub .typing{display:none}
  .pr-main .ln{transform:none}
}