/* Production styles for Dachreinigung Kosten. */
/* H&C Dachkosten v39: fade from roof shape / step 5 toward a white top.
   Existing calculator and navigation functionality remain untouched. */
:root { --hc-v39-blue:#a6c6d6; }
html body header.dbr-final-header {background:#fff!important;}
/* Homepage: redundant title removed from HTML; avoid leaving an oversized blank hero. */
@media (min-width:751px) {
 html body:not(.hc-subpages-refined):not(.hc-legal-blue) #startseite-hero.dbrh-hero {
  height:clamp(305px, 22vw, 345px)!important;
  min-height:clamp(305px, 22vw, 345px)!important;
 }
}
/* Tighten the former duplicate-title gap on wide desktop screens, but keep
   small-screen hero heights safely content-driven. */
@media (min-width:1100px){
 html body:not(.hc-subpages-refined):not(.hc-legal-blue) #startseite-hero.dbrh-hero{
  height:315px!important;min-height:315px!important;
 }
}
/* Base gradient remains identical beneath a translucent white-to-blue fade.
   Pixel stops are measured against the real step-2 and step-5 sections. */
html body:not(.hc-subpages-refined):not(.hc-legal-blue) section.dbrpf.hc-ref-calculator {
 background-color:var(--hc-v39-blue)!important;
 background-image:
  linear-gradient(180deg,
   #fff 0px,
   #fff var(--hc-v39-white-end,230px),
   rgba(255,255,255,.96) var(--hc-v39-fade1,350px),
   rgba(255,255,255,.72) var(--hc-v39-fade2,500px),
   rgba(255,255,255,.34) var(--hc-v39-fade3,720px),
   rgba(255,255,255,0) var(--hc-v39-blue-start,950px)
  ),
  linear-gradient(180deg,
   #a6c6d6 0%,#a6c6d6 40%,
   #94b9ca 51%,#75a2b7 61%,#5b8ba4 70%,
   #46768f 78%,#477890 84%,#6597ac 91%,
   #8db7c8 96%,#b1cddb 100%)
 !important;
 background-repeat:no-repeat!important;
 background-size:100% 100%!important;
}
/* Editorial pages: same white-to-blue easing, the fade position is computed
   by the already-running per-page section-position handler (v36). */
html body.hc-subpages-refined main#wp--skip-link--target::after {
 background:linear-gradient(180deg,
  #fff 0px,
  #fff var(--hc-v36-start,550px),
  rgba(255,255,255,.96) var(--hc-v36-stop1,700px),
  rgba(255,255,255,.72) var(--hc-v36-stop2,850px),
  rgba(255,255,255,.34) var(--hc-v36-stop3,1030px),
  rgba(255,255,255,0) var(--hc-v36-end,1200px)
 )!important;
}
/* Legal pages share the same quiet white start and gradual blue reveal. */
html body.hc-legal-blue {
 background:linear-gradient(180deg,
 #fff 0%,#fff 12%,#fafcfd 20%,#ecf4f8 32%,
 #cfe3ed 47%,#a6c6d6 66%,#a6c6d6 76%,
 #dcebf3 91%,#f3f9fc 100%)!important;
}
/* On narrow viewports keep the hero content natural and fade anchored to
   the actual form step positions, not an assumed desktop page height. */
@media (max-width:750px){
 html body:not(.hc-subpages-refined):not(.hc-legal-blue) #startseite-hero.dbrh-hero{
  height:auto!important;min-height:0!important;
 }
}


/* Dachreinigung-Kosten | v40 / 2026-10-30
   Compact six editorial pages at the hero-to-content seam.
   Home calculator, price logic, sticky navigation, existing fades & footer untouched. */
@media(min-width:821px){
 html body.hc-subpages-refined:not(.hc-about-storypage) #startseite-hero.dbrh-hero {
  height:auto!important;
  min-height:260px!important;
  margin-bottom:0!important;
 }
 html body.hc-subpages-refined:not(.hc-about-storypage) #startseite-hero.dbrh-hero .dbrh-hero__inner {
  height:auto!important;
  min-height:260px!important;
  padding-top:42px!important;
  padding-bottom:33px!important;
 }
 /* Keep a consistent H1/H2 hierarchy across the service pages. */
 html body.hc-subpages-refined:not(.hc-about-storypage) #startseite-hero.dbrh-hero h1 {
  font-size:clamp(29px,2.35vw,34px)!important;
  line-height:1.14!important;
  letter-spacing:-.034em!important;
 }
 html body.hc-subpages-refined:not(.hc-about-storypage) #leistung-im-detail {
  margin-top:0!important;
  margin-block-start:0!important;
  padding-top:34px!important;
 }
 html body.hc-subpages-refined .hc-cleaning-process .hc-cleaning-intro h2,
 html body.hc-subpages-refined #leistung-im-detail .hc-editorial-intro h2 {
  font-size:clamp(28px,2.35vw,34px)!important;
  line-height:1.15!important;
  letter-spacing:-.033em!important;
 }
 /* Standalone reference gallery has its own title and section padding. */
 html body.hc-subpages-refined #leistung-im-detail.hc-pair-showcase {
  padding-top:34px!important;
 }
 /* Editorial portrait page is intentionally separate from the photo-hero layout. */
 html body.hc-subpages-refined.hc-about-storypage #startseite-hero.hc-about-hero {
  padding-top:clamp(38px,3vw,48px)!important;
  padding-bottom:clamp(40px,3vw,48px)!important;
 }
 html body.hc-subpages-refined.hc-about-storypage .hc-about-hero h1 {
  font-size:clamp(32px,2.65vw,39px)!important;
  line-height:1.105!important;
  letter-spacing:-.04em!important;
 }
 html body.hc-subpages-refined.hc-about-storypage .hc-about-hero__portrait {
  height:clamp(360px,27vw,430px)!important;
 }
 html body.hc-subpages-refined.hc-about-storypage .hc-about-chapter--opening {
  padding-top:clamp(40px,3.7vw,60px)!important;
 }
 html body.hc-subpages-refined.hc-about-storypage .hc-about-chapter--opening h2 {
  font-size:clamp(29px,2.4vw,35px)!important;
  line-height:1.18!important;
 }
}
@media(max-width:820px){
 html body.hc-subpages-refined:not(.hc-about-storypage) #startseite-hero.dbrh-hero {
  height:auto!important;min-height:0!important;
 }
 html body.hc-subpages-refined:not(.hc-about-storypage) #startseite-hero.dbrh-hero .dbrh-hero__inner {
  height:auto!important;min-height:0!important;
 }
 html body.hc-subpages-refined:not(.hc-about-storypage) #leistung-im-detail {
  margin-top:0!important; margin-block-start:0!important;
  padding-top:clamp(24px,5vw,35px)!important;
 }
 html body.hc-subpages-refined.hc-about-storypage .hc-about-chapter--opening {
  padding-top:clamp(34px,6vw,49px)!important;
 }
}

/* Reference hero was overridden by a higher-specificity gallery title rule.
   Align it with the other H1s, retaining both CTA buttons. */
@media(min-width:821px){
 html body.hc-subpages-refined #startseite-hero.dbrh-hero .dbrh-hero__content h1#dbrh-hero-title {
  font-size:clamp(29px,2.35vw,35px)!important;
  line-height:1.16!important;
  letter-spacing:-.035em!important;
 }
}


/* Dachreinigung-Kosten / Shared canonical footer v40 (30 October 2026).
   The homepage is the visual reference. All page types share identical
   markup, colours, typography, spacing, assets and responsive behaviour. */

html body footer#footer.dbr-premium-footer-root,
html body #footer.dbr-premium-footer-root {
  box-sizing:border-box!important;
  display:block!important;
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  color:#101c22!important;
  background-color:#3488a5!important;
  background-image:linear-gradient(180deg,
    #0f769e 0%,
    #18799d 22%,
    #217d9e 46%,
    #2b83a2 72%,
    #3488a5 100%)!important;
  font:13px/1.5 Nunito,Arial,Helvetica,sans-serif!important;
}
html body footer#footer.dbr-premium-footer-root::before,
html body.hc-subpages-refined footer#footer.dbr-premium-footer-root::before {
  content:""!important;
  position:absolute!important;
  display:block!important;
  inset:0 0 auto!important;
  width:100%!important;
  height:2px!important;
  max-height:2px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none!important;
  z-index:2!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 11%,
    rgba(255,255,255,.79) 50%,
    rgba(255,255,255,.4) 89%,
    rgba(255,255,255,0) 100%)!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-wrap {
  box-sizing:border-box!important;
  width:min(1320px,calc(100% - 40px))!important;
  max-width:1320px!important;
  margin:0 auto!important;
  padding:47px 0 28px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#101c22!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-grid {
  display:grid!important;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.13fr)!important;
  align-items:start!important;
  gap:46.08px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-grid > * {
  min-width:0!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-brand img {
  display:block!important;
  width:194px!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  margin:0 0 16px!important;
  padding:0!important;
  border:0!important;
  filter:brightness(0)!important;
  -webkit-filter:brightness(0)!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-brand p,
html body footer#footer.dbr-premium-footer-root .dbr-ft-brand-note {
  color:#121d23!important;
  font:400 13px/1.55 Nunito,Arial,Helvetica,sans-serif!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-brand p {
  max-width:211px!important;
  margin:18px 0 6px!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-brand-note {
  display:inline!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-col {
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-col .dbr-ft-title {
  display:block!important;
  color:#121d23!important;
  font:850 12px/1.5 Nunito,Arial,Helvetica,sans-serif!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
  margin:0 0 18px!important;
  padding:0!important;
  border:0!important;
  text-shadow:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-col>a,
html body footer#footer.dbr-premium-footer-root .dbr-ft-contact .dbr-ft-contact-link {
  display:block!important;
  width:auto!important;
  min-height:0!important;
  margin:0 0 8px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#121d23!important;
  text-align:left!important;
  text-decoration:none!important;
  font:400 12px/20px Nunito,Arial,Helvetica,sans-serif!important;
  transform:none!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-col>a:hover,
html body footer#footer.dbr-premium-footer-root .dbr-ft-col>a:focus-visible,
html body footer#footer.dbr-premium-footer-root .dbr-ft-contact a:hover {
  color:#071d2b!important;
  text-decoration:underline!important;
  background:transparent!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-contact {
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-contact .dbr-ft-contact-name {
  color:#101c22!important;
  display:block!important;
  font:700 13px/1.55 Nunito,Arial,Helvetica,sans-serif!important;
  margin:0 0 8px!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-contact .dbr-ft-address {
  color:#101c22!important;
  display:block!important;
  font:400 13px/1.5 Nunito,Arial,Helvetica,sans-serif!important;
  margin:0 0 8px!important;
  white-space:normal!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-footer-socials {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-direction:row!important;
  gap:12px!important;
  padding:0!important;
  margin:18px 0 0!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-footer-socials a {
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  padding:0!important;
  margin:0!important;
  background:#fff!important;
  border:0!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-footer-socials img,
html body footer#footer.dbr-premium-footer-root .dbr-footer-socials svg {
  display:block!important;
  width:20px!important;
  height:20px!important;
  max-width:100%!important;
  object-fit:contain!important;
  filter:none!important;
  -webkit-filter:none!important;
  opacity:1!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-footer-socials svg {
  color:#0a66c2!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-bottom {
  display:flex!important;
  position:relative!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:20px!important;
  width:100%!important;
  padding:19px 0 0!important;
  margin:30px 0 0!important;
  border:0!important;
  background:transparent!important;
  color:#121d23!important;
  font:400 12px/1.5 Nunito,Arial,Helvetica,sans-serif!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-bottom::before {
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:2px!important;
  border:0!important;
  box-shadow:none!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.4) 11%,
    rgba(255,255,255,.79) 50%,
    rgba(255,255,255,.4) 89%,
    rgba(255,255,255,0))!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-bottom a,
html body footer#footer.dbr-premium-footer-root .dbr-ft-bottom span {
  color:#121d23!important;
  text-decoration:none!important;
  font:400 12px/1.5 Nunito,Arial,Helvetica,sans-serif!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-ft-bottom a:hover {
  text-decoration:underline!important;
}
html body footer#footer.dbr-premium-footer-root .dbr-footer-socials a:focus-visible,
html body footer#footer.dbr-premium-footer-root a:focus-visible {
  outline:2px solid #071d2b!important;
  outline-offset:3px!important;
}
@media(max-width:850px) {
  html body footer#footer.dbr-premium-footer-root .dbr-ft-wrap {
    width:calc(100% - 40px)!important;
    padding:42px 0 24px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body footer#footer.dbr-premium-footer-root .dbr-ft-grid {
    grid-template-columns:minmax(0,1fr)!important;
    gap:27px!important;
  }
  html body footer#footer.dbr-premium-footer-root .dbr-ft-brand img {
    width:170px!important;
  }
  html body footer#footer.dbr-premium-footer-root .dbr-ft-col>a,
  html body footer#footer.dbr-premium-footer-root .dbr-ft-contact .dbr-ft-contact-link {
    font:400 13px/1.5 Nunito,Arial,Helvetica,sans-serif!important;
  }
  html body footer#footer.dbr-premium-footer-root .dbr-ft-brand p {
    max-width:none!important;
    margin:18px 0 6px!important;
  }
  html body footer#footer.dbr-premium-footer-root .dbr-footer-socials {
    margin:18px 0 27px!important;
  }
  html body footer#footer.dbr-premium-footer-root .dbr-ft-bottom {
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:20px!important;
  }
}
/* Keep the six editorial FAQ sections visually continuous with the
   new shared footer; the homepage's own map fade stays unchanged. */
html body.hc-subpages-refined main#wp--skip-link--target > .entry-content::after {
  height:90px!important;
  background-image:linear-gradient(180deg,
    rgba(15,118,158,0) 0%,
    rgba(15,118,158,.22) 26%,
    rgba(15,118,158,.63) 64%,
    #0f769e 100%)!important;
  background-color:transparent!important;
}

/* Legal pages do not inherit the site's 90-percent visual scale. */
html body.hc-legal-blue footer#footer.dbr-premium-footer-root {
  zoom:.9!important;
  width:100%!important;
  max-width:none!important;
}