/* Ontwikkelhub Curacao.

   Vormgevingsidee: de Hub werkt in de ruimte tussen systemen, en Willemstad heeft
   een brug die openzwaait en weer sluit. Overgangen worden daarom zichtbaar
   gemaakt in plaats van gladgestreken. Geel is de kleur van de Hub zelf en wordt
   spaarzaam ingezet: als verbindingsstreepje, als knop, nergens als versiering.

   De kleuren komen exact overeen met src/config/tokens.js. Wijzig ze alleen daar
   en neem de wijziging hier over, want de contrasttest bewaakt die waarden. */

/* Lettertypen worden lokaal geserveerd, nooit vanaf een Google-server. Anders
   gaat het IP-adres van elke bezoeker naar een derde partij, wat in Nederland
   al meermaals is beboet. Inter is een variabel font, vandaar de gewichtsrange. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --kleur-navy: #0E2A55;
  --kleur-navy-diep: #071B38;
  --kleur-geel: #F5C518;
  --kleur-mint: #DFF3EC;
  --kleur-teal: #12604D;
  --kleur-lichtblauw: #DCE9F7;
  --kleur-blauw: #1F5488;
  --kleur-lichtpaars: #E7E0F5;
  --kleur-paars: #54397F;
  --kleur-wit: #FFFFFF;
  --kleur-lichtgrijs: #EDF2F7;
  --kleur-inkt: #1A2434;

  /* Afgeleide tinten voor randen en zachte scheidingen. */
  --lijn-donker: rgba(255, 255, 255, 0.16);
  --lijn-licht: rgba(14, 42, 85, 0.14);

  --font-kop: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-tekst: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --ruimte-xs: 0.25rem;
  --ruimte-s: 0.5rem;
  --ruimte-m: 1rem;
  --ruimte-l: 2rem;
  --ruimte-xl: 3rem;
  --ruimte-xxl: 4.5rem;

  --omhulsel-breedte: 76rem;
  --rand-radius: 0.875rem;
}

@media (min-width: 60rem) {
  :root { --ruimte-xl: 4rem; --ruimte-xxl: 7rem; }
}

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

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

/* Typografische schaal. Archivo staat strak afgesteld, want op grote formaten
   valt de standaardletterafstand uit elkaar. */
h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 var(--ruimte-m); }
h3 { font-size: 1.1875rem; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }

a { color: var(--kleur-blauw); }
/* Knoppen bepalen hun eigen tekstkleur. Zonder :not(.knop) wint deze regel van
   .knop--primair en wordt gele knoptekst wit, met een contrast van 1.6 op 1. */
.hero a:not(.knop), .ctaband a:not(.knop),
.voet a:not(.knop), .sectie--navy a:not(.knop) { color: var(--kleur-wit); }

.omhulsel {
  max-width: var(--omhulsel-breedte);
  margin-inline: auto;
  padding-inline: var(--ruimte-l);
}
.omhulsel--smal { max-width: 44rem; }

.sectie { padding-block: var(--ruimte-xxl); }
.sectie--licht { background: var(--kleur-wit); color: var(--kleur-inkt); }
.sectie--grijs { background: var(--kleur-lichtgrijs); color: var(--kleur-inkt); }
.sectie--navy { background: var(--kleur-navy); color: var(--kleur-wit); }
.sectie--mint { background: var(--kleur-mint); color: var(--kleur-inkt); }
.sectie--lichtblauw { background: var(--kleur-lichtblauw); color: var(--kleur-inkt); }
.sectie--lichtpaars { background: var(--kleur-lichtpaars); color: var(--kleur-inkt); }

/* Twee lichte secties achter elkaar krijgen een haarlijn, anders lopen ze in
   elkaar over en verdwijnt het ritme van de pagina. */
.sectie--licht + .sectie--licht { border-top: 1px solid var(--lijn-licht); }

.knop {
  display: inline-block;
  padding: 0.8125rem 1.625rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.knop--primair { background: var(--kleur-geel); color: var(--kleur-navy); }
.knop--secundair { background: transparent; color: currentColor; border-color: currentColor; }
.knop:hover { transform: translateY(-1px); }
.knop--primair:hover { box-shadow: 0 6px 18px rgba(245, 197, 24, 0.35); }

/* De bovenkop is bewust geen tracked-out hoofdletterlabel. In plaats daarvan een
   kort geel streepje: hetzelfde geel dat door de hele site de Hub aanduidt. */
.bovenkop {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kleur-blauw);
  margin: 0 0 var(--ruimte-s);
}
.bovenkop::before {
  content: '';
  width: 1.75rem;
  height: 3px;
  background: var(--kleur-geel);
  flex: none;
}
.sectie--navy .bovenkop, .hero .bovenkop { color: var(--kleur-geel); }

.sectie__kop { margin-bottom: var(--ruimte-s); }
.sectie__subkop {
  margin: 0 0 var(--ruimte-xl);
  max-width: 60ch;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--kleur-inkt) 78%, transparent);
}
.rijketekst > :first-child { margin-top: 0; }
.rijketekst > :last-child { margin-bottom: 0; }
.rijketekst p { max-width: 68ch; }

.tekstlink {
  display: inline-block;
  font-weight: 600;
  color: var(--kleur-blauw);
  text-decoration: none;
  border-bottom: 2px solid var(--kleur-geel);
  padding-bottom: 1px;
}
.tekstlink:hover { border-bottom-width: 3px; }

/* ---------- Header ---------- */

.kop {
  background: var(--kleur-wit);
  border-bottom: 1px solid var(--lijn-licht);
  position: sticky;
  top: 0;
  z-index: 10;
}
.kop__binnen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--ruimte-l);
  padding-block: var(--ruimte-m);
}
.kop__logo { text-decoration: none; color: inherit; display: grid; line-height: 1.05; }
.kop__merk {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.015em;
}
.kop__plaats {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-blauw);
}

/* De schakelaar wordt pas door menu.js zichtbaar gemaakt. Zonder JavaScript
   blijft de navigatie volledig zichtbaar in plaats van onbereikbaar. */
.kop__schakelaar {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.5rem 0.25rem;
}
.kop__schakelaar[hidden] { display: none; }
.kop__streepjes, .kop__streepjes::before, .kop__streepjes::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--kleur-navy);
}
.kop__streepjes { position: relative; }
.kop__streepjes::before, .kop__streepjes::after { content: ''; position: absolute; left: 0; }
.kop__streepjes::before { top: -6px; }
.kop__streepjes::after { top: 6px; }

/* Het kruis wordt in twee tellen gevormd in plaats van in een klap: de balken
   schuiven eerst naar elkaar toe en draaien daarna pas. Bij het sluiten precies
   andersom, want een beweging die terugloopt hoort ook terug te lopen. De
   vertragingen wisselen daarom mee met de toestand. */
.kop__streepjes {
  transition: background-color 0.16s ease 0.18s;
}
.kop__streepjes::before, .kop__streepjes::after {
  transition: top 0.18s ease 0.18s, transform 0.18s ease 0s;
}
.kop__schakelaar[aria-expanded="true"] .kop__streepjes {
  background: transparent;
  transition: background-color 0.16s ease 0s;
}
.kop__schakelaar[aria-expanded="true"] .kop__streepjes::before,
.kop__schakelaar[aria-expanded="true"] .kop__streepjes::after {
  top: 0;
  transition: top 0.18s ease 0s, transform 0.18s ease 0.18s;
}
.kop__schakelaar[aria-expanded="true"] .kop__streepjes::before { transform: rotate(45deg); }
.kop__schakelaar[aria-expanded="true"] .kop__streepjes::after { transform: rotate(-45deg); }

.kop__nav { flex-basis: 100%; }
.kop__nav ul {
  list-style: none;
  margin: 0;
  padding: var(--ruimte-s) 0;
  display: grid;
  gap: var(--ruimte-xs);
}
.kop__nav a { color: inherit; text-decoration: none; font-weight: 500; }
.kop__nav ul > li > a:not(.knop) { display: block; padding: 0.5rem 0; }
.kop__nav a[aria-current="page"] {
  border-bottom: 2px solid var(--kleur-geel);
  display: inline-block;
}
.kop__navCta { padding-top: var(--ruimte-s); }

/* Alleen wanneer JavaScript draait mag de navigatie ingeklapt zijn.

   Niet met display: none, want daartussen valt niets te animeren. In plaats
   daarvan een rij die van 0fr naar 1fr groeit: het menu vouwt open op zijn
   eigen hoogte, zonder dat een script die hoogte hoeft op te meten.

   visibility schakelt zonder overgang, maar pas nadat het dichtvouwen klaar is.
   Dat is geen sierlijkheid maar noodzaak: zonder visibility blijven de links
   met Tab bereikbaar terwijl het menu dicht is, en dan loopt wie met het
   toetsenbord werkt door een menu dat hij niet ziet. */
.heeft-js .kop__nav {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.34s;
}
/* De padding moet eraf, anders houdt de lijst zestien pixels over als de rij op
   nul staat: padding krimpt namelijk niet mee. De links dragen hun eigen
   ruimte al. */
.heeft-js .kop__nav > ul { overflow: hidden; padding-block: 0; }
.heeft-js .kop__schakelaar[aria-expanded="true"] + .kop__nav {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

@media (min-width: 62rem) {
  .kop__schakelaar { display: none; }
  /* Op breed scherm is er niets in te klappen: de navigatie staat er gewoon. */
  .heeft-js .kop__nav {
    display: block;
    grid-template-rows: none;
    visibility: visible;
    transition: none;
  }
  /* overflow terug op zichtbaar, anders knipt hij de focusrand van een link af. */
  .heeft-js .kop__nav > ul { overflow: visible; }
  .kop__nav { flex-basis: auto; margin-inline-start: auto; }
  .kop__nav ul {
    display: flex;
    align-items: center;
    gap: var(--ruimte-l);
    padding: 0;
  }
  .kop__nav ul > li > a:not(.knop) { padding: 0; }
  .kop__navCta { padding-top: 0; margin-inline-start: var(--ruimte-s); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: var(--kleur-wit);
  background: var(--kleur-navy);
  overflow: hidden;
}
.hero--navyDiep { background: var(--kleur-navy-diep); }
/* Twee lagen over de foto. De verticale laag verankert de tekst onderaan, de
   horizontale maakt de linkerkolom rustiger zodat de bodytekst leesbaar blijft
   op een druk beeld zoals de gevels van de Handelskade. Zonder foto blijft er
   een zacht lichtvlak over dat het navy diepte geeft. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 27, 56, 0.92) 0%, rgba(7, 27, 56, 0.72) 38%, rgba(7, 27, 56, 0.15) 72%),
    radial-gradient(70% 90% at 88% 6%, rgba(31, 84, 136, 0.45), transparent 62%);
  pointer-events: none;
}
.hero__beeld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.75;
  /* Een heel trage inzoom geeft de hero leven zonder een videobestand van
     tientallen megabytes. Veertig seconden, acht procent: je ziet het pas als
     je er even naar kijkt, en het leidt niet af van de tekst. */
  animation: heroZoom 40s ease-out forwards;
  transform-origin: 62% 55%;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero__inhoud {
  position: relative;
  z-index: 1;
  max-width: var(--omhulsel-breedte);
  margin-inline: auto;
  padding: var(--ruimte-xxl) var(--ruimte-l);
}
.hero__subkop {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--ruimte-m);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kleur-geel);
}
.hero__subkop::before {
  content: '';
  width: 1.75rem;
  height: 3px;
  background: var(--kleur-geel);
  flex: none;
}
.hero__kop {
  font-size: clamp(2.125rem, 5.5vw, 3.5rem);
  max-width: 19ch;
  margin: 0 0 var(--ruimte-l);
}
.hero__tekst { max-width: 58ch; color: rgba(255, 255, 255, 0.9); }
.hero__knoppen {
  display: flex;
  gap: var(--ruimte-m);
  flex-wrap: wrap;
  margin-top: var(--ruimte-l);
}

/* De naad: de gele lijn van de Hub loopt door de overgang naar de volgende
   sectie. Eenmalig, precies daar waar het verhaal begint. */
.hero + .sectie { position: relative; }
.hero + .sectie::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--ruimte-l);
  width: 3px;
  height: var(--ruimte-xl);
  background: var(--kleur-geel);
}
@media (min-width: 62rem) {
  .hero + .sectie::before {
    left: max(var(--ruimte-l), calc(50% - var(--omhulsel-breedte) / 2 + var(--ruimte-l)));
  }
}

/* ---------- Oproepbalk ---------- */

.ctaband {
  position: relative;
  background: var(--kleur-navy);
  color: var(--kleur-wit);
  overflow: hidden;
}
.ctaband--navyDiep { background: var(--kleur-navy-diep); }
.ctaband__beeld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.28;
}
.ctaband__inhoud { position: relative; z-index: 1; padding-block: var(--ruimte-xl); }
.ctaband__inhoud h2 { max-width: 22ch; }
.ctaband__inhoud p { max-width: 58ch; color: rgba(255, 255, 255, 0.88); }
.ctaband__inhoud .knop { margin-top: var(--ruimte-m); }

/* ---------- Kaarten ---------- */

.kaarten {
  display: grid;
  gap: var(--ruimte-l);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}
.kaart {
  border-radius: var(--rand-radius);
  padding: var(--ruimte-l);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kaart--mint { background: var(--kleur-mint); }
.kaart--lichtblauw { background: var(--kleur-lichtblauw); }
.kaart--lichtpaars { background: var(--kleur-lichtpaars); }

/* Een lopende proeftuin is een vol vlak. Een ontwikkeldomein dat nog vorm moet
   krijgen is een open omtrek. De briefing vraagt uitdrukkelijk om dit verschil. */
.kaart--open {
  background: transparent;
  border: 2px dashed color-mix(in srgb, var(--kleur-paars) 45%, transparent);
}
.kaart img { border-radius: 0.5rem; margin-bottom: var(--ruimte-m); }
.kaart__titel { margin: 0; font-size: 1.375rem; }
.kaart__ondertitel { font-weight: 600; margin: var(--ruimte-xs) 0 var(--ruimte-m); }
.kaart__tekst { margin: 0 0 var(--ruimte-m); font-size: 0.9688rem; }
.kaart__link {
  margin-top: auto;
  align-self: start;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}

/* ---------- Drieluik ---------- */

.drieluik {
  display: grid;
  gap: var(--ruimte-l);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.drieluik__stap {
  padding-top: var(--ruimte-m);
  border-top: 3px solid var(--kleur-geel);
}
.drieluik__stap h3 { margin: var(--ruimte-s) 0 var(--ruimte-xs); }
.drieluik__stap p { margin: 0; font-size: 0.9688rem; }
.drieluik__onderregel {
  margin-top: var(--ruimte-xl);
  font-weight: 600;
  color: var(--kleur-blauw);
}

/* ---------- Ontwikkelcyclus ---------- */

.cyclus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-s); }
.cyclus__stap {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--ruimte-m);
  align-items: start;
  padding: var(--ruimte-m);
  border-radius: var(--rand-radius);
  background: var(--kleur-lichtgrijs);
}
.sectie--grijs .cyclus__stap { background: var(--kleur-wit); }
.cyclus__nummer {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--kleur-navy);
  color: var(--kleur-wit);
  font-family: var(--font-kop);
  font-weight: 700;
}
.cyclus__stap h3 { margin: 0 0 var(--ruimte-xs); }
.cyclus__stap p { margin: 0; font-size: 0.9688rem; }
.uitspraak {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin: var(--ruimte-xl) 0 0;
  padding-left: var(--ruimte-m);
  border-left: 3px solid var(--kleur-geel);
}

/* ---------- Icoongrid ---------- */

.icoongrid__omhulsel { display: grid; gap: var(--ruimte-xl); }
@media (min-width: 62rem) {
  .icoongrid__omhulsel { grid-template-columns: 1fr 1.35fr; gap: var(--ruimte-xxl); }
}
.icoongrid__intro h2 { margin-top: 0; }
.icoongrid__intro p { color: color-mix(in srgb, currentColor 78%, transparent); }
.icoongrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ruimte-l) var(--ruimte-xl);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.icoongrid__punt { display: grid; gap: var(--ruimte-s); align-content: start; }
.icoongrid__punt p { margin: 0; font-size: 0.9688rem; }
.icoongrid__punt .icoon { color: var(--kleur-blauw); }

/* ---------- Doelgroepen ---------- */

.doelgroepen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--ruimte-l);
}
.doelgroepen__item {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--ruimte-s);
  font-size: 0.875rem;
  font-weight: 600;
}
.doelgroepen__item .icoon { color: var(--kleur-blauw); }

/* ---------- Categorieblokken ---------- */

.categorieen {
  display: grid;
  gap: var(--ruimte-l);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.categorie {
  padding: var(--ruimte-l);
  background: var(--kleur-wit);
  border-radius: var(--rand-radius);
  border: 1px solid var(--lijn-licht);
}
.sectie--licht .categorie { background: var(--kleur-lichtgrijs); border-color: transparent; }
.categorie h3 { margin: var(--ruimte-m) 0 var(--ruimte-xs); }
.categorie p { margin: 0; font-size: 0.9688rem; }
.categorie .icoon { color: var(--kleur-blauw); }

/* ---------- Citaat ---------- */

/* Citaten in Inter 600 in plaats van het kopfont: van Archivo bestaat alleen een
   700-face, en een citaat in zwaar vet leest onrustig. */
.citaat { margin: 0; }
.citaat blockquote { margin: 0; }
.citaat blockquote p {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  margin: 0;
  padding-left: var(--ruimte-l);
  border-left: 3px solid var(--kleur-geel);
}
.citaat figcaption {
  margin-top: var(--ruimte-m);
  padding-left: calc(var(--ruimte-l) + 3px);
  font-weight: 600;
  color: var(--kleur-blauw);
}
.sectie--navy .citaat figcaption { color: var(--kleur-geel); }

/* ---------- Persoon ---------- */

.persoon { display: grid; gap: var(--ruimte-xl); align-items: start; }
@media (min-width: 62rem) {
  .persoon { grid-template-columns: 15rem minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--ruimte-xxl); }
}
.persoon__portret img { border-radius: var(--rand-radius); width: 100%; }
.persoon__placeholder {
  aspect-ratio: 1;
  max-width: 15rem;
  display: grid;
  place-items: center;
  border-radius: var(--rand-radius);
  background: var(--kleur-navy);
  color: var(--kleur-geel);
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 0.02em;
}
.persoon__tekst h2 { margin: 0 0 var(--ruimte-xs); }
.persoon__rol { font-weight: 600; margin: 0 0 var(--ruimte-m); color: var(--kleur-blauw); }
.persoon__tekst .tekstlink { margin-top: var(--ruimte-m); }
.persoon__citaat { margin: 0; }
.persoon__citaat blockquote { margin: 0; }
.persoon__citaat blockquote p {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
  padding-left: var(--ruimte-m);
  border-left: 3px solid var(--kleur-geel);
}

/* ---------- Kernvraag en afbakening ---------- */

.kernvraag {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 var(--ruimte-l);
  max-width: 28ch;
}
.afbakening { list-style: none; margin: 0; padding: 0; }
.afbakening li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: var(--ruimte-s);
  max-width: 62ch;
}
.afbakening li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 1rem;
  height: 3px;
  background: var(--kleur-geel);
}

/* ---------- Tekst met beeld ---------- */

.tekstbeeld { display: grid; gap: var(--ruimte-xl); align-items: center; }
@media (min-width: 62rem) {
  .tekstbeeld { grid-template-columns: 1fr 1fr; gap: var(--ruimte-xxl); }
  .tekstbeeld--links .tekstbeeld__beeld { order: -1; }
}
.tekstbeeld__beeld img { width: 100%; border-radius: var(--rand-radius); }
.tekstbeeld__tekst h2 { margin-top: 0; }
.tekstbeeld__tekst .tekstlink { margin-top: var(--ruimte-m); }

/* ---------- Footer ---------- */

.voet { background: var(--kleur-navy-diep); color: var(--kleur-wit); }
.voet a { color: var(--kleur-wit); }

.voet__binnen {
  padding-block: var(--ruimte-xxl) var(--ruimte-xl);
  display: grid;
  gap: var(--ruimte-xl);
}
/* Het merkblok krijgt meer ruimte dan de kolommen ernaast: daar staat de zin
   die vertelt wat de Hub is, en die moet leesbaar blijven. */
@media (min-width: 48rem) {
  .voet__binnen { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .voet__binnen {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--ruimte-xl) var(--ruimte-l);
  }
}

.voet__merk { margin: 0 0 var(--ruimte-m); display: grid; line-height: 1.05; }
.voet .kop__plaats { color: var(--kleur-geel); }
.voet__zin {
  margin: 0;
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

/* Geen tracked-out hoofdletterlabel boven de kolommen, zoals overal op deze
   site. Gewoon een vette regel in de tekstletter, in het geel dat de Hub
   aanduidt. */
.voet__kop {
  margin: 0 0 var(--ruimte-m);
  font-size: 0.9375rem;
  font-family: var(--font-tekst);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--kleur-geel);
}

.voet__zin--kolom { margin-bottom: var(--ruimte-m); max-width: 34ch; }

.voet__kolom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
  font-size: 0.9375rem;
}
.voet__kolom a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}
.voet__kolom a:hover { border-bottom-color: var(--kleur-geel); }
.voet__gegevens { word-break: break-word; }
/* De enige plek in de voet waar geel om aandacht vraagt: de weg naar een
   gesprek. Alles daaromheen blijft rustig. */
.voet__nadruk {
  font-weight: 600;
  border-bottom-color: var(--kleur-geel) !important;
}

.voet__onder { border-top: 1px solid var(--lijn-donker); }
.voet__onderbinnen {
  padding-block: var(--ruimte-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-s) var(--ruimte-l);
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.66);
}
.voet__onderbinnen p { margin: 0; }
.voet__onderbinnen a { color: rgba(255, 255, 255, 0.66); }
.voet__onderbinnen a:hover { color: var(--kleur-wit); }

/* ---------- Beweging ---------- */

/* Secties komen rustig in beeld. De klasse heeft-animatie wordt alleen gezet
   wanneer animatie.js daadwerkelijk draait en de bezoeker geen rustiger
   weergave heeft gevraagd, dus zonder script blijft alles gewoon zichtbaar. */
.heeft-animatie .sectie,
.heeft-animatie .ctaband {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.heeft-animatie .sectie.in-beeld,
.heeft-animatie .ctaband.in-beeld {
  opacity: 1;
  transform: none;
}

/* Binnen een sectie volgen de losse onderdelen elkaar kort na elkaar op, zodat
   het oog een richting meekrijgt in plaats van alles tegelijk te zien. */
.heeft-animatie .in-beeld .kaart,
.heeft-animatie .in-beeld .drieluik__stap,
.heeft-animatie .in-beeld .cyclus__stap,
.heeft-animatie .in-beeld .categorie,
.heeft-animatie .in-beeld .doelgroepen__item,
.heeft-animatie .in-beeld .icoongrid__punt {
  animation: opkomen 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.heeft-animatie .in-beeld :is(.kaart, .drieluik__stap, .cyclus__stap, .categorie, .doelgroepen__item, .icoongrid__punt):nth-child(1) { animation-delay: 0.05s; }
.heeft-animatie .in-beeld :is(.kaart, .drieluik__stap, .cyclus__stap, .categorie, .doelgroepen__item, .icoongrid__punt):nth-child(2) { animation-delay: 0.12s; }
.heeft-animatie .in-beeld :is(.kaart, .drieluik__stap, .cyclus__stap, .categorie, .doelgroepen__item, .icoongrid__punt):nth-child(3) { animation-delay: 0.19s; }
.heeft-animatie .in-beeld :is(.kaart, .drieluik__stap, .cyclus__stap, .categorie, .doelgroepen__item, .icoongrid__punt):nth-child(4) { animation-delay: 0.26s; }
.heeft-animatie .in-beeld :is(.kaart, .drieluik__stap, .cyclus__stap, .categorie, .doelgroepen__item, .icoongrid__punt):nth-child(5) { animation-delay: 0.33s; }
.heeft-animatie .in-beeld :is(.kaart, .drieluik__stap, .cyclus__stap, .categorie, .doelgroepen__item, .icoongrid__punt):nth-child(n+6) { animation-delay: 0.4s; }

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

/* De hero staat er al bij het laden, dus die komt niet op maar in. */
.hero__subkop, .hero__kop, .hero .wisselaar, .hero__tekst, .hero__knoppen {
  animation: heroIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.hero__subkop { animation-delay: 0.05s; }
.hero__kop { animation-delay: 0.15s; }
.hero .wisselaar { animation-delay: 0.25s; }
.hero__tekst { animation-delay: 0.32s; }
.hero__knoppen { animation-delay: 0.4s; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}

/* De wisselaar: alle woorden staan in de HTML zodat schermlezers en
   zoekmachines de hele reeks krijgen, en de CSS schuift er steeds een in beeld.
   De hoogte is vastgezet op een regel, zodat de pagina niet verspringt. */
.wisselaar {
  --regel: 1.15em;
  margin: 0 0 var(--ruimte-l);
  height: var(--regel);
  overflow: hidden;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kleur-geel);
}
/* De eigenschappen staan los uitgeschreven en niet als animation-shorthand: een
   calc() met een custom property binnen die shorthand wordt ongeldig bij het
   berekenen, waarna de duur op 0s valt en de reeks stil blijft staan. */
.wisselaar__spoor {
  display: block;
  animation-name: doorschuiven;
  animation-duration: 13s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.wisselaar__woord {
  display: block;
  height: var(--regel);
  line-height: var(--regel);
  white-space: nowrap;
}

/* Elke stap houdt even stil en schuift dan door naar de volgende regel.
   De laatste stap keert terug naar de eerste, waardoor de reeks rond loopt. */
@keyframes doorschuiven {
  0%, 18% { transform: translateY(0); }
  20%, 38% { transform: translateY(calc(var(--regel) * -1)); }
  40%, 58% { transform: translateY(calc(var(--regel) * -2)); }
  60%, 78% { transform: translateY(calc(var(--regel) * -3)); }
  80%, 98% { transform: translateY(calc(var(--regel) * -4)); }
  100% { transform: translateY(0); }
}
/* Met drie woorden loopt de reeks in drie stappen rond. Het aantal komt uit een
   data-attribuut: de CSP laat geen inline stijl toe, dus een custom property in
   een style-attribuut komt nooit aan. */
.wisselaar[data-aantal="3"] .wisselaar__spoor {
  animation-name: doorschuivenDrie;
  animation-duration: 8.4s;
}
.wisselaar[data-aantal="2"] .wisselaar__spoor {
  animation-name: doorschuivenTwee;
  animation-duration: 5.6s;
}
@keyframes doorschuivenTwee {
  0%, 42% { transform: translateY(0); }
  50%, 92% { transform: translateY(calc(var(--regel) * -1)); }
  100% { transform: translateY(0); }
}
@keyframes doorschuivenDrie {
  0%, 28% { transform: translateY(0); }
  33%, 61% { transform: translateY(calc(var(--regel) * -1)); }
  66%, 94% { transform: translateY(calc(var(--regel) * -2)); }
  100% { transform: translateY(0); }
}

/* Kaarten en categorieblokken tillen licht op bij aanwijzen. */
.kaart, .categorie {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.kaart:hover, .categorie:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(14, 42, 85, 0.1);
}
.tekstlink, .kaart__link { transition: border-bottom-width 0.15s ease; }
.kop__nav a:not(.knop) { transition: color 0.15s ease; }
.kop__nav a:not(.knop):hover { color: var(--kleur-blauw); }

html { scroll-behavior: smooth; }

/* ---------- Toegankelijkheid ---------- */

/* Zichtbare focus is een toegankelijkheidseis, nooit weghalen. */
:focus-visible { outline: 3px solid var(--kleur-navy); outline-offset: 2px; }
.hero :focus-visible, .ctaband :focus-visible, .voet :focus-visible,
.sectie--navy :focus-visible { outline-color: var(--kleur-geel); }

/* Tekst die alleen een schermlezer hoort. Nodig waar een reeks gelijke knoppen
   staat: "Downloaden" is uit de context duidelijk, maar in een lijst met alleen
   links achter elkaar is het dat niet. */
.alleen-voorlezen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.overslaan { position: absolute; left: -9999px; }
.overslaan:focus {
  position: static;
  display: inline-block;
  padding: var(--ruimte-s) var(--ruimte-m);
  background: var(--kleur-geel);
  color: var(--kleur-navy);
  font-weight: 600;
}

/* ---------- Contactformulier ---------- */

.formulier { display: grid; gap: var(--ruimte-m); margin-top: var(--ruimte-l); }
.formulier__rij { display: grid; gap: var(--ruimte-m); }
@media (min-width: 40rem) { .formulier__rij { grid-template-columns: 1fr 1fr; } }

.formulier__veld { display: grid; gap: 0.375rem; font-weight: 600; font-size: 0.9375rem; }
.formulier__veld input, .formulier__veld select, .formulier__veld textarea {
  width: 100%;
  padding: 0.75rem;
  font: inherit;
  font-weight: 400;
  color: var(--kleur-inkt);
  background: var(--kleur-wit);
  border: 2px solid rgba(14, 42, 85, 0.22);
  border-radius: 0.5rem;
}
.formulier__veld textarea { resize: vertical; min-height: 8rem; }
.formulier__veld input:focus-visible,
.formulier__veld select:focus-visible,
.formulier__veld textarea:focus-visible { border-color: var(--kleur-navy); }

.formulier__nodig { font-weight: 400; font-size: 0.75rem; color: var(--kleur-blauw); }

/* De honeypot hoort onvindbaar te zijn voor mensen, maar wel in de broncode te
   staan voor bots. Niet display:none, want sommige bots slaan dat over. */
.formulier__val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier__privacy {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--kleur-inkt) 75%, transparent);
}
.formulier__bevestiging, .formulier__fout {
  margin-top: var(--ruimte-l);
  padding: var(--ruimte-m);
  border-radius: 0.5rem;
  font-weight: 600;
}
.formulier__bevestiging { background: #e7f6ec; color: #14532d; }
.formulier__fout { background: #fdecea; color: #99241B; }

/* Wie bewegingen heeft uitgezet krijgt de pagina meteen compleet te zien: geen
   verschoven beginposities, geen rotatie, geen zwevende kaarten. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .knop:hover, .kaart:hover, .categorie:hover { transform: none; box-shadow: none; }
  .heeft-animatie .sectie, .heeft-animatie .ctaband { opacity: 1; transform: none; }
  /* Zonder rotatie blijft alleen het eerste woord staan, in plaats van een
     halve regel of een lege plek. */
  .wisselaar__spoor { animation: none; transform: none; }
  .hero__beeld { animation: none; transform: none; }
}

/* ---------- Nieuws ---------- */

.berichtenlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-l); }
.berichtkaart {
  display: grid;
  gap: var(--ruimte-m);
  padding-bottom: var(--ruimte-l);
  border-bottom: 1px solid var(--lijn-licht);
}
@media (min-width: 48rem) {
  .berichtkaart { grid-template-columns: 20rem 1fr; gap: var(--ruimte-xl); align-items: start; }
}
.berichtkaart__beeld { width: 100%; border-radius: var(--rand-radius); }
.berichtkaart__datum { font-size: 0.875rem; color: var(--kleur-blauw); font-weight: 600; }
.berichtkaart__titel { margin: var(--ruimte-xs) 0 var(--ruimte-s); font-size: 1.375rem; }
.berichtkaart__titel a { color: inherit; text-decoration: none; }
.berichtkaart__titel a:hover { text-decoration: underline; text-underline-offset: 4px; }
.berichtkaart__tekst p { margin: 0; }
.terugknop { margin-top: var(--ruimte-xl); }

.nieuwsrij {
  list-style: none; margin: 0 0 var(--ruimte-l); padding: 0;
  display: grid; gap: var(--ruimte-l);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.nieuwskaart img { width: 100%; border-radius: var(--rand-radius); margin-bottom: var(--ruimte-s); }
.nieuwskaart h3 { margin: var(--ruimte-xs) 0; font-size: 1.125rem; }
.nieuwskaart h3 a { color: inherit; text-decoration: none; }
.nieuwskaart h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nieuwskaart p { margin: 0; font-size: 0.9688rem; }

/* ---------- Partners ---------- */

.logos {
  list-style: none; margin: 0 0 var(--ruimte-xl); padding: 0;
  display: grid; gap: var(--ruimte-l);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  align-items: center;
}
.logo { display: grid; place-items: center; }
.logo img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.logo__naam {
  display: grid; place-items: center; text-align: center;
  min-height: 5rem; padding: var(--ruimte-m);
  background: var(--kleur-lichtgrijs); border-radius: 0.5rem;
  font-weight: 600; font-size: 0.9375rem;
}

/* ---------- Besloten ruimte ---------- */

/* De naad loopt langs de linkerrand van het omhulsel. Inhoud die daar niet op
   uitlijnt laat die streep als een losse markering achter, dus de lijst begint
   op dezelfde lijn en houdt zichzelf leesbaar met een eigen maximum. */
.toegang, .stukken, .toegang__aanhef { max-width: 54rem; }
.toegang p { max-width: 62ch; }
.toegang__aanhef { font-size: 1.125rem; }

.stukken {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--ruimte-m);
}
.stuk {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-l); flex-wrap: wrap;
  padding: var(--ruimte-l);
  background: var(--kleur-lichtgrijs);
  border-radius: var(--rand-radius);
  /* Een geel randje links: hetzelfde geel dat door de hele site de Hub aanduidt,
     hier als teken dat dit stuk van de Hub zelf komt en niet openbaar is. */
  border-left: 4px solid var(--kleur-geel);
}
.stuk__tekst { flex: 1 1 18rem; }
.stuk__titel { margin: 0; font-size: 1.125rem; }
.stuk__toelichting { margin: var(--ruimte-xs) 0 0; max-width: 52ch; }
.stuk__meta {
  margin: var(--ruimte-xs) 0 0;
  font-size: 0.875rem;
  color: var(--kleur-blauw);
}
.afmelden { margin-top: var(--ruimte-xl); }

/* ---------- Kruimelpad ---------- */

/* Staat tussen de kopbalk en de hero, in hetzelfde diepe navy. Daardoor leest
   het als de aanloop naar de hero en niet als een losse balk. */
.kruimels {
  background: var(--kleur-navy-diep);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
}
.kruimels__lijst {
  list-style: none;
  margin: 0;
  padding-block: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.kruimels__deel { display: flex; align-items: center; gap: 0.5rem; }
/* Het streepje hoort bij de opmaak en niet bij de tekst, dus het komt uit de
   CSS. Zo leest een schermlezer "Home, Proeftuinen, Mi Rumbo". */
.kruimels__deel + .kruimels__deel::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-top: 1px solid var(--kleur-geel);
  border-right: 1px solid var(--kleur-geel);
  transform: rotate(45deg);
  flex: none;
}
.kruimels a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.kruimels a:hover { border-bottom-color: var(--kleur-geel); }
.kruimels [aria-current="page"] { color: var(--kleur-wit); font-weight: 600; }

/* ---------- Cookiemelding ---------- */

/* In de gewone documentstroom, boven de header: het eerste wat een bezoeker
   ziet bij het openen van een pagina, niet iets dat onderaan naast de footer
   hangt alsof het daarbij hoort. Geen position:fixed nodig, dus ook geen
   gevecht om z-index met de sticky header: die schuift vanzelf omlaag zolang
   deze balk er staat, en plakt daarna gewoon op zijn eigen top:0 zodra je
   voorbij de balk scrolt.

   Geen display hier: dat laat de standaard [hidden]{display:none} van de
   browser gewoon werken. Zet je hier bijvoorbeeld display:flex neer, dan wint
   die regel qua brontolgorde van de ingebouwde [hidden]-regel en blijft de
   balk zichtbaar terwijl hij dicht hoort te zijn. */
.cookiemelding {
  background: var(--kleur-navy-diep);
  color: var(--kleur-wit);
  box-shadow: 0 0.25rem 0.75rem rgba(7, 27, 56, 0.2);
}
.cookiemelding__binnen {
  padding-block: var(--ruimte-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-s) var(--ruimte-l);
  font-size: 0.875rem;
}
.cookiemelding p { margin: 0; }
.cookiemelding a { color: var(--kleur-wit); text-decoration: underline; }
.cookiemelding__knop { flex: none; white-space: nowrap; }