@font-face{font-family:'Fraunces';src:url('assets/fraunces-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fraunces-latin-wght-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --wall:#B4543A; --on-wall:#fff;
  --paper:#f5f1e8; --ink:#1c1a17; --mute:#6d675c; --line:rgba(28,26,23,.14);
  --f-d:'Fraunces',Georgia,serif; --f-b:'DM Sans',system-ui,sans-serif;
  --pad:clamp(1.2rem,4.5vw,4rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:var(--wall);color:var(--on-wall)}
.wrap{padding:0 var(--pad);max-width:1400px;margin:0 auto}
h1,h2,h3{font-family:var(--f-d);font-weight:500;letter-spacing:-.02em;line-height:1.02}
em,.it{font-style:italic;font-weight:400}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-bottom:1.2rem}
.eyebrow.dark{color:var(--mute)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:1.1rem var(--pad);color:#fff;mix-blend-mode:difference;pointer-events:none}
.nav>*{pointer-events:auto}
.brand{font-family:var(--f-d);font-weight:600;font-size:1.3rem;letter-spacing:.18em}
.brand span{font-weight:300;font-style:italic;letter-spacing:.1em}
.brand.big{font-size:clamp(2.4rem,7vw,5rem);letter-spacing:.1em}
.nav-links{display:flex;gap:1.8rem;align-items:center;font-size:.92rem}
.nav-links a{position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:currentColor;transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-cta{border:1px solid currentColor;border-radius:99px;padding:.45rem 1.05rem}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}.brand{font-size:1.1rem}}

/* buttons */
.btn{display:inline-flex;gap:.7rem;align-items:center;background:var(--ink);color:var(--paper);padding:.95rem 1.6rem;border-radius:99px;font-weight:500;transition:transform .25s,background .3s,color .3s}
.btn i{font-style:normal;transition:transform .25s}
.btn:hover{transform:translateY(-2px)}.btn:hover i{transform:translateX(4px)}
.btn.ghost{background:transparent;border:1px solid currentColor;color:inherit}
.link{color:var(--mute);padding:.6rem 0}.link:hover{color:var(--ink)}

/* hero */
.hero{height:300vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#111}
.layer{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.wallbg{position:absolute;inset:0;background:var(--wall);transition:none}
.wallnew{clip-path:inset(0 100% 0 0)}
.layer-gray{filter:grayscale(1) contrast(.94) brightness(1.02);clip-path:inset(0 0 0 0)}
.layer-gray .wallbg{background:#cfcdc7}
.layer-gray .wallnew{display:none}
.layer-gray .hero-text{--ink-h:#1c1a17}
.scene{position:absolute;left:0;bottom:0;width:100%;height:100%}
.can-paint{fill:var(--wall)}
.hero-text{--ink-h:#fff;position:absolute;left:var(--pad);top:47%;transform:translateY(-54%);max-width:min(46vw,640px);color:var(--ink-h);z-index:3}
.hero-text .eyebrow{opacity:.85}
.hero-text h1{font-size:clamp(3rem,min(7.2vw,10.8vh),7rem);font-weight:400}
.hero-text h1 span{display:block}
.hero-text .lead{margin:1.4rem 0 1.8rem;font-size:clamp(1rem,1.3vw,1.2rem);max-width:30em;opacity:.92}
.hero-text .btn{background:var(--ink-h);color:var(--btn-c,#1c1a17)}
.layer-color .hero-text .btn{--btn-c:var(--wall)}
.layer-gray .hero-text .btn{--btn-c:#cfcdc7}

.roller{position:absolute;top:0;bottom:0;left:0;width:0;z-index:5;pointer-events:none;will-change:transform}
.rl-bar{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 22px 4px rgba(255,255,255,.55)}
.rl-head{position:absolute;top:calc(50% - 34px);left:-44px;width:88px;height:68px;border-radius:14px;background:var(--wall);border:3px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rl-handle{position:absolute;top:calc(50% + 34px);left:-2px;width:4px;height:90px;background:#fff;border-radius:3px}
.roller{opacity:0;transition:opacity .4s}.roller.on{opacity:1}

.picker{position:absolute;z-index:8;left:var(--pad);bottom:clamp(1rem,4vh,2.4rem);display:flex;flex-direction:column;gap:.7rem;color:#fff;mix-blend-mode:normal}
.picker-hint,.picker-name{font-size:.82rem;letter-spacing:.08em;background:rgba(20,18,16,.55);backdrop-filter:blur(8px);padding:.35rem .8rem;border-radius:99px;width:fit-content}
.swatches{display:flex;gap:.55rem;flex-wrap:wrap;background:rgba(20,18,16,.55);backdrop-filter:blur(8px);padding:.6rem .7rem;border-radius:99px;width:fit-content;max-width:calc(100vw - 2*var(--pad))}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:var(--c);transition:transform .2s,border-color .2s;position:relative}
.sw:hover{transform:scale(1.14)}
.sw[aria-pressed=true]{border-color:#fff;transform:scale(1.18);box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.scroll-cue{position:absolute;z-index:8;right:var(--pad);bottom:2.2rem;width:22px;height:38px;border:1.5px solid #fff;border-radius:12px;mix-blend-mode:difference}
.scroll-cue span{position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.demo-tag{position:absolute;z-index:8;right:var(--pad);top:4.4rem;font-size:.66rem;letter-spacing:.16em;color:#fff;mix-blend-mode:difference}
@media(max-width:760px){
  .hero-text{max-width:none;right:var(--pad);top:calc(4.8rem);transform:none}
  .hero-text h1{font-size:clamp(2.7rem,13vw,4rem)}
  .hero-text h1 span{display:inline}
  .hero-text .lead{font-size:.95rem;margin:.9rem 0 1.1rem}
  .scene{height:62%}
  .scroll-cue,.demo-tag{display:none}
  .picker{left:0;right:0;padding:0 var(--pad);bottom:1rem;align-items:center}
  .swatches{gap:.45rem;padding:.5rem .7rem}.sw{width:30px;height:30px}
  .picker-hint{display:none}
  .swatches{flex-wrap:nowrap;overflow-x:auto;max-width:100%;border-radius:99px;scrollbar-width:none}
  .sw{flex:none}
  .rl-head{top:calc(66% - 34px)}.rl-handle{top:calc(66% + 34px)}
}

/* marquee */
.marquee{background:var(--wall);color:var(--on-wall);overflow:hidden;padding:2.2rem 0;transition:background .6s,color .6s}
.marquee-track{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;font-family:var(--f-d);font-size:clamp(2.4rem,7vw,6rem);font-style:italic;font-weight:300;will-change:transform}
.marquee-track i{font-style:normal;font-size:.35em;align-self:center;opacity:.6}

/* services */
.services{padding:clamp(4rem,10vw,9rem) 0 clamp(3rem,7vw,6rem)}
h2{font-size:clamp(2.2rem,5.6vw,5rem);max-width:15em}
.panels{display:flex;gap:.8rem;height:min(78vh,720px);margin-top:3rem;padding:0 var(--pad)}
.panel{position:relative;flex:1;border-radius:22px;overflow:hidden;color:#fff;cursor:pointer;transition:flex .7s cubic-bezier(.2,.8,.2,1);outline-offset:4px;isolation:isolate}
.panel.is-open{flex:3.4}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(calc(1 - var(--t,0)));transform:scale(1.06);transition:transform 1.2s}
.panel.is-open img{transform:scale(1)}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,8,6,.78),rgba(10,8,6,.05) 60%)}
.panel-body{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;min-width:min(380px,80vw)}
.panel .num{font-size:.8rem;letter-spacing:.2em;opacity:.8}
.panel h3{font-size:clamp(1.8rem,3vw,2.8rem);margin:.3rem 0 .6rem}
.panel p,.panel ul{max-height:0;opacity:0;overflow:hidden;transition:opacity .5s,max-height .6s}
.panel.is-open p,.panel.is-open ul{max-height:260px;opacity:1;transition-delay:.25s}
.panel ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.panel li{border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:.2rem .8rem;font-size:.82rem}
.kenn{position:absolute;top:.9rem;right:.9rem;font-size:.66rem;letter-spacing:.1em;background:rgba(0,0,0,.5);color:#fff;padding:.25rem .6rem;border-radius:99px}
@media(max-width:760px){
  .panels{flex-direction:column;height:auto}
  .panel,.panel.is-open{flex:none;height:420px}
  .panel p,.panel ul{max-height:none;opacity:1}
}

/* karte */
.karte{padding:clamp(3rem,8vw,7rem) 0;background:#ebe5d8}
.karte-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.karte-copy p:not(.eyebrow){margin-top:1.4rem;color:var(--mute);max-width:32em}
.karte-copy h2{font-size:clamp(2rem,4.4vw,4rem)}
.karte-now{color:var(--ink)!important}
.karte-now code{font-family:var(--f-b);background:var(--wall);color:var(--on-wall);padding:.15rem .6rem;border-radius:99px;margin-left:.4rem;font-size:.85rem;transition:background .5s,color .5s}
.karte-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.tile{aspect-ratio:3/4;border-radius:16px;background:var(--c);color:var(--tc);display:flex;flex-direction:column;justify-content:flex-end;padding:.8rem;text-align:left;font-size:.8rem;line-height:1.3;transform:translateY(0);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;position:relative}
.tile b{font-family:var(--f-d);font-weight:500;font-size:1.05rem;display:block}
.tile:hover{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 18px 30px rgba(0,0,0,.22)}
.tile[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:860px){.karte-grid{grid-template-columns:1fr}.karte-tiles{grid-template-columns:repeat(4,1fr);gap:.45rem}.tile{padding:.5rem;font-size:.66rem}.tile b{font-size:.8rem}}

/* ablauf */
.ablauf{padding:clamp(4rem,9vw,8rem) 0}
.ablauf .wrap{position:relative}
.steps{list-style:none;margin-top:3.5rem;display:grid;gap:2.8rem;padding-left:4.4rem;max-width:760px}
.steps li{display:flex;gap:1.4rem;position:relative;opacity:.35;transition:opacity .5s}
.steps li.on{opacity:1}
.step-n{position:absolute;left:-4.4rem;top:-.2rem;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;font-family:var(--f-d);font-size:1.3rem;border:1.5px solid var(--line);background:var(--paper);z-index:2;transition:background .5s,color .5s,border-color .5s}
.steps li.on .step-n{background:var(--wall);color:var(--on-wall);border-color:var(--wall)}
.steps h3{font-size:1.7rem;margin-bottom:.4rem}
.steps p{color:var(--mute);max-width:34em}
.steps-line{position:absolute;left:calc(var(--pad) + 1.5rem - 1px);top:0;bottom:0;width:2px;background:var(--line);margin-top:0}
.steps-line i{display:block;width:100%;height:0;background:var(--wall);transition:background .5s}
@media(max-width:760px){.steps{padding-left:3.4rem}.step-n{left:-3.4rem;width:2.4rem;height:2.4rem;font-size:1.05rem}.steps-line{left:calc(var(--pad) + 1.2rem - 1px)}}

/* anfrage */
.anfrage{background:var(--wall);color:var(--on-wall);padding:clamp(4rem,9vw,8rem) 0;transition:background .6s,color .6s}
.anfrage-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.anfrage h2{font-size:clamp(2.2rem,5vw,4.6rem)}
.anfrage-sub{margin-top:1.4rem;opacity:.85}
.quiz{background:var(--paper);color:var(--ink);border-radius:26px;padding:clamp(1.4rem,3vw,2.4rem);position:relative;min-height:380px;display:flex;flex-direction:column;box-shadow:0 30px 60px rgba(0,0,0,.2)}
.quiz-bar{height:4px;background:var(--line);border-radius:4px;margin-bottom:1.8rem;overflow:hidden}
.quiz-bar i{display:block;height:100%;width:25%;background:var(--wall);transition:width .5s,background .5s}
.q{display:none;border:0}.q.is-on{display:block;animation:qin .5s}
@keyframes qin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.q legend{font-family:var(--f-d);font-size:clamp(1.6rem,2.6vw,2.3rem);margin-bottom:1.3rem;letter-spacing:-.02em}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.opts label span{display:block;border:1.5px solid var(--line);border-radius:14px;padding:1rem;text-align:center;cursor:pointer;transition:all .25s}
.opts label span:hover{border-color:var(--ink)}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts input:checked+span{background:var(--wall);color:var(--on-wall);border-color:var(--wall)}
.opts input:focus-visible+span,.fields input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fields{display:grid;gap:1rem}
.fields label{display:grid;gap:.3rem;font-size:.82rem;color:var(--mute)}
.fields input[type=text]{font:inherit;font-size:1rem;color:var(--ink);padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.fields .check{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink)}
.fields .check a{text-decoration:underline}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1.6rem}
.quiz .btn{background:var(--ink)}
.q-done h3{font-size:2rem;margin-bottom:.6rem}.q-done p{color:var(--mute);margin-bottom:1.2rem}
@media(max-width:860px){.anfrage-grid{grid-template-columns:1fr}.opts{grid-template-columns:1fr 1fr}}

/* footer */
.foot{background:var(--ink);color:#e9e4d8;padding:clamp(3rem,6vw,5rem) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot-note{color:#9a9486;font-size:.85rem;margin-top:.6rem}
.foot-links{display:flex;flex-direction:column;gap:.5rem}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-small{max-width:1400px;margin:2.5rem auto 0;padding:1.2rem var(--pad) 0;border-top:1px solid #ffffff22;font-size:.78rem;color:#9a9486}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* dialogs */
.dlg{margin:auto;max-width:560px;width:calc(100vw - 2rem);max-height:86vh;overflow:auto;border:0;border-radius:20px;padding:2rem;background:var(--paper);color:var(--ink)}
.dlg::backdrop{background:rgba(10,8,6,.6)}
.dlg h3{font-size:1.8rem;margin-bottom:.8rem}.dlg p{margin-bottom:.9rem;font-size:.92rem}
.dlg .warn{background:#fff3c9;border-radius:10px;padding:.6rem .8rem;font-size:.82rem}
.dlg-x{position:absolute;right:1rem;top:.8rem;font-size:1.8rem;line-height:1}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:99px;font-size:.88rem;opacity:0;transition:all .4s;z-index:90;pointer-events:none;max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

@media(min-width:761px) and (max-height:800px){.picker{flex-direction:row;align-items:center;bottom:1rem}.picker-hint{display:none}.hero-text .lead{margin:1rem 0 1.3rem}}