/* =========================================================
   Hero block (BEM) — картинка целая, без обрезки, во всю ширину
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  background: var(--color-bg-primary);
}

/*
 * Breakpoint-Strategie fürs Hero-Bild (reale Asset-Ratio: 2200×570 = 220/57):
 * - Mobil (<768px): Bild wird als reiner dekorativer Hintergrund behandelt —
 *   fixe/clamp Mindesthöhe, object-fit:cover (bewusster Ausschnitt), da auf
 *   schmalen Screens nicht gleichzeitig Platz für das volle Bild UND einen
 *   lesbaren Textblock ist.
 * - Desktop/Tablet (≥768px): Container-Aspect-Ratio entspricht exakt der
 *   realen Bild-Ratio (220/57) → object-fit:cover beschneidet dadurch nichts,
 *   das Bild ist vollständig sichtbar.
 *
 * WICHTIG: .hero__bg ist eine reine Hintergrundebene (position:absolute;
 * inset:0), die NICHT die Höhe von .hero bestimmt. Die tatsächliche Höhe von
 * .hero wird ausschließlich durch .hero__content (im normalen Fluss, siehe
 * unten) festgelegt. Dadurch kann .hero__content NIE vom Bild-Container
 * abgeschnitten werden — auch nicht, wenn eine lange H1 auf schmalen Screens
 * mehrzeilig umbricht und mehr Platz braucht, als die Mindesthöhe vorsieht
 * (das war der Bug: CTA-Button wurde vom overflow:hidden des alten
 * .hero__media abgeschnitten).
 */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Scrim ist oben am dunkelsten, da der Textblock jetzt oben sitzt */
  background: linear-gradient(180deg, rgba(7, 11, 29, 0.88) 0%, rgba(7, 11, 29, 0.6) 42%, rgba(7, 11, 29, 0.25) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: clamp(300px, 92vw, 460px);
  padding-block: clamp(1.25rem, 6vw, 2.25rem) 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.hero__breadcrumb {
  margin-bottom: 0.25rem;
  justify-content: center;
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  background: rgba(16, 21, 40, 0.75);
  border: 1px solid var(--color-accent-light);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: var(--font-size-small);
}

.hero__rating-stars {
  color: var(--color-accent-light);
  letter-spacing: 1px;
}

.hero__rating-value {
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
}

.hero__title {
  color: var(--color-white);
  max-width: 46rem;
}

.hero__subtitle {
  color: var(--color-text-primary);
  max-width: 40rem;
  margin-inline: auto;
  font-size: var(--font-size-body);
  margin-bottom: 0;
}

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

@media (min-width: 768px) {
  .hero__content {
    min-height: auto;
    aspect-ratio: 220 / 57;
    padding-block: clamp(1.5rem, 4vw, 2.5rem) 2rem;
    gap: 1rem;
  }
}