/* ══════════════════════════════════════════════════════════════════════
   Langbeen — het gezicht

   Het kantoor is een bakstenen puntgevel met één hoge lichtspleet als
   deur, en het beeldmerk is dezelfde vorm. Daaruit komt alles hier: een
   vlak in het blauw van de L, kalk als papier, en het groen van de kap
   alleen waar iets klaar of in orde is. Archivo, gewoon gezet, voor wat
   je scant; Source Serif voor wat je leest.

   Licht is de standaard en blijft dat ook op een telefoon die op donker
   staat. Donker is de schakelaar in de kop. Het neutraliserende blok in
   de media-query is daarvoor: de basis zou anders op een donker toestel
   zonder script de helft van de tokens omzetten en de andere helft niet.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Archivo';
    src: url('letters/archivo-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --lb-papier: #F4F7F8;      /* kalk */
    --lb-paneel: #FFFFFF;
    --lb-diep: #E7EEF2;
    --lb-inkt: #0E1F2B;
    --lb-inkt-zacht: #34495A;
    --lb-gedempt: #5A6E7C;
    --lb-lijn: #D5E0E7;
    --lb-lijn-sterk: #B5C6D2;

    /* Het blauw van de L, een tint dieper zodat wit erop leesbaar blijft
       (4,47:1). Het vlak van de held en de knoppen. */
    --lb-blauw: #007EBB;
    --lb-blauw-merk: #0092D2;
    --lb-hoofd: var(--lb-blauw);
    --lb-hoofd-tekst: #00577F;     /* 7,3:1 op kalk */
    --lb-hoofd-licht: #8FD3F4;
    --lb-nacht: #072638;           /* banden en voet: blauw, geen zwart */

    /* Groen alleen voor wat klaar of in orde is. */
    --lb-groen: #66A83B;
    --lb-groen-licht: #9BCB5B;
    --lb-groen-tekst: #3D7322;
    --lb-accent: var(--lb-groen);
    --lb-accent-licht: var(--lb-groen-licht);
    --lb-accent-tekst: var(--lb-groen-tekst);
    --lb-markeer: color-mix(in oklab, var(--lb-hoofd-licht) 45%, transparent);
    --lb-laag: #E3922B;

    --lb-schaduw: 0 1px 2px rgb(7 38 56 / 0.06), 0 10px 30px -14px rgb(7 38 56 / 0.22);
    --lb-schaduw-op: 0 2px 4px rgb(7 38 56 / 0.06), 0 22px 48px -18px rgb(7 38 56 / 0.32);
    --lb-band: var(--lb-nacht);
    --lb-op-band: #E8F0F5;
    --lb-op-band-zacht: #9DB4C3;

    --lb-r: var(--radius-l, 6px);
    --lb-breed: 1280px;
    --lb-smal: 760px;
    --lb-rand: clamp(1rem, 4.5vw, 3rem);
    --lb-kop-h: 72px;

    /* Met een terugvalletter op dezelfde maat, zodat de held niet verspringt
       wanneer de echte letter binnenkomt. */
    --lb-sans: 'Archivo', 'Archivo terugval', ui-sans-serif, system-ui, sans-serif;
    --lb-serif: 'Source Serif 4', 'Source Serif terugval', Georgia, serif;

    /* Expo uit: snel vertrekken, lang uitlopen. Nergens ease of linear. */
    --lb-soepel: cubic-bezier(0.16, 1, 0.3, 1);
    --lb-snel: 180ms;
    --lb-traag: 640ms;

    --grond: var(--lb-papier);
    --grond-warm: var(--lb-papier);
    --grond-diep: var(--lb-diep);
    --paneel: var(--lb-paneel);
    --inkt: var(--lb-inkt);
    --inkt-zacht: var(--lb-inkt-zacht);
    --inkt-gedempt: var(--lb-gedempt);
    --inkt-flauw: var(--lb-gedempt);
    --lijn: var(--lb-lijn);
    --lijn-zacht: var(--lb-lijn);
    --lijn-sterk: var(--lb-lijn-sterk);
    --banier: var(--lb-band);
    --op-banier: var(--lb-op-band);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --grond: #F4F7F8; --grond-warm: #F4F7F8; --grond-diep: #E7EEF2; --paneel: #FFFFFF;
        --inkt: #0E1F2B; --inkt-zacht: #34495A; --inkt-gedempt: #5A6E7C; --inkt-flauw: #5A6E7C;
        --lijn: #D5E0E7; --lijn-zacht: #D5E0E7; --lijn-sterk: #B5C6D2;
        color-scheme: light;
    }
}

/* Donker is nacht in het blauw van het kantoor, geen zwart. */
:root[data-thema="donker"] {
    --lb-papier: #071E2C;
    --lb-paneel: #0B2738;
    --lb-diep: #0A2333;
    --lb-inkt: #E8F0F5;
    --lb-inkt-zacht: #BDCEDA;
    --lb-gedempt: #8EA6B6;
    --lb-lijn: #173546;
    --lb-lijn-sterk: #24485C;
    --lb-groen-tekst: #A6D468;
    --lb-hoofd-tekst: #6CC6F2;
    --lb-markeer: color-mix(in oklab, var(--lb-blauw) 45%, transparent);
    --lb-schaduw: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 30px -12px rgb(0 0 0 / 0.5);
    --lb-schaduw-op: 0 2px 4px rgb(0 0 0 / 0.35), 0 24px 50px -18px rgb(0 0 0 / 0.6);
    --lb-band: #041521;

    --grond: var(--lb-papier); --grond-warm: var(--lb-papier); --grond-diep: var(--lb-diep); --paneel: var(--lb-paneel);
    --inkt: var(--lb-inkt); --inkt-zacht: var(--lb-inkt-zacht); --inkt-gedempt: var(--lb-gedempt); --inkt-flauw: var(--lb-gedempt);
    --lijn: var(--lb-lijn); --lijn-zacht: var(--lb-lijn); --lijn-sterk: var(--lb-lijn-sterk);
    color-scheme: dark;
}

@font-face { font-family: 'Archivo terugval'; src: local('Arial'), local('Helvetica'); size-adjust: 98%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'Source Serif terugval'; src: local('Georgia'), local('Times New Roman'); size-adjust: 97%; ascent-override: 92%; descent-override: 29%; line-gap-override: 0%; }

/* ── grond ─────────────────────────────────────────────────────────── */

html { scroll-padding-top: calc(var(--lb-kop-h) + 16px); }

body {
    background-color: var(--lb-papier);
    color: var(--lb-inkt);
    font-family: var(--lb-sans);
    font-size: 1.125rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--lb-traag) var(--lb-soepel), color var(--lb-traag) var(--lb-soepel);
}

::selection { background: var(--lb-markeer); color: var(--lb-inkt); }

:where(a, button, input, summary, [tabindex]):focus-visible {
    outline: 2.5px solid var(--lb-blauw);
    outline-offset: 3px;
    border-radius: 4px;
}

.lbOmhulsel { width: 100%; max-width: var(--lb-breed); margin-inline: auto; padding-inline: var(--lb-rand); }
.lbOmhulsel--smal { max-width: calc(var(--lb-smal) + 2 * var(--lb-rand)); }

.lbOog {
    font-family: var(--lb-sans);
    font-size: 1rem;
    font-weight: 600;
    font-stretch: 100%;
    color: var(--lb-hoofd-tekst);
    margin: 0 0 0.75rem;
}
.lbOog a { color: inherit; text-decoration: none; }
.lbOog a:hover { text-decoration: underline; }

.lbTitel {
    font-family: var(--lb-sans);
    font-weight: 750;
    font-stretch: 100%;
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0 0 clamp(1.3rem, 2.2vw, 1.9rem);
    text-wrap: balance;
}
.lbTitel--klein { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }

.lbLood {
    font-family: var(--lb-serif);
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: var(--lb-inkt-zacht);
    margin: 0 0 1.4rem;
    max-width: 38em;
}

.lbKlein { font-size: 0.9rem; color: var(--lb-gedempt); }

.lbBand { padding-block: clamp(4rem, 9vw, 7.5rem); }
.lbBand--diep { background: var(--lb-diep); }

.lbVak { margin-block: clamp(2.5rem, 6vw, 4.5rem); }

.lbKopRij {
    display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
    gap: 1rem 2rem; margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.lbKopRij .lbTitel { margin: 0; }

/* ── knoppen en links ─────────────────────────────────────────────── */

.lbKnop {
    --k-grond: var(--lb-blauw);
    --k-tekst: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 48px; padding: 0.7rem 1.35rem;
    font-family: var(--lb-sans); font-weight: 650; font-size: 1rem; font-stretch: 100%;
    color: var(--k-tekst); background: var(--k-grond);
    border: 1.5px solid var(--k-grond); border-radius: 999px;
    text-decoration: none; cursor: pointer;
    transition: transform var(--lb-snel) var(--lb-soepel), background-color var(--lb-snel), box-shadow var(--lb-snel);
}
.lbKnop:hover { --k-grond: var(--lb-hoofd-tekst); }
.lbKnop:active { transform: translateY(0); }
.lbKnop--stil { --k-grond: transparent; --k-tekst: var(--lb-inkt); border-color: var(--lb-lijn-sterk); }
.lbKnop--stil:hover { border-color: var(--lb-inkt); }
.lbKnop--licht { --k-grond: #FFFFFF; --k-tekst: var(--lb-nacht); }
.lbKnop--licht:hover { --k-grond: var(--lb-hoofd-licht); }
.lbKnop--groot { min-height: 56px; padding-inline: 1.8rem; font-size: 1.1rem; }
.lbKnoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }

.lbPijlLink {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 600; color: var(--lb-hoofd-tekst); text-decoration: none;
    border-bottom: 1.5px solid color-mix(in oklab, currentColor 35%, transparent);
    padding-bottom: 2px;
    transition: border-color var(--lb-snel);
}
.lbPijlLink:hover { border-color: currentColor; }

kbd {
    font-family: var(--lb-sans); font-size: 0.75rem; font-weight: 700;
    min-width: 1.6em; padding: 0.1em 0.45em; text-align: center;
    border: 1px solid var(--lb-lijn-sterk); border-bottom-width: 2px; border-radius: 5px;
    color: var(--lb-gedempt); background: var(--lb-paneel);
}

/* ── kop ──────────────────────────────────────────────────────────── */

.lbKop {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in oklab, var(--lb-papier) 84%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--lb-snel), box-shadow var(--lb-snel);
}
.lbKop.is-gerold { border-bottom-color: var(--lb-lijn); box-shadow: 0 6px 24px -18px rgb(0 0 0 / 0.35); }

.lbKop__balk { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); min-height: var(--lb-kop-h); }
.lbKop__merk { display: inline-flex; color: var(--lb-inkt); flex-shrink: 0; }
.lbLogo { display: block; height: 34px; width: auto; color: inherit; }

.lbNav { position: relative; isolation: isolate; display: flex; gap: 0.25rem; margin-inline: auto; }
.lbNav__link {
    position: relative; padding: 0.5rem 0.75rem;
    font-weight: 550; font-size: 1rem; color: var(--lb-inkt-zacht); text-decoration: none;
    border-radius: 8px;
    transition: color var(--lb-snel), background-color var(--lb-snel);
}
.lbNav__link:hover { color: var(--lb-inkt); }
.lbNav__link[aria-current="page"] { color: var(--lb-inkt); }
.lbNav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 2px; height: 2px;
    background: var(--lb-hoofd); border-radius: 2px;
}

.lbKop__rechts { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.lbNav + .lbKop__rechts { margin-left: 0; }
.lbKnop--afspraak { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.925rem; }

.lbLoketKnop {
    display: inline-flex; align-items: center; gap: 0.55rem;
    height: 42px; padding: 0 0.6rem 0 0.85rem;
    font-weight: 600; font-size: 0.925rem; color: var(--lb-inkt-zacht); text-decoration: none;
    background: var(--lb-paneel); border: 1px solid var(--lb-lijn-sterk); border-radius: 999px;
    transition: border-color var(--lb-snel), color var(--lb-snel), box-shadow var(--lb-snel);
}
.lbLoketKnop:hover { color: var(--lb-inkt); border-color: var(--lb-inkt); box-shadow: var(--lb-schaduw); }
.lbLoketKnop__lang { display: none; }
.lbLoketKnop__icoon { color: var(--lb-hoofd-tekst); }

.lbThemaKnop {
    display: inline-grid; place-items: center; width: 42px; height: 42px;
    color: var(--lb-inkt-zacht); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
.lbThemaKnop:hover { color: var(--lb-inkt); border-color: var(--lb-lijn-sterk); }
.lbThemaKnop__zon { display: none; }
:root[data-thema="donker"] .lbThemaKnop__zon { display: block; }
:root[data-thema="donker"] .lbThemaKnop__maan { display: none; }

@media (max-width: 1100px) { .lbNav { display: none; } .lbKop__rechts { margin-left: auto; } .lbNav + .lbKop__rechts { margin-left: auto; } .lbLoketKnop__lang { display: inline; } }
@media (max-width: 720px) { .lbKnop--afspraak, .lbLoketKnop__toets, .lbLoketKnop__lang { display: none; } .lbLogo { height: 28px; } }
@media (max-width: 380px) { .lbLoketKnop__tekst { display: none; } .lbLoketKnop { padding: 0 0.75rem; } }

/* ── het loketvenster ─────────────────────────────────────────────── */

.lbLoket {
    width: min(680px, calc(100vw - 1.5rem));
    max-height: min(640px, calc(100dvh - 2rem));
    margin: clamp(0.75rem, 11vh, 7rem) auto auto;
    padding: 0; border: 1px solid var(--lb-lijn); border-radius: calc(var(--lb-r) * 2.2);
    background: var(--lb-paneel); color: var(--lb-inkt);
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.45);
    overflow: visible;
}
.lbLoket::backdrop { background: rgb(7 38 56 / 0.38); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.lbLoket[open] { animation: lbLoketIn 260ms var(--lb-soepel); }
.lbLoket[open]::backdrop { animation: lbVervaag 260ms var(--lb-soepel); }
@keyframes lbLoketIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
@keyframes lbVervaag { from { opacity: 0; } }

.lbLoket__kader { position: relative; z-index: 0; display: flex; flex-direction: column; max-height: inherit; background: var(--lb-paneel); border-radius: inherit; overflow: hidden; }
/* Bij het openen loopt er een lijn onder het zoekveld, van blauw naar groen:
   het moment dat de stekker contact maakt. */
.lbLoket__veld { position: relative; }
.lbLoket__veld::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lb-blauw); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.lbLoket[open] .lbLoket__veld::after { animation: lbAansluit 1600ms var(--lb-soepel) 140ms both; }
@keyframes lbAansluit { 0% { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* De warp achter het venster, voor wie het juiste woord tikt. */
.lbWarp { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none; }
.lbLoket__veld { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0.9rem 0.4rem 1.2rem; border-bottom: 1px solid var(--lb-lijn); color: var(--lb-hoofd-tekst); }
.lbLoket__veld input {
    flex: 1; min-width: 0; height: 64px; border: 0; outline: 0; background: transparent;
    font-family: var(--lb-sans); font-size: 1.25rem; font-weight: 600; color: var(--lb-inkt);
}
.lbLoket .lbLoket__veld input[type="search"],
.lbLoket .lbLoket__veld input[type="search"]:focus { border: 0 !important; box-shadow: none !important; outline: none !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; }
@media (max-width: 600px) { .lbLoket__veld input { font-size: 1.1rem; height: 58px; } }
.lbLoket__veld input::placeholder { color: var(--lb-gedempt); font-weight: 500; }
.lbLoket__veld input::-webkit-search-cancel-button { display: none; }
.lbLoket__sluit { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; border: 0; background: none; cursor: pointer; padding: 0.4rem; color: var(--lb-inkt-zacht); font: inherit; font-size: 0.95rem; font-weight: 600; }
.lbLoket__sluit svg, .lbLoket__sluit span { display: none; }
/* Op een aanraakscherm is er geen Esc: een kruis en het woord, groot genoeg voor een duim. */
@media (pointer: coarse), (max-width: 600px) {
    .lbLoket__sluit kbd { display: none; }
    .lbLoket__sluit svg, .lbLoket__sluit span { display: inline; }
    .lbLoket__sluit { margin-right: -0.3rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: var(--lb-diep); color: var(--lb-inkt); }
}

.lbLoket__uitkomst { overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem; flex: 1; }
.lbLoket__groep { font-size: 0.875rem; font-weight: 600; color: var(--lb-gedempt); padding: 0.9rem 0.75rem 0.35rem; margin: 0; }
.lbLoket__item {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.15rem 1rem;
    padding: 0.7rem 0.8rem; border-radius: calc(var(--lb-r) * 1.4);
    color: var(--lb-inkt); text-decoration: none; scroll-margin: 0.5rem;
}
.lbLoket__item b { font-weight: 700; }
.lbLoket__item small { grid-column: 1; color: var(--lb-gedempt); font-size: 0.875rem; line-height: 1.35; }
.lbLoket__item i { grid-row: 1 / span 2; grid-column: 2; font-style: normal; color: var(--lb-gedempt); font-size: 0.8rem; }
.lbLoket__item mark { background: var(--lb-markeer); color: inherit; border-radius: 2px; }
.lbLoket__item[aria-selected="true"] { background: var(--lb-diep); box-shadow: inset 3px 0 0 var(--lb-hoofd); }
.lbLoket__item[aria-selected="true"] i { color: var(--lb-hoofd-tekst); }
.lbLoket__niets { padding: 1.4rem 0.8rem; color: var(--lb-gedempt); }
.lbLoket__voet { display: flex; gap: 1.2rem; align-items: center; margin: 0; padding: 0.7rem 1.1rem; border-top: 1px solid var(--lb-lijn); font-size: 0.8125rem; color: var(--lb-gedempt); }
.lbLoket__voet a { margin-left: auto; color: var(--lb-hoofd-tekst); font-weight: 600; }
.lbLoket__voet kbd { margin-right: 0.2rem; }
@media (max-width: 600px) { .lbLoket__voet span { display: none; } .lbLoket { margin-top: 0.75rem; max-height: min(520px, calc(100dvh - 5rem)); } }

/* ── held ─────────────────────────────────────────────────────────── */

/* Een vlak in het blauw van de L, en daarnaast de nieuwe lichtreclame
   voor het kantoor, bij avond. Het vlak loopt
   tot de rand van het scherm; de tekst houdt de lijn van de rest. */
.lbHero { position: relative; }
.lbHero__vlak {
    --lb-links: max(var(--lb-rand), calc((100vw - var(--lb-breed)) / 2 + var(--lb-rand)));
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 50vw, 900px);
    min-height: min(calc(100svh - var(--lb-kop-h) - 40px), 860px);
    background: var(--lb-blauw); color: #FFFFFF;
}
:root[data-thema="donker"] .lbHero__vlak { background: #00669A; }
.lbHero__woord {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem) clamp(4.5rem, 7vw, 6rem) var(--lb-links);
}

/* Het motto, gewoon gezet: zwaar, recht, twee regels. */
.lbMotto {
    margin: 0; font-family: var(--lb-sans); font-weight: 760; font-stretch: 100%;
    font-size: clamp(2.6rem, 4.9vw, 5.2rem); line-height: 1.02; letter-spacing: -0.03em;
    text-wrap: balance;
}
.lbMotto__regel { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.04em; }
.lbMotto__regel > span { display: inline-block; }

/* Bij het laden schuiven de twee regels op hun plaats; het beeld komt rustig dichterbij. */
@media (prefers-reduced-motion: no-preference) {
    .lbMotto__regel > span { animation: lbRegel 900ms var(--lb-soepel) both; }
    .lbMotto__regel:nth-child(2) > span { animation-delay: 110ms; }
    .lbHero__lood, .lbHero__erkend { animation: lbOp 900ms var(--lb-soepel) 500ms both; }
    .lbHero__gevel img { animation: lbGevel 2400ms var(--lb-soepel) both; }
}
@keyframes lbRegel { from { transform: translateY(105%); } }
@keyframes lbOp { from { opacity: 0; transform: translateY(12px); } }
@keyframes lbGevel { from { transform: scale(1.06); opacity: 0.4; } }

/* De inleiding eronder, en de erkenning als een kleine regel met het groen van de kap. */
.lbHero__lood { margin: clamp(1.5rem, 2.8vw, 2.2rem) 0 0; max-width: 32em; font-family: var(--lb-serif); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; color: rgb(255 255 255 / 0.92); }
.lbHero__erkend { display: flex; align-items: center; gap: 0.6rem; margin: 1.4rem 0 0; font-size: 0.95rem; font-weight: 600; color: rgb(255 255 255 / 0.85); }
.lbHero__erkend::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lb-groen-licht); box-shadow: 0 0 0 4px rgb(155 203 91 / 0.25); }
.lbHero__van { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; max-width: 31em; }
.lbHero__van blockquote { margin: 0; }
.lbHero__van p { margin: 0; font-family: var(--lb-serif); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.5; }
.lbHero__van figcaption { margin-top: 0.6rem; font-weight: 600; font-size: 1rem; color: rgb(255 255 255 / 0.78); }
.lbHero__zin { margin: 1.4rem 0 0; max-width: 31em; font-family: var(--lb-serif); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: rgb(255 255 255 / 0.82); }

.lbHero__gevel { position: relative; margin: 0; overflow: hidden; background: var(--lb-nacht); }
.lbHero__gevel img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 38% 62%;
}

.lbHero__gevel::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 34%; pointer-events: none;
    background: linear-gradient(to top, rgb(7 38 56 / 0.55), rgb(7 38 56 / 0));
}
.lbHero__onderschrift {
    position: absolute; z-index: 1; right: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 1.8rem);
    margin: 0; white-space: nowrap; color: rgb(255 255 255 / 0.9);
    font-size: 0.875rem; font-weight: 550; letter-spacing: 0.005em; text-align: right;
}
.lbHero__onderschrift::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 0.55rem; vertical-align: 0.1em;
    border-radius: 50%; background: var(--lb-groen-licht, #8CC63F); box-shadow: 0 0 0 4px rgb(140 198 63 / 0.25);
}
@media (max-width: 860px) { .lbHero__onderschrift { top: 1rem; bottom: auto; font-size: 0.8rem; } .lbHero__gevel::after { inset: 0 0 auto 0; background: linear-gradient(to bottom, rgb(7 38 56 / 0.5), rgb(7 38 56 / 0)); } }

/* ── de slides in de held ─────────────────────────────────────────── */
/* Tekst en beeld van een slide wisselen samen. Elke slide ligt in dezelfde
   cel, zodat het vlak niet verspringt als een kop langer is. */
.lbDias { display: grid; grid-template-rows: 1fr auto auto; }
.lbDia { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transition: opacity 700ms var(--lb-soepel), visibility 0s linear 700ms; }
.lbDia.is-actief { opacity: 1; visibility: visible; transition: opacity 900ms var(--lb-soepel) 150ms, visibility 0s; }
.lbDia .lbMotto { font-size: clamp(2.4rem, 4.4vw, 4.7rem); }
.lbDia__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin: clamp(1.4rem, 2.4vw, 2rem) 0 0; }
.lbKnop--wit { background: #FFFFFF; color: var(--lb-hoofd-tekst); border-color: #FFFFFF; }
.lbKnop--wit:hover { background: var(--lb-hoofd-licht); border-color: var(--lb-hoofd-licht); color: var(--lb-nacht); }
.lbDia__stil { color: #FFFFFF; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.45); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.lbDia__stil:hover { text-decoration-color: #FFFFFF; }

.lbDias__stand { display: flex; gap: 0.5rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.lbDias__streep { position: relative; width: clamp(28px, 3.2vw, 44px); height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.lbDias__streep span { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgb(255 255 255 / 0.3); overflow: hidden; }
.lbDias__streep span::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; transform: scaleX(0); transform-origin: left; }
.lbDias__streep.is-gezien span::after { transform: scaleX(1); }
.lbDias__streep.is-actief span::after { animation: lbStreep var(--lb-duur, 7000ms) linear forwards; }
.lbDias.is-stil .lbDias__streep.is-actief span::after { animation: none; transform: scaleX(1); }
.lbDias:hover .lbDias__streep.is-actief span::after { animation-play-state: paused; }
@keyframes lbStreep { to { transform: scaleX(1); } }
.lbDias .lbHero__erkend { margin-top: 1.1rem; }

.lbDiaBeeld { position: absolute; inset: 0; opacity: 0; transition: opacity 1100ms var(--lb-soepel); }
.lbDiaBeeld.is-actief { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .lbDia.is-actief .lbMotto__regel > span { animation: lbRegel 900ms var(--lb-soepel) both; }
    .lbDia.is-actief .lbHero__lood, .lbDia.is-actief .lbDia__knoppen { animation: lbOp 900ms var(--lb-soepel) 250ms both; }
    .lbDiaBeeld img { transition: transform 7s linear; }
    .lbDiaBeeld.is-actief img { transform: scale(1.04); }
}
@media (max-width: 860px) {
    .lbDia .lbMotto { font-size: clamp(2.1rem, 8.6vw, 3.3rem); }
    .lbDias__stand { margin-top: 1.6rem; }
}

/* Het loket ligt over de rand van het vlak: wie klant is, ziet het eerst. */
.lbHero__loket { position: relative; z-index: 2; margin-top: -34px; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.lbVraag {
    display: flex; align-items: center; gap: 0.85rem;
    width: 100%; max-width: 680px; min-height: 68px; padding: 0 0.85rem 0 1.3rem;
    background: var(--lb-paneel); color: var(--lb-gedempt); text-decoration: none;
    border: 1px solid var(--lb-lijn-sterk); border-radius: 999px;
    box-shadow: var(--lb-schaduw);
    font-size: 1.15rem; font-weight: 550;
    transition: border-color var(--lb-snel), box-shadow var(--lb-snel);
}
.lbVraag svg { color: var(--lb-hoofd-tekst); flex-shrink: 0; }
.lbVraag:hover { border-color: var(--lb-hoofd); box-shadow: var(--lb-schaduw-op); }
.lbVraag__tekst { color: var(--lb-inkt-zacht); }
.lbVraag__wissel {
    color: var(--lb-hoofd-tekst); font-weight: 700;
    transition: opacity 260ms, transform 260ms var(--lb-soepel);
}
.lbVraag__wissel.is-weg { opacity: 0; transform: translateY(6px); }
.lbVraag__toets { margin-left: auto; }
@media (max-width: 520px) { .lbVraag__wissel { display: none; } .lbVraag { font-size: 1.05rem; } }

.lbSnel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.4rem; list-style: none; padding: 0 0 0 1.3rem; margin: 1.1rem 0 0; color: var(--lb-gedempt); font-size: 0.975rem; }
.lbSnel li:first-child { font-weight: 500; }
.lbSnel a { font-weight: 600; color: var(--lb-inkt); text-decoration: underline; text-decoration-color: var(--lb-lijn-sterk); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color var(--lb-snel); }
.lbSnel a:hover { text-decoration-color: var(--lb-hoofd); }

@media (max-width: 860px) {
    .lbHero__vlak { grid-template-columns: 1fr; min-height: 0; }
    .lbHero__woord { padding: 2.6rem var(--lb-rand) 3rem; }
    .lbMotto { font-size: clamp(2.2rem, 9.4vw, 3.6rem); }
    .lbHero__gevel { aspect-ratio: 3 / 2; order: 2; }
    .lbHero__gevel img { object-position: 45% 70%; }
    .lbHero__zin { display: none; }
    .lbHero__loket { margin-top: -26px; padding-bottom: 2rem; }
    .lbVraag { min-height: 52px; font-size: 1rem; gap: 0.65rem; padding: 0 0.7rem 0 1rem; box-shadow: 0 8px 24px -14px rgb(7 38 56 / 0.35); }
    .lbVraag svg { width: 18px; height: 18px; }
    .lbVraag .lbVraag__toets { display: none; }
    .lbSnel { margin-top: 0.8rem; font-size: 0.9rem; gap: 0.3rem 1.1rem; }
    .lbSnel { padding-left: 0.5rem; }
}

/* ── termijnen ────────────────────────────────────────────────────── */

.lbBand--termijnen { position: relative; background: var(--lb-band); color: var(--lb-op-band); padding-block: clamp(2.8rem, 5vw, 3.6rem) clamp(2.2rem, 4vw, 3rem); }
.lbBand--termijnen .lbOog { color: var(--lb-op-band); font-size: 1.15rem; font-weight: 650; margin: 0; }
.lbBand--termijnen .lbPijlLink { color: var(--lb-op-band); }
.lbTermijnBalk__kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; align-items: baseline; margin-bottom: 1.4rem; }

.lbTermijnen { list-style: none; margin: 0; padding: 0; }
.lbTermijnen--balk { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: color-mix(in oklab, var(--lb-op-band) 14%, transparent); border-radius: calc(var(--lb-r) * 1.5); overflow: hidden; }
.lbTermijnen--balk .lbTermijn { background: var(--lb-band); padding: 1.3rem 1.4rem 1.2rem 0; }
.lbTermijnen--balk .lbTermijn:not(:first-child) { padding-left: 1.4rem; }
@media (max-width: 560px) { .lbTermijnen--balk .lbTermijn { padding-left: 0 !important; } }

.lbTermijn { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.lbTermijn__datum { display: grid; min-width: 4.4rem; line-height: 1; }
.lbTermijn__dag { font-weight: 820; font-stretch: 100%; font-size: 2.6rem; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.lbTermijn__maand { font-size: 0.9rem; font-weight: 500; opacity: 0.75; margin-top: 0.35rem; }
.lbTermijn__titel { margin: 0 0 0.45rem; font-weight: 600; line-height: 1.35; }
.lbTermijn__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.875rem; }
.lbTermijn__nog { font-weight: 700; color: var(--lb-accent-licht); }
.lbTermijn__nog:empty { display: none; }
.lbTermijn__meta a { color: inherit; opacity: 0.8; }
.lbTermijn__meta a:hover { opacity: 1; }
.lbBand--termijnen .lbTermijn__dag { color: #FFFFFF; }

/* De laadmeter: tien cellen en een nop, zoals een batterij op een
   dashboard. Hij laadt op wanneer hij in beeld komt, en de dagen tellen mee. */
.lbLading { position: relative; display: block; width: min(100%, 210px); margin: 0.1rem 0 0.7rem; padding-right: 5px; }
.lbLading::after { content: ""; position: absolute; right: 0; top: 2px; width: 3px; height: 4px; border-radius: 0 1.5px 1.5px 0; background: color-mix(in oklab, currentColor 32%, transparent); }
.lbLading__bak {
    position: relative; display: block; height: 8px; overflow: hidden; border-radius: 2px;
    background: color-mix(in oklab, currentColor 13%, transparent);
    mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
.lbLading__vul {
    position: absolute; inset: 0 auto 0 0; width: calc(var(--lb-lading, 0) * 100%); overflow: hidden;
    background: linear-gradient(90deg, var(--lb-accent), var(--lb-accent-licht));
    transform: scaleX(0); transform-origin: left;
    transition: transform 1500ms var(--lb-soepel);
}
.lbLading__vul::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.75), transparent); transform: translateX(-100%); }
.is-geladen .lbLading__vul { transform: scaleX(1); }
.is-geladen .lbLading__vul::after { animation: lbVonk 900ms 1300ms ease-out; }
@keyframes lbVonk { to { transform: translateX(100%); } }
.lbLading--laag .lbLading__vul { background: linear-gradient(90deg, var(--lb-laag), color-mix(in oklab, var(--lb-laag) 60%, #FFF)); }
.lbTermijnen--lijst .lbLading { color: var(--lb-inkt); }

.lbTermijnen--lijst { display: grid; gap: 0.6rem; }
.lbTermijnen--lijst .lbTermijn { padding: 1.1rem 1.2rem; background: var(--lb-paneel); border: 1px solid var(--lb-lijn); border-radius: calc(var(--lb-r) * 1.6); }
.lbTermijnen--lijst .lbTermijn__dag { color: var(--lb-hoofd-tekst); font-size: 2.2rem; }
.lbTermijnen--lijst .lbTermijn__nog { color: var(--lb-accent-tekst); }
.lbTermijnen--lijst .lbTermijn__meta a { color: var(--lb-accent-tekst); }

/* ── diensten ─────────────────────────────────────────────────────── */

.lbTwee { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.lbTwee__kop { position: sticky; top: calc(var(--lb-kop-h) + 2rem); }
@media (max-width: 900px) { .lbTwee { grid-template-columns: 1fr; } .lbTwee__kop { position: static; } }

.lbDiensten { list-style: none; margin: 0; padding: 0; counter-reset: dienst; }
.lbDienst { padding: 1.8rem 0; border-top: 1px solid var(--lb-lijn); }
.lbDienst:last-child { border-bottom: 1px solid var(--lb-lijn); }
.lbDienst__kop { margin: 0 0 0.45rem; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; font-stretch: 100%; letter-spacing: -0.015em; line-height: 1.2; }
.lbDienst p { margin: 0; font-family: var(--lb-serif); color: var(--lb-inkt-zacht); }

/* ── portalen ─────────────────────────────────────────────────────── */

/* Een lijst, geen kaarten: een regel erboven die blauw volloopt onder de
   muis, de naam groot, de uitleg eronder. */
.lbPortalen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.lbPortaal {
    position: relative; display: grid; gap: 0.3rem; height: 100%;
    padding: 1.4rem 2.6rem 1.6rem 0;
    color: var(--lb-inkt); text-decoration: none;
    border-top: 1px solid var(--lb-lijn-sterk);
}
.lbPortaal::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--lb-hoofd); transform: scaleX(0); transform-origin: left; transition: transform var(--lb-traag) var(--lb-soepel); }
.lbPortaal:hover::before { transform: scaleX(1); }
.lbPortaal__naam { font-weight: 760; font-stretch: 100%; font-size: 1.45rem; letter-spacing: -0.025em; transition: color var(--lb-snel); }
.lbPortaal:hover .lbPortaal__naam { color: var(--lb-hoofd-tekst); }
.lbPortaal__zin { font-family: var(--lb-serif); font-size: 1rem; color: var(--lb-gedempt); line-height: 1.45; }
.lbPortaal__pijl { position: absolute; right: 0.2rem; top: 1.55rem; color: var(--lb-gedempt); font-weight: 500; transition: transform var(--lb-snel) var(--lb-soepel), color var(--lb-snel); }
.lbPortaal:hover .lbPortaal__pijl { transform: translate(2px, -2px); color: var(--lb-hoofd-tekst); }

/* ── kantoor ──────────────────────────────────────────────────────── */

.lbKantoor { padding-block: clamp(4rem, 9vw, 7.5rem); background: var(--lb-papier); border-top: 1px solid var(--lb-lijn); }
.lbKantoor__binnen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.lbKantoor__plek { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); }
.lbKantoor__foto { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: calc(var(--lb-r) * 2); background: var(--lb-diep); }
.lbWissel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Drie beelden, elk een vijftal seconden; het eerste ligt onderaan en blijft staan. */
@media (prefers-reduced-motion: no-preference) {
    .lbWissel img:not(:first-child) { opacity: 0; animation: lbWissel 15s var(--lb-soepel) infinite both; }
    .lbWissel img:nth-child(3) { animation-delay: 5s; }
}
@media (prefers-reduced-motion: reduce) { .lbWissel img:not(:first-child) { display: none; } }
@keyframes lbWissel { 0%, 30% { opacity: 0; } 37%, 63% { opacity: 1; } 70%, 100% { opacity: 0; } }
@media (max-width: 860px) { .lbKantoor__binnen { grid-template-columns: 1fr; } }
/* Het adres in dezelfde twee breedtes als het motto. */
.lbKantoor__adres { margin: 0; font-style: normal; font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 400; font-stretch: 100%; line-height: 1.12; letter-spacing: -0.01em; color: var(--lb-inkt); }
.lbKantoor__adres b { display: block; font-weight: 780; font-stretch: 100%; letter-spacing: -0.03em; }
.lbKantoor__woord { max-width: 640px; }
.lbKantoor__woord p:not(.lbOog):not(.lbLood) { font-family: var(--lb-serif); font-size: 1.1rem; color: var(--lb-inkt-zacht); }

/* ── nieuws ───────────────────────────────────────────────────────── */

.lbNieuws { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 0 clamp(2rem, 5vw, 4rem); }
.lbNieuws .lbStuk--groot { grid-row: span 3; padding-right: clamp(0rem, 3vw, 2rem); border-right: 1px solid var(--lb-lijn); }
.lbNieuws--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .lbNieuws, .lbNieuws--drie { grid-template-columns: 1fr; } .lbNieuws .lbStuk--groot { grid-row: auto; border-right: 0; padding-right: 0; } }

.lbStuk { min-width: 0; overflow-wrap: anywhere; padding-block: 1.3rem; border-top: 1px solid var(--lb-lijn); }
.lbStuk--groot { border-top: 0; padding-top: 0; }
.lbStuk__datum { margin: 0 0 0.45rem; font-size: 0.9rem; font-weight: 500; color: var(--lb-gedempt); }
.lbStuk__titel { margin: 0; font-size: 1.25rem; font-weight: 680; font-stretch: 100%; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.lbStuk--groot .lbStuk__titel { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -0.03em; }
.lbStuk__titel a { color: inherit; text-decoration: none; background: linear-gradient(var(--lb-markeer), var(--lb-markeer)) no-repeat 0 92% / 0% 0.35em; transition: background-size var(--lb-traag) var(--lb-soepel); }
.lbStuk__titel a:hover { background-size: 100% 0.35em; }
.lbStuk__titel a::after { content: ""; position: absolute; inset: 0; }
.lbStuk { position: relative; }
.lbStuk__zin { margin: 0.7rem 0 0; font-family: var(--lb-serif); color: var(--lb-inkt-zacht); }

/* ── citaat ───────────────────────────────────────────────────────── */

.lbCitaat { padding-block: clamp(4rem, 10vw, 8rem); background: var(--lb-diep); }
.lbCitaat blockquote { margin: 0 auto; max-width: 980px; position: relative; padding-left: clamp(0rem, 5vw, 4rem); }
.lbCitaat p { margin: 0 0 1.4rem; font-family: var(--lb-serif); font-size: clamp(1.6rem, 3.6vw, 2.75rem); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.lbCitaat footer { font-weight: 650; color: var(--lb-inkt); }
.lbCitaat footer span { font-weight: 500; color: var(--lb-gedempt); margin-left: 0.4rem; }

/* ── binnenbladzijden ─────────────────────────────────────────────── */

.lbBlad__kop { padding-block: clamp(3rem, 8vw, 6rem) clamp(1.8rem, 4vw, 3rem); position: relative; }
.lbBlad__titel { font-family: var(--lb-sans); font-weight: 780; font-stretch: 100%; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 1.1rem; text-wrap: balance; }
.lbBlad__titel--bericht { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.03em; }
.lbBlad__lood { font-family: var(--lb-serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--lb-inkt-zacht); margin: 0; }
.lbBladFoto { margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
.lbBladFoto img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: 30% 45%; border-radius: calc(var(--lb-r) * 2); filter: grayscale(1) contrast(1.05); }

.lbOud { margin: 1.2rem 0 0; padding: 0.8rem 1rem; font-size: 0.95rem; border-left: 3px solid var(--lb-hoofd); background: var(--lb-diep); border-radius: 0 var(--lb-r) var(--lb-r) 0; color: var(--lb-inkt-zacht); }
.lbOud a { color: var(--lb-accent-tekst); font-weight: 600; }

/* De tekst uit het beheer en de dertien jaar berichten. Wat uit WordPress
   kwam, is gesaneerd tot een kleine witte lijst; deze regels maken er een
   leesbare bladzijde van, tabellen inbegrepen. */
.lbProsa { font-family: var(--lb-serif); font-size: 1.15rem; line-height: 1.72; color: var(--lb-inkt); padding-bottom: clamp(2rem, 5vw, 3rem); }
.lbProsa > * + * { margin-top: 1.1em; }
.lbProsa p { margin: 0; }
.lbProsa p + p { margin-top: 1em; }
.lbProsa h2, .lbProsa h3, .lbProsa h4 { font-family: var(--lb-sans); letter-spacing: -0.02em; line-height: 1.2; margin: 2.2em 0 0.6em; }
.lbProsa h2 { font-size: 1.6rem; font-weight: 800; }
.lbProsa h3 { font-size: 1.3rem; font-weight: 700; }
.lbProsa h4 { font-size: 1.1rem; font-weight: 700; }
.lbProsa > :first-child { margin-top: 0; }
.lbProsa a { color: var(--lb-accent-tekst); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lbProsa a:hover { text-decoration-thickness: 2px; }
.lbProsa strong, .lbProsa b { font-weight: 600; }
.lbProsa ul, .lbProsa ol { padding-left: 1.3em; }
.lbProsa li + li { margin-top: 0.4em; }
.lbProsa li::marker { color: var(--lb-hoofd); }
.lbProsa blockquote { margin-left: 0; padding-left: 1.2em; border-left: 3px solid var(--lb-hoofd-licht); color: var(--lb-inkt-zacht); }
.lbProsa hr { border: 0; border-top: 1px solid var(--lb-lijn); margin: 2.4em 0; }
.lbProsa img { max-width: 100%; height: auto; border-radius: var(--lb-r); }
.lbProsa table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-family: var(--lb-sans); font-size: 0.95rem; line-height: 1.45; }
.lbProsa th, .lbProsa td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--lb-lijn); text-align: left; vertical-align: top; min-width: 7rem; }
.lbProsa tr:first-child td, .lbProsa th { font-weight: 700; background: var(--lb-diep); }

.lbOproep { padding: clamp(1.6rem, 4vw, 2.4rem); background: var(--lb-paneel); border: 1px solid var(--lb-lijn); border-radius: calc(var(--lb-r) * 2.2); box-shadow: var(--lb-schaduw); }
.lbOproep__kop { margin: 0 0 0.4rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.lbOproep p { margin: 0; font-family: var(--lb-serif); color: var(--lb-inkt-zacht); }
.lbOproep--bericht { margin-bottom: clamp(3rem, 7vw, 5rem); border-left: 4px solid var(--lb-hoofd); }

.lbFeiten { display: grid; gap: 0; margin: 0; }
.lbFeiten div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--lb-lijn); }
.lbFeiten dt { font-weight: 600; color: var(--lb-gedempt); }
.lbFeiten dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .lbFeiten div { grid-template-columns: 1fr; gap: 0.15rem; } }

.lbKanalen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0.75rem; }
.lbKanalen a { display: grid; gap: 0.2rem; padding: 1.1rem 1.2rem; background: var(--lb-paneel); border: 1px solid var(--lb-lijn); border-radius: calc(var(--lb-r) * 1.6); color: var(--lb-inkt); text-decoration: none; font-weight: 700; transition: border-color var(--lb-snel), transform var(--lb-snel) var(--lb-soepel); }
.lbKanalen a:hover { border-color: var(--lb-inkt); transform: translateY(-2px); }
.lbKanalen span { font-size: 0.9rem; font-weight: 500; color: var(--lb-hoofd-tekst); }

/* ── de gids (/loket en de bladzijden die er een groep uit tonen) ── */

.lbGids { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.lbGids__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 2rem; }
.lbGids__link { display: grid; gap: 0.15rem; padding: 0.95rem 0; border-top: 1px solid var(--lb-lijn); color: var(--lb-inkt); text-decoration: none; height: 100%; }
.lbGids__titel { font-weight: 700; transition: color var(--lb-snel); }
.lbGids__uit { color: var(--lb-accent-tekst); font-weight: 600; }
.lbGids__zin { font-size: 0.925rem; color: var(--lb-gedempt); line-height: 1.45; }
.lbGids__link:hover .lbGids__titel { color: var(--lb-accent-tekst); }

/* ── nieuwsoverzicht ──────────────────────────────────────────────── */

.lbFilter { margin-top: 1.8rem; }
.lbFilter input {
    width: 100%; height: 56px; padding: 0 1.1rem;
    font: 600 1.05rem var(--lb-sans); color: var(--lb-inkt);
    background: var(--lb-paneel); border: 1.5px solid var(--lb-lijn-sterk); border-radius: calc(var(--lb-r) * 2);
}
.lbFilter input:focus { outline: none; border-color: var(--lb-hoofd); box-shadow: 0 0 0 4px color-mix(in oklab, var(--lb-hoofd) 18%, transparent); }
.lbFilter .lbKlein { margin: 0.6rem 0 0; min-height: 1.3em; }

.lbJaar { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 1.5rem; padding-top: 1rem; }
.lbJaar__kop { margin: 0; padding-top: 1.05rem; font-size: 1.5rem; font-weight: 800; font-stretch: 100%; letter-spacing: -0.03em; color: var(--lb-hoofd-tekst); position: sticky; top: calc(var(--lb-kop-h) + 1rem); align-self: start; }
@media (max-width: 640px) { .lbJaar { grid-template-columns: 1fr; } .lbJaar__kop { position: static; padding-top: 1.5rem; } }
.lbLijst { list-style: none; margin: 0; padding: 0; }
.lbLijst__stuk a { display: grid; gap: 0.25rem; padding: 1.05rem 0; border-top: 1px solid var(--lb-lijn); color: var(--lb-inkt); text-decoration: none; }
.lbLijst__stuk time { font-size: 0.9rem; font-weight: 500; color: var(--lb-gedempt); }
.lbLijst__titel { font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; transition: color var(--lb-snel); }
.lbLijst__zin { font-family: var(--lb-serif); color: var(--lb-inkt-zacht); font-size: 1rem; }
.lbLijst__stuk a:hover .lbLijst__titel { color: var(--lb-accent-tekst); }
.lbLeeg { padding: 2rem 0 4rem; }
[data-nieuws-lijst] { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ── formulieren uit de kern ──────────────────────────────────────── */

.lbFormulier { padding: clamp(1.4rem, 4vw, 2.2rem); background: var(--lb-paneel); border: 1px solid var(--lb-lijn); border-radius: calc(var(--lb-r) * 2.2); }
.lbFormulier :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: var(--lb-r); }
.lbFormulier :is(button[type="submit"], .knop--hoofd) { background: var(--lb-blauw); color: #FFFFFF; border-color: var(--lb-blauw); border-radius: 999px; font-family: var(--lb-sans); font-weight: 700; }

/* ── voet ─────────────────────────────────────────────────────────── */

.lbVoet { background: var(--lb-band); color: var(--lb-op-band); padding-top: clamp(3.5rem, 8vw, 6rem); }
.lbVoet a { color: var(--lb-op-band); text-decoration: none; }
.lbVoet a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.lbVoet__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2.5rem 2rem; padding-bottom: 3rem; }
@media (max-width: 960px) { .lbVoet__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lbVoet__raster { grid-template-columns: 1fr; } }
.lbVoet .lbLogo { height: 36px; color: #FFFFFF; margin-bottom: 1.2rem; }
.lbVoet__zin { font-family: var(--lb-serif); font-size: 1.15rem; color: var(--lb-op-band-zacht); margin: 0 0 1.4rem; max-width: 20em; }
.lbVoet .lbKnop--licht, .lbVoet .lbKnop--licht:hover { color: var(--lb-nacht); text-decoration: none; }
.lbVoet__kop { margin: 0 0 1rem; font-size: 1rem; font-weight: 650; color: #FFFFFF; }
.lbVoet__adres { font-style: normal; line-height: 1.85; }
.lbVoet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.lbVoet__wettelijk p { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.6; color: var(--lb-op-band-zacht); }
.lbVoet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem; padding-block: 1.4rem 2rem; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.85rem; color: var(--lb-op-band-zacht); }
.lbVoet__onder p { margin: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.lbVoet__onder a { color: var(--lb-op-band-zacht); }

/* ── beweging ─────────────────────────────────────────────────────── */

/* Licht en donker wisselen in een cirkel die uit de knop openvalt. Tijdens
   de wissel staan de gewone overgangen stil, anders vervaagt de nieuwe
   momentopname nog eens na. */
.lb-wissel, .lb-wissel *, .lb-wissel *::before, .lb-wissel *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: lbOnthul 640ms var(--lb-soepel); }
@keyframes lbOnthul {
    from { clip-path: circle(0 at var(--lb-vt-x, 100%) var(--lb-vt-y, 0)); }
    to { clip-path: circle(var(--lb-vt-r, 150vmax) at var(--lb-vt-x, 100%) var(--lb-vt-y, 0)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
    .lbLading__vul { transform: scaleX(1); }
    /* Overvloeien is geen beweging: de slides mogen zacht wisselen. */
    .lbDia, .lbDiaBeeld { transition-duration: 900ms !important; }
}

/* Wat de basis meebrengt voor een winkel en hier niet hoort. */
.laadscherm { display: none !important; }