/* =========================================================
   rp-referenzen.css: /referenzen (Schritt 83), Stand 28.09.2026
   Nicolas: «die Referenzen liste komplett überholen mit maps videos und und und».
   Baut auf rp-zeilen.css (Zeilen) und rp-immobilien.css (Luftbildkarte) auf; hier nur, was die Seite zusätzlich
   braucht: Variablen der Karte (dort an .rp-imm gebunden), Köpfe, Film und Rundgang in der Zeile, Abschluss.
   ========================================================= */
.rpf {
  --imm-schwarz: oklch(.2 .04 235); --imm-text: oklch(.2 .04 235); --imm-text-2: #48484a; --imm-linie: #e3e3e6;   /* eine Textfarbe wie die Zeilen (--fg) */
  --imm-ease: var(--rp-ease, cubic-bezier(.22, 1, .36, 1));
  --imm-breite: min(1200px, 100% - 2 * clamp(1rem, 3.2vw, 1.5rem));
  --rpf-abstand: clamp(64px, 8vw, 112px);
  --rpf-text: clamp(1.125rem, 1.07rem + .25vw, 1.1875rem);   /* G7: 18 px Handy, 19 px Desktop, wie rp-immobilien.css */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--imm-text);
}
#Pfeil.rpf, #liste, #stimmen, #naechste-referenz, .rpf .rpz-zeile { scroll-margin-top: var(--kopf, 6rem); }

/* Köpfe */
.rpf-vort { margin: 0; font-size: clamp(1.125rem, 1.07rem + .25vw, 1.1875rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--imm-text-2); }
.rpf-h2 { text-wrap: balance; margin: .4rem 0 0; padding: 0; font-size: clamp(30px, 1.5rem + 1.2vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--imm-schwarz); }
.rpf-lead { margin: 1rem 0 0; max-width: 34em; font-size: var(--rpf-text); line-height: 1.6; color: var(--imm-text-2); }
.rpf-kopf { width: var(--imm-breite); margin: 0 auto; }

/* Karte: Abstand zum Titelbild wie die Abschnitte der Startseite */
.rpf .rp-karte { margin-top: var(--rpf-abstand); }
.rp-karte-punkt.ist-verkauft i, .rp-karte-legende .ist-verkauft i { background: #fff; }

/* Liste */
.rpf-liste { margin-top: var(--rpf-abstand); }
.rpf .rpz { padding-top: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: 0; }   /* sonst doppelter Abstand vor den Rezensionen */
.rpf .rpz .rpz-kurz { font-size: var(--rpf-text); line-height: 1.6; color: var(--imm-text); }
.rpf .rpz-fakten dt { color: var(--imm-text-2); }
/* Aktionen liegen über dem Zeilen-Link (z-index 3); «Zum Objekt» lässt Klicks zum Zeilen-Link durch */
.rpf-aktionen { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; pointer-events: none; }
.rpf-aktionen .rpf-knopf { pointer-events: auto; }
.rpf-aktionen .rpz-mehr { margin-top: 0; }
.rpf-knopf {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.05rem;
  border: 1px solid #c3ccd3; border-radius: 999px; background: #fff;
  color: #194963; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
}
.rpf-knopf svg { flex: none; }
.rpf-knopf:hover { border-color: #194963; color: #194963; text-decoration: none; }
.rpf-knopf:focus { outline: none; }
.rpf-knopf:focus-visible { outline: 2px solid #194963; outline-offset: 2px; }
.rpf-dauer { font-weight: 500; color: var(--imm-text-2); font-variant-numeric: tabular-nums; }
.rpf-film[aria-expanded="true"] { border-color: #194963; background: #194963; color: #fff; }
.rpf-film[aria-expanded="true"] .rpf-dauer { color: rgba(255, 255, 255, .85); }

/* Film spielt im Bildfeld der Zeile, über dem Zeilen-Link */
.rpz-bild.spielt { z-index: 4; background: #0d1a22; }
.rpz-bild.spielt img, .rpz-bild.spielt .rpz-badge { visibility: hidden; }
.rpz-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0d1a22; }
.rpf-zu {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: #151314; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.rpf-zu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(12, 36, 52, .7); }

/* Bilder einer Referenz (statt Objektseite, 28.09.2026): Lightbox wie die Galerie der Objektseiten (rp-seiten.css,
   abgenommen), eigene Klassen, weil die Seite rp-neu3.css nicht lädt. Dunkel, Knöpfe rund, Fokus weiss (G8). */
.rpf-lb {
  box-sizing: border-box; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0;   /* füllt den Bildschirm ohne 100vw (Querlauf) */
  border: 0; padding: 0; background: rgba(8, 20, 28, .985); background: oklch(.1 .03 235 / .985); color: #fff;   /* .96 wie Objektseite liess Text durchscheinen */
}
.rpf-lb::backdrop { background: transparent; }
.rpf-lb[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.5rem; }
.rpf-lb-bild { display: grid; gap: 1rem; justify-items: center; min-width: 0; margin: 0; touch-action: pan-y; }
.rpf-lb-bild img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 10.5rem); max-height: calc(100dvh - 10.5rem);   /* Platz für Unterschrift und Hinweis */
  object-fit: contain; border-radius: .625rem; user-select: none; -webkit-user-drag: none;
}
.rpf-lb-bild figcaption { max-width: 60ch; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .82); text-align: center; text-wrap: balance; }
.rpf-lb-bild figcaption b { margin-left: .6rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Hinweis: verkauft, darum nur eine Auswahl (Nicolas 28.09.2026 abends); leiser als die Bildunterschrift, 16 px (G7) */
.rpf-lb-hinweis { max-width: 52ch; margin: -.5rem 0 0; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .66); text-align: center; text-wrap: balance; }
.rpf-lb-rund {
  display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: transparent; color: #fff;
}
.rpf-lb-rund:hover { background: #fff; color: #0d1a22; }
.rpf-lb-rund:focus { outline: none; }
.rpf-lb-rund:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rpf-lb-zu { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 1; }
body.rpf-lb-offen { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .rpf-lb-rund { transition: background-color var(--dauer-1, .18s) ease-out, color var(--dauer-1, .18s) ease-out; }
}
@media (max-width: 767px) {
  .rpf-lb[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 5rem 1rem 6rem; }
  .rpf-lb-vor { position: fixed; bottom: 1.25rem; }
  .rpf-lb-vor[data-richtung="-1"] { left: 1.25rem; }
  .rpf-lb-vor[data-richtung="1"] { right: 1.25rem; }
  .rpf-lb-bild img { max-height: calc(100vh - 14rem); max-height: calc(100dvh - 14rem); }
}

/* Stimmen: wie auf der Startseite, ohne Kasten */
.rpf-stimmen { width: var(--imm-breite); margin: var(--rpf-abstand) auto 0; }

/* Abschluss */
.rpf-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  width: var(--imm-breite); margin: var(--rpf-abstand) auto var(--rpf-abstand);
  padding: clamp(28px, 4.5vw, 64px); border-radius: 24px; background: #f5f6f8;
}
.rpf-cta .rpf-lead { max-width: 52ch; }
.rpf-cta-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.rpf-haupt {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.75rem;
  border-radius: 999px; background: #194963; color: #fff; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none;
}
.rpf-haupt:hover { background: #10344a; color: #fff; text-decoration: none; }
.rpf-haupt:focus { outline: none; }
.rpf-haupt:focus-visible { outline: 2px solid #194963; outline-offset: 3px; }
.rpf-tel { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--imm-schwarz); font-size: var(--rpf-text); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.rpf-tel svg { width: 22px; height: 22px; color: #194963; }
.rpf-tel:hover { color: #194963; text-decoration: none; }
.rpf-tel:focus-visible { outline: 2px solid #194963; outline-offset: 3px; border-radius: 4px; }
.rpf-person { margin: 0; }
.rpf-person img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.rpf-person figcaption { display: grid; gap: .2rem; margin-top: .9rem; font-size: 16px; line-height: 1.4; color: var(--imm-text-2); text-align: left; }
.rpf-person strong { font-size: var(--rpf-text); font-weight: 600; color: var(--imm-schwarz); }

@media (max-width: 991px) {
  .rpf-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
}
@media (max-width: 767px) {
  .rpf-aktionen { gap: .6rem .75rem; }
  .rpf-cta { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 28px 20px; border-radius: 18px; }
  .rpf-person { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; align-items: center; order: -1; }
  .rpf-person img { aspect-ratio: 1; border-radius: 50%; }
  .rpf-person figcaption { margin-top: 0; }
  .rpf-haupt, .rpf-haupt-knopf { width: 100%; text-align: center; }
}

/* Ortsnamen neben den Punkten: Seite je Format aus Schritt 83 (nq-*: quer ab 768 px, nh-*: hoch am Handy) */
@media (min-width: 768px) {
  .rpf .rp-karte-punkt.nq-l .rp-karte-name { left: auto; right: calc(50% + 14px); translate: 0 -50%; }
  .rpf .rp-karte-punkt.nq-o .rp-karte-name { left: 50%; right: auto; top: auto; bottom: calc(50% + 10px); translate: -50% 0; }
  .rpf .rp-karte-punkt.nq-u .rp-karte-name { left: 50%; right: auto; top: calc(50% + 10px); translate: -50% 0; }
}
@media (max-width: 767px) {
  .rpf .rp-karte-punkt.nh-r .rp-karte-name { left: calc(50% + 14px); right: auto; top: 50%; bottom: auto; translate: 0 -50%; }
  .rpf .rp-karte-punkt.nh-l .rp-karte-name { left: auto; right: calc(50% + 14px); top: 50%; bottom: auto; translate: 0 -50%; }
  .rpf .rp-karte-punkt.nh-o .rp-karte-name { left: 50%; right: auto; top: auto; bottom: calc(50% + 10px); translate: -50% 0; }
  .rpf .rp-karte-punkt.nh-u .rp-karte-name { left: 50%; right: auto; top: calc(50% + 10px); bottom: auto; translate: -50% 0; }
}

/* G7 (Labels, Meta, Versal-Eyebrows ab 14 px): auf dieser Seite gehoben. Die Zeilen auf «Unsere Immobilien» (geschützt,
   G23) bleiben unverändert: Badge 12 px, Ort 13 px, Faktenbeschriftung 12 px (Frage an Nicolas). */
.rpf .rpz-badge { font-size: 14px; }
.rpf .rpz .rpz-ort { font-size: 14px; }
.rpf .rpz-fakten dt { font-size: 14px; }
.rpf .rpr time, .rpf .rpr-marke span { font-size: 14px; }

/* Titelbild: Webflow startet die Pfeil-Einblendung hier nicht mehr (ihr Auslöser war in der alten Liste); der Pfeil
   stand dann ausserhalb des Rings (leerer Ring, Kritik 28.09.2026). Nur diese Seite lädt diese Datei. */
.scroll-down-button-right-container .large-button-white-icon { transform: none !important; }

/* Karte am Handy: eng beieinander liegende Punkte mit kleinerer Trefferfläche (30 px, WCAG 2.5.8 verlangt 24 px);
   die Zeilen darunter sind der zweite Weg */
@media (max-width: 767px) {
  .rpf .rp-karte-punkt.nh-eng { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  /* Der Name gehört zum Link: mit Innenabstand wird er Teil der Trefferfläche (Punkt 30 px plus Name mindestens 44 px) */
  .rpf .rp-karte-punkt.nh-eng .rp-karte-name { padding: 8px 6px; margin: -8px -6px; }
}

/* Titel ohne Vorzeile: oben bündig */
.rpf-h2:first-child { margin-top: 0; }

/* Film lädt nicht: Hinweis im Bildfeld mit Direktlink */
.rpf-fehler {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; margin: 0; padding: .75rem 1rem;
  border-radius: 12px; background: rgba(255, 255, 255, .96); color: #151314; font-size: 16px; line-height: 1.45;
}
.rpf-fehler a { color: #194963; font-weight: 600; }

/* Schriftgrössen näher an der Skala: Faktenwerte wie der Text, «Zum Objekt» wie die Knöpfe */
.rpf .rpz-fakten dd { font-size: var(--rpf-text); }
.rpf .rpz-mehr { font-size: 16px; }
.rpf ::selection { background: #194963; color: #fff; }

/* Sehr schmale Handys (unter 360 px): zwei Namen liegen sonst ineinander */
@media (max-width: 359px) {
  .rpf .rp-karte-punkt[href="#ref-roggwil"] .rp-karte-name { left: 50%; right: auto; top: auto; bottom: calc(50% + 10px); translate: -50% 0; }
  .rpf .rp-karte-punkt[href="#ref-thoerishaus"] .rp-karte-name { left: 50%; right: auto; top: calc(50% + 10px); bottom: auto; translate: -50% 0; }
}