/*
 * Huisstijl BTH, zakelijke basis (ronde drie, 21 oktober 2026; bron docs/ontwerp/huisstijl-zakelijk.src.html).
 * Laag over de hele site, als laatste geladen. Vastgelegd in ronde twee en drie:
 * - letter Figtree 400 tot 800 op de eigen server, cijfers in tabelstand; koppen 800, strak gespatieerd;
 * - dunne lijnen in plaats van schaduw, rond 10 voor knoppen en velden, 14 voor kaarten;
 * - één warme accentkleur, spaarzaam: het geel van het vertrekbord (donkere tekst erop, 10,4:1);
 * - knop met icoonvak rechts: bij zweven wordt het vak geel en schuift de pijl;
 * - sectiekop met nummer en fijne lijn, kaarten met code en gestippelde voet, stappen met accentstreep,
 *   cijferband, donkere adviesband met raster, witte voet met donkere lijn;
 * - beweging gemiddeld: onthullen bij scrollen, menulijn, kaart tilt 3 px; uit bij "beweging beperken".
 * Het logo blijft Manrope (merkfamilie, tekst als paden).
 */
@font-face { font-family: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900;
	src: url(../fonts/figtree-wght.woff2) format('woff2-variations'), url(../fonts/figtree-wght.woff2) format('woff2'); }

:root {
	--z-f: "Figtree", Arial, Helvetica, sans-serif;
	--z-kop: #15292F; --z-tekst: #203D45; --z-zacht: #4F6472;
	--z-lijn: #DCE7E6; --z-lijn-d: #B9CDCB; --z-stip: #9FB0BA;
	--z-merk: #176B80; --z-merk-d: #125866; --z-diep: #15292F; --z-zand: #F5F9F8;
	--z-acc: #F6C445; --z-acc-d: #E8B22E; --z-acc-zacht: #FDF3D3;
	--z-r: 10px; --z-r-kaart: 14px;
	--z-snel: 150ms; --z-basis: 260ms; --z-ease: cubic-bezier(.4, 0, .2, 1); --z-uit: cubic-bezier(.16, 1, .3, 1);
	--font-sans: var(--z-f); --font-body: var(--z-f); --font-heading: var(--z-f);
	--b-lijn: var(--z-lijn); --b-rond: var(--z-r);
	--bth-ondergrond: #FFFFFF; --bth-ondergrond-diep: #F5F9F8;
	--z-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--z-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--z-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--z-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.1'/%3E%3C/svg%3E");
	--z-kruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	--z-pijl-wit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--z-pijl-donker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315292F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--z-pijl-neer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23125866' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ===================== Letter en basis ===================== */
html body { background: #FFFFFF; color: var(--z-tekst); font-family: var(--z-f); font-variant-numeric: tabular-nums; }
body :where(p, li, a, span, label, input, select, textarea, button, td, th, dt, dd, small, strong, b, address, legend, summary, figcaption, blockquote) { font-family: var(--z-f); }
body :where(h1, h2, h3, h4, h5, h6) { font-family: var(--z-f); color: var(--z-kop); font-weight: 800; letter-spacing: -.025em; }
body h1 { letter-spacing: -.035em; }
.b-pagina h1 { font-size: clamp(2rem, 1.25rem + 2.4vw, 3.25rem); line-height: 1.06; }
.b-pagina h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem); line-height: 1.1; }
.b-pagina h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; }
.b-bovenkop { font-weight: 700; color: var(--z-merk-d); }
::selection { background: var(--z-acc-zacht); color: var(--z-kop); }

/* Label met nummer en fijne lijn: sectiekoppen nummeren zichzelf. */
.b-label { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1 var(--z-f); letter-spacing: .14em; text-transform: uppercase; color: var(--z-zacht); }
.b-label b { font-weight: 800; color: var(--z-kop); }
.b-label::after { content: ""; width: 40px; height: 1px; background: var(--z-lijn-d); }

/* ===================== Kop ===================== */
html body .bth-topbalk { background: var(--z-merk); color: #FFFFFF; } /* donkergroene merkkleur (wens Wilmar, 22 oktober 2026) */
html body .bth-topbalk a { color: #FFFFFF; }
html body .site-header, html body.home .site-header:not(.is-scrolled):not(.scrolled) { background: #FFFFFF; border-bottom: 1px solid var(--z-lijn); box-shadow: none; }
html body .site-header.is-scrolled, html body .site-header.scrolled { box-shadow: 0 10px 30px -24px rgba(21, 41, 47, .5); }
html body .site-header .nav-list a { font: 600 15.5px/1 var(--z-f); color: var(--z-tekst); }
html body .site-header .nav-list a:hover { color: var(--z-kop); }
html body .site-header .nav-list a::after { background: var(--z-kop); height: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--z-basis) var(--z-uit); }
html body .site-header .nav-list a:hover::after { transform: scaleX(1); }
html body .site-header .nav-list .current-menu-item > a, html body .site-header .nav-list a[aria-current] { color: var(--z-kop); }
html body .site-header .nav-list .current-menu-item > a::after, html body .site-header .nav-list a[aria-current]::after { transform: scaleX(1); background: var(--z-acc); }
html body .header-search-btn { border: 1px solid var(--z-lijn); border-radius: var(--z-r); background: #FFFFFF; color: var(--z-merk-d); }
html body .header-search-btn:hover { border-color: var(--z-kop); }

/* ===================== Knoppen: icoonvak rechts ===================== */
html body .btn { font: 700 15px/1.2 var(--z-f); border-radius: var(--z-r); letter-spacing: 0;
	transition: background-color var(--z-basis) var(--z-ease), color var(--z-basis), border-color var(--z-basis), transform var(--z-snel); }
html body .btn:active { transform: translateY(1px); }
html body .btn:focus-visible { outline: 2px solid var(--z-kop); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(246, 196, 69, .5); }
html body .btn:not(.academy-card-sub):not(.btn--no-icon):not([data-icon="none"]):not(:has(> svg, > .btn__icon)) {
	--tegel: 40px; --tegel-r: 7px; --ico-maat: 19px; min-height: 50px; padding: 5px calc(var(--tegel) + 22px) 5px 20px;
	--ico: var(--z-pijl);
}
html body .btn { --tegel-bg: rgba(0, 0, 0, .22) !important; --ico-kleur: #FFFFFF !important; --tegel-bg-h: var(--z-acc) !important; --ico-kleur-h: var(--z-kop) !important; }
html body .btn.btn-primary, html body .b-knop { background: var(--z-merk); color: #FFFFFF; border: 1px solid transparent; }
html body .btn.btn-primary:hover, html body .btn.btn-primary:focus-visible { background: var(--z-merk-d); color: #FFFFFF; }
html body .btn.btn-secondary, html body .btn.btn-ghost, html body .btn.btn-outline { background: #FFFFFF; color: var(--z-kop); border: 1px solid var(--z-stip); }
html body .btn.btn-secondary:not(.btn--no-icon), html body .btn.btn-ghost:not(.btn--no-icon) { --tegel-bg: var(--z-zand) !important; --ico-kleur: var(--z-merk-d) !important; --tegel-bg-h: var(--z-kop) !important; --ico-kleur-h: #FFFFFF !important; }
html body .btn.btn-secondary:hover, html body .btn.btn-ghost:hover { border-color: var(--z-kop); background: #FFFFFF; color: var(--z-kop); }
html body .btn.btn-accent { background: var(--z-acc); color: var(--z-kop); border: 1px solid transparent; --tegel-bg: var(--z-kop) !important; --ico-kleur: #FFFFFF !important; --tegel-bg-h: var(--z-kop) !important; --ico-kleur-h: var(--z-acc) !important; }
html body .btn.btn-accent:hover { background: var(--z-acc-d); color: var(--z-kop); }
html body .btn.btn-licht { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .45); --tegel-bg: rgba(255, 255, 255, .14) !important; --ico-kleur: #FFFFFF !important; --tegel-bg-h: var(--z-acc) !important; --ico-kleur-h: var(--z-kop) !important; }
html body .btn.btn-licht:hover { background: #FFFFFF; color: var(--z-kop); }
.b-tekstlink, .b-pakket__links a, .b-kennislijst a { color: var(--z-merk-d); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(18, 88, 102, .35); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color var(--z-snel); }
.b-tekstlink:hover, .b-pakket__links a:hover, .b-kennislijst a:hover { text-decoration-color: var(--z-acc); }

/* ===================== Zoekveld en formulieren ===================== */
.b-zoekveld .bth-search-field { align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--z-lijn-d); border-radius: var(--z-r); background: #FFFFFF; transition: border-color var(--z-snel), box-shadow var(--z-basis); }
.b-zoekveld .bth-search-field:focus-within { border-color: var(--z-kop); box-shadow: 0 0 0 4px rgba(246, 196, 69, .45); }
.b-zoekveld .bth-search-field input { min-height: 46px; border: 0; padding: 0 12px; background: transparent; }
.b-zoekveld .bth-search-field input:focus-visible { outline: none; }
.b-veld label, .b-veld legend { font: 700 14.5px/1.3 var(--z-f); color: var(--z-kop); }
.b-veld input, .b-veld select, .b-veld textarea,
.b-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .b-form select, .b-form textarea {
	min-height: 50px; padding: 0 14px; border: 1px solid var(--z-lijn-d); border-radius: var(--z-r); color: var(--z-kop); font: 16px var(--z-f);
	transition: border-color var(--z-snel), box-shadow var(--z-snel); }
.b-veld textarea, .b-form textarea { padding: 12px 14px; }
.b-veld select, .b-form select { appearance: none; -webkit-appearance: none; padding-right: 42px; background: #FFFFFF var(--z-pijl-neer) no-repeat right 14px center; }
.b-veld input:hover, .b-veld select:hover, .b-veld textarea:hover, .b-form input:hover, .b-form select:hover, .b-form textarea:hover { border-color: #7FA6A8; }
.b-veld input:focus-visible, .b-veld select:focus-visible, .b-veld textarea:focus-visible,
.b-form input:focus-visible, .b-form select:focus-visible, .b-form textarea:focus-visible { outline: none; border-color: var(--z-merk); box-shadow: 0 0 0 3px rgba(23, 107, 128, .2); }
.b-veld input::placeholder, .b-form input::placeholder, .b-zoekveld input::placeholder { color: #5E7381; }
.b-veld [aria-invalid="true"], .b-form [aria-invalid="true"] { border-color: var(--b-fout); }
.b-hulp { font-size: 13.5px; color: var(--z-zacht); }
.b-veld.b-vink input[type=checkbox], .b-form input[type=checkbox], .b-form input[type=radio] {
	appearance: none; -webkit-appearance: none; flex: 0 0 20px; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0;
	border: 1.5px solid #7FA6A8; border-radius: 5px; background: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
.b-form input[type=radio] { border-radius: 50%; }
.b-veld.b-vink input[type=checkbox]:checked, .b-form input[type=checkbox]:checked { background: var(--z-merk); border-color: var(--z-merk); }
.b-veld.b-vink input[type=checkbox]:checked::after, .b-form input[type=checkbox]:checked::after { content: ""; width: 5px; height: 10px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.b-form input[type=radio]:checked { border: 6px solid var(--z-merk); }
.b-veld.b-vink input:focus-visible, .b-form input[type=checkbox]:focus-visible, .b-form input[type=radio]:focus-visible { outline: 2px solid var(--z-kop); outline-offset: 2px; }
.b-form label:has(> input[type=radio]) { border: 1px solid var(--z-lijn); border-radius: var(--z-r); padding: 12px 14px; transition: border-color var(--z-snel), background-color var(--z-snel); }
.b-form label:has(> input[type=radio]:checked) { border-color: var(--z-merk); background: #F3F8F8; box-shadow: inset 3px 0 0 var(--z-acc); }
.b-filters { background: var(--z-zand); border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); padding: 22px; }
.b-keuzelijst { border-color: var(--z-lijn); border-radius: var(--z-r); box-shadow: 0 24px 48px -22px rgba(21, 41, 47, .35); padding: 6px; }
.b-keuzelijst li { border: 0; border-radius: 7px; }
.b-keuzelijst li:hover, .b-keuzelijst li[aria-selected=true] { background: var(--z-zand); box-shadow: inset 3px 0 0 var(--z-acc); }
html body .bth-typeahead { border: 1px solid var(--z-lijn); border-radius: var(--z-r); box-shadow: 0 24px 48px -22px rgba(21, 41, 47, .35); }
html body .bth-typeahead mark { background: var(--z-acc-zacht); color: inherit; border-bottom: 2px solid var(--z-acc); padding: 0 1px; }

/* ===================== Meldingen: in de pagina, met lijn en pictogram ===================== */
.b-melding, .b-melding.b-goed, .b-klaar, .b-resultaten .b-melding, .b-start .b-melding, .b-vergelijken .b-melding {
	position: relative; padding: 14px 16px 14px 48px; border: 1px solid var(--z-lijn); border-left: 4px solid var(--z-merk); border-radius: var(--z-r); background: #FFFFFF; color: var(--z-tekst); font-size: 15px; }
.b-melding::before, .b-klaar::before { content: ""; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; background: var(--z-merk); -webkit-mask: var(--z-info) center / contain no-repeat; mask: var(--z-info) center / contain no-repeat; }
.b-melding:not(.b-goed):not(.b-resultaten .b-melding):not(.b-start .b-melding):not(.b-vergelijken .b-melding) { border-left-color: var(--b-fout); background: #FDF6F6; }
.b-melding:not(.b-goed):not(.b-resultaten .b-melding):not(.b-start .b-melding):not(.b-vergelijken .b-melding)::before { background: var(--b-fout); -webkit-mask-image: var(--z-kruis); mask-image: var(--z-kruis); }
.b-melding.b-goed, .b-klaar { border-left-color: var(--b-goed); }
.b-melding.b-goed::before, .b-klaar::before { background: var(--b-goed); -webkit-mask-image: var(--z-vink); mask-image: var(--z-vink); }

/* ===================== Niveaulabels en chips ===================== */
.b-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 5px; font: 700 12.5px/1 var(--z-f); letter-spacing: .02em; white-space: nowrap; border: 1px solid #C9DCDA; background: #EEF6F5; color: var(--z-merk-d); }
.b-chip--mbo, .b-chip--mhbo { background: #FFFFFF; color: var(--z-tekst); border-color: var(--z-stip); }
.b-chip--hbo { background: var(--z-merk); color: #FFFFFF; border-color: var(--z-merk); }
.b-chip--post-hbo { background: var(--z-diep); color: #FFFFFF; border-color: var(--z-diep); }
.b-chip--breder { background: #FFFFFF; color: var(--z-merk-d); border: 1px dashed #2E8C9E; }
.b-chip--zacht { background: var(--z-acc-zacht); color: var(--z-kop); border-color: #EBD592; }

/* ===================== Opleidingskaart: code bovenaan, gestippelde voet ===================== */
.b-raster { gap: 24px; }
.b-kaart { position: relative; gap: 0; padding: 0; border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); background: #FFFFFF;
	transition: border-color var(--z-basis), box-shadow var(--z-basis), transform var(--z-basis) var(--z-uit); }
.b-kaart:hover { border-color: var(--z-stip); box-shadow: 0 22px 44px -28px rgba(21, 41, 47, .4); transform: translateY(-3px); }
.b-kaart--eigen { border-color: var(--z-lijn); }
.b-kaart__kop { align-items: center; padding: 18px 22px 0; }
.b-kaart__code { margin-left: auto; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--z-zacht); white-space: nowrap; }
.b-pagina .b-kaart__titel, .b-kaart__titel { padding: 14px 22px 0; font-size: 1.2rem !important; line-height: 1.25; letter-spacing: -.02em; }
.b-kaart__titel a { color: var(--z-kop); }
.b-kaart__titel a:hover { color: var(--z-kop); text-decoration: none; }
.b-kaart__titel a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.b-kaart__titel a:focus-visible { outline: none; }
.b-kaart:has(.b-kaart__titel a:focus-visible) { outline: 2px solid var(--z-kop); outline-offset: 3px; }
.b-kaart__feiten { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 10px 0 0; padding: 0 22px; font-size: 13px; color: var(--z-zacht); }
.b-kaart__feiten dt { font-weight: 400; }
.b-kaart__feiten dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--z-kop); }
.b-kaart__feiten div { display: flex; flex-direction: column-reverse; }
.b-kaart__intro { margin: 10px 0 0; padding: 0 22px; font-size: 15px; color: var(--z-tekst); -webkit-line-clamp: 2; }
.b-kaart__voet { align-items: flex-end; margin-top: auto; padding: 16px 22px 18px; border-top: 1px dotted var(--z-stip); }
.b-kaart__intro, .b-kaart__feiten { margin-bottom: 18px; }
.b-kaart__feiten:has(+ .b-kaart__intro) { margin-bottom: 0; }
.b-kaart__prijs { display: grid; line-height: 1.1; font-weight: 400; }
.b-kaart__prijs b { font: 800 24px/1.1 var(--z-f); color: var(--z-kop); letter-spacing: -.02em; }
.b-kaart__prijs b small { font-size: 12px; font-weight: 700; color: var(--z-zacht); letter-spacing: 0; margin-left: 2px; }
.b-kaart__incl { font-size: 12.5px; color: var(--z-zacht); margin-top: 4px; }
.b-kaart__elders { padding: 0 22px 16px; margin-top: -6px; font-size: 13px; }
.b-vergelijk-knop { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; height: 36px; padding: 0 12px; border: 1px solid var(--z-lijn-d); border-radius: 8px; background: #FFFFFF; color: var(--z-merk-d); font: 700 13.5px/1 var(--z-f); cursor: pointer; transition: border-color var(--z-snel), background-color var(--z-snel), color var(--z-snel); }
.b-vergelijk-knop::before, .b-vergelijk-knop.is-gekozen::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--z-plus) center / contain no-repeat; mask: var(--z-plus) center / contain no-repeat; }
.b-vergelijk-knop:hover { border-color: var(--z-kop); }
.b-vergelijk-knop.is-gekozen, .b-vergelijk-knop[aria-pressed="true"] { background: var(--z-diep); border-color: var(--z-diep); color: #FFFFFF; }
.b-vergelijk-knop.is-gekozen::before, .b-vergelijk-knop[aria-pressed="true"]::before { background: var(--z-acc); -webkit-mask-image: var(--z-vink); mask-image: var(--z-vink); }
.b-vergelijk-knop:focus-visible { outline: 2px solid var(--z-kop); outline-offset: 2px; }
.b-aantal { font-weight: 700; color: var(--z-kop); }

/* ===================== Secties: kop met lijn ===================== */
/* Geen sectienummers (01, 02, ...) meer: die lazen als stappen terwijl het alleen een volgorde is. Wilmar, 3 november 2026. */
.b-sectie, .b-pakket__sectie { padding: 72px 0; }
.b-sectie--zacht { background: var(--z-zand); }
.b-sectie > .container > h2, .b-pakket__sectie > .container > h2, .z-sectiekop > h2 { position: relative; margin: 0 0 40px; padding-top: 22px; }
.z-sectiekop { display: flex; align-items: flex-start; gap: 18px; }
.z-sectiekop > .z-tegel { margin-top: 17px; }
.b-pakket__raster > .z-sectiekop > h2 { margin: 0; }
.b-pakket__raster > .z-sectiekop { margin-bottom: 24px; }
.b-sectie > .container::before, .b-pakket__sectie > .container::before { content: ""; display: block; height: 1px; background: var(--z-kop); grid-column: 1 / -1; }
.b-pakket__raster { gap: 0 56px; }
@media (min-width: 901px) { .b-pakket__raster { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.b-pakket__raster > .b-pakket__tekst { max-width: 46rem; }
.b-pagina .b-pakket__raster > h2, .b-pagina .b-pakket__raster > .z-sectiekop > h2 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; }
.b-pakket__raster > h2 { margin: 0; }
.b-pakket__raster > .b-pakket__tekst { padding-top: 22px; }
.b-pakket__tekst, .b-pakket__tekst p, .b-pakket__tekst li { font-size: 16.5px; color: var(--z-tekst); }
.b-pakket__tekst ul:not(.b-pakket__links) { list-style: none; padding: 0; display: grid; gap: 8px; }
.b-pakket__tekst ul:not(.b-pakket__links) li { position: relative; padding-left: 26px; }
.b-pakket__tekst ul:not(.b-pakket__links) li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; background: var(--b-goed); -webkit-mask: var(--z-vink) center / contain no-repeat; mask: var(--z-vink) center / contain no-repeat; }
.b-pakket__tabel table { border-top: 1px solid var(--z-kop); }
.b-pakket__tabel th { font: 700 12px/1.3 var(--z-f); letter-spacing: .12em; color: var(--z-zacht); }
.b-pakket__tabel td, .b-pakket__tabel th { border-bottom-color: var(--z-lijn); }

/* Kaarten in een sectie (###-tussenkoppen). Zonder nummer, lijn of accentstreep
   (3 november 2026): het zijn keuzes naast elkaar, geen opeenvolgende stappen. */
.b-routes--tekst { gap: 40px; margin-top: 32px; }
.b-routes--tekst .b-route { position: relative; padding: 0; border: 0; border-radius: 0; background: none; }
.b-pagina .b-routes--tekst .b-route h3 { font-size: 1.25rem; margin: 0 0 6px; }
.b-routes--tekst .b-route p { font-size: 15.5px; }

/* Donkere adviesband met raster: de laatste sectie met een knop. */
.b-sectie--advies { background: #FFFFFF; }
.b-sectie--advies > .container::before { display: none; }
.b-adviesband { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px 48px; align-items: center; padding: 44px 48px; border-radius: var(--z-r-kaart); color: #D3E6E4;
	background-color: var(--z-diep); background-image: linear-gradient(rgba(211, 230, 228, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(211, 230, 228, .05) 1px, transparent 1px); background-size: 32px 32px; }
.b-pagina .b-adviesband > h2, .b-pagina .b-adviesband > .z-sectiekop > h2 { color: #FFFFFF; margin: 0; padding-top: 0; }
.b-adviesband .b-pakket__tekst, .b-adviesband .b-pakket__tekst p { color: #D3E6E4; }
html body .b-adviesband .btn.btn-primary { background: var(--z-acc); color: var(--z-kop); --tegel-bg: var(--z-kop) !important; --ico-kleur: #FFFFFF !important; --tegel-bg-h: var(--z-kop) !important; --ico-kleur-h: var(--z-acc) !important; }
html body .b-adviesband .btn.btn-primary:hover { background: var(--z-acc-d); color: var(--z-kop); }
.b-adviesblok { position: relative; margin-top: 56px; padding: 44px 48px; border-radius: var(--z-r-kaart); color: #D3E6E4;
	background-color: var(--z-diep); background-image: linear-gradient(rgba(211, 230, 228, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(211, 230, 228, .05) 1px, transparent 1px); background-size: 32px 32px; }
.b-adviesblok h2, .b-adviesblok h3 { color: #FFFFFF; }
.b-adviesblok p { color: #D3E6E4; }
.b-adviesblok a:not(.btn) { color: #FFFFFF; }
html body .b-adviesblok .btn.btn-primary { background: var(--z-acc); color: var(--z-kop); --tegel-bg: var(--z-kop) !important; --ico-kleur: #FFFFFF !important; --tegel-bg-h: var(--z-kop) !important; --ico-kleur-h: var(--z-acc) !important; }
html body .b-adviesblok .btn.btn-primary:hover { background: var(--z-acc-d); color: var(--z-kop); }
html body .b-adviesblok .btn.btn-secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .45); --tegel-bg: rgba(255, 255, 255, .14) !important; --ico-kleur: #FFFFFF !important; --tegel-bg-h: var(--z-acc) !important; --ico-kleur-h: var(--z-kop) !important; }

/* Cijferband */
.b-cijferband { padding: 0 0 8px; }
.b-cijferband__rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--z-lijn); border-bottom: 1px solid var(--z-lijn); }
.b-cijferband__rij > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 26px 22px; border-right: 1px solid var(--z-lijn); }
.b-cijferband__rij > div:last-child { border-right: 0; }
.b-cijferband dd { margin: 0; font: 800 40px/1 var(--z-f); letter-spacing: -.03em; color: var(--z-kop); }
.b-cijferband dt { margin-top: 8px; font-size: 14px; color: var(--z-zacht); }

/* ===================== Opleidingspagina ===================== */
.b-opleiding__kop { background: var(--z-zand); border-bottom: 1px solid var(--z-lijn); }
.b-prijsblok { padding: 24px; border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); box-shadow: 0 20px 40px -28px rgba(21, 41, 47, .35); }
.b-prijsblok__prijs { font: 800 34px/1.1 var(--z-f); letter-spacing: -.02em; color: var(--z-kop); }
.b-prijsblok__prijs small { font-size: 12px; font-weight: 700; color: var(--z-zacht); letter-spacing: 0; }
.b-feiten { border-top: 1px dotted var(--z-stip); border-bottom: 1px dotted var(--z-stip); padding: 14px 0; }
.b-feiten dt { color: var(--z-zacht); font-size: 14px; }
.b-feiten dd { color: var(--z-kop); }
.b-vinklijst li::before { left: 0; top: .3em; width: 18px; height: 18px; border: 0; transform: none; background: var(--b-goed); -webkit-mask: var(--z-vink) center / contain no-repeat; mask: var(--z-vink) center / contain no-repeat; }
.b-tabel th { font: 700 12px/1.3 var(--z-f); letter-spacing: .12em; text-transform: uppercase; color: var(--z-zacht); }
.b-tabel th, .b-tabel td { border-bottom-color: var(--z-lijn); }
.b-advies { background: var(--z-zand); border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); }

/* Kruimelpad, paginering, vergelijken */
html body .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--z-zacht); }
html body .breadcrumbs li:not(:last-child)::after, html body .hero .breadcrumbs li:not(:last-child)::after, html body .breadcrumbs li::before { content: none; }
html body .breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--z-stip); }
html body .breadcrumbs [aria-current] { color: var(--z-zacht); }
html body .breadcrumbs a { color: var(--z-merk-d); font-weight: 600; }
.b-kruimels a { color: var(--z-merk-d); font-weight: 600; }
.b-paginering a, .b-paginering span { min-width: 40px; min-height: 40px; border-color: var(--z-lijn); color: var(--z-tekst); font-weight: 700; transition: border-color var(--z-snel); }
.b-paginering a:hover { border-color: var(--z-kop); }
.b-paginering [aria-current] { background: var(--z-diep); border-color: var(--z-diep); color: #FFFFFF; }
.b-vergelijkbalk { background: var(--z-diep); box-shadow: none; border-top: 2px solid var(--z-acc); }
html body .b-vergelijkbalk .btn.btn-primary { background: var(--z-acc); color: var(--z-kop); --tegel-bg: var(--z-kop) !important; --ico-kleur: #FFFFFF !important; --tegel-bg-h: var(--z-kop) !important; --ico-kleur-h: var(--z-acc) !important; }
.b-tabelscroll { border-color: var(--z-lijn); border-radius: var(--z-r-kaart); }
.b-vergelijktabel thead th { background: var(--z-zand); color: var(--z-kop); }
.b-vergelijktabel th, .b-vergelijktabel td { border-bottom-color: var(--z-lijn); }

/* ===================== Voet: wit met donkere lijn ===================== */
html body .site-footer { background: #FFFFFF; border-top: 1px solid var(--z-kop); color: var(--z-tekst); }
html body .site-footer .footer-main { background: #FFFFFF; padding-top: 56px; }
html body .site-footer .footer-heading { font: 700 12.5px/1 var(--z-f); letter-spacing: .14em; text-transform: uppercase; color: var(--z-zacht); }
html body .site-footer .footer-contact__link { border: 1px solid var(--z-lijn); border-radius: var(--z-r); background: #FFFFFF; box-shadow: none; transition: border-color var(--z-snel); }
html body .site-footer .footer-contact__link:hover { border-color: var(--z-kop); }
html body .site-footer .footer-contact__icon { border-radius: 7px; background: var(--z-zand); color: var(--z-merk-d); }
html body .site-footer .footer-bottom { background: #FFFFFF; border-top: 1px solid var(--z-lijn); color: var(--z-zacht); }
html body .site-footer .footer-bottom a { color: var(--z-tekst); text-decoration: none; }
html body .site-footer a:hover { color: var(--z-kop); text-decoration: underline; text-decoration-color: var(--z-acc); text-underline-offset: 4px; }

/* ===================== Beweging: onthullen bij scrollen (zakelijk.js zet html.z-onthul) ===================== */
html.z-onthul .z-o { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--z-uit), transform .7s var(--z-uit); }
html.z-onthul .z-o.is-zichtbaar { opacity: 1; transform: none; }
html.z-onthul .b-kaart.z-o.is-zichtbaar:hover { transform: translateY(-3px); }

@media (max-width: 1024px) {
	.b-cijferband__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.b-cijferband__rij > div:nth-child(2) { border-right: 0; }
	.b-cijferband__rij > div:nth-child(-n+2) { border-bottom: 1px solid var(--z-lijn); }
	.b-adviesband { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.b-pakket__raster > .b-pakket__tekst { padding-top: 0; }
}
@media (max-width: 640px) {
	.b-sectie, .b-pakket__sectie { padding: 56px 0; }
	.b-sectie > .container > h2, .b-pakket__sectie > .container > h2 { margin-bottom: 24px; }
	.b-routes--tekst { gap: 32px; }
	.b-adviesband, .b-adviesblok { padding: 32px 22px; }
	.b-cijferband dd { font-size: 32px; }
	.b-cijferband__rij > div { padding: 20px 14px; }
	.b-zoekveld .bth-search-field { flex-direction: column; align-items: stretch; padding: 0; border: 0; box-shadow: none; }
	.b-zoekveld .bth-search-field:focus-within { box-shadow: none; }
	.b-zoekveld .bth-search-field input { border: 1px solid var(--z-lijn-d); border-radius: var(--z-r); }
	.b-zoekveld .bth-search-field input:focus-visible { outline: 3px solid var(--z-merk); outline-offset: 1px; }
}
@media (prefers-reduced-motion: reduce) {
	html.z-onthul .z-o { opacity: 1; transform: none; transition: none; }
	.b-kaart, .b-kaart:hover { transition: none; transform: none; }
	html body .btn::after { transition: none; }
}


/* ===================== Bouwstenen (inc/huisstijl.php) ===================== */
/* Icoontegel */
.z-tegel { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--z-r); background: #FFFFFF; border: 1px solid var(--z-lijn); color: var(--z-merk-d); }
.z-tegel svg { width: 22px; height: 22px; stroke-width: 1.8; }
.b-sectie--zacht .z-tegel { background: #FFFFFF; }
.z-tegel--donker { background: var(--z-diep); border-color: var(--z-diep); color: var(--z-acc); }
.z-tegel--acc { background: var(--z-acc); border-color: var(--z-acc); color: var(--z-kop); }

/* Paginakop met paneel */
.b-pagina:has(> .z-kop:first-child) { padding-top: var(--header-height, 104px); }
.z-kop { position: relative; padding: 56px 0 64px; background: #FFFFFF; border-bottom: 1px solid var(--z-lijn); overflow: hidden; }
.z-kop::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 42%; pointer-events: none; z-index: 0;
	background-image: linear-gradient(var(--z-lijn) 1px, transparent 1px), linear-gradient(90deg, var(--z-lijn) 1px, transparent 1px); background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); opacity: .55; }
.z-kop__raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.z-kop--paneel .z-kop__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.z-kop .breadcrumbs { margin-bottom: 22px; }
.z-kop__label { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.z-kop__label .z-tegel { width: 56px; height: 56px; }
.z-kop__label .z-tegel svg { width: 26px; height: 26px; }
.b-pagina .z-kop h1 { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.75rem); line-height: 1.03; letter-spacing: -.035em; margin: 0; max-width: 18ch; }
.z-kop__intro { max-width: 36rem; margin: 20px 0 0; font-size: 1.16rem; line-height: 1.65; color: var(--z-tekst); }
.z-kop .b-pakket__knop, .z-kop .z-knoppen { margin: 28px 0 0; }
.z-kop .b-zoekveld { max-width: 38rem; margin: 28px 0 0; }

/* Donker paneel, in de lijn van het vertrekbord */
.z-paneel { position: relative; padding: 20px 22px 18px; border-radius: var(--z-r-kaart); color: #D3E6E4; background: #25282B; box-shadow: 0 40px 70px -40px rgba(21, 41, 47, .7); }
.z-paneel__kop { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.z-paneel__titel { display: flex; align-items: center; gap: 10px; font: 800 13px/1 var(--z-f); letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; }
.z-paneel__titel i { width: 8px; height: 8px; border-radius: 50%; background: var(--z-acc); box-shadow: 0 0 0 4px rgba(246, 196, 69, .2); animation: z-knipper 2.4s ease-in-out infinite; }
.z-paneel__rijen { margin: 0; }
.z-paneel__rijen { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 20px; }
.z-paneel__rijen > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.z-paneel__rijen > div:last-child { border-bottom: 0; }
.z-paneel__rijen dd { order: -1; margin: 0; white-space: nowrap; font: 800 24px/1.1 var(--z-f); letter-spacing: -.02em; color: var(--z-acc); font-variant-numeric: tabular-nums; }
.z-paneel__rijen dd a { color: inherit; text-decoration: none; }
.z-paneel__rijen dd a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.z-paneel__rijen dt { font-size: 14.5px; color: #D3E6E4; overflow-wrap: anywhere; }
.z-paneel__voet { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
@keyframes z-knipper { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.z-keurmerkvak { padding: 26px; border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); background: #FFFFFF; box-shadow: 0 30px 60px -40px rgba(21, 41, 47, .45); }
.z-keurmerkvak .b-label { margin: 0 0 16px; }
.z-keurmerkvak img { width: 100%; height: auto; }

/* Knoppenrij */
.z-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Verder lezen */
.z-verder { background: var(--z-zand); }
.z-verder__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.z-verder__kaart { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); background: #FFFFFF; color: var(--z-tekst); text-decoration: none; transition: border-color var(--z-basis), box-shadow var(--z-basis), transform var(--z-basis) var(--z-uit); }
.z-verder__kaart::after { content: ""; position: absolute; right: 22px; top: 28px; width: 20px; height: 20px; background: var(--z-zacht); -webkit-mask: var(--z-pijl) center / contain no-repeat; mask: var(--z-pijl) center / contain no-repeat; transition: transform var(--z-basis) var(--z-uit), background-color var(--z-snel); }
.z-verder__kaart:hover { border-color: var(--z-stip); box-shadow: 0 22px 44px -28px rgba(21, 41, 47, .4); transform: translateY(-3px); }
.z-verder__kaart:hover::after { transform: translateX(4px); background: var(--z-kop); }
.z-verder__kaart b { margin-top: 8px; font: 800 1.2rem/1.25 var(--z-f); letter-spacing: -.02em; color: var(--z-kop); }
.z-verder__kaart span:not(.z-tegel) { font-size: 15px; }
.z-slot + .z-verder { border-top: 0; }

@media (max-width: 1024px) {
	.z-kop--paneel .z-kop__raster { grid-template-columns: minmax(0, 1fr); }
	.z-verder__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.z-kop { padding: 32px 0 40px; }
	.z-kop::after { width: 100%; opacity: .3; }
	.z-sectiekop > .z-tegel { display: none; }
	.z-paneel__rijen dd { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .z-paneel__titel i { animation: none; } .z-verder__kaart, .z-verder__kaart::after { transition: none; } }

/* ===================== Voet (footer.php) ===================== */
html body .z-voet { padding: 64px 0 28px; background: #FFFFFF; border-top: 1px solid var(--z-kop); font-size: 15px; }
.z-voet__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.25fr; gap: 40px; }
.z-voet__merk .footer-logo, .z-voet__merk img, .z-voet__merk svg { height: 56px; width: auto; margin-left: -6px; }
.z-voet__merk p { margin: 14px 0 12px; max-width: 22rem; color: var(--z-tekst); }
.z-voet__merk address { font-style: normal; color: var(--z-zacht); font-size: 14px; line-height: 1.6; }
html body .z-voet .z-voet__kop { margin: 0 0 16px; font: 700 12.5px/1 var(--z-f); letter-spacing: .14em; text-transform: uppercase; color: var(--z-zacht); }
.z-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html body .z-voet a { color: var(--z-tekst); text-decoration: none; }
html body .z-voet a:hover { color: var(--z-kop); text-decoration: underline; text-decoration-color: var(--z-acc); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.z-voet__contact a { display: flex; gap: 12px; align-items: flex-start; }
.z-voet__contact svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 8px; background: var(--z-zand); color: var(--z-merk-d); }
.z-voet__contact b { display: block; font-weight: 700; color: var(--z-kop); overflow-wrap: anywhere; }
.z-voet__contact small { display: block; font-size: 13px; color: var(--z-zacht); }
.z-voet__keurmerk { margin-top: 20px; max-width: 220px; }
.z-voet__keurmerk img { width: 100%; height: auto; }
.z-voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--z-lijn); font-size: 13.5px; color: var(--z-zacht); }
.z-voet__juridisch { display: flex; flex-wrap: wrap; gap: 6px 18px; }
html body .z-voet .z-voet__onder a { color: var(--z-zacht); }
@media (max-width: 1024px) { .z-voet__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .z-voet__raster { grid-template-columns: minmax(0, 1fr); gap: 32px; } .z-voet__onder { flex-direction: column; } }

/* Startpagina: uitgelichte opleidingen en kwaliteitsblok */
.z-uitgelicht { margin-top: 48px; }
.z-uitgelicht > .b-label { margin: 0 0 18px; }
.z-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.z-uitgelicht__meer { margin: 40px 0 0; } /* gelijk aan de ruimte tussen kop en kaarten (wens Wilmar, 24 oktober 2026) */
.z-kwaliteit__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
@media (max-width: 1024px) { .z-raster-3 { grid-template-columns: minmax(0, 1fr); } .z-kwaliteit__raster { grid-template-columns: minmax(0, 1fr); } }

/* Opleidingen: filterbalk en filterchips */
.z-filterbalk { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 14px; margin-top: -36px; position: relative; z-index: 2; background: #FFFFFF; box-shadow: 0 30px 60px -40px rgba(21, 41, 47, .45); }
/* Vakgebiedsite: twee keuzelijsten, niveau en opleidingsduur (geen vakgebied- en prijsfilter). :where houdt de specificiteit gelijk, zodat de smallere schermen hieronder blijven gelden. */
.z-filterbalk:where(.z-filterbalk--dochter) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.25fr) auto; }
.z-filterbalk .b-veld { margin: 0; }
.z-filterbalk .b-veld--breed { grid-column: auto; }
.z-filterbalk .b-hulp { position: absolute; margin-top: 56px; display: none; }
.z-filterbalk .b-filters__knoppen { grid-column: auto; }
/* Knop zo breed als zijn tekst: de vaste knopbreedte kapte de gekozen filterwaarden af (25 oktober 2026). */
html body .z-filterbalk .b-filters__knoppen .btn { min-width: 0; }
.z-filterchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 18px 0 0; }
.z-filterchip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 14px; border-radius: var(--z-r); background: var(--z-diep); color: #FFFFFF; font: 600 14.5px/1 var(--z-f); text-decoration: none; transition: background-color var(--z-snel); }
.z-filterchip svg { width: 16px; height: 16px; color: var(--z-acc); }
.z-filterchip:hover { background: var(--z-merk-d); }
.b-resultaten .b-aantal { margin: 28px 0 18px; font-size: 15px; }
/* Moeder, breed scherm: zoekveld en knop bovenaan, de vier filters eronder over de volle breedte, zodat
   gekozen waarden als "Tot en met 3 maanden" niet worden afgekapt (25 oktober 2026). */
@media (min-width: 1181px) {
	.z-filterbalk:not(.z-filterbalk--dochter):not(.z-filterbalk--vak) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.z-filterbalk:not(.z-filterbalk--dochter):not(.z-filterbalk--vak) .b-veld--breed { grid-column: 1 / 4; }
	.z-filterbalk:not(.z-filterbalk--dochter):not(.z-filterbalk--vak) .b-filters__knoppen { grid-column: 4; grid-row: 1; }
	.z-filterbalk:not(.z-filterbalk--dochter):not(.z-filterbalk--vak) .b-filters__knoppen .btn { width: 100%; }
}
@media (max-width: 1180px) { .z-filterbalk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .z-filterbalk .b-veld--breed, .z-filterbalk .b-filters__knoppen { grid-column: 1 / -1; } }
@media (max-width: 640px) { .z-filterbalk { grid-template-columns: minmax(0, 1fr); margin-top: 24px; } }

/* Opleidingspagina */
.z-opkop { padding: 40px 0 56px; background: #FFFFFF; position: relative; overflow: hidden; }
.z-opkop::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 45%; pointer-events: none;
	background-image: linear-gradient(var(--z-lijn) 1px, transparent 1px), linear-gradient(90deg, var(--z-lijn) 1px, transparent 1px); background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); opacity: .5; }
.z-opkop .container { position: relative; z-index: 1; }
/* Opleidingspagina: het raster loopt over de grens van de kop door in de inhoud en vloeit daar weg,
   zonder lijn tussen kop en inhoud (wens Wilmar, 24 oktober 2026). Twee maskers die samen gelden:
   van links in, en naar onderen uit. De inhoud ligt erboven. */
html body .b-opleiding__kop.z-opkop { background: #FFFFFF; border-bottom: 0; overflow: visible; z-index: 0; }
.b-opleiding__kop.z-opkop::after { inset: 0 0 -320px auto; z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%), linear-gradient(180deg, #000 0, #000 calc(100% - 520px), transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 40%), linear-gradient(180deg, #000 0, #000 calc(100% - 520px), transparent 100%);
	mask-composite: intersect; }
.b-opleiding__kop.z-opkop + .b-opleiding__body, .b-opleiding__kop.z-opkop ~ .b-opleiding__body { position: relative; z-index: 1; }
/* Geen harde lijn meer onder de feitenrij: die las als afscheiding tussen kop en inhoud. De rij eindigt in een
   lijn die naar rechts wegvloeit, en de inhoud sluit dichter aan (wens Wilmar, 24 oktober 2026). */
.b-opleiding__kop .z-feitenrij:not(.z-feitenrij--blok) { border-bottom: 0; position: relative; }
.b-opleiding__kop .z-feitenrij:not(.z-feitenrij--blok)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--z-lijn), transparent); }
.b-opleiding__kop.z-opkop { padding-bottom: 24px; }
.b-opleiding__kop.z-opkop ~ .b-opleiding__body { padding-top: 24px; }
/* Geen scheidingslijnen tussen de secties (Voor wie, Instapkennis, Wat je leert, ...): de witruimte scheidt
   (wens Wilmar, 24 oktober 2026). */
.b-opleiding .b-opleiding__hoofd > .b-blok { border-top: 0; }
.b-opleiding .b-opleiding__hoofd > .b-blok:first-child { padding-top: 0; }
.z-opkop__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 16px; }
.z-vakchip { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--z-lijn-d); background: #FFFFFF; color: var(--z-merk-d); font: 700 12.5px/1 var(--z-f); text-decoration: none; }
.z-vakchip svg { width: 15px; height: 15px; }
.z-vakchip:hover { border-color: var(--z-kop); }
.b-pagina .z-opkop h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.05; }
.z-feitenrij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 0; border-top: 1px solid var(--z-lijn); border-bottom: 1px solid var(--z-lijn); }
.z-feitenrij > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 16px 16px 16px 0; }
.z-feitenrij > div + div { padding-left: 16px; border-left: 1px solid var(--z-lijn); }
.z-feitenrij dd { margin: 0; font: 800 18px/1.2 var(--z-f); color: var(--z-kop); letter-spacing: -.01em; }
.z-feitenrij dt { margin-top: 6px; font-size: 13px; color: var(--z-zacht); }
/* Feitenrij onder de titel: label boven, waarde eronder (wens Wilmar, 24 oktober 2026). Het blok met grote cijfers blijft waarde boven. */
.z-feitenrij:not(.z-feitenrij--blok) > div { flex-direction: column; justify-content: flex-start; }
.z-feitenrij:not(.z-feitenrij--blok) dt { margin: 0 0 6px; }
.z-feitenrij--blok { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 18px; }
.z-feitenrij--blok dd { font-size: 32px; letter-spacing: -.03em; }
.b-opleiding__body { padding-top: 56px; padding-bottom: 24px; gap: 56px; }
.b-opleiding .b-blok { margin-bottom: 48px; padding-top: 24px; border-top: 1px solid var(--z-kop); }
.b-opleiding .b-blok .z-sectiekop { align-items: center; margin-bottom: 18px; }
.b-opleiding .b-blok .z-sectiekop > .z-tegel { margin-top: 0; }
.b-opleiding .b-blok .z-sectiekop > h2 { margin: 0; padding: 0; font-size: 1.6rem; }
.b-opleiding #leerdoelen .b-vinklijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.z-pakketten { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 10px; margin: 14px 0; padding: 0; }
.z-pakketten li { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--z-lijn); border-radius: var(--z-r); background: #FFFFFF; transition: border-color var(--z-snel), box-shadow var(--z-snel); }
.z-pakketten li:hover { border-color: var(--z-merk); box-shadow: inset 3px 0 0 var(--z-acc); }
.z-pakketten b { font: 800 20px/1.1 var(--z-f); color: var(--z-kop); }
.z-pakketten span { font-weight: 700; color: var(--z-merk-d); }
.z-pakketten small { font-size: 12.5px; color: var(--z-zacht); }
.b-opleiding .b-advies { border-top: 0; padding-top: 22px; }
.b-opleiding .b-advies h2 { font-size: 1.5rem; }
@media (max-width: 1024px) { .z-feitenrij { grid-template-columns: repeat(2, minmax(0, 1fr)); } .z-feitenrij > div:nth-child(3) { padding-left: 0; border-left: 0; } .z-feitenrij > div:nth-child(-n+2) { border-bottom: 1px solid var(--z-lijn); } }
@media (max-width: 640px) { .b-opleiding #leerdoelen .b-vinklijst { grid-template-columns: minmax(0, 1fr); } .z-feitenrij--blok { grid-template-columns: minmax(0, 1fr); } .z-feitenrij--blok > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--z-lijn); } }

/* Verzendknop in formulieren (terugbellen, offerte, herkansing) in de knopstijl */
html body .b-form button[type=submit], html body .b-knop { position: relative; min-height: 50px; padding: 5px 62px 5px 20px; border-radius: var(--z-r); font: 700 15px/1.2 var(--z-f); background: var(--z-merk); color: #FFFFFF; transition: background-color var(--z-basis); }
html body .b-form button[type=submit]::after, html body .b-knop::after { content: ""; position: absolute; right: 5px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 7px; background: rgba(0, 0, 0, .22) var(--z-pijl-wit) center / 19px no-repeat; transition: background-color var(--z-basis); }
html body .b-form button[type=submit]:hover, html body .b-knop:hover { background: var(--z-merk-d); }
html body .b-form button[type=submit]:hover::after, html body .b-knop:hover::after { background-color: var(--z-acc); background-image: var(--z-pijl-donker); }

/* Vakgebiedpagina: niveaus als filterchips */
.z-filterbalk--vak { grid-template-columns: minmax(0, 1fr) auto; }
.z-niveaus { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.z-niveau { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--z-r); border: 1px solid var(--z-lijn-d); background: #FFFFFF; color: var(--z-kop); font: 600 14.5px/1 var(--z-f); text-decoration: none; transition: border-color var(--z-snel), background-color var(--z-snel), color var(--z-snel); }
.z-niveau span { font-size: 12.5px; font-weight: 700; color: var(--z-zacht); font-variant-numeric: tabular-nums; }
.z-niveau:hover { border-color: var(--z-kop); }
.z-niveau[aria-current] { background: var(--z-diep); border-color: var(--z-diep); color: #FFFFFF; }
.z-niveau[aria-current] span { color: var(--z-acc); }
.b-vakoverzicht .b-index { padding-top: 56px; }

/* Persoonlijk advies: kanalen */
.z-kanalen__raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.z-kanalen__links { display: grid; gap: 24px; }
.z-kanaal { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px; border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); background: #FFFFFF; color: var(--z-tekst); text-decoration: none; transition: border-color var(--z-basis), box-shadow var(--z-basis), transform var(--z-basis) var(--z-uit); }
a.z-kanaal:hover { border-color: var(--z-stip); box-shadow: 0 22px 44px -28px rgba(21, 41, 47, .4); transform: translateY(-3px); }
.z-kanaal .z-tegel { margin-bottom: 8px; }
.z-kanaal b { font: 800 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.15 var(--z-f); letter-spacing: -.02em; color: var(--z-kop); overflow-wrap: anywhere; }
.z-kanaal--form { background: var(--z-zand); }
.b-pagina .z-kanaal--form h2 { margin: 0 0 8px; font-size: 1.5rem; }
.z-kanaal--form .b-form { margin: 0; }

/* Vergelijken: drie vakjes */
.z-vakjes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 22px; border-radius: var(--z-r-kaart); background: #25282B; box-shadow: 0 40px 70px -40px rgba(21, 41, 47, .7); }
.z-vakjes span { display: grid; place-items: center; height: 96px; border: 1px dashed rgba(211, 230, 228, .4); border-radius: var(--z-r); font: 800 32px/1 var(--z-f); color: var(--z-acc); }
.z-vakjes p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14.5px; color: #D3E6E4; }
@media (max-width: 900px) { .z-kanalen__raster { grid-template-columns: minmax(0, 1fr); } }
.b-sectie > .container:not(:has(> h2, > .z-sectiekop, > .b-adviesband))::before { display: none; }

/* Juridische en gewone pagina's (page.php) */
.z-document__raster { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 56px; align-items: start; }
.z-inhoud { position: sticky; top: calc(var(--header-height, 104px) + 24px); max-height: calc(100vh - var(--header-height, 104px) - 48px); overflow: auto; padding: 20px; border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); background: var(--z-zand); }
.z-inhoud .b-label { margin: 0 0 12px; }
.z-inhoud ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }
.z-inhoud a { display: block; padding: 6px 8px; border-radius: 6px; font-size: 14px; line-height: 1.35; color: var(--z-tekst); text-decoration: none; }
.z-inhoud a:hover { background: #FFFFFF; color: var(--z-kop); box-shadow: inset 3px 0 0 var(--z-acc); }
.z-document__tekst { max-width: 46rem; }
.z-document__tekst h2 { scroll-margin-top: calc(var(--header-height, 104px) + 24px); margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--z-lijn); font-size: 1.45rem; }
.z-document__tekst h2:first-of-type { margin-top: 24px; }
.z-document__tekst p, .z-document__tekst li { font-size: 16px; line-height: 1.7; color: var(--z-tekst); }
.z-document__tekst .legal-intro { font-size: 1.1rem; color: var(--z-kop); }
.z-document__tekst .legal-intro--meta { display: inline-block; padding: 6px 12px; border-radius: 6px; background: var(--z-acc-zacht); font-size: 14px; font-weight: 700; color: var(--z-kop); }
.z-document__tekst table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; border-top: 1px solid var(--z-kop); font-size: 15px; }
.z-document__tekst th { text-align: left; font: 700 12px/1.3 var(--z-f); letter-spacing: .12em; text-transform: uppercase; color: var(--z-zacht); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--z-lijn); }
.z-document__tekst td { vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--z-lijn); }
.z-document__tekst td:first-child { width: 30%; font-weight: 700; color: var(--z-kop); }
.z-document__tekst .legal-outro { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--z-kop); font-weight: 700; }
.z-juridisch__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; }
.z-juridisch__lijst li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--z-lijn); border-radius: var(--z-r); background: #FFFFFF; }
.z-juridisch__lijst li[aria-current] { border-color: var(--z-kop); box-shadow: inset 3px 0 0 var(--z-acc); }
.z-juridisch__lijst a { font-weight: 700; color: var(--z-kop); text-decoration: none; }
.z-juridisch__lijst a:hover { text-decoration: underline; text-decoration-color: var(--z-acc); text-underline-offset: 4px; }
.z-juridisch__lijst .z-juridisch__pdf { font: 700 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; padding: 6px 8px; border-radius: 5px; background: var(--z-zand); color: var(--z-merk-d); }
@media (max-width: 1024px) { .z-document__raster { grid-template-columns: minmax(0, 1fr); } .z-inhoud { position: static; max-height: none; } }
html body .z-document__tekst h2 { display: block; background: none; border: 0; border-top: 1px solid var(--z-lijn); border-radius: 0; box-shadow: none; padding: 22px 0 0; color: var(--z-kop); }
html body .z-document__tekst h2::before, html body .z-document__tekst h2::after { content: none; display: none; }
html body .z-document__tekst td, html body .z-document__tekst th { background: none; }
html body .z-document__tekst td:first-child { text-transform: none; letter-spacing: 0; font: 700 15px/1.5 var(--z-f); }
html body .z-document__tekst .legal-defs-wrap { border: 0; box-shadow: none; padding: 0; background: none; }
.z-document__tekst ul, .z-document__tekst ol { margin: 0 0 16px; padding-left: 1.3em; }
.z-document__tekst ol { list-style: decimal; }
.z-document__tekst li { margin: 6px 0; padding-left: 4px; }
.z-document__tekst li::marker { color: var(--z-merk-d); font-weight: 700; }
.z-document__tekst p { margin: 0 0 14px; }
.z-document__tekst h3 { margin: 28px 0 8px; font-size: 1.15rem; }
.z-document__tekst a { color: var(--z-merk-d); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(18, 88, 102, .35); text-underline-offset: 3px; }
.z-document__tekst a:hover { text-decoration-color: var(--z-acc); }
.z-document__tekst tbody th { text-align: left; vertical-align: top; width: 30%; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--z-lijn); font: 700 15px/1.5 var(--z-f); letter-spacing: 0; text-transform: none; color: var(--z-kop); }
.z-document__tekst .legal-defs-wrap { overflow-x: auto; }

/* Formulieren met fieldsets (offerte, herroeping, coaching bijkopen) als kaarten */
.b-pagina fieldset, .z-inhoud-vrij fieldset { margin: 0 0 24px; padding: 26px 28px 18px; border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); background: #FFFFFF; min-width: 0; }
.b-pagina fieldset legend, .z-inhoud-vrij fieldset legend { float: left; width: 100%; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--z-lijn); font: 800 1.2rem/1.25 var(--z-f); letter-spacing: -.02em; color: var(--z-kop); }
.b-pagina fieldset legend + * { clear: both; }
.z-inhoud-vrij { max-width: 56rem; }
.z-pagina .section { padding: 56px 0 72px; }
.z-herroeping { max-width: 52rem; }
.z-herroeping .bth-enroll-section { margin: 28px 0 0; padding: 26px 28px; border: 1px solid var(--z-lijn); border-radius: var(--z-r-kaart); background: #FFFFFF; }
.z-herroeping .bth-enroll-section h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.z-herroeping .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.z-herroeping .form-field { display: grid; gap: 6px; }
.z-herroeping .form-field-full { grid-column: 1 / -1; }
.z-herroeping label { font: 700 14.5px/1.3 var(--z-f); color: var(--z-kop); }
.z-herroeping input:not([type=checkbox]), .z-herroeping textarea { min-height: 50px; padding: 0 14px; border: 1px solid var(--z-lijn-d); border-radius: var(--z-r); font: 16px var(--z-f); color: var(--z-kop); }
.z-herroeping textarea { padding: 12px 14px; }
@media (max-width: 640px) { .z-herroeping .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Kenniskaarten */
.z-kenniskaart .b-kaart__intro { -webkit-line-clamp: 3; }
.z-kenniskaart__lees { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--z-merk-d); }
.z-kenniskaart__lees svg { width: 18px; height: 18px; transition: transform var(--z-basis) var(--z-uit); }
.z-kenniskaart:hover .z-kenniskaart__lees svg { transform: translateX(4px); }
.z-knoppen.z-uitgelicht__meer { gap: 12px; }

/* Held, standaard op elke site (22 oktober 2026): visual onderaan gelijk met de zoekbalk, en een foto
   van het vakgebied links op de achtergrond, achter de tekst, die naar rechts (achter de visual) en naar
   onderen in wit vervloeit. Links in plaats van rechts op wens van Wilmar: rechts verdween de foto achter
   de visual. Over de tekst ligt een lichte waas, zodat de donkere tekst leesbaar blijft. */
.b-held .b-held__raster { align-items: end; }
.b-held .b-zoekveld { margin-bottom: 0; }
.b-held--foto { position: relative; isolation: isolate; overflow: hidden; }
.b-held--foto > .container { position: relative; z-index: 1; }
.b-held__foto { position: absolute; inset: 0 auto 0 0; z-index: 0; width: 68%; pointer-events: none; }
.b-held__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.b-held__foto::after { content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, .85) 14%, rgba(255, 255, 255, .58) 36%, rgba(255, 255, 255, .58) 100%),
		linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 30%),
		linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 22%); }
@media (max-width: 1024px) {
	.b-held__foto { width: 100%; }
	.b-held__foto::after { background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .86) 40%, #FFFFFF 78%); }
}

.b-zoekveld .bth-search-field input { flex: 1 1 auto; min-width: 0; }
.b-zoekveld .bth-search-field .btn { flex: 0 0 auto; width: auto; min-width: 0 !important; }
@media (max-width: 640px) { .b-zoekveld .bth-search-field .btn { width: 100%; } }
.z-document__tekst .btn { margin-top: 6px; text-decoration: none; }
.z-document__tekst .btn:hover { text-decoration: none; }
.b-artikel .z-kop__intro { font-size: 14.5px; color: var(--z-zacht); }

/* Bovenste balk (22 oktober 2026): telefoon links naast Erkende kwaliteit, rechts Voor werkgevers,
   Veelgestelde vragen (als de pagina bestaat) en Inloggen. Op smalle schermen alleen het kernpaar. */
.bth-topbalk__tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.bth-topbalk__tel svg, .bth-topbalk__inlog svg { width: 15px; height: 15px; flex: 0 0 auto; }
.bth-topbalk__score, .bth-topbalk__links { white-space: nowrap; }
.bth-topbalk__moeder { font-weight: 600; }
@media (max-width: 900px) { .bth-topbalk__moeder, .bth-topbalk__moeder + .bth-topbalk__scheiding { display: none; } } /* smal: de link staat dan in de voet en het menu blijft rustig */
@media (max-width: 760px) { .bth-topbalk__extra { display: none; } }
@media (max-width: 480px) { .bth-topbalk__score > a:first-child, .bth-topbalk__score > .bth-topbalk__scheiding { display: none; } }

/* Lip "Hulp bij kiezen" op een vakgebiedsite: 2 px groter dan de 12 px van de lange variant (wens Wilmar, 22 oktober 2026). */
.bth-teamlip__tabtekst--kort { font-size: 14px; }
/* Waas boven de heldfoto 0,58 (wens Wilmar: minder vervagen). Getoetst over alle 35 foto's: titel en intro minimaal 5,0:1; de kleine bovenkop staat op een licht label. */
.b-held--foto .b-bovenkop { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #FFFFFF; color: #0E4652; }
.b-held--foto .b-held__intro { color: var(--z-kop); }

/* Zelfde naam in meerdere vakgebieden: het vakgebied achter de titel (wens Wilmar, 22 oktober 2026). */
.b-kaart__vak { font-weight: 600; color: var(--z-merk-d); white-space: nowrap; }
/* (i)-bolletje met uitklapbare uitleg over de volle breedte, zonder pop-up (wens Wilmar, 22 oktober 2026). */
.b-uitleg { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; vertical-align: 1px; border: 1.5px solid var(--z-merk); border-radius: 50%; background: transparent; color: var(--z-merk); font: italic 700 11px/1 Georgia, serif; cursor: pointer; }
.b-uitleg:hover, .b-uitleg[aria-expanded="true"] { background: var(--z-merk); color: #FFFFFF; }
.b-uitleg:focus-visible { outline: 3px solid var(--z-acc); outline-offset: 2px; }
.b-feiten .b-uitleg__tekst { grid-column: 1 / -1; margin: 2px 0 4px; padding: 10px 12px; border-radius: 8px; background: var(--z-zand); font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--z-tekst); }
.b-feiten .b-uitleg__tekst[hidden] { display: none; }

/* Programma op de opleidingspagina (akkoord Wilmar, 22 oktober 2026): module als kaart,
   hoofdstukken als genummerde tegels, lessen uitklapbaar. Een geopend hoofdstuk krijgt de volle breedte. */
#programma .b-prog__lead{margin:0 0 18px;color:var(--z-tekst);font-size:16px}
#programma .b-prog__module{border:1px solid var(--z-lijn);border-radius:14px;background:#fff;margin:0 0 14px;overflow:hidden}
#programma .b-prog__module>summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;padding:18px 20px;cursor:pointer}
#programma .b-prog__module>summary::-webkit-details-marker{display:none}
#programma .b-prog__module>summary::after{content:"";width:20px;height:20px;background:var(--z-zacht);-webkit-mask:var(--z-plus) center/contain no-repeat;mask:var(--z-plus) center/contain no-repeat;transition:transform .2s}
#programma .b-prog__module[open]>summary::after{transform:rotate(45deg);background:var(--z-kop)}
#programma .b-prog__modnr{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--z-merk);color:#fff;font:800 13px/1.1 var(--z-f);text-align:center}
#programma .b-prog__modtitel{font:700 17px/1.3 var(--z-f);color:var(--z-kop)}
#programma .b-prog__aantal{grid-column:2;font-size:13.5px;color:var(--z-zacht)}
#programma .b-prog__module>summary::after{grid-column:3;grid-row:1/3}
#programma .b-prog__inhoud{padding:0 20px 20px}
#programma .b-prog__module--enkel .b-prog__inhoud{padding-top:20px}
#programma .b-prog__moddesc{margin:0 0 16px;color:var(--z-tekst);max-width:62ch}
#programma .b-prog__hoofdstukken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
#programma .b-prog__h:has(.b-prog__lessen[open]){grid-column:1/-1}
#programma .b-prog__h{display:grid;grid-template-columns:30px 1fr;gap:4px 12px;align-content:start;padding:14px 16px;border:1px solid #D7E8E6;border-radius:12px;background:var(--z-zand)}
#programma .b-prog__nr{grid-row:1/4;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#E3F0EE;color:var(--z-merk-d);font:700 13px/1 var(--z-f)}
#programma .b-prog__htitel{font:700 15.5px/1.35 var(--z-f);color:var(--z-kop)}
#programma .b-prog__hdesc{font-size:14px;line-height:1.5;color:var(--z-tekst)}
#programma .b-prog__lessen{margin-top:6px}
#programma .b-prog__lessen>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:600 13.5px/1 var(--z-f);color:var(--z-merk)}
#programma .b-prog__lessen>summary::-webkit-details-marker{display:none}
#programma .b-prog__lessen>summary::after{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--z-plus) center/contain no-repeat;mask:var(--z-plus) center/contain no-repeat;transition:transform .2s}
#programma .b-prog__lessen[open]>summary::after{transform:rotate(45deg)}
#programma .b-prog__lessen ol{margin:12px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
#programma .b-prog__lessen li{padding-left:12px;border-left:2px solid var(--z-acc)}
#programma .b-prog__lessen b{display:block;font-size:14px;color:var(--z-kop)}
#programma .b-prog__lessen span{display:block;font-size:13.5px;line-height:1.45;color:var(--z-tekst)}
@media (max-width:760px){#programma .b-prog__hoofdstukken,#programma .b-prog__lessen ol{grid-template-columns:minmax(0,1fr)}
#programma .b-prog__module>summary{padding:16px}
#programma .b-prog__inhoud{padding:0 16px 16px}}

/* ===================== Geen horizontale scheidingslijnen (wens Wilmar, 24 oktober 2026) =====================
   "Ik wil NERGENS scheidingslijnen zien horizontaal." Witruimte scheidt; randen alleen boven of onder vervallen.
   Gemeten op alle paginasoorten (gereedschap: scratchpad hlijnen.mjs). Blijven: volledige omlijning van kaarten,
   velden en knoppen, verticale lijnen, de markeringslijn onder het actieve menu-item en de hoverbalk op tegels. */
html body hr { display: none !important; }
html body .site-header, html body.home .site-header:not(.is-scrolled):not(.scrolled) { border-bottom: 0 !important; }
html body .site-footer, html body .z-voet, html body .z-voet__onder, html body .site-footer .footer-bottom { border-top: 0 !important; }
html body :is(.z-kop, .z-kop--paneel, .b-held, .b-held--bord, .b-index, .b-opleiding__kop) { border-bottom: 0 !important; }
html body :is(.z-paneel__kop, .b-bord__kolommen) { border-bottom: 0 !important; }
html body :is(.z-paneel__voet, .b-kaart__voet, .b-bord__voet, .b-route, .b-index__raster, .legal-outro, .legal-defs-table) { border-top: 0 !important; }
html body .z-paneel__rijen > div, html body .b-index__raster > li { border-bottom: 0 !important; }
html body :is(.b-cijferband__rij, .b-feiten, .z-feitenrij) { border-top: 0 !important; border-bottom: 0 !important; }
html body .z-feitenrij > div { border-bottom: 0 !important; }
html body .z-feitenrij::after, html body .z-o::before, html body .b-pakket__raster::before { display: none !important; }
html body .b-pagina :is(h2, h3)[id] { border-top: 0 !important; }
html body :is(.b-pagina, .site-main) :is(table, thead, tbody, tr, td, th) { border-top: 0 !important; border-bottom: 0 !important; }
html body .b-opleiding .b-blok { border-top: 0 !important; }
html body .b-bord__rij, html body .b-bord__rijen > li { border-top: 0 !important; border-bottom: 0 !important; }
html body .z-feitenrij > div, html body .z-feitenrij--blok > div + div { border-top: 0 !important; }
html body .b-cijferband__rij > div { border-top: 0 !important; border-bottom: 0 !important; }
/* Geen streepje achter labels. */
html body .b-label::after, html body .bth-verhaal::before { display: none !important; }
/* Kop op de startpagina: geen verschuiving meer van logo, menu en zoeken (regel van 12 oktober 2026 uit de tijd van de
   doorzichtige kop). In de witte kop met vaste hoogte gaf dat 20 px meer ruimte boven dan onder (melding Wilmar, 24 oktober 2026). */
html body.home .site-header:not(.is-scrolled):not(.scrolled) { --bth-logo-zak: 0px; --bth-logo-midden: 0px; }
/* Geen zichtbare overgang tussen secties (wens Wilmar, 24 oktober 2026): een lichtgroen vlak vloeit vanuit wit in
   en weer uit, zodat er nergens een harde rand is waar de achtergrond wisselt. */
html body :is(.b-sectie--zacht, .z-verder) {
	background: linear-gradient(180deg, rgba(245, 249, 248, 0) 0, var(--z-zand) 140px, var(--z-zand) calc(100% - 140px), rgba(245, 249, 248, 0) 100%) !important; }
/* Achtergrondbeelden lopen nergens hard af (wens Wilmar, 24 oktober 2026).
   1. Het raster in de paginakop loopt door in de volgende sectie en vervaagt daar, zoals op de opleidingspagina. */
html body .z-kop { overflow: visible; z-index: 0; }
html body .z-kop::after { inset: 0 0 -320px auto;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%), linear-gradient(180deg, #000 0, #000 calc(100% - 520px), transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 40%), linear-gradient(180deg, #000 0, #000 calc(100% - 520px), transparent 100%);
	mask-composite: intersect; }
html body .z-kop ~ * { position: relative; z-index: 1; }
@media (max-width: 1024px) { html body .z-kop::after { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 520px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 520px), transparent 100%); } }
/* 2. De foto in de kop van de startpagina vloeit boven (onder de witte kop) en onder weg naar wit. */
html body .b-held__foto { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 62%, transparent 100%); }

/* ===================== Vakgebiedpagina: sfeerbeeld rechts in de kop (wens Wilmar, 25 oktober 2026) =====================
   In plaats van het cijferpaneel. Het beeld vloeit naar links en naar onderen weg in wit, zonder rand,
   zodat de tekst links leesbaar blijft en de kop overgaat in de volgende sectie. */
.z-kop--foto { isolation: isolate; }
.z-kop__foto { position: absolute; inset: 0 0 0 auto; z-index: 0; width: 62%; pointer-events: none; opacity: .9;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 30%, #000 62%), linear-gradient(180deg, #000 0, #000 55%, transparent 100%);
	-webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 30%, #000 62%), linear-gradient(180deg, #000 0, #000 55%, transparent 100%); mask-composite: intersect; }
.z-kop__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.z-kop--foto .z-kop__tekst { max-width: 40rem; }
/* Titel met vaste breuk ("Opleidingen in het / vakgebied X", wens Wilmar, 25 oktober 2026): de kolom wordt zo breed
   dat ook de langste tweede regel (Persoonlijke effectiviteit, 926px op 1440) heel blijft; de intro loopt even breed mee. */
.z-kop__tekst:has(> h1.z-kop__titel--regels) { max-width: 62rem; }
.b-pagina .z-kop h1.z-kop__titel--regels { max-width: none; text-wrap: balance; }
.z-kop__tekst:has(> h1.z-kop__titel--regels) .z-kop__intro { max-width: none; }
@media (max-width: 900px) {
	.z-kop__foto { width: 100%; opacity: .22; }
}

/* ===================== Route op de startpagina van een vakgebiedsite (voorstel D, wens Wilmar, 27 oktober 2026) =====================
   template-parts/route.php: links de stappen als routebeschrijving, rechts één paneel. Zonder javascript (geen .is-actief)
   staan de panelen onder elkaar en blijft de lijst verborgen. De route draagt de nummering, dus de secties eronder niet. */
.b-start--route :is(.b-sectie > .container > h2, .z-sectiekop > h2) { padding-top: 0; }
.b-start--route .z-sectiekop > .z-tegel { margin-top: 0; }
.z-route-sectie { background: linear-gradient(180deg, #FFFFFF 0, var(--z-zand) 96px, var(--z-zand) calc(100% - 96px), #FFFFFF 100%); }
.z-route.is-actief { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: start; }
.z-route__lijst { list-style: none; margin: 0; padding: 0; position: sticky; top: 180px; display: grid; gap: 4px; }
.z-route__lijst li { position: relative; }
.z-route__lijst li:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 56px; height: 16px; width: 2px; background: var(--z-lijn-d); }
.z-route__lijst button { width: 100%; text-align: left; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: center; background: transparent; border: 0; border-radius: 12px; padding: 12px; cursor: pointer; font: inherit; color: var(--z-kop); transition: background-color var(--z-basis), box-shadow var(--z-basis); }
.z-route__lijst button:hover { background: #FFFFFF; }
.z-route__lijst button:focus-visible { outline: 2px solid var(--z-kop); outline-offset: 2px; }
.z-route__lijst b { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--z-r); display: grid; place-items: center; background: #FFFFFF; border: 1px solid var(--z-lijn-d); font-weight: 800; transition: background-color var(--z-basis), border-color var(--z-basis); }
.z-route__lijst strong { font-size: 16px; line-height: 1.25; }
.z-route__lijst small { font-size: 14px; line-height: 1.3; color: var(--z-tekst); }
.z-route__lijst [aria-selected="true"] { background: #FFFFFF; box-shadow: 0 16px 32px -24px rgba(21, 41, 47, .55); }
.z-route__lijst [aria-selected="true"] b { background: var(--z-acc); border-color: var(--z-kop); }
.z-route__paneel { background: #FFFFFF; border: 1px solid var(--z-lijn); border-radius: 18px; padding: 32px; }
.z-route:not(.is-actief) .z-route__paneel + .z-route__paneel { margin-top: 24px; }
.z-route:not(.is-actief) .z-route__verder { display: none; }
.z-route__paneel[hidden] { display: none; }
.z-route__paneel.is-in { animation: z-route-in .45s var(--z-uit); }
@keyframes z-route-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.z-route__lab { margin: 0 0 6px; font: 800 12.5px/1 var(--z-f); letter-spacing: .14em; text-transform: uppercase; color: var(--z-kop); }
.b-pagina .z-route__titel { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; margin: 0 0 20px; padding: 0; }
.z-route__paneel h3 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 10px; }
.z-route__inl { max-width: 46rem; margin-bottom: 28px; }
.z-route__keuzes > h3 { font: 800 12.5px/1.3 var(--z-f); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
/* De keuzes uit stap 1 als kaarten, zonder de grote nummers van de losse sectie. */
.z-route .b-routes--tekst { margin-top: 0; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.z-route .b-routes--tekst .b-route { padding: 20px; border: 0; border-radius: var(--z-r-kaart); background: var(--z-zand); }
.b-pagina .z-route .b-routes--tekst .b-route h3 { font-size: 1.05rem; margin: 0 0 8px; }
.z-route .b-routes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.z-route .b-routes .b-route { background: var(--z-zand); border-color: transparent; }
.z-route__keuzes .b-pakket__tekst > p:not(:first-child) { margin-top: 14px; }
.z-route__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.z-route__duo--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.z-route__kaart { background: var(--z-zand); border-radius: var(--z-r-kaart); padding: 24px; }
.z-route__kaart:only-child { grid-column: 1 / -1; }
.z-route__advies { grid-template-columns: minmax(0, 1fr); padding: 32px; }
.b-pagina .z-route__advies > h3 { color: #FFFFFF; font-size: 1.5rem; margin: 0; }
.z-route__verder .btn { flex: 0 0 auto; width: auto; }
.z-route__verder { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
@media (max-width: 900px) {
	.z-route.is-actief { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.z-route__lijst { position: static; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
	.z-route__lijst li::after { display: none; }
	.z-route__lijst button { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 8px 4px; }
	.z-route__lijst b { grid-row: auto; }
	.z-route__lijst small { display: none; }
	.z-route__lijst strong { font-size: 13px; }
	.z-route__paneel { padding: 20px; }
	.z-route__duo, .z-route__duo--drie { grid-template-columns: minmax(0, 1fr); }
	.z-route__advies { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .z-route__paneel.is-in { animation: none; } }