/* ===== 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 */
/* De ring staat gecentreerd op .kop-beeld, dus hoeveel boog er onder de foto
   uitkomt is (ringhoogte - hoogte van kop-beeld) / 2. De kopfoto is staander
   dan de vorige, daarom is de foto iets smaller en de ring iets groter: zo
   blijft er net als voorheen ongeveer 60 px boog onder de foto zichtbaar. */
.kop-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;width:min(499px,140%);height:auto;opacity:.15}
.kop-foto{position:relative;z-index:1;width:100%;max-width:300px;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 36px}
/* nowrap: een item breekt nooit halverwege af. Past het niet, dan schuift het
   als geheel naar de volgende regel, in plaats van twee regels te worden
   terwijl de rest op een regel staat. */
.strook li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;white-space:nowrap}
.strook svg{flex:none}
/* Gemeten: vier items naast elkaar passen tot en met 1060 px. Daaronder een
   raster van twee bij twee, zodat er nooit drie-en-een ontstaat. Het breekpunt
   ligt op 1080 voor wat marge bij andere browsers en lettertypen. Hier mag een
   item wel afbreken, anders zou het raster breder worden dan het scherm. */
@media (max-width:1079px){
  .strook ul{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:12px 36px}
  .strook li{align-items:flex-start;white-space:normal}
  .strook svg{margin-top:4px}
}

/* ===== 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)}
/* 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}

/* 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 en 6: twee tekstblokken naast elkaar ===== */
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
/* De twee voorbeeldkaartjes naast elkaar, met het pijltje ertussen. */
.voorbeeld-rij{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:48px}
.voorbeeld-rij .voorna-pijl{align-self:center}
.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{display:flex;align-items:center;justify-content:center}
.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}
/* De uitlegvideo. Staat bovenin de sectie, direct onder de blauwe strook. */
.videoblok{position:relative}
.uitlegvideo{width:100%;height:auto;display:block;border-radius:12px;box-shadow:var(--schaduw);background:var(--zacht)}
/* De grote afspeelknop midden op het beginbeeld. Wit met een zwart driehoekje,
   in dezelfde stijl als de knop die Chrome op Android zelf toont. Verdwijnt
   zodra de video speelt; daarna neemt de bedieningsbalk van de browser het
   over. Zolang deze knop zichtbaar is, staat die balk uit (zie script.js),
   anders tonen telefoons twee afspeelknoppen over elkaar. */
.video-start{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);
  border:0;border-radius:50%;cursor:pointer;color:#111;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 22px rgba(30,42,56,.28);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.video-start svg{width:40%;height:40%;margin-left:8%;display:block}
.video-start:hover{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.video-start[hidden]{display:none}
/* Hieronder staat de opmaak van het splitscherm met de telefoon. Die wordt
   niet meer gebruikt, maar blijft staan voor als het beeld ooit terugkomt. */
.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(56px, 15vw, 175px);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(560px,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}
.venster-functie{display:block;font-weight:400;font-size:14.5px;color:var(--inkt-zacht);margin-top:2px}
.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{grid-template-columns:1fr;gap:36px}
  /* Op een smal scherm komen de twee blokken en de twee kaartjes onder elkaar.
     Het pijltje draait dan een kwartslag mee, van naar rechts naar omlaag. */
  .tweeluik{grid-template-columns:1fr;gap:20px}
  .voorbeeld-rij{grid-template-columns:1fr;gap:10px;margin-top:36px}
  .voorbeeld-rij .voorna-pijl{transform:rotate(90deg)}
  .kop-beeld{padding:80px 0}
  .kop-foto{max-width:306px}
  .kop-ring{width:min(457px,136%)}
  .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}
  .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}
  /* Op een telefoon is twee bij twee te krap. Gemeten op 390 px: elk item wordt
     dan twee of drie regels hoog en de balk steekt 16 px buiten het scherm,
     waardoor de pagina zijwaarts schuift. Daarom hier alles onder elkaar, links
     uitgelijnd, met het geheel gecentreerd. Zo staan de vinkjes recht onder
     elkaar in plaats van per regel gecentreerd. */
  .strook ul{display:flex;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(560px,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:259px}
  .kop-beeld{padding:64px 0}
  .kop-ring{width:min(382px,132%)}
  .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}
}