/* Äußeres Element */

.logo-ticker {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  text-align: left !important;
}

/* Sichtfenster */

.logo-ticker__viewport {
  width: 100%;
  overflow: hidden;
}

/* Laufband */

.logo-ticker__track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  min-width: max-content;
  margin: 0 !important;
  padding: 0;
  transform: translateX(0);
  /* 150s is tuned for the two-group width at the time of writing (~35
     logos); a duration, not a speed, so the scroll gradually speeds up or
     slows down as logos are added or removed. Re-tune here if the pace
     drifts noticeably. */
  animation: logoTicker 150s linear infinite;
  justify-content: flex-start !important;
}

/* Gruppen */

.logo-ticker__group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2.25rem;
  padding: 0 1.5rem;
  flex: 0 0 auto;
  min-width: max-content;
  justify-content: flex-start !important;
}

/* Einzelnes Logo */

.logo-ticker__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: .25rem .5rem;
  border-radius: 1rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.logo-ticker__item img {
  height: 48px;
  width: auto;
  display: block;
  /*filter: grayscale(100%);*/
  opacity: 1;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.logo-ticker__item:hover img, .logo-ticker__item:focus img {
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
}

/* Pause */

.logo-ticker:hover .logo-ticker__track, .logo-ticker:focus-within .logo-ticker__track {
  animation-play-state: paused;
}

/* Fades */

.logo-ticker__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 2;
  pointer-events: none;
}

.logo-ticker__fade--left {
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}

.logo-ticker__fade--right {
  right: 0;
  background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
}

/* Animation */

/* The track holds two identical groups back to back (see index.njk), so
   scrolling by exactly half its width moves the first group fully out of
   view just as the second reaches the position it started in — a seamless
   loop that needs no hand-measured distance and keeps working as logos are
   added or removed. */
@keyframes logoTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-ticker__track {
    animation: none;
  }
}