/* ==========================================================================
   Google-Bewertungen — Sprunglink im Hero und Bewertungsband der Startseite
   (partials/reviews-badge.php, partials/reviews.php).
   Nur auf Seiten mit $page_reviews geladen; nutzt Tokens aus @theme.
   ========================================================================== */

/* ---- Sterne --------------------------------------------------------------- */
/* Gefüllte Sterne erreichen mindestens 3:1 gegen ihren Hintergrund
   (accent-600 auf Weiß 3,0:1, accent-400 auf primary-900 6,0:1). */
.stars {
  display: block;
  flex: none;
  width: 5.5rem;
  height: 1.1rem;
}
.stars-empty { fill: var(--stars-empty); }
.stars-fill  { fill: var(--stars-fill); }
.stars-on-light {
  --stars-fill: var(--color-accent-600);
  --stars-empty: var(--color-neutral-300);
}
.stars-on-dark {
  --stars-fill: var(--color-accent-400);
  --stars-empty: color-mix(in oklch, #fff 22%, transparent);
}

/* ---- Sprunglink im Hero --------------------------------------------------- */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: 0.92rem;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: 0 12px 28px -22px color-mix(in oklch, var(--color-primary-900) 60%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rating-badge:hover {
  border-color: var(--color-primary-300);
  box-shadow: 0 16px 32px -22px color-mix(in oklch, var(--color-primary-900) 70%, transparent);
}
.rating-badge strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-neutral-900);
}
.rating-badge .stars { width: 5rem; height: 1rem; }
@media (max-width: 420px) {
  .rating-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    border-radius: 1rem;
  }
}

/* ---- Bewertungsband ------------------------------------------------------- */
/* Nur Durchschnitt und Anzahl: Einordnung links, Note rechts als Blickfang. */
.reviews-layout {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
}
@media (min-width: 960px) {
  .reviews-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
  }
  .reviews-summary {
    padding-left: clamp(2rem, 1rem + 3vw, 3.5rem);
    border-left: 1px solid color-mix(in oklch, #fff 18%, transparent);
  }
}

.reviews-title { margin: 0.6rem 0 0; }

.reviews-score {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.reviews-score-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(3.25rem, 2.6rem + 2.4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
}
.reviews-score-meta { display: grid; gap: 0.45rem; }
.reviews-score .stars { width: 7.5rem; height: 1.5rem; }
.reviews-score-count {
  font-size: 0.98rem;
  color: color-mix(in oklch, #fff 86%, var(--color-primary-200));
}

.reviews-note {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: 0.98rem;
  color: color-mix(in oklch, #fff 80%, var(--color-primary-200));
}
.reviews-all { margin-top: 1.75rem; }
.reviews-source {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: color-mix(in oklch, #fff 72%, var(--color-primary-300));
}
/* Text-Attribution nach den Vorgaben der Google Maps Platform. */
.reviews-attribution {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 500;
  color: #fff;
}