/* ENTWURF 18.10.2026 – Google-Bewertung im Titelbild der Startseite (Schalter GOT_STERNE=j, build.mjs ratingLine) */
.rating {
  --star: #f2c35e;
  --star-glow: 255, 205, 120;
  --star-rest: drop-shadow(0 0 2px rgba(var(--star-glow), .3)) drop-shadow(0 0 7px rgba(var(--star-glow), .3));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  margin: 0; color: #dcd8d1; font-size: 15px; line-height: 1.4;
}
.rating__stars { display: inline-flex; gap: var(--s1); }
.rating__stars svg { display: block; width: 22px; height: 22px; fill: var(--star); filter: var(--star-rest); }
.rating__score { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: 0.02em; color: #fff; }

/* Aufbau: Sterne nacheinander mit Glow (180 ms Abstand), dann 5,0, dann die Zeile. Ohne JS oder bei reduzierter Bewegung sofort sichtbar */
@media (prefers-reduced-motion: no-preference) {
  .js .rating:not(.is-in) svg, .js .rating:not(.is-in) .rating__score, .js .rating:not(.is-in) .rating__text { opacity: 0; }
  .js .rating.is-in svg { animation: got-star-in .9s cubic-bezier(.2, .8, .2, 1) backwards; }
  .js .rating.is-in svg:nth-child(2) { animation-delay: .18s; }
  .js .rating.is-in svg:nth-child(3) { animation-delay: .36s; }
  .js .rating.is-in svg:nth-child(4) { animation-delay: .54s; }
  .js .rating.is-in svg:nth-child(5) { animation-delay: .72s; }
  .js .rating.is-in .rating__score { animation: got-rating-fade .6s ease-out 1.2s backwards; }
  .js .rating.is-in .rating__text { animation: got-rating-fade .6s ease-out 1.45s backwards; }
}
@keyframes got-star-in {
  0% { opacity: 0; transform: scale(.3) rotate(-30deg); filter: drop-shadow(0 0 0 rgba(255, 240, 200, 0)) drop-shadow(0 0 0 rgba(var(--star-glow), 0)); }
  50% { opacity: 1; transform: scale(1.25) rotate(0); filter: drop-shadow(0 0 4px rgba(255, 240, 200, 1)) drop-shadow(0 0 18px rgba(var(--star-glow), .9)); }
  100% { opacity: 1; transform: scale(1); filter: var(--star-rest); }
}
@keyframes got-rating-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}