/* =========================================================
   rp-immobilien.css: «Unsere Immobilien» im Stil der Startseite (Schritt 22, 26.09.2026).
   Hero-Verlauf und Titel-Animation kommen aus rp-start-aufbau.css (Schritt 58), hier nur Video, Pillen-Leiste,
   Abschnittsköpfe, dunkle Zeilen-Schrift, Mietobjekte. Werte der Startseite: Pillen Radius 48 px, Inter, .3s.
   Gilt nur mit body.rp-imm.
   ========================================================= */
.rp-imm { --imm-schwarz: #151314; --imm-text: #1d1d1f; --imm-text-2: #48484a; --imm-linie: #e3e3e6; --imm-ease: var(--rp-ease, cubic-bezier(.22, 1, .36, 1)); --imm-breite: min(1200px, 100% - 2 * clamp(1rem, 3.2vw, 1.5rem)); }

/* ---------- Hero: Video Ittigen hinter dem Blau-Verlauf ---------- */
.rp-imm .top-section---image-right-wrapper { overflow: hidden; }
.rp-imm-poster, .rp-imm-poster img, .rp-imm-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-imm-poster img, .rp-imm-video { object-fit: cover; }
.rp-imm-poster img { display: block; }
.rp-imm-video { opacity: 0; transition: opacity .3s ease; pointer-events: none; -webkit-touch-callout: none; user-select: none; }
.rp-imm-video.laeuft { opacity: 1; }

/* ---------- Leiste statt Karten: ruhige Pillen mit Sprungmarken ---------- */
.rp-imm .w-layout-grid.grid { padding-inline: 0; }
.rp-imm-leiste { display: flex; flex-wrap: wrap; gap: 12px; width: var(--imm-breite); margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; padding-bottom: clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--imm-linie); }
.rp-imm-pille {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 26px; border: 1px solid rgba(21, 19, 20, .2); border-radius: 48px;
  font-size: 17px; font-weight: 400; line-height: 1.2; color: var(--imm-schwarz); text-decoration: none; background: transparent;
  transition: transform .3s, border-color .3s, background-color .3s, color .3s;
}
.rp-imm-pille b { font-weight: 500; font-size: 15px; color: var(--imm-text-2); font-variant-numeric: tabular-nums; transition: color .3s; }
.rp-imm-pille:hover { transform: scale(1.02); border-color: var(--imm-schwarz); }
.rp-imm-pille.ist-aktiv { border-color: var(--imm-schwarz); font-weight: 500; box-shadow: inset 0 0 0 1px var(--imm-schwarz); }
.rp-imm-pille:focus-visible { outline: 2px solid #194963; outline-offset: 3px; }
.rp-imm-kurz { display: none; }
/* Handy: drei gleich breite Knöpfe in einer Reihe mit kurzen Namen, kein seitliches Scrollen (30.09.2026) */
@media (max-width: 479px) {
  .rp-imm-leiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rp-imm-pille { justify-content: center; min-height: 48px; padding: 0 8px; gap: .4rem; font-size: 16px; white-space: nowrap; }
  .rp-imm-lang { display: none; }
  .rp-imm-kurz { display: inline; }
}

/* ---------- Abschnittsköpfe wie «Aktuelle Immobilien» auf der Startseite ---------- */
.rp-imm .section-4, .rp-imm .section-2, .rp-imm .section-3 { margin-top: 0; padding-top: clamp(64px, 8vw, 112px); }
.rp-imm .rp-imm-leiste + .section-4 { padding-top: clamp(40px, 5vw, 64px); }  /* ohne Karte */
.rp-imm-kopf { width: var(--imm-breite); margin: 0 auto; text-align: left; }
.rp-imm .rp-imm-eyebrow { 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); }
.rp-imm .rp-imm-kopf h2.rp-was-h1 { margin: .4rem 0 0; padding: 0; text-align: left; font-size: clamp(34px, 1.7rem + 1.4vw, 44px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--imm-schwarz); }
.rp-imm .rp-imm-lead { margin: 1rem 0 0; max-width: 640px; font-size: clamp(1.125rem, 1.07rem + .25vw, 1.1875rem); line-height: 1.55; color: var(--imm-text); }
.rp-imm .rpz { padding-top: clamp(1.5rem, 3vw, 2rem); }

/* ---------- Zeilen-Liste: Aufbau bleibt, Schrift dunkel ---------- */
body.rp-imm .rpz .rpz-titel { color: var(--imm-schwarz); }
body.rp-imm .rpz-zeile.ist-link:hover .rpz-titel { color: #194963; }
body.rp-imm .rpz .rpz-kurz { color: var(--imm-text); font-size: clamp(1.125rem, 1.07rem + .25vw, 1.1875rem); }
body.rp-imm .rpz-fakten dt { font-size: .875rem; color: var(--imm-text-2); }
body.rp-imm .rpz .rpz-ort, body.rp-imm .rpz-badge { font-size: .875rem; }
body.rp-imm .rpz-fakten dd { color: var(--imm-schwarz); }
body.rp-imm .rpz .rpz-ort { color: #194963; }
body.rp-imm .rpz-ort::before { background: #194963; }
body.rp-imm .rpz .rpz-mehr { color: var(--imm-schwarz); border-color: rgba(21, 19, 20, .35); }

/* Alle Referenzen: als Pille unter der Liste, bündig */
.rp-imm .rpz-alle { width: var(--imm-breite); margin: 1.5rem auto 0; text-align: left; }
.rp-imm .rpz-alle .btn.linie {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 28px; border: 1px solid rgba(21, 19, 20, .2); border-radius: 48px;
  font-size: 17px; color: var(--imm-schwarz); text-decoration: none; transition: transform .3s, background-color .3s, color .3s, border-color .3s;
}
.rp-imm .rpz-alle .btn.linie:hover { transform: scale(1.02); background: var(--imm-schwarz); border-color: var(--imm-schwarz); color: #fff; }

/* ---------- Mietobjekte: ohne grauen Kasten, Knöpfe der Startseite ---------- */
.rp-imm .fullwidth-container.bg-gray.portale { width: var(--imm-breite); max-width: none; margin: clamp(1.5rem, 3vw, 2rem) auto clamp(4rem, 8vw, 7rem); padding: 0; border-radius: 0; background: transparent; }
.rp-imm .portale .heading-58 { margin: 0; font-size: clamp(22px, 1.2rem + .6vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: var(--imm-schwarz); }
.rp-imm .portale .paragraph-6 { margin: .75rem 0 1.75rem; max-width: 640px; font-size: clamp(17px, 1rem + .2vw, 19px); line-height: 1.55; color: var(--imm-text); }
.rp-imm .button.button-size-large.portale {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: auto; min-height: 58px; margin: 0 12px 12px 0; padding: 0 38px;
  border: 1px solid rgba(21, 19, 20, .24); border-radius: 48px; background: transparent; color: var(--imm-schwarz);
  font-size: 17px; font-weight: 400; line-height: 1.2; transition: transform .3s, border-color .3s, background-color .3s, color .3s;
}
.rp-imm .button.button-size-large.portale:hover { transform: scale(1.02); background: var(--imm-schwarz); border-color: var(--imm-schwarz); color: #fff; }
.rp-imm .button.button-size-large.portale[href="/kontaktaufnahme"] { background: var(--imm-schwarz); border-color: var(--imm-schwarz); color: #fff; font-weight: 500; }
.rp-imm .button.button-size-large.portale[href="/kontaktaufnahme"]:hover { background: transparent; color: #110f0e; border-color: #110f0e; }
@media (max-width: 767px) { .rp-imm .button.button-size-large.portale { min-height: 52px; padding: 0 28px; font-size: 16px; } }
@media (max-width: 479px) { .rp-imm .button.button-size-large.portale { width: 100%; max-width: none; margin-right: 0; } }

/* ---------- Karte: aktuelle Angebote auf dem Luftbild (Nicolas 27.09.2026 abends) ----------
   «Map-Satellitenkarte … dass man auch ein bisschen sieht, wo man ist … nur die, die online sind.» Luftbild swisstopo
   SWISSIMAGE (src/werkzeuge/karte_luftbild.py, Schritt 22): quer 4:3 ab 768 px, hoch 4:5 am Handy. Darüber ein leiser
   Blauverlauf in #194963, damit Punkte und Namen lesbar bleiben. Punkte sind Links (ohne JavaScript nutzbar).
   Desktop: Text links, Karte rechts, Vorschau schwebt über dem Punkt. Handy: untereinander, Vorschau unter der Karte. */
.rp-karte {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  width: var(--imm-breite); margin: clamp(40px, 5vw, 72px) auto 0;
}
.rp-imm .rp-karte-titel { 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); }
.rp-imm .rp-karte + .section-4 { padding-top: clamp(56px, 7vw, 96px); }
.rp-karte-rahmen { position: relative; container: karte / inline-size; }
.rp-karte-flaeche {
  position: relative; isolation: isolate; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  background: #33433b;   /* bis das Luftbild da ist: gedämpftes Grün statt Weiss */
}
.rp-karte-grund, .rp-karte-grund img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rp-karte-grund img { object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* Blauverlauf: Ränder etwas dichter (Legende, Quelle, Bern), Mitte fast klar; wirkt wie Abendlicht, nicht wie Filter */
.rp-karte-flaeche::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 55% 45%, rgba(25, 73, 99, 0) 35%, rgba(16, 52, 74, .34) 100%),
    linear-gradient(180deg, rgba(25, 73, 99, .26) 0%, rgba(25, 73, 99, .12) 45%, rgba(25, 73, 99, .24) 100%);
}

/* Orientierung: Bern (Altstadt) */
.rp-karte-ort {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -50%); pointer-events: none;
  font-size: 15px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65), 0 0 14px rgba(0, 0, 0, .55);
}
.rp-karte-ort.klein { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: rgba(255, 255, 255, .9); }

/* Punkte: 44 px Trefferfläche, sichtbar 18 px mit weissem Ring und Schatten; Ortsname daneben gehört zum Link */
.rp-karte-punkt {
  position: absolute; left: var(--x); top: var(--y); z-index: 3; display: grid; place-items: center;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; color: #fff; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.rp-karte-punkt i {
  display: block; box-sizing: border-box; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #ffd98f;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .12);
  transition: transform .3s var(--imm-ease);
}
.rp-karte-punkt.ist-aktiv { z-index: 4; }
.rp-karte-punkt.ist-reserviert i { background: #a9d4f2; }
.rp-karte-name {
  position: absolute; left: calc(50% + 14px); top: 50%; translate: 0 -50%; padding: 4px 2px; white-space: nowrap;
  font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .45), 0 0 14px rgba(0, 0, 0, .55);
}
.rp-karte-punkt.name-links .rp-karte-name { left: auto; right: calc(50% + 14px); }
.rp-karte-punkt:hover, .rp-karte-punkt:focus { color: #fff; text-decoration: none; }
.rp-karte-punkt:hover i, .rp-karte-punkt.ist-offen i, .rp-karte-punkt:focus-visible i { transform: scale(1.25); }
.rp-karte-punkt:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 4px rgba(12, 36, 52, .6); }
/* Aktive Punkte pulsieren zweimal, wenn die Karte ins Bild kommt (Klasse ist-sichtbar setzt rp-immobilien.js), dann Ruhe */
@media (prefers-reduced-motion: no-preference) {
  .rp-karte-flaeche.ist-sichtbar .rp-karte-punkt.ist-aktiv::after {
    content: ""; position: absolute; inset: 11px; border: 2px solid rgba(255, 217, 143, .95); border-radius: 50%; pointer-events: none;
    animation: rp-karte-puls 2.2s cubic-bezier(.22, 1, .36, 1) .3s 2 both;
  }
}
@keyframes rp-karte-puls { from { transform: scale(.8); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* Legende über der Karte oben links, Quellenhinweis unten rechts */
.rp-karte-legende {
  position: absolute; left: 14px; top: 14px; z-index: 5; display: grid; gap: .35rem; margin: 0; padding: .7rem .9rem;
  list-style: none; border-radius: 12px; background: rgba(8, 26, 38, .66); color: #fff; font-size: 14px; line-height: 1.3;
}
.rp-karte-legende li { display: flex; align-items: center; gap: .55rem; }
.rp-karte-legende b { margin-left: auto; padding-left: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-karte-legende i { flex: none; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #ffd98f; }
.rp-karte-legende .ist-reserviert i { background: #a9d4f2; }
.rp-karte-quelle {
  position: absolute; right: 10px; bottom: 10px; z-index: 5; padding: 3px 8px; border-radius: 6px;
  background: rgba(8, 26, 38, .66); color: #fff; font-size: 14px; line-height: 1.3; letter-spacing: .01em;
}

/* Vorschau: weisse Karte über dem Punkt */
.rp-karte-vorschau {
  position: absolute; z-index: 6; left: 0; top: 0; display: grid; width: 250px; overflow: hidden; border-radius: 14px;
  background: #fff; color: var(--imm-schwarz); text-decoration: none; pointer-events: none;
  box-shadow: 0 18px 44px rgba(8, 26, 38, .3), 0 2px 8px rgba(8, 26, 38, .12);
  opacity: 0; translate: 0 6px; transition: opacity .25s ease, translate .35s var(--imm-ease);
}
.rp-karte-vorschau[hidden] { display: none; }
.rp-karte-vorschau.ist-da { opacity: 1; translate: 0 0; pointer-events: auto; }
.rp-karte-bild { display: block; aspect-ratio: 3 / 2; background: #e9eef2; }
.rp-karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rp-karte-info { display: grid; gap: .25rem; padding: .85rem 1rem 1rem; }
.rp-karte-vort { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #194963; }
.rp-karte-info strong { font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.rp-karte-status { font-size: 15px; color: var(--imm-text-2); }
.rp-karte-mehr { margin-top: .35rem; font-size: 15px; font-weight: 600; }
.rp-karte-mehr::after { content: " \2192"; }
.rp-karte-hinweis { display: none; margin: .75rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--imm-text-2); }
/* Kleine Karte (Desktop 992 bis rund 1100 px): Vorschau quer und niedrig, damit sie neben dem Punkt Platz hat.
   Steht vor dem Handy-Block, der die Vorschau unter die Karte stellt und diese Werte wieder überschreibt. */
@container karte (max-width: 700px) {
  .rp-karte-vorschau { width: 296px; grid-template-columns: 92px minmax(0, 1fr); }   /* «Erdgeschosswohnung» passt ohne Trennung */
  .rp-karte-vorschau .rp-karte-bild { aspect-ratio: auto; height: 100%; min-height: 100px; }
  .rp-karte-info { padding: .7rem .85rem .8rem; gap: .1rem; }
}

@media (max-width: 991px) {
  .rp-karte { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 767px) {
  /* Hochformat-Luftbild (picture wählt es bis 767 px), Lagen aus --xh/--yh */
  .rp-karte-flaeche { aspect-ratio: 4 / 5; border-radius: 14px; }
  .rp-karte-ort, .rp-karte-punkt { left: var(--xh); top: var(--yh); }
  .rp-karte-ort.nur-quer { display: none; }
  .rp-karte-legende { left: 10px; top: 10px; padding: .55rem .75rem; }
  .rp-karte-quelle { right: 8px; bottom: 8px; }
  /* Vorschau unter der Karte, verdeckt keine Punkte */
  .rp-karte-vorschau {
    position: static; width: auto; margin-top: .75rem; grid-template-columns: 112px minmax(0, 1fr);
    border: 1px solid var(--imm-linie); box-shadow: none; translate: none;
  }
  .rp-karte-vorschau .rp-karte-bild { aspect-ratio: auto; height: 100%; min-height: 96px; }
  .rp-karte-info { padding: .75rem .9rem; gap: .15rem; }
  .rp-karte-hinweis { display: block; }
  .rp-karte-rahmen.hat-vorschau .rp-karte-hinweis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-karte-punkt i, .rp-karte-vorschau { transition: none; }
}

/* ---------- Einblenden beim Scrollen: nur Verschieben, nie unsichtbar (G5) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rp-imm .rpz-zeile.rp-auf { translate: 0 24px; }
  .rp-imm .rpz-zeile.rp-da { animation: rp-imm-auf .8s var(--imm-ease) both; }
}
@keyframes rp-imm-auf { from { translate: 0 24px; } }
@media (prefers-reduced-motion: reduce) {
  .rp-imm-pille, .rp-imm-pille:hover, .rp-imm .button.portale:hover, .rp-imm .rpz-alle .btn.linie:hover { transform: none; transition: none; }
  .rp-imm-video { transition: none; }
}

/* Sprunglink «Zu den Immobilien»: erster Tab-Stopp, nur bei Fokus sichtbar (G9) */
.rp-sprung { position: fixed; top: 12px; left: 12px; z-index: 3000; padding: 12px 22px; border-radius: 48px; background: #fff; color: #151314; font-weight: 600; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); transform: translateY(-160%); transition: transform .2s; }
.rp-sprung:focus, .rp-sprung:focus-visible { transform: none; outline: 2px solid #194963; outline-offset: 2px; }