@font-face{font-family:Sora;src:url(../assets/sora.ttf) format("truetype");font-weight:100 800;font-display:block}
:root{
  --base:#16171a;--graphit:#1c1d20;--surface:#28292d;--line:rgba(227,228,224,.12);--ink:#ecedea;--mute:#9a9da3;--light:#b6c6d6;--seal:#c2412f;
  --gutter:clamp(16px,4vw,64px);--ease:cubic-bezier(.16,1,.3,1);color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html{overflow-x:clip}
body{background:var(--base);color:var(--ink);font:400 16px/1.6 Sora,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:var(--seal);color:#fff}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.02}
.soft{color:var(--mute);font-weight:300}
.img{position:absolute;inset:0;background:var(--ph);background-size:cover;background-position:var(--pos,center)}
.num{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;gap:14px;align-items:center;margin-bottom:28px}
.num span{color:var(--ink)}
.num::after{content:"";height:1px;width:48px;background:var(--line)}
.mark{display:inline-block;background:currentColor;-webkit-mask:url(../assets/icon.svg) center/contain no-repeat;mask:url(../assets/icon.svg) center/contain no-repeat}
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 24px;background:var(--ink);color:var(--base);border-radius:100px;font-weight:600;font-size:15px;position:relative;overflow:hidden;isolation:isolate;transition:color .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--seal);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}.btn:hover{color:#fff}
.btn svg{width:1em;height:1em;transition:transform .5s var(--ease)}.btn:hover svg{transform:rotate(45deg)}
.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

/* Top bar */
.bar{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter);transition:background .4s,transform .6s var(--ease)}
.bar.solid{background:linear-gradient(rgba(22,23,26,.92),rgba(22,23,26,.6));backdrop-filter:blur(10px)}
.bar.hide{transform:translateY(-110%)}
.back{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--mute);transition:color .3s}
.back:hover{color:var(--ink)}
.back .mark{width:18px;height:21px;color:var(--ink)}
.chip{font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:8px 14px;color:var(--mute)}

/* Hero */
.c-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--gutter) 8vh;overflow:hidden}
.c-hero .img{transform-origin:center}
.c-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,23,26,1),rgba(22,23,26,.55) 45%,rgba(22,23,26,.15))}
.c-hero-in{position:relative;z-index:2;width:100%}
.c-logo{width:min(520px,80vw);margin-bottom:34px}
.c-hero h1{font-size:clamp(40px,6.4vw,104px);max-width:14ch;margin-bottom:46px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.facts div{padding:18px 18px 0 0;font-size:14px}
.facts div+div{padding-left:18px;border-left:1px solid var(--line)}
.facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}

section.block{padding:18vh var(--gutter);max-width:1440px;margin:0 auto}
.block h2{font-size:clamp(34px,4.6vw,72px);margin-bottom:34px;max-width:18ch}
.lede{font-size:clamp(18px,1.6vw,24px);line-height:1.5;max-width:48ch;color:#c9cbc8}

/* Brief */
.brief{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,100px);align-items:start}
.brief dl{display:grid;gap:0;border-top:1px solid var(--line)}
.brief dl div{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.brief dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:3px}

/* Plan vs. built */
.plan{width:100%;border-collapse:collapse;font-size:15px}
.plan th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:400;text-align:left;padding:0 16px 14px 0;border-bottom:1px solid var(--ink)}
.plan td{padding:20px 16px 20px 0;border-bottom:1px solid var(--line);vertical-align:top}
.plan td:first-child{font-weight:600;width:20%}
.plan td:nth-child(2),.plan td:nth-child(3){color:#c9cbc8;width:33%}
.st{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.st.done{--c:#7fbf8a}.st.part{--c:#e3b04b}.st.next{--c:#6d7078}
.legend{display:flex;gap:22px;margin-top:22px;color:var(--mute);font-size:13px}

/* Idea */
.idea{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.idea-visual{position:relative;border-radius:8px;overflow:hidden;min-height:420px}
.quote{font-size:clamp(40px,5.6vw,92px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:28px}

/* Brand */
.brand-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{border-radius:8px;padding:clamp(20px,3vw,36px);background:var(--graphit);border:1px solid var(--line);position:relative;overflow:hidden;min-width:0}
.tile .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.t-logo{grid-column:span 7;display:grid;place-items:center;min-height:340px}
.t-logo .lg{width:min(100%,440px)}
.t-icon{grid-column:span 5;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.t-icon .ic{width:120px}
.t-icon p{color:#c9cbc8;font-size:15px}
.t-colors{grid-column:span 7}
.sw{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sw div{border-radius:6px;aspect-ratio:1/1.15;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;font-size:12px;line-height:1.35}
.sw b{font-weight:600}
.t-type{grid-column:span 5}
.t-type .aa{font-size:clamp(64px,7vw,110px);line-height:1;margin-bottom:12px}
.t-type p{color:#c9cbc8;font-size:14px}

/* Website */
.web-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.web-head h2{margin-bottom:0}
.devices{display:grid;grid-template-columns:1fr minmax(220px,300px);gap:clamp(18px,3vw,40px);align-items:end}
.browser{border-radius:12px;overflow:hidden;background:#0f1012;border:1px solid var(--line);box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:#1f2023}
.chrome i{width:10px;height:10px;border-radius:50%;background:#3a3b3f}
.chrome .url{flex:1;text-align:center;font-size:12px;color:var(--mute);background:#151618;border-radius:6px;padding:5px 0;margin:0 40px}
.screen{position:relative;overflow:hidden;background:#000}
.screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0}
.browser .screen{aspect-ratio:1440/900}
.phone{border-radius:42px;padding:10px;background:#0b0b0c;border:1px solid #2a2b2e;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.phone .screen{aspect-ratio:390/844;border-radius:33px}
.hint{color:var(--mute);font-size:13px;margin-top:18px}

/* Campaign mockups */
.camp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}
.camp-grid figure{margin:0}
.camp-grid figcaption{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--mute);padding:14px 2px 0}
.camp-grid figcaption b{color:var(--ink);font-weight:600}
.mock{position:relative;overflow:hidden;border-radius:6px;background:var(--surface) center/cover no-repeat;aspect-ratio:var(--ar,4/5)}
.mock-design{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.mock-design.paper{mix-blend-mode:multiply}
.mock.flat{display:grid;place-items:center}
.mock.flat .mock-design{position:relative;transform:scale(var(--s,.5));transform-origin:center}

/* Next */
.next{display:block;padding:16vh var(--gutter);border-top:1px solid var(--line);position:relative;overflow:hidden}
.next .num{margin-bottom:18px}
.next h2{font-size:clamp(52px,10vw,170px);letter-spacing:-.04em;line-height:.9;transition:transform .8s var(--ease)}
.next:hover h2{transform:translateX(2vw)}
.next .img{opacity:0;transition:opacity .8s;z-index:-1}
.next:hover .img{opacity:.35}
.foot{padding:30px var(--gutter);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--mute);font-size:13px;border-top:1px solid var(--line)}

@media (max-width:900px){
  .bar .chip{display:none}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){padding-left:0;border-left:0}
  .brief,.idea,.devices{grid-template-columns:1fr}
  .num{font-size:11px;letter-spacing:.1em;gap:10px;white-space:nowrap}
  .num::after{display:none}
  .browser{display:none}
  .phone{max-width:290px;width:78vw;margin:0 auto}
  .hint{display:none}
  .brand-grid>*{grid-column:span 12!important}
  .plan thead{display:none}
  .plan tr{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
  .plan td{padding:0;border:0;width:auto!important}
  .plan td:nth-child(2),.plan td:nth-child(3){grid-column:1/-1;font-size:14px}
  .plan td:nth-child(2)::before{content:"Plan: ";color:var(--mute)}
  .plan td:nth-child(3)::before{content:"Umgesetzt: ";color:var(--mute)}
  .plan td:last-child{grid-row:1;grid-column:2}
  .camp-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Design review (?designs): campaign designs flat, side by side */
.design-check .camp-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.design-check .mock{aspect-ratio:auto!important;background:#3a3b3f!important;padding:16px;display:block}
.design-check .mock .mock-design{position:relative;transform:none!important;mix-blend-mode:normal;zoom:.62}