/**
 * hero.css — BEM: hero, hero__*
 * Bild bleibt immer ganz und unbeschnitten (keine feste Höhe, kein object-fit: cover).
 */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

.hero__media {
  width: 100%;
  line-height: 0;
}

.hero__media img {
  width: 100%;
  height: auto;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 29, 0.55) 0%,
    rgba(7, 11, 29, 0.8) 100%
  );
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 34rem;
  margin-inline: auto;
}

.hero__breadcrumb {
  justify-content: center;
  color: var(--color-text-body);
}

.hero__badge {
  background: rgba(16, 21, 40, 0.85);
}

.hero__title {
  margin: 0;
  color: var(--color-white);
}

.hero__subtitle {
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  margin-bottom: 0;
}

.hero__cta {
  margin-top: 0.5rem;
}

@media (max-width: 599.98px) {
  /* Ab hier dient das Bild nur noch als Hintergrund: Die Bannerhöhe richtet
     sich nach dem Inhalt (Badge, H1, Subtitle, Button), damit auf Mobil
     nichts abgeschnitten wird. Das Bild wird dafür per object-fit: cover
     auf diese Höhe gestreckt/beschnitten — nur auf Mobil, Desktop bleibt
     unverändert ganz und unbeschnitten. */
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__overlay {
    position: relative;
    z-index: 1;
    inset: auto;
    background: linear-gradient(
      180deg,
      rgba(7, 11, 29, 0.5) 0%,
      rgba(7, 11, 29, 0.88) 65%,
      rgba(7, 11, 29, 0.95) 100%
    );
    align-items: center;
    padding-block: 2rem;
  }

  .hero__inner {
    max-width: 100%;
  }

  .hero__title {
    font-size: clamp(1.5rem, 1.1rem + 3vw, 2rem);
  }
}