/* 05-rezensionen — Bild 5: Kartenbogen konzentrisch auf dem oberen Streifen des Laufrads über dunklem Shop-Bokeh; Deck und Rad drehen aus EINER Variable (--deck).
   Nur Rollen-/CI-Tokens aus site.css. Breakpoints ≤1000 / ≤650. */
/* Sektion (Kundenwunsch 16.09.2026): dunkler Bokeh des Shops als Hintergrund, Surface rad-dark liefert die Rollen-Token.
   Darüber ein Scrim — oben kräftig, weil das Foto dort Lampenlichter bis ~200/255 hat (rechts oben, genau unter den Buttons),
   in der Mitte dünn, damit der Bokeh lebt, unten wieder etwas dichter als Boden für Rad und Karten. */
.rad-reviews-section{padding-bottom:0;position:relative;isolation:isolate;
  background:var(--vn-color-surface-dark) url(../images/rezensionen-bokeh.webp) center / cover no-repeat}
.rad-reviews-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--vn-color-surface-darker) 76%,transparent) 0%,
    color-mix(in srgb,var(--vn-color-surface-darker) 46%,transparent) 38%,
    color-mix(in srgb,var(--vn-color-surface-darker) 34%,transparent) 68%,
    color-mix(in srgb,var(--vn-color-surface-darker) 66%,transparent) 100%)}
@media(max-width:650px){.rad-reviews-section{background-image:url(../images/rezensionen-bokeh-900.webp)}}
/* Bewegung (Kundenwunsch: „smoother, eleganter“): längerer Weg, sanfter Anzug, langer Auslauf. Aus --vn-d-slower abgeleitet,
   damit reduced-motion (0 ms) automatisch mitzieht. Gilt für Rad, Kartenbogen und Slot-Opazität gemeinsam. */
.rad-reviews{--rad-dur-wheel:calc(var(--vn-d-slower) * 1.667);--rad-ease-wheel:cubic-bezier(.4,.02,.12,1)}
/* Buttons neben der 2. H2-Zeile (Template), nicht an der Unterkante der Kennzahlen: 1 Zeile H2, Button (40 px) mittig auf Zeile 2 (ohne Eyebrow seit 17.09.) */
.rad-reviews .rad-head__nav{align-self:flex-start;padding-bottom:0;margin-top:calc(var(--vn-text-display) * var(--rad-lh-head) + (var(--vn-text-display) * var(--rad-lh-head) - 40px) / 2)}

/* Google-Note (30.09.2026): große Zahl, fünf Sterne, darunter Anzahl und Quelle */
.rad-reviews__scores{display:flex;flex-wrap:wrap;column-gap:clamp(24px,3vw,44px)}
.rad-reviews__score{display:flex;align-items:center;gap:14px;margin-top:20px}
.rad-reviews__note{font:500 clamp(2.5rem,2rem + 1.6vw,3.25rem)/1 var(--vn-font-display);letter-spacing:-.02em;color:inherit}
.rad-reviews__score-text{display:flex;flex-direction:column;gap:5px}
.rad-reviews__score-stars{display:flex;gap:3px}
.rad-reviews__score-stars .rad-reviews__star{width:16px;height:16px;fill:var(--vn-color-accent-text);flex-shrink:0}
.rad-reviews__score-stars .is-leer{opacity:.3}
.rad-reviews__score-quelle{font:500 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-reviews__score-quelle a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Pause/Play (16 px): zwei 4-px-Balken bzw. Dreieck mit 1.5-px-Strich */
.rad-reviews__icon-pause,.rad-reviews__icon-play{width:16px;height:16px;display:block}
.rad-reviews__icon-pause path{fill:none;stroke:currentColor;stroke-width:4}
.rad-reviews__icon-play{display:none}
.rad-reviews__icon-play path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.rad-reviews__pause[aria-pressed=true] .rad-reviews__icon-pause{display:none}
.rad-reviews__pause[aria-pressed=true] .rad-reviews__icon-play{display:block}
.rad-reviews__pause[hidden]{display:none}

/* Bühne: Die Nabe liegt um --rad-wheel-drop UNTER der Sektionsunterkante, damit vom Rad nur noch der obere
   --rad-wheel-show-Anteil seiner Höhe stehen bleibt (Kundenwunsch 16.09.2026: 25–30 % statt der halben Scheibe).
   Karten und Rad teilen sich dieselbe Absenkung, der Bogenradius bleibt rc — die Karten sitzen weiterhin 8 px über dem Reifen.
   Höhe = sichtbares Radband + Karte + 8 px Kopfluft + 8 px Spalt (algebraisch identisch zu rc + Karte + 16 − drop).
   1440: Rad Ø 975, sichtbar 273, rc 496, Karte 330×416, Medienslot 188, Höhe 705. */
.rad-reviews__stage{position:relative;width:100%;overflow:hidden;contain:layout paint;touch-action:pan-y;
  --rad-wheel-d:max(720px,calc(1300 * var(--rad-tpx)));
  --rad-wheel-show:.28;
  --rad-wheel-drop:calc((.5 - var(--rad-wheel-show)) * var(--rad-wheel-d));
  --rad-wheel-base:180deg;   /* Grundstellung: „DT SWISS“ (6-Uhr-Decal) nach oben, ARC 1100 nach unten (Kundenwunsch, kopfstehend ist ok) */
  --rad-wheel-intro-from:260deg;
  --rad-wheel-intro-dur:2400ms;
  --rad-rc:calc(var(--rad-wheel-d) / 2 + 8px);
  --rad-card-w:max(280px,calc(440 * var(--rad-tpx)));
  --rad-card-h:416px;
  --rad-media-h:max(160px,calc(250 * var(--rad-tpx)));
  height:calc(var(--rad-wheel-show) * var(--rad-wheel-d) + var(--rad-card-h) + 16px)}
/* pointer-events:none ist hier kein Feinschliff, sondern Pflicht: Das Rad deckt gut ein Viertel der Bühne ab, und ein <img>
   startet dort sonst Chromes nativen Bild-Drag. Der feuert pointercancel, und die Wischgeste zum Weiterblättern wird verworfen
   (das Inline-SVG hatte das Problem nicht). Das Rad ist rein dekorativ und aria-hidden — es braucht keine Zeigerereignisse,
   Hover-Pause und Wischen laufen weiter über die Bühne darunter. user-drag/draggable zusätzlich als Gürtel und Hosenträger. */
/* Warmer Lichtkegel um die Nabe, unter dem Rad: hebt das schwarze Carbon vom dunklen Bokeh ab. Statischer Verlauf, kein filter —
   ein drop-shadow auf einem drehenden 975-px-Bild würde jeden Frame neu gerechnet. */
.rad-reviews__stage::before{content:"";position:absolute;left:50%;top:100%;width:calc(var(--rad-wheel-d) * 1.5);aspect-ratio:1;z-index:0;pointer-events:none;
  transform:translate(-50%,calc(-50% + var(--rad-wheel-drop)));
  background:radial-gradient(circle,color-mix(in srgb,var(--vn-color-accent) 26%,transparent) 0%,color-mix(in srgb,var(--vn-color-accent) 11%,transparent) 48%,transparent 94%)}
.rad-reviews__wheel{position:absolute;left:50%;top:100%;width:var(--rad-wheel-d);aspect-ratio:1;z-index:0;pointer-events:none;transform:translate(-50%,calc(-50% + var(--rad-wheel-drop)))}
.rad-reviews__wheel-art{display:block;width:100%;height:100%;-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none;transform:rotate(calc(var(--deck) + var(--rad-wheel-base)));transition:transform var(--rad-dur-wheel) var(--rad-ease-wheel)}
img.rad-reviews__wheel-art{object-fit:contain}
.rad-reviews__deck{position:absolute;left:50%;top:100%;width:0;height:0;z-index:1;transform:translateY(var(--rad-wheel-drop)) rotate(var(--deck));transform-origin:0 0;transition:transform var(--rad-dur-wheel) var(--rad-ease-wheel)}
.rad-reviews.is-live .rad-reviews__deck,.rad-reviews.is-live .rad-reviews__wheel-art{will-change:transform}

/* Einmaliger Anlauf, wenn das Rad zum ersten Mal ins Bild kommt: dreht in Fahrtrichtung (gegen den Uhrzeigersinn,
   wie --deck) aus und läuft auf 0 aus. Liegt auf dem Positionierer, --deck auf dem Blatt — die beiden Drehungen
   überlagern sich, statt einander zu überschreiben. Danach nimmt JS die Klasse wieder weg. */
@keyframes rad-wheel-intro{
  from{transform:translate(-50%,calc(-50% + var(--rad-wheel-drop))) rotate(var(--rad-wheel-intro-from))}
  to{transform:translate(-50%,calc(-50% + var(--rad-wheel-drop))) rotate(0deg)}
}
.rad-reviews__wheel--intro{animation:rad-wheel-intro var(--rad-wheel-intro-dur) var(--rad-ease-wheel) both}
@media(prefers-reduced-motion:reduce){.rad-reviews__wheel--intro{animation:none}}

/* Slot: Kartenunterkante-Mitte in der Nabe, translateY(−rc) auf den Reifen, rotate(slot·30°) tangential */
.rad-reviews__slot{position:absolute;left:calc(var(--rad-card-w) / -2);top:calc(-1 * var(--rad-card-h));width:var(--rad-card-w);height:var(--rad-card-h);transform-origin:50% 100%;transform:rotate(calc(var(--slot) * 30deg)) translateY(calc(-1 * var(--rad-rc)));transition:opacity var(--rad-dur-wheel) var(--rad-ease-wheel)}
/* Abdunkeln der Nachbarkarten (23.09.2026, Kundenhinweis „beim Weiterdrehen sieht man abgehackt durch die Hauptkarte"):
   vorher über opacity — die neue Frontkarte war beim Drehen noch halb durchsichtig und lag sofort obenauf, man sah durch
   sie hindurch auf die Karte dahinter. Jetzt sind die Karten DECKEND, gedimmt wird mit einer dunklen Abdeckung
   (.rad-reviews__card::after), die weich mitblendet; die Stapelreihenfolge (z-index) wechselt erst in der Mitte der
   Drehung (ganzzahlige Interpolation mit derselben Kurve wie die Drehung), also dort, wo beide Karten gleich weit von der Mitte stehen.
   Nur ganz außen (|d| ≥ 3) blenden die Karten über opacity aus — dort überlappen sie die sichtbaren nicht mehr. */
.rad-reviews__slot{transition:opacity var(--rad-dur-wheel) var(--rad-ease-wheel),z-index var(--rad-dur-wheel) var(--rad-ease-wheel)}
.rad-reviews__slot[data-d="0"]{opacity:1;z-index:3}
.rad-reviews__slot[data-d="1"],.rad-reviews__slot[data-d="-1"]{opacity:1;z-index:2}
.rad-reviews__slot[data-d="2"],.rad-reviews__slot[data-d="-2"]{opacity:1;z-index:1}
.rad-reviews__slot[data-d="3"],.rad-reviews__slot[data-d="-3"]{opacity:.35;z-index:0}
.rad-reviews__card{position:relative}
.rad-reviews__card::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;background:var(--vn-color-surface-darker);
  opacity:0;transition:opacity var(--rad-dur-wheel) var(--rad-ease-wheel)}
.rad-reviews__slot[data-d="1"] .rad-reviews__card::after,.rad-reviews__slot[data-d="-1"] .rad-reviews__card::after{opacity:.45}
.rad-reviews__slot[data-d="2"] .rad-reviews__card::after,.rad-reviews__slot[data-d="-2"] .rad-reviews__card::after{opacity:.72}
.rad-reviews__slot[data-d="3"] .rad-reviews__card::after,.rad-reviews__slot[data-d="-3"] .rad-reviews__card::after{opacity:.72}
.rad-reviews__slot[data-d="4"],.rad-reviews__slot[data-d="-4"],.rad-reviews__slot[data-d="5"],.rad-reviews__slot[data-d="-5"],.rad-reviews__slot[data-d="6"]{opacity:0;visibility:hidden}

/* Laufrad-Zeichnung (viewBox 1000, cx = cy = 500) — Rückfall, solange kein Kundenfoto in assets/images/laufrad.webp liegt */
.rad-reviews__tire{fill:none;stroke:var(--vn-color-ink);stroke-width:30}
.rad-reviews__tread{fill:none;stroke:var(--vn-color-surface-raised);stroke-width:30;stroke-dasharray:6 5;opacity:.5}
.rad-reviews__rim-edge{fill:none;stroke:var(--vn-color-accent);stroke-width:2;opacity:.5}
.rad-reviews__rim{fill:none;stroke:var(--vn-color-accent);stroke-width:6}
.rad-reviews__rim-bed{fill:none;stroke:var(--vn-color-accent-pale);stroke-width:1;opacity:.6}
.rad-reviews__spoke{stroke:var(--vn-color-ink);stroke-width:1;opacity:.6}
.rad-reviews__hub{fill:var(--vn-color-surface-raised);stroke:var(--vn-color-accent);stroke-width:2}
.rad-reviews__hub-cap{fill:var(--vn-color-accent)}
.rad-reviews__valve{fill:var(--vn-color-accent)}

/* Karte */
/* Karte (Kundenwunsch): kein Rand (0 px), die Bewertungsfläche unter dem Foto läuft als Verlauf von warm angeleuchtetem Anthrazit
   ins Tiefschwarz aus. Der erste Stop liegt exakt auf der Fotounterkante, darüber deckt das Foto. Abhebung vom Bokeh über einen
   weichen Schatten, nicht über eine Linie. Kein backdrop-filter: fünf sichtbare Karten über einem drehenden Bild wären zu teuer. */
.rad-reviews__card{height:100%;display:flex;flex-direction:column;border:0;border-radius:var(--vn-radius-xl);overflow:hidden;text-align:left;
  background:linear-gradient(180deg,var(--rad-card-top) var(--rad-media-h),var(--rad-card-bottom) 100%);
  box-shadow:none}
.rad-reviews__media{height:var(--rad-media-h);flex-shrink:0;background:var(--vn-color-surface-raised);position:relative;display:grid;place-items:center;overflow:hidden;color:var(--vn-color-on-dark-muted)}
.rad-reviews__media-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rad-reviews__media[data-mode=photo]::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--rad-card-top) 88%,transparent) 0%,transparent 55%)}
.rad-reviews__avatar{width:96px;height:96px;border-radius:50%;object-fit:cover}
/* Profilbild als 48-px-Badge über dem Rezensionsfoto (photo), sonst 96 px zentriert (avatar) */
.rad-reviews__media[data-mode=photo] .rad-reviews__avatar{position:absolute;left:20px;bottom:14px;z-index:1;width:48px;height:48px;background:var(--vn-color-surface-raised);border:1px solid var(--vn-color-accent)}
/* Monogramm (nur ohne Profilbild): groß zentriert (monogram) · 48-px-Badge (photo) */
.rad-reviews__monogram{position:relative;display:grid;place-items:center;font:500 2.75rem/1 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-accent-on-dark)}
.rad-reviews__media[data-mode=monogram] .rad-reviews__monogram::before{content:"";position:absolute;left:50%;top:50%;width:80px;height:80px;border-radius:50%;border:1px solid color-mix(in srgb,var(--vn-color-accent) 35%,transparent);transform:translate(-50%,-50%)}
.rad-reviews__media[data-mode=photo] .rad-reviews__monogram{position:absolute;left:20px;bottom:14px;z-index:1;width:48px;height:48px;border-radius:50%;background:var(--vn-color-surface-raised);border:1px solid var(--vn-color-accent);font:500 .9375rem/1 var(--vn-font-display);letter-spacing:0}
.rad-reviews__stars{position:absolute;left:20px;bottom:36px;z-index:1;display:flex;gap:2px}
.rad-reviews__stars .rad-reviews__star{width:14px;height:14px;fill:var(--vn-color-accent)}
.rad-reviews__stars[data-count="4"] .rad-reviews__star:nth-child(n+5),.rad-reviews__stars[data-count="3"] .rad-reviews__star:nth-child(n+4),.rad-reviews__stars[data-count="2"] .rad-reviews__star:nth-child(n+3),.rad-reviews__stars[data-count="1"] .rad-reviews__star:nth-child(n+2),.rad-reviews__stars[data-count="0"] .rad-reviews__star{opacity:.3}
.rad-reviews__source{position:absolute;left:20px;bottom:14px;z-index:1;font:500 var(--vn-text-2xs)/1.2 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-reviews__media[data-mode=photo] .rad-reviews__stars,.rad-reviews__media[data-mode=photo] .rad-reviews__source{left:80px}
.rad-reviews__media .rad-reviews__media-photo[hidden],.rad-reviews__media .rad-reviews__avatar[hidden],.rad-reviews__media .rad-reviews__monogram[hidden]{display:none}

/* Textteil (18px 22px 22px) */
.rad-reviews__author{margin:18px 22px 0;font:500 1.125rem/1.3 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-fg);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rad-reviews__author-link{text-decoration:underline;text-underline-offset:3px}
.rad-reviews__author-link[hidden],.rad-reviews__author-name[hidden]{display:none}
.rad-reviews__rating{margin:2px 22px 0;font:400 .75rem/1.5 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-reviews__text{margin:10px 22px 22px;font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-reviews__text p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
/* Kurzrezension (≤ 60 Zeichen, Klasse aus PHP/fill()): Zitat als Statement in Syne 500 */
.rad-reviews__card--short .rad-reviews__text{font:500 1.125rem/1.5 var(--vn-font-display);letter-spacing:-.01em}

@media(max-width:1000px){
  /* Karte 416/Clamp 7: bei 300 px Kartenbreite braucht die längste Featured-Rezension 7 Zeilen (Fix-Runde 1) */
  .rad-reviews__stage{--rad-wheel-d:max(760px,120vw);--rad-card-w:300px;--rad-card-h:416px;--rad-media-h:160px}
  .rad-reviews__text p{-webkit-line-clamp:7}
}
@media(max-width:650px){
  /* Karte 400/Medien 120/Clamp 7: längste Featured-Rezension (200 Zeichen ≈ 7 Zeilen) passt vollständig (Fix-Runde 1) */
  .rad-reviews__stage{--rad-wheel-d:180vw;--rad-card-w:min(78vw,300px);--rad-card-h:400px;--rad-media-h:120px}
  .rad-reviews__text p{-webkit-line-clamp:7}
  .rad-reviews__slot[data-d="1"] .rad-reviews__card::after,.rad-reviews__slot[data-d="-1"] .rad-reviews__card::after{opacity:.65}
  .rad-reviews .rad-head{flex-direction:column;align-items:stretch;gap:20px}
  .rad-reviews .rad-head__nav{justify-content:flex-end;padding-bottom:0;align-self:auto;margin-top:0}
}