:root{
  --green:#1E3A34; --green-d:#16302A; --green-l:#244C43;
  --accent:#B5532A; --accent-d:#99421F;
  --bg:#EBE1CE; --paper:#F2EBDD; --card:#FAF6EC;
  --ink:#211C17; --ink-soft:#4a4335; --muted:#6E6354; --hair:#E4DAC4;
  --display:'Newsreader', Georgia, serif;
  --body:'Source Sans 3', system-ui, sans-serif;
  --maxw:1080px;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--display); color:var(--green); margin:0; font-weight:600; line-height:1.12; }
a{ color:var(--accent-d); }
img{ max-width:100%; }

.wrap{ max-width:var(--maxw); width:100%; margin:0 auto; padding-inline:clamp(16px,4vw,28px); }
.smal{ max-width:720px; }
.midden{ margin-inline:auto; }

/* ===== kop + navigatie ===== */
.kop{ background:var(--green); color:var(--paper); position:sticky; top:0; z-index:40; }
.kop-in{ max-width:var(--maxw); margin:0 auto; padding:12px clamp(16px,4vw,28px);
  display:flex; align-items:center; gap:18px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--paper); flex:0 0 auto; }
.brand svg{ width:42px; height:auto; flex:0 0 auto; }
.brand .n{ font-family:var(--display); font-weight:600; font-size:20px; line-height:1; }
.brand .s{ display:block; margin-top:4px; font-size:9.5px; letter-spacing:.17em;
  text-transform:uppercase; color:#C9A98F; font-weight:600; }
.nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav a{ color:#E7DCC6; text-decoration:none; font-weight:600; font-size:15px; padding:8px 12px;
  border-radius:8px; }
.nav a:hover{ color:var(--paper); background:rgba(242,235,221,.08); }
.nav a.actief{ color:var(--paper); }
.nav .btn{ margin-left:6px; }
.hamburger{ display:none; margin-left:auto; background:transparent; border:1.5px solid rgba(242,235,221,.35);
  border-radius:9px; width:44px; height:40px; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.hamburger svg{ width:22px; height:22px; stroke:var(--paper); stroke-width:2; fill:none; }
.strip{ line-height:0; background:var(--green-d); }
.strip svg{ display:block; width:100%; height:22px; }

/* ===== knoppen ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:16px; color:var(--paper); background:var(--accent);
  border:none; border-radius:999px; padding:12px 24px; cursor:pointer; text-decoration:none; text-align:center;
  transition:transform .12s ease, filter .12s ease; -webkit-appearance:none; }
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn:focus-visible{ outline:3px solid var(--paper); outline-offset:2px; }
.btn-2{ background:transparent; color:var(--paper); border:1.5px solid rgba(242,235,221,.45); }
.btn-2:hover{ background:rgba(242,235,221,.1); filter:none; }
.btn-licht{ background:var(--card); color:var(--accent-d); }
.btn-omlijnd{ background:transparent; color:var(--accent-d); border:1.5px solid var(--accent); }
.btn-omlijnd:hover{ background:rgba(181,83,42,.08); filter:none; }
.btn-groot{ font-size:17px; padding:15px 32px; }
.btn:focus-visible{ outline-offset:2px; }

/* ===== secties ===== */
main{ display:block; }
.sectie{ padding:clamp(44px,7vw,80px) 0; }
.sectie-groen{ background:var(--green); color:var(--paper); }
.sectie-groen h1,.sectie-groen h2,.sectie-groen h3{ color:var(--paper); }
/* kaarten in een groene sectie houden hun eigen (leesbare) kleuren */
.sectie-groen .kaart h1,.sectie-groen .kaart h2,.sectie-groen .kaart h3{ color:var(--green); }
.sectie-groen .kaart p{ color:var(--ink-soft); }
.sectie-groen .stap h3{ color:var(--green); }
.sectie-groen .stap p{ color:var(--ink-soft); }
.sectie-paper{ background:var(--paper); }
.kop-blok{ max-width:720px; margin-bottom:34px; }
.kop-blok.midden{ margin-inline:auto; text-align:center; }
.kicker{ font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-d);
  font-weight:700; margin:0 0 12px; }
.sectie-groen .kicker{ color:#E6A886; }
.eyebrow-lijn{ display:inline-block; }
h1.groot{ font-size:clamp(32px,6.4vw,52px); letter-spacing:-.015em; line-height:1.03; margin:0 0 18px; }
h2.mid{ font-size:clamp(25px,4.4vw,38px); letter-spacing:-.01em; margin:0 0 14px; }
h3.klein{ font-size:20px; margin:0 0 8px; }
.lead{ font-size:clamp(17px,2.1vw,20px); color:var(--ink-soft); margin:0 0 22px; line-height:1.55; }
.sectie-groen .lead{ color:#D7CDB9; }
p{ margin:0 0 16px; }
.prose p{ color:var(--ink-soft); }
.prose p:last-child{ margin-bottom:0; }

/* ===== hero ===== */
.hero{ padding:clamp(44px,7vw,86px) 0 clamp(40px,6vw,64px); }
.hero .lead{ max-width:640px; }
.hero-acties{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; margin-top:8px; }
.hero-sub{ margin-top:18px; font-size:14.5px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.hero-sub .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(181,83,42,.5); animation:puls 2.6s ease-out infinite; flex:0 0 auto; }
@keyframes puls{ 0%{ box-shadow:0 0 0 0 rgba(181,83,42,.5);} 70%{ box-shadow:0 0 0 8px rgba(181,83,42,0);} 100%{ box-shadow:0 0 0 0 rgba(181,83,42,0);} }

/* ===== raster + feature-kaarten ===== */
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.kaart{ background:var(--card); border:1px solid var(--hair); border-radius:16px; padding:26px 24px;
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 18px 40px -34px rgba(0,0,0,.5); }
.kaart h3{ font-size:19px; margin:0 0 8px; }
.kaart p{ margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.55; }
.ico{ width:46px; height:46px; border-radius:12px; background:rgba(30,58,52,.08);
  display:flex; align-items:center; justify-content:center; margin-bottom:15px; }
.ico svg{ width:24px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.8; }
.ico.gevuld svg{ fill:var(--accent); stroke:none; }

/* ===== stappen ===== */
.stappen{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:st; }
.stap{ background:var(--card); border:1px solid var(--hair); border-radius:16px; padding:24px 22px; position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 18px 40px -34px rgba(0,0,0,.5); }
.stap .nr{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--paper); background:var(--green);
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.stap h3{ font-size:18px; margin:0 0 7px; }
.stap p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.55; }

/* ===== lijst met vinkjes ===== */
.check-lijst{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.check-lijst li{ position:relative; padding-left:32px; color:var(--ink-soft); font-size:16px; line-height:1.5; }
.check-lijst li::before{ content:""; position:absolute; left:0; top:2px; width:21px; height:21px; border-radius:50%;
  background:rgba(30,58,52,.1); }
.check-lijst li::after{ content:""; position:absolute; left:6.5px; top:7px; width:8px; height:4.5px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg); }
.sectie-groen .check-lijst li{ color:#E7DCC6; }
.sectie-groen .check-lijst li::before{ background:rgba(242,235,221,.16); }
.sectie-groen .check-lijst li::after{ border-color:var(--paper); }

/* ===== prijskaart ===== */
.prijs-kaart{ max-width:460px; margin-inline:auto; background:var(--card); border:1px solid var(--hair);
  border-radius:20px; padding:34px 32px; text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 30px 60px -40px rgba(0,0,0,.6); }
.prijs-badge{ display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--accent-d); background:rgba(181,83,42,.12); border-radius:999px; padding:5px 14px; margin-bottom:16px; }
.prijs-bedrag{ font-family:var(--display); color:var(--green); font-weight:600; line-height:1; }
.prijs-bedrag .euro{ font-size:34px; vertical-align:super; }
.prijs-bedrag .getal{ font-size:64px; }
.prijs-bedrag .per-jaar{ font-family:var(--body); font-size:30px; font-weight:700; color:var(--muted); margin-left:6px; }
.prijs-per{ color:var(--muted); font-size:16px; margin:8px 0 0; }
.prijs-kaart .btn{ margin-top:22px; }
.prijs-kaart .check-lijst{ text-align:left; margin-top:24px; }

/* ===== wachtlijst-formulier ===== */
.wl-kaart{ max-width:580px; margin-inline:auto; }
.wl-kaart h2{ font-size:clamp(21px,3.4vw,27px); margin:0 0 6px; }
.wl-kaart .card-sub{ color:var(--muted); margin:0 0 20px; font-size:16px; }
.velden{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:560px){ .velden{ grid-template-columns:1fr; } }
.veld{ margin-bottom:15px; }
.veld label{ display:block; font-weight:600; font-size:14.5px; margin:0 0 6px; color:var(--ink); }
.veld input{ width:100%; font-family:var(--body); font-size:16.5px; color:var(--ink); background:#fff;
  border:1.5px solid var(--hair); border-radius:11px; padding:12px 14px; transition:border-color .12s ease, box-shadow .12s ease; }
.veld input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(30,58,52,.13); }
.veld input.invalid{ border-color:#9A4B33; background:#fdf5f2; }
.fout{ color:#9A4B33; font-size:13.5px; margin:6px 0 0; }
.form-fout{ margin-top:14px; text-align:center; }
.privacy-note{ color:var(--muted); font-size:13px; text-align:center; margin:13px 0 0; line-height:1.45; }
.teller{ display:flex; align-items:center; justify-content:center; gap:9px; color:var(--muted); font-size:14.5px; margin:2px 0 16px; }
.teller strong{ color:var(--accent-d); font-weight:700; font-variant-numeric:tabular-nums; }
.teller .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(181,83,42,.5); animation:puls 2.6s ease-out infinite; }
.succes-kaart{ text-align:center; }
.succes-kaart .check{ width:54px; height:54px; margin:0 auto 14px; border-radius:50%; background:var(--green);
  color:var(--paper); font-size:28px; line-height:54px; }
.succes-kaart h2{ margin:0 0 8px; }
.succes-kaart p{ color:var(--muted); margin:0; }
/* uitleg-blok waarom wachtlijst */
.waarom-wachtlijst{ background:var(--card); border:1px solid var(--hair); border-left:3px solid var(--accent);
  border-radius:12px; padding:16px 18px; margin-top:22px; }
.waarom-wachtlijst p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.55; }
.waarom-wachtlijst b{ color:var(--green); }

/* ===== FAQ ===== */
.faq{ max-width:760px; margin-inline:auto; }
.faq details{ background:var(--card); border:1px solid var(--hair); border-radius:12px; margin-bottom:12px;
  overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:18px 22px; font-weight:600; font-size:17px; color:var(--green);
  display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--display); font-size:24px; color:var(--accent); line-height:1;
  flex:0 0 auto; transition:transform .18s ease; }
.faq details[open] summary::after{ content:"–"; }
.faq .antwoord{ padding:0 22px 20px; color:var(--ink-soft); font-size:16px; line-height:1.6; }
.faq .antwoord p{ margin:0 0 12px; } .faq .antwoord p:last-child{ margin:0; }

/* ===== CTA-band ===== */
.cta-band{ background:var(--green); color:var(--paper); border-radius:20px; padding:clamp(30px,5vw,48px);
  text-align:center; }
.cta-band h2{ color:var(--paper); font-size:clamp(24px,3.6vw,34px); margin:0 0 12px; }
.cta-band p{ color:#D7CDB9; max-width:560px; margin:0 auto 22px; font-size:17px; }

/* ===== accent-blok / quote ===== */
.accent-blok{ border-left:3px solid var(--accent); padding:4px 0 4px 18px; color:var(--muted); font-size:16px;
  line-height:1.6; }
.accent-blok b{ color:var(--ink); font-weight:600; }
.sectie-groen .accent-blok{ color:#D7CDB9; } .sectie-groen .accent-blok b{ color:var(--paper); }

/* ===== twee-koloms uitleg (tekst + kaart) ===== */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,5vw,56px); align-items:center; }
.split.omgekeerd .split-tekst{ order:2; }

/* ===== voet ===== */
.voetstrip{ line-height:0; margin-top:auto; }
.voetstrip svg{ display:block; width:100%; height:28px; }
.voet{ background:var(--green-d); color:#C9BEA8; }
.voet-in{ max-width:var(--maxw); margin:0 auto; padding:40px clamp(16px,4vw,28px) 20px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; }
.voet .merk .n{ font-family:var(--display); color:var(--paper); font-weight:600; font-size:19px; }
.voet .merk p{ margin:10px 0 0; font-size:14px; color:#A9A08C; max-width:34ch; }
.voet h3{ color:var(--paper); font-size:14px; letter-spacing:.04em; margin:0 0 12px; font-family:var(--body);
  font-weight:700; text-transform:uppercase; }
.voet ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.voet a{ color:#C9BEA8; text-decoration:none; font-size:15px; }
.voet a:hover{ color:var(--paper); text-decoration:underline; text-underline-offset:2px; }
.voet-onder{ border-top:1px solid rgba(242,235,221,.12); }
.voet-onder .wrap{ padding:16px clamp(16px,4vw,28px); display:flex; flex-wrap:wrap; gap:10px 18px;
  justify-content:space-between; align-items:center; }
.voet-onder p{ margin:0; font-size:13px; color:#9A9080; }

/* ===== responsive ===== */
@media (max-width:860px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .split.omgekeerd .split-tekst{ order:0; }
  .voet-in{ grid-template-columns:1fr 1fr; }
  .voet .merk{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .nav{ position:absolute; top:100%; left:0; right:0; background:var(--green-d); flex-direction:column;
    align-items:stretch; gap:2px; padding:10px clamp(16px,4vw,28px) 16px; margin:0;
    border-top:1px solid rgba(242,235,221,.1); display:none; }
  .nav.open{ display:flex; }
  .nav a{ padding:12px 10px; font-size:16px; }
  .nav .btn{ margin:8px 0 0; }
  .hamburger{ display:inline-flex; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .voet-in{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn,.faq summary::after{ transition:none; }
  .hero-sub .dot{ animation:none; }
}