:root{
  --merk:#2f6f6b;
  --merk-diep:#1d4a47;
  --inkt:#15201f;
  --zacht:#5b6b69;
  --papier:#fbfaf7;
  --vlak:#f2efe9;
  --lijn:#e2ded4;
  --rond:14px;
  --schrift:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --schrift-tekst:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--schrift-tekst);font-size:17px;line-height:1.65;letter-spacing:.005em}
h1,h2,h3{font-family:var(--schrift);font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,4.2vw,3.2rem)}
h2{font-size:clamp(1.5rem,2.7vw,2.15rem)}
h3{font-size:1.12rem;line-height:1.3}
p{margin:0 0 1em}
a{color:var(--merk-diep)}
.binnen{max-width:1120px;margin:0 auto;padding:0 24px}
.binnen.smal>*{max-width:760px}
.overslaan{position:absolute;left:-9999px}
.overslaan:focus{left:12px;top:12px;background:#fff;padding:10px 14px;z-index:9;border-radius:8px}

/* --- kop --- */
.kop{border-bottom:1px solid var(--lijn);background:color-mix(in srgb,var(--papier) 88%,#fff);
  position:sticky;top:0;z-index:8;backdrop-filter:saturate(1.4) blur(8px)}
.kopbalk{display:flex;align-items:center;gap:18px;min-height:68px;flex-wrap:wrap}
.merk{font-family:var(--schrift);font-size:1.24rem;font-weight:600;letter-spacing:-.02em;
  color:var(--inkt);text-decoration:none;margin-right:auto}
.kop nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.kop nav a{color:var(--zacht);text-decoration:none;font-size:.92rem;padding:6px 0;
  border-bottom:2px solid transparent}
.kop nav a:hover{color:var(--inkt)}
.kop nav a.hier{color:var(--inkt);border-bottom-color:var(--merk)}
.kop nav a.knop{color:#fff;border-bottom:0}
.menuvink,.menuknop{display:none}

/* --- de kop van de site --- */
.paneel{padding:clamp(44px,6vw,84px) 0 clamp(36px,5vw,64px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--merk) 9%,var(--papier)),var(--papier))}
.paneel-raster{display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.paneel h1{max-width:15ch}
.paneel .leid{max-width:46ch}
.onderschrift{margin:12px 0 0;font-size:.82rem;color:var(--zacht);text-align:center}
.hero{padding:clamp(48px,7vw,92px) 0 clamp(32px,4vw,56px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--merk) 9%,var(--papier)),var(--papier))}
.hero h1{max-width:19ch}
.hero .leid{max-width:56ch}
.bovenkop{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--merk-diep);
  font-weight:700;margin:0 0 14px}
.leid{font-size:clamp(1.04rem,1.6vw,1.22rem);color:var(--zacht)}
.knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.knop{display:inline-block;background:var(--merk-diep);color:#fff;text-decoration:none;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:.97rem}
.knop:hover{background:var(--inkt)}
.knop-zacht{background:transparent;color:var(--inkt);border:1px solid var(--lijn)}
.knop-zacht:hover{background:var(--vlak);color:var(--inkt)}
.knop-klein{padding:8px 16px;font-size:.88rem}

/* --- strip --- */
.strip{background:var(--merk-diep);color:#fff;padding:18px 0;font-size:.95rem}
.strip p{margin:0;max-width:92ch}
.strip strong{color:#fff}

/* --- blokken --- */
.blok{padding:clamp(44px,6vw,80px) 0}
.blok.rustig{background:var(--vlak)}
.blok h2{max-width:26ch}
.uitleg-raster{display:grid;gap:clamp(26px,4vw,52px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.uitleg-raster p{color:var(--zacht)}
.uitleg-raster h2{max-width:20ch}
.raster{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:28px}
.raster.breed{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.kaart{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--rond);padding:24px}
.blok.rustig .kaart{background:#fff}
.kaart h3{margin-bottom:.35em}
.kaart p{margin:0;color:var(--zacht);font-size:.97rem}
.kaart .merk{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--merk-diep);font-weight:700;margin:0 0 8px}

.stappen{counter-reset:stap;list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px}
.stappen li{counter-increment:stap;position:relative;padding:20px 24px 20px 68px;
  background:var(--papier);border:1px solid var(--lijn);border-radius:var(--rond)}
.blok.rustig .stappen li{background:#fff}
.stappen li::before{content:counter(stap);position:absolute;left:22px;top:20px;width:30px;height:30px;
  border-radius:50%;background:var(--merk);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:.9rem}
.stappen h3{margin-bottom:.25em}
.stappen p{margin:0;color:var(--zacht);font-size:.97rem}

.tegenover{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:26px}
.kolom{border:1px solid var(--lijn);border-radius:var(--rond);padding:24px;background:var(--papier)}
.blok.rustig .kolom{background:#fff}
.kolom.accent{background:color-mix(in srgb,var(--merk) 8%,var(--papier));border-color:transparent}
.kolom ul{margin:0;padding-left:1.15em;color:var(--zacht)}
.kolom li{margin:.5em 0}

.citaat{padding:clamp(40px,5vw,70px) 0;background:var(--merk-diep);color:#fff}
.citaat blockquote{margin:0;font-family:var(--schrift);font-size:clamp(1.3rem,2.5vw,1.9rem);
  line-height:1.35;letter-spacing:-.015em;max-width:24ch}
.citaat .bron{margin:14px 0 0;color:rgba(255,255,255,.72);font-size:.92rem}

.vragen{margin:26px 0 0}
.vragen dt{font-weight:650;margin-top:22px}
.vragen dd{margin:6px 0 0;color:var(--zacht)}

.cta{padding:clamp(44px,6vw,80px) 0;background:var(--vlak);border-top:1px solid var(--lijn)}
.cta p{color:var(--zacht)}

/* --- voet --- */
.voet{border-top:1px solid var(--lijn);padding:28px 0;font-size:.9rem;color:var(--zacht)}
.voetbalk{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.voet p{margin:0}
.voet a{color:var(--zacht);text-decoration:none}
.voet a:hover{color:var(--inkt)}

.kunst{display:block;width:100%;height:auto}
.kunst .vlak{fill:var(--papier);stroke:var(--lijn)}
.kunst .kaartje{fill:color-mix(in srgb,var(--vlak) 70%,var(--papier));stroke:var(--lijn)}
.kunst .kaartje.accent{fill:color-mix(in srgb,var(--merk) 12%,var(--papier));stroke:transparent}
.kunst .lijn{stroke:var(--lijn)}
.kunst .ring{fill:none;stroke:var(--lijn);stroke-dasharray:3 6}
.kunst .lijn-merk{fill:none;stroke:var(--merk);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kunst .lijn-flauw{fill:none;stroke:var(--lijn);stroke-width:2;stroke-linecap:round}
.kunst .punt{fill:var(--merk)}
.kunst .knoop{fill:var(--papier);stroke:var(--merk);stroke-width:2.4}
.kunst .stip{fill:var(--lijn)}
.kunst .stip-merk{fill:var(--merk)}
.kunst .stip-flauw{fill:var(--lijn)}
.kunst .balk-zacht{fill:color-mix(in srgb,var(--zacht) 40%,transparent)}
.kunst .balk-flauw{fill:var(--lijn)}
.kunst .balk-inkt{fill:color-mix(in srgb,var(--inkt) 78%,transparent)}
.kunst .balk-merk{fill:var(--merk)}
.kunst .etiket{fill:var(--zacht);font-family:var(--schrift-tekst);font-size:11px}
.kunst .etiket-groot{fill:var(--inkt);font-family:var(--schrift);font-size:17px;font-weight:600}
.kunst .teken{fill:var(--zacht);font-family:var(--schrift);font-size:22px}
.kunst-icoon{width:34px;height:34px;stroke:var(--merk);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.kunst-dashboard{max-width:560px}
.kunst-lus{max-width:440px;margin:0 auto}
.kunst-formule{max-width:560px}
.kunst-samenkomst{max-width:520px}

@media(max-width:860px){
  .paneel-raster,.uitleg-raster{grid-template-columns:minmax(0,1fr)}
  .paneel h1,.paneel .leid{max-width:none}
}
@media(max-width:720px){
  body{font-size:16px}
  .menuknop{display:block;cursor:pointer;font-size:.9rem;color:var(--zacht);
    border:1px solid var(--lijn);border-radius:999px;padding:6px 14px}
  .kop nav{display:none;width:100%;flex-direction:column;gap:2px;padding-bottom:12px;align-items:stretch}
  .menuvink:checked ~ nav{display:flex}
  .kop nav a{padding:8px 0;border-bottom:1px solid var(--lijn)}
  .kop nav a.knop{text-align:center;margin-top:8px;padding:11px 16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(prefers-reduced-motion:no-preference){
  a,.knop{transition:color .15s ease,background .15s ease,border-color .15s ease}
}