.videobanner video {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.videobanner figure { position: relative; }

.fachwerk-videobanner-button {
  position: absolute;
  bottom: 30px;
  left: 7.5%;
  z-index: 9999;

  padding: 6px;
  border-radius: 100%;

  font-size: 15px;
  line-height: 15px;

  background-color: rgba(255, 255, 255, .85);

  box-sizing: inherit;
}

.fachwerk-videobanner-button#fachwerk-videobanner-mute-button { left: calc(7.5% + 30px); }

@media screen and (min-width: 1353px) {
  .fachwerk-videobanner-button { left: calc((100vw - 1150px) / 2); }

  .fachwerk-videobanner-button#fachwerk-videobanner-mute-button { left: calc(((100vw - 1150px) / 2) + 30px); }
}

.fachwerk-videobanner-button img {
  display: block;
  width: 12px;
  height: 12px;

  object-fit: cover;
  object-position: bottom;
}

.fachwerk-videobanner-button img.swap { object-position: top; }

.videobanner figcaption {
  position: absolute;
  right: 7.5%;
  bottom: 30px;

  display: inline-block;
  padding: 10px 15px;
  
  text-align: right;
  line-height: 1;
  
  background-color: rgba(255, 255, 255, .85);
}

  /* Videobanner in sections */
  section:has(.module_fachwerk-video-banner) {
    width: 100%!important;
    max-width: none!important;
  }

  section .module_fachwerk-video-banner video { height: 500px; }

  section.video-banner-home .module_fachwerk-video-banner {
    -webkit-mask-image: url('../images/mask-video-banner-500.svg');
    mask-image: url('../images/mask-video-banner-500.svg');
    mask-size: 100% 500px
  }

    /* Videobanner folgt auf section.wide */
    section.wide+section .module_fachwerk-video-banner {
      -webkit-mask-image: url('../images/mask-video-banner-500-flat-top.svg');
      mask-image: url('../images/mask-video-banner-500-flat-top.svg');
    }

    /* section.wide folgt auf Videobanner */
    section:has(.module_fachwerk-video-banner):has(+.wide) { margin-bottom: 0!important; }

    section:has(.module_fachwerk-video-banner):has(+.wide) .module_fachwerk-video-banner {
      -webkit-mask-image: url('../images/mask-video-banner-500-flat-bottom.svg');
      mask-image: url('../images/mask-video-banner-500-flat-bottom.svg');
    }

    /* Videobanner steckt zwischen 2x section.wide */
    section.wide+section:has(.module_fachwerk-video-banner):has(+.wide) .module_fachwerk-video-banner {
      -webkit-mask-image: url(../images/mask-video-banner-500.svg);
      mask-image: url(../images/mask-video-banner-500.svg);
    }

    section.wide+section:has(.module_fachwerk-video-banner):has(+.wide) { background-color: white; }

  /* Videobanner: Home */
    /* Mobile (700x900) */
    @media screen and (max-width: 899px) {
      section.video-banner-home .module_fachwerk-video-banner video { height: auto; }

      section.video-banner-home .module_fachwerk-video-banner {
        -webkit-mask-image: url(../images/mask-video-banner-700x900.svg);
        mask-image: url(../images/mask-video-banner-700x900.svg);
        mask-size: 100% 100%;
      }

        /* Videobanner folgt auf section.wide */
        section.video-banner-home.wide+section .module_fachwerk-video-banner {
          -webkit-mask-image: url('../images/mask-video-banner-700x900-flat-top.svg');
          mask-image: url('../images/mask-video-banner-700x900-flat-top.svg');
        }

        /* section.wide folgt auf Videobanner */
        section.video-banner-home:has(.module_fachwerk-video-banner):has(+.wide) .module_fachwerk-video-banner {
          -webkit-mask-image: url('../images/mask-video-banner-700x900-flat-bottom.svg');
          mask-image: url('../images/mask-video-banner-700x900-flat-bottom.svg');
        }

        /* Videobanner steckt zwischen 2x section.wide */
        section.video-banner-home.wide+section:has(.module_fachwerk-video-banner):has(+.wide) .module_fachwerk-video-banner {
          -webkit-mask-image: url(../images/mask-video-banner-700x900.svg);
          mask-image: url(../images/mask-video-banner-700x900.svg);
        }
    }

    /* Desktop (4k) */
    @media screen and (min-width: 1550px) {
      section.video-banner-home .module_fachwerk-video-banner video { height: 700px; }

      section.video-banner-home .module_fachwerk-video-banner {
        -webkit-mask-image: url('../images/mask-video-banner-700.svg');
        mask-image: url('../images/mask-video-banner-700.svg');
        mask-size: 100% 700px
      }

        /* Videobanner folgt auf section.wide */
        section.video-banner-home.wide+section .module_fachwerk-video-banner {
          -webkit-mask-image: url('../images/mask-video-banner-700-flat-top.svg');
          mask-image: url('../images/mask-video-banner-700-flat-top.svg');
          mask-size: 100% 700px;
        }

        /* section.wide folgt auf Videobanner */
        section.video-banner-home:has(.module_fachwerk-video-banner):has(+.wide) .module_fachwerk-video-banner {
          -webkit-mask-image: url('../images/mask-video-banner-700-flat-bottom.svg');
          mask-image: url('../images/mask-video-banner-700-flat-bottom.svg');
          mask-size: 100% 700px;
        }

        /* Videobanner steckt zwischen 2x section.wide */
        section.video-banner-home.wide+section:has(.module_fachwerk-video-banner):has(+.wide) .module_fachwerk-video-banner {
          -webkit-mask-image: url(../images/mask-video-banner-700.svg);
          mask-image: url(../images/mask-video-banner-700.svg);
          mask-size: 100% 700px;
        }
    }