/* Seite /eigentumswohnung-verkaufen-bern (Schritt 93, Paket EWG, SEO-Analyse 14.10.2026, Massnahme 10).
   Umbau zur Anfrage-Seite 15.10.2026: Titelbild mit Vertrauenszeile, Bewertung mit Ansprechpartner, Belege, Ablauf,
   Wissen als Karten, Kosten, Dauer, Fragen.
   Baut auf rp-ortsseite.css (Schritt 81) auf: dieselben Farben, Schriftgrössen, Linien und Abstände wie die
   abgenommenen Ortsseiten; Bewertung im Raster der Ortsseiten nach Schritt 94 (rp-ort94.css, hier nachgebaut, weil
   jene Datei nur mit Schritt 94 kommt); Vertrauenszeile wie die Startseite (rp-start-aufbau.css, ohne Einblendung: G5).
   Farben der Site: Titel #151314, Text #1d1d1f, gedämpft #52697a (5.74:1), Linien #e3e6ea/#d5dbe1, Fläche #f5f6f8,
   Marke #194963 (9.66:1 auf Weiss). Fliesstext 19 px Desktop, 18 px Handy (G7). */

/* ---------- 1. Titelbild ---------- */
/* <picture> mit Hochformat für das Handy; das <img> bleibt Flex-Kind des Webflow-Bildrahmens */
.rpe-seite .top-section---image-right-wrapper picture.rpe-titelbild { display: contents; }

/* Vertrauenszeile unter den Knöpfen, Werte wie die Startseite (Schritt 58), aber ohne Einblendung nach 1.5 s */
.rpe-seite .rpe-vertrauen {
  display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; margin: 28px 0 0; padding: 0; list-style: none;
  color: #fff; font-size: 15px; font-weight: 500; line-height: 1.35; text-shadow: 0 1px 12px rgba(8, 26, 38, .45);
}
.rpe-seite .rpe-vertrauen li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.rpe-seite .rpe-vertrauen svg {
  flex: none; box-sizing: content-box; width: 14px; height: 14px; padding: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

/* Eyebrow über zwei Zeilen: Strich an der ersten Zeile statt in der Mitte des Blocks (zweite Prüfung 14.10.2026) */
.rpe-seite .rpo-eyebrow { align-items: flex-start; }
.rpe-seite .rpo-eyebrow::before { margin-top: .7em; }

/* Fliesstext-Links (Karten, Kosten, Dauer, Fragen) */
.rpe-text a, .rpe-karte a, .rpe-liste a, .rpe-dauer-lead a, .rpe-seite .accordion-text a, .rpe-seite .rpo-fakten a,
.rpe-quelle a, .rpe-anstoss-tel a {
  color: #194963; text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .35);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.rpe-text a:hover, .rpe-karte a:hover, .rpe-liste a:hover, .rpe-dauer-lead a:hover, .rpe-seite .accordion-text a:hover,
.rpe-seite .rpo-fakten a:hover, .rpe-quelle a:hover, .rpe-anstoss-tel a:hover { text-decoration-color: currentColor; }
.rpe-text a:focus-visible, .rpe-karte a:focus-visible, .rpe-liste a:focus-visible, .rpe-dauer-lead a:focus-visible,
.rpe-seite .accordion-text a:focus-visible, .rpe-seite .rpo-fakten a:focus-visible, .rpe-quelle a:focus-visible,
.rpe-anstoss-tel a:focus-visible { outline: 2px solid #194963; outline-offset: 3px; border-radius: 4px; }
.rpe-text strong { color: #151314; font-weight: 600; }

/* ---------- 2. Bewertung: Text und Ansprechpartner links (5fr), Karte rechts (6fr), wie die Ortsseiten (94) ---------- */
.rpe-seite .rpo-abschnitt.rpe-bewertung { padding-top: clamp(28px, 3.5vw, 44px); }
.rpe-bewertung .rpo-krumen { margin-bottom: clamp(32px, 4vw, 48px); }
.rpe-bew-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "text form" "kontakt form"; grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 5vw, 80px); align-items: start;
}
.rpe-bew-text { grid-area: text; }
.rpe-bew-text .rpo-h2 { margin-bottom: 20px; }
.rpe-bew-lead { max-width: 34rem; margin: 0; color: #1d1d1f; font-size: 19px; line-height: 1.6; }
.rpe-bew-kontakt { grid-area: kontakt; max-width: 34rem; margin-top: 28px; padding-top: 24px; border-top: 1px solid #e3e6ea; }
/* «Ihr Ansprechpartner» als ruhige Zeile über dem Namen (gedämpft #52697a, 5.74:1), damit der Name führt */
.rpe-bew-kontakt .rpo-h3 { margin: 0 0 4px; color: #52697a; font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.rpe-bew-kontakt .rpo-rolle { margin-bottom: 10px; }
.rpe-bew-kontakt .rpo-kontaktliste { flex-direction: column; gap: 0; margin-bottom: 4px; }
.rpe-bew-form { grid-area: form; min-width: 0; }
.rpe-bew-form .w-embed { width: 100%; }
.rpe-bew-form .rp-bf { max-width: none; }
/* Formular mit drei statt vier Stufen: Balken in drei gleiche Teile */
.rp-bf[data-rpe-wohnung] .rp-bf-balken { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 3. Belege: verkaufte Wohnungen und Stimmen nebeneinander, im Verkauf darunter ---------- */
.rpe-belege-raster {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "verkauft stimmen" "aktuell stimmen"; grid-template-rows: auto 1fr;
  gap: clamp(40px, 4vw, 56px) clamp(40px, 5vw, 80px); align-items: start;
}
.rpe-belege-verkauft { grid-area: verkauft; }
.rpe-belege-stimmen { grid-area: stimmen; }
.rpe-belege-aktuell { grid-area: aktuell; }
.rpe-gruppe { margin: 0 0 14px; }
.rpe-stimmen { display: grid; gap: 16px; padding: 0; }
/* Kurze Stimmen ganz zeigen: kein Kürzen auf 6 Zeilen, kein «Weiterlesen» (der Knopf fehlt hier) */
.rpe-stimmen .rpr-text { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
/* Lesbarkeit 50 bis 70 (G7): Stimmen hier im Inhalt statt im Schieber, Text 17 px statt 15.5 px, Datum 14 px */
.rpe-stimmen .rpr-text { font-size: 17px; line-height: 1.6; }
.rpe-stimmen .rpr-name { font-size: 17px; }
.rpe-stimmen .rpr-datum { font-size: 14px; }
.rpe-belege-stimmen .rpo-textlink { margin-top: 8px; }

/* Graue Flächen: Karten und Abzeichen weiss, Linien etwas kräftiger */
.rpo-grau .rpo-fakten { background: #fff; }
.rpo-grau .rpo-status-verkauft { background: #fff; }
.rpo-grau .rpo-objekte, .rpo-grau .rpo-objekte li { border-color: #d5dbe1; }

/* ---------- 4. Ablauf und Anstösse ---------- */
.rpe-anstoss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid #d5dbe1;
}
.rpe-anstoss-frage { margin: 0; color: #151314; font-size: 20px; font-weight: 500; line-height: 1.4; }
.rpe-anstoss-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.rpe-anstoss-tel { margin: 0; color: #1d1d1f; font-size: 18px; line-height: 1.5; }
.rpe-anstoss-tel a { white-space: nowrap; }
.rpe-ablauf .rpo-fuss { margin-bottom: 0; }

/* ---------- 5. Wissen: sechs Karten, weiss auf Grau ---------- */
.rpe-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.rpe-karte { display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px); border-radius: 14px; background: #fff; }
.rpe-karte .rpo-h3 { margin-bottom: 10px; }
.rpe-karte p { margin: 0; color: #1d1d1f; font-size: 19px; line-height: 1.6; }
.rpe-karte .rpe-artikel { margin-top: auto; padding-top: 18px; color: #52697a; font-size: 16px; line-height: 1.4; }
.rpe-quelle { margin: clamp(24px, 3vw, 32px) 0 0; color: #3d4f5c; font-size: 16px; line-height: 1.5; }
.rpe-quelle a { color: #3d4f5c; }

/* Unterlagen: zweispaltige Liste mit feinem Haken in Markenblau */
.rpe-liste { columns: 2 22rem; column-gap: clamp(32px, 5vw, 80px); margin: 0; padding: 0; list-style: none; border-top: 1px solid #e3e6ea; }
.rpe-liste li { position: relative; break-inside: avoid; padding: 16px 0 16px 38px; border-bottom: 1px solid #e3e6ea; color: #1d1d1f; font-size: 19px; line-height: 1.5; }
.rpe-liste li::before { content: ""; position: absolute; left: 6px; top: 24px; width: 14px; height: 7px; border-left: 2px solid #194963; border-bottom: 2px solid #194963; transform: rotate(-45deg); }
.rpe-liste li small { display: block; margin-top: 2px; color: #52697a; font-size: 16px; line-height: 1.45; }
.rpe-nachsatz { max-width: 66ch; margin: clamp(24px, 3vw, 32px) 0 0; color: #1d1d1f; font-size: 19px; line-height: 1.6; }

/* ---------- 6. Kosten, Dauer ---------- */
/* Quellen tragen auch Inhalt (Befreiung bei der Handänderungssteuer, Richtwert): #3d4f5c statt #52697a,
   7.9:1 auf #f5f6f8 und 8.5:1 auf Weiss (Hausregel 7:1 für Fliesstext, Prüfung 14.10.2026) */
.rpe-quellen { margin: 18px 0 0; padding: 0; list-style: none; color: #3d4f5c; font-size: 16px; line-height: 1.5; }
.rpe-quellen li + li { margin-top: 6px; }
.rpe-quellen a { color: #3d4f5c; text-decoration: underline; text-underline-offset: .2em; }
.rpe-quellen a:hover { color: #194963; }
.rpe-text p { margin: 0 0 18px; color: #1d1d1f; font-size: 19px; line-height: 1.6; }
.rpe-text .rpo-textlink { margin-top: 4px; }
.rpe-dauer .rpo-kopf { margin-bottom: 0; }
.rpe-dauer .rpo-kopf .rpo-lead { max-width: 52ch; }
/* Die Fragen-Box der Hülle bringt ihren Abstand selbst mit; mit dem Polster des Abschnitts lagen 226 px Weiss
   zwischen dem letzten Abschnitt und der Box (Prüfung 14.10.2026) */
.rpe-seite .rpo-abschnitt.rpe-dauer { padding-bottom: 0; }

@media screen and (max-width: 991px) {
  .rpe-bew-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "form" "kontakt"; grid-template-rows: auto; }
  .rpe-bew-form { margin-top: 28px; }
  .rpe-bew-kontakt { margin-top: 36px; }
  .rpe-belege-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "verkauft" "stimmen" "aktuell"; grid-template-rows: auto; }
  .rpe-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  /* Titelbild am Handy über die ganze Breite: Die Webflow-Regel .top-section---image-right-wrapper.unterseite
     (60 %, Höhe auto) schlägt die Handy-Regel mit einer Klasse (Befund CON-12, Massnahme 23 der SEO-Analyse).
     Nur auf dieser Seite, mit derselben Spezifität plus Seitenklasse. */
  .rpe-seite .top-section---image-right-wrapper.unterseite { width: 100%; height: 100%; }
  .rpe-karten { grid-template-columns: 1fr; }
  .rpe-karte { padding: 22px 20px; }
  .rpe-karte p { font-size: 18px; }
  .rpe-bew-lead, .rpe-liste li, .rpe-nachsatz, .rpe-text p { font-size: 18px; }
  .rpe-liste { columns: 1; }
  .rpe-anstoss-frage { font-size: 19px; }
}
@media screen and (max-width: 479px) {
  .rpe-seite .rpe-vertrauen { flex-direction: column; gap: .5rem; margin-top: 22px; font-size: 14.5px; }
  /* Wohnungsliste: Abzeichen unter den Text, sonst drückt «Verkauft in weniger als 1 Monat» den Titel auf ein Wort
     pro Zeile («Zwei / Wohnungen», Prüfung 14.10.2026) */
  .rpe-belege-verkauft .rpo-objekt { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .rpe-belege-verkauft .rpo-status { justify-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .rpe-text a, .rpe-karte a, .rpe-liste a, .rpe-dauer-lead a, .rpe-seite .accordion-text a, .rpe-quellen a,
  .rpe-quelle a, .rpe-anstoss-tel a {
    transition: color .2s cubic-bezier(.4, 0, .2, 1), text-decoration-color .2s cubic-bezier(.4, 0, .2, 1);
  }
}