/* ==========================================================================
   Hero mit Parallax: vier Ebenen bewegen sich beim Scrollen unterschiedlich
   schnell. Hinten das Video (fast stehend), dann helle Hügel, der Text,
   vorne Wiese, Bäume und Haus (fast normal mit der Seite).
   ========================================================================== */

.hero-px {
  position: relative;
  height: calc(100svh - 4.5rem); /* Hero + Menü = genau ein Bildschirm */
  min-height: 34rem;
  max-height: 68rem;
  overflow: hidden;
  background: var(--torf);
  color: #fff;
}
/* Handy quer: sonst liegt die Überschrift unterhalb des ersten Bildschirms */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-px { min-height: 21rem; }
}

.hero-px__layer {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
}

/* Ebene 1: Video */
.hero-px__media { inset: 0; }
.hero-px__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-px__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(24 28 24 / 0.4) 0%, rgb(24 28 24 / 0) 30%),
    linear-gradient(to right, rgb(24 28 24 / 0.72) 0%, rgb(24 28 24 / 0.5) 38%, rgb(24 28 24 / 0.12) 70%);
}

/* Ebene 2: helle Hügel am Horizont */
.hero-px__hills {
  bottom: 0;
  height: clamp(120px, 19vw, 260px);
}
.hero-px__hills svg { width: 100%; height: 100%; }

/* Ebene 3: Text */
.hero-px__content {
  inset: 0;
  display: flex;
  align-items: flex-end;
  /* Text sitzt knapp über den Hügeln (Hügel-Ebene: clamp(120px, 19vw, 260px)) */
  padding-bottom: calc(clamp(120px, 19vw, 260px) * 0.75 + clamp(1.5rem, 4vh, 3rem));
}
.hero-px__content .wrap { width: 100%; }
.hero-px h1 { color: #fff; text-shadow: 0 2px 24px rgb(24 28 24 / 0.35); }
.hero-px .hero__lead { color: #f1efe9; text-shadow: 0 1px 12px rgb(24 28 24 / 0.4); }
.btn--light-ghost { background: transparent; border-color: rgb(255 253 248 / 0.85); color: #fff; }
.btn--light-ghost:hover { background: var(--nebel); border-color: var(--nebel); color: var(--wiese); }

/* Ebene 4: Vordergrund (Wiese, Bäume, Haus) */
.hero-px__front {
  bottom: -1px;
  height: clamp(110px, 15vw, 210px);
}
.hero-px__front svg { width: 100%; height: 100%; }


/* unten etwas abdunkeln, weil der Text jetzt über der hellen Wiese steht */
.hero-px__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(24 28 24 / 0.5) 0%, rgb(24 28 24 / 0) 55%);
}