/* ===== Lettertype: Inter, zelf gehost (geen Google Fonts) ===== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-800.woff2) format('woff2')}

/* ===== Kleuren ===== */
:root{
  --accent:#4A90E2;
  --hover:#357ABD;
  --donker:#2B6CB0;
  --licht:#DBEAFE;
  --licht-hover:#BFDBFE;
  --zacht:#EFF6FF;
  /* Achtergrond van de lichtblauwe secties */
  --band:#E0EBFB;
  --inkt:#1E2A38;
  --inkt-zacht:#42556B;
  --wit:#FFFFFF;
  /* Warme tinten, bemonsterd uit de zonsopgangfoto */
  --warm:#FDE3D2;
  --warm-diep:#9E4A19;
  /* Kleur van de voettekst */
  --voet:#2B6CB0;
  --schaduw:0 10px 30px rgba(30,42,56,.10), 0 2px 8px rgba(30,42,56,.05);
  /* Voor blokken zonder vulling: alleen een schaduwrand */
  --schaduw-open:0 6px 24px rgba(30,42,56,.13), 0 0 0 1px rgba(30,42,56,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--inkt);background:var(--wit);line-height:1.6;font-size:16px;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--donker)}
.container{max-width:1100px;margin:0 auto;padding:0 24px}

/* ===== Toegankelijkheid ===== */
.skiplink{position:absolute;left:-9999px;top:0;background:var(--donker);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:60}
.skiplink:focus{left:0}
.alleen-voorlezen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* ===== Knoppen ===== */
.btn{
  display:inline-block;background:var(--donker);color:#fff;text-decoration:none;
  font-weight:600;font-size:16px;padding:13px 26px;border-radius:8px;border:0;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--hover)}
.btn-klein{padding:10px 22px;font-size:15px}
.btn-secundair{background:var(--wit);color:var(--donker);border:2px solid var(--donker);padding:11px 24px}
.btn-secundair:hover{background:var(--zacht)}
.kop-knoppen{display:flex;flex-wrap:wrap;gap:14px}

/* ===== Blok 1: de balk ===== */
.balk{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:background .25s ease, box-shadow .25s ease}
.balk.vast{background:rgba(255,255,255,.96);box-shadow:0 1px 10px rgba(30,42,56,.08)}
.balk-inner{max-width:1100px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.balk-merk,.balk .btn-klein{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease, visibility .25s}
.balk-merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt)}
.balk.vast .balk-merk,.balk.vast .btn-klein{opacity:1;visibility:visible;transform:none}
.balk-merk img{width:34px;height:34px;flex:none}
.balk-naam{font-weight:800;font-size:19px;letter-spacing:-0.3px;line-height:1.15;display:block}
.balk-sub{font-weight:400;font-size:12.5px;color:var(--inkt-zacht);line-height:1.2;display:block;margin-top:1px}

/* ===== Blok 2: de kop ===== */
.kop{
  /* WITFILTER over de achtergrondfoto: 0 is de foto vol zichtbaar, 1 is helemaal wit. Gebruik een punt, geen komma */
  --kop-wit:0.40;
  background-color:var(--zacht);
  background-image:linear-gradient(rgba(255,255,255,var(--kop-wit)),rgba(255,255,255,var(--kop-wit))),url('Landing_CVP.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:28px 0 40px;position:relative;overflow:hidden;
}
.kop-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
/* De ruimte onder elke sectietitel. Eén getal, overal hetzelfde. */
.kicker{display:block;font-size:18px;font-weight:700;letter-spacing:1.8px;line-height:1.35;text-transform:uppercase;color:var(--warm-diep);margin-bottom:26px}
.beeldmerk{display:flex;align-items:center;gap:11px;margin-bottom:90px}
.beeldmerk img{width:56px;height:56px;flex:none}
.beeldmerk h1{font-size:34px;font-weight:800;letter-spacing:-0.7px;line-height:1.08;text-shadow:0 1px 7px rgba(74,144,226,.22)}
.merk-sub{font-size:15px;font-weight:400;line-height:1.25;color:var(--inkt-zacht);display:block;margin-top:3px}
.kop-alinea{font-size:16px;color:var(--inkt-zacht);max-width:52ch;margin-bottom:28px}

.kop-beeld{position:relative;display:flex;align-items:center;justify-content:center;padding:76px 0 0}
/* De cirkelpijl uit het logo, groot en bleek achter de foto */
.kop-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;width:min(470px,132%);height:auto;opacity:.15}
.kop-foto{position:relative;z-index:1;width:100%;max-width:324px;height:auto;filter:drop-shadow(0 18px 28px rgba(30,42,56,.16))}
.plaatshouder{
  position:relative;z-index:1;border:2px dashed var(--licht-hover);background:rgba(255,255,255,.75);
  border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--inkt-zacht);font-size:15px;line-height:1.5;padding:20px;
}

/* ===== Blok 3: de blauwe strook ===== */
.strook{background:var(--donker);color:#fff;padding:16px 0}
.strook ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px}
.strook li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}
.strook svg{flex:none}

/* ===== Banden en sectiekoppen ===== */
.band{padding:80px 0}
.band-zacht{background:var(--band)}
.band .container,.contact .container{position:relative}
.connector{position:absolute;top:-115px;left:24px;opacity:.6}
.contact-kaart h2{font-size:32px;font-weight:800;letter-spacing:-0.5px;line-height:1.2;margin-bottom:18px}
/* Losse tekst krijgt dezelfde omlijsting als de blokken elders op de pagina */
.tekstblok{background:transparent;border-radius:14px;padding:28px 26px;box-shadow:var(--schaduw-open)}
.tekstblok > p:last-child{margin-bottom:0}
.tekstblok h3{
  font-size:17px;font-weight:700;color:var(--warm-diep);line-height:1.35;
  margin:32px 0 8px;
}
.tekstblok > :first-child{margin-top:0}
.tekstblok p{max-width:75ch}
/* Twee blokken in deze sectie krijgen een zalmvulling in plaats van alleen een schaduwrand */
.tekstblok-warm{background:var(--warm);box-shadow:var(--schaduw)}
/* De twee voorbeeldkaartjes en het pijltje horen bij elkaar en blijven één geheel */
.voorbeeld{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}
.tekstblok-rechts{position:relative;z-index:1;width:100%}
/* Het blokje onder het cv, met het icoon schuin over de bovenrand */
.slot-blok{position:relative;max-width:660px;margin:60px auto 0;padding-top:34px}
.slot-blok p{margin-bottom:24px}
/* Dit vak neemt alle vrije ruimte tussen de kaartjes en het onderste blok in.
   De cirkelpijl staat daar middenin en steekt aan beide kanten achter de blokken. */
.voorna-ring{flex:1 1 auto;min-height:54px;width:100%;position:relative;z-index:0;pointer-events:none}
.voorna-ring svg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(300px,96%);height:auto;opacity:.07;display:none;
}

/* Blokken komen zachtjes op zodra ze in beeld schuiven.
   De verborgen begintoestand wordt pas gezet als JavaScript werkt,
   zodat de pagina zonder JavaScript gewoon zichtbaar blijft. */
body.js-aan .komt-op{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1)}
body.js-aan .komt-op.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  body.js-aan .komt-op{opacity:1;transform:none}
}

/* ===== Blok 4: het uitgangspunt ===== */
.wat-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:stretch}
/* De titel blijft bovenaan staan. De twee blokken eronder verdelen de
   overgebleven ruimte, zodat de kolom onderaan gelijk eindigt met de rechter. */
.wat-tekst{display:flex;flex-direction:column}
.wat-blokken{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.wat-tekst p{margin-bottom:16px;max-width:56ch}
.voorna{position:relative;display:flex;flex-direction:column;align-items:center;gap:0}
.voorna-kaart{border-radius:12px;padding:22px 24px;width:100%;box-shadow:var(--schaduw)}
.voorna-in{background:var(--warm)}
.voorna-uit{background:var(--licht);position:relative;padding-bottom:40px}
.voorna-uit .voorna-label{color:var(--donker)}
.voorna-label{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--warm-diep);margin-bottom:8px;display:block}
.voorna-quote{font-style:italic;color:var(--inkt)}
.voorna-pijl{padding:10px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{background:var(--wit);color:var(--donker);font-size:14px;font-weight:600;padding:5px 12px;border-radius:999px}
.samenbeeld{position:relative;margin-top:52px;padding-bottom:34px}
.samenbeeld .splits{width:100%;height:auto;border-radius:12px;box-shadow:var(--schaduw)}
/* De telefoon schaalt mee met het scherm. Alles is afgeleid van --tel,
   dus één getal aanpassen verandert de hele behuizing. */
.samenbeeld .telefoon{--tel:clamp(64px, 18vw, 214px);position:absolute;right:3%;bottom:0;width:var(--tel)}
.telefoon-frame{
  position:relative;background:#161F2B;
  border-radius:calc(var(--tel)*.140);
  padding:calc(var(--tel)*.122) calc(var(--tel)*.042) calc(var(--tel)*.094);
  box-shadow:0 calc(var(--tel)*.084) calc(var(--tel)*.196) rgba(30,42,56,.34), inset 0 0 0 1px rgba(255,255,255,.10);
}
.telefoon-frame img{width:100%;height:auto;border-radius:calc(var(--tel)*.037);display:block}
.telefoon-luidspreker{
  position:absolute;top:calc(var(--tel)*.056);left:50%;transform:translateX(-50%);
  width:calc(var(--tel)*.215);height:calc(var(--tel)*.023);
  border-radius:calc(var(--tel)*.014);background:rgba(255,255,255,.26);
}
.telefoon-balk{
  position:absolute;bottom:calc(var(--tel)*.037);left:50%;transform:translateX(-50%);
  width:calc(var(--tel)*.327);height:calc(var(--tel)*.019);
  border-radius:calc(var(--tel)*.009);background:rgba(255,255,255,.34);
}

/* ===== Blok 5: de vier stappen ===== */
.stappen{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:44px}
.stap{position:relative;text-align:left;background:var(--wit);border-radius:14px;padding:26px 24px;box-shadow:var(--schaduw)}
.stap-nr{
  width:52px;height:52px;border-radius:50%;background:var(--licht);color:var(--donker);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;
  margin:0 0 16px;
  box-shadow:0 0 0 4px var(--wit), 0 6px 16px rgba(30,42,56,.14);
}
.stap:nth-of-type(even) .stap-nr{background:var(--warm);color:var(--warm-diep)}
.stap h3{font-size:17.5px;font-weight:700;margin-bottom:6px;line-height:1.35}
.stap p{font-size:16px;color:var(--inkt-zacht)}
.stap:not(:last-child)::after{
  content:"";position:absolute;top:44px;right:-31px;width:28px;height:17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 26'%3E%3Cpath d='M3 21 Q24 2 41 12' fill='none' stroke='%234A90E2' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M33 7 L42 12 L32 16' fill='none' stroke='%234A90E2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;opacity:.75;
}

/* ===== Blok 6: de vier kaarten ===== */
.kaarten{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:44px}
.kring{position:absolute;z-index:2;pointer-events:none;opacity:.6}
.kring-1{left:50%;top:33%;transform:translate(-50%,-50%) rotate(-90deg)}
.kring-2{left:74%;top:50%;transform:translate(-50%,-50%)}
.kring-3{left:50%;top:67%;transform:translate(-50%,-50%) rotate(90deg)}
.kring-4{left:26%;top:50%;transform:translate(-50%,-50%) rotate(180deg)}
.kaart{border-radius:14px;padding:28px;box-shadow:var(--schaduw)}
.kaart:nth-of-type(odd){background:var(--licht)}
.kaart:nth-of-type(even){background:var(--warm)}
.kaart h3{font-size:17.5px;font-weight:700;margin-bottom:10px}
.kaart p{font-size:16px;color:var(--inkt);line-height:1.65}
.kaart{position:relative}
.sticker{
  position:absolute;right:-16px;bottom:-18px;z-index:3;
  background:var(--wit);border-radius:10px;padding:12px 16px;
  transform:rotate(-5deg);box-shadow:0 8px 20px rgba(30,42,56,.18);
}
.sticker img{width:150px;height:auto}
.sticker-icoon{padding:13px;line-height:0}
.sticker-icoon svg{width:36px;height:36px;display:block;color:var(--donker)}
/* Het kleine labeltje op de uitkomstkaart. Moet na .sticker staan, anders wint die */
.sticker-klein{right:18px;bottom:-16px;padding:8px 12px;border-radius:9px;transform:rotate(-4deg)}
.sticker-klein img{width:112px}
/* Het icoon boven het blokje onder het cv. Moet na .sticker en .sticker-icoon staan,
   anders winnen die en rekt het tegeltje uit tot een groot vlak. */
.sticker-boven{left:auto;right:-14px;top:-30px;bottom:auto;transform:rotate(-6deg)}
.kaart:nth-of-type(1) .sticker{transform:rotate(-7deg)}
.kaart:nth-of-type(2) .sticker{transform:rotate(5deg)}
.kaart:nth-of-type(4) .sticker{transform:rotate(-4deg)}
.code-vb{font-weight:700;color:var(--donker);white-space:nowrap;background:var(--wit);padding:2px 8px;border-radius:6px}
/* Een woord in de lopende tekst benadrukken met een wit pilletje */
.markering{background:var(--wit);color:var(--donker);font-weight:600;white-space:nowrap;padding:2px 8px;border-radius:6px}
/* ===== Blok 7: zorgvuldig met gegevens ===== */
.privacy-kaart{display:grid;gap:20px;margin-top:36px}
.privacy-rij{
  display:grid;grid-template-columns:auto 1fr;gap:0 22px;padding:26px 30px;
  background:var(--wit);border-radius:14px;box-shadow:var(--schaduw);
}
.privacy-badge{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--licht);color:var(--donker);flex:none;
  box-shadow:0 0 0 4px var(--wit), 0 6px 16px rgba(30,42,56,.14);
}
.privacy-badge svg{width:30px;height:30px}
.privacy-rij:nth-child(even) .privacy-badge{background:var(--warm);color:var(--warm-diep)}
.privacy-rij h3{font-size:17.5px;font-weight:700;line-height:1.35;margin-bottom:4px}
.privacy-rij p{font-size:16px;color:var(--inkt-zacht)}

/* ===== Blok 8: het resultaat ===== */
.beeld-rij{display:flex;justify-content:center;margin-top:44px}
.cv-stapel{position:relative;width:min(640px,94%);margin:0 auto;padding:14px 0 6px}
.cv-vel{
  position:absolute;left:0;right:0;top:14px;bottom:6px;background:var(--wit);
  border:1px solid var(--licht);border-radius:10px;box-shadow:0 10px 26px rgba(30,42,56,.10);
}
.cv-vel-2{transform:rotate(6deg) translate(26px,-10px)}
.cv-vel-1{transform:rotate(3deg) translate(13px,-5px)}
.cv-beeld{
  position:relative;width:100%;height:auto;border-radius:10px;
  transform:rotate(-1.5deg);box-shadow:0 18px 44px rgba(30,42,56,.20);
}

/* ===== Blok 9: voor jouw organisatie ===== */
.org-lijst{display:grid;grid-template-columns:1fr 1fr;gap:46px 26px;margin-top:56px}
.org-item{position:relative;background:var(--wit);border-radius:14px;padding:36px 28px 28px;box-shadow:var(--schaduw)}
.org-vink{
  position:absolute;top:-24px;left:26px;width:52px;height:52px;border-radius:50%;
  background:var(--licht);color:var(--donker);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px var(--wit), 0 6px 16px rgba(30,42,56,.14);
}
.org-vink svg{width:28px;height:28px}
.org-item:nth-of-type(even) .org-vink{background:var(--warm);color:var(--warm-diep)}
.org-item h3{font-size:17.5px;font-weight:700;margin-bottom:6px}
.org-item p{font-size:16px;color:var(--inkt-zacht)}

/* ===== Blok 10: de volgende stap ===== */
.contact{
  /* WITFILTER over de achtergrondfoto: 0 is de foto vol zichtbaar, 1 is helemaal wit. Gebruik een punt, geen komma */
  --contact-wit:0.40;
  position:relative;padding:80px 0 88px;
  background-color:var(--zacht);
  background-image:linear-gradient(rgba(255,255,255,var(--contact-wit)),rgba(255,255,255,var(--contact-wit))),url('Landing_CVP.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.contact-kaart{background:var(--wit);border-radius:16px;max-width:580px;margin:12px auto 0;padding:40px;box-shadow:var(--schaduw)}
.contact-kaart p{font-size:16px;margin-bottom:18px}
.veld{margin-bottom:16px}
.veld label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
.veld input,.veld textarea{
  width:100%;border:1px solid var(--licht-hover);border-radius:8px;padding:11px 13px;
  font:inherit;font-size:15px;color:var(--inkt);background:#fff;
}
.veld input:focus,.veld textarea:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.veld textarea{min-height:120px;resize:vertical}
.vinkje{display:flex;align-items:flex-start;gap:10px;font-size:15px;margin-bottom:12px;cursor:pointer}
.vinkje input{width:18px;height:18px;margin-top:3px;accent-color:var(--donker);flex:none}
.vinkjes{margin-bottom:26px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-melding{display:none;background:var(--zacht);border:1px solid var(--licht);border-radius:8px;padding:12px 14px;font-size:14.5px;margin-top:14px}
.form-melding.zichtbaar{display:block}
.form-melding.gelukt{background:#DCFCE7;border-color:#BBF7D0;color:#166534}
.form-melding.fout{background:var(--warm);border-color:#F6C9AE;color:var(--warm-diep)}
.form-melding.wacht{opacity:.75}

/* ===== De knop Over CVPortaal en het venster erachter ===== */
.voet-link{
  background:none;border:0;padding:0;color:#fff;font:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;opacity:.9;
}
.voet-link:hover{opacity:1}
dialog.over{
  border:0;border-radius:16px;padding:0;max-width:520px;width:calc(100% - 40px);
  max-height:calc(100% - 48px);margin:auto;
  box-shadow:0 24px 60px rgba(30,42,56,.34);color:var(--inkt);
}
dialog.over::backdrop{background:rgba(24,39,58,.55)}
.over-inner{padding:38px 36px;position:relative;max-height:80vh;overflow-y:auto}
.over-inner h3{font-size:16.5px;font-weight:700;color:var(--warm-diep);margin:26px 0 8px}
.over-inner h3:first-of-type{margin-top:20px}
.venster-sub{font-size:14.5px;font-style:italic;color:var(--inkt-zacht);text-align:center;margin-bottom:22px}
.over-inner a{color:var(--donker);text-underline-offset:2px}
.onderstreept{text-decoration:underline;text-underline-offset:2px}
.venster-wissel{
  background:none;border:0;padding:0;font:inherit;color:var(--donker);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.over-inner ul{margin:0 0 14px 20px;font-size:16px;color:var(--inkt-zacht)}
.over-inner li{margin-bottom:6px}
.over-sluit{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--zacht);color:var(--inkt);font-size:20px;line-height:1;cursor:pointer;
}
.over-sluit:hover{background:var(--licht)}
.over-inner .portret{width:128px;height:128px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 20px}
.venster-citaat{font-size:19px;font-style:italic;color:var(--inkt);margin:20px 0}
.venster-onder{font-weight:700;color:var(--inkt);margin-top:20px}
.over-inner h2{font-size:23px;font-weight:800;letter-spacing:-0.4px;margin-bottom:14px;text-align:center}
.over-inner p{font-size:16px;color:var(--inkt-zacht);margin-bottom:14px}

/* ===== Blok 11: de voettekst ===== */
.voet{background:var(--voet);color:#fff;padding:38px 0 34px;font-size:14.5px}
.voet-inner{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.voet .link-volgt{color:#fff;text-decoration:underline;text-underline-offset:3px;opacity:.9;cursor:help}
.voet-scheiding{opacity:.55;margin:0 8px}
.voet-copy{opacity:.9}

/* ===== Mobiel ===== */
@media (max-width:920px){
  /* Op een smal scherm krijgt losse tekst dezelfde omlijsting als de blokken,
     zodat alles onder elkaar even breed is en netjes uitlijnt. */
  .mobielblok{background:transparent;border-radius:14px;padding:24px 22px;box-shadow:var(--schaduw-open)}
  .mobielblok > p:last-child{margin-bottom:0}
  .tekstblok{padding:24px 22px}
  /* De titels staan gecentreerd; de lopende tekst blijft links uitgelijnd */
  .kicker,.contact-kaart h2{text-align:center}
  .beeldmerk{justify-content:center}
  /* De alinea heeft een maximale regellengte, dus hij moet zelf gecentreerd worden */
  .kop-alinea{margin-left:auto;margin-right:auto}
  .kop-knoppen{justify-content:center}
  .kop-grid,.wat-grid{grid-template-columns:1fr;gap:36px}
  .kop-beeld{padding:80px 0}
  .kop-foto{max-width:330px}
  .kop-ring{width:min(430px,128%)}
  .kop{padding:24px 0 44px}
  .contact{padding:66px 0 70px}
  .stappen{grid-template-columns:1fr 1fr;gap:32px 20px}
  .stap:not(:last-child)::after{display:none}
  .kaarten,.org-lijst{grid-template-columns:1fr}
  .voorna-ring svg{display:none}
  .kring{display:none}
  .privacy-kaart{gap:16px}
  .privacy-rij{gap:0 16px;padding:22px 20px}
  .privacy-badge{width:44px;height:44px}
  .privacy-badge svg{width:24px;height:24px}
}
@media (min-width:921px){
  .kaart:nth-of-type(1),.kaart:nth-of-type(4){background:var(--licht)}
  .kaart:nth-of-type(2),.kaart:nth-of-type(3){background:var(--warm)}
}
@media (max-width:640px){
    /* Lange samenstellingen mogen afbreken, anders springt een woord als
     ontwikkelbedrijven in zijn geheel naar de volgende regel en blijft er een gat. */
  p, h3, .kaart p, .stap p, .org-item p, .privacy-rij p, .kop-alinea{
    -webkit-hyphens:auto;
    hyphens:auto;
  }
  .container{padding:0 20px}
  /* De drie regels onder elkaar, links uitgelijnd, met het geheel gecentreerd.
     Zo staan de vinkjes recht onder elkaar in plaats van per regel gecentreerd. */
  .strook ul{flex-direction:column;align-items:flex-start;gap:12px;width:max-content;max-width:100%;margin:0 auto}
  .strook li{align-items:flex-start}
  .strook svg{margin-top:4px}
  .balk-inner{padding:15px 20px}
  .cv-stapel{width:min(640px,86%)}
  .cv-vel-1{transform:rotate(2deg) translate(6px,-3px)}
  .cv-vel-2{transform:rotate(4deg) translate(13px,-6px)}
  .connector{top:-95px;left:20px}
  .balk-sub{display:none}
  .balk-naam{font-size:17px}
  .kop-knoppen .btn{flex:1 1 auto;text-align:center}
  .kop-foto{max-width:280px}
  .kop-beeld{padding:64px 0}
  .kop-ring{width:min(360px,124%)}
  .org-item{padding:32px 22px 24px}
  .band{padding:60px 0}
  .contact-kaart h2{font-size:26px}
  .stappen{grid-template-columns:1fr}
  .contact-kaart{padding:26px 22px}
}