:root { --blauw: #1d3557; --mint: #2a9d8f; --licht: #f1f5f9; --inkt: #1e293b; --grijs: #64748b; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.65 "Helvetica Neue", Arial, sans-serif; color: var(--inkt); }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
h1, h2, h3 { color: var(--blauw); line-height: 1.2; }
a { color: var(--mint); }
.kop { border-bottom: 1px solid #e2e8f0; background: #fff; }
.kop-in { display: flex; align-items: center; gap: 24px; min-height: 72px; flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 1.4rem; color: var(--blauw); text-decoration: none; margin: 0; }
.logo span { color: var(--mint); }
nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
nav a { color: var(--inkt); text-decoration: none; font-size: .95rem; }
nav a[aria-current] { color: var(--mint); font-weight: 700; }
.knop { display: inline-block; background: var(--mint); color: #fff; padding: .65em 1.3em; border-radius: 6px; text-decoration: none; font-weight: 700; border: 0; cursor: pointer; font-size: .95rem; }
.held { background: linear-gradient(90deg, rgba(29,53,87,.94) 40%, rgba(29,53,87,.45)), var(--foto, none) center/cover no-repeat, var(--blauw); color: #fff; padding: 96px 0; }
.held h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); max-width: 18ch; margin: 0 0 .4em; }
.held p { max-width: 55ch; font-size: 1.15rem; opacity: .9; }
.paginakop { background: var(--licht); padding: 48px 0 36px; }
.paginakop h1 { margin: 0 0 .3em; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.intro { color: var(--grijs); font-size: 1.15rem; margin: 0; }
section.wrap { padding: 40px 0; }
.tekst { max-width: 740px; }
.raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kaart { display: block; padding: 22px; border: 1px solid #e2e8f0; border-radius: 10px; text-decoration: none; color: var(--inkt); }
.kaart:hover { border-color: var(--mint); }
.kaart h3 { margin: 0 0 .4em; }
.kaart p { margin: 0; color: var(--grijs); font-size: .95rem; }
.twee { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; }
.post { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.post time { color: var(--grijs); font-size: .9rem; }
.post h2 { margin: .2em 0; font-size: 1.3rem; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
input, textarea { font: inherit; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
textarea { min-height: 120px; }
.voet { background: var(--blauw); color: #cbd5e1; margin-top: 60px; font-size: .92rem; }
.voet-in { display: grid; gap: 28px; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 44px 0 20px; }
.voet .logo { color: #fff; }
.voet h3 { color: #fff; font-size: 1rem; margin: 0 0 .6em; }
.voet a { display: block; color: #cbd5e1; text-decoration: none; margin-bottom: 4px; }
.klein { font-size: .8rem; opacity: .7; padding-bottom: 24px; }
@media (max-width: 760px) { .twee, .voet-in { grid-template-columns: 1fr; } nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; } }
.paginakop.met-foto { background: linear-gradient(90deg, rgba(241,245,249,.97) 45%, rgba(241,245,249,.5)), var(--foto) center/cover no-repeat; padding: 72px 0 56px; }
.foto { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.twee { align-items: center; }