/* ════════════════════════════════════════════════════════════════════
   Vereniging Schots & Scheef — stijl.css (one-page)
   ════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — hier kleuren/spacing centraal aanpassen.
   Gebaseerd op de OFFICIËLE huisstijlkleur van de vereniging:
   limegroen #A3C401 (R163 G196 B1) uit het logo, gecombineerd met het
   bijna-zwart van het logo. Alle tekst/achtergrond-combinaties zijn
   programmatisch gecontroleerd op WCAG 2.2 AA (≥ 4,5:1 voor tekst).
   Let op: #A3C401 is te licht als TEKSTkleur (1,9:1) — daarom dient
   het als knop-/vlakkleur met DONKERE tekst (7,9:1) en als decor;
   voor groene tekst dienen de olijftinten.                            */
:root{
  --kleur-achtergrond:  #FCFCF7;  /* warm gebroken wit */
  --kleur-inkt:         #20241B;  /* bijna-zwart, zoals in het logo — 15,4:1 */
  --kleur-inkt-zacht:   #5A614F;  /* gedempte tekst — 6,3:1 */

  --kleur-lime:         #A3C401;  /* huisstijlkleur: knoppen (donkere tekst) & decor */
  --kleur-lime-donker:  #8FAD01;  /* hover op lime-knoppen (donkere tekst: 6,1:1) */
  --kleur-lime-zacht:   #D9EA8A;  /* lichter lime — vlakken/decor */
  --kleur-lime-tint:    #F3F8DD;  /* zachte lime sectie-achtergrond */
  --kleur-groen-tekst:  #55700A;  /* olijfgroen voor tekst/links — 5,5:1 */
  --kleur-groen-knop:   #4E6604;  /* donkere knop, wit erop 6,5:1 */
  --kleur-groen-donker: #3A4D02;  /* hover/koppen-accent — 9,1:1 */

  --kleur-kaart:        #FFFFFF;
  --kleur-focus:        #4E6604;  /* focusring — 6,3:1 (UI ≥ 3:1) */
  --kleur-fout:         #9E2A0E;  /* foutmeldingen — 7,3:1 */

  --font-kop:  "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", Arial, sans-serif;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --ruimte-1: .5rem;
  --ruimte-2: 1rem;
  --ruimte-3: 1.5rem;
  --ruimte-4: 2.5rem;
  --ruimte-5: 4rem;

  --schaduw-kaart: 0 6px 24px rgba(32,36,27,.08);
  --schaduw-kaart-hover: 0 14px 36px rgba(32,36,27,.15);

  --max-breedte: 72rem;

  --duur-kort: .18s;
  --duur-middel: .45s;
  --duur-lang: .7s;

  --hoogte-header: 5.5rem;
}

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

html{
  font-size:112.5%; /* royale basis (≈18px): comfortabel leesbaar */
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--kleur-inkt);
  background:var(--kleur-achtergrond);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-kop);
  line-height:1.12;
  color:var(--kleur-inkt);
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2rem, 1.3rem + 3vw, 3.2rem); font-weight:800; }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); font-weight:800; }
h3{ font-size:clamp(1.25rem, 1.05rem + .9vw, 1.6rem); font-weight:700; }
h4{ font-size:clamp(1.05rem, 1rem + .4vw, 1.25rem); font-weight:600; }
p{ margin:0 0 1em; max-width:65ch; }
ul{ padding-left:1.2em; }
li{ margin-bottom:.4em; }
img{ max-width:100%; height:auto; display:block; }

a{ color:var(--kleur-groen-tekst); text-decoration-thickness:.08em; text-underline-offset:.15em; }
a:hover{ color:var(--kleur-groen-donker); }

/* Zichtbare, contrastrijke focusring op ALLE interactieve elementen */
:focus-visible{
  outline:3px solid var(--kleur-focus);
  outline-offset:3px;
  border-radius:4px;
}

/* Alleen-voor-schermlezers tekst */
.sr-alleen{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Skip-link (eerste focusbare element) ───────────────────────── */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--kleur-groen-knop); color:#fff;
  padding:.8em 1.2em; z-index:200; border-radius:0 0 var(--radius-s) 0;
  font-weight:800; text-decoration:none;
}
.skip-link:focus{ left:0; color:#fff; }

/* ── Signatuur: "schots & scheef" — kantelende kaders ───────────── */
.scheef-l, .scheef-r{ transition:transform var(--duur-middel) ease; }
.scheef-l{ transform:rotate(-1.6deg); }
.scheef-r{ transform:rotate(1.3deg); }
/* speels detail: kaders "zetten zich recht" bij hover */
.scheef-l:hover, .scheef-r:hover{ transform:rotate(0deg); }
.markeer{
  display:inline-block;
  background:linear-gradient(0deg, var(--kleur-lime-zacht), var(--kleur-lime-zacht)) no-repeat 0 74%/100% .42em;
  transform:rotate(-.6deg);
  padding:0 .1em;
}

/* ── Intro-loader ───────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:150;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--ruimte-3);
  background:var(--kleur-achtergrond);
  transition:opacity .5s ease;
}
.loader.verbergen{ opacity:0; pointer-events:none; }
.loader[hidden]{ display:none; }
.loader__logo{
  width:min(46vw, 220px); height:auto;
  border-radius:var(--radius-m);
  animation:stuiter 1.1s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes stuiter{
  0%   { transform:translateY(-44px) scale(.7) rotate(-4deg); opacity:0; }
  55%  { transform:translateY(8px)  scale(1.05) rotate(1deg); opacity:1; }
  75%  { transform:translateY(-4px) scale(.98)  rotate(-.5deg); }
  100% { transform:translateY(0)    scale(1)    rotate(0); opacity:1; }
}
/* Rolstoelrijder: rijdt over een schuin aflopende (scheve!) lime helling
   van links naar rechts — één keer, met toenemende snelheid (ease-in,
   alsof hij de helling af rolt). Puur decoratief (aria-hidden). */
.loader__baan{
  position:relative;
  width:min(72vw, 420px); height:64px;
  overflow:hidden;
  transform:rotate(4deg);   /* de helling: links hoog, rechts laag */
}
.loader__baan::after{
  content:""; position:absolute; left:0; right:0; bottom:4px;
  height:4px; border-radius:2px;
  background:var(--kleur-lime);
}
.loader__rolstoel{
  position:absolute; bottom:6px; left:-70px;
  /* precies één rit, versnellend (cubic-bezier ease-in) */
  animation:rijden 2.1s cubic-bezier(.5,0,.85,.4) .25s 1 both;
}
@keyframes rijden{
  from{ left:-70px; }
  to  { left:100%; }
}
.loader__rolstoel .spaken{
  animation:spaken .8s linear infinite;
  transform-origin:26px 42px;
}
@keyframes spaken{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* ── Header & navigatie ─────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(252,252,247,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(32,36,27,.1);
  transition:box-shadow var(--duur-middel) ease;
}
/* krijgt een zachte schaduw zodra je scrolt (JS zet .gescrold) */
.site-header.gescrold{ box-shadow:0 4px 18px rgba(32,36,27,.1); }

.header-binnen{
  max-width:var(--max-breedte); margin:0 auto;
  padding:.6rem var(--ruimte-2);
  display:flex; align-items:center; gap:var(--ruimte-2);
  flex-wrap:wrap;
}
.merk{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--kleur-inkt);
  margin-right:auto;
}
.merk img{
  width:3rem; height:3rem; object-fit:contain; border-radius:8px;
  transition:transform var(--duur-middel) cubic-bezier(.34,1.56,.64,1);
}
.merk:hover img{ transform:rotate(-6deg) scale(1.08); }
.merk span{
  font-family:var(--font-kop); font-weight:700;
  font-size:1.05rem; line-height:1.1;
}

.nav-toggle{
  display:none;
  background:var(--kleur-groen-knop); color:#fff;
  border:none; border-radius:var(--radius-s);
  padding:.55em .8em; cursor:pointer;
  font-family:var(--font-body); font-weight:800; font-size:1rem;
}
.nav-toggle svg{ vertical-align:-3px; margin-right:.35em; }

.hoofdnav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:.15rem; flex-wrap:wrap;
}
.hoofdnav a{
  position:relative;
  display:block; padding:.5em .8em;
  text-decoration:none; font-weight:800; font-size:.92rem;
  color:var(--kleur-inkt); border-radius:999px;
}
/* geanimeerd onderstreepje dat "uitrolt" bij hover */
.hoofdnav a::after{
  content:""; position:absolute; left:.8em; right:.8em; bottom:.3em;
  height:2px; background:var(--kleur-groen-tekst);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--duur-kort) ease;
}
.hoofdnav a:hover{ color:var(--kleur-groen-donker); }
.hoofdnav a:hover::after{ transform:scaleX(1); }
/* actieve sectie (scrollspy zet aria-current) */
.hoofdnav a[aria-current]{
  background:var(--kleur-lime); color:var(--kleur-inkt);
}
.hoofdnav a[aria-current]::after{ display:none; }

@media (max-width: 64rem){
  .nav-toggle{ display:inline-block; }
  .hoofdnav{ flex-basis:100%; }
  .hoofdnav[hidden]{ display:none; }
  .hoofdnav ul{ flex-direction:column; padding:.5rem 0 1rem; }
  .hoofdnav a{ font-size:1.05rem; padding:.7em 1em; border-radius:var(--radius-s); }
  .hoofdnav a::after{ display:none; }
}

/* ── Leesvoortgang: dun lime balkje onder de header ─────────────── */
.leesbalk{
  position:absolute; left:0; bottom:-1px;
  height:3px; width:100%;
  background:var(--kleur-lime);
  transform:scaleX(0); transform-origin:left;
}

/* ── Lay-out & secties (one-page) ───────────────────────────────── */
main{ display:block; }
/* ankernavigatie: houd rekening met de sticky header */
.deel{ scroll-margin-top:var(--hoogte-header); }
.deel > .sectie:first-child{ padding-top:var(--ruimte-5); }

.sectie{
  padding:var(--ruimte-5) var(--ruimte-2);
  background:var(--kleur-achtergrond);
}
/* Lichtgroene vlakken wisselen af met het warme wit. De subtiele
   verticale gradient verzacht de overgang zonder het kleurverschil
   tussen de opeenvolgende onderdelen te verliezen. */
.sectie--tint{
  background:linear-gradient(
    180deg,
    #F8FAEC 0%,
    var(--kleur-lime-tint) 16%,
    var(--kleur-lime-tint) 84%,
    #F8FAEC 100%
  );
}
.binnen{ max-width:var(--max-breedte); margin:0 auto; }
.binnen--smal{ max-width:48rem; margin:0 auto; }

.kolommen{
  display:grid; gap:var(--ruimte-4);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width: 52rem){
  .kolommen{ grid-template-columns:1.1fr .9fr; }
  .kolommen--omgekeerd{ grid-template-columns:.9fr 1.1fr; }
}

/* ── Over ons: compacte tweekolomsindeling ─────────────────────── */
.over-ons-kop{ margin-bottom:var(--ruimte-3); }
.over-ons-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--ruimte-4);
  align-items:start;
}
.over-ons-item p:last-child{ margin-bottom:0; }
@media (min-width: 52rem){
  .over-ons-grid{ grid-template-columns:1fr 1fr; }
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-top:var(--ruimte-4);
  overflow:hidden;
}
/* het logo-vaantje van de eerste steen: groot, lichtgroen, heel
   langzaam draaiend op de achtergrond van de openingssectie */
.hero-vaan{
  position:absolute; z-index:-2;
  top:-5rem; right:-7rem;
  width:min(38rem, 95vw); height:auto;
  fill:var(--kleur-lime-zacht); opacity:.4;
  animation:vaandraai 90s linear infinite;
}
@keyframes vaandraai{
  from{ transform:rotate(9deg); }
  to  { transform:rotate(369deg); }
}

/* zachte lime gloed achter de hero */
.hero::before{
  content:""; position:absolute; z-index:-1;
  top:-14rem; right:-12rem; width:34rem; height:34rem;
  border-radius:50%;
  background:radial-gradient(closest-side, var(--kleur-lime-tint), transparent 72%);
}
/* zwevende "schotsen": kantelende blokjes als knipoog naar de naam */
.schots{
  position:absolute; z-index:-1; border-radius:8px;
  background:var(--kleur-lime-zacht); opacity:.55;
  animation:zweef 7s ease-in-out infinite;
}
.schots--1{ width:2.6rem; height:2.6rem; top:12%; left:4%;  rotate:12deg; }
.schots--2{ width:1.7rem; height:1.7rem; top:64%; left:9%;  rotate:-14deg; background:#E9F1BE; animation-delay:1.4s; }
.schots--3{ width:2rem;   height:2rem;   top:22%; right:6%; rotate:-8deg;  animation-delay:2.6s; }
.schots--4{ width:1.3rem; height:1.3rem; top:76%; right:12%; rotate:18deg; background:#E9F1BE; animation-delay:.8s; }
@keyframes zweef{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -14px; }
}

.hero .intro-label{
  display:inline-block; font-weight:800; font-size:.85rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--kleur-groen-donker); background:var(--kleur-lime-tint);
  border:1px solid var(--kleur-lime-zacht);
  border-radius:999px; padding:.3em 1em; margin-bottom:var(--ruimte-2);
  transform:rotate(-1deg);
}
.hero p.lead, .lead{ font-size:1.15rem; color:var(--kleur-inkt-zacht); }
.cta-rij{ display:flex; gap:var(--ruimte-2); flex-wrap:wrap; margin-top:var(--ruimte-3); }

/* Trapsgewijze entree — start pas NADAT de loader is gesloten:
   JS zet dan class "klaar" op <body>, waarna de site zich stukje
   voor stukje opbouwt (header, dan de hero-elementen om en om). */
.instap > *{ opacity:0; }
body.klaar .instap > *{ animation:instap var(--duur-lang) ease both; }
body.klaar .instap > *:nth-child(1){ animation-delay:.15s; }
body.klaar .instap > *:nth-child(2){ animation-delay:.3s; }
body.klaar .instap > *:nth-child(3){ animation-delay:.45s; }
body.klaar .instap > *:nth-child(4){ animation-delay:.6s; }
body.klaar .site-header{ animation:zakIn .55s ease both; }
@keyframes zakIn{
  from{ transform:translateY(-100%); }
  to  { transform:none; }
}
/* statistieken volgen om en om zodra ze onthuld worden */
.statband .stat:nth-child(2){ transition-delay:.15s; }
.statband .stat:nth-child(3){ transition-delay:.3s; }
@keyframes instap{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

/* ── Statistieken-band ──────────────────────────────────────────── */
.statband{
  display:grid; gap:var(--ruimte-3);
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  margin-top:var(--ruimte-4);
}
.stat{
  background:var(--kleur-kaart);
  border:1px solid var(--kleur-lime-zacht);
  border-radius:var(--radius-m);
  padding:var(--ruimte-3) var(--ruimte-2);
  text-align:center;
  box-shadow:var(--schaduw-kaart);
}
.stat .getal{
  font-family:var(--font-kop); font-weight:800;
  font-size:clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  color:var(--kleur-groen-donker); line-height:1;
  display:block; margin-bottom:.2em;
  font-variant-numeric:tabular-nums;
}
.stat .label{ color:var(--kleur-inkt-zacht); font-weight:700; }

/* ── Knoppen ────────────────────────────────────────────────────── */
.knop{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.5em;
  text-decoration:none; cursor:pointer;
  font-family:var(--font-body); font-weight:800; font-size:1.05rem;
  border-radius:999px; padding:.75em 1.6em;
  border:2px solid transparent;
  transition:transform var(--duur-kort) ease, box-shadow var(--duur-kort) ease, background-color var(--duur-kort) ease;
}
.knop:hover{ transform:translateY(-2px); box-shadow:var(--schaduw-kaart); }
.knop:active{ transform:translateY(0); }
.knop .pijl{ transition:transform var(--duur-kort) ease; }
.knop:hover .pijl{ transform:translateX(4px); }
/* primaire CTA in de huisstijlkleur, met donkere tekst (7,9:1) */
.knop--accent{ background:var(--kleur-lime); color:var(--kleur-inkt); }
.knop--accent:hover{ background:var(--kleur-lime-donker); color:var(--kleur-inkt); }
/* glansje dat over de lime-knoppen strijkt bij hover */
.knop--accent::before{
  content:""; position:absolute; top:0; bottom:0; width:40%;
  left:-60%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition:left .55s ease;
}
.knop--accent:hover::before{ left:130%; }
.knop--groen{ background:var(--kleur-groen-knop); color:#fff; }
.knop--groen:hover{ background:var(--kleur-groen-donker); color:#fff; }
.knop--omlijnd{
  background:transparent; color:var(--kleur-groen-knop);
  border-color:var(--kleur-groen-knop);
}
.knop--omlijnd:hover{ background:var(--kleur-groen-knop); color:#fff; }
.knop[disabled]{ opacity:.6; cursor:default; transform:none; box-shadow:none; }

/* ── Foto's / mediakaders (breken nooit bij ontbrekende foto) ───── */
.m-onder{ margin-bottom:var(--ruimte-3); }
.foto-figuur{ margin:0; }
.fotobijschrift{
  font-size:.9rem; color:var(--kleur-inkt-zacht);
  margin:.7em .4em 0; font-weight:600;
}
.foto-kader{
  aspect-ratio:4/3; width:100%;
  background:var(--kleur-lime-tint);   /* zachte placeholder-achtergrond */
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--schaduw-kaart);
}
.foto-kader img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--duur-lang) ease;
}
.foto-kader:hover img{ transform:scale(1.04); }

.video-kader{
  aspect-ratio:16/9; width:100%;
  background:var(--kleur-inkt);
  border-radius:var(--radius-l); overflow:hidden;
  box-shadow:var(--schaduw-kaart);
}
.video-kader iframe, .kaart-kader iframe{
  width:100%; height:100%; border:0; display:block;
}
.kaart-kader{
  aspect-ratio:4/3; width:100%;
  background:var(--kleur-lime-tint);
  border-radius:var(--radius-l); overflow:hidden;
  box-shadow:var(--schaduw-kaart);
}

/* ── Kaarten ────────────────────────────────────────────────────── */
.kaart{
  background:var(--kleur-kaart);
  border:1px solid rgba(32,36,27,.08);
  border-radius:var(--radius-m);
  padding:var(--ruimte-3);
  box-shadow:var(--schaduw-kaart);
  transition:transform var(--duur-kort) ease, box-shadow var(--duur-kort) ease, border-color var(--duur-kort) ease;
}
.kaart:hover{
  transform:translateY(-4px);
  box-shadow:var(--schaduw-kaart-hover);
  border-color:var(--kleur-lime-zacht);
}
.kaarten-grid{
  display:grid; gap:var(--ruimte-3);
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  align-items:stretch;
}

/* ── Vacatures ──────────────────────────────────────────────────── */
.vacature{ display:flex; flex-direction:column; gap:var(--ruimte-2); }
.vacature h4{ margin-bottom:0; }
.vacature .functie-icoon{
  width:3rem; height:3rem; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--kleur-lime-tint);
}
.vacature p{ flex-grow:1; color:var(--kleur-inkt-zacht); margin-bottom:0; }
.voordelen{ list-style:none; padding:0; margin:var(--ruimte-2) 0 0; }
.voordelen li{
  display:flex; gap:.7em; align-items:flex-start; margin-bottom:.8em;
}
.voordelen svg{ flex:0 0 auto; margin-top:.25em; }


/* ── Wonen: financiering en beeldgalerij ────────────────────────── */
.sectie-label{
  display:inline-block;
  margin:0 0 .65rem;
  color:var(--kleur-groen-donker);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
  gap:var(--ruimte-3);
  margin-top:var(--ruimte-3);
}
.info-kaart{
  position:relative;
  min-height:15rem;
  padding:var(--ruimte-3);
  overflow:hidden;
  background:var(--kleur-kaart);
  border:1px solid var(--kleur-lime-zacht);
  border-radius:var(--radius-m);
  box-shadow:var(--schaduw-kaart);
}
.info-kaart h4{ position:relative; margin-top:2.8rem; }
.info-kaart p{ position:relative; margin-bottom:0; color:var(--kleur-inkt-zacht); }
.info-nummer{
  position:absolute;
  top:.7rem;
  right:1rem;
  color:var(--kleur-lime-zacht);
  font-family:var(--font-kop);
  font-size:clamp(3.2rem, 7vw, 5.5rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.06em;
  user-select:none;
}
.foto-drieluik{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--ruimte-3);
  margin-top:var(--ruimte-3);
  align-items:stretch;
}
.foto-tegel{
  min-height:22rem;
  margin:0;
  overflow:hidden;
  border-radius:var(--radius-l);
  box-shadow:var(--schaduw-kaart);
  background:var(--kleur-lime-tint);
}
.foto-tegel img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--duur-lang) ease;
}
.foto-tegel:hover img{ transform:scale(1.035); }
@media (min-width: 52rem){
  .foto-drieluik{ grid-template-columns:1fr 1fr; }
  .foto-tegel{ min-height:31rem; }
}

/* ── FAQ-accordeon (soepel open/dicht via grid-rows) ────────────── */

.ankerdoel{ scroll-margin-top:calc(var(--hoogte-header) + 1rem); }
.faq-snelkeuze{
  display:flex;
  justify-content:center;
  gap:.7rem;
  flex-wrap:wrap;
  margin:var(--ruimte-3) auto var(--ruimte-4);
}
.faq-snelkeuze a{
  display:inline-flex;
  padding:.55em 1.1em;
  border:2px solid var(--kleur-groen-knop);
  border-radius:999px;
  color:var(--kleur-groen-knop);
  background:var(--kleur-kaart);
  text-decoration:none;
  font-weight:800;
}
.faq-snelkeuze a:hover{ background:var(--kleur-groen-knop); color:#fff; }
.faq-groepen{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--ruimte-4);
  align-items:start;
}
.faq-groep{
  min-width:0;
  padding:var(--ruimte-3);
  background:rgba(255,255,255,.55);
  border:1px solid var(--kleur-lime-zacht);
  border-radius:var(--radius-l);
}
.faq-groepkop{ margin-bottom:var(--ruimte-3); }
.faq-groepkop p{ margin:0; color:var(--kleur-inkt-zacht); }
.faq-label{
  display:inline-block;
  margin-bottom:.55rem;
  padding:.25em .75em;
  background:var(--kleur-lime-zacht);
  border-radius:999px;
  color:var(--kleur-groen-donker);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
@media (min-width: 64rem){
  .faq-groepen{ grid-template-columns:1fr 1fr; }
}
.faq-item{
  background:var(--kleur-kaart);
  border:1px solid rgba(32,36,27,.08);
  border-radius:var(--radius-m);
  box-shadow:var(--schaduw-kaart);
  margin-bottom:var(--ruimte-2);
  overflow:hidden;
  transition:border-color var(--duur-kort) ease;
}
.faq-item h3, .faq-item h4{ margin:0; }
.faq-item:has(.faq-vraag[aria-expanded="true"]){ border-color:var(--kleur-lime); }
.faq-vraag{
  width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0;
  font-family:var(--font-kop); font-weight:600; font-size:1.05rem;
  color:var(--kleur-inkt);
  padding:1.1rem 1.25rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  line-height:1.3;
}
.faq-vraag:hover{ background:var(--kleur-lime-tint); }
.faq-vraag .chevron{ flex:0 0 auto; transition:transform var(--duur-middel) ease; color:var(--kleur-groen-tekst); }
.faq-vraag[aria-expanded="true"] .chevron{ transform:rotate(180deg); }
.faq-antwoord{
  display:grid; grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows var(--duur-middel) ease, visibility var(--duur-middel);
}
.faq-antwoord.open{ grid-template-rows:1fr; visibility:visible; }
.faq-antwoord > div{ overflow:hidden; }
.faq-antwoord p{ margin:0; padding:0 1.25rem 1.25rem; }

/* ── Formulier ──────────────────────────────────────────────────── */
.veld{ margin-bottom:var(--ruimte-3); }
.veld label{ display:block; font-weight:800; margin-bottom:.35em; }
.veld .hint{ font-size:.9rem; color:var(--kleur-inkt-zacht); margin:.2em 0 .4em; }
.veld .hint--inline{ display:inline; font-weight:600; }
.hint{ font-size:.9rem; color:var(--kleur-inkt-zacht); }
.veld input, .veld textarea{
  width:100%;
  font-family:var(--font-body); font-size:1rem; color:var(--kleur-inkt);
  background:#fff; border:2px solid rgba(32,36,27,.35);
  border-radius:var(--radius-s); padding:.7em .9em;
  transition:border-color var(--duur-kort) ease;
}
.veld input:focus-visible, .veld textarea:focus-visible{
  outline:3px solid var(--kleur-focus); outline-offset:2px;
  border-color:var(--kleur-groen-knop);
}
.veld.fout input, .veld.fout textarea{ border-color:var(--kleur-fout); }
.foutmelding{
  display:none; color:var(--kleur-fout); font-weight:700; font-size:.92rem; margin-top:.35em;
}
.veld.fout .foutmelding{ display:block; }
.verplicht-ster{ color:var(--kleur-groen-tekst); }
.form-status{ margin-top:var(--ruimte-2); font-weight:700; border-radius:var(--radius-s); }
.form-status.gelukt{ background:var(--kleur-lime-tint); color:var(--kleur-groen-donker); padding:1em 1.2em; }
.form-status.mislukt{ background:#F8E3DA; color:var(--kleur-fout); padding:1em 1.2em; }
/* Honeypot: visueel én voor hulptechnologie verborgen */
.honingpot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer{
  background:var(--kleur-inkt); color:var(--kleur-achtergrond);
  padding:var(--ruimte-4) var(--ruimte-2);
  margin-top:var(--ruimte-4);
}
.site-footer .binnen{ display:grid; gap:var(--ruimte-3); grid-template-columns:1fr; }
@media (min-width: 46rem){
  .site-footer .binnen{ grid-template-columns:1.2fr 1fr auto; align-items:start; }
}
.site-footer h2{ color:var(--kleur-achtergrond); font-size:1.15rem; }
.site-footer a{ color:#CFE36A; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer p{ max-width:none; }
.footer-onder{
  max-width:var(--max-breedte); margin:var(--ruimte-3) auto 0;
  border-top:1px solid rgba(252,252,247,.25); padding-top:var(--ruimte-2);
  font-size:.9rem;
}
.naar-boven{
  background:transparent; color:#CFE36A;
  border:2px solid #CFE36A; border-radius:999px;
  font-family:var(--font-body); font-weight:800; font-size:.95rem;
  padding:.55em 1.2em; cursor:pointer;
  transition:background-color var(--duur-kort) ease, color var(--duur-kort) ease;
}
.naar-boven:hover{ background:#CFE36A; color:var(--kleur-inkt); }

/* ── Scroll-reveal (subtiel; uit bij reduced motion) ────────────── */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity var(--duur-lang) ease, transform var(--duur-lang) ease;
}
.reveal.zichtbaar{ opacity:1; transform:none; }
.reveal.zichtbaar.scheef-l{ transform:rotate(-1.6deg); }
.reveal.zichtbaar.scheef-r{ transform:rotate(1.3deg); }
.reveal.zichtbaar.scheef-l:hover, .reveal.zichtbaar.scheef-r:hover{ transform:rotate(0); }

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION: alle animatie uit, incl. loader, reveals,
   zwevende decoratie en soepel scrollen. Cruciaal voor bezoekers
   met vestibulaire gevoeligheid.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .loader{ display:none !important; }
  .schots{ display:none; }
  .hero-vaan{ animation:none; transform:rotate(9deg); }
  .reveal, .instap > *{ opacity:1 !important; transform:none !important; }
  .reveal.zichtbaar.scheef-l{ transform:rotate(-1.6deg) !important; }
  .reveal.zichtbaar.scheef-r{ transform:rotate(1.3deg) !important; }
  .knop:hover, .kaart:hover, .foto-kader:hover img, .foto-tegel:hover img{ transform:none; }
}