/* ============================================================
   Google Reviews — Panel auf der Startseite
   ============================================================ */

.reviews__inner {
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.reviews__head {
  max-width: 46ch;
}

/* ---- Schnitt / Aggregat -------------------------------------------------- */
.reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.reviews__summary[hidden] { display: none; }

.rv-summary__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent);
}
.rv-summary__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rv-summary__count {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
}

/* ---- Sterne (Outline + clip-Füllung) ------------------------------------ */
.stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
}
.stars__empty .star { fill: var(--color-line); }
.stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
}
.stars__fill .star { fill: var(--color-accent); }

/* ---- Stream / Laufband --------------------------------------------------- */
.reviews__stream {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Bewertungen tauchen an den Rändern weich auf/ab */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.reviews__stream[hidden] { display: none; }

.reviews__track {
  display: flex;
  width: max-content;
  animation: rv-marquee var(--rv-dur, 40s) linear infinite;
}
.reviews__set {
  display: flex;
  gap: var(--space-6);
  padding-right: var(--space-6); /* Abstand zwischen Original und Duplikat */
}
/* Pause beim Drüberfahren oder Tastatur-Fokus → in Ruhe lesen */
.reviews__stream:hover .reviews__track,
.reviews__track:focus-within { animation-play-state: paused; }

@keyframes rv-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rv-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 0 0 clamp(260px, 78vw, 340px);
  margin: 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.rv-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rv-card__avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}
.rv-card__who {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.rv-card__name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-card__text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-dim);
  /* 5 Zeilen, danach ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-card__when {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}

/* ---- CTA ----------------------------------------------------------------- */
.reviews__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ---- Reduced motion: kein Laufband, stattdessen manuell scrollbar -------- */
@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none; }
  .reviews__set:nth-child(2) { display: none; } /* Duplikat raus */
  .reviews__stream {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .rv-card { scroll-snap-align: start; }
}

@media (max-width: 600px) {
  .reviews__summary { gap: var(--space-4); }
}