.areaDirectoryLink{display:inline-flex;align-items:center;gap:14px;margin-top:24px;padding:15px 22px;border-radius:10px;background:#0052DA;color:#fff;font-weight:700;text-decoration:none}
.areaDirectoryLink:hover{background:#0052DA}
.areaDirectoryHero{background:linear-gradient(120deg,#001435,#0052DA)}
.areaDirectoryPage .locationTabList{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.areaSearch{margin:26px 0 20px;max-width:600px}
.areaSearch label{display:block;color:#001841;font-weight:700;margin-bottom:9px}
.areaSearch input{box-sizing:border-box;width:100%;font:inherit;padding:16px 18px;border:1px solid #BDD2F5;background:#fff;border-radius:10px;color:#001841}
.areaSearch p{font-size:14px;color:#0052DA;min-height:20px;margin-top:10px}
.locationGroup a{gap:8px}.locationGroup a b{font-weight:650;overflow-wrap:anywhere}.locationGroup a i{flex-shrink:0}.locationGroup a span{flex-shrink:0}
.areaDirectoryPage [hidden]{display:none!important}
.areaDirectoryPage :is(a,button,input):focus-visible{outline:3px solid #0052DA;outline-offset:4px}
@media(max-width:620px){.areaDirectoryPage .locationTabList{grid-template-columns:1fr}.areaDirectoryHero{padding-bottom:38px}.areaDirectoryPage .areaDirectoryList{padding-top:40px}.locationGroup a{min-height:48px}.locationGroup a b{font-size:14px}}

/* Center telephone actions in page content, independently of header and sticky bar. */
main section a[href^="tel:"]{display:flex;align-items:center;justify-content:center;text-align:center;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.heroCtas,.subHeroActions{justify-content:center}
.hero h1>em{display:block}
.heroTradeLogos{display:flex;align-items:stretch;gap:12px;margin-top:22px;max-width:100%}
.heroTradeLogo{display:flex;align-items:center;justify-content:center;min-width:0;height:78px;overflow:hidden;border-radius:8px;background:#fff}
.heroTradeLogoHandwerk{width:138px;background:#e40046}
.heroTradeLogoKammer{width:222px;padding:12px}
.heroTradeLogo img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:620px){.heroTradeLogos{justify-content:center;gap:10px;margin-top:18px}.heroTradeLogo{height:66px}.heroTradeLogoHandwerk{flex:0 1 117px}.heroTradeLogoKammer{flex:0 1 190px;padding:10px}}
.heroCtas .primaryCall,.heroCtas .primaryCall:hover,.heroCtas .primaryCall:active{box-shadow:none}
/* Cover wide desktop heroes without an exposed edge in the background photo. */
@media(min-width:761px){.hero{background-size:cover,cover,cover;background-position:center,center,right 80px top 145px}}
/* The homepage has an emphasized location line; location pages use plain headings. */
@media(min-width:761px){.hero:has(h1>em){background-image:linear-gradient(to left,#001435 230px,transparent 350px),linear-gradient(90deg,#001435db 0%,#001E50b8 43%,#001E5045 64%,#001E5008 100%),url('/assets/rohrfluss/hero.webp')}}
@media(max-width:760px){.hero:has(h1>em){background-image:linear-gradient(180deg,#00143500 185px,#00143533 235px,#001435 305px),url('/assets/rohrfluss/hero.webp')}.hero:has(h1>em):before{background:#000C1F08}}

/* Use the same unmirrored handset as the persistent mobile call button. */
a[href^="tel:"] .fa-phone{transform:none!important}

/* Space the handset from the number in the emergency callout. */
.emergency a[href^="tel:"]{gap:10px}
@media(min-width:1024px){.emergencyCopy a[href^="tel:"]{margin-top:28px}}

/* Keep the area-directory action legible and centered on mobile. */
.areas .areaCopy a.areaDirectoryLink,.areas .areaCopy a.areaDirectoryLink span{color:#fff}
@media(max-width:620px){.areas .areaCopy a.areaDirectoryLink{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;justify-content:center;text-align:center}}

.areaRadarGroup{display:flex;flex-direction:column;align-items:center;min-width:0}.areas .areaRadarGroup .areaDirectoryLink,.areas .areaRadarGroup .areaDirectoryLink span{color:#fff}.areaRadarGroup .areaDirectoryLink{justify-content:center;text-align:center;margin:24px auto 0;max-width:100%}

/* Remove the inherited red glow from the contact submit action. */
.largeFormSubmit,.largeFormSubmit:hover,.largeFormSubmit:active{box-shadow:none}

/* Inset the native problem selector chevron without changing select behavior. */
.heroForm select,.heroForm select:focus{-webkit-appearance:none;appearance:none;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px}

/* Center the handset glyph within its icon box beside the phone number. */
.heroCtas .primaryCall .buttonIcon.fa-phone,.headerCall .buttonIcon.fa-phone{display:inline-flex;align-items:center;justify-content:center;line-height:1;position:relative;top:1px}

/* Two clear actions on the initial cookie banner, in Rohrfluss colours. */
.cookieActions .cookieAccept{background:#0052DA;color:#fff;border:1px solid #0052DA;box-shadow:none}
.cookieActions .cookieAccept:hover{background:#0052DA;border-color:#0052DA;box-shadow:none}
.cookieActions .cookieCustomize{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;border:1px solid #B9D0F5;border-radius:9px;background:#fff;color:#001841;text-decoration:none;font-weight:700;line-height:1.35;box-shadow:none}
.cookieActions .cookieCustomize:hover{background:#edf6fd;border-color:#0052DA;box-shadow:none}
.cookieActions .cookieCustomize[hidden]{display:none}

/* Give cookie actions breathing room at the outside edge. */
.cookiePanel .cookieActions{margin-right:20px;min-width:0}
@media(max-width:620px){.cookiePanel .cookieActions{margin-right:8px;margin-left:8px}}

.cookiePanel .cookieActions button{min-width:0;width:100%;box-sizing:border-box}

/* Fit long consent labels inside the action column without overflow. */
.cookiePanel .cookieActions{margin:0;min-width:0}
.cookiePanel .cookieActions button{white-space:normal;overflow-wrap:anywhere;min-width:0;width:100%;box-sizing:border-box;line-height:1.4}
@media(min-width:761px){.cookiePanel{box-sizing:border-box;grid-template-columns:62px minmax(0,1fr) 220px;padding-right:24px;gap:20px}}
@media(max-width:760px){.cookiePanel .cookieActions{margin:0}}

/* A clear, neutral telephone action on the blue desktop header. */
/* Equal image columns, independent of heading and link lengths. */
.serviceStory:not(.feature)>div{min-width:0}
.serviceStory.feature li{font-size:14px;line-height:1.65}
.serviceStory:not(.feature) h3{hyphens:auto;overflow-wrap:anywhere}
.serviceStory:not(.feature) img{min-width:0;object-fit:cover;object-position:center}
.serviceStory:not(.feature) a{max-width:100%;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
.serviceStory:not(.feature) a b{flex-shrink:0}
@media(min-width:621px){.serviceStory:not(.feature){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

@media(min-width:761px){
  :is(.siteHeader,.subHeader) .headerCall{background:#fff;color:#001435;border:1px solid #fff;box-shadow:0 3px 12px rgb(23 38 53 / 12%)}
  :is(.siteHeader,.subHeader) .headerCall :is(strong,span,i){color:inherit}
  :is(.siteHeader,.subHeader) .headerCall .buttonIcon{color:inherit;filter:none}
  :is(.siteHeader,.subHeader) .headerCall:hover{background:#f0f5f9;color:#001435;border-color:#f0f5f9}
  :is(.siteHeader,.subHeader) .headerCall:focus-visible{outline:3px solid #fff;outline-offset:4px}
}

/* Keep hero content above the decorative image transition. */
.subHeroCopy > *{position:relative;z-index:3}

/* Full-width mobile actions on service landing pages. */
@media(max-width:760px){
.subPage .subHeroActions{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;width:100%}
.subPage .subHeroActions>a,main.subPage section a[href^="tel:"]{width:100%;box-sizing:border-box;min-width:0;justify-content:center;text-align:center}
}

/* Left-align service hero actions on desktop. */
@media(min-width:761px){
.subPage .subHeroActions{display:flex;justify-content:flex-start}
main.subPage .subHeroActions>a{width:auto;margin-left:0;margin-right:0}
}

/* Rohrfluss colours for all service-page contact actions. */
.subPage .subHeroActions>a:first-child{background:#0052DA;border-color:#0052DA;color:#fff;box-shadow:none}
.subPage .subHeroActions>a:first-child:hover{background:#0052DA;border-color:#0052DA;box-shadow:none}
.subPage .subContact{background:linear-gradient(135deg,#0052DA,#001435)}
.subPage .subContact>div>a{color:#0052DA;background:#fff}
.subPage .subContact>div>a:hover{color:#0052DA;background:#f0f7fd}
.subPage .subContact form{box-shadow:0 25px 65px #001C4B33}
.subPage .subContact button{background:#0052DA;color:#fff;box-shadow:none}
.subPage .subContact button:hover{background:#0052DA}

/* More readable mobile offer bar and slightly larger brand logo. */
@media(max-width:620px){
.offerBar{height:48px}
.offerBar .offerBarInner{font-size:12px;gap:7px;letter-spacing:0}
.offerBar .todayPill{font-size:10px;padding:4px 6px}
.offerBar .headerClock{font-size:11px;padding-left:7px}
.siteHeader{top:48px}
.subPage .subHeader{margin-top:48px}
.siteHeader .brandImage img,.subHeader .brandImage img{width:190px}
}
@media(max-width:360px){.offerBar .offerBarInner{font-size:11px;gap:5px}.offerBar .headerClock{font-size:10px;padding-left:5px}}

/* Let mobile hero content shrink within its padded grid column. */
@media(max-width:760px){
.hero{grid-template-columns:minmax(0,1fr)}
.hero>*,.heroCopy,.heroVisual,.heroForm{min-width:0;max-width:100%;box-sizing:border-box}
.heroTradeLogos{min-width:0;width:100%}
.hero .eyebrow{max-width:100%;box-sizing:border-box;white-space:normal}
}
@media(max-width:360px){
.hero h1{font-size:clamp(30px,9.5vw,34px)}
.hero .eyebrow{font-size:10px;letter-spacing:1px}
}

/* Service heroes must shrink with small mobile viewports too. */
@media(max-width:760px){
.subPage .subHero{grid-template-columns:minmax(0,1fr)}
.subPage .subHero>*,.subPage .subHeroCopy>*{min-width:0;max-width:100%;box-sizing:border-box}
.subPage .subHeroCopy h1{overflow-wrap:anywhere;hyphens:auto}
.subPage .subKicker{white-space:normal;overflow-wrap:anywhere}
}

/* Match the left-aligned footer used on the other pages. */
.subPage .subFooter{text-align:left}