/* Stichting Vrienden van Dignis
   Layout: rustige witte pagina met afwisselend lichtgrijze secties; één hoofdkleur
   (het blauw van het Dignis-logo op de bus) en één warm accent, spaarzaam gebruikt. */
:root {
  --paper: #ffffff;
  --paper-2: #f4f6fa;       /* koele lichtgrijze sectie */
  --warm: #fbf3ee;          /* warme sectie, afgeleid van het perzik in het buslogo */
  --ink: #1a2238;
  --ink-soft: #4f5870;
  --line: #dfe3ec;
  --primary: #24398f;       /* Dignis-blauw */
  --primary-deep: #172766;
  --primary-tint: #e9edf8;
  --accent: #c8643c;        /* warm accent, alleen voor kleine details */
  --on-primary: #ffffff;
  --band: #172766;          /* donkere band en voet */
  --on-band: #ffffff;
  --focus: #e08a2e;
  --date-bg: #24398f;
  --on-date: #ffffff;

  --serif: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --body: "Atkinson Hyperlegible", "Verdana", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.88rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.55rem;
  --step-3: clamp(1.75rem, 1.35rem + 1.6vw, 2.3rem);
  --step-4: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem);

  --radius: 12px;
  --wrap: 70rem;
  --measure: 40rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111726; --paper-2: #182035; --warm: #1d1b24; --ink: #eef1f8; --ink-soft: #b6bdd0;
    --line: #2c3550; --primary: #9fb3ff; --primary-deep: #c3d0ff; --primary-tint: #1f2a4d;
    --accent: #f0a27e; --on-primary: #111726; --band: #0b1020; --on-band: #eef1f8; --focus: #f0a27e; --date-bg: #1f2a4d; --on-date: #dfe6ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111726; --paper-2: #182035; --warm: #1d1b24; --ink: #eef1f8; --ink-soft: #b6bdd0;
  --line: #2c3550; --primary: #9fb3ff; --primary-deep: #c3d0ff; --primary-tint: #1f2a4d;
  --accent: #f0a27e; --on-primary: #111726; --band: #0b1020; --on-band: #eef1f8; --focus: #f0a27e; --date-bg: #1f2a4d; --on-date: #dfe6ff;
  color-scheme: dark;
}

/* Tekstgrootte: de bezoeker kan kiezen */
html { font-size: 112.5%; }
html[data-size="groot"] { font-size: 125%; }
html[data-size="extra"] { font-size: 143.75%; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0; }
.flow > * + * { margin-top: 1em; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--primary-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.measure { max-width: var(--measure); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 50;
  background: var(--primary); color: var(--on-primary); padding: 0.7em 1.1em;
  border-radius: 8px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); color: var(--on-primary); }

/* ---------- Kop & navigatie ---------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; padding-block: 1.1rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 2.9rem; height: 2.9rem; border-radius: 10px; flex: none;
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text small { font-size: var(--step--1); color: var(--ink-soft); }
.brand-text b { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }

.tools { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.textsize { display: flex; align-items: center; gap: 0.3rem; }
.textsize span { font-size: var(--step--1); color: var(--ink-soft); margin-right: 0.25rem; }
.textsize button {
  font: inherit; font-weight: 700; line-height: 1; cursor: pointer;
  min-width: 2.6rem; min-height: 2.6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.textsize button:nth-of-type(2) { font-size: 1.15em; }
.textsize button:nth-of-type(3) { font-size: 1.3em; }
.textsize button:hover { border-color: var(--primary); }
.textsize button[aria-pressed="true"] { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-deep); }

.theme-toggle {
  font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.6rem; padding: 0 0.85rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.theme-toggle:hover { border-color: var(--primary); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .i-sun { display: none; }
.theme-toggle[aria-pressed="true"] .i-sun { display: block; }
.theme-toggle[aria-pressed="true"] .i-moon { display: none; }
@media (max-width: 560px) { .theme-toggle .theme-label { display: none; } .theme-toggle { padding: 0 0.7rem; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.65em 1.35em; border-radius: 8px;
  font-family: var(--body); font-weight: 700; font-size: var(--step-0);
  text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.1;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-deep); color: var(--on-primary); text-decoration: none; }
.btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary-tint); color: var(--primary-deep); text-decoration: none; }
.btn-light { background: var(--paper); color: var(--primary-deep); }
.btn-light:hover { background: var(--primary-tint); color: var(--primary-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.mainnav ul { list-style: none; margin-block: 0; padding-block: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.mainnav a {
  display: block; padding: 0.8rem 0.75rem; text-decoration: none; color: var(--ink);
  font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.mainnav a:hover { color: var(--primary); }
.mainnav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.mainnav li:first-child a { padding-left: 0; }
.menu-toggle { display: none; }
.nav-doneer { display: none; }

@media (max-width: 760px) {
  .tools .btn { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font: inherit; font-weight: 700; cursor: pointer;
    min-height: 2.6rem; padding: 0 1rem; border-radius: 8px;
    border: 1px solid var(--ink-soft); background: var(--paper); color: var(--ink);
  }
  .mainnav { display: none; border-top: 1px solid var(--line); }
  .mainnav.open { display: block; }
  .mainnav ul { flex-direction: column; gap: 0; padding-block: 0.4rem 0.8rem; }
  .mainnav li:first-child a { padding-left: 0.9rem; }
  .mainnav a { border-bottom: 0; border-left: 3px solid transparent; padding: 0.85rem 0.9rem; font-size: var(--step-1); margin: 0; }
  .mainnav a[aria-current="page"] { border-left-color: var(--primary); background: var(--primary-tint); }
  .mainnav .nav-doneer { display: block; margin-top: 0.6rem; }
  .mainnav .nav-doneer a { background: var(--primary); color: var(--on-primary); border-radius: 8px; text-align: center; }
}

/* ---------- Opening ---------- */
.hero { padding-block: 3.5rem 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero .lead { font-size: var(--step-1); margin-top: 1.1rem; max-width: 33rem; color: var(--ink-soft); }
.hero .btn-row { margin-top: 1.8rem; }
.hero figure { margin: 0; }
.hero figure img { border-radius: var(--radius); width: 100%; height: auto; }
.hero figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.6rem; }
.kicker { font-size: var(--step--1); font-weight: 700; color: var(--accent); letter-spacing: 0.04em; margin-bottom: 0.7rem; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero { padding-block: 2.2rem 2.5rem; } }

.page-head { padding-block: 2.6rem 2.4rem; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.page-head .lead { font-size: var(--step-1); margin-top: 0.9rem; max-width: 42rem; color: var(--ink-soft); }
.page-head .split { align-items: center; }
.crumb { font-size: var(--step--1); margin-bottom: 0.9rem; color: var(--ink-soft); }
.crumb a { color: var(--ink-soft); }

/* ---------- Vertrouwen-strook ---------- */
.trust { background: var(--paper-2); border-block: 1px solid var(--line); }
.trust ul {
  list-style: none; margin: 0; padding-block: 1.6rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem 2rem;
}
.trust li { display: flex; gap: 0.8rem; align-items: flex-start; min-width: 0; }
.trust svg { flex: none; width: 1.8rem; height: 1.8rem; color: var(--primary); margin-top: 0.1rem; }
.trust b { display: block; font-weight: 700; line-height: 1.3; }
.trust span { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.4; display: block; margin-top: 0.15rem; }
@media (max-width: 960px) { .trust ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust ul { grid-template-columns: 1fr; } }

/* ---------- Secties ---------- */
.section { padding-block: 4rem; }
.section + .section { border-top: 1px solid var(--line); }
.section-alt { background: var(--paper-2); border-top: 0 !important; }
.section-warm { background: var(--warm); border-top: 0 !important; }
.section-alt + .section, .section-warm + .section { border-top: 0; }
.section-band { background: var(--band); color: var(--on-band); border-top: 0 !important; }
.section-band h2, .section-band h3 { color: var(--on-band); }
.section-band a { color: var(--on-band); }
.section-band .kicker { color: #f3b896; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.split > * { min-width: 0; }
.split-wide { grid-template-columns: 1.45fr 1fr; }
@media (max-width: 860px) { .split, .split-wide { grid-template-columns: 1fr; gap: 2rem; } .section { padding-block: 3rem; } }

.section-head { margin-bottom: 2.2rem; max-width: var(--measure); }
.section-head p:not(.kicker) { margin-top: 0.8rem; font-size: var(--step-1); color: var(--ink-soft); }

.photo { border-radius: var(--radius); width: 100%; }
figure.pic { margin: 0; }
figure.pic figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.6rem; }

/* ---------- Uitnodiging ---------- */
.invite {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: 12rem 1fr; overflow: hidden;
  box-shadow: 0 1px 2px rgba(23, 39, 102, 0.06), 0 8px 24px rgba(23, 39, 102, 0.06);
}
.invite-date {
  background: var(--date-bg); color: var(--on-date); padding: 2rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-family: var(--serif); line-height: 1;
}
.invite-date .w { font-family: var(--body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.invite-date .d { font-size: 4.4rem; font-weight: 600; margin-top: 0.4rem; }
.invite-date .m { font-size: 1.35rem; margin-top: 0.35rem; }
.invite-date .y { font-family: var(--body); font-size: 1rem; margin-top: 0.5rem; opacity: 0.85; }
.invite-body { padding: 2rem 2.2rem; min-width: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.4rem; margin: 1.5rem 0 1.2rem; padding: 1.1rem 1.3rem; background: var(--paper-2); border-radius: 10px; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
.rsvp { border-left: 3px solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; margin-top: 1.2rem; }
@media (max-width: 680px) {
  .invite { grid-template-columns: 1fr; }
  .invite-date { flex-direction: row; justify-content: flex-start; gap: 0.6rem; padding: 1rem 1.3rem; align-items: baseline; }
  .invite-date .d { font-size: 2rem; margin: 0; }
  .invite-date .m, .invite-date .y { margin: 0; }
  .invite-body { padding: 1.4rem 1.3rem; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 0.6rem; }
}

/* ---------- Locaties ---------- */
.places { display: grid; gap: 1.6rem; }
.places h3 { font-family: var(--body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.6rem; }
.plainlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.plainlist li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.cols-2-list { columns: 2; column-gap: 2rem; }
.cols-2-list li { break-inside: avoid; }

/* ---------- Doneren ---------- */
.give {
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
  padding: 1.6rem; display: grid; grid-template-columns: 9rem 1fr; gap: 1.6rem; align-items: center;
  border: 1px solid var(--line);
}
.give > * { min-width: 0; }
.give h3 { color: var(--ink); font-size: var(--step-2); }
.give a { color: var(--primary); }
.give a.qr { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.give a.qr:hover { border-color: var(--primary); }
.iban {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 1rem; margin-top: 0.4rem; background: var(--paper-2);
}
.iban code { white-space: nowrap; font-family: var(--body); font-weight: 700; font-size: var(--step-1); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.iban small { flex-basis: 100%; color: var(--ink-soft); }
.copy {
  font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer; border-radius: 6px;
  padding: 0.35em 0.9em; border: 1px solid var(--primary); background: var(--paper); color: var(--primary); min-height: 2.3rem;
}
.copy:hover { background: var(--primary); color: var(--on-primary); }
@media (max-width: 600px) { .give { grid-template-columns: 1fr; padding: 1.3rem; } .give a.qr { max-width: 11rem; } }

/* ---------- Nieuws ---------- */
.news { display: grid; }
.post { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem; border-top: 1px solid var(--line); }
.post:last-child { border-bottom: 1px solid var(--line); }
.post.has-img { grid-template-columns: 1fr 14rem; align-items: start; }
.post > * { min-width: 0; }
.post img { border-radius: 10px; width: 100%; }
.post h3 { font-size: var(--step-2); }
.meta { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.post .flow { max-width: var(--measure); }
.more-news { margin-top: 1.5rem; }
.more-news summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; list-style: none;
  font-weight: 700; color: var(--primary); padding: 0.75rem 1.2rem; border: 2px solid var(--primary); border-radius: 8px; min-height: 3rem;
}
.more-news summary::-webkit-details-marker { display: none; }
.more-news summary::after { content: "+"; font-size: 1.3em; line-height: 1; }
.more-news[open] summary::after { content: "−"; }
.more-news summary:hover { background: var(--primary-tint); }
.more-news[open] summary { margin-bottom: 1rem; }
@media (max-width: 720px) { .post.has-img { grid-template-columns: 1fr; } .post.has-img img { max-width: 22rem; } }

/* ---------- Lijsten ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.checks li { position: relative; padding-left: 1.9rem; }
.checks li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.42em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--primary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%2324398f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
}
.thanks { columns: 3; column-gap: 2.5rem; }
@media (max-width: 860px) { .thanks { columns: 2; } }
@media (max-width: 520px) { .thanks, .cols-2-list { columns: 1; } }
.thanks li { break-inside: avoid; margin-bottom: 0.6rem; }

.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cols-3 > * { min-width: 0; }
@media (max-width: 900px) { .cols-3 { grid-template-columns: 1fr; } }

.status { border-radius: var(--radius); padding: 1.5rem 1.6rem; background: var(--paper); border: 1px solid var(--line); }
.status-label {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); font-weight: 700;
  color: var(--ink-soft); margin-bottom: 0.4rem;
}
.status-label::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dot, var(--primary)); }
.status h3 { font-size: var(--step-1); margin-bottom: 1rem; }
.status ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.6rem; }
.status li::marker { color: var(--ink-soft); }
.status small { display: block; color: var(--ink-soft); margin-top: 0.2rem; line-height: 1.5; }

.stat { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; background: var(--paper-2); border-radius: var(--radius); }
.stat b { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--primary); font-weight: 600; }
.stat span { font-size: var(--step-1); font-weight: 700; }

.taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.taglist li { padding: 0.3em 0.85em; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); }
.section-alt .taglist li, .section-warm .taglist li { background: var(--paper); }
.taglist-label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.6rem; }

.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.people li { background: var(--paper); border-radius: var(--radius); padding: 1.2rem; border: 1px solid var(--line); display: flex; gap: 0.9rem; align-items: center; }
.initials {
  width: 2.8rem; height: 2.8rem; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--primary-tint); color: var(--primary-deep); font-weight: 700; font-family: var(--serif);
}
.people b { display: block; font-weight: 700; line-height: 1.3; }
.people span { color: var(--ink-soft); font-size: var(--step--1); }

.docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.docs a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0.2rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700;
}
.docs a:hover { color: var(--primary); background: var(--primary-tint); }
.docs small { display: block; font-weight: 400; color: var(--ink-soft); }
.docs .ext { font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); flex: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.docs .ext svg { width: 1.1rem; height: 1.1rem; }

.keyfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0; background: var(--paper); }
.keyfacts div { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
.keyfacts div:nth-child(odd) { border-right: 1px solid var(--line); }
.keyfacts div:nth-last-child(-n+2) { border-bottom: 0; }
.keyfacts dt { font-size: var(--step--1); color: var(--ink-soft); }
.keyfacts dd { margin: 0.15rem 0 0; font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.note { border-radius: var(--radius); padding: 1.2rem 1.4rem; background: var(--paper-2); border-left: 4px solid var(--primary); }
.note h3 { font-family: var(--body); font-size: var(--step-0); font-weight: 700; margin-bottom: 0.4rem; }

.video { display: block; position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.video span {
  position: absolute; left: 1rem; bottom: 1rem; background: var(--paper); color: var(--ink);
  padding: 0.65em 1.1em; border-radius: 8px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.55em; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.video span svg { color: var(--primary); }
.video:hover span { background: var(--primary); color: var(--on-primary); }
.video:hover span svg { color: var(--on-primary); }

/* ---------- Formulier ---------- */
.form { display: grid; gap: 1.6rem; background: var(--paper); border-radius: var(--radius); padding: 2rem; border: 1px solid var(--line); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.7rem; min-width: 0; }
.form legend, .form label.l { font-weight: 700; font-size: var(--step-1); font-family: var(--serif); padding: 0; margin-bottom: 0.3rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form .row > * { min-width: 0; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 700; }
.form input[type="text"], .form input[type="email"], .form input[type="number"] {
  font: inherit; width: 100%; min-height: 3rem; padding: 0.55rem 0.85rem;
  border-radius: 8px; border: 1px solid var(--ink-soft); background: var(--paper); color: var(--ink);
}
.form input:focus-visible { border-color: var(--primary); }
.input-short { max-width: 12rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0.5em 1.2em;
  border-radius: 8px; border: 1px solid var(--ink-soft); font-weight: 700; background: var(--paper);
}
.choice input:checked + span { background: var(--primary-tint); border: 2px solid var(--primary); color: var(--primary-deep); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.check { display: flex; gap: 0.8rem; align-items: flex-start; }
.check input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; accent-color: var(--primary); flex: none; }
.req { color: var(--accent); }
.form-msg { border-radius: 10px; padding: 1rem 1.2rem; background: var(--primary-tint); }
.form-msg.err { background: var(--warm); border-left: 4px solid var(--accent); }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } .form { padding: 1.3rem; } }

/* ---------- Voet ---------- */
.site-footer { background: var(--band); color: var(--on-band); }
.site-footer a { color: var(--on-band); }
.site-footer a:hover { color: #f3b896; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; padding-block: 3.2rem; }
.footer-grid > * { min-width: 0; }
.footer-grid h2 { font-size: var(--step-1); margin-bottom: 1rem; color: var(--on-band); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-grid dl { margin: 0; display: grid; gap: 0.7rem; }
.footer-grid dt { font-size: var(--step--1); opacity: 0.75; }
.footer-grid dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.footer-base { border-top: 1px solid rgba(255,255,255,0.16); padding-block: 1.2rem; font-size: var(--step--1); opacity: 0.8; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

@media (prefers-reduced-motion: no-preference) {
  .btn, .mainnav a, .docs a, .copy, .video span, .more-news summary { transition: background-color .15s, color .15s, border-color .15s; }
}

/* ---------- Smalle schermen: kop en IBAN ---------- */
@media (max-width: 560px) {
  .textsize span { display: none; }
  .tools { gap: 0.5rem; }
  .iban code { font-size: var(--step-0); }
}

/* ---------- Kleine accenten ---------- */
.kicker { display: flex; align-items: center; gap: 0.6rem; }
.kicker::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; border-radius: 2px; flex: none; }

.hero-photo { position: relative; }
.hero-photo::before {
  content: ""; position: absolute; z-index: 0; inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  background: var(--warm); border-radius: var(--radius);
}
.hero-photo img { position: relative; z-index: 1; }
.hero-figure figcaption { margin-top: 2rem; }
.hero-badge {
  position: absolute; z-index: 2; left: -1.2rem; bottom: 1.4rem;
  background: var(--paper); color: var(--ink); border-radius: 10px; padding: 0.8rem 1.1rem;
  display: flex; align-items: baseline; gap: 0.55rem;
  box-shadow: 0 2px 4px rgba(23, 39, 102, 0.08), 0 12px 30px rgba(23, 39, 102, 0.14);
}
.hero-badge b { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--primary); }
.hero-badge span { font-size: var(--step--1); font-weight: 700; }
@media (max-width: 860px) {
  .hero-photo::before { inset: 0.8rem -0.6rem -0.8rem 0.8rem; }
  .hero-badge { left: 0.8rem; bottom: 0.8rem; }
}

.quote-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3.5rem; align-items: center; }
.quote-grid > * { min-width: 0; }
.quote { margin: 0; }
.quote blockquote { margin: 0; position: relative; padding-top: 2.6rem; }
.quote blockquote::before {
  content: "\201C"; position: absolute; top: -0.6rem; left: -0.2rem;
  font-family: var(--serif); font-size: 6rem; line-height: 1; color: var(--accent);
}
.quote blockquote p {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.3; text-wrap: balance; color: var(--ink);
}
.quote figcaption { margin-top: 1.2rem; color: var(--ink-soft); }
@media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; gap: 2rem; } .quote-grid img { max-width: 20rem; } }

@media (prefers-reduced-motion: no-preference) {
  .people li, .status, .give a.qr img { transition: transform .2s ease, box-shadow .2s ease; }
  .people li:hover, .status:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23, 39, 102, 0.08); }
}

/* ---------- Speelser, voor ouderen en hun familie ---------- */
:root {
  --tulip: #b8336a; --tulip-tint: #fbe4ec;
  --sun: #9a6a00;   --sun-tint: #fdf0c8;
  --leaf: #2d6e45;  --leaf-tint: #dff0e4;
  --sky: #2a5d9a;   --sky-tint: #e1ecf8;
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tulip: #ff9cc0; --tulip-tint: #3a1d2a; --sun: #ffd36b; --sun-tint: #352b12;
    --leaf: #8fd8a8; --leaf-tint: #17301f; --sky: #9cc4ff; --sky-tint: #1a2a44;
  }
}
:root[data-theme="dark"] {
  --tulip: #ff9cc0; --tulip-tint: #3a1d2a; --sun: #ffd36b; --sun-tint: #352b12;
  --leaf: #8fd8a8; --leaf-tint: #17301f; --sky: #9cc4ff; --sky-tint: #1a2a44;
}

/* iets grotere basistekst */
html { font-size: 118.75%; }
html[data-size="groot"] { font-size: 131.25%; }
html[data-size="extra"] { font-size: 150%; }

/* rondere, vriendelijkere knoppen */
.btn, .more-news summary { border-radius: 999px; }
.btn { padding-inline: 1.6em; }
.copy { border-radius: 999px; }

/* markering in de kop, als met een stift */
.hl {
  background: linear-gradient(transparent 62%, var(--sun-tint) 62%, var(--sun-tint) 92%, transparent 92%);
  padding-inline: 0.08em;
}

/* uitjes-tegels */
.trips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.trip {
  border-radius: var(--radius); padding: 1.5rem 1.4rem 1.4rem; background: var(--tint); color: var(--ink);
  display: flex; flex-direction: column; gap: 0.35rem; min-width: 0;
}
.trip svg { width: 3.2rem; height: 3.2rem; color: var(--c); margin-bottom: 0.7rem; }
.trip b { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; line-height: 1.2; }
.trip span { font-size: var(--step--1); color: var(--ink-soft); }
.t-tulip { --tint: var(--tulip-tint); --c: var(--tulip); }
.t-sky   { --tint: var(--sky-tint);   --c: var(--sky); }
.t-sun   { --tint: var(--sun-tint);   --c: var(--sun); }
.t-leaf  { --tint: var(--leaf-tint);  --c: var(--leaf); }
@media (max-width: 960px) { .trips { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .trips { grid-template-columns: 1fr; } .trip { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; } .trip svg { margin: 0; width: 2.6rem; height: 2.6rem; } .trip b { flex: 1; } .trip span { flex-basis: 100%; padding-left: 3.6rem; } }

.wishes { margin-top: 2rem; }
.wish-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wish-list li {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5em 1.1em 0.5em 0.85em; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 700;
}
.wish-list li::before {
  content: ""; width: 1.1rem; height: 1.1rem; flex: none;
  background: var(--tulip);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* vrolijker kopje: bolletje in tulpkleur in plaats van een lijntje */
.kicker::before { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tulip); }
.section-band .kicker::before { background: #f3b896; }

/* taglijsten op de Vriendenbus-pagina in dezelfde vriendelijke stijl */
.taglist li { border-radius: 999px; padding: 0.4em 1em; font-weight: 700; }

/* trust-iconen in een zacht rondje */
.trust svg { box-sizing: content-box; padding: 0.45rem; border-radius: 50%; background: var(--primary-tint); width: 1.4rem; height: 1.4rem; }

/* ---------- Verborgen grapje: de bus rijdt weg ---------- */
.vroem {
  position: absolute; z-index: 5; right: 8%; top: -1.2rem;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1;
  padding: 0.5rem 0.9rem; border-radius: 14px; pointer-events: none; opacity: 0;
}
.vroem::after {
  content: ""; position: absolute; left: 1.2rem; bottom: -0.55rem; width: 0.9rem; height: 0.9rem;
  background: var(--paper); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
.puff {
  position: absolute; z-index: 3; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(160,165,180,.9), rgba(160,165,180,0) 70%); pointer-events: none;
}

/* ---------- Opening: uitgeknipte bus op een weggetje ---------- */
.hero-scene {
  position: relative; aspect-ratio: 16 / 10.5; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--sky-tint) 0%, var(--sky-tint) 58%, var(--leaf-tint) 58%, var(--leaf-tint) 100%);
  overflow: visible;
}
.hero-scene::before { display: none; }
.scene-sun {
  position: absolute; top: 12%; right: 10%; width: 14%; aspect-ratio: 1; border-radius: 50%;
  background: var(--sun-tint); box-shadow: 0 0 0 10px color-mix(in srgb, var(--sun-tint) 50%, transparent);
}
.scene-road {
  position: absolute; left: 0; right: 0; bottom: 9%; height: 20%;
  background: color-mix(in srgb, var(--ink-soft) 22%, var(--paper));
}
.scene-road::after {
  content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 26px, transparent 26px 50px);
}
.hero .hero-scene .scene-bus {
  position: absolute; z-index: 1; left: 6%; bottom: 13%; width: 86%; height: auto;
  aspect-ratio: auto; border-radius: 0; object-fit: contain;
  filter: drop-shadow(0 10px 8px rgba(23, 39, 102, 0.22));
  cursor: default; user-select: none; -webkit-user-drag: none;
}
.hero-scene .hero-badge { bottom: auto; top: 1.2rem; left: -1.2rem; }
@media (max-width: 860px) { .hero-scene .hero-badge { left: 0.8rem; top: 0.8rem; } }

/* De opening toont de echte foto. Daarop ligt de uitgeknipte bus precies op dezelfde plek.
   Rijdt de bus weg (grapje), dan vervaagt de foto even en rijdt alleen de bus. */
.hero-scene { aspect-ratio: 1000 / 560; background: var(--paper-2); }
.hero-scene::before {
  display: block; content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: url("img/vriendenbus.jpg") center / cover no-repeat;
  transition: opacity .35s ease;
}
.hero-scene.leeg::before { opacity: 0; }
.hero .hero-scene .scene-bus {
  left: 2.9%; top: 8%; bottom: auto; width: 91.9%;
  filter: none;
}
.hero-scene.leeg .scene-bus { filter: drop-shadow(0 8px 6px rgba(23, 39, 102, 0.25)); }
.hero-scene .hero-badge { top: auto; bottom: 1.4rem; left: -1.2rem; }
@media (max-width: 860px) { .hero-scene .hero-badge { left: 0.8rem; bottom: 0.8rem; top: auto; } }