/* ==========================================================================
   R2GO4-Hero – Startseiten-Fullscreen-Hero mit Overlay.
   Plain HTML im Content: <h2> + <p> (Subtitle) + <a class="btn">.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
  /* Falls Hero als CSS-background-image gerendert wird (statt <picture>):
     korrektes Crop-Verhalten erzwingen, sonst tile/repeat-Default. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero-Background als <img> Layer hinter Content + Overlay.
   <img> statt CSS-background-image → Browser priorisiert es via fetchpriority,
   erkennt es zuverlässig als LCP-Element und lädt es früher. */
.hero__bg,
.hero__bg img,
.hero__bg picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero__bg img {
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg);
}

/* Hero h2 — designed-Variante: weiß auf Hero-BG, eigene Size + line-height.
   font-family + font-weight aus base.css. */
.hero h2 {
  color: var(--color-white);
  font-size: 6.875rem;
  line-height: 1.1;
  text-shadow: none;
  /* Hero ist kein Section-Header: H2 und Subtitle sind ein optisch zusammen-
     hängendes Hero-Pair (Subtitle steuert den Abstand selbst). Globale h2
     margin-bottom würde hier nur den Subtitle nach unten drücken. */
  margin-bottom: 0;
}

.hero p {
  font-family: var(--font-body);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--color-white);
  margin-top: -0.125rem;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

.hero .btn {
  margin-top: var(--space-2xl);
}

/* Tablet (bis ≤1199px) inkl. iPad Air Landscape: Schrift kleiner als
   Desktop (Laptop_13 1366 + Desktop 1920 bleiben mit 6.875rem unangetastet) */
@media (max-width: 1199px) {
  .hero h2 {
    font-size: 3rem;
  }
  .hero p {
    font-size: 1.15rem;
  }
}

/* Phone Landscape (max-height ≤500px): Headline + Padding kompakter,
   damit auf 390-430px Höhe alles in den Viewport passt und nicht
   gegen die Header-Bar kollidiert */
@media (max-height: 500px) {
  .hero {
    min-height: 100vh;
    padding-top: var(--space-3xl);
  }
  .hero h2 {
    font-size: 2.6rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .hero .btn {
    margin-top: var(--space-md);
  }
}

/* Phone (≤767px): Original-Phone-Werte wiederhergestellt */
@media (max-width: 767px) {
  .hero h2 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

/* Hero-Inhalt (Headline + Button) hochziehen — wie bei zürker */
@media (min-width: 768px) {
  .hero__content { transform: translateY(-200px); }
}