/* =========================================================
   rp-rat-ratgeber.css: Ratgeber (Schritt 94, Paket RAT, Massnahme 22 der SEO-Analyse vom 14.10.2026)
   Gilt für /blog-category/wissenswertes und /post/* (Klasse rp-rat-seite am body) sowie für den Block
   «Ratgeber» auf /vermarktung und /bewertung (rp-rat-weiter).
   Werte aus dem Designsystem (rp-breite.css, 01.10.2026; auf den Ratgeber-Seiten nicht geladen, darum Rückfall):
   Titel #151314, Text #1d1d1f, leise #4d464a, Meta #52697a, Blau #194963, Fläche #f5f6f8, Linie #e3e6ea.
   Fliesstext 18 px Handy, 19 px Desktop (G7). Labels, Eyebrows, Meta-Zeilen und Brotkrumen mit #3d5466 (7.9:1 auf
   Weiss, 7.15:1 auf der Artikelfläche #f1f4f6) oder Blau (9.7:1), weil G7/ZG7 für Labels und Meta mindestens 7:1
   verlangt (Prüfung 14.10.2026 für 14 px, 2. Prüfung 14.10.2026 auch für 16-px-Meta und Brotkrumen).
   Kartenradius 14 px (O25), Hover wie die Projekte-Karten der Startseite (Bild 1.04 in 0.6 s, Titel unterstrichen),
   Bewegung nur bei prefers-reduced-motion: no-preference (G6). Kein Glas (G18), keine neuen beweglichen Knöpfe (G19).
   ========================================================= */

.rp-rat-seite, .rp-rat-weiter {
  --rat-titel: var(--rp-farbe-titel, #151314);
  --rat-text: var(--rp-farbe-text, #1d1d1f);
  --rat-leise: var(--rp-farbe-leise, #4d464a);
  --rat-meta: var(--rp-farbe-meta, #52697a);
  --rat-label: #3d5466;              /* 14-px-Labels: 7.9:1 auf Weiss, 7.0:1 auf der grauen Artikelfläche (G7) */
  --rat-blau: var(--rp-farbe-blau, #194963);
  --rat-flaeche: var(--rp-farbe-flaeche, #f5f6f8);
  --rat-linie: var(--rp-farbe-linie, #e3e6ea);
  --rat-fliesstext: clamp(18px, 1.07rem + .25vw, 19px);
  --rat-aus: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Gemeinsam: Eyebrow, Brotkrumen, Links ---------- */
.rp-rat-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  color: var(--rat-blau); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
}
.rp-rat-eyebrow::before { content: ""; flex: none; width: 22px; height: 1px; background: currentColor; }

.rp-rat-krumen { align-self: stretch; margin: 0 0 20px; text-align: left; }   /* im Webflow-Rahmen .center (zentriert) */
/* 2. Prüfung 14.10.2026: Brotkrumen sind Meta, ZG7/FK4 verlangen dafür 7:1 unabhängig von der Grösse. #52697a hatte
   auf der grauen Artikelfläche #f1f4f6 nur 5.19:1, jetzt --rat-label (7.15:1 dort, 7.9:1 auf Weiss). */
.rp-rat-krumen ol { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0; margin: 0; padding: 0; list-style: none;
  color: var(--rat-label); font-size: 16px; line-height: 1.5; }
.rp-rat-krumen li { display: inline-flex; align-items: center; margin: 0; }
.rp-rat-krumen li + li::before { content: "\203A"; margin: 0 10px; color: #8a97a2; }
.rp-rat-krumen a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rat-label);
  text-decoration: underline; text-decoration-color: rgba(61, 84, 102, .4); text-underline-offset: .2em; }
.rp-rat-krumen a:hover { color: var(--rat-blau); text-decoration-color: currentColor; }
.rp-rat-krumen [aria-current="page"] { color: var(--rat-text); }

.rp-rat-seite a:focus-visible, .rp-rat-weiter a:focus-visible { outline: 2px solid var(--rat-blau); outline-offset: 3px; border-radius: 3px; }

/* Webflow zentriert die H1 unter 1440 px (.heading-normal, Bestand). Mit Brotkrumen, Lead und Autorenzeile links
   stand eine zweizeilige H1 («Ihre Immobilie richtig verkaufen») mittig dazwischen (Prüfung 14.10.2026, 390 px):
   H1 wie ab 1440 px linksbündig. */
.rp-rat-seite .center.blog h1.heading-normal.blog-post { text-align: left; justify-content: flex-start; }
/* Webflow setzt die H1 bis 479 px auf 25 px, die H2 im Text haben hier 28 px: Rangfolge verkehrt (Prüfung 14.10.2026).
   H1 am Handy 32 px, bei sehr schmalen Geräten kleiner (Langwort «Immobilienbranche» passt bis 320 px). */
@media (max-width: 479px) { .rp-rat-seite .center.blog h1.heading-normal.blog-post { font-size: min(32px, 8.4vw); } }
/* Am Handy steht der Titel direkt unter den Brotkrumen: deren letzte Stufe ausblenden, sonst bricht sie mit führendem
   «›» auf eine eigene Zeile (390 px). Die BreadcrumbList im Schema bleibt vollständig, der Titel steht als H1 da. */
@media (max-width: 479px) { .rp-rat-krumen li:nth-child(3)[aria-current="page"] { display: none; } }

/* ---------- Beitrag: Kopf, Autorenzeile, Kurzfassung ---------- */
.rp-rat-seite .description-hero { color: var(--rat-text); }
.rp-rat-autor { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; color: var(--rat-leise); font-size: 16px; line-height: 1.45; }
.rp-rat-autor img { flex: none; width: 48px; height: 48px; max-width: none; border-radius: 50%; object-fit: cover;
  background: var(--rat-linie); box-shadow: 0 0 0 3px #fff; }
.rp-rat-autor a { color: var(--rat-titel); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(21, 19, 20, .25);
  text-underline-offset: .2em; }
.rp-rat-autor a:hover { color: var(--rat-blau); text-decoration-color: currentColor; }
.rp-rat-autor .rp-rat-punkt { margin: 0 6px; color: #8a97a2; }

.rp-rat-kurz { margin: 36px 0 8px; padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid var(--rat-linie);
  border-radius: 14px; }
.rp-rat-kurz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 8px; }
.rp-rat-seite .rp-rat-kurz h2.rp-rat-kurz-titel { margin: 0; color: var(--rat-titel); font-size: clamp(22px, 1.1rem + .6vw, 26px);
  font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.rp-rat-stand { margin: 0; color: var(--rat-label); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.rp-rat-kurz ul { margin: 0; padding: 0; list-style: none; }
.rp-rat-kurz li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rat-linie); color: var(--rat-text);
  font-size: var(--rat-fliesstext); line-height: 1.6; }
.rp-rat-kurz li:last-child { border-bottom: 0; padding-bottom: 0; }
.rp-rat-kurz strong { color: var(--rat-titel); font-weight: 600; }

/* ---------- Beitrag: Fliesstext (G7, vorher 14 bis 16 px) ---------- */
.rp-rat-seite .rp-rat-text { max-width: 44rem; color: var(--rat-text); font-size: var(--rat-fliesstext); line-height: 1.65; }
.rp-rat-seite .rp-rat-text p, .rp-rat-seite .rp-rat-text li { font-size: var(--rat-fliesstext); line-height: 1.65; }
.rp-rat-seite .rp-rat-text p { margin: 0 0 18px; }
.rp-rat-seite .rp-rat-text h2 { margin: clamp(48px, 5vw, 64px) 0 18px; color: var(--rat-titel);
  font-size: clamp(28px, 1.4rem + 1vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.rp-rat-seite .rp-rat-text h3 { margin: 36px 0 12px; color: var(--rat-titel); font-size: clamp(20px, 1.1rem + .4vw, 23px);
  font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.rp-rat-seite .rp-rat-text > h2:first-child, .rp-rat-seite .rp-rat-text > h3:first-child { margin-top: 0; }
.rp-rat-seite .rp-rat-text ul { margin: 0 0 22px; padding-left: 1.25em; }
.rp-rat-seite .rp-rat-text li { margin: 0 0 8px; padding-left: .2em; }
.rp-rat-seite .rp-rat-text li::marker { color: var(--rat-meta); }
.rp-rat-seite .rp-rat-text strong { color: var(--rat-titel); font-weight: 600; }
.rp-rat-seite .rp-rat-text a { color: var(--rat-blau); text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .4);
  text-underline-offset: .18em; }
.rp-rat-seite .rp-rat-text a:hover { text-decoration-color: currentColor; }
.rp-rat-seite .rp-rat-text .rp-rat-hinweis { color: var(--rat-leise); font-size: 16px; line-height: 1.6; }
.rp-rat-seite .rp-rat-text ul.rp-rat-quellen { padding-left: 1.2em; }
.rp-rat-seite .rp-rat-text ul.rp-rat-quellen li { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }

/* ---------- Beitrag: Schluss mit Bewertung ---------- */
/* Abstand unten: die graue Artikelfläche hat unten kein Polster, ohne ihn sass der Kasten bündig auf ihrer Kante
   (Prüfung 14.10.2026, 390 und 1440 px); 16 px am Handy (Fläche 10 px Rand), 40 px am Desktop (Fläche 40 px Rand) */
.rp-rat-schluss { max-width: 44rem; margin: clamp(40px, 5vw, 56px) 0 clamp(16px, 3vw, 40px); padding: clamp(24px, 3vw, 36px);
  background: #fff; border: 1px solid var(--rat-linie); border-radius: 14px; }
.rp-rat-seite .rp-rat-schluss h2.rp-rat-schluss-titel { margin: 0 0 10px; color: var(--rat-titel); font-size: clamp(24px, 1.2rem + .8vw, 30px);
  font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.rp-rat-schluss p { margin: 0 0 22px; color: var(--rat-leise); font-size: var(--rat-fliesstext); line-height: 1.6; }

/* ---------- Beitrag: «Mehr Beiträge» (vorher weisse Schrift auf Weiss, O40) ---------- */
.rp-rat-seite .text-gray { color: var(--rat-meta); }
.rp-rat-seite .bordered-list-item-small .text-small { color: var(--rat-label); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; }
/* Im Markup steht die Liste jetzt nach dem Artikel (Überschriften-Reihenfolge, H1 zuerst). Webflow teilt das Raster
   ab 768 px in 4 plus 8 Spalten: dort bleibt die Liste links (order). Vorher erst ab 992 px, darum stand sie bei
   768 bis 991 px rechts und lief 13 px über den Rand (Prüfung 14.10.2026, 820 px: scrollWidth 833). Bis 767 px legt
   Webflow den Artikel ausdrücklich in Zeile 1, die Liste folgt darunter. */
@media (min-width: 768px) { .rp-rat-seite .rp-rat-mehr { order: -1; } }

@media (max-width: 767px) { .rp-rat-seite .rp-rat-mehr { margin-top: 48px; } }

/* Lange Wörter («Grundstückgewinnsteuer») brachen in der schmalen Spalte (768 bis 991 px, 245 px) nicht um und liefen
   unter das Titelbild (Bestand, im Prüfbau 820 px gesehen): Textspalte darf schrumpfen, das Wort wird getrennt. */
.rp-rat-seite .rp-rat-mehr .h-list-gap-16 { grid-template-columns: auto minmax(0, 1fr); grid-auto-columns: minmax(0, 1fr); }
.rp-rat-seite .rp-rat-mehr .small-post-heading { overflow-wrap: break-word; hyphens: auto; }

/* ---------- Übersicht /blog-category/wissenswertes ---------- */
.rp-rat-seite .text-module h1.heading-reduced { margin: 0; color: var(--rat-titel); font-size: clamp(40px, 1.5rem + 2.6vw, 60px);
  font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.rp-rat-uebersicht { padding: clamp(16px, 2vw, 32px) 0 clamp(56px, 7vw, 104px); }
.rp-rat-seite .rp-rat-lead { max-width: 40rem; margin: 18px 0 0; color: var(--rat-leise); font-size: var(--rat-fliesstext); line-height: 1.6;
  overflow-wrap: break-word; }   /* Firmenname gebunden (2. Prüfung): unter 300 px darf er notfalls brechen */
.rp-rat-liste { display: grid; gap: clamp(28px, 3.5vw, 48px); margin: 0; padding: 0; list-style: none; }
.rp-rat-eintrag { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3.5vw, 56px); align-items: center; margin: 0; }
.rp-rat-bild { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--rat-flaeche); }
.rp-rat-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rp-rat-art { margin: 0 0 10px; color: var(--rat-label); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.rp-rat-seite h2.rp-rat-name { margin: 0; color: var(--rat-titel); font-size: clamp(24px, 1.2rem + 1vw, 34px); font-weight: 500;
  line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.rp-rat-name a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px;
  text-underline-offset: .18em; }
.rp-rat-name a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.rp-rat-kurztext { max-width: 34rem; margin: 12px 0 0; color: var(--rat-leise); font-size: var(--rat-fliesstext); line-height: 1.6; }
.rp-rat-meta { margin: 14px 0 0; color: var(--rat-label); font-size: 16px; line-height: 1.4; }   /* Meta 7:1 (2. Prüfung) */
.rp-rat-eintrag:hover .rp-rat-name a { text-decoration-color: currentColor; }
.rp-rat-eintrag:focus-within .rp-rat-name a:focus-visible { outline: none; }
.rp-rat-eintrag:focus-within:has(a:focus-visible) { outline: 2px solid var(--rat-blau); outline-offset: 6px; border-radius: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .rp-rat-bild img { transition: scale .6s var(--rat-aus); }
  .rp-rat-eintrag:hover .rp-rat-bild img { scale: 1.04; }
}
@media (max-width: 767px) {
  .rp-rat-eintrag { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* Bis 479 px hat der Webflow-Textblock (H1, Lead) 24 px Polster, das Raster nur 10 px: ohne gleiches Polster begann
   der Text der Einträge 10 px vom Rand und 24 px links der H1 (Prüfung 14.10.2026, 390 px) */
@media (max-width: 479px) {
  .rp-rat-seite .rp-rat-uebersicht { padding-left: 24px; padding-right: 24px; }
}

/* ---------- Block «Ratgeber» auf /vermarktung und /bewertung ---------- */
.rp-rat-weiter {
  grid-column: 1 / -1;            /* in Webflow-Rastern immer über die ganze Breite (DESIGN.md Fallen) */
  box-sizing: border-box; width: 100%; max-width: calc(1200px + 2 * clamp(16px, 3.2vw, 24px)); margin: clamp(64px, 8vw, 112px) auto 0;
  padding: 0 clamp(16px, 3.2vw, 24px);
  color: var(--rat-text); font-family: var(--rp-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  text-align: left; letter-spacing: normal;
}
.rp-rat-weiter *, .rp-rat-weiter *::before, .rp-rat-weiter *::after { box-sizing: border-box; }
.rp-rat-weiter-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 5vw, 88px); align-items: start; }
.rp-rat-weiter h2.rp-rat-weiter-titel { margin: 0; color: var(--rat-titel); font-size: var(--rp-h2-klein, clamp(30px, 1.5rem + 1.2vw, 40px));
  font-weight: 500; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.rp-rat-weiter-lead { max-width: 30rem; margin: 16px 0 0; color: var(--rat-leise); font-size: var(--rat-fliesstext); line-height: 1.6; }
.rp-rat-weiter-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rat-linie); }
.rp-rat-weiter-liste li { margin: 0; border-bottom: 1px solid var(--rat-linie); }
.rp-rat-weiter-liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center;
  min-height: 64px; padding: 18px 0; color: var(--rat-titel); text-decoration: none; }
.rp-rat-weiter-name { grid-column: 1; font-size: clamp(19px, 1.05rem + .3vw, 21px); font-weight: 600; line-height: 1.35;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.rp-rat-weiter-text { grid-column: 1; color: var(--rat-leise); font-size: 17px; line-height: 1.5; }
.rp-rat-weiter-liste svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--rat-blau); }
.rp-rat-weiter-liste a:hover .rp-rat-weiter-name { color: var(--rat-blau); text-decoration-color: currentColor; }
.rp-rat-weiter-alle { margin: 20px 0 0; font-size: 17px; }
.rp-rat-weiter-alle a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rat-blau); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .4); text-underline-offset: .2em; }
.rp-rat-weiter-alle a:hover { text-decoration-color: currentColor; }
@media (max-width: 991px) {
  .rp-rat-weiter-raster { grid-template-columns: minmax(0, 1fr); }
}