/* ============ EXTRA: Curtain · Drawer · Rundgang · Form · FAQ ============ */

/* curtain */
.curtain{display:none}
.js .curtain{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--red);transition:transform 1.15s cubic-bezier(.77,0,.18,1) .15s;will-change:transform}
.curtain .logo{background:#fff;color:var(--red);transform:scale(1.5);transition:opacity .5s,transform 1.1s var(--ease);animation:lg .9s var(--ease) both}
.curtain .logo b{font-size:clamp(26px,4vw,44px)}.curtain .logo i{font-size:clamp(12px,1.6vw,18px)}
.curtain.go{transform:translateY(-101%)}
.curtain.go .logo{opacity:0;transform:scale(1.5) translateY(-30px)}
.curtain.gone{display:none}
@keyframes lg{from{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1.5)}}

/* nav: menu button */
.menu-btn{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 4px 0 2px;font:800 11px var(--grot);letter-spacing:.1em;text-transform:uppercase;position:relative}
.menu-btn i{position:absolute;right:4px;width:20px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),width .4s}
.menu-btn i:nth-of-type(1){top:15px}.menu-btn i:nth-of-type(2){top:23px;width:13px}
.menu-btn span{margin-right:30px;transition:transform .4s var(--ease)}
.menu-btn:hover i:nth-of-type(2){width:20px}
.nav .mode{display:flex}
@media(max-width:900px){.menu-btn{display:inline-flex}}
html.drawer-open{overflow:hidden}

/* drawer */
.drawer{position:fixed;inset:0;z-index:150;visibility:hidden;pointer-events:none;transition:visibility 0s 1s}
.drawer.open{visibility:visible;pointer-events:auto;transition:none}
.drawer-back{position:absolute;inset:0;background:rgba(4,3,2,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .8s var(--ease);cursor:pointer}
.drawer.open .drawer-back{opacity:1}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(1180px,96vw);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);background:#0b0908;color:#efe7da;transform:translateX(104%);transition:transform 1s cubic-bezier(.77,0,.18,1);box-shadow:-60px 0 140px rgba(0,0,0,.7)}
.drawer.open .drawer-panel{transform:none}
.drawer-body{display:flex;flex-direction:column;padding:clamp(18px,2.4vw,34px) clamp(22px,3.4vw,56px);overflow:auto;min-width:0;scrollbar-width:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center}
.drawer-x{display:inline-flex;align-items:center;gap:12px;color:#bdb3a4;transition:color .3s}
.drawer-x:hover{color:#fff}
.drawer-x i{position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background .4s,transform .6s var(--ease)}
.drawer-x i::before,.drawer-x i::after{content:"";position:absolute;left:10px;right:10px;top:16px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.drawer-x i::after{transform:rotate(-45deg)}
.drawer-x:hover i{background:var(--red);transform:rotate(90deg)}
.dm{list-style:none;margin:auto 0;padding:clamp(24px,5vh,60px) 0}
.dm-i{overflow:hidden;position:relative}
.dm-a{display:block;position:relative;padding:.12em 0;font:400 clamp(36px,4.9vw,72px)/1.04 var(--serif);letter-spacing:-.025em;transition:color .35s,padding .55s var(--ease);opacity:0;transform:translateY(60%);transition-property:color,padding,opacity,transform}
.drawer.open .dm-a{opacity:1;transform:none;transition:color .35s,padding .55s var(--ease),opacity .9s var(--ease) calc(.45s + var(--i,0)*70ms),transform 1s var(--ease) calc(.45s + var(--i,0)*70ms)}
.dm-a::before{content:"";position:absolute;left:0;top:50%;width:0;height:.16em;background:var(--red);transition:width .55s var(--ease);transform:translateY(-50%)}
.dm-a:hover,.dm-a:focus-visible,.dm-i.exp>.dm-a{color:#fff;padding-left:.7em}
.dm-a:hover::before,.dm-a:focus-visible::before,.dm-i.exp>.dm-a::before{width:.42em}
.dm-i.cur>.dm-a{font-style:italic}
.dm-sub{list-style:none;display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease);padding-left:.2em}
.dm-sub>*{min-height:0}
.dm-sub{display:grid}
.dm-i.exp .dm-sub{grid-template-rows:1fr}
.dm-sub-in{overflow:hidden}
.dm-sub li{overflow:hidden}
.dm-sub{overflow:hidden}
.dm-sub a{display:flex;align-items:center;gap:12px;padding:5px 0 5px 1px;font:400 clamp(15px,1.2vw,18px)/1.3 var(--sans);color:#a79d8e;transition:color .3s,transform .5s var(--ease)}
.dm-sub a::before{content:"";width:7px;height:7px;background:var(--red);transform:scale(.4);transition:transform .4s var(--ease)}
.dm-sub a:hover{color:#fff;transform:translateX(8px)}.dm-sub a:hover::before{transform:none}
.dm-sub li:first-child{margin-top:6px}.dm-sub li:last-child{margin-bottom:16px}
.drawer-foot{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#8c8276;line-height:1.8}
.drawer-foot a:hover{color:var(--glow)}
.status-mini{display:flex;align-items:flex-start;gap:9px}
.status-mini .dot{margin-top:3px;flex:none}
.status-mini.open .dot{background:var(--red);box-shadow:0 0 10px 2px rgba(231,54,42,.8)}
.drawer-stage{order:2;position:relative;overflow:hidden;background:#050403}
.drawer-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12)}
.drawer-stage img.prev{opacity:1;z-index:1;transform:scale(1.02);transition:transform 1.4s var(--ease)}
.drawer-stage img.on{opacity:1;z-index:2;transform:scale(1.02);animation:wipeUp 1s var(--ease) both;transition:transform 4s linear}
.drawer.open .drawer-stage img.on{transform:scale(1.08)}
@keyframes wipeUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.drawer-stage::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,#0b0908,transparent 22%),linear-gradient(0deg,rgba(0,0,0,.65),transparent 38%);pointer-events:none}
.stage-cap{position:absolute;left:clamp(18px,2.4vw,34px);bottom:clamp(18px,2.4vw,32px);z-index:4;display:flex;align-items:center;gap:10px;padding:9px 12px 8px;background:var(--red);color:#fff}
.stage-cap i{width:7px;height:7px;background:#fff}
@media(max-width:860px){.drawer-panel{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}.drawer-stage{display:none}.drawer-foot{grid-template-columns:1fr 1fr}.status-mini{grid-column:1/-1}}

/* floating cta + to top */
.float-cta{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:85;display:inline-flex;align-items:center;gap:10px;padding:14px 20px 14px 16px;border-radius:99px;background:var(--red);color:#fff;font:600 13px var(--sans);box-shadow:0 14px 40px -10px rgba(231,54,42,.7);transform:translateY(140%);opacity:0;transition:transform .7s var(--ease),opacity .5s,box-shadow .4s}
.float-cta.vis{transform:none;opacity:1}
.float-cta:hover{box-shadow:0 14px 50px -4px rgba(231,54,42,.95)}
.fc-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pingw 2s infinite}
@keyframes pingw{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
.to-top{position:fixed;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:85;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#efe7da;background:rgba(12,10,9,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .5s,transform .6s var(--ease),background .3s}
.to-top.vis{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--red)}
@media(max-width:700px){.float-cta span:last-child{display:none}.float-cta{padding:15px}}

/* Rundgang: image grows to full screen, hotspots */
.walk{height:360vh;position:relative;background:#070605}
.walk-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.walk-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 55%,rgba(231,54,42,.16),transparent 70%)}
.walk-head{position:absolute;left:var(--pad);right:var(--pad);top:clamp(86px,13vh,130px);z-index:4;pointer-events:none;will-change:transform,opacity}
.walk-title{font:400 clamp(48px,9.4vw,170px)/.92 var(--serif);letter-spacing:-.04em;margin-top:18px;color:#efe7da}
.walk-title em{color:#ffd9a0;text-shadow:0 0 70px rgba(255,170,80,.5)}
.walk-frame{position:absolute;inset:0;--ix:30vw;--iy:30vh;clip-path:inset(calc(var(--iy) + 12vh) var(--ix) var(--iy) var(--ix) round 4px);overflow:hidden;will-change:clip-path}
.walk-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.35);will-change:transform}
.walk-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,5,.6),transparent 45%),radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(8,6,5,.45))}
.hot{position:absolute;left:var(--x);top:var(--y);width:0;height:0;opacity:0;transition:opacity .8s;z-index:5}
.walk.ready .hot{opacity:1}
.walk.ready .hot:nth-of-type(2){transition-delay:.15s}.walk.ready .hot:nth-of-type(3){transition-delay:.3s}.walk.ready .hot:nth-of-type(4){transition-delay:.45s}.walk.ready .hot:nth-of-type(5){transition-delay:.6s}
.hot i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:rgba(231,54,42,.28);box-shadow:inset 0 0 0 1.5px var(--red);animation:hotp 2.4s ease-out infinite;display:block}
.hot i::after{content:"";position:absolute;left:9px;top:9px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px rgba(255,255,255,.7)}
@keyframes hotp{0%{box-shadow:inset 0 0 0 1.5px var(--red),0 0 0 0 rgba(231,54,42,.6)}100%{box-shadow:inset 0 0 0 1.5px var(--red),0 0 0 26px rgba(231,54,42,0)}}
.hot span{position:absolute;left:26px;top:-26px;width:min(250px,56vw);padding:14px 16px;background:rgba(12,10,9,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#cfc5b6;font:300 13.5px/1.5 var(--sans);text-align:left;opacity:0;transform:translateY(8px) scale(.96);transform-origin:left top;pointer-events:none;transition:opacity .5s,transform .6s var(--ease)}
.hot.flip span{left:auto;right:26px;transform-origin:right top}
.hot span b{display:block;margin-bottom:5px;color:#fff;font:800 11px var(--grot);letter-spacing:.07em;text-transform:uppercase}
.hot span b::before{content:"";display:inline-block;width:7px;height:7px;background:var(--red);margin-right:8px}
.hot:hover span,.hot:focus-visible span,.hot.open span{opacity:1;transform:none}
.hot:hover,.hot:focus-visible,.hot.open{z-index:8}
.walk-hint{position:absolute;left:0;right:0;bottom:28px;text-align:center;color:#efe7da;opacity:0;transition:opacity .8s;z-index:6;text-shadow:0 2px 12px #000}
.walk.ready .walk-hint{opacity:.8}

/* Temperatur-Presets */
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;max-width:520px}
.presets button{padding:10px 16px 9px;border-radius:99px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#bdb3a4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .4s,color .4s,box-shadow .4s,transform .5s var(--ease)}
.presets button:hover{box-shadow:inset 0 0 0 1px var(--lc);color:#fff;transform:translateY(-2px)}
.presets button.on{background:var(--lc);color:#1b1612;box-shadow:0 0 26px -2px var(--lc)}
.presets+.ctrl{margin-top:26px}

/* FAQ */
.faq{padding-block:clamp(90px,12vw,190px)}
.faq-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,7vw,130px);align-items:start}
.faq-side{position:sticky;top:18vh}
.acc{border-bottom:1px solid var(--line)}
.acc-i{border-top:1px solid var(--line)}
.acc-i h3{font:inherit}
.acc-i button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(22px,2.4vw,34px) 0;text-align:left;font:400 clamp(21px,2.1vw,32px)/1.18 var(--serif);letter-spacing:-.015em;transition:color .35s,padding .5s var(--ease)}
.acc-i button:hover{color:var(--red);padding-left:10px}
.acc-i button i{position:relative;flex:none;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .4s,transform .6s var(--ease)}
.acc-i button i::before,.acc-i button i::after{content:"";position:absolute;left:12px;right:12px;top:18px;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.acc-i button i::after{transform:rotate(90deg)}
.acc-i.open button{color:var(--red)}
.acc-i.open button i{background:var(--red);color:#fff;transform:rotate(180deg)}
.acc-i.open button i::after{transform:rotate(0)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.acc-p>div{overflow:hidden}
.acc-i.open .acc-p{grid-template-rows:1fr}
.acc-p p{padding:0 60px 30px 0;max-width:58ch;color:var(--dim);opacity:0;transform:translateY(10px);transition:opacity .6s .15s,transform .7s .15s var(--ease)}
.acc-i.open .acc-p p{opacity:1;transform:none}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-side{position:static}}

/* Kontakt */
.kontakt{position:relative;background:#090706;padding-block:clamp(90px,12vw,190px);overflow:hidden}
.kontakt::before{content:"";position:absolute;left:-12vw;bottom:-18vw;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(rgba(231,54,42,.2),transparent 65%);pointer-events:none}
.kontakt::after{content:"";position:absolute;right:-10vw;top:-14vw;width:46vw;height:46vw;border-radius:50%;background:radial-gradient(rgba(255,170,80,.1),transparent 65%);pointer-events:none}
.k-grid{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,7vw,130px);align-items:start;z-index:1}
.k-side{position:sticky;top:16vh}
.k-list{list-style:none;margin-top:44px}
.k-list li{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-top:1px solid var(--line)}
.k-list li:last-child{border-bottom:1px solid var(--line)}
.k-list .mono{color:var(--red);font-size:10px}
.k-list a{font:400 clamp(20px,2vw,30px)/1.15 var(--serif);transition:color .3s,padding .5s var(--ease)}
.k-list a:hover{color:var(--glow);padding-left:12px}
.form{position:relative;display:flex;flex-direction:column;gap:clamp(24px,3vw,38px);padding:clamp(24px,3.4vw,52px);border-radius:6px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.f-row{border:0;min-width:0}
.f-row legend{color:var(--dim);margin-bottom:14px;padding:0;float:left;width:100%}
.f-row legend small{opacity:.6;letter-spacing:.08em;text-transform:none;font-size:11px;margin-left:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.chip span{display:inline-block;padding:11px 18px 10px;border-radius:99px;font:400 14px/1 var(--sans);color:#cfc5b6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.17);transition:background .35s,color .35s,box-shadow .35s,transform .5s var(--ease)}
.chip:hover span{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);transform:translateY(-2px)}
.chip input:checked+span{background:var(--red);color:#fff;box-shadow:0 8px 24px -8px rgba(231,54,42,.8)}
.chip input:focus-visible+span{outline:2px solid var(--glow);outline-offset:3px}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px)}
.field{position:relative;padding-top:12px}
.field input,.field textarea{display:block;width:100%;padding:20px 0 10px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.2);color:#fff;font:300 18px/1.4 var(--sans);outline:0;border-radius:0;resize:none;color-scheme:dark;transition:border-color .3s}
.field label{position:absolute;left:0;top:34px;color:var(--dim);font:300 17px var(--sans);pointer-events:none;transform-origin:left top;transition:transform .45s var(--ease),color .3s}
.field label small{opacity:.6;font-size:.78em}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,.field input[type=date]+label{transform:translateY(-24px) scale(.72);color:#ff8a7a}
.field input[type=date]:not(:focus):invalid{color:transparent}
.field input[type=date]{color:#fff}
.field i{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--red),#ff9a5a);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);box-shadow:0 0 14px 1px rgba(231,54,42,.8)}
.field input:focus~i,.field textarea:focus~i{transform:scaleX(1)}
.field.invalid input,.field.invalid textarea{border-color:#ff6b57}
.err{display:block;max-height:0;overflow:hidden;font:400 12px/1.4 var(--sans);font-style:normal;color:#ff8a7a;transition:max-height .4s,margin .4s;margin-top:0}
.invalid>.err,.consent.invalid>.err{max-height:40px;margin-top:8px}
.field.shake,.consent.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.count{position:absolute;right:0;bottom:-24px;color:var(--dim);font-size:10px}
.count b{color:#fff;font-weight:400}
.field-ta{margin-bottom:6px}
.consent{position:relative;display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;font-size:13px;line-height:1.55;color:var(--dim);cursor:pointer}
.consent input{position:absolute;opacity:0;width:22px;height:22px;left:0;top:0;cursor:pointer}
.consent .box{width:22px;height:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);display:grid;place-items:center;transition:background .35s,box-shadow .35s}
.consent .box svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s var(--ease)}
.consent input:checked~.box{background:var(--red);box-shadow:none}
.consent input:checked~.box svg{stroke-dashoffset:0}
.consent input:focus-visible~.box{outline:2px solid var(--glow);outline-offset:3px}
.consent a{color:#fff;border-bottom:1px solid var(--line)}
.consent .err{grid-column:2}
.f-send{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:4px}
.btn-lg{padding:20px 34px;font-size:15px}
.s-spin{display:none;width:16px;height:16px;margin-left:12px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;align-self:center}
.btn.loading .s-spin{display:inline-block}
.btn.loading:hover{color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.f-note{color:var(--dim);font-size:10px}
.f-done{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;background:#0a0807;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}
.f-done[hidden]{display:none}
.f-done h3{font:400 clamp(30px,3.4vw,52px)/1 var(--serif);letter-spacing:-.02em}
.f-done p{color:var(--dim);max-width:38ch}
.f-done a{color:#fff;border-bottom:1px solid var(--red)}
.tick{width:84px;height:84px;fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tick circle{stroke-dasharray:152;stroke-dashoffset:152;animation:dr .9s var(--ease) forwards}
.tick path{stroke:#fff;stroke-dasharray:40;stroke-dashoffset:40;animation:dr .5s .7s var(--ease) forwards}
@keyframes dr{to{stroke-dashoffset:0}}
@media(max-width:900px){.k-grid{grid-template-columns:1fr}.k-side{position:static}}
@media(max-width:560px){.f-two{grid-template-columns:1fr}}

/* Footer */
.foot-cols{display:grid;grid-template-columns:1fr 1fr 1.2fr 1.4fr;gap:clamp(20px,4vw,70px);padding-bottom:clamp(40px,6vw,90px)}
.foot-cols h4{color:var(--red);margin-bottom:16px}
.foot-cols a,.foot-cols p{display:block;font-size:15px;line-height:1.5;color:#cfc5b6;margin-bottom:8px;transition:color .3s,transform .5s var(--ease)}
.foot-cols a:hover{color:#fff;transform:translateX(6px)}
.foot-cols .dim{color:#7c7367;font-size:13px;margin-top:14px}
.foot-claim p{font:400 clamp(26px,3vw,46px)/1.05 var(--serif);letter-spacing:-.025em;color:#efe7da;text-align:right;margin:0}
.foot-claim em{color:#ffd9a0}
@media(max-width:800px){.foot-cols{grid-template-columns:1fr 1fr}.foot-claim{grid-column:1/-1}.foot-claim p{text-align:left}}

/* overrides */
.dm-sub{display:block;grid-template-rows:none;max-height:0;overflow:hidden;transition:max-height .8s var(--ease)}
.dm-i.exp .dm-sub{max-height:340px}
.walk-frame{clip-path:inset(var(--ty,42vh) var(--ix,30vw) var(--iy,12vh) var(--ix,30vw) round 4px)}