/* =========================
   GEMEINSAMES IMAGE-HERO-SYSTEM
   Basis fuer Seiten-Heros und Startseiten-Slideshow
========================= */

.mvo-image-hero {
  --mvo-hero-mobile-height: clamp(640px, calc(100svh - 72px), 760px);
  --mvo-hero-mobile-min-height: 640px;
  --mvo-hero-mobile-content-padding: 112px 22px 116px;
  --mvo-hero-mobile-content-padding-compact: 108px 20px 112px;
  --mvo-hero-mobile-overlay:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.12) 30%,
      rgba(0, 0, 0, 0.48) 68%,
      rgba(5, 5, 5, 0.9) 100%
    ),
    radial-gradient(
      ellipse at 50% 48%,
      transparent 28%,
      rgba(0, 0, 0, 0.38) 100%
    );
  --mvo-hero-mobile-kicker-color: rgba(242, 201, 76, 0.96);
  --mvo-hero-mobile-kicker-size: 0.74rem;
  --mvo-hero-mobile-kicker-size-compact: 0.68rem;
  --mvo-hero-mobile-kicker-spacing: 0.12em;
  --mvo-hero-mobile-title-size: clamp(2.35rem, 11vw, 3.9rem);
  --mvo-hero-mobile-title-size-compact: clamp(2.12rem, 10vw, 3.05rem);
  --mvo-hero-mobile-title-line-height: 1.02;
  --mvo-hero-mobile-text-size: 1.02rem;
  --mvo-hero-mobile-text-line-height: 1.55;
  --mvo-hero-mobile-text-color: rgba(255, 255, 255, 0.88);
  --mvo-hero-title-shadow: 0 12px 42px rgba(0, 0, 0, 0.5);
  --mvo-hero-text-shadow: 0 8px 28px rgba(0, 0, 0, 0.46);
  --mvo-hero-kicker-shadow: 0 6px 22px rgba(0, 0, 0, 0.42);
}