/* ============================================================
   Bestand: public_html/assets/themes/_local_portal/css/fr-gedeeld.css
   ============================================================

   De gedeelde regels van de portalthema's met een eigen schil op het fr-skelet.

   Drie thema's droegen honderden letterlijk gelijke blokken in hun eigen theme.css (audit
   2 september 2026, M22). Die staan nu hier, één keer. Dit blad laadt VÓÓR de eigen bladen van
   elk thema dat het in zijn theme_shell.php opgeeft (sharedCss), dus een thema kan er nog altijd
   overheen: wat in theme.css staat wint van wat hier staat. De kleuren en maten komen uit de
   --fr-variabelen die elk thema zelf zet.

   Het commentaar bij de blokken komt uit het thema dat bij de verhuizing de leidraad was; waar
   het over één dorp ging is het herschreven naar wat voor alle drie geldt.

   Niet met de hand aanvullen; php scripts/css-dubbelen.php --verhuis doet dat, en alleen voor
   blokken die in alle thema's die dit blad laden gelijk zijn en veilig kunnen verhuizen. Een
   thema-eigen regel hoort in theme.css van dat thema.
   ============================================================ */

/* 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); }

*, *::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 blad laadt alleen bij de thema's op het fr-skelet. */
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;
}

/* Alleen de kleuren en de letter; de werking én de focusring staan in
   /assets/shared/css/verspringlink.css. */
.skip-to-content {
    background: var(--fr-blauw);
    color: var(--fr-knoptekst);
    font: 600 15px/1.2 var(--fr-sans);
}

/* 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; }

[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); }

/* Niet de accentkleur zelf (die haalt op licht papier geen contrast) maar de tekst-toon ervan (--fr-sd-t),
   die elk thema op minstens 4,5:1 zet. */
.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): in de hoofdkleur van het thema, in de nacht een lichtere toon 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); }

.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;
}

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

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

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

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

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

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

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

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

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

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

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

.fr-pijl { display: none; }

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

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

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

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

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

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

/* 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); }

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

/* De sectiekop: in de kopletter van het thema (--fr-serif), 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 "Van zee af" boven de jaartallenlijn. */
.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; }

.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;
}

/* 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 de kopletter van het thema, 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 weetjesvenster van de voorpagina (elk thema geeft het zijn eigen naam). Twee kolommen: links
   het donkere paneel met het kenmerk van het thema 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-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 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; }

.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-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);
}

/* Filterchips (rubriekpagina's): rond, 2,25rem hoog, en de actieve in de hoofdkleur van het thema. */
.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); }

/* Op een telefoon schuift de rij opzij in plaats van door te lopen over vijf regels. Met de
   uitgeversnamen erbij ("Noordkop247 · Wieringerwerf") paste er anders nog maar één knop per regel,
   en stond het eerste bericht een half scherm lager dan de kop. Geen zichtbare schuifbalk, wel de
   vaste inspringing links en rechts zodat de eerste en laatste knop niet tegen de rand plakken. */
@media (max-width: 640px) {
    .fr-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.2rem;
    }

    .fr-filters::-webkit-scrollbar { display: none; }

    .fr-chip { flex: 0 0 auto; }
}

.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="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-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 soort 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-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-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; }

.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; }

/* Het blok onder de 112-lijst had hier zijn eigen vorm, met een pictogram naast de tekst.
   Sinds v014.11.297 komt die tekst uit de gedeelde partial: één alinea zonder pictogram, in
   alle vier de thema's dezelfde. De vorm staat daarom nu in de stad-module zelf
   (`assets/modules/stad/css/public.css`, klasse `.stad-melding-app`), die elk van deze
   thema's al inlaadt en de fr-kleuren gewoon overneemt. Twee keer dezelfde vorm beschrijven
   leverde hier een echte fout op: `display: flex` legde de vetgedrukte openingszin naast de
   rest van de alinea in plaats van ervoor. */

.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; }

/* 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); }

/* De tekst-toon van het tweede accent (--fr-ko-t): het accent zelf haalt op papier geen 4,5: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 het tweede accent, kop in de kopletter van het thema. */
.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); }

/* 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 kleuren van het thema. 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 de kopletter 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);
}

.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; }

/* Geen eigen breedte en geen eigen kolomverdeling meer: de auth-pagina's van de portalsites
   horen er hetzelfde uit te zien, en deze thema's hielden hier 62rem aan met twee gelijke kolommen
   terwijl het gedeelde portalsjabloon 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; }

/* 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; }
}

.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; }

.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 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);
}

/* contact-validatie.js zet is-ok/is-fout op de meldingsregel (tot v014.11.280 text-success/text-danger). */
.portal-contact-card-v1473 .validation-message.is-ok { color: var(--fr-open-t); }

.portal-contact-card-v1473 .validation-message.is-fout { 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); }

/* ── 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;
}

/* ── CMS-infopagina ───────────────────────────────────────────────────────────
   /cms-info draait op het gedeelde sjabloon; de klassen daarvan krijgen hier de vorm van het thema. */
.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; }

.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);
}

.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 deze thema's de letter licht maken: 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-geo { border-radius: var(--fr-hoek-klein); }

/* 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; }

.fr-voet-jas { margin-top: auto; }

.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 het 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);
}