/* ════════════════════════════════════════════════════════════
   Kolhorn.nl — het dorp aan de dijk

   Het thema draait op een eigen schil (themes/kolhorn/theme_shell.php). Er ligt geen
   portal-CSS onder, wel het gedeelde skelet: de regels die dit thema deelt met julianadorp en
   wieringerwerf staan sinds v014.11.257 in assets/themes/_local_portal/css/fr-gedeeld.css,
   dat vóór dit bestand laadt (sharedCss in theme_shell.php). Wat hier staat wint daarvan.
   In de opbouw hieronder staan de secties die daarheen verhuisd zijn tussen haken.
   Het skelet komt uit Wieringerwerf (drie kolommen, rails, eigen sjabloon per
   pagina); de huisstijl is die van de mockupset "Havenlijn": warm papier,
   dijkgroen en waterblauw, het Dijkprofiel met de kade en de KH44 in de kop, en
   pannenrood voor wat er nú speelt.

   TWEE TOKENFAMILIES, ÉÉN BRON
   De mockups schrijven in --kh-*; het skelet en de gedeelde stadsrubrieken-stijl
   lezen --fr-*. Die tweede is geen verwijzing naar Franeker maar de interne naam
   van het skelet, en die laten we met rust (verslag 3.1). Daarom staat --kh- hier
   bovenaan als enige echte bron, en zijn alle --fr- eronder aliassen. Eén kleur
   veranderen doe je dus op één plek, en de HANDOFF vraagt deze opzet met zoveel
   woorden ("--fr-bg: var(--kh-bg) enzovoort in het productiethema").

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

:root {
    /* ── De bron: de tokens van de mockup, dag ───────────────────── */
    --kh-bg: #F3EFE6;          /* papier */
    --kh-surface: #FFFDF8;     /* het vlak van een kaart */
    --kh-ink: #202823;         /* lopende tekst en koppen */
    --kh-green: #31594A;       /* dijkgroen: koppen, knoppen, links */
    --kh-water: #456872;       /* waterblauw */
    --kh-tile: #A6533A;        /* pannenrood: actualiteit en evenement, nooit grote tekstvlakken */
    --kh-muted: #5F685F;       /* gedempte tekst */
    --kh-line: #D8D0C3;        /* lijnen en randen */
    --kh-footer: #18241F;      /* de voet en de donkere panelen */
    --kh-on-accent: #FFFDF8;   /* letter op dijkgroen */
    --kh-footer-ink: #E9EDE6;
    --kh-footer-muted: #A9B4A9;
    /* Amber is illustratie: lampen, ramen, zeilen, de zon. Nooit UI, nooit tekst.
       Dat staat zo in ONTWERPSPEC en het is de reden dat het hier apart staat. */
    --kh-amber: #E3A94F;
    --kh-amber-soft: #F5E9C8;
    /* De .nl van het wordmark op donker hout. Eigen kleur omdat pannenrood daar
       onder de contrastgrens zakt; gemeten in contrast-report.md. */
    --kh-tile-on-dark: #D4876E;

    --kh-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --kh-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --kh-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Lineair, hout, weinig radius: 2 tot 6 px. Geen ronde vormen; die zijn van
       de zustersites (planetariumschijf, polderschijf). */
    --kh-r-s: 2px; --kh-r: 4px; --kh-r-l: 6px;

    /* ── De aliassen: dezelfde kleuren onder de skeletnamen ──────── */
    --fr-bg: var(--kh-bg);
    --fr-kaart: var(--kh-surface);
    --fr-tekst: var(--kh-ink);
    --fr-stil: var(--kh-muted);
    --fr-rand: var(--kh-line);
    --fr-blauw: var(--kh-green);        /* de accentkleur van het skelet is bij Kolhorn dijkgroen */
    --fr-blauwh: #23453A;
    --fr-geel: var(--kh-water);         /* het tweede accent is water, geen geel */
    --fr-groen: var(--kh-green);
    --fr-terra: var(--kh-tile);
    --fr-rood: #A6533A;
    --fr-amber: var(--kh-amber);
    --fr-note: #FBF6EA;
    --fr-ph: #E8E2D5;
    --fr-tint: rgba(49, 89, 74, 0.07);
    --fr-knoptekst: var(--kh-on-accent);
    --fr-voet: var(--kh-footer);
    --fr-voet-tekst: var(--kh-footer-ink);
    --fr-voet-stil: var(--kh-footer-muted);
    --fr-voet-lijn: rgba(233, 237, 230, 0.14);
    --fr-badge-t: #2A1A12;
    --fr-rand3: #C7BDAC;
    --fr-groen-t: #244438;

    /* Afgeleiden met de tokennamen van het skelet, zodat de gedeelde
       stadsrubrieken-stijl en de sjablonen zonder omschrijven de Kolhorn-kleuren
       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(--kh-water);
    --fr-messingdonker: #35525A;
    --fr-kicker: var(--fr-stil);
    --fr-badge-b: var(--kh-water);
    --fr-link: var(--kh-green);
    --fr-knop: var(--kh-green);
    --fr-knophover: var(--fr-blauwh);
    --fr-actie: var(--kh-green);
    --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(--kh-green) 16%, transparent);
    --fr-open-r: color-mix(in srgb, var(--kh-green) 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-messingdonker);
    --fr-cat-winkel: var(--fr-messingdonker);
    --fr-cat-horeca: var(--kh-tile);
    --fr-cat-zorg: var(--fr-groen-t);
    --fr-cat-sport: var(--kh-green);
    --fr-cat-dienst: #7A3E2A;
    --fr-cat-verblijf: #35525A;
    --fr-tint-winkel: color-mix(in srgb, var(--kh-water) 14%, transparent);
    --fr-tint-horeca: color-mix(in srgb, var(--kh-tile) 12%, transparent);
    --fr-tint-zorg: color-mix(in srgb, var(--kh-green) 12%, transparent);
    --fr-tint-sport: var(--fr-tint);
    --fr-tint-dienst: color-mix(in srgb, var(--kh-tile) 8%, transparent);
    --fr-tint-verblijf: color-mix(in srgb, var(--kh-green) 8%, transparent);
    /* Vier tokens die bij Wieringerwerf een dorp aanduidden maar in het skelet een
       kleurról zijn: een leesbare accenttekst, een groene en een terra tekstkleur, en
       de stip van de eigen plaats. De dorpsvarianten zijn eruit (Kolhorn heeft één
       kern); deze vier blijven als rol bestaan, met Kolhorn-kleuren die het contrast
       halen. Namen ongewijzigd, want het skelet en de gedeelde stijl lezen ze. */
    --fr-sd-t: var(--fr-messingdonker);  /* accenttekst op papier, de rol van de goudtekst */
    --fr-mm-t: var(--fr-groen-t);        /* groene tekstkleur */
    --fr-ko-t: #7A3E2A;                  /* terra tekstkleur, donker genoeg voor 13 px op papier */
    --fr-ww: var(--kh-green);            /* de stip van de eigen plaats */

    --fr-radius: var(--kh-r-l);
    --fr-vlak: var(--fr-kaart);
    --fr-papier: var(--fr-kaart);

    --fr-serif: var(--kh-serif);
    --fr-sans: var(--kh-sans);
    --fr-mono: var(--kh-mono);

    /* Het skelet: drie kolommen, rails van 293 px zoals de mockups. */
    --fr-rail-links: 293px;
    --fr-rail-rechts: 293px;
    --fr-gap: 0px;
    --fr-max: 100%;
    --fr-hoek: var(--kh-r-l);
    --fr-hoek-knop: var(--kh-r);
    --fr-hoek-klein: var(--kh-r-s);

    color-scheme: light;
}

/* Nachtstand: de tweede tokenlade van de mockup. Alleen de bron verandert; alle
   aliassen hierboven volgen vanzelf, want die wijzen door. */
html[data-thema="donker"] {
    --kh-bg: #0F1613;
    --kh-surface: #17211D;
    --kh-ink: #EFF2EB;
    --kh-green: #86AD9C;
    --kh-water: #91B2BB;
    --kh-tile: #D4876E;
    --kh-muted: #B9C2BA;
    --kh-line: #2C3A33;
    --kh-footer: #0B100E;
    --kh-on-accent: #0F1613;
    --kh-footer-ink: #E4EAE2;
    --kh-footer-muted: #9FAA9F;
    --kh-amber: #E3A94F;
    --kh-amber-soft: #F5E9C8;
    --kh-tile-on-dark: #D4876E;

    --fr-blauwh: #A2C4B4;
    --fr-rood: #D4876E;
    --fr-note: #1C2620;
    --fr-ph: #212C27;
    --fr-tint: rgba(134, 173, 156, 0.12);
    --fr-rand3: #3B4A42;
    --fr-groen-t: #A2C4B4;
    --fr-messingdonker: #A8C6CD;
    --fr-badge-t: #0F1613;
    --fr-cat-dienst: #E0A488;
    --fr-cat-verblijf: #A8C6CD;
    --fr-sd-t: #A8C6CD;
    --fr-mm-t: #A2C4B4;
    --fr-ko-t: #E0A488;

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html[data-thema="auto"] {
        --kh-bg: #0F1613;
        --kh-surface: #17211D;
        --kh-ink: #EFF2EB;
        --kh-green: #86AD9C;
        --kh-water: #91B2BB;
        --kh-tile: #D4876E;
        --kh-muted: #B9C2BA;
        --kh-line: #2C3A33;
        --kh-footer: #0B100E;
        --kh-on-accent: #0F1613;
        --kh-footer-ink: #E4EAE2;
        --kh-footer-muted: #9FAA9F;
        --kh-amber: #E3A94F;
        --kh-amber-soft: #F5E9C8;
        --kh-tile-on-dark: #D4876E;

        --fr-blauwh: #A2C4B4;
        --fr-rood: #D4876E;
        --fr-note: #1C2620;
        --fr-ph: #212C27;
        --fr-tint: rgba(134, 173, 156, 0.12);
        --fr-rand3: #3B4A42;
        --fr-groen-t: #A2C4B4;
        --fr-messingdonker: #A8C6CD;
        --fr-badge-t: #0F1613;
        --fr-cat-dienst: #E0A488;
        --fr-cat-verblijf: #A8C6CD;
        --fr-sd-t: #A8C6CD;
        --fr-mm-t: #A2C4B4;
        --fr-ko-t: #E0A488;

        color-scheme: dark;
    }
}

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

/* ── 3. Kop en Dijkprofiel ───────────────────────────────────────── */

/* De kop staat op papier, niet op een kaartvlak, en de scheiding met de inhoud is één
   groene lijn: precies wat .kh-header in de mockup doet. Wieringerwerf had hier een
   kaartvlak met een lichte rand plus de kavelstreep met vier dorpskleuren; dat laatste is
   hun merkteken en Kolhorn heeft één kern. */
.fr-header {
    background: var(--kh-bg);
    border-bottom: 1px solid var(--kh-green);
}

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

/* 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-112-lijst { display: flex; flex-direction: column; margin-top: 0.35rem; }

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

/* 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-ring { stroke: var(--fr-rand); fill: none; }
/* De dijk loopt dwars door de ring en steekt er aan beide kanten uit, zoals de tekening. */
.fr-schijf-dijk { stroke: var(--fr-rand); stroke-dasharray: 4 5; fill: none; }
/* De bocht waar het dorp naar heet. Bij hover kruipt de streeplijn, meer niet. */
.fr-schijf-bocht { stroke: var(--fr-geel); stroke-opacity: 0.65; stroke-width: 1.4; stroke-dasharray: 3 5; fill: none; }
.fr-planetarium-knop:hover .fr-schijf-bocht { animation: fr-dijkstroom 6s linear infinite; }
@keyframes fr-dijkstroom { to { stroke-dashoffset: -32; } }
.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;
}

.fr-modal-schijf .fr-schijf-ring { stroke: rgba(211, 224, 236, 0.3); fill: none; }
.fr-modal-schijf .fr-schijf-dijk { stroke: rgba(211, 224, 236, 0.28); stroke-dasharray: 4 5; fill: none; }
.fr-modal-schijf .fr-schijf-bocht { stroke: var(--fr-geel); stroke-opacity: 0.45; stroke-dasharray: 3 6; }

/* ── 7. Rubrieken (de stadsrubrieken-module in dit skelet) ───────── */

/* Een bericht dat bij een externe bron hoort verlaat de site. Het pijltje zegt dat zichtbaar,
   de verborgen tekst zegt het hoorbaar: een pijltje alleen is voor een schermlezer niets. */
.fr-extern { font-size: 0.85em; color: var(--fr-stil); }
.fr-alleen-hoorbaar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Het Dijkprofiel ──────────────────────────────────────────────────────────────────
   De tekening (een SVG) draagt het beeld en staat er ook zonder JavaScript. Daaroverheen
   liggen twee doeken: het onderste tekent de lucht, het bovenste het water met de schepen.
   De stapeling is bewust: lucht achter de tekening, water ervoor, zodat een schip achter de
   kade langs vaart en de wolken achter de daken. */
.fr-dijk {
    margin-top: 1.75rem;
    border: 1px solid var(--kh-ink);
    border-radius: var(--fr-hoek);
    background: var(--fr-kaart);
    overflow: hidden;
}
.fr-dijkscene { position: relative; background: var(--kh-bg); }
.fr-dijk-svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.fr-dijk-svg-smal { display: none; }
.fr-dijk-lucht {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}
.fr-dijk-water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    z-index: 2;
}

/* De titel als los tekstje, en de kop met het logo. Allebei staan ze er alleen in de
   schermvullende stand op een gewoon scherm. Deze twee regels staan bewust búiten elke
   mediaquery: stonden ze in het desktopblok, dan gold de standaard daar wel en op een telefoon
   niet, en dan staan de titel en de kop daar dubbel in beeld naast die van de tekening zelf. */
.fr-dijk-titel { display: none; }
.fr-vensterkop { display: none; }

/* ── Het Dijkprofiel groot bekijken ───────────────────────────────────────────────────
   Op een telefoon is de scene een strookje van een paar centimeter hoog; de turfschuren,
   de kerk en de KH44 zijn dan nauwelijks te onderscheiden. Een tik zet hem schermvullend,
   nog een tik zet hem terug. De knop staat er ook, want een tik op een plaatje is geen
   zichtbare bediening: wie niet weet dat het kan, komt er nooit achter.

   Alleen op smalle schermen. Op een gewoon scherm staat hij al groot genoeg, en dan zou
   een tik op het water (die een rimpeling geeft) opeens iets heel anders doen. */

/* De groep om de knoppen. In de kaartweergave doet hij niets (`display: contents`), zodat de
   sluitknop zijn eigen plek in de hoek houdt; in de schermvullende stand wordt hij de balk waarin
   de twee knoppen naast elkaar staan. */
.fr-dijkscene > .fr-scene-bediening { display: contents; }
/* Twee klassen in de selector, niet één: de demoknop draagt ook `fr-dijk-groot-knop`, en die zet
   hieronder `display: inline-flex`. Bij gelijke specificiteit wint de latere regel, en dan staat de
   knop gewoon op de voorpagina. */
.fr-dijk-groot-knop.fr-dijk-demo { display: none; }
.fr-dijk-groot-knop {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--kh-ink);
    border-radius: 999px;
    background: var(--fr-kaart);
    color: var(--kh-ink);
    font-size: 1rem;
    cursor: pointer;
    /* Onzichtbaar én niet aanklikbaar. Zou hij alleen doorzichtig zijn, dan bleef er een gat in
       de plaat waar de vergrootglas-cursor opeens een gewone pijl wordt en de klik iets anders
       doet dan er vlak naast. */
    opacity: 0;
    pointer-events: none;
}
.fr-dijk-groot-knop:focus-visible { opacity: 1; pointer-events: auto; }
/* De tekst hoort bij de mobiele knop; op een gewoon scherm staat er alleen het teken. */
.fr-dijk-groot-knop [data-kh-dijk-label] { display: none; }

/* Het vergrootglas: de enige aanwijzing dat er meer te zien is, dus alleen daar waar een muis is. */
@media (hover: hover) {
    /* Een gewoon handje, geen vergrootglas. Op verzoek van Theo, en het geldt op allebei de
       sites: de plaat kondigt zich aan als iets waar je op klikt, en wat er dan gebeurt zegt de
       knop rechtsboven. Zie de gelijke regel bij .fr-scene-doek in het thema van julianadorp. */
    .fr-dijkscene { cursor: pointer; }
    .fr-dijk.is-groot .fr-dijkscene { cursor: pointer; }
}

/* Zonder muis is er geen cursor om iets mee te zeggen. Daar is de knop de bediening. */
@media (hover: none) {
    .fr-dijk-groot-knop { opacity: 1; pointer-events: auto; }
}

@media (max-width: 900px) {
    /* Op een telefoon staat het woord er wél bij. Daar bestaat geen hover, dus een los teken in
       de hoek is een raadsel; een knop hoort te zeggen wat hij doet. */
    .fr-dijk-groot-knop {
        gap: 0.35rem;
        top: 0.5rem;
        right: 0.5rem;
        width: auto;
        height: auto;
        padding: 0.35rem 0.6rem;
        font: 600 0.75rem/1 'Manrope', system-ui, sans-serif;
        opacity: 1;
        transform: none;
        /* Ruim boven de 44 pixels die een vinger nodig heeft, inclusief de rand eromheen. */
        min-height: 34px;
    }
    .fr-dijk-groot-knop [data-kh-dijk-label] { display: inline; }

    /* Schermvullend. position: fixed en niet de echte Fullscreen-API: die vraagt op iOS om een
       videoelement en werkt daar op een gewone div niet. Zo werkt het overal hetzelfde. */
    .fr-dijk.is-groot {
        position: fixed;
        inset: 0;
        z-index: 2000;
        margin: 0;
        border: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Hetzelfde verduisterde vlak als op een gewoon scherm. Het was hier de papierkleur van de
           tekening, en dan valt het vak weg tegen de laag: je ziet geen plaat in een venster maar
           één groot leeg vlak met ergens een dorpje in. Op verzoek van Theo, die de twee vensters
           gelijk wil hebben. */
        background: rgba(20, 32, 28, 0.92);
        padding: clamp(0.75rem, 3vw, 1.25rem);
    }
    /* Het vak krijgt de rand en de ronding van het venster, zoals op een gewoon scherm. `overflow`
       hoort daarbij: op een heel laag venster knijpt de flexbox het vak lager dan de tekening, en
       zonder deze regel steekt die er bovenuit, buiten de rand langs. Gemeten op 800 bij 200:
       tweeëntachtig pixels tekening naast het kader. */
    .fr-dijk.is-groot .fr-dijkscene {
        border: 1px solid var(--kh-ink);
        border-radius: var(--fr-hoek);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        overflow: hidden;
    }
    /* De hele tekening past altijd op het scherm; er wordt nergens geveegd. Wat er verandert is
       WELKE tekening je ziet.

       Rechtop is dat de compacte: die is bijna drie en een half keer zo breed als hoog, dus hij
       wordt anderhalf keer zo hoog als de brede en je ziet hem in één oogopslag. De brede is
       bijna vijf keer zo breed als hoog en zou rechtop een streepje blijven.

       Kantel je de telefoon, dan is er breedte zat en komt de brede met alle details. Dat is de
       beloning voor het draaien, en daar zit de knop 'Kantelen' voor.

       De verhouding van het vak is exact die van de tekening (390 bij 120). Dat is geen detail:
       de tekening staat op `slice`, en alleen bij precies die verhouding valt er niets af. Het
       doek eroverheen rekent met dezelfde verhouding, dus scheelt het, dan staat de markt naast
       de dijk in plaats van erop. */
    .fr-dijk.is-groot { overflow: hidden; }
    .fr-dijk.is-groot .fr-dijkscene {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
    }
    .fr-dijk.is-groot .fr-dijk-svg { height: 100%; width: 100%; }
    .fr-dijk.is-groot .fr-dijkvoet { display: none; }
    /* De knop hoort bij het scherm en niet bij de tekening. */
    .fr-dijk.is-groot .fr-dijk-groot-knop {
        position: fixed;
        top: max(0.75rem, env(safe-area-inset-top));
        right: 0.75rem;
    }

    /* Rechtop: de compacte tekening onderaan, met lucht erboven.

       Op zijn eigen verhouding (390 bij 120) is die tekening op een telefoon rechtop een strookje
       van nog geen anderhalve centimeter in een scherm van tien: veertien procent van de hoogte, en
       de rest leeg papier. Breder dan het scherm kan hij niet, dus groter maken kan alleen door hem
       bij te snijden, en daar is deze tekening al een uitsnede voor. De weg die wél werkt is
       dezelfde als op een gewoon scherm: het vak hoger maken en de plaat naar de onderrand zetten.
       Wat daarboven vrijkomt is lucht, en die vult het luchtdoek al met de zon, de maan, de sterren
       en de wolken.

       Vierkant, en het vak mag krimpen als de hoogte er niet is. Dat is ongeveer twee keer zo hoog
       als de tekening zelf, dus de helft van het beeld is lucht: op een telefoon is dat precies wat
       je wilt zien, want daar is de hemel met de zon, de wolken en 's nachts de maan het enige wat
       nog ruimte heeft. Hoger dan vierkant wordt het een luchtfoto met een dorpje onderin. */
    @media (orientation: portrait) {
        .fr-dijk.is-groot .fr-dijkscene { aspect-ratio: 390 / 120; }
        .fr-dijk.is-groot .fr-dijkscene[data-kh-levend] {
            aspect-ratio: 1 / 1;
            flex: 0 1 auto;
            min-height: 0;
        }
        .fr-dijk.is-groot .fr-dijk-svg-breed { display: none; }
        .fr-dijk.is-groot .fr-dijk-svg-smal { display: block; }
        .fr-dijk.is-groot .fr-dijkscene[data-kh-levend] .fr-dijk-svg-smal {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: auto;
        }
    }

    /* De kantelknop staat tegenover "Kleiner", op de plek waar eerder de veeg-aanwijzing stond,
       en hij staat er in béide standen: rechtop om te kantelen, liggend om terug te gaan.

       Eerder hing hij liggend aan een klasse die pas werd gezet als het toestel bevéstigde dat het
       vergrendeld was. Draait een toestel wel maar blijft die bevestiging uit, dan was er geen weg
       terug. Zichtbaarheid hoort niet af te hangen van een bericht dat kan wegblijven. */
    .fr-dijk.is-groot .fr-kantelknop { display: inline-flex; }

    /* Liggend: de brede tekening met alle details, ook hier onderaan met lucht erboven. Het vak
       mag krimpen als de hoogte er niet is; dan valt de lucht vanzelf weg en houd je de tekening. */
    @media (orientation: landscape) {
        .fr-dijk.is-groot .fr-dijkscene { aspect-ratio: 960 / 200; }
        .fr-dijk.is-groot .fr-dijkscene[data-kh-levend] {
            aspect-ratio: 12 / 5;
            flex: 0 1 auto;
            min-height: 0;
        }
        .fr-dijk.is-groot .fr-dijk-svg-breed { display: block; }
        .fr-dijk.is-groot .fr-dijk-svg-smal { display: none; }
        .fr-dijk.is-groot .fr-dijkscene[data-kh-levend] .fr-dijk-svg-breed {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: auto;
        }
    }

    /* Ruimte onder de tekening vrijhouden, anders komt hij bij het midden zoeken half onder de
       balk te liggen die verderop vast onderaan wordt gezet. */
    .fr-dijk.is-groot { padding-bottom: 6.5rem; }

    /* De pagina eronder mag niet meescrollen zolang de scene het scherm vult. */
    body.fr-dijk-vast { overflow: hidden; }
}

/* ── Groot bekeken: wat op elk formaat geldt ──────────────────────────────────────────
   De plaat gaat los van de pagina staan en vult het scherm. Hoe hij daarna wordt getoond
   verschilt: op een gewoon scherm een venster over de pagina, op een telefoon de tekening
   op hoogte met een veegbaan. Alleen wat voor allebei geldt staat hier. */
.fr-dijk.is-groot {
    position: fixed;
    inset: 0;
    z-index: 2000;
    margin: 0;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.fr-dijk-vast { overflow: hidden; }

/* ── Groot bekeken op een gewoon scherm: een venster ──────────────────────────────────
   Een verduisterd vlak over de pagina met de tekening erop. Dat het een venster is en niet
   de pagina zelf maakt de weg terug vanzelfsprekend: klik ernaast en hij is weg. De plaat
   houdt zijn rand en zijn hoeken, zodat hij een plaat blijft en geen achtergrond wordt.

   DIT BLOK STAAT IN EEN MIN-WIDTH-QUERY, EN DAT IS GEEN DETAIL. Het stond er eerst zonder,
   en omdat het ná het mobiele blok staat en dezelfde specificiteit heeft, won het daarvan:
   op een telefoon werd de schermvullende tekening van 62vh teruggezet naar een strookje van
   9vh, met de veegbaan dicht en het verduisterde vlak eroverheen. Aan geen van beide blokken
   was dat te zien; ze waren allebei op zichzelf goed. */
@media (min-width: 901px) {
.fr-dijk.is-groot {
    /* Doorschijnend, zoals een venster hoort: je ziet dat de pagina er nog is en dat dit iets is
       dat je weer wegklikt. De vervaging erbij duwt de tekst en de kaarten eronder naar de
       achtergrond, zodat de plaat het onderwerp blijft. Kent de browser die vervaging niet, dan
       moet de kleur alleen de zaak leesbaar houden; vandaar de stevigere waarde in de terugval.

       LET OP bij het nameten: een opname uit een browser zonder scherm laat deze laag egaal
       donker zien, ook als de kleur aantoonbaar op 55 procent staat. Dat is de opnamemodus, niet
       de opmaak. Meet dit met getComputedStyle of op een echt scherm, niet op een schermafdruk. */
    /* Dezelfde dekking als de zustersite en zonder vervaging: de twee vensters horen er gelijk
       uit te zien, en `backdrop-filter` heeft hier eerder over knoppen heen geschilderd die een
       hogere z-index hadden (Chromium zet zo'n element in een eigen compositielaag). Een stevige
       dekking doet hetzelfde werk zonder dat risico. */
    background: rgba(20, 32, 28, 0.92);
    padding: clamp(1rem, 4vw, 3rem);
    overflow: hidden;
}
/* De tekening is bijna vijf keer zo breed als hoog. Op de volle vensterbreedte is hij daarmee
   maar een goeie 380 pixels hoog, en op een scherm van 1080 blijft er dan tweederde donker over.
   Hoger maken kan niet door de plaat op te rekken (dan verliest hij links en rechts de turfschuren
   en de sluis) maar wél door hem meer lucht te geven: het vak krijgt hier de verhouding 12:5 en de
   tekening zakt naar de onderrand. De ruimte die daarboven vrijkomt is het luchtdoek, en dat vult
   zichzelf al met de zon of de maan, de sterren en de wolken. Zo wordt het beeld ruim twee keer zo
   hoog zonder dat er iets van de tekening af gaat.

   Passen doet het zonder rekensom. Het vak is een flexkind dat mag krimpen (`flex: 0 1 auto` met
   `min-height: 0`): is er ruimte, dan krijgt het de volle 12:5; is die er niet, dan knijpt de
   flexbox het precies zoveel als de balk eronder nodig heeft. De breedte blijft daarbij honderd
   procent, dus de tekening zelf wordt nooit kleiner dan hij vóór deze wijziging was. Een vaste
   aftrek in `svh` zou dat niet halen: die moet raden hoe hoog de balk is, en die balk gaat op een
   smal venster of met grote letters over twee regels.

   LET OP: kadescene.js legt de eenheden van de tekening over dezelfde baan. Verandert deze
   verhouding, dan moet de `oy` daar mee: die zet de tekening onderaan in plaats van in het midden.
   Lopen ze uiteen, dan vaart de KH44 door de lucht. */
.fr-dijk.is-groot .fr-dijkscene {
    width: 100%;
    aspect-ratio: 960 / 200;
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
    border: 1px solid var(--kh-ink);
    border-radius: var(--fr-hoek);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
/* De hogere verhouding hangt aan het merkteken dat kadescene.js zet zodra de doeken echt tekenen.
   Staat het script uit, of heeft de bezoeker beweging uitgezet (dan slaat het script de tekenlus
   over en blijft alleen de statische tekening staan), dan is die extra ruimte geen lucht maar een
   leeg vlak. Voor die bezoeker blijft het vak dus precies de tekening, zoals het was. */
.fr-dijk.is-groot .fr-dijkscene[data-kh-levend] { aspect-ratio: 12 / 5; }
.fr-dijk.is-groot .fr-dijk-svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}
/* De titel hoort linksboven in het kader te staan. In de tekening zit hij vast op dertien procent
   van de plaathoogte, en omdat de plaat hier tegen de onderrand staat zakt hij mee naar het midden
   van het beeld. Daarom staat hier het losse tekstje en niet dat van de tekening; er is er altijd
   maar één van de twee te zien. De maat volgt de vensterbreedte, zoals de tekening zelf, zodat hij
   niet uit verhouding raakt als het kader krimpt. `pointer-events: none` omdat een klik op de plaat
   hem weer klein maakt en de titel dat niet in de weg mag zitten. */
.fr-dijk.is-groot .fr-dijkscene[data-kh-levend] .dp-titel { display: none; }
.fr-dijk.is-groot .fr-dijkscene[data-kh-levend] .fr-dijk-titel {
    display: block;
    position: absolute;
    left: 1.9%;
    top: 1.4rem;
    margin: 0;
    z-index: 3;
    pointer-events: none;
    font-family: var(--fr-sans);
    font-size: clamp(0.8rem, 1.1vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--kh-muted);
}
.fr-dijk.is-groot .fr-dijkvoet { display: none; }
/* In het venster staat de knop op het verduisterde vlak en niet op de plaat: daar zou hij weer
   over het beeld liggen. Hier mag hij wél altijd zichtbaar zijn, want dit is de weg terug voor
   wie niet weet dat klikken-ernaast ook werkt. */
.fr-dijk.is-groot .fr-dijk-groot-knop {
    position: fixed;
    top: 1rem;
    right: 1rem;
    opacity: 1;
    pointer-events: auto;
}
}

/* De kop boven de plaat, alleen in de grote weergave. De echte kop van de site ligt dan onder deze
   laag, en zonder logo is niet te zien op wiens site je kijkt.

   Hij staat in de flow en niet vast aan het scherm. Dat is bewust: op een kort venster moet hij
   ruimte innemen zodat het kader eronder krimpt, en niet eroverheen schuiven. De sluitknop
   rechtsboven staat wél vast, want die hoort bij het scherm en niet bij het beeld.

   Op het verduisterde vlak moet de merknaam licht zijn; de gewone inktkleur verdwijnt erin. */
@media (min-width: 901px) {
.fr-dijk.is-groot .fr-vensterkop {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-bottom: 0.9rem;
    /* Ruimte vrijhouden voor de knoppenbalk, die rechtsboven vast aan het scherm staat. Twee
       knoppen met een woord erop zijn breder dan het ronde icoontje van vroeger. */
    padding-right: 12rem;
}
.fr-dijk.is-groot .fr-merk-venster { color: #fff; }
.fr-dijk.is-groot .fr-merk-venster .fr-merk-naam { color: #fff; }
.fr-dijk.is-groot .fr-merk-venster .fr-merk-staart { color: var(--kh-tile); }
.fr-dijk.is-groot .fr-merk-venster .fr-merk-sub { color: rgba(255, 255, 255, 0.72); }
.fr-dijk.is-groot .fr-merk-venster:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; border-radius: 6px; }
/* De sluitknop staat tegenover het logo, op dezelfde afstand tot de rand als de opvulling van de
   laag. Stond hij op een vaste rem, dan hing hij hoger dan de kop en las het als twee losse
   dingen in plaats van één vensterrand. */
.fr-dijk.is-groot .fr-dijkscene > .fr-scene-bediening {
    display: flex;
    gap: 0.5rem;
    position: fixed;
    top: clamp(1rem, 4vw, 3rem);
    right: clamp(1rem, 4vw, 3rem);
    z-index: 3;
}
.fr-dijk.is-groot .fr-dijk-groot-knop {
    /* `relative` en niet `static`: de voortgangsstreep in de demoknop is absoluut gepositioneerd en
       zoekt zijn eerstvolgende gepositioneerde voorouder. Met `static` was dat de balk eromheen, en
       liep de streep dwars onder béíde knoppen door in plaats van in de demoknop. `relative` haalt
       de knop niet uit de flow, dus aan de balk verandert niets. De zustersite zet dezelfde regel
       op `.fr-scene-knop`. */
    position: relative;
    /* In het venster staat het woord erbij en is het geen rond icoontje meer: "Kleiner" zegt wat
       er gebeurt, een vergrootglas laat je raden. Gelijk aan de zustersite; Theo wil de twee
       vensters hetzelfde hebben en vroeg om te letten op leesbaarheid. */
    width: auto;
    height: auto;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    font: 700 0.8125rem/1 var(--fr-sans);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.fr-dijk.is-groot .fr-dijk-groot-knop [data-kh-dijk-label] { display: inline; }
.fr-dijk.is-groot .fr-dijk-demo { display: inline-flex; }
/* En `hidden` moet hem alsnog weg kunnen halen. De regel hierboven is een auteursregel en
   verslaat de `[hidden]`-regel uit de browserstijl altijd; zonder deze extra regel staat er dus
   gewoon een knop terwijl het script hem verborgen dénkt te hebben. Hij moet minstens even
   specifiek zijn als de regel die hem toont, vandaar dezelfde voorouders ervoor. Dit is in dit
   project eerder misgegaan. */
.fr-dijk.is-groot .fr-dijk-demo[hidden] { display: none; }
/* Loopt de demo, dan staat de knop in de volle accentkleur en niet in een doorzichtige tint: op het
   verduisterde vlak schijnt daar het donker doorheen en wordt juist de knop die aan staat de
   donkerste van de rij. Zelfde regel als bij de zustersite. */
.fr-dijk.is-groot .fr-dijk-demo[aria-pressed="true"] {
    background: var(--fr-groen);
    border-color: var(--fr-groen);
    color: var(--kh-on-accent);
}
}

/* Bij elke stap van de demo dimt de plaat even weg en komt hij weer op. Zonder dat springt het
   beeld van de ene stand in de andere en leest het als een verversing van de pagina in plaats van
   als een overgang. Wie beweging heeft uitgezet krijgt de sprong; die is dan het minste kwaad. */
@media (prefers-reduced-motion: no-preference) {
    /* Op de tekenlagen en niet op de omhulling: bij kolhorn zitten de sluitknop en de demoknop ín
       het vak, en die dimden mee. Dan knippert elke acht seconden de knop waarmee je het venster
       sluit, inclusief de voortgangsstreep erin. */
    .fr-demo-wissel > canvas,
    .fr-demo-wissel > svg,
    .fr-demo-wissel.fr-scene-doek { transition: opacity 0.35s ease; }
    .fr-demo-wissel.is-wisselen > canvas,
    .fr-demo-wissel.is-wisselen > svg,
    .fr-demo-wissel.fr-scene-doek.is-wisselen { opacity: 0.25; }
}

/* ── De demoknop ─────────────────────────────────────────────────────────────────────
   Hij staat alleen in de schermvullende stand, naast de sluitknop, en zet de plaat op
   zelfrijdend: om de zoveel seconden de volgende stand. Bedoeld voor een scherm in een
   zaal, waar niemand bij de muis staat.

   De streep onderin de knop loopt vol tot de volgende stap. Dat is het enige wat beweegt
   en het zegt precies genoeg: je ziet aankomen dat er zo iets verandert, zonder een
   klok of een aftelling die de aandacht van de plaat wegtrekt. Wie beweging heeft
   uitgezet, krijgt geen lopende streep maar een streep die per stap verspringt. */
.fr-demo-streep {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.28rem;
    height: 3px;
    border-radius: 999px;
    /* De baan is een lichte versie van de letterkleur, en dat gebeurt in de kleur zelf en niet met
       `opacity`. Met `opacity` op deze baan erft de vulling erin diezelfde doorzichtigheid, en dan
       is die niet meer van de baan te onderscheiden: dat is precies waarom Theo de streep niet zag
       vollopen. */
    background: color-mix(in srgb, currentColor 22%, transparent);
    overflow: hidden;
}
.fr-demo-streep > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: currentColor;
    transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
    .fr-demo-streep > span { transition: width 0.2s linear; }
}

/* De balk onder de plaat, alleen in de grote weergave. In de kaart staat hij er niet: daar is de
   ruimte krap en heeft de voet erboven al zijn knoppen. */
.fr-venstervoet { display: none; }
.fr-dijk.is-groot .fr-venstervoet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
}
.fr-venstervoet-credit {
    /* Iets groter dan de eerste opzet: op een schermvullende plaat las 0,85rem als kleine lettertjes
       onderaan, terwijl dit juist de credit is. Op verzoek van Theo. */
    font: 400 1rem/1.5 var(--fr-sans);
    /* Op het verduisterde vlak, dus niet de gewone inktkleur: die verdwijnt erin. */
    color: rgba(255, 255, 255, 0.72);
}
.fr-venstervoet-credit strong { color: #fff; font-weight: 600; }
/* De credit met het merk ernaast. Eén link om allebei heen, zodat er één doel is en niet twee
   naast elkaar die hetzelfde doen. */
.fr-venstervoet-merk {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    border-radius: 999px;
}
.fr-venstervoet-merk:hover .fr-venstervoet-credit,
.fr-venstervoet-merk:focus-visible .fr-venstervoet-credit { color: #fff; }
.fr-venstervoet-merk:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; }
/* Het logo is paars op wit. Op het verduisterde vlak verdwijnt dat, dus het houdt zijn eigen
   lichte schijfje: dat is de ondergrond waar het voor getekend is. */
.fr-venstervoet-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
    padding: 3px;
    border-radius: 50%;
    background: #FFFDF8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.fr-venstervoet-knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* De knoppen staan op het donkere vlak en niet op een kaart, dus ze dragen hun eigen rand mee. */
.fr-dijk.is-groot .fr-venstervoet .fr-dijkknop {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.fr-dijk.is-groot .fr-venstervoet .fr-dijkknop:hover { background: rgba(255, 255, 255, 0.18); }
.fr-dijk.is-groot .fr-venstervoet .fr-dijkknop[aria-pressed="true"] {
    background: var(--fr-groen);
    border-color: var(--fr-groen);
    color: var(--kh-on-accent);
}

/* De kantelknop. Staand schermvullend is de tekening leesbaar maar klein; gekanteld komt de
   brede tekening met alle details. De draaivergrendeling van een telefoon staat meestal aan, dus
   draaien alleen helpt niet: deze knop vraagt het toestel er zelf om. Kan het toestel dat niet
   (op iOS bestaat het niet), dan zegt de knop wat je zelf moet doen. */
.fr-kantelknop {
    display: none;
    position: fixed;
    top: max(0.75rem, env(safe-area-inset-top));
    left: 0.75rem;
    z-index: 3;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    min-height: 34px;
    border: 1px solid var(--kh-ink);
    border-radius: 999px;
    background: var(--fr-kaart);
    color: var(--kh-ink);
    font: 600 0.75rem/1 'Manrope', system-ui, sans-serif;
    cursor: pointer;
}
.fr-kantelknop i { font-size: 0.95rem; }

/* ── Diezelfde balk op een telefoon ───────────────────────────────────────────────────
   Schermvullend is de tekening daar veel breder dan het scherm en schuift hij opzij. Stond de
   balk in die baan, dan veegde je hem mee weg en lagen de knoppen buiten beeld; hij ligt dus
   vast onderaan. Het donkere vlak houdt hij, want de witte tekst en de knoprand erop zijn
   daarvoor gemaakt en de tekening eronder is overdag van papierkleur.

   DIT BLOK STAAT HIER EN NIET BIJ DE REST VAN HET MOBIELE WERK, EN DAT IS EXPRES. De regels
   hierboven hebben precies dezelfde specificiteit, dus de laatste wint. Zet je dit eerder in
   het bestand, dan krijgt de balk stilletjes de uitlijning en de tussenruimte van het
   desktopvenster terug. */
@media (max-width: 900px) {
    .fr-dijk.is-groot .fr-venstervoet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: 0;
        padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
        gap: 0.4rem 0.6rem;
        justify-content: center;
        background: rgba(20, 32, 28, 0.92);
    }
    /* Kleiner, zodat de drie knoppen naast elkaar passen in plaats van op twee regels. De
       aanraakhoogte blijft ruim boven wat een vinger nodig heeft. */
    .fr-dijk.is-groot .fr-venstervoet .fr-dijkknop {
        font: 700 0.72rem/1 'Manrope', system-ui, sans-serif;
        padding: 0.5rem 0.6rem;
        min-height: 36px;
    }
    .fr-dijk.is-groot .fr-venstervoet-credit { font-size: 0.85rem; }
    .fr-dijk.is-groot .fr-venstervoet-logo { width: 32px; height: 32px; }
}

/* De lampen en de ramen gaan 's avonds aan. Dat is opmaak en geen script: bij het nachtthema
   én bij een systeem dat op donker staat, want dan zet het CMS geen attribuut. */
.fr-dijk .dp-lamp { fill: var(--kh-ink); }
.fr-dijk .dp-gloed { fill: #F2CE79; opacity: 0; transition: opacity 0.5s ease; }
html[data-thema="donker"] .fr-dijk .dp-lamp { fill: #F2CE79; }
html[data-thema="donker"] .fr-dijk .dp-gloed { opacity: 0.32; }
html[data-thema="donker"] .fr-dijk .dp-raam { fill: #EBC26B; opacity: 0.95; }
/* Een deur is een gat. In de dag is dat de inktkleur, maar 's nachts slaat inkt om naar licht
   en zou de deur in de gevel verdwijnen; dan is de achtergrondkleur het gat. Hetzelfde geldt
   voor de wijzerplaat in de toren: die is op de kerk van Kolhorn een donkere plaat met gouden
   cijfers, dag en nacht. */
.fr-dijk .dp-deur { fill: var(--kh-ink); opacity: 0.7; }
.fr-dijk .dp-wijzerplaat { fill: var(--kh-ink); }
html[data-thema="donker"] .fr-dijk .dp-deur { fill: var(--kh-bg); opacity: 0.9; }
html[data-thema="donker"] .fr-dijk .dp-wijzerplaat { fill: var(--kh-bg); }
@media (prefers-color-scheme: dark) {
    html[data-thema="auto"] .fr-dijk .dp-lamp { fill: #F2CE79; }
    html[data-thema="auto"] .fr-dijk .dp-gloed { opacity: 0.32; }
    html[data-thema="auto"] .fr-dijk .dp-raam { fill: #EBC26B; opacity: 0.95; }
    html[data-thema="auto"] .fr-dijk .dp-deur { fill: var(--kh-bg); opacity: 0.9; }
    html[data-thema="auto"] .fr-dijk .dp-wijzerplaat { fill: var(--kh-bg); }
}

/* De waterlijn schuift een paar pixels op bij hover: genoeg om te merken dat het leeft, te
   weinig om af te leiden. Wie beweging heeft uitgezet krijgt hem niet. */
.fr-dijk .waterlijn { transition: transform 0.5s ease; }
.fr-dijk:hover .waterlijn { transform: translateX(3px); }

.fr-dijkvoet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--fr-rand);
    padding: 0.65rem 1rem;
}
.fr-dijkvoet-tekst { font: 400 0.8rem/1.5 var(--fr-sans); color: var(--fr-stil); }
.fr-dijkvoet-knoppen { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.fr-dijkknop {
    border: 1px solid var(--fr-groen);
    background: transparent;
    color: var(--fr-groen);
    font: 700 0.85rem/1.4 var(--fr-sans);
    padding: 0.45rem 0.9rem;
    border-radius: var(--fr-hoek-klein);
    cursor: pointer;
}
.fr-dijkknop:hover { background: var(--fr-groen); color: var(--kh-on-accent); }
.fr-dijkknop[aria-pressed="true"] { background: var(--fr-groen); color: var(--kh-on-accent); }

@media (max-width: 700px) {
    .fr-dijk-svg-breed { display: none; }
    .fr-dijk-svg-smal { display: block; }
    .fr-dijkvoet { padding: 0.6rem 0.85rem; }

    /* De tekening is een strook van drie bij een: op een telefoon werd dat honderd pixels hoog,
       en dan is het meer een streep dan een beeld. Met `slice` vult hij een hogere baan en valt
       er links en rechts een randje af in plaats van dat er iets wordt uitgerekt. */
    /* De hoofdkolom zet zelf al veertig pixels tussen de blokken; de marge hier kwam daar
       bovenop en maakte er tweeënvijftig van. Een stukje terugnemen brengt de tekening dichter
       bij de tekst waar hij bij hoort, zonder de kolomafstand overal aan te tasten. */
    .fr-dijk { margin-top: -1rem; }
    .fr-dijkscene { height: 165px; }
    .fr-dijk-svg-smal { height: 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .fr-dijk:hover .waterlijn { transform: none; }
    /* De scène start hier niet, dus kadescene.js koppelt de pakjesbootknop ook niet. Een knop
       die niets doet is erger dan geen knop. Datzelfde geldt voor de nachtmarkt: die leeft
       helemaal op het doek, en dat doek blijft hier leeg. */
    .fr-dijkknop[data-kh-pakjesboot],
    .fr-dijkknop[data-kh-nachtmarkt] { display: none; }
}

/* Een agenda-item dat al geweest is. Stil, geen waarschuwing: het is nog steeds informatie,
   alleen niet meer actueel. */
.fr-agenda-geweest {
    margin: 0.6rem 0 0;
    padding: 0.45rem 0.8rem;
    border-left: 3px solid var(--fr-rand);
    font: 500 0.875rem/1.5 var(--fr-sans);
    color: var(--fr-stil);
}

/* Agenda: een datumblokje links, de aankondiging rechts. Het blokje mag leeg blijven; een
   aankondiging zonder datum ("bij voldoende ijs") houdt dan zijn plek in de rij. */
.fr-agenda-blok { margin-top: 1.5rem; }
.fr-agenda-blok .fr-kicker-mono { color: var(--fr-stil); }
.fr-agenda-blok.is-archief { opacity: 0.72; }
.fr-agenda-lijst { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.fr-agenda-regel {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.75rem 0.1rem;
    border-bottom: 1px solid var(--fr-rand);
}
.fr-agenda-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.2rem;
    border-radius: var(--fr-hoek-klein);
    background: var(--fr-tint);
    color: var(--fr-groen);
    text-align: center;
    line-height: 1.15;
}
.fr-agenda-datum strong { font: 700 1.0625rem/1.15 var(--fr-sans); font-variant-numeric: tabular-nums; }
.fr-agenda-datum span { font: 600 0.6875rem/1.3 var(--fr-sans); text-transform: uppercase; letter-spacing: 0.06em; }
.fr-agenda-tekst { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.fr-agenda-titel { font: 600 1rem/1.4 var(--fr-sans); color: var(--fr-tekst); text-decoration: none; }
a.fr-agenda-titel:hover { color: var(--fr-blauw); }
.fr-agenda-lead { font: 400 0.9375rem/1.55 var(--fr-sans); color: var(--fr-tekst); }
.fr-agenda-meta { font: 400 0.8125rem/1.5 var(--fr-sans); color: var(--fr-stil); }
@media (max-width: 420px) {
    .fr-agenda-regel { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.7rem; }
}

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

/* Dezelfde kanttekening als op de verenigingenpagina, maar in de rail is er geen ruimte voor
   woorden: één vraagteken met de uitleg in de titel. */
.fr-clubs-vlag {
    display: inline-block;
    min-width: 1.05em;
    padding: 0 0.25em;
    border-radius: 999px;
    background: var(--fr-tint);
    color: var(--fr-stil);
    font: 600 0.6875rem/1.5 var(--fr-sans);
    text-align: center;
}
.fr-clublijst-vlag {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--fr-rand);
    border-radius: 999px;
    font: 500 0.6875rem/1.5 var(--fr-sans);
    color: var(--fr-stil);
    text-transform: none;
    letter-spacing: 0;
}

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

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

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

/* ── 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. */

@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-bocht { animation: none; }
}

/* ── 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. */

.portal-contact-card-v1473 h1 { font-size: 1.5rem; margin: 0 0 0.3rem; }

/* ── 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. */

@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;
        /* Het label mag nooit afbreken. Zonder dit brak "VERENIGINGEN" op een telefoon van 390 px
           over twee regels, werd de hele balk hoger en stond dat ene woord scheef onder de rest.
           De gedeelde onderbalk had deze regel wel; die ging hier verloren bij het overschrijven. */
        white-space: nowrap;
        min-width: 0;
    }
    /* Past het bij die twaalf letters alsnog net niet, dan liever een punt te weinig dan een
       kapotte balk. */
    .portal-bottom-nav-item-v20 > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Op de smalste telefoons is een vijfde van 375 px te weinig voor het langste woord. Iets
       kleiner en met minder letterruimte past het wel, en blijft het leesbaar. */
    @media (max-width: 420px) {
        .portal-bottom-nav-item-v20 { font-size: 0.5625rem; letter-spacing: 0.04em; padding: 8px 2px; }
    }
    .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-voet-tekst); }

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

/* ── 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-dijklijn {
    display: block;
    width: 100%;
    height: 2.25rem;
    margin-bottom: -1px;
    color: var(--fr-voet);
}