/* Partner: festes Logoraster statt Karussell, passend zum Kabel-Hero */
.pg {
  --pg-ink: #151515;
  --pg-ink-2: #55585e;
  --pg-red: var(--thm-primary, #b70f1e);
  --pg-ground: #fcfcfc;
  --pg-line: rgb(21 21 21 / 0.1);
  --pg-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  padding: 112px 0 120px;
  background: var(--pg-ground);
  border-top: 1px solid var(--pg-line);
}

.pg__head { max-width: 640px; margin-bottom: 52px; }
.pg__title {
  margin: 0; color: var(--pg-ink);
  font-family: var(--thm-font); font-weight: 800;
  font-size: clamp(30px, 3.3vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
}
.pg__title em { font-style: normal; color: var(--pg-red); }
.pg__sub { margin: 18px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.65; color: var(--pg-ink-2); }

/* Haarlinien nur zwischen den Zellen: Lücke zeigt den Linienton */
.pg__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  margin: 0; padding: 0; list-style: none;
  background: var(--pg-line); border: 1px solid var(--pg-line);
}
.pg__cell {
  position: relative; display: grid; place-items: center;
  min-height: 150px; padding: 28px 20px;
  background: var(--pg-ground);
  transition: background-color 300ms ease;
}
.pg__cell::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--pg-red); transform: scaleX(0); transform-origin: left;
  transition: transform 450ms var(--pg-out);
}
.pg__cell img {
  /* Breite relativ zur Zelle, damit das optische Gleichgewicht der Logos bei jeder Breite bleibt */
  display: block; width: min(calc(var(--w) * 1px), calc(var(--w) * 100% / 205)); height: auto;
  transition: filter 400ms ease, opacity 400ms ease, transform 500ms var(--pg-out);
}

/* Maus: Logos ruhig in Grau, beim Überfahren in Farbe. Touch: immer farbig */
@media (hover: hover) and (pointer: fine) {
  .pg__cell img { filter: grayscale(1) brightness(0.78); opacity: 0.7; }
  .pg__cell:hover { background: #fff; }
  .pg__cell:hover::after { transform: scaleX(1); }
  .pg__cell:hover img { filter: none; opacity: 1; transform: scale(1.04); }
}

/* Einmaliges, gestaffeltes Einblenden beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  .hk-js .pg__grid:not(.is-in) .pg__cell img { opacity: 0; transform: translateY(14px); }
  .hk-js .pg__grid.is-in .pg__cell img {
    transition: filter 400ms ease, opacity 700ms ease calc(var(--i) * 60ms), transform 800ms var(--pg-out) calc(var(--i) * 60ms);
  }
  .hk-js .pg__grid.is-in .pg__cell:hover img { transition-delay: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  .pg__cell img, .pg__cell::after { transition: none; }
  .pg__cell:hover img { transform: none; }
}

@media (max-width: 991.98px) {
  .pg { padding: 88px 0 96px; }
  .pg__cell { min-height: 124px; }
}
@media (max-width: 767.98px) {
  .pg { padding: 72px 0 80px; }
  .pg__head { margin-bottom: 36px; }
  .pg__sub { font-size: 16px; }
  .pg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg__cell { min-height: 108px; padding: 22px 14px; }
}