/* Keefile — Hauptseite. Dunkel UND hell: alle Farben als flippbare Tokens. */
@font-face{font-family:"Gotham";src:url("../fonts/gotham-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("../fonts/gotham-book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("../fonts/gotham-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("../fonts/gotham-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("../fonts/gotham-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --bg:#f2f0ec;
  --ink:#141317;
  --dim:rgba(20,19,23,.62);
  --faint:rgba(20,19,23,.34);
  --line:rgba(20,19,23,.16);
  --accent:#4348d6;          /* Figma-Indigo (#5155e9) abgedunkelt fuer Kontrast auf hell */
  --btn:#141317;             /* CTA monochrom: dunkel auf hell */
  --btnInk:#f5f4f1;
  --card:rgba(255,254,251,.66);
  --beam:rgba(81,85,233,.05);
  --vig:radial-gradient(ellipse at 50% 46%, rgba(50,50,70,0) 44%, rgba(50,50,70,.14) 100%);
}
:root[data-theme="dark"]{
  --bg:#060608;
  --ink:#f2f1ee;
  --dim:rgba(242,241,238,.60);
  --faint:rgba(242,241,238,.32);
  --line:rgba(242,241,238,.16);
  --accent:#7a7ef7;          /* Figma-Indigo #5155e9, angehoben fuer Lesbarkeit auf Schwarz */
  --btn:#f2f1ee;             /* CTA monochrom: hell auf dunkel */
  --btnInk:#0a0a0c;
  --card:rgba(16,16,20,.62);
  --beam:rgba(81,85,233,.07);
  --vig:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
/* HARD RULE Lenis: overflow-x CLIP, niemals hidden — hidden macht body zum Scroll-Container. */
html,body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Gotham","Avenir Next","Helvetica Neue",system-ui,sans-serif;
  font-weight:500;
  transition:background .5s ease,color .5s ease;
}

/* Buehne lebt komplett in der three.js-Szene (Raum-Dome + Boden).
   #plates = nur noch Grundfarbe hinter dem Canvas, #beam entfaellt. */
#plates{position:fixed;inset:0;z-index:-4;background:var(--bg)}
.plate{display:none}
#beam{display:none}

/* ---- WebGL + Post ---- */
#stage{position:fixed;inset:0;z-index:-3}
#stage canvas{display:block;touch-action:pan-y}
#vig{position:fixed;inset:0;pointer-events:none;z-index:-2;background:var(--vig)}
/* Korn: soft-light + schmale Gauss-Amplitude — overlay flackert auf hellen Partien (18.08.) */
#grain{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.09;mix-blend-mode:soft-light;
  background-image:var(--grain);background-size:180px 180px}

/* ---- Header ---- */
header#top{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
}
.wordmark{
  color:var(--ink);text-decoration:none;font-size:1.05rem;letter-spacing:.34em;
  text-transform:lowercase;
}
header nav{display:flex;gap:.7rem;align-items:center}
#themeToggle,#soundToggle{
  width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s;
}
#themeToggle:hover,#soundToggle:hover{transform:translateY(-1px);border-color:var(--accent)}
html.sound-on .i-snd-off{display:none}
html:not(.sound-on) .i-snd-on{display:none}
html:not(.sound-on) #soundToggle{color:var(--faint)}
:root[data-theme="dark"] .i-moon{display:none}
:root[data-theme="light"] .i-sun{display:none}
.cta{
  border-radius:999px;padding:.6rem 1.15rem;text-decoration:none;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;cursor:pointer;font-family:inherit;
}
.cta:hover{transform:translateY(-1px);filter:brightness(1.1)}
/* CTA = polierte Stahl-Kapsel (passend zum Produkt): dunkles Metall, Glaskante,
   wandernder Licht-Sweep auf Hover — technisch-premium statt Farb-Button */
.cta,.btn-order{
  position:relative;overflow:clip;border:1px solid rgba(255,255,255,.28);color:#fff;
  text-transform:uppercase;letter-spacing:.08em;
  background:linear-gradient(180deg, #33333b 0%, #17171d 45%, #0b0b10 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.6),
             0 12px 30px rgba(0,0,0,.42);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;
}
.cta:hover,.btn-order:hover{border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.6),
             0 14px 36px rgba(0,0,0,.5)}
.cta:active,.btn-order:active{transform:translateY(1px) scale(.99)}
.cta::after,.btn-order::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg);transition:left .05s;
}
.cta:hover::after,.btn-order:hover::after{left:125%;transition:left .7s cubic-bezier(.3,.6,.3,1)}
:root:not([data-theme="dark"]) .cta, :root:not([data-theme="dark"]) .btn-order{
  border-color:rgba(0,0,0,.35);
  background:linear-gradient(180deg, #3a3a42 0%, #1a1a20 45%, #0c0c10 100%);
}

/* ---- Loader ---- */
#introStill{position:fixed;inset:0;z-index:-2;pointer-events:none}
#introStill img{width:100%;height:100%;object-fit:cover;display:block}
#introStill.done{transition:opacity .9s ease;opacity:0}
#loading{
  position:fixed;inset:0;z-index:40;background:transparent;
  display:grid;place-items:center;place-content:end center;gap:1rem;text-align:center;
  padding-bottom:14vh;
  transition:opacity .6s ease;
}
#loadbar{width:min(240px,60vw);height:1px;background:rgba(255,255,255,.16);overflow:clip;border-radius:2px}
#loadbar i{display:block;height:100%;width:0%;background:rgba(255,255,255,.85);transition:width .25s ease}
#loading.done{opacity:0;pointer-events:none}
#loading span{letter-spacing:.4em;font-size:1.1rem;text-transform:lowercase;color:#f2f1ee}
#loading em{font-style:normal;font-size:.68rem;color:rgba(242,241,238,.5);letter-spacing:.28em;text-transform:uppercase;font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* ---- Sektionen / Quadranten ---- */
/* KEIN position/z-index auf main/section — wuerde den Difference-Blend isolieren */
/* Blend-Layer: Headlines leben als synchronisierte Klone in EINEM fixed Layer mit
   difference — invertieren sich echt gegen Canvas/Raum (sticky-Eltern wuerden das isolieren). */
#blendLayer{position:fixed;inset:0;z-index:15;pointer-events:none;mix-blend-mode:difference}
#blendLayer .display{position:absolute;left:0;top:0;margin:0;color:#fff}
:root:not([data-theme="dark"]) #blendLayer{mix-blend-mode:normal}
:root:not([data-theme="dark"]) #blendLayer .display{color:#161519}
.bl-src{visibility:hidden}
/* Sektionen fangen keine Pointer-Events — sonst erreicht ein Drag im Konfigurator nie den Canvas (z -3);
   nur echte Inhalte (Textblock, Karten, Footer) bleiben klickbar. */
.s{min-height:170vh;pointer-events:none}
.s .block,.s footer,.wcard{pointer-events:auto}
/* Konfigurator (OrbitControls): der Canvas liegt sonst auf z -3 HINTER dem Body-Hintergrund → Pointer-Events
   treffen immer BODY. Waehrend `html.orbit` kommt der Canvas ueber die Sektionen, Text/CTA bleiben darueber. */
html.orbit #stage{z-index:1}
html.orbit #vig{z-index:2}
html.orbit #grain{z-index:3}
html.orbit #config .copy{z-index:4}
html.orbit #stage canvas{cursor:grab}
html.orbit #stage canvas:active{cursor:grabbing}
.s.z{min-height:165vh}
#intro{min-height:110vh}
#hero{min-height:170vh}
#dock{min-height:260vh}
#config{min-height:150vh}
#waitlist{min-height:110vh;display:flex;flex-direction:column}

.copy{
  position:sticky;top:0;height:100svh;
  display:flex;padding:clamp(1.4rem,calc(var(--cw) * .06),5rem);
  pointer-events:none;
}
.copy .block{max-width:min(560px,calc(var(--cw) * .40));pointer-events:auto}
.q-l {justify-content:flex-start;align-items:center}
.q-r {justify-content:flex-end;align-items:center}
.q-tl{justify-content:flex-start;align-items:flex-start;padding-top:clamp(5rem,12vh,9rem)}
.q-tr{justify-content:flex-end;align-items:flex-start;padding-top:clamp(5rem,12vh,9rem)}
.q-bl{justify-content:flex-start;align-items:flex-end;padding-bottom:clamp(4rem,10vh,8rem)}
.q-br{justify-content:flex-end;align-items:flex-end;padding-bottom:clamp(4rem,10vh,8rem)}
.q-c {justify-content:center;align-items:center;text-align:center}
.block.center{max-width:min(680px,calc(var(--cw) * .86))}

/* ---- Typo: gross, knapp ---- */
.kicker{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.74rem;letter-spacing:.30em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.1rem;display:flex;align-items:center;gap:.8rem;
}
.q-c .kicker{justify-content:center}
.kicker i{
  font-style:normal;font-size:.72rem;color:var(--faint);letter-spacing:.14em;
  border:1px solid var(--line);border-radius:999px;padding:.28rem .6rem;
}
.display{
  font-size:clamp(2.2rem,calc(var(--cw) * .044),4.4rem);
  line-height:1.04;letter-spacing:-.01em;text-transform:uppercase;font-weight:300;
  color:#fff;
}
.display.sm{font-size:clamp(1.9rem,calc(var(--cw) * .038),3.7rem)}
.display{white-space:nowrap}
.display .dl{white-space:nowrap}
/* Gewichts-Spiel: erste Zeile leicht, zweite schwer (Zeilen = .dl aus dem Split) */
.display .dl:nth-child(odd){font-weight:300;letter-spacing:.01em}
.display .dl:nth-child(even){font-weight:900;letter-spacing:-.015em}
.display b{font-weight:900;letter-spacing:-.015em}
/* Leads: Grundtext leicht (Book) und gedimmt, Schluesselbegriffe Medium in Tintenfarbe — editoriale Gewichtung */
.lead{
  margin-top:1.4rem;font-size:clamp(1.02rem,calc(var(--cw) * .0138),1.25rem);line-height:1.6;
  color:var(--dim);max-width:38ch;font-weight:400;letter-spacing:.002em;
}
.lead b{font-weight:500;color:var(--ink);letter-spacing:-.004em;
  transition:color .9s ease}
.lead b.dim{color:var(--dim)}
.q-c .lead{margin-inline:auto}
.seal{
  display:inline-block;margin-top:1.5rem;padding:.55rem 1.1rem;border:1px solid var(--accent);
  border-radius:999px;color:var(--accent);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
}
.price{color:var(--ink);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:600}
.scrollhint{
  margin-top:3rem;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:.9rem;
}
.scrollhint .tick{width:1px;height:2.6rem;background:var(--faint);display:block;
  animation:tickPulse 2.2s ease-in-out infinite}
@keyframes tickPulse{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}
.introhint{
  position:absolute;left:50%;bottom:7%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;opacity:0;
}
.ih-bash{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.8rem;
  letter-spacing:.3em;text-transform:lowercase;color:rgba(255,255,255,.7)}
.ih-cursor{display:inline-block;width:.55em;height:1em;margin-left:.35em;vertical-align:-.15em;
  background:rgba(255,255,255,.75);animation:ihBlink 1.1s steps(1) infinite}
@keyframes ihBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .ih-cursor{animation:none} }
#intro .copy{position:sticky}

/* ---- Konfigurator-Swatches (im Textblock links) ---- */
.hudrow{margin-top:1.8rem;display:flex;flex-direction:column;gap:.8rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap}
.swatch{
  width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--line);
  cursor:pointer;padding:0;
  transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.swatch:hover{transform:translateY(-2px)}
.swatch.on{outline:2px solid var(--accent);outline-offset:3px}
.swlabel{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.76rem;color:var(--dim);letter-spacing:.08em}

/* ---- Waitlist ---- */
#wl{margin-top:2.2rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
#wl .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
#wl input[type=email]{
  min-width:min(340px,72vw);padding:.85rem 1.2rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:.92rem;outline:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
#wl input[type=email]:focus{border-color:var(--accent)}
#wl button{
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid var(--btn);
  background:var(--btn);color:var(--btnInk);font:inherit;font-size:.88rem;font-weight:600;
  cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1);
}
#wl button:hover{transform:translateY(-1px)}
.formnote{margin-top:1rem;font-size:.8rem;color:var(--dim);min-height:1.2em}
#waitlist footer{
  margin-top:auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.4rem clamp(1.2rem,4vw,3rem);font-size:.72rem;color:var(--faint);
  border-top:1px solid var(--line);
}

/* ---- Mobil: Quadranten kippen auf gestapelt ---- */
@media (max-width:760px){
  .copy .block{max-width:88vw}
  .q-l,.q-r,.q-tl,.q-tr,.q-bl,.q-br{
    justify-content:flex-start;align-items:flex-end;padding-bottom:12vh;padding-top:0;
  }
  .display{font-size:clamp(2.1rem,9.5vw,3.2rem)}
  .display.sm{font-size:clamp(1.9rem,8.5vw,2.8rem)}
  .cta{display:none}
  #soundToggle{display:none}   /* mobil: Platz fuer Logo + Dock + Theme */
}

@media (prefers-reduced-motion: reduce){
  .scrollhint .tick{animation:none}
}

/* ---- Header-Logo ---- */
.logo-img{height:1.15rem;width:auto;display:block}
:root:not([data-theme="dark"]) .logo-img{filter:invert(1)}

/* ---- Real-World / Scale: schwebende Liquid-Glass-Karten ---- */
#wild{min-height:155vh}
.wildwrap{position:sticky;top:0;min-height:100svh;width:min(1280px,94%);margin:0 auto;
  padding:clamp(1.4rem,5vw,4rem) 0;
  display:flex;flex-direction:row;gap:clamp(2rem,4vw,4rem);align-items:flex-start;justify-content:space-between}
#wild .block{margin-top:clamp(4rem,14vh,9rem)}
#wild .wildcards{align-self:center}
#wild .block{max-width:min(560px,80%)}
.wildspec{margin-top:1.4rem;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.68rem;letter-spacing:.3em;color:var(--faint)}
.wildcards{display:flex;flex-direction:column;gap:1rem;width:min(340px,32vw);flex-shrink:0}
.wcard{
  width:100%;padding:.6rem;border-radius:22px;
  background:rgba(84,84,84,.12);
  -webkit-backdrop-filter:blur(45px) saturate(160%);backdrop-filter:blur(45px) saturate(160%);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18),
             0 24px 60px -20px rgba(0,0,0,.6);
  isolation:isolate;position:relative;
}
.wcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.10), transparent 55%);
  mix-blend-mode:plus-lighter}
:root:not([data-theme="dark"]) .wcard{
  background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.06),
             0 24px 60px -24px rgba(64,48,28,.25)}
.wcard:nth-child(1){transform:rotate(-1.4deg)}
.wcard:nth-child(2){transform:rotate(1deg)}
.wcard:nth-child(3){transform:rotate(-.8deg)}
.wfloat{position:relative;animation:wfloat 7s ease-in-out infinite alternate}
.wcard:nth-child(2) .wfloat{animation-duration:8.5s;animation-delay:.8s}
.wcard:nth-child(3) .wfloat{animation-duration:6.2s;animation-delay:.4s}
@keyframes wfloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.wfloat img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:17px}
.wfloat figcaption{
  position:absolute;left:.8rem;bottom:.7rem;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,14,.5);padding:.3rem .65rem;border-radius:999px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* Founder: Portrait als Glass-Karte links, persoenlicher Text rechts */
#founder{min-height:150vh}
.founderwrap{align-items:center;justify-content:center;gap:clamp(2.5rem,6vw,7rem)}
.fcard{width:min(340px,30vw);flex-shrink:0;transform:rotate(-1.2deg)}
.fcard .wfloat img{aspect-ratio:3/4}
#founder .block{max-width:min(520px,46%)}
#founder .lead + .lead{margin-top:1rem}
.fsign{margin-top:1.6rem;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent)}
@media (max-width:860px){
  .wildwrap{flex-direction:column;justify-content:center;gap:2rem}
  .wildcards{width:min(420px,88vw)}
  .founderwrap{justify-content:flex-start;padding-top:5.4rem;gap:1.4rem}
  .fcard{width:min(210px,50vw);align-self:flex-start}
  #founder .block{max-width:88vw}
  #founder .lead{font-size:.95rem}
}
@media (prefers-reduced-motion: reduce){ .wfloat{animation:none} }

/* ---- Order-Buttons ---- */
.btn-order{
  margin-top:1.2rem;padding:.85rem 1.5rem;border-radius:999px;
  font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
}
.btn-order:hover{transform:translateY(-1px);filter:brightness(1.12)}
.btn-order.big{width:100%;padding:1rem 1.5rem;font-size:.95rem}

/* ---- Order-Drawer (geschlossen: unsichtbar UND unklickbar — HARD RULE) ---- */
#orderScrim{
  position:fixed;inset:0;z-index:30;background:rgba(4,4,6,.55);
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;
}
#orderScrim.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .35s ease}
#orderDrawer{
  position:fixed;top:0;right:0;bottom:0;z-index:32;width:min(430px,100vw);
  background:rgba(7,7,10,.96);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  border-left:1px solid rgba(255,255,255,.14);color:#f2f1ee;padding:2rem 1.6rem;overflow-y:auto;
  transform:translateX(105%);visibility:hidden;pointer-events:none;
  transition:transform .45s cubic-bezier(.16,1,.3,1),visibility 0s .45s;
  display:flex;flex-direction:column;gap:1.1rem;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:max(2rem, env(safe-area-inset-bottom, 0px) + 1.2rem);
}
/* Kinder duerfen NICHT schrumpfen — bei kurzen Viewports scrollt der Drawer statt die 3D-Box zu quetschen */
#orderDrawer > *{flex:0 0 auto;min-height:0}
#orderDrawer.open{transform:translateX(0);visibility:visible;pointer-events:auto;transition:transform .45s cubic-bezier(.16,1,.3,1)}
#orderClose{
  /* sticky statt fixed: der Drawer ist selbst der Scroller (transform-Ancestor → fixed wuerde mitscrollen) */
  position:sticky;top:-1rem;align-self:flex-end;z-index:3;margin:-1rem -.6rem calc(-2.3rem - 1.1rem + 1rem) 0;
  width:2.3rem;height:2.3rem;border-radius:50%;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1.2rem;cursor:pointer;
}
.dtitle{font-size:1.9rem;letter-spacing:-.01em;text-transform:uppercase;font-weight:900;line-height:1}
.dgroup{display:flex;gap:.7rem}
#bundleRow .dcard{
  position:relative;flex:1;display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;
  border:1px solid var(--line);border-radius:14px;padding:.9rem;background:transparent;color:var(--ink);
  font:inherit;cursor:pointer;text-align:left;
}
#bundleRow .dcard.on{border-color:var(--ink);outline:1px solid var(--ink)}
.dname{font-weight:700;font-size:.95rem}
.dprice{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.9rem;color:var(--ink);font-weight:600}
.dnote{font-size:.72rem;color:var(--dim)}
.chip{
  position:absolute;top:-.55rem;right:.6rem;background:var(--accent);color:#fff;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.58rem;letter-spacing:.08em;
  padding:.2rem .5rem;border-radius:999px;
}
#finishRows{flex-direction:column}
.dqty{display:flex;align-items:center;gap:.6rem}
.qgroup{
  display:inline-flex;align-items:center;border-radius:999px;overflow:clip;
  background:rgba(84,84,84,.12);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.qbtn{width:2.4rem;height:2.4rem;border:0;background:transparent;color:#fff;
  font-size:1.1rem;line-height:1;cursor:pointer;transition:background .2s}
.qbtn:hover{background:rgba(255,255,255,.10)}
#qtyVal{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.95rem;min-width:2.2rem;text-align:center;color:#fff;
  border-left:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14);
  padding:.55rem 0;align-self:stretch;display:flex;align-items:center;justify-content:center}
.frow{display:flex;align-items:center;gap:.6rem}
.flabel{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.68rem;color:var(--faint);width:3.4rem;letter-spacing:.1em}
.fchip{
  border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;background:transparent;color:var(--ink);
  font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;
}
.fchip.on{border-color:var(--accent);color:var(--accent)}
.dsum{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:1rem;font-size:.9rem}
.dsum strong{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:1.25rem;color:var(--ink)}
.dnote2{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.62rem;letter-spacing:.1em;color:var(--faint);text-align:center}
#orderFallback{display:flex;gap:.6rem;flex-direction:column}
#orderFallback[hidden]{display:none} /* display:flex wuerde das [hidden]-Attribut sonst ueberstimmen */
#orderFallback input{
  padding:.85rem 1.2rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font:inherit;font-size:.9rem;outline:none;
}
#orderFallback input:focus{border-color:var(--accent)}
#orderFallback .btn-order{margin-top:0}

/* ---- Sektions-Linie (Header-Zeile): duenne Linie, Punkt je Sektion, Fortschritt fuellt nach;
   Hover auf einen Punkt zeigt den Sektionsnamen, Klick springt hin ---- */
#navline{
  position:fixed;left:0;right:var(--panel);top:0;height:calc(2.4rem + 2.2rem);z-index:21;pointer-events:none;
  opacity:0;transition:opacity .7s ease .25s,right .45s cubic-bezier(.16,1,.3,1);
  mix-blend-mode:difference;   /* weiss auf dunkel, dunkel auf hell — lesbar ueber Modell, Boden und Dome */
}
#navline.show{opacity:1}
.nl-seg{position:absolute;top:50%;height:1px;margin-top:-.5px;background:rgba(255,255,255,.30)}
.nl-seg::before{content:"";position:absolute;left:0;top:0;height:100%;width:var(--fill,0px);background:#fff;
  transition:width .18s linear}
.nl-dot{
  position:absolute;top:50%;width:1.6rem;height:1.6rem;margin:-.8rem 0 0 -.8rem;border:0;padding:0;
  background:transparent;cursor:pointer;pointer-events:auto;display:grid;place-items:center;color:#fff;
}
.nl-dot b{display:block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s}
.nl-dot.on b{background:#fff;transform:scale(1.35)}
.nl-dot.cur b{transform:scale(1.9)}
.nl-dot:hover b,.nl-dot:focus-visible b{transform:scale(2.3);background:#fff}
.nl-dot span{
  position:absolute;top:100%;left:50%;transform:translate(-50%,-5px);white-space:nowrap;pointer-events:none;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .25s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.nl-dot:hover span,.nl-dot:focus-visible span{opacity:1;transform:translate(-50%,0)}
.nl-dot:focus-visible{outline:none}
/* Reise laeuft: Zielpunkt pulsiert, Linie leuchtet leicht auf */
#navline.travel .nl-seg{background:rgba(255,255,255,.45)}
.nl-dot.target b{animation:nlPulse .9s ease-in-out infinite}
@keyframes nlPulse{0%,100%{transform:scale(1.6);opacity:1}50%{transform:scale(2.6);opacity:.55}}
@media (prefers-reduced-motion: reduce){ .nl-dot.target b{animation:none} }
@media (max-width:900px){ #navline{display:none} }

/* ---- Sticky Finish-Dock: Liquid-Glass-Kapsel unten mittig (Lanserring-Rezeptur), ab dem ersten
   Scroll sichtbar, folgt dem Push-Sidebar (right:var(--panel)), blendet am Footer aus ---- */
#finishDock{
  position:fixed;left:0;right:var(--panel);top:0;height:calc(2.4rem + 2.2rem); /* = Header-Zeile (Toggle 2.4rem + 2×1.1rem) */
  z-index:22;display:flex;justify-content:center;align-items:center;pointer-events:none;
  opacity:0;transform:translateY(-22px) scale(.96);visibility:hidden;
  transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s .45s,
             right .45s cubic-bezier(.16,1,.3,1);
}
#finishDock.show{opacity:1;transform:none;visibility:visible;
  transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1),right .45s cubic-bezier(.16,1,.3,1)}
.fd{
  pointer-events:auto;position:relative;display:flex;align-items:center;gap:.2rem;
  padding:.28rem .32rem;border-radius:999px;overflow:clip;
  background:rgba(84,84,84,.12);
  -webkit-backdrop-filter:blur(45px) saturate(160%);backdrop-filter:blur(45px) saturate(160%);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18),
             0 18px 50px -18px rgba(0,0,0,.55);
  isolation:isolate;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;
}
.fd:hover{transform:translateY(1px);border-color:rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.18), 0 22px 56px -18px rgba(0,0,0,.6)}
.fd::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.10), transparent 55%);
  mix-blend-mode:plus-lighter}
/* Licht-Sweep beim Wechsel (wie die Stahl-CTAs) */
.fd::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;opacity:0;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent);transform:skewX(-18deg)}
.fd.sweep::after{animation:fdSweep .85s cubic-bezier(.3,.6,.3,1)}
@keyframes fdSweep{0%{left:-60%;opacity:1}100%{left:135%;opacity:1}}
.fd-beads{display:flex;gap:.1rem;position:relative;z-index:1}
.fd-bead{
  position:relative;width:2.2rem;height:2.2rem;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:transparent;display:grid;place-items:center;color:inherit;
}
.fd-bead i{
  display:block;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--bead);
  box-shadow:inset -3px -4px 7px rgba(0,0,0,.5), inset 2px 2px 4px rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.4);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.fd-bead:hover i{transform:scale(1.12)}
.fd-bead.on i{transform:scale(1.2)}
.fd-bead:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
/* Ripple-Ring vom angeklickten Bead */
.fd-bead::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  opacity:0;pointer-events:none;transform:scale(.55)}
.fd-bead.pulse::after{animation:fdRipple .75s cubic-bezier(.16,1,.3,1)}
@keyframes fdRipple{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.9);opacity:0}}
/* Gleitender Ring um den aktiven Bead */
.fd-thumb{
  position:absolute;left:.32rem;top:.28rem;width:2.2rem;height:2.2rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 4px rgba(255,255,255,.03);
  transform:translateX(var(--fdx,0px));transition:transform .55s cubic-bezier(.34,1.4,.64,1);
}
.fd-sep{width:1px;height:1.2rem;margin:0 .3rem 0 .4rem;background:rgba(255,255,255,.16)}
.fd-label{display:flex;align-items:center;padding:0 .9rem 0 .1rem;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;text-transform:uppercase;position:relative;z-index:1}
.fd-name{font-size:.7rem;letter-spacing:.12em;color:var(--ink);line-height:1;height:1em;overflow:clip;
  min-width:8.2ch;white-space:nowrap}
.fd-name > span{display:inline-block}
:root:not([data-theme="dark"]) .fd{
  background:rgba(255,255,255,.46);border-color:rgba(20,19,23,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.06), 0 18px 50px -18px rgba(0,0,0,.28)}
:root:not([data-theme="dark"]) .fd:hover{border-color:rgba(20,19,23,.26)}
:root:not([data-theme="dark"]) .fd-thumb{border-color:rgba(20,19,23,.5);background:rgba(20,19,23,.05)}
:root:not([data-theme="dark"]) .fd-sep{background:rgba(20,19,23,.16)}
:root:not([data-theme="dark"]) .fd-bead::after{border-color:rgba(20,19,23,.55)}
/* Checkout im Overlay-Modus (<1200) legt sich ueber die Seite → Dock weg */
@media (max-width:1199px){ html.panel-open #finishDock{opacity:0;transform:translateY(-18px);pointer-events:none} }
/* Mobil: kompakt (nur Beads + Ring) zwischen Logo und Theme-Toggle */
@media (max-width:760px){ .fd-sep,.fd-label{display:none} }
@media (prefers-reduced-motion: reduce){ .fd.sweep::after,.fd-bead.pulse::after{animation:none} .fd-thumb{transition:none} }
/* Inline-Swatches im Konfigurator sind durch den Dock ersetzt (Code bleibt synchron) */
#config #swatches{display:none}

/* ---- Toast ---- */
#toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,20px);z-index:36;
  background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:999px;
  padding:.8rem 1.4rem;font-size:.85rem;opacity:0;pointer-events:none;visibility:hidden;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s .4s;
}
#toast.show{opacity:1;transform:translate(-50%,0);visibility:visible;transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}




/* ---- Drawer alive ---- */
.dimg{position:relative;border-radius:14px;overflow:clip;border:1px solid var(--line);
  height:220px;min-height:220px;background:#050508}
.dimg .di{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  opacity:0;transform:scale(1.05);transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.dimg .di.on{opacity:1;transform:scale(1)}
.dbatch{position:absolute;left:.8rem;bottom:.7rem;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,14,.55);padding:.3rem .65rem;border-radius:999px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#orderDrawer > *{opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1)}
#orderDrawer.open > *{opacity:1;transform:translateY(0)}
#orderDrawer.open > *:nth-child(2){transition-delay:.05s}
#orderDrawer.open > *:nth-child(3){transition-delay:.1s}
#orderDrawer.open > *:nth-child(4){transition-delay:.16s}
#orderDrawer.open > *:nth-child(5){transition-delay:.22s}
#orderDrawer.open > *:nth-child(6){transition-delay:.28s}
#orderDrawer.open > *:nth-child(7){transition-delay:.34s}
#orderDrawer.open > *:nth-child(8){transition-delay:.4s}
#orderDrawer.open > *:nth-child(9){transition-delay:.46s}
.fchip,.dcard{transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,color .2s,outline .2s}
.fchip.on{transform:scale(1.06)}
#bundleRow .dcard.on{transform:translateY(-2px)}


/* Single: Zeile je Finish mit eigenem Stepper */
#singleRows[hidden],#finishRows[hidden],.dqty[hidden]{display:none}
#singleRows{flex-direction:column;gap:.7rem}
.srow{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.sname{white-space:nowrap}
.sname{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:#f2f1ee}
.sbead{display:inline-block;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--bead);
  box-shadow:inset -2px -3px 5px rgba(0,0,0,.5), inset 1px 1px 3px rgba(255,255,255,.22), 0 1px 4px rgba(0,0,0,.4)}
.srow.zero .sname{color:rgba(242,241,238,.45)}
.srow.zero .sbead{opacity:.45}

/* ---- Checkout: Lanserring-Liquid-Glass (iOS-26-Rezeptur), schwarze Edition ----
   Quelle: automiq/lanserring/LIQUID-GLASS-RECIPE.css — Schicht-Stack 1:1, dunkel getönt. */
#orderDrawer .dcard, #orderDrawer .dimg, #orderFallback input{
  position:relative;border-radius:18px;
  background:rgba(84,84,84,.12);
  -webkit-backdrop-filter:blur(45px) saturate(160%);backdrop-filter:blur(45px) saturate(160%);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18),
             0 18px 50px -18px rgba(0,0,0,.55);
  isolation:isolate;
}
#orderDrawer .dcard::before, #orderDrawer .dimg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.10), transparent 55%);
  mix-blend-mode:plus-lighter;
}
#orderDrawer .dcard{color:#f2f1ee}
#orderDrawer .dcard.on{border-color:rgba(255,255,255,.72);outline:1px solid rgba(255,255,255,.72)}
#orderDrawer .dprice, #orderDrawer .dsum strong, #orderDrawer #qtyVal{color:#fff}
#orderDrawer .dnote{color:rgba(242,241,238,.55)}
#orderDrawer .dnote2{color:rgba(242,241,238,.42)}
#orderDrawer .flabel{color:rgba(242,241,238,.45)}
#orderDrawer .fchip{
  color:#f2f1ee;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:rgba(84,84,84,.12);
  -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
#orderDrawer .fchip.on{color:#a8abff;border-color:rgba(168,171,255,.75)}
#orderDrawer .dsum{border-top:1px solid rgba(255,255,255,.14);color:#f2f1ee}
#orderDrawer #orderClose{border:1px solid rgba(255,255,255,.25);color:#fff;background:rgba(20,20,26,.55)}
#orderFallback input{color:#fff;border-radius:999px}
#orderFallback input::placeholder{color:rgba(242,241,238,.4)}
#orderFallback input:focus{border-color:rgba(168,171,255,.7)}
#orderDrawer .dtitle{color:#fff}

.foot-links a{color:var(--faint);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

.dswitch{position:absolute;top:.6rem;right:.6rem;display:flex;gap:.3rem;z-index:2}
.dswitch button{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,241,238,.6);background:rgba(84,84,84,.15);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:.32rem .7rem;cursor:pointer;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.dswitch button.on{color:#fff;border-color:rgba(255,255,255,.55)}

/* ---- Checkout als Sidebar (steht bewusst am ENDE — ueberschreibt die inset:0 der Fixed-Layer):
   ab 1200px schiebt das Panel die Seite (Push, Restbreite ≥ 770px), darunter Overlay. --cw = Inhaltsbreite,
   auf der alle Layout-vw-Masse rechnen. --panel ist registriert → der ganze Push animiert als EIN Wert. ---- */
@property --panel { syntax:'<length>'; inherits:true; initial-value:0px; }
:root{--panel:0px;--cw:calc(100vw - var(--panel));transition:--panel .45s cubic-bezier(.16,1,.3,1)}
@media (min-width:1200px){ html.panel-open{--panel:430px} }
body{padding-right:var(--panel)}
#plates,#stage,#vig,#grain,#introStill,#blendLayer,header#top,#navline,#finishDock{right:var(--panel)}
@media (min-width:1200px){ #orderScrim{display:none} }
/* Wild-Sektion stapelt, wenn die Restbreite unter die 860er-Grenze faellt */
@media (min-width:1200px) and (max-width:1290px){
  html.panel-open .wildwrap{flex-direction:column;justify-content:center;gap:2rem}
  html.panel-open .wildcards{width:min(420px,88%)}
}