/*
 * Theme Revoltaris, Chrome: Kopf (NavBar des Systems mit Filterzeile), Telefonmenü,
 * Schnell-Warenkorb, Footer, Toasts, Startseite (Hero, Produktkarten,
 * Beratung), Kategorie und Produktsuche, Fortschritt (Steps).
 *
 * Markup: inc/Chrome.php (Kopf, Footer, Body-Klasse rvr), inc/Schaufenster.php
 * (Blöcke revoltaris/rd-hero, rd-produkte, rd-beratung), assets/js/toasts.js.
 *
 * Die Bausteine heissen rvr-* (Body-Klasse rvr). Keine !important-Regeln und
 * keine Token-Brücke --rv-*: Werte stehen als gewöhnliche Regeln auf den
 * Tokens des Systems.
 *
 * Was als VORSCHLAG markiert ist, steht noch nicht im Design System und ist in
 * infra/initiativen/shop-design-system-angleichung/DS-NACHZIEHEN.md gelistet
 * (VORSCHLAG) bzw. in infra/initiativen/shop-eigenes-theme/DS-LUECKEN.md
 * (VORSCHLAG DS-LUECKEN).
 *
 * Aufbau:
 *   1. Seitenrahmen und Grundlage der Bausteine
 *   2. NavBar, Suche, Bewertung, Warenkorb-Knopf
 *   3. Telefonmenü, Overlays (Hintergrund, Drawer des Schnell-Warenkorbs)
 *   4. Hero
 *   5. Abschnittskopf, Filterzeile, VIN-Karte, Chips, Felder
 *   6. Produktkarten, CtaPanel, Brotkrumen, Seitentitel
 *   7. Footer
 *   8. Bewegung
 *   9. Toasts
 *  10. Schnell-Warenkorb
 *  11. Fortschritt (Steps)
 *  12. Handy: Trefferflächen und Filterzeile
 *  13. Rückfallvorlage (templates/index.html, Block revoltaris-theme/grundvorlage)
 */

/* ─── 1. Seitenrahmen und Grundlage der Bausteine ───────────────────────── */

/* Die Wrapper der Template-Parts tragen keine eigene Box: die Navbar ist
   fixiert, der Footer bringt seine Fläche selbst mit. Chrome::swap_part gibt
   Kopf und Footer ohnehin ohne Wrapper aus. */
.rvr-part { display: contents; }

/* Seiten ohne Hero und ohne Produktraster oben beginnen unter der fixierten
   Navbar. Startseite (Hero), Kategorie und Suche (rvr-page-top) rechnen den
   Abstand selbst. Andere Vorlagen addieren die Navbar-Höhe nicht noch einmal. */
body.rvr:not(.home):not(.tax-product_cat):not(.tax-product_tag):not(.search) .wp-site-blocks { padding-top: var(--nav-height); }

/* Grundschrift, Abstände und Bilder kommen aus basis.css. Hier nur, was die
   Bausteine darüber hinaus brauchen: Titel in Titelfarbe und halbfett, Knöpfe
   in der Schrift der Seite. */
:where(.rvr-main, .rvr-nav, .rvr-drawer) :where(h1, h2, h3) { color: var(--text-heading); font-weight: var(--weight-semibold); }
:where(.rvr-main, .rvr-nav, .rvr-drawer) :where(button) { font-family: inherit; }

/* Links in den Bausteinen tragen ihre Farbe selbst, nicht das --mut der
   Grundlinks. Die Selektoren sind absichtlich so stark wie im alten Aufbau:
   sie bestimmen das heutige Bild. NavBar und Footer sind die des Systems
   und färben ihre Links selbst. */
body.rvr .rvr-main a:not(.rvds-button):not(.rvds-icon-button) { color: inherit; }
body.rvr .rvr-main p, body.rvr .rvr-main li { color: inherit; }
body.rvr .rvr-main h1, body.rvr .rvr-main h2, body.rvr .rvr-main h3 { color: var(--text-heading); }

/* VORSCHLAG Token: Medienhelligkeit je Design. Dunkel mildert die harte
   Kante heller Produktfotos auf --bg #000, hell bleibt das Foto unverändert. */
:root, [data-theme="dark"] { --media-brightness: 0.88; }
/* Im hellen Design nur leicht aufgehellt. */
[data-theme="light"] { --media-brightness: 1.02; }

/* Bildverlauf je Design. Hell kommt aus dem System (0.9.2 «the hero photograph
   follows the theme»: --wash-hero-scrim, --wash-hero-photo-opacity).
   ABWEICHUNG dunkel: nur hinter dem Text links, das Foto bleibt rechts offen,
   unten weicher Übergang in die Seite; das System hat dunkel einen Verlauf von
   oben nach unten über das ganze Bild (Foto 0.6). Offen zur Entscheidung. */
:root, [data-theme="dark"] {
  --rvr-hero-photo: 0.85;
  --rvr-hero-scrim:
    linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.46) 45%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, var(--bg) 100%);
}
[data-theme="light"] {
  --rvr-hero-photo: var(--wash-hero-photo-opacity);
  --rvr-hero-scrim: var(--wash-hero-scrim);
}
/* Auf dem Handy steht der Text über die ganze Breite: dort trägt ein Verlauf von oben nach unten. */
@media (max-width: 640px) {
  :root, [data-theme="dark"] { --rvr-hero-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.68) 55%, var(--bg) 100%); }
  [data-theme="light"] { --rvr-hero-scrim: var(--wash-hero-scrim); }
}

.rvr-container { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin-inline: auto; }
@media (min-width: 1200px) {
  .rvr-container { width: var(--container-width-lg); }
}
.rvr-section { padding-block: var(--section-y); }
@media (min-width: 900px) { .rvr-section { padding-block: var(--section-y-md); } }
.rvr-section--alt { background: var(--surface-alt); }
.rvr-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.rvr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Seiten ohne Hero beginnen unter der Navbar. */
.rvr-page-top { padding-top: calc(var(--nav-height) + var(--space-12)); }
/* Seiten, deren Produkte gleich oben stehen, öffnen die zweite Zeile der Navbar
   sofort: der Abstand rechnet ihre Höhe mit ein. */
.rvr-page-top[data-rvr-products] { padding-top: calc(var(--nav-height) + var(--nav-row-height) + var(--space-12)); }

/* ─── 2. NavBar des Systems (.rvds-nav-bar, ds.css und interactions.css) ─── */
/* Fest oben wie im System (position: fixed, Glas, Haarlinie); einpassen,
   Schleier, Suche, MenuButton, Telefonmenü und die deckende Leiste über dem
   offenen Menü macht das System. Hier nur, was der Shop darüber hinaus
   braucht. Unter dem Schnell-Warenkorb (61). */
.rvr-nav.rvds-nav-bar { z-index: 50; }
/* Grösse wie das System sie für jede Leiste festlegt: Wortmarke --brandmark-bar (20px, Telefon 16px). */
.rvr-logo .rvds-brandmark { --brandmark-size: var(--brandmark-bar); }
/* Die Marke ist auf dem Telefon ein volles Touch-Ziel (44px), nicht nur so hoch wie die Wortmarke. */
.rvds-nav-bar__brand.rvr-logo { min-height: var(--touch-target); }

/* SONDERFORM Rating: Bewertungsknopf (Footer) und Sterne (Hero). rvds-rating zeichnet
   SVG-Sterne ohne Pille und sähe anders aus; bleibt, bis über die Startseite entschieden ist. */
.rvr-rating {
  display: inline-flex; align-items: center; gap: var(--space-3); height: var(--control-height);
  padding: 0 var(--space-6); border-radius: var(--radius-pill);
  border: 1px solid var(--line); --rvds-fill: var(--fill-1); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint);
  -webkit-backdrop-filter: blur(var(--blur-surface)); backdrop-filter: blur(var(--blur-surface));
  color: var(--mut); font-size: var(--text-13); white-space: nowrap;
}
.rvr-rating:hover { border-color: var(--line-2); color: var(--fg); }
.rvr-stars { color: var(--gold); letter-spacing: 1px; font-size: var(--text-12); }
.rvr-rating strong { color: var(--fg); font-weight: var(--weight-semibold); }

.rvr-cart { position: relative; }
.rvr-cart__count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--gold); color: var(--on-accent);
  font-size: var(--text-11); font-weight: var(--weight-bold); line-height: 18px; text-align: center;
}
.rvr-cart__count[hidden] { display: none; }

/* ─── 3. Telefonmenü, Overlays ──────────────────────────────────────────── */
/* Telefonmenü des Systems (.rvds-mobile-menu, interactions.css). Nur eine
   Ebene; der Fuss trägt den Design-Umschalter allein, darum an das Ende. */
.rvr-menu-fuss { justify-content: flex-end; }
.rvr-menu-kopf { flex: 1; display: flex; }
.rvr-menu-kopf .rvds-brandmark { --brandmark-size: var(--brandmark-bar-phone); }
/* Hintergrund und Drawer des Schnell-Warenkorbs (Abschnitt 10). */
.rvr-backdrop {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay-backdrop);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity var(--duration-overlay) var(--ease);
}
.rvr-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(360px, 88vw);
  background: var(--menu-bg); border-left: 1px solid var(--line);
  -webkit-backdrop-filter: blur(var(--blur-menu)); backdrop-filter: blur(var(--blur-menu));
  transform: translateX(100%); transition: transform var(--duration-overlay) var(--ease);
  display: flex; flex-direction: column; visibility: hidden;
}
.rvr-drawer__head {
  height: var(--nav-height); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); border-bottom: 1px solid var(--line); color: var(--fg); font-weight: var(--weight-semibold);
}
/* Schliessen ist nicht destruktiv: neutral, kein Rot. */
body.rvr .rvr-drawer__head .rvds-icon-button:hover { color: var(--fg); background: var(--hover-veil); border-color: var(--line-2); }

/* ─── 4. Hero: Werkstattfoto unter einem Verlauf, der dem Design folgt ──── */
.rvr-hero { position: relative; overflow: hidden; background: var(--bg); color: var(--mut); }
.rvr-hero__media, .rvr-hero__scrim { position: absolute; inset: 0; }
.rvr-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: var(--rvr-hero-photo); }
.rvr-hero__scrim { background: var(--rvr-hero-scrim); }
.rvr-hero__inner {
  position: relative; padding-top: calc(var(--nav-height) + var(--section-y-md));
  padding-bottom: var(--section-y-md); display: grid; gap: var(--space-9); max-width: 1000px;
}
@media (min-width: 900px) { .rvr-hero__inner { padding-top: calc(var(--nav-height) + var(--section-y-lg)); padding-bottom: var(--section-y-lg); } }
/* VORSCHLAG Hero-Grösse: grösser als --text-hero (max. 50px), weil Titel und Text dort für einen Hero zu klein sind. */
.rvr-hero h1 { font-size: clamp(40px, 6.6vw, 88px); font-weight: var(--weight-bold); letter-spacing: -0.035em; line-height: 1.0; }
.rvr-hero__lead { font-size: clamp(17px, 1.55vw, 22px); line-height: var(--leading-relaxed); max-width: 760px; }
/* Hell steht der Lead über dem Foto auf dem schwächeren Verlauf (DS 0.13.1): Text dunkel (--fg), sonst nicht lesbar. */
html[data-theme="light"] body.rvr .rvr-hero p.rvr-hero__lead { color: var(--fg); }
.rvr-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.rvr-trust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-13); color: var(--mut-2); }
.rvr-trust strong { color: var(--fg); font-weight: var(--weight-semibold); }

/* Vorteilszeile unter dem Lead. Keine Pillen: Vorteile stehen als Text mit
   Glyphe, damit nichts nach Knopf aussieht. */
.rvr-pills { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-9); list-style: none; margin: 0; padding: 0; }
.rvr-pill {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--mut); font-size: var(--text-14); white-space: nowrap;
}
.rvr-pill .rvr-icon { color: var(--gold); width: 14px; height: 14px; }


/* ─── 5. Abschnittskopf, Filterzeile, VIN-Karte, Chips, Felder ───────────── */
/* SONDERFORM SectionHead und Section: rvds-section-head hat 60px Abstand, Zeilenhöhe 1.08
   und keinen Platz für die Anzahl rechts; rvds-section rechnet die Polster anders.
   Bleibt für Startseite, Kategorie und Suche (Aussehen unverändert). */
.rvr-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-7); margin-bottom: var(--space-12); }
.rvr-head h2 { font-weight: var(--weight-semibold); font-size: var(--text-section); letter-spacing: var(--tracking-title); line-height: var(--leading-snug); }
.rvr-head__meta { color: var(--mut-2); font-size: var(--text-14); }

/* Inhalt der zweiten NavBar-Zeile (.rvds-nav-bar__row des Systems: Aufklappen,
   Glas, Haarlinie, Mass). Hier nur Lage und Breite von Fahrzeugwahl und VIN. */
.rvr-nav .rvds-nav-bar__row .rvr-vin { flex: 0 1 360px; min-width: 0; }
.rvr-nav .rvds-nav-bar__row .rvr-vin .rvr-field { width: 0; }
/* Fahrzeugwahl auf dem Handy: Select des Systems (span.rvds-select.rvr-fit >
   select.rvds-select__control.rvr-fit-select). */
.rvr-nav .rvds-nav-bar__row .rvr-fit { display: none; }
/* Die Knopfreihe passt erst ab 1200px in eine Zeile (bei 1024 brach «Model X
   2015-2021» allein in eine zweite); darunter die Auswahlliste. */
@media (max-width: 1199px) {
  .rvr-nav .rvds-nav-bar__row .rvr-chips { display: none; }
  .rvr-nav .rvds-nav-bar__row .rvr-fit { display: block; flex: 0 0 auto; width: min(42%, 240px); }
}
@media (max-width: 899px) {
  .rvr-nav .rvds-nav-bar__row .rvr-vin { flex: 1 1 auto; }
}
/* Sprung «Zu den Produkten»: Navbar plus Filterzeile plus Luft, damit der
   Titel unter Kopf und Filterzeile frei steht. */
#produkte { scroll-margin-top: calc(2 * var(--nav-height) + 64px); }

.rvr-vin { display: flex; gap: var(--space-3); align-items: center; flex: 0 1 380px; }

/* VIN-Karte in Info-Blau: Feld und Knopf in einer Fläche, so hoch wie ein Feld,
   damit die Filterzeile ihre Höhe behält. Der Knopf ist neutral, nicht Gold. */
body.rvr .rvr-vin-card {
  display: flex; align-items: center; flex: 0 1 360px; min-width: 240px; margin: 0;
  box-sizing: border-box; height: var(--field-height); gap: var(--space-3); padding: 0 3px 0 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--info-border); --rvds-fill: var(--info-surface); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint);
  -webkit-backdrop-filter: blur(var(--blur-surface)); backdrop-filter: blur(var(--blur-surface));
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.rvr-vin-card > .rvr-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--info); }
.rvr-vin-card input {
  flex: 1 1 auto; min-width: 0; min-height: 0; width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent;
  color: var(--fg); font: inherit; font-size: var(--text-15); outline: none; box-shadow: none;
}
.rvr-vin-card input::placeholder { color: var(--mut-2); }
body.rvr .rvr-vin-card .rvds-button {
  flex: 0 0 auto; width: auto; height: auto; min-height: calc(var(--field-height) - 8px); margin: 0; padding: 0 16px;
  font-size: var(--text-135); box-shadow: none;
}
.rvr-vin-card:focus-within { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-line); }
@media (max-width: 899px) { body.rvr .rvr-vin-card { min-width: 0; flex: 1 1 auto; } }
/* Meldet sich nach «Passung per VIN prüfen» wie ein Signal: erst ein kurzer,
   kleiner Puls, kurze Pause, dann ein grosser, langer Ring, der weit nach
   aussen ausläuft. Info-Blau, einmal. Animiert wird nur die Grundfarbe unter der
   Info-Füllung (ein Verlauf liesse sich nicht überblenden); am Ende wieder --surface-tint. */
@keyframes rvr-signal {
  0%   { box-shadow: 0 0 0 0 rgb(from var(--info) r g b / 0.8); background-color: rgb(from var(--info) r g b / 0.22); }
  14%  { box-shadow: 0 0 0 9px rgb(from var(--info) r g b / 0); background-color: var(--surface-tint); }
  26%  { box-shadow: 0 0 0 0 rgb(from var(--info) r g b / 0); background-color: var(--surface-tint); }
  30%  { box-shadow: 0 0 0 0 rgb(from var(--info) r g b / 0.95), 0 0 0 0 rgb(from var(--info) r g b / 0.55), 0 0 24px 2px rgb(from var(--info) r g b / 0.6); background-color: rgb(from var(--info) r g b / 0.38); }
  100% { box-shadow: 0 0 0 46px rgb(from var(--info) r g b / 0), 0 0 0 80px rgb(from var(--info) r g b / 0), 0 0 24px 2px rgb(from var(--info) r g b / 0); background-color: var(--surface-tint); }
}
.rvr-vin-card.is-pulsing { border-color: var(--info); animation: rvr-signal 2200ms cubic-bezier(0.2, 0.7, 0.2, 1) 1; }
@media (prefers-reduced-motion: reduce) { .rvr-vin-card.is-pulsing { animation: none; } }

.rvr-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rvr-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-7);
  border-radius: var(--radius-pill); border: 1px solid var(--line); --rvds-fill: var(--fill-1); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint);
  -webkit-backdrop-filter: blur(var(--blur-surface)); backdrop-filter: blur(var(--blur-surface));
  color: var(--mut); font-family: inherit; font-size: var(--text-135); font-weight: var(--weight-medium); line-height: normal; cursor: pointer;
  transition: --rvds-fill var(--duration-instant), border-color var(--duration-instant), color var(--duration-instant);
}
.rvr-chip:hover { border-color: var(--line-2); color: var(--fg); }
.rvr-chip[aria-pressed="true"] { --rvds-fill: var(--state-surface); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint); border-color: var(--state-border); color: var(--state-ink); }
.rvr-chip__n { color: var(--mut-2); font-size: var(--text-12); line-height: normal; }


/* Leerzustand des Produktrasters nach dem Filtern: EmptyState des Systems
   (div.rvds-empty-state.rvr-empty). [hidden] muss das display:flex der Komponente schlagen. */
.rvds-empty-state.rvr-empty[hidden] { display: none; }
.rvr-empty[hidden] { display: none; }

/* Rückmeldung der VIN-Prüfung und «Im Warenkorb» (#rvrToast). */
.rvr-toast {
  position: fixed; right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom)); z-index: 70;
  max-width: min(var(--measure-toast), calc(100% - 2 * var(--gutter)));
  display: grid; gap: var(--space-3); justify-items: start;
  padding: var(--space-6) var(--space-7); border-radius: var(--radius-lg); border: 1px solid var(--success-border);
  background: var(--menu-bg); color: var(--fg); box-shadow: var(--shadow-menu);
  font-size: var(--text-14); line-height: var(--leading-normal);
  -webkit-backdrop-filter: blur(var(--blur-menu)); backdrop-filter: blur(var(--blur-menu));
}
.rvr-toast[hidden] { display: none; }
.rvr-toast strong { color: var(--fg); font-weight: var(--weight-semibold); }
.rvr-toast__name { color: var(--mut); font-size: var(--text-13); }
.rvr-toast .rvds-button { margin-top: var(--space-2); min-height: 44px; color: var(--fg); }

/* ─── 6. Produktkarten, CtaPanel, Brotkrumen, Seitentitel ───────────────── */
/* VORSCHLAG Komponente: ProductCard */
.rvr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--grid-gap); }
.rvr-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--card-padding); border-radius: var(--radius-lg);
  --rvds-fill: var(--surface-card); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(var(--blur-surface)); backdrop-filter: blur(var(--blur-surface));
  transition: --rvds-fill var(--duration-card) var(--ease), border-color var(--duration-card) var(--ease);
}
.rvr-card:hover { --rvds-fill: var(--surface-card-hover); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint); border-color: var(--line-2); }
.rvr-card[hidden] { display: none; }
.rvr-media { position: relative; overflow: hidden; border-radius: var(--radius-md); background: transparent; aspect-ratio: 1 / 1; }
.rvr-media img, .rvr-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(var(--media-brightness));
  transition: transform var(--duration-image) var(--ease), filter var(--duration-base) var(--ease);
}
.rvr-card__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); filter: brightness(var(--media-brightness)); transition: transform var(--duration-image) var(--ease); }
.rvr-card:hover .rvr-media img, .rvr-card:hover .rvr-card__img { transform: scale(var(--hover-zoom)); }
.rvr-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rvr-card__body { display: grid; gap: var(--space-3); padding: 0 var(--space-2); flex: 1 1 auto; align-content: start; }
.rvr-card__title { font-size: var(--text-155); line-height: var(--leading-snug); font-weight: var(--weight-semibold); color: var(--fg); }
.rvr-card__title a { color: inherit; }
.rvr-card__fit { font-size: var(--text-13); color: var(--mut-2); }
.rvr-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 0 var(--space-2) var(--space-2); }
.rvr-card__foot .rvds-button { position: relative; z-index: 1; }
/* Nach dem Hinzufügen hängt das Warenkorb-Skript von WooCommerce einen Link
   «Warenkorb anzeigen» an den Knopf. Die Rückmeldung gibt hier der
   Schnell-Warenkorb; der Link würde die Kartenzeile umbrechen. Einzige Regel
   auf eine WooCommerce-Klasse in dieser Datei, ohne Gegenstück im System. */
.rvr-card .added_to_cart { display: none; }
.rvr-price { color: var(--fg); font-size: var(--text-19); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.rvr-price small { font-size: var(--text-13); font-weight: var(--weight-medium); color: var(--mut-2); margin-left: 2px; }

/* SONDERFORM Tag (tone caption): rvds-tag--caption ist 10px statt 12px, ohne Punkt;
   bleibt für das Kartenbild der Startseite.
   Caption-Chip über dem Foto (Tag tone caption): Glas, in beiden Designs
   dunkel; Grund kräftiger als --caption-bg für sicheren Kontrast.
   Schrift --tooltip-fg (in beiden Designs hell): mit --caption-fg stand im hellen
   Design dunkle Schrift auf dunklem Grund. */
.rvr-caption {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); background: rgba(8, 8, 8, 0.72); color: var(--tooltip-fg); border: 1px solid var(--caption-line);
  -webkit-backdrop-filter: var(--caption-backdrop); backdrop-filter: var(--caption-backdrop);
  font-size: var(--text-12); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tag);
}
/* Hell: weisser Chip mit schwarzer Schrift. */
[data-theme="light"] .rvr-caption { background: var(--bg); color: var(--fg); border-color: var(--line-2); }
.rvr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mut-2); flex: 0 0 auto; }
.rvr-dot--ok { background: var(--success); }
.rvr-dot--info { background: var(--hue-135); }

/* SONDERFORM CtaPanel (Beratung): rvds-cta-panel ist zentriert mit grossem Titel und
   anderem Grund; bleibt, weil Startseite, Kategorie und Suche unverändert bleiben. */
.rvr-cta {
  display: grid; gap: var(--space-9); align-items: center; padding: var(--space-12);
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-panel); box-shadow: var(--shadow-hairline-top);
}
@media (min-width: 900px) { .rvr-cta { grid-template-columns: 1fr auto; padding: var(--space-13); } }
.rvr-cta h2 { font-weight: var(--weight-semibold); font-size: var(--text-cta); letter-spacing: var(--tracking-title); line-height: var(--leading-snug); }
.rvr-cta p { margin-top: var(--space-5); max-width: var(--measure-lead); }
@media (max-width: 640px) { .rvr-cta { padding: var(--space-9) var(--card-padding); } }

/* SONDERFORM Breadcrumb (Kategorie): rvds-breadcrumb zeigt die aktuelle Seite in --mut
   statt Schriftfarbe und 6px Abstand; bleibt für die Kategorie. Seitentitel (Kategorie, Suche). */
/* Breadcrumb der Kategorie: .rvds-breadcrumb des Systems, hier nur der Abstand
   darunter. Die Grundregel der Bausteine («a» erbt) wäre stärker als die Farbe
   des Systems, darum die Linkfarbe noch einmal. */
.rvr-crumbs { margin-bottom: var(--space-9); }
body.rvr .rvr-main .rvr-crumbs a.rvds-breadcrumb__link { color: var(--mut-2); }
.rvr-page-title { font-size: var(--text-page-title); letter-spacing: var(--tracking-title); line-height: var(--leading-tight); font-weight: var(--weight-bold); }
body.rvr .rvr-head .rvr-page-title { font-size: var(--text-section); }
@media (max-width: 767px) { body.rvr .rvr-head .rvr-page-title { font-size: var(--text-page-title); } }
.rvr-cat-desc { max-width: var(--measure-lead); margin: calc(-1 * var(--space-8)) 0 var(--space-12); }

/* ─── 7. Footer ─────────────────────────────────────────────────────────── */
/* Footer des Systems (.rvds-footer, ds.css, mit --spread und __stack). Hier nur,
   was der Shop dazu hat: Logo-Link, Bewertung, die Zahlungsarten und der Link
   im Copyright. Den Fokus seiner Links zeichnet das System. */
.rvr-footer__logo { display: block; max-width: 100%; }
.rvr-footer .rvr-rating { display: inline-flex; }
.rvds-footer__meta a { color: inherit; }
@media (hover: hover) { .rvds-footer__meta a:hover { color: var(--gold); } }
.rvr-pay { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* Alle Zahlungslogos gleich geschnitten und ohne Rahmen:
   die Dateien bringen eigene, unterschiedliche Eckradien mit, darum schneidet
   ein gemeinsamer Rahmen mit overflow: hidden alle auf denselben Radius. */
.rvr-pay__svg, .rvr-pay img { display: block; height: 26px; width: auto; overflow: hidden; border: 0; }
.rvr-pay__svg svg { display: block; height: 100%; width: auto; }
/* Zahlungslogos brauchen ihren hellen Grund (Ausnahme von der Token-Regel). */
.rvr-pay img { background: #fff; }

/* ─── 8. Bewegung ───────────────────────────────────────────────────────── */
/* VORSCHLAG Bewegung: Reveal aus Opacity, Blur und Scale, ohne Y-Versatz
   Einmal pro Block, in fester Zeit statt am Scrollrad. Der
   Ausgangszustand kommt nur vom Skript und nur für Blöcke unterhalb des
   Bildes; ohne Skript oder bei reduzierter Bewegung steht alles einfach da. */
.rvr-reveal { transition: opacity var(--duration-reveal) var(--ease), filter var(--duration-reveal) var(--ease), transform var(--duration-reveal) var(--ease); }
.rvr-reveal.is-pending { opacity: 0; filter: blur(6px); transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) { .rvr-reveal, .rvr-reveal.is-pending { transition: none; opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rvr-enter { from { opacity: 0; filter: blur(6px); transform: scale(0.985); } }
  /* Beim Laden: Hero und Brotkrumen setzen sich ruhig und gestaffelt.
     backwards statt both: mit forwards bliebe die filter-Animation nach dem Ende
     aktiv, Safari macht den Block zur eigenen Ebene, und die Glasknöpfe darin
     sehen das Foto nicht mehr (kein Blur auf dem iPhone). Der Endzustand ist
     der normale Zustand, optisch ändert sich nichts. */
  .rvr-hero__inner > *, .rvr-crumbs { animation: rvr-enter 1100ms var(--ease) backwards; }
  .rvr-hero__inner > :nth-child(2) { animation-delay: 90ms; }
  .rvr-hero__inner > :nth-child(3) { animation-delay: 180ms; }
  .rvr-hero__inner > :nth-child(4) { animation-delay: 260ms; }
  .rvr-hero__inner > :nth-child(5) { animation-delay: 330ms; }
}

/* ─── 9. Toasts ─────────────────────────────────────────────────────────── */
/* Toast und ToastStack des Systems (rvds-toast, rvds-toast-stack--end). Hier nur
   die Lage, die das System nicht kennt:
   - höchstens eine Meldung zugleich,
   - ein Knopf in der Meldung («Warenkorb anzeigen») steht auf eigener Zeile,
   - ABMACHUNG für alle Seiten: auf dem Handy (bis 899px) steht der Stapel über
     einer festen Leiste, wenn der body sie meldet:
       body.rvt-hat-stickybar  Seite mit StickyBar (Produktseite, Warenkorb)
       body.rvt-hat-tabbar     Seite mit TabBar (Konto)
     Die Klasse setzt die Seite selbst (body_class), chrome.css setzt die Lage.
     Gilt auch für den alten Stapel und den Toast der VIN-Prüfung.
     Die Höhe misst assets/js/leiste.js an der echten Leiste (--rvt-leiste am
     body; die StickyBar im Warenkorb hat drei Zeilen). Ohne Skript gilt der Token. */
.rvds-toast-stack > * + * { display: none; }
.rvds-toast__body > .rvds-button { margin-top: var(--space-4); }
@media (max-width: 899px) {
  body.rvt-hat-stickybar :is(.rvds-toast-stack, .rv-toast-stack, .rvr-toast) { bottom: calc(var(--rvt-leiste, var(--sticky-bar-height)) + var(--space-7) + env(safe-area-inset-bottom)); }
  body.rvt-hat-tabbar :is(.rvds-toast-stack, .rv-toast-stack, .rvr-toast) { bottom: calc(var(--rvt-leiste, var(--tabbar-height)) + var(--space-7) + env(safe-area-inset-bottom)); }
}

/* Rückmeldung der VIN-Prüfung (#rvrToast) auf dem Handy über die volle Breite, wie der Stapel. */
@media (max-width: 899px) {
  body.rvr .rvr-toast { left: var(--gutter); right: var(--gutter); width: auto; max-width: none; }
}

/* ─── 10. Schnell-Warenkorb (Drawer) ────────────────────────────────────── */
/* Drawer aus dem System: rechts, volle Höhe, Kopf in --nav-height, Fuss mit
   Zwischensumme und den zwei Wegen; auf dem Handy als BottomSheet von unten.
   Die Seite dahinter friert ein. */
body.rvr .rvr-backdrop--cart { z-index: 60; }
html.rvr-cart-open .rvr-backdrop--cart { opacity: 1; pointer-events: auto; }
html.rvr-cart-open, html.rvr-cart-open body { overflow: hidden; }
body.rvr .rvr-cartdrawer { width: min(420px, 92vw); z-index: 61; }
html.rvr-cart-open .rvr-cartdrawer { transform: none; visibility: visible; }
html:not(.rvr-cart-open) .rvr-cartdrawer { transition: transform var(--duration-exit) var(--ease-exit), visibility 0s linear var(--duration-exit); }
body.rvr .rvr-cartdrawer__body { flex: 1 1 auto; overflow: auto; padding: var(--space-7) var(--gutter); }
body.rvr .rvr-cartdrawer__body[aria-busy="true"] { opacity: .6; }
body.rvr .rvr-cartdrawer__state { color: var(--mut-2); font-size: var(--text-14); }
body.rvr .rvr-cartdrawer__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
body.rvr .rvr-cartdrawer__line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-5); align-items: start; padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
body.rvr .rvr-cartdrawer__line.is-busy { opacity: .5; pointer-events: none; }
body.rvr .rvr-cartdrawer__img { display: block; width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: transparent; border: 1px solid var(--line); }
body.rvr .rvr-cartdrawer__img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--media-brightness)); }
body.rvr .rvr-cartdrawer__main { display: grid; gap: var(--space-4); min-width: 0; }
body.rvr .rvr-cartdrawer__name { color: var(--fg); font-size: var(--text-14); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
body.rvr .rvr-cartdrawer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
body.rvr .rvr-cartdrawer__qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); --rvds-fill: var(--fill-1); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint); -webkit-backdrop-filter: blur(var(--blur-surface)); backdrop-filter: blur(var(--blur-surface)); }
body.rvr .rvr-cartdrawer__qty output { min-width: 24px; text-align: center; color: var(--fg); font-weight: var(--weight-semibold); }
body.rvr .rvr-cartdrawer__qty .rvds-icon-button { border-color: transparent; background: transparent; }
body.rvr .rvr-cartdrawer__price { color: var(--fg); font-size: var(--text-14); white-space: nowrap; }
body.rvr .rvr-cartdrawer__remove:hover { color: var(--danger); }
body.rvr .rvr-cartdrawer__foot { padding: var(--space-7) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: var(--space-5); }
body.rvr .rvr-cartdrawer__foot[hidden] { display: none; }
body.rvr .rvr-cartdrawer__sum { display: flex; justify-content: space-between; align-items: baseline; color: var(--fg); font-size: var(--text-16); }
body.rvr .rvr-cartdrawer__sum strong { font-size: var(--text-18); }
body.rvr .rvr-cartdrawer__note { margin: calc(-1 * var(--space-4)) 0 0; font-size: var(--text-12); color: var(--mut-2); }
body.rvr .rvr-cartdrawer__empty { display: grid; justify-items: center; gap: var(--space-6); padding: var(--space-13) 0; text-align: center; color: var(--mut-2); }
body.rvr .rvr-cartdrawer__empty strong { color: var(--fg); }
@media (max-width: 640px) {
  body.rvr .rvr-cartdrawer { top: auto; left: 0; right: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--line);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; transform: translateY(100%); }
  html.rvr-cart-open body.rvr .rvr-cartdrawer { transform: none; }
  body.rvr .rvr-cartdrawer .rvr-drawer__head { height: 56px; }
}

/* ─── 11. Fortschritt ─────────────────────────────────────────────────────
   Keine eigenen Regeln: Warenkorb und Kasse setzen rvds-steps des Systems. */

/* ─── 12. Handy: Trefferflächen und Filterzeile ─────────────────────────── */
/* Filterzeile auf dem Handy: die VIN-Karte bleibt so hoch wie das Select
   «Modell» daneben (--field-height), nicht höher. */
/* Safari auf dem iPhone zoomt in Felder unter 16px hinein: auf schmalen
   Geräten tragen die Felder des Kopfs darum 16px. */
@media (max-width: 768px) {
  body.rvr :is(.rvr-vin-card input, .rvr-fit-select) { font-size: 16px; }
  /* einzige Abweichung vom Select des Systems (14px): Zoom-Schutz auf dem iPhone */
}
@media (max-width: 640px) {
  body.rvr .rvr-card__title a { display: block; padding-block: 2px; }
  body.rvr .rvr-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ─── 13. Rückfallvorlage ───────────────────────────────────────────────── */
/* Section, Container, SectionHead, List, Pagination des Systems; hier nur die
   Lesebreite (--measure-body) und die Abstände dazwischen. */
.rvt-index :is(.rvt-index__content, .rvt-index__list) { max-width: var(--measure-body); }
.rvt-index__content > * + * { margin-top: var(--space-6); }
.rvt-index__pages { margin-top: var(--space-9); }

/* ─── 14. Titelmasse ───────────────────────────────────────────────────── */
/* h1 mit Zeilenhöhe 1.14 und Laufweite -0.02em, h2 mit Zeilenhöhe 1.2; das
   Bild der Startseite hängt daran und bleibt so. VORSCHLAG: als
   Titel-Zeilenhöhe ins System (dort --leading-tight 1.05,
   --tracking-title -0.03em). */
body.rvr .rvr-hero h1, body.rvr .rvr-page-title { line-height: 1.14; letter-spacing: -0.02em; }

/* VORSCHLAG Hero auf dem Handy: grosser Titel, Hero so kraftvoll wie auf dem
   Desktop. Titel so gross, dass das längste Wort
   («Spezialwerkzeug», gemessen 7.55 × Schriftgrösse) gerade noch in eine
   Zeile passt: 360 rund 44px, 390 rund 48px, 430 rund 53px, nie unter 40.
   Zeilenhöhe und Laufweite wie auf dem Desktop. Der Hero füllt den ersten
   Bildschirm, der Inhalt sitzt unten, das Foto bleibt oben frei, darunter
   folgt ohne Leerfläche die Produktliste. Desktop unverändert. */
@media (max-width: 640px) {
  body.rvr .rvr-hero h1 { font-size: clamp(40px, calc((100vw - 2 * var(--gutter)) / 7.6), 56px); hyphens: manual; overflow-wrap: normal; }
  .rvr-hero__inner {
    min-height: 100svh; align-content: end;
    padding-top: calc(var(--nav-height) + var(--space-12)); padding-bottom: var(--space-12);
  }
}
body.rvr .rvr-main h2 { line-height: 1.2; }
/* Abstand zwischen den Abschnitten der Startseite, Kategorie und Suche. */
.rvr-main > * + * { margin-top: var(--space-12); }
/* Fettschrift in den Bausteinen folgt dem Text (dunkel), im hellen Design in
   Schriftfarbe. */
body.rvr .rvr-main :is(strong, b) { color: inherit; }
html[data-theme="light"] body.rvr .rvr-main :is(strong, b):not([data-theme="dark"] *) { color: var(--fg); }
/* Diese Bausteine rechnen ihren Rand zur Höhe dazu (content-box). */
.rvr-caption, .rvr-pay img, .rvr-pay__svg svg, .rvr-rating, .rvr-drawer, .rvr-drawer__head { box-sizing: content-box; }
/* Eckradius aller Zahlungslogos, Bild wie SVG gleich. */
.rvr-pay img, .rvr-pay__svg { border-radius: var(--radius-lg); }

/* ─── 15. Fremde Meldung: Wordfence-Anmeldung ───────────────────────────── */
/* Wordfence (login-security, login.js) setzt Fehler der Anmeldung als
   div.woocommerce.wfls-login-message > ul[role=alert] > li vor <main>; das
   Markup gehört dem Plugin. Lage wie der Seiteninhalt, Aussehen wie Alert danger
   des Systems. VORSCHLAG DS-LUECKEN: die Werte stehen hier, weil das fremde
   Markup die rvds-alert-Klassen nicht tragen kann. Leer (Fehler schon als Toast
   eingesammelt) zeigt es nichts. */
.wp-site-blocks > .wfls-login-message {
  width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin: var(--space-9) auto 0;
}
@media (min-width: 1200px) { .wp-site-blocks > .wfls-login-message { width: var(--container-width-lg); } }
.wfls-login-message:not(:has(li)) { display: none; }
.wfls-login-message > ul[role="alert"] {
  box-sizing: border-box; max-width: var(--measure-alert); margin: 0; padding: 14px 16px; list-style: none;
  border-radius: var(--radius-lg); border: 1px solid var(--danger-border); background: var(--danger-surface);
  font-size: var(--text-13); line-height: var(--leading-relaxed); color: var(--mut);
}
.wfls-login-message > ul[role="alert"] > li { margin: 0; }
.wfls-login-message > ul[role="alert"] > li + li { margin-top: var(--space-2); }
.wfls-login-message a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

/* ─── 16. Fokus für die Tastatur ────────────────────────────────────────── */
/* 0.14.0 «focus is drawn for the keyboard only»: --focus-glow statt des Rahmens
   des Browsers an den eigenen Bausteinen des Shops, an Textlinks im Inhalt und
   am Sprunglink von WordPress. Die Bausteine des Systems zeichnen ihn selbst. */
body.rvr :is(.rvr-chip, .rvt-toc__kopf, .rvr-main a:not(.rvds-button):not(.rvds-icon-button),.rvr-vin-card .rvds-button, .rvt-p2-tip__btn, .rvt-p2-gallery__track, .skip-link):focus-visible {
  outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-md);
}
body.rvr .rvr-chip:focus-visible { border-radius: var(--radius-pill); }
/* Produktkarte: der Link deckt die ganze Karte ab (::after), der Glow sitzt an der Karte. */
.rvr-card__link:focus-visible { outline: none; }
.rvr-card:has(.rvr-card__link:focus-visible) { box-shadow: var(--focus-glow); }
/* Mengenfeld im Stepper: der Glow sitzt am ganzen Stepper. */
.rvds-stepper:has(.rvds-stepper__value:focus-visible) { box-shadow: var(--focus-glow); }