/* Ratgeber-Seiten ohne Webflow (Schritt 26, 14.10.2026): /post/* und /blog-category/wissenswertes.
   Grundlage ist rp-ggst.css (Rechner, Schritt 25): Schrift, Titelbild, Container, Brotkrumen, Eyebrow, H2, Raster mit
   Inhaltsverzeichnis, Fliesstext 18/19 px, Kurzfassung, Fragen, Quellen, Feld «Verkauf geplant», Knöpfe. Hier stehen
   nur die Zusätze: Bildlage der Titelbilder, Meta-Zeile, nummerierte Fehlerliste, Karten, Rechner-Band.
   Farben aus dem Designsystem (rp-breite.css): Titel #151314, Text #1d1d1f, leise #4d464a, Meta #3d5466 (7.9:1 auf
   Weiss, 14-px-Labels G7), Blau #194963, Fläche #f5f6f8, Linie #e3e6ea. Radius Karten 14 px, Flächen 24 px. */

/* Linkfarben: rp-ggst.css setzt «.rpg-body a { color: inherit }» (0,1,1) und schlägt damit .rpg-knopf und
   .rpg-textlink (0,1,0); auf dem Rechner sind «Kostenlose Bewertung» und «Rechenweg ansehen» darum unlesbar.
   Hier für diese Seiten richtiggestellt (gleiche Werte wie die Grundregeln). */
.rpg-body a.rpg-knopf { color: #fff; }
.rpg-body a.rpg-textlink { color: var(--g-blau, #194963); }

/* ---------- Titelbild: Bildlage je Seite (Rahmen am Desktop rund 1:1, Bild 3:2) ---------- */
.rpg-hero-bild.rpr-bild--eigenmietwert img { object-position: 74% 50%; }
.rpg-hero-bild.rpr-bild--verkaufen img { object-position: 6% 42%; }
.rpg-hero-bild.rpr-bild--nachhaltigkeit img { object-position: 64% 50%; }
.rpg-hero-bild.rpr-bild--uebersicht img { object-position: 36% 50%; }
.rpr-hero .rpg-hero-titel { max-width: 46rem; }
/* Kopfzeile lesbar über hellem Himmel oder hellen Wänden: leiser Schleier oben im Bild (nur ab 768 px; am Handy
   liegt ohnehin der senkrechte Schleier über dem ganzen Bild). Gemessen 14.10.2026 bei 1440 px: «Über uns» vorher
   1.7 bis 2.0:1 (Rechner 2.9:1). */
@media (min-width: 768px) {
  .rpr-hero .rpg-hero-bild::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; pointer-events: none;
    background: linear-gradient(180deg, rgba(16, 52, 74, .72) 0%, rgba(16, 52, 74, .5) 80px, rgba(16, 52, 74, .18) 150px,
      rgba(16, 52, 74, 0) 220px); }
}
.rpr-ende { white-space: nowrap; }
@media (min-width: 992px) {
  .rpr-hero .rpg-hero-titel.rpr-titel--lang { font-size: clamp(33px, 3.4vw + 14px, 64px); }
}
@media (max-width: 767px) {
  .rpg-hero-bild[class*="rpr-bild--"] img { object-position: 50% 50%; }   /* eigener Hochformat-Ausschnitt */
}
@media (max-width: 479px) {
  .rpr-titel--langwort .rpg-hero-linie { display: none; }   /* «Immobilienbranche» und Strich passen ab 360 px nicht */
}

/* ---------- Beitrag ---------- */
.rpr-beitrag { padding-top: clamp(28px, 3.5vw, 44px); }
.rpr-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 32px;
  margin: 0 0 clamp(36px, 4.5vw, 56px); }
.rpr-kopfzeile > .rpg-krumen { margin: 0; }
.rpr-meta { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; color: #3d5466; font-size: 16px;
  line-height: 1.45; }
.rpr-meta img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.rpr-meta a { color: var(--g-blau); text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .4); text-underline-offset: .18em; }
.rpr-meta a:focus-visible { outline: 2px solid var(--g-blau); outline-offset: 3px; border-radius: 3px; }
.rpr-punkt { margin: 0 8px; }
.rpr-text > .rpg-h2-text:first-child { margin-top: 0; }
.rpr-text .rpg-h3 { scroll-margin-top: 112px; }
.rpr-text .rpg-liste-text strong, .rpr-text .rpg-kurz strong { color: var(--g-titel); font-weight: 600; }
.rpr-text .rpg-quellen li { color: var(--g-text); font-size: clamp(17px, 1.04rem + .2vw, 18px); line-height: 1.55; }

/* Nummerierte Fehlerliste (gleiches Muster wie «So rechnet der Kanton Bern» im Rechner) */
.rpr-schritte > li { padding-bottom: 30px; scroll-margin-top: 112px; }
.rpr-schritte > li > p + p { margin-top: 12px; }
.rpr-schritte > li > .rpg-h3 { margin-bottom: 8px; }

/* Inhaltsverzeichnis: Unterpunkte */
.rpg-inhalt li.rpr-unter a { padding-left: 30px; font-size: 16px; }   /* Höhe wie die Hauptpunkte (44 px Tippziel) */
@media screen and (max-width: 1199px) {
  .rpg-inhalt li.rpr-unter a { padding-left: 16px; }
}

/* ---------- Karten (Mehr aus dem Ratgeber, Übersicht) ---------- */
.rpr-mehr { padding-top: 0; }
.rpr-mehr-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px;
  margin-bottom: clamp(28px, 3.5vw, 44px); }
.rpr-mehr-kopf .rpg-textlink { margin-bottom: 2px; }
.rpr-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin: 0;
  padding: 0; list-style: none; }
.rpr-karte { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden;
  border: 1px solid var(--g-linie); border-radius: var(--rp-radius, 14px); background: #fff; }
.rpr-karte-bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--g-flaeche); }
.rpr-karte-bild picture { display: block; height: 100%; }
.rpr-karte-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rpr-karte-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 22px 24px 24px; }
.rpr-karte-art { margin: 0 0 10px; color: #3d5466; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .12em;
  text-transform: uppercase; }
.rpr-karte-titel { margin: 0; color: var(--g-titel); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  overflow-wrap: break-word; hyphens: manual; }
.rpg-body .rpr-karte-titel a { color: inherit; text-decoration: none; }
.rpr-karte-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rpr-karte-kurz { margin: 10px 0 0; color: var(--g-leise); font-size: 17px; line-height: 1.55; }
.rpr-karte-meta { margin: 12px 0 0; color: #3d5466; font-size: 16px; line-height: 1.45; }
.rpr-karte-mehr { display: inline-flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 18px; color: var(--g-blau);
  font-size: 17px; font-weight: 500; line-height: 1.3; }
.rpr-karte-titel a:focus-visible { outline: 2px solid var(--g-blau); outline-offset: 3px; border-radius: 3px; }
@supports selector(:has(a)) {
  .rpr-karte-titel a:focus-visible { outline: none; }
  .rpr-karte:has(.rpr-karte-titel a:focus-visible) { outline: 2px solid var(--g-blau); outline-offset: 3px; }
}
@media (hover: hover) {
  .rpr-karte:hover { border-color: #c9d2da; }
  .rpr-karte:hover .rpr-karte-titel { color: var(--g-blau); }
}
.rpr-karten--start .rpr-karte-titel { font-size: clamp(22px, 1.15rem + .45vw, 25px); }
.rpr-karten--start .rpr-karte-kurz { font-size: 18px; }

/* ---------- Rechner-Band auf der Übersicht (Petrol wie die Ergebniskarte des Rechners) ---------- */
.rpr-rechner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); margin-top: clamp(40px, 5vw, 64px);
  overflow: hidden; border-radius: var(--rp-radius-flaeche, 24px); background: var(--g-blau); color: #fff; }
.rpr-rechner-text { padding: clamp(32px, 4.5vw, 64px); }
.rpr-rechner .rpg-eyebrow { color: rgba(255, 255, 255, .88); }
.rpr-rechner .rpg-h2 { color: #fff; }
.rpr-rechner-lead { max-width: 34rem; margin: 18px 0 0; color: rgba(255, 255, 255, .92); font-size: clamp(18px, 1.07rem + .25vw, 19px);
  line-height: 1.6; }
.rpr-rechner-meta { margin: 14px 0 30px; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.45; }
.rpr-rechner-bild { position: relative; min-height: 320px; }
.rpr-rechner-bild picture { position: absolute; inset: 0; display: block; }
.rpr-rechner-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; }

/* ---------- Breiten ---------- */
@media screen and (max-width: 991px) {
  .rpr-karten { grid-template-columns: minmax(0, 1fr); }
  .rpr-karte { flex-direction: row; }
  .rpr-karte-bild { flex: 0 0 36%; aspect-ratio: auto; min-height: 200px; }
  .rpr-karte-bild picture { position: absolute; inset: 0; }
  .rpr-rechner { grid-template-columns: minmax(0, 1fr); }
  .rpr-rechner-bild { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}
@media screen and (max-width: 599px) {
  .rpr-karte { flex-direction: column; }
  .rpr-karte-bild { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .rpr-karte-bild picture { position: static; }
  .rpr-karte-text { padding: 20px 20px 22px; }
  .rpr-rechner-text { padding: 28px 22px 32px; }
}
@media screen and (max-width: 479px) {
  .rpr-krumen--beitrag li[aria-current="page"] { display: none; }   /* Titel steht direkt darüber als H1 */
}

/* ---------- Bewegung nur auf Wunsch ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rpr-karte { transition: border-color .3s var(--g-weich, cubic-bezier(.4, 0, .2, 1)); }
  .rpr-karte-titel { transition: color .3s var(--g-weich, cubic-bezier(.4, 0, .2, 1)); }
  .rpr-karte-bild img { transition: transform .6s var(--g-aus, cubic-bezier(.22, 1, .36, 1)); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .rpr-karte:hover .rpr-karte-bild img { transform: scale(1.03); }
}

/* ---------- Druck: nur der Beitrag ---------- */
@media print {
  .rpr-hero .rpg-hero-bild, .rpr-hero .rpg-hero-verlauf, .rpr-hero .rpg-hero-balken, .rpr-hero .rpg-hero-knoepfe,
  .rpr-hero .rpg-hero-pfeil, .rpg-inhalt, .rpr-mehr, .rpr-rechner, .rpg-kontakt { display: none !important; }
  .rpr-hero { background: #fff !important; color: #000 !important; }
  .rpr-hero .rpg-hero-innen { padding: 0 0 16px !important; }
  .rpr-hero .rpg-hero-eyebrow, .rpr-hero .rpg-hero-titel, .rpr-hero .rpg-hero-lead { color: #000 !important; text-shadow: none !important; }
  .rpg-ratgeber-raster { display: block; }
  .rpg-text { max-width: none; }
}