/* Dachreinigung Kosten · v36 / 30.10.2026
   White phase through section 1, smooth white-to-blue within first half
   of section 2. Applies visually, not only in an unused CSS variable.
   The menu and pricing calculations are left functional. */
html body.hc-subpages-refined main#wp--skip-link--target::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;bottom:auto!important;
  z-index:0!important;
  pointer-events:none!important;
  height:var(--hc-v36-end,1200px)!important;
  max-height:none!important;
  opacity:1!important;
  background:linear-gradient(180deg,
    #fff 0px,
    #fff var(--hc-v36-start,550px),
    rgba(255,255,255,.97) var(--hc-v36-stop1,700px),
    rgba(255,255,255,.79) var(--hc-v36-stop2,850px),
    rgba(255,255,255,.37) var(--hc-v36-stop3,1030px),
    rgba(255,255,255,0) var(--hc-v36-end,1200px)
  )!important;
}
/* Retain the white first hero and its soft photographic fade. */
html body.hc-subpages-refined .dbrh-hero {
  background:#fff!important;
}
html body.hc-subpages-refined .dbrh-hero .dbrh-hero__overlay{
  background:
    linear-gradient(0deg,#fff 0%,rgba(255,255,255,.98) 8%,rgba(255,255,255,.83) 26%,rgba(255,255,255,.22) 60%,rgba(255,255,255,.03) 100%),
    linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 28%,rgba(255,255,255,.67) 58%,rgba(255,255,255,.07) 100%)!important;
}
html body.hc-subpages-refined .dbrh-hero::after {
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 44%,#fff 100%)!important;
}
/* The portrait page uses its own bespoke photographic hero. */
html body.hc-about-storypage .hc-about-hero {background:#fff!important;background-image:none!important;}
html body.hc-about-storypage .hc-about-hero__background {
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.91) 27%,rgba(255,255,255,.27) 100%),
             linear-gradient(0deg,#fff 0%,rgba(255,255,255,.08) 55%,#fff 100%),
             url("/wp-content/uploads/2026/08/kostenheader.jpeg") center/cover no-repeat!important;
}
html body.hc-about-storypage :is(.hc-about-story,.hc-about-story__navwrap,.hc-about-chapter--opening,.hc-about-chapter--person){
  background:transparent!important;background-image:none!important;
}
/* The homepage follows the same convention, with numbered calculator
   steps 1 and 2 defining the fade location. Price cards remain untouched. */
html body:not(.hc-subpages-refined):not(.hc-legal-blue) .dbrh-hero{
  background:#fff!important;
}
html body:not(.hc-subpages-refined):not(.hc-legal-blue) .dbrh-hero .dbrh-hero__overlay {
  background:linear-gradient(to top,#fff 0%,rgba(255,255,255,.98) 10%,rgba(255,255,255,.84) 28%,rgba(255,255,255,.20) 70%,rgba(255,255,255,.03) 100%),
             linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 25%,rgba(255,255,255,.67) 55%,rgba(255,255,255,.04) 100%)!important;
}
html body:not(.hc-subpages-refined):not(.hc-legal-blue) .dbrh-hero::after {
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.48) 44%,#fff 100%)!important;
}
html body:not(.hc-subpages-refined):not(.hc-legal-blue) section.dbrpf.hc-ref-calculator {
  background-color:#a6c6d6!important;
  background-image:linear-gradient(180deg,
    #fff 0px,
    #fff var(--hc-v36-home-start,180px),
    #f8fbfc var(--hc-v36-home-stop1,195px),
    #e2eef4 var(--hc-v36-home-stop2,225px),
    #a6c6d6 var(--hc-v36-home-end,250px),
    #a6c6d6 40%,
    #94b9ca 51%,
    #75a2b7 61%,
    #5b8ba4 70%,
    #46768f 78%,
    #477890 84%,
    #6597ac 91%,
    #8db7c8 96%,
    #b1cddb 100%
  )!important;
}
@media(max-width:750px) {
 html body:not(.hc-subpages-refined):not(.hc-legal-blue) section.dbrpf.hc-ref-calculator{
  background-image:linear-gradient(180deg,
    #fff 0px,
    #fff var(--hc-v36-home-start,180px),
    #f8fbfc var(--hc-v36-home-stop1,195px),
    #e2eef4 var(--hc-v36-home-stop2,225px),
    #a6c6d6 var(--hc-v36-home-end,250px),
    #a6c6d6 40%,
    #a3c4d3 53%,
    #83adbf 64%,
    #6496ad 75%,
    #4d819b 85%,
    #7baabd 94%,
    #b1cddb 100%
  )!important;
 }
}
/* Exact homepage header typography, widths, spacing and green contact CTA
   on the two legal pages (their original inline CSS had smaller links). */
@media(min-width:821px){
 html body.hc-legal-blue header.dbr-final-header nav.dbr-final-nav{
   gap:31px!important;
   width:auto!important;height:38px!important;
   min-height:0!important; padding:0!important;
   display:flex!important;align-items:center!important;
   justify-content:flex-end!important;flex-wrap:nowrap!important;
 }
 html body.hc-legal-blue header.dbr-final-header nav.dbr-final-nav>a{
   font:700 15px/18.75px Arial,sans-serif!important;
   color:#123b52!important;
   padding:0!important;margin:0!important;
   letter-spacing:0!important;
   text-decoration:none!important;
   white-space:nowrap!important;
 }
 html body.hc-legal-blue header.dbr-final-header nav.dbr-final-nav>a.dbr-master-button-v5 {
   font:700 15px/18.75px Arial,sans-serif!important;
   color:#fff!important;
   background:#397f5c!important;
   border-radius:5px!important;
   padding:12px 17px!important;
   border:0!important;
 }
}
@media(max-width:820px) {
 html body.hc-legal-blue header.dbr-final-header .dbr-final-header-inner{
   width:calc(100% - 31px)!important;
   max-width:none!important;
   margin-left:15px!important;
   margin-right:16px!important;
 }
 html body.hc-legal-blue header.dbr-final-header .dbr-final-logo img{
   transform:translateY(-1px)!important;
 }
 html body.hc-legal-blue header.dbr-final-header .dbr-clone-menu-toggle{
   transform:translateY(-1px)!important;
 }
}

/* Homepage's content is rendered at a 0.9 layout scale. Match its
   resulting pixels on the unscaled legal documents without transforming
   those pages or their accessibility text. */
@media(min-width:821px) {
 html body.hc-legal-blue header.dbr-final-header nav.dbr-final-nav {
   gap:27.9px!important;
 }
 html body.hc-legal-blue header.dbr-final-header nav.dbr-final-nav>a {
   font:700 13.5px/16.875px Arial,sans-serif!important;
 }
 html body.hc-legal-blue header.dbr-final-header nav.dbr-final-nav>a.dbr-master-button-v5 {
   font:700 13.5px/16.875px Arial,sans-serif!important;
   padding:10.8px 15.3px!important;
 }
}