/* =========================================================
   rp-vermarktung.css: /vermarktung (Schritt 86), Stand 01.10.2026
   Mittelteil «Stark präsentiert, gezielt verkauft.» im Aufbau von «Richtig bewertet, persönlich begleitet»
   (Schritt 55: Eyebrow, Titel, Lead rechts, Punkte mit Linie oben), dazu ein grosses Bild. Keine Symbole, keine
   Kästchen (Nicolas 01.10.2026: «weniger Elemente, dafür hochwertiger»). Inhalt 1200 px wie Schritt 85.
   Dazu: Porträt-Karte der Kostengarantie, Titel des Ablaufs am Handy, Beschreibung im offenen Ablauf-Schritt.
   ========================================================= */
.rpvk {
  --rpvk-text: clamp(1.125rem, 1.07rem + .25vw, 1.1875rem);   /* G7: 18 px Handy, 19 px Desktop */
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: clamp(80px, 9vw, 128px) auto 0;
  text-align: left;
  color: #151314;
  grid-column: 1 / -1;
}
.rpvk-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.rpvk-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  color: #194963; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.rpvk-eyebrow::before { content: ""; width: 22px; height: 1px; background: #194963; }
.rpvk-h2 {
  margin: 0; max-width: 14ch; font-size: clamp(2.125rem, 1.45rem + 2.1vw, 3.125rem); font-weight: 500; line-height: 1.15;
  letter-spacing: -.02em;   /* Haupt-H2 des Designsystems (01.10.2026) */ color: #151314; text-wrap: balance;
}
.rpvk-lead { margin: 0; max-width: 34em; font-size: var(--rpvk-text); line-height: 1.6; color: #4d464a; }
.rpvk-bild { margin: 0 0 clamp(48px, 6vw, 80px); aspect-ratio: 21 / 9; overflow: hidden; border-radius: 14px; background: #eef1f4; }
.rpvk-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.rpvk-punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 56px) clamp(32px, 5vw, 72px); }
.rpvk-punkt { border-top: 1px solid #dbd3d3; padding-top: 24px; }
.rpvk-h3 { margin: 0 0 12px; font-size: clamp(22px, 1.2rem + .5vw, 28px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: #151314; }
.rpvk-punkt p { margin: 0; max-width: 46ch; font-size: var(--rpvk-text); line-height: 1.6; color: #4d464a; }
.rpvk-partner { grid-column: 1 / -1; margin-top: clamp(24px, 3vw, 40px); }

@media (max-width: 767px) {
  .rpvk-kopf, .rpvk-punkte { grid-template-columns: minmax(0, 1fr); }
  .rpvk-bild { aspect-ratio: 4 / 3; }
  .rpvk-punkte { gap: 36px; }
}
/* Unter 480 px hat das Webflow-Raster keinen Rand mehr: 16 px wie die übrigen Abschnitte */
@media (max-width: 479px) { .rpvk { padding-left: 16px; padding-right: 16px; } }

/* ---------- Porträt-Karte bei «100% Kostengarantie» ----------
   Nicolas 01.10.2026: «Bild korrekt skalieren, Ausschnitt optimieren, Rahmen vollständig ausfüllen, keine unnötigen
   Leerflächen». Webflow gab dem Bild width 100 % und zugleich -40 px Rand links und rechts (endete 80 px vor dem
   Kartenrand). Jetzt: Karte ohne Innenabstand, schneidet mit ihrem Radius ab; Bild randlos oben, 4:3, Ausschnitt auf
   Gesicht und Oberkörper; Zitat und Name mit eigenem Innenabstand. Karte ab 992 px 5 statt 4 Spalten. */
#w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac { padding: 0 !important; overflow: hidden; }
#w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac .image-module-top.wrapper-voll {
  width: 100%; margin: 0 !important; border-radius: 0; align-self: stretch; flex: none;
}
#w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac .galerie-bild-voll {
  display: block; width: 100%; max-width: none; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 28%;
}
#w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac > :not(.image-module-top) { padding: 28px clamp(24px, 3vw, 36px) 32px; }
@media (min-width: 992px) {
  #w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac { grid-area: 1 / 8 / 2 / 13; }
}

/* «Der Ablauf eines Immobilienverkaufs.»: bei 390 px war «Immobilienverkaufs.» mit 38 px breiter als die Box
   (I und Punkt abgeschnitten, auch live); Langwort-Deckel (G7) */
@media (max-width: 479px) { .rp-was-h1.heading-50 { font-size: min(38px, 8.2vw); } }

/* Ablauf-Tabs: Beschreibung des offenen Schritts war #8a8a8e auf Grau (3.1:1, auch live) -> #52697a (5.7:1) */
.tab-link-turn-up-2.w--current .tab-content-hidden-2 { color: #52697a; }

/* Kostengarantie: Webflow-Fliesstext 14 px auf 17 px (G7), Zeilen nicht über 60 Zeichen */
#w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fd9-3086dfac .text-small { font-size: 17px; line-height: 1.55; max-width: 56ch; margin-left: auto; margin-right: auto; }

/* Porträt-Karte am Handy mit 16 px Rand wie Footer und Abschnitte (Webflow-Raster gab 10 px) */
@media (max-width: 479px) { #w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac { margin-left: 6px !important; margin-right: 6px !important; } }

/* Kostengarantie und Porträt in derselben 1200-px-Spalte wie der übrige Inhalt (Webflow-Raster bis 1500 px breit) */
@media (min-width: 992px) {
  .w-layout-grid.container:has(> #w-node-_2673ac9e-5895-9fb2-a5b6-9070a56a0fdd-3086dfac) { max-width: 1200px; margin-left: auto; margin-right: auto; }
}