@font-face{font-family:Satoshi;src:url(fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-display:block}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-display:block}
@view-transition{navigation:auto}

:root{
 --k:oklch(.14 0 0);--k2:oklch(.19 0 0);--w:oklch(.945 0 0);--w2:oklch(.89 0 0);
 --o:oklch(.66 .235 36);--o-ink:oklch(.14 0 0);
 --g:clamp(16px,3vw,44px);--ease:cubic-bezier(.16,1,.3,1);
 --d1:clamp(2.05rem,10.4vw,11rem);--d2:clamp(2.4rem,14.4vw,12.4rem);--d3:clamp(2.1rem,7vw,6.8rem);--d4:clamp(1.35rem,2.6vw,2.55rem);
 --sf:oklch(.2 0 0);--line2:oklch(1 0 0/.2);--ac:var(--o);--ink:var(--w);--ac2:oklch(.76 0 0);
 color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;background:var(--k);scroll-padding-top:90px;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis-stopped{overflow:clip}
body{font-family:Satoshi,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.55;background:var(--k);color:var(--w);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--fc,var(--o));outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--o);color:var(--o-ink);padding:10px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* film grain over the whole page (tiled noise, stepped background-position) */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:url(/img/grain.svg) 0 0/220px 220px;opacity:.06;mix-blend-mode:overlay}
html[data-motion=voll] body::after{animation:grain .9s steps(1) infinite}
@keyframes grain{0%{background-position:0 0}12%{background-position:-60px 40px}25%{background-position:50px -90px}37%{background-position:-110px -30px}50%{background-position:80px 70px}62%{background-position:-30px 120px}75%{background-position:130px -60px}87%{background-position:-90px 100px}}

/* ---------- sections + grid lines ---------- */
.sec{position:relative;background:var(--bg);color:var(--fg);--ln:oklch(1 0 0/.11)}
.dk{--bg:var(--k);--fg:var(--w);--mu:oklch(.76 0 0);--ln:oklch(1 0 0/.11)}
.lt{--bg:var(--w);--fg:var(--k);--mu:oklch(.38 0 0);--ln:oklch(0 0 0/.14);--fc:var(--k)}
.or{--bg:var(--o);--fg:var(--o-ink);--mu:oklch(.2 0 0);--ln:oklch(0 0 0/.22);--fc:var(--k)}
.sec::before{content:"";position:absolute;top:0;bottom:0;left:var(--g);right:var(--g);pointer-events:none;border-inline:1px solid var(--ln);background:linear-gradient(to right,var(--ln) 1px,transparent 1px) 0 0/50% 100% repeat-x}
@media(min-width:760px){.sec::before{background-size:25% 100%}}
.in{position:relative;padding-inline:var(--g)}
.g4{display:grid;grid-template-columns:1fr;row-gap:24px}
.c{padding-inline:clamp(10px,1.5vw,24px)}
@media(min-width:760px){.g4{grid-template-columns:repeat(4,1fr);row-gap:0}.s2{grid-column-end:span 2}.s3{grid-column-end:span 3}.f2{grid-column-start:2}.f3{grid-column-start:3}}
.mu{color:var(--mu)}
.meta{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500}
h1,h2,h3{font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:var(--d2)}
.d1{font-size:var(--d1)}
h2{font-size:var(--d3)}
h3{font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.02;letter-spacing:-.02em}
.stm{font-size:var(--d4);line-height:1.18;font-weight:500;letter-spacing:-.015em;text-wrap:pretty}
p{max-width:62ch;text-wrap:pretty}
.pad{padding-block:clamp(72px,10vw,150px)}
.padt{padding-top:clamp(72px,10vw,150px)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .07em;margin:-.14em -.04em -.07em}
.w>i{display:inline-block;font-style:normal}

/* ---------- buttons + links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;background:var(--o);color:var(--o-ink);font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover{background:var(--w);color:var(--k)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn.k{background:var(--k);color:var(--w)}.btn.k:hover{background:var(--w);color:var(--k)}
.btn.ln{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.ln:hover{background:var(--w);color:var(--k)}
.lt .btn.ln:hover{background:var(--k);color:var(--w)}
.ul{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:60;height:68px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--g);transition:background .3s}
.hd.sc,html.menu .hd{background:oklch(.14 0 0/.94)}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.0625rem;text-decoration:none;letter-spacing:-.01em;color:var(--w)}
.logo svg{width:24px;height:24px}
.nv{display:flex;align-items:center;gap:4px}
.nv a:not(.btn){position:relative;display:block;overflow:hidden;padding:6px 14px;font-size:.75rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--w);line-height:1.2}
.nv a span{display:block;position:relative;transition:transform .45s var(--ease)}
.nv a span::after{content:attr(data-t);position:absolute;left:0;top:100%;margin-top:6px;color:var(--o);white-space:nowrap}
.nv a:hover span,.nv a:focus-visible span{transform:translateY(calc(-100% - 6px))}
.nv a[aria-current=page]{color:var(--o)}
.nv .btn{margin-left:14px;min-height:42px;padding:0 18px}
.mb{display:none;min-height:44px;padding:0 4px;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;align-items:center;gap:10px}
.mb i{width:22px;height:8px;border-block:2px solid currentColor;transition:transform .3s}
html.menu .mb i{transform:scaleY(.01) rotate(0);border-block-width:1px}
/* menu panel (mobile + compact desktop): slides up from bottom centre, page behind blurs */
.nv .pc,.nv .ph2{display:none}
.nv a.st:not(.btn){display:none}
html.pm .nv>a.st:not(.btn){display:block}
.scrim{position:fixed;inset:0;z-index:55;background:oklch(0 0 0/.38);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
html.menu .scrim{opacity:1;visibility:visible;transition-delay:0s}
html.pm .mb{display:inline-flex}
html.pm .nv{pointer-events:auto;position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:70;width:min(calc(100vw - 28px),460px);display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:0 18px;padding:16px 20px 20px;background:oklch(.17 0 0/.94);border:1px solid var(--line2);box-shadow:0 30px 80px oklch(0 0 0/.55);transform:translate(-50%,calc(100% + 60px));visibility:hidden;transition:transform .65s var(--ease),visibility 0s .65s}
html.menu.pm .nv{transform:translate(-50%,0);visibility:visible;transition-delay:0s}
html.pm .nv .ph2{display:flex;grid-column:1/-1;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line2);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:oklch(.76 0 0)}
html.pm .nv .ph2 button{min-height:44px;padding:0 4px;font-weight:700;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--w)}
html.pm .nv .ph2 button:hover{color:var(--o)}
html.pm .nv>a:not(.btn){grid-column:1;font-size:clamp(1.7rem,7vw,2.3rem);font-weight:700;letter-spacing:-.03em;text-transform:none;padding:4px 0;line-height:1.1;overflow:visible}
html.pm .nv>a span::after{display:none}
html.pm .nv>a:hover span{transform:none}
html.pm .nv>a:not(.btn):hover,html.pm .nv>a:not(.btn):focus-visible{color:var(--o)}
html.pm .nv .pc{display:flex;flex-direction:column;gap:8px;grid-column:2;grid-row:2 / span 4;padding-top:8px;font-size:.8125rem;color:oklch(.76 0 0);overflow-wrap:anywhere}
html.pm .nv .pc b{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500;color:oklch(.6 0 0)}
html.pm .nv .pc a{color:var(--w);text-decoration:none;font-size:.9375rem;padding:0;overflow:visible;text-transform:none;letter-spacing:0;font-weight:500;line-height:1.35}
html.pm .nv .pc a::before{content:none!important}
html.pm .nv .pc a:hover{color:var(--o)}
html.pm .nv .btn{grid-column:1/-1;margin:16px 0 0;justify-content:center}
html.menu{overflow:hidden}
html.pm .hd.sc,html.pm.menu .hd{background:oklch(.14 0 0/.94)}
/* compact desktop: header slims down to a floating menu pill */
html.cmp .hd,html.cmp.pm .hd.sc{background:transparent;pointer-events:none}
html.cmp .logo{opacity:0;visibility:hidden}
html.cmp .mb{position:fixed;left:50%;bottom:18px;z-index:56;transform:translateX(-50%);pointer-events:auto;padding:0 22px;min-height:48px;background:var(--o);color:var(--o-ink);box-shadow:0 12px 40px oklch(0 0 0/.5)}
html.cmp.menu .mb{opacity:0;visibility:hidden}
.nv{flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{padding-top:84px;padding-bottom:56px;overflow:clip;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero>.in{flex:1;display:flex;flex-direction:column}
.hero .hero-b{margin-top:auto}
.stat{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;padding-block:18px 14px;border-bottom:1px solid var(--ln);color:var(--mu)}
.stat b{color:var(--w);font-weight:500}
.hero h1{margin-top:clamp(28px,5vw,64px);padding-bottom:.05em}
.hero-b{margin-top:clamp(36px,5vw,72px);padding-bottom:clamp(40px,6vw,80px);align-items:end}
.hero-b .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ph{position:relative;overflow:hidden;background:oklch(.2 0 0);aspect-ratio:var(--ar,4/3)}
.ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;background:url(/img/grain.svg);opacity:.5;mix-blend-mode:overlay;pointer-events:none}
.ph.col img{top:0;height:100%}
/* ---------- marquee: Branchen in white tiles ---------- */
.mq{overflow:hidden;background:var(--w2);color:var(--k);padding-block:clamp(18px,2.6vw,34px)}
.mq .tr{display:flex;width:max-content;animation:mq 50s linear infinite}
.mq:hover .tr,.mq:focus-within .tr{animation-play-state:paused}
.mq ul{display:flex;flex-shrink:0;gap:0}
.mq li{display:flex;align-items:center;justify-content:center;gap:12px;min-width:clamp(180px,20vw,300px);height:clamp(76px,9vw,128px);padding-inline:clamp(18px,2.4vw,36px);background:#fff;border-right:1px solid oklch(0 0 0/.1);font-size:clamp(1.05rem,1.8vw,1.7rem);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1;white-space:nowrap;transition:background .3s,color .3s}
.mq li::before{content:"";width:.5em;height:.5em;background:var(--o);flex:none}
.mq li:hover{background:var(--k);color:var(--w)}
@keyframes mq{to{transform:translateX(-50%)}}
html[data-motion=ruhig] .mq .tr{animation:none;width:auto;flex-wrap:wrap}
html[data-motion=ruhig] .mq ul+ul{display:none}
html[data-motion=ruhig] .mq ul{flex-wrap:wrap;gap:6px}
html[data-motion=ruhig] .mq li{min-width:0;height:auto;padding:14px 22px}

/* ---------- list rows (Leistungen) ---------- */
.rows{border-top:1px solid var(--ln)}
.row{position:relative;display:grid;grid-template-columns:1fr;padding-block:clamp(22px,3vw,40px);border-bottom:1px solid var(--ln);text-decoration:none;color:inherit;transition:background .4s var(--ease)}
.row .n{font-size:.75rem;font-weight:500;color:var(--mu);letter-spacing:.07em;margin-right:14px;vertical-align:.4em}
.row h3,.row h2{font-size:clamp(1.5rem,3.2vw,3.1rem);letter-spacing:-.03em;line-height:1.02}
.row .pr{font-weight:500;color:var(--mu);padding-top:8px}
.row .pr b{color:var(--fg);font-size:1.25rem}
.row p{color:var(--mu);font-size:1rem;padding-top:14px}
.row .tags{display:inline-block;margin-left:8px;padding:2px 9px;background:var(--o);color:var(--o-ink);font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;vertical-align:middle}
@media(min-width:760px){.row{grid-template-columns:repeat(4,1fr);align-items:start}.row .nm{grid-column:span 2}.row .pr{padding-top:12px}.row p{padding-top:0}}
.row.hv:hover{background:var(--o);color:var(--o-ink)}
.row.hv:hover .pr,.row.hv:hover p,.row.hv:hover .n{color:var(--o-ink)}
.row .go{position:absolute;right:clamp(10px,1.5vw,24px);top:clamp(22px,3vw,40px);width:28px;height:28px;opacity:0;transform:translate(-6px,6px);transition:.4s var(--ease)}
.row.hv:hover .go{opacity:1;transform:none}
@media(min-width:760px){.row.sv .pr{grid-column:3 / span 2}.row.sv .xp{grid-column:3 / span 2}}

/* ---------- compare table ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;table-layout:fixed}
th,td{padding:16px clamp(6px,1.5vw,24px);text-align:left;border-top:1px solid var(--ln);vertical-align:middle}
thead th{border-top:0;vertical-align:bottom;padding-bottom:22px;font-weight:700}
thead th .t{display:block;font-size:clamp(.82rem,1.7vw,1.5rem);text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
thead th .p{display:block;margin-top:8px;font-size:.78rem;font-weight:500;color:var(--mu);line-height:1.3}
tbody th{font-weight:500;font-size:.9375rem}
col.fc{width:42%}
td{text-align:center}
.y{display:inline-block;width:18px;height:10px;border-left:2.5px solid var(--o);border-bottom:2.5px solid var(--o);transform:rotate(-45deg) translate(2px,-3px)}
.lt .y{border-color:var(--k)}
.no{color:var(--mu)}
@media(max-width:759px){.lgx{display:none}th,td{padding-inline:6px}tbody th{font-size:.85rem}.p{display:none!important}}
@media(min-width:760px){.smx{display:none}}

/* ---------- Ablauf ---------- */
.step{padding-block:clamp(28px,4vw,56px)}
.step .nn{display:block;font-size:clamp(4rem,10vw,10rem);font-weight:700;line-height:.82;letter-spacing:-.05em;margin-bottom:clamp(18px,3vw,40px)}
.step h3{margin-bottom:12px}
.step p{color:var(--mu)}
@media(min-width:760px){.step{border-left:0}}

/* ---------- FAQ ---------- */
.faq{counter-reset:q;border-top:1px solid var(--ln)}
.faq details{counter-increment:q;border-bottom:1px solid var(--ln)}
.faq summary{position:relative;display:grid;grid-template-columns:3rem 1fr 2rem;align-items:baseline;gap:8px;padding:clamp(20px,2.4vw,32px) 0;cursor:pointer;list-style:none;font-size:clamp(1.1rem,1.9vw,1.6rem);font-weight:500;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"0" counter(q);font-size:.75rem;letter-spacing:.07em;color:var(--mu)}
.faq summary::after{content:"+";justify-self:end;font-size:1.6rem;line-height:1;transition:transform .35s var(--ease);color:var(--o)}
.lt .faq summary::after{color:var(--k)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2rem 30px 3rem;color:var(--mu);font-size:1rem}
.faq summary:hover{color:var(--o)}
.lt .faq summary:hover{color:oklch(.45 0 0)}

/* ---------- case cards (Arbeiten) ---------- */
.case{display:grid;gap:20px;padding-block:clamp(28px,4vw,56px);border-bottom:1px solid var(--ln);text-decoration:none;color:inherit}
.case .ph{--ar:16/10}
.case h3{font-size:clamp(1.9rem,4.4vw,4.4rem);letter-spacing:-.035em;line-height:.92;margin-bottom:14px}
.case p{color:var(--mu)}
.case .go{margin-top:22px}
.case .meta{color:var(--mu)}
.case:hover .ph img,.case:focus-visible .ph img{filter:none}
@media(min-width:760px){.case{grid-template-columns:repeat(4,1fr);gap:0;align-items:end}.case .ph{grid-column:span 3}.case:nth-child(even) .ph{order:2;grid-column:2 / span 3}.case:nth-child(even) .tx{order:1;grid-row:1;grid-column:1}.case .tx{padding-inline:clamp(10px,1.5vw,24px)}.case:nth-child(odd) .tx{grid-column:4}}
.gry .ph img{filter:grayscale(1) contrast(1.05);transition:filter .6s}
.gry a:hover .ph img,.gry a:focus-visible .ph img{filter:none}
@media(hover:none){.gry .ph img{filter:none}}
.tz{display:grid;gap:0}
.tz a{display:grid;gap:14px;padding:18px clamp(10px,1.5vw,24px) 26px;text-decoration:none;color:inherit;border-top:1px solid var(--ln)}
.tz a h3{margin:6px 0 4px}
.tz a p{color:var(--mu);font-size:.9375rem}
.tz .arrow{width:24px;height:24px;transition:transform .35s var(--ease)}
.tz a:hover .arrow{transform:translate(4px,-4px);color:var(--o)}
@media(min-width:760px){.tz{grid-template-columns:repeat(3,1fr)}.tz a{border-top:0;border-left:1px solid var(--ln)}.tz a:first-child{border-left:0}}

/* ---------- statement / orange ---------- */
.big{font-size:var(--d3);line-height:.92}
.or h2{font-size:clamp(2.2rem,7.2vw,7.6rem)}
.or .btn.k:hover{background:var(--w)}

/* ---------- about ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr}
.stats div{padding:clamp(18px,2.6vw,36px) clamp(10px,1.5vw,24px);border-top:1px solid var(--ln)}
.stats b{display:block;font-size:clamp(2.2rem,5vw,5rem);line-height:.95;letter-spacing:-.04em;font-weight:700;text-transform:uppercase}
.stats span{display:block;margin-top:8px;color:var(--mu);font-size:.9375rem}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}.stats div{border-left:1px solid var(--ln)}.stats div:first-child{border-left:0}}
.pn{margin-top:20px;font-size:.75rem;color:var(--mu)}

/* ---------- contact ---------- */
.cbig{display:block;text-decoration:none;font-weight:700;letter-spacing:-.04em;line-height:.95;text-transform:none;overflow-wrap:anywhere}
.mail{font-size:clamp(1.55rem,6.9vw,7.6rem)}
.tel{font-size:clamp(1.9rem,6vw,6.2rem)}
.cbig:hover{color:var(--o)}
.or .cbig:hover{color:var(--w)}
.lt .cbig:hover{color:oklch(.5 .2 36)}
.addr{font-style:normal;font-size:var(--d4);line-height:1.2;font-weight:500}

/* ---------- footer ---------- */
.ft{padding-top:clamp(56px,8vw,110px)}
.ft .cols{display:grid;grid-template-columns:1fr 1fr;gap:36px 16px;padding-bottom:clamp(40px,6vw,80px)}
.ft .h4{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500;color:var(--mu);margin-bottom:14px}
.ft li{margin-bottom:4px}
.ft li a{text-decoration:none;font-size:1.0625rem}
.ft li a:hover{color:var(--o)}
@media(min-width:760px){.ft .cols{grid-template-columns:repeat(4,1fr);gap:0}}
.wm{font-size:11.2vw;line-height:.82;font-weight:700;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;padding-inline:var(--g);color:var(--w);overflow:hidden;padding-bottom:.04em}
.bt{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;padding:20px var(--g) 26px;font-size:.8125rem;color:var(--mu);border-top:1px solid var(--ln)}
.sw{display:inline-flex;align-items:center;gap:12px;font-size:.8125rem;color:var(--w);min-height:44px}
.sw .tg{position:relative;width:44px;height:24px;border:1px solid oklch(1 0 0/.4);border-radius:0}
.sw .tg i{position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--w);transition:transform .35s var(--ease),background .25s}
.sw[aria-checked=true] .tg i{transform:translateX(20px);background:var(--o)}
.sw span{color:var(--mu)}
.sw[aria-checked=false] .a,.sw[aria-checked=true] .b{color:var(--w)}

/* ---------- legal ---------- */
.legal{padding-top:150px;padding-bottom:110px}
.legal .t{max-width:760px;margin-left:clamp(0px,25%,9999px)}
.legal h1{font-size:clamp(2.4rem,8vw,6.4rem);margin-bottom:48px}
.legal h2{font-size:1.25rem;line-height:1.2;letter-spacing:-.01em;text-transform:none;margin:36px 0 10px}
.legal p,.legal li{color:oklch(.82 0 0);margin-bottom:12px;max-width:70ch}
.legal ul{padding-left:1.2em;list-style:disc;margin-bottom:12px}
.legal a{color:var(--o)}
@media(max-width:759px){.legal .t{margin-left:0}}

/* ---------- Folder float (Arbeiten) ---------- */
.ff-stage,.ff-links{display:none}
html[data-motion=voll] .ff-stage{display:flex;justify-content:center;padding-top:var(--ff-clear,480px);padding-bottom:30px;min-height:240px;align-items:flex-end}
html[data-motion=voll] .ff-links{display:block;color:var(--mu);font-size:.9rem;padding-bottom:12px}
.folder-float{--ff-w:200px;--ff-h:148px;--ff-r:14px;--ff-tab:14px;--ff-back:oklch(.3 0 0);--ff-front:var(--o);--ff-paper:oklch(.93 0 0);--ff-item:var(--sf);--ff-item-ink:var(--ink);--ff-label:var(--o-ink);--ff-spread:180px;--ff-lift:26px;--ff-angle:34deg;--ff-rest:16deg;--ff-open:520ms;--ff-close:312ms;--ff-stagger:45ms;--ff-n:6;--ff-spring:cubic-bezier(0.34,1.57,0.64,1);--ff-ease-out:cubic-bezier(0.23,1,0.32,1);position:relative;display:inline-block;width:var(--ff-w);padding-top:var(--ff-tab);font-family:inherit;font-size:13px;font-weight:500;line-height:1}
.folder-float__folder{position:relative;width:var(--ff-w);height:var(--ff-h)}
.folder-float__back{position:absolute;inset:0;z-index:0;border-radius:var(--ff-r);background:var(--ff-back);transform:perspective(600px) rotateX(8deg);transform-origin:50% 100%}
.folder-float__back::before{content:'';position:absolute;top:calc(-1*var(--ff-tab));left:0;width:42%;height:calc(var(--ff-tab) + var(--ff-r));border-radius:var(--ff-r) var(--ff-r) 0 0;background:inherit}
.folder-float__paper{position:absolute;top:10%;z-index:1;right:8%;left:8%;height:50%;border-radius:6px;background:var(--ff-paper);opacity:0;transform:translateY(10px);transition:transform var(--ff-close) var(--ff-ease-out),opacity var(--ff-close) ease}
.folder-float__front{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;height:76%;padding:14px 16px;box-sizing:border-box;border-radius:var(--ff-r);background:linear-gradient(180deg,color-mix(in srgb,var(--ff-front) 92%,#fff),var(--ff-front) 60%);color:var(--ff-label);box-shadow:0 -10px 24px rgba(0,0,0,.28),inset 0 1px 0 oklch(1 0 0/.12);transform:perspective(600px) rotateX(calc(-1*var(--ff-rest)));transform-origin:50% 100%;transition:transform var(--ff-open) var(--ff-ease-out)}
.folder-float__label{font-size:14px;font-weight:700}
.folder-float__sub{font-size:12px;opacity:.7}
.folder-float__trigger{position:absolute;right:0;bottom:0;left:0;z-index:3;height:76%;margin:0;padding:0;border:0;border-radius:var(--ff-r);background:transparent;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.folder-float__trigger:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.folder-float[data-open] .folder-float__front{transform:perspective(600px) rotateX(calc(-1*var(--ff-angle)))}
.folder-float[data-open] .folder-float__paper{opacity:1;transform:translateY(0);transition:transform var(--ff-open) var(--ff-ease-out),opacity 200ms ease}
.folder-float__items{position:absolute;top:var(--ff-tab);left:50%;z-index:1;width:0;height:0}
.folder-float[data-open] .folder-float__items::before{content:'';position:absolute;top:-520px;left:calc(-1*(var(--ff-spread) + 100px));width:calc(2*var(--ff-spread) + 200px);height:560px}
.folder-float__item{position:absolute;top:0;left:50%;margin:0;padding:0;border:0;border-radius:14px;background:var(--ff-item);color:var(--ff-item-ink);font:inherit;text-decoration:none;text-align:left;width:214px;overflow:hidden;box-shadow:0 0 0 1px var(--line2),0 16px 34px rgba(0,0,0,.5);cursor:pointer;outline:none;opacity:0;transform:translate(-50%,44px) scale(.6);transform-origin:50% 50%;pointer-events:none;-webkit-tap-highlight-color:transparent;transition:transform var(--ff-close) var(--ff-ease-out) calc((var(--ff-n) - 1 - var(--i))*var(--ff-stagger)*.5),opacity 160ms ease calc((var(--ff-n) - 1 - var(--i))*var(--ff-stagger)*.5 + var(--ff-close)*.45),scale 160ms var(--ff-ease-out)}
.folder-float__item:focus-visible{box-shadow:0 0 0 3px var(--ac),0 16px 34px rgba(0,0,0,.5)}
.folder-float[data-open] .folder-float__item{opacity:1;transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r)) scale(1);pointer-events:auto;transition:transform var(--ff-open) var(--ff-spring) calc(var(--i)*var(--ff-stagger)),opacity 160ms ease calc(var(--i)*var(--ff-stagger)),scale 160ms var(--ff-ease-out)}
.folder-float[data-live] .folder-float__item{cursor:grab;transition:scale 160ms var(--ff-ease-out)}
.folder-float__item[data-drag]{cursor:grabbing}
@media (hover:hover) and (pointer:fine){.folder-float[data-open] .folder-float__item:hover{scale:1.05}}
.folder-float[data-open] .folder-float__item:active{scale:.97}
.folder-float__item[data-pop]{animation:folder-float-pop 320ms var(--ff-ease-out)}
.folder-float__drift{display:block;animation:folder-float-drift 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.7s);animation-play-state:paused}
.folder-float[data-open] .folder-float__drift{animation-play-state:running}
.folder-float[data-physics] .folder-float__drift,.folder-float[data-live] .folder-float__drift{animation:none}
.folder-float__drift img{width:100%;aspect-ratio:16/10;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none}
.folder-float__title{display:block;min-height:calc(2.5em + 14px);padding:11px 14px 3px;font-size:14px;font-weight:700;line-height:1.25}
.folder-float__meta{display:block;padding:0 14px 12px;font-size:12px;color:var(--ac2)}
@keyframes folder-float-drift{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes folder-float-pop{30%{scale:1.1}100%{scale:1}}
@media(max-width:560px){.folder-float__item{width:160px}.folder-float__title{font-size:13px;padding:9px 11px 2px}.folder-float__meta{padding:0 11px 10px}}

/* ---------- reveal helpers + view transition ---------- */
::view-transition-old(root){animation:vt-out .2s ease both}
::view-transition-new(root){animation:vt-in .2s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
html[data-motion=ruhig]::view-transition-group(*),html[data-motion=ruhig]::view-transition-old(root),html[data-motion=ruhig]::view-transition-new(root){animation:none}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
.folder-float__item{border-radius:2px}
.folder-float,.folder-float__back,.folder-float__front,.folder-float__trigger{--ff-r:3px}

/* utility */
.ar43{--ar:4/3}.ar45{--ar:4/5}.ar1610{--ar:16/10}.ar32{--ar:3/2}
.padt-s{padding-top:clamp(28px,4vw,56px)}
.nopt{padding-top:0}
.bt2{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.row .nm h3,.row .nm h2{display:inline}
@media(min-width:760px){.row.sv .wide{grid-column:3 / span 2}}
.or .stm{font-weight:500}
.ffs{overflow-x:clip}

p+p,.stm+p,p+.btns{margin-top:1.1em}

@media(min-width:760px){html[data-motion=voll] .ff-stage{padding-top:var(--ff-clear,330px)}}
@media(max-width:559px){.stat{flex-direction:column;align-items:flex-start;gap:6px}}

/* =====================================================================
   MOTION LAYER
   ===================================================================== */

/* cover overlay: preloader wordmark + page transition */
.ov{position:fixed;inset:0;z-index:300;background:var(--k);display:none;place-items:center;overflow:hidden;pointer-events:none}
html.ov-pre .ov,html.ov-in .ov,html.ov-out .ov{display:grid}
.ov::after{content:"";position:absolute;inset:0;background:url(/img/grain.svg) 0 0/220px 220px;opacity:.16;mix-blend-mode:overlay}
.ov-w{position:relative;z-index:1;font-size:clamp(2.2rem,11.4vw,13rem);font-weight:700;letter-spacing:-.055em;line-height:.85;text-transform:uppercase;white-space:nowrap;color:oklch(.88 0 0);opacity:0}
html.ov-pre .ov-w{opacity:0}
html:not(.ov-pre) .ov-w{display:none}
html[data-motion=voll].js [data-rl]{visibility:hidden}
html[data-motion=voll].js.rl-ok [data-rl]{visibility:visible}

/* hero: full-bleed B&W image + frame lines + dots */
.hbg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--k)}
.hbg img{position:absolute;inset:-2%;width:104%;height:104%;max-width:none;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.5);will-change:transform}
.hbg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,oklch(.14 0 0/.55),oklch(.14 0 0/.2) 40%,oklch(.14 0 0/.7))}
.hbg::after{content:"";position:absolute;inset:0;z-index:1;background:url(/img/grain.svg) 0 0/220px 220px;opacity:.28;mix-blend-mode:overlay}
.hero .in{z-index:2}
.hero::before{z-index:1}
.hf{position:absolute;inset:84px var(--g) 28px var(--g);z-index:3;pointer-events:none}
.hf i{position:absolute;background:oklch(1 0 0/.4)}
.hf .ha,.hf .hb{left:0;right:0;height:1px;transform-origin:0 50%}
.hf .ha{top:0}.hf .hb{bottom:0}
.hf .hc,.hf .he{top:0;bottom:0;width:1px;transform-origin:50% 0}
.hf .hc{left:0}.hf .he{right:0}
.hf u{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--w);margin:-3px 0 0 -3px;text-decoration:none}
.hf .p1{left:0;top:0}.hf .p2{left:100%;top:0}.hf .p3{left:0;top:100%}.hf .p4{left:100%;top:100%}
.hero.sub h1{text-align:right;margin-top:clamp(70px,14vw,200px)}
.hero.sub .hero-b{margin-top:clamp(24px,3vw,48px)}
.hero.idx h1{margin-top:clamp(40px,5vw,76px);font-size:clamp(2.05rem,7.8vw,8.6rem)}
.sig{position:absolute;z-index:4;right:calc(var(--g) + clamp(10px,4vw,70px));bottom:clamp(54px,9vw,120px);width:clamp(190px,30vw,470px);height:auto;overflow:visible;pointer-events:none}
.sig path{fill:none;stroke:var(--o);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:759px){.sig{bottom:auto;top:158px;right:calc(var(--g) + 6px);width:136px}.hero.idx h1{margin-top:clamp(90px,28vw,130px);font-size:10vw}}

/* headline masks + right aligned headlines */
.ra{text-align:right}
@media(min-width:760px){h2.ra{grid-column:2 / span 3}}

/* stair wipe sections (top edge stepped per grid column) */
.wp{will-change:clip-path}

/* images: clip reveal + inner parallax */
.ph{will-change:clip-path}
.ph img{will-change:transform}

/* stat cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,18px);align-items:end}
.card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(170px,24vw,250px);padding:clamp(14px,1.6vw,26px);background:#fff;color:var(--k)}
.card.k{background:var(--k);color:var(--w)}
.dk .card{background:var(--sf);color:var(--w)}
.dk .card.k{background:var(--o);color:var(--o-ink)}
.card .cl{font-size:.8125rem;line-height:1.35;font-weight:500;max-width:22ch;opacity:.85}
.card b{display:block;font-size:clamp(2.4rem,5.2vw,5.2rem);line-height:.95;letter-spacing:-.045em;font-weight:700;text-transform:none;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(min-width:760px){.cards{grid-template-columns:repeat(4,1fr)}.card:nth-child(2){min-height:clamp(210px,28vw,330px)}.card:nth-child(3){min-height:clamp(250px,31vw,410px)}.card:nth-child(4){min-height:clamp(190px,25vw,290px)}.card:nth-child(1){min-height:clamp(230px,29vw,360px)}}
.facts{padding-block:clamp(72px,10vw,150px)}
.numblk{align-self:end}
.numblk b{display:block;font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.05em;font-weight:700;font-variant-numeric:tabular-nums}
.numblk span{display:block;margin-top:8px;font-size:.9375rem;font-weight:500}
@media(max-width:759px){.numblk{padding-top:8px}}

/* services accordion */
.xp{overflow:hidden}
.xi{display:grid;grid-template-columns:1fr;gap:0}
.row.sv .xi{padding-top:14px}
.row .xi p{padding-top:0}
.xim{padding-top:20px;padding-inline:clamp(10px,1.5vw,24px)}
.xim .ph{--ar:4/3}
@media(min-width:760px){.xi{grid-template-columns:1fr 1fr}.row.sv .xi p+p{margin-top:0}.xim{grid-column:1}.row.hv .xp{grid-column:auto}}
html.acc-on [data-acc] .xp{height:0}
html.acc-on [data-acc].open .xp{height:auto}
html.acc-on .row[data-acc] .nm{cursor:pointer}
html.acc-on .row[data-acc] .nm h2::after,html.acc-on .row[data-acc] .nm h3::after{content:"+";display:inline-block;margin-left:.4em;color:var(--o);font-weight:400;transition:transform .5s var(--ease)}
html.acc-on .row[data-acc].open .nm h2::after,html.acc-on .row[data-acc].open .nm h3::after{transform:rotate(45deg)}
html.acc-on a.row[data-acc] .nm h3::after{display:none}

/* comparison table */
tfoot td{padding-block:22px 8px;border-top:1px solid var(--ln)}
.btn.sm{min-height:42px;padding:0 14px;font-size:.6875rem}
@media(max-width:759px){.btn.sm{padding:0 6px;letter-spacing:.03em;min-height:40px;font-size:.625rem;white-space:nowrap}}
.btn.sm.ln{color:var(--k)}
.btn.sm.ln:hover{color:var(--w)}
.hl{background:oklch(0 0 0/.045)}
thead th.hl{box-shadow:inset 0 -3px 0 var(--o)}

/* pinned showcase (Arbeiten) */
.sh-stage{position:relative}
.sh-item{position:relative;padding:clamp(28px,5vw,64px) var(--g)}
.sh-bg,.sh-count,.sh-lab{display:none}
.sh-card{position:relative;display:block;width:100%;max-width:760px;margin-inline:auto;overflow:hidden;background:var(--sf)}
.sh-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sh-name{margin-top:20px;font-size:clamp(2rem,9vw,4.4rem);line-height:.9;letter-spacing:-.05em;text-align:center;overflow:hidden}
.sh-name span+span{display:none}
.sh-note{display:block;margin-top:10px;text-align:center;color:var(--mu);font-size:.8125rem;letter-spacing:.07em;text-transform:uppercase}
html.sh-pin .sh-stage{height:100vh;height:100svh;overflow:hidden;background:var(--k)}
html.sh-pin .sh-item{position:absolute;inset:0;padding:0;overflow:hidden;isolation:isolate}
html.sh-pin .sh-bg{display:block;position:absolute;inset:0;overflow:hidden;background:var(--k)}
html.sh-pin .sh-bg img{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;filter:blur(30px) brightness(.5) saturate(.9)}
html.sh-pin .sh-bg::after{content:"";position:absolute;inset:0;background:url(/img/grain.svg) 0 0/220px 220px;opacity:.5;mix-blend-mode:overlay}
html.sh-pin .sh-card{position:absolute;z-index:2;left:50%;top:54%;width:min(54vw,820px);max-width:none;transform:translate(-50%,-50%);box-shadow:0 40px 120px oklch(0 0 0/.55)}
html.sh-pin .sh-card::after{content:"";position:absolute;inset:0;background:url(/img/grain.svg) 0 0/220px 220px;opacity:.28;mix-blend-mode:overlay;pointer-events:none}
html.sh-pin .sh-name{position:absolute;z-index:3;left:0;right:0;bottom:-.04em;margin:0;font-size:clamp(7rem,20vw,21rem);line-height:.78;text-align:left;pointer-events:none;color:var(--w)}
html.sh-pin .sh-tr{display:flex;width:max-content;animation:mq 30s linear infinite}
html.sh-pin .sh-tr>span{display:block;padding-right:.35em;white-space:nowrap;flex:none}
html.sh-pin .sh-tr>span::after{content:"/";color:var(--o);padding-left:.35em}
html.sh-pin .sh-note{display:none}
html.sh-pin .sh-count,html.sh-pin .sh-lab{display:block;position:absolute;z-index:6;top:96px;font-size:.8125rem;letter-spacing:.07em;text-transform:uppercase;font-weight:500;color:var(--w)}
html.sh-pin .sh-count{left:calc(var(--g) + clamp(10px,1.5vw,24px))}
html.sh-pin .sh-lab{right:calc(var(--g) + clamp(10px,1.5vw,24px))}
.sh-tr{display:contents}

/* contact: START A PROJECT block */
.kt .ktl{position:relative}
.kt .ktl{max-width:520px;padding-bottom:44px}
.kt .ph{--ar:4/5}
.kcard{position:absolute;z-index:3;right:clamp(12px,3vw,40px);bottom:0;width:min(78%,270px);padding:18px 20px 16px;background:#fff;color:var(--k);box-shadow:0 30px 80px oklch(0 0 0/.5);font-size:.9375rem;line-height:1.35;font-weight:500}
.kcard span{display:block;margin-top:12px;font-size:.75rem;color:oklch(.4 0 0);letter-spacing:.07em;text-transform:uppercase}
.kt .mail{font-size:clamp(1.3rem,3.2vw,3.6rem)}
.kt .tel{font-size:clamp(1.7rem,3.8vw,4.2rem)}
.kt .meta{display:block;margin-bottom:8px}


/* footer wordmark reveal */
.wm{overflow:hidden}

@media(prefers-reduced-motion:reduce){.sh-tr,.mq .tr{animation:none!important}}

/* C logo */
.logo img{display:block;height:30px;width:auto}
.flogo{display:block;height:30px;width:auto}
.ov-w{display:flex;flex-direction:column;align-items:center;gap:.12em}
.ov-m{width:.8em;height:.8em}
.wm{display:flex;align-items:center;gap:.06em}
.wm img{height:.74em;width:.74em;flex:none}

@media(min-width:1024px){.hero.idx h1{margin-bottom:clamp(48px,4.5vw,72px)}}

/* ---------- Anfrageformular ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.af{margin-top:clamp(28px,4vw,48px);display:grid;gap:22px;max-width:52rem}
.af .fg{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:720px){.af .fg{grid-template-columns:1fr 1fr}.af .fl.full{grid-column:1/-1}}
.af .fl{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0}
.af label:not(.ck),.af legend{font-size:.75rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mu);padding:0}
.af input[type=text],.af input[type=email],.af input[type=tel],.af input[type=url],.af textarea{width:100%;min-height:48px;padding:12px 14px;background:transparent;color:var(--fg);font:inherit;font-size:1rem;border:1px solid var(--ln);border-radius:0;box-shadow:inset 0 0 0 1px oklch(1 0 0/.12)}
.af textarea{resize:vertical}
.af input:focus-visible,.af textarea:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-color:var(--o)}
.af input::placeholder{color:oklch(.55 0 0)}
.af .ck{display:flex;align-items:flex-start;gap:12px;font-size:1rem;line-height:1.4;cursor:pointer;padding:6px 0}
.af .ck input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--o)}
.af .fn{font-size:.8125rem}
.af .btn{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.fmsg{margin-top:28px;padding:18px 22px;max-width:52rem;border:1px solid var(--o);font-size:1rem}
.fmsg b{display:block;margin-bottom:4px}
.fmsg.ok{background:oklch(.66 .235 36/.12)}
.fmsg.er{border-color:oklch(.7 .2 25);background:oklch(.7 .2 25/.12)}
.fmsg[hidden]{display:none}