/* ============================================================
   Bestand: public_html/assets/themes/_local_portal/css/dorpsapp.css
   ============================================================

   Het blad van de gedeelde dorpsindeling (v014.11.472): de indeling die kolhorn.nl sinds v014.11.426
   heeft (SiteKop.dc.html, Home.dc.html, de App en 112-meldingen.dc.html), gedeeld zodat de andere
   dorpen dezelfde kop, rails, onderbalk, panelen, voorpagina en rubriekpagina's kunnen krijgen. De
   markup staat in themes/_local_portal/partials/dorpsapp/, het gedrag in _local_portal/js/dorpsapp.js
   (en voor de panelen _local_portal/js/theme.js).

   ThemeShellService laadt dit blad alleen bij een thema met `dorpsindeling` in zijn theme_shell.php,
   na de gedeelde bladen (dorpsgeraamte.css, fr-gedeeld.css) en vóór het eigen blad van het thema, zodat
   het thema er zijn kleuren, zijn merk en zijn tekening overheen kan zetten. Wat van één dorp is (het
   merk, de tekening op de voorpagina, de versiering van de voet, de kleuren en de letters) hoort in
   theme.css van dat dorp, niet hier.

   KLEUREN EN MATEN komen uit de --fr-variabelen die elk dorpsthema zet: --fr-bg (papier), --fr-kaart
   (het vlak van een kaart), --fr-tekst, --fr-stil (gedempt), --fr-rand, --fr-groen (de hoofdkleur van
   de bediening), --fr-geel (het tweede accent: bij kolhorn waterblauw), --fr-terra (actualiteit),
   --fr-amber, --fr-rood, --fr-blauw, --fr-knoptekst, --fr-voet, --fr-voet-tekst, --fr-voet-stil,
   --fr-voet-lijn, --fr-voet-accent (het streepje voor de koppen in de voet), --fr-tint, --fr-open-stip,
   --fr-open-t, de letters --fr-serif, --fr-sans, --fr-mono, de hoeken --fr-hoek, --fr-hoek-knop,
   --fr-hoek-klein en de breedte --fr-max.

   VOORRANG. mobile-app.css en footer.css laden ná dit blad; waar die meespelen staat er `html body` of
   `html body.dorps-app` voor (ThemeShellService::DORPSAPP_BODY, de body-klasse van elk thema met deze
   indeling). Het voorvoegsel kh- is het interne voorvoegsel van de indeling, zoals fr- dat van het
   geraamte is: de klassen, de kenmerken en de opslag in de browser van bestaande bezoekers hangen eraan.

   Opbouw:
     1. Basis
     2. De kop: merk, menu en bediening
     3. De rails
     4. De rubrieken: verenigingen en filters
     5. De onderbalk, Meer, het instellingenvenster en het zoekvenster
     6. De voet
     7. De voorpagina
     8. De voorpagina op een telefoon
     9. De rubriekpagina's en /112-meldingen
    10. Home aanpassen
    11. De pagina's op een telefoon
   ============================================================ */

/* ── 1. Basis ─────────────────────────────────────────────────────── */

/* Lange namen, webadressen en mailadressen breken nergens uit zichzelf; zonder dit
   duwen ze de rails, de prikbordstroken en de kaarten open. Correctie 4 uit de
   opdracht, en hier globaal gezet zodat geen enkel component het kan vergeten. */
body.fr-body, body.fr-body * { overflow-wrap: anywhere; }

/* ── 2. De kop: merk, menu en bediening (v014.11.426, SiteKop.dc.html en de App) ──────────
   Eén maatregel voor de bediening rechtsboven: alles 36 pixels hoog, dezelfde rand, letter en
   focusrand (prompt §3). Het menu staat in het midden zodra merk, menu en knoppenrij samen passen
   (vanaf 1330 px; in het ontwerp zelf liepen Contact en Zoeken rond 1200 px over elkaar). Daaronder
   gaat het menu naar een tweede regel; tot en met 1024 px staat het in Meer. Het merk zelf (teken,
   naam, payoff en hun maten) is van het thema. */

/* Het raster van de kop: merk links, menu in het midden, bediening rechts, 86 pixels hoog. De basis stond tot
   v014.11.476 in fr-gedeeld.css, met de maten van de indeling hier overheen; franeker.nl laadt dat blad bewust niet
   (eigen kleuren en letters) en kreeg het raster dan niet. Het is structuur van de indeling, geen smaak, dus staat
   het nu hier, één regel per onderdeel, met dezelfde uitkomst als de twee regels van toen. */
[data-fr-head] {
    width: 100%;
    max-width: var(--fr-max);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    min-height: 86px;
}

[data-fr-nav] {
    display: flex;
    justify-content: center;
    align-self: stretch;
    align-items: stretch;
    gap: 4px;
    flex-wrap: wrap;
}

[data-fr-nav] a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px 16px;
    margin-bottom: -1px;
    font: 600 0.95rem/1.2 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
    white-space: nowrap;
}

[data-fr-nav] a:hover,
[data-fr-nav] a.is-hier { color: var(--fr-groen); }

/* De streep onder de actieve pagina: vier pixels in de kleur van wat actueel is, zo breed als het woord. */
[data-fr-nav] a.is-hier::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 4px;
    background: var(--fr-terra);
}

[data-fr-acties] {
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}

/* De kop staat op papier, niet op een kaartvlak, en de scheiding met de inhoud is één
   lijn in de hoofdkleur: precies wat .kh-header in de mockup van kolhorn.nl doet. */
.fr-header {
    background: var(--fr-bg);
    border-bottom: 1px solid var(--fr-groen);
}

.kh-kopknoppen { display: flex; align-items: center; gap: 10px; }

/* Niet krimpen: anders brak "Zoeken" over twee regels en knipte de derde A af. */
.kh-kopknoppen > * { flex: none; }

.kh-hdr-zoek, .kh-ctrl, .kh-login, .kh-kop-instellingen {
    box-sizing: border-box;
    height: 36px;
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-knop);
    font: 700 0.82rem/1 var(--fr-sans);
}

.kh-hdr-zoek {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    background: var(--fr-kaart);
    color: var(--fr-tekst);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

.kh-hdr-zoek kbd { font: 700 0.7rem/1 var(--fr-sans); color: var(--fr-stil); background: none; border: 1px solid var(--fr-rand); border-radius: 3px; padding: 2px 5px; }

.kh-ctrl { display: inline-flex; overflow: hidden; background: var(--fr-kaart); }

.kh-ctrl button {
    appearance: none;
    box-sizing: border-box;
    height: 100%;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--fr-tekst);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.kh-ctrl button + button { border-left: 1px solid var(--fr-rand); }

.kh-ctrl button svg, .kh-hdr-zoek svg { width: 16px; height: 16px; flex: none; }

.kh-ctrl .kh-letter-klein { font-size: 0.82rem; }

.kh-ctrl .kh-letter-normaal { font-size: 0.95rem; }

.kh-ctrl .kh-letter-groot { font-size: 1.08rem; }

.kh-hdr-zoek:hover, .kh-ctrl button:hover { background: var(--fr-bg); color: var(--fr-tekst); }

.kh-ctrl button[aria-pressed="true"] { background: var(--fr-groen); color: var(--fr-knoptekst); }

.kh-hdr-zoek:focus-visible, .kh-ctrl button:focus-visible, .kh-login:focus-visible,
.kh-kop-instellingen:focus-visible, .kh-terug:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; }

.kh-login {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-color: var(--fr-groen);
    background: var(--fr-groen);
    color: var(--fr-knoptekst);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.kh-login:hover { background: color-mix(in srgb, var(--fr-groen) 85%, #000); color: var(--fr-knoptekst); }

.kh-kop-instellingen {
    display: none;
    width: 36px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--fr-kaart);
    color: var(--fr-tekst);
    cursor: pointer;
}

.kh-kop-instellingen svg { width: 18px; height: 18px; }

.kh-terug { display: none; }

/* Het menu past pas in het midden als merk, menu en knoppenrij samen passen: gemeten vanaf ongeveer
   1370 px bij normale letters. De letterschaal zoomt de hele pagina (tot 1,14), dus bij grote letters
   ligt die grens zoveel hoger, bij kleine iets lager. Een mediaquery ziet de zoom niet; vandaar de
   koppeling aan de schaalstand. */
@media (max-width: 1369px) {
    html:not([data-schaal="klein"]) [data-fr-head] { grid-template-columns: 1fr auto; min-height: 0; padding-top: 14px; row-gap: 4px; }
    html:not([data-schaal="klein"]) [data-fr-nav] { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-left: -14px; }
}

@media (max-width: 1279px) {
    html[data-schaal="klein"] [data-fr-head] { grid-template-columns: 1fr auto; min-height: 0; padding-top: 14px; row-gap: 4px; }
    html[data-schaal="klein"] [data-fr-nav] { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-left: -14px; }
}

@media (min-width: 1370px) and (max-width: 1569px) {
    html[data-schaal="groot"] [data-fr-head] { grid-template-columns: 1fr auto; min-height: 0; padding-top: 14px; row-gap: 4px; }
    html[data-schaal="groot"] [data-fr-nav] { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-left: -14px; }
}

/* Tablet: het menu en de knoppen voor weergave en letters staan in Meer en in het
   instellingenvenster; rechts blijven Zoeken (zonder "/"), de schuifknop en Beheer. */
@media (max-width: 1024px) {
    [data-fr-nav], .kh-ctrl, .kh-hdr-zoek kbd { display: none; }
    html body.dorps-app .fr-header [data-fr-head] { min-height: 72px; padding-top: 0; padding-bottom: 0; }
    body.dorps-app .kh-kop-instellingen { display: inline-flex; }
}

/* Een telefoon die liggend wordt gehouden (844×390, 915×412) valt in de tabletband, maar blijft een
   telefoon: tikvlakken van 44 pixels en de terugpijl (in de geïnstalleerde app de enige weg terug). */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
    body.dorps-app .kh-hdr-zoek,
    body.dorps-app .kh-kop-instellingen,
    body.dorps-app .kh-login { height: 44px; min-width: 44px; }
    .kh-terug { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; color: var(--fr-tekst); }
    .khz-esc { min-width: 44px; min-height: 44px; justify-content: center; }
    .khz-sug button { min-height: 44px; }
}

@media (max-width: 719px) {
    body.dorps-app .fr-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding-top: env(safe-area-inset-top, 0px);
        /* Geen vervaging (backdrop-filter): die schilderde hier eerder over knoppen met een hogere
           laag heen. Zonder vervaging schemert tekst door een half doorzichtige kop, dus dicht. */
        background: var(--fr-bg);
    }
    html body.dorps-app .fr-header [data-fr-head] { flex-wrap: nowrap; gap: 2px; min-height: 58px; padding: 0 6px 0 16px; }
    .fr-merk-sub, .kh-login { display: none; }
    .kh-kopknoppen { gap: 2px; }
    body.dorps-app .kh-hdr-zoek,
    body.dorps-app .kh-kop-instellingen,
    .kh-terug {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 22px;
        background: transparent;
        color: var(--fr-tekst);
    }
    body.dorps-app .kh-hdr-zoek svg, body.dorps-app .kh-kop-instellingen svg { width: 22px; height: 22px; }
    .kh-hdr-zoek-tekst { display: none; }
    .kh-hdr-zoek:active, .kh-kop-instellingen:active, .kh-terug:active { background: var(--fr-kaart); }
    html body.dorps-app .fr-header [data-fr-head]:has(.kh-terug) { padding-left: 4px; }
    /* Een ankerdoel mag niet onder de vaste kop verdwijnen. De kop zoomt mee met de letterschaal. */
    html { scroll-padding-top: calc(58px + env(safe-area-inset-top, 0px)); }
    html[data-schaal="klein"] { scroll-padding-top: calc(54px + env(safe-area-inset-top, 0px)); }
    html[data-schaal="groot"] { scroll-padding-top: calc(67px + env(safe-area-inset-top, 0px)); }
}

/* De rails zoals LinkerRail.dc.html en RechterRail.dc.html (v014.11.428): kaarten met de hoek van het
   thema, koppen in kleine kapitalen, het snelmenu met een groene balk bij de pagina waar je bent, en
   112 in twee regels per melding (dienst, met de plaats eronder). Alleen in de rails. */
/* ── 3. De rails ───────────────────────────────────────────────────
   De rails zoals LinkerRail.dc.html en RechterRail.dc.html (v014.11.428): kaarten met de hoek van het
   thema, koppen in kleine kapitalen, het snelmenu met een balk bij de pagina waar je bent, en 112 in
   twee regels per melding (dienst, met de plaats eronder). Alleen in de rails. */
/* De basis van de rails: tot v014.11.476 in fr-gedeeld.css, en dan kreeg franeker.nl (dat dat blad bewust
   niet laadt: eigen kleuren en letters) ze niet. Het zijn de maten van de rails van de indeling, dus horen
   ze hier; verhuisd vóór de verfijningen hieronder, zodat de volgorde gelijk bleef. Waar hier en daar allebei
   een regel voor hetzelfde stond (het snelmenu), is dat nu één regel met dezelfde uitkomst. */
.fr-snelnav ul,
.fr-clubs ul,
.fr-112-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fr-snelnav a,
.fr-snelnav li > span {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 2.6rem;
    padding: 0 0.6rem;
    border-left: 3px solid transparent;
    border-radius: var(--fr-hoek-klein);
    font: 500 0.9375rem/1.3 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
    transition: background 0.15s;
}

.fr-snelnav a:hover { background: var(--fr-bg); color: var(--fr-tekst); }

/* Het snelmenu met een balk in de hoofdkleur bij de pagina waar je bent. */
.fr-snelnav li.is-hier a { border-left-color: var(--fr-groen); background: var(--fr-bg); color: var(--fr-tekst); }

.fr-teken { flex: none; font-size: 18px; line-height: 1; opacity: 0.85; width: 18px; text-align: center; }

.fr-rail-meer {
    display: inline-block;
    margin-top: 0.3rem;
    font: 600 0.875rem/1.4 var(--fr-sans);
    color: var(--fr-blauw);
    text-decoration: none;
}

.fr-rail-meer:hover { text-decoration: underline; }

/* 112 in de rail: tijd links, dienst en plaats rechts, elk met een stip.

   COMPACTER SINDS v014.11.310. Dienst en plaats stonden onder elkaar, elk op een eigen regel met
   veel lucht eromheen; vijf meldingen namen daardoor bijna een half scherm in en er bleef een gat
   onder de laatste. Ze staan nu naast elkaar en breken alleen af als het niet past, met krappere
   tussenruimte. Dezelfde vijf meldingen, ongeveer een derde minder hoogte. */
.fr-112 { padding: 0.75rem 0.85rem; }

.fr-112-lijst li {
    display: flex;
    gap: 0.5rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--fr-rand);
    align-items: baseline;
}

/* Geen streep onder de laatste, net als in de meldingenlijst op de rubriekpagina: die hangt los
   onder aan de kaart met niets eronder om van te scheiden. */
.fr-112-lijst li:last-child { border-bottom: 0; padding-bottom: 0.1rem; }

.fr-112-tijd {
    flex: none;
    font: 400 0.75rem/1.6 var(--fr-mono);
    color: var(--fr-stil);
    padding-top: 0.15rem;
}

.fr-112-stip {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
}

/* Dienst en plaats naast elkaar; alleen afbreken als de rail te smal wordt. */
.fr-112-tekst { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.45rem; }

.fr-112-dienst {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font: 600 0.875rem/1.4 var(--fr-sans);
    color: var(--fr-tekst);
}

.fr-112-plaats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font: 400 0.8125rem/1.5 var(--fr-sans);
    color: var(--fr-stil);
}

.fr-112-plaats::before {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--fr-ww);
}

/* De bronregel mag er staan, maar hoeft niet op te vallen: hij is verantwoording, geen inhoud. */
.fr-112-bron {
    margin: 0;
    padding-top: 0.4rem;
    font: 400 0.6875rem/1.45 var(--fr-sans);
    color: var(--fr-stil);
    opacity: 0.75;
}

/* Verenigingen: per groep (een plaats of een soort, dat kiest het thema) een mono-kopje in
   kapitalen en een stip voor elke naam. */
.fr-clubs {
    padding: 0.85rem 0.7rem;
    max-height: calc(100svh - 2rem);
    overflow: auto;
    scrollbar-width: thin;
}

.fr-clubs-lijst { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.45rem; }

.fr-clubs-groep { min-width: 0; }

.fr-clubs-plaatskop {
    font: 700 0.625rem/1.4 var(--fr-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fr-stil);
    padding: 0.2rem 0.55rem 0.15rem;
}

.fr-clubs ul { display: flex; flex-direction: column; gap: 1px; }

.fr-clubs a,
.fr-clubs li > span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.55rem;
    border-left: 3px solid transparent;
    border-radius: 6px;
    font: 500 0.9rem/1.4 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
    transition: background 0.15s;
}

.fr-clubs a:hover { background: var(--fr-tint); color: var(--fr-tekst); }

.fr-clubs a[aria-current="page"] { border-left-color: var(--fr-geel); background: var(--fr-tint); }

/* De stip voor een naam: één kleur (--fr-geel), die het thema zelf zet. Een thema met meerdere
   plaatsen kan in zijn eigen blad varianten op data-plaats toevoegen. */
.fr-clubs-stip {
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--fr-stil);
}

.fr-clubs-naam { min-width: 0; }

.fr-clubs-plaats { display: none; }

/* De knop "Ook in de dorpen" met het aantal erachter: alleen op de voorpagina, klapt de groepen uit. */
.fr-clubs-meer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-klein);
    background: transparent;
    color: var(--fr-blauw);
    font: 600 0.875rem/1.4 var(--fr-sans);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.fr-clubs-meer:hover { background: var(--fr-tint); }

.fr-clubs.is-ingeklapt .fr-clubs-groep:not(:first-of-type) { display: none; }

.fr-clubs-meer .fr-clubs-meer-dicht { display: none; }

.fr-clubs:not(.is-ingeklapt) .fr-clubs-meer .fr-clubs-meer-open { display: none; }

.fr-clubs:not(.is-ingeklapt) .fr-clubs-meer .fr-clubs-meer-dicht { display: inline; }

[data-fr-rail] .fr-kaart { border-radius: var(--fr-hoek-knop); }

[data-fr-rail] .fr-kicker { font-weight: 800; }

.fr-snelnav ul { display: flex; flex-direction: column; gap: 2px; margin-top: 0.5rem; }

.fr-112 .fr-kicker { color: var(--fr-tekst); }

.fr-112-lijst { display: flex; flex-direction: column; margin-top: 0.35rem; }

.fr-112 .fr-112-lijst li { padding: 9px 0; border-bottom: 1px solid var(--fr-rand); }

.fr-112 .fr-112-tekst { flex-direction: column; align-items: flex-start; gap: 2px; }

.fr-112 .fr-112-stip { width: 7px; height: 7px; border-radius: 1px; }

.fr-112 .fr-112-plaats::before { width: 5px; height: 5px; background: var(--fr-groen); }

.fr-112 .fr-rail-meer { margin-top: 10px; }

/* De dienstkleur als klasse: brandweer rood, ambulance amber, politie blauw, grijs voor onbekend. */
.fr-112-stip.is-rood { background: var(--fr-rood); }

.fr-112-stip.is-amber { background: var(--fr-amber); }

.fr-112-stip.is-blauw { background: var(--fr-blauw); }

.fr-112-stip.is-groen { background: var(--fr-groen); }

.fr-112-stip.is-grijs { background: var(--fr-stil); }

.fr-clubs .fr-clubs-stip { width: 6px; height: 6px; background: var(--fr-tekst); }

/* De weertekens (dorpsapp/weertekens.php) staan één keer in de pagina en blijven zelf uit beeld; de
   kleuren van de tekens zet het thema (.wxk-*). */
.fr-weertekens { position: absolute; width: 0; height: 0; overflow: hidden; }

/* De agenda staat sinds v014.11.307 in fr-gedeeld.css; daar krijgt elk dorpsthema hem. */
/* ── 4. De rubrieken: verenigingen en filters ─────────────────────── */

.fr-clublijst-naam { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }

/* Dezelfde kanttekening als op de verenigingenpagina, maar in de rail is er geen ruimte voor
   woorden: één vraagteken met "Nog niet bevestigd" in de titel (en voor een schermlezer als tekst).
   Een rondje van 13 px, zoals RechterRail.dc.html (v014.11.428). */
.fr-clubs-vlag {
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--fr-bg);
    color: var(--fr-stil);
    font: 800 0.58rem/1 var(--fr-sans);
    vertical-align: 0.1em;
}

.fr-clublijst-vlag {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--fr-rand);
    border-radius: 999px;
    font: 500 0.6875rem/1.5 var(--fr-sans);
    color: var(--fr-stil);
    text-transform: none;
    letter-spacing: 0;
}

/* Alles wat het filter kan verbergen, op één plek.

   Dit is twee reviewrondes blijven staan en stond live: de browser verbergt een element met het
   hidden-attribuut via `[hidden] { display: none }`, maar dat is een regel van de browser zelf en
   die verliest van élke eigen display-regel. `.fr-nieuwskaart` en `.fr-nieuwslijst` zetten
   `display: flex`, `.fr-briefjes` zet `display: grid`, en dus gebeurde er bij een klik op een
   filterknop helemaal niets: de knop kleurde, de kaarten bleven staan.

   Alleen bij de 112-lijst stond dit goed. Alles wat de filters op `hidden` zetten, staat nu hier;
   CssHiddenRegelTest bewaakt dat er niets bijkomt zonder regel. */
.fr-112-groep[hidden],
.fr-nieuwslijst[hidden],
.fr-nieuwskaart[hidden],
.fr-briefjes[hidden],
.fr-briefje[hidden],
.fr-agenda-blok[hidden],
.fr-agenda-regel[hidden],
.fr-clubgroep[hidden],
.fr-clubs-groep[hidden] { display: none; }

/* Grotere letters: de pagina zoomt, dus op een gewoon beeldscherm past het drieluik pas
   later. Tot die maat staan de verenigingen onder de inhoud in twee kolommen, net als op een
   kleine laptop; de kolommen zelf staan in dorpsgeraamte.css. Tot v014.11.476 in fr-gedeeld.css (zie sectie 3). */
@media (min-width: 1280px) and (max-width: 1439px) {
    html[data-schaal="normaal"] .fr-clubs,
    html[data-schaal="groot"] .fr-clubs { max-height: none; }
    html[data-schaal="normaal"] .fr-clubs-lijst,
    html[data-schaal="groot"] .fr-clubs-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; align-items: start; }
}

@media (min-width: 1440px) and (max-width: 1599px) {
    html[data-schaal="groot"] .fr-clubs { max-height: none; }
    html[data-schaal="groot"] .fr-clubs-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; align-items: start; }
}

@media (max-width: 1279px) {
    .fr-clubs { max-height: none; }
    .fr-clubs-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; align-items: start; }
    .fr-clubs.is-ingeklapt .fr-clubs-lijst { grid-template-columns: 1fr 1fr; }
    .fr-clubs-meer { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
    .fr-clubs-lijst { grid-template-columns: 1fr; }
    .fr-clubs.is-ingeklapt .fr-clubs-lijst { grid-template-columns: 1fr; }
}

@media (max-width: 719px) {

    /* Het snelmenu zit in de balk onderaan; 112 toont de twee jongste meldingen. */
    .fr-snelnav { display: none; }
    [data-lr-112kol] > li:nth-of-type(n+3) { display: none; }
}

/* ── 5. De onderbalk, Meer, het instellingenvenster en het zoekvenster (v014.11.426) ──────
   Zoals de App van het ontwerp (Kolhorn App.dc.html): een lichte balk met vijf knoppen, de gekozen
   knop met een pilletje achter het icoon, Meer als volledig scherm boven de balk, en het
   instellingenvenster als laag blad van onderen dat ook de balk bedekt. Het gedrag (openen, sluiten,
   focus, terugknop, omlaag slepen) komt uit het gedeelde _local_portal/js/theme.js; de klassen zijn
   die van de gedeelde onderbalk. mobile-app.css laadt ná dit blad: waar het meespeelt staat er
   html body voor. Tot en met 1024 px; daarboven staat alles in de kop. */
/* De basis van de panelen (Meer, het instellingenvenster): vast over het scherm, onzichtbaar tot is-open, het
   blad dat van onderen inschuift en de regels erin. Tot v014.11.476 in fr-gedeeld.css; verhuisd om dezelfde
   reden als de rails (sectie 3), letterlijk en vóór de regels van de indeling hieronder. */
.portal-bottom-nav-v20 { display: none; }

.portal-slide-panel-v20 {
    position: fixed;
    inset: 0;
    z-index: 1060;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s .28s;
}

.portal-slide-panel-v20.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s 0s;
}

.portal-slide-backdrop-v20 {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 26, 0.6);
    opacity: 0;
    transition: opacity .28s cubic-bezier(.4, 0, .2, 1);
}

.portal-slide-panel-v20.is-open .portal-slide-backdrop-v20 { opacity: 1; }

.portal-slide-body-v20 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    background: var(--fr-kaart);
    border-top: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek) var(--fr-hoek) 0 0;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4, 0, 1, 1);
    will-change: transform;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.portal-slide-panel-v20.is-open .portal-slide-body-v20 {
    transform: translateY(0);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.portal-slide-handle-v20 {
    width: 44px;
    height: 4px;
    margin: 10px auto 4px;
    border-radius: 2px;
    background: var(--fr-rand3);
}

.portal-slide-header-v20 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px 12px;
    border-bottom: 1px solid var(--fr-rand);
}

.portal-slide-header-v20 strong {
    font: 700 0.75rem/1.4 var(--fr-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-stil);
}

.portal-slide-close-v20 {
    border: 1px solid var(--fr-rand);
    background: var(--fr-kaart);
    color: var(--fr-tekst);
    border-radius: var(--fr-hoek-klein);
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.portal-slide-content-v20 {
    overflow-y: auto;
    padding: 4px 18px 18px;
    overscroll-behavior: contain;
}

.portal-slide-content-v20 a,
.portal-slide-content-v20 > span {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.6rem;
    border-radius: var(--fr-hoek-klein);
    font: 600 0.9375rem/1.3 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.portal-slide-content-v20 a:hover { background: var(--fr-tint); color: var(--fr-tekst); }

.portal-slide-content-v20 a[aria-current="page"] { border-left-color: var(--fr-geel); background: var(--fr-tint); color: var(--fr-blauw); }

.portal-slide-content-v20 > span { justify-content: space-between; }

@media (max-width: 1024px) {
    html body .kh-onderbalk {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-flow: column;
        justify-content: center;
        padding: 6px max(4px, calc((100% - 480px) / 2)) calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--fr-kaart);
        border-top: 1px solid var(--fr-rand);
    }
    html body .kh-onderbalk .portal-bottom-nav-item-v20 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--fr-stil);
        font: 600 0.72rem/1 var(--fr-sans);
        letter-spacing: 0;
        text-transform: none;
        text-decoration: none;
        cursor: pointer;
    }
    html body .kh-onderbalk .portal-bottom-nav-item-v20 > span:last-child { white-space: nowrap; overflow: visible; }
    .kh-onderbalk .dorps-balkicoon {
        position: relative;
        display: grid;
        place-items: center;
        width: 60px;
        height: 32px;
        border-radius: 16px;
        transition: background 0.2s;
    }
    .kh-onderbalk .dorps-balkicoon svg { width: 23px; height: 23px; }
    html body .kh-onderbalk .is-active,
    html body .kh-onderbalk [data-kh-hier],
    html body .kh-onderbalk [aria-expanded="true"] { color: var(--fr-groen); font-weight: 800; }
    .kh-onderbalk .is-active .dorps-balkicoon,
    .kh-onderbalk [data-kh-hier] .dorps-balkicoon,
    .kh-onderbalk [aria-expanded="true"] .dorps-balkicoon { background: color-mix(in srgb, var(--fr-groen) 14%, transparent); }
    .kh-onderbalk .is-active svg,
    .kh-onderbalk [data-kh-hier] svg,
    .kh-onderbalk [aria-expanded="true"] svg { stroke-width: 2.1; }
    .kh-onderbalk .portal-bottom-nav-item-v20:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: -2px; border-radius: 12px; }
    /* De rode stip op Meer bij een nieuwe 112-melding (dorpsapp.js). */
    .kh-onderbalk .kh-nieuw112 .dorps-balkicoon::after {
        content: "";
        position: absolute;
        top: 3px;
        right: 14px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #C0392B;
        border: 2px solid var(--fr-kaart);
        box-sizing: content-box;
    }
    html body:has(.kh-onderbalk) { padding-bottom: 0; }
    /* footer.css laadt ná dit blad en zet de voet op padding 0; zonder deze voorrang viel de
       onderste regel van de voet (de credit) achter de balk. */
    html body.dorps-app footer.site-footer-v10 { padding-bottom: calc(var(--cms-nav-height, 72px) + 12px); }

    /* Meer: een volledig scherm boven de balk, zonder greepje, met de kop van de telefoon. */
    html body .dorps-meer:not(.kh-instellingen) .portal-slide-body-v20 { background: var(--fr-bg); padding-top: env(safe-area-inset-top, 0px); }
    .dorps-meer .portal-slide-handle-v20 { display: none; }
    .kh-meer-kop { justify-content: flex-end; gap: 2px; min-height: 58px; padding: 0 6px 0 16px; border-bottom: 0; }
    .kh-meer-kopruimte { flex: 1; }
    .kh-meer-kopknop {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 22px;
        background: transparent;
        color: var(--fr-tekst);
        cursor: pointer;
    }
    .kh-meer-kopknop:active { background: var(--fr-kaart); }
    .kh-meer-kopknop:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; }
    /* Meer is zo breed als de balk (hooguit 480, zoals de App), ook op een tablet. */
    html body .dorps-meer:not(.kh-instellingen) .portal-slide-content-v20,
    html body .dorps-meer:not(.kh-instellingen) .kh-meer-kop { width: 100%; max-width: 480px; margin-inline: auto; box-sizing: border-box; }
    /* Staat Meer open boven een pagina van de balk, dan is alleen Meer gekozen. */
    .kh-onderbalk:has([aria-expanded="true"]) .is-active { color: var(--fr-stil); font-weight: 600; }
    .kh-onderbalk:has([aria-expanded="true"]) .is-active .dorps-balkicoon { background: transparent; }
    .kh-onderbalk:has([aria-expanded="true"]) .is-active svg { stroke-width: 1.7; }
}

/* De inhoud van Meer (dorpsapp/meer.php). */
html body .kh-meer.portal-slide-content-v20 { padding: 0 0 24px; }

html body .kh-meer .kh-meer-titel { margin: 0; padding: 10px 20px 14px; font: 700 2rem/1.15 var(--fr-serif); letter-spacing: -0.015em; color: var(--fr-tekst); }

.kh-meer-groep { margin: 0 0 24px; }

.kh-meer-groep h3 { margin: 0 20px 8px; font: 800 0.74rem/1.3 var(--fr-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); }

.kh-meer-blok { border-block: 1px solid var(--fr-rand); background: var(--fr-kaart); }

html body .kh-meer .kh-meer-rij {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 62px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 16px 10px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fr-tekst);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.kh-meer .kh-meer-rij::-webkit-details-marker { display: none; }

html body .kh-meer .kh-meer-rij:hover, .kh-meer .kh-meer-rij:active { background: var(--fr-bg); color: var(--fr-tekst); }

.kh-meer .kh-meer-rij[aria-current="page"] { background: color-mix(in srgb, var(--fr-groen) 8%, transparent); }

.kh-meer .kh-meer-rij:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: -2px; }

.kh-meer-tegel { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; }

.kh-meer-tekst {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: -10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fr-rand);
}

.kh-meer-blok > :last-child .kh-meer-tekst,
.kh-meer-blok > .kh-meer-uitklap:last-child > summary .kh-meer-tekst { border-bottom: 0; }

.kh-meer-tekst strong { display: block; font: 700 0.97rem/1.3 var(--fr-sans); }

.kh-meer-tekst span { display: block; margin-top: 2px; font: 400 0.8rem/1.35 var(--fr-sans); color: var(--fr-stil); overflow-wrap: anywhere; }

.kh-meer-badge { padding: 2px 8px; border-radius: 999px; background: var(--fr-bg); font: 800 0.74rem/1.4 var(--fr-sans); color: var(--fr-stil); font-variant-numeric: tabular-nums; }

.kh-meer-staart { display: grid; place-items: center; flex: none; color: var(--fr-stil); }

.kh-meer-uitklap[open] > summary .kh-meer-staart { transform: rotate(90deg); }

.kh-meer-clubs { list-style: none; margin: 0; padding: 0 16px 10px 72px; }

.kh-meer-clubs li a, .kh-meer-clubs li > span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--fr-rand);
    border-radius: 0;
    font: 600 0.92rem/1.3 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
}

.kh-meer-clubs li:last-child a, .kh-meer-clubs li:last-child > span { border-bottom: 0; }

.kh-meer-voet { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 16px; font: 400 0.78rem/1.4 var(--fr-sans); color: var(--fr-stil); }

.kh-meer-beta { padding: 3px 10px; border-radius: 999px; background: var(--fr-tekst); color: var(--fr-bg); font-weight: 800; }

/* De tinten van de icoontegels, zoals de App (T in Kolhorn App.dc.html). De vaste rood-, blauw- en
   goudtonen lichten 's nachts op, zodat ze op het donkere vlak leesbaar blijven. */
.kh-tint-groen { color: var(--fr-groen); background: color-mix(in srgb, var(--fr-groen) 13%, transparent); }

.kh-tint-water { color: var(--fr-geel); background: color-mix(in srgb, var(--fr-geel) 14%, transparent); }

.kh-tint-pan { color: var(--fr-terra); background: color-mix(in srgb, var(--fr-terra) 14%, transparent); }

.kh-tint-rood { color: var(--kh-rood-teken, #B03A2E); background: color-mix(in srgb, #B03A2E 12%, transparent); }

.kh-tint-blauw { color: var(--kh-blauw-teken, #2E5A8C); background: color-mix(in srgb, #2E5A8C 13%, transparent); }

.kh-tint-goud { color: var(--kh-goud-teken, #9A7424); background: color-mix(in srgb, #C9962E 16%, transparent); }

.kh-tint-inkt { color: var(--fr-tekst); background: var(--fr-bg); }

html[data-thema="donker"], html[data-thema="auto"][data-auto-stand="nacht"] { --kh-rood-teken: #E88A7E; --kh-blauw-teken: #8FB2DD; --kh-goud-teken: #D9B35C; }

@media (prefers-color-scheme: dark) {
    html[data-thema="auto"]:not([data-auto-stand]) { --kh-rood-teken: #E88A7E; --kh-blauw-teken: #8FB2DD; --kh-goud-teken: #D9B35C; }
}

/* In de geïnstalleerde app hoeft niemand hem nog te installeren. */
.kh-als-app [data-kh-installeer] { display: none; }

@media (display-mode: standalone) { [data-kh-installeer] { display: none; } }

/* Het instellingenvenster (dorpsapp/instellingen.php): een laag blad van onderen, over de balk heen. */
html body .kh-instellingen.portal-slide-panel-v20 { bottom: 0; z-index: 1200; }

html body .kh-instellingen .portal-slide-backdrop-v20 { background: rgba(12, 18, 16, 0.45); }

/* In het midden met marges en niet met translate(-50%): theme.js zet tijdens het omlaag slepen een
   eigen transform (translateY) op het blad, en daarmee viel de -50% weg en sprong het blad een half blad
   naar rechts (Theo, 24 september 2026). Zo verschuift slepen alleen de hoogte. */
html body .kh-instellingen .portal-slide-body-v20 {
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 100%;
    max-width: 480px;
    height: auto;
    max-height: 90dvh;
    box-sizing: border-box;
    padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 26px 26px 0 0;
    background: var(--fr-kaart);
    color: var(--fr-tekst);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    opacity: 1;
    transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
}

html body .kh-instellingen.is-open .portal-slide-body-v20 { transform: translateY(0); }

.kh-instellingen .portal-slide-handle-v20 { width: 40px; height: 5px; margin: 12px auto 14px; border-radius: 3px; background: var(--fr-rand); }

.kh-instellingen .portal-slide-header-v20 { padding: 0 0 12px; border: 0; gap: 8px; }

.kh-instellingen .portal-slide-header-v20 h2 { flex: 1; margin: 0; font: 700 1.4rem/1.2 var(--fr-serif); color: var(--fr-tekst); }

html body .kh-instellingen .kh-venster-sluit {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background: var(--fr-bg);
    color: var(--fr-tekst);
    cursor: pointer;
}

html body .kh-instellingen .portal-slide-content-v20 { padding: 0; overflow-y: auto; }

.kh-inst-kop { margin: 18px 0 8px; font: 800 0.74rem/1.3 var(--fr-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); }

.kh-inst-kop:first-child { margin-top: 4px; }

/* Een kolom is minstens zo breed als zijn woord: "Automatisch" brak anders op 320 px midden in het
   woord (het thema laat elders elk woord overal breken). Op een extreem smal scherm, bijvoorbeeld
   flink ingezoomd, staan de standen onder elkaar. */
.kh-inst-tegels { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--fr-bg); }

.kh-inst-tegels button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 0 6px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--fr-tekst);
    font: 700 0.82rem/1.2 var(--fr-sans);
    cursor: pointer;
}

.kh-inst-tegels button, .kh-inst-tegels button * { overflow-wrap: normal; }

@media (max-width: 299px) {
    .kh-inst-tegels:not(.kh-inst-letters) { grid-template-columns: 1fr; }
    .kh-inst-tegels:not(.kh-inst-letters) button { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 0 14px; }
}

/* De gekozen tegel: vlak én een groene rand (WCAG 1.4.11). Een echte rand en geen box-shadow, want
   footer.css zet CMS-breed elke box-shadow uit. De focus is een aparte ring erbuiten, zodat ook de
   gekozen tegel laat zien dat hij de focus heeft. */
.kh-inst-tegels button[aria-pressed="true"] { background: var(--fr-kaart); color: var(--fr-groen); border-color: var(--fr-groen); }

.kh-inst-tegels button:focus-visible { outline: 2px solid var(--fr-tekst); outline-offset: 2px; }

.kh-inst-letters button { min-height: 52px; font-weight: 800; }

.kh-inst-letters .kh-letter-klein { font-size: 0.9rem; }

.kh-inst-letters .kh-letter-normaal { font-size: 1.15rem; }

.kh-inst-letters .kh-letter-groot { font-size: 1.45rem; }

html body .kh-instellingen .kh-inst-rij {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--fr-rand);
    border-radius: 0;
    color: var(--fr-tekst);
    text-decoration: none;
}

.kh-inst-rij > span { flex: 1; }

.kh-inst-rij strong { display: block; font: 700 0.95rem/1.3 var(--fr-sans); }

.kh-inst-rij span span { font: 400 0.8rem/1.35 var(--fr-sans); color: var(--fr-stil); }

/* Home aanpassen: een rij die de schakelaars uitklapt, en per onderdeel een schakelaar zoals in het
   ontwerp (Kolhorn App.dc.html). De rijen zijn knoppen, dus zonder knopopmaak van de browser. */
.kh-instellingen button.kh-inst-rij {
    width: 100%;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.kh-instellingen button.kh-inst-rij:focus-visible { outline: 2px solid var(--fr-tekst); outline-offset: 2px; }

.kh-inst-uitklap svg { flex: none; color: var(--fr-stil); transition: transform 0.2s; }

.kh-inst-uitklap[aria-expanded="true"] svg { transform: rotate(90deg); }

.kh-home-uitleg { margin: 10px 0 2px; font-size: 0.88rem; color: var(--fr-stil); }

/* `.kh-inst-rij > .kh-schakel` en niet alleen de klasse: `.kh-inst-rij > span` rekt elk kind uit. */
.kh-inst-rij > .kh-schakel,
.kh-schakel {
    position: relative;
    flex: none;
    width: 50px;
    height: 30px;
    border-radius: 15px;
    background: var(--fr-rand);
    transition: background 0.2s;
}

.kh-schakel::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}

[aria-checked="true"] > .kh-schakel { background: var(--fr-groen); }

[aria-checked="true"] > .kh-schakel::after { transform: translateX(20px); }

.kh-inst-alles {
    width: 100%;
    min-height: 50px;
    margin-top: 14px;
    border: 1px solid var(--fr-rand);
    border-radius: 14px;
    background: transparent;
    color: var(--fr-tekst);
    font: 800 0.95rem/1.2 var(--fr-sans);
    cursor: pointer;
}

.kh-inst-alles:focus-visible { outline: 2px solid var(--fr-tekst); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .kh-schakel,
    .kh-schakel::after,
    .kh-inst-uitklap svg { transition: none; }
}

.kh-inst-uitleg { margin-top: 14px; }

.kh-inst-uitleg p { margin: 0 0 8px; font-size: 0.95rem; color: var(--fr-stil); }

.kh-inst-uitleg ol { list-style: none; counter-reset: kh-stap; margin: 0; padding: 0; }

.kh-inst-uitleg li { counter-increment: kh-stap; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--fr-rand); font-size: 0.95rem; }

.kh-inst-uitleg li::before {
    content: counter(kh-stap);
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fr-groen);
    color: var(--fr-knoptekst);
    font: 800 0.85rem/1 var(--fr-sans);
}

/* Het zoekvenster (dorpsapp.js), zoals kh-zoek.js in het ontwerp. */
.khz-d { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: transparent; color: var(--fr-tekst); font-family: var(--fr-sans); }

.khz-d::backdrop { background: rgba(12, 18, 16, 0.5); }

.khz-p {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100% - 32px));
    max-height: 76vh;
    margin: 10vh auto 0;
    overflow: hidden;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    animation: khz-in 0.18s ease both;
}

@keyframes khz-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } }

.khz-k { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; border-bottom: 1px solid var(--fr-rand); color: var(--fr-stil); }

.khz-k:focus-within { border-bottom: 2px solid var(--fr-groen); }

.khz-k input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fr-tekst); font: inherit; font-size: 1.08rem; }

.khz-k input::-webkit-search-cancel-button { display: none; }

.khz-esc { display: inline-flex; align-items: center; border: 1px solid var(--fr-rand); border-radius: 5px; background: transparent; color: var(--fr-stil); font: 700 0.72rem/1 var(--fr-sans); padding: 5px 7px; cursor: pointer; }

.khz-esc svg { display: none; }

.khz-r { overflow-y: auto; padding: 6px 0 10px; }

.khz-g { margin: 12px 16px 4px; font: 800 0.68rem/1.3 var(--fr-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-stil); }

.khz-i { display: flex; align-items: center; gap: 12px; margin: 0 8px; padding: 9px 10px; border-radius: 7px; color: var(--fr-tekst); text-decoration: none; }

.khz-i[aria-selected="true"], .khz-i:hover { background: color-mix(in srgb, var(--fr-groen) 11%, transparent); color: var(--fr-tekst); }

.khz-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 7px; background: var(--fr-bg); color: var(--fr-groen); }

.khz-ic-rood { color: var(--kh-rood-teken, #B03A2E); background: color-mix(in srgb, #B03A2E 11%, transparent); }

.khz-tekst { min-width: 0; }

.khz-t { display: block; font: 700 0.93rem/1.3 var(--fr-sans); }

.khz-s { display: block; font: 400 0.8rem/1.35 var(--fr-sans); color: var(--fr-stil); }

.khz-t mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--fr-terra) 22%, transparent); color: inherit; }

.khz-sug { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 8px; }

.khz-sug button { padding: 6px 12px; border: 1px solid var(--fr-rand); border-radius: 999px; background: var(--fr-bg); color: var(--fr-tekst); font: 600 0.85rem/1.2 var(--fr-sans); cursor: pointer; }

.khz-leeg { padding: 28px 16px; text-align: center; color: var(--fr-stil); font-size: 0.9rem; }

.khz-leeg strong { display: block; margin-bottom: 4px; color: var(--fr-tekst); }

.khz-v { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--fr-rand); font-size: 0.74rem; color: var(--fr-stil); }

.khz-v kbd { margin-right: 4px; padding: 0 5px; border: 1px solid var(--fr-rand); border-radius: 4px; background: none; color: inherit; font: 700 0.74rem/1.4 var(--fr-sans); }

.khz-i:focus-visible, .khz-esc:focus-visible, .khz-sug button:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; }

@media (max-width: 640px) {
    .khz-p { width: 100%; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
    .khz-v { display: none; }
    /* Schermvullend is er geen achtergrond om op te tikken en geen Esc-toets: een sluitkruis van
       44 pixels. */
    .khz-k { padding-right: 4px; }
    .khz-esc { justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; color: var(--fr-tekst); }
    .khz-esc span { display: none; }
    .khz-esc svg { display: block; }
    .khz-sug button { min-height: 44px; }
}

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

/* ── 6. De voet (v014.11.430, SiteVoet.dc.html) ─────────────────────────────────────────
   De voet zelf blijft de gedeelde CMS-voet (Content → Footer, met de bouwer-credit die op elke
   installatie gelijk is); dorpsapp/voet.php zet er de versiering van het dorp en de groetrij boven en
   geeft hem het merk en de kolom Rubrieken. Hier de jas: het vlak in de voetkleur, koppen met een
   streepje, onderstreepte links, ronde knoppen voor de sociale media en een omlijnde mailknop. Vier
   kolommen, twee bij twee tot en met 900 px, één kolom tot en met 520 px. footer.css laadt ná dit
   blad; waar het meespeelt staat er html body.dorps-app voor. De versiering zelf (bij kolhorn.nl de
   kade), een eventuele textuur over de voetkleur en het teken van het merk op de voet staan in theme.css
   van het thema. */

/* De voetkleuren van het thema op de gedeelde CMS-voet (--footer-* van footer.css, uit de --fr-voet-tokens),
   en de jas onderaan de pagina. Tot v014.11.476 in fr-gedeeld.css; verhuisd om dezelfde reden als het raster
   van de kop (sectie 2): franeker.nl laadt dat blad niet en kreeg anders de voetkleuren uit zijn instellingen. */
.fr-voet-jas { margin-top: auto; }

.fr-body .site-footer-builder-v14516 {
    --footer-bg: var(--fr-voet);
    --footer-text: var(--fr-voet-tekst);
    --footer-link: var(--fr-voet-tekst);
    --footer-link-hover: #FFFFFF;
    --footer-border: var(--fr-voet-lijn);
    --footer-border-top-width: 0px;
    --footer-border-top-color: transparent;
}

.fr-body .site-footer-v10 {
    background: repeating-linear-gradient(105deg, rgba(233, 236, 240, 0.04) 0 1px, transparent 1px 6rem), var(--fr-voet);
    color: var(--fr-voet-tekst);
    border-top: 0;
    font-family: var(--fr-sans);
}

.fr-body .site-footer-inner-v10 { max-width: none; padding-left: 2rem; padding-right: 2rem; }

.fr-body .site-footer-v10 .site-footer-brand-row-v20 strong,
.fr-body .site-footer-v10 .site-footer-about-v20 h2,
.fr-body .site-footer-v10 .site-footer-brand-name-v20 { font-family: var(--fr-serif); font-weight: 700; color: #FFFFFF; }

.fr-body .site-footer-v10 .site-footer-connect-label-v20,
.fr-body .site-footer-v10 .site-footer-col-v20 > h2,
.fr-body .site-footer-v10 .site-footer-col-title-v20 {
    font: 700 0.75rem/1.4 var(--fr-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fr-voet-stil);
}

.fr-body .site-footer-v10 a { color: var(--fr-voet-tekst); text-decoration: none; }

.fr-body .site-footer-v10 a:hover { color: #FFFFFF; }

.fr-body .site-footer-v10 .site-footer-bottom { border-top-color: var(--fr-voet-lijn); color: var(--fr-voet-stil); font-size: 0.8125rem; }

.fr-body .site-footer-v10 .site-footer-logo-v14516 {
    background: var(--fr-tint);
    color: #FFFFFF;
    border-radius: var(--fr-hoek-klein);
    font-family: var(--fr-serif);
}

.kh-voet-jas { --kh-voet-goot: clamp(16px, 1.4vw, 20px); }

.kh-voet-groetrij,
html body.dorps-app .site-footer-builder-v14516 {
    background-color: var(--fr-voet);
}

.kh-voet-groetrij {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 30px;
    padding: 36px var(--kh-voet-goot) 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--fr-voet-tekst);
}

.kh-voet-groet { margin: 0; font: italic 600 clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem)/1.2 var(--fr-serif); color: #fff; }

.kh-voet-motto { margin: 0; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--fr-voet-stil); }

.kh-voet-motto b { font-weight: 700; color: var(--fr-voet-tekst); }

html body.dorps-app .site-footer-builder-v14516 { border-top: 0; box-shadow: none; }

html body.dorps-app .site-footer-builder-v14516 .site-footer-inner-v10 { padding: 0 var(--kh-voet-goot, clamp(16px, 1.4vw, 20px)); }

html body.dorps-app .site-footer-columns-v20 { gap: 32px; padding: 40px 0 26px; border-bottom: 0; }

html body.dorps-app .site-footer-columns-v20:has(> :nth-child(4)) { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }

html body.dorps-app .site-footer-col-v20 { gap: 0; }

/* Het merk zoals in de kop (partials/merk.php van het thema), op de donkere voet, in de voetinkt. Het teken
   zelf kleurt het thema. */
html body.dorps-app .kh-voet-merk { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--fr-voet-tekst); text-decoration: none; }

html body.dorps-app .site-footer-about-v20 .site-footer-brand-row-v20 { display: block; }

html body.dorps-app .site-footer-about-v20 p { max-width: 44ch; font-size: 0.88rem; line-height: 1.6; color: var(--fr-voet-tekst); }

/* Koppen: kleine kapitalen in wit met een terracotta streepje ervoor. */
html body.dorps-app .site-footer-v10 .site-footer-connect-label-v20 {
    margin-bottom: 12px;
    font: 800 0.76rem/1.4 var(--fr-sans);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    opacity: 1;
}

html body.dorps-app .site-footer-v10 .site-footer-connect-label-v20::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 3px;
    margin-right: 8px;
    vertical-align: 2px;
    background: var(--fr-voet-accent, var(--fr-terra));
}

/* Rubrieken en Informatie: één kolom, onderstreepte links in de voetinkt, wit bij aanwijzen. */
html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 { display: flex; flex-direction: column; gap: 7px; columns: auto; font-size: 0.88rem; }

html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 a {
    display: block;
    margin: 0;
    font-weight: 400;
    color: var(--fr-voet-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 a:hover { color: #fff; }

/* Volg ons: ronde knoppen met een wit teken, en het mailadres als omlijnde knop. */
html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 { gap: 10px; margin: 0 0 14px; }

html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    background: transparent;
    /* footer.css zet de kleur met !important uit --brand; die variabele zetten is genoeg. */
    --brand: #fff;
    font-size: 1.05rem;
    transform: none;
}

html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 a:hover,
html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 a:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); transform: none; }

html body.dorps-app .site-footer-contact-v20 { margin: 0; }

html body.dorps-app .site-footer-v10 .site-footer-contact-v20 a {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--fr-hoek-knop);
    font: 600 0.85rem/1.2 var(--fr-sans);
    color: var(--fr-voet-tekst);
    text-decoration: none;
}

html body.dorps-app .site-footer-v10 .site-footer-contact-v20 a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* De drie !important hieronder overschrijven de !important van footer.css op deze balk (marge, bovenruimte,
   lijn); zonder zou de onderregel de vaste ruimte en geen lijn houden. */
html body.dorps-app .site-footer-bottom-v14516 {
    gap: 8px 22px;
    margin: 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    font-size: 0.78rem;
    color: var(--fr-voet-stil);
}

html body.dorps-app .site-footer-bottom-v14516 a { font-weight: 700; color: var(--fr-voet-stil); text-decoration: underline; text-underline-offset: 3px; }

html body.dorps-app .site-footer-bottom-v14516 a:hover { color: #fff; }

html body.dorps-app .site-footer-v10 a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 900px) {
    html body.dorps-app .site-footer-builder-v14516 .site-footer-columns-v20,
    html body.dorps-app .site-footer-builder-v14516 .site-footer-columns-v20:has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}

@media (max-width: 719px) {
    /* Tikvlakken van 44 px: de links worden rijen (geen pillen zoals in de gedeelde voet), de knoppen
       groeien mee. */
    html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 { gap: 0; }
    html body.dorps-app .site-footer-v10 .site-footer-legal-items-v20 a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    html body.dorps-app .site-footer-builder-v14516 .site-footer-social-v20 a { width: 44px; height: 44px; }
    html body.dorps-app .site-footer-v10 .site-footer-contact-v20 a { min-height: 44px; }
    html body.dorps-app .site-footer-bottom-v14516 a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 520px) {
    html body.dorps-app .site-footer-builder-v14516 .site-footer-columns-v20,
    html body.dorps-app .site-footer-builder-v14516 .site-footer-columns-v20:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
}

/* ── 7. De voorpagina (v014.11.428, Home.dc.html) ────────────────────────────────────────
   Op elke breedte dezelfde blokken in dezelfde volgorde; alleen het aantal kolommen verschilt.
   Behalve de bovenkant op een telefoon (onder 720 px, sectie 8): daar staat de tekening van het dorp
   bovenaan en schuift het ondernemersblok er als paneel overheen (besluit Theo, 24 september 2026:
   "zo hoort het"). Hoe de tekening zelf eruitziet en hoe het paneel erop aansluit, is van het thema.

   Bouwstenen: .kh-sec (een blok), .kh-sechead (de kop met de lijn eronder), .kh-kaart (rand, vlak,
   hoek van het thema) en .kh-klik (de hele kaart klikbaar via de ene link erin, .kh-klik-a). */

/* De datum begint bovenaan de kolom; de standaardmarge van een alinea zette er nog een regel lucht
   boven, bovenop de opvulling van de kolom. */
.fr-hero-datum { margin-top: 0; }

@media (max-width: 719px) {
    /* Op een telefoon begint de pagina met de tekening: de datum en "Vandaag aan de dijk" mochten daar
       weg (Theo, 25 september 2026), de tijd staat in de regel op de tekening. De kop blijft voor een
       schermlezer en een zoekmachine; absoluut, zodat hij in de kolom geen plek en geen tussenruimte
       meer inneemt. */
    .fr-hero {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.kh-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.kh-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--fr-tekst);
}

#fr-main .kh-sechead h2 { margin: 0; min-width: 0; font: 600 1.35rem/1.2 var(--fr-serif); color: var(--fr-tekst); }

.kh-sechead-meer {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font: 600 0.88rem/1.2 var(--fr-sans);
    color: var(--fr-groen);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.kh-sechead-meer:hover { text-decoration-thickness: 2px; }

.kh-sechead-regel { flex: none; font-size: 0.8rem; color: var(--fr-stil); }

.kh-kaart,
.kh-lijstkaart,
.kh-nieuwskaart,
.kh-handig-tegel,
.kh-112-kaart,
.kh-bezoek {
    min-width: 0;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-knop);
}

.kh-kaart { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }

.kh-klik { position: relative; transition: background-color 0.15s, border-color 0.15s; }

.kh-klik-a { color: inherit; text-decoration: none; }

.kh-klik-a::after { content: ""; position: absolute; inset: 0; border-radius: var(--fr-hoek-knop); }

/* Rijen binnen een kaart zijn recht, dus hun focusring ook. */
.kh-agenda-regel .kh-klik-a::after,
.kh-112-rij .kh-klik-a::after { border-radius: 0; }

.kh-klik:hover { background-color: color-mix(in srgb, var(--fr-groen) 7%, var(--fr-kaart)); border-color: var(--fr-groen); }

.kh-klik:hover .kh-klik-a { color: var(--fr-groen); }

/* De focus op de hele kaart en niet op de titel alleen: de ring hangt aan het vlak dat de link over de
   kaart spant, binnen de rand. Zo knipt een kaart met overflow:hidden (112) hem niet af. Een rand en
   geen schaduw, want footer.css zet CMS-breed elke box-shadow uit. */
.kh-klik-a:focus-visible { outline: none; }

.kh-klik-a:focus-visible::after { outline: 2px solid var(--fr-groen); outline-offset: -2px; }

.kh-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.kh-kaart-soort,
.kh-nieuws-label {
    margin: 0;
    font: 800 0.7rem/1.35 var(--fr-sans);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fr-groen);
    overflow-wrap: anywhere;
}

#fr-main .kh-kaart-titel,
#fr-main .kh-agenda-titel { margin: 0; font: 700 1rem/1.3 var(--fr-sans); color: var(--fr-tekst); overflow-wrap: anywhere; }

.kh-kaart-tekst { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--fr-stil); }

.kh-kaart-tekst.is-open { font-weight: 700; color: var(--fr-groen); }

/* Een uitgelichte vermelding is een betaalde plek; het label in pannenrood (ONTWERPSPEC). */
.kh-uitlabel {
    align-self: flex-start;
    margin-top: 6px;
    padding: 3px 6px;
    border: 1px solid currentColor;
    border-radius: var(--fr-hoek-klein);
    font: 800 0.66rem/1 var(--fr-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-terra);
}

/* Binnenkort: één kaart met regels. Wanneer, wat en waar op één lijn; op een telefoon de plek onder
   de titel (twee kolommen: DorpsthemaVolledigTest staat onder 1440 px geen drie kolommen toe in een
   mediaquery, en de basisregel hieronder staat er buiten). */
.kh-lijstkaart { padding: 2px 18px; }

.kh-agenda-regel {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 2px 16px;
    align-items: baseline;
    margin: 0 -18px;
    padding: 12px 18px;
    border-top: 1px solid var(--fr-rand);
}

.kh-agenda-regel:first-child { border-top: 0; }

.kh-agenda-wanneer {
    margin: 0;
    font: 800 0.7rem/1.35 var(--fr-sans);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fr-terra);
}

.kh-agenda-plek { margin: 0; max-width: 14rem; font-size: 0.82rem; line-height: 1.4; text-align: right; color: var(--fr-stil); }

/* Kort nieuws: elke kaart een eigen foto (3:2) of een vlak met een gebouwtje. Twee naast elkaar vanaf
   1200 px. Is de kaart smal (telefoon, en twee naast elkaar tot 1800 px), dan wordt de foto kleiner:
   anders bleef de tekstkolom op 1280 px 131 px smal, zoals in de mockup. Met schermbreedtes en niet
   met een containerquery: die kennen oudere iPhones niet (zelfde keuze als het weerkaartje, stap A). */
.kh-nieuws-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.kh-nieuwskaart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 12px;
}

.kh-nieuws-foto {
    display: grid;
    place-items: center;
    width: 136px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-klein);
    background: color-mix(in srgb, var(--fr-groen) 12%, var(--fr-kaart));
    color: var(--fr-groen);
}

.kh-nieuws-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.kh-nieuws-foto img.nieuws-bronlogo { object-fit: contain; padding: 10px; background: #fff; }

.kh-nieuws-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.kh-nieuws-tijd { margin-left: 4px; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; color: var(--fr-stil); }

.kh-nieuws-kop { font: 700 1rem/1.3 var(--fr-sans); color: var(--fr-tekst); overflow-wrap: anywhere; }

.kh-nieuws-bron { font-size: 0.76rem; line-height: 1.4; color: var(--fr-stil); }

.kh-nowrap { white-space: nowrap; }

.kh-nieuws-bron svg { display: inline-block; vertical-align: 0; }

@media (max-width: 640px), (min-width: 1200px) and (max-width: 1799px) {
    .kh-nieuws-foto { width: 88px; }
}

@media (min-width: 1200px) {
    .kh-nieuws-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Prikbord: de briefjes ook op een telefoon twee naast elkaar (ontwerp), met eronder de knop om zelf
   iets te plaatsen. */
.kh-prikvoet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

.kh-prikvoet-noot { font-size: 0.8rem; color: var(--fr-stil); }

.kh-leeg { margin: 0; padding: 16px 18px; border: 1px dashed var(--fr-rand); border-radius: var(--fr-hoek-knop); color: var(--fr-stil); }

.kh-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 40px;
    padding: 10px 18px;
    border: 1px solid var(--fr-groen);
    border-radius: var(--fr-hoek-knop);
    background: var(--fr-groen);
    color: var(--fr-knoptekst);
    font: 700 0.9rem/1.2 var(--fr-sans);
    text-align: center;
    text-decoration: none;
}

.kh-knop:hover { background: color-mix(in srgb, var(--fr-groen) 86%, var(--fr-tekst)); color: var(--fr-knoptekst); }

.kh-knop-lijn { background: transparent; color: var(--fr-groen); }

.kh-knop-lijn:hover { background: color-mix(in srgb, var(--fr-groen) 8%, transparent); color: var(--fr-groen); }

.kh-knop:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; }

/* Handig: de tegels, de kolommen naar de ruimte van de middenkolom: één op een smalle
   telefoon, twee daarboven, vier pas als de middenkolom naast de rails zo'n 1080 px breed is. Met
   schermbreedtes en niet met een containerquery, om dezelfde reden als bij het nieuws. Grote letters
   vergroten alles (zoom 1,14), dus daar liggen de drempels hoger; nagerekend met de rails en de tegelmaat
   zodat "Huisartsenspoedpost" en "0224-224040" op één regel passen. */
.kh-handig-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

@media (min-width: 560px) {
    html:not([data-schaal="groot"]) .kh-handig-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
    html[data-schaal="groot"] .kh-handig-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1740px) {
    html:not([data-schaal="groot"]) .kh-handig-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1980px) {
    html[data-schaal="groot"] .kh-handig-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kh-handig-tegel {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 10px 14px;
    align-items: start;
    padding: 16px 18px;
}

.kh-handig-icoon { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; }

.kh-handig-tekst { min-width: 0; }

.kh-handig-tekst .kh-klik-a { display: block; font: 700 1rem/1.25 var(--fr-sans); color: var(--fr-tekst); }

.kh-handig-sub { display: block; margin-top: 3px; font-size: 0.8rem; line-height: 1.4; color: var(--fr-stil); }

.kh-handig-actie {
    grid-column: 2;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--fr-rand);
    font: 800 0.85rem/1.2 var(--fr-sans);
    font-variant-numeric: tabular-nums;
    color: var(--fr-groen);
}

/* Een nummer breekt nooit; een actietekst van de redactie mag wel. */
.kh-handig-actie.is-tel { font-size: 0.98rem; white-space: nowrap; }

/* Hetzelfde rood als het icoon (kh-tint-rood), dag en nacht. */
.kh-handig-actie.is-rood { color: var(--kh-rood-teken, #B03A2E); }

/* 112 in de buurt: rijen per dag, dezelfde opmaak als de 112-pagina (dorpsapp/meldingen_lijst.php). */
.kh-112-kaart { overflow: hidden; }

.kh-112-dag {
    margin: 0;
    padding: 8px 18px;
    border-bottom: 1px solid var(--fr-rand);
    background: var(--fr-bg);
    font: 800 0.72rem/1.3 var(--fr-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
}

.kh-112-lijst + .kh-112-dag { border-top: 1px solid var(--fr-rand); }

.kh-112-lijst { list-style: none; margin: 0; padding: 0; }

.kh-112-rij {
    display: grid;
    grid-template-columns: 44px 22px minmax(0, 1fr);
    gap: 0 12px;
    align-items: start;
    padding: 12px 18px;
}

/* Een lijn tussen twee zichtbare rijen, en dus ook geen lijn tegen de bovenrand als de filterknoppen de
   eerste rij van een dag verbergen. */
.kh-112-rij:not([hidden]) ~ .kh-112-rij:not([hidden]) { border-top: 1px solid var(--fr-rand); }

.kh-112-tijd { padding-top: 3px; font: 0.78rem/1.4 var(--fr-mono); font-variant-numeric: tabular-nums; color: var(--fr-stil); }

.kh-112-teken { display: grid; place-items: center; width: 22px; height: 22px; font-size: 15px; line-height: 1; }

.kh-112-kern { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.kh-112-tekst { display: flex; align-items: baseline; gap: 8px; font: 700 1rem/1.35 var(--fr-sans); color: var(--fr-tekst); }

.kh-112-regel { min-width: 0; overflow-wrap: anywhere; }

.kh-prio {
    flex: none;
    padding: 1px 6px;
    border: 1px solid var(--fr-rand);
    border-radius: 3px;
    background: var(--fr-bg);
    font: 800 0.66rem/1.4 var(--fr-sans);
    color: var(--fr-stil);
}

.kh-prio.is-p1 { color: var(--kh-rood-teken, #B03A2E); }

.kh-112-sub { font-size: 0.78rem; line-height: 1.4; color: var(--fr-stil); }

/* Op bezoek: één kaart, tekst links en drie knoppen rechts; smal onder elkaar, op hun eigen breedte. */
.kh-bezoek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; padding: 20px 22px; }

.kh-bezoek-tekst { flex: 1 1 18rem; min-width: 0; }

#fr-main .kh-bezoek-tekst h2 { margin: 0 0 6px; font: 600 1.3rem/1.2 var(--fr-serif); color: var(--fr-tekst); }

.kh-bezoek-tekst p { margin: 0; max-width: 48ch; font-size: 0.92rem; color: var(--fr-stil); }

.kh-bezoek-knoppen { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }

/* De KNMI-waarschuwing onder de tekening, in de kleur van de code (letterlijk uit de feed). */
.kh-knmi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: var(--fr-hoek-knop);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--fr-tekst);
}

.kh-knmi.is-geel { border-color: #C9A000; background: color-mix(in srgb, #F2C200 22%, var(--fr-kaart)); }

.kh-knmi.is-oranje { border-color: #D26A00; background: color-mix(in srgb, #F28C00 24%, var(--fr-kaart)); }

.kh-knmi.is-rood { border-color: #B8281C; background: color-mix(in srgb, #D8261A 22%, var(--fr-kaart)); }

.kh-knmi-code { font-weight: 800; }

/* In inktkleur: gedempt haalt op het vlak van code rood de 4,5:1 niet. */
.kh-knmi-bron { margin-left: auto; font: 700 0.7rem/1.4 var(--fr-sans); letter-spacing: 0.08em; color: var(--fr-tekst); }

@media (max-width: 719px) {
    /* Een tikvlak van 44 px zonder dat de kop hoger wordt: het vlak steekt boven en onder uit. Zo staan
       de koppen met en zonder doorklik even hoog. */
    .kh-sechead-meer { position: relative; }
    .kh-sechead-meer::after { content: ""; position: absolute; inset: -6px -4px; }
    .kh-knop { min-height: 44px; }
}

@media (max-width: 640px) {
    .kh-raster:not(.kh-raster-vast) { grid-template-columns: minmax(0, 1fr); }
    .kh-agenda-regel { grid-template-columns: 82px minmax(0, 1fr); }
    .kh-agenda-plek { grid-column: 2; max-width: none; text-align: left; }
}

/* Een telefoon met flink ingezoomde letters (320 px bij 160%): dan ook het prikbord onder elkaar. */
@media (max-width: 359px) {
    .kh-raster-vast { grid-template-columns: minmax(0, 1fr); }
    .kh-112-rij { grid-template-columns: 44px minmax(0, 1fr); }
    .kh-112-teken { display: none; }
}

/* Kort nieuws bij ingezoomd beeld (375 px op 160% is 234 px): de foto boven de tekst. Ernaast bleef er
   70 px over voor de kop, en brak elk woord in stukken. Een gewone telefoon van 320 px houdt de foto
   ernaast (150 px tekst). */
@media (max-width: 299px) {
    .kh-nieuwskaart { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .kh-nieuws-foto { width: 100%; }
}

/* Het kaartje "nu" (dorpsapp/nu_kaart.php, v014.11.474): de tijd, de datum en het weer, als HTML over een
   tekening die zelf geen kaartje heeft (bij julianadorp.nl het Dorpsgezicht). Standaard linksboven in de
   tekening; het thema kan het verplaatsen. Een beetje doorzichtig, zodat de lucht erdoorheen schemert, en
   geen doel voor een klik: de tekening zelf is de knop naar de grote stand. Op een telefoon één regel met
   het weer en de tijd (sectie 8), zoals de regel op het Dijkprofiel van kolhorn.nl. */
.kh-nu {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    display: grid;
    justify-items: start;
    row-gap: 1px;
    max-width: min(15rem, calc(100% - 9rem));
    padding: 0.45rem 0.75rem 0.5rem;
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-knop);
    background: color-mix(in srgb, var(--fr-kaart) 84%, transparent);
    color: var(--fr-tekst);
    font: 600 0.72rem/1.3 var(--fr-sans);
    pointer-events: none;
}

.kh-nu-kop { font: 800 0.6rem/1.3 var(--fr-sans); letter-spacing: 0.14em; color: var(--fr-groen); }

.kh-nu-klok { display: flex; align-items: baseline; gap: 0.35rem; }

.kh-nu-tijd { font: 600 1.3rem/1.1 var(--fr-serif); font-variant-numeric: tabular-nums; }

.kh-nu-dagdeel,
.kh-nu-datum,
.kh-nu-sub { font-size: 0.68rem; color: var(--fr-stil); }

.kh-nu-weer {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    width: 100%;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--fr-rand);
}

.kh-nu-teken { flex: none; }

.kh-nu-temp { flex: none; font: 600 1.05rem/1 var(--fr-serif); }

.kh-nu-oms { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── 8. De voorpagina op een telefoon: het paneel met de ondernemers ────────────────────────
   Terug in v014.11.429, met dezelfde maten als tot v014.11.427. De blokken onder het paneel zijn
   dezelfde als op een breed scherm. Dit blok staat ná de basisregels van .kh-sec en .kh-kaart: even
   zware regels die later staan winnen, en dan verloor bijvoorbeeld de ruimte in het paneel. */

/* De telling in de kop en de voet onder het paneel horen bij de telefoon. Op een breder scherm staan
   alle kaarten in beeld en staat de doorklik al in de kop. */
@media (min-width: 720px) {
    .kh-open-telling,
    .kh-open-voet { display: none; }
}

@media (max-width: 719px) {

    /* 3. Het ondernemersblok is een wit paneel dat over de tekening heen schuift: van rand tot rand,
          ronde bovenhoeken, en de kop compact met een groen stipje ervoor. */
    .kh-open {
        position: relative;
        /* Boven de doeken van de tekening (laag 2); anders tekent het water over de ronde hoeken. */
        z-index: 3;
        margin-inline: -1.25rem;
        padding: 0.9rem 1.25rem 0;
        gap: 0.6rem;
        background: var(--fr-kaart);
        border-top: 1px solid var(--fr-rand);
        border-bottom: 1px solid var(--fr-rand);
        border-radius: 1.1rem 1.1rem 0 0;
    }
    /* De telling mag onder de titel zakken als ze samen niet op één regel passen (grote letters, of een
       langere titel in het beheer); anders brak de titel midden in een woord. */
    .kh-open .kh-sechead {
        align-items: center;
        gap: 0.3rem 0.5rem;
        flex-wrap: wrap;
        padding: 0;
        border: 0;
    }
    /* De doorklik staat hier niet in de kop maar als voet onder het paneel; in de kop staat rechts de
       telling: hoeveel van de kaarten open zijn, met de veegpijltjes erachter. */
    .kh-open .kh-sechead-meer { display: none; }
    .kh-open-telling {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex: none;
        margin-left: auto;
        font: 600 0.72rem/1 var(--fr-sans);
        color: var(--fr-stil);
        white-space: nowrap;
    }
    #fr-main .kh-open .kh-sechead h2 {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        font-weight: 700;
        font-size: 1.15rem;
    }
    .kh-open .kh-sechead h2::before {
        content: "";
        flex: none;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--fr-open-stip);
    }

    /* Een rij om door te vegen in plaats van een kolom: zo zie je er twee en houd je de rest van de
       pagina. Het volgende kaartje steekt er half uit en de rand vervaagt; de vervaging vangt geen
       vingers. De wrapper draagt die vervaging, want wat absoluut in een veegbaar element staat, veegt
       mee. */
    .kh-open-rail { position: relative; margin-inline: -1.25rem; }
    .kh-open-rail::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 2.2rem;
        pointer-events: none;
        background: linear-gradient(to right, transparent, var(--fr-kaart));
    }
    .kh-open .kh-raster {
        display: flex;
        gap: 0.7rem;
        padding: 0 1.25rem 0.2rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1.25rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .kh-open .kh-raster::-webkit-scrollbar { display: none; }

    /* De kaartjes: op het papierkleurige vlak, de naam bovenaan, daaronder in het groen tot hoe laat de
       zaak open is (of gedempt wanneer hij weer opengaat), en de rubriek met het adres op één regel. */
    .kh-open .kh-kaart {
        flex: 0 0 auto;
        width: 12.5rem;
        gap: 0;
        padding: 0.7rem 0.8rem;
        border-radius: 0.8rem;
        background: var(--fr-bg);
        scroll-snap-align: start;
    }
    .kh-open .kh-klik-a::after { border-radius: 0.8rem; }
    /* Het papierkleurige vlak hierboven staat na .kh-klik:hover en zou die tint anders overschrijven. */
    .kh-open .kh-klik:hover { background-color: color-mix(in srgb, var(--fr-groen) 7%, var(--fr-bg)); }
    /* De naam mag twee regels worden en breekt op een afbreekpunt; op één regel met afkappen werd
       "Hupneke" uit "Hup Neke", en dat is de naam van iemands zaak. */
    #fr-main .kh-open .kh-kaart-titel {
        order: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font: 700 1rem/1.2 var(--fr-serif);
    }
    .kh-open .kh-kaart-tekst {
        order: 1;
        margin-top: 0.25rem;
        font: 600 0.78rem/1.3 var(--fr-sans);
        color: var(--fr-stil);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Groen alleen bij een zaak die echt open is. "Nu open" of "Gesloten" staat er voor het oog niet bij
       (het stipje bij de kop en het rondje zeggen het), maar een schermlezer hoort het wel. */
    .kh-open .kh-kaart-tekst.is-open { color: var(--fr-open-t); }
    .kh-open .kh-open-woord {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    /* Het open rondje voor een gesloten zaak, tegenover de gevulde stip bij de kop. */
    .kh-open .kh-kaart-tekst.is-dicht::before {
        content: "";
        display: inline-block;
        width: 0.45rem;
        height: 0.45rem;
        margin-right: 0.3rem;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        vertical-align: 0.05em;
    }
    .kh-open .kh-kaart-soort {
        order: 2;
        margin-top: 0.15rem;
        font: 400 0.7rem/1.4 var(--fr-sans);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fr-stil);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: normal;
    }
    .kh-open .kh-uitlabel { order: 3; }

    /* De voet: één regel over de volle breedte van het paneel, naar de hele gids. */
    .kh-open-voet {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        min-height: 44px;
        margin-inline: -1.25rem;
        padding: 0.7rem 1.25rem;
        border-top: 1px solid var(--fr-rand);
        background: var(--fr-bg);
        font: 700 0.85rem/1.3 var(--fr-sans);
        color: var(--fr-groen);
        text-decoration: none;
    }
    .kh-open-voet:hover { background: color-mix(in srgb, var(--fr-groen) 7%, var(--fr-bg)); }
    /* Naar binnen: de voet loopt van rand tot rand, een ring erbuiten viel links en rechts uit beeld. */
    .kh-open-voet:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: -2px; }
    /* Zonder voet (de gids staat uit) raakten de kaartjes bijna de onderrand van het paneel. */
    .kh-open-zonder-voet { padding-bottom: 0.9rem; }
    .kh-open-voet-pijl { font-size: 1.2rem; line-height: 1; }

    /* Het kaartje "nu" als één regel linksboven in de tekening: het weer in kleur en de tijd, op een licht
       plaatje zodat hij leesbaar blijft als de zon of een wolk erachter langs gaat. Rechts blijft ruimte voor
       de knop Groter. */
    .kh-nu {
        top: 0.45rem;
        left: 0.4rem;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        max-width: calc(100% - 7.5rem);
        padding: 0.15rem 0.55rem 0.15rem 0.4rem;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--fr-kaart) 86%, transparent);
        font: 600 0.78rem/1.3 var(--fr-sans);
    }
    .kh-nu-kop,
    .kh-nu-dagdeel,
    .kh-nu-datum,
    .kh-nu-sub { display: none; }
    .kh-nu-weer { order: 1; width: auto; margin: 0; padding: 0; border: 0; }
    .kh-nu-klok { order: 2; flex: none; }
    .kh-nu-tijd { font: inherit; }
    .kh-nu-temp { font: 600 0.95rem/1.1 var(--fr-serif); }
    .kh-nu:has(.kh-nu-weer) .kh-nu-klok::before { content: "·"; margin-right: 0.3rem; color: var(--fr-stil); }
}

/* ── 9. De rubriekpagina's en /112-meldingen (v014.11.430, 112-meldingen.dc.html) ─────────────
   De kop en de inleiding zoals in alle rubriekmockups, dus voor nieuws, agenda, prikbord en 112 tegelijk.
   De 112-pagina heeft een eigen sjabloon (themes/modules/stad/dorp/meldingen.php) met dezelfde rijen als de
   voorpagina (sectie 7); hier alleen wat die pagina extra heeft: de dag als kop boven een eigen kaart, de rij als
   knop naar het venster, de lege staten en het blok "Over deze meldingen". */
.fr-rubriek-kop h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }

.fr-rubriek-intro { font-size: 1.05rem; color: var(--fr-tekst); }

/* stad/public.css maakt kop en inleiding van de 112-pagina tot 1024 px kleiner (28 en 14 px) voor alle dorpen,
   en laadt na dit blad; met #fr-main erbij blijven ze hier zoals op de andere rubriekpagina's. */
body:has(.dorps-onderbalk) #fr-main .kh-112-pagina .fr-rubriek-kop h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }

body:has(.dorps-onderbalk) #fr-main .kh-112-pagina .fr-rubriek-intro { font-size: 1.05rem; line-height: 1.55; }

/* De filterknoppen (§7): een groene rand bij aanwijzen en een groene focusring, overal op de site. */
.fr-chip:hover { border-color: var(--fr-groen); }

.fr-chip:focus-visible,
.fr-bronkiezer summary:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; }

/* Het stipje per hulpdienst, zoals het ontwerp: 7 px, pannenrood, oker en waterblauw. */
.kh-filters .fr-chip-stip { width: 7px; height: 7px; }

.kh-stip-brandweer { background: var(--fr-terra); }

.kh-stip-ambulance { background: #C98F2A; }

.kh-stip-politie { background: var(--fr-geel); }

.kh-stip-overig { background: var(--fr-stil); }

/* Vier knoppen: op een telefoon lopen ze door naar een tweede regel (ontwerp), in plaats van opzij te
   schuiven zoals de langere rijen van de andere rubrieken. */
@media (max-width: 640px) {
    .kh-filters { flex-wrap: wrap; overflow-x: visible; }
}

/* Per dag een kop en een eigen kaart. */
#fr-main .kh-daglabel {
    margin: 22px 0 8px;
    font: 700 0.9rem/1.3 var(--fr-serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-tekst);
}

/* De hele rij opent het venster (de knop ligt eroverheen, stad/public.css). */
.kh-112-rij.heeft-venster { transition: background-color 0.15s; }

.kh-112-rij.heeft-venster:hover { background-color: color-mix(in srgb, var(--fr-groen) 7%, var(--fr-kaart)); }

.kh-112-rij .fr-112-regel-knop:focus-visible { outline-color: var(--fr-groen); }

/* De lege staten: een keuze zonder meldingen, geen meldingen, of de bron die er even uit ligt. */
.kh-leeg-keuze,
.kh-leeg-blok {
    margin: 14px 0 0;
    padding: 26px 20px;
    border: 1px dashed var(--fr-stil);
    border-radius: var(--fr-hoek-knop);
    font-size: 0.92rem;
    text-align: center;
    color: var(--fr-stil);
}

.kh-leeg-blok { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 34px; }

.kh-leeg-blok b { color: var(--fr-tekst); }

/* "Over deze meldingen" en de bronvermelding bij het nieuws: een kaart met het groene streepje (kh-plank in
   het ontwerp). Via #fr-main, want stad/public.css laadt na dit blad. */
#fr-main .stad-verantwoording {
    position: relative;
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-knop);
    background: var(--fr-kaart);
    font: 400 0.92rem/1.55 var(--fr-sans);
    color: var(--fr-tekst);
}

#fr-main .stad-verantwoording::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 14px;
    width: 26px;
    height: 3px;
    background: var(--fr-groen);
}

#fr-main .stad-verantwoording h2 { margin: 0; font: 700 1rem/1.3 var(--fr-sans); letter-spacing: 0; color: var(--fr-tekst); }

#fr-main .stad-verantwoording p { margin: 0; }

#fr-main .stad-verantwoording-contact { padding-top: 0; border-top: 0; }

#fr-main .stad-verantwoording-bronnen { padding: 0; background: none; font-size: 0.75rem; color: var(--fr-stil); }

#fr-main .stad-verantwoording-label { color: inherit; }

/* De uitnodiging voor de app en de storingsregel zijn in stad/public.css elk een eigen kaartje; in deze kaart
   is de uitnodiging een gewone alinea, en houdt de storingsregel alleen zijn gekleurde rand. */
#fr-main .stad-verantwoording .stad-melding-app { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; }

#fr-main .stad-verantwoording .stad-melding-storing { margin: 0; font: inherit; }

/* De bedrijvengids: "nog niet opgegeven" gedempt en schuin (kh-empty-val in het ontwerp), en de filterknoppen
   rond met een groene rand bij aanwijzen, zoals de andere filters (§7). Via #fr-main: companies/public.css
   laadt na dit blad. */
#fr-main .bcm-leeg-waarde { font-style: italic; color: var(--fr-stil); }

#fr-main .bcm-card__status.bcm-leeg-waarde { font-size: 0.8rem; }

#fr-main .bcm-chip,
#fr-main .bcm-toggle,
#fr-main .bcm-select { border-radius: 999px; }

#fr-main .bcm-chip:hover,
#fr-main .bcm-toggle:hover,
#fr-main .bcm-select:hover { border-color: var(--fr-groen); }

/* De periodeknoppen van de agenda: 36 px, 600 .86rem, groene rand bij aanwijzen en een groene focusring. Op
   een telefoon blijven ze 44 px hoog (tikvlak). */
.da-agenda .da-chip { min-height: 36px; padding: 0 16px; font: 600 0.86rem/1 var(--fr-sans); border-radius: 999px; }

.da-agenda .da-chip:hover { border-color: var(--fr-groen); }

.da-agenda .da-chip:focus-visible { outline: 2px solid var(--fr-groen); outline-offset: 2px; }

@media (max-width: 719px) {
    .da-agenda .da-chip { min-height: 44px; }
}

/* Tikvlakken van minstens 44 px op een telefoon (prompt: eindcontrole), voor wat daar nog kleiner was: het merk
   in de voet, de filterknoppen van nieuws en prikbord (de 112-pagina had ze al), de knoppen bij de pakketten en
   op een bedrijfspagina de knoppen in het contactblok en de claimknop. */
@media (max-width: 719px) {
    .kh-voet-merk { min-height: 44px; }
    .fr-chip { height: auto; min-height: 44px; }
    #fr-main .bcm-plan__cta { min-height: 44px; }
    #fr-main .bcm-block .bcm-btn { min-height: 44px; }
    #fr-main .bcm-block__claim-cta { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Het venster: de P2000-tekst in een vaste letterbreedte, zoals het ontwerp. Het venster hangt aan <body>. */
body .stad-venster-kop { font: 600 0.95rem/1.5 var(--fr-mono); }

/* ── 10. Home aanpassen: wat de bezoeker heeft uitgezet ───────────────────────────────
   Het kenmerk op <html> zet dorpsapp/home_vroeg.php vóór de eerste render, en dorpsapp.js houdt het
   bij. Eén regel per onderdeel; de sleutels staan in dorpsapp/home_onderdelen.php. Alleen tot 1024 px:
   daar staat de schuifknop rechtsboven waarmee je het terugzet. Op een breder scherm (een tablet
   liggend, een venster dat weer breed wordt) staat alles, want daar is die knop er niet. */
.kh-home-leeg { display: none; }

@media (max-width: 1024px) {
    html[data-kh-home-uit~="weer"] [data-kh-home="weer"],
    html[data-kh-home-uit~="ondernemers"] [data-kh-home="ondernemers"],
    html[data-kh-home-uit~="agenda"] [data-kh-home="agenda"],
    html[data-kh-home-uit~="nieuws"] [data-kh-home="nieuws"],
    html[data-kh-home-uit~="prikbord"] [data-kh-home="prikbord"],
    html[data-kh-home-uit~="verenigingen"] [data-kh-home="verenigingen"],
    html[data-kh-home-uit~="handig"] [data-kh-home="handig"],
    html[data-kh-home-uit~="m112"] [data-kh-home="m112"],
    html[data-kh-home-uit~="bezoek"] [data-kh-home="bezoek"] { display: none; }
    html[data-kh-home-leeg] .kh-home-leeg {
        display: block;
        padding: 24px 20px;
        border: 1px dashed var(--fr-rand);
        border-radius: 18px;
        text-align: center;
        color: var(--fr-stil);
    }
}

.kh-home-leeg strong { display: block; margin-bottom: 4px; color: var(--fr-tekst); font: 700 1rem/1.3 var(--fr-sans); }

.kh-home-leeg p { margin: 0; }

.kh-home-leeg button {
    min-height: 44px;
    margin-top: 14px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: var(--fr-groen);
    color: var(--fr-knoptekst);
    font: 800 0.95rem/1.2 var(--fr-sans);
    cursor: pointer;
}

.kh-home-leeg button:focus-visible { outline: 2px solid var(--fr-tekst); outline-offset: 2px; }

/* ── 11. De pagina's op een telefoon (v014.11.474) ───────────────────────────────────────
   Stond tot v014.11.474 in het theme.css van kolhorn; elk dorp op de gedeelde indeling heeft dezelfde pagina's
   (Over ons, contact, historie, de accountschermen, het paneel met de weetjes), dus nu hier. De rasters worden op
   een telefoon één kolom, niets is breder dan de kolom (ook niet bij 160% zoom) en elk tikvlak is minstens 44 px. */
@media (max-width: 719px) {
    .fr-overons-kaarten,
    .fr-colofon-feiten,
    .fr-tweeluik,
    .fr-auth-rij,
    .fr-modal-kaart,
    .fr-modal-legenda { grid-template-columns: minmax(0, 1fr); }
    .fr-modal-kaart { max-height: 92svh; }
    .fr-modal-schijf { width: 220px; height: 220px; }
    .fr-modal-schijf svg { width: 220px; height: 220px; }
    .fr-modal-links { padding: 1.5rem 1.25rem 1.25rem; }
    .fr-modal-rechts { padding: 1.4rem 1.25rem 1.5rem; }

    .fr-nieuwskaart { flex-direction: column; }
    .fr-nieuwskaart-beeld { flex: 0 0 auto; width: 100%; height: 10rem; }
    .fr-briefjes,
    .fr-clubdetail-feiten,
    .fr-veld-rij { grid-template-columns: minmax(0, 1fr); }

    .fr-titel { font-size: 1.85rem; }
    .fr-artikel .fr-titel { font-size: 1.85rem; }
    .fr-hist-uitgelicht-links a { flex: 1 1 100%; text-align: center; }
}

/* Wie beweging heeft uitgezet, krijgt geen animaties en overgangen. De tekening van het dorp regelt dat zelf in
   zijn script (één stilstaand beeld). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Het contactformulier en de CMS-infopagina blijven gedeeld (daar zitten de validatie en de systeemgegevens in);
   alleen de kop is in deze indeling kleiner. */
.portal-contact-card-v1473 h1 { font-size: 1.5rem; margin: 0 0 0.3rem; }

/* Over ons: de kaarten met waarden hadden een vaste minimumbreedte van 340 px (portal-shared.css) en liepen bij
   160% zoom (234 px) 126 px buiten beeld. Hier nooit breder dan de kolom. */
#fr-main .fr-over-waarden { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
/* Eindcontrole (prompt): bij 160% zoom (375 px wordt 234 px) liepen kaarten en velden met een vaste
   minimumbreedte uit de gedeelde bladen buiten beeld. Hier nooit breder dan de kolom. */
#fr-main .fr-weetjes-rij { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
body .portal-contact-card-v1473 .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
#fr-main .fr-hist-uitgelicht-links { flex: 1 1 auto; min-width: 0; }

/* Tikvlakken van minstens 44 px op een telefoon (prompt: eindcontrole), voor wat daar nog kleiner was op de
   pagina's van de dorpen: de knoppen en links van inloggen en registreren, de verzendknop van het
   contactformulier, de knop op de 404-pagina, de links op Over dit CMS en de knoppen onder de uitgelichte
   geschiedenis. Het merk in de voet, de filterknoppen en de knoppen in de bedrijvengids staan hierboven. */
@media (max-width: 719px) {
    .fr-ww-kijk { min-width: 44px; min-height: 44px; }
    .fr-formulier button[type="submit"],
    #btncontact { min-height: 44px; }
    .fr-auth-wissel .fr-auth-naar-home { display: inline-flex; align-items: center; min-height: 44px; }
    .fr-checkregel { min-height: 44px; align-items: center; }
    .fr-checkregel input { width: 22px; height: 22px; margin-top: 0; }
    .fr-vangnet-knop { min-height: 44px; }
    .ci-maker-links a { min-height: 44px; }
    #fr-main .fr-hist-uitgelicht-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
}