/* ==========================================================================
   Hero-Block
   ========================================================================== */

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

/* Bild liegt als Hintergrund-Ebene HINTER dem Text (position:absolute),
   NICHT mehr als Box, die den Text exakt auf ihre Hoehe zwingt. So wird
   .hero__content zum normalen Fluss-Element, das die tatsaechliche Hoehe
   des Hero-Bereichs bestimmt — lange Ueberschriften (mehrzeilig) schieben
   den Bereich einfach nach unten auf, statt vom Bild/overflow:hidden
   abgeschnitten zu werden. */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: clamp(240px, 78vw, 360px);
  overflow: hidden;
  z-index: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Desktop/Tablet (>=768px): volles Bild sichtbar (Seitenverhältnis des
   Containers entspricht dem echten Bildverhältnis 2200x570 -> minimaler
   bis kein Beschnitt, object-position haelt den oberen Bereich im Fokus) */
@media (min-width: 768px) {
  .hero__media {
    height: auto;
    aspect-ratio: 2200 / 570;
  }

  .hero__image {
    height: 100%;
    object-position: center top;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 29, 0.82) 0%, rgba(7, 11, 29, 0.5) 32%, rgba(7, 11, 29, 0.15) 58%, rgba(7, 11, 29, 0.35) 100%);
}

/* Normaler Fluss (nicht mehr absolut) — Mindesthoehe entspricht der
   Bildhoehe, damit kurze Texte weiterhin das komplette Bild zeigen;
   laengere Ueberschriften duerfen die Sektion einfach hoeher machen. */
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.65rem;
  min-height: clamp(240px, 78vw, 360px);
  padding-block: clamp(1.25rem, 4vw, 2.5rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.hero__breadcrumb {
  margin-block-end: 0.25rem;
}

.hero__badge {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 194, 31, 0.14);
  border: 1px solid var(--color-accent-light);
  color: var(--color-accent-light);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.hero__badge span[aria-hidden] {
  color: var(--color-accent-light);
  letter-spacing: 1px;
}

.hero__title {
  color: var(--color-white);
  max-width: 20ch;
  margin-inline: auto;
}

.hero__subtitle {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--color-text-primary);
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
  margin-block-end: 0;
}

.hero__cta {
  align-self: center;
  margin-block-start: 0.5rem;
}

@media (min-width: 768px) {
  .hero__content {
    min-height: 0;
    padding-block-start: clamp(2rem, 5vw, 3.5rem);
  }
}