/* =====================================================================
   AvanTimes – site.css
   Eén stylesheet. Eén raster (12 kolommen), één spacing-schaal,
   één typeschaal. Geen !important, geen inline styles.
   Inhoud:
      1. Tokens
      2. Fonts (lokaal)
      3. Basis
      4. Raster
      5. Typografie
      6. Knoppen en losse links
      7. Kop en menu
      8. Kruimelpad
      9. Aurora (afsluiters)
     10. Gedeelde tekstonderdelen
     11. Hero's
     12. Secties
     13. Kaarten
     14. Logo's, cijfers, tabs, galerij
     15. Lijsten in smalle kolommen
     16. Pagina-onderdelen
     17. Afsluiter
     18. Artikel (blog en klantverhaal)
     19. Formulieren
     20. Footer
     21. Minder beweging
     22. Print
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* merk */
  --wit:#FFFFFF;
  --grijs:#EEF5FB;      /* eigenaar 9 nov: geen beige meer; heel lichtblauw, in lijn met wit + lichtblauw */
  --achtergrond:#FFFFFF; /* eigenaar 8 nov: de pagina is echt wit; alleen het openingspaneel op home krijgt kleur */
  --blauw:#0083C6;      /* merkblauw – lijnen, iconen, aurora (4,15:1 op wit: geen kleine tekst) */
  --ink:#014E9B;        /* tekstblauw – koppen, links (8,19:1) */
  --donker:#06375C;     /* donkerblauw – lopende tekst (12,29:1) */
  --nacht:#0B1A2E;      /* nachtblauw – donkere vlakken, tekst op amber */
  --amber:#FF9E1B;      /* actie – alleen vlak, nooit tekst op wit */
  --amber-hover:#EB931D;
  --lichtblauw:#EAF4FB;  /* lichte vlakken (hero, afsluiters) */
  --lichtblauw-zacht:#F3F8FC;
  --vlak-lichtblauw:#EAF4FA; /* heel licht merkblauw sectievlak ('Kijk mee', klantverhalen op branches); --sub haalt er 5,8:1 op */
  --vlak-blauw:#0074B2;  /* blauw sectievlak (.blauw): merkblauw iets dieper, wit 5,07:1 (op #0083C6 maar 4,15:1) */
  /* afgeleid */
  --tekst:var(--donker);
  --sub:#3D6380;        /* 6,37:1 op wit · 5,74:1 op grijs */
  --lijn:#D7DFE5;       /* decoratieve haarlijn */
  --veldrand:#6A879D;   /* 3,77:1 – randen van invoervelden */
  --fout:#B42318;
  --op-donker:#FFFFFF;
  --op-donker-sub:rgba(255,255,255,.86);
  --op-donker-lijn:rgba(255,255,255,.2);
  /* tekst op de lichte aurora-vlakken en de footer */
  --op-licht:var(--ink);
  --op-licht-sub:var(--sub);
  --op-licht-lijn:#C9DCEA;
  
  /* typografie */
  --font:"Inter","Inter-terugval",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --t-s:.875rem;        /* 14 */
  --t-m:1rem;           /* 16 */
  --t-l:1.125rem;       /* 18 */
  --t-xl:1.3125rem;     /* 21 */
  --t-2xl:clamp(1.5rem,1.25rem + .9vw,1.875rem);           /* 24–30 */
  --t-3xl:clamp(1.75rem,1.3rem + 1.9vw,2.625rem);          /* 28–42 */
  --t-4xl:clamp(2rem,1.25rem + 3.1vw,3.5rem);              /* 32–56 */
  --t-5xl:clamp(2.375rem,1.2rem + 5vw,5rem);               /* 38–80 */
  --rg-strak:1.12;
  --rg-kop:1.2;
  --rg-tekst:1.65;
  --spatie-kop:-.022em;
  
  /* spacing-schaal (4-punts basis) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
  --sectie:clamp(var(--s8),3rem + 4vw,var(--s10));
  
  /* raster */
  --breedte:75rem;                         /* 1200 inhoud */
  --rand:clamp(1rem,.5rem + 2.6vw,2.5rem); /* buitenmarge */
  --goot:clamp(1rem,.6rem + 1vw,1.5rem);   /* kolomafstand */
  --leesbreedte:34em;                      /* ±68 tekens Inter */
  
  /* vorm */
  --radius-knop:12px; /* alle knoppen, chips en invoervelden (bij 44–48px hoog: duidelijk rond, geen pil) */
  --r-klein:8px;   /* kleine binnenvlakken: menu-items, tegels */
  --r-mid:14px;    /* kaarten, beeld, panelen */
  --r-groot:24px;  /* het paneel van de home-opening */
  --schaduw:0 1px 2px rgba(11,26,46,.06),0 4px 16px rgba(11,26,46,.06);
  --kophoogte:4.5rem;
  --focus:3px solid var(--ink);
  
  /* beweging: weinig, kort, eigen curves (alleen transform en opacity) */
  --ease-out:cubic-bezier(.23,1,.32,1);    /* binnenkomen, reageren */
  --duur-druk:160ms;                       /* indrukken */
  --duur-kleur:150ms;                      /* hover-kleur */
  --duur-in:200ms;                         /* menu en uitklap openen */
  --duur-uit:140ms;                        /* sluiten: sneller dan openen */
  --druk:scale(.97);
  }

/* ---------- 2. Fonts (lokaal) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-latin-700-normal.woff2") format("woff2")}
/* terugvalletter met Inter-maten: geen verspringing bij het laden (CLS) */
@font-face{font-family:"Inter-terugval";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%}

/* ---------- 3. Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
/* geen smooth scroll: sprongen (overslaan-link, inhoudsopgave, A–Z) zijn vaak toetsenbordacties en moeten direct zijn */
/* browseroppervlakken en metaregel */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kophoogte) + var(--s4));-webkit-tap-highlight-color:transparent;
  scrollbar-color:var(--veldrand) var(--grijs)}
a,button,summary,label,[role="tab"]{touch-action:manipulation}
button,.knop,.menu-knop,.mobiel summary{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{margin:0;font-family:var(--font);font-size:var(--t-m);line-height:var(--rg-tekst);color:var(--tekst);background:var(--achtergrond);
  font-feature-settings:"cv11","ss01";font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
@media (min-width:48em){body{font-size:1.0625rem}}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:max(1rem,16px)} /* nooit kleiner dan 16px: iOS zoomt anders in */
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--ink);color:var(--wit)}
[hidden]:not(#_){display:none} /* id-gewicht: wint van elke display-regel op een klasse (.kaart{display:flex} e.d.) */
.naar-inhoud{position:absolute;left:var(--s4);top:-10rem;z-index:100;padding:var(--s3) var(--s4);background:var(--ink);color:var(--wit);font-weight:600;border-radius:var(--radius-knop)}
.naar-inhoud:focus{top:var(--s4)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a[href^="tel:"]:not(.knop,.losse-link){white-space:nowrap}
/* iconen: Lucide (ISC) als sprite /img/iconen.svg, lijn 1,75px, merkblauw, altijd aria-hidden */
.ic{display:block;flex:none;width:1.5rem;height:1.5rem;color:var(--blauw)}
:is(input,textarea){caret-color:var(--ink)}

/* ---------- 4. Raster ---------- */
.wrap{width:100%;max-width:calc(var(--breedte) + 2 * var(--rand));margin-inline:auto;padding-inline:max(var(--rand),env(safe-area-inset-left,0px)) max(var(--rand),env(safe-area-inset-right,0px))}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--goot)}
.raster>*{grid-column:1/-1;min-width:0}

/* ---------- 5. Typografie ---------- */
h1,h2,h3,h4{color:var(--ink);font-weight:700;letter-spacing:var(--spatie-kop);text-wrap:balance}
h1{font-size:var(--t-4xl);line-height:var(--rg-strak)}
h2{font-size:min(var(--t-3xl),var(--kopmax,100vw));line-height:var(--rg-kop)}
/* de H1 is altijd de grootste kop. Heeft de H1 een heel lang woord (lw-N), dan krimpt hij om dat woord op één regel
   te houden; --kopmax is dan die H1-maat en geldt als plafond voor de H2's (alleen waar de H1 zo klein wordt) */
body:has(h1.lw-16){--h1lw:16}body:has(h1.lw-17){--h1lw:17}body:has(h1.lw-18){--h1lw:18}body:has(h1.lw-19){--h1lw:19}body:has(h1.lw-20){--h1lw:20}
body:has(h1.lw-21){--h1lw:21}body:has(h1.lw-22){--h1lw:22}body:has(h1.lw-23){--h1lw:23}body:has(h1.lw-24){--h1lw:24}body:has(h1.lw-25){--h1lw:25}
body:has(h1.lw-26){--h1lw:26}body:has(h1.lw-27){--h1lw:27}body:has(h1.lw-28){--h1lw:28}body:has(h1.lw-29){--h1lw:29}body:has(h1.lw-30){--h1lw:30}
body{--tk:33rem}
body:has(h1:is(.lw-22,.lw-23,.lw-24,.lw-25,.lw-26,.lw-27,.lw-28,.lw-29,.lw-30)){--tk:min(40rem,33rem + (100vw - 64rem) / 2)}
@media (max-width:63.99em){body:has(h1[class*="lw-"]){--kopmax:calc((100vw - 2 * var(--rand)) / ((var(--h1lw,0) + 1) * .54))}}
@media (min-width:64em){body:has(.foto-pagina h1[class*="lw-"]){--kopmax:calc(var(--tk) / ((var(--h1lw,0) + 1) * .54))}}
h3{font-size:var(--t-xl);line-height:1.3;letter-spacing:-.012em}
h4{font-size:var(--t-l);line-height:1.35;letter-spacing:-.01em}
p,li{text-wrap:pretty}
strong,b{font-weight:600}
/* lopende tekst in een blok */
.proza{max-width:var(--leesbreedte)}
.proza>*+*{margin-top:var(--s4)}
.proza>h3,.proza>h4{margin-top:var(--s6)}
.proza>h3+*,.proza>h4+*{margin-top:var(--s2)}
.proza ul,.proza ol{padding-left:1.25em}
.proza li+li{margin-top:var(--s2)}
.proza li::marker{color:var(--blauw)}
.proza a,.faq-antwoord a,.citaat a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--blauw);text-decoration-thickness:1px;text-underline-offset:.2em}
@media (hover:hover) and (pointer:fine){.proza a:hover,.faq-antwoord a:hover,.citaat a:hover{color:var(--donker);text-decoration-color:currentColor;text-decoration-thickness:2px}}
.proza table{width:100%;border-collapse:collapse;font-size:var(--t-m);display:block;overflow-x:auto}
.proza th,.proza td{padding:var(--s2) var(--s3);text-align:left;vertical-align:top;border-bottom:1px solid var(--lijn)}
.proza th{color:var(--ink);font-weight:600;background:var(--grijs)}
/* korte, opvallende regels in balans; lopende tekst zonder weeskinderen */
:is(.kop-onder,.faq-lijst summary,.uitklap-lijst b,.zij-kop,.bevestiging b,.s-getuige .citaat blockquote,.artikel .citaat-uitgelicht blockquote,.v-citaten .kaart-citaat){text-wrap:balance}
:is(.uitklap-lijst span,.pijlers span,.tab-uitleg,.label-cijfer,figcaption,.kaart-citaat){text-wrap:pretty}
/* cijfers die onder elkaar of naast elkaar staan: even breed */
:is(.kaart-meta,.artikel-meta,.proza td,.zij-feiten dd,.cijfers-prijs){font-variant-numeric:tabular-nums}
/* aanhalingstekens hangen buiten de kantlijn (Safari), zodat de tekst optisch recht staat */
:is(.citaat blockquote,.kaart-citaat){hanging-punctuation:first}
/* afbreken: geen zachte afbreekstreepjes in de HTML (vindbaarheid, kopiëren). Alleen op smalle schermen
   breken koppen en smalle kolommen af met CSS (lang="nl"); lopende tekst niet. overflow-wrap (body) is de terugval. */
@media (max-width:47.99em){
  main :is(p,li,q,dd,blockquote){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 6 6}
  :is(.kaart,.cijfers,.pijlers,.voet-kolommen,.filter,.tablijst,.zij-blok) :is(p,li,q,span,dd,a){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}
}
/* koppen: afbreken alleen in lange woorden (12+ tekens, 5 voor en 5 na), op elke breedte; menu's nooit */
:is(h1,h2,h3,h4){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5}
:is(.hoofdnav,.uitklap,.mobiel) :is(h1,h2,h3,h4,p,a,b,span,summary){-webkit-hyphens:manual;hyphens:manual}
.lw-10{--lw:10}.lw-11{--lw:11}.lw-12{--lw:12}.lw-13{--lw:13}.lw-14{--lw:14}.lw-15{--lw:15}.lw-16{--lw:16}.lw-17{--lw:17}.lw-18{--lw:18}.lw-19{--lw:19}.lw-20{--lw:20}.lw-21{--lw:21}.lw-22{--lw:22}.lw-23{--lw:23}
.lw-24{--lw:24}.lw-25{--lw:25}.lw-26{--lw:26}.lw-27{--lw:27}.lw-28{--lw:28}.lw-29{--lw:29}.lw-30{--lw:30}
/* koppen: op desktop nooit afbreken. Het langste woord (lw-N) bepaalt de lettermaat, zodat het op één regel past */
@media (min-width:64em){
  :is(h2,h3){-webkit-hyphens:manual;hyphens:manual}
  :is(.kopgroep,.cta-tekst,.faq-kop){container-type:inline-size}
  :is(.kopgroep,.cta-tekst,.faq-kop) h2[class*="lw-"]{font-size:min(var(--h2,var(--t-3xl)),var(--kopmax,100vw),calc(100cqi / ((var(--lw) + 1) * .54)))}
  .s-tekst{--h2:var(--t-2xl)}
  .cta-vlak{--h2:var(--t-3xl)}
}
.lw-6{--lw:6}.lw-7{--lw:7}.lw-8{--lw:8}.lw-9{--lw:9}
/* tablet en telefoon: ook de afsluiterkop schaalt op zijn langste woord en mag de volle breedte gebruiken (geen 'toegangscon-trole'; met 200% tekst niet uit beeld) */
@media (max-width:63.99em){
  .cta-tekst{container-type:inline-size}
  .cta-tekst h2[class*="lw-"]{-webkit-hyphens:manual;hyphens:manual;font-size:min(var(--t-3xl),var(--kopmax,100vw),calc(100cqi / ((var(--lw) + 1) * .54)))}
  .cta-vlak h2{max-width:none}
}

/* ---------- 6. Knoppen en losse links ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:3rem;max-width:100%;padding:var(--s3) var(--s5);
  border:1px solid var(--amber-hover);border-radius:var(--radius-knop);background:var(--amber);color:var(--donker);
  font-weight:600;font-size:var(--t-m);line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color var(--duur-kleur) ease,border-color var(--duur-kleur) ease,color var(--duur-kleur) ease,transform var(--duur-druk) var(--ease-out)}
/* indrukken: alleen bij aanwijzer/aanraking, niet bij een toetsaanslag (die heeft :focus-visible) */
:is(.knop,.menu-knop,.filter button):active:not(:focus-visible,:disabled){transform:var(--druk)}
.knop:disabled{cursor:progress;opacity:.8}
@media (hover:hover) and (pointer:fine){.knop:hover:not(:disabled){background:var(--amber-hover)}}
.knop.tweede{background:transparent;border-color:var(--ink);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.knop.tweede:hover{background:var(--ink);color:var(--wit)}}
.knop.klein{min-height:2.75rem;padding:var(--s2) var(--s4);font-size:var(--t-s)}
.knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s6)}
/* losse links: één look met de andere tekstlinks (blijvende dunne streep in merkblauw) */
.losse-link{color:var(--ink);font-weight:600;border-bottom:1px solid transparent;text-decoration:underline;text-decoration-color:var(--blauw);
  text-decoration-thickness:1px;text-underline-offset:.22em}
@media (hover:hover) and (pointer:fine){.losse-link:hover{color:var(--donker);border-bottom-color:transparent;text-decoration-color:currentColor;text-decoration-thickness:2px}}
.blok-kaarten+.blok-tekst .proza>p:only-child>a:only-child{font-weight:600}
/* knoppen: geen hover-lift (gaf flikkering op de onderrand); kleurwissel en indrukken (scale .97) blijven */

/* ---------- 7. Kop en menu ---------- */
/* eigenaar 8 nov: zwevende kopbalk met ronde hoeken; verdwijnt bij naar beneden scrollen, komt terug bij omhoog scrollen */
.kop{position:sticky;top:var(--s3);z-index:50;margin:var(--s3) var(--s3) 0;background:rgba(255,255,255,.97);border:1px solid var(--lijn);border-radius:1.25rem;
  box-shadow:0 8px 28px -16px rgba(11,26,46,.28);transition:transform 360ms var(--ease-out),opacity 240ms var(--ease-out)}
.kop.kop-weg:not(:focus-within){transform:translateY(calc(-100% - var(--s3) - 4px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.kop{transition:none}}
@media (max-width:39.99em){.kop{top:var(--s2);margin:var(--s2) var(--s2) 0;border-radius:1rem}.kop .kop-balk{padding-inline:var(--s2) var(--s3);column-gap:var(--s2)}.kop .kop-acties{gap:var(--s2)}}
@supports (backdrop-filter:blur(8px)){.kop{background:rgba(255,255,255,.72);backdrop-filter:saturate(1.6) blur(16px)}} /* eigenaar: een beetje doorzichtig, niet helemaal */
/* vergrote tekstafstand (WCAG 1.4.12) of grote letter: de acties zakken naar een tweede regel i.p.v. buiten beeld */
.kop-balk{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;height:auto;min-height:var(--kophoogte)}
.logo{flex:none;display:block;width:9.25rem;padding-block:var(--s2)}
.logo svg{width:100%;height:auto}
.hoofdnav{display:none}
.kop-acties{margin-left:auto;display:flex;align-items:center;gap:var(--s4)}
.kop-support{display:none;color:var(--ink);font-weight:500;font-size:var(--t-s);text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.kop-support:hover{color:var(--donker);text-decoration:underline;text-underline-offset:.25em}}
/* kopbalk: knop nooit over twee regels, pijltjes krimpen niet; tussen 68 en 80em een compactere navigatie */
.kop .knop{min-height:2.75rem;padding:var(--s2) var(--s4);font-size:var(--t-s);flex:none;white-space:nowrap}
/* rand 3:1 (WCAG 1.4.11) */
.menu-knop{display:inline-flex;align-items:center;gap:var(--s2);min-height:2.75rem;padding:0 var(--s3);border:1px solid var(--veldrand);
  border-radius:var(--radius-knop);background:var(--wit);color:var(--ink);font-weight:600;font-size:var(--t-s);cursor:pointer;
  transition:transform var(--duur-druk) var(--ease-out)}
.menu-knop svg{width:1.125rem;height:1.125rem}
.menu-knop[aria-expanded="true"] .mk-open,.menu-knop[aria-expanded="false"] .mk-dicht{display:none}
/* onder 22em: geen demoknop in de kopbalk (alleen daar: de knoppen in het mobiele menu blijven) */
@media (max-width:22em){.kop-acties .knop{display:none}}
@media (max-width:30em){.kop-balk{gap:var(--s3)}.logo{width:7.75rem}.kop .knop{padding-inline:var(--s3)}}
/* desktop-menu */
@media (min-width:68em){
  .hoofdnav{display:flex;align-items:stretch;height:100%;margin-left:var(--s5)}
  .hoofdnav>ul{display:flex;align-items:stretch;gap:var(--s1);margin:0;padding:0;list-style:none}
  .hoofdnav>ul>li{position:static;display:flex;align-items:center}
  .nav-knop,.nav-link{display:inline-flex;align-items:center;gap:.3em;min-height:2.75rem;padding:0 var(--s3);border:0;border-radius:var(--r-klein);background:none;
    color:var(--donker);font-weight:500;font-size:.9375rem;text-decoration:none;cursor:pointer;white-space:nowrap}
  .nav-knop svg{width:.75rem;height:.75rem;transition:transform var(--duur-in) var(--ease-out)}
  .nav-knop[aria-expanded="true"]{color:var(--ink);background:var(--grijs)}
  @media (hover:hover) and (pointer:fine){.nav-knop:hover,.nav-link:hover{color:var(--ink);background:var(--grijs)}}
  .nav-link:active,.uitklap-lijst a:active{background:var(--grijs)}
  .nav-knop[aria-expanded="true"] svg{transform:rotate(180deg)}
  .nav-link[aria-current="page"],.nav-knop.actief{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blauw);border-radius:0}
  .menu-knop{display:none}
  .uitklap{position:absolute;left:0;right:0;top:calc(100% + var(--s2));background:var(--wit);border:1px solid var(--lijn);border-radius:1.25rem;overflow:hidden;box-shadow:0 16px 32px -24px rgba(11,26,46,.35);
    /* hangt aan de kopbalk: groeit vanaf de bovenrand, onderbreekbaar (transition, geen keyframes) */
    transform-origin:50% 0;
    transition:opacity var(--duur-in) var(--ease-out),transform var(--duur-in) var(--ease-out),display var(--duur-in) allow-discrete}
  .uitklap[hidden]{opacity:0;transform:translateY(-.25rem) scale(.99);pointer-events:none;transition-duration:var(--duur-uit)}
  @starting-style{.uitklap:not([hidden]){opacity:0;transform:translateY(-.25rem) scale(.99)}}
  .uitklap-binnen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--goot);padding-block:var(--s6) var(--s7)}
  .uitklap-lijst{grid-column:1/10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1) var(--goot);margin:0;padding:0;list-style:none;align-content:start}
  .uitklap-lijst.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uitklap-groep{grid-column:span 4}
  .uitklap-groep+.uitklap-groep{grid-column:span 5}
  .uitklap-groep .uitklap-kop{margin:0 0 var(--s3);font-size:var(--t-s);font-weight:600;letter-spacing:0;color:var(--sub);padding-left:0}
  .uitklap-groep .uitklap-lijst{grid-template-columns:1fr}
  /* megamenu: tekst van de links op de rasterlijn (het hovervlak steekt erbuiten) */
  /* uitklapmenu: icoontegel per item */
  .uitklap-lijst a{padding:var(--s3);border-radius:var(--r-klein);text-decoration:none;color:var(--donker);margin-inline:calc(-1 * var(--s3));display:grid;
    grid-template-columns:2.25rem minmax(0,1fr);column-gap:var(--s3);align-items:start}
  @media (hover:hover) and (pointer:fine){.uitklap-lijst a:hover{background:var(--grijs)}}
  .uitklap-lijst a[aria-current="page"] b{box-shadow:inset 0 -2px 0 var(--blauw)}
  .uitklap-lijst b{display:inline;color:var(--ink);font-weight:600;font-size:.9375rem}
  .uitklap-lijst span{display:block;margin-top:2px;font-size:var(--t-s);line-height:1.45;color:var(--sub)}
  .uitklap-zij{grid-column:10/13;align-self:start;padding:var(--s5);border-radius:var(--r-mid);background:var(--grijs)}
  .uitklap-zij b{display:block;color:var(--ink);font-weight:600}
  .uitklap-zij p{margin-top:var(--s1);font-size:var(--t-s);color:var(--sub)}
  .uitklap-zij .knop{margin-top:var(--s4)}
  .uitklap-zij a.tel{display:inline-block;margin-top:var(--s3);color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--blauw);text-underline-offset:.2em}
  /* eigenaar 8 nov: menu's met een donkerblauwe balk onderin (Oplossingen, Software en klokken: salarispakketten;
     Branches: klantlogo's). De keuzes gebruiken dan de volle breedte, drie per rij. */
  .met-balk .uitklap-binnen{padding-bottom:var(--s6)}
  .met-balk .uitklap-lijst,.met-balk .uitklap-lijst.twee{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}
  .met-balk .uitklap-groep,.met-balk .uitklap-groep+.uitklap-groep{grid-column:1/-1}
  .met-balk .uitklap-groep+.uitklap-groep{margin-top:var(--s4)}
  .met-balk .uitklap-groep .uitklap-lijst{grid-template-columns:repeat(3,minmax(0,1fr))}
  .uitklap-balk{background:radial-gradient(22rem 8rem at 100% 0%,rgba(255,158,27,.28),rgba(255,158,27,0) 70%),var(--donker);color:var(--wit)}
  .uitklap-balk-binnen{display:flex;align-items:center;gap:var(--s6);padding-block:var(--s4)}
  .uitklap-balk-kop{flex:none;margin:0;font-size:.9375rem;font-weight:600;color:var(--wit)}
  .uitklap-balk-logos{display:flex;align-items:center;gap:var(--s6);flex:1 1 auto;min-width:0;margin:0;padding:0;list-style:none}
  .uitklap-balk-logos{justify-content:space-around}
  .uitklap-balk-logos img{display:block;width:auto;height:auto;max-height:1.2rem;max-width:5.5rem;filter:brightness(0) invert(1);opacity:.85}
  .uitklap-balk-logos li{flex:0 1 auto;min-width:0}
  #m-br .uitklap-balk-logos img{max-height:1.8rem;max-width:min(7rem,100%)}
  .uitklap-balk-link{flex:none;display:inline-flex;align-items:center;gap:.4rem;font-size:.9375rem;font-weight:600;color:var(--wit);text-decoration:none}
  .uitklap-balk-link .ic{width:1rem;height:1rem;color:#FFB54D;transition:transform 160ms var(--ease-out)}
  @media (hover:hover) and (pointer:fine){.uitklap-balk-link:hover{text-decoration:underline;text-underline-offset:.2em}.uitklap-balk-link:hover .ic{transform:translateX(3px)}}
  .uitklap-balk :focus-visible{outline-color:var(--wit)}
  .uitklap-balk-kop.met-sub{flex:1 1 auto;font-size:1rem}
  .uitklap-balk-kop p{margin:0}
  .uitklap-balk-kop .uitklap-balk-sub{margin-top:2px;font-size:var(--t-s);font-weight:400;color:rgba(255,255,255,.78)}
  .uitklap-balk-tel{flex:none;display:inline-flex;align-items:center;gap:.5rem;color:var(--wit);font-weight:600;font-size:1.0625rem;text-decoration:underline;text-decoration-color:#FFB54D;text-underline-offset:.25em}
  .uitklap-balk-tel .ic{width:1.1rem;height:1.1rem;color:#FFB54D}
  .uitklap-balk-knop,.uitklap-balk-tel-p{flex:none;margin:0}
  @media (prefers-reduced-motion:reduce){.uitklap-balk-link .ic{transition:none}}
}
@media (min-width:82em){.kop-support{display:inline}}
/* mobiel menu */
.mobiel{border-top:1px solid var(--lijn);background:var(--achtergrond);max-height:calc(100vh - var(--kophoogte));max-height:calc(100dvh - var(--kophoogte));overflow-y:auto;overscroll-behavior:contain;
  transform-origin:50% 0;
  transition:opacity var(--duur-in) var(--ease-out),transform var(--duur-in) var(--ease-out),display var(--duur-in) allow-discrete}
.mobiel[hidden]{opacity:0;transform:translateY(-.5rem);pointer-events:none;transition-duration:var(--duur-uit)}
@starting-style{.mobiel:not([hidden]){opacity:0;transform:translateY(-.5rem)}}
/* toetsenbord (Enter, Esc, Tab weg) of wisselen tussen panelen: direct, zonder beweging */
.kop[data-direct] :is(.uitklap,.mobiel,.nav-knop svg){transition:none}
.mobiel-binnen{padding-block:var(--s3) calc(var(--s7) + env(safe-area-inset-bottom,0px))}
.mobiel details{border-bottom:1px solid var(--lijn)}
.mobiel summary{display:flex;align-items:center;justify-content:space-between;min-height:3.25rem;cursor:pointer;color:var(--ink);font-weight:600;list-style:none}
.mobiel summary::-webkit-details-marker{display:none}
.mobiel summary svg{width:.875rem;height:.875rem;transition:transform var(--duur-in) var(--ease-out)}
.mobiel summary:focus-visible svg{transition:none}
.mobiel li a:active,.mobiel summary:active,.mobiel .mob-link:active{background:var(--grijs)}
.mobiel details[open] summary svg{transform:rotate(180deg)}
.mobiel ul{margin:0;padding:0 0 var(--s3);list-style:none}
.mobiel li a{display:block;padding:var(--s2) 0 var(--s2) var(--s4);min-height:2.75rem;color:var(--donker);text-decoration:none;border-left:1px solid var(--lijn)}
.mobiel li a[aria-current="page"]{color:var(--ink);font-weight:600;border-left:2px solid var(--blauw)}
.mobiel .mob-link{display:flex;align-items:center;min-height:3.25rem;border-bottom:1px solid var(--lijn);color:var(--ink);font-weight:600;text-decoration:none}
.mobiel .mob-acties{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-top:var(--s5)}
.mobiel .mob-acties .knop{width:100%}
.mobiel .mob-acties a.tel{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--blauw);text-underline-offset:.2em}
.mobiel :focus-visible{outline-offset:-3px}
@media (min-width:68em){.mobiel{display:none}}
/* uitklapmenu: citaat in de zijkolom van Klantverhalen */
.uitklap-citaat{margin:0 0 var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--lijn)}
.uitklap-zij .uitklap-citaat p{margin:0;font-size:var(--t-m);font-weight:500;line-height:1.45;color:var(--ink)}
.uitklap-zij .uitklap-citaat figcaption{margin-top:var(--s2);font-size:var(--t-s);line-height:1.45;color:var(--sub)}
.uitklap-badge{font-size:var(--t-s);color:var(--sub)}
@media (min-width:68em){.uitklap-lijst.drie-kv{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nav-knop svg{flex:none}
@media (min-width:68em) and (max-width:79.99em){
  .kop-balk{gap:var(--s3)}
  .logo{width:8.5rem}
  .hoofdnav{margin-left:0}
  .hoofdnav>ul{gap:0}
  .nav-knop,.nav-link{padding-inline:var(--s2)}
}
/* mobiel menu: zweeft onder de kop (de pagina verschuift niet), met een scherm erachter en zonder doorscrollen */
@media (max-width:67.99em){
  .mobiel{position:absolute;inset-inline:0;top:100%;box-shadow:0 16px 32px -20px rgba(11,26,46,.35)}
  body.menu-open{overflow:hidden}
  body.menu-open::before{content:"";position:fixed;inset:0;z-index:40;background:rgba(11,26,46,.32);opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity var(--duur-in) var(--ease-out),visibility 0s}
}
/* demopagina: bellen in de kop in plaats van de demoknop */
.kop-bel{font-variant-numeric:tabular-nums}
/* mobiele kop: bellen naast het menu */
.kop-bel-ic{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid var(--veldrand);border-radius:var(--radius-knop);color:var(--ink)}
.kop-bel-ic svg{width:1.125rem;height:1.125rem}
.kop-bel-ic:active{background:var(--grijs)}
@media (min-width:68em){.kop-bel-ic{display:none}}
/* kopbalk op één regel: onder 24em geen belicoon (het nummer staat in het menu); tot 30em compacter */
@media (max-width:24.36em){.kop-bel-ic{display:none}}
@media (max-width:29.99em){
  .kop-balk,.kop-acties{gap:var(--s2)}
  .logo{width:7rem}
}
@media (min-width:68em){
  .uitklap-lijst a>:not(.uk-ic){grid-column:2}
  .uitklap-lijst .uk-ic{grid-column:1;grid-row:1/span 2;width:2.25rem;height:2.25rem;padding:.4375rem;border-radius:var(--r-klein);background:var(--lichtblauw)}
  @media (hover:hover) and (pointer:fine){.uitklap-lijst a:hover .uk-ic{background:var(--wit)}}
}
.uk-ic{display:none}
@media (min-width:68em){
  .uk-ic{display:block}
  /* menu Klantverhalen: klantlogo in een vast vak (even zwaar, links uitgelijnd), naam en branche eronder */
  .uitklap-lijst a.kv-item{display:flex;flex-direction:column;align-items:flex-start}
  .uitklap-lijst .uk-logo{display:flex;align-items:center;width:6.5rem;height:2.5rem;margin:0 0 var(--s2)}
  .uitklap-lijst .uk-logo img{max-width:100%;height:auto}
}
.mobiel li a.kv-item{display:flex;align-items:center;gap:var(--s3)}
.mob-logo{flex:none;display:flex;align-items:center;width:4.5rem;height:1.75rem}
.mob-logo img{max-width:100%;height:auto}
/* menu Klantverhalen: de link staat na de figure (geldige HTML); de scheidingslijn hangt aan wat erna komt */
.uitklap-zij .uitklap-citaat{margin:0;padding:0;border:0}
.uitklap-zij .uitklap-citaat-link{margin-top:var(--s2);font-size:var(--t-s)}
.uitklap-zij .uitklap-citaat-link+*{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--lijn)}
/* mobiel menu: het scherm erachter fadet mee (en gehoorzaamt aan data-direct); de kop is dan wit */
@media (max-width:67.99em){
  body::before{content:"";position:fixed;inset:0;z-index:40;background:rgba(11,26,46,.32);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--duur-uit) var(--ease-out),visibility 0s linear var(--duur-uit)}
  body:has(.kop[data-direct])::before{transition:none}
  body.menu-open .kop{background:var(--achtergrond)}
}
/* pijltjes in de menu's draaien bij sluiten niet na */
.mobiel details:not([open]) summary svg{transition:none}
.nav-knop[aria-expanded="false"] svg{transition-duration:var(--duur-uit)}

/* ---------- 8. Kruimelpad ---------- */
.kruimel{font-size:var(--t-s);color:var(--sub)}
.kruimel ol{display:flex;flex-wrap:wrap;gap:var(--s1) 0;margin:0;padding:0;list-style:none}
.kruimel li+li::before{content:"/";margin-inline:var(--s2);color:var(--veldrand)}
.kruimel a{color:var(--ink);text-decoration:none}
@media (hover:hover) and (pointer:fine){.kruimel a:hover{text-decoration:underline;text-underline-offset:.2em}}

/* ---------- 9. Aurora (afsluiters) ---------- */
/* Afsluiter (kleurstap 'Accent'): effen tekstblauw vlak (#014E9B) met witte tekst (8,19:1; 86% wit ±6,3:1)
   en één fijne wijzerplaat in wit rechts in de lege ruimte (nooit onder de tekst). Geen veeg, geen gloed. */
.aurora{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--wit);--ring:22rem;
  --ax:calc(100% - clamp(var(--s5),.5rem + 5vw,var(--s9)) - 11rem);--ay:50%}
.aurora-ring{position:absolute;z-index:-1;pointer-events:none;width:var(--ring);aspect-ratio:1;left:var(--ax);top:var(--ay);transform:translate(-50%,-50%);border-radius:50%}
.aurora-ring::before,.aurora-ring::after{content:"";position:absolute;inset:0;border-radius:50%}
.aurora-ring::before{background:repeating-conic-gradient(rgba(255,255,255,.22) 0 .35deg,transparent .35deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 95%,#000 95.3%,#000 98.6%,transparent 99%);mask:radial-gradient(closest-side,transparent 95%,#000 95.3%,#000 98.6%,transparent 99%)}
.aurora-ring::after{background:repeating-conic-gradient(rgba(255,255,255,.45) 0 .5deg,transparent .5deg 30deg);
  -webkit-mask:radial-gradient(closest-side,transparent 90.5%,#000 90.8%,#000 98.6%,transparent 99%);mask:radial-gradient(closest-side,transparent 90.5%,#000 90.8%,#000 98.6%,transparent 99%)}
@media (max-width:63.99em){.cta-vlak .aurora-ring{display:none}}
.aurora h2,.aurora h3{color:var(--wit)}
.aurora p,.aurora li{color:var(--op-donker-sub)}
.aurora :is(.hero-intro,.cta-html) a{color:var(--wit);text-decoration:underline;text-decoration-color:rgba(255,255,255,.7);text-underline-offset:.2em}
.op-donker :focus-visible{outline-color:var(--wit)}
@media (hover:hover) and (pointer:fine){.aurora :is(.hero-intro,.cta-html) a:hover{text-decoration-thickness:2px}}
@media (min-width:64em){.cta-vlak.aurora:not(.met-beeld) .cta-tekst,.voet-cta.aurora>:not(.aurora-ring){max-width:calc(100% - var(--ring) - var(--s7))}}

/* ---------- 10. Gedeelde tekstonderdelen ---------- */
.label{margin-bottom:var(--s3);font-size:var(--t-s);font-weight:500;line-height:1.4;color:var(--sub)}
.op-donker .label{color:var(--op-donker-sub)}
.kopgroep{max-width:44rem}
.kopgroep .kop-onder{margin-top:var(--s2);font-size:var(--t-xl);line-height:1.45;color:var(--sub)}
@media (min-width:48em){.kopgroep .kop-onder{font-size:var(--t-2xl);line-height:1.35;letter-spacing:-.012em}}
.op-donker .kop-onder{color:var(--op-donker-sub)}
.sectiekop{max-width:22ch}
.kopgroep+*{margin-top:var(--s6)}
.sectie-intro,.kopgroep+.sectie-intro{margin-top:var(--s4)}
.tel{margin:0;font-weight:400;color:var(--sub)}
.tel a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--blauw);text-decoration-thickness:1px;text-underline-offset:.22em}
@media (hover:hover) and (pointer:fine){.tel a:hover{color:var(--donker);text-decoration-thickness:2px}}
.op-donker .tel{color:var(--op-donker-sub)}
.op-donker .tel a{color:var(--wit);text-decoration-color:rgba(255,255,255,.7)}
@media (hover:hover) and (pointer:fine){.op-donker .tel a:hover{color:var(--wit);text-decoration-color:var(--wit)}}
.figuur img{width:100%;border-radius:var(--r-mid)}
.figuur figcaption{margin-top:var(--s3);font-size:var(--t-s);color:var(--sub)}
.alle{margin-top:var(--s6)}

/* ---------- 11. Hero's ---------- */
/* 11a foto-hero (klasse .hero-home.foto-pagina; de home zelf heeft de opening, 11c): één foto van rand tot rand.
   Tekst links op een lichte scrim (wit → transparant), donkere tekst. Onder 64em: fotostrook met de tekst op wit eronder (contrast gegarandeerd). */
.hero-home .hero-foto{position:relative;isolation:isolate;display:flex;flex-direction:column}
.hero-home .hero-beeld{order:-1;height:clamp(15rem,50svh,26rem);background:var(--lichtblauw)}
.hero-home .hero-beeld picture{display:block;width:100%;height:100%}
.hero-home .hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:34% 50%}
.hero-home .hero-foto>.wrap{padding-block:var(--s6) var(--s4)}
.hero-home h1{font-size:var(--t-5xl);line-height:1.02;letter-spacing:-.035em;max-width:11ch}
.hero-home .hero-intro{margin-top:var(--s5);max-width:28em;font-size:var(--t-l);line-height:1.6;color:var(--donker)}
@media (min-width:48em){.hero-home .hero-intro{font-size:var(--t-xl)}}
.hero-home .hero-kenmerken{color:var(--donker)}
@media (min-width:64em){
  .hero-home .hero-foto{justify-content:center;height:clamp(35rem,84vh,51.25rem)}
  .hero-home .hero-beeld{position:absolute;inset:0;z-index:-2;height:auto}
  .hero-home .hero-beeld img{object-position:0% 45%}
  /* home-hero: smallere, zachtere scrim; mensen en klok blijven scherp */
  .hero-home .hero-foto::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;--l:max(var(--rand),(100% - var(--breedte)) / 2);
    background:linear-gradient(90deg,rgba(255,255,255,.9) 0,rgba(255,255,255,.86) calc(var(--l) + 25.5rem),rgba(255,255,255,.55) calc(var(--l) + 28.5rem),rgba(255,255,255,.2) calc(var(--l) + 31.5rem),rgba(255,255,255,0) calc(var(--l) + 34rem))}
  .hero-home .hero-foto>.wrap{padding-block:var(--s7)}
  .hero-home .hero-tekst{grid-column:1/7}
}
.hero-onder{padding-bottom:var(--s7)}
.hero-onder .hero-zone{margin-top:var(--s5)}
.hero-kenmerken{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s6) 0 0;padding:0;list-style:none;font-size:var(--t-s);color:var(--tekst)}
.hero-kenmerken li{display:flex;align-items:center;gap:var(--s2)}
.hero-kenmerken li::before{content:"";flex:none;width:.6rem;height:.35rem;margin-top:-.2rem;border-left:2px solid var(--blauw);border-bottom:2px solid var(--blauw);transform:rotate(-45deg)}
.hero-zone{grid-column:1/-1;margin-top:var(--s6)}
/* 11b pagina's */
.hero-pagina{padding-block:var(--s5) var(--s8);border-bottom:1px solid var(--lijn)}
.hero-pagina .raster{row-gap:var(--s6);align-items:center}
.hero-kruimel{grid-column:1/-1;margin-bottom:var(--s2)}
.hero-pagina h1{max-width:22ch}
.h1-vervolg{display:block}
.hero-pagina .hero-intro,.artikel-kop .hero-intro{margin-top:var(--s5);max-width:34em;font-size:var(--t-l);line-height:1.6;color:var(--sub)}
@media (min-width:48em){.hero-pagina .hero-intro,.artikel-kop .hero-intro{font-size:var(--t-xl);line-height:1.55}}
.hero-intro>*+*{margin-top:var(--s3)}
.hero-intro a{color:inherit;text-decoration:underline;text-decoration-color:var(--blauw);text-underline-offset:.2em}
@media (min-width:64em){
  .hero-pagina .hero-tekst{grid-column:1/8}
  .hero-pagina.zonder-beeld .hero-tekst{grid-column:1/10}
}
.hero-zone.blok-uitgelicht{margin-top:var(--s7)}
.hero-zone.blok-filter{margin-top:var(--s6)}
.hero-zone .filter{margin-bottom:0}
.hero-zone.rol-letternavigatie{margin-top:var(--s6)}
/* hero met formulier of contactblok rechts */
@media (min-width:64em){
  .hero-pagina.met-rechts .hero-tekst{grid-column:1/7}
  .hero-pagina.met-rechts .hero-rechts{grid-column:8/13}
  .hero-pagina.met-formulier .raster{align-items:start;grid-template-rows:auto auto 1fr}
  .hero-pagina.met-formulier .hero-tekst{grid-column:1/6;grid-row:2}
  .hero-pagina.met-formulier .hero-rechts{grid-column:7/13;grid-row:2/span 2}
}
.hero-zone-links{margin-top:var(--s7)}
.hero-zone-links .kaartlijst{--kol:1;gap:var(--s5)}
.hero-zone-links .kaartlijst>.kaart{padding-top:0;padding-left:var(--s4);border-top:0;border-left:2px solid var(--blauw)}
.hero-zone-links .citaat blockquote{font-size:var(--t-xl)}
.hero-zone-links .citaat{padding-left:var(--s4);border-left:3px solid var(--blauw)}
.hero-pagina .formulier-wrap{padding:clamp(var(--s5),2vw + .5rem,var(--s7));border:1px solid var(--lijn);border-radius:var(--r-mid);background:var(--wit);box-shadow:var(--schaduw)}
/* hero met formulier: op mobiel staat het formulier direct na de intro */
@media (min-width:64em){.hero-pagina.met-formulier .hero-zone-links-groep{grid-column:1/6;grid-row:3}}
.hero-zone-links-groep{min-width:0}
@media (max-width:63.99em){.hero-pagina.met-formulier .hero-tekst{grid-row:auto}}
@media (min-width:64em){.hero-home .hero-tekst>*,.hero-home .hero-intro{max-width:25rem}}
/* 11c home-opening (naar akiles.app): foto van rand tot rand, een wit pilkaartje met een klantcitaat midden op de foto,
   en een licht paneel (radius 24px, binnen de container) dat over de onderrand van de foto valt. Alles erin gecentreerd,
   behalve de pijlers: drie kolommen, links uitgelijnd, elk met een bovenlijn van 2px (de eerste blauw).
   Mobiel: lagere foto, het kaartje zit kleiner op de naad tussen foto en paneel (vrij van de gezichten). */
.opening{--over:3rem;--foto-h:clamp(15rem,48svh,28rem);position:relative;isolation:isolate}
.opening-foto{position:relative;height:var(--foto-h);overflow:hidden;background:var(--lichtblauw)}
.opening-foto picture{display:block;width:100%;height:100%}
.opening-foto img{width:100%;height:100%;object-fit:cover;object-position:34% 50%}
.opening-pil{position:absolute;z-index:3;inset-inline:0;top:calc(var(--foto-h) - var(--over));translate:0 -40%;display:flex;align-items:center;gap:var(--s2);
  width:fit-content;max-width:calc(100% - 2 * var(--rand));margin-inline:auto;padding:var(--s1) var(--s2) var(--s1) var(--s1);
  background:var(--wit);border:1px solid var(--lijn);border-radius:999px;box-shadow:0 1px 2px rgba(11,26,46,.08),0 6px 20px -4px rgba(11,26,46,.18);
  color:var(--ink);text-decoration:none;line-height:1.3}
.opening-pil:focus-visible{outline-offset:4px;border-radius:999px}
.pil-portret{flex:none;width:2.25rem;height:2.25rem;border-radius:50%;overflow:hidden;background:var(--lichtblauw)}
.pil-portret picture{display:block;width:100%;height:100%}
.pil-portret img{width:100%;height:100%;object-fit:cover}
.pil-tekst{display:flex;flex-direction:column;min-width:0}
.pil-citaat{font-size:.8125rem;font-weight:600;color:var(--ink)}
.pil-wie{font-size:.75rem;color:var(--sub)}
.pil-pijl{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--lichtblauw)}
.pil-pijl .ic{width:1rem;height:1rem;color:var(--ink);transition:transform var(--duur-kleur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .opening-pil:hover .pil-citaat{text-decoration:underline;text-decoration-color:var(--blauw);text-decoration-thickness:2px;text-underline-offset:.2em}
  .opening-pil:hover .pil-pijl .ic{transform:translateX(2px)}
}
.opening-wrap{position:relative;z-index:2;margin-top:calc(-1 * var(--over))}
.opening-paneel{padding:calc(var(--s6) + var(--s5)) clamp(var(--s4),1rem + 3vw,var(--s8)) var(--s6);border:1px solid transparent;text-align:center} /* rand: de zichtbare rand zit in de laag eronder */
/* het witte vlak van het paneel: twee lagen van volle breedte achter de inhoud (rand en wit), met clip-path op de
   maat van de container (radius 24px). Bij scrollen gaan ze naar de volle breedte (zie 'opening: scrolleffect'). */
.opening::before,.opening::after{content:"";position:absolute;z-index:1;inset:calc(var(--foto-h) - var(--over)) 0 0;pointer-events:none;
  --l:max(var(--rand),(100% - var(--breedte)) / 2)}
.opening::before{background:var(--lijn);clip-path:inset(0 var(--l) 0 round var(--r-groot))}
.opening::after{background:linear-gradient(180deg,#DCEBF6 0%,#EEF5FB 60%,#FFFFFF 100%);clip-path:inset(1px calc(var(--l) + 1px) 1px round calc(var(--r-groot) - 1px))}
.opening h1{font-size:var(--t-5xl);line-height:1.02;letter-spacing:-.035em;color:var(--ink)}
.opening .hero-intro{max-width:34em;margin:var(--s5) auto 0;font-size:var(--t-l);line-height:1.6;color:var(--donker);text-wrap:balance}
.opening .hero-intro p{-webkit-hyphens:manual;hyphens:manual} /* gecentreerde intro: geen afbreekstreepjes */
.opening .knoppen{justify-content:center}
.opening .hero-kenmerken{justify-content:center;margin-top:var(--s5);color:var(--donker)}
.opening-onder{margin-top:var(--s7);text-align:left}
/* pijlers (variant 4): kolommen links uitgelijnd op de binnenmarge van het paneel, bovenlijn 2px */
.pijlers{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5) clamp(var(--s5),2.5vw,var(--s6));margin:0;padding:0;list-style:none}
.pijlers a{display:block;height:100%;padding-top:.75rem;border-top:2px solid var(--op-licht-lijn);color:var(--ink);text-decoration:none;transition:border-color var(--duur-kleur)}
.pijlers li:first-child a{border-top-color:var(--blauw)}
.pijlers a:focus-visible{outline-offset:6px;border-radius:var(--r-klein)}
.pijlers b{display:block;font-weight:600;color:var(--ink)}
.pijlers span{display:block;margin-top:2px;font-size:var(--t-s);color:var(--sub)}
@media (hover:hover) and (pointer:fine){
  .pijlers a:hover{border-top-color:var(--blauw)}
  .pijlers a:hover b{text-decoration:underline;text-decoration-color:var(--blauw);text-decoration-thickness:2px;text-underline-offset:.22em}
}
@media (min-width:48em){
  .opening{--over:7.5rem;--foto-h:clamp(24rem,60svh,46rem)}
  .opening-foto img{object-position:42% 50%}
  .opening-pil{top:calc(var(--foto-h) * .52);translate:0 -50%;gap:var(--s4);padding:var(--s2) var(--s3) var(--s2) var(--s2)}
  .pil-pijl .ic{width:1.125rem;height:1.125rem}
  .pil-portret{width:3.5rem;height:3.5rem}
  .pil-citaat{font-size:var(--t-m)}
  .pil-wie{font-size:var(--t-s)}
  .pil-pijl{width:2.5rem;height:2.5rem}
  .opening-paneel{padding-block:clamp(3.5rem,1rem + 4.5vw,5.5rem) var(--s7)}
  .opening .hero-intro{font-size:var(--t-xl)}
  .opening-onder{margin-top:clamp(var(--s7),1rem + 3vw,var(--s8))}
  .pijlers{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* kleinste telefoons: de pijl vervalt (het hele kaartje is de link), zodat naam en bedrijf op één regel blijven */
@media (max-width:22.49em){.pil-pijl{display:none}.opening-pil{padding-right:var(--s4)}}
@media (min-width:64em){.opening-foto img{object-position:50% 50%}}
/* eigenaar 8 nov (variant 2): compacter paneel in twee kolommen – kop en intro links, knoppen en vinkjes rechts, pijlers eronder */
@media (min-width:64em){
  .opening h1{font-size:clamp(3rem,2rem + 3vw,4.5rem)}
  .opening-paneel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s8);align-items:end;text-align:left;
    padding-block:clamp(2.75rem,1rem + 2.5vw,3.5rem) var(--s6)}
  .opening-paneel>h1{grid-column:1;grid-row:1/3}
  .opening .hero-intro{grid-column:1;grid-row:3;margin:var(--s4) 0 0;font-size:var(--t-l);text-wrap:pretty}
  .opening .knoppen{grid-column:2;grid-row:1;justify-content:flex-start;margin-top:0}
  .opening .hero-kenmerken{grid-column:2;grid-row:2;justify-content:flex-start;margin-top:var(--s4)}
  .opening-onder{grid-column:1/-1;grid-row:4;margin-top:var(--s7)}
}
@media (prefers-reduced-motion:reduce){.pil-pijl .ic{transition:none}}
/* opening: scrolleffect (naar akiles.app). Van 0 tot 55vh scrollen groeit het witte vlak van containerbreedte
   (radius 24px, rand) naar de volle breedte (radius 0, rand weg); de foto schuift iets trager mee en zoomt licht in
   (desktop: hooguit 20px en 1,04; mobiel alleen het vlak). Lineair aan de scroll gekoppeld, alleen clip-path en
   transform: de inhoud van het paneel blijft staan. Scroll-driven animations; anders site.js (--p, 0–1).
   Minder beweging: niets, de opening staat stil zoals hierboven. */
@keyframes opening-groei{to{clip-path:inset(0 0 0 round 0)}}
@keyframes opening-foto{to{transform:translateY(1.25rem) scale(1.04)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .opening::before,.opening::after{animation:opening-groei linear both;animation-timeline:scroll(root block);animation-range:0 55vh}
    @media (min-width:48em){.opening-foto img{transform-origin:50% 100%;animation:opening-foto linear both;animation-timeline:scroll(root block);animation-range:0 55vh}}
  }
  @supports not (animation-timeline:scroll()){
    .opening::before{clip-path:inset(0 calc(var(--l) * (1 - var(--p,0))) 0 round calc(var(--r-groot) * (1 - var(--p,0))))}
    .opening::after{clip-path:inset(calc(1px - 1px * var(--p,0)) calc((var(--l) + 1px) * (1 - var(--p,0))) calc(1px - 1px * var(--p,0)) round calc((var(--r-groot) - 1px) * (1 - var(--p,0))))}
    @media (min-width:48em){.opening-foto img{transform-origin:50% 100%;transform:translateY(calc(1.25rem * var(--p,0))) scale(calc(1 + .04 * var(--p,0)))}}
  }
}
/* foto-hero op pagina's (branches, over ons, klantverhalen, prijzen, klokken, werkwijze):
   hetzelfde component als home, iets lager; tekst links op een lichte scrim, onderwerp rechts.
   Onder 64em: fotostrook boven, tekst op wit eronder (zoals home). Uitsnede per foto via foto-<naam>. */
.foto-pagina .hero-beeld{overflow:hidden;background:var(--achtergrond)}
.foto-pagina h1{font-size:var(--t-4xl);line-height:var(--rg-strak);letter-spacing:-.03em;max-width:20ch}
.foto-pagina .hero-kruimel{margin-bottom:var(--s5)}
@media (min-width:64em){
  .foto-pagina .hero-foto{height:auto;min-height:clamp(27.5rem,64vh,40rem)}
  .foto-pagina .hero-foto>.wrap{padding-block:var(--s5) var(--s7)}
  .foto-pagina .hero-tekst{grid-column:1/8}
  /* tekstkolom: 33rem; bij een lang woord in de H1 (lw-22 en meer) groeit hij naar 40rem, zodat de H1 groot blijft */
  .foto-pagina .hero-tekst{grid-column:1/-1}
  .foto-pagina .hero-tekst>*,.foto-pagina .hero-intro{max-width:var(--tk)}
  /* geen scrim: de foto begint pas rechts van de tekstkolom en loopt over 10rem geleidelijk in vanaf wit,
     zodat niemand half achter een waas staat en de tekst altijd op wit staat */
  .foto-pagina .hero-foto::before{content:none}
  .foto-pagina .hero-beeld{--l:max(var(--rand),(100% - var(--breedte)) / 2);--fl:calc(var(--l) + var(--tk) + var(--s5))}
  .foto-pagina .hero-beeld img{width:calc(100% - var(--fl));margin-left:var(--fl);object-position:var(--fx,50%) var(--fy,50%);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10rem);mask-image:linear-gradient(90deg,transparent,#000 10rem)}
}
@media (max-width:63.99em){.foto-pagina .hero-beeld img{object-position:var(--mx,50%) var(--fy,50%)}}
.foto-b-productie{--fy:30%;--mx:40%}
.foto-b-groothandel{--fy:35%;--fx:85%;--mx:75%}
.foto-b-logistiek{--fy:60%;--mx:60%}
.foto-b-mkb{--fy:55%;--mx:60%}
.foto-b-voeding{--fy:45%;--mx:62%}
.foto-kvh-hero{--fy:30%;--mx:72%}
.foto-led-hal{--fy:20%;--mx:88%}
.foto-over-hero{--fy:72%;--fx:30%;--mx:40%}
.foto-kv-schotte-g1{--fy:72%;--mx:30%}
.foto-werkwijze{--fy:25%;--fx:0%;--mx:66%}
/* demo: vrijstaande laptop met Astrow links (geen kader) */
.hero-product{margin-top:var(--s7)}
.hero-product img{width:100%;max-width:32rem;height:auto}
/* foto-hero: uitsnede per foto (oplossingen, klantverhalen); onderwerp rechts naast de scrim */
.foto-m-aanwezigheid{--fy:50%;--mx:35%}
.foto-m-bezoekers{--fy:40%;--mx:70%}
.foto-m-kostenplaatsen{--fy:65%;--mx:70%}
.foto-m-projecten,.foto-m-roosterplanning{--fy:60%;--mx:55%}
.foto-m-tijdregistratie{--fy:55%;--mx:40%}
.foto-m-toegangscontrole{--fy:45%;--mx:45%}
.foto-m-verlof{--fy:35%;--mx:50%}
.foto-m-werknemersportaal{--fy:50%;--mx:45%}
.foto-logistiek{--fy:60%;--mx:50%}
.foto-kv-becx{--fy:40%;--mx:72%}
.foto-kv-bvb{--fy:60%;--mx:70%}
.foto-kv-garvo{--fy:50%;--mx:60%}
.foto-kv-hukra{--fy:30%;--mx:55%}
.foto-kv-kicken{--fy:50%;--mx:70%}
.foto-kv-kraan-slagers{--fy:30%;--mx:40%}
.foto-kv-reobijn{--fy:60%;--mx:65%}
.foto-kv-schotte{--fy:50%;--mx:35%}
.foto-kv-vanderleeden{--fy:50%;--mx:50%}
.product-groot{display:flex;justify-content:center;padding:clamp(var(--s4),4vw,var(--s8));border-radius:var(--r-mid);background:var(--lichtblauw-zacht)}
.product-groot picture{display:contents}
.product-groot img{width:auto;max-width:100%;height:auto}
.product-groot:is(.k-vrij,.k-telefoon) img{filter:drop-shadow(0 10px 18px rgba(11,26,46,.14))}
.product-groot.staand img{max-width:min(100%,15rem)}
.product-groot.k-vrij:not(.staand) img{max-width:min(100%,48rem)}
/* H1 in de hero: het langste woord past altijd op één regel (lw-N = aantal tekens); nooit afbreken zonder streepje */
:is(.hero-tekst,.artikel-kop-tekst){container-type:inline-size}
:is(.hero-home,.hero-pagina,.artikel-kop) h1[class*="lw-"]{-webkit-hyphens:manual;hyphens:manual;
  font-size:min(var(--h1,var(--t-4xl)),calc(100cqi / ((var(--lw) + 1) * .54)));max-width:max(20ch,calc((var(--lw) + 2) * 1ch))}
@media (min-width:64em){.foto-pagina h1[class*="lw-"]{font-size:min(var(--t-4xl),calc(min(100cqi,var(--tk)) / ((var(--lw) + 1) * .54)));max-width:var(--tk)}}
/* filter onder een foto-hero staat dicht bij wat hij filtert (zoals op het blogoverzicht) */
.hero-home .hero-onder:has(.blok-filter){padding-bottom:0}
/* productscherm: geen kader in een kader; alleen de schermrand met een zachte schaduw op het lichte vlak */
.product-groot:is(.k-venster,.k-klein) img{padding:0;border:0;border-radius:var(--r-klein);background:none;box-shadow:0 1px 2px rgba(11,26,46,.08),0 12px 32px -8px rgba(11,26,46,.16)}
/* foto-hero op een telefoon: lager, zodat de kop in het eerste scherm begint */
@media (max-width:39.99em){.foto-pagina .hero-beeld{height:clamp(12.5rem,36svh,17rem)}}

/* ---------- 12. Secties ---------- */
.sectie{padding-block:var(--sectie)}
.sectie:not(.vlak)+.sectie:not(.vlak){padding-top:0}
.vlak{background:var(--grijs)}
.cta+.sectie:not(.vlak),.sectie:not(.vlak)+.cta{padding-top:0}
.blok+.blok{margin-top:var(--s7)}
/* tekstsectie: kop links, tekst rechts */
@media (min-width:64em){.s-tekst .tekst-kop{grid-column:1/5}.s-tekst .tekst-romp{grid-column:5/13}}
.s-tekst .sectiekop{font-size:min(var(--t-2xl),var(--kopmax,100vw));line-height:1.25}
.tekst-romp>*{max-width:var(--leesbreedte)}
.tekst-romp>*+*{margin-top:var(--s5)}
.s-tekst+.s-tekst .raster{padding-top:var(--s7);border-top:1px solid var(--lijn)}
.s-tekst+.s-tekst{padding-top:var(--s7)}
/* inhoud met zijkant */
.inhoud-raster{row-gap:var(--s7)}
@media (min-width:64em){.inhoud-raster>.hoofd{grid-column:1/8}.inhoud-raster>.zij{grid-column:9/13}}
.hoofd>*{max-width:var(--leesbreedte)}
.hoofd>*+*{margin-top:var(--s4)}
.hoofd>h2{margin-top:var(--s8);font-size:min(var(--t-2xl),var(--kopmax,100vw));line-height:1.25}
.hoofd>h2:first-child{margin-top:0}
.hoofd>h3{margin-top:var(--s6)}
.zij-blok{padding:var(--s5) var(--s5) var(--s6);border-radius:var(--r-mid);background:var(--grijs)}
/* plakkende zijkolommen alleen als ze in het venster passen (site.js zet .past), anders vallen knop en nummer buiten beeld */
@media (min-width:64em){:is(.zij>.zij-blok:first-of-type,.zij-plak).past{position:sticky;top:calc(var(--kophoogte) + var(--s5))}}
.zij-blok+.zij-blok{margin-top:var(--s4)}
.zij-kop{margin-bottom:var(--s3);font-size:var(--t-l);line-height:1.35;letter-spacing:-.01em}
.zij-blok .proza{font-size:var(--t-m)}
.zij-blok .proza ul{padding:0;list-style:none}
.zij-blok .proza li{position:relative;padding-left:1.6em}
.zij-blok .proza li+li{margin-top:var(--s2)}
.zij-blok .proza li::before{content:"";position:absolute;left:.15em;top:.5em;width:.65rem;height:.35rem;border-left:2px solid var(--blauw);border-bottom:2px solid var(--blauw);transform:rotate(-45deg)}
.zij-blok .knoppen{margin-top:var(--s5);gap:var(--s3) var(--s4)}
.zij-blok .label{margin-bottom:var(--s2)}
.zij-logo img{margin-bottom:var(--s4)}
/* schermafbeelding uit de hero, klein in de zijkolom: het hele scherm, nooit groter dan zijn eigen resolutie,
   dunne rand en radius 8px; mobiel hooguit 15rem hoog */
.scherm-klein{margin:0 0 var(--s5)}
.scherm-klein picture{display:block}
.scherm-klein img{display:block;width:auto;height:auto;max-width:100%;border:1px solid #D5E3EE;border-radius:var(--r-klein);background:var(--wit);box-shadow:0 4px 14px rgba(6,55,92,.08)}
@media (max-width:63.99em){.scherm-klein img{max-height:15rem}}
.scherm-klein.vrij img{border:0;border-radius:0;background:none;box-shadow:none}
.scherm-klein.staand img{max-height:26rem;margin-inline:auto}
@media (max-width:63.99em){.scherm-klein.staand img{max-height:18rem}}
/* faq */
.faq{row-gap:var(--s6)}
@media (min-width:64em){.faq-kop{grid-column:1/5}.faq-rechts{grid-column:5/13}}
.faq-rechts{min-width:0}
.faq-kop .sectiekop{font-size:min(var(--t-3xl),var(--kopmax,100vw))}
.hulp{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--lijn)}
.hulp p+p{margin-top:var(--s2)}
.hulp-kop{font-weight:600;color:var(--tekst)}
.hulp-tel{font-size:var(--t-xl);font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--blauw);text-decoration-thickness:1px;text-underline-offset:.2em}
.faq-lijst{border-top:1px solid var(--lijn)}
.faq-lijst details{border-bottom:1px solid var(--lijn)}
.faq-lijst summary{position:relative;display:block;padding:var(--s5) var(--s7) var(--s5) 0;cursor:pointer;list-style:none;color:var(--ink);font-weight:600;font-size:var(--t-l);line-height:1.4}
.faq-lijst summary::-webkit-details-marker{display:none}
.faq-lijst summary::after{content:"";position:absolute;right:var(--s2);top:50%;width:.6rem;height:.6rem;margin-top:-.45rem;border-right:2px solid var(--blauw);border-bottom:2px solid var(--blauw);transform:rotate(45deg);transition:transform var(--duur-in) var(--ease-out)}
.faq-lijst details[open] summary::after{transform:translateY(.35rem) rotate(-135deg)}
.faq-lijst summary:focus-visible::after{transition:none}
@media (hover:hover) and (pointer:fine){.faq-lijst summary:hover{color:var(--donker)}}
.faq-antwoord{max-width:var(--leesbreedte);padding-bottom:var(--s5)}
/* getuige: één uitgelicht klantcitaat */
.citaat{max-width:48rem}
.citaat blockquote{font-size:var(--t-2xl);line-height:1.35;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.citaat blockquote>*+*{margin-top:var(--s3)}
.citaat figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s5);font-size:var(--t-m);color:var(--sub)}
.s-getuige .citaat{position:relative;padding-left:var(--s6);border-left:3px solid var(--blauw)}
.s-getuige .citaat blockquote{font-size:var(--t-3xl);line-height:1.22;letter-spacing:-.022em}
/* eigenaar 8 nov (variant 3): een witte kaart met het citaat valt over de klantfoto; compacte sectie */
.s-getuige.met-foto{padding-block:clamp(var(--s7),2rem + 3vw,var(--s8))}
.getuige-raster{display:grid;grid-template-columns:minmax(0,1fr)}
.getuige-foto{margin:0;border-radius:var(--r-mid);overflow:hidden;aspect-ratio:3/2;background:var(--lijn)}
.getuige-foto picture{display:block;height:100%}
.getuige-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.getuige-tekst{position:relative;z-index:1;background:var(--wit);border-radius:var(--r-mid);padding:var(--s6);box-shadow:0 10px 40px rgba(6,55,92,.12)}
.s-getuige.met-foto .citaat{padding-left:0;border-left:0}
.s-getuige.met-foto .citaat blockquote{font-size:var(--t-2xl)}
.s-getuige.met-foto .citaat blockquote::before{content:"\201C" / "";display:block;font-size:4.5rem;line-height:.55;height:.45em;color:var(--amber);font-weight:700}
@media (max-width:63.99em){
  .getuige-foto{grid-row:1}
  .getuige-tekst{grid-row:2;margin:calc(-1 * var(--s7)) var(--s4) 0}
}
@media (min-width:64em){
  .getuige-raster>*{grid-row:1;grid-column:1}
  .getuige-foto{margin-left:36%;aspect-ratio:auto;height:clamp(20rem,26vw,24rem)}
  .getuige-tekst{align-self:center;max-width:38rem;padding:var(--s6) var(--s7)}
}
/* stappen: echte volgorde, dus genummerd */
.stappen{display:grid;grid-template-columns:repeat(var(--kol,3),minmax(0,1fr));gap:var(--s6) var(--goot);counter-reset:stap}
.stappen.n4{--kol:4}
@media (max-width:63.99em){.stappen,.stappen.n4,.stappen.n5{--kol:2}}
@media (max-width:39.99em){.stappen,.stappen.n4,.stappen.n5{--kol:1}}
.stappen li{position:relative;padding-top:var(--s5);border-top:2px solid var(--blauw);counter-increment:stap;min-width:0}
.stappen li::before{content:counter(stap);display:block;margin-bottom:var(--s3);font-size:var(--t-s);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.stappen h3{font-size:var(--t-l)}
.stap-tekst{margin-top:var(--s2);color:var(--tekst)}
@media (min-width:64em){.stappen.n5 .stap-tekst{font-size:var(--t-m)}}
/* beeldband boven een sectie */
.band-wrap{margin-bottom:var(--s6)}
.figuur.band img{aspect-ratio:3/1;object-fit:cover;object-position:60% 25%}
@media (max-width:47.99em){.figuur.band img{aspect-ratio:2/1}}
/* 'Van A tot Z' is een bijzin op home: kop een stap kleiner dan de andere sectiekoppen */
.met-band .kopgroep .sectiekop{font-size:var(--t-2xl);line-height:1.2}
.met-band .kopgroep .kop-onder{font-size:var(--t-xl);line-height:1.4}
/* zijkant naast een breed blok */
@media (min-width:64em){
  .s-breed.met-zij>.wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--goot);align-items:start}
  .s-breed.met-zij>.wrap>*{grid-column:1/9}
  .s-breed.met-zij>.wrap>.rol-zijkant{grid-column:9/13;grid-row:1/span 20;margin-top:0}
}
.s-breed.met-zij .rol-zijkant .zij-blok.past{position:sticky;top:calc(var(--kophoogte) + var(--s5))}
/* de zijkolom loopt mee over de hele hoogte, zodat de kaart erin kan blijven plakken (geen lege kolom naast lange stappen) */
@media (min-width:64em){.s-breed.met-zij>.wrap>.rol-zijkant{align-self:stretch}}
/* FAQ: de pijl sluit net zo direct als het antwoord */
.faq-lijst details:not([open]) summary::after{transition:none}
@media (max-width:63.99em){.type-blog .artikel-zij .zij-blok{order:1}}
/* stappen in een blog: zelfde tekstgrootte als de lopende tekst, minder lucht boven het nummer */
.artikel .stappen .stap-tekst{font-size:inherit;grid-column:1/-1}
/* blog: het stapnummer staat in de titelregel */
.artikel .stappen li{padding-top:var(--s4);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s3);align-items:baseline;align-content:start}
/* 'Zo werkt het' (en hetzelfde proces op Koppelingen): lichtblauw vlak met een halve wijzerplaat op de rechterrand */
.s-breed.met-stappen:not(.met-band){position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--lichtblauw)} /* clip: geen scrollcontainer, dus de zijkaart kan plakken */
.s-breed.met-stappen:not(.met-band)::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(26rem,2 * (var(--l) - var(--s4)));aspect-ratio:1;right:0;top:50%;transform:translate(50%,-50%);border-radius:50%;
  background:repeating-conic-gradient(rgba(0,131,198,.2) 0 .35deg,transparent .35deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 95%,#000 95.3%,#000 98.6%,transparent 99%);
  mask:radial-gradient(closest-side,transparent 95%,#000 95.3%,#000 98.6%,transparent 99%)}
.s-breed.met-stappen:not(.met-band)::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(26rem,2 * (var(--l) - var(--s4)));aspect-ratio:1;right:0;top:50%;transform:translate(50%,-50%);border-radius:50%;
  background:repeating-conic-gradient(rgba(1,78,155,.3) 0 .5deg,transparent .5deg 30deg);
  -webkit-mask:radial-gradient(closest-side,transparent 90.5%,#000 90.8%,#000 98.6%,transparent 99%);
  mask:radial-gradient(closest-side,transparent 90.5%,#000 90.8%,#000 98.6%,transparent 99%)}
/* wijzerplaat: verticaal gecentreerd op de rechterrand, half buiten beeld; hij past altijd in de buitenmarge
   (doorsnede 2 × marge − 2rem, hooguit 26rem), dus nooit over de stappen. Pas vanaf 85em, waar die marge breed genoeg is. */
.s-breed.met-stappen:not(.met-band){--l:max(var(--rand),(100% - var(--breedte)) / 2)}
@media (max-width:84.99em){.s-breed.met-stappen:not(.met-band)::before,.s-breed.met-stappen:not(.met-band)::after{display:none}}
.met-stappen .blok-stappen+.blok-logos{border-top-color:var(--op-licht-lijn)}
/* stappen met icoon: tegel, nummer, kop, tekst; op desktop een lijn met pijl naar de volgende stap */
.stappen.met-ic li{display:flex;flex-direction:column;padding-top:0;border-top:0}
.stappen.met-ic li::before{order:1;margin:var(--s4) 0 var(--s1)}
.stappen.met-ic h3{order:2}
.stappen.met-ic .stap-tekst{order:3}
.stap-ic{order:0;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border:1px solid var(--op-licht-lijn);border-radius:var(--r-mid);background:var(--wit)}
.stap-ic .ic{width:1.75rem;height:1.75rem}
@media (min-width:64em){
  .stappen.met-ic li:not(:last-child)::after{content:"";position:absolute;top:calc(1.75rem - 5px);left:calc(3.5rem + var(--s3));right:calc(var(--s3) - var(--goot));height:10px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%230083C6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center/6px 10px no-repeat,
    linear-gradient(var(--blauw),var(--blauw)) left center/calc(100% - 2px) 2px no-repeat}
  /* 'Van A tot Z' (home): bescheiden sectie. De foto begint pas rechts van de tekst (geen scrim, niemand half
   weggepoetst) en loopt over ±10rem geleidelijk in vanaf links en onderin uit in het grijs. Tekst op het effen grijs,
   stappen in een witte kaart die over de onderrand van de foto valt. Onder 64em: lage fotostrook boven de tekst. */
  .s-breed.met-band{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(var(--s7),1rem + 4vw,var(--s9));
    --l:max(var(--rand),(100% - var(--breedte)) / 2)}
  .s-breed.met-band>.band-wrap{position:absolute;z-index:-1;left:calc(var(--l) + min(26rem,36vw) + var(--s5));right:0;top:0;width:auto;height:clamp(22rem,32vw,30rem);max-width:none;margin:0;padding:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10rem),linear-gradient(180deg,#000 55%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 10rem),linear-gradient(180deg,#000 55%,transparent);mask-composite:intersect}
  .met-band .figuur.band,.met-band .figuur.band picture{display:block;height:100%}
  .met-band .figuur.band img{height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover;object-position:50% 20%}
  .s-breed.met-band>.wrap>.kopgroep,.s-breed.met-band>.wrap>.blok-tekst{max-width:min(26rem,36vw)}
  /* kaart steekt aan beide kanten even ver uit, zodat de stappen op het paginaraster blijven */
  .s-breed.met-band .blok-stappen{margin-top:var(--s7);margin-inline:calc(-1 * var(--s5));padding:var(--s7) var(--s5);border:1px solid var(--lijn);border-radius:var(--r-mid);background:var(--wit)}
}
.vlak+.cta{padding-top:var(--sectie)}
/* ritme: een FAQ na een witte sectie krijgt het grijze vlak */
.sectie:not(.vlak)+.sectie.s-faq:not(.vlak){padding-top:var(--sectie);background:var(--grijs)}
.sectie:not(.vlak)+.sectie.s-faq:not(.vlak)+:is(.cta,.sectie){padding-top:var(--sectie)}
/* support en contact: de routes als gelijke witte kaarten op een lichtblauw vlak direct onder de hero */
.hero-pagina+.sectie.s-breed:not(.vlak):has(.v-routes){padding-top:var(--sectie);background:var(--lichtblauw)}
.hero-pagina+.sectie.s-breed:has(.v-routes)+:is(.sectie,.cta){padding-top:var(--sectie)}
/* support: de FAQ na het TeamViewer-kader op grijs, het formulier daarna weer met lucht */
.cta:has(.kader)+.sectie.s-faq{padding-top:var(--sectie);background:var(--grijs)}
.cta:has(.kader)+.sectie.s-faq+.sectie{padding-top:var(--sectie)}
/* product uit de hero (scherm, telefoon, laptop): groot en vrijstaand in een rustig lichtblauw kader */
.s-product{padding-top:var(--sectie)}
.hero-home:has(.hero-onder .blok-filter)+.sectie{padding-top:var(--s6)}
/* werkwijze: naast de zijkolom staan de stappen onder elkaar, verbonden door één lijn omlaag.
   Geen wijzerplaat achter de zijkaart; de zijkaart wit op het lichtblauw. */
@media (min-width:64em){
  .s-breed.met-zij .stappen[class]{--kol:1;row-gap:0}
  .s-breed.met-zij .stappen li{padding:0 0 var(--s6) var(--s6);border-top:0;border-left:2px solid var(--blauw)}
  .s-breed.met-zij .stappen li:last-child{padding-bottom:0}
  .s-breed.met-zij .stappen .stap-tekst{max-width:var(--leesbreedte)}
}
.s-breed.met-stappen.met-zij::before,.s-breed.met-stappen.met-zij::after{content:none}
.met-stappen .zij-blok{background:var(--wit)}
/* routes (contact, support): gelijke witte kaarten op het lichtblauwe vlak */
.hero-pagina+.sectie.s-breed:has(.v-routes) .v-routes>.kaart{padding:var(--s6) var(--s5);border:1px solid var(--op-licht-lijn);border-radius:var(--r-mid);background:var(--wit)}
.artikel .stappen li::before{margin:0}

/* blauw sectievlak (kleurstap 'Accent'): hooguit één per pagina, gekozen in bouw.py (BLAUW_PADEN).
   Alle tekst puur wit (5,07:1 op --vlak-blauw); hiërarchie via maat en gewicht, niet via doorschijnend wit.
   Witte kaarten erin (zijkant) houden hun eigen kleuren. Partnerlogo's wit, wijzerplaat en lijnen in wit. */
.sectie.s-breed.blauw{background:var(--vlak-blauw);color:var(--wit)}
.blauw :is(.kopgroep,.stappen,.logostrook,.intro) :is(h2,h3,p,li,.label,.kop-onder,.logos-kop){color:var(--wit)}
.blauw .stappen li::before{color:var(--wit)}
.sectie.blauw .stappen li{border-color:rgba(255,255,255,.6)}
.blauw .stap-ic{border-color:var(--wit)}
.blauw .blok-stappen+.blok-logos{border-top-color:rgba(255,255,255,.35)}
.blauw :is(.logos,.rouleer-vak) img{filter:brightness(0) invert(1)}
.blauw .rouleer-vak{border-top-color:rgba(255,255,255,.35)}
.blauw .logo-pauze{border-color:var(--wit);background:var(--vlak-blauw);color:var(--wit)}
.blauw .rouleert .logo-pauze[aria-pressed="true"]:not(:focus-visible){border-color:var(--wit)}
.blauw .logostrook a{color:var(--wit);text-decoration-color:rgba(255,255,255,.7)}
@media (hover:hover) and (pointer:fine){.blauw .logostrook a:hover{color:var(--wit);text-decoration-color:var(--wit)}}
.blauw :focus-visible{outline-color:var(--wit)}
/* oplossingen op een branchepagina (v-modules) op het blauwe vlak: titels, teksten en 'Meer over'-links wit,
   bovenlijnen wit .4 (bij hover vol wit), focusring wit */
.blauw .v-modules :is(.kaart-kop,.kaart-kop a,.kaart-tekst,.kaart-door){color:var(--wit)}
.blauw .kaartlijst>.kaart{border-top-color:rgba(255,255,255,.4)}
@media (hover:hover) and (pointer:fine){
  .blauw .kaartlijst>.kaart:hover{border-top-color:var(--wit)}
  .blauw .kaart:hover :is(.kaart-kop a,.kaart-door){text-decoration-color:var(--wit)}
}
.blauw .kaart:active :is(.kaart-kop a,.kaart-door){text-decoration-color:var(--wit)}
.blauw .kaart:has(a:focus-visible){outline-color:var(--wit)}
/* eigenaar 8 nov (variant 3): grote omlijnde nummers 01–04 voor de oplossingen; de eerste in amber.
   Puur decoratief: de alt-tekst '' houdt ze buiten schermlezers. */
.blauw .v-modules{counter-reset:opl}
.blauw .v-modules>.kaart{counter-increment:opl;position:relative;padding-left:5.25rem}
.blauw .v-modules>.kaart::before{content:"0" counter(opl) / "";position:absolute;left:0;top:var(--s4);font-size:3.25rem;font-weight:700;line-height:.9;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.blauw .v-modules>.kaart:first-child::before{-webkit-text-stroke-color:#FFB54D}
@media (hover:hover) and (pointer:fine){.blauw .v-modules>.kaart:hover::before{-webkit-text-stroke-color:var(--wit)}.blauw .v-modules>.kaart:first-child:hover::before{-webkit-text-stroke-color:var(--amber)}}
@media (max-width:39.99em){.blauw .v-modules>.kaart{padding-left:3.75rem}.blauw .v-modules>.kaart::before{font-size:2.25rem}}
/* na het blauwe vlak begint de volgende witte sectie met de gewone sectieruimte */
.sectie.blauw+.sectie:not(.vlak){padding-top:var(--sectie)}
/* heel lichtblauw vlak (klantverhalen op een branchepagina; dezelfde tint als 'Kijk mee'); kaarten blijven wit */
.sectie.lichtblauw{background:var(--vlak-lichtblauw)}
.blauw .zij-blok{color:var(--tekst)}
.blauw .zij-blok :focus-visible{outline-color:var(--ink)}
.s-breed.met-stappen.blauw::before{background:repeating-conic-gradient(rgba(255,255,255,.3) 0 .35deg,transparent .35deg 6deg)}
.s-breed.met-stappen.blauw::after{background:repeating-conic-gradient(rgba(255,255,255,.5) 0 .5deg,transparent .5deg 30deg)}
/* home 'Zo werkt het': de hal schemert door het blauw. Op desktop gaat de foto rechtsboven open, naast de kop
   (daar staat geen tekst), met een zachte amber lichtnaad; vanaf de stappenrij is alles weer egaal blauw, zodat
   witte tekst overal minstens 4,5:1 haalt. */
#oplossingen.blauw.met-stappen{background:linear-gradient(rgba(0,116,178,.95),rgba(0,116,178,.95)),url("../img/v/v2-hal-800.webp") center 30%/cover}
#oplossingen.blauw.met-stappen::before,#oplossingen.blauw.met-stappen::after{content:none}
@media (min-width:64em){
  /* B1: de stappen staan rechts bovenin, dus geen open fotostuk meer achter tekst: de hal schemert overal zacht door,
     met een klein amber lichtje in de hoek rechtsboven (buiten de tekst) */
  #oplossingen.blauw.met-stappen{background:
    radial-gradient(22rem 9rem at 100% 0%,rgba(255,158,27,.28),rgba(255,158,27,0) 70%),
    linear-gradient(rgba(0,116,178,.955),rgba(0,116,178,.955)),
    url("../img/v/v2-hal-1600.webp") center 30%/cover}
}
@media (min-width:64em){
  .blauw .stappen.met-ic li:not(:last-child)::after{
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23FFFFFF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center/6px 10px no-repeat,
    linear-gradient(var(--wit),var(--wit)) left center/calc(100% - 2px) 2px no-repeat}
}

/* ---------- 13. Kaarten ---------- */
.beeldkaarten{display:grid;grid-template-columns:repeat(var(--kol,3),minmax(0,1fr));gap:var(--s7) var(--goot);padding:0;list-style:none}
.beeldkaarten.n2,.beeldkaarten.n4{--kol:2}
@media (min-width:64em){.beeldkaarten.n4{--kol:4}.beeldkaarten.n5{--kol:6}.beeldkaarten.n5>*{grid-column:span 2}.beeldkaarten.n5>:nth-child(n+4){grid-column:span 3}}
@media (min-width:40em) and (max-width:63.99em){
  .beeldkaarten{--kol:2}.beeldkaarten.oneven>:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--goot);align-content:start}
  .beeldkaarten.oneven>:last-child .kaart-beeld{grid-row:1/span 9;margin-bottom:0}
}
@media (max-width:39.99em){.beeldkaarten{--kol:1}}
.kaart{position:relative;display:flex;flex-direction:column;min-width:0}
.kaart-beeld{aspect-ratio:3/2;margin-bottom:var(--s4);border-radius:var(--r-mid);overflow:hidden;background:var(--grijs)}
.beeldkaarten.n5>:nth-child(n+4) .kaart-beeld{aspect-ratio:16/9}
.kaart-beeld img{width:100%;height:100%;object-fit:cover}
.kaart .kaart-kop{font-size:var(--t-xl);line-height:1.3}
.kaart-kop a,.kaart-strek{color:inherit;text-decoration:none}
.kaart-kop a::after,.kaart-strek::after{content:"";position:absolute;inset:0;z-index:1}
@media (hover:hover) and (pointer:fine){
  .kaart:hover .kaart-kop a,.kaart:hover .kaart-door{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--blauw)}
}
/* taste-skill: een kaart met link komt 2px omhoog, de foto zoomt licht in binnen zijn kader */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .kaart:has(.kaart-kop a,.kaart-strek){transition:transform 240ms var(--ease-out)}
  .kaart:has(.kaart-kop a,.kaart-strek):hover{transform:translateY(-2px)}
  /* het klikvlak loopt 2px door onder de opgetilde kaart, zodat de cursor op de onderrand niet van de kaart af valt */
  .kaart:has(.kaart-kop a,.kaart-strek):hover :is(.kaart-kop a,.kaart-strek)::after{bottom:-2px}
  .kaart:has(.kaart-kop a,.kaart-strek) .kaart-beeld img{transition:transform 600ms var(--ease-out)}
  .kaart:has(.kaart-kop a,.kaart-strek):hover .kaart-beeld img{transform:scale(1.025)}
  .kaart:has(.kaart-kop a,.kaart-strek):active{transform:translateY(0);transition-duration:var(--duur-druk)}
}
.kaart:active .kaart-kop a,.kaart:active .kaart-door{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--blauw)}
.kaart:has(a:focus-visible){outline:var(--focus);outline-offset:6px;border-radius:var(--r-mid)}
.kaart a:focus-visible{outline:none}
.kaart-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-bottom:var(--s2);font-size:var(--t-s);color:var(--sub)}
.kaart-beeld picture{display:block;width:100%;height:100%}
/* kaarten: logo's in een vak van vaste hoogte, zodat label, kop en tekst per rij gelijk lopen */
.kaart-logo{margin-bottom:var(--s3);display:flex;align-items:center;height:2.75rem}
.kaart-citaat{margin-top:var(--s3);font-size:var(--t-l);line-height:1.45;color:var(--tekst)}
.kaart-citaat q{quotes:"\201C" "\201D"}
.kaart-tekst{margin-top:var(--s2);color:var(--tekst)}
.kaart-tekst>*+*{margin-top:var(--s2)}
.kaart-door{margin-top:var(--s4);color:var(--ink);font-weight:600}
.kaart-door a{color:var(--ink)}
.linklijst{display:grid;grid-template-columns:repeat(var(--kol,3),minmax(0,1fr));column-gap:var(--goot);padding:0;list-style:none;border-top:1px solid var(--lijn)}
@media (max-width:63.99em){.linklijst{--kol:2}}
@media (max-width:39.99em){.linklijst{--kol:1}}
.linklijst .kaart{padding:var(--s4) var(--s7) var(--s4) 0;border-bottom:1px solid var(--lijn)}
.linklijst .kaart::after{content:"";position:absolute;right:var(--s3);top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;border-top:2px solid var(--blauw);border-right:2px solid var(--blauw);transform:rotate(45deg)}
.linklijst .kaart-kop{font-size:var(--t-l);font-weight:600}
/* kaartlijst: kaarten zonder foto, met een lijn erboven */
.kaartlijst{display:grid;grid-template-columns:repeat(var(--kol,3),minmax(0,1fr));gap:var(--s7) var(--goot);list-style:none;padding:0}
.kaartlijst.n2,.kaartlijst.n4{--kol:2}
@media (min-width:64em){.kaartlijst.n4.v-tijdlijn{--kol:4}.met-zij .kaartlijst.n4.v-tijdlijn{--kol:2}} /* naast een zijkaart (prijzen): 2 × 2 */
@media (max-width:63.99em){.kaartlijst{--kol:2}}
@media (max-width:39.99em){.kaartlijst{--kol:1}}
.kaartlijst>.kaart{padding-top:var(--s4);border-top:2px solid var(--blauw)}
.kaartlijst .kaart-kop{font-size:var(--t-l)}
.kaart-onder{margin-top:var(--s1);color:var(--sub)}
.kaart-tel{margin-top:var(--s3)}
.kaart-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s4)}
.kaart .boven{position:relative;z-index:2}
a.kaart-tekst{display:block;color:var(--tekst);text-decoration:none}
@media (hover:hover) and (pointer:fine){.kaart:hover a.kaart-tekst{color:var(--donker)}}
.kaart .badge{color:var(--ink);font-weight:600}
.specs{display:grid;gap:var(--s1);margin-top:var(--s4);padding:var(--s3) 0;border-block:1px solid var(--lijn);list-style:none;font-size:var(--t-m);color:var(--tekst)}
.kaart-details{margin-top:var(--s4)}
/* 'Alle kenmerken': een uitklapper met dezelfde pijl als de FAQ */
.kaart-details summary{cursor:pointer;color:var(--ink);font-weight:600;min-height:2.75rem;display:flex;align-items:center;gap:var(--s3);list-style:none}
.kaart-details .proza{margin-top:var(--s2);font-size:var(--t-m)}
.kaart-details .proza ul{padding-left:1.1em}
/* producten (prikklokken) */
.v-producten>.kaart{padding:var(--s5);border:1px solid var(--lijn);border-top:3px solid var(--blauw);border-radius:var(--r-mid)}
.v-producten .kaart-kop{font-size:var(--t-xl)}
/* 'Alle kenmerken' en de belregel staan per rij op één hoogte */
.v-producten .kaart-tekst{flex-grow:1}
/* routes (contact, support) */
.v-routes>.kaart{padding-top:var(--s5)}
.v-routes .kaart-tel a{font-size:var(--t-xl)}
/* routekaarten die zelf een link zijn (contact: 'Sneller op de juiste plek'): pijl rechts naast de titel, zoals de linklijst */
.v-routes>.kaart:has(.kaart-kop a) .kaart-kop{padding-right:var(--s6)}
.v-routes>.kaart:has(.kaart-kop a)::after{content:"";position:absolute;right:var(--s3);top:calc(var(--s5) + .6em);width:.5rem;height:.5rem;border-top:2px solid var(--blauw);border-right:2px solid var(--blauw);transform:rotate(45deg);transition:translate var(--duur-kleur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.v-routes>.kaart:has(.kaart-kop a):hover::after{translate:3px 0}}
@media (prefers-reduced-motion:reduce){.v-routes>.kaart:has(.kaart-kop a)::after{transition:none}}
/* citaten (branchepagina's) */
.v-citaten>.kaart{padding:var(--s5);border-top:0;border-radius:var(--r-mid);background:var(--wit)}
.vlak .v-citaten>.kaart{background:var(--wit)}
.v-citaten .kaart-citaat{font-size:var(--t-xl);font-weight:500;color:var(--ink)}
.v-citaten .kaart-logo{margin-bottom:var(--s4);min-width:7rem}
/* modules */
.v-modules .kaart-tekst{color:var(--sub)}
.v-modules .kaart-door{margin-top:var(--s3)}
/* tijdlijn */
.v-tijdlijn{counter-reset:none}
.v-tijdlijn>.kaart{border-top-color:var(--lijn)}
.v-tijdlijn>.kaart.huidig{border-top-color:var(--amber)}
.v-tijdlijn.jaren .kaart-kop{font-size:var(--t-2xl);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* begrippen */
.v-begrippen{--kol:1;gap:0}
.v-begrippen>.kaart{display:grid;gap:var(--s2) var(--goot);padding-block:var(--s5);border-top:1px solid var(--lijn);scroll-margin-top:calc(var(--kophoogte) + var(--s5))}
@media (min-width:64em){
  .v-begrippen>.kaart{grid-template-columns:repeat(12,minmax(0,1fr))}.v-begrippen .kaart-kop{grid-column:1/5}.v-begrippen .kaart-tekst,.v-begrippen .kaart-knoppen{grid-column:5/12;margin-top:0}
}
.v-begrippen>.kaart:target{border-top:2px solid var(--blauw)}
.v-begrippen .kaart-tekst{max-width:var(--leesbreedte)}
/* uitgelicht (blogoverzicht) */
.v-uitgelicht{--kol:1}
@media (min-width:64em){
  .v-uitgelicht>.kaart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--goot);align-items:center}.v-uitgelicht .kaart-beeld{grid-column:1/8;grid-row:1/span 6;margin:0}
  .v-uitgelicht .kaart>:not(.kaart-beeld){grid-column:8/13}
}
.v-uitgelicht .kaart-kop{font-size:var(--t-3xl);line-height:1.15;letter-spacing:-.022em}
.v-uitgelicht .kaart-beeld{aspect-ratio:16/10}
.specs li{min-width:0}
/* citaatkaarten: "Lees het verhaal van …" is een link en ziet er zo uit (zoals .kaart-door) */
.v-citaten a.kaart-tekst{margin-top:var(--s4);color:var(--ink);font-weight:600}
@media (hover:hover) and (pointer:fine){
  .v-citaten .kaart:hover a.kaart-tekst{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--blauw)}
}
.v-citaten .kaart:active a.kaart-tekst{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--blauw)}
/* kaarttitels zijn h2 als er geen sectiekop boven staat: zelfde maat als h3 */
.kaart .kaart-kop{letter-spacing:-.012em}
@media (min-width:64em){.linklijst.n8{--kol:4}}
/* kaarttitel zonder kop erboven (tijdlijn, contactroutes): een vette regel, geen kop */
p.kaart-kop{font-weight:700;color:var(--ink)}
/* klantverhaalkaart zonder foto: het logo in een vak met de maat van de foto, zodat de rij gelijk loopt */
/* klantverhaalkaarten op gelijke hoogte: de kaart zonder foto (logo in het fotovak) houdt de logoregel vrij;
   'Lees het verhaal' staat per rij onderaan */
.beeldkaarten>.kaart:not(:has(.kaart-beeld))>.kaart-logo:first-child{justify-content:center;height:auto;aspect-ratio:3/2;border-radius:var(--r-mid);background:var(--grijs);
  margin-bottom:calc(var(--s4) + 2.75rem + var(--s3))}
.beeldkaarten>.kaart:not(:has(.kaart-beeld))>.kaart-logo:first-child img{max-width:80%}
@media (min-width:40em) and (max-width:63.99em){.beeldkaarten.oneven>.kaart:last-child:not(:has(.kaart-beeld))>.kaart-logo:first-child{grid-row:1/span 9;margin-bottom:0}}
/* 'Meer oplossingen' (8 links) tussen 64 en 80em in twee kolommen: geen 'Werkne-mersportaal' in een smalle kolom */
@media (min-width:64em) and (max-width:79.99em){.linklijst.n8{--kol:2}}
/* tijdlijn (werkwijze): een volgorde, dus genummerd, met een blauwe lijn */
.v-tijdlijn:not(.jaren){counter-reset:stap}
.v-tijdlijn:not(.jaren)>.kaart{border-top-color:var(--blauw);counter-increment:stap}
.v-tijdlijn:not(.jaren)>.kaart::before{content:counter(stap);display:block;margin-bottom:var(--s3);font-size:var(--t-s);font-weight:600;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums}
/* prikklokken: de productkaart is rondom dicht, met dezelfde dunne rand; de specs krijgen lucht */
.kaartlijst.v-producten>.kaart{padding:var(--s5);border:1px solid var(--lijn)}
.v-producten .specs{padding-block:var(--s3);margin-bottom:var(--s2)}
.kaart-details summary::-webkit-details-marker{display:none}
.kaart-details summary::after{content:"";flex:none;width:.5rem;height:.5rem;margin-top:-.25rem;border-right:2px solid var(--blauw);border-bottom:2px solid var(--blauw);transform:rotate(45deg);transition:transform var(--duur-in) var(--ease-out)}
.kaart-details[open] summary::after{transform:translateY(.25rem) rotate(-135deg)}
.kaart-details:not([open]) summary::after{transition:none}
.kaart-details summary:focus-visible::after{transition:none}
@media (min-width:64em){.kaartlijst.n8{--kol:4}}
.beeldkaarten .kaart-door{margin-top:auto;padding-top:var(--s4)}

/* ---------- 14. Logo's, cijfers, tabs, galerij ---------- */
.logostrook{display:grid;gap:var(--s5)}
.logos-kop{color:var(--sub);font-size:var(--t-m)}
.logos{display:grid;grid-template-columns:repeat(var(--lk,6),minmax(0,1fr));align-items:center;gap:var(--s6) var(--goot)}
@media (max-width:63.99em){.logos{--lk:3}}
@media (max-width:39.99em){.logos{--lk:2}}
@media (min-width:64em){.hero-zone-links .logos,.form-aanloop .logos{--lk:5}}
.logos li{display:flex;align-items:center;min-height:3.25rem}
.logos img{max-width:100%;height:auto}
.s-logos{padding-block:var(--s7)}
.s-logos+.sectie{padding-top:var(--sectie)}
/* eigenaar 8 nov (variant 3): 'Meer dan 1000 organisaties …' als stelling links, de wisselende logo's rechts */
.s-logos .logos-kop{font-size:var(--t-m);line-height:1.45;font-weight:500;color:var(--sub);max-width:24rem}
@media (min-width:64em){
  .s-logos .logostrook[data-rouleer],.s-logos .logostrook{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);column-gap:var(--s8);align-items:center}
  .s-logos .logostrook[data-rouleer]>.logos-kop,.s-logos .logos-kop{grid-column:1;grid-row:1/span 2;margin:0}
  .s-logos .logostrook[data-rouleer]>:is(.rouleer-vakken,.logos,.logos-link){grid-column:2;grid-row:1/span 2}
}
.blok-stappen+.blok-logos{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--lijn)}
.cijfers{display:grid;grid-template-columns:repeat(var(--kol,3),minmax(0,1fr));column-gap:var(--goot);row-gap:var(--s6);padding:0;list-style:none}
.cijfers.n2{--kol:2}.cijfers.n4{--kol:4}
@media (max-width:47.99em){.cijfers,.cijfers.n4{--kol:2}.cijfers.n3>:last-child{grid-column:1/-1}}
@media (max-width:22em){.cijfers,.cijfers.n2,.cijfers.n4{--kol:1}}
/* cijfers: een lange waarde ('Duizenden') krimpt mee met de kolom in plaats van te breken */
.cijfers li{padding-top:var(--s4);border-top:1px solid var(--lijn);min-width:0;container-type:inline-size}
.cijfers .waarde{display:block;font-size:var(--t-4xl);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:proportional-nums}
.cijfers .label-cijfer{display:block;margin-top:var(--s3);max-width:22em;color:var(--sub);font-size:var(--t-m);line-height:1.5}
/* 'Kijk mee' (home, software), eigenaar 8 nov: geen tabbladen meer, maar één beeld van een echte laptop met het scherm
   Aanwezigheid en een telefoon met de app (bron/img/kijkmee-apparaten.png: echte productfoto's met de schermen
   perspectivisch ingezet, AvanTimes-logo op de laptop, eigen schaduw in het beeld). Kop links, beeld rechts. */
.sectie:has(> .wrap > .blok-apparaten){padding-block:var(--s8)}
/* eigenaar 8 nov (variant 5): het blok staat als witte kaart (wit naar lichtblauw) op de warme achtergrond, met links
   twee knoppen naar de browser- en de app-pagina en rechts het beeld */
.wrap:has(> .blok-apparaten){background:linear-gradient(135deg,#FFFFFF 0%,#F2F8FC 55%,#E3F0F8 100%);border:1px solid #DCE8F1;border-radius:1.5rem;padding:var(--s6) var(--s5);box-shadow:0 30px 60px -40px rgba(6,55,92,.35)}
.blok-apparaten{display:contents}
@media (max-width:63.99em){.wrap:has(> .blok-apparaten){width:auto;margin-inline:var(--s3);padding:var(--s5) var(--s4) var(--s4)}}
@media (min-width:64em){
  .wrap:has(> .blok-apparaten){display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:1fr auto auto 1fr;column-gap:var(--goot);padding:var(--s7)}
  .wrap:has(> .blok-apparaten)>.kopgroep{grid-column:1;grid-row:2;margin:0}
  .blok-apparaten .app-links{grid-column:1;grid-row:3}
  .blok-apparaten .apparaten{grid-column:2;grid-row:1/-1;align-self:center}
}
.app-links{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);max-width:20rem}
.app-links span{min-width:0;overflow-wrap:break-word}
.app-links a{display:flex;align-items:center;gap:var(--s3);min-height:3rem;padding:var(--s2) var(--s4);background:var(--wit);border:1px solid #D5E3EE;border-radius:999px;color:var(--ink);font-weight:500;text-decoration:none;transition:border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.app-links .app-ic{flex:none;width:1.25rem;height:1.25rem;color:var(--blauw)}
.app-links .app-pijl{flex:none;width:1rem;height:1rem;margin-left:auto;color:var(--blauw);transition:transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.app-links a:hover{border-color:var(--blauw);box-shadow:0 6px 16px -10px rgba(6,55,92,.4)}.app-links a:hover .app-pijl{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.app-links a,.app-links .app-pijl{transition:none}}
.apparaten{margin:0;width:min(100%,48rem)}
@media (max-width:63.99em){.apparaten{margin-top:var(--s6)}}
.apparaten img{display:block;width:100%;height:auto}
/* Tabbladen met schermen (variant 'tabs', nu niet in gebruik): kop links, rechts losse tekstkopjes boven het scherm. Het gekozen kopje is donker en vet met
   een kort blauw streepje; elk kopje houdt de breedte van zijn vette vorm, dus niets verspringt. Het scherm staat in een smalle
   witte rand op het lichtblauwe vlak, de uitleg staat direct onder het scherm. Het panelenvak houdt de hoogte van het grootste
   scherm (1270:944) plus twee regels uitleg vast, dus wisselen van tab verschuift niets op de pagina. */
.sectie:has(> .wrap > .blok-tabs){background:var(--vlak-lichtblauw);padding-block:var(--s8)}
@media (min-width:64em){
  .wrap:has(> .blok-tabs){display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--goot);align-items:start}
  .wrap:has(> .blok-tabs)>.kopgroep{margin:0}
}
.tabs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);container-type:inline-size}
.tablijst{display:flex;flex-wrap:wrap;column-gap:var(--s6);min-width:0}
@media (max-width:39.99em){.tablijst{column-gap:var(--s5)}}
.tablijst [role="tab"]{position:relative;min-height:2.75rem;padding:var(--s2) 0;border:0;border-radius:0;background:none;color:var(--sub);cursor:pointer;font-size:var(--t-m);font-weight:500;line-height:1.45;text-align:left;transition:color 160ms var(--ease-out)}
.tablijst [role="tab"] span{display:inline-grid}
.tablijst [role="tab"] span::after{content:attr(data-kop);height:0;overflow:hidden;visibility:hidden;font-weight:600}
@media (hover:hover) and (pointer:fine){.tablijst [role="tab"]:hover{color:var(--ink)}}
.tablijst [role="tab"][aria-selected="true"]{color:var(--ink);font-weight:600}
.tablijst [role="tab"][aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:.2rem;width:1.5rem;height:2px;border-radius:2px;background:var(--blauw)}
.tabpanelen{min-width:0;min-height:calc(min(100cqi,36rem) * 944 / 1270 + var(--s3) + 2lh);margin:0;font-size:var(--t-m)}
.tabpaneel[hidden]{display:none}
.tab-scherm{width:min(100%,36rem)}
.tab-scherm picture{display:block}
.tab-scherm img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(min(100cqi,36rem) * 944 / 1270);padding:var(--s2);background:var(--wit);border:1px solid #D5E3EE;border-radius:var(--r-mid);box-shadow:0 18px 40px -22px rgba(6,55,92,.45)}
.tab-uitleg{margin:var(--s3) 0 0;max-width:36rem;min-height:2lh;font-size:var(--t-m);color:var(--sub)}
.tab-uitleg strong{margin-right:.35em;color:var(--ink);font-weight:600}
.tab-noot{margin:calc(-1 * var(--s2)) 0 0;font-size:var(--t-s);color:var(--sub)}
.galerij{display:grid;grid-template-columns:repeat(var(--kol,3),minmax(0,1fr));gap:var(--goot)}
.galerij.n2{--kol:2}
@media (max-width:39.99em){.galerij{--kol:1}}
.galerij img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-mid)}
/* Zonder JS of bij minder beweging: alle logo's statisch in een rustig raster.
   Met JS: de echte lijst blijft voor schermlezers (visueel verborgen); 5 vakken (4 op tablet,
   3 op mobiel) tonen aria-hidden kopieën die één voor één wisselen met een crossfade (800 ms,
   cubic-bezier(.4,0,.2,1)): oud en nieuw liggen absoluut op elkaar in een vak met vaste hoogte,
   dus geen leeg moment en geen layout shift.
   Pauzeknop: visueel verborgen en neemt geen ruimte in; alleen bij toetsenbordfocus (:focus-visible)
   verschijnt hij rechtsboven over de strook. Muis pauzeert met hover, aanraking met een tik (site.js). */
.logostrook[data-rouleer]{grid-template-columns:minmax(0,1fr);position:relative}
.logostrook[data-rouleer]>*{grid-column:1/-1;min-width:0}
.logostrook[data-rouleer] .logos-link{justify-self:start}
@media (min-width:64em){.logostrook[data-rouleer] .logos.n8{--lk:4}}
.logo-pauze{display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;
  border:1px solid var(--lijn);border-radius:var(--radius-knop);background:var(--wit);color:var(--ink);cursor:pointer}
.logo-pauze svg{width:.875rem;height:.875rem}
.logo-pauze[aria-pressed="true"] .lp-pauze,.logo-pauze[aria-pressed="false"] .lp-speel{display:none}
.rouleer-vakken{display:none;grid-template-columns:repeat(var(--vk,4),minmax(0,1fr));column-gap:var(--goot)}
@media (max-width:39.99em){.rouleer-vakken{--vk:3}.rouleer-vak:nth-child(4){display:none}}
.rouleer-vak{position:relative;height:4.5rem;border-top:1px solid var(--lijn)}
.rouleer-vak img{position:absolute;inset:0;margin:auto;max-width:min(100%,9.75rem);height:auto;transform-origin:50% 50%}
.rouleert .rouleer-vakken{display:grid}
.rouleert .logo-pauze{display:inline-flex;position:absolute;top:0;right:0;z-index:1}
.rouleert .logo-pauze:not(:focus-visible){width:1px;height:1px;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rouleert>.logos{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* prijs */
.cijfers-prijs{--kol:1}
.cijfers-prijs li{border-top:0;padding-top:0}
.cijfers-prijs .voorvoegsel{font-size:var(--t-xl);color:var(--sub)}
.cijfers-prijs .waarde{display:inline;font-size:var(--t-5xl);font-variant-numeric:proportional-nums}
.cijfers-prijs+.knoppen{margin-top:var(--s5)}
/* galerij met een of twee beelden */
.galerij-een{--kol:1}.galerij-twee{--kol:2}
.galerij-een img{aspect-ratio:16/9}
/* de klantenstrook (13 logo's) verdeelt zich gelijk over twee of drie rijen */
@media (min-width:64em){.logos.n13{--lk:7}}
@media (min-width:40em) and (max-width:63.99em){.logos.n13{--lk:5}}
@media (min-width:64em){.logostrook:not([data-rouleer]) .logos.n8{--lk:4}}
/* prijzen: €1,75 als kaart naast de tekst */
.blok-cijfers:has(.cijfers-prijs){padding:var(--s6);border:1px solid var(--op-licht-lijn);border-radius:var(--r-mid);background:var(--lichtblauw)}
@media (min-width:64em){
  .s-breed:has(.cijfers-prijs)>.wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--goot);align-items:start}
  .s-breed:has(.cijfers-prijs)>.wrap>*{grid-column:1/8}
  .s-breed:has(.cijfers-prijs)>.wrap>.blok-cijfers{grid-column:8/13;grid-row:1/span 4;margin-top:0;align-self:center;padding:var(--s7)}
}
.cijfers .waarde[class*="lw-"]{font-size:min(var(--t-4xl),calc(100cqi / ((var(--lw) + 1) * .6)))}
/* prijzen: de knop in de €1,75-kaart op één regel */
@media (min-width:24em){.blok-cijfers:has(.cijfers-prijs) .knop{white-space:nowrap}} /* smaller (en met vergrote tekstafstand) mag hij afbreken */
@media (min-width:64em) and (max-width:79.99em){.s-breed:has(.cijfers-prijs)>.wrap>.blok-cijfers{padding:var(--s6) var(--s5)}}
/* logostrook: na een tik (pauze) blijft de knop zichtbaar, zodat je ziet dat hij stilstaat en hem weer kunt starten */
.rouleert .logo-pauze[aria-pressed="true"]:not(:focus-visible){width:2.75rem;height:2.75rem;margin:0;border:1px solid var(--lijn);overflow:visible;clip-path:none}

/* ---------- 15. Lijsten in smalle kolommen ---------- */
/* lijsten in een kolom van 8: 2 of 4 kolommen, zodat ze op het raster blijven */
@media (min-width:64em){
  .met-zij :is(.stappen,.kaartlijst,.beeldkaarten){--kol:2}.met-zij :is(.kaartlijst,.stappen).n4{--kol:4}.met-zij .stappen.n5>li{grid-column:auto}
  /* lijsten in de leeskolom van een artikel: twee kolommen */
  .artikel :is(.stappen,.kaartlijst){--kol:2}.artikel .stappen.n5>li{grid-column:auto}.met-zij .cijfers{--kol:2}
}
@media (max-width:39.99em){main :is(.kaartlijst,.beeldkaarten,.stappen,.galerij)[class][class]{--kol:1}}
/* rasters zonder gaten */
@media (min-width:64em){
  .stappen.n5{--kol:5}.stappen.n5>li{grid-column:auto}
  :is(.artikel,.met-zij) .stappen.n5{--kol:2}
  .met-zij .cijfers.n3{--kol:3}.met-zij .cijfers.n3>:last-child{grid-column:auto}
}
@media (min-width:40em) and (max-width:63.99em){:is(.stappen,.kaartlijst).n3>:last-child,.stappen:is(.n5,.n7)>:last-child{grid-column:1/-1}}

/* ---------- 16. Pagina-onderdelen ---------- */
.leeg{margin-top:var(--s6);color:var(--sub)}
/* filter */
.filter{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
/* filterknoppen en letters: rand 3:1 (WCAG 1.4.11) */
.filter button{max-width:100%;min-width:0;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:var(--s2);min-height:2.75rem;padding:var(--s2) var(--s4);border:1px solid var(--veldrand);
  border-radius:var(--radius-knop);background:var(--wit);color:var(--tekst);font-weight:500;cursor:pointer;
  transition:transform var(--duur-druk) var(--ease-out)}
.filter button small{color:var(--sub);font-size:var(--t-s);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.filter button:hover{border-color:var(--ink)}}
.filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--wit)}
.filter button[aria-pressed="true"] small{color:var(--op-donker-sub)}
/* hub (koppelingen): logo's als uren op een klok rond AvanTimes */
.hub{position:relative;width:min(100%,30rem);aspect-ratio:1;margin-inline:auto}
.hub-ring{position:absolute;inset:12%;border-radius:50%;border:1px solid var(--lijn);
  background:repeating-conic-gradient(var(--lijn) 0 .5deg,transparent .5deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 94%,#000 94.5%);mask:radial-gradient(closest-side,transparent 94%,#000 94.5%)}
.hub-tegel{position:absolute;display:flex;align-items:center;justify-content:center;width:22%;aspect-ratio:2/1;padding:3%;border:1px solid var(--lijn);border-radius:var(--r-klein);background:var(--wit);transform:translate(-50%,-50%)}
.hub-tegel img{max-width:100%;height:auto}
.hub-tegel:nth-child(2){left:50%;top:12%}
.hub-tegel:nth-child(3){left:76.9%;top:23.1%}
.hub-tegel:nth-child(4){left:88%;top:50%}
.hub-tegel:nth-child(5){left:76.9%;top:76.9%}
.hub-tegel:nth-child(6){left:50%;top:88%}
.hub-tegel:nth-child(7){left:23.1%;top:76.9%}
.hub-tegel:nth-child(8){left:12%;top:50%}
.hub-tegel:nth-child(9){left:23.1%;top:23.1%}
.hub-kern{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:32%;aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--wit);transform:translate(-50%,-50%);text-align:center}
.hub-kern b{font-size:var(--t-l)}
.hub-kern small{font-size:var(--t-s);color:var(--op-donker-sub)}
/* navigatie binnen de pagina */
.letternavigatie ul{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;padding:0}
.letternavigatie a{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;border:1px solid var(--veldrand);
  border-radius:var(--radius-knop);color:var(--ink);font-weight:600;text-decoration:none}
@media (hover:hover) and (pointer:fine){.letternavigatie a:hover{border-color:var(--ink);background:var(--grijs)}}
.letternavigatie a:active,.filter button:not([aria-pressed="true"]):active{background:var(--grijs)}
.nav-kop{font-weight:600;color:var(--tekst);margin-bottom:var(--s2)}
/* contactpersoon (support) */
.contactpersoon{display:flex;align-items:center;gap:var(--s5);padding:var(--s5);border:1px solid var(--lijn);border-radius:var(--r-mid);background:var(--wit)}
.cp-foto img{width:6rem;height:6rem;border-radius:50%;object-fit:cover}
.cp-naam b{display:block;font-size:var(--t-xl);color:var(--ink)}
.cp-naam span{display:block;color:var(--sub)}
.contactpersoon .tel{margin-top:var(--s2)}
.contactpersoon .label{margin-bottom:var(--s1)}
/* kader (TeamViewer) */
.kader{max-width:52rem;padding:var(--s6);border:1px solid var(--lijn);border-radius:var(--r-mid)}
.kader-kop{font-size:var(--t-2xl)}
.kader .proza{margin-top:var(--s3)}
.let-op{margin-top:var(--s5);font-size:var(--t-m);color:var(--tekst);font-weight:500}
.contactpersoon .cp-foto img{width:7rem;height:7rem}

/* ---------- 17. Afsluiter ---------- */
.cta{padding-block:var(--sectie)}
.cta-vlak>*{min-width:0}
.cta-vlak{display:grid;gap:var(--s7) var(--goot);align-items:center;padding:clamp(var(--s6),1rem + 5vw,var(--s9)) clamp(var(--s5),.5rem + 5vw,var(--s9));border-radius:var(--r-mid)}
/* afsluiter-H2 een stap onder de H1 (28–42px; mobiel 24px), zodat de H1 altijd de grootste kop van de pagina is */
.cta-vlak h2{max-width:18ch;font-size:var(--t-3xl);line-height:1.08;letter-spacing:-.03em}
@media (max-width:47.99em){.cta-vlak h2{font-size:min(var(--t-2xl),var(--kopmax,100vw))}}
.cta-vlak .kop-onder{margin-top:var(--s2);font-size:var(--t-2xl);line-height:1.3;color:var(--op-donker-sub)}
.cta-html{margin-top:var(--s4);max-width:34em;font-size:var(--t-l)}
.cta-html>*+*{margin-top:var(--s3)}
.cta-vlak .knoppen{margin-top:var(--s6)}
/* lichte afsluiter (werkwijze, waar al een blauw vlak boven staat): lichtblauw kaartvlak, tekstblauw en donkere tekst */
.cta-vlak.licht{border:1px solid var(--op-licht-lijn);background:var(--lichtblauw)}
.cta-vlak.licht .cta-html{color:var(--tekst)}
.cta-beeld img{width:100%;max-width:20rem;margin-inline:auto;border-radius:var(--r-mid)}
@media (max-width:63.99em){.cta-vlak:not(.met-beeld) .cta-beeld{display:none}}
/* afsluiter met telefoon (home), eigenaar 8 nov: een band over de hele breedte in donkerblauw met warm amber licht,
   rechts de iPhone met de app (uitgesneden, eigen schaduw) die boven de band uitsteekt. De tekst blijft in de
   gewone kolom. Onder de band een lichte strook, zodat hij niet in de even donkere voet opgaat. */
.cta:has(.cta-vlak.met-beeld){position:relative;isolation:isolate;margin-top:var(--s9);padding-block:0;
  background:radial-gradient(30rem 20rem at 78% 28%,rgba(255,158,27,.30),rgba(255,158,27,0) 70%),
             radial-gradient(48rem 30rem at 82% 75%,rgba(0,116,178,.75),rgba(0,116,178,0) 70%),#06375C}
.cta:has(.cta-vlak.met-beeld)+.voet{border-top:1px solid rgba(255,255,255,.14)}
.cta-vlak.met-beeld{background:none;border-radius:0;overflow:visible;padding-inline:0}
.cta-vlak.met-beeld .aurora-ring{display:none}
.cta-vlak.met-beeld .cta-beeld{display:block;position:relative}
.cta-vlak.met-beeld .cta-beeld img{display:block;max-width:none;border-radius:0;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
@media (min-width:64em){
  .cta-vlak.met-beeld{grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:28rem}
  .cta-vlak.met-beeld .cta-beeld{align-self:stretch;margin:calc(-1 * var(--s9) - 3.5rem) 0 calc(-1 * clamp(var(--s6),1rem + 5vw,var(--s9)))}
  .cta-vlak.met-beeld .cta-beeld picture{position:absolute;right:12%;bottom:0;height:100%}
  .cta-vlak.met-beeld .cta-beeld img{width:auto;height:100%}
}
@media (max-width:63.99em){
  .cta:has(.cta-vlak.met-beeld){margin-top:var(--s6)}
  .cta-vlak.met-beeld .cta-beeld{height:15rem;overflow:hidden;margin-bottom:calc(-1 * clamp(var(--s6),1rem + 5vw,var(--s9)))}
  .cta-vlak.met-beeld .cta-beeld img{width:min(62%,15rem);height:auto;margin-inline:auto}
}

/* ---------- 18. Artikel (blog en klantverhaal) ---------- */
.artikel-kop{padding-block:var(--s5) var(--s7)}
.artikel-kop .kruimel{margin-bottom:var(--s7)}
.artikel-kop h1{font-size:var(--t-4xl);max-width:22ch;letter-spacing:-.03em}
@media (min-width:64em){.artikel-kop-tekst{grid-column:1/10}}
.artikel-meta{max-width:38.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--lijn);font-size:var(--t-s);color:var(--sub)}
.meta-persoon b{display:block;color:var(--tekst);font-weight:600}
.artikel-beeld{margin-bottom:var(--s8)}
.artikel-beeld img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-mid)}
@media (max-width:47.99em){.artikel-beeld img{aspect-ratio:3/2}}
.artikel-voor{margin-bottom:var(--s8)}
.artikel-raster{row-gap:var(--s7);padding-bottom:var(--sectie)}
@media (min-width:64em){.artikel-raster>.artikel{grid-column:1/9}.artikel-raster>.artikel-zij{grid-column:9/13;grid-row:1}}
@media (min-width:80em){.artikel-raster>.artikel-zij{grid-column:10/13}}
.artikel{font-size:var(--t-l);line-height:1.7}
.artikel>*{max-width:var(--leesbreedte)}
.artikel>*+*{margin-top:var(--s5)}
.artikel h2{margin-top:var(--s8);font-size:min(var(--t-2xl),var(--kopmax,100vw));line-height:1.25;letter-spacing:-.02em}
.artikel h3{margin-top:var(--s6);font-size:var(--t-xl)}
.artikel h2+*,.artikel h3+*{margin-top:var(--s3)}
.artikel>:first-child{margin-top:0}
.artikel .proza>*+*{margin-top:var(--s5)}
.artikel .proza li+li{margin-top:var(--s2)}
.artikel .proza.intro{font-size:var(--t-xl);line-height:1.55;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.artikel .blok-galerij,.artikel .blok-citaat{max-width:none;margin-block:var(--s7)}
.artikel .citaat{max-width:40rem}
.artikel .citaat blockquote{position:relative;padding-top:var(--s5);font-size:var(--t-2xl);line-height:1.38}
.artikel .citaat blockquote::before{content:"";position:absolute;left:0;top:0;width:3rem;height:3px;background:var(--blauw)}
.artikel .citaat figcaption{margin-top:var(--s3)}
.artikel .citaat-uitgelicht blockquote{font-size:var(--t-2xl);line-height:1.3;letter-spacing:-.018em}
.artikel .citaat-uitgelicht{max-width:var(--leesbreedte)}
.tags ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:var(--s7) 0 0;padding:0;list-style:none;font-size:var(--t-s);color:var(--sub)}
.tags li{padding:2px 0;border-bottom:1px solid var(--lijn)}
.auteur{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--lijn);font-size:var(--t-m);line-height:1.6;display:flex;gap:var(--s4);
  align-items:flex-start}
.auteur-naam b{display:block;color:var(--tekst)}
.auteur-naam span{display:block;color:var(--sub)}
.auteur-bio{margin-top:var(--s3);color:var(--tekst)}
.artikel-zij{min-width:0}
.artikel-zij .zij-blok{font-size:var(--t-m)}
.zij-feiten dl{display:grid;gap:var(--s3);margin:0}
.zij-feiten dt{font-size:var(--t-s);color:var(--sub)}
.zij-feiten dd{margin:0 0 var(--s1);font-weight:500;color:var(--tekst)}
.zij-cta{background:var(--wit);border:1px solid var(--lijn)}
.inhoudsopgave{padding:var(--s5);border-left:3px solid var(--blauw);background:var(--grijs);font-size:var(--t-m)}
.inhoudsopgave li+li{margin-top:var(--s1)}
.inhoudsopgave a{color:var(--ink)}
.bron,.noot{font-size:var(--t-m);color:var(--sub)}
.artikel .proza.bron{font-size:var(--t-m)}
/* persoon en auteur */
.meta-persoon{display:flex;align-items:center;gap:var(--s3)}
.meta-persoon p b{display:block;color:var(--tekst);font-weight:600}
.meta-persoon p span{display:block}
.portret img{width:2.75rem;height:2.75rem;border-radius:50%;object-fit:cover}
.artikel>.blok-kaarten{max-width:none}
/* blog: inhoudsopgave bovenaan in de zijkolom; op mobiel direct na de intro, de rest van de zijkolom na het artikel */
.inhoudsopgave ol{list-style:none;padding-left:0}
.zij-plak>.inhoudsopgave+*{margin-top:var(--s4)}
@media (max-width:63.99em){
  .type-blog .artikel-zij,.type-blog .artikel-zij .zij-plak{display:contents}
  .type-blog .artikel-zij .zij-plak>*{grid-column:1/-1;min-width:0}
}
/* lange intro (60+ woorden): gewone tekst, alleen korte intro's groot */
.artikel .proza.intro.lang{font-size:inherit;line-height:inherit;font-weight:400;letter-spacing:0;color:var(--tekst)}
/* klantverhaal-artikel met foto-hero: meta en knoppen op het raster, zoals de pagina's */
.artikel-foto .artikel-meta{margin-top:var(--s5)}
/* klantverhaal met foto-hero: de cijferrij en het artikel krijgen lucht onder de foto (was 0px) */
.artikel-foto+.artikel-voor{padding-top:var(--s6)}
@media (min-width:48em){.artikel-foto+.artikel-voor{padding-top:var(--s7)}}
@media (max-width:47.99em){.artikel-meta .meta-persoon{flex-basis:100%}}
/* klantverhaal-artikel: een kleine bronfoto op zijn eigen breedte (niet opgeschaald), op de leeskolom */
.artikel-beeld.klein img{width:auto;max-width:100%;aspect-ratio:auto}
/* klantverhaal mobiel: de feiten blijven boven het verhaal, 'Ook zo'n verhaal schrijven?' komt erna (zoals bij de blog) */
@media (max-width:63.99em){
  .type-klantverhaal .artikel-zij,.type-klantverhaal .artikel-zij .zij-plak{display:contents}
  .type-klantverhaal .artikel-zij .zij-plak>*{grid-column:1/-1;min-width:0}
  .type-klantverhaal .artikel-zij .zij-cta{order:1}
}

/* ---------- 19. Formulieren ---------- */
.formulier{max-width:46rem}
.formulier .velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--goot);align-items:end}
@media (max-width:39.99em){.formulier .velden{grid-template-columns:1fr}}
.veld{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.veld.breed{grid-column:1/-1}
.veld label,.veld legend{font-weight:600;color:var(--tekst);font-size:var(--t-m)}
.veld small{font-weight:400;color:var(--sub);font-size:var(--t-s)}
.veld input,.veld select,.veld textarea{width:100%;min-height:3rem;padding:var(--s3) var(--s4);border:1px solid var(--veldrand);border-radius:var(--radius-knop);background:var(--wit);color:var(--tekst);font-size:var(--t-m)}
.veld textarea{min-height:8rem;resize:vertical}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{outline:var(--focus);outline-offset:1px;border-color:var(--ink)}
/* fout: dikkere rand via inset-schaduw, zodat er niets verschuift */
.veld :is(input,select,textarea):user-invalid,.veld [aria-invalid="true"]{border-color:var(--fout);box-shadow:inset 0 0 0 1px var(--fout)}
.formulier[aria-busy="true"]{cursor:progress}
.veld-fout{color:var(--fout);font-size:var(--t-s);font-weight:500}
fieldset.veld{margin:0;padding:0;border:0;min-width:0;scroll-margin-top:calc(var(--kophoogte) + var(--s6))}
fieldset.veld legend{padding:0;margin-bottom:var(--s2)}
.keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--goot)}
.keuzes label{display:inline-flex;align-items:center;gap:var(--s2);min-height:2.75rem;min-width:0;overflow-wrap:anywhere;font-weight:400;cursor:pointer}
.keuzes input{width:1.25rem;height:1.25rem;min-height:0;margin:0;accent-color:var(--ink)}
.formulier .uitleg{color:var(--sub);margin-top:var(--s2);margin-bottom:var(--s6)}
.form-noot{margin-top:var(--s5);font-size:var(--t-s);color:var(--sub)}
.form-noot a{color:var(--ink)}
.verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5);margin-top:var(--s5)}
.verstuur small{font-size:var(--t-s);color:var(--sub)}
.verstuur small a{color:var(--ink);font-weight:600}
.form-fout{margin-top:var(--s5);padding:var(--s4) var(--s5);border-left:4px solid var(--fout);background:var(--wit);color:var(--fout)}
.bevestiging{padding:var(--s6);border-left:4px solid var(--blauw);background:var(--grijs);
  transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
@starting-style{.bevestiging:not([hidden]){opacity:0;transform:translateY(.375rem)}}
.bevestiging[data-direct]{transition:none}
.bevestiging b{display:block;font-size:var(--t-xl);color:var(--ink)}
.bevestiging p{margin-top:var(--s2)}
.honing{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.robot{margin-top:var(--s6)}
altcha-widget{--altcha-color-base:var(--wit);--altcha-color-border:var(--veldrand);--altcha-color-border-focus:var(--ink);--altcha-color-text:var(--tekst);--altcha-color-error-text:var(--fout);--altcha-max-width:100%;--altcha-border-radius:var(--radius-knop);display:block;min-height:4.25rem}
.form-kop{font-size:var(--t-2xl)}
/* formuliersectie */
.s-formulier .form-vak{min-width:0}
.s-formulier .formulier-wrap{padding:clamp(var(--s5),2vw + .5rem,var(--s7));border:1px solid var(--lijn);border-radius:var(--r-mid);background:var(--wit);box-shadow:var(--schaduw)}
.form-aanloop .blok{margin-top:var(--s6)}
.form-aanloop .citaat{padding-left:var(--s4);border-left:3px solid var(--blauw)}
.form-aanloop .citaat blockquote{font-size:var(--t-xl)}
@media (min-width:64em){
  .s-formulier.met-aanloop .form-aanloop{grid-column:1/6;align-self:start}
  .s-formulier.met-aanloop .form-aanloop.past{position:sticky;top:calc(var(--kophoogte) + var(--s5))}
  .s-formulier.met-aanloop .form-vak{grid-column:7/13}
  .s-formulier:not(.met-aanloop) .form-vak{grid-column:1/9}
}
.veld :is(input,select,textarea){scroll-margin-top:calc(var(--kophoogte) + var(--s6))}
.veld .veld-fout{order:9;margin:0}
.veld-fout::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:var(--s2);border-radius:50%;background:currentColor;vertical-align:.1em}
.form-samenvatting{margin-bottom:var(--s5);padding:var(--s4) var(--s5);border-left:4px solid var(--fout);background:var(--wit);color:var(--tekst);scroll-margin-top:calc(var(--kophoogte) + var(--s6))}
.form-samenvatting:focus{outline:none}
.form-samenvatting:focus-visible{outline:var(--focus)}
.form-samenvatting b{display:block;color:var(--fout)}
.form-samenvatting ul{margin:var(--s2) 0 0;padding-left:1.25em}
.form-samenvatting a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blauw);text-underline-offset:.2em}
/* verzendknop: label blijft staan (geen andere breedte), tijdens versturen een draaiend teken */
.verstuur .knop{position:relative}
.formulier[aria-busy="true"] .verstuur .knop{color:transparent}
.formulier[aria-busy="true"] .verstuur .knop::after{content:"";position:absolute;inset:0;width:1.125rem;height:1.125rem;margin:auto;border:2px solid var(--donker);border-right-color:transparent;border-radius:50%;animation:draai .7s linear infinite}
@keyframes draai{to{transform:rotate(1turn)}}
.s-formulier .raster{row-gap:var(--s7)}
@media (max-width:39.99em){.keuzes{grid-template-columns:minmax(0,1fr)}}

/* ---------- 20. Footer ---------- */
/* footer-afsluiter (404, contact, support, juridisch) */
/* donkerblauw (#06375C): tekst 80% wit (±8,6:1), links 86% wit, koppen wit */
.voet{margin-top:0;padding-block:0 calc(var(--s6) + env(safe-area-inset-bottom,0px));background:var(--donker);color:rgba(255,255,255,.8);font-size:var(--t-s)}
.voet a{color:var(--op-donker-sub);text-decoration:none}
@media (hover:hover) and (pointer:fine){.voet a:hover{color:var(--wit);text-decoration:underline;text-decoration-color:var(--wit);text-underline-offset:.2em}}
.voet :focus-visible{outline-color:var(--wit)}
.voet-raster{row-gap:var(--s7)}
.voet-merk{grid-column:1/-1}
@media (min-width:64em){.voet-merk{grid-column:1/5}.voet-kolommen{grid-column:5/13}}
.voet-logo{display:block;width:9.25rem}
.voet-merk p{margin-top:var(--s4);max-width:30em;line-height:1.6}
.voet-contact{margin:var(--s4) 0 0;padding:0;list-style:none;display:grid;gap:var(--s1)}
.voet-contact a{color:var(--wit);text-decoration:underline;text-decoration-color:rgba(255,255,255,.6);text-underline-offset:.2em}
.voet-kolommen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--goot)}
@media (max-width:47.99em){.voet-kolommen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:22em){.voet-kolommen{grid-template-columns:1fr}}
.voet h2{margin-bottom:var(--s3);color:var(--wit);font-size:var(--t-s);font-weight:600;letter-spacing:0}
.voet ul{margin:0;padding:0;list-style:none}
.voet li a{display:inline-block;padding-block:.3rem}
/* footer: ©-regel op de basislijn van de links ernaast */
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s6);margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--op-donker-lijn);align-items:baseline}
.voet-onder ul{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5)}
.voet .linkedin{display:inline-flex;align-items:center;gap:var(--s2);min-height:2.75rem;margin-top:var(--s4);color:var(--wit)}
.voet .linkedin svg{width:1.125rem;height:1.125rem}
.voet-cta-wrap{padding-block:var(--s8) var(--s8)}
/* footer-afsluiter staat op wit boven het donkere deel: dan krijgt alleen het deel eronder het donkere vlak
   (volle breedte via een schaduw, afgeknipt aan de zijkanten) */
.voet:has(>.voet-cta-wrap){padding-bottom:0;background:var(--wit)}
.voet-cta-wrap+.wrap{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom,0px));background:var(--donker);box-shadow:0 0 0 100vmax var(--donker);clip-path:inset(0 -100vmax)}
.voet>.wrap:last-child{padding-top:var(--s8)}
.voet .voet-cta h2{margin:0;max-width:18ch;font-size:var(--t-4xl);line-height:1.06;letter-spacing:-.03em;font-weight:700;color:var(--wit)}
.voet .knop{color:var(--donker)}
.voet-cta a.tel{color:var(--wit);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.7);text-underline-offset:.2em}

/* ---------- 21. Minder beweging ---------- */
/* Opacity blijft (helpt begrijpen), verplaatsen en schalen vervallen. */
@media (prefers-reduced-motion:reduce){
  .uitklap[hidden],.mobiel[hidden]{transform:none}
  @starting-style{.uitklap:not([hidden]),.mobiel:not([hidden]),.bevestiging:not([hidden]){transform:none}}
  :is(.knop,.menu-knop,.filter button):active:not(:focus-visible,:disabled){transform:none}
  .nav-knop svg,.mobiel summary svg,.faq-lijst summary::after{transition:none}
  .formulier[aria-busy="true"] .verstuur .knop::after{animation-duration:2.4s}
  .kaart-details summary::after{transition:none}
}

/* ---------- 22. Print ---------- */
@media print{.kop,.voet,.cta,.mobiel{display:none}body{font-size:11pt}a{color:inherit}}

/* met 200% tekst op een telefoon: lange namen bij een citaat mogen afbreken */
.citaat-bron{overflow-wrap:anywhere}

/* ---------- Klantverhalen-slider (home, eigenaar 8 nov) ----------
   Alle klantverhalen naast elkaar; met de pijlen schuif je een pagina verder. Foto met een wit label (logo + link).
   Scroll-snap, ook te vegen en met het toetsenbord te scrollen; de pijlen staan uit aan het begin/einde. */
.kv-slider{position:relative;container-type:inline-size}
/* het spoor loopt door tot de rechterrand van het scherm, zodat je de volgende klant al half ziet */
.kv-slider .kv-spoor{margin-right:calc((100vw - 100cqi) / -2);padding-right:calc((100vw - 100cqi) / 2);scroll-padding-right:calc((100vw - 100cqi) / 2)}
.kv-spoor{display:grid;grid-auto-flow:column;grid-auto-columns:82cqi;gap:var(--s4);margin:0;padding:var(--s2) 0 var(--s3);list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:0}
.kv-spoor::-webkit-scrollbar{display:none}
.kv-spoor:focus-visible{outline:var(--focus);outline-offset:4px;border-radius:var(--r-mid)}
@media (min-width:40em){.kv-spoor{grid-auto-columns:calc((100cqi - var(--s5)) / 2.25);gap:var(--s5)}}
@media (min-width:64em){.kv-spoor{grid-auto-columns:calc((100cqi - 2 * var(--s5)) / 3.25)}}
.kv-dia{position:relative;scroll-snap-align:start;border-radius:var(--r-mid);overflow:hidden;margin:0;padding:0}
.kv-dia .kaart-beeld{aspect-ratio:4/3;margin:0;border-radius:0}
.kv-label{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--wit);border-radius:var(--r-klein);box-shadow:0 6px 20px rgba(6,55,92,.15)}
.kv-logo img{display:block;max-height:1.75rem;width:auto;max-width:9rem}
@media (max-width:39.99em){.kv-label{padding:var(--s2) var(--s3)}.kv-logo img{max-width:6.5rem;max-height:1.5rem}}
.kv-label .kaart-strek{font-weight:600;font-size:var(--t-s);color:var(--ink);text-decoration:underline;text-decoration-color:var(--blauw);text-underline-offset:.22em;white-space:nowrap}
.kv-bediening{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s4)}
.kv-pijlen{display:flex;gap:var(--s2);margin-left:auto}
.kv-pijl{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:1px solid var(--veldrand);border-radius:50%;background:var(--wit);color:var(--ink);cursor:pointer;
  transition:background-color var(--duur-kleur),border-color var(--duur-kleur),opacity var(--duur-kleur)}
.kv-pijl .ic{width:1.25rem;height:1.25rem;color:currentColor}
.kv-pijl .ic.links{transform:scaleX(-1)}
.kv-pijl[aria-disabled="true"]{opacity:.35;cursor:default}
.kv-pijl:active:not([aria-disabled="true"]){transform:var(--druk)}
@media (hover:hover) and (pointer:fine){.kv-pijl:not([aria-disabled="true"]):hover{background:var(--ink);border-color:var(--ink);color:var(--wit)}}
.kv-slider:not(.actief) .kv-pijlen{display:none}

/* glijdende logostrook: één spoor met alle logo's (twee keer), 4 zichtbaar (telefoon 3), zachte randen */
.rouleert .rouleer-vakken.glij{display:block;overflow:hidden;container-type:inline-size;border-top:1px solid var(--lijn);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.glij-spoor{display:flex;width:max-content;animation:glijden var(--glijduur,48s) linear infinite}
.glij .rouleer-vak{flex:0 0 25cqi;border-top:0}
@media (max-width:39.99em){.glij .rouleer-vak{flex-basis:33.333cqi}.glij .rouleer-vak:nth-child(4){display:block}}
.stil .glij-spoor{animation-play-state:paused}
@keyframes glijden{to{transform:translateX(-50%)}}
.blauw .rouleer-vakken.glij{border-top-color:rgba(255,255,255,.35)}
@media (prefers-reduced-motion:reduce){.glij-spoor{animation:none}}

/* home 'Zo werkt het' (eigenaar 8 nov, variant B1): kop links, stappen en koppelingen rechts; geen icoontjes,
   een lijn boven elke stap (de eerste amber), compacter */
#oplossingen.blauw.met-stappen{padding-block:clamp(var(--s7),1.5rem + 2.5vw,3.5rem)}
#oplossingen .stap-ic{display:none}
#oplossingen .stappen.met-ic li::after{content:none}
#oplossingen .stappen li{padding-top:.85rem;border-top:2px solid rgba(255,255,255,.35)}
#oplossingen .stappen li:first-child{border-top-color:var(--amber)}
#oplossingen .stappen h3{font-size:var(--t-l)}
#oplossingen .stap-tekst{font-size:var(--t-s)}
@media (max-width:63.99em){#oplossingen .stappen{gap:var(--s5)}}
@media (min-width:64em){
  #oplossingen>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--s8);align-items:start}
  #oplossingen .kopgroep{grid-column:1;grid-row:1/3;margin:0}
  #oplossingen .kopgroep h2{font-size:var(--t-3xl)}
  #oplossingen .blok-stappen{grid-column:2;margin-top:0}
  #oplossingen .blok-logos{grid-column:2;margin-top:var(--s6)}
}
.sectie:has(.kv-slider){overflow-x:clip} /* bij klassieke schuifbalken is 100vw iets breder dan de pagina */

/* ---------- home 'Gemaakt voor de werkvloer' (eigenaar 8 nov, variant 4): uitgelichte tegels ----------
   Productie groot, de andere vier als tegels ernaast; titel en tekst wit onderin op een donkerblauwe overloop. */
#branches .beeldkaarten.v-branches{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:15rem;gap:var(--s4)}
#branches .v-branches>.kaart{position:relative;display:flex;flex-direction:column;justify-content:flex-end;grid-column:auto;grid-row:auto;
  padding:0 var(--s4) var(--s4);border-radius:var(--r-mid);overflow:hidden;isolation:isolate}
#branches .v-branches .kaart-beeld{position:absolute;inset:0;z-index:-2;margin:0;border-radius:0;aspect-ratio:auto}
#branches .v-branches>.kaart::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,55,92,0) 12%,rgba(6,55,92,.7) 45%,rgba(6,55,92,.95) 72%)}
#branches .v-branches .kaart-kop{margin:0;font-size:var(--t-l);color:var(--wit)}
#branches .v-branches .kaart-kop a{color:var(--wit);text-decoration-color:var(--amber)}
#branches .v-branches .kaart-tekst{margin-top:var(--s1);font-size:var(--t-s);line-height:1.45}
#branches .v-branches .kaart-tekst,#branches .v-branches .kaart-tekst *{color:rgba(255,255,255,.92)}
#branches .v-branches .kaart:has(a:focus-visible){outline-color:var(--blauw)}
@media (min-width:40em){
  #branches .beeldkaarten.v-branches{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:13rem}
  #branches .v-branches>.kaart:first-child{grid-column:span 2}
}
@media (min-width:64em){
  #branches .beeldkaarten.v-branches{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:13.5rem;gap:var(--s5)}
  #branches .v-branches>.kaart:first-child{grid-column:span 2;grid-row:span 2;padding:0 var(--s6) var(--s6)}
  #branches .v-branches>.kaart:first-child .kaart-kop{font-size:var(--t-2xl)}
  #branches .v-branches>.kaart:first-child .kaart-tekst{font-size:var(--t-m)}
  #branches .v-branches>.kaart:first-child::before{background:linear-gradient(180deg,rgba(6,55,92,0) 42%,rgba(6,55,92,.7) 68%,rgba(6,55,92,.95) 88%)}
}

/* ---------- Support: eigen, lichtblauwe pagina (eigenaar 8 nov) ----------
   Het formulier staat meteen rechts in beeld. De pagina krijgt een licht merkblauw vlak met een zachte amber gloed
   rechtsboven; de kopbalk heeft hier geen kaart, rand of schaduw, zodat logo en menu in de pagina opgaan. Inhoud en
   volgorde van de teksten blijven gelijk. */
body.pagina-support{--achtergrond:#EEF5FA;--grijs:#E2EDF6;
  background:radial-gradient(40rem 26rem at 92% -4rem,rgba(255,158,27,.16),rgba(255,158,27,0) 70%),
             radial-gradient(60rem 40rem at 10% -10rem,rgba(0,116,178,.10),rgba(0,116,178,0) 70%),#EEF5FA no-repeat}
body.pagina-support .kop{background:rgba(238,245,250,.88);border-color:transparent;box-shadow:none}
@supports (backdrop-filter:blur(8px)){body.pagina-support .kop{background:rgba(238,245,250,.88)}}
/* bovenaan: geen eigen vlak, logo en menu staan direct op de pagina; zodra je scrolt komt het lichte vlak terug */
body:is(.pagina-support,.pagina-demo) .kop.kop-boven:not(:has([aria-expanded="true"])){background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
body.pagina-support.menu-open .kop{background:var(--achtergrond)}
body.pagina-support .kop{transition:transform 360ms var(--ease-out),opacity 240ms var(--ease-out),background-color 240ms var(--ease-out)}
/* eigenaar 8 nov (voorbeeld 4): het formulier gaat op in de pagina, zonder kaart; een dunne lijn scheidt het van de tekst */
body.pagina-support .hero-pagina .formulier-wrap{padding:0;border:0;background:none;box-shadow:none}
@media (min-width:64em){body.pagina-support .hero-pagina .hero-rechts{border-left:1px solid #C9DCEB;padding-left:var(--s7)}}
body.pagina-support .veld ::placeholder{color:#8DA2B4;opacity:1}
body.pagina-support .contactpersoon{background:var(--wit);border-color:#D5E3EE}
body.pagina-support .v-routes .kaart,body.pagina-support .kader{background:var(--wit);border-color:#D5E3EE}
body.pagina-support .cta:has(.kader)+.sectie.s-faq{background:none}
body.pagina-support .hero-pagina{border-bottom:0}
body.pagina-support .sectie.s-breed:has(.v-routes){background:none}
body.pagina-support .voet:has(>.voet-cta-wrap){background:none}
/* support (eigenaar 8 nov): links onder de tekst twee nette witte kaarten (Karel, TeamViewer), rechts het formulier.
   Zo lopen beide kolommen even lang door en staat de pagina strak. */
body.pagina-support .hero-pagina{padding-bottom:var(--s8)}
body.pagina-support .hero-zone-links-groep{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:var(--s6)}
body.pagina-support .hero-zone-links,body.pagina-support .contactpersoon>*{min-width:0}
body.pagina-support .contactpersoon{flex-wrap:wrap}
body.pagina-support .hero-zone-links{margin:0}
body.pagina-support :is(.contactpersoon,.kader){max-width:none;margin:0;background:var(--wit);border:1px solid #D5E3EE;border-radius:var(--r-mid);box-shadow:0 18px 36px -30px rgba(6,55,92,.45)}
body.pagina-support .kader{position:relative;padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 3.5rem)}
body.pagina-support .kader::before{content:"";position:absolute;left:var(--s5);top:var(--s5);width:2.5rem;height:2.5rem;background:url("../img/teamviewer.svg") center/contain no-repeat}
body.pagina-support .kader-kop{font-size:var(--t-l);line-height:1.3}
body.pagina-support .kader .proza{font-size:var(--t-s)}
body.pagina-support .kader .knoppen{margin-top:var(--s4);gap:var(--s2) var(--s4)}
body.pagina-support .kader .knop{min-height:2.75rem;padding:var(--s2) var(--s4);font-size:var(--t-s)}
body.pagina-support .kader .losse-link{font-size:var(--t-s)}
body.pagina-support .kader .let-op{margin-top:var(--s4);font-size:var(--t-s);color:var(--sub)}
body.pagina-support .sectie.s-faq{padding-top:0;padding-bottom:var(--s8)}
@media (max-width:39.99em){body.pagina-support .kader{padding:calc(var(--s5) + 3.25rem) var(--s5) var(--s5)}}

/* footer: AI-samenvatting (eigenaar 8 nov, naar het voorbeeld van Dyflexis). Elke knop opent de AI-dienst met een
   ingevulde vraag over AvanTimes. ChatGPT heeft een neutraal chaticoon: het OpenAI-logo is niet vrij beschikbaar. */
.voet-ai{margin-top:var(--s5)}
.voet-ai-kop{margin:0 0 var(--s3);font-size:var(--t-s);color:rgba(255,255,255,.8)}
.voet-ai ul{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0;padding:0;list-style:none}
/* echte merklogo's (lobehub icons, MIT) op witte tegels van gelijke maat, logo's optisch even groot */
.voet .voet-ai a{display:grid;place-items:center;padding:0;margin:0;width:3rem;height:3rem;border-radius:.85rem;background:var(--wit);box-shadow:0 6px 16px -10px rgba(0,0,0,.6);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.voet-ai img{display:block;width:1.6rem;height:1.6rem}
@media (hover:hover) and (pointer:fine){.voet-ai a:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,0,0,.7)}}
.voet-ai a:focus-visible{outline:2px solid var(--wit);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.voet-ai a{transition:none}}

/* ---------- Foto-hero als de homepage (eigenaar 8 nov, keuze B) ----------
   Op elke pagina met een foto-hero (oplossingen, branches, software, klantverhalen, over ons …) staat de foto bovenaan
   over de hele breedte en valt een afgerond paneel (lichtblauw naar wit) er half overheen, net als de opening op home.
   Het vlak van het paneel zijn twee lagen van volle breedte achter de tekst (rand en verloop) met clip-path op de maat
   van de container; bij scrollen groeien ze soepel naar de volle breedte, precies als op home. De tekst blijft staan.
   Support en Demo hebben een eigen opbouw en vallen hier buiten. */
.foto-pagina .hero-foto{--foto-h:clamp(12.5rem,36svh,17rem);--over:3rem;--l:var(--s3)}
@media (min-width:40em){.foto-pagina .hero-foto{--foto-h:clamp(15rem,50svh,26rem)}}
@media (min-width:64em){.foto-pagina .hero-foto{--foto-h:clamp(20rem,48vh,30rem);--over:5rem;--l:max(var(--rand),(100% - var(--breedte)) / 2)}}
.foto-pagina .hero-beeld{height:var(--foto-h)}
.foto-pagina .hero-foto::before,.foto-pagina .hero-foto::after{content:"";position:absolute;z-index:0;inset:calc(var(--foto-h) - var(--over)) 0 0;pointer-events:none}
.foto-pagina .hero-foto::before{background:#DCE8F1;clip-path:inset(0 var(--l) 0 round var(--r-groot))}
.foto-pagina .hero-foto::after{background:linear-gradient(180deg,#DCEBF6 0%,#EEF5FB 60%,#FFFFFF 100%);clip-path:inset(1px calc(var(--l) + 1px) 1px round calc(var(--r-groot) - 1px))}
.foto-pagina .hero-beeld{position:relative;z-index:-1}
.foto-pagina .hero-foto>.wrap{position:relative;z-index:1}
@media (min-width:64em){
  .foto-pagina .hero-foto{height:auto;min-height:0;justify-content:flex-start}
  .foto-pagina .hero-beeld{position:relative;inset:auto}
  .foto-pagina .hero-beeld img{width:100%;margin-left:0;-webkit-mask-image:none;mask-image:none;object-position:var(--fx,50%) var(--fyb,30%)}
  .foto-pagina .hero-foto>.wrap{margin-top:calc(-1 * var(--over));width:calc(100% - 2 * var(--rand));max-width:var(--breedte);padding:var(--s6) var(--s8) var(--s7)}
  .foto-pagina .hero-tekst{grid-column:1/-1}
  .foto-pagina .hero-tekst>*,.foto-pagina .hero-intro{max-width:46rem}
  .foto-pagina h1[class*="lw-"]{max-width:none}
}
@media (max-width:63.99em){
  .foto-pagina .hero-foto>.wrap{width:auto;margin:calc(-1 * var(--over)) var(--s3) 0;padding:var(--s5) var(--s4) var(--s6);grid-template-columns:minmax(0,1fr)}
  .foto-pagina .hero-tekst{min-width:0}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .foto-pagina .hero-foto::before,.foto-pagina .hero-foto::after{animation:opening-groei linear both;animation-timeline:scroll(root block);animation-range:0 55vh}
    @media (min-width:48em){.foto-pagina .hero-beeld img{transform-origin:50% 100%;animation:opening-foto linear both;animation-timeline:scroll(root block);animation-range:0 55vh}}
  }
  @supports not (animation-timeline:scroll()){
    .foto-pagina .hero-foto::before{clip-path:inset(0 calc(var(--l) * (1 - var(--p,0))) 0 round calc(var(--r-groot) * (1 - var(--p,0))))}
    .foto-pagina .hero-foto::after{clip-path:inset(calc(1px - 1px * var(--p,0)) calc((var(--l) + 1px) * (1 - var(--p,0))) calc(1px - 1px * var(--p,0)) round calc((var(--r-groot) - 1px) * (1 - var(--p,0))))}
    @media (min-width:48em){.foto-pagina .hero-beeld img{transform-origin:50% 100%;transform:translateY(calc(1.25rem * var(--p,0))) scale(calc(1 + .04 * var(--p,0)))}}
  }
}

/* ---------- Plan een demo: zusje van support (eigenaar 8 nov) ----------
   Zelfde opbouw (kop gaat bovenaan op in de pagina, formulier zonder kaart met een dunne lijn ernaast, lichte
   voorbeeldtekst in de velden), maar warm: een zachte amber ondergrond met een blauwe gloed, zodat het voelt als de
   uitnodiging en support als de hulplijn. */
body.pagina-demo{--achtergrond:#FFF7EC;
  background:radial-gradient(44rem 28rem at 95% -6rem,rgba(255,158,27,.22),rgba(255,158,27,0) 70%),
             radial-gradient(52rem 34rem at 0% 30rem,rgba(0,116,178,.08),rgba(0,116,178,0) 70%),
             linear-gradient(180deg,#FFF7EC 0%,#FFFBF5 55%,#FFFFFF 100%) no-repeat}
body.pagina-demo .kop{background:rgba(255,247,236,.9);border-color:transparent;box-shadow:0 8px 28px -20px rgba(11,26,46,.25)}
body.pagina-demo .kop{transition:transform 360ms var(--ease-out),opacity 240ms var(--ease-out),background-color 240ms var(--ease-out)}
body.pagina-demo.menu-open .kop{background:var(--achtergrond)}
body.pagina-demo .hero-pagina{border-bottom:0;padding-bottom:var(--s9)}
body.pagina-demo .hero-pagina .formulier-wrap{padding:0;border:0;background:none;box-shadow:none}
@media (min-width:64em){body.pagina-demo .hero-pagina .hero-rechts{border-left:1px solid #EAD9C2;padding-left:var(--s7)}}
body.pagina-demo .veld ::placeholder{color:#8DA2B4;opacity:1}
body.pagina-demo .hero-zone-links .kaartlijst>.kaart{border-left-color:#FF9E1B}
body.pagina-demo .hero-zone-links .citaat{border-left-color:#0074B2}
/* demo: 'Zij gingen je voor.' boven de glijdende klantlogo's iets steviger */
body.pagina-demo .hero-zone-links .logos-kop{font-size:var(--t-m);font-weight:600;color:var(--ink)}
/* klantcitaat met foto (9 pagina's), eigenaar 8 nov keuze 2: op wit, de kaart van wit naar lichtblauw zoals 'Kijk mee' */
.sectie.s-getuige.met-foto{background:var(--wit)}
.s-getuige.met-foto .getuige-tekst{background:linear-gradient(135deg,#FFFFFF 0%,#F2F8FC 55%,#E3F0F8 100%);border:1px solid #DCE8F1;box-shadow:0 30px 60px -40px rgba(6,55,92,.35)}

/* ---------- Oplossingspagina, indeling AV5 (eigenaar 9 nov; eerst op Aanwezigheid) ----------
   Links de onderwerpen met een icoontje ervoor (kop en tekst lijnen uit op één verticale lijn naast het icoon),
   rechts één vaste kaart: bovenin de monitor met het scherm op lichtblauw, daaronder 'Wat je krijgt'. De kaart
   begint op dezelfde hoogte als de eerste kop en blijft staan tijdens het scrollen. */
.kop-met-ic{display:grid;grid-template-columns:2.75rem minmax(0,1fr);column-gap:var(--s4);align-items:start}
.kop-met-ic h2{margin:0;padding-top:.3rem;font-size:var(--t-xl);line-height:1.3;max-width:none}
.kop-ic{width:2.75rem;height:2.75rem;padding:.6rem;border-radius:.8rem;background:#E3EFF8;color:#0074B2}
.hoofd>.kop-met-ic+.proza{margin-top:var(--s3);padding-left:calc(2.75rem + var(--s4))}
.hoofd>.kop-met-ic:not(:first-child){margin-top:var(--s7)}
.hoofd>.kop-met-ic:first-child{margin-top:0}
.s-inhoud:has(.kop-met-ic) .inhoud-raster{align-items:start}
.s-inhoud:has(.kop-met-ic) .zij{position:sticky;top:6rem;align-self:start;margin-top:0;border:1px solid #DCE8F1;border-radius:var(--r-groot);overflow:hidden;background:#fff;box-shadow:0 30px 60px -44px rgba(6,55,92,.4)}
.s-inhoud:has(.kop-met-ic) .zij>*{margin:0}
.s-inhoud:has(.kop-met-ic) .scherm-klein{padding:var(--s5) var(--s4) var(--s2);background:linear-gradient(180deg,#DCEBF6 0%,#EEF5FB 100%);border-radius:0;box-shadow:none}
.s-inhoud:has(.kop-met-ic) .scherm-klein img{width:100%;height:auto;border-radius:0;box-shadow:none;border:0}
.s-inhoud:has(.kop-met-ic) .zij-blok{padding:var(--s5) var(--s6) var(--s6);border:0;border-radius:0;background:#fff;box-shadow:none}
/* Arbowet als donkerblauwe band */
#arbowet{padding-block:var(--s7);background:radial-gradient(30rem 14rem at 100% 0%,rgba(255,158,27,.28),rgba(255,158,27,0) 70%),var(--donker);color:var(--wit)}
#arbowet .kader{position:relative;max-width:none;padding:0 0 0 calc(3.25rem + var(--s5));border:0;background:none}
#arbowet .kader::before{content:"§";position:absolute;left:0;top:0;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;background:rgba(255,255,255,.12);color:#FFB54D;font-size:1.5rem;font-weight:700}
#arbowet .kader-kop{color:var(--wit);font-size:var(--t-2xl);line-height:1.25}
#arbowet .proza{max-width:48rem;margin-top:var(--s3);color:rgba(255,255,255,.88);font-size:var(--t-l)}
#arbowet .proza a{color:var(--wit);text-decoration-color:#FFB54D}
#arbowet+.sectie{padding-top:var(--sectie)}
@media (max-width:39.99em){#arbowet .kader{padding:calc(3.25rem + var(--s4)) 0 0}}
/* op deze pagina's: vragen op wit, en 'Breid uit' met lucht onder de band met de telefoon */
.s-inhoud:has(.kop-met-ic)~.sectie.s-faq{background:var(--wit)}
.cta:has(.cta-vlak.met-beeld)+.sectie{padding-top:var(--sectie)}

/* klantverhalen-slider die vanzelf doorschuift: geen snap tijdens het glijden, pauzeknop naast de pijlen */
.kv-slider.auto .kv-spoor{scroll-snap-type:none}
.kv-pauze .speel{display:none}
.kv-pauze[aria-pressed="true"] .pauze{display:none}
.kv-pauze[aria-pressed="true"] .speel{display:inline}
@media (prefers-reduced-motion:reduce){.kv-pauze{display:none}}
/* doorschuivend: het spoor loopt aan beide kanten tot de rand van het scherm, zodat kaarten er rustig in en uit glijden */
.kv-slider.auto .kv-spoor{margin-left:calc((100vw - 100cqi) / -2);padding-left:calc((100vw - 100cqi) / 2);scroll-padding-left:calc((100vw - 100cqi) / 2)}
/* tweede knop op een donker vlak (bv. 'Neem contact op' op Koppelingen): wit in plaats van blauw-op-blauw */
.op-donker .knop.tweede{color:var(--wit);border-color:rgba(255,255,255,.75);background:transparent}
@media (hover:hover) and (pointer:fine){.op-donker .knop.tweede:hover{background:rgba(255,255,255,.12);border-color:var(--wit)}}

/* ---------- Koppelingen: hub naar het voorbeeld van Dyflexis (eigenaar 9 nov) ----------
   Donker paneel met twee bogen; de pakketten staan als witte tegels op de bogen, licht gekanteld maar altijd leesbaar
   rechtop, en draaien heel langzaam (binnen met de klok mee, buiten ertegenin). In het midden AvanTimes met een blauwe gloed.
   Stil bij muis erboven en bij 'minder beweging'. */
@property --draai{syntax:'<angle>';inherits:true;initial-value:0deg}
.hub{width:min(100%,32rem);container-type:size;border-radius:var(--r-groot);overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,116,178,.28),rgba(0,116,178,0) 70%),#071A30;box-shadow:0 30px 60px -36px rgba(6,30,50,.7)}
.hub-ring{inset:auto;left:50%;top:50%;width:60cqw;height:60cqw;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.14);background:none}
.hub-ring.buiten{width:94cqw;height:94cqw}
.hub-gloed{position:absolute;left:50%;top:50%;width:46cqw;height:46cqw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,140,220,.55),rgba(0,140,220,0));filter:blur(6px);z-index:0}
.hub-tegel{--r:30cqw;--a:0deg;--z:var(--draai);left:50%;top:50%;width:15cqw;aspect-ratio:1;padding:1.8cqw;border:0;border-radius:3.4cqw;background:var(--wit);
  box-shadow:0 10px 20px -10px rgba(0,0,0,.6);--k:-8deg;transform:translate(-50%,-50%) rotate(calc(var(--a) + var(--z))) translateY(calc(-1 * var(--r))) rotate(calc(-1 * (var(--a) + var(--z)) + var(--k)));z-index:1}
.hub-tegel:nth-child(odd){--k:7deg}
.hub-tegel picture,.hub-tegel img{display:block;width:100%;height:100%;object-fit:contain}
.hub-tegel:nth-child(n){left:50%;top:50%}
.hub-tegel:nth-child(4){--a:0deg}.hub-tegel:nth-child(5){--a:90deg}.hub-tegel:nth-child(6){--a:180deg}.hub-tegel:nth-child(7){--a:270deg}
.hub-tegel:nth-child(n+8){--r:47cqw;--z:calc(-1 * var(--draai))}
.hub-tegel:nth-child(8){--a:45deg}.hub-tegel:nth-child(9){--a:135deg}.hub-tegel:nth-child(10){--a:225deg}.hub-tegel:nth-child(11){--a:315deg}
.hub-kern{width:28cqw;border-radius:5cqw;background:linear-gradient(160deg,#0B2747,#071A30);border:1px solid rgba(120,190,255,.45);
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 40px -6px rgba(0,140,220,.75);z-index:2;gap:1.2cqw;padding:3cqw}
.hub-logo svg{display:block;width:20cqw;height:auto}
.hub-kern small{font-size:2.6cqw;color:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:no-preference){
  .hub{animation:hub-draai 90s linear infinite}
  .hub:hover{animation-play-state:paused}
}
@keyframes hub-draai{to{--draai:360deg}}

/* ---------- Prijzen (eigenaar 9 nov, naar Dyflexis): gecentreerde kop, twee prijskaarten, 'Samen groeien' ---------- */
body.pagina-prijzen .hero-pagina{position:relative;padding-block:var(--s6) var(--sectie);border-bottom:0;background:linear-gradient(180deg,#DCEBF6 0%,#EEF5FB 55%,var(--wit) 100%)}
body.pagina-prijzen .hero-pagina .raster{display:block}
body.pagina-prijzen .hero-pagina .hero-kruimel .kruimel ol{justify-content:center}
body.pagina-prijzen .hero-pagina .hero-tekst{max-width:54rem;margin:var(--s5) auto 0;text-align:center}
body.pagina-prijzen .hero-pagina h1{max-width:none;margin-inline:auto}
body.pagina-prijzen .hero-pagina .hero-intro{margin-inline:auto;max-width:44rem}
body.pagina-prijzen .hero-zone.blok-prijsplannen{margin-top:var(--s8)}
body.pagina-prijzen .kop.kop-boven:not(:has([aria-expanded="true"])){background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
.plannen{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);max-width:66rem;margin:0 auto}
@media (min-width:56em){.plannen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{display:flex;flex-direction:column;gap:var(--s4);min-width:0;padding:clamp(var(--s5),2vw + .75rem,var(--s7));border:1px solid #D3E3EF;border-radius:var(--r-groot);background:var(--wit);box-shadow:0 30px 60px -45px rgba(6,55,92,.5);text-align:left}
.plan>*{margin:0}
.plan.uitgelicht{border:2px solid var(--blauw);box-shadow:0 30px 70px -35px rgba(0,116,178,.45)}
.plan-kop{font-size:var(--t-2xl);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.plan-prijs{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4rem;font-variant-numeric:tabular-nums}
.plan-prijs .voorvoegsel{font-size:var(--t-l);color:var(--sub)}
.plan-prijs .waarde{font-size:clamp(2.75rem,2rem + 2.5vw,4rem);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:proportional-nums}
.plan-prijs .label-cijfer{flex-basis:100%;margin-top:.35rem;font-size:var(--t-s);color:var(--sub)}
.plan .knoppen{margin:0}
.plan-prijs+.knoppen .knop{flex:1 1 100%;justify-content:center}
.plan-prijs+.knoppen{padding-bottom:var(--s5);border-bottom:1px solid var(--lijn)}
.plan-noot{font-size:var(--t-s);color:var(--sub)}
.plan.uitgelicht>.knoppen{margin-top:auto;padding-top:var(--s4)}
.plan-lijst{padding-top:var(--s4);border-top:1px solid var(--lijn)}
.plan-lijst h3{margin:0 0 var(--s3);font-size:var(--t-m);color:var(--ink)}
.plan-lijst ul,.plan-tekst ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.plan-tekst ul{margin-top:var(--s4)}
.plan-lijst li,.plan-tekst li{position:relative;margin:0;padding-left:1.85rem}
.plan-lijst li::before,.plan-tekst li::before{content:"";position:absolute;left:0;top:.2em;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--blauw);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/80% no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* Samen groeien */
.groei-intro{max-width:44rem;margin-bottom:var(--s7)}
.groei{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:center}
@media (min-width:64em){.groei{grid-template-columns:minmax(0,4fr) auto minmax(0,8fr)}}
.groei-basis{padding:var(--s6);border:1px solid #D3E3EF;border-radius:var(--r-groot);background:linear-gradient(180deg,#DCEBF6,#F4F9FD)}
.groei-basis>*{margin:0}
.groei-basis-l{font-size:var(--t-s);font-weight:700;color:var(--sub)}
.groei-basis h3{margin:var(--s2) 0 var(--s4);font-size:var(--t-xl);color:var(--ink)}
.vinklijst{list-style:none;padding:0;margin:0 0 var(--s5);display:grid;gap:.5rem}
.vinklijst li{display:flex;align-items:center;gap:.55rem;margin:0}
.vinklijst .vink{width:1.25rem;height:1.25rem;flex:none;color:var(--blauw)}
.groei-prijs{padding-top:var(--s4);border-top:1px solid #C9DCEA;font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.groei-prijs small{font-size:var(--t-s);font-weight:500;letter-spacing:0;color:var(--sub)}
.groei-prijs span{display:block;margin-top:.3rem;font-size:var(--t-s);font-weight:500;letter-spacing:0;color:var(--sub)}
.groei-plus{display:grid;place-items:center;justify-self:center;width:3rem;height:3rem;border-radius:50%;background:var(--amber);color:var(--nacht);font-size:1.75rem;font-weight:700;line-height:1}
.groei-keuze-kop{margin:0;font-size:var(--t-l);color:var(--ink)}
.groei-keuze-sub{margin:.2rem 0 var(--s4);font-size:var(--t-s);color:var(--sub)}
.groei-blokken{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
@media (min-width:40em){.groei-blokken{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64em){.groei-blokken{grid-template-columns:repeat(4,minmax(0,1fr))}}
.groei-blokken li.breed{grid-column:span 2}
.groei-blokken li{margin:0;display:flex}
.groei-blok{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;min-height:5.6rem;padding:.9rem;border:1.5px solid #D3E3EF;border-radius:var(--r-mid);background:var(--wit);font:inherit;font-size:var(--t-s);font-weight:600;line-height:1.35;color:var(--ink);text-align:left;cursor:pointer;transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.groei-blok:hover{border-color:var(--blauw);box-shadow:0 14px 26px -20px rgba(0,116,178,.7)}
.groei-ic{width:1.35rem;height:1.35rem;color:var(--blauw)}
.groei-teken{position:absolute;top:.7rem;right:.7rem;display:grid;place-items:center;width:1.4rem;height:1.4rem;border:1.5px solid #8FB2CB;border-radius:50%}
.groei-teken::before{content:"+";font-size:1rem;font-weight:700;line-height:1;color:var(--blauw)}
.groei-blok[aria-pressed="true"]{border-color:var(--blauw);background:var(--lichtblauw)}
.groei-blok[aria-pressed="true"] .groei-teken{border-color:var(--blauw);background:var(--blauw)}
.groei-blok[aria-pressed="true"] .groei-teken::before{content:"✓";font-size:.8rem;color:var(--wit)}
.groei-noot{display:flex;align-items:center;gap:.4rem;margin:var(--s4) 0 0;font-size:var(--t-s)}
.groei-noot .ic{width:1rem;height:1rem;color:var(--blauw)}
/* prijsfactoren met iconen, stappen als genummerd pad */
body.pagina-prijzen .v-modules .kaart-ic{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:var(--s3);border-radius:.8rem;background:#E3EFF8;color:var(--blauw)}
body.pagina-prijzen .v-modules .kaart-ic .ic{width:1.4rem;height:1.4rem}
body.pagina-prijzen .v-modules>.kaart{border-top:0;padding-top:0}
body.pagina-prijzen .v-tijdlijn{position:relative}
body.pagina-prijzen .v-tijdlijn:not(.jaren)>.kaart{border-top:0;padding-top:0}
body.pagina-prijzen .v-tijdlijn:not(.jaren)>.kaart::before{position:relative;z-index:1;display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:var(--s4);border-radius:50%;background:var(--blauw);box-shadow:0 0 0 6px var(--wit);font-size:var(--t-l);font-weight:700;color:var(--wit)}
@media (min-width:64em){body.pagina-prijzen .v-tijdlijn::after{content:"";position:absolute;top:1.5rem;left:1.5rem;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--blauw) 0 8px,transparent 8px 14px)}}
body.pagina-prijzen .sectie.s-faq{background:none}
@media (prefers-reduced-motion:reduce){.groei-blok{transition:none}}
.groei-blokken li,.groei-blok{min-width:0}
.groei-blok>span:not(.groei-teken){max-width:100%;overflow-wrap:anywhere}
/* afsluiter met een liggend beeld (beeldscherm met telefoon): het beeldscherm steekt net boven de band uit
   (eigenaar 9 nov), staat rechts op de rand van het raster en is iets kleiner dan de band hoog is */
@media (min-width:64em){
  .cta:has(.cta-beeld.liggend){padding-top:0!important}
  .cta-vlak.met-beeld:has(.cta-beeld.liggend){min-height:0}
  .cta-vlak.met-beeld .cta-beeld.liggend{align-self:start;margin:calc(-1 * clamp(var(--s6),1rem + 5vw,var(--s9)) - 2.5rem) 0 0 -12%}
  .cta-vlak.met-beeld .cta-beeld.liggend picture{position:static;display:block;width:100%;height:auto}
  .cta-vlak.met-beeld .cta-beeld.liggend img{width:100%;height:auto}
}
@media (max-width:63.99em){.cta-vlak.met-beeld .cta-beeld.liggend img{width:min(92%,26rem)}}
/* prijzen (eigenaar 9 nov, keuze 2): een brede foto van de werkvloer achter de onderste helft van de prijskaarten */
body.pagina-prijzen .hero-zone.blok-prijsplannen{position:relative}
.plannen-foto{position:absolute;z-index:0;left:50%;width:100vw;translate:-50% 0;top:16rem;bottom:calc(-1 * var(--sectie));overflow:hidden}
.plannen-foto picture,.plannen-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.plannen-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#F4F9FD 0%,rgba(244,249,253,0) 32%),rgba(6,55,92,.22)}
.plannen-foto+.plannen{position:relative;z-index:1}
body.pagina-prijzen .hero-pagina{overflow-x:clip}
@media (max-width:55.99em){.plannen-foto{top:auto;height:60%}}
/* contact (eigenaar 9 nov): foto-hero met de hal; de mensen onderin in beeld */
.foto-v2-hal{--fy:78%;--fyb:82%}

/* ---------- Contact (eigenaar 9 nov, voorbeeld 5): contactregels links, kaart van Nederland rechts, Karel naast het formulier ---------- */
body.pagina-contact .s-breed:has(.blok-kaart_nl){padding-top:var(--sectie)}
@media (min-width:64em){
  body.pagina-contact .s-breed:has(.blok-kaart_nl)>.wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:stretch}
  body.pagina-contact .s-breed:has(.blok-kaart_nl)>.wrap>.blok{margin:0}
}
body.pagina-contact .blok-kaart_nl{margin-top:var(--s6)}
body.pagina-contact .v-routes:has(.kaart-ic){display:grid;grid-template-columns:minmax(0,1fr);gap:0}
body.pagina-contact .s-breed:has(.blok-kaart_nl) .v-routes>.kaart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s4);padding:var(--s5) 0;border-top:0;border-bottom:1px solid var(--lijn)}
body.pagina-contact .s-breed:has(.blok-kaart_nl) .v-routes>.kaart:first-child{padding-top:0}
body.pagina-contact .s-breed:has(.blok-kaart_nl) .v-routes>.kaart>*{grid-column:2}
body.pagina-contact .v-routes .kaart-ic{grid-column:1!important;grid-row:1/span 5;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.8rem;background:#E3EFF8;color:var(--blauw)}
body.pagina-contact .v-routes .kaart-ic .ic{width:1.35rem;height:1.35rem}
body.pagina-contact .s-breed:has(.blok-kaart_nl) .kaart-kop{margin:0;font-size:var(--t-l)}
/* Sneller op de juiste plek: kaarten met icoon */
body.pagina-contact .s-breed:not(:has(.blok-kaart_nl)) .v-routes>.kaart{position:relative;padding:var(--s5);border:1px solid #D3E3EF;border-radius:18px;background:var(--wit)}
body.pagina-contact .s-breed:not(:has(.blok-kaart_nl)) .v-routes .kaart-ic{margin-bottom:var(--s3)}
body.pagina-contact .s-breed:not(:has(.blok-kaart_nl)) .v-routes{display:grid;gap:var(--s4)}
@media (min-width:48em){body.pagina-contact .s-breed:not(:has(.blok-kaart_nl)) .v-routes{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* kaart van Nederland */
.kaart-nl{position:relative;height:100%;min-height:24rem;border:1px solid #D3E3EF;border-radius:var(--r-groot);overflow:hidden;background:linear-gradient(135deg,#F4F9FD,#EAF4FB)}
.kaart-nl .cv-nl{position:absolute;top:6%;bottom:6%;right:4%;height:88%;width:auto;max-width:62%}
.kaart-nl-adres{position:absolute;left:var(--s5);bottom:var(--s5);display:grid;gap:.15rem;min-width:14rem;padding:var(--s5);border-radius:18px;background:var(--wit);box-shadow:0 30px 50px -30px rgba(6,55,92,.6)}
.kaart-nl-adres p{margin:0;color:var(--sub)}
.kaart-nl-adres .kaart-nl-naam{font-size:var(--t-l);font-weight:700;color:var(--ink)}
.kaart-nl-adres .knop{margin-top:var(--s3);justify-self:start}
@media (max-width:39.99em){
  .kaart-nl{min-height:0;display:flex;flex-direction:column}
  .kaart-nl .cv-nl{position:static;width:100%;height:auto;max-width:none;padding:var(--s4) var(--s4) 0}
  .kaart-nl-adres{position:static;min-width:0;margin:0 var(--s4) var(--s4);box-shadow:none;border:1px solid #D3E3EF}
}
/* formulier met Karel ernaast, in een lichtblauwe band */
body.pagina-contact .sectie.s-formulier{padding-block:var(--sectie);background:linear-gradient(180deg,#EAF4FB,var(--wit))}
body.pagina-contact .sectie.s-formulier .contactpersoon{background:var(--wit)}
body.pagina-contact .sectie.s-formulier .formulier-wrap{border-radius:var(--r-groot);box-shadow:0 30px 60px -45px rgba(6,55,92,.5)}
body.pagina-contact .v-routes .kaart a{overflow-wrap:anywhere}
body.pagina-contact .v-routes .tel a{white-space:normal}
/* contact (eigenaar 9 nov): realistische kaart van de omgeving (Natural Earth, publiek domein) */
.kaart-nl.met-foto{background:#F3F2EE}
.kaart-nl-beeld,.kaart-nl-beeld picture{position:absolute;inset:0}
.kaart-nl-beeld img{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
@media (max-width:39.99em){
  .kaart-nl.met-foto .kaart-nl-beeld,.kaart-nl.met-foto .kaart-nl-beeld picture{position:static}
  .kaart-nl.met-foto .kaart-nl-beeld img{height:auto;aspect-ratio:1360/920}
  .kaart-nl.met-foto .kaart-nl-adres{margin-top:var(--s4)}
}
/* demoband met toestel: na een gekleurd vlak (bijv. veelgestelde vragen) geen extra ruimte, zodat het toestel altijd boven de band uitsteekt */
section.cta:has(.cta-vlak.met-beeld){padding-top:0!important}

/* ---------- Overzicht (eigenaar 9 nov, voorbeeld 1 naar Dyflexis): opening met scherm, kaarten met icoon, labels ---------- */
.s-overzicht .proza p,.s-overzicht .proza li{font-size:1.0625rem;line-height:1.65;color:#1D3B55}
.ov-lead{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);align-items:center;margin-bottom:var(--s8)}
@media (min-width:56em){.ov-lead{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s8)}
  .ov-lead.zonder-beeld{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.ov-lead-t>h2,.ov-lead-t>h3{margin-top:0;font-size:var(--t-3xl);line-height:1.1;letter-spacing:-.02em}
.ov-lead-t .proza:last-child,.ov-lead-r .proza:last-child{margin-bottom:0}
.ov-lead-r>:first-child{margin-top:0}
.ov-lead-b{margin:0;display:flex;justify-content:center}
.ov-lead-b img{width:100%;height:auto}
.ov-lead-b.staand img{width:auto;max-width:100%;max-height:28rem}
.ov-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
@media (min-width:48em){.ov-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.ov-raster.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ov-raster.n1{grid-template-columns:minmax(0,1fr)}
.ov-kaart{min-width:0;padding:var(--s6);border:1px solid #D3E3EF;border-radius:var(--r-groot);background:var(--wit);box-shadow:0 24px 50px -44px rgba(6,55,92,.5)}
.ov-kaart>h2,.ov-kaart>h3{margin:0 0 var(--s3);font-size:var(--t-xl);line-height:1.2}
.ov-kaart .proza>:last-child{margin-bottom:0}
.ov-ic{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:var(--s4);border-radius:.9rem;background:#E3EFF8;color:var(--blauw)}
.ov-ic .ic{width:1.45rem;height:1.45rem}
/* zijkant als lichtblauw vlak met labels */
.ov-vak{margin-top:var(--s8)}
.ov-vak .zij-blok{max-width:none;margin:0;padding:clamp(var(--s5),2vw + .75rem,var(--s7));border:1px solid #D3E3EF;border-radius:var(--r-groot);background:linear-gradient(135deg,#EAF4FB,#F7FBFE);text-align:center;position:static}
.ov-vak .zij-blok>*{margin-inline:auto}
.ov-vak .zij-kop{font-size:var(--t-xl);margin-bottom:var(--s5)}
.ov-vak .zij-blok .proza{max-width:46rem}
.ov-vak .zij-blok .proza ul{list-style:none;padding:0;margin:0 0 var(--s5);display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.ov-vak .zij-blok .proza li{display:flex;align-items:center;gap:.45rem;margin:0;padding:.55rem 1rem .55rem .85rem;border:1px solid #D3E3EF;border-radius:999px;background:var(--wit);font-size:var(--t-s);font-weight:600;line-height:1.3;color:var(--ink);text-align:left}
.ov-vak .zij-blok .proza li::before{content:"";position:static;flex:none;width:1.05rem;height:1.05rem;margin:0;border-radius:50%;background:var(--blauw);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/78% no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ov-vak .zij-blok .proza li a{font-weight:600}
.ov-vak .zij-blok .knoppen{justify-content:center}
.ov-vak .zij-logo{display:flex;justify-content:center}
.ov-lead-t>h2,.ov-lead-t>h3{margin-bottom:var(--s4)}
.ov-lead-b:not(.vrij) img{border:1px solid #D3E3EF;border-radius:14px;box-shadow:0 30px 60px -40px rgba(6,55,92,.5);background:var(--wit)}
@media (min-width:48em){
  .ov-raster.n1 .ov-kaart{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--s7);align-items:start}
  .ov-raster.n1 .ov-kaart>.ov-ic,.ov-raster.n1 .ov-kaart>h2,.ov-raster.n1 .ov-kaart>h3{grid-column:1}
  .ov-raster.n1 .ov-kaart>:not(.ov-ic):not(h2):not(h3){grid-column:2;grid-row:1/span 6}
}
/* Werkwijze (eigenaar 9 nov): het traject als genummerde kaarten (4 + 3) met 'Ook voor je in huis' als achtste vak */
@media (min-width:64em){
  body.pagina-werkwijze .s-breed.met-stappen>.wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
  body.pagina-werkwijze .s-breed.met-stappen>.wrap>.kopgroep,body.pagina-werkwijze .s-breed.met-stappen>.wrap>.blok-tekst.rol-intro{grid-column:1/-1;margin:0}
  body.pagina-werkwijze .s-breed.met-stappen>.wrap>.blok-tekst.rol-intro{margin-bottom:var(--s5)}
  body.pagina-werkwijze .s-breed.met-stappen .blok-stappen,body.pagina-werkwijze .s-breed.met-stappen .blok-stappen>.stappen{display:contents}
  body.pagina-werkwijze .s-breed.met-stappen>.wrap>.blok-tekst.rol-zijkant{grid-column:4;grid-row:4;margin:0;position:static;align-self:stretch}
  body.pagina-werkwijze .s-breed.met-stappen>.wrap{align-items:stretch}
  body.pagina-werkwijze .s-breed.met-stappen .zij-blok{position:static;height:100%;margin:0;max-width:none}
}
body.pagina-werkwijze .s-breed.met-stappen{counter-reset:stap}
body.pagina-werkwijze .s-breed.met-stappen .stappen>li{counter-increment:stap;position:relative;display:block;margin:0 0 var(--s4);padding:var(--s5);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-groot);background:rgba(6,55,92,.38);list-style:none}
body.pagina-werkwijze .s-breed.met-stappen .stappen>li::before{content:counter(stap);position:static;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:0 0 var(--s4);border:0;border-radius:50%;background:var(--amber);color:var(--nacht);font-size:var(--t-l);font-weight:700;transform:none}
body.pagina-werkwijze .s-breed.met-stappen .stappen>li::after{display:none}
body.pagina-werkwijze .s-breed.met-stappen .stappen>li h3{margin:0 0 var(--s2);font-size:var(--t-l);color:var(--wit)}
body.pagina-werkwijze .s-breed.met-stappen .stappen>li .stap-tekst p{margin:0;color:var(--wit)}
@media (min-width:64em){body.pagina-werkwijze .s-breed.met-stappen .stappen>li{margin:0}}
/* Werkwijze (eigenaar 9 nov): het traject op een industriële foto met een donkerblauwe laag */
body.pagina-werkwijze .s-breed.met-stappen.blauw{background:linear-gradient(180deg,rgba(6,55,92,.86),rgba(1,46,90,.9)),url("../img/v/productie-1400.webp") center 40%/cover no-repeat}
@media (max-width:40em){body.pagina-werkwijze .s-breed.met-stappen.blauw{background-image:linear-gradient(180deg,rgba(6,55,92,.88),rgba(1,46,90,.92)),url("../img/v/productie-800.webp")}}
body.pagina-werkwijze .s-breed.met-stappen .stappen>li{background:rgba(6,55,92,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* klantverhalen: knop 'Meer klantverhalen' */
.meer-wrap{display:flex;justify-content:center;margin:var(--s7) 0 0}
.meer-lijst>[hidden]{display:none!important}
/* footer (eigenaar 9 nov): KvK- en btw-nummer naast het copyright */
.voet-reg{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0}

/* ---------- Cookiemelding (eigenaar 9 nov) ---------- */
.cookie{position:fixed;z-index:60;left:var(--s4);right:var(--s4);bottom:var(--s4);display:flex;justify-content:center;pointer-events:none}
.cookie[hidden]{display:none}
.cookie-in{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);max-width:60rem;padding:var(--s5) var(--s6);border:1px solid #D3E3EF;border-radius:var(--r-groot);background:var(--wit);box-shadow:0 24px 60px -20px rgba(6,55,92,.45)}
.cookie-tekst{flex:1 1 22rem;margin:0;font-size:var(--t-s);line-height:1.55;color:var(--tekst)}
.cookie-tekst strong{display:block;margin-bottom:.15rem;font-size:var(--t-m);color:var(--ink)}
.cookie-knoppen{display:flex;flex-wrap:wrap;gap:var(--s3)}
.voet-cookie{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.voet-cookie:hover{text-decoration-thickness:2px}
/* Koppelingen (eigenaar 9 nov, voorbeeld 1): logostrook onderin het opening-paneel */
.hero-strook{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid #C9DCEA}
.hero-strook-kop{margin:0 0 var(--s3);font-size:var(--t-s);font-weight:600;color:var(--sub)}
.hero-strook-rij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media (min-width:64em){.hero-strook-rij{grid-template-columns:repeat(8,minmax(0,1fr))}}
.hero-strook-rij li{display:grid;place-items:center;min-height:3.6rem;margin:0;padding:.8rem .9rem;border:1px solid #D3E3EF;border-radius:14px;background:var(--wit)}
.hero-strook-rij picture{display:contents}
.hero-strook-rij img{width:auto;height:auto;max-width:100%;max-height:1.6rem}
.foto-pagina .hero-tekst>.hero-strook{max-width:none}