/* ============================================================
   RUHESTANDS-CASHFLOW-CHECK — seitenspezifische Ergänzungen
   ------------------------------------------------------------
   Ergänzt /assets/subpages.css. Definiert bewusst KEINE Farb-Tokens
   (Konvention aus theme.css) — Ausnahme: die drei semantischen
   Ampelfarben, die es im Markensystem noch nicht gibt. Sie sind
   hell/dunkel getrennt gesetzt und werden nur als Punkt und Label
   verwendet, nie als Fläche.
   ============================================================ */

:root{
  --ok:   #4a7c59;
  --warn: var(--gold);
  --bad:  #a8453c;
}
:root[data-theme="dark"]{
  --ok:  #7fb08c;
  --bad: #d99189;
}

/* ============================================================
   Lesbarkeit
   ------------------------------------------------------------
   Laut YouTube-Analytics 2026 sind 41,8 % des Publikums 55 Jahre
   oder älter, 71 % sind 45+. Die Fließtextgrößen des Markensystems
   (14,5 px) sind dafür zu klein — auf dieser Seite deshalb bewusst
   angehoben. Farben, Schriften und Abstände bleiben unverändert.
   ============================================================ */
.card > p,
.faq .faq-body p,
.faq .faq-body ul{ font-size:15.5px; }
.faq summary{ font-size:16.5px; }

/* Auf dieser Seite gibt es kein Scroll-Skript — Header dauerhaft abgesetzt. */
header{
  background:var(--header-bg);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}

/* ---------- Gate: Telefonzeile ----------
   subpages.css legt .frm .row zweispaltig an. Die Telefonnummer steht
   allein in ihrer Zeile und bekommt deshalb die volle Breite, statt
   neben einer leeren Zelle zu hängen. */
.frm .row--voll{ grid-template-columns:1fr; }

.feld-hilfe{
  margin:8px 0 0;
  font-size:12.5px; line-height:1.6;
  color:var(--text-3);
}

/* ---------- Ergebnisliste auf der Landingpage ---------- */
.ergebnisliste{
  list-style:none; margin:56px 0 0; padding:0;
  border-top:1px solid var(--line-soft);
  counter-reset:erg;
}
.ergebnisliste li{
  counter-increment:erg;
  display:grid; grid-template-columns:56px 1fr; gap:0 26px;
  padding:28px 4px; border-bottom:1px solid var(--line-soft);
}
.ergebnisliste li::before{
  content:counter(erg,decimal-leading-zero);
  grid-column:1; grid-row:1;
  font-family:var(--font-secondary); font-size:12.5px; letter-spacing:.14em;
  color:var(--gold); padding-top:5px;
}
/* Titel und Text gehören beide in die zweite Spalte — sonst rutscht der
   Absatz in die schmale Ziffernspalte. */
.ergebnisliste li > *{ grid-column:2; }
.ergebnisliste h3{
  font-family:var(--font-primary); font-weight:500; font-size:18px;
  color:var(--text-strong); margin:0 0 8px; letter-spacing:-.005em;
}
.ergebnisliste p{ font-size:15.5px; color:var(--text-2); line-height:1.75; margin:0; max-width:680px; }

/* ============================================================
   CHECK
   ============================================================ */
.check-shell{ padding:150px 0 clamp(70px,10vh,120px); min-height:100vh; }

/* ---------- Fortschritt ---------- */
.fortschritt{ max-width:760px; margin:0 auto 46px; }
.fortschritt-bar{
  height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden;
}
.fortschritt-bar span{
  display:block; height:100%; width:0%; background:var(--gold);
  transition:width .5s var(--ease);
}
.fortschritt-txt{
  margin-top:12px; font-family:var(--font-secondary); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-3);
}

/* ---------- Schritt ---------- */
#check-form{ max-width:760px; margin:0 auto; }
.schritt{ animation:auf .45s var(--ease) both; }
@keyframes auf{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.schritt > h2{
  font-family:var(--font-primary); font-weight:300;
  font-size:clamp(26px,3.4vw,40px); line-height:1.18; letter-spacing:-.01em;
  color:var(--text-strong); margin:18px 0 0;
}
.schritt > h2 b{ font-weight:600; }
.schritt > p.hinweis{
  font-size:15.5px; color:var(--text-2); line-height:1.75;
  margin:16px 0 0; max-width:640px;
}

/* .frage ist je nach Fragetyp <fieldset> oder <div> — Browser-Defaults des
   fieldset (Rahmen, Innenabstand, min-width) müssen zurückgesetzt werden. */
.frage{
  margin:40px 0 0; padding:34px 0 0; border:0; min-width:0;
  border-top:1px solid var(--line-soft);
}
.frage:first-of-type{ border-top:0; padding-top:0; }
.frage > .f-label{
  display:block; float:left; width:100%; padding:0;
  font-family:var(--font-primary); font-weight:500;
  font-size:17px; color:var(--text-strong); line-height:1.5; margin:0 0 6px;
}
/* float löst das legend-Layoutverhalten auf; danach den Fluss wiederherstellen */
.frage > .f-label + *{ clear:both; }
.frage > .f-hilfe{
  font-size:15px; color:var(--text-3); line-height:1.7; margin:0 0 18px; max-width:620px;
}
.frage > .f-label + .f-optionen, .frage > .f-label + .euro{ margin-top:18px; }

/* ---------- Optionen: größere Klickflächen als im Standardsystem.
     Begründung: primäre Interaktion, Zielgruppe 50+. ---------- */
.f-optionen{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.f-optionen.eng{ grid-template-columns:1fr; }
.f-optionen .chipbox label{
  font-size:16.5px; padding:17px 19px; line-height:1.4; min-height:62px;
}
.f-optionen .chipbox label::before{ width:17px; height:17px; }

/* ---------- Betragsfeld ---------- */
.euro{ position:relative; max-width:340px; }
.euro input{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:3px;
  color:var(--text-strong); font-family:var(--font-primary); font-weight:500;
  font-size:26px; letter-spacing:-.01em; padding:16px 88px 16px 18px;
  transition:border-color .3s var(--ease);
}
.euro input:focus{ outline:none; border-color:var(--gold-line); }
.euro input::placeholder{ color:var(--text-3); font-weight:400; }
.euro input::-webkit-outer-spin-button,
.euro input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.euro .einheit{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family:var(--font-secondary); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); pointer-events:none;
}

/* ---------- Navigation ---------- */
.check-nav{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  margin-top:48px; padding-top:28px; border-top:1px solid var(--line-soft);
}
.check-nav .btn{ border:1px solid var(--line); }
.check-nav .js-zurueck[hidden]{ display:none; }
.check-nav .js-weiter{ min-width:200px; justify-content:center; }

.feldfehler{
  margin:22px 0 0; font-size:14.5px; color:var(--bad);
  border-left:2px solid var(--bad); padding-left:14px; line-height:1.6;
}
.feldfehler[hidden]{ display:none; }

.check-fuss{
  max-width:760px; margin:36px auto 0; text-align:center;
  font-family:var(--font-secondary); font-size:11.5px; color:var(--text-3);
  line-height:1.8; letter-spacing:.02em;
}

/* ============================================================
   GATE
   ============================================================ */
.gate-head{ max-width:760px; margin:0 auto 48px; text-align:center; }
.gate-head .kicker{ justify-content:center; margin-bottom:18px; }
.gate-head .kicker::before{ display:none; }
.gate-head h2{
  font-family:var(--font-primary); font-weight:300;
  font-size:clamp(28px,3.6vw,44px); line-height:1.18; letter-spacing:-.01em;
  color:var(--text-strong); margin:0;
}
.gate-head h2 b{ font-weight:600; }
.gate-head p.sub{ font-size:16px; color:var(--text-2); line-height:1.8; margin:18px auto 0; max-width:600px; }

.gate-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:44px;
  align-items:start; max-width:1100px; margin:0 auto;
}

/* ---------- Unscharfe Vorschau ---------- */
.teaser{
  border:1px solid var(--line); border-radius:8px; padding:12px 26px 22px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
}
.teaser-zeile{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line-soft);
}
.teaser-zeile:last-of-type{ border-bottom:0; }
.tz-label{
  font-family:var(--font-secondary); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3);
}
.tz-wert{
  font-family:var(--font-primary); font-weight:500; font-size:22px;
  color:var(--text-strong); white-space:nowrap;
}
.teaser-zeile.scharf .tz-wert{ color:var(--gold); font-size:17px; }
.teaser-zeile.blur .tz-wert{
  filter:blur(7px); opacity:.55; user-select:none;
}
.teaser-hinweis{
  margin:20px 0 0; font-family:var(--font-secondary); font-size:11px;
  color:var(--text-3); line-height:1.7; letter-spacing:.02em;
}

/* ---------- Meldung unter dem Formular ----------
   subpages.css färbt bei .is-error nur den Kreis, und das in einem
   festen Rosé, das auf hellem Grund kaum trägt. Überschrift und Zeichen
   müssen den Fehler mittragen — sonst wirkt der Kasten trotz rotem Ring
   wie eine Bestätigung. --bad ist hell/dunkel getrennt gesetzt. */
.form-msg.is-error .ic{ color:var(--bad); }
.form-msg.is-error h3{ color:var(--bad); }

/* ---------- Danke ---------- */
.danke-wrap{ max-width:900px; text-align:center; }
.danke-wrap .kicker{ justify-content:center; margin-bottom:18px; }
.danke-wrap .kicker::before{ display:none; }
.danke-wrap h2{
  font-family:var(--font-primary); font-weight:300;
  font-size:clamp(28px,3.6vw,44px); line-height:1.18;
  color:var(--text-strong); margin:0;
}
.danke-wrap h2 b{ font-weight:600; }
.danke-wrap p.sub{ font-size:16px; color:var(--text-2); line-height:1.8; margin:18px auto 0; max-width:620px; }
.danke-grid{ margin-top:56px; text-align:left; }

/* ---------- Footer-Disclaimer ---------- */
.disclaimer{
  margin:56px 0 0; padding:22px 0 0; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--text-3); line-height:1.8; max-width:900px;
}

/* ============================================================
   Ampeln (Ergebnisdarstellung, auch in der E-Mail-Vorlage genutzt)
   ============================================================ */
.ampel{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-secondary); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
}
.ampel::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; }
.ampel.gut::before{ background:var(--ok); }
.ampel.gut{ color:var(--ok); }
.ampel.mittel::before{ background:var(--warn); }
.ampel.mittel{ color:var(--warn); }
.ampel.kritisch::before{ background:var(--bad); }
.ampel.kritisch{ color:var(--bad); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .gate-grid{ grid-template-columns:1fr; gap:32px; }
  .danke-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .check-shell{ padding-top:120px; }
  .f-optionen{ grid-template-columns:1fr; }
  .ergebnisliste li{ grid-template-columns:1fr; gap:10px; }
  .ergebnisliste li::before{ padding-top:0; }
  .check-nav{ flex-direction:column-reverse; align-items:stretch; }
  .check-nav .btn{ justify-content:center; }
  .euro{ max-width:none; }
  .euro input{ font-size:23px; }
  .form-card{ padding:32px 24px 26px; }
  .frm .row{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .schritt{ animation:none; }
  .fortschritt-bar span{ transition:none; }
}