/* ==========================================================================
   I.D. Interieur, design system (VICAR Agency, redesign 2026-10)

   Eén bron voor kleur, typografie, ruimte en componenten. Pagina's gebruiken
   enkel de tokens hieronder; geen losse pixelwaarden in de componenten.
   Breekpunten: 1100 (brede layouts), 960 (menu wordt hamburger), 720
   (kolommen onder elkaar), 480 (kleine gsm).
   ========================================================================== */

@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("/assets/fonts/merriweather.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------- tokens */
:root {
  /* kleur: rood van het logo, warme neutralen, donkere inkt */
  --rood: #b80000;
  --rood-donker: #8f0000;
  --inkt: #1c1a18;
  --tekst: #3b3734;
  --zacht: #6b645e;
  --lijn: #e5dfd7;
  --lijn-sterk: #cfc7bc;
  --zand: #f6f2ec;
  --zand-2: #ece5db;
  --wit: #fff;
  --donker: #1c1a18;
  --op-donker: #f4f0ea;
  --op-donker-zacht: #b4aca3;
  --ster: #e8a800;

  /* typografie */
  --kop: "Merriweather", Georgia, "Times New Roman", serif;
  --romp: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --fs-h1: clamp(2.1rem, 1.45rem + 2.6vw, 3.4rem);
  --fs-h2: clamp(1.65rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.06rem + .4vw, 1.4rem);
  --fs-lead: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .75rem;
  --lh-kop: 1.22;
  --lh-tekst: 1.68;

  /* ruimte */
  --r-1: .25rem; --r-2: .5rem; --r-3: .75rem; --r-4: 1rem; --r-5: 1.5rem;
  --r-6: 2rem; --r-7: 3rem; --r-8: 4rem; --r-9: 6rem;
  --sectie: clamp(4rem, 2.8rem + 4.5vw, 7.5rem);
  --sectie-klein: clamp(3rem, 2.2rem + 3vw, 5rem);
  --rand: clamp(1rem, .4rem + 2.6vw, 2.5rem);
  --breed: 1240px;
  --smal: 760px;
  --gat: clamp(1rem, .55rem + 1.6vw, 2rem);
  --gat-groot: clamp(2rem, 1rem + 4vw, 5rem);

  /* componenten */
  --knop-h: 3.25rem;
  --knop-h-klein: 2.6rem;
  --hoek: 2px;
  --kop-h: 96px;
  --kop-h-klein: 72px;
  --logo-h: 64px;
  --schaduw: 0 18px 40px -24px rgba(28, 26, 24, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --snel: .2s;
  --traag: .5s;
}
@media (max-width: 960px) { :root { --kop-h: 72px; --logo-h: 46px; } }

/* --------------------------------------------------------------- basis */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-padding-top: calc(var(--kop-h) + 1rem); }
body { margin: 0; font-family: var(--romp); font-size: var(--fs-body); line-height: var(--lh-tekst); color: var(--tekst); background: var(--wit); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--kop); font-weight: 400; line-height: var(--lh-kop); color: var(--inkt); margin: 0; text-wrap: balance; }
p { margin: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--wit); padding: var(--r-3) var(--r-4); }
.skip:focus { left: var(--r-3); top: var(--r-3); }
:focus-visible { outline: 2px solid var(--rood); outline-offset: 3px; }
.sr, .visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ layout */
.container { width: 100%; max-width: calc(var(--breed) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.container--smal { max-width: calc(var(--smal) + 2 * var(--rand)); }
.sectie { padding: var(--sectie) 0; position: relative; }
.sectie--klein { padding: var(--sectie-klein) 0; }
.sectie--zand { background: var(--zand); }
.sectie--donker { background: var(--donker); color: var(--op-donker); }
.sectie--donker h2, .sectie--donker h3 { color: var(--wit); }
/* twee witte secties na elkaar delen hun witruimte; na een zand- of donker vlak krijgt de volgende sectie wél volle ruimte */
.sectie:not(.sectie--zand):not(.sectie--donker) + .sectie:not(.sectie--zand):not(.sectie--donker) { padding-top: 0; }
.sectie-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r-5); margin-bottom: var(--r-7); }
.sectie-kop--midden { flex-direction: column; align-items: center; text-align: center; }
.sectie-kop__tekst { max-width: 40rem; }
.sectie-kop p:not(.label) { margin-top: var(--r-4); color: var(--zacht); font-size: var(--fs-lead); }

/* --------------------------------------------------------- typografie */
.h1, .tekst h1 { font-size: var(--fs-h1); letter-spacing: -.01em; }
.h2 { font-size: var(--fs-h2); letter-spacing: -.005em; }
.h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--zacht); }
.klein { font-size: var(--fs-small); color: var(--zacht); }
/* handgeschreven accent (Caveat), zoals de slogan in het logo; altijd rood, zonder streepje */
.label { display: block; font-family: var(--hand); font-size: clamp(1.6rem, 1.3rem + .9vw, 2.1rem); font-weight: 600; line-height: 1.05; letter-spacing: 0; text-transform: none; color: var(--rood); }
.sectie--donker .label { color: #ff8a7a; }
.kenmerk .label + h3 { margin-top: var(--r-2); }

/* inhoud uit de bestaande pagina's (lokale pagina's, juridische tekst) */
.inhoud > * + * { margin-top: var(--r-4); }
.inhoud h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin-top: var(--r-7); }
.inhoud h3 { font-size: var(--fs-h3); margin-top: var(--r-6); }
.inhoud h4, .inhoud h5 { font-family: var(--romp); font-size: 1rem; font-weight: 500; color: var(--inkt); margin-top: var(--r-5); }
.inhoud h2 + *, .inhoud h3 + *, .inhoud h4 + *, .inhoud h5 + * { margin-top: var(--r-3); }
.inhoud > :first-child { margin-top: 0; }
.inhoud p, .inhoud li { color: var(--tekst); }
.inhoud ul, .inhoud ol { padding-left: 1.2rem; }
.inhoud li + li { margin-top: var(--r-2); }
.inhoud li::marker { color: var(--rood); }
.inhoud strong { font-weight: 500; color: var(--inkt); }
.inhoud a:not(.knop) { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--lijn-sterk); text-underline-offset: 3px; transition: text-decoration-color var(--snel); }
.inhoud a:not(.knop):hover { text-decoration-color: var(--rood); }
.inhoud img { margin: 0; }
.inhoud iframe { display: block; width: 100%; border: 0; aspect-ratio: 16 / 10; height: auto; }
.inhoud table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.inhoud th, .inhoud td { border-bottom: 1px solid var(--lijn); padding: var(--r-3) var(--r-3) var(--r-3) 0; text-align: left; vertical-align: top; }
.inhoud span[style*="183, 0, 0"] { color: var(--rood) !important; }
.clear { clear: both; }

/* ------------------------------------------------------------- knoppen */
.knop, .knop-rood, .knop-lijn, .verstuur {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r-3);
  min-height: var(--knop-h); padding: 0 1.6rem; border: 1px solid transparent; border-radius: var(--hoek);
  font-family: var(--romp); font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: .01em; text-align: center; text-decoration: none !important;
  cursor: pointer; transition: background-color var(--snel), color var(--snel), border-color var(--snel), box-shadow var(--snel);
}
.knop, .knop-rood, .verstuur, .knop--primair { background: var(--rood); color: var(--wit); }
.knop:hover, .knop-rood:hover, .verstuur:hover, .knop--primair:hover { background: var(--rood-donker); }
.knop-lijn, .knop--lijn, .knop--secundair { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop-lijn:hover, .knop--lijn:hover, .knop--secundair:hover { background: var(--inkt); color: var(--wit); }
.sectie--donker .knop--secundair, .knop--licht { color: var(--wit); border-color: rgba(255, 255, 255, .45); }
.sectie--donker .knop--secundair:hover, .knop--licht:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.knop--klein { min-height: var(--knop-h-klein); padding: 0 1.1rem; font-size: .9375rem; }
.knop--groot { width: 100%; }
.knop .pijl, .tekstlink .pijl { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--snel) var(--ease); }
.knop:hover .pijl, .tekstlink:hover .pijl, a:hover > .tekstlink .pijl { transform: translateX(4px); }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--r-3); }
.tekstlink { display: inline-flex; align-items: center; gap: var(--r-2); font-weight: 500; color: var(--inkt); border-bottom: 1px solid var(--lijn-sterk); padding-bottom: 2px; transition: border-color var(--snel), color var(--snel); }
.tekstlink:hover { border-color: var(--rood); color: var(--rood); }
.sectie--donker .tekstlink { color: var(--wit); border-color: rgba(255, 255, 255, .35); }

/* ---------------------------------------------------------------- kop */
.kop { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--snel), box-shadow var(--snel); }
.kop--gescrold { border-bottom-color: var(--lijn); box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .35); }
.kop__binnen { display: flex; align-items: center; gap: var(--r-6); height: var(--kop-h); transition: height var(--traag) var(--ease); }
.kop--gescrold .kop__binnen { height: var(--kop-h-klein); }
.kop__logo { display: block; flex: none; line-height: 0; }
.kop__logo img { height: var(--logo-h); width: auto; transition: height var(--traag) var(--ease); }
.kop--gescrold .kop__logo img { height: calc(var(--logo-h) * .8); }
.nav { display: flex; align-items: center; gap: var(--r-2); margin: 0 auto; }
.nav__item { position: relative; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: var(--r-2); height: 2.75rem; padding: 0 var(--r-4); border: 0; background: none; cursor: pointer; font-size: 1rem; font-weight: 500; color: var(--inkt); white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; left: var(--r-4); right: var(--r-4); bottom: .45rem; height: 2px; background: var(--rood); transform: scaleX(0); transform-origin: left; transition: transform var(--snel) var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item--actief > .nav__link::after { transform: scaleX(1); }
.nav__pijl { width: .7rem; height: .7rem; transition: transform var(--snel); }
.nav__item--open .nav__pijl { transform: rotate(180deg); }
.nav__sub { position: absolute; left: 50%; top: calc(100% + .6rem); width: 25rem; padding: var(--r-3); background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek); box-shadow: 0 24px 50px -20px rgba(28, 26, 24, .3);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity var(--snel), transform var(--snel) var(--ease), visibility var(--snel); }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: .8rem; }
.nav__item--open .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__sub a { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--r-4); align-items: center; padding: var(--r-2); border-radius: var(--hoek); transition: background-color var(--snel); }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--zand); }
.nav__sub img { width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: var(--hoek); }
.nav__sub strong { display: block; font-weight: 500; color: var(--inkt); line-height: 1.3; }
.nav__sub small { display: block; font-size: var(--fs-small); color: var(--zacht); line-height: 1.4; }
.nav__sub a[aria-current="page"] strong { color: var(--rood); }
.nav__alles { display: block !important; margin-top: var(--r-2); padding: var(--r-3) var(--r-2) var(--r-2) !important; border-top: 1px solid var(--lijn); font-size: var(--fs-small); font-weight: 500; color: var(--inkt); }
.kop__acties { display: flex; align-items: center; gap: var(--r-5); flex: none; }
.kop__tel { display: inline-flex; align-items: center; gap: var(--r-2); font-weight: 500; color: var(--inkt); white-space: nowrap; }
.kop__tel svg { width: 1rem; height: 1rem; fill: var(--rood); }
.kop__tel:hover { color: var(--rood); }
.burger { display: none; width: 2.75rem; height: 2.75rem; margin-right: -.6rem; border: 0; background: none; cursor: pointer; padding: 0; place-items: center; }
.burger span { position: relative; display: block; width: 1.4rem; height: 2px; background: var(--inkt); transition: background-color var(--snel); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--inkt); transition: transform var(--snel) var(--ease); }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
@media (max-width: 1180px) { .kop__tel span { display: none; } .kop__tel { width: 2.75rem; height: 2.75rem; justify-content: center; } .kop__acties { gap: var(--r-2); } }
@media (max-width: 960px) {
  .nav, .kop__tel { display: none; }
  .burger { display: grid; }
  .kop__binnen { gap: var(--r-3); justify-content: space-between; }
  .kop__acties { margin-left: auto; gap: var(--r-3); }
  .kop--gescrold .kop__binnen { height: var(--kop-h); }
  .kop--gescrold .kop__logo img { height: var(--logo-h); }
}
@media (max-width: 479px) { .kop__offerte-lang { display: none; } }
@media (min-width: 480px) { .kop__offerte-kort { display: none; } }
@media (max-width: 380px) { :root { --logo-h: 40px; } .kop__acties .knop { padding: 0 .8rem; } }

/* ------------------------------------------------------- mobiel menu */
.menu { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.menu__achter { position: absolute; inset: 0; background: rgba(28, 26, 24, .45); opacity: 0; transition: opacity .3s; }
.menu__paneel { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; background: var(--wit); transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto; overscroll-behavior: contain; }
body.menu-open { overflow: hidden; }
body.menu-open .menu { visibility: visible; pointer-events: auto; }
body.menu-open .menu__achter { opacity: 1; }
body.menu-open .menu__paneel { transform: none; }
.menu__kop { display: flex; align-items: center; justify-content: space-between; height: var(--kop-h); padding: 0 var(--rand); border-bottom: 1px solid var(--lijn); flex: none; }
.menu__kop img { height: 40px; width: auto; }
.menu__sluit { width: 2.75rem; height: 2.75rem; margin-right: -.6rem; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.menu__sluit svg { width: 1.4rem; height: 1.4rem; stroke: var(--inkt); fill: none; stroke-width: 2; }
.menu nav { padding: var(--r-4) var(--rand); width: 100%; max-width: 40rem; margin: 0 auto; }
.menu nav > a, .menu__groep > button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.5rem; padding: 0; border: 0; border-bottom: 1px solid var(--lijn); background: none; cursor: pointer; font-family: var(--kop); font-size: 1.3rem; color: var(--inkt); text-align: left; }
.menu nav > a[aria-current="page"] { color: var(--rood); }
.menu__groep > button svg { width: .85rem; height: .85rem; transition: transform var(--snel); }
.menu__groep[data-open] > button svg { transform: rotate(180deg); }
.menu__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.menu__groep[data-open] .menu__sub { grid-template-rows: 1fr; }
.menu__sub > div { overflow: hidden; }
.menu__sub a { display: flex; align-items: center; min-height: 3rem; padding-left: var(--r-4); border-bottom: 1px solid var(--lijn); font-size: 1.0625rem; color: var(--tekst); }
.menu__sub a[aria-current="page"] { color: var(--rood); }
.menu__voet { margin-top: auto; padding: var(--r-6) max(var(--rand), calc((100% - 40rem) / 2)) var(--r-7); background: var(--zand); display: grid; gap: var(--r-4); }
.menu__voet .knop { width: 100%; }
.menu__contact { display: grid; gap: var(--r-2); }
.menu__contact a { display: flex; align-items: center; gap: var(--r-3); min-height: 2.75rem; color: var(--inkt); font-weight: 500; }
.menu__contact svg { width: 1.1rem; height: 1.1rem; fill: var(--rood); flex: none; }

/* --------------------------------------------------------------- hero */
.hero { position: relative; padding: clamp(2rem, 1rem + 4vw, 5rem) 0 var(--sectie); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gat-groot); align-items: center; }
.hero__tekst > * + * { margin-top: var(--r-5); }
.hero__hand { font-family: var(--hand); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 600; line-height: 1; color: var(--rood); transform: rotate(-2deg); transform-origin: left bottom; }
.hero__titel { margin-top: var(--r-2) !important; font-size: var(--fs-h1); letter-spacing: -.01em; color: var(--inkt); }
.hero__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--tekst); max-width: 30rem; }
.hero__knoppen { padding-top: var(--r-2); }
.hero__vertrouwen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: var(--r-5); margin-top: var(--r-6) !important; border-top: 1px solid var(--lijn); font-size: var(--fs-small); line-height: 1.35; color: var(--zacht); }
.hero__vertrouwen li { display: flex; flex-direction: column; gap: var(--r-1); padding: 0 var(--r-4); border-left: 1px solid var(--lijn); }
.hero__vertrouwen li:first-child { padding-left: 0; border-left: 0; }
.hero__vertrouwen strong { font-family: var(--kop); font-size: 1.05rem; font-weight: 400; line-height: 1.2; color: var(--inkt); }
.hero__vertrouwen-top { display: flex; align-items: center; min-height: 1.26rem; }
@media (max-width: 600px) {
  .hero__vertrouwen { grid-template-columns: 1fr; padding-top: 0; }
  .hero__vertrouwen li, .hero__vertrouwen li:first-child { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--r-4); padding: var(--r-3) 0; border-left: 0; border-bottom: 1px solid var(--lijn); }
  .hero__vertrouwen li > :last-child { text-align: right; }
}
@media (max-width: 480px) { .hero__knoppen .knop, .paginakop .knoppen .knop { width: 100%; } }
.hero__beeld { position: relative; margin: 0 0 var(--r-6) var(--r-6); }
.hero__beeld::before { content: ""; position: absolute; left: calc(-1 * var(--r-6)); bottom: calc(-1 * var(--r-6)); width: 70%; height: 70%; background: var(--zand-2); }
.hero__beeld img { position: relative; width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.strepen { position: absolute; width: clamp(80px, 5rem + 4vw, 150px); height: auto; pointer-events: none; }
.strepen line { stroke: var(--inkt); }
.hero__beeld .strepen { right: clamp(-2.5rem, -3vw, -1rem); top: clamp(-2.5rem, -3vw, -1rem); }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__beeld { order: -1; margin: 0 0 var(--r-4) var(--r-4); }
  .hero__beeld::before { left: calc(-1 * var(--r-4)); bottom: calc(-1 * var(--r-4)); }
  .hero__beeld img { aspect-ratio: 3 / 2; }
  .hero__beeld .strepen { right: -.4rem; top: -1rem; }
}

/* pagina-kop (alle binnenpagina's) */
.paginakop { padding: clamp(2rem, 1.2rem + 3vw, 4rem) 0 var(--sectie-klein); }
.paginakop__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gat-groot); align-items: center; }
.paginakop__tekst > * + * { margin-top: var(--r-5); }
.paginakop .lead { max-width: 34rem; }
.paginakop__beeld { position: relative; margin: 0 0 var(--r-5) var(--r-5); }
.paginakop__beeld::before { content: ""; position: absolute; left: calc(-1 * var(--r-5)); bottom: calc(-1 * var(--r-5)); width: 60%; height: 60%; background: var(--zand-2); }
.paginakop__beeld img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.paginakop--midden { text-align: center; }
.paginakop--midden .paginakop__tekst { max-width: 46rem; margin: 0 auto; }
.paginakop--midden .lead { margin-left: auto; margin-right: auto; }
.paginakop--midden .knoppen { justify-content: center; }
.kruimels { display: flex; flex-wrap: wrap; gap: var(--r-2); font-size: var(--fs-small); color: var(--zacht); }
.kruimels a:hover { color: var(--rood); }
.kruimels li + li::before { content: "/"; margin-right: var(--r-2); color: var(--lijn-sterk); }
ul.kruimels, .hero__vertrouwen, .vinkjes, .stappen, .voet ul, .feiten, .troeven, .merken { list-style: none; margin: 0; padding: 0; }
@media (max-width: 960px) {
  .paginakop__grid { grid-template-columns: 1fr; }
  .paginakop__beeld { margin: var(--r-4) 0 var(--r-4) var(--r-4); }
  .paginakop__beeld::before { left: calc(-1 * var(--r-4)); bottom: calc(-1 * var(--r-4)); }
  .paginakop__beeld img { aspect-ratio: 3 / 2; }
}

/* ----------------------------------------------------- dienstenkaarten */
.diensten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gat); }
.dienst { grid-column: span 2; display: flex; flex-direction: column; color: var(--inkt); }
.dienst--groot { grid-column: span 3; }
.dienst__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--zand-2); }
.dienst--groot .dienst__foto { aspect-ratio: 3 / 2; }
.dienst__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dienst:hover .dienst__foto img { transform: scale(1.04); }
.dienst__tekst { padding-top: var(--r-5); }
.dienst__titel { font-size: var(--fs-h3); }
.dienst__tekst p { margin-top: var(--r-2); color: var(--zacht); }
.dienst .tekstlink { margin-top: var(--r-4); }
@media (max-width: 960px) { .dienst, .dienst--groot { grid-column: span 3; } .dienst--groot .dienst__foto { aspect-ratio: 4 / 3; } }
@media (max-width: 600px) { .diensten { grid-template-columns: 1fr; gap: var(--r-7); } .dienst, .dienst--groot { grid-column: auto; } }

/* --------------------------------------------- realisaties op de home */
.selectie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 6rem + 9vw, 15rem); gap: var(--r-3); }
.selectie a { position: relative; overflow: hidden; background: var(--zand-2); }
.selectie a:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.selectie a:nth-child(2) { grid-column: span 5; }
.selectie a:nth-child(3) { grid-column: span 5; }
.selectie a:nth-child(4) { grid-column: span 4; }
.selectie a:nth-child(5) { grid-column: span 4; }
.selectie a:nth-child(6) { grid-column: span 4; }
.selectie img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.selectie a:hover img { transform: scale(1.04); }
.selectie__balk { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--r-2); padding: var(--r-8) var(--r-5) var(--r-4); background: linear-gradient(to top, rgba(20, 18, 16, .62), rgba(20, 18, 16, 0)); font-size: .9375rem; font-weight: 500; color: var(--wit); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.selectie a:hover .selectie__balk, .selectie a:focus-visible .selectie__balk { opacity: 1; transform: none; }
.selectie__balk .pijl { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--snel) var(--ease); }
.selectie a:hover .selectie__balk .pijl { transform: translateX(4px); }
/* gsm: groot, twee keer twee, groot; geen lege vakken */
@media (max-width: 720px) {
  .selectie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--r-2); }
  .selectie a:nth-child(n) { grid-column: span 1; grid-row: span 1; aspect-ratio: 1; }
  .selectie a:nth-child(1), .selectie a:nth-child(6) { grid-column: span 2; aspect-ratio: 16 / 10; }
}
/* --------------------------------------------------------- troeven */
.troeven { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); counter-reset: troef; }
.troef { padding-top: var(--r-5); border-top: 1px solid var(--lijn-sterk); }
.troef__getal { display: block; font-family: var(--kop); font-size: 2rem; line-height: 1; color: var(--rood); }
.troef h3 { margin-top: var(--r-4); font-size: 1.15rem; }
.troef p { margin-top: var(--r-2); color: var(--zacht); font-size: 1rem; }
@media (max-width: 960px) { .troeven { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--r-7); } }
@media (max-width: 480px) { .troeven { grid-template-columns: 1fr; row-gap: var(--r-6); } }

/* --------------------------------------------------------- tweeluik */
.tweeluik { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gat-groot); align-items: center; }
.tweeluik--om { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.tweeluik--om .tweeluik__beeld { order: 2; }
.tweeluik__beeld { position: relative; }
.tweeluik__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tweeluik__beeld--breed img { aspect-ratio: 4 / 3; }
.tweeluik__beeld .strepen { left: calc(-1 * var(--r-6)); bottom: calc(-1 * var(--r-6)); }
.tweeluik__tekst > * + * { margin-top: var(--r-5); }
.tweeluik__tekst .h2 + p { margin-top: var(--r-5); }
.citaat-kort { margin: 0; padding: var(--r-6); background: var(--zand); font-family: var(--kop); font-size: 1.1rem; line-height: 1.65; color: var(--inkt); }
.citaat-kort::before { content: "\201C"; display: block; height: 2.2rem; font-family: var(--kop); font-size: 4rem; line-height: 1; color: var(--rood); }
.citaat-kort cite { display: flex; align-items: center; gap: var(--r-3); margin-top: var(--r-5); font-family: var(--romp); font-style: normal; font-size: var(--fs-small); color: var(--zacht); }
@media (max-width: 960px) {
  .tweeluik, .tweeluik--om { grid-template-columns: 1fr; }
  .tweeluik--om .tweeluik__beeld { order: 0; }
  .tweeluik__beeld img { aspect-ratio: 4 / 3; }
  .tweeluik__beeld .strepen { left: auto; right: -.5rem; bottom: -1.5rem; }
}

/* ----------------------------------------------------------- reviews */
.sterren { display: inline-flex; gap: 2px; }
.sterren svg { width: 1rem; height: 1rem; fill: var(--ster); }
.recensies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); }
.recensie { display: flex; flex-direction: column; margin: 0; padding: var(--r-6); background: var(--wit); border: 1px solid var(--lijn); }
.recensie blockquote { margin: var(--r-4) 0 0; font-family: var(--kop); font-size: 1.05rem; line-height: 1.65; color: var(--inkt); }
.recensie figcaption { display: flex; align-items: center; gap: var(--r-3); margin-top: auto; padding-top: var(--r-5); font-size: var(--fs-small); color: var(--zacht); }
.avatar { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--zand-2); }
.avatar svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--zacht); stroke-width: 1.6; stroke-linecap: round; }
.sectie--zand .recensie .avatar { background: var(--zand); }
.recensie figcaption strong { display: block; color: var(--inkt); font-weight: 500; }
@media (max-width: 960px) { .recensies { grid-template-columns: 1fr; } .recensies .recensie:nth-child(n+4) { display: none; } }
.reviews { columns: 2 22rem; column-gap: var(--gat); }
.reviews .recensie { break-inside: avoid; margin-bottom: var(--gat); }
.reviews .recensie blockquote { white-space: pre-line; }

/* ---------------------------------------------------------- CTA-band */
.cta { position: relative; overflow: hidden; }
.cta__binnen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gat-groot); align-items: end; }
.cta h2 { font-size: var(--fs-h2); }
.cta p { margin-top: var(--r-4); font-size: var(--fs-lead); color: var(--op-donker-zacht); max-width: 34rem; }
.cta__acties { display: grid; gap: var(--r-4); justify-items: start; }
.cta__tel { display: inline-flex; align-items: center; gap: var(--r-3); color: var(--op-donker); font-weight: 500; }
.cta__tel svg { width: 1rem; height: 1rem; fill: currentColor; }
.cta__tel:hover { color: var(--wit); text-decoration: underline; }
.cta .strepen { right: var(--rand); top: calc(-1 * var(--r-5)); opacity: .14; }
.cta .strepen line { stroke: var(--wit); }
@media (max-width: 860px) { .cta__binnen { grid-template-columns: 1fr; align-items: start; } }

/* ------------------------------------------------- dienstpagina-blokken */
.kenmerken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); }
.kenmerk { padding: var(--r-6); background: var(--wit); border: 1px solid var(--lijn); }
.kenmerk h3 { font-size: 1.2rem; }
.kenmerk p { margin-top: var(--r-3); color: var(--zacht); font-size: 1rem; }
.kenmerk ul { margin: var(--r-3) 0 0; padding-left: 1.1rem; color: var(--zacht); font-size: 1rem; }
.kenmerk li::marker { color: var(--rood); }
.sectie--zand .kenmerk { border-color: transparent; }
@media (max-width: 960px) { .kenmerken { grid-template-columns: 1fr; } }
.vinkjes { display: grid; gap: var(--r-3); }
.vinkjes li { position: relative; padding-left: 1.9rem; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: .5em; width: 1.05rem; height: .55rem; border-left: 2px solid var(--rood); border-bottom: 2px solid var(--rood); transform: rotate(-45deg) translateY(-30%); }
.merken { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.merken li { padding: var(--r-1) var(--r-3); border: 1px solid var(--lijn-sterk); font-size: var(--fs-small); color: var(--tekst); }
.stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); counter-reset: stap; }
.stap { counter-increment: stap; display: flex; flex-direction: column; padding: var(--r-6); background: var(--wit); border: 1px solid var(--lijn); }
.sectie--zand .stap { border-color: transparent; }
.stap::before { content: counter(stap); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--r-5); border-radius: 50%; background: var(--rood); font-family: var(--hand); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--wit); }
.stap h3 { font-size: 1.15rem; }
.stap p { margin-top: var(--r-2); color: var(--zacht); font-size: 1rem; }
@media (max-width: 960px) { .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stappen { grid-template-columns: 1fr; gap: var(--r-3); } .stap { flex-direction: row; flex-wrap: wrap; column-gap: var(--r-4); padding: var(--r-5); } .stap::before { margin-bottom: 0; } .stap h3 { align-self: center; flex: 1; } .stap p { flex-basis: 100%; } }
.voorbeeld { margin: 0; padding: var(--r-6); background: var(--wit); border: 1px solid var(--lijn); }
.voorbeeld ol { margin: var(--r-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--r-2); counter-reset: dag; }
.voorbeeld li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--r-3); padding-bottom: var(--r-2); border-bottom: 1px solid var(--lijn); font-size: 1rem; }
.voorbeeld li b { font-weight: 500; color: var(--rood); }
.voorbeeld p { margin-top: var(--r-4); font-size: var(--fs-small); color: var(--zacht); }
.notitie { padding: var(--r-5) var(--r-6); background: var(--zand); border-left: 2px solid var(--rood); }
.notitie h3 { font-size: 1.15rem; }
.notitie p { margin-top: var(--r-2); }

/* ------------------------------------------------------ fotogalerij */
.galerij { columns: 4 14rem; column-gap: var(--r-3); }
.galerij a { position: relative; display: block; margin-bottom: var(--r-3); overflow: hidden; break-inside: avoid; background: var(--zand-2); }
.galerij img { width: 100%; height: auto; transition: transform .8s var(--ease), opacity .3s; }
.galerij a::after { content: ""; position: absolute; inset: 0; background: rgba(28, 26, 24, 0); transition: background-color var(--snel); }
.galerij a:hover img { transform: scale(1.03); }
.galerij a:hover::after { background: rgba(28, 26, 24, .08); }
.galerij--meer a:nth-child(n+13) { display: none; }
.galerij--alles a:nth-child(n+13) { display: block; }
.galerij-meer { display: flex; justify-content: center; margin-top: var(--r-6); }
@media (max-width: 600px) { .galerij { columns: 2; column-gap: var(--r-2); } .galerij a { margin-bottom: var(--r-2); } }

/* categorie-tabs bij realisaties */
.tabs { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-bottom: var(--r-7); }
.tabs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--r-5); border: 1px solid var(--lijn-sterk); border-radius: 999px; font-size: .9375rem; font-weight: 500; color: var(--tekst); transition: border-color var(--snel), background-color var(--snel), color var(--snel); }
.tabs a:hover { border-color: var(--inkt); color: var(--inkt); }
.tabs a[aria-current="page"] { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }
.paginakop--midden .tabs { justify-content: center; margin: var(--r-6) 0 0; }
@media (max-width: 600px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding: 0 var(--rand) var(--r-2); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; }
  .paginakop--midden .tabs { justify-content: flex-start; }
}

/* overzicht realisaties */
.albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat) var(--gat); }
.album { display: block; color: var(--inkt); }
.album__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--zand-2); }
.album__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.album:hover .album__foto img { transform: scale(1.04); }
.album__tekst { display: flex; align-items: baseline; justify-content: space-between; gap: var(--r-3); padding-top: var(--r-4); }
.album__tekst h2 { font-size: 1.25rem; }
.album__tekst span { font-size: var(--fs-small); color: var(--zacht); white-space: nowrap; }
@media (max-width: 960px) { .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .albums { grid-template-columns: 1fr; } }

.feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); }
.feiten li { padding-top: var(--r-4); border-top: 1px solid var(--lijn-sterk); }
.feiten strong { display: block; font-family: var(--kop); font-weight: 400; font-size: 1.6rem; color: var(--inkt); }
.feiten span { display: block; margin-top: var(--r-1); color: var(--zacht); font-size: 1rem; }
@media (max-width: 600px) { .feiten { grid-template-columns: 1fr; } }

/* ------------------------------------------- bestaande inhoudspagina's
   Lokale pagina's (keukens-brugge enz.), juridisch, sitemap, zoeken. */
.pagina { width: 100%; max-width: calc(var(--breed) + 2 * var(--rand)); margin: 0 auto; padding: clamp(2rem, 1.2rem + 3vw, 4rem) var(--rand) 0; }
.kolommen-pagina { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gat-groot); align-items: start; }
.tekst > .h1, .tekst > h1 { margin-bottom: var(--r-6); }
.tekst > .h1::before, .gecentreerd .h1::before { content: "Sterk in maatwerk"; display: flex; margin-bottom: var(--r-2); font-family: var(--hand); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); font-weight: 600; line-height: 1.1; letter-spacing: 0; color: var(--rood); }
.zij__plak { position: sticky; top: calc(var(--kop-h-klein) + var(--r-6)); }
.foto-kader { position: relative; margin: 0 0 var(--r-5) var(--r-5); }
.foto-kader::before { content: ""; position: absolute; left: calc(-1 * var(--r-5)); bottom: calc(-1 * var(--r-5)); width: 60%; height: 60%; background: var(--zand-2); }
.foto-kader img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gecentreerd { max-width: var(--breed); margin: 0 auto; }
.gecentreerd > .tekst-smal { max-width: var(--smal); }
.gecentreerd > .tekst-smal--midden { margin: 0 auto; text-align: center; }
.gecentreerd .h1 { margin-bottom: var(--r-6); }
.gecentreerd .h1--midden::before, .tekst-smal--midden .h1::before { justify-content: center; }
.h1--los { margin-bottom: 0 !important; }
.blok { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.inhoud > .blok { margin-top: var(--r-6); }
.inhoud > .blok + * { margin-top: var(--r-6); }
.blok > * + * { margin-top: var(--r-3); }
.blok--grijs { background: var(--zand); }
.blok--grijs > :first-child { margin-top: 0; }
.blok--donker { background: var(--donker); color: var(--op-donker); text-align: left !important; }
.blok--donker * { text-align: left !important; }
.blok--donker h2, .blok--donker h3, .blok--donker h4, .blok--donker h5 { color: var(--wit); margin-top: 0; }
.blok--donker h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
.blok--donker h4, .blok--donker h5 { font-family: var(--romp); font-weight: 400; color: var(--op-donker-zacht); }
.blok--donker p, .blok--donker li { color: var(--op-donker-zacht); }
.blok--donker .knoppen { margin-top: var(--r-5); }
.blok--donker .knop--groot { width: auto; }
.blok--donker .kolommen { gap: var(--r-3); }
.blok--donker .kolom { width: auto; }
.kolommen { display: flex; gap: var(--gat); align-items: flex-start; }
.kolom { flex: 1 1 0; min-width: 0; }
.kolom > div > * + * { margin-top: var(--r-3); }
.kolom img { width: 100%; }
.knoppen:empty { display: none; }
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-2); margin-top: var(--r-7); }
.raster a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zand-2); }
.raster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.raster a:hover img { transform: scale(1.04); }
.sitemap ul { margin: 0; padding-left: 1.2rem; }
.sitemap li { margin: var(--r-1) 0; }
.sitemap li a { display: inline-flex; min-height: 2.75rem; align-items: center; }
@media (max-width: 860px) {
  .kolommen-pagina { grid-template-columns: minmax(0, 1fr); }
  .zij { order: -1; }
  .zij__plak { position: static; }
  .foto-kader img { aspect-ratio: 3 / 2; }
}
@media (max-width: 720px) {
  .kolommen { flex-direction: column; }
  .kolom { width: 100%; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------- formulieren */
.formulier-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gat-groot); align-items: start; }
.formulier-grid--contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.formulier { position: relative; padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); background: var(--wit); border: 1px solid var(--lijn); box-shadow: var(--schaduw); }
.formulier__groep { border: 0; margin: 0; padding: 0; }
.formulier__groep + .formulier__groep { margin-top: var(--r-7); padding-top: var(--r-6); border-top: 1px solid var(--lijn); }
.formulier__stap { display: flex; align-items: baseline; gap: var(--r-3); margin-bottom: var(--r-5); font-family: var(--kop); font-size: 1.25rem; color: var(--inkt); }
.formulier__stap b { font-family: var(--romp); font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; color: var(--rood); }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-5) var(--r-4); }
.velden .veld--breed { grid-column: 1 / -1; }
.veld { margin: 0; border: 0; padding: 0; min-width: 0; }
.formulier__groep > .veld + .veld, .formulier > .veld + .veld { margin-top: var(--r-5); }
.veld label:not(.keuze):not(.upload), .veld__vraag { display: block; margin-bottom: var(--r-2); padding: 0; font-size: .9375rem; font-weight: 500; color: var(--inkt); }
.veld__vraag small, .veld label small { font-weight: 400; color: var(--zacht); }
.veld input[type="text"], .veld input[type="email"], .veld input[type="tel"], .veld textarea, .veld select {
  display: block; width: 100%; min-height: 3.1rem; padding: .75rem .9rem; border: 1px solid var(--lijn-sterk); border-radius: var(--hoek); background: var(--wit);
  font-size: 1rem; color: var(--inkt); transition: border-color var(--snel), box-shadow var(--snel); -webkit-appearance: none; appearance: none; }
.veld textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.veld input:hover, .veld textarea:hover { border-color: var(--zacht); }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 3px rgba(184, 0, 0, .14); }
.veld ::placeholder { color: #9b948c; }
.keuzes { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.keuze { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--r-4); border: 1px solid var(--lijn-sterk); border-radius: 999px; font-size: .9375rem; color: var(--tekst); cursor: pointer; transition: border-color var(--snel), background-color var(--snel), color var(--snel); user-select: none; }
.keuze:hover { border-color: var(--inkt); }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze:has(input:checked) { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }
.keuze:has(input:focus-visible) { outline: 2px solid var(--rood); outline-offset: 2px; }
.keuze--rij { border-radius: var(--hoek); width: 100%; padding: var(--r-3) var(--r-4); min-height: 3rem; }
.keuzes--rij { flex-direction: column; }
.meer-keuzes { margin-top: var(--r-3); }
.meer-keuzes > summary { display: inline-flex; align-items: center; gap: var(--r-2); min-height: 2.75rem; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--inkt); list-style: none; }
.meer-keuzes > summary::-webkit-details-marker { display: none; }
.meer-keuzes > summary::before { content: "+"; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--lijn-sterk); border-radius: 50%; font-size: 1rem; line-height: 1; }
.meer-keuzes[open] > summary::before { content: "−"; }
.meer-keuzes .keuzes { margin-top: var(--r-2); }
.upload { display: flex; align-items: center; justify-content: center; gap: var(--r-3); min-height: 4.5rem; padding: var(--r-4); border: 1px dashed var(--lijn-sterk); border-radius: var(--hoek); background: var(--zand); font-size: .9375rem; font-weight: 500; color: var(--inkt); cursor: pointer; text-align: center; transition: border-color var(--snel); }
.upload:hover { border-color: var(--inkt); }
.upload svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--rood); stroke-width: 2; flex: none; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload:has(input:focus-visible) { outline: 2px solid var(--rood); outline-offset: 2px; }
.upload__naam { display: block; margin-top: var(--r-2); font-size: var(--fs-small); color: var(--zacht); }
.veld__hulp { display: block; margin-top: var(--r-2); font-size: var(--fs-small); color: var(--zacht); }
.formulier__voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-4); margin-top: var(--r-6); }
.formulier__voet p { font-size: var(--fs-small); color: var(--zacht); flex: 1 1 14rem; }
.verstuur { min-width: 12rem; }
.verstuur[disabled] { opacity: .6; cursor: wait; }
.form-melding { margin: 0 0 var(--r-5); padding: var(--r-4) var(--r-5); font-size: 1rem; line-height: 1.5; border-left: 3px solid; }
.form-melding--ok { background: #eef6ee; border-color: #2f7d32; color: #1d4f1f; }
.form-melding--fout { background: #fbefee; border-color: var(--rood); color: #7a0d0d; }
.lokker { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.veld--fout input, .veld--fout textarea { border-color: var(--rood); }
.veld--fout .keuze { border-color: rgba(184, 0, 0, .5); }
.veld__fout { display: block; margin-top: var(--r-2); font-size: var(--fs-small); color: var(--rood); }
.form-bedankt { padding: var(--r-6) 0; text-align: center; }
.form-bedankt svg { width: 3rem; height: 3rem; margin: 0 auto var(--r-4); stroke: #2f7d32; fill: none; stroke-width: 2; }
.form-bedankt h2 { font-size: 1.6rem; }
.form-bedankt p { margin-top: var(--r-3); color: var(--zacht); }
.contactlijst { display: grid; gap: var(--r-2); margin: 0; padding: 0; list-style: none; }
.contactlijst a, .contactlijst div { display: flex; align-items: center; gap: var(--r-4); min-height: 3.25rem; padding: var(--r-2) 0; border-bottom: 1px solid var(--lijn); color: var(--inkt); }
.contactlijst a:hover { color: var(--rood); }
.contactlijst svg { width: 1.1rem; height: 1.1rem; fill: var(--rood); flex: none; }
.contactlijst small { display: block; font-size: var(--fs-small); color: var(--zacht); line-height: 1.3; }
.contactlijst span { line-height: 1.4; }
.kaartje { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; filter: grayscale(.35); }
@media (max-width: 960px) { .formulier-grid, .formulier-grid--contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .velden { grid-template-columns: 1fr; } .verstuur { width: 100%; } }

/* --------------------------------------------------------------- voet */
.voet { background: var(--donker); color: var(--op-donker-zacht); font-size: .9375rem; }
.voet__binnen { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr)); gap: var(--gat); padding-top: var(--sectie-klein); padding-bottom: var(--r-7); }
.voet__merk img { width: 11rem; height: auto; }
.voet__merk p { margin-top: var(--r-5); max-width: 20rem; line-height: 1.65; }
.voet__sociaal { display: flex; gap: var(--r-2); margin-top: var(--r-5); }
.voet__sociaal a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; transition: border-color var(--snel), background-color var(--snel); }
.voet__sociaal a:hover { border-color: var(--wit); background: rgba(255, 255, 255, .06); }
.voet__sociaal svg { width: 1.1rem; height: 1.1rem; fill: var(--op-donker); }
.voet h2 { margin-bottom: var(--r-4); font-family: var(--romp); font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wit); }
.voet li + li { margin-top: var(--r-1); }
.voet ul a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--op-donker-zacht); transition: color var(--snel); }
.voet ul a:hover { color: var(--wit); }
.voet__contact li { display: flex; gap: var(--r-3); align-items: flex-start; }
.voet__contact svg { width: 1rem; height: 1rem; margin-top: .6rem; fill: var(--rood); flex: none; filter: brightness(1.35); }
.voet__contact li > span, .voet__contact li > a { padding: .35rem 0; min-height: 0; line-height: 1.5; }
.voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--r-3) var(--r-6); padding-top: var(--r-5); padding-bottom: var(--r-6); border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-small); }
.voet__onder nav { display: flex; flex-wrap: wrap; gap: var(--r-1) var(--r-5); }
.voet__onder a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--op-donker-zacht); }
.voet__onder a:hover { color: var(--wit); }
.voet__onder p { display: flex; align-items: center; min-height: 2.25rem; }
@media (max-width: 960px) { .voet__binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--r-7); } .voet__merk { grid-column: 1 / -1; } }
@media (max-width: 480px) { .voet__binnen { grid-template-columns: 1fr; row-gap: var(--r-6); } }

/* ------------------------------------------------------- cookiebalk */
.cc { position: fixed; left: var(--r-4); right: var(--r-4); bottom: var(--r-4); z-index: 90; max-width: 46rem; margin: 0 auto; background: var(--wit); border: 1px solid var(--lijn); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35); }
.cc__binnen { display: flex; align-items: center; gap: var(--r-5); padding: var(--r-5); }
.cc__icoon { width: 2.25rem; height: 2.25rem; flex: none; }
.cc__tekst { flex: 1 1 auto; font-size: var(--fs-small); line-height: 1.55; }
.cc__tekst a { color: var(--inkt); text-decoration: underline; }
.cc__knoppen { display: flex; align-items: center; gap: var(--r-2); flex: none; }
.cc__knop { min-height: var(--knop-h-klein); padding: 0 var(--r-4); border: 1px solid var(--rood); border-radius: var(--hoek); background: var(--rood); color: var(--wit); font-size: .9375rem; font-weight: 500; cursor: pointer; }
.cc__knop:hover { background: var(--rood-donker); }
.cc__knop--tekst { background: none; color: var(--inkt); border-color: var(--lijn-sterk); }
.cc__knop--tekst:hover { background: var(--zand); }
.cc__opties { display: none; padding: 0 var(--r-5) var(--r-5); }
.cc[data-opties] .cc__opties { display: flex; align-items: center; gap: var(--r-4); flex-wrap: wrap; }
.cc[data-opties] .cc__knoppen { display: none; }
.cc__optie { display: flex; align-items: center; gap: var(--r-2); font-size: var(--fs-small); min-height: 2.75rem; }
.cc__optie input { width: 1.1rem; height: 1.1rem; accent-color: var(--rood); }
@media (max-width: 640px) {
  .cc { left: var(--r-2); right: var(--r-2); bottom: var(--r-2); }
  .cc__binnen { flex-direction: column; align-items: stretch; gap: var(--r-3); padding: var(--r-4); }
  .cc__icoon { display: none; }
  .cc__knoppen { flex-direction: row; }
  .cc__knop { flex: 1; }
  .cc__opties { padding: 0 var(--r-4) var(--r-4); }
}

/* ------------------------------------------------------- lightbox */
.lb { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(20, 18, 16, .94); opacity: 0; transition: opacity .25s; }
.lb.lb--open { display: flex; }
.lb.lb--zichtbaar { opacity: 1; }
.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: calc(100vw - 9rem); }
.lb img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; transition: opacity .2s; }
.lb img.lb__laden { opacity: .25; }
.lb__bijschrift { margin-top: var(--r-3); text-align: center; color: #d8d2ca; font-size: var(--fs-small); }
.lb__teller { position: absolute; top: var(--r-5); left: var(--r-5); color: #b9b2a9; font-size: var(--fs-small); letter-spacing: .06em; }
.lb button { position: absolute; border: 0; background: rgba(255, 255, 255, .08); width: 3.25rem; height: 3.25rem; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background-color var(--snel); }
.lb button:hover { background: rgba(255, 255, 255, .18); }
.lb button svg { width: 1.4rem; height: 1.4rem; stroke: #fff; fill: none; stroke-width: 2; }
.lb__dicht { top: var(--r-4); right: var(--r-4); }
.lb__vorige { left: var(--r-4); top: calc(50% - 1.625rem); }
.lb__volgende { right: var(--r-4); top: calc(50% - 1.625rem); }
@media (max-width: 720px) {
  .lb figure { max-width: 100vw; }
  .lb img { max-height: calc(100vh - 10rem); }
  .lb__vorige, .lb__volgende { top: auto; bottom: var(--r-5); }
  .lb__vorige { left: calc(50% - 4rem); }
  .lb__volgende { right: calc(50% - 4rem); }
}

/* ------------------------------------------------------------- zoeken */
.zoekpagina { display: flex; gap: var(--r-2); margin: 0 0 var(--r-6); }
.zoekpagina input { flex: 1 1 auto; min-width: 0; min-height: var(--knop-h); padding: 0 var(--r-4); border: 1px solid var(--lijn-sterk); border-radius: var(--hoek); font: inherit; }
.zoek__aantal { color: var(--zacht); margin: 0 0 var(--r-4); }
.zoek__lijst { list-style: none; margin: 0; padding: 0; text-align: left; }
.zoek__lijst li { padding: var(--r-4) 0; border-top: 1px solid var(--lijn); }
.zoek__lijst a { font-family: var(--kop); font-size: 1.15rem; color: var(--inkt); text-decoration: underline; text-decoration-color: var(--lijn-sterk); }
.zoek__lijst p { margin: var(--r-1) 0 0; color: var(--zacht); }
@media (max-width: 480px) { .zoekpagina { flex-direction: column; } }

/* ------------------------------------------------------ verschijnen */
.js .verschijn { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .verschijn.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .verschijn { opacity: 1; transform: none; }
}
.sectie-kop .label + .h2, .sectie-kop .label + h2 { margin-top: var(--r-2); }
.voet { background: #141210; }
.kenmerk .merken { margin-top: var(--r-4); }
.kenmerken--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voetnoot { margin-top: var(--r-5); }
.stappen--zes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .kenmerken--twee { grid-template-columns: 1fr; }
  .stappen--zes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .stappen--zes { grid-template-columns: 1fr; } }
.sectie--direct { padding-top: 0; }
.paginakop--midden .kruimels { justify-content: center; }
.dienst--half { grid-column: span 3; }
/* formulierpagina's */
.paginakop--form { padding-bottom: var(--sectie); }
.formulier-intro > * + * { margin-top: var(--r-5); }
.formulier-intro .vinkjes { margin-top: var(--r-6); }
.mini-stappen { list-style: none; margin: var(--r-6) 0 0; padding: var(--r-5) 0 0; border-top: 1px solid var(--lijn); display: grid; gap: var(--r-3); }
.mini-stappen li { display: flex; align-items: center; gap: var(--r-3); color: var(--tekst); }
.mini-stappen b { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--zand-2); font-family: var(--kop); font-weight: 400; color: var(--rood); }
.notitie__link { margin-top: var(--r-4) !important; }
.formulier-intro .notitie { margin-top: var(--r-7); }
.formulier-intro .contactlijst { margin-top: var(--r-6); }
@media (min-width: 961px) { .formulier-intro { position: sticky; top: calc(var(--kop-h-klein) + var(--r-6)); } }

@media (max-width: 720px) { .inhoud table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
@media (max-width: 600px) { .dienst--half { grid-column: auto; } }
h1, h2, h3 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@media (min-width: 721px) { h1, h2, h3 { -webkit-hyphens: manual; hyphens: manual; } }
@media (max-width: 600px) { .sectie-kop { flex-direction: column; align-items: flex-start; gap: var(--r-4); margin-bottom: var(--r-6); } .sectie-kop--midden { align-items: center; } }
.inhoud p, .inhoud li, .inhoud td { overflow-wrap: anywhere; }
@media (min-width: 601px) and (max-width: 960px) { .diensten > .dienst:last-child:nth-child(odd) { grid-column: 1 / -1; } .diensten > .dienst:last-child:nth-child(odd) .dienst__foto { aspect-ratio: 21 / 9; } }
.veld select { padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%231c1a18' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: .75rem; cursor: pointer; }
.upload--klein { justify-content: flex-start; min-height: 3.1rem; padding: var(--r-3) var(--r-4); text-align: left; flex-wrap: wrap; }
.upload--klein small { font-weight: 400; color: var(--zacht); }
.formulier-intro .label + .h1 { margin-top: var(--r-2); }
.kaartje { aspect-ratio: 21 / 8; min-height: 18rem; }

/* labels vlak boven hun titel, overal dezelfde afstand */
.tweeluik__tekst .label + .h2, .paginakop__tekst .label + .h1, .materialen__blok .label + .h3 { margin-top: var(--r-2); }
.tweeluik__tekst .h2 + .citaat-kort { margin-top: var(--r-6); }
.tweeluik__tekst .citaat-kort + .tekstlink { margin-top: var(--r-6); }

/* merken: logo's in de tekstkleur van de site */
.merkenblok { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gat-groot); align-items: center; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--zand); }
.merkenblok__tekst > * + * { margin-top: var(--r-3); }
.merkenblok__tekst .label + .h3 { margin-top: var(--r-2); }
.merkenblok__tekst .h3 { font-size: var(--fs-h3); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-6) var(--r-7); }
.logos li { display: flex; align-items: center; }
.logos img { height: clamp(1.6rem, 1.3rem + .8vw, 2.25rem); width: auto; opacity: .85; transition: opacity var(--snel); }
.logos li:hover img { opacity: 1; }
.merkenblok .logos { justify-content: space-around; }
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-4) var(--r-7); margin-top: var(--r-6); padding: var(--r-5) var(--r-6); background: var(--zand); }
.partners .logos img[src*="vanmarcke"] { height: clamp(2.6rem, 2.2rem + 1vw, 3.4rem); }
@media (max-width: 860px) { .merkenblok { grid-template-columns: 1fr; } .merkenblok .logos { justify-content: flex-start; } }

/* reviews-pop-up rechtsonder */
.reviewpop { position: fixed; right: var(--r-5); bottom: var(--r-5); z-index: 80; width: min(19rem, calc(100vw - 2rem)); background: var(--wit); border: 1px solid var(--lijn); box-shadow: 0 24px 50px -22px rgba(28, 26, 24, .45); opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.reviewpop--in { opacity: 1; transform: none; }
.reviewpop__link { display: grid; gap: var(--r-1); padding: var(--r-5) var(--r-7) var(--r-5) var(--r-5); color: var(--zacht); font-size: var(--fs-small); line-height: 1.4; }
.reviewpop__link .sterren { margin-bottom: var(--r-2); }
.reviewpop__link .sterren svg { width: 1.15rem; height: 1.15rem; }
.reviewpop__link strong { font-family: var(--kop); font-weight: 400; font-size: 1.2rem; color: var(--inkt); }
.reviewpop__meer { margin-top: var(--r-2); font-weight: 500; color: var(--rood); }
.reviewpop__link:hover .reviewpop__meer { text-decoration: underline; }
.reviewpop__dicht { position: absolute; top: var(--r-2); right: var(--r-2); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; background: none; cursor: pointer; }
.reviewpop__dicht svg { width: 1rem; height: 1rem; stroke: var(--zacht); fill: none; stroke-width: 2; }
@media (max-width: 600px) { .reviewpop { right: var(--r-3); bottom: var(--r-3); } .reviewpop__link { padding: var(--r-4) var(--r-7) var(--r-4) var(--r-4); } }
body.menu-open .reviewpop { display: none; }

/* evenwichtige regels: geen losse woorden op een nieuwe regel */
h1, h2, h3, .lead, .hero__lead, .sectie-kop p, .cta p, .paginakop p, .dienst__tekst p, .kenmerk p, .stap p, .troef p, .album__tekst, .recensie blockquote { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
/* aanpak met beeld (over ons) */
.aanpak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); }
.aanpak__stap { margin: 0; display: flex; flex-direction: column; background: var(--wit); }
.aanpak__stap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aanpak__stap figcaption { padding: var(--r-5) var(--r-6) var(--r-6); }
.aanpak__stap h3 { font-size: 1.2rem; }
.aanpak__stap p { margin-top: var(--r-2); color: var(--zacht); font-size: 1rem; }
.tweeluik__tekst .knoppen { margin-top: var(--r-6); }
@media (max-width: 960px) { .aanpak { grid-template-columns: 1fr; } .aanpak__stap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .aanpak__stap img { height: 100%; aspect-ratio: auto; } }
@media (max-width: 560px) { .aanpak__stap { display: flex; } .aanpak__stap img { aspect-ratio: 16 / 10; height: auto; } }
/* lokale pagina's: korte galerij, ruimte voor de CTA-band */
.pagina { padding-bottom: var(--sectie); }
.raster--kort a:nth-child(n+10) { display: none; }
.raster-meer { display: flex; justify-content: center; margin-top: var(--r-6); }
.logos img[src*="kuppersbusch"] { height: clamp(1.05rem, .9rem + .45vw, 1.4rem); }
.merkenblok .logos { gap: var(--r-5) var(--r-6); justify-content: space-between; } .merkenblok .logos img { height: clamp(1.4rem, 1.15rem + .6vw, 1.85rem); } .merkenblok .logos img[src*="kuppersbusch"] { height: clamp(.95rem, .8rem + .4vw, 1.2rem); }