:root{
  --bg:#0d1117; --bg2:#141b24; --paneel:#182029; --lijn:#26313d;
  --tekst:#dbe3ec; --zacht:#8d9bab; --wit:#ffffff;
  --cyaan:#3fd0c9; --cyaan-d:#1b8f89; --oranje:#f0883e; --rood:#e06060;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tekst);font-family:var(--sans);
  font-size:17px;line-height:1.66;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--cyaan);text-decoration:none;border-bottom:1px solid rgba(63,208,201,.35)}
a:hover{border-bottom-color:var(--cyaan)}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.smal{max-width:740px}

.balk{background:var(--bg2);border-bottom:1px solid var(--lijn);position:relative}
.balk::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--cyaan),transparent 60%)}
.bb{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:15px 0;flex-wrap:wrap}
.merk{display:flex;align-items:center;gap:11px;border:0}
.merk svg{width:30px;height:30px;flex:0 0 30px}
.merk b{font-family:var(--mono);font-size:19px;color:var(--wit);letter-spacing:-.02em}
.menu{display:flex;gap:19px;flex-wrap:wrap;font-family:var(--mono);font-size:13.5px;
  letter-spacing:.04em}
.menu a{color:var(--zacht);border:0;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--wit);border-bottom-color:var(--cyaan)}

.pad{font-family:var(--mono);font-size:12.5px;color:#68768a;padding:15px 0 0}
.pad a{color:#68768a;border:0}
.pad a:hover{color:var(--cyaan)}

.hd{padding:50px 0 36px;border-bottom:1px solid var(--lijn)}
.hd h1{font-size:clamp(29px,4.3vw,46px);line-height:1.1;margin:0 0 16px;
  letter-spacing:-.03em;color:var(--wit);font-weight:800}
.hd .sub{font-size:19px;color:var(--zacht);max-width:62ch;margin:0}
.tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyaan);margin:0 0 13px}

h1{font-size:clamp(27px,3.4vw,38px);line-height:1.15;margin:22px 0 14px;
  color:var(--wit);letter-spacing:-.025em;font-weight:800}
h2{font-size:clamp(20px,2.3vw,25px);margin:40px 0 12px;color:var(--wit);
  letter-spacing:-.015em;font-weight:700;position:relative;padding-left:16px}
h2::before{content:"";position:absolute;left:0;top:.42em;width:5px;height:.72em;
  background:var(--cyaan)}
h3{font-size:17.5px;margin:24px 0 6px;color:var(--wit);font-weight:700}
p{margin:0 0 16px}
main{padding-bottom:60px}
section{padding:30px 0}

/* rooster met formulekaarten */
.grid{list-style:none;padding:0;margin:22px 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.grid li{background:var(--paneel);border:1px solid var(--lijn);padding:18px 20px;
  border-radius:3px}
.grid li:hover{border-color:var(--cyaan-d)}
.grid .nr{font-family:var(--mono);font-size:11.5px;color:var(--cyaan);
  letter-spacing:.1em;display:block;margin-bottom:7px}
.grid h3{margin:0 0 6px;font-size:17px}
.grid h3 a{border:0;color:var(--wit)}
.grid h3 a:hover{color:var(--cyaan)}
.grid p{margin:0;font-size:15.5px;color:var(--zacht);line-height:1.55}

/* platte lijst */
.rij{list-style:none;padding:0;margin:20px 0}
.rij li{border-bottom:1px solid var(--lijn)}
.rij li:first-child{border-top:1px solid var(--lijn)}
.rij a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;
  align-items:baseline;padding:14px 2px;border:0;color:var(--tekst)}
.rij a:hover{background:var(--paneel)}
.rij b{color:var(--wit);font-size:16.5px}
.rij span{color:var(--zacht);font-size:14.5px;text-align:right;
  font-family:var(--mono);font-size:12.5px}
@media(max-width:640px){.rij a{grid-template-columns:1fr}.rij span{text-align:left}}

/* tabel */
table.d{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px;
  font-family:var(--mono)}
table.d th{background:var(--paneel);color:var(--cyaan);text-align:left;
  padding:10px 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--lijn)}
table.d td{padding:10px 12px;border-bottom:1px solid var(--lijn);vertical-align:top}
.scroll{overflow-x:auto}

/* formule */
.form{background:var(--paneel);border:1px solid var(--lijn);border-left:3px solid var(--cyaan);
  padding:16px 20px;margin:22px 0;font-family:var(--mono);font-size:15px;
  color:var(--wit);overflow-x:auto}
.form span{color:var(--zacht);display:block;font-size:13px;margin-top:8px;
  font-family:var(--sans)}

/* kaders */
.box{background:var(--paneel);border:1px solid var(--lijn);border-left:3px solid var(--oranje);
  padding:16px 20px;margin:22px 0;font-size:16px}
.box.rood{border-left-color:var(--rood)}
.box b{display:block;color:var(--wit);margin-bottom:5px}
.box p:last-child{margin:0}

/* winkel */
.shop{border:1px solid var(--cyaan-d);background:linear-gradient(180deg,
  rgba(63,208,201,.07),transparent);padding:20px 22px;margin:28px 0;border-radius:3px}
.shop .l{font-family:var(--mono);font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--cyaan);margin:0 0 9px}
.shop p{margin:0 0 12px;font-size:16px;color:var(--zacht)}
.shop ul{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:14px}
.shop li{padding:6px 0;border-top:1px solid var(--lijn)}
.shop li a{word-break:break-word}

/* kengetallen */
.kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);margin:24px 0;border-radius:3px;
  overflow:hidden}
.kg div{background:var(--paneel);padding:14px 16px}
.kg dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--zacht);margin:0 0 4px}
.kg dd{margin:0;font-size:17px;font-weight:700;color:var(--wit);font-family:var(--mono)}

/* rekenwerk */
.calc{background:var(--paneel);border:1px solid var(--lijn);padding:22px;
  margin:24px 0;border-radius:3px}
.calc label{display:block;font-size:13.5px;font-weight:700;color:var(--wit);
  margin:14px 0 5px;font-family:var(--mono)}
.calc input,.calc select{width:100%;padding:10px 12px;background:var(--bg);
  border:1px solid var(--lijn);color:var(--tekst);font:inherit;font-size:16px;
  border-radius:3px}
.calc input:focus,.calc select:focus{outline:2px solid var(--cyaan-d);outline-offset:1px}
.calc button{margin-top:18px;background:var(--cyaan);color:#062120;border:0;
  padding:12px 24px;font:inherit;font-weight:800;cursor:pointer;border-radius:3px;
  font-family:var(--mono);font-size:14px;letter-spacing:.05em}
.calc button:hover{background:var(--wit)}
.res{margin-top:20px;padding-top:16px;border-top:1px solid var(--cyaan-d);font-size:16px}
.res:empty{display:none}
.res h3{margin-top:0}
.staaf{height:9px;background:var(--bg);border:1px solid var(--lijn);margin:8px 0 12px;
  border-radius:2px;overflow:hidden}
.staaf i{display:block;height:100%;background:var(--cyaan)}

/* logboek */
.log{list-style:none;padding:0;margin:20px 0}
.log li{padding:18px 0;border-bottom:1px solid var(--lijn)}
.log time{font-family:var(--mono);font-size:12px;color:var(--zacht);display:block;
  margin-bottom:5px}
.log a{font-size:19.5px;color:var(--wit);border:0;font-weight:700}
.log a:hover{color:var(--cyaan)}
.log p{margin:6px 0 0;color:var(--zacht);font-size:15.5px}

/* termen */
.term dt{font-family:var(--mono);color:var(--cyaan);margin-top:18px;font-size:16px}
.term dd{margin:3px 0 0;color:var(--tekst)}

footer{background:var(--bg2);border-top:1px solid var(--lijn);margin-top:54px;
  padding:36px 0 24px;font-size:14.5px;color:var(--zacht)}
footer a{color:var(--tekst)}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.fg h4{color:var(--cyaan);font-family:var(--mono);font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;margin:0 0 10px}
.fg ul{list-style:none;padding:0;margin:0}
.fg li{margin-bottom:6px}
.eind{border-top:1px solid var(--lijn);margin-top:24px;padding-top:16px;font-size:13px;
  color:#68768a}