/* =========================================================================
   STARTSEITE — Trustzahlen, Medien, Journey, Case-Grafiken, Mini-Rechner
   ========================================================================= */

/* ---------------------------------------------------------
   TRUSTZAHLEN
   --------------------------------------------------------- */

.kennzahlen-band { padding: clamp(30px, 3vw, 52px) 0; background: var(--cream); }
.kennzahlen {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}
.kz-item {
  padding: clamp(28px, 3vw, 42px) clamp(18px, 2vw, 30px);
  border-left: 1px solid rgba(90,60,35,0.10);
  text-align: left;
  text-decoration: none;
  display: block;
  transition: background 0.3s ease;
}
.kz-item:first-child { border-left: none; }
a.kz-item:hover { background: var(--cream); }

/* Bewusst ohne Icon. Die Zahl ist das Gestaltungselement. */
.kz-wert {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1; letter-spacing: -0.03em;
  margin-bottom: 12px;
  display: block;
  font-variant-numeric: tabular-nums;
}
.kz-text {
  font-family: var(--sans);
  font-size: 0.86rem; color: var(--warm-grey);
  line-height: 1.5;
  display: block;
}
.kz-pfeil { font-size: 0.7rem; color: var(--warm-grey); }
a.kz-item:hover .kz-pfeil { color: var(--orange); }
a.kz-item:hover .kz-wert { color: var(--orange-dark); }

@media (max-width: 760px) {
.kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-item:nth-child(3) { border-left: none; }
  .kz-item:nth-child(n+3) { border-top: 1px solid rgba(90,60,35,0.10); }
}

/* ---------------------------------------------------------
   INFO-HINWEIS zu Modellrechnungen
   --------------------------------------------------------- */

.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--warm-grey);
  color: var(--warm-grey);
  font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
  cursor: help; background: none; padding: 0;
  vertical-align: middle; margin-left: 6px;
  position: relative;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.info-i:hover, .info-i:focus-visible { border-color: var(--orange); color: var(--orange); outline: none; }
.info-i .info-text {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: min(320px, 78vw);
  background: var(--charcoal); color: var(--white);
  font-family: var(--sans); font-size: 0.76rem; font-weight: 400;
  line-height: 1.6; text-align: left;
  padding: 14px 16px; border-radius: var(--r-sm);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 60;
  cursor: default;
}
.info-i:hover .info-text, .info-i:focus-visible .info-text, .info-i.is-open .info-text {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------
   BERATUNGSABLAUF — horizontale Journey
   --------------------------------------------------------- */

.hjourney { margin-top: clamp(44px, 4vw, 70px); position: relative; }

/* Schrittleiste mit wachsender Linie */
.hj-leiste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
  margin-bottom: clamp(30px, 3vw, 46px);
}
.hj-leiste::before,
.hj-leiste::after {
  content: ""; position: absolute;
  top: 27px; height: 2px;
  left: 10%; right: 10%;
}
.hj-leiste::before { background: rgba(90,60,35,0.16); }
.hj-leiste::after {
  background: var(--orange);
  right: auto; width: 0;
  transition: width 1.4s cubic-bezier(.4,0,.2,1);
}
.hj-leiste.is-grown::after { width: 80%; }

.hj-punkt {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; font-family: var(--sans);
  position: relative; z-index: 2;
}
.hj-kreis {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--offwhite);
  border: 2px solid rgba(90,60,35,0.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 700;
  color: var(--warm-grey);
  margin-bottom: 14px;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
}
.hj-punkt:hover .hj-kreis { border-color: var(--orange-light); }
.hj-punkt[aria-selected="true"] .hj-kreis {
  background: var(--orange); border-color: var(--orange);
  color: var(--white); transform: scale(1.08);
}
.hj-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-grey); line-height: 1.4;
  padding: 0 6px;
  transition: color 0.3s ease;
}
.hj-punkt[aria-selected="true"] .hj-label { color: var(--orange-dark); }

/* Inhalt eines Schritts */
.hj-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  background: var(--white);
  border-radius: var(--r);
  padding: clamp(28px, 3.4vw, 48px);
  box-shadow: var(--shadow-soft);
}
.hj-panel[hidden] { display: none; }
.hj-panel .hjp-eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 14px;
}
.hj-panel h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.95rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.25; margin-bottom: 16px;
}
.hj-panel p { font-family: var(--sans); font-size: 0.97rem; color: #5F4E42; line-height: 1.7; margin-bottom: 14px; }
.hj-panel .hjp-meta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--orange-dark); background: var(--peach);
  border-radius: 100px; padding: 7px 16px; margin-bottom: 16px;
}
.hj-panel .hjp-ergebnis {
  font-family: var(--serif-lesbar); font-style: italic;
  font-size: 1.02rem; color: var(--charcoal); line-height: 1.55;
  padding-left: 16px; border-left: 2px solid var(--orange);
  margin-top: 18px;
}

@media (max-width: 900px) {
  /* -------------------------------------------------------------------
     DER ABLAUF AUF DEM HANDY

     Vorher kippte die Leiste in eine senkrechte Liste. Fünf untereinander
     stehende Zeilen sehen aus wie eine Aufzählung, nicht wie fünf
     Schalter — und genau daher kam der Eindruck, man müsse hier gar
     nichts tun. Zusätzlich brauchte die Liste rund 280 px Höhe.

     Jetzt bleibt die Leiste waagerecht: fünf Nummern in einer Reihe mit
     einer Linie dazwischen. Das ist die Form, die jeder von Bestell- und
     Anmeldestrecken kennt und sofort als „Schritt 2 von 5" liest.
     Fünf Kreise à 40 px passen mit Abständen auch auf 320 px.

     Weil die Leiste damit überall waagerecht ist, gibt es die senkrechte
     Sonderform nicht mehr — und mit ihr auch nicht mehr den Konflikt,
     aus dem der orange Block entstanden ist.
     ------------------------------------------------------------------- */
  .hj-leiste { gap: 0; margin-bottom: 12px; }
  .hj-leiste::before,
  .hj-leiste::after { top: 20px; }
  .hj-punkt { padding: 0; }
  .hj-kreis {
    width: 40px; height: 40px;
    font-size: 0.85rem;
    margin-bottom: 0;
    border-width: 2px;
  }
  /* Der Name des Schritts steht einmal unter der Leiste statt fünfmal
     darin. Fünf Beschriftungen nebeneinander wären auf 320 px nicht
     lesbar. */
  .hj-label { display: none; }

  .hj-panel { grid-template-columns: 1fr; }

  /* -------------------------------------------------------------------
     DIE BAHN

     Alle fünf Tafeln liegen nebeneinander und werden gewischt. Rechts ist
     die nächste angeschnitten — sie ist der Grund, warum überhaupt
     jemand wischt.

     85 % Breite plus 14 px Abstand ergibt auf einem 390-px-Gerät:
       Bahn 358 px · Tafel 304 px · nächste ab 318 px → 40 px sichtbar

     Bei 88 % waren es nur 28 px. Das ist der Unterschied zwischen „da
     ist noch was" und „da ist vielleicht ein Rand".
     ------------------------------------------------------------------- */
  .hj-bahn {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rand, 20px);
    /* Bis an den Bildschirmrand, damit der Anschnitt sichtbar wird. */
    margin-inline: calc(-1 * var(--rand, 20px));
    padding: 4px var(--rand, 20px) 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }
  .hj-bahn::-webkit-scrollbar { display: none; }
  .hj-bahn > .hj-panel {
    flex: 0 0 85%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .hj-bahn:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

  /* Der einmalige Wisch-Hinweis. Kein Dauerlauf: js/startseite.js setzt
     die Klasse einmal und nimmt sie nach 1,4 Sekunden wieder weg. */
  .hj-bahn.zeigt-hinweis > .hj-panel:first-child {
    animation: hjAnstupsen 1.3s cubic-bezier(.4,0,.2,1);
  }
}

@keyframes hjAnstupsen {
  0%   { transform: translateX(0); }
  28%  { transform: translateX(-22px); }
  62%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* Auf dem Desktop ist die Bahn nur eine Hülle ohne eigene Wirkung.

   ACHTUNG, hier lag ein Fehler: Diese Regel stand ohne Medienabfrage —
   und weil sie NACH dem Mobilblock steht, gewann sie bei gleicher
   Spezifität auf allen Breiten. Die Bahn war also auch auf dem Handy
   display: block. Damit lagen die fünf Tafeln untereinander statt
   nebeneinander, es gab nichts zu wischen, und scrollTo hatte keine
   Wirkung — genau der Eindruck, dass „die Ansicht nicht springt".

   Jetzt ausdrücklich auf breite Fenster begrenzt. */
@media (min-width: 901px) {
  .hj-bahn { display: block; }
}


/* ACHTUNG, hier lag ein Fehler.

   Unterhalb von 1000 px wird die Kartenreihe zu einem waagerechten
   Slider: grid-auto-flow: column mit grid-auto-columns: 74 %.

   Genau darunter standen früher diese beiden Regeln:

       @media (max-width: 900px) { grid-template-columns: repeat(3, 1fr); }
       @media (max-width: 560px) { grid-template-columns: repeat(2, 1fr); }

   Sobald grid-template-columns gesetzt ist, wird grid-auto-columns
   ignoriert. Bei fünf Fällen und drei Spalten entstand eine zweite
   Zeile, die durch die feste Höhe des Sliders abgeschnitten wurde.
   Fall vier und fünf waren auf dem Handy schlicht nicht erreichbar.

   Die Regeln waren Reste aus dem alten Rasterlayout. Sie gelten jetzt
   nur noch oberhalb des Sliders, wo sie hingehören. */

@media (min-width: 1001px) and (max-width: 1200px) {
  
}


/* Zeithorizonte */
.horizont-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.hz-karte {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 22px 24px;
  border-top: 3px solid var(--peach);
}
.hz-karte:nth-child(2) { border-top-color: var(--orange-light); }
.hz-karte:nth-child(3) { border-top-color: var(--orange); }
.hz-karte .hzk-oben {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 11px;
}
.hz-karte .hzk-horizont {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--orange-dark);
}
.hz-karte .hzk-zeit { font-family: var(--sans); font-size: 0.74rem; color: var(--warm-grey); white-space: nowrap; }
.hz-karte .hzk-titel { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--charcoal); line-height: 1.35; margin-bottom: 7px; }
.hz-karte .hzk-text { font-family: var(--sans); font-size: 0.85rem; color: #6B5B4F; line-height: 1.6; }


.grafik-legende {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 18px;
}
.gl-eintrag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.83rem; color: #5F4E42;
}
.gl-punkt { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.gl-punkt.orange { background: var(--orange); }
.gl-punkt.braun  { background: #A3785A; }
.gl-punkt.hell   { background: var(--peach); }

/* Ergebniszahlen unter der Grafik */
.erg-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-top: 22px;
}
.erg-karte {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 22px 24px;
}
.erg-karte.stark { background: var(--orange); }
.erg-karte .ek-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--warm-grey); line-height: 1.5; margin-bottom: 10px; }
.erg-karte.stark .ek-label { color: rgba(255,255,255,0.85); }
.erg-karte .ek-wert {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 700; color: var(--orange-dark);
  line-height: 1; letter-spacing: -0.02em; margin-bottom: 8px;
}
.erg-karte.stark .ek-wert { color: var(--white); }
.erg-karte .ek-sub { font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey); line-height: 1.5; }
.erg-karte.stark .ek-sub { color: rgba(255,255,255,0.85); }

/* Portfolio-Rad */
.portfolio-rad {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 50px);
  align-items: center;
}
.rad-wrap { position: relative; }
.rad-wrap svg { width: 100%; height: auto; display: block; }
.rad-mitte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  padding: 22%;
}
.rad-mitte .rm-label {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--warm-grey);
  margin-bottom: 6px;
}
.rad-mitte .rm-wert { font-family: var(--serif); font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem); font-weight: 700; color: var(--charcoal); line-height: 1.15; }
.rad-segment { cursor: pointer; transition: opacity 0.25s ease; }
.rad-segment:hover, .rad-segment.is-aktiv { opacity: 1; }
.rad-wrap.hat-aktiv .rad-segment:not(.is-aktiv) { opacity: 0.35; }

.rad-liste { display: flex; flex-direction: column; gap: 2px; }
.rad-eintrag {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  background: var(--cream);
  padding: 15px 20px; cursor: pointer;
  transition: background 0.25s ease, padding-left 0.25s ease;
  border: none; text-align: left; font-family: var(--sans); width: 100%;
}
.rad-eintrag:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.rad-eintrag:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.rad-eintrag:hover, .rad-eintrag.is-aktiv { background: var(--peach); padding-left: 26px; }
.rad-eintrag .re-emoji { font-size: 1.15rem; }
.re-text b { display: block; font-size: 0.9rem; color: var(--charcoal); margin-bottom: 2px; }
.re-text span { font-size: 0.79rem; color: #6B5B4F; line-height: 1.45; }
.rad-eintrag .re-betrag { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--orange-dark); white-space: nowrap; }

.rad-detail {
  background: var(--white);
  border: 1.5px solid var(--peach);
  border-radius: var(--r-sm);
  padding: 18px 22px; margin-top: 12px;
}
.rad-detail[hidden] { display: none; }
.rad-detail dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.rad-detail dt { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-dark); }
.rad-detail dd { font-family: var(--sans); font-size: 0.87rem; color: #5F4E42; margin: 0; line-height: 1.55; }

@media (max-width: 860px) {
.portfolio-rad { grid-template-columns: 1fr; }
}

/* Immobilienblock im Case */
.immo-case {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: clamp(24px, 3vw, 34px);
  margin-top: 12px;
}
.immo-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px; margin: 18px 0 22px;
}
.ik-item { background: var(--white); padding: 18px 20px; }
.ik-item:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.ik-item:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ik-item .iki-label { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-grey); margin-bottom: 7px; }
.ik-item .iki-wert { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--charcoal); line-height: 1; }
.ik-item.betont .iki-wert { color: var(--orange-dark); }

.immo-effekte { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.immo-effekte li {
  font-family: var(--sans); font-size: 0.78rem;
  background: var(--white); border-radius: 100px;
  padding: 6px 14px; color: #6B5B4F;
}
.immo-warnung {
  font-family: var(--sans); font-size: 0.8rem;
  color: #7B6857; line-height: 1.6; margin-top: 16px;
}

@media (max-width: 700px) {
  /* siehe Nachzügler am Dateiende — die Regel hier wurde von einer
     späteren Grundregel aufgehoben. */
  .ik-item, .ik-item:first-child, .ik-item:last-child { border-radius: var(--r-sm); }
  
  
  
  
}


.cnw-seite { padding: 24px 26px; border-radius: var(--r-sm); height: 100%; }
.cnw-seite.vorher  { background: rgba(90,60,35,0.055); }
.cnw-seite.nachher { background: var(--peach); }
.cnw-seite .cnws-label {
  font-family: var(--sans); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 11px;
}
.cnw-seite.nachher .cnws-label { color: var(--orange-dark); }
.cnw-seite p { font-family: var(--sans); font-size: 0.95rem; color: #5F4E42; line-height: 1.6; margin: 0; }
.cnw-seite.nachher p { color: var(--charcoal); }
.cnw-pfeil { display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 1.4rem; }

@media (max-width: 760px) {

  .cnw-pfeil { transform: rotate(90deg); padding: 12px 0; }
}


/* ---------------------------------------------------------
   BERATUNGSFÄLLE — Grafiken, Töpfe, Rücklagen
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
.hj-leiste::after { transition: none; }
  .hj-bahn { scroll-behavior: auto; }
  .hj-bahn.zeigt-hinweis > .hj-panel:first-child { animation: none; }
  
}

/* =========================================================================
   ERGÄNZUNGEN — zweispaltige Graphen, Tooltip, Töpfe, Entnahme
   ========================================================================= */

/* Graph links, Kennzahlen rechts */
.graph-zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 63fr) minmax(0, 37fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
  margin-top: 6px;
}
.graph-wrap { position: relative; }
.graph-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.hov-feld { cursor: crosshair; }

.graph-tip {
  position: absolute; top: 8px; right: 8px;
  background: var(--charcoal); color: var(--white);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  font-family: var(--sans); font-size: 0.78rem;
  line-height: 1.5; pointer-events: none;
  min-width: 190px; z-index: 5;
  box-shadow: 0 10px 30px -12px rgba(58,44,34,0.5);
}
.graph-tip[hidden] { display: none; }
.graph-tip b { display: block; font-size: 0.88rem; margin-bottom: 1px; }
.graph-tip > span { display: block; color: rgba(255,255,255,0.65); font-size: 0.72rem; margin-bottom: 9px; }
.graph-tip dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
.graph-tip dt { color: rgba(255,255,255,0.72); }
.graph-tip dd { margin: 0; font-weight: 700; white-space: nowrap; }

.graph-zahlen { display: flex; flex-direction: column; gap: 10px; }
.gz-karte {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.gz-karte.stark { background: var(--orange); }
.gzk-label { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; color: var(--warm-grey); line-height: 1.45; margin-bottom: 7px; }
.gz-karte.stark .gzk-label { color: rgba(255,255,255,0.85); }
.gzk-wert {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  font-weight: 700; color: var(--orange-dark);
  line-height: 1; letter-spacing: -0.02em;
}
.gz-karte.stark .gzk-wert { color: var(--white); }
.gzk-sub { font-family: var(--sans); font-size: 0.74rem; color: var(--warm-grey); line-height: 1.45; margin-top: 7px; }
.gz-karte.stark .gzk-sub { color: rgba(255,255,255,0.85); }@media (max-width: 800px) {
.graph-zweispalt { grid-template-columns: 1fr; }
}

.gl-punkt.grau { background: #B9A895; }

/* Kennzahl mit Zusatzzeile im Kopf */
.cnz-sub { font-family: var(--sans); font-size: 0.7rem; color: var(--warm-grey); margin-top: 5px; line-height: 1.4; }

/* Kleiner Zusatz in den Strategiekarten */
.hzk-klein {
  font-family: var(--sans); font-size: 0.75rem;
  color: var(--warm-grey); line-height: 1.55;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(90,60,35,0.10);
}

/* Entnahme-Box */
.entnahme-box {
  background: var(--peach);
  border-radius: var(--r-sm);
  padding: 22px 26px;
  margin-top: 22px;
}
.entnahme-box .eb-label {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 12px;
}
.entnahme-box p { font-family: var(--sans); font-size: 0.95rem; color: #5F4E42; line-height: 1.65; margin: 0 0 10px; }
.entnahme-box .eb-fuss { font-size: 0.78rem; color: var(--warm-grey); margin: 0; }

/* Drei Töpfe */
.toepfe-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.topf {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 24px 26px;
  border-top: 3px solid var(--orange);
}
.topf.ohne-zahl { border-top-color: var(--peach); }

.topf .tp-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.topf .tp-emoji { font-size: 1.1rem; line-height: 1; }
.topf .tp-label {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark);
}
.topf .tp-titel {
  font-family: var(--serif);
  font-size: 1.08rem; font-weight: 700; color: var(--charcoal);
  line-height: 1.3; margin-bottom: 10px;
}
.topf .tp-rate {
  font-family: var(--sans);
  font-size: 0.8rem; color: var(--warm-grey);
  margin-bottom: 6px;
}
.topf .tp-wert {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1; letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.topf .tp-sub {
  font-family: var(--sans);
  font-size: 0.74rem; color: var(--warm-grey); line-height: 1.55;
  margin-bottom: 12px;
}
.topf .tp-offen {
  font-family: var(--sans);
  font-size: 0.84rem; font-style: italic; color: var(--warm-grey);
  margin-bottom: 12px;
}
.topf .tp-text {
  font-family: var(--sans);
  font-size: 0.88rem; color: #5F4E42; line-height: 1.65;
}

/* Reine Layout-Hüllen */
.situ-haupt, .sv-aufteilung, .svo-zeilen { min-width: 0; }


/* Portfolio-Rad: Ergänzungen */
.rad-eintrag .re-text b em {
  font-style: normal; font-weight: 400;
  font-size: 0.74rem; color: var(--warm-grey);
}
.rad-fuss { font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey); line-height: 1.55; margin-top: 14px; }
.rad-detail .rd-fuss { font-family: var(--sans); font-size: 0.73rem; color: var(--warm-grey); margin: 12px 0 0; line-height: 1.5; }
.rad-segment:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

/* Immobilienblock */
.immo-text { font-family: var(--sans); font-size: 0.92rem; color: #5F4E42; line-height: 1.65; margin: 0; }
.immo-koop {
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 20px 24px; margin-top: 18px;
}
.immo-koop p { font-family: var(--sans); font-size: 0.88rem; color: #5F4E42; line-height: 1.65; margin: 0 0 14px; }
.immo-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.immo-links a {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.immo-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.immo-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Übergang nach den Cases enger */
#deine-situation { padding-top: clamp(34px, 3vw, 54px); }
#deine-situation .final-points { margin: 34px 0 30px; }

/* Abschluss mit Nicola-Foto */
.ende-grid {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: clamp(30px, 4vw, 62px);
  align-items: center;
  text-align: left;
}
.ende-foto {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--cream), var(--beige));
  box-shadow: var(--shadow-card);
}
.ende-foto img { width: 100%; height: 100%; object-fit: cover; }
.ende-grid .final-points { text-align: left; }
.ende-grid .cta-row { justify-content: flex-start; }
.ende-grid .step-proof { margin-left: 0; }@media (max-width: 860px) {
.ende-grid { grid-template-columns: 1fr; }
  /* 3:2 war zu flach: Bei einem Hochformat 4:5 schnitt der Cover-Zuschnitt
     mittig — und damit oberhalb des Scheitels. Der Kopf war ab. 4:3 mit
     Bildposition 14 % zeigt den Kopf vollständig und lässt Luft darüber.
     Am gerenderten Ausschnitt geprüft, nicht geschätzt. */
  .ende-foto { aspect-ratio: 4 / 3; order: -1; }
  .ende-foto img { object-position: 50% 14%; }
}

/* SVG-Hilfselemente für den Tooltip */
.linien-svg { display: block; }
.linien-svg .hov-linie { transition: opacity 0.15s ease; }
.linien-svg .hov-punkt { transition: opacity 0.15s ease; pointer-events: none; }

/* =========================================================================
   RÜCKLAGE ZUERST + ENTNAHME-REICHWEITE
   ========================================================================= */

.ruecklage {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);
  align-items: stretch;
  margin-bottom: 14px;
}
.rl-teil {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 20px 22px;
}
.rl-teil.ergebnis { background: var(--orange); }
.rlt-label {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 9px;
}
.rl-teil.ergebnis .rlt-label { color: rgba(255,255,255,0.85); }
.rlt-wert {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1; letter-spacing: -0.02em;
}
.rl-teil.ergebnis .rlt-wert { color: var(--white); }
.rlt-sub { font-family: var(--sans); font-size: 0.75rem; color: var(--warm-grey); line-height: 1.45; margin-top: 8px; }
.rl-teil.ergebnis .rlt-sub { color: rgba(255,255,255,0.85); }
.rl-op {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
  color: var(--orange-dark);
}
.rl-fuss { font-family: var(--sans); font-size: 0.79rem; color: var(--warm-grey); line-height: 1.6; margin: 0 0 4px; }@media (max-width: 780px) {
.ruecklage { grid-template-columns: 1fr; }
  .rl-op { padding: 8px 0; }
}


/* Wie lange reicht das Geld? */
.reichweite {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: clamp(22px, 2.6vw, 30px);
  margin-top: 24px;
}
.rw-label {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 12px;
  display: flex; align-items: center;
}
.rw-frage { font-family: var(--sans); font-size: 0.95rem; color: #5F4E42; line-height: 1.6; margin: 0 0 20px; }
.rw-balken { display: flex; flex-direction: column; gap: 14px; }
.rw-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: 6px 16px; align-items: center;
}
.rwz-label { font-family: var(--sans); font-size: 0.85rem; color: #5F4E42; line-height: 1.45; }
.rw-zeile.stark .rwz-label { color: var(--charcoal); font-weight: 600; }
.rwz-bar { background: rgba(90,60,35,0.10); border-radius: 100px; height: 12px; overflow: hidden; }
.rwz-bar span {
  display: block; height: 100%; border-radius: 100px;
  background: var(--peach);
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.rw-zeile.stark .rwz-bar span { background: var(--orange); }
.rwz-wert {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 700;
  color: var(--charcoal); white-space: nowrap;
}
.rw-zeile.stark .rwz-wert { color: var(--orange-dark); }
.rwz-kapital {
  grid-column: 1 / -1;
  font-family: var(--sans); font-size: 0.74rem; color: var(--warm-grey);
  margin-top: -6px;
}
.rw-fuss { font-family: var(--sans); font-size: 0.76rem; color: var(--warm-grey); line-height: 1.6; margin: 18px 0 0; }@media (max-width: 680px) {
.rw-zeile { grid-template-columns: 1fr; gap: 6px; }
  .rwz-wert { text-align: left; }
}

/* =========================================================================
   JOURNEY — einheitliches Kartendesign, Fotos, Fortschritt
   ========================================================================= */

/* -------------------------------------------------------------------------
   STAND UND PUNKTE

   Nur auf dem Handy. Auf dem Desktop stehen alle fünf Schritte
   nebeneinander — dort wäre „Schritt 2 von 5" eine Auskunft über etwas,
   das man ohnehin sieht.
   ------------------------------------------------------------------------- */
.hj-fortschritt { display: none; }
.hj-wischhinweis { display: none; }

@media (max-width: 900px) {
  .hj-fortschritt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }
}
.hjf-text {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--orange-dark);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hjf-text b { color: var(--charcoal); }

.hjf-punkte { display: flex; gap: 7px; align-items: center; flex: none; }
.hjf-punkt {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none; padding: 0;
  background: rgba(90,60,35,0.22);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
/* Acht Pixel trifft niemand. Die Fläche ist 44 px groß und unsichtbar. */
.hjf-punkt::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.hjf-punkt[aria-current="true"] {
  background: var(--orange);
  width: 22px;
  border-radius: 100px;
}

/* Panel: linke Textspalte, rechte Visualspalte — überall gleich */
.hj-panel {
  align-items: start;
  scroll-margin-top: 100px;
}
.hjp-copy > *:last-child { margin-bottom: 0; }

.hj-panel h3 {
  font-size: clamp(1.28rem, 1.05rem + 1.1vw, 1.85rem);
  margin-bottom: 14px;
}
.hj-panel p { font-size: 0.96rem; line-height: 1.72; }

/* Hervorgehobener Satz — ruhige Serif-Kursive, gut lesbar */
.hj-panel .hjp-ergebnis {
  font-family: var(--serif-lesbar); font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.14rem);
  color: var(--charcoal); line-height: 1.6;
  padding-left: 16px; border-left: 2px solid var(--orange);
  margin: 18px 0 0;
}

/* Markenclaim am Ende von Schritt 05 */
.hjp-claim {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.55rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.35; letter-spacing: -0.01em;
  margin: 22px 0 0;
}

/* dezenter Link im Panel */
.hjp-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  margin-top: 20px;
}
.hjp-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Fotoflächen — überall dieselbe Rundung und Proportion */
.hjp-foto {
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--cream), var(--beige));
  line-height: 0;
}
.hjp-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hjp-foto.klein { max-width: 330px; margin-top: 22px; }

/* Faktenzeile und Zeithorizonte: gemeinsame Kartenfamilie */
.js-facts, .horizons, .koa { gap: 10px; }
.js-fact, .hz, .koa-item {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  border: 1px solid rgba(90,60,35,0.10);
}
.js-fact { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.js-fact:first-child, .js-fact:last-child,
.koa-item:first-child, .koa-item:last-child { border-radius: var(--r-sm); }

.js-fact b, .hz .hz-name, .koa-item b {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--orange-dark);
  display: block; margin-bottom: 6px;
}
.js-fact span span, .hz .hz-what, .koa-item span span {
  font-family: var(--sans); font-size: 0.88rem;
  color: #5F4E42; line-height: 1.6; display: block;
}

.hz { border-top: 1px solid rgba(90,60,35,0.10); border-left: 1px solid rgba(90,60,35,0.10); }
.hz .hz-top { margin-bottom: 7px; }
.hz .hz-time {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  color: var(--orange-dark); background: var(--white);
  border-radius: 100px; padding: 3px 11px;
}

.koa { display: flex; flex-direction: column; }
.koa-item { display: block; }
.koa-item::before { content: none; }
.koa-item b::before { content: "✓ "; color: var(--orange); }
.koa-bereiche {
  font-family: var(--sans); font-size: 0.82rem;
  color: #6B5B4F; line-height: 1.7; margin: 16px 0 0;
}
.koa-bereiche .koa-klein { color: var(--warm-grey); font-size: 0.78rem; }

/* Freebie-Verknüpfung beim Cashflow */
.jf-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 0.83rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  margin-top: 10px;
}
.jf-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.jf-klein {
  display: block;
  font-family: var(--sans); font-size: 0.76rem;
  color: var(--warm-grey); line-height: 1.5; margin-top: 5px;
}

/* Lebensereignisse ruhiger */
.life-line { gap: 8px; margin-top: 20px; }
.life-line .ll-item {
  background: var(--cream);
  border: 1px solid rgba(90,60,35,0.10);
  font-size: 0.82rem; font-weight: 500;
  padding: 9px 14px;
}

/* Abschluss der Journey */
.hj-ende {
  text-align: center;
  margin-top: clamp(34px, 3.5vw, 54px);
}
.hj-ende p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700; color: var(--charcoal);
  margin-bottom: 20px;
}
.hj-ende .hje-note {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 400;
  color: var(--warm-grey); margin: 14px 0 0;
}@media (max-width: 900px) {
  .hj-panel { gap: 26px; padding: 24px 20px 26px; }
}

/* -------------------------------------------------------------------------
   DER ORANGE BLOCK NACH DEM KLICK — Ursache und Behebung

   Die Leiste hat zwei Erscheinungsformen: auf dem Desktop eine
   waagerechte Linie, auf dem Handy eine senkrechte. Der Fortschritt ist
   deshalb einmal eine Breite und einmal eine Höhe.

   Hier stand nur:
       .hj-leiste.is-grown::after { width: var(--fortschritt, 0%); }

   ohne Medienabfrage — also galt es auch auf dem Handy und überschrieb
   dort das width: 2px der senkrechten Linie. Aus einem 2 px schmalen
   Strich wurde ein Rechteck von 20 bis 80 Prozent Breite bei voller
   Höhe: der orange Block, den du gesehen hast.

   Vor dem ersten Klick war --fortschritt nicht gesetzt, der Ersatzwert
   0% ließ das Rechteck verschwinden. Genau deshalb trat der Fehler erst
   nach dem Klicken auf und war vorher nicht zu sehen.
   ------------------------------------------------------------------------- */
.hj-leiste.is-grown::after { width: var(--fortschritt, 0%); }

.hjp-visual { min-width: 0; }

/* ---------------------------------------------------------
   ZINSESZINSRECHNER — Teaser
   Links die Eingaben, rechts Ergebnis und Kurve.
   --------------------------------------------------------- */

.rechner {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(26px, 3.4vw, 54px);
  align-items: start;
  margin-top: clamp(32px, 3.4vw, 50px);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 3vw, 46px);
}

/* ---------- Eingaben ---------- */

.rn-feld { margin-bottom: clamp(20px, 2.2vw, 28px); }
.rn-feld:last-child { margin-bottom: 0; }
.rn-feld > label {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 10px;
}

.rn-input {
  display: flex; align-items: baseline; gap: 6px;
  background: var(--cream);
  border: 1px solid rgba(90,60,35,0.14);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.rn-input:focus-within { border-color: var(--orange); background: var(--white); }
.rn-input input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 700; color: var(--charcoal);
  letter-spacing: -0.02em;
  padding: 0;
}
.rn-input input[readonly] { color: var(--warm-grey); cursor: not-allowed; }
.rn-einheit {
  font-family: var(--sans);
  font-size: 0.9rem; font-weight: 600; color: var(--warm-grey);
  flex: none;
}
.rn-input-klein input { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); }
.rn-input-klein { padding: 9px 13px; }

.rn-hint {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem; color: var(--warm-grey);
  margin-top: 7px;
}

/* Schnellwahl */
.rn-schnell { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.rn-chip {
  background: none;
  border: 1px solid rgba(90,60,35,0.16);
  border-radius: 100px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600; color: #5F4E42;
  cursor: pointer;
  transition: all 0.22s ease;
}
.rn-chip:hover { border-color: var(--orange-light); color: var(--orange-dark); }
.rn-chip[aria-pressed="true"] {
  background: var(--orange); border-color: var(--orange); color: var(--white);
}
.rn-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Dauer */
.rn-dauer { display: flex; align-items: center; gap: 14px; }
.rn-dauer input[type="range"] { flex: 1; min-width: 0; }
.rn-dauer .rn-input { flex: none; width: 118px; }

/* Rendite */
.rn-renditezeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rn-renditezeile .rn-input { flex: none; width: 132px; }
.rn-birne {
  background: none; border: none; padding: 0;
  font-family: var(--sans);
  font-size: 0.82rem; font-weight: 600;
  color: var(--orange-dark);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.rn-birne:hover { border-bottom-color: var(--orange); }
.rn-birne:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.rn-erklaerung {
  margin-top: 14px;
  background: var(--cream);
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 18px;
}
.rn-erklaerung[hidden] { display: none; }
.rn-erklaerung strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.86rem; color: var(--charcoal);
  margin-bottom: 8px;
}
.rn-erklaerung p {
  font-family: var(--sans);
  font-size: 0.82rem; color: #5F4E42; line-height: 1.65;
  margin: 0 0 8px;
}
.rn-erklaerung .rne-quelle { font-size: 0.72rem; color: var(--warm-grey); margin-bottom: 10px; }
.rn-erklaerung a {
  font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.rn-erklaerung a:hover { border-bottom-color: var(--orange); }

/* ---------- Ergebnis ---------- */

.rn-ergebnis { min-width: 0; }

.rn-zahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  padding-bottom: clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid rgba(90,60,35,0.10);
  margin-bottom: clamp(18px, 2vw, 26px);
}
.rnz-block { display: flex; flex-direction: column; gap: 5px; }
.rnz-gross { grid-column: 1 / -1; }
.rnz-label {
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--warm-grey);
}
.rnz-wert {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rnz-orange { color: var(--orange-dark); }
.rnz-gross .rnz-wert { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.1rem); }

/* ---------- Kurve ---------- */

.rn-graf { position: relative; }
.rn-svg { width: 100%; height: auto; display: block; overflow: visible; }
.rn-fl-gesamt { fill: rgba(255, 97, 0, 0.13); }
.rn-fl-ein    { fill: rgba(163, 120, 90, 0.20); }
.rn-li-gesamt { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; }
.rn-li-ein    { fill: none; stroke: #A3785A; stroke-width: 1.6; stroke-dasharray: 4 4; }
.rn-marke     { font-family: var(--sans); font-size: 10px; fill: var(--warm-grey); }
.rn-lot       { stroke: rgba(90,60,35,0.25); stroke-width: 1; }
.rn-punkt-gesamt { fill: var(--orange); stroke: var(--white); stroke-width: 2; }
.rn-punkt-ein    { fill: #A3785A; stroke: var(--white); stroke-width: 2; }

.rn-tooltip {
  position: absolute; bottom: 62%;
  transform: translateX(-50%);
  background: var(--charcoal); color: var(--white);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-family: var(--sans); font-size: 0.76rem; line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 24px rgba(58,44,34,0.22);
  z-index: 5;
}
.rn-tooltip[hidden] { display: none; }
.rn-tooltip.nach-links { transform: translateX(-100%) translateX(-10px); }
.rn-tooltip strong { font-size: 0.8rem; margin-bottom: 3px; }
.rn-tooltip b { font-weight: 700; margin-left: 6px; }

.rn-legende {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 12px;
  font-family: var(--sans); font-size: 0.74rem; color: var(--warm-grey);
}
.rn-legende span { display: inline-flex; align-items: center; gap: 7px; }
.rn-legende i { width: 12px; height: 3px; border-radius: 2px; display: block; }
.rn-pkt-ein { background: #A3785A; }
.rn-pkt-zu  { background: var(--orange); }

.rn-graf-hinweis {
  font-family: var(--sans);
  font-size: 0.72rem; color: var(--warm-grey);
  margin: 10px 0 0;
}

.rn-mehr {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(18px, 2vw, 26px);
  font-family: var(--sans);
  font-size: 0.88rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.rn-mehr:hover { border-bottom-color: var(--orange); }
.rn-mehr .btn-arrow { transition: transform 0.25s ease; }
.rn-mehr:hover .btn-arrow { transform: translateX(3px); }

.rn-fuss {
  font-family: var(--sans);
  font-size: 0.7rem; color: var(--warm-grey); line-height: 1.6;
  margin: 14px 0 0;
}

@media (max-width: 900px) {
.rechner { grid-template-columns: 1fr; }
  .rn-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.rn-dauer { flex-wrap: wrap; }
  .rn-dauer input[type="range"] { flex-basis: 100%; }
  .rn-dauer .rn-input { width: 100%; }
  .rn-tooltip { font-size: 0.7rem; padding: 9px 11px; }
}

/* ---------------------------------------------------------
   KUNDINNENSTIMMEN
   Vertrauenszeile, offizielles Widget, Bewertungswand.
   --------------------------------------------------------- */

/* ---------- Schlanke Vertrauenszeile ---------- */


/* ---------- Container für den offiziellen Code ---------- */


/* Solange nichts eingefügt ist, nimmt der Container keinen Platz weg */


/* ---------- Bewertungswand ---------- */


/* Die Reihe läuft über die volle Fensterbreite, nicht nur im Container.
   Dadurch wirkt es wie eine Wand und nicht wie eine Box. */


/* Mobil von Hand schiebbar, sobald jemand die Reihe anfasst */


/* Die zweite Hälfte ist die Kopie. Bei -50 % beginnt der Umlauf nahtlos. */


/* Anhalten, wenn jemand liest */


/* Leichter Versatz, damit keine perfekte Linie entsteht */


/* Ruhige Fassung: wenige Bewertungen oder Bewegung abbestellt */


/* ---------- Abschluss ---------- */

.btn-outline-small {
  background: none;
  border: 1px solid rgba(90,60,35,0.24);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 0.86rem; font-weight: 600;
  padding: 11px 22px; border-radius: 100px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.btn-outline-small:hover {
  border-color: var(--orange); color: var(--orange-dark); background: var(--peach);
}

@media (max-width: 700px) {
}


/* ---------------------------------------------------------
   Kleinigkeiten, die sonst ohne Regel bleiben
   --------------------------------------------------------- */

/* Unterzeile in Section-Köpfen */
.section-head .sub {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem);
  color: #5F4E42; line-height: 1.7;
  margin-top: 14px;
  max-width: 58ch;
}
.section-head.center .sub { margin-left: auto; margin-right: auto; }

/* Reine Layout-Hüllen — sie brauchen nur eine saubere Breite */

.rn-feld-rendite { margin-bottom: 0; }

/* ---------------------------------------------------------
   FAQ — Verweis in den Wissensbereich
   --------------------------------------------------------- */

.faq-mehr {
  /* Bewusst flach. Das ist eine kleine Ausfahrt, keine eigene Sektion. */
  margin-top: clamp(30px, 3vw, 42px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(90,60,35,0.12);
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.faq-mehr .eyebrow { margin-bottom: 10px; }
.fm-frage {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.42rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.3;
  margin: 0 0 8px;
}
.fm-text {
  font-family: var(--sans);
  font-size: 0.9rem; color: #5F4E42; line-height: 1.65;
  margin: 0 auto 16px;
}
.fm-wege {
  display: flex; align-items: center; justify-content: center;
  gap: 10px 26px; flex-wrap: wrap;
}
.fm-link {
  font-family: var(--sans);
  font-size: 0.9rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
  transition: gap 0.25s ease;
}
.fm-link:hover { gap: 12px; }
.fm-link-klein {
  font-family: var(--sans);
  font-size: 0.82rem; color: var(--warm-grey); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.fm-link-klein:hover { color: var(--charcoal); border-bottom-color: rgba(90,60,35,0.3); }

/* Deutlicher Abstand nach der FAQ, damit ein neuer Gedanke beginnt */


.wl-link .btn-arrow { transition: transform 0.25s ease; }


/* ---------------------------------------------------------
   SCHLANKER SCHLUSS
   Bewusst klein. Der große CTA-Block ist entfallen.
   --------------------------------------------------------- */

.sec-schluss {
  background: var(--cream);
  padding: clamp(52px, 5.5vw, 92px) 0;
}
/* .btn-gross steht jetzt global in style.css. */
.schluss {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
}
.sl-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.25; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.sl-text p {
  font-family: var(--sans);
  font-size: 0.95rem; color: #5F4E42; line-height: 1.7;
  margin: 0; max-width: 52ch;
}
.sl-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sl-meta {
  font-family: var(--sans);
  font-size: 0.8rem; color: var(--warm-grey);
  margin: 0;
}
.sl-pe {
  font-family: var(--sans);
  font-size: 0.82rem; font-weight: 600;
  color: #5F4E42; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.sl-pe:hover { border-bottom-color: var(--orange); }
.slpe-sterne { color: var(--orange); letter-spacing: 0.1em; }

@media (max-width: 800px) {
.schluss { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   FOOTER — Ergänzungen
   --------------------------------------------------------- */

/* Schmale Zeile über dem eigentlichen Footer */


.site-footer .footer-brand p { max-width: 30ch; }

/* Social jetzt unten statt in der Markenspalte */
.footer-bottom .footer-social { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom .footer-social a {
  font-family: var(--sans); font-size: 0.8rem;
  color: rgba(255,255,255,0.6); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.footer-bottom .footer-social a:hover {
  color: var(--white); border-bottom-color: rgba(255,255,255,0.4);
}


.ca-frage {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 700; color: var(--charcoal);
  margin: 0 0 6px;
}
.ca-klein {
  font-family: var(--sans);
  font-size: 0.88rem; color: var(--warm-grey);
  margin: 0;
}

/* Datenschutzhinweis jetzt unterhalb und leiser */
.cases-note {
  font-family: var(--sans);
  font-size: 0.72rem; color: var(--warm-grey); line-height: 1.6;
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  max-width: 76ch;
}


/* Die Kartenreihe bleibt beim Öffnen unverändert stehen — mit Fotos.
   Eine geschrumpfte Chip-Leiste wäre platzsparender, aber dann verliert die
   Section genau das, was sie ausmacht: fünf Frauen nebeneinander. */
@media (min-width: 1001px) {

}

/* -------------------------------------------------------------------------
   FALLBEISPIELE AUF DEM HANDY

   Der Slider war richtig, nur zu eng: 74 % Breite ließen rund 259 px für
   Foto, Name und Beschreibung. Der Name brach um, die Beschreibung stand
   in 0,79 rem — und die halb angeschnittene Nachbarkarte machte den
   Eindruck vollends unruhig.

   Jetzt 84 %, größere Schrift, mehr Innenabstand. Der Anschnitt bleibt,
   aber schmaler: gerade genug, um zu zeigen, dass es weitergeht.

   Zusätzlich scroll-padding. Ohne das rastet eine Karte an der Kante des
   Scrollbereichs ein und nicht am Textrand der Seite — sie stand also
   immer ein Stück zu weit links.
   ------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  
  
  
  

  

  
  

  

  

  
  

  
  
  
  
}

/* Auf sehr schmalen Geräten etwas breiter — sonst bleiben für den Text
   keine 250 px übrig. Der Anschnitt bleibt erhalten. */
@media (max-width: 380px) {
  
  
  
}

@media (prefers-reduced-motion: reduce) {

  
  
}

/* ---------------------------------------------------------
   RECHNER — Renditeannahme
   6 % ist der Vorschlag, nicht die Vorgabe. Deshalb sieht das Feld
   genauso bedienbar aus wie Startkapital und Sparrate.
   --------------------------------------------------------- */

.rn-schnell-rendite { margin-top: 11px; }

/* Glühbirne mit Kurzerklärung beim Überfahren */
.rn-birne { position: relative; }
.rn-birne-tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(5px);
  width: min(310px, 74vw);
  background: var(--charcoal); color: var(--white);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-family: var(--sans); font-weight: 400;
  font-size: 0.78rem; line-height: 1.6; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(58,44,34,0.22);
}
.rn-birne-tip strong { font-size: 0.82rem; }
.rn-birne:hover .rn-birne-tip,
.rn-birne:focus-visible .rn-birne-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Ist der lange Kasten offen, stört der Tooltip nur */
.rn-birne[aria-expanded="true"] .rn-birne-tip { display: none; }

.rn-erklaerung .rne-warnung {
  font-weight: 600; color: var(--charcoal);
}

@media (max-width: 560px) {
.rn-birne-tip { left: 0; transform: translateX(0) translateY(5px); }
  .rn-birne:hover .rn-birne-tip,
  .rn-birne:focus-visible .rn-birne-tip { transform: translateX(0) translateY(0); }
}

/* =========================================================================
   ACHT SITUATIONEN — „Was ist bei dir aktuell los?"
   Ein Grundsystem, aber je Situation eine eigene Minigrafik.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SITUATIONSAUSWAHL

   Das Problem war nicht die Technik, sondern die Erwartung: Runde weiße
   Elemente sehen aus wie Etiketten, nicht wie Schalter. Wer nicht klickt,
   erfährt nie, dass darunter acht verschiedene Inhalte liegen.

   Drei Änderungen:
     1. Eine Zeile, die sagt, was passiert.
     2. Die Kacheln sehen nach Schaltern aus — Rahmen, Schatten, und die
        ausgewählte trägt ein Häkchen.
     3. Eine Spitze verbindet die ausgewählte Kachel sichtbar mit dem
        Abschnitt darunter.
   ------------------------------------------------------------------------- */

.situ-anleitung {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: clamp(24px, 2.6vw, 34px) 0 0;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--orange-dark);
}
.sa-pfeil {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: grid; place-items: center;
  font-size: 0.9rem; line-height: 1;
}

.situ-chips {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: 14px 0 clamp(24px, 2.6vw, 36px);
}
.situ-chip {
  background: var(--white);
  border: 1px solid rgba(90,60,35,0.18);
  box-shadow: 0 1px 3px rgba(90,60,35,0.06);
  border-radius: 100px;
  padding: 11px 19px;
  font-family: var(--sans);
  font-size: 0.85rem; font-weight: 500; color: #5F4E42;
  cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.22s ease, background 0.22s ease,
              color 0.22s ease, box-shadow 0.22s ease;
}
.situ-chip:hover {
  border-color: var(--orange);
  color: var(--charcoal);
  box-shadow: 0 3px 10px rgba(255,97,0,0.14);
}
.situ-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.situ-chip[aria-pressed="true"] {
  background: var(--orange); border-color: var(--orange);
  color: var(--white); font-weight: 600;
  box-shadow: 0 4px 14px rgba(255,97,0,0.28);
}
/* Häkchen nur an der ausgewählten. Es macht aus „orange eingefärbt"
   ein sichtbares „das hier ist gerade aktiv". */
.situ-chip[aria-pressed="true"]::after {
  content: "✓";
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 2px;
}
.sc-emoji { font-size: 1rem; line-height: 1; }

/* Zwei Beschriftungen im selben Knopf. Auf dem Desktop die lange. */
.sc-kurz { display: none; }
.sc-lang { display: inline; }

/* Weich überblenden statt springen */
.situ-panel {
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.4,0,.2,1);
}
.situ-panel.ist-da { opacity: 1; transform: none; }

/* Auf dem Desktop ist der Bereich immer offen — die Zeile zum Aufklappen
   wäre dort nur ein Knopf, der nichts tut. */
.situ-vertiefung > summary { display: none; }
.situ-vertiefung { border: none; margin: 0; }

/* Kurzes Aufleuchten beim Wechsel. Ohne das merkt man auf einem kleinen
   Bildschirm nicht immer, dass unten etwas Neues steht. */
@keyframes situWechsel {
  from { box-shadow: 0 0 0 3px rgba(255,97,0,0.34); }
  to   { box-shadow: 0 0 0 3px rgba(255,97,0,0); }
}
.situ-panel > .situ-inhalt { border-radius: var(--r); }
.situ-panel.hat-gewechselt > .situ-inhalt {
  animation: situWechsel 0.9s ease-out;
}

.situ-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(26px, 3.4vw, 56px);
  align-items: start;
  background: var(--cream);
  border-radius: var(--r);
  padding: clamp(26px, 3.2vw, 48px);
}

/* ---------- linke Spalte ---------- */

.situ-badge {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 14px;
}
.situ-headline {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.25; letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.situ-text {
  font-family: var(--sans);
  font-size: 0.95rem; color: #5F4E42; line-height: 1.72;
  margin: 0 0 14px;
  max-width: 62ch;
}

/* ---------- Fact-Card: eine dominante Zahl ---------- */

.situ-fact {
  background: var(--peach);
  border-radius: var(--r-sm);
  padding: clamp(20px, 2.2vw, 30px);
  margin: clamp(20px, 2.2vw, 30px) 0;
}
.sf-label {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 12px;
}
.sf-zahl {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1; letter-spacing: -0.03em;
  margin-bottom: 14px;
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.sf-text {
  font-family: var(--sans);
  font-size: 0.92rem; color: #5F4E42; line-height: 1.65;
  margin: 0 0 10px; max-width: 54ch;
}
.sf-zusatz {
  font-family: var(--sans);
  font-size: 0.88rem; color: #6B5B4F; line-height: 1.65;
  margin: 0 0 14px; max-width: 54ch;
}
.sf-quelle {
  font-family: var(--sans);
  font-size: 0.68rem; color: var(--warm-grey);
  padding-top: 12px;
  border-top: 1px solid rgba(90,60,35,0.12);
}

/* ⓘ zur Erklärung */
.sf-info {
  flex: none;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid var(--orange-dark);
  background: none; color: var(--orange-dark);
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700;
  cursor: help; padding: 0; margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.22s ease, color 0.22s ease;
}
.sf-info:hover, .sf-info:focus-visible { background: var(--orange); color: var(--white); outline: none; }
.sf-info-text {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: min(300px, 74vw);
  background: var(--charcoal); color: var(--white);
  font-family: var(--sans); font-size: 0.76rem; font-weight: 400;
  line-height: 1.6; text-align: left; letter-spacing: 0;
  padding: 13px 15px; border-radius: var(--r-sm);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 40;
  box-shadow: 0 10px 28px rgba(58,44,34,0.2);
}
.sf-info:hover .sf-info-text,
.sf-info:focus-visible .sf-info-text,
.sf-info.is-open .sf-info-text {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Nicola-Tipp */
.situ-tipp {
  font-family: var(--sans);
  font-size: 0.88rem; color: #5F4E42; line-height: 1.65;
  padding: 14px 18px;
  background: var(--white);
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 0 0 clamp(20px, 2.2vw, 28px);
}
.situ-tipp b { color: var(--charcoal); }

/* Kontextzahl: die zweite, leisere Zahl */
.situ-kontext {
  font-family: var(--sans);
  font-size: 0.86rem; color: #6B5B4F; line-height: 1.65;
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  max-width: 58ch;
}
.situ-kontext b {
  font-family: var(--serif); font-size: 1.15rem;
  color: var(--charcoal); margin-right: 4px;
}
.sk-quelle { display: block; font-size: 0.7rem; color: var(--warm-grey); margin-top: 5px; }

/* ---------- Punkte ---------- */

.situ-punkte-label {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 12px;
}
.situ-punkte { list-style: none; margin: 0; padding: 0; }
.situ-punkte li {
  font-family: var(--sans);
  font-size: 0.92rem; color: #5F4E42; line-height: 1.6;
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px solid rgba(90,60,35,0.09);
}
.situ-punkte li:last-child { border-bottom: none; }
.situ-punkte li::before {
  content: "→";
  position: absolute; left: 0; top: 9px;
  color: var(--orange); font-weight: 600;
}

.situ-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; }
.situ-links a {
  font-family: var(--sans);
  font-size: 0.82rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.situ-links a:hover { border-bottom-color: var(--orange); }

.situ-hinweis {
  font-family: var(--sans);
  font-size: 0.7rem; color: var(--warm-grey); line-height: 1.6;
  margin: 16px 0 0;
}

/* ---------- rechte Spalte: CTA ---------- */

.situ-cta {
  background: var(--white);
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: var(--shadow-soft);
  position: sticky; top: 100px;
}
.sc-label {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 12px;
}
.sc-titel {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.3; margin-bottom: 10px;
}
.sc-text {
  font-family: var(--sans);
  font-size: 0.87rem; color: #5F4E42; line-height: 1.65;
  margin: 0 0 20px;
}
.situ-cta .btn { width: 100%; justify-content: center; text-align: center; }
.sc-meta {
  font-family: var(--sans);
  font-size: 0.74rem; color: var(--warm-grey);
  margin: 12px 0 0; text-align: center;
}

/* =========================================================================
   MINIGRAFIKEN — je Situation eine andere
   ========================================================================= */

.situ-visual { margin: 0 0 clamp(20px, 2.2vw, 30px); }
.sv-fuss {
  font-family: var(--sans);
  font-size: 0.72rem; color: var(--warm-grey); line-height: 1.6;
  margin: 12px 0 0; max-width: 60ch;
}

/* 1 · Drei Töpfe */
.sv-toepfe { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.svt-topf {
  background: var(--white);
  border-radius: var(--r-sm);
  border-top: 3px solid var(--orange);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: calc(1 - var(--stufe) * 0.16);
}
.svt-zeit {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-dark);
}
.svt-titel { font-family: var(--sans); font-size: 0.84rem; color: #5F4E42; line-height: 1.5; }

/* 2 · Rentenlücke */
.sv-luecke { }
.svl-balken {
  display: flex; height: 42px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--white);
}
.svl-teil { height: 100%; }
.svl-gedeckt { background: #A3785A; }
.svl-offen   { flex: 1; background: repeating-linear-gradient(135deg, var(--orange) 0 8px, #FF7A26 8px 16px); }
.svl-legende {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px;
  font-family: var(--sans); font-size: 0.8rem; color: #5F4E42;
}
.svl-legende span { display: inline-flex; align-items: center; gap: 7px; }
.svl-legende i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.svl-pkt-gedeckt { background: #A3785A; }
.svl-pkt-offen   { background: var(--orange); }

/* 3 · Bausteine */
.sv-bausteine { text-align: center; }
.svb-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.svb-teil {
  background: var(--white); border: 1px solid rgba(90,60,35,0.14);
  border-radius: 100px; padding: 9px 17px;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: #5F4E42;
}
.svb-pfeil { color: var(--orange); font-size: 1.2rem; margin: 10px 0; }
.svb-ziel {
  display: inline-block;
  background: var(--orange); color: var(--white);
  border-radius: 100px; padding: 11px 26px;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 700;
}

/* 4 · Zeitstrahl */
.sv-strahl { display: flex; gap: 6px; position: relative; }
.sv-strahl::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 6px;
  height: 2px; background: rgba(90,60,35,0.16);
}
.svs-punkt {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; position: relative; z-index: 2;
}
.svs-marke {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--white); border: 2px solid rgba(90,60,35,0.28);
  display: block;
}
.svs-punkt.ist-jetzt .svs-marke { background: var(--orange); border-color: var(--orange); }
.svs-text { font-family: var(--sans); font-size: 0.76rem; color: #5F4E42; line-height: 1.4; }
.svs-punkt.ist-jetzt .svs-text { color: var(--orange-dark); font-weight: 600; }

/* 5 · Cashflow */
.sv-cashflow {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px; align-items: end; min-height: 150px;
}
.svc-saeule { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.svc-balken {
  width: 100%; max-width: 92px;
  background: linear-gradient(180deg, var(--orange), #E85D0C);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  min-height: 26px;
}
.svc-saeule:nth-child(2) .svc-balken { background: linear-gradient(180deg, #C99A76, #A3785A); }
.svc-zeit { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; color: var(--charcoal); }
.svc-label { font-family: var(--sans); font-size: 0.72rem; color: var(--warm-grey); text-align: center; line-height: 1.4; }

/* 6 · Aufteilung */
.sva-band { display: flex; height: 34px; border-radius: var(--r-sm); overflow: hidden; }
.sva-teil { background: var(--orange); opacity: calc(1 - var(--stufe) * 0.3); }
.sva-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.sva-legende span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.8rem; color: #5F4E42;
}
.sva-legende i {
  width: 11px; height: 11px; border-radius: 3px; display: block;
  background: var(--orange); opacity: calc(1 - var(--stufe) * 0.3);
}
.sva-legende b { color: var(--charcoal); }

/* 7 · Objektrechnung */
.sv-objekt { background: var(--white); border-radius: var(--r-sm); overflow: hidden; }
.svo-kopf { padding: 16px 18px 12px; border-bottom: 1px solid rgba(90,60,35,0.1); }
.svo-kopf strong {
  display: block; font-family: var(--serif); font-size: 1rem;
  color: var(--charcoal); margin-bottom: 3px;
}
.svo-kopf span { font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey); }
.svo-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 18px; border-bottom: 1px solid rgba(90,60,35,0.07);
  font-family: var(--sans); font-size: 0.86rem;
}
.svo-label { color: #5F4E42; }
.svo-wert { font-weight: 600; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.svo-zeile.ist-plus  .svo-wert::before { content: "+ "; color: var(--orange-dark); }
.svo-zeile.ist-minus .svo-wert::before { content: "− "; color: var(--warm-grey); }
.svo-ergebnis {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 15px 18px; background: var(--peach);
  font-family: var(--sans); font-size: 0.86rem; color: var(--orange-dark);
}
.svo-ergebnis strong { font-family: var(--serif); font-size: 1.3rem; color: var(--charcoal); }

/* 8 · Meins – Gemeinsam – Deins */
.sv-kreise {
  display: flex; align-items: center; justify-content: center;
  min-height: 130px;
}
.svk-kreis {
  width: clamp(110px, 15vw, 150px); aspect-ratio: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
  text-align: center;
}
.svk-links  { background: rgba(255,97,0,0.2);   color: var(--orange-dark); margin-right: -34px; }
.svk-rechts { background: rgba(163,120,90,0.22); color: #6B5B4F; margin-left: -34px; }
.svk-mitte {
  width: clamp(76px, 10vw, 100px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--charcoal); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  text-align: center; z-index: 2;
}

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
/* Reihenfolge: Headline → Text → Zahl → Darauf schauen wir → CTA */
  .situ-inhalt { grid-template-columns: 1fr; }
  .situ-cta { position: static; }
  .sv-toepfe, .sv-cashflow { grid-template-columns: 1fr; }
  .sv-cashflow { min-height: 0; }
  .svc-saeule { flex-direction: row; align-items: center; gap: 12px; }
  .svc-balken { width: 34%; height: 30px !important; min-height: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
  .svc-label { text-align: left; }
  .sv-strahl { flex-direction: column; gap: 12px; align-items: flex-start; }
  .sv-strahl::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .svs-punkt { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
  .sv-kreise { flex-direction: column; }
  .svk-links  { margin-right: 0; margin-bottom: -26px; }
  .svk-rechts { margin-left: 0;  margin-top: -26px; }
}

@media (max-width: 560px) {
  .sf-info-text { left: 0; transform: translateX(0) translateY(4px); }
  .sf-info:hover .sf-info-text,
  .sf-info.is-open .sf-info-text { transform: translateX(0) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
.situ-panel { transition: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   „Kommt in Kürze"-Seite
   --------------------------------------------------------- */

.bald {
  min-height: 78vh;
  display: flex; align-items: center;
  padding: clamp(140px, 14vw, 200px) 0 clamp(70px, 8vw, 120px);
  background: var(--cream);
}
.bald-inner { max-width: 620px; }
.bald h1 {
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.2rem);
  margin-bottom: 22px;
}
.bald-text {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  color: #5F4E42; line-height: 1.75;
  margin-bottom: 14px;
  max-width: 56ch;
}
.bald-cta { margin-top: 32px; }
.bald-meta {
  font-family: var(--sans);
  font-size: 0.8rem; color: var(--warm-grey);
  margin-top: 16px;
}


@media (max-width: 1000px) {
  
}


@media (max-width: 420px) {
  
}

@media (prefers-reduced-motion: reduce) {
  
}

@media (max-width: 768px) {
  /* -----------------------------------------------------------------
     AUSWAHL AUF DEM HANDY

     Acht Kacheln, die umbrechen, ergaben vier Zeilen — rund 200 px, bevor
     überhaupt Inhalt kam. Und ein Block aus vier Zeilen sieht aus wie
     eine Aufzählung, nicht wie eine Auswahl.

     Jetzt: eine Zeile zum Wischen. Dass rechts eine Kachel angeschnitten
     ist, sagt ohne Worte, dass es mehr gibt und dass man hier etwas tun
     kann. Der Abschnitt darunter rückt dadurch rund 150 px nach oben.
     ----------------------------------------------------------------- */
  /* -----------------------------------------------------------------
     ZWEI SPALTEN, VIER REIHEN

     Erst waren es umbrechende Etiketten, dann eine Zeile zum Wischen.
     Beides hatte denselben Haken: Ein kleiner Text in einer Pille sieht
     aus wie eine Beschriftung, nicht wie etwas, das man antippt. Und
     beim Wischen sieht man nie alle acht Möglichkeiten.

     Jetzt acht echte Karten in zwei Spalten. Man sieht auf einen Blick,
     was zur Auswahl steht, und jede Karte ist groß genug, dass klar ist:
     Das hier ist ein Schalter.

     Auf einem 390-px-Gerät: Spalte 350 px, Abstand 12 px → 169 px je
     Karte, davon 137 px Textbreite. Die längste Beschriftung passt damit
     in drei Zeilen.
     ----------------------------------------------------------------- */
  .situ-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    margin: 14px 0 clamp(22px, 3vw, 30px);
  }

  .situ-chip {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    min-height: 118px;
    padding: 16px;
    border-radius: var(--r-sm);
    text-align: left;
    white-space: normal;
    /* Die Rückmeldung beim Tippen. Kurz und klein — auf einem Telefon
       ersetzt sie das Hover, das es dort nicht gibt. */
    transition: transform 0.12s ease, background 0.22s ease,
                border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
  }
  .situ-chip:active { transform: scale(0.965); }

  .sc-emoji {
    font-size: 1.7rem;
    line-height: 1;
    margin-bottom: 10px;
  }
  .sc-lang { display: none; }
  .sc-kurz {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--charcoal);
  }

  /* Die ausgewählte Karte. Kein zarter Rahmen, sondern eine Fläche —
     man muss aus zwei Metern erkennen, welche gerade gilt. */
  .situ-chip[aria-pressed="true"] {
    background: var(--orange);
    border-color: var(--orange);
    box-shadow: 0 6px 20px rgba(255,97,0,0.3);
  }
  .situ-chip[aria-pressed="true"] .sc-kurz { color: var(--white); }
  /* Das Häkchen sitzt in der Ecke statt hinter dem Text — sonst rutscht
     es bei drei Zeilen an eine unmotivierte Stelle. */
  .situ-chip[aria-pressed="true"]::after {
    position: absolute;
    top: 12px; right: 14px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--white);
  }
  .situ-chip { position: relative; }

  /* -----------------------------------------------------------------
     DAS ERGEBNIS

     Zum Scannen gebaut, nicht zum Lesen:

       Kopfzeile · zwei Absätze · eine Zahl · drei Haken · Aufruf

     Alles, was erklärt statt einordnet, liegt im aufklappbaren Teil
     darunter.
     ----------------------------------------------------------------- */
  .situ-inhalt {
    padding: 22px 18px 24px;
    gap: 20px;
    /* Ein kräftiger Streifen oben. Er verbindet den Abschnitt mit der
       orangen Karte, die man gerade angetippt hat. */
    border-top: 3px solid var(--orange);
  }
  .situ-headline { font-size: 1.32rem; line-height: 1.28; margin-bottom: 12px; }
  .situ-text { font-size: 0.93rem; line-height: 1.62; margin-bottom: 12px; }
  .situ-fact { padding: 18px; margin: 18px 0; }

  .situ-punkte-label { margin-top: 20px; }
  /* Haken statt Pfeilen. Ein Pfeil sagt „hier geht es weiter", ein Haken
     sagt „das ist erledigt, wenn wir zusammen daraufschauen". Auf dem
     Handy ist das der Unterschied zwischen einer Liste und einem
     Versprechen. Trennlinien entfallen, drei Zeilen brauchen kein
     Raster. */
  .situ-punkte li {
    padding: 7px 0 7px 26px;
    border-bottom: none;
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .situ-punkte li::before {
    content: "✓";
    top: 7px;
    font-weight: 700;
  }

  /* -----------------------------------------------------------------
     DER AUFKLAPPBARE TEIL

     Grafik, Einordnung und Hinweis. Auf dem Desktop steht das alles
     offen da; hier kostet es sonst zwei Bildschirmhöhen, bevor man zum
     Aufruf kommt.
     ----------------------------------------------------------------- */
  .situ-vertiefung {
    margin-top: 20px;
    border-top: 1px solid rgba(90,60,35,0.12);
  }
  .situ-vertiefung > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--orange-dark);
  }
  .situ-vertiefung > summary::-webkit-details-marker { display: none; }
  .sv-pfeil { transition: transform 0.25s ease; font-size: 0.8rem; }
  .situ-vertiefung[open] > summary .sv-pfeil { transform: rotate(180deg); }
  .sv-inhalt { padding-bottom: 6px; }
}

/* -------------------------------------------------------------------------
   NACHZÜGLER FÜR SCHMALE GERÄTE

   .immo-kennzahlen bekam weiter oben in einem @media-Block zwei Spalten,
   danach setzte eine Grundregel wieder repeat(auto-fit, minmax(120px, …)).
   Die spätere gewann — auf dem Handy standen die Kennzahlen also in so
   vielen Spalten, wie 120 px zulassen, statt in zweien.

   Vom Mobiltest gefunden.
   ------------------------------------------------------------------------- */

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