/* =========================================================================
   RECHNER — Übersichtsseite und Rentenlückenrechner
   ========================================================================= */

/* ---------------------------------------------------------
   Übersichtsseite: Kacheln
   --------------------------------------------------------- */

.rk-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.rk-kachel {
  background: var(--white);
  border-radius: var(--r);
  border: 1px solid rgba(90,60,35,0.10);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 2.8vw, 38px);
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
a.rk-kachel:hover {
  transform: translateY(-3px);
  border-color: var(--orange-light);
  box-shadow: var(--shadow-card);
}
a.rk-kachel:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.rk-gross { grid-column: 1 / -1; }

.rkk-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rkk-emoji { font-size: 1.5rem; line-height: 1; }
.rkk-marke {
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dark);
  background: var(--peach);
  border-radius: 100px; padding: 5px 12px;
}
.rk-kachel h2 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 700; color: var(--charcoal);
  margin: 0 0 12px;
}
.rkk-text {
  font-family: var(--sans);
  font-size: 0.94rem; color: #5F4E42; line-height: 1.7;
  margin: 0 0 18px; max-width: 62ch;
}
.rkk-punkte { list-style: none; margin: 0 0 20px; padding: 0; }
.rkk-punkte li {
  font-family: var(--sans);
  font-size: 0.88rem; color: #5F4E42;
  padding: 6px 0 6px 24px; position: relative;
}
.rkk-punkte li::before {
  content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700;
}
.rkk-link {
  font-family: var(--sans);
  font-size: 0.9rem; font-weight: 600;
  color: var(--orange-dark);
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
}
.rk-kachel:hover .rkk-link .btn-arrow { transform: translateX(4px); }
.rkk-link .btn-arrow { transition: transform 0.25s ease; }
.rkk-dauer {
  font-family: var(--sans);
  font-size: 0.72rem; color: var(--warm-grey);
  margin-top: 10px;
}
.rk-kachel.ist-geplant { opacity: 0.65; box-shadow: none; }
.rkk-bald {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--warm-grey);
  margin-top: auto;
}
.rk-hinweis {
  font-family: var(--sans);
  font-size: 0.76rem; color: var(--warm-grey); line-height: 1.7;
  margin: clamp(24px, 2.6vw, 34px) 0 0; max-width: 70ch;
}

/* ---------------------------------------------------------
   Rentenlückenrechner
   --------------------------------------------------------- */

.rl-hero { padding-bottom: clamp(30px, 3vw, 46px); }
.rl-datenschutz {
  font-family: var(--sans);
  font-size: 0.78rem; color: var(--warm-grey);
  margin-top: 18px;
}

/* Fortschritt am Rand */
.rl-fortschritt {
  position: fixed; left: 18px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 7px;
  z-index: 40;
}
.rlf-punkt {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(90,60,35,0.16);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  color: var(--warm-grey); text-decoration: none;
  transition: all 0.25s ease;
}
.rlf-punkt:hover { border-color: var(--orange); color: var(--orange-dark); }
.rlf-punkt.ist-hier { background: var(--orange); border-color: var(--orange); color: var(--white); }
@media (max-width: 1400px) { .rl-fortschritt { display: none; } }

.rl-buehne { padding-bottom: clamp(50px, 6vw, 90px); }

/* Ein Schritt */
.rl-schritt {
  padding: clamp(28px, 3.2vw, 48px);
  border-radius: var(--r);
  margin-bottom: clamp(18px, 2vw, 28px);
  background: var(--white);
  border: 1px solid rgba(90,60,35,0.09);
  scroll-margin-top: 110px;
}
.rl-schritt-hell { background: var(--cream); border-color: transparent; }
.rl-schritt-akzent { background: var(--peach); border-color: transparent; }

.rls-kopf { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.rls-nr {
  font-family: var(--serif);
  font-size: 1.4rem; font-weight: 700; color: var(--orange);
  line-height: 1; flex: none;
}
.rls-kopf h2 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 700; color: var(--charcoal);
  line-height: 1.25; margin: 0;
}
.rls-intro {
  font-family: var(--sans);
  font-size: 0.94rem; color: #5F4E42; line-height: 1.7;
  margin: 0 0 24px; max-width: 66ch;
}

/* Eingabefelder */
.rl-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin-bottom: 24px;
}
.rl-feld-breit { grid-column: 1 / -1; max-width: 420px; }
.rl-feld > label, .rlb-feld > label {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 8px;
}
.rl-feld input[type="date"],
.rl-feld select,
.rl-inputzeile {
  width: 100%;
  background: var(--cream);
  border: 1px solid rgba(90,60,35,0.14);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-family: var(--sans); font-size: 0.95rem;
  color: var(--charcoal);
  transition: border-color 0.22s ease, background 0.22s ease;
}
.rl-feld input[type="date"]:focus, .rl-feld select:focus { outline: none; border-color: var(--orange); background: var(--white); }
.rl-inputzeile { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; }
.rl-inputzeile:focus-within { border-color: var(--orange); background: var(--white); }
.rl-inputzeile input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 700; color: var(--charcoal);
  padding: 0;
}
.rl-gross input { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); }
.rl-einheit {
  font-family: var(--sans); font-size: 0.84rem; font-weight: 600;
  color: var(--warm-grey); flex: none;
}
.rl-hint {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem; color: var(--warm-grey); line-height: 1.55;
  margin-top: 7px;
}

/* Chips */
.rl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rl-chip {
  background: none;
  border: 1px solid rgba(90,60,35,0.16);
  border-radius: 100px; padding: 8px 16px;
  font-family: var(--sans); font-size: 0.84rem; font-weight: 600;
  color: #5F4E42; cursor: pointer;
  transition: all 0.2s ease;
}
.rl-chip:hover { border-color: var(--orange-light); }
.rl-chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--white); }

/* Szenarioschalter */
.rl-szenario {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.rlsz-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 10px;
}
.rlsz-schalter { display: inline-flex; gap: 4px; background: var(--white); border-radius: 100px; padding: 4px; }
.rlsz-btn {
  background: none; border: none; cursor: pointer;
  border-radius: 100px; padding: 9px 20px;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 600;
  color: #5F4E42; transition: all 0.22s ease;
}
.rlsz-btn.is-aktiv { background: var(--orange); color: var(--white); }
.rlsz-erklaerung {
  font-family: var(--sans);
  font-size: 0.82rem; color: var(--warm-grey); line-height: 1.6;
  margin: 12px 0 0; max-width: 60ch;
}

/* Bausteine */
.rl-bausteine { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.rl-baustein {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 18px 20px;
}
.rlb-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rlb-name {
  flex: 1; min-width: 140px;
  background: none; border: none; border-bottom: 1px solid rgba(90,60,35,0.2);
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  color: var(--charcoal); padding: 3px 0;
}
.rlb-name:focus { outline: none; border-bottom-color: var(--orange); }
.rlb-art {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-dark);
}
.rlb-weg {
  background: none; border: none; cursor: pointer;
  font-size: 1.2rem; color: var(--warm-grey); line-height: 1;
  padding: 4px 8px; border-radius: 50%;
}
.rlb-weg:hover { color: var(--charcoal); background: rgba(90,60,35,0.08); }
.rlb-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.rlb-schalter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rlb-schalter label {
  font-family: var(--sans); font-size: 0.82rem; color: #5F4E42;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.rlb-hinweis {
  font-family: var(--sans);
  font-size: 0.76rem; color: var(--warm-grey); line-height: 1.6;
  margin: 12px 0 0;
}

.rl-hinzu { border-top: 1px solid rgba(90,60,35,0.1); padding-top: 18px; }
.rl-hinzu > span {
  display: block;
  font-family: var(--sans); font-size: 0.8rem; color: var(--warm-grey);
  margin-bottom: 10px;
}
.rl-hinzu-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-hinzu-btn {
  background: var(--white);
  border: 1px solid rgba(90,60,35,0.16);
  border-radius: 100px; padding: 9px 16px;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  color: #5F4E42; cursor: pointer;
  transition: all 0.2s ease;
}
.rl-hinzu-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange-dark); }
.rl-hinzu-btn:disabled { opacity: 0.35; cursor: default; }

/* Rechenblöcke */
.rl-block {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.rl-schritt-hell .rl-block, .rl-schritt-akzent .rl-block { background: var(--white); }
.rl-block-gross { padding: clamp(20px, 2.2vw, 28px); }
.rlbk-titel {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 12px;
}
.rl-zeile {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 7px 0;
  font-family: var(--sans); font-size: 0.9rem; color: #5F4E42;
  border-bottom: 1px solid rgba(90,60,35,0.07);
}
.rl-zeile:last-child { border-bottom: none; }
.rlz-wert { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: var(--charcoal); }
.rlz-klein { display: block; font-size: 0.74rem; color: var(--warm-grey); margin-top: 2px; }
.rlz-pfeil { color: var(--orange); margin: 0 4px; }
.rl-zeile.ist-nur-text .rlz-text { color: var(--warm-grey); font-size: 0.84rem; }
.rl-zeile.ist-zwischen { border-top: 1px solid rgba(90,60,35,0.16); margin-top: 4px; padding-top: 11px; }
.rl-zeile.ist-zwischen .rlz-wert { font-family: var(--serif); font-size: 1.1rem; }
.rl-zeile.ist-ergebnis {
  border-top: 2px solid var(--orange); border-bottom: none;
  margin-top: 6px; padding-top: 13px;
}
.rl-zeile.ist-ergebnis .rlz-text { font-weight: 600; color: var(--charcoal); }
.rl-zeile.ist-ergebnis .rlz-wert {
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 700; color: var(--orange-dark);
}
.rl-zeile.ist-nebenwert { border: none; padding-top: 2px; }
.rl-zeile.ist-nebenwert .rlz-text, .rl-zeile.ist-nebenwert .rlz-wert {
  font-size: 0.78rem; color: var(--warm-grey); font-weight: 400;
}
.rl-zeilenhinweis {
  font-family: var(--sans);
  font-size: 0.78rem; color: var(--warm-grey); line-height: 1.65;
  margin: 8px 0 14px; max-width: 68ch;
}
.rl-teilblock { margin-bottom: clamp(24px, 2.6vw, 34px); }
.rl-teilblock h3 {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 700; color: var(--charcoal);
  margin: 0 0 14px;
}
.rl-summe { margin-top: 4px; }

/* Nettotreppe */
.rl-treppe { display: flex; flex-direction: column; gap: 3px; }
.rl-stufe {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 15px 20px;
  font-family: var(--sans); font-size: 0.92rem; color: #5F4E42;
}
.rl-stufe .rlst-wert {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  color: var(--charcoal); font-variant-numeric: tabular-nums;
}
.rl-stufe.ist-abzug { margin-left: clamp(12px, 2vw, 32px); }
.rl-stufe.ist-abzug .rlst-wert { color: var(--warm-grey); }
.rl-stufe.ist-final {
  background: var(--orange); color: var(--white);
  margin-top: 8px; padding: 22px 24px;
}
.rl-stufe.ist-final .rlst-label { font-weight: 600; }
.rl-stufe.ist-final .rlst-wert {
  color: var(--white); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
}
.rl-nebensatz {
  font-family: var(--sans);
  font-size: 0.8rem; color: var(--warm-grey);
  margin: 14px 0 0;
}

/* Doppelwert */
.rl-doppelwert {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px; margin-top: 16px;
}
.rl-doppelwert > div {
  background: var(--white); border-radius: var(--r-sm);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 4px;
}
.rldw-label {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-grey);
}
.rldw-wert {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
  font-weight: 700; color: var(--charcoal); line-height: 1;
}
.rldw-sub { font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey); }
.rl-gut {
  font-family: var(--sans); font-size: 0.92rem; color: var(--charcoal);
  background: var(--white); border-left: 3px solid var(--sage-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px; margin-top: 16px; line-height: 1.65;
}

/* Großes Ergebnis */
.rl-grossergebnis {
  background: var(--orange); color: var(--white);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  text-align: center; margin: 18px 0;
}
.rlge-label {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9;
}
.rlge-wert {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.8rem + 3.6vw, 4rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
}

/* Szenarien */
.rl-szenarien { margin-top: 20px; }
.rlsn-titel {
  font-family: var(--sans); font-size: 0.8rem; color: var(--warm-grey);
  margin-bottom: 12px;
}
.rlsn-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.rlsn-karte {
  background: var(--white); border: 1px solid rgba(90,60,35,0.12);
  border-radius: var(--r-sm); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.rlsn-karte.ist-aktiv { border-color: var(--orange); border-width: 2px; }
/* Die Karten tragen jetzt „4 % Renditeannahme" statt „vorsichtig".
   Versalien mit Sperrung waren für ein einzelnes Wort richtig und
   machen aus einer ganzen Angabe eine Wand. Also normale Schreibung. */
.rlsn-name {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
  color: var(--orange-dark); line-height: 1.25;
}
/* Die Einordnung darunter ist der längste Text auf der Karte und
   braucht Platz für zwei Zeilen, ohne dass die Karten verspringen. */
.rlsn-rendite {
  font-family: var(--sans); font-size: 0.75rem; line-height: 1.35;
  color: var(--warm-grey); min-height: 2.7em; margin-top: 2px;
}
.rlsn-rate {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.1; margin-top: 4px;
}
.rlsn-sub { font-family: var(--sans); font-size: 0.72rem; color: var(--warm-grey); }

/* Zusammenfassung */
.rl-zusammen { background: var(--charcoal); color: var(--white); border-color: transparent; }
.rl-zusammen h2 { color: var(--white); }
.rl-fazit { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.rl-fazitzeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-family: var(--sans); font-size: 0.92rem; color: rgba(255,255,255,0.78);
}
.rl-fazitzeile strong {
  font-family: var(--serif); font-size: 1.2rem; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.rl-fazitzeile.ist-akzent strong { color: var(--orange-light); }
.rl-fazitzeile.ist-gross { border-bottom: none; padding-top: 20px; }
.rl-fazitzeile.ist-gross strong { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.8rem); color: var(--orange-light); }

.rl-vergleich h3 {
  font-family: var(--serif); font-size: 1.1rem; color: var(--white);
  margin: 0 0 14px;
}
.rl-vergleich table { width: 100%; border-collapse: collapse; }
.rl-vergleich th, .rl-vergleich td {
  text-align: right; padding: 10px 12px;
  font-family: var(--sans); font-size: 0.86rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-variant-numeric: tabular-nums;
}
.rl-vergleich th:first-child, .rl-vergleich td:first-child { text-align: left; }
.rl-vergleich th {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.rl-vergleich td { color: rgba(255,255,255,0.85); }
.rl-vergleich .rl-zeilenhinweis { color: rgba(255,255,255,0.55); margin-top: 14px; }

/* Abschluss */
.rl-abschluss {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: clamp(24px, 3.4vw, 54px); align-items: center;
  background: var(--cream); border-radius: var(--r);
  padding: clamp(28px, 3.4vw, 50px);
  margin-top: clamp(24px, 3vw, 40px);
}
.rla-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 700; color: var(--charcoal); margin: 0 0 12px;
}
.rla-text p { font-family: var(--sans); font-size: 0.94rem; color: #5F4E42; line-height: 1.7; margin: 0; }
.rla-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Rechtsstand */
.rl-rechtsstand {
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(90,60,35,0.12);
  font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey);
  line-height: 1.7;
}
.rl-rechtsstand p { font-size: 0.78rem; color: var(--warm-grey); margin: 0 0 10px; max-width: 76ch; }
.rl-rechtsstand strong { color: var(--charcoal); }
.rl-rechtsstand summary { cursor: pointer; color: var(--orange-dark); font-weight: 600; margin-top: 6px; }
.rl-rechtsstand ul { margin: 12px 0 0; padding: 0; list-style: none; }
.rl-rechtsstand li { padding: 5px 0 5px 16px; position: relative; }
.rl-rechtsstand li::before { content: "·"; position: absolute; left: 4px; color: var(--orange); }

@media (max-width: 800px) {
  .rl-abschluss { grid-template-columns: 1fr; }
  .rl-stufe.ist-abzug { margin-left: 0; }
}

/* Brotkrumen und Ergebniskasten */
/* .brotkrumen steht jetzt global in style.css. */

.rl-ergebniskasten { margin-top: 4px; }

/* ---------------------------------------------------------
   Kapitalabfindungen
   --------------------------------------------------------- */

.rl-einmal {
  background: var(--peach);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  margin-top: 16px;
}
.rle-titel {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-dark); margin-bottom: 12px;
}
.rl-einmal .rl-zeile { border-bottom-color: rgba(90,60,35,0.12); }
.rl-einmal .rl-zeilenhinweis { margin-bottom: 0; }

.rl-abfindungsblock {
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 2px solid var(--orange);
}
.rl-abfindungsblock[hidden] { display: none; }

/* Zwei Phasen nebeneinander */
.rl-phasen {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px);
  margin-top: 20px; flex-wrap: wrap;
}
.rlp-karte {
  flex: 1; min-width: 150px;
  background: var(--white);
  border: 1px solid rgba(90,60,35,0.12);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.rlp-karte.ist-besser { border-color: var(--orange); }
.rlp-zeit {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-grey);
}
.rlp-karte.ist-besser .rlp-zeit { color: var(--orange-dark); }
.rlp-wert {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 700; color: var(--charcoal); line-height: 1;
}
.rlp-sub { font-family: var(--sans); font-size: 0.74rem; color: var(--warm-grey); }
.rlp-pfeil { color: var(--orange); font-size: 1.3rem; flex: none; }

@media (max-width: 560px) {
  .rl-phasen { flex-direction: column; align-items: stretch; }
  .rlp-pfeil { transform: rotate(90deg); text-align: center; }
}


/* Rückweg auf die Säulenseite Altersvorsorge */
.rla-weiter {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--warm-grey);
  margin: 16px 0 0;
}
.rla-weiter a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.rla-weiter a:hover { color: var(--orange); }


/* Kennzeichnung im Feldlabel: Hier ist ein Bruttowert gemeint.
   Die Verwechslung brutto/netto war der häufigste Fehler beim Ausfüllen. */
.f-brutto {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--orange-dark);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}


/* =========================================================================
   SCHRITT 08 · BEIDE GRÖSSEN AUF DEN RENTENBEGINN

   Zwei Spalten nebeneinander, weil genau das die Aussage ist: Es wird
   nicht eine Zahl umgerechnet, sondern beide, und zwar mit demselben
   Faktor. Untereinander gestellt sähe es aus wie zwei getrennte
   Rechnungen.
   ========================================================================= */

.rl-umrechnung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  margin-top: 18px;
}

.rlu-spalte {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 2px;
  padding: clamp(18px, 2.5vw, 26px) clamp(12px, 2vw, 20px);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

.rlu-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--warm-grey);
}

.rlu-wert {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--charcoal);
}
.rlu-wert.ist-ziel { color: var(--orange-dark); }

.rlu-sub {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.4;
  color: #5F4E42;
}

.rlu-pfeil {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--orange);
  margin-top: 10px;
}

.rlu-faktor {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--warm-grey);
  margin-bottom: 10px;
}

/* Das Ergebnis der Gegenüberstellung. Es ist die eigentliche Antwort
   des Abschnitts und darf deshalb größer sein als die beiden Spalten
   darüber. */
.rlu-ergebnis {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  margin-top: clamp(16px, 2.5vw, 26px);
  padding: clamp(20px, 3vw, 30px);
  background: var(--peach);
  border-radius: var(--r);
}

.rlue-label {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: #5F4E42;
}

.rlue-wert {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--orange-dark);
}

.rlue-sub {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--warm-grey);
}

/* Auf schmalen Geräten untereinander. Zwei Spalten mit je einem
   vierstelligen Betrag passen unter 400 px nicht nebeneinander, ohne
   dass die Zahl umbricht. */
@media (max-width: 560px) {
  .rl-umrechnung { grid-template-columns: minmax(0, 1fr); }
  .rlu-spalte { padding: 16px; }
}


/* =========================================================================
   DIE PRIVATE RENTENVERSICHERUNG IN DREI VARIANTEN

   Die Auswahl steht oben in der Karte und bestimmt, welche Felder
   darunter erscheinen. Drei Knöpfe mit ganzen Sätzen statt eines
   Auswahlfelds mit Fachbegriffen: Die Entscheidung ist inhaltlich, nicht
   technisch, und soll auch so aussehen.
   ========================================================================= */

.rlb-modus {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.rlbm-frage {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--charcoal);
}

.rlbm-knopf {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  min-height: 56px;
  background: var(--white);
  border: 1.5px solid rgba(90, 60, 35, 0.18);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rlbm-knopf:hover { border-color: rgba(255, 97, 0, 0.5); }
.rlbm-knopf.ist-aktiv {
  border-color: var(--orange);
  background: rgba(255, 97, 0, 0.06);
}

.rlbm-titel {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--charcoal);
}
.rlbm-satz {
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--warm-grey);
}

/* Restkapital: erst die Frage, das Feld nur bei Ja. Ein Eingabefeld, das
   man auf null lassen soll, wird sonst gedankenlos ausgefüllt. */
.rlb-rest { display: grid; gap: 8px; margin: 4px 0 14px; }
.rlb-restwahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.rlbr-knopf {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.35;
  min-height: 48px;
  padding: 8px 12px;
  background: var(--white);
  border: 1.5px solid rgba(90, 60, 35, 0.18);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--charcoal);
}
.rlbr-knopf.ist-aktiv { border-color: var(--orange); background: rgba(255, 97, 0, 0.06); }

.rlb-entnahme { align-items: end; }
.rlb-chips { display: flex; flex-wrap: wrap; gap: 6px; }


/* =========================================================================
   WORAUS SICH DAS EINKOMMEN ZUSAMMENSETZT

   Ein gestapelter Balken statt eines Rings. Beim Ring vergleicht man
   Winkel, beim Balken Längen, und Längen liest das Auge zuverlässiger.
   Die offene Lücke steht am Ende der Reihe, also dort, wo der Blick
   ankommt.
   ========================================================================= */

.rl-stapelkopf {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: #5F4E42;
  margin: 24px 0 12px;
}

.rl-stapel {
  display: flex;
  height: 34px;
  border-radius: 100px;
  overflow: clip;
  background: var(--cream);
}
.rls-teil { width: var(--anteil); display: block; }
.rls-teil.ist-gesetzlich { background: var(--orange); }
.rls-teil.ist-privat     { background: #A9744A; }
/* Die Lücke ist bewusst die ruhigste Fläche. Sie soll auffallen, weil
   sie fehlt, nicht weil sie schreit. */
.rls-teil.ist-luecke     { background: #E8DCD0; }

.rl-legende {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.rl-legende li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--charcoal);
}
.rll-punkt { width: 12px; height: 12px; border-radius: 50%; }
.rll-punkt.ist-gesetzlich { background: var(--orange); }
.rll-punkt.ist-privat     { background: #A9744A; }
.rll-punkt.ist-luecke     { background: #E8DCD0; box-shadow: inset 0 0 0 1px rgba(90,60,35,0.2); }
.rll-name em { font-style: normal; color: var(--warm-grey); font-size: 0.86em; }
.rll-wert { font-weight: 600; }


/* =========================================================================
   VERLAUF DES VERTRAGSGUTHABENS

   Als SVG von Hand gezeichnet. Die Seite lädt bisher keine einzige
   fremde Datei, und für eine Linie mit zwei Dutzend Punkten eine
   Diagrammbibliothek zu holen wäre in keinem Verhältnis.
   ========================================================================= */

.rl-verlauf {
  margin-top: 26px;
  padding: clamp(18px, 2.5vw, 26px);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

.rlv-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.rlv-name { font-family: var(--sans); font-size: 0.98rem; font-weight: 600; color: var(--charcoal); }
.rlv-meta { font-family: var(--sans); font-size: 0.86rem; color: var(--warm-grey); }

.rlv-svg { width: 100%; height: 160px; display: block; overflow: visible; }
.rlv-flaeche { fill: rgba(255, 97, 0, 0.12); }
.rlv-linie { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.rlv-achse {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--warm-grey);
  margin-top: 2px;
}

.rlv-werte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(90, 60, 35, 0.12);
}
.rlvw-label { display: block; font-family: var(--sans); font-size: 0.84rem; color: var(--warm-grey); }
.rlvw-wert {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 700;
  color: var(--orange-dark);
}


@media (max-width: 560px) {
  /* Zwei Knöpfe nebeneinander mit je einem ganzen Satz passen hier
     nicht mehr. */
  .rlb-restwahl { grid-template-columns: minmax(0, 1fr); }
  .rlv-werte { grid-template-columns: minmax(0, 1fr); }
  .rl-stapel { height: 28px; }
  /* Sehr kleine Anteile verschwinden sonst ganz. Ein Baustein, den man
     eingetragen hat, muss sichtbar bleiben. */
  .rls-teil { min-width: 3px; }
}


/* =========================================================================
   DIE AUSWERTUNG ALS PDF

   Zwei Hälften: links steht, was drin ist, rechts das Formular. Der
   Kasten sitzt hell auf dem Creme des Abschnitts, damit er als Angebot
   und nicht als Bezahlschranke wirkt. Das Ergebnis steht ja bereits
   vollständig darüber.
   ========================================================================= */

.rl-pdf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: clamp(48px, 7vw, 96px) 0 0;
  padding: clamp(28px, 4vw, 52px);
  background: var(--cream);
  border-radius: var(--r-gross, 24px);
}

.rlp-inhalt h2 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.2;
  margin: 8px 0 14px;
}
.rlp-inhalt p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: #5F4E42;
}

.rlp-liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.rlp-liste li {
  position: relative;
  padding-left: 26px;
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--charcoal);
}
.rlp-liste li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.rlp-kasten {
  background: var(--white);
  border-radius: var(--r);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-soft);
}

.rlp-form { display: grid; gap: 16px; }
.rlp-feld { display: grid; gap: 6px; }
.rlp-feld label {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--charcoal);
}
.rlp-feld input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--white);
  border: 1.5px solid rgba(90, 60, 35, 0.18);
  border-radius: var(--r-sm);
}
.rlp-feld input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* Die beiden Häkchen sehen gleich aus, obwohl das eine notwendig und
   das andere freiwillig ist. Ein optisch schwächeres zweites Häkchen
   wäre ein Fingerzeig, und die Entscheidung soll frei bleiben. */
.rlp-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.45;
  color: #5F4E42;
  cursor: pointer;
}
.rlp-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--orange); }
.rlp-check a { color: var(--orange-dark); }

.rlp-knopf { width: 100%; margin-top: 4px; }

.rlp-fein {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--warm-grey);
  margin: 0;
}

/* Nur die Felder markieren, die wirklich fehlen. Ein roter Rahmen um
   alles bestraft auch das, was schon richtig ausgefüllt war. */
.rlp-form.hat-fehler input:invalid { border-color: #C0392B; }

.rlp-danke { display: grid; gap: 12px; justify-items: start; }
.rlp-haken {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 1.3rem;
}
.rlp-danke h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0; }
.rlp-danke p { font-family: var(--sans); font-size: 0.95rem; line-height: 1.55; color: #5F4E42; margin: 0; }

@media (max-width: 860px) {
  .rl-pdf { grid-template-columns: minmax(0, 1fr); }
  /* Auf dem Handy zuerst lesen, was man bekommt, dann das Formular.
     Umgekehrt steht die Frage vor der Antwort. */
  .rlp-inhalt { order: 1; }
  .rlp-kasten { order: 2; }
}

/* -------------------------------------------------------------------------
   AUF DEM HANDY DEN KASTEN NICHT ZWEIMAL EINRÜCKEN

   Drei Innenabstände lagen ineinander: der Container mit 20, der
   Abschnitt mit 28 und die Karte noch einmal mit 22. Auf 375 px blieben
   von der Bildschirmbreite 235 Punkte für das Eingabefeld übrig, und der
   Knopf brach auf drei Zeilen um.

   Auf dem Desktop ist die Staffelung richtig, sie trennt die beiden
   Hälften voneinander. Auf einer Spalte trennt sie nichts mehr und
   kostet nur Platz. Der Abschnitt gibt seinen Rand deshalb ab und lässt
   ihn die Karte übernehmen.
   ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .rl-pdf {
    padding: 26px 14px;
    border-radius: var(--r);
  }
  .rlp-kasten { padding: 20px 16px; }

  /* Der Knopf trägt einen langen Satz. Etwas kleiner gesetzt passt er
     in zwei Zeilen statt in drei. */
  .rlp-knopf {
    font-size: 0.98rem;
    line-height: 1.3;
    padding-inline: 14px;
  }

  .rlp-fein { font-size: 0.8rem; }
  .rlp-check { font-size: 0.88rem; }
}