/* Grundstückgewinnsteuer-Rechner Kanton Bern (Schritt 25, 12.10.2026).
   Werte aus dem Designsystem (rp-breite.css): Titel #151314, Text #1d1d1f, leise #4d464a, Meta #52697a,
   Blau #194963, Fläche #f5f6f8, Linie #e3e6ea. Felder, Pillen und Knopf wie die Kontakt-Komponente (rp-kontakt.css),
   Typografie und Abstände wie die Ortsseiten (rp-ortsseite.css). Fliesstext 19 px Desktop, 18 px Handy (G7). */

/* ---------- Ohne Webflow (Nicolas 12.10.2026): Schrift, Grundstile, Container, Titelbild ----------
   Die Seite lädt kein Webflow-CSS und kein webflow.js. Grundstile nur so weit, wie Menü (rp-menue.css), Kontakt-
   Komponente (rp-kontakt.css) und Footer (rp-fusszeile-global.css) sie von Webflow erwartet hatten. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/assets/fonts/inter-latin-v20.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: only light;
  --rp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rp-farbe-titel: #151314; --rp-farbe-text: #1d1d1f; --rp-farbe-leise: #4d464a; --rp-farbe-meta: #52697a;
  --rp-farbe-vorzeile: #6e6e73; --rp-farbe-blau: #194963; --rp-farbe-flaeche: #f5f6f8; --rp-farbe-linie: #e3e6ea;
  --rp-h2: clamp(2.125rem, 1.45rem + 2.1vw, 3.125rem); --rp-h2-klein: clamp(30px, 1.5rem + 1.2vw, 40px);
  --rp-radius: 14px; --rp-radius-flaeche: 24px; --rp-rand: clamp(16px, 3.2vw, 24px); --rp-inhalt: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body.rpg-body { margin: 0; overflow-x: clip; background: #fff; color: #1d1d1f; font-family: var(--rp-font); font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.rpg-body img, .rpg-body video { max-width: 100%; height: auto; vertical-align: middle; }
.rpg-body svg:not(:root) { overflow: hidden; }
.rpg-body button, .rpg-body input, .rpg-body select, .rpg-body textarea { font: inherit; }
.rpg-body [hidden] { display: none !important; }
.rpg-body main { display: block; }
.rpg-body a { color: inherit; }
::selection { background: #cfe0ea; color: #10344a; }
.rpg-container { width: 100%; max-width: calc(var(--rp-inhalt) + 2 * var(--rp-rand)); margin: 0 auto; padding: 0 var(--rp-rand); }

/* Titelbild wie die übrigen Seiten (Webflow-Hülle nachgebaut, gemessen 12.10.2026 auf /immobilienmakler-ittigen):
   Petrol #194963, Bild 60 % rechts, S-Kurve bis 55 % (rp-titelverlauf.css), weisser Balken 8 % unter dem blauen Feld,
   Titel 80/500, Knöpfe 61 px. Am Handy Bild vollflächig mit senkrechtem Schleier. */
.rpg-hero { position: relative; isolation: isolate; overflow: hidden; background: #194963; color: #fff; }
.rpg-hero > .rp-kopf-platz { position: relative; z-index: 2; }
.rpg-hero-bild { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 60%; }
.rpg-hero-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; }
.rpg-hero-verlauf { position: absolute; z-index: 1; top: 0; right: 0; bottom: calc(8% - 1px); width: 60%; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(25, 73, 99, 1) 0%, rgba(25, 73, 99, .993) 5%, rgba(25, 73, 99, .955) 10%, rgba(25, 73, 99, .871) 15%,
    rgba(25, 73, 99, .743) 20%, rgba(25, 73, 99, .585) 25%, rgba(25, 73, 99, .415) 30%, rgba(25, 73, 99, .257) 35%,
    rgba(25, 73, 99, .129) 40%, rgba(25, 73, 99, .045) 45%, rgba(25, 73, 99, .007) 50%, rgba(25, 73, 99, 0) 55%); }
.rpg-hero-balken { position: absolute; z-index: 1; left: 0; bottom: 0; width: 40%; height: 8%; background: #fff; }
.rpg-hero-innen { position: relative; z-index: 2; padding-top: clamp(64px, 7.6vw, 110px); padding-bottom: clamp(150px, 12vw, 172px); }
.rpg-hero-eyebrow { margin: 0 0 10px; color: #fff; font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.rpg-hero-titel { max-width: 44rem; margin: 0; color: #fff; font-size: clamp(33px, 4.6vw + 14px, 80px); font-weight: 500; line-height: 1.044;
  letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 1px 18px rgba(8, 26, 38, .35); }
.rpg-hero-linie { display: inline-block; width: 140px; height: 4px; margin-left: 16px; vertical-align: .24em; background: #fff; }
.rpg-hero-lead { max-width: 30rem; margin: 18px 0 32px; color: #f9f6f6; font-size: 18px; line-height: 1.55; text-shadow: 0 1px 18px rgba(8, 26, 38, .35); }
.rpg-hero-knoepfe { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.rpg-hero-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 61px; padding: 20px 38px;
  border: 1px solid #fff; border-radius: 48px; background: #fff; color: #110f0e !important; font-size: 17px; font-weight: 500;
  line-height: 1.111; text-decoration: none; }
.rpg-hero-knopf--linie { border-color: #dbd3d3; background: transparent; color: #fff !important; font-weight: 400; }
.rpg-hero-knopf:focus-visible, .rpg-hero-pfeil:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) {
  .rpg-hero-knopf:hover { background: #e9f0f4; border-color: #e9f0f4; }
  .rpg-hero-knopf--linie:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
  .rpg-hero-pfeil:hover { background: rgba(255, 255, 255, .12); }
}
.rpg-hero-pfeil { position: absolute; right: var(--rp-rand); bottom: 20px; display: grid; place-items: center; width: 140px; height: 140px;
  border: 1px solid #dbd3d3; border-radius: 50%; color: #fff; }
.rpg-hero-pfeil svg { width: 34px; height: 34px; }
@media (min-width: 768px) and (max-width: 991px) {
  .rpg-hero-verlauf { bottom: 0; background: linear-gradient(90deg,
    rgba(25, 73, 99, 1) 0%, rgba(25, 73, 99, .991) 8%, rgba(25, 73, 99, .942) 16%, rgba(25, 73, 99, .837) 24%,
    rgba(25, 73, 99, .683) 32%, rgba(25, 73, 99, .5) 40%, rgba(25, 73, 99, .317) 48%, rgba(25, 73, 99, .163) 56%,
    rgba(25, 73, 99, .058) 64%, rgba(25, 73, 99, .009) 72%, rgba(25, 73, 99, 0) 80%); }
  .rpg-hero-eyebrow { font-size: 20px; }
  .rpg-hero-pfeil { width: 120px; height: 120px; }
}
@media (max-width: 767px) {
  .rpg-hero-bild, .rpg-hero-verlauf { width: 100%; }
  .rpg-hero-bild img { object-position: 50% 40%; }
  .rpg-hero-verlauf { bottom: 0; background: linear-gradient(180deg, rgba(12, 36, 52, .66) 0%, rgba(12, 36, 52, .58) 40%,
    rgba(12, 36, 52, .64) 70%, rgba(12, 36, 52, .8) 100%); }
  .rpg-hero-balken { display: none; }
  .rpg-hero-innen { padding-top: 30px; padding-bottom: 124px; }
  .rpg-hero-eyebrow { font-size: 15px; letter-spacing: 0; }
  .rpg-hero-titel { font-size: min(38px, 9.2vw); letter-spacing: -.03em; }
  .rpg-hero-linie { width: 64px; height: 3px; margin-left: 8px; }
  .rpg-hero-lead { margin: 14px 0 22px; }
  .rpg-hero-knoepfe { flex-direction: column; gap: 14px; }
  .rpg-hero-knopf { width: 100%; min-height: 53px; padding: 16px 28px; }
  .rpg-hero-pfeil { width: 80px; height: 80px; bottom: 22px; }
  .rpg-hero-pfeil svg { width: 26px; height: 26px; }
}
.rpg-kontakt { padding-top: clamp(16px, 3vw, 40px); }

html { scroll-padding-top: 112px; }
/* Sprunglink wie /unsere-immobilien (rp-immobilien.css) */
.rp-sprung { position: fixed; top: 12px; left: 12px; z-index: 3000; padding: 12px 22px; border-radius: 48px; background: #fff; color: #151314; font-weight: 600; text-decoration: none; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); transform: translateY(-160%); }
.rp-sprung:focus, .rp-sprung:focus-visible { transform: none; outline: 2px solid #194963; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .rp-sprung { transition: transform .2s cubic-bezier(.22, 1, .36, 1); } }
.rpg-seite {
  --g-blau: var(--rp-farbe-blau, #194963);
  --g-blau-tief: #10344a;
  --g-titel: var(--rp-farbe-titel, #151314);
  --g-text: var(--rp-farbe-text, #1d1d1f);
  --g-leise: var(--rp-farbe-leise, #4d464a);
  --g-meta: var(--rp-farbe-meta, #52697a);
  --g-flaeche: var(--rp-farbe-flaeche, #f5f6f8);
  --g-linie: var(--rp-farbe-linie, #e3e6ea);
  --g-rand: #86909a;
  --g-rand-hover: #5c6670;
  --g-fehler: #a3261f;
  --g-weich: cubic-bezier(.4, 0, .2, 1);
  --g-aus: cubic-bezier(.22, 1, .36, 1);
  color: var(--g-text);
  font-size: 18px;
  line-height: 1.6;
}
.rpg-seite *, .rpg-seite *::before, .rpg-seite *::after { box-sizing: border-box; }
.rpg-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rpg-klein { color: inherit; font-size: 16px; font-weight: 400; opacity: .9; font-variant-numeric: tabular-nums; }

/* ---------- Abschnitte, Kopf ---------- */
.rpg-abschnitt { padding: clamp(56px, 7vw, 96px) 0; }
.rpg-rechner { padding-top: clamp(28px, 3.5vw, 44px); }
.rpg-cta-abschnitt { padding-top: 0; }
.rpg-krumen { margin: 0 0 clamp(36px, 4.5vw, 56px); }
.rpg-krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.5; color: var(--g-meta); }
.rpg-krumen li { display: inline-flex; align-items: center; }
.rpg-krumen a { display: inline-flex; align-items: center; min-height: 44px; }
.rpg-krumen li + li::before { content: "›"; margin: 0 10px; color: #8a97a2; }
.rpg-krumen a { color: var(--g-meta); text-decoration: underline; text-decoration-color: rgba(82, 105, 122, .35); text-underline-offset: .2em; }
.rpg-krumen a:hover { color: var(--g-blau); text-decoration-color: currentColor; }
.rpg-krumen [aria-current="page"] { color: var(--g-text); }

.rpg-kopf { max-width: 52rem; margin-bottom: clamp(32px, 4vw, 52px); }
.rpg-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--g-blau); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.rpg-eyebrow::before { content: ""; flex: none; width: 22px; height: 1px; background: currentColor; }
.rpg-h2 { margin: 0; color: var(--g-text); font-size: var(--rp-h2, clamp(2.125rem, 1.45rem + 2.1vw, 3.125rem)); font-weight: 500; line-height: 1.15; letter-spacing: -1px; text-wrap: balance; }
.rpg-h2-klein { font-size: var(--rp-h2-klein, clamp(30px, 1.5rem + 1.2vw, 40px)); }
.rpg-lead { max-width: 46rem; margin: 20px 0 0; color: var(--g-text); font-size: clamp(18px, 1.07rem + .25vw, 19px); line-height: 1.6; }
.rpg-h3 { margin: 0 0 10px; color: var(--g-titel); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.rpg-pfeil { flex: none; width: 18px; height: 18px; }
.rpg-winkel { flex: none; width: 18px; height: 18px; color: #6b7c88; }
details[open] > summary .rpg-winkel { transform: rotate(180deg); }

/* ---------- Raster Rechner ---------- */
.rpg-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }

/* Formular */
.rpg-form { display: grid; gap: 0; margin: 0; }
.rpg-beispiel { margin: 0 0 8px; padding: 14px 18px; border-radius: 10px; background: var(--g-flaeche); color: var(--g-leise); font-size: 16px; line-height: 1.5; }
.rpg-nowrap { white-space: nowrap; }
.rpg-textknopf { display: inline; margin: -10px 0; padding: 10px 0; border: 0; background: none; color: var(--g-blau); font: inherit; text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .4); text-underline-offset: .18em; cursor: pointer; }
.rpg-textknopf:hover { text-decoration-color: currentColor; }
.rpg-gruppe { min-width: 0; margin: 0; padding: 28px 0 30px; border: 0; border-bottom: 1px solid var(--g-linie); display: grid; gap: 22px; }
.rpg-gruppe-titel { float: left; width: 100%; margin: 0 0 4px; padding: 0; color: var(--g-titel); font-size: 22px; font-weight: 600; line-height: 1.3; }
.rpg-gruppe-titel + * { clear: both; }
.rpg-zweier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; align-items: end; }
.rpg-feld { display: grid; gap: 8px; min-width: 0; align-content: start; }
.rpg-feld[hidden], .rpg-gruppe [hidden] { display: none; }
.rpg-feld > label, .rpg-pillen-feld > legend {
  display: block; margin: 0; padding: 0; color: var(--g-text); font-size: 16px; font-weight: 600; line-height: 1.35;
}
.rpg-frei { color: var(--g-leise); font-weight: 400; }
.rpg-hilfe { margin: -2px 0 2px; color: var(--g-leise); font-size: 16px; line-height: 1.45; }
.rpg-hilfe a { color: var(--g-blau); text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .4); text-underline-offset: .18em; }
.rpg-hilfe a:hover { text-decoration-color: currentColor; }
.rpg-monat { margin: 0; }
.rpg-seite input[type="text"], .rpg-seite input[type="search"], .rpg-seite select {
  display: block; width: 100%; height: auto; min-height: 56px; margin: 0; padding: 14px 16px;
  font: inherit; font-size: 18px; line-height: 1.4; color: var(--g-text); font-variant-numeric: tabular-nums;
  background: #fff; border: 1px solid var(--g-rand); border-radius: 10px; box-shadow: none;
  outline: 2px solid transparent; outline-offset: 2px;
  -webkit-appearance: none; appearance: none;
}
.rpg-seite select { padding-right: 48px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2352697a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 18px 18px; }
.rpg-seite input:focus, .rpg-seite select:focus { border-color: var(--g-blau); box-shadow: 0 0 0 1px var(--g-blau), 0 0 0 5px rgba(25, 73, 99, .14); }
.rpg-seite input[aria-invalid="true"] { border-color: var(--g-fehler); box-shadow: 0 0 0 1px var(--g-fehler); }
.rpg-seite input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--g-fehler), 0 0 0 5px rgba(163, 38, 31, .14); }
.rpg-seite :is(input, select, button, summary, a) { scroll-margin-top: 112px; scroll-margin-bottom: 96px; }
.rpg-fehler { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--g-fehler); font-size: 16px; line-height: 1.4; }
.rpg-fehler[hidden] { display: none; }
.rpg-fehler::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--g-fehler); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
@media (hover: hover) {
  .rpg-seite input:not(:focus):not([aria-invalid="true"]):hover, .rpg-seite select:not(:focus):hover { border-color: var(--g-rand-hover); }
}

/* Pillen (wie Anliegen im Kontaktformular) */
.rpg-pillen-feld { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.rpg-pillen-feld > legend { float: left; width: 100%; margin-bottom: 8px; }
.rpg-pillen-feld > legend + * { clear: both; }
.rpg-pillen { display: flex; flex-wrap: wrap; gap: 10px; }
.rpg-pillen label { position: relative; display: block; margin: 0; font-weight: inherit; cursor: pointer; }
.rpg-pillen input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  border: 1px solid var(--g-rand); border-radius: 999px; background: #fff; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.rpg-pillen span {
  position: relative; z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 20px; color: var(--g-text); font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center;
}
.rpg-pillen input:checked { background: var(--g-blau); border-color: var(--g-blau); }
.rpg-pillen input:checked + span { color: #fff; }
.rpg-pillen input:focus-visible { outline: 2px solid var(--g-blau); outline-offset: 3px; }
@media (hover: hover) { .rpg-pillen label:hover input:not(:checked) { border-color: var(--g-blau); background: #eef3f6; } }

/* Gemeindesuche */
.rpg-combo-huelle { position: relative; }
.rpg-liste {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: min(22rem, 60vh); overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #c9d2da; border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(16, 52, 74, .28);
}
.rpg-liste[hidden] { display: none; }
.rpg-liste [role="option"] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; min-height: 48px; padding: 11px 14px; border-radius: 8px; cursor: pointer; }
.rpg-liste [aria-selected="true"] { background: #eef3f6; box-shadow: inset 3px 0 0 var(--g-blau); }
@media (hover: hover) { .rpg-liste [role="option"]:hover { background: #f2f5f7; } }
.rpg-opt-name { color: var(--g-text); font-size: 18px; font-weight: 600; }
.rpg-opt-zusatz { color: var(--g-leise); font-size: 16px; font-variant-numeric: tabular-nums; }
.rpg-opt-leer { padding: 12px 14px; color: var(--g-leise); font-size: 16px; line-height: 1.45; }

/* Weitere Angaben */
.rpg-weitere { border-bottom: 1px solid var(--g-linie); }
.rpg-weitere > summary, .rpg-weg > summary, .rpg-gemeinden > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 8px 0;
  color: var(--g-titel); font-size: 19px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none;
}
.rpg-seite summary::-webkit-details-marker { display: none; }
.rpg-seite summary:focus-visible { outline: 2px solid var(--g-blau); outline-offset: 4px; border-radius: 4px; }
.rpg-weitere-inhalt { display: grid; gap: 22px; padding: 4px 0 28px; }
.rpg-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
.rpg-check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--g-blau); cursor: pointer; }
.rpg-check label { margin: 0; color: var(--g-text); font-size: 18px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.rpg-ohne-js { margin: 20px 0 0; color: var(--g-leise); font-size: 16px; }

/* ---------- Ergebniskarte ---------- */
.rpg-ergebnis { position: sticky; top: 112px; align-self: start; }
@media (min-width: 1200px) { .rpg-erg-innen { min-height: 775px; } }   /* RE7: Höhe im Zustand ok, keine Sprünge */
.rpg-erg-innen {
  padding: clamp(26px, 3vw, 38px); border-radius: var(--rp-radius, 14px); background: var(--g-blau); color: #fff;
  box-shadow: 0 24px 48px -28px rgba(16, 52, 74, .55);
}
.rpg-erg-label { margin: 0; color: rgba(255, 255, 255, .86); font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rpg-erg-betrag { margin: 8px 0 0; color: #fff; font-size: clamp(40px, 2rem + 2.2vw, 58px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpg-erg-personen { margin: 4px 0 0; color: rgba(255, 255, 255, .86); font-size: 16px; }
.rpg-erg-personen[hidden], .rpg-erg-teile[hidden], .rpg-erg-fakten[hidden], .rpg-erg-jahrestag[hidden] { display: none; }
.rpg-erg-zusatz { min-height: 3.2em; margin: 12px 0 0; color: rgba(255, 255, 255, .9); font-size: 18px; line-height: 1.5; }
.rpg-erg-teile { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .22); }
.rpg-erg-teile li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 18px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.rpg-erg-teile li > span:last-child { font-weight: 600; }
.rpg-erg-fakten { margin: 16px 0 0; }
.rpg-erg-fakten > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; padding: 8px 0; }
.rpg-erg-fakten dt { color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.4; }
.rpg-erg-fakten dd { margin: 0 0 0 auto; color: #fff; font-size: 18px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rpg-erg-fakten .rpg-netto { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
.rpg-erg-jahrestag { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 16px; line-height: 1.45; }
.rpg-erg-hinweis { margin: 18px 0 0; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.5; }
.rpg-erg-aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.rpg-erg-aktionen > :first-child { grid-column: 1 / -1; }
.rpg-erg-knopf[hidden] { display: none; }
.rpg-erg-link, .rpg-erg-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 48px; background: transparent; color: #fff;
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.rpg-erg-link { background: #fff; border-color: #fff; color: var(--g-blau); }
/* 24.10.2026: .rpg-body a { color: inherit } (0,1,1) schlug .rpg-erg-link (0,1,0), «Rechenweg ansehen» war weiss auf weiss */
.rpg-erg-innen .rpg-erg-link { color: var(--g-blau); }
.rpg-erg-innen :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) {
  .rpg-erg-knopf:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
  .rpg-erg-link:hover { background: #e9f0f4; }
}
.rpg-erg-status { min-height: 1.4em; margin: 10px 0 0; color: #fff; font-size: 16px; }
.rpg-ergebnis:not([data-status="ok"]) .rpg-erg-betrag { color: rgba(255, 255, 255, .7); }

/* ---------- Besitzdauer-Grafik ---------- */
.rpg-zeit { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--g-linie); }
.rpg-zeit[hidden] { display: none; }
.rpg-zeit-lead { max-width: 46rem; margin: 0 0 18px; color: var(--g-leise); font-size: 18px; line-height: 1.5; }
.rpg-grafik { width: 100%; min-height: 230px; }
.rpg-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.rpg-gitter { stroke: var(--g-linie); stroke-width: 1; shape-rendering: crispEdges; }
.rpg-achse { fill: var(--g-leise); font-size: 15px; font-variant-numeric: tabular-nums; }
.rpg-achse-titel { fill: var(--g-leise); }
.rpg-saeule { fill: #8fa7b8; }
.rpg-saeule-zuschlag { fill: #b9906f; }
.rpg-saeule-aktiv { fill: var(--g-blau); }
@media (hover: hover) { .rpg-saeule:hover { fill: #6f8a9c; } .rpg-saeule-zuschlag:hover { fill: #a9805f; } .rpg-saeule-aktiv:hover { fill: var(--g-blau-tief); } }
.rpg-marke { fill: var(--g-titel); font-size: 16px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.rpg-marke-linie { stroke: var(--g-titel); stroke-width: 1; }
.rpg-zeit-text { max-width: 52rem; margin: 18px 0 0; color: var(--g-text); font-size: 18px; line-height: 1.6; }
.rpg-legende { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 6px; padding: 0; list-style: none; color: var(--g-leise); font-size: 16px; }
.rpg-legende li { display: inline-flex; align-items: center; gap: 8px; }
.rpg-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #8fa7b8; }
.rpg-legende .z { background: #b9906f; }
.rpg-legende .a { background: var(--g-blau); }

/* ---------- Rechenweg ---------- */
.rpg-weg { margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--g-linie); border-bottom: 1px solid var(--g-linie); }
.rpg-weg-inhalt { padding: 0 0 24px; overflow-x: auto; }
.rpg-weg-leer { margin: 0; color: var(--g-leise); font-size: 18px; }
.rpg-weg-tabelle { width: 100%; max-width: 46rem; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.rpg-weg-tabelle th, .rpg-weg-tabelle td { padding: 9px 0; border-bottom: 1px solid var(--g-linie); vertical-align: baseline; }
.rpg-weg-tabelle th { padding-right: 20px; color: var(--g-text); font-weight: 400; text-align: left; }
.rpg-weg-tabelle td { color: var(--g-text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpg-weg-tabelle .rpg-summe th, .rpg-weg-tabelle .rpg-summe td { font-weight: 600; }
.rpg-weg-tabelle .rpg-stufe th, .rpg-weg-tabelle .rpg-stufe td { color: var(--g-leise); font-size: 16px; padding-top: 6px; padding-bottom: 6px; }
.rpg-weg-tabelle .rpg-stufe th { padding-left: 16px; }
.rpg-weg-tabelle .rpg-total th, .rpg-weg-tabelle .rpg-total td { color: var(--g-titel); font-size: 18px; font-weight: 700; border-bottom: 2px solid var(--g-text); }
.rpg-weg-hinweis { max-width: 46rem; margin: 14px 0 0; color: var(--g-leise); font-size: 16px; }

/* Ergebnisleiste am Handy */
.rpg-leiste {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: none; align-items: center; gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--g-blau); color: #fff; text-decoration: none; box-shadow: 0 -10px 30px -12px rgba(16, 52, 74, .45);
  transform: translateY(110%); visibility: hidden;
}
.rpg-leiste span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.rpg-leiste strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpg-leiste-pfeil { display: inline-flex; transform: rotate(90deg); }
.rpg-leiste.ist-sichtbar { transform: none; visibility: visible; }
.rpg-leiste:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- Verkauf geplant ---------- */
.rpg-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(32px, 4.5vw, 64px); border-radius: var(--rp-radius-flaeche, 24px); background: var(--g-flaeche); }
.rpg-cta-text p:not(.rpg-eyebrow) { max-width: 44rem; margin: 18px 0 0; color: var(--g-text); font-size: clamp(18px, 1.07rem + .25vw, 19px); line-height: 1.6; }
.rpg-cta-aktionen { display: grid; justify-items: start; gap: 14px; }
.rpg-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 18px 38px;
  border: 1px solid #151314; border-radius: 48px; background: #151314; color: #fff;
  font-size: 17px; font-weight: 500; line-height: 1.111; text-align: center; text-decoration: none;
}
.rpg-knopf:focus-visible { outline: 2px solid var(--g-blau); outline-offset: 3px; }
@media (hover: hover) { .rpg-knopf:hover { background: var(--g-blau-tief); border-color: var(--g-blau-tief); } }
.rpg-textlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--g-blau); font-size: 18px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .35); text-underline-offset: .22em; }
.rpg-textlink:hover { text-decoration-color: currentColor; }
.rpg-textlink:focus-visible, .rpg-inline:focus-visible, .rpg-text a:focus-visible, .rpg-krumen a:focus-visible, .rpg-textknopf:focus-visible, .rpg-hilfe a:focus-visible { outline: 2px solid var(--g-blau); outline-offset: 3px; border-radius: 3px; }

/* ---------- Ratgeber ---------- */
.rpg-ratgeber { padding-top: clamp(40px, 5vw, 72px); }
.rpg-ratgeber-raster { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rpg-inhalt { position: sticky; top: 112px; }
.rpg-inhalt-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: var(--g-meta); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; list-style: none; }
.rpg-inhalt ol { margin: 6px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--g-linie); }
.rpg-inhalt li a { display: block; padding: 11px 0 11px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--g-leise); font-size: 16px; line-height: 1.4; text-decoration: none; }
.rpg-inhalt li a:hover { color: var(--g-blau); border-left-color: var(--g-blau); }
.rpg-inhalt li a[aria-current="true"] { color: var(--g-blau); border-left-color: var(--g-blau); font-weight: 600; }
.rpg-inhalt li a:focus-visible { outline: 2px solid var(--g-blau); outline-offset: 2px; }
@media (min-width: 1200px) { .rpg-inhalt-details > summary { pointer-events: none; } .rpg-inhalt-details > summary .rpg-winkel { display: none; } }

.rpg-text { max-width: 46rem; min-width: 0; }
.rpg-text > p, .rpg-text li, .rpg-beispiel-karte p { color: var(--g-text); font-size: clamp(18px, 1.07rem + .25vw, 19px); line-height: 1.65; }
.rpg-text > p { margin: 0 0 18px; }
.rpg-h2-text { margin: clamp(56px, 6vw, 80px) 0 20px; color: var(--g-text); font-size: var(--rp-h2-klein, clamp(30px, 1.5rem + 1.2vw, 40px)); font-weight: 500; line-height: 1.2; letter-spacing: -.5px; text-wrap: balance; scroll-margin-top: 112px; }
.rpg-text > .rpg-h2-text:first-child { margin-top: 0; }
.rpg-text > .rpg-h3 { margin-top: 32px; }
.rpg-text a:not(.rpg-knopf):not(.rpg-textlink) { color: var(--g-blau); text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .4); text-underline-offset: .18em; }
.rpg-text a:not(.rpg-knopf):not(.rpg-textlink):hover { text-decoration-color: currentColor; }
.rpg-kurz { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--g-linie); }
.rpg-kurz li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--g-linie); }
.rpg-kurz strong { color: var(--g-titel); font-weight: 600; }
.rpg-schritte { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.rpg-schritte > li { position: relative; margin: 0; padding: 0 0 22px 56px; counter-increment: schritt; }
.rpg-schritte > li::before { content: counter(schritt); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--g-blau); border-radius: 50%; color: var(--g-blau); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rpg-schritte > li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 40px; bottom: 4px; width: 1px; background: var(--g-linie); }
.rpg-schritte p { margin: 0; }
.rpg-liste-text { margin: 0 0 18px; padding-left: 1.2em; }
.rpg-liste-text li { margin: 0 0 8px; padding-left: 4px; }
.rpg-liste-text li::marker { color: var(--g-blau); }
.rpg-zwei-listen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; margin: 10px 0 8px; }
.rpg-zwei-listen .rpg-h3 { margin-top: 12px; }
.rpg-ablauf { margin: 0 0 18px; padding-left: 1.4em; }
.rpg-ablauf li { margin: 0 0 12px; padding-left: 6px; }
.rpg-ablauf li::marker { color: var(--g-blau); font-weight: 600; }
.rpg-inline { white-space: nowrap; }

/* Tabellen */
.rpg-tabelle-huelle { overflow-x: auto; margin: 8px 0 24px; -webkit-overflow-scrolling: touch; }
.rpg-tabelle-huelle:focus-visible { outline: 2px solid var(--g-blau); outline-offset: 2px; }
.rpg-tabelle { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.rpg-tabelle caption { padding: 0 0 10px; color: var(--g-leise); font-size: 16px; text-align: left; caption-side: top; }
.rpg-tabelle-titel { margin: 8px 0 0 !important; color: var(--g-leise) !important; font-size: 16px !important; line-height: 1.5 !important; }
.rpg-tabelle-titel + .rpg-tabelle-huelle, .rpg-wischen + .rpg-tabelle-huelle { margin-top: 4px; }
.rpg-wischen { display: none; margin: 2px 0 0 !important; color: var(--g-leise) !important; font-size: 16px !important; }
.rpg-tabelle-scroll-x .rpg-tabelle-typ tbody th, .rpg-tabelle-scroll-x .rpg-tabelle-typ thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.rpg-tabelle th, .rpg-tabelle td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--g-linie); text-align: right; vertical-align: baseline; white-space: nowrap; }
.rpg-tabelle th:first-child, .rpg-tabelle td:first-child { text-align: left; }
.rpg-tabelle td:last-child, .rpg-tabelle th:last-child { padding-right: 0; }
.rpg-tabelle thead th { color: var(--g-leise); font-size: 16px; font-weight: 600; border-bottom: 1px solid #c9d2da; white-space: normal; vertical-align: bottom; }
.rpg-tabelle tbody th { color: var(--g-text); font-weight: 500; }
.rpg-tabelle .rpg-klein { display: block; color: var(--g-leise); font-size: 14px; }
.rpg-zwei-tabellen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.rpg-tabelle-eng th, .rpg-tabelle-eng td { padding-top: 8px; padding-bottom: 8px; font-size: 16px; }
.rpg-gemeinden { margin: 8px 0 24px; border-top: 1px solid var(--g-linie); border-bottom: 1px solid var(--g-linie); }
.rpg-gemeinden-inhalt { padding: 6px 0 20px; }
.rpg-filter { max-width: 28rem; margin-bottom: 16px; }
.rpg-tabelle-scroll { max-height: 70vh; overflow: auto; margin-top: 0; border: 1px solid var(--g-linie); border-radius: 10px; }
.rpg-gemeinde-tabelle th, .rpg-gemeinde-tabelle td { padding-left: 12px; padding-right: 12px; }
.rpg-gemeinde-tabelle thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.rpg-gemeinde-tabelle caption { padding: 12px; }
.rpg-gemeinde-tabelle tbody th { white-space: normal; min-width: 11rem; }
.rpg-gemeinde-tabelle tbody th a { display: inline-block; padding: 4px 0; color: var(--g-blau); }
.rpg-teilzeile th { padding-left: 28px !important; color: var(--g-leise) !important; font-weight: 400 !important; font-size: 16px; }
.rpg-teilzeile td { color: var(--g-leise); font-size: 16px; }
.rpg-gemeinde-tabelle tr[hidden] { display: none; }
.rpg-klein-text { color: var(--g-leise) !important; font-size: 16px !important; line-height: 1.5 !important; }
.rpg-klein-text a { color: var(--g-blau); }
.rpg-quellen { margin: 0 0 18px; padding-left: 1.2em; }
.rpg-quellen li { margin: 0 0 8px; }

/* Beispiele */
.rpg-beispiel-karte { margin: 28px 0 0; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--g-linie); border-radius: var(--rp-radius, 14px); background: #fff; }
.rpg-beispiel-karte p { margin: 0 0 14px; }
.rpg-beispiel-karte .rpg-tabelle-huelle { margin: 6px 0 18px; }
.rpg-beispiel-karte .rpg-weg-tabelle { max-width: none; font-size: 16px; }
.rpg-beispiel-karte p:last-of-type { margin-bottom: 0; }
.rpg-bsp-weg { margin-top: 16px; border-top: 1px solid var(--g-linie); }
.rpg-bsp-weg > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 8px 0 0; color: var(--g-blau); font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.rpg-bsp-weg > summary span { text-decoration: underline; text-decoration-color: rgba(25, 73, 99, .35); text-underline-offset: .2em; }

/* FAQ */
.rpg-faq-liste { border-top: 1px solid var(--g-linie); }
.rpg-faq { border-bottom: 1px solid var(--g-linie); }
.rpg-faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; }
.rpg-faq-frage { margin: 0; color: var(--g-titel); font-size: 19px; font-weight: 600; line-height: 1.4; }
.rpg-faq-antwort { padding: 0 0 20px; }
.rpg-faq-antwort p { margin: 0; color: var(--g-text); font-size: clamp(18px, 1.07rem + .25vw, 19px); line-height: 1.65; }
@media (hover: hover) { .rpg-faq > summary:hover .rpg-faq-frage { color: var(--g-blau); } }


/* ---------- Breiten ---------- */
@media screen and (max-width: 1199px) {
  .rpg-ratgeber-raster { grid-template-columns: minmax(0, 1fr); }
  .rpg-inhalt { position: static; border-top: 1px solid var(--g-linie); border-bottom: 1px solid var(--g-linie); }
  .rpg-inhalt ol { columns: 2 16rem; column-gap: 32px; border-left: 0; padding-bottom: 12px; }
  .rpg-inhalt li { break-inside: avoid; }
  .rpg-inhalt li a { padding-left: 0; border-left: 0; }
  .rpg-text { max-width: 48rem; }
}
@media screen and (max-width: 991px) {
  .rpg-raster { grid-template-columns: minmax(0, 1fr); }
  .rpg-ergebnis { position: static; }
  .rpg-cta { grid-template-columns: minmax(0, 1fr); }
  .rpg-leiste { display: flex; }
}
@media screen and (max-width: 991px) and (max-height: 479px) {
  .rpg-leiste { display: none; }
  .rpg-seite { padding-bottom: 0; }
}
@media screen and (max-width: 767px) {
  .rpg-zwei-listen, .rpg-zwei-tabellen { grid-template-columns: minmax(0, 1fr); }
  .rpg-tabelle-tarif td { white-space: normal; }
  .rpg-wischen { display: block; }
  .rpg-tabelle-typ th, .rpg-tabelle-typ td { padding-right: 12px; }
  .rpg-beispiel-karte { padding: 22px 0 0; border: 0; border-top: 1px solid var(--g-linie); border-radius: 0; }
  .rpg-zweier { grid-template-columns: minmax(0, 1fr); }
  .rpg-tabelle { font-size: 16px; }
  .rpg-pillen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpg-pillen span { padding-left: 10px; padding-right: 10px; }
  .rpg-weg-tabelle { font-size: 16px; }
  .rpg-weg-tabelle td { white-space: normal; }
  .rpg-inhalt ol { columns: 1; }
}
@media screen and (max-width: 479px) {
  .rpg-schritte > li { padding-left: 46px; }
}

/* ---------- Bewegung nur auf Wunsch ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rpg-seite input, .rpg-seite select { transition: border-color .2s var(--g-weich), box-shadow .2s var(--g-weich); }
  .rpg-pillen input { transition: background-color .2s var(--g-weich), border-color .2s var(--g-weich); }
  .rpg-pillen span { transition: color .2s var(--g-weich); }
  .rpg-winkel { transition: transform .3s var(--g-aus); }
  .rpg-leiste { transition: transform .3s var(--g-aus), visibility 0s linear .3s; }
  .rpg-leiste.ist-sichtbar { transition: transform .3s var(--g-aus), visibility 0s; }
  .rpg-saeule { transition: fill .2s var(--g-weich); }
  .rpg-knopf, .rpg-erg-knopf, .rpg-erg-link { transition: background-color .3s var(--g-weich), border-color .3s var(--g-weich); }
}

/* ---------- Druck: Rechner mit Ergebnis und Rechenweg ---------- */
@media print {
  .rp-kopf, .rp-menue, .bottom-section.large-image-right, .rpg-cta-abschnitt, .rpg-ratgeber, .rpfz, .rp-kf-huelle, .rp-kf,
  .rpg-leiste, .rpg-erg-aktionen, .rpg-erg-status, .rpg-beispiel, .rpg-weitere, .rpg-krumen, .rpg-zeit, #rpg-gemeinde-liste { display: none !important; }
  .rpg-raster { grid-template-columns: 1fr 1fr; gap: 24px; }
  .rpg-ergebnis { position: static; }
  .rpg-erg-innen { background: #fff !important; color: #000 !important; border: 1px solid #000; box-shadow: none; }
  .rpg-erg-innen * { color: #000 !important; border-color: #999 !important; }
  .rpg-gruppe { padding: 10px 0; gap: 10px; }
  .rpg-hilfe { display: none; }
  .rpg-seite input[type="text"] { min-height: 0; padding: 4px 8px; border-color: #999; }
  .rpg-pillen label:has(input:not(:checked)), .rp-sprung { display: none !important; }
  .rpg-pillen input:checked { background: #fff !important; border-color: #000 !important; }
  .rpg-pillen input:checked + span { color: #000 !important; }
  .rpg-weg { break-before: page; }
  .rpg-weg > summary .rpg-winkel { display: none; }
  .rpg-abschnitt { padding: 0; }
}