/*
 * ═══════════════════════════════════════════════════════════════════════
 * UNIQUE OPTIEK — HUISSTIJLLAAG
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Designport van het ontwerp Unique Optiek v13 (Claude Design-export) op
 * Magneet Pure. Geladen na style.css (zie functions.php), dus bij gelijke
 * specificiteit wint deze laag.
 *
 *   1. Fonts en tokens       ← ook in inc/unique/setup.php (critical CSS)
 *   2. Basis                  typografie, links, focus
 *   3. Knoppen                pri-cta / sec-cta / tekstlink
 *   4. Header en megamenu
 *   5. Mobiel menu en afspraakbalk
 *   6. Footer
 *   7. Blokken                paginakop, beeldtegels, kaarten, leessectie,
 *                             FAQ, contact, kleurentest, agenda, galerij, tekst
 *   8. Formulieren            Fluent Forms in de Unique-vlakken
 *   9. Templates              contact, afspraak, winkel, winkels
 *  10. Kennismodule, zoeken, 404
 *
 * Stapelorde (z-index):
 *   tegel-achtergrond 0 · overlay 1 · tegeltekst 2 · filmknop 3
 *   sectienavigatie 40 · afspraakbalk mobiel 900 · header + megamenu 1000
 *   mobiel menu / film (dialog, top layer)
 *
 * Kleuren en maten zijn gemeten op het gerenderde ontwerp (computed
 * styles), niet geschat. Hoeken zijn overal recht: het ontwerp heeft geen
 * radius.
 */


/* ═══════════════════════════════════════════════════════════════════════
   1. FONTS EN TOKENS
   Houd de tokens gelijk met bm_critical_css in inc/unique/setup.php.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face { font-family: Manrope; font-style: normal; font-weight: 200; font-display: swap; src: url("assets/unique/fonts/manrope-200.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/unique/fonts/manrope-300.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/unique/fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/unique/fonts/manrope-500.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/unique/fonts/manrope-600.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/unique/fonts/manrope-700.woff2") format("woff2"); }

:root {
    /* Unique */
    --uo-text: #102536;          /* basistekst, knoppen */
    --uo-ink: #142e40;           /* koppen */
    --uo-copy: #344650;          /* lopende tekst */
    --uo-muted: #45545a;
    --uo-soft: #52646c;          /* kleine koppen in menu's */
    --uo-link: #173d53;
    --uo-icon: #284b5a;
    --uo-line: #d8deda;
    --uo-line-strong: #738890;   /* invoervelden */
    --uo-paper: #f5f6f2;         /* kaarten, FAQ */
    --uo-tint: #e4eae7;          /* FAQ-knop, kanaal-iconen */
    --uo-focus: #376a87;
    --uo-error: #a82c2b;
    --uo-navy: #102336;
    --uo-pastel: linear-gradient(110deg, #f6eded, #f0f1e9 50%, #edf0f6);
    --uo-btn: linear-gradient(135deg, #0c1b2b 0%, #102336 36%, #1a3147 62%, #0e1f30 100%);
    --uo-btn-hover: linear-gradient(135deg, #132a40 0%, #1a3550 40%, #24425f 70%, #162b42 100%);
    --uo-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 8px rgba(16, 35, 54, .12);
    --uo-footer: linear-gradient(#0d1f30, #0b1a2a);
    --uo-edge: 20px;             /* rand van header, footer en beeldtegels */
    --uo-wrap: 1200px;           /* leesbreedte van secties */
    --uo-gutter: 24px;
    --uo-gap: 24px;
    --uo-col-gap: 24px;
    --uo-section: 40px;
    --uo-header-h: 99px;         /* gemeten door unique.js (plakkende elementen) */
    --uo-header-min: 99px;       /* vaste minimale hoogte van de headerbalk */
    --uo-ease: cubic-bezier(.2, 0, 0, 1);
    --uo-ease-in: cubic-bezier(.05, .7, .1, 1);

    /* Magneet Pure-tokens die het basisthema en de kennismodule lezen */
    --color-primary: #102336;
    --color-primary-hover: #1a3147;
    --color-primary-light: rgba(16, 35, 54, .06);
    --color-secondary: #284b5a;
    --color-secondary-hover: #173d53;
    --color-accent: #173d53;
    --color-accent-hover: #102336;
    --color-dark: #142e40;
    --color-light: #f5f6f2;
    --color-white: #fff;
    --color-gray-100: #f5f6f2;
    --color-gray-200: #e4eae7;
    --color-gray-300: #d8deda;
    --color-gray-500: #738890;
    --color-gray-600: #45545a;
    --color-gray-700: #344650;
    --font-primary: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-secondary: var(--font-primary);
    --fs-body: 18px;
    --lh-base: 1.65;
    --lh-heading: 1.25;
    --fw-bold: 500;
    --fw-semibold: 600;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-button: 0;
    --radius-card: 0;
    --radius-input: 0;
    --radius-image: 0;
    --radius-modal: 0;
    --z-header: 1000;
}

/* Ontwerp: mobiel tot 767px; vanaf 768px de maten van desktop met smallere
   kolommen (tablet, tot en met 1100px); daarboven de volle kolommen. */
@media (min-width: 768px) {
    :root { --uo-gutter: 32px; --uo-col-gap: 40px; --uo-section: 64px; --fs-body: 20px; }
}
@media (min-width: 1101px) {
    :root { --uo-col-gap: 64px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   2. BASIS
   ═══════════════════════════════════════════════════════════════════════ */
html { scroll-padding-top: 180px; }

body.uo-site {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--uo-text);
}

.uo-site h1, .uo-site h2, .uo-site h3, .uo-site h4 {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--uo-ink);
    letter-spacing: -.025em;
}

.uo-site ::selection { background: #c6dde7; color: var(--uo-text); }

/* Het basisthema zet outline: none !important op a:focus (0,1,1), wat de
   focusring van :focus-visible (0,1,0) wegdrukt. Hier terug, zichtbaar. */
.uo-site a:focus-visible,
.uo-site button:focus-visible,
.uo-site summary:focus-visible,
.uo-site input:focus-visible,
.uo-site select:focus-visible,
.uo-site textarea:focus-visible {
    outline: 3px solid var(--uo-focus) !important;
    outline-offset: 3px;
    border-radius: 0;
}

.uo-site [id] { scroll-margin-top: 180px; }

.skip-to-content--footer { left: 12rem; }

.uo-wrap {
    width: min(var(--uo-wrap), calc(100% - var(--uo-gutter) * 2));
    margin-inline: auto;
}

.uo-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uo-gap) var(--uo-col-gap);
    align-items: start;
}
@media (min-width: 768px) {
    .uo-split { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
@media (min-width: 1101px) {
    .uo-split { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}
.uo-split--solo { grid-template-columns: minmax(0, 1fr) !important; }
.uo-split--solo > * { max-width: 776px; }

.uo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }

.uo-section-intro h2 {
    font-size: 32px;
    line-height: 1.3;
    margin: 0;
}
.uo-section-intro p {
    margin: 0;
    font-size: inherit;
    color: var(--uo-copy);
}


/* ═══════════════════════════════════════════════════════════════════════
   3. KNOPPEN
   Het basisthema zet kleuren op a.pri-cta:visited (0,2,1). Daarom staan
   hier overal de tag en :visited erbij (valkuil 1).
   ═══════════════════════════════════════════════════════════════════════ */
.uo-site .pri-cta,
.uo-site a.pri-cta,
.uo-site a.pri-cta:visited,
.uo-site button.pri-cta {
    min-height: 56px;
    padding: 15px 28px;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: normal;
    text-align: center;
    color: #fff;
    background: var(--uo-btn);
    border: 1px solid #0c1b2b;
    border-radius: 0;
    box-shadow: var(--uo-btn-shadow);
    transform: none;
}
.uo-site a.pri-cta:hover,
.uo-site button.pri-cta:hover {
    color: #fff;
    background: var(--uo-btn-hover);
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 12px rgba(16, 35, 54, .18);
}
.uo-site .pri-cta .button-text,
.uo-site .pri-cta .button-icon { color: #fff !important; }

.uo-site .sec-cta,
.uo-site a.sec-cta,
.uo-site a.sec-cta:visited,
.uo-site button.sec-cta {
    min-height: 56px;
    padding: 15px 28px;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: normal;
    text-align: center;
    color: var(--uo-navy);
    background: linear-gradient(135deg, #f8f8f6 0%, #f3f2ee 100%);
    border: 1px solid rgba(16, 35, 54, .24);
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(16, 35, 54, .06);
    transform: none;
}
.uo-site a.sec-cta:hover,
.uo-site button.sec-cta:hover {
    color: var(--uo-navy);
    background: linear-gradient(135deg, #fff 0%, #eceae4 100%);
    border-color: rgba(16, 35, 54, .4);
    transform: none;
}
.uo-site .sec-cta .button-text,
.uo-site .sec-cta .button-icon,
.uo-site .sec-cta:hover .button-text,
.uo-site .sec-cta:hover .button-icon { color: var(--uo-navy) !important; }

.uo-site .pri-cta:active,
.uo-site .sec-cta:active { transform: translateY(1px); }
/* In de inhoud: regular, regelhoogte 1.3. Primair en secundair even hoog,
   ook naast elkaar (het ontwerp had de secundaire 52px en 16px; op verzoek
   gelijk aan de primaire): 56px, op mobiel 54px en 16px. Beide een rand van
   1px die je ziet, zodat ze ook even groot lijken. De header houdt zijn
   eigen maten. */
.uo-site main :is(a.pri-cta, button.pri-cta, a.sec-cta, button.sec-cta) { font-weight: 400; line-height: 1.3; }
@media (max-width: 767px) {
    .uo-site main :is(a.pri-cta, button.pri-cta, a.sec-cta, button.sec-cta) { min-height: 54px; font-size: 16px; }
}

.uo-text-link,
a.uo-text-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    font-size: 18px;
    color: var(--uo-ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}
.uo-text-link .bm-icon { transition: transform .2s var(--uo-ease); }
.uo-text-link:hover .bm-icon { transform: translateX(4px); }


/* ═══════════════════════════════════════════════════════════════════════
   4. HEADER EN MEGAMENU
   Altijd wit en ondoorzichtig; geen has-dark-hero, één logo (valkuil 4).
   ═══════════════════════════════════════════════════════════════════════ */
.uo-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
}
.admin-bar .uo-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .uo-header { top: 46px; } }

.uo-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--uo-header-min);   /* niet --uo-header-h: die meet deze balk zelf */
    padding: 20px var(--uo-edge);
}

.uo-header-logo { flex: none; display: block; }
.uo-header-logo img { display: block; width: auto; height: 59px; }

.uo-header-nav { margin-left: auto; }

.uo-nav-list {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.uo-nav-list li { margin: 0; }
.uo-nav-list a,
.uo-nav-list .uo-mega-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: lowercase;
    color: #111;
    text-decoration: none;
    cursor: pointer;
}
.uo-nav-list .uo-mega-toggle { color: var(--uo-navy); }
.uo-nav-list a::after,
.uo-nav-list .uo-mega-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s var(--uo-ease);
}
.uo-nav-list .uo-mega-toggle::after { right: 24px; }
.uo-nav-list a:hover::after,
.uo-nav-list a[aria-current="page"]::after,
.uo-nav-item.is-current > a::after,
.uo-nav-item.is-current > .uo-mega-toggle::after,
.uo-nav-list .uo-mega-toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.uo-mega-caret { transition: transform .2s var(--uo-ease); }
.uo-mega-toggle[aria-expanded="true"] .uo-mega-caret { transform: rotate(180deg); }

.uo-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 30px;
}
.uo-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--uo-navy);
}

/* Megamenu */
.uo-mega {
    position: absolute;
    top: 100%;
    left: var(--uo-edge);
    right: var(--uo-edge);
    padding: 24px 40px 40px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(20, 46, 64, .1);
    font-size: 18px;
}
.uo-mega[hidden] { display: none; }
.uo-mega.is-entering { animation: uo-mega-in .3s var(--uo-ease-in); }
@keyframes uo-mega-in { from { opacity: 0; transform: translateY(-8px); } }

.uo-mega-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #dddedf;
}
.uo-mega-overview {
    font-size: 18px;
    font-weight: 500;
    color: var(--uo-navy);
    text-decoration: none;
}
a.uo-mega-overview:hover { text-decoration: underline; text-underline-offset: 4px; }
.uo-mega-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--uo-navy);
}

.uo-mega-layout {
    display: grid;
    grid-template-columns: repeat(var(--uo-mega-cols, 3), minmax(0, 1fr));
    gap: 40px;
    margin-top: 28px;
}
.uo-mega-col h2,
.uo-mega-advice h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--uo-soft);
}
.uo-mega-col > a {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 -12px;
    padding: 16px 12px;
    color: var(--uo-navy);
    text-decoration: none;
    transition: background-color .15s var(--uo-ease);
}
.uo-mega-col > a:hover,
.uo-mega-col > a[aria-current="page"] { background: var(--uo-paper); }
.uo-mega-col > a .bm-icon { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.uo-mega-col strong {
    display: block;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--uo-navy);
}
.uo-mega-col small {
    display: block;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #475c64;
}
.uo-mega-advice {
    align-self: start;
    padding: 28px;
    background: var(--uo-paper);
}
.uo-mega-advice p {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.7;
    color: #556773;
}
.uo-mega-advice .uo-text-link { display: flex; margin-top: 8px; text-decoration: none; font-weight: 500; font-size: 17px; }
.uo-mega-advice .uo-text-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
    .uo-header-nav,
    .uo-header-btn,
    .uo-mega { display: none !important; }
    .uo-header-actions { margin-left: auto; gap: 4px; }
}
@media (min-width: 1025px) {
    .uo-burger { display: none; }
    /* Zoeken ook op desktop, tussen het menu en de knoppen (afwijking van het
       ontwerp, dat zoeken alleen op mobiel en tablet toont). */
    .uo-header-actions .bm-search-toggle { margin-right: 4px; }
}
@media (min-width: 1025px) and (max-width: 1240px) {
    .uo-nav-list { gap: 18px; }
    .uo-header-actions { margin-left: 16px; gap: 8px; }
    .uo-header-actions .bm-search-toggle { width: 40px; margin-right: 0; }
    .uo-header-bar .pri-cta,
    .uo-header-bar .sec-cta { padding-inline: 16px; }
    .uo-site .uo-header-bar a.uo-header-btn { white-space: nowrap; }
    .uo-nav-list > li > :is(a, button) { white-space: nowrap; }
    .uo-nav-list > li > button .bm-icon { flex-shrink: 0; }
    .uo-header-logo { flex-shrink: 0; }
}
/* Smalste desktop (1025–1120px): met zoeken erbij past alles op één regel. */
@media (min-width: 1025px) and (max-width: 1120px) {
    .uo-header-bar { gap: 12px; }
    .uo-nav-list { gap: 12px; }
    .uo-header-logo img { height: 48px; }
    .uo-header-bar .pri-cta,
    .uo-header-bar .sec-cta { padding-inline: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   5. MOBIEL MENU EN AFSPRAAKBALK
   ═══════════════════════════════════════════════════════════════════════ */
.uo-mobile-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: var(--uo-ink);
    overflow: hidden;
}
.uo-mobile-menu[open] { display: flex; flex-direction: column; }
.uo-mobile-menu::backdrop { background: rgba(16, 37, 54, .3); }
.uo-mobile-menu[open] { animation: uo-fade .2s var(--uo-ease); }
@keyframes uo-fade { from { opacity: 0; } }

.uo-mobile-menu-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--uo-header-h);
    padding: 20px;
}
.uo-mobile-menu-logo img { height: 58px; width: auto; }
.uo-mobile-close {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    font-size: 18px;
    color: var(--uo-ink);
}
.uo-mobile-subhead {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px 12px;
    border-bottom: 1px solid var(--uo-line);
}
.uo-mobile-subhead[hidden] { display: none; }
.uo-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    font-size: 17px;
    color: var(--uo-link);
}
.uo-mobile-panel-title { margin: 0 0 0 auto; font-size: 18px; font-weight: 500; text-transform: lowercase; }

.uo-mobile-menu-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 20px 24px;
}
.uo-mobile-root ul { margin: 0; padding: 0; list-style: none; }
.uo-mobile-root li { margin: 0; border-bottom: 1px solid var(--uo-line); }
.uo-mobile-root a,
.uo-mobile-root button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 72px;
    font-size: 22px;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--uo-ink);
    text-decoration: none;
    text-align: left;
}
.uo-mobile-root a[aria-current="page"] { font-weight: 600; }
.uo-mobile-menu[data-level="panel"] .uo-mobile-root { display: none; }

.uo-mobile-panel[hidden] { display: none; }
.uo-mobile-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 500;
    color: var(--uo-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--uo-line);
}
.uo-mobile-group { padding: 16px 0 8px; }
.uo-mobile-group h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--uo-soft);
}
.uo-mobile-destination {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    color: var(--uo-ink);
    text-decoration: none;
}
.uo-mobile-destination .bm-icon { flex: none; margin-top: 2px; }
.uo-mobile-destination strong { display: block; font-size: 19px; font-weight: 600; line-height: 1.35; }
.uo-mobile-destination small { display: block; margin-top: 2px; font-size: 16px; line-height: 1.5; color: #475c64; }

.uo-mobile-menu-foot {
    flex: none;
    display: grid;
    gap: 8px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--uo-line);
    background: #fff;
}
.uo-mobile-menu-foot .pri-cta { width: 100%; }
.uo-mobile-secondary {
    justify-self: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 17px;
    color: var(--uo-link);
    text-decoration: underline;
    text-underline-offset: 4px;
}
body.uo-menu-open { overflow: hidden; }

/* Vaste afspraakknop onderaan, alleen tot en met tablet */
.uo-mobile-booking { display: none; }
@media (max-width: 1024px) {
    .uo-mobile-booking {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: flex;
        padding: 12px var(--uo-gutter);
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid #d9dfe1;
        box-shadow: 0 -4px 24px rgba(16, 37, 54, .03);
    }
    .uo-mobile-booking .pri-cta { width: 100%; min-height: 48px !important; padding: 12px 16px !important; }
    body.uo-site:has(.uo-mobile-booking) { padding-bottom: 75px; }
    body.uo-journey-body .uo-mobile-booking { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   6. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.uo-footer {
    position: relative;
    background: var(--uo-footer);
    color: #fff;
}
.uo-footer-inner { padding: 64px var(--uo-edge) 0; }
.uo-footer a { color: #edf1f3; text-decoration: none; }
.uo-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.uo-footer h2, .uo-footer h3 { color: #fff; }

/* Reviewslider bovenaan de footer, op de pastelkleurige fade */
.uo-reviewslider { padding: 64px var(--uo-edge); background: var(--uo-pastel); color: var(--uo-ink); }
.uo-reviewslider-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.uo-footer .uo-reviewslider h2 { margin: 0; font-size: 36px; line-height: 1.2; letter-spacing: -.035em; color: var(--uo-ink); }
.uo-reviewslider-knoppen { display: flex; gap: 8px; }
.uo-reviewslider-knoppen button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid #879a9f; background: #fff; color: var(--uo-ink); cursor: pointer; transition: background-color .2s var(--uo-ease), border-color .2s var(--uo-ease); }
.uo-reviewslider-knoppen button:hover { border-color: var(--uo-ink); background: #fdfefd; }
.uo-reviewslider-knoppen button:focus-visible { outline: 2px solid var(--uo-ink); outline-offset: 3px; }
.uo-reviewslider .embla__container { align-items: stretch; margin: 0 0 0 -24px; padding: 0; list-style: none; }
.uo-reviewslider-dia { flex: 0 0 88%; margin: 0; padding: 0 0 0 24px; }
.uo-reviewslider-dia::before { content: none; }
.uo-reviewslider-dia > .uo-review { height: 100%; background: #fff; }
.uo-footer .uo-review .uo-review-titel { color: var(--uo-ink); }
.uo-footer .uo-review a, .uo-footer .uo-review a:hover { color: var(--uo-ink); text-decoration: underline; text-underline-offset: 3px; }
.uo-footer .uo-review .uo-review-lees { color: var(--uo-ink); }
.uo-reviewslider-alle { margin: 24px 0 0; }
.uo-footer .uo-reviewslider-alle .uo-text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; color: var(--uo-link, var(--uo-ink)); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) { .uo-reviewslider-dia { flex-basis: 50%; } }
@media (min-width: 1101px) { .uo-reviewslider-dia { flex-basis: 33.3333%; } }
@media (max-width: 767px) { .uo-reviewslider { padding-block: 48px; } .uo-footer .uo-reviewslider h2 { font-size: 30px; } .uo-reviewslider-knoppen button { width: 44px; height: 44px; } }

.uo-signup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, .19);
}
@media (min-width: 1025px) {
    .uo-signup { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 48px; }
    .uo-signup--zonder-formulier { grid-template-columns: minmax(0, 1fr); }
}
.uo-signup-eyebrow { display: block; margin-bottom: 16px; font-size: 18px; line-height: 1.5; color: #ccd9dc; }
.uo-signup h2 { margin: 0 0 20px; font-size: 36px; line-height: 1.2; letter-spacing: -.035em; }
.uo-signup-intro p { max-width: 483px; margin: 0; font-size: 18px; line-height: 1.6; color: #e0e8e9; }
.uo-signup-intro .pri-cta { margin-top: 24px; }
.uo-signup-form { padding: 28px; background: var(--uo-paper); color: var(--uo-ink); }

.uo-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-bottom: 30px;
}
@media (min-width: 768px) { .uo-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding-bottom: 48px; } }
/* Vier gelijkwaardige kolommen, niet de 2fr-brandkolom van het basisthema (valkuil 3). */
@media (min-width: 1101px) { .uo-footer-top { grid-template-columns: 1.1fr 1fr 1fr 1.1fr; gap: 48px; } }

.uo-footer-brand img { width: 180px; height: auto; }
.uo-footer-brand p { margin: 24px 0 20px; font-size: 18px; line-height: 1.65; color: #edf1f3; }
.uo-footer-social { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 5px; }
.uo-footer-social a,
.uo-footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 18px;
}
.uo-footer-menu h3,
.uo-footer-location h3 {
    margin: 0 0 20px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
}
.uo-footer-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 5px 0;
    font-size: 18px;
    line-height: 1.65;
}
.uo-footer-locations { display: grid; gap: 28px; align-content: start; }
.uo-footer-location { font-size: 18px; line-height: 1.65; }
.uo-footer-location address { margin: 0 0 6px; font-style: normal; color: #edf1f3; }
.uo-footer-location h3 a { font-size: 18px; font-weight: 400; }
.uo-footer-location > a { display: block; min-height: 44px; padding: 4px 0; overflow-wrap: anywhere; }
.uo-footer-location > .uo-footer-location__book { display: flex; align-items: center; gap: 6px; min-height: 38px; margin-top: 4px; }
/* Ontwerp: op mobiel 48px hoge links in de footer. */
@media (max-width: 767px) {
    .uo-footer-brand p { margin: 18px 0; }
    .uo-footer-menu a, .uo-footer-location > a, .uo-footer-location > .uo-footer-location__book, .uo-footer-social a, .uo-footer-whatsapp, .uo-footer-bottom nav a, .uo-footer-directory nav a { min-height: 48px; }
}
@media (min-width: 768px) { .uo-footer-social { margin-bottom: 14px; } }

.uo-footer-directory {
    margin-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.uo-footer-directory summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 62px;
    padding: 16px 0;
    font-size: 18px;
    color: #edf1f3;
    cursor: pointer;
    list-style: none;
}
.uo-footer-directory summary::-webkit-details-marker { display: none; }
.uo-footer-directory summary .bm-icon { transition: transform .2s var(--uo-ease); }
.uo-footer-directory[open] summary .bm-icon { transform: rotate(180deg); }
.uo-footer-directory nav { columns: 1; column-gap: 32px; padding: 4px 0 28px; }
@media (min-width: 600px) { .uo-footer-directory nav { columns: 2; } }
@media (min-width: 1025px) { .uo-footer-directory nav { columns: 4; } }
.uo-footer-directory nav a { display: block; padding: 4px 0; font-size: 16px; line-height: 1.6; break-inside: avoid; }

.uo-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 24px 0 32px;
}
.uo-footer-bottom p { margin: 0; font-size: 18px; color: #edf1f3; }
.uo-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.uo-footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; }

/* Filmdialog (Beeldtegels → Bekijk de film) */
.uo-film {
    width: min(1200px, calc(100% - 32px));
    max-width: none;
    padding: 0;
    border: 0;
    background: #000;
    overflow: visible;
}
.uo-film::backdrop { background: rgba(8, 20, 31, .82); }
.uo-film-frame { aspect-ratio: 16 / 9; }
.uo-film-frame iframe,
.uo-film-frame video { display: block; width: 100%; height: 100%; border: 0; }
.uo-film-close {
    position: absolute;
    top: -56px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. BLOKKEN
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ruimte boven de footer ──
   Eindigt een pagina met beeldtegels of alleen een paginakop (die hebben
   standaard geen ruimte onder), dan zou de footer er direct tegenaan staan
   (/ons-team/, /brillen/, /cookiebeleid/). Dan ruimte zoals onder de
   andere blokken. */
#main-content > .uo-tegels:last-child,
#main-content > .uo-paginakop:last-child:has(.uo-paginakop-grid),
#main-content > .uo-paginakop-beeld:last-child,
#main-content > .uo-khero:last-child { margin-bottom: 48px; }
@media (min-width: 768px) {
    #main-content > .uo-tegels:last-child,
    #main-content > .uo-paginakop:last-child:has(.uo-paginakop-grid),
    #main-content > .uo-paginakop-beeld:last-child,
    #main-content > .uo-khero:last-child { margin-bottom: 80px; }
}

/* ── Ruimte (blokvelden Ruimte boven/onder) ── */
.uo-kaarten.uo-pt-1, .uo-kleurentest.uo-pt-1, .uo-faq.uo-pt-1, .uo-faq.uo-pt-2, .uo-faq.uo-pt-3 { padding-top: var(--uo-section); }
.uo-kaarten.uo-pb-1, .uo-kleurentest.uo-pb-1, .uo-faq.uo-pb-1, .uo-faq.uo-pb-2, .uo-faq.uo-pb-3 { padding-bottom: var(--uo-section); }
.uo-tegels.uo-pt-1 { padding-top: 30px; }
.uo-tegels.uo-pb-1 { padding-bottom: 30px; }
.uo-paginakop.uo-pt-1 { padding-top: 32px; }
.uo-paginakop.uo-pb-1 { padding-bottom: 32px; }


/* ── Paginakop (ontwerp: s-hero-2) ── */
/* Alleen een titel (bedankt, disclaimer…): het ontwerp houdt de lege ruimte
   van de introductie eronder (48px + 48px; mobiel 32px + 32px plus 24px tussenruimte). */
.uo-paginakop-top:last-child { margin-bottom: 88px; }
@media (min-width: 768px) { .uo-paginakop-top:last-child { margin-bottom: 96px; } }
.uo-paginakop { padding-inline: var(--uo-edge); }
.uo-paginakop-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 24px 20px;
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
}
.uo-paginakop-top h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.025em;
    color: var(--uo-ink);
}
.uo-bc,
.uo-bc p {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.65;
    text-transform: lowercase;
    color: var(--uo-text);
}
.uo-bc a { color: var(--uo-copy); text-decoration: none; font-weight: 300; }
.uo-bc a:hover { text-decoration: underline; text-underline-offset: 3px; }

.uo-paginakop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 32px 20px;
}
.uo-paginakop-kop {
    max-width: 460px;
    margin: 0;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: -.025em;
    color: var(--uo-text);
    text-wrap: balance;
}
.uo-paginakop-intro { font-size: 18px; color: var(--uo-copy); }
.uo-paginakop-intro p { margin: 0 0 1em; color: var(--uo-copy); }
.uo-paginakop-intro p:last-child { margin-bottom: 0; }
.uo-paginakop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 24px !important;
    font-size: 16px;
    color: var(--uo-muted) !important;
}
.uo-paginakop-meta .uo-meta-author { text-decoration: underline; text-underline-offset: 4px; color: var(--uo-ink); }
.uo-paginakop-meta > * + *::before { content: "·"; margin-right: 16px; color: #9aa7ab; }
/* Ontwerp: kruimelpad op mobiel 15px; vanaf 696px naast de titel. */
@media (max-width: 767px) { .uo-bc, .uo-bc p { font-size: 15px; } }
@media (min-width: 696px) and (max-width: 767px) {
    .uo-paginakop-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
}

@media (min-width: 768px) {
    .uo-paginakop-top { grid-template-columns: minmax(0, 1fr) auto; gap: 30px; padding: 20px; align-items: center; }
    .uo-paginakop-top .uo-bc { justify-self: end; text-align: right; }
    .uo-paginakop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding: 48px 20px; }
    .uo-paginakop-intro { max-width: 530px; justify-self: end; width: 100%; }
}
@media (min-width: 768px) { .uo-bc, .uo-bc p { font-size: 20px; } }
@media (min-width: 768px) {
    .uo-paginakop-kop { font-size: 30px; line-height: 1.25; }
    .uo-paginakop-intro { font-size: 20px; }
}


/* Paginakop Met beeld (ontwerp: career-hero) */
.uo-paginakop-beeld {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: #edf1ef;
}
.uo-paginakop-beeld-tekst { display: flex; align-items: center; padding: 32px var(--uo-edge) 40px; }
.uo-paginakop-beeld .uo-bc { margin-bottom: 32px; }
.uo-paginakop-beeld .uo-bc,
.uo-paginakop-beeld .uo-bc p,
.uo-paginakop-beeld .uo-bc a { font-size: 18px; font-weight: 400; text-transform: none; color: var(--uo-copy); }
.uo-eyebrow { display: block; margin: 0 0 16px; font-size: 17px; font-weight: 500; line-height: 1.5; color: #52666d; }
.uo-paginakop-beeld h1 {
    max-width: min(606px, 16ch);
    text-wrap: balance;
    margin: 0 0 24px;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -.04em;
}
.uo-paginakop-beeld .uo-paginakop-kop { max-width: 564px; margin: 0 0 24px; font-size: 20px; line-height: 1.5; color: var(--uo-copy); }
.uo-paginakop-beeld .uo-paginakop-intro { max-width: 564px; justify-self: start; color: var(--uo-copy); }
.uo-paginakop-beeld .uo-paginakop-intro p { margin: 0 0 12px; }
.uo-paginakop-beeld .uo-actions { margin-top: 8px; }
.uo-paginakop-beeld > img { width: 100%; height: 300px !important; object-fit: cover; }
/* Ontwerp (career-hero): twee kolommen vanaf tablet, tot 1100px 540px hoog. */
@media (min-width: 768px) {
    .uo-paginakop-beeld { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 600px; }
    .uo-paginakop-beeld-tekst { padding: 40px clamp(24px, 4vw, 58px) 56px var(--uo-edge); }
    .uo-paginakop-beeld h1 { font-size: clamp(40px, 4.2vw, 64px); }
    .uo-paginakop-beeld .uo-paginakop-kop { font-size: 22px; margin-bottom: 32px; }
    .uo-paginakop-beeld > img { height: 100% !important; min-height: 600px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .uo-paginakop-beeld { min-height: 540px; }
    .uo-paginakop-beeld > img { min-height: 540px; }
}

/* Kleurenzichtpagina's: spectrumlijn onder de paginakop (ontwerp: ds-colour-page) */
.uo-paginakop--spectrum::after {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, #a15b68, #bc8653, #b9a563, #769a86, #537d98, #857095);
}


/* ── Beeldtegels (ontwerp: s-bm-bg-media) ── */
.uo-tegels { padding-inline: var(--uo-edge); }
.uo-tegels-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
@media (min-width: 768px) {
    .uo-tegels--3 .uo-tegels-grid,
    .uo-tegels--4 .uo-tegels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .uo-tegels--2 .uo-tegels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .uo-tegels--3 .uo-tegels-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .uo-tegels--4 .uo-tegels-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.uo-tegel {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    color: #fff;
    text-decoration: none;
    background: #d9dcd7;
}
.uo-tegel-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform .6s var(--uo-ease);
}
.uo-tegel.is-linked:hover .uo-tegel-img { transform: scale(1.03); }
.uo-tegel-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .1);
}
.uo-tegel-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 24px;
    color: #fff;
}
.uo-tegel-text { display: block; width: 100%; }
.uo-tegel-text h2,
.uo-tegel-text h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0;
    color: #fff;
    text-wrap: balance;
}
.uo-tegel-sub { display: block; font-size: 18px; line-height: 1.6; color: #fff; }
.uo-tegel-naam { display: block; font-size: 18px; font-weight: 600; line-height: 1.4; color: #fff; }
.uo-tegel-naam + .uo-tegel-sub { font-size: 16px; line-height: 1.45; }
.uo-tegel-btn,
a.uo-tegel-btn:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    margin-top: 20px;
    padding: 14px 22px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .92);
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: inset 0 -3px 15px rgba(255, 255, 255, .18), 0 10px 30px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-decoration: none;
    transition: background-color .2s var(--uo-ease);
}
.uo-tegel-btn:hover { color: #fff; background: rgba(0, 0, 0, .34); text-decoration: none; }

.uo-film-btn {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 20px;
    font-size: 17px;
    color: #fff;
    background: rgba(12, 31, 45, .44);
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.uo-film-btn:hover { background: rgba(12, 31, 45, .64); }
/* Film die vanzelf in de tegel speelt: vult de tegel zoals de afbeelding
   (cover via containermaten), boven de afbeelding en onder de overlay. */
.uo-tegel-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s var(--uo-ease);
}
.uo-tegel.is-video-klaar .uo-tegel-video { opacity: 1; }
.uo-tegel-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(56.25cqw, 100cqh);
    border: 0;
    transform: translate(-50%, -50%);
}
.uo-tegel-video video { width: 100%; height: 100%; object-fit: cover; }

/* Mobiel: tekst en filmknop zouden elkaar raken; film boven de tekst. */
@media (max-width: 599px) {
    .uo-tegel:has(.uo-film-btn) .uo-tegel-content { padding-bottom: 92px; }
}

/* Hoogtes. "auto": homepage en detailpagina verschillen, zoals het ontwerp. */
.uo-tegels--h-vierkant .uo-tegel { aspect-ratio: 1 / 1; }
.uo-tegels--h-scherm .uo-tegel { aspect-ratio: auto; min-height: 90svh; }
.uo-tegels--h-tekst .uo-tegel { aspect-ratio: auto; min-height: 60svh; }
.uo-tegels--h-liggend .uo-tegel { aspect-ratio: 4 / 3; }
.uo-tegels--h-staand .uo-tegel { aspect-ratio: 4 / 5; }
.uo-tegels--h-breed .uo-tegel { aspect-ratio: 4 / 3; }
.uo-tegels--h-natuurlijk .uo-tegel { aspect-ratio: auto; }
.uo-tegels--h-natuurlijk .uo-tegel-img { position: relative; height: auto !important; }
/* Breed: 2.3:1; één kolom op volle breedte 16:7 tot 590px hoog. Een
   max-height naast aspect-ratio maakt de tegel smaller in plaats van
   lager, daarom de hoogte uitgerekend uit de breedte. */
@media (min-width: 768px) {
    .uo-tegels--h-breed .uo-tegel { aspect-ratio: 2.3 / 1; }
    .uo-tegels--h-breed.uo-tegels--1 .uo-tegel { aspect-ratio: auto; height: min(590px, calc((100vw - var(--uo-edge) * 2) * 7 / 16)); }
}

/* Automatisch, zoals het ontwerp gemeten op 390, 1440 en 2000px:
   homepage één kolom schermhoogte; detailpagina's één kolom altijd 600px
   hoog over de volle breedte, twee kolommen 2.3:1, drie of vier vierkant. */
.uo-page--home .uo-tegels--h-auto.uo-tegels--1 .uo-tegel { aspect-ratio: auto; min-height: 90svh; }
.uo-page--detail .uo-tegels--h-auto .uo-tegel { aspect-ratio: 1 / 1; }
.uo-page--detail .uo-tegels--h-auto.uo-tegels--1 .uo-tegel { aspect-ratio: auto; height: 600px; }
.uo-page--detail .uo-tegels--h-auto.uo-tegels--2 .uo-tegel { aspect-ratio: 2.3 / 1; }
/* Eigen hoogte op mobiel en tablet (veld Hoogte op mobiel), tot 991px:
   zoals het ontwerp, dat daar het mobiele menu en het vierkante
   openingsbeeld van de homepage heeft. */
@media (max-width: 991px) {
    .uo-site .uo-tegels[class*="uo-tegels--hm-"] .uo-tegel { height: auto; min-height: 0; max-height: none; }
    .uo-site .uo-tegels.uo-tegels--hm-vierkant .uo-tegel { aspect-ratio: 1 / 1; }
    .uo-site .uo-tegels.uo-tegels--hm-scherm .uo-tegel { aspect-ratio: auto; min-height: 90svh; }
    .uo-site .uo-tegels.uo-tegels--hm-tekst .uo-tegel { aspect-ratio: auto; min-height: 60svh; }
    .uo-site .uo-tegels.uo-tegels--hm-liggend .uo-tegel { aspect-ratio: 4 / 3; }
    .uo-site .uo-tegels.uo-tegels--hm-staand .uo-tegel { aspect-ratio: 4 / 5; }
}
@media (max-width: 767px) {
    /* Homepage: grotere koppen en knoppen, zoals het ontwerp op mobiel */
    .uo-page--home .uo-tegel-content { padding: 30px; }
    .uo-page--home .uo-tegel-text h2 { font-size: 38px; line-height: 1.4; }
    .uo-page--home .uo-tegel-btn { min-height: 58px; padding: 16px 26px; margin-top: 24px; }
}

/* Openingsbeeld: vaste hoogte, zoals uo-lead-media (600px, gemeten op 390–2000px). */
.uo-tegels--lead .uo-tegel { aspect-ratio: auto !important; min-height: 0; height: 600px; max-height: none; }


/* Detailpagina's: tekst zonder overlay als er geen tekst is */
.uo-page--detail .uo-tegel-overlay { background: linear-gradient(0deg, rgba(7, 31, 53, .4), transparent 65%); }
.uo-tegel.is-beeld { background: #e9ecea; }

@media (min-width: 768px) {
    .uo-tegel-content { padding: 32px; }
    .uo-film-btn { right: 32px; bottom: 32px; }
}
@media (min-width: 1100px) {
    .uo-page--home .uo-tegel-content { padding: 40px; }
    .uo-page--home .uo-film-btn { right: 40px; bottom: 40px; min-height: 64px; padding: 15px 23px; font-size: 20px; }
    .uo-page--home .uo-tegel-text h2 { font-size: 42px; line-height: 1.4; }
    .uo-page--home .uo-tegel-sub { font-size: 20px; }
    .uo-page--home .uo-tegel-btn { min-height: 58px; padding: 16px 26px; font-size: 20px; margin-top: 24px; }
    .uo-page--detail .uo-tegel-text h2 { font-size: 38px; line-height: 1.18; font-weight: 400; }
    .uo-tegels--4 .uo-tegel-text h3,
    .uo-tegels--3 .uo-tegel-text h3 { font-size: 36px; }
    .uo-tegels--4 .uo-tegel-content { padding: 40px; }
}


/* ── Kaarten (ontwerp: ds-services) ── */
.uo-kaarten .uo-section-intro { margin-bottom: 40px; }
.uo-kaarten-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
@media (min-width: 768px) {
    .uo-kaarten-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1101px) {
    .uo-kaarten-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.uo-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px;
    background: var(--uo-paper);
    color: var(--uo-ink);
    text-decoration: none;
    transition: background-color .2s var(--uo-ease);
}
a.uo-kaart:hover { background: #eef0ea; }
.uo-kaart-icon {
    display: flex;
    align-items: center;
    min-height: 32px;
    color: var(--uo-icon);
}
.uo-kaart h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.025em;
}
.uo-kaart p {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--uo-copy);
}
.uo-kaart-action {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    margin-top: auto;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--uo-ink);
    border: 1px solid #8b9c9f;
    transition: background-color .2s var(--uo-ease), border-color .2s var(--uo-ease);
}
/* Knoppen per rij op één lijn (margin-top: auto), met minstens 12px extra lucht. */
.uo-kaart > p,
.uo-kaart > h3:nth-last-child(2) { margin-bottom: 12px; }
a.uo-kaart:hover .uo-kaart-action { background: #fff; border-color: var(--uo-ink); }
a.uo-kaart:hover .uo-kaart-action .bm-icon { transform: translateX(3px); }
.uo-kaart-action .bm-icon { transition: transform .2s var(--uo-ease); }

@media (max-width: 767px) {
    .uo-kaart { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 24px; }
    .uo-kaart > :not(.uo-kaart-icon) { grid-column: 2; }
    .uo-kaart-action { justify-self: start; }
    .uo-section-intro { margin-bottom: 32px; }
}

/* Kleurenzicht: kleursymbool in plaats van icoon */
.uo-kleursymbool { position: relative; width: 32px; height: 28px; }
.uo-kleursymbool i { position: absolute; width: 16px; height: 16px; border-radius: 50%; mix-blend-mode: multiply; opacity: .85; }
.uo-kleursymbool i:nth-child(1) { left: 2px; top: 0; background: #d9534f; }
.uo-kleursymbool i:nth-child(2) { left: 12px; top: 0; background: #4f7cc4; }
.uo-kleursymbool i:nth-child(3) { left: 7px; top: 9px; background: #8f9e7c; }
.uo-kaarten--kleur .uo-kaart { background: #f3f4f0; }
/* Brede kaart (vacatures, ontwerp: career-openings) */
.uo-kaarten--breed { background: var(--uo-paper); }
.uo-kaarten--breed.uo-pt-1 { padding-top: 48px; }
.uo-kaarten--breed.uo-pb-1 { padding-bottom: 48px; }
.uo-kaarten--breed .uo-section-intro { display: block; margin-bottom: 24px; }
.uo-kaarten--breed .uo-section-intro .uo-eyebrow { margin-bottom: 12px; }
.uo-site .uo-kaarten--breed .uo-section-intro h2 { margin: 0; }
.uo-site .uo-kaarten--breed .uo-section-intro p { margin: 16px 0 0; font-size: 18px; }
.uo-kaarten-grid--1 { grid-template-columns: minmax(0, 1fr) !important; }
.uo-kaarten--breed .uo-kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: #fff; padding: 24px; border: 1px solid transparent; }
a.uo-kaarten--breed .uo-kaart:hover,
.uo-kaarten--breed a.uo-kaart:hover { border-color: #859a9e; background: #fdfefd; box-shadow: none; }
.uo-kaarten--breed .uo-kaart-icon { display: none; }
.uo-kaarten--breed .uo-kaart-eyebrow { margin: 0 0 12px; }
.uo-site .uo-kaarten--breed .uo-kaart h3 { margin: 0 0 16px; font-size: 32px; line-height: 1.3; }
.uo-site .uo-kaarten--breed .uo-kaart > p { margin: 0 0 24px; }
.uo-site .uo-kaarten--breed .uo-kaart > p:last-of-type:not(:has(+ .uo-kaart-feiten)) { margin-bottom: 0; }
.uo-kaart-feiten { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0; padding: 0; list-style: none; font-size: 18px; line-height: 1.5; color: #344650; }
.uo-kaart-feiten li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }
.uo-kaart-feiten li::before { content: none; }
.uo-kaart-feiten .bm-icon { flex: none; width: 24px; height: 24px; }
.uo-kaarten--breed .uo-kaart-action { gap: 16px; margin-top: 28px; padding: 12px 16px; border-color: #879a9f; font-size: 18px; }
.uo-kaarten--breed .uo-kaart-action .bm-icon { width: 22px; height: 22px; }
@media (min-width: 768px) {
    .uo-kaarten--breed.uo-pt-1 { padding-top: 64px; }
    .uo-kaarten--breed.uo-pb-1 { padding-bottom: 80px; }
    .uo-kaarten--breed .uo-section-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; }
    .uo-site .uo-kaarten--breed .uo-section-intro p { margin: 0; }
    .uo-kaarten--breed .uo-kaart { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; padding: 32px; }
    .uo-kaarten--breed .uo-kaart > * { grid-column: 1; }
    .uo-kaarten--breed .uo-kaart-action { grid-column: 2; grid-row: 1 / span 5; margin: 0; padding: 14px 20px; }
}
@media (min-width: 1101px) { .uo-kaarten--breed .uo-kaart { padding: 40px; } }

/* Icoon met tekstlink (kennisbank-overzicht) */
.uo-kaarten--tekstlink .uo-kaart-action { gap: 10px; padding: 0; border: 0; font-size: 17px; font-weight: 400; color: var(--uo-link); text-decoration: underline; text-underline-offset: 4px; }
.uo-kaarten--tekstlink .uo-kaart-action .bm-icon { display: none; }
a.uo-kaart:hover .uo-kaarten--tekstlink .uo-kaart-action,
.uo-kaarten--tekstlink a.uo-kaart:hover .uo-kaart-action { background: none; text-decoration-thickness: 2px; }


/* ── Sectienavigatie en leessectie (ontwerp: ds-section-nav, ds-flow-section) ── */
.uo-section-nav {
    position: sticky;
    top: calc(var(--uo-header-h) - 1px);
    z-index: 40;
    background: #fff;
}
.admin-bar .uo-section-nav { top: calc(var(--uo-header-h) + 31px); }
.uo-section-nav::after {
    content: "";
    position: absolute;
    left: var(--uo-edge);
    right: var(--uo-edge);
    bottom: 0;
    height: 1px;
    background: var(--uo-line);
    pointer-events: none;
}
/* Plakt hij onder de header, dan ook een lijn erboven (ontwerp: lijn
   tussen header en inhoud). */
.uo-section-nav::before {
    content: "";
    position: absolute;
    left: var(--uo-edge);
    right: var(--uo-edge);
    top: 1px; /* de bovenste pixel valt onder de header (top: header - 1px) */
    height: 1px;
    background: var(--uo-line);
    opacity: 0;
    transition: opacity .2s var(--uo-ease);
    pointer-events: none;
}
.uo-section-nav.is-vast::before { opacity: 1; }
.uo-section-nav .uo-wrap {
    display: flex;
    align-items: stretch;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}
.uo-section-nav .uo-wrap::-webkit-scrollbar { display: none; }
.uo-section-nav a {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--uo-muted);
    text-decoration: none;
}
.uo-section-nav a:hover { color: var(--uo-ink); }
.uo-section-nav a[aria-current="location"] { color: var(--uo-ink); font-weight: 600; }
.uo-section-nav a[aria-current="location"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    height: 3px;
    background: var(--uo-ink);
}
@media (min-width: 768px) {
    .uo-section-nav .uo-wrap { gap: 40px; }
    .uo-section-nav a { min-height: 72px; padding-block: 20px; }
}

.uo-leessectie { padding-block: var(--uo-section); }
.uo-leessectie + .uo-leessectie { padding-top: 8px; }
@media (min-width: 768px) { .uo-leessectie + .uo-leessectie { padding-top: 16px; } }
/* Knoppen onder de tekst: 32px erboven; op mobiel onder elkaar en vol breed. */
.uo-leessectie .uo-prose > .uo-actions { margin-top: 32px; }
@media (max-width: 767px) {
    .uo-leessectie .uo-actions { flex-direction: column; align-items: stretch; }
    .uo-leessectie .uo-actions > a { width: 100%; justify-content: center; }
}
.uo-leessectie-kop h2 {
    margin: 0;
    font-size: 27px;
    line-height: 1.3;
    letter-spacing: -.025em;
}
@media (min-width: 768px) {
    .uo-leessectie-kop h2 { font-size: 30px; }
}

.uo-prose {
    max-width: 854px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--uo-copy);
}
@media (min-width: 768px) { .uo-prose { font-size: 20px; } }
.uo-prose > :first-child { margin-top: 0; }
.uo-prose > :last-child { margin-bottom: 0; }
.uo-prose p,
.uo-prose ul,
.uo-prose ol { margin: 0 0 24px; color: var(--uo-copy); line-height: 1.7; }
.uo-prose ul,
.uo-prose ol { padding-left: 24px; }
/* Ontwerp: een lijst houdt 24px eronder, ook als laatste. */
.uo-prose > ul:last-child,
.uo-prose > ol:last-child { margin-bottom: 24px; }
.uo-prose li { margin-bottom: 8px; }
.uo-prose li::marker { color: var(--uo-icon); }
.uo-prose h2 { margin: 48px 0 24px; font-size: 30px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-prose h3 { margin: 32px 0 16px; font-size: 24px; line-height: 1.3; }
.uo-prose li p { margin: 0; }
@media (max-width: 767px) { .uo-prose h2 { margin-top: 40px; font-size: 27px; } }
.uo-prose h4 { margin: 32px 0 8px; font-size: 20px; }
.uo-prose a,
.uo-prose p a,
.uo-prose li a {
    color: var(--uo-link);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.uo-prose a:hover { color: var(--uo-ink); text-decoration-thickness: 2px; }
.uo-prose :is(strong, b) a { font-weight: inherit; }   /* ontwerp: link in vet blijft vet */
.uo-prose strong { font-weight: 700; color: var(--uo-ink); }
.uo-prose img { height: auto; margin: 32px 0; }
.uo-prose blockquote { margin: 32px 0; padding: 0 0 0 24px; border-left: 3px solid var(--uo-ink); background: none; font-size: 1.1em; color: var(--uo-ink); }
.uo-prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: .9em; }
.uo-prose th, .uo-prose td { padding: 10px 12px; border-bottom: 1px solid var(--uo-line); text-align: left; }


/* ── FAQ, variant naast (ontwerp: ds-bottom-faq) ── */
.uo-faq .uo-section-intro p { margin-top: 24px; }
@media (max-width: 767px) {
    .uo-faq .uo-section-intro { margin-bottom: 0; }
    .uo-faq .uo-section-intro p { margin-top: 16px; }
}
.uo-faq-list { display: grid; gap: 12px; }
.uo-faq-list details { padding: 0 20px; background: var(--uo-paper); }
.uo-faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 80px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
}
.uo-faq-list summary::-webkit-details-marker { display: none; }
.uo-faq-list summary h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--uo-ink);
    text-wrap: pretty;
}
.uo-faq-control {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--uo-tint);
    color: var(--uo-ink);
    transition: transform .2s var(--uo-ease);
}
.uo-faq-list details[open] .uo-faq-control { transform: rotate(180deg); }
.uo-faq-answer { padding: 0 0 24px; font-size: 18px; line-height: 1.7; color: var(--uo-copy); }
.uo-faq-answer p { margin: 0 0 1em; color: var(--uo-copy); }
.uo-faq-answer p:last-child { margin-bottom: 0; }
.uo-faq-answer a { color: var(--uo-link); }
.uo-faq-all { margin-top: 24px; }
@media (min-width: 768px) {
    .uo-faq-list details { padding: 0 24px; }
    .uo-faq-list summary { gap: 24px; min-height: 88px; padding: 24px 0; }
    .uo-faq-list summary h3 { font-size: 21px; }
    .uo-faq-answer { font-size: 20px; }
    .uo-faq-all { margin-top: 32px; }
}


/* ── Contact met winkels (ontwerp: ds-contact) ── */
.uo-contact {
    padding-block: var(--uo-section);
    background: var(--uo-pastel);
}
.uo-contact-intro h2 { margin: 0 0 24px; font-size: 32px; line-height: 1.3; }
.uo-contact-intro p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--uo-copy); }
.uo-contact-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.uo-contact-links a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--uo-ink);
    text-decoration: none;
}
.uo-contact-links a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.uo-contact-links strong { font-size: 20px; font-weight: 500; }
.uo-contact-links a svg { width: 24px; height: 24px; margin-bottom: 4px; }
.uo-contact .uo-form-panel > h3 { margin-bottom: 8px; }
@media (max-width: 767px) {
    .uo-contact-links { grid-template-columns: minmax(0, 1fr); }
    .uo-contact-intro .sec-cta { width: 100%; }
    .uo-form-panel .fluentform .ff-btn-submit { width: 100%; }
}
.uo-site .uo-contact-intro .sec-cta,
.uo-site .uo-contact-intro a.sec-cta:visited {
    min-height: 52px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 400;
    background: linear-gradient(135deg, #fff, #f5f4f0);
    border-color: #d3d3cf;
    box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(16, 35, 54, .04);
}

.uo-form-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px;
    background: rgba(255, 255, 255, .79);
}
.uo-form-panel > h2,
.uo-form-panel > h3 { margin: 0; font-size: 28px; line-height: 1.3; }
@media (min-width: 768px) { .uo-form-panel { padding: 32px; } }

.uo-contact-details { margin-top: 32px; padding-top: 48px; }
.uo-contact-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
}
.uo-contact-details summary::-webkit-details-marker { display: none; }
.uo-contact-details summary span { text-decoration: underline; text-underline-offset: 5px; }
.uo-contact-details summary .bm-icon { transition: transform .2s var(--uo-ease); }
.uo-contact-details details[open] summary .bm-icon { transform: rotate(180deg); }
.uo-store-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 16px 0 8px;
}
@media (min-width: 768px) { .uo-store-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.uo-store-card h3 { margin: 0 0 12px; font-size: 24px; }
.uo-store-card h4 { margin: 20px 0 8px; font-size: 18px; font-weight: 500; }
.uo-store-card p { margin: 0 0 12px; font-size: 18px; color: var(--uo-copy); }
.uo-store-card a { color: var(--uo-link); }

.uo-hours { margin: 0; font-size: 17px; line-height: 1.6; color: var(--uo-copy); }
.uo-hours > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.uo-hours dt, .uo-hours dd { margin: 0; }
.uo-hours dd { font-variant-numeric: tabular-nums; text-align: right; }


/* ── Kleurentest (ontwerp: ds-colour-test) ── */
.uo-kleurentest .uo-wrap { padding-bottom: 0; }
.uo-kleurentest .uo-section-intro h2 { font-size: 32px; letter-spacing: -.025em; }
.uo-kleurentest-tekst { margin-top: 24px; font-size: 18px; color: var(--uo-copy); }
.uo-kleurentest-tekst p { margin: 0 0 16px; color: var(--uo-copy); }
.uo-kleurentest-kaart {
    padding: 24px;
    background: var(--uo-pastel);
    border: 1px solid var(--uo-line);
}
.uo-kleurentest-kaart h3 { margin: 0 0 16px; font-size: 24px; line-height: 1.3; }
.uo-kleurentest-kaart > p { margin: 0; color: var(--uo-copy); }
.uo-kleurentest-kaart .pri-cta { margin-top: 24px; }
.uo-kleurentest-noot { margin: 16px 0 0 !important; font-size: 16px; color: var(--uo-muted) !important; }
.uo-kleurentest-frame { margin-top: 24px; background: #fff; }
.uo-kleurentest-frame iframe { display: block; width: 100%; height: 780px; border: 0; }
.uo-kleurentest.is-geladen .uo-kleurentest-kaart > .pri-cta { display: none; }
@media (min-width: 1100px) {
    .uo-kleurentest.uo-pt-1 { padding-top: 80px; }
    .uo-kleurentest.uo-pb-1 { padding-bottom: 80px; }
    .uo-kleurentest .uo-section-intro h2 { font-size: 40px; line-height: 1.3; }
    .uo-kleurentest-tekst { font-size: 20px; }
    .uo-kleurentest-kaart { padding: 40px; }
    .uo-kleurentest-kaart h3 { font-size: 28px; }
}


/* ── Agenda (ontwerp: visit-appointment) ── */
.uo-agenda { padding-block: var(--uo-section); background: var(--uo-pastel); }
.uo-agenda-intro h2 { margin: 0 0 20px; font-size: 32px; line-height: 1.25; }
.uo-agenda-intro p { margin: 0 0 16px; color: var(--uo-copy); }
.uo-agenda-phone { color: var(--uo-link); text-decoration: underline; text-underline-offset: 4px; }
.uo-agenda-panel { padding: 20px; background: #fff; }
.uo-agenda-hint { margin: 0 0 12px; font-size: 16px; color: var(--uo-copy); }
.uo-agenda-panel iframe { display: block; width: 100%; height: 900px; border: 0; }
.uo-agenda-fallback { margin: 12px 0 0; font-size: 16px; color: var(--uo-copy); }
.uo-agenda-fallback a { color: var(--uo-link); text-decoration: underline; text-underline-offset: 3px; }


/* ── Galerij (Magneet-blok Media, variant slider) ── */
.uo-site .s-bm-media--slider { padding-inline: var(--uo-edge); }
.uo-site .s-bm-media--slider .c-bm-media { max-width: none; padding: 0; }
.uo-site .s-bm-media--slider .embla__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.uo-site .bm-slider-prev,
.uo-site .bm-slider-next {
    width: 48px;
    height: 48px;
    border-radius: 0;
    background: #fff;
    color: var(--uo-ink);
    border: 1px solid var(--uo-line);
    box-shadow: none;
}
.uo-site .bm-slider-prev:hover,
.uo-site .bm-slider-next:hover { background: var(--uo-paper); }
.uo-site .bm-slider-bullet { border-radius: 0; width: 24px; height: 3px; background: var(--uo-line); }
.uo-site .bm-slider-bullet.is-selected { background: var(--uo-ink); }


/* ── CTA (Magneet-blok; ontwerp: ux-tab-intro) ──
   .s-bm-cta staat twee keer met text-align: center in style.css (valkuil 2):
   hier met hogere specificiteit links uitgelijnd, zonder donker vlak. */
.uo-site .s-bm-cta.bg-standaard { background: #fff; padding-block: 72px; }
/* Ontwerp (ux-tab-intro): 1240px met de rand van het ontwerp erbinnen
   (24px, vanaf 768px 4vw tot 64px), titel 32px, tekst en knop direct eronder. */
.uo-site .s-bm-cta .c-bm-cta { width: min(1240px, 100%); max-width: none; padding: 0 24px; }
.uo-site .s-bm-cta .bm-cta-content { max-width: none; text-align: left; margin: 0; }
.uo-site .s-bm-cta .bm-cta-content h2 { margin: 0; font-size: 32px !important; /* tegen .bm-t-narrow h2 !important */ font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.uo-site .s-bm-cta .bm-cta-content .lead { max-width: none; margin: 0; font-size: 18px; font-weight: 400; line-height: 1.65; color: var(--uo-copy); }
.uo-site .s-bm-cta .cta-container { justify-content: flex-start; margin-top: 0; }
.uo-site .s-bm-cta .cta-container .pri-cta { font-weight: 400; line-height: 1.3; }
@media (max-width: 767px) {
    .uo-site .s-bm-cta .cta-container .pri-cta { width: 100%; min-height: 54px; justify-content: center; font-size: 16px; }
}
@media (min-width: 768px) {
    .uo-site .s-bm-cta .c-bm-cta { padding-inline: clamp(24px, 4vw, 64px); }
    .uo-site .s-bm-cta .bm-cta-content .lead { font-size: 20px; }
}

/* ── Tekst (Magneet-blok; juridische pagina's en reviews, ontwerp: s-tekst) ──
   Gecentreerde kolom van 840px, tekst links uitgelijnd. */
.uo-site .s-bm-tekst .c-bm-tekst,
.uo-site .s-bm-tekst .breedte-normaal { max-width: none; padding-inline: 0; }
.uo-site .s-bm-tekst .bm-prose {
    /* Rand zoals het ontwerp: 24px op mobiel, daarna 4vw (24–64px). */
    width: min(840px, calc(100% - 48px));
    overflow-wrap: break-word;
    max-width: none;
    margin-inline: auto;
    font-size: 18px;
    line-height: 1.8;
    color: #394b58;
    text-align: left;
}
@media (min-width: 768px) { .uo-site .s-bm-tekst .bm-prose { width: min(840px, calc(100% - clamp(24px, 4vw, 64px) * 2)); } }
/* Ruimte zoals het ontwerp: s-tekst heeft altijd 64px, plus de lege div
   k-, m- of gr-top/bottom met de vloeiende maat van het ontwerp (20–30,
   30–60 of 50–90px). Veld Ruimte boven/onder: Geen = 64, Klein = 94,
   Middel = 124, Groot = 154 (op 1440px; mobiel 64 / 85 / 96 / 117). */
.uo-site .s-bm-tekst.ge-top { padding-top: 64px; }
.uo-site .s-bm-tekst.ge-bottom { padding-bottom: 64px; }
.uo-site .s-bm-tekst.k-top { padding-top: calc(64px + clamp(20px, 20px + (1vw - 3.2px) * 1.0417, 30px)); }
.uo-site .s-bm-tekst.k-bottom { padding-bottom: calc(64px + clamp(20px, 20px + (1vw - 3.2px) * 1.0417, 30px)); }
.uo-site .s-bm-tekst.m-top { padding-top: calc(64px + clamp(30px, 30px + (1vw - 3.2px) * 3.125, 60px)); }
.uo-site .s-bm-tekst.m-bottom { padding-bottom: calc(64px + clamp(30px, 30px + (1vw - 3.2px) * 3.125, 60px)); }
.uo-site .s-bm-tekst.gr-top { padding-top: calc(64px + clamp(50px, 50px + (1vw - 3.2px) * 4.1667, 90px)); }
.uo-site .s-bm-tekst.gr-bottom { padding-bottom: calc(64px + clamp(50px, 50px + (1vw - 3.2px) * 4.1667, 90px)); }
/* Typografie zoals het ontwerp (s-tekst, gemeten op /privacybeleid/ en
   /disclaimer/): geen ruimte tussen alinea's en koppen, lijsten 20px boven
   en onder, H1 groot boven de tekst op pagina's zonder paginakop. */
.uo-site .s-bm-tekst .bm-prose h1 { margin: 0; font-size: 43.2px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-site .s-bm-tekst .bm-prose h2 { margin: 0; font-size: 32px; font-weight: 400; line-height: 1.25; letter-spacing: -.035em; color: var(--uo-ink); }
.uo-site .s-bm-tekst .bm-prose h3 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.3; color: var(--uo-ink); }
.uo-site .s-bm-tekst .bm-prose h4 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--uo-ink); }
.uo-site .s-bm-tekst .bm-prose p,
.uo-site .s-bm-tekst .bm-prose li { margin: 0; font-size: 18px; line-height: 1.8; color: #394b58; }
.uo-site .s-bm-tekst .bm-prose ul,
.uo-site .s-bm-tekst .bm-prose ol { margin: 20px 0; }
.uo-site .s-bm-tekst .bm-prose strong { font-weight: 700; }
.uo-site .s-bm-tekst .bm-prose a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.uo-site .s-bm-tekst .bm-prose a:hover { color: var(--uo-ink); }
.uo-site .s-bm-tekst .cta-container { width: min(840px, calc(100% - var(--uo-gutter) * 2)); margin: 24px auto 0; justify-content: flex-start; }
/* Knoppen binnen de tekstkolom (layout Normaal links): gelijk met de tekst. */
.uo-site .s-bm-tekst .bm-prose .cta-container { width: auto; margin: 32px 0 0; }
@media (min-width: 768px) {
    .uo-site .s-bm-tekst .bm-prose h1 { font-size: 48px; }
    .uo-site .s-bm-tekst .bm-prose h2 { font-size: 32px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   8. FORMULIEREN — Fluent Forms in Unique-vlakken
   ═══════════════════════════════════════════════════════════════════════ */
/* Structuur, ook als de Fluent-stylesheet (nog) niet geladen is. */
.uo-site .fluentform fieldset { min-width: 0; }
.uo-site .fluentform .ff-t-container { display: flex; gap: 0 24px; width: 100%; }
.uo-site .fluentform .ff-t-cell { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) {
    .uo-site .fluentform .ff-t-container { flex-direction: column; }
}
.uo-site .fluentform .ff-el-form-control { display: block; width: 100%; }
/* Ontwerp (ds-form): 24px tussen de velden, label 27px + 13px tot het veld. */
.uo-site .fluentform .ff-el-group { margin-bottom: 24px; }
.uo-site .fluentform .ff-el-input--label label { margin-bottom: 0; }
.uo-site .fluentform .ff-el-input--label label,
.uo-site .fluentform .ff-el-input--label {
    margin-bottom: 13px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--uo-ink);
}
.uo-site .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--uo-error); }
.uo-site .fluentform .ff-el-form-control {
    min-height: 56px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.5;
    color: var(--uo-ink);
    background: #fff;
    border: 1px solid var(--uo-line-strong);
    border-radius: 0;
    box-shadow: none;
}
.uo-site .fluentform textarea.ff-el-form-control { min-height: 144px; line-height: 1.65; }
.uo-site .fluentform .ff-el-form-control:focus { border-color: var(--uo-ink); box-shadow: 0 0 0 1px var(--uo-ink); }
.uo-site .fluentform .ff-el-form-check-label { font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--uo-ink); }
.uo-site .fluentform .ff-el-form-check-input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--uo-ink); }
.uo-site .fluentform .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 12px; }
/* Akkoordveld (voorwaarden/nieuwsbrief): Fluent Forms maakt er een tabelrij
   van (label display: table-row), dan werkt de gap niet en raakt het vakje
   de tekst. */
.uo-site .fluentform .ff-el-tc .ff_tc_label { display: flex; align-items: flex-start; gap: 12px; }
.uo-site .fluentform .ff-el-tc .ff_tc_checkbox { display: block; flex: none; padding: 0; }
.uo-site .fluentform .ff-el-tc .ff_t_c { display: block; padding: 0; }
.uo-site .fluentform .ff_t_c,
.uo-site .fluentform .ff_t_c p { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--uo-ink); }
.uo-site .fluentform .ff_t_c a { color: var(--uo-link); text-decoration: underline; text-underline-offset: 3px; }
.uo-site .fluentform .ff-custom_html p { margin: 0; }
.uo-site .fluentform .ff-el-help-message,
.uo-site .fluentform .ff_t_c,
.uo-site .fluentform .ff-custom_html { font-size: 16px; line-height: 1.6; color: var(--uo-muted); }
.uo-site .fluentform .text-danger,
.uo-site .fluentform .error { font-size: 16px; color: var(--uo-error); }
.uo-site .fluentform .ff-btn-submit,
.uo-site .fluentform .ff-btn.ff-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 15px 28px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .01em;
    color: #fff !important;
    background: var(--uo-btn) !important;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0;
    box-shadow: var(--uo-btn-shadow);
}
.uo-site .fluentform .ff-btn-submit:hover { background: var(--uo-btn-hover) !important; opacity: 1; }
@media (max-width: 767px) { .uo-site .fluentform .ff-btn-submit { font-size: 16px; } }
.uo-site .ff-message-success { padding: 20px; border: 0; background: #e8efe9; color: var(--uo-ink); box-shadow: none; }

/* Nieuwsbrief in de footer: naam, naam en e-mail op één rij */
.uo-signup-form .fluentform .ff-el-group { margin-bottom: 16px; }
.uo-signup-form .fluentform .ff-el-form-control { min-height: 56px; padding: 12px 14px; border-color: #9aabae; }
/* Ontwerp: tot en met 1024px onder elkaar en loopt de titel door (34px,
   mobiel 32px), met minder ruimte eromheen op mobiel. */
@media (max-width: 1024px) {
    .uo-signup { gap: 28px; }
    .uo-signup h2 { font-size: 34px; text-wrap: wrap; }
    .uo-signup h2 br { display: none; }
}
@media (max-width: 767px) {
    .uo-footer-inner { padding-top: 48px; }
    .uo-signup { gap: 24px; margin-bottom: 32px; padding-bottom: 40px; }
    .uo-signup h2 { font-size: 32px; }
    .uo-signup-form { padding: 24px; }
    .uo-footer-bottom { row-gap: 12px; }
    .uo-footer-bottom nav { gap: 16px; }
}
@media (min-width: 900px) {
    .uo-signup-form .fluentform .ff-btn-submit { width: 100%; }
}
@media (min-width: 900px) {
    .uo-signup-form .fluentform fieldset,
    .uo-signup-form .fluentform form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
    .uo-signup-form .fluentform form > fieldset { grid-column: 1 / -1; }
    .uo-signup-form .fluentform .ff-t-container { grid-column: span 2; margin: 0; }
    .uo-signup-form .fluentform .ff-el-group.ff-el-form-check,
    .uo-signup-form .fluentform .ff-el-group:has(.ff-el-form-check),
    .uo-signup-form .fluentform .ff-el-tc { grid-column: span 2; }
    /* Rij 2: toestemming (2 kolommen) naast de knop, rij 3: privacyregel. */
    .uo-signup-form .fluentform .ff-el-tc { grid-row: 2; }
    .uo-signup-form .fluentform .ff_submit_btn_wrapper { grid-column: 3; grid-row: 2; }
    .uo-signup-form .fluentform .ff-custom_html { grid-column: 1 / -1; grid-row: 3; margin-bottom: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   9. TEMPLATES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Journey: contact, afspraak maken, winkelafspraak ── */
.uo-journey { background: var(--uo-pastel); }
.uo-journey-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    width: min(1320px, calc(100% - var(--uo-gutter) * 2));
    margin-inline: auto;
    padding: 40px 0 56px;
}
.uo-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 18px;
    color: var(--uo-link);
    text-decoration: none;
}
.uo-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.uo-journey-intro h1 {
    max-width: 491px;
    margin: 16px 0;
    font-size: 40px;
    line-height: 1.13;
    letter-spacing: -.035em;
}
.uo-journey-intro p,
.uo-journey-intro address { max-width: 512px; margin: 0; font-style: normal; color: var(--uo-copy); }
.uo-journey-panel {
    padding: 24px 20px;
    background: #fff;
    box-shadow: 0 8px 40px rgba(20, 46, 64, .024);
}
.uo-journey-panel h2,
.uo-store-choice legend h2 { margin: 0 0 24px; font-size: 28px; line-height: 1.3; }
.uo-journey-panel.uo-form-panel { gap: 0; }
.uo-journey-panel.uo-form-panel > h2 { margin-bottom: 24px; }
.uo-journey-visit { margin: 32px 0 16px; font-size: 22px; line-height: 1.4; }

@media (min-width: 1025px) {
    .uo-journey-shell {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-rows: auto 1fr;
        gap: 32px 64px;
        padding: 64px 0 80px;
        align-items: start;
    }
    .uo-journey-intro { grid-column: 1; grid-row: 1; }
    .uo-journey-panel { grid-column: 2; grid-row: 1 / span 2; padding: 40px; }
    .uo-journey-support { grid-column: 1; grid-row: 2; }
    /* Lege toestand (geen formulier of agenda): één kolom, geen leeg vlak rechts. */
    .uo-journey-shell--solo { grid-template-columns: minmax(0, 640px); }
    .uo-journey-shell--solo .uo-journey-support { grid-row: 2; }
    .uo-journey-intro h1 { margin: 24px 0; font-size: 56px; }
}

.uo-winkelkaarten h2 { margin: 0 0 20px; font-size: 22px; line-height: 1.4; }
.uo-winkelkaart {
    margin-bottom: 12px;
    padding: 24px;
    background: rgba(255, 255, 255, .72);
}
.uo-winkelkaart h3 { margin: 0 0 16px; font-size: 23px; line-height: 1.3; }
.uo-channel {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--uo-link);
    text-decoration: none;
}
.uo-channel:hover strong,
.uo-channel:hover > span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.uo-channel-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #e5ece7;
}
.uo-channel-label { display: block; font-size: 17px; color: var(--uo-copy); }
.uo-channel strong { display: block; font-size: 20px; font-weight: 500; }
.uo-hours-disclosure { margin-top: 12px; }
.uo-hours-disclosure summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    font-size: 18px;
    color: var(--uo-link);
    cursor: pointer;
    list-style: none;
}
.uo-hours-disclosure summary::-webkit-details-marker { display: none; }
.uo-hours-disclosure .uo-caret { margin-left: auto; transition: transform .2s var(--uo-ease); }
.uo-hours-disclosure[open] .uo-caret { transform: rotate(180deg); }
.uo-hours-disclosure .uo-hours { padding: 8px 0 4px 32px; }

/* Winkelkeuze */
.uo-store-choice fieldset { margin: 0; padding: 0; border: 0; }
.uo-store-choice legend { padding: 0; }
.uo-store-options { display: grid; gap: 12px; }
.uo-store-option {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 24px;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid #cad4d3;
    cursor: pointer;
    transition: border-color .15s var(--uo-ease), box-shadow .15s var(--uo-ease);
}
.uo-store-option:hover { border-color: var(--uo-line-strong); }
.uo-store-option:has(input:checked) { border-color: var(--uo-ink); box-shadow: 0 0 0 1px var(--uo-ink); }
.uo-store-option input {
    grid-column: 3;
    grid-row: 1;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--uo-ink);
}
.uo-store-option img { grid-column: 1; grid-row: 1; width: 72px; height: 84px; object-fit: cover; }
.uo-store-place { grid-column: 2; grid-row: 1; font-size: 17px; line-height: 1.6; color: var(--uo-copy); }
.uo-store-place strong { display: block; font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--uo-ink); }
.uo-store-choice-error { margin: 16px 0 0; font-size: 17px; color: var(--uo-error); }
.uo-site .uo-store-choice .uo-next { width: auto; margin-top: 28px; font-size: 20px; font-weight: 400; background: #f4f6f3; border-color: var(--uo-line-strong); }
@media (min-width: 768px) {
    .uo-store-option { grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 20px; padding: 20px; }
    .uo-store-option img { width: 96px; height: 112px; }
    .uo-store-place strong { font-size: 26px; }
}

/* Winkelagenda als paneel (template Winkelafspraak) */
.uo-journey--agenda .uo-agenda-panel { padding: 20px; }
.uo-journey--agenda iframe { display: block; width: 100%; height: 980px; border: 0; }

/* ── Winkel (ontwerp: visit-page) ── */
.uo-visit-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--uo-pastel);
}
.uo-visit-intro { padding: 40px var(--uo-gutter); }
.uo-visit-intro h1 { margin: 16px 0; font-size: 40px; line-height: 1.13; letter-spacing: -.035em; }
.uo-visit-intro p { max-width: 520px; margin: 0; color: var(--uo-copy); }
.uo-visit-hero > img { width: 100%; height: 280px; object-fit: cover; }
@media (min-width: 992px) {
    .uo-visit-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; min-height: 480px; }
    .uo-visit-intro { align-self: center; padding: 64px 60px; }
    .uo-visit-intro h1 { font-size: 52px; }
    .uo-visit-hero > img { height: 100%; }
    .uo-visit-hero--zonder-foto { grid-template-columns: minmax(0, 1fr); }
}
.uo-visit-practical {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    width: min(1320px, calc(100% - var(--uo-gutter) * 2));
    margin-inline: auto;
    padding: 48px 0;
}
@media (min-width: 768px) { .uo-visit-practical { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; padding: 64px 0; } }
.uo-visit-practical h2 { margin: 0 0 20px; font-size: 28px; }
.uo-visit-practical address { margin: 0 0 16px; font-style: normal; font-size: 18px; color: var(--uo-copy); }
.uo-visit-practical a { display: block; width: fit-content; margin-bottom: 8px; font-size: 18px; color: var(--uo-link); }
.uo-visit-phone { text-decoration: underline; text-underline-offset: 4px; }
.uo-visit-route { display: inline-flex !important; align-items: center; gap: 6px; text-decoration: none; }
.uo-visit-practical .uo-hours { max-width: 480px; font-size: 18px; }

/* ── Winkels ── */
.uo-stores { width: min(1320px, calc(100% - var(--uo-gutter) * 2)); margin-inline: auto; padding: 48px 0 64px; }
.uo-stores-head h1 { margin: 0 0 16px; font-size: 40px; line-height: 1.13; letter-spacing: -.035em; }
.uo-stores-head p { max-width: 620px; margin: 0 0 40px; color: var(--uo-copy); }
.uo-stores-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .uo-stores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uo-stores-head h1 { font-size: 56px; } }
.uo-location-card { background: var(--uo-paper); }
.uo-location-card img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.uo-location-card > div { padding: 24px 28px 32px; }
.uo-location-card h2 { margin: 0 0 8px; font-size: 30px; }
.uo-location-card address { margin: 0 0 24px; font-style: normal; color: var(--uo-copy); }


/* ═══════════════════════════════════════════════════════════════════════
   10. KENNISMODULE, ZOEKEN, 404
   De kennismodule leest de tokens hierboven; hier alleen wat afwijkt.
   ═══════════════════════════════════════════════════════════════════════ */
/* Paginahero van het basisthema en de kennismodule (o.a. /kennisartikelen/,
   oude categorieën). De kennisonderdelen zelf hebben de kop van het
   ontwerp (template-parts/unique/kennis/). De module zet deze hero standaard
   op donker; hier altijd licht zoals de rest van de site, anders stond de
   titel donker op donker. Een Hero-blok op een pagina houdt zijn eigen
   achtergrond. */
/* body.uo-site: de module kleurt de donkere variant met .bm-km-hero:is(.bg-donker) (0,3,0), later geladen. */
body.uo-site .bm-km-hero,
body.uo-site .bm-km-hero.bg-donker,
body.uo-site .bm-km-hero.bg-accent { background: #fff; color: var(--uo-text); }
body.uo-site .bm-km-hero .c-bm-hero { border-top: 1px solid #d1d7d5; border-bottom: 1px solid #d1d7d5; }
body.uo-site .bm-km-hero h1,
.uo-site .s-bm-hero--pagina:not(.bg-donker):not(.bg-accent) h1 { font-weight: 500; letter-spacing: -.035em; color: var(--uo-ink); }
body.uo-site .bm-km-hero .lead { color: var(--uo-copy); }
body.uo-site .bm-km-hero .bm-breadcrumbs,
body.uo-site .bm-km-hero .bm-breadcrumbs a,
body.uo-site .bm-km-hero .bm-breadcrumbs span { color: #4c5e65; }
body.uo-site .bm-km-hero .bm-breadcrumbs [aria-current] { color: var(--uo-ink); }
body.uo-site .bm-km-hero .bm-eyebrow { color: var(--uo-muted); background: var(--uo-paper); }
body.uo-site .bm-km-hero .bm-km-tabs a { color: var(--uo-muted); border-color: #d8deda; }
body.uo-site .bm-km-hero .bm-km-tabs a[aria-current] { color: #fff; background: var(--uo-navy); border-color: var(--uo-navy); }
.uo-site .bm-km-card,
.uo-site .bm-km-kaart { border-radius: 0; }
.uo-site .bm-search-overlay { background: rgba(255, 255, 255, .98); }
.uo-site .bm-search-input-wrap input { border-radius: 0; font-family: inherit; }
/* Zoekvenster: het veld over de volle breedte van het venster (de
   formulierstijl van de zoekpagina maakt het anders een smalle flex-kolom). */
.uo-site .bm-search-overlay .bm-search-form { display: block; max-width: none; }
.uo-site .bm-search-overlay .bm-search-input-wrap { width: 100%; }
.uo-site .bm-search-overlay .bm-search-input-wrap input[type="search"] { min-height: 64px; border: 1px solid #738890; color: var(--uo-ink); }
.uo-site .bm-search-overlay .bm-search-input-wrap input[type="search"]:focus { border-color: var(--uo-ink); box-shadow: 0 0 0 1px var(--uo-ink); }


/* ═══════════════════════════════════════════════════════════════════════
   404 (template-parts/unique/404.php)
   Paginakop met zoekveld rechts, daaronder vier ingangen als kaarten.
   ═══════════════════════════════════════════════════════════════════════ */
.uo-404-zoek { margin-top: 28px; }
.uo-404-zoek label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 500; color: var(--uo-ink); }
.uo-404-zoek > div { display: flex; }
.uo-404-zoek input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;
    padding: 12px 14px;
    font: inherit;
    font-size: 18px;
    color: var(--uo-text);
    background: #fff;
    border: 1px solid var(--uo-line-strong);
    border-right: 0;
    border-radius: 0;
}
.uo-404-zoek input:focus { outline: none; border-color: var(--uo-ink); box-shadow: inset 0 0 0 1px var(--uo-ink); }
.uo-404-zoek button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 20px;
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: var(--uo-btn);
    border: 0;
    border-radius: 0;
    box-shadow: var(--uo-btn-shadow);
    cursor: pointer;
}
.uo-404-zoek button:hover { background: var(--uo-btn-hover); }
.uo-404-zoek button:focus-visible { outline: 2px solid var(--uo-focus); outline-offset: 2px; }
@media (max-width: 479px) { .uo-404-zoek button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 1100px) { .uo-kaarten-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* ═══════════════════════════════════════════════════════════════════════
   KENNIS — begrippen en blogs (template-parts/unique/kennis/)
   Ontwerp: brand-hero, ds-knowledge-nav, ds-filterbar, ds-alphabet,
   ds-term-group, ds-story-card, term-shell, ds-article-layout.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kop (brand-hero) ── */
.uo-khero { padding-inline: var(--uo-edge); background: #fff; }
.uo-khero-top {
    display: grid;
    gap: 12px;
    min-height: 74px;
    padding: 20px 4px;
    border-top: 1px solid #d1d7d5;
    border-bottom: 1px solid #d1d7d5;
}
.uo-khero-top h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.02em;
    color: var(--uo-ink);
}
.uo-kcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 18px; line-height: 1.6; color: #4c5e65; }
.uo-kcrumb a { color: inherit; text-decoration: none; }
.uo-kcrumb a:hover { color: var(--uo-ink); text-decoration: underline; text-underline-offset: 3px; }
.uo-kcrumb [aria-current] { color: var(--uo-ink); }
.uo-khero-copy {
    display: grid;
    gap: 24px;
    padding: 32px 4px;
}
.uo-khero-zin {
    max-width: 520px;
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.025em;
    color: var(--uo-ink);
    text-wrap: balance;
}
.uo-khero-tekst p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--uo-copy); }
.uo-khero-tekst .uo-khero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--uo-muted);
}
.uo-khero-meta a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.uo-khero-meta a:hover { color: var(--uo-ink); }
.uo-khero-beeld { height: 280px; margin: 0; overflow: hidden; background: var(--uo-paper); }
.uo-khero-beeld img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.uo-khero--bericht .uo-khero-beeld { height: 300px; }
.uo-khero--bericht .uo-khero-beeld img { object-fit: contain; }
@media (min-width: 768px) {
    .uo-khero-top { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 18px 20px; }
    .uo-khero-top h1 { max-width: 70%; font-size: 22px; line-height: 1.45; }
    .uo-kcrumb { flex-wrap: nowrap; gap: 10px; justify-content: flex-end; }
    .uo-khero-copy { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; padding: 48px 20px; }
    .uo-khero-zin { font-size: 32px; }
    .uo-khero-tekst p { font-size: 20px; }
    /* Ontwerp: meeschalend, 37vw tussen 280 (bericht 320) en 500px. */
    .uo-khero-beeld { height: clamp(280px, 37vw, 500px); }
    .uo-khero--bericht .uo-khero-beeld { height: clamp(320px, 37vw, 500px); }
}
@media (min-width: 768px) and (max-width: 1023px) { .uo-khero-copy { gap: 40px; } }

/* ── Kennisnavigatie (ds-knowledge-nav) ── */
.uo-knav {
    display: flex;
    gap: 24px;
    margin-inline: var(--uo-edge);
    padding-inline: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #d8deda;
}
.uo-knav::-webkit-scrollbar { display: none; }
.uo-knav a {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 56px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--uo-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.uo-knav a:hover { color: var(--uo-link); }
.uo-knav a[aria-current="page"] { color: var(--uo-link); border-bottom-color: var(--uo-link); }
@media (min-width: 768px) {
    .uo-knav { gap: 32px; padding-inline: 20px; }
    .uo-knav a { min-height: 64px; font-size: 17px; }
}

/* ── Sectie, zoeken, alfabet ── */
.uo-ksectie {
    width: min(var(--uo-wrap), calc(100% - var(--uo-gutter) * 2));
    margin-inline: auto;
    padding-block: 48px;
}
@media (min-width: 768px) { .uo-ksectie { padding-block: 80px; } }
.uo-kfilter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 24px;
    margin-bottom: 32px;
}
.uo-kfilter label { font-size: 17px; font-weight: 500; line-height: 1.65; color: var(--uo-ink); }
.uo-kfilter input {
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--uo-ink);
    background: #fff;
    border: 1px solid var(--uo-line-strong);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
.uo-kfilter input:focus { outline: none; border-color: var(--uo-ink); box-shadow: 0 0 0 1px var(--uo-ink); }
.uo-kfilter-aantal { margin: 8px 0 0; font-size: 18px; line-height: 1.6; color: var(--uo-copy); }
.uo-kfilter-leeg { margin: 0 0 32px; font-size: 18px; color: var(--uo-copy); }
.uo-kfilter-leeg[hidden] { display: none; }
@media (min-width: 768px) {
    .uo-kfilter { grid-template-columns: minmax(0, 560px) auto; justify-content: space-between; align-items: end; }
    .uo-kfilter label { grid-column: 1; }
    .uo-kfilter input { grid-column: 1; grid-row: 2; }
    .uo-kfilter-aantal { grid-column: 2; grid-row: 2; margin: 0 0 4px; text-align: right; }
}
.uo-kaz {
    position: sticky;
    top: calc(var(--uo-header-h) - 1px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    background: #fff;
    border-top: 1px solid #d8deda;
    border-bottom: 1px solid #d8deda;
}
.uo-kaz a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 48px;
    font-size: 20px;
    line-height: 1.65;
    color: var(--uo-ink);
    text-decoration: none;
}
.uo-kaz a:hover { background: var(--uo-paper); }
.uo-kaz a[hidden] { display: none; }
/* De letterbalk blijft op elke breedte onder de header hangen tijdens het scrollen. */
.admin-bar .uo-kaz { top: calc(var(--uo-header-h) + 31px); }
@media (min-width: 768px) { .uo-kaz a { width: 48px; } }

/* ── Begrippen per letter (ds-term-group) ── */
.uo-kgroep {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 32px;
    border-bottom: 1px solid #d8deda;
    /* Header plus de letterbalk die blijft hangen (mobiel twee rijen). */
    scroll-margin-top: calc(var(--uo-header-h) + 136px);
}
@media (min-width: 768px) { .uo-kgroep { scroll-margin-top: calc(var(--uo-header-h) + 86px); } }
.uo-kgroep[hidden] { display: none; }
.uo-kgroep h2 { margin: 0; font-size: 32px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-kgroep > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }
.uo-kbegrip {
    display: block;
    padding: 24px;
    color: var(--uo-text);
    text-decoration: none;
    background: #fff;
    border: 1px solid #d8deda;
    transition: border-color .2s var(--uo-ease), background-color .2s var(--uo-ease);
}
.uo-kbegrip[hidden] { display: none; }
.uo-kbegrip:hover { border-color: #8b9c9f; background: #fbfbf9; }
.uo-kbegrip h3 { margin: 0 0 12px; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-kbegrip p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--uo-copy); }
@media (min-width: 768px) {
    .uo-kgroep { grid-template-columns: 80px minmax(0, 1fr); gap: 32px; padding-block: 48px; }
    .uo-kgroep > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Berichten (ds-story-card) ── */
.uo-kgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 768px) { .uo-kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1101px) { .uo-kgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uo-kverhaal {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d8deda;
}
.uo-kverhaal[hidden] { display: none; }
.uo-kverhaal-beeld { display: block; aspect-ratio: 382 / 242; overflow: hidden; background: var(--uo-paper); }
/* Niet bijsnijden: actiebeelden hebben tekst tot aan de rand (ontwerp: contain op papier). */
.uo-kverhaal-beeld img { display: block; width: 100%; height: 100% !important; object-fit: contain; transition: transform .6s var(--uo-ease); }
.uo-kverhaal:hover .uo-kverhaal-beeld img { transform: scale(1.03); }
.uo-kverhaal-tekst { display: flex; flex: 1 1 auto; flex-direction: column; gap: 16px; padding: 24px; }
.uo-kverhaal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--uo-muted); }
.uo-kverhaal h2,
.uo-kverhaal h3 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-kverhaal h2 a,
.uo-kverhaal h3 a { color: inherit; text-decoration: none; }
.uo-kverhaal h2 a:hover,
.uo-kverhaal h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.uo-kverhaal-tekst > p:not(.uo-kverhaal-meta) { margin: 0; font-size: 17px; line-height: 1.65; color: var(--uo-copy); }
.uo-kverhaal-auteur {
    margin-top: auto;
    padding-top: 16px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--uo-muted);
    text-decoration: none;
    border-top: 1px solid #d8deda;
}
.uo-kverhaal-auteur:hover { color: var(--uo-ink); text-decoration: underline; text-underline-offset: 4px; }

/* Paginering van de kennismodule */
.uo-ksectie .bm-km-paginering,
.uo-ksectie nav[class*="paginering"] { margin-top: 48px; }

/* ── Begrip (term-shell) ── */
.uo-begrip {
    width: min(var(--uo-wrap), calc(100% - var(--uo-gutter) * 2));
    margin-inline: auto;
    padding: 24px 0 48px;
}
.uo-begrip-kruimel { margin-bottom: 32px; font-size: 18px; line-height: 1.6; color: #4b6068; }
.uo-begrip-kruimel ol { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.uo-begrip-kruimel li { display: flex; gap: 12px; margin: 0; }
.uo-begrip-kruimel ol, .uo-begrip-kruimel li { line-height: inherit; }
.uo-begrip-kruimel li + li::before { content: "/"; color: #4b6068; }
.uo-begrip-kruimel a { color: inherit; text-decoration: none; }
.uo-begrip-kruimel a:hover { color: var(--uo-ink); text-decoration: underline; text-underline-offset: 3px; }
.uo-begrip-kruimel [aria-current] { color: var(--uo-ink); }
.uo-begrip-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.uo-begrip-eyebrow { display: block; margin-bottom: 12px; font-size: 18px; line-height: 1.5; color: #52666e; }
.uo-begrip-inhoud h1 {
    max-width: 24ch;
    margin: 0 0 24px;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.035em;
    color: var(--uo-ink);
    text-wrap: balance;
}
.uo-begrip-betekenis { padding: 24px; background: #edf1ef; }
.uo-begrip-betekenis h2 { margin: 0 0 16px; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: #4b6068; }
.uo-begrip-betekenis p { margin: 0; font-size: 18px; line-height: 1.65; color: #263f4c; }
.uo-site .uo-begrip-tekst { margin-top: 32px; font-size: 18px; line-height: 1.7; color: var(--uo-copy); }
.uo-site .uo-begrip-tekst p { margin: 0 0 16px; font-size: inherit; line-height: inherit; color: inherit; }
.uo-begrip-verder { margin-top: 32px; }
.uo-begrip-verder h2,
.uo-begrip-zij h2 { margin: 0 0 16px; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-begrip-verder a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
    padding: 16px 20px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--uo-link);
    text-decoration: none;
    background: var(--uo-paper);
}
.uo-begrip-verder a + a { margin-top: 8px; }
.uo-begrip-verder a:hover { background: #eef0ea; }
.uo-begrip-verder a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.uo-begrip-verder .bm-icon,
.uo-begrip-zij .bm-icon { flex: 0 0 auto; transition: transform .2s var(--uo-ease); }
.uo-begrip-verder a:hover .bm-icon,
.uo-begrip-zij a:hover .bm-icon { transform: translateX(3px); }
.uo-begrip-alle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--uo-link);
    text-decoration: none;
}
.uo-begrip-alle:hover { text-decoration: underline; text-underline-offset: 4px; }
.uo-begrip-zij { display: grid; gap: 24px; }
.uo-begrip-zij h2 { font-size: 22px; letter-spacing: -.02em; }
.uo-begrip-gerelateerd { padding: 24px; background: var(--uo-paper); }
.uo-begrip-gerelateerd a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding-block: 12px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--uo-link);
    text-decoration: none;
}
.uo-begrip-gerelateerd a + a { border-top: 1px solid #dfe4e1; }
.uo-begrip-gerelateerd a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.uo-begrip-vraag { padding: 0 24px; }
.uo-begrip-vraag p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; color: var(--uo-copy); }
.uo-begrip-vraag a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    font-size: 18px;
    color: var(--uo-link);
    text-decoration: none;
}
.uo-begrip-vraag a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Ontwerp (term-layout): vanaf 768px de zijkolom ernaast, 260px met 32px
   ertussen, vanaf 1001px 300px met 64px. */
@media (min-width: 768px) {
    .uo-begrip { padding: 32px 0 80px; }
    .uo-begrip-kruimel { margin-bottom: 48px; }
    .uo-begrip-inhoud h1 { margin-bottom: 32px; font-size: clamp(38px, 4.2vw, 56px); }
    .uo-begrip-betekenis { padding: 28px; }
    .uo-begrip-betekenis p { font-size: 22px; line-height: 1.7; }
    .uo-begrip-eyebrow { margin-bottom: 16px; }
    .uo-begrip-vraag { padding: 24px; }
    .uo-begrip-verder { margin-top: 40px; }
    .uo-begrip-verder a { font-size: 20px; }
    .uo-begrip-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
    .uo-begrip-zij { gap: 32px; padding-top: 46px; }
}
@media (min-width: 1001px) {
    .uo-begrip-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
    .uo-begrip-betekenis { padding: 32px; }
}

/* ── Bericht (ds-article-layout) ── */
.uo-artikel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    width: min(var(--uo-wrap), calc(100% - var(--uo-gutter) * 2));
    margin: 40px auto 0;
}
.uo-artikel-toc { display: flex; flex-direction: column; gap: 16px; align-self: start; }
.uo-artikel-toc h2 { margin: 0 0 8px; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-artikel-toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--uo-copy);
    text-decoration: none;
}
.uo-artikel-toc a.is-sub { padding-left: 16px; }
.uo-artikel-toc a:hover { color: var(--uo-ink); text-decoration: underline; text-underline-offset: 4px; }
.uo-artikel-toc a[aria-current] { color: var(--uo-ink); font-weight: 600; }
.uo-site .uo-artikel-tekst { min-width: 0; font-size: 18px; line-height: 1.7; color: var(--uo-copy); }
.uo-site .uo-artikel-tekst .bm-km-blok { margin: 0; padding: 0; background: none; }
.uo-site .uo-artikel-tekst p,
.uo-site .uo-artikel-tekst li { max-width: 854px; font-size: inherit; line-height: inherit; color: inherit; }
.uo-site .uo-artikel-tekst p { margin: 0 0 24px; }
.uo-site .uo-artikel-tekst ul,
.uo-site .uo-artikel-tekst ol { display: block; margin: 24px 0; padding-left: 24px; }
.uo-site .uo-artikel-tekst .bm-km-blok li { margin: 0; line-height: 1.7; }
.uo-site .uo-artikel-tekst .bm-km-blok li + li { margin-top: 8px; }
.uo-site .uo-artikel-tekst strong { font-weight: 700; color: inherit; }
.uo-site .uo-artikel-tekst a { color: var(--uo-link); text-decoration: underline; text-underline-offset: 3px; font-weight: 400; }
.uo-site .uo-artikel-tekst h2,
.uo-site .uo-artikel-tekst h3 {
    margin: 32px 0 16px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.025em;
    color: var(--uo-ink);
    scroll-margin-top: calc(var(--uo-header-h) + 24px);
}
.uo-site .uo-artikel-tekst h2 { font-size: 28px; }
.uo-site .uo-artikel-tekst img { max-width: 100%; height: auto; }
.uo-site .uo-artikel-tekst > :first-child > :first-child { margin-top: 0; }
.uo-site .uo-auteurvak {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 40px;
    padding: 24px;
    background: var(--uo-paper);
}
.uo-site .uo-auteurvak h2 { margin: 0 0 12px !important; font-size: 23px !important; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.uo-site .uo-auteurvak p { margin: 0 !important; font-size: 18px; line-height: 1.6; }
.uo-site .uo-auteurvak > a { justify-self: start; }
.uo-site .uo-auteurvak a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    font-size: 18px;
    color: var(--uo-link);
    text-decoration: none !important;
    white-space: nowrap;
}
.uo-site .uo-auteurvak a:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.uo-artikel-verder { padding-block: 56px 64px; }
.uo-artikel-verder > h2 { margin: 0 0 28px; font-size: 30px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
@media (min-width: 768px) { .uo-site .uo-artikel-tekst { font-size: 20px; } }
/* Ontwerp: de knop naast de tekst pas boven 1100px, daaronder eronder. */
@media (min-width: 1101px) { .uo-site .uo-auteurvak { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; } }
/* Ontwerp (ds-article-layout): vanaf 768px de inhoudsopgave ernaast, 220px
   met 32px ertussen; boven 1100px 250px met 48px. */
@media (min-width: 768px) {
    .uo-artikel { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; margin-top: 64px; }
    .uo-artikel-toc { position: sticky; top: calc(var(--uo-header-h) + 24px); }
    .admin-bar .uo-artikel-toc { top: calc(var(--uo-header-h) + 56px); }
}
@media (min-width: 1101px) {
    .uo-artikel { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
}

/* ── Veelgestelde vragen (ds-faq) ── */
.uo-faq-list--archief details { padding: 0 20px; }
.uo-faq-list--archief details[open] { background: #edf1ee; }
.uo-faq-list--archief details[hidden] { display: none; }
.uo-faq-list--archief summary h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--uo-ink);
    text-wrap: pretty;
}
.uo-faq-list--archief .uo-faq-answer { max-width: 793px; font-size: 18px; line-height: 1.7; }
.uo-faq-list--archief .uo-faq-answer p { margin: 0; }
.uo-faq-meer { display: inline-block; margin-top: 20px; color: var(--uo-link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.uo-faq-meer:hover { color: var(--uo-ink); }
@media (min-width: 768px) {
    .uo-faq-list--archief details { padding: 0 24px; }
    .uo-faq-list--archief summary { min-height: 88px; padding: 24px 0; gap: 24px; }
    .uo-faq-list--archief summary h2 { font-size: 21px; }
    .uo-faq-list--archief .uo-faq-answer { font-size: 20px; }
}

/* ── Een vraag (ds-answer) ── */
.uo-antwoord {
    width: min(820px, calc(100% - var(--uo-gutter) * 2));
    margin-inline: auto;
    padding: 40px 0 80px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--uo-copy);
}
.uo-site .uo-antwoord p { margin: 0 0 16px; font-size: inherit; line-height: inherit; color: inherit; }
.uo-site .uo-antwoord .uo-kort-antwoord p:last-child { margin-bottom: 0; }
.uo-antwoord-uitleg { margin-top: 24px; }
.uo-antwoord-uitleg a { color: var(--uo-link); }
.uo-antwoord-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 40px; }
.uo-antwoord-acties > a:not(.pri-cta) { color: var(--uo-link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.uo-antwoord-acties > a:not(.pri-cta):hover { color: var(--uo-ink); }
@media (min-width: 768px) {
    .uo-antwoord { padding-top: 64px; font-size: 20px; }
}

/* ── Auteurs (ds-publisher-card) ── */
.uo-auteurkaarten { display: grid; gap: 24px; }
.uo-auteurkaart {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    color: var(--uo-ink);
    text-decoration: none;
    border: 1px solid #d8deda;
    transition: border-color .2s var(--uo-ease);
}
.uo-auteurkaart:hover { border-color: #8b9c9f; }
.uo-auteurkaart img { flex: 0 0 auto; width: 160px; height: auto; object-fit: contain; }
.uo-auteurkaart img.is-foto { aspect-ratio: 1; object-fit: cover; }
.uo-auteurkaart h2 { margin: 0 0 16px; font-size: 32px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-auteurkaart p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--uo-copy); }
.uo-auteurkaart span { display: inline-block; margin-top: 24px; font-size: 18px; color: var(--uo-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.uo-auteurkaart:hover span { text-decoration-thickness: 2px; }
@media (min-width: 768px) {
    .uo-auteurkaart { flex-direction: row; align-items: center; gap: 40px; padding: 40px; }
    .uo-auteurkaart img { width: 200px; }
    .uo-auteurkaart p,
    .uo-auteurkaart span { font-size: 20px; }
}

/* ── Een auteur (ds-author-intro) ── */
.uo-auteur-intro {
    display: grid;
    gap: 32px;
    width: min(var(--uo-wrap), calc(100% - var(--uo-gutter) * 2));
    margin-inline: auto;
    padding-block: 32px;
}
.uo-auteur-intro img { width: 210px; height: auto; }
.uo-auteur-intro img.is-foto { aspect-ratio: 1; object-fit: cover; }
.uo-auteur-intro h2 { margin: 0 0 24px; font-size: 32px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-site .uo-auteur-intro p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; color: var(--uo-copy); }
.uo-auteur-link { display: inline-block; margin-top: 8px; color: var(--uo-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.uo-auteur-publicaties > h2 { margin: 0 0 28px; font-size: 32px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
@media (min-width: 768px) {
    .uo-auteur-intro { grid-template-columns: 250px minmax(0, 1fr); gap: 64px; padding: 48px 0 64px; }
    .uo-site .uo-auteur-intro p { font-size: 20px; }
}

/* ── Kleurentest direct in de pagina (ontwerp: s-ec) ── */
.uo-kleurentest--ingebed { width: min(1280px, calc(100% - var(--uo-edge) * 2)); margin-inline: auto; padding-block: 30px; }
.uo-kleurentest--ingebed iframe { display: block; width: 100%; height: 850px; border: 0; background: #fff; }
.uo-kleurentest--ingebed .uo-kleurentest-noot { margin: 12px 0 0; font-size: 16px; }
.uo-kleurentest--ingebed .uo-kleurentest-noot a { color: var(--uo-link); }
@media (min-width: 768px) { .uo-kleurentest--ingebed { padding-block: 37px; } }
@media (min-width: 1100px) { .uo-kleurentest--ingebed { padding-block: 50px; } }

/* ── Tekst-combinatie met beeld over de volle breedte (ontwerp: s-t-img) ──
   Tekst links op een licht vlak, midden uitgelijnd en 500px breed, beeld
   rechts tot de rand, 900px hoog. */
@media (min-width: 992px) {
    .uo-site .s-bm-tc--media .c-bm-tc.breedte-volledig { max-width: none; padding: 0; }
    .uo-site .s-bm-tc--media .breedte-volledig .bm-tc-grid { gap: 30px; min-height: 900px; padding: 0; align-items: stretch; }
    .uo-site .s-bm-tc--media .breedte-volledig .bm-tc-tekst { display: flex; flex-direction: column; justify-content: center; padding: 64px 0; }
    .uo-site .s-bm-tc--media .breedte-volledig .bm-tc-tekst > * { width: min(500px, 100%); margin-inline: auto; }
    .uo-site .s-bm-tc--media .breedte-volledig .bm-tc-side,
    .uo-site .s-bm-tc--media .breedte-volledig .bm-tc-media { height: 100%; }
    .uo-site .s-bm-tc--media .breedte-volledig .bm-tc-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
}
.uo-site .s-bm-tc--media.bg-licht { background: #f4f3ef; }
.uo-site .s-bm-tc--media .bm-tc-tekst h2 { font-size: 32px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; margin: 0; }
.uo-site .s-bm-tc--media .bm-tc-tekst .bm-prose p { margin: 0; }
.uo-site .s-bm-tc--media .bm-tc-tekst .bm-prose ul { margin: 20px 0; }

/* ── Hoogte Groot (ontwerp: s-bm-media-groot): 1280 breed in 5:4 met 60px
   erboven; mobiel over de volle breedte, 390×300. Ook voor een film als
   speler in de tegel. ── */
.uo-tegels--h-groot { padding-inline: 0; padding-top: 32px; }
.uo-tegels--h-groot .uo-tegel { aspect-ratio: 13 / 10; }
@media (min-width: 768px) {
    .uo-tegels--h-groot { padding-inline: var(--uo-edge); padding-top: 60px; }
    .uo-tegels--h-groot .uo-tegels-grid { width: min(1280px, 100%); margin-inline: auto; }
    .uo-tegels--h-groot .uo-tegel { aspect-ratio: 5 / 4; }
}
.uo-tegel-speler { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* ── Montuurgalerij (ontwerp: bril-header, optical-carousel en
   andere-brillen-sectie op /brillen/{merk}/) ── */
.uo-montuur { padding-inline: var(--uo-edge); }
.uo-montuur-kop { display: flex; flex-direction: column; align-items: center; padding-block: 30px; text-align: center; }
.uo-site .uo-montuur-kop h1 { margin: 0; font-size: 43.2px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-montuur-terug { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 18px; line-height: 1.5; color: #173d53; text-decoration: none; }
.uo-montuur-terug:hover { text-decoration: underline; text-underline-offset: 4px; }
.uo-montuur-terug svg { width: 22px; height: 22px; flex: none; }
.uo-galerij { width: min(1280px, 100%); margin-inline: auto; padding-bottom: 24px; }
.uo-galerij-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #fff; }
.uo-galerij-viewport::-webkit-scrollbar { display: none; }
.uo-galerij-rij { display: flex; }
.uo-galerij-dia { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.uo-galerij-dia img { display: block; width: 100%; height: 300px; object-fit: contain; background: #fff; }
.uo-galerij-bediening { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 16px; }
.uo-galerij-bediening button { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 1px solid #8b9c9f; border-radius: 0; background: #fff; color: var(--uo-ink); cursor: pointer; }
.uo-galerij-bediening button:hover { background: #edf1ef; }
.uo-galerij-bediening button:disabled { opacity: .35; cursor: default; }
.uo-galerij-bediening button svg { width: 24px; height: 24px; }
.uo-site .uo-galerij-bediening p { min-width: 56px; margin: 0; font-size: 18px; line-height: 1.65; text-align: center; color: var(--uo-ink); }
.uo-galerij :is(button, .uo-galerij-viewport):focus-visible { outline: 3px solid #3b718e; outline-offset: 4px; }
.uo-montuur-meer { width: min(1280px, 100%); margin-inline: auto; padding: 130px 0 100px; text-align: center; }
.uo-site .uo-montuur-meer h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--uo-ink); }
.uo-montuur-meer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin: 30px 0 0; padding: 0; list-style: none; }
.uo-montuur-meer-grid li { position: relative; margin: 0; }
.uo-montuur-meer-grid li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0) 70%, #fff); pointer-events: none; }
.uo-montuur-meer-grid img { display: block; width: 100%; height: auto; object-fit: contain; background: #fff; }
.uo-montuur > :last-child:not(.uo-montuur-meer) { margin-bottom: 100px; }
@media (min-width: 479px) { .uo-montuur-meer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
    .uo-site .uo-montuur-kop h1 { font-size: 48px; }
    .uo-galerij { padding-bottom: 32px; }
    .uo-galerij-dia img { height: clamp(280px, 42vw, 540px); }
    .uo-galerij-bediening { gap: 24px; margin-top: 24px; }
}
@media (min-width: 992px) { .uo-montuur-meer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Montuur op /bril/{slug}/ (single-bril.php): naam onder het merk, de
   andere monturen als links. */
.uo-site .uo-montuur-sub { margin: 4px 0 4px; font-size: 20px; line-height: 1.5; color: var(--uo-copy); }
.uo-montuur-meer-grid--links li::after { content: none; }
.uo-montuur-meer-alle { margin: 32px 0 0; }
.uo-montuur-meer-alle .uo-text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; }

/* Montuurkaart (blok Monturen en de andere monturen op een montuurpagina) */
.uo-bril-kaart { display: flex; flex-direction: column; gap: 12px; color: var(--uo-ink); text-decoration: none; }
.uo-bril-kaart-beeld { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.uo-bril-kaart-beeld img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: contain; transition: opacity .35s var(--uo-ease), transform .5s var(--uo-ease); }
.uo-bril-kaart-zij { opacity: 0; }
.uo-bril-kaart:hover .uo-bril-kaart-zij, .uo-bril-kaart:focus-visible .uo-bril-kaart-zij { opacity: 1; }
.uo-bril-kaart:hover .uo-bril-kaart-beeld img { transform: scale(1.03); }
.uo-bril-kaart-naam { font-size: 18px; line-height: 1.4; text-align: left; }
.uo-bril-kaart:hover .uo-bril-kaart-naam { text-decoration: underline; text-underline-offset: 4px; }
.uo-bril-kaart:focus-visible { outline: 3px solid #3b718e; outline-offset: 4px; }
.uo-montuur-meer-grid--links .uo-bril-kaart-naam { text-align: center; }
@media (prefers-reduced-motion: reduce) { .uo-bril-kaart-beeld img { transition: none; } .uo-bril-kaart:hover .uo-bril-kaart-beeld img { transform: none; } }

/* Blok Monturen: raster van alle monturen van een merk */
.uo-monturen.uo-pt-1 { padding-top: var(--uo-section); }
.uo-monturen.uo-pb-1 { padding-bottom: var(--uo-section); }
.uo-monturen .uo-section-intro { margin-bottom: 40px; }
.uo-monturen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin: 0; padding: 0; list-style: none; }
.uo-monturen-grid li { margin: 0; padding: 0; }
.uo-monturen-grid li::before { content: none; }
.uo-monturen-grid li[hidden] { display: none; }
.uo-monturen-grid .uo-bril-kaart-beeld { background: var(--uo-paper); }
.uo-monturen-grid .uo-bril-kaart-beeld img { mix-blend-mode: multiply; }
@media (min-width: 768px) { .uo-monturen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1101px) { .uo-monturen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Reviews (Thema-instellingen → Unique Optiek → Reviews) ──
   Opbouw als de Kaarten: titel en introductie naast elkaar, kaarten op het
   papiervlak; sterren in de inktkleur. */
.uo-reviews.uo-pt-1 { padding-top: var(--uo-section); }
.uo-reviews.uo-pb-1 { padding-bottom: var(--uo-section); }
.uo-reviews .uo-section-intro { margin-bottom: 40px; }
.uo-reviews-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; font-size: 18px; color: var(--uo-copy); }
.uo-reviews-score strong { color: var(--uo-ink); font-weight: 600; }
.uo-reviews-sterren { display: inline-flex; gap: 2px; margin: 0; color: #b7c2c4; line-height: 1; }
.uo-reviews-sterren .is-aan { color: var(--uo-ink); }
.uo-reviews-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.uo-review { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px; background: var(--uo-paper); color: var(--uo-ink); }
.uo-site .uo-review .uo-review-titel { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--uo-ink); }
.uo-review blockquote { margin: 0; padding: 0; border: 0; background: none; }
.uo-site .uo-review blockquote p { margin: 0; font-size: 18px; font-style: normal; line-height: 1.65; color: var(--uo-copy); }
/* Lees meer: het script zet de hoogte van vijf regels (--uo-regels) en
   animeert max-height; de vervaging onderaan alleen zolang hij dicht is. */
.uo-review-tekst.is-ingekort { overflow: hidden; max-height: var(--uo-regels, 8.25em); transition: max-height .45s cubic-bezier(.22, .61, .36, 1); }
.uo-review-tekst.is-ingekort:not(.is-open) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent); }
.uo-review-lees { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: -4px 0 0; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--uo-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.uo-review-lees[hidden] { display: none; }
.uo-review-lees svg { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.uo-review-lees[aria-expanded="true"] svg { transform: rotate(180deg); }
.uo-review-lees:focus-visible { outline: 2px solid var(--uo-ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .uo-review-tekst.is-ingekort, .uo-review-lees svg { transition: none; }
}
.uo-review-wie { display: flex; flex-direction: column; gap: 2px; margin: auto 0 0; font-size: 18px; line-height: 1.5; }
.uo-review-wie strong { font-weight: 500; color: var(--uo-ink); }
.uo-review-wie a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.uo-review-wie span { font-size: 16px; color: var(--uo-muted); }
.uo-review-antwoord { padding-left: 16px; border-left: 2px solid var(--uo-line); font-size: 16px; line-height: 1.6; color: var(--uo-copy); }
.uo-review-antwoord strong { display: block; margin-bottom: 4px; font-weight: 500; color: var(--uo-ink); }
.uo-site .uo-review-antwoord p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.uo-reviews-acties { margin-top: 32px; }
.uo-review-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.uo-review-winkel { padding: 4px 10px; border: 1px solid var(--uo-line); font-size: 14px; line-height: 1.4; color: var(--uo-copy); background: #fff; }
.uo-review[hidden] { display: none; }
.uo-reviews-meer { margin-top: 32px; }
.uo-blok-melding p { margin: 24px 0; padding: 16px 20px; border-left: 4px solid #b45309; background: #fff7ed; font-size: 16px; color: var(--uo-ink); }
.uo-reviews-teller { font-size: 16px; color: var(--uo-muted); }
@media (min-width: 768px) {
    .uo-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uo-review { padding: 32px; }
}
@media (min-width: 1101px) { .uo-reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }