/* Horizontal Parallax – v1.1.1 */
:root {
  --hp-edge-offset: 200px;
  --hp-edge-offset-mobile: 80px;
  --hp-gap: 24px;
}

/* Full-bleed Container ohne horizontale Scrollbar */
.hp-scroll-row {
  position: relative;
  width: 100vw;
  width: 100dvw; /* vermeidet 100vw + vertikale Scrollbar-Overflow */
  margin-left: calc(50% - 50vw);
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50vw);
  margin-right: calc(50% - 50dvw);

  /* Nur horizontal beschneiden, vertikal normal fließen lassen */
  overflow-x: clip;
  overflow-y: visible;

  will-change: transform;
  contain: layout paint;
}

.hp-scroll-row .hp-scroll-track {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;

  /* Track breiter als Viewport -> Anschnitt links/rechts */
  width: calc(100vw + var(--hp-edge-offset) * 2);
  width: calc(100dvw + var(--hp-edge-offset) * 2);
  transform: translateX(calc(var(--hp-edge-offset) * -1));
  will-change: transform;
}

.hp-scroll-track > * {
  flex: 0 0 auto;
}

/* Bildgrößen:
   - Desktop (default): 30vh Höhe, Breite auto
   - Mobile (<768px): 20vh Höhe */
.hp-scroll-track figure > img {
  height: 24vh;
  width: auto;
  max-width: none;
  display: block;
  object-fit: cover;
}

@media (max-width: 768px) {
  .hp-scroll-row .hp-scroll-track {
    width: calc(100vw + var(--hp-edge-offset-mobile) * 2);
    width: calc(100dvw + var(--hp-edge-offset-mobile) * 2);
    transform: translateX(calc(var(--hp-edge-offset-mobile) * -1));
  }
  .hp-scroll-track figure > img {
    height: 12vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-scroll-row .hp-scroll-track {
    transform: translateX(0) !important;
    transition: none !important;
  }
}

/* Hilfsklassen */
.hp-edge-80  { --hp-edge-offset: 80px;  --hp-edge-offset-mobile: 40px; }
.hp-edge-120 { --hp-edge-offset: 120px; --hp-edge-offset-mobile: 60px; }
.hp-edge-160 { --hp-edge-offset: 160px; --hp-edge-offset-mobile: 80px; }
.hp-edge-200 { --hp-edge-offset: 200px; --hp-edge-offset-mobile: 80px; }
.hp-edge-240 { --hp-edge-offset: 240px; --hp-edge-offset-mobile: 100px; }