:root{--navy:#13283f;--night:#0d1b2b;--red:#e31930;--redDark:#aa1124;--blue:#1265c9;--cyan:#0b8cdf;--bg:#f5f7fa;--muted:#607086;--line:#e1e8ef;--ink:#172537;--white:#fff;--shadow:0 12px 35px rgba(23,44,70,.08);--r:16px}
*{box-sizing:border-box} html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ffc743;outline-offset:3px}img{max-width:100%;display:block}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.14;letter-spacing:-.03em}h1{font-size:clamp(2.1rem,4.2vw,3.7rem);font-weight:850}h2{font-size:clamp(1.65rem,2.8vw,2.55rem);font-weight:800}h3{font-size:1.16rem}p{color:#4e5d6d}small{font-size:.78rem}.container{width:min(1190px,calc(100% - 48px));margin:auto}.topline{height:4px;background:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%)}.utility{background:#f6f9fc;border-bottom:1px solid #e7edf3;color:#647486;font-size:.75rem}.utility .container{display:flex;justify-content:space-between;gap:10px;padding:7px 0}.header{background:#fff;position:sticky;top:0;z-index:40;box-shadow:0 5px 18px rgba(25,44,60,.055)}.header-inner{min-height:77px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:flex;align-items:center;gap:10px;white-space:nowrap;line-height:1}.logo-mark{height:38px;width:36px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--blue) 0 46%,var(--red) 48% 100%);clip-path:polygon(50% 0%,89% 52%,88% 83%,66% 100%,32% 100%,12% 82%,11% 51%);font-size:25px}.logo strong{display:block;font-size:27px;letter-spacing:-.045em;color:#122d50;line-height:.88}.logo span{display:block;color:#31475b;font-size:9px;font-weight:800;letter-spacing:.12em;margin-top:6px}.nav{display:flex;align-items:center;gap:22px;font-size:.88rem;font-weight:750}.nav>a,.nav summary{white-space:nowrap}.nav>a:hover,.nav summary:hover{color:var(--red)}.nav details{position:relative}.nav summary{list-style:none;cursor:pointer}.nav summary::-webkit-details-marker{display:none}.nav summary:after{content:'⌄';font-size:12px;margin-left:6px}.dropdown{position:absolute;left:-12px;top:calc(100% + 25px);width:240px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);border-radius:12px;padding:10px;display:grid;gap:2px}.dropdown a{font-weight:550;padding:9px 12px;border-radius:7px}.dropdown a:hover{background:#f3f6fb;color:var(--blue)}.header-actions{display:flex;align-items:center;gap:11px}.lang{font-size:11px;color:#798597;letter-spacing:.1em}.lang b{color:var(--navy)}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:9px;background:var(--red);color:#fff;padding:13px 20px;font-size:.9rem;font-weight:800;cursor:pointer;box-shadow:0 5px 18px rgba(221,23,42,.13)}.btn:hover{background:#c9152b}.btn.blue{background:var(--blue);box-shadow:none}.btn.blue:hover{background:#0f56aa}.btn.ghost{background:#fff;color:var(--navy);border:1px solid #d2dde8;box-shadow:none}.btn.ghost:hover{background:#f2f6fa}.btn.light{background:transparent;color:white;box-shadow:none;border:1px solid rgba(255,255,255,.9);padding:9px 16px}.btn.light:hover{background:rgba(255,255,255,.16)}.mobile-menu{display:none}.mobile-menu summary{cursor:pointer;font-size:24px;list-style:none}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-links{padding:16px 22px;display:grid;gap:10px;background:white;border-top:1px solid var(--line)}.mobile-links a{font-weight:700;padding:6px 0}.hero-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--night);overflow:hidden;position:relative}.hero-panel{min-height:425px;position:relative;isolation:isolate;color:white;display:flex;justify-content:flex-end;align-items:center;overflow:hidden}.hero-panel+.hero-panel{border-left:3px solid rgba(255,255,255,.24)}.hero-panel:before{content:'';position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;transform:scale(1.04)}.hero-panel:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(17,29,40,.12) 0%,rgba(136,6,30,.88) 55%,rgba(192,12,33,.98) 100%)}.hero-panel.heat:before{background-image:url('topal-v8/heizung.jpg')}.hero-panel.bath:before{background-image:url('topal-v8/sanitaer.jpg')}.hero-panel.air:before{background-image:url('topal-v8/klima.jpg')}.hero-panel.bath:after{background:linear-gradient(110deg,rgba(3,32,62,.16) 0%,rgba(3,75,150,.89) 56%,rgba(2,69,140,.97) 100%)}.hero-panel.air:after{background:linear-gradient(110deg,rgba(3,32,62,.22) 0%,rgba(2,49,102,.8) 55%,rgba(2,35,72,.98) 100%)}.hero-panel:before{background-position:34% center}.hero-panel .symbol{font-size:36px;line-height:1;opacity:.95;margin-bottom:18px}.hero-panel .inner{width:65%;padding:25px 16px 25px 12px}.hero-panel h2{font-size:2rem;margin:0 0 16px;color:#fff}.hero-panel ul{list-style:none;padding:0;margin:0 0 20px}.hero-panel li{padding:3px 0;font-weight:560;font-size:.95rem;white-space:nowrap}.hero-panel li:before{content:'✓';font-size:17px;margin-right:9px;font-weight:900}.hero-panel.air .inner{width:62%}.proof-strip{background:white;border-bottom:1px solid var(--line)}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:19px 0}.proof-item{display:flex;align-items:center;gap:12px}.proof-icon{background:#eaf3ff;color:#1054a7;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:23px;flex:none}.proof-item strong{display:block;font-size:.86rem;color:var(--navy)}.proof-item span{font-size:.73rem;color:#647186}.section{padding:66px 0}.section.light{background:var(--bg)}.eyebrow{display:flex;align-items:center;gap:9px;color:#0f59a7;font-size:.76rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}.eyebrow:before{content:'';width:28px;height:3px;background:var(--red);display:block;border-radius:5px}.lead{max-width:740px;font-size:1.03rem;color:#596b7f}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:26px}.section-head h2{margin-bottom:6px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.card{background:white;border:1px solid var(--line);border-radius:var(--r);padding:24px 21px;box-shadow:0 6px 22px rgba(20,36,55,.035);transition:transform .15s,border-color .15s}.card:hover{transform:translateY(-4px);border-color:#b3cfe9}.card-icon{display:grid;place-items:center;width:51px;height:51px;border-radius:15px;font-size:27px;margin-bottom:18px;background:#fce9ee;color:var(--red)}.card:nth-child(2) .card-icon,.card:nth-child(3) .card-icon{background:#e7f0ff;color:var(--blue)}.card:nth-child(4) .card-icon{background:#eaf0f6;color:var(--navy)}.card h3{font-size:1.12rem;margin-bottom:8px}.card p{font-size:.85rem;min-height:56px;margin-bottom:15px}.text-link{font-weight:850;font-size:.85rem;color:var(--red)}.text-link.blue{color:var(--blue)}.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.photo-shape{height:340px;border-radius:var(--r);background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}.photo-shape:after{content:'';position:absolute;inset:0;background:linear-gradient(80deg,rgba(13,39,64,.15),transparent)}.photo-shape.heat{background-image:url('topal-v8/heizung.jpg')}.photo-shape.bath{background-image:url('topal-v8/sanitaer.jpg')}.photo-shape.air{background-image:url('topal-v8/klima.jpg')}.bullet-check{padding:0;list-style:none;margin:18px 0 27px}.bullet-check li{padding:5px 0;color:#40556a}.bullet-check li:before{content:'✓';color:var(--red);font-weight:900;margin-right:11px}.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.project{border:1px solid var(--line);background:#fff;overflow:hidden;border-radius:13px;box-shadow:0 3px 12px rgba(20,36,55,.025)}.project img{width:100%;height:170px;object-fit:cover}.project figcaption{font-size:.83rem;font-weight:780;padding:14px 13px}.project figcaption small{display:block;color:#8190a0;font-weight:450;margin-top:3px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{padding:22px;border-radius:13px;background:#fff;border:1px solid var(--line)}.step b{display:block;font-size:1.8rem;color:#d2dbe5;margin-bottom:8px}.step h3{font-size:.98rem}.step p{font-size:.84rem;margin-bottom:0}.cta-band{background:linear-gradient(110deg,#102b47,#0d3a6b);color:#fff;overflow:hidden}.cta-band .container{padding:38px 0;display:flex;align-items:center;justify-content:space-between;gap:35px}.cta-band h2{font-size:2rem;color:white;margin:0 0 6px}.cta-band p{margin:0;color:#c7d7e9}.cta-band .btn{flex:none}.footer{background:var(--night);color:#e8edf2}.footer-main{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:48px;padding:48px 0}.footer h3{font-size:.92rem;color:#fff;margin-bottom:16px}.footer p,.footer a{color:#b6c5d4;font-size:.83rem}.footer a{display:block;padding:4px 0}.footer a:hover{color:white}.footer-bottom{border-top:1px solid #294159;padding:16px 0;color:#97a8ba;font-size:.76rem;display:flex;justify-content:space-between;gap:10px}.page-hero{position:relative;min-height:370px;background:#133658;overflow:hidden;display:flex;align-items:center;color:#fff}.page-hero:before{content:'';position:absolute;inset:0;background-size:cover;background-position:center}.page-hero.heat:before{background-image:url('topal-v8/heizung.jpg')}.page-hero.bath:before{background-image:url('topal-v8/sanitaer.jpg')}.page-hero.air:before{background-image:url('topal-v8/klima.jpg')}.page-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,25,44,.98) 0%,rgba(9,33,57,.93) 41%,rgba(8,34,57,.25) 100%)}.page-hero .container{position:relative;z-index:1;padding:65px 0}.page-hero h1{color:white;max-width:780px;margin:14px 0}.page-hero p{color:#d9e3ef;max-width:660px;font-size:1.08rem}.breadcrumb{font-size:.8rem;color:#bdd1e7}.breadcrumb a{text-decoration:underline;text-underline-offset:3px}.category-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-36px;position:relative;z-index:3}.pill-card{background:white;padding:19px;border-radius:13px;box-shadow:var(--shadow);border:1px solid #e8edf2;text-align:center;font-size:.9rem;font-weight:800;color:var(--navy);min-height:100px}.pill-card .mini{display:block;color:var(--red);font-size:1.35rem;margin-bottom:8px}.pill-card:hover{color:var(--blue)}.service-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:19px}.service-card{display:grid;grid-template-columns:145px 1fr;gap:20px;background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;align-items:stretch}.service-card .thumb{background-size:cover;background-position:center;min-height:180px}.service-card .thumb.heat{background-image:url('topal-v8/heizung.jpg')}.service-card .thumb.bath{background-image:url('topal-v8/sanitaer.jpg')}.service-card .thumb.air{background-image:url('topal-v8/klima.jpg')}.service-card .content{padding:20px 20px 20px 0}.service-card h3{margin:0 0 8px}.service-card p{font-size:.86rem;margin-bottom:12px}.faq-list{display:grid;gap:10px;max-width:880px}.faq-list details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 19px}.faq-list summary{cursor:pointer;font-weight:770}.faq-list details p{margin:10px 0 0}.detail-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,.7fr);gap:45px}.detail-box{padding:25px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);align-self:start;position:sticky;top:105px}.detail-box h3{margin-bottom:9px}.detail-box p{font-size:.85rem}.feature-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{border:1px solid var(--line);padding:23px;border-radius:12px;background:white}.feature em{display:block;font-style:normal;color:var(--red);font-size:23px;margin-bottom:10px}.feature p{font-size:.88rem;margin:0}.notice{background:#fff7e5;border:1px solid #f3dab3;padding:15px 17px;border-radius:10px;color:#735326;font-size:.84rem}.contact-demo{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px}.contact-details{background:#142a44;color:white;padding:33px;border-radius:var(--r)}.contact-details p{color:#cbd6e5}.contact-details a{color:white;text-decoration:underline}.form-demo{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:white}.form-demo label{display:block;font-size:.83rem;font-weight:750;margin-bottom:6px}.form-demo input,.form-demo textarea,.form-demo select{display:block;width:100%;border:1px solid #cbd6e1;padding:12px;border-radius:9px;background:#fff;font:inherit;margin-bottom:15px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.muted{color:#708198}.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.filter{border:1px solid #cbd7e5;background:white;border-radius:30px;padding:9px 15px;cursor:pointer;font-weight:720}.filter[aria-pressed='true']{background:var(--navy);border-color:var(--navy);color:white}
@media(max-width:1150px){.nav{gap:12px;font-size:.78rem}.header-actions .lang{display:none}.hero-panel .inner{width:73%}.hero-panel.air .inner{width:73%}.hero-panel li{font-size:.83rem}.hero-panel h2{font-size:1.65rem}.hero-panel{min-height:385px}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.nav{display:none}.mobile-menu{display:block}.header-actions .btn{display:none}.header-inner{min-height:67px}.hero-three{display:grid;grid-template-columns:1fr}.hero-panel{min-height:245px;justify-content:flex-end}.hero-panel:before{background-position:center 48%}.hero-panel .inner,.hero-panel.air .inner{width:56%;padding:24px}.hero-panel h2{font-size:1.65rem}.hero-panel ul{display:grid;grid-template-columns:1fr 1fr;column-gap:7px}.hero-panel li{white-space:normal;font-size:.82rem}.hero-panel+.hero-panel{border-top:3px solid rgba(255,255,255,.3);border-left:none}.proof-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr;gap:25px}.steps{grid-template-columns:repeat(2,1fr)}.footer-main{grid-template-columns:repeat(2,1fr)}.category-pills{grid-template-columns:repeat(2,1fr)}.service-cards{grid-template-columns:1fr}.detail-layout{grid-template-columns:1fr}.detail-box{position:static}.cta-band .container{align-items:start;flex-direction:column}.contact-demo{grid-template-columns:1fr}}
@media(max-width:590px){.container{width:min(100% - 28px,1190px)}.logo strong{font-size:24px}.logo-mark{height:34px;width:31px}.utility .container span:last-child{display:none}.section{padding:43px 0}.section-head{align-items:start;flex-direction:column;gap:12px}.cards{grid-template-columns:1fr}.card p{min-height:0}.proof-grid{gap:15px}.proof-item span{font-size:.7rem}.hero-panel .inner,.hero-panel.air .inner{width:69%}.hero-panel{min-height:300px}.hero-panel ul{grid-template-columns:1fr}.hero-panel li{font-size:.82rem;padding:2px 0}.hero-panel h2{margin-bottom:8px}.hero-panel .symbol{margin-bottom:9px}.project-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.photo-shape{height:260px}.page-hero{min-height:315px}.page-hero .container{padding:40px 0}.category-pills{grid-template-columns:1fr 1fr}.pill-card{font-size:.79rem;padding:14px 7px}.feature-three{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr;gap:0}.footer-main{grid-template-columns:1fr 1fr;gap:26px}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column}.service-card{grid-template-columns:105px 1fr;gap:15px}.service-card .content{padding:14px 14px 14px 0}.service-card h3{font-size:.95rem}.service-card .thumb{min-height:165px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}


/* TOPAL v2 add-ons: original logo, national flags, diagonal photo hero, maps & legal content */
.logo img{display:block;width:auto;height:60px;max-width:205px;object-fit:contain}
.logo{flex-shrink:0;max-width:205px}
.header-inner{gap:18px;min-height:86px}
.nav{gap:15px;font-size:.82rem}
.language-flags{display:flex;align-items:center;gap:6px;white-space:nowrap}
.language-flags a{display:grid;place-items:center;width:37px;height:34px;border:1px solid transparent;border-radius:8px;font-size:23px;line-height:1;filter:grayscale(.1);transition:background .16s}
.language-flags a:hover,.language-flags a.active{background:#eaf1f9;border-color:#cedbe8}
.language-flags a:focus-visible{outline:2px solid #1f62a9}
.hero-three{display:flex;min-height:440px;background:#0d2338}
.hero-panel{min-height:440px;flex:1 1 0;position:relative;isolation:isolate;justify-content:flex-end;overflow:visible}
.hero-panel+.hero-panel{border:0}
.hero-panel:before{inset:0;transform:none;background-size:cover;background-position:32% center;z-index:-3}
.hero-panel:after{inset:0;z-index:-2;clip-path:polygon(37% 0,100% 0,100% 100%,12% 100%);background:linear-gradient(95deg,rgba(176,9,32,.73),rgba(157,4,23,.92))}
.hero-panel.bath:after{background:linear-gradient(98deg,rgba(3,101,194,.67),rgba(4,61,138,.90))}
.hero-panel.air:after{background:linear-gradient(98deg,rgba(5,81,164,.58),rgba(2,40,95,.89))}
.hero-panel:before{filter:saturate(1.1)}
.hero-panel .inner{width:62%;padding:20px 16px 20px 0;z-index:2;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.40)}
.hero-panel.air .inner{width:62%}
.hero-panel h2{font-size:clamp(1.55rem,2.1vw,2.25rem);font-weight:850;margin-bottom:12px}
.hero-panel li{font-size:clamp(.77rem,.95vw,.99rem);padding:4px 0;white-space:normal}
.hero-panel .symbol{font-size:40px;margin-bottom:12px}
.hero-panel .btn{box-shadow:none;text-shadow:none}
.hero-panel::selection{background:var(--red);color:white}
/* Narrow glowing seam laid on the left diagonal of each transparent color plane. */
.hero-panel .inner:before{content:'';position:absolute;left:-29%;top:-28%;height:159%;width:2px;transform:rotate(19deg);background:rgba(255,255,255,.80);box-shadow:0 0 10px 3px rgba(255,255,255,.36);pointer-events:none}
.hero-panel.heat .inner:before{box-shadow:0 0 12px 3px rgba(255,57,78,.72)}
.hero-panel.bath .inner:before,.hero-panel.air .inner:before{box-shadow:0 0 12px 3px rgba(22,168,255,.72)}
.contact-showcase{background:#fff}
.contact-showcase-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.7fr)}
.contact-dark{background:#17293d;color:#fff;padding:43px max(35px,calc((100vw - 1190px)/2)) 43px max(25px,calc((100vw - 1190px)/2));}
.contact-dark-inner{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(265px,1.2fr);gap:25px}
.contact-dark h2{color:white;font-size:1.6rem;margin-bottom:15px}
.contact-dark p{color:#cfdae7;font-size:.85rem}
.eyebrow.pale{color:#f1f6fc}
.contact-line{display:grid;gap:2px;margin-bottom:18px;font-size:.85rem}
.contact-line strong{color:#a7c2df;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.contact-dark a:not(.btn){color:white}
.contact-aside{padding:43px clamp(25px,3.1vw,60px);background:#f7f9fc}
.contact-aside h2{font-size:1.75rem}
.quick-request{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:23px 0}
.request-tile{border:1px solid #d8e3ef;background:#fff;border-radius:10px;padding:13px 12px;font-size:.83rem;font-weight:750;display:flex;justify-content:space-between}
.request-tile span{color:var(--red)}
.location-map{border:1px solid #426180;background:#253b52;min-height:240px;border-radius:14px;overflow:hidden;color:white}
.map-consent{padding:20px 20px 18px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:240px}
.map-pin{font-size:32px;color:#f24a60;line-height:1}
.map-consent strong{font-size:.95rem;color:#fff}
.map-consent p{font-size:.78rem;margin:5px 0 13px;color:#d5e2ee}
.map-consent .btn{font-size:.78rem;padding:9px 13px}
.map-ext{display:block;margin-top:13px;font-size:.74rem;color:#fff;text-decoration:underline}
.map-display iframe{width:100%;height:250px;display:block;border:0;background:#f2f5f8}
.map-revoke{padding:10px 15px;border:0;background:#15324e;color:#fff;cursor:pointer;width:100%;font:inherit;font-size:.78rem}
.map-display[hidden],.map-consent[hidden]{display:none!important}
.contact-map-heading{font-size:.88rem;color:#fff;margin:30px 0 10px}
.contact-details .location-map{margin-top:9px}
.contact-details .map-consent p{color:#d5e2ee}
.contact-details .map-ext{color:#fff}
.legal-section{min-height:60vh}
.legal-section .container{max-width:970px}
.legal-document{background:white;border:1px solid #e4eaf0;box-shadow:var(--shadow);border-radius:16px;padding:clamp(23px,4vw,48px)}
.legal-document h2{font-size:1.4rem;margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid #e6edf3}
.legal-document h2:first-child{margin-top:0}
.legal-document h3{font-size:1.08rem;margin:22px 0 8px}
.legal-document p{line-height:1.75;margin-bottom:15px;overflow-wrap:anywhere}
.legal-document a{color:#0756ad;text-decoration:underline}
.legal-intro{font-size:1.06rem;color:#30475d}
.legal-nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.legal-nav a,.footer-cookie{font-size:.75rem;color:#d1dfec}
.footer-cookie{font-family:inherit;background:none;border:none;text-decoration:underline;cursor:pointer;padding:0}
.cookie-info{position:fixed;bottom:16px;right:18px;background:#112b45;border:1px solid #7291b6;border-radius:12px;padding:16px;color:#fff;max-width:365px;z-index:80;box-shadow:var(--shadow)}
.cookie-info p{color:#d5e2ee;margin:8px 0 15px;font-size:.86rem}
.cookie-info button{font:inherit;padding:8px 15px;background:#fff;color:#15324e;border:0;border-radius:7px;cursor:pointer}
@media(max-width:1180px){.nav{gap:10px;font-size:.75rem}.logo img{height:52px}.logo{max-width:180px}.hero-panel .inner{width:66%}.hero-panel.air .inner{width:66%}.contact-dark{padding-left:28px;padding-right:24px}.contact-dark-inner{gap:18px}}
@media(max-width:1000px){.nav{display:none}.mobile-menu{display:block}.header-actions .btn{display:none}.hero-panel .inner,.hero-panel.air .inner{width:64%}.contact-showcase-grid{grid-template-columns:1fr}.contact-dark{padding:38px 25px}.contact-aside{padding:35px 25px}}
@media(max-width:760px){.hero-three{display:grid;grid-template-columns:1fr}.hero-panel{min-height:300px}.hero-panel:after{clip-path:polygon(32% 0,100% 0,100% 100%,13% 100%)}.hero-panel .inner,.hero-panel.air .inner{width:58%;padding-top:24px;padding-bottom:24px}.hero-panel li{font-size:.87rem}.hero-panel+.hero-panel{border-top:2px solid #fff}.hero-panel .inner:before{left:-19%;height:130%}.contact-dark-inner{grid-template-columns:1fr}.contact-dark-inner>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.contact-dark-inner .eyebrow,.contact-dark-inner h2,.contact-dark-inner p{grid-column:1/-1}}
@media(max-width:480px){.header-inner{min-height:70px}.logo img{height:46px;max-width:153px}.language-flags{gap:2px}.language-flags a{width:32px;height:32px;font-size:20px}.hero-panel .inner,.hero-panel.air .inner{width:65%}.hero-panel{min-height:290px}.hero-panel h2{font-size:1.55rem}.hero-panel li{font-size:.78rem;padding:2px 0}.hero-panel .symbol{font-size:29px}.hero-panel .inner:before{display:none}.quick-request{grid-template-columns:1fr 1fr}.contact-dark-inner>div:first-child{grid-template-columns:1fr}.contact-dark .btn{max-width:100%}}

.language-flags img{display:block;width:29px;height:20px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(16,35,56,.18)}


/* V3: Faithful diagonal TOPAL hero. The three photographs stay independent of
   the diagonal, semitransparent SVG ribbon polygons; all text is real HTML. */
.hero-diagonal{position:relative;display:block;min-height:0;height:clamp(360px,22vw,430px);background:#152332;overflow:hidden;isolation:isolate}
.hero-photo-grid{position:absolute;inset:0;display:grid;grid-template-columns:34% 32% 34%;z-index:0;pointer-events:none}
.hero-photo{background-size:cover;background-position:center;min-width:0}
.hero-photo.photo-heizung{background-image:url('topal-v8/heizung.jpg');background-position:47% center}
.hero-photo.photo-sanitaer{background-image:url('topal-v8/sanitaer.jpg');background-position:49% center}
.hero-photo.photo-klima{background-image:url('topal-v8/klima.jpg');background-position:48% center}
.hero-ribbons{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-copy{position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;min-width:0;text-shadow:0 2px 9px rgba(0,0,0,.6)}
.hero-copy.heat{left:21.6%;width:15.7%}
.hero-copy.bath{left:53.8%;width:15.8%}
.hero-copy.air{left:87.0%;width:12.8%}
.hero-copy-inner{width:100%;max-width:320px;padding:10px 2px}
.hero-copy .symbol{font-size:clamp(32px,2.9vw,55px);font-weight:700;line-height:1;margin:0 0 5px}
.hero-copy h2{color:#fff;margin:0 0 11px;font-size:clamp(21px,2vw,36px);font-weight:850;letter-spacing:0;line-height:1.15}
.hero-copy ul{display:inline-block;padding:0;margin:0 0 13px;text-align:left;list-style:none}
.hero-copy li{font-size:clamp(11px,.89vw,17px);line-height:1.36;font-weight:680;white-space:nowrap;margin:0 0 8px}
.hero-copy li:before{content:'✓';font-weight:900;margin-right:9px;color:#fff}
.hero-more{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.85);border-radius:8px;padding:6px 14px;color:#fff;font-size:clamp(11px,.76vw,14px);font-weight:800;text-decoration:none;background:rgba(1,19,41,.14);text-shadow:none;transition:background-color .18s}
.hero-more:hover{background:rgba(255,255,255,.22)}
@media(max-width:1320px) and (min-width:1001px){
 .hero-copy.heat{left:21.1%;width:17.0%}.hero-copy.bath{left:53.4%;width:17.2%}.hero-copy.air{left:86%;width:13.8%}
 .hero-copy li{font-size:clamp(11px,.96vw,14px);margin-bottom:7px}.hero-copy li:before{margin-right:5px}
 .hero-copy h2{font-size:clamp(22px,2.2vw,30px)}
}
/* Small screens: each photo uses its own diagonal glass ribbon and visible subject.
   The desktop ribbon artwork is not shrunk until its text becomes unreadable. */
@media(max-width:1000px){
 .hero-diagonal{display:grid;grid-template-columns:1fr;height:auto;min-height:0}
 .hero-photo-grid,.hero-ribbons{display:none}
 .hero-copy{position:relative;left:auto!important;top:auto;bottom:auto;width:100%!important;min-height:260px;justify-content:flex-end;isolation:isolate;overflow:hidden;text-align:left;padding:18px 5%}
 .hero-copy:before{content:'';position:absolute;inset:0;z-index:-2;background-position:left center;background-size:cover;filter:saturate(1.05)}
 .hero-copy.heat:before{background-image:url('topal-v8/heizung.jpg')}
 .hero-copy.bath:before{background-image:url('topal-v8/sanitaer.jpg')}
 .hero-copy.air:before{background-image:url('topal-v8/klima.jpg')}
 .hero-copy:after{content:'';position:absolute;inset:0;z-index:-1;clip-path:polygon(40% 0,100% 0,100% 100%,29% 100%);background:linear-gradient(100deg,rgba(180,0,28,.78),rgba(117,0,19,.88));border:none}
 .hero-copy.bath:after{background:linear-gradient(100deg,rgba(0,106,194,.78),rgba(1,42,110,.88))}
 .hero-copy.air:after{background:linear-gradient(100deg,rgba(13,99,180,.7),rgba(1,30,80,.88))}
 .hero-copy-inner{width:min(52%,365px);max-width:none}
 .hero-copy .symbol{font-size:32px;margin:0 0 5px}
 .hero-copy h2{font-size:25px;margin-bottom:7px}
 .hero-copy li{font-size:14px;line-height:1.25;margin-bottom:7px}
 .hero-copy+.hero-copy{border-top:2px solid #eef8ff}
}
@media(max-width:590px){
 .hero-copy{min-height:265px;padding-right:4%}
 .hero-copy-inner{width:61%}
 .hero-copy h2{font-size:23px}
 .hero-copy li{font-size:12.5px;margin-bottom:5px}
 .hero-copy:after{clip-path:polygon(32% 0,100% 0,100% 100%,17% 100%)}
 .hero-more{padding:5px 11px;font-size:12px}
}

.hero-copy .symbol{display:flex;justify-content:center;align-items:center;height:56px;margin-bottom:6px;color:#fff}
.hero-copy .symbol svg{height:53px;width:53px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.23))}
@media(max-width:1000px){.hero-copy .symbol{justify-content:flex-start;height:38px}.hero-copy .symbol svg{width:36px;height:36px}}
/* Center text inside the diagonal ribbons rather than the underlying image thirds. */
@media(min-width:1001px){
  .hero-copy.heat{left:18.8%;width:15.1%}
  .hero-copy.bath{left:52.2%;width:15.5%}
  .hero-copy.air{left:87%;width:12.8%}
}
@media(max-width:1320px) and (min-width:1001px){
  .hero-copy li{font-size:clamp(11px,.90vw,13px)}
}


/* TOPAL V5: headline hierarchy, SVG icons and long-form service pages */
.ui-icon{display:block;width:1.6em;height:1.6em;stroke:currentColor;flex:none}
.hero-copy .symbol .ui-icon{width:52px;height:52px;stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 2px 3px rgba(0,0,0,.23))}
.hero-copy .hero-heading{color:white;margin:0 0 11px;font-size:clamp(21px,2vw,36px);font-weight:850;letter-spacing:0;line-height:1.15;text-shadow:0 2px 9px rgba(0,0,0,.6)}
.card-icon .ui-icon{width:27px;height:27px}
.proof-icon .ui-icon{width:23px;height:23px}
.pill-card .mini .ui-icon{width:28px;height:28px;margin:0 auto}
.feature em .ui-icon{width:25px;height:25px}
.service-detail>h2{margin:38px 0 14px;font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.25}
.service-detail>h3{margin:24px 0 8px;font-size:1.12rem;line-height:1.35}
.service-detail>p{line-height:1.8;margin-bottom:16px;max-width:80ch}
.service-detail>.lead{line-height:1.75;font-size:1.06rem;max-width:78ch}
.service-photo{margin:30px 0 35px}
.service-process{display:grid;gap:12px;padding:0;list-style:none;counter-reset:stage;margin:14px 0 33px}
.service-process li{position:relative;counter-increment:stage;padding:18px 18px 18px 68px;border:1px solid #dde7f0;border-radius:13px;background:#f7f9fc}
.service-process li:before{content:counter(stage);position:absolute;left:17px;top:17px;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#e9f1fc;color:#0c57a8;font-weight:850}
.service-process strong{display:block;color:#1d3550;margin-bottom:5px}
.service-process p{font-size:.91rem;line-height:1.65;margin:0}
.service-request{background:#edf6ff;border-left:4px solid #1765ad;border-radius:0 12px 12px 0;padding:22px 24px;margin:14px 0 32px}
.service-request p{margin:0 0 10px;font-size:.94rem;line-height:1.7;color:#254461}
.service-request p:last-child{margin-bottom:0}
.service-detail .faq-list{margin:17px 0 28px}
.service-detail .faq-list details p{font-size:.94rem;line-height:1.75}
.service-sources{border-top:1px solid #dde7f0;margin:28px 0 0;padding-top:22px}
.service-sources h3{font-size:1rem;margin-bottom:12px}
.service-sources p{margin:0 0 7px;font-size:.88rem}
.service-sources a{color:#095eaf;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.hero-copy .hero-heading{font-size:25px;margin-bottom:7px}.hero-copy .symbol .ui-icon{width:36px;height:36px}}
@media(max-width:590px){.hero-copy .hero-heading{font-size:23px}.service-process li{padding-left:60px}.service-request{padding:18px}}

/* V6: Luftige Vertrauensleiste auf kleinen Mobilgeraeten */
@media (max-width: 520px) {
  .proof-grid { grid-template-columns: 1fr; gap: 10px; padding: 15px 0; }
  .proof-item { gap: 12px; min-width: 0; }
  .proof-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .proof-item strong { font-size: .9rem; }
  .proof-item span { font-size: .78rem; }
}

/* V8 integration corrections and existing current form support */
.topline{background:linear-gradient(90deg,#e31930 0 51%,#1265c9 51% 100%);height:4px}
.header .logo img{max-width:185px;width:auto;height:auto;max-height:62px;object-fit:contain}
.hero-ribbons #topal-red stop:first-child{stop-opacity:.73}
.hero-ribbons #topal-red stop:last-child{stop-opacity:.48}
.hero-copy.bath{transform:translateX(12px)}
.v8-form-panel{margin:22px 0 4px;padding:20px;background:#fff;border:1px solid #dde6ef;border-radius:12px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form .field{display:flex;flex-direction:column;gap:5px;min-width:0}
.form .field.full,.form .full{grid-column:1/-1}
.form .field input,.form .field textarea,.form .field select{width:100%;min-height:43px;padding:10px;border:1px solid #bccddd;border-radius:8px;background:white;color:#13283f}
.form .field textarea{min-height:130px}
.form .agreement{display:flex;gap:10px;align-items:flex-start;color:#355068;font-size:.88rem}
.form .trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form .btn-red{background:#e31930;color:white;min-height:44px}
.form-alert{padding:10px 12px;background:#edf5fc;border-radius:7px}
.consent{position:fixed;inset:0;z-index:200;display:grid;place-items:end center;background:#0718278c;padding:20px}
.consent[hidden],.consent-options[hidden]{display:none!important}
.consent-card{width:min(660px,100%);background:white;border-radius:12px;padding:24px;box-shadow:0 12px 35px #0003;max-height:90vh;overflow:auto}
.consent-card h2{font-size:1.45rem;margin-bottom:10px}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent-actions .btn{flex:1;min-width:100px}
.consent-choice{display:flex;justify-content:space-between;gap:10px;margin:12px 0}
.consent-options{border-top:1px solid #cfdce8;margin:15px 0;padding-top:10px}
.consent .btn-blue{background:#155bb1;color:#fff}.consent .btn-outline{background:white;color:#13283f;border:1px solid #d2dce6}
.v8-map-box{border-radius:12px;border:1px solid #b5cddd;background:#173951;color:#fff;overflow:hidden;max-width:650px}
.v8-map-box [data-map-placeholder]{padding:22px;text-align:center}
.v8-map-box [data-map-container] iframe{width:100%;height:240px;border:0;display:block}
.v8-map-box [data-map-container][hidden],.v8-map-box [data-map-placeholder][hidden]{display:none!important}
.v8-map-box button{cursor:pointer}
.v8-map-box p{color:#e1edf7}
.v8-map-settings{background:transparent;border:0;color:#fff;text-decoration:underline;padding:10px;cursor:pointer}
.v8-mobile-nav{display:none}.v8-mobile-nav summary{cursor:pointer}.v8-mobile-nav details{padding:5px}
.v8-mobile-nav nav{display:grid;gap:8px;background:#fff;padding:16px;color:#193b60}
.v8-mobile-nav a{display:block;padding:6px 2px}
.legal-document .v8-legal-note{background:#fff7e6;padding:10px 12px;border-radius:6px;border:1px solid #e7d6ab;font-size:.87rem}
@media(max-width:1000px){.nav{display:none}.v8-mobile-nav{display:block}.hero-copy.bath{transform:none}}
@media(max-width:640px){.form{grid-template-columns:1fr}.form .field{grid-column:1/-1}.v8-form-panel{padding:13px}.header-actions .btn{display:none}.hero-copy.bath{transform:none}}

.project[hidden]{display:none!important}

/* V8.2 | Kontakt und Karte am oberen Rand ausrichten, V8.1 ansonsten erhalten.
   V8.1 | Kontaktbereich: ausbalancierte Spalten und gut sichtbare Karte.
   Form-/Map-DOM und vorhandene Einwilligungslogik unveraendert. */
@media (min-width: 1001px) {
  .contact-showcase-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .contact-dark {padding:clamp(30px,3vw,56px);display:flex;align-items:flex-start;min-width:0;}
  .contact-dark-inner {width:100%;grid-template-columns:minmax(195px,.77fr) minmax(280px,1.23fr);gap:clamp(20px,2.2vw,40px);align-items:start;}
  .contact-aside {padding:clamp(30px,3vw,56px);min-width:0;}
}
.contact-dark-inner > div {min-width:0;}
.contact-dark h2 {font-size:clamp(1.45rem,1.65vw,1.85rem);}
.contact-aside h2 {margin-bottom:12px;}
.contact-aside .quick-request {margin:19px 0 10px;}
.contact-aside .v8-form-panel {margin-top:15px;}
.contact-aside .v8-form-panel form {margin:0;}
.contact-dark .v8-map-box {max-width:none;width:100%;min-height:400px;display:flex;flex-direction:column;}
.contact-dark .v8-map-box [data-map-placeholder] {flex:1;min-height:350px;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.contact-dark .v8-map-box [data-map-container] {flex:1;min-height:350px;}
.contact-dark .v8-map-box [data-map-container] iframe {height:350px;min-height:350px;}
.contact-dark .v8-map-box .v8-map-settings {margin-top:auto;}
@media (min-width:1001px) and (max-width:1350px) {
  .contact-dark-inner {grid-template-columns:1fr;gap:22px;}
  .contact-dark .v8-map-box {min-height:250px;}
  .contact-dark .v8-map-box [data-map-placeholder],
  .contact-dark .v8-map-box [data-map-container] {min-height:200px;}
  .contact-dark .v8-map-box [data-map-container] iframe {min-height:200px;height:240px;}
}
@media (max-width:1000px) {
  .contact-dark,.contact-aside {padding:34px clamp(18px,5vw,50px);}
  .contact-dark-inner {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:24px;}
  .contact-dark .v8-map-box {min-height:320px;}
  .contact-dark .v8-map-box [data-map-placeholder],
  .contact-dark .v8-map-box [data-map-container] {min-height:270px;}
  .contact-dark .v8-map-box [data-map-container] iframe {min-height:270px;height:270px;}
}
@media (max-width:700px) {
  .contact-dark-inner {grid-template-columns:1fr;gap:22px;}
  .contact-dark-inner > div:first-child {display:block;}
  .contact-dark {padding:30px 18px;}
  .contact-aside {padding:30px 18px;}
  .contact-dark .v8-map-box {min-height:290px;}
  .contact-dark .v8-map-box [data-map-placeholder],
  .contact-dark .v8-map-box [data-map-container] {min-height:245px;}
  .contact-dark .v8-map-box [data-map-container] iframe {min-height:245px;height:245px;}
}


/* TOPAL V8.3: Only card title and inquiry tile overflow fixes.
   Preserve V8.2 top-aligned contact/map layout. */
.cards > .card { min-width: 0; }
.cards > .card h2 {
  font-size: 1.125rem;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* The request links must keep their labels and arrows inside their borders. */
.quick-request { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-request .request-tile {
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.quick-request .request-tile span { flex-shrink: 0; }
@media (max-width: 480px) {
  .contact-aside .quick-request { grid-template-columns: 1fr; }
}

/* 1101-1350 px: keep contact details and Google Maps in the same top row. */
@media (min-width:1101px) and (max-width:1350px) {
  .contact-dark-inner {
    grid-template-columns:minmax(0,.73fr) minmax(0,1.27fr);
    align-items:start;
    gap:18px;
  }
}


/* V8.5: Return to compact horizontal service cards and the balanced contact/map layout.
   Scoped to the home page sections so all other pages and forms retain their behaviour. */
#leistungen{padding:32px 0 34px}
#leistungen > .container{width:min(1480px,calc(100% - 48px))}
#leistungen .section-head{gap:24px;margin-bottom:16px;align-items:center}
#leistungen .section-head h1{font-size:clamp(1.85rem,2.3vw,2.6rem);line-height:1.12;margin:0 0 7px}
#leistungen .section-head .lead{margin:0;font-size:1rem;max-width:980px}
#leistungen .eyebrow{margin-bottom:8px}
#leistungen .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#leistungen .cards > .card{display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:4px;align-content:start;padding:14px 13px;min-height:138px;max-width:none;min-width:0;border-radius:12px}
#leistungen .cards > .card .card-photo{grid-column:1;grid-row:1 / span 3;width:78px;height:78px;margin:0;border-radius:12px;display:block;object-fit:cover;object-position:center;align-self:start;box-shadow:0 4px 12px rgba(17,44,70,.10);background:#f2f5f8}
#leistungen .cards > .card h2{grid-column:2;grid-row:1;font-size:clamp(1rem,1.06vw,1.13rem);line-height:1.18;letter-spacing:-.025em;margin:2px 0 0;hyphens:manual;overflow-wrap:normal}
#leistungen .cards > .card p{grid-column:2;grid-row:2;font-size:.79rem;line-height:1.45;margin:4px 0 6px;min-height:0;color:#53667b}
#leistungen .cards > .card .text-link{grid-column:2;grid-row:3;align-self:end;display:block;font-size:.77rem;line-height:1.3}
.contact-with-icon{display:flex;align-items:flex-start;gap:12px;margin:0 0 17px}
.contact-circle-icon{flex:0 0 39px;width:39px;height:39px;border-radius:50%;background:#e31930;color:#fff;display:grid;place-items:center}
.contact-with-icon .contact-line{margin:0;gap:2px;padding-top:2px}
.contact-with-icon .contact-line strong{color:#eef5ff;font-size:.79rem;letter-spacing:0;text-transform:none}
.contact-with-icon .contact-line a,.contact-with-icon .contact-line span{font-size:.86rem;line-height:1.48}
.contact-dark-inner{align-items:start}
.contact-dark .v8-map-box{width:100%;max-width:none;min-height:0;display:block}
.contact-dark .v8-map-box [data-map-placeholder]{min-height:225px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px}
.contact-dark .v8-map-box [data-map-container]{min-height:0}
.contact-dark .v8-map-box [data-map-container] iframe{height:260px;min-height:0}
.contact-dark .v8-map-box .v8-map-settings{display:block;margin:0;width:100%;padding:8px 10px}
.contact-aside .quick-request{margin:12px 0 8px;gap:8px}
.contact-aside .request-tile{padding:9px 12px;font-size:.82rem;min-height:39px;border-radius:7px}
.contact-aside .v8-form-panel{margin:10px 0 0;padding:14px;border-radius:9px}
.contact-aside .form{gap:9px 12px}
.contact-aside .form .field{gap:4px}
.contact-aside .form .field input,.contact-aside .form .field select{min-height:39px;padding:8px 10px}
.contact-aside .form .field textarea{min-height:102px;padding:8px 10px}
.contact-aside .form .btn-red{min-height:41px}
@media(min-width:1001px){
 .contact-showcase-grid{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
 .contact-dark{padding:33px clamp(24px,2vw,40px) 30px max(24px,calc((100vw - 1480px)/2));display:block}
 .contact-dark-inner{grid-template-columns:minmax(185px,.7fr) minmax(270px,1.3fr);gap:clamp(16px,1.8vw,31px)}
 .contact-aside{padding:33px clamp(24px,2.6vw,48px) 30px}
}
@media(min-width:1001px) and (max-width:1350px){
 .contact-dark-inner{grid-template-columns:minmax(175px,.7fr) minmax(255px,1.3fr);gap:18px}
 .contact-dark .v8-map-box{min-height:0}
 .contact-dark .v8-map-box [data-map-placeholder]{min-height:195px}
 .contact-dark .v8-map-box [data-map-container]{min-height:0}
 .contact-dark .v8-map-box [data-map-container] iframe{height:230px;min-height:0}
}
@media(max-width:1190px){
 #leistungen .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
 .contact-showcase-grid{grid-template-columns:1fr}
 .contact-dark,.contact-aside{padding:28px clamp(18px,4vw,42px)}
 .contact-dark-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:24px}
 .contact-dark .v8-map-box{min-height:0}
 .contact-dark .v8-map-box [data-map-placeholder]{min-height:215px}
 .contact-dark .v8-map-box [data-map-container]{min-height:0}
 .contact-dark .v8-map-box [data-map-container] iframe{height:245px;min-height:0}
}
@media(max-width:700px){
 .contact-dark-inner{grid-template-columns:1fr;gap:18px}
 .contact-dark-inner > div:first-child{display:block}
 .contact-dark{padding:26px 18px}
 .contact-aside{padding:26px 18px}
 .contact-dark .v8-map-box{min-height:0}
 .contact-dark .v8-map-box [data-map-placeholder]{min-height:195px}
 .contact-dark .v8-map-box [data-map-container]{min-height:0}
 .contact-dark .v8-map-box [data-map-container] iframe{height:240px;min-height:0}
}
@media(max-width:660px){
 #leistungen{padding:30px 0}
 #leistungen .section-head{align-items:flex-start;flex-direction:column;gap:14px}
 #leistungen .cards{grid-template-columns:1fr}
 #leistungen .cards > .card{min-height:128px}
 #leistungen .cards > .card h2{font-size:1.06rem}
 #leistungen .cards > .card{grid-template-columns:72px minmax(0,1fr);column-gap:12px}
 #leistungen .cards > .card .card-photo{width:72px;height:72px}
}

/* Wide-screen inquiry form: short first two columns, message at right (original layout). */
@media(min-width:1450px){
 .contact-aside #contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(190px,1fr);grid-template-areas:
   "name email message"
   "phone address message"
   "subject subject message"
   "files files message"
   "privacy privacy submit";
   column-gap:10px;row-gap:8px;align-items:start}
 .contact-aside #contact-form .field:has(#name){grid-area:name}
 .contact-aside #contact-form .field:has(#email){grid-area:email}
 .contact-aside #contact-form .field:has(#phone){grid-area:phone}
 .contact-aside #contact-form .field:has(#address){grid-area:address}
 .contact-aside #contact-form .field:has(#subject){grid-area:subject}
 .contact-aside #contact-form .field:has(#message){grid-area:message}
 .contact-aside #contact-form .field:has(#uploads){grid-area:files}
 .contact-aside #contact-form .agreement{grid-area:privacy}
 .contact-aside #contact-form > div.full:last-child{grid-area:submit;align-self:center}
 .contact-aside #contact-form .field.full,.contact-aside #contact-form .full{grid-column:auto}
 .contact-aside #contact-form .field:has(#message){align-self:stretch}
 .contact-aside #contact-form #message{height:100%;min-height:240px}
 .contact-aside #contact-form .field:has(#uploads) small{font-size:.72rem;line-height:1.25}
 .contact-aside #contact-form .agreement{font-size:.8rem;line-height:1.3}
}
@media(min-width:1191px) and (max-width:1350px){
 #leistungen .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* V8.6: Active page in desktop dropdown/link and in mobile navigation.
   SEO-focused page names remain unchanged; only navigation presentation changes. */
.header .nav > a[aria-current="page"],
.header .nav > details[data-active-section="true"] > summary{
  color:var(--red);
  position:relative;
}
.header .nav > a[aria-current="page"]::after,
.header .nav > details[data-active-section="true"] > summary::before{
  content:"";
  position:absolute;
  height:3px;
  left:0;
  right:0;
  bottom:-11px;
  border-radius:3px;
  background:var(--red);
}
.header .v8-mobile-nav a[aria-current="page"]{
  color:var(--red);
  font-weight:800;
  background:#fff0f2;
  border-left:3px solid var(--red);
  padding-left:10px;
}
/* Four duplicate service-choice tiles have been removed from the start page.
   The existing subject select is the only selection control. */
#kontakt-und-standort .contact-aside .v8-form-panel{margin-top:12px}


/* V8.7: Google Maps 200 px higher on desktop to use the previously empty
   space below the left contact column. The iframe stays full width and
   reflows its geographic content. No image stretching or transforms.
   The consent placeholder uses the same height to prevent layout jumps. */
@media (min-width:1351px) {
  #kontakt-und-standort .contact-dark .v8-map-box [data-map-container] iframe {
    height:460px;
    min-height:460px;
  }
  #kontakt-und-standort .contact-dark .v8-map-box [data-map-placeholder] {
    min-height:460px;
  }
}
@media (min-width:1001px) and (max-width:1350px) {
  #kontakt-und-standort .contact-dark .v8-map-box [data-map-container] iframe {
    height:430px;
    min-height:430px;
  }
  #kontakt-und-standort .contact-dark .v8-map-box [data-map-placeholder] {
    min-height:430px;
  }
}


/* V8.9: Sanitär-Ribbon rechts verbreitert, ohne Icons/Texte als Grafik einzubetten.
   Die Textliste behält ihre Position; nur der Button wird dezent nach links versetzt.
   Das SVG des Ribbons liegt in inc/v8_pages/home.html. */
@media (min-width:1001px) {
  .hero-copy.bath .hero-more { position:relative;left:-12px; }
}

/* V9.0 - Bannerfoto exakt an der roten Diagonale beenden.
   Die frühere rechteckige Fotospalte endete bei x=34%, die SVG-Diagonale
   unten jedoch bei x=573/1920=29.84375%. Dadurch blieb rechts davon
   ein ungewollter roter Streifen aus dem Heizungsfoto sichtbar.
   Fotogrenze und SVG-Kante nutzen jetzt dieselben Koordinaten.
   Die separat gerenderten HTML-Texte, SVG-Ribbons und mobilen Panels bleiben unverändert. */
@media (min-width:1001px) {
  .hero-diagonal .hero-photo-grid { display:block; }
  .hero-diagonal .hero-photo { position:absolute;top:0;bottom:0;min-width:0; }
  .hero-diagonal .hero-photo.photo-heizung {
    left:0;width:37.760416667%;z-index:3;
    clip-path:polygon(0 0,100% 0,79.035% 100%,0 100%);
  }
  .hero-diagonal .hero-photo.photo-sanitaer {
    left:29.84375%;width:36.15625%;z-index:2;
  }
  .hero-diagonal .hero-photo.photo-klima {
    left:66%;width:34%;z-index:1;
  }
}

/* V9.2: dynamic online services; server-rendered, no third-party widgets. */
.topal-service-menu{position:relative;z-index:45;font-size:.83rem;flex:none}
.topal-service-menu>summary{cursor:pointer;font-weight:800;list-style:none;color:#122b45;border:1px solid #ccd8e4;border-radius:8px;padding:9px 12px;background:#f5f8fc}
.topal-service-menu>summary::-webkit-details-marker,.topal-service-widget>summary::-webkit-details-marker{display:none}
.topal-service-menu[open]>summary{background:#ecf2fa}
.topal-service-menu-links{position:absolute;top:calc(100% + 8px);right:0;width:min(320px,90vw);background:#fff;box-shadow:0 12px 35px #081f3a36;padding:8px;border-radius:10px;border:1px solid #dce5ee}
.topal-service-menu-links a,.topal-service-widget nav a{display:flex;align-items:center;gap:9px;padding:11px;color:#193851;text-decoration:none;font-size:.86rem;font-weight:700;border-radius:7px}
.topal-service-menu-links a:hover,.topal-service-menu-links a:focus-visible{background:#eaf1f9}
.topal-service-menu-links svg,.topal-service-widget svg{width:20px;height:20px;flex:none;color:#d31d38}
.topal-online-home{padding-block:45px!important}
.topal-online-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:25px}
.topal-online-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:#fff;border:1px solid #dce4ec;box-shadow:0 6px 22px #162c3f10;border-radius:13px;padding:18px;color:#162c40;min-width:0;overflow:hidden}
.topal-online-card:hover,.topal-online-card:focus-visible{border-color:#d91f35;box-shadow:0 6px 22px #162c3f24;transform:translateY(-2px)}
.topal-online-photo{display:block;width:100%;aspect-ratio:4/3;border-radius:12px;object-fit:cover;object-position:center;margin-bottom:2px;background:#f2f5f8}
.topal-online-card strong{font-size:1.07rem}
.topal-online-desc{color:#53687a;font-size:.87rem;line-height:1.5;display:block;flex:1 1 auto}
.topal-online-cta{font-size:.85rem;font-weight:800;color:#ba1e33;margin-top:auto}
.topal-service-footer{display:flex;gap:20px;align-items:center;padding-bottom:24px;flex-wrap:wrap}
.topal-service-footer>strong{color:#fff;font-size:.9rem}
.topal-service-footer nav{display:flex;gap:15px;flex-wrap:wrap}
.topal-service-footer nav a{display:inline-flex;align-items:center;gap:7px;color:#d5e5f5;text-decoration:underline;font-size:.82rem}
.topal-service-footer nav svg{width:18px;height:18px}
.topal-service-widget{position:fixed;z-index:58;bottom:18px;right:17px;max-width:calc(100vw - 34px);font-size:.84rem}
.topal-service-widget>summary{list-style:none;background:#123a67;border:1px solid #b3d3f2;color:#fff;box-shadow:0 5px 25px #071e3750;cursor:pointer;border-radius:25px;padding:11px 17px;font-weight:780;text-align:center}
.topal-service-widget>summary:focus-visible,.topal-service-menu>summary:focus-visible{outline:3px solid #2675bd;outline-offset:3px}
.topal-service-widget>nav{background:#fff;border:1px solid #d8e4ef;border-radius:12px;box-shadow:0 6px 28px #0a1b3440;position:absolute;bottom:calc(100% + 9px);right:0;min-width:min(310px,calc(100vw - 34px));padding:9px}
.topal-service-widget>nav a:hover{background:#eef4fc}
.topal-service-wrap{max-width:1010px!important}
.topal-service-info{padding:13px 16px;border-left:3px solid #1d5c9a;background:#ebf3fc;color:#274962;line-height:1.6;font-size:.9rem;margin:18px 0 24px}
.topal-online-form{max-width:880px;background:white;border:1px solid #e0e7ee;border-radius:14px;padding:clamp(20px,3.5vw,40px);box-shadow:0 6px 22px #162c3f0f;margin-bottom:25px}
.topal-online-form fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
.topal-online-form legend{font-size:1.27rem;font-weight:800;padding:0;margin:0 0 20px;color:#16324b}
.topal-service-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 19px}
.topal-service-field{display:flex;flex-direction:column;gap:6px;font-size:.91rem;font-weight:730;color:#30425a;min-width:0}
.topal-service-field.full{grid-column:1/-1;margin-top:15px}
.topal-service-field input,.topal-service-field select,.topal-service-field textarea{font:inherit;font-weight:400;font-size:1rem;width:100%;max-width:100%;padding:11px;border:1px solid #b5c3d1;border-radius:7px;background:#fff;color:#123047}
.topal-service-field input[type=file]{font-size:.8rem}
.topal-service-field input:focus-visible,.topal-service-field select:focus-visible,.topal-service-field textarea:focus-visible{outline:3px solid #3574b0;outline-offset:1px}
.topal-service-field textarea{resize:vertical;min-height:100px}
.topal-service-privacy{display:flex;align-items:flex-start;gap:9px;margin:20px 0 24px;font-size:.87rem;line-height:1.5;color:#2c4660}
.topal-service-privacy input{margin-top:5px;width:17px;height:17px;flex:none}
.topal-service-privacy a{color:#07559a;text-decoration:underline}
.topal-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:1180px){.topal-service-menu>summary{padding:8px;font-size:.75rem}}
@media(max-width:1000px){.topal-service-menu{display:none}.topal-service-widget{bottom:12px;right:11px}}
@media(max-width:700px){.topal-online-cards{grid-template-columns:1fr}.topal-service-fields{grid-template-columns:1fr}.topal-service-field.full{grid-column:1}.topal-service-widget>summary{padding:10px 13px}}
.topal-online-card :is(h2,h3){font-size:1.09rem;color:#162c40;line-height:1.3;margin:0}
.topal-online-form h2{font-size:1.27rem;color:#16324b;line-height:1.3;margin:0 0 15px}
.topal-online-form fieldset{margin-bottom:28px}

/* V9.3 – four-step tabbed online-service forms; no-JS fallback keeps every section visible. */
.topal-wizard-tabs{display:none;gap:7px;align-items:stretch;margin:0 0 22px;border-bottom:1px solid #dce5ec;overflow-x:auto;scrollbar-width:thin}
.topal-online-form[data-wizard-ready] .topal-wizard-tabs{display:flex}
.topal-wizard-tab{flex:1 1 0;min-width:95px;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 7px 13px;border:0;border-bottom:3px solid transparent;background:transparent;color:#526679;font:inherit;font-size:.86rem;font-weight:700;white-space:nowrap;cursor:pointer}
.topal-wizard-tab:hover{color:#af182b;background:#fff5f6}
.topal-wizard-tab.is-current{border-bottom-color:#c8233d;color:#a6172f;background:#fff7f8}
.topal-wizard-tab:focus-visible,.topal-wizard-back:focus-visible{outline:3px solid #2875ac;outline-offset:2px}
.topal-wizard-number{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #b7c8d5;border-radius:50%;font-size:.78rem;flex:none}
.topal-wizard-tab.is-current .topal-wizard-number{background:#c8233d;color:#fff;border-color:#c8233d}
.topal-wizard-panel[hidden],.topal-wizard-actions[hidden],.topal-wizard-actions>[hidden]{display:none!important}
.topal-wizard-panel h2{font-size:1.2rem;margin:0 0 18px;color:#16324b}
.topal-wizard-panel .topal-service-field.full{margin-top:0}
.topal-wizard-actions{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:22px;border-top:1px solid #e2e9ee;padding-top:20px}
.topal-wizard-actions>.btn{margin-left:auto;min-width:120px}
.topal-wizard-back{border:1px solid #c5d2dd;border-radius:8px;background:#fff;color:#22415a;cursor:pointer;padding:11px 17px;font:inherit;font-weight:700}
.topal-wizard-back:disabled{opacity:.45;cursor:default}
.topal-wizard-status{color:#62768a;font-size:.86rem;white-space:nowrap}
.topal-online-form[data-wizard-ready] .topal-wizard-fallback-submit{display:none}
.topal-online-form[data-wizard-ready]{padding:clamp(18px,2.6vw,28px)}
.topal-online-form[data-wizard-ready] .topal-service-privacy{margin-bottom:2px}
@media(max-width:550px){.topal-wizard-tabs{gap:0}.topal-wizard-tab{font-size:.77rem;min-width:82px;gap:4px;flex-direction:column;padding:9px 5px 10px}.topal-wizard-number{width:23px;height:23px}.topal-wizard-actions>.btn{min-width:100px}.topal-wizard-status{font-size:.77rem}}
/* Keep the fixed mobile Online-Services shortcut clear of wizard navigation. */
@media(max-width:700px){.topal-online-form[data-wizard-ready] .topal-wizard-actions{padding-bottom:66px}}

/* V9.4: cancel returns home without form submission. */
.topal-wizard-cancel{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;background:#fff;color:#8e1a30!important;border:1px solid #d7a3ac;border-radius:8px;font-size:.88rem;font-weight:750;text-decoration:none!important;white-space:nowrap}
.topal-wizard-cancel:hover{background:#fff1f3}
.topal-wizard-cancel:focus-visible{outline:3px solid #2875ac;outline-offset:2px}
.topal-wizard-fallback-submit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:550px){.topal-wizard-actions{gap:7px;flex-wrap:wrap}.topal-wizard-cancel{padding:9px;font-size:.8rem}.topal-wizard-back{padding:9px 12px}.topal-wizard-status{order:4;width:100%;text-align:center}}

/* V9.8: proportional aligned header actions; prevent wrapping of the red offer button. */
@media (min-width:1001px) {
 .header-actions{gap:9px;flex-shrink:0}
 .header-actions>.topal-header-offer,.header-actions>.topal-header-appointment,.topal-service-menu>summary{min-height:41px;display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;line-height:1.2;font-size:.8rem;white-space:nowrap;border-radius:8px}
 .header-actions>.topal-header-offer{min-width:130px}
 .header-actions>.topal-header-appointment{border:1px solid #ccd8e4;color:#16324a;background:#f5f8fc;font-weight:800}
}
@media(min-width:1001px) and (max-width:1300px){.header-inner{gap:12px}.header .nav{gap:10px}.header-actions{gap:7px}}
.topal-appointment-form{max-width:860px}.topal-appointment-actions{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:20px}
.topal-appointment-cta{background:#fff}.topal-appointment-footer{padding:12px 0 22px}.topal-appointment-footer a{color:#fff;text-decoration:underline;text-underline-offset:4px}
/* V9.8 responsive safety: the extra appointment item must not push the mobile menu out. */
@media(max-width:1250px){
 .header .nav{display:none}
 .header .v8-mobile-nav{display:block}
}
@media(max-width:1000px){
 .header-actions>.topal-header-appointment{display:none}
}

/* Keep the original two prominent header actions on regular laptop screens.
   The appointment remains available inside Online-Services and in the mobile menu. */
@media(min-width:1251px) and (max-width:1550px){.header-actions>.topal-appt-with-services{display:none}}

/* V9.9: semantic images with SEO alt texts; preserve existing card grid and sizing. */
.topal-online-picture{display:block;width:100%;min-width:0;line-height:0}
.topal-online-picture .topal-online-photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
#leistungen .cards>.card .card-photo-wrap{grid-column:1;grid-row:1 / span 3;width:78px;height:78px;display:block;align-self:start}
#leistungen .cards>.card .card-photo-wrap .card-photo{width:78px;height:78px;object-fit:cover;display:block}
.topal-answer-first{font-size:.96rem;line-height:1.6;color:#52677b;max-width:900px;margin:8px 0 18px}
.topal-contact-hint{margin:0 0 8px;font-size:.82rem;color:#50657a}
.topal-source-checked{font-size:.8rem;color:#63758a;margin-top:14px}
@media(max-width:660px){#leistungen .cards>.card .card-photo-wrap,#leistungen .cards>.card .card-photo-wrap .card-photo{width:72px;height:72px}}

/* TOPAL V9.10: bilingual contact cue and local heat planning guide, no existing layout overrides. */
.topal-bilingual-note{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;background:#eef5fd;border-left:3px solid #1459aa;color:#183b5a;border-radius:5px;padding:9px 13px;margin:15px 0 3px;font-size:.86rem;line-height:1.4}
.topal-bilingual-note strong{color:#14385d;font-size:.89rem}
.topal-bilingual-note span{color:#365771}
.topal-local-teaser{padding:29px 0!important;background:#fff}
.topal-local-teaser-inner{border:1px solid #dce5ef;border-left:4px solid #db1931;border-radius:10px;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:#f9fbfe}
.topal-local-teaser h2{font-size:clamp(1.15rem,1.75vw,1.6rem);margin:0 0 8px}
.topal-local-teaser p:not(.eyebrow){margin:0 0 4px;max-width:800px;font-size:.94rem}
.topal-local-teaser small{color:#62778a}
.topal-local-teaser a.btn{flex-shrink:0;white-space:normal;text-align:center}
.topal-local-wrap{max-width:990px;margin-inline:auto}
.topal-local-advice h1{max-width:920px;line-height:1.12}
.topal-local-advice h2{font-size:clamp(1.42rem,2.5vw,1.96rem);margin:32px 0 12px}
.topal-local-advice h3{font-size:1.08rem;letter-spacing:0;margin:18px 0 8px}
.topal-local-advice p,.topal-local-advice li{line-height:1.75}
.topal-local-advice .lead{max-width:none}
.topal-local-status{background:#eaf2fa;border-left:4px solid #145aaa;padding:14px 18px;border-radius:5px;color:#173d63}
.topal-local-table-wrap{overflow-x:auto;margin:18px 0 27px}
.topal-local-table{width:100%;border-collapse:collapse;min-width:420px;font-size:.93rem}
.topal-local-table th,.topal-local-table td{border-bottom:1px solid #dce6ef;padding:13px 15px;text-align:left;vertical-align:top}
.topal-local-table thead th{background:#eaf1f8;color:#12385b}
.topal-local-table tbody th{font-weight:750;color:#143759;width:27%}
.topal-local-steps{padding-left:24px}
.topal-local-steps li{margin:9px 0;padding-left:3px}
.topal-local-sources{padding-left:19px;overflow-wrap:anywhere}
.topal-local-sources a,.topal-local-related a{color:#0a58a7;text-decoration:underline;text-underline-offset:3px}
.topal-local-related{padding:15px 0;border-top:1px solid #d8e4f0;font-weight:700;margin:5px 0 15px}
.topal-local-context{padding:4px 0 22px}
@media(max-width:760px){.topal-local-teaser-inner{align-items:start;flex-direction:column;padding:19px;gap:13px}.topal-local-teaser .btn{width:100%;justify-content:center}.topal-bilingual-note{gap:5px}}

/* V9.12: optional authentic owner/team introduction and stronger online enquiry cards. */
.topal-online-home .container > h2{font-size:clamp(1.6rem,2.6vw,2.2rem);color:#102b49}
.topal-online-cta{display:inline-flex;align-self:flex-start;padding:9px 14px;border-radius:8px;color:#fff;background:#da1932;font-size:.83rem;font-weight:800}
.topal-online-card:hover .topal-online-cta{background:#b7152b}
.topal-about{background:#fff}
.topal-about-layout{display:grid;grid-template-columns:minmax(230px,.48fr) minmax(0,1fr);gap:34px;align-items:center}
.topal-about-layout--text-only{grid-template-columns:minmax(0,1fr)}
.topal-about-photo img{width:100%;max-height:490px;aspect-ratio:4/4;object-fit:cover;object-position:center;border-radius:16px;box-shadow:0 12px 30px #102f4b18}
.topal-about-copy{max-width:750px}.topal-about-copy>h2{margin:0 0 4px}.topal-about-role{font-weight:750;color:#145ba1;margin:0 0 16px}
.topal-about-copy>p:not(.topal-about-role){font-size:.96rem;line-height:1.7;margin-bottom:14px}
.topal-about-team{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:16px;margin:17px 0 23px}
.topal-about-team--text-only{display:block}
.topal-about-team img{width:120px;height:95px;object-fit:cover;border-radius:11px}
.topal-about-team strong{color:#123656}.topal-about-team p{margin:5px 0 0;font-size:.88rem}
@media(max-width:700px){.topal-about-layout{grid-template-columns:1fr;gap:19px}.topal-about-photo img{max-height:350px;aspect-ratio:4/3;object-position:center 29%}.topal-about-team{grid-template-columns:100px 1fr}.topal-about-team img{width:100px;height:82px}}

/* V9.15: configurable positions for the four home-page service card photos.
   Scope strictly to .topal-service-cards to preserve other card groups. */
#leistungen .topal-service-cards,
.topal-service-cards { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch }
#leistungen .topal-service-cards > .card,
.topal-service-cards > .card { min-width:0; min-height:0; overflow:hidden;align-content:start;border-radius:11px;box-shadow:0 3px 12px rgba(18,42,69,.035) }
#leistungen .topal-service-cards > .card picture,
.topal-service-cards > .card picture {display:block;overflow:hidden;background:#f1f5f8;border-radius:8px;min-width:0}
#leistungen .topal-service-cards > .card picture img,
.topal-service-cards > .card picture img {display:block;width:100%;height:100%;max-width:100%;margin:0;object-fit:cover;object-position:center;border-radius:8px;box-shadow:none;aspect-ratio:auto}
/* Image above, H2 underneath, followed by description and link */
#leistungen .topal-service-cards > .card.layout-top,
.topal-service-cards > .card.layout-top {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:118px auto minmax(0,1fr) auto;gap:6px;padding:10px 10px 13px;min-height:263px}
#leistungen .topal-service-cards > .card.layout-top picture,
.topal-service-cards > .card.layout-top picture {grid-column:1;grid-row:1;width:100%;height:118px}
#leistungen .topal-service-cards > .card.layout-top h2,
.topal-service-cards > .card.layout-top h2 {grid-column:1;grid-row:2;font-size:1rem;line-height:1.28;margin:1px 0 0}
#leistungen .topal-service-cards > .card.layout-top p,
.topal-service-cards > .card.layout-top p {grid-column:1;grid-row:3;margin:0 0 4px;font-size:.80rem;line-height:1.42;min-height:0}
#leistungen .topal-service-cards > .card.layout-top .text-link,
.topal-service-cards > .card.layout-top .text-link {grid-column:1;grid-row:4;align-self:end;font-size:.78rem}
/* Compact horizontal card: two choices, left or right photo */
#leistungen .topal-service-cards > .card.layout-left,
.topal-service-cards > .card.layout-left,
#leistungen .topal-service-cards > .card.layout-right,
.topal-service-cards > .card.layout-right {display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:5px 12px;padding:14px 12px;min-height:152px}
#leistungen .topal-service-cards > .card.layout-left,
.topal-service-cards > .card.layout-left {grid-template-columns:75px minmax(0,1fr)}
#leistungen .topal-service-cards > .card.layout-right,
.topal-service-cards > .card.layout-right {grid-template-columns:minmax(0,1fr) 75px}
#leistungen .topal-service-cards > .card.layout-left picture,
.topal-service-cards > .card.layout-left picture {grid-column:1;grid-row:1/span 3;width:75px;height:86px}
#leistungen .topal-service-cards > .card.layout-left h2,
#leistungen .topal-service-cards > .card.layout-left p,
#leistungen .topal-service-cards > .card.layout-left .text-link,
.topal-service-cards > .card.layout-left h2,
.topal-service-cards > .card.layout-left p,
.topal-service-cards > .card.layout-left .text-link {grid-column:2}
#leistungen .topal-service-cards > .card.layout-right picture,
.topal-service-cards > .card.layout-right picture {grid-column:2;grid-row:1/span 3;width:75px;height:86px}
#leistungen .topal-service-cards > .card.layout-right h2,
#leistungen .topal-service-cards > .card.layout-right p,
#leistungen .topal-service-cards > .card.layout-right .text-link,
.topal-service-cards > .card.layout-right h2,
.topal-service-cards > .card.layout-right p,
.topal-service-cards > .card.layout-right .text-link {grid-column:1}
#leistungen .topal-service-cards > .card.layout-left h2,
#leistungen .topal-service-cards > .card.layout-right h2,
.topal-service-cards > .card.layout-left h2,
.topal-service-cards > .card.layout-right h2 {grid-row:1;align-self:start;margin:2px 0 0;font-size:1rem;line-height:1.25}
#leistungen .topal-service-cards > .card.layout-left p,
#leistungen .topal-service-cards > .card.layout-right p,
.topal-service-cards > .card.layout-left p,
.topal-service-cards > .card.layout-right p {grid-row:2;margin:0;font-size:.78rem;line-height:1.4;min-height:0}
#leistungen .topal-service-cards > .card.layout-left .text-link,
#leistungen .topal-service-cards > .card.layout-right .text-link,
.topal-service-cards > .card.layout-left .text-link,
.topal-service-cards > .card.layout-right .text-link {grid-row:3;align-self:end;font-size:.77rem}
@media(max-width:1190px){#leistungen .topal-service-cards,.topal-service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){
 #leistungen .topal-service-cards,.topal-service-cards{grid-template-columns:minmax(0,1fr)}
 #leistungen .topal-service-cards > .card.layout-top,.topal-service-cards > .card.layout-top{grid-template-rows:145px auto minmax(0,1fr) auto;min-height:0}
 #leistungen .topal-service-cards > .card.layout-top picture,.topal-service-cards > .card.layout-top picture{height:145px}
 #leistungen .topal-service-cards > .card.layout-left,.topal-service-cards > .card.layout-left,
 #leistungen .topal-service-cards > .card.layout-right,.topal-service-cards > .card.layout-right{min-height:140px}
}

/* V9.17: correct legacy .card-photo-wrap (78x78px) specificity. Applies
   to existing photos and newly uploaded editor photos, DE/TR/EN.
   Only changes #leistungen cards; no effect on Online-Services/projects. */
#leistungen .topal-service-cards > a.card picture.card-photo-wrap,
#leistungen .topal-service-cards > a.card picture {
 display:block;min-width:0;overflow:hidden;border-radius:8px;align-self:stretch;
}
#leistungen .topal-service-cards > a.card picture.card-photo-wrap > img.card-photo,
#leistungen .topal-service-cards > a.card picture > img.card-photo {
 width:100%;height:100%;max-width:100%;max-height:100%;display:block;
 object-fit:cover;object-position:center;aspect-ratio:auto;
}
#leistungen .topal-service-cards > a.card.layout-top picture.card-photo-wrap,
#leistungen .topal-service-cards > a.card.layout-top picture {
 grid-column:1;grid-row:1;width:100%;height:118px;
}
#leistungen .topal-service-cards > a.card.layout-left picture.card-photo-wrap,
#leistungen .topal-service-cards > a.card.layout-left picture {
 grid-column:1;grid-row:1 / span 3;width:75px;height:86px;
}
#leistungen .topal-service-cards > a.card.layout-right picture.card-photo-wrap,
#leistungen .topal-service-cards > a.card.layout-right picture {
 grid-column:2;grid-row:1 / span 3;width:75px;height:86px;
}
@media(max-width:660px){
 #leistungen .topal-service-cards > a.card.layout-top picture.card-photo-wrap,
 #leistungen .topal-service-cards > a.card.layout-top picture {height:145px}
}

/* V9.19: Optional layouts only; original CSS remains authoritative without setting. */
.page-hero[data-topal-cover="custom"]::before{background-image:var(--topal-editor-cover)!important;background-position:center;background-size:cover}
.photo-shape[style*="background-image"],.service-card .thumb[style*="background-image"]{background-size:cover;background-position:center}
/* Detail-page service cards: original is image left. */
.service-cards.topal-group-top > .service-card{display:flex;flex-direction:column;gap:0}
.service-cards.topal-group-top > .service-card .thumb{width:100%;min-height:0;height:150px;flex:none;background-size:cover}
.service-cards.topal-group-top > .service-card .content{padding:17px 18px 20px}
.service-cards.topal-group-right > .service-card{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:20px}
.service-cards.topal-group-right > .service-card .thumb{grid-column:2;grid-row:1;width:100%;min-height:175px}
.service-cards.topal-group-right > .service-card .content{grid-column:1;grid-row:1;padding:18px 0 18px 19px;min-width:0}
.service-cards.topal-group-left > .service-card{display:grid;grid-template-columns:145px minmax(0,1fr);gap:20px}
.service-cards.topal-group-left > .service-card .thumb{grid-column:1;grid-row:1;min-height:175px}
.service-cards.topal-group-left > .service-card .content{grid-column:2;grid-row:1;padding:18px 18px 18px 0;min-width:0}
/* Online cards: existing pictures are full width. Side layouts keep title and CTA readable. */
.topal-online-cards.topal-group-left > .topal-online-card,
.topal-online-cards.topal-group-right > .topal-online-card{display:grid;grid-template-rows:auto 1fr auto;align-content:start;gap:8px 13px}
.topal-online-cards.topal-group-left > .topal-online-card{grid-template-columns:105px minmax(0,1fr)}
.topal-online-cards.topal-group-right > .topal-online-card{grid-template-columns:minmax(0,1fr) 105px}
.topal-online-cards.topal-group-left > .topal-online-card .topal-online-photo,
.topal-online-cards.topal-group-right > .topal-online-card .topal-online-photo{grid-row:1/span 3;width:100%;height:120px;aspect-ratio:auto;min-width:0;object-fit:cover;margin:0}
.topal-online-cards.topal-group-left > .topal-online-card .topal-online-photo{grid-column:1}
.topal-online-cards.topal-group-right > .topal-online-card .topal-online-photo{grid-column:2}
.topal-online-cards.topal-group-left > .topal-online-card :is(h2,h3),
.topal-online-cards.topal-group-left > .topal-online-card .topal-online-desc,
.topal-online-cards.topal-group-left > .topal-online-card .topal-online-cta{grid-column:2;min-width:0}
.topal-online-cards.topal-group-right > .topal-online-card :is(h2,h3),
.topal-online-cards.topal-group-right > .topal-online-card .topal-online-desc,
.topal-online-cards.topal-group-right > .topal-online-card .topal-online-cta{grid-column:1;min-width:0}
.topal-online-cards.topal-group-left > .topal-online-card :is(h2,h3),
.topal-online-cards.topal-group-right > .topal-online-card :is(h2,h3){grid-row:1;font-size:.96rem;line-height:1.26}
.topal-online-cards.topal-group-left > .topal-online-card .topal-online-desc,
.topal-online-cards.topal-group-right > .topal-online-card .topal-online-desc{grid-row:2;font-size:.78rem}
.topal-online-cards.topal-group-left > .topal-online-card .topal-online-cta,
.topal-online-cards.topal-group-right > .topal-online-card .topal-online-cta{grid-row:3;align-self:end;font-size:.78rem}
/* Project figures: image over caption by default. */
.project-grid.topal-group-left > .project,
.project-grid.topal-group-right > .project{display:grid;align-items:stretch;grid-template-rows:auto;min-width:0}
.project-grid.topal-group-left > .project{grid-template-columns:43% minmax(0,1fr)}
.project-grid.topal-group-right > .project{grid-template-columns:minmax(0,1fr) 43%}
.project-grid.topal-group-left > .project :is(picture,img),
.project-grid.topal-group-right > .project :is(picture,img){width:100%;height:100%;min-height:128px;object-fit:cover}
.project-grid.topal-group-left > .project > :is(picture,img){grid-column:1;grid-row:1}
.project-grid.topal-group-right > .project > :is(picture,img){grid-column:2;grid-row:1}
.project-grid.topal-group-left > .project figcaption{grid-column:2;grid-row:1;align-self:center}
.project-grid.topal-group-right > .project figcaption{grid-column:1;grid-row:1;align-self:center}
@media(max-width:630px){
 .service-cards.topal-group-left > .service-card{grid-template-columns:105px minmax(0,1fr);gap:15px}
 .service-cards.topal-group-right > .service-card{grid-template-columns:minmax(0,1fr) 105px;gap:15px}
 .service-cards.topal-group-top > .service-card .thumb{height:135px}
 .service-cards.topal-group-right > .service-card .content{padding:14px 0 14px 13px}
 .service-cards.topal-group-left > .service-card .content{padding:14px 14px 14px 0}
 .project-grid.topal-group-left > .project,.project-grid.topal-group-right > .project{min-height:135px}
}

/* Category subpage icon cards also support optional side placement. */
.category-pills.topal-group-left > .pill-card,
.category-pills.topal-group-right > .pill-card{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
.category-pills.topal-group-left > .pill-card{flex-direction:row;justify-content:flex-start}
.category-pills.topal-group-right > .pill-card{flex-direction:row-reverse;justify-content:space-between}
.category-pills:is(.topal-group-left,.topal-group-right) > .pill-card .mini{display:inline-flex;align-items:center;justify-content:center;margin:0;flex:none}

/* V9.28 Gewerbe/Objektbetreuung: bestehendes responsives Design beibehalten */
.topal-business-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:32px;align-items:start;margin-top:18px}
.topal-business-breadcrumb{font-size:.9rem;margin-bottom:16px}
.topal-business-breadcrumb a{color:inherit}
.topal-business-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.topal-business-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.topal-business-cards .card{display:block}.topal-business-card-title{font-weight:700;font-size:1.1rem;margin:12px 0 6px}
.topal-business-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.topal-business-features>section{border-bottom:1px solid #dfe6ef;padding:12px 0}.topal-business-process li{margin-bottom:13px}
.topal-business-check li{margin-bottom:9px}.topal-prelive-warning{font-size:.88rem;color:#75421c;background:#fff8ef;padding:10px;border-left:3px solid #cc945b}
.topal-commercial-teaser-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.topal-commercial-footer{padding:10px 0}.topal-commercial-footer a{color:inherit}
@media(max-width:850px){.topal-business-hero-grid{grid-template-columns:1fr}.topal-business-features{grid-template-columns:1fr}}
@media(max-width:620px){.topal-business-cards{grid-template-columns:1fr}}
/* Hero background images cannot use <picture>; retain legacy JPEG CSS rule above as fallback. */
@supports (background-image: image-set(url('topal-v8/heizungsanlage-heiztechnik.webp') type('image/webp'))) {
 .hero-panel.heat:before{background-image:image-set(url('topal-v8/heizungsanlage-heiztechnik.webp') type('image/webp'),url('topal-v8/heizung.jpg') type('image/jpeg'))}
 .hero-panel.bath:before{background-image:image-set(url('topal-v8/sanitaertechnik-installation.webp') type('image/webp'),url('topal-v8/sanitaer.jpg') type('image/jpeg'))}
 .hero-panel.air:before{background-image:image-set(url('topal-v8/klimaanlage-aussengeraet-technik.webp') type('image/webp'),url('topal-v8/klima.jpg') type('image/jpeg'))}
}

/* TOPAL V9.29 | Diagonalbanner: drei identische Grid-Spalten.
   Bestehende HTML-Struktur, Bildklassen und Editor-Bildzuordnung bleiben erhalten.
   Die alten, ungleich breiten SVG-Ribbons werden nicht mehr dargestellt. */
.hero-diagonal {
  --banner-skew: 80px;
  --banner-overlay-width: 76%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: clamp(360px, 29vw, 460px);
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-diagonal .hero-photo-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
  pointer-events: none;
}
.hero-diagonal .hero-photo,
.hero-diagonal .hero-photo.photo-heizung,
.hero-diagonal .hero-photo.photo-sanitaer,
.hero-diagonal .hero-photo.photo-klima {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  bottom: auto;
  width: auto;
  height: 100%;
  min-width: 0;
  z-index: auto;
  clip-path: none;
  background-size: cover;
}
.hero-diagonal .hero-ribbons { display: none; }
.hero-diagonal .hero-copy,
.hero-diagonal .hero-copy.heat,
.hero-diagonal .hero-copy.bath,
.hero-diagonal .hero-copy.air {
  position: relative;
  grid-row: 1;
  top: auto;
  bottom: auto;
  left: auto !important;
  right: auto;
  width: 100% !important;
  justify-self: stretch;
  height: 100%;
  min-height: 0;
  padding: 14px 0;
  z-index: 1;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: left;
  border: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-diagonal .hero-copy.heat { grid-column: 1; }
.hero-diagonal .hero-copy.bath { grid-column: 2; }
.hero-diagonal .hero-copy.air { grid-column: 3; }
/* Jedes Farbfeld hat die gleiche Breite und exakt dieselbe Diagonalverschiebung. */
.hero-diagonal .hero-copy::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--banner-overlay-width);
  height: 100%;
  z-index: -1;
  filter: none;
  clip-path: polygon(var(--banner-skew) 0,100% 0,100% 100%,0 100%);
  background: linear-gradient(100deg,rgba(207,21,48,.78),rgba(211,19,45,.82) 52%,rgba(142,0,22,.90));
}
.hero-diagonal .hero-copy.bath::before {
  background: linear-gradient(100deg,rgba(0,97,190,.78),rgba(2,86,174,.86) 58%,rgba(5,44,115,.91));
}
.hero-diagonal .hero-copy.air::before {
  background: linear-gradient(100deg,rgba(7,89,159,.75),rgba(3,32,75,.88));
}
.hero-diagonal .hero-copy::after { content: none; }
.hero-diagonal .hero-copy-inner {
  position: absolute;
  top: 50%;
  right: clamp(12px,3.7vw,55px);
  transform: translateY(-50%);
  width: clamp(185px,16vw,230px);
  max-width: calc(100% - 15px);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.hero-diagonal .hero-copy .symbol {
  justify-content: flex-start;
  flex: none;
}
.hero-diagonal .hero-copy .hero-heading {
  font-size: clamp(21px,2vw,31px);
  margin-bottom: 10px;
}
.hero-diagonal .hero-copy ul { display: block; margin-bottom: 14px; }
.hero-diagonal .hero-copy li {
  font-size: clamp(11.5px,.95vw,15px);
  line-height: 1.4;
  white-space: nowrap;
  margin-bottom: 7px;
}
.hero-diagonal .hero-copy.bath .hero-more {
  left: auto;
  position: relative;
}
@media (min-width: 900px) and (max-width: 1200px) {
  .hero-diagonal { --banner-skew: 56px; --banner-overlay-width: 86%; }
  .hero-diagonal .hero-copy-inner {
    width: clamp(180px,17vw,205px);
    right: clamp(11px,2vw,22px);
  }
  .hero-diagonal .hero-copy .symbol { height: 44px; }
  .hero-diagonal .hero-copy .symbol .ui-icon { width: 42px; height: 42px; }
  .hero-diagonal .hero-copy .hero-heading { font-size: 21px; }
}
@media (max-width: 899px) {
  /* Stapel statt Diagonalen, weiterhin dieselben drei editierbaren Fotos. */
  .hero-diagonal {
    --banner-skew: 0px;
    --banner-overlay-width: 71%;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: repeat(3, 280px);
    height: auto;
  }
  .hero-diagonal .hero-photo-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: repeat(3,minmax(0,1fr));
  }
  .hero-diagonal .hero-copy,
  .hero-diagonal .hero-copy.heat,
  .hero-diagonal .hero-copy.bath,
  .hero-diagonal .hero-copy.air {
    grid-column: 1;
    grid-row: auto;
    min-height: 280px;
    height: 280px;
    padding: 18px 0;
  }
  .hero-diagonal .hero-copy::before { clip-path: none; }
  .hero-diagonal .hero-copy-inner {
    width: min(230px,61%);
    max-width: 61%;
    right: clamp(17px,4.5vw,36px);
  }
  .hero-diagonal .hero-copy .symbol { height: 42px; margin-bottom: 4px; }
  .hero-diagonal .hero-copy .symbol .ui-icon { width: 40px; height: 40px; }
  .hero-diagonal .hero-copy .hero-heading { font-size: 24px; margin-bottom: 6px; }
  .hero-diagonal .hero-copy li { font-size: 13px; margin-bottom: 4px; }
  .hero-diagonal .hero-copy ul { margin-bottom: 10px; }
}

/* V9.31: Optional static Google review display. No external resources. */
.topal-proof-google .topal-proof-google-link{display:flex;gap:3px;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit}
.topal-proof-google .topal-proof-google-link:focus-visible,.topal-review-card a:focus-visible,.topal-reviews-home .btn:focus-visible{outline:3px solid #0755ac;outline-offset:4px}
.topal-proof-google-stars,.topal-review-stars,.topal-reviews-summary>svg{color:#b47700}
.topal-proof-google-stars svg{display:block}
.topal-reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0}
.topal-review-card{border:1px solid #dbe3ed;border-radius:14px;box-shadow:0 7px 24px rgba(10,31,61,.08);padding:23px;background:#fff;min-width:0;color:#1b2b42}
.topal-review-stars{display:flex;gap:2px;align-items:center;margin-bottom:14px}
.topal-review-text{white-space:normal;overflow-wrap:anywhere;line-height:1.55}
.topal-review-meta{color:#536279;margin-top:16px}
.topal-review-meta strong{color:#1b2b42}
.topal-review-original{font-size:.88rem;color:#526178}
.topal-reviews-summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topal-reviews-notice{font-size:.84rem;line-height:1.5;color:#4e5b6d;margin:16px 0}
.topal-reviews-sidebar{border-top:1px solid #dbe3ed;margin-top:22px;padding-top:18px}
.topal-reviews-sidebar .topal-review-card{box-shadow:none;padding:15px}
.topal-review-box-title{font-weight:700;color:#1b2b42}
@media(max-width:1080px){.topal-reviews-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.detail-box:has(>.topal-reviews-sidebar){display:flex;flex-direction:column}.detail-box>.topal-reviews-sidebar{order:-1;border-top:0;margin-top:0;margin-bottom:18px}}


/* TOPAL V9.34 | Homepage layout from provided "Nachher" preview.
   Source imagery, classes, icons, headings and routes remain unchanged. */
:root{--container:1200px}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
@media(max-width:590px){.container{width:min(var(--container),calc(100% - 28px))}}
/* The dark area flanks the centred 1920px banner. */
#main:has(> .hero-diagonal){background:linear-gradient(#0b1730,#0b1730) top/100% clamp(380px,22vw,460px) no-repeat}
.hero-diagonal{
 --s:70px;--panel-start:30%;--red:rgba(207,21,48,.88);--blue:rgba(0,97,190,.88);
 --h:clamp(380px,22vw,460px);
 position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 width:100%;max-width:1920px;height:var(--h);min-height:0;margin:0 auto;
 overflow:hidden;background:#0b1730;isolation:isolate;border-radius:0;
}
.hero-diagonal .hero-photo-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;pointer-events:none;z-index:0}
.hero-diagonal .hero-photo,.hero-diagonal .hero-photo.photo-heizung,.hero-diagonal .hero-photo.photo-sanitaer,.hero-diagonal .hero-photo.photo-klima{position:relative;inset:auto;width:100%;height:100%;min-width:0;clip-path:none;background-size:cover;background-position:center}
.hero-diagonal .hero-ribbons{display:none}
.hero-diagonal .hero-copy,.hero-diagonal .hero-copy.heat,.hero-diagonal .hero-copy.bath,.hero-diagonal .hero-copy.air{
 position:relative;grid-row:1;top:auto;bottom:auto;left:auto!important;right:auto;width:100%!important;
 height:100%;min-height:0;overflow:hidden;isolation:isolate;z-index:1;
 display:flex;align-items:center;justify-content:center;
 padding:22px 12px 22px calc(var(--panel-start) + var(--s) / 2 + 8px);
 margin:0;transform:none;text-align:left;border:0;text-decoration:none;color:white;
}
.hero-diagonal .hero-copy.heat{grid-column:1}.hero-diagonal .hero-copy.bath{grid-column:2}.hero-diagonal .hero-copy.air{grid-column:3}
.hero-diagonal .hero-copy::before{
 content:"";position:absolute;z-index:-1;top:0;bottom:0;left:var(--panel-start);right:0;
 width:auto;height:auto;filter:none;
 clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%);
 background:var(--red);
}
.hero-diagonal .hero-copy.bath::before,.hero-diagonal .hero-copy.air::before{background:var(--blue)}
.hero-diagonal .hero-copy::after{content:none}
.hero-diagonal .hero-copy-inner{
 position:static;inset:auto;transform:none;
 display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
 width:max-content;max-width:100%;min-height:310px;margin:0;padding:0;flex:0 1 auto;
}
.hero-diagonal .hero-copy .symbol{height:49px;flex:none;align-self:center;justify-content:center;margin:0 0 6px}
.hero-diagonal .hero-copy .symbol .ui-icon{width:44px;height:44px}
.hero-diagonal .hero-copy .hero-heading{font-size:clamp(22px,1.9vw,30px);margin:0 0 8px;align-self:center;white-space:nowrap;line-height:1.1}
.hero-diagonal .hero-copy ul{display:block;list-style:none;margin:0 0 16px;padding:0}
.hero-diagonal .hero-copy li{font-size:clamp(12px,.78vw,15px);line-height:1.4;white-space:nowrap;margin:3px 0}
.hero-diagonal .hero-more{align-self:center;position:static;left:auto;right:auto;margin-top:auto;white-space:nowrap}
.hero-diagonal a.hero-copy:focus-visible{outline:4px solid #ffd166;outline-offset:-5px;z-index:3}
.hero-diagonal a.hero-copy:hover .hero-more,.hero-diagonal a.hero-copy:focus-visible .hero-more{background:rgba(255,255,255,.19)}
#leistungen .topal-cleaning-note{margin:15px 0 0;font-size:.95rem;color:#314b68}
#leistungen .topal-cleaning-note a{color:#13549a;font-weight:750;text-decoration:underline;text-underline-offset:4px}
.proof-item .topal-proof-flags{display:inline-flex;gap:6px;align-items:center;margin-top:3px}
.proof-item .topal-proof-flags img{width:23px;height:16px;display:block;object-fit:cover}
@media(min-width:1081px) and (max-width:1300px){
 .hero-diagonal{--s:54px}
 .hero-diagonal .hero-copy,.hero-diagonal .hero-copy.heat,.hero-diagonal .hero-copy.bath,.hero-diagonal .hero-copy.air{padding-left:calc(var(--panel-start) + var(--s) / 2 + 5px);padding-right:6px}
 .hero-diagonal .hero-copy .hero-heading{font-size:22px}
 .hero-diagonal .hero-copy li{font-size:12px}
}
@media(max-width:1080px){
 #main:has(> .hero-diagonal){background:#fff}
 .hero-diagonal{--s:42px;--panel-start:24%;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,260px);height:auto;max-width:100%}
 .hero-diagonal .hero-photo-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
 .hero-diagonal .hero-copy,.hero-diagonal .hero-copy.heat,.hero-diagonal .hero-copy.bath,.hero-diagonal .hero-copy.air{
  grid-column:1;grid-row:auto;min-height:260px;height:260px;
  padding:12px 20px 12px calc(var(--panel-start) + var(--s) / 2 + 10px);justify-content:center;
 }
 .hero-diagonal .hero-copy::before{clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%)}
 .hero-diagonal .hero-copy-inner{min-height:0;max-width:100%;width:max-content;gap:3px}
 .hero-diagonal .hero-copy .symbol{height:35px;margin:0 0 2px}
 .hero-diagonal .hero-copy .symbol .ui-icon{width:34px;height:34px}
 .hero-diagonal .hero-copy .hero-heading{font-size:23px;margin:0 0 4px}
 .hero-diagonal .hero-copy ul{margin:0 0 7px}
 .hero-diagonal .hero-copy li{font-size:13px;white-space:normal;margin:2px 0}
}
@media(max-width:440px){
 .hero-diagonal{--panel-start:17%;--s:28px}
 .hero-diagonal .hero-copy,.hero-diagonal .hero-copy.heat,.hero-diagonal .hero-copy.bath,.hero-diagonal .hero-copy.air{padding-left:calc(var(--panel-start) + var(--s) / 2 + 6px);padding-right:8px}
}
/* Shared content alignment and strictly symmetric panel spacing. */
#leistungen > .container{width:min(var(--container),calc(100% - 48px))}
@media(max-width:590px){#leistungen > .container{width:min(var(--container),calc(100% - 28px))}}
@media(min-width:1081px){
 .hero-diagonal .hero-copy,.hero-diagonal .hero-copy.heat,.hero-diagonal .hero-copy.bath,.hero-diagonal .hero-copy.air{
  padding-left:calc(var(--panel-start) + var(--s) / 2 + 12px);padding-right:12px;
 }
}
@media(min-width:1081px) and (max-width:1300px){
 .hero-diagonal .hero-copy,.hero-diagonal .hero-copy.heat,.hero-diagonal .hero-copy.bath,.hero-diagonal .hero-copy.air{
  padding-left:calc(var(--panel-start) + var(--s) / 2 + 6px);padding-right:6px;
 }
}
@media(max-width:1080px){
 .hero-diagonal .hero-copy,.hero-diagonal .hero-copy.heat,.hero-diagonal .hero-copy.bath,.hero-diagonal .hero-copy.air{
  padding-left:calc(var(--panel-start) + var(--s) / 2 + 20px);padding-right:20px;
 }
}
@media(max-width:440px){
 .hero-diagonal .hero-copy,.hero-diagonal .hero-copy.heat,.hero-diagonal .hero-copy.bath,.hero-diagonal .hero-copy.air{
  padding-left:calc(var(--panel-start) + var(--s) / 2 + 8px);padding-right:8px;
 }
}
@media(min-width:1101px){
 #main:has(> .hero-diagonal) .contact-dark{padding-left:max(24px,calc((100vw - var(--container))/2))}
}
/* V9.35: Actions. All classes new, original theme tokens untouched. */
.topal-promo-bar{display:flex;align-items:center;justify-content:center;gap:12px;min-height:38px;padding:7px 48px 7px 16px;background:#0b1730;color:#fff;font-size:14px;position:relative;z-index:30}
.topal-promo-bar svg{flex:none;color:#7cc4ff}.topal-promo-bar a{color:#fff;text-decoration:underline;font-weight:750;white-space:nowrap}.topal-promo-close{background:transparent;border:0;color:inherit;cursor:pointer;font-size:25px;line-height:1;width:34px;height:34px}.topal-promo-bar .topal-promo-close{position:absolute;right:9px;top:calc(50% - 17px)}
.topal-promo-home-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:24px;align-items:start;margin-top:20px}.topal-promo-home-grid .topal-online-cards{margin:0;min-width:0}
.topal-promo-card{background:#fff;border:1px solid #dce5ee;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(20,33,61,.06);color:#14213d;min-width:0}.topal-promo-card>img{width:100%;height:150px;object-fit:cover;display:block}.topal-promo-card-body{padding:16px}.topal-promo-badge{display:inline-block;font-weight:800;font-size:11px;letter-spacing:.04em;border-radius:20px;background:#e8f2fd;color:#0a54a8;padding:4px 9px}.topal-promo-title{font-size:18px;font-weight:800;margin:10px 0 7px}.topal-promo-card-body>p{line-height:1.5}.topal-promo-btn{display:inline-block;padding:9px 13px;border-radius:6px;background:#0a54a8;color:#fff!important;font-weight:700;text-decoration:none}.topal-promo-large-link{display:inline-block;margin:8px 0 0 8px;color:#0a54a8;background:none;border:0;text-decoration:underline;cursor:pointer;font:inherit}.topal-promo-fine{font-size:12px;color:#5b6475;white-space:pre-line}
.topal-promo-popup{position:fixed;bottom:16px;left:16px;z-index:70;max-width:330px;background:#fff;color:#14213d;border:1px solid #dde3ec;box-shadow:0 12px 32px #0b17302e;border-radius:11px;overflow:hidden;grid-template-columns:92px 1fr;transform:translateY(10px);opacity:0;transition:opacity .25s,transform .25s}.topal-promo-popup.topal-promo-show{display:grid;transform:none;opacity:1}.topal-promo-popup>img{width:92px;height:100%;object-fit:cover}.topal-promo-popup>div{position:relative;padding:12px 30px 12px 12px}.topal-promo-popup p{font-size:13px;margin:5px 0}.topal-promo-popup a{color:#0a54a8;font-weight:700}.topal-promo-popup button{position:absolute;right:2px;top:2px;color:#14213d}
#topal-promo-dialog{max-width:92vw;max-height:94vh;border:0;border-radius:12px;padding:16px 20px;background:#fff;color:#14213d;overflow:auto}#topal-promo-dialog::backdrop{background:#0b1730c7}#topal-promo-dialog img{display:block;max-width:87vw;max-height:78vh;width:auto;height:auto;object-fit:contain;margin:auto}#topal-promo-dialog button[data-promo-dialog-close]{float:right;background:transparent;border:1px solid #dce5ee;padding:7px 12px;cursor:pointer}.topal-promo-lock{overflow:hidden}
.topal-promo-btn:focus-visible,.topal-promo-bar a:focus-visible,.topal-promo-large-link:focus-visible,.topal-promo-close:focus-visible{outline:3px solid #ffd166;outline-offset:3px}
@media(max-width:767px){.topal-promo-home-grid{grid-template-columns:1fr}.topal-promo-popup{display:none!important}.topal-promo-bar{justify-content:flex-start;line-height:1.35;font-size:13px;flex-wrap:wrap;gap:3px 8px}.topal-promo-bar>span{max-width:100%}.topal-promo-card>img{height:140px}}

.topal-promo-service-placement{max-width:360px;margin-left:auto}.topal-promo-service-section{padding-top:16px;padding-bottom:16px}

/* V9.40: existing TOPAL promotion classes, two responsive presentation variants. */
.topal-promo-card{border:1px solid #dbe4f0;border-top:3px solid #0a54a8;border-radius:12px;box-shadow:0 6px 18px rgba(20,33,61,.07);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topal-promo-media{min-width:0;overflow:hidden}.topal-promo-media img{display:block;width:100%;height:100%;object-fit:cover}
.topal-promo-card-body{min-width:0;padding:14px 16px 6px}.topal-promo-title{font-size:18px;line-height:1.25;margin:8px 0 4px;color:#14213d}.topal-promo-text{font-size:14px;line-height:1.5;color:#4c5668;margin:0 0 8px;overflow-wrap:anywhere}
.topal-promo-price{margin:0;font-size:14px;color:#4c5668;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}.topal-promo-price strong{font-size:22px;color:#14213d;white-space:nowrap}.topal-promo-price span{font-size:13px}
.topal-promo-cta{display:flex;flex-direction:column;gap:8px;padding:8px 16px 14px;align-items:stretch}.topal-promo-btn{display:block;text-align:center;background:#0a54a8;min-height:44px;padding:11px 13px}.topal-promo-large-link{display:block;margin:0;text-align:center;font-size:13px;min-height:32px;padding:5px 0}
.topal-promo-fine{font-size:12.5px;border-top:1px solid #e9eef5;white-space:normal;color:#5b6475}.topal-promo-fine summary{cursor:pointer;padding:11px 16px;font-weight:700;color:#3a4459;list-style:none}.topal-promo-fine summary::-webkit-details-marker{display:none}.topal-promo-fine summary::after{content:'⌄';float:right}.topal-promo-fine[open] summary::after{transform:rotate(180deg)}.topal-promo-fine p{margin:0;padding:0 16px 14px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.topal-promo-side .topal-promo-media{height:150px}.topal-promo-sidebar-stack{min-width:0;display:flex;flex-direction:column;gap:20px;align-self:start}.topal-promo-sidebar-stack .detail-box{width:100%;margin:0;min-width:0}
.topal-promo-wide{display:grid;grid-template-columns:30% minmax(0,1fr) 210px;grid-template-areas:'image body cta' 'fine fine fine';align-items:stretch}.topal-promo-wide .topal-promo-media{grid-area:image;min-height:190px}.topal-promo-wide .topal-promo-card-body{grid-area:body;padding:20px 22px;align-self:center}.topal-promo-wide .topal-promo-cta{grid-area:cta;padding:20px 22px 20px 0;justify-content:center}.topal-promo-wide .topal-promo-fine{grid-area:fine}.topal-promo-wide .topal-promo-title{font-size:21px}.topal-promo-wide:not(:has(.topal-promo-media)){grid-template-columns:minmax(0,1fr) 210px;grid-template-areas:'body cta' 'fine fine'}
.topal-promo-service-placement{max-width:none;margin:0}.topal-promo-home-section{padding-top:18px;padding-bottom:18px}.topal-promo-service-section{padding-top:18px;padding-bottom:18px}
.topal-promo-home-grid{display:block}.topal-promo-home-grid .topal-online-cards{margin:0}
.topal-promo-btn:focus-visible,.topal-promo-fine summary:focus-visible{outline:3px solid #ffc857;outline-offset:3px}
@media(max-width:759px){.topal-promo-wide,.topal-promo-wide:not(:has(.topal-promo-media)){display:flex;flex-direction:column}.topal-promo-wide .topal-promo-media{height:170px;min-height:0}.topal-promo-wide .topal-promo-card-body{padding:16px 18px 10px;align-self:stretch}.topal-promo-wide .topal-promo-cta{padding:0 18px 16px}.topal-promo-sidebar-stack{gap:20px}}

/* V9.42 CONTACT PAGE ONLY: grid from approved contact preview. */
#topal-contact-page.contact-demo{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-areas:"info form" "map form" "steps form";grid-template-rows:auto auto 1fr;gap:20px 28px;align-items:start}
#topal-contact-page > *{min-width:0;align-self:start;}
#topal-contact-page .contact-details{grid-area:info;background:#0f2342;border:0;border-radius:14px;padding:22px;color:#fff;box-shadow:0 4px 16px rgba(20,33,61,.05)}
#topal-contact-page .contact-details h2,#topal-contact-page .contact-steps h2{font-size:19px;line-height:1.3;margin:0 0 14px;letter-spacing:0;color:inherit}
#topal-contact-page .topal-contact-call{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#d4192f;color:#fff;text-decoration:none;border-radius:9px;margin:0 0 14px}
#topal-contact-page .topal-contact-call:hover{background:#b81026}
#topal-contact-page .topal-contact-call svg{width:26px;height:26px;flex:none}
#topal-contact-page .topal-contact-call small{display:block;color:#fff;font-size:12px;opacity:.9}
#topal-contact-page .topal-contact-call strong{display:block;font-size:17px;color:#fff;white-space:nowrap}
#topal-contact-page .topal-contact-links{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:13px}
#topal-contact-page .topal-contact-links li{display:flex;gap:10px;align-items:flex-start;overflow-wrap:anywhere}
#topal-contact-page .topal-contact-links svg{flex:none;color:#8cc4ff;margin-top:1px}
#topal-contact-page .topal-contact-links a{text-decoration:underline;text-underline-offset:2px;color:#fff}
#topal-contact-page .topal-contact-languages{display:flex;align-items:center;gap:7px;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:600}
#topal-contact-page .topal-contact-flag{width:22px;height:14px;flex:none;border-radius:2px}
#topal-contact-page .contact-map{grid-area:map;overflow:hidden;background:#fff;border:1px solid #dde3ec;border-radius:14px;box-shadow:0 4px 16px rgba(20,33,61,.05)}
#topal-contact-page .contact-map .v8-map-box{background:transparent;border:0;max-width:none;width:100%;color:#14213d;border-radius:0}
#topal-contact-page .contact-map [data-map-placeholder]{min-height:170px;height:170px;padding:12px 18px;background:repeating-linear-gradient(0deg,#e8edf3 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#e8edf3 0 1px,transparent 1px 28px),#f3f6f9;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
#topal-contact-page .contact-map [data-map-placeholder] svg{width:34px;height:34px;color:#d4192f;flex:none}
#topal-contact-page .contact-map [data-map-placeholder] p{color:#4c5668;margin:6px 0;font-size:12px}
#topal-contact-page .contact-map [data-load-map]{background:#fff;color:#14213d;border:1px solid #cfd7e2;font-size:12px;padding:7px 11px;border-radius:8px;box-shadow:none}
#topal-contact-page .contact-map [data-map-container] iframe{height:170px;min-height:170px;display:block}
#topal-contact-page .topal-contact-map-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px;font-size:12px;flex-wrap:wrap;color:#14213d}
#topal-contact-page .topal-contact-map-footer a{color:#0a54a8;text-decoration:underline;font-weight:700}
#topal-contact-page .contact-steps{grid-area:steps;border-radius:14px;border:1px solid #dde3ec;background:#fff;box-shadow:0 4px 16px rgba(20,33,61,.05);padding:20px 22px}
#topal-contact-page .topal-contact-step-list{padding:0;margin:0;list-style:none;display:grid;gap:12px;counter-reset:topal-step}
#topal-contact-page .topal-contact-step-list li{counter-increment:topal-step;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;font-size:14px;color:#4c5668}
#topal-contact-page .topal-contact-step-list li::before{content:counter(topal-step);width:30px;height:30px;background:#e8f2fd;color:#0a54a8;font-weight:800;border-radius:50%;display:grid;place-items:center}
#topal-contact-page .form-demo{grid-area:form;background:#fff;border:1px solid #dde3ec;border-radius:14px;padding:28px;box-shadow:0 4px 16px rgba(20,33,61,.05)}
#topal-contact-page .form-demo > h2{font-size:22px;line-height:1.25;letter-spacing:0;margin:0 0 20px}
#topal-contact-page .form-demo .form{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-items:start}
#topal-contact-page .form-demo .form .field{display:flex;flex-direction:column;min-width:0;gap:5px}
#topal-contact-page .form-demo .form .field label{margin:0;display:block;font-size:13px;font-weight:700}
#topal-contact-page .form-demo .form input,#topal-contact-page .form-demo .form select,#topal-contact-page .form-demo .form textarea{margin:0;min-height:44px;font-size:14px;padding:11px 12px;color:#14213d;border:1px solid #cdd5e0}
#topal-contact-page .form-demo .form textarea{min-height:134px}
#topal-contact-page .form-demo .form :is(input,select,textarea):focus-visible{outline:3px solid rgba(10,84,168,.28);outline-offset:2px;border-color:#0a54a8}
#topal-contact-page .topal-contact-hint{font-size:12px;color:#66788c;margin:-7px 0 0;grid-column:1/-1}
#topal-contact-page .topal-contact-error{font-size:13px;color:#b4122a;font-weight:700;margin:0;grid-column:1/-1}
#topal-contact-page .topal-contact-error[hidden]{display:none}
#topal-contact-page .topal-invalid input{border-color:#d4192f!important;background:#fff7f8!important}
#topal-contact-page .topal-contact-drop{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:105px;border:2px dashed #bdcbd9;background:#f9fbfd;border-radius:12px;text-align:center;padding:16px;overflow:hidden;cursor:pointer}
#topal-contact-page .topal-contact-drop:hover,#topal-contact-page .topal-contact-drop:focus-within,#topal-contact-page .topal-contact-drop.topal-drop-over{border-color:#0a54a8;background:#f1f7fe}
#topal-contact-page .topal-contact-drop:focus-within{outline:3px solid rgba(10,84,168,.3);outline-offset:2px}
#topal-contact-page .topal-contact-drop-info{pointer-events:none;color:#14213d;font-size:13px;display:grid;justify-items:center;gap:4px}
#topal-contact-page .topal-contact-drop-info svg{color:#0a54a8}
#topal-contact-page .topal-contact-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0;min-height:0}
#topal-contact-page .topal-contact-file-list{list-style:none;margin:7px 0 0;padding:0;font-size:12px;overflow-wrap:anywhere;color:#3b4e64}
#topal-contact-page .topal-contact-uploads small{margin:4px 0;color:#66788c}
#topal-contact-page .topal-contact-submit{display:grid;justify-items:start;gap:8px}
#topal-contact-page .topal-contact-submit .btn{margin:0}
.topal-contact-privacy,.topal-service-privacy{font-size:12px;color:#607184;line-height:1.5;margin:4px 0 0}
.topal-contact-privacy a,.topal-service-privacy a{text-decoration:underline;color:#0a54a8}
#topal-contact-page .topal-contact-response{color:#4c5668;font-size:13px;margin:0}
#topal-contact-page .topal-contact-action-chip{display:block;background:#e8f2fd;color:#0a54a8;padding:9px 12px;border-radius:12px;font-weight:700;font-size:13px}
/* Existing home form continues to have the same fields, but no privacy checkbox. */
#contact-form .topal-contact-error[hidden]{display:none}
#contact-form .topal-invalid :is(input,select){border-color:#d4192f!important;background:#fff7f8}
@media(max-width:860px){
 #topal-contact-page.contact-demo{grid-template-columns:minmax(0,1fr);grid-template-areas:"info" "form" "steps" "map";grid-template-rows:auto;gap:20px}
 #topal-contact-page .form-demo{padding:20px 18px}
 #topal-contact-page .form-demo .form{grid-template-columns:minmax(0,1fr)}
 #topal-contact-page .form-demo .form > *{grid-column:1/-1}
}

/* V9.49 native details arrow is suppressed, menu icon remains accessible. */
.v8-mobile-nav>summary{list-style:none}.v8-mobile-nav>summary::-webkit-details-marker{display:none}

/* V9.50: localized help link, displayed only for published guide overview. */
.header-actions>.topal-header-guide{display:inline-flex;gap:7px;align-items:center;justify-content:center;border-radius:8px;border:1px solid #c7d6e7;background:#edf5ff;color:#114a7c;font-weight:800;font-size:.78rem;line-height:1.15;padding:9px 10px;min-height:41px;white-space:nowrap;text-decoration:none;flex-shrink:0}
.header-actions>.topal-header-guide svg{width:18px;height:18px;flex-shrink:0}
.header-actions>.topal-header-guide:hover{background:#dcecfb;border-color:#88b1d6}
.header-actions>.topal-header-guide[aria-current="page"]{background:#d6e9fe;border-color:#3174b5}
.header-actions>.topal-header-guide:focus-visible{outline:3px solid #1167b7;outline-offset:3px}
.header .v8-mobile-nav .topal-mobile-guide-link{display:flex;align-items:center;gap:9px;color:#144c7c;font-weight:800}
.header .v8-mobile-nav .topal-mobile-guide-link svg{flex:none}
@media(min-width:1001px) and (max-width:1550px){.header-actions>.topal-header-guide{padding:8px}}
@media(max-width:1360px){.header-actions>.topal-header-guide span{display:none}.header-actions>.topal-header-guide{padding:9px 11px;min-width:42px}}
@media(max-width:640px){.header-actions>.topal-header-guide{min-width:36px;min-height:36px;padding:7px}}


/* V9.53 Footer: online services and approved guides as distinct, responsive panels. */
.footer .topal-footer-resources{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
 gap:18px;align-items:stretch;padding:4px 0 28px;
}
.footer .topal-footer-resource{
 min-width:0;padding:20px 22px 22px;
 border:1px solid #324d69;border-radius:13px;
 background:rgba(255,255,255,.035);
}
.footer .topal-footer-resource-title{
 margin:0 0 13px;padding:0 0 13px;
 color:#fff;font-size:.94rem;line-height:1.4;font-weight:800;
 border-bottom:1px solid #35506a;
}
.footer .topal-footer-resource nav{display:grid;gap:8px;min-width:0}
.footer .topal-footer-resource-services nav{grid-template-columns:minmax(0,1fr)}
.footer .topal-footer-resource-guides nav{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer .topal-footer-resource nav a{
 display:flex;align-items:center;gap:10px;min-width:0;
 padding:9px 11px;border:1px solid transparent;border-radius:8px;
 background:rgba(255,255,255,.045);color:#dbe7f3;
 font-size:.82rem;line-height:1.45;text-decoration:none;
 overflow-wrap:anywhere;
}
.footer .topal-footer-resource nav a:hover,
.footer .topal-footer-resource nav a:focus-visible{
 color:#fff;background:#244460;border-color:#58708a;
}
.footer .topal-footer-resource-services nav svg{
 flex:none;width:20px;height:20px;color:#c3dbf7;
}
.footer .topal-footer-resource-guides nav a:before{
 content:"";width:5px;height:5px;border-radius:50%;
 background:#e45869;flex:none;
}
.footer .topal-footer-resource-guides nav .topal-footer-guide-overview{
 grid-column:1/-1;background:rgba(24,88,151,.32);font-weight:750;color:#fff;
}
@media(max-width:900px){
 .footer .topal-footer-resources{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:550px){
 .footer .topal-footer-resource{padding:17px 15px 18px}
 .footer .topal-footer-resource-guides nav{grid-template-columns:minmax(0,1fr)}
}


/* TOPAL V9.53 | Abschnittshierarchie: rein visuell, keine HTML-/SEO-Aenderungen.
   Bewusst auf den oeffentlichen Hauptinhalt begrenzt. */
main .section .eyebrow,
main .topal-local-advice > .eyebrow {
  font-size: clamp(.85rem, .78rem + .2vw, .96rem);
  font-weight: 850;
  letter-spacing: .09em;
  line-height: 1.45;
  margin-bottom: 14px;
}
main .section .eyebrow::before {
  width: 34px;
  height: 3px;
  flex: 0 0 34px;
}

/* Nur Inhaltsueberschriften: weder Hero noch Karten, Footer, Formulare oder Admin. */
main .section:not(#leistungen) > .container > h2,
main .section > .container > .section-head h2,
main .section > .container.split > div > h2,
main .section .service-detail > .eyebrow + h2 {
  font-size: clamp(1.8rem, 1.45rem + 1.06vw, 2.48rem);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -.022em;
  overflow-wrap: break-word;
}
main .section:not(#leistungen) .section-head {
  margin-bottom: clamp(24px, 2.4vw, 34px);
}

/* Aneinander anschliessende Inhaltssektionen klar, aber dezent trennen. */
main > section.section + section.section {
  border-top: 1px solid #e4ebf3;
}

/* Waermeplanung: sichtbarer eigener Themenblock statt kleiner Zwischenkarte. */
main .topal-local-teaser {
  padding: clamp(30px, 3.2vw, 43px) 0 !important;
}
main .topal-local-teaser-inner {
  border-left-width: 5px;
  border-radius: 13px;
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: 0 8px 24px rgba(19, 47, 77, .055);
}
main .topal-local-teaser h2 {
  font-size: clamp(1.5rem, 1.12rem + 1.02vw, 2.08rem);
  line-height: 1.22;
  font-weight: 850;
  letter-spacing: -.022em;
}

/* Lange Ratgeber: Themenwechsel zwischen eigenstaendigen H2-Absaetzen. */
main .topal-local-advice > h2 {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid #e1eaf3;
}
@media (max-width: 700px) {
  main .section .eyebrow,
  main .topal-local-advice > .eyebrow {
    font-size: .85rem;
    margin-bottom: 11px;
  }
  main .section:not(#leistungen) > .container > h2,
  main .section > .container > .section-head h2,
  main .section > .container.split > div > h2,
  main .section .service-detail > .eyebrow + h2 {
    font-size: clamp(1.62rem, 4.65vw, 2rem);
    line-height: 1.24;
  }
  main .topal-local-teaser-inner { padding: 20px; }
  main .topal-local-advice > h2 {
    margin-top: 32px;
    padding-top: 16px;
  }
}


/* TOPAL V9.53: sidebar with an active promotion.
   The original .detail-box can be sticky on service and business pages.
   Whenever TOPAL puts it together with a promotion in the same sidebar stack,
   prevent the contact box from overlapping the promotion while scrolling.
   Pages without an active promotion keep their existing sticky behaviour. */
.topal-promo-sidebar-stack > .detail-box {
  position: static;
  top: auto;
}

/* TOPAL V9.53 | Hero auf breiten Desktops ohne dunkle Seitenraender.
   Nur optische Anpassung. Mobile Panels und HTML bleiben unveraendert. */
@media (min-width:1081px) {
  #main:has(> .hero-diagonal) {
    background:#fff;
  }
  #main > .hero-diagonal {
    width:100%;
    max-width:none;
    margin-inline:0;
  }
  #main > .hero-diagonal .hero-copy.heat::before {
    background:linear-gradient(180deg,
      rgba(211,25,51,.92) 0%,
      rgba(205,21,49,.79) 48%,
      rgba(138,12,38,.53) 100%);
  }
  #main > .hero-diagonal .hero-copy.bath::before {
    background:linear-gradient(180deg,
      rgba(0,105,197,.92) 0%,
      rgba(2,89,173,.79) 48%,
      rgba(3,47,119,.53) 100%);
  }
  #main > .hero-diagonal .hero-copy.air::before {
    background:linear-gradient(180deg,
      rgba(5,106,206,.92) 0%,
      rgba(4,83,174,.78) 48%,
      rgba(2,48,117,.54) 100%);
  }
}

/* TOPAL V9.53 | Schmale Informationsleiste: Texte auf Desktop naeher zusammenruecken.
   Ausschliesslich diese Leiste; andere Header- und Mobile-Regeln unveraendert. */
@media (min-width:1001px) {
  .utility .container {
    justify-content:center;
    gap:clamp(16px,2vw,30px);
  }
}


/* TOPAL V9.53 | Hero-Farbflaechen dezent schmaler auf Desktop.
   Nur die Startposition der diagonalen Overlays und der zugehoerigen
   Textbereiche. Mobile bleibt unveraendert. */
@media (min-width:1601px) {
  #main > .hero-diagonal { --panel-start:53%; }
}
@media (min-width:1301px) and (max-width:1600px) {
  #main > .hero-diagonal { --panel-start:47%; }
}
@media (min-width:1081px) and (max-width:1300px) {
  #main > .hero-diagonal { --panel-start:42%; }
}