/* Zentrierter Block */
.partners {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

.partners-title {
  margin: 0 0 1rem;
}

/* Viewport */
.partners-viewport {
  position: relative;
  max-width: 100%;
  width: min(100%, 1100px);
  margin: 0 auto;
  overflow: hidden;
}

/* Masken-Fade an den Seiten (modern) */
@supports (mask-image: linear-gradient(black, white)) or (-webkit-mask-image: linear-gradient(black, white)) {
  .partners-viewport {
    --fade: 40px;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--fade),
      black calc(100% - var(--fade)),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--fade),
      black calc(100% - var(--fade)),
      transparent 100%
    );
  }
}

/* Fallback: Pseudo-Elemente */
@supports not (mask-image: linear-gradient(black, white)) {
  .partners-viewport::before,
  .partners-viewport::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; width: 46px; pointer-events: none;
    z-index: 2;
  }
  .partners-viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--bg, #fff), rgba(255,255,255,0));
  }
  .partners-viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--bg, #fff), rgba(255,255,255,0));
  }
}

/* Track */
.partners-track {
  display: flex;
  align-items: center;
  /* engerer Abstand → mehr Logos gleichzeitig sichtbar */
  gap: clamp(10px, 1.8vw, 22px);
  will-change: transform;
  transform: translateX(0);
}

/* Zellen */
.partner-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bilder: grau, dezent, kompakt */
.partner-item img {
  height: clamp(26px, 4.2vw, 50px);
  width: auto;
  filter: grayscale(1) contrast(1.05) brightness(1);
  opacity: 0.9;
  transition: transform 200ms ease;
}
.partner-item img:hover {
  transform: scale(1.05);
}