/* ============================================================
   BEWERTUNGEN – endloser Slider (Stil „Infinite Slider“ von 21st.dev)
   Zwei Reihen laufen gegeneinander, bei Hover langsamer. Daten: js/reviews.js
   ============================================================ */
.voices{ padding: 110px 0 40px; overflow-x: clip; }
.voices[hidden]{ display: none; }
.voices .section-head{ margin-bottom: 18px; padding: 0 24px; }
.voices__score{ display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--ink-dim); font-size: .95rem; }
.voices__score b{ color: var(--ink); font-size: 1.15rem; }
.stars{ display: inline-flex; gap: 2px; color: #e0b44c; }
.stars svg{ width: 16px; height: 16px; }
.stars .is-off{ color: var(--border-strong); }

.marquee{
  position: relative; margin-top: 18px; overflow: hidden;
  /* weiche Ränder links/rechts */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display: flex; gap: 18px; width: max-content; padding: 6px 0;
  animation: marquee var(--dur, 60s) linear infinite;
}
.marquee--reverse .marquee__track{ animation-direction: reverse; }
/* -50 % = genau eine Kopie weiter (plus halber Abstand), dann beginnt es nahtlos von vorn */
@keyframes marquee{ to{ transform: translateX(calc(-50% - 9px)); } }

.voice{
  flex: 0 0 auto; width: 320px; display: grid; gap: 12px; align-content: start; margin: 0;
  padding: 20px 22px; border-radius: var(--radius-m);
}
.voice__text{
  margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.voice__who{ display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--ink-dim); line-height: 1.35; }
.voice__who b{ color: var(--ink); font-weight: 600; }

@media (max-width: 640px){
  .voice{ width: 270px; padding: 18px; }
}
/* Ohne Bewegung: Reihen einfach seitlich wischbar statt Laufband */
@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track{ animation: none; padding: 6px 24px; }
}