/* LerchWerk: Dunkle Bühne mit warmgrauem Schaufenster oben (nach Dayos).
   Jede Seite: graues, abgerundetes Hero-Panel auf fast schwarzem Grund, darunter dunkle Karten.
   Markenfarben Schwarz, Weiß, Pink. Pink nur als Akzent (Cursor, Hover, Nummern, Fortschritt). */
:root{
  --bg:#0b0b0c;
  --bg2:#111113;
  --card:#161618;
  --card2:#1e1e21;
  --line:#2a2a2e;
  --text:#f1f1ef;
  --muted:#a1a1a6;
  --dim:#6d6d73;
  --canvas:#efefef;
  --mist:#f3f3f3;
  --ash:#c6c6c6;
  --slate:#444;
  --black:#000;
  --mint:#ffffff;
  --volt:#fce7f3;
  --pink:#ec4899;
  --f-display:"Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.2,.8,.1,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.45;letter-spacing:-.011em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--pink);color:#fff}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.wrap{max-width:1232px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:-.03em;line-height:1.3}
.display{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.03em;margin:0;text-wrap:balance}
h2.display{font-size:clamp(48px,7vw,88px)}
h3,h4,p{margin:0}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.38;color:var(--muted);max-width:52ch;letter-spacing:-.02em}
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:#000;font:400 12px/1 var(--f-mono);letter-spacing:-.03em;padding:8px 12px;border-radius:64px;white-space:nowrap}
.tag.ghost{background:var(--card2);color:var(--muted)}
.tag.dark{background:#000;color:var(--text)}
.dot{width:7px;height:7px;border-radius:50%;background:#000;display:inline-block;flex:none}
.kicker{display:flex;align-items:center;gap:10px;color:var(--dim)}
.kicker::before{content:"";width:24px;height:1px;background:currentColor}

/* Buttons */
@media (hover:hover){.btn:hover{color:#fff}}
.btn{--mx:0px;--my:0px;position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:8px;background:var(--text);color:#000;border:0;font:500 16px/1 var(--f-body);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transform:translate(var(--mx),var(--my));transition:transform .4s var(--ease),color .3s;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink);transform:translateY(101%);transition:transform .5s var(--ease-out)}
@media (hover:hover){.btn:hover::before{transform:none}}
.btn.dark{background:#000;color:var(--text)}
@media (hover:hover){.btn.dark:hover{color:#fff}}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
@media (hover:hover){.btn.ghost:hover{color:#fff}}
.panel-light .btn.ghost{color:#000;box-shadow:inset 0 0 0 1.5px #000}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
@media (hover:hover){.btn:hover svg{transform:translateX(3px)}}
.btn-sm{padding:12px 18px;font-size:15px}

/* ---------- Navigation ---------- */
.head{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:50;height:7rem;display:flex;align-items:center;justify-content:center;padding-left:calc(var(--gut) + 8px);padding-right:calc(var(--gut-r) + 8px);pointer-events:none;transition:transform .6s var(--ease)}
.head.hide{transform:translateY(-110%)}
.pill{pointer-events:auto;display:flex;align-items:center;gap:8px;background:rgba(243,243,243,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:#000;border-radius:48px;box-shadow:0 0 0 1px rgba(0,0,0,.08);padding:8px 8px 8px 24px;width:min(1040px,100%);justify-content:space-between;transition:background .5s,color .5s,box-shadow .5s}
.head.on-dark .pill{background:rgba(22,22,24,.92);color:var(--text);box-shadow:0 0 0 1px var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:-.02em}
.logo i{width:18px;height:18px;background:currentColor;display:block;border-radius:3px;position:relative}
.logo i::after{content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;background:var(--pink);border-radius:2px}
.pill ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.pill ul a{position:relative;display:block;padding:10px 14px;border-radius:48px;text-decoration:none;font-weight:500;opacity:.7;transition:opacity .2s,background .2s}
.pill ul a:hover{opacity:1}
.pill ul a[aria-current="page"]{opacity:1;background:rgba(0,0,0,.07)}
.head.on-dark .pill ul a[aria-current="page"]{background:rgba(255,255,255,.08)}
.pill .cta{background:#000;color:var(--text)}
.pill .cta:hover{color:#fff}
.head.on-dark .pill .cta{background:var(--text);color:#000}
.menu-btn{display:none}
.overlay{position:fixed;inset:0;z-index:49;background:#000;color:var(--text);display:flex;flex-direction:column;justify-content:center;padding:calc(120px + env(safe-area-inset-top,0px)) var(--gut-r) 40px var(--gut);clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.overlay.open{clip-path:inset(0);visibility:visible}
.overlay a{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,12vw,90px);line-height:.98;text-decoration:none;display:flex;gap:14px;align-items:baseline;letter-spacing:-.03em}
.overlay a span{font:12px var(--f-mono);color:var(--pink)}

/* ---------- Vorhang für Seitenwechsel ---------- */
.curtain{position:fixed;inset:0;z-index:90;background:#000;color:var(--text);display:none;place-items:center;pointer-events:none}
.js .curtain{display:grid}
.curtain .c-inner{display:grid;justify-items:center;gap:14px}
.curtain .c-word{font:800 clamp(48px,9vw,120px)/.9 var(--f-display);text-transform:uppercase;letter-spacing:-.03em;overflow:hidden}
.curtain .c-word span{display:block}
.curtain .c-num{font:500 13px var(--f-mono);color:var(--pink)}
.curtain .c-bar{width:180px;height:2px;background:var(--line);position:relative;overflow:hidden}
.curtain .c-bar i{position:absolute;inset:0;background:var(--pink);transform-origin:left;transform:scaleX(0)}

/* ---------- Cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--pink);display:none;align-items:center;justify-content:center;font:500 11px var(--f-mono);color:#000;mix-blend-mode:normal;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .3s}
.cursor.big{width:96px;height:96px;margin:-48px 0 0 -48px;color:#fff}
@media (hover:hover) and (pointer:fine){ .cursor{display:flex} }

/* ---------- Graues Hero-Panel ---------- */
.panel-light{margin:8px;border-radius:32px;background:var(--canvas);color:#000;position:relative;overflow:hidden;isolation:isolate}
.panel-light .lead{color:var(--slate)}
.panel-light .tag.ghost{background:var(--mist);color:#000}
.panel-light .kicker{color:#666}
.p-hero{padding:9rem 0 64px;min-height:min(100svh,940px);display:flex;align-items:center}
.p-hero.short{min-height:0;padding-bottom:56px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;width:100%}
.p-hero h1{font-size:clamp(60px,8.6vw,124px)}
.p-hero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.p-hero .lead{margin-top:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.mk{background:#000;color:var(--canvas);padding:0 .08em;margin-left:-.04em}
.crumbs{display:flex;gap:8px;align-items:center;margin-bottom:22px;color:#666}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#000}

/* Überschriften zeilenweise aus der Maske */
.split-line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.split-line > span{display:inline-block;will-change:transform}

/* ---------- Abschnitte ---------- */
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:40px;align-items:end;margin-bottom:48px}
.sec-head .kicker{margin-bottom:20px}
.note{margin-top:20px;font-size:14px;color:var(--dim)}

/* Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stats div{background:var(--card);border-radius:24px;padding:28px 24px;display:grid;gap:10px;min-height:180px;align-content:space-between}
.stats b{font:700 clamp(56px,6vw,88px)/.85 var(--f-display);letter-spacing:-.03em}
.stats span{color:var(--muted);font-size:14px}
.stats div:first-child{background:var(--mint);color:#000}
.stats div:first-child span{color:#555}

/* Filter-Chips */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px}
.chip{border:0;background:var(--card2);color:var(--muted);padding:10px 16px;border-radius:64px;font:500 15px var(--f-body);cursor:pointer;transition:background .25s,color .25s}
.chip:hover{color:var(--text)}
.chip[aria-pressed="true"]{background:var(--text);color:#000}
.filters .count{margin-left:auto;color:var(--dim)}

/* ---------- Produktkarten ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{--rx:0deg;--ry:0deg;display:flex;flex-direction:column;background:var(--card);border-radius:28px;padding:8px;text-decoration:none;color:inherit;min-width:0;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--ease),background .3s;transform-style:preserve-3d}
.card.tilting{transition:transform .1s linear,background .3s}
.card:hover{background:var(--card2)}
.card[hidden]{display:none}
.card-stage{position:relative;aspect-ratio:4/3;border-radius:22px;background:var(--tint-bg,#1c1c1f);display:grid;place-items:center;overflow:hidden;isolation:isolate}
.card-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 110%,var(--tint,#333) 0,transparent 60%);opacity:.32;transition:opacity .6s;z-index:-1}
.card:hover .card-stage::before{opacity:.55}
.card-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:3}
.card:hover .card-stage::after{opacity:1}
.card-mock{width:100%;height:100%;display:grid;place-items:center}
.card-stage .dev-laptop{width:78%;transition:transform .8s var(--ease)}
.card-stage .dev-phone{width:30%;transition:transform .8s var(--ease)}
.card:hover .dev-laptop,.card:hover .dev-phone{transform:translateY(-8px) scale(1.03)}
.card-stage .tag{position:absolute;left:14px;top:14px;z-index:2}
.card-body{padding:20px 16px 14px;display:grid;gap:8px;flex:1;align-content:start}
.card-meta{color:var(--dim)}
.card h3{font:700 34px/.95 var(--f-display);text-transform:uppercase;letter-spacing:-.02em}
.card p{font-size:14px;color:var(--muted);line-height:1.4}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px}
.card-foot .arr{width:42px;height:42px;border-radius:50%;background:var(--card2);display:grid;place-items:center;transition:background .3s,color .3s,transform .5s var(--ease)}
.card:hover .card-foot .arr{background:var(--pink);color:#fff;transform:rotate(-45deg)}
.card.feature{grid-column:span 2;flex-direction:row}
.card.feature .card-stage{flex:1.25;aspect-ratio:auto;min-height:360px}
.card.feature .card-body{flex:1;padding:32px;align-content:center}
.card.feature h3{font-size:60px}
.card.feature p{font-size:16px}

/* ---------- Laufband ---------- */
.marquee{overflow:hidden;padding-block:28px;border-block:1px solid var(--line)}
.marquee-track{display:flex;gap:40px;width:max-content;animation:marq 60s linear infinite}
.marquee span{font:800 clamp(56px,8vw,120px)/1 var(--f-display);text-transform:uppercase;letter-spacing:-.03em;display:flex;align-items:center;gap:40px;white-space:nowrap;color:transparent;-webkit-text-stroke:1.2px #4a4a50;transition:color .3s}
.marquee span:nth-child(3n+1){color:var(--text);-webkit-text-stroke:0}
.marquee span::after{content:"";width:18px;height:18px;background:var(--pink);border-radius:4px;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Bento-Teaser ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tile{position:relative;background:var(--card);border-radius:28px;padding:28px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:inherit;overflow:hidden;isolation:isolate;transition:background .4s}
.tile:hover{background:var(--card2)}
.tile h3{font:700 clamp(36px,3.6vw,52px)/.9 var(--f-display);text-transform:uppercase;letter-spacing:-.03em}
.tile p{color:var(--muted);font-size:15px;max-width:36ch;margin-top:10px}
.tile .go{display:flex;justify-content:space-between;align-items:center;color:var(--dim)}
.tile .go .arr{width:44px;height:44px;border-radius:50%;background:var(--card2);display:grid;place-items:center;color:var(--text);transition:background .3s,color .3s,transform .5s var(--ease)}
.tile:hover .go .arr{background:var(--pink);color:#fff;transform:rotate(-45deg)}
.t-4{grid-column:span 4}.t-2{grid-column:span 2}.t-3{grid-column:span 3}
.tile.mint{background:var(--mint);color:#000}
.tile.mint:hover{background:#f3f3f3}
.tile.mint p,.tile.mint .go{color:#555}
.tile.mint .go .arr{background:#000;color:#fff}
.tile-vis{position:absolute;right:-6%;top:12%;width:58%;z-index:-1;transition:transform 1s var(--ease)}
.tile:hover .tile-vis{transform:translate(-3%,-3%) rotate(-2deg)}

/* CTA-Band */
.cta-band{background:var(--card);border-radius:32px;padding:clamp(32px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;position:relative;overflow:hidden}
.cta-band h2{font-size:clamp(56px,9vw,128px)}
.cta-band .glow{position:absolute;width:520px;height:520px;right:-120px;bottom:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(236,72,153,.2),transparent);pointer-events:none}

footer{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line);padding-block:48px calc(28px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:24px}
.foot-grid h4{font:12px var(--f-mono);color:var(--dim);margin-bottom:14px;font-weight:400}
.foot-grid a{display:block;text-decoration:none;color:var(--muted);padding:4px 0}
.foot-grid a:hover{color:var(--text)}
.foot-grid a.logo{display:flex}
.foot-big{font:800 clamp(64px,15vw,220px)/.8 var(--f-display);text-transform:uppercase;letter-spacing:-.04em;color:var(--card2);margin-top:48px;white-space:nowrap;overflow:hidden}
.foot-low{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:13px;margin-top:20px}

@media (max-width:1040px){
  .pill ul{display:none}
  .pill .cta{display:none}
  .menu-btn{display:inline-flex}
  .hero-grid,.sec-head,.cta-band{grid-template-columns:minmax(0,1fr)}
  .sec-head{gap:18px}
  .p-hero{min-height:0;padding-top:8rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .t-4,.bento .t-2,.bento .t-3{grid-column:span 6}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .head{height:5.5rem}
  .panel-light{margin:6px;border-radius:24px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .card.feature{grid-column:auto;flex-direction:column}
  .card.feature .card-stage{min-height:0;aspect-ratio:4/3}
  .card.feature h3{font-size:42px}
  .filters .count{width:100%;margin-left:0}
  .stats div{min-height:140px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* App installieren */
.install-link{display:block;background:none;border:0;padding:0;margin-top:10px;font:inherit;color:var(--pink);cursor:pointer;text-align:left}
.install-ios{margin-top:10px;color:var(--dim);font-size:12px;max-width:240px}
/* Rechtstexte */
.legal{max-width:760px}
.legal h2{font-family:var(--f-display,inherit);font-size:clamp(22px,2.4vw,30px);margin:48px 0 12px;text-transform:uppercase;letter-spacing:.01em}
.legal p,.legal li{color:var(--muted);line-height:1.7}
.legal ul{padding-left:20px}
.legal a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.ph{background:var(--volt);color:#9d174d;padding:1px 6px}
.legal dl.kv{margin:12px 0}

.team-line{margin-top:12px;color:var(--dim);font-size:12px}
.team-line .ph{font-size:12px}

/* Mockups */
/* Geräte-Mockups (flach, ohne Schatten) */
.dev-laptop .scr{aspect-ratio:16/10;border:7px solid #111;border-bottom-width:10px;border-radius:10px 10px 0 0;background:#000;overflow:hidden;position:relative}
.dev-laptop .base{height:9px;background:#2a2a2a;border-radius:0 0 10px 10px;width:112%;margin-left:-6%}
.dev-phone{aspect-ratio:9/19;border:6px solid #111;border-radius:24px;background:#000;position:relative;overflow:hidden}
.dev-phone::before{content:"";position:absolute;left:36%;right:36%;top:5px;height:8px;background:#111;border-radius:8px;z-index:5}
.ui{position:absolute;inset:0;background:var(--pb);color:var(--pa);font-family:var(--pf,system-ui);container-type:inline-size;overflow:hidden}
.ui-nav{display:flex;justify-content:space-between;align-items:center;padding:4cqw 5cqw 0;font-size:3.2cqw;font-weight:700}
.ui-nav i{display:flex;gap:2.5cqw}
.ui-nav i s{display:block;width:6cqw;height:1.1cqw;background:currentColor;opacity:.35;text-decoration:none;border-radius:2px}
.ui-hero{position:absolute;left:5cqw;right:5cqw;top:16cqw;bottom:5cqw;display:grid;grid-template-columns:1.1fr .9fr;gap:4cqw}
.ui-hero .tx{display:grid;align-content:center;gap:2cqw}
.ui-hero h5{font-family:var(--ph,inherit);font-size:7.2cqw;line-height:1;margin:0;letter-spacing:-.02em;font-weight:800}
.ui-hero p{font-size:2.6cqw;opacity:.7;margin:0;line-height:1.4}
.ui-hero b{justify-self:start;background:var(--pc);color:var(--pb);font-size:2.4cqw;padding:1.6cqw 3.2cqw;border-radius:var(--pr,0)}
.ui-hero .im{border-radius:var(--pr,0);position:relative;overflow:hidden}
.dev-phone .ui-nav{padding-top:12cqw;font-size:6cqw}
.ui-app{position:absolute;left:6cqw;right:6cqw;top:26cqw;bottom:6cqw;display:grid;gap:4cqw;align-content:start}
.ui-app .hd{font-family:var(--ph,inherit);font-size:11cqw;font-weight:800;line-height:1;letter-spacing:-.02em}
.ui-app .cd{border-radius:calc(var(--pr,0px) + 4cqw);padding:5cqw;background:color-mix(in oklab,var(--pa) 7%,var(--pb));display:grid;gap:2.5cqw}
.ui-app .cd.k{background:var(--pc);color:var(--pb)}
.ui-app .cd s{display:block;height:3cqw;border-radius:3cqw;background:currentColor;opacity:.25;text-decoration:none}
.ui-app .cd s:first-child{opacity:.85;width:60%;height:4cqw}
.ui-app .row{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw}
.ui-app .row i{aspect-ratio:1;border-radius:calc(var(--pr,0px) + 3cqw);background:color-mix(in oklab,var(--pa) 10%,var(--pb))}
.ui-app .row i:nth-child(2){background:var(--pd)}
.ui-tab{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:5cqw 0;background:color-mix(in oklab,var(--pa) 4%,var(--pb))}
.ui-tab i{width:6cqw;height:6cqw;border-radius:50%;background:currentColor;opacity:.3}
.ui-tab i:first-child{opacity:1;background:var(--pc)}

/* Echte Ansicht statt gezeichnetem Mockup */
.dev-laptop.real .scr,.dev-phone.real{background:#0b0b0c}
.real .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* Generator-Vorschau */
.mini{--a:#222;--b:#eee;--c:#c33;--d:#555;--hf:serif;--bf:sans-serif;--r:0px;background:var(--b);color:var(--a);font-family:var(--bf);aspect-ratio:16/10.5;overflow:hidden;position:relative;border-radius:16px;container-type:inline-size}
.mini *{transition:all .7s var(--ease)}
.m-nav{display:flex;justify-content:space-between;align-items:center;padding:3.2cqw 4.5cqw}
.m-brand{font-family:var(--hf);font-size:2.6cqw;font-weight:800}
.m-links{display:flex;gap:2.6cqw;font-size:1.5cqw;opacity:.75}
.m-hero{display:grid;gap:3cqw;padding:2cqw 4.5cqw;align-items:center}
.m-title{font-family:var(--hf);font-size:6.2cqw;line-height:.98;letter-spacing:-.02em;margin:0}
.m-sub{font-size:1.7cqw;line-height:1.5;opacity:.75;max-width:40ch;margin-top:1.6cqw}
.m-cta{display:inline-block;margin-top:2.4cqw;background:var(--c);color:var(--b);padding:1.3cqw 2.6cqw;font-size:1.5cqw;font-weight:700;border-radius:var(--r)}
.m-art{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--d)}
.m-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:2.4cqw 4.5cqw}
.m-tiles div{height:9cqw;border-radius:var(--r);background:color-mix(in oklab,var(--a) 8%,var(--b));border:1px solid color-mix(in oklab,var(--a) 15%,transparent);padding:1.4cqw;font-size:1.4cqw;font-weight:600}
.m-tiles div::before{content:"";display:block;width:2.4cqw;height:2.4cqw;border-radius:calc(var(--r) / 2);background:var(--c);margin-bottom:1cqw}
.mini[data-layout="split"] .m-hero{grid-template-columns:1.15fr .85fr}
.mini[data-layout="split"] .m-art{aspect-ratio:4/4.4}
.mini[data-layout="stack"] .m-hero{grid-template-columns:1fr;text-align:center;justify-items:center}
.mini[data-layout="stack"] .m-title{font-size:8cqw}
.mini[data-layout="stack"] .m-art{position:absolute;inset:auto 0 0 0;aspect-ratio:auto;height:24%;border-radius:0;opacity:.9}
.mini[data-layout="stack"] .m-tiles{display:none}
.mini[data-layout="bento"] .m-hero{grid-template-columns:1fr 1fr}
.mini[data-layout="bento"] .m-hero > div:first-child{background:color-mix(in oklab,var(--a) 6%,var(--b));padding:3cqw;border-radius:var(--r);height:100%}
.mini[data-layout="bento"] .m-art{aspect-ratio:16/10}
.mini[data-layout="editorial"] .m-hero{grid-template-columns:.7fr 1.3fr}
.mini[data-layout="editorial"] .m-hero > div:first-child{order:2}
.mini[data-layout="editorial"] .m-title{font-style:italic;font-size:7cqw}
.mini[data-layout="editorial"] .m-art{aspect-ratio:3/4.6}
.mini[data-layout="editorial"] .m-tiles{border-top:1px solid var(--a);padding-top:2cqw}
.mini[data-layout="editorial"] .m-tiles div{background:none;border:none;height:auto}
::view-transition-old(mini){animation:vtout .5s var(--ease) both}
::view-transition-new(mini){animation:vtin .5s var(--ease) both}
@keyframes vtout{to{clip-path:inset(0 0 0 100%)}}
@keyframes vtin{from{clip-path:inset(0 100% 0 0)}}

/* Ablauf-Bühne */
.stage{position:relative;background:#141414;border-radius:24px;aspect-ratio:5/4;overflow:hidden;min-width:0}
.term{position:absolute;left:5%;top:7%;width:62%;background:#000;border-radius:12px;font:13px/1.6 var(--f-mono);padding:16px 18px;z-index:3;color:var(--text)}
.term .p{color:var(--mint)}
.term .caret{display:inline-block;width:8px;height:15px;background:var(--pink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.term .out{color:var(--smoke)}
.wire{position:absolute;right:5%;bottom:7%;width:64%;aspect-ratio:4/3;background:#f3efe6;border-radius:12px;display:grid;grid-template-rows:auto 1fr auto;gap:5%;padding:5%;z-index:2;--fill:0;--wire:1}
.wire .w{background:rgba(0,0,0,calc(.08 * var(--wire)));border:1px dashed rgba(0,0,0,calc(.35 * var(--wire)));position:relative}
.wire .w-nav{height:9%;min-height:14px}
.wire .w-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:6%}
.wire .w-hero .t{display:grid;align-content:center;gap:10px}
.wire .w-hero .t i{height:12px;display:block}
.wire .w-hero .t i:nth-child(1){height:22px;width:90%}
.wire .w-hero .t i:nth-child(2){height:22px;width:70%}
.wire .w-hero .t i:nth-child(3){width:85%}
.wire .w-hero .t i:nth-child(4){width:34%;height:18px}
.wire .w-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;height:20%}
.wire .paint{position:absolute;inset:0;opacity:var(--fill)}
.wire .w-nav .paint{background:linear-gradient(90deg,#1d3b2a 0 22%,transparent 22% 60%,#1d3b2a55 60%)}
.wire .w-hero .t i .paint{background:#1d3b2a}
.wire .w-hero .t i:nth-child(4) .paint{background:#d9662b}
.wire .w-hero .img .paint{background:#2f5d43}
.wire .w-row > i .paint{background:#e4dccb;border-top:3px solid #d9662b}
.check{position:absolute;left:5%;bottom:7%;z-index:4;display:grid;gap:8px}
.check span{opacity:0;transform:translateY(10px);transition:all .4s var(--ease)}
.stage-tag{position:absolute;right:16px;top:16px;z-index:4}

/* ---------- Start: 3D-Turm ---------- */
.stage3d{position:relative;width:100%;aspect-ratio:1/1.08;max-width:640px;justify-self:end;touch-action:pan-y;cursor:grab;user-select:none}
.stage3d canvas{position:absolute;inset:-10% -10% -4% -10%;width:120%;height:114%;display:block;opacity:0;transition:opacity 1.4s;-webkit-mask-image:linear-gradient(#000 78%,transparent 99%);mask-image:linear-gradient(#000 78%,transparent 99%)}
.stage3d.ready canvas{opacity:1}
.gl-label{position:absolute;left:0;top:0;z-index:3;pointer-events:none;background:#000;color:var(--text);font:500 13px var(--f-body);padding:8px 12px;border-radius:48px;white-space:nowrap}
.stage-hint{position:absolute;left:0;bottom:0;color:#777;z-index:2}
#fallbackVis{display:none}
.stage3d.fallback #fallbackVis{display:grid;place-items:center;position:absolute;inset:0}
.stage3d.fallback #fallbackVis .dev-laptop{width:86%}
.stage3d.fallback #fallbackVis .dev-phone{position:absolute;right:4%;bottom:10%;width:26%}
.scroll-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#666}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(#000,transparent);animation:cue 2.2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- Kollektion: 3D-Karussell ---------- */
.ring-stage{position:relative;height:clamp(300px,36vw,460px);perspective:1400px;touch-action:pan-y;cursor:grab;user-select:none;margin-top:24px}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.ring a{position:absolute;left:-130px;top:-120px;width:260px;height:240px;border-radius:22px;background:#d9d9d9;display:grid;place-items:center;padding-bottom:34px;text-decoration:none;color:#000;backface-visibility:hidden;transition:background .3s;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.ring a:hover{background:#cfcfcf}
.ring a .dev-laptop{width:78%}
.ring a .dev-phone{width:30%}
.ring a > span{position:absolute;left:14px;bottom:12px;font:700 20px/1 var(--f-display);text-transform:uppercase}
.ring-fx{position:absolute;inset:-6% -4%;width:108%;height:112%;pointer-events:none}
.ring-spot{position:absolute;left:50%;bottom:-4%;width:min(70%,560px);height:70%;transform:translateX(-50%);background:radial-gradient(closest-side at 50% 85%,color-mix(in srgb,var(--tint,#ec4899) 38%,transparent),transparent 75%);filter:blur(10px);transition:background .8s;pointer-events:none}
.ring a{-webkit-box-reflect:below 12px linear-gradient(transparent 62%,rgba(255,255,255,.28));overflow:hidden}
.ring a .glint{position:absolute;inset:-20% -40%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-160%);pointer-events:none;z-index:2}
.ring a.front{box-shadow:0 0 0 2px var(--pink),0 30px 70px -20px color-mix(in srgb,var(--pink) 55%,transparent)}
.ring-now{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:clamp(56px,6vw,80px);position:relative;z-index:2;color:#111}
.ring-now b{font:800 clamp(28px,3.4vw,44px)/1 var(--f-display);text-transform:uppercase;overflow:hidden;display:inline-flex}
.ring-now b span{display:inline-block}
.ring-no,.ring-kind{font-size:13px;color:#666}
.ring-no{color:var(--pink)}
.ring-floor{position:absolute;left:10%;right:10%;bottom:0;height:40px;background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent);filter:blur(6px)}

/* ---------- Produktseite ---------- */
.dev3d{position:relative;perspective:1600px;display:grid;place-items:center;min-height:clamp(360px,42vw,560px)}
.dev3d .rig{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-18deg)) rotateZ(var(--rz,0deg));transition:transform 1s var(--ease)}
.dev3d.live .rig{transition:transform .15s linear}
.dev3d .rig .dev-laptop{width:min(520px,80vw)}
.dev3d .rig .dev-phone{width:min(230px,46vw)}
.dev3d .rig .layer{position:absolute;inset:0;border-radius:inherit}
.dev3d .depth{position:absolute;inset:0;transform-style:preserve-3d}
.dev3d .depth i{position:absolute;inset:0;border-radius:26px;background:#0d0d0d}
.dev3d .shadow{position:absolute;left:15%;right:15%;bottom:4%;height:50px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);filter:blur(8px);transform:scale(var(--ss,1))}
.dev3d .orb{position:absolute;border-radius:50%;filter:blur(2px);z-index:-1}
.p-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid rgba(0,0,0,.14)}
.p-meta div{display:grid;gap:4px}
.p-meta dt{font:12px var(--f-mono);color:#666}
.p-meta dd{margin:0;font:700 24px/1 var(--f-display);text-transform:uppercase}
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.feat div{background:var(--card);border-radius:24px;padding:24px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.feat b{font:500 12px var(--f-mono);color:var(--pink)}
.feat strong{font:700 30px/.95 var(--f-display);text-transform:uppercase;letter-spacing:-.02em}
.next{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.next a{position:relative;background:var(--card);border-radius:28px;padding:28px;text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:16px;overflow:hidden;min-height:150px;transition:background .3s}
.next a:hover{background:var(--card2)}
.next small{display:block;color:var(--dim);font:12px var(--f-mono);margin-bottom:10px}
.next strong{font:700 clamp(32px,4vw,56px)/.9 var(--f-display);text-transform:uppercase;letter-spacing:-.03em}
.next .thumb{width:38%;flex:none;transition:transform .8s var(--ease)}
.next a:hover .thumb{transform:translateY(-6px) rotate(-2deg)}
.next .thumb .dev-phone{width:45%;margin-inline:auto}

/* ---------- Maßanfertigung (dunkel) ---------- */
.made{background:var(--card);border-radius:32px;padding:clamp(24px,4vw,48px);overflow:visible}
.demo{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.panel{display:grid;gap:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.dna{display:grid;margin:0;font:12.5px var(--f-mono);letter-spacing:-.03em}
/* Branche als Dropdown */
.dd{position:relative;z-index:5}
.dd-label{display:block;font-size:12px;color:var(--dim);margin-bottom:8px}
.dd-btn{width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:700 24px/1 var(--f-display);text-transform:uppercase;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.dd-btn:hover,.dd.open .dd-btn{border-color:var(--pink);box-shadow:0 0 0 4px rgba(236,72,153,.12)}
.dd-dot{width:14px;height:14px;border-radius:4px;flex:none;transition:background .4s}
.dd-cur{flex:1;text-align:left}
.dd-chev{width:18px;height:18px;transition:transform .4s var(--ease)}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;border-radius:16px;background:var(--card2);border:1px solid var(--line);box-shadow:0 30px 60px -20px #000;display:none;max-height:min(60vh,420px);overflow:auto}
.dd.open .dd-list{display:block}
.dd-list li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;outline:none}
.dd-list li:hover,.dd-list li:focus{background:var(--card)}
.dd-list li[aria-selected="true"]{background:rgba(236,72,153,.12)}
.dd-list li i{width:12px;height:12px;border-radius:3px;flex:none}
.dd-list li b{display:block;font:700 19px/1 var(--f-display);text-transform:uppercase}
.dd-list li small{font:11px var(--f-mono);color:var(--dim)}
/* DNA als Spielautomat */
.dna.slots div{align-items:center;position:relative;overflow:hidden}
.dna.slots dt em{font-style:normal;margin-left:8px;font-size:10px;padding:2px 6px;border-radius:20px;vertical-align:1px}
.dna.slots .new dt em{background:rgba(236,72,153,.15);color:var(--pink)}
.dna.slots .same dt em{background:var(--card2);color:var(--dim)}
.dna.slots dt em:empty{display:none}
.dna.slots dd{height:1.5em;overflow:hidden;line-height:1.5em}
.dna.slots .reel{display:flex;flex-direction:column;align-items:flex-end}
.dna.slots .reel > span{height:1.5em;white-space:nowrap}
.dna.slots div::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(236,72,153,.22),transparent);transform:translateX(-100%);pointer-events:none}
.dna.slots div.hit.new::before{animation:slotHit .9s var(--ease-out,ease-out)}
@keyframes slotHit{to{transform:translateX(100%)}}
.roll{position:relative}
.roll-fx{position:absolute;left:-20%;right:-20%;bottom:0;width:140%;height:420%;pointer-events:none;z-index:3}
.dna div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.dna dt{color:var(--dim)}
.dna dd{margin:0;text-align:right}
.dna .sw{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.dna .sw i{width:12px;height:12px;display:block;border-radius:2px}
.meter{display:grid;gap:8px}
.meter-bar{height:6px;background:var(--card2);border-radius:6px;overflow:hidden;position:relative}
.meter-bar i{position:absolute;inset:0 auto 0 0;background:var(--pink);border-radius:6px;transition:width .8s var(--ease)}
.meter small{font:12px var(--f-mono);color:var(--muted)}
.roll{justify-content:center}
.roll .dice{width:18px;height:18px;transition:transform .6s var(--ease)}
.browser{background:var(--card2);border-radius:24px;padding:8px;min-width:0}
.browser-bar{display:flex;align-items:center;gap:8px;padding:8px 10px 12px}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.browser-bar .url{flex:1;margin-left:8px;font:12px var(--f-mono);color:var(--muted);background:var(--bg);padding:7px 12px;border-radius:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.scramble{font-variant-numeric:tabular-nums}
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ind-grid div{background:var(--card);border-radius:24px;padding:24px;display:grid;gap:12px}
.ind-grid strong{font:700 28px/.95 var(--f-display);text-transform:uppercase}
.ind-grid p{color:var(--muted);font-size:15px}

/* ---------- Ablauf ---------- */
.flow{background:var(--card);border-radius:32px;overflow:hidden}
.pin{min-height:100svh;display:flex;align-items:center;padding-block:64px}
.pin-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.steps{list-style:none;margin:32px 0 0;padding:0}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line);color:var(--dim);transition:color .5s}
.steps li b{font:500 12px var(--f-mono);padding-top:6px}
.steps li strong{display:block;font:700 28px/.95 var(--f-display);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:6px}
.steps li span{font-size:14px}
.steps li.on{color:var(--text)}
.steps li.on b{color:var(--pink)}
.stage{position:relative;background:#0e0e10;border-radius:24px;aspect-ratio:5/4;overflow:hidden;min-width:0}
.chain{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.chain-track{position:absolute;background:var(--line);border-radius:2px;pointer-events:none}
.chain-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--pink),#fff);transform-origin:0 0;transform:scaleX(0);border-radius:2px;box-shadow:0 0 14px var(--pink)}
.chain.vert .chain-fill{background:linear-gradient(180deg,var(--pink),#fff)}
.chain-pulse{position:absolute;left:0;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(236,72,153,.35),0 0 24px 6px var(--pink);opacity:0;transition:opacity .4s}
.chain.vert .chain-pulse{left:50%;top:0}
.chain-item{position:relative;display:grid;gap:18px;align-content:start}
.node{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .5s,box-shadow .5s}
.node b{font:800 26px/1 var(--f-display);color:var(--dim);transition:color .4s}
.node::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--pink);opacity:0;transform:scale(.7)}
.node.on{background:var(--pink);box-shadow:0 0 0 6px rgba(236,72,153,.15),0 0 40px -4px var(--pink)}
.node.on b{color:#fff}
.node.on::after{animation:nodePing 1.2s var(--ease-out,ease-out) 1}
@keyframes nodePing{0%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.8)}}
.chain-card{background:var(--card);border-radius:24px;padding:24px;display:grid;gap:12px;min-height:150px;align-content:start;box-shadow:inset 0 0 0 1px transparent;opacity:.35;transform:translateY(26px) scale(.97);transition:opacity .7s,transform .9s var(--ease),box-shadow .7s}
.chain-item.on .chain-card{opacity:1;transform:none;box-shadow:inset 0 0 0 1px rgba(236,72,153,.35),0 30px 60px -40px var(--pink)}
.chain-card strong{font:700 26px/.95 var(--f-display);text-transform:uppercase}
.chain-card p{color:var(--muted);font-size:15px}
@media (max-width:1040px){ .chain{grid-template-columns:minmax(0,1fr);gap:22px} .chain-item{grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start} .chain-card{min-height:0;transform:translateX(26px)} }
@media (max-width:680px){
  .stack.live .stack-pin{padding-top:84px}
  .hz-panel{gap:16px;padding:22px;border-radius:26px;align-content:start}
  .hz-panel h3{font-size:clamp(34px,10vw,44px);margin:10px 0 8px}
  .hz-panel p{font-size:15px}
  .hz-vis{aspect-ratio:4/3}
  .ref-stats{gap:8px}
  .ref-stats div{padding:12px;border-radius:14px}
  .ref-stats b{font-size:34px}
  .ref-stats span{font-size:11px} .chain-card{padding:20px} .chain-card strong{font-size:23px} }
@media (prefers-reduced-motion:reduce){ .chain-card{opacity:1;transform:none} }
.big-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.big-steps div{background:var(--card);border-radius:24px;padding:24px;display:grid;gap:14px;align-content:start;min-height:220px}
.big-steps b{font:800 72px/.8 var(--f-display);color:var(--card2);-webkit-text-stroke:1px var(--line)}
.big-steps strong{font:700 26px/.95 var(--f-display);text-transform:uppercase}
.big-steps p{color:var(--muted);font-size:14px}

/* ---------- Referenz: horizontale Kapitel ---------- */
.stack{position:relative}
.stack-pin{position:relative;padding:0 var(--gut)}
.stack-deck{display:grid;gap:12px;max-width:1200px;margin:0 auto}
.stack.live .stack-pin{height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:88px;padding-bottom:28px;box-sizing:border-box;perspective:1400px}
.stack.live .stack-deck{position:relative;width:100%;flex:1;max-height:620px}
.stack.live .hz-panel{position:absolute;inset:0;width:auto;min-height:0;will-change:transform;box-shadow:0 -30px 60px -30px rgba(0,0,0,.8)}
.hz-panel{position:relative;overflow:hidden}
.hz-panel .scan{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(236,72,153,.28) 48%,rgba(255,255,255,.35) 50%,rgba(236,72,153,.28) 52%,transparent 65%);opacity:0;pointer-events:none;z-index:3}
.hz-vis{perspective:900px}
.stack-ui{display:none;align-items:center;justify-content:center;gap:16px;margin-top:18px;color:var(--muted);font-size:13px}
.stack.live .stack-ui{display:flex}
.stack-dots{display:flex;gap:6px}
.stack-dots i{width:22px;height:3px;border-radius:3px;background:var(--line);transition:background .4s,width .4s}
.stack-dots i.on{background:var(--pink);width:40px}
.ref-title{white-space:nowrap}
.ref-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px;max-width:540px}
.ref-stats div{background:#fff;border-radius:18px;padding:16px;display:grid;gap:6px}
.ref-stats b{font:800 44px/.85 var(--f-display);color:#000}
.ref-stats span{font:500 12px/1.3 var(--f-mono);color:#666}
.hz{overflow:hidden}
.hz-track{display:flex;gap:12px;width:max-content;padding-inline:var(--gut)}
.hz-panel{width:min(78vw,980px);flex:none;background:var(--card);border-radius:32px;padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;min-height:min(70svh,560px)}
.hz-panel .num{font:500 12px var(--f-mono);color:var(--pink)}
.hz-panel h3{font:700 clamp(40px,4.5vw,64px)/.9 var(--f-display);text-transform:uppercase;letter-spacing:-.03em;margin:14px 0}
.hz-panel p{color:var(--muted)}
.hz-vis{background:var(--card2);border-radius:24px;aspect-ratio:5/4;display:grid;place-items:center;position:relative;overflow:hidden}
.hz-vis .dev-laptop{width:84%}
.hz-vis .dev-phone{width:34%}
.hz-progress{height:2px;background:var(--line);margin:28px var(--gut) 0;position:relative;max-width:1200px}
.hz-progress i{position:absolute;inset:0;background:var(--pink);transform-origin:left;transform:scaleX(0)}
.kv{display:grid;margin:0}
.kv div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.kv dt{font:12px var(--f-mono);color:var(--dim)}
.kv dd{margin:0;text-align:right}
.panel-light .kv div{border-top-color:rgba(0,0,0,.14)}
.panel-light .kv dt{color:#666}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:12px}
.c-card{background:var(--card);border-radius:32px;padding:clamp(24px,3vw,40px)}
.c-card.mint{background:var(--mint);color:#000}
.c-card.mint .kv div{border-top-color:rgba(0,0,0,.14)}
.c-card.mint .kv dt{color:#666}
.mail{background:var(--volt);color:#9d174d;padding:2px 6px;font-weight:500}
form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{font:12px var(--f-mono);color:var(--muted)}
.field input,.field textarea,.field select{background:var(--card2);border:1.5px solid transparent;color:var(--text);font:400 17px var(--f-body);padding:14px 16px;border-radius:10px;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--pink)}
.field textarea{resize:vertical;min-height:130px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-msg{font-size:15px;background:var(--mint);color:#000;padding:12px 16px;border-radius:8px}
.pick{display:grid;place-items:center;background:var(--card2);border-radius:22px;aspect-ratio:4/3;margin-top:20px;overflow:hidden;position:relative}
.pick .dev-laptop{width:80%}
.pick .dev-phone{width:30%}
.huge-type{font:800 clamp(80px,17vw,260px)/.8 var(--f-display);text-transform:uppercase;letter-spacing:-.04em;margin:0}
.huge-type [data-letters] span{display:inline-block;transition:transform .5s var(--ease),color .3s}

@media (max-width:1040px){
  .demo,.pin-grid,.contact-grid,.hz-panel{grid-template-columns:minmax(0,1fr)}
  .feat,.big-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ind-grid{grid-template-columns:minmax(0,1fr)}
  .pin{min-height:auto;padding-block:48px}
  .stage3d{justify-self:center;max-width:520px;margin-top:28px}
  .hz-panel{width:auto}
  .next{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .feat,.big-steps{grid-template-columns:minmax(0,1fr)}
  .row2{grid-template-columns:1fr}
  .ring a{left:-90px;top:-80px;width:180px;height:160px}
  .ring-stage{height:290px;margin-top:8px}
  .ring-now{gap:6px 10px;margin-top:64px}
  .next .thumb{width:34%}
}

/* Referenz-Hero: Laptop mit echter Startseite, Handy sauber davor rechts unten */
#refVis{position:relative;width:min(560px,100%);margin-inline:auto;padding:0 6% 8% 0}
#refVis .dev-laptop{width:100%}
#refVis .dev-phone{position:absolute;right:0;bottom:0;width:24%;transform:translateZ(60px);box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
@media (max-width:680px){ #refVis{width:92%;padding:0 8% 10% 0} #refVis .dev-phone{width:26%;border-width:4px;border-radius:16px} }

/* Produktseite: echtes Handy vor dem Laptop */
#pRig .dev-laptop + .dev-phone{position:absolute;right:-5%;bottom:-8%;width:23%;transform:translateZ(60px);box-shadow:0 30px 60px -20px rgba(0,0,0,.85)}
@media (max-width:680px){ #pRig .dev-laptop + .dev-phone{right:-2%;width:25%;border-width:4px;border-radius:16px} }

/* Revolvertrommel */
/* ---------- Revolvertrommel: Projekte als Kammern einer drehbaren Trommel ---------- */
.rev{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.rev-stage{position:relative;width:min(100%,600px);aspect-ratio:1;justify-self:center;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.rev-stage:active{cursor:grabbing}
/* Lauf oben: dort sitzt die aktive Kammer */
.rev-barrel{position:absolute;left:50%;top:-6%;width:15%;height:12%;transform:translateX(-50%);border-radius:10px 10px 4px 4px;background:linear-gradient(90deg,#1a1a1c,#3a3a3e 45%,#1a1a1c);box-shadow:0 10px 24px -8px #000;z-index:3}
.rev-barrel::after{content:"";position:absolute;left:50%;bottom:-7px;width:0;height:0;border:7px solid transparent;border-top-color:var(--pink);border-bottom:0;transform:translateX(-50%)}
.rev-recoil{position:absolute;inset:0}
.rev-drum{position:absolute;inset:4%;border-radius:50%;will-change:transform;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,#2c2c30 0 18%,#151517 19% 21%,#232326 22% 70%,#111113 71% 100%);
  box-shadow:inset 0 0 0 2px #333,inset 0 0 50px #000,0 40px 80px -30px rgba(0,0,0,.9)}
/* Rillen am Rand zwischen den Kammern */
.rev-flute{position:absolute;left:50%;top:50%;width:8%;height:13%;margin:-6.5% 0 0 -4%;border-radius:50%;background:var(--bg);box-shadow:inset 0 6px 12px rgba(0,0,0,.9)}
.rev-ch{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;margin:-10.5% 0 0 -10.5%;border-radius:50%;text-decoration:none;color:#fff;
  background:radial-gradient(circle at 50% 45%,var(--tint) 0 46%,#0a0a0b 47% 58%,#2e2e32 59% 64%,#18181a 65%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -8px 18px rgba(0,0,0,.6);transition:filter .3s}
.rev-ch .ini{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(16px,2.6vw,30px)/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink,#000)}
.rev-ch .no{position:absolute;left:50%;bottom:-24%;transform:translateX(-50%);font:500 10px var(--f-mono);color:var(--dim)}
.rev-ch.on{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--pink) 70%,transparent))}
.rev-ch.dim{filter:brightness(.55) saturate(.6)}
.rev-hub{position:absolute;left:50%;top:50%;width:17%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:2;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#4a4a50,#1b1b1e 70%);box-shadow:0 8px 20px rgba(0,0,0,.7),inset 0 0 0 2px #3a3a3e}
.rev-hub i{width:38%;aspect-ratio:1;border-radius:22%;background:#fff;position:relative}
.rev-hub i::after{content:"";position:absolute;right:-26%;top:-26%;width:46%;aspect-ratio:1;border-radius:24%;background:var(--pink)}
/* Lichtreflex, der stehen bleibt, während die Trommel dreht */
.rev-sheen{position:absolute;inset:4%;border-radius:50%;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:conic-gradient(from var(--sa,200deg),transparent 0 8%,rgba(255,255,255,.16) 13%,transparent 20% 55%,rgba(255,255,255,.08) 60%,transparent 66%)}
.rev-burst{position:absolute;left:50%;top:6.6%;width:26%;aspect-ratio:1;margin-left:-13%;border-radius:50%;border:3px solid var(--pink);opacity:0;pointer-events:none;z-index:3}
.rev-fx{position:absolute;inset:-10%;width:120%;height:120%;pointer-events:none;z-index:4}
.rev-timer{position:absolute;left:50%;top:8.1%;width:23%;aspect-ratio:1;margin-left:-11.5%;pointer-events:none;z-index:3;transform:rotate(-90deg)}
.rev-timer circle{fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}

.rev-info{position:relative;min-width:0}
.rev-dev{position:relative;height:clamp(200px,24vw,300px);display:grid;place-items:center;margin-bottom:22px;perspective:900px}
.rev-dev .dev-laptop{width:min(100%,440px)}
.rev-dev .dev-phone{width:clamp(100px,11vw,140px)}
.rev-dev::after{content:"";position:absolute;left:12%;right:12%;bottom:-10px;height:30px;background:radial-gradient(closest-side,color-mix(in srgb,var(--tint,#fff) 35%,transparent),transparent);filter:blur(8px);z-index:-1}
.rev-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rev-name{font:800 clamp(44px,6.4vw,92px)/.9 var(--f-display);text-transform:uppercase;margin:14px 0 14px;overflow:hidden;padding-bottom:4px}
.rev-name .w{display:inline-block;white-space:nowrap}
.rev-name .w span{display:inline-block}
.rev-text{color:var(--muted);max-width:520px;font-size:17px;line-height:1.55}
.rev-row{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.rev-ctrl{display:flex;align-items:center;gap:10px;margin-top:22px}
.rev-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s}
.rev-btn:hover{background:var(--card2);border-color:#444}
.rev-btn svg{width:18px;height:18px}
.rev-btn.prev svg{transform:scaleX(-1)}
.rev-count{font:500 14px var(--f-mono);color:var(--muted);min-width:64px;text-align:center}
.rev-spin{margin-left:auto;border:0;background:none;color:var(--text);font:500 14px var(--f-mono);cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0}
.rev-spin b{width:10px;height:10px;border-radius:3px;background:var(--pink);display:inline-block}
.rev-spin:hover{color:var(--pink)}

/* Übersicht unter der Trommel */
.rev-index{margin-top:clamp(48px,7vw,90px);border-top:1px solid var(--line)}
.rev-index a{display:grid;grid-template-columns:52px minmax(0,1fr) auto 36px;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);transition:padding .35s,color .25s}
@media (hover:hover){.rev-index a:hover,.rev-index a.on{padding-left:10px}}
.rev-index a.on .n{color:var(--pink)}
.rev-index .n{font:500 13px var(--f-mono);color:var(--dim)}
.rev-index .t{font:700 clamp(22px,2.4vw,30px)/1 var(--f-display);text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-index .k{font:500 13px var(--f-mono);color:var(--muted);white-space:nowrap}
.rev-index .arr{justify-self:end;color:var(--muted)}
.rev-index .arr svg{width:16px;height:16px}

@media (max-width:1040px){
  .rev{grid-template-columns:1fr}
  .rev-stage{width:min(100%,460px)}
  .rev-info{text-align:left}
}
@media (max-width:680px){
  .rev{gap:28px}
  .rev-stage{width:min(88vw,380px);margin-top:18px}
  .rev-dev{height:auto;min-height:150px;margin-bottom:18px}
  .rev-dev .dev-laptop{width:min(100%,270px)}
  .rev-dev .dev-phone{width:84px}
  .rev-name{font-size:clamp(40px,12vw,56px)}
  .rev-text{font-size:16px}
  .rev-index a{grid-template-columns:36px minmax(0,1fr) 24px;gap:10px;padding:16px 0}
  .rev-index .k{display:none}
  .rev-btn{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){ .rev-index a{transition:none} }