@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/open-sans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/open-sans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/open-sans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/roboto-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{--groen:#3cc11a;--groen2:#2fae16;--donker:#1e1f1d;--grijs:#f3f4f2;--leisteen:#5d7380;--kaart:#3c4a52;--sub:#555;--lijn:#dfe2dd}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Open Sans',Helvetica,Arial,sans-serif;color:var(--donker);background:#fff;font-size:18px;line-height:1.7}
a{color:var(--groen2)}a:hover{color:var(--donker)}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--groen);outline-offset:2px}
.w{max-width:1200px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.smal{max-width:780px}
.anton,h1,h2{font-family:Anton,Impact,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.2px}
/* header */
.kop{background:#fff;position:relative;z-index:3;border-bottom:1px solid var(--lijn)}
.kop .w{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:12px}
.logo{display:flex;flex-direction:column;line-height:.95;font-family:Anton,Impact,sans-serif;text-transform:uppercase;color:var(--donker);text-decoration:none}
.logo .l1{font-size:22px}.logo .l2{font-size:34px}.logo .l2 span{color:var(--groen)}.logo:hover{color:var(--donker)}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.menu a{font-size:16px;font-weight:700;color:var(--donker);text-decoration:none;padding:4px 0}
.menu a:hover,.menu a.actief{color:var(--groen2)}.menu a.actief{box-shadow:inset 0 -3px 0 var(--groen)}
.knop{background:var(--groen);color:#fff;padding:9px 16px;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap}.knop:hover{background:var(--groen2);color:#fff}
.kop .logo{order:1}.kop .menu{order:2}.kop .knop{order:3}
/* hero */
.hero{position:relative;background-color:var(--leisteen);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 16px,rgba(255,255,255,0) 16px 32px);color:#fff}
.hero.home{padding:80px 0 0;background-color:var(--leisteen);background-image:linear-gradient(90deg,#5d7380 0,#5d7380 8vw,rgba(93,115,128,.86) 15vw,rgba(93,115,128,.45) 46vw,rgba(93,115,128,.08) 72vw,rgba(93,115,128,0) 100%),linear-gradient(180deg,rgba(93,115,128,0) 62%,#5d7380 100%),image-set(url(/img/hero-s1-1600.webp) 1x,url(/img/hero-s1-2400.webp) 2x);background-size:100% 42.5vw,100% 42.5vw,100vw auto;background-position:0 0,0 0,8vw 0;background-repeat:no-repeat}
@media (min-width:1700px){.hero.home{background-image:linear-gradient(90deg,#5d7380 0,#5d7380 8vw,rgba(93,115,128,.86) 15vw,rgba(93,115,128,.45) 46vw,rgba(93,115,128,.08) 72vw,rgba(93,115,128,0) 100%),linear-gradient(180deg,rgba(93,115,128,0) 62%,#5d7380 100%),url(/img/hero-s1-2400.webp)}}.hero.sub{padding:44px 0 56px}
.hero h1{margin:0;max-width:920px;font-size:clamp(36px,6vw,64px);line-height:1.15;color:#fff;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.hero.sub h1{font-size:clamp(32px,5vw,52px)}
.hero.sub.foto{padding:64px 0 76px;background-image:linear-gradient(90deg,#5d7380 0%,rgba(93,115,128,.93) 32%,rgba(93,115,128,.55) 62%,rgba(93,115,128,.18) 100%),var(--foto);background-size:cover;background-position:center right;background-repeat:no-repeat}
.hero .intro{max-width:780px;margin:18px 0 0;font-size:19px;line-height:1.65;color:#eef2f4}
.kruimel{font-size:14px;margin:0 0 14px;color:#dce4e8}.kruimel a{color:#fff}
/* kenteken */
.kenteken{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.plaat{display:flex;width:290px;max-width:100%;height:62px;border-radius:5px;overflow:hidden;background:#f2c12e;border:2px solid #1b1b1b}
.plaat .eu{width:36px;background:#0a5fb4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px;gap:6px;color:#fff;font-size:12px;font-weight:700}
.plaat .eu i{width:14px;height:14px;border-radius:50%;border:2px dotted #f5d000}
.plaat input{flex:1;min-width:0;border:0;outline:0;background:transparent;text-align:center;font-family:'Roboto Mono',monospace;font-size:30px;font-weight:500;color:#1b1b1b;text-transform:uppercase;letter-spacing:1px}
.plaat input::placeholder{color:rgba(20,20,20,.35)}
.btn{height:62px;padding:0 26px;border:0;background:var(--groen);color:#fff;font:inherit;font-size:18px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn:hover{background:var(--groen2);color:#fff}
.kt-uitleg{width:100%;margin:0;font-size:15px;color:#dce4e8}
.kt-fout{width:100%;max-width:290px;font-size:15px;font-weight:600;color:#fff;background:#c62f2f;padding:6px 10px}
.kt-res{width:100%;max-width:780px;background:#fff;color:var(--donker);padding:20px 24px;border-left:6px solid var(--groen)}
.kt-res dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 18px;margin:8px 0 12px;font-size:17px}.kt-res dt{color:var(--sub)}.kt-res dd{margin:0;font-weight:600}
.kt-res p{margin:6px 0 0;font-size:16px;line-height:1.6}.kt-res .titel{font-family:Anton,Impact,sans-serif;font-size:26px}
[hidden]{display:none!important}
/* kaarten */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:56px;position:relative;top:80px}
.kaart{display:flex;flex-direction:column;background:#fff;color:var(--donker);box-shadow:0 10px 30px rgba(0,0,0,.12);text-decoration:none;transition:transform .15s}
.kaart:hover{color:var(--donker);transform:translateY(-3px)}
.kaart .beeld{height:150px;background-color:var(--kaart);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 12px,rgba(255,255,255,0) 12px 24px);border-bottom:4px solid var(--groen);display:flex;align-items:flex-end;padding:20px 24px}
.kaart .beeld span{font-family:Anton,Impact,sans-serif;font-size:28px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}.kaart .beeld.met-foto{position:relative;overflow:hidden;padding:0}.kaart .beeld.met-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;display:block;transition:transform .3s}.kaart:hover .beeld.met-foto img{transform:scale(1.04)}.kaart .beeld.met-foto span{position:relative;z-index:1;display:block;width:100%;padding:34px 24px 16px;background:linear-gradient(180deg,rgba(53,69,78,0) 0%,rgba(53,69,78,.75) 100%)}
.kaart .tekst{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.kaart .vraag{font-size:19px;font-weight:700;line-height:1.35;margin:0 0 4px}
.kaart .meer{margin-top:auto;padding-top:8px;font-weight:700;color:var(--groen2)}
.vink{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.45}
.vink i{flex:none;width:17px;height:17px;margin-top:3px;border-radius:50%;background:var(--donker);display:flex;align-items:center;justify-content:center}
.vink.groen i{background:var(--groen)}
/* secties */
.sectie{padding:84px 0}.sectie.grijs{background:var(--grijs)}.sectie.na-kaarten{padding-top:170px}
.sectie h2{margin:0 0 18px;font-size:clamp(32px,4.5vw,44px);line-height:1.15}
.welniet{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:36px 56px}
.welniet .lijst{display:flex;flex-direction:column;gap:12px}.welniet .lkop{font-family:Anton,Impact,sans-serif;font-size:22px}
.welniet .lkop.groen{color:var(--groen2)}
.cijfers{background:var(--donker);color:#fff;padding:48px 0}
.cijfers .rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.cijfers .c{display:flex;flex-direction:column;gap:2px;border-left:4px solid var(--groen);padding-left:20px}
.cijfers .c b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:44px;line-height:1.15}.cijfers .c span{font-size:16px;line-height:1.5;color:#d4d6d2}
.cijfers .bron{margin:22px 0 0;font-size:14px;color:#b9bcb6}.cijfers .bron a{color:#fff}
.werkgrid{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:28px 56px;align-items:start}.werkkop{position:sticky;top:24px}.werkkop p{margin:0 0 12px;font-size:18px}
@media (max-width:900px){.werkgrid{grid-template-columns:1fr}.werkkop{position:static}}
.stappen{display:flex;flex-direction:column;gap:14px}
.stap{background:#fff;padding:26px 30px;display:grid;grid-template-columns:72px 1fr;column-gap:22px;row-gap:8px;border-left:5px solid var(--groen);box-shadow:0 4px 18px rgba(0,0,0,.05)}
.stap .n{grid-row:1 / span 2;font-family:Anton,Impact,sans-serif;font-size:54px;line-height:1;color:var(--groen)}
.stap h3{margin:0;font-size:22px;line-height:1.3;align-self:end}.stap p{margin:0;font-size:17px;line-height:1.7}
@media (max-width:640px){.stap{grid-template-columns:1fr;padding:22px 20px}.stap .n{grid-row:auto;font-size:42px}}
/* vragen */
.vragen{display:flex;flex-direction:column;gap:10px}
.vragen details{background:var(--grijs)}.sectie.grijs .vragen details{background:#fff}
.vragen summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary h3{margin:0;font-size:18px;line-height:1.4;font-weight:700}
.vragen summary::after{content:"+";color:var(--groen);font-size:26px;line-height:1;font-weight:700}
.vragen details[open] summary::after{content:"–"}
.vragen details p{margin:0;padding:0 24px 22px;font-size:17px;line-height:1.7}
/* artikel */
.artikel{padding:56px 0 64px}
.artikel h2{margin:44px 0 12px;font-size:clamp(28px,4vw,36px);line-height:1.2}
.artikel h2:first-child{margin-top:0}
.artikel p{margin:0 0 16px}.artikel ul,.artikel ol{padding-left:24px;margin:0 0 16px}.artikel li{margin:6px 0}
.artikel li::marker{color:var(--groen2);font-weight:700}
.artikel table{border-collapse:collapse;width:100%;margin:18px 0;font-size:16px}
.artikel th,.artikel td{border-bottom:1px solid var(--lijn);padding:10px 8px;text-align:left;vertical-align:top}.artikel th{background:var(--grijs)}
.artikel caption{text-align:left;font-weight:700;padding-bottom:8px}.tabel{overflow-x:auto}
.artikel .vragen{margin-top:8px}
.bronnen{margin-top:40px;padding:18px 22px;background:var(--grijs);border-left:5px solid var(--groen);font-size:16px}
.bronnen .bk{font-weight:700;margin:0 0 6px}.bronnen ul{margin:0}
.kort{background:#fff;border:2px solid var(--groen);padding:18px 22px;margin:0 0 36px}.kort .bk{font-family:Anton,Impact,sans-serif;font-size:20px;margin:0 0 6px;color:var(--groen2)}.kort p{margin:0}.kort p a{color:var(--groen2);font-weight:700;text-decoration:underline;text-underline-offset:3px}.artikel a[target=_blank]:not(.bronnen a)::after{content:" \2197";font-size:.8em}
.datum{font-size:15px;color:var(--sub);margin-top:18px}
.leesook{background:var(--grijs);padding:64px 0}
.leesook h2{margin:0 0 24px;font-size:clamp(28px,4vw,36px)}
.leesook .kaarten,.sectie .kaarten{margin:0;top:0}
.linklijst{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px 28px}.linklijst li{border-bottom:1px solid var(--lijn);padding:10px 0}.linklijst a{font-weight:600;color:var(--donker);text-decoration:none}.linklijst a:hover{color:var(--groen2)}
.kaarten.zes{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* cta + footer */
.cta{background:var(--groen);padding:52px 0}
.cta .w{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.cta .ct{margin:0;font-family:Anton,Impact,sans-serif;font-size:clamp(28px,4vw,40px);line-height:1.15;color:var(--donker)}
.cta a{background:var(--donker);color:#fff;padding:18px 28px;font-size:19px;font-weight:700;text-decoration:none}.cta a:hover{background:#000;color:#fff}
.voet{background:var(--donker);color:#d4d6d2;padding:56px 0 28px;font-size:16px}
.voet .rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.voet .kol{display:flex;flex-direction:column;gap:6px}.voet a{color:#d4d6d2;text-decoration:none}.voet a:hover{color:#fff}
.voet .vk{font-weight:700;color:#fff}.voet .merk{font-family:Anton,Impact,sans-serif;font-size:26px;color:#fff;margin-bottom:4px}.voet .merk span{color:var(--groen)}
.voet .onder{margin-top:36px;padding-top:18px;border-top:1px solid #3a3c38;font-size:13px}
@media (max-width:900px){.kop .w{gap:10px 16px}.kop .knop{order:2;margin-left:auto}.kop .menu{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:20px;padding-bottom:4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}.kop .menu::-webkit-scrollbar{display:none}.menu a{white-space:nowrap}}
@media (max-width:640px){.hero.sub.foto{background-image:linear-gradient(180deg,rgba(93,115,128,.55) 0%,rgba(93,115,128,.8) 55%,rgba(93,115,128,.95) 100%),var(--foto-m);background-position:right center}.hero.home{background-image:linear-gradient(180deg,rgba(93,115,128,.3) 0%,rgba(93,115,128,.55) 40%,rgba(93,115,128,.9) 85%,#5d7380 100%),image-set(url(/img/hero-s1-960.webp) 1x,url(/img/hero-s1-1600.webp) 2x);background-size:100% 380px,auto 380px;background-position:0 0,right -20px top 0;background-repeat:no-repeat}.kaart .beeld{height:84px;padding:14px 20px}.kaart .beeld span{font-size:24px}.kaart .beeld.met-foto{padding:0}.kaart .beeld.met-foto span{padding:24px 20px 12px}.hero .intro{font-size:17px}.hero.home{padding-top:48px}.kaarten{top:60px}.sectie.na-kaarten{padding-top:130px}.sectie{padding:60px 0}.btn{width:100%;justify-content:center}.plaat{width:100%}.logo .l2{font-size:30px}}
