/* Startseite · stimmen (Owner: wdf-section-builder, Auftrag P7-home-40) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Mobil zuerst, Erweiterungen mit min-width. Statische Fassung; die Bewegung (Zahl, Sterne, Gesichter, Karten, Wolke) baut P8 darauf.
   Aus base.css kommen: .kapitel-kopf, .eyebrow, .lead, .display-rating, .sterne--gross, .avatare--gross, .karte-stimme, .por, details.voll.
   Hier nur Raster des Abschnitts, Aufbau der großen Google-Bewertung und die Fußzeile. */

/* ---------- Raster ---------- */
.stimmen { position: relative; padding: var(--space-section) 0; }
.stimmen-kopf { display: grid; gap: var(--space-32); align-items: end; }

/* ---------- Google 5,0 groß: Zahl + Sterne, Unterzeile, Gesichter ---------- */
.google-gross { display: grid; gap: var(--space-12); justify-items: start; }
.google-gross .wert { display: flex; align-items: baseline; gap: var(--space-12); }
.google-gross .unter { color: var(--color-text-secondary); font-size: var(--font-size-small); }

/* ---------- Stimmen-Karten ---------- */
.karten { position: relative; display: grid; gap: var(--space-24); margin-top: var(--space-64); }
.stimmen-fuss { margin-top: var(--space-32); color: var(--color-text-tertiary); font-size: var(--font-size-small); max-width: 60ch; text-wrap: pretty; }

/* ---------- Vertrauenszeile (P9, K-PRJ-09): Einwand Ein-Mann-Betrieb direkt am Beweis. Gesichter Graustufe + CI-Ring wie .por ---------- */
.stimmen-vertrauen {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12) var(--space-16); align-items: center;
  margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--color-line);
}
.sv-gesichter { display: flex; padding-left: var(--space-6); }
.sv-gesichter img {
  width: var(--space-40); height: var(--space-40); margin-left: calc(-1 * var(--space-6)); border-radius: var(--radius-round); object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.96); box-shadow: var(--ring-avatar);
}
.sv-punkte { display: grid; gap: var(--space-4); font-size: var(--font-size-small); line-height: var(--leading-caption); color: var(--color-text); }
.sv-punkte li { display: flex; align-items: baseline; gap: var(--space-10); }
.sv-punkte li::before { flex: none; transform: translateY(-.15em); content: ""; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-round); background: var(--color-accent); }
.stimmen-vertrauen .pfeil-link { grid-column: 1 / -1; }

@media (min-width: 1024px) {
  .stimmen-vertrauen { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-24); }
  .stimmen-vertrauen .pfeil-link { grid-column: auto; align-self: center; }
  .sv-punkte { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-20); }
  .stimmen-kopf { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--space-64); }
  .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}