/* Publieke site — bouwt op uniek.css. Alleen --brand-* tokens, geen losse hex. */

/* ── Eigen tokens ──────────────────────────────────────────────────
   --brand-paneel: zachte achtergrond voor panelen. Donker is de standaard
   (net als in uniek.css), licht staat onder html[data-theme="light"].
   Waar color-mix beschikbaar is krijgt het paneel een vleugje huisstijlkleur;
   anders blijft het een neutrale vlakkleur uit de bestaande tokens. */
:root            { --brand-paneel: var(--brand-surface-2); }
html[data-theme="light"] { --brand-paneel: var(--brand-surface-2); }

@supports (background: color-mix(in srgb, red 50%, blue)) {
  :root {
    --brand-paneel: color-mix(in srgb, var(--brand-primary) 10%, var(--brand-surface));
  }
  html[data-theme="light"] {
    --brand-paneel: color-mix(in srgb, var(--brand-primary) 14%, var(--brand-surface));
  }
}

body {
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: var(--brand-font, 'Quicksand', system-ui, sans-serif);
  margin: 0;
  line-height: 1.6;
  /* Bij een korte pagina zakt de voettekst anders halverwege het scherm en
     blijft daaronder een leeg vlak staan. Zo blijft hij onderaan het venster
     zonder dat er bij een lange pagina iets verandert. dvh houdt rekening met
     de adresbalk van mobiele browsers, die in- en uitschuift. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .uniek-header__left { flex: 0 0 auto; }
.site-header .uniek-header__center { flex: 1 1 auto; min-width: 0; }
.site-header .uniek-header__right { flex: 0 0 auto; display: flex; gap: 0.25rem; }
.uniek-header__logo { height: 40px; width: auto; display: block; }
.uniek-header__app-name { font-weight: 700; color: var(--brand-text); text-decoration: none; }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.site-nav a {
  color: var(--brand-text);
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
}
.site-nav a:hover, .site-nav a:focus-visible { background: var(--brand-surface-2); }

.uniek-mobile-btn { display: none; }
@media (max-width: 720px) {
  .uniek-mobile-btn {
    display: inline-block;
    background: none;
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 1.1rem;
  }
  .site-nav { display: none; flex-direction: column; }
  .site-nav.open {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
    padding: 0.5rem 1rem;
  }
  .site-header { position: relative; }
}

.site-main {
  max-width: 60rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  box-sizing: border-box;
  flex: 1 0 auto;   /* duwt de voettekst omlaag bij weinig inhoud */
}

.pagina h1 { color: var(--brand-primary); margin-top: 0; }
.blok-kop { color: var(--brand-primary); }
.blok-tekst img, .blok-afbeelding img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.blok-afbeelding { margin: 1.5rem 0; }
.blok-afbeelding figcaption { color: var(--brand-text-muted); font-size: 0.9rem; }
.blok-galerij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}
.blok-galerij img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.5rem; }
.blok-galerij .galerij-item { margin: 0; }
.blok-galerij video { width: 100%; border-radius: 0.5rem; }
.blok-galerij figcaption { color: var(--brand-text-muted); font-size: 0.85rem; }

/* ── Fotostrook ────────────────────────────────────────────────────
   Een rij foto's naast elkaar. Op compact niet stapelen maar horizontaal
   scrollen met scroll-snap: de rij blijft herkenbaar als één strook. */
.blok-fotostrook {
  --fotostrook-hoogte: 180px;
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding-bottom: 0.25rem;
  /* Op elk schermformaat een schuivende rij, zoals een carrousel: de foto's
     houden hun vorm en je ziet dat er meer is dan past. */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Geen zichtbare schuifbalk: dit is een carrousel, geen venster met een balk
     eronder. Schuiven kan nog met muis, veeg of toetsenbord. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.blok-fotostrook::-webkit-scrollbar { display: none; }
.blok-fotostrook > * { scroll-snap-align: start; }
.blok-fotostrook--klein  { --fotostrook-hoogte: 120px; }
.blok-fotostrook--normaal { --fotostrook-hoogte: 180px; }
.blok-fotostrook--groot  { --fotostrook-hoogte: 240px; }

.blok-fotostrook img {
  flex: 1 1 0;
  min-width: 0;
  height: var(--fotostrook-hoogte);
  object-fit: cover;
  border-radius: 0.5rem;
  background: var(--brand-surface-2);
  transition: transform var(--transition-fast, 120ms ease);
}
.blok-fotostrook--rond img {
  border-radius: 50%;
  aspect-ratio: 1;
  /* 0 0: niet laten krimpen. Anders worden ronde foto's ovalen zodra er meer
     in de rij staan dan er breedte is — de rij schuift dan gewoon door. */
  flex: 0 0 var(--fotostrook-hoogte);
  width: var(--fotostrook-hoogte);
}
.blok-fotostrook img:hover { transform: scale(1.04); }
.blok-fotostrook a:focus-visible img,
.blok-fotostrook img:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

@media (max-width: 699.98px) {
  .blok-fotostrook {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .blok-fotostrook img {
    flex: 0 0 auto;
    width: var(--fotostrook-hoogte);
    scroll-snap-align: start;
  }
}

/* ── Panelen ───────────────────────────────────────────────────────
   Twee of drie kolommen met zacht gekleurde panelen. Compact één kolom,
   standard twee, wide het ingestelde aantal. */
.blok-panelen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
  align-items: start;
}
.blok-panelen > * { min-width: 0; }

.paneel {
  background: var(--brand-paneel, var(--brand-surface));
  border-radius: 0.75rem;
  padding: 1.25rem 1.4rem;
  overflow-wrap: anywhere;
}
.paneel h3 {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--brand-primary);
}
.paneel p:last-child, .paneel ul:last-child, .paneel ol:last-child { margin-bottom: 0; }
.paneel a { color: var(--brand-primary); text-decoration: underline; }
.paneel ul, .paneel ol { padding-left: 1.2rem; margin: 0.4rem 0; }

@media (min-width: 700px) {
  .blok-panelen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1200px) {
  /* Zonder modifier: 'automatisch' — het raster vult de beschikbare breedte
     zelf, conform /opt/bootstrap/design (auto-fill + minmax, nooit een vast
     aantal). De modifiers hieronder overrulen dat met een vaste keuze. */
  /* auto-fit (niet -fill): een blok heeft hooguit drie panelen, die mogen de
     rij samen vullen in plaats van een lege vierde baan open te laten. */
  .blok-panelen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .blok-panelen--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blok-panelen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blok-panelen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Kaartenraster (bloktype 'kaarten') ────────────────────────────
   Zelfde ritme als de panelen: compact één kolom, standard twee, wide
   het ingestelde aantal (2, 3 of 4). */
.blok-kaarten__kop { color: var(--brand-primary); margin: 1.5rem 0 0.75rem; }
.blok-kaarten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
  align-items: stretch;
}
.blok-kaarten > * { min-width: 0; }
.blok-kaarten .kaart {
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
.blok-kaarten .kaart__afbeelding { margin-bottom: 0.7rem; }
.blok-kaarten .kaart__titel { color: var(--brand-primary); }
.blok-kaarten .kaart__tekst { margin: 0 0 0.9rem; }
/* .kaart a is blauw; de knop in een kaart houdt zijn eigen contrast. */
.blok-kaarten .kaart__knop { margin: auto 0 0; }
.blok-kaarten .kaart__knop .knop { color: var(--brand-bg); }

@media (min-width: 700px) {
  .blok-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1200px) {
  /* Zonder modifier: 'automatisch'. Zie de panelen hierboven. */
  .blok-kaarten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
  .blok-kaarten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blok-kaarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blok-kaarten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.knop {
  display: inline-block;
  background: var(--brand-primary);
  color: var(--brand-bg);
  border: none;
  border-radius: 0.5rem;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.knop:hover { filter: brightness(1.08); }
.knop--stil { background: var(--brand-surface-2); color: var(--brand-text); }
.knop--klein { padding: 0.3rem 0.7rem; font-size: 0.9rem; }

.kaarten {
  display: grid;
  /* auto-fit, niet auto-fill: twee nieuwsberichten horen de breedte te vullen
     in plaats van links te blijven plakken met een lege kolom ernaast. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.kaart {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.6rem;
  padding: 1rem;
}
.kaart h3 { margin: 0 0 0.4rem; }
.kaart a { color: var(--brand-primary); }

.melding { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; }
.melding--ok { background: var(--brand-primary-soft, var(--brand-surface-2)); }
.melding--fout { background: var(--brand-danger-soft, var(--brand-surface-2)); }

.site-footer {
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
  padding: 1.5rem 1rem;
  color: var(--brand-text-muted);
}
.site-footer__inner {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  /* Nu er nog maar een naam en een link staan, oogt links uitlijnen als een
     restant van een bredere voettekst. Gecentreerd sluit het aan bij de
     koptekst, die ook een midden heeft. */
  justify-content: center;
  text-align: center;
  gap: 0.5rem 1.5rem;
}
.site-footer a { color: var(--brand-text-muted); }

.foutpagina { text-align: center; padding-top: 4rem; }
.foutcode { font-size: 4rem; font-weight: 800; color: var(--brand-primary); margin: 0; }
.fout-trace {
  text-align: left;
  overflow-x: auto;
  background: var(--brand-surface);
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
}

.kaart__meta { color: var(--brand-text-muted); font-size: 0.85rem; }
.kaart__afbeelding { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 0.5rem; margin-bottom: 0.6rem; }
.kaart__titel { margin: 0 0 0.3rem; font-size: 1.05rem; }
.kaart__samenvatting { margin: 0 0 0.6rem; }

/* ── Kop van een overzichtspagina ──────────────────────────────────
   De publieke tegenhanger van .admin-kop. Die klasse stond in de
   agendaweergave maar wordt alleen in admin.css opgemaakt, dus op de site
   had hij geen enkel effect: de knoppen vielen onder de titel in plaats van
   ernaast. */
.paginakop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
}
.paginakop h1 { margin: 0 0 0.5rem; }
.paginakop__acties { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── Agenda ────────────────────────────────────────────────────────
   Een agenda is een datumlijst, geen verzameling kaartjes. Elke regel is
   "wanneer" plus "wat"; de datums staan links onder elkaar zodat je met je
   oog langs de kolom kunt lopen. Op compact stapelt de regel: datum boven,
   titel eronder. */
.agenda-maand { margin-top: 2rem; }
.agenda-maand__kop {
  color: var(--brand-primary);
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.agenda-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.5rem;
}
.agenda-regel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--brand-border);
  min-width: 0;
}
.agenda-regel__wanneer {
  color: var(--brand-text-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.agenda-regel__wat { min-width: 0; }
.agenda-regel__titel { color: var(--brand-primary); font-weight: 600; text-decoration: none; }
.agenda-regel__titel:hover, .agenda-regel__titel:focus-visible { text-decoration: underline; }
.agenda-regel__waar { color: var(--brand-text-muted); font-size: 0.9rem; }
/* Vakanties en studiedagen zijn mededelingen, geen activiteiten: iets
   rustiger in beeld, zodat wat er wél te doen is opvalt. */
.agenda-regel--informatie .agenda-regel__titel { font-weight: 500; color: var(--brand-text); }

/* Vanaf standard staan datum en titel naast elkaar in twee vaste banen, zodat
   alle datums uitlijnen. */
@media (min-width: 700px) {
  /* center, niet baseline. Bij baseline lijnt de browser de eerste tekstregel
     van datum en titel uit — maar welke regel dat is bij een item van twee
     regels ("19 december 2026 t/m 3 januari 2027") verschilt per engine.
     Firefox, Chromium en WebKit kwamen daardoor op andere plekken uit.
     Verticaal centreren doet elke browser hetzelfde. Gemeld 20-09-2026. */
  .agenda-regel { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; }
}
/* Vanaf wide vult de lijst de breedte met meerdere kolommen in plaats van één
   smalle sliert met een half scherm leegte ernaast. auto-fill + minmax, nooit
   een vast aantal — zie /opt/bootstrap/design. */
@media (min-width: 1200px) {
  /* Eén kolom, ook op een breed scherm. Twee kolommen lezen als twee losse
     lijsten en de volgorde wordt onduidelijk: je leest linksboven, dan
     rechtsboven, dan weer links. Een agenda is één rij door de tijd. */
  .agenda-lijst { grid-template-columns: 1fr; }
  .agenda-regel { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
}

/* ── Documentenlijst ───────────────────────────────────────────────
   Zonder ruimte tussen de items plakt alles aan elkaar tot één blok tekst;
   je ziet dan niet waar het ene document ophoudt en het volgende begint. */
.document-lijst { list-style: none; margin: 0.5rem 0 1.5rem; padding: 0; }
.document-item {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--brand-border);
}
.document-item:last-child { border-bottom: 0; }
.document-item > a { font-weight: 600; }
.document-item small { color: var(--brand-text-muted); display: block; margin-top: 0.1rem; }
.document-item p { margin: 0.3rem 0 0; }
@media (min-width: 1200px) {
  .document-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 0 2.5rem; }
}

.uniek-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-primary);
  color: var(--brand-bg);
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.4rem 0;
  z-index: 200;
}
.uniek-skip-link:focus { left: 0; }

/* ── Rijke tekst uit de beheeromgeving (Quill) ─────────────────────
   Dezelfde weergave als in de editor: uitlijning, inspringen,
   lettertype en tekstgrootte. Zie public/assets/css/editor.css. */
.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-align-left    { text-align: left; }

.ql-indent-1 { padding-left:  3em; }
.ql-indent-2 { padding-left:  6em; }
.ql-indent-3 { padding-left:  9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }
.ql-indent-9 { padding-left: 27em; }

.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge  { font-size: 2.5em; }

.ql-font-quicksand    { font-family: var(--brand-font); }
.ql-font-arial        { font-family: Arial, Helvetica, sans-serif; }
.ql-font-verdana      { font-family: Verdana, Geneva, sans-serif; }
.ql-font-georgia      { font-family: Georgia, 'Times New Roman', serif; }
.ql-font-times        { font-family: 'Times New Roman', Times, serif; }
.ql-font-courier      { font-family: 'Courier New', Courier, monospace; }
.ql-font-open-sans    { font-family: 'Open Sans', Arial, sans-serif; }
.ql-font-roboto       { font-family: 'Roboto', Arial, sans-serif; }
.ql-font-merriweather { font-family: 'Merriweather', Georgia, serif; }

.blok-tekst img, .rijketekst img { max-width: 100%; height: auto; }
.blok-tekst blockquote, .rijketekst blockquote {
  border-left: 3px solid var(--brand-primary);
  color: var(--brand-text-muted);
  padding-left: 0.8rem;
  margin: 0.8rem 0;
}
.blok-tekst pre, .rijketekst pre, pre.ql-syntax {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.4rem;
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  font-family: var(--brand-font-mono, monospace);
  white-space: pre-wrap;
}
iframe.ql-video { max-width: 100%; aspect-ratio: 16/9; width: 100%; border: 0; }

/* Quill zet gemengde lijsten in één <ol> met data-list per item. */
.ql-ui { display: none; }
li[data-list=bullet] { list-style-type: disc; }
li[data-list=ordered] { list-style-type: decimal; }
.ql-code-block-container {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.4rem;
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  font-family: var(--brand-font-mono, monospace);
}

/* ── Schermniveaus volgens /opt/bootstrap/design ────────────────────────────
   compact  < 700px   telefoon — alles gestapeld
   standard < 1200px  tablet / klein scherm
   wide    >= 1200px  desktop — breedte benutten
   Gebruik .inhoud voor tekstkolommen en .kolommen voor een twee-kolomindeling;
   niet zelf breekpunten verzinnen. schermniveau.js zet data-factor op <html>.

   Twee breedtes naast elkaar:
     --inhoud-max  leeskolom, ~70 tekens per regel — lopende tekst, koppen
     --breed-max   omhulling voor blokken die ruimte gebruiken (rasters,
                   afbeeldingen, galerijen, agenda- en nieuwslijsten)
   Onder 1200px verandert er niets ten opzichte van vroeger: de omhulling is
   dan toch smaller dan de leeskolom + marges, dus de opsplitsing zou alleen
   maar ruis geven. De beheeromgeving heeft een eigen breedte in admin.css. */

:root {
  /* Leesbreedte. 46rem (~736px) is de klassieke maat voor lopende tekst, maar
     op een laptop oogt dat als een smalle kolom naast veel wit — zo beoordeeld
     op 20-09-2026. 60rem (~960px) leest nog prettig en benut de ruimte. */
  --inhoud-max: 60rem;  /* ~960px */
  --breed-max: 94rem;   /* ~1500px */
  --breed-max-standard: 75rem;
}

.site-main { max-width: var(--breed-max-standard); }

/* Leesbare tekstkolom: nooit breder dan ~46rem, ongeacht het scherm.
   Los bruikbaar in eigen weergaven. */
.inhoud { max-width: var(--inhoud-max); }

@media (min-width: 1200px) {
  .site-main { max-width: var(--breed-max); padding-left: 2rem; padding-right: 2rem; }
  .site-footer__inner { max-width: var(--breed-max); }

  /* Een pagina is een raster van drie banen: een leeskolom in het midden met
     aan weerszijden vrije ruimte. Blokken staan standaard in de leeskolom;
     alleen de blokken die er echt baat bij hebben pakken de volle breedte.
     Zo hoeft er niets aan de HTML te veranderen en blijft een nieuw, nog
     onbekend bloktype vanzelf leesbaar smal. */
  .pagina {
    display: grid;
    /* De leeskolom staat links, niet in het midden. Anders begint lopende tekst
       op een andere marge dan de agenda en het nieuws ernaast, en dat leest als
       een fout — precies wat op de startpagina van Kairos te zien was. */
    grid-template-columns:
      [breed-start smal-start] minmax(0, var(--inhoud-max)) [smal-end]
      minmax(0, 1fr) [breed-end];
  }
  .pagina > * { grid-column: smal; min-width: 0; }

  /* Op een pagina met brede blokken (agenda, nieuws, kaarten) krijgt ook de
     lopende tekst de volle breedte. Een smalle tekstkolom naast brede kaarten
     leest als een fout, niet als rust — zo beoordeeld op 20-09-2026.
     Op een gewone leespagina zónder brede blokken blijft de leeskolom smal:
     daar is korte regellengte juist prettig. */
  .pagina:has(> .blok-agenda) > *,
  .pagina:has(> .blok-nieuws) > *,
  .pagina:has(> .blok-kaarten) > *,
  .pagina:has(> .blok-personen) > * { grid-column: breed; }

  .pagina > .blok-kaarten,
  .pagina > .blok-personen,
  .pagina > .blok-panelen,
  .pagina > .blok-galerij,
  .pagina > .blok-fotostrook,
  .pagina > .blok-afbeelding,
  .pagina > .blok-agenda,
  .pagina > .blok-nieuws,
  .pagina > .blok-documenten,
  .pagina > .blok-shop,
  .pagina > .kaarten,
  .pagina > .agenda-maand,
  .pagina > .breed { grid-column: breed; }

  /* Een nieuwsbericht of agenda-item is van begin tot eind leestekst; die
     pagina blijft in haar geheel smal in plaats van per blok. */
  .pagina--nieuws,
  .pagina--agenda {
    display: block;
    max-width: var(--inhoud-max);
    margin-inline: auto;
  }

  /* Een overzichtspagina (agenda, nieuws, documenten, shop) is van boven tot
     onder één lijst. Daar hoort geen smalle leeskolom in het midden: dan komt
     de titel op x=592 te staan terwijl de lijst eronder op x=240 begint en
     lijnt er niets uit. Eén uitlijning voor de hele pagina, volle breedte. */
  .pagina--lijst {
    display: block;
    max-width: none;
    margin-inline: 0;
  }
}

/* Twee kolommen: gestapeld op compact, asymmetrisch zodra er ruimte is. */
.kolommen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
.kolommen > * { min-width: 0; }

@media (min-width: 700px) {
  .kolommen { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; }
  .kolommen--gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kolommen__zijkant { position: sticky; top: 5rem; }
}
@media (min-width: 1200px) {
  .kolommen { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; }
}

/* Tekst breekt normaal af; alleen echt lange losse tekens (URL's) mogen breken.
   Nooit word-break:break-word gebruiken — dat hakt midden in gewone woorden
   zodra de tekst harde spaties bevat. */
.pagina, .blok-tekst, .kaart { overflow-wrap: anywhere; }
.blok-tekst a { word-break: break-word; }

/* Versieregel in de voettekst — alleen zichtbaar buiten productie. */
.site-footer .versieregel { opacity: 0.5; font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* ── Lucht tussen de blokken op een pagina ─────────────────────────────
   Blokken stonden tegen elkaar aan: de agenda plakte tegen de foto's, het
   nieuws tegen de agendaknop. Zonder ruimte lijkt alles één brok. De maat komt
   uit één schaal, zodat elk bloktype dezelfde lucht krijgt — ook een bloktype
   dat er nu nog niet is. Beoordeeld als "rommelig" op 18-09-2026. */
.pagina > * + * { margin-top: 2.5rem; }
.pagina > .blok-kop + * { margin-top: 0.75rem; }   /* een kop hoort bij wat eronder staat */
/* Na de paginatitel geen dubbele ruimte: de h1 heeft zelf al een ondermarge,
   en daar 2,5rem bovenop geeft een gat waar een redacteur niets aan kan doen —
   hij ziet immers geen leeg blok staan. Gemeld op 20-09-2026. */
.pagina > h1 + * { margin-top: 1rem; }
.pagina > * + .blok-kop { margin-top: 3rem; }      /* maar krijgt zelf ruimte erboven */

/* De knop onder een lijst hoort bij het hele blok, niet bij de linkerkolom.
   Links uitgelijnd leek hij bij de eerste kaart te horen; rechts staat hij waar
   je uitkomt als je de lijst hebt gelezen. */
.blok-agenda .blok-knop,
.blok-nieuws .blok-knop,
.blok-documenten .blok-knop {
  margin-top: 1rem;
  text-align: right;
}

@media (max-width: 559px) {
  .pagina > * + * { margin-top: 1.75rem; }
  .pagina > * + .blok-kop { margin-top: 2.25rem; }
}

/* ── Fotostrook die doorloopt ──────────────────────────────────────────
   De foto's staan twee keer in het spoor; de animatie schuift precies de helft
   op en begint dan opnieuw, zodat je geen sprong ziet. Stilzetten bij hover en
   bij toetsenbordfocus, zodat niemand achter een bewegend doel aan hoeft. */
.blok-fotostrook--loopt {
  overflow: hidden;
  scroll-snap-type: none;
}
.carrousel-spoor {
  --carrousel-duur: 40s;
  display: flex;
  width: max-content;
  animation: carrousel-loop var(--carrousel-duur) linear infinite;
}
.carrousel-baan { display: flex; gap: 0.75rem; padding-right: 0.75rem; }

/* In een lopende carrousel houden de foto's hun eigen breedte. De regel
   hierboven in .blok-fotostrook img zet `flex: 1 1 0` — bedoeld voor de
   stilstaande strook, waar de foto's samen de breedte verdelen. In de baan
   betekent datzelfde dat ze krimpen tot nul en over elkaar heen vallen. In
   Firefox viel dat meteen op; in Chromium bleef het lang onopgemerkt.
   Gemeld door de redacteur van Kairos, 20-09-2026. */
.carrousel-baan img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  aspect-ratio: 1 / 1;
}
.blok-fotostrook--loopt:hover .carrousel-spoor,
.blok-fotostrook--loopt:focus-within .carrousel-spoor { animation-play-state: paused; }

@keyframes carrousel-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .carrousel-spoor { animation: none; }
}

/* Personentabel: even veel lucht als de andere blokken. */
/* De toelichting hoort bij de tabel, maar is lopende tekst. Daarom een
   beperkte regellengte, ook al staat de tabel zelf over de volle breedte. */
.blok-personen__uitleg { max-width: 46rem; margin: 0 0 1rem; color: var(--brand-text-muted); }
.blok-personen__uitleg + .blok-personen__uitleg { margin-top: -0.25rem; }

.blok-personen { margin: 0 0 1.5rem; }
.blok-personen .tabulator-cell { white-space: normal; }