.calc-blad{max-width:76rem;margin:auto;padding:3rem 1.5rem 5rem}
.calc-kop{max-width:44rem;margin-bottom:2.5rem}
.calc-kop h1{max-width:none}
.calc-kop p{font-size:1.2rem;line-height:1.55;margin:0}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:0;background:var(--papier);border-top:6px solid var(--grafiet)}
.tabs{grid-column:1 / -1;display:flex;border-bottom:1px solid var(--voeg);font:600 1rem/1 var(--grotesk);overflow-x:auto}
.tabs button{background:none;border:0;padding:1.1rem 1.4rem;cursor:pointer;color:var(--steen);font:inherit;border-bottom:4px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--grafiet);border-bottom-color:var(--duimstok)}
.invoer{padding:1.6rem 1.6rem 2rem}
.invoer[hidden]{display:none}
.veld{margin-bottom:1.3rem;font-family:var(--grotesk)}
.veld label,.veld legend{display:block;font-weight:600;font-size:.95rem;margin-bottom:.4rem;padding:0}
.veld .hulp{display:block;font-size:.85rem;color:var(--steen);margin-top:.35rem}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.drie{grid-template-columns:1fr 1fr 1fr}
input[type=number],select{width:100%;font:500 1.1rem/1 var(--grotesk);padding:.7rem .75rem;border:1px solid #9aa09b;background:#fff;color:var(--grafiet);border-radius:2px;font-variant-numeric:tabular-nums}
input[type=number]:focus,select:focus{outline:3px solid var(--duimstok);outline-offset:0;border-color:var(--grafiet)}
.eenheid{position:relative}.eenheid input{padding-right:2.6rem}.eenheid span{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--steen);font:500 .95rem var(--grotesk);pointer-events:none}
fieldset.veld{border:0;margin:0 0 1.3rem;padding:0}
.knoppen{display:flex;flex-wrap:wrap}
.knoppen input{position:absolute;opacity:0}
.knoppen label{font:500 .95rem/1 var(--grotesk);padding:.65rem .95rem;border:1px solid var(--grafiet);margin:0 -1px 0 0;cursor:pointer;background:#fff}
.knoppen input:checked+label{background:var(--grafiet);color:#fff}
.knoppen input:focus-visible+label{outline:3px solid var(--duimstok);outline-offset:2px}
.uitkomst{background:var(--grafiet);color:#fff;padding:1.6rem;font-family:var(--grotesk)}
.uitkomst h2{font:600 1rem/1.3 var(--grotesk);margin:0 0 1rem;color:#d9dcd8}
.getal{font:800 3rem/1 var(--grotesk);font-stretch:78%;font-variant-numeric:tabular-nums;margin:0 0 .3rem;letter-spacing:-.01em}
.getal small{font-size:1.4rem;font-weight:600;font-stretch:90%}
.getal-uitleg{margin:0 0 1.4rem;color:#d9dcd8;font-size:.95rem}
.uitkomst dl{margin:0;border-top:1px solid #3d4346}
.uitkomst dl div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid #3d4346}
.uitkomst dt{color:#d9dcd8}
.uitkomst dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.uitkomst .advies{margin:1.2rem 0 0;padding:.8rem 1rem;background:#2b3033;border-left:4px solid var(--duimstok);font-size:.92rem;line-height:1.5;color:#eef0ec}
.methode{max-width:42rem;margin-top:3.5rem}
.methode h2{font:700 1.75rem/1.2 var(--grotesk);font-stretch:85%;margin:0 0 .9rem}
.methode h3{font:600 1.15rem/1.3 var(--grotesk);margin:2rem 0 .5rem}
.methode p{margin:0 0 1rem}
.formule{font:500 .98rem/1.6 var(--grotesk);background:var(--papier);border-left:6px solid var(--duimstok);padding:.8rem 1rem;margin:0 0 1rem}
.methode table{width:100%;border-collapse:collapse;font:400 .95rem/1.4 var(--grotesk);font-variant-numeric:tabular-nums;margin:0 0 1rem}
.methode th,.methode td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--voeg)}
.methode thead th{border-bottom:2px solid var(--grafiet);font-weight:600;color:var(--steen);font-size:.85rem}
.methode sup a{text-decoration:none;font:600 .72rem var(--grotesk);padding:0 .15em;background:var(--duimstok-licht)}
.methode sup{line-height:0}
@media (max-width:900px){
  .calc-blad{padding:1.6rem 1rem 3.5rem}
  .calc{grid-template-columns:1fr;margin:0 -1rem}
  .invoer{padding:1.2rem 1rem}
  .uitkomst{padding:.7rem 1rem .8rem;position:sticky;bottom:0;box-shadow:0 -6px 16px rgba(30,34,36,.18)}
  .uitkomst h2{display:none}
  .getal-uitleg{margin:0;font-size:.85rem}
  .uitkomst dl,.uitkomst .advies{display:none}
  .uitkomst.open dl,.uitkomst.open .advies{display:block}
  .getal{font-size:2rem;margin:0}
  .meer{display:inline-block}
  .drie{grid-template-columns:1fr 1fr}
}
.meer{display:none;margin-top:.6rem;background:none;border:1px solid #6c7275;color:#fff;font:500 .9rem var(--grotesk);padding:.45rem .8rem;cursor:pointer}
@media (max-width:900px){.meer{display:inline-block}}
.bronnen{margin-top:3.5rem;border-top:2px solid var(--grafiet);padding-top:1.2rem;font:400 .92rem/1.6 var(--grotesk)}
.bronnen h2{font:700 1.15rem/1.3 var(--grotesk);margin:0 0 .8rem}
.bronnen ol{margin:0;padding-left:1.4rem}
.bronnen li{margin-bottom:.5rem}