/* Nieuwshap landingspagina — huisstijl visual identity 1 */
:root { --grond:#FFF4EC; --vlak:#FFFFFF; --inkt:#1B1F3B; --stil:#4F546E; --rand:#E8D9CC; --tomaat:#E5482E; --tomaat-donker:#B8321C; --zon:#FFC53D;
  --kop:'Bricolage Grotesque','DM Sans',system-ui,sans-serif; --tekst:'DM Sans',system-ui,sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:var(--grond); color:var(--inkt); font-family:var(--tekst); font-size:18px; line-height:1.6;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
h1,h2,h3 { font-family:var(--kop); line-height:1.1; margin:0 0 14px; }
h1 { font-size:clamp(40px, 6vw, 68px); letter-spacing:-1.5px; font-weight:800; }
h2 { font-size:clamp(30px, 4vw, 42px); font-weight:800; }
h3 { font-size:22px; font-weight:800; }
a { color:var(--tomaat-donker); }
:focus-visible { outline:3px solid var(--zon); outline-offset:3px; }
.kop, main, .voet { max-width:1120px; margin:0 auto; padding-left:24px; padding-right:24px; }
.kop { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:18px; padding-bottom:18px; }
.merk { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--inkt); font-family:var(--kop); font-weight:800; font-size:26px; }
.merk em { font-style:normal; color:var(--tomaat); }
.knop { display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border-radius:999px; font-weight:700; text-decoration:none; }
.knop.licht { background:var(--vlak); color:var(--inkt); border:2px solid var(--rand); }
.knop.licht:hover { border-color:var(--inkt); }
.held { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; padding:40px 0 72px; }
.intro { font-size:21px; max-width:36ch; }
.kenmerken { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; }
.kenmerken li { padding-left:34px; position:relative; font-weight:600; }
.kenmerken li::before { content:''; position:absolute; left:0; top:6px; width:20px; height:20px; border-radius:6px; background:var(--zon); }
.video { margin:0; justify-self:center; width:min(360px, 100%); }
.video video { display:block; width:100%; aspect-ratio:9/16; border-radius:28px; background:var(--inkt); border:8px solid var(--inkt); }
.video figcaption { text-align:center; color:var(--stil); font-size:15px; margin-top:10px; }
.stappen { padding:64px 0; border-top:2px solid var(--rand); }
.stappen ol { list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.stappen li { background:var(--vlak); border:2px solid var(--rand); border-radius:22px; padding:24px; }
.nr { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--tomaat); color:#fff; font-family:var(--kop); font-weight:800; font-size:22px; margin-bottom:14px; }
.stappen p, .kaart p { margin:0; color:var(--stil); font-size:17px; }
.ouders { padding:64px 0; border-top:2px solid var(--rand); }
.kaarten { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:28px; }
.kaart { background:var(--vlak); border:2px solid var(--rand); border-radius:22px; padding:24px; }
.status { margin:32px 0 0; padding:18px 22px; border-radius:18px; background:var(--zon); font-weight:600; }
.status a { color:var(--inkt); }
.voet { display:flex; gap:20px; justify-content:space-between; padding-top:28px; padding-bottom:40px; border-top:2px solid var(--rand); color:var(--stil); font-size:15px; }
.voet a { color:var(--stil); }
.tekstpagina { max-width:720px; padding-top:24px; padding-bottom:64px; }
.tekstpagina h2 { font-size:26px; margin-top:32px; }
.invullen { background:var(--zon); padding:0 6px; border-radius:4px; }
@media (max-width: 900px) {
  .held { grid-template-columns:1fr; gap:36px; padding-top:16px; }
  .stappen ol { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kaarten { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .stappen ol { grid-template-columns:1fr; }
  .kop .knop { font-size:15px; padding:0 14px; }
  .merk span { font-size:22px; }
}