/* Walinco Funderingstechniek: stijl "ingenieursbureau" */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(lettertypes/plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url(lettertypes/plex-sans-400-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(lettertypes/plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(lettertypes/plex-sans-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(lettertypes/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(lettertypes/plex-mono-500.woff2) format("woff2"); }

:root {
  --ral5012: #3B83BD;          /* huiskleur, RAL 5012 lichtblauw */
  --blauw: #2A6797;            /* donkerder variant voor tekst en knoppen (leesbaarheid) */
  --blauw-licht: #EAF2F9;
  --inkt: #14212E;
  --tekst: #34424F;
  --grijs: #5E6B78;
  --lijn: #DCE3EA;
  --vlak: #F4F7FA;
  --wit: #FFFFFF;
  --breed: 1200px;
  --sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wit); color: var(--tekst); font: 400 16px/1.7 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blauw); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--inkt); }
h1, h2, h3 { color: var(--inkt); line-height: 1.2; margin: 0; font-weight: 500; }
h1 { font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -0.01em; }
h2 { font-size: 24px; margin: 44px 0 14px; }
h3 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
p { margin: 0 0 16px; }
strong { font-weight: 600; color: var(--inkt); }
.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.label { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blauw); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- kop ---------- */
.talen { border-bottom: 1px solid var(--lijn); font: 400 12px/1 var(--mono); }
.talen .wrap { display: flex; justify-content: flex-end; gap: 4px; }
.talen a { display: inline-block; padding: 8px 8px; color: var(--grijs); text-decoration: none; letter-spacing: .06em; }
.talen a:hover { color: var(--blauw); }
.talen a[aria-current] { color: var(--blauw); font-weight: 500; box-shadow: inset 0 -2px var(--ral5012); }
.kop { border-bottom: 1px solid var(--lijn); background: var(--wit); position: sticky; top: 0; z-index: 10; }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.kop .merk { display: block; width: 218px; flex: none; }
.logo { display: block; width: 100%; height: auto; }
.menu { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 10px 12px; color: var(--inkt); text-decoration: none; font-size: 15px; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--blauw); }
.menu a[aria-current] { color: var(--blauw); border-bottom-color: var(--ral5012); }
.menuknop { display: none; background: none; border: 1px solid var(--lijn); color: var(--inkt); font: 500 14px var(--sans); padding: 8px 12px; cursor: pointer; }

/* ---------- paginakop ---------- */
.paginakop { background: var(--vlak); border-bottom: 1px solid var(--lijn); padding: 44px 0 40px; }
.paginakop .label { margin-bottom: 14px; }
.paginakop .sub { margin: 12px 0 0; color: var(--grijs); font-size: 18px; }
.kruimel { font-size: 13px; color: var(--grijs); margin-bottom: 18px; }
.kruimel a { color: var(--grijs); }
.archiefmelding { margin-top: 20px; display: inline-block; background: var(--wit); border: 1px solid var(--lijn); border-left: 3px solid var(--ral5012); padding: 10px 14px; font-size: 14px; color: var(--tekst); }

/* ---------- inhoud ---------- */
.inhoud { display: grid; grid-template-columns: 230px minmax(0, 1fr) 340px; gap: 48px; padding: 48px 24px 72px; }
.inhoud.zonder-zij { grid-template-columns: 230px minmax(0, 1fr); }
.inhoud.smal { grid-template-columns: minmax(0, 760px); justify-content: center; }
.tekst { max-width: 760px; }
.tekst > h2:first-child, .tekst > h3:first-child { margin-top: 0; }
.tekst ul, .tekst ol { margin: 0 0 20px; padding: 0; list-style: none; border-top: 1px solid var(--lijn); }
.tekst li { padding: 9px 0 9px 22px; border-bottom: 1px solid var(--lijn); position: relative; }
.tekst ul > li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 2px; background: var(--ral5012); }
.tekst ol { counter-reset: n; }
.tekst ol > li::before { counter-increment: n; content: counter(n) "."; position: absolute; left: 0; color: var(--blauw); font: 500 13px/1.9 var(--mono); }
.tekst li ul { border-top: 0; margin: 6px 0 0; }
.tekst li li { border-bottom: 0; padding: 3px 0 3px 18px; }
.tekst li li::before { top: 14px; width: 6px; background: var(--grijs); }
.tabel { overflow-x: auto; margin: 4px 0 24px; border: 1px solid var(--lijn); }
.tabel table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tabel td, .tabel th { border: 1px solid var(--lijn); padding: 7px 10px; text-align: left; vertical-align: top; }
.tabel th { background: var(--vlak); color: var(--inkt); font-weight: 500; }
.tabel td { font-variant-numeric: tabular-nums; }
.tabel th.enkel { white-space: nowrap; }
.voetnoot { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 13px; color: var(--grijs); }
.garantie { background: var(--blauw-licht); border-left: 3px solid var(--ral5012); padding: 14px 18px; margin: 28px 0 0; font-size: 15px; }
.garantie p { margin: 0; }

/* zijnavigatie */
.zijnav { font-size: 14px; }
.zijnav .groep { margin-bottom: 26px; }
.zijnav .label { display: block; padding-bottom: 8px; border-bottom: 1px solid var(--lijn); }
.zijnav ul { list-style: none; margin: 0; padding: 0; }
.zijnav a { display: block; padding: 7px 0 7px 12px; color: var(--tekst); text-decoration: none; border-left: 2px solid transparent; border-bottom: 1px solid var(--lijn); }
.zijnav a:hover { color: var(--blauw); }
.zijnav a[aria-current] { color: var(--blauw); border-left-color: var(--ral5012); font-weight: 500; }

/* fotokolom */
.fotos { display: grid; gap: 16px; align-content: start; }
.fotos figure { margin: 0; border: 1px solid var(--lijn); background: var(--wit); }
.fotos a { display: block; }
.fotos img { margin: 0 auto; max-height: 520px; width: auto; }
.fotos figcaption { padding: 8px 12px; font-size: 13px; color: var(--grijs); border-top: 1px solid var(--lijn); }

/* ---------- startpagina ---------- */
.held { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); border-bottom: 1px solid var(--lijn); }
.held .tekstdeel { padding: 44px 56px 40px max(24px, calc((100vw - var(--breed)) / 2 + 24px)); }
.held h1 { margin: 14px 0 16px; max-width: 26ch; font-size: clamp(28px, 3.4vw, 40px); }
.held p { font-size: 17px; max-width: 68ch; }
.held .beeld { background: var(--vlak) center / cover no-repeat; min-height: 300px; border-left: 1px solid var(--lijn); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.knop { display: inline-block; padding: 12px 20px; font: 500 15px/1.2 var(--sans); text-decoration: none; border: 1px solid var(--blauw); }
.knop.vol { background: var(--blauw); color: #fff; }
.knop.vol:hover { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.knop.lijn { color: var(--blauw); }
.knop.lijn:hover { background: var(--blauw-licht); color: var(--blauw); }
/* WhatsApp: officieel groen beeldmerk */
.wa-icoon { width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: .35em; color: #25D366; }
.wa-tekst { white-space: nowrap; }
/* social media (sociaal.py): voettekst, contact- en bedrijfspagina */
.sociaal { display: flex; gap: 14px; align-items: center; }
.sociaal a { display: inline-flex; color: var(--tekst); }
.sociaal a:hover { color: var(--blauw); }
.sociaal svg { width: 22px; height: 22px; }
.voet .sociaal { margin-top: 12px; }
.knop.wa { display: inline-flex; align-items: center; color: #fff; background: #25D366; border-color: #25D366; }
.knop.wa .wa-icoon { color: #fff; width: 20px; height: 20px; vertical-align: 0; }
.knop.wa:hover { background: #128C7E; border-color: #128C7E; color: #fff; }
.blok { padding: 64px 0; border-bottom: 1px solid var(--lijn); }
.blok > .wrap > .label { margin-bottom: 12px; }
.blok h2 { margin: 0 0 28px; font-size: 30px; }
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lijn); border-left: 1px solid var(--lijn); }
.cel { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 26px 26px 22px; }
.cel h3 { margin: 0 0 12px; font-size: 18px; font-weight: 500; }
.cel ul { list-style: none; margin: 0; padding: 0; }
.cel li { border-top: 1px solid var(--lijn); }
.cel li a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; text-decoration: none; color: var(--tekst); }
.cel li a:hover { color: var(--blauw); }
.cel .omschr { font-size: 14px; color: var(--grijs); margin: 0 0 14px; }
.regel { font-size: 18px; max-width: 70ch; }
.aanvraag { border: 1px solid var(--lijn); border-left: 4px solid var(--ral5012); background: var(--blauw-licht); padding: 18px 22px; margin: 0 0 28px; }
.aanvraag p { margin: 0; }
.aanvraag .adres { font-size: 22px; font-weight: 500; margin: 4px 0 10px; }
.aanvraag .knoppen { margin: 14px 0 6px; }
.aanvraag .knoppen + p { font-size: 14px; color: var(--grijs); margin-bottom: 10px; }
.letters { font: 500 15px/2 var(--mono); }
.letters a { text-decoration: none; padding: 0 2px; }
.woorden { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.woorden dt { font-weight: 600; color: var(--inkt); scroll-margin-top: 90px; }
.woorden dd { margin: 4px 0 0; }
.woorden dt:target { color: var(--blauw); }
.tekst h2[id^="letter-"] { margin: 32px 0 4px; color: var(--ral5012); font-family: var(--mono); scroll-margin-top: 90px; }
.bekend {font-size: 15px; color: var(--grijs); border-left: 3px solid var(--ral5012); padding-left: 12px; }
.contactstrook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.contactstrook .label { display: block; margin-bottom: 8px; }
.contactstrook p { margin: 0; font-size: 17px; }

/* overzichtskaarten */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); border-top: 1px solid var(--lijn); border-left: 1px solid var(--lijn); margin-bottom: 40px; }
.kaart { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 20px 22px; text-decoration: none; color: var(--tekst); display: block; }
.kaart:hover { background: var(--vlak); }
.kaart strong { display: block; color: var(--inkt); font-weight: 500; margin-bottom: 6px; }
.kaart span { font-size: 14px; color: var(--grijs); display: block; }
.kaart .picto { display: block; width: 44px; height: 44px; margin-bottom: 12px; color: var(--ral5012); }
.kaart:hover .picto { color: var(--blauw); }
.kaart .nr { font: 500 12px var(--mono); color: var(--blauw); margin-bottom: 10px; }

/* referenties */
.projecten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin: 8px 0 40px; }
.projecten figure { margin: 0; border: 1px solid var(--lijn); }
.projecten img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.projecten figcaption { padding: 10px 12px; font-size: 14px; }
.projecten figcaption strong { display: block; }
.namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); border-top: 1px solid var(--lijn); border-left: 1px solid var(--lijn); margin: 0 0 32px; padding: 0; list-style: none; }
.tekst .namen li::before, .tekst .archief > li::before { content: none; }
.tekst .archief > li { padding-left: 0; }
.namen li { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 12px 14px; color: var(--inkt); }

/* archief */
.archief { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.archief > li { padding: 22px 0; border-bottom: 1px solid var(--lijn); }
.archief p { margin: 0 0 12px; }
.duimen { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.duimen a { display: block; border: 1px solid var(--lijn); }
.duimen img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.films video { display: block; max-width: 560px; height: auto; margin: 8px 0 4px; background: var(--inkt); }
.nogniet {font: 500 12px var(--mono); color: #8A5A00; background: #FFF4DC; padding: 2px 8px; }

/* gegevenslijst */
.gegevens { display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid var(--lijn); margin: 0 0 32px; }
.gegevens dt, .gegevens dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.gegevens dt { color: var(--grijs); font-size: 14px; }

/* ---------- paaltekening ---------- */
.paaltekening { display: block; width: 100%; height: auto; background: var(--wit); }
.paaltekening .t-laag { font: italic 400 14px var(--sans); fill: var(--grijs); }
.paaltekening .t-label { font: 400 15px var(--sans); fill: var(--inkt); }
.paaltekening .t-kop { font: 500 10px var(--mono); fill: #fff; letter-spacing: .04em; }
.paaltekening .t-stap { font: 500 15px var(--sans); fill: var(--inkt); }
figure.tekening { margin: 0 0 8px; border: 1px solid var(--lijn); }
/* Onder de pagina, over de volle breedte: de doorsnede en daarnaast één vak (.wissel) waarin rechte paal en
   schoorpaal om de beurt spelen (beide 720 × 680). De kolommen gaan naar verhouding van de tekeningen, zodat
   de grondlagen (400 hoog; bij de doorsnede 430, die staat daarom 400/430 kleiner: 420 × 400/430 ≈ 391) even
   groot zijn. De tekeningen staan onderaan hun vak (subgrid), dus maaiveld en onderkant liggen op één lijn;
   de onderschriften staan in een eigen rij (zonder kop erboven). Het wisselen doet beweging.js (alleen met .scrolt); zonder
   staan beide animaties onder elkaar. */
.onderblok { padding-bottom: 56px; }
.onderblok h2 { margin-top: 0; }
.tekeningen { display: grid; grid-template-columns: 391fr 720fr; grid-template-rows: auto auto; gap: 0 20px; margin-bottom: 20px; }
.tekeningen > figure.tekening { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; background: var(--wit); }
.tekeningen > figure.tekening > svg, .tekeningen > figure.tekening > .vak { align-self: end; }
.wissel figcaption > span { display: block; }
.scrolt .wissel .vak > svg:not(.aan), .scrolt .wissel figcaption > span:not(.aan) { display: none; }
@media (max-width: 700px) {
  .tekeningen { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tekeningen > figure.tekening { display: block; grid-row: auto; }
}
figure.tekening figcaption { padding: 8px 12px; font-size: 13px; color: var(--grijs); border-top: 1px solid var(--lijn); }
/* startpagina: bewegende paal links; zelfde kolommen als de openingsfoto: de diensten staan recht onder de foto */
.vacature { background: var(--blauw-licht); border-top: 3px solid var(--ral5012); }
.vacature .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.vacature p { margin: 6px 0 0; font-size: 19px; color: var(--inkt); }
.startblok { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.startblok > figure.tekening { max-width: 460px; margin: 28px 56px 56px max(24px, calc((100vw - var(--breed)) / 2 + 24px)); }
.startblok .dienstkolom { padding: 28px 40px 56px; }
.startblok h2 { margin-top: 10px; }
.startblok .kolom { border-top: 1px solid var(--lijn); }
.startblok .kolom .cel { border: 0; border-bottom: 1px solid var(--lijn); padding: 20px 0 16px; }
.startblok .kolom .cel h3 { margin-bottom: 8px; }
.uitleg { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; align-items: center; }
.uitleg ol { padding-left: 20px; margin: 0 0 20px; }
.uitleg li { margin-bottom: 8px; }

/* Beweging van de paaltekening: de regels en sleutelmomenten worden bij het bouwen achter dit bestand
   gezet (tekening.keyframes()). Zonder beweging is de eindtoestand zichtbaar. */
.paaltekening .t-nr { font: 500 40px var(--mono); fill: var(--ral5012); }
.anim .t-stap { font-size: 19px; }
/* ---------- referentieband ---------- */
.band { overflow: hidden; border-bottom: 1px solid var(--lijn); background: var(--wit); }
.band .spoor { display: flex; width: max-content; animation: band 140s linear infinite; }
.band:hover .spoor, .band:focus-within .spoor { animation-play-state: paused; }
.band ul { display: flex; list-style: none; margin: 0; padding: 0; }
.band li { padding: 16px 0; white-space: nowrap; font-size: 17px; color: var(--inkt); }
.band li::after { content: "·"; color: var(--ral5012); margin: 0 22px; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- wisselende openingsfoto ---------- */
.held .beeld { position: relative; overflow: hidden; }
.held .dia { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; animation: dia 24s ease-in-out infinite; }
.held .dia:nth-child(1) { opacity: 1; }
.held .dia:nth-child(2) { animation-delay: 6s; }
.held .dia:nth-child(3) { animation-delay: 12s; }
.held .dia:nth-child(4) { animation-delay: 18s; }
.held .dia span { position: absolute; left: 0; bottom: 0; background: rgba(20, 33, 46, .78); color: #fff; font-size: 13px; padding: 6px 12px; }
@keyframes dia { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }

/* ---------- fotoviewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(12, 20, 28, .92); display: none; align-items: center; justify-content: center; padding: 56px 64px; }
.viewer.open { display: flex; }
.viewer figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.viewer img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; background: #fff; }
.viewer figcaption { color: #DCE3EA; font-size: 14px; margin-top: 12px; text-align: center; max-width: 70ch; }
.viewer button { position: absolute; background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff; font: 400 22px/1 var(--sans); width: 44px; height: 44px; cursor: pointer; }
.viewer button:hover { background: rgba(255, 255, 255, .12); }
.viewer .sluit { top: 12px; right: 12px; }
.viewer .vorige { left: 12px; top: 50%; }
.viewer .volgende { right: 12px; top: 50%; }
.viewer .teller { position: absolute; top: 22px; left: 16px; color: #9AA6B2; font: 400 13px var(--mono); }

/* GSAP (beweging.js): bovenkant kort verborgen tot beweging.js hem laat verschijnen */
.gs .held .label, .gs .held h1, .gs .held .tekstdeel > p, .gs .held .knop, .gs .held .beeld,
.gs .paginakop .wrap > * { visibility: hidden; }
.held .dia-foto { position: absolute; inset: 0; background: center / cover no-repeat; }
/* "scrolt" en "klein" zet beweging.js: foto ruimer voor de diepte, kopbalk wordt compacter.
   De marge onder de kopbalk groeit even veel als hij krimpt, zodat de pagina niet verspringt. */
.scrolt .held .dia-foto { inset: -12% 0; }
/* kleur bij laden van de startpagina: lijn onder de kopbalk en streep onder de titel (getekend door beweging.js) */
.laadlijn { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ral5012); transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* lichte doorsnede van grondlagen achter de bovenkant, vaagt weg na het laden (beweging.js) */
.scrolt .held, .scrolt .paginakop { position: relative; }
.scrolt .held > *, .scrolt .paginakop > * { position: relative; z-index: 1; }
.scrolt .held > .grond, .scrolt .paginakop > .grond { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(afbeeldingen/grondlagen-index.svg) center top / cover no-repeat; }  /* per afdeling: zie beweging.js */
.scrolt .held h1 { --streep: 0; }
.scrolt .held h1::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 16px; background: var(--ral5012); transform: scaleX(var(--streep)); transform-origin: left; }
.kop { transition: box-shadow .3s, margin-bottom .3s ease; }
.kop .wrap { transition: min-height .3s ease; }
.kop .merk { transition: width .3s ease; }
.klein .kop { box-shadow: 0 4px 18px rgba(20, 33, 46, .12); margin-bottom: 20px; }
.klein .kop .wrap { min-height: 64px; }
.klein .kop .merk { width: 176px; }
@media (max-width: 900px) {
  .klein .kop { margin-bottom: 12px; }
  .klein .kop .wrap { min-height: 58px; }
  .klein .kop .merk { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .anim *, .anim .a-scene, .band .spoor, .held .dia { animation: none !important; }
  .band { overflow-x: auto; }
}

/* ---------- voet ---------- */
.voet { background: var(--vlak); border-top: 1px solid var(--lijn); font-size: 14px; }
.voet .kolommen { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-top: 48px; padding-bottom: 40px; }
.voet .logo { width: 190px; margin-bottom: 16px; }
.voet .label { display: block; margin-bottom: 10px; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { padding: 3px 0; }
.voet a { color: var(--tekst); text-decoration: none; }
.voet a:hover { color: var(--blauw); text-decoration: underline; }
.voet .onder { border-top: 1px solid var(--lijn); padding: 16px 0; color: var(--grijs); font-size: 13px; }
.voet .onder .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- smalle schermen ---------- */
@media (max-width: 1100px) {
  .inhoud { grid-template-columns: minmax(0, 1fr) 300px; }
  .inhoud .zijnav { grid-column: 1 / -1; order: 3; }
  .inhoud.zonder-zij { grid-template-columns: minmax(0, 1fr); }
  .menu a { padding: 10px 8px; font-size: 14px; }
}
@media (max-width: 900px) {
  .menuknop { display: block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--wit); border-bottom: 1px solid var(--lijn); padding: 8px 24px 16px; }
  .menu.open { display: flex; }
  .menu a { border-bottom: 1px solid var(--lijn); padding: 12px 0; font-size: 16px; }
  .kop .wrap { position: relative; min-height: 70px; }
  .kop .merk { width: 180px; }
  .held { grid-template-columns: 1fr; }
  .held .tekstdeel { padding: 48px 24px; }
  .held .beeld { min-height: 240px; border-left: 0; border-top: 1px solid var(--lijn); }
  .raster, .contactstrook, .uitleg, .startblok { grid-template-columns: 1fr; }
  .startblok > figure.tekening { margin: 24px; }
  .startblok .dienstkolom { padding: 0 24px 48px; }
  .viewer { padding: 56px 8px; }
  .viewer .vorige, .viewer .volgende { top: auto; bottom: 12px; }
  .inhoud { grid-template-columns: minmax(0, 1fr); padding-top: 32px; gap: 32px; }
  .voet .kolommen { grid-template-columns: 1fr 1fr; }
  .gegevens { grid-template-columns: 1fr; }
  .gegevens dt { border-bottom: 0; padding-bottom: 0; }
}
.belbalk { display: none; }
@media (max-width: 700px) {
  .belbalk { display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
             background: var(--blauw); border-top: 1px solid var(--inkt); padding-bottom: env(safe-area-inset-bottom); }
  .belbalk a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; color: #fff;
               text-decoration: none; font: 500 16px/1 var(--sans); }
  .belbalk a + a { border-left: 1px solid rgba(255, 255, 255, .35); }
  .belbalk a:active { background: var(--inkt); }
  .belbalk svg { width: 20px; height: 20px; }
  .belbalk a.wa { background: #25D366; color: #fff; }
  .belbalk a.wa:active { background: #128C7E; }
  .belbalk a.wa .wa-icoon { color: #fff; }
  body { padding-bottom: 52px; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .inhoud { padding-left: 16px; padding-right: 16px; }
  .voet .kolommen { grid-template-columns: 1fr; }
  .talen .wrap { justify-content: center; }
}
@media print {
  .talen, .kop .menu, .menuknop, .zijnav, .voet, .belbalk { display: none; }
  .kop { position: static; }
  .inhoud { display: block; }
}

@keyframes a-scene{0%,100%{opacity:1}}
@keyframes a-rij{0%{transform:translateX(640px)}9%{transform:translateX(0px)}79%{transform:translateX(0px)}93%{transform:translateX(640px)}100%{transform:translateX(640px)}}
@keyframes a-piket{0%{opacity:0}2%,21%{opacity:1}21.3%,100%{opacity:0}}
@keyframes a-deel1{0%,14%{opacity:0;transform:translate(70px,-380px)}19%,19%{opacity:1;transform:translate(0,-380px)}21%,21%{opacity:1;transform:translateY(-360px)}41%,55%{opacity:1;transform:translateY(-193px)}75%,100%{opacity:1;transform:translateY(0px)}}
@keyframes a-deel2{0%,47%{opacity:0;transform:translate(70px,-193px)}52%,55%{opacity:1;transform:translate(0,-193px)}75%,100%{opacity:1;transform:translateY(0px)}}
@keyframes a-kop{0%{transform:translateY(-30px)}9%{transform:translateY(-30px)}14%{transform:translateY(-202px)}19%{transform:translateY(-202px)}21%{transform:translateY(-182px)}21%{transform:translateY(-182px)}41%{transform:translateY(-15px)}41%{transform:translateY(-15px)}47%{transform:translateY(-193px)}55%{transform:translateY(-193px)}75%{transform:translateY(0px)}75%{transform:translateY(0px)}78%{transform:translateY(-30px)}100%{transform:translateY(-30px)}}
@keyframes a-kabel{0%{transform:scaleY(0.8592)}9%{transform:scaleY(0.8592)}14%{transform:scaleY(0.0516)}19%{transform:scaleY(0.0516)}21%{transform:scaleY(0.1455)}21%{transform:scaleY(0.1455)}41%{transform:scaleY(0.9296)}41%{transform:scaleY(0.9296)}47%{transform:scaleY(0.0939)}55%{transform:scaleY(0.0939)}75%{transform:scaleY(1.0000)}75%{transform:scaleY(1.0000)}78%{transform:scaleY(0.8592)}100%{transform:scaleY(0.8592)}}
@keyframes a-lier{0%{transform:rotate(-156.3deg)}9%{transform:rotate(-156.3deg)}14%{transform:rotate(-1052.2deg)}19%{transform:rotate(-1052.2deg)}21%{transform:rotate(-948.0deg)}21%{transform:rotate(-948.0deg)}41%{transform:rotate(-78.1deg)}41%{transform:rotate(-78.1deg)}47%{transform:rotate(-1005.3deg)}55%{transform:rotate(-1005.3deg)}75%{transform:rotate(0.0deg)}75%{transform:rotate(0.0deg)}78%{transform:rotate(-156.3deg)}100%{transform:rotate(-156.3deg)}}
@keyframes a-grout{0%,21%{transform:scaleY(0)}41%,55%{transform:scaleY(0.835)}58.4%,100%{transform:scaleY(1)}}
@keyframes a-voet{0%,58.4%{transform:scaleY(0)}75%,100%{transform:scaleY(1)}}
@keyframes a-tus{0%,35.0%{transform:scaleY(0)}39.0%,100%{transform:scaleY(1)}}
@keyframes a-wolk{0%,21%{opacity:0;transform:scaleX(.58)}21.3%,35.0%{opacity:1;transform:scaleX(.58)}35.3%,39.0%{opacity:1;transform:scaleX(1)}39.3%,58.4%{opacity:1;transform:scaleX(.58)}58.9%,75%{opacity:1;transform:scaleX(1)}78%,100%{opacity:0;transform:scaleX(1)}}
@keyframes a-strepen{0%{transform:translateX(0px)}21%{transform:translateX(0px)}41%{transform:translateX(-264px)}55%{transform:translateX(-264px)}75%{transform:translateX(-528px)}100%{transform:translateX(-528px)}}
@keyframes a-stap1{0%,9%{opacity:0}10%,40%{opacity:1}41%,100%{opacity:0}}
@keyframes a-stap2{0%,41%{opacity:0}42%,54%{opacity:1}55%,100%{opacity:0}}
@keyframes a-stap3{0%,54%{opacity:0}55%,75%{opacity:1}76%,100%{opacity:0}}
@keyframes a-blad{0%{transform:scaleX(1)}21%{transform:scaleX(1)}23%{transform:scaleX(-1)}25%{transform:scaleX(1)}27%{transform:scaleX(-1)}29%{transform:scaleX(1)}31%{transform:scaleX(-1)}33%{transform:scaleX(1)}35%{transform:scaleX(-1)}37%{transform:scaleX(1)}39%{transform:scaleX(-1)}41%{transform:scaleX(1)}55%{transform:scaleX(1)}57%{transform:scaleX(-1)}59%{transform:scaleX(1)}61%{transform:scaleX(-1)}63%{transform:scaleX(1)}65%{transform:scaleX(-1)}67%{transform:scaleX(1)}69%{transform:scaleX(-1)}71%{transform:scaleX(1)}73%{transform:scaleX(-1)}75%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.anim .a-scene{animation:a-scene 34s linear infinite}
.anim .a-rij{animation:a-rij 34s linear infinite}
.anim .a-deel1{animation:a-deel1 34s linear infinite}
.anim .a-deel2{animation:a-deel2 34s linear infinite}
.anim .a-kop{animation:a-kop 34s linear infinite}
.anim .a-strepen{animation:a-strepen 34s linear infinite}
.anim .a-lier{transform-box:fill-box;transform-origin:50% 50%;animation:a-lier 34s linear infinite}
.anim .a-kabel{transform-box:fill-box;transform-origin:50% 0;animation:a-kabel 34s linear infinite}
.anim .a-grout{transform-box:fill-box;transform-origin:50% 0;animation:a-grout 34s linear infinite}
.anim .a-voet{transform-box:fill-box;transform-origin:50% 0;animation:a-voet 34s linear infinite}
.anim .a-tus{transform-box:fill-box;transform-origin:50% 0;animation:a-tus 34s linear infinite}
.anim .a-blad{transform-box:fill-box;transform-origin:50% 50%;animation:a-blad 34s ease-in-out infinite}
.anim .a-wolk{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:a-wolk 34s linear infinite}
.anim .a-piket{opacity:0;animation:a-piket 34s linear infinite}
.anim .a-stap1{opacity:0;animation:a-stap1 34s linear infinite}
.anim .a-stap2{opacity:0;animation:a-stap2 34s linear infinite}
.anim .a-stap3{opacity:0;animation:a-stap3 34s linear infinite}
@keyframes a-scene-alleen{0%{opacity:0}2%,95%{opacity:1}99%,100%{opacity:0}}
@keyframes a-rij-alleen{0%{transform:translateX(640px)}9%{transform:translateX(0px)}78%{transform:translateX(0px)}84%{transform:translateX(80px)}100%{transform:translateX(80px)}}
@keyframes a-kopplaat-alleen{0%,84%{opacity:0;transform:translateY(-40px)}84.5%{opacity:1;transform:translateY(-40px)}87%,100%{opacity:1;transform:translateY(0px)}}
@keyframes a-staaf-alleen{0%,87%{opacity:0;transform:translateY(-130px)}87.5%{opacity:1;transform:translateY(-130px)}92%,100%{opacity:1;transform:translateY(0px)}}
@keyframes a-stap4-alleen{0%,75%{opacity:0}76%,92%{opacity:1}93%,100%{opacity:0}}
@keyframes a-stap5-alleen{0%,92%{opacity:0}93%,100%{opacity:1}}
.anim.alleen .a-scene{animation:a-scene-alleen 34s linear infinite}
.anim.alleen .a-rij{animation:a-rij-alleen 34s linear infinite}
.anim.alleen .a-kopplaat{animation:a-kopplaat-alleen 34s linear infinite}
.anim.alleen .a-staaf{animation:a-staaf-alleen 34s linear infinite}
.anim.alleen .a-stap4{opacity:0;animation:a-stap4-alleen 34s linear infinite}
.anim.alleen .a-stap5{animation:a-stap5-alleen 34s linear infinite}
@media (prefers-reduced-motion: reduce){.anim .a-rij{transform:translateX(80px)}.anim .a-kop{transform:translateY(-30px)}.anim .a-kabel{transform:scaleY(0.8592)}.anim .a-lier{transform:rotate(-156.3deg)}}
@keyframes s-scene{0%,95%{opacity:1}99%,100%{opacity:0}}
@keyframes s-rij{0%{transform:translateX(330px)}8%{transform:translateX(0px)}85%{transform:translateX(0px)}90%{transform:translateX(330px)}100%{transform:translateX(330px)}}
@keyframes s-piket{0%{opacity:0}2%,18%{opacity:1}18.3%,100%{opacity:0}}
@keyframes s-deel1{0%,12%{opacity:0;transform:translate(-77.07px,-531.07px)}16%,16%{opacity:1;transform:translate(-7.07px,-531.07px)}18%,18%{opacity:1;transform:translateY(-504px)}32%,42%{opacity:1;transform:translateY(-349px)}56%,66%{opacity:1;transform:translateY(-182px)}80%,100%{opacity:1;transform:translateY(0px)}}
@keyframes s-deel2{0%,36%{opacity:0;transform:translate(-70px,-349px)}40%,42%{opacity:1;transform:translate(0,-349px)}56%,66%{opacity:1;transform:translateY(-182px)}80%,100%{opacity:1;transform:translateY(0px)}}
@keyframes s-deel3{0%,60%{opacity:0;transform:translate(-70px,-182px)}64%,66%{opacity:1;transform:translate(0,-182px)}80%,100%{opacity:1;transform:translateY(0px)}}
@keyframes s-makelaar{0%{transform:translateY(-10px)}16%{transform:translateY(-10px)}18%{transform:translateY(0px)}83%{transform:translateY(0px)}85%{transform:translateY(-10px)}100%{transform:translateY(-10px)}}
@keyframes s-arm{0%{transform:skewY(8.81deg)}16%{transform:skewY(8.81deg)}18%{transform:skewY(0.00deg)}83%{transform:skewY(0.00deg)}85%{transform:skewY(8.81deg)}100%{transform:skewY(8.81deg)}}
.anim .s-arm{transform-box:fill-box;transform-origin:100% 0%;animation:s-arm 46s linear infinite}
@keyframes s-schoor{0%{transform:skewY(-72.89deg)}16%{transform:skewY(-72.89deg)}18%{transform:skewY(-0.00deg)}83%{transform:skewY(-0.00deg)}85%{transform:skewY(-72.89deg)}100%{transform:skewY(-72.89deg)}}
.anim .s-schoor{transform-box:fill-box;transform-origin:0% 100%;animation:s-schoor 46s linear infinite}
@keyframes s-achterkabel{0%{transform:skewY(-5.98deg)}16%{transform:skewY(-5.98deg)}18%{transform:skewY(-0.00deg)}83%{transform:skewY(-0.00deg)}85%{transform:skewY(-5.98deg)}100%{transform:skewY(-5.98deg)}}
.anim .s-achterkabel{transform-box:fill-box;transform-origin:0% 100%;animation:s-achterkabel 46s linear infinite}
@keyframes s-kop{0%{transform:translateY(-30px)}8%{transform:translateY(-30px)}12%{transform:translateY(-190px)}16%{transform:translateY(-190px)}18%{transform:translateY(-170px)}18%{transform:translateY(-170px)}32%{transform:translateY(-15px)}32%{transform:translateY(-15px)}36%{transform:translateY(-182px)}42%{transform:translateY(-182px)}56%{transform:translateY(-15px)}56%{transform:translateY(-15px)}60%{transform:translateY(-182px)}66%{transform:translateY(-182px)}80%{transform:translateY(0px)}80%{transform:translateY(0px)}83%{transform:translateY(-30px)}100%{transform:translateY(-30px)}}
@keyframes s-kabel{0%{transform:scaleY(0.8592)}8%{transform:scaleY(0.8592)}12%{transform:scaleY(0.1080)}16%{transform:scaleY(0.1080)}18%{transform:scaleY(0.2019)}18%{transform:scaleY(0.2019)}32%{transform:scaleY(0.9296)}32%{transform:scaleY(0.9296)}36%{transform:scaleY(0.1455)}42%{transform:scaleY(0.1455)}56%{transform:scaleY(0.9296)}56%{transform:scaleY(0.9296)}60%{transform:scaleY(0.1455)}66%{transform:scaleY(0.1455)}80%{transform:scaleY(1.0000)}80%{transform:scaleY(1.0000)}83%{transform:scaleY(0.8592)}100%{transform:scaleY(0.8592)}}
@keyframes s-lier{0%{transform:rotate(-156.3deg)}8%{transform:rotate(-156.3deg)}12%{transform:rotate(-989.7deg)}16%{transform:rotate(-989.7deg)}18%{transform:rotate(-885.5deg)}18%{transform:rotate(-885.5deg)}32%{transform:rotate(-78.1deg)}32%{transform:rotate(-78.1deg)}36%{transform:rotate(-948.0deg)}42%{transform:rotate(-948.0deg)}56%{transform:rotate(-78.1deg)}56%{transform:rotate(-78.1deg)}60%{transform:rotate(-948.0deg)}66%{transform:rotate(-948.0deg)}80%{transform:rotate(0.0deg)}80%{transform:rotate(0.0deg)}83%{transform:rotate(-156.3deg)}100%{transform:rotate(-156.3deg)}}
@keyframes s-grout{0%{transform:scaleY(0.0000)}18%{transform:scaleY(0.0000)}19%{transform:scaleY(0.0833)}32%{transform:scaleY(0.5434)}42%{transform:scaleY(0.5434)}53.97%{transform:scaleY(0.9998)}56%{transform:scaleY(1.0000)}66%{transform:scaleY(1.0000)}80%{transform:scaleY(1.0000)}100%{transform:scaleY(1.0000)}}
@keyframes s-tus{0%{transform:scaleY(0.0000)}18%{transform:scaleY(0.0000)}19%{transform:scaleY(0.0000)}30.6%{transform:scaleY(0.0004)}32%{transform:scaleY(0.1575)}42%{transform:scaleY(0.1575)}48.97%{transform:scaleY(1.0000)}56%{transform:scaleY(1.0000)}66%{transform:scaleY(1.0000)}80%{transform:scaleY(1.0000)}100%{transform:scaleY(1.0000)}}
@keyframes s-voet{0%{transform:scaleY(0.0000)}18%{transform:scaleY(0.0000)}19%{transform:scaleY(0.0000)}32%{transform:scaleY(0.0000)}42%{transform:scaleY(0.0000)}50.54%{transform:scaleY(0.0001)}56%{transform:scaleY(0.2574)}66%{transform:scaleY(0.2574)}80%{transform:scaleY(0.9763)}100%{transform:scaleY(0.9763)}}
@keyframes s-wolk{0%,18%{opacity:0;transform:scaleX(.58)}18.3%,42.88%{opacity:1;transform:scaleX(.58)}43.18%,46.79%{opacity:1;transform:scaleX(1)}47.09%,52.72%{opacity:1;transform:scaleX(.58)}53.22%,80%{opacity:1;transform:scaleX(1)}83%,100%{opacity:0;transform:scaleX(1)}}
@keyframes s-strepen{0%{transform:translateX(0px)}18%{transform:translateX(0px)}32%{transform:translateX(-264px)}42%{transform:translateX(-264px)}56%{transform:translateX(-528px)}66%{transform:translateX(-528px)}80%{transform:translateX(-792px)}100%{transform:translateX(-792px)}}
@keyframes s-kopplaat{0%,90%{opacity:0;transform:translateY(-40px)}90.5%{opacity:1;transform:translateY(-40px)}92%,100%{opacity:1;transform:translateY(0px)}}
@keyframes s-staaf{0%,92%{opacity:0;transform:translateY(-130px)}92.5%{opacity:1;transform:translateY(-130px)}95%,100%{opacity:1;transform:translateY(0px)}}
@keyframes s-rkopplaat{0%,90%{opacity:0;transform:translateY(-40px)}90.5%{opacity:1;transform:translateY(-40px)}92%,100%{opacity:1;transform:translateY(0px)}}
@keyframes s-rstaaf{0%,92%{opacity:0;transform:translateY(-130px)}92.5%{opacity:1;transform:translateY(-130px)}95%,100%{opacity:1;transform:translateY(0px)}}
@keyframes s-stap1{0%,8%{opacity:0}9%,31%{opacity:1}32%,100%{opacity:0}}
@keyframes s-stap2{0%,32%{opacity:0}33%,41%{opacity:1}42%,100%{opacity:0}}
@keyframes s-stap3{0%,41%{opacity:0}42%,56%{opacity:1}57%,100%{opacity:0}}
@keyframes s-stap4{0%,56%{opacity:0}57%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes s-stap5{0%,65%{opacity:0}66%,80%{opacity:1}81%,100%{opacity:0}}
@keyframes s-stap6{0%,80%{opacity:0}81%,95%{opacity:1}96%,100%{opacity:0}}
@keyframes s-stap7{0%,95%{opacity:0}96%,100%{opacity:1}}
@keyframes s-blad{0%{transform:scaleX(1)}18%{transform:scaleX(1)}20%{transform:scaleX(-1)}22%{transform:scaleX(1)}24%{transform:scaleX(-1)}26%{transform:scaleX(1)}28%{transform:scaleX(-1)}30%{transform:scaleX(1)}32%{transform:scaleX(1)}42%{transform:scaleX(1)}44%{transform:scaleX(-1)}46%{transform:scaleX(1)}48%{transform:scaleX(-1)}50%{transform:scaleX(1)}52%{transform:scaleX(-1)}54%{transform:scaleX(1)}56%{transform:scaleX(1)}66%{transform:scaleX(1)}68%{transform:scaleX(-1)}70%{transform:scaleX(1)}72%{transform:scaleX(-1)}74%{transform:scaleX(1)}76%{transform:scaleX(-1)}78%{transform:scaleX(1)}80%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.anim .s-scene{animation:s-scene 46s linear infinite}
.anim .s-rij{animation:s-rij 46s linear infinite}
.anim .s-makelaar{animation:s-makelaar 46s linear infinite}
.anim .s-deel1{animation:s-deel1 46s linear infinite}
.anim .s-deel2{animation:s-deel2 46s linear infinite}
.anim .s-deel3{animation:s-deel3 46s linear infinite}
.anim .s-kop{animation:s-kop 46s linear infinite}
.anim .s-strepen{animation:s-strepen 46s linear infinite}
.anim .s-lier{transform-box:fill-box;transform-origin:50% 50%;animation:s-lier 46s linear infinite}
.anim .s-kabel{transform-box:fill-box;transform-origin:50% 0;animation:s-kabel 46s linear infinite}
.anim .s-grout{transform-box:fill-box;transform-origin:50% 0;animation:s-grout 46s linear infinite}
.anim .s-voet{transform-box:fill-box;transform-origin:50% 0;animation:s-voet 46s linear infinite}
.anim .s-tus{transform-box:fill-box;transform-origin:50% 0;animation:s-tus 46s linear infinite}
.anim .s-blad{transform-box:fill-box;transform-origin:50% 50%;animation:s-blad 46s ease-in-out infinite}
.anim .s-wolk{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:s-wolk 46s linear infinite}
.anim .s-piket{opacity:0;animation:s-piket 46s linear infinite}
.anim .s-kopplaat{animation:s-kopplaat 46s linear infinite}
.anim .s-staaf{animation:s-staaf 46s linear infinite}
.anim .s-rkopplaat{animation:s-rkopplaat 46s linear infinite}
.anim .s-rstaaf{animation:s-rstaaf 46s linear infinite}
.anim .s-stap1{opacity:0;animation:s-stap1 46s linear infinite}
.anim .s-stap2{opacity:0;animation:s-stap2 46s linear infinite}
.anim .s-stap3{opacity:0;animation:s-stap3 46s linear infinite}
.anim .s-stap4{opacity:0;animation:s-stap4 46s linear infinite}
.anim .s-stap5{opacity:0;animation:s-stap5 46s linear infinite}
.anim .s-stap6{opacity:0;animation:s-stap6 46s linear infinite}
.anim .s-stap7{animation:s-stap7 46s linear infinite}
@media (prefers-reduced-motion: reduce){.anim .s-rij{transform:translateX(80px)}.anim .s-kop{transform:translateY(-30px)}.anim .s-kabel{transform:scaleY(0.8592)}.anim .s-lier{transform:rotate(-156.3deg)}.anim .s-makelaar{transform:translateY(-10px)}.anim .s-arm{transform:skewY(8.81deg)}.anim .s-schoor{transform:skewY(-72.89deg)}.anim .s-achterkabel{transform:skewY(-5.98deg)}}