/* ============================================================
   MODERNIZENOW - GEDEELD ONTWERPSYSTEEM
   ------------------------------------------------------------
   Merkkader: navy #0B1D33 · blauw #3AB9E4 · ijsblauw #EAF6FC
              groen #4FBE94 · oker #E0A63A
   Letters:   Space Grotesk (koppen) · Inter (lopend) · IBM Plex Mono (labels/cijfers)
   Richtlijn: rijk, diep, zelfverzekerd. Donkere en lichte secties wisselen
              elkaar af zodat de pagina ritme krijgt - geen platte, egale vlakken.
   Contrast:  wit/ijsblauw op #3AB9E4 haalt GEEN AA (ratio 2,1–2,3).
              Gebruik op blauwe vlakken ALTIJD navy-tekst (ratio 7,5).
              Navy-vlakken mogen ijsblauw, blauw, groen of oker als tekst dragen (ratio 7,4+).
   z-index-conventie: canvas 1 · overlay/scrim 2 · content 10 · nav 100
   ============================================================ */

/* ============================================================
   LETTERTYPES - lokaal gehost, geen verzoek naar Google
   ------------------------------------------------------------
   Tot 03-09-2026 kwamen deze drie letters van fonts.googleapis.com
   en fonts.gstatic.com. Elke bezoeker leverde daarmee zijn IP-adres
   bij Google in, terwijl deze site zelf belooft dat er niets naar
   Amerikaanse partijen gaat. De woff2-bestanden staan nu in
   ./lettertypes/ op onze eigen server in Wenen.
   Alleen de subsets latin en latin-ext, want de site is Nederlands.
   Inter en Space Grotesk zijn variabele letters (een bestand dekt
   400 tot 700), IBM Plex Mono heeft een bestand per gewicht.
   Licentie: alle drie SIL Open Font License 1.1, zelf hosten mag.
   Wil je een gewicht toevoegen, haal dan het bijbehorende woff2
   binnen en zet er een regel bij. Niet terug naar het CDN.
   ============================================================ */

@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("lettertypes/space-grotesk-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("lettertypes/space-grotesk-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("lettertypes/inter-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("lettertypes/inter-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("lettertypes/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("lettertypes/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("lettertypes/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("lettertypes/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

html { color-scheme: only light; }

:root{
  /* ---- merkkleuren ---- */
  --navy:#0B1D33;
  --navy-2:#0F2440;
  --navy-3:#132A4A;
  --navy-4:#1B3A63;
  --ice:#EAF6FC;
  --ice-70:rgba(234,246,252,.72);
  --ice-45:rgba(234,246,252,.56);
  --blue:#3AB9E4;
  --blue-2:#8AD6EF;
  --groen:#4FBE94;
  --oker:#E0A63A;
  --wit:#FFFFFF;

  /* ---- lichte-sectie tokens (afgeleid, zelfde rollen als de donkere) ---- */
  --inkt:#0B1D33;
  --inkt-70:rgba(11,29,51,.72);
  --inkt-45:rgba(11,29,51,.64);
  --lijn:rgba(11,29,51,.12);
  --lijn-zacht:rgba(11,29,51,.07);
  --bg-licht:#F6FAFC;
  --bg-ijs:var(--ice);
  --surface:#FFFFFF;

  /* ---- donkere-sectie tokens ---- */
  --lijn-donker:rgba(234,246,252,.14);
  --lijn-donker-zacht:rgba(234,246,252,.08);
  --surface-donker:rgba(234,246,252,.05);
  --surface-donker-hover:rgba(234,246,252,.09);

  /* ---- typografie ---- */
  --font-kop:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* ---- schaal & ritme ---- */
  --container:min(1360px,92vw);
  --container-smal:min(820px,92vw);
  --radius-s:8px;
  --radius:16px;
  --radius-l:24px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.5,0,.2,1);

  /* ---- diepte: gelaagde schaduwen met bedoeling, niet decoratief plat ---- */
  --schaduw-s:0 2px 8px -4px rgba(11,29,51,.18);
  --schaduw-m:0 12px 28px -12px rgba(11,29,51,.22),0 4px 10px -6px rgba(11,29,51,.12);
  --schaduw-l:0 30px 70px -24px rgba(11,29,51,.32),0 10px 24px -10px rgba(11,29,51,.16);
  --schaduw-donker:0 30px 80px -28px rgba(0,0,0,.55),0 10px 26px -12px rgba(0,0,0,.4);
  --gloed-blauw:0 0 0 1px rgba(58,185,228,.35),0 20px 50px -18px rgba(58,185,228,.35);
}

@media(min-width:1680px){ :root{ --container:min(1480px,90vw); } }

/* ============================================================
   RESET & BASIS
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-licht);
  color:var(--inkt);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{list-style:none;}
::selection{background:var(--blue);color:var(--navy);}

/* focusstaten: altijd zichtbaar, nooit onderdrukt */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}
:where(.sectie--donker,.hero) :is(a,button,input,textarea,select,summary):focus-visible{
  outline-color:var(--blue-2);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.container--smal{max-width:var(--container-smal);margin:0 auto;padding:0 24px;}

/* ============================================================
   TYPOGRAFIE - grote schaal, veel contrast kop/tekst
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--font-kop);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.022em;
  color:var(--inkt);
  /* Lange Nederlandse samenstellingen passen op 375px niet in een kop.
     Zonder dit liep "Automatiseringsplan" 134px buiten zijn kader en knipte
     de overflow-x:hidden van de sectie het woord weg: geen schuifbalk, wel
     onleesbare tekst. hyphens doet het nette afbreekstreepje waar de browser
     een NL-woordenboek heeft, overflow-wrap is de harde garantie. */
  overflow-wrap:break-word;
  /* Afbreekstreepjes alleen op smalle schermen (zie de media query hieronder). Overal aan gaf op
     desktop koppen als "draai-ende" en "auto-matisering", terwijl er ruim plek was: hyphens:auto
     breekt ook af om regels gelijkmatiger te vullen. overflow-wrap blijft de harde garantie. */
  hyphens:manual;
}
/* Geen automatische afbreekstreepjes in koppen, ook niet op smal.
   Gemeten 23-09-2026 op 375px, 22 paginas: hyphens:auto gaf 77 afbreekpunten in 46 koppen,
   op plekken die de browser kiest (Chromium brak "weten" als "wet-en", "gratis" als "grat-is",
   "beheer" als "beh-eer"). Dat woordenboek verschilt per browser en per besturingssysteem,
   dus het resultaat is niet te sturen en niet te controleren. Met hyphens:manual bepalen wij
   zelf waar een lang woord breekt, met ­ in de kop. overflow-wrap:break-word hierboven
   blijft de harde garantie tegen een kop die buiten beeld loopt. */
:where(.sectie--donker,.hero) h1,:where(.sectie--donker,.hero) h2,:where(.sectie--donker,.hero) h3,:where(.sectie--donker,.hero) h4{color:var(--ice);}

h1{font-size:clamp(2.75rem,3.4vw + 2rem,5.4rem);font-weight:700;}
h2{font-size:clamp(2.1rem,1.8vw + 1.6rem,3.4rem);}
h3{font-size:clamp(1.35rem,.6vw + 1.15rem,1.7rem);font-weight:600;}
h4{font-size:1.15rem;font-weight:600;}

p{color:var(--inkt-70);max-width:60ch;font-size:1.05rem;}
:where(.sectie--donker,.hero) p{color:var(--ice-70);}
p.lead,.lead{font-size:clamp(1.15rem,.5vw + 1.05rem,1.4rem);line-height:1.5;max-width:52ch;color:var(--inkt-70);}
:where(.sectie--donker,.hero) .lead{color:var(--ice-70);}
small,.tekst-klein{font-size:.88rem;color:var(--inkt-45);}
:where(.sectie--donker,.hero) .tekst-klein{color:var(--ice-45);}

strong{font-weight:600;color:var(--inkt);}
:where(.sectie--donker,.hero) strong{color:var(--ice);}

.mono{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;}
.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  margin-bottom:18px;
}
.kicker::before{content:"";width:30px;height:1.5px;background:currentColor;flex-shrink:0;}
.kicker--groen{color:var(--groen);}
.kicker--oker{color:var(--oker);}
.sectie:not(.sectie--donker) .kicker{color:#0D789B;} /* blauw op licht: verdiept voor AA */

.tekst-accent{
  background:linear-gradient(120deg,var(--blue-2),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sectie:not(.sectie--donker) .tekst-accent{
  background:linear-gradient(120deg,#0D789B,#0F6F8F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   SECTIES - het ritme van de pagina: donker/licht/ijs wisselen af
   ============================================================ */
.sectie{position:relative;padding:clamp(80px,9vw,140px) 0;overflow:hidden;}
.sectie--compact{padding:clamp(56px,6vw,90px) 0;}

.sectie--licht{background:var(--bg-licht);}
.sectie--wit{background:var(--surface);}
.sectie--ijs{background:linear-gradient(180deg,var(--bg-ijs),var(--bg-licht));}

.sectie--donker{
  background:var(--navy);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 0%,rgba(58,185,228,.14),transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%,rgba(79,190,148,.10),transparent 60%);
  color:var(--ice);
}
/* fijn rasterpatroon voor diepte op donkere secties, zeer subtiel */
.sectie--donker::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.35;pointer-events:none;
  background-image:
    linear-gradient(var(--lijn-donker-zacht) 1px,transparent 1px),
    linear-gradient(90deg,var(--lijn-donker-zacht) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 30%,transparent 78%);
}
.sectie--donker .container,.sectie--donker .container--smal{position:relative;z-index:1;}

/* overgangsrand tussen secties: geeft gelaagdheid ipv harde knip */
.sectie--overlap-boven{margin-top:-1px;}
.sectie--rand-boven{border-top:1px solid var(--lijn-zacht);}
.sectie--donker.sectie--rand-boven{border-top:1px solid var(--lijn-donker-zacht);}

.sectie-kop{max-width:44rem;margin-bottom:clamp(40px,4.5vw,64px);}
.sectie-kop--midden{margin-left:auto;margin-right:auto;text-align:center;}
.sectie-kop p{margin-top:16px;}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,32px);}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,28px);}
@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ============================================================
   HERO / 3D-SCENE-CONTAINER
   ============================================================ */
.hero{position:relative;padding:calc(var(--nav-h) + clamp(64px,8vw,110px)) 0 clamp(70px,8vw,120px);
  background:var(--navy);overflow:hidden;isolation:isolate;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 65% 55% at 78% 20%,rgba(58,185,228,.22),transparent 62%),
    radial-gradient(ellipse 50% 45% at 10% 90%,rgba(79,190,148,.14),transparent 60%);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(320px,1fr) minmax(300px,.9fr);gap:clamp(40px,6vw,90px);align-items:center;}
.hero-tekst h1{color:var(--ice);}
.hero-tekst .lead{color:var(--ice-70);margin-top:22px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px;}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;} .hero-visual{order:-1;height:min(58svh,420px);}}

.scene-visual{
  position:relative;width:100%;height:min(64svh,580px);border-radius:var(--radius-l);
  overflow:hidden;background:radial-gradient(ellipse 90% 90% at 50% 40%,rgba(58,185,228,.08),transparent 70%),var(--navy-2);
  border:1px solid var(--lijn-donker);box-shadow:var(--schaduw-donker);isolation:isolate;
}
.scene-visual canvas{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:1;}
.scene-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;
  background:
    radial-gradient(circle at 30% 30%,rgba(58,185,228,.35),transparent 45%),
    radial-gradient(circle at 70% 65%,rgba(79,190,148,.28),transparent 45%),var(--navy-2);
}
.scene-fallback svg{width:62%;max-width:340px;opacity:.9;}

/* ============================================================
   ONTHULLINGEN & PARALLAX
   ============================================================ */
.onthul{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.onthul.in{opacity:1;transform:none;}
.onthul--groeien{opacity:0;transform:scale(.94);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.onthul--groeien.in{opacity:1;transform:none;}
.onthul--links{opacity:0;transform:translateX(-32px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.onthul--links.in{opacity:1;transform:none;}
.onthul.v1{transition-delay:.08s;}
.onthul.v2{transition-delay:.16s;}
.onthul.v3{transition-delay:.24s;}
.onthul.v4{transition-delay:.32s;}

[data-parallax]{will-change:transform;}

/* ============================================================
   KNOPPEN
   Regel: blauwe achtergrond = ALTIJD navy-tekst (AA). Navy-achtergrond
   mag ijs/blauw/groen/oker dragen.
   ============================================================ */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-mono);font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:16px 30px;border-radius:var(--radius-s);border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.knop:hover{transform:translateY(-3px);}
.knop:active{transform:translateY(-1px);}

.knop--primair{background:var(--navy);color:var(--ice);box-shadow:var(--schaduw-m);}
.knop--primair:hover{background:var(--navy-3);box-shadow:var(--schaduw-l);}
:where(.sectie--donker,.hero) .knop--primair{background:var(--blue);color:var(--navy);box-shadow:var(--gloed-blauw);}
:where(.sectie--donker,.hero) .knop--primair:hover{background:var(--blue-2);}

.knop--secundair{border-color:var(--lijn);color:var(--inkt);background:var(--surface);}
.knop--secundair:hover{border-color:var(--blue);color:#0D789B;}
:where(.sectie--donker,.hero) .knop--secundair{border-color:var(--lijn-donker);color:var(--ice);background:transparent;}
:where(.sectie--donker,.hero) .knop--secundair:hover{border-color:var(--blue-2);color:var(--blue-2);}

.knop--subtiel{padding:10px 4px;text-transform:none;font-family:var(--font-body);font-weight:600;
  font-size:.98rem;letter-spacing:0;color:var(--inkt);border-bottom:1.5px solid var(--lijn);border-radius:0;}
.knop--subtiel:hover{border-color:var(--blue);color:#0D789B;transform:none;}
:where(.sectie--donker,.hero) .knop--subtiel{color:var(--ice);border-color:var(--lijn-donker);}
:where(.sectie--donker,.hero) .knop--subtiel:hover{color:var(--blue-2);border-color:var(--blue-2);}

.knop--groot{padding:19px 36px;font-size:.86rem;}
.knop[disabled]{opacity:.5;pointer-events:none;}

/* ============================================================
   BADGES / LABELS
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.68rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:30px;
  border:1px solid var(--lijn);color:var(--inkt-70);background:var(--surface);
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.badge--blauw{color:#0D789B;border-color:rgba(58,185,228,.35);background:rgba(58,185,228,.08);}
.badge--groen{color:#1F6E58;border-color:rgba(79,190,148,.35);background:rgba(79,190,148,.1);}
.badge--oker{color:#8E6519;border-color:rgba(224,166,58,.4);background:rgba(224,166,58,.12);}
:where(.sectie--donker,.hero) .badge{color:var(--ice-70);border-color:var(--lijn-donker);background:var(--surface-donker);}
:where(.sectie--donker,.hero) .badge--blauw{color:var(--blue-2);border-color:rgba(58,185,228,.4);background:rgba(58,185,228,.12);}
:where(.sectie--donker,.hero) .badge--groen{color:var(--groen);border-color:rgba(79,190,148,.4);background:rgba(79,190,148,.12);}
:where(.sectie--donker,.hero) .badge--oker{color:var(--oker);border-color:rgba(224,166,58,.4);background:rgba(224,166,58,.12);}

/* ============================================================
   KAARTEN - gelaagde diepte, geen platte randjes
   ============================================================ */
.kaart{
  position:relative;background:var(--surface);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(28px,2.6vw,36px);box-shadow:var(--schaduw-s);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.kaart:hover{transform:translateY(-6px);box-shadow:var(--schaduw-l);border-color:rgba(58,185,228,.35);}
.kaart h3{margin-bottom:12px;}
.kaart p{font-size:.98rem;}
.kaart .mono{color:var(--inkt-45);margin-top:16px;display:block;}

.kaart--donker{background:var(--surface-donker);border-color:var(--lijn-donker);box-shadow:none;}
.kaart--donker:hover{background:var(--surface-donker-hover);border-color:rgba(58,185,228,.4);box-shadow:var(--schaduw-donker);}
.kaart--donker .mono{color:var(--ice-45);}

.kaart--icoon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(58,185,228,.12);color:#0D789B;margin-bottom:20px;}
:where(.sectie--donker,.hero) .kaart--icoon{background:rgba(58,185,228,.15);color:var(--blue-2);}

/* ============================================================
   PRIJSTABEL
   ============================================================ */
.prijstabel{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
@media(max-width:980px){.prijstabel{grid-template-columns:1fr;max-width:460px;margin:0 auto;}}
.prijs-kaart{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--lijn);
  border-radius:var(--radius-l);padding:clamp(30px,2.6vw,38px);box-shadow:var(--schaduw-s);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.prijs-kaart:hover{transform:translateY(-6px);box-shadow:var(--schaduw-l);}
.prijs-kaart--uitgelicht{
  background:var(--navy);border-color:var(--navy);color:var(--ice);box-shadow:var(--schaduw-donker);
  transform:scale(1.03);position:relative;z-index:1;
}
.prijs-kaart--uitgelicht:hover{transform:scale(1.03) translateY(-6px);}
.prijs-kaart--uitgelicht h3,.prijs-kaart--uitgelicht .prijs-bedrag{color:var(--ice);}
.prijs-kaart--uitgelicht p,.prijs-kaart--uitgelicht li{color:var(--ice-70);}
.prijs-badge{align-self:flex-start;margin-bottom:14px;}
.prijs-bedrag{font-family:var(--font-kop);font-size:2.6rem;font-weight:700;letter-spacing:-.02em;color:var(--inkt);margin:8px 0 4px;}
.prijs-bedrag span{font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--inkt-45);text-transform:uppercase;letter-spacing:.06em;}
.prijs-kaart--uitgelicht .prijs-bedrag span{color:var(--ice-45);}
.prijs-kaart p{margin-bottom:20px;}
.prijs-lijst{display:flex;flex-direction:column;gap:12px;margin:8px 0 28px;flex:1;}
.prijs-lijst li{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;color:var(--inkt-70);}
.prijs-kaart--uitgelicht .prijs-lijst li{color:var(--ice-70);}
.prijs-lijst li::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:rgba(79,190,148,.16);position:relative;}
.prijs-lijst li::after{content:"";position:absolute;}
.prijs-lijst li{position:relative;padding-left:28px;}
.prijs-lijst li::before{position:absolute;left:0;top:2px;}
.prijs-lijst li::after{
  content:"";position:absolute;left:6px;top:6px;width:6px;height:10px;
  border-right:2px solid var(--groen);border-bottom:2px solid var(--groen);transform:rotate(45deg);
}
.prijs-kaart .knop{margin-top:auto;justify-content:center;width:100%;}

/* ============================================================
   ACCORDEON (FAQ)
   ============================================================ */
.accordeon{border-top:1px solid var(--lijn);max-width:52rem;}
:where(.sectie--donker,.hero) .accordeon{border-color:var(--lijn-donker);}
.accordeon details{border-bottom:1px solid var(--lijn);}
:where(.sectie--donker,.hero) .accordeon details{border-color:var(--lijn-donker);}
.accordeon summary{
  cursor:pointer;list-style:none;padding:22px 4px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;font-family:var(--font-kop);font-weight:600;font-size:1.08rem;color:var(--inkt);
  transition:color .2s;
}
:where(.sectie--donker,.hero) .accordeon summary{color:var(--ice);}
.accordeon summary::-webkit-details-marker{display:none;}
.accordeon summary:hover{color:#0D789B;}
:where(.sectie--donker,.hero) .accordeon summary:hover{color:var(--blue-2);}
.accordeon summary::after{
  content:"+";flex-shrink:0;font-family:var(--font-mono);font-size:1.3rem;font-weight:400;color:var(--blue);
  transition:transform .3s var(--ease);
}
.accordeon details[open] summary::after{content:"–";}
.accordeon .accordeon-inhoud{padding:0 4px 22px;max-width:64ch;color:var(--inkt-70);}
:where(.sectie--donker,.hero) .accordeon .accordeon-inhoud{color:var(--ice-70);}

/* ============================================================
   FORMULIEREN
   ============================================================ */
.formulier{display:flex;flex-direction:column;gap:22px;}
.veld{display:flex;flex-direction:column;gap:8px;}
.veld label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--inkt-45);}
:where(.sectie--donker,.hero) .veld label{color:var(--ice-45);}
.veld input,.veld textarea,.veld select{
  font-family:var(--font-body);font-size:1rem;color:var(--inkt);background:var(--surface);
  border:1.5px solid var(--lijn);border-radius:10px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;
  width:100%;
}
:where(.sectie--donker,.hero) .veld input,:where(.sectie--donker,.hero) .veld textarea,:where(.sectie--donker,.hero) .veld select{
  background:rgba(234,246,252,.04);color:var(--ice);border-color:var(--lijn-donker);
}
.veld textarea{resize:vertical;min-height:130px;}
.veld input:focus,.veld textarea:focus,.veld select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(58,185,228,.16);
}
.veld.veld--fout input,.veld.veld--fout textarea,.veld.veld--fout select{
  border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.1);
}
.veld-foutmelding{display:none;font-size:.82rem;color:#C0392B;font-weight:500;}
.veld.veld--fout .veld-foutmelding{display:block;}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:640px){.veld-rij{grid-template-columns:1fr;}}
.keuze{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;color:var(--inkt-70);cursor:pointer;}
:where(.sectie--donker,.hero) .keuze{color:var(--ice-70);}
.keuze input{width:auto;flex-shrink:0;margin-top:3px;accent-color:var(--blue);}
.formulier-melding{display:none;border-radius:12px;padding:16px 18px;font-size:.95rem;}
.formulier-melding.aan{display:block;}
.formulier-melding.ok{background:rgba(79,190,148,.1);border:1px solid rgba(79,190,148,.35);color:#1F6E58;}
.formulier-melding.err{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.3);color:#8E2A1E;}
.formulier-noot{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--inkt-45);text-align:center;}
:where(.sectie--donker,.hero) .formulier-noot{color:var(--ice-45);}

/* ============================================================
   NAVIGATIE - verandert bij scrollen
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s,height .3s var(--ease);}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,29,51,.0);
  backdrop-filter:blur(0px);transition:background .35s,backdrop-filter .35s;
}
.nav--gescrold{height:calc(var(--nav-h) - 12px);border-color:var(--lijn-donker);}
.nav--gescrold::before{background:rgba(11,29,51,.86);backdrop-filter:blur(16px);}
.nav-in{max-width:var(--container);margin:0 auto;padding:0 24px;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-kop);font-weight:700;
  font-size:1.15rem;color:var(--ice);letter-spacing:-.01em;}
.nav-logo img{height:30px;width:auto;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice-70);padding:10px 14px;border-radius:7px;transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--ice);background:var(--surface-donker);}
.nav-links a.actief{color:var(--blue-2);background:var(--surface-donker);}
.nav-cta{margin-left:8px;}
.nav-burger{display:none;background:none;border:1px solid var(--lijn-donker);border-radius:8px;width:44px;height:44px;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--ice);transition:transform .25s var(--ease),opacity .2s;}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-mobiel{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:99;
  background:var(--navy);overflow-y:auto;}
.nav-mobiel.open{display:block;}
.nav-mobiel .container{padding-top:24px;padding-bottom:40px;display:flex;flex-direction:column;}
.nav-mobiel a{display:block;padding:16px 0;font-family:var(--font-kop);font-weight:600;font-size:1.2rem;
  color:var(--ice);border-bottom:1px solid var(--lijn-donker);}
.nav-mobiel .knop{margin-top:24px;width:100%;}
@media(max-width:960px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy);color:var(--ice-70);padding:clamp(64px,7vw,96px) 0 40px;position:relative;}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(32px,4vw,56px);padding-bottom:48px;
  border-bottom:1px solid var(--lijn-donker);}
@media(max-width:860px){.footer-top{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-merk .nav-logo{margin-bottom:14px;}
.footer-merk p{color:var(--ice-45);max-width:34ch;}
.footer-kolom h3,.footer-kolom h4{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ice-45);margin-bottom:16px;}
.footer-kolom ul{display:flex;flex-direction:column;gap:11px;}
.footer-kolom a{color:var(--ice-70);font-size:.95rem;transition:color .2s;}
.footer-kolom a:hover{color:var(--blue-2);}
.footer-onder{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;}
.footer-onder p{color:var(--ice-45);font-size:.85rem;}
.footer-social{display:flex;gap:14px;}
.footer-social a{width:38px;height:38px;border-radius:9px;border:1px solid var(--lijn-donker);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;color:var(--ice-70);}
.footer-social a:hover{border-color:var(--blue-2);color:var(--blue-2);}

/* ============================================================
   REDUCED MOTION - animaties gaan uit, onthullingen zijn direct zichtbaar
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .onthul,.onthul--groeien,.onthul--links{opacity:1;transform:none;transition:none;}
  .kaart,.knop,.prijs-kaart{transition:none;}
  [data-parallax]{transform:none!important;}
}

/* ============================================================
   RESPONSIVE - basis vanaf 360px
   ============================================================ */
@media(max-width:480px){
  body{font-size:16.5px;}
  .knop{padding:14px 22px;font-size:.74rem;}
  .sectie{padding:56px 0;}
  .hero{padding-top:calc(var(--nav-h) + 40px);}
}

/* ---- Navigatieknop, gecorrigeerd 31-08-2026 ----
   De knop stond wit-op-wit: de navigatiebalk zet linkkleur op --ice (licht,
   want de balk is donker), en dat won van .knop--secundair, die een witte
   achtergrond meebracht. Gemeten contrastratio was 1,04 waar 4,5 het minimum
   is - de tekst "Gratis scan" was praktisch onzichtbaar.
   Dit is de belangrijkste knop van de site, dus hij krijgt nu het merkblauw
   met donkere tekst: hoog contrast en meteen opvallend. */
.nav-cta.knop--secundair,
.nav-cta.knop--secundair:link,
.nav-cta.knop--secundair:visited {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--navy);
  font-weight: 600;
}
.nav-cta.knop--secundair:hover,
.nav-cta.knop--secundair:focus-visible {
  background: var(--blue-2);
  border-color: var(--blue-2);
  color: var(--navy);
}

/* ---- Onzichtbare tekst op donkere secties, gecorrigeerd 31-08-2026 ----
   Gemeten contrastratio was 1,00: donkerblauwe tekst op een donkerblauwe
   achtergrond. De correctie voor donkere secties bestond al, maar verloor:

     p.lead, .lead                        -> specificiteit 0,1,1
     :where(.sectie--donker,.hero) .lead  -> specificiteit 0,1,0

   :where() telt niet mee voor specificiteit, dus de eerste regel won en de
   introtekst onder elke kop op een donkere sectie was onleesbaar. Het leek
   op lege ruimte in de pagina, maar er stond gewoon tekst.
   Hieronder dezelfde regel met het element erbij, zodat hij wel wint. */
.sectie--donker p.lead,
.hero p.lead,
.sectie--donker .lead,
.hero .lead {
  color: var(--ice-70);
}

/* ---- Logo en footer, gecorrigeerd 01-09-2026 ----

   LOGO: het woordmerk viel weg tegen de donkere balk. Gemeten vulling was
   rgb(0,0,0) - de elementen in de SVG hebben geen eigen fill en vallen dus
   terug op de standaard, en die is zwart. Zwart op navy #0B1D33 is praktisch
   onzichtbaar. Omdat fill in SVG een erfelijke eigenschap is, volstaat het om
   hem op het svg-element te zetten: de kinderen zonder eigen fill erven mee,
   en het element met het kleurverloop (fill="url(#lg-nav)") houdt zijn eigen
   vulling. */
.nav-logo svg,
.footer-merk .nav-logo svg {
  fill: var(--ice);
}
.nav-logo:hover svg { fill: #fff; }

/* FOOTER: "Regio Overijssel · Deventer" stond groter dan de rest. De andere
   regels zijn links en krijgen 15,2px van de link-stijl; deze regel is platte
   tekst in een <li> en erfde het grotere basisformaat van de footer. */
footer li,
footer li a {
  font-size: .95rem;
  line-height: 1.7;
}

/* De uitgelichte prijskaart is een donker eiland binnen een lichte sectie, dus de
   :where(.sectie--donker,.hero)-regels raken hem niet. Zonder deze twee regels staat
   de knop navy op navy (contrast 1.0) en is hij onzichtbaar. Gemeten, niet gegokt. */
.prijs-kaart--uitgelicht .knop--primair{background:var(--blue);color:var(--navy);box-shadow:var(--gloed-blauw);}
.prijs-kaart--uitgelicht .knop--primair:hover{background:var(--blue-2);}
.prijs-kaart--uitgelicht .badge--groen{color:var(--groen);border-color:rgba(79,190,148,.4);background:rgba(79,190,148,.12);}

/* Voettekstlinks stonden 18px hoog zonder padding: te krap voor een vinger. */
.footer-top a{display:inline-block;padding:6px 0;}

/* Stappenspoor: vervangt het kruimelpad op de vier aanbodpagina's. Een kruimelpad
   zei alleen "Home / Paginanaam"; dit laat zien waar je in de klantreis bent en
   laat je naar elke andere stap springen. */
.stapspoor{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:20px;
  font-size:13px;font-family:var(--font-mono);letter-spacing:.02em}
.stapspoor .stap{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border-radius:999px;text-decoration:none;border:1px solid transparent;
  min-height:36px;transition:background .16s,border-color .16s,color .16s}
.stapspoor .stap b{display:inline-grid;place-items:center;width:19px;height:19px;
  border-radius:50%;font-size:11px;font-weight:700}
/* op donkere secties */
.sectie--donker .stapspoor .stap,.hero .stapspoor .stap{color:var(--ice-70);
  background:rgba(234,246,252,.05);border-color:rgba(234,246,252,.10)}
.sectie--donker .stapspoor .stap b,.hero .stapspoor .stap b{
  background:rgba(234,246,252,.12);color:var(--ice)}
.sectie--donker .stapspoor a.stap:hover,.hero .stapspoor a.stap:hover{
  color:var(--ice);background:rgba(234,246,252,.10);border-color:rgba(58,185,228,.45)}
.sectie--donker .stapspoor .stap--hier,.hero .stapspoor .stap--hier{
  color:var(--navy);background:var(--blue);border-color:var(--blue);font-weight:600}
.sectie--donker .stapspoor .stap--hier b,.hero .stapspoor .stap--hier b{
  background:rgba(11,29,51,.22);color:var(--navy)}
/* op lichte secties */
.sectie:not(.sectie--donker):not(.hero) .stapspoor .stap{color:var(--inkt-70);
  background:rgba(11,29,51,.04);border-color:var(--lijn)}
.sectie:not(.sectie--donker):not(.hero) .stapspoor .stap b{
  background:rgba(11,29,51,.10);color:var(--inkt)}
.sectie:not(.sectie--donker):not(.hero) .stapspoor .stap--hier{
  color:#fff;background:var(--navy);border-color:var(--navy);font-weight:600}
.sectie:not(.sectie--donker):not(.hero) .stapspoor .stap--hier b{
  background:rgba(255,255,255,.22);color:#fff}
@media (max-width:480px){.stapspoor{font-size:12px}.stapspoor .stap{padding:6px 10px}}

/* Het logo was 60x28 pixels waarin het woordmerk maar 4 pixels hoog werd: onleesbaar.
   De SVG bevatte bol en naam boven elkaar, samengeperst in de navigatiehoogte.
   Nu: de viewBox toont alleen de bol, en de naam staat ernaast als echte tekst.
   Zo schaalt hij mee, blijft hij scherp en is hij op elk scherm leesbaar. */
.nav-logo .veld-tekst{display:none;}
.logo-naam{
  font-family:var(--font-kop);font-weight:700;font-size:20px;letter-spacing:-.015em;
  line-height:1;white-space:nowrap;color:var(--ice);
}
.sectie:not(.sectie--donker) .logo-naam,
.nav--gescrold .logo-naam{color:var(--ice);}
.nav-logo:hover .logo-naam{color:var(--blue-2);}
.footer-merk .logo-naam{font-size:19px;}
@media (max-width:560px){
  .logo-naam{font-size:17px;}
  .nav-logo .logomark{height:30px !important;width:30px !important;}
}

/* ============================================================
   AANRAAKVLAKKEN 44x44 - toegevoegd 03-09-2026
   ------------------------------------------------------------
   Gemeten op alle 18 pagina's, op 375px en op 1280px breed:
   nav-logo 30 en 34px hoog, nav-links 39px, de knop in de balk 42px,
   footerlinks 38px, stappen in het stapspoor 36 en 37px, kruimelpad
   20 en 22px, knop--subtiel 41px. De kwaliteitseisen noemen 44 bij 44
   een harde eis, dus dit zijn echte afwijkingen.

   Aanpak: alleen de hoogte groeit, de breedte blijft de tekstbreedte.
   Zo verschuift de bladspiegel niet. Waar een lijst daardoor langer
   zou worden is de tussenruimte evenveel kleiner gemaakt, dus de
   footer houdt zijn hoogte.

   Uitzondering, bewust: een link midden in een lopende zin blijft zo
   hoog als de regel. Oprekken zou de regelafstand van de tekst
   eromheen breken. WCAG 2.5.8 zondert dat geval uit onder "inline".
   Het gaat om twee mailto-links: contact.html regel 173 en scan.html
   regel 228. De losstaande contactlinks hebben wel een vergroot vlak
   gekregen, via .tik.
   ============================================================ */

/* Logo in de balk en in de footer: 30px hoog, wordt 44 */
.nav-logo{min-height:44px;min-width:44px;}

/* Hoofdnavigatie op desktop: 39px hoog, wordt 44. De balk is 76px
   (64px na scrollen), dus dit past zonder de balk te verhogen. */
.nav-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;}
.nav-cta.knop{min-height:44px;}

/* Footerlinks: 38 wordt 44 hoog, tussenruimte 11 wordt 5.
   Rasterafstand was 38+11=49, wordt 44+5=49. Kolomhoogte gelijk. */
.footer-top a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;}
.footer-kolom ul{gap:5px;}

/* Stappenspoor op de aanbodpagina's: 36 wordt 44 hoog */
.stapspoor .stap{min-height:44px;min-width:44px;}

/* Kruimelpad op de negen blogpagina's. Had helemaal geen opmaak:
   class="crumbs" bestond in de HTML maar nergens in de CSS, dus
   stond er "Home/Blog" aan elkaar geplakt in de lopende tekstkleur.
   Opgemaakt in de stijl van het stapspoor, met de donkere sectie als
   aparte regel (niet via :where, dat heeft specificiteit nul en werd
   in dit project al twee keer stilletjes overruled). */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-left:-9px;
  margin-bottom:18px;font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 9px;
  border-radius:7px;min-width:44px;color:var(--inkt-70);transition:color .2s,background .2s;}
.crumbs a:hover{color:var(--inkt);background:rgba(11,29,51,.06);}
.crumbs .sep,.crumbs>span:last-child{display:inline-flex;align-items:center;
  min-height:44px;padding:0 3px;color:var(--inkt-45);}
.crumbs>span:last-child{padding:0 9px;color:var(--inkt);}
.sectie--donker .crumbs a,.hero .crumbs a{color:var(--ice-70);}
.sectie--donker .crumbs a:hover,.hero .crumbs a:hover{color:var(--ice);background:var(--surface-donker);}
.sectie--donker .crumbs .sep,.hero .crumbs .sep{color:var(--ice-45);}
.sectie--donker .crumbs>span:last-child,.hero .crumbs>span:last-child{color:var(--ice);}

/* Tekstknop: 41 wordt 44 hoog */
.knop--subtiel{min-height:44px;min-width:44px;}

/* Losstaande contactlink: een link die in zijn eentje een regel vult
   is een knop, geen zin. Krijgt daarom wel een vlak van 44 hoog. */
.tik{display:inline-flex;align-items:center;min-height:44px;min-width:44px;}

/* ---- Knoplabel mocht niet afbreken, 03-09-2026 ----
   Gevonden bij het nameten van de aanraakvlakken, staat er los van.
   .knop stond op white-space:nowrap. Op beheer.html is de knop
   "Start Beheer voor een bestaande automatisering" daardoor 423px breed
   in een vak van 297px, op een scherm van 375px: 87px buiten beeld.
   De overflow-x:hidden van de sectie verborg dat en hield scrollWidth
   op 375, dus de gebruikelijke controle zag het niet. Gemeten met
   getBoundingClientRect, niet met scrollWidth.
   Een knop die past blijft op een regel; alleen een knop die niet past
   breekt nu af in plaats van uit beeld te lopen. */
.knop{white-space:normal;text-align:center;max-width:100%;}

/* ---- Eerste sectie liep onder de vaste balk, 03-09-2026 ----
   Gevonden bij het nameten van de aanraakvlakken, staat er los van.
   De balk is 76px hoog en staat op position:fixed. De eerste sectie van
   een pagina zonder hero heeft padding-top:56px, dus de bovenste 20px
   inhoud stond achter de balk. Gemeten op 375px:
     prijzen.html  kicker top 65, hoogte 20, balk tot 76
     scan.html     kicker top 65, hoogte 20
     de-bouw.html  stapspoor top 56, dus 20px eronder
     blog-*.html   kruimelpad top 20, hoogte 90, eerste regel volledig eronder
   Pagina's die met een .hero beginnen regelden dit al zelf, die raakt
   deze regel niet. */
main > .sectie:first-child{padding-top:calc(var(--nav-h) + clamp(24px,3vw,40px));}

/* Achtergrondscene in de kopband van de subpagina's. De homepage heeft een eigen vak
   naast de tekst; hier is daar geen ruimte voor, dus loopt het netwerk achter de tekst
   langs. Rustig gehouden (data-sterkte="zacht") zodat de tekst leesbaar blijft.
   Geen overflow:hidden op de sectie: dat knipte eerder koppen af. */
.sectie--donker.sectie--compact{position:relative;}
.band-scene{position:absolute;inset:0;z-index:0;pointer-events:none;}
.band-scene canvas{position:absolute;inset:0;width:100%!important;height:100%!important;}
.sectie--donker.sectie--compact > .container{position:relative;z-index:1;}
/* De mobiele regel hieronder mikte op .hero-visual, een klasse die in de markup niet
   bestaat. Daardoor hield de scene op de homepage onder 980px zijn volle hoogte. */
/* Geen order:-1 hier. Dat zette het decoratieve vlak op mobiel BOVEN de kop,
   waardoor de h1 pas rond 633px van een scherm van 812px begon en dus grotendeels
   buiten beeld viel. Kop eerst, plaatje daarna. Wel lager, anders duwt hij de
   knoppen van het scherm af. */
@media(max-width:980px){.scene-visual{height:min(38svh,300px);}}
@media(prefers-reduced-motion:reduce){.band-scene{display:none;}}

/* kop op smalle schermen */
/* Bij 375px is er 297px voor de kop, en "Automatisering" is bij 44,75px maar liefst
   333px breed. Daardoor brak hij middenin het woord af: "Automatise-ring die je be-drijf".
   Gemeten: vanaf ongeveer 39,75px past het langste woord wel. 38px geeft marge.
   Alleen op telefoons; de bureaubladmaten blijven ongewijzigd. */
@media(max-width:430px){
  .hero h1,h1{font-size:38px;line-height:1.08;}
  /* Mobiele leesbaarheid (19-09-2026): geen tekst onder 12px. Gemeten: kickers 11,8px, stap-chips
     10,9px, kruimelpad 11,5px, knoptekst 11,8px. Mono-labels mogen klein ogen, niet onleesbaar zijn. */
  .kicker{font-size:12px;letter-spacing:.12em;}
  .knop{font-size:12.5px;}
  .stapspoor{font-size:12.5px;}
  .kruimelpad,.kruimelpad a,.breadcrumb,.breadcrumb a,nav[aria-label="Kruimelpad"] a,nav[aria-label="Kruimelpad"] span{font-size:12.5px;}
  .voet h3,footer h3,.footer-kolom h3{font-size:12px;}
  .prijs-badge,.badge{font-size:12px;}
  .prijs-kaart .kicker,.kaart .kicker,.stap-chip,.chip{font-size:12px;}
}

/* Drie feiten die al op de site stonden, maar pas rond 3500px zichtbaar werden op een
   pagina van 6214px. Alle onderzochte voorbeelden tonen vertrouwen in de hero; die hebben
   reviews en klantaantallen. Die heeft ModernizeNow niet, dus staan hier alleen dingen die
   verifieerbaar kloppen. Nadrukkelijk niet "data blijft in Nederland": de server staat in Wenen. */
.hero-vertrouwen{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;
  font-size:14px;line-height:1.45;color:var(--ice-70);
}
.hero-vertrouwen span{display:inline-flex;align-items:center;gap:8px;}
.hero-vertrouwen span::before{
  content:"";width:15px;height:15px;flex:0 0 auto;background:var(--groen);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5 6.5 12 2.5 8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5 6.5 12 2.5 8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media(max-width:560px){.hero-vertrouwen{gap:7px 14px;font-size:13.5px;margin-top:22px;}}

/* Tussentijdse CTA onder een uitlegvisual (werkwijze, de-bouw), 16-09-2026 */
.midden-cta{margin-top:clamp(28px,3.5vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;text-align:center;}
.midden-cta p{margin:0;color:var(--inkt-70);}
:where(.sectie--donker) .midden-cta p{color:var(--ice-70);}

/* Hero-kop in de tweekoloms-hero (961-1320px): de kolom is daar smal genoeg dat "Automatisering"
   bij de gewone kopmaat midden in het woord afbrak ("Automatiserin / g"). 16-09-2026. */
@media(min-width:961px) and (max-width:1320px){.hero-tekst h1{font-size:min(clamp(2.75rem,3.4vw + 2rem,5.4rem),5.1vw);}}
/* Vier kaarten naast elkaar zijn tussen 981 en 1320px zo smal dat een kop als "Automatiseringsscan"
   midden in het woord afbrak. Daar dus twee bij twee. 16-09-2026. */
@media(min-width:981px) and (max-width:1320px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ============================================================
   TEKSTLINK EN TEKSTKNOP - 21-09-2026
   ------------------------------------------------------------
   a{color:inherit;text-decoration:none} (hierboven) maakt een link in
   lopende tekst onzichtbaar als link. contact.html gebruikte
   class="tekstlink" voor de drie links onder "Privacy en voorwaarden",
   maar die klasse bestond alleen inline in scan.html en
   voor-boekhouders.html, dus op contact.html stonden ze als gewone
   tekst. Nu hier, een keer; de inline kopieen zijn weg.
   Contrast berekend: #0D789B op ijs 4,57 en op wit 5,03; #8AD6EF op
   navy 10,46 (norm 4,5). Donkere secties niet via :where, dat heeft
   specificiteit nul en is in dit project al twee keer overruled.
   ============================================================ */
.tekstlink{color:#0D789B;font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.tekstlink:hover{color:var(--navy);}
.sectie--donker .tekstlink,.hero .tekstlink{color:#8AD6EF;}
.sectie--donker .tekstlink:hover,.hero .tekstlink:hover{color:var(--ice);}

/* De tekstknop (.knop--subtiel) is een inline <a>, dus de min-height:44px
   uit de aanraakvlakken-sectie deed niets: gemeten 41px op contact.html,
   index.html en scan.html. Een inline-flex neemt de hoogte wel aan. Hij
   staat altijd alleen in zijn <p>; de ene link midden in een zin
   (index.html, "prijzenpagina") is een .tekstlink geworden, want een
   vlak van 44px rekt een tekstregel op. */
.knop--subtiel{display:inline-flex;align-items:center;}