/* ================================================================== *
 * google-rating.css – Vertrauenszeile mit der Google-Gesamtbewertung
 * (partials/components/google-rating.php). Steht im dunklen Einstieg
 * (Startseiten-Hero, Subhero) unter dem Angebots-Button.
 * ================================================================== */

/* p.g-rating statt .g-rating: Die Absatzregeln des Subheros (.subhero p)
   würden sonst Schriftgröße und Farbe übernehmen. */
p.g-rating {
  --g-rating-star: oklch(0.84 0.155 84);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem 0 0;
  padding: 0.7rem 1rem 0.75rem;
  border: 1px solid color-mix(in oklch, #fff 20%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklch, #fff 8%, transparent);
  color: #fff;
  font-size: var(--step--1);
  line-height: 1.4;
}
.g-rating__stars {
  display: block;
  width: 6rem;
  height: auto;
}
.g-rating__track {
  fill: color-mix(in oklch, #fff 26%, transparent);
}
.g-rating__fill {
  fill: var(--g-rating-star);
}
.g-rating__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.45rem;
}
.g-rating__score {
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1;
}
.g-rating__count {
  font-weight: 600;
}
.g-rating__meta {
  grid-column: 1 / -1;
  max-width: 40rem;
  font-size: 0.78rem;
  color: color-mix(in oklch, #fff 80%, var(--color-primary-100));
}

/* Startseite: Abstand zur Kontaktzeile darunter angleichen */
.hero p.g-rating {
  margin-top: 1.5rem;
}

/* Schmale Telefone: Sterne über die Note, damit „aus … Google-Bewertungen“
   nicht in eine schmale Restspalte gedrückt wird. */
@media (max-width: 22rem) {
  p.g-rating {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ *
 * Leistungs- und Ratgeberseiten: Ab 1000 px (zweispaltiges Artikel-
 * Layout) steht die Zeile im Angebotskasten der Seitenleiste, darunter
 * – Seitenleiste erst hinter dem Artikel – im Subhero. So erscheint sie
 * je Ansicht genau einmal.
 * ------------------------------------------------------------------ */
@media (min-width: 1000px) {
  .subhero p.g-rating--narrow-only {
    display: none;
  }
}
@media (max-width: 999.98px) {
  .aside-cta p.g-rating--aside {
    display: none;
  }
}

/* Im Angebotskasten kein eigener Kasten, sondern dessen Abschluss –
   durch eine feine Linie vom Button und der Telefonnummer getrennt. */
.aside-cta p.g-rating--aside {
  width: auto;
  margin: 1.1rem 0 0;
  padding: 1rem 0 0;
  border: 0;
  border-top: 1px solid color-mix(in oklch, #fff 18%, transparent);
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: var(--step--1);
}
/* .aside-cta svg setzt Icon-Maße – die Sterne behalten ihre eigene Breite. */
.aside-cta .g-rating__stars {
  width: 6rem;
  height: auto;
}
.aside-cta .g-rating__meta {
  color: color-mix(in oklch, #fff 80%, var(--color-primary-100));
}
/* Schmale Spalte: Sterne und Note in einer Zeile, die Anzahl darunter –
   statt „Google-Bewertungen“ mitten im Wort umzubrechen. */
.aside-cta p.g-rating--aside {
  gap: 0.3rem 0.6rem;
}
.aside-cta .g-rating--aside .g-rating__main {
  display: contents;
}
.aside-cta .g-rating--aside .g-rating__count {
  grid-column: 1 / -1;
}

/* Mit der Bewertung wird die Sticky-Seitenleiste höher als manches
   Laptop-Fenster. Statt den unteren Kasten dann bis zum Artikelende
   abzuschneiden, lässt sie sich in sich scrollen (wie das
   Inhaltsverzeichnis); passt sie ins Fenster, ändert sich nichts. */
@media (min-width: 1000px) {
  .article-aside:has(.g-rating--aside) {
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}