/* ============================================================================
   Google-Bewertung als Vertrauenselement (partials/google-rating.php): Note,
   Sterne und Anzahl in einem ruhigen Kasten. Er steht nur auf dunklem Grund —
   im Kopfband der Startseite und im Fuß der Inhaltsseiten — und bringt deshalb
   eine eigene, leicht abgesetzte Fläche mit, die den Kontrast auch über dem
   Kopfbild hält.
   ========================================================================= */

.g-rating {
  display: grid;
  gap: .4rem;
  max-width: 33rem;
  padding: .85rem 1.1rem .9rem;
  border: 1px solid color-mix(in oklch, var(--color-accent-300) 32%, transparent);
  border-radius: .9rem;
  background: color-mix(in oklch, var(--color-primary-950) 82%, transparent);
  color: var(--color-primary-100);
}

.g-rating p {
  margin: 0;
}

.g-rating-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
}

.g-rating-value {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.g-rating-stars {
  display: block;
  width: 6.25rem;
  height: 1.25rem;
  flex: none;
}

.g-rating-stars-empty {
  fill: color-mix(in oklch, #fff 24%, transparent);
}

.g-rating-stars-full {
  fill: var(--color-accent-400);
}

.g-rating-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.g-rating-meta {
  font-size: .92rem;
  line-height: 1.5;
}

.g-rating-stand {
  white-space: nowrap;
  color: var(--color-primary-200);
}

/* Startseite: zwischen Kennzahlen und den drei Schritten. */
.g-rating--hero {
  margin-top: 1.5rem;
}

/* Fuß: unter der E-Mail-Adresse, so schmal wie die Einleitung daneben. */
.g-rating--footer {
  margin-top: 1.6rem;
  max-width: 24rem;
  background: color-mix(in oklch, #fff 5%, transparent);
}