@font-face { font-family:'Bricolage'; font-weight:200 800; font-display:swap; src:url('/assets/fonts/bricolage.woff2') format('woff2'); }
:root { --papier:#FAF8F2; --inkt:#161A17; --dof:#57605A; --vaag:#8B948C; --groen:#129C57; --groen-diep:#0B7A42; --wash:#E7F4EC; --rand:#E4E2D8; --kaart:#FFFFFF; --schaduw:0 24px 48px -28px rgba(22,26,23,.16); }
@media (prefers-color-scheme: dark) { :root { --papier:#121511; --inkt:#EDF2ED; --dof:#A7B1A8; --vaag:#737C74; --groen:#2FBE74; --groen-diep:#42CC85; --wash:#1A2A1F; --rand:#282D28; --kaart:#191D19; --schaduw:0 24px 48px -28px rgba(0,0,0,.55); } }
@view-transition { navigation: auto; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--papier); color:var(--inkt); font-family:'Bricolage',system-ui,sans-serif; font-optical-sizing:auto; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--groen-diep); }
.vlak { max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }

header.top { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:24px 0 0; }
.logo { display:inline-flex; flex-direction:column; text-decoration:none; color:var(--inkt); line-height:1; }
.logo-fix { font-weight:800; font-size:26px; letter-spacing:-0.03em; }
.logo-fix i { font-style:normal; color:var(--groen); }
.logo-online { font-weight:600; font-size:10px; text-transform:uppercase; color:var(--vaag); letter-spacing:.891em; margin:5px 0 0 1px; }
.tag { font-size:13.5px; color:var(--vaag); }
@media (max-width:560px){ .tag { display:none; } }

.hero { padding:clamp(44px,8vw,96px) 0 0; }
h1 { font-weight:800; font-size:clamp(46px,8.6vw,104px); line-height:.98; letter-spacing:-0.035em; margin:0 0 clamp(18px,2.5vw,28px); }
h1 .v { color:var(--groen); }
.lede { font-size:clamp(17px,1.6vw,20px); color:var(--dof); margin:0; max-width:58ch; }

.zoekbalk { display:flex; align-items:center; gap:12px; margin-top:clamp(28px,4vw,44px); padding:0 22px; height:60px; border-radius:999px; border:1.5px solid var(--rand); background:var(--kaart); box-shadow:var(--schaduw); transition:border-color .15s; }
.zoekbalk:focus-within { border-color:var(--groen); }
.zoekbalk svg { flex-shrink:0; color:var(--vaag); }
.zoekbalk input { flex:1; min-width:0; border:none; background:none; font:inherit; font-size:17px; color:var(--inkt); outline:none; }
.zoekbalk input::placeholder { color:var(--vaag); }
.zoekbalk kbd { font:inherit; font-size:12.5px; font-weight:600; color:var(--vaag); border:1px solid var(--rand); border-radius:7px; padding:2px 9px; }
@media (hover:none){ .zoekbalk kbd { display:none; } }

.filterbalk { position:sticky; top:0; z-index:10; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:14px 0; margin-top:clamp(26px,4vw,40px); background:color-mix(in srgb, var(--papier) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.filterbalk::-webkit-scrollbar { display:none; }
.pil { font:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:999px; border:1.5px solid var(--rand); background:var(--kaart); color:var(--dof); cursor:pointer; white-space:nowrap; transition:border-color .15s, background .15s, color .15s; }
.pil b { font-weight:600; font-size:12px; color:var(--vaag); margin-left:5px; }
.pil:hover { border-color:var(--vaag); color:var(--inkt); }
.pil.aan { background:var(--inkt); border-color:var(--inkt); color:var(--papier); }
.pil.aan b { color:color-mix(in srgb, var(--papier) 55%, transparent); }

.cat { margin-top:clamp(36px,5vw,52px); }
.cat h2 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--vaag); margin:0 0 4px; }
.cat h2 span { letter-spacing:0; }
.rij { display:flex; align-items:center; gap:18px; padding:19px 4px; border-top:1px solid var(--rand); text-decoration:none; color:var(--inkt); }
.rij:last-child { border-bottom:1px solid var(--rand); }
.rij-t { font-size:clamp(19px,2.3vw,26px); font-weight:700; letter-spacing:-0.018em; line-height:1.25; transition:transform .18s cubic-bezier(.2,.8,.2,1); }
.rij-pijl { margin-left:auto; flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--rand); display:grid; place-items:center; color:var(--groen); font-size:17px; transition:background .18s, border-color .18s, color .18s, transform .18s cubic-bezier(.2,.8,.2,1); }
.rij:hover .rij-t, .rij:focus-visible .rij-t { transform:translateX(8px); }
.rij:hover .rij-pijl, .rij:focus-visible .rij-pijl { background:var(--groen); border-color:var(--groen); color:#fff; transform:translateX(2px); }
.rij:focus-visible { outline:2px solid var(--groen); outline-offset:2px; border-radius:10px; }
.leeg { margin-top:48px; color:var(--dof); font-size:17px; }

footer.voet { margin-top:clamp(72px,10vw,130px); padding-bottom:44px; }
.voet-groot { font-weight:800; font-size:clamp(64px,13vw,168px); letter-spacing:-0.04em; line-height:.95; color:var(--rand); user-select:none; }
@supports (-webkit-text-stroke:1px black) { .voet-groot { color:transparent; -webkit-text-stroke:1.5px var(--rand); } }
.voet-groot .v { color:var(--groen); -webkit-text-stroke:0; }
.voet-regels { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--vaag); border-top:1px solid var(--rand); margin-top:18px; padding-top:16px; }

.crumb { display:inline-flex; align-items:center; gap:8px; margin-top:34px; font-size:14.5px; font-weight:600; color:var(--dof); text-decoration:none; }
.crumb:hover { color:var(--groen-diep); }
.fix-kop { padding:clamp(18px,3vw,32px) 0 clamp(30px,4.5vw,52px); }
.chip { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--groen-diep); background:var(--wash); border-radius:999px; padding:5px 13px; margin-bottom:18px; }
.fix-kop h1 { font-size:clamp(34px,5vw,60px); line-height:1.02; letter-spacing:-0.03em; margin:0 0 16px; max-width:22ch; }
.fix-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,440px); gap:clamp(36px,6vw,84px); align-items:start; padding-bottom:20px; }
@media (max-width:960px){ .fix-grid { grid-template-columns:1fr; } }
.fix-grid.enkel { grid-template-columns:minmax(0,720px); }
.kolomkop { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--vaag); margin:0 0 20px; }

.stappen { counter-reset:s; list-style:none; margin:0; padding:0; }
.stappen li { counter-increment:s; position:relative; padding:0 0 28px 52px; }
.stappen li:last-child { padding-bottom:0; }
.stappen li::before { content:counter(s); position:absolute; left:0; top:-2px; width:34px; height:34px; border-radius:50%; background:var(--wash); color:var(--groen-diep); font-weight:700; font-size:15px; display:grid; place-items:center; }
.stappen li:not(:last-child)::after { content:''; position:absolute; left:16.5px; top:36px; bottom:6px; width:1.5px; background:var(--rand); }
.stappen a { font-weight:600; }

.brief-paneel { position:sticky; top:20px; }
@media (max-width:960px){ .brief-paneel { position:static; margin-top:14px; } }
.brief-sub { margin:-12px 0 18px; color:var(--dof); font-size:14.5px; }
.velden { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
@media (max-width:560px){ .velden { grid-template-columns:1fr; } }
.velden label { display:grid; gap:5px; font-size:12px; font-weight:600; color:var(--dof); }
.velden input { font:inherit; font-size:15px; padding:11px 13px; border:1.5px solid var(--rand); border-radius:10px; background:var(--kaart); color:var(--inkt); transition:border-color .15s; }
.velden input:focus { outline:none; border-color:var(--groen); }
.document { background:var(--kaart); border:1px solid var(--rand); border-radius:18px; padding:clamp(20px,3vw,30px); font-size:15px; line-height:1.75; white-space:pre-wrap; overflow-wrap:break-word; box-shadow:var(--schaduw); }
.gat { background:var(--wash); color:var(--groen-diep); border:1px dashed color-mix(in srgb, var(--groen) 45%, transparent); border-radius:7px; padding:1px 8px; font-weight:600; font-size:13.5px; white-space:nowrap; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.gat.vol { background:transparent; border-color:transparent; padding:0; font-size:inherit; white-space:inherit; color:var(--groen-diep); animation:vullen .35s ease; }
@keyframes vullen { from { background:var(--wash); } }
.knop { width:100%; margin-top:16px; font:inherit; font-weight:700; font-size:16px; border:none; border-radius:12px; padding:15px 22px; cursor:pointer; background:var(--groen); color:#fff; transition:transform .12s, filter .12s; }
.knop:hover { filter:brightness(1.06); }
.knop:active { transform:scale(.98); }
.kopieer-hint { font-size:13px; color:var(--vaag); margin-top:10px; text-align:center; }

.vink-laag { position:fixed; inset:0; display:grid; place-items:center; background:color-mix(in srgb, var(--papier) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .18s; z-index:50; }
.vink-laag.zien { opacity:1; }
.vink-kaart { text-align:center; display:grid; gap:10px; justify-items:center; }
.vink-rond { width:116px; height:116px; border-radius:50%; background:var(--groen); display:grid; place-items:center; animation:plop .4s cubic-bezier(.2,1.4,.4,1); }
.vink-rond svg { width:58px; height:58px; }
.vink-rond path { stroke-dasharray:60; stroke-dashoffset:60; animation:trek .45s .15s ease forwards; }
.vink-kaart b { font-size:32px; font-weight:800; letter-spacing:-0.02em; }
.vink-kaart span { color:var(--dof); font-size:15px; }
@keyframes plop { from { transform:scale(.4); } }
@keyframes trek { to { stroke-dashoffset:0; } }

@keyframes rijs { from { opacity:0; transform:translateY(18px); } }
.hero h1 { animation:rijs .55s cubic-bezier(.2,.8,.2,1) backwards; }
.hero .lede { animation:rijs .55s .07s cubic-bezier(.2,.8,.2,1) backwards; }
.zoekbalk { animation:rijs .55s .14s cubic-bezier(.2,.8,.2,1) backwards; }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation:none !important; transition:none !important; } .vink-rond path { stroke-dashoffset:0; } html { scroll-behavior:auto; } }