/* Scroll-Scrubbing: Bildsequenzen auf Canvas, siehe scrub.js.
   Nur auf Seiten eingebunden, die ein [data-scrub]-Element tragen. */

.scrub{position:relative;overflow:hidden;background:transparent}
.scrub>img,.scrub>canvas{display:block;width:100%;height:100%;object-fit:cover}
.scrub>canvas{position:absolute;inset:0}

/* Die Renderings haben einen eigenen Boden (Reflexion, leichte Vignette), der
   an einer harten Kante gegen den Seitengrund #000212 sichtbar wuerde. Die
   Raender werden deshalb weich ausgeblendet, sodass das Bild in die Seite
   uebergeht statt als Rechteck darauf zu liegen. */
.scrub-feather{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
                     linear-gradient(to bottom,transparent,#000 14%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
             linear-gradient(to bottom,transparent,#000 14%,#000 82%,transparent);
  mask-composite:intersect;
}

/* Banner unter dem Hero-Text der Unterseiten. Der Wrapper ist ein Flex-Row,
   deshalb umbrechen lassen und dem Banner die ganze Zeile geben. */
.service-three-hero-section.has-scrub .service-three-hero-wrapper{flex-wrap:wrap}
.scrub-banner{flex:0 0 100%;width:100%;max-width:1200px;height:auto;align-self:flex-start;margin:40px auto 0;aspect-ratio:2/1}
.scrub-banner.is-portrait{max-width:520px;aspect-ratio:3/4}
.scrub-banner.is-square{max-width:640px;aspect-ratio:1/1}
.service-three-hero-section.has-scrub{max-height:none;padding-bottom:40px}
@media (max-width:767px){.scrub-banner{margin-top:36px}}

/* Startseite: Sequenz als Hero-Hintergrund statt des Fotos, Abdunklung
   etwas leichter als beim Foto, damit die Zellen lesbar bleiben */
.home-three-banner-background.has-scrub{background-image:none}
.home-three-banner-background .scrub{position:absolute;inset:0}
.home-three-banner-background .scrub>img{position:absolute;inset:0}
.home-three-banner-background .scrub::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,2,18,.55),rgba(0,2,18,.55) 72%,#000212 100%);pointer-events:none}

/* Startseite: das Stack-Bild im Abschnitt "How it works" */
.service-one-hero-banner .scrub{width:100%;max-width:1200px;aspect-ratio:2/1}