/* =========================================================================
   Lab 09 · Kunststück — Yo-Yo, Kendama, Diabolo, Bälle, Keulen, Devil Stick, Cardistry, Kreisel
   Eine feste WebGL-Bühne hinter dem Inhalt (Studiolicht, Tiefenschärfe,
   Korn). Übersicht = eine Bildschirmseite mit Disziplin-Leiste. Detail =
   Kapitel; das Yo-Yo bzw. die Disziplin-Gruppe wechselt pro Kapitel
   Position, Material und Fokus.
   ========================================================================= */
@font-face{font-family:'Questrial';src:url('../fonts/questrial-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Questrial';src:url('../fonts/questrial-latinext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#060708;
  --ink:#E4E1D9;
  --muted:rgba(228,225,217,.66);
  --dim:rgba(228,225,217,.58);
  --hair:rgba(228,225,217,.12);
  --glass:rgba(16,18,21,.42);
  --accent:#7CCFDA;
  --display:'Questrial','Helvetica Neue',Arial,sans-serif;
  --body:'Questrial','Helvetica Neue',Arial,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:max(16px,calc(env(safe-area-inset-left,0px) + 6vw));
  --gutr:max(16px,calc(env(safe-area-inset-right,0px) + 6vw));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden;height:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#veil{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;place-items:center;transition:opacity 1.2s var(--ease),visibility 0s 1.2s}
#veil.off{opacity:0;visibility:hidden}
#veil span{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}

.label{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.wide{font-family:var(--display);letter-spacing:-.025em}

/* ---------- Kopf ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  background:linear-gradient(rgba(6,7,8,.86),rgba(6,7,8,0));
  padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:14px;
  padding-left:max(16px,calc(env(safe-area-inset-left,0px) + 4vw));padding-right:max(16px,calc(env(safe-area-inset-right,0px) + 4vw))}
.nav__links{display:flex;align-items:center;gap:14px;min-width:0}
.nav__marke img{display:block;opacity:.9}
.pille{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--hair);font-size:12px;letter-spacing:.08em;text-decoration:none;color:var(--muted);transition:color .3s,border-color .3s}
.pille:hover{color:var(--ink);border-color:rgba(228,225,217,.3)}
.navbtn{display:none;gap:8px;align-items:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.navbtn:hover{color:var(--ink)}
.navbtn svg{width:16px;height:16px}
.is-detail .navbtn{display:inline-flex}
.dnavs{display:grid;justify-items:center}
.dnavs > .dnav{grid-area:1/1}
.dnav{display:flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--hair);background:rgba(10,11,13,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.toy-yoyo.is-detail #dnav,.toy-kendama.is-detail #knav,.toy-diabolo.is-detail #inav,.toy-baelle.is-detail #bnav,.toy-keulen.is-detail #cnav,.toy-devil.is-detail #vnav,.toy-cards.is-detail #xnav,.toy-kreisel.is-detail #snav,.toy-cube.is-detail #wnav,.toy-poi.is-detail #pnav,.toy-ringe.is-detail #rnav,.toy-finger.is-detail #fnav,.toy-stack.is-detail #gnav,.toy-pen.is-detail #nnav,.toy-kugel.is-detail #qnav,.toy-hoop.is-detail #hnav,.toy-boxen.is-detail #znav{opacity:1;pointer-events:auto}
.dnav button{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums;transition:color .3s,background-color .3s}
.dnav button:hover{color:var(--ink)}
.dnav button[aria-current="true"]{background:var(--ink);color:var(--bg)}
.ton{justify-self:end;display:inline-flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.ton:hover{color:var(--ink)}
.ton svg{width:18px;height:18px}
.ton[aria-pressed="false"] .w1,.ton[aria-pressed="false"] .w2{opacity:0}
.navr{justify-self:end;display:flex;align-items:center;gap:22px}
.still .ico-play{display:none}
.is-still .still .ico-pause{display:none}
.is-still .still .ico-play{display:inline}
.is-still .still{color:var(--ink)}

/* ---------- Übersicht ---------- */
.ov{position:relative;z-index:10;pointer-events:none}
.ov > *{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.ov-copy{position:absolute;left:var(--gut);top:calc(104px + env(safe-area-inset-top,0px));pointer-events:none}
.ov h1{white-space:nowrap;margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,9vw,14rem);line-height:.86;letter-spacing:-.045em;text-wrap:nowrap}
.toylab{position:fixed;inset:0;pointer-events:none;z-index:11}
.tl{position:absolute;left:0;top:0;pointer-events:auto;display:grid;justify-items:center;gap:3px;padding:6px 12px 8px;border-radius:999px;font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .4s,opacity .5s var(--ease);white-space:nowrap}
.tl em{font-style:normal;font-family:var(--body);font-size:11px;letter-spacing:.22em;color:var(--dim);opacity:0;transition:opacity .4s}
.tl:hover,.tl:focus-visible,.tl.on{color:var(--ink)}
.tl:hover em,.tl:focus-visible em,.tl.on em{opacity:1}
.tl:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.specs{display:flex;gap:28px;flex-wrap:wrap;margin:6px 0 0;padding:0;list-style:none}
.specs li{display:grid;gap:2px}
.specs b{font-family:var(--display);font-weight:400;font-size:18px;font-variant-numeric:tabular-nums}
.cta{display:inline-flex;align-items:center;gap:16px;margin-top:10px;justify-self:start}
.cta .ring{width:62px;height:62px;border-radius:50%;border:1px solid rgba(228,225,217,.32);display:grid;place-items:center;transition:transform .5s var(--ease),border-color .4s,background-color .4s}
.cta:hover .ring{transform:scale(1.08);border-color:var(--accent);background:rgba(124,207,218,.08)}
.cta .ring svg{width:18px;height:18px}
.cta span{font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.hint{position:absolute;right:var(--gutr);bottom:calc(120px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;color:var(--dim);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.hint::before{content:"";width:40px;height:1px;background:var(--hair)}
.is-detail .ov > *{opacity:0;pointer-events:none}
.is-detail .ov-copy{transform:translateY(-24px)}
.is-detail .is-detail .tl{opacity:0;pointer-events:none}
.toy[hidden]{display:none}

/* ---------- Detail ---------- */
#detail{position:relative;z-index:10;display:none}
.is-detail #detail{display:block}
.ch{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-block:120px 80px;padding-left:var(--gut);padding-right:var(--gutr)}
.ch[data-side="right"] .col{grid-column:2}
.ch.tall{min-height:150vh}
.ch[data-side="center"]{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;align-items:end;padding-bottom:7vh}
.col{grid-column:1;justify-self:center;width:min(100%,clamp(360px,29vw,600px));display:grid;gap:clamp(18px,1.5vw,28px);min-width:0}
.ch[data-side="center"] .col{width:min(100%,clamp(560px,44vw,820px));justify-items:center}
.col > *{margin:0;min-width:0}
/* Bewegungsordnung der Texte (Takt und Reihenfolge setzt kunststueck.js über --d, --i, --w)
   Kurve --rv (expo-out) · Überschriften: Wort für Wort aus einer Maske, 1,25 s, 35 ms je Wort
   Fließtext: 14 px Aufstieg + Schärfe, 1,1 s · Listen: Zeilen je 70 ms, 10 px, Haarlinie zeichnet sich in 1,4 s von links
   GL-Headlines: nur Deckkraft, der Aufgang aus der Grundlinie läuft im Shader · Einmal Gezeigtes bleibt */
:root{--rv:cubic-bezier(.16,1,.3,1)}
.reveal{--d:0s;opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--rv) var(--d),transform 1.25s var(--rv) var(--d),filter 1.1s var(--rv) var(--d)}
.reveal.in{opacity:1;transform:none}
.rv-text:not(.in){filter:blur(4px)}
.rv-gl{transform:none;transition:opacity 1.5s var(--rv) var(--d)}
.rv-words,.rv-list{opacity:1;transform:none;transition:none}
.rv-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .04em .16em;margin:-.12em -.04em -.16em}
.reveal.rv-words .w>*{display:inline-block;transform:translateY(112%);opacity:0;transition:transform 1.25s var(--rv) calc(var(--d) + var(--w,0)*35ms),opacity .9s var(--rv) calc(var(--d) + var(--w,0)*35ms)}
.reveal.rv-words.in .w>*{transform:none;opacity:1}
.reveal.rv-list>*{opacity:0;transform:translateY(10px);transition:opacity .95s var(--rv) calc(var(--d) + var(--i,0)*70ms),transform 1.15s var(--rv) calc(var(--d) + var(--i,0)*70ms),background-size 1.4s var(--rv) calc(var(--d) + var(--i,0)*70ms)}
.reveal.rv-list.in>*{opacity:1;transform:none}
.reveal.rv-list:not(.in)>*{opacity:0}
.rv-lines>*{border-top-color:transparent!important;background:linear-gradient(var(--hair),var(--hair)) 0 0/0% 1px no-repeat}
.rv-lines.know{border-bottom-color:transparent}.rv-lines.know>:last-child{background:linear-gradient(var(--hair),var(--hair)) 0 0/0% 1px no-repeat,linear-gradient(var(--hair),var(--hair)) 0 100%/0% 1px no-repeat}
.rv-grid{border-top-color:transparent}
.rv-grid>*{border-bottom-color:transparent!important;background:linear-gradient(var(--hair),var(--hair)) 0 100%/0% 1px no-repeat}
.rv-grid>:nth-child(-n+2){background:linear-gradient(var(--hair),var(--hair)) 0 100%/0% 1px no-repeat,linear-gradient(var(--hair),var(--hair)) 0 0/0% 1px no-repeat}
.rv-lines.in>*,.rv-grid.in>*,.rv-lines.know.in>:last-child{background-size:100% 1px}
.reveal.timeline.rv-list.in>li{opacity:.76}.reveal.timeline.rv-list.in>li.on{opacity:1}
.rv-done,.rv-done>*,.rv-done .w>*{transition-delay:0s!important}
.reveal.timeline.rv-done>li{transition:opacity .6s var(--ease)}
.reveal.tiers.rv-done>.tier{transition:border-color .4s,background-color .4s}
/* Innenleben: jede Information kommt in ihrem eigenen Takt nach der Zeile, zu der sie gehört (--i erbt die Zeile)
   Kleine Versalien ziehen die Sperrung zusammen · Jahreszahlen gleiten von links · Pillen und Karten setzen sich · Zahlen zählen hoch (JS) */
.reveal .label,.reveal dt,.reveal.parts small,.reveal .yr{transition:letter-spacing 1.4s var(--rv) calc(var(--d) + var(--i,0)*70ms + 120ms),opacity 1s var(--rv) calc(var(--d) + var(--i,0)*70ms + 120ms),transform 1.2s var(--rv) calc(var(--d) + var(--i,0)*70ms + 60ms)}
.reveal:not(.in) .label,.reveal:not(.in) dt,.reveal.parts:not(.in) small{letter-spacing:.42em;opacity:0}
.reveal.timeline:not(.in) .yr{transform:translateX(-12px);opacity:0}
.reveal.timeline .ev,.reveal.models span,.reveal.parts span span,.reveal.tiers .ex,.reveal.know p,.reveal.spec dd,.reveal.facts b{transition:opacity 1s var(--rv) calc(var(--d) + var(--i,0)*70ms + 200ms),transform 1.2s var(--rv) calc(var(--d) + var(--i,0)*70ms + 200ms)}
.reveal.timeline:not(.in) .ev,.reveal.models:not(.in) span,.reveal.tiers:not(.in) .ex,.reveal.know:not(.in) p,.reveal.spec:not(.in) dd,.reveal.facts:not(.in) b{opacity:0;transform:translateY(6px)}
.reveal.steps>li{transition:opacity .8s var(--rv) calc(var(--d) + var(--i,0)*90ms),transform 1s var(--rv) calc(var(--d) + var(--i,0)*90ms),border-color .3s,color .3s}
.reveal.steps:not(.in)>li{transform:translateY(8px) scale(.94)}
.reveal.tiers:not(.in)>.tier{transform:translateY(14px) scale(.985)}
.reveal.endnav>*{transition:opacity 1s var(--rv) calc(var(--d) + 150ms),border-color 1.4s var(--rv) calc(var(--d) + 350ms),color .3s}
.reveal.endnav:not(.in)>*{border-bottom-color:transparent}
.is-detail .dnav button{animation:dnavIn .9s var(--rv) both;animation-delay:calc(.45s + var(--i,0)*70ms)}
@keyframes dnavIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rv-done .label,.rv-done dt,.rv-done .yr,.rv-done .ev,.rv-done .models span,.rv-done .tier .ex,.rv-done .know p,.rv-done .spec dd,.rv-done .facts b,.rv-done .parts small{transition-delay:0s!important}
h2.wide{overflow-wrap:break-word;hyphens:auto;text-wrap:balance;font-weight:400;font-size:clamp(2.1rem,3.3vw,4.4rem);line-height:.96;letter-spacing:-.03em}
.h1d{font-family:var(--display);font-weight:400;font-size:clamp(3.6rem,8.4vw,10rem);line-height:.86;letter-spacing:-.045em;margin:0;hyphens:manual}
.lead{font-size:clamp(17px,.5vw + 10.5px,21px);line-height:1.6;color:var(--muted);max-width:46ch}
.p{color:var(--muted);font-size:clamp(15px,.36vw + 10.4px,18px);line-height:1.65;max-width:62ch}
.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(228,225,217,.08);border-radius:18px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair)}
.facts div{padding:14px 0;border-bottom:1px solid var(--hair);display:grid;gap:3px}
.facts div:nth-child(odd){padding-right:16px}
.facts b{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.2vw,23px);font-variant-numeric:tabular-nums}
.note{font-size:12px;color:var(--dim)}
.scrollcue{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.scrollcue i{width:1px;height:42px;background:linear-gradient(var(--ink),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.parts{list-style:none;padding:0;display:grid}
.parts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--hair);font-size:clamp(14.5px,.3vw + 10.5px,17px);color:var(--muted)}
.parts li b{color:var(--ink);font-weight:500;display:block}
.parts li small{font-size:11px;letter-spacing:.2em;color:var(--dim);padding-top:3px;font-variant-numeric:tabular-nums}

.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)}
.spec div{padding:12px 0;border-bottom:1px solid var(--hair);display:grid;gap:2px}
.spec div:nth-child(odd){padding-right:14px}
.spec dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.spec dd{margin:0;font-family:var(--display);font-size:clamp(16px,1vw,19px);font-variant-numeric:tabular-nums}
.models{list-style:none;padding:0;display:grid;gap:0}
.models li{display:grid;gap:1px;padding:11px 0;border-top:1px solid var(--hair)}
.models b{font-weight:500;font-size:14.5px}
.models span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.steps{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:s}
.steps li{counter-increment:s;display:inline-flex;gap:8px;align-items:center;padding:7px 12px 7px 8px;border:1px solid var(--hair);border-radius:999px;font-size:12.5px;color:var(--muted)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(228,225,217,.08);font-size:11px;color:var(--ink)}
.steps li.on{border-color:rgba(124,207,218,.6);color:var(--ink)}
.steps li.on::before{background:var(--accent);color:#061013}
.wm{display:grid;gap:3px;font-size:14.5px;padding-top:4px}

.tiers{display:grid;gap:10px}
.tier{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;text-align:left;padding:18px 20px;border-radius:16px;border:1px solid var(--hair);transition:border-color .4s,background-color .4s}
.tier:hover{border-color:rgba(228,225,217,.24)}
.tier[aria-pressed="true"]{border-color:rgba(124,207,218,.55);background:rgba(124,207,218,.06)}
.tier .t{font-family:var(--display);font-weight:400;font-size:18px}
.tier .pr{font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}
.tier .ex{grid-column:1 / -1;font-size:13.5px;color:var(--muted)}

.know{display:grid;gap:0;border-bottom:1px solid var(--hair)}
.know .kn{padding:16px 0;border-top:1px solid var(--hair);display:grid;gap:6px}
.know h3{margin:0;font-size:15px;font-weight:500}
.know p{margin:0;font-size:clamp(14px,.3vw + 10px,16px);color:var(--muted);line-height:1.55}
.know .key{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.know .key b{font-family:var(--display);font-weight:400;font-size:26px;font-variant-numeric:tabular-nums}

.timeline{list-style:none;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--hair);opacity:.76;transition:opacity .6s var(--ease);cursor:pointer}
.timeline li.on{opacity:1}
.timeline .yr{font-family:var(--display);font-size:15px;font-variant-numeric:tabular-nums}
.timeline .ev{font-size:14.5px;color:var(--muted)}
.timeline .ev b{display:block;color:var(--ink);font-weight:500}

.record{font-family:var(--display);font-weight:300;font-size:clamp(5rem,14vw,12rem);line-height:.82;margin:0;font-variant-numeric:tabular-nums}
.endnav{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.endnav button,.endnav a{display:inline-flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);padding:12px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:color .3s,border-color .3s}
.endnav button:hover,.endnav a:hover{color:var(--ink);border-color:var(--ink)}
.src{margin-top:40px;font-size:12px;color:var(--dim);line-height:1.7;max-width:66ch;overflow-wrap:anywhere}

/* Bauteil-Marken und Maßlinien */
#labels,#dims{position:fixed;inset:0;z-index:20;pointer-events:none}
.pl{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s var(--ease)}
.pl .num{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums;background:rgba(12,14,16,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(228,225,217,.35)}
.pl .num::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(228,225,217,.1)}
.dm{position:absolute;left:0;top:0;height:1px;transform-origin:0 50%;opacity:0;transition:opacity .5s var(--ease)}
.dm::before{content:"";position:absolute;inset:0;background:rgba(228,225,217,.45)}
.dm::after{content:"";position:absolute;left:0;right:0;top:-4px;height:9px;border-left:1px solid rgba(228,225,217,.55);border-right:1px solid rgba(228,225,217,.55)}
.dm b{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:3px 8px;border-radius:999px;background:rgba(10,11,13,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .nav{grid-template-columns:auto 1fr auto}
  .nav__marke{display:none}
  .dnav{justify-self:center}
  .dnav button{padding:6px 8px;font-size:11px}
  .ton span{display:none}
  .navr{gap:4px}
  .navr .ton{min-width:44px;min-height:44px;justify-content:center}
  .ov-copy{left:16px;top:calc(68px + env(safe-area-inset-top,0px))}
  .is-detail .ov-copy{transform:translateY(30px)}
    .ov h1{font-size:clamp(2rem,10.4vw,3.6rem)}
  .h1d{font-size:clamp(2.4rem,11.5vw,4rem)}
                    .toylab span{font-size:11px}
  .specs{gap:18px}
  .hint{display:none}
  .ch,.ch[data-side="right"],.ch[data-side="center"]{display:flex;justify-content:center;align-items:flex-end;padding-top:56svh;padding-bottom:12vh}
  .ch.tall{min-height:100vh}
  .col,.ch[data-side="center"] .col{max-width:none;width:100%}
  .ch .col{background:var(--glass);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(228,225,217,.08);border-radius:20px;padding:24px 20px}
  .ch[data-side="center"] .col{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .timeline li{grid-template-columns:76px minmax(0,1fr)}
  #labels,#dims{display:none}
}
@media (max-width:520px){.nav .pille{padding:0 10px}.nav .pille{font-size:0;gap:0}.nav .pille span{font-size:14px}.is-detail .nav .pille{display:none}.navbtn span{display:none}.navbtn{padding:8px 4px}.nav{gap:6px}}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal *,.reveal .w>*,.reveal.rv-list>*{opacity:1!important;transform:none!important;transition:none!important;filter:none!important;}
  .is-detail .dnav button{animation:none}
  .rv-lines>*,.rv-grid>*,.rv-lines.know>:last-child{background-size:100% 1px!important}
  .scrollcue i{animation:none}
}
.nogl #gl{display:none}
.record.long{font-size:clamp(3.4rem,12vw,11rem);white-space:nowrap}

/* Übersicht als Folge von Abschnitten: großes Modell neben dem Text */
.ovlead{max-width:34rem;margin:0;color:var(--muted);font-size:1.05rem;line-height:1.55}
.ovi .scrollcue{pointer-events:none}
.ovt{pointer-events:auto;display:grid;gap:7px;justify-items:start}
.ovt .ovn{font-family:var(--display);font-size:11px;letter-spacing:.16em;color:var(--dim)}
.ovt h2{margin:.06em 0 .04em;font-family:var(--display);font-weight:400;line-height:.86;letter-spacing:-.045em;hyphens:manual;white-space:nowrap;pointer-events:none;user-select:text}
.bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.gltext #ovtitle,.gltext .ovt h2{color:transparent}
@media (min-width:861px){.gltext .h1d{color:transparent}}
.h1d{white-space:nowrap}
.ovt p{margin:0;color:var(--muted);line-height:1.5}
.ovt .ovm{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ovt .tl{position:static;transform:none!important;display:inline-flex;align-items:center;gap:.6em;margin-top:6px;padding:9px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:var(--ink);font-size:11px;background:rgba(10,11,12,.35);backdrop-filter:blur(6px)}
.ovt .tl:hover,.ovt .tl:focus-visible{border-color:var(--accent)}
.ovs[data-side="right"] .ovt{justify-items:end;text-align:right}
.ovs[data-side="right"] .ovt{display:flex;flex-direction:column;align-items:flex-end}

/* Übersicht als frei gesetztes Plakat (Desktop): alle Maße in vw, damit die Komposition mit der Breite skaliert.
   --tx/--ty/--tw Textblock (Headline überall 8vw), --bx/--by/--bw/--bh Platz des 3D-Modells (y ab Plakatoberkante unter der Navigation) */
@media (min-width:861px){
  .ov{--top:76px;height:calc(var(--ph,430)*1vw + var(--top))} /* Abstand Text → nächstes Modell derselben Spalte mind. 12vw, damit jeder Name klar bei seinem Modell steht */
  .ovi{position:absolute;left:0;top:0;width:100%;height:0}
  #ovtitle{position:absolute;left:var(--gut);top:var(--top)}
  .ovlead{position:absolute;left:70vw;top:calc(23vw + var(--top));width:24vw;max-width:none;font-size:clamp(13px,1.06vw,18px)}
  .ovi .scrollcue{position:absolute;left:70vw;top:calc(31.5vw + var(--top))}
  .ovs{position:absolute;inset:0;pointer-events:none}
  .ovt{position:absolute;left:calc(var(--tx)*1vw);top:calc(var(--ty)*1vw + var(--top));width:calc(var(--tw)*1vw);font-size:clamp(12.5px,1.02vw,17px)}
  .ovt h2{font-size:8vw}
  .ovb{position:absolute;left:calc(var(--bx)*1vw);top:calc(var(--by)*1vw + var(--top));width:calc(var(--bw)*1vw);height:calc(var(--bh)*1vw)}
  .ovs[data-toy="yoyo"]{--bx:36;--by:12;--bw:28;--bh:28;--tx:20;--ty:36;--tw:24}
  .ovs[data-toy="kendama"]{--bx:74;--by:36;--bw:18;--bh:30;--tx:62;--ty:62;--tw:30}
  .ovs[data-toy="diabolo"]{--bx:8;--by:64.8;--bw:32;--bh:28;--tx:26;--ty:89.8;--tw:26}
  .ovs[data-toy="kreisel"]{--bx:66;--by:89.3;--bw:22;--bh:18;--tx:60;--ty:104.3;--tw:30}
  .ovs[data-toy="poi"]{--bx:8;--by:118.6;--bw:16;--bh:30;--tx:20;--ty:145.6;--tw:22}
  .ovs[data-toy="baelle"]{--bx:62;--by:135.6;--bw:20;--bh:18;--tx:56;--ty:150.6;--tw:30}
  .ovs[data-toy="keulen"]{--bx:8;--by:174.4;--bw:18;--bh:24;--tx:22;--ty:194.4;--tw:24}
  .ovs[data-toy="ringe"]{--bx:62;--by:191.4;--bw:24;--bh:20;--tx:60;--ty:208.4;--tw:30}
  .ovs[data-toy="boxen"]{--bx:8;--by:221.7;--bw:40;--bh:14;--tx:8;--ty:232.7;--tw:26}
  .ovs[data-toy="devil"]{--bx:66;--by:238.7;--bw:22;--bh:26;--tx:52;--ty:260.7;--tw:40}
  .ovs[data-toy="kugel"]{--bx:10;--by:258.4;--bw:20;--bh:18;--tx:20;--ty:273.4;--tw:24}
  .ovs[data-toy="hoop"]{--bx:52;--by:286.4;--bw:40;--bh:26;--tx:56;--ty:304.4;--tw:34}
  .ovs[data-toy="cards"]{--bx:8;--by:303.4;--bw:18;--bh:20;--tx:20;--ty:319.4;--tw:24}
  .ovs[data-toy="pen"]{--bx:58;--by:330.1;--bw:32;--bh:16;--tx:44;--ty:344.1;--tw:46}
  .ovs[data-toy="finger"]{--bx:8;--by:347.1;--bw:32;--bh:16;--tx:18;--ty:360.1;--tw:26}
  .ovs[data-toy="cube"]{--bx:72;--by:369.8;--bw:16;--bh:16;--tx:44;--ty:382.8;--tw:48}
  .ovs[data-toy="stack"]{--bx:10;--by:387.4;--bw:26;--bh:24;--tx:22;--ty:407.4;--tw:26}
}
.is-detail .ov{display:none}
@media (max-width:820px){
  .ovi{display:flex;flex-direction:column;gap:18px;padding:calc(78px + env(safe-area-inset-top,0px)) 16px 6vw}
  .ovs{display:flex;flex-direction:column;padding:0 16px 9vw}
  .ovb{width:calc(var(--mw,66)*1vw);height:calc(var(--mh,58)*.88vw);margin-left:calc(var(--mx,0)*1vw);margin-bottom:-4vw}
  .ovs[data-side="right"] .ovb{margin-left:auto;margin-right:calc(var(--mx,0)*1vw)}
  .ovt{width:min(80vw,420px);font-size:15px}
  .ovs[data-side="right"] .ovt{margin-left:auto}
  .ovt h2{font-size:13vw;margin:2px 0}
  .ovs[data-toy="yoyo"]{--mw:80;--mh:66;--mx:10;--ms:17}
  .ovs[data-toy="kendama"]{--mw:44;--mh:72;--ms:15}
  .ovs[data-toy="diabolo"]{--mw:84;--mh:60;--ms:18}
  .ovs[data-toy="kreisel"]{--mw:52;--mh:42;--mx:6;--ms:12}
  .ovs[data-toy="poi"]{--mw:46;--mh:70;--ms:14}
  .ovs[data-toy="baelle"]{--mw:70;--mh:52;--ms:17}
  .ovs[data-toy="keulen"]{--mw:52;--mh:66;--mx:8;--ms:14}
  .ovs[data-toy="ringe"]{--mw:66;--mh:56;--ms:14}
  .ovs[data-toy="boxen"]{--mw:92;--mh:36;--ms:13}
  .ovs[data-toy="devil"]{--mw:58;--mh:62;--ms:13}
  .ovs[data-toy="kugel"]{--mw:58;--mh:50;--mx:6;--ms:12}
  .ovs[data-toy="hoop"]{--mw:92;--mh:74;--ms:16}
  .ovs[data-toy="cards"]{--mw:52;--mh:54;--ms:13}
  .ovs[data-toy="pen"]{--mw:70;--mh:46;--ms:12}
  .ovs[data-toy="finger"]{--mw:80;--mh:46;--ms:13}
  .ovs[data-toy="cube"]{--mw:46;--mh:44;--mx:8;--ms:11}
  .ovs[data-toy="stack"]{--mw:66;--mh:60;--ms:12}
}
/* Ausprobieren: eigener Abschnittstyp mit Steuerung – Kicker mit Linie, große Chips, großer Messwert, Regler */
.play .col{gap:22px}
.kicker{display:flex;align-items:center;gap:12px;margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-width:64px;padding:12px 20px;border-radius:999px;border:1px solid var(--hair);font-family:var(--display);font-size:clamp(15px,1.1vw,18px);letter-spacing:.02em;color:var(--muted);background:rgba(10,11,13,.25);cursor:pointer;transition:border-color .4s var(--ease),color .4s,background-color .4s,transform .5s var(--rv)}
.chip:hover{border-color:rgba(228,225,217,.32);color:var(--ink)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{border-color:rgba(124,207,218,.65);color:var(--ink);background:rgba(124,207,218,.09)}
.chip:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.reveal.chips.rv-done>.chip{transition:border-color .4s var(--ease),color .4s,background-color .4s,transform .5s var(--rv)}
.readout{display:grid;gap:8px;margin:0;padding-top:18px;border-top:1px solid var(--hair)}
.readout b{font-family:var(--display);font-weight:300;font-size:clamp(3.2rem,6.4vw,6rem);line-height:.86;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.readout span{max-width:42ch;font-size:clamp(14.5px,.3vw + 10.5px,17px);line-height:1.55;color:var(--muted)}
.slide{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.slide input{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--v:45%}
.slide input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--v),rgba(228,225,217,.18) var(--v))}
.slide input::-moz-range-track{height:2px;border-radius:2px;background:rgba(228,225,217,.18)}
.slide input::-moz-range-progress{height:2px;background:var(--accent)}
.slide input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--ink);border:0;box-shadow:0 0 0 6px rgba(124,207,218,.14);transition:box-shadow .3s}
.slide input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:0;box-shadow:0 0 0 6px rgba(124,207,218,.14)}
.slide input:active::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(124,207,218,.2)}
.slide input:focus-visible{outline:1px solid var(--accent);outline-offset:6px}
.slide__end{font-size:11px;letter-spacing:.16em;color:var(--dim)}
.slide__end:last-child{grid-column:3;justify-self:end}
@media (max-width:860px){ .chips{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px} .chip{min-width:0;padding:11px 6px;font-size:14px;letter-spacing:0;white-space:nowrap} .play .col{gap:16px} }

/* Mitmachen: Spielknopf, Schwung-Anzeige, eigenes Siteswap (Stand 02.11.2026) */
.game{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gbtn{min-width:156px;min-height:48px;padding:14px 26px;border-radius:999px;border:1px solid rgba(124,207,218,.55);background:rgba(124,207,218,.08);color:var(--ink);font-family:var(--display);font-size:clamp(15px,1.1vw,18px);letter-spacing:.02em;cursor:pointer;transition:background-color .3s,border-color .3s,opacity .3s,transform .2s;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.gbtn:hover{background:rgba(124,207,218,.14)}
.gbtn:active,.gbtn.is-hold{transform:scale(.97);background:rgba(124,207,218,.22)}
.gbtn[aria-disabled="true"]{opacity:.4;cursor:default;transform:none;background:rgba(124,207,218,.08)}
.gbtn:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.meter{flex:1;min-width:120px;height:2px;border-radius:2px;background:rgba(228,225,217,.18);overflow:hidden}
.meter i{display:block;height:100%;width:calc(var(--v,0)*100%);background:var(--accent)}
.ssw{display:grid;gap:10px;margin:0}
.ssw label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ssw__row{display:flex;gap:10px}
.ssw input{flex:1;min-width:0;min-height:46px;padding:10px 18px;border-radius:999px;border:1px solid var(--hair);background:rgba(10,11,13,.25);color:var(--ink);font-family:var(--display);font-size:clamp(15px,1.1vw,18px);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.ssw input::placeholder{color:var(--dim);letter-spacing:.02em}
.ssw input:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.ssw.bad input{border-color:rgba(232,128,112,.75)}
.ssw button{min-height:46px;padding:10px 22px;border-radius:999px;border:1px solid rgba(124,207,218,.55);background:rgba(124,207,218,.08);color:var(--ink);font-family:var(--display);font-size:clamp(14px,1vw,16px);cursor:pointer}
.ssw button:hover{background:rgba(124,207,218,.14)}
.ssw button:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.ssw__msg{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.ssw.bad .ssw__msg{color:#eab3a8}