@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2");font-weight:500 700;font-display:swap}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--diepwater);outline-offset:3px;border-radius:2px}
.skip:focus{left:16px;top:8px;background:var(--vlak);padding:.5rem .75rem;z-index:20}
.menu{font-weight:500}
.menu a:hover,.menu a[aria-current="page"]{color:var(--diepwater);text-decoration:underline}
.taal{font-weight:500}
.merk svg{flex:none}
.lees{max-width:40rem}

/* knoppen */
.knop-vol:hover{filter:brightness(1.08)}
.knop-lijn:hover{background:var(--vlak)}

/* hardheidsliniaal */
.liniaal{padding-block:1.5rem 3rem}
.liniaal figure{margin:0}
.liniaal h2{font-size:1.15rem;font-weight:700;letter-spacing:0;max-width:40rem}
.schaal{position:relative;margin-top:3.9rem;padding-bottom:2rem}
.balk{height:44px;border-radius:4px;background:linear-gradient(90deg,var(--helder) 0%,color-mix(in oklab,var(--helder) 45%,var(--aanslag)) 45%,var(--aanslag) 100%);position:relative;overflow:hidden}
.balk::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,color-mix(in oklab,var(--aanslag) 70%,var(--inkt)) 9px 10px);opacity:.18;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 100%);mask-image:linear-gradient(90deg,transparent 40%,#000 100%)}
.streepjes{position:absolute;left:0;right:0;top:44px;height:10px;background:repeating-linear-gradient(90deg,var(--gedempt) 0 1px,transparent 1px calc(100%/12))}
.cijfers{position:absolute;left:0;right:0;top:56px;margin:0;padding:0;list-style:none;font-size:.8rem;color:var(--gedempt);font-variant-numeric:tabular-nums}
.cijfers li{position:absolute;transform:translateX(-50%);white-space:nowrap}
.cijfers li:first-child{transform:none}
.cijfers li:last-child{transform:translateX(-100%)}
.merkpunt{position:absolute;top:-2.3rem;transform:translateX(-1px);font-size:.8rem;font-weight:700;line-height:1.2;color:var(--inkt);white-space:nowrap}
.merkpunt::after{content:"";position:absolute;left:0;top:1.35rem;width:2px;height:calc(2.3rem + 44px - 1.35rem);background:var(--inkt)}
.merkpunt.hoog{top:-3.6rem}
.merkpunt.hoog::after{height:calc(3.6rem + 44px - 1.35rem)}
.merkpunt span{display:block;padding-left:.4rem}
.uiteinden{display:flex;justify-content:space-between;font-size:.875rem;font-weight:700;margin-top:.4rem}
.uiteinden span:first-child{color:var(--diepwater)}
.uiteinden span:last-child{color:var(--aanslag-tekst)}
figcaption{margin-top:1.25rem;max-width:40rem;color:var(--gedempt);font-size:.95rem}
figcaption b{color:var(--inkt)}
.legende{display:grid;gap:.5rem;margin:1.25rem 0 0;padding:0;list-style:none;max-width:40rem;font-size:.95rem}
.legende li{display:grid;grid-template-columns:4.5rem 1fr;gap:.75rem}
.legende b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){.balk{animation:vul .9s cubic-bezier(.2,.7,.2,1) both}@keyframes vul{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}}

/* secties op de startpagina */
.sectie{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--lijn)}
.sectie h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);max-width:22ch}
.intro{margin-top:.9rem;max-width:40rem}
.twee{display:grid;gap:2rem 4rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.twee{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}}
.tips{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:1.25rem;max-width:42rem}
.tips li{display:grid;gap:.25rem}
.tips h3{font-size:1.1rem;font-weight:700;letter-spacing:0}
.bron{font-size:.85rem;color:var(--gedempt)}
.regels{margin:1.5rem 0 0;display:grid;max-width:44rem}
.regels div{display:grid;gap:.3rem;padding-block:1rem;border-bottom:1px solid var(--lijn)}
.regels div:first-child{padding-top:0}
.regels dt{font-weight:700;font-size:1.1rem}
.regels dd{margin:0}
.bedrijven{margin-top:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));max-width:56rem}
.bedrijven h3{font-size:1rem;font-weight:700;letter-spacing:0;color:var(--gedempt)}
.bedrijven ul{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.3rem}
.gidsen{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:0;max-width:44rem}
.gidsen li{padding-block:.9rem;border-bottom:1px solid var(--lijn);display:grid;gap:.2rem}
.gidsen a{font-weight:700;font-size:1.1rem}
.gidsen span{color:var(--gedempt);font-size:.95rem}
.belofte{padding:1.5rem;background:var(--vlak);border-radius:6px;max-width:44rem;display:grid;gap:.9rem}

/* gidspagina's */
.tekst h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,2rem);margin-top:2.75rem;scroll-margin-top:1rem}
.tekst h3{font-size:1.15rem;font-weight:700;letter-spacing:0;margin-top:1.75rem}
.tekst ul,.tekst ol{padding-left:1.25rem}
.tekst li+li{margin-top:.35rem}
.tekst strong{font-weight:800}
.inhoud{font-size:.95rem;align-self:start}
@media (min-width:1000px){.inhoud{position:sticky;top:1.5rem}}
.inhoud h2{font-size:.95rem;font-weight:700;letter-spacing:0;color:var(--gedempt)}
.inhoud ol{margin:.6rem 0 0;padding-left:1.1rem;display:grid;gap:.35rem}
.tabel{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
caption{text-align:left;font-weight:700;padding-bottom:.5rem;max-width:calc(100vw - 2rem)}
th,td{text-align:left;padding:.55rem .75rem .55rem 0;border-bottom:1px solid var(--lijn);vertical-align:top}
thead th{font-size:.85rem;color:var(--gedempt);font-weight:700;border-bottom:2px solid var(--lijn)}
td.getal,th.getal{text-align:right;white-space:nowrap}
.score{font-weight:700}
.bronnen{margin:1rem 0 0;padding-left:1.25rem;display:grid;gap:.4rem;font-size:.9rem;color:var(--gedempt)}
.verder{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--lijn)}
.verder h2{margin-top:0}
.noot{font-size:.9rem;color:var(--gedempt)}

/* hardheidstool */
.tool{margin-top:1.25rem;padding:1.25rem;background:var(--vlak);border-radius:6px;display:grid;gap:.9rem}
.tool label{font-weight:700;display:block;margin-bottom:.35rem}
.tool input{font:inherit;width:100%;max-width:22rem;padding:.65rem .75rem;border:2px solid var(--lijn);border-radius:6px;background:var(--kalkwit);color:var(--inkt)}
.tool input:focus{border-color:var(--diepwater);outline:none}
.uitslag{min-height:1.5rem}
.uitslag strong{font-size:1.15rem}
.zoek{margin-top:1rem}
.zoek input{font:inherit;width:100%;max-width:22rem;padding:.6rem .75rem;border:2px solid var(--lijn);border-radius:6px;background:var(--vlak);color:var(--inkt)}
.klas{display:inline-block;padding:.05rem .45rem;border-radius:4px;font-size:.85rem;font-weight:700;white-space:nowrap}
:root{--aanslag-tekst:#6E5B2E;--k1:#1F7A88;--k2:#7FBFC8;--k3:#E3E5DE;--k4:#CFAE6A;--k5:#8F6A2C}
@media (prefers-color-scheme:dark){:root{--aanslag-tekst:#D3B87F;--k1:#1F7A88;--k2:#7FBFC8;--k3:#E3E5DE;--k4:#CFAE6A;--k5:#8F6A2C}}
.k1{background:var(--k1)}.k2{background:var(--k2)}.k3{background:var(--k3)}.k4{background:var(--k4)}.k5{background:var(--k5)}
.tabel:focus-visible{outline-offset:2px}

/* voet */
.voet{padding-block:2.5rem 3rem;border-top:1px solid var(--lijn);font-size:.9rem;color:var(--gedempt)}
.voet .wrap{display:grid;gap:1.25rem}
.voet ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0;padding:0;list-style:none}
.voet strong{color:var(--inkt)}
.taalkeuze{min-height:70vh;display:grid;align-content:center;gap:1.5rem;padding-block:3rem}
.taalkeuze h1{font-size:clamp(2rem,1.5rem + 2vw,3rem)}
.figuur{margin:1.5rem 0 0;padding:1.25rem;background:var(--vlak);border:1px solid var(--lijn);border-radius:8px}
.figuur .fig{display:block;width:100%;height:auto}
.figuur.grafiek .fig{max-width:30rem}
.figuur figcaption{margin-top:1rem;font-size:.95rem;color:var(--gedempt)}
.figuur figcaption .noot{margin-top:.5rem}
.stappen{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;gap:.45rem;color:var(--inkt)}
.stappen li{counter-increment:st;display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;align-items:start}
.stappen li::before{content:counter(st);display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--diepwater);color:var(--op-diep);font-weight:700;font-size:.85rem}
@media (max-width:599px){.figuur{padding:.75rem;margin-inline:-.25rem}}

.klas.k1,.klas.k5{color:#fff}.klas.k2,.klas.k3,.klas.k4{color:#17262A}
.kaart img{display:block;width:100%;height:auto}
.kaart-legende{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.9rem;color:var(--inkt)}
.fusie{display:block;font-weight:400;font-size:.85rem;color:var(--gedempt)}
.faq{display:grid;gap:1.1rem;margin-top:1rem}.vraag-antwoord h3{font-size:1.1rem;font-weight:700;letter-spacing:0;margin:0}.vraag-antwoord p{margin-top:.35rem}