/* ==========================================================================
   Effi · site.css — het design system en de pagina's
   De vaste set en de bouwstenen staan beschreven in design-system/DESIGN.md;
   de levende stijlgids is design-system/index.html.
   1. Lettertype   2. Tokens   3. Basis   4. Bouwstenen   5. Header   6. Footer
   7. Homepage: opening en film   8. Homepage: secties   9. Dienstpagina's
   10. Werkwijze   11. Minder beweging
   Afspraak: kleur, maat, vorm, schaduw en tijd komen uit de tokens (2). Ruimte kies je
   uit de reeks --ruimte-*; fijner mag alleen binnen een klein onderdeel, zoals een label.
   ========================================================================== */

/* ---------- 1. lettertype: Onest, zelf gehost (SIL Open Font License) ---------- */
@font-face{font-family:"Onest"; src:url("../fonts/onest-vf.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
/* tijdelijk lettertype met de maten van Onest: er verspringt niets als Onest binnenkomt */
@font-face{font-family:"Onest Fallback"; src:local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust:104%; ascent-override:93%; descent-override:30%; line-gap-override:0%}

/* ---------- 2. tokens ---------- */
:root{
  /* kleur: merk, alles uit het logo */
  --inkt:#0C1832;
  --blauw:#1069E8;
  --lucht:#12EEFA;
  /* kleur: vlakken */
  --papier:#FFFFFF;
  --wolk:#EEF4FB;
  --blauw-zacht:#E3EEFD;
  --foto-donker:#141210;
  /* kleur: tekst en lijnen */
  --tekst:#27324A;
  --tekst-zacht:#5B6782;
  --lijn:#D9E2EF;
  --lijn-zacht:#E9EEF4;
  /* kleur: op donker (inkt of een foto) */
  --op-donker:#FFFFFF;
  --op-donker-zacht:#DCE2EC;
  --op-donker-stil:#AAAEB7;
  /* kleur: bij hover */
  --inkt-hover:#17264D;
  --blauw-hover:#0D5BCC;
  --wolk-hover:#E3ECF7;

  /* letters: acht maten, elk met een vaste regelafstand */
  --font:"Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maat-titel:clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem); /* 36 tot 60 */
  --maat-kop2:clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);   /* 30 tot 44 */
  --maat-kop3:1.375rem;   /* 22 */
  --maat-intro:1.25rem;   /* 20 */
  --maat-tekst:1.0625rem; /* 17 */
  --maat-ui:.9375rem;     /* 15: knoppen, menu, ondertitels */
  --maat-klein:.875rem;   /* 14 */
  --maat-mini:.75rem;     /* 12: labels en kleine tekst in de animaties */
  --regel-titel:1.05;
  --regel-kop2:1.1;
  --regel-kop3:1.25;
  --regel-intro:1.5;
  --regel-tekst:1.6;
  --regel-ui:1.4;
  --regel-klein:1.5;
  --regel-krap:1.3;       /* labels en regels binnen een animatie */

  /* vorm: het blaadje (rond linksboven en rechtsonder, scherp rechtsboven en linksonder), hoeken en rond */
  --blad-xl:48px 8px 48px 8px;
  --blad-l:32px 6px 32px 6px;
  --blad-m:20px 4px 20px 4px;
  --blad-s:12px 3px 12px 3px;
  --hoek-s:4px;
  --hoek-m:8px;
  --hoek-l:12px;
  --hoek-xl:16px;
  --rond:999px;

  /* ruimte: de reeks */
  --ruimte-4:4px; --ruimte-8:8px; --ruimte-12:12px; --ruimte-16:16px; --ruimte-20:20px; --ruimte-24:24px; --ruimte-28:28px;
  --ruimte-32:32px; --ruimte-40:40px; --ruimte-48:48px; --ruimte-56:56px; --ruimte-64:64px; --ruimte-96:96px; --ruimte-144:144px;
  --breedte:1200px;
  --rand:var(--ruimte-24);
  --kop-h:76px;
  --kop-ruimte:72px;

  /* diepte: een schaduw valt naar beneden en heeft een zachte rand */
  --schaduw-kaart:0 12px 28px -22px rgba(12,24,50,.45);
  --schaduw-balk:0 10px 28px -22px rgba(12,24,50,.25);
  --schaduw-balk-sterk:0 14px 36px -22px rgba(12,24,50,.35);
  --schaduw-menu:0 22px 44px -24px rgba(12,24,50,.32);
  --schaduw-blad:drop-shadow(0 6px 10px rgba(16,105,232,.28));
  --schaduw-muis:drop-shadow(0 3px 4px rgba(12,24,50,.3));
  --schaduw-op-foto:0 4px 40px rgba(0,0,0,.4);

  /* beweging: snel op gang, zacht afremmen */
  --snel:.15s;
  --normaal:.3s;
  --traag:.7s;
  --curve:cubic-bezier(.2,.8,.2,1);
}

/* ---------- 3. basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--papier); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; font-family:var(--font); font-size:var(--maat-tekst); line-height:var(--regel-tekst); color:var(--tekst); background:var(--papier); -webkit-font-smoothing:antialiased}
::selection{background:rgba(18,238,250,.38); color:var(--inkt)} /* geselecteerde tekst in Lucht */
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding-left:1.2rem}
h2,h3{color:var(--inkt); text-wrap:balance}
p{text-wrap:pretty} /* geen los woord op de laatste regel */
h2{font-size:var(--maat-kop2); font-weight:800; line-height:var(--regel-kop2); letter-spacing:-.015em}
h3{font-size:var(--maat-kop3); font-weight:700; line-height:var(--regel-kop3); letter-spacing:-.01em}
img{display:block; max-width:100%; height:auto}
picture{display:block} /* standaard inline: dan doet een marge erboven niets */
a{color:var(--inkt); text-decoration:underline; text-decoration-color:var(--blauw); text-decoration-thickness:2px; text-underline-offset:3px}
a:not(.knop):hover{color:var(--blauw)}
:focus-visible{outline:3px solid var(--blauw); outline-offset:3px; border-radius:var(--hoek-s)}
.container{max-width:var(--breedte); margin-inline:auto; padding-inline:var(--rand)}
.punt{color:var(--blauw)}
.klein{font-size:var(--maat-klein); line-height:var(--regel-klein)}
.zacht{color:var(--tekst-zacht)}
.intro{font-size:var(--maat-intro); line-height:var(--regel-intro)}
.mini{font-size:var(--maat-mini); font-weight:600; line-height:var(--regel-krap); color:var(--tekst-zacht)}
.nw{white-space:nowrap} /* houdt een woord als AI-oplossingen heel, zonder "AI-" los aan het eind van een regel */
.wm{display:block; height:auto; aspect-ratio:389.8/142.4; overflow:visible; color:var(--inkt)}
.skiplink{position:fixed; left:16px; top:-100px; z-index:100; background:var(--inkt); color:var(--op-donker); padding:12px 16px; border-radius:var(--hoek-m); font-weight:600; text-decoration:none}
.skiplink:focus{top:16px}
a.skiplink:hover, a.skiplink:focus{color:var(--op-donker)}

/* ---------- 4. bouwstenen ---------- */
/* sectie en kop */
.sectie{padding-block:var(--ruimte-96); scroll-margin-top:100px}
@media (min-width:760px){ .sectie{padding-block:var(--ruimte-144)} }
.sectie + .sectie{padding-top:0}
.kop-blok{max-width:50ch; margin-bottom:var(--ruimte-32)}

/* knop: inkt op licht; wit of omlijnd op een foto of inkt. Per plek één hoofdknop */
.knop{display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-weight:600; font-size:var(--maat-ui); line-height:1; padding:14px 20px; min-height:44px; border-radius:var(--hoek-l); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background-color var(--snel), color var(--snel), border-color var(--snel)}
.knop svg{width:1em; height:1em; flex:none}
.knop-primair{background:var(--inkt); color:var(--op-donker)}
.knop-primair:hover{background:var(--inkt-hover); color:var(--op-donker)}
.knop-licht{background:var(--papier); color:var(--inkt)}
.knop-licht:hover{background:var(--wolk); color:var(--inkt)}
.knop-rand{background:transparent; color:var(--op-donker); border-color:rgba(255,255,255,.85)}
.knop-rand:hover{background:rgba(255,255,255,.12); color:var(--op-donker)}
.knop-klein{height:42px; min-height:42px; padding:0 16px; font-size:var(--maat-klein); font-weight:500; border-radius:var(--hoek-m)}
.knop-groot{min-height:52px; padding:16px 24px; font-size:var(--maat-tekst)} /* alleen de knop in de afsluiter */
.knoppen{display:flex; flex-wrap:wrap; gap:var(--ruimte-12); align-items:center}

/* label: een status in één of twee woorden */
.label{display:inline-flex; align-items:center; gap:6px; justify-self:start; font-size:var(--maat-mini); font-weight:600; line-height:var(--regel-krap); white-space:nowrap; border-radius:var(--rond); padding:4px 10px; background:var(--blauw-zacht); color:var(--blauw-hover)}
.label--inkt{background:var(--inkt); color:var(--op-donker)}
.label--zacht{background:var(--lijn-zacht); color:var(--tekst)}
.label svg{flex:none; width:12px; height:12px}

/* kruimelpad, op een foto */
.kruimelpad{display:flex; flex-wrap:wrap; align-items:center; gap:var(--ruimte-8); font-size:var(--maat-klein); font-weight:500; color:var(--op-donker); text-shadow:0 2px 16px rgba(0,0,0,.5)}
.kruimelpad a{color:var(--op-donker); text-decoration:none}
.kruimelpad a:hover{color:var(--op-donker); text-decoration:underline}
.kruimelpad svg{flex:none; width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))} /* het pijltje tussen Diensten en de pagina */

/* notitie: een korte opmerking naast de tekst, met één klein icoon */
.notitie{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; max-width:52ch; padding:14px 16px; background:var(--wolk); border-radius:var(--blad-s); font-size:var(--maat-klein); line-height:var(--regel-klein)}
.notitie svg{width:18px; height:18px; margin-top:1px; color:var(--blauw)}

/* lijst met vinkjes */
.lijst{display:grid; gap:10px}
.vink{display:flex; gap:.6rem; align-items:flex-start}
.vink svg{flex:none; width:1.25rem; height:1.25rem; margin-top:.25rem; color:var(--blauw)}

/* stappen: genummerd, omdat de volgorde ertoe doet */
.stappen{list-style:none; padding:0; display:grid; gap:var(--ruimte-24); counter-reset:s}
.stappen li{counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:var(--ruimte-16); align-items:start}
.stappen li::before{content:counter(s); width:44px; height:44px; border-radius:var(--rond); background:var(--inkt); color:var(--op-donker); font-weight:800; display:grid; place-items:center}
.stappen h3{font-size:var(--maat-tekst); margin-bottom:4px}

/* kaart: de hele kaart is de link. Onder elkaar tot 900 px, daarboven naast elkaar;
   subgrid (via li en kaart): breekt één titel af, dan staan vraag en link toch op één hoogte */
.kaarten{list-style:none; padding:0; display:grid; gap:var(--ruimte-16); grid-template-columns:minmax(0,1fr)}
a.kaart{display:grid; grid-template-rows:auto 1fr auto; gap:var(--ruimte-12); padding:28px 28px 24px; background:var(--wolk); border-radius:var(--blad-l); color:var(--tekst); text-decoration:none; transition:background-color var(--snel)}
a.kaart:hover{background:var(--wolk-hover); color:var(--tekst)}
@media (min-width:900px){ .kaarten{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ruimte-24)} .kaarten > li{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0} a.kaart{grid-row:span 3; grid-template-rows:subgrid; row-gap:var(--ruimte-12)} }
.kaart__meer{display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--ruimte-8); font-weight:600; color:var(--inkt); transition:color var(--snel)}
.kaart__meer svg{width:1em; height:1em; transition:transform var(--normaal) var(--curve)}
.kaart:hover .kaart__meer{color:var(--blauw)}
.kaart:hover .kaart__meer svg{transform:translateX(4px)}

/* afsluiter: de kennismaking, op elke pagina de laatste sectie. In het midden een grote kop, één zin, één knop
   en een rustige zin eronder; geen vlak en geen foto (docs/09). De ruimte erboven en eronder komt van .sectie */
.afsluiter{text-align:center}
.afsluiter__inhoud{display:grid; justify-items:center; gap:var(--ruimte-20)}
.afsluiter__kop{max-width:20ch; font-size:var(--maat-titel); font-weight:800; line-height:var(--regel-titel); letter-spacing:-.03em}
.afsluiter__tekst{max-width:44ch; font-size:var(--maat-intro); line-height:var(--regel-intro); color:var(--tekst-zacht)}
.afsluiter__inhoud > .knop{margin-top:var(--ruimte-12)}
.afsluiter__klein{max-width:62ch; font-size:var(--maat-klein); line-height:var(--regel-klein); color:var(--tekst-zacht); text-wrap:balance}

/* kop-split: links de kop, rechts één zin. Op een groot scherm naast elkaar, op de telefoon onder elkaar */
.kop-split{display:grid; gap:var(--ruimte-16); margin-bottom:var(--ruimte-48)}
@media (min-width:900px){ .kop-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--ruimte-56); align-items:end; margin-bottom:var(--ruimte-64)} }
.kop-split p{max-width:46ch; font-size:var(--maat-intro); line-height:var(--regel-intro); color:var(--tekst-zacht)}

/* drietal: drie korte uitspraken naast elkaar, elk met een lijn in inkt erboven */
.drietal{list-style:none; margin:0; padding:0; display:grid; gap:var(--ruimte-32)}
@media (min-width:900px){ .drietal{grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--ruimte-40)} }
.drietal li{display:grid; gap:var(--ruimte-8); align-content:start; padding-top:var(--ruimte-20); border-top:2px solid var(--inkt)}
.drietal h3{font-size:var(--maat-kop3)}
.drietal p{color:var(--tekst-zacht)}

/* stappenraster: stappen in een raster, met een groot cijfer en de blauwe punt van de koppen */
.stappenraster{list-style:none; margin:0; padding:0; display:grid; gap:var(--ruimte-40) var(--ruimte-32)}
@media (min-width:700px){ .stappenraster{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1000px){ .stappenraster{grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--ruimte-56) var(--ruimte-40)} }
.stappenraster li{display:grid; gap:var(--ruimte-8); align-content:start}
.stappenraster__nr{font-size:var(--maat-kop2); font-weight:800; line-height:var(--regel-kop2); letter-spacing:-.02em; color:var(--inkt)}
.stappenraster h3{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:var(--maat-kop3)}
.stappenraster p{max-width:40ch; color:var(--tekst-zacht)}
/* als kaarten: elke stap in een eigen zacht vlak (Wolk), zoals de kaarten op de homepage (Werkwijze) */
.stappenraster.stappenraster--kaarten{gap:var(--ruimte-24)}
.stappenraster--kaarten li{padding:var(--ruimte-32); background:var(--wolk); border-radius:var(--blad-l)}

/* stelling: één grote zin op een zacht vlak over de hele breedte */
.stelling{padding-block:var(--ruimte-96); background:var(--wolk)}
@media (min-width:760px){ .stelling{padding-block:var(--ruimte-144)} }
.stelling__kop{max-width:18ch; font-size:var(--maat-titel); line-height:var(--regel-titel); letter-spacing:-.03em}
.stelling .intro{max-width:52ch; margin-top:var(--ruimte-24); color:var(--tekst-zacht)}
/* met een foto in het blaadje ernaast: tekst links, foto rechts; op de telefoon de foto eronder */
.stelling__raster{display:grid; gap:var(--ruimte-48); align-items:center}
@media (min-width:900px){ .stelling__raster{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--ruimte-64)} }

/* tekstlink: een link met een pijl, naast een knop of onder een sectie */
.tekstlink{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; color:var(--inkt); text-decoration:none}
.tekstlink svg{flex:none; width:1em; height:1em; transition:transform var(--normaal) var(--curve)}
.tekstlink:hover svg{transform:translateX(4px)}

/* foto's: de foto zelf in de vorm van het blaadje, of een rustige plek voor een foto die nog komt */
.blad-foto img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:60% center; clip-path:url(#bladClip)}
.foto-volgt{display:grid; place-items:end start; padding:24px 28px; background:linear-gradient(160deg, var(--wolk-hover), var(--wolk)); font-size:var(--maat-klein); font-weight:600; color:var(--tekst-zacht)}

/* opening met foto: kruimelpad, kop en twee knoppen op één grote foto (hooguit 680 px hoog), naar het voorbeeld van
   Moneybird. Geen gekleurde laag: alleen een verloop in Foto-donker linksonder en onderin, en een zachte schaduw achter
   de kop. De onderkant is recht (docs/10) en de kop sluit niet af met een punt. --fp = brandpunt van de foto */
.opening{position:relative; isolation:isolate; display:grid; align-items:end; min-height:min(100svh, 680px); padding:128px 0 var(--ruimte-64); overflow:hidden; color:var(--op-donker); background-color:var(--foto-donker)} /* donkere grond: leesbaar zolang de foto laadt */
@media (min-width:760px){ .opening{padding-bottom:80px} }
.opening__foto{position:absolute; inset:0; z-index:-1}
.opening__foto img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--fp, 50% 40%)}
/* het verloop is Foto-donker (#141210) met oplopende dekking */
.opening__foto::after{content:""; position:absolute; inset:0; background:linear-gradient(72deg, rgba(20,18,16,.86) 0%, rgba(20,18,16,.66) 30%, rgba(20,18,16,0) 62%), linear-gradient(0deg, rgba(20,18,16,.5) 0%, rgba(20,18,16,0) 42%)}
/* op de telefoon en op een staand scherm staat de tekst over bijna de hele breedte: dan komt het verloop van onder hoger op */
@media (max-width:759px), (max-aspect-ratio:1/1){ .opening__foto::after{background:linear-gradient(72deg, rgba(20,18,16,.86) 0%, rgba(20,18,16,.66) 30%, rgba(20,18,16,0) 62%), linear-gradient(0deg, rgba(20,18,16,.85) 0%, rgba(20,18,16,.62) 40%, rgba(20,18,16,0) 72%)} }
.opening__inhoud{width:100%; display:grid; gap:var(--ruimte-16); justify-items:start} /* width: anders krimpt de container in het grid tot de tekstbreedte */
.opening h1{max-width:15ch; font-size:var(--maat-titel); font-weight:800; line-height:var(--regel-titel); letter-spacing:-.03em; color:var(--op-donker); text-wrap:balance; text-shadow:var(--schaduw-op-foto)}
.opening .knoppen{margin-top:var(--ruimte-16)}
.opening .intro{max-width:44ch; color:var(--op-donker-zacht); text-shadow:var(--schaduw-op-foto)} /* een zin onder de kop, zoals op Werkwijze */

/* carrousel met voorbeelden: één tegelijk in beeld, met een eigen foto. Bladeren met pijlen, stippen, pijltjestoetsen of vegen */
.carrousel__kop{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--ruimte-16) var(--ruimte-24); flex-wrap:wrap; margin-bottom:var(--ruimte-32)}
.carrousel__kop .kop-blok{margin-bottom:0}
.carrousel__knoppen{display:flex; align-items:center; gap:10px}
.carrousel__teller{min-width:4.5em; text-align:right; font-size:var(--maat-klein); font-weight:600; color:var(--tekst-zacht)}
.carrousel__knop{width:44px; height:44px; padding:0; border:1px solid var(--lijn); border-radius:var(--rond); background:var(--papier); color:var(--inkt); display:grid; place-items:center; cursor:pointer; transition:background-color var(--snel), border-color var(--snel), opacity var(--snel)}
.carrousel__knop:hover{background:var(--wolk); border-color:var(--wolk-hover)}
.carrousel__knop:disabled{opacity:.35; cursor:default; background:var(--papier); border-color:var(--lijn)}
.carrousel__knop svg{width:18px; height:18px}
.carrousel__knop[data-stap="-1"] svg{transform:scaleX(-1)}
.carrousel{display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:var(--ruimte-32); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none}
.carrousel::-webkit-scrollbar{display:none}
.carrousel:focus-visible{outline-offset:6px}
.voorbeeld{scroll-snap-align:start; scroll-snap-stop:always; display:grid; gap:var(--ruimte-24); align-items:center; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .voorbeeld{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--ruimte-56)} }
.voorbeeld__foto{aspect-ratio:4/3; border-radius:var(--blad-l); overflow:hidden}
.voorbeeld__foto img{width:100%; height:100%; object-fit:cover; object-position:var(--fp, 50% 50%)}
.voorbeeld__tekst{display:grid; gap:14px; align-content:center; justify-items:start}
.voorbeeld__tekst > .voorbeeld__rij, .voorbeeld__tekst > .voorbeeld__kop{justify-self:stretch; max-width:52ch}
.voorbeeld__kop{display:grid; gap:4px; align-content:start}
.voorbeeld__wie{font-size:var(--maat-klein); color:var(--tekst-zacht)}
.voorbeeld__rij{display:grid; gap:2px; align-content:start}
.voorbeeld__rij b{justify-self:start; display:inline-flex; align-items:flex-start; font-size:var(--maat-klein); font-weight:600; color:var(--tekst-zacht)}
/* "Met Effi" in het blauw van de punten, met het blaadje rechtsboven zoals in het logo */
.voorbeeld__rij .met-effi{color:var(--blauw)}
.met-effi svg{width:.8em; height:.67em; margin:.1em 0 0 2px}
.voorbeeld__rij p{font-size:var(--maat-tekst); line-height:var(--regel-tekst)}
.voorbeeld__rij.is-jij{padding-top:14px; border-top:1px solid var(--lijn)}
.voorbeeld__rij.is-jij b{color:var(--inkt)}
.carrousel__stippen{display:flex; justify-content:center; gap:4px; margin-top:var(--ruimte-20)}
.carrousel__stip{min-width:24px; height:24px; padding:0 2px; border:0; background:none; display:grid; place-items:center; cursor:pointer}
.carrousel__stip::before{content:""; width:10px; height:10px; border-radius:var(--rond); background:var(--lijn); transition:background-color var(--normaal)}
.carrousel__stip[aria-current="true"]::before{width:28px; background:var(--inkt)}

/* speler: een kort filmpje met ondertitels, dat de bezoeker zelf start (js/dienst.js). In de HTML staat het eindbeeld
   met de laatste ondertitel; dat blijft staan zonder JavaScript, met minder beweging en na afloop. Tijdens het spelen staat
   .speelt op het vlak en krijgt elk onderdeel .aan zodra het zijn eindstand bereikt. Niets verandert van maat terwijl hij
   speelt: wat wisselt, ligt op dezelfde plek over elkaar (grid-area 1/1) */
.speler{position:relative; display:grid}
.speler__vlak{position:relative; container-type:inline-size; display:grid; gap:var(--ruimte-16); background:var(--wolk); border-radius:var(--blad-l); padding:var(--ruimte-20)}
@media (min-width:760px){ .speler__vlak{padding:var(--ruimte-28)} }
.speler__vlak:focus-visible{border-radius:var(--blad-l)}
.speler__vlak.muisstart:focus{outline:none} /* gestart met de muis: geen focusrand om het hele vlak (met het toetsenbord blijft hij) */
.speler__vlak.direct, .speler__vlak.direct *{transition:none !important; animation:none !important} /* naar de beginstand of het eindbeeld, zonder overgang */
.speler__beeld .knop, .dp-keur{pointer-events:none; cursor:default} /* de knoppen in het filmpje zijn een plaatje */
.speler__blad{position:absolute; top:-14px; right:28px; width:38px; height:32px; filter:var(--schaduw-blad)}

/* muis: een aanwijzer met naamkaartje. "Jij" (inkt) is wat jij doet, "Effi (AI)" (blauw) wat AI doet. Ze staan op hun
   plek met translate; een klik laat alleen de pijl even indrukken, vanuit de punt, met een kring eromheen */
.muis{display:none; --kleur:var(--inkt); color:var(--kleur)}
.muis--ai{--kleur:var(--blauw)}
.speelt .muis{display:block; position:absolute; left:0; top:0; z-index:3; opacity:0; pointer-events:none; transition:translate var(--traag) var(--curve), opacity var(--normaal)}
.muis svg{position:absolute; left:-4px; top:-3px; width:22px; height:22px; filter:var(--schaduw-muis); transform-origin:3.7px 2.3px}
.muis__naam{position:absolute; left:14px; top:17px; padding:3px 8px; border-radius:var(--blad-s); background:var(--kleur); color:var(--op-donker); font-size:var(--maat-mini); font-weight:600; line-height:var(--regel-krap); white-space:nowrap}
.muis::after{content:""; position:absolute; left:-12px; top:-12px; width:24px; height:24px; border:2px solid var(--kleur); border-radius:var(--rond); opacity:0}
.speelt .muis.zicht{opacity:1}
.muis.klik svg{animation:muis-druk .22s var(--curve)}
.muis.klik::after{animation:muis-kring .45s ease-out}
@keyframes muis-druk{50%{scale:.82}}
@keyframes muis-kring{from{opacity:.8; scale:.3} to{opacity:0; scale:1.3}}
.speelt .muis.direct{transition:none}

/* bericht: waarmee elke animatie begint, wat er binnenkomt */
.bericht{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--ruimte-12); align-items:center; padding:12px 16px; background:var(--papier); border-radius:var(--blad-m); transition:box-shadow var(--normaal), opacity var(--normaal), translate var(--normaal) var(--curve)}
.bericht__av{display:grid; place-items:center; width:34px; height:34px; border-radius:var(--rond); background:var(--wolk-hover); color:var(--inkt); font-size:var(--maat-mini); font-weight:700}
.bericht__tekst{display:grid; gap:1px}
.bericht__tekst b{color:var(--inkt); font-size:var(--maat-ui); line-height:var(--regel-ui)}
.focus-mail .bericht{box-shadow:inset 0 0 0 2px var(--blauw)}
.speelt .bericht--binnen:not(.aan){opacity:0; translate:0 -8px}
.stapel{display:grid; gap:var(--ruimte-12)} /* bericht boven, de rest eronder */

/* onder het beeld: de ondertitel, en op één vaste plek de voortgangslijn (tijdens het spelen) of "Speel opnieuw" (na afloop).
   De ondertitel houdt de hoogte van de langste zin (dienst.js meet die): er verspringt niets, ook niet als de knop verschijnt */
.speler__balk{display:grid; gap:6px}
.speler__ondertitel{display:flex; align-items:center; min-height:2.8em; font-size:var(--maat-ui); font-weight:600; line-height:var(--regel-ui); color:var(--inkt); transition:opacity var(--snel), translate var(--normaal) var(--curve)}
.speler__ondertitel.wissel-tekst{opacity:0; translate:0 4px}
.speler__regie{display:grid; align-items:center; min-height:36px}
.speler__regie[hidden]{display:none}
.speler__regie > *{grid-area:1/1}
.speler__voortgang{display:block; height:3px; border-radius:var(--rond); overflow:hidden; background:var(--lijn); opacity:0; pointer-events:none; transition:opacity var(--normaal)} /* ligt onzichtbaar over "Speel opnieuw": klikken gaan erdoorheen */
.speler__voortgang i{display:block; height:100%; background:var(--blauw); transform:scaleX(0); transform-origin:left center}
.speelt .speler__voortgang{opacity:1}
.speler__opnieuw{justify-self:end; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:0; border-radius:var(--hoek-m); background:var(--papier); font:inherit; font-size:var(--maat-klein); font-weight:600; line-height:1; color:var(--inkt); cursor:pointer; transition:background-color var(--snel)}
.speler__opnieuw:hover{background:var(--wolk-hover)}
.speler__opnieuw svg{width:16px; height:16px}
.speler__opnieuw.uit{visibility:hidden}

/* tot de bezoeker op play klikt, staat de beginstand wazig achter een playknop in de vorm van het blaadje.
   De knop zelf is doorzichtig: een waas erover viel ook over het onderste deel van het blaadje rechtsboven (.speler__blad)
   en trok er een streep doorheen */
.speler__beeld, .speler__balk{transition:filter var(--normaal) var(--curve), opacity var(--normaal)}
.speler__vlak.wacht > :is(.speler__beeld, .speler__balk){filter:blur(5px); opacity:.5}
.speler__play{position:absolute; inset:0; z-index:5; display:grid; place-content:center; justify-items:center; gap:var(--ruimte-16); padding:var(--ruimte-24); border:0; border-radius:var(--blad-l); background:none; font:inherit; text-align:center; cursor:pointer}
.speler__play[hidden]{display:none}
.speler__playknop{position:relative; width:88px; height:74px; display:grid; place-items:center; filter:drop-shadow(0 14px 24px rgba(16,105,232,.35)); transition:transform var(--normaal) var(--curve)}
.speler__playblad{position:absolute; inset:0; width:100%; height:100%}
.speler__playdriehoek{position:relative; width:30px; height:30px; margin:4px 0 0 2px; fill:var(--op-donker)}
.speler__play:hover .speler__playknop, .speler__play:focus-visible .speler__playknop{transform:scale(1.07)}
.speler__playtekst{max-width:28ch; padding:8px 14px; border-radius:var(--blad-s); background:rgba(255,255,255,.9); font-size:var(--maat-ui); font-weight:600; line-height:var(--regel-ui); color:var(--inkt)}

/* opening op wit: links de kop met één zin en een knop, rechts beeld (Werkwijze, Over Effi) */
.opening-wit{padding-top:calc(var(--kop-ruimte) + var(--ruimte-56))}
@media (min-width:760px){ .opening-wit{padding-top:calc(var(--kop-ruimte) + var(--ruimte-96))} }
.opening-wit__raster{display:grid; gap:var(--ruimte-48); align-items:center}
@media (min-width:960px){ .opening-wit__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--ruimte-64)} }
.opening-wit h1{max-width:13ch; font-size:var(--maat-titel); font-weight:800; line-height:var(--regel-titel); letter-spacing:-.03em; color:var(--inkt); text-wrap:balance}
.opening-wit .intro{max-width:44ch; margin-top:var(--ruimte-20); color:var(--tekst-zacht)}
.opening-wit .knoppen{margin-top:var(--ruimte-32); gap:var(--ruimte-12) var(--ruimte-24)}
.opening-wit .duo{width:100%; max-width:480px; justify-self:center}
.opening-wit__klein{margin-top:var(--ruimte-20); font-size:var(--maat-klein); line-height:var(--regel-klein); color:var(--tekst-zacht)}
/* een band direct na de opening krijgt ruimte erboven; een .sectie heeft die zelf al */
.opening-wit + .stelling{margin-top:var(--ruimte-96)}
@media (min-width:760px){ .opening-wit + .stelling{margin-top:var(--ruimte-144)} }
/* citaat: een kop die met een aanhalingsteken begint. Het teken hangt buiten de regel, zodat de letters op één lijn staan */
.citaat{text-indent:-.4em}
.opening-wit h1.citaat{max-width:20ch; font-size:var(--maat-kop2); line-height:var(--regel-kop2); letter-spacing:-.02em} /* een citaat is langer dan een gewone kop: een maat kleiner, zodat het op een regel of drie past */

/* portret: een persoon in de vorm van het beeldmerk (clipPath #bladClip), 4:5. Alle portretten hebben dezelfde uitsnede
   en de achtergrond Blauw-zacht; ze komen uit tools/portretten.html. In .duo staan er twee naast elkaar, de tweede iets lager */
.portret{display:block}
.portret img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:var(--blauw-zacht); clip-path:url(#bladClip)}
.persoon{display:grid; gap:var(--ruimte-16); margin:0}
.persoon figcaption{display:grid; gap:2px}
.persoon__naam{font-size:var(--maat-kop3); font-weight:700; line-height:var(--regel-kop3); letter-spacing:-.01em; color:var(--inkt)}
.persoon__rol{font-size:var(--maat-klein); line-height:var(--regel-klein); color:var(--tekst-zacht)}
.duo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--ruimte-16); align-items:start}
.duo > :nth-child(2){margin-top:var(--ruimte-40)}
@media (min-width:760px){ .duo{gap:var(--ruimte-24)} .duo > :nth-child(2){margin-top:var(--ruimte-64)} }

/* lijst met links: grote links onder elkaar met een lijn ertussen; de pijl schuift op bij hover */
.linklijst{list-style:none; margin:0; padding:0; border-top:1px solid var(--lijn)}
.linklijst li{border-bottom:1px solid var(--lijn)}
.linklijst a{display:flex; align-items:center; justify-content:space-between; gap:var(--ruimte-16); padding-block:var(--ruimte-24); font-size:var(--maat-kop3); font-weight:700; line-height:var(--regel-kop3); letter-spacing:-.01em; color:var(--inkt); text-decoration:none; transition:color var(--snel)}
.linklijst svg{flex:none; width:24px; height:24px; transition:transform var(--normaal) var(--curve)}
.linklijst a:hover{color:var(--blauw-hover)}
.linklijst a:hover svg{transform:translateX(6px)}

/* samenvatting: de hoofdpunten van een lange tekst in een zacht vlak, met vinkjes (.lijst en .vink) */
.samenvatting{padding:var(--ruimte-32); background:var(--wolk); border-radius:var(--blad-l)}
@media (min-width:760px){ .samenvatting{padding:var(--ruimte-40)} }
.samenvatting h2{margin-bottom:var(--ruimte-20); font-size:var(--maat-kop3); font-weight:700; line-height:var(--regel-kop3); letter-spacing:-.01em}

/* leestekst: een lange tekst om te lezen, zoals de privacyverklaring. Op desktop links een inhoudsopgave die blijft
   staan (.inhoudsopgave), rechts de tekst in een rustige kolom; op de telefoon alleen de tekst */
.leesraster{display:grid; gap:var(--ruimte-48)}
@media (min-width:960px){ .leesraster{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:var(--ruimte-64); align-items:start} }
.inhoudsopgave{display:none}
@media (min-width:960px){ .inhoudsopgave{display:block; position:sticky; top:calc(var(--kop-ruimte) + var(--ruimte-32))} }
.inhoudsopgave h2{margin-bottom:var(--ruimte-12); font-size:var(--maat-klein); font-weight:700; line-height:var(--regel-klein); letter-spacing:0; color:var(--tekst-zacht)}
.inhoudsopgave ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--lijn)}
.inhoudsopgave a{display:block; padding:6px 0 6px var(--ruimte-16); font-size:var(--maat-klein); line-height:var(--regel-klein); color:var(--tekst); text-decoration:none; transition:color var(--snel)}
.inhoudsopgave a:hover{color:var(--blauw-hover)}
.leestekst{max-width:60ch} /* ch is de breedte van een 0: 60ch is zo'n 75 tekens per regel */
.leestekst > section{scroll-margin-top:calc(var(--kop-ruimte) + var(--ruimte-32))}
.leestekst > section + section{margin-top:var(--ruimte-48); padding-top:var(--ruimte-48); border-top:1px solid var(--lijn-zacht)}
.leestekst h2{margin-bottom:var(--ruimte-16); font-size:var(--maat-kop3); font-weight:700; line-height:var(--regel-kop3); letter-spacing:-.01em}
.leestekst p + p{margin-top:var(--ruimte-16)}
.leestekst a{color:var(--blauw-hover); text-decoration:underline; text-underline-offset:3px}

/* termen: korte termen links en de uitleg rechts, met een lijn ertussen; op de telefoon onder elkaar */
.termen{margin:var(--ruimte-24) 0 0; border-top:1px solid var(--lijn)}
.termen > div{display:grid; gap:2px var(--ruimte-24); padding-block:var(--ruimte-12); border-bottom:1px solid var(--lijn)}
@media (min-width:600px){ .termen > div{grid-template-columns:120px minmax(0,1fr)} }
.termen dt{font-size:var(--maat-klein); font-weight:700; line-height:var(--regel-tekst); color:var(--inkt)}
.termen dd{margin:0}

/* ---------- 5. header: de zwevende balk van effisolutions.nl ----------
   Blijft altijd staan, ook als je scrolt; daarna krijgt hij een iets sterkere schaduw. "Diensten" klapt open
   zodra je er met de muis op komt (zie js/kop.js). */
.kop{position:fixed; top:12px; left:0; right:0; z-index:40; padding:0 16px}
.kop-balk{width:min(100%,1248px); margin:0 auto; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(217,226,239,.9); border-radius:var(--hoek-xl); box-shadow:var(--schaduw-balk); transition:box-shadow var(--normaal)}
.kop.is-gescrold .kop-balk{box-shadow:var(--schaduw-balk-sterk)}
.kop-rij{display:flex; align-items:center; gap:var(--ruimte-28); height:var(--kop-h); padding:0 var(--ruimte-24)}
.kop-logo{display:inline-flex; border-radius:var(--hoek-m); color:var(--inkt)}
.kop-logo .wm{width:71px; height:26px}
.kop-links > ul{display:flex; align-items:center; gap:var(--ruimte-28); margin:0 0 0 8px; padding:0; list-style:none; font-size:var(--maat-ui); font-weight:500; color:var(--tekst-zacht)} /* alleen de bovenste rij: het uitklapmenu staat onder elkaar */
.kop-links a{color:inherit; text-decoration:none; padding:6px 2px; border-radius:var(--hoek-m); transition:color var(--snel)}
.kop-links a:hover{color:var(--inkt)}
.kop-drop{position:relative}
/* een onzichtbare brug van "Diensten" naar het uitklapmenu: de muis verlaat het menu niet in het gat ertussen */
.kop-drop::after{content:""; position:absolute; left:0; right:0; top:100%; height:calc(var(--kop-h) / 2 + 8px - 50%)}
.kop-drop-knop{appearance:none; border:0; background:none; font:inherit; color:inherit; padding:6px 2px; border-radius:var(--hoek-m); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:color var(--snel)}
.kop-drop-knop:hover, .kop-drop.is-open .kop-drop-knop{color:var(--inkt)}
.kop-pijl{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--normaal) var(--curve)}
.kop-drop.is-open .kop-pijl{transform:rotate(180deg)}
.kop-sub{position:absolute; top:calc(50% + var(--kop-h) / 2 + 8px); left:-19px; display:grid; gap:2px; margin:0; padding:6px; min-width:244px; list-style:none; background:var(--papier); border:1px solid var(--lijn); border-radius:var(--hoek-l); box-shadow:var(--schaduw-menu); color:var(--inkt); visibility:hidden; opacity:0; transform:translateY(-4px); transition:opacity var(--snel) ease, transform var(--normaal) var(--curve), visibility 0s linear var(--normaal)}
.kop-drop.is-open .kop-sub, html:not(.js) .kop-drop:hover .kop-sub, html:not(.js) .kop-drop:focus-within .kop-sub{visibility:visible; opacity:1; transform:none; transition:opacity var(--snel) ease, transform var(--normaal) var(--curve), visibility 0s}
.kop-links .kop-sub a{display:flex; align-items:center; padding:10px 14px; border-radius:var(--hoek-m); white-space:nowrap; color:var(--inkt); transition:background-color var(--snel)}
.kop-links .kop-sub a:hover{background:var(--wolk); color:var(--inkt)}
.kop-links .kop-sub a[aria-current="page"], .kop-menu a[aria-current="page"]{color:var(--blauw-hover); font-weight:600} /* de pagina waar je bent */
.kop-cta{margin-left:auto}
.kop-menuknop{display:none; appearance:none; border:0; background:var(--wolk); color:var(--inkt); font:500 var(--maat-klein)/1 var(--font); height:42px; padding:0 16px; border-radius:var(--hoek-m); cursor:pointer}
.kop-menuknop:hover{background:var(--wolk-hover)}
.kop-menu{border-top:1px solid var(--lijn-zacht); padding:8px 24px 12px}
.kop-menu[hidden]{display:none}
.kop-menu ul{list-style:none; margin:0; padding:4px 0 8px}
.kop-menu li a{display:block; padding:12px 0; font-size:var(--maat-kop3); font-weight:600; letter-spacing:-.012em; color:var(--inkt); text-decoration:none; border-bottom:1px solid var(--lijn-zacht)}
.kop-menu li.kop-menu-sub a{font-size:var(--maat-ui); font-weight:500; color:var(--tekst-zacht); padding:10px 0 10px 20px}
.kop-menu li:last-child a{border-bottom:0}
@media (max-width:1000px){ :root{--kop-h:64px} .kop{top:8px; padding:0 10px} .kop-rij{gap:var(--ruimte-16); padding:0 var(--ruimte-16)} .kop-links{display:none} .kop-menuknop{display:inline-flex; align-items:center} .kop-menu{padding:8px 16px 12px} }
@media (max-width:640px){ .kop-cta{display:none} .kop-menuknop{margin-left:auto} }

/* ---------- 6. footer ---------- */
/* geen eigen marge boven: de laatste sectie van de pagina zorgt al voor de ruimte */
.voet{background:var(--inkt); color:var(--op-donker-zacht); padding-block:var(--ruimte-56) var(--ruimte-32)}
.voet-raster{display:grid; gap:var(--ruimte-32); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.voet .wm{width:84px; color:var(--op-donker); margin-bottom:14px}
.voet h2{font-size:var(--maat-ui); font-weight:700; letter-spacing:0; line-height:var(--regel-ui); margin-bottom:10px; color:var(--op-donker)}
.voet ul{list-style:none; padding:0; display:grid; gap:6px}
.voet a{text-decoration:none; color:var(--op-donker-zacht)}
.voet a:hover{color:var(--op-donker)}
.voet .mail{color:var(--op-donker); text-decoration:underline; text-decoration-color:var(--lucht)}
.voet-onder{margin-top:var(--ruimte-40); padding-top:var(--ruimte-20); border-top:1px solid rgba(255,255,255,.14); font-size:var(--maat-klein); color:var(--op-donker-stil)}

/* ---------- 7. homepage: de opening en de film ----------
   Het signatuurmoment van de homepage. De letters houden hier hun eigen maten (Held 52/36, en in sectie 2 de
   filmkop 48/36 en de intro 18/16), omdat de beweging daarop is afgestemd. */
.wm--hero{width:min(clamp(250px, 44vw, 640px), max(210px, (100svh - 400px) * 2.737)); color:var(--op-donker); opacity:var(--wo,1); transform:scale(var(--ws,1)); transform-origin:50% 55%}
/* het blaadje blijft op zijn plek en geeft af en toe een klein tikje om zijn steel:
   alleen draaien, nooit verplaatsen. Hooguit 1,3 graad: net genoeg om op te vallen. */
@keyframes tikje{0%,16%,100%{transform:rotate(0deg)} 3.5%{transform:rotate(-1.3deg)} 7%{transform:rotate(.7deg)} 10.5%{transform:rotate(-.3deg)} 13.5%{transform:rotate(.1deg)}}
html.motion .wm--hero .wm-dot{transform-box:fill-box; transform-origin:6% 98%; animation:tikje 4.4s cubic-bezier(.36,0,.3,1) 1.2s infinite}
html.motion .wm--hero.is-los .wm-dot{animation:none}

.held{position:relative; height:100vh; height:100svh; min-height:540px; overflow:hidden; background:var(--inkt); color:var(--op-donker); isolation:isolate}
.hero-foto{position:absolute; inset:0; z-index:-1; display:block}
.hero-foto img{width:100%; height:100%; max-width:none; object-fit:cover}
/* donker in het midden waar de tekst staat, lichter aan de randen waar de mensen staan.
   Zo licht als kan: nagemeten op de foto haalt de regel (20 px) in het slechtste geval ruim 5:1. */
.hero-foto::after{content:""; position:absolute; inset:0; background:
  radial-gradient(ellipse 55% 60% at 50% 48%, rgba(12,24,50,.52) 0%, rgba(12,24,50,.45) 55%, rgba(12,24,50,.33) 100%),
  linear-gradient(180deg, rgba(12,24,50,.09) 0%, rgba(12,24,50,.09) 70%, rgba(12,24,50,.33) 100%)}
.held__groep{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92%,960px); display:flex; flex-direction:column; align-items:center; text-align:center}
.held__h1{display:flex; flex-direction:column; align-items:center; font:700 52px/1.04 var(--font); letter-spacing:-.03em; color:var(--op-donker)}
.held__slogan{display:block; margin-top:48px; text-wrap:balance}
.held__slogan .w{display:inline-block; transform:translate(calc(var(--d,0) * 10px), calc(var(--d,0) * -8.4px)); opacity:calc(1 - var(--d,0))}
.mk{position:relative; white-space:nowrap}
.mk::after{content:""; position:absolute; left:.03em; right:.04em; bottom:-.04em; height:max(3px,.065em); border-radius:var(--rond); background:var(--lucht)}
.held__sub{margin-top:24px; max-width:46ch; font-size:20px; line-height:1.55; color:var(--op-donker-zacht); text-wrap:balance; opacity:var(--so,1)}
.held__meta{position:absolute; left:max(24px, calc((100% - 1200px) / 2 + 24px)); bottom:48px; font-size:13px; line-height:1.4; font-weight:500; color:var(--op-donker-zacht); opacity:var(--mo,1)}
.held__cue{position:absolute; left:50%; bottom:40px; margin-left:-11px; width:22px; height:26px; padding:0; border:0; background:none; cursor:pointer; color:var(--op-donker); opacity:var(--ho,1)}
.held__cue svg{display:block; width:22px; height:26px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:700px){ .held__h1{font-size:36px} .held__slogan{margin-top:32px} .held__sub{max-width:30ch; font-size:17px} .held__meta{left:0; right:0; bottom:104px; text-align:center} .br-d{display:none} }
@media (max-height:560px){ .held__meta, .held__cue{display:none !important} .held__h1{font-size:36px} .held__slogan{margin-top:24px} .held__sub{margin-top:12px; font-size:16px} }

/* sectie 2: wat Effi overneemt. Eén geheel, licht en gecentreerd */
.duik{position:relative; background:var(--wolk); color:var(--tekst)}
.duik__binnen{padding:calc(var(--kop-ruimte) + var(--ruimte-56)) 0 var(--ruimte-96)}
.duik__kop{display:grid; justify-items:center; text-align:center; gap:var(--ruimte-20); margin-bottom:var(--ruimte-56)}
.duik__h2{font-size:48px; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--inkt)}
.duik__r{display:block; width:max-content; max-width:100%; margin-inline:auto; white-space:nowrap}
.wm--kop{display:inline-block; width:auto; height:.72em; vertical-align:baseline; color:var(--inkt)}
.duik__intro{color:var(--tekst); font-size:1.125rem; line-height:1.6; max-width:62ch; margin-inline:auto; text-wrap:balance}
/* onder elkaar tot 900 px (geen 2 + 1 met een wees op tablets), daarboven drie naast elkaar */
.diensten{display:grid; gap:var(--ruimte-40) var(--ruimte-32); grid-template-columns:minmax(0,1fr); max-width:600px; margin-inline:auto}
/* subgrid: breekt één titel af, dan beginnen de drie teksten toch op dezelfde hoogte */
@media (min-width:900px){ .diensten{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none} .dienst{grid-row:span 2; grid-template-rows:subgrid} }
.dienst{display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:var(--ruimte-12); row-gap:var(--ruimte-8); align-content:start}
.dienst svg{grid-row:1; width:24px; height:24px; color:var(--blauw); margin-top:5px}
.dienst h3{grid-column:2; font-size:var(--maat-kop3)}
.dienst p{grid-column:2}
.sfeer{margin-top:var(--ruimte-96)}
.sfeer img{width:100%; aspect-ratio:2/1; object-fit:cover; object-position:center 40%; border-radius:var(--blad-l)}
@media (max-width:700px){ .duik__binnen{padding-top:calc(var(--kop-ruimte) + var(--ruimte-32)); padding-bottom:var(--ruimte-64)} .duik__h2{font-size:36px} .duik__intro{font-size:1rem; text-wrap:pretty} .sfeer{margin-top:var(--ruimte-64)} .sfeer img{aspect-ratio:4/3; object-position:60% center} }

/* de film (alleen met beweging): de stage blijft staan zolang de film loopt. Opening,
   ring, veeg en blaadje beslaan precies het scherm; sectie 2 wordt door het blaadje heen
   zichtbaar. Na de landing scrolt alles gewoon mee (zie js/film.js). */
.ring, .trail, .mark, .mark-schaduw{display:none}
html.motion .stage{position:sticky; top:0; min-height:100vh; min-height:100svh; overflow:hidden; background:var(--papier)}
html.motion .held{position:absolute; top:0; left:0; right:0; height:100vh; height:100svh; min-height:0; z-index:1; transform-origin:var(--po,50% 50%); transform:scale(var(--sp,1))}
html.motion .duik{z-index:2; min-height:100vh; min-height:100svh; opacity:0; pointer-events:none}
html.motion .duik__binnen{transform-origin:var(--so,50% 50%); transform:scale(var(--ss,1))}
html.motion .ring{display:block; position:absolute; top:0; left:0; z-index:6; width:100%; height:100vh; height:100svh; overflow:visible; pointer-events:none; visibility:hidden}
html.motion .trail{display:block; position:absolute; top:0; left:0; z-index:7; width:100%; height:100vh; height:100svh; pointer-events:none}
html.motion .mark-schaduw{display:block; position:absolute; left:0; top:0; z-index:7; width:200px; height:200px; opacity:0; pointer-events:none; background:radial-gradient(closest-side, rgba(12,24,50,.3), rgba(12,24,50,0))}
html.motion .mark{display:block; position:absolute; left:0; top:0; z-index:8; width:320px; height:268.66px; visibility:hidden; pointer-events:none}
.mark svg{display:block; width:100%; height:100%; overflow:visible}

/* ---------- 8. homepage: de lichte secties ---------- */
/* Zo werken we: zodra er twee kolommen zijn (vanaf 776 px) staat de foto links en de tekst rechts; op de telefoon eerst de tekst */
.werkwijze{display:grid; gap:var(--ruimte-48); align-items:center; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
@media (min-width:776px){ .werkwijze .blad-foto{order:-1} }
.werkwijze__link{margin-top:var(--ruimte-24)}

/* ---------- 9. dienstpagina's (diensten/*.html, met js/dienst.js) ----------
   De bouwstenen (opening, carrousel, speler) staan in 4; hier alleen wat bij de dienstpagina's hoort.
   Alles met dp- is van één animatie: het lijstje (workflow), de twee kanten (AI) en de lijst en de app (software). */
.dp h2[id]{scroll-margin-top:110px}

/* uitleg: tekst links, de enige animatie van de pagina rechts */
.dp-uitleg{display:grid; gap:var(--ruimte-40); align-items:center; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .dp-uitleg{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--ruimte-64)} }
.dp-uitleg__tekst{display:grid; gap:var(--ruimte-16); justify-items:start}
.dp-uitleg__tekst p{max-width:52ch}

/* workflow en AI: twee keer hetzelfde werk, na elkaar, eerst zonder en dan met Effi. Workflow: de onboarding van een nieuwe
   klant (met de hand); AI: een klantmail (met ChatGPT). Het bericht schuift van links het kader in (.dp-binnen),
   dan eerst met de hand (.fase-hand: het lijstje van Effi wacht, gedimd) en daarna met Effi (.fase-effi: de hand stapt terug).
   AI vinkt meteen af (.flits); alleen het contract wacht op jou (.wacht-op-jou) tot jij op "Keur goed" klikt. Aan het eind
   omcirkelt een pen de 5 minuten van Effi (.dp-cirkel). De klokken hebben tabulaire cijfers, zodat er niets verspringt */
@keyframes dp-tik{to{transform:rotate(360deg)}}
@keyframes dp-pop{from{transform:scale(.8)}}
@keyframes dp-vink{from{transform:scale(.55)}}
@keyframes dp-flits{from{opacity:1} to{opacity:0}}
/* het bericht schuift binnen; de omslag loopt tot de rand van het vlak (over de padding heen) en knipt af wat er nog buiten zit */
.dp-binnen{overflow:hidden; margin-inline:-20px; padding-inline:20px}
@media (min-width:760px){ .dp-binnen{margin-inline:-28px; padding-inline:28px} }
.dp-binnen .bericht{transition:box-shadow var(--normaal), translate .65s cubic-bezier(.16,1,.3,1)}
.speelt .dp-binnen .bericht:not(.aan){opacity:1; translate:calc(-100% - 32px) 0}
.dp-kopje{font-size:var(--maat-ui); font-weight:700; line-height:var(--regel-krap); color:var(--inkt); transition:opacity var(--normaal), translate var(--normaal) var(--curve)}
/* de twee lijstjes: naast elkaar als er ruimte is, anders onder elkaar */
.dp-duo{display:grid; gap:var(--ruimte-12); transition:opacity var(--normaal)}
@container (min-width:500px){ .dp-duo{grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start} }
.focus-mail .dp-duo{opacity:.35}
.dp-kaart{background:var(--papier); border-radius:var(--blad-m); padding:14px 14px 12px; box-shadow:var(--schaduw-kaart); transition:opacity var(--normaal)}
.fase-hand .dp-kaart--effi{opacity:.4}
.fase-effi .dp-kaart--hand{opacity:.55}
.dp-kaart__kop{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--lijn-zacht)}
.dp-kaart__kop > b{font-size:var(--maat-klein); line-height:var(--regel-krap); color:var(--inkt)}
.dp-kaart__kop > b.met-effi{color:var(--blauw)}
/* de klok: het wijzertje draait zolang er gewerkt wordt (.bezig) */
.dp-tijd{position:relative; display:inline-flex; align-items:center; gap:5px; font-size:var(--maat-mini); font-weight:600; line-height:var(--regel-krap); color:var(--tekst-zacht); font-variant-numeric:tabular-nums; white-space:nowrap}
.dp-tijd svg{flex:none; width:14px; height:14px}
.dp-tijd--effi{color:var(--blauw)}
.bezig .dp-tijd .wijzer{transform-origin:10px 10px; animation:dp-tik 1.2s steps(8) infinite}
.dp-tijd .dp-cirkel{position:absolute; left:-10px; top:-9px; width:calc(100% + 20px); height:calc(100% + 18px); overflow:visible; pointer-events:none}
.dp-cirkel path{fill:none; stroke:var(--blauw); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset .8s cubic-bezier(.65,0,.35,1)}
/* de klussen; ::before = wacht op jou, ::after = de flits als AI een klus afvinkt */
.dp-taken{list-style:none; margin:0; padding:0}
.dp-taken li{position:relative; z-index:0; display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--lijn-zacht)}
.dp-taken li:last-child{border-bottom:0}
.dp-taken li::before, .dp-taken li::after{content:""; position:absolute; inset:2px -8px; z-index:-1; border-radius:var(--hoek-l); opacity:0}
.dp-taken li::before{background:var(--wolk); box-shadow:inset 0 0 0 2px var(--inkt); transition:opacity var(--normaal)}
.dp-taken li::after{background:var(--blauw-zacht)}
.dp-vak{display:grid; place-items:center; width:22px; height:22px; border-radius:var(--hoek-m); background:var(--blauw); color:var(--op-donker); transition:background-color var(--normaal), box-shadow var(--normaal), color var(--normaal)}
.dp-vak svg{width:15px; height:15px}
.dp-kaart--hand .dp-vak{background:var(--tekst-zacht)}
.dp-taken .is-jij .dp-vak{background:var(--inkt)}
.dp-klus{min-width:0; font-size:var(--maat-klein); line-height:var(--regel-krap); color:var(--tekst-zacht); text-decoration:line-through; text-decoration-color:rgba(91,103,130,.55); transition:color var(--normaal), text-decoration-color var(--normaal)}
.dp-meta{display:grid; justify-items:end; font-size:var(--maat-mini); font-weight:600; line-height:var(--regel-krap); color:var(--tekst-zacht); font-variant-numeric:tabular-nums; white-space:nowrap}
.dp-meta > *{grid-area:1/1}
.dp-wie{transition:opacity var(--normaal)}
.dp-kaart--effi .dp-meta{color:var(--blauw)}
.dp-kaart--effi .is-jij .dp-meta{color:var(--inkt)}
.dp-keur{display:inline-flex; align-items:center; padding:5px 10px; border-radius:var(--hoek-m); background:var(--inkt); color:var(--op-donker); font-size:var(--maat-mini); font-weight:600; line-height:var(--regel-krap); white-space:nowrap; opacity:0; transition:opacity var(--normaal), scale .12s}
.dp-keur.gedrukt{scale:.92}
/* onder elk lijstje de uitkomst: met de hand de tijd, met Effi de tijd die je overhoudt */
.dp-slot{display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 12px; border-radius:var(--hoek-m); font-size:var(--maat-klein); font-weight:600; line-height:var(--regel-krap); transition:opacity var(--normaal), translate var(--normaal) var(--curve)}
.dp-slot svg{flex:none; width:19px; height:16px; filter:var(--schaduw-blad)}
.dp-slot--hand{background:var(--lijn-zacht); color:var(--tekst)}
.dp-slot--effi{background:var(--blauw-zacht); color:var(--inkt)}
/* smal (de lijstjes onder elkaar): iets compacter, zodat het vlak bijna in één telefoonscherm past */
@container (max-width:499px){ .dp-kaart{padding:12px 12px 10px} .dp-kaart .dp-taken li{padding:6px 0} .dp-kaart .dp-slot{margin-top:8px; padding:8px 10px} }
/* tijdens het spelen: nog te doen, wacht op jou, of af (.aan, zoals in het eindbeeld) */
.speelt .dp-kopje:not(.aan){opacity:0; translate:0 4px}
.speelt .dp-taken li:not(.aan) .dp-vak{background:var(--papier); box-shadow:inset 0 0 0 2px var(--lijn); color:transparent}
.speelt .dp-taken li:not(.aan) .dp-klus{color:var(--tekst); text-decoration-color:transparent}
.speelt .dp-kaart--effi li:not(.aan) .dp-wie{opacity:0}
.speelt .dp-taken li.aan .dp-vak{animation:dp-vink .35s var(--curve)}
.dp-taken li.flits::after{animation:dp-flits .8s ease-out}
.speelt .dp-taken li.wacht-op-jou::before, .dp-taken li.wacht-op-jou .dp-keur{opacity:1}
.speelt .dp-taken li.wacht-op-jou .dp-vak{background:var(--papier); box-shadow:none; outline:2px solid var(--inkt); outline-offset:-2px; color:var(--inkt)}
.speelt .dp-taken li.wacht-op-jou .dp-klus{color:var(--inkt); font-weight:600}
.speelt .dp-slot:not(.aan){opacity:0; translate:0 6px}
.speelt .dp-cirkel:not(.aan) path{stroke-dashoffset:1; opacity:0} /* onzichtbaar: de ronde lijnkap tekent anders een stipje op het beginpunt */

/* AI: dezelfde onderdelen als de workflow-animatie hierboven, dus geen eigen regels */

/* software op maat: één pakbon, eerst met drie spreadsheets en dan in een eigen app. Met de hand kopieer jij vier gegevens, elk
   uit het juiste bestand: de regel waarin je kijkt krijgt een blauw rijnummer (.nu), het vakje dat je kopieert de bewegende
   stippellijn uit Excel (.kopie), het veld waarin je plakt een rand (.doel); wat je kopieert, hangt aan de muis (.muis__lading).
   Daarna stromen de bestanden naar het midden (.dp-stuk; --nx en --ny zet dienst.js) en bouwt Effi er één app van (.fase-bouw,
   .fase-app). Daarin staat alles van een verhuring op één regel, en dezelfde pakbon vult zich met één klik.
   De bestanden, het blaadje en de app liggen op dezelfde plek (.dp-scene; de hoogste bepaalt de hoogte); de pakbon staat
   eronder en blijft staan. Kleinste tekst 12 px (--maat-mini), zoals in de andere animaties */
@keyframes dp-oplicht{from{background-color:var(--blauw-zacht)}}
@keyframes dp-mieren{to{background-position:8px 0, -8px 100%, 0 -8px, 100% 8px}}
.dp-taak{display:grid; gap:2px}
.dp-taak b{font-size:var(--maat-ui); font-weight:700; line-height:var(--regel-krap); color:var(--inkt)}
.dp-taak span{font-size:var(--maat-mini); font-weight:600; line-height:var(--regel-krap); color:var(--tekst-zacht)}
.dp-scene{display:grid}
.dp-scene > *{grid-area:1/1; min-width:0}
.dp-bestanden{align-self:center; display:grid; gap:6px; opacity:0; visibility:hidden}
@container (min-width:500px){ .dp-bestanden{grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px} }
.speelt .dp-bestanden{opacity:1; visibility:visible}
.speelt.fase-app .dp-bestanden{visibility:hidden}
.dp-stuk{transition:transform .6s var(--curve), opacity .45s}
.speelt:is(.fase-bouw, .fase-app) .dp-stuk{transform:translate(var(--nx, 0px), var(--ny, 0px)) scale(.3); opacity:0; transition-delay:var(--d, 0ms)}
.dp-bouw{align-self:center; justify-self:center; z-index:6; display:grid; justify-items:center; gap:10px; text-align:center; font-size:var(--maat-klein); font-weight:700; color:var(--inkt); opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s linear .3s}
.dp-bouw svg{width:56px; height:47px; filter:var(--schaduw-blad)}
.speelt.fase-bouw .dp-bouw{opacity:1; visibility:visible; transition:opacity .3s .35s, visibility 0s}
.speelt.fase-bouw .dp-bouw svg{animation:dp-pop .45s .35s var(--curve) both}
.dp-scene .dp-app{align-self:center; z-index:7; transition:opacity .5s, transform .6s var(--curve)}
.speelt:not(.fase-app) .dp-scene .dp-app{opacity:0; transform:scale(.92)}
/* een spreadsheet: bestandsnaam, rijnummers, een kopregel en regels; op een telefoon twee regels (de goede en die erboven) */
.dp-sheet{display:flex; flex-direction:column; overflow:hidden; background:var(--papier); border:1px solid var(--lijn); border-radius:var(--hoek-m); box-shadow:var(--schaduw-kaart); font-size:var(--maat-mini); line-height:var(--regel-krap)}
.dp-sheet__naam{display:flex; align-items:center; gap:6px; padding:6px 8px; background:var(--wolk); border-bottom:1px solid var(--lijn); color:var(--tekst-zacht); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dp-sheet__naam svg{flex:none; width:13px; height:13px}
.dp-raster{display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,1.2fr)} /* de tweede kolom iets breder: daar staat "Wageningen" */
.dp-regel{display:contents}
.dp-regel > span{padding:4px 5px; border-right:1px solid var(--lijn-zacht); border-bottom:1px solid var(--lijn-zacht); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tekst); transition:background-color var(--snel), color var(--snel)}
.dp-regel > span:last-child{border-right:0}
.dp-regel:last-child > span{border-bottom:0}
.dp-regel > .dp-nr{padding-inline:2px; background-color:var(--wolk); color:var(--tekst-zacht); font-weight:600; text-align:center}
.dp-regel--kop > span:not(.dp-nr){font-weight:700; color:var(--inkt)}
.dp-regel.nu > span{background-color:var(--wolk)}
.dp-regel.nu > .dp-nr{background-color:var(--blauw); color:var(--op-donker)}
.dp-regel > span.kopie{background-color:var(--blauw-zacht); color:var(--inkt); font-weight:600;
  background-image:linear-gradient(90deg, var(--blauw) 50%, transparent 0), linear-gradient(90deg, var(--blauw) 50%, transparent 0), linear-gradient(0deg, var(--blauw) 50%, transparent 0), linear-gradient(0deg, var(--blauw) 50%, transparent 0);
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y; background-size:8px 2px, 8px 2px, 2px 8px, 2px 8px; background-position:0 0, 0 100%, 0 0, 100% 0;
  animation:dp-mieren .5s linear infinite}
@container (max-width:499px){ .dp-sheet .dp-regel--extra{display:none} }
/* wat jij gekopieerd hebt, hangt aan de muis tot je het plakt */
.muis__lading{position:absolute; left:16px; top:-30px; padding:4px 9px; border-radius:var(--hoek-m); background:var(--papier); color:var(--inkt); box-shadow:0 0 0 1px var(--lijn), 0 6px 14px -6px rgba(12,24,50,.35); font-size:var(--maat-mini); font-weight:600; line-height:var(--regel-krap); white-space:nowrap; opacity:0; scale:.85; transition:opacity var(--snel), scale var(--snel)}
.muis.draagt .muis__lading{opacity:1; scale:1}
/* de pakbon: met de hand sla jij hem op (.dp-opslaan); in de app staat hij meteen klaar (.dp-pakbon__klaar, ook in het eindbeeld) */
.dp-pakbon{display:grid; gap:8px; padding:10px 12px 12px; background:var(--papier); border:1px solid var(--lijn); border-radius:var(--hoek-m); box-shadow:var(--schaduw-kaart); font-size:var(--maat-mini); line-height:var(--regel-krap); transition:scale var(--snel)}
.dp-pakbon.bewaard{scale:.97}
.dp-pakbon__kop{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px}
.dp-pakbon__kop > b{font-size:var(--maat-klein); line-height:var(--regel-krap); color:var(--inkt)}
.dp-pakbon__actie{display:grid; justify-items:end}
.dp-pakbon__actie > *{grid-area:1/1; transition:opacity var(--normaal), scale .12s}
.dp-opslaan{display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--hoek-m); background:var(--inkt); color:var(--op-donker); font-weight:600; white-space:nowrap; opacity:0}
.dp-opslaan.gedrukt{scale:.92}
.speelt:not(.fase-bouw):not(.fase-app) .dp-opslaan{opacity:1}
.dp-pakbon__klaar{display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 7px; border-radius:var(--rond); background:var(--blauw); color:var(--op-donker); font-weight:600; white-space:nowrap}
.dp-pakbon__klaar svg{flex:none; width:13px; height:13px}
.speelt .dp-pakbon__klaar:not(.aan){opacity:0}
.dp-velden{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 8px}
@container (min-width:500px){ .dp-velden{grid-template-columns:repeat(4, minmax(0,1fr))} }
.dp-veld{display:grid; gap:3px; min-width:0}
.dp-veld > span{font-weight:600; color:var(--tekst-zacht)}
.dp-veld > b{display:block; min-height:calc(1em * 1.3 + 10px); padding:5px 7px; border-radius:6px; background:var(--papier); box-shadow:inset 0 0 0 1px var(--lijn); color:var(--inkt); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:box-shadow var(--snel), color .3s}
.dp-veld > b.doel{box-shadow:inset 0 0 0 2px var(--blauw)}
.dp-veld > b.flits{animation:dp-oplicht .8s ease-out}
.dp-pakbon.wis .dp-veld > b{color:transparent}
/* de eigen app van de klant: hun naam in de titelbalk, eronder dat Effi hem op maat bouwde; alles van een verhuring op één regel */
.dp-app{display:flex; flex-direction:column; overflow:hidden; background:var(--papier); border:1px solid var(--lijn); border-radius:var(--hoek-m); box-shadow:var(--schaduw-kaart); font-size:var(--maat-mini); line-height:var(--regel-krap)}
.dp-app__balk{display:grid; gap:1px; padding:7px 10px 8px; background:var(--inkt); color:var(--op-donker)}
.dp-app__balk b{font-size:var(--maat-klein); font-weight:700; line-height:var(--regel-krap)}
.dp-opmaat{display:flex; align-items:center; gap:5px; color:var(--op-donker-zacht); font-weight:600}
.dp-opmaat svg{flex:none; width:13px; height:11px}
.dp-app__nav{display:flex; gap:3px; padding:5px 8px; border-bottom:1px solid var(--lijn-zacht); overflow:hidden}
.dp-app__nav span{padding:3px 8px; border-radius:var(--hoek-m); color:var(--tekst-zacht); white-space:nowrap}
.dp-app__nav .actief{background:var(--blauw-zacht); color:var(--blauw-hover); font-weight:600}
.dp-app__lijf{display:flex; flex-direction:column; gap:5px; padding:8px 10px 10px}
.dp-herkomst{padding:6px 8px; border-radius:var(--hoek-m); background:var(--blauw-zacht); color:var(--inkt); font-weight:600}
.dp-rij{position:relative; z-index:0; padding:5px 8px; border-radius:var(--hoek-m); background:var(--wolk); color:var(--tekst-zacht); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dp-rij::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--blauw-zacht); opacity:0}
.dp-rij.flits::after{animation:dp-flits .8s ease-out}
.dp-rij b{margin-right:6px; color:var(--inkt)}
.dp-rij.gekozen{background:var(--blauw-zacht); box-shadow:inset 0 0 0 1.5px var(--blauw)}
.dp-knop{align-self:flex-start; display:inline-flex; align-items:center; margin-top:3px; padding:6px 12px; border-radius:var(--hoek-m); background:var(--blauw); color:var(--op-donker); font-weight:600; transition:scale .12s}
.dp-knop.gedrukt{scale:.92}
/* onder de pakbon de twee klokken; aan het eind omcirkelt een pen de 30 seconden */
.dp-scorebord{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; padding-top:2px}
.dp-scorebord .dp-tijd{font-size:var(--maat-klein); transition:opacity var(--normaal)}
.dp-scorebord .dp-tijd b{font-weight:700}
.dp-scorebord .dp-tijd.bezig .wijzer{transform-origin:10px 10px; animation:dp-tik 1.2s steps(8) infinite}
.speelt .dp-scorebord .dp-tijd:not(.aan){opacity:.35}
.dp-cirkelplek{position:relative; display:inline-block; margin-left:3px}
.dp-cirkelplek .dp-cirkel{position:absolute; left:-8px; top:-9px; width:calc(100% + 16px); height:calc(100% + 18px); overflow:visible; pointer-events:none}

/* ---------- 10. werkwijze (werkwijze.html) ----------
   Geen eigen regels meer: de pagina bestaat helemaal uit bouwstenen (de opening met foto, kop-split, drietal,
   het stappenraster als kaarten, de stelling en de afsluiter). */

/* ---------- 11. minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .kop-balk, .kop-sub, .kop-pijl, .knop, a.kaart, .kaart__meer, .kaart__meer svg, .linklijst a, .linklijst svg, .inhoudsopgave a{transition:none}
  .kaart:hover .kaart__meer svg, .tekstlink:hover svg, .linklijst a:hover svg{transform:none}
  .tekstlink svg{transition:none}
  .carrousel{scroll-behavior:auto}
  .carrousel__stip::before, .carrousel__knop{transition:none}
}