/* Grüne Aurora auf der Startseite – serverfähig ohne React oder Build-System */
.hero {
  isolation: isolate;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .96), rgba(244, 250, 239, .86)),
    #f7faf4;
}

.hero-aurora {
  z-index: 0;
  filter: none;
  opacity: 1;
  border-radius: 0;
  width: auto;
  height: auto;
  animation: none;
  pointer-events: none;
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(ellipse 52% 44% at 45% 16%, rgba(139, 195, 74, .42) 0%, transparent 68%),
    radial-gradient(ellipse 45% 36% at 84% 30%, rgba(23, 79, 52, .36) 0%, transparent 70%),
    radial-gradient(ellipse 54% 42% at 18% 68%, rgba(71, 132, 54, .28) 0%, transparent 72%),
    radial-gradient(ellipse 60% 25% at 62% 88%, rgba(176, 205, 95, .32) 0%, transparent 74%);
}

.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero-aurora::before {
  opacity: .78;
  background:
    radial-gradient(ellipse 48% 38% at 52% 18%, rgba(207, 232, 154, .66) 0%, transparent 70%),
    radial-gradient(ellipse 38% 34% at 80% 48%, rgba(31, 111, 67, .3) 0%, transparent 72%);
  animation: green-aurora-one 10s ease-in-out infinite alternate;
}

.hero-aurora::after {
  opacity: .72;
  background:
    radial-gradient(ellipse 46% 38% at 22% 58%, rgba(97, 160, 60, .34) 0%, transparent 72%),
    radial-gradient(ellipse 56% 28% at 64% 82%, rgba(151, 190, 70, .32) 0%, transparent 74%);
  animation: green-aurora-two 13s ease-in-out infinite alternate-reverse;
}

.hero-grid,
.hero-stats {
  z-index: 2;
}

@keyframes green-aurora-one {
  0% { transform: translate3d(-5%, -3%, 0) rotate(-3deg) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) rotate(5deg) scale(1.08); }
  100% { transform: translate3d(7%, -2%, 0) rotate(1deg) scale(.96); }
}

@keyframes green-aurora-two {
  0% { transform: translate3d(5%, 3%, 0) rotate(4deg) scale(.94); }
  50% { transform: translate3d(-4%, -2%, 0) rotate(-5deg) scale(1.09); }
  100% { transform: translate3d(-6%, 4%, 0) rotate(2deg) scale(1); }
}

@media (max-width: 760px) {
  .hero-aurora {
    inset: -10% -45%;
    background:
      radial-gradient(ellipse 55% 40% at 50% 12%, rgba(139, 195, 74, .38) 0%, transparent 70%),
      radial-gradient(ellipse 50% 42% at 78% 46%, rgba(23, 79, 52, .28) 0%, transparent 72%),
      radial-gradient(ellipse 56% 34% at 26% 78%, rgba(98, 153, 63, .24) 0%, transparent 74%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora::before,
  .hero-aurora::after {
    animation: none;
  }
}