/* belastingrekenaar.be — concept A « Centiemen » (lie-de-vin, cuivre, Syne + Figtree).
   Les @font-face sont dans gabarits/base.html (adresses avec empreinte). */
@font-face{font-family:'Syne repli';src:local('Arial Black'),local('Arial Bold'),local('Arial-BoldMT');font-weight:800;size-adjust:125%}
@font-face{font-family:'Syne repli';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:115%}
@font-face{font-family:'Figtree repli';src:local('Arial'),local('ArialMT');size-adjust:100.4%;ascent-override:94.6%;descent-override:24.9%;line-gap-override:0%}
:root{--bg:#1c0910;--bg2:#2a1119;--bg3:#351620;--ink:#f7e7e3;--zacht:#d6b7bb;--zacht2:#c7a3a9;--koper:#e9a06a;--ring:#f3c7ad;
  --dof:#8d5862;--veld:#a06b76;--rand:#8a5a64;--fout:#ffb3b3;
  --t:'Syne','Syne repli',sans-serif;--f:'Figtree','Figtree repli',sans-serif}
*{box-sizing:border-box}
html.laden body{visibility:hidden}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--ink);font:400 19px/1.55 var(--f);-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--bg);overflow-wrap:break-word}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--koper)}
:focus-visible{outline:3px solid var(--koper);outline-offset:3px}
.spring{position:absolute;left:-999px}
.spring:focus{left:16px;top:8px;background:var(--koper);color:var(--bg);padding:10px 14px;z-index:9;min-height:44px;display:inline-flex;align-items:center}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* kop */
.kop{display:flex;align-items:center;gap:32px;max-width:1360px;margin:0 auto;padding:18px 40px 6px}
.merk{font:800 24px/1 var(--t);color:var(--koper);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.merk span{color:var(--zacht);font-weight:700}
.kop nav{margin-left:auto}
.kop ul{display:flex;gap:4px 22px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end}
.kop li a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;text-decoration:none;color:var(--zacht)}
.kop li a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--koper);text-decoration-thickness:3px}
.alle{display:none}
.los{max-width:1360px;margin:0 auto;padding:0 40px;font-size:16px;color:var(--zacht)}

main{max-width:1360px;margin:0 auto;padding:0 40px}
h1{font:700 46px/1.08 var(--t);letter-spacing:-.02em;margin:0 0 14px;max-width:24ch}
h2{font:700 34px/1.1 var(--t);letter-spacing:-.015em;margin:0 0 18px}
h3{font:700 24px/1.2 var(--t);margin:28px 0 10px}

/* startpagina : de rekenhulp van de onroerende voorheffing */
.werk{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"titel uit" "lead uit" "balk balk" "veld veld";column-gap:56px;padding-top:14px}
.werk h1{grid-area:titel}
.lead{grid-area:lead;margin:0;max-width:60ch;color:var(--zacht);font-size:19px}
.lead em{font-style:normal;color:var(--ink);font-weight:600}
.uitkomst{grid-area:uit;align-self:end;min-width:0}
.totaal{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;min-width:0;max-width:100%}
.t-l{flex-basis:100%;font-size:17px;color:var(--zacht)}
.totaal strong{font:800 74px/0.95 var(--t);color:var(--koper);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-eur{font:700 28px/1 var(--t);color:var(--koper)}
.t-noot{margin:8px 0 0;font-size:16px;color:var(--zacht);line-height:1.45}
.balk{grid-area:balk;display:flex;flex-wrap:wrap;gap:14px 22px;margin:26px 0 22px;align-items:flex-start}
.veld{display:flex;flex-direction:column;gap:6px;min-width:0}
.veld label,.veld .lab{font-size:16px;color:var(--zacht)}
.veld label span{color:var(--zacht2)}
.v-gem select{width:300px}.v-dif select{width:auto;min-width:220px}.v-ki input,.v-kort input{width:220px}
.v-prov output{display:flex;align-items:center;height:54px;font:600 21px/1.2 var(--f);color:var(--ink);min-width:200px}
.hulp{font-size:15px;color:var(--zacht2);max-width:240px;line-height:1.3;margin:0}
select,input{font:600 21px/1.2 var(--f);color:var(--ink);background:var(--bg2);border:1px solid var(--rand);border-radius:2px;height:54px;padding:0 14px;max-width:100%}
input[aria-invalid=true]{border-color:#ff9f9f;background:#3a1318}
.fout{margin:0;font-size:16px;color:var(--fout);max-width:420px}
.fout:empty{display:none}

.veldfig{grid-area:veld;margin:0}
.veld-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:28px}
.veldfig svg{width:100%;height:auto;display:block}
.veldfig svg .vl{fill:var(--ink)}
.veldfig svg .pr{fill:none;stroke:var(--ring);stroke-width:1.6}
.veldfig svg .gm{fill:var(--koper)}
.veldfig svg .f.vl{fill:var(--ink)}.veldfig svg .f.pr{fill:var(--ring)}.veldfig svg .f.gm{fill:var(--koper)}
#veld-m,.smal-t{display:none}
.lagen{list-style:none;margin:0;padding:0;position:relative;min-height:210px;font-size:17px;line-height:1.35}
.lagen li{position:absolute;left:0;right:0;transform:translateY(-50%);padding-left:26px}
.lagen .l-vl{top:max(var(--y),26px)}
.lagen .l-pr{top:max(var(--y),92px)}
.lagen .l-gm{top:max(var(--y),168px)}
.lagen b{display:block;font:700 18px/1.25 var(--t)}
.teken{position:absolute;left:0;top:5px;width:14px;height:14px}
.l-vl .teken{background:var(--ink)}
.l-pr .teken{border:2px solid var(--ring);border-radius:50%}
.l-gm .teken{background:var(--koper);border-radius:50%}
figcaption{margin-top:14px;font-size:17px;color:var(--zacht);max-width:72ch}

.som,.strook,.andere,.blok-sectie{padding-top:72px}
.regels p{display:grid;grid-template-columns:330px 190px minmax(0,1fr);column-gap:24px;margin:0;padding:7px 0;font-variant-numeric:tabular-nums;align-items:baseline}
.regels .op{font:700 24px/1.2 var(--t);min-width:0}
.regels .is{font:700 24px/1.2 var(--t);color:var(--koper);white-space:nowrap}
.regels .wat{color:var(--zacht);font-size:17px}
.regels .samen .op,.regels .samen .is{font-size:30px}
.regels .samen{padding-top:16px}
.controle{max-width:76ch;color:var(--zacht);margin-top:22px}
.controle strong{color:var(--ink)}

.strook p{max-width:80ch;color:var(--zacht)}
#strook{width:100%;height:auto;display:block;margin-top:18px}
#strook circle{fill:var(--veld)}
#strook circle.zelf{fill:var(--koper);r:6px}
#strook .as line{stroke:var(--dof);stroke-width:1.5}
#strook .as line.gem{stroke:var(--ring);stroke-width:1.5}
#strook .as text{fill:var(--zacht);font:400 22px var(--f);text-anchor:middle}
.schaal{display:none}

.andere ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 48px}
.andere li{min-width:0}
.andere a{font:800 26px/1.15 var(--t);color:var(--koper);display:inline-flex;min-height:44px;align-items:center}
.andere p{margin:6px 0 0;color:var(--zacht)}
.andere b{color:var(--ink);font-weight:600}

/* binnenpagina's */
.kopband{padding-top:22px;max-width:980px}
.kopband .lead{max-width:66ch}
.werkblad{margin-top:30px;display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;align-items:start}
.werkblad>*{min-width:0}
.zin{font:600 26px/1.9 var(--f);max-width:30em;margin:0}
.zin p{margin:0}
.zin select,.zin input{height:48px;font-size:22px;margin:3px 0;vertical-align:baseline}
.zin input{width:7.2em;text-align:right}
.zin .kort{width:5em}
.keuzes{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-start}
.keuzes fieldset{border:0;margin:0;padding:0;min-width:0}
.keuzes legend{font-size:16px;color:var(--zacht);margin-bottom:6px;padding:0}
.radio{display:flex;flex-wrap:wrap;gap:6px 8px}
.radio label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--rand);border-radius:2px;background:var(--bg2);font-weight:600;cursor:pointer}
.radio input{width:18px;height:18px;margin:0;accent-color:var(--koper)}
.radio label:has(input:checked){border-color:var(--koper);background:var(--bg3)}
.antwoord{min-width:0}
.antwoord .totaal strong{font-size:64px}
.niet-berekend{font:700 24px/1.25 var(--t);color:var(--ring);margin:0}
.indicatief{font-size:16px;color:var(--zacht);margin:10px 0 0}
.uitleg{margin-top:26px}
.uitleg .regels p{grid-template-columns:minmax(0,1fr) auto}
.uitleg .regels .op{font-size:20px}.uitleg .regels .is{font-size:20px}
.uitleg .regels .wat{grid-column:1 / -1;font-size:16px}
.uitleg .regels .samen .op,.uitleg .regels .samen .is{font-size:24px}

.blokken{margin:30px 0 0}
.blokken svg{width:100%;height:auto;display:block}
.blokken .blok{fill:var(--koper)}
.blokken .blok.b2{fill:var(--ring)}
.blokken .grond{stroke:var(--dof);stroke-width:1.5}
.blokken text{fill:var(--zacht);font:400 15px var(--f)}
.blokken text.deel{fill:var(--ink);font:700 16px var(--t)}
.blokken text.in{fill:var(--bg);font:600 14px var(--f)}

.artikel{max-width:78ch;padding-top:60px}
.artikel h2{margin-top:52px}
.artikel h2:first-child{margin-top:0}
.artikel p,.artikel li{color:var(--zacht)}
.artikel strong,.artikel b{color:var(--ink)}
.artikel ul,.artikel ol{padding-left:22px}
.artikel li{margin:6px 0}
.tabel-wrap{max-width:100%;overflow-x:auto;margin:14px 0 8px}
table{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:17px;min-width:0}
caption{text-align:left;color:var(--zacht);font-size:16px;padding-bottom:8px;caption-side:top}
th,td{text-align:left;padding:8px 18px 8px 0;border-bottom:1px solid var(--bg3);vertical-align:top}
th{color:var(--ink);font-weight:600}
td{color:var(--zacht)}
td.n,th.n{text-align:right;padding-right:0;padding-left:18px;white-space:nowrap}
.tabellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px 48px;max-width:1100px}
.zoek{margin:18px 0 6px}
.zoek input{width:320px}
.gem-tabel{max-height:620px;overflow-y:auto;border-top:1px solid var(--bg3)}
.gem-tabel table{width:100%}
.gem-tabel thead th{position:sticky;top:0;background:var(--bg)}

.reclame{min-height:280px;margin-top:56px;background:var(--bg2)}
.reclame p{margin:0;padding:8px 12px;font-size:15px;color:var(--zacht)}

/* voet */
.voet{max-width:1360px;margin:80px auto 0;padding:28px 40px 48px;color:var(--zacht);font-size:16px;background:var(--bg2)}
.voet h2{font-size:22px;margin:0 0 10px}
.voet p{margin:6px 0;max-width:90ch}
.voet-nav ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.voet-nav a{display:inline-flex;align-items:center;min-height:44px}
.bronnen{padding-left:20px;margin:0 0 14px}
.bronnen li{margin:6px 0}

@media (max-width:1100px){
  .werk{grid-template-columns:1fr;grid-template-areas:"titel" "uit" "lead" "balk" "veld"}
  .uitkomst{margin-bottom:18px}
  .veld-wrap{grid-template-columns:1fr}
  .lagen{position:static;margin-top:14px;min-height:0}
  .lagen li{position:relative;transform:none;margin:8px 0}
  .lagen .l-vl,.lagen .l-pr,.lagen .l-gm{top:auto}
  .regels p{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .regels .wat{grid-column:1 / -1}
  .andere ul{grid-template-columns:1fr 1fr}
  .werkblad{grid-template-columns:1fr}
  .antwoord{margin-top:26px}
}
@media (max-width:760px){
  html{font-size:18px}
  .kop{padding:12px 16px 2px;gap:8px}
  .kop nav{display:none}
  .alle{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;font-size:15px;color:var(--zacht);white-space:nowrap}
  .merk{font-size:15px;letter-spacing:-.03em;display:inline-flex;align-items:center;min-height:44px}
  .los,main{padding-left:16px;padding-right:16px}
  .los{font-size:15px;margin:0 auto}
  h1{font-size:28px;margin-bottom:10px}
  h2{font-size:26px}
  h3{font-size:21px}
  .lead{font-size:17px}
  .uitkomst{margin:4px 0 6px}
  .t-noot{font-size:15px}
  .balk{margin:16px 0 12px;gap:10px 12px}
  .v-gem,.v-prov,.v-ki,.v-dif,.v-kort{flex:1 1 100%}
  .v-gem select,.v-ki input,.v-dif select,.v-kort input{width:100%}
  select,input{height:50px;font-size:19px}
  .totaal strong,.antwoord .totaal strong{font-size:52px}
  .t-eur{font-size:22px}
  .regels .op,.regels .is{font-size:19px}
  .regels .samen .op,.regels .samen .is{font-size:23px}
  #strook .as text{display:none}
  .andere ul{grid-template-columns:1fr;gap:20px}
  .andere a{font-size:20px;overflow-wrap:anywhere;hyphens:auto}
  .voet{padding:22px 16px 40px}
  .som,.strook,.andere,.blok-sectie{padding-top:52px}
  .artikel{padding-top:44px}
  .zin{font-size:21px;line-height:1.8}
  .zin select,.zin input{font-size:19px;height:46px}
  #veld,.breed-t{display:none}#veld-m{display:block}.smal-t{display:inline}
  .veldfig svg .pr{stroke-width:2}
  .schaal{display:block;position:relative;height:26px;margin-top:4px;font-size:15px;color:var(--zacht)}
  .schaal span{position:absolute;top:0;transform:translateX(-50%)}
  .schaal span:first-child{transform:none}.schaal span:last-child{transform:translateX(-100%)}
  .v-prov output{height:auto;min-height:30px}
  .hulp{max-width:none}
  .zoek input{width:100%}
  table{font-size:16px}
  th,td{padding-right:12px}
  td.n,th.n{padding-left:12px}
}
/* smalle telefoons : de rekenregels onder elkaar, zodat ook een groot bedrag past */
@media (max-width:420px){
  .regels p,.uitleg .regels p{grid-template-columns:minmax(0,1fr)}
  .regels .is{white-space:normal}
  .zin input{width:6.2em}
}
@media (max-width:360px){
  .kop{flex-wrap:wrap;row-gap:0}.alle{margin-left:0}
  .totaal strong,.antwoord .totaal strong{font-size:44px}
  h1{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* tabellen in de tekst : nooit breder dan de pagina ; op een smalle telefoon schuift de tabel zelf */
.artikel table{display:block;max-width:100%;overflow-x:auto}
@media (max-width:420px){table{font-size:15px}th,td{padding:7px 8px 7px 0}td.n,th.n{padding-left:8px}.artikel td,.artikel th{overflow-wrap:anywhere}}
.uitleg .regels,.uitleg .controle{max-width:780px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-size:16px;color:var(--zacht);margin-bottom:6px;padding:0}