:root {
  --image-gap: 20px;      /* Abstand zwischen Bildern */
  --column-gap: 20px;     /* Abstand zwischen Spalten */
  --scroll-speed: 20s;    /* Dauer für einen Durchlauf */
}

/* Endlos-Scroll-Animation */
@keyframes scrollLoop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* Wrapper für alle Spalten */
.vis-wrapper {
  position: relative;
  display: flex;
  height: 400px; /* Plugin-Einstellung */
  overflow: hidden;
  gap: var(--column-gap);
  justify-content: center;
}

/* Einzelne Spalte mit Animation */
.vis-column {
  display: flex;
  flex-direction: column;
  gap: var(--image-gap);
  animation: scrollLoop linear infinite;
  animation-duration: var(--scroll-speed);
  will-change: transform;
}

/* Animation bei Hover pausieren */
.vis-column:hover {
  animation-play-state: paused;
}

/* Bild selbst */
.vis-image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

/* Zoom-Effekt beim Hover */
.vis-image-wrapper:hover .vis-image {
  transform: scale(1.2);
}

/* Wrapper für jedes Bild */
.vis-image-wrapper {
  position: relative;
  overflow: visible;
}

/* Overlay-Beschriftung */
.vis-image-name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 0;
  text-align: center;
  background-color: rgba(11, 49, 105, 0.7);
  color: #fff;
  font-size: 0.9rem;
  border-radius: 4px;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.6s ease, visibility 0s linear 0.6s;
  pointer-events: none;
}

/* Overlay beim Hover sichtbar machen */
.vis-image-wrapper:hover .vis-image-name {
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}