:root{--ink:#151c1d;--teal:#008c94;--aqua:#71e0dd;--paper:#f5f7f6;--line:#d8dfdd;--muted:#556364}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.65 'Segoe UI',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:5px}.skip{position:absolute;top:-70px;z-index:99;background:white;padding:12px}.skip:focus{top:0}.preview{background:#d8eeee;text-align:center;padding:7px 16px;font-size:13px;color:#244849}.header{position:sticky;top:0;z-index:20;background:rgba(245,247,246,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.nav{max-width:1440px;margin:auto;padding:15px 5%;display:flex;align-items:center;gap:32px}.brand{line-height:1;display:flex;align-items:center;gap:12px}.brand strong{font-size:27px;letter-spacing:.1em}.brand small{display:block;font-size:11px;letter-spacing:.16em;margin-top:7px}.brand .logo{width:53px}.links{margin-left:auto;display:flex;gap:25px;align-items:center;font-size:14px;font-weight:600}.links a:hover{color:var(--teal)}.nav-phone{border:1px solid #acbdbb;padding:10px 16px}.menu{display:none}.logo{aspect-ratio:1;position:relative;overflow:hidden;border-radius:50%;flex-shrink:0;background:#111615}.logo img{position:absolute;width:100%;height:auto;left:0;top:-61.12%}.wrap{max-width:1320px;margin:auto;padding:0 6%}.hero{background:var(--ink);color:white;overflow:hidden;position:relative}.hero-grid{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;min-height:690px;padding:70px 6% 60px;gap:50px}.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.19em;font-weight:700;color:var(--teal);margin:0 0 25px}.hero .eyebrow{color:var(--aqua)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,6.6vw,94px);line-height:1.02;letter-spacing:-.055em;font-weight:650;margin-bottom:28px}h1 em{font-style:normal;color:var(--aqua)}.hero-copy{max-width:490px;font-size:18px;color:#bbc8c8}.buttons{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:14px 23px;font-size:15px;font-weight:650;border:1px solid transparent;cursor:pointer;transition:background .2s,transform .2s}.btn:hover{transform:translateY(-3px)}.btn.primary{background:var(--aqua);color:#12292a}.btn.dark{background:var(--ink);color:white}.btn.outline{border-color:#647575;color:white}.hero-art{position:relative;padding:35px 0}.hero-art:before{content:'';position:absolute;inset:-60px -150px;border:1px solid #3a5353;transform:rotate(-30deg)}.hero-art .logo{width:100%;box-shadow:0 35px 80px #0006;animation:arrive 1.2s ease both}.art-caption{position:relative;display:flex;justify-content:space-between;align-items:center;margin:35px 0 0;color:#92b2b3;font-size:12px;letter-spacing:.16em;text-transform:uppercase}.hero-bottom{border-top:1px solid #344243;display:flex;justify-content:space-between;padding:20px 6%;font-size:13px;color:#a8baba;max-width:1440px;margin:auto}.ticker{background:var(--aqua);overflow:hidden;padding:17px 0}.ticker div{display:flex;width:max-content;gap:45px;animation:marquee 35s linear infinite;font-size:15px;letter-spacing:.08em;font-weight:650}.ticker span:after{content:' /';margin-left:45px;color:#21868b}.section{padding:100px 0}.section-head{display:grid;grid-template-columns:1.3fr 1fr;gap:65px;margin-bottom:50px;align-items:end}h2{font-size:clamp(35px,4.3vw,59px);line-height:1.12;letter-spacing:-.045em;margin-bottom:20px}h3{font-size:26px;line-height:1.25;letter-spacing:-.025em}.muted{color:var(--muted)}.note{border-left:3px solid var(--teal);padding:10px 16px;color:#4c6364;font-size:14px;background:#e8f1ef}.services{border-top:1px solid #9caeab}.service{display:grid;grid-template-columns:65px 1.15fr 1fr 40px;gap:20px;align-items:center;padding:30px 0;border-bottom:1px solid #b8c8c4;transition:padding .25s,background .25s}.service:hover{padding-left:18px;padding-right:18px;background:#e5efeb}.service .num{font-size:14px;color:var(--teal)}.service h3{margin:0}.service p{margin:0;font-size:15px;color:var(--muted)}.arrow{font-size:29px;color:var(--teal)}.about{background:#e3ece9}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.monogram{border-top:1px solid #96b2ac;border-bottom:1px solid #96b2ac;padding:45px 0}.monogram .big{font-size:clamp(70px,10vw,150px);line-height:1;letter-spacing:-.06em;font-weight:650;color:#007f85}.meta{font-size:14px;letter-spacing:.05em}.text-link{display:inline-block;border-bottom:1px solid var(--teal);padding-bottom:5px;font-weight:600;font-size:15px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:45px}.step{border-top:2px solid var(--teal);padding-top:20px}.step span{color:var(--teal);font-size:14px}.step h3{margin-top:22px}.empty{border:1px solid #b3c7c1;padding:35px;display:grid;grid-template-columns:1fr 1fr;gap:45px}.empty p:last-child{margin:0}.knowledge{background:white}.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.article{padding:28px;background:var(--paper);border-top:3px solid var(--teal);transition:transform .2s}.article:hover{transform:translateY(-5px)}.article small{display:block;color:var(--teal);margin-bottom:28px}.article h3{font-size:25px}.article .arrow{display:block;margin-top:25px}.cta{background:var(--teal);color:white;padding:75px 0}.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}.cta h2{margin-bottom:0;max-width:600px}.footer{background:var(--ink);color:#bac9c9;padding:60px 0 30px;font-size:14px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:35px}.footer strong{color:white;font-size:20px}.footer a:hover{text-decoration:underline}.footer small{display:block;border-top:1px solid #344243;margin-top:45px;padding-top:22px;color:#9aaead}.page-head{padding:70px 0 65px;background:#e3ece9}.page-head h1{font-size:clamp(42px,5.5vw,74px);max-width:1000px}.page-head p{max-width:720px;margin-bottom:0;font-size:20px;color:#49605e}.crumb{font-size:13px;margin-bottom:35px;color:#526865}.body-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:75px}.prose{max-width:780px}.prose h2{font-size:34px;margin-top:45px}.prose h2:first-child{margin-top:0}.prose li{margin-bottom:12px}.aside{padding:30px;background:#e3ece9;align-self:start}.aside h3{font-size:24px}.aside .btn{width:100%}details{border-bottom:1px solid #b5c6c2;padding:22px 0}summary{cursor:pointer;font-weight:600;font-size:19px}details p{margin:18px 0 0;color:var(--muted)}.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:flex;flex-direction:column;gap:8px;font-size:15px}.full{grid-column:1/-1}input,textarea,select{width:100%;border:1px solid #9aafaa;background:white;border-radius:0;padding:13px;color:var(--ink);min-width:0}textarea{min-height:150px;resize:vertical}.check{display:flex;align-items:start;gap:10px;font-size:14px}.check input{width:20px;height:20px;flex-shrink:0}.result{background:#d8eeee;padding:18px;border-left:3px solid var(--teal)}.reveal{opacity:1}.motion .reveal{opacity:0;transform:translateX(-35px);transition:opacity .7s,transform .7s}.motion .reveal:nth-child(even){transform:translateX(35px)}.motion .reveal.visible{opacity:1;transform:none}@keyframes arrive{from{opacity:0;transform:translateX(60px) rotate(5deg)}to{opacity:1;transform:none}}@keyframes marquee{to{transform:translateX(-50%)}}@media(min-width:1500px){.hero-grid{min-height:760px}}@media(max-width:900px){.links{gap:15px}.nav-phone{display:none}.hero-grid{gap:20px;min-height:600px;padding-top:60px}.hero-art{padding:25px 0}.section{padding:70px 0}.section-head,.about-grid{gap:35px}.service{grid-template-columns:35px 1.2fr 1fr 25px;gap:12px}.service h3{font-size:22px}.body-grid{gap:30px}.articles{gap:12px}.article{padding:20px}}@media(max-width:650px){.preview{font-size:12px}.nav{padding:12px 6%;justify-content:space-between}.brand strong{font-size:23px}.brand .logo{width:44px}.menu{display:block;border:1px solid #b8c8c4;background:transparent;padding:8px 13px;font-size:14px}.links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:22px 6%;border-bottom:1px solid var(--line);font-size:17px}.links.open{display:flex;flex-direction:column;align-items:stretch}.nav-phone{display:block}.hero-grid{grid-template-columns:1fr;gap:5px;padding-top:45px;padding-bottom:30px}.hero h1{font-size:60px}.hero-copy{font-size:16px;max-width:330px}.hero-art{width:68%;margin:15px auto 0;padding-bottom:0}.hero-art:before{inset:0 -140px}.art-caption{margin-top:20px;font-size:10px}.hero-bottom{font-size:11px;gap:25px}.hero-bottom span:last-child{max-width:115px;text-align:right}.eyebrow{font-size:11px}.section-head,.about-grid,.steps,.articles,.empty,.body-grid,.footer-grid{grid-template-columns:1fr;gap:25px}.section-head{margin-bottom:30px}.service{grid-template-columns:30px 1fr 25px;padding:23px 0}.service p{grid-column:2;grid-row:2}.service .arrow{grid-column:3;grid-row:1/3}.service h3{font-size:24px}.cta .wrap{display:block}.cta .buttons{margin-top:25px}.cta h2{font-size:38px}.empty{padding:25px}.monogram{padding:30px 0}.form{grid-template-columns:1fr}.page-head{padding:40px 0}.page-head p{font-size:18px}.footer-grid{gap:30px}.ticker{padding:12px 0}.ticker div{font-size:12px}.buttons .btn{padding:12px 17px;font-size:14px}.motion .reveal,.motion .reveal:nth-child(even){transform:translateY(20px)}.motion .reveal.visible{transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion .reveal,.motion .reveal:nth-child(even){opacity:1;transform:none}}
.service .num{display:flex;flex-direction:column;align-items:center;gap:7px}.service-icon{width:37px;height:37px}.hero-grid{grid-template-columns:1.05fr 1.15fr;gap:20px}.material-art{margin-right:-8%;margin-left:-10%;padding:0}.material-art:before{inset:-55px -120px;opacity:.7}.material-scene{position:relative;aspect-ratio:1.3;isolation:isolate;background:#0d1719;mask-image:linear-gradient(to right,transparent,#000 10%,#000 94%,transparent);overflow:visible}.tile{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;will-change:transform;transition:transform .12s linear}.tile-one{clip-path:polygon(0 33%,31% 33%,44% 100%,0 100%);transform:translate(calc(var(--travel,0)*-50px),calc(var(--travel,0)*45px)) rotate(calc(var(--travel,0)*-6deg))}.tile-two{clip-path:polygon(31% 16%,61% 16%,73% 85%,42% 85%);transform:translateY(calc(var(--travel,0)*-45px)) rotate(calc(var(--travel,0)*4deg))}.tile-three{clip-path:polygon(60% 0,100% 0,100% 70%,73% 70%);transform:translate(calc(var(--travel,0)*55px),calc(var(--travel,0)*-65px)) rotate(calc(var(--travel,0)*7deg))}.material-art .art-caption{margin:15px 8% 0}.hero-grid>div:first-child{position:relative;z-index:2}.ticker div{animation-iteration-count:1;animation-duration:35s}.ticker:hover div{animation-play-state:paused}@media(max-width:650px){.hero-grid{grid-template-columns:1fr}.material-art{width:112%;margin:0 -6%;padding-top:0}.material-scene{aspect-ratio:1.65}.material-art .art-caption{font-size:11px}.hero h1{font-size:clamp(49px,14vw,65px)}.hero-grid{padding-bottom:25px}.hero-copy{margin-bottom:0}.material-art:before{display:none}.service-icon{width:29px;height:29px}.service .num{grid-row:1/3}.service .num span{font-size:12px}}@media(prefers-reduced-motion:reduce){.tile{transform:none!important;will-change:auto}}
.material-scene{background:transparent;mask-image:radial-gradient(ellipse at center,#000 38%,transparent 74%)}.tile-one{clip-path:none;transform:translate(calc(var(--travel,0)*35px),calc(var(--travel,0)*-70px)) rotate(calc(var(--travel,0)*5deg)) scale(calc(1 + var(--travel,0)*.06))}.tile-two,.tile-three{display:none}.material-scene{aspect-ratio:1.28}.material-art .art-caption{color:#abc6c7}.ticker div{animation:none}.hero-art{animation:arrive 1.2s ease both}@media(max-width:650px){.material-scene{aspect-ratio:1.6}}
/* Individuelle Dachziegel-Choreografie: getrennte Ebenen für Eintritt, Schweben und Scrollweg. */
.kinetic-art{margin-right:-7%;margin-left:-2%;padding:0;animation:none;perspective:1000px}.kinetic-art:before{inset:0 -100px;border-color:#416365;transform:rotate(-24deg)}.kinetic-scene{height:520px;position:relative;perspective:1100px;transform-style:preserve-3d;pointer-events:none}.tile-flight{position:absolute;width:47%;height:80%;top:10%;will-change:transform;transform-style:preserve-3d}.tile-arrival{width:100%;height:100%;animation:tile-arrive 2.1s cubic-bezier(.16,.85,.26,1) both;transform-style:preserve-3d}.tile-float{width:100%;height:100%;object-fit:contain;filter:drop-shadow(15px 35px 19px #0007);animation:tile-hover 6s ease-in-out infinite;transform-style:preserve-3d;will-change:transform}.flight-1{left:-3%;z-index:3;transform:translate3d(calc(var(--travel,0)*-100px),calc(65px + var(--travel,0)*130px),55px) rotate(calc(-15deg - var(--travel,0)*24deg))}.flight-2{left:28%;z-index:2;transform:translate3d(0,calc(-20px - var(--travel,0)*160px),-20px) rotate(calc(7deg + var(--travel,0)*17deg))}.flight-3{left:58%;z-index:1;transform:translate3d(calc(var(--travel,0)*135px),calc(-85px - var(--travel,0)*90px),-95px) rotate(calc(20deg + var(--travel,0)*35deg))}.flight-2 .tile-arrival{animation-delay:.2s}.flight-3 .tile-arrival{animation-delay:.4s}.flight-2 .tile-float{animation-delay:-2s;animation-duration:7s}.flight-3 .tile-float{animation-delay:-4s;animation-duration:8s}.kinetic-art .art-caption{margin-top:5px;color:#b4cdcd;letter-spacing:.12em}.motion-toggle{font-size:12px;letter-spacing:0;border:1px solid #617c7d;background:#18282a;color:#c5dddd;padding:8px 11px;cursor:pointer}.motion-toggle:hover{background:#294647}.motion-paused .tile-float,.motion-paused .tile-arrival{animation-play-state:paused}.motion-paused .tile-flight{will-change:auto}.motion-paused .reveal{opacity:1!important;transform:none!important;transition:none!important}@keyframes tile-arrive{0%{opacity:0;transform:translate3d(200px,-150px,-250px) rotateY(-65deg) rotate(55deg) scale(.6)}30%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) rotateY(0) rotate(0) scale(1)}}@keyframes tile-hover{0%,100%{transform:translate3d(0,17px,0) rotateX(-5deg) rotateY(-10deg) rotate(-4deg)}50%{transform:translate3d(5px,-22px,45px) rotateX(7deg) rotateY(14deg) rotate(5deg)}}.hero-bottom span:last-child{animation:scroll-cue 2.5s ease-in-out infinite}@keyframes scroll-cue{50%{transform:translateY(5px);color:#e2ffff}}.motion-paused .hero-bottom span:last-child{animation-play-state:paused}h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}@media(max-width:900px) and (min-width:651px){.kinetic-scene{height:390px}.kinetic-art{margin-left:-7%}}@media(max-width:650px){.kinetic-art{width:100%;margin:30px 0 0}.kinetic-scene{height:330px}.kinetic-art:before{inset:40px -50px}.tile-flight{width:45%;height:85%}.flight-1{left:-1%;transform:translate3d(calc(var(--travel,0)*-35px),calc(28px + var(--travel,0)*45px),0) rotate(calc(-15deg - var(--travel,0)*20deg))}.flight-2{left:29%;transform:translate3d(0,calc(-5px - var(--travel,0)*70px),-10px) rotate(calc(6deg + var(--travel,0)*15deg))}.flight-3{left:58%;transform:translate3d(calc(var(--travel,0)*35px),calc(-45px - var(--travel,0)*40px),-45px) rotate(calc(18deg + var(--travel,0)*20deg))}.kinetic-art .art-caption{font-size:11px;letter-spacing:.05em;margin-top:10px}.motion-toggle{font-size:12px}.hero{overflow:hidden}}@media(prefers-reduced-motion:reduce){.tile-flight,.tile-float{will-change:auto}.tile-float,.tile-arrival{animation:none!important;transform:none!important}.flight-1{transform:translateY(45px) rotate(-15deg)}.flight-2{transform:translateY(-10px) rotate(7deg)}.flight-3{transform:translateY(-60px) rotate(20deg)}.motion-toggle{display:none}}
/* Rajski Markenraum: originale Marke, abstrakte Lichtlinien, drei räumliche Ebenen. */
.brand-art{margin-left:0;margin-right:-3%;perspective:1000px}.brand-art:before{display:none}.brand-scene{height:550px;position:relative;perspective:1000px;transform-style:preserve-3d;isolation:isolate}.brand-plane{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;will-change:transform}.brand-plane svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 8px #00ccd577)}.trace-base{stroke:#205157;stroke-width:1}.trace-light{stroke:#68ffff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:light-trace 8s cubic-bezier(.45,0,.25,1) infinite}.plane-back{transform:translate3d(calc(45px + var(--travel,0)*150px),calc(-70px - var(--travel,0)*85px),-170px) rotateX(24deg) rotateZ(calc(17deg + var(--travel,0)*25deg));opacity:.6}.plane-mid{transform:translate3d(calc(-55px - var(--travel,0)*130px),calc(20px + var(--travel,0)*75px),-65px) rotateX(15deg) rotateZ(calc(-18deg - var(--travel,0)*22deg));opacity:.8}.plane-front{transform:translate3d(calc(var(--travel,0)*45px),calc(65px + var(--travel,0)*100px),50px) rotateX(5deg) rotateZ(calc(-3deg + var(--travel,0)*12deg))}.plane-back .trace-light{animation-delay:-4s;stroke:#008b97}.plane-mid .trace-light{animation-delay:-2s;stroke:#04c6cb}.brand-core{position:absolute;width:66%;left:17%;top:16%;transform:translate3d(0,calc(var(--travel,0)*-130px),80px) rotateY(calc(var(--travel,0)*-25deg)) rotateZ(calc(var(--travel,0)*8deg));z-index:4;pointer-events:none}.brand-core .logo{width:100%;box-shadow:0 25px 65px #000b,0 0 35px #00bdc026;animation:brand-reveal 2.4s cubic-bezier(.15,.7,.2,1) both,brand-breathe 7s ease-in-out 2.4s infinite}.brand-axis{position:absolute;inset:4% -2%;display:flex;justify-content:space-between;align-items:flex-end;font-size:10px;letter-spacing:.24em;color:#678e90;pointer-events:none}.brand-axis span:first-child{align-self:flex-start}.brand-axis span:last-child{align-self:center;writing-mode:vertical-rl}.brand-art .art-caption{margin-top:8px}.motion-paused .trace-light,.motion-paused .brand-core .logo{animation-play-state:paused}.motion-paused .brand-plane,.motion-paused .brand-core{will-change:auto}@keyframes light-trace{0%{stroke-dashoffset:1;opacity:.1}15%{opacity:1}48%{stroke-dashoffset:0;opacity:1}70%{stroke-dashoffset:0;opacity:.7}95%,100%{stroke-dashoffset:-1;opacity:.15}}@keyframes brand-reveal{0%{opacity:0;transform:translateY(80px) rotateY(-55deg) rotateZ(-18deg) scale(.65);filter:blur(12px)}45%{opacity:.7}100%{opacity:1;transform:none;filter:blur(0)}}@keyframes brand-breathe{0%,100%{transform:translateY(8px) rotateY(-8deg) rotateZ(-2deg);box-shadow:0 25px 65px #000b,0 0 20px #00bdc022}50%{transform:translateY(-14px) rotateY(8deg) rotateZ(2deg);box-shadow:0 35px 75px #000b,0 0 60px #00bdc050}}@media(max-width:900px) and (min-width:651px){.brand-scene{height:400px}.brand-core{top:20%}}@media(max-width:650px){.brand-art{width:100%;margin:15px 0 0}.brand-scene{height:340px}.brand-core{width:67%;left:16.5%;top:17%;transform:translateY(calc(var(--travel,0)*-65px)) rotateY(calc(var(--travel,0)*-15deg))}.plane-back{transform:translate3d(calc(25px + var(--travel,0)*45px),-40px,-170px) rotateZ(calc(17deg + var(--travel,0)*20deg))}.plane-mid{transform:translate3d(calc(-25px - var(--travel,0)*45px),10px,-65px) rotateZ(calc(-18deg - var(--travel,0)*20deg))}.plane-front{transform:translate3d(0,calc(35px + var(--travel,0)*35px),0) rotateZ(calc(-3deg + var(--travel,0)*12deg))}.brand-axis{inset:7% 0;font-size:9px}.brand-art .art-caption{margin-top:5px;gap:10px;letter-spacing:0;font-size:11px}.hero .buttons{position:relative;z-index:5}}@media(prefers-reduced-motion:reduce){.trace-light{animation:none!important;stroke-dashoffset:0;opacity:.7}.brand-core .logo{animation:none!important;transform:none!important}.brand-plane,.brand-core{will-change:auto}.brand-core{transform:none}}
.hero h1{hyphens:none;overflow-wrap:normal}.hero h1 em{display:block}.brand-core .logo{transform-origin:center}.brand-axis{font-size:12px;letter-spacing:.16em}@media(max-width:650px){.brand-axis{font-size:10px}}
.brand-core .logo img{width:102%;left:-1%;top:-62.34%}
html.motion-paused{scroll-behavior:auto}
/* Ergänzende Materialbühne – drei Bildlagen fügen sich scrollgebunden zusammen. */
.detail-section{--assembly:0;--top-shift:-145px;--middle-shift:0px;--bottom-shift:145px;background:#101e20;color:#fff;padding:85px 0 70px;overflow:hidden;position:relative}.detail-layout{max-width:1450px;display:grid;grid-template-columns:1.4fr 1fr;gap:75px;align-items:center}.detail-visual{min-width:0}.detail-model{height:610px;position:relative;isolation:isolate;perspective:1100px;pointer-events:none}.detail-layer{position:absolute;left:0;top:calc(50% - 155px);width:100%;height:310px;overflow:hidden;will-change:transform;transform-origin:50% 65%}.detail-layer img{display:block;position:absolute;width:100%;height:300%;object-fit:fill;left:0;max-width:none}.layer-foundation{z-index:1;transform:translateY(var(--bottom-shift))}.layer-foundation img{top:-200%}.layer-battens{z-index:2;transform:translateY(var(--middle-shift))}.layer-battens img{top:-100%}.layer-cover{z-index:3;transform:translateY(var(--top-shift))}.layer-cover img{top:0}.detail-caption{font-size:12px;color:#9ab5b7;margin:5px 0 0;text-align:center}.detail-copy .eyebrow{color:#71e0dd}.detail-copy h2{font-size:clamp(40px,4.7vw,67px);line-height:1.08;margin-bottom:30px}.detail-copy>p:not(.eyebrow):not(.detail-stage):not(.detail-small){color:#b7c9ca;font-size:18px}.detail-track{height:2px;background:#375256;margin-top:42px}.detail-track-fill{display:block;height:100%;background:#71e0dd;transform:scaleX(var(--assembly));transform-origin:left}.detail-stage{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.09em;color:#8cabad;margin-top:13px}.detail-replay{margin:25px 0 0;display:flex;gap:45px;align-items:center;background:transparent;color:#bcf2f0;border:1px solid #527476;padding:12px 19px;font-size:14px;cursor:pointer}.detail-replay:hover{background:#233e40;border-color:#71e0dd}.detail-replay span{font-size:24px;line-height:1}.detail-small{font-size:13px;color:#829fa1;margin-top:24px;max-width:400px}.detail-section[data-playing="true"] .detail-replay{border-color:#71e0dd}.detail-section[data-playing="true"] .detail-replay span{animation:replay-spin 2s linear infinite}@keyframes replay-spin{to{transform:rotate(360deg)}}.motion-paused .detail-layer{will-change:auto}.motion-paused .detail-replay span{animation-play-state:paused}@media(max-width:1000px){.detail-layout{gap:35px}.detail-model{height:540px}.detail-layer{height:240px;top:calc(50% - 120px)}.detail-stage{font-size:9px;letter-spacing:0}}@media(max-width:650px){.detail-section{padding:55px 0}.detail-layout{grid-template-columns:1fr;gap:20px}.detail-copy{grid-row:1}.detail-copy h2{font-size:43px;margin-bottom:22px}.detail-copy>p:not(.eyebrow):not(.detail-stage):not(.detail-small){font-size:16px}.detail-track{margin-top:25px}.detail-stage{font-size:10px}.detail-model{height:470px;margin-top:-5px}.detail-layer{height:190px;top:calc(50% - 95px)}.detail-caption{font-size:11px}.detail-small{font-size:12px}.detail-replay{margin-top:20px}.detail-section .eyebrow{margin-bottom:18px}}@media(prefers-reduced-motion:reduce){.detail-layer{will-change:auto}.detail-replay span{animation:none!important}}
/* Ausschnitte folgen den tatsächlich gelieferten Bildgrenzen. */
.detail-layer{mask-image:linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent)}.layer-cover img{height:293.13%;top:-4.58%}.layer-battens img{height:313.47%;top:-111.22%}.layer-foundation img{height:300.59%;top:-200.59%}
/* Sichtbare Scrollbühne: erst vollständig ansehen, dann über zusätzliche Strecke fügen. */
.detail-section{padding:0;height:calc(var(--pin-height,650px) + var(--detail-distance,1300px));overflow:clip;overflow-clip-margin:0}.detail-layout{position:sticky;top:var(--pin-top,100px);height:var(--pin-height,650px);min-height:0;padding-top:16px;padding-bottom:16px}.detail-model{height:var(--model-height,540px)}.detail-layer{top:calc(50% - 155px)}.detail-copy h2{font-size:clamp(38px,4.2vw,62px)}.detail-copy .eyebrow{margin-bottom:20px}.detail-copy>p:not(.eyebrow):not(.detail-stage):not(.detail-small){font-size:17px}.detail-track{margin-top:24px}.detail-replay{margin-top:20px}.detail-small{margin-top:18px}@media(max-width:1000px){.detail-layer{top:calc(50% - 120px)}}@media(max-width:650px){.detail-layout{display:grid;grid-template-rows:auto minmax(0,1fr);gap:0;align-items:start;padding-top:8px;padding-bottom:8px}.detail-copy{grid-row:1;display:grid;grid-template-columns:1fr auto;gap:7px 12px;align-items:center}.detail-copy .eyebrow{grid-column:1/-1;font-size:10px;margin:0}.detail-copy h2{font-size:30px;line-height:1.05;margin:0;grid-column:1}.detail-copy h2 br{display:none}.detail-copy>p:not(.eyebrow):not(.detail-stage):not(.detail-small){display:none}.detail-copy .detail-small{display:none}.detail-track{grid-column:1/-1;grid-row:3;margin-top:4px}.detail-stage{grid-column:1/-1;grid-row:4;margin:0;font-size:9px}.detail-replay{grid-column:2;grid-row:2;margin:0;padding:9px 11px;font-size:12px;gap:9px}.detail-replay span{font-size:20px}.detail-visual{grid-row:2;align-self:center;width:100%}.detail-model{height:var(--model-height,400px);margin:0}.detail-layer{top:calc(50% - 95px)}.detail-caption{margin:0;font-size:10px}.detail-copy .eyebrow{font-size:11px}}@media(prefers-reduced-motion:reduce){.detail-section{height:auto}.detail-layout{position:relative;top:auto;height:auto;min-height:550px;padding-top:40px;padding-bottom:40px}.detail-model{height:450px}@media(max-width:650px){.detail-layout{min-height:0}.detail-model{height:350px}}}
.roof-diagram{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 25px #0005)}.build-layer{will-change:transform;transform-box:view-box;transform-origin:center}.roof-legend{list-style:none;padding:0;margin:20px 0;display:grid;gap:5px;font-size:14px;color:#c1d1d1;line-height:1.4}.roof-legend li{display:flex;gap:12px;align-items:center}.roof-legend b{display:inline-grid;place-items:center;width:23px;height:23px;flex-shrink:0;border:1px solid #4b8b90;border-radius:50%;font-size:12px;color:#90ebeb}.detail-small a{color:#b8e8e8;text-decoration:underline}.detail-copy h2{font-size:clamp(35px,3.6vw,52px);margin-bottom:18px}.detail-copy>p:not(.eyebrow):not(.detail-stage):not(.detail-small){font-size:15px;margin-bottom:10px}.detail-track{margin-top:17px}.detail-small{font-size:12px}.detail-replay{padding:9px 16px;margin-top:12px}.detail-section{overflow:visible}.detail-layout{isolation:isolate}.detail-stage{font-size:10px}.motion-paused .build-layer{will-change:auto}@media(max-width:650px){.roof-legend{grid-column:1/-1;grid-row:5;font-size:10px;gap:2px;margin:2px 0 0;grid-template-columns:1fr 1fr;line-height:1.2}.roof-legend li{gap:5px}.roof-legend b{width:17px;height:17px;font-size:10px}.detail-copy h2{font-size:28px;margin:0}.detail-copy .detail-small{display:block;grid-column:1/-1;grid-row:6;margin:0;font-size:0;line-height:1}.detail-copy .detail-small a{font-size:11px}.detail-model{height:calc(var(--model-height,400px) - 70px)}.detail-stage{font-size:8px}}@media(prefers-reduced-motion:reduce){.build-layer{will-change:auto}}
.build-layer>circle,.build-layer>text{opacity:var(--marker-opacity,1)}
@media(max-width:650px){.roof-legend{font-size:11px}.detail-stage{font-size:9px}}
/* Bei deaktivierten Skripten bleibt die Darstellung als statisches Schaubild zugänglich. */
html:not(.motion) .detail-section{height:auto}html:not(.motion) .detail-layout{position:relative;top:auto;min-height:600px;height:auto;padding-top:40px;padding-bottom:40px}html:not(.motion) .detail-model{height:560px}

/* Nonmodal, in-flow notice: never covers or locks site content. */
.privacy-notice{max-width:1148px;margin:24px auto;padding:24px 28px;background:#151c1d;color:#f3f7f7;border-left:4px solid #71e0dd;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px}
.privacy-notice[hidden]{display:none}
.privacy-notice h2{font-size:1.15rem;line-height:1.35;letter-spacing:0;margin:0 0 8px;color:inherit}
.privacy-notice p{font-size:1rem;line-height:1.55;margin:0;max-width:690px;color:#e0eded}
.privacy-notice-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.privacy-notice-actions button,.privacy-notice-actions a{font:inherit;font-size:.9rem;line-height:1.4;min-height:44px;padding:10px 16px;text-align:center;cursor:pointer}
.privacy-notice-actions button{background:#71e0dd;color:#151c1d;border:1px solid #71e0dd;font-weight:650}
.privacy-notice-actions a{color:#f3f7f7;border:1px solid #889a9b;text-decoration:none}
.privacy-notice-actions :focus-visible{outline:3px solid #fff;outline-offset:4px}
.privacy-reopen{display:block;background:none;border:0;border-bottom:1px solid currentColor;color:#dbe9e9;font:inherit;font-size:.9rem;line-height:1.5;min-height:44px;margin-top:20px;padding:8px 0;cursor:pointer;text-align:left}
.privacy-reopen:focus-visible{outline:3px solid #71e0dd;outline-offset:4px}
@media(max-width:1200px){.privacy-notice{margin:20px 5vw}}
@media(max-width:650px){.privacy-notice{grid-template-columns:1fr;padding:20px;gap:18px}.privacy-notice-actions{align-items:stretch}.privacy-notice p{font-size:.95rem}}