/* ============================================================
   TUNGA — gedeelde stylesheet
   Kleurstijl 1: terracotta amber / slate teal / warm sand
   Mobiel eerst; werkt ook op laptop en desktop.
   ============================================================ */

:root {
  --color-primary:        #C4632A;
  --color-primary-light:  #E07A42;
  --color-primary-deep:   #8F4118;
  --color-primary-soft:   #F5E6D8;
  --color-secondary:      #1A6B5A;
  --color-secondary-light:#27876E;
  --color-secondary-deep: #0F4A3D;
  --color-secondary-soft: #DDF0EA;
  --color-bg:             #F7F2EC;
  --color-bg-card:        #EDE6DA;
  --color-text-muted:     #9C8F7E;
  /* Steen uit het brandboard: haalt 5,3:1 op warm sand, waar
     --color-text-muted maar 2,8:1 haalt. Gebruik dit voor nieuwe
     bijschriften en labels. */
  --color-steen:          #6E6356;
  --color-text:           #2C2520;
  --color-white:          #FFFFFF;

  --font-display: 'Vollkorn', Georgia, 'Times New Roman', serif;
  --font-body: 'Albert Sans', 'Segoe UI', system-ui, Arial, sans-serif;

  --nav-h: 64px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(44, 37, 32, 0.10);

  /* Bewegingsvocabulaire: twee curves voor de hele site, meer niet.
     ease-out voor alles wat verschijnt of reageert op een klik;
     ease-drawer voor panelen die in- en uitschuiven. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h4 { line-height: 1.3; }

img { max-width: 100%; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1060px; margin: 0 auto; padding: 0 22px; }
.container-smal { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* Taalwissel: body[data-lang] bepaalt welke blokken zichtbaar zijn */
body[data-lang="nl"] .only-en { display: none !important; }
body[data-lang="en"] .only-nl { display: none !important; }

/* ============================================================
   FUNDAMENTLIJN — signatuur: de lijn vult zich al scrollend
   ============================================================ */
#fundamentlijn {
  position: fixed;
  left: 0; top: 0;
  width: 4px; height: 100vh;
  background: rgba(196, 99, 42, 0.14);
  z-index: 60;
  pointer-events: none;
}
#fundamentlijn .vulling {
  display: block;
  width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
}

/* ============================================================
   NAVIGATIE
   ============================================================ */
nav.hoofdnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  z-index: 50;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  background: transparent;
}
nav.hoofdnav.vast {
  background: rgba(247, 242, 236, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(44, 37, 32, 0.08);
}
nav.hoofdnav .nav-binnen {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 18px 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  color: var(--color-primary-deep);
  text-decoration: none;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo-descriptor {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  line-height: 1;
  margin-bottom: 3px;
}
.nav-logo-woord {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}
nav.hoofdnav.op-hero:not(.vast) .nav-logo,
nav.hoofdnav.op-hero:not(.vast) .nav-links a,
nav.hoofdnav.op-hero:not(.vast) .taalknop { color: var(--color-white); }

.nav-links {
  display: none;
  gap: 22px;
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
}
.nav-links a:hover { color: var(--color-primary); text-decoration: none; }

.nav-acties { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (min-width: 860px) {
  .nav-links { display: flex; }
  .nav-acties { margin-left: 0; }
}

.taalknop {
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--color-text);
  font: 600 13px var(--font-body);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.taalknop:hover { color: var(--color-primary); }

.menu-knop {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.menu-knop span {
  width: 22px; height: 2px;
  background: currentColor;
  color: var(--color-text);
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
nav.hoofdnav.op-hero:not(.vast) .menu-knop span { background: var(--color-white); }
@media (min-width: 860px) { .menu-knop { display: none; } }

body.menu-open .menu-knop span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-knop span:nth-child(2) { opacity: 0; }
body.menu-open .menu-knop span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Het menu blijft in de DOM en schuift uit de navigatiebalk naar beneden,
   zodat zichtbaar is waar het vandaan komt. visibility houdt het buiten de
   toetsenbordvolgorde en de schermlezer zolang het dicht is. */
.mobiel-menu {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow);
  z-index: 49;
  display: flex;
  flex-direction: column;
  padding: 8px 0 16px;
  opacity: 0;
  transform: translateY(-8px);
  transform-origin: top;
  visibility: hidden;
  transition: opacity 220ms var(--ease-drawer),
              transform 220ms var(--ease-drawer),
              visibility 0s linear 220ms;
}
body.menu-open .mobiel-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mobiel-menu, body.menu-open .mobiel-menu { transform: none; }
  .mobiel-menu { transition: opacity 120ms linear, visibility 0s linear 120ms; }
}
.mobiel-menu a {
  padding: 13px 26px;
  color: var(--color-text);
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid rgba(44, 37, 32, 0.06);
}
.mobiel-menu a:hover { text-decoration: none; color: var(--color-primary); }

/* ============================================================
   KNOPPEN
   ============================================================ */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font: 600 15px var(--font-body);
  cursor: pointer;
  border: 2px solid transparent;
  text-align: center;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out),
              background 0.2s ease, opacity 160ms ease-out;
}
.btn:hover { text-decoration: none; }
/* De lift alleen op apparaten met een echte muisaanwijzer: op een
   telefoon blijft hover anders "plakken" na het tikken. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}
/* Aanraakbevestiging: de knop veert in onder je vinger of muis. */
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primair { background: var(--color-primary); color: var(--color-white); box-shadow: 0 6px 18px rgba(196, 99, 42, 0.35); }
.btn-primair:hover { background: var(--color-primary-light); }
.btn-secundair { background: var(--color-secondary); color: var(--color-white); }
.btn-secundair:hover { background: var(--color-secondary-light); }
.btn-rand { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn-rand:hover { background: var(--color-primary-soft); }
.btn-rand-wit { border-color: var(--color-white); color: var(--color-white); background: transparent; }
.btn-rand-wit:hover { background: rgba(255, 255, 255, 0.12); }
.btn-klein { padding: 9px 18px; font-size: 14px; }
/* Tijdens het versturen: de knop laat zien dat hij je klik gehoord heeft.
   Geen spinner — het label verandert (zie tunga.js), dit is de rest. */
.btn:disabled, .btn:disabled:hover, .btn:disabled:active {
  opacity: 0.55;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; opacity: 0.85; }
}

/* ============================================================
   SECTIES & VERHAAL
   ============================================================ */
.sectie { padding: 72px 0; }
.sectie-donker {
  background: var(--color-secondary-deep);
  color: var(--color-white);
}
.sectie-donker h2, .sectie-donker h3 { color: var(--color-white); }
.sectie-kaartbg { background: var(--color-bg-card); }
.sectie-primair-zacht { background: var(--color-primary-soft); }

.sectie-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.sectie-donker .sectie-label { color: var(--color-primary-light); }

.sectie h2 { font-size: clamp(28px, 5vw, 42px); margin-bottom: 18px; }
.sectie .intro { font-size: clamp(17px, 2.4vw, 19px); color: var(--color-text-muted); max-width: 640px; }
.sectie-donker .intro { color: rgba(255, 255, 255, 0.75); }

/* Onthulling bij scrollen */
.onthul { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.onthul.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .onthul { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
}

/* Kaarten in een raster staan op dezelfde hoogte en verschijnen dus
   tegelijk: een muur die in één keer aankomt. Een korte trap maakt er een
   reeks van. Alleen wanneer het raster meerdere kolommen heeft — in één
   kolom scrol je er toch al langs en zou de vertraging alleen traag voelen. */
@media (min-width: 640px) {
  .werk-kaarten > .onthul:nth-child(2) { transition-delay: 60ms; }
  .werk-kaarten > .onthul:nth-child(3) { transition-delay: 120ms; }
  .werk-kaarten > .onthul:nth-child(4) { transition-delay: 180ms; }
}
@media (min-width: 860px) {
  .geef-opties > .onthul:nth-child(2) { transition-delay: 60ms; }
  .geef-opties > .onthul:nth-child(3) { transition-delay: 120ms; }
}

/* Foto's vervangen de plaatshouder met een korte overgang in plaats van
   in één frame. Zie tungaLaadFotoIn in tunga.js. */
.foto { opacity: 0; transition: opacity 300ms var(--ease-out); }
.foto.geladen { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .foto { opacity: 1; transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  background: var(--color-secondary-deep);
  overflow: hidden;
}
.hero .hero-foto {
  position: absolute; inset: 0;
}
.hero .hero-foto img, .hero .hero-foto .plaatshouder {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 74, 61, 0.25) 0%, rgba(30, 22, 15, 0.72) 82%);
}
.hero .hero-inhoud {
  position: relative;
  z-index: 2;
  padding: 0 26px 96px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 860px) { .hero .hero-inhoud { max-width: 1060px; padding-bottom: 110px; } }
.hero .oshiwambo {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  font-weight: 700;
  margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(44px, 9vw, 84px);
  font-weight: 600;
  margin-bottom: 16px;
}
.hero .ondertitel {
  font-size: clamp(18px, 3vw, 22px);
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  margin-bottom: 28px;
}
.scrollhint {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.scrollhint::after {
  content: "";
  display: block;
  width: 1.5px; height: 34px;
  margin: 8px auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
  animation: hintval 1.8s ease-in-out infinite;
}
@keyframes hintval {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .scrollhint::after { animation: none; } }

/* ============================================================
   FEITEN (het probleem)
   ============================================================ */
.feiten { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 760px) { .feiten { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.feit .getal {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 64px);
  font-weight: 600;
  color: var(--color-primary-light);
  line-height: 1;
  margin-bottom: 10px;
}
.feit p { color: rgba(255, 255, 255, 0.82); font-size: 16px; max-width: 300px; }

/* ============================================================
   MENSEN (Gabriel & Nicol)
   ============================================================ */
.mensen { display: grid; gap: 34px; align-items: center; }
@media (min-width: 860px) { .mensen { grid-template-columns: 5fr 6fr; gap: 56px; } }
.mensen .foto-kader { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; }
.mensen .foto-kader img, .mensen .foto-kader .plaatshouder { width: 100%; height: 100%; object-fit: cover; }
.citaat {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 24px);
  font-style: italic;
  color: var(--color-secondary-deep);
  border-left: 3px solid var(--color-primary);
  padding-left: 18px;
  margin: 22px 0;
}

/* ============================================================
   WERK VAN NU — kaarten
   ============================================================ */
.werk-kaarten { display: grid; gap: 20px; margin-top: 44px; }
@media (min-width: 640px) { .werk-kaarten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .werk-kaarten { grid-template-columns: repeat(4, 1fr); } }
.werk-kaart {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(44, 37, 32, 0.07);
  display: flex;
  flex-direction: column;
}
.werk-kaart .kaart-foto { aspect-ratio: 4 / 3; overflow: hidden; }
.werk-kaart .kaart-foto img, .werk-kaart .kaart-foto .plaatshouder { width: 100%; height: 100%; object-fit: cover; }
.werk-kaart .kaart-tekst { padding: 20px 20px 24px; }
.werk-kaart h3 { font-size: 19px; margin-bottom: 8px; }
.werk-kaart p { font-size: 15px; color: var(--color-text-muted); }

/* ============================================================
   FASENLIJN (echo van de fundamentlijn)
   ============================================================ */
.fasen { position: relative; margin-top: 48px; padding-left: 34px; max-width: 640px; }
.fasen::before {
  content: "";
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-soft));
  border-radius: 2px;
}
.fase {
  position: relative;
  padding: 12px 16px 16px 16px;
  margin-bottom: 18px;
  border-radius: 14px;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.fase:last-child { margin-bottom: 0; }
.fase::before {
  content: "";
  position: absolute;
  left: -32px; top: 19px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 3px solid var(--color-primary);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.fase.nu::before { background: var(--color-primary); }
/* Oplichten: bij hover (desktop) of .actief (telefoon/tablet,
   gezet door tunga.js zodra de fase midden in beeld staat) */
.fase:hover, .fase.actief {
  background: var(--color-bg-card);
  box-shadow: 0 8px 22px rgba(44, 37, 32, 0.09);
}
.fase:hover::before, .fase.actief::before {
  transform: scale(1.35);
  background: var(--color-primary);
  box-shadow: 0 0 0 6px rgba(196, 99, 42, 0.16);
}
.fase:hover .fase-tag, .fase.actief .fase-tag { color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .fase, .fase::before { transition: none; }
}
.fase .fase-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.fase.nu .fase-tag { color: var(--color-primary); }
.fase h3 { font-size: 20px; margin-bottom: 6px; }
.fase p { font-size: 15.5px; color: var(--color-text-muted); max-width: 520px; }

/* ============================================================
   BRUG NL–NAM
   ============================================================ */
.brug-stappen { display: grid; gap: 22px; margin-top: 44px; }
@media (min-width: 760px) { .brug-stappen { grid-template-columns: repeat(3, 1fr); } }
.brug-stap {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: 0 4px 16px rgba(44, 37, 32, 0.06);
}
.brug-stap .icoon { font-size: 26px; margin-bottom: 12px; }
.brug-stap h3 { font-size: 18px; margin-bottom: 8px; }
.brug-stap p { font-size: 15px; color: var(--color-text-muted); }

/* ============================================================
   DOE MEE / DONEREN
   ============================================================ */
.geef-opties { display: grid; gap: 20px; margin-top: 44px; }
@media (min-width: 860px) { .geef-opties { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.geef-kaart {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(44, 37, 32, 0.07);
  display: flex;
  flex-direction: column;
  position: relative;
}
.geef-kaart.uitgelicht { border: 2px solid var(--color-primary); box-shadow: 0 12px 32px rgba(196, 99, 42, 0.18); }
.uitgelicht-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
}
.geef-kaart .bedrag { font-family: var(--font-display); font-size: 42px; font-weight: 600; color: var(--color-primary-deep); }
.geef-kaart .periode { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 14px; }
.geef-kaart h3 { font-size: 19px; margin-bottom: 8px; }
.geef-kaart p { font-size: 14.5px; color: var(--color-text-muted); flex: 1; margin-bottom: 18px; }

.routes { display: grid; gap: 20px; margin-top: 34px; }
@media (min-width: 860px) { .routes { grid-template-columns: repeat(3, 1fr); } }
.route-kaart {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: 0 4px 16px rgba(44, 37, 32, 0.07);
  display: flex;
  flex-direction: column;
}
.route-kaart .icoon { font-size: 30px; margin-bottom: 12px; }
.route-kaart h3 { font-size: 20px; margin-bottom: 10px; }
.route-kaart p { font-size: 15px; color: var(--color-text-muted); margin-bottom: 14px; }
.route-kaart ul { list-style: none; margin-bottom: 20px; flex: 1; }
.route-kaart li {
  font-size: 14.5px;
  color: var(--color-text-muted);
  padding: 5px 0 5px 22px;
  position: relative;
}
.route-kaart li::before {
  content: "→";
  position: absolute; left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.sponsorblok {
  margin-top: 44px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
}
@media (min-width: 860px) { .sponsorblok { grid-template-columns: 1fr 1fr; } }
.sponsorblok .links { background: var(--color-secondary); color: var(--color-white); padding: 36px 32px; }
.sponsorblok .links h3 { color: var(--color-white); font-size: 26px; margin-bottom: 10px; }
.sponsorblok .links p { font-size: 15px; opacity: 0.9; margin-bottom: 22px; }
.sponsorblok .rechts { background: var(--color-white); padding: 36px 32px; }
.sponsorblok .rechts h4 { font-size: 17px; margin-bottom: 14px; }
.sponsorblok .rechts ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sponsorblok .rechts li { font-size: 15px; padding-left: 22px; position: relative; color: var(--color-text-muted); }
.sponsorblok .rechts li::before { content: "→"; position: absolute; left: 0; color: var(--color-secondary); font-weight: 700; }

/* ============================================================
   FORMULIEREN
   ============================================================ */
.form-box {
  background: var(--color-white);
  border-radius: 20px;
  padding: 34px 28px;
  box-shadow: var(--shadow);
  max-width: 560px;
  margin: 44px auto 0;
}
.form-box h3 { font-size: 24px; margin-bottom: 6px; }
.form-box .subtitel { font-size: 15px; color: var(--color-text-muted); margin-bottom: 22px; }
.form-groep { margin-bottom: 16px; }
.form-groep label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.form-groep input, .form-groep select, .form-groep textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-bg-card);
  border-radius: 10px;
  font: 400 15px var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}
.form-groep input:focus, .form-groep select:focus, .form-groep textarea:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
  border-color: var(--color-primary-light);
}
.form-groep textarea { min-height: 110px; resize: vertical; }
.form-rij { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .form-rij { grid-template-columns: 1fr 1fr; } }
.form-melding {
  display: none;
  background: var(--color-secondary-soft);
  color: var(--color-secondary-deep);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  margin-top: 14px;
}
/* De bevestiging na doneren of aanmelden is het belangrijkste moment van
   de site. Hij mag niet in één frame uit het niets verschijnen. */
.form-melding.zichtbaar {
  display: block;
  animation: meldingIn 320ms var(--ease-out) both;
}
@keyframes meldingIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .form-melding.zichtbaar { animation: meldingInZacht 200ms ease-out both; }
}
@keyframes meldingInZacht {
  from { opacity: 0; }
}
.form-melding.fout {
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
}

/* Nieuwsbrief */
.nieuwsbrief-box {
  background: var(--color-primary-soft);
  border-radius: 20px;
  padding: 40px 28px;
  text-align: center;
}
.nieuwsbrief-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
  margin: 22px auto 0;
}
@media (min-width: 560px) { .nieuwsbrief-form { flex-direction: row; } }
.nieuwsbrief-form input {
  flex: 1;
  padding: 13px 16px;
  border: 1.5px solid rgba(143, 65, 24, 0.25);
  border-radius: 999px;
  font: 400 15px var(--font-body);
  background: var(--color-white);
}
.nieuwsbrief-form input:focus { outline: 2px solid var(--color-primary-light); }

/* ============================================================
   NIEUWS
   ============================================================ */
.nieuws-grid { display: grid; gap: 22px; margin-top: 40px; }
@media (min-width: 640px) { .nieuws-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .nieuws-grid { grid-template-columns: repeat(3, 1fr); } }
.nieuws-kaart {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(44, 37, 32, 0.07);
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nieuws-kaart:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(44, 37, 32, 0.13); text-decoration: none; }
.nieuws-kaart .kaart-foto { aspect-ratio: 16 / 9; overflow: hidden; }
.nieuws-kaart .kaart-foto img, .nieuws-kaart .kaart-foto .plaatshouder { width: 100%; height: 100%; object-fit: cover; }
.nieuws-kaart .kaart-tekst { padding: 20px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.nieuws-meta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; margin-bottom: 8px; }
.nieuws-datum { color: var(--color-text-muted); }
.nieuws-cat {
  background: var(--color-secondary-soft);
  color: var(--color-secondary-deep);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.nieuws-kaart h3 { font-size: 19px; margin-bottom: 8px; }
.nieuws-kaart p { font-size: 14.5px; color: var(--color-text-muted); flex: 1; }
.nieuws-kaart .leesmeer { margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--color-primary); }

.paginering {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.paginering button {
  min-width: 42px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--color-bg-card);
  background: var(--color-white);
  font: 600 14px var(--font-body);
  color: var(--color-text);
  cursor: pointer;
}
.paginering button.actief { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.paginering button:disabled { opacity: 0.4; cursor: default; }

/* Artikelpagina */
.artikel-kop { padding: calc(var(--nav-h) + 40px) 0 0; }
.artikel-kop h1 { font-size: clamp(30px, 5.5vw, 44px); margin: 10px 0 18px; }
.artikel-foto { border-radius: var(--radius); overflow: hidden; margin: 26px 0 8px; aspect-ratio: 16 / 9; }
.artikel-foto img, .artikel-foto .plaatshouder { width: 100%; height: 100%; object-fit: cover; }
.artikel-body { padding: 26px 0 10px; }
.artikel-body p { margin-bottom: 18px; }
.artikel-body h2 { font-size: 24px; margin: 30px 0 12px; }
.artikel-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  border-top: 1px solid var(--color-bg-card);
  margin-top: 36px;
  padding: 22px 0 0;
}
.artikel-nav a {
  font-weight: 600;
  font-size: 15px;
  max-width: 46%;
}
.artikel-nav .terug { width: 100%; text-align: center; order: 3; margin-top: 6px; color: var(--color-text-muted); font-weight: 500; }

/* ============================================================
   PAGINAKOP (subpagina's)
   ============================================================ */
.paginakop {
  padding: calc(var(--nav-h) + 56px) 0 48px;
  background: linear-gradient(180deg, var(--color-primary-soft), var(--color-bg));
}
.paginakop h1 { font-size: clamp(32px, 6vw, 48px); margin-bottom: 12px; }
.paginakop p { color: var(--color-text-muted); font-size: 18px; max-width: 620px; }
.terugkruimel {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--color-primary);
}

/* ============================================================
   FOTO-PLAATSHOUDER (tot echte foto's er zijn)
   ============================================================ */
.plaatshouder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(196, 99, 42, 0.07) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--color-bg-card), var(--color-primary-soft));
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 14px;
  width: 100%; height: 100%;
  min-height: 120px;
}
.plaatshouder .ph-icoon { font-size: 26px; opacity: 0.7; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--color-secondary-deep);
  color: rgba(255, 255, 255, 0.8);
  padding: 56px 0 28px;
  margin-top: 72px;
}
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-logo { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--color-white); margin-bottom: 10px; line-height: 1.1; }
.footer-logo-descriptor {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2px;
}
.footer-grid p { font-size: 14.5px; max-width: 300px; }
.footer-grid h4 { color: var(--color-white); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-grid a { color: rgba(255, 255, 255, 0.8); font-size: 14.5px; }
.footer-grid a:hover { color: var(--color-white); }
.anbi-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  margin-top: 16px;
}
.footer-onder {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 42px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   HULPKLASSE — alleen voor schermlezers
   ============================================================ */
.alleen-schermlezer {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   MEDIALINKS (media.html)
   ============================================================ */
.link-lijst { list-style: none; display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 860px) { .link-lijst { grid-template-columns: 1fr 1fr; } }

.link-kaart a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 22px 22px;
  box-shadow: 0 4px 16px rgba(44, 37, 32, 0.07);
  color: var(--color-text);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.link-kaart a:hover { text-decoration: none; box-shadow: 0 12px 28px rgba(44, 37, 32, 0.13); }
@media (hover: hover) and (pointer: fine) {
  .link-kaart a:hover { transform: translateY(-2px); }
}
.link-kaart a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.link-icoon {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-size: 16px;
}
.link-tekst { flex: 1; min-width: 0; }
.link-bron {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-steen);
  margin-bottom: 5px;
}
.link-titel {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.link-omschrijving { font-size: 15px; color: var(--color-steen); margin-top: 7px; }
.link-extern { flex: none; color: var(--color-primary); font-size: 15px; }
.link-lijst + .leeg, .leeg { color: var(--color-steen); margin-top: 30px; }

/* ============================================================
   ZOEKEN — knop in de balk en het overlaypaneel
   ============================================================ */
.zoekknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.zoekknop:hover { color: var(--color-primary); }
.zoekknop:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
nav.hoofdnav.op-hero:not(.vast) .zoekknop { color: var(--color-white); }

/* Op smalle schermen zou de balk overlopen met logo, zoekknop,
   taalknop, doneerknop én hamburger. De taalknop verhuist daarom
   naar het uitklapmenu; zoeken blijft direct bereikbaar. */
.taalknop-menu {
  display: none;
  margin: 12px 26px 0;
  align-self: flex-start;
}
@media (max-width: 559px) {
  .nav-acties .taalknop:not(.taalknop-menu) { display: none; }
  .taalknop-menu { display: inline-block; }
}

.zoek-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(44, 37, 32, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
.zoek-overlay.zichtbaar { opacity: 1; }
.zoek-overlay[hidden] { display: none; }
body.zoek-open { overflow: hidden; }

.zoek-paneel {
  width: 100%;
  max-width: 560px;
  background: var(--color-bg);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(44, 37, 32, 0.28);
  padding: 18px;
  transform: scale(0.98);
  transition: transform 160ms var(--ease-out);
}
.zoek-overlay.zichtbaar .zoek-paneel { transform: scale(1); }

.zoek-veld {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-bg-card);
  border-radius: 999px;
  font: 400 16px var(--font-body);
  background: var(--color-white);
  color: var(--color-text);
}
.zoek-veld:focus { outline: 2px solid var(--color-primary-light); outline-offset: 1px; }

.zoek-resultaten { max-height: 52vh; overflow-y: auto; margin-top: 12px; }
.zoek-groep {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-steen);
  padding: 12px 10px 5px;
}
.zoek-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--color-text);
}
.zoek-item:hover, .zoek-item.actief { background: var(--color-primary-soft); text-decoration: none; }
.zoek-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.zoek-titel { font-weight: 600; font-size: 15.5px; }
.zoek-bij { font-size: 13px; color: var(--color-steen); margin-left: auto; flex: none; }
.zoek-extern { color: var(--color-primary); flex: none; }
.zoek-hint { font-size: 14px; color: var(--color-steen); padding: 14px 12px 6px; }

@media (prefers-reduced-motion: reduce) {
  .zoek-overlay, .zoek-paneel { transition: none; }
  .zoek-paneel { transform: none; }
  .link-kaart a { transition: none; }
}

/* ANBI-tabel */
.anbi-tabel { width: 100%; border-collapse: collapse; margin-top: 26px; }
.anbi-tabel th, .anbi-tabel td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-bg-card);
  font-size: 15px;
  vertical-align: top;
}
.anbi-tabel th { width: 38%; color: var(--color-secondary-deep); }