/* ════════════════════════════════════════════════════════════
   Wieringerwerf.nl — het dorpsplein van de Wieringermeer

   Het thema draait op een eigen schil (ThemeShellService::CUSTOM_SHELLS), dus dit
   bestand is de complete stijl: er ligt geen portal-CSS onder om op voort te bouwen.
   Het skelet is dat van Franeker (drie kolommen, rails, eigen sjabloon per pagina);
   de huisstijl is die van de tekening "Polderlicht v2": papier, polderblauw en
   graangeel, de kavelstreep onder de kop, de 1930-polderschijf, en de vier dorpen
   elk met een eigen kleur.

   Opbouw:
     1. Tokens (dag, nacht, auto) en letterschaal
     2. Basis en skelet
     3. Kop en kavelstreep
     4. Rails
     5. Bouwstenen: kaarten, kickers, knoppen, sectiekoppen
     6. Voorpagina
     7. Rubrieken (de stadsrubrieken-module in dit skelet)
     8. Redactionele pagina's
     9. De bedrijvenmodule in dit skelet
    10. Formulieren en inlogschermen
    11. Responsief gedrag
    12. Tweestapsverificatie
    13. Contact en CMS-info
    14. Honeypot
    15. CMS-infopagina
    16. Onderbalk en uitschuifpanelen (mobiel)
    17. Het weerwidget in de polderstijl
    18. Zoeken
    19. De voet: dijklijn, kavellijnen en de stichtingsjaren

   De namen van de tokens en klassen dragen nog het fr-voorvoegsel van het skelet.
   Dat is bewust: de gedeelde stijl van de stadsrubrieken leest var(--fr-*) en pikt zo
   de huisstijl op zodra hij in dit skelet draait. Hernoemen breekt de rubriekpagina's.

   Kleuren komen letterlijk uit de tekening. Het contrast is nagemeten in beide standen
   (zie UPGRADE-LOG-WW.md): tekst haalt 4,5:1, grote of vette uitzonderingen 3:1.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────── */

:root {
    /* De tekening: dag */
    --fr-bg: #F7F5EF;          /* papier */
    --fr-kaart: #FFFFFF;       /* het vlak van een kaart */
    --fr-tekst: #24303B;       /* lopende tekst en koppen */
    --fr-stil: #5C6873;        /* gedempte tekst */
    --fr-rand: #E6E2D7;        /* lijnen en randen */
    --fr-blauw: #1D4E79;       /* polderblauw: koppen, knoppen, links */
    --fr-blauwh: #163A5B;      /* polderblauw bij hover */
    --fr-geel: #E8A93B;        /* graangeel: alleen accent, nooit tekst op licht */
    --fr-groen: #3E7A4E;
    --fr-terra: #B65C38;
    --fr-rood: #C0392B;
    --fr-amber: #D08700;
    --fr-note: #FFFDF5;
    --fr-ph: #EBE7DA;
    --fr-tint: rgba(29, 78, 121, 0.07);
    --fr-knoptekst: #FFFFFF;
    --fr-voet: #142E47;        /* de voet, het weer en de donkere panelen */
    /* De vier dorpen: stip en tekstkleur */
    --fr-ww: #1D4E79; --fr-mm: #3E7A4E; --fr-sd: #E8A93B; --fr-ko: #B65C38;
    --fr-ww-t: #1D4E79; --fr-mm-t: #2F5E3C; --fr-sd-t: #7A5410; --fr-ko-t: #8C3F22;
    --fr-groen-t: #2F5E3C;
    /* Vaste kleuren van de donkere vlakken (voet, weer, paneel), in dag én nacht gelijk */
    --fr-voet-tekst: #D3E0EC;
    --fr-voet-stil: #A9BCCE;
    --fr-voet-lijn: rgba(233, 236, 240, 0.14);
    --fr-badge-t: #3A2B08;     /* de letter op een graangele badge */
    --fr-rand3: #CFC9BA;       /* de iets zwaardere lijn (schuifgreep, invoerranden bij focus) */

    /* Afgeleiden met de tokennamen van het skelet, zodat de gedeelde stadsrubrieken-stijl
       (var(--fr-*)) en de sjablonen zonder omschrijven de polderkleuren krijgen. */
    --fr-rand2: var(--fr-rand);
    --fr-lijn: var(--fr-rand);
    --fr-dubbel: var(--fr-tekst);
    --fr-kop: var(--fr-tekst);
    --fr-tekst2: var(--fr-stil);
    --fr-tekst3: var(--fr-stil);
    --fr-stil2: var(--fr-stil);
    --fr-messing: var(--fr-geel);
    --fr-messingdonker: var(--fr-sd-t);
    --fr-kicker: var(--fr-stil);
    --fr-badge-b: var(--fr-geel);
    --fr-link: var(--fr-blauw);
    --fr-knop: var(--fr-blauw);
    --fr-knophover: var(--fr-blauwh);
    --fr-actie: var(--fr-blauw);
    --fr-actiehover: var(--fr-blauwh);
    --fr-actietekst: var(--fr-knoptekst);
    --fr-nacht: var(--fr-voet);
    --fr-open-t: var(--fr-groen-t);
    --fr-open-b: color-mix(in srgb, var(--fr-groen) 16%, transparent);
    --fr-open-r: color-mix(in srgb, var(--fr-groen) 16%, transparent);
    --fr-dicht-t: var(--fr-rood);
    --fr-dicht-b: color-mix(in srgb, var(--fr-rood) 14%, transparent);
    --fr-dicht-r: color-mix(in srgb, var(--fr-rood) 14%, transparent);
    --fr-op-tint: var(--fr-sd-t);
    --fr-cat-winkel: var(--fr-sd-t);
    --fr-cat-horeca: var(--fr-terra);
    --fr-cat-zorg: var(--fr-groen-t);
    --fr-cat-sport: var(--fr-blauw);
    --fr-cat-dienst: var(--fr-ko-t);
    --fr-cat-verblijf: var(--fr-mm-t);
    --fr-tint-winkel: color-mix(in srgb, var(--fr-geel) 14%, transparent);
    --fr-tint-horeca: color-mix(in srgb, var(--fr-terra) 12%, transparent);
    --fr-tint-zorg: color-mix(in srgb, var(--fr-groen) 12%, transparent);
    --fr-tint-sport: var(--fr-tint);
    --fr-tint-dienst: color-mix(in srgb, var(--fr-terra) 8%, transparent);
    --fr-tint-verblijf: color-mix(in srgb, var(--fr-groen) 8%, transparent);
    /* De stadsrubrieken-stijl vraagt ook deze drie */
    --fr-radius: 12px;
    --fr-vlak: var(--fr-kaart);
    --fr-papier: var(--fr-kaart);

    --fr-serif: "Bitter", Georgia, "Times New Roman", serif;
    --fr-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fr-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Het skelet: drie kolommen binnen 95rem, precies de tekening */
    --fr-rail-links: 18rem;
    --fr-rail-rechts: 20rem;
    --fr-gap: 0px;
    --fr-max: 100%;          /* de site gebruikt de volle breedte van het scherm (keuze Theo, 16 aug 2026) */
    --fr-hoek: 12px;           /* kaarten */
    --fr-hoek-knop: 10px;      /* knoppen en velden */
    --fr-hoek-klein: 8px;      /* menuregels, kleine knoppen */
}

/* Nachtstand: de tweede tokenlade van de tekening. */
html[data-thema="donker"] {
    --fr-bg: #111823;
    --fr-kaart: #1A222E;
    --fr-tekst: #E9ECF0;
    --fr-stil: #9AA6B1;
    --fr-rand: #2A3441;
    --fr-blauw: #8AB2DF;
    --fr-blauwh: #A6C6EC;
    --fr-geel: #DCA84B;
    --fr-groen: #7CAB77;
    --fr-terra: #D08A6B;
    --fr-rood: #E0776A;
    --fr-amber: #E3AE4F;
    --fr-note: #262B22;
    --fr-ph: #232E3C;
    --fr-tint: rgba(138, 178, 223, 0.12);
    --fr-knoptekst: #0F1621;
    --fr-voet: #0D1420;
    --fr-ww: #8AB2DF; --fr-mm: #7CAB77; --fr-sd: #DCA84B; --fr-ko: #D08A6B;
    --fr-ww-t: #A9C7E8; --fr-mm-t: #A3CBA0; --fr-sd-t: #E5C071; --fr-ko-t: #E0A488;
    --fr-groen-t: #A3CBA0;
    --fr-rand3: #3A4655;
}

@media (prefers-color-scheme: dark) {
    html[data-thema="auto"] {
        --fr-bg: #111823;
        --fr-kaart: #1A222E;
        --fr-tekst: #E9ECF0;
        --fr-stil: #9AA6B1;
        --fr-rand: #2A3441;
        --fr-blauw: #8AB2DF;
        --fr-blauwh: #A6C6EC;
        --fr-geel: #DCA84B;
        --fr-groen: #7CAB77;
        --fr-terra: #D08A6B;
        --fr-rood: #E0776A;
        --fr-amber: #E3AE4F;
        --fr-note: #262B22;
        --fr-ph: #232E3C;
        --fr-tint: rgba(138, 178, 223, 0.12);
        --fr-knoptekst: #0F1621;
        --fr-voet: #0D1420;
        --fr-ww: #8AB2DF; --fr-mm: #7CAB77; --fr-sd: #DCA84B; --fr-ko: #D08A6B;
        --fr-ww-t: #A9C7E8; --fr-mm-t: #A3CBA0; --fr-sd-t: #E5C071; --fr-ko-t: #E0A488;
        --fr-groen-t: #A3CBA0;
        --fr-rand3: #3A4655;
    }
}

/* Letterschaal uit de kop: normaal, groter, grootst (100 %, 112,5 %, 125 %, zoals de
   tekening). Met zoom, en niet met de wortelgrootte: zo schalen ook de gedeelde module-
   pagina's mee, die in pixels zijn geschreven. */
/* De letterschaal komt uit _local_portal/css/letterschaal.css: daar staan de drie standen en hun
   percentages, voor elke site hetzelfde. Hier staat alleen WAT er meeschaalt. Zoom en niet de
   wortelgrootte, want dan schaalt ook alles wat in pixels is opgeschreven mee. */
body { zoom: var(--letterschaal, 1); }

/* ── 2. Basis en skelet ──────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.fr-body {
    background: var(--fr-bg);
    color: var(--fr-tekst);
    font-family: var(--fr-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Laag houden: `body.fr-body a` zou specifieker zijn dan een knopklasse en dan krijgt
   een gekleurde knop alsnog linkblauwe tekst. Dit bestand laadt alleen bij dit thema. */
a { color: var(--fr-link); }
a:hover { color: var(--fr-blauwh); }
::selection { background: rgba(232, 169, 59, 0.35); }
::placeholder { color: var(--fr-stil); opacity: 0.75; }

img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--fr-geel);
    outline-offset: 2px;
    border-radius: 4px;
}

.fr-skip {
    position: absolute;
    left: 1rem;
    top: -3.5rem;
    z-index: 2000;
    background: var(--fr-blauw);
    color: var(--fr-knoptekst);
    padding: 0.6rem 1.1rem;
    font: 600 15px/1.2 var(--fr-sans);
    border-radius: 0 0 10px 10px;
    text-decoration: none;
}
.fr-skip:focus { top: 0; }

/* De drie kolommen: linkerrail, midden, rechterrail. De rails tekenen zelf hun
   scheidingslijn over de volle hoogte (align stretch); wat erin staat kleeft (sticky)
   via .fr-rail-inhoud, zie de rails hieronder. */
[data-fr-body] {
    display: grid;
    grid-template-columns: var(--fr-rail-links) minmax(0, 1fr) var(--fr-rail-rechts);
    gap: var(--fr-gap);
    align-items: stretch;
    max-width: var(--fr-max);
    margin: 0 auto;
    width: 100%;
    flex: 1 0 auto;
}

[data-fr-rail] {
    min-width: 0;
    padding: 1.25rem 0.9rem 1.5rem;
}
[data-fr-rail]:first-child { border-right: 1px solid var(--fr-rand); }
[data-fr-rail]:last-child { border-left: 1px solid var(--fr-rand); padding: 1.25rem 1rem 1.5rem; }
.fr-rail-inhoud {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#fr-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 1.6rem 2rem 3.5rem;
}

/* De site gebruikt de volle breedte, dus ook de tekst in de middenkolom: geen leesbreedte-grens
   meer (keuze Theo, 16 aug 2026). `text-wrap: pretty` houdt de laatste regel netjes. */
#fr-main p { text-wrap: pretty; }
#fr-main h1, #fr-main h2, #fr-main h3 { text-wrap: pretty; }

/* ── 3. Kop en kavelstreep ───────────────────────────────────────── */

.fr-header {
    background: var(--fr-kaart);
    border-bottom: 1px solid var(--fr-rand);
}

[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: 4.5rem;
}

.fr-merk {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--fr-tekst);
    min-width: 0;
}
.fr-merk:hover { color: var(--fr-tekst); }
.fr-merkteken { flex: none; width: 36px; height: 36px; }
.fr-merk-tekst { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fr-merk-naam {
    display: block;
    font: 700 1.25rem/1.2 var(--fr-serif);
    color: var(--fr-tekst);
    letter-spacing: -0.01em;
}
.fr-merk-staart { color: var(--fr-sd-t); } /* de tekening zet hier het graangeel, maar dat haalt op licht 2,1:1; de goudtekst-toon van de tekening (Slootdorp-tekst) haalt 6,9:1 en blijft goud */
.fr-merk-sub {
    display: block;
    font: 400 0.75rem/1.2 var(--fr-sans);
    color: var(--fr-stil);
}

[data-fr-nav] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.9rem;
    flex-wrap: wrap;
}
[data-fr-nav] a {
    position: relative;
    display: inline-block;
    padding: 0.4rem 0;
    font: 600 0.9375rem/1.4 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
    white-space: nowrap;
}
[data-fr-nav] a:hover { color: var(--fr-blauw); }
/* Het gele streepje onder de actieve pagina: 1,4rem breed, gecentreerd, op de onderrand. */
[data-fr-nav] a.is-hier::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 1.4rem;
    height: 3px;
    border-radius: 2px;
    background: var(--fr-geel);
}

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





.fr-thema-knop {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-knop);
    background: var(--fr-kaart);
    color: var(--fr-tekst);
    font: 600 0.875rem/1 var(--fr-sans);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.fr-thema-knop:hover { background: var(--fr-tint); }
.fr-thema-knop svg { width: 18px; height: 18px; flex: none; }
/* Eén knop, drie iconen: het script wisselt data-thema op <html>, de CSS toont het icoon dat erbij hoort. */
.fr-thema-knop [data-fr-thema-icoon] { display: none; }
html[data-thema="auto"] .fr-thema-knop [data-fr-thema-icoon="auto"],
html[data-thema="licht"] .fr-thema-knop [data-fr-thema-icoon="licht"],
html[data-thema="donker"] .fr-thema-knop [data-fr-thema-icoon="donker"] { display: block; }

/* De actieknop in de kop (Inloggen / Beheer): polderblauw, in de nacht lichtblauw met een
   donkere letter, zoals de tekening. */
.fr-knop-primair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    padding: 0 1.15rem;
    font: 700 0.9375rem/1 var(--fr-sans);
    color: var(--fr-actietekst);
    background: var(--fr-actie);
    border: 1px solid var(--fr-actie);
    border-radius: var(--fr-hoek-knop);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    cursor: pointer;
}
.fr-knop-primair:hover { background: var(--fr-actiehover); border-color: var(--fr-actiehover); color: var(--fr-actietekst); }

.fr-knop-secundair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    padding: 0 1.1rem;
    font: 600 0.9rem/1 var(--fr-sans);
    color: var(--fr-blauw);
    background: transparent;
    border: 1px solid var(--fr-blauw);
    border-radius: var(--fr-hoek-knop);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    cursor: pointer;
}
.fr-knop-secundair:hover { background: var(--fr-tint); color: var(--fr-blauw); }

/* De kavelstreep: de smalle band onder de kop. Polderblauw met vier dorpsmarkeringen en
   om de 2,5rem een haarlijn als kavelgrens. Vaste kleuren, in dag en nacht gelijk. */
.fr-dotband,
.fr-kavelstreep {
    height: 5px;
    background-color: #1D4E79;
    background-image:
        linear-gradient(#E8A93B, #E8A93B),
        linear-gradient(#7CAB77, #7CAB77),
        linear-gradient(#8AB2DF, #8AB2DF),
        linear-gradient(#D08A6B, #D08A6B),
        repeating-linear-gradient(90deg, rgba(247, 245, 239, 0.25) 0 1px, transparent 1px 2.5rem);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size: 0.35rem 100%, 0.35rem 100%, 0.55rem 100%, 0.35rem 100%, auto;
    background-position: 14% 0, 36% 0, 66% 0, 84% 0, 0 0;
}

/* ── 4. Rails ────────────────────────────────────────────────────── */

.fr-kaart {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 0.85rem 0.7rem;
}

/* De kickers: kleine koppen boven een blok. Twee smaken, zoals de tekening: de sans-versie
   voor de railkoppen en de mono-versie voor labels en data. */
.fr-kicker {
    font: 700 0.75rem/1.4 var(--fr-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.fr-kicker-mono {
    font: 700 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.fr-kicker-goud { color: var(--fr-sd-t); }
.fr-kicker-dubbel { padding: 0 0.5rem; }

.fr-snelnav ul,
.fr-clubs ul,
.fr-112-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Snelmenu: regels van 2,6rem met een icoon, en een gele linkerbalk plus tint bij de
   actieve pagina. */
.fr-snelnav ul { display: flex; flex-direction: column; gap: 2px; margin-top: 0.5rem; }
.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: 600 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-tint); color: var(--fr-tekst); }
.fr-snelnav li.is-hier a {
    border-left-color: var(--fr-geel);
    background: var(--fr-tint);
    color: var(--fr-blauw);
}
.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: tijd links, dienst en plaats rechts, elk met een stip. */
.fr-112 { padding: 0.9rem 1rem; }
.fr-112-lijst { display: flex; flex-direction: column; margin-top: 0.35rem; }
.fr-112-lijst li {
    display: flex;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--fr-rand);
    align-items: flex-start;
}
.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;
}
.fr-112-tekst { min-width: 0; }
.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);
}
.fr-112-bron {
    margin: 0;
    padding-top: 0.5rem;
    font: 400 0.75rem/1.5 var(--fr-sans);
    color: var(--fr-stil);
}

/* Verenigingen: een groep per dorp, met een mono-kopje in kapitalen en een dorpsstip voor
   elke naam. Op de voorpagina staan de dorpsgroepen achter "Ook in de dorpen". */
.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); }
.fr-clubs-stip {
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--fr-stil);
}
.fr-clubs-groep[data-plaats="wieringerwerf"] .fr-clubs-stip { background: var(--fr-ww); }
.fr-clubs-groep[data-plaats="middenmeer"] .fr-clubs-stip { background: var(--fr-mm); }
.fr-clubs-groep[data-plaats="slootdorp"] .fr-clubs-stip { background: var(--fr-sd); }
.fr-clubs-groep[data-plaats="kreileroord"] .fr-clubs-stip { background: var(--fr-ko); }
.fr-clubs-naam { min-width: 0; }
.fr-clubs-plaats { display: none; }
.fr-pijl { display: none; }
/* De knop "Ook in de dorpen · 13": alleen op de voorpagina, klapt de dorpsgroepen 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; }
/* De ingeklapte samenvattingen voor een telefoon: één regel met de teller (verenigingen)
   en één regel met de temperatuur (weer). Verborgen tot 719px; zie het responsieve blok. */
/* De ingeklapte samenvatting van de verenigingen op een telefoon. */
.fr-clubs-mobiel {
    display: none;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
}
.fr-clubs-mobiel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font: 700 0.75rem/1.4 var(--fr-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.fr-clubs-mobiel[open] summary span:last-child { transform: rotate(180deg); }
.fr-clubs-mobiel-inhoud { padding: 0 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.55rem; }
.fr-clubs-mobiel .fr-clubs-groep ul { display: flex; flex-direction: column; gap: 1px; }
.fr-clubs-mobiel .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-mobiel a,
.fr-clubs-mobiel li > span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    font: 500 0.9rem/1.4 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
}
.fr-clubs-mobiel a:hover { background: var(--fr-tint); color: var(--fr-tekst); }

/* Op een telefoon klapt het weer in tot één regel (details/summary in de rail). */
.fr-weer-mobiel {
    display: none;
    background: var(--fr-voet);
    border-radius: var(--fr-hoek);
    color: var(--fr-voet-tekst);
}
.fr-weer-mobiel summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
}
.fr-weer-mobiel-temp { font: 700 1.25rem/1 var(--fr-serif); color: #FFFFFF; }
.fr-weer-mobiel-desc { font: 400 0.875rem/1.4 var(--fr-sans); color: var(--fr-voet-stil); }
.fr-weer-mobiel-label {
    margin-left: auto;
    font: 400 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-voet-stil);
}
.fr-weer-mobiel .pw-widget { border-radius: 0 0 var(--fr-hoek) var(--fr-hoek); }



/* ── 5. Bouwstenen ───────────────────────────────────────────────── */

.fr-sectie { display: flex; flex-direction: column; gap: 1.1rem; }

/* De sectiekop van de tekening: Bitter, met een lijn van 2px in de tekstkleur eronder. */
.fr-sectiekop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--fr-tekst);
    padding-bottom: 0.45rem;
}
.fr-sectiekop h2 {
    margin: 0;
    font: 700 1.5rem/1.25 var(--fr-serif);
    color: var(--fr-tekst);
}
.fr-sectiekop .fr-meer {
    font: 600 0.9375rem/1 var(--fr-sans);
    color: var(--fr-blauw);
    text-decoration: none;
    white-space: nowrap;
}
.fr-sectiekop .fr-meer:hover { text-decoration: underline; }
/* Een kicker vlak boven een sectiekop, zoals "De Wieringermeerziekte" boven het verenigingsleven. */
.fr-sectie-kicker { margin: 0 0 -0.8rem; cursor: help; }

.fr-titel {
    margin: 0 0 0.6rem;
    font: 700 2.375rem/1.12 var(--fr-serif);
    letter-spacing: -0.01em;
    color: var(--fr-tekst);
}

.fr-prose { font-size: 1rem; line-height: 1.7; color: var(--fr-tekst); }
.fr-prose h2 { font: 700 1.5rem/1.25 var(--fr-serif); color: var(--fr-tekst); margin: 1.8rem 0 0.6rem; }
.fr-prose h3 { font: 700 1.125rem/1.3 var(--fr-serif); color: var(--fr-tekst); margin: 1.4rem 0 0.5rem; }
.fr-prose p { margin: 0 0 0.9rem; text-wrap: pretty; }
.fr-prose ul, .fr-prose ol { margin: 0 0 0.9rem; padding-left: 1.4rem; }
.fr-prose li { margin-bottom: 0.35rem; }
.fr-prose img { border-radius: var(--fr-hoek); }
.fr-prose a { color: var(--fr-blauw); }
/* De eerste alinea van een paginatekst is de introzin: iets groter en gedempt, met een lijn
   eronder, zoals de tekening. */
.fr-prose-lead > p:first-child {
    font: 400 1.0625rem/1.6 var(--fr-sans);
    color: var(--fr-stil);
    border-bottom: 1px solid var(--fr-rand);
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
}
.fr-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; }
.fr-prose th, .fr-prose td { border: 1px solid var(--fr-rand); padding: 0.55rem 0.75rem; text-align: left; }
.fr-prose th { background: var(--fr-bg); font: 600 0.875rem/1.4 var(--fr-sans); }

/* Het label "Uitgelicht": graangeel met een donkere letter, half over de rand van de kaart. */
.fr-badge {
    display: inline-flex;
    align-items: center;
    font: 700 0.625rem/1 var(--fr-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-badge-t);
    background: var(--fr-geel);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

/* De statuschip "NU OPEN" / "GESLOTEN": mono, kapitalen, tint zonder rand. */
.fr-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 0.625rem/1.4 var(--fr-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.fr-status.is-open { color: var(--fr-open-t); background: var(--fr-open-b); }
.fr-status.is-dicht { color: var(--fr-dicht-t); background: var(--fr-dicht-b); }

.fr-artikel { display: flex; flex-direction: column; align-items: stretch; }
.fr-artikel > * { max-width: 100%; }
.fr-artikel > .fr-knop-primair,
.fr-artikel > .fr-knop-secundair,
.fr-artikel > .fr-terug,
.fr-artikel > .fr-vangnet-badge { align-self: flex-start; }

/* Het Binnenkort-vangnet en de foutpagina: label, kop, één alinea, één knop, hulpregel. */
.fr-vangnet-badge {
    display: inline-block;
    font: 700 0.6875rem/1.4 var(--fr-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--fr-tint);
    color: var(--fr-blauw);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}
.fr-vangnet-badge + .fr-titel { margin-top: 0.6rem; }
.fr-vangnet-tekst { margin: 0.1rem 0 0; font: 400 1.0625rem/1.65 var(--fr-sans); color: var(--fr-tekst); }
.fr-vangnet-knop { margin-top: 1.2rem; height: auto; padding: 0.65rem 1.3rem; font-weight: 600; gap: 0.5rem; }
.fr-vangnet-hulp { margin: 1.4rem 0 0; font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); }
.fr-vangnet-hulp a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; }
.fr-vangnet-hulp a:hover { text-decoration: underline; }
.fr-auth-acties { margin: 1rem 0 0; }

/* ── 6. Voorpagina ───────────────────────────────────────────────── */

.fr-hero {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.fr-hero-tekst { flex: 1; min-width: 16rem; }
.fr-hero-datum {
    font: 700 0.75rem/1.4 var(--fr-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fr-stil);
    margin-bottom: 0.5rem;
}
.fr-hero h1 {
    margin: 0 0 0.6rem;
    font: 700 2.375rem/1.12 var(--fr-serif);
    letter-spacing: -0.01em;
    color: var(--fr-tekst);
}
.fr-hero h1 em { font-style: italic; color: var(--fr-sd-t); }
.fr-hero-lead {
    margin: 0;
    font: 400 1.0625rem/1.6 var(--fr-sans);
    color: var(--fr-stil);
    text-wrap: pretty;
}

/* De 1930-polderschijf: de kavelplattegrond in een cirkel, met de vier dorpen als stip.
   Standaard stil. Bij hover kleurt de rand geel en schuift de vaart een fractie; wie
   beweging heeft uitgezet krijgt alleen de gele rand. */
.fr-planetarium {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 190px;
}
.fr-planetarium-knop {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 999px;
    border: 1px solid var(--fr-rand);
    background: var(--fr-kaart);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s;
    color: var(--fr-tekst);
}
.fr-planetarium-knop:hover { border-color: var(--fr-geel); }
.fr-schijf { position: absolute; inset: 0; margin: auto; width: 188px; height: 188px; }
.fr-schijf-lijnen { stroke: var(--fr-rand); fill: none; }
.fr-schijf-vaart { stroke: var(--fr-geel); stroke-opacity: 0.6; stroke-dasharray: 3 5; fill: none; }
.fr-schijf-dorp-ww { fill: var(--fr-blauw); }
.fr-schijf-dorp-mm { fill: var(--fr-mm); }
.fr-schijf-dorp-sd { fill: var(--fr-sd); }
.fr-schijf-dorp-ko { fill: var(--fr-ko); }
.fr-planetarium-knop:hover .fr-schijf-vaart { animation: fr-vaart 6s linear infinite; }
.fr-planetarium-knop:hover .fr-schijf-dorp { animation: fr-dorp 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fr-vaart { to { stroke-dashoffset: -32; } }
@keyframes fr-dorp { 50% { transform: scale(1.18); } }
.fr-planetarium-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--fr-kaart);
    border-radius: 999px;
    padding: 0.7rem 1rem;
}
.fr-planetarium-jaar {
    font: 700 1.5rem/1 var(--fr-serif);
    color: var(--fr-tekst);
}
.fr-planetarium-sub {
    font: 400 0.5625rem/1.4 var(--fr-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fr-stil);
    margin-top: 0.25rem;
}
.fr-planetarium-arc { display: none; }
.fr-planetarium-hint {
    font: 400 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fr-stil);
    text-align: center;
}

/* Nu open in het dorp: twee kaarten naast elkaar, met de chip rechtsboven en het label
   Uitgelicht half over de bovenrand. */
.fr-open-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0.9rem; }
.fr-open-kaart {
    position: relative;
    display: block;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: var(--fr-tekst);
    transition: border-color 0.15s;
}
a.fr-open-kaart:hover { border-color: var(--fr-blauw); color: var(--fr-tekst); }
.fr-open-kaart.is-uitgelicht { border-color: var(--fr-geel); }
.fr-open-kaart .fr-badge { position: absolute; top: -0.65rem; left: 1rem; }
.fr-open-kaart .fr-status { position: absolute; top: 0.85rem; right: 1rem; }
.fr-open-kop { display: block; padding-right: 6rem; }
.fr-open-naam { display: block; font: 700 1.125rem/1.3 var(--fr-serif); color: var(--fr-tekst); }
.fr-open-meta {
    display: block;
    margin-top: 0.3rem;
    font: 400 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.fr-open-tekst { display: block; margin: 0.4rem 0 0; font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); }

/* Kort nieuws: één kaart met regels; rubriek in mono, kop in Bitter, tijd rechts. */
.fr-kortlijst {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 0.15rem 1.1rem;
}
.fr-kortlijst > a,
.fr-kortlijst > span {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--fr-rand);
    text-decoration: none;
    color: var(--fr-tekst);
}
.fr-kortlijst > a:hover .fr-kn-kop { color: var(--fr-blauw); }
.fr-kn-beeld { flex: 0 0 96px; height: 64px; display: block; overflow: hidden; border-radius: var(--fr-hoek-klein); align-self: center; }
.fr-kn-beeld img { width: 100%; height: 100%; object-fit: cover; }
.fr-kn-label {
    flex: none;
    width: 6rem;
    font: 700 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
/* De rubriekkleur: de tekening zet de kleur per rubriek; de kleuren zijn de dorpstinten. */
.fr-kn-label[data-rubriek="natuur"], .fr-kn-label[data-rubriek="sport"] { color: var(--fr-sd-t); }
.fr-kn-label[data-rubriek="feest"], .fr-kn-label[data-rubriek="verkeer"] { color: var(--fr-blauw); }
.fr-kn-label[data-rubriek="dorp"], .fr-kn-label[data-rubriek="cultuur"] { color: var(--fr-mm-t); }
.fr-kn-kop { flex: 1; min-width: 0; font: 700 1rem/1.45 var(--fr-serif); color: var(--fr-tekst); }
.fr-kn-tijd { flex: none; font: 400 0.8125rem/1.4 var(--fr-sans); color: var(--fr-stil); }

/* Prikbord: het dubbele kader van een echt prikbord, met de oproepen in twee kolommen. */
.fr-prikbord {
    border: 1px solid var(--fr-tekst);
    border-radius: 4px;
    padding: 4px;
}
.fr-prikbord-binnen {
    border: 1px solid var(--fr-tekst);
    border-radius: 2px;
    padding: 1.1rem 1.4rem 1.3rem;
}
.fr-prikbord-kop {
    text-align: center;
    font: 700 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.fr-berichten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin-top: 0.4rem; }
.fr-berichten > * { padding: 0.85rem 0; border-bottom: 1px solid var(--fr-rand); }
.fr-bericht-kop { margin: 0; font: 700 1rem/1.4 var(--fr-serif); color: var(--fr-tekst); }
.fr-bericht-tekst { margin: 0.2rem 0 0; font: 400 0.875rem/1.55 var(--fr-sans); color: var(--fr-stil); }
.fr-bericht-actie {
    display: inline-block;
    margin-top: 0.4rem;
    font: 700 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-blauw);
    text-decoration: none;
}
.fr-bericht-actie:hover { text-decoration: underline; }

/* Verenigingsleven op de voorpagina: vier tegels naast elkaar. */
.fr-veren { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.fr-veren > a,
.fr-veren > span {
    display: block;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 0.9rem 1rem;
    text-decoration: none;
    color: var(--fr-tekst);
    transition: border-color 0.15s;
}
.fr-veren > a:hover { border-color: var(--fr-blauw); color: var(--fr-tekst); }
.fr-veren-mono { display: none; }
.fr-veren-naam { display: block; font: 700 1rem/1.35 var(--fr-serif); color: var(--fr-tekst); }
.fr-veren-soort {
    display: block;
    font: 400 0.625rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
    margin-top: 0.35rem;
}

/* Bezoekblok: een kaart met de tekst links en de knoppen rechts. */
.fr-bezoek {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 1.2rem 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.fr-bezoek-tekst { flex: 1 1 16rem; min-width: 0; }
.fr-bezoek h2 { margin: 0; font: 700 1.25rem/1.3 var(--fr-serif); color: var(--fr-tekst); }
.fr-bezoek p { margin: 0.3rem 0 0; font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-stil); }
.fr-bezoek-knoppen { display: flex; gap: 0.6rem; flex: none; flex-wrap: wrap; }
.fr-bezoek-knoppen a { height: auto; padding: 0.6rem 1.1rem; }
/* De eerste knop in een bezoekblok is de gevulde, de rest omlijnd (zoals de tekening). */
.fr-bezoek-knoppen a:first-child {
    color: var(--fr-knoptekst);
    background: var(--fr-blauw);
    border-color: var(--fr-blauw);
}
.fr-bezoek-knoppen a:first-child:hover { background: var(--fr-blauwh); border-color: var(--fr-blauwh); color: var(--fr-knoptekst); }

/* Het paneel "De zee werd land": het enige venster van de voorpagina. Twee kolommen: links
   het donkere polderpaneel met de grote schijf en de stichtingsjaren, rechts de weetjes. */
.fr-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 16, 26, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.fr-modal[hidden] { display: none; }
.fr-modal-kaart {
    position: relative;
    width: min(60rem, 100%);
    max-height: 90svh;
    overflow: auto;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    padding: 0;
    border-radius: 0;
}
.fr-modal-links {
    background: var(--fr-voet);
    color: var(--fr-voet-tekst);
    padding: 2rem 2rem 1.6rem;
    display: flex;
    flex-direction: column;
}
.fr-modal-schijf {
    position: relative;
    align-self: center;
    width: 270px;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fr-modal-schijf svg { position: absolute; inset: 0; width: 270px; height: 270px; }
.fr-modal-schijf .fr-schijf-ring { stroke: rgba(211, 224, 236, 0.3); fill: none; }
.fr-modal-schijf .fr-schijf-lijnen { stroke: rgba(211, 224, 236, 0.18); fill: none; }
.fr-modal-schijf .fr-schijf-vaart { stroke: var(--fr-geel); stroke-opacity: 0.45; stroke-dasharray: 3 6; }
.fr-modal-schijf .fr-schijf-dorp-ww { fill: #8AB2DF; }
.fr-modal-schijf .fr-schijf-dorp-mm { fill: #7CAB77; }
.fr-modal-schijf .fr-schijf-dorp-sd { fill: #DCA84B; }
.fr-modal-schijf .fr-schijf-dorp-ko { fill: #D08A6B; }
.fr-modal-schijf-tekst { position: relative; display: flex; flex-direction: column; align-items: center; }
.fr-modal-schijf-arc,
.fr-modal-schijf-sub {
    font: 400 0.625rem/1.4 var(--fr-mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--fr-voet-stil);
}
.fr-modal-schijf-jaar { font: 700 4rem/1 var(--fr-serif); color: #FFFFFF; margin-top: 0.2rem; }
.fr-modal-schijf-sub { margin-top: 0.4rem; }
.fr-modal-links .fr-kicker-mono { margin-top: 1.4rem; color: var(--fr-geel); }
.fr-modal-legenda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1.5rem;
    margin: 0.6rem 0 0;
}
.fr-modal-legenda > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font: 400 0.875rem/1.5 var(--fr-sans);
}
.fr-modal-legenda dt { display: flex; align-items: center; gap: 0.5rem; }
.fr-modal-legenda dt::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--fr-voet-stil);
}
.fr-modal-legenda > div[data-plaats="wieringerwerf"] dt::before { background: #8AB2DF; }
.fr-modal-legenda > div[data-plaats="middenmeer"] dt::before { background: #7CAB77; }
.fr-modal-legenda > div[data-plaats="slootdorp"] dt::before { background: #DCA84B; }
.fr-modal-legenda > div[data-plaats="kreileroord"] dt::before { background: #D08A6B; }
.fr-modal-legenda dd { margin: 0; font: 400 0.75rem/1.5 var(--fr-mono); color: var(--fr-voet-stil); }
.fr-modal-noot {
    margin: 1.1rem 0 0;
    border-top: 1px solid var(--fr-voet-lijn);
    padding-top: 0.7rem;
    font: 400 0.6875rem/1.5 var(--fr-mono);
    color: var(--fr-voet-stil);
    letter-spacing: 0.06em;
}
.fr-modal-rechts { position: relative; padding: 1.6rem 1.8rem 1.8rem; }
.fr-modal-sluit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-klein);
    background: var(--fr-kaart);
    color: var(--fr-tekst);
    font: 400 1rem/1 var(--fr-sans);
    cursor: pointer;
    transition: background 0.15s;
}
.fr-modal-sluit:hover { background: var(--fr-tint); }
.fr-modal-rechts > .fr-kicker-mono { padding-right: 3rem; }
.fr-modal-titel { margin: 0.45rem 0 0; font: 700 1.75rem/1.2 var(--fr-serif); color: var(--fr-tekst); }
.fr-modal-weetjes-kop {
    margin-top: 1.1rem;
    color: var(--fr-sd-t);
    border-bottom: 2px solid var(--fr-geel);
    padding-bottom: 0.45rem;
}
.fr-modal-weetjes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fr-modal-weetjes li {
    display: flex;
    gap: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--fr-rand);
    font: 400 0.9375rem/1.6 var(--fr-sans);
    color: var(--fr-tekst);
}
.fr-modal-nr {
    flex: none;
    font: 700 0.75rem/1.6 var(--fr-mono);
    color: var(--fr-sd-t);
    padding-top: 0.15rem;
}
.fr-modal-museum { margin: 1rem 0 0; }
.fr-modal-museum a {
    display: inline-block;
    font: 600 0.9375rem/1.4 var(--fr-sans);
    color: var(--fr-blauw);
    text-decoration: none;
}
.fr-modal-museum a:hover { text-decoration: underline; }

/* ── 7. Rubrieken (de stadsrubrieken-module in dit skelet) ───────── */
/* De rubriekpagina's (nieuws, prikbord, verenigingen, 112) renderen via de eigen sjablonen in
   themes/wieringerwerf/modules/stad/ en dragen fr-*-klassen. De module-stylesheet laadt mee
   (voor het beheer en de terugval); wat hier staat wint op #fr-main. */

.fr-rubriek { display: flex; flex-direction: column; }
.fr-rubriek-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.fr-rubriek-kop h1 {
    margin: 0;
    font: 700 2.125rem/1.15 var(--fr-serif);
    letter-spacing: -0.01em;
    color: var(--fr-tekst);
}
.fr-rubriek-datum { font: 400 0.9375rem/1.5 var(--fr-sans); color: var(--fr-stil); }
.fr-rubriek-intro { margin: 0.5rem 0 0; font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-stil); max-width: none; }
.fr-rubriek-leeg {
    margin: 1.25rem 0 0;
    border: 1px dashed var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 1.5rem;
    text-align: center;
    color: var(--fr-stil);
    font: 400 0.9375rem/1.55 var(--fr-sans);
    max-width: none;
}
.fr-rubriek-leeg[hidden] { display: none; }
.fr-rubriek-bron { margin: 0.9rem 0 0; font: 400 0.75rem/1.6 var(--fr-sans); color: var(--fr-stil); max-width: none; }
.fr-rubriek-bron a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; }
.fr-rubriek-bron a:hover { text-decoration: underline; }
.fr-terug { display: inline-block; font: 600 0.875rem/1.5 var(--fr-sans); color: var(--fr-blauw); text-decoration: none; }
.fr-terug:hover { text-decoration: underline; }

/* De dorpsstip en de dorpspil: metadata in de dorpskleur, nooit hoofdvormgeving. */
.fr-dorpstip {
    display: inline-block;
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--fr-stil);
    vertical-align: middle;
}
.fr-dorpstip[data-plaats="wieringerwerf"] { background: var(--fr-ww); }
.fr-dorpstip[data-plaats="middenmeer"] { background: var(--fr-mm); }
.fr-dorpstip[data-plaats="slootdorp"] { background: var(--fr-sd); }
.fr-dorpstip[data-plaats="kreileroord"] { background: var(--fr-ko); }
.fr-dorpspil {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--fr-tint);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-weight: 600;
    color: var(--fr-tekst);
}
.fr-dorpspil[data-plaats="wieringerwerf"] { color: var(--fr-ww-t); }
.fr-dorpspil[data-plaats="middenmeer"] { color: var(--fr-mm-t); }
.fr-dorpspil[data-plaats="slootdorp"] { color: var(--fr-sd-t); }
.fr-dorpspil[data-plaats="kreileroord"] { color: var(--fr-ko-t); }

/* Filterchips (rubriekpagina's): rond, 2,25rem hoog, en de actieve is polderblauw. */
.fr-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; }
.fr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.25rem;
    font: 600 0.875rem/1 var(--fr-sans);
    padding: 0 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--fr-rand);
    background: var(--fr-kaart);
    color: var(--fr-tekst);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fr-chip:hover { background: var(--fr-tint); color: var(--fr-tekst); }
.fr-chip[aria-pressed="true"],
.fr-chip.is-aan {
    background: var(--fr-blauw);
    border-color: var(--fr-blauw);
    color: var(--fr-knoptekst);
}
.fr-chip[aria-pressed="true"]:hover,
.fr-chip.is-aan:hover { background: var(--fr-blauwh); }
.fr-chip-stip { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 999px; }
.fr-chip-stip.is-vierkant { border-radius: 2px; }
.fr-chip.is-aan .fr-chip-stip { background: var(--fr-knoptekst); }
.fr-chip-teller {
    font: 700 0.6875rem/1 var(--fr-mono);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--fr-tint);
    color: var(--fr-blauw);
}

/* Nieuws: de lijst met kaarten (foto links, tekst rechts) en het bericht zelf. */
.fr-nieuwslijst { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.25rem; }
.fr-nieuwskaart {
    display: flex;
    gap: 1rem;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 0.9rem;
    text-decoration: none;
    color: var(--fr-tekst);
    transition: border-color 0.15s;
}
.fr-nieuwskaart:hover { border-color: var(--fr-blauw); }
.fr-nieuwskaart-beeld {
    flex: none;
    width: 12rem;
    height: 8rem;
    overflow: hidden;
    border-radius: 8px;
    background: var(--fr-ph);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    font: 400 0.8125rem/1.4 var(--fr-sans);
    color: var(--fr-stil);
}
.fr-nieuwskaart-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-nieuwskaart-tekst { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.fr-nieuwskaart h2 { margin: 0; font: 700 1.1875rem/1.35 var(--fr-serif); }
.fr-nieuwskaart h2 a { color: var(--fr-tekst); text-decoration: none; }
.fr-nieuwskaart h2 a:hover { color: var(--fr-blauw); }
.fr-nieuwskaart-lead { margin: 0.3rem 0 0; font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-stil); max-width: none; }
.fr-nieuwskaart-meta {
    margin: auto 0 0;
    padding-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font: 400 0.8125rem/1.4 var(--fr-sans);
    color: var(--fr-stil);
    max-width: none;
}
.fr-nieuwsdetail-meta {
    margin: 0.9rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font: 400 0.8125rem/1.4 var(--fr-sans);
    color: var(--fr-stil);
    max-width: none;
}
.fr-nieuwsdetail-titel { margin: 0.5rem 0 0; font-size: 1.875rem; line-height: 1.25; }
.fr-nieuwsdetail-beeld { margin: 1rem 0 0; width: 100%; height: 16rem; border-radius: 10px; overflow: hidden; background: var(--fr-ph); }
.fr-nieuwsdetail-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-nieuwsdetail-lead { margin: 1rem 0 0; font: 600 1.0625rem/1.6 var(--fr-sans); color: var(--fr-tekst); }
.fr-nieuwsdetail-tekst { margin-top: 0.8rem; }
.fr-nieuwsdetail-tekst p { font: 400 1rem/1.7 var(--fr-sans); margin: 0 0 0.8rem; }
.fr-nieuwsdetail-bron {
    margin: 1rem 0 0;
    border-top: 1px solid var(--fr-rand);
    padding-top: 0.7rem;
    font: 400 0.8125rem/1.5 var(--fr-sans);
    color: var(--fr-stil);
    max-width: none;
    align-self: stretch;
}
.fr-nieuwsdetail-bron a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; }
.fr-nieuwsdetail-bron a:hover { text-decoration: underline; }
.fr-ooklezen { margin-top: 1.5rem; align-self: stretch; }
.fr-ooklezen ul { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.fr-ooklezen li { border-bottom: 1px solid var(--fr-rand); }
.fr-ooklezen a,
.fr-ooklezen li > span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.1rem;
    font: 600 0.9375rem/1.5 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
}
.fr-ooklezen a:hover { color: var(--fr-blauw); }
.fr-ooklezen .fr-clublijst-soort { color: var(--fr-stil); font-weight: 400; }

/* Prikbord: briefjes op ivoorpapier, om en om een halve graad scheef, met een punaise. */
.fr-briefjes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.25rem; }
.fr-briefje {
    position: relative;
    background: var(--fr-note);
    border: 1px solid var(--fr-rand);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}
.fr-briefje.is-links { transform: rotate(-0.5deg); }
.fr-briefje.is-rechts { transform: rotate(0.5deg); }
.fr-punaise {
    position: absolute;
    top: -0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    background: var(--fr-geel);
    border: 2px solid var(--fr-kaart);
}
.fr-briefje-cat {
    display: inline-block;
    font: 700 0.6875rem/1.4 var(--fr-sans);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--fr-stil) 14%, transparent);
    color: var(--fr-stil);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.fr-briefje-cat[data-cat="oproep"] { background: color-mix(in srgb, var(--fr-geel) 22%, transparent); color: var(--fr-sd-t); }
.fr-briefje-cat[data-cat="te-koop"], .fr-briefje-cat[data-cat="aangeboden"] { background: color-mix(in srgb, var(--fr-groen) 16%, transparent); color: var(--fr-mm-t); }
.fr-briefje-cat[data-cat="gezocht"] { background: color-mix(in srgb, var(--fr-blauw) 12%, transparent); color: var(--fr-ww-t); }
.fr-briefje-cat[data-cat="burenhulp"] { background: color-mix(in srgb, var(--fr-terra) 14%, transparent); color: var(--fr-ko-t); }
.fr-briefje-cat[data-cat="gratis"] { background: color-mix(in srgb, var(--fr-groen) 16%, transparent); color: var(--fr-groen-t); }
.fr-briefje-kop { margin: 0.45rem 0 0; font: 700 1rem/1.4 var(--fr-serif); color: var(--fr-tekst); }
.fr-briefje-tekst { margin: 0.2rem 0 0; font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-tekst); max-width: none; }
.fr-briefje-voet { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.fr-briefje-meta { margin: 0; display: flex; align-items: center; gap: 0.4rem; font: 400 0.8125rem/1.4 var(--fr-sans); color: var(--fr-stil); }
.fr-briefje-contact { font: 600 0.875rem/1.4 var(--fr-sans); color: var(--fr-blauw); }
.fr-prikbord-cta {
    background: var(--fr-voet);
    border-radius: var(--fr-hoek);
    padding: 1.1rem 1.3rem;
    margin-top: 1.5rem;
}
.fr-prikbord-cta-kop { margin: 0; color: #FFFFFF; font: 700 1.0625rem/1.4 var(--fr-sans); }
.fr-prikbord-cta-sub { margin: 0.1rem 0 0; color: var(--fr-voet-stil); font: 400 0.9rem/1.5 var(--fr-sans); max-width: none; }
.fr-plaatsen {
    margin-top: 0.9rem;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
}
.fr-plaatsen summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    font: 700 0.9375rem/1.4 var(--fr-sans);
    color: var(--fr-tekst);
}
.fr-plaatsen[open] summary { border-bottom: 1px solid var(--fr-rand); }
.fr-plaatsen[open] summary span:last-child { transform: rotate(180deg); }
.fr-plaatsen-form { padding: 1rem 1.1rem 1.2rem; max-width: none; }
.fr-plaatsen .fr-melding { margin: 1rem 1.1rem 0; }
.fr-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.fr-veld-bij { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fr-stil); }
.fr-plaatsen-form button[type="submit"] { width: auto; align-self: flex-start; padding: 0.7rem 1.4rem; }

/* Verenigingen: een groep per dorp met de regels als lijst. */
.fr-clubgroep { margin-top: 1.5rem; }
.fr-clubgroep .fr-kicker-mono { color: var(--fr-stil); }
.fr-clublijst { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.fr-clublijst li { border-bottom: 1px solid var(--fr-rand); scroll-margin-top: 5rem; }
/* De rail-terugval landt met een anker op de club: even oplichten. */
.fr-clublijst li:target > a,
.fr-clublijst li:target > span { background: var(--fr-tint); border-radius: var(--fr-hoek-klein); }
.fr-clublijst a,
.fr-clublijst li > span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.1rem;
    font: 600 0.9375rem/1.5 var(--fr-sans);
    color: var(--fr-tekst);
    text-decoration: none;
}
.fr-clublijst a:hover { color: var(--fr-blauw); }
.fr-clublijst-naam { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.fr-clublijst-soort { color: var(--fr-stil); font-weight: 400; flex: none; }
.fr-clubdetail-kicker {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font: 700 0.8125rem/1.4 var(--fr-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.fr-clubdetail-kicker[data-plaats="wieringerwerf"] { color: var(--fr-ww-t); }
.fr-clubdetail-kicker[data-plaats="middenmeer"] { color: var(--fr-mm-t); }
.fr-clubdetail-kicker[data-plaats="slootdorp"] { color: var(--fr-sd-t); }
.fr-clubdetail-kicker[data-plaats="kreileroord"] { color: var(--fr-ko-t); }
.fr-clubdetail-titel { margin: 0.4rem 0 0; }
.fr-clubdetail-zin { margin: 0.7rem 0 0; font: italic 400 1.125rem/1.6 var(--fr-sans); color: var(--fr-stil); }
.fr-clubdetail-tekst { margin: 0.9rem 0 0; font: 400 1rem/1.7 var(--fr-sans); color: var(--fr-tekst); }
.fr-clubdetail-tekst + .fr-clubdetail-tekst { margin-top: 0.8rem; }
.fr-clubdetail-tekst p { margin: 0 0 0.8rem; font: 400 1rem/1.7 var(--fr-sans); }
.fr-clubdetail-site { margin-top: 1.1rem; height: auto; padding: 0.6rem 1.2rem; font-weight: 600; gap: 0.5rem; }
.fr-clubdetail-feiten {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.9rem;
    margin: 1.5rem 0 0;
    align-self: stretch;
}
.fr-clubdetail-feiten > div {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 0.8rem 1rem;
}
.fr-clubdetail-feiten dt {
    font: 700 0.6875rem/1.4 var(--fr-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.fr-clubdetail-feiten dd { margin: 0.2rem 0 0; font: 600 0.9375rem/1.4 var(--fr-sans); color: var(--fr-tekst); }
.fr-clubdetail-redactie { margin-top: 1.25rem; align-self: stretch; }
.fr-meeruit { margin-top: 1.5rem; }

/* 112: groepen per dag, elk een kaart met regels: tijd, dienstblokje, prio, tekst. */
.fr-112-groep { margin-top: 1.25rem; }
/* Alles wat het filter kan verbergen, op één plek.

   De browser verbergt een element met het hidden-attribuut via zijn eigen regel
   `[hidden] { display: none }`, en die verliest van élke eigen display-regel. `.fr-nieuwskaart`
   en `.fr-nieuwslijst` zetten `display: flex` en `.fr-briefjes` zet `display: grid`, dus op
   /nieuws en /prikbord kleurde een filterknop wel op maar verdween er niets. Alleen bij de
   112-lijst was hieraan gedacht. Gevonden bij de bouw van het Kolhorn-thema, dat dezelfde fout
   had geërfd; CssHiddenRegelTest bewaakt het nu voor beide. */
.fr-112-groep[hidden],
.fr-nieuwslijst[hidden],
.fr-nieuwskaart[hidden],
.fr-briefjes[hidden] { display: none; }
.fr-112-kaart { padding: 0.2rem 1.1rem; margin-top: 0.5rem; }
.fr-112-regels { list-style: none; margin: 0; padding: 0; }
.fr-112-regels li {
    display: flex;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--fr-rand);
    align-items: baseline;
    flex-wrap: wrap;
}
.fr-112-regels li[hidden] { display: none; }
.fr-112-regel-tijd { flex: none; font: 400 0.8125rem/1.5 var(--fr-mono); color: var(--fr-stil); }
.fr-112-regel-dienst { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 2px; align-self: center; }
.fr-112-regel-prio {
    flex: none;
    font: 700 0.6875rem/1.4 var(--fr-sans);
    letter-spacing: 0.05em;
    background: var(--fr-tint);
    color: var(--fr-blauw);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}
.fr-112-regel-tekst { min-width: 0; flex: 1; }
.fr-112-regel-kop { display: block; font: 600 0.9375rem/1.45 var(--fr-sans); color: var(--fr-tekst); }
.fr-112-regel-sub { display: flex; align-items: center; gap: 0.4rem; font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); flex-wrap: wrap; }
.fr-112-regel-sub .fr-dorpstip { width: 0.4rem; height: 0.4rem; }
.fr-112-app {
    background: var(--fr-tint);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 0.95rem 1.1rem;
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.fr-112-app svg { flex: none; margin-top: 0.15rem; }
.fr-112-app p { margin: 0; font: 400 0.875rem/1.55 var(--fr-sans); color: var(--fr-tekst); max-width: none; }

.fr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    font: 400 0.875rem/1.4 var(--fr-sans);
    color: var(--fr-stil);
}
.fr-pager a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; }
.fr-pager a:hover { text-decoration: underline; }

/* ── 8. Redactionele pagina's ────────────────────────────────────── */

/* Historie en Over ons vullen net als de rest de hele middenkolom. */
.fr-artikel-smal { max-width: none; }
.fr-artikel .fr-kicker + .fr-titel { margin-top: 0.3rem; }
.fr-artikel .fr-titel { font-size: 2.125rem; line-height: 1.15; }

/* De foto boven de historie: volle breedte, 15rem hoog. Zonder foto een gedempt vlak met
   de aanwijzing uit de tekening, zodat een beheerder ziet wat hier hoort. */
.fr-hist-beeld {
    margin-top: 1.1rem;
    width: 100%;
    height: 15rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--fr-ph);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font: 400 0.875rem/1.5 var(--fr-sans);
    color: var(--fr-stil);
}
.fr-hist-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* De tijdlijn: een gele lijn links, blauwe stippen erover, jaartal in mono. */
.fr-tijdlijn {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    border-left: 3px solid var(--fr-geel);
    display: flex;
    flex-direction: column;
}
.fr-tijdlijn li {
    position: relative;
    padding: 0.65rem 0 0.65rem 1.4rem;
    display: block;
}
.fr-tijdlijn li::before {
    content: "";
    position: absolute;
    left: -0.42rem;
    top: 1.05rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--fr-blauw);
    border: 2px solid var(--fr-bg);
    box-sizing: content-box;
    margin-left: -3px;
}
.fr-tijdlijn-jaar {
    display: block;
    font: 700 0.8125rem/1.4 var(--fr-mono);
    color: var(--fr-blauw);
}
.fr-tijdlijn li.is-groot .fr-tijdlijn-jaar { color: var(--fr-ko-t); } /* terra-tekst (Kreileroord-toon): het terra-accent zelf haalt op papier maar 4,2:1 bij 13 px */
.fr-tijdlijn-kop { display: block; font: 700 1rem/1.4 var(--fr-sans); color: var(--fr-tekst); }
.fr-tijdlijn-tekst { display: block; margin-top: 0.15rem; font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-stil); }

/* De verhaalkaarten: jaartal in goud, kop in Bitter. */
.fr-verhaal {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 1rem 1.2rem;
    margin-top: 1rem;
}
.fr-verhaal:first-of-type { margin-top: 1.5rem; }
.fr-verhaal .fr-kicker-mono { color: var(--fr-sd-t); letter-spacing: 0.16em; }
.fr-verhaal h2 { margin: 0.25rem 0 0; font: 700 1.125rem/1.35 var(--fr-serif); color: var(--fr-tekst); }
.fr-verhaal .fr-kicker-mono + h2 { margin-top: 0.25rem; }
.fr-verhaal h2:first-child { margin-top: 0; }
.fr-verhaal p { margin: 0.35rem 0 0; font: 400 0.9375rem/1.65 var(--fr-sans); color: var(--fr-stil); text-wrap: pretty; }
.fr-tweeluik { display: block; }

/* Het donkere blok met de doorklik naar het genootschap. */
.fr-hist-uitgelicht {
    background: var(--fr-voet);
    border-radius: var(--fr-hoek);
    padding: 1rem 1.2rem;
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}
.fr-hist-uitgelicht p { margin: 0; color: var(--fr-voet-tekst); font: 400 0.9375rem/1.5 var(--fr-sans); }
.fr-hist-uitgelicht-links { display: flex; gap: 0.6rem; flex-wrap: wrap; flex: none; }
.fr-hist-uitgelicht-links a {
    display: inline-block;
    flex: none;
    padding: 0.5rem 1rem;
    border-radius: var(--fr-hoek-klein);
    background: var(--fr-geel);
    color: var(--fr-badge-t);
    font: 700 0.875rem/1.4 var(--fr-sans);
    text-decoration: none;
}
.fr-hist-uitgelicht-links a:hover { background: #F0B54A; color: var(--fr-badge-t); }
.fr-hist-bronnen { margin: 1rem 0 0; font: 400 0.75rem/1.6 var(--fr-sans); color: var(--fr-stil); }
.fr-hist-citaat {
    margin: 1.75rem 0 0;
    border-top: 1px solid var(--fr-rand);
    padding-top: 1.1rem;
    text-align: center;
    font: italic 400 1.0625rem/1.6 var(--fr-serif);
    color: var(--fr-stil);
    max-width: none;
}
.fr-hist-citaat-bron {
    margin-left: 0.35rem;
    font: 400 0.75rem/1.4 var(--fr-mono);
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Over ons: de introzin, een tweede alinea, zes kaarten en het colofon. */
.fr-artikel .fr-prose-lead > p:first-child {
    font: 400 1.0625rem/1.65 var(--fr-sans);
    color: var(--fr-tekst);
    border-bottom: 0;
    padding-bottom: 0;
    margin: 0.7rem 0 0;
    max-width: none;
}
.fr-artikel .fr-prose-lead > p + p { margin-top: 0.8rem; font: 400 1rem/1.7 var(--fr-sans); color: var(--fr-stil); }
.fr-artikel .fr-prose-lead > p:last-child { margin-bottom: 0; }
.fr-overons-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin-top: 1.5rem;
}
.fr-overons-kaart {
    display: block;
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 0.9rem 1rem;
    text-decoration: none;
    color: var(--fr-tekst);
    transition: border-color 0.15s;
}
a.fr-overons-kaart:hover { border-color: var(--fr-blauw); color: var(--fr-tekst); }
.fr-overons-kaart .fr-kicker { display: none; }
.fr-overons-kaart-kop { display: block; font: 700 0.9375rem/1.4 var(--fr-sans); color: var(--fr-tekst); }
.fr-overons-kaart-tekst { display: block; margin-top: 0.15rem; font: 400 0.8125rem/1.45 var(--fr-sans); color: var(--fr-stil); }

.fr-colofon {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 1rem 1.2rem;
    margin-top: 1.5rem;
}
.fr-colofon .fr-kicker { display: none; }
.fr-colofon h2 { margin: 0; font: 700 1.125rem/1.35 var(--fr-serif); color: var(--fr-tekst); }
.fr-colofon p { margin: 0.35rem 0 0; font: 400 0.9375rem/1.65 var(--fr-sans); color: var(--fr-stil); max-width: none; }
.fr-colofon a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; }
.fr-colofon a:hover { text-decoration: underline; }
.fr-colofon-feiten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1.5rem;
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--fr-rand);
}
.fr-colofon-feiten dt {
    font: 400 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
    margin-bottom: 0.2rem;
}
.fr-colofon-feiten dd { margin: 0; font: 600 0.9rem/1.5 var(--fr-sans); color: var(--fr-tekst); }

/* ── 9. De bedrijvenmodule in dit skelet ─────────────────────────── */
/* De moduleweergaven zijn gedeeld met de andere thema's, brengen hun eigen stylesheet mee
   (assets/modules/companies/css/public.css) en dragen de bcm-*-klassen. Die stylesheet is
   geschreven op --portal-*-tokens die de gedeelde portalstijl definieert; deze schil laadt die
   niet, dus één vertaaltabel zet ze hier op de polderkleuren. Achter #fr-main om op volgorde
   te winnen. */
.fr-body {
    --portal-font-sans: var(--fr-sans);
    --portal-font-serif: var(--fr-serif);
    --portal-font-mono: var(--fr-mono);

    --portal-bg: var(--fr-bg);
    --portal-surface: var(--fr-kaart);
    --portal-surface-soft: var(--fr-bg);
    --portal-surface-tint: var(--fr-tint);
    --portal-chip: var(--fr-kaart);

    --portal-border: var(--fr-rand);
    --portal-border-soft: var(--fr-rand);
    --portal-border-strong: var(--fr-rand3);
    --portal-border-dashed: var(--fr-rand3);
    --portal-chip-border: var(--fr-rand);

    --portal-heading: var(--fr-tekst);
    --portal-heading-ink: var(--fr-tekst);
    --portal-text: var(--fr-tekst);
    --portal-text-soft: var(--fr-stil);
    --portal-muted: var(--fr-stil);
    --portal-muted-faint: var(--fr-stil);
    --portal-mono-faint: var(--fr-stil);

    --portal-primary: var(--fr-blauw);
    --portal-primary-strong: var(--fr-blauwh);
    --portal-primary-soft: var(--fr-tint);
    --portal-primary-soft-border: var(--fr-rand);
    --portal-accent: var(--fr-geel);
    --portal-accent-deep: var(--fr-sd-t);
    --portal-danger: var(--fr-rood);

    --portal-open: var(--fr-open-t);
    --portal-open-soft: var(--fr-open-b);
    --portal-open-dot: var(--fr-groen);
    --portal-closed: var(--fr-dicht-t);
    --portal-closed-soft: var(--fr-dicht-b);
    --portal-closed-dot: var(--fr-rood);

    --portal-radius: var(--fr-hoek-klein);
    --portal-radius-card: var(--fr-hoek);
    --portal-radius-btn: var(--fr-hoek-knop);
    --portal-radius-pill: 999px;

    --portal-shadow-card-hover: none;
    --portal-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.4);

    --portal-cat-winkels: var(--fr-kaart);
    --portal-cat-horeca: var(--fr-kaart);
    --portal-cat-zorg: var(--fr-kaart);
    --portal-cat-sport: var(--fr-kaart);
    --portal-cat-diensten: var(--fr-kaart);
    --portal-cat-verblijf: var(--fr-kaart);
}

#fr-main .bcm-card,
#fr-main .bcm-block,
/* `.bcm-detail` stond hier ook in, en dat is niet een kaart maar de hele pagina-sectie
   van een bedrijfspagina. Die kreeg daardoor een rand om alles heen, met binnenin nog eens
   een rand om de kop en om elk blok: een kader in een kader. */
#fr-main .bcm-panel,
/* De twee blokken die een bedrijfspagina opbouwen horen bij dezelfde familie: zonder deze
   twee regels hielden ze de hoeken van de module en week een bedrijfspagina af van de gids
   waar hij bij hoort. */
#fr-main .bcm-detail__hero,
#fr-main .bcm-detail__panel,
#fr-main .bcm-oproep {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
}
#fr-main .bcm-card { transition: border-color 0.15s; }
#fr-main a.bcm-card:hover,
#fr-main .bcm-card:hover { border-color: var(--fr-blauw); }

/* Het lint op een pakketkaart: de module zet witte letters op de accentkleur, en op graangeel
   haalt dat 2,1:1. Dezelfde donkere letter als de UITGELICHT-badge van de tekening (6,7:1). */
#fr-main .bcm-plan__ribbon { color: var(--fr-badge-t); }
/* De pakketpagina van de module heeft drie vaste kleuren uit haar eigen tekening (grijze intro,
   roomwitte uitgelichte kaart, lichte letter op de gele knop). Overdag valt dat samen met dit
   thema; in de nacht staat er dan lichte tekst op een lichte kaart. Hier de tokens van dit
   thema, zodat dag en nacht allebei leesbaar zijn (gemeten: alles boven 4,5:1). */
#fr-main .bcm-packages__intro { color: var(--fr-stil); }
#fr-main .bcm-plan--highlight { background: var(--fr-note); }
#fr-main .bcm-plan__cta.is-highlight,
#fr-main .bcm-plan__cta.is-highlight:hover { color: var(--fr-badge-t); }
/* De bladerknoppen van de gids zonder eigen variant vallen terug op de browserknop (lichtgrijs);
   in de nacht staat daar dan lichte tekst op. */
#fr-main .bcm-pager .bcm-btn { background: var(--fr-kaart); color: var(--fr-tekst); border-color: var(--fr-rand3); }

/* De sectiekoppen van de gids krijgen dezelfde lijn als de rest van de site. */
#fr-main .bcm-section__head {
    border-bottom: 2px solid var(--fr-tekst);
    padding-bottom: 0.45rem;
    margin-bottom: 0.4rem;
}
#fr-main .bcm-section__head h2 {
    font: 700 1.5rem/1.25 var(--fr-serif);
    color: var(--fr-tekst);
    margin: 0;
}
#fr-main .bcm-section__meta { font: 400 0.8125rem/1.4 var(--fr-sans); color: var(--fr-stil); }
#fr-main .bcm-oproep__tekst h2 { font: 700 1.25rem/1.3 var(--fr-serif); color: var(--fr-tekst); }
#fr-main .bcm-oproep__tekst p:last-child { font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-stil); }
/* De module heeft op een aantal plekken vaste hoeken; hier één regel voor de kaartmaten. */
.fr-body .bcm-toggle__dot,
.fr-body .bcm-status-dot,
.fr-body .bcm-quick__close { border-radius: 50%; }
.fr-body .bcm-modal .modal-content {
    border-radius: var(--fr-hoek);
    border: 1px solid var(--fr-rand);
    background: var(--fr-kaart);
}
.fr-body .bcm-modal.is-open { background: rgba(10, 16, 26, 0.6); }

#fr-main .bcm-toolbar__melden { font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); }
#fr-main .bcm-toolbar__melden a { color: var(--fr-blauw); }
#fr-main .bcm-btn {
    border-radius: var(--fr-hoek-knop);
    font-family: var(--fr-sans);
    font-weight: 600;
}
#fr-main .bcm-btn--primary {
    background: var(--fr-blauw);
    border-color: var(--fr-blauw);
    color: var(--fr-knoptekst);
}
#fr-main .bcm-btn--primary:hover { background: var(--fr-blauwh); border-color: var(--fr-blauwh); }
#fr-main .bcm-btn--ghost {
    background: transparent;
    border: 1px solid var(--fr-blauw);
    color: var(--fr-blauw);
}
#fr-main .bcm-btn--ghost:hover { background: var(--fr-tint); }
#fr-main .bcm-chip {
    border-radius: 999px;
    border: 1px solid var(--fr-rand);
    background: var(--fr-kaart);
    color: var(--fr-tekst);
    font-family: var(--fr-sans);
}
#fr-main .bcm-chip.is-active,
#fr-main .bcm-chip[aria-pressed="true"] { background: var(--fr-blauw); border-color: var(--fr-blauw); color: var(--fr-knoptekst); }
#fr-main .bcm-eyebrow {
    font-family: var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
#fr-main .bcm-crumbs,
#fr-main .bcm-empty { color: var(--fr-stil); font-family: var(--fr-sans); }
#fr-main h1, #fr-main h2, #fr-main h3 { font-family: var(--fr-serif); color: var(--fr-tekst); }

/* De kop van de gids en de kaarten in de vorm van de tekening: geen omslagbeeld met een
   monogram, maar een compacte kaart met de soort in kapitalen, de naam in Bitter en de
   plaats eronder. De omslag met een echte foto blijft (die is van de ondernemer). */
#fr-main .bcm-directory__hero h1,
#fr-main .bcm-vac__hero h1,
#fr-main .bcm-packages__hero h1 { font: 700 2.125rem/1.15 var(--fr-serif); letter-spacing: -0.01em; }
#fr-main .bcm-directory__hero h1 em,
#fr-main .bcm-vac__hero h1 em { font-style: normal; color: inherit; }
#fr-main .bcm-directory__intro,
#fr-main .bcm-vac__intro { font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-stil); max-width: none; }
/* Elke kaart heeft een beeldvlak, ook zonder foto: dan staat er de letter van het bedrijf in.
   Het vlak was verborgen zolang er geen foto was, waardoor de ene gids kaarten met beeld liet
   zien en de andere kale tekstblokken, en binnen dezelfde gids stonden ze door elkaar. */
#fr-main .bcm-cover--card { height: 8rem; }
/* Op een telefoon een lagere strook: 8rem gestreepte lucht met een letter erin duwt de
   eerste kaart anders bijna van het scherm. Dezelfde maat als de gids zelf aanhoudt. */
@media (max-width: 640px) {
    #fr-main .bcm-cover--card:not(.bcm-cover--photo) { height: 74px; }
}
#fr-main .bcm-card__body { padding: 1rem 1.1rem; gap: 0.35rem; }
#fr-main .bcm-card__head { display: flex; flex-direction: column; gap: 0.35rem; }
#fr-main .bcm-card__name { order: 2; font: 700 1.125rem/1.3 var(--fr-serif); color: var(--fr-tekst); }
#fr-main .bcm-card__sub {
    order: 1;
    font: 700 0.75rem/1.4 var(--fr-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
#fr-main .bcm-card__desc { font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-stil); }
#fr-main .bcm-card__foot { font: 600 0.875rem/1.4 var(--fr-sans); }
#fr-main .bcm-card__cta { color: var(--fr-blauw); }
#fr-main .bcm-card__gids { color: var(--fr-stil); font-weight: 400; display: inline-flex; align-items: center; gap: 0.45rem; }
#fr-main .bcm-card__gids::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--fr-geel); }
#fr-main .bcm-input,
#fr-main .bcm-select,
#fr-main input.form-control,
#fr-main select.form-select {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-knop);
    color: var(--fr-tekst);
    font-family: var(--fr-sans);
}

/* ── 10. Formulieren en inlogschermen ────────────────────────────── */

.fr-formulier { display: flex; flex-direction: column; gap: 0.9rem; max-width: 34rem; }
.fr-veld { display: flex; flex-direction: column; gap: 0.3rem; }
.fr-veld label {
    font: 400 0.75rem/1.4 var(--fr-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.fr-veld input,
.fr-veld select,
.fr-veld textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    font: 400 1rem/1.4 var(--fr-sans);
    color: var(--fr-tekst);
    background: var(--fr-bg);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-klein);
}
.fr-veld textarea { min-height: 8rem; resize: vertical; }
.fr-veld-hint { font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); }
.fr-formulier button[type="submit"] {
    align-self: stretch;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.7rem 1rem;
    font: 700 1rem/1.3 var(--fr-sans);
    color: var(--fr-knoptekst);
    background: var(--fr-blauw);
    border: none;
    border-radius: var(--fr-hoek-knop);
    cursor: pointer;
    transition: background 0.15s;
}
.fr-formulier button[type="submit"]:hover { background: var(--fr-blauwh); }

.fr-melding {
    border-radius: var(--fr-hoek-klein);
    padding: 0.8rem 1rem;
    font: 400 0.9rem/1.55 var(--fr-sans);
    border: 1px solid var(--fr-rand);
    background: var(--fr-kaart);
    margin-bottom: 0.9rem;
}
.fr-melding.is-goed { color: var(--fr-open-t); background: var(--fr-open-b); border-color: transparent; }
.fr-melding.is-fout { color: var(--fr-dicht-t); background: var(--fr-dicht-b); border-color: transparent; }

/* De accountschermen: links de formulierkaart met de gele bovenrand en de wisselkaart
   eronder, rechts de kaart "Waarom een account?". Op een telefoon onder elkaar. */
/* Geen eigen breedte en geen eigen kolomverdeling meer: de auth-pagina's van de portalsites
   horen er hetzelfde uit te zien, en dit thema hield hier 62rem aan met twee gelijke kolommen
   terwijl Franeker de volle middenkolom vulde met een iets breder formulier. Dat verschil was
   toeval. De verdeling staat nu in de gedeelde portal-CSS (.fr-auth-tweeluik). */
.fr-auth { width: 100%; margin: 1rem 0 0; }
.fr-auth-rij {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 1.25rem;
    align-items: start;
}
.fr-auth-kolom { min-width: 0; }
.fr-auth-kaart {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-top: 3px solid var(--fr-geel);
    border-radius: var(--fr-hoek);
    padding: 1.6rem 1.6rem 1.8rem;
}
.fr-auth h1 { margin: 0; font: 700 1.5rem/1.3 var(--fr-serif); color: var(--fr-tekst); }
.fr-auth-sub { margin: 0.3rem 0 1.1rem; font: 400 0.9rem/1.5 var(--fr-sans); color: var(--fr-stil); }
.fr-auth .fr-kicker { display: none; }
.fr-auth-kaart .fr-formulier { max-width: none; }
.fr-auth-voet {
    margin-top: 0.8rem;
    font: 400 0.875rem/1.5 var(--fr-sans);
    text-align: center;
    color: var(--fr-tekst);
}
.fr-auth-voet a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; }
.fr-auth-voet a:hover { text-decoration: underline; }
.fr-auth-noot { margin: 0.9rem 0 0; font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); }
.fr-auth-noot a { color: var(--fr-blauw); font-weight: 600; }
.fr-auth-wissel {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 0.9rem 1.6rem;
    margin-top: 0.9rem;
    font: 400 0.9rem/1.5 var(--fr-sans);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.fr-auth-wissel a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; }
.fr-auth-wissel a:hover { text-decoration: underline; }
.fr-auth-wissel .fr-auth-naar-home { color: var(--fr-stil); font-weight: 400; }
.fr-auth-wissel .fr-auth-naar-home:hover { color: var(--fr-blauw); text-decoration: none; }
/* De opmaak van het zijblok bij de accountschermen staat sinds v014.11.48 in het gedeelde blad
   (_local_portal/css/portal-shared.css). De regels die hier stonden waren een tweede bron voor
   hetzelfde onderdeel, en één ervan (de vinkjes-SVG) beschreef markup die er niet meer is. */
.fr-auth-tekst { font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-tekst); margin: 0.5rem 0 0; }

/* ── 11. Responsief gedrag ───────────────────────────────────────── */
/* De breekpunten van de tekening: drie kolommen vanaf 1280, linkerrail plus midden van
   1025 tot 1279 met de verenigingen eronder in twee kolommen, één kolom daaronder (inhoud
   eerst, dan de rails), en op 719 de telefoonopmaak. Boven 1024 nooit één kolom, en de
   middenkolom nooit smaller dan 560px. Nergens horizontale scroll. */

/* Grotere letters: de pagina zoomt, dus op een gewoon beeldscherm past het drieluik pas
   later. Tot die maat krijgt de rechterrail zijn plek onder de inhoud, net als op een
   kleine laptop; anders zakt de middenkolom onder de 560px. */
@media (min-width: 1280px) and (max-width: 1439px) {
    html[data-schaal="normaal"] [data-fr-body],
    html[data-schaal="groot"] [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); }
    html[data-schaal="normaal"] [data-fr-body] > aside[data-fr-rail]:last-child,
    html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--fr-rand);
    }
    html[data-schaal="normaal"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud,
    html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; }
    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"] [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); }
    html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--fr-rand);
    }
    html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; }
    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; }
}

/* Kleine laptop: linkerrail plus midden; de verenigingen zakken onder de inhoud, in twee
   kolommen. */
@media (max-width: 1279px) {
    [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); }
    [data-fr-body] > aside[data-fr-rail]:last-child {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--fr-rand);
    }
    [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; }
    .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; }
}

/* De kop wordt smaller: het hoofdmenu gaat naar een tweede regel, links uitgelijnd. */
@media (max-width: 1150px) {
    [data-fr-head] {
        grid-template-columns: 1fr auto;
        min-height: 0;
        padding: 0.55rem 1.25rem;
        row-gap: 0.15rem;
    }
    [data-fr-nav] { grid-row: 2; grid-column: 1 / -1; justify-self: start; justify-content: flex-start; }
    [data-fr-acties] { flex-wrap: wrap; row-gap: 0.4rem; }
}

/* Tablet: één kolom, inhoud eerst, dan de linkerrail, dan de verenigingen. */
@media (max-width: 1024px) {
    [data-fr-body] { display: flex; flex-direction: column; }
    [data-fr-body] > main { order: 1; }
    [data-fr-body] > aside[data-fr-rail]:first-child { order: 2; border-right: none; }
    [data-fr-body] > aside[data-fr-rail]:last-child { order: 3; border-left: none; border-top: 1px solid var(--fr-rand); }
    .fr-rail-inhoud { position: static; }
    .fr-clubs-lijst { grid-template-columns: 1fr; }
    .fr-clubs.is-ingeklapt .fr-clubs-lijst { grid-template-columns: 1fr; }
}

/* Telefoon: eigen compositie. Alle navigatie zit in de balk onderaan (menu, verenigingen,
   account), de kop houdt alleen de merknaam met lettergrootte en dag/nacht, de rasters worden
   één kolom en het weer en de verenigingen klappen in tot één regel. */
@media (max-width: 719px) {
    [data-fr-nav] { display: none; }
    /* De kop op een telefoon: merk links met de payoff eronder, en rechtsboven alleen de
       lettergrootte en dag/nacht. De knop Inloggen/Beheer staat hier niet (die zit in het paneel
       Account van de balk onderaan), en het hoofdmenu en de rubrieken evenmin: die zitten achter
       Menu. Twee navigatiebalken boven elkaar is er een te veel en kost ruimte boven de inhoud;
       zo staat het ook op franeker.nl. Keuze Theo, 16 augustus 2026. */
    [data-fr-acties] .fr-knop-primair { display: none; }
    [data-fr-head] {
        position: relative;
        display: block;
        padding: 0.7rem 0.9rem;
    }
    #fr-main { padding-left: 1.25rem; padding-right: 1.25rem; }
    /* Het merk mag nooit breder worden dan de kop: de naam heeft een padding-right ter grootte van
       de knoppen rechtsboven, en zonder deze grens duwde die padding de doos buiten het scherm
       (gemeten op 360 px: 2 px zijwaartse scroll). */
    .fr-merk { gap: 0.5rem; max-width: 100%; }
    .fr-merk-tekst { flex: 1 1 auto; min-width: 0; }
    .fr-merkteken { width: 32px; height: 32px; flex: none; }
    /* De knoppen staan vast rechtsboven en niet in de rij: zo houdt alleen de merknaam rekening
       met hun breedte en krijgt de payoff eronder de volle breedte. */
    /* De naam is een blok (geen intrinsieke breedte) met ruimte rechts voor de knoppen, en heeft de
       hoogte van die knoppen: zo begint de payoff er altijd onder, ook op een grotere letterschaal.
       Eerder liep de payoff achter de A-knoppen langs. */
    .fr-merk-naam {
        display: flex;
        align-items: center;
        min-height: 1.95rem;
        font-size: 1.05rem;
        white-space: nowrap;
        padding-right: 9.4rem;
        /* Een langere sitenaam (dit thema is voor hergebruik gebouwd) schuift anders onder de
           knoppen door; dan liever afkappen met een beletselteken. */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fr-merk-sub { font-size: 0.7rem; }
    [data-fr-acties] {
        position: absolute;
        top: 0.7rem;
        right: 0.9rem;
        max-width: none;
        width: auto;
        gap: 0.4rem;
        flex-wrap: nowrap;
    }
    /* Compacte knopjes, zodat ze naast de merknaam passen; dezelfde maatvoering als franeker.nl. */
    .fr-thema-knop { height: 1.85rem; padding: 0 0.45rem; font-size: 0.72rem; gap: 0.28rem; }
    .fr-thema-knop svg { width: 13px; height: 13px; }
    /* Op de middelste letterschaal (zoom 1,125) is een telefoon effectief zo'n 350 px breed; met de
       compacte knopjes past de rij daar nog naast de merknaam. Op de grootste schaal (zoom 1,25,
       effectief ~310 px) niet meer: dan onder de naam, anders vallen ze eroverheen. Een mediaquery
       ziet de zoom niet, vandaar de koppeling aan de schaalstand zelf. */
    html[data-schaal="normaal"] .fr-merk-naam { padding-right: 8.9rem; font-size: 1rem; }
    html[data-schaal="groot"] [data-fr-acties] { position: static; margin-top: 0.5rem; }
    html[data-schaal="groot"] .fr-merk-naam { padding-right: 0; min-height: 0; }


    /* De 1930-schijf staat op een telefoon onder de introtekst en hoort dan in het midden. */
    .fr-hero { justify-content: center; gap: 1.25rem; }
    /* min-width mee omlaag: met de vaste 16rem uit de basisregel stak de introtekst op een smal
       toestel met de grootste letter aan beide kanten buiten de kolom. Dat viel niet op als
       zijwaartse scroll, juist doordat de rij hier gecentreerd staat. */
    .fr-hero-tekst { flex: 1 1 100%; min-width: 0; }
    .fr-planetarium { margin-left: auto; margin-right: auto; }

    .fr-open-grid,
    .fr-berichten,
    .fr-veren,
    .fr-overons-kaarten,
    .fr-colofon-feiten,
    .fr-tweeluik,
    .fr-auth-rij,
    .fr-modal-kaart,
    .fr-modal-legenda { grid-template-columns: minmax(0, 1fr); }
    .fr-berichten { gap: 0; }
    .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; }

    /* Kort nieuws: label en tijd samen op de eerste regel, kop eronder over de volle
       breedte. */
    .fr-kortlijst > a,
    .fr-kortlijst > span { flex-wrap: wrap; row-gap: 0.1rem; }
    .fr-kn-beeld { order: 1; flex: 0 0 100%; height: 10rem; }
    .fr-kn-label { flex: 0 0 auto; width: auto; order: 2; }
    .fr-kn-tijd { order: 3; margin-left: auto; }
    .fr-kn-kop { flex: 0 0 100%; order: 4; }

    .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-rubriek-kop h1 { font-size: 1.85rem; }

    .fr-hero h1 { font-size: 2rem; }
    .fr-titel { font-size: 1.85rem; }
    .fr-artikel .fr-titel { font-size: 1.85rem; }

    /* Het snelmenu zit in de balk onderaan; het weer klapt in tot één regel; 112 toont de
       twee jongste meldingen; de verenigingen zitten achter één regel met de teller. */
    .fr-snelnav { display: none; }
    [data-lr-112kol] > li:nth-of-type(n+3) { display: none; }
    .fr-clubs { display: none; }
    .fr-clubs-mobiel { display: block; }
    .fr-weer-desktop { display: none; }
    .fr-weer-mobiel { display: block; }
    .fr-prikbord-binnen { padding: 1rem 1rem 1.1rem; }
    .fr-hist-uitgelicht-links a { flex: 1 1 100%; text-align: center; }
    .fr-bezoek-knoppen { width: 100%; }
    .fr-bezoek-knoppen a { flex: 1 1 auto; }
}

/* Een smalle telefoon (360 px is de maat van een Samsung S-toestel), zeker met een grotere
   letterschaal: dan botsen de merknaam en de knoppen rechtsboven. De weergaveknop toont daar alleen
   zijn icoon; wat hij doet staat in zijn aria-label en in de titel, en na één tik zie je het
   resultaat. Zo blijft de rij naast de merknaam staan in plaats van eronder. */
@media (max-width: 400px) {
    .fr-thema-knop [data-fr-thema-label] { display: none; }
    .fr-thema-knop { padding: 0 0.4rem; }
    .fr-merk-naam { padding-right: 6.4rem; }
    html[data-schaal="normaal"] .fr-merk-naam { padding-right: 6.1rem; }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .fr-planetarium-knop:hover .fr-schijf-vaart,
    .fr-planetarium-knop:hover .fr-schijf-dorp { animation: none; }
}

/* ── 12. Tweestapsverificatie ─────────────────────────────────────────────────
   Dit ene scherm gebruikt bewust het gedeelde sjabloon (_local_portal/auth_2fa.php)
   in plaats van een eigen kopie: daar zit de passkey-logica in, en beveiligingskritieke
   code hoort op één plek. Hier alleen de hertinting. */

.portal-auth-v148 { display: block; max-width: 480px; margin: 0 auto; width: 100%; }

.portal-auth-card-v148 {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-top: 3px solid var(--fr-geel);
    border-radius: var(--fr-hoek);
    padding: 1.6rem 1.6rem 1.8rem;
}
.portal-auth-brand-v148 { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.portal-auth-brand-v148 strong { display: block; font: 700 1.125rem/1.2 var(--fr-serif); color: var(--fr-tekst); }
.portal-auth-brand-v148 small {
    display: block;
    font: 400 0.75rem/1.4 var(--fr-sans);
    color: var(--fr-stil);
    margin-top: 2px;
}
.portal-auth-card-v148 .admin-logo-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--fr-hoek-klein);
    background: var(--fr-tint);
    color: var(--fr-blauw);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 18px/1 var(--fr-serif);
}
.portal-section-label-v147 {
    font: 400 0.75rem/1.4 var(--fr-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fr-stil);
    margin: 0 0 8px;
}
.portal-auth-card-v148 h1 { margin: 0 0 6px; font: 700 1.5rem/1.3 var(--fr-serif); color: var(--fr-tekst); }
.portal-auth-card-v148 .lead { margin: 0 0 1.1rem; font: 400 0.9rem/1.5 var(--fr-sans); color: var(--fr-stil); }

.portal-auth-form-v148 { display: flex; flex-direction: column; gap: 0.9rem; }
.portal-auth-form-v148 label { display: flex; flex-direction: column; gap: 0.3rem; font: 400 0.75rem/1.4 var(--fr-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fr-stil); }
.portal-auth-form-v148 input[type="text"],
.portal-auth-form-v148 input[type="email"],
.portal-auth-form-v148 input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.8rem;
    font: 400 1rem/1.4 var(--fr-sans);
    color: var(--fr-tekst);
    background: var(--fr-bg);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-klein);
}
.portal-auth-form-v148 button[type="submit"] {
    font: 700 1rem/1.3 var(--fr-sans);
    color: var(--fr-knoptekst);
    background: var(--fr-blauw);
    border: none;
    border-radius: var(--fr-hoek-knop);
    padding: 0.7rem 1rem;
    cursor: pointer;
}
.portal-auth-form-v148 button[type="submit"]:hover { background: var(--fr-blauwh); }
.portal-passkey-btn-v159 {
    width: 100%;
    font: 600 1rem/1.3 var(--fr-sans);
    color: var(--fr-blauw);
    background: transparent;
    border: 1px solid var(--fr-blauw);
    border-radius: var(--fr-hoek-knop);
    padding: 0.65rem 1rem;
    cursor: pointer;
}
.portal-passkey-btn-v159:hover { background: var(--fr-tint); }
.portal-auth-divider-v159 {
    text-align: center;
    font: 400 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
    margin: 1rem 0;
}
.portal-auth-hint-v148 { font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); }
.portal-remember-v149 { display: flex; flex-direction: row; align-items: flex-start; gap: 0.55rem; text-transform: none; letter-spacing: normal; font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-tekst); }
.portal-remember-v149 input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 0.2rem; accent-color: var(--fr-blauw); }
.portal-auth-links-v148 { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--fr-rand); display: flex; gap: 0.9rem; flex-wrap: wrap; font: 400 0.875rem/1.5 var(--fr-sans); }
.portal-auth-links-v148 a { color: var(--fr-blauw); font-weight: 600; text-decoration: none; }
.portal-auth-links-v148 a:hover { text-decoration: underline; }
.portal-auth-logout-form-v148 { margin-top: 0.9rem; }
.portal-auth-logout-form-v148 button {
    background: transparent;
    border: none;
    color: var(--fr-blauw);
    font: 600 0.875rem/1.5 var(--fr-sans);
    cursor: pointer;
    padding: 0;
}

/* De keuzeregel op de eigen auth-schermen. */
.fr-checkregel { display: flex; align-items: flex-start; gap: 0.55rem; font: 400 0.875rem/1.5 var(--fr-sans); color: var(--fr-tekst); cursor: pointer; }
.fr-checkregel input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 0.2rem; accent-color: var(--fr-blauw); }
.fr-checkregel a { color: var(--fr-blauw); font-weight: 600; }
.fr-auth-voorwaarden { display: block; margin-top: 0.75rem; }
.fr-auth-voorwaarden a { color: var(--fr-blauw); font-weight: 600; }

/* ── 13. Contact en CMS-info ──────────────────────────────────────────────────
   Het contactformulier en de CMS-infopagina blijven gedeeld (daar zitten de validatie
   en de systeemgegevens in). Alleen de hertinting staat hier. */

.fr-contact { display: block; }
.fr-contact-formulier { min-width: 0; }
.fr-contact-zij { margin-top: 1.1rem; padding: 1rem 1.2rem; }
.fr-contact-zij .fr-kicker-dubbel { padding: 0; }
.fr-contact-feiten { margin: 0.6rem 0 0; display: grid; gap: 0.8rem; }
.fr-contact-feiten dt {
    font: 400 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
    margin-bottom: 0.2rem;
}
.fr-contact-feiten dd { margin: 0; font: 600 0.9rem/1.5 var(--fr-sans); color: var(--fr-tekst); }
.fr-contact-feiten a { color: var(--fr-blauw); text-decoration: none; }
.fr-contact-feiten a:hover { text-decoration: underline; }
.fr-contact-slot {
    margin: 0.9rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--fr-rand);
    font: 400 0.875rem/1.6 var(--fr-sans);
    color: var(--fr-stil);
}

@media (min-width: 2000px) {
    .fr-contact-tweeluik {
        display: grid;
        grid-template-columns: minmax(0, 46rem) minmax(18rem, 26rem);
        gap: 1.5rem;
        align-items: start;
    }
    .fr-contact-tweeluik .fr-contact-zij { margin-top: 0; }
}
.portal-contact-card-v1473 {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-top: 3px solid var(--fr-geel);
    border-radius: var(--fr-hoek);
    padding: 1.6rem 1.6rem 1.8rem;
}
.portal-contact-card-v1473 h1,
.portal-contact-card-v1473 h2 { font-family: var(--fr-serif); color: var(--fr-tekst); }
.portal-contact-card-v1473 h1 { font-size: 1.5rem; margin: 0 0 0.3rem; }
.portal-contact-card-v1473 label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.9rem;
    font: 400 0.75rem/1.4 var(--fr-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fr-stil);
}
.portal-contact-card-v1473 input,
.portal-contact-card-v1473 textarea,
.portal-contact-card-v1473 select {
    width: 100%;
    display: block;
    padding: 0.6rem 0.8rem;
    font: 400 1rem/1.4 var(--fr-sans);
    color: var(--fr-tekst);
    background: var(--fr-bg);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-klein);
}
.portal-contact-card-v1473 button[type="submit"] {
    font: 700 1rem/1.3 var(--fr-sans);
    color: var(--fr-knoptekst);
    background: var(--fr-blauw);
    border: none;
    border-radius: var(--fr-hoek-knop);
    padding: 0.7rem 1.2rem;
    cursor: pointer;
}
.portal-contact-card-v1473 button[type="submit"]:hover:not(:disabled) { background: var(--fr-blauwh); }
.portal-contact-card-v1473 button[type="submit"]:disabled {
    background: var(--fr-ph); /* op de iets lichtere ph-toon haalt de gedempte letter 4,6:1; op de randtoon 4,4:1 */
    color: var(--fr-stil);
    cursor: not-allowed;
}
.portal-contact-card-v1473 .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 1.1rem;
}
.portal-contact-card-v1473 .validation-message {
    display: block;
    margin-top: 0;
    margin-bottom: 0.9rem;
    font: 400 0.8125rem/1.45 var(--fr-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--fr-stil);
}
.portal-contact-card-v1473 .text-success { color: var(--fr-open-t); }
.portal-contact-card-v1473 .text-danger { color: var(--fr-dicht-t); }
.portal-contact-card-v1473 input.is-valid,
.portal-contact-card-v1473 textarea.is-valid { border-color: var(--fr-groen); }
.portal-contact-card-v1473 input.is-invalid,
.portal-contact-card-v1473 textarea.is-invalid { border-color: var(--fr-rood); }
.portal-contact-card-v1473 .success,
.portal-contact-card-v1473 .alert {
    margin: 0 0 1.1rem;
    padding: 0.8rem 1rem;
    border-radius: var(--fr-hoek-klein);
    font: 500 0.9rem/1.5 var(--fr-sans);
    border: 1px solid transparent;
}
.portal-contact-card-v1473 .success { background: var(--fr-open-b); color: var(--fr-open-t); }
.portal-contact-card-v1473 .alert { background: var(--fr-dicht-b); color: var(--fr-dicht-t); }
.portal-contact-card-v1473 .eyebrow {
    font: 400 0.75rem/1.4 var(--fr-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fr-stil);
    margin-bottom: 0.4rem;
}
.portal-contact-card-v1473 .lead { font: 400 0.9375rem/1.6 var(--fr-sans); color: var(--fr-stil); }

.portal-content-card-v147 {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 1.6rem 1.8rem;
}
.portal-content-card-v147 h1,
.portal-content-card-v147 h2,
.portal-content-card-v147 h3 { font-family: var(--fr-serif); color: var(--fr-tekst); }

/* ── 14. Honeypot ─────────────────────────────────────────────────────────────
   Het onzichtbare veld waarop AuthController en het prikbord bots herkennen. Deze schil
   laadt de default-stijl niet, dus de regel moet hier staan. */
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── 15. CMS-infopagina ───────────────────────────────────────────────────────
   /cms-info draait op het gedeelde sjabloon; de klassen daarvan krijgen hier de poldervorm. */
.portal-panel-v147,
.portal-quick-panel-v147,
.portal-maker-card-v149 {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}
.portal-panel-v147 h2,
.portal-quick-panel-v147 h2,
.portal-maker-card-v149 h2,
.portal-maker-card-v149 h3 {
    font-family: var(--fr-serif);
    color: var(--fr-tekst);
    margin: 0 0 0.6rem;
}
.portal-feature-grid-v147 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}
.portal-link-list-v147,
.portal-local-list-v147 { list-style: none; margin: 0; padding: 0; }
.portal-link-list-v147 li,
.portal-local-list-v147 li { border-bottom: 1px solid var(--fr-rand); }
.portal-link-list-v147 li:last-child,
.portal-local-list-v147 li:last-child { border-bottom: 0; }
.portal-link-list-v147 a,
.portal-local-list-v147 a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.15rem;
    font: 500 0.9rem/1.4 var(--fr-sans);
    text-decoration: none;
}
.portal-maker-copy-v149 { font: 400 0.9375rem/1.65 var(--fr-sans); color: var(--fr-stil); max-width: 64ch; }
.portal-maker-icon-v147 {
    width: 40px;
    height: 40px;
    border-radius: var(--fr-hoek-klein);
    background: var(--fr-tint);
    color: var(--fr-blauw);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.portal-maker-image-v149 img { max-width: 100%; border-radius: var(--fr-hoek); }
.portal-maker-links-v149 { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
.portal-maker-tags-v149 { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.portal-maker-tags-v149 span {
    font: 400 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
    border: 1px solid var(--fr-rand);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
}
.cms-image-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 16, 26, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.cms-image-modal-card {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek);
    padding: 1rem;
    max-width: 90vw;
    max-height: 88vh;
    overflow: auto;
}
.cms-image-modal-close {
    background: var(--fr-kaart);
    border: 1px solid var(--fr-rand);
    border-radius: var(--fr-hoek-klein);
    color: var(--fr-tekst);
    font: 400 1rem/1 var(--fr-sans);
    width: 2.2rem;
    height: 2.2rem;
    cursor: pointer;
}
.mt-4 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1.5rem; }

/* ── 16. Onderbalk en uitschuifpanelen (mobiel) ───────────────────────────────
   De gedeelde PWA-mechaniek van de portalthema's: de klassen zijn die van de portalschil,
   want het gedrag (openen, focus vasthouden, Escape, scroll-lock, omlaag vegen) komt uit
   /assets/themes/_local_portal/js/theme.js. Hier alleen de poldervorm: de voetkleur met
   de kavelstreep als bovenrand, hoeken van 12px, mono voor de labels. */

.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; }
.portal-slide-content-v20 .fr-clubs-plaats {
    display: inline;
    margin-left: auto;
    font: 400 0.6875rem/1.4 var(--fr-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-stil);
}

@media (max-width: 1024px) {
    .portal-bottom-nav-v20 {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: flex;
        background: var(--fr-voet);
        border-top: 3px solid var(--fr-geel);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .portal-bottom-nav-item-v20 {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 60px;
        padding: 8px 4px;
        border: 0;
        background: transparent;
        color: var(--fr-voet-stil);
        text-decoration: none;
        font: 700 0.625rem/1 var(--fr-mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .portal-bottom-nav-item-v20 i { font-size: 18px; line-height: 1; }
    .portal-bottom-nav-item-v20.is-active,
    .portal-bottom-nav-item-v20[aria-expanded="true"] { color: var(--fr-geel); }

    /* Ruimte onder de pagina, anders valt de laatste regel achter de balk. */
    [data-fr-body] { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .site-footer-v20, footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 17. Het weerwidget in de polderstijl ─────────────────────────────────────
   Het widget is gedeeld met alle portalthema's; hier staat alleen de hertinting: een donker
   blok in de voetkleur met de temperatuur in Bitter, zoals de tekening. De lucht zelf blijft
   van het gedeelde widget (B13); wat hier verandert is de kaart eromheen. Alles achter
   .fr-body, want weather.css laadt ná dit bestand. */

.fr-paneel-weer .portal-slide-content-v20 { padding: 12px 16px 18px; }
.fr-body .fr-paneel-weer .pw-top { display: none; }

.fr-body .pw-widget {
    border-radius: var(--fr-hoek);
    border: 0;
    background: var(--fr-voet);
    color: var(--fr-voet-tekst);
    overflow: hidden;
}
.fr-body .pw-widget .pw-sky { border-radius: var(--fr-hoek) var(--fr-hoek) 0 0; }
.fr-body .pw-widget .pw-title {
    font: 700 0.75rem/1.4 var(--fr-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fr-voet-stil);
}
.fr-body .pw-widget .pw-temp { font-family: var(--fr-serif); font-weight: 700; color: #FFFFFF; }
.fr-body .pw-widget .pw-desc { font-family: var(--fr-sans); font-weight: 400; color: var(--fr-voet-stil); }
.fr-body .pw-widget .pw-panel {
    background: var(--fr-voet);
    border: 0;
    border-top: 1px solid var(--fr-voet-lijn);
    border-radius: 0;
    color: var(--fr-voet-tekst);
}
.fr-body .pw-widget .pw-row { border-bottom: 0; padding: 0.12rem 0; }
.fr-body .pw-widget .pw-row > span { font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-voet-stil); }
.fr-body .pw-widget .pw-row > b { font: 600 0.8125rem/1.5 var(--fr-sans); color: #FFFFFF; }
.fr-body .pw-widget .pw-alert,
.fr-body .pw-widget .pw-fact {
    border-radius: var(--fr-hoek-klein);
    font: 400 0.8125rem/1.5 var(--fr-sans);
    color: var(--fr-voet-stil);
    border-top: 1px solid var(--fr-voet-lijn);
}
/* De slimme melding ("Regen op komst") heeft in het gedeelde weerblok een lichte achtergrond
   (#eef4f2). Die bleef staan terwijl dit thema de letter licht maakt: 1,8:1, en alleen te zien bij
   bepaald weer. Hier de donkere tint van het paneel eronder (gemeten 6,6:1). */
.fr-body .pw-widget .pw-alert {
    background: color-mix(in srgb, #FFFFFF 7%, var(--fr-voet));
    margin-top: 0.5rem;
    padding: 0.45rem 0.6rem;
}
.fr-body .pw-widget .pw-alert svg,
.fr-body .pw-widget .pw-alert i { color: var(--fr-geel); }
.fr-body .pw-widget .pw-knmi { border-radius: var(--fr-hoek-klein); }
.fr-body .pw-widget .pw-foot,
.fr-body .pw-widget .pw-clock,
.fr-body .pw-widget .pw-updated,
.fr-body .pw-widget .pw-geo-txt { font: 400 0.6875rem/1.3 var(--fr-mono); letter-spacing: 0; color: var(--fr-voet-stil); }
.fr-body .pw-widget .pw-geo { border-radius: var(--fr-hoek-klein); }
/* ── 18. Zoeken ───────────────────────────────────────────────────────────────
   Het zoekveld staat in de linkerkolom en in het Menu-paneel op een telefoon; de
   resultatenpagina (/zoeken) gebruikt de portal-search-klassen van de gedeelde schil en
   krijgt hier haar vorm binnen dit skelet. */

/* De opmaak van het zoekveld staat sinds v014.11.48 in het gedeelde blad
   (_local_portal/css/portal-shared.css, klassen .portal-zoek__*). De regels die hier stonden
   (.fr-zoek input, .fr-zoek button, .fr-zoek-rij, .fr-zoek-label) zijn weg: ze wonnen op
   specificiteit van het gedeelde blad en tekenden dus een eigen kader binnen het naadloze vak,
   terwijl de nieuwe plaatskeuze die opmaak niet erfde en dus een andere hoogte kreeg. Het thema
   kleurt dit onderdeel nu via de --portal-*-tokens, net als elk ander gedeeld blok. */
.fr-zoek-paneel { padding: 0 18px 12px; }

/* De resultatenpagina rendert via de gedeelde portal-zoek-klassen, niet via eigen fr-regels.
   Hier stond een losse selector van twaalf keer #fr-main zonder accolade: het restant van de
   opruiming toen het zoeken naar de gedeelde laag verhuisde. Een selector zonder regelblok
   plakt aan de eerstvolgende regel vast, en die was `.fr-voet-jas { margin-top: auto }`. Met
   twaalf keer hetzelfde id ervoor kon die nooit matchen, en dus zakte de voet op een korte
   pagina niet naar de onderkant van het scherm. */
/* ── 19. De voet: dijklijn, kavellijnen en de stichtingsjaren ────────────────
   De voet zelf blijft de gedeelde CMS-footer (Content → Footer, met de bouwer-credit die
   op elke installatie gelijk is). Het thema legt er de polderjas omheen: de dijklijn-curve
   erboven, de stichtingsjaren-regel, en het kavellijnenpatroon over de voetkleur, in dag
   én nacht uit de eigen tokens. */

.fr-voet-jas { margin-top: auto; }
.fr-dijklijn {
    display: block;
    width: 100%;
    height: 2.25rem;
    margin-bottom: -1px;
    color: var(--fr-voet);
}
.fr-stichtingsjaren {
    margin: 0;
    background: var(--fr-voet);
    background-image: repeating-linear-gradient(105deg, rgba(233, 236, 240, 0.04) 0 1px, transparent 1px 6rem);
    color: var(--fr-voet-stil);
    text-align: center;
    font: 400 0.875rem/1.5 var(--fr-sans);
    padding: 1.4rem 2rem 0;
}
.fr-stichtingsjaren span {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid var(--fr-voet-lijn);
    padding-bottom: 0.9rem;
}
.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);
}

/* De drie A's in de kleuren van dit thema; de maten staan in _local_portal/css/letterschaal.css. */
.letterschaal {
    --letterschaal-lijn: var(--fr-rand);
    --letterschaal-vlak: var(--fr-kaart);
    --letterschaal-inkt: var(--fr-tekst);
    --letterschaal-aan: var(--fr-blauw);
    --letterschaal-aan-inkt: var(--fr-knoptekst);
    --letterschaal-hover: var(--fr-rand);
}