/* ==========================================================================
   Versie 2 — "Zacht Wit"
   Licht en persoonlijk. Zacht Wit als basis, Diep Zwart als tekst,
   Fris Groen en Glans Goud als accenten. Zachte organische golf-overgangen,
   afgeronde cards met subtiele schaduw, ronde iconencirkels.
   Dit is de referentie-implementatie: de HTML-structuur van versie 1 en 3
   is hiervan afgeleid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Versie-specifieke variabelen
   -------------------------------------------------------------------------- */
:root {
  --vlak:        var(--kleur-wit);
  --vlak-warm:   #FBFAF7;   /* Zacht Wit met een spoor goud erin */
  --vlak-diep:   #EFEDE7;
  --tekst:       var(--kleur-zwart);
  --tekst-zacht: var(--kleur-zwart-70);
  --rand:        rgba(15, 17, 19, 0.1);
  --accent:      var(--kleur-groen-donker);
  --accent-knop: var(--kleur-groen-knop);
  --goud-tekst:  var(--kleur-goud-diep);
}

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

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

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

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

.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(--accent);
  font-style: normal;
}

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

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

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

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  /* min-height 48px: comfortabel raakvlak op mobiel */
  min-height: 48px;
  padding: var(--ruimte-3) var(--ruimte-6);
  border-radius: var(--radius-rond);
  font-size: var(--tekst-basis);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border: 2px 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),
    box-shadow var(--duur-basis) var(--curve-uit);
}

.knop--primair {
  background: var(--accent-knop);
  color: #fff;
  box-shadow: var(--schaduw-sm);
}

.knop--primair:hover {
  background: var(--kleur-groen-donker);
  box-shadow: var(--schaduw-md);
}

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

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

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

/* Tekstlink met pijl */
.pijl-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: 44px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--kleur-goud);
  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(--accent);
}

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

.site-header.is-gescrold {
  border-bottom-color: var(--rand);
  box-shadow: 0 6px 24px rgba(15, 17, 19, 0.06);
}

.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.14em;
  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(--goud-tekst);
  line-height: 1.4;
}

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

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

.hoofdnav__lijst a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--tekst-basis);
  font-weight: 500;
  text-decoration: none;
  color: var(--tekst-zacht);
  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(--tekst);
  border-bottom-color: var(--kleur-goud);
}

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

/* Hamburgerknop */
.mobiel-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  border-radius: var(--radius-rond);
  color: var(--tekst);
  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;
  border-top: 1px solid var(--rand);
  background: var(--vlak);
  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-size: var(--tekst-lg);
  text-decoration: none;
  border-bottom: 1px solid var(--rand);
}

.mobiel-menu__lijst a[aria-current='page'] {
  color: var(--accent);
  font-weight: 600;
}

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

/* --------------------------------------------------------------------------
   Golf-overgangen tussen secties

   Een golf heeft twee kleuren nodig: de achtergrond van het blok is de kleur
   van de sectie erbóven (klasse `van-…`), de vulling van het pad is de kleur
   van de sectie eronder (klasse `golf--…`). Zonder allebei zie je een harde
   lijn in plaats van een golf.
   Bijvoorbeeld: <div class="golf van-warm golf--wit">
   -------------------------------------------------------------------------- */
.golf {
  display: block;
  line-height: 0;
}

.golf svg {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 84px);
}

/* Kleur van de sectie erboven */
.golf.van-wit   { background: var(--vlak); }
.golf.van-warm  { background: var(--vlak-warm); }
.golf.van-diep  { background: var(--vlak-diep); }
.golf.van-groen { background: var(--kleur-groen); }
.golf.van-zwart { background: var(--kleur-zwart); }

/* Kleur van de sectie eronder */
.golf--wit svg   { fill: var(--vlak); }
.golf--warm svg  { fill: var(--vlak-warm); }
.golf--diep svg  { fill: var(--vlak-diep); }
.golf--groen svg { fill: var(--kleur-groen); }

/* --------------------------------------------------------------------------
   Sectiekop
   -------------------------------------------------------------------------- */
.sectie-kop {
  max-width: 56ch;
  margin-bottom: var(--ruimte-8);
}

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

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

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

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--vlak-warm) 0%, var(--vlak) 100%);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(4rem, 2.5rem + 6vw, 7rem);
}

.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-5);
  max-width: 46ch;
  font-size: var(--tekst-lg);
  line-height: var(--regel-ruim);
  color: var(--tekst-zacht);
}

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

.hero__beeld {
  position: relative;
}

.hero__beeld .beeld {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-lg);
}

/* Verschoven gouden kaderlijn achter de foto — decoratief */
.hero__beeld::after {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--kleur-goud);
  border-radius: var(--radius-xl);
  z-index: 0;
}

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

.icoon-cirkel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-rond);
  background: var(--kleur-groen-licht);
  color: var(--accent);
}

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

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

/* --------------------------------------------------------------------------
   USP-kaarten
   -------------------------------------------------------------------------- */
.usp-grid {
  display: grid;
  gap: var(--ruimte-5);
}

.usp {
  padding: var(--ruimte-6);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw-sm);
  transition: transform var(--duur-basis) var(--curve-uit),
    box-shadow var(--duur-basis) var(--curve-uit);
}

.usp:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-md);
}

.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-8);
  color: var(--tekst-zacht);
  font-size: var(--tekst-md);
}

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

.team-kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schaduw-sm);
  display: flex;
  flex-direction: column;
}

.team-kaart__beeld {
  border-radius: 0;
}

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

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

.team-kaart__rol {
  display: block;
  margin-top: var(--ruimte-1);
  font-size: var(--tekst-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--goud-tekst);
}

.team-kaart__bio {
  margin-top: var(--ruimte-3);
  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-8);
}

/* Uitgebreide teamsectie op Over ons: foto naast langere tekst */
.team-lang {
  display: grid;
  gap: var(--ruimte-8);
}

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

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

.team-lang__beeld {
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw-sm);
}

/* --------------------------------------------------------------------------
   Diensten: checklist en chips
   -------------------------------------------------------------------------- */
.diensten-blok {
  display: grid;
  gap: var(--ruimte-8);
}

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

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

.checklist {
  display: grid;
  gap: var(--ruimte-3);
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-3);
}

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

.checklist__naam {
  font-weight: 600;
}

.checklist__uitleg {
  display: block;
  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;
  gap: var(--ruimte-2);
  padding: var(--ruimte-2) var(--ruimte-4);
  border-radius: var(--radius-rond);
  border: 1px solid var(--kleur-goud);
  background: var(--kleur-goud-10);
  font-size: var(--tekst-sm);
  font-weight: 500;
}

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

/* Kaarten voor de extra diensten (pagina Diensten) */
.extra-grid {
  display: grid;
  gap: var(--ruimte-5);
}

.extra-kaart {
  padding: var(--ruimte-5);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  background: var(--vlak);
  box-shadow: var(--schaduw-sm);
}

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

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

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

/* Maatwerkblok */
.maatwerk {
  padding: var(--ruimte-7);
  border-radius: var(--radius-xl);
  background: var(--vlak-warm);
  border: 1px solid var(--kleur-goud-40);
}

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

.waarde {
  padding: var(--ruimte-6);
  background: var(--vlak);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rand);
  box-shadow: var(--schaduw-sm);
}

.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-banner
   -------------------------------------------------------------------------- */
.natuur-banner {
  background: var(--kleur-groen);
  color: var(--kleur-zwart);
  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-zwart);
  opacity: 0.75;
}

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

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

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

/* Tekstsectie over natuurlijke middelen (Over ons) */
.natuur-sectie {
  display: grid;
  gap: var(--ruimte-8);
  align-items: start;
}

.natuur-sectie__beeld {
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-md);
}

/* --------------------------------------------------------------------------
   Afsluitende CTA
   -------------------------------------------------------------------------- */
.cta-blok {
  background: var(--kleur-zwart);
  color: var(--kleur-wit);
}

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

.cta-blok .label {
  color: var(--kleur-goud);
}

.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 {
  background: var(--kleur-goud);
  color: var(--kleur-zwart);
  margin-top: var(--ruimte-3);
}

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

/* Dunne accentbalk goud → grijs → groen (brandboard) */
.accentbalk {
  height: 4px;
  background: var(--verloop-accent);
}

/* --------------------------------------------------------------------------
   Paginakop (Over ons / Diensten / Contact)
   -------------------------------------------------------------------------- */
.paginakop {
  background: var(--vlak-warm);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--ruimte-9);
}

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

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

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

.formulier {
  padding: var(--ruimte-6);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-xl);
  box-shadow: var(--schaduw-md);
}

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

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

.veld__label {
  display: block;
  margin-bottom: var(--ruimte-2);
  font-size: var(--tekst-sm);
  font-weight: 600;
}

.veld__optioneel {
  font-weight: 400;
  color: var(--tekst-zacht);
}

.veld__invoer {
  width: 100%;
  min-height: 48px;
  padding: var(--ruimte-3) var(--ruimte-4);
  /* 16px voorkomt automatisch inzoomen op iOS */
  font-size: 1rem;
  background: var(--vlak);
  border: 1px solid rgba(15, 17, 19, 0.22);
  border-radius: var(--radius-sm);
  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.4);
}

.veld__invoer:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--kleur-groen-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='%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-6);
}

.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);
  border-radius: var(--radius-md);
  background: var(--kleur-groen-licht);
  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-donker);
}

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

/* Directe contactgegevens */
.gegevens {
  display: grid;
  gap: var(--ruimte-6);
}

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

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

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

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

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

.contact-beeld .beeld {
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw-sm);
}

/* Placeholder-markering: laat zien wat de eigenaar nog moet invullen */
.placeholder {
  padding: 0.1em 0.45em;
  border-radius: var(--radius-xs);
  background: var(--kleur-goud-22);
  border: 1px dashed var(--kleur-goud-40);
  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;
}

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

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

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

.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: 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);
  text-decoration: underline;
}

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

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

/* --------------------------------------------------------------------------
   Responsive — mobile first, dan opschalen
   -------------------------------------------------------------------------- */

/* Smalle telefoons: CTA's onder elkaar en even breed */
@media (max-width: 479px) {
  .hero .knoppen,
  .cta-blok .knoppen {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .knoppen .knop {
    width: 100%;
  }
}

/* Kleine telefoons (< 380px): teamgrid naar één kolom */
@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;
    grid-template-areas:
      'icoon tekst';
    column-gap: var(--ruimte-6);
  }

  .natuur-banner__icoon { grid-area: icoon; align-self: center; }
  .natuur-banner__tekst { grid-area: tekst; }

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

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

@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));
  }

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

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

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

  .contact-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--ruimte-9);
  }

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