/* marquee.css - Styles */
:root{
  --marquee-default-speed-ms: 400000; /* Default Dauer eines Loops in ms */
  --marquee-gap: 30px;
  --marquee-easing: linear;
}

/* Container */
.animate-text {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0!important;
}

/* Jedes p als eigene Zeile (verhindert Überlappungen) */
.animate-text p {
  display: block;           /* nimmt eigene Zeile */
  width: 100%!important;
  max-width: 100%!important;
  box-sizing: border-box;
  overflow: hidden;         /* Inhalt clippen */
  white-space: nowrap;
  margin: 0!important;
  padding: 6px 0;
  position: relative;       /* für transform */
  will-change: transform;
}

/* Track, der Items nebeneinander hält (für infinite) */
.marquee.infinite .marquee-track,
.scroll.infinite .marquee-track {
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  white-space: nowrap;
  will-change: transform;
}

/* einzelne Kopie innerhalb des Tracks */
.marquee.infinite .marquee-item,
.scroll.infinite .marquee-item {
  display: inline-block;
  white-space: nowrap;
}

/* CSS-Animation (wird vom JS mit Dauer gefüttert) */
@keyframes marquee-loop {
  from { transform: translate3d(var(--from, 0),0,0); }
  to   { transform: translate3d(var(--to, -50%),0,0); }
}
.marquee.infinite.play .marquee-track,
.scroll.infinite.play .marquee-track {
  animation-name: marquee-loop;
  animation-timing-function: var(--marquee-easing, linear);
  animation-iteration-count: infinite;
  animation-duration: var(--duration, 8s);
}

/* Utility: reverse-kein extra styling nötig - JS invertiert --from/--to bzw. multipliziert Geschwindigkeit */