/* ============================================================
   Franz Chieu — Pflege-Rechner (rechner.html)
   Portiert aus Design-System v3, Farben auf v4-Tokens umgestellt.
   Wird NACH styles.css eingebunden.
   ============================================================ */

/* Legacy-Aliase: das Rechner-Markup (v3) referenziert diese Tokens inline */
:root{
  --blue-deep:var(--gold-deep);
  --ink-soft:var(--charcoal-700);
  --calc-red:#D9534A;
  --calc-green:#1FA05C;
}

/* ---- Hero-Ergänzungen (dunkler article-hero) ---- */
.article-hero .eyebrow{ color:var(--cream-200); border-color:rgba(255,255,255,0.18); margin-bottom:16px; }
.article-hero h1 .gold{ color:var(--gold); }
.article-hero .ah-intro{ margin-top:20px; font-size:16px; line-height:1.7; color:rgba(255,255,255,0.7); max-width:640px; }

/* ---- Seiten-Sektionen ---- */
.calc-sec{ padding:26px 28px; }
.calc-sec-tabs{ padding-top:34px; padding-bottom:0; }
.calc-wrap{ max-width:960px; margin:0 auto; }

/* ---- Tabs ---- */
.calc-tabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.calc-tab{
  padding:12px 22px; border-radius:999px; border:1px solid var(--stone-300);
  background:var(--white); color:var(--charcoal-700);
  font-family:var(--font-body); font-size:13.5px; font-weight:500; letter-spacing:0.01em;
  transition:all .25s var(--ease); cursor:pointer;
}
.calc-tab.on{ background:var(--gold); border-color:var(--gold); color:var(--white); font-weight:600; }
.calc-tab:hover:not(.on){ border-color:var(--gold); color:var(--gold-deep); }

/* ---- Panel ---- */
.calc-panel{
  background:var(--white); border:1px solid var(--stone-200); border-radius:26px;
  padding:clamp(26px,4vw,46px);
  box-shadow:0 24px 60px rgba(28,25,23,0.07);
}
.calc-panel .h-display{
  font-family:var(--font-display); font-weight:500;
  color:var(--charcoal-900); line-height:1.15; letter-spacing:-0.01em;
}
.calc-panel .acc{ color:var(--gold); }

/* ---- Eingabefelder ---- */
.calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,48px); }
.calc-fields{ display:flex; flex-direction:column; gap:22px; }
.calc-panel .field label{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:13.5px; font-weight:500; color:var(--charcoal-700); margin-bottom:9px;
}
.calc-panel .field label output{ color:var(--gold-deep); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-panel .field select,
.calc-panel .field input[type=number]{
  width:100%; padding:13px 15px; border-radius:12px;
  border:1px solid var(--stone-200); background:var(--cream-50); color:var(--charcoal-900);
  font-family:var(--font-body); font-size:14px; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.calc-panel .field select:focus,
.calc-panel .field input[type=number]:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(18,150,190,0.16); }
.calc-panel .field input[type=range],
.calc-panel .field input[type=range]:focus{
  width:100%; height:32px; padding:0; border:none; background:transparent; box-shadow:none;
  accent-color:var(--gold);
}

/* ---- Ergebnis-Kacheln ---- */
.calc-results{ display:flex; flex-direction:column; gap:14px; }
.res-tile{ background:var(--cream-100); border:1px solid var(--stone-200); border-radius:16px; padding:20px 22px; }
.res-tile .lbl{ font-size:12px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--stone-600); margin-bottom:4px; }
.res-tile .val{
  font-family:var(--font-display); font-weight:400; letter-spacing:-0.02em;
  font-size:clamp(28px,3.4vw,38px); line-height:1.1; color:var(--charcoal-900);
  font-variant-numeric:tabular-nums;
}
.res-tile .val.gold{ color:var(--gold-deep); font-style:normal; }
.res-tile .val.red{ color:var(--calc-red); }
.res-tile .val.green{ color:var(--calc-green); }
.res-tile .sub{ font-size:12.5px; color:var(--stone-600); margin-top:4px; line-height:1.55; }

/* ---- Balken (Rente vs. Lücke) ---- */
.res-bar{ height:14px; border-radius:99px; background:var(--white); border:1px solid var(--stone-200); overflow:hidden; display:flex; }
.res-bar .fill{ background:linear-gradient(90deg,var(--acc-blue),var(--acc-teal)); transition:width .4s; }
.res-bar .gap{ background:repeating-linear-gradient(45deg,rgba(217,83,74,.5) 0 6px,rgba(217,83,74,.28) 6px 12px); transition:width .4s; }
.bar-legend{ display:flex; gap:18px; font-size:12px; color:var(--stone-600); margin-top:8px; flex-wrap:wrap; }
.bar-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }

/* ---- CTA & Fußnote im Panel ---- */
.calc-cta{
  margin-top:30px; padding-top:26px; border-top:1px solid var(--stone-200);
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.calc-cta p{ font-size:15px; line-height:1.6; max-width:460px; color:var(--charcoal-700); }
.calc-cta p b{ color:var(--gold-deep); }
.calc-note{ font-size:12px; color:var(--stone-500); margin-top:22px; line-height:1.6; }

/* ---- Responsive ---- */
@media (max-width:900px){
  .calc-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .calc-sec{ padding:18px 16px; }
  .calc-sec-tabs{ padding-top:26px; padding-bottom:0; }
  .calc-panel{ border-radius:20px; }
  .calc-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .calc-cta p{ max-width:100%; }
  .calc-cta .btn-gold{ justify-content:center; }
}

/* Franz-Freisteller im Rechner-Hero (Cutout statt Foto-Karte) */
.article-hero .ah-visual img.rh-cut{
  border-radius:0; box-shadow:none;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,0.4));
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  max-width:360px;
}
@media (max-width:900px){
  .article-hero .ah-visual img.rh-cut{ margin:8px auto 0; max-width:280px; display:block; }
}
/* Ausrichtung: Freisteller an die Hero-Unterkante, Text vertikal mittig */
.article-hero .ah-grid{ align-items:center; }
@media (min-width:901px){
  .article-hero .ah-visual{ align-self:end; }
  .article-hero .ah-visual img.rh-cut{ margin:0 auto -60px; display:block; }
}
/* Rechner-Hero: auf Desktop zweispaltig (Text links, Franz rechts) */
@media (min-width:901px){
  .article-hero.legal .ah-grid{ grid-template-columns:1.18fr 0.82fr; gap:52px; }
}