@font-face{font-family:Manrope;font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#0a0a0a;--bg2:#121212;--line:#2a2a2a;--fg:#f4f2ee;--mute:#a8a6a0;--red:#e5231b;--ease:cubic-bezier(.16,1,.3,1);--cut:clamp(34px,6vw,92px);--pad:clamp(16px,4vw,56px);--soft:#cfcdc7;--ring:#ffffff55;--ring2:#ffffff1f;--card:#0a0a0acc;--dimw:#2c2c2c;--e11c:#e5231b;--rost:#8e2a1c;--papier:#efe7d8;--sand:#d9cbb0;--tinte:#14110f}
*{box-sizing:border-box}
html{scrollbar-color:#3a3a3a var(--bg);scrollbar-width:thin}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Manrope,system-ui,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
body.lock{overflow:hidden}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:6px}::-webkit-scrollbar-track{background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
em{font-style:normal;color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px}

/* Kopfzeile: Logo links, Etikett Mitte, Pille und Menü rechts */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px var(--pad);pointer-events:none}
.top>*{pointer-events:auto}
.brand img{height:54px;width:auto}
.tag{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;white-space:nowrap;pointer-events:none}
.tools{display:flex;align-items:center;gap:12px}
.pill{background:#f4f2ee;color:#0a0a0a;padding:13px 22px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.04em;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.pill:hover{background:var(--red);color:#fff;transform:translateY(-1px)}
.burger,.dclose,.pclose{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid #ffffff66;background:#0a0a0a66;backdrop-filter:blur(8px);cursor:pointer;color:#fff;transition:border-color .3s,background .3s}
.burger:hover,.dclose:hover,.pclose:hover{border-color:var(--red);background:#0a0a0acc}
.burger i{position:absolute;left:50%;top:50%;width:18px;height:1.8px;background:#fff;transform-origin:center;transition:width .4s var(--ease),margin .4s var(--ease)}
.burger i:nth-child(1){transform:translate(-50%,-4px) rotate(-26deg)}
.burger i:nth-child(2){transform:translate(-50%,4px) rotate(-26deg);width:12px;margin-left:3px}
.burger:hover i:nth-child(2){width:18px;margin-left:0}
.dclose i,.pclose i{position:absolute;left:50%;top:50%;width:18px;height:1.8px;background:#fff}
.dclose i:nth-child(1),.pclose i:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.dclose i:nth-child(2),.pclose i:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

/* Seitenmenü */
.veil{position:fixed;inset:0;z-index:70;background:#000a;backdrop-filter:blur(10px);opacity:0;transition:opacity .5s var(--ease)}
.veil.on{opacity:1}
.veil[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(520px,100%);background:#0f0f0f;border-left:1px solid var(--line);padding:clamp(24px,5vh,56px) clamp(24px,4vw,56px);display:flex;flex-direction:column;transform:translateX(102%);visibility:hidden;transition:transform .7s var(--ease),visibility 0s .7s;overflow-x:hidden;overflow-y:auto}
.drawer.on{transform:none;visibility:visible;transition:transform .7s var(--ease),visibility 0s}
.dclose{align-self:flex-end;margin-bottom:clamp(16px,6vh,56px);position:relative;z-index:1}
.drawer nav{display:grid;gap:4px;position:relative;z-index:1}
.drawer nav a{display:flex;align-items:baseline;gap:18px;padding:8px 0;font-size:clamp(21px,min(6vw,4.8vh),34px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;color:var(--fg);min-width:0}
.drawer nav b{font-size:13px;font-weight:700;color:var(--red);letter-spacing:.1em;min-width:26px}
.split{display:inline-flex;overflow:hidden;min-width:0;white-space:nowrap}
.split .ch{position:relative;display:inline-block;transition:transform .55s var(--ease);transition-delay:calc(var(--i)*22ms)}
.split .ch::after{content:attr(data-c);position:absolute;left:0;top:100%;color:var(--red)}
.drawer nav a:hover .ch,.drawer nav a:focus-visible .ch{transform:translateY(-100%)}
.dfoot{margin-top:auto;display:grid;gap:6px;font-size:15px;color:var(--mute);position:relative;z-index:1}
.dfoot a:hover{color:var(--fg)}
.drings{position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;color:var(--red);opacity:.35;pointer-events:none;animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Schwebender runder Button */
.round{position:fixed;right:clamp(16px,3vw,36px);bottom:clamp(16px,3vw,32px);z-index:50;width:74px;height:74px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;text-align:center;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.25;transform:scale(.6);opacity:0;pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease),background .3s,color .3s}
.round span{grid-area:1/1;transition:transform .4s var(--ease),opacity .3s}
.round svg{grid-area:1/1;transform:translateY(24px);opacity:0;transition:transform .4s var(--ease),opacity .3s}
.round.show{opacity:1;transform:none;pointer-events:auto}
.round:hover{background:#fff;color:#0a0a0a}
.round:hover span{transform:translateY(-30px);opacity:0}
.round:hover svg{transform:none;opacity:1}

/* Einstieg: gepinnte Bühne, Überblendung mit Kamerafahrt */
.story{position:relative;height:100svh}
.story.js{height:420svh}
.pin{position:relative;height:100svh;overflow:hidden;background:#000}
.story.js .pin{position:sticky;top:0}
.layer{position:absolute;inset:0;will-change:opacity}
.layer img{width:100%;height:100%;object-fit:cover;transform-origin:50% 55%;will-change:transform,filter}
.story:not(.js) .l-digital,.story:not(.js) .l-hybrid{display:none}
.shade{position:absolute;inset:0;background:linear-gradient(to top,#0a0a0a 2%,#0a0a0acc 38%,#0a0a0a99 100%);opacity:0;pointer-events:none}
.story:not(.js) .shade{opacity:.85}
.pin::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#000a 0,transparent 26%,transparent 58%,#000a 100%);pointer-events:none}
.hrings{position:absolute;z-index:2;right:-14vmin;top:50%;width:92vmin;height:92vmin;margin-top:-46vmin;color:#fff;opacity:.22;pointer-events:none;will-change:transform}
.words{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(96px,16vh,150px);z-index:3;height:clamp(64px,13vw,190px);pointer-events:none}
.words span{position:absolute;left:0;bottom:0;font-weight:800;font-size:clamp(56px,12vw,176px);line-height:.95;letter-spacing:-.04em;opacity:0;white-space:nowrap}
.words span:first-child{opacity:1}
.story:not(.js) .words{display:none}
.final{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(64px,11vh,120px);z-index:4;max-width:1100px}
.story.js .final{pointer-events:none}
.story.js.done .final{pointer-events:auto}
.final>*{will-change:transform,opacity}
.story.js .final>*{opacity:0}
h1{font-size:clamp(44px,8.4vw,96px);line-height:1;letter-spacing:-.035em;font-weight:800;margin:0 0 24px;text-wrap:balance}
h1 span{display:block}
.claim{font-size:clamp(16px,1.8vw,22px);letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin:0 0 16px;font-weight:700}
.lead{max-width:56ch;font-size:clamp(16px,1.35vw,19px);color:#dad8d2;margin:0 0 32px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.corner{position:absolute;z-index:4;bottom:clamp(24px,4.4vh,42px);margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#ffffffb3;font-weight:700}
.corner.l{left:var(--pad)}.corner.r{right:var(--pad)}
.cue{position:absolute;z-index:4;left:50%;bottom:clamp(14px,3.4vh,30px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:12px 20px 12px 24px;border:1px solid #ffffff66;border-radius:999px;background:#0a0a0a66;backdrop-filter:blur(8px);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#fff;transition:opacity .3s}
.cue i{position:relative;width:18px;height:18px;border-radius:50%;background:var(--red);overflow:hidden}
.cue i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-4px 0 0 -3px;border-right:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(45deg);animation:bob 1.6s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(-2px) rotate(45deg)}50%{transform:translateY(3px) rotate(45deg)}}
.story:not(.js) .cue{display:none}
.bar{position:absolute;z-index:4;right:clamp(10px,2vw,24px);top:50%;height:96px;margin-top:-48px;width:2px;background:#ffffff33}
.bar i{display:block;width:100%;height:100%;background:var(--red);transform:scaleY(0);transform-origin:top}
.story:not(.js) .bar{display:none}
.btn{display:inline-block;background:var(--red);color:#fff;border:1px solid var(--red);padding:16px 30px;font:700 13px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:#fff;color:#0a0a0a;border-color:#fff}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.ghost{background:transparent;border-color:#ffffff66}

/* Flächen, die übereinander schieben (Scroll-Over) */
.panel{position:sticky;top:0;z-index:2;background:var(--bg);color:var(--fg);clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);margin-top:calc(var(--cut) * -1);padding-top:var(--cut);overflow:clip}
.panel::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0);pointer-events:none;z-index:6}
.panel:nth-of-type(2){z-index:3}.panel:nth-of-type(3){z-index:4}.panel:nth-of-type(4){z-index:5}.panel:nth-of-type(5){z-index:6}.panel:nth-of-type(6){z-index:7}.panel:nth-of-type(7){z-index:8}.panel:nth-of-type(8){z-index:9}.panel:nth-of-type(9){z-index:10}.panel:nth-of-type(10){z-index:11}.panel:nth-of-type(11){z-index:12}.panel:nth-of-type(12){z-index:13}.panel:nth-of-type(13){z-index:14}
.inner{position:relative;padding:clamp(56px,8vw,120px) var(--pad) clamp(64px,8vw,120px)}
.has-bg{isolation:isolate}
.bgimg{position:absolute;left:0;right:0;top:-20%;bottom:-20%;z-index:-2;background-size:cover;background-position:center;opacity:.55;will-change:transform}
.bgimg.dim{opacity:.46}
.has-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--bg) 0,#0a0a0a66 22%,#0a0a0a66 78%,var(--bg) 100%);pointer-events:none}
.idx{margin:0 0 18px;font-size:13px;font-weight:800;letter-spacing:.3em;color:var(--red)}
h2{font-size:clamp(34px,5vw,72px);line-height:1.04;letter-spacing:-.03em;margin:0 0 28px;font-weight:800;text-wrap:balance}
h3{margin:0 0 10px;font-size:20px;letter-spacing:-.01em}
.big{font-size:clamp(20px,2.3vw,30px);line-height:1.3;font-weight:300;max-width:22em;margin:0 0 20px;text-wrap:balance}
.body{color:var(--soft);max-width:56ch;margin:0}
.sub{color:var(--soft);margin:-8px 0 44px;max-width:60ch}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}

/* Statement mit Wort für Wort Einfärbung */
.stm{height:330svh;background:var(--bg)}
.stm-in{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:calc(var(--cut) + 20px) var(--pad) 40px;overflow:hidden}
.statement{margin:0;font-size:clamp(26px,4.2vw,64px);line-height:1.1;font-weight:700;letter-spacing:-.03em;max-width:min(17em,66vw);position:relative;z-index:1;text-wrap:balance}
.statement .w{color:var(--dimw);transition:color .35s var(--ease)}
.statement .w.on{color:var(--fg)}
.statement .w.a.on{color:var(--red)}
.srings{position:absolute;right:-18vmin;top:50%;width:100vmin;height:100vmin;margin-top:-50vmin;color:#fff;opacity:.08;pointer-events:none}

.rv{}
.js-on .rv{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.js-on .rv.in{opacity:1;transform:none}

/* Aufklapper mit Plus */
.acc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.acc>li{border-bottom:1px solid var(--line)}
.acc-h,.more{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;color:var(--fg);font:500 clamp(18px,1.8vw,24px) Manrope,sans-serif;letter-spacing:-.01em;text-align:left;padding:22px 0;cursor:pointer;transition:color .2s}
.acc-h i,.more i{position:relative;flex:none;width:34px;height:34px;border:1px solid var(--ring);border-radius:50%;transition:background .3s var(--ease),border-color .3s,transform .4s var(--ease)}
.acc-h i::before,.acc-h i::after,.more i::before,.more i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.acc-h i::after,.more i::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-h:hover i,.more:hover i{border-color:var(--red)}
[aria-expanded="true"]>i{background:var(--red);border-color:var(--red);transform:rotate(180deg)}
[aria-expanded="true"]>i::after{transform:translate(-50%,-50%) rotate(0deg)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-p>div{overflow:hidden;min-height:0}
.open>.acc-p,.acc-p.open{grid-template-rows:1fr}
.acc-p p{margin:0 0 22px;color:var(--soft);max-width:62ch}
.acc-p img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 16px}
.more{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:14px 0;color:var(--mute)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px)}
.tcard{background:var(--card);border:1px solid var(--line);padding:0 0 clamp(18px,2.4vw,30px);}
.tcard h3,.tcard>p,.tcard .more,.tcard .acc-p{margin-left:clamp(18px,2.4vw,30px);margin-right:clamp(18px,2.4vw,30px)}
.tcard>p{margin-top:0;margin-bottom:0;color:var(--soft)}
.timg{overflow:hidden;margin-bottom:22px}
.timg img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s var(--ease)}
.tcard:hover .timg img{transform:scale(1.05)}
.roles{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.roles li{border:1px solid var(--ring);padding:6px 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* Projektliste mit Vorschaubild */
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.plist li{border-bottom:1px solid var(--line)}
.plist button{display:block;width:100%;background:none;border:0;color:var(--fg);padding:clamp(16px,2.6vw,30px) 0;cursor:pointer;text-align:left}
.pn{font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--red)}
.pt{font-size:clamp(34px,7vw,104px);font-weight:800;letter-spacing:-.035em;line-height:1;text-transform:uppercase;color:#ffffff59;transition:color .4s var(--ease),transform .6s var(--ease)}
.pm{font-size:14px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;text-align:right}
.plist:hover .pt{color:#ffffff26}
.plist button:hover .pt,.plist button:focus-visible .pt{color:var(--fg);transform:translateX(18px)}
.peek{position:fixed;left:0;top:0;z-index:30;width:clamp(240px,26vw,420px);aspect-ratio:16/9;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);overflow:hidden;box-shadow:0 20px 60px #000a;will-change:transform}
.peek.on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover}
.vnote{margin:18px 0 0;font-size:14px;color:var(--mute);max-width:70ch}
.vnote a{color:var(--fg);border-bottom:1px solid var(--ring)}
.vnote a:hover{color:var(--red);border-color:var(--red)}
.mini{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:72px 0 22px;font-weight:700}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);align-items:start}
.cat{background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.cat img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.cat:hover img{transform:scale(1.04)}
.cat-b{padding:16px 18px 6px;background:var(--bg2)}
.cat-b h3{margin:0;font-size:22px}
.cat .more{padding:10px 0;font-size:12px}
.cat .acc-p p{font-size:15px}

.strips{margin:0 calc(-1 * var(--pad));overflow:hidden;display:grid;gap:12px}
.strip-in{display:flex;gap:12px;width:max-content;will-change:transform}
.strip-in img{height:clamp(150px,19vw,270px);width:auto;aspect-ratio:16/9;object-fit:cover}

/* Kundenwand */
.wall{display:grid;gap:clamp(28px,4vw,56px)}
.wgroup{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.wgroup li{font-size:clamp(22px,3.4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.15;text-transform:uppercase;color:var(--fg);padding:6px 0;transition:color .3s var(--ease),transform .4s var(--ease);cursor:default}
.wgroup li::after{content:"/";margin:0 .5em;color:var(--red);font-weight:300}
.wgroup li:last-child::after{content:none}
.wgroup li.wh{flex:0 0 100%;font-size:13px;letter-spacing:.2em;color:var(--mute);margin-bottom:10px;padding:0;font-weight:700}
.wgroup li.wh::after{content:none}
.wgroup li.more-c{color:var(--mute);font-weight:300;text-transform:none;letter-spacing:-.02em}
.wgroup:hover li:not(.wh):not(.more-c){color:var(--ring)}
.wgroup li:not(.wh):not(.more-c):hover{color:var(--red);transform:translateY(-3px)}

/* Investment */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:40px}
.three article{padding:24px 0 0;border-top:1px solid var(--line)}
.three .hl{border-top-color:var(--red)}
.three p{margin:0;color:var(--soft);max-width:46ch}
.stat{font-size:clamp(34px,4vw,56px)!important;letter-spacing:-.03em;font-weight:800;line-height:1.05;color:var(--fg)!important;margin:6px 0 14px!important}
.stat small{display:block;margin-top:6px;font-size:14px;font-weight:400;color:var(--mute);letter-spacing:0}
.hl .stat{color:var(--red)!important}
.note{color:var(--mute);font-size:14px;margin:28px 0 0}
.meter{height:6px;background:var(--ring2);margin:22px 0 8px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--fg);transition:width 1.4s var(--ease) .2s}
.hl .meter i{background:var(--red)}
.mlabel{font-size:13px!important;color:var(--mute)!important;margin:0!important}
.faq{margin-top:56px;max-width:860px}

/* Kontakt */
.krings{position:absolute;z-index:0;left:-20vmin;bottom:-30vmin;width:90vmin;height:90vmin;color:var(--red);opacity:.28;pointer-events:none;animation:spin 120s linear infinite}
.contact h2{font-size:clamp(34px,4.6vw,64px)}
address{font-style:normal;color:var(--soft);margin-top:32px;line-height:1.9}
address a{border-bottom:1px solid var(--ring);transition:color .2s,border-color .2s}
address a:hover{color:var(--red);border-color:var(--red)}
form{display:grid;gap:0}
label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700;margin:20px 0 4px}
label:first-child{margin-top:0}
input,textarea{background:transparent;border:0;border-bottom:1px solid var(--ring);color:var(--fg);font:400 18px Manrope,sans-serif;padding:12px 0;outline:0;resize:vertical;border-radius:0;transition:border-color .2s}
input:focus,textarea:focus{border-color:var(--red)}
input[aria-invalid="true"]{border-color:var(--red)}
::placeholder{color:#7d7b76}
.err{margin:6px 0 0;color:#ff8a84;font-size:14px;min-height:0}
.err:empty{display:none}
form .btn{margin-top:28px;justify-self:start}
.form-err{margin-top:14px}
.thanks{border-top:1px solid var(--red);padding-top:22px}
.thanks p{color:var(--mute);margin:0}
.thanks:focus{outline:0}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:clamp(56px,8vw,110px);padding-top:26px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
footer a:hover{color:var(--fg)}

/* Video-Bühne mit Zurück und Weiter */
.player{position:fixed;inset:0;z-index:90;background:#000;display:grid;place-items:center;padding:clamp(56px,9vw,110px) var(--pad)}
.player[hidden]{display:none}
.pframe{width:min(1280px,100%);aspect-ratio:16/9}
.pframe iframe{width:100%;height:100%;border:0}
.pclose{position:absolute;top:14px;right:var(--pad)}
.pnav{position:absolute;bottom:clamp(16px,4vh,36px);background:none;border:0;color:#fff;cursor:pointer;display:grid;gap:2px;text-align:left;padding:8px 0}
.pnav small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.pnav span{font-size:clamp(16px,2vw,24px);font-weight:700;letter-spacing:-.01em;transition:color .2s}
.pnav:hover span{color:var(--red)}
.pnav.prev{left:var(--pad)}.pnav.next{right:var(--pad);text-align:right}

/* Rechtstexte */
.legal .top{justify-content:space-between;position:fixed}
.legal .back{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.legal .back:hover{color:var(--fg)}
.legal .top{background:#0a0a0acc;backdrop-filter:blur(10px)}
.doc{max-width:760px;margin:0 auto;padding:150px var(--pad) 96px}
.doc h1{font-size:clamp(36px,6vw,64px);margin:0 0 40px}
.doc h2{font-size:clamp(22px,2.4vw,30px);margin:44px 0 12px}
.doc h3{font-size:17px;margin:28px 0 6px}
.doc p{color:#d2d0ca;margin:0 0 14px;max-width:70ch}
.legal footer{max-width:760px;margin:0 auto;padding:26px var(--pad)}

@media(max-width:900px){
 .tag{display:none}
 .pill{padding:11px 16px;font-size:12px}
 .brand img{height:44px}
 .story.js{height:340svh}
 .words span{font-size:clamp(52px,19vw,120px)}
 .bar{display:none}
 .cols,.two,.three{grid-template-columns:1fr}
 .cats{grid-template-columns:1fr 1fr}
 .plist button{grid-template-columns:1fr;gap:6px}
 .pm{text-align:left}
 .peek{display:none}
 .round{width:78px;height:78px;font-size:10px}
 .stm{height:300svh}
}
@media(max-width:560px){.cats{grid-template-columns:1fr}.corner{display:none}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .js-on .rv{opacity:1;transform:none;transition:none}
 .acc-p,.meter i,.drawer,.veil{transition:none}
 .cue i::after,.drings,.krings{animation:none}
 .panel{position:relative}
}

/* ---- Papier, Sand und Kinorot ---- */
.paper,.sand,.rot{clip-path:polygon(0.0% calc(var(--cut) * 1.00),2.5% calc(var(--cut) * 0.97),5.0% calc(var(--cut) * 0.96),7.5% calc(var(--cut) * 0.98),10.0% calc(var(--cut) * 0.90),12.5% calc(var(--cut) * 0.88),15.0% calc(var(--cut) * 0.86),17.5% calc(var(--cut) * 0.78),20.0% calc(var(--cut) * 0.80),22.5% calc(var(--cut) * 0.79),25.0% calc(var(--cut) * 0.79),27.5% calc(var(--cut) * 0.67),30.0% calc(var(--cut) * 0.67),32.5% calc(var(--cut) * 0.62),35.0% calc(var(--cut) * 0.69),37.5% calc(var(--cut) * 0.65),40.0% calc(var(--cut) * 0.54),42.5% calc(var(--cut) * 0.64),45.0% calc(var(--cut) * 0.62),47.5% calc(var(--cut) * 0.55),50.0% calc(var(--cut) * 0.52),52.5% calc(var(--cut) * 0.43),55.0% calc(var(--cut) * 0.38),57.5% calc(var(--cut) * 0.43),60.0% calc(var(--cut) * 0.34),62.5% calc(var(--cut) * 0.33),65.0% calc(var(--cut) * 0.31),67.5% calc(var(--cut) * 0.26),70.0% calc(var(--cut) * 0.29),72.5% calc(var(--cut) * 0.27),75.0% calc(var(--cut) * 0.30),77.5% calc(var(--cut) * 0.23),80.0% calc(var(--cut) * 0.22),82.5% calc(var(--cut) * 0.17),85.0% calc(var(--cut) * 0.17),87.5% calc(var(--cut) * 0.12),90.0% calc(var(--cut) * 0.07),92.5% calc(var(--cut) * 0.14),95.0% calc(var(--cut) * 0.12),97.5% calc(var(--cut) * 0.07),100.0% calc(var(--cut) * 0.00),100% 100%,0 100%)}
.paper{--bg:var(--papier);--bg2:#e6dcc8;--fg:var(--tinte);--mute:#6b6257;--soft:#3f382f;--ring:#14110f55;--ring2:#14110f26;--line:#cdbfa6;--card:#f6f0e3;--dimw:#bdb09a;--e11c:var(--rost);--red:#c71f16}
.sand{--bg:var(--sand);--bg2:#cdbd9e;--fg:var(--tinte);--mute:#5f5646;--soft:#3a3329;--ring:#14110f55;--ring2:#14110f26;--line:#b9a883;--card:#e6dcc4;--dimw:#ad9b78;--e11c:var(--rost);--red:#c71f16}
.rot{--bg:#d4281d;--bg2:#b81f15;--fg:var(--papier);--mute:#f1c9c0;--soft:#fbe9e2;--ring:#efe7d855;--ring2:#efe7d826;--line:#efe7d840;--card:#b81f15;--dimw:#e98a80;--e11c:var(--papier);--red:var(--papier)}
.paper .inner,.sand .inner{position:relative;z-index:1}
.paper em,.sand em{color:var(--red)}
.paper .idx,.sand .idx{color:var(--rost)}
.rot .idx{color:var(--papier)}
.paper .btn,.sand .btn{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.paper .btn:hover,.sand .btn:hover{background:var(--red);border-color:var(--red);color:#fff}

/* Digitale Elf aus Punkten (Canvas) */
.e11c{position:absolute;display:block;pointer-events:none;width:min(52vw,86vh);aspect-ratio:1.62;z-index:2}
.hero-e11{right:7vw;top:44%;transform:translateY(-50%)}
.stm .e11c{right:-10vw;top:50%;transform:translateY(-50%);z-index:0;width:min(52vw,80vh);opacity:.5}
.contact .e11c{left:-8vw;bottom:-6vh;width:min(54vw,80vh);z-index:0;opacity:.55}
/* Vordergrund: dunkle Dünen schieben sich über das Bild */
.dunes{position:absolute;left:-2%;right:-2%;bottom:-2px;z-index:3;width:104%;height:34vh;pointer-events:none;will-change:transform}
.dunes.back{height:40vh}
.dunes path{shape-rendering:geometricPrecision}
.story:not(.js) .dunes{display:none}

/* Websites und Apps */
.cardrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(28px,4vw,56px) 0;border-top:1px solid var(--line)}
.cardrow.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.cardrow.rev .ctext{order:2}
.ctext h3{font-size:clamp(28px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;margin:0 0 14px;line-height:1.05}
.ctext p{margin:0 0 16px;color:var(--soft);max-width:48ch}
.chips{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{border:1px solid var(--ring);padding:6px 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.refs{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.refs a{border-bottom:1.5px solid var(--red);padding-bottom:2px;transition:color .2s}
.refs a:hover{color:var(--red)}
.browser{background:#1b1713;border-radius:12px;box-shadow:0 30px 70px #14110f55;overflow:hidden;transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);transition:transform .8s var(--ease)}
.cardrow.rev .browser{transform:perspective(1400px) rotateY(6deg) rotateX(2deg)}
.browser:hover{transform:none}
.bhead{display:flex;gap:6px;padding:10px 14px;background:#26201b}
.bhead i{width:9px;height:9px;border-radius:50%;background:#5a4f45}
.bhead i:first-child{background:#e5231b}
.bview{aspect-ratio:1200/720;overflow:hidden;position:relative}
.bview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;animation:slide 18s infinite}
.bview img:nth-child(1){animation-delay:0s}.bview img:nth-child(2){animation-delay:6s}.bview img:nth-child(3){animation-delay:12s}
@keyframes slide{0%{opacity:0;transform:scale(1.04)}5%{opacity:1}33%{opacity:1;transform:scale(1.1)}38%{opacity:0}100%{opacity:0}}
.bcap{display:block;position:relative;height:1.6em;margin-top:14px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte)}
.bcap span{position:absolute;left:0;opacity:0;animation:cap 18s infinite}
.bcap span:nth-child(2){animation-delay:6s}.bcap span:nth-child(3){animation-delay:12s}
@keyframes cap{0%{opacity:0;transform:translateY(6px)}4%{opacity:1;transform:none}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
.mock{position:relative}
.phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,1.6vw,22px);transform:rotate(-5deg)}
.phone{position:relative;width:clamp(110px,15vw,210px);aspect-ratio:1206/2622;border-radius:clamp(16px,2.2vw,30px);border:clamp(4px,.5vw,7px) solid var(--tinte);overflow:hidden;box-shadow:0 30px 60px #14110f55;background:#f4ece0;animation:float 7s ease-in-out infinite}
.phone:nth-child(1){animation-delay:-2s;margin-bottom:6%}
.phone:nth-child(2){width:clamp(130px,18vw,250px);animation-delay:-4s}
.phone:nth-child(3){animation-delay:-1s;margin-bottom:10%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:swap 12s infinite}
.phone img:nth-child(1){animation-delay:0s}.phone img:nth-child(2){animation-delay:3s}.phone img:nth-child(3){animation-delay:6s}.phone img:nth-child(4){animation-delay:9s}
@keyframes swap{0%{opacity:0}6%{opacity:1}25%{opacity:1}31%{opacity:0}100%{opacity:0}}
.phone.still img{opacity:1;animation:none}

/* Elf Stufen */
.stairs{height:340svh}
.stairs-in{position:sticky;top:0;height:100svh;padding:calc(var(--cut) + 28px) var(--pad) 28px;display:grid;grid-template-rows:auto 1fr;gap:12px;overflow:hidden}
.stairs-in::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 0%,transparent 40%,#2a0c07aa 100%);pointer-events:none;z-index:0}
.sinfo{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,48px);align-items:end}
.snum{font-size:clamp(70px,13vw,190px);font-weight:800;letter-spacing:-.05em;line-height:.85;color:var(--papier);text-shadow:0 6px 30px #00000055}
.stext h3{font-size:clamp(26px,4vw,56px);font-weight:800;letter-spacing:-.03em;margin:0 0 6px;line-height:1.05}
.stext p{margin:0;max-width:46ch;color:var(--soft);min-height:3.2em}
.stage{position:relative;z-index:1}
.step{position:absolute;bottom:0;left:calc(var(--i) * 100% / 11);width:calc(100% / 11 + 1px);height:calc((var(--i) + 1) * 100% / 12);background-color:#e9dfcc;background-image:url(../assets/img/t/crumple.jpg);background-image:url(img/t/crumple.jpg);background-size:900px;background-blend-mode:multiply;box-shadow:inset -10px 0 18px #2a0c0733,-14px 0 26px #1c07048c;transition:transform .5s var(--ease),filter .4s}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(#fffaf0,#e3d6bd);opacity:.95}
.step span{position:absolute;left:10px;top:16px;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--tinte);opacity:.55}
.step.on{transform:translateY(-8px);filter:brightness(1.07)}
.step.on span{opacity:1;color:var(--rost)}
.climber{position:absolute;left:0;bottom:0;width:clamp(62px,7.2vw,116px);z-index:2;transition:transform .8s var(--ease);will-change:transform;filter:drop-shadow(0 10px 8px #1c07048c)}
.climber svg{width:100%;height:auto;overflow:visible;display:block}
.climber .lg{transform-box:fill-box;transform-origin:50% 8%}
.climber.walk .lg.a{animation:hipA .42s ease-in-out infinite alternate}
.climber.walk .lg.b{animation:hipA .42s ease-in-out infinite alternate-reverse}
.climber.walk .body{animation:bob .42s ease-in-out infinite}
.climber .rec{animation:blink 1.2s steps(2) infinite}
@keyframes hipA{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes blink{50%{opacity:.15}}

@media(max-width:900px){
 .cardrow,.cardrow.rev{grid-template-columns:1fr}
 .cardrow.rev .ctext{order:0}
 .hero-e11{right:-14vw;opacity:.6}
 .stm .e11{opacity:.35}
 .sinfo{grid-template-columns:1fr}
 .snum{font-size:clamp(60px,22vw,110px)}
 .stairs{height:300svh}
 .step span{font-size:10px;left:4px}
}
@media(prefers-reduced-motion:reduce){.phone,.bview img,.climber .leg{animation:none}.phone img{animation:none}.phone img:first-child{opacity:1}}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.contact .e11 .g{animation:e11spin 36s linear infinite}
@keyframes e11spin{from{transform:rotateY(0deg) rotateX(10deg)}to{transform:rotateY(360deg) rotateX(10deg)}}
@media(prefers-reduced-motion:reduce){.contact .e11 .g{animation:none}}

/* Knitterpapier */
.paper,.sand,.rot{background-size:1400px 1400px}
.paper{background-image:url(img/t/paper.jpg)}.sand{background-image:url(img/t/sand.jpg)}.rot{background-image:url(img/t/rot.jpg)}
.stairs{background-color:var(--bg)}
.stm{background-color:var(--bg)}
.rot{--bg:#8a3120;--bg2:#6e2417;--fg:var(--papier);--mute:#f1d5cb;--soft:#fbeee8;--ring:#efe7d866;--ring2:#efe7d826;--line:#efe7d838;--card:#6e2417;--dimw:#c88478;--e11c:var(--papier);--red:var(--papier)}
body .brand{transition:opacity .4s var(--ease),transform .5s var(--ease)}
body.scrolled .brand{opacity:0;transform:translateY(-10px);pointer-events:none}

/* Arbeiten: Vorschau rechts neben der Zeile, eigener Zeiger */
.pwrap{position:relative}
.plist{position:relative;z-index:1}
.plist button{cursor:none}
.peek{position:absolute;left:auto;right:0;top:0;z-index:0;width:min(36vw,560px);aspect-ratio:16/9;pointer-events:none;opacity:1;overflow:hidden;box-shadow:0 30px 80px #000c;clip-path:inset(0 0 0 100%);transition:clip-path .7s var(--ease),top .6s var(--ease);will-change:top,clip-path}
.peek.on{clip-path:inset(0 0 0 0)}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:opacity .5s var(--ease),transform 1.2s var(--ease)}
.peek.on img{transform:scale(1)}
.peek img.b{opacity:0}
.pcur{position:fixed;left:0;top:0;z-index:95;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .3s var(--ease),transform .4s var(--ease);will-change:transform}
.pcur.on{opacity:1}
.pcur svg{width:20px;height:20px;margin-bottom:-14px}
.pcur span{display:block;margin-top:14px}
@media(hover:none){.plist button{cursor:pointer}.peek,.pcur{display:none}}

/* Visuals: gepinnte Galerie, die seitlich durchläuft */
.vgal{height:460svh;background:var(--bg)}
.vgal-in{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--cut) + 10px)}
.vhead{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:0 var(--pad);margin-bottom:clamp(14px,3vh,34px)}
.vhead h2{margin:0}
.vcount{font-size:clamp(34px,5vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--mute);font-variant-numeric:tabular-nums}
.vcount b{color:var(--fg);font-weight:800}
.vtrack{display:flex;gap:clamp(14px,2.2vw,34px);padding:0 var(--pad);width:max-content;will-change:transform}
.vcard{position:relative;flex:0 0 min(62vw,1080px);aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 30px 70px #000a}
.vcard img{position:absolute;top:0;left:-8%;width:116%;height:100%;object-fit:cover;will-change:transform}
.vbar{margin:clamp(14px,3vh,30px) var(--pad) 0;height:2px;background:var(--ring2);position:relative}
.vbar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}

/* CineStructure AI: Schwesterstudio im eigenen Licht */
.cinepanel{--bg:#eef0f3;--bg2:#e3e6ea;--fg:#14181f;--mute:#4a5160;--soft:#2f3542;--ring:#14181f44;--ring2:#14181f1f;--line:#d3d5da;--red:#31487a;--card:#f7f7f8}
.cinepanel .idx{color:#31487a}
.cinepanel h2{font-weight:300;letter-spacing:-.02em}
.cinepanel .btn{background:#31487a;border-color:#31487a}
.cinepanel .btn:hover{background:#14181f;border-color:#14181f;color:#fff}
.cine-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.cine-img{position:relative}
.cine-img img{width:100%;aspect-ratio:16/9;object-fit:cover;box-shadow:0 30px 70px #14181f40}
.cine-img img+img{position:absolute;right:-4%;bottom:-16%;width:52%;box-shadow:0 24px 60px #14181f55;border:6px solid #eef0f3}
.cine-link{display:inline-flex;align-items:center;gap:10px;margin-top:8px}
.cine-link svg{width:16px;height:16px}
@media(max-width:900px){.cine-grid{grid-template-columns:1fr}.cine-img{margin-bottom:12%}.vcard{flex-basis:84vw}.vgal{height:380svh}}


/* ---- Filmstreifen-Elf ---- */
.f11{--h:min(62vh,66vmin);position:absolute;height:var(--h);width:calc(var(--h)*.86);perspective:calc(var(--h)*2.4);pointer-events:none}
.f11 .rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry,-18deg)) rotateX(var(--rx,4deg));will-change:transform}
.f11 .sx{--w:calc(var(--h)*.2);position:absolute;top:calc(var(--h)*.1);bottom:0;width:var(--w)}
.f11 .sx.a{left:calc(var(--h)*.22)}.f11 .sx.b{left:calc(var(--h)*.6)}
.f11 .s{position:absolute;inset:0;background:#0e0c0b;border-radius:calc(var(--w)*.06);overflow:hidden;box-shadow:0 0 0 1px #ffffff1c,0 26px 60px #000b,0 0 80px #e5231b47}
.f11 .s::before,.f11 .s::after{content:"";position:absolute;top:0;bottom:0;width:calc(var(--w)*.11);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--w)*.06),#efe7d8 calc(var(--w)*.06),#efe7d8 calc(var(--w)*.2),transparent calc(var(--w)*.2),transparent calc(var(--w)*.3));opacity:.9;z-index:2}
.f11 .s::before{left:calc(var(--w)*.045)}.f11 .s::after{right:calc(var(--w)*.045)}
.f11 .reel{position:absolute;left:calc(var(--w)*.2);right:calc(var(--w)*.2);top:0;display:flex;flex-direction:column;gap:calc(var(--w)*.1);animation:reel 22s linear infinite}
.f11 .sx.b .reel{animation-direction:reverse;animation-duration:26s}
.f11 .reel i{display:block;flex:none;aspect-ratio:1/1.15;background-size:cover;background-position:center;border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff14}
@keyframes reel{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.f11 .hk{position:absolute;top:0;right:calc(100% - 1px);width:calc(var(--w)*1.2);height:calc(var(--w)*.86);background:#0e0c0b;border-radius:calc(var(--w)*.06);transform-origin:100% 0;transform:rotate(-40deg);box-shadow:0 0 0 1px #ffffff1c,0 18px 40px #000a;overflow:hidden}
.f11 .hk::before{content:"";position:absolute;left:0;right:0;top:calc(var(--w)*.08);height:calc(var(--w)*.1);background:repeating-linear-gradient(to right,#efe7d8 0,#efe7d8 calc(var(--w)*.14),transparent calc(var(--w)*.14),transparent calc(var(--w)*.28));opacity:.9}
.f11 .hk i{position:absolute;left:calc(var(--w)*.12);right:calc(var(--w)*.06);top:calc(var(--w)*.25);bottom:calc(var(--w)*.1);background-size:cover;background-position:center;border-radius:2px}
.f11-intro{position:fixed;left:0;top:0;z-index:130;opacity:0}
.f11-intro.go{opacity:1;transition:opacity .9s var(--ease)}
.f11-intro.go .rig{animation:spin11 2.1s var(--ease) forwards}
@keyframes spin11{from{transform:rotateY(160deg) rotateX(14deg)}to{transform:rotateY(-18deg) rotateX(4deg)}}
.f11-intro.dock{transition:transform 1.25s var(--ease)}
.f11-docked{position:absolute;left:0;top:0;opacity:1}
.f11slot{--h:min(50vh,56vmin);position:absolute;right:7vw;top:47%;height:var(--h);width:calc(var(--h)*.86);transform:translateY(-50%);pointer-events:none;z-index:2}
.f11-ink{right:-3vw;top:50%;margin-top:calc(var(--h)/-2);opacity:.9;z-index:0}
.f11-ink .s{box-shadow:0 0 0 1px #14110f33,0 26px 60px #14110f55}
.introveil{position:fixed;inset:0;z-index:120;background:#0a0a0a;transition:opacity 1.1s var(--ease)}
.introveil.out{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.f11 .reel{animation:none}.introveil{display:none}}
@media(max-width:900px){.f11-ink{right:-26vw;opacity:.35}.f11slot{right:-10vw;top:38%}}

/* ---- Seitenleiste ---- */
.rail{position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:55;display:grid;gap:14px;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.rail.show{opacity:1;pointer-events:auto}
.rail::before{content:"";position:absolute;right:3px;top:6px;bottom:6px;width:1px;background:#ffffff33}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:11px;font-weight:800;letter-spacing:.14em;color:#ffffff80;position:relative;text-shadow:0 0 6px #0008;transition:color .3s}
.rail a i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.55;transition:transform .4s var(--ease),background .3s,opacity .3s}
.rail a span{transition:transform .4s var(--ease),opacity .3s;opacity:.7}
.rail a:hover span,.rail a.cur span{opacity:1;transform:translateX(-4px)}
.rail a.cur i{background:var(--red);opacity:1;transform:scale(1.9)}
@media(max-width:1000px){.rail{display:none}}

/* ---- Arbeiten: ruhigere Liste ---- */
.pt{display:block}
.ps{display:block;margin-top:6px;font-size:clamp(13px,1.2vw,16px);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.peek{z-index:3}
.pcur{width:84px;height:84px;margin:-42px 0 0 -42px;background:#ffffff1f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #ffffff8c;display:grid;place-items:center}
.pcur svg{width:26px;height:26px;margin:0 0 0 4px}
.pcur span{display:none}
.pmore .acc-p{margin:0}
.pmore.open>.acc-p{grid-template-rows:1fr}
.plist2{border-top:0}
.morefilms{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:700 13px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:20px 0;cursor:pointer;position:relative;z-index:1}
.morefilms i{position:relative;flex:none;width:34px;height:34px;border:1px solid var(--ring);border-radius:50%;transition:background .3s var(--ease),border-color .3s,transform .4s var(--ease)}
.morefilms i::before,.morefilms i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.morefilms i::after{transform:translate(-50%,-50%) rotate(90deg)}
.morefilms[aria-expanded="true"] i{background:var(--red);border-color:var(--red);transform:rotate(180deg)}
.morefilms[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(0deg)}
.pframe video{width:100%;height:100%;background:#000}

/* ---- Kunden: groesser, mit klarer Rangfolge ---- */
.kh{margin:clamp(70px,9vw,130px) 0 clamp(20px,3vw,40px)}
.wgroup li.wh{font-size:13px!important;font-weight:700;letter-spacing:.2em}

/* ---- Figur als Bild mit Sprung ---- */
.climber{width:clamp(70px,8.6vw,132px);filter:drop-shadow(0 16px 14px #1c07048c)}
.climber img{display:block;width:100%;height:auto;transform-origin:50% 100%}
.climber.jump img{animation:hop .9s var(--ease)}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(0) scale(1.08,.9)}48%{transform:translateY(-26%) scale(.94,1.1) rotate(-4deg)}78%{transform:translateY(0) scale(1.1,.88)}100%{transform:translateY(0) scale(1,1)}}
.vgal .vhead h2{margin:0}

.climber .jm{position:absolute;left:0;bottom:0;width:100%;opacity:0}
.climber.jump .jm{opacity:1}.climber.jump .st{opacity:0}

.bgvid{opacity:.62}
.bgvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.bgvid video.on{opacity:1}
@media (prefers-reduced-motion:reduce){.bgvid video{display:none}}

#film .inner{padding-bottom:clamp(140px,22vh,260px)}

.wgroup.small li{font-size:clamp(15px,1.7vw,24px);font-weight:700}
.wgroup.small li::after{margin:0 .45em}

/* Elf als rote, tiefe 3D-Ziffer aus Schichten (Vorschlag D) */
.f11{--c0:#4a0a07;--c1:#ff3a2e}
.f11 .sx{--w:calc(var(--h)*.3);top:calc(var(--h)*.06);bottom:calc(var(--h)*.06);width:var(--w);transform-style:preserve-3d}
.f11 .sx.a{left:calc(var(--h)*.12)}.f11 .sx.b{left:calc(var(--h)*.5)}
.f11 .ex{position:absolute;inset:0;transform-style:preserve-3d}
.f11 .ex b,.f11 .ex u{position:absolute;inset:0;clip-path:polygon(0 17%,60% 0,100% 0,100% 100%,38% 100%,38% 33%,0 33%);transform:translateZ(calc(var(--h)*.17*(var(--k,1) - .5)));background:color-mix(in srgb,var(--c1) calc(var(--k)*100%),var(--c0))}
.f11 .ex u{--k:1;text-decoration:none;background:linear-gradient(112deg,#ff6a5c 0,#e5231b 38%,#b3140f 100%);box-shadow:none}
.f11 .ex u::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 4px);mix-blend-mode:soft-light}
.f11 .gs{position:absolute;left:8%;right:8%;bottom:-3%;height:7%;background:radial-gradient(closest-side,#000a,transparent);filter:blur(6px);transform:translateZ(-1px)}
.f11-ink{--c0:#1a1512;--c1:#2a211c}
.f11-ink .ex u{background:#2a211c}
.f11-ink .gs{display:none}

/* Papierflieger als Treppenfigur */
.climber.plane{width:clamp(78px,9vw,140px);filter:drop-shadow(0 14px 12px #1c07048c)}
.climber.plane svg{width:100%;height:auto;display:block;overflow:visible}
.climber.plane .pl{transform-box:fill-box;transform-origin:50% 60%}
.climber.plane .trail{opacity:.85}
.climber.plane.jump svg{animation:swoop .95s var(--ease)}
@keyframes swoop{0%{transform:translateY(0) rotate(0)}35%{transform:translateY(-34%) rotate(-12deg)}70%{transform:translateY(-8%) rotate(5deg)}100%{transform:translateY(0) rotate(0)}}
.climber.plane.walk svg{animation:bobp 2.4s ease-in-out infinite}
@keyframes bobp{50%{transform:translateY(-6%) rotate(-2deg)}}

/* Kunden: alle Gruppen als fließende Zeilen */
.wgroup li,.wgroup.small li,.wgroup.big li,.wgroup.mid li{font-size:clamp(17px,2vw,29px);font-weight:700;padding:5px 0;line-height:1.3}
.wgroup li::after{margin:0 .5em}
.wgroup li.wh{font-size:13px!important}
.wall{gap:clamp(26px,3.4vw,46px)}

/* Visuals: Kino-Karussell mit Tiefe, Fokus und Lichtschein */
.vgal-in{isolation:isolate}
.vamb{position:absolute;left:-10%;top:-10%;width:30%;height:30%;transform-origin:0 0;z-index:-1;background-size:cover;background-position:center;filter:blur(16px) saturate(1.4);opacity:.5;transition:background-image .6s;transform:scale(4.4)}
.vtrack{perspective:1800px;align-items:center}
.vcard{transition:box-shadow .5s var(--ease);will-change:transform}
.vcard::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dm,0);pointer-events:none;transition:opacity .2s}
.vcard.on{box-shadow:0 40px 90px #000c,0 0 0 1px #ffffff26,0 0 80px #e5231b33}
.vcard.on::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);z-index:2}
@media(prefers-reduced-motion:reduce){.vcard{transform:none!important}}

/* Treppe: Säulen füllen sich beim Scrollen, die aktive federt */
.step{filter:none!important;transition:background-color .5s var(--ease),opacity .5s var(--ease),transform .5s var(--ease);opacity:.38;background-color:#a8472f}
.step.reached{opacity:1;background-color:#efe7d8}
.step.on{transform:none;background-color:#fff6e6;box-shadow:0 0 0 2px #fff6e6,0 -10px 40px #ff8a6a66}
.step.on span{color:#c71f16}
.step.bump{animation:bump .7s cubic-bezier(.3,1.8,.5,1) 1}
@keyframes bump{0%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-16px) scaleY(1.04)}60%{transform:translateY(2px) scaleY(.99)}100%{transform:translateY(0) scaleY(1)}}
@media(prefers-reduced-motion:reduce){.step.bump{animation:none}}

/* Elf als Gittermodell auf Leinwand */
.f11 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.f11{perspective:none}

/* Showreel als Vimeo-Hintergrund */
.reelbg{position:absolute;inset:0;overflow:hidden}
.reelbg iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.reelbg iframe.on{opacity:1}
@media(prefers-reduced-motion:reduce){.reelbg iframe{display:none}}

/* UX-Runde: Lesbarkeit, Orientierung, Touch */
.body{font-size:clamp(16px,1.15vw,18px);line-height:1.65}
.sub{font-size:clamp(16px,1.1vw,18px)}
.story.js{height:360svh}
.vgal{height:420svh}
.rail a::after{content:attr(data-l);position:absolute;right:30px;white-space:nowrap;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#fff;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none;background:#0a0a0acc;padding:6px 10px;border-radius:999px}
.rail a:hover::after,.rail a.cur::after,.rail a:focus-visible::after{opacity:1;transform:none}
.tcard .more{width:calc(100% - 2*clamp(18px,2.4vw,30px))}
.pill{min-height:44px;display:inline-flex;align-items:center}
.btn{min-height:48px}
.cat .more{min-height:44px}
footer a,.dfoot a,address a{display:inline-block;padding:10px 0}
.dfoot a{padding:8px 0}
.vnote a{display:inline-block;padding:6px 0}
@media(hover:none){.plist .pt{color:var(--fg)}.plist button:active .pt{color:var(--red)}}
@media(max-width:900px){
  .round{width:58px;height:58px;font-size:9px;right:12px;bottom:12px}
  .burger{background:#0a0a0acc}
  .f11slot{--h:min(36svh,52vw);right:2vw;top:30%}
  .f11-ink{--h:min(34svh,60vw);right:-4vw;top:auto;bottom:5%;margin-top:0;opacity:.2}
  .browser{transform:none!important}
  .cardrow>*,.ctext{min-width:0}
  .ctext{max-width:100%}
  .body,.sub{font-size:16px}
  .top{padding-top:max(10px,env(safe-area-inset-top))}
  .step span{font-size:11px}
  .stm{height:260svh}
}
@media(max-width:400px){.pill{padding:10px 14px;font-size:12px}.tools{gap:8px}}

@media(max-width:560px){.phone{width:clamp(84px,27vw,150px)}.phones{gap:8px;transform:rotate(-3deg)}}

.f11-docked{width:100%;height:100%}
@media(max-width:900px){.f11-ink{opacity:.14}}

/* Elf links oben, verdeckt die Gesichter nicht */
.f11slot{left:5vw;right:auto;top:30%;--h:min(40vh,44vmin)}
@media(max-width:900px){.f11slot{left:3vw;right:auto;top:20%;--h:min(30svh,52vw)}}

/* Bergsteiger als Schattenriss auf der Treppe */
.climber{position:absolute;left:0;bottom:0;width:clamp(46px,5.6vw,92px);z-index:3;transition:transform .9s var(--ease);will-change:transform;pointer-events:none}
.climber img{width:100%;height:auto;display:block;transform-origin:50% 100%}
.climber.jump img{animation:climb .95s var(--ease)}
@keyframes climb{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10%) rotate(-5deg) scale(1.02)}55%{transform:translateY(2%) rotate(2deg)}100%{transform:translateY(0) rotate(0)}}
@media(prefers-reduced-motion:reduce){.climber img{animation:none!important}}

.climbcv{position:absolute;left:0;top:0;width:100%;z-index:3;pointer-events:none}

/* Runde Ladezeit, Treppe, Visuals */
.pvimeo{position:absolute;left:50%;bottom:clamp(70px,12vh,110px);transform:translateX(-50%);color:#ffffffb0;font-size:13px;letter-spacing:.08em;text-decoration:underline;text-underline-offset:4px;padding:10px 14px;z-index:2}
.pvimeo:hover{color:#fff}
.vamb{opacity:0;transition:opacity .8s var(--ease)}
.vamb.on{opacity:.5}
.step{opacity:1!important;background-color:#4a160d;background-image:linear-gradient(#00000000,#00000055);background-blend-mode:normal;border:1px solid #c7705833;box-shadow:inset -10px 0 18px #1c07046b,-12px 0 24px #1c070480}
.step::before{background:linear-gradient(#d98c76,#9c4c38);opacity:1;height:6px}
.step span{color:#f0b9a8;opacity:.9}
.step.reached{background-color:#efe7d8;background-image:url(img/t/paper.jpg);background-size:700px;border-color:#fff8;box-shadow:inset -10px 0 18px #2a0c0733,-12px 0 24px #1c070480}
.step.reached::before{background:linear-gradient(#fffaf0,#e3d6bd)}
.step.reached span{color:var(--tinte);opacity:.6}
.step.on{background-color:#fff6e6;box-shadow:0 0 0 2px #fff6e6,0 -10px 40px #ff8a6a66}
.step.on span{color:#c71f16;opacity:1}

.top{justify-content:flex-end}
.f11-fly{position:fixed;z-index:58;pointer-events:none}

/* Etwas langsamer: längere Scrollstrecken bei Visuals und Statement */
.vgal{height:500svh}
.stm{height:390svh}
@media(max-width:900px){.vgal{height:460svh}.stm{height:330svh}}

/* Nochmal 20 Prozent langsamer */
.vgal{height:600svh}
.stm{height:470svh}
@media(max-width:900px){.vgal{height:550svh}.stm{height:400svh}}

/* Nochmal 20 Prozent langsamer: Visuals und Treppe */
.vgal{height:720svh}
.stairs{height:410svh}
@media(max-width:900px){.vgal{height:660svh}.stairs{height:360svh}}
.round{display:none!important}