/* Rechner „Interim CPO oder warten?“ (/interim-cpo/rechner/) */
.calc{display:grid;gap:24px;grid-template-columns:1.1fr 1fr;margin:32px 0 8px;align-items:start}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.calc-fields{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;display:grid;gap:22px;margin:0}
.calc-field{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.calc-field label{font-weight:600}
.calc-field output{font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-field input[type=range]{grid-column:1/-1;width:100%;margin:4px 0 0;accent-color:var(--primary);cursor:pointer}
.calc-result{background:var(--text);color:#fff;border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:14px}
.calc-result .calc-label{text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;font-weight:700;color:#93c5fd;margin:0}
.calc-result h3{margin:0;font-size:1.15rem;line-height:1.35}
.calc-costs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.calc-costs div{background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px}
.calc-costs dt{font-size:.85rem;color:#cbd5e1}
.calc-costs dd{margin:4px 0 0;font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.calc-diff{margin:0;font-size:1.1rem;font-variant-numeric:tabular-nums}
.calc-note{margin:0;font-size:.85rem;color:#cbd5e1}
@media (max-width:420px){.calc-costs{grid-template-columns:1fr}}