/* ==========================================================================
   Versie 3 — "Contrast"
   Hybride en editorial. Zacht Wit als basis, met een donkere split-screen
   hero en één donker vlak halverwege elke pagina. Asymmetrische rasters,
   groot typografisch spel met DM Serif Display, kleine-caps labels met
   ruime letterspacing. Goud loopt als rode draad door beide werelden;
   groen is voorbehouden aan het natuurlijke-middelen-thema.
   Zelfde klassen en HTML-structuur als versie 2 — alleen de stijl verschilt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Versie-specifieke variabelen

   De donkere en gouden vlakken hieronder herdefiniëren deze variabelen
   binnen hun eigen sectie. Daardoor kantelen alle onderliggende elementen
   automatisch mee, zonder aparte "op donker"-varianten per component.
   -------------------------------------------------------------------------- */
:root {
  --vlak:        var(--kleur-wit);
  --vlak-diep:   #ECEAE4;
  --tekst:       var(--kleur-zwart);
  --tekst-zacht: var(--kleur-zwart-70);
  --rand:        var(--kleur-zwart-12);
  --accent:      var(--kleur-goud-diep);
  --goud-tekst:  var(--kleur-goud-diep);
  --groen-tekst: var(--kleur-groen-donker);

  --hoek: 0px;      /* editorial: rechte hoeken */
  --hoek-zacht: 2px;
}

body {
  background: var(--vlak);
  color: var(--tekst);
}

::selection {
  background: var(--kleur-goud);
  color: var(--kleur-zwart);
}

/* --- Donker vlak: één per pagina, halverwege --------------------------- */
.vlak-warm {
  background: var(--kleur-zwart);
  color: var(--kleur-wit);
  --vlak: var(--kleur-zwart);
  --tekst: var(--kleur-wit);
  --tekst-zacht: var(--kleur-wit-70);
  --rand: var(--kleur-wit-14);
  --goud-tekst: var(--kleur-goud);
  --groen-tekst: var(--kleur-groen);
}

.vlak-diep { background: var(--vlak-diep); }

/* --------------------------------------------------------------------------
   Typografie — groot en editorial
   -------------------------------------------------------------------------- */
.label {
  margin: 0 0 var(--ruimte-4);
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--goud-tekst);
}

.label--groen { color: var(--groen-tekst); }

.kop-xl { font-size: var(--tekst-4xl); line-height: var(--regel-strak); }
.kop-l  { font-size: var(--tekst-3xl); letter-spacing: -0.012em; }
.kop-m  { font-size: var(--tekst-2xl); }
.kop-s  { font-size: var(--tekst-xl); }

.kop-accent {
  color: var(--kleur-goud);
  font-style: normal;
}

.lood {
  font-size: var(--tekst-lg);
  line-height: var(--regel-ruim);
  color: var(--tekst-zacht);
}

.tekstblok {
  max-width: 62ch;
  color: var(--tekst-zacht);
}

.tekstblok > p + p {
  margin-top: var(--ruimte-5);
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  min-height: 48px;
  padding: var(--ruimte-3) var(--ruimte-6);
  border-radius: var(--hoek);
  font-size: var(--tekst-basis);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  transition:
    background-color var(--duur-basis) var(--curve-uit),
    border-color var(--duur-basis) var(--curve-uit),
    color var(--duur-basis) var(--curve-uit);
}

.knop--primair {
  background: var(--kleur-goud);
  color: var(--kleur-zwart);
}

.knop--primair:hover {
  background: #E7DCBE;
}

.knop--secundair {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}

.knop--secundair:hover {
  background: var(--kleur-goud);
  border-color: var(--kleur-goud);
  color: var(--kleur-zwart);
}

.knop--klein {
  min-height: 44px;
  padding: var(--ruimte-2) var(--ruimte-5);
  font-size: var(--tekst-sm);
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
}

.pijl-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: 44px;
  font-size: var(--tekst-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--goud-tekst);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  align-self: flex-start;
  transition: gap var(--duur-basis) var(--curve-uit);
}

.pijl-link:hover { gap: var(--ruimte-4); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--laag-sticky);
  background: rgba(245, 245, 244, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kleur-zwart-12);
  transition: box-shadow var(--duur-basis) var(--curve-uit);
}

.site-header.is-gescrold {
  box-shadow: 0 4px 20px rgba(15, 17, 19, 0.07);
}

.site-header__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-5);
  min-height: 76px;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-3);
  text-decoration: none;
  color: inherit;
}

.merk__mark {
  width: 40px;
  height: 40px;
  flex: none;
}

.merk__naam {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
}

.merk__descriptor {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  color: var(--kleur-goud-diep);
  line-height: 1.4;
}

.hoofdnav {
  display: none;
  align-items: center;
  gap: var(--ruimte-7);
}

.hoofdnav__lijst {
  display: flex;
  align-items: center;
  gap: var(--ruimte-7);
}

.hoofdnav__lijst a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--tekst-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kleur-zwart-70);
  border-bottom: 2px solid transparent;
  transition: color var(--duur-snel) var(--curve-uit),
    border-color var(--duur-snel) var(--curve-uit);
}

.hoofdnav__lijst a:hover {
  color: var(--kleur-zwart);
  border-bottom-color: var(--kleur-goud);
}

.hoofdnav__lijst a[aria-current='page'] {
  color: var(--kleur-zwart);
  border-bottom-color: var(--kleur-zwart);
}

.mobiel-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  border-radius: var(--hoek);
  color: var(--kleur-zwart);
  transition: background-color var(--duur-snel) var(--curve-uit);
}

.mobiel-knop:hover { background: var(--kleur-zwart-06); }

.mobiel-knop__icoon-sluit { display: none; }
.mobiel-knop[aria-expanded='true'] .mobiel-knop__icoon-open { display: none; }
.mobiel-knop[aria-expanded='true'] .mobiel-knop__icoon-sluit { display: block; }

.mobiel-menu {
  display: block;
  background: var(--kleur-zwart);
  color: var(--kleur-wit);
  padding: var(--ruimte-5) 0 var(--ruimte-7);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
}

.mobiel-menu[hidden] { display: none; }

.mobiel-menu__lijst {
  display: flex;
  flex-direction: column;
}

.mobiel-menu__lijst a {
  display: block;
  padding: var(--ruimte-4) 0;
  font-family: var(--font-kop);
  font-size: var(--tekst-xl);
  text-decoration: none;
  border-bottom: 1px solid var(--kleur-wit-14);
}

.mobiel-menu__lijst a[aria-current='page'] { color: var(--kleur-goud); }

.mobiel-menu .knop {
  margin-top: var(--ruimte-6);
  width: 100%;
}

/* --------------------------------------------------------------------------
   Sectiekop — kleine-caps label boven een grote serif-kop, met kaderlijn
   -------------------------------------------------------------------------- */
.sectie-kop {
  margin-bottom: var(--ruimte-8);
  padding-top: var(--ruimte-5);
  border-top: 2px solid currentColor;
}

/* In deze versie blijft alles links uitgelijnd: dat hoort bij de
   asymmetrische, editorial opbouw. */
.sectie-kop--midden {
  margin-inline: 0;
  text-align: left;
}

.sectie-kop__intro {
  margin-top: var(--ruimte-5);
  max-width: 60ch;
  color: var(--tekst-zacht);
  font-size: var(--tekst-md);
}

/* De kop blijft compact, de intro eronder mag breder lopen */
.sectie-kop .kop-l,
.sectie-kop .kop-m { max-width: 20ch; }

.accentbalk {
  height: 6px;
  background: var(--verloop-accent);
}

/* --------------------------------------------------------------------------
   Hero — split-screen: donker vlak links, foto rechts
   -------------------------------------------------------------------------- */
.hero {
  padding-block: 0 var(--sectie-y);
  overflow: hidden; /* houdt het doorlopende donkere vlak binnen beeld */
}

.hero__binnen {
  display: grid;
  gap: 0;
  align-items: stretch;
}

.hero__tekst {
  position: relative;
  background: var(--kleur-zwart);
  color: var(--kleur-wit);
  /* Mobiel: het donkere vlak loopt door tot de schermranden */
  margin-inline: calc(-1 * var(--marge-zij));
  padding: var(--ruimte-9) var(--marge-zij) var(--ruimte-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__kop {
  font-size: var(--tekst-4xl);
  line-height: var(--regel-strak);
  letter-spacing: -0.015em;
}

.hero__sub {
  margin-top: var(--ruimte-6);
  max-width: 40ch;
  font-size: var(--tekst-lg);
  line-height: var(--regel-ruim);
  color: var(--kleur-wit-88);
}

.hero .knoppen { margin-top: var(--ruimte-8); }

.hero .knop--secundair {
  color: var(--kleur-wit);
  border-color: var(--kleur-wit-14);
}

.hero__beeld { display: flex; }

.hero__beeld .beeld {
  flex: 1;
  border-radius: var(--hoek);
}

/* --------------------------------------------------------------------------
   Iconen
   -------------------------------------------------------------------------- */
.icoon {
  width: 24px;
  height: 24px;
  flex: none;
}

.icoon-cirkel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--hoek);
  border: 1px solid currentColor;
  color: var(--groen-tekst);
}

.icoon-cirkel--goud { color: var(--goud-tekst); }

.icoon-cirkel .icoon {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   USP — asymmetrisch: genummerde kolommen met hairlines
   -------------------------------------------------------------------------- */
.usp-grid {
  display: grid;
  gap: var(--ruimte-7);
  counter-reset: usp;
}

.usp {
  counter-increment: usp;
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--rand);
}

.usp__titel {
  margin: var(--ruimte-5) 0 var(--ruimte-3);
  font-size: var(--tekst-lg);
}

/* Volgnummer als typografisch accent */
.usp__titel::before {
  content: '0' counter(usp);
  display: block;
  margin-bottom: var(--ruimte-2);
  font-family: var(--font-tekst);
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--goud-tekst);
}

.usp__tekst {
  color: var(--tekst-zacht);
  font-size: var(--tekst-basis);
}

/* --------------------------------------------------------------------------
   Team — asymmetrisch raster met verspringende kolommen
   -------------------------------------------------------------------------- */
.team-intro {
  max-width: 60ch;
  margin-bottom: var(--ruimte-9);
  color: var(--tekst-zacht);
  font-size: var(--tekst-md);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ruimte-6);
}

.team-kaart {
  display: flex;
  flex-direction: column;
}

.team-kaart__beeld { border-radius: var(--hoek); }

.team-kaart__tekst {
  padding-top: var(--ruimte-4);
  border-top: 2px solid currentColor;
  margin-top: var(--ruimte-4);
}

.team-kaart__naam { font-size: var(--tekst-lg); }

.team-kaart__rol {
  display: block;
  margin-top: var(--ruimte-2);
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--goud-tekst);
}

.team-kaart__bio {
  margin-top: var(--ruimte-4);
  font-size: var(--tekst-basis);
  color: var(--tekst-zacht);
}

.team-kaart__detail {
  margin-top: var(--ruimte-3);
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
  font-style: italic;
}

.team-vervolg { margin-top: var(--ruimte-9); }

.team-lang { display: grid; gap: var(--ruimte-9); }

.team-lang__persoon {
  display: grid;
  gap: var(--ruimte-5);
  align-items: start;
  padding-bottom: var(--ruimte-9);
  border-bottom: 1px solid var(--rand);
}

.team-lang__persoon:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.team-lang__beeld { border-radius: var(--hoek); }

/* --------------------------------------------------------------------------
   Diensten
   -------------------------------------------------------------------------- */
.diensten-blok { display: grid; gap: var(--ruimte-9); }

.blok-titel {
  font-size: var(--tekst-xl);
  padding-bottom: var(--ruimte-3);
  border-bottom: 2px solid currentColor;
}

.blok-intro {
  margin-top: var(--ruimte-4);
  margin-bottom: var(--ruimte-6);
  color: var(--tekst-zacht);
  font-size: var(--tekst-basis);
}

.checklist { display: grid; }

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-4);
  padding-block: var(--ruimte-3);
  border-bottom: 1px solid var(--rand);
}

.checklist__vink {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--goud-tekst);
}

.checklist__naam { font-weight: 600; }

.checklist__uitleg {
  display: block;
  margin-top: var(--ruimte-1);
  font-weight: 400;
  color: var(--tekst-zacht);
  font-size: var(--tekst-basis);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--ruimte-2) var(--ruimte-4);
  border-radius: var(--hoek);
  border: 1px solid var(--rand);
  font-size: var(--tekst-sm);
  font-weight: 500;
}

.maatwerk-zin {
  margin-top: var(--ruimte-6);
  font-size: var(--tekst-basis);
  color: var(--tekst-zacht);
}

.extra-grid { display: grid; gap: var(--ruimte-6); }

.extra-kaart {
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--rand);
}

.extra-kaart__titel {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  font-size: var(--tekst-lg);
}

.extra-kaart__titel .icoon {
  width: 18px;
  height: 18px;
  color: var(--goud-tekst);
}

.extra-kaart__tekst {
  margin-top: var(--ruimte-3);
  font-size: var(--tekst-basis);
  color: var(--tekst-zacht);
}

.maatwerk {
  padding: var(--ruimte-8);
  background: var(--vlak-diep);
  border-left: 6px solid var(--kleur-goud);
}

/* --------------------------------------------------------------------------
   Waarden
   -------------------------------------------------------------------------- */
.waarden-grid { display: grid; gap: var(--ruimte-7); }

.waarde {
  padding-top: var(--ruimte-5);
  border-top: 2px solid currentColor;
}

.waarde__titel {
  margin: var(--ruimte-5) 0 var(--ruimte-3);
  font-size: var(--tekst-xl);
}

.waarde__tekst {
  color: var(--tekst-zacht);
  font-size: var(--tekst-basis);
}

/* --------------------------------------------------------------------------
   Natuur — het enige vlak waar groen dominant is
   -------------------------------------------------------------------------- */
.natuur-banner {
  background: var(--kleur-groen);
  color: var(--kleur-zwart);
  padding-block: var(--ruimte-9);
  --tekst-zacht: rgba(15, 17, 19, 0.8);
  --goud-tekst: var(--kleur-zwart);
  --groen-tekst: var(--kleur-zwart);
}

.natuur-banner__binnen {
  display: grid;
  gap: var(--ruimte-5);
  align-items: center;
}

.natuur-banner__zin {
  font-size: var(--tekst-3xl);
  letter-spacing: -0.012em;
}

.natuur-banner__sub {
  max-width: 58ch;
  font-size: var(--tekst-md);
  color: rgba(15, 17, 19, 0.82);
}

.natuur-banner__icoon { width: 48px; height: 48px; }

.natuur-sectie {
  display: grid;
  gap: var(--ruimte-8);
  align-items: start;
}

.natuur-sectie__beeld { border-radius: var(--hoek); }

/* --------------------------------------------------------------------------
   Afsluitende CTA — goud vlak als typografisch slotakkoord
   -------------------------------------------------------------------------- */
.cta-blok {
  background: var(--kleur-goud);
  color: var(--kleur-zwart);
  --tekst-zacht: rgba(15, 17, 19, 0.78);
  --goud-tekst: var(--kleur-zwart);
}

.cta-blok__binnen {
  display: grid;
  gap: var(--ruimte-5);
  max-width: 34ch;
}

.cta-blok__kop {
  font-size: var(--tekst-3xl);
  letter-spacing: -0.012em;
}

.cta-blok__tekst {
  max-width: 52ch;
  color: rgba(15, 17, 19, 0.8);
  font-size: var(--tekst-md);
}

.cta-blok .knop--primair {
  justify-self: start;
  margin-top: var(--ruimte-3);
  background: var(--kleur-zwart);
  color: var(--kleur-goud);
}

.cta-blok .knop--primair:hover { background: #1E2226; }

/* --------------------------------------------------------------------------
   Paginakop — donkere kop op de binnenpagina's
   -------------------------------------------------------------------------- */
.paginakop {
  background: var(--kleur-zwart);
  color: var(--kleur-wit);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--ruimte-10);
  --tekst-zacht: var(--kleur-wit-88);
  --goud-tekst: var(--kleur-goud);
}

.paginakop__kop {
  font-size: var(--tekst-4xl);
  max-width: 18ch;
  letter-spacing: -0.015em;
}

.paginakop__intro {
  margin-top: var(--ruimte-6);
  max-width: 58ch;
  font-size: var(--tekst-lg);
  line-height: var(--regel-ruim);
  color: var(--kleur-wit-88);
}

.paginakop__intro + .paginakop__intro {
  margin-top: var(--ruimte-5);
  font-size: var(--tekst-md);
  color: var(--kleur-wit-70);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--ruimte-9); align-items: start; }

.formulier {
  padding: var(--ruimte-6);
  background: var(--vlak-diep);
  border-top: 6px solid var(--kleur-zwart);
}

.formulier__kop {
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-7);
}

.veld { margin-bottom: var(--ruimte-5); }

.veld__label {
  display: block;
  margin-bottom: var(--ruimte-2);
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.veld__optioneel {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--tekst-zacht);
}

.veld__invoer {
  width: 100%;
  min-height: 48px;
  padding: var(--ruimte-3) var(--ruimte-4);
  font-size: 1rem;
  background: var(--kleur-wit);
  border: 1px solid rgba(15, 17, 19, 0.28);
  border-radius: var(--hoek);
  transition: border-color var(--duur-snel) var(--curve-uit),
    box-shadow var(--duur-snel) var(--curve-uit);
}

.veld__invoer:hover { border-color: rgba(15, 17, 19, 0.5); }

.veld__invoer:focus-visible {
  outline: none;
  border-color: var(--kleur-zwart);
  box-shadow: 0 0 0 3px var(--kleur-goud-40);
}

textarea.veld__invoer {
  min-height: 150px;
  line-height: var(--regel-basis);
}

select.veld__invoer {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1113' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ruimte-4) center;
  background-size: 18px 18px;
  padding-right: var(--ruimte-8);
}

.veld__invoer.is-fout {
  border-color: #B3261E;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

.veld__hulp {
  margin-top: var(--ruimte-2);
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
}

.veld__fout {
  display: block;
  margin-top: var(--ruimte-2);
  min-height: 1.25em;
  font-size: var(--tekst-sm);
  font-weight: 500;
  color: #B3261E;
}

.formulier__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-4);
  margin-top: var(--ruimte-7);
}

.formulier .knop--primair {
  background: var(--kleur-zwart);
  color: var(--kleur-goud);
}

.formulier .knop--primair:hover { background: #1E2226; }

.formulier__privacy {
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
  max-width: 34ch;
}

.knop[aria-busy='true'],
.knop:disabled {
  opacity: 0.6;
  cursor: progress;
}

.bevestiging {
  margin-top: var(--ruimte-6);
  padding: var(--ruimte-5);
  background: var(--kleur-wit);
  border-left: 6px solid var(--kleur-groen);
}

.bevestiging[hidden] { display: none; }

.bevestiging__kop {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  font-family: var(--font-tekst);
  font-size: var(--tekst-md);
  font-weight: 600;
  color: var(--kleur-groen-donker);
}

.bevestiging__sub {
  margin-top: var(--ruimte-2);
  font-size: var(--tekst-basis);
  color: var(--tekst-zacht);
}

.gegevens { display: grid; gap: var(--ruimte-7); }

.gegeven { display: flex; gap: var(--ruimte-4); }

.gegeven__titel { font-size: var(--tekst-lg); }

.gegeven__tekst {
  margin-top: var(--ruimte-2);
  font-size: var(--tekst-basis);
  color: var(--tekst-zacht);
}

.gegeven__waarde {
  display: inline-block;
  margin-top: var(--ruimte-3);
  font-weight: 600;
}

.contact-beeld {
  margin-top: var(--ruimte-8);
}

.contact-beeld .beeld {
  border-radius: var(--hoek);
}

/* Placeholder-markering */
.placeholder {
  padding: 0.1em 0.45em;
  background: var(--kleur-goud-22);
  border-bottom: 1px dashed var(--kleur-goud-diep);
  font-family: var(--font-tekst);
  font-size: 0.92em;
  font-weight: 500;
  /* Bewust géén `white-space: nowrap`: een lange placeholder zou dan op
     smalle schermen de pagina breder maken dan het scherm. */
  overflow-wrap: break-word;
}

/* Binnen donkere en gouden vlakken een leesbare variant */
.vlak-warm .placeholder,
.paginakop .placeholder {
  background: var(--kleur-wit-08);
  border-bottom-color: var(--kleur-goud);
  color: var(--kleur-goud);
}

.cta-blok .placeholder,
.natuur-banner .placeholder {
  background: rgba(15, 17, 19, 0.1);
  border-bottom-color: var(--kleur-zwart);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--kleur-zwart);
  color: var(--kleur-wit-88);
  padding-block: var(--ruimte-9) var(--ruimte-6);
}

.site-footer .merk__descriptor { color: var(--kleur-goud); }

.site-footer__binnen { display: grid; gap: var(--ruimte-8); }

.site-footer__tagline {
  margin-top: var(--ruimte-5);
  font-family: var(--font-kop);
  font-size: var(--tekst-xl);
  color: var(--kleur-goud);
}

.site-footer__merkzin {
  margin-top: var(--ruimte-3);
  max-width: 40ch;
  font-size: var(--tekst-basis);
  color: var(--kleur-wit-70);
}

.site-footer__titel {
  font-family: var(--font-tekst);
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kleur-goud);
  margin-bottom: var(--ruimte-4);
}

.site-footer__lijst { display: grid; gap: var(--ruimte-1); }

.site-footer__lijst a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--kleur-wit-88);
}

.site-footer__lijst a:hover { color: var(--kleur-goud); }

.site-footer__contact {
  display: grid;
  gap: var(--ruimte-3);
  font-size: var(--tekst-basis);
}

.site-footer .placeholder {
  background: var(--kleur-wit-08);
  border-bottom-color: var(--kleur-goud);
  color: var(--kleur-goud);
}

.site-footer__onder {
  margin-top: var(--ruimte-8);
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--kleur-wit-14);
  font-size: var(--tekst-sm);
  color: var(--kleur-wit-70);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hero .knoppen {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .knoppen .knop { width: 100%; }
}

@media (max-width: 379px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 600px) {
  .usp-grid,
  .extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .natuur-banner__binnen {
    grid-template-columns: auto 1fr;
    column-gap: var(--ruimte-7);
  }

  .formulier { padding: var(--ruimte-8); }

  .team-lang__persoon {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--ruimte-8);
  }
}

@media (min-width: 900px) {
  .mobiel-knop { display: none; }
  .mobiel-menu { display: none !important; }
  .hoofdnav { display: flex; }

  /* Split-screen: het donkere vlak loopt door tot de linker schermrand */
  .hero__binnen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hero__tekst {
    margin-inline: calc(-1 * var(--ruimte-8)) 0;
    padding: var(--ruimte-10) var(--ruimte-8);
  }

  .hero__tekst::before {
    content: '';
    position: absolute;
    inset-block: 0;
    right: 100%;
    width: 100vw;
    background: var(--kleur-zwart);
  }

  /* De foto loopt aan de andere kant door tot de rechter schermrand.
     Overschot wordt afgevangen door `overflow: hidden` op .hero. */
  .hero__beeld {
    margin-right: calc(-1 * (var(--marge-zij) + max(0px, (100vw - var(--breedte-max)) / 2)));
  }

  .hero__beeld .beeld { min-height: 460px; }

  /* Asymmetrische rasters */
  .usp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ruimte-6);
  }

  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Verspringende kolommen geven het teamraster ritme */
  .team-grid > :nth-child(even) { margin-top: var(--ruimte-8); }

  .waarden-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .extra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .diensten-blok {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--ruimte-10);
    align-items: start;
  }

  .natuur-sectie {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--ruimte-10);
  }

  /* Kop links, tekst en knop rechts — asymmetrisch slotakkoord */
  .cta-blok__binnen {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--ruimte-10);
    row-gap: var(--ruimte-4);
  }

  .cta-blok .label         { grid-column: 1; grid-row: 1; }
  .cta-blok__kop           { grid-column: 1; grid-row: 2; }
  .cta-blok__tekst         { grid-column: 2; grid-row: 1 / 3; }
  .cta-blok .knop--primair { grid-column: 2; grid-row: 3; }

  .contact-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--ruimte-10);
  }

  .site-footer__binnen {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--ruimte-9);
  }

  .maatwerk { padding: var(--ruimte-9); }
}