/* =========================================================================
   Immobilien (immobilien.html) – Redesign 10/2026 · nur Blöcke mit Präfix .immo-
   Nur Tokens aus styles.css (Petrol-Schatten über rgba(var(--shadow-c), …)).
   Globale Komponenten werden hier nicht umdefiniert, höchstens über Zusatzklassen
   erweitert. Bewegung nur über die Bausteine aus motion.js (data-…); Startzustände
   stehen global unter .mo – ohne JS / mit reduzierter Bewegung ist alles sichtbar.
   Inhalt: 1 Hero · 2 Kernaussage · 3 Ziel · 4 Fahrplan (§17.9) · 5 Rechner (§17.5) ·
           6 Laufband · 7 Begriffe · 8 Druck
   ========================================================================= */


/* =========================================================================
   1 · PAGE-HERO – Haus-Sticker in der Headline, Inhaltsverzeichnis als runde Karte
   (Eyebrow mit Viertel-Punkt kommt global aus styles.css)
   ========================================================================= */
.immo-hero__stk { --s: 0.74em; vertical-align: 0.02em; margin: 0 0.04em 0 0.12em; }

.immo-hero .page-hero__actions { column-gap: var(--space-4); }
@media (max-width: 479.98px) {
  .immo-hero .page-hero__actions { flex-direction: column; align-items: stretch; }
  .immo-hero .page-hero__actions .link-arrow { align-self: center; }
}

.immo-hero__aside { min-width: 0; }
.immo-toc {
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--r-xl);
  background: var(--c-white);
  box-shadow: 0 0 0 1px rgba(var(--shadow-c), 0.05), var(--shadow-md);
}
.immo-toc__title { margin: 0 0 var(--space-3) var(--space-2); }
.immo-toc__list { display: grid; gap: 6px; }
.immo-toc__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--r-md);
  background: var(--c-ice-50);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-decoration: none;
  hyphens: manual;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform 0.45s var(--ease-spring);
}
.immo-toc__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 0 0 1px rgba(var(--shadow-c), 0.06);
  color: var(--c-blue-900);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.immo-toc__icon { color: var(--c-blue-700); transition: transform 0.45s var(--ease-spring), color var(--dur-2) var(--ease-out); }
.immo-toc__link:hover,
.immo-toc__link:focus-visible { background: var(--c-blue-700); color: var(--c-white); transform: translateX(4px); }
.immo-toc__link:hover .immo-toc__num,
.immo-toc__link:focus-visible .immo-toc__num { background: color-mix(in srgb, var(--c-white) 16%, transparent); box-shadow: none; color: var(--c-white); }
.immo-toc__link:hover .immo-toc__icon,
.immo-toc__link:focus-visible .immo-toc__icon { color: var(--c-white); transform: translate(2px, -2px); }

@media (min-width: 1024px) {
  .immo-hero__aside { padding-left: var(--space-5); }
}


/* =========================================================================
   2 · KERNAUSSAGE – Wort-Reveal mit Vokabular-Stickern + Bildmarke, deren
   Immobilien-Viertel (unten links) im Logoverlauf leicht herausgelöst ist
   ========================================================================= */
.immo-viertel { padding-block: clamp(72px, 9vw, 144px) clamp(64px, 8vw, 128px); }
.immo-viertel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.immo-viertel__statement { max-width: 18em; }
.immo-viertel__visual { justify-self: center; width: clamp(160px, 21vw, 300px); }
.immo-viertel__float { display: block; }
.immo-viertel__mark { display: block; width: 100%; height: auto; overflow: visible; }
.immo-viertel__rest { filter: drop-shadow(5px 8px 0 var(--c-ice-300)) drop-shadow(0 24px 26px rgba(var(--shadow-c), 0.16)); }
.immo-viertel__bl {
  transform: translate(-44px, 44px);
  filter: drop-shadow(5px 8px 0 var(--c-blue-800)) drop-shadow(0 30px 30px rgba(var(--shadow-c), 0.4));
}
@media (min-width: 1024px) {
  .immo-viertel__grid { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
}


/* =========================================================================
   3 · ZIEL – zwei große runde Karten (Eis / helles Petrol) + Kundenstimme
   ========================================================================= */
.immo-ziel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.immo-ziel__card {
  gap: var(--space-4);
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--r-xl);
  background: var(--c-ice-50);
  box-shadow: none;
}
.immo-ziel__card--ice { background: var(--c-ice-200); }
.immo-ziel__stk { align-self: flex-start; margin-bottom: var(--space-4); }
.immo-ziel__kicker { margin-bottom: calc(-1 * var(--space-2)); }
.immo-ziel__title {
  font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.immo-ziel__card .card__text { max-width: 52ch; margin-bottom: var(--space-3); font-size: 1.0625rem; hyphens: manual; }
.immo-ziel__check {
  margin-top: auto;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: var(--r-lg);
  background: var(--c-white);
}
.immo-ziel__ask {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}
.immo-ziel__ask::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-700);
  transform: rotate(180deg);
}
.immo-ziel__list li { font-size: 1rem; line-height: 1.5; hyphens: manual; }

/* Kundenstimme: große runde Eis-Karte, leicht gedreht (richtet sich beim Überfahren auf) */
.immo-ziel__voice {
  margin-top: clamp(40px, 6vw, 96px);
  padding: clamp(20px, 4.4vw, 64px);
  border-radius: var(--r-xl);
  background: var(--c-ice-100);
  rotate: -0.6deg;
  transition: opacity var(--dur-4) var(--ease-out), transform 1s var(--ease-out), filter var(--dur-4) var(--ease-out), rotate 0.7s var(--ease-spring);
  transition-delay: var(--reveal-delay, 0ms);
}
.immo-ziel__voice:hover,
.immo-ziel__voice:has(.testimonial__full[open]) { rotate: 0deg; }   /* langer Volltext steht gerade */
/* Schlüssel-Sticker schwebt links neben der Stimme (nur Deko, erst ab 1024px) */
.immo-ziel__float { display: none; }
.immo-ziel__voice .testimonial__quote p { font-size: var(--fs-quote); max-width: 34ch; }
/* „Einkommens­sicherung“: Trennung nur auf schmalen Screens (bei 320px passt das Wort nicht in die Zeile) */
@media (min-width: 600px) {
  .immo-ziel__voice .testimonial__quote p { hyphens: none; }
}
.immo-ziel__voice .testimonial__full summary { background: var(--c-white); }
.immo-ziel__voice .testimonial__full summary:hover { background: var(--c-blue-700); }

@media (min-width: 900px) {
  .immo-ziel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .immo-ziel__voice { position: relative; max-width: 960px; margin-left: auto; }
  .immo-ziel__voice:not(:hover):not(:has(.testimonial__full[open])) { rotate: -1deg; }
  .immo-ziel__float { display: block; position: absolute; left: calc(-1 * clamp(96px, 11vw, 168px)); top: 34%; }
}


/* =========================================================================
   4 · FAHRPLAN BIS ZUM NOTARTERMIN (§17.9) – tiefe Petrol-Karte
   Nummern als Sticker, die Linie zeichnet sich scroll-gebunden ([data-draw]):
   < 1024px senkrecht links durch die Sticker, Panel der offenen Station im Fluss.
   ≥ 1024px geschwungen durch sieben Spalten; das Panel der offenen Station liegt
   als helle Karte absolut unter der Stationsreihe über die volle Breite.
   Exklusiv offen über <details name="immo-fahrplan">.
   ========================================================================= */
.immo-fahrplan-section .section-head { margin-bottom: clamp(44px, 6vw, 88px); }
.immo-fahrplan-rail { --node: 48px; position: relative; }

/* Linie (SVG, gestreckt): gepunktete Spur + gezeichnete Linie */
.immo-fahrplan__line {
  position: absolute;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.immo-fahrplan__line path { fill: none; stroke-linecap: round; }
.immo-fahrplan__track { stroke: var(--c-blue-500); stroke-width: 2; stroke-dasharray: 2 8; }
.immo-fahrplan__draw { stroke: var(--c-blue-300); stroke-width: 3; }
.immo-fahrplan__line--h { display: none; }
.immo-fahrplan__line--v {
  left: calc(var(--node) / 2 - 2px);
  top: calc(var(--node) / 2);
  width: 4px;
  /* endet am letzten Sticker: geschlossene Station = Sticker-Zeile (48) + Abstand (8) + Knopf (44) */
  height: calc(100% - 100px);
}

.immo-fahrplan {
  --immo-panel-h: 15rem;
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
}
.immo-fahrplan__station {
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: start;
  --n: 0;
}

/* Nummer als glänzender Sticker */
.immo-fahrplan__num {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: var(--r-sticker);
  background: var(--gloss-sticker);
  color: var(--c-white);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -4px 8px rgba(var(--shadow-c), 0.32),
    0 10px 18px -8px rgba(var(--shadow-c), 0.6);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 1px 1px rgba(var(--shadow-c), 0.35);
  rotate: -4deg;
  transition: rotate 0.6s var(--ease-spring), scale 0.6s var(--ease-spring);
}
.immo-fahrplan__station:nth-child(even) .immo-fahrplan__num { rotate: 5deg; }

.immo-fahrplan__title {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-height: var(--node);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--heading);
  transition: color var(--dur-1) var(--ease-out);
}
.immo-fahrplan__details { grid-column: 2; grid-row: 2; min-width: 0; }

/* Knopf „Was du tust / Was wir tun“: Pille auf Petrol */
.immo-fahrplan__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 6px var(--space-3) 6px var(--space-4);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--c-blue-300);
  color: var(--c-on-dark);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.immo-fahrplan__toggle::-webkit-details-marker { display: none; }
.immo-fahrplan__toggle::marker { content: ""; }
.immo-fahrplan__toggle:hover { background: color-mix(in srgb, var(--c-white) 10%, transparent); }
.immo-fahrplan__chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.45s var(--ease-spring);
}
.immo-fahrplan__details[open] > .immo-fahrplan__toggle {
  background: var(--c-white);
  box-shadow: none;
  color: var(--c-blue-900);
}
.immo-fahrplan__details[open] > .immo-fahrplan__toggle .immo-fahrplan__chevron { transform: rotate(180deg); }

/* Offene Station: Sticker wird hell und richtet sich auf */
.immo-fahrplan__station:has(> .immo-fahrplan__details[open]) .immo-fahrplan__num {
  background: var(--gloss-sticker-light);
  color: var(--c-blue-700);
  text-shadow: none;
  rotate: 0deg;
  scale: 1.08;
}
.immo-fahrplan__station:has(> .immo-fahrplan__details[open]) .immo-fahrplan__title { color: var(--c-white); }

/* Panel: helle Karte (setzt ihre Tokens selbst zurück) */
.immo-fahrplan__panel {
  --text: var(--c-ink);
  --text-muted: var(--c-ink-2);
  --heading: var(--c-blue-900);
  --link: var(--c-blue-700);
  --link-hover: var(--c-blue-900);
  --accent: var(--c-accent);
  --focus: var(--c-blue-700);
  --border: var(--c-ice-200);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-2) calc(-1 * (var(--node) + var(--space-4)));
  padding: var(--space-4);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-lg);
  color: var(--c-ink);
  animation: fmk-panel-in var(--dur-2) var(--ease-out);
}
.immo-fahrplan__dl { display: grid; gap: var(--space-2); }
.immo-fahrplan__dl > div {
  padding: var(--space-4);
  border-radius: var(--r-md);
  background: var(--c-ice-50);
}
.immo-fahrplan__dl dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  hyphens: manual;
}
.immo-fahrplan__dl dt::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-700);
  transform: rotate(180deg);
}
.immo-fahrplan__dl dd {
  margin-top: var(--space-2);
  max-width: 48ch;
  line-height: 1.55;
  hyphens: manual;
  text-wrap: pretty;
}
.immo-fahrplan__more { margin-top: auto; padding-inline: var(--space-1); }
.immo-fahrplan__more .link-arrow { padding-block: var(--space-1); }

@media (min-width: 480px) {
  .immo-fahrplan__panel { padding: var(--space-5); }
}
@media (min-width: 768px) {
  .immo-fahrplan__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .immo-fahrplan__panel { padding: var(--space-5) var(--space-5) var(--space-4); }
}

@media (min-width: 1024px) {
  .immo-fahrplan-rail { --node: 56px; }
  .immo-fahrplan__line--v { display: none; }
  /* Mitte des ersten bis Mitte des letzten Stickers (Sticker stehen links in 7 gleich breiten Spalten) */
  .immo-fahrplan__line--h {
    display: block;
    left: calc(var(--node) / 2);
    top: calc(var(--node) / 2 - 20px);
    width: calc(100% * 6 / 7);
    height: 40px;
  }
  .immo-fahrplan {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
  }
  .immo-fahrplan:has(.immo-fahrplan__details[open]) { padding-bottom: calc(var(--immo-panel-h) + var(--space-6)); }

  .immo-fahrplan__station {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding-right: var(--space-3);
  }
  .immo-fahrplan__station:nth-child(2) { --n: 1; }
  .immo-fahrplan__station:nth-child(3) { --n: 2; }
  .immo-fahrplan__station:nth-child(4) { --n: 3; }
  .immo-fahrplan__station:nth-child(5) { --n: 4; }
  .immo-fahrplan__station:nth-child(6) { --n: 5; }
  .immo-fahrplan__station:nth-child(7) { --n: 6; }

  .immo-fahrplan__num { font-size: 1.0625rem; }
  /* Termina ist breit: Titel skalieren mit der Spaltenbreite (1024: 14px · ab 1280: 16px)
     und bleiben in ihrer Spalte (vorher ragten sie bis 21px in die Nachbarspalte) */
  .immo-fahrplan__title {
    display: block;
    min-height: 0;
    max-width: 100%;
    margin-top: var(--space-2);
    font-size: clamp(0.875rem, 0.375rem + 0.78125vw, 1rem);
    line-height: 1.3;
  }
  .immo-fahrplan__details { margin-top: auto; padding-top: var(--space-1); }

  /* Knopf als runder Pfeil; die ganze Station ist Klickfläche (Stretched-Pseudo) */
  .immo-fahrplan__toggle {
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border-radius: 50%;
  }
  .immo-fahrplan__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .immo-fahrplan__toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .immo-fahrplan__station:hover .immo-fahrplan__toggle { background: color-mix(in srgb, var(--c-white) 12%, transparent); }
  .immo-fahrplan__station:hover .immo-fahrplan__num { rotate: 0deg; scale: 1.06; }
  .immo-fahrplan__station:hover .immo-fahrplan__title { color: var(--c-white); }
  .immo-fahrplan__station:hover .immo-fahrplan__details[open] > .immo-fahrplan__toggle { background: var(--c-white); }

  /* Panel: unter der Stationsreihe, volle Breite der Liste (7 gleich breite Spalten ohne Gap) */
  .immo-fahrplan__panel {
    position: absolute;
    left: calc(var(--n) * -100%);
    width: 700%;
    min-height: var(--immo-panel-h);
    margin: var(--space-5) 0 0;
    padding: var(--space-6);
    border-radius: var(--r-xl);
  }
  /* Kerbe, die auf den Knopf der offenen Station zeigt */
  .immo-fahrplan__panel::before {
    content: "";
    position: absolute;
    top: -7px;
    left: calc(var(--n) * 100% / 7 + var(--tap) / 2 - 8px);
    width: 16px;
    height: 16px;
    border-radius: 3px 0 0 0;
    background: var(--c-white);
    transform: rotate(45deg);
  }
  /* Station 01: die Kerbe sitzt fast in der Ecke – dort keine große Rundung */
  .immo-fahrplan__station:first-child .immo-fahrplan__panel { border-top-left-radius: var(--r-xs); }
  .immo-fahrplan__dl { gap: var(--space-4); }
  .immo-fahrplan__dl > div { padding: var(--space-5); }
  .immo-fahrplan__dl dd { max-width: 52ch; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .immo-fahrplan { --immo-panel-h: 17rem; }
}


/* =========================================================================
   5 · RECHNER (§17.5) – ohne Bewegung (brand.md §22.5)
   ========================================================================= */
/* Hinweis ohne Icon: als Absatz setzen (.note ist flex – Text und Telefon-Link standen sonst in drei Spalten) */
.immo-calc__noscript { display: block; max-width: none; margin-bottom: var(--space-6); }
.immo-calc__noscript a { color: var(--link); }

/* Modus-Wechsel */
.immo-calc__mode { margin-bottom: var(--space-6); }
.immo-calc__modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.immo-calc__chip .chip__label {
  white-space: normal;
  text-align: left;
  padding-block: var(--space-2);
}

/* Gruppen: Hauptwerte, dann Kaufnebenkosten und Finanzierung als Eis-Felder in der weißen Karte */
.immo-calc__group--main {
  display: grid;
  gap: var(--space-5);
}
.immo-calc__group--main > .field { margin-top: 0; }
.immo-calc__group + .immo-calc__group { margin-top: var(--space-6); }
fieldset.immo-calc__group {
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-radius: var(--r-lg);
  background: var(--c-ice-50);
}
/* Legende als normaler Block (sonst sitzt sie halb über der Fläche des Fieldsets) */
.immo-calc__legend {
  float: left;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  width: 100%;
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.immo-calc__legend + * { clear: both; }

/* Annahmen als ruhige Tabelle: Beschriftung links, Feld rechts; Trenner = weiße Fuge */
.immo-calc__row {
  padding-block: var(--space-4);
  border-top: 2px solid var(--c-white);
}
.immo-calc__legend + .immo-calc__row { border-top: 0; }
.immo-calc__row + .immo-calc__row { margin-top: 0; }
.immo-calc__row .input-group,
.immo-calc__row .select { max-width: 12rem; }
.immo-calc__row .field__hint,
.immo-calc__group--main .field__hint { max-width: 46ch; hyphens: manual; text-wrap: pretty; }
.immo-calc__check { margin-top: calc(-1 * var(--space-1)); font-size: var(--fs-small); }

@media (min-width: 480px) {
  .immo-calc__row {
    /* 10,5rem: „3,50“ + „% p. a.“ passen in Termina (bei 9,5rem war die letzte Ziffer abgeschnitten) */
    grid-template-columns: minmax(0, 1fr) 10.5rem;
    column-gap: var(--space-5);
    row-gap: var(--space-1);
    align-items: center;
  }
  .immo-calc__row > .field__label { grid-column: 1; grid-row: 1; }
  .immo-calc__row > .field__hint { grid-column: 1; grid-row: 2; align-self: start; }
  .immo-calc__row > .input-group,
  .immo-calc__row > .select { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
  .immo-calc__row > .immo-calc__check { grid-column: 1; grid-row: 3; }
  .immo-calc__row > .field__error { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  fieldset.immo-calc__group { padding: var(--space-5) var(--space-5) var(--space-3); }
}

/* Ergebnis */
.immo-calc__result .calc__hero-sub { hyphens: manual; text-wrap: pretty; }
/* Werte in Kennzahl-Paaren auf gleicher Höhe, auch wenn ein Label umbricht */
.immo-calc__result .calc__kpi { display: flex; flex-direction: column; }
.immo-calc__result .calc__kpi > dd:first-of-type { margin-top: auto; padding-top: 2px; }
/* Spalte auf die Kartenbreite begrenzen: sonst wird sie so breit wie die breiteste Tabelle,
   läuft bei 320–360 px aus der Karte, und .calc__table-wrap kann nicht scrollen. */
.immo-calc__tables { display: grid; grid-template-columns: minmax(0, 1fr); }
.immo-calc__tables > details { min-width: 0; }
/* wie .scroller: per Tab erreichbar (tabindex/role im HTML), Ring mit etwas Abstand */
.immo-calc .calc__table-wrap:focus-visible { outline-offset: 4px; border-radius: var(--r-xs); }
.immo-calc__pct { font-weight: var(--fw-body); color: var(--c-ink-2); }

/* Aufschlüsselung der Nebenkosten: Text in Roc Grotesk (erbte sonst Termina aus .calc__kpi dd),
   Beträge in Termina */
.calc__kpi .immo-calc__breakdown {
  margin-top: var(--space-3);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-ink);
  white-space: normal;
}
.immo-calc__breakdown ul { display: grid; gap: 4px; padding: 0; list-style: none; }
.immo-calc__breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--c-white);
}
.immo-calc__breakdown li > span:first-child { hyphens: manual; }
.immo-calc__breakdown li > span:last-child {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.immo-calc__chart-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.immo-calc__chart-title span { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
/* Nebenkosten-Markierung: Klammer unter dem Balken, ab links gemessen.
   Liegt sie im Eigenkapital-Segment, sind die Nebenkosten gedeckt. */
.immo-calc__nk { height: 14px; padding-top: 4px; }
.immo-calc__nk-mark {
  display: block;
  min-width: 6px;
  height: 8px;
  border: 2px solid var(--chart-3);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  transition: width var(--dur-2) var(--ease-out);
}
.calc__swatch.immo-calc__swatch-mark {
  height: 8px;
  background: transparent;
  border: 2px solid var(--chart-3);
  border-top: 0;
  border-radius: 0 0 3px 3px;
}
.immo-calc__val {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.immo-calc__zinsen {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink);
  hyphens: manual;
  text-wrap: pretty;
}
.immo-calc__zinsen strong { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

/* Unter 480 px engere Zellen: Werte-Tabelle und Tilgungsplan passen dann ab 320 px ohne
   Querscrollen in die Karte (sonst scrollt .calc__table-wrap). */
.immo-calc__table th,
.immo-calc__table td { white-space: nowrap; padding-inline: 4px; }
@media (max-width: 479.98px) {
  .immo-calc__table td { font-size: 0.875rem; }
  .immo-calc__table thead th { font-size: 0.6875rem; letter-spacing: 0; }
}
/* „28 Jahre, 11 Monate“ darf nach dem Komma umbrechen (Zahl und Einheit hängen per NBSP zusammen) */
.immo-calc__table .immo-calc__td-wrap { white-space: normal; }
@media (min-width: 480px) {
  .immo-calc__table th,
  .immo-calc__table td { padding-inline: 8px; }
}
.immo-calc__table tbody th {
  font-weight: 400;
  text-align: left;
  color: var(--c-ink);
  white-space: normal;
  padding-left: 0;
}
.immo-calc__table td { font-variant-numeric: tabular-nums lining-nums; }
/* Summenzeilen: Termina 500 (Roc Grotesk hat kein Gewicht 500) */
.immo-calc__table .immo-calc__sum > * {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.immo-calc__result .calc__notice { hyphens: manual; text-wrap: pretty; }

/* Ohne JavaScript keine Aktionen (Übergabe/Drucken brauchen das Skript) */
html:not(.js) .immo-calc__actions { display: none; }
.immo-calc__actions .btn--primary { width: 100%; }
@media (min-width: 480px) {
  .immo-calc__actions .btn--primary { width: auto; }
}
.immo-calc__actions .btn--ghost .icon { color: var(--c-blue-700); }

.immo-rechner__privacy { margin-top: var(--space-6); }
.immo-rechner__privacy p { align-self: center; hyphens: manual; text-wrap: pretty; }
@media (min-width: 1024px) {
  .immo-rechner__privacy { width: fit-content; max-width: 100%; }
}


/* =========================================================================
   6 · LAUFBAND – die sechs Begriffe (dekorativ). Ohne Bewegung: ruhiges Band,
   das umbricht; mit Bewegung: leicht schräg, an die Scrollposition gekoppelt.
   ========================================================================= */
.immo-tape { --tape-h: clamp(116px, 12vw, 190px); }
.immo-tape__band { --tape-tilt: -2.4deg; }
/* Viertel-Punkte im Wechsel: oben links / unten rechts */
.immo-tape__band li:nth-child(even)::after { border-radius: 0 0 100% 0; }


/* =========================================================================
   7 · BEGRIFFE – runde Eis-Karten, Viertel-Punkt als Marke (gestaffelt)
   ========================================================================= */
.immo-begriffe__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
.immo-begriff {
  gap: var(--space-3);
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-xl);
  background: var(--c-ice-50);
  box-shadow: none;
}
/* Viertel-Punkt: die vier Viertel der Bildmarke wechseln von Karte zu Karte */
.immo-begriff::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-bottom: var(--space-2);
  border-radius: 100% 0 0 0;
  background: var(--gradient-brand-diagonal);
}
.immo-begriff:nth-child(4n + 2)::before { border-radius: 0 100% 0 0; }
.immo-begriff:nth-child(4n + 3)::before { border-radius: 0 0 100% 0; }
.immo-begriff:nth-child(4n + 4)::before { border-radius: 0 0 0 100%; }
.immo-begriff__title {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--heading);
}
.immo-begriff__text { font-size: 1rem; line-height: 1.6; color: var(--c-ink); hyphens: manual; text-wrap: pretty; }
.immo-begriff__more { margin-top: auto; padding-top: var(--space-1); }
.immo-begriffe__all { margin-top: clamp(28px, 4vw, 48px); }

@media (min-width: 700px) {
  .immo-begriffe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .immo-begriffe__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* =========================================================================
   8 · DRUCK
   Strg+P druckt die ganze Seite (Fahrplan-Stationen untereinander, alle Inhalte).
   Der Drucken-Button im Rechner setzt .is-immo-print am <html>
   (immobilien-rechner.js) – dann druckt nur der Rechner mit Druckkopf:
   Eingaben als Liste, Ergebnis, Tilgungsplan, Disclaimer (§12.18, §12.27).
   ========================================================================= */
@media print {
  /* Geschlossene <details> drucken: Inhalt steckt im ::details-content-Slot */
  .immo-fahrplan__details::details-content,
  .immo-ziel__voice .testimonial__full::details-content,
  .immo-calc__plan::details-content { content-visibility: visible; display: block; }
  .immo-fahrplan__details > .immo-fahrplan__panel,
  .immo-ziel__voice .testimonial__full > blockquote,
  .immo-calc__plan .calc__table-wrap { display: block; }

  /* Deko weglassen */
  .immo-hero__aside,
  .immo-viertel__visual,
  .immo-tape,
  .immo-fahrplan__line,
  :is(.immo-hero, .immo-viertel, .immo-ziel) .stk { display: none; }
  .immo-viertel { padding-block: 4mm; }
  .immo-viertel__grid { display: block; }

  .immo-ziel__voice .testimonial__full > summary { display: none; }
  .immo-ziel .section-head,
  .immo-fahrplan-section .section-head,
  .immo-rechner .section-head,
  .immo-begriffe .section-head { break-after: avoid; }

  .immo-ziel__card,
  .immo-ziel__check,
  .immo-ziel__voice,
  .immo-begriff { background: var(--c-white); border: 1px solid var(--c-blue-400); rotate: 0deg; }
  .immo-ziel__check { border: 0; padding: 2mm 0 0; }
  .immo-ziel__grid { gap: 4mm; }

  .immo-fahrplan { display: grid; padding: 0; gap: 4mm; }
  .immo-fahrplan__station { display: block; break-inside: avoid; }
  .immo-fahrplan__num {
    display: inline-grid;
    width: auto;
    height: auto;
    margin-right: 2mm;
    background: none;
    box-shadow: none;
    color: var(--c-blue-700);
    rotate: 0deg;
    scale: 1;
  }
  .immo-fahrplan__station .immo-fahrplan__title,
  .immo-fahrplan__station:has(> .immo-fahrplan__details[open]) .immo-fahrplan__title { display: inline; min-height: 0; color: var(--c-blue-700); }
  .immo-fahrplan__toggle,
  .immo-fahrplan__panel::before,
  .immo-fahrplan__more { display: none; }
  .immo-fahrplan__panel {
    position: static;
    width: auto;
    min-height: 0;
    margin: 1mm 0 0;
    padding: 2mm 0 0;
    border-top: 1px solid var(--c-blue-400);
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .immo-fahrplan__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6mm; }
  .immo-fahrplan__dl > div { padding: 0; background: none; }
  .immo-rechner__privacy { display: none; }

  /* Rechner: zwischen Eingaben und Ergebnis umbrechen dürfen */
  .immo-calc { break-inside: auto; }
  .immo-calc .calc__inputs { padding: 4mm 5mm; break-inside: avoid; }
  .immo-calc__mode { margin-bottom: 2mm; }
  .immo-calc__mode .choice-group__legend { margin-bottom: 1mm; }
  .immo-calc__mode .chip:not(:has(:checked)) { display: none; }
  .immo-calc__mode .chip__label,
  .immo-calc__mode .chip__input:checked + .chip__label { min-height: 0; padding: 0; border: 0; background: none; color: var(--c-ink); }
  .immo-calc__mode .chip__label::before { display: none; }
  /* Balken und Farbfelder der Diagramme mitdrucken (sonst bleiben nur die Legenden) */
  .immo-calc .calc__stack,
  .immo-calc .calc__stack > span,
  .immo-calc .calc__swatch { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  fieldset.immo-calc__group { padding: 0; background: none; }

  /* Eingaben als Liste: Beschriftung links, Wert rechts */
  .immo-calc__inputs .field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 4mm;
    padding-block: 1.5mm;
    border-top: 1px solid var(--c-blue-400);
  }
  .immo-calc__group--main { gap: 0; }
  .immo-calc__group + .immo-calc__group { margin-top: 3mm; }
  .immo-calc__inputs .field__hint,
  .immo-calc__inputs .field__error,
  .immo-calc__inputs .immo-calc__check { display: none; }
  .immo-calc__inputs .field__label { grid-column: 1; grid-row: 1; }
  .immo-calc__inputs .input-group,
  .immo-calc__inputs .select { grid-column: 2; grid-row: 1; }
  .immo-calc__inputs .input-group { display: inline-flex; align-items: baseline; gap: 1mm; max-width: none; }
  .immo-calc__inputs .input,
  .immo-calc__inputs .select {
    width: auto;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-ui);
    font-weight: 500;
    text-align: right;
    field-sizing: content;
  }
  .immo-calc__inputs .input-group__suffix { position: static; transform: none; }
  .immo-calc__legend { float: none; margin-bottom: 1mm; }

  .immo-calc .calc__result { padding: 4mm 5mm; }
  .immo-calc .calc__result > * + * { margin-top: 3mm; }
  .immo-calc__breakdown li { padding: 0.5mm 0; background: none; border-bottom: 1px dotted var(--c-blue-400); }
  .immo-calc__tables > details:first-child { display: none; }
  .immo-calc__plan > summary { text-decoration: none; color: var(--ink); }
  .immo-calc .calc__table-wrap { max-height: none; overflow: visible; }
  .immo-calc .calc__table table { margin-top: 1mm; }
  .immo-calc .immo-calc__table th,
  .immo-calc .immo-calc__table td { padding-block: 0.8mm; line-height: 1.3; }

  .is-immo-print main > :not(.print-head):not(.immo-rechner) { display: none; }
  .is-immo-print .site-footer { display: none; }
  .is-immo-print .immo-rechner { padding-block: 0; }
  .is-immo-print .immo-rechner .section-head { margin-bottom: 4mm; }
  .is-immo-print .immo-rechner .section-head__lead { font-size: 10pt; }
}