/* ============================================================
   JACK! Website — Gedeelde Stijlen
   Afgestemd op het Webflow-ontwerp (jack0001.webflow.io)

   Design tokens overgenomen uit het Webflow-project:
     rood  #D60221 · zwart #231F20 · grijs #F2F2F2 · wit #FFFFFF
     Forma DJR Display (koppen) · Forma DJR Text (broodtekst)
     containers 48 / 72 / 88rem · spacing 1 / 2 / 4rem
   ============================================================ */

/* ─── FONTS (self-hosted, identiek aan Webflow) ─── */
@font-face {
  font-family: 'Forma DJR Text';
  src: url('assets/FormaDJRText-Regular-web.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Forma DJR Display';
  src: url('assets/FormaDJRDisplay-Variable-web.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ─── TOKENS ─── */
:root {
  --red:        #d60221;
  --call-green: #1e9e4f;   /* belknop: bellen-groen, even verzadigd als het rood (Klaas, 13-10-2026) */
  --black:      #231f20;
  --grey:       #f2f2f2;
  --white:      #ffffff;
  --border-grey: lightgrey;
  --dark-grey:  #9b9b9b;
  --text-grey:  #6b6667;   /* grijze TEKST op wit of lichtgrijs: genoeg contrast (4,5:1+), Klaas 13-10-2026; --dark-grey blijft voor lijnen, bolletjes en tekst op zwart */

  /* legacy aliassen zodat bestaande markup blijft werken */
  --dark:  var(--black);
  --light: var(--grey);
  --mid:   var(--dark-grey);

  --container-s: 48rem;
  --container-m: 72rem;
  --container-l: 88rem;

  --s1: 1rem;
  --s2: 2rem;
  --s4: 4rem;
  --gutter: 1.5rem;

  --font-display: 'Forma DJR Display', Tahoma, system-ui, sans-serif;
  --font-text:    'Forma DJR Text', Arial, system-ui, sans-serif;

  --tr: 0.2s ease;
}

/* Vloeiende rem-schaal — exact de formule uit het Webflow-project */
html { font-size: calc(0.625rem + 0.41666666666666663vw); }
@media screen and (max-width: 1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width: 1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
@media screen and (max-width: 479px)  { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  color: var(--black);
  background: var(--white);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ─── TYPOGRAFIE ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  /* lange Nederlandse samenstellingen breken met een koppelteken af
     i.p.v. uit hun kader te lopen (de pagina staat op lang="nl") */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: 4rem;    line-height: 1;   }
h2 { font-size: 3rem;    line-height: 1.2; }
h3 { font-size: 2rem;    line-height: 1.2; }
h4 { font-size: 1.5rem;  line-height: 1.4; }
h5 { font-size: 1.25rem; line-height: 1.5; }
h6 { font-size: 1rem;    line-height: 1.5; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.25rem; }
li::marker { color: var(--red); }
blockquote {
  border-left: 0.25rem solid var(--red);
  padding: 0 1.25rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
.lead { font-size: 1.25rem; line-height: 1.5; }

/* ─── LAYOUT ─── */
.container {
  width: 100%;
  max-width: calc(var(--container-m) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: 5rem 0; }
[id] { scroll-margin-top: 6rem; }

/* ─── ICOON-SPRITE ─── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ─── SKIP-LINK ─── */
.skip-link {
  position: absolute; left: var(--gutter); top: -100%; z-index: 200;
  padding: 0.75rem 1.5rem; background: var(--black); color: var(--white);
  font-weight: 700; transition: top var(--tr);
}
.skip-link:focus { top: var(--gutter); outline: 2px solid var(--red); outline-offset: 2px; }

/* ─── NAVIGATIE ─── */
/* de header zelf plakt bovenaan: sticky op .site-nav werkte niet, want de header rond het menu is even hoog als het menu */
body > header { position: sticky; top: 0; z-index: 99; }
.site-nav {
  position: relative; z-index: 99;
  background: var(--white);
  height: auto;
  display: block;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: none; margin: 0 auto;
  padding: 0.9rem var(--gutter);
}
/* Het echte JACK!-woordmerk uit Webflow */
.logo {
  display: block; flex: none;
  width: 5.5rem; height: 2.81rem;
  background: url('assets/jack-logo.svg') left center / contain no-repeat;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}

.nav-menu { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; }
.nav-menu > li { position: relative; margin: 0; }
.nav-menu a {
  display: block; padding: 0.5rem 1rem;
  font-size: 1.1rem; font-weight: 400; color: var(--black);
  transition: background-color var(--tr), color var(--tr);
}
.nav-menu a:hover { background: var(--grey); }

/* Uitklapmenu "Gevelwerken" — Webflow: .nav_dropdown-wrapper, grijs, 2 kolommen */
.nav-dropdown-toggle {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; font-family: var(--font-text);
  font-size: 1.1rem; font-weight: 400; color: var(--black);
  /* een <button> krijgt van de browser een eigen regelhoogte; erven zodat hij even hoog is als de links */
  line-height: inherit;
  background: none; border: none; cursor: pointer;
  transition: background-color var(--tr);
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle { background: var(--grey); }
.nav-caret { flex: none; margin-top: 0.1em; transition: transform var(--tr); }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--grey); min-width: 20rem; padding: 1rem;
  columns: 2; column-rule-style: none; z-index: 10;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
/* Webflow: data-hover="true", data-delay="0" — op een groot scherm met muis opent het menu meteen bij hover;
   onder 992px is het een hamburgermenu en blijft het een tik (de klik-JS blijft overal werken) */
@media (hover: hover) and (min-width: 992px) {
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
  .nav-dropdown:hover .nav-dropdown-toggle { background: var(--grey); }
  .nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
}
.nav-dropdown-menu a {
  display: inline-block; padding: 0.5rem 1rem;
  font-size: 1.1rem; color: var(--black);
}
.nav-dropdown-menu a:hover { background: none; color: var(--red); }

.nav-cta {
  background: transparent !important; color: var(--red) !important;
  padding: 0.5rem 1rem !important; font-size: 1.1rem !important;
  font-weight: 400 !important; white-space: nowrap; border-radius: 0;
}
.nav-cta:hover { background: var(--grey) !important; }

.nav-toggle {
  display: none; flex-direction: column; gap: 0.6rem; cursor: pointer;
  padding: 0; background: none; border: none;
}
.nav-toggle span { width: 3rem; height: 0.2rem; background: var(--black); display: block; }

/* ─── KNOPPEN ─── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-text); font-size: 1.1rem; font-weight: 700;
  border: 1px solid var(--black); border-radius: 0;
  text-align: center; cursor: pointer;
  transition: all var(--tr); text-decoration: none;
}
.btn:hover { opacity: 0.8; }
.btn-red  { background: var(--red); border-color: var(--red); color: var(--white); }

.btn-outline {
  background: transparent; color: var(--black); border-color: var(--black);
}
.btn-outline:hover { background: var(--black); color: var(--white); opacity: 1; }
.btn-outline-white {
  background: transparent; color: var(--white); border-color: var(--white);
}
/* Webflow outline-variant in rode blokken: bij hover zwart vlak met zwarte rand */
.btn-outline-white:hover { background: var(--black); border-color: var(--black); color: var(--white); opacity: 1; }
/* de footerknop hovert naar rood (Webflow: tweede outline-variant) */
.footer-cta .btn-outline-white:hover { background: var(--red); border-color: var(--black); }

/* ─── HERO (homepage) — rood blok, wit CTA-blok rechtsonder ─── */
.hero {
  background: var(--white); color: var(--black);
  padding: 0 var(--gutter);
  min-height: 0; display: block;
}
.hero .container {
  position: relative;
  max-width: none;
  padding: var(--s4);
  background: var(--red); color: var(--white);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
}

.hero h1 {
  color: var(--white); margin: 0; max-width: none;
  font-size: 13vw; line-height: 0.9;
}
/* tweede, kleinere regel in dezelfde H1 (bv. "in regio Antwerpen"), zodat het keyword in de titel staat zonder dat hij te lang wordt */
:is(.hero, .photo-hero) h1 .hero-h1-regel { display: block; font-size: 0.28em; line-height: 1.1; margin-top: 0.35em; letter-spacing: 0; }
.hero-sub {
  font-size: 1.5625rem; line-height: 1.5;
  color: var(--white); max-width: 60rem; margin: 0;
}
.hero-badges {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.2rem 0.8rem; margin: 0; padding: 0; border: none;
  font-size: 1.5625rem; line-height: 1.5; max-width: 60rem;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: inherit; font-weight: 400; color: var(--white);
}
.badge-dot {
  width: 0.55rem; height: 0.55rem; background: var(--black);
  border-radius: 0; flex-shrink: 0; transform: translateY(-0.1rem);
}
.hero-badge:first-child .badge-dot { display: none; }

/* wit CTA-blok, flush tegen rechteronderhoek van het rode vlak */
.hero .btn {
  position: absolute; right: 0; bottom: 0; margin: 0;
  width: 14rem; padding: 2.5rem 1.5rem;
  background: var(--white); border: none; color: var(--black);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5625rem; line-height: 1.2;
  justify-content: center; text-align: center;
}
.hero .btn:hover { background: var(--black); color: var(--white); opacity: 1; }

/* ─── PAGE HERO (binnenpagina's) — zelfde rode blok ─── */
.page-hero {
  background: var(--white); color: var(--black);
  padding: 0 var(--gutter);
}
.page-hero .container {
  position: relative;
  max-width: none;
  padding: var(--s4);
  background: var(--red); color: var(--white);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1);
}
.breadcrumb {
  font-size: 1.1rem; color: var(--white);
  margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--white); transition: opacity var(--tr); }
.breadcrumb a:hover { opacity: 0.7; }
.breadcrumb .sep { opacity: 0.6; }
.page-hero h1 { color: var(--white); margin: 0; max-width: none; font-size: 4rem; }
.page-hero .lead {
  font-size: 1.5625rem; line-height: 1.5;
  color: var(--white); max-width: 60rem; margin: 0;
}

.page-hero .btn {
  position: absolute; right: 0; bottom: 0; margin: 0;
  width: 14rem; padding: 2.5rem 1.5rem;
  background: var(--white); border: none; color: var(--black);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5625rem; line-height: 1.2;
  justify-content: center; text-align: center;
}
.page-hero .btn:hover { background: var(--black); color: var(--white); opacity: 1; }

/* ruimte vrijhouden voor het witte CTA-blok, alleen als dat er is */
.hero .container:has(> .btn),
.page-hero .container:has(> .btn) { padding-right: calc(var(--s4) + 14rem); }

/* ─── LABELS & SECTIEKOPPEN ─── */
.section-label {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 0.5rem; display: block;
}
/* Webflow: .grid_title-cta-content — 1.5fr / .5fr, CTA als rode tekstlink */
.section-intro {
  display: grid; grid-template-columns: 1.5fr 0.5fr;
  gap: var(--s2); align-items: center; margin-bottom: var(--s2);
}
.section-intro > div:last-child { text-align: right; }

/* Rode tekstlink (Webflow .red-link) */
.section-intro .btn-outline,
.red-link {
  background: none; border: none; padding: 0;
  color: var(--red); font-weight: 700; font-size: 1.1rem;
  transition: color var(--tr);
}
/* een link midden in een zin neemt de lettergrootte van die zin over (anders oogt hij kleiner in grote tekst, bv. de CTA-band) */
p .red-link { font-size: inherit; }
.section-intro .btn-outline:hover,
.red-link:hover { background: none; color: var(--black); opacity: 1; }

/* ─── SERVICE GRID (1px zwarte rasterlijnen) ─── */
.service-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  background: var(--black);
  /* staat buiten .container in de markup — zelfde breedte als container-medium */
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--container-m);
  margin: 0 auto;
}
.service-card {
  position: relative; overflow: hidden; aspect-ratio: 1;
  background: var(--white); padding: var(--s4) var(--s2);
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 0.5rem;
  transition: color var(--tr); text-decoration: none; color: var(--black);
}
.service-card:hover { background: var(--white); color: var(--red); }
.service-card h2 { font-size: 3rem; line-height: 1.2; transition: color var(--tr); }
.service-card:hover h2 { color: var(--red); }
.service-card p { font-size: 1.1rem; color: var(--black); margin: 0; }
/* rode hoektab; "Lees meer" schuift open bij hover (Webflow: .service-thums_lees-meer) */
.service-card-arrow {
  position: absolute; right: 0; bottom: 0;
  width: auto; height: auto; margin: 0; border: none; border-radius: 0;
  background: var(--red); color: var(--white);
  padding: 0.5rem 0.5rem 0.5rem 1rem; font-size: 1.1rem; font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: flex-end;
  transition: padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  min-width: 2rem; min-height: 2rem;
}
.service-card-leesmeer-txt {
  white-space: nowrap; line-height: 1; width: 5.3rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* laatste tegel loopt over de volledige rij — zoals Webflow's is-services-grid */
.service-grid .not-found-card { grid-column: 1 / -1 !important; }
/* variant .is-negen: acht diensten plus de zwarte tegel als negende: een vol raster van 3 x 3; bij twee kolommen weer over de volle rij */
.service-grid.is-negen .not-found-card { grid-column: auto !important; }
@media (max-width: 1010px) { .service-grid.is-negen .not-found-card { grid-column: 1 / -1 !important; } }
.not-found-card {
  background: var(--black); padding: var(--s4) var(--s1); color: var(--white);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: var(--s1);
}
.not-found-card h2 { color: var(--white); font-size: 2rem; }
.not-found-card > div { font-size: 1.1rem; color: var(--white); }

/* terugknop met gedraaide pijl (Webflow: .back-button-wrapper) */
.back-button {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 1rem; padding: 0.6rem 0.6rem 0.6rem 0;
  font-size: 1.1rem; color: var(--black);
}
.icon-sm.is-rotated { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  [data-back-button="target"] { transition: all 0.3s ease; }
  [data-back-button="trigger"]:hover [data-back-button="target"] {
    transform: translateX(-0.6rem) rotate(180deg);
  }
}

/* ─── REFERENTIES ─── */
.ref-grid,
.ref-overview-grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  background: none; justify-items: center;
}
.ref-card {
  aspect-ratio: 5 / 6.5; width: 100%; max-width: 40rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; padding: 0; position: relative;
  overflow: hidden; text-decoration: none; color: var(--white);
  background: var(--grey); background-size: cover; background-position: center;
}
.ref-card::before { content: none; }
.ref-card > * { position: relative; z-index: 2; }

/* zwart labelblok linksonder met de dienst in het vet, wordt rood bij hover */
.ref-card-link {
  display: inline-flex; align-items: center; gap: 1rem;
  background: var(--black); color: var(--white);
  max-width: 90%; padding: 0.7rem 1rem;
  font-family: var(--font-text); font-size: 1.1rem; font-weight: 400; line-height: 1.4;
  transition: all var(--tr);
}
.ref-card-link strong { font-weight: 700; }
.ref-card-link .icon-sm { color: var(--red); transition: color var(--tr); }
.ref-card:hover .ref-card-link { background: var(--red); color: var(--white); }
.ref-card:hover .ref-card-link .icon-sm { color: var(--black); }

/* ─── PROCES / "HOE WERKT JACK" ─── */
/* Webflow: horizontale slider van 22rem-brede stappen; de titels staan onderaan
   uitgelijnd in een blok van 6rem, met het rode vierkantje bovenop de lijn. */
/* schermbreed: de strook loopt van schermrand tot schermrand; in rust staat de eerste stap op de lijn van de titel
   (--zij = linkerrand van de container, zoals bij de carrousels), bij het scrollen schuift alles mee tot de schermrand */
.process-section { background: var(--white); overflow: clip; container-type: inline-size; }
.process-grid {
  --zij: max(var(--gutter), calc((100cqw - var(--container-m)) / 2));
  display: flex; flex-wrap: nowrap;
  gap: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;   /* geen scrollbalk: swipen, slepen of trackpad */
  margin-inline: calc(var(--zij) * -1);
  padding: 0 var(--zij) 0.5rem;
  scroll-padding-inline: var(--zij);
  /* zonder min-width:0 groeit een flex-scroller in een grid mee met zijn inhoud */
  min-width: 0; max-width: none;
}
.process-grid::-webkit-scrollbar { display: none; }
.process-step {
  flex: none; width: 22rem; padding-right: var(--s4);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--s1);
  position: relative;
}
/* titels op een gemeenschappelijke onderlijn, zoals .how-slider_heading */
.process-step h3 {
  order: 1; margin: 0;
  font-size: 2rem; line-height: 1.2;
  height: 6rem; display: flex; align-items: flex-end;
}
/* het cijfer wordt het rode vierkantje dat bovenop de lijn zit */
.process-num {
  order: 2; position: relative;
  width: 100%; height: 0.6rem; margin: 0;
}
.process-num::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 0.8rem; height: 0.6rem; background: var(--red); z-index: 2;
}
/* de lijn begint exact onder het vierkantje en loopt door tot de volgende stap
   (100% is de contentbreedte, dus de padding-right erbij optellen) */
.process-num::after {
  content: ''; position: absolute; left: 0; top: 100%;
  width: calc(100% + var(--s4)); height: 0.2rem; background: var(--red); z-index: 1;
}
.process-step p { order: 3; font-size: 1.1rem; color: var(--black); margin: 0; }

/* ─── KENNISCENTRUM ─── */
/* Kop met zoekveld — Webflow: .lumos-grid met h1 + .form_input.has-search-icon */
.kc-header { background: var(--white); padding: 3rem 0; }
/* kruimelpad op een lichte achtergrond */
.breadcrumb-dark {
  font-size: 1.1rem; color: var(--black); margin-bottom: var(--s1);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.breadcrumb-dark a { color: var(--black); transition: color var(--tr); }
.breadcrumb-dark a:hover { color: var(--red); }
.breadcrumb-dark .sep { color: var(--dark-grey); }
.kc-header-grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: end;
}
.kc-header h1 { font-size: 4rem; line-height: 1; }
.kc-search { display: flex; flex-direction: column; gap: 0.25rem; }
.kc-search label { font-family: var(--font-text); font-size: 1.1rem; color: var(--black); }
.kc-search-input {
  background-color: var(--grey);
  background-image: url('assets/search.svg');
  background-position: 98% 50%;
  background-repeat: no-repeat;
  background-size: 1.1rem auto;
  border: 1px solid var(--grey); border-radius: 0;
  min-height: 3rem; padding: 0.5rem 3rem 0.5rem 1rem;
  font-family: var(--font-text); font-size: 1.1rem; color: var(--black);
  outline: none; width: 100%; transition: border-color var(--tr);
}
.kc-search-input:focus { border-color: var(--red); }

.kc-list-section { background: var(--grey); padding: 5rem 0; }

/* Artikelblokken — Webflow: .lumos-grid.is-articles + .article-thumb_wrapper */
.kc-grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  align-items: stretch; background: none;
}
.kc-card {
  position: relative; overflow: hidden; height: 100%;
  padding: var(--s4); gap: var(--s1);
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  background: var(--white); color: var(--black);
}
.kc-card[hidden] { display: none; }

/* gekleurde varianten, exact zoals de data-attributen in het Webflow-ontwerp */
.kc-card[data-background-color="white"] { background: var(--white); color: var(--black); }
.kc-card[data-background-color="black"] { background: var(--black); color: var(--white); }
.kc-card[data-background-color="red"]   { background: var(--red);   color: var(--white); }
.kc-card[data-background-color="grey"]  { background: var(--grey);  color: var(--black); }

.kc-card h3 { font-size: 2rem; line-height: 1.2; color: inherit; }
.kc-card-link { color: inherit; }
/* de hele tegel is klikbaar (Webflow: [data-link-cover]) */
.kc-card-link[data-link-cover]::before { content: ''; position: absolute; inset: 0; z-index: 1; }
/* het ontwerp verkleurt de titel niet bij hover — enkel "Lees meer" schuift open */

.kc-meta {
  display: flex; align-items: center; gap: 0.5em;
  font-size: 1.1rem; font-weight: 400; color: inherit; margin: 0;
}
.icon-sm { flex: none; width: 1rem; height: 1rem; }

/* samenvatting alleen op de uitgelichte tegel, net als in het ontwerp */
.kc-card-summary { display: none; font-size: 1.1rem; color: inherit; }
.kc-card.is-featured { grid-row: span 2; }
.kc-card.is-featured .kc-card-summary { display: block; }

/* pijl rechtsonder + "Lees meer" dat openschuift bij hover */
/* pointer-events: none — het hoekje ligt boven de klikzone van de tegel; zo gaat een klik op de pijl naar de link eronder */
.kc-card-corner { position: absolute; inset: auto 0 0 auto; z-index: 2; pointer-events: none; }
.kc-card-leesmeer {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0.5rem 0.5rem 0.5rem 1rem; font-weight: 600; color: inherit;
  transition: padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.kc-card-leesmeer-txt {
  white-space: nowrap; line-height: 1; width: 5.3rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (hover: hover) {
  /* overflow:hidden — anders steekt de ingeklapte tekst buiten de tegel */
  [data-hover-trigger] [data-hover-target] { width: 0; opacity: 0; overflow: hidden; }
  [data-hover-trigger]:hover [data-hover-target] { width: 5.3rem; opacity: 1; }
  /* ingeklapt: vierkante tab met 0.5rem rondom; open: 1rem links van "Lees meer" */
  [data-hover-trigger] .service-card-arrow, [data-hover-trigger] .kc-card-leesmeer { padding-left: 0.5rem; }
  [data-hover-trigger]:hover .service-card-arrow, [data-hover-trigger]:hover .kc-card-leesmeer { padding-left: 1rem; }
}

.kc-empty { padding: var(--s2) 0; font-size: 1.1rem; color: var(--black); }

/* contactgegevens op de contactpagina */

.button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }

/* tweekolomsblok dat op smalle schermen netjes onder elkaar valt */

/* ─── PAGINERING ─── */
.pagination {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: baseline;
  gap: var(--s1); margin-top: var(--s2);
}
.pagination[hidden] { display: none; }
.pagination-count { width: auto; font-size: 1.1rem; color: var(--black); }
.pagination-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; aspect-ratio: 1;
  font-size: 1rem; font-weight: 700;
  background: var(--black); border: 1px solid var(--black);
  color: var(--white); border-radius: 0; transition: opacity var(--tr);
}
.pagination-btn:hover { opacity: 0.8; }
.pagination-btn.is-prev svg { transform: rotate(180deg); }
.pagination-btn.is-disabled { opacity: 0.2; cursor: not-allowed; pointer-events: none; }

/* ─── CONTACTBLOK + FORMULIER ─── */
/* geen eigen achtergrond: het grijze vlak wordt met z-index:-1 achter de sectie
   geschilderd en zou anders onzichtbaar zijn (zoals in het Webflow-ontwerp) */
.cta-banner {
  color: var(--black);
  padding: 3rem 0; position: relative; overflow: hidden;
}
/* Webflow: .contact-form_heading-grid — titel links, contactgegevens rechts */
.cta-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s2); align-items: center;
}
.cta-heading h2 { color: var(--black); font-size: 3rem; line-height: 1.2; }
.cta-heading .lead { color: var(--black); }
/* het grijze vlak loopt door tot de rechterrand (Webflow: .contact-form_grey-area) */
.cta-contactinfo {
  position: relative; padding: 3rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
}
/* grijs vlak: van de bovenkant van de sectie tot onder het gegevensblok,
   doorlopend tot de rechterrand — .cta-banner heeft overflow:hidden */
.cta-contactinfo::before {
  content: ''; position: absolute; z-index: -1;
  inset: -100vh -100vw 0 0; background: var(--grey);
}
/* in het grijze vlak staan de gegevens zwart en worden ze rood bij hover */
.cta-contactinfo .red-link { color: var(--black); }
.cta-contactinfo .red-link:hover { color: var(--red); }
.cta-social { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5rem; }
.social-icon {
  width: 1.5em; height: 1.5em; display: block;
  color: var(--black); transition: color var(--tr);
}
.social-icon svg { width: 100%; height: 100%; display: block; }
.social-icon:hover { color: var(--red); }
.sr-only,
.form-group input.sr-only {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Webflow: .form — 2 kolommen, links de velden, rechts upload + bericht */
.contact-form {
  display: flex; flex-direction: column; gap: var(--s1);
  max-width: 64rem; margin: 0 auto; padding-top: var(--s4);
  background: transparent;
}
.form-grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  place-items: start stretch;
}
.form-col { display: flex; flex-direction: column; gap: var(--s1); }
.form-col.is-full-height { height: 100%; }
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-group.is-grow { flex: 1; }
.form-group label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; color: var(--black);
  letter-spacing: 0; text-transform: none; margin-bottom: 0.25rem;
}
/* verplicht veld krijgt een sterretje, net als in het ontwerp */
.form-group label:has(+ input[required]),
.form-group label:has(+ textarea[required]) { }
.form-group label:has(+ input[required])::after,
.form-group label:has(+ textarea[required])::after { content: ' *'; }

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--grey); border: 1px solid var(--grey);
  border-radius: 0; min-height: 3rem; padding: 0.5rem 1rem;
  color: var(--black); font-size: 1.1rem; font-family: var(--font-text);
  outline: none; transition: border-color var(--tr); width: 100%;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--red); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--dark-grey); }
.form-group textarea {
  flex: 1; min-height: 8rem; padding-top: 0.75rem;
  font-size: 1rem; resize: vertical;
}
.form-group select option { background: var(--white); color: var(--black); }
.form-upload {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--grey); border: none; border-radius: 0;
  padding: var(--s2); text-align: center; min-height: 8rem;
  font-family: var(--font-text); font-weight: 400;
  font-size: 1.1rem; color: var(--text-grey); cursor: pointer;
  transition: color var(--tr);
}
.form-upload:hover { color: var(--black); }
/* omgekeerde variant wanneer het formulier op een grijs vlak staat */
.bg-light .form-group input,
.bg-light .form-group textarea,
.bg-light .form-group select,
.bg-light .form-upload { background: var(--white); border-color: var(--white); }

/* dienstenkeuze als aanklikbare labels (zoals de referentiefilters) */
.form-group-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; color: var(--black); margin-bottom: 0.25rem;
}
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* .form-group label is specifieker, dus die naam er hier bij */
.chip,
.form-group label.chip {
  display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid var(--border-grey); border-radius: 0;
  font-family: var(--font-text); font-weight: 400; font-size: 1rem;
  color: var(--black); background: var(--white);
  transition: all var(--tr); margin: 0;
}
.chip span { padding: 0.3rem 0.9rem; }
.chip:hover { border-color: var(--black); opacity: 1; }
.chip input {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0;
}
.chip:hover { opacity: 0.8; }
.chip:has(input:checked) {
  background: var(--red); border-color: var(--red); color: var(--white); opacity: 1;
}
.chip:has(input:focus-visible) { outline: 2px solid var(--black); outline-offset: 2px; }

/* onderste rij: akkoordvinkje links, verzendknop rechts */
.form-footer {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  place-items: center stretch;
}
.form-checkbox {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 1rem; color: var(--black); cursor: pointer;
}
.form-checkbox input { margin-top: 0.3rem; flex-shrink: 0; accent-color: var(--red); }
.form-checkbox a { color: var(--red); text-decoration: underline; }
.form-footer .btn { justify-self: end; }

/* ─── VOORDELEN ─── */

/* ─── STATISTIEKEN ─── */

/* ─── CONTENT LAYOUT (detailpagina's) ─── */

/* anders groeit een kolom mee met een horizontale scroller erin */

/* ─── FAQ ─── */
.faq-list { border-top: none; margin: 0; display: grid; gap: 1rem; }
.faq-item { border-bottom: 1px solid var(--black); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.4;
  background: none; border: none; width: 100%; text-align: left; color: var(--red);
  transition: opacity var(--tr);
}
.faq-q:hover { opacity: 0.8; }
.faq-icon { width: 1.25rem; height: 1.25rem; flex: none; transition: transform var(--tr); color: var(--red); }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-a { padding: 0 0 1rem; color: var(--black); display: none; font-size: 1.1rem; line-height: 1.5; }
.faq-item.open .faq-a { display: block; }

/* ─── AFWERKOPTIES ─── */

/* ─── TEAM ─── */

/* ─── JOBS ─── */

/* ─── FILTER TABS ─── */
.filter-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--s2); }
.filter-tab {
  padding: 0.4rem 1.5rem; font-size: 1.1rem; font-weight: 400;
  border: 2px solid var(--black); border-radius: 0;
  cursor: pointer; background: transparent; color: var(--black);
  transition: all var(--tr); font-family: var(--font-text);
}
.filter-tab.active, .filter-tab:hover {
  background: var(--red); color: var(--white); border-color: var(--red);
}

/* artikelpagina: minder lucht onder de tekst, het CTA-kader eronder brengt zijn eigen 5rem mee */
.article-section { padding-bottom: 1rem; }
/* artikelpagina: leeskolom van 48rem (container-small) gecentreerd in de 72rem-container */
.article-column { max-width: var(--container-s); margin: 0 auto; }

/* ─── ARTIKEL (rich text) ─── */
.article-body { max-width: var(--container-s); }
.article-body h2 { color: var(--red); font-size: 2rem; margin: 1.5rem 0 1rem; }
.article-body h3 { color: var(--red); font-size: 1.7rem; margin: 1.5rem 0 1rem; }
.article-body h4 { color: var(--red); font-size: 1.4rem; margin: 1.5rem 0 1rem; }
.article-body p { margin-bottom: 1rem; line-height: 1.5; }
.article-body p.lead { font-size: 1.5625rem; line-height: 1.4; margin-bottom: 1.5rem; }
.article-body ul, .article-body ol { margin-bottom: 1.5rem; }
.article-body li { font-size: 1.1rem; line-height: 1.5; margin-bottom: 0.25rem; }
.article-body a { color: var(--red); text-decoration: underline; }
.article-callout {
  background: var(--grey); border-left: 0.25rem solid var(--red);
  padding: 1.25rem; margin: var(--s2) 0; border-radius: 0;
}
.article-callout p { margin: 0; font-size: 1.25rem; font-style: normal; line-height: 1.5; }

/* ─── CHECKLIJST ─── */

/* ─── FOOTER ─── */
/* zwart vlak over de volle paginabreedte; de inhoud op het raster van de container */
.site-footer {
  background: var(--black); color: var(--white);
  padding: 0;
}
.site-footer > .container {
  padding-top: var(--s4); padding-bottom: var(--s2);
  background: var(--black); color: var(--white);
}
/* Webflow: .footer_content-wrapper — merkblok, twee linkkolommen, knop */
.footer-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s2);
}
.footer-grid > * { flex: 0 1 auto; }
.footer-brand { flex: 1 1 22rem; max-width: 32rem; }
.footer-logo {
  display: block; width: 5.5rem; height: 2.81rem; margin-bottom: var(--s1);
  background: url('assets/jack-logo-negative.svg') left center / contain no-repeat;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
.footer-tagline { font-size: 1.1rem; margin-bottom: var(--s1); line-height: 1.5; color: var(--white); }
.footer-social { display: flex; align-items: center; gap: 0.5em; }
.footer-social .social-icon { color: var(--white); }
.footer-social .social-icon:hover { color: var(--red); }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; }
.footer-col li { margin: 0; }
.footer-col a {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--white); padding: 0.4rem 0.4rem 0.4rem 0;
  display: inline-block; transition: color var(--tr);
}
.footer-col a:hover { color: var(--red); }
/* de pagina waar je op staat, staat vet (Webflow: .footer_link.w--current) */
.footer-col a[aria-current="page"] { font-weight: 700; }
.nav-menu a[aria-current="page"],
.nav-dropdown-menu a[aria-current="page"] { font-weight: 700; }
.footer-cta { display: flex; align-items: flex-start; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--s1); border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 1rem; gap: var(--s1); flex-wrap: wrap; color: var(--white);
}
/* JACK! bv en het adres zijn links (home, Google Maps) maar ogen als gewone tekst tot je erover gaat */
.footer-bottom > span a { color: inherit; text-decoration: none; }
.footer-bottom > span a:hover { text-decoration: underline; }
.footer-bottom-links { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.footer-bottom-links a {
  font-size: 1rem; color: var(--white); opacity: 0.8;
  padding: 0.5rem 0.2rem; transition: opacity var(--tr);
}
.footer-bottom-links a:hover { opacity: 1; }

/* ─── DIENSTPAGINA: HERO MET BEELD ─── */
/* Webflow: .section_service-hero — rood blok links, beeldslider rechts */
/* Webflow: padding-section-small (3rem) boven en onder het rode blok */
.service-hero { padding: 3rem var(--gutter); }
.service-hero > .container { max-width: none; padding: 0; }
.service-hero-grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
/* het witte CTA-blok is een gewoon flex-item onderaan rechts, geen overlay */
.service-hero-red {
  background: var(--red); color: var(--white); padding: 0;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-end; gap: var(--s1);
  min-height: 24rem;
}
.service-hero-wrap {
  width: 100%; padding: var(--s4); gap: var(--s2);
  display: flex; flex-direction: column; align-items: flex-start;
}
/* vangnet: een woord dat te lang is voor een smal scherm breekt af in plaats van uit beeld te lopen (zet liefst zelf &shy; in lange woorden) */
.service-hero-red h1 { color: var(--white); font-size: 4rem; line-height: 1; overflow-wrap: break-word; hyphens: manual; }
.service-hero-red .lead { font-size: 1.5625rem; line-height: 1.5; color: var(--white); }
.back-button.is-on-red { align-self: flex-start; color: var(--white); padding: 1rem 1.5rem; font-size: 1.5625rem; transition: background-color var(--tr); }
/* Webflow: .service-hero_backlink:hover krijgt een zwart vlak */
.back-button.is-on-red:hover { background: var(--black); }
.service-hero-cta {
  background: var(--white); color: var(--black);
  padding: 2.5rem; flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5625rem; line-height: 1.2; text-align: center;
  transition: all var(--tr);
}
.service-hero-cta:hover { background: var(--black); color: var(--white); }

/* beeldslider (Webflow: .slider-component) */
.slider-component {
  position: relative; min-height: 24rem; overflow: hidden;
  align-self: stretch; height: 100%;
}
.slider-track { display: flex; height: 100%; transition: transform 0.4s ease; }
.slider-slide { flex: none; width: 100%; height: 100%; min-height: 24rem; }
.slider-bullets {
  position: absolute; left: 0; right: 0; bottom: var(--s1); z-index: 2;
  display: flex; justify-content: center; align-items: center; gap: 0;
}
/* zelfde vierkantje van 1rem, met een tikzone van 28 px (toegankelijkheid, 13-10-2026) */
.slider-bullet {
  box-sizing: content-box; width: 1rem; aspect-ratio: 1; padding: 0.375rem; border: none; border-radius: 0;
  background: var(--grey); background-clip: content-box; cursor: pointer; transition: background var(--tr);
}
.slider-bullet.is-active { background: var(--red); }

/* ─── TEKST + BEELD ─── */
.text-visual { padding: 3rem 0; }
.text-visual-grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  place-items: center stretch;
}
.text-visual-body { display: flex; flex-direction: column; gap: var(--s2); }
.visual-placeholder { aspect-ratio: 3 / 2; width: 100%; }
/* naast de tekst groeit de foto mee tot de hoogte van de tekst (nooit lager dan 3:2); op gsm, onder elkaar, gewoon 3:2 */
@media (min-width: 768px) {
  .text-visual-grid > .visual-placeholder { align-self: stretch; aspect-ratio: auto; min-height: 20rem; }
}
/* grijs vervangblok wanneer er geen beeld is (Webflow: .text-alternativer) */
.text-alternativer {
  /* vult zijn rasterkolom volledig (het ontwerp liet 48 px over aan de rechterkant) */
  width: 100%; aspect-ratio: 1; padding: var(--s4);
  background: var(--grey); text-align: center; text-wrap: balance;
  display: flex; justify-content: center; align-items: center;
}
.text-alternativer h2 { font-size: 3rem; line-height: 1.2; }

/* ─── VOORDELEN IN ZWART KADER ─── */
/* Webflow: .advantages_flex-wrap */
.advantages-section { padding: 3rem 0; }
/* Webflow zet dit kader in .container-large (88rem), breder dan de rest */
.advantages-section .container { max-width: calc(var(--container-l) + 2 * var(--gutter)); }
.advantages {
  background: var(--black); color: var(--white);
  /* zijpadding zo dat de inhoud precies 72rem breed is, gelijk met de tekstkolommen */
  padding: var(--s4) max(var(--s2), calc((100% - var(--container-m)) / 2));
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.advantages-title { max-width: 24rem; font-size: 3rem; line-height: 1.2; }
.advantages-list {
  min-width: 0; columns: 2; column-gap: var(--s2);
  list-style: none; padding: 0; margin: 0;
}
/* vinkje op de eerste tekstregel, niet in het midden van een lange regel */
.advantages-list li {
  display: flex; align-items: flex-start; gap: 0.5em;
  break-inside: avoid; margin-bottom: 1em; font-size: 1.1rem;
}
.advantages-list .icon-sm { color: var(--red); flex: none; margin-top: calc((1lh - 1em) / 2); }

/* ─── VEELGESTELDE VRAGEN ─── */
/* Webflow: .fs_accordion-2_* — rode labels, dunne zwarte lijnen */
.faq-grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.faq-intro { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }

/* ─── REFERENTIEPAGINA: ROOD CTA-BLOK ─── */
/* Webflow: .red-cta-block op .backgroud-white-to-grey */
.white-to-grey {
  background-image: linear-gradient(180deg, var(--white) 50%, var(--grey) 50%);
  padding: 5rem 0;
}
.red-cta-block {
  background: var(--red); color: var(--white);
  padding: var(--s4) var(--s2); gap: var(--s2);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; text-wrap: balance;
}
/* zonder max-width krijgt een flex-item met align-items:center de breedte van
   zijn langste woord, waardoor lange samenstellingen buiten het kader lopen */
.red-cta-block > * { max-width: 100%; }
.red-cta-block h2 { color: var(--white); font-size: 3rem; line-height: 1.2; }
.red-cta-block .button-group { justify-content: center; }

/* ─── REFERENTIE-DETAIL: HERO MET BEELDEN ─── */
/* Webflow: .ref-hero_wrapper */
.ref-hero { padding: 5rem 0; }
/* tekst en beeld op de twee rasterkolommen (137 / 729), niet op een vaste tekstbreedte */
.ref-hero-wrapper {
  display: grid; gap: var(--s2); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.ref-hero-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.ref-hero-body h1 { font-size: 4rem; line-height: 1; }
.ref-hero-body h1 .text-red { color: var(--red); }
.ref-hero-media { min-width: 0; }
/* hoofdbeeld: een strook van alle foto's, één in beeld; swipen of slepen, of klikken op een miniatuur */
.ref-hero-main {
  width: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; cursor: grab;
}
.ref-hero-main::-webkit-scrollbar { display: none; }
.ref-hero-main.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.ref-hero-slide { flex: none; width: 100%; aspect-ratio: 3 / 2; }
/* Webflow: .thumbs-swiper_wrapper met de knoppen in de zijmarge */
.ref-thumbs-wrap { position: relative; padding: 0 var(--s2); margin-top: var(--s1); }
.ref-hero-thumbs {
  display: flex; gap: 0.5rem; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.ref-hero-thumbs::-webkit-scrollbar { display: none; }
.ref-hero-thumbs > * {
  position: relative; flex: none; width: 8rem; aspect-ratio: 3 / 2;
  scroll-snap-align: start; cursor: pointer; opacity: 0.5;
  transition: opacity var(--tr);
}
.ref-hero-thumbs > *.is-active, .ref-hero-thumbs > *:hover { opacity: 1; }
.thumbs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: var(--s2); height: 2rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--black); transition: color var(--tr);
}
.thumbs-arrow:hover { color: var(--red); }
.thumbs-arrow.is-prev { left: 0; }
.thumbs-arrow.is-prev .icon-sm { transform: rotate(180deg); }
.thumbs-arrow.is-next { right: 0; }
/* tags op een lichte achtergrond (Webflow: .tag) */
.tag-dark {
  border: 1px solid var(--black); color: var(--black);
  padding: 0.5rem 0.8rem; display: inline-block; font-size: 1rem;
}
.tag-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ─── STANDAARD HERO (rood blok met titel + CTA) ─── */
/* Webflow: .section_default-hero */
.default-hero { padding: 0 var(--gutter); }
.default-hero > .container { max-width: none; padding: 0; background: var(--red); color: var(--white); }
.default-hero-inner { padding: 3rem; padding-bottom: 0; }
.default-hero-inner > div { max-width: var(--container-m); margin: 0 auto; }
.default-hero h1 {
  color: var(--white); max-width: 60rem;
  margin: 1rem 0; font-size: 6.25rem; line-height: 1;
}
/* optionele intro onder de titel, zoals in de pagina-hero */
.default-hero .lead { color: var(--white); font-size: 1.5625rem; line-height: 1.5; max-width: 44rem; margin: 0; }
/* met intro (.has-lead): het CTA-blok hangt rechtsonder naast de tekst, zoals in de pagina-hero */
.default-hero.has-lead > .container { position: relative; padding-bottom: 3rem; }
.default-hero.has-lead .default-hero-cta-wrap { position: absolute; right: 0; bottom: 0; }
.default-hero-cta-wrap { display: flex; justify-content: flex-end; }
.default-hero-cta {
  background: var(--white); color: var(--black);
  padding: 2.5rem; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5625rem; line-height: 1.2;
  transition: all var(--tr);
}
.default-hero-cta:hover { background: var(--black); color: var(--white); }

/* ─── CENTRALE TEKSTPAGINA (privacy, cookies) ─── */
.rich-page { padding: 3rem 0; }
.rich-page .container { max-width: calc(var(--container-m) + 2 * var(--gutter)); }
.rich-page .article-body { max-width: none; }
/* juridische pagina's: titels en links zwart, link rood bij hover */
.rich-page .article-body h2, .rich-page .article-body h3, .rich-page .article-body h4 { color: var(--black); }
.rich-page .article-body a { color: var(--black); }
.rich-page .article-body a:hover { color: var(--red); }
/* knop die eruitziet als een link in lopende tekst (bv. Cookie-instellingen openen) */
.link-knop { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.link-knop:hover { color: var(--red); }
.rich-page .article-body h2 { margin-top: 2.5rem; }
.rich-page .article-body h3 { margin-top: 2rem; }
/* brede tabellen scrollen binnen hun eigen kader in plaats van de pagina te verbreden */
.table-scroll { overflow-x: auto; max-width: 100%; margin: 1.5rem 0; }
.article-body table { width: 100%; min-width: 30rem; border-collapse: collapse; margin: 0; }
.article-body th,
.article-body td {
  border: 1px solid var(--border-grey); padding: 0.75rem 1rem;
  text-align: left; font-size: 1.1rem; vertical-align: top;
}
.article-body th { background: var(--grey); font-weight: 700; }

/* ─── VACATURES ─── */
/* Webflow: .vacatures_list + .vacature_thumb-wrapper */
.vacatures-list { display: flex; flex-direction: column; gap: var(--s2); }
.vacature-card {
  position: relative; padding: var(--s4); gap: var(--s1);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--white); color: var(--black); text-decoration: none;
  transition: opacity var(--tr);
}
.vacature-card:hover { opacity: 0.9; }
.vacature-card[data-background-color="red"]   { background: var(--red);   color: var(--white); }
.vacature-card[data-background-color="black"] { background: var(--black); color: var(--white); }
.vacature-card[data-background-color="grey"]  { background: var(--grey);  color: var(--black); }
.vacature-card h2 { font-size: 3rem; line-height: 1.2; color: inherit; }
.vacature-card-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.vacature-card-meta { font-size: 1.1rem; }
.vacature-card .icon-sm { flex: none; width: 2.75rem; height: 2.75rem; }

/* ─── CIJFERS (Over JACK!) ─── */
/* Webflow: .section_about-numbers */
.about-numbers { background: var(--black); color: var(--white); padding: 5rem 0; }
.about-numbers-wrap {
  display: flex; flex-wrap: wrap;
  justify-content: space-around; align-items: flex-start; gap: var(--s4);
}
.about-number {
  max-width: 16rem; text-align: center; text-wrap: balance;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  font-size: 1.5rem; line-height: 1.3;
}
.about-number-value {
  width: 100%; font-family: var(--font-display);
  font-size: 4rem; font-weight: 700; line-height: 1;
}
.about-number-value .text-red { color: var(--red); }
[data-background-color="red"] .about-number-value .text-red { color: var(--black); }

/* ─── TEAM (Over JACK!) ─── */
.team-grid-design {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.team-member { display: flex; flex-direction: column; gap: var(--s1); }
.team-photo { aspect-ratio: 5 / 6; width: 100%; background: var(--grey); }
/* zolang er geen teamfoto is: de initialen groot in rood op grijs (geen voorbeeldfoto van iemand anders) */
.team-photo.is-initialen { display: grid; place-items: center; }
.team-photo.is-initialen::after { content: attr(data-initialen); font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: var(--red); letter-spacing: -0.02em; }
[data-background-color="grey"] .team-photo.is-initialen { background: var(--white); }
.team-member-name { font-weight: 700; font-size: 1.25rem; }
.team-member-role { font-weight: 700; color: var(--red); }
.team-member-links { display: flex; flex-direction: column; align-items: flex-start; }
.team-member-links a { color: var(--black); transition: color var(--tr); }
.team-member-links a:hover { color: var(--red); }
/* ronde profielfoto (uitzondering op de rechte hoeken, zoals de avatar bij de reviews) */
.team-photo.is-rond { aspect-ratio: 1; width: min(100%, 13rem); border-radius: 50%; }
/* met een ronde foto staat alles gecentreerd onder de cirkel */
.team-member:has(.is-rond) { align-items: center; text-align: center; }
.team-member:has(.is-rond) .team-member-links { align-items: center; }
.team-member-links { gap: 0.2rem; }
/* bel- en mailknop: twee ronde rode knoppen die als satellieten aan de rechterrand van de profielcirkel hangen, op halve hoogte;
   bij hover wordt de cirkel iets groter en schuiven de knoppen naar buiten. Het nummer of adres staat in title en aria-label. */
.team-avatar { position: relative; width: min(100%, 13rem); }
.team-avatar .team-photo.is-rond { width: 100%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.team-member-knoppen { position: absolute; right: -2.1rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.5rem; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.team-knop { width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--white); border: 3px solid var(--grey); transition: background var(--tr), transform .25s ease; }
section:not([data-background-color]) .team-knop, [data-background-color="white"] .team-knop { border-color: var(--white); }
.team-knop svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.team-knop:hover, .team-knop:focus-visible { background: var(--black); transform: scale(1.1); }
.team-member:hover .team-avatar .team-photo.is-rond { transform: scale(1.03); }
.team-member:hover .team-member-knoppen { transform: translate(0.45rem, -50%); }
@media (prefers-reduced-motion: reduce) { .team-avatar .team-photo.is-rond, .team-member-knoppen, .team-knop { transition: none; } }
.kantoor-foto { margin: 0; display: flex; flex-direction: column; }
.kantoor-foto .visual-placeholder { flex: 1; }
.kantoor-foto figcaption { margin-top: 0.5rem; font-size: 0.95rem; color: var(--text-grey); }

/* ─── KENNISCENTRUM-ARTIKEL: STICKY ROOD KADER ─── */
/* Webflow: .sticky-hero_grid */
.sticky-hero { padding: 0 0 3rem; }
.sticky-hero-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: 0.75fr 1.25fr;
}
.sticky-hero-grid > * { min-width: 0; }
.sticky-hero-stick {
  position: sticky; top: 7.6rem;
  padding: var(--s4) var(--s2) var(--s4) 0;
  gap: var(--s1); color: var(--white);
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: flex-start;
}
/* het rode vlak loopt door tot de linkerrand van het scherm */
.sticky-hero-stick::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0; right: 0; width: 100vw; background: var(--red);
}
.sticky-hero-stick h1 { color: var(--white); font-size: 2.5rem; line-height: 1.1; }
.sticky-hero-stick .back-button { color: var(--white); }
.sticky-hero-body { padding-top: var(--s4); }

/* ─── REFERENTIEDETAIL: PIJLEN OP DE SLIDER ─── */
.ref-hero-main-wrap { position: relative; }
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--black);
  border: none; border-radius: 0; cursor: pointer;
  transition: all var(--tr);
}
.slider-arrow:hover { background: var(--red); color: var(--white); }
.slider-arrow.is-prev { left: 0; }
.slider-arrow.is-prev .icon-sm { transform: rotate(180deg); }
.slider-arrow.is-next { right: 0; }
.ref-more { background: var(--grey); padding: 5rem 0; }

/* ─── OVERZICHTSKOP GECENTREERD (referenties) ─── */
.center-hero { padding: 3rem 0 0; }
.center-hero .container { max-width: calc(var(--container-s) + 2 * var(--gutter)); }
.center-hero-inner { text-align: center; }
.center-hero h1 { margin-bottom: var(--s2); }
.center-hero .filter-tabs { justify-content: center; }

/* volledig grijs vlak dat doorloopt in het contactformulier eronder */

/* het grijze vlak achter de contactgegevens is hier overbodig */

/* grijs vanaf de helft van het blok, doorlopend tot aan de footer */
/* grijs bovenaan dat halverwege het rode kader overgaat in wit */
.grey-to-white {
  background-image: linear-gradient(180deg, var(--grey) 50%, var(--white) 50%);
  padding: 5rem 0;
}
/* boven de kleur van het vorige blok, vanaf de helft die van het volgende; als laatste blok voor de zwarte footer: ...-to-black */
.grey-to-black { background-image: linear-gradient(180deg, var(--grey) 50%, var(--black) 50%); padding: 5rem 0; }
.white-to-black { background-image: linear-gradient(180deg, var(--white) 50%, var(--black) 50%); padding: 5rem 0; }
/* rood CTA-blok op een volledig grijs vlak */
.grey-cta { background: var(--grey); padding: 5rem 0; }
/* strook met social posts */
/* schermbrede carrousel (.autoslider) met vierkante tegels; grijs vlak, sluit aan op het rode blok eronder */
.social-strip { background: var(--grey); padding: 5rem 0 var(--s2); }
.autoslider.is-social .autoslider-track { --kaart: min(calc(100cqw - 2 * var(--gutter)), 16rem); }
.autoslider.is-social .autoslider-track { gap: 1rem; }
/* position:relative houdt de sr-only-tekst binnen de tegel, anders ontsnapt hij aan de scroller */
.social-post { position: relative; aspect-ratio: 1; transition: opacity var(--tr); }
.social-post:hover { opacity: 0.85; }
.social-strip .autoslider-arrow { background: var(--white); }
.social-strip .autoslider-arrow:hover { background: var(--black); }
.social-strip .autoslider-dot { background: var(--dark-grey); }
.social-strip .autoslider-dot.is-active { background: var(--red); }

/* ─── VACATUREDETAIL ─── */
.sticky-hero-meta { font-size: 1.1rem; }
/* tekst in het rode vlak smaller houden, met meer lucht aan de rechterkant */
.sticky-hero-stick { padding-right: var(--s4); }
.sticky-hero-stick > * { max-width: 22rem; }
.sticky-hero-stick p { font-size: 1.1rem; }
.sticky-hero-stick a:not(.btn):not(.back-button) { color: var(--white); text-decoration: underline; }

/* ─── ROOD BLOK MET SOCIALE MEDIA (contact) ─── */
.red-cta-block.is-large { font-size: 1.5625rem; }
.red-cta-block .social-icon { color: var(--white); }
.red-cta-block .social-icon:hover { color: var(--black); }

/* ─── LOGO'S VAN PARTNERS EN MERKEN ─── */
/* placeholders zolang de echte logobestanden er niet zijn */
/* logo's op één horizontale lijn die zijwaarts scrollt */
.logo-strip { position: relative; margin-top: var(--s2); }
.logo-track {
  display: flex; gap: 1px; background: var(--border-grey);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.logo-track::-webkit-scrollbar { display: none; }
.logo-track .logo-tile { flex: none; width: 14rem; scroll-snap-align: start; }

/* flex i.p.v. grid: de laatste rij vult zich, geen leeg raster */
.logo-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border-grey); }
.logo-tile {
  flex: 1 1 12rem; min-height: 8rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); padding: var(--s1); text-align: center;
}
.logo-tile span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; color: var(--black); letter-spacing: 0.02em;
}
.logo-grid.is-merken { flex-direction: column; gap: var(--s1); background: none; }
.logo-grid.is-merken .logo-tile { flex: none; min-height: 10rem; background: var(--grey); }
.logo-grid.is-merken .logo-tile span { font-size: 2rem; }
/* echt logo in een tegel: hooguit 60% breed, zoals in de fotospecificaties */
.logo-tile img { display: block; max-width: 60%; max-height: 7rem; width: auto; height: auto; }
/* variant .is-plain: één groot logo op wit, zonder grijze tegel */
.logo-grid.is-merken.is-plain .logo-tile { background: none; min-height: 0; padding: 0; }
.logo-grid.is-merken.is-plain .logo-tile img { max-width: min(100%, 24rem); max-height: 18rem; }

/* ─── ACHTERGRONDKLEUR PER BLOK (schermbreed) ─── */
/* data-background-color="white|grey|black|red" op een sectie; tekst, titels, links en knoppen volgen */
[data-background-color="white"] { background: var(--white); color: var(--black); }
[data-background-color="grey"]  { background: var(--grey);  color: var(--black); }
[data-background-color="black"] { background: var(--black); color: var(--white); }
[data-background-color="red"]   { background: var(--red);   color: var(--white); }
[data-background-color="black"] :is(h1, h2, h3, h4, p),
[data-background-color="red"]   :is(h1, h2, h3, h4, p) { color: var(--white); }
[data-background-color="black"] .red-link,
[data-background-color="red"]   .red-link { color: var(--white); }
[data-background-color="black"] .red-link:hover { color: var(--red); }
[data-background-color="red"]   .red-link:hover { color: var(--black); }
[data-background-color="red"] .advantages-list .icon-sm { color: var(--black); }

/* ─── HERO MET FOTO EN ROOD KADER ─── */
/* schermbreed; pas boven 120rem (1920px) begrensd en gecentreerd */
.photo-hero { padding: 0; }
.photo-hero-inner {
  position: relative; min-height: 40rem; max-width: 120rem; margin: 0 auto;
  background: #2c2020 center / cover no-repeat;
  display: flex; align-items: flex-end;
  /* het rode kader begint op de tekstkolom (137 op 1440) */
  padding: var(--s2) max(var(--gutter), calc((100% - var(--container-m)) / 2));
}
.photo-hero-panel {
  background: var(--red); color: var(--white);
  padding: var(--s4); max-width: 44rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1);
}
.photo-hero-panel h1 { color: var(--white); font-size: 5rem; line-height: 0.95; }
.photo-hero-panel .lead { color: var(--white); font-size: 1.5625rem; line-height: 1.5; }
.photo-hero-panel .lead a, .default-hero .lead a { color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.photo-hero-panel .lead a:hover, .default-hero .lead a:hover { text-decoration-thickness: 2px; }
.photo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s1); }
.photo-hero-actions a:not(.btn) { color: var(--white); font-size: 1.1rem; }
.photo-hero-actions a:not(.btn):hover { text-decoration: underline; }
/* witte knop op een rood of zwart vlak; hover: zwart, zoals de outline-knoppen */
.btn-white { background: var(--white); border-color: var(--white); color: var(--black); }
.btn-white:hover { background: var(--black); border-color: var(--black); color: var(--white); opacity: 1; }
[data-background-color="black"] .btn-white:hover { background: var(--red); border-color: var(--red); }
/* ook op zwarte vlakken binnen een witte of grijze sectie (teaser): hover rood, anders valt de knop weg */
.teaser-body .btn-white:hover, .teaser:hover .teaser-body .btn-white { background: var(--red); border-color: var(--red); color: var(--white); }

/* ─── TWEE TEKSTKOLOMMEN + UITSPRAAK ─── */
/* grote zwarte "quote" boven een tekstblok */
.text-statement {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.5rem; line-height: 1.15; color: var(--black);
  max-width: 60rem; margin-bottom: var(--s2); text-wrap: balance;
}
/* één doorlopende tekst over twee kolommen: de browser verdeelt ze even lang, links hooguit een regel langer dan rechts
   (Klaas: een rechterkolom die langer is dan de linker oogt onrustig). Onder 2 × 20rem vanzelf één kolom. */
.text-columns { columns: 2 20rem; column-gap: var(--s4); column-fill: balance; }
.text-columns p { font-size: 1.1rem; margin: 0 0 1em; orphans: 1; widows: 1; }
.text-columns > :last-child { margin-bottom: 0; }

/* ─── DRIELUIK: FOTO MET TITEL EN UITLEG ─── */
.trio-grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.trio-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; color: var(--black); }
.trio-photo { width: 100%; aspect-ratio: 3 / 2; background: var(--grey); margin-bottom: 0.75rem; }
.trio-item h3 { font-size: 1.5rem; line-height: 1.3; transition: color var(--tr); }
.trio-item p { font-size: 1.1rem; margin: 0; }
/* klikbare variant: de hele tegel is de link, de rode tekstlink toont waarheen */
a.trio-item:hover h3 { color: var(--red); }
a.trio-item .red-link { margin-top: 0.25rem; }

/* ─── VIER KOLOMMEN MET TITEL EN KORTE TEKST ─── */
/* sectie met schermbrede achtergrond (data-background-color); de inhoud staat in .container op het raster */
.four-cols-block { padding: var(--s4) 0; }
.four-cols-head {
  display: grid; grid-template-columns: 1.5fr 0.5fr; gap: var(--s2);
  align-items: start; margin-bottom: var(--s2);
}
/* de link staat op de regel van de titel (h2: 3rem × 1,2 = 3,6rem; link 1,65rem hoog) */
.four-cols-head > div:last-child { text-align: right; padding-top: 1rem; }
.four-cols-head .lead { font-size: 1.1rem; line-height: 1.5; margin-top: 0.5rem; }
.four-cols-head .red-link { display: inline-block; font-size: 1.1rem; line-height: 1.5; }
.four-cols {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
/* rood vierkantje als opsommingsteken, zoals op de tijdlijn en in de hero */
.four-col h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.5rem; }
.four-col h3::before { content: ''; flex: none; width: 0.7rem; height: 0.7rem; background: var(--red); }
.four-col p { font-size: 1.1rem; margin: 0; }
/* variant met foto boven de titel: dan geen vierkantje */
.four-col-photo { width: 100%; aspect-ratio: 4 / 3; background: var(--grey); margin-bottom: 1rem; }
.four-cols.has-photos .four-col h3::before { content: none; }
[data-background-color="red"] .four-col h3::before { background: var(--black); }

/* ─── VEELGESTELDE VRAGEN, BREED EN LINKS ─── */
.faq-wide { max-width: 60rem; }
.faq-wide h2 { margin-bottom: var(--s2); }
/* variant met zwarte vragen en zwart pijltje; hover rood */
.faq-list.is-black .faq-q, .faq-list.is-black .faq-icon { color: var(--black); }
.faq-list.is-black .faq-q:hover, .faq-list.is-black .faq-q:hover .faq-icon { color: var(--red); opacity: 1; }
.faq-list.is-black .faq-item { border-bottom-color: var(--border-grey); }
/* geopende vraag: rood, ook het pijltje */
.faq-list.is-black .faq-item.open .faq-q, .faq-list.is-black .faq-item.open .faq-icon { color: var(--red); }

/* ─── TABBLADEN MET FOTO ─── */
/* opsomming van titels links; klik toont de tekst en wisselt de foto rechts (of links met .is-photo-left) */
.tab-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; }
.tab-block.is-photo-left .tab-photo { order: -1; }
.tab-list { display: flex; flex-direction: column; gap: var(--s1); }
.tab-item { border-left: 0.25rem solid var(--border-grey); padding: 0.5rem 0 0.5rem var(--s2); transition: border-color var(--tr); }
.tab-item.is-open { border-color: var(--red); }
.tab-title {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.3; color: var(--black);
  transition: color var(--tr);
}
.tab-title:hover { color: var(--red); }
.tab-body { display: none; margin-top: 0.75rem; max-width: 26rem; font-size: 1.1rem; }
.tab-item.is-open .tab-body { display: block; }
.tab-photo { width: 100%; aspect-ratio: 4 / 5; max-height: 44rem; background: var(--grey) center / cover no-repeat; }
/* variant .is-landscape: lage liggende foto (5:2), bijvoorbeeld om alleen de plint te tonen; ook op gsm */
.tab-block.is-landscape .tab-photo { aspect-ratio: 5 / 2; }
/* foto even hoog als de lijst met de langste opengeklapte tekst (het script zet die hoogte als min-height op de lijst) */
.tab-block.is-stretch { align-items: stretch; }
.tab-block.is-stretch .tab-photo { aspect-ratio: auto; max-height: none; min-height: 16rem; }

/* ─── STAPPENBLOK: FOTO LINKS, TEKST RECHTS ─── */
/* schermbreed; achtergrond via data-background-color op de sectie */
.split-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s2); min-height: 44rem; padding: 0; container-type: inline-size; }
/* foto's en tekstpanelen liggen op elkaar (grid-area 1/1); de knoppen 01, 02, 03 wisselen ze met een fade */
.split-steps-photos { display: grid; }
.split-steps-photos > * { grid-area: 1 / 1; }
.split-steps-photo { background: var(--grey) center / cover no-repeat; min-height: 24rem; opacity: 0; transition: opacity 0.6s ease; }
.split-steps-photo.is-active { opacity: 1; }
.split-steps-body {
  display: flex; flex-direction: column; align-items: flex-start;
  /* links op de tweede tekstkolom (729 op 1440), rechts gelijk met de container */
  padding: var(--s4) max(var(--s2), calc((100cqw - var(--container-m)) / 2)) var(--s4) 0;
}
.split-steps-panels { display: grid; flex: 1; width: 100%; }
.split-steps-panel {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.split-steps-panel.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease 0.15s, visibility 0s; }
.steps-nav { display: flex; gap: 0.5rem; margin-bottom: var(--s2); }
.steps-nav button {
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: none; color: inherit; cursor: pointer;
  border: 2px solid currentColor; font-family: var(--font-display); font-weight: 700; font-size: 1rem; transition: all var(--tr);
}
.steps-nav button:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.steps-nav .is-active { background: var(--black); border-color: var(--black); color: var(--white); }
[data-background-color="black"] .steps-nav button:hover, [data-background-color="black"] .steps-nav .is-active { background: var(--white); border-color: var(--white); color: var(--black); }
[data-background-color="red"] .steps-nav button:hover, [data-background-color="red"] .steps-nav .is-active { background: var(--white); border-color: var(--white); color: var(--red); }
.split-steps-body h2 { font-size: 4.5rem; line-height: 0.95; max-width: 12em; }
.split-steps-foot { margin-top: auto; padding-top: var(--s4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.split-steps-foot p { font-size: 1.25rem; line-height: 1.5; max-width: 36rem; margin: 0; }

/* ─── FOTORASTER (masonry), 3 OF 4 KOLOMMEN ─── */
/* vierkante cellen; een foto kan 2 kolommen breed (.is-wide), 2x2 (.is-big) of 2 rijen hoog (.is-tall) zijn.
   De rijhoogte is gelijk aan de kolombreedte: (breedte van .masonry-wrap - tussenruimtes) / aantal kolommen */
.masonry-wrap { container-type: inline-size; }
.masonry {
  --kolommen: 3;
  display: grid; gap: var(--s2); grid-auto-flow: dense;
  grid-template-columns: repeat(var(--kolommen), 1fr);
  grid-auto-rows: calc((100cqw - (var(--kolommen) - 1) * var(--s2)) / var(--kolommen));
}
.masonry.is-4 { --kolommen: 4; }
.masonry > * { display: block; min-width: 0; background: var(--grey) center / cover no-repeat; }
.masonry .is-wide { grid-column: span 2; }
.masonry .is-tall { grid-row: span 2; }
.masonry .is-big  { grid-column: span 2; grid-row: span 2; }

/* ─── CTA-BAND: TEKST LINKS, KNOP RECHTS ─── */
/* schermbreed; achtergrond via data-background-color */
.cta-band { padding: var(--s4) 0; }
.cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.cta-band p { font-family: var(--font-display); font-weight: 600; font-size: 1.5625rem; line-height: 1.4; margin: 0; max-width: 40rem; }

/* ─── VOORDELEN, SCHERMBREED ─── */
/* zelfde raster als .advantages, maar het kleurvlak loopt over het hele scherm */
.advantages-band { padding: var(--s4) 0; }
.advantages-band .advantages { background: none; color: inherit; padding: 0; }

@media screen and (max-width: 991px) {
  .tab-block { grid-template-columns: 1fr; }
  .tab-block.is-photo-left .tab-photo { order: 0; }
  .tab-photo, .tab-block.is-stretch .tab-photo { aspect-ratio: 3 / 2; min-height: 0; }
  .split-steps { grid-template-columns: 1fr; }
  .split-steps-body { padding: var(--s2) var(--gutter); }
  .split-steps-body h2 { font-size: 3rem; }
  .masonry, .masonry.is-4 { --kolommen: 2; }
}
@media screen and (max-width: 767px) {
  .photo-hero-inner { min-height: 0; padding: var(--s1) var(--gutter); }
  .photo-hero-panel { padding: var(--s2); }
  .photo-hero-panel h1 { font-size: 3rem; }
  .text-statement { font-size: 1.75rem; }
  .four-cols-head { grid-template-columns: 1fr; }
  .four-cols-head > div:last-child { text-align: left; }
  .four-cols-block, .cta-band, .advantages-band { padding: var(--s2) 0; }
  .split-steps-body h2 { font-size: 2.5rem; }
  .default-hero.has-lead > .container { padding-bottom: 0; }
  /* zonder knop onderaan (contact) toch ruimte onder de tekst */
  .default-hero.has-lead > .container:not(:has(.default-hero-cta-wrap)) { padding-bottom: var(--s2); }
  .default-hero.has-lead .default-hero-cta-wrap { position: static; margin-top: var(--s2); }
}
@media screen and (max-width: 575px) {
  .masonry, .masonry.is-4 { --kolommen: 1; }
  .masonry .is-wide, .masonry .is-big { grid-column: auto; }
}

/* ─── ARTIKEL-KOP (kenniscentrum) ─── */
/* wit, op het raster: kruimelpad, titel, intro, datum en leestijd, deelknoppen in grijze cirkels */
.article-hero { padding: 3rem 0 1rem; }
/* Foutpagina 404: de kop met linklijst is de hele pagina; ruimte tot de footer */
.article-hero:has(> .container > .link-list) { padding-bottom: 8rem; }
.article-hero + .article-section { padding-top: 4rem; }
.article-column > .article-figure:first-child { margin-top: 0; }
.article-hero h1 { max-width: 60rem; margin: 1rem 0 1.25rem; }
.article-hero .lead { font-size: 1.5625rem; line-height: 1.4; max-width: 48rem; margin-bottom: 1.5rem; }
.article-meta { font-size: 1rem; color: var(--text-grey); margin-bottom: 1.5rem; }
.article-meta .sep { margin: 0 0.6rem; }
.share-list { display: flex; gap: 0.75rem; }
.share-btn {
  width: 3.75rem; height: 3.75rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grey); color: var(--black); transition: all var(--tr);
}
.share-btn .icon-sm { width: 1.2rem; height: 1.2rem; }
.share-btn:hover { background: var(--black); color: var(--white); }
.share-btn.is-copied { background: var(--red); color: var(--white); }

/* ─── FOTO'S IN EEN ARTIKEL ─── */
/* drie breedtes, altijd gecentreerd: .is-full (paginabreed, 72rem), .is-text (tekstbreedte) of .is-small (smaller dan de tekst) */
.article-section .container { container-type: inline-size; }
.article-figure { margin: 2rem auto; }
.article-figure > * { display: block; width: 100%; }
.article-figure img { height: auto; }
.article-figure .figure-placeholder { background: var(--grey) center / cover no-repeat; }
.article-figure.is-full { width: 100cqw; margin-left: calc(50% - 50cqw); margin-right: calc(50% - 50cqw); }
.article-figure.is-small { max-width: 30rem; }
.article-figure figcaption { font-size: 0.9rem; line-height: 1.4; color: var(--text-grey); margin-top: 0.6rem; }

/* ─── TAGS ONDER EEN ARTIKEL ─── */
.article-tags { margin-top: 3rem; padding: 2rem 0 1rem; border-top: 1px solid var(--border-grey); }  /* onder de knoppen evenveel ruimte als boven het label (samen met de 1rem van .article-section) */
.article-tags-label { font-size: 1rem; color: var(--text-grey); margin-bottom: 0.75rem; }
a.tag-dark { transition: all var(--tr); }
a.tag-dark:hover { background: var(--black); color: var(--white); }

/* ─── LEESKOLOM: BREEDTES EN ZIJNOTA ─── */
/* .is-wide: 56rem in plaats van 48rem, gecentreerd; lettergrootte van de lopende tekst 1.1rem zoals de lijsten */
.article-column.is-wide { max-width: 56rem; }
.article-column.is-wide .article-body { max-width: none; }
.article-body p { font-size: 1.1rem; }
.article-body p.lead { font-size: 1.5625rem; }
/* met zijnota: tekst links op de tekstkolom (twee van de drie rasterkolommen), nota in de derde kolom, scrolt mee */
.article-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2) var(--s2); align-items: start; }
.article-layout .article-column { grid-column: span 2; max-width: none; margin: 0; }
.article-layout .article-body { max-width: none; }
.article-aside { position: sticky; top: 9rem; }
.aside-note { background: var(--grey); padding: var(--s2); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.aside-note h3 { font-size: 1.5rem; line-height: 1.3; }
.aside-note p { margin: 0; font-size: 1rem; line-height: 1.5; }
.aside-note.is-black { background: var(--black); color: var(--white); }
.aside-note.is-black h3, .aside-note.is-black p { color: var(--white); }
.aside-note.is-red { background: var(--red); color: var(--white); }
.aside-note.is-red h3, .aside-note.is-red p { color: var(--white); }

/* ─── DOWNLOADS EN EXTERNE LINKS IN EEN ARTIKEL ─── */
.article-downloads { display: grid; gap: 0.75rem; margin: var(--s2) 0; }
.download-card {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--black); padding: 1rem 1.25rem; color: var(--black);
  text-decoration: none !important; transition: all var(--tr);
}
.download-card .icon-sm { width: 1.75rem; height: 1.75rem; flex: none; color: var(--red); transition: color var(--tr); }
.download-card strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.download-card small { display: block; font-size: 0.9rem; color: var(--text-grey); transition: color var(--tr); }
.download-card:hover { background: var(--black); color: var(--white); }
.download-card:hover .icon-sm, .download-card:hover small { color: var(--white); }
.aside-note .download-card { width: 100%; background: var(--white); }
.aside-note .download-card:hover { background: var(--black); }

/* ─── GECENTREERD TEKSTBLOK MET LABEL ─── */
/* label bovenaan, grote titel gecentreerd, smalle tekst (48rem) gecentreerd maar links uitgelijnd */
.center-text { text-align: center; }
.center-text .section-label { margin-bottom: 1rem; }
.center-text h2 { font-size: 4rem; line-height: 1.05; max-width: 60rem; margin: 0 auto var(--s2); text-wrap: balance; }
.center-text-body { max-width: var(--container-s); margin: 0 auto; text-align: left; }
.center-text-body p { font-size: 1.1rem; line-height: 1.5; margin-bottom: 1rem; }
.center-text-body p:last-child { margin-bottom: 0; }

/* ─── CARROUSEL MET KEUZEKNOPPEN ─── */
/* titel en intro gecentreerd, een knop per onderdeel, daaronder één foto in het midden; de volgende schuift in vanaf de zijkant
   door een fade-zone links en rechts. Knop of pijl schuift de gekozen foto in beeld. */
.carousel-head { text-align: center; max-width: 60rem; margin: 0 auto var(--s2); }
.carousel-head h2 { font-size: 4rem; line-height: 1.05; margin-bottom: 1rem; text-wrap: balance; }
.carousel-head p { font-size: 1.25rem; line-height: 1.5; }
.carousel-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: var(--s2) 0; }
.carousel-filter {
  border: 1px solid var(--border-grey); background: var(--white); color: var(--black); cursor: pointer;
  font-family: var(--font-text); font-size: 1rem; padding: 0.5rem 1.1rem; transition: all var(--tr);
}
.carousel-filter:hover { border-color: var(--black); }
.carousel-filter.is-active { background: var(--red); border-color: var(--red); color: var(--white); }
/* de strook loopt over de volle schermbreedte; in rust staat de buur net buiten het scherm,
   bij een klik schuift hij vanaf de schermrand in en vervaagt hij in tot hij in het midden staat */
.carousel { --foto: 36rem; position: relative; container-type: inline-size; }
.carousel-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 0.25rem 0;
  /* tussenruimte = afstand van de foto tot de schermrand, zodat de buur in rust buiten beeld staat */
  gap: max(var(--s2), calc((100cqw - var(--foto)) / 2));
  padding-inline: max(var(--gutter), calc((100cqw - var(--foto)) / 2));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(50% - var(--foto) / 2), #000 calc(50% + var(--foto) / 2), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 calc(50% - var(--foto) / 2), #000 calc(50% + var(--foto) / 2), transparent 100%);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: none; width: min(100%, var(--foto)); scroll-snap-align: center; position: relative; color: var(--black); }
.carousel-photo { width: 100%; aspect-ratio: 4 / 3; background: var(--grey) center / cover no-repeat; }
.carousel-caption { margin-top: 1rem; text-align: center; }
.carousel-caption strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.3; }
.carousel-caption span { display: block; font-size: 1.1rem; line-height: 1.5; margin-top: 0.25rem; }
/* pijlen zoals in de dienstslider (blok 4), op de schermrand, op het verticale midden van de foto */
.carousel-arrow {
  position: absolute; top: calc(0.25rem + min(var(--foto), 100cqw - 2 * var(--gutter)) * 0.375); transform: translateY(-50%); z-index: 2;
  width: 2.75rem; height: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--grey); border: 0; color: var(--black); cursor: pointer; transition: all var(--tr);
}
.carousel-arrow:hover { background: var(--black); color: var(--white); }
.carousel-arrow.is-prev { left: var(--gutter); }
.carousel-arrow.is-prev .icon-sm { transform: rotate(180deg); }
.carousel-arrow.is-next { right: var(--gutter); }

/* ─── TEKST MET LINKLIJST NAAST FOTO ─── */
/* scherm in twee: links titel, tekst en een lijst links met onze pijl; rechts een foto tot de schermrand */
.split-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s2); min-height: 40rem; padding: 0; container-type: inline-size; }
.split-links-body {
  min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  /* tekst op de eerste tekstkolom (137 op 1440) */
  padding: var(--s4) 0 var(--s4) max(var(--gutter), calc((100cqw - var(--container-m)) / 2));
}
.split-links.is-photo-left .split-links-photo { order: -1; }
.split-links.is-photo-left .split-links-body { padding: var(--s4) max(var(--gutter), calc((100cqw - var(--container-m)) / 2)) var(--s4) 0; }
.split-links-body h2 { font-size: 4rem; line-height: 1; margin-bottom: var(--s2); }
.split-links-body p { font-size: 1.1rem; line-height: 1.5; max-width: 32rem; margin-bottom: var(--s2); }
.split-links-photo { background: var(--grey) center / cover no-repeat; min-height: 24rem; }
.link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.link-list li { margin: 0; }
.link-list a {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--black);
  transition: color var(--tr);
}
.link-list a .icon-sm { width: 1.25rem; height: 1.25rem; color: var(--red); transition: transform var(--tr); }
.link-list a:hover { color: var(--red); }
.link-list a:hover .icon-sm { transform: translateX(0.25rem); }
[data-background-color="black"] .link-list a, [data-background-color="red"] .link-list a { color: var(--white); }
[data-background-color="red"] .link-list a .icon-sm { color: var(--white); }
[data-background-color="black"] .link-list a:hover { color: var(--red); }
[data-background-color="red"] .link-list a:hover { color: var(--black); }

@media screen and (max-width: 991px) {
  .article-layout { grid-template-columns: 1fr; }
  .split-links { grid-template-columns: 1fr; }
  .split-links-body { padding: var(--s2) var(--gutter); }
  .split-links-body h2 { font-size: 3rem; }
  .article-layout .article-column { grid-column: auto; }
  .article-aside { position: static; }
  .center-text h2, .carousel-head h2 { font-size: 2.75rem; }
}
@media screen and (max-width: 767px) {
  .autoslider-controls { flex-direction: column; align-items: flex-start; }
  .split-links-body h2 { font-size: 2.5rem; }
  .carousel-arrow { display: none; }
  .center-text h2, .carousel-head h2 { font-size: 2.25rem; }
}

/* ─── SCHERMBREDE CARROUSEL, SCHUIFT AUTOMATISCH ─── */
/* kop op de container; de strook loopt over de volle schermbreedte, de actieve kaart begint op de containerrand,
   de buren steken links en rechts uit. Onderaan vierkante bolletjes en pijlen. Schuift elke 5 s; pauzeert bij hover. */
.autoslider { position: relative; container-type: inline-size; }
.autoslider-track {
  --zij: max(var(--gutter), calc((100cqw - var(--container-m)) / 2));
  --kaart: min(calc(100cqw - 2 * var(--gutter)), 60rem);
}
.autoslider-track {
  position: relative; display: flex; gap: var(--s2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: 0.25rem var(--zij); scroll-padding-inline: var(--zij);
  /* rechts extra ruimte, anders kan de laatste kaart nooit tot op de containerrand schuiven */
  padding-right: max(var(--zij), calc(100cqw - var(--zij) - var(--kaart)));
}
.autoslider-track::-webkit-scrollbar { display: none; }
.autoslider-slide { flex: none; width: var(--kaart); scroll-snap-align: start; position: relative; color: var(--black); }
/* foto's: brede kaart met label op de foto en titel eronder */
.autoslider.is-photos .autoslider-track { --kaart: min(calc(100cqw - 2 * var(--gutter)), 60rem); }
.autoslider-photo { width: 100%; aspect-ratio: 16 / 9; background: var(--grey) center / cover no-repeat; position: relative; }
.autoslider-label {
  position: absolute; left: 0; bottom: 0; background: var(--red); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: 0.5rem 1rem;
}
.autoslider-title { margin-top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.3; transition: color var(--tr); }
a.autoslider-slide:hover .autoslider-title { color: var(--red); }
/* reviews: grijze kaarten, drie naast elkaar op de container */
.autoslider.is-reviews .autoslider-track { --kaart: min(calc(100cqw - 2 * var(--gutter)), 22rem); }
.review-card { background: var(--grey); padding: var(--s2); height: 100%; display: flex; flex-direction: column; gap: 1rem; }
.review-stars { color: var(--red); font-size: 1.25rem; letter-spacing: 0.15em; line-height: 1; }
.review-card blockquote { border: 0; padding: 0; margin: 0; font-size: 1.1rem; line-height: 1.5; flex: 1; }
.review-card footer { font-size: 1rem; }
.review-card footer strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.review-card footer span { color: var(--text-grey); }
[data-background-color="black"] .review-card { background: var(--white); color: var(--black); }
[data-background-color="black"] .review-card footer span { color: var(--dark-grey); }
/* variant met grote citaten: één brede kaart, aanhalingstekens in het rood, sterren blinken van links naar rechts */
.autoslider.is-quotes .autoslider-track { --kaart: min(calc(100cqw - 2 * var(--gutter)), 44rem); }
.autoslider.is-quotes .review-card { padding: var(--s4); gap: 1.5rem; }
.autoslider.is-quotes .review-card blockquote { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.35; }
.autoslider.is-quotes .review-card blockquote::before { content: '\201E'; color: var(--red); margin-right: 0.15em; }
.autoslider.is-quotes .review-card blockquote::after { content: '\201D'; color: var(--red); margin-left: 0.15em; }
.autoslider.is-quotes .review-stars { font-size: 1.5rem; }
/* de sterren van de actieve kaart lichten van links naar rechts op (script, Web Animations); de andere kaarten staan gewoon aan */
.review-stars span { display: inline-block; }
/* Google-score naast de titel: cijfer, sterren, aantal reviews en link naar alle reviews */
.review-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s2); margin-bottom: var(--s2); }
.review-head h2 { margin: 0; }
.review-score { display: flex; align-items: center; gap: 1.25rem; }
.review-score-num { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; line-height: 1; }
.review-score-num span { font-size: 1.25rem; color: var(--text-grey); margin-left: 0.15em; }
.review-score p { margin: 0.35rem 0; font-size: 1rem; }
.review-score .review-stars { font-size: 1.25rem; }
[data-background-color="black"] .review-score-num span { color: var(--border-grey); }
/* bediening: bolletjes links, pijlen rechts, op de containerbreedte */
.autoslider-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); }
.autoslider-dots { display: flex; gap: 0; }   /* de tussenruimte zit nu in de tikzone van elk bolletje */
.autoslider-dot { box-sizing: content-box; width: 0.6rem; height: 0.6rem; padding: 0.45rem; border: 0; background: var(--border-grey); background-clip: content-box; cursor: pointer; transition: background var(--tr); }   /* zelfde bolletje, maar een tikzone van 24 px (13-10-2026) */
.autoslider-dot.is-active { background: var(--red); }
.autoslider-arrows { display: flex; gap: 0.5rem; }
.autoslider-arrow {
  width: 2.75rem; height: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--grey); border: 0; color: var(--black); cursor: pointer; transition: all var(--tr);
}
.autoslider-arrow:hover { background: var(--black); color: var(--white); }
.autoslider-arrow.is-prev .icon-sm { transform: rotate(180deg); }
[data-background-color="black"] .autoslider-arrow { background: var(--white); color: var(--black); }
[data-background-color="black"] .autoslider-arrow:hover { background: var(--red); color: var(--white); }
[data-background-color="black"] .autoslider-dot { background: var(--dark-grey); }
[data-background-color="black"] .autoslider-dot.is-active { background: var(--red); }
[data-background-color="red"] .autoslider-dot { background: var(--white); }
[data-background-color="red"] .autoslider-dot.is-active { background: var(--black); }
[data-background-color="red"] .autoslider-arrow { background: var(--white); color: var(--black); }
[data-background-color="red"] .autoslider-arrow:hover { background: var(--black); color: var(--white); }

/* ─── VERTICALE TIJDLIJN ─── */
/* intro links op de eerste rasterkolom, stappen rechts over twee kolommen: rode lijn met rode vierkantjes, titel, tekst en optioneel een foto */
.timeline-v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2) var(--s2); align-items: start; }
.timeline-v-intro { position: sticky; top: 9rem; }
.timeline-v-intro .lead { margin-top: 1rem; }
.timeline-v { grid-column: span 2; list-style: none; padding: 0; margin: 0; }
.timeline-v li { position: relative; padding: 0 0 var(--s4) 3rem; margin: 0; }
/* elke stap tekent het lijnstuk van het midden van haar eigen vierkantje tot het midden van het volgende (0,825rem = midden van het vierkantje),
   zodat rood en vierkantje naadloos op elkaar aansluiten. Grijs tot de volgende stap aan de beurt is; dan vult het stuk zich
   van boven naar beneden rood (.is-done, via script) en pas daarna kleurt het volgende vierkantje */
.timeline-v li::before {
  content: ''; position: absolute; left: 0.35rem; top: 0.825rem; bottom: -0.825rem; width: 0.25rem;
  background: linear-gradient(var(--red), var(--red)) 0 0 / 100% 0% no-repeat var(--border-grey);
  transition: background-size 0.45s ease-in-out;
}
.timeline-v li.is-done::before { background-size: 100% 100%; }
.timeline-v li:last-child { padding-bottom: 0; }
.timeline-v li:last-child::before { display: none; }
/* vierkantje op de lijn: grijs tot de lijn ernaartoe rood is (.is-rood, het script wacht op de lijn); de stap die aan de beurt is, is groter.
   Het eerste vierkantje is altijd rood. */
.timeline-v li::after {
  content: ''; position: absolute; left: 0; top: 0.35rem; width: 0.95rem; height: 0.95rem; background: var(--border-grey);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.timeline-v li:first-child::after, .timeline-v li.is-rood::after { background: var(--red); }
.timeline-v li.is-active::after { transform: scale(1.7); }
/* alleen de cirkelversie krijgt een gloed, die één keer uitdeint */
.timeline-v.is-round li.is-active::after { animation: tl-gloed 1.4s ease-out 0.2s 1; }
@keyframes tl-gloed {
  0%   { box-shadow: 0 0 0 0 rgba(214, 2, 33, 0.55); }
  100% { box-shadow: 0 0 0 1rem rgba(214, 2, 33, 0); }
}
@media (prefers-reduced-motion: reduce) { .timeline-v li.is-active::after { animation: none; } }
.timeline-v.is-round li::after { border-radius: 50%; }
.timeline-v-label { color: var(--black); }
.timeline-v-label { display: block; color: var(--black); font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.35rem; transition: color var(--tr); }
.timeline-v li.is-active .timeline-v-label { color: var(--red); }
.timeline-v h3 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 0.75rem; }
.timeline-v p { font-size: 1.1rem; line-height: 1.5; max-width: 36rem; margin: 0; }
.timeline-v-photo { width: 100%; max-width: 36rem; aspect-ratio: 3 / 2; background: var(--grey) center / cover no-repeat; margin-top: 1.25rem; }
@media screen and (max-width: 991px) {
  .timeline-v-grid { grid-template-columns: 1fr; }
  .timeline-v-intro { position: static; }
  .timeline-v { grid-column: auto; }
}

/* ─── DOWNLOADS MET CATEGORIEËN ─── */
/* categorielijst links op de eerste rasterkolom (scrolt mee), de groepen rechts over twee kolommen;
   elke rij is een link: icoon, naam, bestandstype en grootte, en rechts "Download" of "Openen" */
.downloads-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: start; }
.download-nav, .side-nav { position: sticky; top: 9rem; }
.download-nav ul, .side-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.download-nav li, .side-nav li { margin: 0; }
.download-nav a, .side-nav a {
  display: block; padding: 0.6rem 0 0.6rem 1rem; border-left: 0.25rem solid var(--border-grey);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--black); transition: all var(--tr);
}
.download-nav a:hover, .download-nav a.is-active, .side-nav a:hover, .side-nav a.is-active { border-color: var(--red); color: var(--red); }
.download-groups { grid-column: span 2; min-width: 0; }
.download-group { margin-bottom: var(--s4); scroll-margin-top: 9rem; }
.download-group:last-child { margin-bottom: 0; }
.download-group h2 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 0.5rem; }
.download-group > p { font-size: 1.1rem; line-height: 1.5; max-width: 40rem; margin-bottom: 1rem; }
/* onderverdeling binnen een groep (bv. detailtekeningen per onderwerp): kleiner dan de groepstitel, rood als label */
.download-group h3 { font-size: 1.1rem; line-height: 1.3; color: var(--red); margin: 1.75rem 0 0.5rem; }
.download-group > p + h3 { margin-top: 1.25rem; }
.download-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-grey); }
.download-list li { margin: 0; }
.download-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--border-grey); color: var(--black); transition: color var(--tr);
}
.download-row .icon-sm { width: 1.5rem; height: 1.5rem; color: var(--red); }
.download-row strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; transition: color var(--tr); }
.download-row small { display: block; font-size: 0.9rem; color: var(--text-grey); margin-top: 0.15rem; }
.download-row-cta { font-weight: 700; font-size: 1rem; color: var(--red); white-space: nowrap; }
.download-row:hover strong { color: var(--red); }
.download-row:hover .download-row-cta { text-decoration: underline; }
/* zelfde afstand onder de artikelkop als in het kenniscentrum */
.article-hero + section { padding-top: 4rem; }
@media screen and (max-width: 991px) {
  .downloads-grid { grid-template-columns: 1fr; }
  .download-nav, .side-nav { position: static; }
  .download-nav ul, .side-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
  .download-nav a, .side-nav a { border-left: 0; border: 1px solid var(--border-grey); padding: 0.4rem 0.9rem; font-size: 1rem; }
  .download-groups { grid-column: auto; }
}
@media screen and (max-width: 575px) {
  .download-row { grid-template-columns: auto 1fr; }
  .download-row-cta { grid-column: 2; }
}

/* tekst en beeld: met .is-swapped staat de tekst links en het beeld rechts */
.text-visual-grid.is-swapped > :first-child { order: 2; }

/* ─── SCHERMBREDE FOTO MET BIJSCHRIFT ─── */
/* foto over de volle breedte (boven 120rem gecentreerd); het bijschrift staat linksonder op de paginarand
   en wordt nooit breder dan de helft van de pagina (36rem) */
.photo-banner { padding: 0; }
.photo-banner-inner {
  position: relative; min-height: 36rem; max-width: 120rem; margin: 0 auto;
  background: #2c2020 center / cover no-repeat;
  display: flex; align-items: flex-end;
  padding: var(--s2) max(var(--gutter), calc((100% - var(--container-m)) / 2));
}
.photo-banner-caption { max-width: min(100%, calc(var(--container-m) / 2)); padding: 1.5rem var(--s2); }
.photo-banner-caption .section-label { margin-bottom: 0.35rem; }
.photo-banner-caption strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.25; margin-bottom: 0.5rem; }
.photo-banner-caption p { margin: 0; font-size: 1rem; line-height: 1.5; }
.photo-banner-caption[data-background-color="black"] .section-label, .photo-banner-caption[data-background-color="red"] .section-label { color: var(--white); }
/* alleen tekst, zonder vlak: witte tekst rechtstreeks op de foto */
.photo-banner-caption.is-plain { background: none; padding: 0; color: var(--white); }
.photo-banner-caption.is-plain strong, .photo-banner-caption.is-plain p { color: var(--white); }
.photo-banner-caption.is-plain .section-label { color: var(--white); }

/* ─── ARTIKELTEGELS MET FOTO ─── */
/* .has-photo: tegel zonder eigen padding, foto + tekstdeel (.kc-card-body); samenvatting zichtbaar.
   .is-wide: foto links, tekst rechts, over de volle rij. .is-tall: foto boven, tekst onder, over twee rijen. */
.kc-card.has-photo { padding: 0; display: grid; align-items: stretch; }
.kc-card-photo { background: var(--grey) center / cover no-repeat; min-height: 14rem; }
.kc-card-body { padding: var(--s4); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s1); }
.kc-card.has-photo .kc-card-summary { display: block; }
/* breed: volgt de kolommen van het raster (subgrid). De tussenruimte wordt bij foto en tekst geteld, zodat de foto tot het
   midden loopt en de tekst op dezelfde lijn begint als in de tegels ernaast */
.kc-card.is-wide { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 0; }
.kc-card.is-wide .kc-card-body { padding-left: calc(var(--s4) + var(--s2) / 2); }
/* hoog: volgt de rijen van het raster (subgrid): de foto is precies zo hoog als de tegel ernaast, de tekst staat in de tweede rij */
.kc-card.is-tall { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.kc-card.is-tall .kc-card-body { padding-top: calc(var(--s4) + var(--s2) / 2); }
/* verticale tegels in een masonry (kolommen); de foto's mogen verschillende verhoudingen hebben */
.kc-masonry { columns: 3; column-gap: var(--s2); }
.kc-masonry .kc-card { display: block; height: auto; break-inside: avoid; margin-bottom: var(--s2); }
.kc-masonry .kc-card-photo { aspect-ratio: 4 / 3; min-height: 0; }
.kc-masonry .kc-card-body { padding-bottom: 4.5rem; }
@media screen and (max-width: 991px) { .kc-masonry { columns: 2; } }
@media screen and (max-width: 767px) {
  .kc-card.is-wide { grid-template-columns: 1fr; column-gap: 0; }
  .kc-card.is-wide .kc-card-body { padding-left: var(--s4); }
  .kc-card.is-tall { grid-row: auto; grid-template-rows: auto 1fr; }
  .kc-card.is-tall .kc-card-body { padding-top: var(--s4); }
  .kc-masonry { columns: 1; }
  .photo-banner-inner { min-height: 24rem; padding: var(--s1) var(--gutter); }
}

/* ─── UITSPRAAK IN SMALLE KOLOM ─── */
/* zelfde tekstgroottes als de uitspraak met twee kolommen, maar alles in de smalle leeskolom van 48rem, gecentreerd en links uitgelijnd */
.statement-column { max-width: var(--container-s); margin: 0 auto; }
.statement-column .text-statement { max-width: none; margin-bottom: 1.5rem; }
.statement-column p:not(.text-statement) { font-size: 1.1rem; line-height: 1.5; margin-bottom: 1rem; }
.statement-column p:last-child { margin-bottom: 0; }

/* ─── FOTO'S ALS ACHTERGROND: --foto en --foto-sm ─── */
/* geef de foto mee in het style-attribuut: style="--foto:url(assets/foto/x-1600.jpg); --foto-sm:url(assets/foto/x-900.jpg)".
   Zonder --foto-sm wordt op gsm dezelfde foto gebruikt. Zonder --foto blijft de kleur uit style staan (placeholder). */
.photo-hero-inner, .photo-banner-inner, .split-steps-photo, .split-links-photo, .tab-photo, .trio-photo, .four-col-photo,
.carousel-photo, .autoslider-photo, .kc-card-photo, .figure-placeholder, .article-figure .figure-placeholder, .masonry > *, .ref-hero-slide, .ref-hero-thumbs > *,
.social-post, .timeline-v-photo, .visual-placeholder, .slider-slide, .ref-card, .team-photo, .before-after-img, .feature-ref-photo, .contact-person-photo, .hotspots, .finish-photo, .finish-photo-alt, .side-photo, .phase-photo {
  background-image: var(--foto); background-size: cover; background-position: center; background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .photo-hero-inner, .photo-banner-inner, .split-steps-photo, .split-links-photo, .tab-photo, .trio-photo, .four-col-photo,
  .carousel-photo, .autoslider-photo, .kc-card-photo, .figure-placeholder, .article-figure .figure-placeholder, .masonry > *, .ref-hero-slide, .ref-hero-thumbs > *,
  .social-post, .timeline-v-photo, .visual-placeholder, .slider-slide, .ref-card, .team-photo, .before-after-img, .feature-ref-photo, .contact-person-photo, .hotspots, .finish-photo, .finish-photo-alt, .side-photo, .phase-photo { background-image: var(--foto-sm, var(--foto)); }
}

/* later laden (_bouw/fotos_laden.py, 14-10-2026): zolang data-lazy staat, geen foto; een script haalt het weg
   zodra de foto in de buurt komt. Zonder JavaScript krijgt html geen klasse lz en laden alle foto's gewoon. */
html.lz [data-lazy], html.lz [data-lazy]::before { background-image: none !important; }

/* ─── PARTNERLOGO'S: LOPENDE STROOK, RASTER, NAAST TEKST ─── */
/* kop gecentreerd; de strook loopt over de volle schermbreedte en schuift vanzelf (script), vervaagt aan de randen;
   swipen en slepen kan altijd. Tekst eronder, gecentreerd. */
.logo-head { text-align: center; max-width: 48rem; margin: 0 auto var(--s2); }
.logo-head .section-label { margin-bottom: 0.75rem; }
.logo-marquee { padding: var(--s1) 0; }
.logo-marquee-track {
  display: flex; align-items: center; gap: var(--s4); overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--gutter); cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logo-marquee-track::-webkit-scrollbar { display: none; }
.logo-item { flex: none; min-width: 10rem; height: 5rem; display: flex; align-items: center; justify-content: center; padding: 0 1rem; opacity: 0.7; transition: opacity var(--tr); }
.logo-item:hover { opacity: 1; }
.logo-item span { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--black); white-space: nowrap; }
.logo-item img { max-height: 3.5rem; width: auto; }
.logo-text { max-width: 48rem; margin: var(--s2) auto 0; text-align: center; font-size: 1.1rem; line-height: 1.5; }
/* vast raster van lichtgrijze tegels met een gutter ertussen */
.logo-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.logo-tiles .logo-tile { flex: none; min-height: 0; aspect-ratio: 2 / 1; background: var(--grey); }
/* titel en tekst links op de eerste rasterkolom, rechts een raster met dunne lijnen ertussen (geen buitenrand) */
.logo-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: center; }
.logo-split-body p { font-size: 1.1rem; line-height: 1.5; margin-top: 1rem; }
.logo-cells { grid-column: span 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-grey); }
.logo-cells .logo-tile { flex: none; min-height: 7rem; }
@media screen and (max-width: 991px) {
  .logo-tiles { grid-template-columns: repeat(2, 1fr); }
  .logo-split { grid-template-columns: 1fr; }
  .logo-cells { grid-column: auto; }
}
@media screen and (max-width: 575px) { .logo-cells { grid-template-columns: repeat(2, 1fr); } }

/* ─── SLEPEN MET DE MUIS IN ALLE STROKEN ─── */
/* op een touchscreen werkt swipen vanzelf; het script maakt de stroken ook sleepbaar met de muis */
.autoslider-track, .carousel-track, .ref-hero-thumbs, .process-grid, .logo-track { cursor: grab; }
.is-dragging { cursor: grabbing !important; scroll-snap-type: none !important; scroll-behavior: auto !important; user-select: none; }
/* geen native slepen van links en foto's in de stroken */
.autoslider-slide, .carousel-slide, .masonry > a, .ref-hero-thumbs > *, .logo-item, .process-grid a { -webkit-user-drag: none; }
.slider-track { touch-action: pan-y; cursor: grab; }

/* ─── FOTO'S DIE EEN LINK ZIJN: LICHTE INZOOM BIJ HOVER ─── */
/* de foto wordt op een pseudo-element getekend dat bij hover 6% groter wordt, binnen het kader */
.autoslider-slide .autoslider-photo, .social-post, .masonry > a, a.trio-item .trio-photo, .kc-card.has-photo .kc-card-photo {
  position: relative; overflow: hidden; isolation: isolate;
}
.autoslider-slide .autoslider-photo::before, .social-post::before, .masonry > a::before, a.trio-item .trio-photo::before, .kc-card.has-photo .kc-card-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: inherit; transition: transform 0.7s ease;
}
a.autoslider-slide:hover .autoslider-photo::before, .social-post:hover::before, .masonry > a:hover::before,
a.trio-item:hover .trio-photo::before, .kc-card[data-hover-trigger]:hover .kc-card-photo::before { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .autoslider-photo::before, .social-post::before, .masonry > a::before, .trio-photo::before, .kc-card-photo::before { transition: none; } }

/* ─── ACTIEBALK (onder de hero) ─── */
/* kader binnen de container: label, titel met een regel uitleg, rechts bolletjes en een knop. Meerdere acties wisselen om de 6 s (script) */
.promo-bar { padding: var(--s2) 0 0; }
.promo { display: flex; align-items: center; gap: var(--s2); padding: 1.25rem var(--s2); }
.promo-messages { flex: 1; min-width: 0; display: grid; }
.promo-item { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--s2); opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s 0.6s; }
.promo-item.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }
.promo-label { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.8rem; background: var(--white); color: var(--red); }
[data-background-color="white"] .promo-label, [data-background-color="grey"] .promo-label { background: var(--red); color: var(--white); }
[data-background-color="black"] .promo-label { color: var(--black); }
.promo-text { flex: 1; min-width: 0; }
.promo-text strong { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; }
.promo-text span { display: block; font-size: 1rem; opacity: 0.85; margin-top: 0.15rem; }
.promo-item .btn { flex: none; }
.promo-dots { flex: none; display: flex; gap: 0.5rem; }
.promo-dots button { width: 0.6rem; height: 0.6rem; padding: 0; border: 0; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background var(--tr); }
.promo-dots button.is-active { background: var(--white); }
[data-background-color="white"] .promo-dots button, [data-background-color="grey"] .promo-dots button { background: var(--border-grey); }
[data-background-color="white"] .promo-dots button.is-active, [data-background-color="grey"] .promo-dots button.is-active { background: var(--red); }
@media screen and (max-width: 767px) {
  .promo { flex-wrap: wrap; }
  .promo-item { flex-wrap: wrap; }
  .promo-dots { order: 3; }
}

/* ─── VOOR EN NA ─── */
/* twee foto's op elkaar met een schuifgreep (input type=range, onzichtbaar over het hele vlak); .is-side zet ze naast elkaar */
.before-after { position: relative; aspect-ratio: 3 / 2; overflow: hidden; --pos: 50%; }
.before-after-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.before-after-img.is-after { clip-path: inset(0 0 0 var(--pos)); }
.before-after-label { position: absolute; top: 1rem; left: 1rem; background: var(--black); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.75rem; }
.before-after-img.is-after .before-after-label { left: auto; right: 1rem; }
.before-after-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--white); pointer-events: none; }
.before-after-handle { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); width: 3rem; height: 3rem; border-radius: 50%; background: var(--white); color: var(--black); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.before-after-handle svg { width: 1.4rem; height: 1.4rem; }
.before-after-img.is-after .before-after-label { background: var(--red); }
.before-after input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.before-after.is-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); aspect-ratio: auto; overflow: visible; }
.before-after.is-side .before-after-img { position: relative; inset: auto; aspect-ratio: 3 / 2; clip-path: none; }
.before-after.is-side .before-after-line, .before-after.is-side .before-after-handle, .before-after.is-side input { display: none; }
.before-after-caption { margin-top: 1rem; font-size: 1rem; color: var(--text-grey); }

/* ─── SYSTEEMOPBOUW: BOLLETJES OP EEN FOTO ─── */
/* links een foto met genummerde rode bolletjes (positie via --x/--y), rechts de uitleg van het gekozen bolletje */
.hotspots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: center; }
.hotspots { grid-column: span 2; position: relative; aspect-ratio: 3 / 2; background-color: var(--grey); background-size: cover; background-position: center; }
.hotspot {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--white); padding: 0; cursor: pointer;
  background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  box-shadow: 0 0 0 0 rgba(214, 2, 33, 0.45); transition: transform var(--tr), background var(--tr);
}
.hotspot:hover, .hotspot.is-active { transform: translate(-50%, -50%) scale(1.2); background: var(--black); }
.hotspot.is-active { animation: hotspot-puls 1.6s ease-out infinite; }
@keyframes hotspot-puls { 0% { box-shadow: 0 0 0 0 rgba(214, 2, 33, 0.45); } 100% { box-shadow: 0 0 0 1rem rgba(214, 2, 33, 0); } }
.hotspot-info { display: grid; }
.hotspot-card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s 0.4s; }
.hotspot-card.is-active { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }
.hotspot-card .section-label { margin-bottom: 0.5rem; }
.hotspot-card h3 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 0.75rem; }
.hotspot-card p { font-size: 1.1rem; line-height: 1.5; }
.hotspot-card .hotspot-product { display: block; margin-top: 0.75rem; font-size: 0.95rem; color: var(--text-grey); }
.hotspot-nav { display: flex; gap: 0.5rem; margin-top: var(--s2); }
.hotspot-nav button { width: 2.25rem; height: 2.25rem; border: 2px solid var(--black); background: none; color: var(--black); font-family: var(--font-display); font-weight: 700; cursor: pointer; transition: all var(--tr); }
.hotspot-nav button:hover, .hotspot-nav button.is-active { background: var(--black); color: var(--white); }
@media (prefers-reduced-motion: reduce) { .hotspot.is-active { animation: none; } }

/* ─── CHECKLIST ─── */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; max-width: var(--container-s); }
.checklist li { margin: 0; }
.checklist label { display: flex; gap: 1rem; align-items: flex-start; cursor: pointer; padding: 1rem 1.25rem; background: var(--grey); }
.checklist input { -webkit-appearance: none; appearance: none; flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; border: 2px solid var(--black); background: var(--white); position: relative; cursor: pointer; }
.checklist input:checked { background: var(--red); border-color: var(--red); }
.checklist input:checked::after { content: ''; position: absolute; left: 0.45rem; top: 0.15rem; width: 0.4rem; height: 0.75rem; border: solid var(--white); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.checklist input:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.checklist strong { display: block; font-size: 1.1rem; }
.checklist span { font-size: 1rem; line-height: 1.5; }
.checklist input:checked ~ div { opacity: 0.55; }
.checklist input:checked ~ div strong { text-decoration: line-through; }
.checklist.is-plain label { background: none; padding: 0.9rem 0; border-bottom: 1px solid var(--border-grey); }

/* ─── CIJFER MET CONTEXT ─── */
.big-number { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: center; }
.big-number-value { font-family: var(--font-display); font-weight: 700; font-size: 7rem; line-height: 0.9; color: inherit; letter-spacing: -0.02em; width: fit-content; text-align: center; }
.big-number-value .text-red { color: var(--red); }
.big-number-value small { display: block; font-size: 1.25rem; letter-spacing: 0; color: var(--black); margin-top: 0.75rem; }
.big-number-body { grid-column: span 2; }
.big-number-body h3 { font-size: 1.75rem; margin-bottom: 0.75rem; }
.big-number-body p { font-size: 1.1rem; line-height: 1.5; }
[data-background-color="red"] .big-number-value .text-red { color: var(--black); }
[data-background-color="red"] .big-number-value small, [data-background-color="black"] .big-number-value small { color: var(--white); }

/* ─── VERGELIJKINGSTABEL ─── */
.compare { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 1.05rem; }
.compare th, .compare td { padding: 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-grey); }
.compare thead th { font-family: var(--font-display); font-size: 1.35rem; border-bottom: 2px solid var(--black); }
.compare tbody th { font-weight: 700; }
/* gelijke kolommen: de eerste kolom (de eigenschap) vast, de rest deelt de breedte gelijk */
.compare { table-layout: fixed; }  /* gelijke kolommen */
.compare thead th:first-child { width: 11rem; }
.compare td .icon-sm { color: var(--red); vertical-align: middle; }
.compare td.is-best { font-weight: 700; }
.compare-note { margin-top: 1rem; font-size: 0.95rem; color: var(--text-grey); max-width: 46rem; }   /* niet breder dan een leesregel, ook op een groot scherm */
.compare-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.compare-note a:hover { color: var(--red); }
.compare-link { margin-top: 0.75rem; }

/* ─── PRIJSINDICATIE ─── */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s2); }
.price-card { position: relative; border: 1px solid var(--black); padding: var(--s2); display: flex; flex-direction: column; gap: 0.75rem; background: var(--white); color: var(--black); cursor: default; transition: border-color var(--tr), box-shadow var(--tr); }
.price-card:hover { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.price-tag { position: absolute; top: 0; right: 0; background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.5rem; }
.price-card h3 { font-size: 1.35rem; line-height: 1.25; }
.price-card .price { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; white-space: nowrap; }
.price-card .price small { font-family: var(--font-text); font-weight: 400; font-size: 1rem; margin-left: 0.25rem; }
.price-card .price small:first-child { margin: 0 0.25rem 0 0; }
.price-card ul { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.4rem; font-size: 1rem; }
.price-card li { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; }
.price-card li .icon-sm { color: var(--red); margin-top: 0.35rem; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card.is-featured { background: var(--black); color: var(--white); border-color: var(--black); }
.price-card.is-featured h3 { color: var(--white); }
.price-card.is-featured:hover { border-color: var(--red); }
.price-card.is-featured .btn-white:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.price-note { margin-top: var(--s2); font-size: 0.95rem; color: var(--text-grey); max-width: var(--container-s); }

/* ─── REFERENTIE IN DE KIJKER ─── */
.feature-ref { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: center; }
.feature-ref-photo { grid-column: span 2; aspect-ratio: 3 / 2; background-color: var(--grey); }
.feature-ref.is-photo-right .feature-ref-photo { order: 2; }
.feature-ref-body h2 { font-size: 2.5rem; line-height: 1.1; margin: 0.5rem 0 1rem; }
.feature-ref-body p { font-size: 1.1rem; line-height: 1.5; }
.ref-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 1rem 0 var(--s2); font-size: 1rem; }
.ref-facts dt { font-weight: 700; }
.ref-facts dd { margin: 0; }

/* ─── WERKGEBIED ─── */
.area { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: start; }
.area-body p { font-size: 1.1rem; line-height: 1.5; margin-top: 1rem; }
.area-lists { grid-column: span 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.area-lists h3 { font-size: 1.1rem; color: var(--red); margin-bottom: 0.5rem; }
.area-lists ul { list-style: none; padding: 0; margin: 0; }
.area-lists li { margin: 0 0 0.3rem; font-size: 1.05rem; }
/* variant .is-contact: contactgegevens in plaats van gemeenten; alle links rood, de kolommen op de hoogte van de titel */
.area.is-contact .area-lists { padding-top: 0.9rem; }
.area.is-contact .area-lists a { color: var(--red); }
.area.is-contact .area-lists a:hover { color: var(--black); }
.area-social a { display: inline-flex; align-items: center; gap: 0.5rem; }
.area-social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* ─── CONTACTPERSOON ─── */
.contact-person { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: center; background: var(--grey); padding: var(--s2); }
.contact-person-photo { aspect-ratio: 4 / 5; background-color: var(--border-grey); }
.contact-person-body { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.contact-person-body h3 { font-size: 2rem; line-height: 1.1; }
.contact-person-body p { font-size: 1.1rem; line-height: 1.5; max-width: 36rem; }
.contact-person-body .btn { margin-top: 0.75rem; }
/* compacte versie voor onderaan een pagina: kleine foto, naam en functie, nummer en knop op één rij */
.contact-person.is-compact { grid-template-columns: auto 1fr auto; padding: 1.25rem var(--s2); gap: var(--s2); }
.contact-person.is-compact .contact-person-photo { width: 5.5rem; aspect-ratio: 1; }
.contact-person.is-compact .contact-person-body { grid-column: auto; gap: 0.15rem; }
.contact-person.is-compact .contact-person-body h3 { font-size: 1.35rem; }
.contact-person.is-compact .contact-person-body p, .contact-person.is-compact .section-label, .contact-person.is-compact .team-member-links a[href^="mailto"] { display: none; }
.contact-person.is-compact .team-member-links a { font-weight: 700; }
.contact-person.is-compact .contact-person-body .btn { display: none; }
.contact-person.is-compact .contact-person-cta { display: block; }
.contact-person-cta { display: none; }
/* profielfoto als naamtegel: rond, zoals in het teamblok (uitzondering in de huisstijl) */
.contact-person-photo.is-rond { border-radius: 50%; aspect-ratio: 1; }
.contact-person.is-compact .team-member-role { font-size: 0.95rem; }

/* ─── COOKIEMELDING ─── */
.cookie-banner { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 200; max-width: 26rem; background: var(--black); color: var(--white); padding: var(--s2); display: grid; gap: 1rem; }
.cookie-banner[hidden] { display: none; }
.cookie-banner strong { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.cookie-banner p { margin: 0; font-size: 1rem; line-height: 1.5; }
.cookie-banner p a { color: var(--white); text-decoration: underline; }
.cookie-actions { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.cookie-actions .btn { width: 100%; justify-content: center; }
.cookie-actions .cookie-link { justify-self: start; }
/* weigeren en aanvaarden zijn gelijkwaardig (zelfde knop); hover rood zoals een witte knop op zwart */
.cookie-banner .btn-white:hover { background: var(--red); border-color: var(--red); color: var(--white); }
/* "Alles weigeren" in grijs zodat "Alles aanvaarden" meer opvalt; even groot en duidelijk leesbaar, weigeren blijft even makkelijk (Klaas, 13-10-2026) */
.cookie-banner .btn-white[data-cookies="weigeren"] { background: #4a4546; border-color: #4a4546; color: var(--white); }
.cookie-banner .btn-white[data-cookies="weigeren"]:hover { background: #5c5758; border-color: #5c5758; color: var(--white); }
.cookie-link { background: none; border: 0; padding: 0.6rem 0.25rem; font: inherit; font-size: 1rem; color: var(--white); text-decoration: underline; cursor: pointer; }
.cookie-link:hover { color: var(--red); }
.cookie-keuzes { display: grid; gap: 0.75rem; }
.cookie-keuzes[hidden] { display: none; }
.cookie-actions [hidden] { display: none; }   /* .btn zet display, dat mag hidden niet overschrijven */
.cookie-keuze { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: 0.95rem; line-height: 1.4; cursor: pointer; }
.cookie-keuze input { width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--red); }
.cookie-keuze b { display: block; font-family: var(--font-display); font-size: 1rem; }
.cookie-keuze input:disabled + span { opacity: 0.75; cursor: default; }
/* Cookie-instellingen in de footer: een knop die eruitziet als de links ernaast */
.footer-cookie { background: none; border: 0; font: inherit; font-size: 1rem; color: var(--white); opacity: 0.8; padding: 0.5rem 0.2rem; cursor: pointer; transition: opacity var(--tr); }
.footer-cookie:hover { opacity: 1; }
.cookie-actions .btn { padding: 0.6rem 1.1rem; font-size: 1rem; }

@media screen and (max-width: 991px) {
  .hotspots-grid, .big-number, .feature-ref, .area, .contact-person { grid-template-columns: 1fr; }
  .hotspots, .big-number-body, .feature-ref-photo, .area-lists, .contact-person-body { grid-column: auto; }
  .contact-person.is-compact { grid-template-columns: auto 1fr; }
  /* de knop over de volle breedte op een eigen rij, anders maakt hij de fotokolom breed en de tekst smal */
  .contact-person.is-compact > .btn, .contact-person.is-compact .contact-person-cta { grid-column: 1 / -1; justify-self: start; }
  .contact-person.is-compact .contact-person-photo { width: 4.5rem; }
  .feature-ref.is-photo-right .feature-ref-photo { order: 0; }
  .big-number-value { font-size: 5rem; }
}
@media screen and (max-width: 767px) {
  .before-after.is-side { grid-template-columns: 1fr; }
  .area-lists { grid-template-columns: 1fr 1fr; }
  .contact-person-photo { max-width: 16rem; }
  .cookie-banner { left: 0; right: 0; bottom: 0; max-width: none; }
}

/* ─── AFWERKINGSTEGELS ─── */
/* tegels met een detailfoto van de structuur; bij hover vervaagt de toepassing op een gevel erin (als die er is).
   De naam staat in een zwarte balk onder de foto; bij hover wordt die rood. Drie per rij, .is-4 vier per rij (korreldiktes) */
.finish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.finish-grid.is-4 { grid-template-columns: repeat(4, 1fr); }
/* kolom: de zwarte naambalk vult altijd de onderkant, ook als zijn tekst korter is dan die van de buren */
.finish-tile { display: flex; flex-direction: column; min-width: 0; color: var(--black); border: 1px solid var(--black); background: var(--white); }
.finish-tile .finish-name { flex: 1; }
.finish-photo { position: relative; aspect-ratio: 1; overflow: hidden; background-color: var(--grey); }
.finish-photo-alt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
/* label rechtsboven op de foto, zoals "Meest gekozen" op de prijskaart */
.finish-tag { position: absolute; top: 0; right: 0; z-index: 1; background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.6rem; }
.finish-tile:hover .finish-photo-alt, .finish-tile:focus-visible .finish-photo-alt { opacity: 1; }
.finish-name { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.9rem 1rem; background: var(--black); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; transition: background var(--tr); }
.finish-name span { font-family: var(--font-text); font-weight: 400; font-size: 0.9rem; opacity: 0.8; }
.finish-tile:hover .finish-name { background: var(--red); }
/* Weetje met kleurenwaaier: tekst links, getekende waaier rechts; de waaier vouwt open als hij in beeld komt */
.swatch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; }
.swatch-body h2 { margin: 0.5rem 0 1rem; }
.swatch-body p { font-size: 1.1rem; line-height: 1.5; margin-bottom: 1rem; }
.swatch-fan svg { display: block; width: 100%; max-width: 40rem; height: auto; margin-inline: auto; }
/* draaipunt = WAAIER_PIVOT in bouwblokken.py; dicht liggen alle stroken onder de kaft (90deg), open op hun eigen hoek */
/* elk blaadje zonder rand, met een zachte schaduw: het ligt over het vorige, en dat geeft diepte */
/* --extra en --lift zet het script bij hover: de blaadjes rond de muis schuiven uit elkaar, het blaadje eronder komt iets naar buiten */
.swatch-fan { position: relative; }
.swatch-fan .fan-strip { transform-box: view-box; transform-origin: 470px 430px; transform: rotate(calc(var(--hoek) + var(--extra, 0deg))) translateY(var(--lift, 0px)); filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.22)); }
.swatch-fan svg { touch-action: pan-y; cursor: pointer; overflow: visible; }
/* venster met de aangeklikte kleur */
.fan-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; border: 0; padding: 0; width: min(92vw, 30rem); max-height: 90vh; background: var(--white); color: var(--black); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.fan-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.fan-dialog-kleur { height: 12rem; }
.fan-dialog-body { padding: var(--s2); }
.fan-dialog-body h3 { font-size: 2rem; margin: 0.25rem 0 0.75rem; }
.fan-dialog-body p { font-size: 1.05rem; line-height: 1.5; margin: 0 0 0.75rem; }
.fan-dialog-noot { color: var(--text-grey); font-size: 0.95rem !important; }
.fan-dialog-body .btn { margin-top: 0.5rem; }
.fan-dialog-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 0; padding: 0; -webkit-appearance: none; appearance: none; background: var(--white); color: var(--black); font-size: 0; cursor: pointer; }
/* het kruisje getekend met twee balkjes, zodat het op elk toestel precies in het midden staat (het teken × zakt in sommige lettertypes) */
.fan-dialog-close::before, .fan-dialog-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: currentColor; }
.fan-dialog-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.fan-dialog-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fan-dialog-close:focus:not(:focus-visible) { outline: none; }
.fan-dialog-close:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.fan-dialog-close:hover { background: var(--black); color: var(--white); }
.swatch-fan .fan-cover { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3)); pointer-events: none; }
.swatch-fan .fan-cover text { font-family: var(--font-display); }
.swatch-fan.is-ready .fan-strip { transform: rotate(90deg); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc((var(--n) - 1 - var(--i)) * 12ms); }
.swatch-fan.is-ready.is-open .fan-strip { transform: rotate(calc(var(--hoek) + var(--extra, 0deg))) translateY(var(--lift, 0px)); }
.swatch-fan.is-hover .fan-strip, .swatch-fan.is-ready.is-open.is-hover .fan-strip { transition: transform 0.25s ease-out; transition-delay: 0s; }
/* label met de kleurnaam, volgt de muis */
.fan-tip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem 0.4rem 0.4rem; background: var(--white); color: var(--black); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); font-size: 0.95rem; white-space: nowrap; pointer-events: none; }
.fan-tip[hidden] { display: none; }
.fan-tip-kleur { width: 1.5rem; height: 1.5rem; flex: none; }
.fan-tip strong { font-family: var(--font-display); font-weight: 700; }
@media (max-width: 991px) { .swatch { grid-template-columns: 1fr; gap: var(--s2); } }

/* Patroontegels: rustig getekend metselverband, lichte stenen met witte voegen, zonder kader en zonder zwarte balk */
.finish-tile.is-pattern { border: 0; background: none; }
/* stenen in een lichte tint van ons rood (ook in de metselpatronen), voegen wit */
.pattern-drawing { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--white); color: #f2c4c6;
  --steen: #f2c4c6; --steen-zij: #e2a3a7; --steen-top: #f8dcdd; --mortel: #dddad6; --mortel-zij: #cbc7c2; --holte: #8e8a86; }
.pattern-drawing svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.finish-tile.is-pattern .finish-name, .finish-tile.is-pattern:hover .finish-name { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.75rem 0 0; background: none; color: var(--black); }
.finish-tile.is-pattern .finish-name span { opacity: 1; color: var(--text-grey); }
/* voegprofiel: stukje metselwerk in 3D, rechts de doorsnede met het profiel van de voeg */
.voegprofiel .steen { fill: var(--steen); }
.voegprofiel .steen-zij { fill: var(--steen-zij); }
.voegprofiel .steen-top { fill: var(--steen-top); }
.voegprofiel .mortel-voor { fill: var(--mortel); }
.voegprofiel .mortel-voor.is-diep { fill: var(--mortel-zij); }
.voegprofiel .mortel-voor.is-schuin { fill: #e6e3df; }
.voegprofiel .mortel-zij { fill: var(--mortel-zij); }
.voegprofiel .holte { fill: var(--holte); }
.voegprofiel .schaduw { fill: #000; fill-opacity: 0.3; }
.voegprofiel .mortel-voor.is-diep { fill: #bdb8b2; }
.voegprofiel .korrel { fill: #000; fill-opacity: 0.16; }
@media screen and (max-width: 991px) { .finish-grid, .finish-grid.is-4 { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 575px) { .finish-grid, .finish-grid.is-4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .finish-photo-alt { transition: none; } }

/* ─── STERKE PUNTEN ─── */
/* vier punten naast elkaar, elk met een groot rood lijnicoon erboven; .is-centered zet alles in het midden */
.usp-block { padding: var(--s4) 0; }
.usp-head { max-width: 40rem; margin-bottom: var(--s2); }
.usp-head h2 { margin-bottom: 0.5rem; }
.usp-head p { margin: 0; font-size: 1.1rem; }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.usp { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.usp-icon { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; color: var(--red); }
.usp-icon svg { width: 3.5rem; height: 3.5rem; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.usp h3 { font-size: 1.35rem; line-height: 1.25; margin: 0.35rem 0 0; }
.usp p { font-size: 1.05rem; margin: 0; }
.usp-block.is-centered .usp-head { margin-inline: auto; text-align: center; }
.usp-block.is-centered .usp { align-items: center; text-align: center; }
.usp-block[data-background-color="red"] .usp-icon { color: var(--black); }
@media (max-width: 991px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .usp-grid { grid-template-columns: 1fr; } }

/* ─── TOTAALAANPAK ─── */
/* intro links, rechts zes genummerde punten met een lijn erboven */
.total { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s4); align-items: start; }
.total-intro h2 { margin-bottom: 1rem; }
.total-intro p { font-size: 1.1rem; }
.total-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.total-list li { margin: 0; padding-top: 1rem; border-top: 2px solid var(--black); }
.total-nr { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; color: var(--red); margin-bottom: 0.5rem; }
.total-list h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.35rem; }
.total-list p { font-size: 1.05rem; margin: 0; }
[data-background-color="black"] .total-list li, [data-background-color="red"] .total-list li { border-color: var(--white); }
[data-background-color="red"] .total-nr { color: var(--black); }
@media (max-width: 991px) { .total { grid-template-columns: 1fr; gap: var(--s2); } }
@media (max-width: 575px) { .total-list { grid-template-columns: 1fr; } }

/* ─── GOOGLE-REVIEWS ─── */
/* reviews als Google-kaarten: witte kaart, ronde avatar met initiaal (uitzondering op de hoekige stijl, zoals bij Google zelf),
   naam, datum, G-logo, gele sterren. Boven de strook een badge met de score en het aantal reviews, als link naar Google */
.google-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.google-head h2 { margin: 0; }
.google-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: var(--white); border: 1px solid var(--border-grey); color: var(--black); font-size: 1rem; line-height: 1; }
.google-badge svg { width: 1.5rem; height: 1.5rem; flex: none; }
.google-badge b { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.google-badge:hover { border-color: var(--black); }
.autoslider.is-google .review-stars { color: #fbbc04; font-size: 1.1rem; letter-spacing: 0.05em; }
.google-card { background: var(--white); border: 1px solid var(--border-grey); padding: 1.5rem; height: 100%; display: flex; flex-direction: column; gap: 0.75rem; color: var(--black); }
/* google-card: popt op bij hover, met schaduw, de grijze rand blijft staan; de strook krijgt boven en onder ruimte zodat de schaduw niet afgesneden wordt */
.autoslider.is-google .autoslider-track { padding-top: 1.25rem; padding-bottom: 1.75rem; margin: -1rem 0 -1.5rem; }
.autoslider .google-card { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.autoslider .autoslider-slide:hover .google-card { transform: translateY(-.5rem) scale(1.02); box-shadow: 0 14px 32px rgba(35, 31, 32, .16); }
@media (prefers-reduced-motion: reduce) { .autoslider .google-card { transition: box-shadow .2s ease; } .autoslider .autoslider-slide:hover .google-card { transform: none; } }
.google-card header { display: flex; align-items: center; gap: 0.75rem; }
.google-card header > div { flex: 1; min-width: 0; }
.google-card strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.google-card time { font-size: 0.9rem; color: #6b6667; }   /* donkerder dan --dark-grey: voldoende contrast op wit (13-10-2026) */
.google-card header svg { width: 1.35rem; height: 1.35rem; flex: none; }
.google-avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--kleur, var(--red)); color: var(--white); display: grid; place-items: center; padding-top: 0.1em; line-height: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
/* de letter exact in het midden: in browsers met text-box-trim wordt de regel bijgesneden tot kapitaalhoogte en dan gecentreerd;
   elders benadert de padding-top hierboven het (de kapitalen van dit lettertype zitten boven het midden van de regel) */
.google-avatar > b { display: block; line-height: 1; font-weight: 700; text-transform: uppercase; }   /* ook bij namen in kleine letters, zoals Google */
@supports (text-box-trim: trim-both) { .google-avatar { padding-top: 0; } .google-avatar > b { text-box: trim-both cap alphabetic; } }
/* de tekst op de kaart is beperkt tot 4 regels; is er meer, dan zet het script er een knop "Meer" onder die de volledige review in een venster opent */
.google-card p { margin: 0; font-size: 1.05rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review-more { align-self: flex-start; background: none; border: 0; padding: 0; margin-top: -0.25rem; font: inherit; font-size: 0.95rem; color: #6b6667; cursor: pointer; }
.review-more:hover { color: var(--black); text-decoration: underline; }
.review-dialog { position: fixed; inset: 0; margin: auto; border: 0; padding: 0; width: min(36rem, calc(100vw - 2rem)); max-height: 85vh; background: var(--white); color: var(--black); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.review-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.review-dialog .google-card { border: 0; padding: 2rem 2.5rem 2rem 2rem; max-height: 85vh; overflow: auto; height: auto; }
.review-dialog .google-card p { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.review-dialog-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.25rem; height: 2.25rem; border: 0; background: none; font-size: 1.75rem; line-height: 1; color: var(--text-grey); cursor: pointer; }
.review-dialog-close:hover { color: var(--black); }
[data-background-color="black"] .google-badge, [data-background-color="black"] .google-card { border-color: transparent; }
/* de kaartjes blijven wit met zwarte tekst, ook op een zwarte of rode sectie (anders maakt de regel voor h1-p op zwart de tekst wit) */
[data-background-color] .google-card :is(h3, h4, p) { color: var(--black); }

/* ─── DOORVERWIJSBELONING ─── */
/* tekst links, rechts een rode "waardebon" met een gestippelde rand en een lichte kanteling */
.referral { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; overflow-x: clip; }  /* confetti mag niet voor een horizontale scrollbalk zorgen */
.referral-body h2 { margin-bottom: 1rem; }
.referral-body p { font-size: 1.1rem; margin-bottom: 1.5rem; }
/* de bon is een ticket: uitsparingen links en rechts ter hoogte van de perforatie, een stub onderaan, een zachte schaduw (op de wrapper,
   want een masker snijdt een eigen schaduw weg); de wrapper kantelt met de muis (--rx, --ry), de bon zelf staat licht scheef (--kantel) */
.referral-bon-wrap { justify-self: center; width: min(100%, 26rem); position: relative; cursor: pointer; --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--sr, 0deg)) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out;
  filter: drop-shadow(0 18px 24px rgba(35, 31, 32, .28)); -webkit-tap-highlight-color: transparent; }
.referral-bon-wrap.is-schud { transition: none; }
/* ticket: inkepingen links en rechts ter hoogte van de scheurlijn boven de zwarte stub (--stub = hoogte van de stub) */
.referral-bon { position: relative; overflow: hidden; border-radius: 0.6rem; /* waardebon: licht afgeronde hoeken (uitzondering in de huisstijl) */ background: var(--red); color: var(--white); padding: 2.25rem 2rem 0; text-align: center;
  --kantel: -2deg; --stub: 3.25rem; transform: rotate(var(--kantel)); display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  -webkit-mask: radial-gradient(circle at 0 calc(100% - var(--stub)), transparent 0.9rem, #000 calc(0.9rem + 1px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% calc(100% - var(--stub)), transparent 0.9rem, #000 calc(0.9rem + 1px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 calc(100% - var(--stub)), transparent 0.9rem, #000 calc(0.9rem + 1px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% calc(100% - var(--stub)), transparent 0.9rem, #000 calc(0.9rem + 1px)) right / 51% 100% no-repeat; }
/* bankbiljetpatroon: guilloche-rozetten achter het bedrag, microprint van huisjes in de hoeken en een skyline van rijhuizen onderaan (assets/guilloche.svg) */
.referral-bon::before { content: ''; position: absolute; inset: 0 0 var(--stub); background: url(assets/guilloche.svg) center bottom / 100% auto no-repeat; opacity: .3; pointer-events: none; }
.referral-bon > * { position: relative; }
/* glans: bij het binnenkomen, bij hover en bij klik */
.referral-bon::after { content: ''; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(0) rotate(12deg); opacity: 0; pointer-events: none; z-index: 2; }
.referral-bon.is-in::after { animation: bon-glans 1.3s ease .55s; }
.referral-bon-wrap:hover .referral-bon::after { animation: bon-glans 1.1s ease; }
.referral-bon.is-glans::after { animation: bon-glans2 .9s ease; }
@keyframes bon-glans { from { opacity: 1; transform: translateX(0) rotate(12deg); } to { opacity: 1; transform: translateX(420%) rotate(12deg); } }
@keyframes bon-glans2 { from { opacity: 1; transform: translateX(0) rotate(12deg); } to { opacity: 1; transform: translateX(420%) rotate(12deg); } }
.referral-bon-serie { align-self: flex-end; margin: -1rem -0.75rem 0 0; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.12em; opacity: .85; }
/* bedrag als op een biljet: fijn gegraveerde lijntjes in de letters, een reliëfrand, het euroteken klein ervoor */
.referral-bon-amount { display: flex; align-items: flex-start; justify-content: center; gap: 0.1em; font-family: var(--font-display); font-weight: 700; line-height: 0.9; }
.referral-bon-amount small { font-size: clamp(1.75rem, 3.2vw, 2.6rem); margin-top: 0.35em; }
.referral-bon-amount b { font: inherit; font-size: clamp(4.2rem, 8vw, 6.4rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  background: repeating-linear-gradient(0deg, #fff 0 1.6px, #ffd0d5 1.6px 3.2px); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 0, 12, .55)) drop-shadow(0 0 1px rgba(255, 255, 255, .6)); }
.referral-bon-stub { align-self: stretch; margin: 1.5rem -2rem 0; height: var(--stub); display: flex; align-items: center; justify-content: center; position: relative;
  background: var(--black); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
/* de scheurlijn: alleen tussen de twee inkepingen */
.referral-bon-stub::before { content: ''; position: absolute; top: -1px; left: 1.2rem; right: 1.2rem; border-top: 2px dashed rgba(255, 255, 255, .8); }
[data-background-color="red"] .referral-bon-stub { background: var(--red); }
.referral-bon-wrap > i { position: absolute; left: 50%; top: 45%; width: 0.7rem; height: 0.7rem; background: var(--red); opacity: 0; pointer-events: none; }
.referral-bon-wrap > i:nth-of-type(2n) { background: var(--black); width: 0.5rem; height: 0.5rem; }
.referral-bon-wrap > i:nth-of-type(3n) { background: #f2c4c6; }
.referral-bon-wrap > i:nth-of-type(1) { --x: -13rem; --y: -7rem; --r: 200deg; }
.referral-bon-wrap > i:nth-of-type(2) { --x: 12rem; --y: -8rem; --r: -160deg; }
.referral-bon-wrap > i:nth-of-type(3) { --x: -14rem; --y: 3rem; --r: 120deg; }
.referral-bon-wrap > i:nth-of-type(4) { --x: 14rem; --y: 4rem; --r: -220deg; }
.referral-bon-wrap > i:nth-of-type(5) { --x: -6rem; --y: -10rem; --r: 90deg; }
.referral-bon-wrap > i:nth-of-type(6) { --x: 7rem; --y: 9rem; --r: -90deg; }
.referral-bon-wrap > i:nth-of-type(7) { --x: -9rem; --y: 9rem; --r: 260deg; }
.referral-bon-wrap > i:nth-of-type(8) { --x: 5rem; --y: -11rem; --r: -250deg; }
.referral-bon.is-in ~ i { animation: bon-confetti 1s cubic-bezier(.2, .7, .3, 1) .45s both; }
.referral-bon-wrap.is-feest > i { animation: bon-confetti2 1s cubic-bezier(.2, .7, .3, 1) .1s both; }
@keyframes bon-confetti2 { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); } }
@keyframes bon-confetti { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); } }
/* zodra het blok in beeld komt (script zet .is-in), valt de bon groot en scheef binnen en landt hij op zijn plek, als een stempel */
.referral-bon.is-in { animation: bon-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes bon-in { from { opacity: 0; transform: rotate(8deg) scale(1.35) translateY(-1.5rem); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(var(--kantel)) scale(1) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .referral-bon.is-in, .referral-bon.is-in::after, .referral-bon.is-in ~ i { animation: none; } .referral-bon-wrap { transition: none; } }
.referral-bon-label { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; }
.referral-bon-amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1; }
.referral-bon-sub { font-size: 1rem; }
[data-background-color="red"] .referral-bon { background: var(--black); }
@media (max-width: 991px) { .referral { grid-template-columns: 1fr; gap: var(--s2); } .referral-bon { --kantel: -1deg; } .referral-bon-wrap > i { display: none; } }

/* ─── AANDACHTSBLOK ─── */
/* kader voor een technische randvoorwaarde: gekleurde balk links, icoon, label, titel, tekst en een link (bv. naar de richtlijnen bij downloads).
   .is-red (standaard), .is-black, .is-grey (grijs vlak). In een leeskolom zonder section en container gebruiken */
.notice { display: flex; gap: 1.5rem; background: var(--white); border: 1px solid var(--black); border-left: 0.5rem solid var(--red); padding: 1.5rem 2rem 1.5rem 1.5rem; }
.notice.is-black { border-left-color: var(--black); }
.notice.is-grey { background: var(--grey); border-color: var(--grey); border-left-color: var(--red); }
.notice-icon { flex: none; width: 2.5rem; height: 2.5rem; color: var(--red); }
.notice.is-black .notice-icon { color: var(--black); }
.notice-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notice-body { min-width: 0; }
.notice-body .section-label { margin-bottom: 0.35rem; }
.notice h3 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 0.6rem; }
.notice p { font-size: 1.05rem; margin: 0 0 0.75rem; }
.notice p:last-child { margin-bottom: 0; }
.article-body .notice { margin: var(--s2) 0; }
@media (max-width: 575px) { .notice { flex-direction: column; gap: 1rem; padding: 1.25rem; } }
/* Breed kader (Klaas, 08-10-2026): op een groot scherm werden de regels te lang (130 tekens). Vanaf 60rem breedte staan
   label en kop links (een derde), uitleg en link rechts (ongeveer 75 tekens per regel). Smaller, zoals in de artikels: onder elkaar. */
.notice { container-type: inline-size; }
@container (min-width: 60rem) {
  .notice-body { display: flow-root; }
  .notice-body > .section-label, .notice-body > h3 { float: left; clear: left; width: 32%; }
  .notice-body > :not(.section-label):not(h3) { margin-left: calc(32% + 3rem); }
  .notice-body > a { display: block; width: fit-content; }
}

/* ─── INHOUD MET ZIJMENU ─── */
/* lange inhoud: links een kleverig menu met de onderdelen (zelfde opmaak als het downloadmenu), rechts de tekst met foto's.
   Het onderdeel dat in beeld staat, wordt links aangeduid (data-sidenav) */
.side-nav-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: start; }
.side-content { grid-column: span 2; min-width: 0; }
/* de onderdelen zijn <section>s: zonder de standaard sectiepadding, zodat de eerste titel gelijk staat met het menu links */
.side-section { padding: 0; }
.side-section + .side-section { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-grey); }
.side-section h2 { margin-bottom: 1rem; }
.side-section p { font-size: 1.1rem; }
.side-section .side-photo { aspect-ratio: 3 / 2; background-color: var(--grey); margin: var(--s2) 0 1rem; }
.side-section figcaption { font-size: 0.95rem; color: var(--text-grey); }
@media (max-width: 991px) { .side-nav-layout { grid-template-columns: 1fr; } .side-content { grid-column: auto; } }

/* ─── TIJDLIJN IN FASES ─── */
/* schermbrede, swipebare tijdlijn met alle stappen, gegroepeerd per fase: boven de stappen een band met de fasenaam (grijs = nog niet
   gestart, rood = de fase van de actieve stap, zwart = afgewerkt). Eén doorlopende lijn onder alle stappen, ook over de fasegrenzen heen.
   Eén stap is actief en toont eronder haar paneel in één gecentreerde kolom van 48rem: titel, tekst, foto in de tekst en to-do's.
   Lijn en vierkantjes zoals de verticale tijdlijn: grijs, en het lijnstuk vult zich rood zodra de volgende stap aan de beurt is;
   het actieve vierkantje groeit. .no-numbers laat de cijfers weg (bij de stappen en in "stap x van y") */
.phase-timeline { padding: var(--s4) 0; container-type: inline-size; scroll-margin-top: 5rem; }
.phase-track {
  --zij: max(var(--gutter), calc((100cqw - var(--container-m)) / 2)); --stap: 9.5rem;
  position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0.5rem var(--zij) 0.5rem; padding-right: max(var(--zij), calc(100cqw - var(--zij) - var(--stap))); scroll-padding-inline: var(--zij);
  margin: var(--s2) 0; cursor: grab;
}
.phase-track { scroll-margin-top: 5rem; }   /* de pijlen scrollen de pagina tot de fasebalk bovenaan staat, onder het vaste menu */
.phase-track::-webkit-scrollbar { display: none; }
.phase-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.phase-group { flex: none; padding-right: 0.3rem; }
.phase-name { display: block; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); background: var(--grey); padding: 0.75rem 1rem; margin: 0 0 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--tr), color var(--tr); }
.phase-name:hover { background: var(--border-grey); }
.phase-group.is-active .phase-name { background: var(--red); color: var(--white); }
.phase-group.is-done .phase-name { background: var(--black); color: var(--white); }
.phase-steps { display: flex; align-items: flex-start; }
/* stap en fasenaam zijn links (#stap-…, #fase-…): kopieerbaar met de rechtermuisknop; het script vangt de klik op en werkt de adresbalk bij */
.phase-step { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: var(--stap); scroll-snap-align: start; background: none; border: 0; padding: 0.5rem 1rem 0 0; margin: 0; text-align: left; font: inherit; color: var(--black); text-decoration: none; cursor: pointer; }
/* lijnstuk van het midden van het eigen vierkantje tot het midden van het volgende, ook over de fasegrens heen; alleen de allerlaatste stap heeft er geen */
.phase-step::before {
  content: ''; position: absolute; left: 0.475rem; right: -0.475rem; top: 0.85rem; height: 0.25rem;
  background: linear-gradient(var(--red), var(--red)) 0 0 / 0% 100% no-repeat var(--border-grey);
  transition: background-size 0.6s ease;
}
.phase-step.is-done::before { background-size: 100% 100%; }
.phase-step:last-child::before { right: calc(-0.475rem - 0.3rem); }
.phase-group:last-child .phase-step:last-child::before { display: none; }
.phase-dot {
  position: relative; z-index: 1; display: block; width: 0.95rem; height: 0.95rem; background: var(--border-grey); margin-bottom: 1.1rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s, background 0.3s ease 0.6s;
}
.phase-step.is-done .phase-dot { background: var(--red); transition-delay: 0s; }
.phase-step.is-active .phase-dot { background: var(--red); transform: scale(1.7); }
.phase-nr { display: block; font-size: 0.8rem; color: var(--text-grey); margin-bottom: 0.15rem; }
.phase-timeline.no-numbers .phase-nr, .phase-timeline.no-numbers .phase-label-nr { display: none; }
.phase-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; transition: color var(--tr); }
.phase-step:hover .phase-title, .phase-step.is-active .phase-title { color: var(--red); }
.phase-panels { position: relative; max-width: var(--container-s); margin-inline: auto; }
.phase-panel { display: none; }
.phase-panel.is-active { display: block; animation: phase-in 0.35s ease-out; }
.phase-panel h3 { font-size: 1.75rem; line-height: 1.2; margin: 0.35rem 0 0.75rem; }
.phase-panel p { font-size: 1.1rem; margin: 0; }
.phase-panel figure { margin: 1.5rem 0 0; }
.phase-photo { aspect-ratio: 3 / 2; background-color: var(--grey); }
.phase-panel figcaption { font-size: 0.9rem; line-height: 1.4; color: var(--text-grey); margin-top: 0.6rem; }
.phase-todo-kop { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1.5rem; }
.phase-todo { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.phase-todo li { display: flex; align-items: flex-start; gap: 0.5em; margin: 0 0 0.5rem; font-size: 1.05rem; }
.phase-todo .icon-sm { color: var(--red); flex: none; margin-top: 0.3em; }
/* links naar andere pagina's onder een stap: onze linklijst met pijl, iets compacter */
.phase-links { margin-top: 0.75rem; gap: 0.6rem; }
.phase-links a { font-size: 1.05rem; }
.phase-nav { display: flex; justify-content: flex-end; margin: var(--s2) auto 0; max-width: var(--container-s); }
@keyframes phase-in { from { opacity: 0; transform: translateY(0.5rem); } }
[data-background-color="black"] .phase-step, [data-background-color="black"] .phase-panel { color: var(--white); }
[data-background-color="black"] .phase-name { background: #555; color: var(--white); }
[data-background-color="black"] .phase-group.is-done .phase-name { background: var(--white); color: var(--black); }
[data-background-color="black"] .phase-step::before { background-color: #555; }
[data-background-color="black"] .phase-dot { background: #555; }
[data-background-color="black"] .phase-step.is-done .phase-dot, [data-background-color="black"] .phase-step.is-active .phase-dot { background: var(--red); }
@media (max-width: 767px) { .phase-track { --stap: 8rem; } .phase-panel h3 { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .phase-panel.is-active { animation: none; } .phase-step::before, .phase-dot, .phase-name { transition: none; } }

/* ─── BELKNOP OP GSM ─── */
/* alleen op gsm, en alleen zodra de footer in beeld komt: een ronde rode belknop (Material Design, bewust rond) onderaan in het midden,
   met een witte tekstballon (met schaduw, want de footer is zwart) erboven. Op de site staat hij vlak voor </body>; .is-demo toont hem gewoon in de pagina */
.call-fab { position: fixed; left: 50%; bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 250; display: none; flex-direction: column; align-items: center; gap: 0.6rem; }
.call-fab.is-visible { display: flex; animation: fab-in 0.3s ease-out; }
/* de ballon is afgerond (zoals de knop een bewuste uitzondering), springt na de knop open en deint daarna zacht */
.call-fab-bubble { position: relative; background: var(--white); color: var(--black); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; padding: 0.5rem 0.9rem; white-space: nowrap; border-radius: 0.75rem; transform-origin: 50% 100%; }
.call-fab.is-visible .call-fab-bubble, .call-fab.is-demo .call-fab-bubble { animation: fab-ballon-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both, fab-ballon-deinen 3s ease-in-out 1.5s infinite; }
@keyframes fab-ballon-in { from { opacity: 0; transform: translateY(0.6rem) scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes fab-ballon-deinen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.3rem); } }
/* de driehoek overlapt de ballon 1 px, anders kiert de schaduw ertussen als een fijn streepje */
.call-fab-bubble::after { content: ''; position: absolute; left: 50%; top: calc(100% - 1px); margin-left: -0.4rem; border: 0.4rem solid transparent; border-top-color: var(--white); }
.call-fab-btn { width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--call-green); color: var(--white); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.call-fab-btn svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
/* hover: wit met zwart icoon, want de knop staat altijd boven de zwarte footer */
.call-fab-btn:hover { background: var(--white); color: var(--black); }
.call-fab.is-demo { position: static; transform: none; display: flex; padding: var(--s2) 0; animation: none; }
@keyframes fab-in { from { opacity: 0; transform: translate(-50%, 1rem); } }
@media (min-width: 768px) { .call-fab:not(.is-demo) { display: none; } }
@media (prefers-reduced-motion: reduce) { .call-fab.is-visible, .call-fab .call-fab-bubble { animation: none !important; } }

/* ─── UTILITY ─── */
.text-red { color: var(--red); }

.bg-light { background: var(--grey); }

 .mt-16 { margin-top: 1rem; }
.mt-32 { margin-top: 2rem;   } .mt-48 { margin-top: 3rem; }

.mb-32 { margin-bottom: 2rem;   }

/* ─── RESPONSIVE ─── */
@media screen and (max-width: 991px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.875rem; }

  section { padding: 4rem 0; }
  .hero h1 { font-size: 15vw; }
  .page-hero h1 { font-size: 5rem; }
  .service-card { aspect-ratio: auto; }
  .service-card h2 { font-size: 2rem; }
  .cta-heading h2 { font-size: 2rem; }
  .kc-header h1 { font-size: 2.5rem; }
  .default-hero h1 { font-size: 5rem; }
  .sticky-hero-grid { grid-template-columns: 1fr; }
  .vacature-card h2 { font-size: 2rem; }
  .kc-card h3 { font-size: 1.5rem; }

  .nav-toggle { display: flex; }
  .nav-menu {
    display: none; position: fixed; top: 4.6rem; left: 0; right: 0;
    background: var(--white); flex-direction: column; align-items: stretch;
    padding: 0 var(--s1) 1rem; gap: 0;
    border-bottom: 2px solid var(--border-grey);
    text-align: left;
  }
  .nav-menu.open { display: flex; }
  .nav-menu > li { width: 100%; }
  .nav-menu > li > a { display: block; padding: 1rem; width: 100%; }
  /* Webflow mobiel: volle breedte, chevron rechts, grijs paneel in 2 kolommen */
  .nav-dropdown-toggle { width: 100%; padding: 1rem; justify-content: space-between; align-items: center; }
  .nav-dropdown-menu {
    position: static; min-width: 0; width: 100%;
    padding: var(--s1); background: var(--grey); columns: 2;
  }
  .nav-dropdown-menu a { display: block; padding: 0.5rem 1rem; }

  .cta-inner { grid-template-columns: 1fr; gap: var(--s2); }
  .cta-contactinfo { padding: var(--s2); }
  .cta-contactinfo::before { inset: 0 calc(var(--gutter) * -1); }
  .kc-list-section { padding: 4rem 0; }
  .kc-card { padding: var(--s2); }
  /* uitgelichte tegel loopt in één kolom niet meer over twee rijen */
  .kc-card.is-featured { grid-row: auto; }
  .section-intro { grid-template-columns: 1fr; gap: var(--s1); }
  .section-intro > div:last-child { text-align: left !important; }
}

@media screen and (max-width: 767px) {
  :root { --s1: 0.75rem; --s2: 1.5rem; --s4: 2rem; }
  .hero h1 { font-size: 5rem; }
  .page-hero h1 { font-size: 4rem; }
  .default-hero h1 { font-size: 4rem; }
  .default-hero-inner { padding: var(--s2); padding-bottom: 0; }
  .vacature-card { flex-direction: column; align-items: flex-start; padding: var(--s2); }
  /* Webflow: .text-columns-2 valt terug op één kolom */
  .advantages-list { columns: 1; }
  .advantages-title { max-width: none; }
  .hero .container, .page-hero .container,
  .hero .container:has(> .btn), .page-hero .container:has(> .btn) {
    padding: var(--s2); padding-bottom: 0; gap: var(--s1);
  }
  .hero .container { font-size: 1.3rem; }
  .back-button.is-on-red, .service-hero-cta { font-size: 1.3rem; }
  .hero-sub, .hero-badges, .page-hero .lead { font-size: 1.3rem; }
  .hero .btn, .page-hero .btn {
    position: static; order: 9; width: calc(100% + 2 * var(--s2));
    margin: var(--s2) calc(var(--s2) * -1) 0; padding: 1.5rem;
  }
  .form-grid, .form-footer { grid-template-columns: 1fr; }
  .form-footer .btn { justify-self: start; }
  .contact-form { padding-top: var(--s2); }
  .site-footer > .container { padding-top: var(--s2); padding-bottom: var(--s2); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom-links { justify-content: flex-start; }

}

@media screen and (max-width: 479px) {
  .hero h1 { font-size: 3rem; }
  .page-hero h1 { font-size: 2.5rem; }
  .default-hero h1, .service-hero-red h1 { font-size: 2.5rem; }   /* dienstpagina's even groot als de rode kop op contact */
  .about-number-value { font-size: 3rem; }
  .hero .container, .page-hero .container { font-size: 1.1rem; }
  .back-button.is-on-red, .service-hero-cta { font-size: 1.1rem; }
  .hero-sub, .hero-badges, .page-hero .lead { font-size: 1.1rem; }
  .service-card { padding: var(--s2) 0 3rem; }
  .kc-card { padding-bottom: var(--s4); }

}

/* ─── DIENSTENTEGELS MET FOTO (mozaïek) ─── */
/* foto over de hele tegel; bij hover zoomt de foto, schuift een dekkend rood vlak van onder naar boven over de foto en schuift de uitleg omhoog.
   Tegels komen een voor een binnen zodra het raster in beeld komt (--i = volgnummer). */
.service-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(17rem, auto); gap: 0.75rem; }
.mosaic-tile { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem; color: var(--white); background: #2c2020; text-decoration: none; }
.mosaic-tile.is-groot { grid-column: span 2; grid-row: span 2; }
.mosaic-tile::before { content: ''; position: absolute; inset: 0; z-index: -3; background: var(--foto) center / cover no-repeat; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
@media screen and (max-width: 767px) { .mosaic-tile::before { background-image: var(--foto-sm, var(--foto)); } }
.mosaic-tile::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(to top, rgba(20, 16, 17, .85), rgba(20, 16, 17, .15) 65%, rgba(20, 16, 17, .35)); }
.mosaic-rood { position: absolute; inset: 0; z-index: -1; background: var(--red); clip-path: inset(100% 0 0 0); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }
.mosaic-body h3 { color: var(--white); font-size: 2rem; line-height: 1.1; margin: 0; }
.mosaic-tile.is-groot .mosaic-body h3 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.mosaic-meer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease; }
.mosaic-meer > div { overflow: hidden; }
.mosaic-meer p { color: var(--white); font-size: 1.05rem; line-height: 1.45; margin: .75rem 0 0; }
.mosaic-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; font-family: var(--font-display); font-size: 1rem; }
.mosaic-link svg { width: 1rem; height: 1rem; transition: transform .3s ease; }
.mosaic-tile.is-groot .mosaic-meer, .mosaic-tile:is(:hover, :focus-visible) .mosaic-meer { grid-template-rows: 1fr; opacity: 1; }
.mosaic-tile:is(:hover, :focus-visible)::before { transform: scale(1.08); }
.mosaic-tile:is(:hover, :focus-visible) .mosaic-rood { clip-path: inset(0 0 0 0); }
.mosaic-tile:is(:hover, :focus-visible) .mosaic-tile:is(:hover, :focus-visible) .mosaic-link svg { transform: translateX(.35rem); }
.mosaic-tile.is-vraag { background: var(--red); justify-content: flex-end; }
.mosaic-tile.is-vraag::before, .mosaic-tile.is-vraag::after { content: none; }
.mosaic-tile.is-vraag h3 { color: var(--white); font-size: 2rem; line-height: 1.1; margin: 0 0 .75rem; }
.mosaic-tile.is-vraag p { color: var(--white); font-size: 1.05rem; margin: 0 0 var(--s1); }
/* binnenkomen: pas verborgen als het script draait (is-klaar), dus zonder script altijd zichtbaar */
.service-mosaic.is-klaar .mosaic-tile { opacity: 0; transform: translateY(2.5rem); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.service-mosaic.is-klaar.is-zichtbaar .mosaic-tile { opacity: 1; transform: none; }
@media (hover: none) { .mosaic-meer { grid-template-rows: 1fr; opacity: 1; } }
/* met muis: de tekst ligt onderaan over de foto, zodat de tegel niet groeit als de uitleg bij hover openschuift */
@media (hover: hover) and (min-width: 768px) {
  .service-mosaic { grid-auto-rows: 18rem; }
  .mosaic-tile:not(.is-vraag) .mosaic-body { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .mosaic-tile::before, .mosaic-rood, .mosaic-meer, .service-mosaic.is-klaar .mosaic-tile { transition: none; } }
@media (max-width: 1010px) {
  .service-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(15rem, auto); }
  .mosaic-tile.is-groot { grid-row: span 1; min-height: 24rem; }
}
@media (max-width: 767px) {
  .service-mosaic { grid-template-columns: 1fr; grid-auto-rows: minmax(13rem, auto); gap: .5rem; }
  .mosaic-tile.is-groot { grid-column: auto; min-height: 20rem; }
  .mosaic-meer { grid-template-rows: 1fr; opacity: 1; }
}

/* ─── WERKGEBIED MET KAART ─── */
/* België als omtrek (zoals een schoolkaart), een rode stip per cel met opgeleverde werven, groter waar er meer zijn, met een zachte gloed eronder.
   De stippen verschijnen vanuit het kantoor in Wilrijk (--d = vertraging per stip). Knoppen zoomen in op regio Antwerpen. */
.area-map { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s4); align-items: start; }
.area-map-body p { font-size: 1.1rem; line-height: 1.5; margin-top: 1rem; }
/* gemeenten per streek als korte alinea: blijft tekst voor zoekmachines, maar het blok blijft in evenwicht met de kaart */
.area-streken { display: grid; gap: 1.25rem; margin-top: var(--s2); }
.area-streken h3 { font-size: 1.1rem; color: var(--red); margin: 0 0 .25rem; }
.area-streken p { font-size: 1rem; line-height: 1.5; margin: 0; }
.kaart { margin: 0; position: relative; }
.kaart-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.kaart-land { fill: var(--grey); }
.kaart-provincie { fill: #ebe5e5; }
.kaart-grens { fill: none; stroke: var(--black); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[data-background-color="grey"] .kaart-land { fill: var(--white); }
[data-background-color="grey"] .kaart-provincie { fill: #faf1f1; }
.kaart-gloed { opacity: .22; }
.kaart-stippen circle { fill: var(--red); fill-opacity: .6; mix-blend-mode: multiply; }
.kaart-stad circle { fill: var(--black); }
.kaart-stad text { font-family: var(--font-text); font-weight: 600; fill: var(--black); paint-order: stroke; stroke: var(--white); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kaart-stad { transition: opacity .4s ease; }
.kaart:not(.is-regio) .kaart-stad:not(.is-be), .kaart.is-regio .kaart-stad:not(.is-regio) { opacity: 0; }
.kaart.is-klaar .kaart-stippen circle { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.3, 1.7, .5, 1) var(--d, 0ms); }
.kaart.is-klaar .kaart-gloed { opacity: 0; transition: opacity 1.6s ease 1.4s; }
.kaart.is-klaar.is-zichtbaar .kaart-stippen circle { transform: none; }
.kaart.is-klaar.is-zichtbaar .kaart-gloed { opacity: .22; }
.kaart-knoppen { position: absolute; top: 0; right: 0; z-index: 1; display: flex; }
.kaart-knoppen button { font: inherit; font-size: .95rem; padding: .5rem .9rem; background: var(--white); color: var(--black); border: 1px solid var(--black); cursor: pointer; transition: background var(--tr), color var(--tr); }
.kaart-knoppen button + button { border-left: 0; }
.kaart-knoppen button:hover { background: var(--grey); }
.kaart-knoppen button.is-active { background: var(--black); color: var(--white); }
.kaart figcaption { margin-top: .75rem; font-size: .85rem; font-style: italic; line-height: 1.4; text-align: center; color: var(--black); }
@media (max-width: 1010px) {
  .area-map { grid-template-columns: 1fr; gap: var(--s2); }
}
@media (max-width: 767px) {
  .kaart-knoppen { position: static; margin-bottom: .75rem; }
  .kaart-knoppen button { flex: 1; }
}

/* ─── TEASER NAAR EEN DOELGROEPPAGINA ─── */
/* foto links, zwart vlak rechts met label, titel, korte tekst en knop; de hele teaser is klikbaar via de knop (::after op de knop dekt de hele teaser) */
.teaser { display: grid; grid-template-columns: 1fr 1fr; background: var(--black); color: var(--white); position: relative; overflow: hidden; }
.teaser-photo { min-height: 26rem; position: relative; overflow: hidden; background: #2c2020; }
.teaser-photo::before { content: ''; position: absolute; inset: 0; background: var(--foto) center / cover no-repeat; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.teaser:hover .teaser-photo::before { transform: scale(1.05); }
.teaser-body { background: var(--black); padding: var(--s4); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s1); }
.teaser-body .section-label { color: var(--red); }
.teaser-body h2 { color: var(--white); font-size: 3rem; line-height: 1.05; margin: 0; }
.teaser-body p { color: var(--white); font-size: 1.1rem; line-height: 1.5; margin: 0; }
.teaser-body .btn { margin-top: var(--s1); }
.teaser-body .btn::after { content: ''; position: absolute; inset: 0; }
.teaser-body .btn { position: static; }
.teaser.is-omgekeerd .teaser-photo { order: 2; }
@media (max-width: 1010px) { .teaser-body h2 { font-size: 2.25rem; } .teaser-body { padding: var(--s2); } }
@media (max-width: 767px) {
  .teaser { grid-template-columns: 1fr; }
  .teaser-photo { min-height: 14rem; }
  .teaser-photo::before { background-image: var(--foto-sm, var(--foto)); }
  .teaser.is-omgekeerd .teaser-photo { order: 0; }
}

/* ─── REFERENTIES MET FOTOGALERIJ ─── */
/* de kaart is een knop die een venster met alle foto's van het project opent; filter op dienst (tabs) en gemeente (keuzelijst) */
.ref-filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1rem; }
.ref-filters .filter-tabs { margin-bottom: 0; justify-content: center; }
.ref-gemeente { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.ref-gemeente select { font: inherit; font-size: 1.05rem; padding: 0.45rem 2.25rem 0.45rem 0.9rem; border: 2px solid var(--black); border-radius: 0; background: var(--white); color: var(--black); cursor: pointer; }
.ref-project { width: 100%; max-width: 40rem; }
.ref-project[hidden] { display: none; }
button.ref-card { border: 0; font: inherit; text-align: left; cursor: pointer; }
.ref-card-link small { display: block; font-size: 0.85rem; opacity: 0.75; }
.ref-leeg { text-align: center; font-size: 1.1rem; margin-top: var(--s2); }
.ref-galerij { position: fixed; inset: 0; margin: auto; width: min(72rem, 94vw); height: min(52rem, 92vh); max-width: none; max-height: none;
  padding: 0; border: 0; background: var(--black); color: var(--white); overflow: hidden; }
.ref-galerij[open] { display: grid; grid-template-rows: auto 1fr auto; }
.ref-galerij::backdrop { background: rgba(20, 16, 17, 0.8); }
.ref-galerij-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; }
.ref-galerij-kop h2 { color: var(--white); font-size: 1.5rem; line-height: 1.2; margin: 0; }
.ref-galerij-sluit { background: none; border: 0; color: var(--white); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
.ref-galerij-sluit:hover { color: var(--red); }
.ref-galerij-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 0; }
.ref-galerij-track::-webkit-scrollbar { display: none; }
.ref-galerij-track figure { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.ref-galerij-track img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.ref-galerij-track figcaption { text-align: center; font-size: 0.95rem; padding: 0.5rem 1rem 0; opacity: 0.85; }
.ref-galerij-pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border: 0; background: var(--white); color: var(--black); cursor: pointer; display: grid; place-items: center; }
.ref-galerij-pijl.is-prev { left: 0.75rem; } .ref-galerij-pijl.is-prev svg { transform: rotate(180deg); }
.ref-galerij-pijl.is-next { right: 0.75rem; }
.ref-galerij-pijl:hover { background: var(--red); color: var(--white); }
.ref-galerij.is-enkel .ref-galerij-pijl { display: none; }
.ref-galerij-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; padding: 0.9rem 1.25rem; font-size: 1rem; }
.ref-galerij-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.ref-galerij-links .red-link { color: var(--white); font-size: 1rem; }
.ref-galerij-links .red-link:hover { color: var(--red); }
@media (max-width: 767px) { .ref-galerij { width: 100vw; height: 100dvh; } .ref-galerij-pijl { width: 2.5rem; height: 2.5rem; } }

/* ─── PARTNERLOGO'S MET UITLEG ─── */
/* witte tegels met het logo en eronder waarvoor we met die partner werken; bij hover komt de tegel iets omhoog */
.partner-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s2); }
.partner-tile { flex: 0 1 calc((100% - 3 * var(--s2)) / 4); min-width: 11rem; background: var(--white); border: 1px solid var(--border-grey); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: var(--s2) 1.25rem 1.25rem; aspect-ratio: 4 / 3; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.partner-tile img { display: block; max-width: 72%; max-height: 5.5rem; width: auto; height: auto; object-fit: contain; flex: 1; min-height: 0; }
.partner-tile span { font-size: 0.95rem; color: var(--text-grey); text-align: center; line-height: 1.3; }
/* zoals .google-card in de reviewstrook: omhoog, iets groter, zachte schaduw; de grijze rand blijft */
.partner-tile:hover { transform: translateY(-.5rem) scale(1.02); box-shadow: 0 14px 32px rgba(35, 31, 32, .16); }
@media (prefers-reduced-motion: reduce) { .partner-tile { transition: box-shadow .2s ease; } .partner-tile:hover { transform: none; } }
.partner-note { max-width: 46rem; margin: var(--s2) auto 0; text-align: center; font-size: 1rem; color: var(--text-grey); }
@media (max-width: 767px) { .partner-tile { flex-basis: calc((100% - var(--s2)) / 2); min-width: 0; } }


/* ─── NAAMLIJN-SECTIE: tekst links, naamschema rechts ─── */
.naamlijn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; }
.naamlijn-tekst h2 { margin: 0.5rem 0 1rem; }
.naamlijn-tekst p a { color: var(--red); text-decoration: underline; }
.naamlijn-tekst p a:hover { color: var(--black); }
.naamlijn-tekst p { font-size: 1.1rem; line-height: 1.55; margin: 0 0 1rem; max-width: 34rem; }
@media (max-width: 991px) { .naamlijn-grid { grid-template-columns: 1fr; gap: var(--s2); } }

/* ─── NAAMSCHEMA: WIE IS JACK!? ─── */
/* Jo Stevens bovenaan, een rode tak naar zijn twee bedrijven; in elk bedrijfsvak naar wie het vernoemd is. Rechte vakken, geen tijdlijn. */
.naamschema { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s2); text-align: center; --lijn: 3px; }
.ns-vak { padding: 1.1rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; }
.ns-vak strong { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.2; }
.ns-vak span { font-size: 0.95rem; line-height: 1.35; color: var(--text-grey); }
.ns-oprichter { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--s2) / 2); background: var(--black); color: var(--white); }
.ns-oprichter span { color: rgba(255, 255, 255, .75); }
.ns-bedrijf { border: 2px solid var(--black); background: var(--white); }
.ns-bedrijf.is-jack { background: var(--red); border-color: var(--red); color: var(--white); }
.ns-bedrijf.is-jack span { color: rgba(255, 255, 255, .85); }
/* tak: steel onder Jo, dwarslijn, twee poten naar het midden van elke kolom */
.ns-tak { grid-column: 1 / -1; position: relative; height: 4rem; }
.ns-tak::before { content: ''; position: absolute; left: calc(25% - var(--s2) / 4 - var(--lijn) / 2); right: calc(25% - var(--s2) / 4 - var(--lijn) / 2); top: 50%; bottom: 10px;
  border: var(--lijn) solid var(--red); border-bottom: 0; }
.ns-tak::after { content: ''; position: absolute; left: 50%; top: 0; height: 50%; width: var(--lijn); margin-left: calc(var(--lijn) / -2); background: var(--red); }
/* twee rode pijlen van Jo naar zijn bedrijven */
.ns-tak i { position: absolute; bottom: 0; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top: 11px solid var(--red); }
.ns-tak i:first-child { left: calc(25% - var(--s2) / 4); }
.ns-tak i:last-child { left: calc(75% + var(--s2) / 4); }
@media (max-width: 767px) {
  .naamschema { column-gap: 1rem; }
  .ns-vak { padding: 0.9rem 0.6rem; }
  .ns-vak strong { font-size: 1.1rem; }
  .ns-vak span { font-size: 0.85rem; }
  .ns-oprichter { width: calc(50% - 0.5rem); }
  .ns-tak::before { left: calc(25% - 0.25rem - var(--lijn) / 2); right: calc(25% - 0.25rem - var(--lijn) / 2); }
  .ns-tak i:first-child { left: calc(25% - 0.25rem); } .ns-tak i:last-child { left: calc(75% + 0.25rem); }
}
/* rood CTA-kader op een volledig wit vlak (wit blok ervoor en erna) */
.white-cta { background: var(--white); padding: 5rem 0; }

/* ─── FOUTPAGINA 404 ─── */
/* grote zwarte cijfers met een rood uitroepteken, zoals in de naamtegels */
.fout-404 { font-family: var(--font-display); font-weight: 800; font-size: clamp(8.5rem, 26vw, 20rem); line-height: 0.82; letter-spacing: -0.05em;
  color: var(--black); margin: 1.5rem 0 0; }
.fout-404 span { color: var(--red); margin-left: 0.02em; }
.fout-hero h1 { margin-top: 2rem; }

/* begrippen op de offerte (prijsartikel): smalle eerste kolom met de term */
.article-body table.begrippen td:first-child { width: 12rem; }
.article-body table.begrippen td strong { font-family: var(--font-display); font-size: 1.15rem; }
/* op gsm: term en uitleg onder elkaar, zodat de tabel niet zijwaarts scrolt */
@media (max-width: 767px) {
  .article-body table.begrippen { min-width: 0; }
  .article-body table.begrippen tr:first-child { display: none; }
  .article-body table.begrippen tr, .article-body table.begrippen td { display: block; width: auto; }
  .article-body table.begrippen td:first-child { width: auto; background: var(--grey); border-bottom: 0; }
  .article-body table.begrippen td + td { border-top: 0; }
  .article-body table.begrippen tr + tr td:first-child { border-top: 0; }
  /* de eerste zichtbare rij (de kopregel is verborgen) houdt wel zijn lijn bovenaan */
  .article-body table.begrippen tr:first-child + tr td:first-child { border-top: 1px solid var(--border-grey); }
}

/* ─── VEELGESTELDE VRAGEN (verzamelpagina) ─── */
.faq-header .kc-header-grid { align-items: end; }
.faq-header h1 { font-size: 3.5rem; line-height: 1.05; }
.faq-lead { max-width: 48rem; margin-top: var(--s2); }
.faq-teller { font-size: 0.95rem; color: var(--text-grey); min-height: 1.4em; margin: 0.25rem 0 0; }
.faq-cats { margin-top: 1.5rem; }
.faq-cat { scroll-margin-top: 6rem; }
.faq-cat .faq-item { scroll-margin-top: 8rem; }
.faq-a a { color: var(--red); text-decoration: underline; }
@media (max-width: 767px) { .faq-header h1 { font-size: 2.5rem; } }

/* ─── KENNISCENTRUM (overzicht) ─── */
.kc-masonry .kc-card[hidden] { display: none; }
.kc-masonry .kc-card .kc-card-summary { display: block; }   /* ook de tegel zonder foto toont zijn samenvatting */
.kc-lead { max-width: 48rem; margin-top: var(--s2); }
.kc-zoek-faq { margin: 0.5rem 0 0; font-size: 0.95rem; }
.kc-header h1 { font-size: 3.5rem; line-height: 1.05; }
@media (max-width: 767px) { .kc-header h1 { font-size: 2.5rem; } }

/* ThermoSan-blok (crepi onderhouden): tekst en beeld op grijs, downloadkaarten op wit */
.thermosan .article-body h2 { color: var(--black); margin-top: 0.5rem; }
.thermosan .article-body ul { margin-bottom: 0; }
.thermosan .article-downloads { margin: 0; }
[data-background-color="grey"] .download-card { background: var(--white); }
[data-background-color="grey"] .download-card:hover { background: var(--black); }

/* Voordelenkader met uitleg: titel, korte tekst en link in de eerste kolom (professionals, mankracht) */
.advantages-intro { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.advantages-intro p { font-size: 1.1rem; line-height: 1.5; max-width: 30rem; margin: 0; }
.advantages-intro .advantages-title { font-size: 2.5rem; }

/* steenstrips versus Meldorfer: drie kolommen, eigenschap in de eerste */
.article-body table.strips-vs th:not(:first-child) { width: 40%; }
.article-body table.strips-vs td:first-child, .article-body table.strips-vs th[scope="row"] { font-family: var(--font-display); font-weight: 700; }
@media (max-width: 767px) {
  .article-body table.strips-vs { min-width: 0; }
  .article-body table.strips-vs tr:first-child { display: none; }
  .article-body table.strips-vs tr, .article-body table.strips-vs th, .article-body table.strips-vs td { display: block; width: auto; }
  .article-body table.strips-vs th[scope="row"] { background: var(--grey); border-bottom: 0; }
  .article-body table.strips-vs td { border-top: 0; }
  .article-body table.strips-vs td:nth-of-type(1)::before { content: 'Steenstrips: '; font-weight: 700; }
  .article-body table.strips-vs td:nth-of-type(2)::before { content: 'Meldorfer: '; font-weight: 700; }
}

/* doorverwijsbeloning: heel kleine voetnoot bij het sterretje, en het aparte doorverwijsformulier onder de waardebon */
.referral-body sup { font-size: 0.6em; }
.referral-voetnoot { font-size: 0.8rem; color: var(--text-grey); margin: 0.75rem 0 0; }
.referral-body p.referral-voetnoot { font-size: 0.8rem; margin-bottom: 0; }
.referral-form { margin-top: var(--s4); }
.form-kop { font-size: 1.5rem; margin: 0 0 0.25rem; }
.form-optioneel { font-weight: 400; color: var(--text-grey); }
.referral-form .form-footer { flex-wrap: wrap; row-gap: 0.75rem; }
.referral-bericht { margin-top: 1rem; }
.referral-bericht textarea { min-height: 8rem; }

/* ─── KEUZESCHEMA (gevelafwerking kiezen) ─── */
/* beslisboom: twee ruiten (Isoleren? en Pleisteren?) met rode ja/nee-pijlen, daaronder drie even brede kolommen met de keuzes.
   Posities volgen het raster van drie kolommen met tussenruimte --g: c1, c2, c3 = midden van elke kolom, c23 = midden van kolom 2 en 3. */
.keuzeschema { margin: 0 0 var(--s4); --g: var(--s2); --lijn: 3px; --rb: 10rem; --rh: 5.5rem;
  --cw: calc((100% - 2 * var(--g)) / 3); --c1: calc(var(--cw) / 2); --c2: calc(var(--cw) * 1.5 + var(--g)); --c3: calc(var(--cw) * 2.5 + 2 * var(--g)); --c23: calc(var(--cw) * 2 + 1.5 * var(--g)); }
.ks-beslis, .ks-takken { position: relative; }
.ks-beslis { height: var(--rh); }
.ks-ruit { position: absolute; top: 0; width: var(--rb); height: var(--rh); transform: translateX(-50%); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--white); background: var(--red);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ks-ruit.is-1 { left: var(--c1); }
.ks-ruit.is-2 { left: var(--c23); }
/* nee: van de rechterpunt van ruit 1 naar de linkerpunt van ruit 2 */
.ks-nee-lijn { position: absolute; top: 50%; height: var(--lijn); margin-top: calc(var(--lijn) / -2); background: var(--red);
  left: calc(var(--c1) + var(--rb) / 2); right: calc(100% - var(--c23) + var(--rb) / 2 + 10px); }
.ks-nee-lijn::after { content: ''; position: absolute; right: -11px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-right: 0; border-left: 11px solid var(--red); }
.ks-beslis span, .ks-takken span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-grey); }
.ks-nee-lijn span { position: absolute; left: 50%; bottom: 0.4rem; transform: translateX(-50%); }
.ks-takken { height: 3.5rem; }
/* ja: recht naar beneden onder ruit 1 */
.ks-ja { position: absolute; left: var(--c1); top: 0; bottom: 0; width: var(--lijn); margin-left: calc(var(--lijn) / -2); }
.ks-ja::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 10px; background: var(--red); }
.ks-ja::after { content: ''; position: absolute; left: 50%; bottom: 0; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top: 11px solid var(--red); }
.ks-ja span { position: absolute; left: 0.6rem; top: 0.6rem; }
/* ruit 2 splitst naar kolom 2 (ja) en kolom 3 (nee) */
.ks-split { position: absolute; left: var(--c2); right: calc(100% - var(--c3)); top: 0; bottom: 0; }
.ks-split::before { content: ''; position: absolute; left: calc(var(--lijn) / -2); right: calc(var(--lijn) / -2); top: 50%; bottom: 10px; border: var(--lijn) solid var(--red); border-bottom: 0; }
.ks-split::after { content: ''; position: absolute; left: 50%; top: 0; height: 50%; width: var(--lijn); margin-left: calc(var(--lijn) / -2); background: var(--red); }
.ks-split span { position: absolute; bottom: 0.25rem; }
.ks-split .is-ja { left: 0.6rem; }
.ks-split .is-nee { right: 0.6rem; }
.ks-split i { position: absolute; bottom: 0; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top: 11px solid var(--red); }
.ks-split i:first-of-type { left: 0; }
.ks-split i:last-of-type { left: 100%; }
.ks-split .is-ja { left: 0.9rem; } .ks-split .is-nee { right: 0.9rem; }
.ks-kolommen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); align-items: stretch; }
.ks-kolom { display: flex; flex-direction: column; gap: 0.5rem; }
.ks-pad { display: none; }
.ks-keuze { display: block; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; padding: 0.8rem 0.75rem; background: var(--grey); color: var(--black); line-height: 1.25; }
.ks-keuze span { display: block; font-family: var(--font-text); font-weight: 400; font-size: 0.85rem; color: var(--text-grey); margin-top: 0.15rem; }
a.ks-keuze.is-zwart { background: var(--black); color: var(--white); text-decoration: none; }
a.ks-keuze.is-zwart:hover { background: var(--red); }
.ks-opties { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; flex: 1; align-content: start; }
.article-body .ks-opties li, .ks-opties li { margin: 0; font-size: 1rem; }
.ks-opties a { display: block; padding: 0.65rem 0.8rem; border: 1px solid var(--border-grey); background: var(--white); color: var(--black); text-decoration: none; transition: background var(--tr), color var(--tr), border-color var(--tr); }
.ks-opties a strong { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; }
.ks-opties a span { display: block; font-size: 0.85rem; color: var(--text-grey); line-height: 1.35; }
.ks-opties a:hover, .ks-opties a:focus-visible { background: var(--black); border-color: var(--black); color: var(--white); }
.ks-opties a:hover span, .ks-opties a:focus-visible span { color: var(--white); }
.keuzeschema figcaption { font-size: 0.9rem; color: var(--text-grey); margin-top: 1rem; }
/* op gsm: geen ruiten en pijlen, drie blokken onder elkaar met het pad erboven */
@media (max-width: 767px) {
  .ks-beslis, .ks-takken { display: none; }
  .ks-kolommen { grid-template-columns: 1fr; gap: var(--s2); }
  .ks-pad { display: block; margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
}
/* rode link in het zwarte voordelenkader: bij hover wit in plaats van zwart (anders onzichtbaar) */
.advantages .red-link:hover { color: var(--white); }
/* rood label rechtsboven op een kader, zoals "Standaard" op de tegels (professionals: mankracht) */
.advantages { position: relative; }
.kader-tag { font-size: 0.75rem; padding: 0.4rem 0.8rem; }

/* kleurfiches (kleurartikel): kleurvlak met naam, helderheidswaarde en systeem, drie naast elkaar */
.kleurfiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 1.5rem; }
.kleurfiche { display: flex; flex-direction: column; border: 1px solid var(--border-grey); background: var(--white); }
.kleurfiche-kleur { display: block; aspect-ratio: 4 / 3; }
.kleurfiche-naam { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; padding: 0.7rem 0.9rem 0; }
.kleurfiche-hw { font-size: 1rem; padding: 0.1rem 0.9rem 0; color: var(--text-grey); }
.kleurfiche-systeem { font-size: 0.95rem; font-weight: 700; color: var(--red); padding: 0.2rem 0.9rem 0.8rem; }
@media (max-width: 480px) { .kleurfiches { gap: 0.5rem; } .kleurfiche-naam { font-size: 1rem; padding: 0.5rem 0.6rem 0; } .kleurfiche-hw, .kleurfiche-systeem { font-size: 0.85rem; padding-left: 0.6rem; padding-right: 0.6rem; } }

/* Tekst en beeld, variant .is-zones: foto met twee zones (bv. met en zonder hydrofuge). Labels uit data-links en data-rechts,
   witte lijn op de grens (de grens ligt in het midden van de foto). Wijs een helft aan of tik erop: de andere helft wordt donkerder. */
.visual-placeholder.is-zones { position: relative; cursor: pointer; --dim-l: 0; --dim-r: 0;
  background-image: linear-gradient(to right, rgba(0,0,0,var(--dim-l)) 50%, rgba(0,0,0,var(--dim-r)) 50%), linear-gradient(var(--white), var(--white)), var(--foto);
  background-size: 100% 100%, 2px 100%, cover; background-position: 0 0, 50% 0, center; }
.visual-placeholder.is-zones[data-actief="links"] { --dim-r: 0.55; }
.visual-placeholder.is-zones[data-actief="rechts"] { --dim-l: 0.55; }
.visual-placeholder.is-zones::before, .visual-placeholder.is-zones::after {
  position: absolute; bottom: 1rem; transform: translateX(-50%); padding: 0.45rem 0.8rem; white-space: nowrap;
  background: var(--black); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; transition: background-color .2s; }
.visual-placeholder.is-zones::before { content: attr(data-links); left: 25%; }
.visual-placeholder.is-zones::after { content: attr(data-rechts); left: 75%; }
.visual-placeholder.is-zones[data-actief="links"]::before, .visual-placeholder.is-zones[data-actief="rechts"]::after { background: var(--red); }
@media screen and (max-width: 767px) {
  .visual-placeholder.is-zones { background-image: linear-gradient(to right, rgba(0,0,0,var(--dim-l)) 50%, rgba(0,0,0,var(--dim-r)) 50%), linear-gradient(var(--white), var(--white)), var(--foto-sm, var(--foto)); }
  .visual-placeholder.is-zones::before, .visual-placeholder.is-zones::after { font-size: 0.85rem; padding: 0.35rem 0.6rem; bottom: 0.75rem; }
}
/* tekstballon met uitleg (data-links-uitleg, data-rechts-uitleg) boven het label van de actieve helft. Zoals de ballon van de
   belknop in de footer: afgerond (bewuste uitzondering), met schaduw, springt open en deint daarna zacht. Het script maakt hem
   even breed als de langste tekstregel, zodat er links en rechts geen witruimte overblijft. */
.zone-ballon { position: absolute; bottom: 3.5rem; left: 25%; translate: -50% 0; z-index: 1; width: max-content; max-width: 12.5rem;
  padding: 0.5rem 0.8rem; background: var(--white); color: var(--black); border-radius: 0.75rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; line-height: 1.3; text-align: center; text-wrap: balance;
  transform-origin: 50% 100%; opacity: 0; visibility: hidden; pointer-events: none; }
.zone-ballon.is-rechts { left: 75%; }
/* de driehoek overlapt de ballon 1 px, anders kiert de schaduw ertussen */
.zone-ballon::after { content: ''; position: absolute; left: 50%; top: calc(100% - 1px); margin-left: -0.4rem; border: 0.4rem solid transparent; border-top-color: var(--white); }
.is-zones[data-actief="links"] .zone-ballon.is-links, .is-zones[data-actief="rechts"] .zone-ballon.is-rechts {
  opacity: 1; visibility: visible; animation: fab-ballon-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both, fab-ballon-deinen 3s ease-in-out 1s infinite; }
@media screen and (max-width: 767px) { .zone-ballon { bottom: 3rem; font-size: 0.85rem; padding: 0.4rem 0.65rem; max-width: 9.5rem; } }
@media (prefers-reduced-motion: reduce) { .zone-ballon { animation: none !important; } }

/* Systeemopbouw, variant .is-staand: staande foto (3:4) naast de uitleg, elk de helft; op tablet en gsm onder elkaar.
   Met .is-swapped staat de foto rechts (alleen naast elkaar; onder elkaar komt de foto altijd eerst) */
.hotspots-grid.is-staand { grid-template-columns: 1fr 1fr; align-items: start; }
.hotspots-grid.is-staand .hotspots { grid-column: auto; aspect-ratio: 3 / 4; }
.hotspot-card .red-link { display: inline-block; margin-top: 0.75rem; }
/* case study (prijsartikel): eigen grijze sectie onder de tekst, twee rasters onder elkaar */
.case-study { padding: var(--s4) 0; }
.case-tussenruimte { height: var(--s4); }
@media screen and (min-width: 992px) { .hotspots-grid.is-staand.is-swapped .hotspots { order: 2; } }
@media screen and (max-width: 991px) { .hotspots-grid.is-staand { grid-template-columns: 1fr; } .hotspots-grid.is-staand .hotspots { max-width: 32rem; } }

/* Markeerstreep: een dikke rode balk achter het onderste deel van de woorden, die zich van links naar rechts intekent zodra de
   tekst in beeld komt (script MARKEER_JS zet .is-zichtbaar). Zonder beweging (prefers-reduced-motion) staat hij er meteen. */
.markeer { background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-position: 0 84%;
  background-size: 0 0.3em; transition: background-size 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.markeer.is-zichtbaar { background-size: 100% 0.3em; }
@media (prefers-reduced-motion: reduce) { .markeer { background-size: 100% 0.3em; transition: none; } }
/* gsm: het grote cijfer links uitgelijnd, net als de tekst eronder */
@media screen and (max-width: 991px) { .big-number-value { justify-self: start; text-align: left; } }
/* gsm: patroontekeningen (metselverbanden, voegtypes) twee per rij, ze blijven leesbaar en de lijst wordt half zo lang */
@media screen and (max-width: 575px) {
  .finish-grid:has(> .finish-tile.is-pattern) { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .finish-tile.is-pattern .finish-name { font-size: 1rem; }
}

/* Voordelen (zwart vlak), variant .has-foto: foto links, dan de uitleg en de lijst (in een kolom); de foto is even hoog als de
   langste kolom. Op tablet de foto bovenaan over de hele breedte, op gsm alles onder elkaar (professionals, #mankracht) */
.advantages.has-foto { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.advantages-foto { min-height: 22rem; background: var(--grey) center / cover no-repeat; background-image: var(--foto); }
.advantages.has-foto .advantages-list { columns: 1; }
@media screen and (max-width: 991px) {
  .advantages.has-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advantages-foto { grid-column: 1 / -1; min-height: 0; aspect-ratio: 4 / 3; background-image: var(--foto-sm, var(--foto)); }
}
@media screen and (max-width: 767px) { .advantages.has-foto { grid-template-columns: 1fr; } }
/* tegel zonder link (korrels op crepi): hover blijft, gewone muispijl */
.finish-tile.is-statisch { cursor: default; }

/* korreltegels op crepi: klikbaar (opent .korrel-galerij), het venster gebruikt de stijl van .ref-galerij */
.finish-tile.is-zoom { cursor: zoom-in; }
.korrel-galerij .korrel-beeld { position: relative; min-height: 0; }
.korrel-galerij .korrel-beeld img { position: absolute; inset: 0 4.5rem; width: calc(100% - 9rem); height: 100%; object-fit: contain; }
@media screen and (max-width: 767px) { .korrel-galerij .korrel-beeld img { inset: 0; width: 100%; } }
/* gsm: de korreltegels op crepi ook twee per rij */
@media screen and (max-width: 575px) {
  .finish-grid:has(> .finish-tile.is-zoom) { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .finish-tile.is-zoom .finish-name { font-size: 1rem; }
}
/* bijnoot in lopende tekst: kleiner en grijs, voor een zijsprong die niet over het onderwerp van de pagina gaat */
.article-body p.bijnoot { font-size: 0.95rem; color: #555; }   /* donkerder dan --dark-grey: ook leesbaar op een grijs vlak */
/* fotovenster: bij openen krijgt het venster zelf de focus (script), niet het kruisje; geen focusrand rond het venster */
.ref-galerij:focus { outline: none; }
/* websiteformulieren (lead-formulier.js): verborgen robotveld, melding onder de knop, bedankt-tekst, uploadkader bij slepen */
.form-val { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-melding { flex-basis: 100%; margin: 0; font-size: 1rem; }
.form-melding.is-fout { color: var(--red); font-weight: 700; }
.form-melding:empty { display: none; }
.form-bedankt { padding: var(--s2) 0; }
.form-bedankt h3 { font-size: 2rem; margin-bottom: 0.75rem; }
.form-bedankt p { font-size: 1.1rem; line-height: 1.5; max-width: 40rem; }
.form-upload.is-over { outline: 2px dashed var(--red); outline-offset: -6px; }
/* verzonden formulier: papieren vliegertje dat wegvliegt, daarna een bevestigingsvenster (lead-formulier.js) */
.vlieger { position: fixed; z-index: 400; width: 48px; height: 48px; pointer-events: none; color: var(--red); }
.vlieger svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.form-melding:not(.is-fout) { color: var(--black); font-weight: 700; }
.bedankt-dialog { margin: auto; width: min(32rem, calc(100vw - 2rem)); border: 0; border-radius: 0; padding: var(--s4) var(--s2) var(--s2);
  background: var(--white); color: var(--black); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.bedankt-dialog:focus { outline: none; }
.bedankt-dialog::backdrop { background: rgba(35, 31, 32, 0.6); }
.bedankt-dialog[open] { animation: bedankt-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes bedankt-in { from { opacity: 0; transform: translateY(1rem) scale(0.96); } to { opacity: 1; transform: none; } }
.bedankt-vink { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; background: var(--red); color: var(--white); display: grid; place-items: center; }
.bedankt-vink svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30; animation: bedankt-vink 0.45s ease-out 0.25s forwards; }
@keyframes bedankt-vink { to { stroke-dashoffset: 0; } }
.bedankt-dialog h2 { font-size: 2.2rem; line-height: 1.1; margin-bottom: 0.75rem; }
.bedankt-dialog p { font-size: 1.1rem; line-height: 1.5; margin: 0 auto 1.5rem; max-width: 26rem; }
.bedankt-ok { justify-content: center; }
.bedankt-sluit { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.5rem; height: 2.5rem; border: 0; padding: 0; background: none; cursor: pointer; color: var(--black); }
.bedankt-sluit::before, .bedankt-sluit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: currentColor; }
.bedankt-sluit::before { transform: translate(-50%, -50%) rotate(45deg); }
.bedankt-sluit::after { transform: translate(-50%, -50%) rotate(-45deg); }
.bedankt-sluit:hover { color: var(--red); }
.bedankt-sluit:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { .bedankt-dialog[open], .bedankt-vink svg { animation: none; stroke-dashoffset: 0; } }
/* verzendknop met de melding links ervan (lead-formulier.js); een uitgeschakelde knop is lichter */
.form-verzend { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem 1.25rem; }
.form-verzend .form-melding { flex: 0 1 auto; max-width: 22rem; text-align: right; font-size: 1rem; }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { opacity: 0.4; }
@media screen and (max-width: 767px) {
  .form-verzend { justify-self: start; justify-content: flex-start; flex-direction: column-reverse; align-items: flex-start; }
  .form-verzend .form-melding { flex: none; text-align: left; }
}
/* aftelling na verzenden: tekstballon boven de uitgeschakelde verzendknop, zoals de ballon van de belknop */
.knop-houder { position: relative; display: inline-flex; }
.knop-houder.is-wacht { cursor: not-allowed; }
.knop-houder.is-wacht .btn { pointer-events: none; }   /* zo krijgt de houder de muis en het tikken */
.knop-ballon { position: absolute; bottom: calc(100% + 0.75rem); left: 50%; transform: translate(-50%, 0.4rem); width: max-content; max-width: 16rem;
  padding: 0.5rem 0.8rem; background: var(--white); color: var(--black); border-radius: 0.75rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; line-height: 1.3; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 5; }
.knop-ballon::after { content: ''; position: absolute; left: 50%; top: calc(100% - 1px); margin-left: -0.4rem; border: 0.4rem solid transparent; border-top-color: var(--white); }
.knop-houder.is-wacht:hover .knop-ballon, .knop-houder.is-wacht.is-getoond .knop-ballon { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* aanraakschermen (Klaas, 07-10-2026): geen blauwe tikmarkering of tekstselectie bij tikken op knoppen, menu, logo en waaier;
   in de plaats een korte, subtiele reactie (iets lichter) zolang je drukt. Focusranden enkel bij toetsenbordgebruik. */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, [role="button"], .swatch-fan, .nav-toggle, .logo, .finish-tile, .chip { -webkit-touch-callout: none; }
button, [role="button"], .nav-toggle, .nav-dropdown-toggle, .logo, .footer-logo, .swatch-fan, .finish-tile.is-zoom, .tab-title, .faq-q, .chip, .slider-bullet, .hotspot, .knop-houder { -webkit-user-select: none; user-select: none; }
:focus:not(:focus-visible) { outline: none; }
@media (hover: none) {
  a:active, button:active, [role="button"]:active, .chip:active, .finish-tile:active { opacity: 0.7; transition: opacity 0s; }
  .nav-menu a:active, .nav-dropdown-menu a:active { opacity: 1; color: var(--red); }
}

/* tikzone van de bolletjes (13-10-2026): de regels voor actief/donker zetten "background:" opnieuw, wat background-clip
   terugzet naar border-box; zo blijft het zichtbare bolletje overal even groot */
.autoslider-dot, .slider-bullet { background-clip: content-box !important; }

/* waardebon: tekst niet selecteerbaar, het is een beeld (Klaas, 13-10-2026) */
.referral-bon-wrap, .referral-bon-wrap * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }