/*
Over dit bestand
Doel:            Het enige stijlblad van de publieke site van CDA Drimmelen, in de huisstijl van het CDA (merkboek).
Klant:           CDA Drimmelen
Gemaakt vanuit:  Pamelda
Bron:            https://github.com/Pamelda-Webhosting/CDADrimmelen, nog geen release
Copyright: onderaan dit bestand. Overige rechthebbenden: NOTICE.md.

2026-11-05  HvdP-b  [Claude Code]  Opmaak van de pagina's met opgemaakte tekst (juridische pagina's, taak 2).
2026-11-04  HvdP-b  [Claude Code]  Kopjes op de pagina's van de standpunten breken gelijkmatig af (text-wrap: balance), na de audit (plan 5, taak 5).
2026-11-04  HvdP-b  [Claude Code]  Kaarten en pagina's van de standpunten (plan 5, taak 2).
2026-11-04  HvdP-b  [Claude Code]  De bio van Onze mensen als kader met splash boven een donkere achtergrond, zonder schuifbalk (besluit Hans).
2026-11-04  HvdP-b  [Claude Code]  Kop en menu blijven staan en worden bij scrollen lager en iets doorzichtig (besluit Hans).
2026-11-04  HvdP-b  [Claude Code]  De foto op een artikelkaart is een link en zoomt bij hover op de homepage en de lijst (besluit Hans).
2026-11-04  HvdP-b  [Claude Code]  Ruimte tussen de twee filterrijen (plan 4, taak 2).
2026-11-04  HvdP-b  [Claude Code]  Fix audit: [hidden] wint altijd, focusstijl en alleen de link voor een pdf op een telefoon, tussenkoppen onder een zwevende foto, ruimte onder de kaarten en grotere aanraakdoelen (plan 3a, audit-fix).
2026-11-03  HvdP-b  [Claude Code]  Fix review taak 8: een witte focusring op de videoknop (plan 3a, taak 8, fix).
2026-11-03  HvdP-b  [Claude Code]  Video in een artikel: de knop Video afspelen op een kleurvlak (alleen met script), de speler en de link als terugval (plan 3a, taak 8).
2026-11-03  HvdP-b  [Claude Code]  Pdf bij een artikel (link en ingesloten weergave) en een foto als link naar het bestand (plan 3a, taak 7).
2026-11-03  HvdP-b  [Claude Code]  Fix: marge van figuren naast de tekst, citaat volgens het merkboek, subtitel op het grote artikel (plan 3a, taak 6, fix).
2026-11-03  HvdP-b  [Claude Code]  Artikelkaarten, groot nieuwste artikel, categorierij, paginering, artikelpagina met kopfoto, labels, figuren en uitlijningsklassen (plan 3a, taak 6).
2026-11-01  HvdP-b  [Claude Code]  Fix: het biokaartje is precies zo breed als zijn cel en bedekt de buurman niet meer (plan 2b, taak 9).
2026-11-01  HvdP-b  [Claude Code]  Fix: altijd zichtbare schuifbalk in het biokaartje en overflow-wrap (plan 2b, taak 5).
2026-11-01  HvdP-b  [Claude Code]  Galerij van Onze mensen: portretten in 5, 3 of 2 kolommen en het biokaartje (plan 2b, taak 5).
2026-10-31  HvdP-b  [Claude Code]  Audit: knop Sluit je aan blijft op een regel, ruimte rond knoppen en na het formulier, text-wrap pretty (plan 2, taak 9).
2026-10-31  HvdP-b  [Claude Code]  Contactlink in de voet krijgt een aanraakdoel van 44 px hoog (plan 2, taak 9).
2026-10-31  HvdP-b  [Claude Code]  Contactformulier: de val buiten beeld, de meldingen alleen als doel van het adres, en het meldingsvak (plan 2, taak 7).
2026-10-31  HvdP-b  [Claude Code]  Opmaak van de zoekresultaten (plan 2, taak 6).
2026-10-30  HvdP-b  [Claude Code]  Video in de cirkel van de homepage (.cirkelvideo).
2026-10-30  HvdP-b  [Claude Code]  Taak 3: menu dat inklapt, verborgen tekst voor schermlezers, sla-over-link, tekstkolom en metaregel.
2026-10-30  HvdP-b  [Claude Code]  Review-fixes: naam naast logo blijft voor schermlezers, focusomlijning en invoerranden met 3:1, voorbeeldkleuren als variabelen.
2026-10-30  HvdP-b  [Claude Code]  Aangemaakt (plan 2, taak 2), uitgaande van het stijlblad van de voorbeeldschermen en aangepast aan de klassenlijst van de sjablonen.

Keuzes:
- Montserrat is lokaal (assets/fonts/), Georgia komt van het systeem; geen externe lettertypen.
- Donkere tekst (--zwart) op groen en oranje, wit alleen op CDA-blauw: wit op #2cc84d of #ff8f1f haalt WCAG AA niet.
- --groen komt niet als tekstkleur voor; de groene punt achter een kop is een ronde vorm.
- Regelafstand 1,5 voor lopende tekst; aanraakdoelen minstens 44 x 44 px.
- Artikelkaarten: donkere tekst op wit; de labels op een artikelkaart zijn geen links (de kaart heeft al twee), op het artikel zelf wel.
- Een figuur naast de tekst (links of rechts) wordt onder 37,5rem (600 px) een breed blok.
*/
@font-face {
  font-family: Montserrat;
  src: url("fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --zwart: #2c2a29;
  --hoofd: #3c415d;
  --groen: #2cc84d;
  --oranje: #ff8f1f;
  --blauw: #34b4e4;
  --beige: #eee9e2;
  --grijs: #cfd7df;
  --wit: #fff;
  --tekst: #3c415d;
  --tekst-zacht: #505571;
  --voorbeeld-vlak: #fff7d6;
  --voorbeeld-tekst: #4a3b00;
}

/*
--grijs is alleen voor decoratieve randen (kaarten, scheidingslijnen). Randen van invoervelden en
knoppen die nodig zijn om iets te herkennen gebruiken --hoofd, want WCAG 1.4.11 vraagt daar 3:1.
*/

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--wit);
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--hoofd); }
p, ul, ol { margin: 0 0 1em; }
/* Geen losse laatste woorden op een regel (alinea's, lijsten, kaarten). */
p, li, dd { text-wrap: pretty; }

h1, h2, h3 {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 900;
  color: var(--hoofd);
  line-height: 1.2;
  margin: 0 0 .6em;
  text-align: left;
}
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: 1.2rem; }
/*
De punt achter een kop is een groene cirkel, geen groene letter. Hij staat alleen bij h1 en h2: dat zijn
de titels waar het merkboek de punt voor voorschrijft. h3 en koppen in de voet krijgen bewust geen punt.
*/
h1::after, h2::after {
  content: "";
  display: inline-block;
  width: .17em;
  height: .17em;
  margin-left: .06em;
  border-radius: 50%;
  background: var(--groen);
}
.balken::after, .voet h2::after, .voet h3::after { content: none; }

.omhul { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.sectie { padding: 3.5rem 0; }
.sectie.beige { background: var(--beige); }

/* Omlijning: CDA-blauw op wit en beige, wit op de CDA-blauwe vlakken (3:1, WCAG 1.4.11). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--hoofd);
  outline-offset: 2px;
}
.menu a:focus-visible, .voet a:focus-visible, .voet button:focus-visible, .voet input:focus-visible {
  outline-color: var(--wit);
}

/* Kop en menu */
.kop { background: var(--wit); border-bottom: 1px solid var(--grijs); }
.kop .omhul {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  min-height: 4.5rem;
}
.merk {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  justify-self: center;
  text-decoration: none;
}
.merk img { height: 3.1rem; width: auto; }
.merk span { font: 900 1.35rem/1 Montserrat, sans-serif; color: var(--hoofd); }
/* Op smalle schermen visueel verborgen, maar wel voor schermlezers aanwezig (nooit display: none). */
@media (max-width: 34rem) {
  .merk span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.rechts { justify-self: end; display: flex; gap: .5rem; align-items: center; }

.menuknop, .knop {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem 1.2rem;
  font: 600 .95rem/1.2 Montserrat, sans-serif;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 999px;
}
.menuknop { background: none; color: var(--hoofd); border: 0; justify-self: start; padding-left: 0; }
.knop::after { content: "\2192"; }
/* Knoppen naast elkaar in een alinea breken netjes af, met ruimte ertussen en eronder. */
p > .knop { margin: 0 .35rem .6rem 0; }
.knop-groen { background: var(--groen); color: var(--zwart); }
.knop-oranje { background: var(--oranje); color: var(--zwart); }
.knop-wit { background: var(--wit); color: var(--hoofd); border-color: var(--grijs); }

.menu { background: var(--hoofd); color: var(--wit); }
.menu .omhul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding: .6rem 0; }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .7rem 0;
  color: var(--wit);
  text-decoration: none;
  font: 600 .95rem/1.2 Montserrat, sans-serif;
}
.menu a[aria-current] { box-shadow: inset 0 -3px var(--groen); }

/* Kop en menu blijven bovenaan staan. Bij scrollen (html.gescrold, gezet door site.js) wordt de balk lager en iets doorzichtig. */
html { scroll-padding-top: 8rem; }
.vastekop { position: sticky; top: 0; z-index: 50; }
.vastekop .kop, .vastekop .menu { transition: background-color .25s ease; }
.vastekop .kop .omhul { transition: min-height .25s ease; }
.vastekop .merk img { transition: height .25s ease; }
html.gescrold .vastekop .kop { background: color-mix(in srgb, var(--wit) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.gescrold .vastekop .menu { background: color-mix(in srgb, var(--hoofd) 92%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.gescrold .vastekop .kop .omhul { min-height: 3rem; }
html.gescrold .vastekop .merk { min-height: 44px; }
html.gescrold .vastekop .merk img { height: 2.2rem; }
html.gescrold .vastekop .menu .omhul { padding-block: .1rem; }

/* Zoekveld */
.zoekveld { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; max-width: 36rem; }
.zoekveld input {
  flex: 1 1 12rem;
  min-height: 44px;
  padding: .6rem .8rem;
  font: inherit;
  color: var(--tekst);
  background: var(--wit);
  border: 2px solid var(--hoofd);
  border-radius: 999px;
}
.zoekveld .knop::after { content: none; }
#zoekresultaten { margin-top: 1.5rem; overflow-wrap: anywhere; }
.zoek-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.zoek-lijst p { margin: 0; }
.zoek-titel { font: 800 1.1rem/1.3 Montserrat, sans-serif; }
.zoek-titel a { display: inline-block; min-height: 44px; padding-top: .6rem; }
.zoek-soort { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Hero, tekstbalken en vormen */
.hero { background: var(--beige); overflow: hidden; padding-bottom: 0; }
.hero .omhul { display: grid; gap: 2rem; padding: 3rem 0 1.5rem; align-items: center; }
@media (min-width: 56rem) {
  .hero .omhul { grid-template-columns: 1.1fr .9fr; padding: 4.5rem 0 1.5rem; }
}
.cirkelbeeld { position: relative; width: 100%; max-width: 26rem; aspect-ratio: 1; margin-inline: auto; }
.cirkelbeeld::before {
  content: "";
  position: absolute;
  inset: 6% -4% -4% 6%;
  border-radius: 50%;
  background: var(--grijs);
}
.cirkelbeeld > div {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  border-radius: 50%;
  background: var(--hoofd);
  color: var(--wit);
  font: 600 .9rem/1.5 Montserrat, sans-serif;
  text-align: center;
}
.cirkelbeeld > div:has(.cirkelvideo) { padding: 0; overflow: hidden; }
.cirkelvideo { display: block; width: 100%; height: 100%; object-fit: cover; }
.golf {
  height: 3rem;
  margin-top: -1px;
  background: var(--wit);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.balken { margin: 0 0 1.5rem; }
.balk {
  display: table;
  margin: 0 0 .35rem;
  padding: .15em .4em;
  font: 900 clamp(1.7rem, 5.5vw, 3.2rem)/1.15 Montserrat, sans-serif;
  text-transform: uppercase;
  text-align: left;
  color: var(--zwart);
}
.balk.groen { background: var(--groen); color: var(--zwart); }
.balk.oranje { background: var(--oranje); color: var(--zwart); }
.label {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .3rem .7rem;
  font: 700 .75rem/1.4 Montserrat, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--hoofd);
  color: var(--wit);
  border-radius: 4px;
}
.label.groen { background: var(--groen); color: var(--zwart); }
.citaat {
  margin: 1.5rem 0;
  padding: .2rem 0 .2rem 1rem;
  font: italic 700 1.35rem/1.5 Georgia, serif;
  color: var(--hoofd);
  border-left: 6px solid var(--groen);
}

/* Kaarten */
.kaarten + p { margin-top: 1.5rem; }
.kaarten { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.kaart {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.4rem;
  background: var(--wit);
  border: 1px solid var(--grijs);
  border-radius: 12px;
}
.kaart b { color: var(--hoofd); }

/* Artikelkaart: beeld of kleurvlak, labels, titel, inleiding, Lees verder, datum en schrijver. */
article.kaart { padding: 0; overflow: hidden; min-width: 0; gap: 0; }
.kaartbeeld { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--beige); }
.kaartbeeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* De hele foto is een link naar het artikel; de titel blijft de link voor toetsenbord en schermlezer. */
.kaartbeeld > a { position: absolute; inset: 0; display: block; }
/* Alleen in de lijst op de homepage en op de pagina Artikelen: de foto wordt bij hover iets groter, binnen zijn kader. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kaart-zoom .kaartbeeld img { transition: transform .35s ease; }
  .kaart-zoom .kaartbeeld > a:hover img { transform: scale(1.06); }
}
/* Zonder foto: een rustig kleurvlak met twee ronde vormen uit de huisstijl. */
.kleurvlak { background: var(--hoofd); }
.kleurvlak::before, .kleurvlak::after { content: ""; position: absolute; border-radius: 50%; }
.kleurvlak::before { width: 55%; aspect-ratio: 1; right: -8%; bottom: -35%; background: var(--groen); color: var(--zwart); }
.kleurvlak::after { width: 22%; aspect-ratio: 1; left: 8%; top: 18%; background: var(--oranje); color: var(--zwart); }
.kaarttekst { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.25rem 1.4rem 1.4rem; min-width: 0; }
.kaarttitel { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.kaarttitel::after { content: none; }
.kaarttitel a { display: inline-block; padding-block: .6rem; color: var(--hoofd); text-decoration: none; overflow-wrap: anywhere; }
.kaarttitel a:hover { text-decoration: underline; }
.kaartinleiding { margin: 0; }
.kaartsubtitel { margin: 0; font: 700 1.05rem/1.4 Montserrat, sans-serif; color: var(--hoofd); }
.kaartlink { margin: 0; }
.leesverder { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--hoofd); }
.kaartmeta { margin: auto 0 0; font: 600 .85rem/1.5 Montserrat, sans-serif; color: var(--tekst-zacht); }
/* Het nieuwste artikel staat groot: op een breed scherm beeld en tekst naast elkaar. */
.kaart-groot { margin-bottom: 1.5rem; }
.kaart-groot .kaarttitel { font-size: clamp(1.5rem, 4vw, 2.1rem); }
@media (min-width: 48rem) {
  article.kaart-groot { display: grid; grid-template-columns: 1.25fr 1fr; }
  .kaart-groot .kaartbeeld { aspect-ratio: auto; min-height: 18rem; }
  .kaart-groot .kaartbeeld img { position: absolute; inset: 0; }
  .kaart-groot .kaarttekst { justify-content: center; padding: 2rem; }
}

/* Categorielabels */
.labels { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.categorielabel {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .2rem .8rem;
  font: 700 .75rem/1.3 Montserrat, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hoofd);
  background: var(--beige);
  border-radius: 999px;
  text-decoration: none;
}
a.categorielabel { min-height: 44px; }
a.categorielabel:hover { text-decoration: underline; }

/* De rij categorieën boven de lijst */
.filter ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.filter ul + ul { margin-top: -1.25rem; }
.filter a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .4rem 1.1rem;
  font: 600 .95rem/1.2 Montserrat, sans-serif;
  color: var(--hoofd);
  text-decoration: none;
  border: 2px solid var(--hoofd);
  border-radius: 999px;
}
.filter a:hover { background: var(--beige); }
.filter a[aria-current] { color: var(--wit); background: var(--hoofd); }

/* Paginering onder de lijst */
.paginering { display: grid; justify-items: center; gap: .6rem; margin-top: 2.5rem; }
.paginastand { margin: 0; font: 600 .9rem/1.5 Montserrat, sans-serif; color: var(--tekst-zacht); }
.paginering ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.paginanummer, .paginaknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: .4rem .9rem;
  font: 600 .95rem/1.2 Montserrat, sans-serif;
  color: var(--hoofd);
  text-decoration: none;
  border: 2px solid var(--hoofd);
  border-radius: 999px;
}
.paginaknop[rel="prev"]::before { content: "\2190\00a0"; }
.paginaknop[rel="next"]::after { content: "\00a0\2192"; }
.paginanummer:hover, .paginaknop:hover { background: var(--beige); }
.paginanummer[aria-current] { color: var(--wit); background: var(--hoofd); }

/* Het artikel: kopfoto, kop, inleiding en tekst */
.kopfoto { margin: 1.5rem 0 0; }
.kopfoto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--beige); }
.kopfoto figcaption, .artikeltekst figcaption { padding: .5rem .1rem 0; font-size: .88rem; line-height: 1.4; color: var(--tekst-zacht); }
.artikelinhoud { padding-top: 2rem; }
.artikel h1 { overflow-wrap: anywhere; }
.subtitel { margin: 0 0 1rem; font: 700 clamp(1.15rem, 3vw, 1.5rem)/1.35 Montserrat, sans-serif; color: var(--hoofd); }
.schrijver { display: inline-flex; align-items: center; gap: .5rem; }
.portret { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: 50%; }
.inleiding { margin: 1rem 0 1.5rem; font-size: 1.25rem; line-height: 1.5; font-weight: 600; color: var(--hoofd); }
.artikeltekst { overflow-wrap: anywhere; }
.artikeltekst::after { content: ""; display: block; clear: both; }
.artikeltekst blockquote { clear: both; margin: 2rem 0; padding: 0 .5rem; font: italic 700 clamp(1.25rem, 4vw, 1.6rem)/1.15 Georgia, serif; color: var(--hoofd); text-align: center; }
/* Merkboek: een enkel aanhalingsteken van Montserrat Black boven het citaat, gecentreerd, even groot als de eerste hoofdletter. */
.artikeltekst blockquote::before { content: "\2018"; display: block; margin-bottom: .1em; font: 900 clamp(2.5rem, 7vw, 3.2rem)/.8 Montserrat, sans-serif; color: var(--hoofd); }
.artikeltekst blockquote p { margin: 0; }
.artikeltekst img, .fotoreeks img { display: block; width: 100%; height: auto; border-radius: 8px; }
.artikeltekst figure, .fotoreeks figure { margin: 1.5rem 0; }
.figuur-breed { clear: both; }
/* Een tussenkop begint een nieuw deel en staat dus onder een zwevende foto, niet ernaast. */
.artikeltekst h2, .artikeltekst h3 { clear: both; }
/* Uitlijning van een alinea of kop (de opschoner laat alleen deze twee klassen toe). */
p.midden, h2.midden, h3.midden { text-align: center; }
p.rechts, h2.rechts, h3.rechts { text-align: right; }
/* Foto's onderaan staan naast elkaar en vullen de breedte. */
.fotoreeks { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.fotoreeks figure { margin: 0; }
.figuur-link { display: block; }
/* Een pdf: een ingesloten weergave (alleen als de redacteur dat kiest) met daaronder altijd de link. */
.pdf-bijlage { clear: both; margin: 1.5rem 0; overflow-wrap: anywhere; }
.pdf-weergave { display: block; width: 100%; height: 70vh; min-height: 22rem; max-height: 50rem; border: 1px solid var(--hoofd); border-radius: 8px; background: var(--beige); }
.pdf-weergave a, .pdf-link a { display: inline-block; min-height: 2.75rem; padding: .6rem 0; }
.pdf-weergave a { padding: .75rem 1rem; }
.pdf-link { margin: .25rem 0 0; }
.pdf-weergave:focus-visible { outline: 3px solid var(--hoofd); outline-offset: 2px; }
/* Een telefoon toont een ingesloten pdf slecht: daar alleen de link eronder. */
@media (max-width: 37.4375rem) {
  .pdf-weergave { display: none; }
}
/* Een video: pas na een klik komt de speler. Het kleurvlak met de knop staat alleen met script in beeld (de klasse js);
   zonder script is er de link eronder. Geen plaatje van buiten: een eigen kleurvlak met een afspeelicoon. */
.video { clear: both; }
.video-vlak { display: none; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--hoofd); }
.js .video-vlak { display: block; }
.video-speel { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; border: 0; background: none; color: var(--wit); font: 700 1.1rem/1.2 Montserrat, sans-serif; text-align: center; cursor: pointer; }
.video-speel:focus-visible { outline-color: var(--wit); outline-offset: -6px; }
.video-icoon { position: relative; width: 4rem; height: 4rem; border-radius: 50%; background: var(--wit); }
.video-icoon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: .8rem 0 .8rem 1.3rem; border-color: transparent transparent transparent var(--hoofd); }
.video-speel:hover .video-icoon { transform: scale(1.08); }
.video-speler { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: var(--zwart); }
.video-link { margin: .5rem 0 0; }
.video-link a { display: inline-block; min-height: 2.75rem; padding: .6rem 0; overflow-wrap: anywhere; }
/* Breed genoeg: een figuur loopt met de tekst mee. Smaller dan 600 px is hij een gewoon breed blok. */
@media (min-width: 37.5rem) {
  /* .artikeltekst ervoor: de algemene regel voor figuren (.artikeltekst figure) is specifieker dan een losse klasse en zou de marges wegnemen. */
  .artikeltekst .figuur-links, .artikeltekst .figuur-rechts { width: min(50%, 22rem); margin-top: .3rem; margin-bottom: 1rem; }
  .artikeltekst .figuur-links { float: left; margin-right: 1.5rem; margin-left: 0; }
  .artikeltekst .figuur-rechts { float: right; margin-left: 1.5rem; margin-right: 0; }
}
.meer-artikelen { margin-top: 2rem; }

/* Onze mensen: een galerij van staande portretten (3 : 4). De bio staat altijd in de pagina; met hover, toetsenbordfocus
   of een tik opent site.js een kader (zie .biokader hieronder). */
.mensen { display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
  .mensen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .mensen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.mens { position: relative; margin: 0; min-width: 0; }
.mens[data-bio] { min-height: 44px; min-width: 44px; outline: none; }
.mens[data-bio]:focus-visible .foto { outline: 3px solid var(--hoofd); outline-offset: 2px; }
html.js .mens[data-bio] { cursor: pointer; }
.mens .foto {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--wit);
  border: 1px solid var(--grijs);
  border-radius: 10px;
}
.mens img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cirkel {
  display: grid;
  place-items: center;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--beige);
  border: 6px solid var(--grijs);
  font: 800 clamp(1.4rem, 4vw, 1.9rem)/1 Montserrat, sans-serif;
  color: var(--hoofd);
}
.mens figcaption { padding: .5rem .1rem 0; overflow-wrap: anywhere; }
.mens figcaption b { display: block; line-height: 1.3; color: var(--hoofd); }
.mens figcaption span { display: block; font-size: .88rem; line-height: 1.4; color: var(--tekst-zacht); }
/* De bio van een persoon: zonder script gewone tekst onder de naam. Met script (html.js) is de tekst op de pagina alleen
   nog voor schermlezers; wat de bezoeker ziet is het kader hieronder, dat site.js bouwt. */
.mens .bio { margin: .4rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--tekst-zacht); overflow-wrap: anywhere; }
html.js .mens .bio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Het kader met de bio opent als een splash boven een donkere achtergrond, midden op de foto, nooit kleiner dan de foto. */
.bio-achter { position: fixed; inset: 0; z-index: 80; background: rgba(18, 20, 33, .66); opacity: 0; transition: opacity .2s ease; }
.bio-achter.open { opacity: 1; }
.biokader {
  position: fixed;
  z-index: 90;
  left: var(--kx, 0);
  top: var(--ky, 0);
  box-sizing: border-box;
  width: var(--kb, 20rem);
  min-height: var(--kh, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.1rem 1.3rem 1.3rem;
  font-size: var(--kf, 1rem);
  line-height: 1.5;
  color: var(--wit);
  background: var(--hoofd);
  border-left: 6px solid var(--groen);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  overflow-wrap: anywhere;
  outline: none;
  opacity: 0;
  transform: scale(.7);
  transition: transform .32s cubic-bezier(.2, 1.3, .35, 1), opacity .18s ease;
}
.biokader.open { opacity: 1; transform: scale(1); }
.bio-naam { margin: 0; padding-right: 2.2rem; font: 800 1.25em/1.3 Montserrat, sans-serif; }
.bio-functie { margin: .1rem 0 .8rem; font-size: .9em; color: var(--beige); }
.bio-tekst p { margin: 0 0 .6rem; }
.bio-tekst p:last-child { margin-bottom: 0; }
.bio-sluit {
  position: absolute;
  top: .25rem;
  right: .3rem;
  width: 44px;
  height: 44px;
  padding: 0;
  font: 400 1.9rem/1 Montserrat, sans-serif;
  color: var(--wit);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.bio-sluit:focus-visible { outline: 3px solid var(--wit); outline-offset: -3px; }

/* Standpunten: kaarten met een korte zin en een eigen pagina per standpunt. */
.standpunt .artikeltekst h2, .standpunt .artikeltekst h3, .tekstpagina .artikeltekst h2, .tekstpagina .artikeltekst h3, .kaart-standpunt .kaarttitel { text-wrap: balance; }
/* Een kop hoort bij wat eronder staat: meer ruimte erboven dan eronder. */
.standpunt .artikeltekst h2, .tekstpagina .artikeltekst h2 { margin-top: 2.2rem; }
.standpunt .artikeltekst h3, .tekstpagina .artikeltekst h3 { margin-top: 1.6rem; }
.tekstpagina .meta { margin: 0 0 1.5rem; }
.kaart-standpunt .kaartinleiding { font-size: 1.05rem; }
.standpunt-verwijzing { margin: 2rem 0 0; max-width: 44rem; }
.standpunt .terug { display: inline-flex; align-items: center; min-height: 44px; font: 600 .95rem/1.2 Montserrat, sans-serif; color: var(--hoofd); }
.standpunt .terug::before { content: "\2190"; margin-right: .4rem; }
.standpuntbron { margin: 1.5rem 0 0; font-size: .92rem; color: var(--tekst-zacht); overflow-wrap: anywhere; }

/* Standpunten */
.thema { padding: 1.2rem 0 1.6rem; border-top: 4px solid var(--hoofd); }
.thema .prio {
  margin: .8rem 0;
  padding: .9rem 1.1rem;
  background: var(--beige);
  border-left: 6px solid var(--groen);
  border-radius: 0 8px 8px 0;
}
.thema dt { margin-top: .9rem; font: 700 .78rem/1.5 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--hoofd); }
.thema dd { margin: .2rem 0 0; }

/* Formulier */
.formulier { display: grid; gap: 1rem; max-width: 36rem; margin-bottom: 2.5rem; }
.formulier label { display: grid; gap: .35rem; font: 600 .92rem/1.4 Montserrat, sans-serif; color: var(--hoofd); }
.formulier input, .formulier select, .formulier textarea {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  font: inherit;
  color: var(--tekst);
  background: var(--wit);
  border: 2px solid var(--hoofd);
  border-radius: 8px;
}
.formulier .knop { justify-self: start; }
.melding { padding: 1rem 1.2rem; background: var(--beige); border-left: 6px solid var(--hoofd); border-radius: 0 8px 8px 0; margin: 1.5rem 0; font-size: .95rem; }
.melding.fout { border-left-color: var(--oranje); }

/* Contactformulier. De val (het veld website) staat buiten beeld, niet met display: none: sommige
   bots slaan verborgen velden over. Een mens ziet hem niet en bereikt hem niet met Tab. */
.val { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Elke vaste melding staat in de pagina, maar is alleen te zien als hij het doel van het adres is
   (#melding-<code>), zodat hij ook zonder script verschijnt. Met script staat de tekst in het
   meldingsvak en blijft de lijst verborgen. */
.contactmelding { display: none; }
.contactmelding:target { display: block; }
.contactmeldingen.met-script .contactmelding:target { display: none; }
/* Het meldingsvak blijft in de pagina staan (role="status"), maar neemt leeg geen ruimte in. */
.contactstatus:empty { padding: 0; margin: 0; border: 0; }

/* Voettekst met golvende bovenrand (geen afbeelding) */
.voet { position: relative; margin-top: 4rem; padding: 3.5rem 0 2rem; background: var(--hoofd); color: var(--wit); }
.voet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.5rem;
  height: 1.55rem;
  background: radial-gradient(circle at 2.5rem 100%, var(--hoofd) 1.5rem, transparent 1.55rem) 0 0 / 5rem 100%;
}
.voet a { color: var(--wit); }
.voet .omhul { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.voet h2, .voet h3 { color: var(--wit); font-size: 1rem; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li a, .voet p a { display: inline-flex; align-items: center; min-height: 44px; }

/* Sjablonen (taak 3): menu dat inklapt, tekst voor schermlezers, sla-over-link, tekstkolom */
.alleen-lezers { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sla-over { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .8rem 1.2rem; background: var(--wit); color: var(--hoofd); border: 2px solid var(--hoofd); }
.sla-over:focus { top: .5rem; }
/* De knop staat zonder script verborgen; het script haalt hidden weg. Op een breed scherm is het menu altijd open. */
.menuknop[hidden] { display: none; }
/* Het hidden-attribuut wint altijd, ook van een regel met display (zie ook beheer.css). */
[hidden] { display: none !important; }
.zoeklink { padding: .5rem; }
.menu.dicht { display: none; }
@media (min-width: 48rem) {
  .menuknop[aria-controls] { display: none; }
  .menu.dicht { display: block; }
}
@media (max-width: 34rem) {
  .kop .omhul { gap: .25rem; grid-template-columns: auto 1fr auto; }
  .kop .knop { padding: .5rem .55rem; font-size: .8rem; white-space: nowrap; }
  .kop .rechts { gap: .25rem; }
  .kop .menuknop { gap: .35rem; }
  .kop .merk img { object-fit: contain; }
  .kop .knop::after { content: none; }
}
.kop .merk { grid-column: 2; }
.kop .rechts { grid-column: 3; }
.tekst { max-width: 44rem; margin-inline: auto; }
.meta { color: var(--tekst-zacht); font-weight: 600; }

/* Banner op de voorbeeldsite */
.voorbeeldbalk { padding: .45rem 1rem; background: var(--voorbeeld-vlak); color: var(--voorbeeld-tekst); text-align: center; font: 600 .85rem/1.5 Montserrat, sans-serif; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/*
© 2026 Hans van der Pluijm (opdrachtgever) en Hans van der Pluijm, Pamelda (uitvoerder).
Met Claude Code. Overige rechthebbenden: NOTICE.md.
*/