/* Eigener CSS-Versuch, keine kostenpflichtige Shaders-Vorlage. */
.hero { position: relative; isolation: isolate; }
.hero-light {
  position: absolute;
  inset: 0 -2%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 72%, transparent);
}
.hero-light::before, .hero-light::after {
  content: "";
  position: absolute;
  inset: -35% -45%;
  background: linear-gradient(125deg,
    transparent 12%, rgba(228, 215, 201, .7) 25%,
    rgba(217, 109, 67, .32) 34%, transparent 44%,
    rgba(23, 107, 104, .23) 55%, rgba(228, 215, 201, .6) 66%,
    transparent 78%);
  animation: niftinker-light 10s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-light::after {
  background: linear-gradient(125deg, transparent 35%, rgba(217, 109, 67, .16) 45%, transparent 55%);
  animation-name: niftinker-light-counter;
  animation-duration: 13s;
}
@keyframes niftinker-light {
  from { transform: translateX(-15%) translateY(-5%) rotate(-5deg); }
  to { transform: translateX(15%) translateY(5%) rotate(5deg); }
}
@keyframes niftinker-light-counter {
  from { transform: translateX(12%) rotate(4deg); }
  to { transform: translateX(-12%) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-light::before, .hero-light::after { animation: none; will-change: auto; }
}