@font-face{font-family:Archivo;src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Mono;src:url(fonts/mono.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:ArchivoFB;src:local("Arial Narrow"),local("Arial");size-adjust:92%;ascent-override:90%}
:root{--p:#262B2F;--k:#E9E6DF;--r:#E0B25A;--u:#3B4A2C;--papier:#EEEAE2;--tinte:#141414;--moos:#3B4A2C;--m:clamp(20px,5vw,96px);--gap:clamp(12px,2vw,28px);--sp:clamp(120px,30vh,340px)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--p);color:var(--k);font:400 17px/1.6 Inter,system-ui,sans-serif;overflow-x:clip}
a{color:inherit}
h1,h2,h3,.cn,.vt,.big,.ask,dd,p,li,summary{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;hyphenate-limit-chars:8 4 3}
.pn,.num,.sn,.c,.claim .ln>span,.mq,.brand{hyphens:manual;-webkit-hyphens:manual}
.num,.pn,.sn{font-variant-numeric:tabular-nums}
.d,.claim,.cn,.pn,.big,.c,.ask,.num{font-family:Archivo,ArchivoFB,sans-serif;font-variation-settings:"wdth" 100;letter-spacing:-.02em}
.mono,.lab,.proto,nav,.tag,dt,summary,.btn,.brand small,.case-h p{font-family:Mono,ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 var(--m)}
.g>*{grid-column:1/-1}
.proto{padding:8px var(--m);border-bottom:1px solid var(--k);font-size:11px}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px;padding:18px var(--m);border-bottom:1px solid var(--k);position:sticky;top:0;background:var(--p);z-index:10}
.brand{font:800 22px/1 Archivo,sans-serif;font-variation-settings:"wdth" 62;text-transform:uppercase;text-decoration:none;letter-spacing:.01em}
.brand small{display:block;font-weight:500;font-size:10px;margin-top:4px;letter-spacing:.08em}
nav a{text-decoration:none;margin-left:clamp(12px,1.6vw,22px)}nav a:hover{color:var(--r)}
section{padding:var(--sp) 0 0;position:relative}main>section:last-child{padding-bottom:var(--sp)}
.lab{padding:0 var(--m);margin:0 0 28px;display:flex;gap:.6em;border-top:1px solid var(--k);padding-top:10px;margin-left:var(--m);margin-right:var(--m);padding-left:0;padding-right:0}.lab span{color:var(--r)}
h2.d{font-weight:850;font-size:clamp(34px,min(7vw,13vh),128px);line-height:.9;margin:0 0 clamp(28px,5vh,48px);text-transform:uppercase;font-variation-settings:"wdth" 70}
p{margin:0 0 1em}
.btn{display:inline-block;background:var(--r);color:var(--p);padding:16px 22px;border:0;border-radius:0;text-decoration:none;cursor:pointer;font-size:13px}
.btn.ghost{background:none;color:var(--k);box-shadow:inset 0 0 0 1px var(--k)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn:hover{background:var(--k);color:var(--p)}
/* hero */
.hero{padding-top:clamp(40px,8vh,100px)}
.claim{font-weight:800;font-size:clamp(34px,min(9.4vw,15vh),190px);line-height:.86;margin:0 0 60px;text-transform:uppercase;font-variation-settings:"wdth" 70}
.claim .ln{display:block;overflow:hidden;padding:.16em 0 .04em;margin-top:-.16em}
/* Fix: Ö-Punkte in Zeile 3 stießen bei line-height .86 fast an Zeile 2 (wirkten wie ein Strich links von ABGEBEN bzw. MUSSTEN) */
.claim .ln+.ln{margin-top:-.1em}.claim .ln>span{display:inline-block;white-space:normal;max-width:100%}
.claim .ln:nth-child(2){padding-left:1.2em}.claim .ln:nth-child(3){padding-left:.4em}
.claim .self{color:var(--r);font-weight:900}
.claim .self>span{font-variation-settings:"wdth" 125;font-size:1.3em;line-height:.85;white-space:nowrap;transform-origin:0 50%}
.stage .claim .self>span,.calm .claim .self>span{will-change:transform;backface-visibility:hidden}
.hero-side{grid-column:7/-1!important}
.lead{font:600 clamp(20px,2vw,28px)/1.25 Inter,sans-serif}
.q{margin:30px 0;border-left:3px solid var(--r);padding-left:16px;font-size:18px}.q small{display:block;font:500 11px Mono,monospace;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.opener{font-weight:600}
/* felder */
.head .intro{grid-column:7/-1;max-width:34em}
.track-wrap{overflow:hidden;margin-top:clamp(24px,4vh,40px)}
.track{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));row-gap:48px;padding:0 var(--m)}
.stage .track{display:flex;width:max-content;row-gap:0}
.field{border-left:1px solid var(--k);padding:0 clamp(16px,2.4vw,32px) 0 clamp(16px,2vw,24px);position:relative;min-width:0}
.stage .field{width:min(44vw,max(520px,30vw));flex:none}
.field .num{font:800 clamp(96px,min(16vw,22vh),240px)/.8 Archivo,sans-serif;font-variation-settings:"wdth" 62;color:var(--k);margin-bottom:clamp(14px,2.4vh,26px);transform-origin:0 100%}
.field:nth-child(odd) .num{color:var(--r)}
.field .vt{margin:0 0 14px;font:800 clamp(26px,min(2.8vw,5vh),40px)/.95 Archivo,sans-serif;font-variation-settings:"wdth" 62;text-transform:uppercase;transform-origin:0 100%}
.field .vt span{display:block}.field>p{max-width:30em}
.field small{display:block;font:500 11px/1.5 Mono,monospace;letter-spacing:.06em;text-transform:uppercase;margin-top:14px;opacity:.75}
.benefits{list-style:none;padding:0;margin:80px 0 0;grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* Linien gehören zum jeweiligen Eintrag (wandern mit der Animation mit), oben und unten gleicher Abstand */
.benefits li{padding:1.4rem 20px 1.4rem 0;border-top:1px solid var(--k);border-bottom:1px solid var(--k);margin-top:-1px}.benefits b{display:block;font-weight:700}
/* wer */
.two>div:first-child{grid-column:1/6}.two>div:last-child{grid-column:7/-1}
.nicht{color:var(--r);position:relative;display:inline-block;font-variation-settings:"wdth" 110}
.nicht .strike{position:absolute;left:-4%;top:46%;width:108%;height:.09em;min-height:4px;background:var(--k);transform:rotate(-2deg) scaleX(1);transform-origin:0 50%}

/* warum */
.warum-h{grid-column:1/6!important}.warum-t{grid-column:7/-1!important;columns:1}
.warum-t p:first-child::first-letter{font:900 4.2em/.8 Archivo,sans-serif;float:left;margin:6px 10px 0 0;color:var(--r)}
/* statement */
.statement{background:var(--u);color:var(--p);margin-top:var(--sp);padding:clamp(80px,18vh,200px) 0;overflow:hidden}
.tilt{transform-origin:50% 50%}
.mq{display:flex;white-space:nowrap;font:900 clamp(60px,min(12vw,20vh),220px)/1 Archivo,sans-serif;font-variation-settings:"wdth" 62;text-transform:uppercase;width:max-content;animation:mq 40s linear infinite}
.mq span{padding-right:.3em}
@keyframes mq{to{transform:translateX(-50%)}}
.statement .big{grid-column:2/9;font-weight:700;font-size:clamp(28px,3.6vw,56px);line-height:1.05;margin:80px 0 30px;font-variation-settings:"wdth" 85}
.st-t{grid-column:7/-1;max-width:34em}
/* wo */
.map{position:relative;height:clamp(320px,60vh,620px);margin:0 var(--m) 60px;border-top:1px solid var(--k);border-bottom:1px solid var(--k)}
.c{position:absolute;font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 62;line-height:.9;white-space:nowrap;max-width:100%}
.c-n{top:6%;left:4%;font-size:clamp(26px,5vw,80px)}.c-i{top:30%;left:12%;font-size:clamp(22px,3.4vw,56px);font-weight:400}
.c-r{top:40%;right:4%;font-size:clamp(40px,min(10vw,16vh),190px);color:var(--r);font-weight:900;font-variation-settings:"wdth" 110}
.c-p{top:12%;right:4%;font-size:clamp(22px,3.4vw,56px);font-weight:400}.c-m{bottom:6%;left:6%;font-size:clamp(30px,6vw,110px)}
.wo-t{grid-column:7/-1;max-width:34em}.wo h2{grid-column:1/7}
/* wie */
.steps{list-style:none;padding:0 0 0 0;margin:0;position:relative;grid-column:1/-1}
.vline{position:absolute;left:calc(clamp(80px,12vw,200px)/2);top:0;bottom:0;width:1px;background:var(--k);transform-origin:top}
.step{display:grid;grid-template-columns:clamp(80px,12vw,200px) 1fr;gap:var(--gap);padding:0 0 90px}
.sn{font:900 clamp(72px,min(14vw,22vh),240px)/.8 Archivo,sans-serif;font-variation-settings:"wdth" 62;text-align:center;background:var(--p);position:relative;transform-origin:50% 0}
.sn b{position:absolute;inset:0;color:var(--r);opacity:0;font-weight:inherit}
.step>div{max-width:36em;padding-top:10px;min-width:0}.step h3{font:800 clamp(24px,2.6vw,38px)/1 Archivo,sans-serif;text-transform:uppercase;font-variation-settings:"wdth" 75;margin:0 0 14px}
/* cases */
.case{border-top:1px solid var(--k);padding:30px 0 70px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.case-h{grid-column:1/-1;position:relative;margin-bottom:30px}
.cn{font-size:clamp(30px,6.2vw,112px);line-height:.92;margin:8px 0 0;text-transform:uppercase;font-weight:900;font-variation-settings:"wdth" 70}

.bar{display:block;height:10px;background:var(--r);margin-top:18px;transform-origin:left;width:min(320px,40%)}
.tag{background:var(--k);color:var(--p);padding:2px 6px;margin-left:8px;font-size:10px}
.case dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0}
dt{color:var(--r);border-top:1px solid var(--k);padding-top:8px;margin-bottom:10px}dd{margin:0;font-size:16px}
dd .q{font-size:17px}
/* Fall 05: Häcksler – Stichworte fallen in den roten Schlitz, Splitter rieseln heraus und setzen sich zu SELBERWERK zusammen */
.hx{grid-column:1/-1;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(28px,5vh,56px) 0 clamp(24px,4vh,44px);margin-top:clamp(24px,5vh,56px);border-top:1px solid var(--k)}
.kws{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.2em .55em;font:800 clamp(22px,min(3.4vw,6vh),60px)/1 Archivo,ArchivoFB,sans-serif;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.01em;padding:0 4px}
.kw{display:inline-block;transform-origin:50% 100%;white-space:nowrap}.kw:nth-child(2n){font-weight:400}.kw:nth-child(4){color:var(--r)}
.slot{display:block;height:clamp(10px,1.4vh,16px);background:var(--r);margin:clamp(28px,6vh,72px) auto 0;width:min(100%,62%);transform-origin:50% 50%}
.fin{text-align:center;margin-top:clamp(150px,42vw,240px)}
.stage .fin{margin-top:auto}
.static .fin{margin-top:clamp(36px,7vh,72px)}
.sw{display:inline-flex;font:900 clamp(46px,min(14vw,24vh),280px)/1 Archivo,ArchivoFB,sans-serif;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.01em}
.lt{position:relative;display:inline-block}
.sh{display:block}.sh+.sh{position:absolute;left:0;top:0}
.s1{clip-path:polygon(-20% -40%,120% -40%,120% 32%,-20% 40%)}
.s2{clip-path:polygon(-20% 39%,120% 31%,120% 64%,-20% 71%)}
.s3{clip-path:polygon(-20% 70%,120% 63%,120% 140%,-20% 140%)}
.cap{display:block;font:500 12px/1.4 Mono,monospace;letter-spacing:.12em;text-transform:uppercase;margin-top:clamp(12px,2vh,20px)}
.esc{position:absolute;left:50%;top:0;font:900 clamp(28px,min(4vw,7vh),72px)/1 Archivo,ArchivoFB,sans-serif;font-variation-settings:"wdth" 62;color:var(--r);opacity:0;pointer-events:none}
.static .esc{display:none}
@media(max-width:599px){.kw.m-hide{display:none}.slot{width:80%}}
/* preise */
h2.huge{font-size:clamp(64px,min(16vw,26vh),300px);font-variation-settings:"wdth" 62}
.pi{grid-column:7/-1;max-width:34em}
.ptab{border-top:2px solid var(--k);margin-top:50px}
.prow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,3fr) minmax(0,3fr);gap:var(--gap);align-items:end;padding:22px 0;border-bottom:1px solid var(--k)}
.prow h3{margin:0;font-size:13px;align-self:start;overflow-wrap:anywhere}.prow .pd{margin:0;align-self:start}
.pn{font:900 clamp(56px,min(8vw,16vh),170px)/.8 Archivo,sans-serif;font-variation-settings:"wdth" 62;text-align:right;white-space:nowrap}.pn em{font-style:normal;color:var(--r);font-size:.45em;margin-left:.08em}
.prow small{font:500 11px/1.4 Mono,monospace;letter-spacing:.06em;text-transform:uppercase;align-self:start}
.note{margin-top:20px;font:500 12px Mono,monospace;text-transform:uppercase;letter-spacing:.1em}
/* nicht/faq */
.not{grid-column:6/-1;padding:0;margin:0;list-style:none;counter-reset:n}.not li{border-top:1px solid var(--k);padding:14px 0 14px 50px;position:relative;counter-increment:n}
.not li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:16px;font:500 12px Mono,monospace;color:var(--r)}
.nm h2,.faq h2{grid-column:1/6;font-size:clamp(36px,4.6vw,80px)}
.acc{grid-column:6/-1}details{border-top:1px solid var(--k)}details:last-child{border-bottom:1px solid var(--k)}
summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font-size:13px}summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:8px;font:300 32px/1 Archivo,sans-serif;color:var(--r);transition:transform .35s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 20px;max-width:40em}
details::details-content{block-size:0;overflow:hidden;transition:block-size .4s,content-visibility .4s allow-discrete}
details[open]::details-content{block-size:auto}
:root{interpolate-size:allow-keywords}
/* cta */
.cta{padding-bottom:var(--sp)}
.ask{font-weight:900;font-size:clamp(44px,min(11vw,17vh),210px);line-height:.86;text-transform:uppercase;margin:0 var(--m) 70px;font-variation-settings:"wdth" 62}
.ask .w{display:inline-block;transform-origin:50% 100%}.ask .w:nth-child(3n){color:var(--r)}
.cta-t{grid-column:7/-1;max-width:34em}.cta .g>p:last-child{grid-column:7/-1}
.cta-l{grid-column:7/-1;margin:clamp(8px,2vh,20px) 0 12px;color:var(--r)}.cta-b .btn{min-width:min(100%,17em);text-align:center}
.ft{border-top:1px solid var(--k);padding:24px var(--m);font:500 11px/2 Mono,monospace;text-transform:uppercase;letter-spacing:.08em}
.legal-b{padding-top:80px;padding-bottom:120px}.legal-b>*{grid-column:3/11}.legal-b h1{font:850 clamp(48px,8vw,140px)/.9 Archivo,sans-serif;text-transform:uppercase;font-variation-settings:"wdth" 62;margin:0 0 50px}
.legal-b h2{font:800 28px/1 Archivo,sans-serif;text-transform:uppercase;font-variation-settings:"wdth" 75;margin:40px 0 14px}.legal-b h3{font-size:17px}
@media(max-width:1023px){
.hero-side,.head .intro,.wo-t,.pi,.cta-t,.cta-l,.cta .g>p:last-child,.st-t{grid-column:5/-1!important}.warum-h,.wo h2{grid-column:1/-1!important}.warum-t{grid-column:3/-1!important}.not,.acc{grid-column:4/-1!important}.nm h2,.faq h2{grid-column:1/-1!important}
.case dl{grid-template-columns:repeat(2,minmax(0,1fr))}.case dl>div:last-child{grid-column:1/-1}
.prow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:10px}.prow .pd{grid-column:1/-1;order:3}.prow small{grid-column:1/-1;order:4}
}
@media(max-width:900px){nav{display:none}}
@media(max-width:800px){
nav{display:none}.g>*,.hero-side,.head .intro,.two>div,.warum-h,.warum-t,.st-t,.wo-t,.wo h2,.pi,.not,.acc,.nm h2,.faq h2,.cta-t,.cta-l,.cta .g>p:last-child,.statement .big,.legal-b>*{grid-column:1/-1!important}
.two>div:first-child{margin-bottom:60px}.claim .ln:nth-child(2){padding-left:.5em}.claim .ln:nth-child(3){padding-left:0}
.claim .ln>span{white-space:normal}
.track{grid-template-columns:1fr}.field{padding:4px 0 8px 18px}
.case dl{grid-template-columns:1fr}.prow{grid-template-columns:1fr 1fr}.prow .pd{grid-column:1/-1;order:3}.prow small{grid-column:1/-1;order:4}
.step{padding-bottom:60px}
.case dl{grid-template-columns:1fr}.case dl>div:last-child{grid-column:auto}
.step{grid-template-columns:clamp(56px,16vw,90px) minmax(0,1fr)}.vline{left:calc(clamp(56px,16vw,90px)/2)}.sn{font-size:clamp(64px,20vw,96px)}
.map{height:clamp(300px,80vw,420px)}
.c-r{right:auto;left:4%;top:50%;font-size:clamp(34px,10.5vw,60px)}
h2.d{font-size:clamp(38px,11vw,72px)}.claim{font-size:clamp(40px,12.4vw,72px)}.cn{font-size:clamp(28px,8.4vw,56px)}.ask{font-size:clamp(48px,15vw,96px)}h2.huge{font-size:clamp(72px,24vw,160px)}
.nm h2,.faq h2{font-size:clamp(38px,11vw,72px)}
}
@media(max-width:420px){.btn{padding:14px 16px}.top{padding-top:14px;padding-bottom:14px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.mq{transform:none}}
.static *{animation:none!important;transition:none!important}
.stage,.stage body{scroll-behavior:auto}

html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}

/* Logo A + Unterzeile (Art Director): Wortmarke als SVG, Unterzeile Live-Text JetBrains Mono Regular */
@font-face{font-family:MonoR;src:url(fonts/mono-regular.woff2) format("woff2");font-weight:400;font-display:swap}
.top .brand{align-self:center;display:block;line-height:0}
.top .brand img{display:block;height:29px;width:auto}
.top .brand small{font-family:MonoR,Mono,ui-monospace,monospace;font-weight:400;font-size:10.5px;line-height:1.2;letter-spacing:.08em;color:rgba(233,230,223,.7);margin-top:7px}
@media(max-width:767px){.top .brand small{display:none}.top .brand img{height:23px}}

/* Farbvariante Gold/Moos (nur Farben): Anthrazit-Grund, Rot -> Gold, Blau -> Moos, Kontakt auf Papier */
.statement{color:var(--papier)}
.claim .self>span,.c-r{background:url(img/gold-tex.webp) 30% 50%/cover;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media(max-width:767px){.claim .self>span,.c-r{background-image:url(img/gold-tex-klein.webp)}}
.cta{--p:var(--papier);--k:var(--tinte);--r:var(--moos);background:var(--p);color:var(--k)}
::selection{background:var(--r);color:var(--p)}