/* ============================================================================
   Google-Gesamtbewertung (partials/google-rating.php) — Standard für dunkle
   Flächen (Abschluss-CTA), --light für helle (Zahlen & Fakten).
   Geladen nach components.css.
   ========================================================================== */
@layer components {

.g-rating {
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1.1rem 0.7rem 0.95rem;
  border-radius: var(--radius-brand);
  background: color-mix(in oklch, #fff 7%, transparent);
  border: 1px solid color-mix(in oklch, #fff 16%, transparent);
  text-align: left;
}
.g-rating__value {
  font-family: var(--font-display);
  font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  color: #fff;
  padding-right: 0.85rem;
  border-right: 1px solid color-mix(in oklch, #fff 18%, transparent);
}
.g-rating__body { display: flex; flex-direction: column; gap: 0.3rem; }
.g-rating__stars { display: inline-flex; gap: 0.15rem; }
.g-rating__stars svg { display: block; width: 1.1rem; height: 1.1rem; }
.g-rating__star-off { fill: color-mix(in oklch, #fff 22%, transparent); }
.g-rating__star-on  { fill: oklch(0.84 0.165 84); }
.g-rating__meta { font-size: 0.85rem; line-height: 1.35; color: var(--color-ink-200); }
.g-rating__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.g-rating--light {
  background: #fff;
  border-color: var(--color-ink-200);
}
.g-rating--light .g-rating__value { color: var(--color-ink-900); border-right-color: var(--color-ink-200); }
.g-rating--light .g-rating__star-off { fill: var(--color-ink-200); }
.g-rating--light .g-rating__star-on  { fill: oklch(0.79 0.165 76); }
.g-rating--light .g-rating__meta { color: var(--color-ink-600); }

}