/* Theme Revoltaris, Produktseite (inc/seiten/Produkt.php).
 *
 * Konzept «Werkstück und Erzählung»: Bildstrecke mit mitlaufender Kaufspalte,
 * ein Randtitel-Raster für alles Sachliche, Problem und Lösung als Kapitel mit
 * grossen Wörtern, Nutzen als nummerierte Aussagen. Keine Kartenwand, keine
 * Hinweiskästen; Struktur tragen Haarlinien und Typografie.
 *
 * Nur Tokens des Systems. Neue Bausteine tragen rvt-p2-* und sind in
 * infra/initiativen/shop-eigenes-theme/DS-LUECKEN.md beschrieben (Abschnitt
 * «Produktseite V2: neue Bausteine», Name aus der Bauzeit), markiert mit VORSCHLAG DS-LUECKEN.
 *
 * Aufbau:
 *   0. Grundlagen, Grössen-Vorschläge, Bewegungstor
 *   1. Bühne: Bildstrecke, Kaufspalte
 *   2. Randtitel-Raster und Datenblatt mit VIN-Zeile
 *   3. Kapitel (Problem, Lösung) mit mitlaufendem Bild, Hochspannung
 *   4. Aussagen (Warum du das brauchst), Für wen, Warum bei uns, Fussnote
 *   5. Rezensionen
 *   6. Kontaktzeilen (Beratung), ähnliche Produkte
 *   7. Kaufleiste
 *   8. Bewegung
 */

/* ─── 0. Grundlagen ─────────────────────────────────────────────────────── */

.rvt-pdp {
  /* VORSCHLAG DS-LUECKEN: Typo-Stufen über --text-hero hinaus.
     --text-display für einzelne Kapitelwörter, --text-statement für Aussagen
     in Zeilen. Beide fluid wie die übrigen Display-Grössen. */
  --rvt-text-display: clamp(52px, 9vw, 136px);
  --rvt-text-statement: clamp(20px, 2.4vw, 32px);
  /* Randspalte zu Inhalt: 4 zu 8 von 12. */
  --rvt-folio-cols: minmax(0, 4fr) minmax(0, 8fr);
  --rvt-col-gap: clamp(var(--space-12), 5vw, var(--space-14));
  --rvt-sticky-top: calc(var(--nav-height) + var(--space-9));
}

:where(.rvt-p2) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.rvt-p2 figure { margin: 0; }

.rvt-p2-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Laufender Text aus der Produktbeschreibung. */
.rvt-p2-text p + p, .rvt-p2-text p + ul, .rvt-p2-text ul + p { margin-top: 0.8em; }
.rvt-p2-text ul { list-style: disc; padding-left: 1.2em; }
.rvt-p2 :is(.rvt-p2-text, .rvt-p2-fineprint, .rvt-p2-hv__text, .rvt-p2-lead) a {
  color: var(--fg); text-decoration: underline; text-underline-offset: 2px;
}
.rvt-p2 :is(.rvt-p2-text, .rvt-p2-fineprint, .rvt-p2-hv__text, .rvt-p2-lead) a:hover { color: var(--gold); }

/* Medienhelligkeit (DS-NACHZIEHEN Nr. 2, Wert in chrome.css). */
.rvt-p2 :is(.rvt-p2-shot__img, .rvt-p2-story__img, .rvt-p2-dock__img) { filter: brightness(var(--media-brightness)); }

/* ─── 1. Bühne ──────────────────────────────────────────────────────────── */

.rvt-p2-crumbs { margin-bottom: var(--space-9); }
@media (max-width: 640px) {
  /* Handy: die aktuelle Seite steht als h1 darunter, die Spur endet bei der Kategorie. */
  .rvt-p2-crumbs .rvds-breadcrumb__current,
  .rvt-p2-crumbs .rvds-breadcrumb__separator:nth-last-child(2) { display: none; }
}
.rvt-p2-notices { margin-bottom: var(--space-8); max-width: var(--measure-alert); }

.rvt-p2-stage__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-11); }
.rvt-p2-stage__media, .rvt-p2-stage__buy { min-width: 0; }
@media (min-width: 900px) {
  .rvt-p2-stage__grid {
    /* Bildstrecke 7 zu 9 (Hauptbild bei 1440 rund 467px). Die Kaufspalte
       bekommt die Breite. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 9fr);
    gap: var(--rvt-col-gap); align-items: start;
  }
  /* Die Kaufspalte läuft mit, während die Bildstrecke vorbeizieht. */
  .rvt-p2-stage__buy { position: sticky; top: var(--rvt-sticky-top); }
}

/* VORSCHLAG DS-LUECKEN: ProductStrip (Bildstrecke).
   Desktop ein Mosaik: erstes Bild über die ganze Breite, die übrigen zu
   zweit, ein allein stehendes letztes wieder über die ganze Breite. Jeder
   Rahmen ist quadratisch, gleich wie viele Bilder es sind:
   1 Bild gross, 2 Bilder untereinander gross, 3 gross plus Paar, 4 gross,
   Paar, gross. Handy eine Leiste mit Einrasten, das nächste Bild schaut an. */
.rvt-p2-gallery { position: relative; }
.rvt-p2-gallery__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); outline: none; }
.rvt-p2-shot--lead, .rvt-p2-shot--wide { grid-column: 1 / -1; }
.rvt-p2-shot { min-width: 0; }
.rvt-p2-shot__frame {
  position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.rvt-p2-shot__frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-image) var(--ease);
}
.rvt-p2-shot__frame:focus-visible { outline: none; box-shadow: var(--focus-glow); }

/* Vergrössern-Glyphe auf Glas, erscheint mit dem Zeiger oder Fokus. */
.rvt-p2-shot__zoom {
  position: absolute; right: var(--space-5); bottom: var(--space-5);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-height); height: var(--control-height);
  border-radius: var(--radius-pill); border: 1px solid var(--caption-line);
  background: var(--caption-bg); color: var(--caption-fg);
  -webkit-backdrop-filter: var(--caption-backdrop); backdrop-filter: var(--caption-backdrop);
  opacity: 0; transition: opacity var(--duration-base) var(--ease);
  pointer-events: none;
}
.rvt-p2-shot__frame:focus-visible .rvt-p2-shot__zoom { opacity: 1; }
@media (hover: hover) {
  .rvt-p2-shot__frame:hover img { transform: scale(var(--hover-zoom)); }
  .rvt-p2-shot__frame:hover .rvt-p2-shot__zoom { opacity: 1; }
}

.rvt-p2-gallery__count { display: none; }

@media (max-width: 899px) {
  /* Volle Breite bis an den Rand, Abstand nur innen. */
  .rvt-p2-gallery { margin-inline: calc(-1 * var(--gutter)); }
  .rvt-p2-gallery__track {
    display: flex; gap: var(--space-4);
    /* Nur waagrecht: senkrechtes Wischen gehört der Seite. */
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .rvt-p2-gallery__track::-webkit-scrollbar { display: none; }
  /* 77 % der Breite, das nächste Bild schaut rechts an. Ein Einzelbild füllt die Breite. */
  .rvt-p2-shot { flex: 0 0 100%; scroll-snap-align: start; }
  .rvt-p2-gallery--many .rvt-p2-shot { flex-basis: 77%; }
  .rvt-p2-gallery__track:focus-visible { box-shadow: inset var(--focus-glow); }

  .rvt-p2-gallery--many .rvt-p2-gallery__count {
    position: absolute; left: calc(var(--gutter) + var(--space-5)); bottom: var(--space-5);
    display: inline-flex; align-items: center; gap: 3px;
    padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
    border: 1px solid var(--caption-line); background: var(--caption-bg); color: var(--caption-fg);
    -webkit-backdrop-filter: var(--caption-backdrop); backdrop-filter: var(--caption-backdrop);
    font-size: var(--text-11); letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums;
  }
  .rvt-p2-gallery__count b { font-weight: var(--weight-bold); }
}
@media (prefers-reduced-motion: reduce) { .rvt-p2-gallery__track { scroll-behavior: auto; } }

/* Kaufspalte */
.rvt-p2-buy { display: flex; flex-direction: column; min-width: 0; }
.rvt-p2-title {
  font-size: var(--text-page-title); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-title); line-height: var(--leading-tight);
  color: var(--fg); text-wrap: balance;
  /* Lange Wörter (Hochspannungsbatterie) in der schmalen Kaufspalte: trennen statt überlaufen. */
  hyphens: auto; overflow-wrap: break-word;
}
/* Zwischen md und lg ist die Kaufspalte am schmalsten. */
@media (min-width: 900px) and (max-width: 1199px) { .rvt-p2-title { font-size: var(--text-feature); } }
/* Ab 1300 ist die Kaufspalte (7 zu 9) breit genug für «Hochspannungsbatterie»;
   dort keine Trennung, sonst bricht auch «Controller». */
@media (min-width: 1300px) { .rvt-p2-title { hyphens: manual; } }
.rvt-p2-lead {
  margin-top: var(--space-8); max-width: var(--measure-lead);
  font-size: var(--text-165); line-height: var(--leading-relaxed); color: var(--mut);
}
.rvt-p2-lead p + p { margin-top: 0.8em; }

.rvt-p2-offer { margin-top: var(--space-11); padding-top: var(--space-9); border-top: 1px solid var(--line); }
.rvt-p2-priceline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-7); }
.rvt-p2-priceline .rvt-p2-price {
  font-size: var(--text-feature); font-weight: var(--weight-semibold); line-height: 1;
  letter-spacing: var(--tracking-title); color: var(--fg); font-variant-numeric: tabular-nums;
}
.rvt-p2-price span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }
.rvt-p2-price small { font-size: 0.5em; font-weight: var(--weight-medium); letter-spacing: normal; color: var(--mut); }
.rvt-p2-price del { font-size: 0.55em; color: var(--dim); }
.rvt-p2-price ins { text-decoration: none; }
.rvt-p2-taxnote { margin-top: var(--space-4); font-size: var(--text-125); color: var(--mut-2); }

.rvt-p2-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-9); }
/* VORSCHLAG DS-LUECKEN (schon gemeldet): Stepper in Grösse lg neben Button --lg. */
.rvt-p2-stepper { height: var(--control-height-lg); }
.rvt-p2-form .rvds-button[aria-busy="true"] { cursor: progress; }

/* VORSCHLAG DS-LUECKEN: QuietNotes. Hinweiszeilen des Plugins als ruhiger
   Text unter der Kaufaktion statt als Alert: Inhalt bleibt, Kasten entfällt. */
.rvt-p2-hints {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-8); max-width: var(--measure-alert);
  font-size: var(--text-13); line-height: var(--leading-normal); color: var(--mut-2);
}
.rvt-p2-hints__line { display: block; }
.rvt-p2-hints [hidden] { display: none; }
.rvt-p2-hints strong { color: var(--fg); font-weight: var(--weight-semibold); }

/* ─── 2. Randtitel-Raster und Datenblatt ────────────────────────────────── */

/* VORSCHLAG DS-LUECKEN: Folio (Randtitel-Raster). Titel in einer Randspalte,
   die auf dem Desktop mitläuft, der Inhalt daneben. Gleiche Spalten für alle
   sachlichen Abschnitte einer Seite, damit sie als ein Satz lesen. */
.rvt-p2-folio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
.rvt-p2-folio + .rvt-p2-folio--next { margin-top: var(--space-13); }
.rvt-p2-folio__aside, .rvt-p2-folio__body { min-width: 0; }
.rvt-p2-folio__title {
  font-size: var(--text-section); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-title); line-height: var(--leading-tight);
  color: var(--text-heading); text-wrap: balance;
}
@media (min-width: 900px) {
  .rvt-p2-folio { grid-template-columns: var(--rvt-folio-cols); gap: var(--rvt-col-gap); }
  .rvt-p2-folio + .rvt-p2-folio--next { margin-top: var(--space-15); }
  .rvt-p2-folio__title { position: sticky; top: var(--rvt-sticky-top); }
}

/* VORSCHLAG DS-LUECKEN: SpecSheet. DescriptionList in grossem Satz:
   Haarlinie je Zeile, Bezeichnung klein, Wert in Lesegrösse. */
.rvt-p2-spec { margin: 0; }
.rvt-p2-spec__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3); padding-block: var(--space-8);
}
.rvt-p2-spec__row::before, .rvt-p2-claim::before, .rvt-p2-contacts > li::before, .rvt-p2-review::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line); transform-origin: left center;
}
.rvt-p2-spec__row:first-child { padding-top: 0; }
.rvt-p2-spec__row:first-child::before { display: none; }
@media (min-width: 641px) {
  .rvt-p2-spec__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: baseline; }
}
.rvt-p2-spec__label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-14); font-weight: var(--weight-medium); color: var(--mut-2);
}
.rvt-p2-spec__value { margin: 0; font-size: var(--text-18); line-height: var(--leading-snug); color: var(--fg); }
.rvt-p2-spec__row--code .rvt-p2-spec__value { font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.rvt-p2-spec__row--meta { padding-block: var(--space-5); }
.rvt-p2-spec__row--meta .rvt-p2-spec__value { font-size: var(--text-14); color: var(--mut); }
.rvt-p2-spec__row--meta .rvt-p2-spec__value a { color: var(--mut); }
.rvt-p2-spec__row--meta .rvt-p2-spec__value a:hover { color: var(--gold); }

.rvt-p2-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rvt-p2-chip { font-size: var(--text-13); }

/* VIN-Zeile im Datenblatt */
.rvt-p2-spec__row--vin { align-items: start; }
.rvt-p2-vin__label label { cursor: pointer; }
.rvt-p2-vin__row { display: flex; gap: var(--space-4); max-width: var(--measure-alert); }
.rvt-p2-vin__row .rvds-input { flex: 1; min-width: 0; }
.rvt-p2-vin__row .rvds-input__control { text-transform: uppercase; }
.rvt-p2-vin__row .rvds-input__control::placeholder { text-transform: none; }
.rvt-p2-verdict {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-top: var(--space-4); min-height: calc(2 * var(--leading-normal) * 1em); max-width: var(--measure-alert);
  font-size: var(--text-13); line-height: var(--leading-normal); color: var(--mut);
}
.rvt-p2-verdict__icon { display: inline-flex; flex: none; margin-top: 2px; color: var(--mut-2); }
.rvt-p2-verdict[data-state="fit"] .rvt-p2-verdict__icon { color: var(--success); }
.rvt-p2-verdict[data-state="nofit"] .rvt-p2-verdict__icon { color: var(--danger); }
.rvt-p2-verdict[data-state="unknown"] .rvt-p2-verdict__icon { color: var(--info); }
.rvt-p2-verdict[data-state="busy"] { color: var(--mut-2); }
/* Im Ruhezustand steht keine Zeile (die Live-Region bleibt, leer und ohne Höhe). */
.rvt-p2-verdict[data-state="idle"] { min-height: 0; margin-top: 0; }

/* InfoTooltip (DS-LUECKEN, schon gemeldet), Blase dunkel in beiden Designs. */
.rvt-p2-tip { position: relative; display: inline-flex; }
.rvt-p2-tip__btn {
  box-sizing: content-box; display: inline-flex; align-items: center; justify-content: center;
  flex: none; height: 18px; width: 18px; padding: 13px; margin: -13px;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--info); cursor: help;
}
.rvt-p2-tip__bubble {
  position: absolute; z-index: 600; bottom: calc(100% + 7px); left: 50%; translate: -50% 0;
  margin-left: var(--rvt-tip-shift, 0px);
  width: max-content; max-width: var(--measure-tooltip); pointer-events: none;
  border-radius: var(--radius-md); border: 1px solid var(--line-2);
  background: var(--tooltip-bg); -webkit-backdrop-filter: blur(var(--blur-surface)); backdrop-filter: blur(var(--blur-surface));
  padding: 6px 10px; font-size: var(--text-12); line-height: var(--leading-normal);
  font-weight: var(--weight-medium); color: var(--tooltip-fg);
  text-align: left; visibility: hidden; opacity: 0;
  transition: opacity var(--duration-instant) var(--ease), visibility 0s linear var(--duration-instant);
}
.rvt-p2-tip.is-open .rvt-p2-tip__bubble,
.rvt-p2-tip:not([data-rvt-ready]):hover .rvt-p2-tip__bubble,
.rvt-p2-tip:not([data-rvt-ready]):focus-within .rvt-p2-tip__bubble { visibility: visible; opacity: 1; transition-delay: 0s; }

/* ─── 3. Kapitel ────────────────────────────────────────────────────────── */

/* VORSCHLAG DS-LUECKEN: StoryChapters. Kapitel mit einem grossen Wort als
   Titel; auf dem Desktop läuft daneben ein Bild mit, das Kapitel in der
   Bildmitte ist voll, das andere tritt zurück. */
.rvt-p2-story__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.rvt-p2-story__media { min-width: 0; }
.rvt-p2-story__frame {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: var(--shadow-photo);
}
/* Video aus der Beschreibung ist hochkant (864x1080), Fotos sind quadratisch. */
.rvt-p2-story__frame--video { aspect-ratio: 4 / 5; }
.rvt-p2-story__parallax { position: absolute; inset: 0; }
.rvt-p2-story__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rvt-p2-story__chapters { min-width: 0; display: flex; flex-direction: column; gap: var(--space-13); }

/* VORSCHLAG DS-LUECKEN: StoryChapters, Morph. Das mitlaufende Medium hat zwei
   Seiten: vorn das Medium zum Problem, hinten das zur Lösung. Sobald das
   Kapitel «Lösung» ins untere Drittel des Fensters kommt (produkt.js), geht
   die eine Seite in die andere über, beim Hochscrollen zurück. Keine Drehung
   und kein Blur: die gehende Seite blendet aus und weicht minimal zurück, die
   kommende blendet ein und setzt sich aus leichter Übergrösse. Nur Opacity und
   Transform, damit der Übergang auch über laufenden Videos auf der
   Grafikkarte bleibt. Beide Seiten stehen im selben Rasterfeld und haben damit
   dieselbe Grösse. Klassennamen «flip» bleiben, damit Markup und Skript gleich
   bleiben. Ohne Skript zeigt die Karte die Vorderseite. */
.rvt-p2-flip__card { display: grid; isolation: isolate; }
.rvt-p2-flip__face {
  grid-area: 1 / 1; min-width: 0; will-change: opacity, transform;
  transition: opacity var(--duration-accordion) var(--ease), transform var(--duration-reveal) var(--ease);
}
.rvt-p2-flip__face--back { opacity: 0; transform: scale(1.03); pointer-events: none; }
.rvt-p2-flip.is-flipped .rvt-p2-flip__face--back { opacity: 1; transform: none; pointer-events: auto; }
.rvt-p2-flip.is-flipped .rvt-p2-flip__face--front { opacity: 0; transform: scale(0.98); pointer-events: none; }
/* Reduzierte Bewegung: nur Deckkraft, kurz. */
@media (prefers-reduced-motion: reduce) {
  .rvt-p2-flip__face, .rvt-p2-flip.is-flipped .rvt-p2-flip__face { transform: none; transition: opacity var(--duration-base) var(--ease); }
}
/* Handy: kein mitlaufendes Bild, darum keine Karte; das Lösungsbild steht im
   Kapitel «Lösung» (rvt-p2-chapter__media). Auf dem Desktop umgekehrt. */
.rvt-p2-chapter__media { margin-top: var(--space-9); }
@media (max-width: 899px) {
  .rvt-p2-flip__face--back { display: none; }
}
@media (min-width: 900px) {
  .rvt-p2-chapter__media { display: none; }
}

@media (min-width: 900px) {
  .rvt-p2-story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--rvt-col-gap); align-items: start; }
  .rvt-p2-story__grid--solo { grid-template-columns: minmax(0, 1fr); }
  .rvt-p2-story__media { position: sticky; top: var(--rvt-sticky-top); }
  .rvt-p2-story__frame { max-height: calc(100vh - var(--nav-height) - 2 * var(--space-9)); margin-inline: auto; }
  .rvt-p2-story__chapters { gap: 0; }
  .rvt-p2-chapter {
    min-height: 72vh; display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--space-14);
  }
  .rvt-p2-chapter:first-child { padding-top: 0; min-height: 60vh; justify-content: flex-start; }
}

.rvt-p2-chapter__title {
  font-size: var(--rvt-text-display); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-title); line-height: var(--leading-tight); color: var(--fg);
}
.rvt-p2-chapter__text {
  margin-top: var(--space-9); max-width: var(--measure-lead);
  font-size: var(--text-18); line-height: var(--leading-relaxed); color: var(--mut);
}

/* VORSCHLAG DS-LUECKEN: SafetyLine. Sicherheitshinweis im Lesefluss: Haarlinie,
   IconTile im Gefahrenton (Glyphe trägt die Bedeutung), Text in Titelfarbe.
   Klar erkennbar ohne roten Kasten und ohne roten Text. */
.rvt-p2-hv {
  display: flex; align-items: flex-start; gap: var(--space-6);
  margin-top: var(--space-11); padding-top: var(--space-9); border-top: 1px solid var(--line);
  max-width: var(--measure-lead);
}
.rvt-p2-hv__tile { flex: none; }
.rvt-p2-hv__text {
  font-size: var(--text-165); line-height: var(--leading-relaxed);
  font-weight: var(--weight-medium); color: var(--fg);
}

/* ─── 4. Aussagen, Für wen, Warum bei uns, Fussnote ─────────────────────── */

/* VORSCHLAG DS-LUECKEN: Statements. Nummerierte Aussagen in Zeilen, gross
   gesetzt, Indexziffer klein und gesperrt (wie die Index-Ziffern des Systems). */
.rvt-p2-claim {
  position: relative; display: grid; grid-template-columns: var(--space-13) minmax(0, 1fr);
  gap: var(--space-5); align-items: baseline; padding-block: var(--space-9);
}
.rvt-p2-claim:last-child { border-bottom: 1px solid var(--line); }
.rvt-p2-claim__num {
  font-size: var(--text-13); font-weight: var(--weight-bold); letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums; color: var(--mut-2);
}
.rvt-p2-claim__text {
  font-size: var(--rvt-text-statement); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); line-height: var(--leading-snug);
  color: var(--fg); text-wrap: pretty;
}

.rvt-p2-statement {
  max-width: var(--measure-panel);
  font-size: var(--text-24); line-height: var(--leading-normal); color: var(--fg);
}
@media (max-width: 640px) { .rvt-p2-statement { font-size: var(--text-19); } }
.rvt-p2-body { max-width: var(--measure-lead); font-size: var(--text-165); line-height: var(--leading-relaxed); color: var(--mut); }

.rvt-p2-why { gap: var(--space-6); }
.rvt-p2-why > .rvds-check-list__item { font-size: var(--text-165); line-height: var(--leading-relaxed); color: var(--mut); }
.rvt-p2-why .rvds-check-list__mark { margin-top: 0.35em; }
@media (min-width: 900px) {
  .rvt-p2-why { gap: var(--space-7); }
}

.rvt-p2-fineprint {
  max-width: var(--measure-lead);
  font-size: var(--text-13); line-height: var(--leading-relaxed); color: var(--mut-2);
}
.rvt-p2-fineprint__text + .rvt-p2-fineprint__text { margin-top: var(--space-4); }
.rvt-p2-fineprint strong { color: var(--fg); font-weight: var(--weight-semibold); }

/* Fliesstext, wenn die Beschreibung nicht der bekannten Gliederung folgt. */
.rvt-p2-prose { max-width: var(--measure-lead); font-size: var(--text-165); line-height: var(--leading-loose); color: var(--mut); }
.rvt-p2-prose > * + * { margin-top: 1em; }
.rvt-p2-prose :is(h2, h3, h4) { color: var(--fg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); font-size: var(--text-24); margin-top: 1.4em; }
.rvt-p2-prose ul { list-style: disc; padding-left: 1.2em; }
.rvt-p2-prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.rvt-p2-prose :is(video, img) { border-radius: var(--radius-lg); border: 1px solid var(--line-2); filter: brightness(var(--media-brightness)); height: auto; max-width: 100%; }

/* ─── 5. Rezensionen ────────────────────────────────────────────────────── */

.rvt-p2-noreviews { max-width: var(--measure-lead); }
.rvt-p2-noreviews__title { font-size: var(--text-24); line-height: var(--leading-snug); color: var(--mut); }
.rvt-p2-noreviews__note { margin-top: var(--space-4); font-size: var(--text-13); line-height: var(--leading-normal); color: var(--mut-2); max-width: var(--measure-alert); }
.rvt-p2-reviews { max-width: var(--measure-panel); }
.rvt-p2-review { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-8); }
.rvt-p2-review:first-child { padding-top: 0; }
.rvt-p2-review:first-child::before { display: none; }
.rvt-p2-review__text { font-size: var(--text-165); line-height: var(--leading-relaxed); color: var(--mut); }
.rvt-p2-review__text p + p { margin-top: 0.8em; }
.rvt-p2-review__meta { font-size: var(--text-12); color: var(--mut-2); }
.rvt-p2-review__meta strong { color: var(--fg); font-weight: var(--weight-semibold); }

.rvt-p2-reviewformwrap { margin-top: var(--space-12); max-width: var(--container-form); }
.rvt-p2-form__title { font-size: var(--text-19); font-weight: var(--weight-semibold); margin-bottom: var(--space-7); color: var(--fg); }
.rvt-p2-form__title small { margin-left: var(--space-3); font-size: var(--text-13); }
.rvt-p2-reviewform { display: flex; flex-direction: column; gap: var(--space-7); }
.rvt-p2-reviewform .comment-form-cookies-consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-13); color: var(--mut); }
.rvt-p2-reviewform__submit { margin: 0; }
.rvt-p2-stars { margin: 0; padding: 0; border: 0; }
/* Rating als Eingabe (DS-LUECKEN, schon gemeldet). */
.rvt-p2-stars__row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rvt-p2-stars__row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rvt-p2-stars__row label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -6px; cursor: pointer; color: var(--line-2);
  transition: color var(--duration-instant);
}
.rvt-p2-stars__row svg { fill: currentColor; }
.rvt-p2-stars__row input:checked ~ label,
.rvt-p2-stars__row label:hover, .rvt-p2-stars__row label:hover ~ label { color: var(--gold); }
.rvt-p2-stars__row input:focus-visible + label { box-shadow: var(--focus-glow); border-radius: var(--radius-pill); }

/* ─── 6. Beratung und ähnliche Produkte ─────────────────────────────────── */

.rvt-p2-advice__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-11); }
@media (min-width: 900px) {
  .rvt-p2-advice__grid { grid-template-columns: var(--rvt-folio-cols); gap: var(--rvt-col-gap); align-items: end; }
}
.rvt-p2-advice__title {
  font-size: var(--text-section); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-title); line-height: var(--leading-tight); color: var(--fg); text-wrap: balance;
}
.rvt-p2-advice__text { margin-top: var(--space-6); font-size: var(--text-165); line-height: var(--leading-relaxed); color: var(--mut); }

/* VORSCHLAG DS-LUECKEN: ContactRow. Grosse Kontaktzeile als Link: Glyphe,
   Wert in Feature-Grösse, Pfeil, Haarlinie. Hover wie jeder Link im System:
   Gold und 3px nach rechts, keine Hebung. */
.rvt-p2-contacts > li { position: relative; }
.rvt-p2-contacts > li:last-child { border-bottom: 1px solid var(--line); }
.rvt-p2-contact {
  display: flex; align-items: center; gap: var(--space-7);
  min-height: var(--control-height-lg); padding-block: var(--space-8);
  font-size: var(--text-feature); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-title); line-height: var(--leading-snug);
  color: var(--fg); overflow-wrap: anywhere;
}
.rvt-p2-contact__glyph { display: inline-flex; flex: none; color: var(--mut-2); opacity: 0.8; transition: opacity var(--duration-instant), color var(--duration-instant); }
.rvt-p2-contact__text { min-width: 0; transition: transform var(--duration-fast) var(--ease); }
.rvt-p2-contact__arrow { display: inline-flex; flex: none; margin-left: auto; color: var(--mut-2); opacity: 0.8; transition: transform var(--duration-fast) var(--ease), opacity var(--duration-instant), color var(--duration-instant); }
.rvt-p2-contact:hover { color: var(--gold); }
.rvt-p2-contact:hover :is(.rvt-p2-contact__glyph, .rvt-p2-contact__arrow) { opacity: 1; color: var(--gold); }
.rvt-p2-contact:hover .rvt-p2-contact__text { transform: translateX(var(--hover-nudge)); }
.rvt-p2-contact:hover .rvt-p2-contact__arrow { transform: translateX(calc(2 * var(--hover-nudge))); }
.rvt-p2-contact:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-md); }
@media (max-width: 640px) {
  .rvt-p2-contact { font-size: var(--text-19); gap: var(--space-5); }
}

/* Ähnliche Produkte: Karten und Raster des Plugins (chrome.css), nur der Rhythmus. */
.rvt-p2-related { border-top: 1px solid var(--line); }

/* ─── 7. Kaufleiste ─────────────────────────────────────────────────────── */

/* VORSCHLAG DS-LUECKEN: StickyBar --float. Auf dem Desktop schwebt die
   StickyBar als Glasleiste über der Seite (Breite --container-form), mit
   Vorschaubild und Namen; auf dem Handy bleibt sie am Rand wie im System. */
.rvt-p2-dock__thumb, .rvt-p2-dock__name { display: none; }
.rvt-p2-dock__info { min-width: 0; }
@media (min-width: 900px) {
  .rvt-p2-dock {
    left: 50%; right: auto; bottom: var(--space-7);
    width: min(calc(100% - 2 * var(--space-12)), var(--container-form));
    translate: -50% 0;
    gap: var(--space-6); min-height: 0; padding: var(--space-4);
    border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
    box-shadow: var(--glass-highlight), var(--shadow-menu);
  }
  .rvt-p2-dock__thumb {
    display: block; flex: none; width: var(--control-height-lg); height: var(--control-height-lg);
    overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--line);
  }
  .rvt-p2-dock__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .rvt-p2-dock__info { flex: 1; display: flex; flex-direction: column; }
  .rvt-p2-dock__name {
    display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: var(--text-14); font-weight: var(--weight-semibold); color: var(--fg);
  }
  .rvt-p2-dock__label { display: none; }
  .rvt-p2-dock .rvds-sticky-bar__value { font-size: var(--text-14); font-weight: var(--weight-medium); color: var(--mut); }
}
/* Mit Skript erst sichtbar, wenn der Kaufknopf aus dem Bild ist; ohne Skript immer. */
.rvt-p2-dock[data-rvt-armed] {
  visibility: hidden; opacity: 0; transform: translateY(var(--space-7));
  transition: opacity var(--duration-exit) var(--ease-exit), transform var(--duration-exit) var(--ease-exit), visibility 0s linear var(--duration-exit);
}
.rvt-p2-dock[data-rvt-armed].is-visible {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--duration-overlay) var(--ease), transform var(--duration-overlay) var(--ease), visibility 0s;
}
@media (max-width: 899px) {
  /* Ohne Skript deckt die Leiste sonst das Seitenende ab. */
  .rvt-pdp .wp-site-blocks { padding-bottom: var(--sticky-bar-height); }
}
@media (prefers-reduced-motion: reduce) {
  .rvt-p2-dock[data-rvt-armed], .rvt-p2-dock[data-rvt-armed].is-visible { transition: none; transform: none; }
}

/* ─── 7b. Gegen die Grundregeln von chrome.css ────────────────────────────
   chrome.css setzt body.rvr .rvr-main p, li { color: inherit } und
   a:not(.rvds-button) { color: inherit } mit hoher Spezifität (Bild des alten
   Aufbaus). Wo diese Seite eine eigene Tinte braucht, hier mit gleichem Gewicht. */
body.rvt-pdp .rvr-main .rvt-p2-taxnote { color: var(--mut-2); }
body.rvt-pdp .rvr-main .rvt-p2-hv__text { color: var(--fg); }
body.rvt-pdp .rvr-main .rvt-p2-verdict { color: var(--mut); }
body.rvt-pdp .rvr-main .rvt-p2-verdict[data-state="busy"] { color: var(--mut-2); }
body.rvt-pdp .rvr-main .rvt-p2-noreviews__title { color: var(--mut); }
body.rvt-pdp .rvr-main :is(.rvt-p2-noreviews__note, .rvt-p2-review__meta) { color: var(--mut-2); }
body.rvt-pdp .rvr-main .rvt-p2-advice__text { color: var(--mut); }
body.rvt-pdp .rvr-main .rvt-p2-why > .rvds-check-list__item { color: var(--mut); }
body.rvt-pdp .rvr-main .rvt-p2-advice a.rvt-p2-contact { color: var(--fg); }
body.rvt-pdp .rvr-main .rvt-p2-advice a.rvt-p2-contact:hover { color: var(--gold); }
body.rvt-pdp .rvr-main .rvt-p2-spec__row--meta a:not(.rvds-button):hover,
body.rvt-pdp .rvr-main .rvt-p2 :is(.rvt-p2-text, .rvt-p2-fineprint, .rvt-p2-hv__text, .rvt-p2-lead) a:not(.rvds-button):hover { color: var(--gold); }
.rvt-p2-contacts { margin: 0; padding: 0; list-style: none; }

/* ─── 8. Bewegung ───────────────────────────────────────────────────────────
   Nur unter html.rvt-p2-anim (gesetzt im Markup, wenn Skript da und keine
   reduzierte Bewegung gewünscht ist). Sonst ist alles sichtbar und ruhig.
   Kurven und Dauern aus den Tokens: Ankunft --ease, --duration-reveal,
   Versatz --reveal-offset, Staffel --stagger-step bis --stagger-max (JS). */

.rvt-p2-anim .rvt-pdp [data-rvt-in] {
  transition: opacity var(--duration-reveal) var(--ease), transform var(--duration-reveal) var(--ease);
  transition-delay: var(--rvt-delay, 0ms);
}
.rvt-p2-anim .rvt-pdp [data-rvt-in]:not(.is-in) { opacity: 0; transform: translateY(var(--reveal-offset)); }
.rvt-p2-anim .rvt-pdp [data-rvt-in].is-in { transform: none; }

/* Bild enthüllt sich von unten (Maske), das Foto setzt sich dabei aus leichter
   Vergrösserung. Keine Verschiebung des Rahmens. Die Maske liegt auf dem
   Kind, nicht auf dem beobachteten Element: Chromium rechnet clip-path in
   den IntersectionObserver ein, ein ganz maskiertes Ziel meldete sich nie. */
.rvt-p2-anim .rvt-pdp [data-rvt-in="clip"],
.rvt-p2-anim .rvt-pdp [data-rvt-in="clip"]:not(.is-in) { opacity: 1; transform: none; }
/* Die zweite Zeile schlägt «[data-rvt-in]:not(.is-in)» oben: ohne sie lagen
   noch nicht eingetretene Bilder der Handy-Leiste um --reveal-offset tiefer,
   und die Leiste liesse sich senkrecht bewegen. */
.rvt-p2-anim .rvt-pdp [data-rvt-in="clip"] > * {
  transition: clip-path calc(var(--duration-reveal) * 1.3) var(--ease);
  transition-delay: var(--rvt-delay, 0ms);
}
.rvt-p2-anim .rvt-pdp [data-rvt-in="clip"]:not(.is-in) > * { clip-path: inset(0 0 100% 0 round var(--radius-lg)); }
.rvt-p2-anim .rvt-pdp [data-rvt-in="clip"].is-in > * { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
.rvt-p2-anim .rvt-pdp [data-rvt-in="clip"].is-done > * { clip-path: none; }
.rvt-p2-anim .rvt-pdp [data-rvt-in="clip"]:not(.is-done) :is(.rvt-p2-shot__img, .rvt-p2-story__parallax) {
  transition: transform calc(var(--duration-reveal) * 1.6) var(--ease);
  transition-delay: var(--rvt-delay, 0ms);
}
.rvt-p2-anim .rvt-pdp [data-rvt-in="clip"]:not(.is-in) .rvt-p2-shot__img { transform: scale(1.12); }

/* Haarlinie zeichnet sich von links, der Inhalt folgt. */
.rvt-p2-anim .rvt-pdp [data-rvt-in="line"]::before {
  transition: transform calc(var(--duration-reveal) * 1.2) var(--ease-move);
  transition-delay: var(--rvt-delay, 0ms);
}
.rvt-p2-anim .rvt-pdp [data-rvt-in="line"]:not(.is-in)::before { transform: scaleX(0); }
.rvt-p2-anim .rvt-pdp [data-rvt-in="line"]:not(.is-in) { transform: translateY(calc(var(--reveal-offset) / 2)); }

/* Mitlaufendes Bild der Kapitel: leicht vergrössert, damit die Verschiebung
   (--rvt-par, vom Skript aus dem Fortschritt durch den Abschnitt) nie den
   Rand zeigt. */
.rvt-p2-anim .rvt-p2-story__parallax { transform: translate3d(0, var(--rvt-par, 0px), 0) scale(1.1); will-change: transform; }

/* Kapitel: das in der Bildmitte ist voll, das andere tritt zurück. Nur auf
   dem Desktop, wo beide Kapitel nebeneinander mit dem Bild stehen. */
@media (min-width: 900px) {
  .rvt-p2-anim .rvt-p2-chapter { transition: opacity var(--duration-accordion) var(--ease); }
  .rvt-p2-anim .rvt-p2-story.is-tracking .rvt-p2-chapter:not(.is-current) { opacity: 0.22; }
}

@media (prefers-reduced-motion: reduce) {
  .rvt-pdp .rvr-main *, .rvt-pdp .rvr-main *::before { transition: none !important; }
  .rvt-pdp [data-rvt-in] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .rvt-p2-story__parallax { transform: none !important; }
}

/* Lightbox offen: basis.css hält die Rinne der Bildlaufleiste frei
   (scrollbar-gutter: stable), daneben bliebe rechts ein Streifen in der
   Seitenfarbe. */
html:has(#rvt-p2-bilder.rvds-overlay--open) { scrollbar-gutter: auto; }