/* ==========================================================================
   R2GO4-Reviews – Kundenstimmen (Hintergrundbild, Slider- oder Quote-Modus).
   Quote-Modus: <figure.reviews-quote-card> mit <blockquote> + <figcaption>.
   ========================================================================== */

.section--reviews {
  position: relative;
  background: center / cover no-repeat fixed;
  color: var(--color-white);
  text-align: center;
  padding-block: var(--space-3xl);
}

.reviews__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.reviews__content {
  position: relative;
  z-index: 1;
  max-width: 62.5rem;
  margin-inline: auto;
}

.reviews-stars {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: var(--space-lg);
}

.reviews-star {
  font-size: 1.8rem;
  color: #f5c518;
}

/* ── Quote-Modus: statische Quote-Kacheln ($reviewsMode='quotes') ──────── */

.reviews-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
}

.reviews-quote-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  text-align: left;
}

.reviews-quote-card blockquote {
  margin: 0 0 var(--space-sm) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-white);
}

.reviews-quote-card blockquote p {
  margin: 0;
}

.reviews-quote-card figcaption {
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 600;
}

.reviews-hint {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-lg);
  line-height: 1.7;
}

/* ── Slider-Modus: Package-Slider auf dunklem Hintergrund ─────────────── */

.section--reviews:has(.reviews__slider) .reviews__content {
  max-width: var(--content-width);
  overflow: visible;
}

.reviews__slider {
  margin: var(--space-md) 0 var(--space-lg);
}

.reviews__slider .r2g-slider {
  max-width: 100%;
}

.reviews__slider .wprxxl-review-card {
  background: var(--color-white);
  text-align: left;
}

@media (max-width: 767px) {
  .section--reviews {
    padding-block: var(--space-2xl);
  }
}

/* ── Helle Variante (\$reviewsHell) ────────────────────────────────────────
   Ohne Hintergrundbild und ohne Abdunklung. Gedacht fuer Startseiten, auf
   denen direkt davor schon die quality-Section mit Bild und weisser Schrift
   steht: zwei dunkle Flaechen hintereinander wirken wie ein Fehler.
   Die Kacheln bekommen hier einen weissen Grund mit feiner Linie statt der
   halbtransparenten Weissflaeche, die nur auf dunklem Bild funktioniert. */

.section--reviews--hell {
  background: none;
  color: inherit;
}

.section--reviews--hell .reviews-quote-card {
  background: var(--color-white);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
}

.section--reviews--hell .reviews-quote-card blockquote,
.section--reviews--hell .reviews-quote-card blockquote p,
.section--reviews--hell .reviews-quote-card figcaption,
.section--reviews--hell .reviews-hint,
.section--reviews--hell .section__label,
.section--reviews--hell h1,
.section--reviews--hell h2 {
  color: inherit;
}

.section--reviews--hell .reviews-hint {
  opacity: 0.7;
}