/* ==========================================================================
   Versie 1 — "Avondgoud"
   Donker en luxe, dicht op het brandboard. Diep Zwart als basis, afgewisseld
   met Steen Grijs. Koppen in DM Serif Display, accentwoorden in Glans Goud.
   Veel donkerruimte, dunne gouden lijnen, weinig ronde vormen.
   Zelfde klassen en HTML-structuur als versie 2 — alleen de stijl verschilt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Versie-specifieke variabelen
   -------------------------------------------------------------------------- */
:root {
  --vlak:        var(--kleur-zwart);
  --vlak-warm:   var(--kleur-grijs);
  --vlak-diep:   #16181B;   /* tussen Diep Zwart en Steen Grijs in */
  --tekst:       var(--kleur-wit);
  --tekst-zacht: var(--kleur-wit-70);
  --rand:        var(--kleur-goud-22);
  --accent:      var(--kleur-goud);
  --goud-tekst:  var(--kleur-goud);

  /* Hoeken blijven bewust strak in deze versie */
  --hoek: var(--radius-xs);
  --hoek-groot: 2px;
}

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

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

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
.label {
  margin: 0 0 var(--ruimte-4);
  font-size: var(--tekst-xs);
  font-weight: 500;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  color: var(--kleur-goud);
}

/* Fijn gouden streepje vóór elk label — brandboard-detail */
.label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: var(--ruimte-3);
  vertical-align: 0.28em;
  background: var(--kleur-goud);
}

.label--groen { color: var(--kleur-groen); }
.label--groen::before { background: var(--kleur-groen); }

.kop-xl { font-size: var(--tekst-4xl); line-height: var(--regel-strak); }
.kop-l  { font-size: var(--tekst-3xl); }
.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 — goud vlak met donkere tekst
   -------------------------------------------------------------------------- */
.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: var(--kleur-goud);
  border-color: var(--kleur-goud-40);
}

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

.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-weight: 500;
  letter-spacing: 0.04em;
  color: var(--kleur-goud);
  text-decoration: none;
  border-bottom: 1px solid var(--kleur-goud-40);
  align-self: flex-start;
  transition: gap var(--duur-basis) var(--curve-uit),
    border-color var(--duur-basis) var(--curve-uit);
}

.pijl-link:hover {
  gap: var(--ruimte-3);
  border-color: var(--kleur-goud);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--laag-sticky);
  background: rgba(15, 17, 19, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duur-basis) var(--curve-uit);
}

.site-header.is-gescrold {
  border-bottom-color: var(--kleur-goud-22);
}

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

.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: 500;
  letter-spacing: 0.18em;
  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);
  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: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kleur-wit-70);
  border-bottom: 1px 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-wit);
  border-bottom-color: var(--kleur-goud-40);
}

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

.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-wit);
  transition: background-color var(--duur-snel) var(--curve-uit);
}

.mobiel-knop:hover {
  background: var(--kleur-wit-08);
}

.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;
  border-top: 1px solid var(--kleur-goud-22);
  background: var(--kleur-zwart);
  padding: var(--ruimte-5) 0 var(--ruimte-7);
  max-height: calc(100dvh - 80px);
  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-size: var(--tekst-lg);
  font-family: var(--font-kop);
  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%;
}

/* --------------------------------------------------------------------------
   Sectievlakken en scheidingslijnen
   -------------------------------------------------------------------------- */
.vlak-warm { background: var(--vlak-warm); }
.vlak-diep { background: var(--vlak-diep); }

/* Dunne gouden scheidingslijn tussen secties */
.scheiding {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--kleur-goud-40) 22%,
    var(--kleur-goud-40) 78%,
    transparent 100%
  );
}

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

.sectie-kop {
  max-width: 56ch;
  margin-bottom: var(--ruimte-9);
}

.sectie-kop--midden {
  margin-inline: auto;
  text-align: center;
}

.sectie-kop--midden .label::before {
  display: none;
}

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

/* --------------------------------------------------------------------------
   Hero — editorial: tekst links, grote sfeerfoto rechts
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(4rem, 2.5rem + 6vw, 7.5rem);
  border-bottom: 1px solid var(--kleur-goud-22);
}

.hero__binnen {
  display: grid;
  gap: var(--ruimte-8);
  align-items: center;
}

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

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

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

.hero__beeld {
  position: relative;
}

.hero__beeld .beeld {
  position: relative;
  z-index: 1;
  border-radius: var(--hoek-groot);
  outline: 1px solid var(--kleur-goud-40);
  outline-offset: -1px;
}

/* Verschoven gouden lijn achter de foto */
.hero__beeld::after {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--kleur-goud-40);
  border-radius: var(--hoek-groot);
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Iconen — strak vierkantje in plaats van een cirkel
   -------------------------------------------------------------------------- */
.icoon {
  width: 24px;
  height: 24px;
  flex: none;
}

.icoon-cirkel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--hoek);
  border: 1px solid var(--kleur-goud-40);
  background: var(--kleur-goud-10);
  color: var(--kleur-goud);
}

.icoon-cirkel--goud {
  border-color: var(--kleur-goud-40);
  background: var(--kleur-goud-10);
  color: var(--kleur-goud);
}

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

/* --------------------------------------------------------------------------
   USP-kaarten
   -------------------------------------------------------------------------- */
.usp-grid {
  display: grid;
  gap: 1px;
  background: var(--kleur-goud-22);
  border: 1px solid var(--kleur-goud-22);
}

/* Rasterlijnen ontstaan door de 1px gap: een fijn gouden grid */
.usp {
  padding: var(--ruimte-7) var(--ruimte-6);
  background: var(--vlak);
  transition: background-color var(--duur-basis) var(--curve-uit);
}

.usp:hover {
  background: var(--kleur-grijs);
}

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

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

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.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-groot);
  outline: 1px solid var(--kleur-goud-22);
  outline-offset: -1px;
}

.team-kaart__tekst {
  padding-top: var(--ruimte-5);
}

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

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

.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(--kleur-wit-70);
  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(--kleur-wit-14);
}

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

.team-lang__beeld {
  border-radius: var(--hoek-groot);
  outline: 1px solid var(--kleur-goud-22);
  outline-offset: -1px;
}

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

.blok-titel {
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-2);
}

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

.checklist {
  display: grid;
  gap: 0;
}

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

.checklist__item:last-child {
  border-bottom: none;
}

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

.checklist__naam {
  font-weight: 500;
}

.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(--kleur-goud-40);
  background: transparent;
  color: var(--kleur-wit-88);
  font-size: var(--tekst-sm);
}

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

.extra-grid {
  display: grid;
  gap: 1px;
  background: var(--kleur-goud-22);
  border: 1px solid var(--kleur-goud-22);
}

.extra-kaart {
  padding: var(--ruimte-6);
  background: var(--vlak);
  transition: background-color var(--duur-basis) var(--curve-uit);
}

.extra-kaart:hover {
  background: var(--kleur-grijs);
}

.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(--kleur-goud);
}

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

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

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

.waarde {
  padding-top: var(--ruimte-6);
  border-top: 1px solid var(--kleur-goud-40);
}

.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
   -------------------------------------------------------------------------- */
/* Groen mag hier niet als vlak: op donker werkt het accent beter als lijn
   en icoon, zodat de goud-toon van de versie leidend blijft. */
.natuur-banner {
  background: var(--vlak-diep);
  border-block: 1px solid var(--kleur-groen-22);
  color: var(--kleur-wit);
  padding-block: var(--ruimte-9);
}

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

.natuur-banner .label {
  color: var(--kleur-groen);
}

.natuur-banner .label::before {
  background: var(--kleur-groen);
}

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

.natuur-banner__sub {
  max-width: 58ch;
  font-size: var(--tekst-md);
  color: var(--kleur-wit-88);
}

.natuur-banner__icoon {
  width: 44px;
  height: 44px;
  color: var(--kleur-groen);
}

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

.natuur-sectie__beeld {
  border-radius: var(--hoek-groot);
  outline: 1px solid var(--kleur-goud-22);
  outline-offset: -1px;
}

/* --------------------------------------------------------------------------
   Afsluitende CTA — gouden vlak als contrast in het donker
   -------------------------------------------------------------------------- */
.cta-blok {
  background: var(--kleur-grijs);
  border-top: 1px solid var(--kleur-goud-22);
}

.cta-blok__binnen {
  display: grid;
  gap: var(--ruimte-5);
  justify-items: center;
  text-align: center;
  max-width: 58ch;
  margin-inline: auto;
}

.cta-blok .label::before { display: none; }

.cta-blok__kop {
  font-size: var(--tekst-3xl);
  color: var(--kleur-wit);
}

.cta-blok__tekst {
  color: var(--kleur-wit-88);
  font-size: var(--tekst-md);
}

.cta-blok .knop--primair {
  margin-top: var(--ruimte-4);
}

/* --------------------------------------------------------------------------
   Paginakop
   -------------------------------------------------------------------------- */
.paginakop {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--ruimte-10);
  border-bottom: 1px solid var(--kleur-goud-22);
}

.paginakop__kop {
  font-size: var(--tekst-4xl);
  max-width: 20ch;
}

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

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

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

.formulier {
  padding: var(--ruimte-6);
  background: var(--kleur-grijs);
  border: 1px solid var(--kleur-goud-22);
  border-radius: var(--hoek-groot);
}

.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-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.veld__optioneel {
  font-weight: 400;
  color: var(--kleur-wit-70);
}

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

.veld__invoer::placeholder {
  color: rgba(245, 245, 244, 0.45);
}

.veld__invoer:hover {
  border-color: var(--kleur-goud-40);
}

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

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='%23D7C9A2' 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);
}

/* Opties krijgen in sommige browsers de systeemkleuren; expliciet zetten */
select.veld__invoer option {
  background: var(--kleur-zwart);
  color: var(--kleur-wit);
}

.veld__invoer.is-fout {
  border-color: #F2B8B5;
  box-shadow: 0 0 0 3px rgba(242, 184, 181, 0.14);
}

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

.veld__fout {
  display: block;
  margin-top: var(--ruimte-2);
  min-height: 1.25em;
  font-size: var(--tekst-sm);
  /* Lichte rose op donker: 8,9:1 — ruim binnen WCAG AA */
  color: #F2B8B5;
}

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

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

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

.bevestiging {
  margin-top: var(--ruimte-6);
  padding: var(--ruimte-5);
  border-radius: var(--hoek);
  background: rgba(127, 164, 127, 0.14);
  border: 1px 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);
}

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

.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: 500;
}

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

.contact-beeld .beeld {
  border-radius: var(--hoek-groot);
  outline: 1px solid var(--kleur-goud-22);
  outline-offset: -1px;
}

/* Placeholder-markering */
.placeholder {
  padding: 0.1em 0.45em;
  border-radius: var(--radius-xs);
  background: var(--kleur-wit-08);
  border: 1px dashed var(--kleur-goud-40);
  color: var(--kleur-goud);
  font-family: var(--font-tekst);
  font-size: 0.92em;
  /* 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;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--kleur-zwart);
  color: var(--kleur-wit-88);
  border-top: 1px solid var(--kleur-goud-22);
  padding-block: var(--ruimte-9) var(--ruimte-6);
}

.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: 500;
  letter-spacing: var(--spatie-label);
  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__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 {
    text-align: left;
    justify-items: start;
    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; }

  .hero__binnen {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--ruimte-10);
  }

  .usp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .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, 1fr) minmax(0, 1fr);
    gap: var(--ruimte-10);
    align-items: start;
  }

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

  .contact-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    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); }
}