/* 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;
    /* Invoervelden als token, zodat een thema ze kan meekleuren. De waarden hier
       zijn exact wat er voorheen hardgecodeerd stond, dus een thema dat ze niet
       overschrijft ziet er ongewijzigd uit. */
    --local-field-bg:rgba(255,255,255,.72);
    --local-field-border:rgba(23,32,51,.18);
    /* Label- en invoertekst op auth-pagina's. De waarden komen uit
       themes/default/css/theme.css, waar ze hardgecodeerd stonden; een thema dat
       ze niet overschrijft ziet er dus ongewijzigd uit. */
    --local-field-label:#26344d;
    --local-field-text:#111827;
    /* Makerskaart op /cms-info. Deze waarden zijn LETTERLIJK overgenomen uit
       themes/default/css/theme.css:133-137, waar ze hardgecodeerd stonden. Verander ze
       hier niet "om het netter te maken": dan verschuift het uiterlijk van elk thema dat
       ze niet zelf zet. */
    --local-maker-bg:linear-gradient(180deg,#fff,#fbfcfe);
    --local-maker-line:var(--portal-line, rgba(16,24,39,.11));
    --local-maker-heading:#172033;
    --local-maker-text:#475569;
    --local-maker-accent:#5f2d70;
    --local-maker-chip-bg:#fbf7fd;
    --local-maker-chip-line:#e3d8e9;
    --local-maker-accent-line:#d9c5e0;
    --local-maker-link-bg:#fff;
    --local-maker-link-bg-hover:#f4eef7;
    --local-maker-image-bg:linear-gradient(180deg,#fff,#f7f9fc);
    --local-maker-image-line:#dbe4f0;
    --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);
    /* Bedrijvenmodule (public.css) leunt op deze --portal-*-namen; zonder mapping
       viel ze terug op de hardcoded blauwe fallback i.p.v. het themapalet. */
    --portal-primary:var(--local-accent);
    --portal-accent:var(--local-warm);
    --portal-heading:var(--local-brand);
    --portal-text:var(--local-text);

    /* Universele default-tokenlaag voor de bedrijvenmodule: elk portalthema krijgt
       zo bruikbare --portal-*-waarden (uit zijn eigen --local-*-set + neutrale
       statuskleuren). Julianadorp overschrijft deze met de exacte mockup-waarden
       in themes/julianadorp/css/portal-tokens.css (gelijke specificiteit, later
       geladen → wint). Zo blijft de module universeel én pixelgetrouw op julianadorp. */
    --portal-bg:var(--local-bg);
    --portal-surface:var(--local-panel);
    --portal-surface-soft:var(--local-panel-muted);
    --portal-surface-tint:var(--local-panel-muted);
    --portal-chip:var(--local-panel-muted);
    --portal-border:var(--local-line);
    --portal-border-soft:var(--local-line);
    --portal-border-strong:var(--local-line);
    --portal-border-dashed:var(--local-line);
    --portal-chip-border:var(--local-line);
    --portal-heading-ink:var(--local-text);
    --portal-text-soft:var(--local-muted);
    --portal-muted-faint:var(--local-muted);
    --portal-mono-faint:var(--local-muted);
    --portal-primary-strong:var(--local-brand-dark);
    --portal-primary-soft:var(--local-panel-muted);
    --portal-primary-soft-border:var(--local-line);
    --portal-accent-deep:var(--local-warm);
    --portal-open:#2f7a4c;
    --portal-open-dot:#2f9c5e;
    --portal-open-soft:#e7f1e6;
    --portal-closed:#6f6a5c;
    --portal-closed-dot:#b0a894;
    --portal-closed-soft:#efece3;
    --portal-danger:var(--local-danger);
    --portal-stripe-1:var(--local-accent);
    --portal-stripe-2:var(--local-warm);
    --portal-stripe-3:var(--local-brand);
    --portal-stripe-4:var(--local-accent);
    --portal-stripe-5:var(--local-brand);
    --portal-cat-winkels:var(--local-panel-muted);
    --portal-cat-horeca:var(--local-panel-muted);
    --portal-cat-zorg:var(--local-panel-muted);
    --portal-cat-sport:var(--local-panel-muted);
    --portal-cat-diensten:var(--local-panel-muted);
    --portal-cat-verblijf:var(--local-panel-muted);
    --portal-radius-card:16px;
    --portal-radius-btn:11px;
    --portal-radius-pill:999px;
    --portal-shadow-card-hover:0 14px 30px rgba(20,30,60,.10);
    --portal-shadow-modal:0 30px 80px rgba(0,0,0,.4);
    --portal-font-serif:Georgia,'Times New Roman',serif;
    --portal-font-sans:system-ui,-apple-system,'Segoe UI',sans-serif;
    --portal-font-mono:ui-monospace,'Cascadia Mono',monospace;
}

.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:var(--local-field-border);
    background:var(--local-field-bg);
    color:var(--local-field-text);
}
/* Het default-thema zet deze kleur hardgecodeerd; via het token kan een thema
   met een donkere stand hem meenemen in plaats van onleesbaar donker te blijven. */
body[class*="site-theme-"] .portal-auth-form-v148 label,
body[class*="site-theme-"] .portal-remember-v149{
    color:var(--local-field-label);
}
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}
/* Eigen kopie van het oogje, los van de adminversie in 42-account-foundation.css. Die twee lopen sinds
   v014.10.725 uiteen: daar zijn de uitroepteken-regels weggehaald omdat in het beheer gemeten is dat ze
   niets doen. Dit portalthema is NIET gemeten, dus hier blijven ze staan. Wie ze hier ook wil weghalen:
   meet eerst op de portalpagina's met een wachtwoordveld (inloggen, registreren, wachtwoord herstellen),
   in dag en nacht. */
.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-"] body[class*="site-theme-"] body[class*="site-theme-"] body[class*="site-theme-"] body[class*="site-theme-"] body[class*="site-theme-"] body[class*="site-theme-"] body[class*="site-theme-"] body[class*="site-theme-"] 
/* 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. */
.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:var(--theme-font-heading,"Newsreader",Georgia,"Times New Roman",serif);
    --rh-body:var(--theme-font-body,"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif);
    --rh-mono:var(--theme-font-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}

/* Verificatiecode in zes vakjes (v014.10.510).
   Door JavaScript neergezet over het gewone tekstveld heen; zonder JavaScript blijft dat veld
   gewoon staan.

   LET OP de selectors: dit thema stuurt inputs en buttons aan via
   `body[class*="site-theme-"] .portal-auth-form-v148 input|button`. Een klasse alleen is dus niet
   genoeg: die regels zijn specifieker en wonnen. Vandaar overal `input.` respectievelijk `button.`
   met dezelfde body-prefix. Zonder dat kreeg het herstelcode-linkje de paarse knopopmaak en bleef
   het verborgen veld 100% breed, wat op mobiel horizontaal scrollen gaf. */
.portal-otp-v160{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    margin-top:4px;
}
.portal-auth-form-v148 input.portal-otp-vak-v160,
body[class*="site-theme-"] .portal-auth-form-v148 input.portal-otp-vak-v160{
    width:100%;
    min-width:0;
    padding:10px 0;
    text-align:center;
    font-size:22px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}
/* Het echte veld blijft in het formulier staan als drager van de waarde. Niet display:none: de
   herstelcode-stand haalt het weer tevoorschijn en de browser moet het kunnen focussen. */
.portal-auth-form-v148 input.portal-otp-echt-v160,
body[class*="site-theme-"] .portal-auth-form-v148 input.portal-otp-echt-v160{
    position:absolute;
    width:1px;
    min-width:0;
    height:1px;
    min-height:0;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}
.portal-otp-onder-v160{
    display:grid;
    gap:2px;
    justify-items:start;
}
/* Vaste hoogte, ook leeg: anders springt de knop eronder omhoog op het moment dat de melding
   verschijnt, precies wanneer iemand op het punt staat te klikken. */
.portal-otp-status-v160{
    min-height:1.2em;
    margin:0;
}
.portal-auth-form-v148 button.portal-otp-wissel-v160,
body[class*="site-theme-"] .portal-auth-form-v148 button.portal-otp-wissel-v160{
    justify-self:start;
    min-height:auto;
    padding:0;
    border:0;
    background:none;
    color:var(--local-brand,#4b3fdb);
    font:inherit;
    font-size:13px;
    font-weight:700;
    text-decoration:underline;
    cursor:pointer;
}
.portal-auth-form-v148 button.portal-otp-wissel-v160:hover,
body[class*="site-theme-"] .portal-auth-form-v148 button.portal-otp-wissel-v160:hover{
    background:none;
    text-decoration:none;
}
@media(max-width:400px){
    .portal-otp-v160{gap:6px}
    .portal-auth-form-v148 input.portal-otp-vak-v160,
    body[class*="site-theme-"] .portal-auth-form-v148 input.portal-otp-vak-v160{font-size:19px;padding:9px 0}
}


/* Uitloggen in het schuifpaneel is een POST-formulier; de knop erft de opmaak van de link. */
.portal-slide-form-v20{margin:0}
button.portal-slide-link-v20{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;width:100%;text-align:left}

/* ── Makerskaart op /cms-info ─────────────────────────────────────────
 * themes/default/css/theme.css zet deze kaart volledig in vaste lichte kleuren
 * (witte achtergrond, donkere kop, paarse chips). Op een thema met een
 * nachtstand bleef die kaart daardoor wit staan met een onleesbare kop.
 * Hieronder dezelfde opmaak, maar via de tokens, zodat een thema hem meeneemt.
 * De standaardwaarden van die tokens zijn LETTERLIJK de kleuren die hier stonden
 * (themes/default/css/theme.css:133-137), tot en met de verlopen en de randtinten.
 * Een thema dat ze niet overschrijft ziet er dus onveranderd uit; alleen een thema
 * dat ze wél zet (hogerheide) kleurt mee.
 */
body[class*="site-theme-"] .portal-maker-card-v149{
    border-color:var(--local-maker-line);
    background:var(--local-maker-bg);
}
body[class*="site-theme-"] .portal-maker-copy-v149 h2{color:var(--local-maker-heading)}
body[class*="site-theme-"] .portal-maker-copy-v149 p,
body[class*="site-theme-"] .portal-maker-copy-v149 small{color:var(--local-maker-text)}
body[class*="site-theme-"] .portal-maker-tags-v149 span{
    border-color:var(--local-maker-chip-line);
    background:var(--local-maker-chip-bg);
    color:var(--local-maker-accent);
}
/* Het default-thema zet deze kleur met !important; die moet hier dus ook mee. */
body[class*="site-theme-"] .portal-maker-links-v149 a{
    border-color:var(--local-maker-accent-line);
    background:var(--local-maker-link-bg);
    color:var(--local-maker-accent)!important;
}
/* De hover uit het default-thema heeft een lagere specificiteit dan de regel hierboven
   en zou er dus onder verdwijnen. Daarom hier meegenomen, met dezelfde tint. */
body[class*="site-theme-"] .portal-maker-links-v149 a:hover{
    background:var(--local-maker-link-bg-hover);
}
body[class*="site-theme-"] .portal-maker-image-v149{
    border-color:var(--local-maker-image-line);
    background:var(--local-maker-image-bg);
}

/* ============================================================
   Bevestigingsvraag op de site zelf (v014.10.658)
   ============================================================
   Zelfde reden als in het beheer: het venster van de browser opent met de domeinnaam erboven en
   staat los van het thema. Juist bij een handeling die iets afsluit hoort de bezoeker te zien dat
   hij met déze site praat. De kleuren komen uit de themavariabelen (--local-*), zodat de nachtstand vanzelf meegaat, dus elk portalthema krijgt zijn eigen
   uitstraling zonder dat er een tweede venster bij komt.
   ============================================================ */
.portal-confirm{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:16px}
.portal-confirm[hidden]{display:none!important}
.portal-confirm-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.portal-confirm-box{position:relative;z-index:1;width:min(420px,94vw);background:var(--local-panel,#fff);color:inherit;border:1px solid var(--local-line,rgba(148,163,184,.4));border-radius:16px;box-shadow:0 20px 60px rgba(15,23,42,.25);padding:20px}
.portal-confirm-box p{margin:0 0 18px;line-height:1.55}
.portal-confirm-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.portal-confirm-actions button{appearance:none;min-height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--local-line,rgba(148,163,184,.5));background:var(--local-panel,#fff);color:inherit;font:inherit;font-weight:600;cursor:pointer}
.portal-confirm-actions .is-primary{border-color:transparent;background:var(--local-brand,#4f46e5);color:#fff}
.portal-confirm-actions button:focus-visible{outline:2px solid var(--local-brand,#4f46e5);outline-offset:2px}
@media (max-width:480px){.portal-confirm{align-items:flex-end;padding:0}.portal-confirm-box{width:100%;border-radius:16px 16px 0 0}.portal-confirm-actions{flex-direction:column-reverse}.portal-confirm-actions button{width:100%}}