/* ======================================================================
   echt-susteren.nu

   De categoriestandaard van een lokale nieuwssite, op volle sterkte: wit,
   bijna-zwarte tekst, één blauw en één groen uit het logo, dunne lijnen,
   grote leesbare koppen. Mobiel eerst; de meetlat is NOS.nl, NU.nl,
   De Limburger en L1.

   Kleuren komen uitsluitend uit tokens.css (gegenereerd uit tools/tokens.py).
   Hier staan maten, structuur en gedrag. De klassen van de kit (kop, nav,
   voet, formulier, prose) worden hier aangekleed; de eigen modules (nieuws,
   agenda, gids, kernen) staan onderaan.
   ====================================================================== */

/* ------------------------------------------------------------ basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background: var(--color-surface);
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}
/* Source Sans 3: een humanistische werkletter die op nieuws- en
   overheidssites thuis is, zelf gehost, drie gewichten, alleen latijn. */
@font-face { font-family: "Source Sans 3"; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/SourceSans3-var.woff2) format("woff2"); }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text-accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 2px; }
input, textarea { caret-color: var(--color-text-accent); accent-color: var(--color-action-bg); }
::selection { background: var(--color-selection); color: var(--color-text); }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: var(--tracking-display); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 var(--space-4); }
time, .tabel { font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - var(--space-8), 64rem); margin-inline: auto; }
.alleen-voorlezen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead { font-size: 1.125rem; color: var(--color-text-muted); max-width: 60ch; }
.meta { color: var(--color-text-muted); font-size: var(--font-size-small); display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0 0 var(--space-4); }
.eyebrow { display: none; }

/* toetsenbord eerst */
.skip { position: absolute; left: -9999px; top: var(--space-2); z-index: 100;
        background: var(--color-action-bg); color: var(--color-action-fg);
        padding: var(--space-2) var(--space-4); border-radius: var(--radius-s); }
.skip:focus { left: var(--space-2); }

/* voortgangsbalk van de kit (staat uit op deze site, maar mag aan) */
.voortgang { position: fixed; inset: 0 0 auto 0; height: 3px; background: transparent; z-index: 60; }
.voortgang-vulling { height: 100%; background: var(--color-graphic-accent); transform-origin: left; transform: scaleX(var(--voortgang, 0)); }

/* ------------------------------------------------------------- kop */
.kop { position: sticky; top: 0; z-index: 50; background: var(--color-surface);
       border-bottom: 1px solid var(--color-border); }
/* De merklijn: een dunne rand van blauw naar groen boven aan elke pagina, het
   enige stukje merkkleur in de verder witte kop. Zoals de rode lijn boven
   de krantenkop. */
.kop::before { content: ""; display: block; height: 4px;
               background: linear-gradient(90deg, var(--color-action-bg) 0 55%, var(--color-graphic-accent) 100%); }
/* De topbalk: een smalle, stille regel met Over, Contact en Inloggen, rechts
   uitgelijnd, zodat het hoofdmenu alleen de inhoud draagt en op een laptop
   past. Op een telefoon blijft hij staan, want hij is maar één regel. */
.topbalk { border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); }
.topbalk-in { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); min-height: 1.9rem;
              font-size: var(--font-size-meta); }
.topbalk-in a { color: var(--color-text-muted); text-decoration: none; padding: .2rem 0; }
/* de terugknop staat links, de rest van de topbalk blijft rechts */
.terug-knop { margin-right: auto; display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; padding: .2rem 0;
              font: inherit; color: var(--color-text-muted); cursor: pointer; }
.terug-knop:hover { color: var(--color-text); text-decoration: underline; }
.terug-knop[hidden] { display: none; }   /* anders wint inline-flex van het hidden-attribuut */
.terug-knop span { white-space: nowrap; }
/* terug naar de lijst, boven de kop van een gidsvermelding */
.terug-link { margin: 0 0 var(--space-2); font-size: var(--font-size-small); }
.terug-link a { display: inline-flex; align-items: center; gap: .2rem; color: var(--color-text-muted); text-decoration: none; }
.terug-link a:hover { color: var(--color-text); text-decoration: underline; }
/* de app-tip: één regel op de accentkleur, boven de topbalk; alleen op een telefoon (script) */
.app-tip { background: var(--color-graphic-accent-soft); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-small); }
.app-tip-in { display: flex; align-items: center; gap: var(--space-3); padding: .45rem 0; }
.app-tip-in span { flex: 1; min-width: 0; }
.app-tip-in a { white-space: nowrap; font-weight: 600; }
.app-tip-in button { background: none; border: 0; font: inherit; font-size: 1.3rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 0 .2rem; }
.app-tip-in button:hover { color: var(--color-text); }
.topbalk-in a:hover { color: var(--color-text); text-decoration: underline; }
.topbalk-in a[aria-current="page"] { color: var(--color-text); font-weight: 600; }
/* De pil: 44 bij 24, zon links, maan rechts; de schijf in de actiekleur
   schuift naar de stand die geldt en het icoon erop wordt wit. */
.thema-pil { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 2.9rem; height: 1.55rem;
             padding: 0 .3rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface);
             color: var(--color-text-muted); cursor: pointer; }
.thema-pil[hidden] { display: none; }
.thema-pil svg { position: relative; z-index: 1; }
.thema-pil-schijf { position: absolute; top: .15rem; left: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
                    background: var(--color-action-bg); transition: transform .18s ease; }
.thema-pil-zon { color: var(--color-action-fg, #fff); }
:root[data-theme="dark"] .thema-pil-schijf { transform: translateX(1.35rem); }
:root[data-theme="dark"] .thema-pil-zon { color: var(--color-text-muted); }
:root[data-theme="dark"] .thema-pil-maan { color: var(--color-action-fg, #fff); }
.thema-pil:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .thema-pil-schijf { transition: none; } }
/* Leesbaarheid (partials/leesbaarheid.php). Tekst groter zet de lettermaat
   van html; alles in rem groeit mee, zoals bij zoomen. 119% en 138% geven
   een broodtekst van ruim 21 en bijna 25 pixels. */
:root[data-tekst="groter"] { font-size: 118.75%; }
:root[data-tekst="grootst"] { font-size: 137.5%; }
/* bij grote tekst past de topbalk op een telefoon niet op één regel: dan
   loopt hij door op een tweede, rechts uitgelijnd, en drukt niets plat */
.topbalk-in { position: relative; flex-wrap: wrap; row-gap: 0; }
.thema-pil { flex: none; }
.leesbaar-knop { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .2rem 0;
                 font: inherit; color: var(--color-text-muted); cursor: pointer; }
.leesbaar-knop[hidden] { display: none; }
.leesbaar-knop:hover, .leesbaar-knop[aria-expanded="true"] { color: var(--color-text); }
.leesbaar-knop:hover .leesbaar-naam { text-decoration: underline; }
.leesbaar-aa { font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.leesbaar-aa span { font-size: 1.3em; }
.leesbaar-knop:focus-visible, .leesbaar-paneel button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
/* op een smal scherm alleen "AA"; de naam blijft voor de schermlezer */
@media (max-width: 30rem) {
  .leesbaar-naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.leesbaar-paneel { position: absolute; right: 0; top: calc(100% + 1px); z-index: 30; width: min(20rem, calc(100vw - 2rem));
                   padding: var(--space-4); background: var(--color-surface); color: var(--color-text);
                   border: 1px solid var(--color-border-strong); border-radius: var(--radius-m); box-shadow: var(--shadow-kaart);
                   font-size: var(--font-size-small); }
.leesbaar-paneel[hidden] { display: none; }
.leesbaar-kop { margin: 0 0 var(--space-2); font-weight: 600; }
.leesbaar-maten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.leesbaar-maten button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .15rem;
                         min-height: 3.5rem; padding: var(--space-2) var(--space-1); font: inherit; font-size: var(--font-size-meta);
                         color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong);
                         border-radius: var(--radius-s); cursor: pointer; }
.leesbaar-maten button[aria-pressed="true"] { background: var(--color-action-bg); color: var(--color-action-fg); border-color: var(--color-action-bg); font-weight: 600; }
.leesbaar-maten span { font-weight: 700; line-height: 1; }
.leesbaar-a1 { font-size: 1rem; }
.leesbaar-a2 { font-size: 1.3rem; }
.leesbaar-a3 { font-size: 1.65rem; }
.leesbaar-contrast { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3);
                     min-height: 2.75rem; padding: var(--space-2) var(--space-3); font: inherit; color: var(--color-text);
                     background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-s); cursor: pointer; }
.leesbaar-schakel { position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: var(--radius-pill);
                    background: var(--color-surface); border: 2px solid var(--color-border-strong); }
.leesbaar-schakel::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .95rem; height: .95rem; border-radius: 50%;
                           background: var(--color-border-strong); transition: transform .18s ease; }
.leesbaar-contrast[aria-checked="true"] .leesbaar-schakel { background: var(--color-action-bg); border-color: var(--color-action-bg); }
.leesbaar-contrast[aria-checked="true"] .leesbaar-schakel::after { background: var(--color-action-fg); transform: translateX(1.1rem); }
@media (prefers-reduced-motion: reduce) { .leesbaar-schakel::after { transition: none; } }
/* Meer contrast: naast de kleuren uit tokens.css ook vormen die niet op kleur
   leunen. Links in lopende tekst zijn altijd onderstreept (kaarten en knoppen
   niet, die hebben een rand), de focusrand is dikker. */
:root[data-contrast="hoog"] .prose a, :root[data-contrast="hoog"] .topbalk-in a,
:root[data-contrast="hoog"] .voet a { text-decoration-line: underline; text-decoration-thickness: 2px; }
:root[data-contrast="hoog"] :focus-visible { outline-width: 3px !important; }
/* de knop van de kit in het menu blijft in de html (de pil stuurt hem aan) maar is niet meer te zien */
.nav-thema { display: none; }
.kop-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
          min-height: 3.5rem; }
.merk { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; text-decoration: none; }
.merk img { height: 2.75rem; width: auto; }
.merk-naam { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--color-text); white-space: nowrap; }
.merk-nu { color: var(--color-text-positive); }
.merk-donker { display: none; }
:root[data-theme="dark"] .merk-licht { display: none; }
:root[data-theme="dark"] .merk-donker { display: block; }
/* zelfde reden als bij de dorpenlijn: geen media query, alleen data-theme */

.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav-schakel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-knop { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-s); cursor: pointer; color: var(--color-text); font-weight: 600; }
.nav-knop:hover { background: var(--color-surface-raised); }
.nav-schakel:focus-visible + .nav-thema + .nav-knop, .nav-schakel:focus-visible ~ .nav-knop { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.nav-icoon-dicht, .nav-tekst-dicht { display: none; }
.nav-schakel:checked ~ .nav-knop .nav-icoon-open, .nav-schakel:checked ~ .nav-knop .nav-tekst-open { display: none; }
.nav-schakel:checked ~ .nav-knop .nav-icoon-dicht, .nav-schakel:checked ~ .nav-knop .nav-tekst-dicht { display: inline; }
.nav-tekst-open, .nav-tekst-dicht { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#hoofdnavigatie { list-style: none; margin: 0; padding: 0; display: none; }
.nav-schakel:checked ~ #hoofdnavigatie {
  display: flex; flex-direction: column; gap: var(--space-1);
  position: absolute; left: 0; right: 0; top: 100%;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-kaart);
}
#hoofdnavigatie a { display: block; padding: var(--space-3) var(--space-2); text-decoration: none; color: var(--color-text);
                    font-weight: 600; border-radius: var(--radius-s); }
#hoofdnavigatie a[aria-current="page"] { color: var(--color-text-accent); }
#hoofdnavigatie a:hover { background: var(--color-surface-raised); }
#hoofdnavigatie .knop { display: inline-block; margin-top: var(--space-2); }
@media (min-width: 52rem) {
  .nav-knop { display: none; }
  #hoofdnavigatie, .nav-schakel:checked ~ #hoofdnavigatie {
    display: flex; flex-direction: row; align-items: center; gap: var(--space-1);
    position: static; padding: 0; background: none; border: 0; box-shadow: none;
  }
  #hoofdnavigatie a { padding: var(--space-2) var(--space-3); font-weight: 500; white-space: nowrap; }
  #hoofdnavigatie a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-text-accent); border-radius: 0; }
  #hoofdnavigatie .knop { margin: 0 0 0 var(--space-2); padding-block: var(--space-2); }
}

/* themaknop van de kit */
.thema { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
         border: 0; background: none; border-radius: var(--radius-s); cursor: pointer; color: var(--color-text-muted); }
.thema:hover { background: var(--color-surface-raised); color: var(--color-text); }
.thema-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.thema .thema-maan { display: none; }
:root[data-theme="dark"] .thema .thema-zon { display: none; }
:root[data-theme="dark"] .thema .thema-maan { display: block; }

/* de kernkiezer: op elke pagina één tik van een dorp; alleen de huidige kern licht op */
.kernkiezer { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.kernkiezer-in { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) 0;
                 scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
                 /* de rij loopt door buiten beeld: de rechterrand vervaagt zodat dat te zien is */
                 mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
                 -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
@media (min-width: 64rem) { .kernkiezer-in { mask-image: none; -webkit-mask-image: none; } }
.kernkiezer-in::-webkit-scrollbar { display: none; }
.kernkiezer-in a { flex: 0 0 auto; scroll-snap-align: start; padding: .35rem .85rem; border-radius: var(--radius-pill);
                   border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none;
                   font-size: var(--font-size-small); font-weight: 500; line-height: 1.4;
                   transition: background-color 120ms ease, border-color 120ms ease; }
@media (hover: hover) and (pointer: fine) { .kernkiezer-in a:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); } }
.kernkiezer-in a[aria-current="page"] { background: var(--color-action-bg); color: var(--color-action-fg); border-color: var(--color-action-bg); }
.kernkiezer-label { flex: 0 0 auto; align-self: center; font-size: var(--font-size-meta); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-right: var(--space-1); }

/* ---------------------------------------------------------- knoppen */
.knop { display: inline-block; padding: .6rem 1.1rem; border-radius: var(--radius-s); text-decoration: none;
        font-weight: 600; font-size: var(--font-size-small); line-height: 1.3; border: 1px solid transparent;
        transition: transform 160ms var(--ease-out), background-color 120ms ease; cursor: pointer; }
.knop:active { transform: scale(.97); }
.knop-primair { background: var(--color-action-bg); color: var(--color-action-fg); }
@media (hover: hover) { .knop-primair:hover { background: var(--color-action-bg-hover); } }
.knop-primair:disabled { opacity: .6; cursor: default; }
.knop-stil { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
@media (hover: hover) { .knop-stil:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); } }
.acties { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
.kop-cta { padding: .45rem .8rem; font-size: var(--font-size-meta); margin-left: auto; }
.kop-cta-kort { display: none; }
/* Vanaf 52rem staat het menu in de balk, maar de balk is een wrap van
   hoogstens 64rem (1024 px). Met acht menupunten (Foto's erbij op 12 oktober
   2026) past daar nooit woordmerk, vol menu en de lange knop samen in: boven
   84rem liep de tekst alsnog over het logo. Daarom op elke brede zetting
   dezelfde compacte zetting: de menupunten dichter op elkaar, de lange knop
   uit het menu verborgen en in plaats daarvan de korte knop Insturen
   achteraan. Tussen 52 en 68rem (een kleine laptop) wijkt ook het woordmerk;
   het beeldmerk draagt de naam al. */
@media (min-width: 52rem) {
  #hoofdnavigatie a { padding: var(--space-2) .55rem; font-size: .95rem; }
  #hoofdnavigatie .knop { display: none; }
  .kop-cta { display: inline-block; order: 10; margin-left: var(--space-2); }   /* achteraan, rechts van het menu */
  .nav { margin-left: auto; }
  .kop-cta-lang { display: none; }
  .kop-cta-kort { display: inline; }
}
@media (min-width: 52rem) and (max-width: 67.99rem) { .merk-naam { display: none; } }
/* Met grotere tekst (Leesbaarheid) groeit de kop mee, maar een media query
   meet in de standaardmaat van de browser en schuift niet op. Daarom hier de
   grenzen van hierboven maal 1,1875 en 1,375: tot daar blijft het menu achter
   de menuknop en wijkt het woordmerk. */
@media (min-width: 52rem) and (max-width: 80.74rem) { :root[data-tekst="groter"] .merk-naam { display: none; } }
@media (min-width: 52rem) and (max-width: 93.49rem) { :root[data-tekst="grootst"] .merk-naam { display: none; } }
/* en op een telefoon: de grens van 24rem uit het blok hieronder, maal dezelfde factor */
@media (max-width: 28.49rem) { :root[data-tekst="groter"] .merk-naam { display: none; } }
@media (max-width: 32.99rem) { :root[data-tekst="grootst"] .merk-naam { display: none; } }
@media (min-width: 52rem) and (max-width: 61.74rem) {
  :root[data-tekst="groter"] .nav-knop { display: inline-flex; }
  :root[data-tekst="groter"] #hoofdnavigatie { display: none; }
  :root[data-tekst="groter"] .nav-schakel:checked ~ #hoofdnavigatie {
    display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--space-3) var(--space-4) var(--space-4); background: var(--color-surface);
    border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-kaart); }
  :root[data-tekst="groter"] #hoofdnavigatie a { padding: var(--space-3) var(--space-2); font-size: 1rem; font-weight: 600; }
}
@media (min-width: 52rem) and (max-width: 71.49rem) {
  :root[data-tekst="grootst"] .nav-knop { display: inline-flex; }
  :root[data-tekst="grootst"] #hoofdnavigatie { display: none; }
  :root[data-tekst="grootst"] .nav-schakel:checked ~ #hoofdnavigatie {
    display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--space-3) var(--space-4) var(--space-4); background: var(--color-surface);
    border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-kaart); }
  :root[data-tekst="grootst"] #hoofdnavigatie a { padding: var(--space-3) var(--space-2); font-size: 1rem; font-weight: 600; }
}
/* Onder 30rem (een telefoon van 390 px) moet alles in 358 px: beeldmerk 36,
   woordmerk ~125, knop ~70 met zijn korte naam, themaknop 36, menuknop ~46
   en driemaal 8 px tussenruimte. De themaknop blijft: een instelling die je
   gebruikt terwijl je op de pagina bent, hoort in de balk. Onder 24rem
   (360 px) wijkt het woordmerk; het beeldmerk draagt de naam al. */
@media (max-width: 30rem) {
  .kop-in { gap: var(--space-2); }
  .merk img { height: 2.25rem; }
  .nav-thema .thema { width: 2.25rem; height: 2.25rem; }
  .merk-naam { font-size: 1rem; }
  .kop-cta { padding: .4rem .6rem; }
  .kop-cta-lang { display: none; }
  .kop-cta-kort { display: inline; }
}
@media (max-width: 24rem) { .merk-naam { display: none; } }

/* -------------------------------------------------------- pagina's */
main { min-height: 60vh; }
.hero { padding: var(--space-8) 0 var(--space-6); }
.hero-in { display: block; }
.hero-embleem { display: none; }
.hero h1 { max-width: 22ch; }
.hero .lead { margin-top: var(--space-3); }
.hero-donker { background: var(--color-surface-raised); }
.hero-eenvoudig { padding: var(--space-8) 0 var(--space-2); }
.lijstkop { padding: var(--space-6) 0 var(--space-2); }
.lijstkop h1 { margin-bottom: var(--space-2); }
.lijstkop .lead { margin: 0 0 var(--space-2); }
.lijstkop-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.sectiekop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
             margin-block: var(--space-8) var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-text); }
.sectiekop-link { font-size: var(--font-size-small); font-weight: 500; white-space: nowrap; }
.lijst-vlak { padding: 0 0 var(--space-6); }
.leeg { color: var(--color-text-muted); }
.start-tekst { padding-top: var(--space-4); }

.prose { max-width: 68ch; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.6; }
.prose h2 { margin: var(--space-8) 0 var(--space-3); }
.prose h3 { margin: var(--space-6) 0 var(--space-2); }
.prose img { border-radius: var(--radius-s); margin: var(--space-4) 0; }
.prose blockquote { margin: var(--space-6) 0; padding-left: var(--space-4); border-left: 1px solid var(--color-border-strong); color: var(--color-text-muted); font-style: italic; }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }
.prose a { overflow-wrap: anywhere; }

/* ----------------------------------------------------------- filter */
/* De filterbalk: keuzelijsten en een zoekveld op één regel, in de vorm van
   de chips (pil, dunne rand). Een gevulde keuze kleurt licht blauw. De
   pijl is een gedraaid hoekje in currentColor, geen los plaatje. */
.filterbalk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-4); }
.filter-keuze { position: relative; display: inline-flex; }
.filter-keuze select { appearance: none; -webkit-appearance: none; padding: .4rem 2.1rem .4rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
                       background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--font-size-small); line-height: 1.4; cursor: pointer; max-width: 16rem; }
.filter-keuze::after { content: ""; position: absolute; right: .95rem; top: 50%; width: .42rem; height: .42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
                       transform: translateY(-70%) rotate(45deg); pointer-events: none; color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) { .filter-keuze select:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); } }
.filter-actief select { background: var(--color-action-quiet-bg); color: var(--color-action-quiet-fg); border-color: transparent; font-weight: 600; }
.filter-actief::after { color: var(--color-action-quiet-fg); }
.filter-zoek { display: flex; flex: 1 1 14rem; max-width: 24rem; }
.filter-zoek input { width: 100%; padding: .4rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text);
                     font: inherit; font-size: var(--font-size-small); line-height: 1.4; }
.filter-zoek input:focus-visible, .filter-keuze select:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.filter-toon { padding: .4rem .9rem; }
.filter-toon[hidden] { display: none; }   /* .knop zet display en wint anders van het hidden-attribuut */
.filter-wis { font-size: var(--font-size-small); color: var(--color-text-muted); text-decoration: underline; margin-left: var(--space-1); }
@media (max-width: 40rem) {
  .filterbalk { padding: var(--space-1) 0 var(--space-3); }
  .filter-zoek { flex-basis: 100%; max-width: none; }
  .filter-keuze { flex: 1 1 calc(50% - var(--space-1)); }
  .filter-keuze select { width: 100%; max-width: none; }
}

/* de chiprij die nog op de kernpagina en in de gids staat (soorten met aantal) */
.filter-rij { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.filter-label { font-size: var(--font-size-meta); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-right: var(--space-1); }
.filter-rij a, .kernen-rij .knop { display: inline-block; padding: .3rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
              font-size: var(--font-size-small); text-decoration: none; color: var(--color-text); background: var(--color-surface); line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .filter-rij a:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); } }
.filter-rij a[aria-current="page"] { background: var(--color-action-bg); color: var(--color-action-fg); border-color: var(--color-action-bg); }
/* de rubrieken boven het nieuws: dezelfde chips, als eigen regel boven de filterbalk */
.nieuws-rubrieken { padding: var(--space-2) 0 0; }

/* ------------------------------------------------------------ leden */
.kop-lid { display: inline-flex; align-items: center; gap: .3rem; }
.veld-uitleg-inline { font-weight: 400; color: var(--color-text-muted); }
.profiel h2 { font-size: 1.1rem; margin: var(--space-6) 0 var(--space-2); }
.redactie-tabs { margin: var(--space-2) 0 var(--space-4); }
.tabel-scroll { overflow-x: auto; }
.leden-tabel { border-collapse: collapse; width: 100%; font-size: var(--font-size-small); }
.leden-tabel th, .leden-tabel td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.leden-tabel form { margin: 0; }
.opschoon-tabel td { max-width: 28rem; }
.opschoon-weg td { color: var(--color-text-muted); text-decoration: line-through; }
.opschoon-weg td:first-child { text-decoration: none; }

/* --------------------------------------------------------- reacties */
/* Onder het bericht, in dezelfde kolom als de tekst. Naam, kern en datum
   op één regel, de tekst eronder; geen avatars, geen likes, geen
   antwoorden op antwoorden: een dorpssite is geen forum. */
.reacties { max-width: 72ch; padding: var(--space-4) 0 var(--space-6); }
.reactie-lijst { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.reactie { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.reactie-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0 0 .3rem; font-size: var(--font-size-small); color: var(--color-text-muted); }
.reactie-meta strong { color: var(--color-text); }
.reactie-status { font-style: italic; }
.reactie-wacht { background: var(--color-surface-raised); padding-inline: var(--space-3); border-radius: var(--radius-s); }
.reactie-tekst { white-space: normal; overflow-wrap: anywhere; }
.reactie-weg { display: inline; margin: 0; }
.reactie-form .veld textarea { min-height: 6rem; }
.reactie-inloggen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); }

/* ------------------------------------------------------ aanbiedingen */
/* Kaarten met de banner van de ondernemer (3 op 1), het label Aanbieding
   erboven en de ondernemer eronder. Een sponsor krijgt een dikkere rand. */
.aanbieding-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.aanbieding-kaart a { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--color-text);
                      border: 1px solid var(--color-border); border-radius: var(--radius-m); overflow: hidden; background: var(--color-surface); height: 100%; }
.aanbieding-kaart img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; display: block; }
.aanbieding-kaart strong { padding: 0 var(--space-3); font-size: 1.05rem; line-height: 1.3; }
.aanbieding-kaart .aanbieding-meta { padding: 0 var(--space-3) var(--space-3); font-size: var(--font-size-small); color: var(--color-text-muted); }
.aanbieding-kaart .aanbieding-label { padding: var(--space-2) var(--space-3) 0; }
.aanbieding-sponsor a { border-color: var(--color-graphic-accent); border-width: 2px; }
@media (hover: hover) { .aanbieding-kaart a:hover { border-color: var(--color-border-strong); } .aanbieding-kaart a:hover strong { text-decoration: underline; } }
.aanbieding-label { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.aanbieding .aanbieding-label { margin: 0 0 var(--space-1); }
.aanbieding-banner img { aspect-ratio: 3 / 1; }
.aanbieding .prose { padding-top: var(--space-4); }

/* uitgelichte gidsvermelding: bovenaan met label en een accentrand links */
/* Uitgelicht: het label als pil achter de naam, verder niets. Een balk links
   langs de rij liep bij een reeks uitgelichte vermeldingen als één lange
   streep langs de lijst en zag er op een telefoon uit als een fout. */
.gl-uitgelicht .aanbieding-label { margin-left: .4rem; vertical-align: middle; padding: .1rem .5rem; border-radius: var(--radius-pill);
                                   background: var(--color-graphic-accent-soft); color: var(--color-text-positive); font-size: .66rem; }
.kern-sponsor { margin: var(--space-4) 0 0; }
.kern-sponsor-kop { font-size: var(--font-size-small); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
/* de sponsorkaarten: hoogstens twee, dus niet uitrekken over de volle breedte */
.kern-sponsors { grid-template-columns: repeat(auto-fill, minmax(11rem, 13rem)); }
/* het kleurvlak van de ondernemer (logo_vlak) achter het logo, getemperd in donkere weergave */
.vriend-logo { background: var(--logo-vlak, transparent); }
[data-theme="dark"] .vriend-logo { background: color-mix(in srgb, var(--logo-vlak, transparent) 82%, var(--color-surface)); }
/* een wit logo (logo_donker) staat op een donker vlak, afgeleid van de accentkleur, in beide thema's */
.logo-donker { background: color-mix(in srgb, var(--color-graphic-accent) 80%, black); }
/* geen banner, wel een logo: op een vlak van 3 op 1, op eigen verhouding */
/* Het vlak is altijd 3 op 1, net als een banner, wat de verhouding van het
   logo ook is. Het logo staat er absoluut in en wordt door de randen begrensd:
   in een gewone flexbox rekt een staand logo het vlak anders op. */
.aanbieding-logo { display: block; position: relative; aspect-ratio: 3 / 1; width: 100%; overflow: hidden; background: var(--logo-vlak, var(--color-graphic-accent-soft));
                   border-bottom: 1px solid var(--color-border); }
.aanbieding-logo.logo-donker { background: color-mix(in srgb, var(--color-graphic-accent) 80%, black); }
/* De kleur van de ondernemer (logo_vlak) komt als --logo-vlak mee. In donkere
   weergave gaat er een vleug van het donkere oppervlak doorheen, zodat een wit
   vlak niet als een lamp in de kaart staat. Alleen op data-theme: de kit zet
   dat attribuut ook bij een donker systeemthema. */
[data-theme="dark"] .aanbieding-logo { background: color-mix(in srgb, var(--logo-vlak, var(--color-graphic-accent-soft)) 82%, var(--color-surface)); }
[data-theme="dark"] .aanbieding-logo.logo-donker { background: color-mix(in srgb, var(--color-graphic-accent) 80%, black); }
.aanbieding-kaart .aanbieding-logo img, figure.aanbieding-logo img { position: absolute; inset: 0; margin: auto; width: auto; height: auto;
    max-width: calc(100% - 2 * var(--space-4)); max-height: calc(100% - 2 * var(--space-3)); aspect-ratio: auto; object-fit: contain; border-radius: 0; }
figure.aanbieding-logo { margin: var(--space-4) 0; border-radius: var(--radius-m); max-width: 68ch; border: 1px solid var(--color-border); }

/* ------------------------------------------------------ tariefkaart */
/* De pakketten op /adverteren als kaarten: naam, prijs groot, looptijd, wat
   erin zit en de knop. Het jaarpakket (accent) krijgt de accentrand en de
   primaire knop; de rest is even zwaar. */
.tariefkaart { padding: var(--space-2) 0 var(--space-5); }
.tarief-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tarief { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); }
.tarief-accent { border-color: var(--color-graphic-accent); border-width: 2px; }
.tarief-naam { margin: 0; font-size: 1.05rem; }
.tarief-prijs { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; }
.tarief-prijs strong { font-size: 1.6rem; line-height: 1.1; }
.tarief-prijs span { font-size: var(--font-size-small); color: var(--color-text-muted); }
.tarief-looptijd { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.tarief-tekst { margin: 0; }
.tarief-punten { margin: 0; padding-left: 1.1rem; font-size: var(--font-size-small); color: var(--color-text-muted); display: grid; gap: .25rem; }
.tarief-actie { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-2); }

/* ------------------------------------------------------ vrienden */
.vrienden { padding: var(--space-2) 0 var(--space-5); }
.vrienden-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.vriend a { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: var(--space-4); text-decoration: none; color: var(--color-text); text-align: center;
            border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); height: 100%; box-sizing: border-box; }
.vriend-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 6rem; margin-bottom: var(--space-2); border-radius: var(--radius-s); }
.vriend-logo img { max-width: 80%; max-height: calc(100% - 1rem); width: auto; height: auto; object-fit: contain; }   /* een halve rem lucht boven en onder */
.vriend-kern { font-size: var(--font-size-small); color: var(--color-text-muted); }
@media (hover: hover) { .vriend a:hover { border-color: var(--color-border-strong); } .vriend a:hover strong { text-decoration: underline; } }

/* ---------------------------------------------------------- vastgoed */
/* lucht tussen de kernfilters en de kaarten eronder */
.filter-rij + .vastgoed-raster, .filter-rij + .aanbieding-raster, .filter-rij + .leeg { margin-top: var(--space-4); }
.vastgoed-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.vastgoed-kaart a { position: relative; display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--color-text);
                    border: 1px solid var(--color-border); border-radius: var(--radius-m); overflow: hidden; background: var(--color-surface); height: 100%; }
.vastgoed-kaart img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vastgoed-kaart strong { padding: var(--space-3) var(--space-3) 0; font-size: 1.1rem; }
.vastgoed-adres { padding: 0 var(--space-3); font-weight: 600; }
.vastgoed-meta { padding: 0 var(--space-3) var(--space-3); font-size: var(--font-size-small); color: var(--color-text-muted); }
.vastgoed-label { position: absolute; top: var(--space-2); left: var(--space-2); padding: .15rem .6rem; border-radius: var(--radius-pill);
                  background: var(--color-action-bg); color: var(--color-action-fg, #fff); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.vastgoed-verkocht .vastgoed-label, .vastgoed-verhuurd .vastgoed-label { background: var(--color-text-muted); }
.vastgoed-verkocht img, .vastgoed-verhuurd img { filter: grayscale(.6); opacity: .8; }
@media (hover: hover) { .vastgoed-kaart a:hover { border-color: var(--color-border-strong); } }
.vastgoed-funda { margin: var(--space-4) 0 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.vastgoed-prijs { font-weight: 700; color: var(--color-text); }
.vastgoed-feiten { margin: 0 0 var(--space-4); }
/* De bronregel onder de knoppen stond er direct tegenaan; een regel lucht ertussen. */
.vastgoed-bron { margin-top: var(--space-4); }

/* ---------------------------------------------------------- vacatures */
/* Kaarten zonder foto: label, functie, organisatie en de regel dienstverband, uren, kern. */
.vacature-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.filter-rij + .vacature-raster { margin-top: var(--space-4); }
.vacature-kaart a { display: flex; flex-direction: column; gap: .25rem; padding: var(--space-3); text-decoration: none; color: var(--color-text);
                    border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); height: 100%; box-sizing: border-box;
                    border-top: 4px solid var(--color-text-accent); }
.vacature-vrijwilliger a { border-top-color: var(--color-graphic-accent); }
.vacature-kaart strong { font-size: 1.05rem; line-height: 1.3; }
.vacature-org { font-weight: 600; }
.vacature-meta { font-size: var(--font-size-small); color: var(--color-text-muted); }
@media (hover: hover) { .vacature-kaart a:hover { border-color: var(--color-border-strong); border-top-color: var(--color-text-accent); } .vacature-kaart a:hover strong { text-decoration: underline; } }

/* ---------------------------------------------------------- lichtbak */
/* Over de hele pagina, donker, het beeld zo groot als past; pijlen aan de
   zijkanten, kruis rechtsboven, onderschrift onder het beeld. */
.lichtbak { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
            background: rgba(0, 18, 30, .92); padding: var(--space-4); }
.lichtbak[hidden] { display: none; }
.lichtbak-open { overflow: hidden; }
.lichtbak-figuur { margin: 0; max-width: min(96vw, 1400px); max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.lichtbak-beeld { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: var(--radius-s); background: white; }
.lichtbak-onderschrift { color: rgba(255, 255, 255, .85); font-size: var(--font-size-small); text-align: center; }

/* De bekendmaking (src/Bekendmaking.php): het ingebouwde dialoogelement,
   in het midden van het scherm; op een telefoon een kaart onderaan. */
.melding { border: 0; border-radius: var(--radius-m); padding: 0; width: min(92vw, 34rem); max-width: none;
           background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-kaart); }
.melding::backdrop { background: rgba(0, 18, 30, .6); }
.melding-in { position: relative; margin: 0; padding: var(--space-6) var(--space-6) var(--space-5); }
.melding-in > img { height: 3rem; width: auto; margin-bottom: var(--space-3); }
.melding-label { margin: 0 0 var(--space-1); font-size: var(--font-size-meta); font-weight: 600; text-transform: uppercase;
                 letter-spacing: .06em; color: var(--color-text-accent); }
.melding-in h2 { margin: 0 0 var(--space-3); font-size: 1.5rem; line-height: 1.2; }
.melding-tekst p { margin: 0 0 var(--space-3); }
.melding-in .acties { margin-top: var(--space-4); }
.melding-sluit { position: absolute; top: var(--space-3); right: var(--space-3); background: none; border: 0; font: inherit;
                 font-size: 1.6rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: .1rem .4rem; }
.melding-sluit:hover { color: var(--color-text); }
@media (max-width: 40rem) {
  .melding { margin: auto 0 0; width: 100vw; border-radius: var(--radius-m) var(--radius-m) 0 0; }
  .melding-in { padding: var(--space-5) var(--space-4) var(--space-4); }
}
.lichtbak-onderschrift[hidden] { display: none; }
.lichtbak-sluit, .lichtbak-pijl { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: white; cursor: pointer;
                                  border-radius: 50%; width: 3rem; height: 3rem; font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lichtbak-sluit:hover, .lichtbak-pijl:hover { background: rgba(255, 255, 255, .25); }
.lichtbak-sluit:focus-visible, .lichtbak-pijl:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.lichtbak-sluit { top: var(--space-4); right: var(--space-4); font-size: 1.2rem; }
.lichtbak-pijl { top: 50%; transform: translateY(-50%); font-size: 2.4rem; padding-bottom: .2rem; }
.lichtbak-pijl[hidden] { display: none; }
.lichtbak-vorige { left: var(--space-3); }
.lichtbak-volgende { right: var(--space-3); }
.artikel-beeld a, .gids-beelden a { cursor: zoom-in; }
@media (max-width: 40rem) { .lichtbak-pijl { width: 2.4rem; height: 2.4rem; font-size: 1.8rem; } .lichtbak-beeld { max-height: 78vh; } }

/* --------------------------------------------------- bekendmakingen */
/* Een lijst zonder beeld: de overheid levert geen foto en die zou ook niets
   zeggen. Datum en soort boven de kop, het adres eronder, verder niets. */
.bm-lijst { list-style: none; margin: 0; padding: 0; }
.bm-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.bm-item:last-child { border-bottom: 0; }
.bm-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0 0 .2rem; font-size: var(--font-size-meta); color: var(--color-text-muted); }
.bm-titel { font-size: 1.05rem; line-height: 1.35; margin: 0; font-weight: 600; }
.bm-titel a { color: inherit; text-decoration: none; }
.bm-titel a:hover { text-decoration: underline; }
.bm-adres { margin: .15rem 0 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.bm-bron { margin: var(--space-4) 0 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.bm-kort .bm-titel { font-size: 1rem; }

/* ----------------------------------------------------------- nieuws */
.nieuws-lijst { list-style: none; margin: 0; padding: 0; }
.nl-item { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.nl-item.nl-zonder-beeld { grid-template-columns: minmax(0, 1fr); }
.nl-item:first-child { padding-top: 0; }
/* de eerste met beeld is op elk scherm de grote kaart; de rest zijn rijen met miniatuur */
.nieuws-lijst > .nl-item:first-child:not(.nl-zonder-beeld) { grid-template-columns: minmax(0, 1fr); }
.nl-beeld img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-m); background: var(--color-surface-raised); }
.nl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0 0 var(--space-1); font-size: var(--font-size-meta); color: var(--color-text-muted); }
.kern-label { color: var(--color-text-accent); font-weight: 600; text-decoration: none; }
.kern-label:hover { text-decoration: underline; }
.kern-label-gemeente { color: var(--color-text-muted); font-weight: 500; }
.rubriek-label { color: var(--color-text-positive); font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
.rubriek-voorbij { color: var(--color-text-muted); }
.nl-titel { font-size: 1.25rem; line-height: 1.25; margin: 0 0 var(--space-1); }
.nl-titel a { color: inherit; text-decoration: none; }
.nl-titel a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nl-samenvatting { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); max-width: 62ch; }
/* de eerste met beeld op de startpagina en in elk overzicht is de grote kaart */
.nieuws-lijst > .nl-item:first-child:not(.nl-zonder-beeld) .nl-titel { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }
@media (min-width: 40rem) {
  .nl-item { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-4); }
  .nl-item.nl-zonder-beeld { grid-template-columns: minmax(0, 1fr); }
  .nieuws-lijst > .nl-item:first-child:not(.nl-zonder-beeld) { grid-template-columns: minmax(0, 1fr); }
  .nieuws-lijst > .nl-item:first-child:not(.nl-zonder-beeld) .nl-beeld img { aspect-ratio: 16 / 9; }
  .nl-titel { font-size: 1.3rem; }
}
@media (max-width: 39.99rem) {
  .nl-item:not(:first-child) .nl-titel { font-size: 1.1rem; }
  .nl-item:not(:first-child) .nl-samenvatting { display: none; }
}
.paginering { display: flex; justify-content: center; align-items: center; gap: var(--space-4); padding: var(--space-4) 0 var(--space-8); color: var(--color-text-muted); font-size: var(--font-size-small); }

/* ---------------------------------------------------------- artikel */
.artikel .wrap { max-width: 72ch; }
.artikel-kop { padding-top: var(--space-6); }
.artikel-kop h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); max-width: 26ch; margin: var(--space-1) 0 var(--space-3); }
.artikel-kop .lead { font-size: 1.2rem; }
.artikel-beeld { margin: var(--space-4) 0; max-width: 68ch; }
/* een staande foto wordt als kop niet hoger dan dit; de lichtbak toont hem helemaal */
.artikel-beeld img { width: 100%; max-height: 34rem; object-fit: cover; border-radius: var(--radius-m); }
.artikel-beeld figcaption { font-size: var(--font-size-meta); color: var(--color-text-muted); margin-top: var(--space-2); }
/* een poster (staand of vierkant) heel in het kader, op een zacht vlak; afsnijden neemt de tekst weg */
.artikel-beeld-poster img { aspect-ratio: 16 / 9; object-fit: contain; background: var(--color-graphic-accent-soft); }
.artikel .wrap > .prose { padding: var(--space-2) 0 var(--space-6); }
.artikel-bron, .artikel-tags { color: var(--color-text-muted); font-size: var(--font-size-small); }
.tag { display: inline-block; padding: .1rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--font-size-meta); text-decoration: none; color: var(--color-text); margin: 0 .15rem .3rem 0; }

/* ----------------------------------------------------------- agenda */
.agenda-maand { margin: var(--space-6) 0 var(--space-2); font-size: var(--font-size-meta); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.agenda-lijst { list-style: none; margin: 0; padding: 0; }
.ag-item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.ag-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start;
            background: var(--color-date-bg); color: var(--color-date-fg); border-radius: var(--radius-s); padding: .35rem 0 .3rem; line-height: 1; }
.ag-dag { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-weekdag { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; opacity: .9; }
.ag-titel { font-size: 1.1rem; margin: .1rem 0 .2rem; }
.ag-titel a { color: inherit; text-decoration: none; }
.ag-titel a:hover { text-decoration: underline; }
.ag-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.agenda-feiten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem var(--space-4); margin: var(--space-4) 0; max-width: 68ch; }
.agenda-feiten dt { color: var(--color-text-muted); font-size: var(--font-size-meta); text-transform: uppercase; letter-spacing: .05em; padding-top: .2rem; }
.agenda-feiten dd { margin: 0; }
.agenda-kort { list-style: none; margin: 0; padding: 0; }
.agenda-kort li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); align-items: baseline; }
.agenda-kort time { color: var(--color-text-accent); font-weight: 600; font-size: var(--font-size-small); }
.agenda-kort a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.agenda-kort a:hover { text-decoration: underline; }
.agenda-kort .nl-kernen { display: block; font-size: var(--font-size-meta); }

/* ------------------------------------------------------------- gids */
.raster { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.kernen-raster { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }
.kaart { display: block; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-m);
         text-decoration: none; color: inherit; background: var(--color-surface); transition: border-color 120ms ease; }
@media (hover: hover) { .kaart:hover { border-color: var(--color-border-strong); } }
.kaart h2 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.kaart p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.gids-lijst { list-style: none; margin: 0; padding: 0; }
.gl-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.gl-item:has(.gl-beeld) { grid-template-columns: 4rem minmax(0, 1fr); }
.gl-beeld img { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius-s); background: var(--color-surface-raised); }
.gl-titel { font-size: 1.05rem; margin: 0 0 .15rem; }
.gl-titel a { color: inherit; text-decoration: none; }
.gl-titel a:hover { text-decoration: underline; }
.gl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.gids-beelden { margin: var(--space-4) 0; max-width: 68ch; }
/* in de gids staan foto's en logo's door elkaar: contain houdt een logo heel, met lucht in het vlak */
/* Met de raster-klasse erbij, want .fotos-raster img staat later in dit bestand en zou anders winnen.
   De tegel is altijd licht: de logo's zijn de lichte zetting, met donkere inkt, ook in de donkere stand. */
.fotos-raster.gids-beelden img { object-fit: contain; padding: var(--space-2); box-sizing: border-box; background: white; }
/* een foto (foto: true bij het beeld) vult de tegel; de lichtbak toont hem heel */
.fotos-raster.gids-beelden .beeld-foto img { object-fit: cover; padding: 0; }
.gids-beelden a:hover img { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
/* een wit logo (donker: true bij het beeld) staat op een donker vlak, in de lijst en op de vermelding */
.fotos-raster.gids-beelden .beeld-donker img, .gl-beeld.beeld-donker img { background: color-mix(in srgb, var(--color-graphic-accent) 80%, black); }

/* ------------------------------------------------------------ foto's */
.fotos-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.fotos-raster a { text-decoration: none; color: inherit; display: block; }
.fotos-raster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: var(--color-surface-raised); margin-bottom: var(--space-1); }
.fotos-raster span { font-size: var(--font-size-small); font-weight: 500; }
.fotos-raster small { display: block; color: var(--color-text-muted); font-size: var(--font-size-meta); }
.fotos-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.fotos-rechten { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); max-width: 62ch; }
/* de landkaart: het stilstaande kaartje op een album, de overzichtskaart en de speldkiezer in een formulier;
   de tegels komen via /kaart/tegel van deze site, de bron staat eronder (CC BY van het Kadaster).
   Niet .kaart: dat is de kaart als tegel (gids, kernen), zie hierboven; de botsing verborg de kernnamen. */
.landkaart { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-m); background: var(--color-surface-raised); overflow: hidden; border: 1px solid var(--color-border); }
.kaart-overzicht { aspect-ratio: auto; height: min(70vh, 40rem); }
.kaart-kiezer { aspect-ratio: auto; height: 18rem; }
.kaart-leeg { display: flex; align-items: center; justify-content: center; color: var(--color-text-accent); font-weight: 600; }
.kaart-figuur { margin: var(--space-4) 0; max-width: 68ch; }
.kaart-figuur img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-m); border: 1px solid var(--color-border); display: block; }
.kaart-figuur figcaption, .kaart-bron { font-size: var(--font-size-meta); color: var(--color-text-muted); margin-top: var(--space-2); }
.kaart-kiezer-blok { margin-top: var(--space-2); }
.kaart-kiezer-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.veld-kaart .veld-label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.kaart-popup { display: block; color: inherit; text-decoration: none; }
.kaart-popup img { width: 100%; display: block; border-radius: var(--radius-s); margin-bottom: .3rem; }
.kaart-popup strong { display: block; } .kaart-popup span { color: var(--color-text-muted); font-size: var(--font-size-meta); }
.leaflet-container { font: inherit; }
.leaflet-container a { color: var(--color-text-accent); }
/* in de donkere stand blijft de kaart licht: een kaart is een document, geen vlak */

/* ------------------------------------------------------ kernpagina */
.kern-kop { padding: var(--space-6) 0 var(--space-2); }
.kern-kop .acties { margin-top: var(--space-3); }
.kern-kort { max-width: 60ch; margin-top: var(--space-3); }
/* In het kort: dezelfde termenlijst als bij een agendapunt, in twee of
   drie kolommen naast elkaar op een breed scherm. */
.kern-feiten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem var(--space-4); margin: var(--space-4) 0 var(--space-2); max-width: 68ch; }
.kern-feiten dt { color: var(--color-text-muted); font-size: var(--font-size-meta); text-transform: uppercase; letter-spacing: .05em; padding-top: .2rem; }
.kern-feiten dd { margin: 0; font-weight: 600; }
.kern-feit-noot { font-weight: 400; color: var(--color-text-muted); }
.kern-feiten-bron { font-size: var(--font-size-meta); color: var(--color-text-muted); margin: 0; }
.kern-feiten-bron a { color: inherit; }
.kern-beeld { margin: 0 0 var(--space-4); }
.kern-beeld img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 60%; border-radius: var(--radius-m); background: var(--color-surface-raised); }
.kaart-kern { padding: 0; overflow: hidden; }
.kaart-kern img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kaart-kern h2 { margin: var(--space-3) var(--space-4) var(--space-1); }
.kaart-kern p { margin: 0 var(--space-4) var(--space-4); }

/* -------------------------------------------------------- formulier */
.formulier { padding: var(--space-6) 0; }
.formulier-in { display: grid; gap: var(--space-6) var(--space-8); }
/* Het formulier rechts over de volle hoogte, links de geruststelling met
   daaronder de lopende tekst van de pagina; zo staat wat je kunt insturen
   naast het formulier en niet eronder. */
@media (min-width: 52rem) {
  .formulier-in { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); grid-template-areas: "naast hoofd" "onder hoofd"; align-items: start; }
  .formulier-naast { grid-area: naast; }
  .formulier-hoofd { grid-area: hoofd; }
  .formulier-onder { grid-area: onder; }
}
.formulier-hoofd h2 { margin-bottom: var(--space-3); }
.veld { margin: 0 0 var(--space-4); }
.veld label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: var(--font-size-small); }
.veld input, .veld textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-s);
                              background: var(--color-surface); color: var(--color-text); font-size: 1rem; }
.veld input:focus-visible, .veld textarea:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 0; border-color: var(--color-focus-ring); }
.veld-hint, .veld-uitleg { display: block; color: var(--color-text-muted); font-size: var(--font-size-meta); margin-top: .3rem; }
.veldfout { display: block; color: var(--color-feedback-danger-fg); font-size: var(--font-size-small); margin-top: .3rem; }
.verplicht { color: var(--color-text-accent); }
.optioneel { color: var(--color-text-muted); font-weight: 400; }
.veld-verplicht-uitleg, .form-belofte { color: var(--color-text-muted); font-size: var(--font-size-meta); }
.honeypot { position: absolute; left: -9999px; }
.melding { padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); margin-bottom: var(--space-4); border: 1px solid var(--color-border); }
.melding-goed { background: var(--color-graphic-accent-soft); border-color: var(--color-graphic-accent); }
.melding-fout { background: var(--color-surface-raised); border-color: var(--color-border-strong); }
.geruststelling .gerust-vlak { padding: var(--space-4); background: var(--color-surface-raised); border-radius: var(--radius-m); }
.formulier-naast h2 { font-size: 1.1rem; margin-bottom: var(--space-2); }

/* -------------------------------------------------------------- cta */
.cta { padding: var(--space-8) 0; }
.cta-in { background: var(--color-surface-raised); border-radius: var(--radius-m); padding: var(--space-6); }
.cta h2 { margin-bottom: var(--space-2); }
.cta p { color: var(--color-text-muted); max-width: 56ch; }

/* ------------------------------------------------------------- voet */
/* Rustig en op orde: de lucht met de dorpenlijn, daaronder vier kolommen op
   een lijn in de accentkleur (het gras waar de dorpenlijn op eindigt), en
   één strook onderaan met de naam, het juridische en wie de site bouwde.
   Alles uit de tokens; de lucht is een getemperd beeld (tools/lucht-temperen.py). */
.voet { margin-top: var(--space-12); background: var(--color-surface-raised); color: var(--color-text); }
.voet-dorpen { margin-top: var(--space-6); line-height: 0; position: relative;
               background: var(--color-surface) url('/assets/lucht-dag.webp') center bottom / cover no-repeat;
               /* de horizon over de volle breedte, net als het beeld; 3 px zichtbaar, het beeld overlapt er 2 */
               border-bottom: 5px solid var(--color-graphic-accent); }
/* twee pixels over de horizonlijn heen: de onderste rij van het beeld is halfdoorzichtig en liet de lucht als streepje zien */
.voet-dorpen img { display: block; width: 100%; height: auto; position: relative; margin-bottom: -2px; }
/* dag of nacht: de nachtversie alleen in de donkere stand, via de knop of via het systeem.
   Geen media query erbij: het themascript van de kit zet data-theme="dark" ook als het
   systeem donker is, en haalt het weg als iemand licht kiest. */
.voet-dorpen .dorpen-nacht { display: none; }
:root[data-theme="dark"] .voet-dorpen { background-image: url('/assets/lucht-nacht.webp'); }
:root[data-theme="dark"] .voet-dorpen .dorpen-dag { display: none; }
:root[data-theme="dark"] .voet-dorpen .dorpen-nacht { display: block; }
@media (min-width: 40rem) { .voet-dorpen img { aspect-ratio: 3168 / 874; object-fit: cover; object-position: center top; } }
/* de horizon: een lijn in de accentkleur waar het gras van de dorpenlijn op eindigt */
.voet-in { display: grid; gap: var(--space-6) var(--space-8); padding: var(--space-8) 0 var(--space-8) }
/* op een telefoon de twee linklijsten naast elkaar, merk en contact over de volle breedte */
@media (min-width: 30rem) { .voet-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voet-merk, .voet-contact { grid-column: 1 / -1; } }
@media (min-width: 40rem) { .voet-contact { grid-column: auto; } }
@media (min-width: 64rem) { .voet-in { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; } .voet-merk { grid-column: auto; padding-right: var(--space-6); } }
.voet-merk img { display: block; width: 6rem; height: auto; }
.voet-payoff { margin: var(--space-3) 0 0; font-weight: 600; max-width: 22ch; }
.voet-stichting { margin: var(--space-2) 0 0; font-size: var(--font-size-small); color: var(--color-text-muted); max-width: 34ch; line-height: 1.6; }
.voet h2 { font-size: var(--font-size-meta); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet-kolom li { line-height: 1.5; margin: 0 0 .55rem; white-space: normal; overflow-wrap: anywhere; }
.voet a { color: var(--color-text); text-decoration: none; transition: color .2s; }
.voet a:hover { color: var(--color-text-accent); text-decoration: underline; text-underline-offset: .2em; }
.voet-kolom a[aria-current="page"] { color: var(--color-text-accent); font-weight: 600; }
.voet address { font-style: normal; line-height: 1.7; margin: 0 0 var(--space-3); }
/* de sociale media: ronde knoppen van 2.75rem, alleen het pictogram, de naam in het aria-label */
.voet-socials { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.voet-socials a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
                  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); transition: border-color .2s, color .2s, background .2s; }
.voet-socials a:hover { border-color: var(--color-text-accent); color: var(--color-text-accent); text-decoration: none; }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding: var(--space-4) 0 var(--space-6);
              border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-meta); }
.voet-onder p { margin: 0; }
.voet-onder-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.voet-onder a { color: inherit; }
.voet-onder a:hover { color: var(--color-text); }
.voet-ontwikkeld a { text-decoration: underline; text-underline-offset: .15em; }
.voet-leden { display: flex; gap: var(--space-4); width: 100%; }
@media (prefers-reduced-motion: reduce) { .voet a, .voet-socials a { transition: none; } }
.app-stappen { padding-left: 1.2rem; }
.app-stappen li { margin-bottom: var(--space-2); }
.app-pagina h2 { font-size: 1.2rem; margin: var(--space-5) 0 var(--space-2); }
.voet-socials { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.voet-socials a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.voet-socials a:hover span { text-decoration: underline; }
.voet-onder p { margin: 0; }
.voet-ontwikkeld { margin-top: var(--space-2) !important; }
.voet-ontwikkeld a { color: inherit; text-decoration: underline; }
.voet-leden { display: flex; gap: var(--space-4); margin-top: var(--space-3); }

/* ------------------------------------------------------------ print */
@media print {
  .kop, .kernkiezer, .voet, .filterbalk, .paginering, .cta { display: none; }
  body { color: #000; background: #fff; }
}

/* ======================================================================
   Vrolijker, in het eigen palet: de illustraties dragen de kleur, het
   groen krijgt vlakken in plaats van alleen labels, en niets staat leeg.
   ====================================================================== */

/* de agenda op de start op een groen veld: het eerste wat je ziet is kleur */
.start-agenda { background: var(--color-graphic-accent-soft); padding: var(--space-6) 0; }
.start-agenda .sectiekop { margin-top: 0; border-bottom-color: var(--color-graphic-accent); }
.start-agenda .ag-item { border-bottom-color: var(--color-border); }
.sectiekop { border-bottom: 3px solid var(--color-graphic-accent); }
.sectiekop-link { color: var(--color-text-accent); }

/* nieuws: elke rij heeft beeld; een illustratie is te herkennen aan de rand */
.nl-illustratie .nl-beeld img { background: var(--color-graphic-accent-soft); }
/* een illustratie is geen foto: als opening blijft hij een band, geen hero */
.nieuws-lijst > .nl-item:first-child.nl-illustratie .nl-beeld img { aspect-ratio: 21 / 9; max-height: 18rem; object-position: center 62%; }
.artikel-illustratie img { aspect-ratio: 16 / 7; object-fit: cover; object-position: center 60%; }
/* een klein beeld (logo, miniatuur) wordt niet opgeblazen: op eigen formaat, gecentreerd op een vlak */
.artikel-beeld-klein { background: var(--color-graphic-accent-soft); border-radius: var(--radius-m); padding: var(--space-4); }
.artikel-beeld-klein img { width: auto; height: auto; max-width: 100%; max-height: 28rem; display: block; margin: 0 auto; border-radius: 0; }   /* op eigen maat, niet groter dan het bestand */
.artikel-beeld-klein figcaption { text-align: center; }
/* een staand of vierkant beeld van voldoende maat: beeldvullend in 16:7, zoals de opening van de lijst */
.artikel-beeld-staand img { aspect-ratio: 16 / 7; object-fit: cover; object-position: center 35%; }
/* staand, vierkant of heel klein beeld (beeld_klein): vult de hoogte van het kader, verhouding blijft */
.nl-klein .nl-beeld img { object-fit: contain; background: var(--color-graphic-accent-soft); }
/* als opening is een donker vlak links en rechts te veel: dan wel beeldvullend, maar lager
   gesneden (16:7) zodat van een staand of vierkant beeld alleen boven en onder wat wegvalt */
@media (min-width: 40rem) {
  .nieuws-lijst > .nl-item:first-child.nl-klein .nl-beeld img { object-fit: cover; aspect-ratio: 16 / 7; object-position: center 35%; }
}

/* agenda: miniatuur, datumblok, tekst */
.ag-met-beeld { grid-template-columns: 5rem 3.25rem minmax(0, 1fr); }
.ag-beeld img { width: 5rem; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-s); background: var(--color-graphic-accent-soft); }
.ag-poster img { object-fit: contain; }   /* een poster in de lijst heel, niet afgesneden */
@media (max-width: 30rem) { .ag-met-beeld { grid-template-columns: 3.25rem minmax(0, 1fr); } .ag-beeld { display: none; } }

/* gids: placeholder per soort in plaats van een gat */
.gl-met-beeld { grid-template-columns: 4rem minmax(0, 1fr); }
.gl-placeholder img { object-fit: cover; background: var(--color-graphic-accent-soft); }

/* de negen dorpen als tegels op de start */
.kern-tegels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 40rem) { .kern-tegels { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .kern-tegels { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.kern-tegels a { display: block; text-decoration: none; color: var(--color-text); border-radius: var(--radius-m); overflow: hidden;
                 border: 1px solid var(--color-border); background: var(--color-surface); transition: transform 160ms var(--ease-out), border-color 120ms ease; }
.kern-tegels a:active { transform: scale(.97); }
@media (hover: hover) { .kern-tegels a:hover { border-color: var(--color-action-bg); } }
.kern-tegels img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 40%; }
.kern-tegels span { display: block; padding: .45rem .6rem; font-weight: 600; font-size: var(--font-size-small); text-align: center; }

/* insturen: vier ingangen, dan het formulier */
.inzend-keuze { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-4); }
@media (min-width: 40rem) { .inzend-keuze { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inzend-kaart { display: block; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-m);
                text-decoration: none; color: var(--color-text); background: var(--color-surface); }
.inzend-kaart strong { display: block; }
.inzend-kaart span { font-size: var(--font-size-meta); color: var(--color-text-muted); }
.inzend-actief { background: var(--color-graphic-accent-soft); border-color: var(--color-graphic-accent); }
.inzenden .wrap { max-width: none; }
.inzend-form { max-width: 40rem; }
.inzend-form .veld-kort input { max-width: 12rem; }
.veld-kernen { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.veld-kernen legend { font-weight: 600; font-size: var(--font-size-small); margin-bottom: .3rem; }
.keuzes { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.keuze { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.keuze input { width: 1.1rem; height: 1.1rem; }
.veld-vink .keuze { align-items: flex-start; font-size: var(--font-size-small); }
.veld select { width: 100%; padding: .6rem .8rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-s); background: var(--color-surface); }
.veld input[type="file"] { padding: .5rem 0; border: 0; }

/* redactie: knoppen bij concepten en de beoordelingspagina */
.redactie-knoppen { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-4) 0; }
/* De balk boven de concepten: plakt onder de kop zodat Plaatsen en Weg voor
   de aangevinkte concepten in beeld blijven bij een lange lijst. */
.redactie-bulk { position: sticky; top: calc(3.5rem + 4px); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
                 padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); background: var(--color-surface-raised);
                 border: 1px solid var(--color-border); border-radius: var(--radius-s); }
.redactie-alles { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; cursor: pointer; }
.redactie-teller { color: var(--color-text-muted); font-size: var(--font-size-small); margin-right: auto; }
.redactie-bulk input[type="checkbox"], .redactie-vink input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--color-action-bg); cursor: pointer; }
.redactie-lijst .gl-item { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.redactie-vink { flex: 0 0 auto; display: flex; padding: .15rem 0; }
.redactie-rij { margin: var(--space-2) 0 0; }
.knop-klein { padding: .3rem .8rem; font-size: var(--font-size-small); }
.knop-gevaar { background: var(--color-feedback-danger-fg); color: var(--color-action-fg); border-color: var(--color-feedback-danger-fg); }
.redactie-inzending h1 { margin-bottom: var(--space-2); }
.redactie-inzending .nl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.redactie-fotos { margin: var(--space-4) 0 var(--space-2); }
.redactie-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); }
.redactie-form { max-width: 44rem; margin-bottom: var(--space-6); }
.redactie-meteen { background: var(--color-graphic-accent-soft); padding: var(--space-3); border-radius: var(--radius-s); }
.kruimel { font-size: var(--font-size-small); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.redactie-balk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
                 background: var(--color-graphic-accent-soft); border-radius: var(--radius-s); font-size: var(--font-size-small); }
.redactie-balk > span { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--font-size-meta); }