/* ============================================================
   Bestand: public_html/assets/themes/_local_portal/css/portal-shared.css
   ============================================================

   De gedeelde publieke basis voor zoeken, portalblokken en accountschermen.

   Waarom dit een eigen bestand is: een thema met een eigen schil laadt alleen zijn eigen
   theme.css, dus alles wat in _local_portal/css/theme.css staat komt daar nooit aan.
   ThemeShellService zet dit blad daarom in de stylesheetketen van ieder publiek thema.

   Alle kleuren gaan via portal-variabelen met een terugval, zodat elk thema hem in zijn
   eigen kleuren krijgt zonder dat dit bestand iets van dat thema hoeft te weten.
   ============================================================ */

/* `hidden` is een gedragsafspraak, geen vormgeving. Een eigen `display`-regel wint anders van de
   standaardregel van de browser, zoals bij het winkelmandje met zijn inline grid. `!important` is
   hier bewust nodig, zodat ook zo'n auteursregel het attribuut niet ongedaan maakt. */
[hidden] {
    display: none !important;
}

.portal-zoek__label {
    display: block;
    margin-bottom: .45rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--portal-muted, #6b7280);
}
.portal-zoek__verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* De drie velden vormen één ding: invoer, plaats, knop. Vandaar één rand eromheen en geen
   losse randjes per veld; dat las als drie losse bedieningen voor één handeling. */
.portal-zoek__rij {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--portal-border, #d5d8de);
    border-radius: 8px;
    background: var(--portal-surface, #fff);
    overflow: hidden;
}
.portal-zoek__rij:focus-within {
    border-color: var(--portal-primary, #14213d);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-primary, #14213d) 18%, transparent);
}
.portal-zoek__veld,
.portal-zoek__plaats {
    min-width: 0;
    padding: .6rem .7rem;
    border: 0;
    background: transparent;
    color: var(--portal-text, #1f2430);
    font: inherit;
    font-size: .95rem;
}
.portal-zoek__veld { flex: 1 1 auto; }
.portal-zoek__veld:focus,
.portal-zoek__plaats:focus { outline: none; }
.portal-zoek__plaats {
    flex: 0 0 auto;
    max-width: 42%;
    border-left: 1px solid var(--portal-border, #d5d8de);
    color: var(--portal-muted, #6b7280);
    cursor: pointer;
}
.portal-zoek__knop {
    flex: 0 0 auto;
    padding: 0 .85rem;
    border: 0;
    background: var(--portal-primary, #14213d);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
}
.portal-zoek__knop:hover { filter: brightness(1.12); }
.portal-zoek__uitleg {
    margin: .45rem 0 0;
    color: var(--portal-muted, #6b7280);
    font-size: .8rem;
    line-height: 1.5;
}

/* Op de zoekpagina zelf staat hij ruimer, want daar is hij het onderwerp en niet een hoekje
   van de rail. */
.portal-zoek--pagina { margin: 0 0 1.4rem; }
.portal-zoek--pagina .portal-zoek__veld { font-size: 1.05rem; padding: .75rem .85rem; }

.portal-zoek-telling,
.portal-zoek-melding {
    margin: 0 0 1rem;
    color: var(--portal-muted, #6b7280);
    font-size: .95rem;
}

.portal-zoek-treffers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.portal-zoek-treffer {
    display: grid;
    gap: .3rem;
    padding: 14px 16px;
    border: 1px solid var(--portal-border, #d5d8de);
    border-radius: 8px;
    background: var(--portal-surface, #fff);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.portal-zoek-treffer:hover {
    border-color: var(--portal-primary, #14213d);
    transform: translateY(-1px);
}
.portal-zoek-treffer__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}
.portal-zoek-treffer__titel {
    color: var(--portal-heading, var(--portal-text, #1f2430));
    font-weight: 600;
    font-size: 1.02rem;
}
.portal-zoek-treffer__soort {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--portal-primary-soft, rgba(0, 0, 0, .06));
    color: var(--portal-primary, #14213d);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.portal-zoek-treffer__tekst {
    color: var(--portal-text, #1f2430);
    font-size: .92rem;
    line-height: 1.6;
}
.portal-zoek-treffer__plaats {
    color: var(--portal-muted, #6b7280);
    font-size: .8rem;
}

/* Op een telefoon past de plaatskeuze niet meer naast de invoer zonder dat allebei te smal
   worden; dan onder elkaar, nog steeds als één blok. */
@media (max-width: 460px) {
    .portal-zoek__rij { flex-wrap: wrap; }
    .portal-zoek__veld { flex: 1 1 100%; }
    .portal-zoek__plaats {
        flex: 1 1 auto;
        max-width: none;
        border-left: 0;
        border-top: 1px solid var(--portal-border, #d5d8de);
    }
    .portal-zoek__knop { border-top: 1px solid var(--portal-border, #d5d8de); }
}

@media (prefers-reduced-motion: reduce) {
    .portal-zoek-treffer { transition: none; }
    .portal-zoek-treffer:hover { transform: none; }
}

/* ── Over ons: de uitgebreide secties ────────────────────────────────────────
   Staan hier en niet in elk thema-CSS-bestand: de vorm is gedeeld, de kleuren komen uit
   portal-variabelen met een terugval. Zo krijgt elk portalthema hetzelfde blok in zijn eigen
   kleuren zonder dat dit bestand iets van dat thema hoeft te weten. Dit blad wordt geladen
   door het gedeelde zoekformulier, dat op elke portalpagina staat. */
.fr-over-blok { margin: 2.4rem 0 0; }
.fr-over-kop {
    margin: 0 0 .5rem;
    font-family: var(--portal-font-serif, var(--portal-font-sans));
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-over-lead { margin: 0 0 1.1rem; color: var(--portal-muted); font-size: .96rem; line-height: 1.6; }

.fr-over-cijferrij {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fr-over-cijfer {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 16px 18px;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
    text-decoration: none;
}
a.fr-over-cijfer:hover { border-color: var(--portal-primary); }
.fr-over-cijfer-getal {
    font-family: var(--portal-font-serif, var(--portal-font-sans));
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--portal-primary);
}
.fr-over-cijfer-label { color: var(--portal-muted); font-size: .86rem; line-height: 1.45; }

/* Twee kolommen en niet zoveel als er passen. Met vier blokken gaf drie kolommen altijd 3+1,
   met een verdwaald blok op de tweede regel; hetzelfde euvel als bij de knoppen in het
   snelvenster. Twee kolommen geeft bij vier blokken een net vierkant en bij drie een volle
   regel plus een halve. */
.fr-over-waarden {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.fr-over-waarde {
    padding: 18px;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
}
.fr-over-waarde h3 {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-over-waarde p { margin: 0; color: var(--portal-text); font-size: .93rem; line-height: 1.65; }

.fr-over-stappen { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fr-over-stappen li { display: flex; gap: .9rem; align-items: flex-start; }
.fr-over-stapnr {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--portal-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}
.fr-over-staptekst { display: flex; flex-direction: column; gap: .15rem; }
.fr-over-staptekst strong { color: var(--portal-heading, var(--portal-text)); font-size: 1rem; }
.fr-over-staptekst span { color: var(--portal-text); font-size: .93rem; line-height: 1.6; }

/* Contact: de routekaarten hebben een doorklik onderaan, en de veelgestelde vragen zijn
   uitklapbaar zonder script. */
.fr-contact-routelink { margin: .7rem 0 0; }
.fr-contact-routelink a {
    color: var(--portal-primary);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.fr-contact-routelink a:hover { text-decoration: underline; }

.fr-contact-faq { display: grid; gap: 8px; }
.fr-contact-vraag {
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
}
.fr-contact-vraag > summary {
    padding: 14px 16px;
    color: var(--portal-heading, var(--portal-text));
    font-weight: 600;
    font-size: .96rem;
    cursor: pointer;
    list-style: none;
}
/* Het standaard-driehoekje van de browser staat links en springt; een eigen teken rechts blijft
   op zijn plek en draait netjes mee. */
.fr-contact-vraag > summary::-webkit-details-marker { display: none; }
.fr-contact-vraag > summary::after {
    content: '+';
    float: right;
    margin-left: 1rem;
    color: var(--portal-primary);
    font-weight: 700;
}
.fr-contact-vraag[open] > summary::after { content: '\2212'; }
.fr-contact-vraag > p {
    margin: 0;
    padding: 0 16px 14px;
    color: var(--portal-text);
    font-size: .93rem;
    line-height: 1.65;
}
.fr-contact-verwachting .fr-over-lead { max-width: 62ch; }

/* Historie: de weetjes. Twee kolommen op een breed scherm, één op een telefoon; elk weetje is
   een afgerond blok zodat je er eentje uit kunt pikken zonder de rest te lezen. */
.fr-weetjes-rij {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.fr-weetje {
    padding: 18px;
    border: 1px solid var(--portal-border);
    border-left: 3px solid var(--portal-primary);
    border-radius: 10px;
    background: var(--portal-surface, #fff);
}
.fr-weetje h3 {
    margin: 0 0 .4rem;
    font-family: var(--portal-font-serif, var(--portal-font-sans));
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-weetje p { margin: 0; color: var(--portal-text); font-size: .93rem; line-height: 1.7; }

/* ── Inloggen en registreren ─────────────────────────────────────────────────
   Het formulier en het zijblok naast elkaar, en samen vullen ze de kolom. Eerder stond het
   formulier op 480 pixels midden in een kolom van 832, met aan weerskanten een lege strook. */
.fr-auth-tweeluik {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
}
@media (max-width: 900px) {
    .fr-auth-tweeluik { grid-template-columns: minmax(0, 1fr); }
}
.fr-auth-zij {
    padding: 20px;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    background: var(--portal-surface-soft, var(--portal-surface, #fff));
}
.fr-auth-zij-kop {
    margin: 0 0 .8rem;
    font-family: var(--portal-font-serif, var(--portal-font-sans));
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-auth-voordelen { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: .8rem; }
.fr-auth-voordelen li { display: flex; flex-direction: column; gap: .15rem; }
.fr-auth-voordelen strong { color: var(--portal-heading, var(--portal-text)); font-size: .97rem; }
.fr-auth-voordelen span { color: var(--portal-muted); font-size: .89rem; line-height: 1.6; }
.fr-auth-regels h3 {
    margin: 0 0 .5rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--portal-heading, var(--portal-text));
}
.fr-auth-regels ul { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: .4rem; }
.fr-auth-regels li { color: var(--portal-text); font-size: .89rem; line-height: 1.6; }
.fr-auth-privacy {
    margin: 0;
    padding-top: .9rem;
    border-top: 1px solid var(--portal-border);
    color: var(--portal-muted);
    font-size: .84rem;
    line-height: 1.6;
}
.fr-auth-kicker { margin: .8rem 0 0; }

/* ── Wachtwoordhulp ──────────────────────────────────────────────────────────
   De eis en het advies zien er met opzet anders uit: alleen de eis krijgt een vinkje en het
   woord "verplicht". Een advies dat eruitziet als een eis liegt over wat de server doet. */
.fr-ww-hulp { margin: .5rem 0 0; }
.fr-ww-eisen, .fr-ww-adviezen { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.fr-ww-eisen li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--portal-text);
    font-size: .88rem;
}
.fr-ww-vink {
    flex: 0 0 auto;
    display: inline-block;
    width: 16px; height: 16px;
    border: 1.5px solid var(--portal-border);
    border-radius: 4px;
    position: relative;
}
.fr-ww-eisen li.is-goed .fr-ww-vink {
    border-color: var(--portal-primary);
    background: var(--portal-primary);
}
.fr-ww-eisen li.is-goed .fr-ww-vink::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.fr-ww-verplicht {
    margin-left: auto;
    color: var(--portal-muted);
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.fr-ww-advies-kop {
    margin: .8rem 0 .35rem;
    color: var(--portal-muted);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.fr-ww-adviezen li {
    padding-left: 1.1rem;
    position: relative;
    color: var(--portal-muted);
    font-size: .85rem;
    line-height: 1.55;
}
.fr-ww-adviezen li::before { content: '·'; position: absolute; left: .35rem; }
.fr-ww-adviezen li.is-goed { color: var(--portal-text); }

.fr-ww-sterkte { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; }
/* Dezelfde val als bij het beeldvenster op /cms-info: het sjabloon zet `hidden`, maar een `display`
   wint daarvan. Zonder JavaScript stond hier dus een lege balk onder het wachtwoordveld. */
.fr-ww-sterkte[hidden] { display: none; }
.fr-ww-sterkte-balk {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--portal-border);
    overflow: hidden;
}
.fr-ww-sterkte-balk > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--portal-primary);
    transition: width .2s ease;
}
/* Klassen en geen attribuutwaarden: twee regels die alleen in de waarde van hetzelfde attribuut
   verschillen tellen als dezelfde selector zodra je ze normaliseert, en CssDuplicatenTest wees daar
   terecht op. Met klassen zijn het twee echte selectors. */
.fr-ww-sterkte.is-zwak .fr-ww-sterkte-balk > span { background: #b23b3b; }
.fr-ww-sterkte.is-matig .fr-ww-sterkte-balk > span { background: #c07a2c; }
.fr-ww-sterkte-tekst { color: var(--portal-muted); font-size: .78rem; white-space: nowrap; }

/* Meekijken met het wachtwoord: de knop staat ín het veld, dus het veld houdt zijn breedte. */
.fr-ww-wikkel { position: relative; display: block; }
.fr-ww-wikkel > input { width: 100%; padding-right: 5.2rem; }
.fr-ww-kijk {
    position: absolute;
    top: 50%; right: .5rem;
    transform: translateY(-50%);
    padding: .25rem .55rem;
    border: 1px solid var(--portal-border);
    border-radius: 6px;
    /* Doorzichtig en niet var(--portal-surface): die kleur pakt per thema anders uit en gaf op
       julianadorp een donkergevulde knop midden in een wit invoerveld. Hij staat toch al op de
       achtergrond van het veld zelf. */
    background: transparent;
    color: var(--portal-muted);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}
.fr-ww-kijk:hover { color: var(--portal-primary); border-color: var(--portal-primary); }

@media (prefers-reduced-motion: reduce) {
    .fr-ww-sterkte-balk > span { transition: none; }
}

/* =====================================================================
   Uitschuifpaneel: geen "trek omlaag om te verversen" zolang het openstaat

   WAAROM DIT HIER STAAT. Elk thema met het uitschuifmenu heeft dit nodig, en
   dit blad wordt door álle thema's geladen (ook door de thema's met een eigen
   schil, via ThemeShellService). Eén regel op één plek dus, in plaats van in
   vijf themabladen dezelfde regel.

   WAT ER MISGING. Theo veegde in het open menu omlaag terwijl de lijst al
   bovenaan stond. Dat gebaar loopt door naar de pagina eronder, en Chrome op
   Android leest dat als "trek omlaag om te verversen": de pagina laadde opnieuw
   en het menu was weg. De lijst ín het paneel had al `overscroll-behavior:
   contain`, maar dat houdt alleen het doorschuiven naar de ouder tegen; het
   ververs-gebaar hangt aan het element dat het scrollgedrag van het venster
   bepaalt, en dat is html/body.

   ALLEEN ZOLANG HET PANEEL OPENSTAAT. Op een gewone pagina blijft
   "trek omlaag om te verversen" gewoon werken; dat is vertrouwd gedrag en daar
   is niets mis mee.

   `:has()` kent elke browser die dit paneel te zien krijgt; een browser zonder
   `:has()` valt terug op het oude gedrag en is daarmee niet slechter af dan
   voorheen.

   NIET ÓÓK op de omhulling van het paneel zetten. Dat lijkt logisch, maar
   `overscroll-behavior` geldt alleen op een vak dat de bezoeker kan scrollen, en
   dat is hier de lijst (`.portal-slide-content-v20`, die het al heeft). Op de
   omhulling zou het een regel zijn die niets doet maar wel de indruk wekt dat dit
   gebied is afgedekt. Een code-review wees dat aan.
   ===================================================================== */
html:has(.portal-slide-panel-v20.is-open),
body:has(.portal-slide-panel-v20.is-open) {
    overscroll-behavior-y: none;
}

/* De omhulling van de passkey-knop op de 2FA-stap. De knop zelf en het scheidingsregeltje
   eronder maakt elk thema zelf op; dit is alleen de indeling eromheen, en die ontbrak bij de
   vier thema's met een eigen schil. */
.portal-passkey-2fa-v159{display:grid;gap:12px;margin-bottom:4px}

/* ── Verificatiecode in zes vakjes ──────────────────────────────────────────
   Dit stond in _local_portal/css/theme.css, en dat blad wordt alleen geladen door thema's die
   de gedeelde portalbasis gebruiken. De zes thema's met een eigen schil (kolhorn, franeker,
   wieringerwerf, julianadorp, lodewijk, lodewijkhosting) laden het niet, en die kregen de
   codevakjes dus ONopgemaakt: zes vakken van 100% breed onder elkaar in plaats van zes kleine
   naast elkaar. Op julianadorp.nl was dat te zien (26 augustus 2026).

   Elke schil laadt WEL dit bestand, dus hier hoort het thuis. De opmaak is themaneutraal: hij
   hangt aan .portal-auth-form-v148 (die elk thema zelf invult) en gebruikt --local-brand met een
   terugval, zodat de kleur van het thema komt. Die terugvalketen is er omdat de thema's hun
   linkkleur onder verschillende namen hebben: de portalbasis noemt hem --local-brand, de vier
   thema's met een eigen schil --fr-link (ze komen allemaal uit hetzelfde ontwerp), en lodewijk
   --accent-2. Zonder die keten kreeg het herstelcode-linkje op julianadorp het paars van de
   laatste terugval, dwars door een blauw thema heen.
   ────────────────────────────────────────────────────────────────────────── */
/* 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,var(--fr-link,var(--accent-2,#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}
}

/* ── De zin bij het vinkje "vertrouw dit apparaat" ──────────────────────────
   Vier thema's met een eigen schil (franeker, julianadorp, kolhorn, wieringerwerf)
   zetten de veldnamen in dit formulier in kleine hoofdletters met een typemachine-
   letter: `.portal-auth-form-v148 label`. Dat klopt voor een korte naam als
   "Verificatiecode", maar de tekst bij het vinkje is óók een label, en die is twee
   zinnen lang. Bij drie van die vier kwam er dus een blok hoofdletters in typemachine-
   letter te staan, en dat leest niet. (Franeker had het al met `!important`
   dichtgezet; de andere thema's kennen die uppercase-regel niet.)

   Die themabladen zetten hier al `text-transform:none` op, maar met één klasse
   (`.portal-remember-v149`) verliest dat van de themaregel, want die telt een klasse
   plus een element. Vandaar hier dezelfde vorm mét de body-prefix, precies zoals bij
   de codevakjes hierboven. Op één plek, want alle zes schillen laden dit blad.

   De haak is de KAART en niet het formulier: op een account met zowel een passkey als
   een code staan er twee van deze zinnen op één scherm, en die bovenste staat buiten
   het formulier. Haakten we aan het formulier, dan kregen die twee verschillende maten.

   Alleen wat stuk was wordt hier gezet. Kleur blijft van het thema (die hebben daar
   elk een eigen variabele voor, en op een donkere stand hangt de leesbaarheid eraan),
   en de maten staan in rem omdat de themabladen dat ook doen en dus meeschalen.
   ────────────────────────────────────────────────────────────────────────── */
.portal-auth-card-v148 label.portal-remember-v149,
body[class*="site-theme-"] .portal-auth-card-v148 label.portal-remember-v149{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:0.55rem;
    font-family:inherit;
    font-size:0.875rem;
    font-weight:400;
    line-height:1.5;
    letter-spacing:normal;
    text-transform:none;
}