/* Referenzen Logo Marquee */
.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-body, #ffffff);
  padding: 10px 0;
}
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}
.logo-track {
  display: flex;
  width: max-content;
  animation: scroll-left 30s linear infinite;
  z-index: 3;
  height: 3.125rem;
}
.logo-track img {
  height: 50px;
  margin-right: 80px;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%) opacity(0.4);
}
.logo-track img:hover {
  transform: scale(1.1);
  filter: grayscale(0%) opacity(1);
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Fading Effekt */
.fading {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 800px;
  width: 80px;
  z-index: 20;
  pointer-events: none;
}

.fading.left {
  left: 0;
  background: linear-gradient(to right, var(--bg-body, #ffffff) 0%, transparent 100%);
}

.fading.right {
  right: 0;
  background: linear-gradient(to left, var(--bg-body, #ffffff) 0%, transparent 100%);
}