/* PCFOX V26 — Szenen. Jede Szene ist eine Bühne (sticky), der Film ist der Hauptinhalt,
   HTML liegt ruhig darüber. Scroll-Fortschritt kommt als --p / --win / --hp aus JS. */

/* ── Grundgerüst ── */
/* V28: kürzere Scroll-Strecken — die Seite lässt sich schnell durchscrollen, die Sequenz läuft mit */
.scene{position:relative;height:var(--len,190vh);background:var(--black)}
.scene.tone-light{background:var(--black)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.scene.tone-light > .stage{background:var(--paper)}

/* Fenster-Übergang: die nächste Welt öffnet sich wie ein Bildschirm, dem die Kamera näherkommt */
.scene[data-window] .stage{clip-path:inset(calc(var(--win,0) * 14%) calc(var(--win,0) * 20%) round calc(var(--win,0) * 36px))}

/* Film-Ebene. Ohne freigegebenen Film: ruhige Lichtstimmung bzw. Poster. */
.film{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(ellipse 40% 46% at 66% 36%,rgba(245,245,247,.07),transparent 70%),radial-gradient(ellipse 26% 70% at 100% 60%,rgba(138,92,255,.12),transparent 72%),linear-gradient(180deg,#0c0c11,#07070a 60%,#0a0a0e)}
.film--studio{background:radial-gradient(ellipse 70% 60% at 50% 38%,#fff,#f2f2f5 60%,#e8e8ec)}
.film.has-poster{background:var(--poster) center/cover no-repeat,var(--ink)}
.film--studio.has-poster{background:var(--poster) center/cover no-repeat,var(--paper)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--d-slow) ease;
  transform:translate3d(0,var(--fy,0px),0) scale(var(--fs,1.04));will-change:transform}
.film.is-live video{opacity:1}
/* V28: Bildsequenz auf Canvas (sequence.js) */
.film canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--d-base) ease}
.film.is-live canvas{opacity:1}
/* Studio-Flächen: Vorschaubild ausblenden, sobald die Sequenz zeichnet (sonst scheint es hinter dem ausgeblendeten Rand durch) */
.film.film--box.is-live{background:none}
/* Graphit-Szenen blenden beim Eintritt aus dem Schwarz auf (--in aus motion.js) */
.scene:not([data-window]) > .stage > .film{opacity:calc(.12 + .88 * var(--in,1))}
/* Studio-Filme in eigener Bühnenfläche: Ränder laufen weich ins Studio-Weiss aus, Typografie behält Raum */
.film--box{inset:var(--box);background:transparent;
  -webkit-mask-image:radial-gradient(ellipse closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 74%,transparent 100%)}
.film--box video{object-fit:contain;transform:none}  /* eigene Fläche: kein Tiefen-Zoom, damit nichts an die Ränder läuft */
.film--box.has-poster{background:var(--poster) center/contain no-repeat}
.scene--anatomy .film--box{--box:8% 0 0 27%}
/* Fernwartung: exakte 16:9-Fläche, weiche Ränder an allen vier Seiten (kein Oval, das die Laptop-Ecken anschneidet) */
.scene--remote .film--box{inset:auto;left:50%;top:54%;width:min(70vw,1110px,calc(56svh * 16 / 9));aspect-ratio:16/9;translate:-50% -50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}
.scene--remote .film--box video{object-fit:cover}
.show-slots .film.is-pending::before{content:"FILM · " attr(data-slot) " · ausstehend";position:absolute;right:var(--gutter);top:92px;z-index:3;padding:7px 12px;border-radius:999px;border:1px dashed rgba(195,178,255,.35);font:500 10.5px/1 var(--mono);color:rgba(195,178,255,.75);background:rgba(5,5,7,.5)}

/* Schleier für Lesbarkeit */
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,7,.78),rgba(5,5,7,.3) 42%,rgba(5,5,7,0) 66%),linear-gradient(0deg,rgba(5,5,7,.82),rgba(5,5,7,0) 48%)}
.scene.tone-dark > .stage::before{content:"";position:absolute;left:0;right:0;top:0;height:22vh;z-index:1;pointer-events:none;background:linear-gradient(var(--black),rgba(5,5,7,0))}
.scene.tone-dark > .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16vh;z-index:1;pointer-events:none;background:linear-gradient(rgba(5,5,7,0),var(--black))}
#home .stage::before{display:none}
.veil--light{background:linear-gradient(180deg,rgba(245,245,247,.9) 0%,rgba(245,245,247,.35) 26%,rgba(245,245,247,0) 42%,rgba(245,245,247,0) 70%,rgba(245,245,247,.92) 100%)}

/* ═══ HERO ═══ */
.scene--hero{--len:180vh}
.veil--hero{background:linear-gradient(90deg,rgba(5,5,7,.72),rgba(5,5,7,.2) 46%,rgba(5,5,7,0) 62%),linear-gradient(0deg,rgba(5,5,7,.7),rgba(5,5,7,0) 36%)}
.hero{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:120px 0 clamp(40px,8vh,90px);
  transform:translate3d(0,calc(var(--hp,0) * -8vh),0);opacity:calc(1 - var(--hp,0) * 1.2)}
.hero__eyebrow{color:var(--lavender)}
.hero__title{margin:22px 0 0 -.05em;font-size:var(--t-display);line-height:.86;font-weight:700;letter-spacing:-.065em;color:#fff}
.hero__title .w{display:block}
.hero__title .w--thin{font-weight:280;color:rgba(245,245,247,.62);letter-spacing:-.055em}
.hero__title .ch{display:inline-block;animation:ch-in 1.25s var(--ease-out) both;animation-delay:calc(140ms + var(--i) * 50ms)}
.hero__claim{margin-top:clamp(20px,3vh,34px);font-size:clamp(20px,1.9vw,32px);font-weight:500;letter-spacing:-.025em;color:var(--paper)}
.hero__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(30px,6vh,64px)}
.hero__foot .link-quiet{margin-left:12px;color:#fff}
.hero__eyebrow,.hero__claim,.hero__foot{animation:rise 1.2s var(--ease-out) both}
.hero__eyebrow{animation-delay:40ms}.hero__claim{animation-delay:560ms}.hero__foot{animation-delay:720ms}
@keyframes ch-in{from{opacity:0;transform:translate3d(0,.3em,0);filter:blur(12px)}}
@keyframes rise{from{opacity:0;transform:translate3d(0,24px,0)}}
.hero-light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--d-slow) ease;background:radial-gradient(520px circle at var(--mx,62%) var(--my,40%),rgba(195,178,255,.09),transparent 65%)}
.hero-light.is-on{opacity:1}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:26px;translate:-50% 0;width:1px;height:46px;overflow:hidden;background:rgba(255,255,255,.14);animation:rise 1s 1.2s both}
.scroll-cue i{position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--lavender);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* ═══ ANATOMIE ═══ */
.scene--anatomy{--len:240vh}
.anatomy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:none}
.anatomy > *{max-width:26vw}
.anatomy .eyebrow{color:var(--violet-3)}
.anatomy h2{font-size:clamp(40px,4.4vw,86px)}
.anatomy__note{margin-top:26px;font-size:var(--t-lede);line-height:1.5;color:var(--fg-2)}
.anatomy__tags{position:absolute;z-index:2;right:var(--gutter);top:50%;translate:0 -50%;display:grid;gap:18px;text-align:right}
.anatomy__tags li{font-size:clamp(15px,1.1vw,18px);font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.anatomy__tags li::before{content:"";display:inline-block;width:34px;height:1px;margin-right:14px;vertical-align:middle;background:var(--violet-3);opacity:.6}
[data-at]{opacity:.0;transform:translate3d(0,10px,0);transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
[data-at].is-on{opacity:1;transform:none}

/* ═══ FERNWARTUNG ═══ */
.scene--remote{--len:230vh}
.remote{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:110px 0 clamp(28px,5vh,56px)}
.remote__head{display:flex;flex-direction:column}
.remote__head h2{font-size:clamp(40px,4.6vw,88px)}
.story{align-self:end;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);border-top:1px solid var(--line-2);padding-top:22px}
.story__step{display:grid;gap:10px;align-content:start;opacity:.32;transition:opacity var(--d-base) var(--ease-out)}
.story__step.is-active,.story__step.is-done{opacity:1}
.story__step.is-done:not(.is-active){opacity:.55}
.story__n{font:600 12px/1 var(--mono);color:var(--violet-3)}
.story__step strong{font-size:clamp(20px,1.7vw,28px);font-weight:620;letter-spacing:-.025em}
.story__step .chip{justify-self:start}
.remote__dl{position:absolute;right:0;top:110px;width:min(380px,32vw)}
.downloads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dl{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-radius:16px;background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:0 10px 30px rgba(11,11,16,.06);transition:border-color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.dl:hover{border-color:var(--line-2);transform:translate3d(0,-2px,0)}
.dl img{width:18px;height:18px;filter:invert(1) brightness(.2)}
.dl span{flex:1;display:grid;line-height:1.25}
.dl strong{font-size:15px;font-weight:640}
.dl small{font-size:12px;color:var(--fg-3)}
.dl i{font-style:normal;color:var(--violet-3)}

/* ═══ WEBSITE & HOSTING ═══ */
.scene--web{--len:260vh}
.scene--web .stage{background:radial-gradient(ellipse 80% 70% at 62% 50%,#fff,var(--paper) 70%)}
.web{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;opacity:calc(1 - var(--live,0) * 1.6)}
.web > *{max-width:24vw}
.web__head h2{font-size:clamp(40px,4.2vw,84px)}
.web__phases{margin-top:clamp(28px,5vh,52px);display:grid;gap:4px}
.web__phases li{display:flex;align-items:baseline;gap:16px;padding:10px 0;font-size:clamp(17px,1.3vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--fg-3);border-top:1px solid var(--line);transition:color var(--d-base) var(--ease-out)}
.web__phases b{font:600 12px/1 var(--mono);color:var(--violet-3);opacity:.6}
.web__phases li.is-active{color:var(--fg)}
.web__phases li.is-active b{opacity:1}
.web__caption{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(28px,5vh,56px);opacity:calc(1 - var(--live,0) * 2)}
.web__dusk{position:absolute;inset:0;z-index:6;background:var(--black);opacity:var(--dusk,0);pointer-events:none}

.browser{
  --bx:0px;--by:0px;--bs:1;
  position:absolute;z-index:2;right:var(--gutter);top:50%;width:min(66vw,1180px);aspect-ratio:16/10;
  translate:0 -50%;transform-origin:50% 50%;
  transform:translate3d(calc(var(--bx) * var(--live,0)),calc(var(--by) * var(--live,0)),0) scale(calc(1 + (var(--bs) - 1) * var(--live,0)));
  border-radius:calc(18px * (1 - var(--live,0)));overflow:hidden;background:#fff;
  box-shadow:0 60px 120px rgba(11,11,16,calc(.18 * (1 - var(--live,0)))),0 0 0 1px rgba(11,11,16,calc(.08 * (1 - var(--live,0))));
  will-change:transform;
}
.browser__bar{height:44px;display:flex;align-items:center;gap:16px;padding:0 16px;background:#f3f3f5;border-bottom:1px solid rgba(11,11,16,.07);opacity:calc(1 - var(--live,0) * 2)}
.browser__dots{display:flex;gap:7px}.browser__dots i{width:11px;height:11px;border-radius:50%;background:#dcdce0}
.browser__url{flex:1;max-width:420px;margin-inline:auto;height:28px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;background:#fff;border:1px solid rgba(11,11,16,.07);font-size:12.5px;font-weight:550;color:#3c3c44}
.browser__lock{color:#138a4d;opacity:clamp(0,calc((var(--p,0) - .5) * 14),1)}
.browser__tag{font-size:10.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,16,.42)}
.browser__view{position:relative;height:calc(100% - 44px)}

/* 01 Design-System */
.ds{position:absolute;inset:0;padding:6% 7%;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr auto;gap:6%;background:#fbfbfc;
  opacity:clamp(0,calc((.3 - var(--p,0)) * 10),1)}
.ds__grid{position:absolute;inset:0 7%;display:grid;grid-template-columns:repeat(12,1fr);gap:1.6%}
.ds__grid i{background:rgba(138,92,255,.06);border-inline:1px solid rgba(138,92,255,.14);transform-origin:top;transform:scaleY(clamp(0,calc(var(--p,0) * 14),1))}
.ds__type{position:relative;align-self:center;display:grid;gap:8px;opacity:clamp(0,calc((var(--p,0) - .05) * 12),1)}
.ds__aa{font-size:clamp(60px,9vw,150px);font-weight:680;letter-spacing:-.06em;line-height:.9;color:#101014}
.ds__meta{font:500 12px/1.4 var(--mono);color:rgba(11,11,16,.5)}
.ds__swatches{position:relative;align-self:center;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;opacity:clamp(0,calc((var(--p,0) - .09) * 12),1)}
.ds__swatches i{aspect-ratio:1/1.3;border-radius:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(11,11,16,.08)}
.ds__scale{position:relative;grid-column:1/-1;display:flex;align-items:flex-end;gap:14px;opacity:clamp(0,calc((var(--p,0) - .13) * 12),1)}
.ds__scale i{height:8px;background:#101014;border-radius:2px}
.ds__scale i:nth-child(1){width:8px}.ds__scale i:nth-child(2){width:16px}.ds__scale i:nth-child(3){width:24px}.ds__scale i:nth-child(4){width:40px}.ds__scale i:nth-child(5){width:64px}.ds__scale i:nth-child(6){width:104px}

/* 02 Beispiel-Website (baut sich auf) */
.site{position:absolute;inset:0;background:#f4f1ec;color:#141414;overflow:hidden;opacity:clamp(0,calc((var(--p,0) - .2) * 12),1)}
.site__nav{position:absolute;z-index:2;left:0;right:0;top:0;height:11%;display:flex;align-items:center;justify-content:space-between;padding:0 5%;color:#fff;
  opacity:clamp(0,calc((var(--p,0) - .23) * 14),1);translate:0 calc((1 - clamp(0,calc((var(--p,0) - .23) * 14),1)) * -12px)}
.site__logo{font-size:clamp(10px,1vw,15px);font-weight:700;letter-spacing:.24em}
.site__logo b{font-weight:300;margin-left:.4em}
.site__links{display:flex;gap:2.4em;font-size:clamp(8px,.78vw,12px);font-weight:500;letter-spacing:.06em}
.site__links i{font-style:normal}
.site__hero{position:absolute;left:0;right:0;top:0;height:74%;overflow:hidden;
  clip-path:inset(0 0 calc((1 - clamp(0,calc((var(--p,0) - .26) * 9),1)) * 100%) 0)}
.site__hero img{width:100%;height:100%;object-fit:cover;scale:calc(1.12 - clamp(0,calc((var(--p,0) - .26) * 4),1) * .12)}
.site__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(20deg,rgba(10,12,18,.62) 0%,rgba(10,12,18,.25) 34%,rgba(10,12,18,0) 58%),linear-gradient(180deg,rgba(10,12,18,.32),rgba(10,12,18,0) 22%)}
.site__copy{position:absolute;z-index:1;left:5%;bottom:10%;display:grid;gap:.9em;color:#fff;opacity:clamp(0,calc((var(--p,0) - .33) * 12),1);translate:0 calc((1 - clamp(0,calc((var(--p,0) - .33) * 12),1)) * 16px)}
.site__kicker{font-size:clamp(7px,.72vw,11px);font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.site__h{font-size:clamp(22px,3.4vw,58px);font-weight:600;letter-spacing:-.04em;line-height:.95;font-optical-sizing:auto}
.site__btn{justify-self:start;padding:.8em 1.4em;border-radius:999px;background:#fff;color:#141414;font-size:clamp(7px,.72vw,11px);font-weight:650}
.site__row{position:absolute;left:5%;right:5%;top:79%;height:40%;display:grid;grid-template-columns:1.1fr 1fr;gap:4%;
  opacity:clamp(0,calc((var(--p,0) - .38) * 12),1);translate:0 calc((1 - clamp(0,calc((var(--p,0) - .38) * 12),1)) * 20px)}
.site__row figure{overflow:hidden;border-radius:4px}.site__row img{width:100%;height:100%;object-fit:cover}
.site__text{display:grid;align-content:start;gap:.8em;padding-top:2%}
.site__h2{font-size:clamp(14px,1.8vw,30px);font-weight:600;letter-spacing:-.03em}
.site__p{height:.6em;width:90%;border-radius:2px;background:rgba(20,20,20,.12)}.site__p--s{width:62%}

/* 03 Deployment */
.deploy{position:absolute;z-index:3;left:50%;bottom:6%;translate:-50% 0;display:flex;align-items:center;gap:6px;padding:8px;border-radius:999px;background:rgba(12,12,16,.86);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,.25);
  opacity:clamp(0,calc(min((var(--p,0) - .45) * 14,(.74 - var(--p,0)) * 14)),1)}
.deploy__step{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;color:rgba(255,255,255,.45);transition:color var(--d-base) ease,background var(--d-base) ease}
.deploy__step i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:background var(--d-base) ease}
.deploy__step.is-done{color:#fff}.deploy__step.is-done i{background:var(--ok)}
.deploy__step .state{color:rgba(255,255,255,.4)}.deploy__step .state::before{background:rgba(255,255,255,.3);box-shadow:none}
.deploy__step.is-done .state{color:var(--ok-text)}.deploy__step.is-done .state::before{background:var(--ok);box-shadow:0 0 0 3px rgba(53,201,122,.2)}

/* ═══ Graphit-Szenen (Cloud, Infrastruktur, Sicherheit, Monitoring) ═══ */
.copy{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:end;gap:clamp(32px,6vw,120px);padding:120px 0 clamp(52px,10vh,120px)}
.copy--stack{grid-template-columns:1fr;align-content:end;row-gap:0}
.copy > .panel,.copy > .feeds{justify-self:end;width:min(100%,440px)}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(40px,7vh,80px)}
.services li{display:flex;gap:14px;align-items:flex-start;padding-top:20px;border-top:1px solid var(--line-2)}
.services img{width:24px;height:24px;object-fit:contain;flex:none;margin-top:2px}
.services h3{font-size:16px}.services p{margin-top:4px;font-size:13.5px;color:var(--fg-3)}
.apps{display:flex;align-items:center;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.apps img{width:20px;height:20px;object-fit:contain;opacity:.88}
.panel--endpoint .endpoint{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0 12px;border-top:1px solid var(--line);font-size:16px}
.chain{position:absolute;z-index:2;left:0;right:0;bottom:clamp(20px,3.4vh,36px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 0}
.chain li{display:flex;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--fg-2)}
.chain li:not(:last-child)::after{content:"";width:clamp(18px,3vw,54px);height:1px;margin:0 14px;background:linear-gradient(90deg,rgba(195,178,255,.5),rgba(195,178,255,.15))}
#security .copy{padding-bottom:clamp(96px,16vh,150px)}
.products{margin-top:30px;max-width:520px}
.products li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.products p{font-size:13px;color:var(--fg-3)}
.feeds{padding:18px;border-radius:24px;background:rgba(10,10,14,.55);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.feeds time{font-family:var(--mono);letter-spacing:.04em;margin-left:8px;color:var(--fg-2)}
.feeds__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feed{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#131318,#0a0a0e)}
.feed canvas{width:100%;height:100%;opacity:0;transition:opacity var(--d-base) ease}
.feeds.is-live canvas{opacity:1}
.feed figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:18px 10px 8px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.62));font-size:10.5px;font-weight:600;letter-spacing:.05em;color:#fff}
.feed .state{font-size:9.5px;gap:6px}.feed .state::before{width:6px;height:6px}

/* ═══ TEAM ═══ */
.team{position:relative;z-index:6;padding:clamp(120px,18vh,200px) 0 clamp(90px,14vh,160px)}
.team__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin-top:clamp(48px,8vh,88px)}
.person__media{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#f1f1f3;border:1px solid var(--line);transition:transform var(--d-slow) var(--ease-out),border-color var(--d-fast) ease}
.person:hover .person__media{transform:translate3d(0,-6px,0);border-color:rgba(195,178,255,.3)}
.person__media img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 30%);transform:scale(var(--zoom,1));transform-origin:var(--focus,50% 30%);filter:brightness(.97)}
.person figcaption{display:grid;gap:3px;padding:18px 4px 0}
.person strong{font-size:17px;font-weight:640;letter-spacing:-.02em}
.person figcaption span{font-size:13.5px;color:var(--fg-3)}
.person--type .person__media{display:grid;place-items:center;background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(138,92,255,.15),transparent 70%),linear-gradient(165deg,#16141d,#0b0b10 70%)}
.person--type .person__media span{font-size:clamp(56px,6vw,104px);font-weight:240;letter-spacing:-.05em;color:var(--lavender)}

/* ═══ KONTAKT ═══ */
.contact{position:relative;z-index:6;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.contact__inner{padding:140px 0 110px}
.contact h2{font-size:clamp(42px,6vw,112px)}
.bubbles{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(40px,7vh,72px)}
.bubble-wrap{position:relative}
.bubble{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:26px;min-width:min(360px,calc(100vw - 2*var(--gutter)));padding:24px 26px 24px 32px;border-radius:999px;text-align:left;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);transition:border-color var(--d-fast) var(--ease),background var(--d-fast) var(--ease)}
.bubble:hover,.bubble[aria-expanded="true"]{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.09)}
.bubble small{font-size:11px;font-weight:680;letter-spacing:.2em;text-transform:uppercase;color:var(--lavender)}
.bubble strong{grid-column:1;margin-top:4px;font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.02em}
.bubble i{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-style:normal;font-size:20px;font-weight:300;border:1px solid rgba(255,255,255,.16);transition:transform var(--d-fast) var(--ease)}
.bubble[aria-expanded="true"] i{transform:rotate(45deg)}
.menu{position:absolute;z-index:5;top:calc(100% + 10px);left:0;width:max(100%,260px);padding:8px;border-radius:22px;background:rgba(16,15,22,.92);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.menu[hidden]{display:none}
.menu a{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:15px;font-size:15px;font-weight:560;transition:background var(--d-quick) ease}
.menu a:hover,.menu a:focus-visible{background:rgba(255,255,255,.07)}
.menu a span{color:var(--lavender)}
.contact__form{margin-top:36px}

/* ═══ Footer ═══ */
.footer{position:relative;z-index:6;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding:34px 0 44px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-3)}
.footer__brand img{width:auto;height:34px;opacity:.92}
.footer a:not(.footer__brand){border-bottom:1px solid rgba(195,178,255,.3)}

/* ═══ Tablet ═══ */
@media (max-width:1100px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .copy{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr)}
  .anatomy > *{max-width:34vw}
  .web > *{max-width:30vw}
  .browser{width:62vw}
}

/* ═══ Mobile: eigene Dramaturgie — kaum Pinning, klare Bilder, grosse Touch-Ziele ═══ */
@media (max-width:860px){
  .scene,.scene--hero,.scene--anatomy,.scene--remote,.scene--web{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .scene[data-window] .stage{clip-path:none}
  .film video{transform:none;will-change:auto}
  .veil{background:linear-gradient(0deg,rgba(5,5,7,.95),rgba(5,5,7,.72) 48%,rgba(5,5,7,.2))}
  .scene--hero .stage{display:flex;flex-direction:column;justify-content:flex-end}
  .scene--hero .film{bottom:auto;height:58svh}
  .veil--hero{background:linear-gradient(0deg,var(--black) 38%,rgba(5,5,7,.55) 58%,rgba(5,5,7,0) 80%)}
  .hero{height:auto;justify-content:flex-end;padding:44svh 0 56px;transform:none;opacity:1}
  .film--box{inset:auto;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
  .scene--hero .film video,.scene--hero .film.has-poster{object-position:70% 50%;background-position:70% 50%}
  .hero__title{font-size:clamp(66px,22vw,150px)}
  .hero__foot .btn{flex:1 1 auto;height:54px}
  .hero__foot .link-quiet{margin:8px 0 0}
  .scroll-cue{display:none}

  .anatomy{justify-content:flex-start;padding:110px 0 0}
  .anatomy > *{max-width:none}
  .scene--anatomy .stage{min-height:0;padding-bottom:40px;display:flex;flex-direction:column}
  .scene--anatomy .anatomy{order:1;height:auto}
  .scene--anatomy .anatomy__tags{order:2}
  .scene--anatomy .film{order:3;position:relative;inset:auto;height:auto;aspect-ratio:16/9;margin-top:18px}
  /* Studio-Filme auf dem Handy: an allen vier Seiten weich ins Seiten-Weiss auslaufen */
  .scene--anatomy .film--box,.scene--remote .film--box{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
  .anatomy__tags{position:relative;right:auto;top:auto;translate:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px var(--gutter) 0;text-align:left}
  .anatomy__tags li::before{width:14px;margin-right:8px}
  [data-at]{opacity:1;transform:none}

  .remote{display:flex;flex-direction:column;gap:28px;padding:20px 0 56px;height:auto}
  .scene--remote .stage{min-height:0}
  .scene--remote .film--box{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:16/9;translate:none;margin-top:96px}
  .story{align-self:stretch}
  .scene--remote .stage{display:flex;flex-direction:column}
  .veil--light{display:none}
  .story{grid-template-columns:1fr;gap:18px}
  .story__step,.story__step.is-done:not(.is-active){opacity:1}
  .remote__dl{position:static;width:100%}

  .web{padding:110px 0 30px;opacity:1}
  .web > *{max-width:none}
  .scene--web .stage{min-height:0;padding-bottom:48px}
  .web__phases{display:flex;flex-wrap:wrap;gap:4px 16px}
  .web__phases li{border:0;padding:4px 0;font-size:15px;color:var(--fg)}
  .browser{position:relative;right:auto;top:auto;translate:none;transform:none;width:calc(100% - 2*var(--gutter));margin:26px auto 28px;border-radius:14px}
  .deploy{gap:2px;padding:4px;bottom:5%}
  .deploy__step{height:22px;padding:0 7px;gap:5px;font-size:9.5px}
  .deploy__step .state{font-size:9px;gap:5px}
  .web__caption{position:static;margin:0 var(--gutter)}
  .browser__bar{height:34px;opacity:1}
  .browser__view{height:calc(100% - 34px)}
  .web__caption{opacity:1}
  .web__dusk{display:none}

  .copy{grid-template-columns:1fr;gap:34px;padding:112px 0 64px}
  .copy > .panel,.copy > .feeds{justify-self:stretch;width:100%}
  .chain{position:relative;bottom:auto;padding-bottom:48px}
  #security .copy{padding-bottom:28px}
  .aurora i{width:110vmax;height:110vmax}
}
@media (max-width:560px){
  .services{grid-template-columns:1fr;gap:0}.services li{padding:16px 0}
  .downloads{grid-template-columns:1fr}
  .products li{flex-direction:column;gap:2px}
  .team__grid{gap:12px}.person strong{font-size:15px}.person figcaption span{font-size:12.5px}
  .bubble{padding:20px 20px 20px 26px}
  .chain li:not(:last-child)::after{width:12px;margin:0 8px}
}

/* ═══ Reduzierte Bewegung: keine Pin-Sequenzen, Endzustände sichtbar ═══ */
@media (prefers-reduced-motion:reduce){
  .scene,.scene--hero,.scene--anatomy,.scene--remote,.scene--web{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .scene[data-window] .stage{clip-path:none}
  .film video{transform:none!important;transition:none}
  .hero{transform:none!important;opacity:1!important}
  .hero__title .ch,.hero__eyebrow,.hero__claim,.hero__foot,.scroll-cue,.scroll-cue i{animation:none!important}
  .hero-light{display:none}
  [data-at],.story__step,.story__step.is-done:not(.is-active){opacity:1;transform:none;transition:none}
  .person__media,.dl{transition:none}
}