/* =====================================================================
   Kundenlogos als Laufband - gilt fuer alle Landingpages.

   Jede Seite mit <div class="logo-bar"> bindet diese Datei und
   logo-laufband.js nach ihren eigenen Stilen ein. Das Skript legt die
   Logos in eine Spur, haengt eine Kopie an und startet die Bewegung.

   Kadirs Vorgabe (05.11.2026): Logos weiter auseinander, langsam laufen
   lassen, auf allen Landingpages gleich.
   ===================================================================== */

/* Ohne Skript oder bei reduzierter Bewegung: stehende Reihe, aber mit
   dem groesseren Abstand. Bricht bei Bedarf in eine zweite Zeile um. */
.logo-bar {
  column-gap: clamp(2.5rem, 4.5vw, 5.5rem);
  row-gap: 1.5rem;
}

/* Laufband: Die Spur enthaelt die Logos zweimal hintereinander und
   wandert um genau eine Haelfte nach links - dann steht sie wieder wie
   am Anfang, und die Schleife hat keinen Ruck. Der Abstand sitzt deshalb
   als Rand rechts an jedem Logo, nicht als gap: So ist jede Haelfte
   inklusive ihres letzten Abstands gleich breit. */
.logo-bar.logo-bar--laeuft {
  display: block;
  overflow: hidden;
  padding: 0.5rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-bar__spur {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-laufband var(--logo-laufband-dauer, 70s) linear infinite;
}
.logo-bar__spur > * {
  margin-right: clamp(3.5rem, 6.5vw, 7rem);
}
.logo-bar--laeuft:hover .logo-bar__spur,
.logo-bar--laeuft:focus-within .logo-bar__spur {
  animation-play-state: paused;
}
@keyframes logo-laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-bar__spur { animation: none; }
}