/* Slim Opvoeden — de zachte wereld (V3), uitgewerkt tot winkel */
:root{
  --zand:#f7f1e6; --room:#fffdf8; --salie:#e4ebdf; --blos:#f6e3d8; --klei:#efe6d6;
  --inkt:#212a20; --zacht:#616b5f; --stil:#8b9389;
  --terra:#b3603a; --terra-diep:#8f4526; --mos:#3d5340;
  --rand:rgba(33,42,32,.1); --rand-sterk:rgba(33,42,32,.18);
  --schaduw-1:0 1px 2px rgba(33,42,32,.05),0 6px 16px -8px rgba(33,42,32,.14);
  --schaduw-2:0 2px 4px rgba(33,42,32,.06),0 16px 38px -16px rgba(33,42,32,.24);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--zand);color:var(--inkt);
  font-family:Manrope,system-ui,sans-serif;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;padding-bottom:86px}
::selection{background:var(--terra);color:#fff}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:10px}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.09}
.serif{font-family:Newsreader,Georgia,serif;font-weight:300;letter-spacing:-.03em}
.wrap{max-width:434px;margin:0 auto;padding:0 20px}

/* ---------- kop ---------- */
.balk{background:var(--mos);color:#e5ece3;text-align:center;font-size:12.5px;
  padding:9px 16px;font-weight:600;letter-spacing:.005em}
.balk b{color:#fff}
header{padding:26px 0 0;text-align:center}
.merk{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--zacht);
  font-weight:700}
h1{font-size:clamp(36px,10vw,46px);margin:22px 0 14px}
h1 em{font-family:Newsreader,serif;font-style:italic;font-weight:300;color:var(--terra);
  letter-spacing:-.02em}
.inleiding{color:var(--zacht);font-size:17px;max-width:26em;margin:0 auto}
.heldbeeld{margin:26px 0 0;border-radius:26px;overflow:hidden;box-shadow:var(--schaduw-2)}

/* ---------- leeftijdskiezer ---------- */
.kiezer{display:flex;gap:8px;overflow-x:auto;padding:22px 20px 4px;margin:0 -20px;
  scrollbar-width:none}
.kiezer::-webkit-scrollbar{display:none}
.kiezer a{flex:none;background:var(--room);border:1px solid var(--rand);
  border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;
  text-decoration:none;letter-spacing:-.01em;box-shadow:var(--schaduw-1)}
.kiezer a:hover{border-color:var(--terra);color:var(--terra-diep)}

/* ---------- secties ---------- */
section{padding:48px 0 0}
h2{font-size:clamp(27px,7.4vw,32px);margin-bottom:9px}
.lead{color:var(--zacht);margin-bottom:22px;max-width:29em}

/* ---------- fase ---------- */
.fase{margin-bottom:38px}
.fasekop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1.5px solid var(--rand-sterk);margin-bottom:4px}
.fasekop h3{font-size:23px;letter-spacing:-.03em}
.fasekop span{font-size:12.5px;color:var(--stil);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}

/* cursusrij, bewust geen kaartjesraster */
.rij{display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"naam prijs" "moment prijs" "duur prijs";
  column-gap:16px;row-gap:4px;align-items:start;
  padding:17px 0;border-bottom:1px solid var(--rand);text-decoration:none}
.rij:hover .naam{grid-area:naam;color:var(--terra-diep)}
.naam{grid-area:naam;font-weight:800;font-size:18px;letter-spacing:-.028em;line-height:1.22}
.moment{grid-area:moment;font-size:14.5px;color:var(--zacht);line-height:1.5}
.prijs{grid-area:prijs;align-self:center;font-family:Newsreader,serif;font-weight:300;
  font-size:26px;letter-spacing:-.04em;white-space:nowrap}
.duur{grid-area:duur;font-size:12px;color:var(--stil);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;margin-top:3px}

/* ---------- pakket ---------- */
.pakket{border-radius:28px;padding:28px 24px;margin-top:14px;position:relative;overflow:hidden}
.pakket-salie{background:var(--salie)}
.pakket-mos{background:var(--mos);color:#e5ece3}
.pakket-mos h3,.pakket-mos .som b{color:#fff}
.pakket-mos .pakket-lead{color:#b9c6b7}
.pakket h3{font-size:26px;margin-bottom:7px}
.pakket-lead{color:var(--zacht);font-size:15.5px;margin-bottom:18px}
.lijst{list-style:none;margin-bottom:20px}
.lijst li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:15px;
  line-height:1.5}
.lijst svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--terra)}
.pakket-mos .lijst svg{color:#e0a87f}
.som{display:flex;align-items:baseline;gap:11px;margin-bottom:16px}
.som b{font-family:Newsreader,serif;font-weight:300;font-size:46px;letter-spacing:-.045em;
  line-height:1}
.som s{font-size:15px;color:var(--zacht);text-decoration-thickness:1px}
.pakket-mos .som s{color:#9fae9d}
.som .winst{font-size:13px;font-weight:800;color:var(--terra);background:var(--blos);
  padding:4px 11px;border-radius:999px;letter-spacing:-.01em}
.pakket-mos .som .winst{background:rgba(224,168,127,.2);color:#f0c9a8}
.vlag{position:absolute;top:0;right:22px;background:var(--terra);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:0 0 10px 10px}

/* ---------- knoppen ---------- */
.knop{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--terra);
  color:#fff;text-decoration:none;font-weight:700;font-size:16.5px;padding:17px 20px;
  border-radius:999px;letter-spacing:-.008em;
  box-shadow:0 3px 5px rgba(96,44,20,.2),0 12px 26px -8px rgba(96,44,20,.45);
  transition:background .22s,transform .22s cubic-bezier(.16,.84,.3,1)}
.knop:hover{background:var(--terra-diep);transform:translateY(-2px)}
.knop svg{width:17px;height:17px;flex:none}
.knop-licht{background:var(--room);color:var(--inkt);box-shadow:var(--schaduw-1)}
.knop-licht:hover{background:#fff;color:var(--terra-diep)}

/* ---------- waarom ---------- */
.waarom{display:grid;gap:12px}
.waarom div{background:var(--room);border-radius:20px;padding:19px 20px;box-shadow:var(--schaduw-1)}
.waarom h3{font-size:18.5px;margin-bottom:5px;letter-spacing:-.025em}
.waarom p{font-size:14.5px;color:var(--zacht);line-height:1.55}
.waarom svg{width:20px;height:20px;color:var(--terra);margin-bottom:9px}

/* ---------- reviews ---------- */
.q{background:var(--room);border-radius:22px;padding:20px;margin-bottom:12px;
  box-shadow:var(--schaduw-1)}
.q p{font-family:Newsreader,serif;font-weight:300;font-size:20px;line-height:1.38;
  letter-spacing:-.015em;margin-bottom:10px}
.q footer{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--zacht)}
.sterren{display:flex;gap:1.5px;color:var(--terra)}
.sterren svg{width:12px;height:12px}
.telling{display:flex;gap:12px;margin-bottom:13px}
.telling div{flex:1;background:var(--room);border-radius:20px;padding:19px 12px;
  text-align:center;box-shadow:var(--schaduw-1)}
.telling b{display:block;font-family:Newsreader,serif;font-weight:300;font-size:40px;
  color:var(--terra);line-height:1;letter-spacing:-.04em}
.telling span{font-size:12.5px;color:var(--zacht);display:block;margin-top:6px;line-height:1.4}
.noot{font-size:12.5px;color:var(--zacht);line-height:1.6}

/* ---------- faq ---------- */
details{background:var(--room);border-radius:18px;margin-bottom:9px;box-shadow:0 1px 2px rgba(33,42,32,.04)}
summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;font-size:16px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;line-height:1.4;
  letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary svg{width:15px;height:15px;flex:none;color:var(--terra);
  transition:transform .3s cubic-bezier(.16,.84,.3,1)}
details[open] summary svg{transform:rotate(45deg)}
details p{font-size:14.5px;color:var(--zacht);padding:0 18px 17px;line-height:1.62}

.eind{padding:40px 0;text-align:center;font-size:12.5px;color:var(--zacht);line-height:1.7}

/* ---------- vaste balk ---------- */
.vast{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,253,248,.94);
  backdrop-filter:blur(14px);border-top:1px solid var(--rand);
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -3px 20px rgba(33,42,32,.09)}
.vast-in{max-width:434px;margin:0 auto;display:flex;align-items:center;gap:13px}
.vast .tekst{flex:1;min-width:0}
.vast .tekst b{display:block;font-size:14px;letter-spacing:-.02em;line-height:1.25}
.vast .tekst span{font-size:11.5px;color:var(--zacht)}
.vast .knop{flex:none;padding:13px 20px;font-size:15px}

/* wanneer weet je dat het gelukt is */
.geslaagd{background:var(--room);border-radius:22px;padding:22px 20px;box-shadow:var(--schaduw-1)}
.geslaagd h3{font-size:19px;letter-spacing:-.025em;margin-bottom:11px}
.geslaagd ol{list-style:none;counter-reset:g}
.geslaagd li{counter-increment:g;position:relative;padding:9px 0 9px 32px;font-size:15.5px;
  line-height:1.5;border-bottom:1px solid var(--rand)}
.geslaagd li:last-child{border:0;padding-bottom:0}
.geslaagd li::before{content:counter(g);position:absolute;left:0;top:11px;width:20px;height:20px;
  border-radius:50%;background:var(--blos);color:var(--terra-diep);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center}

/* ---------- twee wegen: het moment van kiezen ---------- */
.keuze{margin-bottom:20px}
.weg{border-radius:24px;padding:24px 22px;margin-bottom:12px}
.weg-nu{background:var(--klei);color:var(--zacht)}
.weg-nu .kop{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:22px;
  letter-spacing:-.025em;color:var(--inkt);opacity:.62;margin-bottom:11px;line-height:1.25}
.weg-nu p{font-size:15.5px;line-height:1.62}
.weg-nu p+p{margin-top:11px}
.weg-straks{background:var(--room);box-shadow:var(--schaduw-2)}
.weg-straks .kop{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:25px;
  letter-spacing:-.028em;color:var(--inkt);margin-bottom:12px;line-height:1.22}
.weg-straks .kop em{font-style:italic;color:var(--terra)}
.weg-straks p{font-size:16px;line-height:1.62;color:var(--inkt)}
.weg-straks p+p{margin-top:12px}
.weg-straks .slot{font-weight:700;letter-spacing:-.015em}
.geslaagd{background:var(--salie);border-radius:22px;padding:22px 20px}
.geslaagd h3{font-size:19px;letter-spacing:-.025em;margin-bottom:11px}
.geslaagd ol{list-style:none;counter-reset:g}
.geslaagd li{counter-increment:g;position:relative;padding:9px 0 9px 32px;font-size:15.5px;
  line-height:1.5;border-bottom:1px solid rgba(33,42,32,.1)}
.geslaagd li:last-child{border:0;padding-bottom:0}
.geslaagd li::before{content:counter(g);position:absolute;left:0;top:11px;width:20px;height:20px;
  border-radius:50%;background:var(--room);color:var(--terra-diep);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center}

/* ---------- gratis module: het formulier ---------- */
.gratisblok{background:var(--mos);color:#e5ece3;border-radius:28px;padding:30px 24px;text-align:center}
.gratisblok h2{color:#fff;margin-bottom:10px}
.gratisblok .lead{color:#b9c6b7;margin:0 auto 20px;max-width:24em}
.gratisblok .veld{text-align:left;max-width:21em;margin:0 auto 10px}
.gratisblok input{width:100%;font:inherit;font-size:16px;padding:15px 16px;border-radius:14px;
  border:1px solid rgba(233,238,231,.28);background:rgba(255,255,255,.09);color:#fff}
.gratisblok input::placeholder{color:#8fa08d}
.gratisblok input:focus{outline:2px solid var(--terra);outline-offset:1px}
.gratisblok .knop{max-width:21em;margin:0 auto}
.gratisblok .klein{font-size:12.5px;color:#9fae9d;margin-top:13px;line-height:1.5}
.gratisblok .fout{color:#f0b8a0;font-size:13.5px;margin:8px 0 0;display:none}
.gratisblok .wat{display:flex;flex-wrap:wrap;gap:7px 14px;justify-content:center;margin-bottom:20px}
.gratisblok .wat span{display:flex;align-items:center;gap:6px;font-size:13px;color:#c3cfc1}
.gratisblok .wat svg{width:14px;height:14px;color:#e0a87f}

/* ---------- herkenningslijsten: streepje in plaats van een waarschuwing ----------
   De oude opmaak zette het icoon met flex naast de tekst. Nu het icoon weg is
   moet de regel gewoon een blok zijn, anders schuift het streepje over de
   eerste letter heen. */
.pijn li, .herken li{display:block;position:relative;padding-left:28px;gap:0}
.pijn li::before, .herken li::before{content:"";position:absolute;left:0;top:19px;
  width:14px;height:1.5px;background:var(--terra);opacity:.6;border-radius:2px}
.pijn li{padding-top:13px;padding-bottom:13px}
.herken li{background:var(--room);border-radius:18px;padding:15px 17px 15px 34px}
.herken li::before{left:16px;top:25px}

/* ---------- kopbalk en voettekst: het geheel aan elkaar knopen ---------- */
.kopbalk{border-bottom:1px solid var(--rand);background:var(--zand)}
.kopbalk .in{max-width:434px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.kopbalk .logo{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--inkt);text-decoration:none;white-space:nowrap}
.kopbalk nav{display:flex;gap:15px;align-items:center}
.kopbalk nav a{font-size:13.5px;font-weight:700;color:var(--zacht);text-decoration:none;letter-spacing:-.01em}
.kopbalk nav a:hover{color:var(--terra-diep)}
.kopbalk nav a.in-log{background:var(--room);border:1px solid var(--rand);border-radius:999px;
  padding:6px 13px;color:var(--inkt)}

/* alleen een logo op de landingspagina's, geen uitgangen */
.koponly{max-width:434px;margin:0 auto;padding:15px 20px 0}
.koponly a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--zacht);text-decoration:none}

footer.voet{background:var(--klei);margin-top:44px;padding:32px 0 30px}
footer.voet .in{max-width:434px;margin:0 auto;padding:0 20px}
footer.voet .kolommen{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px}
footer.voet h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stil);
  font-weight:800;margin-bottom:9px}
footer.voet a{display:block;font-size:14.5px;color:var(--inkt);text-decoration:none;padding:4px 0}
footer.voet a:hover{color:var(--terra-diep)}
footer.voet .onder{border-top:1px solid var(--rand);padding-top:18px;font-size:12.5px;color:var(--zacht);line-height:1.6}
footer.voet .methodes{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
footer.voet .methodes span{background:var(--room);border:1px solid var(--rand);border-radius:7px;
  padding:5px 9px;font-size:10.5px;font-weight:800;color:var(--zacht)}

/* verkoopblok onderaan elke pagina */
.slotverkoop{background:var(--mos);color:#e5ece3;border-radius:28px;padding:28px 24px;text-align:center;margin-top:14px}
.slotverkoop h2{color:#fff;font-size:26px;margin-bottom:9px}
.slotverkoop p{color:#b9c6b7;font-size:15.5px;margin:0 auto 18px;max-width:23em}
.slotverkoop .knop{max-width:22em;margin:0 auto}
.slotverkoop .klein{font-size:12.5px;color:#9fae9d;margin-top:12px}

/* betaalicoontjes bij een koopknop */
.methodes-mini{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:13px}
.methodes-mini span{background:var(--room);border:1px solid var(--rand);border-radius:7px;
  padding:5px 9px;font-size:10.5px;font-weight:800;color:var(--zacht)}
.methodes-mini .ideal{color:#cc0066}.methodes-mini .banc{color:#005498}

/* garantie boven een koopknop */
.garantie-mini{display:flex;gap:9px;align-items:flex-start;background:var(--salie);border-radius:14px;
  padding:12px 14px;margin-bottom:13px;font-size:13.5px;line-height:1.5;color:var(--inkt)}
.garantie-mini svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--mos)}

.knop{text-wrap:balance;line-height:1.25}
.pakket .knop{padding-left:18px;padding-right:18px}

/* ---------- vergelijken: mensen kiezen tussen kolommen, niet tussen ja en nee ---------- */
.vergelijk{background:var(--room);border-radius:22px;overflow:hidden;box-shadow:var(--schaduw-1);margin-bottom:14px}
.vergelijk table{width:100%;border-collapse:collapse}
.vergelijk th,.vergelijk td{padding:11px 8px;text-align:center;font-size:13px;
  border-bottom:1px solid var(--rand)}
.vergelijk th:first-child,.vergelijk td:first-child{text-align:left;padding-left:16px;
  font-size:14px;color:var(--zacht);width:44%}
.vergelijk thead th{background:var(--klei);font-size:12.5px;font-weight:800;letter-spacing:-.01em;
  color:var(--inkt);line-height:1.25;padding-top:14px;padding-bottom:12px}
.vergelijk thead th.top{background:var(--mos);color:#fff;position:relative}
.vergelijk thead th small{display:block;font-weight:700;font-size:11px;opacity:.72;margin-top:3px}
.vergelijk td.ja{color:var(--mos);font-weight:800}
.vergelijk td.nee{color:var(--stil)}
.vergelijk td.top{background:rgba(61,83,64,.055)}
.vergelijk tr:last-child td{border-bottom:0}
.vergelijk .prijsrij td{font-family:Newsreader,serif;font-weight:300;font-size:22px;letter-spacing:-.04em;
  padding-top:14px;padding-bottom:14px}
.vergelijk .prijsrij td:first-child{font-family:Manrope,sans-serif;font-size:14px;font-weight:800;color:var(--inkt)}

/* ---------- betaallogo's: de echte, geen tekstbadges ---------- */
.betaallogos{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center}
.betaallogos span{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--rand);border-radius:8px;height:30px;padding:0 10px}
.betaallogos img{height:14px;width:auto;display:block}
.betaallogos img.hoog{height:17px}
footer.voet .betaallogos{justify-content:flex-start;margin-top:11px}

/* ---------- wat hierna komt: cross-sell op de hoekpagina's ---------- */
.hierna{display:grid;gap:11px}
.hierna a{display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:center;
  background:var(--room);border-radius:20px;padding:17px 18px;text-decoration:none;
  box-shadow:var(--schaduw-1);transition:transform .2s cubic-bezier(.16,.84,.3,1)}
.hierna a:hover{transform:translateY(-2px)}
.hierna .wanneer{grid-column:1;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--terra);font-weight:800}
.hierna .titel{grid-column:1;font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.25;color:var(--inkt)}
.hierna .waarom{grid-column:1;font-size:14px;color:var(--zacht);line-height:1.5}
.hierna .p{grid-column:2;grid-row:1/4;font-family:Newsreader,serif;font-weight:300;font-size:24px;
  letter-spacing:-.04em;color:var(--inkt)}

/* =====================================================================
   BREDER DAN EEN TELEFOON (18 aug 2026)
   Tot hier was alles vastgezet op 434px. Op een laptop stond de site als
   een strook in het midden. Vanaf 760px krijgt hij een echt raster.
   ===================================================================== */
@media (min-width: 760px){
  body{font-size:17px;padding-bottom:0}
  .wrap,.kopbalk .in,.koponly,footer.voet .in{max-width:1080px;padding-left:40px;padding-right:40px}
  .vast{display:none}                       /* de koopbalk onderin is een telefoon-ding */
  .kopbalk .in{padding-top:18px;padding-bottom:18px}
  .kopbalk .logo{font-size:13px}
  .kopbalk nav{gap:26px}
  .kopbalk nav a{font-size:14.5px}
  section{padding-top:72px}
  h2{font-size:34px}
  .lead{font-size:18px}

  /* hero: tekst links, beeld rechts */
  header.hero,.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
    text-align:left;padding-top:56px}
  .hero .merk,.hero .belofte,.hero .transformatie,.hero .inleiding{grid-column:1}
  .hero .heldbeeld,.hero .maquette,.hero .onderschrift{grid-column:2}
  .hero .heldbeeld{grid-row:1/6;margin:0;align-self:center}
  .hero .maquette{grid-row:1/7;margin:0 auto;width:270px}
  .hero .onderschrift{display:none}
  .hero .knop{grid-column:1;max-width:24em}
  .hero .inleiding{margin-left:0}
  header.hero h1.belofte,.hero h1.belofte,h1.belofte{font-size:54px}
  .kop-aanbod{text-align:left;padding-top:56px}
  .kop-aanbod .inleiding{margin-left:0}
  .kop-aanbod h1.serif,.kop-aanbod h1{font-size:50px}

  /* voordeur: drie deuren naast elkaar */
  .deur{margin-bottom:0}
  section:has(.deur){}
  .deuren{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .waarom{grid-template-columns:repeat(2,1fr);gap:16px}

  /* aanbod: pakketten naast elkaar, cursussen in twee kolommen */
  .pakketten{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  .pakketten section{padding-top:0}
  .fase{break-inside:avoid}
  .fases{columns:2;column-gap:44px}
  .rekensom{max-width:560px}

  /* keuze-blok: twee wegen naast elkaar */
  .keuze{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:stretch}
  .weg{margin-bottom:0}
  .geslaagd{max-width:720px}

  /* twee kolommen waar lijstjes staan */
  .hierna{grid-template-columns:repeat(3,1fr)}
  .waarde .r{grid-template-columns:1fr 1fr;column-gap:40px}
  .waarde .b{grid-column:2;padding-left:0}
  .zin{max-width:720px}
  .pijn{max-width:760px}
  .gratisblok{max-width:640px;margin:0 auto}
  .gratisblok .veld,.gratisblok .knop{max-width:26em}
  .koop{max-width:520px}
  .q{max-width:640px}
  .slotverkoop{max-width:720px;margin-left:auto;margin-right:auto}
  details{max-width:760px}

  /* kassa: bon links, formulier rechts */
  .kassa{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .kassa .kolom-links,.kassa .kolom-rechts{min-width:0}

  /* tekstpagina's */
  .tekstpagina{max-width:720px}

  /* voettekst */
  footer.voet .kolommen{grid-template-columns:repeat(4,1fr)}
}
@media (min-width: 1100px){
  header.hero h1.belofte,.hero h1.belofte,h1.belofte{font-size:60px}
  .hero{gap:72px}
}

/* tablet (760-1000px): iets minder breed uitpakken dan op een laptop */
@media (min-width: 760px) and (max-width: 999px){
  header.hero h1.belofte,.hero h1.belofte,h1.belofte{font-size:42px}
  .kop-aanbod h1.serif,.kop-aanbod h1{font-size:40px}
  header.hero,.hero{gap:32px}
  .deuren{grid-template-columns:1fr 1fr}
  .hierna{grid-template-columns:1fr 1fr}
  .pakketten{grid-template-columns:1fr}
  .fases{columns:1}
  .kassa{grid-template-columns:1fr;gap:0}
  .keuze{grid-template-columns:1fr}
  footer.voet .kolommen{grid-template-columns:1fr 1fr}
}