/* ============================================================
   ATTENT LOYALTY & REWARDS — stylesheet
   ------------------------------------------------------------
   Opbouw van dit bestand:
     0.  Lettertype (Inter, lokaal)
     1.  Variabelen (kleuren)      -> pas hier de huisstijl aan
     2.  Reset & basis
     3.  Herbruikbare onderdelen   (knoppen, iconen, highlight)
     4.  Navigatie
     5.  Hero
     6.  Vraagstukken
     7.  Logobalk "Vertrouwd door"
     8.  3 Domeinen
     9.  Over ons
     10. Cases
     11. Onze oplossingen
     12. Reviews (ticker)
     13. Product showcase
     14. Impact in cijfers
     15. Footer
     ------------------------------------------------------------
     Onderdelen die enkel op de subpagina's voorkomen:
     16. Video + tekst
     17. Flipkaarten
     18. Waarom Attent
     19. Slot-CTA
     20. Veelgestelde vragen
     21. Ingesloten formulier
     22. Citaat + tekst
     23. Gecentreerde nadruk
     24. Diensten
     25. Vakgebieden
     26. Juridische pagina (voorwaarden, privacy, cookies)
     27. Case-detail
     28. Team
     29. Gedeelde sectiekop
     30. Fotorij
     31. Videorij
     32. WhatsApp-knop
     33. Toestemmingsbanner
     34. Downloadblok (formulier + download)
     35. Momentenlijst
     36. Catalogusrek
     37. Filterbalk
     38. Mijlpalenschema
     39. Rekenblad
     40. Btw-rekensom (twee kanten naast elkaar)
     41. Kleine letters (onderaan een pagina)
     42. Schermen (schermafdrukken met bijschrift)
     43. Merkblok
     44. Logomuur (leveranciersnetwerk)
   ============================================================ */


/* ---------- 0. LETTERTYPE ----------------------------------
   Inter staat op onze eigen server, in de map \fonts. Er wordt dus
   niets opgehaald bij Google: dat scheelt laadtijd en het houdt de
   adressen van je bezoekers bij jou.

   Staan de bestanden er nog niet? Dubbelklik download-fonts.cmd.
   Zolang ze ontbreken valt de site netjes terug op het systeem-
   lettertype; de pagina blijft dus gewoon werken.

   Inter is een "variabel" lettertype: één bestand bevat alle diktes
   van 100 tot 900. Vandaar font-weight: 100 900 hieronder — dat is
   geen fout.                                                     */
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
/* Extra tekens (bv. Poolse of Turkse letters). Dit bestand wordt
   alleen opgehaald als er echt zo'n teken op de pagina staat. */
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- 1. VARIABELEN ---------------------------------- */
:root{
  --oranje:      #c15c26;   /* accentkleur Attent          */
  --navy:        #003555;   /* titels                      */
  --navy-donker: #013656;   /* footer achtergrond          */
  --navy-nav:    #002b49;   /* navigatie links             */
  --zwart:       #111111;
  --grijs:       #333333;
  --grijs-licht: #fafafa;   /* achtergrond afwisselende secties */
  --wit:         #ffffff;
  --lijn:        #e5e7eb;
  --grijs-blok:  #f9f9f9;   /* blokken binnen een witte sectie   */

  --max-breedte: 1200px;
}


/* ---------- 2. RESET & BASIS -------------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--zwart);
  background-color: var(--wit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* height:auto hoort bij de width en height die sinds de beeld-
   optimalisatie in élke <img> staan. Die twee getallen zijn er zodat
   de browser de ruimte al kent voor het beeld binnen is — de pagina
   springt dan niet meer op tijdens het laden.

   De keerzijde: zo'n height-attribuut zet ook echt de hoogte vast.
   Bij een beeld dat in de CSS alleen een breedte krijgt (of een
   aspect-ratio) zou het dan even hoog worden als het bestand zelf.
   Deze regel geeft de hoogte terug aan de CSS.

   Elke regel verderop die de hoogte wél bewust zet — .hero__slide img,
   .flipkaart__beeld img, .navbar__logo img en zo — wint hiervan,
   want die hebben een klasse in hun kiezer. Zie README punt 34. */
img{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3{ margin: 0; }

/* Nederlands zit vol lange samenstellingen
   ("gegevensbeschermingsautoriteit", "medewerkersbetrokkenheid").
   Past zo'n woord niet op een smal scherm, dan duwde het vroeger de
   hele pagina breder dan de telefoon — en kon je zijwaarts scrollen.
   Met de regel hieronder breekt zo'n woord af in plaats van uit te
   steken. Gewone tekst verandert er niet door: het gebeurt alleen
   als een woord echt niet past. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, td, th,
summary, blockquote, figcaption,
.citaat__spreuk, .citaat__titel{ overflow-wrap: break-word; }

/* Op smalle schermen mag zo'n woord met een koppelteken afbreken in
   plaats van er middenin. De browser gebruikt daarvoor de
   Nederlandse woordafbreking; daarom staat lang="nl-BE" bovenaan
   elke pagina. Enkel voor titels: in lopende tekst zou het te
   onrustig staan. */
@media (max-width: 768px){
  h1, h2, h3, h4,
  .citaat__spreuk, .citaat__titel{ hyphens: auto; }
}

ul{ list-style: none; padding: 0; margin: 0; }


/* ---------- 3. HERBRUIKBARE ONDERDELEN ---------------------- */
.highlight{ color: var(--oranje); }

/* Vinkje voor opsommingen */
.icon-check{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  fill: none;
  stroke: var(--oranje);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pijltje voor "Ontdek meer" / "Lees de case" */
.icon-arrow{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn{
  display: inline-block;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: all .2s ease;
}
.btn--primary{
  background-color: var(--oranje);
  border-color: var(--oranje);
  color: var(--wit);
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,.3);
  filter: brightness(110%);
}
.btn--outline{
  background-color: transparent;
  border-color: var(--wit);
  color: var(--wit);
}
.btn--outline:hover{
  background-color: var(--wit);
  color: var(--zwart);
  transform: translateY(-2px);
}
/* Grotere variant + navy omranding (gebruikt in de slot-CTA) */
.btn--groot{
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 5px;
}
.btn--navy{
  background-color: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--navy:hover{
  background-color: var(--navy);
  color: var(--wit);
  transform: translateY(-2px);
}


/* ---------- 4. NAVIGATIE ----------------------------------- */
.navbar{
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.navbar__inner{
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  height: 90px;
  padding: 0 30px;
  background-color: var(--grijs-licht);
}

.navbar__logo img{
  width: auto;
  height: 50px;
  object-fit: contain;
}

.navbar__menu{
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 30px;
}

.nav-item{
  position: relative;
  display: flex;
  align-items: center;
  height: 90px;
}
.nav-item + .nav-item{ margin-left: 30px; }

.nav-link{
  position: relative;
  z-index: 2001;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-nav);
  white-space: nowrap;
  transition: color .2s;
}
.nav-item:hover .nav-link{ color: var(--oranje); }

.nav-caret{
  font-size: 10px;
  line-height: 1;
  transition: transform .2s;
}
.nav-item:hover .nav-caret,
.lang:hover .nav-caret{ transform: rotate(180deg); }

/* Mega-menu */
.dropdown{
  position: absolute;
  top: 100%;
  right: 0;
  width: 600px;
  max-width: 90vw;
  background-color: var(--wit);
  box-shadow: 0 15px 30px rgba(0,0,0,.15);
  border-radius: 0 0 4px 4px;
  border-top: 4px solid var(--oranje);
  overflow: hidden;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-item:hover .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__head{
  display: grid;
  gap: 15px;
  padding: 12px 20px;
  background-color: var(--oranje);
  color: var(--wit);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}
.dropdown__body{
  display: grid;
  gap: 15px;
  padding: 20px;
  background-color: var(--wit);
  border-top: 1px solid #f0f0f0;
}
.dropdown--2 .dropdown__head,
.dropdown--2 .dropdown__body{ grid-template-columns: repeat(2, 1fr); }
.dropdown--3 .dropdown__head,
.dropdown--3 .dropdown__body{ grid-template-columns: repeat(3, 1fr); }

.dropdown__head > div{ white-space: nowrap; }

.dropdown__col{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown__col a{
  display: block;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--grijs);
  transition: color .2s;
}
.dropdown__col a:hover{ color: var(--oranje); }

/* Taalkeuze */
.navbar__actions{ display: flex; align-items: center; }

.lang{ position: relative; }
.lang__current{
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-nav);
}
.lang__current img{
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}
.lang__menu{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 25px;
  min-width: 120px;
  background-color: var(--wit);
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0,0,0,.15);
  overflow: hidden;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.lang:hover .lang__menu{ opacity: 1; visibility: visible; }

.lang__menu a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grijs);
  transition: background .2s;
}
.lang__menu a img{ width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.lang__menu a.is-active{ color: var(--oranje); background-color: #f9f9f9; }
.lang__menu a:hover{ background-color: #f5f5f5; }

/* Hamburger */
.navbar__toggle{
  display: none;
  margin-left: auto;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.navbar__toggle span{
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background-color: var(--navy-nav);
  transition: transform .2s, opacity .2s;
}

.mobile-menu{
  background-color: var(--grijs-licht);
  border-top: 1px solid #ececec;
  padding: 10px 30px 20px;
}
.mobile-menu a{
  display: block;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-nav);
  border-bottom: 1px solid #ececec;
}
/* Alleen een aanknopingspunt voor script.js punt 3; de lijst wordt
   daar opgebouwd en de opmaak komt van .mobile-menu a hierboven. */
.mobile-menu__lijst{ display: block; }

/* Uitklapbare submenu's op gsm.
   script.js punt 3 bouwt deze lijst op uit het desktopmenu hierboven,
   zodat je maar op één plaats een link hoeft toe te voegen. */
.mobile-menu__rij{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #ececec;
}
.mobile-menu__rij a{ flex: 1; border-bottom: 0; }
.mobile-menu__meer{
  flex: 0 0 auto;
  padding: 12px 6px;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: var(--navy-nav);
  cursor: pointer;
  transition: transform .2s ease;
}
.mobile-menu__meer[aria-expanded="true"]{ transform: rotate(180deg); }
.mobile-menu__sub{ padding: 4px 0 10px 14px; }
.mobile-menu__sub[hidden]{ display: none; }
.mobile-menu__sub a{
  padding: 11px 0;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-menu__groep{
  padding: 14px 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oranje);
}
.mobile-menu__lang{ display: flex; gap: 20px; padding-top: 10px; }
.mobile-menu__lang a{ display: flex; align-items: center; gap: 8px; border: 0; }
.mobile-menu__lang img{ width: 22px; height: 16px; object-fit: cover; border-radius: 2px; }

@media (max-width: 990px){
  .navbar__menu,
  .navbar__actions{ display: none; }
  .navbar__toggle{ display: block; }
}


/* ---------- 5. HERO ---------------------------------------- */
.hero{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 800px;
  background-color: var(--zwart);
  overflow: hidden;
}

.hero__slides{ position: absolute; inset: 0; z-index: 0; }

.hero__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.2s ease, transform 6s ease-out;
}
.hero__slide.is-active{
  opacity: 1;
  transform: scale(1);
}
.hero__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Donkere laag over het beeld — zet de opacity hoger als de tekst
   op een licht beeld te weinig contrast heeft. */
.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
}

.hero__content{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 120px 30px 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__text{ width: 100%; max-width: 800px; }

.hero h1{
  margin: 0 0 24px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--wit);
}

.hero__description{
  margin: 0 0 24px;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--wit);
  opacity: .9;
}

.hero__bullets{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.hero__bullets li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wit);
}

.hero__buttons{ display: flex; gap: 16px; flex-wrap: wrap; }

.hero__dots-outer{
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}
.hero__dots{
  width: 100%;
  max-width: var(--max-breedte);
  padding: 0 30px;
  display: flex;
  gap: 12px;
  pointer-events: auto;
}
.hero__dot{
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: all .3s ease;
}
.hero__dot.is-active{
  background: var(--oranje);
  border-color: var(--wit);
  transform: scale(1.2);
}

.hero__curve{
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.hero__curve svg{ width: 100%; height: 100px; display: block; }

@media (max-width: 768px){
  .hero h1{ font-size: 36px; }
  .hero__description,
  .hero__bullets li{ font-size: 16px; }
  .hero__content{ padding-left: 20px; padding-right: 20px; }
  .hero__dots{ padding: 0 20px; }
  .hero__buttons{ flex-direction: column; width: 100%; }
  .hero__buttons .btn{ width: 100%; text-align: center; }
}

/* Compacte variant van dezelfde hero: gebruikt als paginakop op de
   onderliggende pagina's. Eén beeld, geen bulletpoints of knoppen. */
.hero--pagina{
  min-height: 400px;
  justify-content: center;
}
.hero--pagina .hero__overlay{ opacity: .5; }
.hero--pagina .hero__content{
  justify-content: center;
  padding: 40px 30px 100px;
}
.hero--pagina h1{ margin-bottom: 16px; }
.hero--pagina .hero__description{ margin-bottom: 0; }
/* Knoppen onder de paginakop; op de homepage zit die marge al in
   het blok erboven, hier niet. */
.hero--pagina .hero__buttons{ margin-top: 28px; }
.hero--pagina .hero__curve svg{ height: 60px; }

@media (max-width: 768px){
  .hero--pagina{ min-height: auto; }
  .hero--pagina h1{ font-size: 28px; }
  .hero--pagina .hero__content{ padding: 80px 20px; }
  .hero--pagina .hero__curve{ display: none; }
}

/* Een paginakop met MENSEN op het beeld. Een gewone paginakop is 400 px
   hoog en toont het midden van de foto — bij een portret zie je dan de
   bustes en niet de gezichten. Deze variant maakt de kop wat hoger en
   legt het beeld hoger uit.
   Ander beeld erin? Dan is dat ene percentage het enige wat je moet
   bijregelen: LAGER = je ziet meer van de bovenkant van de foto,
   HOGER = meer van de onderkant. */
.hero--portret{ min-height: 480px; }
.hero--portret .hero__slide img{ object-position: center 15%; }

@media (max-width: 768px){
  .hero--portret{ min-height: auto; }
}


/* ---------- 6. VRAAGSTUKKEN -------------------------------- */
.vraagstukken{
  background-color: var(--wit);
  display: flex;
  justify-content: center;
}
.vraagstukken__container{
  /* De padding zit binnen de max-breedte: dat geeft dezelfde
     kaartbreedte (250px) als de originele site. */
  width: 100%;
  max-width: var(--max-breedte);
  padding: 84px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.vraagstukken__titel{
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}
.vraagstukken__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}
.vraagstukken__kaart{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  background-color: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--zwart);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vraagstukken__kaart:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
}
.vraagstukken__cta{
  background-color: var(--oranje);
  border: none;
  color: var(--wit);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.vraagstukken__cta:hover{
  transform: scale(1.02);
  box-shadow: 0 12px 24px rgba(220,107,47,.3);
}

@media (max-width: 960px){
  .vraagstukken__container{ padding: 64px 32px; }
  .vraagstukken__grid{ grid-template-columns: repeat(2, 1fr); }
  .vraagstukken__titel{ font-size: 28.8px; }
}
@media (max-width: 600px){
  .vraagstukken__container{ padding: 56px 20px; }
  .vraagstukken__grid{ grid-template-columns: 1fr; }
  .vraagstukken__titel{ font-size: 25.2px; }
  .vraagstukken__kaart{ padding: 24px 16px; }
}


/* ---------- 7. LOGOBALK ------------------------------------ */
.logobar{
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 60px;
  background-color: var(--wit);
}
.logobar__titel{
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #121212;
  white-space: nowrap;
}
.logobar__wrapper{
  flex: 1 1 300px;
  /* Zonder deze regel mag een flex-onderdeel niet kleiner worden dan
     zijn inhoud. De rij logo's is expres meters breed, dus dan werd
     de hele pagina meters breed mee. min-width: 0 zegt: krimp gerust,
     het venstertje hieronder knipt de rest toch weg. */
  min-width: 0;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.logobar__track{
  display: flex;
  align-items: center;
  gap: 60px;
  padding-left: 60px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.logobar__track:hover{ animation-play-state: paused; }

.logobar__item{
  flex-shrink: 0;
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .6;
  filter: grayscale(100%);
  transition: all .3s ease;
  cursor: pointer;
}
.logobar__item:hover{
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}
.logobar__item img{ width: 100%; height: 100%; object-fit: contain; }

/* Doorlopende animatie: script.js kopieert de rij, we schuiven
   precies één kopie op zodat het naadloos lijkt. */
@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-100% / var(--kopieen, 3))); }
}

@media (max-width: 768px){
  .logobar{ flex-direction: column; gap: 24px; padding: 40px 20px; }
  /* Onder elkaar gezet blijft het venstertje anders zo breed als de
     rij logo's zelf; width: 100% houdt hem binnen het scherm. */
  .logobar__wrapper{ width: 100%; }
}


/* ---------- 8. 3 DOMEINEN ---------------------------------- */
.domeinen{
  background-color: var(--grijs-licht);
  padding: 100px 64px;
}
.domeinen__container{
  max-width: var(--max-breedte);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.domeinen__hoofdtitel{
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--navy);
}
.domeinen__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}
.domeinen__kaart{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 32px;
  background-color: var(--wit);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.domeinen__kaart:hover{
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.domeinen__titel{
  margin: 0 0 32px;
  font-size: 20px;
  font-weight: 700;
  color: var(--oranje);
}
.domeinen__lijst-container{ flex-grow: 1; margin-bottom: 32px; }
.domeinen__lijst{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.domeinen__lijst li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--zwart);
}
/* Een kaart die nergens naartoe leidt: geen handje, geen optillen.
   (gebruikt bij missie, visie en kernwaarden) */
.domeinen__kaart--vast{ cursor: default; }
/* Een slotregel onder een lijstje in zo'n kaart heeft wat lucht nodig. */
.domeinen__kaart ul + p{ margin-top: 18px; }
.domeinen__kaart--vast:hover{ transform: none; box-shadow: 0 4px 20px rgba(0,0,0,.04); }

/* Een kaart met een gewone alinea in plaats van een opsomming
   (gebruikt bij missie, visie en kernwaarden). */
.domeinen__kaart p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grijs);
}

.domeinen__cta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--oranje);
  transition: gap .2s ease;
}
.domeinen__kaart:hover .domeinen__cta{ gap: 12px; }

@media (max-width: 1024px){
  .domeinen__grid{ grid-template-columns: repeat(2, 1fr); }
  /* Op tabletbreedte staan er twee kaarten naast elkaar en zakt de derde
     naar een eigen rij, gecentreerd onder de twee andere.
     De breedte moet hier met `width` gezet worden en niet met `max-width`:
     door `margin: 0 auto` krimpt een kaart anders tot de breedte van zijn
     eigen tekst, en dan is een kaart met weinig tekst smaller dan de rest.
     16px = de helft van de tussenruimte (gap: 32px). Wijzig je die gap,
     pas dan ook dit getal aan. */
  .domeinen__kaart:nth-child(3){
    grid-column: span 2;
    width: calc(50% - 16px);
    max-width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 768px){
  .domeinen{ padding: 64px 20px; }
  .domeinen__grid{ grid-template-columns: 1fr; }
  .domeinen__kaart:nth-child(3){ grid-column: span 1; width: 100%; }
  .domeinen__hoofdtitel{ font-size: 28.8px; }
  .domeinen__titel{ font-size: 18px; }
  .domeinen__kaart{ padding: 32px 24px; }
}


/* ---------- 9. OVER ONS ------------------------------------ */
.overons{
  background-color: var(--wit);
  padding: 100px 64px;
}
.overons__container{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.overons__afbeelding-container{
  width: 100%;
  display: flex;
  justify-content: center;
}
.overons__hoofdafbeelding{
  width: 100%;
  max-width: 550px;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  object-position: bottom;
  /* Zelfde afronding als de andere losse beelden op de site
     (teamkaarten, vakgebieden, video). Wil je hier toch scherpe
     hoeken, zet dan 0 in plaats van 12px. */
  border-radius: 12px;
}
.overons__content{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.overons__titel{
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy);
}
.overons__tekst{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--zwart);
}
.overons__team-rij{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
}
.overons__team-foto{
  width: 120px;
  height: 120px;
  object-fit: cover;
  background-color: #f3f4f6;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
}

@media (max-width: 960px){
  .overons{ padding: 64px 24px; }
  .overons__container{ grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .overons__team-rij{ justify-content: center; }
}
@media (max-width: 600px){
  .overons__titel{ font-size: 28.8px; }
  .overons__tekst{ font-size: 14.4px; }
  .overons__team-rij{
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 16px;
  }
  .overons__team-foto{ width: 90px; height: 90px; }
}


/* ---------- 10. CASES -------------------------------------- */
.cases{
  background-color: var(--grijs-licht);
  padding: 120px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cases__header{
  text-align: center;
  max-width: 800px;
  margin-bottom: 60px;
}
.cases__header h2{
  margin-bottom: 15px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.cases__header p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .9;
}
.cases__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
  max-width: var(--max-breedte);
}
.case-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--wit);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.case-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.1);
}
.case-card__image{
  position: relative;
  width: 100%;
  padding-top: 60%;          /* beeldverhouding 5:3 */
  overflow: hidden;
  background-color: #f0f0f0;
}
.case-card__image img{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.case-card:hover .case-card__image img{ transform: scale(1.05); }

.case-card__content{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 30px;
}
.case-card__tag{
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--oranje);
}
.case-card__title{
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zwart);
}
.case-card__text{
  flex-grow: 1;
  margin: 0 0 25px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .8;
}
.case-card__cta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--oranje);
  transition: gap .2s ease;
}
.case-card:hover .case-card__cta{ gap: 12px; }

@media (max-width: 1024px){
  .cases__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .cases{ padding: 80px 20px; }
  .cases__grid{ grid-template-columns: 1fr; }
  .cases__header h2{ font-size: 32px; }
}


/* ---------- 11. ONZE OPLOSSINGEN --------------------------- */
.oplossingen{
  background-color: var(--wit);
  padding: 100px 64px;
}
.oplossingen__container{
  max-width: var(--max-breedte);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.oplossingen__hoofdtitel-wrapper{
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px;
  gap: 24px;
}
.oplossingen__lijn{
  flex-grow: 1;
  height: 2px;
  background-color: var(--lijn);
}
.oplossingen__hoofdtitel{
  font-size: 36px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  white-space: nowrap;
}
/* ---------------------------------------------------------------
   DEELNEMERLIJN
   Eén lijn bovenaan /smiles/ voor mensen die een code kregen en
   eigenlijk smiles.gifts zoeken. Bewust smal en rustig: het is een
   wegwijzer, geen banner. Zelfde beige als de momentenlijst, zodat
   er geen kleur bijkomt.
   --------------------------------------------------------------- */
.deelnemerlijn{
  display: flex;
  justify-content: center;
  padding: 56px 30px 16px;
  background-color: var(--wit);
}
.deelnemerlijn__kader{
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 820px;
  padding: 24px 28px;
  background-color: #edeae3;
  border-radius: 16px;
}
.deelnemerlijn__icoon{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.deelnemerlijn__icoon svg{
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--oranje);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.deelnemerlijn__tekst{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
}
.deelnemerlijn__tekst strong{
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
}
.deelnemerlijn .btn{
  flex-shrink: 0;
  padding: 13px 24px;
  font-size: 15px;
}
@media (max-width: 767px){
  .deelnemerlijn{ padding: 40px 20px 8px; }
  .deelnemerlijn__kader{
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 28px 24px;
  }
}

/* white-space: nowrap hierboven houdt de titel op één regel tussen de twee
   streepjes. Dat werkt zolang de titel kort is ("Onze Oplossingen"), maar een
   langere titel wordt dan breder dan het scherm en duwt de hele pagina opzij.
   Vanaf 767px en smaller mag hij dus gewoon breken. (Onder 600px gebeurde dat
   al; dit trekt die grens op zodat er tussenin geen gat meer zit.) */
@media (max-width: 767px){
  .oplossingen__hoofdtitel{ white-space: normal; }
}
.oplossingen__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}
.oplossingen__kaart{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  background-color: var(--wit);
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,.03);
  transition: transform .3s ease, box-shadow .3s ease;
}
.oplossingen__kaart:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}
.oplossingen__icoon{
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
}
.oplossingen__icoon svg{
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--oranje);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oplossingen__kaart-titel{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zwart);
}
.oplossingen__kaart-tekst{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grijs);
}

@media (max-width: 1024px){
  .oplossingen__grid{ grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 600px){
  .oplossingen{ padding: 64px 20px; }
  .oplossingen__grid{ grid-template-columns: 1fr; }
  .oplossingen__hoofdtitel{ font-size: 28.8px; white-space: normal; }
  .oplossingen__lijn{ display: none; }
  /* Op de allersmalste toestellen (320 px) mag de kaart krimpen,
     anders duwt een lang woord in de titel hem breder dan het scherm. */
  .oplossingen__kaart{ padding: 32px 24px; min-width: 0; }
}


/* ---------- 12. REVIEWS ------------------------------------ */
.reviews{
  background-color: var(--grijs-licht);
  padding: 120px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.reviews__header{
  text-align: center;
  max-width: 800px;
  margin-bottom: 60px;
  padding: 0 20px;
}
.reviews__header h2{
  margin: 0 0 15px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.reviews__header p{
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .9;
}
.reviews__wrapper{
  width: 100%;
  display: flex;
  overflow-x: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.reviews__track{
  display: flex;
  gap: 30px;
  width: max-content;
  animation: marquee 50s linear infinite;
}
.reviews__track:hover{ animation-play-state: paused; }

.review-card{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 420px;
  padding: 40px;
  background-color: var(--wit);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.02);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.review-card:hover{
  box-shadow: 0 15px 40px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.1);
}
.review-card__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
}
.review-card__tag{
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--oranje);
  /* In de Framer-versie stond hier een ongeldige achtergrondkleur,
     waardoor het label transparant bleef. Wil je er een "pil" van
     maken, haal dan de regel hieronder uit commentaar: */
  /* background-color: rgba(193, 92, 38, .1); */
}
.icon-quote{
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  fill: var(--oranje);
  opacity: .1;
}
.review-card__quote{
  margin: 0 0 25px;
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
  color: var(--grijs);
  white-space: pre-line;
}
.review-card__divider{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.review-card__bullet{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--zwart);
}
.review-card__author{ display: flex; flex-direction: column; }
.review-card__name{
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--zwart);
}
.review-card__role{
  font-size: 14px;
  font-weight: 500;
  color: var(--grijs);
  opacity: .7;
}

@media (max-width: 768px){
  .reviews{ padding: 80px 0; }
  .reviews__header h2{ font-size: 32px; }
  .review-card{ width: 320px; padding: 30px 20px; }
  .reviews__wrapper{ -webkit-mask-image: none; mask-image: none; }
}


/* ---------- 13. PRODUCT SHOWCASE --------------------------- */
.showcase{
  position: relative;
  background-color: var(--wit);
  color: var(--zwart);
  padding: 120px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.showcase__header{
  text-align: center;
  max-width: 900px;
  margin-bottom: 60px;
  padding: 0 20px;
}
.showcase__header h2{
  margin-bottom: 15px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.showcase__header p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  opacity: .7;
}
.showcase__carousel{
  position: relative;
  width: 100%;
  padding: 10px 0;
  overflow: hidden;
}
.showcase__fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15vw;
  z-index: 2;
  pointer-events: none;
}
.showcase__fade--left{
  left: 0;
  background: linear-gradient(to right, var(--wit), transparent);
}
.showcase__fade--right{
  right: 0;
  background: linear-gradient(to left, var(--wit), transparent);
}
.showcase__track{
  display: flex;
  gap: 30px;
  padding-left: 30px;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.showcase__track:hover{ animation-play-state: paused; }

.showcase__card{
  flex: 0 0 auto;
  height: 350px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f0f0f0;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.showcase__card img{
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.showcase__bottom-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: var(--max-breedte);
  margin-top: 80px;
  padding: 40px 50px;
  background-color: var(--grijs-licht);
  border-radius: 16px;
}
.showcase__bottom-text{ flex: 1; }
.showcase__bottom-text h3{
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.showcase__bottom-text p{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  opacity: .7;
}
.showcase__cta{
  display: inline-block;
  padding: 16px 36px;
  background-color: var(--oranje);
  color: var(--wit);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
  transition: all .2s ease;
}
.showcase__cta:hover{
  transform: translateY(-2px);
  filter: brightness(110%);
}

@media (max-width: 960px){
  .showcase__bottom-bar{ flex-direction: column; text-align: center; padding: 40px 30px; }
}
@media (max-width: 600px){
  .showcase{ padding: 80px 20px; }
  .showcase__header h2{ font-size: 24px; }
  .showcase__card{ height: 245px; }
  .showcase__bottom-bar{ margin-top: 60px; padding: 30px 20px; }
  .showcase__bottom-text h3{ font-size: 22px; }
  .showcase__cta{ width: 100%; padding: 16px 20px; text-align: center; }
}


/* ---------- 14. IMPACT IN CIJFERS -------------------------- */
.stats{
  background-color: var(--grijs-licht);
  padding: 140px 60px;
  display: flex;
  justify-content: center;
}
.stats__container{
  width: 100%;
  max-width: var(--max-breedte);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.stats__left{ display: flex; flex-direction: column; }
.stats__title{
  margin-bottom: 24px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--navy);
}
.stats__desc{
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .8;
}
.stats__quote-box{
  margin-top: 10px;
  padding-left: 20px;
  border-left: 4px solid var(--oranje);
}
.stats__quote-text{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--oranje);
}
.stats__right{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.stat-card{
  display: flex;
  flex-direction: column;
  padding: 40px 30px;
  background-color: var(--wit);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.03);
  transition: transform .3s ease, box-shadow .3s ease;
}
.stat-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,.08);
}
.stat-card__icon{ margin-bottom: 20px; }
.stat-card__icon svg{
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--oranje);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-card__number{
  margin-bottom: 10px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--oranje);
}
.stat-card__title{
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--zwart);
}
.stat-card__desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grijs);
  opacity: .7;
}

@media (max-width: 960px){
  .stats{ padding: 100px 24px; }
  .stats__container{ grid-template-columns: 1fr; gap: 50px; }
  .stats__left{ max-width: 700px; }
}
@media (max-width: 600px){
  .stats{ padding: 80px 20px; }
  .stats__right{ grid-template-columns: 1fr; gap: 20px; }
  .stat-card{ padding: 30px 25px; }
  .stat-card__title{ font-size: 16px; }
}


/* ---------- 15. FOOTER ------------------------------------- */
.footer{
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 120px;
  background-color: var(--navy-donker);
}
.footer__curve{
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.footer__curve svg{ width: 100%; height: 60px; display: block; }

.footer__inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 0 20px;
}
.footer__col{
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1 1 260px;
}
.footer__col > div,
.footer__col > a{
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: #cccccc;
  opacity: .8;
  transition: opacity .2s, color .2s;
}
.footer__col > a:hover{ opacity: 1; color: var(--wit); }

.footer__logo img{ height: 40px; width: auto; object-fit: contain; margin-bottom: 10px; }

.footer__tagline{
  max-width: 300px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #cccccc;
  opacity: .8;
}
.footer__social{ display: flex; gap: 15px; margin-top: 10px; }
.footer__social a{
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .8;
  color: var(--wit);
  transition: opacity .2s;
}
.footer__social a:hover{ opacity: 1; }
.footer__social svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer__kop{
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--wit) !important;
  opacity: 1 !important;
}
.footer__btw{ margin-top: 10px; font-weight: 600; }

.footer__bottom{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 60px;
  padding: 20px;
  border-top: .8px solid #333333;
  opacity: .6;
  font-size: 12px;
  color: #cccccc;
}
.footer__bottom a:hover{ color: var(--wit); }

@media (max-width: 768px){
  .footer{ padding-top: 80px; }
  .footer__inner{ flex-direction: column; gap: 32px; }
}


/* ============================================================
   ONDERDELEN VAN DE SUBPAGINA'S
   ------------------------------------------------------------
   Alles hierboven wordt gedeeld met de homepage. Hieronder staan
   enkel de blokken die daar niet voorkomen.
   ============================================================ */


/* ---------- Afwijkende sectiemarges op subpagina's ----------
   De homepage heeft rond elke sectie een extra kader van
   20px/40px; de subpagina's gebruiken de volle breedte.
   Daarom deze twee correcties op <body class="subpagina">. */
.subpagina .vraagstukken{ padding: 64px 24px; }
.subpagina .vraagstukken__container{ padding: 0; }
.subpagina .reviews{ padding: 100px 0; }

@media (max-width: 960px){
  .subpagina .vraagstukken{ padding: 64px 32px; }
}
@media (max-width: 600px){
  .subpagina .vraagstukken{ padding: 56px 20px; }
}


/* ---------- 16. VIDEO + TEKST ------------------------------ */
.video-tekst{
  display: flex;
  justify-content: center;
  padding: 100px 30px;
  background-color: var(--grijs-licht);
}
.video-tekst__container{
  width: 100%;
  max-width: var(--max-breedte);
  display: flex;
  align-items: center;
  gap: 60px;
}

.video-tekst__video{
  flex: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f0f0f0;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.video-tekst__poster{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s ease;
}
.video-tekst__poster img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-tekst__poster:hover{ transform: scale(1.02); }
.video-tekst__play{
  position: relative;
  display: flex;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
  transition: all .3s ease;
}
.video-tekst__poster:hover .video-tekst__play{ transform: scale(1.1); }
.video-tekst__video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
  z-index: 1;
}

.video-tekst__content{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.video-tekst__content h2{
  margin: 0 0 32px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--navy);
}
.video-tekst__alineas{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-tekst__alineas p{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grijs);
}

/* Variant: een schermafbeelding in plaats van een video. Geen
   play-knop, geen vaste 16:9-verhouding — het beeld houdt zijn
   eigen hoogte, zodat er niets van weggesneden wordt. */
.video-tekst__video--stil{
  aspect-ratio: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  border: 1px solid var(--lijn);
}
.video-tekst__video--stil .video-tekst__poster{ position: static; cursor: default; }
.video-tekst__video--stil .video-tekst__poster:hover{ transform: none; }
.video-tekst__video--stil .video-tekst__poster img{ position: static; height: auto; }
.video-tekst__video--stil .video-tekst__play{ display: none; }

/* Beeld rechts in plaats van links. Op gsm komt het beeld altijd
   bovenaan, ongeacht deze variant. */
.video-tekst--omgekeerd .video-tekst__container{ flex-direction: row-reverse; }

@media (max-width: 992px){
  .video-tekst__container{ flex-direction: column; gap: 40px; }
  .video-tekst__video,
  .video-tekst__content{ width: 100%; flex: none; }
  .video-tekst--omgekeerd .video-tekst__container{ flex-direction: column; }
}
@media (max-width: 768px){
  .video-tekst{ padding: 60px 20px; }
  .video-tekst__content h2{ font-size: 28px; margin-bottom: 24px; }
}


/* ---------- 17. FLIPKAARTEN --------------------------------
   De kaart draait om bij hover (en bij toetsenbordfocus).      */
.flipkaarten{
  display: flex;
  justify-content: center;
  padding: 100px 30px;
  background-color: var(--wit);
}
.flipkaarten__grid{
  width: 100%;
  max-width: var(--max-breedte);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.flipkaart{
  height: 420px;
  width: 100%;
  perspective: 1500px;
  cursor: pointer;
}
.flipkaart__inner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.flipkaart:hover .flipkaart__inner,
.flipkaart:focus-within .flipkaart__inner{ transform: rotateY(180deg); }

.flipkaart__voor,
.flipkaart__achter{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flipkaart__voor{ background-color: var(--wit); }
.flipkaart__beeld{
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  background-color: #f0f0f0;
}
.flipkaart__beeld img{ width: 100%; height: 100%; object-fit: cover; }
.flipkaart__tekst{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}
.flipkaart__voor h3{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--oranje);
}
.flipkaart__voor p{
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: #555555;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flipkaart__meer{
  display: flex;
  align-items: center;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--oranje);
}
.flipkaart__meer svg{
  width: 16px;
  height: 16px;
  margin-left: 4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flipkaart__achter{
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 32px;
  background-color: var(--oranje);
  border: 2px solid var(--oranje);
  transform: rotateY(180deg);
}
.flipkaart__achter h3{
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wit);
}
.flipkaart__achter p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wit);
}

@media (max-width: 992px){
  .flipkaarten__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .flipkaarten{ padding: 60px 20px; }
  .flipkaarten__grid{ grid-template-columns: 1fr; }
  .flipkaart{ height: 378px; }
}


/* ---------- 18. WAAROM ATTENT ------------------------------ */
.waarom{
  display: flex;
  justify-content: center;
  padding: 120px 30px;
  background-color: var(--wit);
}
.waarom__container{
  width: 100%;
  max-width: var(--max-breedte);
  display: flex;
  align-items: flex-start;
  gap: 100px;
}
.waarom__intro{
  flex: 1;
  position: sticky;
  top: 120px;
}
.waarom__intro h2{
  margin: 0 0 32px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--navy);
}
.waarom__intro-tekst{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.waarom__intro-tekst p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .9;
}

.waarom__grid{
  flex: 1.5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--grijs-blok);
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}
.waarom__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.waarom__icoon{
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.waarom__icoon svg{
  width: 28px;
  height: 28px;
  fill: var(--oranje);
}
.waarom__item h3{
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zwart);
}
.waarom__item p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grijs);
  opacity: .8;
}

@media (max-width: 1100px){
  .waarom__container{ flex-direction: column; align-items: stretch; gap: 32px; }
  .waarom__intro,
  .waarom__grid{ flex: none; width: 100%; position: static; }
}
@media (max-width: 768px){
  .waarom{ padding: 80px 20px; }
  .waarom__grid{ grid-template-columns: repeat(2, 1fr); }
  .waarom__intro h2{ font-size: 24px; }
}
@media (max-width: 540px){
  .waarom__grid{ grid-template-columns: 1fr; }
}


/* ---------- 19. SLOT-CTA ----------------------------------- */
.slot-cta{
  display: flex;
  justify-content: center;
  padding: 120px 30px;
  text-align: center;
  background-color: var(--grijs-blok);
}
.slot-cta__container{
  width: 100%;
  max-width: var(--max-breedte);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slot-cta h2{
  max-width: 900px;
  margin: 0 0 48px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
/* Optionele alinea tussen de titel en de knoppen. */
.slot-cta__tekst{
  max-width: 700px;
  margin: -24px 0 40px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grijs);
}
.slot-cta__knoppen{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 768px){
  .slot-cta{ padding: 80px 20px; }
  .slot-cta h2{ font-size: 28px; margin-bottom: 40px; }
  .slot-cta__knoppen{ flex-direction: column; width: 100%; }
  .slot-cta__knoppen .btn{ width: 100%; }
}


/* ---------- 20. VEELGESTELDE VRAGEN ------------------------
   Gebouwd met <details>/<summary>: open- en dichtklappen werkt
   in de browser zelf, daar is geen JavaScript voor nodig.      */
.faq{
  display: flex;
  justify-content: center;
  padding: 100px 30px;
  background-color: var(--wit);
}
.faq__container{
  width: 100%;
  max-width: 800px;
}
.faq h2{
  margin: 0 0 60px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--navy);
}
.faq__item{
  padding: 24px 0;
  border-bottom: 1px solid #eeeeee;
}
.faq__vraag{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--oranje);
}
.faq__vraag::-webkit-details-marker{ display: none; }
.faq__icoon{
  display: flex;
  flex-shrink: 0;
  color: var(--oranje);
  transition: transform .2s ease;
}
.faq__icoon svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq__item[open] .faq__icoon{ transform: rotate(180deg); }
.faq__antwoord{
  max-width: 90%;
  padding-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
}
/* Een langer antwoord mag alinea's, een opsomming en links
   bevatten. Deze regels zorgen dat dat leesbaar blijft. */
.faq__antwoord p{ margin: 0 0 14px; }
.faq__antwoord p:last-child{ margin-bottom: 0; }
.faq__antwoord ol,
.faq__antwoord ul{
  margin: 14px 0;
  padding-left: 22px;
  list-style: decimal;
}
.faq__antwoord ul{ list-style: disc; }
.faq__antwoord li{ margin-bottom: 8px; }
.faq__antwoord li:last-child{ margin-bottom: 0; }
.faq__antwoord a{
  color: var(--oranje);
  text-decoration: underline;
}

/* Een inleidende zin onder de titel, boven de vragen. */
.faq__intro{
  max-width: 720px;
  margin: -40px auto 44px;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  color: var(--grijs);
}
.faq__intro a{ color: var(--oranje); text-decoration: underline; }

@media (max-width: 768px){
  .faq{ padding: 60px 20px; }
  .faq h2{ font-size: 27px; margin-bottom: 40px; }
  .faq__vraag{ font-size: 18px; }
}


/* ---------- 21. INGESLOTEN FORMULIER -----------------------
   Het contactformulier komt van Teamleader. De <iframe> staat in
   de HTML; wil je het venster hoger of lager, pas dan de
   height in die <iframe> aan (of de regel hieronder).          */
.formulier{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--wit);
}
.formulier iframe{
  display: block;
  width: 100%;
  border: 0;
}


/* ---------- 22. CITAAT + TEKST ----------------------------- */
.citaat{
  display: flex;
  justify-content: center;
  padding: 60px 30px;
  background-color: var(--wit);
}
.citaat__container{
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  min-width: 0;
}
.citaat__links,
.citaat__rechts{ min-width: 0; }
.citaat__links{
  flex: 1;
  text-align: right;
}
.citaat__spreuk{
  margin: 0;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.citaat__rechts{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.citaat__titel{
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--zwart);
}
.citaat__tekst{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .9;
}

@media (max-width: 960px){
  .citaat__container{ flex-direction: column; gap: 30px; }
  .citaat__links{ text-align: left; }
  /* Onder elkaar nemen de twee kolommen anders de breedte van hun
     langste woord aan; width: 100% houdt ze binnen het scherm. */
  .citaat__links,
  .citaat__rechts{ width: 100%; }
}
@media (max-width: 768px){
  .citaat{ padding: 60px 20px; }
  .citaat__spreuk{ font-size: 32px; }
  .citaat__titel{ font-size: 28px; }
  .citaat__tekst{ font-size: 15px; }
}


/* ---------- 23. GECENTREERDE NADRUK ------------------------ */
.nadruk{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 20px;
  background-color: var(--wit);
}
.nadruk__container{
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.nadruk__boven{
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}
.nadruk__hoofd{
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #000000;
}

/* Een toelichting onder de nadrukzin. Optioneel: laat je hem weg,
   dan blijft het blok gewoon de twee regels tonen. */
.nadruk__tekst{
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grijs);
}

@media (max-width: 768px){
  .nadruk{ padding: 60px 20px; }
  .nadruk__boven{ font-size: 20px; }
  .nadruk__hoofd{ font-size: 28px; }
}
@media (max-width: 768px){
  .nadruk__tekst{ font-size: 15px; }
}


/* ---------- 24. DIENSTEN ----------------------------------- */
.diensten{
  display: flex;
  justify-content: center;
  padding: 100px 30px;
  background-color: var(--grijs-licht);
}
.diensten__container{
  width: 100%;
  max-width: 1300px;
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.diensten__intro{
  flex: 1;
  max-width: 480px;
  position: sticky;
  top: 120px;
}
.diensten__intro h2{
  margin: 0 0 24px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.diensten__tekst{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--grijs);
}
.diensten__grid{
  flex: 1.8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}
.diensten__item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.diensten__icoon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 8px;
  /* In Framer staat hier een ongeldige kleurwaarde, waardoor het
     vlakje achter het icoon onzichtbaar blijft. Wil je het tintje
     wél? Haal de regel hieronder uit commentaar. */
  /* background-color: rgba(193, 92, 38, .1); */
}
.diensten__icoon svg{
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--oranje);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diensten__item h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zwart);
}
.diensten__item p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grijs);
  opacity: .9;
}

@media (max-width: 1024px){
  .diensten__container{ flex-direction: column; gap: 60px; }
  .diensten__intro{ max-width: 100%; position: static; }
  .diensten__grid{ width: 100%; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .diensten{ padding: 60px 20px; }
  .diensten__intro h2{ font-size: 28px; }
  .diensten__tekst{ font-size: 14px; }
}
@media (max-width: 560px){
  .diensten__grid{ grid-template-columns: 1fr; gap: 30px; }
}


/* ---------- 25. VAKGEBIEDEN -------------------------------- */
.vakgebieden{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 30px;
  background-color: var(--wit);
  overflow: hidden;
}
.vakgebieden__container{
  width: 100%;
  max-width: var(--max-breedte);
  display: flex;
  flex-direction: column;
}
.vakgebieden__header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 80px;
  text-align: center;
}
.vakgebieden__titel{
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.vakgebieden__ondertitel{
  max-width: 900px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .9;
  text-wrap: balance;
}

/* Beeld en tekst wisselen om de beurt van kant. Let op: de header
   telt mee als eerste kind, dus de EERSTE rij is "even". */
.vakgebieden__rij{
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 100px;
}
.vakgebieden__rij:last-child{ margin-bottom: 0; }
.vakgebieden__container > .vakgebieden__rij:nth-child(even){ flex-direction: row-reverse; }

.vakgebieden__tekst{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.vakgebieden__blok-titel{
  margin: 0 0 24px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #121212;
}
.vakgebieden__lijst{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vakgebieden__lijst li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grijs);
}
.vakgebieden__beeld{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vakgebieden__beeld img{
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.08));
  transition: transform .4s ease;
}
@media (hover: hover){
  .vakgebieden__beeld img:hover{ transform: translateY(-10px); }
}

@media (max-width: 960px){
  .vakgebieden__rij,
  .vakgebieden__container > .vakgebieden__rij:nth-child(even){
    flex-direction: column;
    gap: 40px;
    margin-bottom: 80px;
  }
  .vakgebieden__header{ margin-bottom: 50px; }
}
@media (max-width: 768px){
  .vakgebieden{ padding: 60px 20px; }
  .vakgebieden__titel{ font-size: 32px; }
  .vakgebieden__ondertitel{ font-size: 16px; }
  .vakgebieden__blok-titel{ font-size: 28px; }
  .vakgebieden__lijst li{ font-size: 15px; }
}


/* ---------- 26. JURIDISCHE PAGINA --------------------------
   Gebruikt voor de Algemene Voorwaarden en het Privacybeleid.
   Links een meescrollend inhoudsmenu, rechts de tekst.         */
.juridisch{
  padding: 120px 20px;
  background-color: var(--wit);
  color: #121212;
}
.juridisch__container{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 60px;
  align-items: start;
}
/* Zelfde verhaal als bij de logobalk: het tekstblok mag krimpen. */
.juridisch__container > article{ min-width: 0; }

.juridisch__nav{
  position: sticky;
  top: 120px;
  padding-left: 20px;
  /* In Framer staat hier een ongeldige kleurwaarde, waardoor het
     streepje links onzichtbaar blijft. Wil je het wél?
     Haal de regel hieronder uit commentaar. */
  /* border-left: 1px solid rgba(193, 92, 38, .2); */
}
.juridisch__nav-kop{
  margin: 0 0 15px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--oranje);
}
.juridisch__nav a{
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: #121212;
  opacity: .7;
  transition: opacity .2s, color .2s;
}
.juridisch__nav a:hover{ opacity: 1; color: var(--oranje); }

.juridisch h1{
  margin: 0 0 10px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--oranje);
}
.juridisch__datum{
  margin: 0 0 60px;
  font-size: 14px;
  opacity: .5;
}
.juridisch__blok{ margin-bottom: 50px; }
.juridisch__blok:last-child{ margin-bottom: 0; }
.juridisch__blok h2{
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--oranje);
  /* Zelfde ongeldige kleurwaarde als hierboven; activeer voor een
     fijn lijntje onder elke titel. */
  /* border-bottom: 1px solid rgba(193, 92, 38, .13); */
}
.juridisch__blok p{
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}
/* Staan er meerdere alinea's onder elkaar in één hoofdstuk, dan
   houden ze onderling wat lucht. */
.juridisch__blok p + p{ margin-top: 16px; }

/* Een technische naam in de lopende tekst, bv. de naam van een
   cookie. */
.juridisch__blok code{
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--grijs-blok);
  border: 1px solid var(--lijn);
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}

/* Een tussentitel binnen een hoofdstuk (bv. 5.1, 5.2, …). */
.juridisch__blok h3{
  margin: 28px 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
}
.juridisch__blok h3:first-child{ margin-top: 0; }

/* Een opsomming binnen een hoofdstuk. */
.juridisch__blok ul{
  margin: 16px 0 0;
  padding-left: 22px;
  list-style: disc;
}
.juridisch__blok li{
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.8;
}
.juridisch__blok li:last-child{ margin-bottom: 0; }

/* Een tabel binnen een hoofdstuk (bv. de lijst geplaatste cookies).
   De omhulling laat de tabel apart schuiven op een smal scherm, zodat
   de pagina zelf nooit horizontaal moet schuiven. */
.juridisch__tabelwrap{ margin-top: 20px; overflow-x: auto; }
.juridisch__tabel{
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
}
.juridisch__tabel th,
.juridisch__tabel td{
  padding: 12px 14px;
  text-align: left;
  line-height: 1.5;
  border-bottom: 1px solid var(--lijn);
}
.juridisch__tabel th{
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.juridisch__tabel tr:last-child td{ border-bottom: none; }

@media (max-width: 800px){
  .juridisch{ padding: 80px 20px; }
  .juridisch__container{ grid-template-columns: 1fr; gap: 0; }
  .juridisch__nav{ display: none; }
  .juridisch h1{ font-size: 34px; }
}


/* ---------- 27. CASE-DETAIL -------------------------------- */
.case-detail{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px;
  background-color: var(--wit);
}
.case-detail__header{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin-bottom: 60px;
  text-align: center;
}
.case-detail__header h1{
  margin: 0 0 15px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
}
.case-detail__header h2{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
}

.case-detail__media{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin-bottom: 60px;
}
.case-detail__hoofdbeeld{
  width: 100%;
  max-width: 800px;
  margin-bottom: 40px;
}
.case-detail__galerij{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  padding: 10px 0;
}
.case-detail__galerij img{
  width: 100%;
  aspect-ratio: 235 / 414;
  object-fit: cover;
  border-radius: 5px;
}

.case-detail__tekst{
  width: 100%;
  max-width: 800px;
}
.case-detail__tekst p{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grijs);
}

@media (max-width: 900px){
  .case-detail__galerij{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .case-detail{ padding: 60px 20px; }
  .case-detail__header h1{ font-size: 32px; }
  .case-detail__header{ margin-bottom: 40px; }
}
@media (max-width: 520px){
  .case-detail__galerij{ grid-template-columns: 1fr; }
}


/* ---------- 28. TEAM --------------------------------------- */
.team{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 30px;
  background-color: var(--grijs-licht);
}
.team__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  width: 100%;
  max-width: var(--max-breedte);
}
.team__lid{
  display: flex;
  flex-direction: column;
  background-color: var(--wit);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.team__lid:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.1);
}
/* Alle teamfoto's krijgen hetzelfde kader, zodat de kaarten netjes op
   één lijn staan ook al zijn de bestanden niet even groot. Wat niet
   past wordt bijgesneden, en wel vanaf de ONDERkant (`top center`) —
   zo blijven de gezichten altijd staan.
   Lever je foto's het liefst staand aan in verhouding 4 op 5
   (bv. 800 x 1000 px); dan valt er niets weg. */
.team__foto{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  background-color: #f0f0f0;
}
.team__tekst{ padding: 24px; }
.team__naam{
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zwart);
}
.team__rol{
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--oranje);
}
.team__lid p{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grijs);
}

@media (max-width: 1024px){
  .team__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .team{ padding: 60px 20px; }
}
@media (max-width: 520px){
  .team__grid{ grid-template-columns: 1fr; }
}


/* ---------- 29. GEDEELDE SECTIEKOP -------------------------- */
/* Een gecentreerde titel met eventueel een inleidende alinea.
   Wordt gebruikt door het team-, foto- en videoblok, zodat die
   koppen gegarandeerd identiek blijven. */
.sectiekop{
  max-width: 800px;
  margin-bottom: 60px;
  text-align: center;
}
.sectiekop h2{
  margin: 0 0 15px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.sectiekop p{
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .9;
}
.sectiekop p:last-child{ margin-bottom: 0; }

/* Staat er een sectiekop binnen een blok dat zelf al met `gap`
   werkt, dan hoeft de ondermarge er niet nog eens bovenop. */
.oplossingen__container .sectiekop{ margin-bottom: 0; }

@media (max-width: 768px){
  .sectiekop{ margin-bottom: 40px; }
  .sectiekop h2{ font-size: 28px; }
}


/* Variant: kop links uitgelijnd in plaats van gecentreerd. Voor
   blokken waar de inhoud eronder ook links begint (het
   mijlpalenschema, het rekenblad). */
.sectiekop--links{
  margin-left: 0;
  margin-bottom: 28px;
  text-align: left;
}

/* ---------- 30. FOTORIJ ------------------------------------- */
/* Een rij liggende sfeerbeelden onder een sectiekop. Een beeld
   bijzetten of weghalen is één <img> kopiëren of wissen; de rij
   verdeelt zich vanzelf (4 kolommen, 2 op tablet, 1 op gsm). */
.fotorij{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 30px;
  background-color: var(--wit);
}
.fotorij__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: var(--max-breedte);
}
.fotorij__grid img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Drie in plaats van vier op een rij. Handig bij 3 of 6 beelden:
   dan blijft er geen half lege rij over. */
.fotorij__grid--drie{ grid-template-columns: repeat(3, 1fr); }

/* Vierkante tegels in plaats van liggende. */
.fotorij__grid--vierkant img{ aspect-ratio: 1 / 1; }

/* Staan er twee fotorijen onder elkaar, geef de tweede dan de
   lichtgrijze achtergrond zodat ze niet in elkaar overlopen. */
.fotorij--grijs{ background-color: var(--grijs-licht); }

@media (max-width: 1024px){
  .fotorij__grid,
  .fotorij__grid--drie{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .fotorij{ padding: 60px 20px; }
}
@media (max-width: 520px){
  .fotorij__grid,
  .fotorij__grid--drie{ grid-template-columns: 1fr; }
}


/* ---------- 31. VIDEORIJ ------------------------------------ */
/* Twee of meer filmpjes naast elkaar. De kaders zelf zijn exact
   dezelfde als bij "video + tekst" (.video-tekst__video), dus een
   filmpje start hier op precies dezelfde manier: pas bij een klik
   wordt de speler geladen. */
.videorij{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 30px;
  background-color: var(--grijs-licht);
}
.videorij__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 100%;
  max-width: var(--max-breedte);
}
.videorij__item{ display: flex; flex-direction: column; gap: 16px; }
.videorij__titel{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
}
.videorij__duur{
  font-size: 14px;
  font-weight: 600;
  color: var(--oranje);
}

@media (max-width: 768px){
  .videorij{ padding: 60px 20px; }
  .videorij__grid{ grid-template-columns: 1fr; gap: 32px; }
}


/* ---------- 32. WHATSAPP-KNOP ------------------------------- */
/* Zweeft rechtsonder op elke pagina. De knop komt uit
   onderdelen/voet.html — daar staat ook het telefoonnummer.
   Op een smal scherm wordt het een rond knopje zonder tekst, zodat
   hij niet in de weg zit. */
.wa-knop{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  background-color: #25d366;
  color: var(--wit);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-knop:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
.wa-knop svg{
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.wa-knop__tekst{ white-space: nowrap; }

/* Wie liever geen animatie ziet, krijgt er geen. */
@media (prefers-reduced-motion: reduce){
  .wa-knop{ transition: none; }
  .wa-knop:hover{ transform: none; }
}

@media (max-width: 768px){
  .wa-knop{
    right: 16px;
    bottom: 16px;
    padding: 0;
    width: 56px;
    height: 56px;
    justify-content: center;
  }
  .wa-knop__tekst{ display: none; }
}


/* ---------- 33. TOESTEMMINGSBANNER -------------------------- */
/* De cookiebanner onderaan. De markup staat in
   onderdelen/voet.html, de werking in toestemming.js.

   Let op bij het aanpassen: "Alles weigeren" moet even groot en
   even opvallend blijven als "Alles aanvaarden". Weigeren mag niet
   moeilijker zijn dan aanvaarden — dat is geen stijlkeuze maar een
   vereiste. */
.toestemming{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 20px;
  background-color: rgba(0, 43, 73, .35);
  backdrop-filter: blur(2px);
}
.toestemming__kader{
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 32px;
  background-color: var(--wit);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.toestemming__titel{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--navy);
}
.toestemming__tekst{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--grijs);
}
.toestemming__tekst a{
  color: var(--oranje);
  text-decoration: underline;
}

/* Het uitklapbare deel met de drie categorieën. */
.toestemming__voorkeuren{
  margin-top: 22px;
  padding-top: 6px;
  border-top: 1px solid var(--lijn);
}
.toestemming__regel{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lijn);
  cursor: pointer;
}
.toestemming__regel:last-child{ border-bottom: none; }
.toestemming__regel input{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--oranje);
  cursor: pointer;
}
.toestemming__regel input:disabled{ cursor: default; opacity: .55; }
.toestemming__regel span{
  font-size: 14px;
  line-height: 1.6;
  color: var(--grijs);
}
.toestemming__regel strong{
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--zwart);
}

.toestemming__knoppen{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.toestemming__knoppen .btn{
  padding: 13px 24px;
  font-size: 15px;
}
/* "Zelf instellen" is bewust een tekstknop: het is geen keuze op
   zich, maar een weg naar de schakelaars. */
.toestemming__link{
  padding: 13px 4px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}
.toestemming__link:hover{ color: var(--oranje); }

/* "Bewaar mijn keuze" hoort bij de schakelaars en verschijnt dus
   pas samen met het uitgeklapte deel. */
.toestemming__bewaren{ display: none; }
.toestemming__voorkeuren:not([hidden]) ~ .toestemming__knoppen .toestemming__bewaren{
  display: inline-block;
}

/* Zolang de banner openstaat zit de WhatsApp-knop in de weg. */
.toestemming-open .wa-knop{ display: none; }

@media (max-width: 768px){
  .toestemming{ padding: 0; }
  .toestemming__kader{
    padding: 24px 20px;
    border-radius: 16px 16px 0 0;
    max-height: 88vh;
    overflow-y: auto;
  }
  .toestemming__knoppen{ flex-direction: column; align-items: stretch; }
  .toestemming__knoppen .btn,
  .toestemming__link{ width: 100%; text-align: center; }
}


/* ---------- 34. DOWNLOADBLOK -------------------------------- */
/* Een formulier waarna de downloadknop verschijnt. De werking zit
   in script.js, punt 7. */
.downloadblok{
  display: flex;
  justify-content: center;
  padding: 100px 30px;
  background-color: var(--grijs-licht);
}
.downloadblok__kader{
  width: 100%;
  max-width: 620px;
  padding: 44px 48px;
  background-color: var(--wit);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.07);
}
.downloadblok h2{
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--navy);
}
.downloadblok__intro{
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--grijs);
}

.downloadblok__veld{
  display: block;
  margin-bottom: 18px;
}
.downloadblok__veld span{
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--zwart);
}
.downloadblok__veld input{
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--zwart);
  background-color: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 6px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.downloadblok__veld input:focus{
  outline: none;
  border-color: var(--oranje);
  box-shadow: 0 0 0 3px rgba(193, 92, 38, .15);
}
.downloadblok__veld input:invalid:not(:placeholder-shown){ border-color: #c0392b; }

.downloadblok__form .btn{ margin-top: 8px; cursor: pointer; border: 2px solid transparent; font-family: inherit; }

/* De melding als er iets ontbreekt. */
.downloadblok__fout{
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #8e2b1c;
  background-color: #fdeeea;
  border-radius: 6px;
}

/* Wat er na het verzenden verschijnt. */
.downloadblok__klaar{ text-align: center; }
.downloadblok__vinkje{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background-color: #eaf6ee;
}
.downloadblok__vinkje svg{
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #2e7d4f;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.downloadblok__klaar p{
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--grijs);
}

@media (max-width: 768px){
  .downloadblok{ padding: 60px 20px; }
  .downloadblok__kader{ padding: 32px 24px; }
  .downloadblok h2{ font-size: 24px; }
  .downloadblok__form .btn{ width: 100%; text-align: center; }
}


/* ---------- 35. MOMENTENLIJST ------------------------------- */
/* Een lange reeks korte begrippen als "pillen". Leest een pak
   vlotter dan dezelfde reeks als een alinea met komma's.
   Een moment bijzetten is één <li> kopieren. */
.momenten{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 30px;
  background-color: #edeae3;
}
.momenten__lijst{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: var(--max-breedte);
  list-style: none;
  padding: 0;
  margin: 0;
}
.momenten__lijst li{
  padding: 9px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--navy);
  background-color: var(--wit);
  border: 1px solid rgba(0, 53, 85, .08);
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.momenten__lijst li:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
}

@media (prefers-reduced-motion: reduce){
  .momenten__lijst li{ transition: none; }
  .momenten__lijst li:hover{ transform: none; }
}

@media (max-width: 768px){
  .momenten{ padding: 60px 20px; }
  .momenten__lijst{ gap: 8px; }
  .momenten__lijst li{ padding: 8px 13px; font-size: 14px; }
}


/* ---------- 36. CATALOGUSREK -------------------------------- */
/* Een rek met cataloguskaften die naar de online bladerversie
   linken. Een catalogus bijzetten of weghalen is één <a>-blok
   kopiëren of wissen; het rek verdeelt zich vanzelf. */
.catalogi{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 30px;
  background-color: var(--grijs-licht);
}
.catalogi__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
  width: 100%;
  max-width: var(--max-breedte);
}
.catalogi__item{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.catalogi__item img{
  width: 100%;
  /* Kaften zijn zo goed als altijd A4; dat houdt het rek recht
     ook als één beeld iets afwijkt. */
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  border-radius: 8px;
  background-color: #f0f0f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transition: transform .3s ease, box-shadow .3s ease;
}
.catalogi__item:hover img{
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.catalogi__naam{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--navy);
}
.catalogi__item:hover .catalogi__naam{ color: var(--oranje); }

/* Het filterscript (script.js punt 8) verbergt een item met
   item.hidden = true. Zonder deze regel wint display:flex hierboven
   van het hidden-attribuut en lijkt de filter stuk. Dezelfde valkuil
   als bij de logomuur, punt 44. */
.catalogi__item[hidden]{ display: none; }

/* Het richtbudget onder de naam van een geschenkbox. Bewust geen
   prijs: die hangt aan het volume — zie zakengeschenken.html. */
.catalogi__budget{
  margin-top: -6px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: var(--grijs);
  opacity: .85;
}

@media (prefers-reduced-motion: reduce){
  .catalogi__item img{ transition: none; }
  .catalogi__item:hover img{ transform: none; }
}

@media (max-width: 1024px){
  .catalogi__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .catalogi{ padding: 60px 20px; }
  .catalogi__grid{ grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .catalogi__naam{ font-size: 14px; }
}

/* Twee kaarten naast elkaar in plaats van drie. */
.domeinen__grid--twee{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px){
  .domeinen__grid--twee{ grid-template-columns: 1fr; }
}


/* ---------- 37. FILTERBALK ---------------------------------- */
/* Knoppen die een rij beelden filteren. De werking zit in
   script.js, punt 8. Werkt samen met elk blok waarvan de items
   een data-groep meekrijgen.

   Zonder JavaScript blijft gewoon alles zichtbaar — dan is er
   niets stuk, je kan enkel niet filteren. */
.filterbalk{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.filterbalk button{
  padding: 10px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background-color: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.filterbalk button:hover{ border-color: var(--oranje); color: var(--oranje); }
.filterbalk button[aria-pressed="true"]{
  background-color: var(--oranje);
  border-color: var(--oranje);
  color: var(--wit);
}

/* Vierkante tegels in het rek, voor producten in plaats van
   cataloguskaften. */
.catalogi--producten .catalogi__item img{ aspect-ratio: 1 / 1; }
.catalogi--producten{ background-color: var(--wit); }

@media (max-width: 768px){
  .filterbalk{ gap: 8px; margin-bottom: 32px; }
  .filterbalk button{ padding: 9px 15px; font-size: 14px; }
}


/* ---------- 38. MIJLPALENSCHEMA ---------------------------- */
/* Een ladder van dienstjaren: per rij het jaar, waar de medewerker
   staat, wat het moment moet zeggen en een richtbudget. Het is geen
   <table> maar een grid, zodat de rijen op gsm netjes onder elkaar
   zakken in plaats van zijwaarts te moeten schuiven.

   Een mijlpaal bijzetten = één .mijlpalen__rij kopiëren.
   De twee rijen met een eigen RSZ-regeling krijgen er
   `mijlpalen__rij--rsz` bij; die kleuren lichtjes op.

   Variant: `mijlpalen--vergelijk` zet het blok op drie kolommen in
   plaats van vier. Dat gebruiken we voor de fiscale vergelijking. */
.mijlpalen{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 30px;
  background-color: var(--wit);
}
.mijlpalen__container{
  width: 100%;
  max-width: var(--max-breedte);
}
.mijlpalen__intro{
  max-width: 760px;
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grijs);
}

/* De rijen. Eén grid-definitie voor de kop en voor elke rij, zodat
   de kolommen gegarandeerd uitlijnen. */
.mijlpalen__rij{
  display: grid;
  grid-template-columns: 130px 1fr 1.4fr 190px;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--lijn);
}
.mijlpalen__rij--kop{
  padding-top: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--navy);
}
.mijlpalen__rij--kop span{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
}
.mijlpalen__rij--rsz{
  background-color: #fbf4e4;
}
.mijlpalen__rij:last-of-type{
  border-bottom: 0;
}

.mijlpalen__jaar{
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.mijlpalen__fase,
.mijlpalen__boodschap{
  font-size: 15px;
  line-height: 1.5;
  color: var(--grijs);
}
.mijlpalen__boodschap{
  color: var(--navy);
}
.mijlpalen__budget{
  font-size: 15px;
  line-height: 1.5;
  color: var(--grijs);
  font-variant-numeric: tabular-nums;
}

/* Het vlaggetje bij 25 en 35 jaar. */
.mijlpalen__vlag{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wit);
  background-color: #9a6b12;
  border-radius: 2px;
  vertical-align: 2px;
}

/* Kleine labels die enkel op gsm zichtbaar zijn, zodat je daar nog
   weet welk getal wat is. */
.mijlpalen__label{
  display: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grijs);
  opacity: .7;
}

.mijlpalen__noot{
  max-width: 900px;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--grijs);
  opacity: .9;
}

/* Variant: scorekaart met vier alternatieven naast elkaar. Wordt
   gebruikt op smiles.html om een keuzeconcept te vergelijken met een
   vast geschenk, een open bon en een beperkt keuzeconcept. Eén brede
   kolom voor het criterium, vier smalle voor de scores. */
.mijlpalen--score .mijlpalen__rij{
  grid-template-columns: 1.6fr repeat(4, 1fr);
  align-items: center;
}
.mijlpalen--score .mijlpalen__rij--kop span{ text-align: center; }
.mijlpalen--score .mijlpalen__rij--kop span:first-child{ text-align: left; }
/* De eigen kolom krijgt een lichte accenttint, zodat het oog die volgt. */
.mijlpalen--score .mijlpalen__ons{ background-color: rgba(193, 92, 38, .06); }
.mijlpalen--score .mijlpalen__rij--kop .mijlpalen__ons{ color: var(--oranje); }
.mijlpalen__criterium{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
}
/* De scores. Kleur draagt de betekenis, maar de tekens staan er ook:
   wie geen kleur ziet, leest nog altijd ++ of --. */
.mijlpalen__score{
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.mijlpalen__score--goed{ color: #2f6f4f; }
.mijlpalen__score--ok{ color: #2f6f4f; opacity: .7; }
.mijlpalen__score--wisselt{ color: var(--grijs); opacity: .7; }
.mijlpalen__score--zwak{ color: #9c4221; opacity: .8; }
.mijlpalen__score--slecht{ color: #9c4221; }

/* De legenda onder de tabel. */
.mijlpalen__legenda{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--grijs);
}
.mijlpalen__legenda b{
  margin-right: 5px;
  font-weight: 800;
  color: var(--navy);
}

@media (max-width: 900px){
  /* Vier alternatieven naast elkaar past niet meer: het criterium komt
     boven, de vier scores eronder in een rijtje van vier. */
  .mijlpalen--score .mijlpalen__rij{
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 14px;
    padding: 14px 0;
  }
  .mijlpalen--score .mijlpalen__rij--kop{ display: none; }
  .mijlpalen--score .mijlpalen__criterium{
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }
  /* Elke score krijgt hier een eigen labeltje, anders weet je niet
     welke kolom je leest. Die labels staan in de HTML klaar. */
  .mijlpalen--score .mijlpalen__score::before{
    content: attr(data-wat);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grijs);
    opacity: .75;
    margin-bottom: 2px;
  }
}

/* De fiscale vergelijking: zelfde ritme, drie kolommen. */
.mijlpalen--vergelijk{
  background-color: var(--grijs-blok);
}
.mijlpalen--vergelijk .mijlpalen__rij{
  grid-template-columns: 1.2fr 1fr 1fr;
}

@media (max-width: 1000px){
  .mijlpalen__rij{
    grid-template-columns: 110px 1fr 150px;
  }
  /* Op tabletbreedte valt de kolom "wat het moment moet zeggen" weg;
     die staat dan onder de fase. */
  .mijlpalen__rij--kop span:nth-child(3){ display: none; }
  .mijlpalen__boodschap{ display: none; }
}

@media (max-width: 768px){
  .mijlpalen{ padding: 60px 20px; }
  .mijlpalen__rij,
  .mijlpalen--vergelijk .mijlpalen__rij{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }
  .mijlpalen__rij--kop{ display: none; }
  .mijlpalen__label{ display: block; }
  .mijlpalen__boodschap{ display: block; }
}


/* ---------- 39. REKENBLAD ---------------------------------- */
/* "Wat kost dit bij ons?" — drie invoervelden, een tabel met
   overschrijfbare getallen, en een donker paneel met de uitkomst.
   De rekenlogica zit in script.js, punt 9.

   Werkt de bezoeker zonder JavaScript? Dan blijft het blok gewoon
   staan met lege velden en streepjes. Daarom zet script.js de
   startwaarden, niet de HTML: zo staat er nooit een verkeerd getal
   als het script niet laadt. */
.rekenblad{
  display: flex;
  justify-content: center;
  padding: 100px 30px;
  background-color: var(--grijs-blok);
}
.rekenblad__container{
  width: 100%;
  max-width: var(--max-breedte);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Linkerkolom: invoer */
.rekenblad__velden{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}
.rekenblad__veld{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
  flex: 1;
}
.rekenblad__veld label{
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.rekenblad__veld input{
  font-family: inherit;
  font-size: 15px;
  padding: 9px 11px;
  color: var(--zwart);
  background-color: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.rekenblad__hint{
  font-size: 12px;
  line-height: 1.5;
  color: var(--grijs);
  opacity: .85;
}

/* De tabel met mijlpalen. Zelfde grid-aanpak als blok 38. */
.rekenblad__rij{
  display: grid;
  grid-template-columns: 1fr 110px 130px 130px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--lijn);
}
.rekenblad__rij--kop span{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
}
.rekenblad__rij--totaal{
  border-bottom: 0;
  border-top: 2px solid var(--navy);
  font-weight: 800;
  color: var(--navy);
}
.rekenblad__mijlpaal{
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.rekenblad__rij input{
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  padding: 6px 8px;
  text-align: right;
  color: var(--zwart);
  background-color: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.rekenblad__sub{
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Rechterkolom: de uitkomst */
.rekenblad__uitkomst{
  padding: 28px;
  color: #eef4f8;
  background-color: var(--navy-donker);
  border-radius: 10px;
  position: sticky;
  top: 20px;
}
.rekenblad__uitkomst h3{
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wit);
}
.rekenblad__cijfer{
  margin-bottom: 18px;
}
.rekenblad__cijfer b{
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #f0a97e;
  font-variant-numeric: tabular-nums;
}
.rekenblad__cijfer span{
  font-size: 13px;
  line-height: 1.5;
  color: #bfd2de;
}
.rekenblad__scheiding{
  height: 1px;
  margin: 20px 0;
  background-color: rgba(255,255,255,.16);
}
.rekenblad__noot{
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
  color: #9ab3c2;
}
.rekenblad__noot:last-child{ margin-bottom: 0; }

@media (max-width: 900px){
  .rekenblad__container{ grid-template-columns: 1fr; }
  .rekenblad__uitkomst{ position: static; }
}

@media (max-width: 768px){
  .rekenblad{ padding: 60px 20px; }
  .rekenblad__rij{
    grid-template-columns: 1fr 80px 100px;
    gap: 10px;
  }
  /* Het subtotaal per rij valt weg op gsm; het totaal blijft. */
  .rekenblad__rij--kop span:nth-child(4){ display: none; }
  .rekenblad__rij .rekenblad__sub{ display: none; }
  .rekenblad__rij--totaal .rekenblad__sub{ display: block; }
}


/* ---------- 40. BTW-REKENSOM ------------------------------- */
/* Twee bedragen naast elkaar met "tegenover" ertussen, om te laten
   zien wat hetzelfde budget oplevert bij een bon en bij een geschenk
   waarvan je de btw recupereert. Op smiles.html.

   De rechterkant (onze kant) krijgt een oranje kader. Op gsm zakken
   de twee onder elkaar en komt "tegenover" ertussen te staan. */
.btwsom{
  display: flex;
  justify-content: center;
  padding: 100px 30px;
  background-color: var(--wit);
}
.btwsom__container{
  width: 100%;
  max-width: 980px;
}
.btwsom__intro{
  max-width: 700px;
  margin: 0 0 36px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grijs);
}
.btwsom__paar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
}
.btwsom__kop{
  margin: 56px 0 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}
.btwsom__kant{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 28px;
  background-color: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 10px;
}
/* Mag krimpen op een smal scherm; anders duwt een lang bedrag de
   hele pagina breder dan de telefoon. */
.btwsom__kant{ min-width: 0; }
.btwsom__kant--ons{ border: 2px solid var(--oranje); }
.btwsom__kant h3{
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--grijs);
}
.btwsom__kant--ons h3{ color: var(--oranje); }
.btwsom__groot{
  margin: 4px 0 12px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.btwsom__regel{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grijs);
  font-variant-numeric: tabular-nums;
}
.btwsom__regel b{
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.btwsom__noot{
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grijs);
  opacity: .9;
}
.btwsom__tegenover{
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grijs);
  opacity: .8;
}

/* Het kader onder de som, met de uitleg waarom het € 33 is. */
.btwsom__uitleg{
  margin-top: 28px;
  padding: 24px 26px;
  background-color: #eef5f0;
  border: 1px solid rgba(47, 111, 79, .35);
  border-radius: 10px;
}
.btwsom__uitleg h4{
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.btwsom__uitleg p{
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--zwart);
}
.btwsom__uitleg p:last-child{ margin-bottom: 0; }

@media (max-width: 860px){
  .btwsom__paar{ grid-template-columns: 1fr; gap: 16px; }
  .btwsom__tegenover{ justify-content: center; }
}

@media (max-width: 768px){
  .btwsom{ padding: 60px 20px; }
  .btwsom__groot{ font-size: 28px; }
  .btwsom__kop{ font-size: 20px; }
  .btwsom__kant{ padding: 22px 20px; }
  /* Past het bedrag niet naast zijn omschrijving, dan mag het eronder. */
  .btwsom__regel{ flex-wrap: wrap; gap: 2px 16px; }
  .btwsom__regel b{ white-space: normal; }
}


/* ---------- 41. KLEINE LETTERS ----------------------------- */
/* Drie korte stukken onderaan een pagina, in kleinere letter dan de
   rest maar nog goed leesbaar. Gebruikt op smiles.html om uit te
   leggen wat het product wel en niet is, om ontvangers die hier per
   ongeluk landen door te verwijzen, en voor de nuance bij de fiscale
   bedragen.

   Bewust niet in grijs muizenschrift: wat de moeite is om te
   schrijven, is de moeite om leesbaar te zetten. */
.kleine-letters{
  display: flex;
  justify-content: center;
  padding: 70px 30px 90px;
  background-color: var(--wit);
}
.kleine-letters__container{
  width: 100%;
  max-width: var(--max-breedte);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-top: 34px;
  border-top: 2px solid var(--navy);
}
.kleine-letters__blok h3{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}
.kleine-letters__blok p{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--grijs);
}
.kleine-letters__blok p:last-child{ margin-bottom: 0; }
.kleine-letters__blok strong{ color: var(--navy); font-weight: 600; }
.kleine-letters__blok a{ color: var(--oranje); }

@media (max-width: 900px){
  .kleine-letters__container{ grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 768px){
  .kleine-letters{ padding: 50px 20px 70px; }
}


/* ---------- 42. SCHERMEN ----------------------------------- */
/* Een reeks schermafdrukken, elk met een bijschrift ernaast.
   Beeld en tekst wisselen van kant per item (--omgekeerd), zodat
   acht beelden onder elkaar niet als een lijst gaan lezen.

   Anders dan bij fotorij en video-tekst wordt het beeld hier niet
   bijgesneden: een schermafdruk moet volledig te zien zijn, dus
   height: auto en een dunne rand eromheen — zonder die rand valt
   een wit scherm weg op een witte pagina.

   Een beeld bijzetten of weghalen is één .schermen__item kopiëren
   of wissen. Zet --omgekeerd op elk tweede item. */
.schermen{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 30px;
  background-color: var(--wit);
}
.schermen__container{
  display: flex;
  flex-direction: column;
  gap: 90px;
  width: 100%;
  max-width: var(--max-breedte);
}
.schermen__item{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Beeld rechts in plaats van links. */
.schermen__item--omgekeerd .schermen__beeld{ order: 2; }

.schermen__beeld{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background-color: var(--wit);
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.schermen__beeld img{
  display: block;
  width: 100%;
  height: auto;
}
.schermen__tekst{ min-width: 0; }
.schermen__label{
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--oranje);
}
.schermen__tekst h3{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}
.schermen__tekst p{
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--grijs);
}
.schermen__tekst p:last-child{ margin-bottom: 0; }
.schermen__tekst strong{ color: var(--navy); font-weight: 600; }

/* Achtergrondvariant, zodat twee schermenblokken onder elkaar niet
   in elkaar overlopen. */
.schermen--grijs{ background-color: var(--grijs-licht); }

@media (max-width: 900px){
  .schermen__container{ gap: 60px; }
  .schermen__item{ grid-template-columns: 1fr; gap: 24px; }
  /* Op gsm staat het beeld altijd boven de tekst. */
  .schermen__item--omgekeerd .schermen__beeld{ order: 0; }
}
@media (max-width: 768px){
  .schermen{ padding: 60px 20px; }
  .schermen__tekst h3{ font-size: 19px; }
}


/* ---------- 43. MERKBLOK ----------------------------------- */
/* Het merk Thanks in beeld: woordmerk, de drieslag en de
   endorsementregel. Thanks heeft zijn eigen palet, net naast dat
   van Attent — dicht genoeg om als familie te lezen, ver genoeg om
   stand-alone te kunnen staan.

   Die twee kleuren gelden ALLEEN binnen dit blok en horen dus niet
   in de variabelen bovenaan. Meng ze niet met de sitekleuren. */
.merkblok{
  --thanks-navy:   #1e5171;
  --thanks-oranje: #c16a3b;

  display: flex;
  justify-content: center;
  padding: 90px 30px;
  background-color: var(--grijs-licht);
}
.merkblok__container{
  width: 100%;
  max-width: 780px;
  text-align: center;
}
.merkblok__logo{
  display: block;
  width: 240px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 30px;
}
.merkblok__drieslag{
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--thanks-oranje);
}
.merkblok__tekst{
  margin: 0 auto;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grijs);
}
.merkblok__tekst strong{ color: var(--thanks-navy); font-weight: 600; }
.merkblok__voet{
  margin: 30px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--lijn);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--thanks-navy);
}

@media (max-width: 768px){
  .merkblok{ padding: 60px 20px; }
  .merkblok__logo{ width: 180px; max-width: 70%; }
  .merkblok__drieslag{ font-size: 17px; letter-spacing: .12em; }
}


/* ============================================================
   44. LOGOMUUR — het leveranciersnetwerk
   ------------------------------------------------------------
   Veel kleine logo's in een raster dat zichzelf vult. Elk logo
   krijgt een wit vakje met een vaste verhouding, zodat een breed
   woordmerk en een vierkant beeldmerk even groot ogen.

   De logo's staan grijs en lichtjes doorschijnend; onder de muis
   springen ze in kleur. Wil je ze altijd in kleur, haal dan de
   twee regels filter en opacity hieronder weg.

   Een logo dat niet geladen raakt, verdwijnt samen met zijn vakje
   — dat regelt script.js punt 10. Daarvoor is de regel met
   [hidden] nodig: zonder die regel wint display:flex.
   ============================================================ */
.logomuur{
  padding: 90px 30px;
  background-color: var(--grijs-licht);
}
.logomuur__container{
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}
.logomuur__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin-top: 40px;
}

/* Het venster houdt de muur ingeklapt tot je op de knop drukt.
   Zonder JavaScript blijft is-ingeklapt weg en staat alles open. */
.logomuur__venster{ position: relative; }
.logomuur__venster.is-ingeklapt{
  max-height: 430px;
  overflow: hidden;
}
.logomuur__venster.is-ingeklapt::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(250,250,250,0), var(--grijs-licht));
  pointer-events: none;
}
.logomuur__meer{
  margin-top: 26px;
  text-align: center;
}
.logomuur__vak{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  min-width: 0;
  padding: 12px;
  background-color: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 8px;
}
.logomuur__vak[hidden]{ display: none; }
.logomuur__vak img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .2s ease, opacity .2s ease;
}
.logomuur__vak:hover img{
  filter: none;
  opacity: 1;
}
.logomuur__noot{
  margin: 34px auto 0;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  color: var(--grijs);
}

@media (max-width: 600px){
  .logomuur{ padding: 60px 16px; }
  .logomuur__grid{
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 8px;
  }
  .logomuur__vak{ padding: 8px; border-radius: 6px; }
  .logomuur__venster.is-ingeklapt{ max-height: 320px; }
}