@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@400;500&display=swap');
:root{--ink:#101916;--paper:#f3f0e9;--muted:#6b6d68;--line:#d6d2c9;--white:#fff;--max:1440px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:15px;line-height:1.45}a{color:inherit;text-decoration:none}
.site-header{height:64px;position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;color:#fff;background:linear-gradient(rgba(0,0,0,.32),transparent);border:0}.logo{font-size:18px;letter-spacing:.28em;font-weight:500}.site-header nav{display:flex;gap:28px;text-transform:none;font-size:10px;letter-spacing:.02em}.site-header nav a:hover,.text-link:hover{opacity:.65}.header-cta,.button{display:inline-flex;gap:12px;align-items:center;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:600;padding:11px 15px}.header-cta{background:#101916;color:#fff}.button span,.header-cta span{font-size:14px}
.hero{min-height:600px}.photo{background-position:center;background-repeat:no-repeat}.hero-photo{position:relative;background-position:center 55%}.hero-photo:after,.final-cta:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.18) 60%,rgba(0,0,0,.03))}.hero-overlay{position:relative;z-index:1;color:#fff;max-width:600px;padding:150px 6.5vw 80px}.eyebrow{font-size:9px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#7c7c76;margin:0 0 12px}.eyebrow.light{color:rgba(255,255,255,.76)}h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.02;margin:0 0 18px}h1{font-size:clamp(54px,6.2vw,88px)}h2{font-size:clamp(37px,4vw,58px)}h3{font-size:15px;line-height:1.2;margin:9px 0 5px;font-weight:500}.hero-overlay>p:not(.eyebrow){max-width:430px;font-size:14px}.light-button{background:#fff;color:var(--ink);margin-top:18px}
.section{padding:78px 4.5vw;max-width:1500px;margin:auto}.center{text-align:center;max-width:930px;margin:0 auto}.center>p:not(.eyebrow){color:var(--muted);max-width:760px;margin:0 auto 32px}.products{padding-bottom:82px}.product-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.product-card img{width:100%;height:auto;display:block;filter:saturate(.9)}.product-card p{font-size:10px;color:var(--muted);line-height:1.35;margin:0 0 9px}.product-card span,.text-link{font-size:8px;text-transform:uppercase;letter-spacing:.13em;font-weight:600}
.dark{background:var(--ink);color:#fff;max-width:none}.split-section{display:grid;grid-template-columns:1.42fr 1fr}.dark-copy{padding:75px 5.5vw}.split-image{min-height:450px;background-size:contain;background-position:center}.benefit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:42px}.benefit-grid div{display:flex;flex-direction:column;gap:6px}.benefit-grid b,.technical-grid b{font-size:10px}.benefit-grid span,.technical-grid span{font-size:9px;color:rgba(255,255,255,.64);line-height:1.35}
.two-col{display:grid;grid-template-columns:1fr 1fr;padding:0;max-width:none}.spec-image{min-height:430px}.copy{padding:70px 7vw;align-self:center}.copy p{color:var(--muted);max-width:580px;font-size:13px}.copy .strong{color:var(--ink);font-weight:600;font-size:12px}.reasons{padding-top:70px;padding-bottom:70px}.reason-grid{max-width:1300px;margin:42px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}.reason-grid small{display:block;border:1px solid #bbb6ac;width:25px;height:25px;border-radius:50%;text-align:center;padding-top:4px;font-size:8px}.reason-grid h3{font-size:12px}.reason-grid p,.projects p{font-size:10px;color:var(--muted)}
.projects{max-width:1500px;padding-top:70px;padding-bottom:70px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.project-grid img{width:100%;height:auto}.project-grid h3{font-size:11px;margin-bottom:2px}.projects blockquote{max-width:900px;margin:48px auto 0;text-align:center;font-family:'Playfair Display',Georgia,serif;font-size:18px;line-height:1.35}.projects cite{display:block;font-family:'DM Sans',Arial,sans-serif;font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-style:normal;margin-top:13px}
.technical{padding:70px 5vw}.technical .center>p:not(.eyebrow){color:rgba(255,255,255,.62);margin-bottom:38px}.technical-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1400px;margin:auto}.technical-grid div{border-top:1px solid rgba(255,255,255,.22);padding-top:13px}.technical-grid span{display:block;margin-top:7px}
.process{display:grid;grid-template-columns:1fr 1.45fr;gap:55px;padding-top:68px;padding-bottom:68px}.process-intro p{max-width:520px;color:var(--muted);font-size:12px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}.steps>div{border-top:1px solid #bbb6ac;padding-top:12px}.steps small{display:flex;width:24px;height:24px;border:1px solid #aaa;border-radius:50%;align-items:center;justify-content:center;margin-top:-25px;background:var(--paper);font-size:9px}.steps h3{font-size:11px}.steps p{font-size:9px;color:var(--muted)}
.warranty{display:grid;grid-template-columns:1fr 1fr}.warranty-copy{padding:60px 7vw}.warranty-copy p{max-width:540px;color:rgba(255,255,255,.65);font-size:11px}.warranty-image{min-height:260px;background-size:contain;background-position:center}.light-link{color:#fff}.location{display:grid;grid-template-columns:1fr 1.4fr;padding:0;max-width:none}.location-image{min-height:230px}.location .copy{padding:48px 7vw}.location .copy p{font-size:11px}.final-cta{min-height:360px;position:relative;display:flex;align-items:center;padding:55px 6.5vw;background-position:center}.final-cta>div{position:relative;z-index:1;color:#fff}.final-cta h2{font-size:clamp(48px,5.4vw,76px)}
.site-footer{background:var(--ink);color:#fff;padding:46px 4.5vw 20px;display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:35px;position:relative}.site-footer p{color:rgba(255,255,255,.55);font-size:9px}.site-footer>div:nth-child(2){display:flex;flex-direction:column;gap:7px;font-size:9px}.legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:14px;display:flex;gap:18px;font-size:8px;color:rgba(255,255,255,.45)}
@media(max-width:1000px){.site-header nav{gap:15px}.product-grid{grid-template-columns:repeat(4,1fr)}.benefit-grid{grid-template-columns:repeat(3,1fr)}.reason-grid{grid-template-columns:repeat(3,1fr)}.technical-grid{grid-template-columns:repeat(3,1fr)}.process,.two-col,.split-section,.warranty,.location{grid-template-columns:1fr}.spec-image{min-height:360px}.steps{grid-template-columns:repeat(2,1fr)}.split-image{min-height:360px}.site-footer{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.site-header{height:58px}.site-header nav{display:none}.header-cta{padding:9px 11px;font-size:8px}.hero{min-height:640px}.hero-overlay{padding:130px 24px 55px}.section{padding:60px 22px}.product-grid{grid-template-columns:1fr 1fr}.benefit-grid,.reason-grid,.technical-grid,.steps{grid-template-columns:1fr}.two-col{padding:0}.copy,.dark-copy,.warranty-copy{padding:55px 22px}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:8px}.project-grid{grid-template-columns:1fr}.projects blockquote{font-size:19px}.site-footer{grid-template-columns:1fr;padding:42px 22px 20px}.legal{grid-column:auto;flex-wrap:wrap}.final-cta{min-height:420px;padding:50px 22px}}

/* RÄHMEN image rule: preserve complete source photography; never crop. */
img{height:auto;object-fit:contain;}
.photo,.split-image,.spec-image,.warranty-image,.location-image,.final-cta,.hero-photo,.product-hero-image{background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;}


/* IMAGE PLACEHOLDERS — temporary artwork slots. No photographic assets are loaded. */
/* Manufacturer photography: preserve the full source composition. No cropping. */
.image-frame{position:relative;overflow:hidden;background:#e9e9e6}
.image-frame img{display:block;width:100%;height:auto;max-width:100%}
.product-card .image-frame,.article-grid .image-frame{min-height:0}
.product-card .image-frame img,.article-grid .image-frame img{width:100%;height:auto}
.hero-photo.image-frame{position:relative;min-height:0;color:rgba(255,255,255,.9);background:#303330}
.hero-photo.image-frame img{width:100%;height:auto}
.hero-photo.image-frame .hero-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5vw,80px);background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.48) 100%)}
.split-image.image-frame,.spec-image.image-frame,.warranty-image.image-frame,.location-image.image-frame{min-height:0}
.final-cta.image-frame{position:relative;min-height:0;background:#303330;color:#fff}
.final-cta.image-frame img{width:100%;height:auto}
.final-cta.image-frame>div{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5vw,80px);background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.48) 100%)}
.product-hero-image.image-frame{background:#e9e9e6}
.product-hero-image.image-frame img{display:block;width:100%;height:auto;max-width:100%}
@media(max-width:1000px){.hero-photo.image-frame .hero-overlay,.final-cta.image-frame>div{padding:35px}}
@media(max-width:650px){.hero-photo.image-frame .hero-overlay,.final-cta.image-frame>div{padding:24px}}
@media(max-width:1000px){.hero-photo{min-height:560px}.product-hero-image{min-height:420px}.split-image,.spec-image{min-height:360px}}
@media(max-width:650px){.hero-photo{min-height:640px}.product-hero-image{min-height:420px}.article-grid {min-height:220px}.final-cta{min-height:420px}}


/* MOBILE OPTIMISATION v2 — full-frame imagery retained; no cropping */
.mobile-menu{display:none}
@media (max-width: 650px){
  html{overflow-x:hidden}
  body{overflow-x:hidden;font-size:15px}
  .site-header{position:absolute;height:62px;padding:0 18px;gap:10px}
  .site-header .logo{font-size:16px;letter-spacing:.22em}
  .site-header nav{display:none}
  .header-cta{margin-left:auto;padding:9px 10px;font-size:7.5px;white-space:nowrap}
  .mobile-menu{display:inline-flex;width:38px;height:38px;border:1px solid rgba(255,255,255,.55);background:rgba(16,25,22,.55);color:#fff;align-items:center;justify-content:center;cursor:pointer;font-size:20px;line-height:1}
  .mobile-menu-panel{display:none;position:fixed;inset:62px 0 auto 0;z-index:50;background:var(--ink);color:#fff;padding:12px 22px 24px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .mobile-menu-panel.open{display:block}
  .mobile-menu-panel a{display:block;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13px}
  .mobile-menu-panel .mobile-start{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 16px;background:#fff;color:var(--ink);border:0}
  .hero{min-height:0}
  .hero-photo.image-frame{display:flex;flex-direction:column;background:#303330}
  .hero-photo.image-frame img{width:100%;height:auto;max-width:none;order:0}
  .hero-photo.image-frame .hero-overlay{position:relative;inset:auto;order:1;padding:34px 22px 38px;background:var(--ink);display:block}
  .hero-photo.image-frame .hero-overlay h1{font-size:48px;line-height:.98;margin-bottom:16px}
  .hero-photo.image-frame .hero-overlay>p:not(.eyebrow){font-size:13px;margin-bottom:0}
  .hero-photo.image-frame .hero-overlay .button{margin-top:20px}
  .section{padding:54px 20px}
  h2{font-size:38px;line-height:1.03}
  .center>p:not(.eyebrow){font-size:13px}
  .products{padding-bottom:60px}
  .product-grid{grid-template-columns:1fr;gap:30px}
  .product-card .image-frame{background:#e9e9e6}
  .product-card .image-frame img{width:100%;height:auto}
  .product-card h3{font-size:16px;margin-top:12px}
  .product-card p{font-size:11px;margin-bottom:8px}
  .dark-copy,.copy,.warranty-copy{padding:48px 20px}
  .split-image.image-frame,.spec-image.image-frame,.warranty-image.image-frame,.location-image.image-frame{min-height:0}
  .split-image.image-frame img,.spec-image.image-frame img,.warranty-image.image-frame img,.location-image.image-frame img{display:block;width:100%;height:auto}
  .benefit-grid,.reason-grid,.technical-grid,.steps{grid-template-columns:1fr;gap:24px}
  .benefit-grid{margin-top:30px}
  .two-col{padding:0}
  .two-col .copy{padding-top:45px;padding-bottom:55px}
  .reason-grid{margin-top:30px}
  .projects{padding-top:55px;padding-bottom:55px}
  .section-head{margin-bottom:24px}
  .section-head h2{margin-bottom:12px}
  .project-grid{grid-template-columns:1fr;gap:28px}
  .project-grid .image-frame img{width:100%;height:auto}
  .projects blockquote{font-size:18px;margin-top:38px}
  .technical{padding:52px 20px}
  .technical-grid{margin-top:28px}
  .process{gap:38px;padding-top:52px;padding-bottom:52px}
  .process-intro h2{font-size:38px}
  .steps>div{padding-top:12px}
  .warranty{grid-template-columns:1fr}
  .warranty-image{order:2}
  .location{grid-template-columns:1fr;padding:0}
  .location .copy{padding:45px 20px 55px}
  .final-cta.image-frame{display:flex;flex-direction:column;min-height:0;padding:0;background:#303330}
  .final-cta.image-frame img{width:100%;height:auto;order:0}
  .final-cta.image-frame>div{position:relative;inset:auto;order:1;padding:38px 20px 45px;background:var(--ink);display:block}
  .final-cta h2{font-size:43px}
  .site-footer{grid-template-columns:1fr;gap:24px;padding:40px 20px 18px}
  .site-footer>div:nth-child(2){gap:0}
  .site-footer>div:nth-child(2) a{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .legal{grid-column:auto;gap:12px}
  .product-hero{grid-template-columns:1fr;min-height:0}
  .product-hero-image{min-height:0}
  .product-hero-image img{width:100%;height:auto}
  .product-hero-copy{padding:48px 20px 55px}
  .product-hero-copy h1{font-size:45px}
  .product-hero-copy>p:not(.eyebrow){font-size:16px}
  .product-points{grid-template-columns:1fr;margin-top:42px;gap:24px}
  .two-col-lite{grid-template-columns:1fr;gap:34px}
  .lead{font-size:18px}
}
@media (max-width:380px){
  .site-header{padding:0 13px}.header-cta{font-size:7px;padding:8px}.mobile-menu{width:34px;height:34px}
  .hero-photo.image-frame .hero-overlay h1{font-size:43px}
  h2,.process-intro h2{font-size:34px}
}

/* RESPONSIVE REBUILD — fluid layouts across desktop, laptop, tablet and mobile */
html{width:100%;max-width:100%;overflow-x:clip}
body{width:100%;max-width:100%;overflow-x:clip}
img,video,iframe,svg{max-width:100%}
img{height:auto}
main,section,header,footer,nav,div{min-width:0}
.hero-overlay,.copy,.dark-copy,.warranty-copy,.product-hero-copy,.process-intro,.center{overflow-wrap:anywhere}
.section{width:100%;padding-left:clamp(20px,4.5vw,72px);padding-right:clamp(20px,4.5vw,72px)}
.product-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr))}
.benefit-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.reason-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr))}
.technical-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.project-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))}
.product-points{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.product-hero,.two-col,.split-section,.warranty,.location,.process,.two-col-lite{min-width:0}
.product-hero>* ,.two-col>* ,.split-section>* ,.warranty>* ,.location>* ,.process>* ,.two-col-lite>*{min-width:0}
.product-hero-copy{padding:clamp(32px,6vw,100px) clamp(22px,5vw,80px)}
.product-hero-copy h1{font-size:clamp(38px,4.7vw,78px);overflow-wrap:anywhere}
.hero-overlay h1{font-size:clamp(42px,6.2vw,88px);overflow-wrap:anywhere}
.google-form-wrap{width:100%;max-width:100%;overflow:hidden}
.google-form-wrap iframe{display:block;width:100%;max-width:100%;border:0}
.site-header{gap:clamp(10px,2vw,28px)}
.site-header nav{flex-wrap:wrap;align-items:center}
.header-cta{white-space:nowrap;flex-shrink:0}
@media(max-width:1100px){
 .site-header{padding-left:24px;padding-right:24px}
 .site-header nav{gap:16px}
 .product-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
 .product-hero-copy{padding:44px clamp(24px,4vw,55px)}
 .process{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:30px}
 .two-col-lite{gap:40px}
}
@media(max-width:800px){
 .site-header{padding-left:20px;padding-right:20px}
 .site-header nav{gap:12px}
 .site-header nav a{font-size:10px}
 .header-cta{padding:10px 11px}
 .product-hero{grid-template-columns:1fr!important;min-height:0!important}
 .product-hero-image{min-height:0!important}
 .product-hero-image img{display:block;width:100%;height:auto}
 .product-hero-copy{padding:42px 24px 52px}
 .process{grid-template-columns:1fr;gap:34px}
 .two-col-lite{grid-template-columns:1fr;gap:32px}
 .section-head{gap:18px}
}
@media(max-width:650px){
 .site-header{padding-left:16px;padding-right:16px}
 .site-header nav{display:none}
 .logo{font-size:16px;letter-spacing:.2em}
 .header-cta{font-size:8px;letter-spacing:.07em;padding:9px 10px}
 .mobile-menu{flex-shrink:0}
 .section{padding:48px 20px}
 .hero-photo.image-frame .hero-overlay{padding:30px 20px 36px}
 .hero-photo.image-frame .hero-overlay h1{font-size:clamp(38px,11vw,48px)}
 h2,.process-intro h2{font-size:clamp(32px,8vw,40px)}
 .product-grid{grid-template-columns:1fr 1fr;gap:24px 14px}
 .benefit-grid,.reason-grid,.technical-grid,.steps,.product-points{grid-template-columns:1fr}
 .product-hero-copy{padding:36px 20px 46px}
 .product-hero-copy h1{font-size:clamp(36px,9vw,46px)}
 .product-hero-copy>p:not(.eyebrow){font-size:16px}
 .project-grid{grid-template-columns:1fr}
 .section-head{display:block}
 .site-footer{grid-template-columns:1fr;gap:22px}
 .legal{flex-wrap:wrap;line-height:1.7}
 .google-form-wrap iframe{height:1784px;width:100%;max-width:100%}
 .final-cta h2{font-size:clamp(34px,9vw,44px)}
}
@media(max-width:390px){
 .site-header{padding-left:12px;padding-right:12px}
 .logo{font-size:14px;letter-spacing:.15em}
 .header-cta{font-size:7px;padding:8px 7px;gap:5px}
 .mobile-menu{width:32px;height:34px}
 .product-grid{grid-template-columns:1fr}
 .section{padding-left:16px;padding-right:16px}
}

/* RÄHMEN visual refinement: match the approved editorial homepage reference. */
:root{--ink:#101916;--paper:#f3f0e9;--muted:#686b66;--line:#d6d2c9}
.hero.hero-photo.image-frame{position:relative;display:block;aspect-ratio:2.62/1;width:100%;min-height:420px;max-height:690px;overflow:hidden;background:#252c27}
.hero.hero-photo.image-frame>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 54%}
.hero-photo.image-frame:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.34) 35%,rgba(0,0,0,.04) 72%);pointer-events:none}
.hero-photo.image-frame .hero-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:none;width:100%;padding:clamp(34px,5.3vw,82px) 6.5vw;background:none}
.hero-photo.image-frame .hero-overlay>*{max-width:min(100%,440px)}
.hero-photo.image-frame .hero-overlay h1{font-size:clamp(44px,4.2vw,68px);line-height:.98;letter-spacing:-.025em;margin:0 0 14px;overflow-wrap:normal}
.hero-photo.image-frame .hero-overlay .eyebrow{font-size:clamp(8px,.7vw,10px);margin-bottom:12px}
.hero-photo.image-frame .hero-overlay>p:not(.eyebrow){font-size:clamp(12px,.95vw,15px);line-height:1.4;max-width:360px;margin:0}
.hero-photo.image-frame .hero-overlay .button{margin-top:22px}
.product-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(9px,1.15vw,17px)}
.product-card .image-frame{aspect-ratio:1.25/1;overflow:hidden;background:#e8e6df}
.product-card .image-frame img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.benefit-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.line-icon{display:block;width:clamp(30px,3vw,44px);height:clamp(30px,3vw,44px);margin:0 0 10px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.88}
.benefit-grid .line-icon,.technical-grid .line-icon{color:#e8e6df}
.benefit-grid div{align-items:flex-start;min-width:0}
.benefit-grid b,.technical-grid b{font-size:clamp(10px,.85vw,12px);line-height:1.3}
.benefit-grid span,.technical-grid span{font-size:clamp(9px,.72vw,11px);line-height:1.42}
.technical-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.7vw,25px)}
.technical-grid div{border-top:0;padding-top:0;min-width:0}
.technical-grid .line-icon{margin-bottom:14px}
.technical-grid span{display:block;margin-top:7px}
.spec-framework{max-width:none;background:#ebe8e0}
.spec-framework .center{max-width:850px}
.framework-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#d5d1c8;margin:36px auto 0;max-width:1250px;border:1px solid #d5d1c8}
.framework-grid article{background:var(--paper);padding:clamp(22px,3vw,42px)}
.framework-grid .framework-featured{background:#e0e4dc}
.framework-grid h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(23px,2vw,30px);line-height:1.12;margin:12px 0}
.framework-grid p:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.55}
.framework-grid ul{list-style:none;padding:16px 0 0;margin:18px 0 0;border-top:1px solid var(--line)}
.framework-grid li{font-size:11px;line-height:1.5;padding:7px 0 7px 17px;position:relative;border-bottom:1px solid rgba(214,210,201,.65)}
.framework-grid li:before{content:"—";position:absolute;left:0;color:#777c73}
.framework-note{font-size:10px;color:var(--muted);max-width:1000px;margin:18px auto 0;text-align:center}
.projects blockquote{font-size:clamp(17px,1.5vw,22px);max-width:780px}
@media(max-width:1100px){
 .hero.hero-photo.image-frame{aspect-ratio:2.15/1;min-height:410px}
 .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .technical-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}
 .framework-grid{margin-top:28px}
}
@media(max-width:800px){
 .hero.hero-photo.image-frame{aspect-ratio:1.65/1;min-height:390px}
 .hero-photo.image-frame .hero-overlay{padding:34px 5vw}
 .hero-photo.image-frame .hero-overlay h1{font-size:clamp(42px,6vw,58px)}
 .hero-photo.image-frame .hero-overlay>*{max-width:min(58%,410px)}
 .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .benefit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .reason-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .framework-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
 .hero.hero-photo.image-frame{display:flex;flex-direction:column;aspect-ratio:auto;min-height:0;max-height:none;overflow:hidden}
 .hero.hero-photo.image-frame>img{position:relative;inset:auto;width:100%;height:auto;max-width:100%;aspect-ratio:1.35/1;object-fit:cover;object-position:center 54%;order:0}
 .hero-photo.image-frame:after{display:none}
 .hero-photo.image-frame .hero-overlay{position:relative;inset:auto;order:1;width:100%;padding:30px 22px 34px;background:var(--ink);display:block}
 .hero-photo.image-frame .hero-overlay>*{max-width:100%}
 .hero-photo.image-frame .hero-overlay h1{font-size:clamp(40px,10vw,48px);line-height:.98;margin-bottom:14px}
 .hero-photo.image-frame .hero-overlay .eyebrow{margin-bottom:10px}
 .hero-photo.image-frame .hero-overlay>p:not(.eyebrow){font-size:13px;max-width:340px}
 .hero-photo.image-frame .hero-overlay .button{margin-top:18px}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 .product-card .image-frame{aspect-ratio:1.15/1}
 .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
 .technical-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
 .line-icon{width:34px;height:34px;margin-bottom:9px}
 .framework-grid article{padding:25px 22px}
 .projects blockquote{font-size:18px}
}
@media(max-width:390px){
 .product-grid{grid-template-columns:1fr}
 .product-card .image-frame{aspect-ratio:1.5/1}
 .benefit-grid{grid-template-columns:1fr 1fr}
 .hero-photo.image-frame .hero-overlay h1{font-size:40px}
}


/* RÄHMEN CTA + HEADER CLEANUP v4
   Explicitly reset the header surface and strengthen primary actions. */
html, body { margin:0; }
.site-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height:68px;
  height:68px;
  padding:0 clamp(18px,4.5vw,72px) !important;
  gap:clamp(14px,2vw,30px) !important;
  position:absolute !important;
  top:0; left:0; right:0;
  z-index:100 !important;
  background:linear-gradient(180deg,rgba(12,18,16,.50),rgba(12,18,16,0)) !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
.site-header::before, .site-header::after { content:none !important; display:none !important; }
.site-header nav {
  display:flex !important;
  align-items:center !important;
  justify-content:center;
  flex:1 1 auto;
  flex-wrap:nowrap !important;
  gap:clamp(14px,2vw,30px) !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-size:11px !important;
  line-height:1.2;
  letter-spacing:.04em !important;
  text-transform:none;
}
.site-header nav a { display:inline-block; padding:10px 0; color:#fff !important; white-space:nowrap; }
.site-header .logo { flex:0 0 auto; color:#fff !important; text-decoration:none; }
.header-cta, .button {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:48px;
  padding:14px 20px !important;
  background:#f3f0e9 !important;
  color:#101916 !important;
  border:1px solid #f3f0e9 !important;
  border-radius:0 !important;
  box-shadow:0 5px 18px rgba(0,0,0,.16);
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.1;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.header-cta { flex:0 0 auto; min-height:46px; padding:13px 18px !important; }
.button.dark-button { background:#101916 !important; color:#fff !important; border-color:#101916 !important; }
.button.light-button { background:#f3f0e9 !important; color:#101916 !important; border-color:#f3f0e9 !important; }
.header-cta span, .button span { font-size:17px !important; line-height:1; transition:transform .18s ease; }
.header-cta:hover, .button:hover { background:#d9e3dc !important; color:#101916 !important; border-color:#d9e3dc !important; box-shadow:0 8px 22px rgba(0,0,0,.22); transform:translateY(-2px); }
.header-cta:hover span, .button:hover span { transform:translateX(3px); }
.mobile-menu { display:none; }
.mobile-menu-panel { border-top:0 !important; }
/* Remove accidental divider/strip styling around the top navigation. */
.site-header, .site-header nav, .site-header nav a { outline:none; }
@media(max-width:800px) and (min-width:651px) {
  .site-header { padding-left:22px !important; padding-right:22px !important; }
  .site-header nav { gap:13px !important; font-size:10px !important; }
  .header-cta { padding:12px 14px !important; font-size:9px !important; }
}
@media(max-width:650px) {
  .site-header {
    height:64px !important; min-height:64px !important;
    padding:0 14px !important; gap:10px !important;
    background:linear-gradient(180deg,rgba(12,18,16,.58),rgba(12,18,16,.12)) !important;
  }
  .site-header nav { display:none !important; }
  .site-header .logo { font-size:14px !important; letter-spacing:.16em !important; }
  .header-cta { margin-left:auto; min-height:40px; padding:10px 11px !important; gap:7px; font-size:8px !important; letter-spacing:.08em !important; }
  .header-cta span { font-size:15px !important; }
  .mobile-menu {
    display:inline-flex !important; flex:0 0 38px; width:38px; height:38px;
    align-items:center; justify-content:center; padding:0;
    color:#fff !important; background:rgba(16,25,22,.72) !important;
    border:1px solid rgba(255,255,255,.72) !important; border-radius:0 !important;
    font-size:20px; line-height:1; cursor:pointer;
  }
  .mobile-menu-panel { top:64px !important; }
  .hero-photo.image-frame .hero-overlay .button { min-height:48px; }
}
@media(max-width:380px) {
  .site-header { padding:0 10px !important; gap:7px !important; }
  .site-header .logo { font-size:12px !important; letter-spacing:.13em !important; }
  .header-cta { padding:9px 8px !important; font-size:7px !important; gap:5px; }
  .mobile-menu { flex-basis:34px; width:34px; height:36px; }
}


/* RÄHMEN HEADER FIX v5: hide the mobile menu panel by default on every viewport.
   Reveal it only when the mobile menu is opened on small screens. */
.mobile-menu-panel { display: none !important; }
@media (max-width: 650px) {
  .mobile-menu-panel.open { display: block !important; }
}


/* RÄHMEN HEADER FIX v6: prevent the mobile navigation panel appearing in desktop flow. */
.mobile-menu-panel { display: none !important; }
@media (max-width: 650px) {
  .mobile-menu-panel.open { display: block !important; }
}


/* V10: swap the colour treatments of the accountability and project-start sections. */
.warranty{background:var(--paper);color:var(--ink)}
.warranty-copy .eyebrow{color:var(--muted)}
.warranty-copy p{color:var(--muted)}
.warranty-copy .light-link{color:var(--ink)}
.warranty-copy .light-link:hover{opacity:.65}
.process{background:var(--ink);color:#fff;max-width:none;padding-left:4.5vw;padding-right:4.5vw}
.process-intro .eyebrow{color:rgba(255,255,255,.68)}
.process-intro p{color:rgba(255,255,255,.68)}
.process .steps>div{border-top-color:rgba(255,255,255,.3)}
.process .steps small{background:var(--ink);border-color:rgba(255,255,255,.55);color:#fff}
.process .steps h3{color:#fff}
.process .steps p{color:rgba(255,255,255,.65)}
.process .dark-button{background:var(--paper);color:var(--ink)}
.process .dark-button:hover{background:#d9e3dc;color:var(--ink)}
@media(max-width:650px){.process{padding-left:22px;padding-right:22px}}

/* Regional feature: a true two-column website section. The photograph and all copy remain separate HTML elements. */
.van-location{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:0;padding:0!important;max-width:none!important;min-height:640px;background:#f3f0e8;overflow:hidden;}
.van-location-photo{min-width:0;min-height:640px;overflow:hidden;background:#171b1c;}
.van-location-photo img{display:block;width:100%;height:100%;min-height:640px;object-fit:cover;object-position:center center;}
.van-location-copy{align-self:center;max-width:900px;padding:64px clamp(36px,6.2vw,120px);}
.van-location-copy .eyebrow{margin:0 0 24px;font-size:11px;line-height:1.5;letter-spacing:.25em;font-weight:500;color:#777a76;}
.van-location-copy h2{max-width:760px;margin:0 0 24px;font-family:var(--serif,Georgia,serif);font-size:clamp(42px,4.25vw,78px);font-weight:400;line-height:1.04;letter-spacing:-.035em;color:#101916;}
.van-location-copy>p:not(.eyebrow){max-width:700px;margin:0;color:#858781;font-size:15px;line-height:1.7;}
@media(max-width:1000px){.van-location{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);min-height:540px}.van-location-photo,.van-location-photo img{min-height:540px}.van-location-copy{padding:44px clamp(28px,4vw,54px)}.van-location-copy h2{font-size:clamp(38px,5vw,58px)}}
@media(max-width:650px){.van-location{grid-template-columns:1fr;min-height:0}.van-location-photo{min-height:300px;height:300px}.van-location-photo img{min-height:300px;height:300px;object-position:center 45%}.van-location-copy{padding:38px 24px 48px}.van-location-copy .eyebrow{font-size:9px;letter-spacing:.2em;margin-bottom:18px}.van-location-copy h2{font-size:clamp(38px,10vw,52px);line-height:1.06;margin-bottom:20px}.van-location-copy>p:not(.eyebrow){font-size:14px;line-height:1.65;}}



/* V13: make the process section's primary call to action prominent and place it below all four steps. */
.process{grid-template-rows:auto auto;column-gap:55px;row-gap:34px}
.process .steps{grid-column:2;grid-row:1}
.process-cta-row{grid-column:1 / -1;grid-row:2;display:flex;justify-content:center;align-items:center;padding-top:8px}
.process .button.process-cta{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-width:min(460px,100%);
  min-height:82px;
  padding:25px 48px!important;
  background:#fff!important;
  color:#101916!important;
  border:1px solid #fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  font-size:14px!important;
  letter-spacing:.16em!important;
  font-weight:700!important;
}
.process .button.process-cta span{font-size:28px!important}
.process .button.process-cta:hover{background:#e6e9e3!important;border-color:#e6e9e3!important;color:#101916!important;transform:translateY(-2px)}
@media(max-width:1000px){
 .process{grid-template-rows:auto auto auto}
 .process .steps{grid-column:1 / -1;grid-row:2}
 .process-cta-row{grid-row:3}
}
@media(max-width:650px){
 .process .button.process-cta{width:100%;min-width:0;min-height:70px;padding:20px 24px!important;font-size:12px!important}
 .process .button.process-cta span{font-size:24px!important}
}


/* PROJECT GALLERY — consistent image proportions across all three cards. */
.project-grid .image-frame{aspect-ratio:3/2;overflow:hidden;background:#e9e6df}
.project-grid .image-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.project-grid article:first-child .image-frame img{object-position:72% center}
@media(max-width:650px){.project-grid .image-frame{aspect-ratio:3/2}.project-grid article:first-child .image-frame img{object-position:72% center}}


/* V16: hero image full bleed and uncropped. Remove the narrow side gutters and preserve the complete photograph. */
html, body { margin: 0 !important; overflow-x: clip; }
.hero.hero-photo.image-frame {
  display: block !important; width: 100vw !important; max-width: none !important;
  margin-left: calc(50% - 50vw) !important; margin-right: 0 !important;
  aspect-ratio: auto !important; min-height: 0 !important; max-height: none !important;
  overflow: hidden; background: #252c27;
}
.hero.hero-photo.image-frame > img {
  position: relative !important; inset: auto !important; display: block;
  width: 100% !important; height: auto !important; max-width: none !important;
  aspect-ratio: auto !important; object-fit: contain !important; object-position: center !important;
}
.hero-photo.image-frame:after { inset: 0; }
.hero-photo.image-frame .hero-overlay {
  position: absolute !important; inset: 0 !important; width: 100% !important;
  max-width: none !important; justify-content: center !important;
}
@media (max-width: 800px) {
  .hero.hero-photo.image-frame { aspect-ratio: auto !important; min-height: 0 !important; max-height: none !important; }
  .hero.hero-photo.image-frame > img { position: relative !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; }
}
@media (max-width: 650px) {
  .hero.hero-photo.image-frame { display: flex !important; flex-direction: column; width: 100vw !important; margin-left: calc(50% - 50vw) !important; }
  .hero.hero-photo.image-frame > img { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; }
  .hero-photo.image-frame:after { display: none; }
  .hero-photo.image-frame .hero-overlay { position: relative !important; inset: auto !important; width: 100% !important; }
}

/* V17: desktop hero is a viewport-height composition with a stable text anchor. */
@media (min-width: 801px) {
  .hero.hero-photo.image-frame {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    height: calc(100vh - 86px) !important;
    height: calc(100svh - 86px) !important;
    min-height: 520px !important;
    max-height: 820px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #252c27;
  }
  .hero.hero-photo.image-frame > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 54% !important;
  }
  .hero-photo.image-frame:after {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.34) 35%, rgba(0,0,0,.04) 72%) !important;
    pointer-events: none;
  }
  .hero.hero-photo.image-frame .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 6.5vw !important;
    background: none !important;
  }
  .hero.hero-photo.image-frame .hero-overlay > * { max-width: 430px !important; }
}
/* Mobile deliberately uses a stacked image-and-copy layout for legibility. */
@media (max-width: 800px) {
  .hero.hero-photo.image-frame {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin-left: calc(50% - 50vw) !important;
    overflow: hidden !important;
  }
  .hero.hero-photo.image-frame > img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.5 / 1 !important;
    object-fit: cover !important;
    object-position: center 54% !important;
    order: 0 !important;
  }
  .hero-photo.image-frame:after { display: none !important; }
  .hero.hero-photo.image-frame .hero-overlay {
    position: relative !important;
    inset: auto !important;
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    padding: 34px 24px 38px !important;
    background: var(--ink) !important;
  }
  .hero.hero-photo.image-frame .hero-overlay > * { max-width: 100% !important; }
}

/* V27: photographic panels fill their responsive placeholders consistently. */
.split-section > .split-image.image-frame,
.two-col > .spec-image.image-frame {
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 430px;
  height: 100%;
  overflow: hidden;
  background: #e9e6df;
}
.split-section > .split-image.image-frame img,
.two-col > .spec-image.image-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 1000px) {
  .split-section > .split-image.image-frame,
  .two-col > .spec-image.image-frame { min-height: 360px; height: 360px; }
}
@media (max-width: 650px) {
  .split-section > .split-image.image-frame,
  .two-col > .spec-image.image-frame { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
}

/* Desktop typography refinement: improve readability without changing the mobile design. */
@media (min-width: 801px) {
  body { font-size: 16px; line-height: 1.6; }
  .hero-overlay > p:not(.eyebrow) { font-size: 16px; line-height: 1.6; }
  .center > p:not(.eyebrow) { font-size: 16px; line-height: 1.65; }
  .copy p, .copy .strong { font-size: 16px; line-height: 1.65; }
  .copy .strong { font-size: 15px; }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .product-card h3 { font-size: 17px; line-height: 1.3; }
  .product-card p { font-size: 14px; line-height: 1.55; }
  .product-card span, .text-link { font-size: 10px; line-height: 1.4; }
  .benefit-grid { gap: clamp(18px, 2vw, 30px); }
  .benefit-grid b, .technical-grid b { font-size: 13px; line-height: 1.4; }
  .benefit-grid span, .technical-grid span { font-size: 14px; line-height: 1.55; }
  .reason-grid h3 { font-size: 16px; line-height: 1.3; }
  .reason-grid p, .projects p { font-size: 14px; line-height: 1.6; }
  .project-grid h3 { font-size: 16px; line-height: 1.35; }
  .projects blockquote { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5; }
  .projects cite { font-size: 10px; }
  .process-intro p { font-size: 16px; line-height: 1.65; }
  .steps h3 { font-size: 15px; line-height: 1.35; }
  .steps p { font-size: 14px; line-height: 1.55; }
  .warranty-copy p { font-size: 15px; line-height: 1.65; }
  .location .copy p { font-size: 15px; line-height: 1.65; }
  .site-footer p { font-size: 13px; line-height: 1.55; }
  .site-footer > div:nth-child(2) { font-size: 12px; line-height: 1.6; }
  .legal { font-size: 10px; line-height: 1.5; }
  .framework-grid p:not(.eyebrow) { font-size: 15px; line-height: 1.6; }
  .framework-grid li { font-size: 14px; line-height: 1.55; }
  .framework-note { font-size: 13px; line-height: 1.55; }
  .eyebrow { font-size: 10px; }
}

/* V34: show the complete house with a restrained amount of sky and lawn. Match the image's native landscape ratio instead of vertically cropping it. */
.two-col > .spec-image.image-frame {
  aspect-ratio: 1664 / 945 !important;
  min-height: 0 !important;
  height: auto !important;
}
.two-col > .spec-image.image-frame img {
  object-fit: cover !important;
  object-position: center center !important;
}
@media (max-width: 1000px) {
  .two-col > .spec-image.image-frame {
    aspect-ratio: 1664 / 945 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}
@media (max-width: 650px) {
  .two-col > .spec-image.image-frame {
    aspect-ratio: 1664 / 945 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}