.site-header {
  position: relative;
  isolation: isolate;
}

.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  z-index: -1;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.9), rgba(255, 250, 240, 0.68) 48%, rgba(255, 250, 240, 0.88)),
    linear-gradient(to bottom, rgba(255, 250, 240, 0.32), rgba(255, 250, 240, 0.74)),
    url("../Bilder/header.gif") center 42% / cover no-repeat !important;
  border-bottom: 1px solid rgba(68, 52, 33, 0.12);
  box-shadow: 0 18px 52px rgba(80, 62, 37, 0.08);
}

main#start .hero {
  background:
    linear-gradient(120deg, rgba(49, 91, 73, 0.46), rgba(255, 250, 240, 0.16)),
    url("../Bilder/header.gif") center 44% / cover no-repeat,
    #315b49 !important;
}

main#start .hero > img.hero-bg {
  opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  main#start .hero {
    background-image:
      linear-gradient(90deg, rgba(255, 250, 240, 0.9), rgba(255, 250, 240, 0.68) 48%, rgba(255, 250, 240, 0.88)),
      linear-gradient(to bottom, rgba(255, 250, 240, 0.32), rgba(255, 250, 240, 0.74)),
      url("images/hero-wide.jpg") !important;
  }
}