/* ============================================================================
   P2000 Texel — variant C v3 (afgeleid van Claude Design)
   1220px max-width, geen KNRM, IBM Plex lokaal, dark mode-ready
   ============================================================================ */

/* FONTS — lokaal, geen Google Fonts CDN */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/fonts/ibm-plex-sans-var.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* TEKSTGROOTTE-SWITCH — schaal alle UI-tekst via data-textsize op body */

/* === GROOT (A+) === */
body[data-textsize="large"] {
    /* Body-tekst & paragrafen */
    & .melding-tekst,
    & .info-page p, & .info-page li,
    & .paginainfo-tekst, & .dorpinfo-tekst,
    & .vergelijk-tekst,
    & .lede, & .verhaal,
    & .page-intro p, & .page-outro p,
    & .faq p, & .faq ul, & .faq li,
    & .hero-body p,
    & .hero-tekst p { font-size: 17px; line-height: 1.65; }
    & .footer p { font-size: 19px; line-height: 1.65; }
    & .kaart-intro { font-size: 16px; }

    /* Detail-pagina specifiek */
    & .hero-tekst .lede { font-size: 18px; }
    & .hero-tekst code { font-size: 15px; }
    & .details dd, & .details code { font-size: 16px; }
    & .details dt { font-size: 13px; }

    /* Disclaimer-blokken (info-pagina's, contact, hulpdiensten) */
    & .disclaimer { font-size: 14px; }

    /* Meld-fout formulier */
    & .meld-fout-link { font-size: 15px; }
    & .mf-radio { font-size: 16px; }
    & .mf-field span { font-size: 15px; }
    & .mf-captcha-hint { font-size: 14px; }
    & .mf-field textarea,
    & .mf-field input[type="email"],
    & .mf-field input[type="text"] { font-size: 16px; }

    /* Headings */
    & h1, & .hero-title { font-size: 32px; }
    & h2 { font-size: 24px; }
    & h3, & .feed-head h1, & .info-page h3 { font-size: 20px; }
    & h4, & h5 { font-size: 17px; }

    /* Card-titel + sidebar caps */
    & .card-cap, & .feed-head h2 { font-size: 18px; }
    & .filterblok-titel { font-size: 16px; }
    & .ar-lbl, & .stats-bars-label, & .zusters-sub,
    & .kaart-lijst-cap { font-size: 16px; }

    /* Filter-chips */
    & .chip, & .ar-chip, & .dorp-knop { font-size: 15px; padding: 9px 14px; }
    & .periode-chips a, & .filterbar a, & .filterbar button,
    & .ar-chips button { font-size: 15px; }

    /* Cards meta + tijdregels */
    & .melding-meta, & .feed-sub, & .vergelijk-meta,
    & .kli-meta, & .kli-tijdplaats, & .kli-text { font-size: 14px; }
    & .melding-tijd { font-size: 13px; }

    /* Tabel */
    & .codes-tabel { font-size: 16px; }
    & .codes-tabel th { font-size: 14px; }

    /* Topbar + nav */
    & .topbar { font-size: 14px; }
    & .mainnav-item { font-size: 16px; padding: 16px 12px; }
    & .mainnav-item:first-child { padding-left: 0; }
    & .topbar-date, & .topbar-nav a { font-size: 14px; }
    & .theme-btn, & .ts-btn { font-size: 13px; }

    /* Sidebar + zoeken + tellers */
    & .feed-stats, & .sb-zoek-input, & .zoek-input { font-size: 15px; }
    & .zuster-title { font-size: 17px; }
    & .zuster-sub { font-size: 14px; }
    & .stat-tegel .stat-num { font-size: 30px; }
    & .stat-tegel .stat-lbl { font-size: 14px; }
    /* Sidebar dienst-tegels (Brandweer/Ambulance/Politie) */
    & .stat .stat-num { font-size: 24px; }
    & .stat .stat-lbl { font-size: 13px; }
    & .stats-bars-meta { font-size: 15px; }

    /* Footer + breadcrumb */
    & .footer-links a { font-size: 17px; }
    & .footer h5 { font-size: 15px; }
    & .footer-over h5 { font-size: 21px; }
    & .footer-volg-tit { font-size: 19px; }
    & .footer-volg-sub { font-size: 15px; }
    & .footer-volg-btns a { font-size: 15px; }
    & .footer-volg-btns .push-cta__btn { font-size: 15px; }
    & .footer-bottom { font-size: 13px; }
    & .breadcrumb { font-size: 14px; }

    /* Filter-rij — col1 heeft genoeg breedte voor alle 4 hulpdienst-chips (+
     * Alles) op één regel zonder dat col2/3/4 onnodig ver naar rechts staan
     * of naar de volgende rij wrappen. */
    & .filterblok-row > .filterblok-col:first-child { width: 540px; }
    & .filterblok-row { justify-content: flex-start; gap: 32px; }

    /* Mini-list (laatste meldingen sidebar op detail) schaalt mee */
    & .mini-meta { font-size: 13px; }
    & .mini-text { font-size: 15px; line-height: 1.5; }
    & .mini-more { font-size: 14px; }

    /* Sidebar "Laatste nieuws" — schaalt mee */
    & .sidebar-laatste-nieuws-titel { font-size: 16px; }
    & .sidebar-laatste-nieuws-when { font-size: 13px; }
    & .sidebar-laatste-nieuws-when strong { font-size: 17px; }

    /* Grafiek-aslabels (statistieken/jaaroverzicht) — bleven anders als
       enige element op 9-10px mono staan terwijl de rest meeschaalt. */
    & .sbu-lbl { font-size: 11px; }
    & .sbu-yaxis { font-size: 12px; }
    & .sbh-row { font-size: 15px; }
}

/* === KLEIN (A−) === */
body[data-textsize="small"] {
    & .melding-tekst,
    & .info-page p, & .info-page li,
    & .paginainfo-tekst, & .dorpinfo-tekst,
    & .vergelijk-tekst,
    & .lede, & .verhaal,
    & .hero-body p,
    & .footer p { font-size: 13px; line-height: 1.5; }

    & h1, & .hero-title { font-size: 22px; }
    & h2 { font-size: 18px; }
    & h3, & .feed-head h1, & .info-page h3 { font-size: 16px; }
    & h4, & h5 { font-size: 13px; }

    & .card-cap, & .feed-head h2 { font-size: 14px; }
    & .filterblok-titel { font-size: 12px; }
    & .ar-lbl, & .stats-bars-label, & .zusters-sub,
    & .kaart-lijst-cap { font-size: 12px; }

    & .chip, & .ar-chip, & .dorp-knop { font-size: 12px; padding: 7px 10px; }
    & .periode-chips a, & .filterbar a, & .filterbar button,
    & .ar-chips button { font-size: 12px; }

    & .melding-meta, & .feed-sub, & .vergelijk-meta,
    & .kli-meta, & .kli-tijdplaats, & .kli-text { font-size: 11px; }
    & .melding-tijd { font-size: 10px; }

    & .codes-tabel { font-size: 12px; }
    & .codes-tabel th { font-size: 10px; }

    & .topbar { font-size: 11px; }
    & .mainnav-item { font-size: 13px; padding: 12px 13px; }
    & .topbar-date, & .topbar-nav a { font-size: 11px; }
    & .theme-btn, & .ts-btn { font-size: 10px; }

    & .feed-stats, & .sb-zoek-input, & .zoek-input { font-size: 12px; }
    & .zuster-title { font-size: 13px; }
    & .zuster-sub { font-size: 10px; }
    & .stat-tegel .stat-num { font-size: 22px; }
    & .stat-tegel .stat-lbl { font-size: 11px; }
    & .stat .stat-num { font-size: 18px; }
    & .stat .stat-lbl { font-size: 10px; }
    & .stats-bars-meta { font-size: 11px; }

    & .footer-links a, & .footer h5 { font-size: 12px; }
    & .footer-bottom { font-size: 10px; }

    /* Sidebar "Laatste nieuws" — schaalt mee */
    & .sidebar-laatste-nieuws-titel { font-size: 12px; }
    & .sidebar-laatste-nieuws-when { font-size: 10px; }
    & .sidebar-laatste-nieuws-when strong { font-size: 12px; }
    & .breadcrumb { font-size: 11px; }

    /* Mini-list ook kleiner */
    & .mini-meta { font-size: 9px; }
    & .mini-text { font-size: 11px; }
    & .mini-more { font-size: 10px; }
}

/* TOKENS — light */
:root {
    --c-page:    #F1F3F6;
    --c-card:    #FFFFFF;
    --c-card-hover: #FFFFFF;
    --c-border:  #E2E5EA;
    --c-border-strong: #CBD0D8;
    --c-ink:     #0E1116;
    --c-ink-2:   #2C3137;
    --c-ink-3:   #515660;
    --c-ink-4:   #7A7F87;
    --c-accent:  #0E1116;
    --c-hl:      #C7261D;
    --c-hl-soft: #FDECEA;
    --c-live:    #1D8A4E;
    --c-link:    #1B5FB4;

    --svc-bra: #B8372E;
    --svc-amb: #B07A0D;
    --svc-pol: #2C5F7A;

    --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --container: 1260px;
    --pad-x: 40px;
}

[data-theme="dark"] {
    --c-page:    #0B0E12;
    --c-card:    #14181E;
    --c-card-hover: #1C2028;
    --c-border:  #232830;
    --c-border-strong: #303640;
    --c-ink:     #ECEEF1;
    --c-ink-2:   #D4D7DC;
    --c-ink-3:   #A8ACB3;
    --c-ink-4:   #777C84;
    --c-accent:  #ECEEF1;
    --c-hl:      #C7261D;
    --c-hl-soft: #2A1614;
    --c-link:    #6FB3FF;
}
/* Dark-mode overrides voor componenten met hardcoded light-mode kleuren */
[data-theme="dark"] .codes-tabel th {
    background: var(--c-hl-soft);
}
[data-theme="dark"] .kaart-lijst-item.is-newest {
    background: var(--c-card-hover);
}
/* Leaflet-popup heeft hardcoded witte achtergrond — in dark-mode invertten
 * zodat de melding-tekst (var(--c-ink) → licht) niet wit-op-wit wordt. */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
    background: var(--c-card);
    color: var(--c-ink);
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
[data-theme="dark"] .leaflet-popup-close-button { color: var(--c-ink-3) !important; }
[data-theme="dark"] .leaflet-popup-close-button:hover { color: var(--c-ink) !important; }
/* NIEUW-badge gebruikt var(--c-ink) als bg → in dark-mode wordt die licht
 * en valt de witte tekst weg. Geef 'm in dark-mode een vaste donkere bg. */
[data-theme="dark"] .kli-newest { background: #2E3238; color: var(--c-ink); }
/* Popup-knop (.mp-pop-link) gebruikt var(--c-ink) als bg + color:#fff → in dark-mode
 * wordt de bg licht en valt de witte tekst weg (wit-op-wit). Vaste donkere bg in
 * rust; de bestaande :hover (rood, var(--c-hl)) blijft staan. */
[data-theme="dark"] .mp-pop-link { background: #2E3238; }
/* Zoekknoppen gebruiken var(--c-ink) als bg + hardcoded color:#fff → in dark-mode
 * wordt de bg licht en valt de witte tekst weg. Donkere tekst in rust, wit op hover (rood). */
[data-theme="dark"] .sb-zoek-btn,
[data-theme="dark"] .zoek-btn { color: var(--c-page); }
[data-theme="dark"] .sb-zoek-btn:hover,
[data-theme="dark"] .zoek-btn:hover { color: #fff; }/* Bundel-blok (.melding-bundle) gebruikt hardcoded #fafafa/#fff als bg → in
 * dark-mode blijft de bg licht terwijl de tekst (var(--c-ink)) licht wordt:
 * wit-op-wit. Geef het blok + de losse items een donkere bg + variabele rand. */
[data-theme="dark"] .melding-bundle { background: var(--c-page); border-color: var(--c-border); }
[data-theme="dark"] .melding-bundle-link { background: var(--c-card); border-color: var(--c-border); }
[data-theme="dark"] .melding-bundle-link:hover,
[data-theme="dark"] .melding-bundle-link:focus-visible { background: var(--c-card-hover); border-color: var(--c-border-strong); }

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--c-ink);
    background: var(--c-page);
    font-feature-settings: 'tnum';
}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { max-width: 100%; display: block; }

/* CONTAINER */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}
/* Ademruimte onder de pagina-content vóór de prefooter. Zonder dit raakt de
   langste kolom (vaak de sidebar/.aside met align-items:start) de donkere
   prefooter zonder marge. Geldt voor zowel grid- als niet-grid-pagina's. */
main.container { padding-bottom: 48px; }

/* TOPBAR */
.topbar {
    background: var(--c-card);
    border-bottom: 1px solid var(--c-border);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-ink-3);
}
.topbar-inner {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}
.topbar-date { color: var(--c-ink-2); font-weight: 500; }
.topbar-nav { display: flex; gap: 18px; align-items: center; }
.topbar-nav a {
    color: var(--c-ink-3);
    transition: color .15s;
}
.topbar-nav a:hover { color: var(--c-ink); }
/* Topbar-controls (zoeken + thema + tekstgrootte) — Variant 1: neutraal
 * segmented, geen felle kleuren. Actief segment = opgetild kaartje. Het rode
 * merk-accent komt alleen terug bij hover op de zoekknop. */

/* Zoekknop — gestyled als het actieve "opgetilde" segment */
.topbar-search {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 9px;
    padding: 6px 13px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-ink-2);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: color .12s, border-color .12s;
}
.topbar-search:hover { color: var(--c-ink); border-color: var(--c-border-strong); }
.topbar-search svg { width: 14px; height: 14px; color: var(--c-ink-4); }
.topbar-search:hover svg { color: var(--c-hl); }
[data-theme="dark"] .topbar-search { box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* "Ga naar andere regio" knop — zelfde neutraal-segmented stijl als zoeken */
.topbar-andere-regios {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 9px;
    padding: 6px 13px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-ink-2);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: color .12s, border-color .12s;
}
.topbar-andere-regios:hover { color: var(--c-ink); border-color: var(--c-border-strong); }
.topbar-andere-regios svg { width: 14px; height: 14px; color: var(--c-ink-4); }
.topbar-andere-regios:hover svg { color: var(--c-hl); }
[data-theme="dark"] .topbar-andere-regios { box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* Smooth scroll gedrag voor anchor-links */
html { scroll-behavior: smooth; }

/* Segment-containers (Licht/Donker en A/A+) — inset-look */
.theme-switch, .text-size-switch {
    display: inline-flex;
    align-items: center;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 9px;
    padding: 2px;
}
.theme-btn, .ts-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    padding: 5px 11px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--c-ink-4);
    cursor: pointer;
    transition: color .12s, background .12s;
}
.theme-btn:hover, .ts-btn:hover { color: var(--c-ink-2); }
.theme-btn.is-active, .ts-btn.is-active {
    background: var(--c-card);
    color: var(--c-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
[data-theme="dark"] .theme-btn.is-active,
[data-theme="dark"] .ts-btn.is-active { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.theme-btn svg { width: 14px; height: 14px; }

/* Tekstgrootte: A standaard, A+ groter — visuele hint van de functie */
.ts-btn { min-width: 30px; justify-content: center; }
.ts-btn[data-size="0"]  { font-size: 11px; }
.ts-btn[data-size="1"]  { font-size: 14px; }

/* HEADER */
.header {
    background: var(--c-card);
    border-bottom: 1px solid var(--c-border);
}
.header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding-top: 20px;
    padding-bottom: 18px;
}
.wordmark {
    display: inline-flex; align-items: baseline; gap: 0;
    font-family: var(--font-body);
    line-height: 1;
    letter-spacing: -0.04em;
}
.wm-block {
    background: var(--c-hl);
    color: #fff;
    font-weight: 800;
    font-size: 40px;
    padding: 6px 11px 8px;
    border-radius: 3px;
}
.wm-tx {
    color: var(--c-ink);
    font-weight: 700;
    font-size: 40px;
    font-style: normal;
    margin-left: 12px;
}
.tagline {
    font-size: 13px;
    color: var(--c-ink-3);
    margin-top: 6px;
    font-family: var(--font-mono);
}

/* ── RIJKE HEADER (concept X, amsterdam-prototype 2026-06-14) ───────────
 * Topbar = alleen website-opties; Zoeken + regio-keuze verhuisd naar de
 * header. Brand links, een echte zoekbalk + regio-selector rechts. De
 * header-banner is hiervoor al weggehaald (zie header.php-comment). */
/* Top-advertentie-strip (leaderboard bovenin) — concept X, amsterdam-prototype */
/* Was var(--c-bg): die token BESTAAT NIET (het is --c-page), dus de strook had
   in werkelijkheid geen achtergrond. Viel niet op zolang hij in de flow stond
   op een pagina met dezelfde kleur; zodra hij ergens overheen ligt zie je de
   content erdoorheen. Geldt/gold ook voor topstrip--sticky. */
.topstrip { background: var(--c-page); border-bottom: 1px solid var(--c-border); }
.topstrip-inner { display: flex; flex-direction: column; align-items: center; padding: 8px var(--pad-x); overflow: hidden; }
.topstrip-inner > * { max-width: 100%; }
/* Reveal-variant: verborgen bij laden, klapt open zodra je OMHOOG scrolt.
   Blijft IN DE DOCUMENT-FLOW (duwt de pagina omlaag, overlapt de header niet).

   De jitter-lus van 2026-07-14 zat NIET in het openklappen zelf, maar in de
   TRANSITIE erop. Met `transition: max-height .28s` veranderde de pagina-hoogte
   elk frame; Chrome's scroll-anchoring corrigeerde telkens de scrollpositie, elke
   correctie vuurde een scroll-event af, en dat event zette de klasse weer om.
   Zelfvoedend => "bibberend beeld".

   Fix = de transitie eruit. De hoogte verandert nu in één keer, dus er is precies
   één anchoring-correctie en één scroll-event, en de toggle-lock in footer.php
   (500ms, ruim boven de 40px-drempel) vangt dat ene event op.

   Scroll-anchoring blijft juist AAN: dat is wat de bezoeker geen sprong laat zien
   (de browser compenseert de hoogte-verandering boven de viewport). Zet het niet
   uit "tegen de shift" — dan krijg je die sprong er juist bij. */
.topstrip--reveal { max-height: 0; overflow: hidden; border-bottom: 0; }
/* max-height 360→120 (verzoek Jeffrey 2026-07-17): de header-ad is nu een
   leaderboard-formaat (zie _ad_render_adsense: data-ad-format="horizontal");
   120px = 90px-banner + strip-padding, zodat AdSense hier geen reuze-vlak toont. */
.topstrip--reveal.topstrip--show { max-height: 120px; border-bottom: 1px solid var(--c-border); }
/* Sticky-variant: pint bovenaan vast (overlapt content), schuift weg bij omlaag-
   scrollen en weer in bij omhoog. JS toggelt .topstrip--show (zelfde als reveal). */
.topstrip--sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transform: translateY(-100%); transition: transform .25s ease; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.topstrip--sticky.topstrip--show { transform: translateY(0); }

.header-inner--x { padding-top: 24px; padding-bottom: 22px; gap: 28px; }
.header-inner--x .wm-block,
.header-inner--x .wm-tx { font-size: 44px; }
.header-inner--x .tagline { margin-top: 8px; }
.header-tools { display: inline-flex; align-items: center; gap: 14px; justify-self: end; }

/* Zoekbalk (pill, icoon-knop links) */
.hdr-search {
    display: flex; align-items: center; gap: 10px;
    width: 340px; max-width: 36vw;
    background: var(--c-bg);
    border: 1px solid var(--c-border); border-radius: 999px;
    padding: 0 16px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .12s, box-shadow .12s;
}
.hdr-search:focus-within { border-color: var(--c-hl); box-shadow: 0 0 0 3px var(--c-hl-soft); }
.hdr-search-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; padding: 0; border: 0; background: transparent;
    color: var(--c-ink-4); cursor: pointer; transition: color .12s;
}
.hdr-search:focus-within .hdr-search-btn,
.hdr-search-btn:hover { color: var(--c-hl); }
.hdr-search-btn svg { width: 17px; height: 17px; display: block; }
.hdr-search input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; outline: none;
    font: 14px var(--font-body); color: var(--c-ink);
    padding: 11px 0;
}
.hdr-search input::placeholder { color: var(--c-ink-4); }

/* Regio-selector */
.hdr-regio {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 15px;
    border: 1px solid var(--c-border); border-radius: 11px;
    background: var(--c-card); color: var(--c-ink); text-decoration: none;
    font: 600 13px var(--font-body); white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: border-color .12s;
}
.hdr-regio:hover { border-color: var(--c-border-strong); }
.hdr-regio .pin { width: 15px; height: 15px; color: var(--c-hl); flex-shrink: 0; }
.hdr-regio-lbl { color: var(--c-ink-3); font-weight: 500; }
.hdr-regio-val { font-weight: 700; }
.hdr-regio .caret { width: 13px; height: 13px; color: var(--c-ink-4); flex-shrink: 0; }
[data-theme="dark"] .hdr-regio,
[data-theme="dark"] .hdr-search { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

@media (max-width: 980px) { .hdr-search { width: 230px; } }
/* 721-900px (tablet): wordmark + zoek/regio passen niet meer naast elkaar —
   zelfde gestapelde layout als mobiel, anders scrolt de pagina horizontaal. */
@media (max-width: 900px) {
    .header-inner { grid-template-columns: 1fr; gap: 16px; }
    .header-tools { display: flex; width: 100%; flex-wrap: wrap; gap: 10px; }
    .hdr-search { width: 100%; max-width: none; flex: 1 1 100%; }
}
@media (max-width: 720px) {
    .header-inner--x { padding-top: 16px; padding-bottom: 16px; }
    .header-inner--x .wm-block,
    .header-inner--x .wm-tx { font-size: 30px; }
    .header-tools { display: flex; width: 100%; flex-wrap: wrap; gap: 10px; }
    .hdr-search { width: 100%; max-width: none; flex: 1 1 100%; }
}

/* FILTERBLOK — V4 stijl: geen card, label + chips direct op pagina */
.filterblok {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 14px 0 14px;
}
.filterblok + .filterblok { margin-top: 28px; }
.filterblok-titel {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink);
    margin-bottom: 8px;
}
.filterblok-titel-hd { margin-top: 14px; }

/* Dorpen — grote knoppen (zoals oude p2000texel.nl filters.php) */
.dorpen {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.dorp-knop {
    display: inline-flex; align-items: center;
    padding: 8px 14px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-ink-2);
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    transition: all .15s;
}
.dorp-knop:hover { background: var(--c-page); border-color: var(--c-border-strong); color: var(--c-ink); }
.dorp-knop.is-active {
    background: var(--c-card);
    color: var(--c-ink);
    border-color: var(--c-ink);
    border-width: 2px;
    font-weight: 700;
    padding: 7px 13px;
}

/* Hulpdienst-chips (onder de filterblok, geen omhullende card) */
.filterbar {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 18px;
}
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 10px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-ink-2);
    font-size: 13px;
    font-weight: 500;
    transition: all .15s;
}
.chip:hover {
    border-color: var(--svc, var(--c-border-strong));
    color: var(--svc, var(--c-ink));
}
.chip.is-active {
    background: var(--c-card);
    color: var(--svc, var(--c-ink));
    border-color: var(--svc, var(--c-ink));
    border-width: 2px;
    font-weight: 700;
    /* compenseer extra border zodat layout niet schuift */
    padding: 7px 9px;
}
.chip-icon {
    color: var(--svc, currentColor);
    display: inline-flex;
}
/* Bij active-state: chip is witte achtergrond met gekleurde border,
 * dus icoon moet ook gekleurd blijven (anders verdwijnt-ie). */
.chip.is-active .chip-icon { color: var(--svc, var(--c-ink)); }

/* Spoed-toggle erft .chip styling — geen rode override meer */
/* "Filter per type" (macro-categorie): full-width chip-rij onder de hoofdfilters.
 * GEEN stip (stippen = hulpdienst elders) — categoriekleur via onderstreping. */
.filterblok-typebar { margin-top: 14px; }
.chip--type .chip-type-label {
    border-bottom: 2px solid var(--svc, transparent);
    padding-bottom: 1px;
}
.chip--type.is-active .chip-type-label { border-bottom-width: 0; }

/* GRID */
.grid {
    display: grid;
    grid-template-columns: 1fr 336px;
    gap: 24px;
    align-items: start;
    margin-top: 14px;
}
.filter-zone-wrap { padding-top: 20px; }
.filter-zone-wrap + .grid { margin-top: 14px; }

/* Accordion-stijl voor filter-zone (HTML5 details/summary, native open/close).
   Standaard dicht; opent op klik. Wit blok met sterke border voor afscheiding;
   binnen-knoppen krijgen ook iets sterkere borders voor leesbaarheid. */
details.filter-zone-wrap {
    border: 1px solid var(--c-border-strong);
    border-radius: 8px;
    background: var(--c-card);
    padding: 0;
    margin: 10px 0 14px;
    overflow: hidden;
}
details.filter-zone-wrap[open] {
    padding-bottom: 16px;
}
/* Sterkere borders op inactieve filter-knoppen — alleen binnen het accordion,
   zodat de chips/buttons elders ongewijzigd blijven. Active-state heeft al
   een 2px donkere border via .chip.is-active / .dorp-knop.is-active. */
details.filter-zone-wrap .dorp-knop:not(.is-active),
details.filter-zone-wrap .chip:not(.is-active) {
    border-color: var(--c-border-strong);
}

/* Filter per hulpdienst — kleinere padding zodat alle chips netjes op één
   regel passen binnen de filter-col. */
.filterbar .chip { padding: 8px 10px 8px 10px; }
.filterbar .chip.is-active { padding: 7px 9px 7px 9px; /* -1px voor 2px border */ }
details.filter-zone-wrap > summary.filter-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: 14px;
    background: var(--c-card);  /* witte balk, ook bij open */
    transition: background 0.15s;
}
details.filter-zone-wrap > summary.filter-toggle::-webkit-details-marker { display: none; }
details.filter-zone-wrap > summary.filter-toggle:hover {
    background: var(--c-card-hover);
}
.filter-toggle-label {
    font-weight: 700;
    color: var(--c-ink);
    font-size: 15px;
}
.filter-toggle-meta {
    flex: 1;
    color: var(--c-ink-3);
    font-size: 13px;
}
.filter-toggle-icon {
    color: var(--c-ink-3);
    transition: transform 0.15s;
    font-size: 12px;
    flex-shrink: 0;
}
details.filter-zone-wrap[open] .filter-toggle-icon {
    transform: rotate(180deg);
}
details.filter-zone-wrap[open] > summary.filter-toggle {
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 12px;
}
details.filter-zone-wrap > .filterblok,
details.filter-zone-wrap > * + .filterblok { padding-left: 16px; padding-right: 16px; }
/* Detail/404/meld-fout: breadcrumb staat direct boven de grid — geen extra ruimte. */
.breadcrumb + .grid { margin-top: 0; }

/* Linker kolom van .grid — bevat filter-zone boven .feed */
.feed-col { min-width: 0; }
.feed-col .filterblok { margin-top: 0; }

/* FEED CARD */
.feed {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    overflow: hidden;
}
.feed-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--c-border);
    gap: 16px;
}
.feed-head h2 {
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-ink);
}
.feed-sub {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--c-ink-3);
    margin-top: 6px;
    display: block;
}
.feed-stats {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--c-ink-3);
    white-space: nowrap;
}
.feed-stats strong { color: var(--c-ink); font-weight: 600; }
/* Meta-info rechts in feed-head (count "X meldingen vandaag · nieuwste bovenaan") */
.feed-head-right {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-ink-3);
    white-space: nowrap;
    align-self: flex-end;
}
.feed-head-right strong { color: var(--c-ink); font-weight: 600; }
@media (max-width: 600px) {
    /* Titel + meta passen niet naast elkaar — meta zakt naar eigen regel
       i.p.v. rechts afgekapt te worden (nowrap + te weinig breedte). */
    .feed-head { flex-wrap: wrap; }
    .feed-head-right { white-space: normal; }
}

/* MELDINGITEM */
.melding {
    display: grid;
    grid-template-columns: 56px 1fr 36px;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-border);
    position: relative;
    transition: transform .12s, box-shadow .15s;
    z-index: 0;
}
.melding:last-child { border-bottom: none; }
.melding:hover {
    transform: translateX(2px);
    z-index: 1;
}
.melding.is-spoed::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--svc-color, var(--c-hl));
}

.melding-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--svc-color);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--svc-color) 14%, transparent);
}

.melding-body { min-width: 0; }
.melding-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.melding-dienst { font-weight: 700; color: var(--svc-color); }
.melding-code {
    border: 1px solid var(--svc-color);
    color: var(--svc-color);
    padding: 2px 7px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
}
.melding-spoed {
    background: var(--c-hl);
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 10px;
}
.melding-nieuws-badge {
    background: #5b3aa8; /* paars — zelfde kleur als kli-nieuws-bericht op live-kaart */
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
}
/* Bundel-badge — voor gegroepeerde meldingen die de nieuws-drempel niet halen
 * (≥3 spoed + ≥3 meld + ≥2 diensten + niet-blocklisted). Visueel rustiger dan
 * NIEUWS-badge: neutraal grijs zonder fill, alleen border + tekst. */
.melding-bundel-badge {
    background: transparent;
    color: var(--c-ink-2, #555);
    border: 1px solid var(--c-line, #d5d5d5);
    padding: 1px 7px;
    border-radius: 2px;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.04em;
}
/* Ingetrokken-state: badge + grijs over de hele card + strikethrough op tekst */
.melding-ingetrokken,
.mini-ingetrokken {
    background: var(--c-ink-3);
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
}
.melding.is-ingetrokken { opacity: 0.65; }
.melding.is-ingetrokken .melding-text {
    text-decoration: line-through;
    text-decoration-color: var(--c-ink-4);
    text-decoration-thickness: 1px;
}
.melding.is-ingetrokken.is-spoed::before { background: var(--c-ink-4); }
.mini.is-ingetrokken { opacity: 0.6; }
.mini.is-ingetrokken .mini-text { text-decoration: line-through; }

/* Banner op detail-pagina */
.ingetrokken-banner {
    background: #FFF1F0;
    border: 1px solid color-mix(in srgb, var(--c-hl) 35%, white);
    border-left: 4px solid var(--c-hl);
    color: var(--c-ink);
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;
}
.ingetrokken-banner strong { color: var(--c-hl); margin-right: 4px; }
[data-theme="dark"] .ingetrokken-banner {
    background: color-mix(in srgb, var(--c-hl) 16%, var(--c-card));
    border-color: color-mix(in srgb, var(--c-hl) 45%, var(--c-card));
}
[data-theme="dark"] .ingetrokken-banner strong { color: color-mix(in srgb, var(--c-hl) 55%, white); }
.melding-sep { color: var(--c-ink-4); }
.melding-place { text-transform: none; font-weight: 500; color: var(--c-ink-2); }
/* Datum + tijd: zelfde mono-font als de rest van de meta-regel,
 * maar normale schrijfwijze (geen uppercase) en iets groter zodat
 * "vandaag · 14:32" beter leesbaar is dan de codes ernaast. */
.melding-datum {
    font-weight: 500;
    font-size: 12px;
    color: var(--c-ink-3);
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
}
.melding-time {
    font-weight: 500;
    font-size: 12px;
    color: var(--c-ink-3);
    text-transform: none;
    letter-spacing: 0;
}
/* Legacy class — niet meer gebruikt sinds we relatieve tijd vervingen door datum. */
.melding-rel  { font-size: 10px; color: var(--c-ink-4); }

.melding-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--c-ink);
    text-wrap: pretty;
    margin-bottom: 8px;
}

.melding-footer {
    display: flex; flex-wrap: wrap; gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-3);
}
.melding-unit {
    background: var(--c-page);
    padding: 2px 7px;
    border-radius: 2px;
}

.melding-action {
    color: var(--c-ink-4);
    font-size: 22px;
    opacity: 0.4;
    align-self: center;
    justify-self: center;
    transition: all 0.15s;
}
.melding:hover .melding-action {
    opacity: 1;
    color: var(--svc-color, var(--c-hl));
    transform: translateX(3px);
}

/* === Multi-dienst gebundelde kaart (nieuws_id) === */
.melding--bundle {
    grid-template-columns: 92px 1fr 36px;
}
.melding--bundle.is-spoed::before { background: var(--c-hl); }
.melding-icons {
    display: flex; align-items: center;
    align-self: start;
    margin-top: 2px;
}
.melding-icons-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent), 0 0 0 4px var(--c-card, #fff);
    margin-left: -10px;
    flex-shrink: 0;
}
.melding-icons-dot:first-child { margin-left: 0; }
.melding-bundle-label {
    font-weight: 700;
    color: var(--c-ink);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-size: 13px;
}
.melding-bundle-sub {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex; flex-direction: column; gap: 4px;
}
.melding-bundle-sub-item {
    display: flex; gap: 8px;
    font-size: 13px;
    color: var(--c-ink-2);
    line-height: 1.4;
}
.melding-bundle-sub-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    color: #fff;
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 1.3;
}
.melding-bundle-sub-text {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* === Bundle-widget op melding-detail (non-news bundels, is_nieuws=0) ===
 * Sectie tussen detail-tabel en share-blok. Toont andere meldingen in dezelfde
 * bundel; biedt context die anders alleen op /112-nieuws/{slug}/ stond. */
.melding-bundle {
    margin: 24px 0 0;
    padding: 16px 18px;
    background: #fafafa;
    border: 1px solid var(--c-line, #e5e5e5);
    border-radius: 6px;
}
.melding-bundle .hero-section-head {
    margin: 0 0 6px;
    font-size: 15px;
    display: flex; align-items: center; gap: 10px;
}
.melding-bundle-intro {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--c-ink-2, #555);
    line-height: 1.5;
}
.melding-bundle-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column;
    gap: 8px;
}
.melding-bundle-link {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--c-line, #e5e5e5);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.melding-bundle-link:hover,
.melding-bundle-link:focus-visible {
    border-color: var(--c-ink-3, #999);
    background: #f7f7f7;
}
.melding-bundle-tag {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 2px;
    color: #fff;
    line-height: 1.3;
}
.melding-bundle-tag--amb  { background: #94B12A; }
.melding-bundle-tag--bra  { background: #C2410C; }
.melding-bundle-tag--pol  { background: #2C5F7A; }
.melding-bundle-tag--knrm { background: #1E40AF; }
.melding-bundle-tijd {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--c-ink-2, #666);
    font-weight: 600;
}
.melding-bundle-tekst {
    flex: 1; min-width: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* === Nieuwsbericht-detailpagina === */
.nieuws-bericht-hero-meta {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.nieuws-bericht-icons {
    display: flex; align-items: center;
}
.nieuws-bericht-icons-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent), 0 0 0 4px var(--c-card, #fff);
    margin-left: -10px;
    flex-shrink: 0;
}
.nieuws-bericht-icons-dot:first-child { margin-left: 0; }
.nieuws-bericht-label {
    font-weight: 700;
    color: var(--c-ink);
    font-size: 15px;
}
.nieuws-bericht-aantal {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-3);
    background: var(--c-page);
    padding: 3px 8px;
    border-radius: 3px;
}

.nieuws-bericht-meldingen {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--c-border);
}
.nieuws-bericht-meldingen-cap {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--c-ink);
}
.nieuws-bericht-melding {
    display: grid;
    grid-template-columns: 38px 1fr 24px;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--svc-color);
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    transition: background .12s, transform .15s, box-shadow .15s;
}
.nieuws-bericht-melding:hover {
    background: var(--c-page);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.nieuws-bericht-melding-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--svc-color);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    align-self: start;
}
.nieuws-bericht-melding-meta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.nieuws-bericht-melding-dienst {
    font-weight: 700;
    color: var(--svc-color);
}
.nieuws-bericht-melding-time {
    margin-left: auto;
    color: var(--c-ink-3);
}
.nieuws-bericht-melding-tekst {
    font-size: 14px;
    line-height: 1.45;
    color: var(--c-ink);
    margin: 0;
}
.nieuws-bericht-melding-foot {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-3);
}

/* IN-FEED AD */
/* .feed-slot — neutrale wrapper rond een feed-ad (was .feed-ad; hernoemd voor
   adblock-weerbaarheid van eigen inventory, zie AD-MANAGEMENT-PLAN §3). */
.feed-slot {
    padding: 22px;
    background: var(--c-page);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--c-border);
}

/* EMPTY */
.feed-empty {
    padding: 48px 22px;
    text-align: center;
    color: var(--c-ink-3);
    font-style: italic;
}

/* ASIDE */
.aside {
    display: flex; flex-direction: column; gap: 16px;
    /* Sticky sidebar (viewability-fix: zijbalk-ad zat op ~11% viewable). Blijft
       in beeld tijdens het scrollen van de lange feed. Op <=1100px (1-koloms)
       teruggezet naar static (zie media-query). */
    position: sticky; top: 12px; align-self: start;
}
.card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 18px;
}
.card-cap {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink);
    margin-top: 0;     /* override browser default h2 margin */
    margin-bottom: 12px;
    line-height: 1.3;  /* override browser default h2 line-height */
    display: inline-flex; align-items: center; gap: 8px;   /* inline-flex zodat rode lijn alleen onder de tekst loopt */
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-hl);
}
.card-cap-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-live);
    animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-live) 40%, transparent); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}
/* Nieuws-variant: paarse dot mét bijpassende paarse pulse-halo */
.card-cap-dot.is-nieuws {
    background: #5b3aa8;
    animation: pulse-nieuws 2.2s ease-out infinite;
}
@keyframes pulse-nieuws {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #5b3aa8 40%, transparent); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

.card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* SIDEBAR KAART */
.sidebar-map img {
    width: 100%; height: auto;
    border-radius: 3px;
    border: 1px solid var(--c-border);
}
.sidebar-map-legend {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-3);
}
.sidebar-map-legend-item {
    display: inline-flex; align-items: center; gap: 4px;
}
.sidebar-map-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c);
}

/* ZUSTERSITES — compacte 2-koloms grid van regio-namen, met cyclische accent-kleur */
.zusters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.zuster {
    --acc: var(--c-hl);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 12px 10px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-bottom: 3px solid var(--acc);
    border-radius: 4px;
    transition: background .15s, border-color .15s, transform .15s;
    text-decoration: none;
    text-align: center;
    min-width: 0;
}
.zuster:hover {
    background: color-mix(in srgb, var(--acc) 8%, var(--c-card));
    border-top-color: var(--acc);
    border-left-color: var(--acc);
    border-right-color: var(--acc);
    transform: translateY(-1px);
}
.zuster-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zuster:hover .zuster-title { color: var(--acc); }
/* Unieke accent-kleur per zustersite — 17 alfabetisch geordende kleuren
 * via HSL met evenredige hue-stappen. Geen herhaling tot je weer aan #1 zit. */
.zuster:nth-child(1)  { --acc: hsl(  0, 65%, 45%); }  /* rood */
.zuster:nth-child(2)  { --acc: hsl( 21, 70%, 45%); }  /* oranjerood */
.zuster:nth-child(3)  { --acc: hsl( 42, 75%, 40%); }  /* amber */
.zuster:nth-child(4)  { --acc: hsl( 64, 55%, 35%); }  /* olijfgroen */
.zuster:nth-child(5)  { --acc: hsl( 95, 50%, 35%); }  /* mosgroen */
.zuster:nth-child(6)  { --acc: hsl(135, 55%, 35%); }  /* gras */
.zuster:nth-child(7)  { --acc: hsl(160, 60%, 32%); }  /* smaragd */
.zuster:nth-child(8)  { --acc: hsl(180, 55%, 35%); }  /* teal */
.zuster:nth-child(9)  { --acc: hsl(200, 60%, 38%); }  /* hemelsblauw */
.zuster:nth-child(10) { --acc: hsl(218, 60%, 45%); }  /* royal */
.zuster:nth-child(11) { --acc: hsl(240, 50%, 50%); }  /* indigo */
.zuster:nth-child(12) { --acc: hsl(262, 50%, 48%); }  /* paars */
.zuster:nth-child(13) { --acc: hsl(283, 55%, 42%); }  /* violet */
.zuster:nth-child(14) { --acc: hsl(305, 50%, 42%); }  /* magenta */
.zuster:nth-child(15) { --acc: hsl(325, 55%, 45%); }  /* roze */
.zuster:nth-child(16) { --acc: hsl(345, 60%, 45%); }  /* hot-rood */
.zuster:nth-child(17) { --acc: hsl( 12, 35%, 35%); }  /* warm bruin */

/* LOKALE LINKS — externe links naar regio-websites als losse knoppen met gekleurde rand */
.lokale-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lokale-links li {
    --acc: var(--c-hl);
}
.lokale-links li:nth-child(3n+1) { --acc: #1D8A4E; }  /* groen — getijden/water */
.lokale-links li:nth-child(3n+2) { --acc: #2C5F7A; }  /* blauw — boot/zee */
.lokale-links li:nth-child(3n+3) { --acc: #B07A0D; }  /* amber — domeinen */
.lokale-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: var(--c-ink);
    text-decoration: none;
    background: var(--c-card);
    border: 1.5px solid var(--acc);
    border-radius: 6px;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.lokale-links a:hover {
    background: color-mix(in srgb, var(--acc) 10%, var(--c-card));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--acc) 25%, transparent);
}
.lokale-links a:hover .lokale-links-titel { color: var(--acc); }
.lokale-links-body { min-width: 0; display: flex; flex-direction: column; }
.lokale-links-titel { font-size: 14px; font-weight: 600; transition: color .15s; }
.lokale-links-sub {
    font-size: 12px;
    color: var(--c-ink-3);
    margin-top: 2px;
}
.lokale-links a:hover .lokale-links-sub { color: var(--c-ink-2); }
.lokale-links-ext {
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
    color: var(--acc);
    flex-shrink: 0;
    transition: transform .15s;
}
.lokale-links a:hover .lokale-links-ext {
    transform: translateX(3px);
}

/* STATS CARD */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(var(--stat-count, 4), 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 6px;
    background: var(--c-page);
    border-radius: 3px;
    text-align: center;
}
.stat-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
}
.stat-num {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1;
}
.stat-lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-3);
    text-transform: uppercase;
    margin-top: 4px;
}
.stats-bars-label,
.zusters-sub {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink-2);
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.stats-bars-meta {
    font-weight: 400;
    font-size: 13px;
    color: var(--c-ink-4);
    font-family: var(--font-body);
}
.zusters-sub { margin-bottom: 12px; }
/* Stats sidebar = klikbaar geheel */
.sidebar-stats-wrap { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.sidebar-stats-wrap:hover .stats-bars-label { color: var(--c-hl); }
.sidebar-stats-meer {
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
    text-align: left;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-hl);
    text-decoration: none;
}
.sidebar-stats-meer:hover { color: var(--c-hl); text-decoration: underline; }
/* Sidebar 24u-grafiek met Y-axis. Layout:
 *   [yaxis 22px][bars (24 cols)]
 * De x-axis-labels onder de bars hebben dezelfde left-padding als yaxis-breedte
 * zodat 00..23 onder de juiste bars staan. */
.stats-bars-wrap {
    display: flex;
    gap: 6px;
    align-items: stretch;
    height: 60px;
}
.stats-bars-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--c-ink-3);
    text-align: right;
    line-height: 1;
    width: 18px;
    flex-shrink: 0;
}
.stats-bars-yaxis span:first-child { transform: translateY(-2px); }   /* top tegen kop bars */
.stats-bars-yaxis span:last-child  { transform: translateY(2px); }    /* nul tegen baseline */
.stats-bars {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 1px;
    align-items: end;
    /* lichte grid-lijntjes (50% en 100%) voor visuele referentie naar yaxis */
    background-image:
        linear-gradient(to top, transparent 0%, transparent calc(50% - 1px),
                        var(--c-border) calc(50% - 1px), var(--c-border) 50%,
                        transparent 50%, transparent 100%);
    background-size: 100% 100%;
}
.stats-bar {
    background: var(--c-ink);
    opacity: 0.7;
    border-radius: 1px 1px 0 0;
    min-height: 2px;
    position: relative; /* boven de grid-lijn */
}
.stats-bars-axis {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 1px;
    margin-top: 4px;
    margin-bottom: 14px;
    margin-left: 24px; /* uitlijnen onder de bars (yaxis-breedte + gap) */
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--c-ink-3);
    text-align: center;
}
.stats-bars-tick { line-height: 1; }
.stats-bars-tick.is-major { font-weight: 600; }

/* AD SLOTS — placeholders */
.unit-ph {
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(
        45deg,
        var(--c-page),
        var(--c-page) 8px,
        var(--c-card) 8px,
        var(--c-card) 16px
    );
    border: 1px dashed var(--c-border-strong);
    color: var(--c-ink-4);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}
.sz-leaderboard { width: 728px; height: 90px; max-width: 100%; }
.sz-medium { width: 300px; height: 250px; margin: 0 auto; }
.sz-large { width: 336px; height: 280px; }

/* AD GUARDRAILS (2026-05-05) — voorkom dat AdSense groter rendert dan we
   toelaten. Wrapper .unit--WxH staat strict op de gereserveerde maat,
   overflow:hidden clipt elke ad die via DOM-injectie probeert te groeien.
   .adsbygoogle krijgt ook direct max-width/max-height:100% als extra slot. */
.unit {
    overflow: hidden;
    contain: layout style;
    line-height: 0;
}
.unit--728x90  { width: 728px; max-width: 100%; height: 90px; }
.unit--300x250 { width: 300px; height: 250px; margin: 0 auto; }
.unit--336x280 { width: 336px; height: 280px; }
.unit--300x400 { width: 300px; max-width: 100%; height: 400px; }
.unit--300x600 { width: 300px; max-width: 100%; height: 600px; margin: 0 auto; }
/* GEEN max-height hier: _render.php zet per slot een inline max-height-cap
   (_ad_cap_height). Een `max-height: 100% !important` overrulede die cap én
   loste tegen .unit--resp (dat alleen min-height heeft, geen definite height)
   op naar `none` — de guardrail was dus dood en AdSense kon de unit na het
   laden alsnog opblazen = layout-shift. max-width mag wel blijven. */
.adsbygoogle {
    max-width: 100% !important;
}
@media (max-width: 760px) {
    /* 728×90 leaderboard verbergen ipv responsive resize — voorkomt
       vertical bloat door AdSense flex-formats op smalle schermen. */
    .unit--728x90 { display: none; }
}

/* RESPONSIVE AD-SLOT (#14) — vult de containerbreedte; max-width per slot houdt
   'm in toom, max-height-cap (inline op de <ins>) blokkeert reuze-units. Bewust
   NIET verbergen op mobiel (responsive serveert daar een passend formaat dat
   meer oplevert dan een verborgen leaderboard). */
.unit--resp { width: 100%; max-width: 100%; margin: 0 auto; }
.unit--resp .adsbygoogle { display: block; width: 100%; }

/* EIGEN INVENTORY (direct/affiliate/house) — neutrale, same-origin markup.
   Bewust GEEN ad/advert/banner/sponsor in de classnames; de size-guardrail
   staat inline (zie _render.php) zodat class-based adblocklijsten 'm niet
   kunnen verbergen. Hier alleen presentatie. */
.partnerblok { line-height: 0; }
.partnerblok-link { display: block; text-decoration: none; color: inherit; }
.partnerblok-tekst {
    display: block; line-height: 1.4; padding: 14px 16px;
    font-size: 0.95rem; color: var(--c-ink-1);
    background: var(--c-card); border: 1px solid var(--c-border);
    border-radius: 8px; text-align: center;
}
.partnerblok-link:hover .partnerblok-tekst { border-color: var(--c-border-strong); }

/* Verplicht neutraal label onder ELKE ad (NL/ACM). Klein + onopvallend; class
   .fineprint is niet ad-ish (adblock-veilig bij eigen ads). */
.fineprint {
    display: block; margin: 1px 0 0; line-height: 1.1;
    font-size: 8px; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--c-ink-4); opacity: 0.6; text-align: center;
}

/* IN-CONTENT AD-RIJ (§5A) — N ads naast elkaar op desktop (duo-row--2 of
   duo-row--4), gestapeld op mobiel (een 4-rij wordt daar 2×2). Telt als de
   ad-allocatie van die feed-positie. */
.duo-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-start; }
.duo-col { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.duo-row--4 .duo-col { flex: 1 1 150px; }
/* Vaste-maat units (en dev-placeholders) mogen een rij-kolom nooit oprekken. */
.duo-col .unit { max-width: 100%; }
@media (max-width: 600px) {
    .duo-row { flex-direction: column; gap: 12px; }
    .duo-col { flex-basis: auto; width: 100%; }
    .duo-row--4 { flex-direction: row; }
    .duo-row--4 .duo-col { flex: 1 1 45%; width: auto; }
}

/* NATIVE IN-FEED (§5B) — fluid, neemt de volle feed-breedte en oogt als een
   melding-kaart i.p.v. een ingeplakte rechthoek (blendt, botst niet). */
.feed-native { width: 100%; }
.feed-native--ph {
    width: 100%; padding: 30px 18px; text-align: center;
    background: repeating-linear-gradient(45deg,
        var(--c-page), var(--c-page) 8px, var(--c-card) 8px, var(--c-card) 16px);
    border: 1px dashed var(--c-border-strong);
    color: var(--c-ink-4); font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}

/* OWN-ONLY-plek (mode C: 404 / meld-fout / tussen hulpdienst-contacten) —
   alleen affiliate/eigen, nooit Google. Gecentreerd met wat lucht eromheen. */
.promo-slot { margin: 24px auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* PRODUCTGRID / MULTIPLEX (#10) — meerdere kleine ads naast elkaar; mobiel stapelt. */
.multiplex-wrap { margin: 22px 0 6px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; justify-content: center; }
/* Aantal-bewust: grid past zich aan op het aantal cellen (voorkomt links
   geklonterde cellen met lege ruimte rechts). 300px-cap houdt ze niet té groot. */
.product-grid--2 { grid-template-columns: repeat(2, minmax(0, 300px)); }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 300px)); }
.product-cell { min-width: 0; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 900px) { .product-grid, .product-grid--2, .product-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } }

/* MOBIEL BOTTOM-ANCHOR (#9) — vaste ad-strook onderaan op mobiel, sluitbaar. */
.mobile-anchor { display: none; }
@media (max-width: 760px) {
    .mobile-anchor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
        display: flex; justify-content: center; align-items: center;
        background: var(--c-card); border-top: 1px solid var(--c-border);
        padding: 4px; box-shadow: 0 -2px 10px rgba(0,0,0,.12); }
    .mobile-anchor .partnerblok, .mobile-anchor .unit { margin: 0; }
    .mobile-anchor .fineprint { display: none; }   /* anchor zelf is herkenbaar; ruimte sparen */
    body { padding-bottom: 0; }
}
.mobile-anchor-x { position: absolute; top: -11px; right: 8px; width: 22px; height: 22px;
    border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-card);
    color: var(--c-ink-3); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }

/* FOOTER */
.footer {
    background: var(--c-card);
    border-top: 1px solid var(--c-border);
    padding: 28px 0;
}
.footer-cols {
    display: grid;
    grid-template-columns: 2fr 0.5fr 1fr 1fr;
    gap: 32px;
}
.footer h5 {
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    margin-bottom: 10px;
    letter-spacing: 0;
    color: var(--c-ink);
}
.footer p {
    font-size: 15px;
    color: var(--c-ink-3);
    line-height: 1.5;
    margin-bottom: 8px;
}
/* Over-kolom (linker kolom): site-uitleg iets groter dan de link-kolommen */
.footer-over h5 { font-size: 18px; }
.footer-over p { font-size: 16px; }
.footer-spoed { color: var(--c-ink-2) !important; font-size: 12px !important; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 5px; }
.footer-links a { color: var(--c-ink-2); font-size: 15px; text-decoration: none; }
.footer-links a:hover { color: var(--c-hl); text-decoration: underline; }
/* Andere-gebieden-lijst: 2 visuele kolommen onder één header */
.footer-links--cols {
    column-count: 2;
    column-gap: 24px;
}
.footer-links--cols li { break-inside: avoid; }
.footer-bottom {
    display: flex; justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-4);
}

/* VOLG-ONS-BAND — CTA bovenin de footer met de social-kanalen in hun
 * merk-kleur. Rendert alleen met gevulde 'social'-config
 * (includes/footer-social-band.php). */
.footer-volg {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 18px 22px;
    margin-bottom: 28px;
    border: 1.5px solid var(--c-hl);
    border-radius: 12px;
    background: #fff;
}
/* Balk is altijd wit (ook in dark-mode) → tekstkleuren vast op de donkere
   light-mode-waarden zetten, anders wordt de tekst in dark-mode onleesbaar. */
.footer-volg-tit { font-weight: 800; font-size: 17px; color: #0E1116; margin-bottom: 3px; }
.footer-volg-sub { font-size: 13.5px; color: #515660; }
.footer-volg-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-volg-btns a {
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; text-decoration: none;
    font-weight: 700; font-size: 13.5px;
    padding: 9px 16px; border-radius: 9px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    transition: transform .15s, box-shadow .15s;
}
.footer-volg-btns a:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0, 0, 0, .22); }
.footer-volg-btns svg { width: 15px; height: 15px; flex-shrink: 0; }
.footer-volg-btn--facebook { background: #1877F2; }
.footer-volg-btn--telegram { background: #26A5E4; }
.footer-volg-btn--bluesky  { background: #0085FF; }
@media (prefers-reduced-motion: reduce) {
    .footer-volg-btns a:hover { transform: none; }
}
/* Meldingen-knop (web-push) meegenomen ín de volg-balk: als pill náást de
   social-knoppen, zónder het losse kaartje/uitlegtekst — de balk-subtitel
   dekt de uitleg al. push.js vult .push-cta en toont 'm (hidden → zichtbaar). */
.footer-volg-btns .push-cta { margin: 0; display: inline-flex; }
.footer-volg-btns .push-cta__inner { padding: 0; border: 0; background: none; border-radius: 0; gap: 0; }
.footer-volg-btns .push-cta__txt { display: none; }
.footer-volg-btns .push-cta__btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; padding: 9px 16px; border-radius: 9px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.footer-volg-btns .push-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0, 0, 0, .22); }
@media (prefers-reduced-motion: reduce) {
    .footer-volg-btns .push-cta__btn:hover { transform: none; }
}

/* INFO-PAGINA'S (hulpdiensten / contact / privacy / disclaimer) */
.info-page {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 24px 22px 32px;
    /* Geen max-width: zit binnen .grid (1fr 320px) wat de breedte regelt.
     * Left/right 22px gelijk aan .feed-head — zodat de h1 op info-pagina's
     * en lijst-pagina's op dezelfde X-positie staat als de menu-items
     * erboven. */
}
/* Eerste element in de kaart strak tegen de bovenrand (intro/H1 staat soms boven de kaart). */
.info-page > :first-child { margin-top: 0; }
/* Standalone info-page (zonder grid) — center beperkt.
 * Override binnen .grid/.feed-col zodat dorp/dienst/info-pagina's met sidebar
 * de volledige beschikbare breedte krijgen (anders triggert :only-child ook
 * binnen de feed-col en wordt de article smaller dan andere lijst-pagina's). */
.info-page:only-child {
    max-width: 760px;
    margin: 0 auto;
}
.grid .info-page:only-child,
.feed-col > .info-page:only-child {
    max-width: none;
    margin: 0;
}
.info-page h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.info-page h2 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 8px;
}
.info-page .lede {
    font-size: 17px;
    color: var(--c-ink-2);
    margin-bottom: 24px;
    line-height: 1.6;
}
.info-page p {
    color: var(--c-ink-2);
    line-height: 1.6;
    margin-bottom: 12px;
}
.dienst-uitleg {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--c-border);
}
.dienst-card {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 4px;
}
.dienst-card h3 {
    font-size: 16px;
    color: var(--c-ink);
    margin: 0 0 8px;
    font-weight: 600;
}
.dienst-card address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-ink);
}
.dienst-card address a {
    color: var(--c-ink);
    border-bottom: 1px dotted var(--c-ink-4);
}
.dienst-card address a:hover {
    color: var(--c-hl);
    border-bottom-color: var(--c-hl);
}

/* =============================================================
   Hulpdiensten-pagina template (snel-hulp + nav + kaart + print)
   ============================================================= */
.snel-hulp {
    background: var(--c-page);
    border: 2px solid var(--c-ink);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 24px 0;
}
.snel-hulp__titel {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: var(--c-ink-3);
    font-weight: 600;
}
.snel-hulp__lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 640px) {
    .snel-hulp__lijst { grid-template-columns: 1fr 1fr; }
}
.snel-hulp__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 8px;
    background: var(--c-card); /* was #fff — bleef wit in dark mode */
    border: 1px solid var(--c-border);
    border-radius: 4px;
}
.snel-hulp__item--spoed {
    background: #dc2626;
    border-color: #dc2626;
}
.snel-hulp__item--spoed .snel-hulp__label,
.snel-hulp__item--spoed .snel-hulp__nummer { color: #fff; }
.snel-hulp__label {
    font-size: 12px;
    color: var(--c-ink-3);
    margin-bottom: 4px;
    line-height: 1.3;
}
.snel-hulp__nummer {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: none;
    line-height: 1.1;
}
.snel-hulp__nummer:hover { text-decoration: underline; }
.hulpdiensten-nav {
    background: var(--c-page);
    padding: 12px 16px;
    border-radius: 4px;
    margin: 16px 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    font-size: 14px;
    border: 1px solid var(--c-border);
}
.hulpdiensten-nav__titel {
    font-weight: 600;
    color: var(--c-ink-3);
    margin-right: 4px;
}
.hulpdiensten-nav a {
    color: var(--c-hl);
    text-decoration: none;
    border-bottom: 1px dotted var(--c-hl);
}
.hulpdiensten-nav a:hover {
    text-decoration: underline;
    border-bottom-style: solid;
}
.hulpdiensten-kaart { margin: 24px 0; padding: 0; }
.kaart-canvas.hulpdiensten-kaart-380 { height: 380px; }
.hulpdiensten-kaart figcaption {
    font-size: 13px;
    color: var(--c-ink-3);
    margin-top: 8px;
    text-align: center;
}
@media print {
    .hulpdiensten-nav,
    .hulpdiensten-kaart,
    .info-page .lede { display: none !important; }
    .snel-hulp { border: 2px solid #000; background: #fff; page-break-inside: avoid; }
    .snel-hulp__item--spoed { background: #000 !important; color: #fff !important; }
    .dienst-card { page-break-inside: avoid; border: 1px solid #000; }
    .dienst-uitleg { page-break-inside: avoid; }
    .info-page section.faq { display: none !important; }
}

/* CONTACT FORM */
.contact-form { margin-top: 24px; }
.form-row {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 16px;
}
.form-row label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-3);
}
.form-row input,
.form-row textarea {
    font: inherit;
    padding: 10px 12px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-ink);
    transition: border-color .15s;
}
.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--c-ink);
}
.btn-primary {
    background: var(--c-ink);
    color: var(--c-card);
    padding: 12px 24px;
    border: none;
    border-radius: 3px;
    font-weight: 600;
    transition: background .15s;
}
.btn-primary:hover { background: var(--c-hl); }

/* PAGINERING */
.paginering {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid var(--c-border);
    background: var(--c-card);
    font-family: var(--font-mono);
    font-size: 12px;
}
.paginering-prev, .paginering-next,
.paginering-num, .paginering-current {
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    background: var(--c-card);
    border-radius: 3px;
    color: var(--c-ink-2);
    text-decoration: none;
    transition: all .15s;
    line-height: 1;
}
.paginering a:hover { background: var(--c-ink); color: var(--c-card); border-color: var(--c-ink); }
.paginering .disabled {
    color: var(--c-ink-4);
    background: transparent;
    border-color: transparent;
    cursor: default;
}
.paginering-current {
    color: var(--c-card);
    background: var(--c-ink);
    border-color: var(--c-ink);
    font-weight: 600;
}
.paginering-nums {
    display: inline-flex; align-items: center;
    gap: 6px; flex-wrap: wrap; justify-content: center;
}
.paginering-gap {
    color: var(--c-ink-4);
    padding: 6px 4px;
}

/* PAGE INTRO/OUTRO (info-tekst boven/onder feed) */
.page-h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--c-ink);
    margin: 24px 0 8px;
    text-wrap: pretty;
}
.page-intro {
    margin: 12px 0 0;
    line-height: 1.6;
    color: var(--c-ink-2);
}
.page-h1 + .page-intro { margin-top: 4px; }
/* Top-content rechthoek rechts van de intro-tekst (vervangt de header-banner:
   beter formaat + werkt op mobiel + binnen de fold). Float rechts → de intro
   leest links ernaast; clearfix zodat de ad niet in het stat-strip bloedt.
   Op smal scherm (<=700px) stapelt de ad boven de tekst. */
.page-intro::after, .kaart-intro::after { content: ""; display: table; clear: both; }
.intro-slot { float: right; width: 336px; max-width: 100%; margin: 2px 0 14px 22px; }
.intro-slot--solo { float: none; width: 336px; max-width: 100%; margin: 12px 0; }
.info-page h2 { clear: both; }  /* float-containment intro-ad */
@media (max-width: 700px) {
    .intro-slot, .intro-slot--solo { float: none; width: 100%; max-width: 336px; margin: 0 auto 14px; }
}
/* Heli-live-balk in het intro-blok (verzoek Jeffrey 2026-07-17). Desktop: een
   eigen block-formatting-context (overflow) zodat de balk links NAAST de rechts-
   flotende intro-ad staat i.p.v. eronderdoor, boven de intro-tekst. Mobiel: het
   intro-blok wordt (alleen als er een heli-balk is) een flex-kolom en de balk
   krijgt order 1 → bovenaan, boven de ad. */
.page-intro .heli-live-banner { overflow: hidden; }
@media (max-width: 700px) {
    .page-intro:has(.heli-live-banner) { display: flex; flex-direction: column; }
    .page-intro:has(.heli-live-banner)::after { display: none; }  /* clearfix niet nodig in flex-kolom */
    .page-intro > .heli-live-banner { order: 1; }
    .page-intro > .intro-slot { order: 2; }
    .page-intro > .page-intro-text { order: 3; }
}
.page-outro {
    margin-bottom: 20px;
    padding: 24px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    line-height: 1.6;
    color: var(--c-ink-2);
}
.page-intro h1, .page-outro h2 {
    color: var(--c-ink);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.page-intro p, .page-outro p { margin-bottom: 10px; }
.page-outro { margin-top: 24px; }

/* FAQ — gebruikt op dorp/dienst/info-pagina's binnen page-outro of info-page */
.faq h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--c-ink);
}
.faq h3 {
    margin: 32px 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-ink);
}
.faq h3:first-of-type { margin-top: 18px; }

/* Compactere variant voor dorp-Q&A in page-intro (kort blok, 2-3 vragen).
   Activeer via class="faq dorp-qa". */
.dorp-qa { margin: 18px 0 8px; padding: 16px 18px; background: var(--c-page); border-radius: 6px; }
.dorp-qa h2 { font-size: 16px; margin-bottom: 4px; color: var(--c-ink-2); }
.dorp-qa h3 { font-size: 14px; margin: 14px 0 6px; }
.dorp-qa h3:first-of-type { margin-top: 10px; }
.dorp-qa h3::before { width: 18px; height: 18px; font-size: 11px; }
.dorp-qa p { font-size: 14px; margin-bottom: 0; }
.faq h3::before {
    content: '?';
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-hl);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    font-family: var(--font-body);
    line-height: 1;
}
.faq p, .faq ul {
    line-height: 1.65;
    margin: 0 0 10px;
    color: var(--c-ink-2);
}
.faq ul { padding-left: 22px; }
.faq ul li { margin-bottom: 4px; }
.faq a { color: var(--c-link); text-decoration: underline; }
.faq a:hover { text-decoration: none; }

/* === Inline content-links (blauw + onderstreept) — besluit 2026-06-30 ===
 * Content-links in intro/outro/FAQ/info-prose krijgen een herkenbare blauwe
 * kleur i.p.v. onzichtbaar (globale a = inherit, geen onderstreping). Rood
 * (var(--c-hl)) blijft gereserveerd voor nav/knoppen/kaarten/buttons. Bewust
 * gescoped op prose-context (p/li/lede) zodat kaart- en navigatie-links binnen
 * deze blokken hun eigen stijl houden. */
.page-intro p a,
.page-outro p a,
.page-outro li a,
.faq p a,
.faq li a,
.info-page p a,
.info-page li a,
.info-page .lede a,
.hero-tekst p a,
.hero-tekst .lede a,
.verhaal a,
.dienst-uitleg p a {
    color: var(--c-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-intro p a:hover,
.page-outro p a:hover,
.page-outro li a:hover,
.faq p a:hover,
.faq li a:hover,
.info-page p a:hover,
.info-page li a:hover,
.info-page .lede a:hover,
.hero-tekst p a:hover,
.hero-tekst .lede a:hover,
.verhaal a:hover,
.dienst-uitleg p a:hover {
    text-decoration: none;
}

/* Button-rij onder een FAQ — interne navigatie naar gerelateerde pagina's */
.faq-buttons {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}
.faq-buttons a {
    display: inline-block;
    padding: 8px 14px;
    background: var(--c-card);
    border: 1.5px solid var(--c-hl);
    border-radius: 4px;
    text-decoration: none;
    color: var(--c-hl);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.faq-buttons a:hover {
    background: var(--c-hl);
    color: #fff;
}

/* Veiligheidsadvies-CTA onder de FAQ-Q&A (besluit 2026-07-01): opgebouwd als
   titel + tekst, net als een vraag/antwoord, maar met een blauw info-icoon
   (SVG, duidelijk herkenbaar) i.p.v. het rode ?-icoon. Geen <h3> gebruiken:
   dat zou het als nep-vraag in het FAQPage-schema zetten en een rood ? krijgen.
   Staat vóór de faq-buttons, zodat de knoppen als laatste komen. */
.veiligheidsadvies-cta {
    margin: 40px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--c-border);
}
.veiligheidsadvies-cta__titel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-ink);
}
.veiligheidsadvies-cta__ico {
    flex-shrink: 0;
    display: block;
}
.veiligheidsadvies-cta__tekst {
    margin: 0;
    line-height: 1.65;
    color: var(--c-ink-2);
}
/* Buttons direct na de CTA: geen dubbele scheidingslijn, maar wel ruim
   los van het info-blok (besluit 2026-07-01: meer lucht tot de knoppen). */
.veiligheidsadvies-cta + .faq-buttons {
    border-top: none;
    padding-top: 0;
    margin-top: 40px;
}

/* Andere-dorpen-nav onderaan dorp-pagina's voor internal linking */
.andere-dorpen-nav {
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
}
.andere-dorpen-nav h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0 0 12px;
}
.andere-dorpen-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.andere-dorpen-list a {
    display: inline-block;
    padding: 6px 12px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.andere-dorpen-list a:hover {
    background: var(--c-card-hover);
    border-color: var(--c-border-strong);
    color: var(--c-hl);
}

/* DETAILPAGE */
.breadcrumb {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; row-gap: 6px;
    padding: 14px 0;
    margin-bottom: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-ink-3);
}
.bc-current { overflow-wrap: anywhere; }
.breadcrumb .back {
    display: inline-flex; align-items: center;
    white-space: nowrap; /* chip niet over 2-3 regels laten breken op mobiel */
    padding: 6px 12px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-ink-2);
    transition: all .15s;
}
.breadcrumb .back:hover { background: var(--c-page); border-color: var(--c-border-strong); }
.bc-sep { color: var(--c-ink-4); }
.bc-dienst { font-weight: 600; }
.bc-link {
    color: var(--c-ink-2);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .12s, border-color .12s;
}
.bc-link:hover {
    color: var(--c-hl);
    border-bottom-color: var(--c-hl);
}
.bc-current { font-weight: 600; color: var(--c-ink); }
.bc-text { color: var(--c-ink-2); }

.hero {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 28px;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 32px;
}
.hero-map {
    display: block;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 14px;
    transition: border-color .15s;
}
.hero-map:hover { border-color: var(--c-border-strong); }
.hero-map-cap {
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-3);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.hero-map-cap strong { color: var(--c-ink); }
.hero-map img {
    width: 100%; height: auto;
    border-radius: 3px;
}
.hero-map-link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-ink-3);
}

.hero-meta {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--c-ink);
    margin-bottom: 24px;
    text-wrap: pretty;
}

.hero-tijd {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    background: var(--c-page);
    padding: 14px 16px;
    border-radius: 4px;
    margin-bottom: 24px;
}
.tijd-blok { display: flex; flex-direction: column; gap: 4px; }
.tijd-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-2);
}
.tijd-waarde {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-ink);
}

.hero-tekst { margin-bottom: 24px; }
.hero-tekst p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-ink-2);
    margin-bottom: 12px;
}
.hero-tekst .lede {
    font-size: 16px;
    color: var(--c-ink);
    font-weight: 500;
}
.hero-tekst code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--c-page);
    padding: 1px 5px;
    border-radius: 2px;
}

/* HELIKOPTER-BETROKKENHEID — widget op melding/nieuws-bericht detail-pagina */
.heli-betrokken {
    margin: 24px 0;
    padding: 18px 22px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 4px;
}
.heli-betrokken-titel {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--c-ink);
}
.heli-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.heli-card:last-of-type { margin-bottom: 0; }

/* Klikbare vlucht-kaart: hele kaart linkt naar de vluchtdetail via een
 * "stretched link" (.heli-card-stretch dekt de kaart af). Echte links binnen
 * de kaart (gekoppelde melding, detail-link) staan er met z-index bovenop en
 * blijven los klikbaar. */
.heli-card--klikbaar {
    position: relative;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.heli-card--klikbaar:hover {
    border-color: var(--c-border-strong);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}
.heli-card-stretch {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.heli-card--klikbaar a:not(.heli-card-stretch) { position: relative; z-index: 2; }

.heli-card-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.heli-icoon { font-size: 22px; line-height: 1; }
.heli-card-titel { flex: 1; min-width: 0; }
.heli-card-titel strong {
    display: block;
    font-size: 15px;
    color: var(--c-ink);
}
.heli-card-type {
    display: block;
    font-size: 12px;
    color: var(--c-ink-3);
    margin-top: 1px;
}
.heli-card-meta {
    display: block;
    font-size: 12px;
    color: var(--c-ink-3);
    margin-top: 1px;
    line-height: 1.4;
}
.heli-leg-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    background: #e6edf5;
    color: #2c4a6e;
}
.heli-leg-badge.heli-leg-retour { background: #f6e9d8; color: #7a5212; }
.heli-koppeling {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 3px solid var(--c-accent, #2c6cbd);
    background: var(--c-surf-2, #f4f6f9);
    border-radius: 4px;
    font-size: 14px;
}
.heli-card-when {
    color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.heli-card-link {
    margin: 8px 0 0;
    font-size: 14px;
}
.heli-card-link a {
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 600;
}
.heli-card-link a:hover {
    text-decoration: underline;
}
.heli-card-titel a {
    color: inherit;
    text-decoration: none;
}
.heli-card-titel a:hover {
    text-decoration: underline;
}
.heli-card-phase {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--c-page);
    color: var(--c-ink-2);
    flex-shrink: 0;
}
.heli-phase-actief, .heli-phase-onderweg-heen, .heli-phase-onderweg-terug, .heli-phase-op-locatie {
    background: #FEF3C7;
    color: #92400E;
}
.heli-phase-voltooid {
    background: #D1FAE5;
    color: #065F46;
}
.heli-card-route {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-ink-2);
}
.heli-card-route strong {
    color: var(--c-ink);
    font-weight: 600;
}
.heli-route-arrow {
    color: var(--c-ink-3);
    font-weight: 700;
    margin: 0 6px;
}
.heli-card-feiten {
    display: flex; flex-wrap: wrap; gap: 14px 24px;
    margin: 0;
    font-size: 13px;
}
.heli-card-feiten div { margin: 0; }
.heli-card-feiten dt {
    font-size: 11px;
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 1px;
}
.heli-card-feiten dd {
    margin: 0;
    font-weight: 600;
    color: var(--c-ink);
}
.heli-card-callsign {
    font-size: 12px;
    color: var(--c-ink-3);
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
}
.heli-card-map {
    height: 260px;
    margin-top: 14px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--c-border);
}
.heli-map-melding-marker span {
    display: block;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--c-hl);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.3);
}
.heli-card-callsign code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--c-page);
    padding: 1px 5px;
    border-radius: 2px;
}
.heli-betrokken-disclaimer {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--c-ink-4);
    font-style: italic;
}

/* HELIKOPTER LIVE-MARKER op live-kaart (Leaflet DivIcon)
   Zelfde druppel-vorm als melding-pin (.mp), in heli-type-kleur, met klein
   wit rotor-cross-symbool ovenop ipv lege binnenkant. */
.mp-heli { position: relative; }
.mp-heli .mp-heli-rotor {
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 12px; height: 12px;
    pointer-events: none;
}
.mp-heli .mp-heli-rotor::before,
.mp-heli .mp-heli-rotor::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 1px;
    top: 50%; left: 50%;
}
.mp-heli .mp-heli-rotor::before {
    width: 12px; height: 2px;
    transform: translate(-50%, -50%);
}
.mp-heli .mp-heli-rotor::after {
    width: 2px; height: 12px;
    transform: translate(-50%, -50%);
}
.mp-heli-voltooid span { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* MELDING-PIN MET HELI-BADGE: combo-marker als heli-eind dichtbij melding-pin staat.
   Outer wrapper is 36×36; pin-span (22px) staat linksboven via .mp; badge zit
   binnen de bbox, rechtsboven, zodat 't niet door Leaflet wordt afgeknipt. */
.mp-with-heli { position: relative; }
.mp-with-heli .mp-heli-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.45);
    pointer-events: none;
}
.mp-with-heli .mp-heli-badge::before,
.mp-with-heli .mp-heli-badge::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 0.5px;
    top: 50%; left: 50%;
}
.mp-with-heli .mp-heli-badge::before {
    width: 9px; height: 1.6px;
    transform: translate(-50%, -50%);
}
.mp-with-heli .mp-heli-badge::after {
    width: 1.6px; height: 9px;
    transform: translate(-50%, -50%);
}

/* HELIKOPTER LIVE-BANNER: top-of-page indicator wanneer heli actief is */
.heli-live-banner {
    margin: 0 0 16px;
}
.heli-live-banner-icon {
    flex-shrink: 0;
    font-size: 2.4em;
    line-height: 1;
}
.heli-live-banner-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #FEF3C7;
    border: 1px solid #fcd34d;
    border-left: 4px solid #ea580c;
    border-radius: 6px;
    color: #92400E;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.heli-live-banner-link:hover {
    background: #FDE68A;
    border-color: #f59e0b;
}
.heli-live-banner-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: #ea580c;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.25);
    animation: heli-banner-pulse 1.6s ease-in-out infinite;
}
@keyframes heli-banner-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.25); }
    50%      { box-shadow: 0 0 0 9px rgba(234, 88, 12, 0.05); }
}
.heli-live-banner-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}
.heli-live-banner-text strong { color: #92400E; }
.heli-live-banner-cta {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #92400E;
    white-space: nowrap;
}
[data-theme="dark"] .heli-live-banner-link {
    background: #3a2410;
    border-color: #7c4a12;
    border-left-color: #ea580c;
    color: var(--c-ink);
}
[data-theme="dark"] .heli-live-banner-link:hover {
    background: #4a2e14;
    border-color: #b45309;
}
[data-theme="dark"] .heli-live-banner-text strong { color: #fdba74; }
[data-theme="dark"] .heli-live-banner-cta { color: #fb923c; }

/* HELIKOPTER-PAGINA: live-blok, vluchten-lijst, filter-chips, maand-grafiek */
.heli-live-blok {
    margin: 24px 0;
    padding: 16px;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
}
.heli-live-titel {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 10px;
}
.heli-live-dot {
    width: 10px;
    height: 10px;
    background: #dc2626;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.25);
    animation: heli-live-pulse 1.6s ease-in-out infinite;
}
@keyframes heli-live-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.25); }
    50%      { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0.05); }
}

.heli-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px;
}
.heli-filter-chips .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--c-ink-2);
    text-decoration: none;
    background: var(--c-card);
    transition: background 0.15s, border-color 0.15s;
}
.heli-filter-chips .chip:hover { border-color: var(--c-ink-3); }
.heli-filter-chips .chip.is-active {
    background: var(--c-ink);
    color: var(--c-card);
    border-color: var(--c-ink);
}

.heli-vluchten-lijst {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.heli-vluchten-lijst .heli-card { margin: 0; }

.heli-card-melding {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
    font-size: 13px;
    color: var(--c-ink-2);
}
.heli-card-melding strong { color: var(--c-ink); margin-right: 4px; }
.heli-card-melding a { color: var(--c-link); }

.heli-leeg {
    padding: 24px 16px;
    text-align: center;
    background: var(--c-page);
    border: 1px dashed var(--c-border);
    border-radius: 6px;
    color: var(--c-ink-3);
    font-size: 14px;
}

/* Maand-grafiek: simpele staaf-chart per maand */
.heli-maand-grafiek {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 12px 0 24px;
    padding: 12px;
    background: var(--c-page);
    border-radius: 6px;
    min-height: 140px;
}
.heli-maand-bar {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100px;
    position: relative;
    padding-bottom: 24px;
}
.heli-maand-fill {
    width: 80%;
    max-width: 28px;
    background: linear-gradient(to top, #ea580c, #fb923c);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.3s;
}
.heli-maand-label {
    position: absolute;
    bottom: 4px;
    font-size: 10px;
    color: var(--c-ink-3);
    font-family: var(--font-mono);
    text-transform: uppercase;
}
.heli-maand-aantal {
    position: absolute;
    top: -16px;
    font-size: 11px;
    color: var(--c-ink-2);
    font-weight: 600;
}

/* DETAILS-LIJST */
.details {
    display: grid;
    grid-template-columns: 140px 1fr;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    margin-bottom: 24px;
    margin-top: 0;
}
.details dt, .details dd {
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border);
    margin: 0;
    display: flex;
    align-items: center;
}
.details dt {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-3);
    background: var(--c-page);
    border-right: 1px solid var(--c-border);
}
.details dd {
    font-size: 14px;
    color: var(--c-ink);
    gap: 8px;
}
.details dt:nth-last-of-type(1), .details dd:nth-last-of-type(1) {
    border-bottom: none;
}
.details code {
    font-family: var(--font-mono);
    font-size: 14px;
    background: var(--c-page);
    padding: 3px 8px;
    border-radius: 2px;
}
/* In de details-tabel: prio-badge en eenheid-extra mogen groter dan in
 * de feed-meta — hier is meer ruimte en het is geen opsomming. */
.details .melding-code {
    font-size: 13px;
    padding: 3px 10px;
    font-weight: 700;
}
/* Heli-status-badge: dienst-tint via custom property zodat dark-mode de
 * (voor lichte achtergrond ontworpen) tint kan oplichten — anders is bv.
 * POL-blauw #2C5F7A vrijwel onzichtbaar op de donkere card. */
.heli-status {
    color: var(--heli-accent, var(--c-ink));
    border-color: var(--heli-accent, var(--c-border-strong));
}
[data-theme="dark"] .heli-status {
    color: color-mix(in srgb, var(--heli-accent, var(--c-ink)) 55%, #fff);
    border-color: color-mix(in srgb, var(--heli-accent, var(--c-border-strong)) 55%, #fff);
}
.dl-dienst-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}

.disclaimer {
    background: var(--c-hl-soft);
    border-left: 3px solid var(--c-hl);
    padding: 14px 16px;
    border-radius: 0 3px 3px 0;
    font-size: 12px;
    color: var(--c-ink-2);
}

/* KAART-PAGINA */
.kaart-page { padding-bottom: 24px; padding-top: 20px; }
.kaart-slot { margin: 18px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kaart-h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.kaart-sub {
    color: var(--c-ink-3);
    margin-bottom: 16px;
    font-size: 14px;
}
.kaart-sub-extra { color: var(--c-ink-4); }

.kaart-intro {
    color: var(--c-ink-2);
    font-size: 16px;
    line-height: 1.6;
    margin: 12px 0 20px;
}
.kaart-intro p { margin: 0 0 10px; }
.kaart-intro p:last-child { margin-bottom: 0; }
.kaart-result {
    margin: 12px 0 14px;
    color: var(--c-ink-2);
    font-size: 14px;
}
.kaart-result-extra { color: var(--c-ink-4); }
.kaart-refresh-status {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-4);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.kaart-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 14px;
}
/* min-width:0 — anders zet een intrinsiek breed kind (728px-leaderboard-img,
   leaflet) de min-content van de track en scrolt de hele pagina horizontaal. */
.kaart-grid > * { min-width: 0; }
@media (max-width: 800px) {
    .kaart-grid { grid-template-columns: 1fr; }
}
.kaart-lijst {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    display: flex; flex-direction: column;
    max-height: 600px;
    overflow: hidden;
}
.kaart-lijst-cap {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink);
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border);
}
.kaart-lijst-ad {
    padding: 12px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-page);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.kaart-lijst-items { overflow-y: auto; flex: 1; }
.kaart-lijst-empty {
    padding: 16px 14px;
    color: var(--c-ink-4);
    font-size: 13px;
}
.kaart-lijst-item {
    display: flex; align-items: stretch; gap: 0;
    border-bottom: 1px solid var(--c-border);
    border-left: 3px solid var(--svc, var(--c-ink-3));
    transition: background 0.1s;
}
.kaart-lijst-item:hover { background: var(--c-page); }
.kli-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
}
.kli-detail {
    display: flex; align-items: center; justify-content: center;
    width: 36px;
    border-left: 1px solid var(--c-border);
    color: var(--c-ink-3);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.kli-detail:hover { background: var(--c-ink); color: #fff; }
.kli-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-3);
    line-height: 1.7;       /* extra ruimte tussen wrap-regels (SPOED-badge → datum eronder) */
    display: block;
}
.kli-meta strong { color: var(--svc, var(--c-ink)); }
/* Badge-pijlen krijgen iets meer luchtbufferruimte rondom in de wrap-flow */
.kli-meta .kli-badge { margin-right: 2px; }
/* Tijd · plaats op een eigen regel onder de badges/dienst (bv. 00:49 · HAARLEM) */
.kli-tijdplaats {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-3);
    line-height: 1.5;
    display: block;
}
.kli-text {
    font-size: 13px;
    color: var(--c-ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* VERGELIJKBARE MELDINGEN (sidebar widget) */
.vergelijk-list { display: flex; flex-direction: column; }
.vergelijk-item {
    display: block; padding: 10px 12px;
    border-left: 3px solid var(--svc, var(--c-ink-3));
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    background: transparent;
    transition: background .12s;
}
.vergelijk-item:last-child { border-bottom: none; }
.vergelijk-item:hover { background: var(--c-page); }
.vergelijk-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.vergelijk-meta strong { color: var(--svc, var(--c-ink)); }
.vergelijk-tekst { display: block; font-size: 13px; color: var(--c-ink); line-height: 1.4; }

/* HOOFDNAV (horizontaal, tussen header en content) */
.mainnav {
    background: var(--c-card);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    /* Boven Leaflet-kaarten (panes/controls ~z-index 1000) zodat de kaart niet
       óver het menu schuift als je 'm eronderdoor scrollt; onder de skip-link (2000). */
    z-index: 1100;
}
/* Zachte schaduw pas zodra het menu écht vastgeplakt zit (JS zet .is-stuck). */
.mainnav.is-stuck { box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
.mainnav-inner {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.mainnav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    color: var(--c-ink-2);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .12s;
}
.mainnav-item:hover { color: var(--c-ink); }
.mainnav-item.is-active { color: var(--c-hl); }
/* Active onderlijn via ::after — spant alleen onder de content (icoon+tekst),
 * niet onder het padding-gebied. bottom: -3px zodat de pseudo-element exact
 * in het border-bottom-gebied valt (waar de oorspronkelijke border-bottom-
 * color zat). Voor het eerste item geen left-pad zodat het item op de
 * container-rand begint. */
.mainnav-item.is-active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 16px;
    right: 16px;
    height: 3px;
    background: var(--c-hl);
}
.mainnav-item:first-child { padding-left: 0; }
.mainnav-item:first-child.is-active::after { left: 0; }
.mainnav-icon { display: inline-flex; color: currentColor; }

/* SIDEBAR-NAV (Bekijk-blokje) — niet meer gebruikt sinds mainnav, css blijft voor evt. fallback */
.sidebar-nav .sb-nav-list { list-style: none; padding: 0; margin: 0; }
.sidebar-nav .sb-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 3px;
    color: var(--c-ink-2);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.sidebar-nav .sb-nav-item:hover {
    background: var(--c-page);
    color: var(--c-ink);
}
.sidebar-nav .sb-nav-item.is-active {
    background: var(--c-ink);
    color: #fff;
    font-weight: 600;
}
.sidebar-nav .sb-nav-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: currentColor;
    flex-shrink: 0;
}
.sidebar-nav .sb-nav-item.is-active .sb-nav-icon { color: var(--c-hl); }
.sidebar-nav .sb-nav-label { line-height: 1; }

/* PERIODE-CHIPS (naast hulpdienst) */
.periode-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.filterblok-row {
    display: flex;
    justify-content: space-between;
    gap: 0;
    align-items: start;
    flex-wrap: wrap;
}
.filterblok-col { min-width: 0; }
/* Filter per hulpdienst — vaste breedte zodat alle 4 chips + spoed inpassen */
.filterblok-row > .filterblok-col:first-child { width: 460px; }
.filter-spoed-row { margin-top: 8px; }
.filter-refresh-row { margin-top: 10px; }
@media (max-width: 900px) {
    .filterblok-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ARCHIEF */
.archief-nav {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 8px;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    font-size: 13px;
}
.archief-nav a { color: var(--c-ink-2); text-decoration: none; font-weight: 500; }
.archief-nav a:hover { color: var(--c-hl); }
.archief-nav-back { color: var(--c-ink) !important; font-weight: 600 !important; }
.archief-nav-spacer { color: var(--c-ink-4); }
.archief-nav-dagen { margin-left: auto; display: flex; gap: 12px; }
@media (max-width: 600px) {
    .archief-nav-dagen { margin-left: 0; width: 100%; justify-content: space-between; }
}

.archief-maanden { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.archief-maanden li a { display: inline-block; padding: 8px 14px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 3px; text-decoration: none; color: var(--c-ink); font-weight: 500; }
.archief-maanden li a:hover { border-color: var(--c-hl); color: var(--c-hl); }
.archief-dagen { list-style: none; padding: 0; margin: 0; }
.ad-dag {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    color: var(--c-ink);
    transition: background .12s;
}
.ad-dag:hover { background: var(--c-page); }
.ad-dag-datum { font-weight: 500; }
.ad-dag-aantal { font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-3); }

/* STATISTIEKEN */
/* Statistieken pagina h2's krijgen subtiele rode accent-underline */
.info-page h2 {
    border-bottom: 2px solid var(--c-hl);
    padding-bottom: 6px;
    display: inline-block;
    margin-top: 28px;
    margin-bottom: 14px;
}
.info-page h2:first-of-type { margin-top: 14px; }
.info-page > h2:first-child { margin-top: 0; }  /* titel als 1e kaart-element (statistieken/archief): strak bovenin */

.stats-grid-num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 24px; }
@media (max-width: 520px) {
    .stats-grid-num { grid-template-columns: repeat(2, 1fr); }
}
.stat-tegel {
    background: var(--c-page); border-radius: 4px; padding: 14px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.stat-tegel .stat-num { font-size: 26px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.02em; }
.stat-tegel .stat-lbl { font-size: 12px; color: var(--c-ink-3); }
.stats-bars-h { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 24px; }
.sbh-row { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 10px; font-size: 13px; }
.sbh-lbl { color: var(--c-ink-2); }
.sbh-track { background: var(--c-page); height: 14px; border-radius: 3px; overflow: hidden; }
.sbh-fill { display: block; height: 100%; }
.sbh-val { font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-3); text-align: right; }
.stats-bars-uur-wrap { display: flex; gap: 8px; align-items: stretch; margin: 12px 0 6px; }
.sbu-yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 160px; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-3); padding-right: 4px; border-right: 1px solid var(--c-border); text-align: right; min-width: 28px; }
.stats-bars-uur { flex: 1; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 160px; position: relative; }
.sbu-grid { position: absolute; left: 0; right: 0; top: 0; bottom: 18px; pointer-events: none;
    background-image: linear-gradient(to bottom, var(--c-border) 1px, transparent 1px); background-size: 100% 50%; background-position: 0 0; }
.sbu-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; position: relative; z-index: 1; }
.sbu-bar {
    width: 100%;
    background: linear-gradient(180deg, #C7261D 0%, #E1701B 100%);
    border-radius: 3px 3px 0 0;
    min-height: 0;
    transition: filter .12s;
}
.sbu-bar:hover { filter: brightness(1.1); }
.sbu-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--c-ink-3); margin-top: 4px; }
.stats-bars-meta-note { font-size: 12px; color: var(--c-ink-3); margin-bottom: 24px; }

/* SEARCH BOX (sidebar + zoeken-pagina) */
.sidebar-zoek .sb-zoek-row { display: flex; gap: 6px; }
.sb-zoek-input { flex: 1; padding: 7px 10px; border: 1px solid var(--c-border); border-radius: 3px; font: inherit; font-size: 13px; min-width: 0; }
.sb-zoek-input:focus { outline: none; border-color: var(--c-hl); }
.sb-zoek-btn { background: var(--c-ink); color: #fff; border: 0; border-radius: 3px; padding: 0 12px; cursor: pointer; display: flex; align-items: center; }
.sb-zoek-btn:hover { background: var(--c-hl); }
.zoek-form { display: flex; gap: 8px; margin: 12px 0 18px; }
.zoek-input { flex: 1; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 3px; font: inherit; font-size: 15px; }
.zoek-input:focus { outline: none; border-color: var(--c-hl); }
.zoek-btn { padding: 10px 22px; background: var(--c-ink); color: #fff; border: 0; border-radius: 3px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.zoek-btn:hover { background: var(--c-hl); }
.zoek-suggesties {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: -8px 0 4px;
}
.zoek-suggesties-label {
    font-size: 13px; color: var(--c-ink-3); margin-right: 4px;
}
.zoek-suggestie { text-decoration: none; }
.zoek-suggestie:hover { border-color: var(--c-ink); color: var(--c-ink); }
.zoek-meta { color: var(--c-ink-3); margin: 16px 0 12px; }
.zoek-resultaten { display: flex; flex-direction: column; }
.zoek-resultaat {
    display: block; padding: 12px 14px;
    border-left: 3px solid var(--svc, var(--c-ink-3));
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    transition: background .12s;
}
.zoek-resultaat:hover { background: var(--c-page); }
.zr-meta { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.zr-meta strong { color: var(--svc, var(--c-ink)); }
.zr-tekst { display: block; font-size: 14px; color: var(--c-ink); line-height: 1.4; }

/* Extra-uitleg naast code in detail-tabel ("10118" + "ambulance Den Burg") */
.dd-extra { display: inline-block; margin-left: 6px; color: var(--c-ink-3); font-size: 14px; }

/* PAGINA-INFO WIDGET (generic per page-type) */
.paginainfo-tekst { font-size: 15px; line-height: 1.55; color: var(--c-ink-2); margin: 0; }

/* KAART-ASIDE (verzamel-container voor kaart-lijst + widgets ernaast) */
.kaart-aside { display: flex; flex-direction: column; gap: 14px; }

/* DORP-INFO WIDGET (sidebar op dorp-pagina) */
.dorpinfo-tekst { font-size: 15px; line-height: 1.55; color: var(--c-ink-2); margin: 0 0 12px; }
.dorpinfo-feiten { margin: 0; padding-top: 10px; border-top: 1px solid var(--c-border); }
.dorpinfo-feiten > div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.dorpinfo-feiten dt { color: var(--c-ink-3); margin: 0; }
.dorpinfo-feiten dd { color: var(--c-ink); font-weight: 600; margin: 0; font-family: var(--font-mono); }

/* DORP-STATS WIDGET (op detail-pagina) */
.dorp-stats-h {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-3);
    margin: 14px 0 6px;
}
.dorp-stats-h:first-of-type { margin-top: 0; }
.dorp-stats-straten { list-style: none; padding: 0; margin: 0 0 4px; }
.dorp-stats-straten li {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
}
.dorp-stats-straten li:last-child { border-bottom: none; }
.dss-naam { color: var(--c-ink); font-weight: 500; }
.dss-aantal { font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-3); }
.dorp-stats-bars { display: flex; flex-direction: column; gap: 6px; }
.dsb-row { display: grid; grid-template-columns: 80px 1fr 28px; align-items: center; gap: 8px; font-size: 12px; }
.dsb-lbl { color: var(--c-ink-2); }
.dsb-track { background: var(--c-page); border-radius: 2px; height: 8px; overflow: hidden; }
.dsb-fill { display: block; height: 100%; }
.dsb-val { text-align: right; font-family: var(--font-mono); color: var(--c-ink-3); font-size: 11px; }

/* CODES TABEL */
.codes-tabel { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 14px; }
.codes-tabel th, .codes-tabel td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.codes-tabel th { font-weight: 600; color: var(--c-hl); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: #FFF1F0; }
.codes-tabel td:first-child { width: 110px; }

/* PER-INCIDENT CONTEXT op /melding/{id}/ en /nieuwsbericht/{slug}/ — gebruikt
   .page-outro + .faq markup (zelfde stijl als dorp-pages). Alleen de
   gerelateerde-meldingen-lijst heeft eigen markup. */
.ctx-gerelateerd-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ctx-gerelateerd-lijst li {
    border-bottom: 1px solid var(--c-border);
    padding: 0;
}
.ctx-gerelateerd-lijst li:last-child { border-bottom: none; }
.ctx-gerelateerd-lijst a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    text-decoration: none;
    color: var(--c-ink);
}
.ctx-gerelateerd-lijst a:hover { color: var(--c-link); }
.ctx-tijd {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ctx-tekst {
    font-size: 14px;
    line-height: 1.4;
}
.ctx-cta {
    margin-top: 8px;
    font-size: 13px;
}
.ctx-cta a { color: var(--c-link); font-weight: 600; }

/* Definitions-list voor codes (vervangt eerdere tabel-render).
   Semantisch <dl>: dt = code, dd = uitleg. Helpt AI's en screenreaders
   te begrijpen "term + definitie". Iedere dt heeft een id voor anchoring. */
.codes-lijst {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px 14px;
    margin: 12px 0 8px;
    font-size: 14px;
}
.codes-lijst dt {
    grid-column: 1;
    padding: 8px 0;
    scroll-margin-top: 80px; /* offset bij anchor-jump zodat 't niet onder topbar verdwijnt */
}
.codes-lijst dd {
    grid-column: 2;
    padding: 8px 0;
    margin: 0;
    border-bottom: 1px solid var(--c-border);
}
.codes-lijst dt + dd {
    border-bottom: 1px solid var(--c-border);
}
.codes-lijst dt {
    border-bottom: 1px solid var(--c-border);
}
.codes-lijst dt:last-of-type,
.codes-lijst dd:last-of-type {
    border-bottom: none;
}
/* Stats-versie: lange tekst in eerste kolom, kort getal in tweede.
 * Verhouding omgedraaid t.o.v. de standaard codes-tabel. Aantal-kolom
 * krimpt naar de inhoud zodat plaats/straat alle resterende ruimte krijgt. */
.codes-tabel-stats { table-layout: auto; }
.codes-tabel-stats td:first-child,
.codes-tabel-stats th:first-child { width: auto; white-space: normal; }
.codes-tabel-stats td:last-child,
.codes-tabel-stats th:last-child  { width: 1%; text-align: right; white-space: nowrap; padding-right: 14px; }
.code-tag {
    display: inline-block;
    background: var(--svc, var(--c-ink));
    color: #fff;
    padding: 3px 9px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
}
/* dfn wrapper rond .code-tag: nooit cursief, ook al is dat de browser-default */
dt > dfn { font-style: normal; }

/* Ad-slot direct onder de kaart op detail-pagina */
.hero-left { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 16px; }
.hero-ad { display: flex; justify-content: center; }

/* AUTO-REFRESH WIDGET — label boven, chips in dezelfde stijl als andere filters */
.auto-refresh { display: flex; flex-direction: column; gap: 6px; }
.ar-lbl {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink);
}
.ar-status {
    font-weight: 400;
    color: var(--c-ink-4);
    margin-left: 6px;
    font-size: 12px;
}
.ar-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ar-chip {
    display: inline-flex; align-items: center;
    padding: 8px 10px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.ar-chip:hover {
    border-color: var(--c-border-strong);
    color: var(--c-ink);
}
.ar-chip.is-active {
    background: var(--c-card);
    color: var(--c-ink);
    border-color: var(--c-ink);
    border-width: 2px;
    font-weight: 700;
    padding: 7px 9px;
}

/* NIEUWSTE MARKER op /kaart/ — pulserend donkergrijs ringetje
 * (was rood, maar rood reserveren we nu voor SPOED-aanduiding).
 * Werkt op zowel solo-bolletjes (.mp) als nieuws-bericht-bundels (.mp-nieuws-bericht). */
.mp-newest span,
.mp-newest > .mp-inc-ring {
    box-shadow: 0 0 0 4px rgba(46, 50, 56, 0.35), 0 2px 6px rgba(0,0,0,0.4);
    animation: mp-pulse 1.6s ease infinite;
    z-index: 1000 !important;
    position: relative;
}
@keyframes mp-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(46, 50, 56, 0.45), 0 2px 6px rgba(0,0,0,0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(46, 50, 56, 0.05), 0 2px 6px rgba(0,0,0,0.4); }
}
.kaart-lijst-item.is-newest {
    background: #F1F3F6;
    border-left: 3px solid var(--c-ink-2);
}
/* NIEUW- en SPOED-badge voor lijst-items op /kaart/.
 * Worden beide als echte <span> gerenderd zodat ze kunnen co-existeren. */
.kli-badge {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.kli-newest    { background: var(--c-ink); }
.kli-spoed     { background: var(--c-hl); }
.kli-nieuws-bericht  { background: #5b3aa8; }  /* paars — onderscheidt van NIEUW (zwart) en SPOED (rood) */
/* BUNDEL — bundel zonder eigen /112-nieuws/-pagina (drempel niet gehaald
 * of nieuws-pagina's uit). Visueel rustiger dan NIEUWS: outline-stijl,
 * spiegelt .melding-bundel-badge op de homepage. */
.kli-bundel {
    background: transparent;
    color: var(--c-ink-2, #555);
    border: 1px solid var(--c-line, #d5d5d5);
    padding: 0 4px;
}

/* Filter-chip "Alleen nieuws-berichten" — paars in active state, zoals SPOED rood is */
.chip.chip-nieuws-bericht.is-active { background: #5b3aa8; color: #fff; border-color: #5b3aa8; }

/* === /nieuws/ HUB-PAGINA === */
.nieuws-periode-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.nieuws-stats { font-size: 13px; color: var(--c-ink-3); margin: 8px 0 18px; font-family: var(--font-mono); }
.nieuws-leeg { padding: 30px 20px; text-align: center; background: var(--c-card); border-radius: 10px; border: 1px solid var(--c-border); color: var(--c-ink-2); }
.nieuws-leeg p { margin: 8px 0; }

.nieuws-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin: 16px 0;
}
@media (max-width: 900px) { .nieuws-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nieuws-grid { grid-template-columns: 1fr; } }
.nieuws-tile {
    background: var(--c-card); border: 1px solid var(--c-border); border-radius: 10px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column;
}
.nieuws-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.nieuws-tile.is-groot { border-color: #d63a3a; }
.nieuws-tile-img { position: relative; height: 130px; overflow: hidden; background: var(--c-bg); }
.nieuws-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.nieuws-tile:hover .nieuws-tile-img img { transform: scale(1.05); }
.nieuws-tile-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.3) 100%);
}
.nieuws-tile-tag {
    position: absolute; top: 10px; left: 10px;
    background: #d63a3a; color: #fff;
    padding: 3px 9px; border-radius: 4px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.nieuws-tile-body { padding: 12px 14px; flex: 1; }
.nieuws-tile-titel { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.nieuws-tile-meta { font-size: 13px; color: var(--c-ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nieuws-tile-bollen { display: inline-flex; gap: 3px; vertical-align: middle; }
.nieuws-tile-bollen .cta-dienst-bol { width: 18px; height: 18px; border-width: 1.5px; }

/* === /nieuws/ HUB-LIJST === (variant C: thumb links + content rechts) */
.nieuws-lijst-h {
    font-size: 20px; font-weight: 700; color: var(--c-ink);
    margin: 28px 0 14px; padding-bottom: 10px;
    border-bottom: 2px solid var(--c-ink);
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.nieuws-lijst-h-count {
    font-size: 13px; font-weight: 400; color: var(--c-ink-3);
    font-family: var(--font-mono); margin-left: auto;
}
.nieuws-lijst-h-count strong { color: var(--c-ink); font-weight: 700; }
.nieuws-lijst { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.nieuws-row {
    background: var(--c-card); border: 1px solid var(--c-border); border-radius: 8px;
    padding: 12px; text-decoration: none; color: inherit;
    display: grid; grid-template-columns: 200px 1fr;
    gap: 16px; transition: transform .12s, box-shadow .12s;
}
.nieuws-row:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.nieuws-row.is-groot { border-color: #d63a3a; border-left-width: 4px; }
.nieuws-row-thumb {
    position: relative; width: 200px; height: 100px;
    border-radius: 6px; overflow: hidden; background: var(--c-bg);
}
.nieuws-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nieuws-row-tag {
    position: absolute; top: 8px; left: 8px;
    background: #d63a3a; color: #fff; padding: 3px 8px; border-radius: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.nieuws-row-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; justify-content: center; }
.nieuws-row-eyebrow {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    color: var(--c-ink-3); text-transform: lowercase;
}
.nieuws-row-titel {
    font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0;
    color: var(--c-ink);
}
.nieuws-row-pills {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.nieuws-row-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 12px; font-size: 12px; font-weight: 500;
    background: var(--c-bg); color: var(--c-ink-2);
}
.nieuws-row-pill .cta-dienst-bol { width: 12px; height: 12px; border-width: 1px; }
@media (max-width: 700px) {
    .nieuws-row { grid-template-columns: 1fr; }
    .nieuws-row-thumb { width: 100%; height: 140px; }
    .nieuws-row-titel { font-size: 16px; }
}

/* Sidebar nieuws-berichten-widget op dorp/dienst-pages */
.sidebar-nieuws .sidebar-nieuws-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.sidebar-nieuws-item {
    display: block; padding: 10px 0; border-bottom: 1px solid var(--c-border);
    text-decoration: none; color: inherit;
}
.sidebar-nieuws-item:last-child { border-bottom: none; }
.sidebar-nieuws-item:hover { background: var(--c-page); margin: 0 -10px; padding: 10px; border-radius: 4px; }
.sidebar-nieuws-titel { font-size: 13px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
.sidebar-nieuws-meta { font-size: 11px; color: var(--c-ink-3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sidebar-nieuws-meta strong { color: var(--c-ink-2); }
.sidebar-nieuws-bol {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

/* === INCIDENT-DETAIL ENRICHMENTS === */


/* Tijdlijn op nieuws-bericht-detail */
.nieuws-bericht-tijdlijn { margin: 18px 0 24px; }
.tijdlijn-strip {
    position: relative; padding: 30px 16px 20px;
    background: var(--c-page); border-radius: 8px;
    min-height: 78px;
}
.tijdlijn-line {
    position: absolute; top: 50%; left: 16px; right: 16px;
    height: 2px; background: var(--c-border); transform: translateY(-50%);
}
.tijdlijn-stip {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: var(--c-ink-2);
    font-size: 11px; font-family: var(--font-mono);
}
.tijdlijn-stip .tijdlijn-tijd { font-weight: 600; color: var(--c-ink-2); }
.tijdlijn-stip .tijdlijn-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--kleur, #888); border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tijdlijn-stip .tijdlijn-label { font-size: 10px; color: var(--c-ink-3); font-weight: 600; }
.tijdlijn-stip:hover .tijdlijn-dot { transform: scale(1.2); }

/* Vergelijkbare nieuws-berichten — onder de nieuws-bericht-meldingen-lijst */
.vergelijkbare-nieuws-berichten { margin: 24px 0; }
.vi-list { display: flex; flex-direction: column; gap: 8px; }
.vi-item {
    display: grid; grid-template-columns: auto 1fr; gap: 10px;
    padding: 10px 12px;
    background: var(--c-page); border: 1px solid var(--c-border); border-radius: 6px;
    text-decoration: none; color: inherit;
    align-items: center;
}
.vi-item:hover { border-color: var(--c-ink-3); }
.vi-item.is-groot { border-left: 3px solid #d63a3a; }
.vi-bollen { display: inline-flex; gap: 3px; }
.vi-bol {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 50%; border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.vi-titel { font-weight: 600; font-size: 14px; display: block; }
.vi-meta { font-size: 12px; color: var(--c-ink-3); }
.vi-meta strong { color: var(--c-ink-2); }

/* === Nieuws-CTA — variant H stijl (homepage/dorp, status-line) ===
 * Erft .feed border + heading-stijl voor consistentie met de live-feed
 * eronder. Onder de header: 5 nieuws-rijen (kleur-bar | tijd | titel | meta).
 * Per-site flag $CONFIG['nieuws_features']['cta']. */
.nieuws-cta-h { margin: 0 0 18px; }   /* erft .feed border + radius 4px */
.nieuws-cta-h-meer {
    font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    color: var(--c-ink-3); text-decoration: none; white-space: nowrap;
}
.nieuws-cta-h-meer:hover { color: var(--c-ink); }
.nieuws-cta-h-row {
    display: grid; grid-template-columns: 4px 110px 1fr auto;
    gap: 14px; padding: 11px 18px;
    border-top: 1px solid var(--c-border);
    text-decoration: none; color: inherit; align-items: center;
    transition: background .12s;
}
.nieuws-cta-h-row:hover { background: var(--c-page); }
.nieuws-cta-h-bar {
    background: var(--c-ink-4); border-radius: 2px;
    height: 100%; min-height: 28px;
}
.nieuws-cta-h-row.is-groot .nieuws-cta-h-bar { background: #d63a3a; }
.nieuws-cta-h-when {
    font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-3);
    display: flex; flex-direction: column; line-height: 1.2;
}
.nieuws-cta-h-when strong { font-size: 14px; color: var(--c-ink); font-weight: 700; }
.nieuws-cta-h-titel {
    font-size: 14px; font-weight: 600; color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nieuws-cta-h-badge {
    background: #d63a3a; color: #fff; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; margin-right: 6px;
    display: inline-block; transform: translateY(-1px);
}
.nieuws-cta-h-meta {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--c-ink-3);
}
.nieuws-cta-h-meta .cta-dienst-bol { width: 14px; height: 14px; border-width: 1px; }
.nieuws-cta-h-meta strong {
    color: var(--c-ink-2); font-weight: 700;
    min-width: 16px; text-align: right;
}
.cta-pulse::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: #d63a3a;
    animation: cta-pulse 2s infinite;
    margin-right: 8px; vertical-align: middle;
}
@keyframes cta-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.cta-dienst-bol {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%; color: white;
    border: 1.5px solid rgba(255,255,255,0.5);
}
@media (max-width: 700px) {
    .nieuws-cta-h-row { grid-template-columns: 4px 90px 1fr auto; gap: 10px; padding: 10px 14px; }
    .nieuws-cta-h-titel { white-space: normal; font-size: 13px; }
}

/* Nieuwsbericht-meldingen krijgen een subtiele paarse linker-rand zodat je in de
 * lijst snel ziet welke items deel van een bundel zijn. */
.kaart-lijst-item.is-nieuws-bericht {
    border-left: 3px solid #5b3aa8;
}

/* Nieuwsbericht-popup op /live-kaart/ — multi-melding-overzicht */
.mp-pop-inc-list {
    margin: 8px 0 10px;
    max-height: 200px;
    overflow-y: auto;
}
.mp-pop-inc-item {
    margin: 4px 0;
    padding: 4px 0 4px 8px;
    border-left: 3px solid #888;
    font-size: 12px;
    line-height: 1.35;
}
.mp-pop-inc-item strong { font-weight: 700; margin-right: 4px; }

/* SPOED MARKER op /kaart/ — klein rood blokje rechtsboven het service-icoon.
 * Combineerbaar met .mp-newest (grijze ring + rood blokje). */
.mp-spoed { position: relative; }
.mp-spoed::after {
    content: '';
    position: absolute;
    top: -3px; right: -3px;
    width: 9px; height: 9px;
    background: var(--c-hl);
    border: 1.5px solid #fff;
    border-radius: 2px;
    z-index: 1001;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* (oude is-spoed::before-regel vervangen door .kli-spoed span — zie boven) */

.kaart-filters {
    display: flex; flex-wrap: wrap; gap: 18px 28px;
    margin-bottom: 14px;
    padding: 14px 18px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    align-items: flex-start;
}
.kfg { display: flex; flex-direction: column; gap: 6px; }
.kfg-lbl {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink-2);
}
/* Auto-refresh widget binnen kaart-filters: label boven, chips eronder */
.kfg .auto-refresh { flex-direction: column; align-items: flex-start; gap: 6px; }
.kfg .ar-lbl { font-size: 12px; font-weight: 600; color: var(--c-ink-2); }
.kaart-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.kaart-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    color: var(--c-ink-2);
    font: inherit;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1.3;
}
.kaart-chip:hover { background: #fff; border-color: var(--c-border-strong); }
.kaart-chip.is-active {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: #fff;
}
.kaart-chip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--svc, var(--c-ink-3));
    display: inline-block;
}
.kaart-chip.is-active .kaart-chip-dot { box-shadow: 0 0 0 1.5px #fff inset; }

.kaart-select {
    background: var(--c-page);
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    font: inherit;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    min-width: 180px;
    line-height: 1.3;
}
.kaart-select:hover { border-color: var(--c-border-strong); }

.kaart-canvas {
    width: 100%;
    height: 600px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    overflow: hidden;
}
.kaart-legend {
    display: flex; gap: 16px 24px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-ink-3);
}
.legend-sep {
    width: 1px;
    background: var(--c-border);
    align-self: stretch;
}
.legend-item {
    display: inline-flex; align-items: center; gap: 6px;
}
.legend-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--c);
    position: relative;
    flex-shrink: 0;
}
/* Heli-variant: zelfde gekleurde dot, met een wit rotor-cross-symbool erover. */
.legend-dot-heli::before,
.legend-dot-heli::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 0.5px;
    top: 50%; left: 50%;
}
.legend-dot-heli::before {
    width: 10px; height: 1.5px;
    transform: translate(-50%, -50%);
}
.legend-dot-heli::after {
    width: 1.5px; height: 10px;
    transform: translate(-50%, -50%);
}

/* Leaflet marker — eigen stijl, geen default Leaflet pin */
/* MELDING-MARKER op /live-kaart/ — ronde bol met dienst-kleur.
 * Grootte schaalt met zoom-niveau via JS (--bol-size CSS-var).
 * Was eerder druppel-pin; veranderd naar bol 2026-05-05 voor mooier overlap-gedrag
 * bij meerdere meldingen op zelfde locatie + duidelijker visueel onderscheid van
 * nieuws-bericht-bundels (zie .mp-nieuws-bericht). */
.mp { background: transparent; border: none; }
.mp span {
    display: block;
    width: var(--bol-size, 16px);
    height: var(--bol-size, 16px);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: width .15s, height .15s;
}

/* INCIDENT-MARKER — 1 marker per nieuws-bericht-bundel met dienst-segmenten en
 * extra dubbele rand (witte border + donkere outline) zodat 'ie ook bij
 * mono-dienst onderscheidbaar is van een gewoon bolletje. Cirkel verdeeld
 * in gelijke segmenten per unieke dienst (geen cijfer-badge). */
.mp-nieuws-bericht { background: transparent; border: none; }
.mp-nieuws-bericht > .mp-inc-ring {
    width: var(--inc-size, 22px);
    height: var(--inc-size, 22px);
    border-radius: 50%;
    border: 2px solid #fff;
    outline: 1.5px solid rgba(0,0,0,0.4);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    overflow: hidden;
    display: flex;
    transition: width .15s, height .15s;
}
.mp-nieuws-bericht > .mp-inc-ring > span {
    flex: 1;
    height: 100%;
}
.mp-pop {
    font-family: var(--font-body);
    min-width: 220px;
    max-width: 280px;
}
.mp-pop-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.mp-pop-text {
    font-size: 13px;
    color: var(--c-ink);
    line-height: 1.4;
    margin-bottom: 10px;
}
.mp-pop-link {
    display: inline-block;
    background: var(--c-ink);
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    text-decoration: none;
}
.mp-pop-link:hover { background: var(--c-hl); }

/* MINI-MELDINGEN (sidebar detail) */
.mini-list { display: flex; flex-direction: column; }
.mini {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border);
    transition: background .15s;
}
.mini:last-child { border-bottom: none; }
.mini:hover { background: var(--c-page); margin: 0 -10px; padding: 10px; }
.mini.is-current { background: var(--c-hl-soft); margin: 0 -10px; padding: 10px; }
.mini-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    align-self: start;
    margin-top: 2px;
}
.mini-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.mini-dienst { font-weight: 700; }
.mini-place { color: var(--c-ink-3); text-transform: none; }
.mini-spoed {
    background: var(--c-hl);
    color: #fff;
    padding: 1px 6px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
}
.mini-datum {
    color: var(--c-ink-3);
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
    font-size: 12px;
}
.mini-time {
    color: var(--c-ink-3);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}
.mini-text {
    font-size: 14px;
    line-height: 1.4;
    color: var(--c-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mini-more {
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
    text-align: left;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-hl);
    background: transparent;
    transition: text-decoration .15s;
}
.mini-more:hover { text-decoration: underline; background: transparent; }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .grid { grid-template-columns: 1fr; }
    .aside { position: static; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
    .hero { grid-template-columns: 280px 1fr; }
    .hero-left { position: static; }
}
@media (max-width: 720px) {
    :root { --pad-x: 20px; }
    .header-inner { grid-template-columns: 1fr; gap: 16px; }
    .header-slot { overflow-x: auto; }
    .melding {
        grid-template-columns: 44px 1fr;
        gap: 12px;
        padding: 14px 16px;
    }
    .melding-icon { width: 36px; height: 36px; }
    .melding { grid-template-columns: 44px 1fr 24px; gap: 12px; padding: 14px 16px; }
    .melding-action { font-size: 22px; }
    .footer-cols { grid-template-columns: 1fr; }
    .wm-block { font-size: 30px; padding: 5px 9px 7px; }
    .wm-tx { font-size: 30px; margin-left: 10px; }
    .hero { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
    .hero-left { position: static; }
    .hero-title { font-size: 22px; }
    .hero-tijd { grid-template-columns: 1fr 1fr; }
    .details { grid-template-columns: 100px 1fr; }
    .topbar-inner { flex-wrap: wrap; gap: 8px; }
    .codes-tabel { font-size: 13px; }
    .codes-tabel td:first-child { width: 90px; }
    .info-page { padding: 18px; }
    .info-page h1 { font-size: 22px; }
    .sz-leaderboard { width: 100%; height: auto; }
    .header-slot { display: none; }
}

/* ====================================================================== */
/* MOBILE FIXES — touch targets, kaart-canvas, codes-tabel, bundle-card    */
/* ====================================================================== */

/* Tablet en kleiner: melding-bundle krapper grid + kleinere icons */
@media (max-width: 720px) {
    .melding--bundle { grid-template-columns: 64px 1fr 24px; gap: 10px; }
    .melding-icons-dot {
        width: 28px; height: 28px;
        margin-left: -8px;
    }
    .melding-icons-dot svg { width: 16px; height: 16px; }
    .melding-bundle-label { font-size: 12px; }
    .melding-bundle-sub-text { font-size: 12px; -webkit-line-clamp: 2; }
    .melding-bundle-sub-tag { font-size: 9px; padding: 1px 5px; }

    /* Kaart-canvas niet hardcoded 600px op mobile */
    .kaart-canvas { height: 60vh; min-height: 400px; }
    .kaart-lijst { max-height: none; }

    /* Codes-tabel — display:block + overflow-x scrollt zelf (geen wrapper nodig) */
    .codes-tabel {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .codes-tabel tbody { display: table; width: 100%; min-width: 480px; }
    /* Stats-variant (2 kolommen: plaats + aantal) past wél op mobiel — de
       480px-min-width duwde de AANTAL-kolom onzichtbaar buiten beeld. */
    .codes-tabel-stats { display: table; overflow-x: visible; }
    .codes-tabel-stats tbody { display: table-row-group; min-width: 0; }

    /* Touch targets ≥44px op alle interactieve elementen */
    .theme-btn, .ts-btn {
        min-height: 36px;
        padding: 6px 12px;
    }
    .topbar-search { min-height: 40px; }
    .paginering a, .paginering span {
        min-height: 44px;
        padding: 12px 16px;
        display: inline-flex; align-items: center;
    }
    .breadcrumb .back, .breadcrumb a {
        min-height: 44px;
        display: inline-flex; align-items: center;
        padding: 8px 12px;
    }
    .chip, .ar-chip, .dorp-knop {
        min-height: 40px;
        padding: 10px 14px;
    }
    .filter-buttons button, .filterblok-row button {
        min-height: 44px;
    }

    /* Mainnav wraps op mobile — laat horizontaal scrollen i.p.v. 6 regels */
    .mainnav-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mainnav-inner::-webkit-scrollbar { display: none; }
    .mainnav-item { flex-shrink: 0; }

    /* Hero-tijd: 3 blokken in 1 kolom op mobile (was 1fr 1fr → 3e blok wrap) */
    .hero-tijd { grid-template-columns: 1fr; gap: 8px; }

    /* Filterblok-row col1 had vaste 480px */
    .filterblok-row > .filterblok-col:first-child {
        width: 100%;
        max-width: 480px;
    }

    /* Stats-grafieken: voorkom dat staafjes onleesbaar klein worden.
       De scroller is de WRAP; de grafiek zelf krijgt de min-width. De oude
       regel (.stats-bars-uur > div) zette 480px op elke uur-kolom → grafiek
       rendeerde als één massieve balk. */
    .stats-bars-uur-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .stats-bars-uur { min-width: 480px; }
    .sbh-row { grid-template-columns: 1fr; }
    .sbh-row .sbh-label { margin-bottom: 4px; }
    .sbh-row .sbh-pct { text-align: left; margin-top: 2px; }
}

/* Telefoon — extra-krappe layout-fixes */
@media (max-width: 480px) {
    :root { --pad-x: 14px; }
    .container { padding-left: var(--pad-x); padding-right: var(--pad-x); }
    .melding { padding: 12px 14px; gap: 10px; }
    .melding-text { font-size: 14px; }
    .melding-meta { font-size: 10px; gap: 6px; }
    .hero { padding: 14px; }
    .hero-title { font-size: 19px; }
    .info-page { padding: 14px; }
    .info-page h1 { font-size: 20px; }
    .feed-head h2 { font-size: 18px; }

    /* Wordmark iets kleiner */
    .wm-block { font-size: 24px; padding: 4px 7px 6px; }
    .wm-tx    { font-size: 24px; margin-left: 8px; }

    /* Topbar wraps al — verklein de knoppen */
    .theme-btn, .ts-btn {
        font-size: 11px;
        padding: 5px 9px;
        min-height: 32px;  /* compromise: topbar ≥32px is voor secundair OK */
    }
    .topbar-search { font-size: 11px; padding: 5px 10px; min-height: 32px; }

    /* Paginering compacter */
    .paginering { gap: 6px; flex-wrap: wrap; }
    .paginering a, .paginering span { padding: 10px 14px; font-size: 13px; }

    /* Filter-zone: zorg dat alle items wrappen */
    .filterblok-row { flex-direction: column; gap: 10px; }
    .filterblok-col { width: 100%; }

    /* Header AdSense leaderboard verbergen op de allerkleinste schermen */
    .sz-leaderboard { display: none; }
}


/* ====================================================================== */
/* SHARE-WIDGET                                                            */
/* ====================================================================== */
.share-blok {
    margin: 12px 0;
    padding: 14px 16px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 6px;
}
/* In de hero-left kolom (melding-detail): nog wat krapper */
.hero-left .share-blok { margin: 10px 0; }
.hero-left .hero-ad { margin-top: 10px; }
.share-cap {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-3);
    margin-bottom: 10px;
}
.share-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.share-knop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--c-card, #fff);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    color: var(--c-ink);
    font: 600 13px/1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: filter .12s, transform .1s, box-shadow .12s;
}
.share-knop:hover {
    transform: translateY(-1px);
    filter: brightness(0.92);
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
.share-knop.is-hidden { display: none; }
.share-knop svg { flex-shrink: 0; }
.share-knop.is-success {
    background: #94B12A !important;
    color: #fff !important;
    border-color: #94B12A !important;
}

/* === Branded kleuren per platform === */
.share-native {
    background: var(--c-ink);
    color: #fff;
    border-color: var(--c-ink);
}
.share-wa {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}
.share-x {
    background: #000;
    color: #fff;
    border-color: #000;
}
.share-fb {
    background: #1877F2;
    color: #fff;
    border-color: #1877F2;
}
.share-li {
    background: #0A66C2;
    color: #fff;
    border-color: #0A66C2;
}
.share-mail {
    background: #6A6F77;
    color: #fff;
    border-color: #6A6F77;
}
.share-copy {
    background: var(--c-card, #fff);
    color: var(--c-ink);
    border-color: var(--c-border);
}
.share-copy:hover {
    background: var(--c-page);
    border-color: var(--c-ink-4);
    filter: none;
}
.share-print {
    background: var(--c-card, #fff);
    color: var(--c-ink);
    border-color: var(--c-border);
}
.share-print:hover {
    background: var(--c-page);
    border-color: var(--c-ink-4);
    filter: none;
}

/* In de sidebar-card: share-blok geen eigen grijze achtergrond — de
 * card-wrapper levert al de witte container. */
.sidebar-share .share-blok {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Compacte sidebar-variant — icon-only, kleinere knoppen, smal grid */
.share-blok--compact {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.share-blok--compact .share-knoppen {
    gap: 6px;
    flex-wrap: wrap;
}
.share-blok--compact .share-knop {
    padding: 10px;
    width: 44px; height: 44px;
    justify-content: center;
    gap: 0;
    font-size: 0;       /* tekst-label verbergen, alleen icoon */
}
.share-blok--compact .share-knop svg {
    margin: 0;
    width: 20px;
    height: 20px;
}
.share-blok--compact .share-copy-label { display: none; }
/* Ook de native "Delen"-knop alleen icoon */
.share-blok--compact .share-native { font-size: 0; }
/* Card-wrapper geeft het al z'n eigen achtergrond/padding */
.sidebar-share { padding: 18px 22px; }

@media (max-width: 480px) {
    .share-knop { padding: 10px 12px; font-size: 12px; }
}

/* ====================================================================== */
/* KAART placeholder — zichtbaar tot Leaflet eerste tile-laag rendert      */
/* ====================================================================== */
.kaart-canvas { position: relative; }
.kaart-canvas-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-page);
    z-index: 1;
    overflow: hidden;
    transition: opacity .25s ease;
}
.kaart-canvas-placeholder.is-fade-out { opacity: 0; }
.kaart-canvas-placeholder img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(2px) brightness(0.96);
    opacity: 0.85;
}
.kaart-canvas-loading {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.92);
    color: var(--c-ink);
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.kaart-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--c-ink-4);
    border-top-color: var(--c-hl);
    border-radius: 50%;
    animation: kaart-spin 0.7s linear infinite;
}
@keyframes kaart-spin { to { transform: rotate(360deg); } }

/* ====================================================================== */
/* 404-PAGINA                                                              */
/* ====================================================================== */
.not-found-cap {
    display: flex; align-items: baseline; gap: 18px;
    margin-bottom: 16px;
}
.not-found-code {
    font-family: var(--font-mono);
    font-size: 64px; font-weight: 800;
    color: var(--c-hl);
    line-height: 1;
    letter-spacing: -0.04em;
}
.not-found-acties {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 24px 0;
}
.not-found-btn {
    display: inline-block;
    padding: 10px 18px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    color: var(--c-ink-2);
    text-decoration: none;
    font-weight: 500;
    transition: background .12s, border-color .12s;
}
.not-found-btn:hover {
    background: var(--c-page);
    border-color: var(--c-ink-4);
    color: var(--c-ink);
}
.not-found-btn--primary {
    background: var(--c-ink);
    /* c-page i.p.v. #fff: in dark mode wordt c-ink bijna-wit — vaste witte
       tekst was daar onleesbaar (wit op wit). c-page inverteert netjes mee. */
    color: var(--c-page);
    border-color: var(--c-ink);
}
.not-found-btn--primary:hover {
    background: var(--c-hl);
    border-color: var(--c-hl);
    color: #fff;
}

/* ====================================================================== */
/* MELD-FOUT LINK + FORMULIER                                              */
/* ====================================================================== */
.meld-fout-link {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--c-border);
    font-size: 13px;
    color: var(--c-ink-3);
}
.meld-fout-link a {
    color: var(--c-hl);
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;
}
.meld-fout-link a:hover { text-decoration: underline; }

.meld-fout-form { max-width: 600px; }
.meld-fout-form fieldset {
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 14px 18px;
    margin: 0 0 16px;
}
.meld-fout-form legend {
    padding: 0 8px;
    font-weight: 600;
    color: var(--c-ink);
}
.mf-radio {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
}
.mf-radio input { width: 16px; height: 16px; accent-color: var(--c-hl); }
.mf-field { display: block; margin-bottom: 16px; }
.mf-field span {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--c-ink-2);
}
.mf-field textarea, .mf-field input[type="email"], .mf-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    font: 14px var(--font-body);
    background: var(--c-card);
}
.mf-field textarea:focus, .mf-field input[type="email"]:focus, .mf-field input[type="text"]:focus {
    outline: 2px solid var(--c-hl);
    outline-offset: -1px;
}
.mf-captcha-hint {
    display: block;
    font-size: 12px;
    color: var(--c-ink-3);
    margin: -2px 0 6px;
    font-weight: normal;
}
.mf-captcha input[type="text"] { max-width: 160px; }

/* Adverteer-formulier: extra veld-types (tel + select) + 2-koloms rij */
.mf-field input[type="tel"], .mf-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    font: 14px var(--font-body);
    background: var(--c-card);
}
.mf-field input[type="tel"]:focus, .mf-select:focus {
    outline: 2px solid var(--c-hl);
    outline-offset: -1px;
}
.mf-field-row { display: flex; gap: 14px; }
.mf-field-row .mf-field { flex: 1; min-width: 0; }
@media (max-width: 560px) { .mf-field-row { flex-direction: column; gap: 0; } }

/* ──────────────────────────────────────────────────────────────────────
   ADVERTEREN-CTA SIDEBAR-BLOK — variant G (gradient) is de vaste keuze
   uit de demo-ronde; zie includes/sidebar/adverteren-cta.php.
   ────────────────────────────────────────────────────────────────────── */

/* Gedeeld: klein icoon + knop-basis */
.adv-cta__icon { flex: 0 0 auto; }
.adv-cta__btn {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 13px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    border-radius: 3px; padding: 8px 14px;
    transition: background .15s, color .15s, border-color .15s;
}

@media (prefers-reduced-motion: reduce) {
    .adv-cta--g::before { animation: none !important; }
}

/* ── Variant G · Gradient met shine-sweep ─────────────────────────────── */
.adv-cta--g {
    position: relative; overflow: hidden;
    border: 0;
    background: linear-gradient(135deg, #E0291E 0%, #B11910 55%, #7A1410 100%);
    color: #fff;
    padding: 20px 18px;
}
/* De sweep loopt op transform, niet op `left`: een oneindige animatie op een
   layout-property forceert 60fps main-thread layout zolang de pagina openstaat. */
.adv-cta--g::before {
    content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    will-change: transform;
    animation: adv-shine 3.6s ease-in-out infinite;
}
@keyframes adv-shine {
    0%        { transform: translateX(-140%) skewX(-18deg); }
    55%, 100% { transform: translateX(290%)  skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
    .adv-cta--g::before { animation: none; }
}
.adv-cta--g .adv-cta__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; position: relative; }
.adv-cta--g .adv-cta__head-title { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.adv-cta--g .adv-cta__icon { color: #fff; }
.adv-cta--g .adv-cta__text { font-size: 13px; color: rgba(255,255,255,.92); line-height: 1.5; margin: 0 0 14px; position: relative; }
.adv-cta--g .adv-cta__btn { background: #fff; color: var(--c-hl); width: 100%; justify-content: center; font-weight: 700; position: relative; }
.adv-cta--g .adv-cta__btn:hover { background: var(--c-ink); color: #fff; }

/* ====================================================================== */
/* PRINT — alleen kern-content, geen sidebars/ads/nav                      */
/* ====================================================================== */
@media print {
    /* Verberg alles wat niet bij de melding zelf hoort */
    .topbar, .header, .mainnav, .breadcrumb,
    .aside, .kaart-aside,
    .filter-zone-wrap, .feed-slot, .feed-spot, .unit, .intro-slot, .topstrip, .feed-native,
    .unit-ph, .sz-leaderboard, .sz-medium, .hero-slot, .kaart-slot,
    .partnerblok, .duo-row,
    .share-blok, .sidebar-share,
    .meld-fout-link,
    .footer,
    .auto-refresh-widget,
    .melding-action,
    .faq,
    .verder-terug,
    .hero-title-print,
    button {
        display: none !important;
    }

    /* Volledige breedte */
    body { background: #fff; color: #000; font: 11pt/1.5 serif; }
    .container, .grid, .hero, article { max-width: none; padding: 0; margin: 0; }
    .grid { display: block; }
    .hero { box-shadow: none; border: none; padding: 0; }
    .hero-left, .hero-body { padding: 0; }
    /* Kaart compact op print — niet over een hele A4. Kleine afdruk naast/onder
     * de tekst is genoeg voor context, het gaat om het bericht. */
    .hero-map {
        max-width: 8cm;
        padding: 6pt;
        border: 1px solid #999;
        page-break-inside: avoid;
        margin: 8pt 0;
    }
    .hero-map img { max-width: 100%; height: auto; }
    .hero-map-cap, .hero-map-link { font-size: 9pt; }

    /* Headings + tekst in zwart */
    h1, h2, h3, h4 { color: #000; page-break-after: avoid; }
    .hero-title { font-size: 22pt; margin: 12pt 0 6pt; }
    .lede, .hero-tekst p { color: #000; }

    /* Details-tabel netter voor print — compacter dan op scherm zodat
     * een melding netjes op één A4-helft past zonder overbodige witruimte. */
    .details {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    .details dt,
    .details dd {
        padding: 2pt 5pt;
        line-height: 1.3;
        margin: 0;
    }
    .details dt { background: #f5f5f5; }

    /* Hyperlinks: toon URL achter de tekst */
    a[href^="http"]:after, a[href^="/"]:after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
        font-weight: normal;
    }
    /* Maar niet voor brand-link en interne nav */
    .brand:after, .meld-fout-link a:after, .melding a:after { content: ""; }

    /* Sidebar wegklappen */
    .aside, .sidebar-share { display: none !important; }

    /* Niet-relevante banners */
    .api-banner, .ingetrokken-banner { border: 1px solid #999; padding: 8pt 10pt; }

    /* Links alleen onderlijnen, geen kleur */
    a { color: #000; text-decoration: underline; }

    /* URL-footer voor archivering */
    .hero-body::after {
        content: "Bron: " attr(data-print-url);
        display: block;
        margin-top: 18pt;
        padding-top: 10pt;
        border-top: 1px solid #999;
        font-size: 9pt;
        color: #555;
    }
}

/* ====================================================================== */
/* HERO-TITLE PRINT-ICOON — naast H1 op melding-detail (en nieuws-detail)  */
/* ====================================================================== */
/* H1 wordt flex zodat de printer-knop rechts kan blijven terwijl de
 * tekst (in .hero-title-tekst) ruimte mag innemen. Op mobiel verbergen
 * we de knop — printen vanaf telefoon is zeldzaam en het pictogram
 * neemt schaarse hoofdletter-ruimte in. */
.hero-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.hero-title-tekst { flex: 1 1 auto; min-width: 0; }
.hero-title-print {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 4px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--c-line, #d5d5d5);
    border-radius: 6px;
    color: var(--c-ink-2, #555);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.hero-title-print:hover,
.hero-title-print:focus-visible {
    background: var(--c-card-hover, #f4f4f4);
    color: var(--c-ink, #111);
    border-color: var(--c-ink-2, #888);
}
.hero-title-print:focus-visible {
    outline: 2px solid var(--c-hl, #c00);
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .hero-title-print { display: none; }
}

/* ====================================================================== */
/* VERDER TERUGKIJKEN-CTA — onder feed op home / laatste paginatie-pagina  */
/* ====================================================================== */
/* Compacte info-callout in zachte gele tint — visueel duidelijk maar niet
 * concurrerend met de meldingen-cards erboven. Accent links via dikkere
 * border zodat het als notice-stijl leest, niet als alarm. Buiten .feed-card
 * geplaatst zodat er geen witte feed-padding tussen pagination en CTA zit. */
.verder-terug {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0 0;
    padding: 12px 16px;
    background: #FEF3C7;
    border: 1px solid #fde68a;
    border-left: 4px solid #eab308;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #92400E;
}
.verder-terug-icon {
    flex: 0 0 auto;
    color: #92400E;
}
.verder-terug-tekst { flex: 1 1 auto; }
.verder-terug a {
    color: #92400E;
    font-weight: 600;
    text-decoration: none;
}
.verder-terug a:hover,
.verder-terug a:focus-visible {
    color: #713f12;
    text-decoration: underline;
}

/* Klikbare "dorp"/"hulpdienst" — leest als link maar opent + scrollt
 * naar de filter-zone-wrap. Inline-button-reset zodat 't naadloos in de
 * tekst-flow zit naast gewone links. */
.verder-terug .vt-link {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    font: inherit;
    color: #92400E;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.verder-terug .vt-link:hover,
.verder-terug .vt-link:focus-visible {
    color: #713f12;
    text-decoration-thickness: 2px;
}
.verder-terug .vt-link:focus-visible {
    outline: 2px solid #eab308;
    outline-offset: 2px;
    border-radius: 2px;
}
/* Dark mode — zelfde donkerbruine tint als de heli-live-banner zodat beide
 * gele balken ook in donker bij elkaar passen. */
[data-theme="dark"] .verder-terug {
    background: #3a2410;
    border-color: #7c4a12;
    border-left-color: #eab308;
    color: #fde68a;
}
[data-theme="dark"] .verder-terug-icon,
[data-theme="dark"] .verder-terug a,
[data-theme="dark"] .verder-terug .vt-link { color: #fde68a; }
[data-theme="dark"] .verder-terug a:hover,
[data-theme="dark"] .verder-terug a:focus-visible,
[data-theme="dark"] .verder-terug .vt-link:hover,
[data-theme="dark"] .verder-terug .vt-link:focus-visible { color: #fef3c7; }

/* ====================================================================== */
/* LIVE COUNTER — boven feed op homepage                                   */
/* ====================================================================== */


/* MAAND-CHIPS BOVENAAN STATS-PAGINA — gebruikt de standaard .chip-styling
   (vierkant, 2px gekleurde border bij active). We voegen alleen layout-spacing
   toe voor de label "Maand:" + de knoppen ernaast. Geen .chip overrides hier,
   anders leakt het naar filter-zone (die gebruikt ook .periode-chips). */
.stats-maand-keuze {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px;
}
.stats-maand-keuze-lbl {
    font-size: 13px;
    color: var(--c-ink-2);
    margin-right: 4px;
}
/* ============================================================================
 * .hero--map-top — V9-layout: melding/nieuws-bericht detail in 1 kolom met kaart
 * full-width bovenaan, daarna meta-band en body in dezelfde witte card.
 * Activeert door class="hero hero--map-top" toe te voegen aan article.hero.
 * Bestaande .hero (404, meld-fout) blijft ongewijzigd.
 * ============================================================================ */
.hero.hero--map-top {
    display: block;
    padding: 0;
    overflow: hidden;
}

/* Kaart full-width bovenaan in de card */
.hero--map-top .hero-map-hero {
    position: relative;
    display: block;
    height: 320px;
    background: var(--c-page);
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    overflow: hidden;
}
.hero--map-top .hero-map-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.hero--map-top .hero-map-overlay-loc {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--c-card);   /* light: wit, dark: donker — pakt thema-kleur op */
    color: var(--c-ink-2);
    padding: 3px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--c-border);
    z-index: 2;
}
.hero--map-top .hero-map-overlay-loc strong { color: var(--c-ink); font-weight: 700; }
.hero--map-top .hero-map-overlay-link {
    position: absolute;
    bottom: 16px; right: 16px;
    background: var(--c-card);   /* light: wit, dark: donker */
    padding: 8px 14px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-ink-2);
    text-decoration: none;
    border: 1px solid var(--c-border);
    box-shadow: 0 2px 8px rgba(14, 17, 22, 0.08);
    z-index: 2;
    transition: background .15s, color .15s, border-color .15s;
}
.hero--map-top .hero-map-hero:hover .hero-map-overlay-link {
    background: var(--c-ink); color: var(--c-card); border-color: var(--c-ink);
}

/* Body krijgt eigen padding binnen de card */
.hero--map-top .hero-body-inner { padding: 28px; }

/* Titel groot; byline rustig eronder */
.hero--map-top .hero-title {
    margin-bottom: 14px;
}

/* Inline byline onder de titel — geen blokken, één rustige regel.
 * Dienst-naam met gekleurd dotje, prio-pill, SPOED-tag, dag/datum/tijd. */
.hero--map-top .meta-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-ink-3);
    line-height: 1.4;
    margin-bottom: 24px;
}
.hero--map-top .meta-byline-dienst {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-ink-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
}
.hero--map-top .meta-byline-dienst::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent, var(--svc-amb));
    border-radius: 50%;
    flex-shrink: 0;
}
.hero--map-top .meta-byline-prio {
    border: 1px solid currentColor;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hero--map-top .meta-byline-sep {
    width: 3px;
    height: 3px;
    background: var(--c-ink-4);
    border-radius: 50%;
    flex-shrink: 0;
}
.hero--map-top .meta-byline-when {
    color: var(--c-ink-3);
    text-transform: lowercase;
}

/* Kop boven details-tabel — body-font, consistent met andere h2's op de site */
.hero--map-top .hero-section-head {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
    margin-top: 8px;
    margin-bottom: 12px;
}

/* Hero-ad onderaan in body, niet meer in eigen kolom */
.hero--map-top .hero-ad { margin-top: 20px; }

/* Tekst-overrides voor V9-detail: groter dan default .hero-tekst */
.hero--map-top .hero-tekst p { font-size: 16px; }
.hero--map-top .hero-tekst .lede { font-size: 18px; }

/* Actions-stack: share-blok bovenaan, meld-fout-link rechts onder.
 * Verticaal gestapeld zodat het ook op smalle content-kolommen netjes blijft. */
.hero--map-top .actions-stack {
    padding-top: 18px;
    border-top: 1px solid var(--c-border);
    margin-top: 24px;
}
/* Sinds de share-knoppen naar de eigen deel-card zijn verhuisd is meld-fout
 * het enige kind van de actions-stack; de eigen dashed border-top van
 * .meld-fout-link zou hier een dubbele lijn geven. */
.hero--map-top .actions-stack .meld-fout-link {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.hero--map-top .actions-stack .share-blok {
    padding: 0;
    border: 0;
    background: transparent;
    margin: 0;
}
/* "Deel deze melding" — body-font, geen uppercase */
.hero--map-top .actions-stack .share-cap {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink);
    margin-bottom: 12px;
}
/* "Fout gezien?" — subtiele mono-link, rechts uitgelijnd onder de knoppen */
.hero--map-top .actions-stack .meld-fout-link {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-ink-4);
    text-align: right;
    line-height: 1.4;
}
.hero--map-top .actions-stack .meld-fout-link a {
    color: var(--c-ink-2);
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 1px;
}
.hero--map-top .actions-stack .meld-fout-link a:hover {
    color: var(--c-hl);
    border-bottom-color: var(--c-hl);
}

/* Mobile: nog compacter */
@media (max-width: 600px) {
    .hero--map-top .hero-map-hero { height: 220px; }
    .hero--map-top .hero-body-inner { padding: 20px; }
}


/* ============================================================================
 * V9 detail-pagina — A+ tekstgrootte overrides
 * Uitgeschreven zonder CSS-nesting voor maximale browser-compatibiliteit.
 * ============================================================================ */
body[data-textsize="large"] .hero-map-overlay-loc { font-size: 12px; }
body[data-textsize="large"] .hero-map-overlay-link { font-size: 14px; }
body[data-textsize="large"] .meta-byline { font-size: 14px; }
body[data-textsize="large"] .meta-byline-dienst { font-size: 13px; }
body[data-textsize="large"] .meta-byline-prio { font-size: 12px; }
body[data-textsize="large"] .hero--map-top .hero-section-head { font-size: 22px; }
body[data-textsize="large"] .hero--map-top .hero-tekst p { font-size: 17px; }
body[data-textsize="large"] .hero--map-top .hero-tekst .lede { font-size: 19px; }
body[data-textsize="large"] .hero--map-top .actions-stack .share-cap { font-size: 17px; }
body[data-textsize="large"] .hero--map-top .actions-stack .share-knop { font-size: 14px; padding: 10px 15px; }
body[data-textsize="large"] .hero--map-top .actions-stack .meld-fout-link { font-size: 13px; }
body[data-textsize="large"] .details .dd-extra { font-size: 14px; }

/* Nieuwsbericht-specifieke meta-byline: meerdere dotjes voor multi-dienst + aantal-pill */
.hero--map-top .meta-byline-dienst--multi::before { display: none; }
.hero--map-top .meta-byline-multi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    flex-shrink: 0;
    display: inline-block;
}
.hero--map-top .meta-byline-multi-dot:last-of-type {
    margin-right: 6px;
}
.hero--map-top .meta-byline-aantal {
    border: 1px solid var(--c-border);
    color: var(--c-ink-3);
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Details-tabel: meerdere diensten op 1 regel met icon-dotjes */
.hero--map-top .details dd .dl-dienst-icon {
    margin-right: 4px;
    vertical-align: middle;
}


/* /112-nieuws/ — tab-schakelaar Nieuws / Opvallend. Volgt de neutraal-segmented
 * design-taal van de topbar-controls (inset-container, actief = opgetild kaartje). */
.nieuws-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 14px;
}
.nieuws-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 7px;
    padding: 7px 15px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink-3);
    text-decoration: none;
    transition: color .12s, background .12s;
}
.nieuws-tab:hover { color: var(--c-ink); }
.nieuws-tab.is-active {
    background: var(--c-card);
    color: var(--c-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
[data-theme="dark"] .nieuws-tab.is-active { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.nieuws-tab-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-ink-4);
    background: var(--c-page);
    border-radius: 20px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}
.nieuws-tab.is-active .nieuws-tab-count { color: var(--c-hl); background: var(--c-page); }

/* /nieuws/ — sectie-heading "Alle nieuws ..." in wit blok */
.nieuws-lijst-h-wrap.card { padding: 18px 22px; margin-bottom: 14px; }
.nieuws-lijst-h-wrap .nieuws-lijst-h { margin: 0; border-bottom: none; padding-bottom: 0; }


/* === Sidebar nieuws-widget — variant J stijl: thumb + datum/tijd/titel/meta === */
.sidebar-nieuws-j .sidebar-nieuws-j-list {
    display: flex; flex-direction: column;
    margin-top: 8px;
}
.sidebar-nieuws-j-item {
    display: flex; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none; color: inherit;
    align-items: flex-start;
}
.sidebar-nieuws-j-item:last-child { border-bottom: none; }
.sidebar-nieuws-j-item:hover { background: var(--c-page); margin: 0 -10px; padding: 10px; border-radius: 4px; }
.sidebar-nieuws-j-img {
    flex: 0 0 56px; width: 56px; height: 56px;
    border-radius: 6px; overflow: hidden;
    background: var(--c-bg); border: 1px solid var(--c-border);
}
.sidebar-nieuws-j-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-nieuws-j-body { flex: 1; min-width: 0; }
.sidebar-nieuws-j-when {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--c-ink-3); margin-bottom: 3px;
}
.sidebar-nieuws-j-titel {
    font-size: 13px; font-weight: 700; line-height: 1.3;
    color: var(--c-ink); margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sidebar-nieuws-j-meta {
    font-size: 11px; color: var(--c-ink-3);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.sidebar-nieuws-j-meta .cta-dienst-bol { width: 12px; height: 12px; border-width: 1px; }
.sidebar-nieuws-j-meta strong { color: var(--c-ink-2); font-weight: 700; }

/* === Sidebar nieuws-widget — variant H stijl (status-line, geen thumb) === */
.sidebar-nieuws-h .sidebar-nieuws-h-list {
    display: flex; flex-direction: column;
    margin-top: 8px;
}
.sidebar-nieuws-h-row {
    display: grid; grid-template-columns: 64px 1fr;
    gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none; color: inherit; align-items: center;
}
.sidebar-nieuws-h-row:last-child { border-bottom: none; }
.sidebar-nieuws-h-row:hover { background: var(--c-page); margin: 0 -10px; padding: 8px 10px; border-radius: 4px; }
.sidebar-nieuws-h-when {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--c-ink-3);
    display: flex; flex-direction: column; line-height: 1.15;
}
.sidebar-nieuws-h-when strong { font-size: 13px; color: var(--c-ink); font-weight: 700; }
.sidebar-nieuws-h-titel {
    font-size: 12px; font-weight: 600; line-height: 1.3;
    color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* === Sidebar "Laatste nieuws" — variant-H stijl zonder bar === */
.sidebar-laatste-nieuws-list {
    display: flex; flex-direction: column;
    margin-top: 8px;
}
.sidebar-laatste-nieuws-row {
    display: grid; grid-template-columns: 76px 1fr;
    gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none; color: inherit; align-items: center;
}
.sidebar-laatste-nieuws-row:last-child { border-bottom: none; }
.sidebar-laatste-nieuws-row:hover { background: var(--c-page); margin: 0 -10px; padding: 10px; border-radius: 4px; }
.sidebar-laatste-nieuws-when {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--c-ink-3);
    display: flex; flex-direction: column; line-height: 1.2;
}
.sidebar-laatste-nieuws-when strong { font-size: 15px; color: var(--c-ink); font-weight: 700; }
.sidebar-laatste-nieuws-titel {
    font-size: 14px; font-weight: 600; line-height: 1.35;
    color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ============================================================================
   NIEUWE MELDING-STIJL (mei 2026) — kleur-tint per dienst, datum-stempel links.
   Pure additie. Bestaande renders worden niet beïnvloed totdat
   melding-card.php in stap 5 de nieuwe markup gebruikt.
   ============================================================================ */

/* Achtergrond-tint per dienst — lightness ~95, hue afgestemd op dienst_kleur() */
.melding--amb {
    background: linear-gradient(90deg, #F5F9E5 0%, #FBFCF4 35%, #fff 100%);
    border-left-color: #94B12A;
}
.melding--bra {
    background: linear-gradient(90deg, #FDECEA 0%, #FEF6F5 35%, #fff 100%);
    border-left-color: #D6261B;
}
.melding--pol {
    background: linear-gradient(90deg, #DEE9F2 0%, #EEF4F8 35%, #fff 100%);
    border-left-color: #2C5F7A;
}
.melding--knrm {
    background: linear-gradient(90deg, #FAF1DE 0%, #FDF8EE 35%, #fff 100%);
    border-left-color: #E1701B;
}

/* Dark-mode tints: zelfde gradient-richting (dienst-tint → card-bg),
   palette ~10-12% lightness met dienst-hue. */
[data-theme="dark"] .melding--amb {
    background: linear-gradient(90deg, #1B2110 0%, #181C16 35%, var(--c-card) 100%);
}
[data-theme="dark"] .melding--bra {
    background: linear-gradient(90deg, #2A1714 0%, #1F1A18 35%, var(--c-card) 100%);
}
[data-theme="dark"] .melding--pol {
    background: linear-gradient(90deg, #131C25 0%, #161B22 35%, var(--c-card) 100%);
}
[data-theme="dark"] .melding--knrm {
    background: linear-gradient(90deg, #281A0F 0%, #1D1B16 35%, var(--c-card) 100%);
}

/* Datum-stempel links (vervangt icon-kolom in nieuwe layout) */
.melding-stamp {
    font-family: var(--font-mono);
    text-align: center;
    align-self: center;
}
.melding-stamp-time {
    display: block;
    font-weight: 600;
    font-size: 17px;
    color: var(--c-ink);
    line-height: 1;
}
.melding-stamp-sub {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--c-ink-4);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sublist binnen gebundelde melding (toont onderliggende alarmeringen) */
.melding-sublist {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px dashed rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.melding-sublist-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 8px;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--c-ink-3);
}
.melding-sublist-tag {
    color: #fff;
    padding: 1px 6px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    align-self: center;
}
.melding-sublist-tag--amb  { background: #94B12A; }
.melding-sublist-tag--bra  { background: #D6261B; }
.melding-sublist-tag--pol  { background: #2C5F7A; }
.melding-sublist-tag--knrm { background: #E1701B; }
.melding-sublist-text { line-height: 1.4; }

/* "+" separator tussen dienst-tags in bundle meta-rij */
.melding-meta-plus {
    color: var(--c-ink-4);
}

/* === Grid + layout-aanpassingen voor de nieuwe stijl ===
   Activeert vanaf het moment dat melding-card.php de nieuwe markup gebruikt. */
.melding {
    grid-template-columns: 80px 1fr 36px;     /* was 56px (icon) → 80px (stempel) */
    border-left: 4px solid transparent;       /* default, per .melding--{svc} overschreven */
}
.melding > .melding-icon { display: none; }    /* oude icon-element niet meer tonen */
.melding.is-spoed::before { display: none; }   /* spoed nu via .melding-spoed pill, geen left-edge meer */

/* Inheritance fix: .melding-dienst leest --svc-color. In bundle moet elke
   dienst-tag z'n eigen kleur hebben — die wordt inline gezet door melding-card.php */
.melding-dienst { color: var(--svc-color); }

/* Border-left-color moet NA de .melding-shorthand komen, anders wordt
   hij overschreven door de `border-left: 4px solid transparent` reset. */
.melding--amb  { border-left-color: #94B12A; }
.melding--bra  { border-left-color: #D6261B; }
.melding--pol  { border-left-color: #2C5F7A; }
.melding--knrm { border-left-color: #E1701B; }

/* ============================================================================
   STAT-STRIP (mei 2026) — 5-cellen-strip boven de feed op home + dorp-pages.
   Toont totaal vandaag + spoed + per-dienst aantallen, scope volgt pagina.
   ============================================================================ */
.stat-strip {
    display: flex;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
    /* Onder de rechts-flotende intro-ad blijven: bij een korte intro (vandaag/
       gister) liep de float anders dóór naast stat-strip + filter + feed en
       werd de hele feed-kolom halve breedte (zichtbaar op tablet). */
    clear: both;
}
/* B1: compacte maand-vergelijking (content-flow, dorp-pagina's). Rustig blokje
   net onder het stat-strip; nadrukkelijk geen sidebar-widget. */
.maand-trend {
    margin: -6px 0 14px;
    padding: 8px 12px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.45;
}
.maand-trend strong { color: var(--c-ink); font-weight: 700; }
/* Feed-samenvatting: sr-only zin in stat-strip voor AI-engines + voice-AI.
   Niet voor bezoekers zichtbaar (visuele cijfers staan al in stat-cells). */
.feed-summary {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.stat-cell {
    flex: 1;
    padding: 12px 14px;
    border-right: 1px solid var(--c-border);
    position: relative;
}
.stat-cell:last-child { border-right: 0; }
.stat-cell-strip {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
}
.stat-cell--total .stat-cell-strip { background: var(--c-ink); }
.stat-cell--spoed .stat-cell-strip { background: var(--c-hl); }
.stat-cell--amb   .stat-cell-strip { background: #94B12A; }
.stat-cell--bra   .stat-cell-strip { background: #D6261B; }
.stat-cell--pol   .stat-cell-strip { background: #2C5F7A; }
.stat-cell--knrm  .stat-cell-strip { background: #E1701B; }

.stat-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-4);
    margin-bottom: 4px;
}
.stat-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1;
}
.stat-cell--spoed .stat-value { color: var(--c-hl); }

@media (max-width: 700px) {
    .stat-strip { flex-wrap: wrap; }
    .stat-cell { flex: 1 1 33%; }
}


/* ============================================================================
   /112-nieuws/ hub — per dag gegroepeerd (mei 2026, demo nieuws-final.html)
   ============================================================================ */

.day-section { margin-bottom: 26px; }

.day-header {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 18px;
    background: var(--c-ink);
    color: #fff;
    border-radius: 6px 6px 0 0;
}
[data-theme="dark"] .day-header {
    background: var(--c-card-hover);
}
.day-header h3 {
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0;
}
.day-header h3 .relative {
    font-weight: 400; opacity: 0.7;
    font-size: 14px; margin-left: 8px;
    text-transform: lowercase;
}
.day-header-stats {
    margin-left: auto;
    font-family: var(--font-mono); font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
}
.day-header-stats strong { color: #fff; font-weight: 600; }

.day-header-bar {
    display: flex; height: 4px;
    overflow: hidden;
}
.day-header-bar > span { display: block; height: 100%; }

.day-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.day-item {
    display: grid;
    grid-template-columns: 80px 160px 1fr 36px;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-border);
    align-items: center;
    cursor: pointer;
    transition: background .15s, box-shadow .2s ease, transform .2s ease;
    position: relative;
    z-index: 0;
    color: inherit;
    text-decoration: none;
}
.day-item:hover {
    background: var(--c-card-hover);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
    transform: translateY(-2px);
    z-index: 1;
}
.day-item:hover .di-action { color: var(--c-hl); transform: translateX(3px); }
.day-item:last-child { border-bottom: 0; }

.di-stamp {
    font-family: var(--font-mono);
    text-align: right;
    border-right: 1px solid var(--c-border);
    padding-right: 14px;
}
.di-stamp-time { font-size: 19px; font-weight: 600; color: var(--c-ink); line-height: 1; margin-bottom: 4px; }
.di-stamp-day { font-size: 11px; color: var(--c-ink-4); text-transform: uppercase; letter-spacing: 0.05em; }

.di-map {
    width: 160px; height: 90px;
    border-radius: 5px;
    border: 1px solid var(--c-border);
    overflow: hidden;
}
.di-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

.di-body { min-width: 0; }
.di-pills { display: flex; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; align-items: center; }
.di-pill {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 2px;
    color: #fff;
}
.di-aantal {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.di-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.35;
    margin-bottom: 4px;
    letter-spacing: -0.005em;
}
.di-loc {
    font-size: 12px;
    color: var(--c-ink-3);
    font-family: var(--font-mono);
}

.di-action {
    font-size: 28px; font-weight: 800;
    color: var(--c-ink-4);
    line-height: 1;
    align-self: center; justify-self: center;
    transition: color .15s, transform .15s;
}

@media (max-width: 700px) {
    .day-item { grid-template-columns: 60px 100px 1fr 14px; gap: 10px; padding: 12px; }
    .di-map { width: 100px; height: 60px; }
    .di-stamp-time { font-size: 16px; }
    .di-title { font-size: 14.5px; }
}

/* Hero-card boven de dag-gegroepeerde lijst — meest recente bundel uitgelicht
   (mei 2026, demo nieuws-03.html). Alleen op pagina 1.
   Gebruikt .nieuws-hero-* prefix om naam-conflict met melding-detail's .hero-*
   te vermijden. */
.nieuws-hero {
    /* Hero zit nu binnen .day-card (zelfde border/radius als die parent),
     * dus geen eigen border meer. Padding + bottom-separator + hover-stijl
     * matchen .day-item zodat ze visueel één rij vormen.
     * 256px matcht de rechter rand van di-map in de day-items eronder:
     * (.day-item padding 18 + di-stamp 80 + gap 16 + di-map 160 = 274) → (18 + 256 = 274). */
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: 20px;
    padding: 18px;
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: background .15s, box-shadow .2s ease, transform .2s ease;
}
.nieuws-hero:hover {
    background: var(--c-card-hover);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
    transform: translateY(-2px);
    z-index: 1;
}
@media (max-width: 700px) { .nieuws-hero { grid-template-columns: 1fr; padding: 12px; gap: 12px; } }

.nieuws-hero-map {
    position: relative;
    min-height: 180px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-radius: 5px;
    overflow: hidden;
}
.nieuws-hero-map img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block; }

.nieuws-hero-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* Overlay-stempel linksboven op de kaart met dag + datum + tijd van het
 * nieuws-bericht. Donker-transparant met blur zodat 'ie op elke kaarttile
 * leesbaar blijft. */
.nieuws-hero-stamp {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(0, 0, 0, 0.72); color: #fff;
    padding: 6px 11px; border-radius: 4px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.nieuws-hero-stamp-dot {
    width: 7px; height: 7px;
    background: var(--c-hl); border-radius: 50%;
    animation: pulse-nieuws-hero 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-nieuws-hero {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.6; }
}

.nieuws-hero-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.nieuws-hero-time { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--c-ink); }

.nieuws-hero-pill {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 3px 8px; border-radius: 3px;
    color: #fff;
}

.nieuws-hero-title {
    font-size: 24px; font-weight: 700;
    line-height: 1.25; letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: var(--c-ink);
}

.nieuws-hero-summary {
    font-size: 14.5px;
    color: var(--c-ink-2);
    line-height: 1.5;
    margin-bottom: 14px;
}

.nieuws-hero-cta { font-size: 13px; color: var(--c-hl); font-weight: 600; }
.nieuws-hero-cta::after { content: ' →'; }

/* ============================================================================
 * Helikoptervlucht detail-pagina
 * Hergebruikt .hero.hero--map-top + .details + .meta-byline van melding-detail.
 * Onderstaande regels alleen voor vlucht-specifieke blokken.
 * ============================================================================ */

/* Leaflet-container binnen .hero-map-hero (vervangt de img van melding-hero) */
.vlucht-kaart-canvas {
    width: 100%;
    height: 100%;
}

/* Intro-paragraaf onder een hero-section-head — context bij de lijst eronder */
.hero--map-top .hero-section-intro {
    font-size: 14px;
    color: var(--c-ink-3);
    margin: -4px 0 14px 0;
    line-height: 1.5;
}

/* "Geen P2000-melding gekoppeld"-fallback-tekst */
.vlucht-leeg {
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.5;
    margin: 0 0 24px 0;
}

/* Vlucht-lijst — generiek voor gekoppelde melding, nabije meldingen, eerdere vluchten.
 * Visuele taal blijft consistent met .details (zelfde border-radius, zelfde border-kleur). */
.vlucht-lijst {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    overflow: hidden;
}

.vlucht-lijst-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-card);
}

.vlucht-lijst-item:last-child {
    border-bottom: 0;
}

.vlucht-lijst-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-ink-3);
    margin-bottom: 4px;
}

.vlucht-lijst-dienst {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-ink-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.vlucht-lijst-dienst::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent, var(--svc-amb));
    border-radius: 50%;
    flex-shrink: 0;
}

.vlucht-lijst-prio {
    border: 1px solid currentColor;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vlucht-lijst-tijd {
    color: var(--c-ink-3);
}

.vlucht-lijst-extra {
    color: var(--c-ink-3);
}

.vlucht-lijst-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-3);
    background: var(--c-page);
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid var(--c-border);
}

.vlucht-lijst-tekst {
    display: block;
    color: var(--c-ink);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.45;
}

.vlucht-lijst-tekst:hover {
    color: var(--c-hl);
    text-decoration: underline;
}

.vlucht-lijst-loc {
    margin-top: 4px;
    font-size: 13px;
    color: var(--c-ink-3);
}

/* Fase-tijdlijn — verticale tijdlijn met gekleurde rand per fase-type */
.fase-tijdlijn {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    border-left: 2px solid var(--c-border);
}

.fase-tijdlijn-item {
    position: relative;
    padding: 8px 14px;
    margin-left: -2px;
    border-left: 3px solid var(--fase, var(--c-border));
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}

.fase-tijdlijn-label {
    color: var(--fase, var(--c-ink));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    min-width: 100px;
}

.fase-tijdlijn-tijd {
    font-family: var(--font-mono);
    color: var(--c-ink-2);
}

.fase-tijdlijn-dur {
    color: var(--c-ink-3);
    font-size: 12px;
}

/* === Sidebar-widget "Laatste vluchten" — radar-pulse-variant =============
 * Radar-target-icoon in dienst-kleur (lifeliner=AMB-groen, politie=POL-blauw,
 * kustwacht=KNRM-oranje), met live-puls-animatie wanneer phase != voltooid.
 * NL-datum-formaat via $_weekdagenKort + $_maandenKort in widget-PHP.
 * ========================================================================== */
.heli-vluchten-list {
    display: flex; flex-direction: column;
    margin-top: 8px;
}

.heli-vluchten-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    color: inherit;
    align-items: center;
}

.heli-vluchten-row:last-child { border-bottom: none; }
.heli-vluchten-row:hover .heli-vluchten-naam { color: var(--c-hl); }

/* Radar-target: drie concentrische ringen via radial-gradient + dot in midden. */
.heli-vluchten-radar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        transparent 30%,
        var(--accent, var(--svc-amb)) 31%,
        var(--accent, var(--svc-amb)) 32%,
        transparent 33%,
        transparent 56%,
        var(--accent, var(--svc-amb)) 57%,
        var(--accent, var(--svc-amb)) 58%,
        transparent 59%
    );
    position: relative;
    flex-shrink: 0;
}
.heli-vluchten-radar::after {
    content: '';
    position: absolute;
    inset: 14px;
    background: var(--accent, var(--svc-amb));
    border-radius: 50%;
}

/* Live-puls: alleen wanneer data-live="1" op de row. */
.heli-vluchten-row[data-live="1"] .heli-vluchten-radar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent, var(--svc-amb));
    opacity: 0.25;
    animation: heli-vluchten-pulse 2s ease-out infinite;
}
@keyframes heli-vluchten-pulse {
    0%   { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

.heli-vluchten-body {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.heli-vluchten-naam {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heli-vluchten-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-3);
    line-height: 1.3;
}
.heli-vluchten-meta strong {
    color: var(--c-ink-2);
    font-weight: 600;
}
.heli-vluchten-live-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--c-live);
    border: 1px solid var(--c-live);
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 4px;
}

/* === Sidebar "Laatste 112 nieuws" — boarding-pass-variant =================
 * Dienst-mix als "vluchtnummer" (mono uppercase in dienst-kleur) met aantal
 * meldingen erachter, accent-bar in primaire dienst-kleur, tijd groot rechts
 * met datum eronder. Vervangt de oude .sidebar-laatste-nieuws-row-stijl op
 * sites waar deze variant is uitgerold (per-site keuze, niet alle 13).
 * ========================================================================== */
.sidebar-nieuws-bp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.sidebar-nieuws-bp-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--c-border);
    border-left: 4px solid var(--accent, var(--svc-amb));
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    background: var(--c-card);
    transition: border-color .15s, background .15s;
}
.sidebar-nieuws-bp-row:hover {
    border-color: var(--accent, var(--svc-amb));
    background: var(--c-page);
}

.sidebar-nieuws-bp-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sidebar-nieuws-bp-mix {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent, var(--svc-amb));
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar-nieuws-bp-count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--c-ink-3);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.sidebar-nieuws-bp-titel {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-nieuws-bp-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    flex-shrink: 0;
}

.sidebar-nieuws-bp-tijd {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1;
}

.sidebar-nieuws-bp-datum {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-3);
    margin-top: 4px;
}

/* === Hub-page lege-state-banner =========================================
 * Toont op /helikopters-{suffix}/ wanneer er nog geen vluchten geregistreerd
 * zijn (binnenland-sites of na cleanup). Subtiel-blauw blok, geen rode alert. */
.heli-hub-leeg {
    margin: 24px 0;
    padding: 20px 24px;
    background: var(--c-page);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--svc-pol);
    border-radius: 4px;
}
.heli-hub-leeg-titel {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--c-ink);
    font-weight: 700;
}
.heli-hub-leeg p {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-ink-2);
}
.heli-hub-leeg p:last-child { margin-bottom: 0; }

/* codes-tabel-stats: zwart header met witte tekst (override op generieke roze .codes-tabel th). Dark mode: donker grijs zodat het opvalt op de near-black card-bg. */
.codes-tabel-stats th {
    background: var(--c-ink);
    color: #fff;
}
[data-theme="dark"] .codes-tabel-stats th {
    background: #2A2F36;
    color: var(--c-ink);
}

/* === Deel-card — eigen white card voor de share-knoppen, in de content-
 * kolom direct onder het detail-artikel. De share-blok-eigen grijze inset
 * (page-bg + border, bedoeld voor ín het artikel) gaat hier uit: de witte
 * card ís al de omlijsting. */
.deel-card { margin-top: 24px; padding: 28px; }  /* zelfde padding als .hero-body-inner */
.deel-card .share-blok {
    margin: 0; padding: 0;
    background: transparent; border: none;
}
/* Cap in body-font, even groot als de card-caps van het laatste-blok
 * (18px, zie .laatste-kolom .card-cap). */
.deel-card .share-cap {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink);
    margin-bottom: 12px;
}

/* === Laatste-blok — in de content-kolom onder de deel-card: 2 losse witte
 * cards naast elkaar (laatste meldingen / nieuws / opvallend / vluchten),
 * exact 50/50 via minmax(0,1fr). Elk type houdt zijn herkenbare sidebar-
 * weergave (mini-list / bp-rows / radar-rows), alleen iets ruimer gemaakt
 * voor de bredere kolom (variant E, besluit 2026-06-13). */
.laatste-blok {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px; margin-top: 24px;
}
.laatste-blok--single { grid-template-columns: minmax(0, 1fr); }
.laatste-kolom {
    min-width: 0; display: flex; flex-direction: column;
    padding: 28px;  /* zelfde padding als .hero-body-inner */
}
.laatste-kolom .mini-more { margin-top: auto; }
.laatste-kolom .card-cap { font-size: 18px; }
/* Ruimer dan de sidebar-varianten: grotere tekst + meer padding per rij. */
.laatste-kolom .mini { padding: 11px 0; }
.laatste-kolom .mini-icon { width: 30px; height: 30px; }
.laatste-kolom .mini-meta { font-size: 11.5px; }
.laatste-kolom .mini-text { font-size: 13px; }
.laatste-kolom .sidebar-nieuws-bp-row { padding: 12px 10px; }
.laatste-kolom .sidebar-nieuws-bp-titel { font-size: 13.5px; }
.laatste-kolom .sidebar-nieuws-bp-tijd { font-size: 16px; }
.laatste-kolom .heli-vluchten-row { padding: 12px 10px; }
.laatste-kolom .heli-vluchten-naam { font-size: 13.5px; }
.laatste-kolom .heli-vluchten-meta { font-size: 11.5px; }
/* Type-emoji (zelfde als heli-hub) in de 36px-iconcel ipv de radar-dot;
 * geldt voor de sidebar-widget én het laatste-blok. */
.heli-vluchten-row .heli-icoon { font-size: 22px; text-align: center; }
.laatste-kolom .heli-vluchten-row .heli-icoon { font-size: 24px; }
@media (max-width: 760px) {
    .laatste-blok { grid-template-columns: minmax(0, 1fr); }
}

/* Statistieken-filters (herontworpen 2026-07-14) — was: vier chip-rijen waarvan
   de Gebied-rij over meerdere regels afbrak. Nu een compact paneel: gebied als
   select, periode als segmented control met één chip-rij eronder. */
.stats-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 16px 0 4px;
    padding: 16px 18px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 8px;
}
.sf-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: start;
}
.sf-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-2);
    padding-top: 9px;
}
.sf-select {
    width: 100%;
    max-width: 320px;
    padding: 9px 34px 9px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--c-ink);
    background: var(--c-card);
    border: 1px solid var(--c-border-strong, var(--c-border));
    border-radius: 5px;
    cursor: pointer;
    appearance: none;
    /* Chevron als inline-SVG (geen extra request, geen externe host → CSP-veilig). */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}
.sf-select:focus-visible { outline: 2px solid var(--c-hl); outline-offset: 1px; }

.sf-periode { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Segmented control: één omlijning, knoppen delen de randen. */
.sf-seg {
    display: inline-flex;
    align-self: start;
    border: 1px solid var(--c-border-strong, var(--c-border));
    border-radius: 5px;
    overflow: hidden;
    background: var(--c-card);
}
.sf-seg-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink-2);
    border-right: 1px solid var(--c-border);
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.sf-seg-btn:last-child { border-right: 0; }
.sf-seg-btn:hover { background: var(--c-bg); color: var(--c-ink); }
.sf-seg-btn.is-active {
    background: var(--c-ink);
    color: var(--c-card);
    font-weight: 700;
}
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 640px) {
    .stats-filters { padding: 14px; }
    .sf-row { grid-template-columns: 1fr; gap: 6px; }
    .sf-lbl { padding-top: 0; }
    .sf-select { max-width: none; }
    .sf-seg { align-self: stretch; }
    .sf-seg-btn { flex: 1; text-align: center; padding: 8px 6px; }
}
/* Per-maand-grafiek (jaaroverzicht): zelfde balk-stijl als per-uur, 12 kolommen. */
.stats-bars-maand { grid-template-columns: repeat(12, 1fr) !important; }
.stats-bars-maand > div { min-width: 0 !important; }

/* A11y: skip-link (Fase H, 2026-06-30) — WCAG 2.4.1. Onzichtbaar tot focus. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--c-hl,#c00);color:#fff;padding:10px 16px;border-radius:0 0 6px 0;text-decoration:none;font-weight:600}
.skip-link:focus{left:0;outline:3px solid #fff;outline-offset:-3px}

.push-cta{margin:0 0 18px;}
.push-cta__inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border:1px solid var(--c-border,#e2e2e2);border-radius:10px;
  background:var(--c-card,#fff);}
.push-cta__txt{font-size:.95rem;color:var(--c-text,#222);}
.push-cta__btn{appearance:none;border:0;cursor:pointer;font-weight:700;font-size:.95rem;
  padding:9px 18px;border-radius:8px;background:var(--c-hl,#C7261D);color:#fff;}
.push-cta__btn:hover{filter:brightness(.94);}
.push-cta__btn--off{background:transparent;color:var(--c-hl,#C7261D);border:1px solid var(--c-hl,#C7261D);}
.push-cta__btn.is-busy{opacity:.6;cursor:progress;}