/* ==========================================================================
   Versie 4 — "Licht & Goud"
   De gekozen combinatie: de indeling, vormentaal en opbouw van versie 2
   ("Zacht Wit") met het kleurgebruik van versie 3 ("Contrast").

   Overgenomen uit versie 2 (ongewijzigd):
     - golf-overgangen tussen secties
     - afgeronde kaarten met zachte schaduw, ronde iconencirkels
     - pil-vormige knoppen, hero met foto rechts en verschoven gouden kader
     - alle rasters, breakpoints en spacing

   Overgenomen uit versie 3 (het kleurverhaal):
     - goud is het hoofdaccent, niet groen
     - primaire knop: goud vlak met donkere tekst
     - het accentvlak halverwege de pagina is Diep Zwart in plaats van
       licht warm — dat geeft het donker/licht-ritme van versie 3
     - groen is voorbehouden aan het natuurlijke-middelen-thema
   ========================================================================== */

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

   Twee variabelen die versie 2 niet had:
     --vlak-kaart  kleur van kaarten; wordt Steen Grijs binnen donkere vlakken
     --vlak-hero   bovenkant van het hero-verloop; blijft licht, ook nu
                   --vlak-warm donker is
   -------------------------------------------------------------------------- */
:root {
  --vlak:        var(--kleur-wit);
  --vlak-kaart:  var(--kleur-wit);
  --vlak-hero:   #FBFAF7;   /* Zacht Wit met een spoor goud erin */
  --vlak-warm:   var(--kleur-zwart);   /* het donkere ritme-vlak (versie 3) */
  --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);
}

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

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

/* --------------------------------------------------------------------------
   Donkere vlakken

   Binnen deze vlakken worden de variabelen hierboven opnieuw gezet. Daardoor
   kantelt alles wat eronder valt automatisch mee — tekst, randen, kaarten,
   labels — zonder dat er per component een "op donker"-variant nodig is.
   Glans Goud (#D7C9A2) mag hier wél als tekstkleur: 11,5:1 op Diep Zwart.
   Op licht gebruiken we de verdiepte variant, zie tokens.css.
   -------------------------------------------------------------------------- */
.vlak-warm,
.paginakop {
  background: var(--kleur-zwart);
  color: var(--kleur-wit);
  --vlak-kaart:  var(--kleur-grijs);   /* brandboard: cards op donker */
  --tekst:       var(--kleur-wit);
  --tekst-zacht: var(--kleur-wit-70);
  --rand:        var(--kleur-wit-14);
  --accent:      var(--kleur-goud);
  --goud-tekst:  var(--kleur-goud);
  --groen-tekst: var(--kleur-groen);
  /* Zwarte schaduwen zijn onzichtbaar op zwart; diepte komt hier van de
     lichtere kaartkleur. */
  --schaduw-sm: none;
  --schaduw-md: none;
  --schaduw-lg: none;
}

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

/* --------------------------------------------------------------------------
   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(--groen-tekst); }

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

/* Het gouden accentwoord in een kop. Via --goud-tekst, zodat het op licht
   de leesbare diepe tint krijgt en op donker het echte Glans Goud. */
.kop-accent {
  color: var(--goud-tekst);
  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 — vorm uit versie 2 (pil), kleur uit versie 3 (goud)
   -------------------------------------------------------------------------- */
.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(--kleur-goud);
  color: var(--kleur-zwart);
  box-shadow: var(--schaduw-sm);
}

.knop--primair:hover {
  background: #E7DCBE;
  box-shadow: var(--schaduw-md);
}

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

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

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

/* --------------------------------------------------------------------------
   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(--kleur-zwart-12);
  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(--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-goud-diep);
}

/* 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(--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;
  border-top: 1px solid var(--kleur-zwart-12);
  background: var(--kleur-wit);
  color: var(--kleur-zwart);
  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(--kleur-zwart-12);
}

.mobiel-menu__lijst a[aria-current='page'] {
  color: var(--kleur-goud-diep);
  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">

   Let op: `warm` verwijst naar --vlak-warm, en dat vlak is in deze versie
   Diep Zwart. De klassenamen in de HTML zijn daarom identiek aan versie 2;
   alleen de kleur waar ze naar verwijzen is anders.
   -------------------------------------------------------------------------- */
.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); }
.golf--zwart svg { fill: var(--kleur-zwart); }

/* --------------------------------------------------------------------------
   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);
}

/* --------------------------------------------------------------------------
   Hero — layout uit versie 2, licht gehouden zodat de teamfoto het werk doet
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--vlak-hero) 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 — cirkels zijn nu goud; groen blijft voor het natuur-thema
   -------------------------------------------------------------------------- */
.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-goud-22);
  color: var(--goud-tekst);
}

/* Alias: versie 2 gebruikte deze modifier voor de gouden variant. De
   standaard is nu al goud, dus hij verandert niets meer. Blijft bestaan
   zodat bestaande HTML niet stukgaat. */
.icoon-cirkel--goud {
  background: var(--kleur-goud-22);
  color: var(--goud-tekst);
}

.icoon-cirkel--groen {
  background: var(--kleur-groen-22);
  color: var(--groen-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-kaart);
  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),
    border-color var(--duur-basis) var(--curve-uit);
}

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

/* Op donker vervalt de schaduw, dus daar geeft een gouden rand de hover aan */
.vlak-warm .usp:hover,
.vlak-warm .extra-kaart:hover,
.vlak-warm .waarde:hover {
  border-color: var(--kleur-goud-40);
}

.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-kaart);
  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-kaart);
  box-shadow: var(--schaduw-sm);
  transition: border-color var(--duur-basis) var(--curve-uit);
}

.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 — bewust licht: op deze pagina zijn de paginakop, het
   extra-vlak en de slot-CTA al donker. */
.maatwerk {
  padding: var(--ruimte-7);
  border-radius: var(--radius-xl);
  background: var(--vlak-diep);
  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-kaart);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rand);
  box-shadow: var(--schaduw-sm);
  transition: border-color var(--duur-basis) var(--curve-uit);
}

.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 — de enige plek waar Fris Groen het beeld bepaalt
   -------------------------------------------------------------------------- */
.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 {
  margin-top: var(--ruimte-3);
}

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

/* --------------------------------------------------------------------------
   Paginakop (Over ons / Diensten / Contact)
   Donker, net als het accentvlak — dit is de tegenhanger van de donkere
   hero uit versie 3.
   -------------------------------------------------------------------------- */
.paginakop {
  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-kaart);
  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(--kleur-goud-diep);
  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-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;
}

/* Groen blijft hier staan: dit is een geslaagd-melding, geen merkaccent. */
.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(--kleur-zwart-70);
}

/* 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;
}

/* Op de donkere vlakken moet de placeholder-markering ook leesbaar blijven */
.vlak-warm .placeholder,
.paginakop .placeholder {
  background: var(--kleur-wit-08);
  border-color: var(--kleur-goud-40);
  color: var(--kleur-wit);
}

/* --------------------------------------------------------------------------
   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);
  }
}