/* ================================================
   SIPO Testimonials — geteiltes Sprechblasen-Slideband für
   Startseite, Startups, Unternehmen, Mieter
   ================================================ */

#sipo-hp .sipo-testimonials {
  padding: 72px 0;
  background: var(--si-paper);
  overflow: hidden;
}
#sipo-hp .sipo-testimonials__head {
  text-align: left;
  margin-bottom: 40px;
}
#sipo-hp .sipo-testimonials__head h2 {
  font-size: 48px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--si-ink);
  margin: 0;
  text-transform: uppercase;
}

/* ── Scrollable band: native horizontal scroll (touch/drag/wheel all work out
   of the box) + scroll-snap, nudged forward periodically by JS via scrollTo().
   Never fights the user's own scroll input. ── */
#sipo-hp .sipo-testimonials__band {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -24px;
  padding: 4px 24px 8px;
}
#sipo-hp .sipo-testimonials__band::-webkit-scrollbar { display: none; }
#sipo-hp .sipo-testimonials__track {
  display: flex;
  gap: 24px;
}

/* Three visible at once on desktop, fewer on smaller screens */
#sipo-hp .sipo-testimonial-bubble {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 260px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
@media (max-width: 980px) {
  #sipo-hp .sipo-testimonial-bubble { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  #sipo-hp .sipo-testimonial-bubble { flex: 0 0 85%; }
}

/* ── Speech bubble ── */
#sipo-hp .sipo-testimonial-bubble__balloon {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 16px 32px -18px rgba(26, 26, 26, 0.18);
}
#sipo-hp .sipo-testimonial-bubble__quote {
  font-size: 16px;
  line-height: 1.55;
  /* Fixed dark color, not var(--si-ink): the balloon is always white,
     even on pages (e.g. Startups) that redefine --si-ink to near-white
     for their dark theme. */
  color: #1a1a1a;
  margin: 0;
}
#sipo-hp .sipo-testimonial-bubble__tail {
  position: absolute;
  left: 40px;
  bottom: -14px;
  width: 28px;
  height: 14px;
  overflow: hidden;
}
#sipo-hp .sipo-testimonial-bubble__tail::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: 0 16px 32px -18px rgba(26, 26, 26, 0.18);
}

/* ── Person row, below the bubble+tail ── */
#sipo-hp .sipo-testimonial-bubble__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-left: 30px;
}
#sipo-hp .sipo-testimonial-bubble__photo,
#sipo-hp .sipo-testimonial-bubble__initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
#sipo-hp .sipo-testimonial-bubble__photo {
  object-fit: cover;
}
#sipo-hp .sipo-testimonial-bubble__initials {
  /* Fixed colors, not var(--si-ink)/--si-muted: this is always a dark
     badge with light letters, regardless of the page's own theme. */
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
#sipo-hp .sipo-testimonial-bubble__person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#sipo-hp .sipo-testimonial-bubble__name {
  font-weight: 700;
  color: var(--si-ink);
  font-size: 14px;
}
#sipo-hp .sipo-testimonial-bubble__role {
  font-size: 12px;
  color: var(--si-muted);
}

@media (max-width: 700px) {
  #sipo-hp .sipo-testimonials__head h2 { font-size: 32px; }
}