/* Partnerbereich: nur die Logos, weiss und ohne Hintergrund, alle gleich behandelt. */
.references-partners {
  padding-block: clamp(56px, 7vw, 90px);
}
.references-section-head {
  margin-bottom: clamp(34px, 4.4vw, 54px);
}
.references-logos-list {
  --logo-size: clamp(54px, 5.4vw, 68px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px clamp(24px, 3.4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.references-logos-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--logo-size) * 1.1);
}
.references-logos-list a {
  display: block;
}
.references-logos-list a:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 8px;
}
.references-logos-list img {
  display: block;
  width: auto;
  height: calc(var(--logo-size) * var(--logo-scale, 1));
  opacity: 0.66;
  transition: opacity 0.25s var(--ease);
}
.references-logos-list li:hover img,
.references-logos-list a:focus-visible img {
  opacity: 1;
}
/* Ab zehn Logos: zwei gleichmässige Fünferreihen, links und rechts bündig mit dem Seitenraster. */
@media (min-width: 901px) {
  .references-logos-list {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-items: center;
    row-gap: clamp(40px, 4vw, 56px);
  }
  .references-logos-list li:nth-child(5n + 1) {
    justify-self: start;
  }
  .references-logos-list li:nth-child(5n) {
    justify-self: end;
  }
}
@media (max-width: 900px) {
  .references-logos-list {
    --logo-size: 54px;
    justify-content: center;
    gap: 34px 0;
  }
  .references-logos-list li {
    flex: 0 0 25%;
  }
}
@media (max-width: 600px) {
  .references-logos-list {
    --logo-size: 50px;
  }
  .references-logos-list li {
    flex: 0 0 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .references-logos-list img {
    transition: none;
  }
}