/* Skip-to-content: onzichtbaar tot toetsenbord-focus, dan een duidelijke banner bovenaan. */
.skip-to-content{
    position:absolute;
    left:8px;
    top:-56px;
    z-index:2000;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:10px 18px;
    border-radius:0 0 12px 12px;
    background:#0f4779;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 6px 20px rgba(5,13,28,.28);
    transition:top .18s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible{
    top:0;
    outline:3px solid #fff;
    outline-offset:2px;
}
.site-main-content-v10:focus{outline:none}

body.site-body[class*="site-theme-"]{
    --local-bg:#eef1fb;
    --local-panel:#ffffff;
    --local-panel-strong:#ffffff;
    --local-panel-muted:#f2f5fc;
    --local-text:#141b2d;
    --local-muted:#5a6b82;
    --local-line:rgba(20,30,55,.13);
    --local-brand:#5b53f0;
    --local-brand-dark:#332a9e;
    --local-accent:#18a3a4;
    --local-warm:#e4b45b;
    --local-danger:#b42318;
    --local-shadow:0 14px 34px rgba(20,30,60,.10);
    --local-header:rgba(255,255,255,.9);
    --local-header-text:#141b2d;
    --local-page-bg:
        radial-gradient(1100px 460px at 82% -12%,rgba(91,83,240,.12),transparent 62%),
        radial-gradient(900px 420px at 0% 6%,rgba(24,163,164,.07),transparent 60%),
        linear-gradient(180deg,#f7f8ff 0%,#eef1fb 100%);
    --local-hero-bg:
        radial-gradient(circle at 86% 12%,rgba(130,120,255,.26),transparent 44%),
        linear-gradient(135deg,#161a3c 0%,#211a55 46%,#3a2f8e 100%);
    --local-footer-highlight:var(--local-accent);
    background:var(--local-page-bg);
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* ============================================================
   #6 Eén bron van waarheid voor tokens.
   Het basis-thema (themes/default/theme.css) definieert --portal-* hardcoded op
   Lodewijk-paars. Koppel die aan de per-thema --local-*-tokens, zodat elementen die
   alleen via --portal-* gekleurd zijn (mobiele switchboard-summary-iconen, feature-cards)
   de thema-kleur volgen i.p.v. Lodewijk-paars op andere thema's (bv. Julianadorp-blauw).
   Hogere specificiteit + latere bron dan het basis-thema, dus dit wint.
   ============================================================ */
body[class*="site-theme-"] .portal-home-v147,
body[class*="site-theme-"] .portal-contact-v1473,
body.site-body[class*="site-theme-"]{
    --portal-brand:var(--local-brand);
    --portal-brand-dark:var(--local-brand-dark);
    --portal-ink:var(--local-text);
    --portal-muted:var(--local-muted);
    --portal-line:var(--local-line);
    --portal-panel:var(--local-panel);
    --portal-soft:var(--local-panel-muted);
}

.site-brand-v10{display:flex;align-items:center;gap:10px;min-width:0}
.site-brand-mark-v1024{
    width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;
    border-radius:8px;background:linear-gradient(135deg,var(--local-brand),var(--local-accent));
    color:#fff;font-weight:950;font-size:1rem;line-height:1;
    box-shadow:0 10px 24px rgba(0,0,0,.16)
}
.site-brand-copy-v1024{display:block;min-width:0}.site-brand-copy-v1024 .site-brand-title{white-space:normal}

body[class*="site-theme-"] .site-header-v10{
    background:var(--local-header);
    border-bottom:1px solid rgba(23,32,51,.12);
    backdrop-filter:blur(16px);
}
body[class*="site-theme-"] .site-brand-title{color:var(--local-header-text);font-weight:950}
body[class*="site-theme-"] .site-brand-v10 small,
body[class*="site-theme-"] .site-main-menu-v10 .nav-link{color:rgba(23,32,51,.70)}
body[class*="site-theme-"] .site-main-menu-v10 .nav-link:hover{
    background:rgba(255,255,255,.62);
    color:var(--local-brand-dark)!important;
}
body[class*="site-theme-"] .site-account-button,
body[class*="site-theme-"] .site-login-v10,
body[class*="site-theme-"] .site-register-v10{
    border-color:rgba(23,32,51,.12);
    background:rgba(255,255,255,.62);
    color:var(--local-header-text);
    box-shadow:0 10px 24px rgba(5,13,28,.06);
}

body[class*="site-theme-"] .site-main-content-v10{padding:0;min-height:calc(100vh - 56px)}
body[class*="site-theme-"] .portal-home-v147,
body[class*="site-theme-"] .portal-contact-v1473,
body[class*="site-theme-"] .portal-auth-v148{
    background:var(--local-page-bg);
    min-height:calc(100vh - 56px);
}

body[class*="site-theme-"] .portal-home-v147,
body[class*="site-theme-"] .portal-contact-v1473,
body[class*="site-theme-"] .portal-auth-v148{
    padding:clamp(18px,2.1vw,34px);
}
body[class*="site-theme-"] .portal-home-inner-v147,
body[class*="site-theme-"] .portal-contact-v1473,
body[class*="site-theme-"] .portal-auth-v148{
    gap:clamp(16px,1.35vw,24px);
}
body[class*="site-theme-"] .portal-panel-v147,
body[class*="site-theme-"] .portal-hero-card-v147,
body[class*="site-theme-"] .portal-feature-grid-v147 article,
body[class*="site-theme-"] .portal-content-card-v147,
body[class*="site-theme-"] .portal-maker-strip-v147,
body[class*="site-theme-"] .portal-contact-card-v1473,
body[class*="site-theme-"] .portal-auth-card-v148,
body[class*="site-theme-"] .portal-mobile-switchboard-v147 details{
    border:1px solid var(--local-line);
    background:var(--local-panel);
    box-shadow:var(--local-shadow);
}
body[class*="site-theme-"] .portal-panel-v147{top:82px;border-radius:14px;overflow:hidden}
body[class*="site-theme-"] .portal-panel-v147 h2{
    background:linear-gradient(135deg,var(--local-brand-dark),var(--local-brand));
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14);
}
body[class*="site-theme-"] .portal-link-list-v147 a,
body[class*="site-theme-"] .portal-local-list-v147 a,
body[class*="site-theme-"] .portal-local-list-v147 span{
    color:var(--local-text);
    border-top-color:rgba(23,32,51,.10);
}
body[class*="site-theme-"] .portal-link-list-v147 a:hover,
body[class*="site-theme-"] .portal-local-list-v147 a:hover{
    background:var(--local-panel-muted);
    color:var(--local-brand-dark);
}
body[class*="site-theme-"] .portal-link-list-v147 i,
body[class*="site-theme-"] .portal-local-list-v147 i,
body[class*="site-theme-"] .portal-eyebrow-v147,
body[class*="site-theme-"] .portal-section-label-v147,
body[class*="site-theme-"] .portal-feature-grid-v147 i{
    color:var(--local-brand);
}
body[class*="site-theme-"] .portal-local-list-v147 small{color:var(--local-muted)}

/* v014.10.87 Donker, samenhangend hero-blok met geïntegreerde foto (basis-thema). */
body[class*="site-theme-"] .portal-hero-card-v147{
    position:relative;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    gap:clamp(18px,2.6vw,40px);
    min-height:clamp(260px,24vw,360px);
    padding:clamp(26px,3.1vw,52px);
    border-color:rgba(255,255,255,.09);
    background:var(--local-hero-bg);
    color:#fff;
    overflow:hidden;
    box-shadow:0 26px 58px rgba(5,13,28,.24);
}
/* Premium visueel accent voor de (foto-loze) hero: subtiele merk-glow + fijne diagonale lijnen. */
body[class*="site-theme-"] .portal-hero-card-v147::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(560px 320px at 92% -18%,rgba(255,255,255,.13),transparent 58%),
        repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px 24px);
    opacity:.7;
    pointer-events:none;
}
/* Image-mode: accent alleen achter de tekst (links) — gemaskeerd zodat het niet over de foto valt. */
body[class*="site-theme-"].portal-visual-image .portal-hero-card-v147::before{
    background:
        radial-gradient(480px 280px at 4% -8%,rgba(255,255,255,.12),transparent 58%),
        repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 24px);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 44%,transparent 62%);
    mask-image:linear-gradient(90deg,#000 0%,#000 44%,transparent 62%);
    opacity:.6;
}
/* Image-mode blijft óók donker: de foto zit geïntegreerd in de donkere kaart (2 kolommen op desktop). */
body[class*="site-theme-"].portal-visual-image .portal-hero-card-v147{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    background:var(--local-hero-bg);
    color:#fff;
}
body[class*="site-theme-"] .portal-hero-copy-v147{
    position:relative;
    z-index:2;
    min-width:0;
}
body[class*="site-theme-"] .portal-hero-card-v147 .portal-eyebrow-v147{
    color:rgba(255,255,255,.66);
    letter-spacing:.14em;
    font-size:.78rem;
}
/* Gecontroleerde, elegante kop-schaal — geen schreeuwerige reuzeletters. */
body[class*="site-theme-"] .portal-hero-copy-v147 h1{
    color:#fff;
    font-size:clamp(1.9rem,2.7vw,3.05rem);
    line-height:1.06;
    font-weight:850;
    letter-spacing:-.01em;
    text-shadow:0 6px 24px rgba(0,0,0,.24);
    overflow-wrap:break-word;
}
body[class*="site-theme-"] .portal-lead-v147{
    color:rgba(255,255,255,.9);
    font-size:clamp(1rem,1.15vw,1.2rem);
    font-weight:700;
}
body[class*="site-theme-"] .portal-intro-v147{
    color:rgba(255,255,255,.72);
    font-size:.98rem;
}
body[class*="site-theme-"] .portal-hero-card-v147 .portal-trust-v20 li{color:rgba(255,255,255,.9)}
body[class*="site-theme-"] .portal-hero-card-v147 .portal-trust-v20 i{color:#fff}
body[class*="site-theme-"] .portal-primary-v147,
body[class*="site-theme-"] .portal-contact-card-v1473 button,
body[class*="site-theme-"] .portal-auth-form-v148 button,
body[class*="site-theme-"] .portal-auth-button-v148{
    border-color:var(--local-brand);
    background:var(--local-brand);
    border-radius:10px;
}
body[class*="site-theme-"] .portal-primary-v147:hover,
body[class*="site-theme-"] .portal-contact-card-v1473 button:hover,
body[class*="site-theme-"] .portal-auth-form-v148 button:hover,
body[class*="site-theme-"] .portal-auth-button-v148:hover{
    border-color:var(--local-brand-dark);
    background:var(--local-brand-dark);
}
/* Passkey-login bij de 2FA-stap (v014.10.159) */
.portal-passkey-2fa-v159{display:grid;gap:12px;margin-bottom:4px}
.portal-passkey-btn-v159{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px 18px;border-radius:10px;border:1px solid var(--local-brand,#2b59c3);background:var(--local-brand,#2b59c3);color:#fff;font-weight:800;font-size:1rem;cursor:pointer;transition:filter .15s ease,transform .15s ease}
.portal-passkey-btn-v159:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.portal-passkey-btn-v159:disabled{opacity:.6;cursor:default}
.portal-passkey-btn-v159 i{font-size:1.2rem}
.portal-auth-divider-v159{display:flex;align-items:center;gap:12px;margin:6px 0;color:var(--local-muted,#64748b);font-size:.82rem;font-weight:700}
.portal-auth-divider-v159::before,.portal-auth-divider-v159::after{content:"";flex:1;height:1px;background:var(--local-line,rgba(100,116,139,.28))}
/* CTA-secondary: wit binnen de donkere hero, licht daarbuiten (404/contact). */
body[class*="site-theme-"] .portal-hero-card-v147 .portal-secondary-v147{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.32);
    color:#fff;
}
body[class*="site-theme-"] .portal-hero-card-v147 .portal-secondary-v147:hover{
    background:rgba(255,255,255,.22);
    color:#fff;
}
body[class*="site-theme-"] .portal-feature-grid-v147 article,
body[class*="site-theme-"] .portal-content-card-v147,
body[class*="site-theme-"] .portal-maker-strip-v147,
body[class*="site-theme-"] .portal-contact-card-v1473,
body[class*="site-theme-"] .portal-auth-card-v148{
    border-radius:14px;
    color:var(--local-text);
}
body[class*="site-theme-"] .portal-feature-grid-v147 article{background:var(--local-panel)}
body[class*="site-theme-"] .portal-feature-grid-v147 strong,
body[class*="site-theme-"] .portal-content-card-v147 h2,
body[class*="site-theme-"] .portal-contact-card-v1473 h1,
body[class*="site-theme-"] .portal-auth-card-v148 h1{color:var(--local-text)}
body[class*="site-theme-"] .portal-feature-grid-v147 span,
body[class*="site-theme-"] .portal-content-card-v147 p,
body[class*="site-theme-"] .portal-contact-card-v1473 .lead,
body[class*="site-theme-"] .portal-auth-card-v148 .lead{color:var(--local-muted)}
/* Foto geïntegreerd in de donkere kaart — geen los licht kader, alleen een zachte glow + schaduw. */
body[class*="site-theme-"] .portal-hero-image-v147{
    position:relative;
    align-self:center;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
    /* Zachte, gefeatherde spotlight áchter de foto: bus wordt natuurlijk verlicht,
       geen paarse waas, geen harde rand. */
    background:radial-gradient(76% 80% at 58% 48%,rgba(255,255,255,.16),rgba(255,255,255,.05) 46%,transparent 72%);
}
body[class*="site-theme-"] .portal-hero-image-v147::after{
    content:"";
    position:absolute;
    left:50%;bottom:6%;
    transform:translateX(-50%);
    width:70%;height:16%;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(0,0,0,.28),transparent 72%);
    filter:blur(6px);
    pointer-events:none;
}
/* De hero kan in een <picture> gewikkeld zijn (responsieve varianten). display:contents
   houdt de <img> het directe flex-item van de figure, zodat de breedteregels hieronder
   exact hetzelfde werken als zonder wrapper. */
body[class*="site-theme-"] .portal-hero-image-v147 picture{
    display:contents;
}
body[class*="site-theme-"] .portal-hero-image-v147 img{
    position:relative;
    z-index:1;
    width:min(100%,540px);
    height:auto;
    max-height:clamp(180px,19vw,290px);
    min-height:0;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.32));
}
/* Compactere, subtielere zijbalken — lichte header met merk-tekst i.p.v. dikke gradient-balk. */
body[class*="site-theme-"] .portal-panel-v147{border-radius:12px}
body[class*="site-theme-"] .portal-panel-v147 h2{
    background:var(--local-panel-strong);
    color:var(--local-brand-dark);
    border-bottom:1px solid var(--local-line);
    padding:9px 14px;
    font-size:.72rem;
    font-weight:850;
    letter-spacing:.06em;
    text-transform:uppercase;
}
body[class*="site-theme-"] .portal-link-list-v147 a,
body[class*="site-theme-"] .portal-local-list-v147 a,
body[class*="site-theme-"] .portal-local-list-v147 span{
    min-height:38px;
    padding:8px 14px;
    font-size:.86rem;
    font-weight:750;
}
body[class*="site-theme-"] .portal-link-list-v147 i,
body[class*="site-theme-"] .portal-local-list-v147 i{font-size:.95rem}
/* Kop-schaal op mobiel: compact en gecontroleerd. */
@media(max-width:700px){
    body[class*="site-theme-"] .portal-hero-copy-v147 h1{font-size:clamp(1.7rem,7vw,2.3rem);line-height:1.08}
}
body[class*="site-theme-"] .portal-maker-icon-v147,
body[class*="site-theme-"] .portal-auth-brand-v148 .admin-logo-mark{
    background:var(--local-panel-muted);
    color:var(--local-brand);
    box-shadow:inset 0 0 0 1px rgba(23,32,51,.10);
}
body[class*="site-theme-"] input,
body[class*="site-theme-"] textarea,
body[class*="site-theme-"] select,
body[class*="site-theme-"] .portal-auth-form-v148 input{
    max-width:100%;
    min-width:0;
    border-color:rgba(23,32,51,.18);
    background:rgba(255,255,255,.72);
}
body[class*="site-theme-"] input:focus,
body[class*="site-theme-"] textarea:focus,
body[class*="site-theme-"] select:focus,
body[class*="site-theme-"] .portal-auth-form-v148 input:focus{
    border-color:var(--local-brand);
    outline-color:rgba(97,85,242,.16);
}

/* Wachtwoord tonen/verbergen — generieke oog-knop (auto-geïnjecteerd door password-reveal.js).
   Defensief: op auth-pagina's styling `.portal-auth-form-v148 button` álle knoppen als volle-breedte
   primaire knop (specificiteit 0,2,2). Het oogje mag daar niet in meegaan (het overdekte anders het
   hele veld), dus we forceren hier een klein, transparant icoontje rechts in het veld — !important. */
.pw-reveal-field{position:relative;display:block}
.pw-reveal-field input{padding-right:46px}
.pw-reveal-field .pw-reveal-toggle{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;height:auto!important;min-height:0!important;width:46px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;cursor:pointer;color:var(--local-muted,#64748b);transition:color .15s ease}
.pw-reveal-field .pw-reveal-toggle:hover,.pw-reveal-field .pw-reveal-toggle:focus-visible{color:var(--local-brand,#2b59c3);background:transparent!important}

@media(max-width:1280px){
    body[class*="site-theme-"].portal-visual-image .portal-hero-card-v147{grid-template-columns:1fr}
}
@media(min-width:1680px){
    body[class*="site-theme-"].portal-visual-image .portal-hero-card-v147{
        grid-template-columns:minmax(0,.94fr) minmax(340px,1.06fr);
    }
}
@media(max-width:700px){
    body[class*="site-theme-"]{background-attachment:scroll}
    .site-brand-mark-v1024{width:30px;height:30px;flex-basis:30px}
    body[class*="site-theme-"] .portal-home-v147,
    body[class*="site-theme-"] .portal-contact-v1473,
    body[class*="site-theme-"] .portal-auth-v148{
        padding:12px;
    }
    body[class*="site-theme-"] .portal-hero-card-v147,
    body[class*="site-theme-"] .portal-content-card-v147,
    body[class*="site-theme-"] .portal-contact-card-v1473,
    body[class*="site-theme-"] .portal-auth-card-v148{
        border-radius:14px;
        padding:20px;
    }
    body[class*="site-theme-"] .portal-hero-copy-v147{min-width:0}
    body[class*="site-theme-"] .portal-hero-copy-v147 h1{
        font-size:clamp(2rem,9vw,2.75rem);
        line-height:1.03;
        overflow-wrap:anywhere;
        word-break:break-word;
        hyphens:auto;
    }
    body[class*="site-theme-"] .portal-intro-v147,
    body[class*="site-theme-"] .portal-lead-v147{
        overflow-wrap:break-word;
    }
    body[class*="site-theme-"] .portal-actions-v147 a{
        max-width:100%;
        white-space:normal;
        text-align:center;
    }
    body[class*="site-theme-"] .portal-hero-image-v147{
        min-height:220px;
    }
    body[class*="site-theme-"] .portal-hero-image-v147 img{
        width:min(100%,520px);
        max-height:260px;
    }
}

/* v014.10.77 404 + feature-grid responsive voor _local_portal */
body[class*="site-theme-"] .portal-not-found-v147{
    background:var(--local-page-bg);
    min-height:calc(100vh - 56px);
}
body[class*="site-theme-"] .portal-not-found-card-v147{
    border-color:var(--local-line);
    background:var(--local-panel);
    color:var(--local-text);
}
body[class*="site-theme-"] .portal-not-found-card-v147 h1{
    color:var(--local-text);
}
body[class*="site-theme-"] .portal-not-found-card-v147 .portal-lead-v147{
    color:var(--local-muted);
}
@media(max-width:700px){
    body[class*="site-theme-"] .portal-feature-grid-v147{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ============================================================
   Portal bottom nav + slide-up panels — mobiel (≤991.98px)
   ============================================================ */

.portal-bottom-nav-v20{
    display:none;
    position:fixed;
    bottom:0;left:0;right:0;
    /* Boven de slide-panelen (1200): de balk staat ervóór, zodat de panelen
       er ACHTER langs omhoog/omlaag komen (net als de hamburger-dropdown). */
    z-index:1300;
    min-height:56px;
    padding-bottom:env(safe-area-inset-bottom);
    padding-inline:2px;
    align-items:stretch;
    background:var(--local-panel-strong,rgba(244,248,250,.98));
    border-top:1px solid var(--local-line,rgba(23,32,51,.14));
    box-shadow:0 -4px 20px rgba(5,13,28,.10);
    /* GEEN backdrop-filter: de balk is dekkend (--local-panel-strong=#fff), dus de
       blur was onzichtbaar maar dwong de browser elke frame de ACHTER de balk
       omhoog schuivende paneel-inhoud te herblurren → zichtbare trilling ("bibber").
       Weglaten = identiek beeld, vloeiende animatie. */
}

@media (max-width:991.98px){
    .portal-bottom-nav-v20{display:flex;}

    /* Body ruimte zodat content niet achter de tab bar valt */
    body.site-body{
        padding-bottom:calc(56px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   Bottom-nav-items (mobiel) — <button>/<a>. Eén samenhangend blok.
   Het default-thema zet globaal button{background:--site-primary;color:#fff} +
   button:hover{background:--site-primary-dark} (#0f4779, donkernavy). Door élke
   regel hier de body-prefix te geven (specificiteit hoger dan button:hover) wint
   de eigen transparante achtergrond in álle states — de knop blijft dus altijd
   transparant en toont enkel de eigen lichte brand-pill. Geen losse
   :hover/:focus/:active-uitzonderingen meer nodig.
   ============================================================ */
body[class*="site-theme-"] .portal-bottom-nav-item-v20{
    flex:1;
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:6px 4px;
    border:0;
    border-radius:16px;
    -webkit-appearance:none;appearance:none;
    background:transparent;                    /* wint van button:hover (#0f4779) */
    color:#3a4f64;                             /* inactief label, goed contrast */
    text-decoration:none;
    font-size:.75rem;
    font-weight:750;
    letter-spacing:.01em;
    white-space:nowrap;
    cursor:pointer;
    outline:none;                              /* geen harde UA-ring; de pill is de feedback */
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:color .15s;
}
body[class*="site-theme-"] .portal-bottom-nav-item-v20 i{
    font-size:1.28rem;
    line-height:1;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
/* De zachte, lichte, afgeronde brand-pill = de enige feedback (tik/selectie/focus). */
body[class*="site-theme-"] .portal-bottom-nav-item-v20::before{
    content:"";
    position:absolute;
    inset:4px 8px;
    border-radius:14px;
    background:var(--local-brand,#5b53f0);
    opacity:0;
    transform:scale(.85);
    transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1);
    pointer-events:none;
    z-index:-1;
}
/* Geselecteerd (huidige route), open paneel, of toetsenbord-focus → brand + pill. */
body[class*="site-theme-"] .portal-bottom-nav-item-v20.is-active,
body[class*="site-theme-"] .portal-bottom-nav-item-v20[aria-expanded="true"]{
    color:var(--local-brand,#5b53f0);
}
body[class*="site-theme-"] .portal-bottom-nav-item-v20.is-active::before,
body[class*="site-theme-"] .portal-bottom-nav-item-v20[aria-expanded="true"]::before,
body[class*="site-theme-"] .portal-bottom-nav-item-v20:focus-visible::before{
    opacity:.12;
    transform:scale(1);
}
body[class*="site-theme-"] .portal-bottom-nav-item-v20.is-active i,
body[class*="site-theme-"] .portal-bottom-nav-item-v20[aria-expanded="true"] i{
    transform:scale(1.06);
}
/* Ingedrukt → iets sterkere pill + korte icoon-druk. */
body[class*="site-theme-"] .portal-bottom-nav-item-v20:active::before{
    opacity:.16;
    transform:scale(1);
    transition-duration:.08s;
}
body[class*="site-theme-"] .portal-bottom-nav-item-v20:active i{
    transform:scale(.9);
    transition-duration:.08s;
}

/* Avatar in bottom nav */
.portal-bottom-nav-avatar-v20{
    width:24px;height:24px;
    border-radius:50%;
    overflow:hidden;
    display:grid;place-items:center;
    background:var(--local-brand,#6155f2);
    color:#fff;
    font-size:.92rem;
}
.portal-bottom-nav-avatar-v20 img{
    width:100%;height:100%;object-fit:cover;
}

/* ---- Slide-up panelen ---- */

.portal-slide-panel-v20{
    display:flex;
    position:fixed;
    inset:0;
    z-index:1200;
    align-items:flex-end;
    /* Geen overflow:hidden hier: de dekkende balk (z-index 1300) verbergt de body
       onder de balk al, en de viewport clipt het deel onder het scherm. Een extra
       clip-rand gaf sub-pixel-jitter tijdens het omhoog schuiven. (De hamburger
       #portalHeaderPanel houdt z'n eigen overflow:hidden voor de reveal-boven.) */
    visibility:hidden;
    pointer-events:none;
    transition:visibility 0s 280ms;
}
.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(5,13,28,.42);
    opacity:0;
    transition:opacity 260ms cubic-bezier(0.25,0.46,0.45,0.94);
    cursor:pointer;
}
.portal-slide-panel-v20.is-open .portal-slide-backdrop-v20{opacity:1;}

.portal-slide-body-v20{
    position:relative;
    width:100%;
    max-height:88vh;
    max-height:88dvh;
    display:flex;
    flex-direction:column;
    background:var(--local-panel-strong,rgba(244,248,250,.98));
    border-radius:20px 20px 0 0;
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
    overflow:hidden;
    transform:translateY(100%);
    /* Rustige, vloeiende decelerate — géén overshoot/wiebel. De oude easing had
       een niet-monotone timing (controlepunt x=0) → "poing poing"-veereffect. */
    transition:transform 320ms cubic-bezier(0.22,0.61,0.36,1);
    will-change:transform;
    box-shadow:0 -12px 48px rgba(5,13,28,.18);
}
.portal-slide-panel-v20.is-open .portal-slide-body-v20{transform:translateY(0);}

.portal-slide-handle-v20{
    width:44px;height:4px;
    background:var(--local-line,rgba(23,32,51,.14));
    border-radius:2px;
    margin:10px auto 6px;
    padding:6px 0;
    flex-shrink:0;
    touch-action:none;
    cursor:grab;
    box-sizing:content-box;
}
.portal-slide-header-v20{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-bottom:1px solid var(--local-line,rgba(23,32,51,.08));
    flex-shrink:0;
}
.portal-slide-header-v20 strong{
    flex:1;
    font-size:.95rem;
    font-weight:820;
    color:var(--local-text,#172033);
}
.portal-slide-close-v20{
    display:grid;place-items:center;
    width:44px;height:44px;
    flex-shrink:0;
    padding:0;
    border:1px solid var(--local-line,rgba(23,32,51,.12));
    border-radius:50%;
    background:transparent;
    color:var(--local-muted,#53657a);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s,color .15s;
}
.portal-slide-close-v20:hover,
.portal-slide-close-v20:focus{
    background:transparent;   /* niet de globale button:hover-donkernavy overnemen */
}
.portal-slide-close-v20:active{
    background:rgba(0,0,0,.08);
}

/* Avatar in slide-up header */
.portal-slide-avatar-v20{
    width:32px;height:32px;
    border-radius:50%;
    overflow:hidden;
    display:grid;place-items:center;
    background:var(--local-brand,#6155f2);
    color:#fff;
    font-size:1.1rem;
    flex-shrink:0;
}
.portal-slide-avatar-v20 img{
    width:100%;height:100%;object-fit:cover;
}

.portal-slide-content-v20{
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:8px 0;
}
.portal-slide-link-v20{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 20px;
    position:relative;
    isolation:isolate;
    color:var(--local-text,#172033);
    text-decoration:none;
    font-size:.95rem;
    font-weight:600;
    border-bottom:1px solid var(--local-line,rgba(23,32,51,.07));
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    min-height:44px;
}
.portal-slide-link-v20::before{
    content:"";
    position:absolute;
    inset:3px 8px;
    border-radius:12px;
    background:var(--local-brand,#5b53f0);
    opacity:0;
    transform:scale(.98);
    transition:opacity .15s ease,transform .15s ease;
    pointer-events:none;
    z-index:-1;
}
.portal-slide-link-v20:last-child{border-bottom:0;}
.portal-slide-link-v20 i{
    width:20px;
    color:var(--local-muted,#53657a);
    font-size:1.05rem;
    text-align:center;
}
.portal-slide-link-v20:active::before{opacity:.12;transform:scale(1);}
.portal-slide-link-v20.is-danger{color:var(--local-danger,#b42318);}
.portal-slide-link-v20.is-danger i{color:var(--local-danger,#b42318);}
.portal-slide-link-v20.is-danger::before{background:var(--local-danger,#b42318);}
.portal-slide-link-v20.is-label{
    color:var(--local-muted,#53657a);
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    padding-top:16px;
    pointer-events:none;
    cursor:default;
}

/* ============================================================
   Hamburger-knop rechtsboven in header (mobiel)
   ============================================================ */
body[class*="site-theme-"] .portal-header-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;height:44px;
    padding:0;
    border:1px solid var(--local-line,rgba(23,32,51,.12));
    border-radius:10px;
    background:rgba(255,255,255,.62);
    color:var(--local-header-text,#172033);
    font-size:1.28rem;
    line-height:1;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    backdrop-filter:blur(8px);
    box-shadow:0 2px 8px rgba(5,13,28,.06);
    transition:background .15s;
    flex-shrink:0;
}
body[class*="site-theme-"] .portal-header-menu-btn:active{
    background:rgba(255,255,255,.90);
    border-color:var(--local-brand,#5b53f0);
    color:var(--local-brand,#5b53f0);
}

/* Compactere header op tablet/mobiel: minder verticale ruimte dan de basis
   (die zet 64px/12px). Het tap-doel (hamburger 44px) blijft leidend, dus de
   header wordt zo compact als veilig kan. Geldt voor alle portal-thema's. */
@media(max-width:991.98px){
    body[class*="site-theme-"] .site-header-wrap-v10{min-height:52px;padding:6px 16px}
}

/* ============================================================
   Hamburger-paneel = dropdown die ACHTER de header vandaan komt en er ook
   weer achter verdwijnt (niet als bottom-sheet vanaf onder). Het paneel begint
   op de headerhoogte (--portal-header-h, in JS gezet); overflow:hidden clipt de
   body zodat die van achter de header uit-/inklapt. De header blijft zichtbaar.
   ============================================================ */
#portalHeaderPanel{
    align-items:flex-start;
    top:var(--portal-header-h,64px);
    /* bottom:0 zodat het paneel (en dus de backdrop, inset:0) de HELE pagina onder de
       header bedekt en verduistert; het menu-body schuift alsnog van bovenaf in. */
    bottom:0;
    overflow:hidden;
}
#portalHeaderPanel .portal-slide-handle-v20{display:none;}
#portalHeaderPanel .portal-slide-body-v20{
    border-radius:0 0 20px 20px;
    transform:translateY(-100%);
    max-height:min(80vh,80dvh);
    padding-bottom:10px;
    box-shadow:0 18px 48px rgba(5,13,28,.20);
}
#portalHeaderPanel.is-open .portal-slide-body-v20{transform:translateY(0);}

/* ============================================================
   Mobiel (≤991.98px): scroll-bug, panel boven nav, menu-blokken verbergen
   ============================================================ */
@media (max-width:991.98px){
    /* Scroll-bug: voorkom pull-to-refresh; zorg dat pagina normaal scrollt */
    body.site-body{
        overscroll-behavior-y:contain;
    }

    /* Onderpaneel loopt door tot de schermrand (ACHTER de balk); de balk staat
       ervóór (hogere z-index). De body-content houdt ruimte vrij zodat niets
       achter de balk verdwijnt. */
    .portal-slide-body-v20{
        padding-bottom:calc(56px + env(safe-area-inset-bottom,0px) + 8px);
    }

    /* In-page menu-blokken verbergen — inhoud zit al in de bottom-nav panels */
    .portal-mobile-switchboard-v147{
        display:none!important;
    }
    .portal-panel-v147{
        display:none!important;
    }
    /* Gedeelde, reversibele PWA-synchronisatie voor de rijke thema-rails (franeker/
       julianadorp): alléén de rail-blokken die het PWA-paneel dupliceren ("Snel naar"/
       "Ontdek") krijgen dit attribuut en verdwijnen op mobiel; de unieke rail-inhoud
       (weer, agenda, 112/P2000) blijft staan en schuift mee in de contentflow. CSS-only,
       dus volledig reversibel (groot → rails terug) — geen JS die DOM sloopt. */
    [data-portal-rail-hide]{
        display:none!important;
    }
}

/* Zoekpagina (/zoeken) — thema-agnostisch via de --local-*-tokens; rendert in de content-kaart. */
body[class*="site-theme-"] .portal-search-page-v20{display:flex;gap:.5rem;margin:0 0 1.25rem;flex-wrap:wrap}
body[class*="site-theme-"] .portal-search-page-v20 input[type="search"]{flex:1 1 240px;min-width:0;border:1px solid var(--local-line);background:var(--local-panel-strong);color:var(--local-text);border-radius:10px;padding:.7rem .9rem;font-size:1rem}
body[class*="site-theme-"] .portal-search-page-v20 button{border:0;background:var(--local-brand);color:#fff;border-radius:10px;padding:.7rem 1.2rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
body[class*="site-theme-"] .portal-search-count-v20{color:var(--local-muted);font-size:.95rem;margin:.25rem 0 1rem}
body[class*="site-theme-"] .portal-search-results-v20{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
body[class*="site-theme-"] .portal-search-results-v20 a{display:block;padding:.85rem 1rem;border:1px solid var(--local-line);border-radius:12px;background:var(--local-panel);color:inherit;text-decoration:none;transition:border-color .15s ease,background .15s ease}
body[class*="site-theme-"] .portal-search-results-v20 a:hover{border-color:var(--local-brand);background:var(--local-panel-strong)}
body[class*="site-theme-"] .portal-search-results-v20 strong{display:block;color:var(--local-brand);margin-bottom:.15rem}
body[class*="site-theme-"] .portal-search-results-v20 span{color:var(--local-muted);font-size:.92rem}

/* v014.10.81 Per-site kleur-tokens voor de nieuwe homepage-elementen */
body[class*="site-theme-"] .portal-trust-v20 li{color:var(--local-text)}
body[class*="site-theme-"] .portal-trust-v20 i{color:var(--local-brand)}
body[class*="site-theme-"] .portal-search-v20{border-color:var(--local-line);background:var(--local-panel-strong)}
body[class*="site-theme-"] .portal-search-v20 i{color:var(--local-brand)}
body[class*="site-theme-"] .portal-search-v20 input{color:var(--local-text)}
body[class*="site-theme-"] .portal-search-v20 input::placeholder{color:var(--local-muted)}
/* Weer-widget: sinds v014.10.260 het centrale weerwidget (weather.css, pw-*). */

/* ============================================================
   v014.10.88 Pro design-pass: consistent knop-systeem, zoek, nieuwsbrief, header
   ============================================================ */
body[class*="site-theme-"] .portal-primary-v147,
body[class*="site-theme-"] .portal-secondary-v147{
    min-height:46px;
    border-radius:12px!important;
    padding:11px 18px;
    font-weight:800;
    font-size:.95rem;
    transition:background .15s,border-color .15s,transform .04s;
}
body[class*="site-theme-"] .portal-primary-v147:active,
body[class*="site-theme-"] .portal-secondary-v147:active{transform:translateY(1px)}
body[class*="site-theme-"] .portal-primary-v147{
    background:var(--local-brand);
    border:1px solid var(--local-brand);
    color:#fff;
    box-shadow:0 12px 24px color-mix(in srgb,var(--local-brand) 30%,transparent);
}
body[class*="site-theme-"] .portal-primary-v147:hover{background:var(--local-brand-dark);border-color:var(--local-brand-dark)}
/* Secondary buiten de hero: licht met rand. */
body[class*="site-theme-"] .portal-secondary-v147{
    background:#fff;
    border:1px solid var(--local-line);
    color:var(--local-brand-dark);
    box-shadow:0 6px 16px rgba(20,30,60,.06);
}
body[class*="site-theme-"] .portal-secondary-v147:hover{background:var(--local-panel-muted);color:var(--local-brand-dark)}
/* Secondary binnen de donkere hero: glazig wit. */
body[class*="site-theme-"] .portal-hero-card-v147 .portal-secondary-v147{
    background:rgba(255,255,255,.15);
    border-color:rgba(255,255,255,.36);
    color:#fff;
    box-shadow:none;
}
body[class*="site-theme-"] .portal-hero-card-v147 .portal-secondary-v147:hover{background:rgba(255,255,255,.26);color:#fff}

/* Zoekbalk: strak, consistente hoogte/radius. */
body[class*="site-theme-"] .portal-search-v20{
    min-height:42px;
    max-width:300px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--local-line);
    background:#fff;
    box-shadow:0 4px 14px rgba(20,30,60,.05);
}
body[class*="site-theme-"] .portal-search-v20 input{font-size:.9rem}

/* Header-knoppen consistent met het systeem. */
body[class*="site-theme-"] .site-login-v10,
body[class*="site-theme-"] .site-register-v10,
body[class*="site-theme-"] .site-account-button{
    min-height:42px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--local-line);
    box-shadow:0 4px 14px rgba(20,30,60,.05);
}
body[class*="site-theme-"] .site-main-menu-v10 .nav-link{font-weight:750}


/* Rechter sidebar als 2-koloms icoon-raster (tegels: icoon + label + chevron). */
body[class*="site-theme-"] .portal-local-list-v147.is-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:10px;
}
body[class*="site-theme-"] .portal-local-list-v147.is-grid a{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-height:0;
    padding:12px 26px 12px 12px;
    border:1px solid var(--local-line);
    border-top:1px solid var(--local-line);
    border-radius:12px;
    background:var(--local-panel-muted);
}
body[class*="site-theme-"] .portal-local-list-v147.is-grid a:hover{
    background:#fff;
    border-color:color-mix(in srgb,var(--local-brand) 45%,var(--local-line));
}
body[class*="site-theme-"] .portal-local-list-v147.is-grid a i{font-size:1.2rem;color:var(--local-brand)}
body[class*="site-theme-"] .portal-local-list-v147.is-grid a strong{font-size:.82rem;line-height:1.15;color:var(--local-text)}
body[class*="site-theme-"] .portal-local-list-v147.is-grid a small{display:none}
body[class*="site-theme-"] .portal-local-list-v147.is-grid a::after{
    content:"";
    position:absolute;
    right:12px;top:16px;
    width:7px;height:7px;
    border-right:2px solid var(--local-muted);
    border-bottom:2px solid var(--local-muted);
    transform:rotate(-45deg);
    opacity:.6;
}
/* "Komende evenementen"-lijst onder het icoon-raster. */
body[class*="site-theme-"] .portal-events-v20{padding:4px 12px 12px}
body[class*="site-theme-"] .portal-events-v20 ul{list-style:none;margin:0;padding:0}
body[class*="site-theme-"] .portal-events-v20 h3{
    margin:6px 0 8px;font-size:.72rem;font-weight:850;letter-spacing:.06em;
    text-transform:uppercase;color:var(--local-brand-dark);
}
body[class*="site-theme-"] .portal-events-v20 li{
    display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;
    padding:7px 0;border-top:1px solid var(--local-line);
}
body[class*="site-theme-"] .portal-events-v20 li:first-of-type{border-top:0}
body[class*="site-theme-"] .portal-events-v20 .ev-date{
    display:grid;place-items:center;height:40px;border-radius:10px;
    background:var(--local-panel-muted);color:var(--local-brand-dark);
    font-weight:850;line-height:1;text-align:center;
}
body[class*="site-theme-"] .portal-events-v20 .ev-date small{display:block;font-size:.6rem;font-weight:800;opacity:.8}
body[class*="site-theme-"] .portal-events-v20 .ev-title{font-size:.84rem;font-weight:700;color:var(--local-text)}
body[class*="site-theme-"] .portal-events-v20 .ev-meta{font-size:.74rem;color:var(--local-muted)}


/* ============================================================
   #2 Zichtbare toetsenbord-focus (:focus-visible), volgens het admin-patroon.
   Dekt links, knoppen, bottom-nav-items, slide-panel-links, hero-CTA's en summaries.
   ============================================================ */
body[class*="site-theme-"] a:focus-visible,
body[class*="site-theme-"] button:focus-visible,
body[class*="site-theme-"] summary:focus-visible,
body[class*="site-theme-"] [tabindex]:focus-visible{
    outline:2px solid var(--local-brand);
    outline-offset:2px;
    border-radius:6px;
}
/* In de donkere hero: witte ring voor voldoende contrast. */
body[class*="site-theme-"] .portal-hero-card-v147 a:focus-visible,
body[class*="site-theme-"] .portal-hero-card-v147 button:focus-visible{
    outline-color:#fff;
}
/* Slide-panel-links: geen harde rechthoek-ring, wel de zachte brand-pill als
   toetsenbord-focus-feedback. (De bottom-nav-items regelen dit in hun eigen blok.) */
body[class*="site-theme-"] .portal-slide-link-v20:focus,
body[class*="site-theme-"] .portal-slide-link-v20:focus-visible{
    outline:none;
    background:transparent;
}
body[class*="site-theme-"] .portal-slide-link-v20:focus-visible::before{
    opacity:.12;
    transform:scale(1);
}

/* ════════════════════════════════════════════════════════════
   GEDEELD STADSLINT/BOLLENLINT ONDER DE HEADER

   Sticky 4px-strook direct onder de header, sitewide. Een thema activeert het
   met de body-klasse .portal-has-lint (via de setting portal_header_lint) en
   levert de vijf kleuren als tokens --portal-lint-1..5. Zonder die klasse (elk
   ander thema) heeft dit blok geen effect — strikt achterwaarts compatibel.
   ════════════════════════════════════════════════════════════ */
body.site-body.portal-has-lint .site-header-v10{position:relative}
body.site-body.portal-has-lint .site-header-v10::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-4px;
    height:4px;
    z-index:3;
    background:linear-gradient(90deg,
        var(--portal-lint-1,#A5482F) 0 20%,
        var(--portal-lint-2,#C9A227) 20% 40%,
        var(--portal-lint-3,#2C5F8A) 40% 60%,
        var(--portal-lint-4,#2F6B45) 60% 80%,
        var(--portal-lint-5,#55606B) 80% 100%);
}

/* ════════════════════════════════════════════════════════════
   GEDEELDE RIJKE PORTAL-HOME (.lp-rich-home)

   Eén thema-onafhankelijke implementatie van de "dagstart + rails + center +
   historieband"-home. De opmaak (klassen lp-rh/lp-*) is gedeeld; een thema
   levert uitsluitend een tokenlaag (CSS-variabelen --rh-*) en de inhoud (via de
   $rh-datastructuur in themes/{thema}/home.php → partials/rich_home.php).

   Alles is gescoped op .lp-rich-home: zonder die root (dus op elk thema dat deze
   home niet rendert) heeft dit blok geen enkel effect — strikt achterwaarts
   compatibel. De --rh-*-defaults hieronder spiegelen de goedgekeurde
   Franeker-designreferentie zodat het ook zonder tokenlaag correct oogt.

   Tokenlaag per thema: OVERSCHRIJF de --rh-*-tokens op HETZELFDE element met
   hogere specificiteit, d.w.z. `body.site-theme-X .lp-rich-home { --rh-…: … }`.
   Zet ze NIET op `body.site-theme-X` alleen: de directe declaratie op
   .lp-rich-home hieronder wint dan van de geërfde body-waarde (inheritance-trap).
   ════════════════════════════════════════════════════════════ */

/* Self-hosted fonts (CSP: font-src 'self'; geen externe CDN). Laden pas wanneer
   een thema ze via --rh-display/-body/-mono daadwerkelijk gebruikt. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/themes/_local_portal/fonts/newsreader-latin.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 700;font-display:swap;src:url("/assets/themes/_local_portal/fonts/newsreader-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/themes/_local_portal/fonts/instrument-sans-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/themes/_local_portal/fonts/ibm-plex-mono-latin.woff2") format("woff2")}

.lp-rich-home{
    --rh-bg:#f5f4ef;--rh-wit:#ffffff;--rh-inkt:#1d2a35;--rh-navy:#14304A;
    --rh-nacht:#16243E;--rh-nacht-d:#0E1830;--rh-grijs:#66727c;--rh-lijn:#e2e1d8;
    --rh-steen:#A5482F;--rh-goud:#C9A227;--rh-blauw:#2C5F8A;--rh-veld:#2F6B45;--rh-lei:#55606B;
    --rh-messing:#B08D3E;--rh-messing-l:#D9BC72;
    --rh-open:#2e7d4f;--rh-dicht:#b3441e;--rh-p2000:#8a4646;--rh-p2000-bg:#f6eeee;
    --rh-accent:var(--rh-steen,#A5482F);
    --rh-lint-1:var(--rh-steen,#A5482F);--rh-lint-2:var(--rh-goud,#C9A227);--rh-lint-3:var(--rh-blauw,#2C5F8A);--rh-lint-4:var(--rh-veld,#2F6B45);--rh-lint-5:var(--rh-lei,#55606B);
    --rh-hero-grad:linear-gradient(135deg,#EFEDE2 0%,#E9E5D4 100%);
    --rh-weer-grad:linear-gradient(180deg,#8FBEDC 0%,#BFD9E8 55%,#E8E2CF 100%);
    --rh-display:"Newsreader",Georgia,"Times New Roman",serif;
    --rh-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --rh-mono:"IBM Plex Mono",ui-monospace,monospace;
    background:var(--rh-bg);
    color:var(--rh-inkt);
    font-family:var(--rh-body);
    line-height:1.6;
}
.lp-rich-home h1,.lp-rich-home h2,.lp-rich-home h3,.lp-rich-home h4{font-family:var(--rh-display)}
.lp-rich-home a{text-decoration:none}
.lp-vol{padding-left:clamp(1rem,3vw,3rem);padding-right:clamp(1rem,3vw,3rem)}

/* ── Dagstart (bovenin de middenkolom; vlak zonder band, compact, zegel naast de tekst) ── */
.lp-rich-home .lp-dagstart{margin-bottom:2.4rem}
.lp-rich-home .lp-dagstart-inner{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.lp-rich-home .lp-dagstart-copy{flex:1 1 19rem;min-width:min(100%,15rem)}
.lp-rich-home .lp-dagstart-signatuur{flex:0 0 auto;margin-inline:auto}
.lp-rich-home .lp-dag-datum{font-size:.8rem;font-weight:700;color:var(--rh-accent);text-transform:uppercase;letter-spacing:.14em;margin:0 0 .3rem}
.lp-rich-home .lp-dagstart h1{font-weight:700;font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.08;color:var(--rh-navy);margin:0}
.lp-rich-home .lp-dagstart h1 em{font-style:italic;color:var(--rh-accent)}
.lp-rich-home .lp-lead{color:#3d4a53;margin:.55rem 0 .85rem;font-size:.96rem}
.lp-rich-home .lp-dag-feiten{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0 0 1rem}
.lp-rich-home .lp-dag-feit{background:var(--rh-wit);border:1px solid var(--rh-lijn);border-radius:999px;padding:.45rem .95rem;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:.45rem;min-height:44px}
.lp-rich-home .lp-bol{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.lp-rich-home .lp-hero-acties{display:flex;flex-wrap:wrap;gap:.6rem}
.lp-rich-home .lp-btn{border-radius:.55rem;padding:.7rem 1.35rem;min-height:44px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease,transform .15s ease}
.lp-rich-home .lp-btn-primary{background:var(--rh-navy);color:#fff}
.lp-rich-home .lp-btn-primary:hover{background:var(--rh-blauw);color:#fff}
.lp-rich-home .lp-btn-outline{border:2px solid var(--rh-navy);color:var(--rh-navy)}
.lp-rich-home .lp-btn-outline:hover{background:var(--rh-navy);color:#fff}

/* Signatuur: zegel + planeetbanen (Franeker) / stempel (fallback) */
.lp-rich-home .lp-zegel-wrap{width:190px;max-width:52vw;aspect-ratio:1;position:relative;margin-inline:auto}
.lp-rich-home .lp-zegel-wrap svg{position:absolute;inset:0;width:100%;height:100%}
@keyframes lp-draai{to{transform:rotate(360deg)}}
.lp-rich-home .lp-ring{transform-origin:center;animation:lp-draai 70s linear infinite}
.lp-rich-home .lp-ring2{animation-duration:110s;animation-direction:reverse}
.lp-rich-home .lp-zegel{position:absolute;inset:18%;border:3px solid var(--rh-steen);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--rh-steen);background:radial-gradient(circle,rgba(165,72,47,.07),rgba(246,243,236,.92) 70%);transform:rotate(-7deg)}
.lp-rich-home .lp-zegel::before{content:"";position:absolute;inset:8px;border:1.5px solid var(--rh-steen);border-radius:50%;opacity:.6}
.lp-rich-home .lp-zegel b,.lp-rich-home .lp-stempel b{font-family:var(--rh-display);font-size:1.85rem;line-height:1}
.lp-rich-home .lp-zegel small,.lp-rich-home .lp-stempel small{font-family:var(--rh-body);font-weight:700;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase}
.lp-rich-home .lp-zegel-boog{font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:.2rem}
/* Stempel-variant (o.a. voor thema's zonder planeetbanen) */
.lp-rich-home .lp-stempel{width:190px;max-width:52vw;aspect-ratio:1;border:3px solid var(--rh-accent);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--rh-accent);transform:rotate(-7deg);position:relative;background:radial-gradient(circle,rgba(165,72,47,.06),transparent 70%)}
.lp-rich-home .lp-stempel::before{content:"";position:absolute;inset:9px;border:1.5px solid var(--rh-accent);border-radius:50%;opacity:.6}

/* ── Grid ── */
.lp-rich-home .lp-grid-wrap{padding-top:clamp(1.5rem,3vw,3rem);padding-bottom:clamp(1.5rem,3vw,3rem)}
.lp-rich-home .lp-rail .lp-railkaart,
.lp-rich-home .lp-rail .pw-widget{margin-bottom:1.5rem}

/* ── Railkaart (gedeeld door zij-panelen) ── */
.lp-rich-home .lp-railkaart{background:var(--rh-wit);border:1px solid var(--rh-lijn);border-radius:.8rem;overflow:hidden}
.lp-rich-home .lp-railkaart h3{font-family:var(--rh-body);font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--rh-navy);padding:.95rem 1rem .45rem;margin:0}

/* Snelmenu (linkerrail) */
.lp-rich-home .lp-snelmenu a{display:flex;align-items:center;gap:.65rem;padding:.7rem 1rem;color:var(--rh-inkt);font-weight:600;border-top:1px solid #f1f0e9;min-height:44px;transition:padding-left .15s ease,background .15s ease}
.lp-rich-home .lp-snelmenu a:hover{background:var(--rh-bg);padding-left:1.3rem;color:var(--rh-navy)}
.lp-rich-home .lp-velddot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.lp-rich-home .lp-snelmenu-label{flex:1 1 auto}
.lp-rich-home .lp-teller{margin-left:auto;background:var(--rh-bg);color:var(--rh-navy);font-size:.7rem;font-weight:700;border-radius:999px;padding:.15rem .5rem;border:1px solid var(--rh-lijn)}

/* Weerblok: sinds v014.10.260 het centrale weerwidget (weather.css, pw-*). */

/* ── Sectiekoppen ── */
.lp-rich-home .lp-sectie{margin-bottom:2.75rem}
.lp-rich-home .lp-sectie-laatste{margin-bottom:.5rem}
.lp-rich-home .lp-sectiekop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.lp-rich-home .lp-sectiekop h2{font-weight:700;font-size:1.55rem;margin:0;color:var(--rh-navy)}
.lp-rich-home .lp-sectiekop a{font-weight:700;color:var(--rh-accent);white-space:nowrap}
.lp-rich-home .lp-sub{display:block;font-family:var(--rh-body);font-size:.85rem;font-weight:500;color:var(--rh-grijs);margin-top:.1rem}

/* ── Gidskaarten (Nu open) ── */
.lp-rich-home .lp-gidskaart{background:var(--rh-wit);border:1px solid var(--rh-lijn);border-radius:.8rem;padding:1rem 1.05rem;display:block;color:var(--rh-inkt);height:100%;transition:transform .15s ease,box-shadow .15s ease;position:relative}
.lp-rich-home .lp-gidskaart:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(22,36,62,.09);color:var(--rh-inkt)}
.lp-rich-home .lp-gk-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.lp-rich-home .lp-gidskaart h4{font-size:1.08rem;font-weight:600;margin:0 0 .2rem}
.lp-rich-home .lp-soort{font-size:.78rem;color:var(--rh-grijs)}
.lp-rich-home .lp-status{font-size:.72rem;font-weight:700;border-radius:999px;padding:.28rem .7rem;white-space:nowrap}
.lp-rich-home .lp-status.is-open{background:#e3f0e8;color:var(--rh-open)}
.lp-rich-home .lp-status.is-dicht{background:#f6e8e1;color:var(--rh-dicht)}
.lp-rich-home .lp-gidskaart .lp-tijd{font-size:.8rem;color:var(--rh-grijs);margin-top:.5rem}
.lp-rich-home .lp-gidskaart.is-uitgelicht{border-color:var(--rh-goud);box-shadow:0 0 0 1px var(--rh-goud)}
.lp-rich-home .lp-uitgelicht-badge{position:absolute;top:-10px;left:.9rem;background:var(--rh-goud);color:#3e2e08;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.2rem .65rem}

/* ── Kort nieuws ── */
.lp-rich-home .lp-nieuwslijst{padding:.25rem 1rem 1rem}
.lp-rich-home .lp-nieuwsregel{display:flex;gap:.9rem;padding:.85rem 0;border-top:1px solid #efeee6;color:var(--rh-inkt);align-items:baseline;min-height:44px}
.lp-rich-home .lp-nieuwsregel:first-of-type{border-top:0}
.lp-rich-home .lp-nieuwsregel:hover h5{color:var(--rh-navy);text-decoration:underline}
.lp-rich-home .lp-nieuwsregel .lp-tag{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lp-rich-home .lp-nieuwsregel h5{font-family:var(--rh-body);font-size:1.02rem;font-weight:600;margin:0;color:var(--rh-inkt)}
.lp-rich-home .lp-nieuwsregel small{margin-left:auto;color:var(--rh-grijs);flex:0 0 auto}

/* ── Donkere feature-kaart (Planetarium — parel van de stad) ── */
.lp-rich-home .lp-feature-dark{background:var(--rh-nacht);color:#DCE4F0;border-radius:.9rem;padding:1.6rem;position:relative;overflow:hidden}
.lp-rich-home .lp-feature-dark::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border:1.5px solid rgba(217,188,114,.35);border-radius:50%}
.lp-rich-home .lp-feature-dark::before{content:"";position:absolute;right:-30px;top:-30px;width:180px;height:180px;border:1.5px solid rgba(217,188,114,.25);border-radius:50%}
.lp-rich-home .lp-feature-dark .lp-smallcaps{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rh-messing-l)}
.lp-rich-home .lp-feature-dark h3{color:#fff;font-size:1.5rem;font-weight:700;margin:.3rem 0 .5rem}
.lp-rich-home .lp-feature-dark p{color:#AEBBD0;max-width:44rem;margin-bottom:.7rem;position:relative}
.lp-rich-home .lp-feature-dark .lp-lees{font-weight:700;color:var(--rh-messing-l);position:relative}
.lp-rich-home .lp-feature-dark .lp-lees:hover{color:#fff}

/* ── Prikbord (kurkbord) ── */
.lp-rich-home .lp-prikbord{background:radial-gradient(circle at 20% 30%,rgba(0,0,0,.05) 0,transparent 40%),radial-gradient(circle at 80% 70%,rgba(0,0,0,.05) 0,transparent 40%),repeating-linear-gradient(45deg,#c9a06a 0 3px,#c2985f 3px 6px);border:10px solid #6e5133;border-radius:.9rem;padding:1.4rem;box-shadow:inset 0 2px 12px rgba(0,0,0,.22)}
.lp-rich-home .lp-prik-titel{display:inline-block;background:#fffdf6;padding:.35rem 1rem;border-radius:.35rem;font-family:var(--rh-display);font-weight:700;box-shadow:0 3px 8px rgba(0,0,0,.2);transform:rotate(-1.2deg);margin-bottom:1.1rem}
.lp-rich-home .lp-briefje{background:#fffdf6;border-radius:.35rem;padding:1rem .95rem .85rem;box-shadow:0 5px 12px rgba(0,0,0,.22);position:relative;height:100%;display:block;color:var(--rh-inkt)}
.lp-rich-home .lp-briefje:hover{color:var(--rh-inkt);box-shadow:0 8px 16px rgba(0,0,0,.3)}
.lp-rich-home .lp-briefje::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8f8f,#c22f2f 70%);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.lp-rich-home .lp-briefje.is-geel{background:#fff8d9}
.lp-rich-home .lp-briefje.is-blauw{background:#e9f2fb}
.lp-rich-home .lp-briefje h5{font-family:var(--rh-body);font-size:.95rem;font-weight:700;margin:0 0 .3rem}
.lp-rich-home .lp-briefje p{font-size:.85rem;margin:0 0 .4rem;color:#4c4335}
.lp-rich-home .lp-briefje small{font-weight:700;color:var(--rh-accent)}
.lp-rich-home .lp-b-rot1{transform:rotate(-1.6deg)}
.lp-rich-home .lp-b-rot2{transform:rotate(1.1deg)}
.lp-rich-home .lp-b-rot3{transform:rotate(-.6deg)}
.lp-rich-home .lp-b-rot4{transform:rotate(1.8deg)}

/* ── Gemeente + meldingen ── */
.lp-rich-home .lp-gemeente{background:var(--rh-wit);border:1px solid var(--rh-lijn);border-left:6px solid var(--rh-goud);border-radius:.8rem;padding:1.25rem 1.3rem;height:100%}
.lp-rich-home .lp-gemeente h3{font-size:1.2rem;font-weight:700;margin:0 0 .3rem;color:var(--rh-inkt)}
.lp-rich-home .lp-gemeente p{color:var(--rh-grijs);font-size:.92rem;margin-bottom:.8rem}
.lp-rich-home .lp-gemeente-acties{display:flex;flex-wrap:wrap;gap:.5rem}
.lp-rich-home .lp-gemeente-acties a{border:1.5px solid var(--rh-lijn);background:var(--rh-bg);color:var(--rh-inkt);font-weight:600;font-size:.85rem;border-radius:.55rem;padding:.55rem .95rem;min-height:44px;display:inline-flex;align-items:center}
.lp-rich-home .lp-gemeente-acties a:hover{border-color:var(--rh-navy);color:var(--rh-navy)}
.lp-rich-home .lp-melding{display:flex;gap:.8rem;background:var(--rh-wit);border:1px solid var(--rh-lijn);border-radius:.7rem;padding:.85rem 1rem;color:var(--rh-inkt);align-items:flex-start}
.lp-rich-home .lp-melding:hover{border-color:var(--rh-navy);color:var(--rh-inkt)}
.lp-rich-home .lp-m-icoon{flex:0 0 36px;height:36px;border-radius:.5rem;display:flex;align-items:center;justify-content:center;background:#f4ecc9;color:#8a6a00}
.lp-rich-home .lp-melding-titel{display:block;font-size:.92rem;font-weight:700}
.lp-rich-home .lp-melding small{color:var(--rh-grijs)}

/* ── Verenigingsleven (clubkaarten) ── */
.lp-rich-home .lp-club{background:var(--rh-wit);border:1px solid var(--rh-lijn);border-radius:.8rem;padding:1rem 1.05rem;display:flex;gap:.8rem;align-items:center;color:var(--rh-inkt);height:100%}
.lp-rich-home .lp-club:hover{border-color:var(--rh-veld);color:var(--rh-inkt)}
.lp-rich-home .lp-c-bal{flex:0 0 42px;height:42px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--rh-display);font-weight:700;font-size:1.15rem}
.lp-rich-home .lp-club-naam{display:block;font-size:.95rem;font-weight:700}
.lp-rich-home .lp-club small{color:var(--rh-grijs)}

/* ── Bezoekersstrip ── */
.lp-rich-home .lp-bezoek{background:var(--rh-wit);border:1px solid var(--rh-lijn);border-radius:.8rem;padding:1.15rem 1.25rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.lp-rich-home .lp-bezoek-tekst{flex:1 1 280px}
.lp-rich-home .lp-bezoek h3{font-size:1.2rem;font-weight:700;margin:0 0 .2rem;color:var(--rh-inkt)}
.lp-rich-home .lp-bezoek p{font-size:.9rem;color:var(--rh-grijs);margin:0}
.lp-rich-home .lp-bezoek-links{display:flex;gap:.5rem;flex-wrap:wrap}
.lp-rich-home .lp-bezoek-links a{border:1.5px solid var(--rh-lijn);color:var(--rh-inkt);font-weight:600;font-size:.85rem;border-radius:999px;padding:.5rem 1rem;min-height:44px;display:inline-flex;align-items:center}
.lp-rich-home .lp-bezoek-links a:hover{border-color:var(--rh-blauw);color:var(--rh-blauw)}

/* ── Rechterrail: agenda ── */
.lp-rich-home .lp-agenda-item{display:flex;gap:.8rem;padding:.75rem 1rem;border-top:1px solid #f1f0e9;color:var(--rh-inkt);align-items:center;min-height:44px}
.lp-rich-home .lp-agenda-item:hover{background:var(--rh-bg);color:var(--rh-inkt)}
.lp-rich-home .lp-ag-datum{flex:0 0 46px;text-align:center;background:var(--rh-bg);border-radius:.45rem;padding:.3rem 0;border-top:3px solid var(--rh-goud)}
.lp-rich-home .lp-ag-datum b{display:block;font-family:var(--rh-display);font-size:1.05rem;line-height:1}
.lp-rich-home .lp-ag-datum small{font-size:.62rem;font-weight:800;letter-spacing:.06em}
.lp-rich-home .lp-ag-titel{display:block;font-size:.9rem;font-weight:700}
.lp-rich-home .lp-ag-meta{font-size:.75rem;color:var(--rh-grijs)}
.lp-rich-home .lp-rail-meer{display:block;text-align:center;padding:.75rem;font-weight:700;color:var(--rh-accent);border-top:1px solid #f1f0e9;min-height:44px}

/* ── Rechterrail: 112 / P2000 (gedempt) ── */
.lp-rich-home .lp-p2000-blok h3{color:var(--rh-p2000)}
.lp-rich-home .lp-p2000-item{display:flex;gap:.7rem;padding:.65rem 1rem;border-top:1px solid #f1f0e9;color:var(--rh-inkt);align-items:baseline;min-height:44px;font-size:.84rem}
.lp-rich-home .lp-p2000-item:hover{background:var(--rh-p2000-bg);color:var(--rh-inkt)}
.lp-rich-home .lp-p2000-tijd{font-family:var(--rh-mono);font-size:.74rem;color:var(--rh-grijs);flex:0 0 44px}
.lp-rich-home .lp-p2000-dienst{width:8px;height:8px;border-radius:50%;flex:0 0 8px;position:relative;top:-1px}
.lp-rich-home .lp-p2000-item b{font-weight:600}
.lp-rich-home .lp-p2000-item small{display:block;color:var(--rh-grijs)}
.lp-rich-home .lp-p2000-voet{font-size:.7rem;color:var(--rh-grijs);padding:.5rem 1rem .75rem;border-top:1px solid #f1f0e9}
.lp-rich-home .lp-p2000-voet a{color:var(--rh-p2000);font-weight:600}

/* ── Rechterrail: Ontdek lokaal ── */
.lp-rich-home .lp-ontdek a{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-top:1px solid #f1f0e9;color:var(--rh-inkt);font-weight:600;min-height:44px}
.lp-rich-home .lp-ontdek a:hover{background:var(--rh-bg);color:var(--rh-navy)}

/* ── Historieband ── */
.lp-rich-home .lp-historieband{background:var(--rh-nacht-d);color:#dfe6f0;position:relative;overflow:hidden}
.lp-rich-home .lp-historieband::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--rh-lint-1) 0 20%,var(--rh-lint-2) 20% 40%,var(--rh-lint-3) 40% 60%,var(--rh-lint-4) 60% 80%,var(--rh-lint-5) 80% 100%)}
.lp-rich-home .lp-historie-inner{display:flex;gap:2rem;align-items:center;padding-top:clamp(2rem,3.5vw,3.5rem);padding-bottom:clamp(2rem,3.5vw,3.5rem);flex-wrap:wrap}
.lp-rich-home .lp-historie-copy{flex:1 1 30rem}
.lp-rich-home .lp-historie-jaar{flex:0 0 auto;margin-inline:auto}
.lp-rich-home .lp-historieband .lp-smallcaps{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rh-messing-l)}
.lp-rich-home .lp-historieband h2{color:#fff;font-weight:700;font-size:clamp(1.5rem,2.8vw,2rem);margin:.35rem 0 .6rem}
.lp-rich-home .lp-historieband p{color:#aebacb;max-width:48rem}
.lp-rich-home .lp-historieband .lp-lees{font-weight:700;color:var(--rh-messing-l)}
.lp-rich-home .lp-historieband .lp-lees:hover{color:#fff}
.lp-rich-home .lp-jaartal{text-align:center}
.lp-rich-home .lp-jaartal b{display:block;font-family:var(--rh-display);font-size:clamp(3rem,6vw,4.4rem);font-weight:700;line-height:1;color:#fff}
.lp-rich-home .lp-jaartal small{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rh-messing-l)}
.lp-rich-home .lp-tijdlijn{display:flex;gap:1.6rem;margin-top:1.1rem;flex-wrap:wrap}
.lp-rich-home .lp-tl-punt{border-left:3px solid rgba(255,255,255,.18);padding-left:.8rem}
.lp-rich-home .lp-tl-punt b{font-family:var(--rh-display);font-size:1.2rem;display:block;color:#fff}
.lp-rich-home .lp-tl-punt small{color:#94a3b8}

/* ── Zichtbare focus-states (toegankelijkheid) ── */
.lp-rich-home a:focus-visible,
.lp-rich-home .lp-btn:focus-visible{outline:3px solid var(--rh-blauw);outline-offset:2px;border-radius:.35rem}

/* ── Responsive ── */
@media(max-width:991.98px){
    .lp-rich-home{padding-bottom:84px}
    .lp-rich-home .lp-dagstart-inner{gap:1.25rem}
    .lp-rich-home .lp-prikbord{padding:1rem}
    .lp-rich-home .lp-sectie{margin-bottom:2rem}
}
@media(max-width:575.98px){
    .lp-rich-home .lp-hero-acties .lp-btn{flex:1 1 100%}
    .lp-rich-home .lp-bezoek{align-items:flex-start}
    /* Mobiel: zegel/stempel gestapeld maar compact. */
    .lp-rich-home .lp-zegel-wrap,.lp-rich-home .lp-stempel{width:160px;max-width:46vw}
}
@media(prefers-reduced-motion:reduce){
    .lp-rich-home .lp-ring{animation:none}
    .lp-rich-home *{transition:none!important}
}

/* ============================================================
   Nachtmodus op de authpagina's (Fixronde 2, Fase 6 — besluit open vraag 1).
   Alleen actief op auth (body[data-auth-page]) wanneer de bezoeker/beheerder
   nacht kiest (html[data-auth-theme=night]); de voorkeur deelt de
   localStorage-sleutel met de beheeromgeving. Werkt thema-onafhankelijk:
   de auth-kaart en de portal-chrome consumeren de --local-*-variabelen,
   dus één override-set dekt álle portalthema's. De dubbele class-attribuut-
   selector wint bewust van de per-thema variabele-definities.
   ============================================================ */
html[data-auth-theme="night"] body[data-auth-page][class*="site-theme-"]{
    --local-page-bg:linear-gradient(180deg,#0d1526 0%,#101a30 100%);
    --local-panel:#16223a;
    --local-panel-strong:#1a2742;
    --local-panel-muted:#1e2c4a;
    --local-text:#e8eefb;
    --local-muted:#9fb0cd;
    --local-line:rgba(146,166,204,.22);
    --local-shadow:0 18px 40px rgba(4,10,24,.5);
    --local-header-text:#e8eefb;
    background:#0d1526;
    color:var(--local-text);
}
html[data-auth-theme="night"] body[data-auth-page] .portal-auth-card-v148 h1,
html[data-auth-theme="night"] body[data-auth-page] .portal-auth-card-v148 .lead,
html[data-auth-theme="night"] body[data-auth-page] .portal-auth-card-v148 label{
    color:var(--local-text);
}
html[data-auth-theme="night"] body[data-auth-page] .portal-auth-form-v148 input{
    background:#101a30;
    border-color:var(--local-line);
    color:var(--local-text);
}
html[data-auth-theme="night"] body[data-auth-page] .portal-auth-form-v148 input::placeholder{
    color:var(--local-muted);
}

/* De schakelaar zelf: klein, vast rechtsboven, in beide modi leesbaar. */
.portal-auth-theme-toggle{
    position:fixed;
    top:14px;
    right:14px;
    z-index:1080;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid var(--local-line);
    background:var(--local-panel);
    color:var(--local-text);
    font-size:.78rem;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(10,20,40,.14);
}
.portal-auth-theme-toggle span+i{margin-left:4px}
/* Toon alleen de KEUZE die je kunt maken: overdag de maan, 's nachts de zon. */
html:not([data-auth-theme="night"]) .portal-auth-theme-toggle i.bi-sun,
html:not([data-auth-theme="night"]) .portal-auth-theme-toggle i.bi-sun+span{display:none}
html[data-auth-theme="night"] .portal-auth-theme-toggle i.bi-moon-stars,
html[data-auth-theme="night"] .portal-auth-theme-toggle i.bi-moon-stars+span{display:none}