/* Laufband: Bilderlauf and Logoleiste. A track of rounds that moves by
   one round width; the script sets the distance and duration in pixels,
   without script the two server rounds move by half the track. */

/* Fallback values: photos */
.elementor-widget-webe-bilderlauf{
  --wlb-hoehe: 485px;
  --wlb-breite: 400px;
  --wlb-abstand: 20px;
  --wlb-radius: 25px;
  --wlb-eintrag-w: var(--wlb-breite);
  --wlb-eintrag-max: none;
  --wlb-img-w: 100%;
  --wlb-fit: cover;
  --wlb-filter-0: none;
  --wlb-filter-1: none;
  --wlb-o-0: 1;
  --wlb-o-1: 1;
  --wlb-kante: 80px;
  --wlb-maske: none;
  --wlb-weg: -50%;
  --wlb-dauer: 60s;
}

/* Fallback values: logos */
.elementor-widget-webe-logoleiste{
  --wlb-hoehe: 40px;
  --wlb-breite: 180px;
  --wlb-abstand: 64px;
  --wlb-radius: 0px;
  --wlb-eintrag-w: auto;
  --wlb-eintrag-max: var(--wlb-breite);
  --wlb-img-w: auto;
  --wlb-fit: contain;
  --wlb-filter-0: grayscale(1);
  --wlb-filter-1: none;
  --wlb-o-0: .55;
  --wlb-o-1: 1;
  --wlb-kante: 80px;
  --wlb-maske: none;
  --wlb-weg: -50%;
  --wlb-dauer: 60s;
}

.wlb{
  overflow: hidden;
  -webkit-mask-image: var(--wlb-maske);
  mask-image: var(--wlb-maske);
}
.wlb__spur{
  display: flex;
  width: max-content;
  will-change: transform;
}
.wlb .wlb__runde{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--wlb-abstand);
  margin: 0;
  padding: 0 var(--wlb-abstand) 0 0;
  list-style: none;
}

/* Items */
.wlb .wlb__eintrag{
  flex: 0 0 auto;
  width: var(--wlb-eintrag-w);
  max-width: var(--wlb-eintrag-max);
  height: var(--wlb-hoehe);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--wlb-radius);
  line-height: 0;
}
.wlb .wlb__eintrag::before{ content: none; }
.wlb .wlb__eintrag > a{
  display: block;
  height: 100%;
}
.wlb .wlb__eintrag img{
  display: block;
  width: var(--wlb-img-w);
  max-width: var(--wlb-eintrag-max);
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: var(--wlb-fit);
  filter: var(--wlb-filter-0);
  opacity: var(--wlb-o-0);
  transition: filter .2s ease, opacity .2s ease;
}
.wlb .wlb__eintrag:hover img,
.wlb .wlb__eintrag:focus-within img{
  filter: var(--wlb-filter-1);
  opacity: var(--wlb-o-1);
}
.wlb .wlb__link:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }

/* Runs by itself */
.wlb--zeit .wlb__spur{ animation: wlb-lauf var(--wlb-dauer) linear infinite; }
.wlb--zeit.wlb--rechts .wlb__spur{ animation-direction: reverse; }
.wlb--pause:hover .wlb__spur,
.wlb--pause:focus-within .wlb__spur{ animation-play-state: paused; }
@keyframes wlb-lauf{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(var(--wlb-weg), 0, 0); }
}

/* Swipe, also with reduced motion */
.wlb--stehend{
  overflow-x: auto;
  scrollbar-width: thin;
}
.wlb--stehend .wlb__runde[aria-hidden="true"]{ display: none; }

@media (prefers-reduced-motion: reduce){
  .wlb{ overflow-x: auto; scrollbar-width: thin; }
  .wlb .wlb__spur{ animation: none; transform: none !important; }
  .wlb .wlb__runde[aria-hidden="true"]{ display: none; }
  .wlb .wlb__eintrag img{ transition: none; }
}
