/* ==========================================================================
   MEN Techniek — stylesheet
   Kleurstelling ontleend aan het logo: diep blauwzwart, chroom en de
   elektrisch blauwe lichtlijn. Geen hi-vis geel meer.
   ========================================================================== */

/* --- Lettertypes (zelf gehost, geen Google Fonts CDN i.v.m. AVG) --------- */
@font-face{font-family:Chivo;src:url(../fonts/chivo-latin-700-normal.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Chivo;src:url(../fonts/chivo-latin-900-normal.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-400-normal.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-500-normal.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-600-normal.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* --- Ontwerptokens -------------------------------------------------------
   Uitgangspunt: zwarte overalls met grijze belettering. De donkerten zijn
   daarom neutraal zwart-grafiet, zonder blauwe zweem, en alle letters en
   labels zijn staalgrijs.

   Blauw komt nog op precies één plek terug: de lichtlijn uit het logo.
   Doordat het de enige kleur op de pagina is, valt hij juist op.
   -------------------------------------------------------------------------- */
:root{
  /* donkerten, van diep naar minder diep — neutraal, geen blauwzweem */
  --ink:#060708;
  --nacht:#0B0C0E;
  --paneel:#111315;
  --kaart:#17191C;
  --kaart-op:#1E2124;

  /* lijnen */
  --lijn:#26292D;
  --lijn-fel:#383C42;

  /* geborsteld staal: labels, opsommingen, accenten */
  --staal:#9AA1A8;
  --staal-licht:#EDEFF1;
  --staal-diep:#5A6167;

  /* chroom en tekst */
  --chroom:#E6E9EB;
  --tekst:#C3C8CC;
  --gedempt:#8B9197;
  --gedempt-diep:#63686D;

  /* de lichtlijn uit het logo — de enige kleur op de pagina */
  --lichtlijn:#3D9BFF;
  --lichtlijn-heet:#BFE0FF;

  --display:Chivo,"Arial Narrow",Helvetica,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
  --sectie:clamp(4rem,9vw,7rem);
  --radius:4px;

  /* de gloed die overal terugkomt: koel wit, niet blauw */
  --gloed:0 0 32px -8px rgba(230,233,235,.40);

  /* Waarden die in het lichte thema omdraaien. Door ze hier als token te
     zetten hoeft alleen dit blok te wisselen, niet de honderd regels eronder. */
  --glans:var(--glans);      /* subtiele oplichting op vlakken   */
  --glans-sterk:var(--glans-sterk);
  --schaduw:var(--schaduw);
  --knop-tekst:#080D14;               /* tekst op een chromen knop        */
  --veld:var(--nacht);                /* achtergrond van invoervelden     */
  --keurmerk-vlak:rgba(240,243,246,.82);
}

/* ==========================================================================
   LICHT THEMA
   Alleen de kleuren wisselen; alle vormen, maten en afstanden blijven gelijk.
   Wordt gezet door de themaknop, of volgt de voorkeur van het apparaat.
   ========================================================================== */
:root[data-thema="licht"]{
  --ink:#FFFFFF;
  --nacht:#F4F6F8;
  --paneel:#EAEEF2;
  --kaart:#FFFFFF;
  --kaart-op:#F7F9FB;

  --lijn:#DCE2E8;
  --lijn-fel:#BCC5CE;

  --staal:#5A626A;
  --staal-licht:#2B3138;
  --staal-diep:#8A939C;

  --chroom:#141A20;
  --tekst:#3A424A;
  --gedempt:#66707A;
  --gedempt-diep:#8A939C;

  --lichtlijn:#1C6FCC;
  --lichtlijn-heet:#5AA6F0;

  --gloed:0 0 28px -10px rgba(20,26,32,.35);
  --glans:rgba(0,0,0,.03);
  --glans-sterk:rgba(0,0,0,.06);
  --schaduw:rgba(20,26,32,.18);
  --knop-tekst:#0A0F14;
  --veld:#FFFFFF;
  --keurmerk-vlak:transparent;
}

/* --- Basis --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--nacht)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--nacht);color:var(--tekst);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,picture,svg{max-width:100%;display:block}
img{height:auto}
.hero__foto picture,.dienst__foto picture,.project__foto picture{width:100%;height:100%}
/* Links moeten helderder zijn dan de lopende tekst, anders lijken ze juist
   minder belangrijk. Vandaar wit-heet in plaats van staalgrijs. */
a{color:var(--staal-licht);text-underline-offset:.18em}
a:hover{color:#fff}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;line-height:1.05;margin:0;
  letter-spacing:-.012em;text-wrap:balance;color:var(--chroom)}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--staal);outline-offset:3px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.visueel-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skiplink{position:absolute;left:-9999px;background:var(--staal);color:#04070B;padding:.7rem 1.2rem;z-index:99;font-weight:600}
.skiplink:focus{left:1rem;top:1rem}

/* Chromen koppen: zelfde verloop als de letters in het logo.
   Belangrijk is de volgorde. Eerst een gewone lichte kleur, zodat een kop
   altijd leesbaar is. Pas daarna, en alleen in browsers die het verloop
   werkelijk aankunnen, wordt de tekst doorzichtig gemaakt zodat het chroom
   erdoorheen komt. Andersom liep het mis: browsers die het verloop niet
   tekenden hielden dan een onzichtbare of zwarte kop over. */
.chroom,h1,h2{
  color:var(--chroom);
  -webkit-text-fill-color:var(--chroom);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .chroom,h1,h2{
    background-image:linear-gradient(176deg,#FFFFFF 4%,#C3D2DF 34%,#7C8EA0 52%,#E8F0F7 68%,#AFC0CF 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}

/* Nog in te vullen tekst — opvallend, ook op donker */
.tbd{background:rgba(255,196,0,.16);color:#FFD97A;border-bottom:2px dotted #C79A20;
  padding:0 .25em;font-style:normal;border-radius:2px}

/* --- De lichtlijn, het handelsmerk van dit ontwerp ---------------------- */
.lichtlijn{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,rgba(61,155,255,.16) 12%,
             var(--staal) 48%,rgba(255,255,255,.95) 55%,rgba(214,230,244,0.15) 82%,transparent);
  box-shadow:0 0 14px rgba(61,155,255,.55);
}

/* --- Labels -------------------------------------------------------------- */
.label{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--staal);
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
}
.label::after{content:"";flex:1;height:1px;max-width:5rem;
  background:linear-gradient(90deg,var(--staal-diep),transparent)}
.label--licht{color:var(--staal-licht)}

/* --- Knoppen ------------------------------------------------------------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-weight:600;font-size:.9375rem;
  padding:.85rem 1.5rem;border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;cursor:pointer;position:relative;
  transition:background .18s,color .18s,border-color .18s,box-shadow .25s,transform .18s,filter .18s;
}

/* Chroom: hetzelfde verloop als de letters in het logo, met een lichte
   bovenrand en een donkere onderrand zodat het als metaal leest. */
.knop--primair,.knop--bel{
  background:linear-gradient(180deg,#FBFDFF 0%,#DCE6EF 26%,#AEBECD 48%,
             #8B9DAD 52%,#C7D4E0 74%,#9EAEBD 100%);
  color:var(--knop-tekst);
  border-color:#6F8090;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(0,0,0,.30),
             0 2px 10px -4px rgba(0,0,0,.8);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
/* De algemene linkkleur (a:hover) heeft een hogere specificiteit dan een
   losse klasse. Daarom staat de tekstkleur hier bij élke toestand expliciet,
   anders wordt het opschrift bij aanwijzen blauw en onleesbaar. */
.knop--primair:hover,.knop--bel:hover,
.knop--primair:focus,.knop--bel:focus{
  color:var(--knop-tekst);
  filter:brightness(1.06);
  border-color:var(--staal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),
             inset 0 -1px 0 rgba(0,0,0,.28),
             0 0 26px -6px rgba(214,230,244,0.56);
}
.knop--primair:active,.knop--bel:active{filter:brightness(.94)}
.knop--primair svg,.knop--bel svg{opacity:.85}

/* Secundair: alleen gebruikt náást een chromen knop, zodat duidelijk is
   welke van de twee de hoofdactie is. Staat een knop alleen, dan is hij chroom. */
.knop--rand{
  background:linear-gradient(180deg,var(--glans-sterk),var(--glans));
  color:var(--chroom);border-color:var(--lijn-fel);
  box-shadow:inset 0 1px 0 var(--glans-sterk);
}
.knop--rand:hover,.knop--rand:focus{border-color:var(--staal);color:#fff;
  box-shadow:inset 0 1px 0 var(--glans-sterk),var(--gloed)}


/* --- Topbar -------------------------------------------------------------- */
.topbar{background:var(--ink);color:var(--gedempt);font-family:var(--mono);font-size:.75rem;
  border-bottom:1px solid var(--glans)}
.topbar__in{display:flex;align-items:center;gap:.75rem;min-height:38px;flex-wrap:wrap}
.topbar a{color:var(--gedempt);text-decoration:none}
.topbar a:hover{color:var(--staal-licht)}
.topbar__sep{color:var(--gedempt-diep)}
.topbar__status{display:flex;align-items:center;gap:.5rem;color:var(--chroom)}
.topbar__lang{letter-spacing:.1em;border:1px solid var(--lijn);padding:.1rem .45rem;border-radius:2px}

/* Sociale iconen rechtsboven */
.sociaal{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.sociaal__link{
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  color:var(--gedempt);border-radius:var(--radius);
  transition:color .2s,background-color .2s,box-shadow .25s;
}
.sociaal__link:hover{color:#fff;background:rgba(214,230,244,0.11);
  box-shadow:0 0 16px -4px rgba(214,230,244,0.56)}
.sociaal__link svg{display:block}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lichtlijn);
  box-shadow:0 0 8px var(--staal);animation:puls 2.6s ease-out infinite}
@keyframes puls{
  0%{box-shadow:0 0 8px var(--lichtlijn),0 0 0 0 rgba(61,155,255,.50)}
  70%{box-shadow:0 0 8px var(--lichtlijn),0 0 0 7px rgba(61,155,255,0)}
  100%{box-shadow:0 0 8px var(--lichtlijn),0 0 0 0 rgba(61,155,255,0)}
}

/* --- Header -------------------------------------------------------------- */
.kop{background:var(--ink);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:40;
  transition:box-shadow .3s ease}
.kop__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:76px;
  transition:min-height .3s cubic-bezier(.4,0,.2,1)}
.kop__merk{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.kop.is-gekrompen{box-shadow:0 10px 34px -20px rgba(0,0,0,.95)}
.kop.is-gekrompen .kop__in{min-height:62px}
/* De menu-items verdelen zich over de ruimte naast het logo. Zonder dit
   klonterde het menu tegen de rechterrand en bleef er een leeg gat naast
   het logo staan. */
.kop__nav{display:flex;align-items:center;gap:1.5rem;flex:1;margin-left:clamp(2rem,5vw,4rem)}
.kop__nav ul{display:flex;list-style:none;margin:0;padding:0;
  width:100%;justify-content:space-between;gap:1rem}
.kop__nav ul a{
  font-size:.9375rem;font-weight:500;color:var(--tekst);text-decoration:none;
  padding:.4rem 0;border-bottom:2px solid transparent;display:block;white-space:nowrap;position:relative;
}
.kop__nav ul a:hover{color:#fff}
.kop__nav ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--staal);
  box-shadow:0 0 10px var(--staal);
  transform:scaleX(0);transform-origin:right;transition:transform .28s cubic-bezier(.5,0,.2,1);
}
.kop__nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.kop__nav ul a[aria-current=page]{color:#fff}
.kop__nav ul a[aria-current=page]::after{transform:scaleX(1)}
.knop--bel{white-space:nowrap;padding:.7rem 1.1rem}

/* Het telefoonnummer in de bovenbalk: geen knop, wel het opvallendste
   element van de balk. Chroomkleurig tegen het grijs van de rest. */
/* Het aanraakvlak moet minstens 44 pixels hoog zijn, anders is het op een
   telefoon lastig raak te tikken. De extra ruimte zit in de padding en niet
   in de tekst, zodat de balk optisch even hoog blijft. */
.topbar .topbar__bel{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  color:var(--chroom);font-weight:500;letter-spacing:.02em;
  padding:.15rem 0;border-bottom:1px solid transparent;position:relative;
}
.topbar .topbar__bel::after{
  content:"";position:absolute;left:-.4rem;right:-.4rem;top:50%;
  height:44px;transform:translateY(-50%);
}
.topbar .topbar__bel svg{opacity:.6}
.topbar .topbar__bel:hover{color:#fff;border-bottom-color:var(--staal)}
.topbar .topbar__bel:hover svg{opacity:1}
.kop__toggle{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.kop__burger,.kop__burger::before,.kop__burger::after{display:block;width:24px;height:2px;
  background:var(--chroom);content:"";transition:transform .2s,opacity .2s}
.kop__burger::before{transform:translateY(-7px)}
.kop__burger::after{transform:translateY(5px)}
.kop__toggle[aria-expanded=true] .kop__burger{background:transparent}
.kop__toggle[aria-expanded=true] .kop__burger::before{transform:rotate(45deg)}
.kop__toggle[aria-expanded=true] .kop__burger::after{transform:translateY(-2px) rotate(-45deg)}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:var(--chroom);overflow:hidden;isolation:isolate}
.hero__foto{position:absolute;inset:0;z-index:-2}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:center 45%;transform:scaleX(-1)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(5,8,13,.96) 0%,rgba(5,8,13,.90) 38%,rgba(8,14,22,.48) 66%,rgba(8,14,22,.22) 100%),
    linear-gradient(0deg,rgba(5,8,13,.75) 0%,rgba(5,8,13,0) 48%);
}
/* lichtlijn onderaan de hero, net als in het logo */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(61,155,255,.20) 10%,var(--lichtlijn) 45%,
             rgba(255,255,255,.92) 52%,rgba(214,230,244,0.19) 80%,transparent);
  box-shadow:0 0 16px rgba(61,155,255,.55);
}
.hero__in{padding-block:clamp(3.5rem,9vw,6.5rem);max-width:48rem}
.hero__oog{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--staal-licht);margin:0 0 1.4rem;display:flex;align-items:center;gap:.7rem;
}
.hero__oog::before{content:"";width:2rem;height:2px;background:var(--lichtlijn);
  box-shadow:0 0 10px rgba(61,155,255,.8)}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.022em;text-wrap:pretty}
.hero h1 em{
  font-style:normal;
  color:var(--staal-licht);
  -webkit-text-fill-color:var(--staal-licht);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em{
    background-image:linear-gradient(176deg,#FFFFFF 4%,#F2F5F7 30%,#AEB6BD 54%,#FBFDFE 74%,#D2D8DD 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}
.hero__tekst{font-size:clamp(1.0625rem,2vw,1.25rem);color:var(--tekst);margin:1.5rem 0 2.25rem;max-width:36rem}
.hero__acties{display:flex;flex-wrap:wrap;gap:.85rem}
.hero__voet{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.75rem;padding-top:1.5rem;
  border-top:1px solid var(--lijn);font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;color:var(--gedempt);text-transform:uppercase;
}
.hero__voet span{display:flex;align-items:center;gap:.5rem}
.hero__voet span::before{content:"";width:5px;height:5px;background:var(--staal);
  transform:rotate(45deg);box-shadow:0 0 8px var(--staal)}

/* --- Storingsbalk -------------------------------------------------------- */
.storing{
  background:linear-gradient(180deg,#0C1622,#070C14);
  border-block:1px solid var(--lijn);position:relative;overflow:hidden;
}
.storing::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--lichtlijn) 40%,var(--lichtlijn-heet) 50%,var(--lichtlijn) 60%,transparent);
  box-shadow:0 0 18px rgba(61,155,255,.55);
}
.storing__in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding-block:1.35rem;
  position:relative;z-index:1}
.storing__tekst{font-family:var(--display);font-weight:700;font-size:clamp(1rem,2vw,1.25rem);
  margin:0;flex:1 1 22rem;color:var(--chroom)}
.storing__nr{
  font-family:var(--mono);font-weight:500;font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--staal-licht);text-decoration:none;display:flex;align-items:center;gap:.6rem;
  border:1.5px solid var(--staal-diep);padding:.45rem 1rem;border-radius:var(--radius);
  transition:background .2s,color .2s,box-shadow .25s,border-color .2s;
}
.storing__nr:hover{background:rgba(214,230,244,0.09);color:#fff;border-color:var(--staal);box-shadow:var(--gloed)}

/* --- Secties ------------------------------------------------------------- */
.sectie{padding-block:var(--sectie);position:relative}
.sectie--licht{background:var(--paneel)}
.sectie--wit{background:var(--nacht)}
.sectie--donker{background:var(--ink)}
/* fijne scheidingslijn tussen secties, uitdovend naar de randen */
.sectie + .sectie::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--lijn-fel),transparent);
}
.sectie__kop{max-width:44rem;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.sectie__kop h2{font-size:clamp(1.75rem,3.6vw,2.6rem)}
.sectie__kop p{margin-top:1rem;color:var(--gedempt);font-size:1.0625rem}

/* --- Diensten ------------------------------------------------------------ */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;list-style:none;margin:0;padding:0}
.dienst{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color .22s,transform .22s,box-shadow .28s,background-color .22s}
.dienst:hover{border-color:var(--staal-diep);background:var(--kaart-op);
  transform:translateY(-4px);box-shadow:0 18px 40px -26px #000,0 0 30px -14px rgba(214,230,244,0.34)}
.dienst__foto{aspect-ratio:3/2;overflow:hidden;background:var(--paneel);position:relative}
.dienst__foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,8,13,0) 45%,rgba(5,8,13,.6));pointer-events:none}
.dienst__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dienst__body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.dienst__body h3{font-size:1.1875rem;margin-bottom:.6rem;color:var(--chroom)}
.dienst__body p{color:var(--gedempt);font-size:.9375rem;margin-bottom:1.2rem}
.dienst__link{margin-top:auto;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--staal);text-decoration:none;display:flex;align-items:center;gap:.45rem}
.dienst__link::after{content:"→";transition:transform .2s}
.dienst:hover .dienst__link{color:var(--staal-licht)}
.dienst:hover .dienst__link::after{transform:translateX(4px)}
.dienst__link::before{content:"";position:absolute;inset:0}

/* --- Certificeringen: keurstempels -------------------------------------- */
.stempels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;list-style:none;margin:0;padding:0}
.stempel{
  border:1.5px solid var(--lijn-fel);border-radius:var(--radius);padding:1.15rem 1.25rem;
  background:linear-gradient(180deg,rgba(214,230,244,0.04),transparent);position:relative;
  transition:border-color .25s,box-shadow .28s,transform .25s;
}
.stempel::before{content:"";position:absolute;inset:4px;border:1px solid var(--glans);
  border-radius:2px;pointer-events:none}
.stempel:hover{border-color:var(--staal);transform:translateY(-3px);box-shadow:var(--gloed)}
.stempel__code{font-family:var(--mono);font-weight:500;font-size:1.0625rem;color:var(--staal-licht);
  letter-spacing:.04em;display:block;margin-bottom:.35rem}
.stempel:hover .stempel__code{color:#fff}
.stempel__oms{font-size:.8125rem;color:var(--gedempt);line-height:1.45;display:block}

/* --- Projecten ----------------------------------------------------------- */
.projecten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;list-style:none;margin:0;padding:0}
.project__foto{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--paneel);
  border:1px solid var(--lijn)}
.project__foto img{width:100%;height:100%;object-fit:cover}
.project__sector{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--staal);margin:1.15rem 0 .5rem;display:block}
.project h3{font-size:1.1875rem;margin-bottom:.55rem}
.project p{color:var(--gedempt);font-size:.9375rem;margin:0}

/* --- Over ons / capaciteit ---------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split__foto img{border-radius:var(--radius);width:100%;border:1px solid var(--lijn)}
.cijfers{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;margin:2rem 0 0;padding:0;list-style:none}
.cijfer{border-left:2px solid var(--staal);padding-left:1rem;
  box-shadow:-6px 0 18px -12px var(--staal);transition:box-shadow .25s}
.cijfer:hover{box-shadow:-6px 0 24px -8px var(--staal)}
.cijfer__getal{font-family:var(--display);font-weight:900;font-size:1.875rem;display:block;
  line-height:1.1;color:var(--chroom)}
.cijfer__oms{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gedempt);display:block;margin-top:.3rem}

/* --- Contactblok --------------------------------------------------------- */
.contact{
  background:linear-gradient(160deg,var(--kaart) 0%,var(--paneel) 100%);
  border:1px solid var(--lijn-fel);border-radius:var(--radius);position:relative;overflow:hidden;
  padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.3fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:center;
}
.contact::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--lichtlijn) 45%,var(--lichtlijn-heet) 52%,transparent);
  box-shadow:0 0 16px rgba(61,155,255,.55)}
.contact h2{font-size:clamp(1.6rem,3.2vw,2.25rem)}
.contact p{color:var(--gedempt);margin:1rem 0 0}
.contact__acties{display:flex;flex-direction:column;gap:.75rem}
.contact__acties .knop{width:100%}
.contact__hint{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gedempt-diep);text-align:center;margin:.35rem 0 0}

/* --- Footer -------------------------------------------------------------- */
.voet{background:var(--ink);color:var(--gedempt);font-size:.9375rem;border-top:1px solid var(--lijn)}
.voet__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;
  padding-block:clamp(2.75rem,6vw,4rem)}
.voet__pitch{max-width:26rem;line-height:1.6}
.voet__titel{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--staal-licht);margin:0 0 1.1rem}
.voet__lijst{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.voet a{color:var(--gedempt);text-decoration:none}
.voet a:hover{color:var(--staal-licht)}
.voet__adres,.voet__contact{margin:0 0 1rem;line-height:1.7}
.voet__balk{border-top:1px solid var(--lijn);font-size:.8125rem}
.voet__balk-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-block:1.25rem}
.voet__balk p{margin:0;max-width:52rem}
.voet__kvk{font-family:var(--mono);font-size:.75rem}

/* --- Paginakop (binnenpagina's) ------------------------------------------ */
.paginakop{background:var(--ink);padding-block:clamp(2.75rem,6vw,4.5rem);position:relative}
.paginakop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--lichtlijn) 42%,var(--lichtlijn-heet) 50%,transparent);
  box-shadow:0 0 14px rgba(61,155,255,.55)}
.paginakop h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1rem}
.paginakop__tekst{color:var(--gedempt);max-width:38rem;font-size:1.0625rem;margin:0}

/* --- Contactpagina ------------------------------------------------------- */
.contactpagina{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.contactpagina__formulier{background:var(--kaart);border:1px solid var(--lijn);
  border-radius:var(--radius);padding:clamp(1.5rem,3.5vw,2.5rem)}
.contactpagina__zij{display:grid;gap:1rem}

/* --- Formulier ----------------------------------------------------------- */
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}
.veld{display:flex;flex-direction:column;gap:.4rem;margin:0 0 1.35rem}
.veld label{font-weight:600;font-size:.875rem;color:var(--chroom)}
.verplicht{color:#FF7A5C}
.veld input,.veld select,.veld textarea{
  font:inherit;font-size:1rem;color:var(--chroom);background:var(--veld);
  border:1.5px solid var(--lijn-fel);border-radius:var(--radius);padding:.72rem .85rem;
  width:100%;transition:border-color .18s,box-shadow .18s,background-color .18s;
}
.veld textarea{resize:vertical;min-height:9rem;line-height:1.55}
.veld input::placeholder,.veld textarea::placeholder{color:var(--gedempt-diep)}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:var(--staal-diep)}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--staal);background:#0C131D;
  box-shadow:0 0 0 3px rgba(214,230,244,0.15)}
.veld input[aria-invalid=true],.veld textarea[aria-invalid=true]{border-color:#E0623F}
.veldfout{color:#FF8A6B;font-size:.8125rem;font-weight:500}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier__voet{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  border-top:1px solid var(--lijn);padding-top:1.5rem;margin-top:.5rem}
.formulier__voet .knop{padding:.95rem 1.9rem}
.formulier__hint{font-size:.8125rem;color:var(--gedempt);margin:0;flex:1 1 16rem;line-height:1.5}

/* --- Meldingen ----------------------------------------------------------- */
.melding{border-radius:var(--radius);padding:1.25rem 1.4rem;margin-bottom:1.5rem;border-left:3px solid}
.melding p{margin:0}
.melding h2{font-size:1.25rem;margin-bottom:.5rem}
.melding--goed{background:rgba(60,200,130,.10);border-color:#3CC882;color:#A8E9C8}
.melding--goed h2{color:#A8E9C8;-webkit-text-fill-color:#A8E9C8;background:none}
.melding--goed a{color:#A8E9C8}
.melding--fout{background:rgba(224,98,63,.12);border-color:#E0623F;color:#FFB9A3}

/* --- Zijkaartjes --------------------------------------------------------- */
.kaartje{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:1.4rem 1.5rem}
.kaartje__label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gedempt);margin:0 0 .7rem}
.kaartje__tekst{font-size:.9375rem;color:var(--gedempt);margin:0 0 .6rem;line-height:1.65}
.kaartje__tekst:last-child{margin-bottom:0}
.kaartje--spoed{background:linear-gradient(160deg,#12202F,#0A1119);border-color:var(--staal-diep);
  box-shadow:0 0 34px -18px rgba(214,230,244,0.52)}
.kaartje--spoed .kaartje__label{color:var(--staal-licht)}
.kaartje__nr{font-family:var(--mono);font-weight:500;font-size:1.375rem;color:var(--chroom);
  text-decoration:none;display:block;margin-bottom:.6rem}
.kaartje__nr:hover{color:var(--staal-licht)}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .voet__in{grid-template-columns:1fr 1fr}
  .diensten,.stempels,.projecten{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .contactpagina{grid-template-columns:1fr}
  .veld-rij{grid-template-columns:1fr}
}
@media (max-width:860px){
  .kop__toggle{display:block}
  .kop__nav{
    position:fixed;inset:114px 0 auto;background:var(--ink);flex-direction:column;align-items:stretch;
    gap:0;padding:1rem 1.25rem 1.75rem;border-bottom:1px solid var(--lijn);
    box-shadow:0 22px 34px -24px #000;display:none;
  }
  .kop__nav[data-open=true]{display:flex}
  .kop__nav ul{flex-direction:column;gap:0}
  .kop__nav ul a{padding:.85rem 0;border-bottom:1px solid var(--lijn)}
  .kop__nav ul a::after{display:none}
  .knop--bel{margin-top:1.1rem;justify-content:center}
}
@media (max-width:560px){
  body{font-size:1rem}
  .topbar__in{font-size:.6875rem;gap:.5rem}
  .topbar a:not(.topbar__lang):not(.sociaal__link):not(.topbar__bel),
  .topbar__sep{display:none}
  .sociaal__link{width:26px;height:26px}
  .topbar__status{font-size:.625rem}
  .cijfers{grid-template-columns:1fr}
  .diensten,.stempels,.projecten{grid-template-columns:1fr}
  .voet__in{grid-template-columns:1fr;gap:2rem}
  .storing__nr{width:100%;justify-content:center}
}

/* ==========================================================================
   BEWEGING
   Alles hieronder werkt alleen als <html data-animatie="aan"> gezet is.
   Dat gebeurt met een klein script in de header, en alleen wanneer de
   bezoeker geen "verminderde beweging" heeft ingesteld. Zonder JavaScript
   of met die voorkeur aan blijft de site gewoon volledig zichtbaar.
   ========================================================================== */

/* --- Elementen die binnenkomen bij het scrollen -------------------------- */
[data-animatie="aan"] .sectie__kop,
[data-animatie="aan"] .dienst,
[data-animatie="aan"] .stempel,
[data-animatie="aan"] .project,
[data-animatie="aan"] .cijfer,
[data-animatie="aan"] .split__foto,
[data-animatie="aan"] .contact,
[data-animatie="aan"] .kaartje{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.68,.26,1),
             transform .75s cubic-bezier(.22,.68,.26,1);
  transition-delay:var(--vertraging,0ms);
}
[data-animatie="aan"] .zichtbaar{opacity:1;transform:none}

/* Foto's in de kaarten komen mee met een subtiele uitzoom */
[data-animatie="aan"] .dienst__foto img,
[data-animatie="aan"] .project__foto img{
  transform:scale(1.08);
  transition:transform 1.1s cubic-bezier(.22,.68,.26,1);
  transition-delay:var(--vertraging,0ms);
}
[data-animatie="aan"] .zichtbaar .dienst__foto img,
[data-animatie="aan"] .zichtbaar .project__foto img{transform:scale(1)}
[data-animatie="aan"] .dienst:hover .dienst__foto img{transform:scale(1.05);transition-duration:.55s}

/* --- Hero: gefaseerd opbouwen ------------------------------------------- */
@keyframes opkomen{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes streepUit{from{transform:scaleX(0)}to{transform:scaleX(1)}}

[data-animatie="aan"] .hero__oog,
[data-animatie="aan"] .hero h1,
[data-animatie="aan"] .hero__tekst,
[data-animatie="aan"] .hero__acties,
[data-animatie="aan"] .hero__voet{
  animation:opkomen .85s cubic-bezier(.22,.68,.26,1) backwards;
}
[data-animatie="aan"] .hero__oog{animation-delay:.10s}
[data-animatie="aan"] .hero h1{animation-delay:.20s}
[data-animatie="aan"] .hero__tekst{animation-delay:.36s}
[data-animatie="aan"] .hero__acties{animation-delay:.48s}
[data-animatie="aan"] .hero__voet{animation-delay:.60s}
[data-animatie="aan"] .hero__oog::before{
  animation:streepUit .7s cubic-bezier(.22,.68,.26,1) .25s backwards;transform-origin:left;
}

/* Langzame inzoom op de herofoto, geeft de indruk dat het beeld leeft */
@keyframes heroAdem{
  from{transform:scaleX(-1) scale(1)}
  to  {transform:scaleX(-1) scale(1.09)}
}
[data-animatie="aan"] .hero__foto img{
  animation:heroAdem 26s ease-in-out infinite alternate;
  will-change:transform;
}

/* --- Storingsbalk: de waarschuwingsstrepen schuiven traag ---------------- */
@keyframes strepenLopen{from{background-position:0 0}to{background-position:68px 0}}
[data-animatie="aan"] .storing{animation:strepenLopen 3.2s linear infinite}
.storing__nr{position:relative;overflow:hidden}
.storing__nr::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.5,0,.2,1);z-index:-1;
}
.storing__nr:hover::after{transform:scaleX(1)}
.storing__nr{z-index:0;background:transparent}
.storing__nr:hover{background:transparent;color:var(--staal-licht)}

/* --- Header krimpt bij het scrollen ------------------------------------- */
.kop{transition:box-shadow .3s ease,background-color .3s ease}
.kop__in{transition:min-height .3s cubic-bezier(.4,0,.2,1)}
.merk{transition:height .3s cubic-bezier(.4,0,.2,1)}
.kop.is-gekrompen{box-shadow:0 6px 24px -18px rgba(14,26,34,.7)}
.kop.is-gekrompen .kop__in{min-height:62px}
.kop.is-gekrompen .merk{height:38px}

/* --- Knoppen en links: kleine reacties ---------------------------------- */
.knop{transition:background .18s,color .18s,border-color .18s,transform .18s}
.knop:hover{transform:translateY(-2px)}
.knop:active{transform:translateY(0)}
.kop__nav ul a{position:relative}
.kop__nav ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--staal);
  transform:scaleX(0);transform-origin:right;transition:transform .28s cubic-bezier(.5,0,.2,1);
}
.kop__nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.kop__nav ul a:hover{border-bottom-color:transparent}

/* --- Certificeringsstempels lichten op bij aanwijzen -------------------- */
.stempel{transition:border-color .25s,background-color .25s,transform .25s}
.stempel:hover{border-color:var(--staal-licht);transform:translateY(-3px)}
.stempel:hover .stempel__code{color:#68B5FF}

/* --- Cijfers ------------------------------------------------------------- */
.cijfer{transition:border-color .25s}
.cijfer:hover{border-color:var(--staal)}


/* ==========================================================================
   LOGO
   Eén afbeelding: geanimeerde WebP met een stilstaande PNG als terugval.
   Het zwart in het beeld is doorzichtig gemaakt, zodat het logo op elke
   donkere ondergrond past zonder zichtbaar kader.
   ========================================================================== */
.merk{display:block;height:56px;width:auto}
.merk img{height:100%;width:auto;display:block}
.merk--voet{height:52px;margin-bottom:1.2rem}
.kop.is-gekrompen .merk{height:46px}
.merk{transition:height .3s cubic-bezier(.4,0,.2,1)}

/* ==========================================================================
   DONKERE HEADER
   Het logo is ontworpen op zwart. Een donkere balk laat het metaal en de
   gloed tot hun recht komen; op wit zou het vlak en grauw ogen.
   ========================================================================== */
.kop{background:var(--ink);border-bottom:1px solid var(--glans-sterk)}
.kop.is-gekrompen{box-shadow:0 8px 30px -18px var(--schaduw)}
.kop__nav ul a{color:#E6EDF1}
.kop__nav ul a:hover{color:#fff}
.kop__nav ul a[aria-current=page]{border-bottom-color:var(--staal-licht);color:#fff}
.kop__burger,.kop__burger::before,.kop__burger::after{background:#fff}
.kop__toggle[aria-expanded=true] .kop__burger{background:transparent}

/* Belknop moet op donker juist opvallen: geel in plaats van donkerblauw. */


/* De bovenbalk was al donker; nu een fijne scheidingslijn ertussen. */
.topbar{border-bottom:1px solid var(--glans-sterk)}

@media (max-width:860px){
  .merk{height:46px}
  .kop.is-gekrompen .merk{height:38px}
  /* uitklapmenu meekleuren met de donkere header */
  .kop__nav{background:var(--ink);border-bottom:1px solid var(--glans-sterk);
            box-shadow:0 22px 34px -24px var(--schaduw)}
  .kop__nav ul a{border-bottom:1px solid var(--glans-sterk)}
  .kop__nav ul a:hover{border-bottom-color:var(--glans-sterk)}
}

/* ==========================================================================
   DIENSTENPAGINA
   ========================================================================== */
.snelmenu{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.snelmenu a{
  display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tekst);text-decoration:none;
  border:1px solid var(--lijn-fel);border-radius:var(--radius);padding:.55rem .9rem;
  transition:border-color .2s,color .2s,box-shadow .25s;
}
.snelmenu a:hover{border-color:var(--staal);color:#fff;box-shadow:var(--gloed)}

.dienstblok{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.dienstblok--gedraaid .dienstblok__foto{order:2}
.dienstblok__foto img{border-radius:var(--radius);width:100%;border:1px solid var(--lijn)}
.dienstblok__tekst h2{font-size:clamp(1.6rem,3.2vw,2.25rem);margin-bottom:1rem}
.dienstblok__tekst > p{color:var(--gedempt)}
.dienstblok__slot{font-size:.9375rem;border-left:2px solid var(--lijn-fel);padding-left:1rem;margin-top:1.5rem}

.vinklijst{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem}
.vinklijst li{position:relative;padding-left:1.6rem;color:var(--tekst);font-size:.9375rem}
.vinklijst li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  background:var(--staal);transform:rotate(45deg);box-shadow:0 0 8px var(--staal);
}

/* Ankerlinks mogen niet onder de vastgezette header verdwijnen */
[id]{scroll-margin-top:110px}

@media (max-width:900px){
  .dienstblok{grid-template-columns:1fr}
  .dienstblok--gedraaid .dienstblok__foto{order:0}
}

/* ==========================================================================
   CERTIFICERINGENPAGINA
   ========================================================================== */
.certlijst{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;list-style:none;margin:0;padding:0}
.cert{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:1.5rem 1.6rem;position:relative;transition:border-color .25s,box-shadow .28s;
}
.cert:hover{border-color:var(--staal-diep);box-shadow:0 0 30px -16px rgba(214,230,244,0.38)}
.cert__kop{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--lijn)}
.cert__code{font-family:var(--mono);font-weight:500;font-size:1.0625rem;color:var(--staal-licht);
  letter-spacing:.03em}
.cert__naam{font-size:.8125rem;color:var(--gedempt);line-height:1.4}
.cert__tekst{font-size:.9375rem;color:var(--tekst);margin:0}
.cert__vraag{font-size:.8125rem;margin:.9rem 0 0;line-height:1.55}

/* --- Documentenlijst ----------------------------------------------------- */
.doclijst{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.doc{border:1px solid var(--lijn);border-radius:var(--radius);background:var(--glans)}
.doc a,.doc > .doc__naam{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding:.95rem 1.2rem;text-decoration:none}
.doc__naam{font-weight:600;color:var(--chroom);font-size:.9375rem}
.doc__meta{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gedempt-diep);margin-left:auto}
.doc__oms{display:block;padding:0 1.2rem 1rem;font-size:.8125rem;color:var(--gedempt);margin-top:-.4rem}
.doc--klaar{border-color:var(--lijn-fel)}
.doc--klaar a:hover{background:rgba(214,230,244,0.06)}
.doc--klaar .doc__naam::before{content:"↓ ";color:var(--staal)}
.doc--klaar .doc__meta{color:var(--staal-licht)}
.doc--ontbreekt{border-style:dashed;opacity:.75}
.doc--ontbreekt > .doc__naam{padding-bottom:.5rem}
.doc--ontbreekt .doc__naam::before{content:"○ ";color:var(--gedempt-diep)}
.doc code{font-family:var(--mono);font-size:.9em;background:var(--glans);
  padding:.1rem .35rem;border-radius:2px;text-transform:none;letter-spacing:0}

/* --- Gegevenstabel ------------------------------------------------------- */
.gegevens{width:100%;border-collapse:collapse;font-size:.9375rem}
.gegevens th,.gegevens td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--lijn);
  vertical-align:top}
.gegevens th{width:14rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gedempt);font-weight:500}
.gegevens td{color:var(--tekst)}
.gegevens tr:hover td,.gegevens tr:hover th{background:var(--glans)}

@media (max-width:800px){
  .certlijst{grid-template-columns:1fr}
  .gegevens th{width:auto;display:block;border:0;padding-bottom:.2rem}
  .gegevens td{display:block;padding-top:0}
}

/* ==========================================================================
   VACATUREPAGINA
   ========================================================================== */
.vacatures{display:grid;gap:1.5rem}
.vacature{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.25rem);transition:border-color .25s,box-shadow .28s;
}
.vacature:hover{border-color:var(--staal-diep);box-shadow:0 0 34px -20px rgba(214,230,244,0.45)}
.vacature__kop{padding-bottom:1.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--lijn)}
.vacature__kop h3{font-size:1.375rem;margin-bottom:.45rem}
.vacature__kop p{color:var(--gedempt);font-size:.9375rem;margin:0}
.vacature__body{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.vacature__subkop{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--staal);margin:0}
.vacature__body .vinklijst{margin-top:1rem}
.vacature__actie{margin:1.75rem 0 0}

@media (max-width:700px){
  .vacature__body{grid-template-columns:1fr;gap:1.5rem}
  .vacature__actie .knop{width:100%}
}

/* ==========================================================================
   TERUG NAAR BLAUW?
   De kleurstelling is nu grijs en zwart, passend bij de overalls. Wil je
   terug naar de blauwe versie, vervang dan de drie regels in :root door:

     --blauw:#3D9BFF;
     --blauw-licht:#9CCCFF;
     --blauw-diep:#1C5FA6;
     --gloed:0 0 32px -8px rgba(230,233,235,.40);

   en zet de linkkleur terug op var(--staal).
   ========================================================================== */

/* Toepassingenlijstje binnen een NDO-kaart */
.cert__label{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gedempt-diep);margin:1.25rem 0 .6rem}
.vinklijst--klein{gap:.4rem}
.vinklijst--klein li{font-size:.8125rem;padding-left:1.25rem;color:var(--gedempt)}
.vinklijst--klein li::before{width:5px;height:5px;top:.5em}

/* Actieve knop in een filter- of snelmenu */
.snelmenu a.is-actief{border-color:var(--staal);color:#fff;background:var(--glans)}

/* Project zonder foto: geen leeg kader, wel een subtiel streepje bovenaan
   zodat de kaarten in het raster op één lijn blijven staan. */
.project__zonderfoto{height:3px;border-radius:var(--radius);
  background:linear-gradient(90deg,var(--lijn-fel),transparent);margin-bottom:.25rem}

/* Waarschuwingsblok, ook bruikbaar buiten de beheeromgeving */
.bh-melding{border-radius:var(--radius);padding:1rem 1.2rem;border-left:3px solid;
  font-size:.9375rem;line-height:1.6}
.bh-melding--waarschuwing{background:rgba(240,180,40,.10);border-color:#F0B428;color:#FFDE9E}
.bh-melding strong{color:#fff}
.bh-melding code{font-family:var(--mono);font-size:.875em;background:var(--glans-sterk);
  padding:.1rem .35rem;border-radius:2px}

/* Document dat alleen op aanvraag verstrekt wordt */
.doc--aanvraag{border-style:solid;border-color:var(--lijn)}
.doc--aanvraag .doc__naam::before{content:"✉ ";color:var(--staal)}
.doc--aanvraag .doc__meta{color:var(--staal)}
.doc--aanvraag a:hover{background:var(--glans)}

/* ==========================================================================
   VENSTER (voorwaarden)
   ========================================================================== */
.venster{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,2.5rem)}
.venster[hidden]{display:none}
.venster__achtergrond{position:absolute;inset:0;background:rgba(3,5,7,.82);
  backdrop-filter:blur(3px);cursor:pointer}
.venster__kaart{
  position:relative;width:min(100%,52rem);max-height:88vh;display:flex;flex-direction:column;
  background:var(--kaart);border:1px solid var(--lijn-fel);border-radius:var(--radius);
  box-shadow:0 30px 70px -30px #000;
}
.venster__kop{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem clamp(1.25rem,3vw,2rem);border-bottom:1px solid var(--lijn)}
.venster__kop h2{font-size:1.25rem}
.venster__sluit{background:none;border:0;color:var(--gedempt);font-size:1.75rem;line-height:1;
  cursor:pointer;padding:.2rem .5rem;border-radius:var(--radius)}
.venster__sluit:hover{color:#fff;background:var(--glans-sterk)}
.venster__inhoud{
  overflow-y:auto;padding:clamp(1.25rem,3vw,2rem);font-size:.9375rem;line-height:1.7;
  color:var(--tekst);
}
.venster__inhoud:focus{outline:none}
.venster__voet{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
  padding:1.25rem clamp(1.25rem,3vw,2rem);border-top:1px solid var(--lijn)}
.venster__hint{font-size:.8125rem;color:var(--gedempt);flex:1 1 14rem}

@media (max-width:600px){
  .venster__kaart{max-height:92vh}
  .venster__voet .knop{flex:1 1 100%}
}

/* ==========================================================================
   KEURMERKEN IN DE FOOTER
   De logo's van DNV-GL, VCA, RvA en Metaalunie zijn eigendom van die
   organisaties en mogen niet verkleurd worden. Ze zijn ontworpen voor een
   witte ondergrond, dus staan ze op een licht vlak — maar ingetogen, zodat
   ze de footer niet overheersen.
   ========================================================================== */
.keurmerken{border-top:1px solid var(--lijn);padding-block:1.25rem}
.keurmerken__in{display:flex;align-items:center;justify-content:space-between;
  gap:1rem 2rem;flex-wrap:wrap}
.keurmerken__label{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gedempt-diep);margin:0}
.keurmerken__strook{
  display:block;background:var(--keurmerk-vlak);border-radius:3px;
  padding:.4rem .8rem;opacity:.8;
  transition:opacity .25s,background .25s;
}
.keurmerken__strook:hover{opacity:1;background:#fff}
.keurmerken__strook img{height:34px;width:auto;display:block}

@media (max-width:820px){
  .keurmerken__in{justify-content:center;text-align:center}
  .keurmerken__strook img{height:30px}
}
@media (max-width:480px){
  .keurmerken__label{font-size:.5625rem}
  .keurmerken__strook img{height:26px}
}

/* ==========================================================================
   KNOP OM TEKSTEN TE BEWERKEN
   Staat in deze stylesheet en niet in bewerken.css, want die wordt alleen
   in de bewerkstand ingeladen — daardoor zag de knop eruit als een kale link.
   ========================================================================== */
/* De balk zelf: zweeft midden onderin, alleen zichtbaar voor de beheerder. */
.beheerbalk{
  position:fixed;left:50%;transform:translateX(-50%);bottom:1.25rem;z-index:55;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center;
  background:rgba(11,12,14,.94);border:1px solid var(--lijn-fel);border-radius:8px;
  padding:.5rem .6rem .5rem 1rem;
  box-shadow:0 14px 40px -18px #000;
  max-width:calc(100vw - 1.5rem);
}
.beheerbalk__wie{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;
  color:var(--gedempt);white-space:nowrap}
.beheerbalk__wie strong{color:var(--chroom);font-weight:600}
.beheerbalk__stip{width:7px;height:7px;border-radius:50%;background:#3CC882;
  box-shadow:0 0 8px rgba(60,200,130,.8)}
.beheerbalk__link{font-size:.8125rem;color:var(--staal);text-decoration:none;
  padding:.5rem .7rem;border-radius:var(--radius);white-space:nowrap}
.beheerbalk__link:hover{color:#fff;background:var(--glans-sterk)}

.bewerk-start{
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(180deg,#FBFDFF 0%,#DCE6EF 26%,#AEBECD 48%,
             #8B9DAD 52%,#C7D4E0 74%,#9EAEBD 100%);
  color:var(--knop-tekst);border:1px solid #6F8090;border-radius:var(--radius);
  padding:.7rem 1.4rem;font-size:.875rem;font-weight:600;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 26px -12px #000;
  transition:filter .18s,box-shadow .25s;
}
.bewerk-start:hover{color:var(--knop-tekst);filter:brightness(1.06);
  box-shadow:inset 0 1px 0 #fff,0 0 26px -6px rgba(61,155,255,.7)}
.bewerk-start svg{opacity:.75}

/* --- Embleem rechtsonder in de footer ------------------------------------ */
.voet__embleem{display:block;margin-left:auto}
.voet__embleem img{height:72px;width:auto;display:block;opacity:.92}
.voet__balk-in{align-items:center}

/* --- Keurmerken: aanklikbaar om te vergroten ----------------------------- */
.keurmerken__strook{position:relative;border:0;cursor:zoom-in;font:inherit}
.keurmerken__loep{
  position:absolute;right:-.4rem;bottom:-.4rem;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--kaart);border:1px solid var(--lijn-fel);border-radius:50%;
  color:var(--staal);
}
.keurmerken__strook:hover .keurmerken__loep{color:#fff;border-color:var(--staal)}

/* --- Venster met alleen een afbeelding ----------------------------------- */
.venster__kaart--beeld{background:#F4F6F8;padding:clamp(1.5rem,4vw,3rem);
  width:min(100%,60rem);max-height:88vh;justify-content:center}
.venster__kaart--beeld img{width:100%;height:auto;display:block}
.venster__sluit--zwevend{position:absolute;top:.4rem;right:.6rem;color:#5A6167;z-index:2}
.venster__sluit--zwevend:hover{color:#000;background:rgba(0,0,0,.08)}

@media (max-width:600px){
  .voet__embleem img{height:56px}
  .beheerbalk{bottom:.75rem;gap:.4rem;padding:.5rem;font-size:.75rem}
  .beheerbalk__wie{width:100%;justify-content:center;font-size:.75rem}
  .bewerk-start{padding:.55rem 1rem;font-size:.8125rem}
  .beheerbalk__link{padding:.45rem .6rem;font-size:.75rem}
}

/* Regel naast het logo op de Engelse pagina, waar geen menu staat */
.kop__enkel{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gedempt);margin-left:auto}
@media (max-width:700px){ .kop__enkel{display:none} }


/* ==========================================================================
   KOPPEN OP SMALLE SCHERMEN
   Het chroomverloop op tekst is een truc: de letters worden doorzichtig
   gemaakt en het verloop schijnt erdoorheen. Op telefoons gaat dat bij
   sommige browsers mis — dan blijft er een zwarte of onzichtbare kop over.
   Op een klein scherm is het verschil tussen vlak chroom en verlopend chroom
   toch nauwelijks te zien, dus daar kiezen we voor zekerheid.
   ========================================================================== */
@media (max-width:700px){
  .chroom,h1,h2,
  .hero h1 em{
    background-image:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
  }
  .chroom,h1,h2{color:var(--chroom);-webkit-text-fill-color:var(--chroom)}
  .hero h1 em{color:var(--staal-licht);-webkit-text-fill-color:var(--staal-licht)}
}

/* ==========================================================================
   AANPASSINGEN VOOR HET LICHTE THEMA
   Niet alles laat zich met een kleurwissel oplossen. Deze onderdelen hebben
   op een lichte ondergrond een eigen behandeling nodig.
   ========================================================================== */

/* --- Koppen: op licht geen chroom maar een vaste donkere kleur ----------- */
:root[data-thema="licht"] .chroom,
:root[data-thema="licht"] h1,
:root[data-thema="licht"] h2,
:root[data-thema="licht"] .hero h1 em{
  background-image:none;
  -webkit-background-clip:border-box;background-clip:border-box;
}
:root[data-thema="licht"] .chroom,
:root[data-thema="licht"] h1,
:root[data-thema="licht"] h2{
  color:var(--chroom);-webkit-text-fill-color:var(--chroom);
}

/* De hero blijft donker: daar ligt een foto onder, en donkere tekst zou
   daarop onleesbaar worden. */
:root[data-thema="licht"] .hero{background:#242A30}
:root[data-thema="licht"] .hero h1,
:root[data-thema="licht"] .hero .hero__tekst{color:#E6E9EB;-webkit-text-fill-color:#E6E9EB}
:root[data-thema="licht"] .hero h1 em{color:#9CCCFF;-webkit-text-fill-color:#9CCCFF}
:root[data-thema="licht"] .hero__voet{color:#8B9197;border-top-color:rgba(255,255,255,.14)}
:root[data-thema="licht"] .hero__oog{color:#9CCCFF}
:root[data-thema="licht"] .hero .knop--rand{color:#E6E9EB;border-color:rgba(255,255,255,.35)}

/* --- Header en footer ---------------------------------------------------- */
:root[data-thema="licht"] .topbar{background:#232930;color:#A6AEB6}
:root[data-thema="licht"] .topbar .topbar__bel{color:#E6E9EB}
:root[data-thema="licht"] .topbar a{color:#8B9197}
:root[data-thema="licht"] .topbar a:hover{color:#fff}
:root[data-thema="licht"] .kop{background:#fff;border-bottom-color:var(--lijn)}
:root[data-thema="licht"] .kop__nav ul a{color:var(--tekst)}
:root[data-thema="licht"] .kop__nav ul a:hover,
:root[data-thema="licht"] .kop__nav ul a[aria-current=page]{color:var(--chroom)}
:root[data-thema="licht"] .kop__burger,
:root[data-thema="licht"] .kop__burger::before,
:root[data-thema="licht"] .kop__burger::after{background:var(--chroom)}
:root[data-thema="licht"] .voet{background:var(--paneel);color:var(--gedempt);
  border-top-color:var(--lijn)}
:root[data-thema="licht"] .voet a{color:var(--gedempt)}
:root[data-thema="licht"] .voet a:hover{color:var(--chroom)}
:root[data-thema="licht"] .voet__titel{color:var(--lichtlijn)}

/* --- Logo: de donkere variant op een lichte ondergrond ------------------- */
.merk--donker{display:none}
:root[data-thema="licht"] .kop .merk--licht,
:root[data-thema="licht"] .voet .merk--licht{display:none}
:root[data-thema="licht"] .kop .merk--donker,
:root[data-thema="licht"] .voet .merk--donker{display:block}

/* --- Knoppen: chroom werkt ook op licht, maar met meer rand -------------- */
:root[data-thema="licht"] .knop--primair,
:root[data-thema="licht"] .knop--bel{border-color:#8A939C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 3px rgba(20,26,32,.18)}
:root[data-thema="licht"] .knop--rand{background:#fff;color:var(--chroom);
  border-color:var(--lijn-fel);box-shadow:none}
:root[data-thema="licht"] .knop--rand:hover{border-color:var(--lichtlijn);color:var(--chroom)}

/* --- Kaarten en vlakken -------------------------------------------------- */
:root[data-thema="licht"] .dienst,
:root[data-thema="licht"] .cert,
:root[data-thema="licht"] .vacature,
:root[data-thema="licht"] .kaartje,
:root[data-thema="licht"] .contactpagina__formulier{
  box-shadow:0 1px 2px rgba(20,26,32,.06),0 8px 24px -20px rgba(20,26,32,.35);
}
:root[data-thema="licht"] .stempel{background:#fff}
:root[data-thema="licht"] .kaartje--spoed{background:#2A3138;border-color:#44505C}
:root[data-thema="licht"] .kaartje--spoed .kaartje__tekst{color:#8B9197}
:root[data-thema="licht"] .kaartje--spoed .kaartje__nr{color:#fff}
:root[data-thema="licht"] .sectie--donker{background:#282E35}
:root[data-thema="licht"] .sectie--donker h2,
:root[data-thema="licht"] .sectie--donker .stempel__code{color:#E6E9EB;-webkit-text-fill-color:#E6E9EB}
:root[data-thema="licht"] .sectie--donker .sectie__kop p,
:root[data-thema="licht"] .sectie--donker .stempel__oms{color:#8B9197}
:root[data-thema="licht"] .sectie--donker .stempel{background:var(--glans);border-color:#2C3540}
:root[data-thema="licht"] .contact{background:linear-gradient(160deg,#fff,var(--paneel));
  border-color:var(--lijn-fel)}

/* --- Keurmerken: op licht geen plaatje eronder nodig --------------------- */
:root[data-thema="licht"] .keurmerken__strook{opacity:1;padding:0}
:root[data-thema="licht"] .keurmerken__strook:hover{background:transparent;box-shadow:none}

/* --- Beheerbalk blijft donker, die hoort niet bij de site ---------------- */
:root[data-thema="licht"] .beheerbalk{background:rgba(11,12,14,.96)}
:root[data-thema="licht"] .beheerbalk__wie{color:#8B9197}
:root[data-thema="licht"] .beheerbalk__wie strong{color:#E6E9EB}

/* --- Knop om te wisselen tussen licht en donker -------------------------- */
.topbar__thema{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;margin-left:.15rem;
  background:none;border:1px solid var(--lijn);border-radius:var(--radius);
  color:var(--gedempt);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.topbar__thema:hover{color:#fff;border-color:var(--staal-diep);background:var(--glans)}
.thema-zon{display:none}
:root[data-thema="licht"] .thema-maan{display:none}
:root[data-thema="licht"] .thema-zon{display:block}
:root[data-thema="licht"] .topbar__thema{border-color:#2C3540;color:#8B9197}
:root[data-thema="licht"] .topbar__thema:hover{color:#fff;border-color:#4A555F}

/* --- Correcties licht thema, bewust onderaan -----------------------------
   Deze regels moeten ná de algemene themaregels komen, anders winnen die.
   De hero en de bovenbalk blijven donker, dus daar horen lichte letters. */
:root[data-thema="licht"] .topbar__status{color:#E6E9EB}
:root[data-thema="licht"] .topbar__sep{color:#6B747D}

:root[data-thema="licht"] .hero .knop--rand{
  background:rgba(255,255,255,.06);
  color:#E6E9EB;
  border-color:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
:root[data-thema="licht"] .hero .knop--rand:hover{
  background:rgba(255,255,255,.14);border-color:#fff;color:#fff;
}

/* Ook de storingsbalk en het NDO-blok houden hun donkere ondergrond */
:root[data-thema="licht"] .storing{background:linear-gradient(180deg,#303740,#232930);
  border-color:#3C444D}
:root[data-thema="licht"] .storing__tekst{color:#E6E9EB;-webkit-text-fill-color:#E6E9EB}
:root[data-thema="licht"] .storing__nr{color:#9CCCFF;border-color:#2A4B6B}
:root[data-thema="licht"] .storing__nr:hover{color:#fff;border-color:#9CCCFF}

/* Paginakop van de binnenpagina's blijft donker, net als de hero */
:root[data-thema="licht"] .paginakop{background:#282E35}
:root[data-thema="licht"] .paginakop h1{color:#E6E9EB;-webkit-text-fill-color:#E6E9EB}
:root[data-thema="licht"] .paginakop__tekst{color:#8B9197}
:root[data-thema="licht"] .paginakop .label{color:#9CCCFF}

/* ==========================================================================
   DONKERE BLOKKEN BINNEN HET LICHTE THEMA
   De hero, de storingsbalk, de paginakoppen en de donkere secties blijven
   donker — daar liggen foto's onder of ze zijn bedoeld als accent. Zonder
   deze regels erven ze de lichte tekstkleuren en wordt donker op donker.
   Door de tokens hier opnieuw te zetten werkt alles binnen die blokken
   precies als in het donkere thema, zonder elke regel apart te herhalen.
   ========================================================================== */
:root[data-thema="licht"] .hero,
:root[data-thema="licht"] .storing,
:root[data-thema="licht"] .paginakop,
:root[data-thema="licht"] .sectie--donker,
:root[data-thema="licht"] .kaartje--spoed,
:root[data-thema="licht"] .beheerbalk,
:root[data-thema="licht"] .topbar{
  --chroom:#E6E9EB;
  --tekst:#C3C8CC;
  --gedempt:#8B9197;
  --gedempt-diep:#727A82;
  --staal:#9AA1A8;
  --staal-licht:#EDEFF1;
  --staal-diep:#5A6167;
  --lijn:#3C444D;
  --lijn-fel:#4E5761;
  --kaart:#2E353D;
  --kaart-op:#363E47;
  --nacht:#282E35;
  --paneel:#2E353D;
  --veld:#232930;
  --glans:rgba(255,255,255,.06);
  --glans-sterk:rgba(255,255,255,.10);
  --schaduw:rgba(0,0,0,.9);
  --lichtlijn:#3D9BFF;
  --lichtlijn-heet:#BFE0FF;
}

/* Koppen in die blokken: vaste lichte kleur, geen chroomverloop */
:root[data-thema="licht"] .hero h1,
:root[data-thema="licht"] .hero h2,
:root[data-thema="licht"] .paginakop h1,
:root[data-thema="licht"] .sectie--donker h2,
:root[data-thema="licht"] .sectie--donker h3{
  color:#E6E9EB;-webkit-text-fill-color:#E6E9EB;background-image:none;
}
:root[data-thema="licht"] .sectie--donker .stempel{background:rgba(255,255,255,.04)}
:root[data-thema="licht"] .sectie--donker .cert,
:root[data-thema="licht"] .sectie--donker .doc{background:rgba(255,255,255,.03);box-shadow:none}

/* --- Laatste correcties licht thema -------------------------------------- */

/* Een rustige knop binnen een donker blok moet donker blijven; de algemene
   regel maakte hem wit, met lichte letters erop. */
:root[data-thema="licht"] .hero .knop--rand,
:root[data-thema="licht"] .sectie--donker .knop--rand,
:root[data-thema="licht"] .paginakop .knop--rand{
  background:rgba(255,255,255,.06);
  color:#E6E9EB;
  border-color:rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
:root[data-thema="licht"] .hero .knop--rand:hover,
:root[data-thema="licht"] .sectie--donker .knop--rand:hover{
  background:rgba(255,255,255,.14);border-color:#fff;color:#fff;
}

/* Het gele waarschuwingsblok staat op licht; witte tekst valt daar weg. */
:root[data-thema="licht"] .bh-melding--waarschuwing{
  background:#FDF6E3;border-color:#C79A20;color:#6B5410;
}
:root[data-thema="licht"] .bh-melding--waarschuwing strong{color:#3F320A}
:root[data-thema="licht"] .bh-melding code{background:rgba(0,0,0,.06);color:#3F320A}

/* Kleine labels iets donkerder, anders zijn ze op wit nauwelijks te lezen. */
:root[data-thema="licht"] .keurmerken__label{color:#5A626A}
:root[data-thema="licht"] .verplicht{color:#B3391B}
:root[data-thema="licht"] .contact__hint,
:root[data-thema="licht"] .formulier__hint{color:#5A626A}