/* Fotoband — durchlaufende Bildkacheln, Pendant zum Logo-Laufband (.pg-laufband).
   Bewusst eigene Datei neben pages.css, damit paralleles Ueberschreiben
   von pages.css dieses Modul nicht mitnimmt. */

.fb-sec { overflow: hidden; }

.fb-kopf { max-width: 680px; margin-bottom: 26px; }

.fb-band { position: relative; overflow: hidden; padding: 6px 0; }

.fb-band::before,
.fb-band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

/* Die Maske muss den Seitengrund treffen, nicht Weiss — die Seite laeuft auf
   var(--wolke). Sonst liegt ein heller Schleier ueber den Randkacheln. */
.fb-band::before { left: 0;  background: linear-gradient(90deg, var(--wolke, #F2F9FD), rgba(242,249,253,0)); }
.fb-band::after  { right: 0; background: linear-gradient(270deg, var(--wolke, #F2F9FD), rgba(242,249,253,0)); }

.fb-spur {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: fb-rollen 64s linear infinite;
}

.fb-band:hover .fb-spur { animation-play-state: paused; }

@keyframes fb-rollen {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.fb-kachel {
  flex: none;
  width: 232px;
  height: 232px;
  border-radius: 18px;
  overflow: hidden;
  background: #eef4f9;
  box-shadow: 0 2px 4px rgba(6,58,92,.06), 0 14px 30px rgba(6,58,92,.10);
}

.fb-kachel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .fb-spur { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .fb-band::before, .fb-band::after { display: none; }
}

@media (max-width: 760px) {
  .fb-kachel { width: 168px; height: 168px; border-radius: 14px; }
  .fb-spur { gap: 12px; }
  .fb-band::before, .fb-band::after { width: 48px; }
}