/*
  skepty.app – Skepty-Nacht, als Website. Farben, Schriften und Schatten wie in
  der App (src/theme/tokens.ts). Farbe hat Bedeutung: Lime = du bist dran /
  geschafft, Violett = Zweifel und Skepty. Keine Verläufe. Der harte Schatten
  nur auf Spielteilen, die man anfassen kann.
*/

@font-face{font-family:Bricolage;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Bricolage;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
/* Ersatzschriften mit angepassten Maßen, damit beim Nachladen nichts springt. */
@font-face{font-family:"Bricolage Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");font-weight:700 800;size-adjust:94%;ascent-override:100%;descent-override:28%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");size-adjust:107%;ascent-override:90%;descent-override:22.5%;line-gap-override:0%}

:root{
  color-scheme:dark;
  --room:#16122B;
  --card:#231D42;
  --well:#322A5A;
  --stage:#0D0A1C;
  --text:#FFFFFF;
  --muted:#ADA6CC;
  --lime:#D4FF3A;
  --violet:#6E3BFF;
  --violet-text:#B9A3FF;
  --on-violet-muted:#ECE6FF;
  --ink:#111216;
  --shadow:#07050F;
  --display:Bricolage,"Bricolage Fallback",system-ui,sans-serif;
  --body:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter-l:max(20px,env(safe-area-inset-left));
  --gutter-r:max(20px,env(safe-area-inset-right));
  --head:64px;
  --head-h:calc(var(--head) + env(safe-area-inset-top));
  --section:clamp(88px,11vw,168px);
  --ease-out:cubic-bezier(.33,1,.68,1);
}
@media (min-width:600px){:root{--gutter-l:max(32px,env(safe-area-inset-left));--gutter-r:max(32px,env(safe-area-inset-right))}}
@media (min-width:960px){:root{--head:72px}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px)}
body{background:var(--room);color:var(--text);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100vh}
@media (min-width:960px){body{font-size:19px}}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol,dl{list-style:none}
figure{margin:0}
:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:6px}
.peak:not([data-state="wait"]):not([data-outcome="nope"]) :focus-visible{outline-color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gutter-l);top:-100px;z-index:100;background:var(--text);color:var(--ink);padding:12px 16px;border-radius:14px;font-weight:600;text-decoration:none}
.skip:focus{top:max(12px,env(safe-area-inset-top))}

.wrap{width:100%;max-width:calc(1280px + var(--gutter-l) + var(--gutter-r));margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}

/* Text --------------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;text-wrap:balance}
h2{font-size:clamp(44px,9.6vw,112px);line-height:.95;margin-top:14px}
h3{font-size:clamp(24px,2.6vw,32px);line-height:1.1;font-weight:700;letter-spacing:-.015em}
.kicker{font:600 13px/16px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--muted);max-width:34em;margin-top:22px;text-wrap:pretty}
.punch{color:var(--violet-text)}
.num{font-weight:600;font-variant-numeric:tabular-nums}
.y{color:var(--lime)}

/* Kopfleiste --------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(13,10,28,.9);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.07);padding-top:env(safe-area-inset-top)}
.site-head .wrap{display:flex;align-items:center;gap:12px;height:var(--head)}
.wordmark{font:800 26px/1 var(--display);letter-spacing:-.02em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-right:auto}
.nav{display:none}
@media (min-width:960px){
  .nav{display:flex;gap:4px;margin-right:auto;margin-left:32px}
  .wordmark{margin-right:0}
}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--muted);text-decoration:none;font:600 16px/1 var(--body)}
.nav a:hover{color:var(--text)}
.lang{display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;font:600 14px/1 var(--body);text-decoration:none;letter-spacing:.04em;color:var(--muted)}
.lang:hover{color:var(--text)}
@media (min-width:360px){.lang{display:inline-flex}}

/* Spielteile --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:20px;font:700 18px/1.1 var(--display);text-decoration:none;text-align:center;transition:transform .08s var(--ease-out),box-shadow .08s var(--ease-out),background-color .2s,color .2s}
.btn-small{min-height:44px;padding:0 16px;border-radius:14px;font-size:16px}
/* Der Hauptspielzug: harter Schatten, sinkt beim Drücken hinein. */
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:4px 4px 0 var(--shadow)}
.btn-lime:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
.btn-lime:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow)}
.btn-small.btn-lime{box-shadow:3px 3px 0 var(--shadow)}
.btn-quiet{background:var(--card);color:var(--text);min-height:48px;padding:0 20px;font-size:16px}
.btn-quiet:hover{background:var(--well)}

.pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 14px;border-radius:999px;background:var(--well);color:var(--text);font:600 14px/20px var(--body)}
.pill-small{min-height:24px;padding:2px 10px;font-size:12px;line-height:20px}
.pill-lime{background:var(--lime);color:var(--ink)}
.pill-violet{background:var(--violet);color:#fff}

.says{display:flex;align-items:flex-end;gap:12px}
.says .face{flex:none;width:48px;height:48px}
.bubble{background:var(--card);border-radius:20px 20px 20px 4px;padding:12px 16px;font:600 16px/1.4 var(--body);text-wrap:pretty}
@media (min-width:960px){.bubble{font-size:18px}}
.bubble.paper{background:#fff;color:var(--ink)}
.bubble.paper .punch{color:var(--violet)}
.bubble.swap{animation:swap .32s var(--ease-out)}
@keyframes swap{from{opacity:0;transform:translateY(6px)}}

.stamp{display:inline-block;transform:rotate(-6deg);border-radius:14px;padding:12px 20px;font:800 44px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;box-shadow:4px 4px 0 var(--shadow);background:var(--lime);color:var(--ink)}
.stamp.nope{background:var(--violet);color:#fff}
.stamp.small{font-size:15px;padding:5px 10px;border-radius:9px;box-shadow:3px 3px 0 var(--shadow)}

/* Glaub dran von links, Zweifel von rechts; Skepty sitzt da, wo sie sich treffen. Bewegt wird nur per transform. */
.tug{position:relative;--m:26px;--bar:10px;height:var(--m);--b:0;--d:0;--share:50}
.tug .bar{position:absolute;left:0;right:0;top:calc((var(--m) - var(--bar)) / 2);height:var(--bar);border-radius:999px;background:var(--well);overflow:hidden}
.tug .bar i{position:absolute;inset:0;transition:transform .52s var(--ease-out)}
.tug .b{background:var(--lime);transform-origin:0 50%;transform:scaleX(var(--b))}
.tug .d{background:var(--violet);transform-origin:100% 50%;transform:scaleX(var(--d))}
.tug .rail{position:absolute;top:0;bottom:0;left:0;right:var(--m)}
.tug .slide{display:block;height:100%;transform:translateX(calc(var(--share) * 1%));transition:transform .52s var(--ease-out)}
.tug .marker{display:block;width:var(--m);height:var(--m);padding:calc(var(--m) * .08);border-radius:calc(var(--m) * .3);background:var(--card)}
.tug .marker svg{width:100%;height:100%}
/* Leas Karte: Skepty als Knoten, der Balken unter einer matten Abdeckung, bis man die Verteilung sehen darf. */
.tug .knot{position:absolute;top:0;left:calc(50% - var(--m) / 2);width:var(--m);height:var(--m);z-index:2}
.tug .head{display:block;width:100%;height:100%;padding:calc(var(--m) * .07);border-radius:30%;background:var(--card)}
.tug .head svg{width:100%;height:100%}
.tug .cover{position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#3D3470 0 7px,#342C60 7px 14px)}
.ratio{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:14px;line-height:20px;color:var(--muted)}

/* Die Herausforderungskarte. */
.plan{position:relative;background:var(--card);color:var(--text);border-radius:28px;padding:20px;border:2px solid transparent;display:grid;gap:18px;transition:border-color .3s,box-shadow .3s}
.plan.your-call{border-color:var(--lime);box-shadow:4px 4px 0 var(--shadow)}
.plan-head{display:flex;align-items:center;gap:12px}
.plan-head img{width:40px;height:40px;flex:none}
.plan-head .who{flex:1;min-width:0}
.plan-head .who b{display:block;font:600 15px/20px var(--body)}
.plan-head .who span{display:block;font-size:13px;line-height:18px;color:var(--muted)}
.plan-title{font-size:clamp(26px,6.5vw,32px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.plan-meta{font-size:14px;line-height:20px;color:var(--muted);margin-top:8px}
.plan-question{font:700 18px/1.3 var(--display);grid-column:1/-1}
.tips{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 4px 4px 0}
.tip{height:60px;border-radius:20px;font:700 18px/1 var(--display);box-shadow:4px 4px 0 var(--shadow);transition:transform .06s var(--ease-out),box-shadow .06s var(--ease-out)}
.tip:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow)}
.tip:active,.tip.pressed{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow)}
.tip.believe{background:var(--lime);color:var(--ink)}
.tip.doubt{background:var(--violet);color:#fff}
.anon{font-size:13px;line-height:18px;color:var(--muted)}
/* Tippen, getippt, vorbei: alle drei liegen übereinander, die Karte springt nicht. */
.call-area{display:grid}
.call-area>*{grid-area:1/1}
.call-area>[hidden]{display:flex;visibility:hidden}
.call-area>.tips[hidden],.call-area>.said[hidden]{display:grid}
.said{display:grid;align-content:start}
/* Skeptys Satz zeigt nach oben auf den Knoten im Balken. */
.said .bubble{position:relative;justify-self:center;max-width:100%;margin-top:8px;background:var(--well);text-align:center}
.said .bubble::before{content:"";position:absolute;left:50%;top:-8px;margin-left:-9px;border:9px solid transparent;border-top:0;border-bottom-color:var(--well)}

/* Figuren: Standbild zuerst, die Live-Figur blendet darüber. Ohne Kasten. */
.figure{position:relative}
.figure>img,.figure>canvas{position:absolute;inset:0;width:100%;height:100%}
.figure>canvas{opacity:0;transition:opacity .4s ease;-webkit-tap-highlight-color:transparent}
.figure.live>canvas{opacity:1;cursor:pointer}
.figure.live>img{opacity:0;transition:opacity .4s ease .1s}
.figure:focus-visible{outline-offset:-6px;border-radius:28px}
/* Der Lichtkegel läuft in den Hintergrund aus. */
.fade{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 64%,transparent 100%)}

/* 1 · Hero ----------------------------------------------------------------- */
.hero{background:var(--stage);position:relative;overflow:hidden;overflow:clip}
.hero .wrap{position:relative;display:grid;padding-top:clamp(20px,4vw,48px);padding-bottom:clamp(40px,6vw,72px)}
.hero h1{position:relative;z-index:1;font-size:clamp(64px,22vw,118px);line-height:.86;letter-spacing:-.05em;margin-top:14px}
.hero h1 span{display:block}
.hero h1 .v{color:var(--violet-text)}
.hero-figure{position:relative;z-index:2;margin:-4vw calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));aspect-ratio:1}
.hero-bubble{position:absolute;z-index:3;top:6%;left:max(var(--gutter-l),5%);max-width:min(54%,300px);font-size:15px;padding:10px 14px}
.hero .hint{position:absolute;z-index:3;left:0;right:0;bottom:7%;text-align:center;font-size:13px;line-height:18px;color:var(--muted);opacity:0;transition:opacity .35s ease .3s;pointer-events:none}
.hero-figure.live .hint{opacity:1}
.hero-text{position:relative;z-index:3;margin-top:-4vw}
.hero-text .lead{color:var(--text);margin-top:0;max-width:22em;font-size:clamp(19px,2vw,24px)}
.hero-text .sub{color:var(--muted);margin-top:12px;font-size:16px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:24px}
@media (min-width:840px){
  .hero .wrap{min-height:min(calc(100svh - var(--head)),980px);align-content:center}
  .hero h1{font-size:clamp(116px,12.6vw,220px);margin-top:20px;max-width:9ch}
  .hero-figure{position:absolute;margin:0;width:min(64vw,1000px);right:-4vw;bottom:-6%}
  .hero-bubble{top:9%;left:auto;right:12%;max-width:300px;font-size:17px;padding:12px 16px;border-radius:20px 20px 4px 20px}
  .hero-text{margin-top:28px;max-width:32em}
}

/* 2 · Laufband ------------------------------------------------------------- */
.ticker{border-block:1px solid rgba(255,255,255,.06);padding-block:22px;overflow:hidden;display:grid;gap:12px}
.ticker-row{display:flex;width:max-content;animation:run 64s linear infinite}
.ticker-row.back{animation-direction:reverse;animation-duration:76s}
.ticker:hover .ticker-row{animation-play-state:paused}
.ticker ul{display:flex;gap:12px;padding-right:12px}
.ticker li{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;background:var(--card);border-radius:18px;padding:14px 20px;font:700 clamp(18px,2vw,24px)/1.1 var(--display)}
.ticker li .stamp{font-size:13px;padding:4px 9px;border-radius:8px;box-shadow:2px 2px 0 var(--shadow)}
@keyframes run{to{transform:translateX(-50%)}}

/* 3 · Die Runde ------------------------------------------------------------ */
.round{padding-block:var(--section)}
.round h2{font-size:clamp(44px,6.6vw,96px)}
.round-pin{margin-top:48px}
.round-stage{position:relative}
.night,.spot,.flood,.progress,.tippers,.said{display:none}
.round-grid{display:grid;gap:48px}
@media (min-width:960px){.round-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:88px;align-items:start}.round .scene{position:sticky;top:calc(var(--head) + 32px)}}
.steps{display:grid;gap:28px}
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:18px}
.steps .n{grid-row:span 2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--well);font:800 22px/1 var(--display)}
.steps li[data-state="now"] .n{background:var(--lime);color:var(--ink)}
.steps li[data-state="done"] .n{background:transparent;box-shadow:inset 0 0 0 2px var(--well);color:var(--muted)}
.steps .when{font:600 13px/16px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.steps h3{font-size:clamp(28px,3.4vw,44px);line-height:1.05;font-weight:800;margin-top:6px}
.steps .what p{color:var(--muted);margin-top:6px;max-width:30em}
.scene{position:relative;display:grid;gap:20px;max-width:560px;width:100%}
.to-sunday{justify-self:start}
#plan .stamp-slot{display:none}

/* 3b · Die Runde, festgepinnt -----------------------------------------------
   Mit JavaScript (die Klasse .js setzt ein kleines Skript im <head>) bleibt die
   Bühne stehen, und die Woche läuft mit dem Scrollen: ein Schritt pro Bildschirm.
   site.js rechnet alles aus der Scroll-Position und setzt nur transform und
   opacity; rückwärts läuft es genauso. */
.js .round{padding-bottom:0;--result:var(--lime)}
.js .round[data-outcome="nope"]{--result:var(--violet)}
/* Die letzte Bildschirmhöhe der Strecke gehört schon der Auflösung, die über die Bühne hereinkommt.
   Darunter ist die Strecke in der Farbe des Ergebnisses, falls das Fenster höher ist als die Bühne. */
.js .round-pin{height:calc(580svh - 2 * var(--head-h));margin-top:clamp(24px,4vw,56px);background:linear-gradient(transparent calc(100% - 100svh + var(--head-h)),var(--result) 0)}
.js .round-stage{position:sticky;top:var(--head-h);height:calc(100svh - var(--head-h));overflow:hidden;overflow:clip;display:grid;align-items:center}
.js .round-grid{position:relative;z-index:1;align-items:center;gap:clamp(40px,6vw,96px)}
@media (min-width:960px){.js .round-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}
.js .round .scene{position:relative;top:auto;max-width:none}
.js .round .to-sunday,.js #plan .plan-meta,.js #plan>.anon,.js #plan .pill-small{display:none}
.js #plan .plan-question{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.js .scene>:not(.flood,.spot){position:relative;z-index:3}

/* Licht: ein weicher Kegel von oben und ein Schein hinter der Karte, wie auf der Bühne der App. Zum Sonntag hin stärker, drumherum dunkler. */
.js .night{display:block;position:absolute;inset:0;background:#030208;opacity:0;pointer-events:none}
.js .spot{display:block;position:absolute;z-index:0;left:-45%;right:-45%;top:-80%;bottom:-30%;pointer-events:none;opacity:.35}
.js .spot::before,.js .spot::after{content:"";position:absolute;inset:0}
.js .spot::before{background:conic-gradient(from 154deg at 50% 0%,transparent 0deg,rgba(220,211,255,.17) 26deg,transparent 52deg);-webkit-mask-image:linear-gradient(#000 35%,transparent 92%);mask-image:linear-gradient(#000 35%,transparent 92%)}
.js .spot::after{background:radial-gradient(38% 30% at 50% 66%,rgba(110,59,255,.55),transparent 72%)}
/* Nach dem Stempel flutet die Farbe des Ergebnisses alles. */
.js .flood{display:block;position:absolute;z-index:2;left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;border-radius:50%;background:var(--result);pointer-events:none;transform:scale(0)}

/* Links: ein Schritt auf einmal – Label, große Überschrift, eine kurze Zeile. */
.js .beats{position:relative;display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
.js .beats>.progress,.js .beats>.steps{z-index:1}
.js .steps{position:relative;flex:1;display:grid;gap:0}
.js .steps li{grid-area:1/1;display:block;opacity:0;transform:translateY(28px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.js .steps li.past{transform:translateY(-28px)}
.js .steps li.on{opacity:1;transform:none}
.js .steps .n{display:none}
.js .steps .when{color:var(--lime);letter-spacing:.14em}
.js .steps h3{font-size:clamp(32px,min(4.6vw,8svh),76px);line-height:1;letter-spacing:-.03em;margin-top:14px;max-width:9em}
.js .steps .what p{font-size:clamp(16px,1.4vw,20px);margin-top:16px;max-width:24em}

/* Fortschritt: vier Punkte, antippen springt zum Schritt. Am Desktop senkrecht. */
.js .progress{display:flex;flex-direction:column;gap:22px;position:relative;flex:none;--fill:0}
.js .progress::before,.js .progress::after{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:2px;margin-left:-1px;background:var(--well)}
.js .progress::after{background:var(--lime);transform-origin:50% 0;transform:scaleY(var(--fill))}
.js .progress button{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%}
.js .progress button::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--room);box-shadow:inset 0 0 0 2px #4A4080}
.js .progress i{position:absolute;left:9px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--lime);transform:scale(0);transition:transform .25s var(--ease-out)}
.js .progress .done i{transform:scale(1)}
.js .progress .now i{transform:scale(1.35)}

/* Die Karte: groß, nur Lea, ihr Vorhaben, wer getippt hat, das Tauziehen und der Tipp. */
.js #plan{gap:clamp(14px,2.2svh,24px);padding:clamp(20px,2.4vw,36px);border-radius:32px;transform-origin:50% 0}
.js #plan .plan-head img{width:40px;height:40px}
.js #plan .who b{font-size:17px;line-height:22px}
.js #plan .who span{font-size:15px;line-height:20px}
.js #plan .plan-title{font-size:clamp(24px,3.1vw,46px);line-height:1.05}
.js #plan .plan-title .rest{opacity:0}
.js #plan .plan-title.typing .typed::after{content:"";display:inline-block;width:.08em;height:.9em;margin-left:.04em;vertical-align:-.08em;background:var(--lime);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.js .tippers{display:flex;gap:clamp(14px,1.8vw,24px);min-height:84px;align-items:flex-start}
/* Wer tippt, springt mit seinem Kopf in die Reihe. Wie, bleibt verdeckt; die Köpfe sind bewusst neutral gefärbt. */
.js .tippers{--head:40px}
.js .tippers li{display:none;justify-items:center;gap:6px;width:88px;text-align:center;font-size:13px;line-height:1.3;color:var(--muted)}
.js .tippers li.in{display:grid;animation:pop-head .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop-head{from{opacity:0;transform:translateY(10px) scale(.6)}}
.js .tippers img{width:var(--head);height:var(--head)}
/* Bis der erste Kopf kommt, steht in der Reihe, dass noch niemand getippt hat. */
.js .tippers .none{display:block;align-self:center;width:auto;text-align:left;font-size:clamp(15px,1.3vw,17px);color:var(--muted);animation:nobody .3s var(--ease-out) both}
.js .tippers li.in~.none{display:none}
@keyframes nobody{from{opacity:0}}
.js .tippers b{display:block;color:var(--text);font-weight:600;font-size:14px}
.js #you-call.believe{color:var(--lime)}
.js #you-call.doubt{color:var(--violet-text)}
.js #tug{--m:48px;--bar:30px}
.js #tug .knot{left:0;will-change:transform}
.js #tug .bar i{transition:none}
.js #tug .head.wobble{animation:wobble 2.6s ease-in-out infinite}
@keyframes wobble{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-9deg)}75%{transform:rotate(7deg)}85%{transform:rotate(-4deg)}93%{transform:rotate(2deg)}}
.js #plan .ratio{font:600 clamp(16px,1.4vw,19px)/1.35 var(--body);margin-top:12px;min-height:1.35em;font-variant-numeric:tabular-nums}
.js #plan.split #ratio-a{color:var(--lime)}
.js #plan.split #ratio-b{color:var(--violet-text)}
.js .said{display:grid}
.js .call-area{min-height:clamp(62px,8svh,76px)}
.js #plan .tip{height:clamp(52px,6.6svh,64px);font-size:clamp(18px,1.6vw,22px)}
.js #plan .stamp-slot{display:block;position:absolute;top:-24px;right:-10px;z-index:4}
.js #plan .stamp{opacity:0;font-size:clamp(40px,5vw,60px)}
@media (min-width:600px){.js #plan .stamp-slot{right:-30px}}
@media (max-width:599px){.js #plan .stamp-slot{top:-26px;right:-14px}.js #plan .stamp{font-size:30px;padding:10px 16px}}

/* Am Handy: die Karte oben, darunter Fortschritt und Überschrift. */
@media (max-width:959px){
  .js .round-grid{display:flex;flex-direction:column;align-items:stretch;gap:18px}
  .js .round .scene{order:-1}
  .js .beats{flex-direction:column;align-items:stretch;gap:14px}
  .js .progress{flex-direction:row;gap:6px}
  .js .progress::before,.js .progress::after{display:none}
  .js .progress li{flex:1}
  .js .progress button{width:100%;height:24px;border-radius:0}
  .js .progress button::before{width:100%;height:4px;border-radius:2px;background:var(--well);box-shadow:none}
  .js .progress i{left:0;right:0;top:10px;width:auto;height:4px;border-radius:2px;transform-origin:0 50%;transform:scaleX(var(--f,0));transition:none}
  .js .progress .done i,.js .progress .now i{transform:scaleX(var(--f,0))}
  .js .steps h3{font-size:clamp(28px,8.4vw,36px);margin-top:8px}
  .js .steps .what p{font-size:15px;margin-top:8px}
  .js #plan{gap:12px;padding:20px}
  .js .tippers{min-height:70px;gap:10px;--head:32px}
  .js .tippers li{width:76px;font-size:12px}
  .js #tug{--m:44px;--bar:26px}
  .js .round .bubble{font-size:15px;padding:10px 14px}
}
@media (max-width:959px) and (max-height:700px){
  .js .steps .what p{display:none}
  .js .round-grid{gap:12px}
  .js #plan .tip{height:50px}
}
/* Niedrige Handys (z. B. iPhone SE mit Safari-Leisten): alles etwas dichter, damit nichts abgeschnitten wird. */
@media (max-width:959px) and (max-height:640px){
  .js .round-grid{gap:10px}
  .js #plan{gap:8px;padding:16px}
  .js #plan .plan-head{gap:10px}
  .js #plan .plan-head img{width:30px;height:30px}
  .js #plan .who{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .js #plan .who b,.js #plan .who span{display:inline}
  .js .tippers{--head:28px;min-height:58px}
  .js .tippers li{font-size:11px;gap:4px}
  .js .tippers b{font-size:12px}
  .js #plan .ratio{margin-top:8px}
  .js .call-area{min-height:54px}
  .js #plan .tip{height:46px;font-size:17px}
  .js .round .bubble{padding:8px 12px;font-size:14px}
  .js .beats{gap:10px}
  .js .steps h3{font-size:clamp(24px,7.6vw,30px)}
}

/* Die Auflösung: Stempel und Flut kamen schon auf Leas Karte. Sie schiebt sich über die geflutete Bühne
   (oben durchsichtig, darunter liegt dieselbe Farbe), während die Karte abtritt, und steht dann als ein Bild da:
   das Ergebnis, die jubelnde Fankurve, die Punkte. */
.js .peak .peak-copy>.says,.js .peak-card{display:none}
.js .peak{position:relative;z-index:1;margin-top:calc(var(--head-h) - 100svh);min-height:calc(100svh - var(--head-h));display:grid;align-content:center;padding-block:clamp(16px,3.4svh,44px);background:linear-gradient(transparent calc(100svh - var(--head-h)),var(--bg) 0)}
.js .peak h2{font-size:clamp(44px,min(7.4vw,12svh),112px)}
/* Über den Figuren ist im Bild viel Platz für Hüte; den schneidet die Seite oben ab. */
.js .crowd .figure{aspect-ratio:5/3;overflow:hidden;overflow:clip}
.js .crowd .figure>img,.js .crowd .figure>canvas{top:auto;height:auto;aspect-ratio:4/3}
.js .outcome{margin-top:clamp(12px,2.4svh,24px)}
.js .again{margin-top:clamp(16px,3svh,32px)}
@media (min-width:960px){
  .js .peak-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-areas:"head crowd" "copy crowd";column-gap:40px;row-gap:0}
  .js .crowd .figure{margin:0 -3% 0 -5%}
  .js .peak-head{align-self:end}
  .js .peak-copy{align-self:start}
}
@media (max-width:959px){
  .js .peak h2{font-size:min(12vw,8svh,56px)}
  .js .peak .crowd{margin-top:clamp(4px,1.6svh,16px)}
  .js .crowd figcaption{margin-top:0}
}
/* Niedrige Handys: ohne Bildunterschrift (das Bild hat seinen Alt-Text), damit das Bild ganz auf den Schirm passt. */
@media (max-width:959px) and (max-height:640px){
  .js .crowd figcaption{display:none}
  .js .outcome p{font-size:16px}
}

/* 4 · Auflösung: der DONE-Moment ganz in Lime (NOPE in Violett) ------------- */
.peak{--bg:var(--lime);--fg:var(--ink);--muted-here:#2E3A08;background:var(--bg);color:var(--fg);padding-block:var(--section);transition:background-color .28s ease,color .28s ease;overflow:hidden;overflow:clip}
.peak[data-outcome="nope"]{--bg:var(--violet);--fg:#fff;--muted-here:var(--on-violet-muted)}
.peak[data-state="wait"]{--bg:var(--stage);--fg:#fff;--muted-here:var(--muted)}
.peak .kicker{color:var(--muted-here)}
.peak[data-state="wait"] .peak-head h2{opacity:0}
.peak-grid{display:grid;align-items:center}
/* Am Handy: Überschrift, Skepty, Karte mit Stempel, gleich darunter die Fankurve, dann die Punkte. */
@media (max-width:959px){
  .peak-copy{display:contents}
  .peak .says{order:1;margin-top:24px}
  .peak-card{order:2}
  .crowd{order:3;margin-top:8px}
  .outcome{order:4;margin-top:8px}
  .again{order:5}
}
@media (min-width:960px){.peak-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"head head" "copy crowd";column-gap:56px;row-gap:8px}.peak-head{grid-area:head}.peak-copy{grid-area:copy}.crowd{grid-area:crowd}}
.peak h2{font-size:clamp(48px,9vw,120px)}
.peak .says{margin-top:4px}
.peak .says .face{width:56px;height:56px;border-radius:22%;transition:box-shadow .28s ease}
/* Auf Violett verschwände Skeptys Kachel: ein heller Rand hält sie. */
.peak[data-outcome="nope"]:not([data-state]) .says .face{box-shadow:0 0 0 2px #fff}
.peak .bubble{min-height:52px}
.peak-card{margin-top:28px;max-width:520px}
.peak-card .stamp-slot{position:absolute;top:-22px;right:-8px;z-index:2}
@media (min-width:600px){.peak-card .stamp-slot{right:-28px}}
.peak-card .stamp{font-size:clamp(38px,5vw,52px)}
.outcome{display:grid;gap:8px;margin-top:28px;max-width:520px}
.outcome p{font-size:clamp(18px,1.7vw,21px);line-height:1.45}
.outcome .you{font-weight:600}
.outcome a{color:inherit}
.reveal>*{transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.reveal.hide>*{opacity:0;transform:translateY(10px);transition:none}
.reveal>*:nth-child(2){transition-delay:.1s}
.again{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.peak .btn-quiet{background:var(--ink);color:#fff}
.peak .btn-quiet:hover{background:#2A2D35}
.peak[data-state="wait"] .btn-quiet{background:var(--card)}
.crowd .figure{aspect-ratio:4/3;margin:0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l))}
@media (min-width:960px){.crowd .figure{margin:0 -2% 0 -6%}}
.peak[data-state="wait"] .crowd .figure>*,.peak[data-state="wait"] .crowd figcaption{opacity:0!important}
.crowd figcaption{margin-top:4px;text-align:center;font-weight:600;color:var(--muted-here);font-size:16px;min-height:1.5em}

/* 5 · Die App -------------------------------------------------------------- */
.app{padding-block:var(--section)}
.phones{display:flex;gap:20px;margin-top:56px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter-r) 24px var(--gutter-l);margin-inline:calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));scrollbar-width:none}
.phones::-webkit-scrollbar{display:none}
.phones>figure{flex:none;width:min(68vw,272px);scroll-snap-align:center}
@media (min-width:1100px){
  .phones{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;overflow:visible;padding:0;margin-inline:0}
  .phones>figure{width:auto}
  .phones>figure:nth-child(even){margin-top:64px}
}
.phone{position:relative;border-radius:46px;padding:10px;background:#07050F;box-shadow:inset 0 0 0 1.5px #3A3452}
.screen{position:relative;border-radius:36px;overflow:hidden;background:var(--room)}
.status{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 20px 0 28px;font:600 14px/1 var(--body);color:#fff}
.status .island{position:absolute;left:50%;top:10px;width:27%;height:26px;border-radius:999px;background:#000;transform:translateX(-50%)}
.status svg{height:11px;width:auto}
.screen img{width:100%;height:auto;aspect-ratio:600/1299}
.phones figcaption{margin-top:20px;color:var(--muted);font-size:16px;line-height:1.5}
.phones figcaption b{display:block;color:var(--text);font:700 22px/1.2 var(--display);margin-bottom:4px}

/* 6 · Fair: ganz in Violett, Skeptys Gesicht ist der Abschnitt -------------- */
.fair{background:var(--violet);color:#fff;padding-block:var(--section);overflow:hidden;overflow:clip}
.fair .kicker{color:var(--on-violet-muted)}
.fair-grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.fair-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px}}
.fair h2{max-width:11ch}
.fair .lead{color:var(--on-violet-muted)}
.big-face{order:-1;width:min(62vw,300px);justify-self:start}
@media (min-width:960px){.big-face{order:0;width:100%;max-width:420px;justify-self:end}}
.rules{display:grid;margin-top:48px;border-top:1px solid rgba(255,255,255,.3)}
.rules div{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.3)}
@media (min-width:720px){.rules div{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:baseline}}
.rules dt{font:800 clamp(26px,3vw,38px)/1.05 var(--display);letter-spacing:-.02em}
.rules dd{color:var(--on-violet-muted)}
.fair .size{margin-top:28px;font-weight:600}

/* 7 · Dein Skepty: das Regal ----------------------------------------------- */
.collection{background:var(--stage);padding-block:var(--section)}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px;margin-top:56px}
@media (min-width:900px){.shelf{grid-template-columns:repeat(6,minmax(0,1fr))}}
.shelf li{display:grid;justify-items:center;text-align:center}
.shelf img{width:100%;height:auto;aspect-ratio:4/5;margin-bottom:-15%;transition:transform .2s var(--ease-out)}
.shelf li:hover img{transform:translateY(-6px)}
.shelf li::after{content:"";order:2;width:100%;height:12px;background:var(--well);border-top:2px solid #43397A}
.shelf .tag{order:3;display:grid;justify-items:center;gap:10px;margin-top:16px;font:700 17px/1.2 var(--display)}
.spin-stage{position:relative}
.turntable .figure{display:none}
.collection .cosmetic{margin-top:48px;font:800 clamp(24px,2.6vw,34px)/1.15 var(--display);letter-spacing:-.02em}
.collection .crown{margin-top:8px;color:var(--muted)}

/* 8 · Für deine Story ------------------------------------------------------ */
.story{padding-block:var(--section)}
.story h2{font-size:clamp(44px,6.6vw,96px)}
.story-grid{display:grid;gap:48px;align-items:center}
@media (min-width:960px){.story-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px}}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.4vw,28px);align-items:start}
.cards figcaption{margin-top:14px;color:var(--muted);font-size:15px;text-align:center}
.cards figure:last-child{margin-top:clamp(24px,5vw,64px)}
/* Wie src/components/ShareCard.tsx, gebaut auf 360 Einheiten Breite. */
.share-card{container-type:inline-size;aspect-ratio:9/16;background:var(--stage);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;position:relative;outline:1px solid rgba(255,255,255,.08)}
.share-card .stage-pic{position:relative;flex:1;min-height:0}
.share-card .stage-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.share-card .corner{position:absolute;top:7.8cqw;left:7.8cqw;width:16.7cqw;height:16.7cqw}
.share-card .floor{position:absolute;bottom:2.8cqw;left:8.9cqw}
.share-card .floor .stamp{font-size:9.8cqw;padding:2.7cqw 4.4cqw;border-radius:3.1cqw;box-shadow:.9cqw .9cqw 0 var(--shadow)}
.share-card .text{padding:0 8.9cqw 8.9cqw;display:grid;gap:7.8cqw}
.share-card .text>div:not(.card-foot){display:grid;gap:3.9cqw}
.share-card .plan-text{font:800 11.1cqw/1.06 var(--display);letter-spacing:-.02em;color:#fff}
.share-card .proof{font-size:4.2cqw;line-height:1.4;color:var(--muted)}
.share-card .hook{font:700 5cqw/1.33 var(--display);color:#fff}
.share-card .hook .n{color:var(--lime)}
.share-card .card-foot{display:flex;align-items:center;justify-content:space-between;gap:2.8cqw}
.share-card .card-foot.left{justify-content:flex-start}
.share-card .mark{font:800 6.1cqw/1 var(--display);letter-spacing:-.02em;color:#fff}
.share-card .until{font-size:3.6cqw;color:var(--muted)}
.share-card .card-foot .face{width:8.9cqw;height:8.9cqw}

/* 9 · Schluss -------------------------------------------------------------- */
.finale{background:var(--stage);padding-block:var(--section) clamp(64px,8vw,112px);text-align:center;overflow:hidden;overflow:clip}
.finale h2{position:relative;z-index:1;font-size:clamp(60px,16vw,220px);line-height:.88;letter-spacing:-.05em;margin:0 auto;max-width:12ch}
.finale h2 .v{color:var(--violet-text)}
@media (min-width:840px){.finale h2{max-width:none;font-size:clamp(110px,10.4vw,188px)}}
.finale-figure{position:relative;z-index:2;width:min(100%,560px);aspect-ratio:1;margin:-6% auto 0}
.finale-bubble{position:relative;z-index:3;display:inline-block;margin-top:28px;max-width:320px;text-align:left;font-size:16px;padding:12px 16px}
@media (min-width:960px){.finale-bubble{font-size:18px}}
.finale-actions{display:grid;justify-items:center;gap:20px;margin-top:4px}
.share-status{min-height:1.5em;color:var(--muted);font-size:15px}

/* 10 · Fragen -------------------------------------------------------------- */
.faq{padding-block:var(--section)}
.faq-list{margin-top:40px;max-width:820px;border-bottom:1px solid var(--well)}
@media (min-width:960px){
  .faq .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
  .faq-head{position:sticky;top:calc(var(--head) + 40px)}
  .faq-list{margin-top:0}
}
.faq details{border-top:1px solid var(--well)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:18px 0;cursor:pointer;font:700 clamp(19px,2vw,24px)/1.25 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:999px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 9v12M9 15h12' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat;transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline-offset:4px}
.faq details p{color:var(--muted);padding:0 46px 24px 0;max-width:40em}

/* Fuß ---------------------------------------------------------------------- */
.foot{border-top:1px solid var(--card);padding-top:48px;padding-bottom:max(40px,env(safe-area-inset-bottom))}
.foot-grid{display:grid;gap:28px}
@media (min-width:860px){.foot-grid{grid-template-columns:auto 1fr;align-items:start;gap:48px}}
.foot .claim{margin-top:10px;color:var(--muted)}
.foot nav ul{display:flex;flex-wrap:wrap;gap:0 8px}
@media (min-width:860px){.foot nav ul{justify-content:flex-end}}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-left:-10px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:15px}
@media (min-width:860px){.foot nav a{margin-left:0}}
.foot nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}

/* ==========================================================================
   Die Scroll-Geschichte. Nur wo der Browser Scroll-Animationen kann und keine
   reduzierte Bewegung gewünscht ist; sonst bleibt alles oben stehen, wie es ist.
   Festgepinnt wird mit position:sticky, die Geschwindigkeit bestimmt der
   Mensch. Bewegt werden nur transform und opacity. site.js prüft dasselbe.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){

/* 1 · Hero: Skepty hält still, die Kamera fährt auf sein Gesicht ---------- */
.hero{height:calc(200svh - var(--head-h));view-timeline:--hero block}
.hero>.wrap{position:sticky;top:var(--head-h);height:calc(100svh - var(--head-h));min-height:0;padding-top:clamp(16px,3vw,40px);padding-bottom:clamp(20px,3vw,40px);align-content:start}
.hero .wrap>p:first-child,.hero h1{animation:hero-away linear both;animation-timeline:--hero;animation-range:contain 0% contain 42%}
.hero-text{animation:hero-away linear both;animation-timeline:--hero;animation-range:contain 0% contain 26%}
@keyframes hero-away{to{opacity:0;transform:translateY(-10svh)}}
.hero-figure{animation:hero-close linear both;animation-timeline:--hero;animation-range:contain 0% contain 70%}
@keyframes hero-close{to{transform:var(--close)}}
/* Bis die Live-Figur da ist, zoomt das Standbild mit. */
.hero-figure .figure>img{transform-origin:50% 37%;animation:hero-zoom linear both;animation-timeline:--hero;animation-range:contain 0% contain 70%}
@keyframes hero-zoom{to{transform:scale(2.15)}}
.hero-bubble{animation:pop-in linear both;animation-timeline:--hero;animation-range:contain 62% contain 82%}
@keyframes pop-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
.hero .hint{display:none}
/* Am Handy: Claim oben, Skepty darunter (nie davor), dann gleich der Text. */
@media (max-width:839px){
  .hero>.wrap{grid-template-rows:auto auto minmax(0,1fr) auto;padding-bottom:clamp(16px,2.6svh,28px)}
  .hero h1{font-size:min(17vw,9svh)}
  .hero .sub{display:none}
  .hero-figure{position:relative;z-index:2;align-self:start;justify-self:center;height:calc(100% + 9svh);width:auto;max-width:100%;aspect-ratio:1;margin:-4svh 0 0;--close:translateY(-2svh) scale(1.22)}
  .hero-text{z-index:3;margin:0}
  .hero-text .lead{font-size:clamp(17px,4.6vw,20px);max-width:17em}
  .hero-actions{margin-top:14px}
  .hero-actions .btn{min-height:52px}
  .hero-bubble{top:auto;bottom:-8%;left:0;right:0;margin-inline:auto;width:max-content;max-width:min(68vw,260px)}
}
@media (min-width:840px){
  .hero>.wrap{align-content:center}
  .hero h1{font-size:min(12.6vw,17svh,220px)}
  .hero-figure{width:min(64vw,1000px,calc((100svh - var(--head-h)) * 1.12));right:-4vw;bottom:-8%;--close:translate(-18vw,-2%) scale(1.04)}
  /* Am Ende spricht er: die Blase links neben dem Kopf (der beginnt bei gut 22 % der Figur), unten auf Höhe
     des Munds, die spitze Ecke zu ihm hin. Rechts verankert, so überdeckt sie sein Gesicht bei keiner Fenstergröße. */
  .hero-bubble{top:auto;bottom:43%;left:auto;right:81.5%;width:max-content;max-width:min(300px,26vw);border-radius:20px 20px 4px 20px;transform-origin:100% 100%}
  .hero-bubble .punch{display:block}
}

/* 6 · Fair: der Satz leuchtet Wort für Wort auf ---------------------------- */
.fair h2{max-width:13ch;view-timeline:--doubt block}
/* Jedes Wort liegt zweimal übereinander: blass als Schatten (nur Deko, wird nicht vorgelesen), hell als Text. */
.fair h2 .w{display:inline-grid}
.fair h2 .w::before{content:attr(data-w) / "";grid-area:1/1;color:rgba(255,255,255,.32)}
.fair h2 .w>span{grid-area:1/1;opacity:0;animation:lit linear both;animation-timeline:--doubt}
@keyframes lit{to{opacity:1}}
.fair h2 .w:nth-child(1)>span{animation-range:cover 13% cover 18%}
.fair h2 .w:nth-child(2)>span{animation-range:cover 16% cover 21%}
.fair h2 .w:nth-child(3)>span{animation-range:cover 19% cover 24%}
.fair h2 .w:nth-child(4)>span{animation-range:cover 22% cover 27%}
.fair h2 .w:nth-child(5)>span{animation-range:cover 25% cover 30%}
.fair h2 .w:nth-child(6)>span{animation-range:cover 30% cover 35%}
.fair h2 .w:nth-child(7)>span{animation-range:cover 33% cover 38%}
.fair h2 .w:nth-child(8)>span{animation-range:cover 36% cover 41%}
.fair h2 .w:nth-child(9)>span{animation-range:cover 39% cover 44%}

/* 7 · Dein Skepty: ein Drehteller, pro Abschnitt ein Look ------------------- */
.spin{height:calc(100svh - var(--head-h) + 330svh);margin-top:24px;view-timeline:--spin block}
.spin-stage{position:sticky;top:var(--head-h);height:calc(100svh - var(--head-h));overflow:clip}
.turntable{--fw:min(calc((100svh - var(--head-h)) * .6),78vw,560px);--lift:calc(var(--fw) * -.1);display:grid;place-items:center;height:100%}
.turntable>*{grid-area:1/1}
.turntable::before{content:"";grid-area:1/1;width:calc(var(--fw) * .92);aspect-ratio:3.6;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px #43397A,inset 0 -6px 0 rgba(0,0,0,.25);transform:translateY(calc(var(--lift) + var(--fw) * .47))}
.turntable .figure{display:block;width:var(--fw);aspect-ratio:4/5;z-index:3;transform:translateY(var(--lift))}
.turntable .shelf{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;width:100%;height:100%;margin:0}
.turntable .shelf li{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;animation:look linear both;animation-timeline:--spin}
.turntable .shelf li::after{display:none}
.turntable .shelf img{grid-area:1/1;width:var(--fw);margin:0;z-index:2;transform:translateY(var(--lift))}
.turntable .shelf li:hover img{transform:translateY(var(--lift))}
.turntable.live .shelf img{visibility:hidden}
.turntable .tag{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;margin:0;gap:0}
.turntable .name{grid-area:1/1;font:800 clamp(64px,15vw,240px)/.9 var(--display);letter-spacing:-.04em;color:var(--violet-text);transform:translateY(calc(var(--lift) - var(--fw) * .1));white-space:nowrap}
.turntable .stamp{grid-area:1/1;z-index:4;font-size:clamp(20px,2.4vw,30px);padding:8px 14px;border-radius:12px;transform:translateY(calc(var(--lift) + var(--fw) * .76)) rotate(-6deg)}
@keyframes look{0%{opacity:0;transform:translateY(24px)}10%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-24px)}}
@keyframes look-first{0%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-24px)}}
@keyframes look-last{0%{opacity:0;transform:translateY(24px)}10%,100%{opacity:1;transform:none}}
.turntable .shelf li:nth-child(1){animation-name:look-first;animation-range:contain 0% contain 16.67%}
.turntable .shelf li:nth-child(2){animation-range:contain 16.67% contain 33.33%}
.turntable .shelf li:nth-child(3){animation-range:contain 33.33% contain 50%}
.turntable .shelf li:nth-child(4){animation-range:contain 50% contain 66.67%}
.turntable .shelf li:nth-child(5){animation-range:contain 66.67% contain 83.33%}
.turntable .shelf li:nth-child(6){animation-name:look-last;animation-range:contain 83.33% contain 100%}
.collection .cosmetic{margin-top:32px}
@media (max-width:719px){.turntable .name{font-size:13vw;transform:translateY(calc(var(--lift) - var(--fw) * .74))}}

}}

/* Weniger Bewegung: alles steht sofort, wo es hingehört; das Laufband steht und lässt sich wischen. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-delay:0s!important}
  .ticker{overflow-x:auto}
  .ticker-row{animation:none}
}