/* /bewertungen/: große Wertung je Portal (Release 2026-10-22-verkaufsstark, Modul bewertungen).
   Zahl groß, darunter gezeichnete Sterne bzw. bei Trustlocal ein gezeichneter Balken, Anzahl und Stand je Karte.
   Werte stehen im HTML (Portale) bzw. kommen aus dem vorhandenen Google-Widget. Farben aus den Tokens. */

/* Kopf mit Zeichnung: auf dem Handy steht die Zeichnung im ersten Bildschirm.
   r2c: Oberer Abstand so, dass Zeichnung und H1 auch bei scrollY 0–24 (fester Kopf 76/88 px, bis 24 px
   durchsichtig) unter dem Kopf beginnen; Desktop wie /projekte, Handy unten. */
.review-hero.wertung-held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: center; column-gap: clamp(32px, 5vw, 80px); padding-top: clamp(112px, 9vw, 136px); }
.review-hero.wertung-held h1 { grid-column: 1; margin: 0; text-align: left; }
.wertung-held__bild { grid-column: 2; display: block; width: 100%; height: auto; }

/* Raster: drei Spalten, Tablet zwei, Handy eine. Raum trennt, keine Rahmen. */
.review-directory .wertungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wertungen > li { display: grid; margin: 0; }
.wertung { display: grid; grid-template-rows: auto 1fr auto; gap: 26px; padding: 28px 30px; background: var(--flaeche, #FBFAF8); border-radius: 22px 16px 24px 18px; color: var(--ink, #19191C); text-decoration: none; transition: background-color .3s ease, transform .3s ease; }
.wertung:hover, .wertung:focus-visible { background: #fff; color: var(--ink, #19191C); }
.wertung:hover { transform: translateY(-2px); }
.wertung:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 3px; }

.wertung__kopf { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.wertung__logo { flex: none; width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.wertung__logo--wort { width: 128px; height: 34px; object-position: left center; }
.wertung__logo--clutch { width: 104px; height: 30px; }
.wertung__logo--breit { width: 96px; height: 44px; object-fit: cover; }
.wertung__portal { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.wertung__pfeil { margin-left: auto; font-size: 20px; color: var(--muted, #6E6A66); transition: transform .3s ease; }
.wertung:hover .wertung__pfeil { transform: translate(2px, -2px); }

.wertung__wert { display: grid; align-content: start; gap: 14px; }
.wertung__zeile { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wertung__zahl { font-size: clamp(64px, 6.2vw, 92px); font-weight: 700; line-height: .9; letter-spacing: -.045em; }
.wertung__von { font-size: 20px; font-weight: 600; color: var(--muted, #6E6A66); }
.wertung__fuss { display: grid; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2, #2B2B2F); }
.wertung__stand { font-size: 13px; color: #57534f; }
.wertung__stand[hidden] { display: none; }

/* Gezeichnete Sterne, anteilig gefüllt: --anteil in Prozent der Bildbreite (Sternkanten siehe README). */
.sterne { position: relative; display: block; width: 168px; aspect-ratio: 106 / 23; }
.sterne[hidden] { display: none; }
.sterne > span { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: url("/assets/img/zeichen/sterne.svg") no-repeat 0 50% / 168px auto; }
.sterne > .sterne__leer { opacity: .17; }
.sterne > .sterne__voll { width: calc(var(--anteil, 0) * 1%); }

/* Gezeichneter Balken (Trustlocal, Skala 0 bis 10). */
.balken { position: relative; display: block; width: 100%; max-width: 280px; aspect-ratio: 320 / 28; }
.balken__fuellung { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--anteil, 0) * 1%); }
.balken__fuellung img, .balken__rahmen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.balken__skala { display: flex; justify-content: space-between; max-width: 280px; margin-top: -6px; font-size: 12px; color: var(--muted, #6E6A66); }

/* Google: Zahl, Sterne und Anzahl erst, wenn das Widget einen gültigen Wert gerendert hat.
   Bis dahin bzw. ohne JavaScript steht nur „Bewertungen auf Google“. Platz reserviert, damit nichts springt. */
.wertung--google .wertung__wert { min-height: calc(.9 * clamp(64px, 6.2vw, 92px) + 51px); }
.wertung--google .wertung__fuss { min-height: 46px; align-content: start; }
.wertung__ersatz { font-size: 22px; font-weight: 600; line-height: 1.25; }
.wertung--google .google-reviews-date { display: none; }

@media (max-width: 980px) {
  .review-directory .wertungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .review-hero.wertung-held { grid-template-columns: minmax(0, 1fr); row-gap: 8px; justify-items: center; padding-top: 104px; }
  .review-hero.wertung-held h1 { text-align: center; }
  .wertung-held__bild { grid-column: 1; order: -1; width: 230px; }
}
@media (max-width: 620px) {
  .review-directory .wertungen { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wertung { gap: 18px; padding: 22px; }
  .wertung__zahl { font-size: 64px; }
  .wertung--google .wertung__wert { min-height: calc(.9 * 64px + 51px); }
}
@media (prefers-reduced-motion: reduce) {
  .wertung, .wertung__pfeil { transition: none; }
  .wertung:hover, .wertung:hover .wertung__pfeil { transform: none; }
}