/* 42 Takes (vormals Motilet) · Fassung v5, Grundlage v4 «Mix». Designsystem und Schrift aus Fassung C «Kinetik», Farbsprache von sonnystarr.me
   (Grund #07080a, Schrift #f3f3ee, Akzent Lime #D4FF3A), Weltall-Bühnen für Arbeiten und Studios aus Fassung B. */
@font-face{font-family:'Inter Tight';font-weight:100 900;font-display:swap;src:url(fonts/InterTight-var.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url(fonts/Inter-var.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-display:swap;src:url(fonts/JetBrainsMono-var.woff2) format('woff2')}

:root{
  /* sonnystarr.me: --bg #07080a, --ink #f3f3ee, --muted .5, --line .14, --accent #D4FF3A, Fehler #ff7a6b */
  --bg:#07080a; --black:#07080a; --ink:#f3f3ee; --white:#f3f3ee; --lift:#0d0f12; --lift2:#14171b;
  --lime:#D4FF3A; --lime-glow:rgba(212,255,58,.55); --err:#ff7a6b;
  --muted:rgba(243,243,238,.5); --dim:rgba(243,243,238,.32); --line-l:rgba(243,243,238,.14); --line-d:rgba(7,8,10,.18);
  --head:'Inter Tight',Helvetica,Arial,sans-serif; --body:'Inter',Helvetica,Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --gx:clamp(18px,3.4vw,56px); --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--bg)}
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
main,footer{position:relative;z-index:2}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Fortschritt oben */
.topbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:31;pointer-events:none}
.topbar i{display:block;height:100%;width:100%;background:var(--lime);box-shadow:0 0 12px var(--lime-glow);transform-origin:0 50%;transform:scaleX(0)}

/* Navigation: Farbe wechselt mit der Fläche darunter (dunkel oder lime) */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:16px var(--gx);color:var(--ink);background:rgba(7,8,10,var(--nb,0));transition:color .35s var(--ease),background-color .35s var(--ease)}
.nav.dark{color:var(--bg)}
.nav.on-red{background:rgba(212,255,58,var(--nb,0))}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.035em}
.brand i{width:15px;height:15px;background:var(--lime);display:block;transition:transform .5s var(--ease)}
.brand:hover i{transform:rotate(90deg)}
.nav.on-red .brand i{background:var(--bg)}
.nav nav{display:flex;align-items:center;gap:30px;font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:-.005em}
.nav nav a:not(.btn){position:relative}
.nav nav a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.nav nav a:not(.btn):hover::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--lime);color:var(--bg);font-family:var(--head);font-weight:700;font-size:14px;padding:11px 18px;border:0;cursor:pointer;letter-spacing:-.01em;transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:var(--ink);color:var(--bg)}
.nav.on-red .btn{background:var(--bg);color:var(--lime)}

/* Gemeinsame Schrift-Bausteine */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.kicker b{font-weight:500;color:var(--lime)}
.kicker::after{content:'';flex:0 0 46px;height:1px;background:currentColor;opacity:.5}
h1,h2,h3{font-family:var(--head);font-weight:850;letter-spacing:-.055em;line-height:.88}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.anchor{position:absolute;pointer-events:none}
.fallback-word{display:none}
.no-gl .fallback-word{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:var(--head);font-weight:900;letter-spacing:-.06em;line-height:.8;color:var(--lime);font-size:min(22vw,40vh)}

/* ---------- 1 · Hero ---------- */
.hero{height:440vh;background:transparent}
.rule{position:absolute;left:var(--gx);right:var(--gx);display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line-l);padding-top:10px}
.rule-top{top:76px}
.rule .show-s{display:none}
.rule span{white-space:nowrap;overflow:hidden}
.rule span:nth-child(n+2){padding-left:12px;border-left:1px solid var(--line-l)}
.hero-lead{position:absolute;left:var(--gx);top:118px;font-size:clamp(44px,6.6vw,104px);color:var(--ink);will-change:transform,opacity}
.hero-lead .ln{display:block}
.hero-anchor{left:var(--gx);right:var(--gx);top:calc(118px + 2 * clamp(44px,6.6vw,104px) * .88 + 3vh);bottom:150px}
.hero-foot{position:absolute;left:var(--gx);right:var(--gx);bottom:34px;display:grid;grid-template-columns:5fr 4fr 3fr;align-items:end;gap:24px;border-top:1px solid var(--line-l);padding-top:16px}
.caps{position:relative;height:66px}
.cap{position:absolute;inset:0;display:flex;gap:18px;align-items:flex-start;font-size:clamp(16px,1.25vw,19px);line-height:1.35;color:var(--ink);max-width:470px;opacity:0;will-change:opacity,transform}
.cap b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--lime);padding-top:4px;letter-spacing:.1em}
.ticks{display:flex;gap:8px;align-self:center}
.ticks i{flex:1;height:3px;background:var(--line-l);position:relative;overflow:hidden}
.ticks i::after{content:'';position:absolute;inset:0;background:var(--lime);transform:scaleX(var(--f,0));transform-origin:0 50%}
.cue{justify-self:end;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,243,238,.6);display:flex;align-items:center;gap:12px}
.cue span{width:1px;height:28px;background:rgba(243,243,238,.4)}
.red-cover{position:absolute;inset:0;background:var(--lime);opacity:0;pointer-events:none;z-index:3}

/* ---------- 2 · Manifest ---------- */
.manifest{height:320vh;background:var(--bg);position:relative}
.mark{position:absolute;left:0;bottom:100vh;width:1px;height:1px}
.behind{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6vh}
.manifest .pin{perspective:1600px;perspective-origin:50% 100%}
.sheet{position:absolute;inset:0;background:var(--lime);color:var(--bg);transform-origin:50% 100%;will-change:transform;backface-visibility:hidden}
.sheet-in{position:absolute;left:var(--gx);right:var(--gx);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-top:40px}
.sheet .kicker{margin-bottom:4vh}
.sheet .kicker b{color:var(--bg)}
.flip{font-size:clamp(54px,11.6vw,196px);line-height:.86;letter-spacing:-.06em;perspective:900px}
.flip .row{display:block;white-space:nowrap}
.flip .w{display:inline-block;transform-origin:50% 100% -.25em;will-change:transform,opacity;backface-visibility:hidden}
.sheet-sub{margin-top:5vh;max-width:560px;margin-left:auto;font-size:clamp(18px,1.6vw,24px);line-height:1.3;font-weight:500;letter-spacing:-.01em}
.sheet-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.work-head{padding:0 var(--gx);position:relative}
.work-head .kicker{color:rgba(243,243,238,.7)}
.giant{font-size:clamp(120px,31vw,520px);line-height:.78;letter-spacing:-.075em;margin-top:3vh;perspective:1200px;display:flex}
.giant span{display:inline-block;transform-origin:50% 50% -.3em;will-change:transform}
.giant span:last-child{color:var(--lime)}
.work-count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,243,238,.6);margin-top:3vh;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));column-gap:28px;row-gap:8px;border-top:1px solid var(--line-l);padding-top:14px}
.work-count a{display:flex;gap:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ease)}
.work-count a b{color:var(--lime);font-weight:500}
.work-count a:hover{color:var(--ink)}
.work-total{margin-bottom:auto;padding:17vh var(--gx) 0;max-width:15em;font-family:var(--head);font-weight:700;font-size:clamp(26px,2.9vw,44px);line-height:1.02;letter-spacing:-.035em;color:var(--ink);will-change:transform,opacity}
.work-total em{font-style:normal;color:var(--lime)}

/* ---------- 3 und 6 · Weltall-Bühnen (aus Fassung B): eine Leinwand pro Abschnitt, die Kamera fährt mit dem Scrollen ---------- */
.space{position:relative;background:var(--bg)}
.space-work{height:1600vh}            /* echte Höhe setzt space.js je nach Zahl der Filme */
.space-studio{height:320vh}
.space-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.space-host{position:absolute;inset:0}
.space-host canvas{display:block;width:100%;height:100%}
.space-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.6) 100%),linear-gradient(to top,rgba(7,8,10,.85),rgba(7,8,10,0) 34%),linear-gradient(to bottom,rgba(7,8,10,.7),rgba(7,8,10,0) 20%)}
.film-mark{position:absolute;left:0;width:1px;height:1px}
.hud{position:absolute;z-index:3;opacity:0;visibility:hidden;will-change:opacity,transform;transform:translate3d(0,var(--y,0px),0)}
.space-top{position:absolute;left:var(--gx);right:var(--gx);top:78px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line-l);padding-top:10px;z-index:3}
.space-top .kicker{color:rgba(243,243,238,.7)}
.space-count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.space-count b{color:var(--lime);font-weight:500}
.space-rail{position:absolute;left:var(--gx);right:var(--gx);bottom:0;height:3px;background:var(--line-l);z-index:3}
.space-rail i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.film-media{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.film{position:absolute;left:var(--gx);right:var(--gx);bottom:28px;z-index:3;opacity:0;visibility:hidden;will-change:opacity,transform;transform:translate3d(0,var(--y,0px),0)}
.film-meta{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:28px;border-top:1px solid var(--line-l);padding-top:16px}
.film-no{font-family:var(--head);font-weight:900;font-size:clamp(64px,7vw,120px);line-height:.75;letter-spacing:-.06em;color:var(--lime)}
.film-reel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.film-meta h3{font-size:clamp(30px,3vw,48px);letter-spacing:-.045em;line-height:.95}
.film-meta div>p:last-child{font-size:15px;color:rgba(243,243,238,.62);margin-top:6px}
.film-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,243,238,.7);text-align:right;line-height:1.7}

/* 6 · Studios: Titel oben links, zwei Blätter (C-Diptychon) unter dem Schweizer und dem amerikanischen Licht */
.studio-head{left:var(--gx);top:96px;max-width:min(760px,60vw)}
.studio-head .kicker{color:rgba(243,243,238,.7)}
.studio-title{font-size:clamp(48px,7.4vw,124px);line-height:.86;margin-top:3vh}
.studio-sub{font-size:18px;max-width:380px;line-height:1.45;margin-top:2.6vh;color:rgba(243,243,238,.72)}
.leaves{position:absolute;left:var(--gx);right:var(--gx);bottom:30px;display:flex;justify-content:space-between;gap:24px;z-index:3;pointer-events:none}
.leaves .hud{position:relative}
.leaf{width:min(380px,40vw);min-height:min(34vh,290px);padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;overflow:hidden;pointer-events:auto}
.leaf-l{background:rgba(13,15,18,.86);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-l);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.leaf-r{background:var(--lime);color:var(--bg)}
.leaf-tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.leaf h3{font-size:clamp(28px,2.6vw,44px);margin-top:auto;letter-spacing:-.045em;line-height:.95;position:relative;z-index:1}
.leaf .addr{margin-top:14px;font-size:16px;line-height:1.45;opacity:.85;position:relative;z-index:1}
.leaf-big{position:absolute;right:-.06em;top:-.16em;font-family:var(--head);font-weight:900;font-size:clamp(140px,13vw,230px);letter-spacing:-.08em;line-height:1;opacity:.1}
.leaf-r .leaf-big{opacity:.14}

/* ---------- 4 · Ablauf ---------- */
.process{height:420vh;background:transparent}
.process .pin{display:grid;grid-template-columns:5fr 7fr;padding:0 var(--gx)}
.proc-text{align-self:center;position:relative;z-index:2;padding-top:40px;max-width:520px}
.proc-text .kicker{color:rgba(243,243,238,.7)}
.proc-title{font-size:clamp(40px,4.4vw,72px);margin:3vh 0 5vh;letter-spacing:-.05em;line-height:.92}
.steps{list-style:none;counter-reset:s;border-top:1px solid var(--line-l)}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;column-gap:8px;padding:16px 0;border-bottom:1px solid var(--line-l);opacity:.32;transition:opacity .4s var(--ease)}
.steps li::before{content:'0' counter(s);font-family:var(--mono);font-size:12px;color:var(--lime);padding-top:6px;grid-row:span 2}
.steps li b{font-family:var(--head);font-weight:800;font-size:26px;letter-spacing:-.035em;line-height:1.1}
.steps li span{font-size:15px;color:rgba(243,243,238,.7);max-height:0;overflow:hidden;transition:max-height .5s var(--ease),margin .5s var(--ease)}
.steps li.on{opacity:1}
.steps li.on span{max-height:80px;margin-top:6px}
.proc-bar{height:3px;background:var(--line-l);margin-top:26px}
.proc-bar i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.proc-anchor{left:42%;right:var(--gx);top:14vh;bottom:10vh}

/* ---------- 5 · Leistungen (heller Abschnitt aus C, hier dunkel wie sonnystarr.me) ---------- */
.services{height:420vh;background:var(--lift);color:var(--ink);border-top:1px solid var(--line-l)}
.services .kicker{color:rgba(243,243,238,.7)}
.services .pin{display:grid;grid-template-columns:4fr 8fr;align-items:center;gap:3vw;padding:0 var(--gx)}
.svc-title{font-size:clamp(40px,4.4vw,72px);margin:3vh 0 4vh;line-height:.92}
.svc-desc{position:relative;height:150px;max-width:420px}
.svc-desc p{position:absolute;inset:0;font-size:18px;line-height:1.45;opacity:0;will-change:opacity,transform;color:rgba(243,243,238,.78)}
.svc-desc b{display:block;font-family:var(--head);font-weight:800;font-size:24px;letter-spacing:-.03em;margin-bottom:8px;color:var(--ink)}
.svc-index{display:flex;gap:8px;max-width:420px}
.svc-index i{flex:1;height:3px;background:var(--line-l);position:relative;overflow:hidden}
.svc-index i::after{content:'';position:absolute;inset:0;background:var(--lime);transform:scaleX(var(--f,0));transform-origin:0 50%}
.prism-stage{perspective:1400px;perspective-origin:50% 50%;height:100%;display:flex;align-items:center;justify-content:center}
.prism{--h:clamp(160px,19vw,300px);position:relative;width:100%;height:var(--h);transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:0 .3em;font-family:var(--head);font-weight:900;letter-spacing:-.065em;font-size:calc(var(--h) * .62);line-height:1;backface-visibility:hidden;overflow:hidden}
.fw{display:inline-flex;align-items:baseline;gap:.22em;white-space:nowrap}
.face small{font-size:.32em;font-weight:700;letter-spacing:-.03em;}
.f1{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-l);transform:rotateX(0deg) translateZ(calc(var(--h) / 2))}
.f2{background:var(--lime);color:var(--bg);transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}
.f3{background:var(--lift2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-l);transform:rotateX(-180deg) translateZ(calc(var(--h) / 2))}
.f4{background:var(--lime);color:var(--bg);transform:rotateX(-270deg) translateZ(calc(var(--h) / 2))}
.f1 small,.f3 small{color:var(--lime)}

/* ---------- 7 · Kontakt ---------- */
.contact{background:transparent;padding:0 var(--gx) 16vh;position:relative}
.end-anchor{left:var(--gx);right:var(--gx);top:9vh;height:34vh}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:4vw;padding-top:50vh;position:relative}
.contact-head .kicker{color:rgba(243,243,238,.7)}
.contact-title{font-size:clamp(48px,6vw,104px);margin:3vh 0 3vh;line-height:.88}
.contact-sub{font-size:18px;color:rgba(243,243,238,.72);max-width:400px}
.form{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:26px;align-content:start;padding-top:46px}
.form label{display:flex;flex-direction:column;gap:6px}
.form label span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,243,238,.6)}
.form .wide{grid-column:1/-1}
.form input,.form textarea{font:inherit;font-size:20px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid rgba(243,243,238,.3);padding:8px 0 10px;outline:none;border-radius:0;transition:border-color .3s var(--ease)}
.form textarea{resize:vertical;min-height:110px}
.form input::placeholder{color:rgba(243,243,238,.28)}
.form input:focus,.form textarea:focus{border-bottom-color:var(--lime)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-end{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:8px}
.btn.big{font-size:20px;padding:20px 30px}
.btn.big span{transition:transform .35s var(--ease)}
.btn.big:hover span{transform:translateX(6px)}
.btn[disabled]{opacity:.5;cursor:default}
.note{font-size:13px;color:rgba(243,243,238,.55);max-width:340px;line-height:1.45}

/* ---------- Fuss ---------- */
.foot{background:var(--lime);color:var(--bg);padding:34px var(--gx) 26px;overflow:hidden}
.foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;font-weight:500;border-bottom:1.5px solid var(--bg);padding-bottom:16px}
.foot-row nav{display:flex;gap:26px;flex-wrap:wrap}
.foot-row nav a{border-bottom:1.5px solid transparent}
.foot-row nav a:hover{border-bottom-color:var(--bg)}
.foot-mark span{display:inline-block}
.foot-mark{font-family:var(--head);font-weight:900;font-size:24.6vw;letter-spacing:-.075em;line-height:.76;margin:5vh 0 2.6vh -.04em;white-space:nowrap}
.foot-copy{font-size:12px;font-weight:500}

/* ---------- Rechtstexte (gleiche Rechtstexte, dunkel wie sonnystarr.me) ---------- */
.legal{background:var(--bg);color:var(--ink)}
.legal .nav,.legal .nav.dark{color:var(--ink)}
.doc{max-width:900px;margin:0 auto;padding:150px var(--gx) 110px}
.doc .kicker{margin-bottom:22px}
.doc h1{font-size:clamp(52px,8vw,120px);margin-bottom:30px;letter-spacing:-.06em}
.doc h2{font-size:30px;letter-spacing:-.035em;margin:52px 0 12px;line-height:1.05;padding-top:16px;border-top:1.5px solid var(--line-l)}
.doc h3{font-size:22px;letter-spacing:-.03em;margin:24px 0 8px;line-height:1.1}
.doc p,.doc li{margin:8px 0;color:rgba(243,243,238,.78)}
.doc ul{padding-left:20px}
.doc a{color:var(--lime);border-bottom:1px solid currentColor}
.doc .two{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:22px}
.doc .box{padding:28px;background:var(--lift);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-l)}
.doc .box+.box{background:var(--lime);color:var(--bg);box-shadow:none}
.doc .box p{margin:4px 0;color:inherit}
.doc .box .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:28px}
.legal .foot{margin-top:0}
.doc>.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:22px}
.foot-mark-s{font-size:24vw}

/* ---------- Ohne WebGL oder mit reduzierter Bewegung: Weltall-Abschnitte als ruhige, lesbare Seite ---------- */
.flat .space{height:auto!important}
.flat .space-pin{position:static;height:auto;overflow:visible;padding:110px var(--gx) 70px}
.flat .space-host,.flat .space-shade,.flat .space-rail,.flat .space-count{display:none}
.flat .space-top{position:static;margin-bottom:40px}
.flat .hud,.flat .film{position:static;opacity:1!important;visibility:visible!important;transform:none!important}
.flat #films{display:grid;gap:70px}
.flat .film-media{position:static;width:100%;height:auto;opacity:1;aspect-ratio:16/9;background:#000;pointer-events:auto;margin-bottom:22px;box-shadow:12px 14px 0 -2px var(--lime)}
.flat .studio-head{max-width:none;margin-bottom:40px}
.flat .leaves{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0}
.flat .leaf{width:auto}

/* ---------- Handy ---------- */
@media (max-width:900px){
  .nav{padding:16px var(--gx)}
  .nav nav a:not(.btn){display:none}
  .btn{padding:10px 14px;font-size:13px}
  .rule{grid-template-columns:1fr 1fr;top:64px}
  .rule .hide-s{display:none}
  .rule .show-s{display:block}
  .hero-lead{top:96px;font-size:clamp(46px,14.6vw,78px)}
  .hero-anchor{left:10px;right:10px;top:calc(96px + 3 * clamp(46px,14.6vw,78px) * .88 + 4vh);bottom:190px}
  .cap{font-size:18px}
  .hero-foot{grid-template-columns:1fr;gap:16px;bottom:24px}
  .caps{height:72px}
  .cue{display:none}
  .flip{font-size:clamp(46px,14.6vw,120px)}
  .sheet-sub{margin-left:0}
  .work-head{padding-top:16vh}
  .work-total{padding-top:13vh;font-size:26px}
  .work-count{grid-template-columns:1fr 1fr;column-gap:16px;font-size:11px;letter-spacing:.08em}
  .work-count a{white-space:normal;gap:8px}
  .space-top{top:64px}
  .space-count{display:none}
  .film{bottom:20px}
  .film-meta{grid-template-columns:auto 1fr;gap:16px}
  .film-tag{grid-column:1/-1;text-align:left}
  .studio-head{top:80px;max-width:none;right:var(--gx)}
  .studio-title{font-size:clamp(40px,12vw,64px);margin-top:2vh}
  .studio-sub{font-size:15px;margin-top:1.6vh}
  .leaves{flex-direction:column;gap:10px;bottom:18px}
  .leaf{width:100%;min-height:0;padding:16px 18px}
  .leaf h3{font-size:24px;margin-top:10px}
  .leaf .addr{font-size:14px;margin-top:8px}
  .leaf-big{font-size:110px}
  .process .pin{grid-template-columns:1fr;grid-template-rows:42vh 1fr}
  .proc-text{grid-row:2;align-self:start;padding-top:0}
  .proc-title{font-size:34px;margin:1.6vh 0 2.4vh}
  .steps li{padding:10px 0}
  .steps li b{font-size:21px}
  .steps li.on span{max-height:90px}
  .proc-anchor{left:var(--gx);right:var(--gx);top:11vh;height:30vh;bottom:auto}
  .services .pin{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:5vh}
  .svc-title{font-size:38px;margin:2vh 0 2vh}
  .svc-desc{height:140px}
  .prism-stage{height:auto}
  .prism{--h:38vw}
  .face{font-size:calc(var(--h) * .58)}
  .end-anchor{top:9vh;height:24vh}
  .contact-grid{grid-template-columns:1fr;padding-top:38vh;gap:2vh}
  .form{grid-template-columns:1fr;padding-top:10px}
  .doc .two{grid-template-columns:1fr}
  .flat .leaves{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .steps li span{max-height:none;margin-top:6px}
  .steps li{opacity:1}
  *{transition:none!important}
}
/* 42 Takes · Wortmarke (Fassung v5): «42» Lime, «TAKES» in der Schriftfarbe der Kopfleiste; im Fuss ganz dunkel, «42» mit kleinem Abstand */
.brand .logo{height:19px;width:auto;display:block;overflow:visible}
.brand .logo .l42{fill:var(--lime);transition:fill .35s var(--ease)}
.brand .logo .lt{fill:currentColor}
.nav.dark .brand .logo .l42,.nav.on-red .brand .logo .l42{fill:currentColor}
.legal .nav .brand .logo .l42{fill:var(--lime)}
.foot-mark b{font-weight:900;margin-right:.05em}
.foot-mark{font-size:22.6vw}
.foot-mark-s{font-size:22.2vw}

/* =====================================================================================================
   Fassung v6 (04.10.2026, Sonnys Rückmeldung): 5 Formatnamen weiss, 6 Studios ohne Kästen, 7 Blockwort bleibt stehen,
   Galerie-Tafeln mit Knopf «View case». Alles darunter überschreibt v5.
   ===================================================================================================== */

/* 5 · Leistungen: alle vier Flächen dunkel, Formatnamen in #f3f3ee (Kontrast 18:1 auf #07080a, 15.9:1 auf #14171b), Lime nur als Kante */
.services .face{box-shadow:inset 0 0 0 1px rgba(243,243,238,.22)}
.f1,.f4{background:#07080a;color:#f3f3ee}
.f2,.f3{background:#14171b;color:#f3f3ee}
.face small,.f1 small,.f3 small{color:#f3f3ee}
.face::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--lime)}
.svc-desc b{color:#f3f3ee}

/* 6 · Studios: grosse Schrift im Raum, zwei Standorte auf einer Linie unter den Lichtern, keine Kästen */
.studio-head{top:104px;max-width:min(900px,66vw)}
.studio-title{font-size:clamp(48px,6.6vw,112px);line-height:.88}
.studio-title .ln{display:block}
.studio-title em{font-style:normal;font-weight:300;letter-spacing:-.04em}
.studio-sub{font-size:19px;max-width:440px;color:rgba(243,243,238,.8)}
.locs{position:absolute;left:var(--gx);right:var(--gx);bottom:34px;display:grid;grid-template-columns:1fr 1fr;gap:6vw;z-index:3;pointer-events:none}
.locs .hud{position:relative}
.loc{padding-top:20px}
.loc::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(243,243,238,.3);transform:scaleX(var(--o,1));transform-origin:0 50%}
.loc-us{text-align:right}
.loc-us::before{transform-origin:100% 50%}
.loc-tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,243,238,.75);display:flex;align-items:center;gap:12px}
.loc-us .loc-tag{justify-content:flex-end}
.loc-tag i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 16px var(--lime-glow);flex:0 0 auto}
.loc-us .loc-tag i{background:#BFD3E6;box-shadow:0 0 16px rgba(191,211,230,.7)}
.loc-name{font-size:clamp(34px,3.9vw,66px);letter-spacing:-.055em;line-height:.92;margin-top:18px;overflow:hidden;padding-bottom:.08em;white-space:nowrap}
.loc-name span{display:inline-block;transform:translateY(calc((1 - var(--o,1)) * 105%))}
.loc-addr{margin-top:14px;display:flex;flex-wrap:wrap;font-size:16px;line-height:1.5;color:rgba(243,243,238,.8)}
.loc-addr span+span::before{content:'·';margin:0 10px;color:rgba(243,243,238,.4)}
.loc-us .loc-addr{justify-content:flex-end}
.flat .locs{position:static;display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-top:10px}

/* 7 · Kontakt: angeheftete Bühne für das Blockwort, darunter das Formular */
.contact{padding:0 var(--gx) 16vh}
.end-stage{position:relative;height:175vh;margin:0 calc(-1 * var(--gx))}
.end-pin{position:sticky;top:0;height:100vh;height:100svh}
.end-rule{position:absolute;left:var(--gx);right:var(--gx);top:84px;border-top:1px solid var(--line-l);padding-top:10px}
.end-rule .kicker{color:rgba(243,243,238,.7)}
.end-anchor{left:var(--gx);right:var(--gx);top:22vh;height:52vh}
.contact-grid{padding-top:2vh}
.contact-title{margin-top:0}

/* 3 · Galerie: Knopf zur Fallstudie auf jeder Tafel */
.film-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.film-case{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:-.01em;padding:11px 16px;background:var(--lime);color:var(--bg);pointer-events:auto;transition:background .3s var(--ease)}
.film-case span{transition:transform .35s var(--ease)}
.film-case:hover{background:var(--ink)}
.film-case:hover span{transform:translateX(5px)}
.flat .film-side{align-items:flex-end}

@media (max-width:900px){
  .studio-head{top:80px;max-width:none}
  .studio-title{font-size:clamp(38px,11vw,60px)}
  .studio-sub{font-size:15px}
  .locs{grid-template-columns:1fr;gap:20px;bottom:22px}
  .loc-us{text-align:left}
  .loc-us::before{transform-origin:0 50%}
  .loc-us .loc-tag,.loc-us .loc-addr{justify-content:flex-start}
  .loc{padding-top:14px}
  .loc-name{font-size:clamp(28px,8.4vw,40px);margin-top:10px}
  .loc-addr{font-size:14px;margin-top:8px}
  .flat .locs{grid-template-columns:1fr}
  .end-stage{height:150vh}
  .end-rule{top:64px}
  .end-anchor{top:22vh;height:32vh}
  .film-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .film-case{font-size:13px;padding:9px 13px}
}
/* v6 Nachschliff nach den Prüf-Fotos: Knopf bricht nie um, Blockwort mit Luft zum Rand, Studio-Titel auf dem Handy ruhiger */
.film-case{white-space:nowrap;flex:0 0 auto}
.end-anchor{left:calc(var(--gx) + 2.5vw);right:calc(var(--gx) + 2.5vw)}
@media (max-width:900px){ .studio-title{font-size:clamp(34px,9.6vw,54px)} .film-side{gap:12px} .film-tag{min-width:0} }

/* ================= Fassung v7 (Sonnys Rückmeldung 05.10.2026) ================= */
/* 1 · Hero: mehr Scrollweg, damit jedes der drei Wörter länger steht (Zeitachse HT in site.js) */
.hero{height:540vh}
/* 5 · Leistungen: Lime-Grund, Flächen streng abwechselnd schwarz mit weisser Schrift und weiss mit schwarzer Schrift
   (Sonny: «entweder schwarz-weiß oder weiß-schwarz [...] Oder du machst zur Abwechslung diesen hellgrünen Hintergrund, dann kannst du schwarz und weiß verwenden.») */
.services{background:var(--lime);color:var(--bg);border-top:0}
.services .kicker{color:rgba(7,8,10,.74)}
.services .kicker b{color:var(--bg)}
.services .svc-title{color:var(--bg)}
.services .svc-desc p{color:rgba(7,8,10,.84)}
.services .svc-desc b{color:var(--bg)}
.services .svc-index i{background:rgba(7,8,10,.2)}
.services .svc-index i::after{background:var(--bg)}
.services .face{box-shadow:none}
.services .face::before{display:none}
.services .f1,.services .f3{background:#07080a;color:#f3f3ee}
.services .f2,.services .f4{background:#f3f3ee;color:#07080a}
.services .f1 small,.services .f3 small{color:#f3f3ee}
.services .f2 small,.services .f4 small{color:#07080a}
/* 7 · Formular: Zusatz «optional» hinter dem Feldnamen */
.form label span em{font-style:normal;color:rgba(243,243,238,.38);margin-left:8px}

/* ================= Fassung v10 (Sonny 06.10.2026, 15:4x): «Kannst du das Scrolling ein bisschen langsamer machen? [...] nach der Arena, sobald ich auf die erste
   Section komme, Seen, Felt, Known [...] die zweite Section geht ziemlich schnell [...] auch die vierte Section geht recht schnell. [...] ich muss etwas mehr
   scrollen, um die gleiche Geschwindigkeit zu erreichen.» Abschnitt 1, 2 und 4 bekommen die Hälfte mehr Scrollweg; die Bewegung selbst ist dieselbe. ================= */
.hero{height:810vh}        /* vorher 540vh */
.manifest{height:480vh}    /* vorher 320vh */
.process{height:630vh}     /* vorher 420vh */

/* ================= Fassung v11 (Sonny 06.10.2026, live): Abschnitt 3 «Films that do the explaining» wird oben nicht mehr abgeschnitten
   (das Riesenwort kleiner, der Satz hält Abstand zur Kopfleiste), Fuss ohne «A brand of», rechts unten die Sprachwahl DE · EN ================= */
.behind{justify-content:space-between}
.work-total{margin-bottom:0;padding-top:max(12vh,100px)}
.giant{font-size:clamp(96px,23vw,380px)}
.work-count{grid-template-columns:repeat(3,1fr);margin-top:2.6vh}
.work-count a{overflow:visible}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-lang{font-family:var(--mono);font-size:12px;letter-spacing:.14em;display:flex;align-items:center;gap:10px}
.foot-lang .on{opacity:.55}
.foot-lang a{border-bottom:1.5px solid transparent}
.foot-lang a:hover{border-bottom-color:var(--bg)}
@media (max-width:900px){ .work-count{grid-template-columns:1fr 1fr} .giant{font-size:clamp(80px,22vw,200px)} }
/* v11 · Fuss-Links immer anklickbar (Sonny 06.10.2026: «Legal Notice und Privacy Policy kann man nicht anklicken»): die Linkzeile liegt über allem im Fuss,
   die riesige Wortmarke fängt keine Klicks, Klickfläche je Link etwas grösser */
.foot{position:relative;z-index:5}
.foot-row{position:relative;z-index:6}
.foot-row nav a{position:relative;z-index:6;display:inline-block;padding:4px 0;cursor:pointer}
.foot-mark{pointer-events:none;position:relative;z-index:1}
.foot-bottom{position:relative;z-index:6}
.foot-bottom a{cursor:pointer;padding:4px 2px}
#gl{pointer-events:none}