:root{--page-title-display:none;}/* Start custom CSS *//* Der äußere Container bestimmt, wie lang der vertikale Scrollweg ist */
#scroll-container {
  height: 400vh; /* 4x so hoch wie der Bildschirm */
  view-timeline-name: --horizontal-scroll;
  view-timeline-axis: block;
}

/* Hält den Inhalt fixiert, während gescrollt wird */
#sticky-box {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Der Track, der sich physisch nach links bewegt */
#horizontal-track {
  display: flex;
  width: 400vw; /* Entspricht 4 Sektionen à 100vw */
  height: 100%;
  
  /* Moderne CSS-Scroll-Animation */
  animation: scroll-move linear both;
  animation-timeline: --horizontal-scroll;
  animation-range: contain 0% contain 100%;
}

.card {
  width: 80vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

/* Verschiebung von rechts nach links */
@keyframes scroll-move {
  to {
    transform: translateX(-300vw); /* Gesamte Breite (400vw) minus 1 Bildschirmbreite (100vw) */
  }
}/* End custom CSS */