@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --blau:#34499e;--hellblau:#94d2e0;--gelb:#fdf37f;
  --rot:#eb4d52;--violett:#614297;--pfirsich:#f9c5a5;
  --navy:#0e1433;
  --paper:#f3f3f1;
  --ink:#141416;
  --ink-2:#4b4d52;
  --ink-3:#8a8d93;
  --hl:rgba(20,20,22,.12);
  --acc:#c2363b;
  --sans:var(--font-sans);
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
--serif:"Instrument Serif",Georgia,serif;
  --gut:clamp(16px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
:where(main,#outro) :is(p,h1,h2,h3,figure){margin:0}
:where(main,#outro) :is(h1,h2,h3){line-height:inherit}
html{background:var(--navy);-webkit-text-size-adjust:100%}
body{background:var(--hellblau);color:var(--ink);font-family:var(--sans);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--blau);color:#fff}

.site-header--over.site-header--scrolled:not(.site-header--past-hero){background:rgba(14,20,51,.78)}
html[data-tone="light"] .site-header--over:not(.site-header--scrolled):not(.site-header--past-hero){color:var(--ink)}

#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--hellblau);transition:opacity .9s var(--ease),visibility .9s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
#loader div{width:min(240px,60vw);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,20,22,.7)}
#loader s{display:block;height:1px;margin-top:12px;background:rgba(20,20,22,.18);position:relative;overflow:hidden;text-decoration:none}
#loader s::after{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--ink);transition:transform .3s}

#stage{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:1;pointer-events:none}
#stage canvas{width:100%!important;height:100%!important;display:block}
.stage-still{display:none}
.nogl .stage-still{display:block;position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:min(44vw,72vh)}

nav.dots{position:fixed;right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:10px;transition:opacity .4s,color .4s;--dc:rgba(255,255,255,.55);--dn:#fff}
nav.dots.on-light{--dc:rgba(20,20,22,.35);--dn:var(--ink)}
nav.dots.off{opacity:0;pointer-events:none}
nav.dots a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none;color:var(--dc);font-family:var(--mono);font-size:10px;letter-spacing:.12em}
nav.dots a span{opacity:0;transform:translateX(6px);transition:.35s var(--ease);text-transform:uppercase}
nav.dots a i{width:6px;height:6px;border-radius:50%;background:currentColor;transition:.35s var(--ease)}
nav.dots a:hover span,nav.dots a:focus-visible span{opacity:1;transform:none}
nav.dots a.on{color:var(--dn)}
nav.dots a.on i{height:18px;border-radius:4px}
nav.dots a:focus-visible{outline:1px solid currentColor;outline-offset:4px}

main{position:relative;z-index:10}
.ch{position:relative;min-height:100svh;padding:0 var(--gut)}
#hero{min-height:120svh}
#hero .inner{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(36px,9vh,110px);max-width:640px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:flex;gap:12px;align-items:center;color:var(--ink-2)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
#hero h1{font-weight:500;font-size:clamp(44px,6.4vw,104px);line-height:.94;letter-spacing:-.045em;margin:22px 0 24px}
h1 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;color:var(--acc)}
#hero p.lead{max-width:44ch;color:var(--ink-2);font-size:clamp(16px,1.35vw,19px)}
.roles{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.roles span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border:1px solid rgba(20,20,22,.3);border-radius:999px;color:var(--ink)}
.scroll{margin-top:34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.scroll i{position:relative;width:1px;height:38px;background:rgba(20,20,22,.25);overflow:hidden}
.scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:drip 1.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes drip{to{top:100%}}

.ch--long{min-height:300svh}
#veraendert{--acc:var(--blau)}
#wirkt{--acc:var(--violett)}
.card{position:sticky;top:max(14vh,90px);z-index:2;width:min(440px,100%);padding:clamp(20px,2.2vw,30px);background:rgba(255,255,255,.86);border:1px solid rgba(20,20,22,.08);border-radius:18px;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 30px 80px rgba(0,0,0,.12)}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);display:flex;gap:10px;align-items:center}
.kick::after{content:"";height:1px;flex:1;background:var(--hl)}
.card h2{font-weight:500;font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 12px}
h2 em,#outro h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--acc)}
h2 em{letter-spacing:0}
#outro h2 em{letter-spacing:inherit}
.card p{color:var(--ink-2);font-size:clamp(14.5px,1.05vw,16px)}
.card p+p{margin-top:.7em}
.card p.hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.facts{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.facts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border:1px solid var(--hl);border-radius:999px;color:var(--ink-2)}

.tc{position:sticky;top:calc(100svh - 54px);z-index:2;margin-left:auto;width:max-content;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(20,20,22,.55);padding-right:clamp(24px,4vw,56px)}
.tc b{font-weight:400;color:var(--ink)}
[data-dark] .tc{color:rgba(255,255,255,.55)}
[data-dark] .tc b{color:#fff}

.seq{position:sticky;top:0;height:100svh;margin:0 calc(var(--gut) * -1) -100svh;display:flex;align-items:center;justify-content:flex-end;padding-right:clamp(40px,8vw,140px);pointer-events:none;z-index:1}
.seq canvas{width:min(84vh,56vw);height:auto;aspect-ratio:1;-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent 100%);mask-image:radial-gradient(closest-side,#000 82%,transparent 100%)}

.sec{position:relative;z-index:10;padding:clamp(80px,14vh,160px) var(--gut)}
.sec--dark{background:var(--navy);color:#fff}
.sec--dark .kick{color:var(--hellblau)}
.sec--dark .kick::after{background:rgba(255,255,255,.18)}
.sec--dark h2 em{color:var(--gelb)}
.sec--dark .head p{color:rgba(255,255,255,.78)}
.wrap{max-width:1280px;margin:0 auto}
.head{max-width:640px}
.head h2{font-weight:500;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.035em;margin:18px 0 18px}
.head p{font-size:clamp(15px,1.15vw,17.5px);max-width:58ch}
.film{margin-top:clamp(40px,7vh,80px)}
.vid{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--blau)}
.vid video{width:100%;height:100%;object-fit:cover}

#outro{position:relative;z-index:15;background:var(--paper);padding:clamp(90px,16vh,180px) var(--gut) 60px}
#outro .wrap{max-width:1280px;margin:0 auto}
#outro h2{font-weight:500;font-size:clamp(38px,6vw,92px);line-height:.95;letter-spacing:-.04em;max-width:15ch;margin-top:22px}
#outro{--acc:var(--blau)}
.grid{margin-top:clamp(48px,8vh,90px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hl)}
.grid div{padding:22px 22px 0 0}
.grid div+div{padding-left:22px;border-left:1px solid var(--hl)}
.grid b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);font-weight:400}
.grid h3{font-weight:500;font-size:18px;margin:10px 0 8px;letter-spacing:-.01em}
.grid p{color:var(--ink-2);font-size:14px}
.also{margin-top:clamp(56px,9vh,100px);padding:22px 24px;border:1px solid var(--hl);border-radius:16px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;color:var(--ink-2)}
.also b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:400}
#outro footer{margin-top:80px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.case-nav,.cta,.site-footer{position:relative;z-index:15}
.case-nav,.cta{color:var(--c-ink);background:var(--c-bg)}

@media (max-width:860px){
  nav.dots{display:none}
  .ch{padding:0 12px;display:flex;flex-direction:column;justify-content:flex-end}
  .card{position:sticky;top:auto;bottom:12px;margin-bottom:12px;width:100%;max-height:46svh;overflow:auto;border-radius:16px;padding:18px 18px 16px}
  .card h2{font-size:24px;margin:10px 0 8px}
  .card p{font-size:14.5px}
  #hero{display:block;min-height:110svh}
  #hero .inner{padding-left:4px;padding-right:4px;padding-bottom:max(22px,4vh)}
  #hero h1{font-size:clamp(40px,11vw,58px)}
  #hero p.lead{font-size:15px}
  .roles{margin-top:18px}
  .scroll{margin-top:20px}
  .ch--seq{justify-content:space-between}
  .seq{margin:0 -12px -100svh;justify-content:center;align-items:flex-start;padding:max(76px,11svh) 0 0}
  .seq canvas{width:min(92vw,52svh)}
  .tc{display:none}
  .nogl .stage-still{right:auto;left:50%;top:max(80px,12svh);transform:translateX(-50%);width:min(86vw,46svh)}
  .grid{grid-template-columns:1fr}
  .grid div,.grid div+div{padding:20px 0;border-left:0;border-bottom:1px solid var(--hl)}
}
@media (prefers-reduced-motion:reduce){
  .scroll i::after{animation:none}
}