/* ==========================================================================
   Ketting van Ballonnen — Hoofdstylesheet
   ========================================================================== */

@import url('tokens.css');
/* Google Fonts laadt via een directe <link> in includes/header.php (i.p.v. @import
   hier) — dat voorkomt een seriële netwerk-wachtrij en is beter voor de LCP. */

/* --- Reset / basis --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: inherit; }

a { color: var(--brand-navy); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--color-cta); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  color: var(--color-heading);
  font-weight: 700;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-600); }
p { max-width: 68ch; }

/* --- Focus / toegankelijkheid --------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--brand-navy); color: #fff; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); z-index: 1000; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout helpers -------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; }
.section { padding-block: var(--space-8); }
.section--soft { background: var(--color-bg-soft); }
.section--navy { background: var(--brand-navy); color: #fff; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.stack > * + * { margin-top: var(--space-4); }
.text-center { text-align: center; }
.eyebrow {
  font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: var(--fs-300); color: var(--color-cta);
}
.section--navy .eyebrow { color: var(--brand-yellow); }
.lead { font-size: var(--fs-500); color: var(--color-text-muted); }
.section--navy .lead { color: rgba(255,255,255,0.9); }

/* --- Knoppen --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-400);
  padding: 0.8em 1.5em; border-radius: var(--radius-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.1;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-height: 48px;
}
.btn:active { transform: translateY(1px); }
.btn--cta { background: var(--color-cta); color: var(--color-on-cta); box-shadow: var(--shadow-sm); }
.btn--cta:hover { background: var(--color-cta-hover); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary { background: var(--brand-navy); color: #fff; }
.btn--primary:hover { background: var(--brand-navy-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand-navy); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--brand-navy); color: var(--brand-navy); background: var(--brand-navy-050); }
.section--navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.section--navy .btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn--lg { font-size: var(--fs-500); padding: 0.9em 1.8em; }

/* --- Header / navigatie ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--header-h); padding-block: var(--space-3);
}
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-400);
  color: var(--brand-navy); text-decoration: none; border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--brand-navy-050); color: var(--brand-navy-700); }
.nav__link[aria-current="page"] {
  color: var(--color-cta); box-shadow: inset 0 -3px 0 var(--color-cta);
}
.nav__cta { margin-left: var(--space-2); }

/* Mobiele nav-toggle */
.nav-toggle {
  display: none; width: 48px; height: 48px; border: 0; background: transparent;
  cursor: pointer; border-radius: var(--radius-sm); color: var(--brand-navy);
}
.nav-toggle svg { margin: auto; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5) var(--space-5);
    box-shadow: var(--shadow-lg);
    transform: translateY(-120%); transition: transform var(--dur) var(--ease);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--space-1); width: 100%; }
  .nav__link { padding: var(--space-3) var(--space-4); font-size: var(--fs-500); }
  .nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-cta); }
  .nav__cta { margin: var(--space-3) 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }
}

/* --- Hero ------------------------------------------------------------------ */
.hero { position: relative; background: var(--brand-navy-050); overflow: hidden; }
.hero__inner {
  display: grid; gap: var(--space-6); align-items: center;
  grid-template-columns: minmax(0, 1fr); /* voorkomt overflow door hero-afbeelding op mobiel */
  padding-block: var(--space-8);
}
.hero__inner > * { min-width: 0; }
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; padding-block: var(--space-9); }
}
.hero__title { margin-bottom: var(--space-4); }
.hero__title .accent { color: var(--color-cta); }
.hero__date {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: #fff; color: var(--brand-navy); font-family: var(--font-heading);
  font-weight: 700; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); margin-bottom: var(--space-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero .wave-bottom { position: relative; z-index: 3; }
/* Decoratieve gekleurde "ballon"-stippen */
.hero__dots { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }

/* --- Cards ----------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid > * { min-width: 0; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--4 { display: flex; flex-wrap: wrap; justify-content: center; }
.grid--4 > * { flex: 0 1 220px; }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__media { aspect-ratio: 3/2; background: var(--brand-navy-050); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: contain; }
/* Logo-terugval als een bericht geen foto of video heeft: netjes ingekaderd op een zachte achtergrond. */
.card__media--logo { display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-navy-050), #fff); }
.card__media--logo img { width: auto; max-width: 62%; height: auto; max-height: 62%; padding: var(--space-4); opacity: .9; }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card__title { font-size: var(--fs-600); }
.card__meta { font-size: var(--fs-300); color: var(--color-text-muted); }

/* Info-icoontjes (crowd/route/donation) */
.feature { text-align: center; display: flex; flex-direction: column; }
/* Duwt de knop naar de onderkant, zodat de drie kaarten gelijk uitlijnen. */
.feature__action { margin-top: auto; padding-top: var(--space-4); }
.feature__icon {
  width: 88px; height: 88px; margin: 0 auto var(--space-4); border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-md);
}
.feature__icon img { width: 52px; height: 52px; }
.feature__icon svg { width: 46px; height: 46px; }

/* Badge / categorie */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-300);
  padding: 0.25em 0.75em; border-radius: var(--radius-pill);
  background: var(--brand-navy-050); color: var(--brand-navy);
}
.badge--orange { background: var(--brand-orange-050); color: var(--brand-orange-600); }
.badge--teal { background: #E2F5F7; color: #0C7883; }
.badge--green { background: #E4F5EA; color: #05702F; }

/* Deelnemer-portret */
.person { text-align: center; }
.person__photo {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-sm);
  border: 4px solid #fff; outline: 3px solid var(--brand-navy-050);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font-family: var(--font-heading); font-weight: 700; margin-top: var(--space-3); color: var(--brand-navy); }
.person__role { font-size: var(--fs-300); color: var(--color-text-muted); }
.person--full .person__text { font-size: var(--fs-300); color: var(--color-text-muted); margin-top: var(--space-2); text-align: center; }
.person__links { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-3); }
.person__links a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-navy-050); color: var(--brand-navy); }
.person__links a:hover { background: var(--brand-navy); color: #fff; }
.person__kentaa { margin-top: var(--space-3); font-size: var(--fs-300); padding: 0.5em 1.1em; min-height: 40px; }

/* Klikbare persoonskaart + pop-up */
.person--clickable { cursor: pointer; }
.person--clickable .person__photo { transition: outline-color var(--dur) var(--ease); }
.person--clickable:hover .person__photo { outline-color: var(--brand-orange); }
.person--clickable:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 4px; border-radius: var(--radius-md); }

.person-modal { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 2rem); overflow: auto; border: 0; padding: 0; border-radius: var(--radius-lg); max-width: 720px; width: calc(100% - 2rem); box-shadow: var(--shadow-lg); background: #fff; }
.person-modal::backdrop { background: rgba(15, 52, 112, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.person-modal__close { position: absolute; top: 8px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 0; background: transparent; font-size: 2rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; border-radius: 50%; }
.person-modal__close:hover { background: var(--brand-navy-050); color: var(--brand-navy); }
.person-modal__body { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-6); align-items: start; padding: var(--space-7) var(--space-6) var(--space-5); }
.person-modal__body.is-single { grid-template-columns: 1fr; }
.person-modal__left { text-align: center; border-right: 2px dotted var(--color-border); padding-right: var(--space-5); }
.person-modal__body.is-single .person-modal__left { border-right: 0; padding-right: 0; }
.person-modal__right { text-align: left; min-width: 0; }
.person-modal__imgwrap { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto var(--space-4); border: 4px solid #fff; outline: 3px solid var(--brand-navy-050); }
.person-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-modal__name { color: var(--brand-navy); font-size: var(--fs-600); }
.person-modal__role { display: inline-block; margin-top: var(--space-2); font-family: var(--font-heading); font-weight: 600; color: var(--brand-orange); }
.person-modal__over { color: var(--brand-navy); font-size: var(--fs-600); margin-bottom: var(--space-3); }
.person-modal__text { color: var(--color-text); white-space: pre-line; font-size: 1.05rem; line-height: 1.65; }
.person-modal__links { display: flex; gap: var(--space-3); justify-content: flex-start; margin-top: var(--space-4); }
.person-modal__links a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-navy-050); color: var(--brand-navy); }
.person-modal__links a:hover { background: var(--brand-navy); color: #fff; }
.person-modal__kentaa { display: block; width: 100%; text-align: center; margin-top: var(--space-5); }
@media (max-width: 620px) {
  .person-modal__body { grid-template-columns: 1fr; }
  .person-modal__left { border-right: 0; border-bottom: 2px dotted var(--color-border); padding-right: 0; padding-bottom: var(--space-4); }
  .person-modal__right { text-align: center; }
  .person-modal__links { justify-content: center; }
}

/* Geen onderstreping onder klikbare kaarten */
.card--link, .card--link:hover { text-decoration: none; color: var(--color-text); }

/* --- Donatie-strook -------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-yellow));
  color: #fff; border-radius: var(--radius-lg); padding: var(--space-7);
  text-align: center; box-shadow: var(--shadow-md);
}
.cta-band h2 { color: #fff; }
.cta-band .btn--primary { background: #fff; color: var(--brand-orange-600); }
.cta-band .btn--primary:hover { background: rgba(255,255,255,0.9); }
.cta-band--navy { background: linear-gradient(135deg, var(--brand-navy), var(--brand-teal)); }
.cta-band--navy .btn--primary { color: var(--brand-navy); }

/* --- Sponsors -------------------------------------------------------------- */
.sponsor-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4); }
.sponsor-grid .sponsor { flex: 0 1 190px; }
.sponsor {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); display: grid; place-items: center; aspect-ratio: 3/2;
  transition: box-shadow var(--dur) var(--ease);
}
.sponsor:hover { box-shadow: var(--shadow-md); }
.sponsor img { max-height: 70px; max-width: 100%; width: auto; object-fit: contain; filter: none; }

/* --- Instagram-feed --------------------------------------------------------- */
.insta-embed { max-width: 760px; margin: 0 auto; }
.insta-embed iframe { display: block; }
.insta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.insta-item { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; display: block; box-shadow: var(--shadow-sm); }
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.insta-item:hover img { transform: scale(1.06); }

/* --- FAQ ------------------------------------------------------------------- */
.faq { max-width: var(--container-narrow); margin-inline: auto; }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); background: #fff; overflow: hidden; }
.faq__item summary {
  cursor: pointer; padding: var(--space-4) var(--space-5); font-family: var(--font-heading);
  font-weight: 600; font-size: var(--fs-500); color: var(--brand-navy); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5em; color: var(--color-cta); transition: transform var(--dur) var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item .faq__answer { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); }

/* --- Formulier ------------------------------------------------------------- */
.form { max-width: var(--container-narrow); }
.form__row { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.form label { font-family: var(--font-heading); font-weight: 600; color: var(--brand-navy); }
.form label .req { color: var(--color-danger); }
.form input, .form textarea, .form select {
  font-family: var(--font-body); font-size: var(--fs-400); color: var(--color-text);
  padding: var(--space-3) var(--space-4); border: 2px solid var(--color-border);
  border-radius: var(--radius-md); background: #fff; width: 100%; min-height: 48px;
  transition: border-color var(--dur) var(--ease);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--color-ring); }
.form .helper { font-size: var(--fs-300); color: var(--color-text-muted); }
.form .field-error { color: var(--color-danger); font-size: var(--fs-300); font-weight: 600; }
.alert { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-5); font-weight: 600; }
.alert--success { background: #E4F5EA; color: #05702F; border: 1px solid #A7DDB8; }
.alert--error { background: #FCE8E8; color: #A5121A; border: 1px solid #F2B8B8; }

/* --- Prose (artikel/berichten) --------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--fs-700); margin-top: var(--space-6); }
.prose h3 { font-size: var(--fs-600); margin-top: var(--space-5); }
.prose img { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote {
  border-left: 4px solid var(--brand-orange); padding-left: var(--space-5);
  color: var(--color-text-muted); font-style: italic;
}

/* --- Page hero (subpagina's) ---------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  --hero-accent: var(--brand-teal);
  --hero-accent-2: var(--brand-orange);
  background:
    radial-gradient(55% 78% at 88% 12%, color-mix(in srgb, var(--hero-accent) 32%, transparent), transparent 72%),
    radial-gradient(46% 66% at 6% 96%, color-mix(in srgb, var(--hero-accent-2) 22%, transparent), transparent 72%),
    var(--brand-navy-050);
  color: var(--color-text); padding-block: var(--space-8);
}
.page-hero h1 { color: var(--brand-navy); }
.page-hero .lead { color: var(--color-text-muted); }
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { display: none; }
.breadcrumb a { color: var(--brand-navy); }
/* Per-pagina accentkleur (uit het logo) */
.page-hero--orange { --hero-accent: var(--brand-orange); --hero-accent-2: var(--brand-yellow); }
.page-hero--teal   { --hero-accent: var(--brand-teal);   --hero-accent-2: var(--brand-navy); }
.page-hero--yellow { --hero-accent: var(--brand-yellow); --hero-accent-2: var(--brand-orange); }
.page-hero--red    { --hero-accent: var(--brand-red);    --hero-accent-2: var(--brand-orange); }
.page-hero--green  { --hero-accent: var(--brand-green);  --hero-accent-2: var(--brand-teal); }
.page-hero--blue   { --hero-accent: #2F6FB0;             --hero-accent-2: var(--brand-teal); }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { background: #fff; color: var(--color-text); padding-block: var(--space-7) var(--space-6); border-top: 1px solid var(--color-border); box-shadow: 0 -10px 30px rgba(15, 52, 112, 0.05); }
.site-footer a { color: var(--brand-navy); }
.site-footer a:hover { color: var(--color-cta); }
.site-footer h4 { color: #0C7883; font-family: var(--font-heading); font-size: var(--fs-600); margin-bottom: var(--space-4); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 820px) {
  .footer-col + .footer-col { border-left: 2px dotted rgba(12,120,131,0.28); padding-left: var(--space-6); }
}
.footer-col--center { text-align: center; }
.footer-nav-grid { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); line-height: 2; }
.footer-nav-grid a { text-decoration: none; }
.footer-nav-grid a:hover { text-decoration: underline; }
.footer-address { font-style: normal; line-height: 2; }
.footer-address .lbl { font-family: var(--font-heading); font-weight: 700; color: var(--brand-navy); margin-right: 0.35em; }
.footer-hashtags { margin-top: var(--space-4); color: #0C7883; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-300); line-height: 1.6; }
.social { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }
.social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--brand-teal); box-shadow: var(--shadow-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.social a:hover { background: var(--brand-teal); color: #fff; }
.footer-bottom {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(12,120,131,0.22);
  font-size: var(--fs-300); color: var(--color-text-muted);
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2) var(--space-5); align-items: center;
}
.footer-bottom > :nth-child(2) { text-align: center; }
.footer-bottom > :last-child { text-align: right; }
@media (max-width: 700px) {
  .footer-bottom { grid-template-columns: 1fr; text-align: center; }
  .footer-bottom > :last-child { text-align: center; }
}
.footer-payoff { color: #0C7883; font-family: var(--font-heading); font-weight: 600; }
.footer-payoff-line { margin-top: var(--space-4); color: var(--brand-navy); font-family: var(--font-heading); font-weight: 600; max-width: 30ch; margin-inline: auto; }
.footer-credits a { text-decoration: underline; }
/* Decoratieve ballon rechtsonder in de footer */
.site-footer { position: relative; overflow: hidden; }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer::after {
  content: ""; position: absolute; right: 2%; bottom: -30px; width: 200px; height: 280px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 175'%3E%3Cellipse cx='60' cy='55' rx='47' ry='55' fill='%2316A0AE'/%3E%3Cpath d='M53 106 h14 l-7 11 z' fill='%2316A0AE'/%3E%3Cpath d='M60 117 q13 24 -3 48' stroke='%2316A0AE' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='46' cy='38' rx='9' ry='13' fill='%23ffffff' opacity='0.35'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.16; pointer-events: none; z-index: 0;
}

/* --- Filter-tabs (Updates per editie) -------------------------------------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.filter-tab {
  display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600;
  padding: 0.5em 1.1em; border-radius: var(--radius-pill); text-decoration: none;
  background: var(--brand-navy-050); color: var(--brand-navy); border: 2px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-tab:hover { border-color: var(--brand-navy); color: var(--brand-navy); }
.filter-tab.is-active { background: var(--brand-navy); color: #fff; }

/* Paginering */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-7); }
.pager__info { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-muted); }

/* Route als reis op de kaart (stippellijn tussen genummerde punten) */
.route-map { list-style: none; padding: 0; max-width: 720px; margin-inline: auto; position: relative; }
.route-stop { position: relative; padding-left: 72px; padding-bottom: var(--space-6); }
.route-stop:last-child { padding-bottom: 0; }
.route-stop::before { content: ""; position: absolute; left: 23px; top: 40px; bottom: -8px; border-left: 3px dashed var(--brand-teal); }
.route-stop:last-child::before { display: none; }
.route-stop__pin { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-teal); color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-500); box-shadow: var(--shadow-sm); z-index: 1; }
.route-stop__pin--flag { background: var(--brand-orange); }
.route-stop__card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.route-stop__etappe { color: var(--brand-navy); font-size: var(--fs-600); margin: var(--space-2) 0 var(--space-3); }
.route-stop__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.route-stop__list li { font-size: var(--fs-300); color: var(--color-text-muted); padding-left: 15px; position: relative; }
.route-stop__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-yellow); }

/* --- Vormen & decoratie (familie-look: golven, ketting, blobs) ------------- */

/* Golvende scheiding onderaan een sectie (plaats in een .section) */
.wave-divider { position: relative; }
.wave-divider::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px;
  background: inherit;
}
.wave-top {
  display: block; width: 100%; height: 56px; margin-bottom: -1px; color: var(--color-bg);
}
.wave-top svg, .wave-bottom svg { display: block; width: 100%; height: 100%; }
.wave-bottom { display: block; width: 100%; height: 56px; margin-top: -1px; margin-bottom: -1px; }

/* Footer-golf */
.footer-wave { display: none; }
.footer-wave svg { width: 100%; height: 56px; transform: translateY(1px); }

/* "Ketting van ballonnen" — stippellijn met gekleurde bolletjes als achtergrond */
.chain-bg { position: relative; overflow: hidden; }
.chain-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, var(--brand-yellow) 0 5px, transparent 6px),
    radial-gradient(circle, var(--brand-teal) 0 5px, transparent 6px),
    radial-gradient(circle, var(--brand-orange) 0 5px, transparent 6px),
    radial-gradient(circle, var(--brand-red) 0 4px, transparent 5px),
    radial-gradient(circle, var(--brand-green) 0 4px, transparent 5px);
  background-repeat: no-repeat;
  background-position: 8% 22%, 24% 68%, 78% 18%, 90% 60%, 62% 82%;
  opacity: 0.5;
}
.chain-bg > * { position: relative; z-index: 1; }

/* Hero decoratieve blobs/confetti */
.hero { position: relative; }
.hero .blob {
  position: absolute; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  filter: blur(2px); opacity: 0.16; z-index: 0;
}
.hero .blob--1 { width: 320px; height: 320px; background: var(--brand-teal); top: -60px; right: -60px; }
.hero .blob--2 { width: 240px; height: 240px; background: var(--brand-orange); bottom: -80px; left: -50px; }
.hero__inner { position: relative; z-index: 1; }

/* Kleine confetti-stippen (decoratief) */
.confetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.confetti span {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; opacity: 0.8;
}

/* Blokken met een speelse, niet-rechte bovenrand via border-radius-variatie */
.blob-card { border-radius: 30px 30px 30px 8px; }

/* Gekleurde bovenrand-accent op kaarten */
.card--accent-orange { border-top: 5px solid var(--brand-orange); }
.card--accent-teal { border-top: 5px solid var(--brand-teal); }
.card--accent-navy { border-top: 5px solid var(--brand-navy); }
.card--accent-green { border-top: 5px solid var(--brand-green); }

/* --- Wolk-hero (foto in organische vorm, à la Kinderkanker NL) ------------- */
.hero__media--cloud {
  box-shadow: none; aspect-ratio: 16/11; position: relative; overflow: hidden; border-radius: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1242.4 944.98' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M1242 476.78C1253 225 1052.94 11.69 795.16.46 653.36-5.72 523.71 50.61 433.84 144.4 394.78 80.88 324.94 37.05 243.57 33.5 114.68 27.89 5.73 125.41.22 251.32-5 370.86 84.88 473 204.28 487.8a297.27 297.27 0 00-41.6 139.31c-7.35 167.89 126 310.06 297.86 317.54a314.94 314.94 0 00185.1-49.92 478.42 478.42 0 00109.62 17.69C1013 923.65 1230.94 728.61 1242 476.78'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1242.4 944.98' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M1242 476.78C1253 225 1052.94 11.69 795.16.46 653.36-5.72 523.71 50.61 433.84 144.4 394.78 80.88 324.94 37.05 243.57 33.5 114.68 27.89 5.73 125.41.22 251.32-5 370.86 84.88 473 204.28 487.8a297.27 297.27 0 00-41.6 139.31c-7.35 167.89 126 310.06 297.86 317.54a314.94 314.94 0 00185.1-49.92 478.42 478.42 0 00109.62 17.69C1013 923.65 1230.94 728.61 1242 476.78'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hero__media--cloud img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
/* Kleurige "kraal"-stippen rond de wolk */
.hero__media-wrap { position: relative; }
.hero__media-wrap .dot { position: absolute; width: 22px; height: 22px; border-radius: 50%; z-index: 2; box-shadow: var(--shadow-sm); }
.hero__media-wrap .dot--1 { background: var(--brand-yellow); top: 6%; left: -2%; }
.hero__media-wrap .dot--2 { background: var(--brand-teal); bottom: 10%; right: -1%; width: 28px; height: 28px; }
.hero__media-wrap .dot--3 { background: var(--brand-red); bottom: -2%; left: 20%; width: 16px; height: 16px; }

/* Mobiel: foto ónder de tekst, volledige breedte, gladde vorm bovenaan en een
   platte onderkant die onder de blauwe golf doorloopt. */
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; }
  .hero__inner { order: 1; }
  .hero__media-wrap { order: 2; position: static; width: 100%; margin: 0; }
  .hero__media-wrap .dot { display: none; }
  .hero__media--cloud {
    -webkit-mask-image: none; mask-image: none;
    border-radius: 0; aspect-ratio: 16 / 10; box-shadow: none;
  }
  .hero .wave-bottom { display: block; order: 3; position: relative; z-index: 3; height: 60px; margin-top: -60px; }
}

/* Desktop: hero-foto bedekt de hele rechterkant tot de rand, grote curve links */
@media (min-width: 900px) {
  .hero { min-height: 620px; }
  .hero__inner { grid-template-columns: minmax(0, 540px) !important; pointer-events: none; }
  .hero__inner > * { pointer-events: auto; }
  .hero__media-wrap { position: absolute; top: -22%; right: -14%; bottom: 12%; left: auto; width: 66%; margin: 0; z-index: 0; }
  .hero__media--cloud {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
    border-radius: 0; box-shadow: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1242.4 944.98' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M1242 476.78C1253 225 1052.94 11.69 795.16.46 653.36-5.72 523.71 50.61 433.84 144.4 394.78 80.88 324.94 37.05 243.57 33.5 114.68 27.89 5.73 125.41.22 251.32-5 370.86 84.88 473 204.28 487.8a297.27 297.27 0 00-41.6 139.31c-7.35 167.89 126 310.06 297.86 317.54a314.94 314.94 0 00185.1-49.92 478.42 478.42 0 00109.62 17.69C1013 923.65 1230.94 728.61 1242 476.78'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1242.4 944.98' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M1242 476.78C1253 225 1052.94 11.69 795.16.46 653.36-5.72 523.71 50.61 433.84 144.4 394.78 80.88 324.94 37.05 243.57 33.5 114.68 27.89 5.73 125.41.22 251.32-5 370.86 84.88 473 204.28 487.8a297.27 297.27 0 00-41.6 139.31c-7.35 167.89 126 310.06 297.86 317.54a314.94 314.94 0 00185.1-49.92 478.42 478.42 0 00109.62 17.69C1013 923.65 1230.94 728.61 1242 476.78'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .hero__media-wrap .dot--1 { top: 12%; left: 3%; right: auto; }
  .hero__media-wrap .dot--2 { bottom: 18%; left: 1%; right: auto; }
  .hero__media-wrap .dot--3 { bottom: 9%; left: 12%; }
}

/* Grote schermen (>13"): zonder deze regels wordt de blob-vorm met het venster
   meegerekt tot een platte ovaal, terwijl de tekstkolom op 1140px in het midden
   blijft hangen. Hier leggen we de verhouding van de blob vast (aspect-ratio =
   viewBox van het masker), begrenzen we de breedte en zetten we de foto direct
   naast de tekstkolom — zodat de vorm klopt en de verdeling blijft zoals op een
   13"-scherm. Onder 1600px verandert er niets. */
@media (min-width: 1600px) {
  .hero__inner { max-width: 1400px; }
  .hero__media-wrap {
    /* Aan de bovenkant verankerd en iets opgetrokken, zodat de welving van de
       blob wegvalt tegen de header (net als op kleinere schermen). */
    top: 0; bottom: auto; transform: translateY(-20%);
    left: calc(50% - 60px); right: auto;
    width: min(52vw, 1000px);
    aspect-ratio: 1242 / 945;
  }
}

/* --- Ketting-krullijn achter/onder een titel ------------------------------- */
.ketting-line {
  background: url("../img/ketting-lijn.svg") no-repeat center / contain;
  height: 60px; max-width: 520px; margin: var(--space-4) auto 0; opacity: 0.95;
}

/* Rij met blokken en de "ketting" er achter (zoals bij de Kanjerketting) */
.ketting-row { position: relative; padding-block: var(--space-4); }
.ketting-row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 96px; background: url("../img/ketting-lijn.svg") no-repeat center / 100% 100%;
  z-index: 0; opacity: 0.9; pointer-events: none;
}
.ketting-row__items { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
.ketting-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-5) var(--space-4); text-align: center;
  flex: 0 1 180px; display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.ketting-card__bead { width: 46px; height: 46px; border-radius: 50%; box-shadow: var(--shadow-sm); }
.ketting-card__label { font-family: var(--font-heading); font-weight: 600; color: var(--brand-navy); }

/* Info-lijstjes: tabel-uitlijning — labels in kolom 1, alle waarden in één kolom */
.info-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: max-content 1fr;
    column-gap: .75em; row-gap: var(--space-2);
}
.info-list li { display: contents; }
.info-list li strong { white-space: nowrap; }

/* --- 404-pagina -------------------------------------------------------------- */
.notfound { background: var(--brand-navy-050); text-align: center; }
.notfound__inner { max-width: 640px; margin-inline: auto; align-items: center; }
.notfound__balloon {
    font-size: clamp(3.5rem, 12vw, 5.5rem); line-height: 1;
    animation: kvb-float 4s ease-in-out infinite; transform-origin: center bottom;
}
.notfound__title { color: var(--brand-navy); font-size: clamp(1.8rem, 5vw, 2.6rem); }

/* --- Homepage 'Laatste updates': golvende ketting achter de blokken ---------- */
.updates-section { overflow-x: clip; }
.updates-grid-wrap { position: relative; }
.updates-grid-wrap > :not(.updates-chain) { position: relative; z-index: 1; }
.updates-chain {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 100vw; aspect-ratio: 1600 / 70;
    background-color: var(--color-cta);
    -webkit-mask: url("../img/golvende_lijn.svg") no-repeat center / 100% 100%;
            mask: url("../img/golvende_lijn.svg") no-repeat center / 100% 100%;
    z-index: 0; pointer-events: none;
    display: none;
}
@media (min-width: 800px) { .updates-chain { display: block; } }

/* --- Footer partner-logo's --------------------------------------------------- */
.footer-logos {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--space-5); margin-top: var(--space-4);
}
.footer-logos img { height: 56px; width: auto; max-width: 100%; }
.footer-logos a { display: inline-flex; transition: opacity .2s ease; }
.footer-logos a:hover { opacity: .75; }

/* --- Cookie-toestemming: klein kaartje linksonder --------------------------- */
.cookie-consent {
    position: fixed; right: 1.25rem; bottom: 1.25rem; left: auto; z-index: 200;
    width: min(340px, calc(100vw - 2.5rem));
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner { padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.cookie-consent__text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--color-text); }
.cookie-consent__actions { display: flex; gap: .6rem; }
.cookie-consent__actions .btn { flex: 1; padding: .5rem 1rem; justify-content: center; text-align: center; }

/* --- Juridische / tekstpagina's: rustiger, minder massaal -------------------- */
.legal h1 { font-size: clamp(1.7rem, 3.5vw, 2.2rem); margin-bottom: var(--space-3); }
.legal h2 { font-size: 1.3rem; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.legal h3 { font-size: 1.05rem; margin-top: var(--space-4); margin-bottom: var(--space-1); color: var(--brand-navy-700); }
.legal .lead { font-size: 1.05rem; font-weight: 400; color: var(--color-text-muted); }
.legal p, .legal li { font-size: .98rem; line-height: 1.7; color: var(--color-text); }
.legal ul { padding-left: 1.2rem; margin-block: var(--space-2); }
.legal li { margin-block: .35rem; }
.notfound__text { max-width: 52ch; margin-inline: auto; }
.notfound__text--muted { opacity: .75; }
.notfound__actions { justify-content: center; flex-wrap: wrap; }
@keyframes kvb-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-16px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .notfound__balloon { animation: none; }
}
.section--navy .ketting-line { filter: brightness(1.6); }
/* Variant: krullijn subtiel achter een sectiekop */
.title-ketting { position: relative; display: inline-block; }
.title-ketting::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -28px; width: 320px; height: 44px;
  background: url("../img/ketting-lijn.svg") no-repeat center / contain;
  pointer-events: none;
}

/* --- Automatische golf onder elke subpagina-hero --------------------------- */
.page-hero { position: relative; }
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C360,54 720,4 1080,26 C1260,36 1380,42 1440,30 L1440,46 L0,46 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / cover;
  pointer-events: none;
}
/* Wanneer de sectie ná de hero een zachte achtergrond heeft */
.page-hero.wave-to-soft::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C360,54 720,4 1080,26 C1260,36 1380,42 1440,30 L1440,46 L0,46 Z' fill='%23F6F8FC'/%3E%3C/svg%3E"); }

/* --- Playful shapes (squiggles & losse kralen, VKN-stijl) ------------------ */
.shape { position: absolute; z-index: 0; pointer-events: none; opacity: 0.9; }
.squiggle { display: inline-block; width: 90px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 20'%3E%3Cpath d='M2,10 C12,0 22,20 32,10 S52,0 62,10 S82,20 88,10' fill='none' stroke='%23EF7D00' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.section-head .squiggle { margin: 0 auto var(--space-2); }

/* --- Utilities ------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-6 { margin-bottom: var(--space-6); }
.section-head { max-width: 60ch; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }

/* --- Video-embed in berichten --------------------------------------------- */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: var(--space-6) 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Fotogalerij bij berichten -------------------------------------------- */
.post-gallery {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}
.post-gallery__item {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-gallery__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-gallery__item:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }

/* --- Lightbox -------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; margin: auto;
  width: fit-content; height: fit-content;
  border: 0; background: transparent; padding: 0; overflow: visible;
  max-width: 92vw; max-height: 92vh;
}
.lightbox__counter {
  position: fixed; bottom: 4vh; left: 50%; transform: translateX(-50%);
  color: #fff; background: rgba(0, 0, 0, .5);
  padding: .35rem .9rem; border-radius: 999px;
  font-size: .95rem; font-variant-numeric: tabular-nums;
}
.lightbox::backdrop { background: rgba(10, 20, 40, .82); backdrop-filter: blur(4px); }
.lightbox__img {
  max-width: 92vw; max-height: 88vh;
  display: block; margin: auto;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.lightbox__close,
.lightbox__nav {
  position: fixed; z-index: 2;
  border: 0; cursor: pointer; color: #fff;
  background: rgba(0, 0, 0, .5);
  display: grid; place-items: center;
  border-radius: 50%;
}
.lightbox__close { top: 4vh; right: 4vw; width: 46px; height: 46px; font-size: 1.7rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; line-height: 1; }
.lightbox__nav--prev { left: 3vw; }
.lightbox__nav--next { right: 3vw; }
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--brand-navy); }
@media (max-width: 640px) {
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox__nav--prev { left: 1vw; }
  .lightbox__nav--next { right: 1vw; }
}

/* --- Soepel scrollen naar anker-secties (onder de sticky header) ---------- */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }

/* --- Navigatie-submenu (Fietstocht 2027) ---------------------------------- */
.nav__item { position: relative; }
.nav__caret { margin-left: 4px; vertical-align: middle; transition: transform var(--dur) var(--ease); }
.nav__sub { list-style: none; margin: 0; padding: 0; }
.nav__sublink {
  display: block; padding: 0.55rem 0.95rem; border-radius: var(--radius-md);
  color: var(--brand-navy); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.nav__sublink:hover { background: var(--brand-navy-050); color: var(--brand-navy-700); }

@media (min-width: 901px) {
  .nav__sub {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 210px;
    padding: var(--space-2);
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 90;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav__item--has-sub:hover .nav__sub,
  .nav__item--has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__item--has-sub:hover .nav__caret { transform: rotate(180deg); }
}

@media (max-width: 900px) {
  .nav__caret { display: none; }
  .nav__sub { padding: 0 0 var(--space-2) var(--space-5); }
  .nav__sublink { padding: var(--space-2) var(--space-4); font-size: var(--fs-400); color: var(--color-text-muted); }
}

/* --- Aftelteller ----------------------------------------------------------- */
.countdown-section { background: var(--brand-navy); color: #fff; margin-top: -2px; }
.countdown-section .eyebrow { color: var(--brand-yellow); }
.countdown-section h2 { color: #fff; }
.countdown { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-4); }
.countdown__box { background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: var(--space-4) var(--space-2); width: 108px; }
.countdown__num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; color: var(--brand-yellow); font-variant-numeric: tabular-nums; }
.countdown__label { display: block; margin-top: 0.35rem; font-size: var(--fs-300); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }
.countdown__date { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-300); }

/* --- Donatie-thermometer --------------------------------------------------- */
.thermo { max-width: 560px; margin: var(--space-5) auto var(--space-6); }
.thermo__bar { height: 26px; background: var(--brand-navy-050); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); }
.thermo__fill { height: 100%; min-width: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-orange), var(--brand-yellow)); transition: width 0.8s ease; }
.thermo__labels { margin-top: var(--space-3); }
.thermo__labels strong { color: var(--brand-navy); font-size: var(--fs-500); }
.thermo__labels span { color: var(--color-text-muted); }
.thermo--onband { margin-top: var(--space-5); }
.thermo--onband .thermo__bar { background: rgba(255, 255, 255, 0.25); }
.thermo--onband .thermo__labels strong { color: #fff; }
.thermo--onband .thermo__labels span { color: rgba(255, 255, 255, 0.85); }

/* --- Ballonnentros (deelnemers & organisatie) ------------------------------ */
.tros { position: relative; max-width: 640px; margin: var(--space-6) auto 0; padding-bottom: 96px; }
.tros__strings { position: absolute; top: 0; left: 0; width: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.tros__strings path { fill: none; stroke: #444a56; stroke-width: 1.3; opacity: 0.5; }
.tros__balloons { position: relative; z-index: 2; opacity: 0; transition: opacity 0.3s ease; min-height: 200px; }
.balloon {
  position: absolute; width: 104px; height: 104px; border-radius: 50%;
  border: 5px solid #ccc; background: #fff; cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.balloon--orange { border-color: var(--brand-orange); }
.balloon--teal { border-color: var(--brand-teal); }
.balloon--yellow { border-color: var(--brand-yellow); }
.balloon:hover { transform: translateY(-4px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18); }
.balloon:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 3px; }
.balloon__img { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.balloon__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.balloon__shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%); }
.balloon__knot { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 0; height: 0; border: 5px solid transparent; border-top-color: inherit; }
.tros__legend { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.tros__legend span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand-navy); }
.tros__dot { width: 15px; height: 15px; border-radius: 50%; }
.tros__dot--orange { background: var(--brand-orange); }
.tros__dot--teal { background: var(--brand-teal); }
.tros__dot--yellow { background: var(--brand-yellow); }
@media (max-width: 560px) {
  .balloon { width: 84px; height: 84px; border-width: 4px; }
  .tros { padding-bottom: 72px; }
}

/* --- Organische fotovorm (o.a. Fietstocht "Het doel") ---------------------- */
.media-organic {
  border-radius: 54% 46% 42% 58% / 42% 54% 46% 58%;
  overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 4; position: relative;
}
.media-organic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-organic::after {
  content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-yellow); bottom: 8%; left: -10px; box-shadow: var(--shadow-sm);
}