:root{
  --inkt:#13272e;
  --inkt-zacht:#4d6670;
  --teal:#1f7a8c;
  --teal-diep:#13555f;
  --papier:#fbf9f6;
  --wit:#fff;
  --lijn:#e4ddd3;
  --lijn-zacht:#efe9e1;
  --groen:#3f7d4e;
  --oker:#c98a2e;
  --maat:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.binnen{max-width:var(--maat);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(34px,5vw,54px)}
h2{font-size:clamp(26px,3.2vw,36px)}
h3{font-size:19px;font-family:Inter,sans-serif;font-weight:600;letter-spacing:0}
p{margin:0 0 1em}
a{color:var(--teal-diep)}
.klein{font-size:14.5px;color:var(--inkt-zacht);line-height:1.6}
.lood{font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--inkt-zacht);max-width:62ch}

/* kop */
.kop{background:var(--papier);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:20}
.kop-binnen{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.merk{display:flex;align-items:center}
.menu{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.menu a{color:var(--inkt);text-decoration:none;font-size:15.5px;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--lijn)}
.menu a.hier{border-bottom-color:var(--teal)}
.knop{
  display:inline-block;background:var(--teal);color:#fff !important;text-decoration:none;
  padding:13px 22px;border-radius:7px;font-weight:600;font-size:16px;border:1px solid var(--teal);
}
.knop:hover{background:var(--teal-diep);border-color:var(--teal-diep)}
.knop-klein{padding:9px 16px;font-size:15px;border-radius:6px}
.knop-rand{background:transparent;color:var(--teal-diep) !important;border-color:var(--lijn)}
.knop-rand:hover{background:var(--wit);border-color:var(--teal)}

/* secties */
section{padding:72px 0;border-bottom:1px solid var(--lijn-zacht)}
section.strak{padding:52px 0}
section.wit{background:var(--wit)}
.sectiekop{max-width:70ch;margin-bottom:38px}
.sectiekop p{margin-top:12px}
.etiket{
  display:inline-block;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal-diep);font-weight:600;margin-bottom:14px;
}

/* hero */
.hero{padding:84px 0 64px}
.hero h1{max-width:17ch}
.hero .lood{margin-top:20px}
.hero-acties{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center}
.hero-noot{font-size:14.5px;color:var(--inkt-zacht);margin:0}

/* schermbeeld */
.scherm{border:1px solid var(--lijn);border-radius:10px;overflow:hidden;background:var(--wit);box-shadow:0 1px 2px rgba(19,39,46,.04),0 12px 28px -18px rgba(19,39,46,.35)}
.scherm-balk{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--lijn-zacht);background:#f6f2ec}
.scherm-balk i{width:9px;height:9px;border-radius:50%;background:#d9d0c4;display:block}
.scherm img{display:block;width:100%;height:auto}
figure{margin:0}
figcaption{font-size:14px;color:var(--inkt-zacht);margin-top:10px}

/* roosters */
.drie{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px;align-items:center}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:26px}
.kaart h3{margin-bottom:8px}
.kaart p{margin:0;color:var(--inkt-zacht);font-size:16px}

/* lijsten met functies */
.rubriek{padding:30px 0;border-top:1px solid var(--lijn-zacht);display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:34px}
.rubriek h3{font-size:20px;font-family:Fraunces,Georgia,serif;font-weight:600}
.rubriek ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.rubriek li{padding-left:26px;position:relative;color:var(--inkt-zacht);font-size:16.5px}
.rubriek li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--teal);border-radius:2px;
}

/* vragen */
details{border-top:1px solid var(--lijn-zacht);padding:18px 0}
details summary{cursor:pointer;font-weight:600;font-size:17.5px;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--teal);font-weight:400;font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--inkt-zacht);max-width:72ch}

/* oproep */
.oproep{background:var(--inkt);color:#f3efe9;border:0}
.oproep h2{color:#fff}
.oproep p{color:#c3cfd3;max-width:58ch}
.oproep .knop{background:var(--teal);border-color:var(--teal)}
.oproep .knop-rand{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.35)}
.oproep .knop-rand:hover{background:rgba(255,255,255,.08)}

/* stappen */
.stappen{counter-reset:stap;display:grid;gap:26px}
.stap{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.stap .nr{
  counter-increment:stap;width:34px;height:34px;border-radius:50%;border:1px solid var(--lijn);
  display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--teal-diep);background:var(--wit);
}
.stap .nr::before{content:counter(stap)}
.stap p{margin:6px 0 0;color:var(--inkt-zacht)}

/* voet */
.voet{background:var(--wit);border-top:1px solid var(--lijn);padding:54px 0 26px}
.voet-binnen{display:grid;grid-template-columns:1.8fr 1fr 1.1fr 1fr;gap:34px}
.voet h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--inkt-zacht);margin-bottom:12px}
.voet a{display:block;color:var(--inkt);text-decoration:none;font-size:15.5px;padding:3px 0}
.voet a:hover{text-decoration:underline}
.voet-onder{padding-top:26px;margin-top:34px;border-top:1px solid var(--lijn-zacht)}

@media (max-width:760px){
  .kop-binnen{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  .menu{gap:16px;width:100%}
  .menu a{font-size:15px}
  .rubriek{grid-template-columns:1fr;gap:14px}
  .voet-binnen{grid-template-columns:1fr;gap:26px}
  section{padding:54px 0}
  .hero{padding:56px 0 44px}
}

/* lucht tussen een kop en de tekst eronder */
h1 + .lood,h2 + .lood,h2 + p,h3 + p{margin-top:14px}
.sectiekop h2 + .lood{margin-top:12px}
.twee h2 + .lood{margin-top:14px}
.stap h3 + p{margin-top:6px}
.vier{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:30px}
@media (max-width:820px){.vier{grid-template-columns:1fr}}

/* op een telefoon neemt een plakkende kop te veel scherm in */
@media (max-width:760px){
  .kop{position:static}
  .menu{gap:14px 18px}
  .hero-acties{gap:10px}
  .hero-acties .knop{width:100%;text-align:center}
}

/* prijzen */
.prijsblokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px}
.prijskaart{border:1px solid var(--lijn);border-radius:12px;padding:30px;background:var(--papier)}
.prijskaart.nadruk{background:var(--wit);border-color:var(--teal);box-shadow:0 14px 34px -24px rgba(19,39,46,.5)}
.prijskaart .etiket{margin-bottom:10px}
.bedrag{font-family:Fraunces,Georgia,serif;font-size:40px;line-height:1.1;margin:0 0 4px;font-weight:600}
.bedrag .per{font-family:Inter,sans-serif;font-size:17px;font-weight:500;color:var(--inkt-zacht)}
.bedrag .btw{display:block;font-family:Inter,sans-serif;font-size:14.5px;font-weight:400;color:var(--inkt-zacht);margin-top:6px}
.bedrag-onder{color:var(--inkt-zacht);font-size:16px;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--lijn-zacht)}
.prijskaart ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prijskaart li{padding-left:24px;position:relative;font-size:16px;color:var(--inkt-zacht)}
.prijskaart li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--teal);border-radius:2px}
.prijsstrook{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.prijsstrook h2{font-size:30px}
.prijsstrook h2 .btw{font-size:14.5px}
.prijsstrook h2 .per{font-family:Inter,sans-serif;font-size:17px;font-weight:500;color:var(--inkt-zacht)}
.prijsstrook p{margin:10px 0 0;color:var(--inkt-zacht);max-width:58ch}

/* juridische pagina's: één leeskolom */
.juridisch{max-width:76ch}
.juridisch h2{font-size:22px;margin:38px 0 10px}
.juridisch h2:first-child{margin-top:0}
.juridisch p,.juridisch li{color:var(--inkt-zacht);font-size:16.5px}
.juridisch ul{margin:0 0 1em;padding-left:20px;display:grid;gap:8px}
.juridisch code{background:var(--papier);border:1px solid var(--lijn);border-radius:4px;padding:1px 5px;font-size:14.5px}
.tabel{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:15.5px}
.tabel th,.tabel td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--lijn-zacht);vertical-align:top}
.tabel th{background:var(--papier);font-weight:600;color:var(--inkt)}
.tabel td{color:var(--inkt-zacht)}
.voet .juridischlinks{margin-top:4px}