@font-face{font-family:Generalsans;src:url("/templates/stroomvast-elektro/assets/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}






/* ---------- Ontwerptokens ---------- */
:root {
  --primair: #c9782e;
  --zwart: #0f1a2b;
  --wit: #fff;
  --licht: #fbf9f4;
  --tekst: #5d5d5d;
  --tekst-licht: #e0e0e0;
  --tekst-licht-80: rgba(224, 224, 224, .8);
  --grijs: #838383;
  --rand-licht: rgba(131, 131, 131, .5);
  --rand-donker: rgba(224, 224, 224, .5);
  --rand-wit-20: rgba(255, 255, 255, .2);
  --glas: rgba(0, 0, 0, .3);

  --golf: cubic-bezier(.25, 0, .75, 1);
  /* Exacte kwadratische power1.out: x=t, y=2t-t². */
  --uit: cubic-bezier(.3333333333, .6666666667, .6666666667, 1);

  /* typografische schaal (992–1279 px) */
  --h1: 60px; --h1-r: 70px;
  --h2: 50px; --h2-r: 60px;
  --h3: 46px; --h3-r: 56px;
  --h4: 40px; --h4-r: 50px;
  --h5: 30px; --h5-r: 40px;
  --h6: 20px; --h6-r: 30px;
  --groot: 90px; --groot-r: 100px;

  /* ruimte */
  --sectie: 100px;
  --g-xs: 10px;
  --g-xms: 15px;
  --g-s: 20px;
  --g-m: 30px;
  --g-l: 40px;
  --g-le: 50px;
  --g-xl: 60px;
  --zijruimte: 0px;
}
@media (min-width: 1280px) {
  :root { --h1: 70px; --h1-r: 80px; --h2: 60px; --h2-r: 70px; --h3: 50px; --h3-r: 60px; --groot: 115px; --groot-r: 125px; --g-xl: 40px; --g-le: 40px; }
}
@media (min-width: 1440px) {
  :root { --h1: 80px; --h1-r: 90px; --groot: 150px; --groot-r: 160px; --g-xl: 60px; --g-le: 50px; --zijruimte: 190px; }
}
@media (min-width: 1920px) {
  :root { --groot: 178px; --groot-r: 190px; }
}
@media (max-width: 991px) {
  :root {
    --h1: 50px; --h1-r: 60px; --h2: 40px; --h2-r: 50px; --h3: 36px; --h3-r: 46px;
    --h4: 34px; --h4-r: 44px; --h5: 26px; --h5-r: 36px; --groot: 70px; --groot-r: 80px;
    --sectie: 50px; --g-xs: 5px; --g-xms: 10px; --g-s: 15px; --g-m: 20px; --g-l: 30px; --g-le: 30px; --g-xl: 30px;
  }
}
@media (max-width: 767px) {
  :root { --h1: 40px; --h1-r: 50px; --h2: 36px; --h2-r: 46px; --h3: 32px; --h3-r: 42px; --h4: 30px; --h4-r: 40px; --h5: 24px; --h5-r: 34px; --h6: 18px; --h6-r: 28px; --groot: 60px; --groot-r: 70px; }
}
@media (max-width: 479px) {
  :root { --h1: 36px; --h1-r: 46px; --h2: 30px; --h2-r: 40px; --h3: 28px; --h3-r: 38px; --h4: 26px; --h4-r: 36px; --h5: 20px; --h5-r: 30px; --groot: 42px; --groot-r: 52px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: "Generalsans", Impact, sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: normal;
}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--zwart); font-weight: 500; letter-spacing: normal; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--primair); outline-offset: 3px; box-shadow: 0 0 0 5px var(--zwart); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.symbolen { position: absolute; width: 0; height: 0; overflow: hidden; }

.overslaan {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--primair); color: var(--zwart); padding: 10px 16px; font-weight: 500;
  transition: top .2s;
}
.overslaan:focus { top: 12px; }

.proefbalk {
  position: relative; z-index: 30;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  margin: 0; padding: 6px 15px;
  background: var(--zwart); color: var(--tekst-licht);
  font-size: 13px; line-height: 20px; text-align: center;
}
.proefbalk a { color: var(--primair); text-decoration: underline; text-underline-offset: 3px; }

.pagina { position: relative; }

.container { max-width: 1330px; margin: 0 auto; padding: 0 15px; }
.container-breed { padding: 0 15px; }
@media (min-width: 1440px) { .container-breed { padding: 0 100px; } }
.sectie { padding: var(--sectie) 0; }

.sectietitel { font-size: var(--h2); line-height: var(--h2-r); }
.grote-titel {
  font-size: var(--groot); line-height: var(--groot-r);
  text-transform: uppercase; white-space: nowrap; text-align: center; letter-spacing: 0;
}
.grote-titel--wit { color: var(--wit); }

/* gesplitste tekst */
.woord { display: inline-block; white-space: nowrap; }
.teken { display: inline-block; }
[data-held-titel] .teken, [data-lettertitel] .teken { transform-origin: 50% 100%; }

/* ---------- Logo ---------- */
.logo { display: block; width: 175px; }
.logo__beeld { width: 100%; height: auto; overflow: visible; }
.logo__beeld text { font-family: "Generalsans", sans-serif; }
@media (max-width: 991px) { .logo { width: 150px; } }

/* ---------- Knoppen ---------- */
.knop {
  position: relative;
  display: inline-flex; align-items: center; gap: 20px;
  padding: 10px 10px 10px 20px;
  border: 1px solid var(--zwart);
  background-color: var(--zwart);
  color: var(--wit);
  font-size: 18px; line-height: 28px; font-weight: 500;
  transition: background-color .2s var(--golf), border-color .2s var(--golf);
}
.knop:hover, .knop:focus-visible { transition-delay: .1s; }
.knop__tekst { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.knop__regel { position: relative; display: block; white-space: nowrap; transition: transform .3s var(--golf); }
.knop__regel--b { position: absolute; color: var(--zwart); transform: translateY(120%); }
.knop__pictogram {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; overflow: hidden;
  background-color: var(--wit); color: var(--zwart);
  transition: background-color .2s var(--golf);
}
.knop:hover .knop__pictogram, .knop:focus-visible .knop__pictogram { transition-delay: .1s; }
.knop__pijl { position: relative; width: 19px; height: 14px; transition: transform .3s var(--golf); }
.knop__pijl--b { position: absolute; transform: translateX(-150%); color: var(--wit); }
.knop:hover .knop__regel, .knop:focus-visible .knop__regel { transform: translateY(-120%); }
.knop:hover .knop__regel--b, .knop:focus-visible .knop__regel--b { transform: translateY(0); }
.knop:hover .knop__pijl, .knop:focus-visible .knop__pijl { transform: translateX(150%); }
.knop:hover .knop__pijl--b, .knop:focus-visible .knop__pijl--b { transform: translateX(0); }
/* donker: zwart → primair */
.knop--donker:hover, .knop--donker:focus-visible { background-color: var(--primair); border-color: var(--primair); }
.knop--donker:hover .knop__pictogram, .knop--donker:focus-visible .knop__pictogram { background-color: var(--zwart); }
/* lijn: transparant → primair */
.knop--lijn { background-color: var(--zwart); border-color: var(--rand-licht); }
.knop--lijn:hover, .knop--lijn:focus-visible { background-color: var(--primair); border-color: var(--primair); }
.knop--lijn:hover .knop__pictogram, .knop--lijn:focus-visible .knop__pictogram { background-color: var(--zwart); }
/* primair: primair → zwart */
.knop--primair { background-color: var(--primair); border-color: var(--primair); color: var(--zwart); }
.knop--primair .knop__regel--b { color: var(--wit); }
.knop--primair .knop__pictogram { background-color: var(--zwart); color: var(--wit); }
.knop--primair .knop__pijl--b { color: var(--zwart); }
.knop--primair:hover, .knop--primair:focus-visible { background-color: var(--zwart); border-color: var(--zwart); }
.knop--primair:hover .knop__pictogram, .knop--primair:focus-visible .knop__pictogram { background-color: var(--wit); }

/* tekstlink met rollende tekst en onderstreping */
.tekstlink {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; color: var(--wit);
  font-size: 18px; line-height: 28px; font-weight: 500;
}
.tekstlink__regel { position: relative; display: block; white-space: nowrap; }
.tekstlink__regel--b { position: absolute; transform: translateY(120%); }
.tekstlink__lijn { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wit); opacity: 0; transform: translateX(-100%); }

/* pijllink */
.pijllink { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 24px; overflow: hidden; color: var(--wit); }
.pijllink__pijl { position: relative; width: 24px; height: 14px; }
.pijllink__pijl--b { position: absolute; transform: translateX(-120%); }

/* ---------- Kop en menu ---------- */
.kop { position: absolute; left: 0; right: 0; top: auto; z-index: 20; }
.kop__balk {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 20px 15px;
}
@media (min-width: 1440px) { .kop__balk { padding-left: 100px; padding-right: 100px; } }
.kop__acties { display: flex; align-items: center; }
.hoofdmenu__lijst { display: flex; align-items: center; justify-content: center; gap: 40px; }
.menulink {
  display: inline-block; position: relative;
  color: var(--wit); font-weight: 500;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-underline-position: under;
  transition: text-decoration-color .3s, color .3s;
}
.menulink:hover, .menulink:focus-visible, .uitklap__knop:hover .menulink, .uitklap.is-open .menulink { text-decoration-color: currentColor; }
.uitklap__knop {
  position: relative; display: flex; align-items: center;
  padding: 0 18px 0 0; border: 0; background: none; cursor: pointer; color: var(--wit);
}
.uitklap__pijltje { position: absolute; right: 0; top: 50%; width: 12px; height: 8px; margin-top: -4px; transition: transform .5s var(--uit); }
.uitklap.is-open .uitklap__pijltje { transform: rotate(180deg); }

/* megamenu (desktop) */
.megamenu__link.is-actief { color:var(--wit); }
.megamenu { position: absolute; left: 0; right: 0; top: 58px; z-index: 30; }
.megamenu__vlak {
  position: relative; width: 960px; max-width: calc(100% - 30px); margin: 20px auto 0; padding: 40px;
  background: var(--glas); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);
}
.megamenu__raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--g-le); }
.megamenu__links { grid-column: span 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-s); }
.megamenu__blok--breed { grid-column: span 2; }
.megamenu__blok { display: flex; flex-direction: column; gap: 20px; }
.megamenu__kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.megamenu__blok ul { display: flex; flex-direction: column; gap: 8px; }
.megamenu__titel { color: var(--wit); font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: normal; }
.megamenu__link {
  color: var(--tekst-licht); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-underline-position: under; transition: text-decoration-color .3s;
}
.megamenu__link:hover, .megamenu__link:focus-visible, .megamenu__link.is-actief { text-decoration-color: var(--wit); }
.megamenu__beeld { grid-column: span 2; position: relative; height: 280px; overflow: hidden; }
.megamenu__beeld img { width: 100%; height: 100%; object-fit: cover; }

.hamburger { display: none; }

@media (max-width: 991px) {
  .kop__balk { padding-top: 15px; padding-bottom: 15px; gap: 20px; }
  .kop__knop { display: none; }
  .hamburger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    width: 44px; height: 44px; padding: 10px; border: 0; background: var(--zwart); cursor: pointer;
  }
  .hamburger__streep { display: block; width: 16px; height: 2px; background: var(--wit); transition: transform .3s, opacity .3s; }
  .hoofdmenu { position: absolute; left: 0; right: 0; top: 100%; overflow: hidden; visibility: hidden; pointer-events: none; transition: visibility 0s .4s; }
  .hoofdmenu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .hoofdmenu__paneel {
    margin: 0 15px; padding: 17px 20px; background: var(--licht);
    transform: translateY(-100%); transition: transform .4s ease;
  }
  .hoofdmenu.is-open .hoofdmenu__paneel { transform: translateY(0); }
  .hoofdmenu__lijst { display: block; }
  .hoofdmenu__lijst > li { padding: 3px 0; }
  .menulink { display: block; color: var(--zwart); }
  .uitklap__knop { width: 100%; color: var(--zwart); text-align: left; }
  .uitklap__knop .menulink { display: inline-block; }
  .megamenu { position: static; }
  .megamenu__vlak { width: auto; max-width: none; margin: 10px 0 0; padding: 15px 20px 20px; background: var(--zwart); -webkit-backdrop-filter: none; backdrop-filter: none; transform: none !important; opacity: 1 !important; }
  .megamenu__blok { gap: var(--g-xs); }
  .megamenu__titel { font-size: var(--h6); line-height: var(--h6-r); }
  .megamenu__link { color: var(--tekst-licht); }
  .megamenu__beeld { display: none; }
}
@media (max-width: 767px) {
  .megamenu__raster { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .megamenu__links { grid-template-columns: 1fr 1fr; gap: var(--g-xms); }
  .megamenu__blok--breed { grid-column: span 2; }
  .megamenu__kolommen { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Held ---------- */
.held { position: relative; overflow: hidden; background: var(--zwart); }
.held__achtergrond { position: absolute; inset: 0; overflow: hidden; }
.held__achtergrond img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.held__achtergrond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.42) 55%, rgba(0,0,0,.25)), linear-gradient(0deg, rgba(0,0,0,.35), transparent 40%);
}
.held__omhulsel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 800px; padding: 100px 0;
}
.held__inhoud { display: flex; justify-content: space-between; align-items: stretch; gap: 100px; min-height: 522px; }
.held__links { display: flex; flex-direction: column; gap: var(--g-l); }
.held__tekstblok { display: flex; flex-direction: column; gap: var(--g-xs); }
.held__label { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--g-xs); color: var(--wit); font-size: 18px; line-height: 28px; font-weight: 500; }
.held__label svg { width: 20px; height: 20px; color: var(--wit); }
.held__titelvak { max-width: 829px; margin-right: -120px; }
.held__titel { color: var(--wit); font-size: var(--h1); line-height: var(--h1-r); }
.accent { color: var(--primair); }
.held__knopvak { display: inline-flex; align-self: flex-start; }
.held__rechts { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-self: stretch; width: 560px; }

.kaartstapel { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 480px; max-width: 480px; max-height: 156px; }
.stapelkaart {
  position: absolute; width: 100%;
  background: var(--glas); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);
  padding: 16px; display: flex; align-items: center; gap: var(--g-m);
}
.stapelkaart:first-child { position: relative; }
.stapelkaart__beeld { flex: none; width: 132px; height: 124px; overflow: hidden; }
.stapelkaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.stapelkaart__tekst { display: flex; flex-direction: column; justify-content: space-between; gap: var(--g-s); max-width: 286px; height: 124px; color: var(--wit); }
.stapelkaart__titel { color: var(--wit); font-size: var(--h6); line-height: var(--h6-r); }

@media (max-width: 991px) {
  .held__omhulsel { min-height: 0; padding: 180px 0 60px; }
  .held__inhoud { min-height: 0; }
  .held__titelvak { margin-right: 0; }
  .held__rechts { display: none; }
}
@media (max-width: 479px) {
  .held__achtergrond img { object-position: 0% 50%; }
  .held__omhulsel { padding-top: 145px; }
  .held__label { display: none; }
}

/* ---------- Beeldvak met onthullende dekking ---------- */
.beeldvak { position: relative; overflow: hidden; }
.beeldvak img { width: 100%; height: 100%; object-fit: cover; }
.beeldvak__dekking { position: absolute; left: 0; right: 0; top: 0; height: 0; background: var(--wit); }
.beeldvak__dekking--zwart { background: var(--zwart); }
.js .beeldvak__dekking { height: 100%; }

/* ---------- Over ons ---------- */
.over__omhulsel { display: flex; flex-direction: column; gap: 100px; }
.over__kop { display: grid; grid-template-columns: 4fr 8fr; gap: var(--g-s); }
.over__tekst { color: var(--zwart); font-size: var(--h5); line-height: var(--h5-r); font-weight: 500; letter-spacing: normal; }
.over__raster { display: grid; grid-template-columns: 8fr 4fr; gap: var(--g-xl); align-items: stretch; }
.over__beelden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-m); }
.over__beeld--laag { align-self: end; aspect-ratio: 736 / 766; }
.over__beeld--hoog { aspect-ratio: 736 / 1069; }
.over__info { display: flex; flex-direction: column; justify-content: space-between; gap: var(--g-s); height: 100%; }
.over__infotop { display: flex; flex-direction: column; gap: var(--g-xs); }
.over__infotitel { font-size: var(--h6); line-height: var(--h6-r); }
.tellers { display: flex; flex-direction: column; gap: var(--g-m); }
.teller {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--g-xs);
  padding-bottom: 5px; border-bottom: 1px solid var(--rand-donker);
}
.teller__getal { display: inline-flex; color: var(--zwart); font-size: var(--h4); line-height: var(--h4-r); font-weight: 500; }
.teller__label { font-size: 18px; line-height: 28px; font-weight: 500; }
@media (max-width: 991px) {
  .over__omhulsel { gap: 30px; }
  .over__kop, .over__raster { grid-template-columns: 1fr; }
  .over__beelden { gap: var(--g-m); }
}
@media (max-width: 479px) { .over__beelden { display: none; } }

/* ---------- Diensten ---------- */
.diensten { position: relative; overflow: hidden; background: var(--zwart); }
.diensten__achtergrond { position: absolute; inset: 0; overflow: hidden; }
.diensten__achtergrond img { width: 100%; height: 100%; object-fit: cover; }
.diensten__achtergrond::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.diensten__omhulsel { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 800px; padding: var(--sectie) 0; }
.diensten__titelvak { position: absolute; left: 0; right: 0; bottom: -30px; }
.diensten__carrousel { position: relative; cursor: grab; touch-action: pan-y; }
.diensten__carrousel.is-slepen { cursor: grabbing; }
.diensten__carrousel:focus-visible { outline-offset: 6px; }
.diensten__rij { display: flex; gap: var(--g-m); will-change: transform; }
.dienstkaart { flex: none; display: flex; flex-direction: column; justify-content: center; width: 452px; max-width: 452px; min-height: 492px; }
.dienstkaart__binnen {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--g-m);
  min-height: 492px; padding: 30px;
  background: var(--glas); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);
}
.dienstkaart__beeld { width: 150px; height: 150px; flex: none; }
.dienstkaart__tekst { display: flex; flex-direction: column; gap: var(--g-xs); padding-bottom: 20px; }
.dienstkaart__titel { color: var(--wit); font-size: var(--h5); line-height: var(--h5-r); }
.dienstkaart__omschrijving { color: var(--tekst-licht); font-size: 18px; line-height: 28px; }
.dienstkaart__acties { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--rand-donker); }
.dienstkaart img { -webkit-user-drag: none; user-select: none; }
@media (max-width: 991px) {
  .diensten__omhulsel { min-height: 0; gap: var(--g-le); }
  .diensten__titelvak { position: relative; bottom: auto; }
  .dienstkaart { min-height: 0; }
  .dienstkaart__binnen { min-height: 0; padding: 20px; }
}
@media (max-width: 767px) { .dienstkaart { max-width: 400px; } }
@media (max-width: 479px) { .dienstkaart { max-width: 260px; } .dienstkaart__omschrijving { display: none; } }

/* ---------- Werkwijze ---------- */
.werkwijze { background: var(--licht); }
.werkwijze__omhulsel { display: flex; flex-direction: column; gap: var(--g-l); padding: 0 var(--zijruimte); }
.werkwijze__kop { display: flex; justify-content: space-between; gap: var(--g-s); }
.werkwijze__titel { max-width: 50%; }
.werkwijze__klanten { display: flex; flex-direction: column; gap: var(--g-s); }
.werkwijze__klanten > div, .oproep__score > .gezichten { display: flex; }
.werkwijze__score { font-weight: 500; }
.stappen { display: flex; flex-direction: column; }
.stap { border-bottom: 1px solid var(--rand-donker); }
.stap:first-child { border-top: 1px solid var(--rand-donker); }
.stap__binnen { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--g-s); padding: 40px 120px 40px 0; }
.stap__kop { display: flex; align-items: center; gap: var(--g-xs); min-width: 300px; }
.stap__stip { flex: none; width: 10px; height: 10px; background: var(--tekst-licht); }
.stap__titel { font-size: var(--h5); line-height: var(--h5-r); }
.stap__letter { position: absolute; right: 0; bottom: -15px; color: var(--zwart); font-size: var(--h1); line-height: var(--h1-r); font-weight: 500; opacity: .2; }
@media (max-width: 991px) { .stap__binnen { padding: 20px 60px 20px 0; } .stap__letter { bottom: -10px; } }
@media (max-width: 767px) { .werkwijze__kop { flex-direction: column; } .werkwijze__titel { max-width: 100%; } .stap__kop { min-width: 200px; } }
@media (max-width: 479px) { .stap__binnen { flex-direction: column; align-items: flex-start; padding-right: 40px; } .stap__kop { min-width: 0; } }

/* gezichtenrij (lopende band) */
.gezichten { position: relative; display: inline-flex; align-items: center; width: 140px; padding-right: 30px; overflow: hidden; }
.gezichten__rij { position: relative; z-index: 1; display: flex; align-items: center; width: 140px; height: 50px; overflow: hidden; }
.gezichten__item { position: absolute; left: 0; top: 0; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; }
.gezichten__item img { width: 100%; height: 100%; object-fit: cover; }
.gezichten__item:nth-child(1) { transform: translateX(0); z-index: 1; }
.gezichten__item:nth-child(2) { transform: translateX(30px); z-index: 2; }
.gezichten__item:nth-child(3) { transform: translateX(60px); z-index: 3; }
.gezichten__item:nth-child(n+4) { opacity: 0; transform: translateX(90px); }
.gezichten__plus {
  position: absolute; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--zwart); color: var(--wit);
}
.gezichten__plus svg { width: 14px; height: 14px; }
.gezichten--donker .gezichten__plus { background: var(--glas); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); }

/* ---------- Team ---------- */
.team__omhulsel { position: relative; }
.team__titelvak { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; }
.team__leden { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; margin-top: -100vh; }
.teamlid--2 { padding-right: 100px; }
.teamlid--3 { padding-left: 100px; }
.teamlid__kaart { position:relative; display:inline-flex; flex-direction:column; max-width:350px; width:100%; overflow:hidden; color:var(--tekst); vertical-align:top; }
.teamlid { display: block; }
.teamlid--1, .teamlid--3, .teamlid--5 { text-align:left; }
.teamlid--2, .teamlid--4 { text-align: right; }
.teamlid__beeld { display: block; aspect-ratio: 736 / 792; overflow: hidden; }
.teamlid__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--uit) .1s; }
.teamlid__verloop { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--zwart)); opacity: 0; transition: opacity .5s var(--uit); }
.teamlid__tekst {
  position:relative; display:flex; flex-direction:column; padding:20px; text-align:left;
  transform:none; transition:transform .3s var(--uit) .2s;
}
.teamlid__naam { color: var(--wit); font-size: var(--h6); line-height: var(--h6-r); font-weight: 600; letter-spacing: normal; }
.teamlid__rol { color: var(--tekst-licht); }
.teamlid__kaart:hover .teamlid__beeld img, .teamlid__kaart:focus-visible .teamlid__beeld img { transform: scale(1.03); }
.teamlid__kaart:hover .teamlid__verloop, .teamlid__kaart:focus-visible .teamlid__verloop { opacity: 1; }
.teamlid__kaart:hover .teamlid__tekst, .teamlid__kaart:focus-visible .teamlid__tekst { transform: translateY(0); }
.teamlid__kaart:not(:hover):not(:focus-visible) .teamlid__beeld img { transition-delay: 0s; }
.teamlid__kaart:not(:hover):not(:focus-visible) .teamlid__tekst { transition-delay: 0s; }
@media (max-width: 991px) {
  .team__omhulsel { display: flex; flex-direction: column; gap: var(--g-le); }
  .team__titelvak { position: relative; top: auto; min-height: 0; }
  .team__leden { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g-m); min-height: 0; margin-top: 0; }
  .teamlid--2, .teamlid--3 { padding: 0; }
  .teamlid--2, .teamlid--4 { text-align: left; }
}
@media (max-width: 767px) { .team__leden { grid-template-columns: 1fr 1fr; } }

/* ---------- Oproep ---------- */
.oproep { overflow: hidden; padding-bottom: 0; }
.oproep__binnen { position: relative; padding: 100px 0 60px; background: var(--zwart); }
.oproep__achtergrond { position: absolute; inset: 0; overflow: hidden; }
.oproep__achtergrond img { width: 100%; height: 100%; object-fit: cover; }
.oproep__verloop {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, var(--zwart), transparent 20%),
    linear-gradient(90deg, var(--zwart), transparent 20%),
    linear-gradient(0deg, var(--zwart), transparent 36%),
    rgba(0, 0, 0, .6);
}
.oproep__omhulsel { position: relative; display: flex; flex-direction: column; gap: 100px; }
.oproep__rij { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--g-s); }
.oproep__vak { max-width: 500px; }
.oproep__links { display: flex; flex-direction: column; gap: var(--g-l); }
.labels { display: flex; flex-wrap: wrap; gap: var(--g-xs); }
.label {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px;
  background: var(--glas); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); color: var(--wit);
}
.oproep__teller { display: flex; flex-direction: column; gap: 5px; }
.oproep__getal { display: flex; color: var(--wit); font-size: var(--h3); line-height: var(--h3-r); font-weight: 500; }
.oproep__getallabel { color: var(--wit); }
.oproep__rechts { display: flex; flex-direction: column; gap: var(--g-m); }
.oproep__score { display: flex; justify-content: flex-end; align-items: center; gap: var(--g-xs); }
.oproep__cijfer { color: var(--wit); font-size: var(--h3); line-height: var(--h3-r); font-weight: 500; }
.oproep__lijn { flex: none; width: 100px; height: 1px; background: var(--wit); }
.oproep__ster {
  flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--glas); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); color: #f7a81b;
}
.oproep__ster svg { width: 18px; height: 18px; }
.oproep__tekst { color: var(--wit); font-weight: 500; }
.oproep__rij--onder { align-items: flex-start; }
.oproep__vak--beeld { flex: 0 1 396px; min-width: 0; max-width: 418px; position: relative; background: var(--wit); }
.oproep__beeld { width: 100%; aspect-ratio: 736 / 747; }
/* krimpt naar verhouding zoals het origineel: basis = natuurlijke breedte van de titel op één regel (17,7146875 × h1, gekalibreerd op de gemeten bronrects) */
.oproep__vak--tekst { flex: 0 1 calc(var(--h1) * 17.7146875); max-width: 824px; padding-top: 5px; }
.oproep__titelvak { display: flex; flex-direction: column; gap: var(--g-l); }
.oproep__titel { color: var(--wit); font-size: var(--h1); line-height: var(--h1-r); }
@media (min-width: 1280px) {
  .oproep { padding-bottom: 60px; }
  .oproep__binnen { padding-bottom: 0; }
  .oproep__rij--onder { margin-bottom: -60px; }
}
@media (max-width: 991px) {
  .oproep__binnen { padding: var(--sectie) 0; }
  .oproep__omhulsel { gap: var(--g-le); }
}
@media (max-width: 767px) {
  .oproep__rij { flex-direction: column; }
  .oproep__vak--tekst { flex-basis: auto; }
  .oproep__vak--beeld { display: none; }
  .oproep__score { justify-content: flex-start; }
  .oproep__lijn--tweede, .oproep__ster { display: none; }
}
@media (max-width: 479px) {
  .oproep__teller, .oproep__tekst { display: none; }
  .oproep__lijn { width: 50px; }
}

/* ---------- Tarieven ---------- */
.tarieven__kopraster { position: sticky; top: 50px; display: grid; grid-template-columns: 5fr 7fr; gap: var(--g-xl); }
.tarieven__kop { display: flex; flex-direction: column; gap: var(--g-s); padding-bottom: 120px; }
.tarieven__tabs { display: flex; margin-top: -320px; }
.tabknoppen {
  position: sticky; top: 300px; align-self: flex-start;
  display: inline-flex; gap: var(--g-xs); margin-top: 235px; padding: 8px;
  border: 1px solid var(--rand-donker); overflow: hidden;
}
.tabknop {
  display: flex; align-items: center; justify-content: center; width: 94px; padding: 8px 12px;
  border: 0; background: var(--wit); color: var(--zwart); cursor: pointer;
  font-size: 18px; line-height: 28px; font-weight: 500;
}
.tabknop.is-actief { background: var(--primair); }
.tabpanelen { width: 54%; margin-left: auto; }
.pakketten { display: grid; grid-template-columns: 1fr; gap: var(--g-m); }
.pakket__binnen { position: relative; padding: 40px; }
.pakket__binnen--donker { background: var(--zwart); }
.pakket__binnen--licht { background: var(--licht); }
.pakket__badge { position: absolute; top: 0; right: 20px; display: inline-flex; padding: 5px 15px; background: var(--primair); color: var(--zwart); }
.pakket__inhoud { display: flex; flex-direction: column; gap: var(--g-m); }
.pakket__info { display: flex; flex-direction: column; gap: 10px; }
.pakket__namen { display: flex; flex-direction: column; gap: 5px; }
.pakket__label { font-weight: 500; }
.pakket__naam { font-size: var(--h5); line-height: var(--h5-r); }
.pakket__prijs { display: flex; align-items: flex-end; }
.pakket__bedrag { color: var(--zwart); font-size: var(--h2); line-height: var(--h2-r); font-weight: 500; }
.pakket__per { padding-bottom: 8px; }
.pakket__binnen--donker .pakket__label, .pakket__binnen--donker .pakket__per, .pakket__binnen--donker .kenmerk { color: var(--tekst-licht); }
.pakket__binnen--donker .pakket__naam, .pakket__binnen--donker .pakket__bedrag { color: var(--wit); }
.kenmerken { display: flex; flex-wrap: wrap; gap: 14px; }
.kenmerk { display: flex; align-items: flex-start; gap: 8px; width: 48%; }
.kenmerk svg { flex: none; width: 17px; height: 17px; margin-top: 5px; }
.kenmerk.is-uit > span { text-decoration:none; }
.pakket__knop { padding-top: 10px; }
@media (max-width: 991px) {
  .tarieven__omhulsel { display: flex; flex-direction: column; gap: var(--g-le); }
  .tarieven__kopraster { position: relative; top: auto; grid-template-columns: 1fr; }
  .tarieven__kop { padding-bottom: 0; }
  .tarieven__tabs { flex-direction: column; margin-top: 0; }
  .tabknoppen { position: relative; top: auto; margin-top: 0; }
  .tabpanelen { width: 100%; margin: var(--g-m) 0 0; }
  .pakketten { grid-template-columns: 1fr 1fr; }
  .pakket__binnen { padding: 20px; }
  .kenmerken { flex-direction: column; }
  .kenmerk { width: 100%; }
}
@media (max-width: 479px) { .pakketten { grid-template-columns: 1fr; } }

/* ---------- Blog ---------- */
.blog { background: var(--zwart); overflow: hidden; }
.blog__omhulsel { position: relative; display: flex; flex-direction: column; align-items: center; }
.blog__stippen {
  position: absolute; top: 54px; z-index: 8; width: 100%; max-width: 500px;
  display: flex; align-items: center; gap: 15px; padding: 3px 0;
}
.blog__stip { position: relative; z-index: 5; flex: none; width: 100px; height: 2px; padding: 0; border: 0; background: rgba(255, 255, 255, .12); overflow: hidden; cursor: pointer; }
.blog__stip::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.blog__voortgang { position: absolute; inset: 0; background: var(--wit); transform-origin: 0 50%; transform: translateX(100%) scaleX(0); }
.blog__dias { position: relative; z-index: 7; width: 100%; height: 80vh; max-height: 80svh; }
.blogdia { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; align-items: center; }
.blogdia.is-actief, .blogdia.is-zichtbaar { display: flex; }
.blogdia__beeld { position: absolute; inset: 0; width: 100%; height: 80vh; max-height: 80svh; overflow: hidden; }
.blogdia__beeld img { width: 100%; height: 100%; object-fit: cover; }
.blogdia__verloop {
  position: absolute; inset: -1%; opacity: .8;
  background: linear-gradient(180deg, var(--zwart), transparent 25%), linear-gradient(180deg, transparent 52%, var(--zwart));
}
.blogdia__vorige, .blogdia__volgende { position: absolute; top: 0; z-index: 2; width: 50%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.blogdia__vorige { left: 0; }
.blogdia__volgende { right: 0; }
.blogdia__inhoud {
  position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; gap: var(--g-l);
  width: 100%; max-width: 500px; min-height: calc(80vh - 120px);
}
.blogdia__meta { display: flex; align-items: center; gap: var(--g-s); padding-top: 20px; }
.blogdia__auteur { display: flex; align-items: center; gap: var(--g-s); }
.blogdia__foto { flex: none; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; }
.blogdia__foto img { width: 100%; height: 100%; object-fit: cover; }
.blogdia__naam, .blogdia__datum { color: var(--wit); font-size: 18px; line-height: 28px; font-weight: 500; }
.blogdia__streep { width: 1px; height: 36px; background: rgba(255, 255, 255, .3); }
.blogdia__onder { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g-s); }
.blogdia__titel { color: var(--wit); font-size: var(--h5); line-height: var(--h5-r); }
.blogdia__titel .teken { will-change: transform; }
.blogdia__titel .woord { overflow: hidden; vertical-align: top; }
@media (max-width: 991px) {
  .blog { background: var(--wit); }
  .blogdia__verloop { background: linear-gradient(#00000080,#00000080); opacity: .8; }
}
@media (max-width: 767px) {
  .blogdia__meta { padding-top: 50px; }
  .blog__stippen, .blogdia__inhoud { max-width: 450px; }
}
@media (max-width: 479px) {
  .blogdia__meta { flex-direction: column; align-items: flex-start; }
  .blogdia__streep { display: none; }
  .blog__stippen { max-width: none; flex-wrap: wrap; justify-content: center; }
  .blogdia__inhoud { max-width: none; padding: 0 15px; }
}

/* ---------- Voet ---------- */
.voet { background: var(--zwart); padding-top: 80px; }
.voet__omhulsel, .voet__boven { display: flex; flex-direction: column; gap: var(--g-xl); }
.voet__raster { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: var(--g-le); }
.voet__titel { color: var(--wit); font-size: var(--h5); line-height: var(--h5-r); font-weight: 500; letter-spacing: normal; }
.voet__blok { display: flex; flex-direction: column; gap: var(--g-xms); }
.voet__kop { color: var(--wit); font-size: var(--h6); line-height: var(--h6-r); }
.voet__tekst { color: var(--tekst-licht-80); font-size: 18px; line-height: 28px; }
.voet__link, .voet__klein {
  display: inline-block; color: var(--tekst-licht-80); font-size: 18px; line-height: 28px;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-underline-position: under; transition: all .3s;
}
.voet__link:hover, .voet__link:focus-visible { color: var(--wit); text-decoration-color: var(--wit); }
.voet__lijst { display: flex; flex-direction: column; gap: var(--g-xs); }
.sociaal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-xs); }
.sociaal__link { position: relative; display: flex; width: 24px; height: 24px; }
.sociaal__a, .sociaal__b { width: 24px; height: 24px; transition: opacity .3s var(--uit); }
.sociaal__a { color: var(--grijs); opacity:0; }
.sociaal__b { position: absolute; inset: 0; color: var(--wit); opacity: 1; }
.sociaal__link:hover .sociaal__a, .sociaal__link:focus-visible .sociaal__a { opacity: 1; }
.sociaal__link:hover .sociaal__b, .sociaal__link:focus-visible .sociaal__b { opacity: 0; }
.voet__beeld { align-self: start; aspect-ratio: 736 / 442; }
.voet__menu { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-m); }
.aanmelden__label { display: block; margin-bottom: 10px; color: var(--tekst-licht-80); font-weight: 500; }
.aanmelden__veld { position: relative; }
.aanmelden__invoer {
  display: block; width: 100%; height: 58px; padding: 20px 60px 20px 20px; margin: 0;
  border: 1px solid transparent; border-radius: 0; background: rgba(255, 255, 255, .1); color: var(--wit);
  font: inherit; font-size: 14px; line-height: 20px; letter-spacing: inherit; transition: all .3s;
}
.aanmelden__invoer::placeholder { color: var(--grijs); }
.aanmelden__invoer:focus { outline: none; border-color: var(--rand-licht); }
.aanmelden__invoer:focus-visible { outline: 2px solid var(--primair); outline-offset: 2px; }
.aanmelden__knop {
  position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; background: var(--wit); color: var(--zwart); cursor: pointer; transition: all .3s;
}
.aanmelden__knop svg { width: 14px; height: 11px; }
.aanmelden__knop:hover, .aanmelden__knop:focus-visible { background: var(--primair); }
.aanmelden__knop:hover img, .aanmelden__knop:focus-visible img { filter:brightness(0); }
.aanmelden__melding { margin-top: 10px; padding: 10px 14px; background: var(--zwart); color: var(--primair); }
.aanmelden__fout { margin-top: 10px; color: #ffb4a8; }
.voet__onder { padding: 30px 0; border-top: 1px solid var(--rand-wit-20); }
.voet__copyright { color: var(--tekst-licht); text-align: center; }
.voet__klein { margin: 0 3px; color: var(--tekst-licht); font-size: 16px; line-height: 26px; }
.voet__klein:hover, .voet__klein:focus-visible { color: var(--primair); text-decoration-color: var(--primair); }
@media (min-width: 1440px) { .voet__raster { gap: 120px; } }
@media (min-width: 1920px) { .voet__raster { gap: 240px; } }
@media (max-width: 991px) {
  .voet { padding-top: var(--sectie); }
  .voet__raster { grid-template-columns: 5fr 4fr 3fr; }
  .voet__slogan { grid-column: span 2; }
  .voet__beeld { display: none; }
  .voet__raster--midden .voet__menu { grid-column: 2 / span 2; grid-row: 1; }
  .voet__raster--midden .voet__nieuwsbrief { grid-column: 1; grid-row: 1; }
}
@media (max-width: 767px) {
  .voet__raster { grid-template-columns: 1fr 1fr; }
  .voet__slogan { grid-column: auto; }
  .voet__raster--midden .voet__menu { grid-column: auto; grid-row: auto; }
  .voet__raster--midden .voet__nieuwsbrief { grid-column: auto; grid-row: auto; }
}
@media (max-width: 479px) { .voet__raster { grid-template-columns: 1fr; } }

/* ---------- Beginstanden van animaties (alleen met JS en beweging) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .kaartstapel { visibility:hidden; }
  .js [data-onthul] { opacity: 0; transform: translateY(30px); }
  .js [data-held-label], .js [data-held-knop] { opacity: 0; transform: translateY(50px); }
  .js [data-held-titel], .js [data-lettertitel], .js [data-vervaagtitel] { visibility: hidden; }
  .js [data-held-beeld] img { transform: scale(1.1); }
  .js [data-stip] { opacity: 0; }
  .js [data-steplet] { opacity: 0; transform: translateY(100%); }
  .js .blogdia [data-blog-deel] { opacity: 0; transform: translateY(100px); }
  .js .blogdia.is-actief [data-blog-deel] { opacity: 1; transform: none; }
}

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .beeldvak__dekking, .js .beeldvak__dekking { height: 0; }
}

/* 23 oktober: gemeten correcties op bestaande Claude-componenten. */
.held__achtergrond::after { display:none; }
.held__label img { width:20px;height:20px; }
.oproep__ster img { width:18px;height:18px; }
.kenmerk > img { width:auto;height:auto;padding-top:5px;flex:none; }
.diensten__achtergrond::after { display:none; }
.oproep__verloop { background:linear-gradient(270deg,#000,transparent 20%,transparent),linear-gradient(90deg,#000,transparent 20%,transparent),linear-gradient(0deg,#000,transparent 36%,transparent),linear-gradient(#0008,#0008); }

.megamenu__beeld video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.megamenu__video-toggle { position:absolute;bottom:30px;right:30px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:var(--glas);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);cursor:pointer;transition:background-color .3s; }
.megamenu__video-toggle:hover { background:var(--zwart); }
.megamenu__video-toggle img { width:auto;height:auto;filter:invert(1); }
[hidden] { display:none !important; }

/* Zichtbare voorbeeldpromoties uit de bron, zonder aankoop/navigatie. */
.referentie-badges { position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column; }
.referentie-badges__aanbod { display:inline-flex;align-items:center;justify-content:center; }
.referentie-badges__aanbod > a { display:inline-flex;width:150px;height:170px;padding:3px;background:#fff9;border-radius:10px;box-shadow:0 0 10px #0003; }
.referentie-badges__vlak { display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:8px;width:100%;height:100%;border-radius:8px;padding:10px;background:#000 linear-gradient(#0008,#000);background-image:linear-gradient(#00000080,#000),none;background-position:0 0,50%;background-repeat:repeat,no-repeat;background-size:auto,cover; }
.referentie-badges__titel { color:white;text-align:center;font-size:18px;font-weight:600;line-height:24px; }
.referentie-badges__subtitel { color:white;text-align:center;font-size:14px;font-weight:600;line-height:24px;margin-top:-8px; }
.referentie-badges__koop { display:flex;align-items:center;justify-content:center;gap:8px;padding:5px;background:#ffc300;color:#000;border-radius:8px;font-size:13px;font-weight:500;line-height:23px;white-space:nowrap; }
.referentie-badges__koop img { flex:none; }
.referentie-badges__meer { display:flex;align-items:center;justify-content:center;min-height:50px; }
.referentie-badges__meer a { display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;padding:4px;border-radius:18px;background:#ff3067;box-shadow:0 2px 20px #ff306770;color:white;font-size:13px;line-height:23px; }
.referentie-badges__meer img { width:26px;height:auto;object-fit:cover; }
@media(max-width:479px) { .referentie-badges__aanbod>a {width:135px} .referentie-badges__titel {font-size:15px;line-height:15px} .referentie-badges__subtitel {font-size:12px;line-height:22px} .referentie-badges__koop,.referentie-badges__meer a {font-size:11px;line-height:21px} }

.aanmelden__knop img { width:14px;height:19px; }
.js.beweging .knop,.js.beweging .knop__regel,.js.beweging .knop__pictogram,.js.beweging .knop__pijl,
.js.beweging .teamlid__beeld img,.js.beweging .teamlid__verloop,.js.beweging .teamlid__tekst,
.js.beweging .sociaal__a,.js.beweging .sociaal__b { transition:none !important; }

/* Menu-icoon: drie eigen CSS-lijnen, zonder pictogramlettertype. */




.voet__tekst .voet__link { text-decoration-thickness:auto; }

.proefbalk{position:relative;margin:0;padding:8px 16px;background:#c9782e;color:#182313;text-align:center;font-size:11px;line-height:1.4}.logo__beeld{width:150px;height:auto;max-height:52px;object-fit:contain}.megamenu__beeld>img{width:100%;height:100%;object-fit:cover}.referentie-badges{display:none}

/* Onafhankelijke review: tekstlagen mogen niet door elkaar heen lezen. */
.megamenu__vlak,.stapelkaart{background:#161c18}
.stapelkaart:not(:first-child){opacity:0}
@media(prefers-reduced-motion:reduce){.stapelkaart:not(:first-child){display:none}}

.kaartstapel{max-height:none}.stapelkaart__tekst{height:auto;min-height:124px}
.stapelkaart:not(:first-child) .stapelkaart__tekst,.stapelkaart:not(:first-child) .stapelkaart__beeld{visibility:hidden}

/* Stroomvast-proef 26-10-2026. Koper op nachtblauw; vaste tekstcontrasten per context. */
.proefbalk { background: var(--zwart); color: var(--wit); font-size:11px; line-height:16px; }
.megamenu__vlak,.stapelkaart { background:var(--zwart); }
.megamenu__raster { grid-template-columns:3fr 2fr; gap:30px; }
.megamenu__links { grid-column:auto; min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.megamenu__beeld { grid-column:auto; }
.megamenu__link { overflow-wrap:anywhere; }
.hoofdmenu__lijst { gap:24px; }
.held__achtergrond::after { display:block; background:linear-gradient(90deg,rgba(15,26,43,.6),rgba(15,26,43,.55) 60%,rgba(15,26,43,.12) 85%); }
.held__subkop { max-width:620px; color:var(--wit); font-size:18px; line-height:28px; }
.held__links { min-width:0; flex:1 1 680px; }
.held__titelvak { margin-right:0; }
.held__inhoud { gap:40px; }
.held__rechts { width:420px; flex:0 0 420px; }
.kaartstapel { min-width:0; width:420px; max-width:100%; }
.stapelkaart { gap:20px; }
.stapelkaart__beeld { width:132px; }
.stapelkaart__tekst { min-width:0; max-width:none; }
.team__titelvak .grote-titel { white-space:normal; font-size:clamp(40px,7.5vw,108px); line-height:1.1; max-width:1150px; margin:0 auto; }
.teamlid__tekst { background:var(--zwart); }
.oproep__verloop { background:linear-gradient(90deg,rgba(15,26,43,.52),rgba(15,26,43,.48) 52%,rgba(15,26,43,.38)); }
.blogdia__verloop { opacity:1; background:linear-gradient(0deg,rgba(15,26,43,.9),rgba(15,26,43,.65) 42%,rgba(15,26,43,.08) 85%); }
.tabknop { width:auto; min-width:94px; white-space:nowrap; }
.kenmerken { flex-direction:column; }
.kenmerk { width:100%; }
.pakket__binnen { padding-top:52px; }
.aanmelden__invoer::placeholder { color:#c9cbd0; }
@media(min-width:992px) and (max-width:1279px) {
  .held__rechts { flex-basis:360px; width:360px; }
  .kaartstapel { width:360px; }
  .stapelkaart__beeld { width:132px; }
  .held__inhoud { gap:24px; }
  .hoofdmenu__lijst { gap:16px; }
  .kop__balk { gap:18px; }
}
@media(max-width:991px) {
  .held__omhulsel { padding-top:130px; }
  .held__links { flex-basis:auto; }
  .held__label { display:inline-flex; }
  .megamenu__raster { display:block; }
  .megamenu__links { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hoofdmenu { max-height:calc(100svh - 110px); overflow-y:auto; overscroll-behavior:contain; }
}
@media(max-width:767px) {
  .held__omhulsel { padding:106px 0 42px; }
  .held__links { gap:22px; }
  .held__label { display:inline-flex; font-size:12px; line-height:18px; }
  .held__label img { flex:none; width:15px; height:15px; }
  .held__titel { font-size:36px; line-height:42px; }
  .held__subkop { font-size:15px; line-height:22px; }
  .held__tekstblok { gap:14px; }
  .held__achtergrond img { object-position:60% 50%; }
  .team__leden { grid-template-columns:1fr 1fr; grid-auto-rows:1fr; }
  .teamlid__tekst { position:relative; transform:none; padding:16px; }
  .teamlid__kaart { display:flex; flex-direction:column; }
  .teamlid__verloop { display:none; }
  .teamlid__beeld { aspect-ratio:736/792; }
  .teamlid__naam { font-size:18px; line-height:26px; }
  .teamlid__rol { font-size:14px; line-height:22px; }
  .megamenu__links { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:359px) {
  .held__titel { font-size:32px; line-height:38px; }
  .held__subkop { font-size:14px; line-height:21px; }
  .team__leden { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .knop__regel--b,.tekstlink__regel--b { display:none; }
  .knop:hover .knop__regel,.knop:focus-visible .knop__regel { transform:none; color:var(--zwart); }
  .knop--primair:hover .knop__regel,.knop--primair:focus-visible .knop__regel { color:var(--wit); }
  .teamlid__tekst { transform:none; }
}

/* Natuurlijke verhouding van het gekozen rasterwoordmerk, zonder witruimte eromheen. */
.logo,.logo__beeld { width:230px; }
.logo__beeld { max-height:none; height:auto; }
@media(max-width:359px) { .logo,.logo__beeld { width:205px; } }

/* Het koperwoord krijgt een vast donker vlak: contrast onafhankelijk van fotopixels. */
.held__titel .accent { background:var(--zwart); }

/* Inhoudsafhankelijke sticky routekolom: geen negatieve marge of vaste tab-top. */
.tarieven__omhulsel { display:grid; grid-template-columns:5fr 7fr; gap:var(--g-xl); align-items:start; }
.tarieven__kopraster { display:block; align-self:start; }
.tarieven__kop { padding-bottom:0; }
.tarieven__tabs { display:block; margin-top:0; min-width:0; }
.tabknoppen { position:static; top:auto; margin-top:0; align-self:flex-start; max-width:100%; }
.tabpanelen { width:100%; margin:0; }
@media(max-width:991px) {
  .tarieven__omhulsel { grid-template-columns:1fr; }
  .tarieven__kopraster { position:relative; top:auto; }
}

/* D-herstel: leesbare inhoud bij eerste binnenkomst, met bestaande beweging. */
.dienstkaart__binnen { background:rgba(15,26,43,.88); }
.diensten__titelvak { background:rgba(15,26,43,.7); }
@media(min-width:992px) {
  .team__titelvak { pointer-events:none; }
  .team__titelvak .grote-titel { max-width:1150px; font-size:clamp(70px,7.5vw,108px); }
  .teamlid__kaart { width:min(350px,28vw); }
  .teamlid--2 { padding-right:clamp(20px,7vw,100px); }
  .teamlid--3 { padding-left:clamp(20px,7vw,100px); }
}
@media(max-width:991px) {
  .team__leden { grid-template-columns:1fr 1fr; grid-auto-rows:1fr; }
  .teamlid__kaart { display:flex; flex-direction:column; height:100%; max-width:none; }
  .teamlid__beeld { flex:none; aspect-ratio:736/792; }
  .teamlid__tekst { position:relative; transform:none; padding:16px; flex:1; }
  .teamlid__verloop { display:none; }
  .teamlid__naam { font-size:18px; line-height:26px; }
  .teamlid__rol { font-size:14px; line-height:22px; }
}
@media(max-width:479px) {
  .dienstkaart__omschrijving { display:block; font-size:14px; line-height:22px; }
}
@media(max-width:359px) { .team__leden { grid-template-columns:1fr; } }

/* Zonder beweging staan titel en alle captions in de leesvolgorde. */
@media(prefers-reduced-motion:reduce) {
  .team__omhulsel { display:flex; flex-direction:column; gap:40px; }
  .team__titelvak { position:relative; top:auto; min-height:0; }
  .team__titelvak .grote-titel { max-width:100%; font-size:clamp(36px,5vw,72px); }
  .team__leden { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:20px; min-height:0; margin-top:0; }
  .teamlid { padding:0; text-align:left; }
  .teamlid__kaart { display:flex; flex-direction:column; width:100%; height:100%; max-width:none; }
  .teamlid__beeld { flex:none; aspect-ratio:736/792; }
  .teamlid__tekst { position:relative; padding:20px; transform:none; flex:1; }
  .teamlid__verloop { display:none; }
}
@media(prefers-reduced-motion:reduce) and (max-width:359px) { .team__leden { grid-template-columns:1fr; } }

/* Herstelronde 1: een afgewerkt mobiel menu en zichtbare footerbestemmingen. */
.hoofdmenu__sluiten { display:none; }
.sociaal { display:grid; grid-template-columns:repeat(2,max-content); gap:16px 24px; align-items:start; }
.sociaal__link { width:auto; min-width:72px; height:auto; min-height:50px; flex-direction:column; align-items:center; gap:4px; }
.sociaal__a,.sociaal__b { flex:none; }
.sociaal__b { left:50%; right:auto; top:0; transform:translateX(-50%); }
.sociaal__label { font-size:14px; line-height:22px; color:var(--wit); white-space:nowrap; }
.sociaal__link:focus-visible { outline:2px solid var(--primair); outline-offset:4px; }
@media(max-width:991px) {
  .hoofdmenu { max-height:calc(100svh - var(--menu-top,122px) - 15px); }
  .hoofdmenu__paneel { padding:24px 24px 36px; background:var(--zwart); color:var(--wit); border:1px solid rgba(255,255,255,.2); }
  .hoofdmenu .menulink,.hoofdmenu .uitklap__knop { color:var(--wit); }
  .hoofdmenu__lijst > li { padding:8px 0; }
  .megamenu__vlak { padding:24px 0 0; margin:16px 0 0; border-top:1px solid rgba(255,255,255,.2); }
  .hoofdmenu__sluiten { display:flex; justify-content:center; align-items:center; width:100%; min-height:44px; margin-top:24px; padding:12px 18px; border:1px solid rgba(255,255,255,.4); color:var(--wit); background:transparent; cursor:pointer; }
  .hoofdmenu__sluiten:hover,.hoofdmenu__sluiten:focus-visible { background:var(--primair); color:var(--zwart); }
  .teamlid__tekst { min-height:136px; }
}
@media(max-width:767px) {
  .held__achtergrond::after { background:linear-gradient(90deg,rgba(15,26,43,.6),rgba(15,26,43,.5)),linear-gradient(0deg,rgba(15,26,43,.2),transparent 70%); }
  .oproep__verloop { background:rgba(15,26,43,.60); }
}

/* Achter de navigatie voldoende lokale dekking; de herofoto blijft daaronder open. */
.kop__balk { background:rgba(15,26,43,.4); }
img[data-stroomvast-slot] { object-position:var(--beeldpositie,50% 50%); }
@media(max-width:767px) { img[data-stroomvast-slot] { object-position:var(--beeldpositie-mobiel,var(--beeldpositie,50% 50%)); } }

/* Artikelmetadata krijgt lokaal contrast; beeld en bestaande tekstpositie blijven intact. */
.blogdia__meta { position:relative; isolation:isolate; }
.blogdia__meta::before { content:""; position:absolute; inset:8px -12px -12px; z-index:-1; background:rgba(15,26,43,.7); }
@media(max-width:767px) { .blogdia__meta::before { top:38px; } }

/* Collagevoorgrond is ondoorzichtig boven de sticky achtergrondkop. */
.team__titelvak { z-index:0; }
.team__leden { z-index:1; }
.teamlid__kaart { isolation:isolate; }

/* Herstel eindcontrole: korte fontvoorbereiding, geen zichtbare fontwissel. */
html.fonts-pending body { visibility:hidden; }
@media (max-width:479px) {
  .proefbalk { min-height:48px; align-items:center; }
  .voet__raster--midden { row-gap:40px; }
}
@media (min-width:768px) and (max-width:991px) {
  .held__achtergrond::after { background:rgba(15,26,43,.64); }
}
@media (min-width:1600px) {
  .held__achtergrond img[data-stroomvast-slot] { object-position:50% 15%; }
}
@media (min-width:1280px) {
  .oproep__vak--tekst { margin-bottom:90px; }
}

/* Finale pixelcontrole: lokaal tellercontrast en ruimte voor permanente captions. */
.oproep__teller { align-self:flex-start; background:rgba(15,26,43,.7); box-shadow:0 0 0 8px rgba(15,26,43,.7); }
@media(min-width:992px) { #team { padding-bottom:140px; } }

/* Mobiele leesbaarheid,27-10: volledige kaarten en voorspelbare tussenruimte. */
.diensten__bediening { display:none; }
@media (min-width:992px) {
  .diensten__omhulsel { justify-content:flex-start; padding:80px 0 40px; }
  .diensten__carrousel { order:1; }
  .diensten__titelvak { position:relative; bottom:auto; order:2; margin-top:32px; padding:8px 0; }
}
@media (max-width:767px) {
  :root { --sectie:64px; }
  .container,.container-breed { padding-left:20px; padding-right:20px; }
  .over__kop { gap:24px; }
  .over__omhulsel { gap:32px; }
  .over__infotop { gap:12px; }
  .over__info { gap:28px; }
  .werkwijze__omhulsel { gap:32px; }
  .stap__binnen { gap:12px; padding-top:24px; padding-bottom:24px; }
  .tarieven__kop { gap:16px; }
  .diensten__omhulsel { gap:24px; }
  .diensten__titelvak { padding:8px 12px; }
  .diensten__titelvak .grote-titel { font-size:clamp(32px,8.5vw,52px); line-height:1.2; }
  .diensten__carrousel { overflow-x:auto; scroll-snap-type:x mandatory; }
  .js .diensten__carrousel { overflow:hidden; scroll-snap-type:none; }
  .diensten__rij { align-items:stretch; }
  .dienstkaart { width:100%; max-width:none; justify-content:flex-start; scroll-snap-align:start; }
  .dienstkaart__binnen { flex:1; padding:24px; gap:24px; }
  .dienstkaart__tekst { gap:12px; }
  .dienstkaart__omschrijving { display:block; font-size:16px; line-height:26px; }
  .js .diensten__bediening { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--wit); background:var(--zwart); padding:12px 16px; }
  .diensten__stand { font-size:14px; line-height:22px; }
  .diensten__knoppen { display:flex; gap:12px; }
  .diensten__knop { width:44px; height:44px; border:1px solid var(--wit); color:var(--wit); background:transparent; font-size:24px; cursor:pointer; }
  .diensten__knop:disabled { opacity:.4; cursor:default; }
  .diensten__knop:focus-visible { outline:2px solid var(--primair); outline-offset:4px; }
  .diensten__knop:not(:disabled):hover { background:var(--wit); color:var(--zwart); }
}
@media (max-width:359px) {
  .dienstkaart__binnen { padding:20px; }
  .dienstkaart__omschrijving { font-size:15px; line-height:24px; }
}

/* Lay-outronde 29-10-2026 */
/* Regel 4 - sectieruimte: 96 px desktop, 64 px iPad, 48 px mobiel. */
:root { --sectie: 96px; }
@media (max-width: 991px) { :root { --sectie: 64px; } }
@media (max-width: 767px) { :root { --sectie: 48px; } }
@media (min-width: 992px) { #team { padding-bottom: var(--sectie); } }
.voet { padding-top: var(--sectie); }

/* Regel 1 - collage "Waar het vaak op vastloopt": statisch, eerst de kop, dan een raster.
   Geen sticky kop, geen 100vh-hoogtes, geen negatieve marge en geen parallax meer. */
.team__omhulsel { display: flex; flex-direction: column; gap: 48px; }
.team__titelvak { position: relative; top: auto; z-index: auto; min-height: 0; display: block; pointer-events: auto; }
.team__titelvak .grote-titel { max-width: 1150px; margin: 0 auto; white-space: normal; line-height: 1.05; }
.team__leden { position: relative; z-index: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px; min-height: 0; margin-top: 0; }
.teamlid, .teamlid--2, .teamlid--3, .teamlid--2.teamlid, .teamlid--4 { flex: 0 0 calc((100% - 4 * 24px) / 5); padding: 0; text-align: left; transform: none; }
.teamlid__kaart { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: none; }
.teamlid__beeld { flex: none; aspect-ratio: 736 / 792; }
.teamlid__tekst { position: relative; flex: 1; min-height: 0; padding: 20px; transform: none; }
.teamlid__verloop { display: none; }
.teamlid__naam { font-size: 18px; line-height: 26px; }
.teamlid__rol { font-size: 16px; line-height: 24px; }
@media (max-width: 1279px) {
  .team__omhulsel { gap: 40px; }
  .team__leden { gap: 20px; }
  .teamlid, .teamlid--2, .teamlid--3, .teamlid--2.teamlid, .teamlid--4 { flex-basis: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 767px) {
  .team__omhulsel { gap: 32px; }
  .team__leden { gap: 16px; }
  .teamlid, .teamlid--2, .teamlid--3, .teamlid--2.teamlid, .teamlid--4 { flex-basis: calc((100% - 16px) / 2); }
  .teamlid__tekst { padding: 16px; }
  .teamlid__rol { font-size: 15px; line-height: 23px; }
}
@media (max-width: 359px) {
  .teamlid, .teamlid--2, .teamlid--3, .teamlid--2.teamlid, .teamlid--4 { flex-basis: 100%; }
}

/* Regel 1 - heldkaarten: op iPad en mobiel (en zonder beweging) een statische, volledig
   zichtbare lijst onder de kop in plaats van een verborgen kaartstapel. !important wint van
   de inline stijl die de kaartcyclus zet; zo blijft het ook bij draaien of schalen kloppen. */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
  .held__rechts { display: flex; justify-content: flex-end; }
  .kaartstapel, .js .kaartstapel { visibility: visible !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; min-width: 0; max-width: none; max-height: none; }
  .stapelkaart, .stapelkaart:not(:first-child) { position: relative !important; display: flex !important; inset: auto; z-index: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; align-items: flex-start; gap: 16px; padding: 12px; }
  .stapelkaart .stapelkaart__tekst, .stapelkaart .stapelkaart__beeld,
  .stapelkaart:not(:first-child) .stapelkaart__tekst, .stapelkaart:not(:first-child) .stapelkaart__beeld { visibility: visible !important; opacity: 1 !important; }
  .stapelkaart__beeld { width: 88px; height: 88px; }
  .stapelkaart__tekst { height: auto; min-height: 0; gap: 6px; justify-content: flex-start; }
  .stapelkaart__titel { font-size: 18px; line-height: 26px; }
  .stapelkaart__tekst p { font-size: 16px; line-height: 24px; }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .held__omhulsel { padding-top: 150px; }
}
@media (max-width: 991px) {
  .held__inhoud { flex-direction: column; align-items: stretch; gap: 32px; }
  .held__rechts { width: 100%; flex: none; align-self: stretch; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .kaartstapel, .js .kaartstapel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .stapelkaart__beeld { width: 72px; height: 72px; }
  .stapelkaart__tekst p { font-size: 15px; line-height: 23px; }
}

/* Regel 1 - oproep op mobiel: teller en toelichting blijven zichtbaar. */
@media (max-width: 479px) {
  .oproep__teller { display: flex; }
  .oproep__tekst { display: block; font-size: 15px; line-height: 24px; }
}

/* Herstel 1 (review A) - geen inhoud die op scrollen wacht. De JS start deze effecten niet
   meer (zie patch_js); deze regels zetten alles direct in de eindtoestand en eindkleur. */
.js [data-onthul] { opacity: 1; transform: none; }
.js [data-lettertitel], .js [data-vervaagtitel] { visibility: visible; }
.js [data-stip] { opacity: 1; }
.beeldvak__dekking, .js .beeldvak__dekking { display: none; height: 0; }
[data-zoomvlak] img { transform: none; }
/* Werkwijze: de losse grote stapletter (decoratief, aria-hidden) las als restteken. */
.stap__letter { display: none; }
@media (max-width: 991px) { .stap__binnen { padding-right: 0; } }
@media (max-width: 479px) { .stap__binnen { padding-right: 0; } }
/* Over: ook op mobiel beide foto's. */
@media (max-width: 479px) { .over__beelden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }
/* Tarieven: kopkolom staat stil. */
.tarieven__kopraster { position: static; top: auto; }
/* Diensten: zichtbare bediening op alle breedtes (alleen met JS, want de knoppen zijn JS). */
.js .diensten__bediening { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--wit); background: var(--zwart); padding: 12px 16px; }
.diensten__stand { font-size: 14px; line-height: 22px; }
.diensten__knoppen { display: flex; gap: 12px; }
.diensten__knop { width: 44px; height: 44px; border: 1px solid var(--wit); color: var(--wit); background: transparent; font-size: 24px; cursor: pointer; }
.diensten__knop:disabled { opacity: .4; cursor: default; }
.diensten__knop:focus-visible { outline: 2px solid var(--primair); outline-offset: 4px; }
.diensten__knop:not(:disabled):hover { background: var(--wit); color: var(--zwart); }
@media (min-width: 768px) {
  .diensten__carrousel { order: 1; }
  .js .diensten__bediening { order: 2; margin-top: 24px; }
  .diensten__titelvak { order: 3; }
}

/* Regel 5 - tekstmaten: conceptbalk terug naar de eigen basismaat van 13 px (was 11 px). */
.proefbalk { font-size: 13px; line-height: 20px; }

/* Herstel 2 (review E) - blogcarrousel: geen voortgangsbalk die doorloopt. De stip van het
   actieve artikel is gewoon wit gevuld; tekst van een dia staat direct, ook tijdens de fade. */
.blog__stip[aria-current="true"] .blog__voortgang { transform: none; }
.js .blogdia.is-actief [data-blog-deel], .js .blogdia.is-zichtbaar [data-blog-deel] { opacity: 1; transform: none; }
/* Herstel 2 - mobiel menu open: pagina erachter scrolt niet (voorheen via de scrollbibliotheek). */
html.menu-vast { overflow: hidden; }
/* Herstel 2 - regel 5: heldsubkop op 320 px niet kleiner dan 15 px (was 14 px). */
@media (max-width: 359px) { .held__subkop { font-size: 15px; line-height: 22px; } }

/* Herstel 3 (review F) - heldkaarten ook op desktop statisch: alle vijf kaarten direct
   zichtbaar onder elkaar, zoals de reduced-motion-weergave. De JS draait geen kaartcyclus meer. */
@media (min-width: 992px) {
  .held__rechts { display: flex; justify-content: flex-end; }
  .kaartstapel, .js .kaartstapel { visibility: visible !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; min-width: 0; max-width: none; max-height: none; }
  .stapelkaart, .stapelkaart:not(:first-child) { position: relative !important; display: flex !important; inset: auto; z-index: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; align-items: flex-start; gap: 16px; padding: 12px; }
  .stapelkaart .stapelkaart__tekst, .stapelkaart .stapelkaart__beeld,
  .stapelkaart:not(:first-child) .stapelkaart__tekst, .stapelkaart:not(:first-child) .stapelkaart__beeld { visibility: visible !important; opacity: 1 !important; }
  .stapelkaart__beeld { width: 88px; height: 88px; }
  .stapelkaart__tekst { height: auto; min-height: 0; gap: 6px; justify-content: flex-start; }
  .stapelkaart__titel { font-size: 18px; line-height: 26px; }
  .stapelkaart__tekst p { font-size: 16px; line-height: 24px; }
  .held__omhulsel { padding-top: 150px; }
}
/* Herstel 3 - heldtitel staat direct, ook voordat het script de letter heeft geladen. */
.js [data-held-titel] { visibility: visible; }


/* 30-10 launch review: compacte, handmatig bediende mobiele heldkaarten. */
@media (max-width:991px) {
 .held__rechts { display:block; }
 .kaartstapel,.js .kaartstapel { display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; padding-bottom:8px; }
 .stapelkaart,.stapelkaart:not(:first-child) { flex:0 0 100%; box-sizing:border-box; min-width:0; scroll-snap-align:start; }
 .heldkaart-navigatie { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:8px; color:var(--wit); font-size:13px; }
 .heldkaart-navigatie button { width:40px; height:40px; border:1px solid currentColor; background:var(--zwart); color:var(--wit); cursor:pointer; font:inherit; }
 .heldkaart-navigatie button:disabled { opacity:.4; cursor:default; }
 .heldkaart-navigatie button:focus-visible,.kaartstapel:focus-visible { outline:2px solid var(--wit); outline-offset:3px; }
}
@media(min-width:992px) { .heldkaart-navigatie { display:none; } }

/* Gerichte afwerking: compacte kopregels; geen extra scroll-reveals. */
.sectietitel,.grote-titel { text-wrap:balance; }
.dienstkaart__beeld { overflow:hidden; }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .dienstkaart__beeld img { transition:scale .55s cubic-bezier(.215,.61,.355,1); }
 .dienstkaart:is(:hover,:focus-within) .dienstkaart__beeld img { scale:1.025; }
}

/* Mobiele kwaliteitsronde 30-10: beeld en stappen krijgen ieder hun eigen rust. */
@media(max-width:767px){
 .held__omhulsel { padding:124px 0 28px; }
 .held__inhoud { gap:40px; }
 .held__achtergrond { bottom:260px; }
 .held__achtergrond::after { background:linear-gradient(0deg,var(--zwart),rgba(15,26,43,.38) 55%,rgba(15,26,43,.55)); }
 .held__titel { font-size:clamp(32px,9.3vw,40px);line-height:1.12;letter-spacing:-1px;text-wrap:balance; }
 .held__subkop { font-size:16px;line-height:1.5;max-width:33ch; }
 .held__rechts { padding-top:20px;border-top:1px solid rgba(255,255,255,.23); }
 .stapelkaart,.stapelkaart:not(:first-child){border-left:2px solid var(--primair);padding:12px;background:#172338;gap:16px;}
 .heldkaart-navigatie button { width:44px;height:44px; }
 .heldkaart-navigatie button:active{background:var(--primair);color:var(--zwart);}
}