/* ==========================================================================
   Bomen voor Boeren — stylesheet
   Huisstijl afgeleid van De Groene Ruyt (degroeneruyt.nl)
   ========================================================================== */

:root {
  /* --- Kleuren, Mini Brand Guide v0.1 ---------------------------------- */
  --groen: #2F5D50;            /* bosgroen, primair */
  --groen-donker: #24473D;     /* hover op primair */
  --groen-licht: #E7EFEC;      /* lichte tint van bosgroen, voor vlakken */
  --accent: #7A9B42;           /* bladgroen, secundair */
  --accent-donker: #688438;
  --accent-licht: #A9C46C;     /* lichtgroen */
  --creme: #FAF9F5;            /* warm wit, achtergrond */
  --zand: #F4F1E8;
  --aarde: #8A6A45;            /* accentkleur */
  --tekst: #2B2B2B;
  --grijs: #6B6B6B;
  --lijn: #E4E0D5;
  --wit: #fff;

  /* --- Vorm ------------------------------------------------------------- */
  --schaduw: 0 8px 30px rgba(0,0,0,.08);
  --radius: 16px;              /* kaarten */
  --radius-knop: 10px;
  --radius-beeld: 20px;

  /* --- Witruimte -------------------------------------------------------- */
  --ruimte-sectie: 120px;
  --ruimte-blok: 60px;
  --ruimte-kaart: 32px;

  /* Hoogte van de band 'project uitgelicht'. Eén getal; alleen hier
     wijzigen. De inhoud kan de band hoger maken dan dit minimum. */
  --uitgelicht-hoogte: 280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Koppen in Cormorant Garamond, tekst in Inter. Beide via Google Fonts;
   zie de <link> in de kop van elke pagina. Valt terug op systeemletters
   zolang de webletters nog niet binnen zijn. */
body {
  font-family: Inter, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--tekst);
  background: var(--creme);
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

.nav, .btn, .kaart-label, .stat b, .artikelmeta, form label, th {
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
}
.logo b, .logo span { font-family: Inter, 'Segoe UI', Arial, sans-serif; }

h1 { font-size: 3rem; line-height: 1.1; color: var(--groen); letter-spacing: -.01em; }
h2 { font-size: 2.1rem; line-height: 1.15; color: var(--groen); margin-bottom: .6rem; }
h3 { font-size: 1.3rem; color: var(--groen); margin-bottom: .4rem; }
p { margin-bottom: 1rem; }
a { color: var(--groen); }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* --- header ------------------------------------------------------------ */
header { background: var(--wit); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 30; }
.topbalk { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; flex-wrap: wrap; gap: 10px; }
.logo { text-decoration: none; display: block; }
.logo b { font-size: 1.35rem; color: var(--groen-donker); display: block; line-height: 1.1; }
.logo span { display: block; font-size: .72rem; color: var(--grijs); letter-spacing: .04em; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: 6px; font-size: .95rem; color: var(--groen-donker); }
.nav a:hover { background: var(--groen-licht); }
.nav a.actief { background: var(--groen); color: var(--wit); }
.nav a.cta { background: var(--accent); color: var(--wit); font-weight: 600; }
.nav a.cta:hover { background: var(--accent-donker); }

/* hamburgerknop — alleen zichtbaar op smalle schermen */
.menuknop {
  display: none;
  width: 46px; height: 42px;
  border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--wit); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menuknop span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--groen-donker); transition: transform .18s ease, opacity .18s ease;
}
.menuknop.actief span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menuknop.actief span:nth-child(2) { opacity: 0; }
.menuknop.actief span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menuknop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- hero met foto ----------------------------------------------------- */
.hero {
  position: relative;
  color: var(--wit);
  padding: 96px 0 84px;
  background: var(--groen-donker);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(36,71,61,.90) 0%, rgba(36,71,61,.74) 45%, rgba(36,71,61,.28) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { color: var(--wit); max-width: 660px; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.hero p.sub { font-size: 1.2rem; max-width: 580px; margin: 20px 0 30px; color: #EAF1E8; }
.hero .btn + .btn { margin-left: 10px; }

/* compacte hero voor subpagina's */
.hero.klein { padding: 62px 0 54px; }
.hero.klein h1 { font-size: 2.4rem; }

/* --- knoppen ----------------------------------------------------------- */
.btn {
  display: inline-block; text-decoration: none;
  padding: 14px 28px; border-radius: var(--radius-knop);
  font-weight: 600; font-size: 1rem;
  transition: background .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primair { background: var(--accent); color: var(--wit); }
.btn-primair:hover { background: var(--accent-donker); }
.btn-secundair { background: var(--wit); color: var(--groen-donker); }
.btn-secundair:hover { background: var(--groen-licht); }
.btn-omlijnd { box-shadow: inset 0 0 0 2px var(--groen); color: var(--groen); }
.btn-omlijnd:hover { background: var(--groen); color: var(--wit); }

/* --- secties ----------------------------------------------------------- */
section { padding: var(--ruimte-sectie) 0; }
section.wit { background: var(--wit); }
section.groenlicht { background: var(--groen-licht); }
section.compact { padding: var(--ruimte-blok) 0; }
.intro-breed { max-width: 740px; }

/* --- grid -------------------------------------------------------------- */
.rij { display: grid; gap: 22px; margin-top: 26px; }
.rij.k2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rij.k3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rij.k4 { grid-template-columns: repeat(4, 1fr); }
.rij.geen-marge { margin-top: 0; }

/* tekst naast beeld */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split img { border-radius: var(--radius-beeld); box-shadow: var(--schaduw); width: 100%; height: 100%; object-fit: cover; max-height: 420px; }

/* --- kaarten ----------------------------------------------------------- */
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: var(--ruimte-kaart); }
.kaart.groen { background: var(--groen); color: var(--wit); border: none; }
.kaart.groen h3 { color: var(--wit); }
.kaart.groen a { color: var(--wit); }
.kaart-label {
  display: inline-block; background: var(--groen-licht); color: var(--groen-donker);
  font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
}
.kaart ul { margin: 0 0 10px 20px; }
.kaart li { margin-bottom: 6px; }

/* kaart met beeld bovenaan */
.kaart.met-beeld { padding: 0; overflow: hidden; }
.kaart.met-beeld img { width: 100%; height: 190px; object-fit: cover; }
.kaart.met-beeld .kaart-body { padding: 20px 24px 24px; }

/* --- pakketten --------------------------------------------------------- */
.pakket { display: flex; flex-direction: column; }
.pakket .prijs { font-size: .95rem; color: var(--grijs); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--lijn); }
/* Bewust geen 'meest gekozen'-label: de bezoeker kiest op zijn eigen situatie. */

/* --- subsidieblok ------------------------------------------------------ */
.subsidieblok { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.stat { background: var(--wit); border-radius: var(--radius); padding: 22px 30px; text-align: center; min-width: 170px; box-shadow: var(--schaduw); }
.stat b { display: block; font-size: 2.4rem; color: var(--groen); line-height: 1.1; }
.stat span { font-size: .85rem; color: var(--grijs); }
.voetnoot { font-size: .85rem; color: var(--grijs); }

/* --- stappen ----------------------------------------------------------- */
.stap { display: flex; gap: 16px; margin-bottom: 20px; }
.stap .nr {
  flex: 0 0 42px; height: 42px; border-radius: 50%;
  background: var(--groen); color: var(--wit);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: 'Segoe UI', Arial, sans-serif;
}

/* --- team -------------------------------------------------------------- */
.persoon img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-beeld); margin-bottom: 14px; }
.persoon .placeholder {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius); margin-bottom: 14px;
  background: var(--groen-licht); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Segoe UI', Arial, sans-serif; font-size: .9rem; text-align: center; padding: 10px;
}

/* --- tabellen ---------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; background: var(--wit); margin: 16px 0; font-size: .95rem; }
th, td { border: 1px solid var(--lijn); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--groen-licht); color: var(--groen-donker); }

/* --- formulier --------------------------------------------------------- */
form label { display: block; font-weight: 600; margin: 14px 0 4px; font-size: .95rem; }
form input, form select, form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #D5D0C3; border-radius: var(--radius-knop);
  font-size: 1rem; font-family: inherit; background: var(--wit);
}
form input:focus, form select:focus, form textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
form textarea { min-height: 120px; }
form button { margin-top: 20px; border: none; cursor: pointer; }

/* --- actueel ----------------------------------------------------------- */
.artikelkaart { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.artikelkaart:hover { box-shadow: 0 6px 20px rgba(28,53,32,.13); transform: translateY(-2px); }
.artikelkaart:hover h3 { text-decoration: underline; }
.artikelmeta { font-size: .82rem; color: var(--grijs); margin-bottom: 8px; }

article.artikel { max-width: 720px; }
article.artikel h1 { font-size: 1.9rem; margin-bottom: 8px; }
article.artikel > img { border-radius: var(--radius-beeld); margin: 20px 0 6px; width: 100%; }
article.artikel .beeldbijschrift { margin-bottom: 22px; }
article.artikel h3 { margin-top: 26px; }

/* bronvermelding boven het artikel */
.bronblok {
  background: var(--groen-licht);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 0 0 26px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: .92rem;
}
.bronlabel {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-donker); margin-bottom: 3px;
}
.bronblok a { color: var(--groen-donker); font-weight: 600; }
.bronmeta { display: block; color: var(--grijs); font-size: .82rem; margin-top: 2px; }

/* bronnenlijst onderaan een kennisartikel (evergreen, geen 'naar aanleiding van') */
.bronnenblok {
  border-top: 1px solid var(--lijn);
  margin-top: 34px;
  padding-top: 16px;
  font-size: .85rem;
  color: var(--grijs);
}
.bronnenlabel {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-donker); margin-bottom: 6px;
}
.bronnenblok ul { margin: 0; padding-left: 18px; }
.bronnenblok li { margin-bottom: 4px; }
.bronnenblok a { color: var(--groen-donker); }

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

/* --- keuzehulp (vier stappen op de homepage) ---------------------------- */
.stap-blok { padding: 46px 0; scroll-margin-top: 84px; border-top: 1px solid var(--lijn); }
.stap-blok:first-of-type { border-top: none; }
.stap-blok.stap-verborgen { display: none; }

.stapnummer {
  display: inline-block; font-family: 'Segoe UI', Arial, sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-donker); background: var(--groen-licht);
  padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}
.stap-blok h2 { margin-bottom: .3rem; }
.stap-blok .stap-uitleg { color: var(--grijs); max-width: 640px; margin-bottom: 22px; }

.keuzegrid { display: grid; gap: 14px; }
.keuzegrid.k2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.keuzegrid.k3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.keuzegrid.k4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.keuzeblok {
  position: relative;
  background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--radius);
  padding: 22px 22px 22px 56px;
  cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease;
}
.keuzeblok:hover { border-color: var(--accent); box-shadow: var(--schaduw); }
.keuzeblok:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.keuzeblok.gekozen { border-color: var(--groen); background: var(--groen-licht); }

/* het vinkje */
.keuzeblok::before {
  content: ""; position: absolute; left: 20px; top: 24px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #C3D2CC; background: var(--wit);
  transition: background .12s ease, border-color .12s ease;
}
.keuzeblok.gekozen::before { background: var(--groen); border-color: var(--groen); }
.keuzeblok::after {
  content: ""; position: absolute; left: 27px; top: 29px;
  width: 7px; height: 12px; border: solid var(--wit);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  transition: transform .12s ease;
}
.keuzeblok.gekozen::after { transform: rotate(45deg) scale(1); }

.blok-titel {
  display: block; font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 600; font-size: 1.06rem; color: var(--groen-donker); margin-bottom: 5px;
}
.blok-tekst { font-size: .93rem; color: var(--tekst); margin: 0; line-height: 1.5; }

/* resultaatpaneel */
.pakketkaart {
  background: var(--groen); color: var(--wit);
  border-radius: var(--radius); padding: 30px 34px;
}
.pakketkaart h3 { color: var(--wit); }
.pakketkaart p { color: #DCE7D9; }
.pakketkaart .dichtheid {
  display: inline-block; background: rgba(255,255,255,.14);
  padding: 5px 14px; border-radius: 20px; font-size: .88rem;
  font-family: 'Segoe UI', Arial, sans-serif; color: #fff;
}

/* prijzen in de servicekaarten */
.prijsregel {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--lijn);
  font-family: 'Segoe UI', Arial, sans-serif; font-size: .93rem;
}
.prijsregel .bedrag { font-size: 1.5rem; font-weight: 700; color: var(--groen); }
.prijsregel .eenheid { color: var(--grijs); }
.prijsregel .bijregel { display: block; color: var(--grijs); font-size: .86rem; margin-top: 5px; }
.prijs-leeg .bedrag { color: #B9C2B6; }

.prijs-voorbehoud {
  background: #FFF8E1; border-left: 4px solid #E0A800; border-radius: 0 8px 8px 0;
  padding: 13px 16px; margin-top: 20px; font-size: .87rem; color: #6B5400;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.verborgen { display: none !important; }   /* hulpklasse: moet altijd winnen */

/* samenvatting */
.samenvatting { background: var(--wit); border: 2px solid var(--groen); border-radius: var(--radius); padding: 28px 32px; max-width: 620px; }
.sam-regel { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid var(--lijn); font-family: 'Segoe UI', Arial, sans-serif; font-size: .95rem; }
.sam-regel:last-of-type { border-bottom: none; }
.sam-regel span { color: var(--grijs); }
.sam-regel b { color: var(--groen-donker); text-align: right; }

@media (max-width: 560px) {
  .keuzeblok { padding: 18px 18px 18px 50px; }
  .sam-regel { flex-direction: column; gap: 2px; }
  .sam-regel b { text-align: left; }
}

/* --- bestelblok -------------------------------------------------------- */
.bestelblok { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.bestelkaart { background: var(--wit); border: 2px solid var(--groen); border-radius: var(--radius); padding: 28px 30px; }
.rekenkaart { background: var(--groen-licht); border-radius: var(--radius); padding: 26px 30px; }
.rekenregel {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid #D3E0DA; font-family: 'Segoe UI', Arial, sans-serif; font-size: .95rem;
}
.rekenregel span { color: var(--grijs); }
.rekenregel b { color: var(--groen-donker); }
.rekenregel.totaal { border-bottom: none; border-top: 2px solid var(--groen); margin-top: 6px; padding-top: 14px; }
.rekenregel.totaal span { color: var(--groen-donker); font-weight: 600; }
.rekenregel.totaal b { font-size: 1.45rem; color: var(--groen); }
.rekentoelichting { font-size: .84rem; color: var(--grijs); margin: 14px 0 0; font-family: 'Segoe UI', Arial, sans-serif; }

/* --- nieuwsbrief-aanmelding -------------------------------------------- */
.nieuwsbrief { background: var(--groen); color: var(--wit); border-radius: var(--radius); padding: 30px 34px; }
.nieuwsbrief h2, .nieuwsbrief h3 { color: var(--wit); }
.nieuwsbrief p { color: #DCE7D9; }
.nieuwsbrief form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; margin-top: 6px; }
.nieuwsbrief input[type=email] { padding: 13px; border: none; border-radius: var(--radius-knop); font-size: 1rem; font-family: inherit; }
.nieuwsbrief button { margin: 0; white-space: nowrap; }
.nieuwsbrief .akkoord {
  grid-column: 1 / -1;
  display: flex; gap: 9px; align-items: flex-start;
  font-family: 'Segoe UI', Arial, sans-serif; font-size: .84rem; color: #DCE7D9; line-height: 1.45;
}
.nieuwsbrief .akkoord input { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; }
.nieuwsbrief .akkoord a { color: #fff; }
.nieuwsbrief .klein { font-size: .8rem; color: #B8CCB4; grid-column: 1 / -1; margin: 0; }

@media (max-width: 560px) {
  .nieuwsbrief form { grid-template-columns: 1fr; }
}

/* --- beeldstrook ------------------------------------------------------- */
.beeldstrook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.beeldstrook img { border-radius: var(--radius-beeld); height: 220px; width: 100%; object-fit: cover; }
.beeldbijschrift { font-size: .82rem; color: var(--grijs); margin-top: 6px; }

/* --- footer ------------------------------------------------------------ */
footer {
  background: var(--creme);
  border-top: 1px solid var(--lijn);
  color: var(--grijs);
  padding: 52px 0 28px;
  margin-top: 0;
  font-size: .92rem;
}
footer a { color: var(--groen); text-decoration: none; }
footer a:hover { text-decoration: underline; text-underline-offset: 2px; }
footer h3 {
  color: var(--groen); font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
}
footer p { color: var(--grijs); }
footer .logo-dgr { max-width: 150px; margin-bottom: 12px; }

/* volgknop naar LinkedIn */
.volgknop {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 6px; padding: 9px 15px 9px 12px;
  border: 1px solid var(--lijn); border-radius: var(--radius-knop);
  color: var(--groen); text-decoration: none; background: var(--wit);
  font-family: 'Segoe UI', Arial, sans-serif; font-size: .9rem;
  transition: background .15s ease, border-color .15s ease;
}
.volgknop:hover { background: var(--groen-licht); border-color: var(--groen); text-decoration: none; }
.volgknop svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 19px; }
.disclaimer { border-top: 1px solid var(--lijn); margin-top: 30px; padding-top: 18px; font-size: .78rem; color: #8A8A8A; }

@media (max-width: 780px) {
  .bestelblok { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .beeldstrook { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   MOBIEL
   ========================================================================== */
@media (max-width: 860px) {
  /* menu achter een knop */
  .menuknop { display: flex; }
  .topbalk { flex-wrap: nowrap; }
  .nav {
    display: none;
    order: 3; width: 100%;
    flex-direction: column; gap: 0;
    border-top: 1px solid var(--lijn);
    margin-top: 12px; padding-top: 8px;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 13px 10px; border-radius: 6px; font-size: 1.02rem;
    border-bottom: 1px solid var(--lijn);
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.cta { margin-top: 10px; text-align: center; }
  /* header wordt lager, dus minder ruimte reserveren bij het doorschuiven */
  .stap-blok { scroll-margin-top: 76px; }
}

@media (max-width: 640px) {
  /* alles onder elkaar, zodat er nooit horizontaal geschoven hoeft te worden */
  .rij.k2, .rij.k3, .rij.k4,
  .keuzegrid.k2, .keuzegrid.k3, .keuzegrid.k4 { grid-template-columns: 1fr; }

  body { font-size: 16px; }
  h1 { font-size: 1.72rem; }
  h2 { font-size: 1.4rem; }
  .container { padding: 0 16px; }

  .hero { padding: 44px 0 40px; }
  .hero.klein { padding: 36px 0 32px; }
  .hero p.sub { font-size: 1.05rem; margin: 14px 0 22px; }
  .hero .btn { display: block; width: 100%; text-align: center; }
  .hero .btn + .btn { margin-left: 0; margin-top: 10px; }

  section { padding: 38px 0; }
  .stap-blok { padding: 32px 0; }
  .stap-blok h2 { font-size: 1.35rem; }
  .keuzegrid { gap: 11px; }
  .keuzeblok { padding: 16px 16px 16px 48px; }
  .keuzeblok::before { left: 16px; top: 20px; }
  .keuzeblok::after { left: 23px; top: 25px; }
  .blok-titel { font-size: 1rem; }
  .blok-tekst { font-size: .9rem; }


  .bestelkaart, .rekenkaart { padding: 22px 20px; }
  .rekenregel.totaal b { font-size: 1.25rem; }

  .nieuwsbrief { padding: 24px 20px; }
  .beeldstrook { grid-template-columns: 1fr; }
  .beeldstrook img { height: 190px; }

  .subsidieblok { gap: 18px; }
  .stat { width: 100%; padding: 18px 22px; }

  .btn { padding: 13px 20px; }
  table { font-size: .88rem; }
  th, td { padding: 8px 9px; }

  footer .rij { gap: 22px; }
}

/* tabellen mogen op heel smalle schermen zijwaarts schuiven */
@media (max-width: 520px) {
  .tabelwikkel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabelwikkel table { min-width: 460px; }
}


/* ==========================================================================
   HOMEPAGE — nieuwe opzet volgens het ontwerp van augustus 2026

   Alles hieronder hoort bij index.html. De selectors zijn nieuw of vallen
   binnen .keuzehulp, zodat de overige pagina's ongemoeid blijven.
   ========================================================================== */

/* --- kop: wit, blijft staan bij het scrollen ---------------------------- */
.merk { display: block; text-decoration: none; }
.merk img { width: auto; height: 52px; transition: height .18s ease; }

/* Zodra je begint te scrollen wordt de balk krapper en het logo kleiner,
   zodat er meer van de pagina zichtbaar blijft. menu.js zet de klasse. */
header { transition: box-shadow .18s ease; }
.topbalk { transition: padding .18s ease; }
header.gekrompen { box-shadow: 0 2px 14px rgba(0,0,0,.09); }
header.gekrompen .topbalk { padding: 7px 0; }
header.gekrompen .merk img { height: 36px; }

/* --- hero --------------------------------------------------------------- */

/* Lichte hero: het beeld blijft licht, de tekst is donkergroen. De donkere
   overlay uit de standaard-hero wordt hier vervangen door een witte sluier
   links, zodat de kop leesbaar blijft zonder de foto dood te drukken. */
.hero.licht { color: var(--tekst); }
.hero.licht::after {
  background: linear-gradient(100deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 32%,
    rgba(255,255,255,.45) 58%,
    rgba(255,255,255,0) 82%);
}
.hero.licht h1 { color: var(--groen-donker); text-shadow: none; }
.hero.licht p.sub { color: #3F4A3F; }
.hero.licht .hero-belofte { color: var(--groen-donker); }
.hero.licht .vink { background: var(--groen); }
.hero.licht .vink::after { border-color: var(--wit); }
.hero .container { max-width: 1080px; }
.hero h1 { max-width: 540px; font-size: 2.9rem; }
.hero p.sub { max-width: 480px; }
.hero-belofte {
  display: flex; align-items: center; gap: 9px; margin: 20px 0 0;
  font-family: 'Segoe UI', Arial, sans-serif; font-size: .9rem; color: var(--wit);
}
.vink {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 19px;
  background: var(--wit); position: relative;
}
.vink::after {
  content: ""; position: absolute; left: 6.5px; top: 3.5px;
  width: 5px; height: 9px; border: solid var(--groen-donker);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.vink.groen { background: var(--groen); }
.vink.groen::after { border-color: var(--wit); }

.hero-pijl {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%; z-index: 3;
  background: rgba(255,255,255,.9); color: var(--groen-donker);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 1.1rem;
}
.hero-pijl:hover { background: var(--wit); }

/* --- sectie: voordelen -------------------------------------------------- */
.voordelen { background: var(--creme); padding: var(--ruimte-blok) 0; }
.sectiekop {
  text-align: center; font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.55rem; color: var(--groen-donker); margin-bottom: 34px;
}
.sectiekop::after {
  content: ""; display: block; width: 54px; height: 2px;
  background: var(--accent); margin: 12px auto 0;
}
.voordeelrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.voordeel { text-align: center; padding: 0 22px; }
.voordeel + .voordeel { border-left: 1px solid var(--lijn); }
.voordeel-icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--groen-licht); margin-bottom: 16px;
}
.voordeel-icoon img { width: 40px; height: 40px; object-fit: contain; }
.voordeel h3 { font-size: 1rem; color: var(--groen-donker); margin-bottom: 8px; }
.voordeel p { font-size: .87rem; color: var(--grijs); margin: 0; line-height: 1.55; }

/* --- sectie: project uitgelicht ----------------------------------------
   Beeld links, tekstvlak rechts, allebei even hoog. De hoogte staat vast
   zodat de band niet meegroeit met de tekst; het beeld snijdt bij.
   ---------------------------------------------------------------------- */
.uitgelicht {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: var(--uitgelicht-hoogte);
  padding: 0;          /* deze band loopt van rand tot rand, zonder sectiemarge */
}
/* De foto wordt losgemaakt uit de opmaakstroom. Anders bepaalt haar eigen
   verhouding de hoogte van de hele band: bij een kolom van 715 px werd een
   foto van 1400x931 vanzelf 475 px hoog, en dan doet min-height niets meer.
   Nu bepaalt het tekstvlak de hoogte en snijdt de foto bij. */
.uitgelicht-beeld { position: relative; overflow: hidden; min-height: inherit; }
.uitgelicht-beeld img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.uitgelicht-tekst {
  background: var(--zand);
  display: flex; align-items: center; justify-content: flex-start;
}
.uitgelicht-binnen { padding: 30px 44px; max-width: 580px; }
.labelkop {
  display: block; font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-donker); margin-bottom: 6px;
}
.uitgelicht h2 { font-size: 1.7rem; line-height: 1.15; margin-bottom: .35rem; }
.uitgelicht p { font-size: .9rem; line-height: 1.5; color: var(--tekst); max-width: 500px; margin-bottom: 0; }
.kerncijfers { display: flex; gap: 26px; flex-wrap: wrap; margin: 16px 0 18px; }
.kerncijfer { display: flex; align-items: center; gap: 11px; }
.kerncijfer img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }
.kerncijfer span {
  font-family: Inter, 'Segoe UI', Arial, sans-serif; font-size: .78rem;
  color: var(--grijs); line-height: 1.35;
}
.kerncijfer b { display: block; font-size: .9rem; color: var(--groen); font-weight: 600; }
/* compactere knop, zodat de band niet onnodig hoog wordt */
.uitgelicht .btn { padding: 11px 22px; font-size: .92rem; }

/* --- keuzehulp: raamwerk ------------------------------------------------ */
.keuzehulp { background: var(--wit); padding: var(--ruimte-blok) 0 calc(var(--ruimte-blok) + 12px); }

/* korte verwijzing naar het kenniscentrum boven stap 1, voor wie nog niet klaar is om te bestellen */
.keuzehulp-hulplijn {
  text-align: center; font-size: .87rem; color: var(--grijs);
  margin: 0 0 26px;
}
.keuzehulp-hulplijn a { color: var(--groen-donker); font-weight: 600; }

.keuzestap { scroll-margin-top: 96px; }
.keuzestap.stap-verborgen { display: none; }
.keuzestap + .keuzestap {
  border-top: 1px solid var(--lijn); margin-top: 30px; padding-top: 26px;
}
.stap-kop {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem; color: var(--groen); margin-bottom: 20px;
}
.stap-cijfer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  border: 1px solid var(--lijn); background: var(--creme);
  font-family: 'Segoe UI', Arial, sans-serif; font-size: .9rem; color: var(--grijs);
}

/* --- keuzehulp: de keuzeblokken ---------------------------------------- */
.keuzegrid.k6 { grid-template-columns: repeat(6, 1fr); }

.keuzehulp .keuzeblok {
  padding: 22px 16px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  border-color: var(--lijn); background: var(--wit);
}
.keuzehulp .keuzeblok.gekozen { border-color: var(--accent); background: #FBFCF8; }

/* het vinkje staat rechtsboven en is alleen zichtbaar als er gekozen is */
.keuzehulp .keuzeblok::before {
  left: auto; right: 12px; top: 12px;
  width: 20px; height: 20px; border: none;
  background: var(--groen); opacity: 0;
  transition: opacity .12s ease;
}
.keuzehulp .keuzeblok::after {
  left: auto; right: 19.5px; top: 16px;
  width: 5px; height: 9px; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
}
.keuzehulp .keuzeblok.gekozen::before { opacity: 1; }
.keuzehulp .keuzeblok.gekozen::after { transform: rotate(45deg) scale(1); }

.blok-icoon { width: 44px; height: 44px; object-fit: contain; margin-bottom: 12px; }
.keuzehulp .blok-titel { font-size: .93rem; line-height: 1.35; margin-bottom: 0; }
.keuzehulp .blok-tekst { font-size: .82rem; color: var(--grijs); margin-top: 6px; }

/* stap 3: brede blokken met een liggende illustratie */
.keuzeblok.breed { padding: 14px 20px 20px; }
.blok-tekening { width: 100%; max-width: 340px; height: auto; margin-bottom: 8px; }
.keuzeblok.breed .blok-titel { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }

/* stap 4: pakketkaarten */
.keuzehulp .keuzeblok.pakket { padding: 24px 20px 22px; }
.pakketnaam {
  font-size: 1.1rem !important; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700 !important; margin-bottom: 8px !important;
}
.keuzehulp .pakket .blok-tekst { min-height: 3.2em; }
.pakketprijs {
  margin: 14px 0 10px; padding-top: 14px; border-top: 1px solid var(--lijn);
  width: 100%; font-family: 'Segoe UI', Arial, sans-serif;
  font-size: .85rem; color: var(--grijs);
}
.pakketprijs b { display: block; font-size: 1.25rem; color: var(--groen-donker); }
.pakketinhoud {
  margin: 0; font-family: 'Segoe UI', Arial, sans-serif;
  font-size: .8rem; color: var(--grijs);
}
.pakket-voetnoot {
  text-align: center; font-size: .82rem; color: var(--grijs);
  margin: 16px 0 0; font-family: 'Segoe UI', Arial, sans-serif;
}

/* --- keuzehulp: stappenbalk -------------------------------------------- */
.stapbalk { margin-top: 32px; text-align: center; }
.stapbalk ol {
  list-style: none; display: flex; align-items: center;
  justify-content: center; gap: 0; margin: 0; padding: 0;
}
.stapbalk li { display: flex; align-items: center; }
.stapbalk li + li::before {
  content: ""; width: 74px; height: 1px; background: var(--lijn);
}
.stapbalk li span {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--lijn); background: var(--wit);
  font-family: 'Segoe UI', Arial, sans-serif; font-size: .78rem; color: #A9B3A6;
}
.stapbalk li.gedaan span { border-color: var(--accent); color: var(--accent-donker); }
.stapbalk li.actief span { background: var(--groen); border-color: var(--groen); color: var(--wit); }
.stapstand {
  margin: 12px 0 0; font-family: 'Segoe UI', Arial, sans-serif;
  font-size: .85rem; color: var(--grijs);
}

/* --- stap 5: rekenen en bestellen -------------------------------------- */
.bestelform { margin: 0; }
.honingpot { position: absolute; left: -9999px; }

.rekenblok { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.keuzehulp .rekenkaart {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 24px 26px;
}
.keuzehulp .rekenkaart.uitkomst { background: var(--zand); }
.keuzehulp .rekenkaart h4 {
  font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem;
  color: var(--groen-donker); margin-bottom: 14px;
}
.keuzehulp fieldset { border: none; padding: 0; margin: 0 0 22px; }
.keuzehulp fieldset:last-child { margin-bottom: 0; }
.keuzehulp legend {
  font-family: 'Segoe UI', Arial, sans-serif; font-weight: 600;
  font-size: .95rem; color: var(--groen-donker); padding: 0; margin-bottom: 8px;
}
.volgnr { color: var(--grijs); font-weight: 400; }
.veldtoelichting { font-size: .8rem; color: var(--grijs); margin: -4px 0 10px; }

.metervak { display: flex; align-items: center; gap: 10px; }
.metervak input { max-width: 190px; margin: 0; }
.metervak .eenheid { font-family: 'Segoe UI', Arial, sans-serif; font-size: .9rem; color: var(--grijs); }

.radiorij {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; cursor: pointer;
  font-weight: 400 !important; font-size: .87rem !important; margin: 0 !important;
  font-family: 'Segoe UI', Arial, sans-serif; color: var(--tekst); line-height: 1.4;
}
.radiorij input { width: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0 0; accent-color: var(--groen); }

.keuzehulp .sam-regel { border-bottom: 1px dotted #D8D3C4; font-size: .87rem; }
.rekenregels { margin-top: 18px; }
.keuzehulp .rekenregel {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  align-items: baseline; border-bottom: 1px solid var(--lijn);
  padding: 10px 0; font-size: .88rem;
}
.keuzehulp .rekenregel .som { color: #9A9384; font-size: .82rem; white-space: nowrap; }
.keuzehulp .rekenregel b { min-width: 96px; text-align: right; }
.keuzehulp .rekenregel.totaal { border-bottom: none; border-top: 2px solid var(--groen); }
.keuzehulp .rekenregel.totaal b { font-size: 1.15rem; }

.keuzehulp .bestelkaart {
  margin-top: 20px; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: var(--radius); padding: 24px 26px;
}
.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.veldrij.een { align-items: end; }
.veld { min-width: 0; }
.keuzehulp .veld label { margin: 10px 0 4px; font-size: .88rem; }
.keuzehulp .veld input, .keuzehulp .veld textarea { margin: 0; font-size: .95rem; }
.keuzehulp .veld textarea { min-height: 58px; }
.verplicht { color: #B4462F; }
.knopveld { display: flex; flex-direction: column; justify-content: flex-end; }
.knopveld .btn { margin: 0; width: 100%; text-align: center; }
.knopveld .voetnoot { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
#bestel-voorwaarde { margin-top: 16px; }

/* --- nieuwsbriefband ---------------------------------------------------- */
.nieuwsbriefband { background: var(--zand); padding: var(--ruimte-blok) 0; margin: 0; }
.nieuwsbriefband .nieuwsbrief {
  background: none; color: inherit; padding: 0;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 28px; align-items: center;
}
.nieuwsbriefband .nieuwsbrief h2 {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--groen-donker); font-size: 1.6rem; margin-bottom: 6px;
}
.nieuwsbriefband .nieuwsbrief p { color: var(--grijs); font-size: .92rem; margin: 0; max-width: 380px; }
.nb-beeld { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; }
.nieuwsbriefband .nb-form {
  display: grid; grid-template-columns: 1fr auto; gap: 0;
  align-items: stretch; margin: 0; min-width: 340px;
}
.nieuwsbriefband .nb-form input[type=email] {
  border: 1px solid var(--lijn); border-right: none;
  border-radius: 6px 0 0 6px; padding: 13px 15px; margin: 0; background: var(--wit);
}
.nieuwsbriefband .nb-form button { margin: 0; border-radius: 0 6px 6px 0; white-space: nowrap; }
.nieuwsbriefband .akkoord {
  grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start;
  margin-top: 10px; font-family: 'Segoe UI', Arial, sans-serif;
  font-size: .78rem; color: var(--grijs); line-height: 1.45; font-weight: 400;
}
.nieuwsbriefband .akkoord input { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }
.nieuwsbriefband .akkoord a { color: var(--groen); }

/* --- footer, nieuwe indeling ------------------------------------------- */
footer .footerrij {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  gap: 30px; align-items: start;
}
footer .footer-merk img { width: 150px; height: auto; }
footer .footerrij ul { list-style: none; margin: 0; padding: 0; }
footer .footerrij li { margin-bottom: 7px; }
footer .footerrij a { text-decoration: none; }
footer .footerrij a:hover { text-decoration: underline; }
footer .footerrij h3 { margin-bottom: 12px; }
.footer-sociaal { display: flex; gap: 10px; }
.sociaalknop {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--lijn); background: var(--wit);
  color: var(--groen); text-decoration: none;
}
.sociaalknop:hover { background: var(--groen-licht); border-color: var(--groen); }
.sociaalknop svg { width: 17px; height: 17px; fill: currentColor; }

/* ==========================================================================
   HOMEPAGE — smallere schermen
   ========================================================================== */
@media (max-width: 1000px) {
  .keuzegrid.k6 { grid-template-columns: repeat(3, 1fr); }
  .voordeelrij { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .voordeel:nth-child(odd) { border-left: none; }
  .voordeel { padding: 0 14px; }
  .stapbalk li + li::before { width: 44px; }
  .rij.k4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav a.cta { margin-left: 0; }
  .uitgelicht { grid-template-columns: 1fr; min-height: 0; }
  .uitgelicht-beeld { position: relative; height: 240px; min-height: 0; }
  .uitgelicht-binnen { padding: 34px 24px; max-width: none; }
  .keuzestap { scroll-margin-top: 86px; }
}

@media (max-width: 760px) {
  .rekenblok { grid-template-columns: 1fr; }
  .nieuwsbriefband .nieuwsbrief { grid-template-columns: 1fr; text-align: left; }
  .nieuwsbriefband .nb-form { min-width: 0; }
  footer .footerrij { grid-template-columns: 1fr 1fr; }
  footer .footer-merk { grid-column: 1 / -1; }
  .footer-sociaal { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .keuzegrid.k6 { grid-template-columns: repeat(2, 1fr); }
  .voordeelrij { grid-template-columns: 1fr; }
  .voordeel + .voordeel { border-left: none; border-top: 1px solid var(--lijn); padding-top: 26px; }
  .hero h1 { font-size: 1.8rem; }
  .hero .btn { display: block; width: 100%; text-align: center; }
  .stap-kop { font-size: 1.1rem; gap: 9px; }
  .keuzehulp .keuzeblok { padding: 18px 12px 16px; }
  .keuzehulp .keuzeblok::before { right: 9px; top: 9px; }
  .keuzehulp .keuzeblok::after { right: 16.5px; top: 13px; }
  .keuzehulp .pakket .blok-tekst { min-height: 0; }
  .veldrij { grid-template-columns: 1fr; }
  .stapbalk li + li::before { width: 22px; }
  .keuzehulp .rekenregel { grid-template-columns: 1fr auto; }
  .keuzehulp .rekenregel .som { grid-column: 1 / -1; text-align: left; margin-top: -4px; }
  .keuzehulp .rekenkaart, .keuzehulp .bestelkaart { padding: 20px 18px; }
}

@media (max-width: 420px) {
  .keuzegrid.k6, .keuzegrid.k2, .keuzegrid.k3, .keuzegrid.k4 { grid-template-columns: 1fr; }
}


/* Primaire knop in het nieuwe ontwerp: donkergroen in plaats van accentgroen.
   Bewust beperkt tot de nieuwe onderdelen; de overige pagina's houden
   voorlopig de bestaande knopkleur. */
.hero.licht .btn-primair,
.uitgelicht .btn-primair,
.keuzehulp .btn-primair,
.nieuwsbriefband .btn-primair { background: var(--groen); }
.hero.licht .btn-primair:hover,
.uitgelicht .btn-primair:hover,
.keuzehulp .btn-primair:hover,
.nieuwsbriefband .btn-primair:hover { background: var(--groen-donker); }

/* --- stap 4: opbouw van de prijs op de pakketkaart ---------------------- */
.prijsspec {
  width: 100%; margin: 14px 0 10px; padding-top: 12px;
  border-top: 1px solid var(--lijn);
  font-family: 'Segoe UI', Arial, sans-serif; text-align: left;
}
.specregel + .specregel { margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--lijn); }
.specregel span {
  display: block; font-size: .74rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--grijs);
}
.specregel b {
  display: block; font-size: 1.1rem; color: var(--groen-donker);
  line-height: 1.25; margin-top: 2px;
}
.specregel em { display: block; font-style: normal; font-size: .74rem; color: var(--grijs); line-height: 1.35; }

@media (max-width: 640px) {
  .specregel b { font-size: 1rem; }
}

@media (max-width: 640px) {
  .merk img { height: 42px; }
  header.gekrompen .merk img { height: 32px; }
}

/* --- stap 5: bestellen kan pas als alles is ingevuld -------------------- */
.btn[disabled] {
  background: #C6CFC9; color: #F3F6F4; cursor: not-allowed;
  box-shadow: none;
}
.btn[disabled]:hover { background: #C6CFC9; }
.btn[disabled]:active { transform: none; }

#bestel-blokkade {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 0; color: var(--aarde);
}
#bestel-blokkade::before {
  content: "!"; flex: 0 0 17px;
  display: flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; margin-top: 1px;
  background: var(--aarde); color: var(--wit);
  font-size: .72rem; font-weight: 700; line-height: 1;
}


/* --- toegankelijkheid als tegels (sinds 20-8-2026: twee, was drie) ----- */
.toegangtegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.keuzehulp .keuzeblok.toegang { padding: 18px 12px 16px; }
.keuzehulp .toegang .blok-icoon { width: 34px; height: 34px; margin-bottom: 9px; }
.keuzehulp .toegang .blok-titel { font-weight: 700; font-size: .95rem; }
.keuzehulp .toegang .blok-tekst { font-size: .78rem; margin-top: 5px; }

/* zwaarder aangezette vraag boven een invoerveld */
.keuzehulp legend.vraag {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem; font-weight: 600; color: var(--groen);
  margin-bottom: 10px;
}

@media (max-width: 640px) {
  .toegangtegels { grid-template-columns: 1fr; }
  .keuzehulp legend.vraag { font-size: 1.1rem; }
}

/* --- drie tekstrijen onder de keuzehulp -------------------------------- */
section.zand { background: var(--zand); }
.split.beeld-links img { order: -1; }
.split h2 { margin-bottom: .8rem; }
.split .btn + .btn { margin-left: 8px; }
.intro-midden {
  max-width: 620px; margin: -6px auto 30px; text-align: center;
  color: var(--grijs); font-size: .95rem;
}
.midden { text-align: center; margin: 30px 0 0; }
.persoon .rol {
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .74rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-donker);
  margin: -2px 0 8px;
}
.persoon h3 { margin-bottom: 2px; }
.persoon p:last-child { margin-bottom: 0; font-size: .92rem; }

@media (max-width: 640px) {
  .split.beeld-links img { order: 0; }
  .split .btn { display: block; width: 100%; text-align: center; }
  .split .btn + .btn { margin-left: 0; margin-top: 10px; }
}


/* ==========================================================================
   VERFIJNING — augustus 2026

   Geen structuurwijzigingen. Alleen maat, kleur, ruimte en beweging.
   Dit blok staat achteraan zodat het de regels hierboven overschrijft.
   ========================================================================== */

:root {
  --tekst: #23302B;          /* iets donkerder dan #2B2B2B, warmer */
  --grijs: #55605A;          /* bodytekst met meer contrast */
  --overgang: .18s cubic-bezier(.4, 0, .2, 1);
}

/* --- typografie: rustiger ritme ---------------------------------------- */
h1, h2, h3, h4 { color: var(--groen-donker); }
h2 { margin-bottom: .7rem; }
p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }
.sectiekop { color: var(--groen-donker); margin-bottom: 38px; }
.labelkop { color: var(--accent-donker); margin-bottom: 12px; }

/* --- knoppen ------------------------------------------------------------ */
.btn { transition: background var(--overgang), transform var(--overgang), box-shadow var(--overgang); }
.btn-primair:hover { box-shadow: 0 4px 14px rgba(36, 71, 61, .22); }
.btn-compact { padding: 12px 24px; font-size: .95rem; }   /* circa 13% kleiner */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero.licht::after {
  /* warmer wit, en naar rechts eerder doorzichtig zodat de haag meer spreekt */
  background: linear-gradient(100deg,
    rgba(250, 249, 245, .95) 0%,
    rgba(250, 249, 245, .88) 26%,
    rgba(250, 249, 245, .58) 46%,
    rgba(250, 249, 245, .14) 66%,
    rgba(250, 249, 245, 0)   80%);
}
.hero.licht h1 { color: var(--groen-donker); }
.hero.licht p.sub { color: #3A453F; max-width: 440px; }
.hero-belofte { margin-top: 18px; }

/* ==========================================================================
   2. NAVIGATIE — gelijke uitlijning
   ========================================================================== */
.nav { align-items: center; gap: 4px; }
.nav a {
  display: flex; align-items: center;
  padding: 9px 13px; line-height: 1.2;
  transition: background var(--overgang), color var(--overgang);
}
.nav a.cta { padding: 11px 18px; }

/* ==========================================================================
   3. VOORDELEN
   ========================================================================== */
.voordelen { padding: calc(var(--ruimte-blok) + 10px) 0; }
.voordeel {
  padding: 22px 20px 20px;
  border-radius: var(--radius);
  transition: transform var(--overgang), box-shadow var(--overgang);
}
.voordeel + .voordeel { border-left: 1px solid var(--lijn); }
.voordeel-icoon {
  width: 86px; height: 86px;          /* was 74 */
  margin-bottom: 22px;                /* meer lucht onder het icoon */
  transition: background var(--overgang);
}
.voordeel-icoon img {
  width: 46px; height: 46px;          /* was 40, circa 15% groter */
  transition: filter var(--overgang);
}
.voordeel h3 {
  font-size: 1.05rem; font-weight: 700;
  color: var(--groen-donker); margin-bottom: 0;
}
/* subtiel accentlijntje onder de titel */
.voordeel h3::after {
  content: ""; display: block;
  width: 26px; height: 2px; margin: 10px auto 12px;
  background: var(--accent); border-radius: 1px;
  transition: width var(--overgang);
}
.voordeel p { color: var(--grijs); font-size: .89rem; line-height: 1.6; }

.voordeel:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(36, 71, 61, .08);
}
.voordeel:hover .voordeel-icoon { background: #DBE7E1; }
.voordeel:hover .voordeel-icoon img { filter: brightness(.82) saturate(1.1); }
.voordeel:hover h3::after { width: 38px; }

/* ==========================================================================
   4. VERTROUWENSBALK
   ========================================================================== */
.vertrouwen {
  background: var(--zand);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: 20px 0;
}
.vertrouwenrij {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 24px;
}
.vertrouwenrij li {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .88rem; color: var(--groen-donker);
}
.vertrouwenrij li::before {
  content: ""; flex: 0 0 14px;
  width: 14px; height: 8px; margin-top: -4px;
  border: solid var(--accent); border-width: 0 0 2.2px 2.2px;
  transform: rotate(-45deg);
}

/* ==========================================================================
   5. PROJECTBLOK WALVOORT
   ========================================================================== */
.uitgelicht-beeld img { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.uitgelicht:hover .uitgelicht-beeld img { transform: scale(1.03); }
.kerncijfers { gap: 30px; margin: 22px 0 24px; }
.kerncijfer img { width: 32px; height: 32px; flex: 0 0 32px; }
.kerncijfer span { font-size: .82rem; }
.kerncijfer b { font-size: 1.08rem; margin-bottom: 1px; }   /* iets groter */

/* ==========================================================================
   6. KEUZEHULP
   ========================================================================== */
.keuzehulp { padding: calc(var(--ruimte-blok) + 20px) 0 calc(var(--ruimte-blok) + 24px); }
.stap-kop { font-size: 1.95rem; margin-bottom: 18px; }
.stap-cijfer { width: 38px; height: 38px; flex: 0 0 38px; font-size: 1rem; }
.stap-sub { margin: -4px auto 26px; }
.keuzestap + .keuzestap { margin-top: 38px; padding-top: 34px; }

.keuzehulp .keuzeblok {
  transition: border-color var(--overgang), background var(--overgang),
              box-shadow var(--overgang), transform var(--overgang);
}
.keuzehulp .keuzeblok:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(36, 71, 61, .09);
}
/* gekozen kaart mag duidelijker afsteken */
.keuzehulp .keuzeblok.gekozen {
  border-color: var(--groen);
  background: #F4F8F5;
  box-shadow: 0 0 0 1px var(--groen) inset;
}
.keuzehulp .keuzeblok.gekozen .blok-titel { color: var(--groen-donker); font-weight: 700; }

/* stapindicator duidelijker */
.stapbalk { margin-top: 38px; }
.stapbalk li span {
  width: 30px; height: 30px; font-size: .82rem; font-weight: 600;
  transition: background var(--overgang), border-color var(--overgang), color var(--overgang);
}
.stapbalk li.gedaan span { background: var(--groen-licht); border-color: var(--accent); color: var(--groen-donker); }
.stapbalk li.actief span { box-shadow: 0 0 0 4px rgba(47, 93, 80, .12); }
.stapbalk li + li::before { background: var(--lijn); height: 2px; }
.stapstand { font-size: .82rem; letter-spacing: .04em; margin-top: 14px; }

/* ==========================================================================
   7 en 8. SUBSIDIE- EN PRAKTIJKBLOK
   ========================================================================== */
.split img { max-height: 460px; }        /* foto's iets groter */
.split p { color: var(--grijs); }
.split .btn { margin-top: 6px; }

/* ==========================================================================
   9. TEAM
   ========================================================================== */
.persoon {
  overflow: hidden;
  box-shadow: 0 3px 16px rgba(36, 71, 61, .07);
  transition: transform var(--overgang), box-shadow var(--overgang);
}
.persoon img {
  aspect-ratio: 1 / 1; height: auto;     /* alle drie exact even hoog */
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.persoon:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(36, 71, 61, .13); }
.persoon:hover img { transform: scale(1.03); }
.persoon p:last-child { color: var(--grijs); }

/* ==========================================================================
   10. NIEUWSBRIEF
   ========================================================================== */
.nieuwsbriefband .nieuwsbrief { align-items: start; gap: 32px; }
.nieuwsbriefband .nb-beeld { margin-top: 4px; }
.nieuwsbriefband .nieuwsbrief p { margin-bottom: .6rem; }
.nb-lijst {
  list-style: none; margin: 0; padding: 0;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .88rem; color: var(--grijs);
}
.nb-lijst li { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.nb-lijst li::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.nieuwsbriefband .nb-form { align-self: start; margin-top: 4px; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
footer { padding: calc(var(--ruimte-blok) - 4px) 0 26px; }
footer .footerrij { gap: 34px; }
footer .footerrij h3 { margin-bottom: 14px; }
footer .footerrij li { margin-bottom: 8px; }
footer .footerrij li:last-child { margin-bottom: 0; }
.footer-sociaal { gap: 9px; padding-top: 2px; }
.sociaalknop { transition: background var(--overgang), border-color var(--overgang), color var(--overgang); }

/* ==========================================================================
   12. UIT HET KENNISCENTRUM
   ========================================================================== */
.artikelrij { align-items: stretch; }
.artikelrij .artikelkaart {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: 0 3px 16px rgba(36, 71, 61, .06);
  transition: transform var(--overgang), box-shadow var(--overgang);
}
.artikelrij .artikelkaart img {
  width: 100%; height: 180px; object-fit: cover;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.artikelrij .kaart-body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; flex: 1;
}
.artikelrij .artikelmeta { margin-bottom: 7px; font-size: .76rem; letter-spacing: .04em; }
.artikelrij h3 { font-size: 1.12rem; margin-bottom: 8px; line-height: 1.25; }
.artikelrij .kaart-body p { color: var(--grijs); font-size: .88rem; line-height: 1.6; }
.leesverder {
  margin-top: auto; padding-top: 14px;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .85rem; font-weight: 600; color: var(--groen);
}
.artikelrij .artikelkaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(36, 71, 61, .13);
}
.artikelrij .artikelkaart:hover img { transform: scale(1.03); }
.artikelrij .artikelkaart:hover h3 { text-decoration: none; }

/* ==========================================================================
   14. BEWEGING — subtiel, en uit als de bezoeker dat wil
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   SMALLE SCHERMEN
   ========================================================================== */
@media (max-width: 1000px) {
  .vertrouwenrij { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .artikelrij .artikelkaart img { height: 200px; }
}

@media (max-width: 640px) {
  .vertrouwenrij { grid-template-columns: 1fr; gap: 12px; }
  .vertrouwenrij li { justify-content: flex-start; }
  .stap-kop { font-size: 1.35rem; }
  .stap-cijfer { width: 32px; height: 32px; flex: 0 0 32px; }
  .voordeel { padding: 18px 14px; }
  .voordeel-icoon { width: 74px; height: 74px; margin-bottom: 16px; }
  .voordeel-icoon img { width: 40px; height: 40px; }
  .nieuwsbriefband .nieuwsbrief { gap: 22px; }
}

/* ==========================================================================
   NALOPEN: dubbele marges en uitlijning die niet klopten
   ========================================================================== */

/* .sectiekop had 38px onder zich en .rij nog eens 26px erboven: 64px gat.
   Waar een raster direct op een sectiekop volgt is 38px genoeg. */
.sectiekop + .rij,
.sectiekop + .voordeelrij { margin-top: 0; }

/* Staat er een intro tussen kop en raster, dan draagt die de ruimte. */
.sectiekop + .intro-midden { margin-top: -22px; }
.intro-midden + .rij { margin-top: 0; }

/* De knop onder een raster stond op 30px, de knop onder een split op 6px.
   Overal hetzelfde ritme. */
.midden { margin-top: 34px; }

/* Kaarten in een rij even hoog, ongeacht de hoeveelheid tekst. */
.rij.k3 > .kaart { display: flex; flex-direction: column; }

/* De hero-knoppen op subpagina's volgden de oude maat. */
.hero.klein .sub { margin-bottom: 0; }

/* ==========================================================================
   BEWEGING BIJ HET IN BEELD KOMEN
   Alleen als JavaScript draait: het script zet .beweegt op <html>. Zonder
   JavaScript blijft alles gewoon zichtbaar staan.
   ========================================================================== */
.beweegt .verschijnt {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.4, 0, .2, 1),
              transform .55s cubic-bezier(.4, 0, .2, 1);
}
.beweegt .verschijnt.in-beeld { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .beweegt .verschijnt { opacity: 1; transform: none; }
}

/* --- afzender in de footer --------------------------------------------- */
.footer-merk img { width: 150px; height: auto; }
.initiatief {
  margin: 14px 0 0; font-size: .84rem; color: var(--grijs);
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
}
.initiatief a { color: var(--groen); }


/* ==========================================================================
   COMPONENTEN VOOR DE VERDIEPINGSPAGINA'S
   Opgebouwd uit dezelfde kleuren, maten en hoeken als de homepage.
   ========================================================================== */

/* --- hero op een verdiepingspagina -------------------------------------
   Zelfde lichte sluier als de homepage, alleen lager. */
.hero.paginahero { padding: 116px 0 70px; }
.hero.paginahero h1 { font-size: 2.5rem; max-width: 620px; }
.hero.paginahero .sub { max-width: 520px; }
.hero.paginahero .labelkop { color: var(--accent-donker); }

/* --- tijdlijn ----------------------------------------------------------
   Vijf stappen naast elkaar, met een doorlopende lijn erachter. Op smalle
   schermen kantelt hij naar onder elkaar met de lijn aan de linkerkant. */
.tijdlijn {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0; position: relative;
  grid-auto-flow: column;          /* past zich aan het aantal stappen aan */
  grid-auto-columns: 1fr;
}
.tijdlijn li {
  position: relative; text-align: center;
  padding: 0 16px;
}
/* de verbindingslijn tussen twee stappen */
.tijdlijn li:not(:last-child)::before {
  content: ""; position: absolute; z-index: 0;
  top: 19px; left: 50%; width: 100%; height: 2px;
  background: var(--lijn);
}
.tijdlijn-nr {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; margin-bottom: 16px;
  background: var(--groen); color: var(--wit);
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .95rem; font-weight: 600;
  box-shadow: 0 0 0 6px var(--zand);      /* maskeert de lijn achter de bol */
}
.tijdlijn h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--groen-donker); }
.tijdlijn p { font-size: .88rem; color: var(--grijs); line-height: 1.6; margin: 0; }

/* --- veelgestelde vragen -----------------------------------------------
   Met <details> en <summary>: werkt zonder JavaScript, ook als het script
   niet laadt, en is toetsenbord- en schermlezervriendelijk. */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: box-shadow var(--overgang), border-color var(--overgang);
}
.faq details[open] { border-color: #C9D8D2; box-shadow: 0 4px 18px rgba(36, 71, 61, .07); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: 1rem; font-weight: 600; color: var(--groen-donker);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 10px;
  width: 10px; height: 10px; margin-right: 4px;
  border: solid var(--groen); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--overgang);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq summary:hover { color: var(--groen); }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }
.faq-antwoord { padding: 0 22px 20px; }
.faq-antwoord p { color: var(--grijs); font-size: .94rem; margin: 0; }
.faq-antwoord a { font-weight: 600; }

/* --- losse onderdelen --------------------------------------------------- */
.tekening-kader {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius-beeld); padding: 18px;
  box-shadow: none; object-fit: contain; max-height: none;
}
.soortenrij { margin-top: 34px; }
.soortchips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.soortchip {
  display: inline-block;
  padding: 6px 14px;
  background: var(--groen-licht);
  color: var(--groen-donker);
  border-radius: 999px;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .85rem;
}
.midden-tekst { text-align: center; margin-top: 22px; }
.slotblok { max-width: 680px; margin: 0 auto; text-align: center; }
.slotblok p:first-of-type { color: var(--grijs); }
.slotblok .midden { margin-top: 26px; }
.slotblok .btn + .btn { margin-left: 10px; }

/* --- smalle schermen ----------------------------------------------------- */
@media (max-width: 900px) {
  .tijdlijn { grid-auto-flow: row; gap: 26px; text-align: left; }
  .tijdlijn li { text-align: left; padding: 0 0 0 58px; }
  .tijdlijn li:not(:last-child)::before {
    top: 44px; left: 19px; width: 2px; height: calc(100% + 26px);
  }
  .tijdlijn-nr { position: absolute; left: 0; top: 0; margin-bottom: 0; }
}

@media (max-width: 640px) {
  .hero.paginahero { padding: 96px 0 54px; }
  .hero.paginahero h1 { font-size: 1.8rem; }
  .faq summary { padding: 15px 18px; font-size: .95rem; }
  .faq-antwoord { padding: 0 18px 17px; }
  .slotblok .btn { display: block; width: 100%; text-align: center; }
  .slotblok .btn + .btn { margin-left: 0; margin-top: 10px; }
}

/* ==========================================================================
   PROJECTPAGINA'S
   Alles uit de bestaande huisstijl; alleen de galerij, de gegevenslijst en
   een smalle tekstkolom zijn nieuw.
   ========================================================================== */

.hero.projecthero { padding: 132px 0 78px; }
.projectplaats {
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .9rem; color: var(--grijs);
  margin: -4px 0 14px; letter-spacing: .02em;
}

/* kerncijfers op volle breedte, vier naast elkaar */
.kerncijfers.breed {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px; margin: 0;
}
.kerncijfers.breed .kerncijfer { justify-content: flex-start; }
.kerncijfers.breed b { font-size: 1.25rem; }
.kerncijfers.breed img { width: 34px; height: 34px; flex: 0 0 34px; }

/* een tekstkolom die niet over de volle breedte uitloopt */
.smalletekst { max-width: 720px; }
.smalletekst p { color: var(--grijs); }

/* fotogalerij: metselverband via kolommen, zonder JavaScript */
.fotogalerij { column-count: 3; column-gap: 16px; }
.fotogalerij figure {
  margin: 0 0 16px; break-inside: avoid;
  border-radius: var(--radius-beeld); overflow: hidden;
  box-shadow: 0 3px 16px rgba(36, 71, 61, .07);
}
.fotogalerij img {
  width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.fotogalerij figure:hover img { transform: scale(1.03); }

/* projectgegevens onder elkaar, twee kolommen breed */
.gegevenslijst {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 42px; max-width: 900px;
}
.gegeven {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--lijn);
  font-family: Inter, 'Segoe UI', Arial, sans-serif; font-size: .9rem;
}
.gegeven span { color: var(--grijs); flex: 0 0 auto; }
.gegeven b { color: var(--groen-donker); text-align: right; font-weight: 600; }

/* een kanttekening in de lopende tekst */
.opmerkingblok {
  border-left: 3px solid var(--lijn); padding: 2px 0 2px 16px;
  font-size: .88rem; color: var(--grijs); margin-top: 6px;
}

@media (max-width: 1000px) {
  .kerncijfers.breed { grid-template-columns: repeat(2, 1fr); }
  .fotogalerij { column-count: 2; }
}

@media (max-width: 640px) {
  .hero.projecthero { padding: 100px 0 56px; }
  .kerncijfers.breed { grid-template-columns: 1fr; gap: 16px; }
  .fotogalerij { column-count: 1; }
  .gegevenslijst { grid-template-columns: 1fr; }
  .gegeven { flex-direction: column; gap: 2px; }
  .gegeven b { text-align: left; }
}

/* ==========================================================================
   KENNISCENTRUM
   Alleen de zoekbalk en de categoriekaart zijn hier nieuw; de rest is de
   kaart, de artikelkaart en het voordeel-icoon van de homepage.
   ========================================================================== */

.intro-groot { font-size: 1.08rem; line-height: 1.7; color: var(--grijs); }
.midden-blok { margin-left: auto; margin-right: auto; text-align: center; }

/* categoriekaart: kaart van de homepage met het icoon erboven */
.categoriekaart {
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform var(--overgang), box-shadow var(--overgang);
}
.categoriekaart .voordeel-icoon { width: 62px; height: 62px; margin-bottom: 16px; }
.categoriekaart .voordeel-icoon img { width: 32px; height: 32px; }
.categoriekaart h3 { margin-bottom: 8px; }
.categoriekaart p { color: var(--grijs); font-size: .9rem; flex: 1; margin-bottom: 18px; }
.categoriekaart .btn { align-self: flex-start; }
.categoriekaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(36, 71, 61, .09);
}

/* zoekbalk */
.zoekbalk { max-width: 520px; margin: 0 auto 10px; }
.zoekbalk input {
  width: 100%; margin: 0; padding: 14px 18px;
  border: 1px solid var(--lijn); border-radius: var(--radius-knop);
  background: var(--wit); font-size: 1rem; font-family: inherit;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.zoekbalk input:focus {
  outline: none; border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(47, 93, 80, .12);
}
.zoekstand {
  text-align: center; min-height: 1.4em; margin: 0 0 20px;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .85rem; color: var(--grijs);
}
.artikelkaart.geenmatch { display: none; }

@media (max-width: 640px) {
  .categoriekaart .btn { width: 100%; text-align: center; }
}

/* --- partnerrij ---------------------------------------------------------
   Nu met namen; zodra er logobestanden zijn kan de naam vervangen worden
   door een <img> zonder dat de opmaak verandert. */
.partnerrij {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.partner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 116px; padding: 24px 20px; text-align: center;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); text-decoration: none;
  transition: transform var(--overgang), box-shadow var(--overgang), border-color var(--overgang);
}
.partner:hover {
  transform: translateY(-3px); border-color: #C9D8D2;
  box-shadow: 0 8px 26px rgba(36, 71, 61, .09);
}
.partnernaam {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem; color: var(--groen-donker); line-height: 1.2;
}
.partnerrol {
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs);
}

@media (max-width: 760px) { .partnerrij { grid-template-columns: 1fr; } }

/* ==========================================================================
   CONTACT
   De contactkaart is de voordeelkaart van de homepage, aanklikbaar gemaakt.
   ========================================================================== */

.contactkaart { text-decoration: none; display: block; }
.contactkaart:hover { text-decoration: none; }
.contactgegeven {
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .98rem; font-weight: 600; color: var(--groen);
  margin: 0 0 8px; word-break: break-word;
}
.contactkaart:hover .contactgegeven { color: var(--groen-donker); }

.contactformulier {
  max-width: 720px; margin: 0 auto;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: var(--ruimte-kaart);
}
.contactformulier .veldrij { gap: 8px 20px; }
.contactformulier label { margin: 12px 0 4px; font-size: .9rem; }
.contactformulier input,
.contactformulier select,
.contactformulier textarea { margin: 0; font-size: .95rem; }
.contactformulier .akkoord {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 20px 0 0; font-weight: 400; font-size: .92rem; color: var(--tekst);
}
.contactformulier .akkoord input { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; accent-color: var(--groen); }
.contactformulier button { margin-top: 22px; }
.contactformulier .voetnoot { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }

.afsluiting {
  max-width: 640px; margin: 40px auto 0; text-align: center;
  color: var(--grijs); font-size: .95rem;
}

@media (max-width: 640px) {
  .contactformulier { padding: 22px 18px; }
  .contactformulier button { width: 100%; }
}

/* ==========================================================================
   CITAAT
   Kort quote-blok bij een praktijkvoorbeeld (bijvoorbeeld project uitgelicht).
   Ook te gebruiken als placeholder tot de echte quote binnen is; de tag
   ".placeholder-tag" maakt dat dan zichtbaar zonder de tekst als een echt
   citaat te laten lezen.
   ========================================================================== */
.citaat {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 18px;
  margin: 18px 0;
}
.citaat p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--tekst);
  margin: 0 0 6px;
}
.citaat footer {
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: .8rem;
  color: var(--grijs);
}
.placeholder-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--zand);
  color: var(--grijs);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   ARTIKELGROEPEN (kenniscentrum)
   Op kennis.html staan kennisartikelen (evergreen), nieuwsberichten (met
   datum) en praktijkvoorbeelden door elkaar in één raster. Dit blok knipt
   dat op in drie herkenbare groepen, elk met een .labelkop als kopje en een
   eigen .rij.k3.artikelrij eronder. De zoekbalk (assets/js/menu.js) blijft
   over alle groepen heen zoeken, want die query is op #artikellijst
   .artikelkaart en kijkt niet naar de tussenliggende structuur.
   ========================================================================== */
.artikelgroep + .artikelgroep { margin-top: 46px; }
.artikelgroep .labelkop { font-size: .76rem; }
/* Bij één kaart (praktijkvoorbeeld) niet het hele rasterbreed uitrekken. */
.artikelrij.smal { grid-template-columns: minmax(250px, 380px); }