@font-face{font-family:"Cormorant Garamond";font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(../fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-400-normal.woff2) format("woff2")}
[hidden]{display:none!important}
html{background:#0b1614}
body{min-height:100vh;background-repeat:no-repeat}
img{max-width:100%}
.merk a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}
.merk a img{width:32px}
.merk .terugsite{font-family:var(--lopend);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:0;padding:0}
.lokaas{position:absolute;top:-9999px;left:-9999px}
.voet{border-top:1px solid var(--lijn);padding-top:20px;font-size:12px;line-height:1.6;color:var(--zacht)}
.voet a{color:var(--muted)}
.mail form{display:flex;flex-direction:column;gap:12px}
/* Eén smalle kolom zoals de site op een telefoon: invullen boven, resultaat eronder. Bewust één donkere huisstijl. */
:root{
  color-scheme:dark;
  --bg:#0b1614; --gloed:rgba(28,72,63,.55); --vlak:#0f1d1a;
  --cream:#efe8dc; --tekst:#d9d2c5; --muted:#a9b3ae; --zacht:#8f9a95;
  --goud:#c9a45c; --goud-vlak:rgba(201,164,92,.08); --goud-rand:rgba(201,164,92,.38);
  --lijn:rgba(239,232,220,.15); --neutraal:rgba(239,232,220,.22);
  --k1:#b8893a; --k2:#2a9d8f; --k3:#6f8fe6; --k4:#d9627f; --inkt:#16110a; --waarschuwing:#e0b070;
  --kop:"Cormorant Garamond",Georgia,serif; --lopend:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse 120% 420px at 50% 120px,var(--gloed),transparent 70%),var(--bg);background-color:var(--bg);color:var(--cream);font-family:var(--lopend);font-weight:300;font-size:16px;line-height:1.6;padding-inline:20px;padding-block:0 56px}
.wrap{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.merk{font-family:var(--kop);font-size:26px;padding-block:20px 16px;border-bottom:1px solid var(--lijn);display:flex;justify-content:space-between;align-items:baseline}
.merk span{font-family:var(--lopend);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--goud);border:1px solid var(--goud-rand);border-radius:999px;padding:4px 10px}
.eye{font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--goud);margin:0}
h1{font-family:var(--kop);font-weight:400;font-size:44px;line-height:1.05;margin:10px 0 0;text-wrap:balance}
h1 em{color:var(--goud)}
h2{font-family:var(--kop);font-weight:400;font-size:28px;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
.intro{color:var(--tekst);font-size:15px;margin-top:12px}
form{display:flex;flex-direction:column;gap:24px}
fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
legend,.lab{padding:0;font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:block}
.lab{margin-bottom:0}
.pillen{display:flex;flex-wrap:wrap;gap:8px}
.pil{font:inherit;font-size:13.5px;color:var(--muted);background:none;border:1px solid var(--lijn);border-radius:999px;padding:8px 15px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.pil:hover{color:var(--cream)}
.pil[aria-pressed="true"]{color:var(--cream);border-color:var(--goud);background:var(--goud-vlak)}
.pil:focus-visible,input:focus-visible,.knop:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.keuzes{display:flex;flex-direction:column;gap:8px}
.keuze{font:inherit;text-align:left;color:var(--muted);background:none;border:1px solid var(--lijn);border-radius:16px;padding:11px 14px;cursor:pointer;display:flex;align-items:center;gap:13px;transition:color .2s,border-color .2s,background .2s}
.keuze>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.keuze b{font-weight:400;font-size:14.5px;color:var(--tekst)}
.keuze small{font-size:12.5px;line-height:1.45;color:var(--zacht)}
.keuze[aria-pressed="true"]{border-color:var(--goud);background:var(--goud-vlak)}
.keuze[aria-pressed="true"] b{color:var(--cream)}
.keuze[aria-pressed="true"] small{color:var(--tekst)}
.keuze:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rij>div{min-width:0;display:flex;flex-direction:column;gap:10px}
.inp{display:flex;align-items:baseline;gap:8px;border:1px solid var(--lijn);border-radius:14px;padding:10px 14px;background:var(--vlak)}
.inp input{flex:1;min-width:0;width:100%;font:inherit;font-size:17px;color:var(--cream);background:none;border:0;padding:0;-moz-appearance:textfield}
.inp input::-webkit-outer-spin-button,.inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp small{font-size:12px;color:var(--muted);white-space:nowrap}
.hulp{font-size:12.5px;line-height:1.5;color:var(--zacht)}
.resultaat{display:flex;flex-direction:column;gap:22px}
.groot{text-align:center;padding-block:6px 4px}
.getal{font-family:var(--kop);color:var(--goud);line-height:1;font-variant-numeric:lining-nums}
.groot .voor{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--muted)}
.groot .getal{font-size:clamp(72px,24vw,100px);margin-top:6px}
.groot .getal small{font-size:.34em}
.groot p{font-size:14.5px;color:var(--tekst);margin-top:8px}
.twee{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.twee>div{text-align:center;padding:16px 8px}
.twee>div+div{border-left:1px solid var(--lijn)}
.twee .getal{font-size:40px}
.twee p{font-size:12.5px;color:var(--muted);margin-top:4px}
.macro{border:1px solid var(--lijn);border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);padding-block:14px}
.macro>div{text-align:center;min-width:0;padding-inline:4px}
.macro>div+div{border-left:1px solid var(--lijn)}
.macro b{font-weight:400;font-size:24px;font-variant-numeric:tabular-nums}
.macro b small{font-size:13px}
.macro p{font-size:11.5px;color:var(--muted)}
.uitleg{display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--tekst)}
.uitleg b{font-weight:400;color:var(--cream)}
.let{border-left:2px solid var(--waarschuwing);padding-left:14px;color:var(--tekst);font-size:14px}
.mail{background:var(--goud-vlak);border:1px solid var(--goud-rand);border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;gap:12px}
.mail p{font-size:13.5px;color:var(--tekst)}
.knop{font:inherit;font-weight:400;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--inkt);background:var(--goud);border:0;border-radius:999px;padding:15px;cursor:pointer}
.blok{display:flex;flex-direction:column;gap:26px}
.figuren{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.figuur{font:inherit;background:none;border:1px solid transparent;border-radius:14px;padding:8px 2px 7px;cursor:pointer;color:var(--zacht);display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;transition:color .2s,border-color .2s,background .2s}
.figuur svg{width:100%;max-width:58px;height:auto;display:block}
.figuur .lijf{fill:currentColor}
.figuur .heel{opacity:.5;transition:opacity .2s}
.figuur .arm{stroke:currentColor;fill:none;stroke-linecap:round}
.figuur .detail{stroke:var(--bg);fill:none;stroke-width:1.1;stroke-linecap:round}
.figuur span{font-size:11px;line-height:1.25;font-weight:400;text-align:center;white-space:nowrap}
.figuur:hover{color:var(--tekst)}
.figuur[aria-pressed="true"]{color:var(--goud);border-color:var(--goud-rand);background:var(--goud-vlak)}
.figuur[aria-pressed="true"] .heel{opacity:1}
.figuur:focus-visible,.terug:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.vetregel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.vetregel label{font-size:13px;color:var(--muted)}
.vetregel .inp{width:104px;flex:none;padding:8px 12px}
.groot-knop{font-size:13px;padding:18px;margin-top:4px}
.terug{font:inherit;font-size:13px;color:var(--goud);background:none;border:0;padding:0;cursor:pointer;align-self:flex-start}
.resultaat:focus{outline:none}
.ic{width:30px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.ic rect{fill:none}
.ic .aan{stroke-width:2.6}
.ic .aan~path{opacity:.3}
.keuze[aria-pressed="true"] .ic,.tegel[aria-pressed="true"] .ic{color:var(--goud);opacity:1}
.stap{font-family:var(--lopend);font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);display:flex;align-items:center;gap:12px;margin-top:8px}
.stap span{font-family:var(--kop);font-size:19px;letter-spacing:0;color:var(--goud);width:30px;height:30px;border:1px solid var(--goud-rand);border-radius:50%;display:grid;place-items:center;flex:none;font-variant-numeric:lining-nums}
.stap::after{content:"";flex:1;height:1px;background:var(--lijn)}
.veld{display:flex;flex-direction:column;gap:10px}
.schuifrij{display:flex;align-items:center;gap:16px}
.schuifrij .inp{width:118px;flex:none}
.schuif{flex:1;min-width:0;accent-color:var(--goud);height:28px}
.rondjes{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.rondje{font:inherit;font-size:15px;aspect-ratio:1;max-width:100%;color:var(--muted);background:none;border:1px solid var(--lijn);border-radius:50%;cursor:pointer;padding:0;font-variant-numeric:tabular-nums;transition:color .2s,border-color .2s,background .2s}
.rondje[aria-pressed="true"]{color:var(--inkt);background:var(--goud);border-color:var(--goud)}
.teller{display:flex;align-items:stretch;gap:8px}
.teller .inp{flex:1;min-width:0}
.teller button{font:inherit;font-size:20px;width:48px;flex:none;color:var(--goud);background:none;border:1px solid var(--lijn);border-radius:14px;cursor:pointer}
.tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tegel{font:inherit;font-size:13px;line-height:1.3;color:var(--muted);background:none;border:1px solid var(--lijn);border-radius:16px;padding:14px 6px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0;transition:color .2s,border-color .2s,background .2s}
.tegel[aria-pressed="true"]{color:var(--cream);border-color:var(--goud);background:var(--goud-vlak)}
.rondje:focus-visible,.tegel:focus-visible,.teller button:focus-visible,.schuif:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.balans{display:flex;flex-direction:column;gap:9px}
.balans .rij2{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.balans .spoor{height:14px;display:flex;gap:2px}
.balans .spoor i{display:block;height:100%;border-radius:4px}
.balans .eet{background:var(--goud)}
.balans .rest{background:var(--neutraal)}
.balans .gat{border:1px dashed var(--goud-rand);background:none}
.balans b{font-weight:400;color:var(--cream);font-variant-numeric:tabular-nums}
.balans .verschil{font-size:13.5px;color:var(--tekst);text-align:center;margin-top:2px}
.vooruit{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vooruit div{border:1px solid var(--lijn);border-radius:14px;padding:12px 6px;text-align:center}
.vooruit b{display:block;font-family:var(--kop);font-weight:400;font-size:26px;line-height:1.1;color:var(--goud);font-variant-numeric:lining-nums}
.vooruit span{font-size:11.5px;color:var(--muted)}
.deel{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--lijn);padding-top:22px}
.deel h2{font-size:25px}
.stapel{display:flex;gap:2px;height:16px}
.stapel i{display:block;height:100%;min-width:3px;border-radius:4px}
.k1{background:var(--k1)}.k2{background:var(--k2)}.k3{background:var(--k3)}.k4{background:var(--k4)}
.stip{display:inline-block;width:9px;height:9px;border-radius:50%}
.macro .stip{display:block;margin:0 auto 7px}
.macro .pct{font-size:11px;color:var(--zacht)}
.legenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.legenda li{display:grid;grid-template-columns:9px 1fr auto;align-items:baseline;gap:10px;font-size:13.5px;color:var(--tekst)}
.legenda li>span small{display:block;font-size:12px;color:var(--zacht);line-height:1.4}
.legenda b{font-weight:400;color:var(--cream);font-variant-numeric:tabular-nums}
.noot{font-size:12px;line-height:1.55;color:var(--zacht)}
.melding{font-size:13px;color:var(--cream)}