/* ============================================================
   Logoband

   Masse aus Prototyp.dc.html Zeile 2350-2373.

   Zwei gleiche Spuren laufen nebeneinander nach rechts. Sobald die erste
   ganz durch ist, steht die zweite genau dort, wo die erste angefangen
   hat — die Naht faellt nicht auf, weil an beiden Stellen dasselbe zu
   sehen ist. Dieselbe Ueberlegung wie beim endlosen Team-Slider, nur ohne
   JavaScript: Hier greift niemand ein, also genuegt eine Animation.
   ============================================================ */

.ps-logoband {
  --ps-logoband-gap: var(--space-9);

  position: relative;
  display: flex;
  overflow: hidden;
  margin-block: 0;

  /* Die Raender laufen aus, statt hart abgeschnitten zu werden. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.ps-logoband--abstand-eng  { --ps-logoband-gap: var(--space-7); }
.ps-logoband--abstand-weit { --ps-logoband-gap: var(--space-10); }

.ps-logoband__spur {
  display: flex;
  align-items: center;
  gap: var(--ps-logoband-gap);
  padding-right: var(--ps-logoband-gap);
  flex: none;
  animation: ps-logoband var(--ps-logoband-tempo, 46s) linear infinite;
}

@keyframes ps-logoband {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ---------- Wenn nichts laufen soll ----------

   Zwei Wege fuehren hierher: der Schalter in der Seitenleiste und die
   Systemeinstellung "Bewegung reduzieren". In beiden Faellen wird aus dem
   Band eine umbrechende Reihe.

   Der Prototyp haelt an dieser Stelle nur die Animation an. Dann steht die
   zweite Spur unsichtbar daneben und ein Teil der Logos liegt ausserhalb
   des Bildes — sichtbar ist, was zufaellig hineinpasst.
*/

.ps-logoband--steht {
  display: block;
  overflow: visible;
  mask-image: none;
}

.ps-logoband--steht .ps-logoband__spur {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-6);
  padding-right: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ps-logoband {
    display: block;
    overflow: visible;
    mask-image: none;
  }

  .ps-logoband__spur {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-6);
    padding-right: 0;
    animation: none;
  }

  .ps-logoband__spur--kopie { display: none; }
}

/* ---------- Schmale Breiten ----------

   Sechs Zentimeter Abstand sind auf einem Telefon zwei Logos je
   Bildschirmbreite. Enger gestellt kommen mehr vorbei, ohne dass es
   gedraengt wirkt.
*/

@media (max-width: 600px) {
  .ps-logoband { --ps-logoband-gap: var(--space-7); }
}

/* ---------- Im Editor ----------

   Dort steht das Band still: Ein laufendes Band, in dem man ein Logo
   anklicken soll, waere eine Zumutung. Die Kopie gibt es im Editor
   ohnehin nicht — sie entsteht erst beim Ausgeben.
*/

.editor-styles-wrapper .ps-logoband {
  display: block;
  overflow: visible;
  mask-image: none;
}

.editor-styles-wrapper .ps-logoband__spur {
  flex-wrap: wrap;
  row-gap: var(--space-6);
  padding-right: 0;
  animation: none;
}