/* =====================================================
   HERO CURTAIN – scroll-linked, UX-friendly
   ===================================================== */

.hero-curtain-area{
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;

  /* Progress 0..1 wird per JS gesetzt */
  --curtain-p: 0;
}

/* Vorhang-Layer */
.hero-curtain-area .curtain-wrapper{
  position: absolute !important;
  inset: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  display: flex !important;
  overflow: hidden !important;

  /* Optional: wird später per JS reduziert, damit Content schneller lesbar wird */
  opacity: 1;
}

/* Panels */
.hero-curtain-area .curtain{
  flex: 0 0 50vw !important;
  width: 50vw !important;
  height: 100% !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;

  /* Schnelle Reaktion beim Scrollen */
  transition: transform 120ms linear !important;
  will-change: transform;
}

/* Bilder */
.hero-curtain-area .curtain-left{
  background-image: url("/wp-content/themes/hello-elementor-child/assets/img/linkes-bild.jpg") !important;
  transform: translateX(calc(((-100% - 8px) * var(--curtain-p)))) !important;
}

.hero-curtain-area .curtain-right{
  background-image: url("/wp-content/themes/hello-elementor-child/assets/img/rechtes-bild.jpg") !important;
  transform: translateX(calc(((100% + 8px) * var(--curtain-p)))) !important;
}