/* ===== Logo Loop – endlos laufendes Logo-Band =====
   Vanilla-Port von react-bits "LogoLoop" für statisches HTML.
   Markup: .logo-loop > .logo-loop__track > .logo-loop__list > li > img
   Das Script assets/js/logo-loop.js klont die Liste, bis das Band
   doppelt so breit wie der Container ist, und setzt --logo-loop-distance.
*/

.logo-loop {
  position: relative;
  overflow: hidden;
  /* Weiche Kanten links/rechts */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--logo-loop-fade, 96px),
    #000 calc(100% - var(--logo-loop-fade, 96px)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--logo-loop-fade, 96px),
    #000 calc(100% - var(--logo-loop-fade, 96px)),
    transparent
  );
}

.logo-loop__track {
  display: flex;
  width: max-content;
  animation: logo-loop-scroll var(--logo-loop-duration, 32s) linear infinite;
}

.logo-loop__list {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--logo-loop-gap, 72px);
  padding: 0 calc(var(--logo-loop-gap, 72px) / 2);
  margin: 0;
  list-style: none;
}

.logo-loop__item {
  flex: none;
  display: flex;
  align-items: center;
}

.logo-loop__item img {
  height: var(--logo-loop-height, 100px);
  width: auto;
  max-width: none;
  object-fit: contain;
  /* Logos ruhig halten, beim Hover volle Farbe */
  opacity: 0.72;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-loop__item a:hover img,
.logo-loop__item img:hover {
  opacity: 1;
  transform: scale(1.06);
}

/* Beim Hover über das Band pausiert die Bewegung */
.logo-loop:hover .logo-loop__track {
  animation-play-state: paused;
}

@keyframes logo-loop-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--logo-loop-distance, 50%)), 0, 0); }
}

/* Barrierefreiheit: keine Animation, wenn der Nutzer das so eingestellt hat */
@media (prefers-reduced-motion: reduce) {
  .logo-loop__track { animation: none; }
  .logo-loop { overflow-x: auto; }
}

@media (max-width: 767px) {
  .logo-loop {
    --logo-loop-height: 64px;
    --logo-loop-gap: 40px;
    --logo-loop-fade: 48px;
  }
}