@keyframes karussell-slide {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

.karussell-logos{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 10px 0;
  background: #fff;
  white-space: nowrap;
}

.karussell-logos:before,
.karussell-logos:after{
  content:"";
  position:absolute;
  top:0;
  width: 60px;
  height:100%;
  z-index: 2;
  pointer-events: none;
}

.karussell-logos:before{
  left:0;
  background: linear-gradient(to left, rgba(255,255,255,0), #fff);
}
.karussell-logos:after{
  right:0;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
}

.karussell-logos .karussell-track{
  display: flex;
  align-items: center;
  will-change: transform;
  animation: karussell-slide 35s linear infinite;
}

.karussell-logos:hover .karussell-track{
  animation-play-state: paused;
}

.karussell-logos .karussell-slide{
  display: flex;
  align-items: center;
  height: 100%;
}

/* wichtig gegen Theme-Regeln (Enfold macht imgs gern responsive) */
.karussell-logos img{
  height: 60px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 40px !important;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

@media (max-width: 768px){
  .karussell-logos img{
    height: 42px !important;
    margin: 0 22px !important;
  }
  .karussell-logos:before,
  .karussell-logos:after{
    width: 90px;
  }
}

/* Entfernt alle typischen unteren Abstände rund um den Block */
.karussell-wrapper,
.karussell-wrapper * {
  margin-bottom: 0 !important;
}

.karussell-wrapper {
  padding-bottom: 0 !important;
  line-height: 0; /* verhindert Baseline/Zeilenrest */
}

/* Karussell selbst normal anzeigen lassen */
.karussell-wrapper .karussell-logos {
  line-height: normal;
  margin: 0 !important;
}