/* Grundlayout */
.pf-customer-images{
    background-color: var(--lightRose);
    padding: 3rem 3rem;
    margin: 2rem 0;
    color: var(--testimonialTextColor);
}

.pf-customer-images__slider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 640px) {
  .pf-customer-images {
    padding: 2.5rem .5rem 3rem;
  }

  .pf-customer-images__slider {
    gap: 0.5rem;
  }

  .pf-customer-images-card {
    flex: 0 0 85%;          /* auf Handy eine Karte + Kante der nächsten */
    padding: 4.5rem 1.7rem 2rem;
  }

  .pf-customer-images-card__text {
    font-size: 0.9rem;
  }

  .pf-customer-images__track {
      display: flex;
      gap: 2rem;
      padding: 5rem 0 1rem 0;
    }

  .pf-customer-images-card {
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.16);
    }
}

.customer-img {
    height: 450px;
    width: auto;
    object-fit: contain;
}


.customer-img-wrapper {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    line-height: 0;
}

.customer-img {
    display: block;
    height: 450px;
    object-fit: contain;
}

/* Banner */
.customer-img-banner {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 45px;
    padding: 0 1rem;

    background: rgba(255, 255, 255, 0.9);
    color: #111;

    display: flex;
    align-items: center;

    text-decoration: none;

    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-sizing: border-box;
}

/* Zeige Banner beim Hover */
.customer-img-wrapper:hover .customer-img-banner {
    opacity: 1;
    transform: translateY(0);
}

/* Linke Gruppe (Avatar + Name) */
.customer-img-banner__left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Runder Platzhalter-Kreis (= Instagram Avatar-Style) */
.customer-img-banner__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;

    background: radial-gradient(circle at 30% 30%, #d9d9d9, #bcbcbc);
    /* Du kannst später ein echtes Profilbild einsetzen */
}

.customer-img-banner__name {
    font-size: 1rem;
    font-family: OpenSansRegular, serif;
    color: #111;
}

.customer-img-banner__avatar-real {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}