/* Scoped to the homepage portfolio and references page. */
.clients__grid--selected { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.clients__grid--selected .client-logo { min-width: 0; min-height: 180px; }
.client-logo__brand { display: flex; align-items: center; justify-content: center; width: 190px; max-width: 100%; height: 100px; padding: 12px; border-radius: 8px; background: #fff; }
.client-logo__brand img { max-width: 100%; max-height: 100%; opacity: 1; }
.referenz-card__image--brand { display: flex; justify-content: center; align-items: center; padding: 2.5rem; background: #fff; }
.referenz-card__image--brand img { width: 100%; height: 100%; object-fit: contain; }
.referenz-card__case-link { display: flex; width: fit-content; margin-top: 1rem; }
.references-more { margin-top: 2rem; }
.references-more__toggle { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; list-style: none; cursor: pointer; text-align: center; }
.references-more__toggle::-webkit-details-marker { display: none; }
.references-more__toggle:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 5px; }
.references-more__opened, .references-more[open] .references-more__closed { display: none; }
.references-more[open] .references-more__opened { display: inline; }
.references-more__icon { font-size: 1.5rem; line-height: 1; transition: transform .3s ease; }
.references-more[open] .references-more__icon { transform: rotate(45deg); }
.references-more__panel > div { padding-top: 2rem; }
.references-more__panel .client-logo { min-height: 180px; }
.references-more__panel .client-logo, .references-more__panel .referenz-card { opacity: 1; visibility: visible; }
@media (max-width: 900px) { .clients__grid--selected { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .clients__grid--selected .client-logo, .references-more__panel .client-logo { min-height: 150px; padding: 1rem .65rem; }
  .client-logo__brand { height: 72px; width: 150px; padding: 10px; }
  .client-logo__brand img { max-width: 100%; max-height: 100%; }
  .references-more__toggle { padding: 1rem; font-size: .7rem; gap: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .references-more__icon { transition: none; } }