/* ==========================================================================
   Bewertungen (Strom: bewertungen-einordnung) · Version D Final Polish
   Komposition aus C (Polish Abschnitt 9) mit den vier echten Bewertungen (Abschnitt 10).
   Nur Tokens und Bausteine aus base.css. Keine Sterne-Glows, keine leuchtende Zahl.
   ========================================================================== */
/* ---------------- Kopf + klickbare Bewertungsfläche ----------------
   Die Fläche ist ein Link (ganze Fläche klickbar, Tastatur: Tab + Enter). Ziel steht im Text („auf ProvenExpert“).
   Hover/Fokus: eine Stufe heller, Ring, 2 px angehoben, Pfeil rückt nach rechts oben. Kein roter Saum, kein Glow. */
.rev__head { align-items: end; }
.rev__aside { display: grid; gap: .6rem; justify-items: stretch; }
.rev__qa { max-width: 26rem; }
.rev__score { display: grid; gap: .5rem; justify-items: start; min-width: min(100%, 22rem); padding: 1.25rem 1.4rem 1.15rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); color: var(--text); transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.rev__score:hover { background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-2); transform: translateY(-2px); }
.rev__score:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.rev__row { display: flex; align-items: center; gap: .9rem; }
.rev__v { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.02em; line-height: 1; }
.rev__stars { width: 6.5rem; height: 1.2rem; color: var(--red); }
.rev__stars--sm { width: 5rem; height: .95rem; }
.rev__n { font-size: var(--fs-meta); line-height: 1.45; color: var(--text-2); max-width: 21rem; text-wrap: pretty; }
.rev__n b { font-weight: 620; color: var(--text); }
/* Auszeichnung „Von Kunden empfohlen“ (Marcel 24.10): bewusst leise, eine Zeile Text mit Häkchen, keine Plakette. */
.rev__award { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: center; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.rev__award svg { width: .85rem; height: .85rem; color: var(--red-text); }
.rev__award small { grid-column: 2; font-size: .75rem; font-weight: 450; line-height: 1.4; color: var(--text-3); }
.rev__go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); align-self: stretch; font-weight: 600; font-size: .9375rem; }
.rev__go svg { width: .85rem; height: .85rem; flex: none; color: var(--red-text); transition: transform var(--t-mid) var(--ease); }
.rev__score:hover .rev__go svg, .rev__score:focus-visible .rev__go svg { transform: translate(2px, -2px); }

/* ---------------- Leitzitat ----------------
   Die eine große Aussage zwischen zwei Haarlinien. Anführungszeichen sind echte Satzzeichen der Schrift („ … “) in Textgröße
   und Textschnitt, rot; das öffnende hängt links aus der Textkante (hängende Interpunktion), damit die Zeilen bündig bleiben.
   Kein separates Ornament. Kürzung „[…]“ gedämpft, aber lesbar. --q = Schriftgröße des Zitats. */
.rev__lead { --q: calc(var(--fs-h2) * .7); display: grid; row-gap: clamp(1.5rem, 2.5vw, 2.25rem); max-width: 64rem; margin: 0 auto clamp(2.5rem, 2rem + 2.5vw, 4rem); padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-block: 1px solid var(--line-2); }
.rev__lead blockquote p { font-size: var(--q); font-weight: 560; line-height: 1.24; letter-spacing: -.026em; color: var(--text); text-wrap: pretty; }
.rev__lead blockquote p > .rev__q:first-child { display: inline-block; width: .5em; margin-left: -.5em; text-align: right; } /* hängt genau um seine eigene Breite */
.rev__q { color: var(--red-text); }
.rev__cut { color: var(--text-3); font-weight: 500; }
/* Feinschliff 15.10: großes Anführungszeichen links oben (Form aus C), Zitat und Herkunft rechts daneben; die kleinen Zeichen entfallen. */
.rev__lead { grid-template-columns: clamp(2.25rem, 1.6rem + 2vw, 3.5rem) minmax(0, 1fr); column-gap: clamp(1rem, 2.5vw, 2.25rem); }
.rev__mark { grid-column: 1; grid-row: 1; align-self: start; width: 100%; height: auto; color: var(--red); margin-top: .35rem; }
.rev__lead blockquote, .rev__lead figcaption { grid-column: 2; }
.rev__lead blockquote p > .rev__q, .rev__lead blockquote p > .rev__q:first-child { display: none; }
.rev__lead figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; }
.rev__lead .rev__stars--sm { margin-left: .25rem; }
.rev__full { margin-left: auto; font-size: var(--fs-small); } /* Weg zur vollständigen Bewertung, rechts in der Bildunterschrift; schmal darunter */
@media (max-width: 599px) { .rev__full { margin-left: 0; } }
.rev__av { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; background: var(--surface-3); box-shadow: var(--ring-2); font-size: var(--fs-meta); font-weight: 650; letter-spacing: .02em; color: var(--text-2); }
.rev__who { display: grid; min-width: 0; line-height: 1.35; }
.rev__who b { font-weight: 620; }
.rev__who small { font-size: var(--fs-meta); color: var(--text-3); }

/* ---------------- Weitere Stimmen ----------------
   Drei gleich hohe redaktionelle Karten: Sterne oben, Text, Name unten bündig (auch bei ungleich langen Texten).
   Schmal als waagrechte Leiste mit Einrasten (wischen); Karten bleiben lesbar breit. */
.rev__voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rev__voice { display: grid; grid-template-rows: auto 1fr auto; gap: 1.1rem; padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); font-size: var(--fs-small); }
.rev__voice blockquote p { color: var(--text-2); line-height: 1.6; text-wrap: pretty; }
.rev__voice figcaption { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.rev__voice > .ph-tag { justify-self: start; }
[data-preview="qa"] .rev__voice { grid-template-rows: auto 1fr auto auto; }
.rev__voices:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; border-radius: var(--r-lg); }

@media (max-width: 899px) {
  .rev__aside { justify-items: start; margin-top: .5rem; }
}
@media (max-width: 767px) {
  .rev__lead { --q: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem); grid-template-columns: minmax(0, 1fr); }
  .rev__mark { grid-row: auto; width: 2.25rem; margin: 0; }
  .rev__lead blockquote, .rev__lead figcaption { grid-column: 1; }
  .rev__voices { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .75rem; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .rev__voice { flex: 0 0 min(86%, 24rem); scroll-snap-align: start; }
}
.rev__av--foto { width: 3.5rem; height: 3.5rem; padding: 0; object-fit: cover; }
/* Fotos der Bewerter (Marcel 30.10) */
.rev__av--bild { overflow: hidden; padding: 0; }
.rev__av--bild img { display: block; width: 100%; height: 100%; object-fit: cover; }