:root {
  --blue: #0878ae;
  --blue-dark: #075272;
  --blue-deep: #06394f;
  --blue-pale: #e5f3f8;
  --blue-soft: #f1f7f9;
  --ink: #20313a;
  --muted: #52636d;
  --line: #ccdae1;
  --paper: #ffffff;
  --focus: #f0a51b;
  --wrap: 1180px;
  --reading: 820px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Zachte, bewegende kleurwas i.p.v. vlak wit: drie grote, vage kleurvlekken
   (blauw, goud, een vleugje groen/teal — bewust géén herhalend motief, dat
   oogde te druk). Elke vlek is een eigen achtergrondlaag die groter is dan
   het scherm (background-size); assets/js/site.js verschuift bij het
   scrollen welk deel daarvan in beeld is (background-position), met een
   gewone CSS-transition erop voor het rustige "driften". Doet de JS het om
   wat voor reden dan ook niet, dan staat er gewoon de (stilstaande) waarde
   hieronder — nooit een kapotte opmaak. */
body {
  margin: 0;
  color: var(--ink);
  background-color: #f6fafb;
  background-image:
    radial-gradient(700px 620px at center, rgba(8,120,174,.22), transparent 60%),
    radial-gradient(640px 560px at center, rgba(240,165,27,.16), transparent 60%),
    radial-gradient(600px 580px at center, rgba(27,150,122,.14), transparent 60%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 160% 160%, 160% 160%, 160% 160%;
  background-position: 12% -8%, 88% 14%, 46% 86%;
  background-attachment: fixed, fixed, fixed;
  transition: background-position 1.3s cubic-bezier(.22,.61,.36,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 420;
  line-height: 1.74;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-dark); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--blue); }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap, .container { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }
.narrow, .reading-layout { max-width: var(--reading); }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .7rem 1rem; color: #fff; background: var(--blue-deep); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.contact-strip { color: #fff; background: var(--blue-deep); font-size: .9rem; }
.contact-strip-inner { min-height: 39px; display: flex; align-items: center; justify-content: flex-end; gap: .8rem 1.7rem; }
.contact-strip a { color: #fff; font-weight: 650; text-decoration: none; }
.contact-strip a + a { position: relative; }
.contact-strip a + a::before { content: ""; position: absolute; top: 50%; left: -.9rem; width: 1px; height: 16px; background: rgba(255,255,255,.38); transform: translateY(-50%); }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: #fff; }
.header-inner { width: min(var(--wrap), calc(100% - 3rem)); min-height: 96px; margin-inline: auto; display: flex; align-items: center; gap: 2.4rem; }
.brand { flex: 0 0 auto; }
.brand img { width: 245px; max-height: 64px; object-fit: contain; object-position: left center; }
.main-nav { margin-left: auto; }
.main-nav-list { display: flex; align-items: center; justify-content: flex-end; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.main-nav-list > li { position: relative; }
.main-nav a { color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 700; line-height: 1.4; padding: .65rem 0; border-bottom: 3px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--blue-dark); border-color: var(--blue); }
.submenu { display: none; position: absolute; z-index: 30; top: calc(100% + .2rem); left: -.95rem; width: 290px; list-style: none; margin: 0; padding: .55rem .95rem; border: 1px solid var(--line); border-top: 4px solid var(--blue); background: #fff; box-shadow: 0 14px 28px rgba(6,57,79,.14); }
.submenu li + li { border-top: 1px solid var(--line); }
.submenu a { display: block; padding: .68rem 0; border-bottom: 0; font-size: .96rem; font-weight: 600; }
.has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu { display: block; }
.menu-toggle { display: none; margin-left: auto; min-height: 46px; border: 2px solid var(--blue-dark); border-radius: 2px; padding: .5rem .85rem; color: var(--blue-dark); background: #fff; font-weight: 700; }

h1, h2, h3, h4, h5, .kop-h3, .kop-h4, .kop-h5 { color: var(--blue-dark); line-height: 1.2; margin-top: 0; }
h1 { margin-bottom: 1.25rem; font-size: clamp(2.15rem, 4vw, 3rem); letter-spacing: -.025em; }
h2 { margin-bottom: 1rem; font-size: clamp(1.55rem, 2.7vw, 2rem); letter-spacing: -.015em; }
h3, .kop-h3 { font-size: 1.25rem; }
h4, h5, .kop-h4, .kop-h5 { font-size: 1.08rem; }
p { margin: 0 0 1.15rem; }

/* Homepaginabanner. Overgenomen van de operationele site: de foto beslaat de
   volle breedte met de titel gecentreerd in beeld. De verhoudingen (15% boven,
   13% onder, foto als cover vanaf de bovenrand) zijn dezelfde waarden die
   blue-professionals.nl op de eerste bouwrij gebruikt, zodat de foto hier even
   groot in beeld komt. De clamp-bovengrens voorkomt alleen dat de banner op een
   heel breed scherm doorschiet. */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(4rem, 15vw, 15rem) 0 clamp(3.4rem, 13vw, 13rem); color: #fff; background: var(--blue-deep); text-align: center; }
.hero-image { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hero-image img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 0; }
/* De lucht in de bronfoto is licht (gemiddelde luminantie ±138/255), dus witte
   tekst heeft een sluier nodig om leesbaar te blijven. */
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,35,50,.32) 0%, rgba(5,35,50,.34) 48%, rgba(5,35,50,.62) 100%); }
.hero-inner { position: relative; max-width: 50rem; padding-inline: 1rem; }
.hero-inner h1 { overflow-wrap: break-word; margin-bottom: .55rem; color: #fff; font-size: clamp(1.9rem, 5.2vw, 3.4rem); font-weight: 800; text-shadow: 0 2px 18px rgba(3,24,35,.55); }
.hero-copy { margin: 0 auto 1.9rem; color: #fff; font-size: clamp(1.16rem, 2.5vw, 1.6rem); font-weight: 560; line-height: 1.42; text-shadow: 0 2px 14px rgba(3,24,35,.55); }
.hero-copy > :last-child { margin-bottom: 0; }
.hero .button { border-color: #fff; background: rgba(7,82,114,.82); }
.hero .button:hover { border-color: #fff; background: var(--blue-deep); }
/* Schuine afsluiting onderaan de banner, net als de rij-afsluiting op de
   operationele site (daar een SVG-driehoek, hier een clip-path). */
.hero-wedge { position: absolute; right: 0; bottom: 0; left: 0; height: clamp(42px, 7vw, 104px); background: var(--blue-dark); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 2px solid var(--blue); border-radius: 2px; padding: .72rem 1.25rem; color: #fff; background: var(--blue); font-weight: 750; line-height: 1.2; text-decoration: none; cursor: pointer; }
.button:hover { color: #fff; border-color: var(--blue-deep); background: var(--blue-deep); }

/* Met of zonder afbeelding naast de tekst: altijd dezelfde minimumhoogte
   (min-height op de grid/flex-inhoud, i.p.v. padding op .page-head zelf),
   anders verspringt de paginakop zichtbaar bij het wisselen van pagina. Groeit
   vanzelf mee als een titel + inleiding een keer meer ruimte nodig hebben. */
.page-head { padding-block: 0; border-bottom: 5px solid #86c8df; color: #fff; background: var(--blue-dark); }
.page-head-grid { display: grid; min-height: 300px; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: center; gap: clamp(2.5rem, 6vw, 5.5rem); }
.page-head--media .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); }
.page-head--portrait .page-head-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.page-head--graphic .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); }
/* Dit element draagt zowel .page-head-grid als .page-head-grid--single
   (zie index.php): align-items:center van de eerste klasse (bedoeld om een
   afbeelding verticaal naast de tekst te centreren) werd door
   flex-direction:column hier per ongeluk horizontale centrering, waardoor de
   titel zonder afbeelding naar het midden opschoof i.p.v. links uit te
   lijnen zoals de variant mét afbeelding — vandaar expliciet stretch. */
.page-head-grid--single { display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-height: 300px; max-width: var(--reading); }
.page-head-title { position: relative; padding-block: 2.8rem; padding-left: clamp(1.3rem, 2.5vw, 2rem); }
.page-head-title::before { content: ""; position: absolute; inset: .1rem auto .1rem 0; width: 5px; background: #8fd2e8; }
.page-head h1 { max-width: 800px; margin-bottom: 0; color: #fff; font-size: clamp(2rem, 3.8vw, 2.7rem); }
.page-head .page-lead { margin: .95rem 0 0; color: #e7f5f9; font-size: 1.12rem; font-weight: 470; line-height: 1.62; }
.page-head .meta { color: #e0f1f6; }
.page-head a { color: #fff; }
.page-head-image { display: grid; width: 100%; height: 240px; margin: 1.8rem 0; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.page-head-image img { width: auto; height: auto; max-width: calc(100% - 1.5rem); max-height: calc(100% - 1.5rem); border-radius: 7px; object-fit: contain; }
.page-head-image--portrait { width: 340px; height: 240px; justify-self: end; }
.page-head-image--graphic { width: 100%; max-width: 440px; height: 240px; justify-self: end; }
.page-head-image--graphic img { max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); }
.eyebrow { margin-bottom: .7rem; font-size: .82rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.content-section, .topic-section, .meeting-section, .link-overview, .contact-section, .section { padding: clamp(3.5rem, 6.5vw, 5.8rem) 0; }
/* .home-welcome had een eigen vlak-witte achtergrond — overbodig nu body zelf
   geen zuiver wit meer is, en verborg daardoor het achtergrondmotief net op
   de meest gelezen plek van de homepage. */
.content-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.content-grid--single { grid-template-columns: minmax(0, var(--reading)); justify-content: center; }
.content-grid--single .prose { max-width: none; }
.content-image { margin: 0; }
.content-image img { width: 100%; max-height: 560px; border: 1px solid var(--line); border-radius: 10px; object-fit: contain; background: #fff; box-shadow: 0 12px 28px rgba(6,57,79,.1); }
.prose { max-width: none; color: #24353e; font-size: 1.04rem; font-weight: 430; line-height: 1.78; }
.reading-layout, .reading-layout.prose, .prose--reading { max-width: var(--reading); }
.prose--reading { margin-inline: auto; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 { margin: 3.1rem 0 1.2rem; padding: 0 0 .72rem; border-bottom: 2px solid var(--line); }
.prose h3, .prose .kop-h3 { margin: 2.55rem 0 .85rem; }
.prose h4, .prose h5, .prose .kop-h4, .prose .kop-h5 { margin: 2.15rem 0 .72rem; line-height: 1.45; }
.prose h2[style*="text-align:center"], .prose h3[style*="text-align:center"], .prose h4[style*="text-align:center"], .prose h5[style*="text-align:center"], .prose .kop-h3[style*="text-align:center"], .prose .kop-h4[style*="text-align:center"], .prose .kop-h5[style*="text-align:center"] { text-align: left !important; }
.prose p { margin-bottom: 1.2rem; }
.prose ul, .prose ol { margin: 1.1rem 0 1.7rem; padding-left: 1.8rem; }
.prose li { margin: .58rem 0; padding-left: .35rem; }
.prose li::marker { color: var(--blue); font-weight: 750; }
/* Veel paginatekst bestaat uit losse alinea's die beginnen met "<strong>Een
   label:</strong>" in plaats van een echte tussenkop. Die geven we nu meer
   gewicht (duidelijke kleur + dunne lijn erboven), zodat lange pagina's op
   doorloop-hoogtes toch houvast bieden zonder dat de redacteur iets hoeft te
   veranderen aan hoe de tekst is ingevoerd. */
.prose p:has(> strong:only-child) { margin-top: 2.75rem; margin-bottom: .85rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--blue-dark); font-size: 1.12rem; }
.prose > p:first-child:has(> strong:only-child) { margin-top: 0; padding-top: 0; border-top: 0; }
.page-voorwaarden .prose > p:has(> strong:only-child), .page-privacy .prose > p:has(> strong:only-child) { padding-bottom: .6rem; border-bottom: 2px solid var(--line); font-size: 1.08rem; }
/* De openingsalinea van een artikel krijgt iets meer gewicht, als een korte
   "lead" — net genoeg om de pagina een opening te geven voor de lopende tekst
   begint, zonder een los inleidingsveld nodig te hebben. */
.prose > p:first-child { color: var(--ink); font-size: 1.22rem; font-weight: 460; line-height: 1.6; }
.prose img { width: auto; margin: 1.9rem 0; max-height: 620px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; background: #fff; }
.prose figure { margin: 1.8rem 0; }
/* Een aanhalingsteken als "quote mark" i.p.v. alleen de dunne streep, zodat
   een uitgelichte zin er echt uitspringt tussen de platte alinea's. */
.prose blockquote { position: relative; margin: 2.6rem 0; padding: .1rem 0 .1rem 2.5rem; border-left: 5px solid var(--blue); color: var(--blue-dark); font-size: 1.22rem; font-weight: 520; line-height: 1.55; }
.prose blockquote::before { content: "\201C"; position: absolute; top: -.5rem; left: .55rem; color: var(--blue); font-family: Georgia, "Times New Roman", serif; font-size: 3.2rem; font-weight: 700; line-height: 1; }
.prose blockquote p { margin-bottom: .4rem; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; margin: 1.7rem 0; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: .85rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--blue-dark); background: var(--blue-soft); }
.prose details { padding: .9rem 0; border-top: 1px solid var(--line); }
.prose summary { color: var(--blue-dark); font-weight: 750; cursor: pointer; }

.structured-wrap { max-width: var(--wrap); }
.structured-content { border-bottom: 1px solid var(--line); }
.content-row-title { padding: 0 0 1.25rem; border-bottom: 4px solid var(--blue); }
.content-row-title h2, .content-row-title h3, .content-row-title h4, .content-row-title .kop-h3, .content-row-title .kop-h4 { margin: 0; padding: 0; border: 0; }
.content-row { display: grid; grid-template-columns: minmax(190px, 260px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); margin-inline: -1.4rem; padding: 2.5rem 1.4rem; border-top: 1px solid var(--line); }
.content-row:nth-of-type(even) { background: var(--blue-soft); }
.content-row-heading h2, .content-row-heading h3, .content-row-heading h4, .content-row-heading .kop-h3, .content-row-heading .kop-h4 { margin: 0; padding: 0; border: 0; color: var(--blue-dark); font-size: 1.32rem; font-weight: 750; line-height: 1.38; }
.content-row-heading { position: relative; padding-left: 1rem; }
.content-row-heading::before { content: ""; position: absolute; inset: .18rem auto auto 0; width: 4px; height: 2.1rem; background: var(--blue); }
.content-row-body.prose > *:first-child { margin-top: 0; }
.content-row-body.prose > *:last-child { margin-bottom: 0; }
.content-lead { max-width: var(--reading); margin: 0 auto 2rem; padding: 1.4rem 1.6rem; border-left: 5px solid var(--blue); background: var(--blue-soft); }
.structured-content--home .content-row-title h2 { font-size: clamp(1.8rem, 3vw, 2.15rem); }
.structured-content--home .content-row-heading h4, .structured-content--home .content-row-heading .kop-h4 { font-size: 1.27rem; }
.structured-content--pagina { --page-content-inset: clamp(1rem, 2.5vw, 2rem); }
.structured-content--pagina .content-row-title { max-width: none; margin-inline: 0; padding: 0 var(--page-content-inset) .85rem; border-bottom-width: 2px; text-align: left; }
.structured-content--pagina .content-row-title h2,
.structured-content--pagina .content-row-title h3, .structured-content--pagina .content-row-title .kop-h3 { font-size: clamp(1.45rem, 2.3vw, 1.72rem); line-height: 1.32; }
.structured-content--pagina .content-row-title h2[style*="text-align:center"],
.structured-content--pagina .content-row-title h3[style*="text-align:center"], .structured-content--pagina .content-row-title .kop-h3[style*="text-align:center"] { text-align: left !important; }
.structured-content--pagina .content-row { grid-template-columns: 1fr; max-width: none; gap: 1.15rem; margin-inline: 0; padding: 2.6rem 0; }
.structured-content--pagina .content-row:nth-of-type(even) { background: transparent; }
.structured-content--pagina .content-row-heading { padding: 0 0 .35rem; }
.structured-content--pagina .content-row-heading::before { inset: 0 auto auto 0; height: 2.25rem; }
.structured-content--pagina .content-row-heading h2, .structured-content--pagina .content-row-heading h3, .structured-content--pagina .content-row-heading .kop-h3 { padding-left: var(--page-content-inset); font-size: 1.45rem; }
.structured-content--pagina .content-row-body { width: 100%; padding-inline: var(--page-content-inset); }
.structured-content--pagina .content-row-body img { margin-right: auto; margin-left: auto; }
.structured-content--pagina .content-lead { max-width: none; margin-inline: 0; padding-inline: var(--page-content-inset); }
.structured-content--pagina .content-row-body > h4, .structured-content--pagina .content-row-body > .kop-h4 {
  margin: 2.25rem 0 1rem;
  padding: .8rem 1rem;
  border-left: 4px solid var(--blue);
  border-radius: 0 6px 6px 0;
  color: var(--blue-dark);
  background: var(--blue-soft);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}
.structured-content--pagina .content-row-body > h4:first-child, .structured-content--pagina .content-row-body > .kop-h4:first-child { margin-top: 0; }
.structured-content--pagina .content-row-body > ul,
.structured-content--pagina .content-row-body > ol {
  padding: .85rem 1.2rem .85rem 2.8rem;
  border-left: 4px solid #86c8df;
  border-radius: 0 7px 7px 0;
  background: #f7fafb;
}
.prose--reading > p:first-child { color: #314650; font-size: 1.08rem; }

/* Lange juridische documenten: duidelijke artikelen in plaats van één tekstmuur. */
.page-voorwaarden .prose > p:has(> strong:only-child) {
  margin: 2.8rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: 8px 8px 0 0;
  color: #fff;
  background: var(--blue-dark);
}
.page-voorwaarden .prose > p:has(> strong:only-child) > strong { color: inherit; font-size: 1.08rem; }
.page-voorwaarden .prose > p:has(> strong:only-child) + ol,
.page-voorwaarden .prose > p:has(> strong:only-child) + p {
  margin-top: 0;
  padding: 1.15rem 1.25rem 1.25rem 3rem;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fbfdfe;
}
.page-voorwaarden .prose > p:has(> strong:only-child) + p { padding-left: 1.25rem; }
.page-voorwaarden .prose > ol {
  padding: 1.1rem 1.25rem 1.2rem 3rem;
  border-left: 4px solid #86c8df;
  border-radius: 0 7px 7px 0;
  background: #f7fafb;
}
.page-voorwaarden .prose > ol > li { margin: .75rem 0; padding-left: .45rem; }
.page-voorwaarden .prose > ol > li::marker { color: var(--blue); font-weight: 800; }

/* Privacy- en cookie-informatie krijgt herkenbare onderwerpblokken. */
.page-privacy .prose > p:has(> strong:only-child) {
  margin: 2.5rem 0 .8rem;
  padding: .75rem 1rem;
  border-left: 5px solid var(--blue);
  border-radius: 0 7px 7px 0;
  color: var(--blue-dark);
  background: var(--blue-soft);
}
.page-privacy .prose > p:has(> strong:only-child) > strong { color: inherit; }
.page-privacy .prose > ul,
.page-cookiebeleid .content-row-body > ul,
.page-cookiebeleid-eu-2 .content-row-body > ul {
  padding: .9rem 1.2rem .9rem 2.8rem;
  border-left: 4px solid #86c8df;
  border-radius: 0 7px 7px 0;
  background: #f7fafb;
}

/* Reacties zijn losse ervaringen en mogen ook als zodanig scanbaar zijn. */
.page-reacties .structured-content--pagina .content-row {
  margin-top: 1.25rem;
  padding: 1.35rem 1.45rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 0 8px 8px 0;
  background: #fff;
}
.page-reacties .structured-content--pagina .content-row-heading { padding-bottom: .15rem; }
.page-reacties .structured-content--pagina .content-row-heading::before { display: none; }
.page-reacties .structured-content--pagina .content-row-heading h3, .page-reacties .structured-content--pagina .content-row-heading .kop-h3 { padding-left: 0; font-size: 1.25rem; }
.page-reacties .structured-content--pagina .content-row-body { padding-inline: 0; color: #314650; }
.page-reacties .structured-content--pagina .content-row:first-of-type {
  margin-top: 0;
  padding: 0 0 2rem;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.page-reacties .structured-content--pagina .content-row:first-of-type .content-row-heading h3, .page-reacties .structured-content--pagina .content-row:first-of-type .content-row-heading .kop-h3 { font-size: 1.35rem; }
.page-reacties .structured-content--pagina .content-row:first-of-type .content-row-body { max-width: 900px; font-weight: 430; }
.page-voorlichting-senioren .structured-content--pagina .content-row:first-of-type .content-row-body > p:first-child:has(> img) { float: left; width: 230px; margin: .25rem 2rem 1rem 0; }
.page-voorlichting-senioren .structured-content--pagina .content-row:first-of-type .content-row-body > p:first-child img { width: 100%; height: auto; margin: 0; }
.page-voorlichting-senioren .structured-content--pagina .content-row:first-of-type .content-row-body > h4, .page-voorlichting-senioren .structured-content--pagina .content-row:first-of-type .content-row-body > .kop-h4 { clear: both; }
.page-voorlichting-senioren .content-row-body > h4, .page-voorlichting-senioren .content-row-body > .kop-h4 {
  margin: 2.8rem 0 1.1rem;
  padding: .8rem 1rem;
  border-left: 5px solid var(--blue);
  border-radius: 0 7px 7px 0;
  color: var(--blue-dark);
  background: var(--blue-soft);
  font-size: 1.2rem;
}
.page-voorlichting-senioren .content-row-body > p:has(> strong:first-child) {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 4px solid #86c8df;
  border-radius: 0 8px 8px 0;
  background: #fbfdfe;
}
.page-voorlichting-senioren .content-row-body > p:has(> strong:first-child) > strong:first-child {
  display: block;
  margin-bottom: .25rem;
  color: var(--blue-dark);
  font-size: 1.04rem;
}
.page-voorlichting-senioren .content-row-body > p:last-child:has(> strong:first-child) {
  margin-top: 2rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid #acd4e3;
  border-left: 5px solid var(--blue);
  background: var(--blue-pale);
}
.page-voorlichting-senioren .content-row-body > p:last-child a[href="/contact/"] {
  display: inline-block;
  margin-top: .35rem;
  white-space: nowrap;
  font-weight: 750;
}

.topic-section { border-block: 1px solid var(--line); background: var(--blue-pale); }
.topic-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.topic-columns > div { border: 1px solid #bfd5df; border-top: 6px solid var(--blue); padding: 1.55rem 1.55rem 1.25rem; background: #fff; }
.topic-columns h2 { margin-bottom: 1.1rem; font-size: 1.45rem; }
.topic-columns h2 a { color: inherit; text-decoration: none; }
.link-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; min-height: 48px; align-items: center; gap: .7rem; padding: .65rem 0; text-decoration: none; }
.link-list a::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: rotate(45deg); }
.link-overview { padding-top: 0; }
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--blue); }
.overview-grid li { border-bottom: 1px solid var(--line); }
.overview-grid a { display: flex; min-height: 64px; align-items: center; padding: .8rem .25rem .8rem 0; font-weight: 750; text-decoration: none; }

/* idem: geen eigen vlak-witte achtergrond meer, zie toelichting bij .home-welcome. */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; border-bottom: 2px solid var(--line); }
.section-head h2 { margin-bottom: .85rem; }
.section-head > a { font-weight: 750; }
.meeting-list { border-top: 1px solid var(--line); }
.meeting-row { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 1.6rem; align-items: center; padding: 1.45rem 0; border-bottom: 1px solid var(--line); }
.meeting-row--with-image { grid-template-columns: 94px minmax(0, 1fr) 170px; }
.meeting-date { display: grid; min-height: 104px; align-content: center; padding: .5rem; border-left: 5px solid var(--blue); color: var(--blue-dark); background: var(--blue-pale); text-align: center; line-height: 1; }
.meeting-day { font-size: 1.8rem; font-weight: 800; }
.meeting-month { margin-top: .22rem; font-size: .9rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.meeting-year { margin-top: .35rem; color: var(--muted); font-size: .76rem; }
.meeting-summary h3, .meeting-summary .kop-h3 { margin: 0 0 .4rem; font-size: 1.18rem; line-height: 1.35; }
.meeting-summary h3 a, .meeting-summary .kop-h3 a { color: inherit; text-decoration: none; }
.meeting-summary h3 a:hover, .meeting-summary .kop-h3 a:hover { color: var(--blue); text-decoration: underline; }
.meeting-image { display: grid; width: 100%; height: 112px; place-items: center; padding: .4rem; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.meeting-image img { max-width: 100%; max-height: 100%; border-radius: 5px; object-fit: contain; }
.meta { margin: 0; color: #465a65; font-size: .96rem; font-weight: 460; line-height: 1.6; }
.pagination { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.8rem; }
.pagination a { display: grid; min-width: 46px; min-height: 46px; place-items: center; border: 1px solid var(--line); text-decoration: none; }
.pagination a[aria-current="page"] { border-color: var(--blue); color: #fff; background: var(--blue); }

.faq-list details { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 44px; color: var(--blue-dark); font-weight: 750; cursor: pointer; }
.faq-list .prose { padding-top: .9rem; }
.download-list { display: grid; }
.download-list a { display: flex; min-height: 58px; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); font-weight: 750; text-decoration: none; }
.download-list a:last-child { border-bottom: 1px solid var(--line); }
.source-credit { color: var(--muted); font-size: .94rem; }

.contact-grid { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); gap: clamp(3rem, 7vw, 6rem); align-items: start; }
.contact-grid > div { padding: 1.5rem; border-top: 6px solid var(--blue); background: var(--blue-soft); }
address { font-style: normal; }
.contact-form { display: grid; gap: 1.15rem; }
.contact-form label { display: grid; gap: .4rem; color: var(--blue-dark); font-weight: 750; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; min-height: 52px; border: 2px solid #9eb3be; border-radius: 2px; padding: .72rem .8rem; color: var(--ink); background: #fff; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,120,174,.13); }
.contact-form .button { width: fit-content; }
.contact-form fieldset { margin: 0; padding: 1.1rem; border: 2px solid var(--line); }
.contact-form legend { padding: 0 .35rem; color: var(--blue-dark); font-weight: 750; }
.contact-form .radio-label { display: flex; grid-template-columns: none; flex-direction: row; align-items: flex-start; gap: .7rem; color: var(--ink); font-weight: 400; }
.contact-form .radio-label + .radio-label { margin-top: .7rem; }
.contact-form .radio-label input { width: 22px; min-height: 22px; margin-top: .25rem; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.offerte-section { padding-top: 0; }
.hp { position: absolute !important; left: -9999px !important; }
.form-message { padding: 1rem 1.1rem; border-left: 5px solid var(--blue); background: var(--blue-pale); }
.form-message.error { border-color: #a53838; background: #fff0f0; }

.site-footer { border-top: 6px solid #82c8df; padding: 3.3rem 0 2.5rem; color: #fff; background: var(--blue-deep); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .65fr) minmax(230px, 1.05fr); gap: 2.2rem 2.4rem; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; font-size: .98rem; font-family: inherit; }
.site-footer a { color: #fff; }
/* Het logo is van zichzelf blauw-op-wit; de vorige versie probeerde het met
   een CSS-filter wit te maken, maar dat veegde de dunne lijntjes (schild-
   facetten, de kleine tagline-tekst) bijna helemaal weg. Een simpel wit
   "plaatje" erachter is betrouwbaarder: het logo blijft altijd in zijn eigen
   kleuren en dus volledig leesbaar, ongeacht de achtergrondkleur eromheen. */
.footer-logo-plate { display: inline-flex; margin-bottom: 1.4rem; padding: .85rem 1.15rem; border-radius: 10px; background: #fff; box-shadow: 0 10px 26px rgba(3,24,35,.28); }
.footer-logo { width: 230px; }
.footer-tagline { margin-bottom: 1.1rem; color: #d7ebf2; font-size: 1.02rem; }
.footer-copyright { margin-bottom: .9rem; font-weight: 750; }
.footer-col__kop { margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid rgba(255,255,255,.25); color: #fff; font-size: 1.05rem; font-weight: 750; }
.footer-contact { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; font-size: .98rem; }
.footer-contact__label { display: block; margin-bottom: .15rem; color: #9cc7d8; font-size: .82rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

/* Fotoweergave op groot formaat, gelijkwaardig aan Onkruidvrije Bestrating. */
body.lightbox-open { overflow: hidden; }
.zoomable-image { cursor: zoom-in; }
.zoomable-image:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  color: #fff;
  background: rgba(4, 36, 50, .92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.lightbox[hidden] { display: none; }
.lightbox__inner { position: relative; width: min(92vw, 1400px); height: min(84vh, 920px); }
.lightbox__media { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .75rem; width: 100%; height: 100%; justify-items: center; }
.lightbox__viewport { position: relative; display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; overflow: hidden; touch-action: none; }
.lightbox__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center;
  will-change: transform;
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
}
.lightbox__viewport.is-zoomed .lightbox__photo { cursor: grab; }
.lightbox__viewport.is-dragging .lightbox__photo { cursor: grabbing; }
.lightbox__caption { margin: 0; font-size: .92rem; font-weight: 650; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.lightbox__close,
.lightbox__nav,
.lightbox__zoom-button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.lightbox__close { position: absolute; z-index: 4; top: 1rem; right: 1rem; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16); }
.lightbox__close:hover, .lightbox__zoom-button:hover { background: rgba(255,255,255,.28); }
.lightbox__close svg, .lightbox__zoom-button svg { width: 22px; height: 22px; }
.lightbox__tools {
  position: absolute;
  z-index: 4;
  top: 1rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(4, 52, 72, .86);
  transform: translateX(-50%);
}
.lightbox__zoom-button { width: 40px; height: 40px; border-radius: 50%; background: transparent; }
.lightbox__zoom-button:disabled { opacity: .38; cursor: not-allowed; }
.lightbox__zoom-value { min-width: 3.2rem; font-size: .78rem; font-weight: 750; text-align: center; }
.lightbox__nav { position: absolute; z-index: 3; top: 50%; width: 50px; height: 50px; border-radius: 50%; color: var(--blue-deep); background: rgba(255,255,255,.94); transform: translateY(-50%); }
.lightbox__nav[hidden], .lightbox__counter[hidden] { display: none; }
.lightbox__nav:hover { background: #fff; }
.lightbox__nav svg { width: 25px; height: 25px; }
.lightbox__prev { left: clamp(.6rem, 3vw, 2rem); }
.lightbox__next { right: clamp(.6rem, 3vw, 2rem); }
.lightbox__counter { position: absolute; left: 50%; bottom: .6rem; margin: 0; padding: .28rem .75rem; border-radius: 999px; background: rgba(4,52,72,.86); font-size: .82rem; font-weight: 700; transform: translateX(-50%); }
.lightbox button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.credits { grid-column: 1 / -1; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.28); font-size: .9rem; opacity: .95; }

/* "paper" laat bewust het achtergrondmotief van body gewoon doorschijnen —
   alleen "mint" is een eigen ondoorzichtig vlak, voor afwisseling tussen
   flexibele tekstrijen. */
.bg-mint { background: var(--blue-pale); }
.tekstrij-met-afbeelding, .tekstrij-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.tekstrij-met-afbeelding--links .tekstrij-inhoud { order: 2; }
.tekstrij-afbeelding { margin: 0; }
.tekstrij-afbeelding img { border: 1px solid var(--line); border-radius: 10px; }
.tekstrij-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tekstrij-kaart { border-top: 5px solid var(--blue); padding-top: 1.1rem; }
.tekstrij-kader { border-left: 5px solid var(--blue); padding-left: 1.6rem; }
.tekstrij-knop, .tekstrij-kaart__link { font-weight: 750; }
/* De rij-knop (".btn") bestond nog alleen als beheerstijl (geel, in
   beheer.css) en had op de publieke site dus geen opmaak. Dezelfde knop als
   elders op de site. */
.tekstrij-knop .btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 2px solid var(--blue); border-radius: 2px; padding: .72rem 1.25rem; color: #fff; background: var(--blue); font-weight: 750; line-height: 1.2; text-decoration: none; cursor: pointer; }
.tekstrij-knop .btn:hover { border-color: var(--blue-deep); background: var(--blue-deep); }

/* Volledige-breedte fotorij ("parallax-rij"): breekt de aaneenschakeling van
   witte tekstblokken op een lange pagina met een foto over de volle
   schermbreedte, desktop met een lichte parallax (de foto schuift trager mee
   dan de pagina). Herbruikt dezelfde velden als "Tekst met een afbeelding"
   (indeling "foto-band" in _lib/tekstrijen.php), dus geen aparte opslag nodig.
   Zonder kop/tekst wordt de rij een "stille" foto zonder sluier of tekst. */
.tekstrij-fotoband { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(260px, 42vw, 460px); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; color: #fff; }
.tekstrij-fotoband__sluier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,35,50,.18) 0%, rgba(5,35,50,.62) 100%); }
.tekstrij-fotoband__inhoud { position: relative; padding: clamp(2.8rem, 7vw, 4.5rem) 0; text-align: center; }
.tekstrij-fotoband__inhoud .eyebrow { color: #cdeaf5; }
.tekstrij-fotoband__inhoud .tekstrij-kop { max-width: 46rem; margin: 0 auto .9rem; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.tekstrij-fotoband__inhoud .tekstrij-tekst { max-width: 40rem; margin: 0 auto; font-size: clamp(1.05rem, 1.7vw, 1.22rem); font-weight: 480; line-height: 1.6; }
.tekstrij-fotoband__inhoud .tekstrij-tekst p:last-child { margin-bottom: 0; }
.tekstrij-fotoband__inhoud .tekstrij-knop { margin-top: 1.5rem; }
.tekstrij-fotoband__inhoud .btn { border-color: #fff; background: rgba(7,82,114,.82); }
.tekstrij-fotoband__inhoud .btn:hover { border-color: #fff; background: var(--blue-deep); }
.tekstrij-fotoband--stil { min-height: clamp(220px, 30vw, 360px); }
/* "background-attachment: fixed" hapert op nogal wat telefoons/tablets en is
   überhaupt zinloos op een scherm waar de foto toch al bijna de volle hoogte
   vult — daar gewoon laten meescrollen. */
@media (max-width: 800px), (hover: none) and (pointer: coarse) {
  .tekstrij-fotoband { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .tekstrij-fotoband { background-attachment: scroll; }
}

@media (max-width: 1080px) {
  .header-inner { min-height: 86px; }
  .brand img { width: 220px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; inset: 100% 0 auto; margin: 0; padding: .9rem 1.5rem 1.4rem; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 14px 24px rgba(6,57,79,.12); }
  .main-nav.is-open { display: block; }
  .main-nav-list { display: block; }
  .main-nav a { padding: .62rem 0; }
  .main-nav-list > li > a { display: block; }
  .submenu { display: block; position: static; width: auto; margin: 0 0 .5rem 1rem; padding: 0 0 0 .9rem; border: 0; border-left: 3px solid var(--line); box-shadow: none; }
  .submenu li + li { border-top: 0; }
  .submenu a { font-weight: 550; }
  .page-head--media .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
  .page-head--portrait .page-head-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .topic-columns { grid-template-columns: 1fr 1fr; }
  .topic-columns > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .page-head-grid, .content-grid, .contact-grid, .footer-grid, .tekstrij-met-afbeelding, .tekstrij-kolommen { grid-template-columns: 1fr; }
  .page-head--media .page-head-grid { grid-template-columns: 1fr; gap: 0; }
  .page-head-grid, .page-head-grid--single { min-height: 220px; }
  .page-head-image, .page-head-image--portrait, .page-head-image--graphic { width: 100%; max-width: 520px; height: 240px; justify-self: start; }
  .page-head-title { padding-block: 2.2rem; }
  .page-head--media .page-head-image { margin: 0 0 2.5rem; }
  .meeting-row--with-image { grid-template-columns: 88px minmax(0, 1fr); }
  .meeting-row--with-image .meeting-image { display: none; }
  .topic-columns, .overview-grid { grid-template-columns: 1fr; }
  .topic-columns > div:last-child, .credits { grid-column: auto; }
  .form-two, .tekstrij-kaarten { grid-template-columns: 1fr; }
  .content-row { grid-template-columns: 1fr; gap: .75rem; }
  .structured-content--home .content-row-heading { padding-left: 1rem; }
  .structured-content--pagina .content-row-heading { padding-left: 0; }
  .page-voorlichting-senioren .structured-content--pagina .content-row:first-of-type .content-row-body > p:first-child:has(> img) { float: none; width: min(100%, 260px); margin: 0 auto 1.5rem; }
}

@media (max-width: 560px) {
  .wrap, .container, .header-inner { width: min(100% - 2rem, var(--wrap)); }
  .contact-strip-inner { min-height: 46px; justify-content: center; gap: .25rem 1rem; font-size: .84rem; }
  .contact-strip a + a::before { left: -.55rem; height: 14px; }
  .brand img { width: 185px; }
  .hero { padding-block: 18vw 30vw; }
  .hero-inner h1 { font-size: clamp(1.6rem, 8.5vw, 2.3rem); }
  .page-head-title { padding-left: 1rem; padding-block: 1.8rem; }
  .page-head-grid, .page-head-grid--single { min-height: 170px; }
  .page-head-image, .page-head-image--portrait, .page-head-image--graphic { height: 190px; }
  .page-head--media .page-head-image { margin-bottom: 1.5rem; }
  .page-head h1 { font-size: clamp(1.8rem, 9vw, 2.25rem); }
  .content-section, .topic-section, .meeting-section, .link-overview, .contact-section, .section { padding-block: 2.35rem; }
  .structured-content--home .content-row-title { padding-bottom: .75rem; }
  .structured-content--home .content-row { margin-inline: 0; padding: 1.75rem 0; }
  .structured-content--pagina .content-row { padding: 1.85rem 0; }
  .structured-content--pagina .content-row-heading h2,
  .structured-content--pagina .content-row-heading h3, .structured-content--pagina .content-row-heading .kop-h3 { font-size: 1.35rem; }
  .content-lead { margin-bottom: 1.4rem; padding: 1.05rem 1.1rem; }
  .prose h2 { margin-top: 2.5rem; }
  .meeting-row, .meeting-row--with-image { grid-template-columns: 72px minmax(0, 1fr); gap: 1rem; }
  .meeting-date { min-height: 92px; }
  .meeting-day { font-size: 1.6rem; }
  .meeting-year { font-size: .72rem; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 0; }
  .contact-grid > div { padding: 1.15rem; }
  .tekstrij-met-afbeelding--links .tekstrij-inhoud { order: initial; }
  .lightbox { padding: .65rem; }
  .lightbox__inner { width: 97vw; height: 84vh; }
  .lightbox__tools { top: .65rem; left: .65rem; transform: none; }
  .lightbox__zoom-button { width: 37px; height: 37px; }
  .lightbox__nav { width: 43px; height: 43px; }
  .lightbox__prev { left: .4rem; }
  .lightbox__next { right: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Koppen die bij het tonen een niveau hoger zijn gezet (blue_inhoud_netjes in index.php) houden
   de vorm van hun oorspronkelijke niveau (klasse kop-hN). */
h2[class*="kop-h"], h3[class*="kop-h"] { border-bottom: 0; padding-bottom: 0; letter-spacing: normal; }

/* =====================================================================
   Eén uitlijning voor alle pagina's (2026-10):
   - verticaal streepje van paginatitel én koppen op dezelfde lijn (rand van de inhoud);
   - titel, koppen en tekst beginnen allemaal op één as daarnaast (--as);
   - leestekst links uitgelijnd met een prettige regellengte (--reading), niet gecentreerd.
   ===================================================================== */
:root { --as: clamp(1rem, 2.5vw, 2rem); }
.structured-content--pagina { --page-content-inset: var(--as); }

/* Smalle blokken niet meer centreren, maar links op de as laten beginnen. */
.wrap.narrow, .wrap.reading-layout { max-width: none; padding-left: var(--as); }
.wrap.narrow > *, .wrap.reading-layout > * { max-width: var(--reading); }
.page-head-grid--single { max-width: none; }
.prose--reading { max-width: calc(var(--reading) + var(--as)); margin-inline: 0; padding-left: var(--as); }

/* Leestekst in de rijen: links op de as, regels niet breder dan --reading. */
.structured-content--pagina .content-row-body { max-width: calc(var(--reading) + 2 * var(--as)); }
.structured-content--pagina .content-row-body img { margin-left: 0; }
.structured-content--pagina .content-lead { max-width: calc(var(--reading) + 2 * var(--as)); }
.structured-content--pagina .content-row > h2, .structured-content--pagina .content-row > h3,
.structured-content--pagina .content-row > .kop-h3 { margin: 0; padding-left: var(--as); font-size: 1.45rem; line-height: 1.32; }
.structured-content--pagina .content-row :is(h2, h3, h4, h5)[style*="text-align"],
.prose--reading :is(h2, h3, h4, h5)[style*="text-align"], .reading-layout :is(h2, h3, h4, h5)[style*="text-align"] { text-align: left !important; }

/* Het streepje: koppen krijgen een streep op de rand, de tekst blijft op de as. */
.structured-content--pagina .content-row-title :is(h2, h3, .kop-h3),
.structured-content--pagina .content-row > :is(h2, h3, .kop-h3),
.prose--reading > :is(h2, h3, .kop-h3), .reading-layout .prose > :is(h2, h3, .kop-h3),
.structured-content--pagina .content-row-body > :is(h3, h4, h5, .kop-h4, .kop-h5),
.prose--reading > :is(h4, h5, .kop-h4, .kop-h5), .reading-layout .prose > :is(h4, h5, .kop-h4, .kop-h5) { position: relative; }
.structured-content--pagina .content-row-title :is(h2, h3, .kop-h3)::before,
.structured-content--pagina .content-row > :is(h2, h3, .kop-h3)::before,
.prose--reading > :is(h2, h3, .kop-h3)::before, .reading-layout .prose > :is(h2, h3, .kop-h3)::before {
  content: ""; position: absolute; top: .12em; bottom: .12em; left: calc(-1 * var(--as)); width: 5px; background: var(--blue);
}
.structured-content--pagina .content-row-title :is(h2, h3, .kop-h3)::before,
.structured-content--pagina .content-row > :is(h2, h3, .kop-h3)::before { left: 0; }
.structured-content--pagina .content-row-title :is(h2, h3, .kop-h3) { padding-left: var(--as); margin-left: calc(-1 * var(--as)); }
/* Tussenkopjes: dunner en lichter streepje, geen blok meer. */
.structured-content--pagina .content-row-body > :is(h3, h4, h5, .kop-h4, .kop-h5),
.prose--reading > :is(h4, h5, .kop-h4, .kop-h5), .reading-layout .prose > :is(h4, h5, .kop-h4, .kop-h5) {
  margin: 2.2rem 0 .8rem; padding: 0; border: 0; border-radius: 0; background: none; font-size: 1.12rem; font-weight: 750; line-height: 1.4;
}
.structured-content--pagina .content-row-body > :is(h3, h4, h5, .kop-h4, .kop-h5)::before,
.prose--reading > :is(h4, h5, .kop-h4, .kop-h5)::before, .reading-layout .prose > :is(h4, h5, .kop-h4, .kop-h5)::before {
  content: ""; position: absolute; top: .1em; bottom: .1em; left: calc(-1 * var(--as)); width: 3px; background: #86c8df;
}
.structured-content--pagina .content-row-body > :is(h3, h4, h5, .kop-h4, .kop-h5):first-child { margin-top: 0; }
.prose--reading > h2, .reading-layout .prose > h2 { padding-bottom: 0; border-bottom: 0; }

/* Overzichten en lijsten op dezelfde as. */
.overview-grid a, .download-list a { padding-left: var(--as); }
.wrap.narrow > .download-list, .wrap.narrow.download-list { padding-left: 0; }
.structured-content--pagina .content-lead { padding-left: calc(var(--as) - 5px); }
.content-row-heading :is(h2, h3, h4)[style*="text-align"] { text-align: left !important; }
/* Reacties: inleiding met streepje op de as; de kaartjes beginnen hun tekst ook op de as. */
.page-reacties .structured-content--pagina .content-row { padding-left: calc(var(--as) - 5px); }
.page-reacties .structured-content--pagina .content-row:first-of-type { padding-left: 0; }
.page-reacties .structured-content--pagina .content-row:first-of-type .content-row-heading::before { display: block; }
.page-reacties .structured-content--pagina .content-row:first-of-type .content-row-heading :is(h2, h3, .kop-h3) { padding-left: var(--as); }
.page-reacties .structured-content--pagina .content-row:first-of-type .content-row-body { padding-inline: var(--as); max-width: calc(var(--reading) + 2 * var(--as)); }

/* Formulieren: het sterretje van een verplicht veld staat direct achter het kopje,
   niet op een eigen regel (het label is een grid, daarom tekst + sterretje in één span). */
.contact-form .veld-label { display: block; }
.contact-form .verplicht { margin-left: .15em; }

/* Zwevende WhatsApp-knop, rechtsonder op elke pagina. Staat de "Bewerken"-
   knop van de beheerder er ook (body[data-inl-csrf], alleen zichtbaar
   ingelogd), dan schuift deze knop een stukje omhoog zodat ze niet over
   elkaar heen vallen — zelfde truc als op de andere sites. */
.whatsapp-float {
  position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 140;
  display: grid; width: 58px; height: 58px; place-items: center;
  border: 3px solid #fff; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 26px rgba(3,24,35,.3);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { background: #1fba59; box-shadow: 0 14px 30px rgba(3,24,35,.36); transform: translateY(-3px); }
.whatsapp-float:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
body[data-inl-csrf] .whatsapp-float { bottom: calc(clamp(14px, 3vw, 26px) + 64px); }
@media (max-width: 600px) {
  .whatsapp-float { width: 52px; height: 52px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }

/* Video-insluiting (YouTube), omgezet uit resterende WordPress-shortcodes —
   zie blue_embeds_omzetten() in index.php. Altijd 16:9, nooit breder dan de
   leesbreedte, met afgeronde hoek zoals andere media op de site. */
.video-embed { position: relative; width: 100%; max-width: var(--reading); margin: 1.9rem auto; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; aspect-ratio: 16 / 9; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }