/* TOPAL V2: original logo, three fields, service symbols, production contact and consent */
.logo{width:305px}
.hero-grid{grid-template-columns: minmax(0,1fr) minmax(0,1.12fr);min-height:565px}
.hero-copy{padding:65px 35px 65px 0}
.hero h1{font-size:clamp(38px,3.5vw,57px)}
.triad{position:relative;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));min-height:565px;margin-right:calc((min(1180px,100vw - 48px) - 100vw)/2);overflow:hidden}
.triad-panel{position:relative;min-width:0;background:#253244;border-left:4px solid rgba(255,255,255,.7);transform:skewX(-3deg) scale(1.05);overflow:hidden}
.triad-panel:first-child{border-left:0}
.triad-panel:nth-child(1){background-position:center,55% center}.triad-panel:nth-child(2){background-position:center,50% center}.triad-climate{background-position:center,center}
.triad-caption{position:absolute;left:14px;right:10px;bottom:34px;text-align:center;font-weight:850;font-size:clamp(13px,1.5vw,20px);line-height:1.3;color:white;text-shadow:0 2px 10px rgba(0,0,0,.7);transform:skewX(3deg)}
.triad-symbol{display:grid;place-items:center;margin:0 auto 7px;width:48px;height:48px;background:rgba(12,27,47,.64);border:1px solid rgba(255,255,255,.55);border-radius:12px}
.service-icon{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:#fff0f0;color:#d92331}
.icon-sanitary,.icon-climate{background:#eaf1ff;color:#154db2}.icon-cleaning{background:#edf0f4;color:#24384e}
.service-card:before{display:none}.service-card h3{margin:18px 0 11px}.service-link{display:inline-block;margin-top:20px;text-decoration:none;color:#154db2;font-size:13px;font-weight:800}.service-link:hover{text-decoration:underline}
.plain-email{overflow-wrap:anywhere}.email-text{display:block;color:#bfcbd7;overflow-wrap:anywhere;margin-top:11px;font-size:12px}
.trap{position:absolute!important;left:-10000px!important;max-height:1px!important;overflow:hidden!important}
.form-alert{padding:14px 17px;border-radius:8px;font-size:14px;line-height:1.5;margin:0 0 28px}.form-ok{background:#e8f6ed;color:#16522f}.form-bad{background:#fff0ef;color:#a12d25}
.map-card{margin-top:30px;border-top:1px solid #435365;padding-top:25px}.map-card h2{margin:0 0 12px;font-size:17px;color:white}.map-placeholder{padding:16px;background:#25374b;border:1px solid #4b6077;border-radius:10px}.map-placeholder p{font-size:12px;color:#d0dce7;margin:0 0 14px}.map-placeholder .btn{width:100%;font-size:12px}.map-frame{height:225px;border-radius:10px;overflow:hidden;background:#25374b}.map-frame iframe{border:0;width:100%;height:100%;display:block}.map-settings{margin-top:11px;border:none;padding:0;background:none;color:#e3eafa;text-decoration:underline;font-size:12px;cursor:pointer}.map-frame[hidden],.map-placeholder[hidden]{display:none!important}
body.consent-open{overflow:hidden}.consent{z-index:70}
.footer-muted a{color:inherit}
@media(max-width:1120px){.hero-grid{grid-template-columns:1fr 1fr}.triad{margin-right:0;min-height:540px}.triad-caption{left:5px;right:5px;font-size:13px}}
@media(max-width:800px){.hero-grid{display:flex;flex-direction:column}.triad{width:100%;min-height:370px;margin:0}.triad-panel{transform:skewX(-2deg) scale(1.03)}.triad-caption{font-size:clamp(12px,3vw,19px)}.hero-copy{padding:58px 0 45px}.nav-cta{display:none}}
@media(max-width:520px){.triad{min-height:280px}.triad-caption{bottom:20px;font-size:12px}.triad-symbol{height:39px;width:39px}.triad-symbol svg{width:23px}.hero-copy{padding:36px 0}.hero h1{font-size:38px}}

/* V2.1 fix: real image elements instead of unreliable CSS custom property URLs */
.triad-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:skewX(3deg) scale(1.12);z-index:0}
.triad-panel:nth-child(1) .triad-photo{object-position:55% 50%}
.triad-panel:nth-child(2) .triad-photo{object-position:50% 50%}
.triad-panel:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,18,36,.02) 12%,rgba(6,18,36,.15) 51%,rgba(6,18,36,.86) 100%)}
.triad-caption{z-index:2}

/* V2.2: Balanced, centered responsive layout; full-width three-trade picture band. */
.hero-grid.container{width:100%;max-width:none;display:flex;flex-direction:column-reverse;min-height:0}
.hero-copy{width:min(1380px,calc(100% - 64px));margin:0 auto;padding:36px 0 42px;display:flex;justify-content:space-between;align-items:center;gap:48px}
.hero-text{min-width:0;max-width:850px}
.hero h1{font-size:clamp(32px,3.3vw,48px);margin:10px 0 8px;line-height:1.14}
.hero p{font-size:16px;line-height:1.55;margin:0;max-width:760px}
.hero-actions{flex:0 0 auto;justify-content:flex-end}
.triad{width:100%;max-width:100%;height:clamp(290px,25vw,420px);min-height:0;margin:0;overflow:hidden;grid-template-columns:repeat(3,minmax(0,1fr))}
.triad-panel{transform:skewX(-3deg) scale(1.045);isolation:isolate}
.triad-photo{transform:skewX(3deg) scale(1.12)}
.triad-panel:after{background:linear-gradient(180deg,rgba(6,18,36,0) 18%,rgba(6,18,36,.04) 56%,rgba(6,18,36,.8) 100%)}
.triad-caption{bottom:24px;font-size:clamp(16px,1.35vw,21px);transform:skewX(3deg)}
.triad-symbol{background:rgba(12,27,47,.75)}
@media(min-width:1400px){.container{width:min(1380px,calc(100% - 80px))}}
@media(max-width:1040px){.hero-copy{gap:20px;flex-direction:column;align-items:flex-start}.hero-actions{justify-content:flex-start}}
@media(max-width:800px){.hero-grid.container{display:flex;flex-direction:column-reverse;width:100%}.hero-copy{width:min(680px,calc(100% - 36px));padding:31px 0 38px}.triad{width:100%;height:310px;min-height:0}.triad-caption{bottom:15px;font-size:14px}.hero h1{font-size:clamp(32px,6vw,42px)}}
@media(max-width:520px){.triad{height:225px}.triad-caption{font-size:12px;left:3px;right:3px;bottom:12px}.triad-symbol{height:36px;width:36px}.triad-symbol svg{width:20px}.hero-copy{padding:25px 0 32px}.hero p{font-size:14px}.hero-actions{width:100%}.hero-actions .btn{padding:0 13px;font-size:12px}}

/* V3 reference home: screenshot-matched structure, no synthetic contact information. */
:root{--red:#df1e2e;--blue:#0954b4;--navy:#182637}
body{overflow-x:hidden}
.container{width:min(1440px,calc(100% - 64px))}
.topline{height:2px}
.topnav{min-height:81px;gap:20px}
.logo{width:220px;max-width:29vw}
.navlinks{gap:24px}
.navlinks a{font-size:13px;font-weight:770}
.navlinks a[aria-current=page]{border-bottom:2px solid var(--red);padding-bottom:7px}
.nav-actions{gap:18px}
.nav-cta{font-size:13px;min-height:43px;border-radius:6px}
.langswitch a{padding:8px 10px}
.reference-hero{width:100%;line-height:0;overflow:hidden;background:#e9edf1}
.reference-hero-image{display:block;width:100%;height:auto;max-height:430px;object-fit:cover}
.reference-mobile-panels{display:grid;grid-template-columns:repeat(3,1fr);height:330px}
.reference-mobile-panels.de-panels{display:none}
.reference-mobile-panel{position:relative;background-position:center;background-size:cover;color:#fff}
.ref-heating{background-image:url('fussbodenheizung.png')}
.ref-sanitary{background-image:url('bad.png')}
.ref-climate{background-image:url('climate-illustration.webp')}
.reference-mobile-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,30,64,.52),rgba(8,18,32,.86));padding:30px 22px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;line-height:1.4}
.ref-heating .reference-mobile-shade{background:linear-gradient(100deg,rgba(30,4,10,.45),rgba(161,8,27,.87))}
.ref-service-icon svg{height:35px;width:35px;stroke-width:2.6}
.reference-mobile-shade strong{font-size:clamp(16px,2.3vw,26px);margin:8px 0}
.reference-mobile-shade ul{padding:0;margin:0;list-style:none;text-align:left}
.reference-mobile-shade li{font-size:clamp(10px,1vw,15px);font-weight:570;white-space:nowrap;margin:7px 0}
.reference-mobile-shade li:before{content:'✓';margin-right:7px}
.reference-main{background:#f8fafc;padding:17px 0 16px}
.reference-container{width:min(1480px,calc(100% - 80px));margin:0 auto}
.reference-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:13px}
.reference-intro-copy{min-width:0;max-width:900px}
.reference-intro .eyebrow{margin:0 0 4px;color:#0949ad;font-size:11px;letter-spacing:.1em;font-weight:900;display:flex}
.reference-intro h1{font-size:clamp(26px,2.75vw,42px);letter-spacing:-.048em;line-height:1.12;margin:0 0 4px;font-weight:850}
.reference-intro-copy>p:last-child{font-size:clamp(13px,1.15vw,17px);color:#596579;line-height:1.35;margin:0}
.reference-ctas{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.reference-ctas .btn{white-space:nowrap;padding:0 18px;font-size:13px;min-height:46px;border-radius:6px}
.reference-section-label{display:flex;align-items:center;gap:11px;margin:0 0 9px;color:#0750b1;font-weight:850;font-size:12px;letter-spacing:.085em;text-transform:uppercase}
.reference-section-label:before{content:'';display:block;background:var(--red);width:24px;height:3px;flex:0 0 auto}
.reference-services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.reference-service-card{padding:13px 14px;display:flex;gap:13px;align-items:flex-start;min-width:0;border:1px solid #e2e7ec;border-radius:8px;background:white;box-shadow:0 4px 13px rgba(20,38,59,.045)}
.reference-service-card .service-icon{flex:0 0 55px;height:55px;border-radius:9px}
.reference-service-card .service-icon svg{width:32px;height:32px;stroke-width:2.6}
.reference-service-card h2{font-size:15px;letter-spacing:-.02em;margin:1px 0 5px;font-weight:820;line-height:1.17}
.reference-service-card p{margin:0;color:#596578;font-size:12px;line-height:1.48;min-height:34px}
.reference-service-card a{display:inline-block;margin-top:9px;font-size:11px;color:var(--red);font-weight:800;text-decoration:none}
.reference-service-card a:hover{text-decoration:underline}
.reference-contact{display:grid;grid-template-columns:57% 43%;align-items:stretch;scroll-margin-top:12px}
.reference-contact-dark{background:#192737;color:#fff;padding:24px 22px max(25px,3vw) max(30px,calc((100vw - 1480px)/2));}
.reference-contact-inner{display:grid;grid-template-columns:minmax(160px, .95fr) minmax(220px,1.65fr);gap:20px;height:100%}
.reference-contact .reference-section-label{color:#f7f8fb;font-size:15px;letter-spacing:0;text-transform:none;margin-bottom:18px}
.reference-contact .reference-section-label:before{width:22px}
.reference-business{border-right:1px solid rgba(255,255,255,.16);padding-right:20px}
.ref-business-row{display:flex;gap:12px;align-items:flex-start;margin:0 0 23px}
.ref-round-symbol{display:grid;place-items:center;background:#e21c30;color:#fff;border-radius:50%;font-size:23px;width:40px;height:40px;flex:0 0 40px;font-weight:700}
.ref-business-row strong{font-size:12px;display:block;margin:0 0 7px}
.ref-business-row a{display:block;color:white;font-size:13px;text-decoration:none;font-weight:750;margin-top:5px}
.ref-business-row address{font-size:13px;line-height:1.65;font-style:normal;color:#dce6f2}
.reference-business .btn{font-size:12px;padding:0 13px;min-height:40px}
.reference-map{min-width:0}
.ref-map-frame,.ref-map-consent{height:210px;border-radius:6px;overflow:hidden;background:#273c54}
.ref-map-frame iframe{display:block;width:100%;height:100%;border:0}
.ref-map-frame[hidden],.ref-map-consent[hidden]{display:none!important}
.ref-map-consent{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:25px;border:1px solid rgba(255,255,255,.2);text-align:center}
.ref-map-consent p{font-size:13px;color:#d5e2f1;margin:0 0 12px;line-height:1.5}
.ref-map-consent .btn{font-size:12px;min-height:40px}
.ref-map-settings{margin-top:10px;border:0;background:none;color:#d6e3f1;font-size:11px;text-decoration:underline;cursor:pointer}
.reference-contact-light{background:#fff;padding:24px max(30px,calc((100vw - 1480px)/2)) 28px 34px;min-width:0}
.reference-form-wrap{max-width:650px}
.reference-form-wrap .reference-section-label{color:#162131;margin-bottom:10px}
.ref-form-desc{color:#626f7f;font-size:12px;margin:-4px 0 12px}
.reference-form-wrap .form{gap:10px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.reference-form-wrap .field{gap:3px}
.reference-form-wrap .field label{font-size:11px}
.reference-form-wrap .field input,.reference-form-wrap .field textarea,.reference-form-wrap .field select{min-height:35px;font-size:12px;border-radius:5px;padding:6px 10px}
.reference-form-wrap .field textarea{min-height:76px}
.reference-form-wrap .field.full{grid-column:1/-1}
.reference-form-wrap .field small{font-size:10px;line-height:1.2}
.reference-form-wrap .form .agreement{font-size:11px}
.reference-form-wrap .form .btn{min-height:42px;font-size:12px;width:100%}
.reference-projects{padding:55px 0 65px;background:#f7f9fb}
.reference-projects .projects{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.reference-projects .project-image{height:245px}
.reference-projects .project figcaption{min-height:0}
.reference-contact #contact-form{scroll-margin-top:25px}
@media(max-width:1350px){.container{width:min(100% - 48px,1200px)}.logo{width:195px}.topnav{gap:14px}.navlinks{gap:15px}.navlinks a{font-size:12px}.reference-container{width:min(100% - 48px,1200px)}.reference-intro{align-items:flex-start}.reference-ctas{align-self:center}.reference-ctas .btn{font-size:12px;padding:0 12px}.reference-contact-dark{padding-left:24px}.reference-contact-light{padding-right:24px}}
@media(max-width:1100px){.reference-intro{display:block}.reference-ctas{margin:13px 0}.reference-services{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-contact{grid-template-columns:1fr}.reference-contact-dark,.reference-contact-light{padding:28px max(24px,calc((100vw - 1000px)/2))}.reference-form-wrap{max-width:none}.reference-contact-inner{grid-template-columns:.75fr 1.25fr}}
@media(max-width:800px){.topnav{min-height:75px}.logo{width:205px;max-width:55vw}.reference-hero-image{display:none}.reference-mobile-panels.de-panels{display:grid}.reference-mobile-panels{height:300px}.reference-intro h1{font-size:33px}.reference-services{grid-template-columns:repeat(2,1fr)}.reference-contact-inner{grid-template-columns:1fr 1.4fr}.reference-container{width:calc(100% - 36px)}.reference-main{padding:22px 0}.reference-projects .projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.reference-mobile-panels{height:auto;display:flex!important;flex-direction:column}.reference-mobile-panel{min-height:170px}.reference-mobile-shade{position:relative;min-height:170px;padding:15px;align-items:flex-start;text-align:left;display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;align-content:center}.ref-service-icon{grid-row:1/3;grid-column:1;align-self:start}.reference-mobile-shade strong{grid-column:2;font-size:18px;margin:0 0 5px}.reference-mobile-shade ul{grid-column:2}.reference-mobile-shade li{font-size:12px;display:inline-block;margin:2px 10px 2px 0;white-space:normal}.reference-intro h1{font-size:29px}.reference-intro-copy>p:last-child{font-size:14px}.reference-ctas{flex-wrap:wrap}.reference-ctas .btn{flex:1;min-width:150px}.reference-services{grid-template-columns:1fr}.reference-contact-inner{grid-template-columns:1fr}.reference-business{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding:0 0 22px}.reference-contact-dark,.reference-contact-light{padding:25px 18px}.reference-form-wrap .form{grid-template-columns:1fr}.reference-form-wrap .field{grid-column:1/-1}.reference-projects .project-image{height:215px}.reference-contact .reference-section-label{font-size:14px}}

/* Desktop form follows the three-column reference layout. */
@media(min-width:1351px){
.reference-form-wrap .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:8px 10px}
.reference-form-wrap .form .field:has(#name){grid-column:1;grid-row:1}
.reference-form-wrap .form .field:has(#email){grid-column:2;grid-row:1}
.reference-form-wrap .form .field:has(#phone){grid-column:1;grid-row:2}
.reference-form-wrap .form .field:has(#address){grid-column:2;grid-row:2}
.reference-form-wrap .form .field:has(#subject){grid-column:1 / span 2;grid-row:3}
.reference-form-wrap .form .field:has(#message){grid-column:3;grid-row:1 / span 3}
.reference-form-wrap .form .field:has(#message) textarea{min-height:100%;height:100%;resize:vertical}
.reference-form-wrap .form .field:has(#uploads){grid-column:1 / span 2;grid-row:4}
.reference-form-wrap .form>div.full:last-child{grid-column:3;grid-row:4;align-self:end}
.reference-form-wrap .form .agreement{grid-column:1 / -1;grid-row:5}
}