:root{
  --void:#06080A; --graphite:#13171A; --concrete:#23282C; --plate:#F3F3F3;
  --brushed:#D6DADC; --mute:#7E868B; --ink:#14181B; --ink-mute:#5C6367;
  --seam:#F2A03D; --seam-dim:#7A5220; --beam:#5CC5FF;
  --gutter:clamp(1.25rem,4vw,3rem);
  --eo:cubic-bezier(.2,.7,.2,1); --el:cubic-bezier(.4,0,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--brushed);
  font-family:'Karla',system-ui,sans-serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--beam);outline-offset:2px}
h1,h2,.wordmark,.stat-n,.spec td:last-child{font-family:'Archivo',sans-serif}

/* Feines Korn gegen Banding in den Verlaufszonen */
body::after{content:'';position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.035;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Achse am rechten Rand ---------- */
.axis{position:fixed;left:20px;top:0;width:1px;height:100vh;
  background:var(--concrete);z-index:40;pointer-events:none;transition:background .4s var(--eo)}
.axis i{position:absolute;top:0;left:0;width:100%;height:0;display:block;
  background:var(--beam);box-shadow:0 0 12px rgba(92,197,255,.55);
  transition:background .4s var(--eo),box-shadow .4s var(--eo)}
body.on-light .axis{background:#CFCFCF}
body.on-light .axis i{background:var(--seam);box-shadow:0 0 10px rgba(242,160,61,.45)}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:64px;z-index:60;display:flex;
  align-items:center;justify-content:space-between;padding:0 var(--gutter);
  border-bottom:1px solid transparent;transition:background .3s var(--el),border-color .3s,color .3s}
.nav.stuck{background:rgba(6,8,10,.72);backdrop-filter:blur(16px);border-bottom-color:var(--concrete)}
body.on-light .nav.stuck{background:rgba(243,243,243,.78);border-bottom-color:#DADADA;color:var(--ink)}
body.on-light .nav.stuck .nav-links a{color:var(--ink-mute)}
body.on-light .nav.stuck .btn{background:var(--ink);color:var(--plate);border-color:var(--ink)}
.wordmark{font-size:1.05rem;font-variation-settings:'wdth' 118,'wght' 600;letter-spacing:.02em}
.nav-links{display:flex;gap:2.5rem;align-items:center;font-size:.9375rem}
.nav-links a{color:var(--mute);transition:color .2s var(--el)}
.nav-links a:hover{color:var(--brushed)}

.btn{display:inline-block;border-radius:2px;padding:14px 28px;font-weight:500;font-size:.9375rem;
  background:var(--brushed);color:var(--ink);border:1px solid var(--brushed);
  transition:background .22s var(--el),color .22s var(--el),border-color .22s var(--el);cursor:pointer}
.btn:hover{background:var(--beam);border-color:var(--beam);color:var(--void)}
.btn--sm{padding:9px 18px}
.btn--ghost{background:transparent;color:var(--brushed);border-color:var(--concrete)}
.btn--ghost:hover{background:transparent;color:var(--beam);border-color:var(--beam)}

/* ---------- Raster ---------- */
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter);width:100%}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;width:100%}
.col{grid-column:8/13}
h1{font-variation-settings:'wdth' 115,'wght' 600;
   font-size:clamp(2.2rem,4.8vw,4.2rem);line-height:.94;letter-spacing:-.03em}
h2{font-variation-settings:'wdth' 112,'wght' 600;
   font-size:clamp(1.8rem,3.6vw,3rem);line-height:1;letter-spacing:-.02em}
.lead{margin-top:1.25rem;max-width:33ch;color:var(--mute);font-size:1.1rem}

/* ---------- Scrub-Bühnen ---------- */
.scrub{position:relative}
.sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sticky .poster{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:27% center}
.sticky .wrap{position:relative;z-index:4;height:100%;display:flex;align-items:center}

#hero{height:260vh}
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,
    rgba(6,8,10,0) 36%, rgba(6,8,10,.04) 41.5%, rgba(6,8,10,.16) 47%,
    rgba(6,8,10,.32) 52.5%, rgba(6,8,10,.5) 58%, rgba(6,8,10,.68) 63.5%,
    rgba(6,8,10,.84) 69%, rgba(6,8,10,.96) 74.5%, #06080A 80%)}
.fade-b{position:absolute;inset:auto 0 0 0;height:24%;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(6,8,10,0) 0%, rgba(6,8,10,.05) 16%, rgba(6,8,10,.18) 32%,
    rgba(6,8,10,.4) 48%, rgba(6,8,10,.63) 64%, rgba(6,8,10,.84) 80%,
    rgba(6,8,10,.96) 92%, #06080A 100%)}
.step{transition:opacity .5s var(--eo),transform .5s var(--eo)}
.step.off{opacity:0;transform:translateY(14px);pointer-events:none}
.stack{display:grid}
.stack > *{grid-area:1/1}

.light-sec{background:var(--plate);color:var(--ink)}
.light-sec h2,.light-sec h3{color:var(--ink)}
.light-sec .lead{color:var(--ink-mute)}
#technik{height:360vh}
.parts{list-style:none;margin-top:2rem;max-width:42ch}
.parts li{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem;
  overflow:hidden;max-height:0;padding:0;opacity:0;transform:translateY(6px);
  border-bottom:1px solid transparent;
  transition:max-height .4s var(--eo),padding .4s var(--eo),opacity .32s var(--eo),
             transform .4s var(--eo),border-color .4s linear}
.parts li.on{max-height:3.4rem;padding:.6rem 0;opacity:1;transform:none;border-bottom-color:#D9D9D9}
.parts li span:last-child{color:var(--ink-mute)}

/* ---------- Bildsektionen: Bild als Bühne, Text darüber ---------- */
.stage{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:9rem 0;overflow:hidden}
.stage-bg{position:absolute;inset:0;z-index:0}
.stage-bg img{width:100%;height:100%;object-fit:cover;
  object-position:var(--obj,40%) center}
.stage-bg .veil{position:absolute;inset:0}
.stage-bg .veil::before{content:'';position:absolute;inset:0;opacity:var(--veil-x,1);
  background:linear-gradient(to right,
    rgba(6,8,10,0) 26%, rgba(6,8,10,.04) 33.25%, rgba(6,8,10,.16) 40.5%,
    rgba(6,8,10,.32) 47.75%, rgba(6,8,10,.5) 55%, rgba(6,8,10,.68) 62.25%,
    rgba(6,8,10,.84) 69.5%, rgba(6,8,10,.96) 76.75%, #06080A 84%)}
.stage-bg .veil::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(6,8,10,.5) 0%, rgba(6,8,10,.3) 8%, rgba(6,8,10,.13) 16%,
    rgba(6,8,10,.03) 22%, rgba(6,8,10,0) 26%,
    rgba(6,8,10,0) 70%, rgba(6,8,10,.04) 74%, rgba(6,8,10,.16) 78.5%,
    rgba(6,8,10,.35) 83%, rgba(6,8,10,.55) 87%, rgba(6,8,10,.75) 91%,
    rgba(6,8,10,.92) 95.5%, #06080A 100%)}
.stage .wrap{position:relative;z-index:2}
.stage-caption{position:absolute;left:var(--gutter);bottom:2.5rem;z-index:2;
  font-size:.9375rem;color:var(--mute)}
.stats{display:flex;gap:4rem;flex-wrap:wrap;margin-top:2.5rem}
.stat-n{font-size:clamp(2rem,3.6vw,3rem);line-height:1;font-variation-settings:'wdth' 110,'wght' 600}
.stat-l{font-size:.9375rem;color:var(--mute);margin-top:.3rem}

/* ---------- Daten ---------- */
.spec{width:100%;border-collapse:collapse;margin-top:2.5rem;max-width:560px}
.spec tr{border-bottom:1px solid var(--concrete)}
.spec td{padding:1rem 0;font-size:.9375rem}
.spec td:first-child{color:var(--mute)}
.spec td:last-child{text-align:right;font-variant-numeric:tabular-nums;
  font-variation-settings:'wdth' 108,'wght' 500}
.outro{position:relative;background:var(--void)}
.order{padding:8rem 0 7rem}

/* Aperture-Moment: die Makro-Sektion oeffnet sich kreisfoermig aus der Aperturmitte */
#aperture{clip-path:circle(150% at 52% 45%)}

/* ---------- Neue Inhaltsbausteine ---------- */
.eyebrow{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--seam);margin-bottom:1.1rem;font-weight:500}
.cta-row{margin-top:2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.body-copy{margin-top:1.25rem;max-width:58ch;color:var(--brushed);font-size:1.0625rem}
.light-sec .body-copy{color:var(--ink)}
.body-copy.strong{font-weight:500;font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 110,'wght' 500;font-size:1.25rem}
.tblock{padding:11rem 0 8rem}
.tblock-sm{padding:6rem 0 8rem}

/* Zentrierte Textbloecke (Sektionen ohne Bild) mit gestaffelter Einblendung */
.cblock{max-width:62ch;margin:0 auto;text-align:center}
.cblock .lead,.cblock .body-copy{margin-left:auto;margin-right:auto}
.cblock .cta-row{justify-content:center}
.cblock .highlight{border-left:0;padding:2.2rem 0 0;margin:2.5rem auto 0;position:relative}
.cblock .highlight::before{content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:40px;height:2px;background:var(--seam)}
.cblock.rise{opacity:1;transform:none}
.cblock.rise > *{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--eo),transform .6s var(--eo)}
.cblock.rise > *:nth-child(2){transition-delay:.09s}
.cblock.rise > *:nth-child(3){transition-delay:.18s}
.cblock.rise > *:nth-child(4){transition-delay:.27s}
.cblock.rise > *:nth-child(5){transition-delay:.36s}
.cblock.rise.in > *{opacity:1;transform:none}
h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110,'wght' 600;
  font-size:1.35rem;line-height:1.15;letter-spacing:-.01em}
h4{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110,'wght' 500;
  font-size:.9375rem;letter-spacing:.02em}
.quote{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 600;
  font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.12;letter-spacing:-.02em;max-width:20ch}
.highlight{margin-top:2.5rem;padding-left:1.25rem;border-left:2px solid var(--seam);
  max-width:44ch;font-size:1.2rem;line-height:1.5;color:var(--brushed)}

/* Use Cases und Komponenten: Typografie-Raster ohne Karten */
.uc-grid,.comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem;
  padding:0 0 9rem}
.uc,.comp{padding:2.25rem 0;border-top:1px solid var(--concrete)}
.comp{border-top-color:#D9D9D9}
.uc-label{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.8rem}
.light-sec .uc-label{color:var(--ink-mute)}
.uc p,.comp p{margin-top:.7rem;max-width:48ch;font-size:1rem;color:var(--brushed)}
.light-sec .comp p{color:var(--ink)}
.uc-tags{color:var(--mute)!important;font-size:.9375rem!important}
.mini-spec{list-style:none;margin-top:1rem;font-size:.9375rem;color:var(--ink-mute)}
.mini-spec li{padding:.35rem 0;border-top:1px solid #E2E2E2}
.techdetail{padding:7rem 0 2rem}

/* Use-Cases: Sticky-Scrub, die Fahrt folgt dem Scroll sequenziell
   (JS, ohne Eingriff in Rad oder Scrollposition); mobil nativ */
#ucscrub{height:280vh;position:relative}
.ucsticky{position:sticky;top:0;height:100svh;overflow:hidden}
.uctrack{display:flex;height:100%;will-change:transform}
.ucpanel{position:relative;flex:0 0 100vw;height:100%;overflow:hidden;
  display:flex;align-items:flex-end;padding-bottom:6rem}
.ucpanel .wrap{position:relative;z-index:2;width:100%;display:block;height:auto}
.uc-h{font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.02em}
.uc-copy{margin-top:1rem;max-width:52ch;color:var(--brushed);font-size:1.0625rem}
.ucpanel .uc-tags{margin-top:1rem}
.ucpanel .veil::before{opacity:.2}
.ucpanel .veil::after{background:linear-gradient(to bottom,
  #06080A 0%, rgba(6,8,10,.96) 4%, rgba(6,8,10,.84) 8%, rgba(6,8,10,.63) 13%,
  rgba(6,8,10,.4) 18%, rgba(6,8,10,.18) 22%, rgba(6,8,10,.05) 25%, rgba(6,8,10,0) 28%,
  rgba(6,8,10,0) 46%, rgba(6,8,10,.05) 53%, rgba(6,8,10,.18) 61%,
  rgba(6,8,10,.4) 70%, rgba(6,8,10,.63) 79%, rgba(6,8,10,.84) 88%,
  rgba(6,8,10,.96) 95%, #06080A 100%)}

/* Volum-Studio-Mockup: freigestellter Monitor unter dem Textblock */
.studio-shot{max-width:1040px;margin:4.5rem auto 0;position:relative}
.studio-shot img{width:100%}
.studio-shot::before{content:'';position:absolute;inset:auto 8% -6% 8%;height:40%;
  background:radial-gradient(50% 100% at 50% 100%, rgba(92,197,255,.10), transparent 70%);
  z-index:-1;pointer-events:none}

/* Workflow: Intro links, vier Schritte rechts im 2x2-Grid */
.flow-grid{display:grid;grid-template-columns:5fr 6fr;gap:5rem;
  align-items:center;padding:7rem 0 6rem}
.flow2{display:grid;grid-template-columns:1fr 1fr;gap:3rem 3.5rem}
.flow2 b{display:block;font-family:'Archivo',sans-serif;font-weight:400;
  font-size:.8125rem;letter-spacing:.08em;color:var(--seam);
  font-variant-numeric:tabular-nums;margin-bottom:.9rem}
.flow2 h3{font-size:1.2rem}
.flow2 p{margin-top:.6rem;font-size:.9375rem;color:var(--mute)}
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;
  padding:2.5rem 0;border-top:1px solid var(--concrete);border-bottom:1px solid var(--concrete)}
.formats h4{color:var(--mute)}
.formats p{margin-top:.5rem;font-size:.9375rem;color:var(--brushed);line-height:1.7}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:4rem;padding:7rem 0 9rem}
.duo p{margin-top:.7rem;max-width:44ch;font-size:1rem;color:var(--brushed)}
.claim-sm{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110,'wght' 500;
  color:var(--mute)!important;margin-top:1.2rem!important}
.privacy{margin-top:2rem;max-width:44ch;font-size:.9375rem;color:var(--mute)}
.privacy span{display:block;color:var(--brushed);font-weight:500;margin-bottom:.3rem}

/* Spec-Gruppen */
.spec-cols{columns:2;column-gap:4rem;padding-bottom:8rem}
.sgroup{break-inside:avoid;margin-bottom:3.5rem}
.sgroup summary{list-style:none;cursor:default;pointer-events:none}
.sgroup summary::-webkit-details-marker{display:none}
.sgroup summary h3{display:inline-block}
.sgroup .spec{margin-top:1rem}
.brandline{margin-top:4rem;font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 112,'wght' 600;font-size:1.2rem;color:var(--brushed)}
/* ---------- Footer ---------- */
.footer{position:relative;z-index:2;background:var(--void);
  border-top:1px solid var(--concrete);padding:5rem 0 2.5rem;
  font-size:.9375rem;color:var(--mute)}
.f-top{display:flex;justify-content:space-between;gap:4rem;flex-wrap:wrap}
.f-brand p{margin-top:.6rem;color:var(--mute)}
.f-nav{display:flex;gap:5rem}
.f-nav h4{color:var(--mute);margin-bottom:1rem;font-weight:400;
  font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase}
.f-nav a,.f-nav span{display:block;padding:.3rem 0;color:var(--brushed)}
.f-nav a{transition:color .2s var(--el)}
.f-nav a:hover{color:var(--beam)}
.f-nav span{cursor:default}
.f-bottom{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--concrete);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8125rem}

.rise{opacity:0;transform:translateY(16px);transition:opacity .55s var(--eo),transform .55s var(--eo)}
.rise.in{opacity:1;transform:none}

/* ---------- Rechtsseiten ---------- */
.legal{max-width:62ch;margin:0 auto;padding:9rem var(--gutter) 6rem}
.legal h1{font-variation-settings:'wdth' 112,'wght' 600;font-family:'Archivo',sans-serif;
  font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;line-height:1.05}
.legal h2{font-size:1.35rem;margin-top:3rem}
.legal p{margin-top:1.1rem;color:var(--brushed)}
.legal p.mute{color:var(--mute);font-size:.9375rem}
.legal a{color:var(--beam)}
.legal-nav{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;
  padding:0 var(--gutter);background:rgba(6,8,10,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--concrete);z-index:60}

/* ---------- Laden ---------- */
.load{position:fixed;inset:0;z-index:90;background:var(--void);display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;transition:opacity .6s}
.load.done{opacity:0;pointer-events:none}
.load div{width:190px;height:1px;background:var(--concrete);position:relative}
.load div i{position:absolute;inset:0 auto 0 0;width:0;background:var(--beam);display:block}
.load span{font-size:12px;color:var(--mute);letter-spacing:.08em}

@media(max-width:900px){
  :root{--gutter:1.25rem}
  .col{grid-column:1/13}
  .wrap{padding:0 var(--gutter) 0 2rem}
  .axis{left:12px}
  #hero{height:220vh}#technik{height:300vh}
  .stage{padding:6rem 0;min-height:auto}
  .stage-caption{display:none}
  .stats{gap:2rem}
  .nav-links{gap:1rem;font-size:.75rem}
  /* Explosions-Scrub: Animation oben (Canvas), Text unten - keine Ueberlagerung */
  #technik .wrap{align-items:flex-end;padding-bottom:2.5rem}
  #technik h2{font-size:1.5rem}
  .parts{margin-top:1.2rem;max-width:100%}
  .parts li{font-size:.8125rem}
  .parts li.on{max-height:2.6rem;padding:.45rem 0}
  .tblock{padding:7rem 0 5rem}
  .ucpanel{padding-bottom:4rem}
  .uc-grid,.comp-grid,.duo{grid-template-columns:1fr;padding-bottom:5rem}
  .flow-grid{grid-template-columns:1fr;gap:3rem;padding:4rem 0}
  .flow2,.formats{grid-template-columns:1fr 1fr;gap:2rem}
  .spec-cols{columns:1;padding-bottom:5rem}
  .sgroup{margin-bottom:1rem}
  .sgroup summary{cursor:pointer;pointer-events:auto;padding:.8rem 0;
    border-top:1px solid var(--concrete)}
  .sgroup summary h3::after{content:'+';float:right;color:var(--mute);font-weight:400}
  .sgroup[open] summary h3::after{content:'–'}
  .sgroup summary h3{display:block}
}
/* Hochformat: Text liegt ueber der Bildmitte -> vertikal daempfen
   (Hero-Scrim und Stage-Veils sind fuer Querformat komponiert) */
@media (orientation: portrait){
  .scrim{background:linear-gradient(to bottom,
    rgba(6,8,10,.3) 0%, rgba(6,8,10,.48) 28%, rgba(6,8,10,.62) 48%,
    rgba(6,8,10,.5) 66%, rgba(6,8,10,.3) 82%, rgba(6,8,10,.15) 100%)}
  .stage-bg .veil::before{background:linear-gradient(to bottom,
    rgba(6,8,10,.3) 0%, rgba(6,8,10,.5) 32%, rgba(6,8,10,.6) 50%,
    rgba(6,8,10,.5) 68%, rgba(6,8,10,.3) 100%)}
}

/* Ultrawide (21:9 und breiter — maximierte 16:9-Fenster liegen bei ~2.05
   und bleiben unberuehrt): Bilder hoehenbuendig statt beschnitten, flush
   links; der Rest laeuft in den Seitengrund aus */
@media (min-aspect-ratio: 21/10){
  .stage-bg img,.sticky .poster{object-fit:contain;object-position:left center}
  /* Bildkante weich in den Seitengrund ausblenden: die hoehenbuendigen
     Bilder sind 100svh x 1.78 breit, der Verlauf deckt ihr letztes Drittel */
  .stage-bg::after{content:'';position:absolute;top:0;bottom:0;
    left:calc(100svh * 0.92);width:calc(100svh * 0.92);pointer-events:none;
    background:linear-gradient(to right,
      rgba(6,8,10,0) 0%, rgba(6,8,10,.04) 14%, rgba(6,8,10,.16) 28%,
      rgba(6,8,10,.35) 42%, rgba(6,8,10,.58) 56%, rgba(6,8,10,.8) 70%,
      rgba(6,8,10,.94) 84%, #06080A 96%)}
  /* Use Cases: Text nicht mehr im Bild, sondern auf der dunklen
     rechten Seite, vertikal mittig */
  .ucpanel{align-items:center;padding-bottom:0}
  .ucpanel .wrap{display:grid;justify-content:center;max-width:none;
    padding-left:calc(100svh * 1.85);padding-right:var(--gutter)}
  .ucpanel .wrap > *{max-width:46ch}
}

/* Gruenderzitat: heller Zwischenblock */
.founder{padding:9rem 0}
.fquote{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 600;
  font-size:clamp(1.6rem,3.2vw,2.8rem);line-height:1.15;letter-spacing:-.02em;
  color:var(--ink)}
.fattr{margin-top:1.6rem;font-size:.9375rem;color:var(--ink-mute)}

/* Swipe-Bedienelemente fuer den Use-Case-Scroller (nur Touch) */
.ucnav{display:none;position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  z-index:5;align-items:center;gap:1rem}
.ucnav button{width:38px;height:38px;border-radius:2px;border:1px solid rgba(214,218,220,.35);
  background:rgba(6,8,10,.45);color:var(--brushed);font-size:1.3rem;line-height:1;
  cursor:pointer;padding:0}
.ucdots{display:flex;gap:.6rem}
.ucdots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;
  background:rgba(214,218,220,.35);cursor:pointer}
.ucdots button.on{background:var(--beam)}

/* Touch-Geraete: nativer horizontaler Snap-Scroller */
@media (pointer:coarse){
  #ucscrub{height:auto}
  .ucsticky{position:static;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .ucsticky::-webkit-scrollbar{display:none}
  .uctrack{transform:none!important;width:max-content}
  .ucpanel{scroll-snap-align:start}
  .ucnav{display:flex}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
  .cblock.rise > *{opacity:1;transform:none;transition:none}
  .step.off{opacity:1;transform:none}
}