/* Regie Marketing: huisstijl (antraciet, wit, groen accent; Space Grotesk + Inter) */
:root{--ink:#12161C;--ink2:#1C222B;--grond:#F5F6F3;--wit:#FFFFFF;--lijn:#E1E4DE;--rand:#C9CEC6;--tekst2:#3B4650;--tekst3:#4A5560;--groen:#3FD0A8;--groen-donker:#0B6B58;--zacht:#B7C1BC;--kop:'Space Grotesk',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--grond);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--groen-donker)}a:hover{color:#084F41}
h1,h2,h3{font-family:var(--kop);letter-spacing:-.02em;line-height:1.1}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.knop{display:inline-block;border-radius:10px;padding:14px 20px;font-weight:600;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.knop:hover{color:#fff;background:#000}
.knop.licht{background:#fff;color:var(--ink);border-color:var(--rand)}
.knop.groen{background:var(--groen);border-color:var(--groen);color:#0E2A23}
.oog{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--groen-donker);margin:0 0 16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--kop);font-weight:700;font-size:20px}
.logo span{font-weight:500;color:var(--tekst3)}
/* kop */
.kop{background:#fff;border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.kop nav{display:flex;flex-wrap:wrap;gap:20px;align-items:center;font-size:15px}
.kop nav a{color:var(--ink);text-decoration:none}
.kop nav a.knop{color:#fff;padding:10px 16px}
.kop nav a.knop.licht{color:var(--ink)}
/* secties */
.held{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center;padding-top:88px;padding-bottom:72px}
.held h1{font-size:clamp(38px,5vw,60px);margin:0;font-weight:700}
.held p.lead{font-size:19px;color:var(--tekst2);margin:24px 0 0;max-width:560px;line-height:1.6}
.held .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.dagrapport{background:var(--ink);color:#E8ECEA;border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:12px}
.dagrapport .rij{display:flex;gap:12px;align-items:flex-start;background:var(--ink2);border-radius:12px;padding:13px 16px;font-size:15px}
.stip{width:10px;height:10px;border-radius:50%;background:var(--groen);flex:none;margin-top:6px}
.stip.oranje{background:#E8A74A}
.band{background:#fff;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.sectie{padding-top:84px;padding-bottom:84px}
.sectie h2{font-size:clamp(30px,3.5vw,40px);margin:0}
.sectie p.intro{font-size:18px;color:var(--tekst3);max-width:720px;margin:14px 0 0;line-height:1.6}
.raster{display:grid;gap:20px;margin-top:40px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stap{border:1px solid var(--lijn);border-radius:14px;padding:24px;background:#F9FAF8}
.stap b{font-family:var(--kop);color:var(--groen-donker)}
.stap h3{font-size:21px;margin:10px 0 8px}
.stap p{margin:0;color:var(--tekst2)}
.pakketten{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.pakket{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:16px}
.pakket.donker{background:var(--ink);color:#E8ECEA;border-color:var(--ink)}
.pakket.donker h3,.pakket.donker .prijs{color:#fff}
.pakket h3{font-size:24px;margin:0}
.pakket .sub{margin:6px 0 0;font-size:15px;color:var(--tekst3)}
.pakket.donker .sub,.pakket.donker .per{color:var(--zacht)}
.prijs{font-family:var(--kop);font-size:30px;font-weight:700}
.per{font-size:15px;font-weight:500;color:var(--tekst3)}
.pakket ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px}
.pakket li{display:flex;gap:10px}
.pakket li::before{content:"";flex:none;width:16px;height:9px;margin-top:5px;border-left:2px solid var(--groen-donker);border-bottom:2px solid var(--groen-donker);transform:rotate(-45deg)}
.pakket.donker li::before{border-color:var(--groen)}
.pakket .knop{margin-top:auto;text-align:center}
.label{background:var(--groen);color:#0E2A23;font-size:12px;font-weight:700;border-radius:999px;padding:5px 10px;white-space:nowrap}
.donkerblok{background:var(--ink);color:#E8ECEA}
.donkerblok h2{color:#fff}
.donkerblok .intro{color:var(--zacht)}
.tegel{background:var(--ink2);border-radius:14px;padding:22px}
.tegel h3{margin:0 0 8px;font-size:18px;color:#fff;font-family:Inter,sans-serif;letter-spacing:0}
.tegel p{margin:0;font-size:15px;color:var(--zacht)}
.formulier{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-size:14px;font-weight:600}
.veld input,.veld textarea,.veld select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--rand);border-radius:10px;background:#fff}
.voet{border-top:1px solid var(--lijn);background:#fff;font-size:14px;color:var(--tekst3)}
.voet .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:26px;padding-bottom:26px}
.voorbeeld{background:#FFF6E8;color:#7A4A06;font-size:13px;text-align:center;padding:8px 16px}
@media (max-width:600px){.kop nav{gap:12px}.held{padding-top:48px}}