/* Seitenbezogene Hero-Hintergründe
   WebP-Dateien werden per GitHub Action aus den PNG-Originalen erzeugt:
   /assets/hero/home.webp
   /assets/hero/rechner.webp
   /assets/hero/business.webp
   /assets/hero/thailand.webp
   /assets/hero/new-york.webp
   /assets/hero/amex.webp
   /assets/hero/sammeln.webp
   /assets/hero/kontakt.webp
   /assets/hero/legal.webp
*/

.hero,
.rechner-hero-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero { padding: 92px 0 76px; }
.hero-small { padding: 64px 0 46px; }

.hero-home {
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.96) 0%, rgba(7, 17, 31, 0.86) 38%, rgba(7, 17, 31, 0.54) 68%, rgba(7, 17, 31, 0.32) 100%),
    url('/miles-planer/assets/hero/home.webp');
}

.hero-rechner,
.rechner-hero-bg {
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.96) 0%, rgba(7, 17, 31, 0.88) 42%, rgba(7, 17, 31, 0.64) 68%, rgba(7, 17, 31, 0.42) 100%),
    url('/miles-planer/assets/hero/rechner.webp');
}

.hero-business {
  background-position: center right;
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.97) 0%, rgba(7, 17, 31, 0.88) 36%, rgba(7, 17, 31, 0.54) 62%, rgba(7, 17, 31, 0.28) 100%),
    url('/miles-planer/assets/hero/business.webp');
}

.hero-thailand {
  background-position: center right;
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.96) 0%, rgba(7, 17, 31, 0.84) 34%, rgba(7, 17, 31, 0.48) 62%, rgba(7, 17, 31, 0.24) 100%),
    url('/miles-planer/assets/hero/thailand.webp');
}

.hero-new-york {
  background-position: center right;
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.97) 0%, rgba(7, 17, 31, 0.86) 35%, rgba(7, 17, 31, 0.52) 63%, rgba(7, 17, 31, 0.26) 100%),
    url('/miles-planer/assets/hero/new-york.webp');
}

.hero-amex {
  background-position: center right;
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.97) 0%, rgba(7, 17, 31, 0.88) 38%, rgba(7, 17, 31, 0.58) 66%, rgba(7, 17, 31, 0.34) 100%),
    url('/miles-planer/assets/hero/amex.webp');
}

.hero-sammeln {
  background-position: center right;
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.97) 0%, rgba(7, 17, 31, 0.88) 36%, rgba(7, 17, 31, 0.56) 64%, rgba(7, 17, 31, 0.30) 100%),
    url('/miles-planer/assets/hero/sammeln.webp');
}

.hero-contact {
  background-position: center right;
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.97) 0%, rgba(7, 17, 31, 0.88) 38%, rgba(7, 17, 31, 0.60) 66%, rgba(7, 17, 31, 0.36) 100%),
    url('/miles-planer/assets/hero/kontakt.webp');
}

.hero-legal {
  background-position: center right;
  background-image:
    linear-gradient(90deg, rgba(7, 17, 31, 0.97) 0%, rgba(7, 17, 31, 0.90) 40%, rgba(7, 17, 31, 0.68) 70%, rgba(7, 17, 31, 0.48) 100%),
    url('/miles-planer/assets/hero/legal.webp');
}

.hero::after,
.rechner-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 28%, rgba(96, 165, 250, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(7, 17, 31, 0.06), rgba(5, 10, 19, 0.50));
}

.hero .container,
.rechner-hero-bg .container {
  position: relative;
  z-index: 1;
}

.hero h1,
.hero .hero-text,
.hero .hero-meta,
.rechner-hero-bg h2,
.rechner-hero-bg p {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.hero .hero-card,
.rechner-hero-bg .tool-card {
  background: rgba(16, 28, 47, 0.90);
  backdrop-filter: blur(10px);
  border-color: rgba(96, 165, 250, 0.26);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}

@media (max-width: 900px) {
  .hero,
  .rechner-hero-bg {
    background-image:
      linear-gradient(180deg, rgba(7, 17, 31, 0.84) 0%, rgba(7, 17, 31, 0.72) 48%, rgba(7, 17, 31, 0.90) 100%),
      var(--hero-mobile-image);
    background-position: center top;
  }

  .hero-home { --hero-mobile-image: url('/miles-planer/assets/hero/home.webp'); }
  .hero-rechner,
  .rechner-hero-bg { --hero-mobile-image: url('/miles-planer/assets/hero/rechner.webp'); }
  .hero-business { --hero-mobile-image: url('/miles-planer/assets/hero/business.webp'); }
  .hero-thailand { --hero-mobile-image: url('/miles-planer/assets/hero/thailand.webp'); }
  .hero-new-york { --hero-mobile-image: url('/miles-planer/assets/hero/new-york.webp'); }
  .hero-amex { --hero-mobile-image: url('/miles-planer/assets/hero/amex.webp'); }
  .hero-sammeln { --hero-mobile-image: url('/miles-planer/assets/hero/sammeln.webp'); }
  .hero-contact { --hero-mobile-image: url('/miles-planer/assets/hero/kontakt.webp'); }
  .hero-legal { --hero-mobile-image: url('/miles-planer/assets/hero/legal.webp'); }

  .hero { padding: 64px 0 48px; }
  .hero-small { padding: 52px 0 40px; }
}

@media (max-width: 560px) {
  .hero,
  .rechner-hero-bg {
    background-image:
      linear-gradient(180deg, rgba(7, 17, 31, 0.76) 0%, rgba(7, 17, 31, 0.72) 44%, rgba(7, 17, 31, 0.94) 100%),
      var(--hero-mobile-image);
    background-size: auto 100%, cover;
    background-position: center top;
  }
}