/* ==========================================================================
   Nic. den Heijer Bloemenexport — site.css (UI-voorstel v1, 2026-10-18)
   Mobiel eerst · strikte CSP ('self') · geen externe bronnen · 1 lettertypebestand
   Tokens: zie design/UI-SPEC.md §2. Contrast: design/tools/contrast.py
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("/assets/figtree-latin-wght.4ba7d3d096.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* — Kleur: merk (uit vectorlogo, exact) — */
  --ndh-green-900: #1B4D2B;   /* logo 'DEN HEIJER' · koppen, primaire knop, footer */
  --ndh-green-700: #287530;   /* afgeleid van #36963C · links, eyebrow, knop-hover (wit 5,71:1) */
  --ndh-green-500: #36963C;   /* logo 'NIC' · alleen decoratief / iconen / grote cijfers (3,76:1) */
  --ndh-green-100: #DDEEDB;   /* chips, icoonrondjes */
  --ndh-green-50:  #EEF6EE;   /* sectietint */
  --ndh-lime:      #95C11F;   /* OFG-knipoog · alleen op #1B4D2B (4,63:1) */
  /* — Kleur: neutraal — */
  --ndh-white:     #FFFFFF;
  --ndh-ink:       #14231A;   /* lopende tekst (16,3:1 op wit) */
  --ndh-muted:     #4F5D54;   /* toelichting (6,9:1 op wit) */
  --ndh-line:      #DCE3DD;   /* decoratieve randen/scheidingslijnen */
  --ndh-field:     #7A867E;   /* scheidingstekens kruimelpad, niet-tekst UI-randen (3,79:1) */
  --ndh-on-dark:   #D3E3D6;   /* tekst op #1B4D2B (7,3:1) */
  /* — Placeholder (open gegevens) — */
  --ndh-ph-bg:     #FFF1C7;
  --ndh-ph-text:   #6B4500;
  --ndh-ph-border: #B7791F;
  /* — Focus — */
  --ndh-focus:         #1B4D2B;
  --ndh-focus-on-dark: #95C11F;

  /* — Typografie — */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.25rem, 1.55rem + 3.1vw, 4rem);      /* 36 → 64 */
  --fs-h1:      clamp(2rem, 1.5rem + 2.2vw, 3.25rem);       /* 32 → 52  (binnenpagina) */
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);    /* 28 → 44 */
  --fs-h3:      clamp(1.25rem, 1.17rem + .35vw, 1.5rem);    /* 20 → 24 */
  --fs-lead:    clamp(1.125rem, 1.06rem + .3vw, 1.3125rem); /* 18 → 21 */
  --fs-body:    1.0625rem;                                   /* 17 */
  --fs-small:   .9375rem;                                    /* 15 */
  --fs-eyebrow: .8125rem;                                    /* 13, caps */
  --fs-stat:    clamp(2rem, 1.6rem + 1.6vw, 3rem);           /* 32 → 48 */
  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.65;

  /* — Ruimte (basis 4px) — */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 2.5rem; --s-8: 3rem;  --s-9: 4rem;  --s-10: 6rem;
  --section: clamp(4rem, 2.8rem + 5.2vw, 7.5rem);            /* 64 → 120 */
  --gutter:  clamp(1.25rem, .8rem + 2.2vw, 2.5rem);          /* 20 → 40 */
  --container: 76rem;                                        /* 1216 */

  /* — Vorm — */
  --r-sm: 10px; --r-card: 16px; --r-lg: 24px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20,35,26,.06), 0 8px 24px rgba(20,35,26,.07);
  --shadow-2: 0 2px 4px rgba(20,35,26,.06), 0 18px 40px rgba(20,35,26,.12);
  --tap: 44px;
  --header-h: 72px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 64em) { :root { --header-h: 84px; } }

/* — Basis — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--ndh-ink); background: var(--ndh-white); overflow-wrap: break-word;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 var(--s-4); color: var(--ndh-green-900); line-height: var(--lh-head); font-weight: 750; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p, ul, ol, dl { margin: 0 0 var(--s-4); }
p { text-wrap: pretty; max-width: 68ch; }
a { color: var(--ndh-green-700); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ndh-green-900); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ndh-focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--ndh-focus-on-dark); }
::selection { background: var(--ndh-green-100); color: var(--ndh-green-900); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: .75rem 1.25rem; border-radius: var(--r-pill); background: var(--ndh-green-900); color: var(--ndh-white); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: var(--s-3); color: var(--ndh-white); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tint { background: var(--ndh-green-50); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head--split { max-width: none; display: grid; gap: var(--s-4); align-items: end; }
@media (min-width: 64em) { .section-head--split { grid-template-columns: 1fr auto; } }
.section-head p { color: var(--ndh-muted); font-size: var(--fs-lead); margin-bottom: 0; }

.eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 var(--s-4); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ndh-green-700); }
.eyebrow::before { content: ""; width: 1.75rem; height: 3px; border-radius: 3px; background: var(--ndh-green-500); }
.on-dark .eyebrow { color: var(--ndh-lime); }
.on-dark .eyebrow::before { background: var(--ndh-lime); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ndh-muted); }

/* — Placeholder: open gegevens (nooit invullen zonder aanlevering) — */
.ph { display: inline-block; padding: .05em .5em; border: 1px dashed var(--ndh-ph-border); border-radius: 6px; background: var(--ndh-ph-bg); color: var(--ndh-ph-text); font-size: .8125rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; vertical-align: .1em; white-space: nowrap; }
.ph--block { display: block; white-space: normal; padding: var(--s-3) var(--s-4); }

/* — Knoppen (pill) — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.5rem; border: 2px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.btn--primary { background: var(--ndh-green-900); color: var(--ndh-white); }
.btn--primary:hover { background: var(--ndh-green-700); color: var(--ndh-white); }
.btn--secondary { background: var(--ndh-white); color: var(--ndh-green-900); border-color: var(--ndh-green-900); }
.btn--secondary:hover { background: var(--ndh-green-50); color: var(--ndh-green-900); }
.btn--light { background: var(--ndh-white); color: var(--ndh-green-900); }
.btn--light:hover { background: var(--ndh-green-100); color: var(--ndh-green-900); }
.btn--ghost-light { background: transparent; color: var(--ndh-white); border-color: rgba(255,255,255,.7); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); color: var(--ndh-white); border-color: var(--ndh-white); }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 29.99em) { .btn-row .btn { flex: 1 1 100%; } }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); font-weight: 700; color: var(--ndh-green-900); text-decoration: none; }
.link-arrow .arrow { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ndh-green-100); color: var(--ndh-green-900); transition: transform .2s var(--ease), background-color .2s var(--ease); }
.link-arrow .arrow svg { width: 1rem; height: 1rem; }
.link-arrow:hover { color: var(--ndh-green-900); }
.link-arrow:hover .arrow { background: var(--ndh-green-900); color: var(--ndh-white); transform: translateX(3px); }

/* — Header + navigatie — */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--ndh-line); }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(12px); } }
.site-header__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); min-height: var(--header-h); }
.site-header__bar > .header-actions { min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; min-height: var(--tap); margin-right: auto; flex: none; }
.brand img { width: auto; height: 38px; }
@media (min-width: 64em) { .brand img { height: 46px; } }
.header-actions { display: flex; align-items: center; gap: var(--s-2); }
.icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--ndh-green-50); color: var(--ndh-green-900); border: 0; cursor: pointer; }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.icon-btn:hover { background: var(--ndh-green-100); color: var(--ndh-green-900); }
.nav-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); padding: 0 1.1rem; border: 0; border-radius: var(--r-pill); background: var(--ndh-green-900); color: var(--ndh-white); font: inherit; font-weight: 700; font-size: .9375rem; text-decoration: none; cursor: pointer; }
.nav-toggle:hover { background: var(--ndh-green-700); color: var(--ndh-white); }
.nav-toggle svg { width: 1.125rem; height: 1.125rem; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }
.nav-toggle[aria-expanded="true"] .i-menu { display: none; }
.header-call { display: none; }

.site-nav { display: none; order: 3; flex: 1 0 100%; border-top: 1px solid var(--ndh-line); background: var(--ndh-white); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: var(--s-2) 0 var(--s-5); }
.site-nav ul a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--s-1); border-bottom: 1px solid var(--ndh-line); color: var(--ndh-green-900); font-size: 1.1875rem; font-weight: 700; text-decoration: none; }
.site-nav ul a[aria-current="page"] { color: var(--ndh-green-700); }
.site-nav ul a[aria-current="page"]::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ndh-green-500); }
.site-nav__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); padding-bottom: var(--s-5); color: var(--ndh-muted); font-size: var(--fs-small); }
.site-nav__contact a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ndh-green-900); font-weight: 700; font-size: 1.0625rem; }

@media (min-width: 64em) {
  .nav-toggle, .icon-btn--call { display: none; }
  .header-call { display: inline-flex; min-height: var(--tap); padding: .55rem 1.2rem; font-size: .9375rem; }
  .site-header__bar { gap: var(--s-5); }
  .site-header__bar { flex-wrap: nowrap; }
  .site-nav, .site-nav.is-open { display: block; order: 0; flex: 0 1 auto; border: 0; background: none; max-height: none; overflow: visible; }
  .site-nav ul { display: flex; gap: var(--s-1); padding: 0; }
  .site-nav ul a { min-height: var(--tap); padding: 0 .85rem; border: 0; border-radius: var(--r-pill); font-size: 1rem; font-weight: 600; }
  .site-nav ul a:hover { background: var(--ndh-green-50); }
  .site-nav ul a[aria-current="page"] { color: var(--ndh-green-900); background: var(--ndh-green-50); }
  .site-nav ul a[aria-current="page"]::after { display: none; }
  .site-nav__contact { display: none; }
}

/* — Hero (home) — */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 5rem) var(--section); }
.hero__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 4rem); align-items: center; }
.hero h1 { font-size: var(--fs-display); max-width: 14ch; }
.hero .lead { max-width: 36rem; margin-bottom: var(--s-6); }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-lg); }
.hero__badge { position: absolute; left: var(--s-4); bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-3); max-width: calc(100% - 2rem); padding: .75rem 1.1rem .75rem .75rem; border-radius: var(--r-card); background: var(--ndh-white); box-shadow: var(--shadow-2); }
.hero__badge img { width: 40px; height: 40px; }
.hero__badge strong { display: block; color: var(--ndh-green-900); font-size: 1rem; line-height: 1.2; }
.hero__badge span { display: block; color: var(--ndh-muted); font-size: .875rem; line-height: 1.3; }
@media (min-width: 64em) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .hero__media img { aspect-ratio: 5 / 4.4; }
  .hero__badge { left: calc(-1 * var(--s-7)); bottom: var(--s-7); }
}

/* — Feitenstrook — */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); margin: 0; padding: var(--s-6) 0 0; border-top: 1px solid var(--ndh-line); }
.facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-1); }
.facts dt { color: var(--ndh-muted); font-size: var(--fs-small); line-height: 1.4; }
.facts dd { margin: 0; color: var(--ndh-green-900); font-size: var(--fs-stat); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.facts dd .ph { margin-left: .25rem; }
@media (min-width: 48em) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .facts div + div { padding-left: var(--s-5); border-left: 1px solid var(--ndh-line); } .facts div:nth-child(3) { padding-left: var(--s-5); } }

/* — Kaarten (productcategorie / pijlers) — */
.card-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ndh-line); border-radius: var(--r-card); background: var(--ndh-white); transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.card__media { overflow: hidden; background: var(--ndh-green-50); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
@media (min-width: 40em) { .card__media img { aspect-ratio: 4 / 3; } }
.card__body { display: flex; flex: 1; flex-direction: column; padding: var(--s-5) var(--s-5) var(--s-4); }
.card__body p { color: var(--ndh-muted); }
.card__tag { align-self: flex-start; margin-bottom: var(--s-3); padding: .2rem .7rem; border-radius: var(--r-pill); background: var(--ndh-green-100); color: var(--ndh-green-900); font-size: .8125rem; font-weight: 700; }
.card .link-arrow { margin-top: auto; }
.card--link .link-arrow::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }  /* hele kaart klikbaar */
.card--link .link-arrow:focus-visible { outline: none; }
.card--link:has(.link-arrow:focus-visible) { outline: 3px solid var(--ndh-focus); outline-offset: 3px; }
.card--link:hover { border-color: var(--ndh-green-500); box-shadow: var(--shadow-2); }
@media (prefers-reduced-motion: no-preference) {
  .card--link:hover { transform: translateY(-3px); }
  .card--link:hover .card__media img { transform: scale(1.04); }
}

/* — Split (foto + tekst) — */
.split { display: grid; gap: clamp(2rem, 1.5rem + 2.5vw, 5rem); align-items: center; }
.split__media img { width: 100%; border-radius: var(--r-lg); object-fit: cover; }
.split__media--portrait img { aspect-ratio: 4 / 5; }
.split__media--landscape img { aspect-ratio: 4 / 3; }
@media (min-width: 64em) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .split--reverse .split__media { order: 2; }
}

.feature-list { display: grid; gap: var(--s-5); margin: var(--s-6) 0 var(--s-6); padding: 0; list-style: none; }
@media (min-width: 40em) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); }
.feature-list .ico { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: var(--ndh-white); color: var(--ndh-green-500); box-shadow: var(--shadow-1); }
.section:not(.section--tint) .feature-list .ico { background: var(--ndh-green-50); box-shadow: none; }
.feature-list .ico svg { width: 1.375rem; height: 1.375rem; }
.feature-list h3 { margin: 0; font-size: 1.125rem; }
.feature-list p { margin: 0; color: var(--ndh-muted); font-size: var(--fs-small); line-height: 1.55; }

/* Genummerde stappen (werkwijze/verwerking) */
.steps { counter-reset: step; display: grid; gap: var(--s-4); margin: var(--s-6) 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--ndh-line); }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; color: var(--ndh-green-700); font-size: 1rem; font-weight: 800; line-height: 1.6; font-variant-numeric: tabular-nums; }
.steps h3 { margin: 0; font-size: 1.125rem; }
.steps p { margin: 0; color: var(--ndh-muted); font-size: var(--fs-small); }

/* — Sinds 1948 / tijdlijn (donker) — */
.history { position: relative; overflow: hidden; background: var(--ndh-green-900); color: var(--ndh-on-dark); }
.history h2 { color: var(--ndh-white); }
.history .lead { color: var(--ndh-on-dark); }
.history__year { display: block; margin-bottom: var(--s-2); color: var(--ndh-lime); font-size: clamp(4rem, 2.5rem + 7vw, 8.5rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.history__grid { display: grid; gap: var(--s-8); }
@media (min-width: 64em) { .history__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 7px; top: .5rem; bottom: .5rem; width: 2px; background: rgba(211,227,214,.28); }
.timeline li { position: relative; padding: 0 0 var(--s-5) var(--s-6); }
.timeline li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 16px; height: 16px; border-radius: 50%; background: var(--ndh-green-900); border: 3px solid var(--ndh-lime); }
.timeline li:last-child { padding-bottom: 0; }
.timeline time, .timeline .t-year { display: block; color: var(--ndh-white); font-size: 1.125rem; font-weight: 800; line-height: 1.4; }
.timeline p { margin: var(--s-1) 0 0; color: var(--ndh-on-dark); font-size: var(--fs-small); }
.history .link-arrow { color: var(--ndh-white); }
.history .link-arrow .arrow { background: var(--ndh-lime); color: var(--ndh-green-900); }
.history .link-arrow:hover .arrow { background: var(--ndh-white); color: var(--ndh-green-900); }
.history__media { margin-top: var(--s-6); }
.history__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }

/* — One Flora Group-vermelding — */
.ofg { display: grid; gap: var(--s-5); align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--ndh-line); border-radius: var(--r-lg); background: var(--ndh-white); }
.ofg__logo { width: 140px; height: auto; }
.ofg h2 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.ofg p { margin-bottom: var(--s-2); color: var(--ndh-muted); }
@media (min-width: 48em) { .ofg { grid-template-columns: auto 1fr auto; gap: var(--s-7); } }

/* — Contact-CTA — */
.cta { display: grid; gap: var(--s-6); padding: clamp(1.75rem, 1rem + 3.5vw, 4rem); border-radius: var(--r-lg); background: var(--ndh-green-50); }
.cta h2 { max-width: 18ch; }
@media (min-width: 64em) { .cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-9); } }
.contact-list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-card); background: var(--ndh-white); }
.contact-grid .contact-list { margin-top: var(--s-6); }
.contact-grid .contact-list li { background: var(--ndh-green-50); }
.contact-grid .contact-list .ico { background: var(--ndh-white); }
.contact-list .ico { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--ndh-green-100); color: var(--ndh-green-900); }
.contact-list .ico svg { width: 1.25rem; height: 1.25rem; }
.contact-list .k { display: block; color: var(--ndh-muted); font-size: .875rem; line-height: 1.3; }
.contact-list a, .contact-list .v { display: inline-block; color: var(--ndh-green-900); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; text-decoration: none; }
.contact-list a { min-height: var(--tap); padding-block: .6rem; }
.contact-list a:hover { text-decoration: underline; }

/* — Consumentennoot (Bloei Bloemen) — */
.notice { display: grid; gap: var(--s-4); align-items: center; padding: var(--s-5) clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-card); border: 1px solid var(--ndh-line); }
.notice p { margin: 0; color: var(--ndh-muted); }
.notice strong { color: var(--ndh-green-900); }
@media (min-width: 48em) { .notice { grid-template-columns: 1fr auto; } }

/* — Binnenpagina: kruimelpad + paginakop — */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: var(--s-3) 0 0; list-style: none; font-size: var(--fs-small); color: var(--ndh-muted); }
.breadcrumb li + li::before { content: "/"; margin: 0 .5rem; color: var(--ndh-field); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--ndh-muted); }
.breadcrumb a:hover { color: var(--ndh-green-900); }
.page-hero { padding-block: var(--s-5) var(--section); }
.page-hero__text { display: grid; gap: var(--s-4); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-hero__text .lead { margin: 0; }
@media (min-width: 64em) { .page-hero__text { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-9); align-items: end; } .page-hero__text h1 { margin: 0; } }
.page-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
@media (min-width: 48em) { .page-hero__media img { aspect-ratio: 21 / 9; } }

/* Chips (gelegenheden) */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.chips li { padding: .45rem 1rem; border-radius: var(--r-pill); background: var(--ndh-white); border: 1px solid var(--ndh-line); color: var(--ndh-green-900); font-size: var(--fs-small); font-weight: 600; }
.section--tint .chips li { border-color: transparent; }

/* Galerij */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.gallery li:first-child { grid-column: span 2; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
.gallery li:first-child img { aspect-ratio: 4 / 3; }
@media (min-width: 48em) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } .gallery li:first-child { grid-column: auto; } .gallery li:first-child img { aspect-ratio: 4 / 5; } }

/* — Kaart + route (contact) — statische afbeelding, géén embed (CSP/AVG/Lighthouse) — */
.map-card { margin: 0; }
.map-card__link { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--ndh-line); }
.map-card__link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
@media (min-width: 48em) { .map-card__link img { aspect-ratio: 16 / 10; } }
.map-card__label { position: absolute; left: var(--s-4); bottom: var(--s-4); display: inline-flex; align-items: center; gap: .5rem; max-width: calc(100% - 2rem); padding: .6rem 1rem; border-radius: var(--r-pill); background: var(--ndh-white); color: var(--ndh-green-900); font-weight: 700; font-size: .9375rem; box-shadow: var(--shadow-2); }
.map-card__label svg { width: 1.125rem; height: 1.125rem; flex: none; }
.map-card__link:hover .map-card__label { background: var(--ndh-green-900); color: var(--ndh-white); }
@media (prefers-reduced-motion: no-preference) { .map-card__link:hover img { transform: scale(1.02); } }
.map-card figcaption { margin-top: var(--s-2); color: var(--ndh-muted); font-size: .8125rem; }
.map-card figcaption a { color: var(--ndh-muted); }
.route-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.route-links a { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--tap); padding: .5rem 1.1rem; border-radius: var(--r-pill); border: 1.5px solid var(--ndh-green-900); color: var(--ndh-green-900); font-weight: 700; font-size: .9375rem; text-decoration: none; }
.route-links a:hover { background: var(--ndh-green-50); color: var(--ndh-green-900); }
.route-links svg { width: 1rem; height: 1rem; }
.contact-grid { display: grid; gap: var(--s-7); }
@media (min-width: 64em) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--s-9); } }
.loc-grid { display: grid; gap: var(--s-5); }
@media (min-width: 48em) { .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loc { padding: var(--s-6); border-radius: var(--r-card); background: var(--ndh-white); }
.loc p { margin: 0; color: var(--ndh-muted); }

/* — Footer — */
.site-footer { background: var(--ndh-green-900); color: var(--ndh-on-dark); font-size: var(--fs-small); }
.site-footer__top { display: grid; gap: var(--s-7); padding-block: var(--s-9) var(--s-7); }
@media (min-width: 48em) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .site-footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.site-footer .brand-foot img { width: auto; height: 48px; margin-bottom: var(--s-5); }
.site-footer h2 { margin-bottom: var(--s-3); color: var(--ndh-white); font-size: 1rem; letter-spacing: 0; }
.site-footer p { margin-bottom: var(--s-3); }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--ndh-white); text-decoration: none; }
.site-footer a:hover { color: var(--ndh-white); text-decoration: underline; }
.site-footer address { font-style: normal; }
.site-footer .ph { background: #FFF1C7; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between; align-items: center; padding-block: var(--s-4); border-top: 1px solid rgba(211,227,214,.22); }
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }

/* — Hulpmiddelen — */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--s-4); }

@media print {
  .site-header, .site-nav, .nav-toggle, .skip-link, .btn-row { display: none !important; }
  body { color: #000; } .history, .site-footer { background: none; color: #000; }
}

/* ===== Aanvullingen build (stap 2): over-ons, planten, privacy, 404 ===== */
.card-grid--4 { }
@media (min-width: 64em) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card--text .card__body { padding-top: var(--s-5); }
.card--text .card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--s-4); border-radius: 14px; background: var(--ndh-green-50); color: var(--ndh-green-500); }
.card--text .card__icon svg { width: 1.375rem; height: 1.375rem; }
.cols-2 { display: grid; gap: 0 var(--s-8); }
.cols-2 p { max-width: 68ch; }
@media (min-width: 64em) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.section-head + .cols-2 { margin-bottom: var(--s-7); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-8); font-size: var(--fs-h3); }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--s-2); }
.prose .updated { color: var(--ndh-muted); font-size: var(--fs-small); }
.page-hero--plain { padding-bottom: var(--s-6); }
.page-hero--plain h1 { margin-bottom: var(--s-4); }
.links-404 { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.quote { margin: var(--s-6) 0; padding-left: var(--s-5); border-left: 3px solid var(--ndh-green-500); color: var(--ndh-green-900); font-size: var(--fs-lead); font-weight: 600; }
.quote p { margin: 0; }
.quote span { display: block; margin-top: var(--s-2); color: var(--ndh-muted); font-size: var(--fs-small); font-weight: 400; }