/* =====================================================================
   D&S BUITENBOUW — styles.css
   =====================================================================
   Alle styling staat in dit ene bestand.
   Wil je kleuren of lettergroottes wijzigen? Dat kan hieronder bij
   ":root". Eén keer wijzigen = op de hele site doorgevoerd.
   ===================================================================== */

:root {
  /* --- Kleuren ---------------------------------------------------- */
  --groen: #1f3d2b;          /* primair — koppen, knoppen, footer      */
  --groen-licht: #2d5740;    /* hover-variant van primair              */
  --hout: #b98b4e;           /* accent — lijnen, randen, kleine details */
  --hout-donker: #8f6837;    /* accentTEKST op lichte achtergrond      */
  --hout-licht: #cca066;     /* accentTEKST op de groene achtergrond   */
  /* Let op: er zijn drie okertinten. Dat is expres. Het originele
     --hout is te licht om als tekst op wit te lezen, en te donker om
     als tekst op groen te lezen. Daarom een donkere variant voor
     lichte vlakken en een lichte variant voor groene vlakken. Beide
     halen contrastniveau AA. Wijzigt u --hout? Pas dan ook deze twee
     aan, en controleer het contrast (zie README).                     */
  --wit: #f7f5f0;            /* achtergrond                            */
  --antraciet: #22252a;      /* tekst                                  */
  --groengrijs: #e3e7e1;     /* vlakken, randen                        */
  --grijs-tekst: #55595f;    /* secundaire tekst                       */
  --rood: #a4342a;           /* foutmeldingen                          */

  /* --- Typografie -------------------------------------------------- */
  /* Barlow: een nuchtere, stevige letter, gebaseerd op Californische
     verkeersborden. Leest als belettering op een bedrijfsbus, niet als
     een tijdschrift. Koppen in de smalle variant, tekst in de gewone. */
  --kop: "Barlow Condensed", "Arial Narrow", sans-serif;
  --tekst: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Maatvoering ------------------------------------------------- */
  --max: 1200px;             /* maximale breedte van de inhoud         */
  --smal: 760px;             /* maximale breedte van lopende tekst     */
  --radius: 3px;
  --radius-groot: 3px;
  --schaduw: 0 1px 2px rgba(31, 61, 43, .06), 0 8px 30px rgba(31, 61, 43, .07);
  --schaduw-diep: 0 20px 60px rgba(31, 61, 43, .18);
  --soepel: 400ms cubic-bezier(.2, .7, .3, 1);
}

/* --- Basis --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Bij een link naar #tuinaanleg e.d.: niet onder de vaste menubalk landen */
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Rustige overgang tussen pagina's ------------------------------ */
/* Klikt iemand naar een andere pagina, dan blijven de header en de
   WhatsApp-knop staan en vervaagt alleen de inhoud kort naar de nieuwe
   pagina. Browsers die dit niet kennen, wisselen gewoon zoals altijd.
   Sneller of trager? Pas de tijden (ms) bij de twee animaties aan. */
@view-transition { navigation: auto; }
.header { view-transition-name: header; }
.wa-knop { view-transition-name: whatsapp; }
::view-transition-old(root) { animation: 160ms ease-out both pagina-weg; }
::view-transition-new(root) { animation: 320ms cubic-bezier(.2, .7, .3, 1) 60ms both pagina-erin; }
@keyframes pagina-weg { to { opacity: 0; } }
@keyframes pagina-erin { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* --- Zacht verschijnen bij het scrollen ---------------------------- */
/* script.js zet dit aan. Afstand: de 12px. Snelheid: de 600ms.
   Zonder JavaScript of met "minder beweging" staat alles gewoon stil. */
.verschijnen-aan .verschijn {
  opacity: 0;
  transform: translateY(12px);
}
.verschijnen-aan .verschijn.is-verschenen {
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(.2, .7, .3, 1), transform 600ms cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--verschijn-wacht, 0ms);
}
@media print { .verschijnen-aan .verschijn { opacity: 1; transform: none; } }

body {
  margin: 0;
  background: var(--wit);
  color: var(--antraciet);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--kop);
  font-weight: 600;
  color: var(--groen);
  line-height: 1.05;
  margin: 0 0 .45em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }

p { margin: 0 0 1.2em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--groen); }

/* Zichtbare focus voor toetsenbordgebruikers (toegankelijkheid) */
:focus-visible {
  outline: 3px solid var(--hout-donker);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Link waarmee toetsenbordgebruikers het menu overslaan */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--groen);
  color: #fff;
  padding: .75rem 1.25rem;
  text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --- Hulpklassen --------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 5rem, var(--max)); } }

.sectie { padding: clamp(4rem, 10vw, 7.5rem) 0; }
.sectie--vlak { background: var(--groengrijs); }
.sectie--groen { background: var(--groen); }
.sectie--groen h2, .sectie--groen h3 { color: var(--wit); }
.sectie--groen p { color: rgba(247, 245, 240, .82); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sectie-kop { max-width: var(--smal); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--grijs-tekst); line-height: 1.6; }
.sectie--groen .lead { color: rgba(247, 245, 240, .82); }

/* --- Knoppen ------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--tekst);
  font-size: .95rem;
  /* 500 en niet 600: in Barlow 600 plakt de punt van de i op kleine
     knoppen aan de i vast, waardoor "tuin" op "tuln" lijkt. */
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--soepel), color var(--soepel),
              border-color var(--soepel), transform 150ms ease;
}
.knop:active { transform: translateY(1px); }

.knop--primair { background: var(--groen); color: var(--wit); }
.knop--primair:hover { background: var(--groen-licht); }

.knop--secundair {
  background: transparent;
  color: var(--groen);
  border-color: rgba(31, 61, 43, .3);
}
.knop--secundair:hover { border-color: var(--groen); background: rgba(31, 61, 43, .05); }

.knop--licht { background: var(--wit); color: var(--groen); }
.knop--licht:hover { background: #fff; }

.knop--rand-licht {
  background: transparent;
  color: var(--wit);
  border-color: rgba(247, 245, 240, .4);
}
.knop--rand-licht:hover { border-color: var(--wit); background: rgba(247, 245, 240, .1); }

.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Gewone tekstlink (bijv. "Alle projecten") */
.pijl-link {
  font-weight: 500;
  color: var(--groen);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.pijl-link:hover { text-decoration-thickness: 2px; }
.pijl-link--licht { color: var(--wit); }

/* --- Logo (tekstlogo in pure CSS, later vervangbaar) ---------------- */
/* Eén kleur, smalle vette letter: zoals belettering op een bedrijfsbus. */
.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--kop);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--groen);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}
.logo__amp { color: inherit; }
.logo__staart { font-weight: 500; margin-left: .3em; }

/* --- Header -------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 245, 240, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--soepel), background var(--soepel);
}
.header.is-gescrold { border-bottom-color: var(--groengrijs); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

.nav { display: none; }
.nav__lijst {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-size: .95rem;
  font-weight: 500;
  color: var(--antraciet);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--soepel), color var(--soepel);
}
.nav__link:hover { border-bottom-color: var(--hout); }
.nav__link[aria-current="page"] { color: var(--groen); border-bottom-color: var(--hout); }

.header__cta { display: none; }

.menu-knop {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-knop span {
  display: block;
  height: 1.5px;
  background: var(--groen);
  transition: transform 250ms ease, opacity 200ms ease;
}
.menu-knop[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-knop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-knop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobiel uitklapmenu */
.mobiel-menu {
  position: fixed;
  inset: 76px 0 0;
  z-index: 55;
  background: var(--wit);
  padding: 2rem 1.25rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
  overflow-y: auto;
}
.mobiel-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobiel-menu ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.mobiel-menu li { border-bottom: 1px solid var(--groengrijs); }
.mobiel-menu a {
  display: block;
  padding: 1.1rem .25rem;
  font-family: var(--kop);
  font-size: 1.5rem;
  color: var(--groen);
  text-decoration: none;
}
.mobiel-menu .knoppen { flex-direction: column; }
.mobiel-menu .knop { width: 100%; }

@media (min-width: 900px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .menu-knop { display: none; }
  .mobiel-menu { display: none; }
}

/* --- Hero: één grote foto met het logo erop ------------------------ */
/* De foto vult de hele breedte. Een donker laagje eroverheen houdt het
   witte logo goed leesbaar, ook als de foto later verandert. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(480px, calc(100svh - 76px), 860px);
  overflow: hidden;
  background: var(--groen);
  color: var(--wit);
  text-align: center;
}
.hero__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 80%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 38, 27, .35) 0%, rgba(20, 38, 27, .55) 100%);
}
.hero__inhoud {
  position: relative;
  z-index: 1;
  padding-block: 4rem;
}
.hero__logo {
  margin: 0;
  font-size: clamp(3.5rem, 13vw, 9rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--wit);
  text-shadow: 0 2px 24px rgba(20, 38, 27, .35);
}
.hero__logo-staart { display: block; font-weight: 500; font-size: .5em; letter-spacing: .12em; margin-top: .15em; }
.hero__sub {
  margin: 1.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--hout-licht);
  width: fit-content;
  font-family: var(--kop);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wit);
}
.hero .knoppen { justify-content: center; margin-top: 2.25rem; }

/* Kop in het midden, zoals bij "Wat wij doen" */
.sectie-kop--midden { margin-inline: auto; text-align: center; }

/* --- Voor en na: twee foto's naast elkaar --------------------------- */
.voor-na {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (min-width: 700px) { .voor-na { gap: 1.5rem; } .voor-na img { aspect-ratio: 1 / 1; } }
.voor-na figure { margin: 0; }
.voor-na img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.voor-na figcaption {
  margin-top: .5rem;
  font-family: var(--kop);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--groen);
}
/* --- Diensten (foto met tekst eronder) ------------------------------ */
.diensten-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem 1.5rem;
}
@media (min-width: 640px) {
  .diensten-grid { grid-template-columns: repeat(2, 1fr); }
  /* Tuinaanleg is het kernspecialisme en krijgt daarom dubbel gewicht */
  .diensten-grid .dienst--groot { grid-column: span 2; }
  /* Bij vier tegels sluit het raster zo netjes: de laatste tegel is
     ook dubbel zo breed (tablet: vol, half-half, vol; computer: 2+1, 1+2) */
  .diensten-grid > .dienst:last-child { grid-column: span 2; }
}
@media (min-width: 1000px) { .diensten-grid { grid-template-columns: repeat(3, 1fr); } }

/* Homepage: vier even grote foto's, twee naast elkaar */
.diensten-grid--vier { gap: 2rem 1.5rem; }
@media (min-width: 560px) {
  .diensten-grid--vier { grid-template-columns: repeat(2, 1fr); }
  .diensten-grid--vier > .dienst:last-child { grid-column: auto; }
}
.diensten-grid--vier .dienst img { height: auto; aspect-ratio: 1 / 1; }
.diensten-grid--vier .dienst h3 { margin: 0; }
/* Foto die verder is ingezoomd: het kader snijdt de rest weg */
.dienst__uitsnede { display: block; overflow: hidden; border-radius: var(--radius); margin-bottom: 1rem; }
.dienst .dienst__uitsnede img { margin-bottom: 0; border-radius: 0; }

.dienst {
  display: block;
  color: inherit;
  text-decoration: none;
}
.dienst img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
@media (min-width: 1000px) { .dienst img { height: 320px; } }
.dienst h3 { margin-bottom: .25rem; }
.dienst p { color: var(--grijs-tekst); margin: 0; max-width: 46ch; }
.dienst:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* --- Dienst-rijen (pagina Diensten) -------------------------------- */
.dienst-rij {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--groengrijs);
}
.dienst-rij:last-child { border-bottom: 0; }
.dienst-rij__beeld { border-radius: var(--radius-groot); overflow: hidden; }
/* Staand formaat (4:5): past bij de foto's, die allemaal staand zijn */
.dienst-rij__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 850px) {
  .dienst-rij { grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .dienst-rij:nth-child(even) { grid-template-columns: 6fr 5fr; }
  .dienst-rij:nth-child(even) .dienst-rij__beeld { order: 2; }
  /* Tuinaanleg is het kernspecialisme: groter beeld */
  .dienst-rij--kern { grid-template-columns: 6fr 5fr; }
}
.dienst-rij--kern { padding-top: 0; }

/* Voorbeeld uit ons werk: foto's in de volgorde van het werk.
   Telefoon: een rij die de bezoeker opzij veegt (de pagina zelf schuift
   niet opzij). Groter scherm: een raster. Een foto met "stap--breed"
   staat in het raster over de volle breedte. */
.stappen {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0 -1.25rem;          /* de rij loopt door tot de rand van het scherm */
  padding: 0 1.25rem .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.25rem;
  overscroll-behavior-x: contain;
}
.stap { flex: 0 0 78%; scroll-snap-align: start; }
.stap--breed { flex-basis: 90%; }
@media (min-width: 600px) {
  .stappen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.25rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .stap--breed { grid-column: 1 / -1; }
}
@media (min-width: 900px) { .stappen { grid-template-columns: repeat(3, 1fr); } }
.stap__beeld { border-radius: var(--radius-groot); overflow: hidden; margin-bottom: .9rem; }
.stap__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.stap--breed .stap__beeld img { aspect-ratio: 4 / 3; }
@media (min-width: 600px) { .stap--breed .stap__beeld img { aspect-ratio: 2 / 1; } }
.stap__nr {
  display: block;
  font-family: var(--kop);
  font-size: .95rem;
  color: var(--hout-donker);
  margin-bottom: .15rem;
}
.stap h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.stap p { font-size: .9rem; line-height: 1.55; color: var(--grijs-tekst); margin: 0; }

.kenmerken {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.kenmerken li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .95rem;
}
.kenmerken li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: .6rem;
  border-radius: 50%;
  background: var(--hout);
}

/* --- Projecten ----------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.filter {
  padding: .5rem 1.1rem;
  border: 1px solid var(--groengrijs);
  border-radius: 100px;
  background: transparent;
  font-family: var(--tekst);
  font-size: .875rem;
  font-weight: 500;
  color: var(--grijs-tekst);
  cursor: pointer;
  transition: all var(--soepel);
}
.filter:hover { border-color: var(--hout); color: var(--antraciet); }
.filter[aria-pressed="true"] {
  background: var(--groen);
  border-color: var(--groen);
  color: var(--wit);
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 620px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }

.project {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-groot);
  overflow: hidden;
  background: var(--groengrijs);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  animation: opkomen 400ms both;
}
.project.is-verborgen { display: none; }
/* Kaart met een eigen projectpagina is een link: geen onderstreping */
a.project { color: inherit; text-decoration: none; }

/* display:block is nodig: dit zijn <span>'s in een <button>, en een inline
   element werkt niet als anker voor de foto-teller hieronder. */
.project__beeld { display: block; position: relative; overflow: hidden; }
.project__beeld img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}

.project__aantal {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 100px;
  background: rgba(20, 38, 27, .7);
  backdrop-filter: blur(4px);
  color: var(--wit);
  font-size: .75rem;
  font-weight: 600;
}
.project__info { display: block; padding: 1.1rem 1.25rem 1.35rem; background: #fff; }
.project__info h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.project__meta {
  display: flex;
  margin-top: .1rem;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  font-size: .8rem;
  color: var(--grijs-tekst);
}
.project__meta span:not(:last-child)::after {
  content: "·";
  margin-left: .75rem;
  color: var(--hout);
}

.leeg-melding {
  padding: 3rem 0;
  color: var(--grijs-tekst);
  font-style: italic;
}

@keyframes opkomen {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --- Lightbox ------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(15, 26, 19, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  color: var(--wit);
}
.lightbox__titel { font-family: var(--kop); font-size: 1.35rem; color: var(--wit); margin: 0; }
.lightbox__sub { font-size: .85rem; color: rgba(247, 245, 240, .7); margin: .2rem 0 0; }
.lightbox__tekst { font-size: .9rem; line-height: 1.5; color: rgba(247, 245, 240, .85); margin: .5rem 0 0; max-width: 60ch; }
.lightbox__tekst:empty { display: none; }

.lightbox__sluit {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 245, 240, .25);
  border-radius: 50%;
  background: transparent;
  color: var(--wit);
  cursor: pointer;
  transition: background var(--soepel);
}
.lightbox__sluit:hover { background: rgba(247, 245, 240, .12); }

.lightbox__beeld {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 1rem;
  min-height: 0;
}
.lightbox__beeld img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 245, 240, .12);
  backdrop-filter: blur(6px);
  color: var(--wit);
  cursor: pointer;
  transition: background var(--soepel);
}
.lightbox__nav:hover { background: rgba(247, 245, 240, .28); }
.lightbox__nav--vorige { left: .5rem; }
.lightbox__nav--volgende { right: .5rem; }
@media (min-width: 700px) {
  .lightbox__nav--vorige { left: 1.5rem; }
  .lightbox__nav--volgende { right: 1.5rem; }
}

.lightbox__voet {
  padding: 1rem 1.5rem 1.75rem;
  color: rgba(247, 245, 240, .75);
  font-size: .9rem;
  text-align: center;
}
.lightbox__teller { font-variant-numeric: tabular-nums; color: var(--hout-licht); font-weight: 600; }

/* --- Zo gaat het: vier stappen naast elkaar ------------------------- */
.waarom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .waarom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .waarom-grid { grid-template-columns: repeat(4, 1fr); } }
.waarom { border-top: 1px solid rgba(247, 245, 240, .25); padding-top: 1rem; }
.waarom h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.waarom p { margin: 0; }

/* --- Reviews ------------------------------------------------------- */
.reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 700px) { .reviews { grid-template-columns: repeat(2, 1fr); } }

.review {
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--groengrijs);
  border-radius: var(--radius-groot);
  display: flex;
  flex-direction: column;
}
.review__sterren { display: flex; gap: 2px; margin-bottom: 1rem; color: var(--hout-donker); }
.review blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--tekst);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--antraciet);
  flex: 1;
}
.review__wie { font-size: .875rem; color: var(--grijs-tekst); margin: 0; }
.review__wie strong { color: var(--antraciet); font-weight: 500; }

/* --- Werkgebied ---------------------------------------------------- */
.werkgebied > * { max-width: var(--smal); }

/* --- Contactblok / CTA --------------------------------------------- */
.cta-blok .knoppen { margin-top: 2rem; }

/* --- Over ons (lange tekst) ---------------------------------------- */
.verhaal { max-width: var(--smal); }
.verhaal p { font-size: 1.0625rem; }
.verhaal h2 { margin-top: 2.5rem; }
.verhaal h2:first-child { margin-top: 0; }

.duo-beeld { border-radius: var(--radius-groot); overflow: hidden; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.duo-beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.duo-beeld figcaption {
  padding: .9rem 1.25rem;
  background: var(--groengrijs);
  font-size: .85rem;
  color: var(--grijs-tekst);
}

.personen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 700px) { .personen { grid-template-columns: repeat(2, 1fr); } }
.persoon__beeld { border-radius: var(--radius-groot); overflow: hidden; margin-bottom: 1.25rem; }
.persoon__beeld img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.persoon h3 { margin-bottom: .1rem; }
.persoon__rol {
  color: var(--grijs-tekst);
  margin: 0 0 .75rem;
}

/* --- Formulieren --------------------------------------------------- */
.contact-lay {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 950px) {
  .contact-lay { grid-template-columns: 3fr 2fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
}

.formulier { display: grid; gap: 1.25rem; }
.veld-rij { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 600px) { .veld-rij { grid-template-columns: 1fr 1fr; } }

.veld { display: flex; flex-direction: column; gap: .4rem; }
.veld label { font-size: .875rem; font-weight: 500; }
.veld .optioneel { font-weight: 400; color: var(--grijs-tekst); }

.veld input,
.veld select,
.veld textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--groengrijs);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--tekst);
  font-size: 1rem;
  color: var(--antraciet);
  transition: border-color var(--soepel), box-shadow var(--soepel);
}
.veld textarea { min-height: 140px; resize: vertical; }
.veld select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2355595f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(31, 61, 43, .12);
}
.veld input[type="file"] {
  padding: .6rem;
  font-size: .875rem;
  background: var(--groengrijs);
  border-style: dashed;
  cursor: pointer;
}
.veld__hulp { font-size: .8rem; color: var(--grijs-tekst); margin: 0; }

/* Foutmelding per veld */
.veld.is-fout input,
.veld.is-fout select,
.veld.is-fout textarea { border-color: var(--rood); }
.veld__fout { font-size: .8rem; color: var(--rood); font-weight: 500; min-height: 0; }
.veld__fout:empty { display: none; }

/* Honeypot: verborgen veld tegen spambots — mensen zien dit niet */
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-melding {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 500;
  display: none;
}
.form-melding.is-zichtbaar { display: block; }
.form-melding--goed {
  background: var(--groengrijs);
  border-left: 3px solid var(--groen);
  color: var(--groen);
}
.form-melding--fout {
  background: #f7e9e7;
  border-left: 3px solid var(--rood);
  color: var(--rood);
}

.knop[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Tabs boven de formulieren */
.form-tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 2rem;
  padding: .3rem;
  background: var(--groengrijs);
  border-radius: 100px;
  width: fit-content;
  max-width: 100%;
}
.form-tab {
  padding: .6rem 1.25rem;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: var(--tekst);
  font-size: .875rem;
  font-weight: 500;
  color: var(--grijs-tekst);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--soepel), color var(--soepel);
}
.form-tab[aria-selected="true"] { background: #fff; color: var(--groen); box-shadow: var(--schaduw); }
.form-paneel[hidden] { display: none; }

/* Contactgegevens naast het formulier */
.contact-kaart {
  padding: 2rem 1.75rem;
  background: var(--groengrijs);
  border-radius: var(--radius-groot);
}
.contact-kaart + .contact-kaart { margin-top: 1.25rem; }
.contact-kaart h3 { font-size: 1.15rem; }
.contact-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact-lijst li { display: flex; gap: .85rem; align-items: flex-start; }
.contact-lijst svg { flex: none; margin-top: .3rem; color: var(--hout-donker); }
.contact-lijst a { color: var(--groen); text-decoration: none; border-bottom: 1px solid var(--hout); }
.contact-lijst a:hover { color: var(--groen-licht); }
.contact-lijst small { display: block; color: var(--grijs-tekst); font-size: .8rem; }

/* --- WhatsApp-knop (sticky, ook op desktop) ------------------------ */
.wa-knop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.15rem;
  border-radius: 100px;
  background: #25d366;
  color: #06331a;
  font-family: var(--tekst);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--schaduw-diep);
  transition: transform var(--soepel), background var(--soepel);
}
.wa-knop:hover { transform: translateY(-2px); background: #1fbe5a; }
.wa-knop svg { flex: none; }
.wa-knop__tekst { display: none; }
@media (min-width: 700px) {
  .wa-knop { right: 1.5rem; bottom: 1.5rem; }
  .wa-knop__tekst { display: inline; }
}

/* --- Footer -------------------------------------------------------- */
.footer {
  background: var(--groen);
  border-top: 1px solid rgba(247, 245, 240, .14);
  color: rgba(247, 245, 240, .75);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
  font-size: .925rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(247, 245, 240, .15);
}
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 3rem; } }

.footer .logo { color: var(--wit); }
.footer p { color: rgba(247, 245, 240, .7); font-size: .9rem; }

.footer h3 {
  font-size: 1.25rem;
  color: var(--wit);
  margin-bottom: .8rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer a { color: rgba(247, 245, 240, .78); text-decoration: none; }
.footer a:hover { color: var(--wit); text-decoration: underline; text-underline-offset: 3px; }
.footer :focus-visible { outline-color: var(--hout); }

.socials { display: flex; gap: .6rem; margin-top: 1.25rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 245, 240, .25);
  border-radius: 50%;
  color: rgba(247, 245, 240, .8);
  transition: background var(--soepel), border-color var(--soepel);
}
.socials a:hover { background: rgba(247, 245, 240, .12); border-color: var(--wit); color: var(--wit); }

.footer__onder {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-top: 1.75rem;
  font-size: .825rem;
  color: rgba(247, 245, 240, .55);
}
.footer__onder p { margin: 0; font-size: .825rem; }
.footer__onder ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
@media (min-width: 700px) {
  .footer__onder { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Ruimte onder de footer zodat de WhatsApp-knop niets afdekt,
   ook niet de links rechtsonder op een groot scherm */
.footer { padding-bottom: 5.5rem; }

/* --- Privacy / eenvoudige tekstpagina ------------------------------ */
.tekstpagina { max-width: var(--smal); }
.tekstpagina h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.tekstpagina ul { padding-left: 1.25rem; }
.tekstpagina li { margin-bottom: .5rem; }

/* --- Printen ------------------------------------------------------- */
@media print {
  .header, .wa-knop, .mobiel-menu, .footer, .hero__media { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- Contact: "Wat gebeurt er daarna?" ------------------------------ */
.na-aanvraag { margin: 0; padding-left: 1.25rem; display: grid; gap: .6rem; }
.na-aanvraag li { padding-left: .25rem; }
.na-aanvraag li::marker { font-family: var(--kop); font-weight: 600; color: var(--groen); }