.hero {
  position: relative;
  overflow: hidden;
  padding-block: 3rem;
  isolation: isolate;
  background-color: var(--color-bg-dark);
  /* Volle Seitenbreite (kein max-width) — das Bild geht Rand an Rand.
     Nur eine UNTERGRENZE (min-height), damit der Block mit dem Bild
     mitwächst, aber auch wächst, falls der Textinhalt (v. a. auf
     schmalen Bildschirmen) mehr Platz braucht als das Bild hoch ist. */
  min-height: calc(100vw / 2.8);
}

.hero__bg-blur {
  /* Unscharfe Kopie desselben Bilds, die die GESAMTE Box (auch wenn sie
     durch langen Textinhalt auf schmalen Bildschirmen höher wird) randlos
     füllt. Dient nur als nahtloser Übergang unterhalb des scharfen Bilds
     (s.u.) — ein Beschnitt fällt hier nicht auf, weil alles verschwommen
     ist, daher entsteht nie eine sichtbare harte Kante oder Leerfläche. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(50px) brightness(0.65) saturate(1.1);
  transform: scale(1.15);
  z-index: -3;
}

.hero__bg {
  /* Die Bildhöhe hängt NUR von der Bildbreite ab (aspect-ratio), nicht
     von der Höhe der .hero-Box. So bleibt der Zuschnitt (oben, Himmel/
     Berge) immer gleich moderat (nie seitlich), egal wie viel
     zusätzliche Höhe der Textinhalt auf schmalen Bildschirmen braucht —
     dort wächst nur die Box nach unten, und der unscharfe Layer
     darunter (s.o.) füllt den Rest nahtlos, ohne dass am scharfen Bild
     selbst weiter beschnitten wird oder Charaktere/Logo je betroffen
     sind. Oben angedockt, damit das Bild direkt unter dem Header
     beginnt. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 2.8 / 1;
  object-fit: cover;
  object-position: center bottom;
  z-index: -2;
  /* Sanfter Verblassungsrand ganz unten (nur die letzten ~8%, weit unter
     Charakteren/Logo) sorgt für einen weichen statt harten Übergang zum
     unscharfen Layer darunter, falls die Box durch Textinhalt höher
     wird als das scharfe Bild. */
  mask-image: linear-gradient(to bottom, black 0%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 92%, transparent 100%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 5, 29, 0.55) 0%, rgba(23, 5, 29, 0.92) 100%);
  z-index: -1;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 46rem;
}

.hero__breadcrumb { margin-bottom: 0.5rem; }

.hero__rating { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.hero__rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-accent-light);
  color: var(--color-btn-text-dark);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
}

.hero__title { color: var(--color-white); }
.hero__subtitle { font-size: 1.05rem; color: var(--color-text-main); max-width: 42rem; }

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

@media (min-width: 768px) {
  .hero { padding-block: 4.5rem; }
}

@media (max-width: 767px) {
  /* Auf Mobile ist nicht mehr wichtig, was genau auf dem Bild zu sehen
     ist (Charakter/Logo dürfen hier beschnitten werden) — wichtig ist
     nur, dass das scharfe Bild als Hintergrund den GESAMTEN oberen
     Inhalt (Bewertungs-Badge, H1, Subtitle, Button) durchgehend
     hinterlegt, egal wie hoch der Textblock durch Zeilenumbrüche wird.
     Deshalb hier kein festes aspect-ratio mehr: das Bild füllt wie der
     Blur-Layer die komplette (variable) Höhe der .hero-Box randlos. */
  .hero__bg {
    height: 100%;
    aspect-ratio: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}