:root{--achter:#f2f6f5;--wit:#fff;--inkt:#10262a;--grijs:#546b6e;--lijn:#cfdedb;--groen:#12706b;--oker:#b8781f;--vlak:#e4eeeb}
*{box-sizing:border-box}
body{margin:0;background:var(--achter);color:var(--inkt);
 font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;font-size:16.5px;line-height:1.7;
 background-image:linear-gradient(rgba(18,112,107,.045) 1px,transparent 1px),
   linear-gradient(90deg,rgba(18,112,107,.045) 1px,transparent 1px);background-size:34px 34px}
h1,h2,h3{margin:0;line-height:1.2;font-weight:700}
h1{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.6rem);letter-spacing:-.02em}
h2{font-size:1.25rem;margin:2rem 0 .55rem;color:var(--groen)}
h3{font-size:1.02rem;margin:1.4rem 0 .3rem}
p{margin:0 0 1em}
a{color:var(--groen)}
a:hover{color:#0b4f4b}
.wrap{max-width:960px;margin:0 auto;padding:0 22px}
code,.cijf{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.kop{background:var(--wit);border-bottom:2px solid var(--groen)}
.kop .wrap{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt);font-weight:800;font-size:1.2rem;letter-spacing:.02em}
.merk svg{width:28px;height:28px}
.merk span{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.24em;color:var(--grijs);
 text-transform:uppercase;display:block;margin-top:2px}
.kop nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;font-size:.84rem}
.kop nav a{color:var(--grijs);text-decoration:none;padding:6px 12px;border-bottom:3px solid transparent}
.kop nav a:hover{color:var(--inkt)}
.kop nav a[aria-current]{color:var(--groen);border-color:var(--oker);font-weight:700}

main{padding:30px 0 10px}
.hoofd{border-left:5px solid var(--oker);padding:2px 0 2px 20px;margin-bottom:22px}
.hoofd .n{font-family:ui-monospace,Menlo,monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
 color:var(--oker);display:block;margin-bottom:8px}
.hoofd p{margin:.6em 0 0;font-size:1.1rem;color:var(--grijs);max-width:66ch}
.body{max-width:72ch}

.kaarten{display:grid;gap:14px;margin:22px 0}
.kaarten.k3{grid-template-columns:repeat(3,1fr)}
.kaarten.k2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.kaarten.k3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:610px){.kaarten.k3,.kaarten.k2{grid-template-columns:1fr}}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-top:3px solid var(--groen);padding:16px 18px;
 display:flex;flex-direction:column}
.kaart .n{font-family:ui-monospace,Menlo,monospace;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oker)}
.kaart h3{margin:.4rem 0 .3rem;font-size:1rem}
.kaart p{font-size:.92rem;color:var(--grijs);margin:0 0 .8em}
.kaart a.ga{margin-top:auto;text-decoration:none;font-size:.84rem;font-weight:700}
.kaart a.ga:before{content:"\2192 "}

.blok{background:var(--vlak);border:1px solid var(--lijn);padding:16px 20px;margin:24px 0}
.blok h3{margin-top:0;color:var(--groen)}
.blok ul{margin-bottom:0}
figure.tk{background:var(--wit);border:1px solid var(--lijn);padding:18px;margin:22px 0}
figure.tk svg{display:block;width:100%;max-width:540px;height:auto;margin:0 auto}
figure.tk figcaption{color:var(--grijs);font-size:.86rem;margin-top:12px;text-align:center;
 font-family:ui-monospace,Menlo,monospace}
table{border-collapse:collapse;width:100%;margin:18px 0;font-size:.93rem;background:var(--wit)}
th,td{border:1px solid var(--lijn);padding:8px 11px;text-align:left;vertical-align:top}
td:nth-child(2),td:nth-child(3){font-family:ui-monospace,Menlo,monospace}
th{background:var(--vlak);color:var(--groen);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin:0 0 .4em}

.voet{background:var(--wit);border-top:2px solid var(--groen);margin-top:44px;padding:28px 0 38px;color:var(--grijs);font-size:.9rem}
.voet .kol{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media(max-width:760px){.voet .kol{grid-template-columns:1fr}}
.voet h4{color:var(--inkt);margin:0 0 .5rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
 font-family:ui-monospace,Menlo,monospace}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin:0 0 5px}
.voet a{color:var(--grijs);text-decoration:none}
.voet a:hover{color:var(--groen)}
.voet .eind{margin-top:22px;padding-top:12px;border-top:1px solid var(--lijn);font-size:.8rem;font-family:ui-monospace,Menlo,monospace}