/*
 * Theme Revoltaris, Inhaltsseiten und Blog: AGB, Datenschutz, Impressum,
 * Über uns, Rückgabe (mit Rückgabeformular), jede weitere Seite, Beiträge,
 * Beitragsübersichten (Archiv, Suche). Markup: inc/seiten/Inhalt.php und
 * der Seiteninhalt aus der Datenbank (Klassen rv-page, agb-*, rvab-*, rg-*,
 * rvst-* aus dem Shortcode des Plugins, rv-artikel/rv-cta im Blog).
 *
 * Die Bausteine sind Komponenten des Systems (ds.css, Stand 2026.10.02):
 * Section, Container, SectionHead, Alert, DescriptionList, CtaPanel,
 * StatTile, MediaFrame, Table, FaqItem, Pagination, EmptyState, Field,
 * Input, Textarea, Checkbox (Kommentare), Button, IconButton, IconTile.
 * Diese Datei ordnet nur an: Raster, Reihenfolge, Abstände zwischen den
 * Komponenten, aus Tokens. Werte der Komponenten stehen hier nicht.
 *
 * Ausnahmen, je mit Grund markiert:
 *   - VORSCHLAG DS-LUECKEN: was das System nicht hat (Lesetext, Zitat,
 *     Inhaltskarte, Anker-Link), siehe
 *     infra/initiativen/shop-eigenes-theme/DS-LUECKEN.md.
 *   - Inhaltsverzeichnis, goldene Ziffern: DS-NACHZIEHEN Nr. 16.
 *
 * Abstand unter der Navbar: chrome.css (.wp-site-blocks), hier nicht noch
 * einmal. Ausnahme ist die allgemeine Suche (Body-Klasse search), dort setzt
 * chrome.css keinen; die Liste rechnet ihn selbst.
 *
 * Spezifität: chrome.css setzt in .rvr-main p und li auf color: inherit und
 * Links auf inherit (bis 0,4,2). Darum tragen Farben hier den Container
 * (.rvt-seite, .rvt-prosa), Absätze erben; Links und Absätze mit eigener
 * Farbe beginnen mit dem Präfix .rvr-main.rvt-inhalt-main.
 *
 * Breakpoints des Systems: sm 640, md 900, lg 1200 (Medienabfragen können
 * keine Variablen lesen).
 *
 * Aufbau:
 *   1. Grundlage: Seitentitel, Lead, Metazeile, Links
 *   2. Lesetext (Blog, weitere Seiten)
 *   3. Rechtsseiten: Bänder, Kopf, Raster, Inhaltsverzeichnis, Abschnitte
 *   4. Rückgabe: Ablauf, Formular
 *   5. Über uns
 *   6. Blog: Beitragskopf, Karten, Seitenzahlen, Kommentare
 */

/* ─── 1. Grundlage ──────────────────────────────────────────────────────── */

.rvt-seite, .rvt-liste { color: var(--text-body); font-family: var(--font-sans); }

.rvt-seite__titel {
  margin: 0;
  font-size: var(--text-page-title); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-hero); line-height: var(--leading-tight);
  color: var(--text-heading);
}
.rvr-main.rvt-inhalt-main p.rvt-seite__lead {
  max-width: var(--measure-lead); margin: var(--space-7) 0 0;
  font-size: var(--text-17); line-height: var(--leading-relaxed); color: var(--text-body);
}
.rvr-main.rvt-inhalt-main p.rvt-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  margin: var(--space-6) 0 0; font-size: var(--text-13); line-height: var(--leading-normal); color: var(--text-secondary);
}
.rvt-meta__trenner { color: var(--text-secondary); }

/* Links im Fliesstext: Schriftfarbe mit Haarlinie darunter, Gold beim
   Überfahren. Links in Komponenten und Verzeichnis sind ausgenommen. */
body .rvr-main.rvt-inhalt-main :is(.rvt-seite, .rvt-liste) a:not([class*="rvds-"]):not([class*="rvt-"]):not(.agb-anchor) {
  color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-3);
  text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere;
  transition: color var(--duration-base), text-decoration-color var(--duration-base);
}
body .rvr-main.rvt-inhalt-main :is(.rvt-seite, .rvt-liste) a:not([class*="rvds-"]):not([class*="rvt-"]):not(.agb-anchor):hover {
  color: var(--text-link-hover); text-decoration-color: var(--gold-a60);
}
body .rvr-main.rvt-inhalt-main :is(.rvt-seite, .rvt-liste) p.rvt-meta a:not([class*="rvds-"]):not([class*="rvt-"]):not(.agb-anchor) { color: var(--text-secondary); text-decoration: none; }

/* Fotos: Helligkeit je Design (VORSCHLAG-Token aus chrome.css). */
.rvt-seite img, .rvt-liste img { filter: brightness(var(--media-brightness, 1)); }

/* ─── 2. Lesetext ───────────────────────────────────────────────────────── */

/* VORSCHLAG DS-LUECKEN: Lesetext. Das System hat Typo-Tokens, aber keine
   Regel für einen Fliesstext aus dem Editor (Absatz, Listen, Zitat,
   Trennlinie, Knopfzeile). Lesebreite --measure-body. */
.rvt-prosa {
  max-width: var(--measure-body);
  font-size: var(--text-16); line-height: var(--leading-loose); color: var(--text-body);
}
.rvt-seite--prosa .rvt-seite__titel + .rvt-prosa { margin-top: var(--space-12); }
.rvt-prosa :where(p, ul, ol, figure, blockquote, .wp-block-buttons, .rv-cta, .rvds-table) { margin: 0 0 var(--space-7); }
.rvt-prosa :where(h2) {
  margin: var(--space-13) 0 var(--space-6); scroll-margin-top: calc(var(--nav-height) + var(--space-5));
  font-size: var(--text-24); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug);
}
.rvt-prosa :where(h3) {
  margin: var(--space-11) 0 var(--space-4);
  font-size: var(--text-19); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-heading);
}
.rvt-prosa :where(h4) { margin: var(--space-9) 0 var(--space-3); font-size: var(--text-16); font-weight: var(--weight-semibold); color: var(--text-heading); }
.rvt-prosa :where(ul, ol) { padding-left: var(--space-8); }
.rvt-prosa :where(li) { margin: var(--space-2) 0; }
.rvt-prosa :where(li)::marker { color: var(--text-secondary); }
.rvt-prosa :where(strong, b) { font-weight: var(--weight-semibold); color: var(--fg); }
.rvt-prosa :where(hr) { margin: var(--space-13) 0; border: 0; border-top: 1px solid var(--line); }
.rvt-prosa :where(figure > img, p > img) { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.rvt-prosa :where(figcaption) { margin-top: var(--space-4); font-size: var(--text-13); color: var(--text-secondary); }
/* VORSCHLAG DS-LUECKEN: Zitat. Kein Randakzent (die zwei Randakzente des Systems sind vergeben). */
.rvt-prosa :where(blockquote) { padding: 0 var(--space-8); font-size: var(--text-18); line-height: var(--leading-relaxed); color: var(--fg); }
.rvt-prosa :where(.wp-block-buttons) { display: flex; flex-wrap: wrap; gap: var(--space-5); }
/* Häufige Fragen als FaqItem-Liste, oben mit derselben Haarlinie geschlossen. */
.rvt-prosa .rv-faq { margin: 0 0 var(--space-7); border-top: 1px solid var(--line); }

/* Produkthinweis im Beitrag (rv-cta): Inhaltskarte, Foto innen im Abstand
   der Karte, Knopf in der Goldstufe. VORSCHLAG DS-LUECKEN: Inhaltskarte. */
.rvt-prosa .rv-cta {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7);
  padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius-lg);
  --rvds-fill: var(--surface-card); 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: --rvds-fill var(--duration-card) var(--ease), border-color var(--duration-card) var(--ease);
}
.rvt-prosa .rv-cta:hover { --rvds-fill: var(--surface-card-hover); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint); border-color: var(--line-2); }
@media (min-width: 640px) {
  .rvt-prosa .rv-cta { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
}
.rvt-prosa .rv-cta__bild { display: block; overflow: hidden; border-radius: var(--radius-md); }
.rvt-prosa .rv-cta__bild img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--duration-image) var(--ease); }
.rvt-prosa .rv-cta:hover .rv-cta__bild img { transform: scale(var(--hover-zoom, 1.03)); }
.rvt-prosa .rv-cta__text { display: grid; gap: var(--space-3); padding: var(--space-3); }
.rvt-prosa .rv-cta__label { font-size: var(--text-13); color: var(--text-secondary); line-height: var(--leading-normal); }
.rvt-prosa .rv-cta__titel { font-size: var(--text-17); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-heading); }
.rvt-prosa .rv-cta__zeile { font-size: var(--text-14); line-height: var(--leading-relaxed); color: var(--text-body); }
.rvt-prosa .rv-cta__aktion { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); }

/* ─── 3. Rechtsseiten (AGB, Datenschutz, Impressum; Rückgabe einspaltig) ──── */

/* Bänder: Kopf und Text sind zwei Sections auf dem Seitengrund; zwischen
   ihnen kein doppelter Abstand. */
.rvt-seite .rvt-recht-kopf { padding-bottom: 0; }
.rvt-seite .rvt-recht-text { padding-top: var(--space-13); }

/* Kopf: Titel, Lead, darunter Stand und Firmenzeile als Metazeile. */
.rvt-seite .rv-hero { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: var(--space-3) var(--space-5); }
.rvt-seite .rv-hero-title {
  order: 1; grid-column: 1 / -1; margin: 0;
  font-size: var(--text-page-title); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-hero); line-height: var(--leading-tight); color: var(--text-heading);
}
.rvr-main.rvt-inhalt-main .rv-hero p.rv-hero-sub {
  order: 2; grid-column: 1 / -1; max-width: var(--measure-lead); margin: var(--space-4) 0 var(--space-3);
  font-size: var(--text-17); line-height: var(--leading-relaxed); color: var(--text-body);
}
.rvt-seite .rv-hero .rv-chip { order: 3; font-size: var(--text-13); line-height: var(--leading-normal); color: var(--text-secondary); }
.rvt-seite .rv-hero .rv-chip::after { content: "·"; margin-left: var(--space-5); }
.rvt-seite .rv-hero .agb-meta { order: 4; font-size: var(--text-13); line-height: var(--leading-normal); color: var(--text-secondary); }
.rvt-seite .agb-meta strong { font-weight: var(--weight-semibold); color: var(--fg); }
.rvt-seite .agb-meta-sep { margin: 0 var(--space-3); }
body .rvr-main.rvt-inhalt-main .rvt-seite .agb-meta a:not([class*="rvds-"]):not([class*="rvt-"]):not(.agb-anchor) { color: var(--text-secondary); text-decoration: none; }
@media (max-width: 639px) {
  .rvt-seite .rv-hero { grid-template-columns: minmax(0, 1fr); }
  .rvt-seite .rv-hero .rv-chip::after { content: none; }
}

/* Raster: Verzeichnis links, Text mit Lesebreite rechts. Auf dem Handy steht
   das Verzeichnis eingeklappt über dem Text. Grid-Areas, egal ob das alte
   aside vor oder nach dem Text stand. */
.rvt-seite .agb-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "text"; gap: var(--space-9); }
.rvt-seite .agb-layout > .rvt-toc { grid-area: toc; }
.rvt-seite .agb-layout > .agb-content { grid-area: text; }
@media (min-width: 900px) {
  .rvt-seite .agb-layout {
    grid-template-columns: calc(2.5 * var(--space-15)) minmax(0, var(--measure-body));
    grid-template-areas: "toc text"; gap: var(--space-13); align-items: start;
  }
}
.rvt-seite .agb-content { min-width: 0; max-width: var(--measure-body); font-size: var(--text-16); line-height: var(--leading-loose); color: var(--text-body); }

/* Inhaltsverzeichnis (DS-NACHZIEHEN Nr. 16): bleibt stehen, Ziffern in Gold.
   Die Liste ist .rvds-toc des Systems: Schiene links, die Goldmarke wandert
   zum Abschnitt, der gerade gelesen wird (ds-interactions.js). */
.rvt-toc { font-size: var(--text-14); }
.rvt-toc__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: var(--control-height); padding: 0 var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-lg); --rvds-fill: var(--surface-card); 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));
  font-size: var(--text-15); font-weight: var(--weight-semibold); color: var(--fg); cursor: pointer; list-style: none;
}
.rvt-toc__kopf::-webkit-details-marker { display: none; }
.rvt-toc__pfeil { color: var(--text-secondary); transition: transform var(--duration-icon) var(--ease); }
.rvt-toc__klapp[open] .rvt-toc__pfeil { transform: rotate(180deg); }
.rvt-toc__liste { margin-top: var(--space-3); }
/* Ziffer und Text nebeneinander; Farbe, Grösse und Marke aus .rvds-toc__link.
   Die Grundregel der Bausteine («a» in --mut) wäre stärker, darum hier die
   Farben des Systems noch einmal. */
.rvt-toc__link { display: flex; align-items: baseline; gap: var(--space-4); }
body .rvr-main.rvt-inhalt-main a.rvds-toc__link { color: var(--mut-2); }
body .rvr-main.rvt-inhalt-main a.rvds-toc__link[aria-current="true"] { color: var(--fg); }
@media (hover: hover) { body .rvr-main.rvt-inhalt-main a.rvds-toc__link:hover { color: var(--fg); } }
.rvt-toc__nr { flex: none; min-width: 2ch; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--gold); }
.rvt-toc__quer { display: grid; gap: 2px; margin: var(--space-6) 0 0; padding: var(--space-5) 0 0; list-style: none; border-top: 1px solid var(--line); }
body .rvr-main.rvt-inhalt-main .rvt-toc a.rvt-toc__quer-link {
  display: flex; align-items: center; min-height: var(--control-height-sm); padding: 0 var(--space-4);
  font-size: var(--text-13); color: var(--text-secondary); text-decoration: none;
}
body .rvr-main.rvt-inhalt-main .rvt-toc a.rvt-toc__quer-link:hover { color: var(--fg); }
@media (max-width: 899px) {
  .rvt-toc__klapp[open] .rvt-toc__liste { padding-bottom: var(--space-3); }
  .rvt-toc__link { min-height: var(--touch-target); align-items: center; }
  body .rvr-main.rvt-inhalt-main .rvt-toc a.rvt-toc__quer-link { min-height: var(--control-height); }
}
@media (min-width: 900px) {
  .rvt-toc {
    position: sticky; top: calc(var(--nav-height) + var(--space-9));
    max-height: calc(100vh - var(--nav-height) - 2 * var(--space-9)); overflow-y: auto; overscroll-behavior: contain;
  }
  /* Auf dem Desktop ist der Kopf nur Titel: kein Rahmen, kein Pfeil, nicht klickbar (inhalt.js). */
  .rvt-toc__kopf { min-height: 0; padding: 0 var(--space-4) var(--space-3); border: 0; border-radius: 0; background: none; cursor: default; }
  .rvt-toc__pfeil { display: none; }
}

/* Abschnitte: Abstand statt Linie, Sprungziel landet unter der Navbar. */
.rvt-seite .agb-section { padding-top: var(--space-12); scroll-margin-top: calc(var(--nav-height) + var(--space-5)); }
.rvt-seite .agb-content > .agb-section:first-child,
.rvt-seite .agb-content > .rvt-hinweis:first-child + .agb-section { padding-top: 0; }
.rvt-seite .agb-section > :last-child { margin-bottom: 0; }
.rvt-seite .agb-content h2 {
  display: flex; align-items: baseline; gap: var(--space-5); margin: 0 0 var(--space-7);
  font-size: var(--text-24); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug);
}
/* Ziffer vor der Überschrift in der Schrift der Überschrift: Goldschrift ist
   Knöpfen und StatTile vorbehalten; die goldene Ziffer bleibt dem
   Inhaltsverzeichnis (DS-NACHZIEHEN Nr. 16). */
.rvt-seite .agb-num { flex: none; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
/* VORSCHLAG DS-LUECKEN: Anker-Link. Erscheint beim Überfahren des ganzen
   Abschnitts, bei Fokus und am angesprungenen Abschnitt, sonst nicht. Grau,
   Gold beim Überfahren. Auf
   Geräten ohne Hover ausgeblendet: dort springt das Inhaltsverzeichnis. */
body .rvr-main.rvt-inhalt-main .rvt-seite a.agb-anchor {
  display: inline; margin-left: var(--space-3); font-size: var(--text-16); font-weight: var(--weight-regular);
  color: var(--text-secondary); text-decoration: none; opacity: 0; transition: opacity var(--duration-base), color var(--duration-base);
}
/* Gleiche Vorsilbe wie die Grundregel, sonst gewinnt deren opacity: 0. */
body .rvr-main.rvt-inhalt-main .rvt-seite .agb-section:hover a.agb-anchor,
body .rvr-main.rvt-inhalt-main .rvt-seite .agb-section:target a.agb-anchor,
body .rvr-main.rvt-inhalt-main .rvt-seite .agb-section h2:focus-within a.agb-anchor { opacity: 1; }
body .rvr-main.rvt-inhalt-main .rvt-seite a.agb-anchor:hover,
body .rvr-main.rvt-inhalt-main .rvt-seite a.agb-anchor:focus-visible { color: var(--text-link-hover); }
@media (hover: none) { body .rvr-main.rvt-inhalt-main .rvt-seite a.agb-anchor { display: none; } }
.rvt-seite .agb-content h3:not([class*="rvds-"]) { margin: var(--space-9) 0 var(--space-4); font-size: var(--text-17); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.rvt-seite .agb-section :where(p, ul, ol) { margin: 0 0 var(--space-6); }
.rvt-seite .agb-section :where(ul, ol) { padding-left: var(--space-8); }
.rvt-seite .agb-section :where(li) { margin: var(--space-2) 0; }
.rvt-seite .agb-section :where(li)::marker { color: var(--text-secondary); }
.rvt-seite .agb-content :where(strong) { font-weight: var(--weight-semibold); color: var(--fg); }

/* Hinweise (Alert): Abstand im Textfluss, mehrere Absätze im Text. */
.rvt-seite .rvt-hinweis { margin: var(--space-7) 0; }
.rvt-seite .agb-content > .rvt-hinweis:first-child { margin-top: 0; margin-bottom: var(--space-12); }
.rvt-seite .rvt-hinweis :where(p) { margin: 0; }
.rvt-seite .rvt-hinweis :where(p + p) { margin-top: var(--space-3); }

/* Angaben im Impressum (DescriptionList). */
.rvt-seite .rvt-angaben { margin: 0 0 var(--space-6); }

/* Kontakt am Schluss (CtaPanel), mit Abstand zum letzten Abschnitt. Ohne
   Knopf (Rückgabe) endet das Panel mit dem Text. */
.rvt-seite .rvt-kontakt { margin-top: var(--space-13); }
.rvt-seite .rvt-kontakt .rvds-cta-panel__description:last-child { margin-bottom: 0; }

/* ─── 4. Rückgabe ───────────────────────────────────────────────────────── */

/* Ziffern von Ablauf und Formularschritten: IconTile neutral mit Ziffer,
   in der Grösse der Alert-Kachel. */
.rvt-seite .rvt-ziffer { --rvds-icon-tile-size: 28px; --rvds-icon-tile-radius: var(--radius-sm); font-size: var(--text-13); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.rvt-seite .rg-steps { margin: 0 0 var(--space-7); padding: 0; list-style: none; display: grid; gap: var(--space-7); }
.rvt-seite .rg-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); margin: 0; }
.rvt-seite .rg-steps li > * { grid-column: 2; }
.rvt-seite .rg-steps li > .rvt-ziffer { grid-column: 1; grid-row: 1 / span 3; }
.rvt-seite .rg-steps strong { display: block; margin-bottom: var(--space-1); font-size: var(--text-16); line-height: var(--leading-snug); padding-top: var(--space-1); }
.rvt-seite .rg-form { margin-top: var(--space-9); }

/* Formular des Plugins (Retoure\Formular, Skript retoure.js). Markup und
   Zustandsklassen bleiben: hidden, rvst-invalid, is-ok/is-error/is-neutral,
   is-ziel, is-gefuellt, is-fehler, is-set, is-loading. */
.rvr-main.rvt-inhalt-main .rvst-form [hidden][hidden] { display: none; }
.rvst-form { font-size: var(--text-14); color: var(--text-body); }
.rvst-form .rvst-step { margin: 0 0 var(--space-13); }
.rvst-form .rvst-step-title {
  display: flex; align-items: center; gap: var(--space-5); margin: 0 0 var(--space-5);
  font-size: var(--text-19); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-heading);
}
.rvr-main.rvt-inhalt-main .rvst-form :is(p.rvst-step-text, p.rvst-positionen-hilfe) {
  max-width: var(--measure-lead); margin: 0 0 var(--space-8); font-size: var(--text-14); line-height: var(--leading-relaxed); color: var(--mut);
}
.rvst-form .rvst-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--field-row-gap) var(--space-8); }
@media (min-width: 640px) { .rvst-form .rvst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rvr-main.rvt-inhalt-main .rvst-form .rvst-grid + .rvst-field { margin-top: var(--field-row-gap); }

/* Felder: Field, Input, Select, Textarea, Radio, Checkbox, Alert, List und
   ListRow des Systems, Markup aus dem Plugin. Hier nur Abstände
   zwischen den Komponenten und Breiten. */
.rvr-main.rvt-inhalt-main .rvst-form .rvst-field { margin: 0; }
.rvr-main.rvt-inhalt-main .rvst-form .rvst-step > .rvst-field,
.rvr-main.rvt-inhalt-main .rvst-form .rvst-fieldset { margin: 0 0 var(--field-row-gap); }
.rvst-form .rvst-fieldset { min-width: 0; padding: 0; border: 0; }
.rvst-form .rvst-fieldset > legend { margin-bottom: var(--space-5); padding: 0; }
.rvr-main.rvt-inhalt-main .rvst-form .rvst-consent { margin: var(--space-9) 0 0; }
.rvr-main.rvt-inhalt-main .rvst-form p.rvst-hint { margin: var(--space-5) 0 0; font-size: var(--text-12); line-height: 1.45; color: var(--field-hint); }
/* Fotoflächen tragen noch kein Field: Beschriftung wie rvds-field__label, Stern wie __required. */
.rvst-form .rvst-upload-title { font-size: var(--text-13); font-weight: var(--weight-medium); line-height: var(--leading-normal); color: var(--field-label); }
.rvst-form .rvst-upload .rvst-req { margin-left: var(--space-1); color: var(--field-required); }

/* Positionen der gefundenen Bestellung (List, ListRow): Abstand zum Feld darunter, Breite der Mengenwahl. */
.rvst-form .rvst-positionen { margin: 0 0 var(--field-row-gap); }
.rvst-form .rvst-poslist { margin: 0; padding: 0; list-style: none; }
.rvst-form .rvst-pos-select { width: calc(2 * var(--field-height)); }

/* Rückmeldung der Bestellsuche (Alert): Abstand zum Knopf. */
.rvst-form .rvst-lookup-out { margin: var(--space-6) 0 0; }

/* Fotoflächen. Die gestrichelte Kante ist die des EmptyState: «noch nichts da». */
.rvst-form .rvst-uploads { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-3); }
@media (min-width: 640px) { .rvst-form .rvst-uploads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rvst-form .rvst-upload { display: flex; flex-direction: column; gap: var(--field-gap); min-width: 0; }
.rvst-form .rvst-upload-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.rvst-form .rvst-optional { font-size: var(--text-12); font-weight: var(--weight-regular); color: var(--field-hint); }
.rvst-form .rvst-file {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.rvst-form .rvst-dropzone {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: calc(1.5 * var(--space-15)); padding: var(--space-7); overflow: hidden; cursor: pointer;
  border: 1px dashed var(--line-2); border-radius: var(--radius-lg); background: var(--fill-1);
  transition: border-color var(--duration-base), background var(--duration-base);
}
.rvst-form .rvst-dropzone:hover { border-color: var(--field-border-hover); background: var(--field-bg-hover); }
.rvst-form .rvst-dropzone.is-ziel { border-style: solid; border-color: var(--state-border); background: var(--state-surface); }
.rvst-form .rvst-dropzone.is-gefuellt { border-style: solid; border-color: var(--line); padding: 0; }
.rvst-form .rvst-upload.is-fehler .rvst-dropzone { border-color: var(--field-border-error); }
.rvst-form .rvst-file:focus-visible + .rvst-dropzone { border-color: var(--field-border-focus); box-shadow: var(--focus-glow); }
.rvst-form .rvst-dz-leer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; color: var(--text-secondary); pointer-events: none; }
.rvst-form .rvst-dz-leer svg { width: 28px; height: 28px; opacity: 0.8; }
.rvst-form .rvst-dz-text { font-size: var(--text-14); font-weight: var(--weight-medium); color: var(--fg); }
.rvst-form .rvst-dz-klein { font-size: var(--text-12); color: var(--text-secondary); }
@media (hover: none) { .rvst-form .rvst-dz-klein { display: none; } }
.rvst-form .rvst-dz-bild { display: block; width: 100%; max-height: calc(2 * var(--space-15)); object-fit: cover; }
.rvst-form .rvst-dateizeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rvst-form .rvst-filename { min-width: 0; font-size: var(--text-13); color: var(--text-secondary); overflow-wrap: anywhere; }
.rvst-form .rvst-filename.is-set { color: var(--fg); }
.rvst-form .rvst-upload.is-fehler .rvst-filename { color: var(--field-error); }
.rvst-form .rvst-entfernen {
  min-height: var(--control-height-sm); padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-13); color: var(--mut); text-decoration: underline; text-underline-offset: 2px;
}
.rvst-form .rvst-entfernen:hover { color: var(--fg); }
@media (max-width: 639px) { .rvst-form .rvst-entfernen { min-height: var(--control-height); } }

/* Knöpfe (Klassen aus Inhalt::formular): Reihe mit Abstand, wartend gedämpft. */
.rvr-main.rvt-inhalt-main .rvst-form p.rvst-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-9) 0 0; }
.rvr-main.rvt-inhalt-main .rvst-form p.rvst-actions--suche { margin-top: var(--space-7); }
.rvst-form .rvds-button:is(.is-loading, :disabled) { opacity: 0.5; pointer-events: none; }

/* Rückmeldung nach dem Absenden: Text in Schriftfarbe, die Bedeutung trägt ein Punkt. */
.rvr-main.rvt-inhalt-main .rvst-form p.rvst-result { margin: var(--space-6) 0 0; font-size: var(--text-15); color: var(--fg); }
.rvst-form .rvst-result:is(.is-ok, .is-error)::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-3); vertical-align: 0.1em;
  border-radius: var(--radius-pill); background: var(--success);
}
.rvst-form .rvst-result.is-error::before { background: var(--danger); }

/* Nur für Screenreader, und der Honigtopf (nicht display:none, das überspringen manche Bots). */
.rvst-form .rvst-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rvst-form .rvst-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── 5. Über uns ───────────────────────────────────────────────────────── */

/* Bänder (Section): Einstieg und Zahlen auf dem Seitengrund, Werte auf dem
   Wechselgrund, Team auf dem Seitengrund, Kontakt mit Haarlinie oben. Wo zwei
   Bänder gleichen Grunds aufeinander folgen, entfällt der obere Abstand. */
.rvt-seite .rvab > .rvt-band--zahlen { padding-top: 0; }
.rvt-seite .rvab :is(h1, h2, h3) em { font-style: normal; color: inherit; }

/* Bild und Text nebeneinander, auf dem Handy untereinander. */
.rvt-seite .rvab-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .rvt-seite .rvab-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-14); } }
.rvt-seite .rvab-copy { display: grid; gap: var(--space-7); align-content: center; min-width: 0; }
.rvt-seite .rvab-copy h1 { font-size: var(--text-page-title); font-weight: var(--weight-bold); letter-spacing: var(--tracking-hero); line-height: var(--leading-tight); }
.rvt-seite .rvab-copy h2 { font-size: var(--text-section); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); line-height: var(--leading-snug); }
.rvr-main.rvt-inhalt-main .rvab-copy > p { max-width: var(--measure-lead); font-size: var(--text-165); line-height: var(--leading-relaxed); color: var(--text-body); }
.rvt-seite .rvab-media { min-width: 0; }
.rvt-seite .rvab-media figure { margin: 0; }
.rvt-seite .rvab-media figcaption { margin-top: var(--space-5); font-size: var(--text-13); line-height: var(--leading-normal); color: var(--text-secondary); }

/* Zahlen (StatTile) als Reihe: zwei Spalten auf dem Handy, vier ab md. */
.rvt-seite .rvab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (min-width: 900px) { .rvt-seite .rvab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Werte: SectionHead, darunter die Karten im Raster.
   VORSCHLAG DS-LUECKEN: Inhaltskarte (Fläche, Haarlinie, Schatten und
   Innenabstand der Karten, Indexziffer aus data-n). */
.rvt-seite .rvab-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(2.2 * var(--space-15))), 1fr)); gap: var(--grid-gap); }
.rvt-seite .rvab-value {
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--card-padding);
  border: 1px solid var(--line); border-radius: var(--radius-lg); --rvds-fill: var(--surface-card); 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: --rvds-fill var(--duration-card) var(--ease), border-color var(--duration-card) var(--ease);
}
.rvt-seite .rvab-value:hover { --rvds-fill: var(--surface-card-hover); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint); border-color: var(--line-2); }
.rvt-seite .rvab-value::before {
  content: attr(data-n); font-size: var(--text-11); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.rvt-seite .rvab-value h3 { font-size: var(--text-16); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.rvr-main.rvt-inhalt-main .rvab-value p { font-size: var(--text-13); line-height: var(--leading-relaxed); color: var(--text-body); }

/* Kontakt «Sprich mit der Werkstatt»: SectionHead, darunter die vier Angaben
   als List-Karten mit ListRow im Raster, darunter der eine Knopf. */
.rvt-werkstatt__angaben {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap); max-width: var(--measure-panel); margin: 0; padding: 0; list-style: none;
}
/* Zwei mal zwei ab sm: in vier Spalten brechen die Öffnungszeiten um. */
@media (min-width: 640px) { .rvt-werkstatt__angaben { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rvt-werkstatt__angaben > li { margin: 0; }
.rvt-werkstatt__angaben .rvds-list, .rvt-werkstatt__angaben .rvds-list__body { height: 100%; box-sizing: border-box; }
/* Zeile in der Karte; den seitlichen Einzug setzt die Liste selbst (--rvds-list-inset). */
.rvt-werkstatt__angaben .rvds-list-row { flex: 1; align-items: flex-start; }
.rvt-werkstatt__angaben .rvds-list-row__meta { margin: 0 0 var(--space-1); }
.rvt-werkstatt .rvt-zeile { display: block; }
.rvt-werkstatt .rvt-adresse { font-style: normal; }
.rvt-werkstatt__aktion { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-12); }

/* ─── 6. Blog ───────────────────────────────────────────────────────────── */

/* Beitrag: Kopf und Text sind zwei Sections, der Text schliesst ohne Lücke an. */
.rvt-beitrag__kopf { padding-bottom: var(--space-12); }
.rvt-beitrag .rvt-seite--prosa { padding-top: 0; }
.rvt-beitrag__bild { margin-top: var(--space-12); }

/* Übersicht: Kopf, Karten im Raster, das sich selbst umbricht. */
.rvt-liste--suche { padding-top: calc(var(--nav-height) + var(--section-y-first)); }
.rvt-liste__kopf { margin-bottom: var(--space-13); }
.rvt-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(2.8 * var(--space-15))), 1fr)); gap: var(--grid-gap); }
.rvt-liste .rvt-seiten { margin-top: var(--space-13); }

/* VORSCHLAG DS-LUECKEN: Inhaltskarte. Fläche, Haarlinie, Schatten und ein
   Innenabstand (--card-padding) wie jede Karte, Foto innen mit --radius-md.
   Hover hellt auf, kein Versatz. Die ganze Karte ist der Link. */
.rvt-karte {
  position: relative; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0;
  padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius-lg);
  --rvds-fill: var(--surface-card); 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: --rvds-fill var(--duration-card) var(--ease), border-color var(--duration-card) var(--ease);
}
.rvt-karte:hover { --rvds-fill: var(--surface-card-hover); background: linear-gradient(var(--rvds-fill), var(--rvds-fill)) var(--surface-tint); border-color: var(--line-2); }
.rvt-karte__bild { display: block; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 3 / 2; }
.rvt-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-image) var(--ease); }
.rvt-karte:hover .rvt-karte__bild img { transform: scale(var(--hover-zoom, 1.03)); }
.rvt-karte__text { display: grid; gap: var(--space-3); padding: 0 var(--space-2) var(--space-2); }
.rvr-main.rvt-inhalt-main .rvt-karte p.rvt-meta { margin: 0; }
.rvt-karte__titel { font-size: var(--text-17); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
body .rvr-main.rvt-inhalt-main a.rvt-karte__link { color: var(--text-heading); text-decoration: none; }
.rvt-karte__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rvt-karte__link:focus-visible { outline: none; }
.rvt-karte:has(.rvt-karte__link:focus-visible) { border-color: var(--field-border-focus); box-shadow: var(--focus-glow); }
.rvr-main.rvt-inhalt-main .rvt-karte p.rvt-karte__auszug { font-size: var(--text-13); line-height: var(--leading-relaxed); color: var(--text-body); }

/* Kommentare unter dem Beitrag (Kernblöcke von WordPress, Felder als Field). */
.rvt-kommentare { color: var(--text-body); font-size: var(--text-15); }
.rvt-kommentare .rvt-prosa { padding-block: var(--space-12) clamp(var(--section-y), 9vw, var(--section-y-lg)); border-top: 1px solid var(--line); }
.rvt-kommentare :is(.wp-block-comments-title, .comment-reply-title) {
  margin: 0 0 var(--space-8); font-size: var(--text-24); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-heading);
}
.rvt-kommentare .wp-block-comment-template { margin: 0 0 var(--space-12); padding: 0; list-style: none; }
.rvt-kommentar { padding: var(--space-7) 0; border-bottom: 1px solid var(--line); }
.rvt-kommentar__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); font-size: var(--text-14); }
.rvt-kommentar__kopf .wp-block-comment-author-name { font-weight: var(--weight-semibold); color: var(--fg); }
.rvt-kommentar__kopf .wp-block-comment-date { font-size: var(--text-13); color: var(--text-secondary); }
.rvt-kommentar .wp-block-comment-content { margin-top: var(--space-3); }
.rvt-kommentare .comment-form { display: grid; gap: var(--field-row-gap); max-width: var(--measure-panel); }
.rvr-main.rvt-inhalt-main .rvt-kommentare .comment-form > p { margin: 0; font-size: var(--text-13); color: var(--text-secondary); }
/* Knöpfe der Kommentare sind Buttons des Systems (Inhalt.php): «Antworten»
   unter jedem Kommentar, Blättern, «Antworten abbrechen» neben dem Titel des
   Formulars. Hier nur ihre Lage. */
.rvt-kommentar .wp-block-comment-reply-link { margin-top: var(--space-5); }
.rvt-kommentare .wp-block-comments-pagination { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-12); }
.rvt-kommentare .comment-reply-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.rvt-kommentare .comment-reply-title small { font-size: inherit; font-weight: inherit; }

/* Lange Titel («Allgemeine Geschäftsbedingungen») auf schmalen Telefonen: die
   Silbentrennung des Browsers (lang de) statt über den Rand hinaus. */
@media (max-width: 400px) { .rvt-seite__titel { hyphens: auto; overflow-wrap: break-word; } }