@font-face{font-family:'Barlow Condensed';src:url('/lettertype/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('/lettertype/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/lettertype/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}

/* ================================================================
   MIDNIGHT - de basisstijl. Strikt zwart-wit, de logokleuren:
   afwisselend witte, lichtgrijze en zwarte vlakken met haarlijnen
   ertussen. Carbon staat in carbon.css en hangt aan hetzelfde
   HTML; dat bestand overschrijft alleen kleuren en vormen.
   ================================================================ */
:root{
  --zwart:#000;
  --wit:#fff;
  --grafiet:#555;
  /* grafiet is op zwart niet leesbaar; dit zijn de twee lichte tegenhangers */
  --op-zwart:#cfcfcf;
  --op-zwart-zacht:#9a9a9a;
  --lichtgrijs:#F2F2F2;
  --lijn:#e2e2e2;
  --ster:#F5A623;
  --ws-groen:#37FA22;
  --ws-paars:#230D2D;
  --wa:#25D366;
  --wa-diep:#1DA851;
  --kop:'Barlow Condensed',Impact,sans-serif;
  --tekst:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --breed:1180px;
  --balk:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--tekst);
  font-size:17px;
  line-height:1.65;
  color:var(--zwart);
  background:var(--wit);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--kop);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0}
h1{font-size:clamp(2.9rem,7vw,5.2rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:1.45rem;line-height:1.1}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
h1+p,h2+p,h3+p{margin-top:18px}
h3+p{margin-top:9px}

.binnen{width:100%;max-width:var(--breed);margin:0 auto;padding:0 24px}
.vak{padding:clamp(46px,5vw,72px) 0}
.vak--grijs{background:var(--lichtgrijs)}
.vak--zwart{background:var(--zwart);color:var(--wit)}
.vak--zwart p{color:var(--op-zwart)}

.lood{font-size:1.1rem;color:var(--grafiet);max-width:62ch}
.vak--zwart .lood{color:var(--op-zwart)}
.kopgroep{margin-bottom:clamp(24px,3vw,38px)}
.kopgroep h2{margin-bottom:14px}
/* streep onder de kop: hoort bij Carbon, in Midnight niet in beeld */
.streep{display:none}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--tekst);font-weight:600;font-size:.95rem;
  padding:15px 28px;border:2px solid var(--zwart);border-radius:999px;
  text-decoration:none;background:var(--zwart);color:var(--wit);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
  white-space:nowrap;
}
.knop:hover{background:var(--grafiet);border-color:var(--grafiet)}
.knop--om{background:transparent;color:var(--zwart)}
.knop--om:hover{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.knop--licht{background:var(--wit);color:var(--zwart);border-color:var(--wit)}
.knop--licht:hover{background:transparent;color:var(--wit);border-color:var(--wit)}
.knop--wit{
  background:var(--wit);color:var(--zwart);border-color:var(--wit);
  box-shadow:0 10px 32px -14px rgba(255,255,255,.55);
}
.knop--wit:hover{
  background:#e6e6e6;border-color:#e6e6e6;color:var(--zwart);
  box-shadow:0 12px 36px -12px rgba(255,255,255,.7);
}
.knop--wa{
  background:var(--wa);color:var(--wit);border-color:var(--wa);
  box-shadow:0 10px 32px -12px rgba(37,211,102,.7);
}
.knop--wa:hover{
  background:var(--wa-diep);border-color:var(--wa-diep);color:var(--wit);
  box-shadow:0 12px 36px -10px rgba(37,211,102,.85);
}
.knoppen{display:flex;flex-wrap:wrap;gap:14px}
.knop svg{width:18px;height:18px;flex:none;fill:currentColor}

/* ---------- balk ---------- */
.balk{
  position:sticky;top:0;z-index:50;
  background:var(--zwart);color:var(--wit);
  /* geen lijn eronder: balk en hero zijn allebei #000 en moeten in elkaar overlopen */
}
.balk .binnen{display:flex;align-items:center;gap:20px;height:76px}
.balk__logo{display:block;flex:none}
.balk__logo img{height:34px;width:auto}
.balk nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.balk nav a:not(.knop){
  text-decoration:none;font-size:.9rem;font-weight:600;color:var(--op-zwart);
  letter-spacing:.02em;transition:color .15s;
}
.balk nav a:not(.knop):hover,.balk nav a:not(.knop)[aria-current]{color:var(--wit)}
.balk .knop{padding:11px 20px;font-size:.88rem}
.balk__mob{display:none}
.balk__bel-kort{display:none}

/* ---------- stijlwisselaar ---------- */
.thema{
  flex:none;display:inline-flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:3px;
}
.thema button{
  font-family:var(--tekst);font-size:.76rem;font-weight:600;cursor:pointer;
  letter-spacing:.05em;padding:7px 15px;border:0;border-radius:999px;
  background:transparent;color:var(--op-zwart-zacht);white-space:nowrap;
  transition:background .15s,color .15s;
}
.thema button:hover{color:var(--wit)}
.thema button[aria-pressed=true]{background:var(--wit);color:var(--zwart)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--zwart);color:var(--wit);overflow:hidden}
.hero__wrap{position:relative;z-index:1;width:100%;max-width:var(--breed);margin:0 auto;padding:0 24px}
.hero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(36px,5vw,64px);
  /* schermvullend: precies het scherm min de balk, dus geen witte streep onderaan.
     svh houdt rekening met de adresbalk van de telefoon, vh is de terugval. */
  min-height:calc(100vh - var(--balk));
  min-height:calc(100svh - var(--balk));
}
.hero__tekst{padding:clamp(48px,5vw,72px) 0;display:flex;flex-direction:column;justify-content:center}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:normal;display:block;color:var(--wit)}
.hero__lood{font-size:1.15rem;color:var(--op-zwart);max-width:46ch;margin-bottom:30px}

.hero__cijfer{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px 9px;margin-top:26px;
  align-self:flex-start;text-decoration:none;font-size:.88rem;color:var(--op-zwart-zacht);
}
.hero__cijfer b{font-weight:600;color:var(--wit);font-size:.95rem}
.hero__cijfer:hover span.tel{color:var(--wit)}
.sterren{color:var(--ster);letter-spacing:2px;font-size:.9rem}

/* Werkspot-logo in eigen kleur, dus altijd op wit.
   content-box: de hoogte is die van het logo zelf, de padding komt eromheen.
   Met border-box at de padding het logo op en bleef er 8px over. */
.ws__mark{
  box-sizing:content-box;
  width:auto;height:15px;display:block;
  background:var(--wit);border-radius:999px;padding:5px 11px;
}

.bewijs{
  display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:22px;
  font-size:.9rem;color:var(--op-zwart);
}
.bewijs span{display:inline-flex;align-items:center;gap:9px}
.bewijs svg{width:19px;height:19px;flex:none;fill:var(--wit)}

.hero__beeld{position:relative;align-self:center}
.hero__beeld::after{
  content:"";position:absolute;right:-18px;bottom:-18px;width:62%;height:42%;
  border-radius:26px;z-index:0;
  background:linear-gradient(135deg,#2f2f2f,var(--grafiet));
}

/* ---------- hero: wisselende foto's ---------- */
.dia{
  position:relative;z-index:1;overflow:hidden;border-radius:26px;
  background:#111;
  height:clamp(360px,44vw,540px);
  /* op een lage laptop mag de foto niet buiten het scherm vallen */
  max-height:calc(100svh - var(--balk) - 110px);
  box-shadow:0 36px 80px -34px rgba(0,0,0,.95);
}
.dia__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.001);
  transition:opacity 1.1s ease;
  will-change:opacity,transform;
}
/* de foto in beeld zoomt langzaam in; de volgende zoomt uit, zo wisselt de
   richting en loopt de reeks niet elke keer dezelfde kant op */
.dia__foto.is-aan{opacity:1;z-index:2;animation:dia-in 8s ease-out forwards}
.dia__foto.is-aan.dia--uit{animation-name:dia-uit}
/* de vorige foto blijft tijdens het overvloeien staan, alleen eronder: de
   nieuwe schuift eroverheen. Zou de oude meefaden, dan zie je er een moment
   de zwarte achtergrond doorheen. */
.dia__foto.is-af{opacity:1;z-index:1}
@keyframes dia-in{from{transform:scale(1.001)}to{transform:scale(1.1)}}
@keyframes dia-uit{from{transform:scale(1.1)}to{transform:scale(1.001)}}
.dia__stippen{
  position:absolute;right:16px;bottom:14px;z-index:3;display:flex;gap:7px;
}
.dia__stip{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.4);transition:background .2s,transform .2s;
}
.dia__stip:hover{background:rgba(255,255,255,.75)}
.dia__stip[aria-current=true]{background:var(--wit);transform:scale(1.35)}

.hero__badge{
  position:absolute;left:-22px;bottom:26px;z-index:2;
  display:flex;align-items:center;gap:14px;
  background:rgba(14,14,14,.9);border:1px solid var(--grafiet);
  border-radius:16px;padding:13px 18px;text-decoration:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.9);
  transition:border-color .15s;
}
.hero__badge:hover{border-color:var(--wit)}
.hero__badge b{font-family:var(--kop);font-size:1.9rem;line-height:1;color:var(--wit)}
.hero__badge small{display:block;font-size:.74rem;color:var(--op-zwart-zacht);margin-top:3px}
.hero__badge-ws{display:block;padding-left:13px;border-left:1px solid var(--grafiet)}
.hero__badge-ws .ws__mark{height:16px;padding:5px 11px}

/* ---------- zwevende WhatsApp ---------- */
.zweef{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:999px;
  background:var(--wa);color:var(--wit);
  font-family:var(--tekst);font-weight:600;font-size:.95rem;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  transition:transform .2s,background .15s,opacity .25s;
}
.zweef:hover{transform:translateY(-3px);background:var(--wa-diep)}
.zweef svg{width:22px;height:22px;flex:none;fill:#fff}
/* uit beeld zodra er al een WhatsApp-knop op het scherm staat */
.zweef.is-weg{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}

/* ---------- diensten ---------- */
/* fotokaart per dienst; bewust niet doorklikbaar, de klant wil geen losse dienstpagina's */
.diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.dienst{
  position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;
  background:var(--zwart);display:flex;align-items:flex-end;
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.dienst:hover{transform:translateY(-3px);box-shadow:0 26px 48px -26px rgba(0,0,0,.6)}
.dienst img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease;
}
.dienst:hover img{transform:scale(1.045)}
/* tekst staat op de foto, dus altijd een donkere sluier eronder: anders valt wit wit weg */
.dienst::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.12) 66%,rgba(0,0,0,.22) 100%);
}
.dienst__tekst{position:relative;z-index:1;padding:20px 20px 17px;color:var(--wit)}
.dienst h3{margin-bottom:6px;font-size:1.5rem;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.dienst p{font-size:.93rem;line-height:1.5;color:rgba(255,255,255,.85);margin:0;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* grafiet als vlak, niet zwart: scheidt dit blok van de zwarte secties eronder */
.slot{
  margin-top:18px;padding:22px 26px;background:var(--grafiet);color:var(--wit);border-radius:22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;justify-content:space-between;
}
.slot p{margin:0;font-size:1.05rem;max-width:60ch;color:var(--lichtgrijs)}
.slot strong{color:var(--wit)}

/* ---------- inzetbaar ---------- */
.inzet{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--grafiet);border:1px solid var(--grafiet)}
.inzet>div{background:var(--zwart);padding:26px 26px}
.inzet h3{margin-bottom:10px}
.inzet p{font-size:.95rem;margin:0}
/* de tegel om een icoon is de drager in Carbon. Hier moet hij weg zonder het
   icoon mee te nemen, dus display:contents: het omhulsel verdwijnt uit de
   opmaak en de svg wordt zelf het flex-item. Alleen bij 'waar we werken'
   hoort er in deze stijl geen icoon te staan. */
.tegel{display:contents}
.inzet .tegel{display:none}

/* ---------- over ---------- */
.over{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,70px);align-items:center}
.over__beeld img{width:100%;height:clamp(340px,34vw,450px);object-fit:cover}
.feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn);margin-top:26px}
.feiten div{background:var(--wit);padding:18px 18px}
.feiten b{display:block;font-family:var(--kop);font-size:2.1rem;line-height:1}
.feiten span{font-size:.84rem;color:var(--grafiet)}

/* ---------- stappen ---------- */
.stappen{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.stap{background:var(--wit);padding:24px 24px;counter-increment:s;position:relative}
.stap::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--kop);font-size:2.2rem;line-height:1;
  color:var(--grafiet);display:block;margin-bottom:8px;
}
.stap h3{margin-bottom:8px}
.stap p{font-size:.94rem;color:var(--grafiet);margin:0}

/* ---------- klusinzicht ---------- */
.inzicht{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,5vw,64px)}
.inzicht__beeld{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:clamp(300px,31vw,400px);overflow:hidden}
/* min-height/min-width 0 is hier niet optioneel: een grid-item krijgt standaard
   min-height:auto, dus de foto's duwen de twee rijen voorbij de vaste hoogte van
   het blok en schilderen over de tekst eronder. overflow:hidden is de vangnet. */
.inzicht__beeld img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover}
.inzicht__beeld img:first-child{grid-row:span 2}

/* ---------- reviews ---------- */
.ws__kop{
  display:grid;grid-template-columns:1fr 1fr auto;gap:clamp(20px,4vw,60px);
  align-items:end;margin-bottom:clamp(28px,3.6vw,44px);
}
.ws__nav{display:flex;gap:10px}
.ws__pijl{
  width:44px;height:44px;flex:none;border-radius:999px;
  background:var(--wit);border:1px solid var(--lijn);color:var(--zwart);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .15s,background .15s,opacity .15s;
}
.ws__pijl:hover{border-color:var(--grafiet)}
.ws__pijl:disabled{opacity:.35;cursor:default;border-color:var(--lijn)}
.ws__pijl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws__titel{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ws__titel h2{margin:0}
.ws__merk{
  display:inline-flex;align-items:center;
  background:var(--wit);border:1px solid var(--lijn);border-radius:999px;
  padding:8px 16px;line-height:0;
}
.ws__merk img{width:auto;height:19px;display:block}
.ws__intro{font-size:1rem;color:var(--grafiet);max-width:52ch;margin:0}
.ws__intro a{color:var(--zwart);text-decoration:underline;text-underline-offset:3px}
.ws__lijst{
  display:flex;align-items:flex-start;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:1px;
  padding:2px 2px 8px;margin:-2px -2px -8px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ws__lijst::-webkit-scrollbar{display:none}
.ws__lijst:focus-visible{outline:2px solid var(--zwart);outline-offset:4px}
.review{
  flex:0 0 clamp(300px,27vw,350px);scroll-snap-align:start;
  background:var(--wit);border:1px solid var(--lijn);border-radius:16px;
  padding:24px 26px 20px;display:flex;flex-direction:column;
}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.review__top .sterren{font-size:1rem}
.review__datum{font-size:.84rem;color:var(--grafiet);white-space:nowrap}
.review p{font-size:1rem;margin-bottom:20px}
.review footer{
  margin-top:auto;padding-top:17px;border-top:1px solid var(--lijn);
  display:flex;align-items:center;gap:12px;
}
.review__cirkel{
  width:34px;height:34px;flex:none;border-radius:999px;
  background:var(--grafiet);color:var(--wit);
  font-size:.84rem;font-weight:600;display:grid;place-items:center;
}
.review__wie b{display:block;font-weight:600;font-size:.95rem;line-height:1.35}
.review__wie small{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--grafiet)}
.review__wie svg{
  width:14px;height:14px;flex:none;fill:var(--ws-paars);
  background:var(--ws-groen);border-radius:999px;padding:1px;
}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,70px)}
.contact__blok{display:grid;gap:1px;background:var(--grafiet);border:1px solid var(--grafiet);margin-bottom:26px}
.contact__blok a{
  background:var(--zwart);padding:20px 24px;text-decoration:none;
  display:flex;align-items:center;gap:16px;transition:background .15s;
}
.contact__blok a:hover{background:#141414}
.contact__blok svg{width:22px;height:22px;flex:none;fill:var(--wit)}
.contact__blok .rij--wa svg{fill:var(--wa)}
.contact__blok small{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--op-zwart-zacht);margin-bottom:2px}
.contact__blok strong{font-weight:600;font-size:1.05rem;color:var(--wit)}
.gebied{font-size:.95rem;color:var(--op-zwart)}
.gebied b{color:var(--wit);font-weight:600}

section[id],form[id]{scroll-margin-top:calc(var(--balk) + 20px)}

form{display:grid;gap:12px}
.form__kop{font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--wit);margin-bottom:4px}
label{display:grid;gap:6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--op-zwart-zacht)}
input,textarea,select{
  font-family:var(--tekst);font-size:1rem;color:var(--wit);
  background:#111;border:1px solid var(--grafiet);padding:13px 15px;width:100%;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--wit)}
textarea{min-height:96px;resize:vertical}
select{
  appearance:none;-webkit-appearance:none;border-radius:0;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239a9a9a'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:20px;padding-right:40px;
}
select:invalid{color:var(--op-zwart-zacht)}
select option{background:#111;color:var(--wit)}
.veld--bestand .veld__kop{display:block}
.veld--bestand em{font-style:normal;font-weight:400;color:#858585;letter-spacing:.1em;text-transform:none}
input[type=file]{padding:10px 12px;cursor:pointer;font-size:.9rem;color:var(--op-zwart)}
input[type=file]::file-selector-button{
  font-family:var(--tekst);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wit);background:transparent;border:1px solid var(--grafiet);
  padding:8px 14px;margin-right:14px;cursor:pointer;transition:border-color .15s;
}
input[type=file]:hover::file-selector-button{border-color:var(--wit)}
.form__klein{font-size:.82rem;line-height:1.5;color:#858585;margin:-4px 0 0;text-transform:none;letter-spacing:0}
.tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form .knop{justify-content:center}

/* ---------- voet ---------- */
.voet{background:var(--zwart);color:var(--op-zwart-zacht);border-top:1px solid var(--grafiet);padding:46px 0 36px;font-size:.88rem}
.voet__top{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.voet img{height:46px;width:auto}
.voet a{color:var(--op-zwart);text-decoration:none}
.voet a:hover{color:var(--wit)}
.voet__onder{border-top:1px solid var(--grafiet);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.82rem}

/* ---------- projecten ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filter{
  font-family:var(--tekst);font-size:.86rem;font-weight:600;cursor:pointer;
  padding:10px 20px;border:1px solid var(--lijn);border-radius:999px;background:var(--wit);color:var(--grafiet);
}
.filter:hover{border-color:var(--grafiet)}
.filter[aria-pressed=true]{background:var(--grafiet);color:var(--wit);border-color:var(--grafiet)}
.galerij{columns:3 300px;column-gap:14px}
.galerij figure{margin:0 0 14px;break-inside:avoid;position:relative;background:var(--lichtgrijs)}
.galerij img{width:100%;height:auto}
.galerij figcaption{
  position:absolute;inset:auto 0 0 0;padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));
  color:var(--wit);font-size:.88rem;opacity:0;transition:opacity .2s;
}
.galerij figure:hover figcaption,.galerij figure:focus-within figcaption{opacity:1}
.galerij figure[hidden]{display:none}

/* ---------- responsief ---------- */
@media (max-width:1080px){
  .balk nav{gap:18px}
  .balk nav a:not(.knop){font-size:.84rem}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;min-height:0;gap:34px}
  .hero__tekst{padding:56px 0 0}
  .hero__beeld{padding-bottom:40px}
  .dia{height:clamp(300px,58vw,420px);max-height:none}
  .hero__beeld::after{right:-10px;bottom:22px}
  .hero__badge{left:14px;bottom:60px}
  /* badge staat op tablet dichter op de rand van de foto */
  .hero__badge-ws .ws__mark{height:14px}
  .over,.inzicht,.contact{grid-template-columns:1fr}
  .ws__kop{grid-template-columns:1fr;align-items:start;gap:16px}
  .ws__nav{display:none}
  .ws__lijst{flex-wrap:nowrap}
  .review{flex-basis:min(86%,340px)}
  .inzicht__beeld{order:-1}
}
@media (max-width:720px){
  /* badge wordt anders breder dan de foto */
  .hero__badge-ws{display:none}
  .balk nav{display:none}
  .balk__mob{display:inline-flex;margin-left:auto}
  .balk .binnen{height:66px;gap:12px}
  .balk__logo img{height:29px}
  .thema button{padding:7px 12px;font-size:.72rem}
  :root{--balk:66px}
  .dienst h3{font-size:1.35rem}
  .over__beeld img{height:280px}
  .feiten{grid-template-columns:1fr 1fr}
  .feiten div:last-child{grid-column:1/-1}
  .tweekolom{grid-template-columns:1fr}
  .slot{flex-direction:column;align-items:flex-start}
  .galerij{columns:1}
  /* op de telefoon alleen een groene bel rechtsonder: een pil over de hele
     breedte legt zich over de inhoud en maakt het onderaan te druk */
  .zweef{right:16px;bottom:16px;left:auto;width:56px;height:56px;padding:0;gap:0}
  .zweef__woord{display:none}
  .zweef svg{width:27px;height:27px}
  /* op een telefoon valt het Werkspot-logo op een eigen regel; links uitgelijnd
     leest dat als een losse afbeelding, gecentreerd als een keurmerk */
  .hero__cijfer{align-self:center;justify-content:center;text-align:center}
}
@media (max-width:620px){
  /* logo plus stijlwisselaar plus belknop past hier niet meer naast elkaar
     met het woord Bellen erin; de belknop wordt een rond telefoonicoon */
  .balk .binnen{gap:8px;padding:0 16px}
  .balk__logo img{height:24px}
  .thema{padding:2px}
  .thema button{padding:6px 10px;font-size:.68rem;letter-spacing:.01em}
  .balk__bel-kort{display:block}
  .balk__bel-lang{display:none}
  .balk__mob{padding:11px 12px}
}
@media (max-width:400px){
  /* kleinste telefoons: alles een maatje kleiner, anders valt de belknop
     van het scherm af */
  .balk__logo img{height:21px}
  .thema button{padding:6px 8px;font-size:.65rem}
}
@media (max-width:345px){
  /* hier past de belknop er niet meer bij zonder het logo onleesbaar te maken.
     De belknop in de hero staat er vlak onder en blijft dus bereikbaar. */
  .balk__mob{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dia__foto.is-aan,.dia__foto.is-aan.dia--uit{animation:none;transform:none}
  .dia__foto{transition-duration:.2s}
}