/* =========================================================
   rp-ver-ausbau.css: /vermarktung als Verkäuferseite (Schritt 93, Paket VER, SEO-Analyse 14.10.2026, Massnahme 5)
   Neue Abschnitte im Aufbau von «Stark präsentiert, gezielt verkauft.» (Schritt 86, rp-vermarktung.css: Eyebrow,
   Titel, Lead rechts, Punkte mit Linie oben). Keine Symbole, keine Kästchen, keine neue Schrift (Nicolas 01.10.2026:
   «weniger Elemente, dafür hochwertiger»). Inhalt 1200 px wie Schritt 85; unter 480 px 16 px Rand.
   Farben aus dem Designsystem (rp-breite.css): Titel #151314, Text #1d1d1f (16.8:1), leise #4d464a (9.2:1),
   Meta #52697a (5.7:1, nur ab 16 px), Blau #194963 (9.7:1, auch für 14-px-Labels), Linie #e3e6ea.
   G7: Fliesstext 18 px Handy, 19 px Desktop; Tabelle und Quellen 16 bis 17 px; Labels 14 px nur in #194963.
   Keine Bewegung: nichts blendet ein, nichts läuft (G5, G6).
   v20261014b (Prüfung): Eyebrows 14 px blau wie das Designsystem, Porträt-Karte ab 992 px sticky, am Handy bündig.
   ========================================================= */

/* ---------- Abschnitte im Webflow-Raster der Seite (wie .rpvk) ---------- */
.rpva {
  --rpva-text: clamp(1.125rem, 1.07rem + .25vw, 1.1875rem);   /* 18 px Handy, 19 px Desktop */
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: clamp(80px, 9vw, 128px) auto 0;
  grid-column: 1 / -1;
  text-align: left;
  color: #151314;
}
@media (max-width: 479px) { .rpva { padding-left: 16px; padding-right: 16px; } }

.rpva p { margin: 0; font-size: var(--rpva-text); line-height: 1.6; color: #4d464a; }
.rpva p + p { margin-top: 16px; }
.rpva strong { font-weight: 600; color: #151314; }

/* Eyebrow wie im ganzen Designsystem (.rpvk-eyebrow, .rpv-eyebrow: 14 px/600, #194963, 14 px bis zum Titel).
   Prüfung 14.10.2026: «.rpva p» und «.rpva-kosten p» schlugen die Klasse (19 px, #4d464a, kein Abstand). */
.rpva p.rpvk-eyebrow, .rpva-kosten p.rpvk-eyebrow {
  margin: 0 0 14px; font-size: 14px; line-height: 1.4; color: #194963;
}

/* Kleine H2 (Designsystem 30 bis 40 px) für Abschnitte mit zwei Spalten */
.rpva-h2-klein { font-size: clamp(1.875rem, 1.45rem + 1.35vw, 2.5rem); max-width: 18ch; }

/* Links im Fliesstext wie a[data-rpg-link] (Schritt 89) */
.rpva-link, .rpva-kosten .rpva-link, .rpva-karte-text .rpva-link {
  color: #194963; text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(25, 73, 99, .45); text-underline-offset: .18em;
}
.rpva-link:hover { text-decoration-color: currentColor; }
.rpva-link:focus-visible, .rpva a:focus-visible, .rpva-kosten a:focus-visible, .rpva-karte-text a:focus-visible {
  outline: 2px solid #194963; outline-offset: 2px; border-radius: 2px;
}
.rpva a[href^="tel:"], .rpva-kosten a[href^="tel:"], .rpva-karte-text a[href^="tel:"] { white-space: nowrap; }

/* ---------- Liste mit Linien (Kosten, Unterlagen, wer zahlt was) ---------- */
.rpva-liste { list-style: none; margin: 28px 0 0; padding: 0; }
.rpva-liste > li {
  margin: 0; padding: 16px 0; border-top: 1px solid #e3e6ea;
  font-size: var(--rpva-text); line-height: 1.6; color: #4d464a;
}
.rpva-liste > li:last-child { border-bottom: 1px solid #e3e6ea; }
.rpva-liste--knapp > li { padding: 12px 0; }
.rpva-liste + p { margin-top: 20px; }

/* ---------- Kosten (linke Spalte des Webflow-Rasters mit der Porträt-Karte) ---------- */
.rpva-kosten-raster { scroll-margin-top: 104px; }
.rpva-kosten { --rpva-text: clamp(1.125rem, 1.07rem + .25vw, 1.1875rem); text-align: left; align-self: start; color: #151314; }
.rpva-kosten p { margin: 0; font-size: var(--rpva-text); line-height: 1.6; color: #4d464a; }
.rpva-kosten p + p { margin-top: 16px; }
.rpva-kosten .rpvk-h2 { max-width: 16ch; margin-bottom: 20px; }
.rpva-kosten strong { font-weight: 600; color: #151314; }
.rpva-h3 {
  margin: clamp(40px, 5vw, 56px) 0 0; font-size: clamp(22px, 1.2rem + .5vw, 28px); font-weight: 500;
  line-height: 1.3; letter-spacing: -.01em; color: #151314;
}
.rpva-kosten .rpva-wer {
  margin: 28px 0 0; color: #194963; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.4;
}
.rpva-kosten .rpva-wer + .rpva-liste { margin-top: 10px; }
.rpva-kosten .rpva-h3 + .rpva-wer { margin-top: 16px; }
.rpva-quelle { margin-top: 24px !important; font-size: 16px !important; line-height: 1.55 !important; color: #52697a !important; }
.rpva-quelle a { color: inherit; }
/* Porträt-Karte bleibt oben stehen, statt sich über die ganze Höhe der Kosten zu ziehen. Ab 992 px läuft sie neben
   den Kosten mit (sticky wie die Ergebniskarte des Rechners, top 112 px), statt 800 px Leerfläche rechts stehen zu
   lassen; nur bei genug Fensterhöhe, damit die Karte nie abgeschnitten klebt. Keine Animation. */
.rpva-kosten-raster > #w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac { align-self: start; }
@media (min-width: 992px) and (min-height: 700px) {
  .rpva-kosten-raster > #w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac { position: sticky; top: 112px; }
}
/* Unter 480 px: Webflow gibt der Karte width 370 px, die 6-px-Ränder schoben sie 12 px über die rechte Kante der
   übrigen Abschnitte (16/386 statt 16/374, Bestand). Breite aus dem Raster, damit beide Kanten fluchten. */
@media (max-width: 479px) {
  .rpva-kosten-raster > #w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac { width: auto; justify-self: stretch; }
}
.rpva-karte-text .text-small { margin-top: 2px; }
.rpva-karte-satz { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: #4d464a; }
.rpva-karte-tel { margin: 6px 0 0; font-size: 17px; line-height: 1.55; }
.rpva-karte-tel a {
  display: inline-block; padding: 12px 0; margin: -12px 0;   /* eigener Link, nicht im Satz: Tippziel 44 px (G7) */
  color: #194963; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
@media (max-width: 991px) {
  .rpva-kosten { padding-bottom: 40px; }
}
@media (max-width: 479px) {
  .rpva-kosten { padding-left: 6px; padding-right: 6px; }
}

/* ---------- Dauer und Unterlagen: zwei Spalten ---------- */
.rpva-zwei {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 96px) clamp(32px, 5vw, 72px); align-items: start;
}
.rpva-zwei > div { min-width: 0; }
.rpva-zwei .rpvk-eyebrow { margin-bottom: 14px; }
.rpva-zwei .rpvk-h2 { margin-bottom: 20px; }
@media (max-width: 767px) { .rpva-zwei { grid-template-columns: minmax(0, 1fr); } }

/* Tabelle der Vermarktungsdauer */
.rpva-tabelle { width: 100%; margin: 28px 0 0; border-collapse: collapse; font-size: 17px; line-height: 1.45; }
.rpva-tabelle caption {
  caption-side: bottom; padding-top: 14px; text-align: left; font-size: 16px; line-height: 1.55; color: #52697a;
}
.rpva-tabelle th, .rpva-tabelle td {
  padding: 11px 0; border-top: 1px solid #e3e6ea; text-align: left; vertical-align: top; font-weight: 400; color: #1d1d1f;
}
.rpva-tabelle tbody tr:last-child th, .rpva-tabelle tbody tr:last-child td { border-bottom: 1px solid #e3e6ea; }
.rpva-tabelle td { padding-left: 16px; text-align: right; white-space: nowrap; color: #151314; font-variant-numeric: tabular-nums; }
.rpva-tabelle thead th {
  padding-top: 0; border-top: 0; color: #194963; font-size: 14px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
}
.rpva-tabelle thead th:last-child { text-align: right; }
.rpva-tabelle .rpva-objekt { display: block; color: #4d464a; font-size: 16px; }

/* ---------- Kostenlose Bewertung: Text links, Formularkarte rechts ---------- */
.rpva-bewertung-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start;
}
.rpva-bewertung-raster > * { min-width: 0; }
.rpva-bewertung-raster .rpvk-h2 { margin-bottom: 20px; }
.rpva-bewertung-raster .rp-bf { justify-self: end; }
@media (max-width: 991px) {
  .rpva-bewertung-raster { grid-template-columns: minmax(0, 1fr); }
  .rpva-bewertung-raster .rp-bf { justify-self: stretch; max-width: none; }
}

/* Titel, die als Frage oder mit langem Wort stehen: breiter als 14ch, damit sie nicht in Wortfetzen brechen */
.rpva-objektarten .rpvk-h2 { max-width: 17ch; }
.rpva-kopf-voll { grid-template-columns: minmax(0, 1fr) !important; }
.rpva-fragen .rpvk-h2 { max-width: 24ch; }

/* ---------- Häufige Fragen (Akkordeon aus dem Webflow-Markup, Schritt 99_ohne_webflow macht h3 > button) ---------- */
.rpva-fragen .rpvk-kopf { margin-bottom: clamp(24px, 3vw, 40px); }
.rpva-fragen-liste { max-width: 880px; border-top: 1px solid #e3e6ea; }
.rpva-fragen-liste .accordion-wrapper { border-bottom: 1px solid #e3e6ea; }
.rpva-fragen-liste .accordion-text { font-size: var(--rpva-text); line-height: 1.6; color: #4d464a; }
.rpva-fragen-liste .accordion-text ol { margin: 10px 0 0; padding-left: 1.5em; }
.rpva-fragen-liste .accordion-text li { margin: 6px 0 0; padding-left: .2em; }
.rpva-fragen-liste .accordion-text li::marker { color: #194963; font-weight: 600; }

/* ---------- Kontakt-Komponente (Schritt 87) unter dem Inhalt, vor dem Footer ---------- */
.rpva-kontakt { padding-top: clamp(80px, 9vw, 128px); }