/* ============================================================
   Kundenbewertungen
   Echte Bewertungen aus data/reviews.json - bewusst ohne Sterne,
   weil aus dem alten Shop nur die Texte vorliegen.
   ============================================================ */

.reviews__note {
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ------------------------------------------- Laufband
   Zwei identische Spuren laufen nebeneinander nach links. Nach genau
   der halben Strecke steht die Kopie dort, wo das Original begann -
   der Rücksprung ist deshalb unsichtbar und der Lauf wirkt endlos. */
.review-ticker {
  margin-top: var(--space-lg);
  overflow: hidden;
  /* Ränder weich auslaufen lassen, damit die Karten nicht abgeschnitten
     wirken, sondern aus dem Bild wandern. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.review-ticker__track {
  display: flex;
  width: max-content;
  animation: review-scroll 80s linear infinite;
}

/* Anhalten, solange jemand liest oder mit der Tastatur darin ist. */
.review-ticker:hover .review-ticker__track,
.review-ticker:focus-within .review-ticker__track {
  animation-play-state: paused;
}

.review-ticker__row {
  display: flex;
  gap: var(--space-sm);
  padding-right: var(--space-sm);
}

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

/* Ohne Bewegung: Die Karten bleiben stehen und lassen sich von Hand
   scrollen - der Inhalt bleibt so vollständig erreichbar. */
@media (prefers-reduced-motion: reduce) {
  .review-ticker {
    overflow-x: auto;
  }
  .review-ticker__track {
    animation: none;
  }
  .review-ticker__row:last-child {
    display: none;
  }
}

.review-card {
  /* Feste Breite: In einer Flex-Zeile ohne Grundbreite würden die
     Karten je nach Textlänge unterschiedlich breit und das Laufband
     wirkte unruhig. */
  flex: 0 0 300px;
  width: 300px;
  margin: 0;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.review-card__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-text);
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}

.review-card__flag {
  font-size: 0.95rem;
  line-height: 1;
}

/* ------------------------------------------- Karten mit Kundenfoto */
/* Karten mit Kundenfoto bekommen mehr Breite, damit das Bild wirkt. */
.review-card--photo {
  flex: 0 0 360px;
  width: 360px;
}

/* Feste Fotohöhe: Die Kundenfotos kommen in unterschiedlichen
   Formaten. Ohne Begrenzung zieht ein Hochformat-Bild die gesamte
   Laufband-Zeile auf seine Höhe - gemessen 721px statt der nötigen
   ~340. object-fit schneidet mittig zu, statt zu verzerren. */
.review-card__photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
  display: block;
  background: var(--color-bg-alt);
}

@media (max-width: 560px) {
  .review-card,
  .review-card--photo {
    flex-basis: 268px;
    width: 268px;
  }
}