/*
  Visie-tatie: "Er komt een collega langs". Kleuren gemeten uit hun logo (15/11/2026).
  Eén opvallend element: de staafjes uit het logo als route van de visitatie. Verder rustig.
*/
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../lettertypes/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../lettertypes/newsreader-latin-wght-normal.woff2) format('woff2'); }

:root {
  --inkt: #13235B;          /* logoletters: titels, knoppen */
  --streep: #D0076A;        /* magenta uit het logo: enige gevulde accentkleur, betekent "nu" of "jouw stap" (wit erop 5,4:1) */
  --papier: #FFFFFF;
  --band: #F2F5FA;          /* koel lichtblauw, zoals de film */
  --tekst: #27304D;
  --zacht: #525C78;         /* bijtekst: 6,6:1 op wit, 6,1:1 op de band */
  --lijn: #D5DBE8;
  --lijn-sterk: #9AA4BF;
  --op-donker: #F3F5FB;
  --zacht-donker: #C9D0E4;
  --focus: #D0076A;
  --rand: clamp(16px, 4.5vw, 40px);
  --kop-h: 56px;
  --letter: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ow-vlak: #13235B; --ow-tekst: #F3F5FB; --ow-zacht: #C9D0E4; --ow-lijn: rgba(243, 245, 251, .25);
  --ow-accent: #F59AC7; --ow-op-accent: #13235B; --ow-kop: var(--serif); --ow-hand: var(--serif);
}
@media (min-width: 900px) { :root { --kop-h: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--papier); color: var(--tekst); font-family: var(--letter); font-size: 1.125rem; line-height: 1.6;
  font-variant-numeric: lining-nums; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--inkt); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--streep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; color: var(--inkt); font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -.01em;
  text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
h1 { font-size: clamp(2.15rem, 1.55rem + 2.6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
h3 { font-size: 1.4rem; line-height: 1.2; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--rand); }
.smal { max-width: 40em; }
.sla-over { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--inkt); color: #fff; border-radius: 6px; }
.sla-over:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.blok { padding-block: clamp(56px, 8vw, 104px); }
.band { background: var(--band); }
.blok-kop { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 44em; }
.blok-kop p { margin: 0; color: var(--zacht); font-size: 1.2rem; }
.tekst-link { font-weight: 700; }

/* ---------- knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px;
  border: 2px solid var(--inkt); border-radius: 999px; font: inherit; font-weight: 700; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.knop-vol { background: var(--inkt); color: #fff; }
.knop-vol:hover { background: #0A1640; color: #fff; }
.knop-lijn { background: transparent; color: var(--inkt); }
.knop-lijn:hover { background: var(--inkt); color: #fff; }
.knop-klein { min-height: 44px; padding: 8px 16px; }
.knop svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---------- kop ---------- */
.kop { position: sticky; top: 0; z-index: 50; height: var(--kop-h); background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--lijn); }
.kop-binnen { display: flex; align-items: center; gap: 12px; height: 100%; }
.kop-merk { display: flex; align-items: center; height: 100%; padding-block: 8px; color: var(--inkt); flex: none; }
.kop-merk .logo { display: block; height: 40px; width: auto; }
.kop-merk .logo-vol { display: none; }
.kop-nav { display: none; }
.kop-rechts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.kop-vragenlijst .lang { display: none; }
.menu-knop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--inkt); font: inherit; font-weight: 700; cursor: pointer; }
.menu-knop svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.menu-paneel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--lijn);
  box-shadow: 0 18px 30px -20px rgba(19, 35, 91, .45); }
.menu-paneel ul { display: grid; padding: 8px var(--rand) 16px; }
.menu-paneel a { display: block; padding: 12px 0; border-bottom: 1px solid var(--lijn); font-size: 1.2rem; font-weight: 700; text-decoration: none; }
.menu-paneel li:last-child a { border-bottom: 0; }
@media (min-width: 380px) { .kop-vragenlijst .lang { display: inline; } .kop-vragenlijst .kort { display: none; } }
@media (max-width: 379px) { .kop-binnen { gap: 6px; } .kop-merk .logo { height: 34px; } .kop-vragenlijst { padding: 8px 12px; } .kop-vragenlijst svg { display: none; } .kop-rechts { gap: 2px; } }
@media (min-width: 900px) {
  .kop-merk .logo { height: 50px; }
  .menu-knop, .menu-paneel { display: none !important; }
  .kop-nav { display: block; margin-left: auto; }
  .kop-nav ul { display: flex; gap: 4px; }
  .kop-nav a { display: block; padding: 10px 12px; border-radius: 8px; font-weight: 700; text-decoration: none; color: var(--inkt); }
  .kop-nav a:hover { background: var(--band); color: var(--inkt); }
  .kop-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--streep); text-decoration-thickness: 3px; text-underline-offset: 8px; }
  .kop-rechts { margin-left: 8px; }
}
@media (min-width: 1200px) { .kop-merk .logo-kort { display: none; } .kop-merk .logo-vol { display: block; height: 54px; } }

/* ---------- eerste scherm ---------- */
.held { padding-bottom: clamp(24px, 4vw, 48px); }
.held-raster { display: grid; }
.held-beeld { position: relative; margin-inline: calc(var(--rand) * -1); }
.held-beeld picture, .held-beeld img { display: block; width: 100%; }
.held-beeld img { height: clamp(180px, 41svh, 380px); object-fit: cover; object-position: var(--positie, 50% 30%); }
.naamkaartje { position: absolute; left: var(--rand); bottom: 14px; margin: 0; padding: 8px 14px 9px; background: #fff; color: var(--inkt);
  border-radius: 10px; line-height: 1.3; box-shadow: 0 6px 18px -8px rgba(19, 35, 91, .45); max-width: calc(100% - 2 * var(--rand)); }
.naamkaartje strong { display: block; font-size: 1.05rem; }
.naamkaartje span { display: block; font-size: 1rem; color: var(--zacht); }
.held-tekst { padding-top: 20px; }
.held h1 { margin-bottom: 12px; }
.held-regel { max-width: 30em; font-size: 1.2rem; color: var(--tekst); margin-bottom: 18px; }
.held-regel .kort { display: none; }
.held .knoppen .knop { flex: 1 1 220px; }
.held-controle { margin: 22px 0 0; color: var(--zacht); font-size: 1rem; max-width: 34em; }
@media (max-width: 899px) {
  .held-regel:has(.kort:not(:empty)) .lang { display: none; }
  .held-regel .kort:not(:empty) { display: inline; }
}
@media (max-width: 899px) and (max-height: 600px) { .held-beeld img { height: clamp(180px, 34svh, 260px); } }
@media (min-width: 900px) {
  .held { padding-top: 32px; padding-bottom: 24px; }
  .held-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
  .held-tekst { padding-top: 0; order: -1; }
  .held-beeld { margin-inline: 0; }
  .held-beeld img { height: clamp(340px, 50vh, 500px); border-radius: 18px; }
  .naamkaartje { left: 18px; bottom: 18px; }
  .held .knoppen .knop { flex: 0 0 auto; }
  .held-sub .held-beeld img { height: clamp(300px, 46vh, 440px); }
  .held-team .held-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .held-team .held-beeld img { height: auto; aspect-ratio: 1436 / 518; }
}

/* ---------- de route: staafjes uit het logo ---------- */
.staafjes { display: block; width: 100%; height: 100%; overflow: hidden; }
.staafjes rect { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .js-beweging .groei .staafjes rect { animation: groei .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 18ms); }
}
@keyframes groei { from { transform: scaleY(.25); } }
.route { padding-block: clamp(20px, 3vw, 32px) clamp(56px, 8vw, 96px); }
.route > .wrap { display: flex; flex-direction: column; }
.route-kop { display: grid; gap: 10px; margin-bottom: 22px; order: -1; }
.route-kop p { margin: 0; color: var(--zacht); max-width: 40em; }
.route-rij { height: 72px; }
.route-nrs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 10px 0 26px; }
.route-nrs span { justify-self: start; }
.nr { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--inkt); border-radius: 50%;
  background: #fff; color: var(--inkt); font-weight: 800; font-size: 1.1rem; line-height: 1; }
.nr.nu { background: var(--streep); border-color: var(--streep); color: #fff; }
.route-stappen { display: grid; gap: 22px; counter-reset: stap; }
.route-stap { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.route-stap .nr { grid-row: span 3; }
.route-stap h3 { padding-top: 6px; }
.route-stap p { margin: 0; }
.stap-duur { display: inline-block; margin-top: 8px !important; padding: 4px 12px; border-radius: 8px; background: var(--streep); color: #fff; font-weight: 700; }
.route-daarna { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--lijn); max-width: 46em; }
@media (min-width: 760px) {
  .route-kop { order: 0; margin: 30px 0 4px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: end; }
  .route-rij { height: 104px; }
  .route-nrs { display: none; }
  .route-stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 18px; }
  .route-stap { grid-template-columns: minmax(0, 1fr); }
  .route-stap .nr { grid-row: auto; margin-bottom: 8px; }
  .route-stap h3 { padding-top: 0; }
}

/* ---------- dit bekijken we samen ---------- */
.samen-raster { display: grid; gap: 36px; }
.citaat { margin: 0; }
.citaat blockquote { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); line-height: 1.3; color: var(--inkt); }
.citaat figcaption { color: var(--zacht); font-size: 1rem; }
.citaat figcaption strong { color: var(--tekst); }
.punten { display: grid; gap: 0; border-top: 1px solid var(--lijn-sterk); }
.punt { padding: 14px 0; border-bottom: 1px solid var(--lijn-sterk); }
.punt-naam { display: block; font-weight: 800; color: var(--inkt); font-size: 1.2rem; }
.punt p { margin: 4px 0 0; color: var(--zacht); }
.punt-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.punt-links a { display: inline-block; padding-block: 4px; font-weight: 700; }
.klaar { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 28px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--lijn); border-radius: 14px; }
.klaar svg { width: 44px; height: 44px; fill: none; stroke: var(--streep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.klaar p { margin: 0; }
.klaar strong { color: var(--inkt); }
.klaar .bron { color: var(--zacht); font-size: 1rem; }
@media (min-width: 900px) {
  .samen-raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
  .punten { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* ---------- ervaringen ---------- */
.ervaringen-lijst { display: grid; gap: 40px; }
.ervaring { margin: 0; padding-top: 22px; border-top: 3px solid var(--inkt); }
.ervaring blockquote { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); line-height: 1.4; color: var(--inkt); }
.ervaring figcaption { font-size: 1rem; color: var(--zacht); }
.ervaring figcaption strong { display: block; font-size: 1.1rem; color: var(--tekst); }
@media (min-width: 900px) { .ervaringen-lijst { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- team (kort op de home, volledig op team.html) ---------- */
.mensen { display: grid; gap: 22px 32px; }
.mens { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; }
.mens-foto, .portret { display: block; border-radius: 50%; overflow: hidden; background: var(--band); aspect-ratio: 1; }
.mens-foto img, .portret img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mens h3 { font-size: 1.3rem; }
.mens-vak { margin: 2px 0 6px; font-weight: 700; color: var(--zacht); font-size: 1rem; }
.mens-zin { margin: 0; }
.blok-voet { margin-top: 36px; }
@media (min-width: 700px) { .mensen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .mensen { grid-template-columns: 1fr 1fr 1fr; } }

.team-lijst { display: grid; gap: 0; }
.teamlid { display: grid; gap: 18px; padding-block: 36px; border-top: 1px solid var(--lijn); }
.teamlid:first-child { border-top: 0; padding-top: 8px; }
.teamlid .portret { width: 160px; max-width: 100%; }
.teamlid h2 { font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem); }
.teamlid .mens-vak { font-size: 1.1rem; margin-bottom: 14px; }
.teamlid .verhaal { max-width: 40em; }
.foto-door { font-size: 1rem; color: var(--zacht); }
@media (min-width: 760px) {
  .teamlid { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .teamlid .portret { width: 200px; }
}

/* ---------- verenigingen (donker) ---------- */
.donker { background: var(--inkt); color: var(--op-donker); font-weight: 430; }
.donker h2, .donker h3 { color: #fff; font-weight: 520; }
.donker a { color: #fff; }
.donker a:hover { color: #F7B6D6; }
.donker .knop-vol { background: #fff; color: var(--inkt); border-color: #fff; }
.donker .knop-vol:hover { background: #F7B6D6; border-color: #F7B6D6; color: var(--inkt); }
.donker .blok-kop p { color: var(--zacht-donker); }
.ver-raster { display: grid; gap: 36px; }
.ver-tekst p { max-width: 38em; }
.feiten { display: grid; gap: 14px; margin: 0 0 30px; }
.feit { padding-left: 20px; border-left: 3px solid rgba(255, 255, 255, .35); }
.feit small { display: block; font-size: 1rem; color: var(--zacht-donker); }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin: 0 0 28px; }
.logos li { display: grid; place-items: center; height: 84px; padding: 12px; background: #fff; border-radius: 10px; }
.logos li.donker-logo { background: #0A1640; outline: 1px solid rgba(255, 255, 255, .25); }
.logos img { max-height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.logos-noot { font-size: 1rem; color: var(--zacht-donker); }
@media (min-width: 900px) { .ver-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; } }

/* ---------- kennisbank kort en volledig ---------- */
.zoek { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 640px; }
.zoek-rij > * { min-width: 0; }
.zoek input { width: 100%; }
.zoek label { font-weight: 800; color: var(--inkt); font-size: 1.15rem; }
.zoek-hulp { font-size: 1rem; color: var(--zacht); margin: 0; }
.zoek-rij { display: flex; gap: 8px; }
.zoek input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 10px 16px; border: 2px solid var(--lijn-sterk); border-radius: 12px;
  background: #fff; color: var(--tekst); font: inherit; }
.zoek input:focus-visible { border-color: var(--inkt); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid var(--lijn-sterk); border-radius: 999px;
  background: #fff; color: var(--inkt); font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--inkt); color: var(--inkt); }
.chip[aria-pressed="true"] { background: var(--streep); border-color: var(--streep); color: #fff; }
.chip .aantal { margin-left: 8px; font-weight: 700; }
.kb-teller { margin: 22px 0 0; font-weight: 700; color: var(--inkt); }
.kb-advies { margin-top: 14px; color: var(--zacht); font-size: 1rem; max-width: 46em; }
.onderwerp { padding-block: 36px; border-top: 1px solid var(--lijn); }
.onderwerp h2 { margin-bottom: 14px; font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem); }
.onderwerp-tekst { max-width: 42em; }
.onderwerp-tekst p { color: var(--tekst); }
.docs { display: grid; gap: 0; margin-top: 10px; border-top: 1px solid var(--lijn); }
.doc a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 14px 4px; border-bottom: 1px solid var(--lijn);
  text-decoration: none; color: var(--tekst); }
.doc a:hover { background: var(--band); color: var(--tekst); }
.doc a:hover .doc-titel { text-decoration: underline; }
.doc-soort { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 46px; border: 2px solid var(--inkt); border-radius: 4px 12px 4px 4px;
  color: var(--inkt); font-size: 1rem; font-weight: 800; line-height: 1; }
.doc-soort.pdf { border-color: #8E1F3A; color: #8E1F3A; }
.doc-soort.excel { border-color: #1D6B45; color: #1D6B45; }
.doc-titel { font-weight: 700; color: var(--inkt); overflow-wrap: anywhere; }
.doc-meta { color: var(--zacht); font-size: 1rem; }
.doc-label { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid var(--lijn-sterk); border-radius: 999px; font-weight: 700; }
.kb-leeg { padding: 22px; background: var(--band); border-radius: 12px; }
.kb-kort-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.kb-kort-raster > * { min-width: 0; }
.kb-kort-raster .chips { margin-top: 0; }
@media (min-width: 900px) { .kb-kort-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; } }

/* ---------- contact ---------- */
.contact-raster { display: grid; gap: 40px; }
.contact-gegevens { display: grid; gap: 18px; align-content: start; }
.tel-groot { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); font-weight: 800; text-decoration: none; color: var(--inkt); white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin: 0; padding: 6px 14px; border-radius: 999px;
  background: var(--band); color: var(--inkt); font-weight: 700; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--zacht); }
.status.is-open { background: var(--streep); color: #fff; }
.status.is-open::before { background: #fff; }
.contact-gegevens address { font-style: normal; }
.klein-grijs { color: var(--zacht); font-size: 1rem; }
.form { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); background: var(--band); border-radius: 18px; }
.veld { display: grid; gap: 6px; }
.veld label { font-weight: 800; color: var(--inkt); }
.veld .hulp { font-weight: 400; color: var(--zacht); font-size: 1rem; }
.veld input, .veld textarea { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--lijn-sterk); border-radius: 10px;
  background: #fff; color: var(--tekst); font: inherit; }
.veld textarea { min-height: 140px; resize: vertical; }
.veld input:focus-visible, .veld textarea:focus-visible { border-color: var(--inkt); outline-offset: 1px; }
.veld [aria-invalid="true"] { border-color: #A3123F; }
.fout { margin: 0; color: #A3123F; font-weight: 700; }
.form-hulp { margin: 0; color: var(--zacht); font-size: 1rem; }
@media (min-width: 900px) { .contact-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; } }

/* ---------- visitatie.html ---------- */
.pagina-kop { padding-block: clamp(36px, 6vw, 72px) clamp(16px, 3vw, 32px); }
.pagina-kop h1 { margin-bottom: 14px; }
.pagina-kop p { max-width: 40em; font-size: 1.2rem; }
.stap-blok { display: grid; gap: 18px; padding-block: 40px; border-top: 1px solid var(--lijn); }
.stap-rij { height: 64px; max-width: 280px; }
.stap-blok h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.6rem, 1.35rem + 1vw, 2.2rem); }
.stap-blok .nr { flex: none; }
.stap-inhoud { max-width: 42em; }
.film-zin { margin: 18px 0 0; padding-left: 18px; border-left: 3px solid var(--lijn-sterk); font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; color: var(--inkt); }
.film-zin small { display: block; margin-top: 6px; font-family: var(--letter); font-size: 1rem; color: var(--zacht); }
@media (min-width: 900px) {
  .stap-blok { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
  .stap-rij { align-self: start; margin-top: 4px; }
}
.vragenlijst-raster { display: grid; gap: 28px; align-items: center; }
.vragenlijst-raster picture img { display: block; width: 100%; max-width: 770px; border: 1px solid var(--lijn); border-radius: 10px; }
@media (min-width: 900px) { .vragenlijst-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }
.film { position: relative; aspect-ratio: 16 / 9; max-width: 960px; border-radius: 16px; overflow: hidden; background: #DCEFF2; }
.film video, .film picture, .film img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-start { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
.film-start span { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 24px 12px 18px; border-radius: 999px;
  background: var(--inkt); color: #fff; font: inherit; font-weight: 800; box-shadow: 0 10px 30px -10px rgba(19, 35, 91, .7); }
.film-start svg { width: 26px; height: 26px; fill: #fff; }
.film-start:hover span { background: var(--streep); }
.film-noot { margin-top: 14px; color: var(--zacht); }

/* ---------- belbalk (gsm) ---------- */
.onderbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--lijn); transform: translateY(110%); transition: transform .25s ease; }
.onderbalk .knop { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; }
.onderbalk .knop:last-child { flex: 0 0 auto; }
@media (max-width: 399px) { .onderbalk .mail-woord { display: none; } .onderbalk .knop:last-child { width: 52px; padding: 8px; } }
.voorbij-held .onderbalk { transform: none; }
.bij-formulier .onderbalk { transform: translateY(110%); }
@media (min-width: 900px) { .onderbalk { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 64px; } }

/* ---------- voet ---------- */
.voet { background: var(--inkt); color: var(--op-donker); font-weight: 430; }
.voet a { color: #fff; }
.voet-lijn { height: 30px; background: #fff; }
.voet-lijn .staafjes { height: 30px; }
.voet-raster { display: grid; gap: 32px; padding-block: 48px 28px; }
.voet .logo { display: block; width: 230px; max-width: 100%; height: auto; color: #fff; }
.voet-leus { margin: 16px 0 0; max-width: 28em; color: var(--zacht-donker); }
.voet h2 { margin-bottom: 10px; color: #fff; font-family: var(--letter); font-size: 1.1rem; font-weight: 800; letter-spacing: 0; }
.voet ul { display: grid; gap: 2px; }
.voet li a { display: inline-block; padding-block: 5px; }
.voet address { font-style: normal; }
.voet-onder { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; padding-block: 20px 28px; border-top: 1px solid rgba(255, 255, 255, .2);
  color: var(--zacht-donker); font-size: 1rem; }
@media (min-width: 900px) { .voet-raster { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }