/**
 * Ozobot Lessen – componenten en lay-out, afgestemd op het thema van ozobot-benelux.nl
 * (tokens.css, header.css, navigation.css, footer.css, home.css, archive.css, dialog.css).
 * Kleuren, typografie en knoppen komen uit theme.json; zie docs/huisstijl/tokens.md.
 * Mobile first; breakpoints 48rem (tablet), 64rem (desktop), 80rem (breed).
 */

/* ---------- 1. Tokens ---------- */
:root {
	--ozl-primair: #4f34e2;
	--ozl-primair-hover: #3c26b8;
	--ozl-primair-actief: #2f1d95;
	--ozl-primair-zacht: #f0edff;
	--ozl-inkt: #161617;
	--ozl-tekst: #242631;
	--ozl-gedempt: #626879;
	--ozl-oppervlak: #f5f5f7;
	--ozl-oppervlak-sterk: #e9ebf2;
	--ozl-rand: #d8dce6;
	--ozl-link: #4027c7;
	--ozl-mint: #a3f0c6;
	--ozl-mint-zacht: #e7f8ef;
	--ozl-geel: #ffd84d;
	--ozl-focus: #0b63ce;
	--ozl-focus-ring: 0 0 0 3px rgb(11 99 206 / 28%);
	/* Eén chevron voor alle uitklappers en keuzelijsten (zelfde vorm als de SVG's in header, lade en footer). */
	--ozl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--ozl-chevron-tekst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242631' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--ozl-r-klein: 0.375rem;
	--ozl-r-middel: 0.75rem;
	--ozl-r-groot: 1.25rem;
	--ozl-r-xl: 2rem;
	--ozl-r-pil: 999px;
	--ozl-schaduw-subtiel: 0 1px 2px rgb(22 22 23 / 8%);
	--ozl-schaduw-kaart: 0 10px 30px rgb(22 22 23 / 10%);
	--ozl-schaduw-verhoogd: 0 20px 50px rgb(22 22 23 / 16%);
	--ozl-container: 75rem;
	--ozl-container-breed: 90rem;
	--ozl-container-padding: clamp(1rem, 0.75rem + 1.25vw, 2rem);
	--ozl-kaart-padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	--ozl-grid-gap: clamp(1rem, 0.75rem + 1.25vw, 2rem);
	--ozl-sectie: clamp(3rem, calc(0.5rem + 6.25vw), 5.5rem);
	--ozl-sectie-compact: clamp(2rem, 4vw, 3rem);
	--ozl-sectie-padding: clamp(4rem, 8vw, 7rem);
	--ozl-header-font: "Avenir Next", "Segoe UI", Arial, sans-serif;
	--ozl-header-hoogte: 4.5rem;
	/* Accentkleuren per kaarttype in de les. */
	--ozl-leerkracht: #334fb4;
	--ozl-leerkracht-zacht: #eaf0fc;
	--ozl-leerling: #146447;
	--ozl-leerling-zacht: #e5f8ee;
	--ozl-werkkaart: #925000;
	--ozl-werkkaart-zacht: #fff4d7;
	--ozl-knipkaart: #9d285f;
	--ozl-knipkaart-zacht: #fcebf3;
	/* Context (zoals ozobot-benelux.nl): standaard paars/grijs, po roze, vo blauw. */
	--ozl-context-accent: var(--ozl-primair);
	--ozl-context-zacht: var(--ozl-oppervlak);
	/* Kleurcodekleuren, alleen voor illustraties en chips. */
	--ozl-code-rood: #c73336;
	--ozl-code-groen: #16834a;
	--ozl-code-blauw: #235fb5;
}
@media (min-width: 64rem) { :root { --ozl-header-hoogte: 5rem; } }
.ozl-context-po { --ozl-context-accent: #9d285f; --ozl-context-zacht: #fcebf3; }
.ozl-context-vo { --ozl-context-accent: #334fb4; --ozl-context-zacht: #eaf0fc; }

/* ---------- 2. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--ozl-header-hoogte) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
::selection { background: var(--ozl-mint); color: var(--ozl-inkt); }
a { text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
img { height: auto; max-width: 100%; }
p, li, dd { line-height: 1.6; }
:focus-visible { box-shadow: var(--ozl-focus-ring); outline: 2px solid var(--ozl-focus); outline-offset: 3px; }
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { background: #fff; clip-path: none; color: var(--ozl-inkt); height: auto; left: 1rem; padding: 0.75rem 1rem; top: 1rem; width: auto; z-index: 10000; }
.wp-site-blocks > * { margin-block-start: 0; }

/* Eigen grids en flexcontainers: geen flow-marges van WordPress tussen de kinderen. */
:where(.ozl-stappen, .ozl-keuzes, .ozl-slo, .ozl-home-hero__raster, .ozl-les-body, .ozl-paginakop--les, .ozl-filters, .ozl-kaarten, .ozl-sectiekop, .ozl-header__inner) > * { margin-block: 0 !important; }

/* ---------- 3. Typografie ---------- */
.ozl-eyebrow, .ozl-eyebrow a { color: var(--ozl-primair); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.35; text-decoration: none; text-transform: uppercase; }
.ozl-eyebrow { margin: 0 0 1rem; }
.ozl-eyebrow a:hover { text-decoration: underline; }
.ozl-lead, .ozl-lead p { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; }
.ozl-lead { margin: 0; max-width: 45rem; }
/* Introtekst in het grijze kader onder de paginatitel: volle breedte. */
.ozl-paginakop :is(.ozl-lead, .wp-block-term-description) { max-width: none; }
.ozl-sectiekop { display: flex; flex-direction: column; gap: 1rem; margin-block-end: clamp(1.5rem, 3vw, 2.5rem); max-width: 45rem; }
.ozl-sectiekop > * { margin: 0; }
/* Sectiekoppen op overzichtspagina's: als de Elementor-koppen van ozobot-benelux.nl (2rem, lh 1). */
.ozl-sectiekop h2, .ozl-slo__tekst h2 { font-size: var(--wp--preset--font-size--kop-2); line-height: 1; }
.ozl-stap h3, .ozl-keuze h3 { font-size: var(--wp--preset--font-size--kop-3); line-height: 1; }
.ozl-sectiekop--met-actie { align-items: flex-start; max-width: none; }
@media (min-width: 48rem) { .ozl-sectiekop--met-actie { align-items: flex-end; flex-direction: row; justify-content: space-between; } }
.ozl-sectiekop__tekst { display: flex; flex-direction: column; gap: 1rem; max-width: 45rem; }
.ozl-sectiekop__tekst > * { margin: 0; }

/* ---------- 4. Lay-out ---------- */
.ozl-main { margin-block-start: 0; }
.ozl-container { margin-inline: auto; width: min(var(--ozl-container), calc(100% - 2 * var(--ozl-container-padding))); }
.ozl-paginaflow { display: flex; flex-direction: column; gap: var(--ozl-sectie); padding-block-end: var(--ozl-sectie); }
.ozl-paginaflow > * { margin-block: 0; }
.ozl-paginaflow > .ozl-vlak:last-child { margin-block-end: calc(-1 * var(--ozl-sectie)); }
/* Eindigt de pagina met een grijs vlak (homepage: Overig materiaal), dan sluit de footer er direct op aan, met grijs achter de ronde hoeken. */
.ozl-paginaflow > .ozl-vlak--grijs:last-child { padding-block-end: calc(var(--ozl-sectie-padding) + var(--ozl-r-xl)); }
.wp-site-blocks:has(> .ozl-paginaflow > .ozl-vlak--grijs:last-child) > .ozl-footer { margin-block-start: calc(-1 * var(--ozl-r-xl)); position: relative; }
.ozl-vlak { padding-block: var(--ozl-sectie-padding); }
.ozl-vlak--grijs { background: var(--ozl-oppervlak); }
.ozl-vlak--paars { background: var(--ozl-primair); color: #fff; }
.ozl-vlak--donker { background: var(--ozl-inkt); color: #fff; }
.ozl-vlak--paars :where(h2, h3, h4, a), .ozl-vlak--donker :where(h2, h3, h4, a) { color: #fff; }
.ozl-vlak--paars .ozl-eyebrow, .ozl-vlak--donker .ozl-eyebrow { color: var(--ozl-mint); }
.ozl-vlak--paars .ozl-lead, .ozl-vlak--paars p, .ozl-vlak--donker p { color: rgb(255 255 255 / 88%); }
.ozl-vlak--paars .ozl-stap__nummer { color: #fff; }
.ozl-paginastart { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 2rem); padding-block-start: 2rem; }
.ozl-paginastart > * { margin: 0; }

/* ---------- 5. Knoppen ---------- */
.wp-element-button, .wp-block-button__link { align-items: center; display: inline-flex; gap: 0.5rem; justify-content: center; min-height: 2.75rem; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.wp-element-button:active, .wp-block-button__link:active { background-color: var(--ozl-primair-actief); }
.wp-block-button.is-style-omlijnd .wp-block-button__link { background: transparent; border-color: var(--ozl-primair); color: var(--ozl-primair); }
.wp-block-button.is-style-omlijnd .wp-block-button__link:is(:hover, :focus-visible) { background: var(--ozl-primair); color: #fff; }
.wp-block-button.is-style-mint .wp-block-button__link { background: var(--ozl-mint); color: var(--ozl-inkt); }
.wp-block-button.is-style-mint .wp-block-button__link:is(:hover, :focus-visible) { background: #fff; color: var(--ozl-inkt); }
.wp-block-button.is-style-tekst .wp-block-button__link { background: transparent; color: var(--ozl-link); padding-inline: 0.5rem; }
.wp-block-button.is-style-tekst .wp-block-button__link:hover { background: transparent; color: var(--ozl-primair-actief); }
.wp-block-button.is-style-tekst .wp-block-button__link::after, .ozl-pijllink::after, .ozl-kaart__meer::after { content: "→"; display: inline-block; margin-inline-start: 0.35em; transition: transform 160ms ease; }
.wp-block-buttons { gap: 0.75rem; }

/* ---------- 6. Header (zoals .oz-site-header) ---------- */
.ozl-header { background: #fff; border-bottom: 1px solid var(--ozl-rand); box-shadow: 0 1px 8px rgb(22 22 23 / 5%); font-family: var(--ozl-header-font); position: sticky; top: 0; z-index: 900; }
.admin-bar .ozl-header { top: 46px; }
@media (min-width: 48.875rem) { .admin-bar .ozl-header { top: 32px; } }
.ozl-header__inner { align-items: center; gap: 0.75rem; margin-inline: auto; min-height: var(--ozl-header-hoogte); padding-inline: var(--ozl-container-padding); width: min(100%, var(--ozl-container-breed)); }
.ozl-logo { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.ozl-logo img { display: block; height: auto; width: clamp(5.5rem, 24vw, 7rem); }
@media (min-width: 80rem) { .ozl-header .ozl-logo img { width: 8.5rem; } }
.ozl-header__acties { align-items: center; display: flex; gap: 0.25rem; margin-inline-start: auto; order: 2; }
.ozl-header-actie { align-items: center; background: transparent; border: 0; border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); cursor: pointer; display: inline-flex; height: 2.75rem; justify-content: center; padding: 0; text-decoration: none; width: 2.75rem; }
.ozl-header-actie:is(:hover, :focus-visible) { background: var(--ozl-oppervlak); color: var(--ozl-primair); }
.ozl-header-actie svg, .ozl-dialoog__sluiten svg { fill: none; height: 1.375rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.375rem; }

/* Hoofdnavigatie (core/navigation), gemeten op ozobot-benelux.nl (.oz-primary-menu) */
.ozl-hoofdnav { font-family: var(--ozl-header-font); order: 3; }
.ozl-hoofdnav .wp-block-navigation__container { gap: 0; }
.ozl-header .ozl-hoofdnav .wp-block-navigation-item__content { color: var(--ozl-inkt); font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.ozl-hoofdnav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { align-items: center; display: inline-flex; line-height: 1.6; min-height: 2.75rem; padding: 0 0.375rem; white-space: nowrap; }
/* Item met submenu: label, 6px, pijltje van 16px in een vak van 44px (zoals .oz-submenu-toggle). */
.ozl-hoofdnav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { padding-inline-end: 0.375rem; }
/* Het vak van het pijltje is even breed als het pijltje (10px), zodat erna precies 1.75rem ruimte zit. */
.ozl-hoofdnav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon { height: 1rem; margin: 0 1.75rem 0 0.1875rem; width: 0.625rem; }
/* Gelijke tussenruimte: items zonder submenu krijgen rechts dezelfde ruimte als het pijltje (1.75rem). */
.ozl-hoofdnav .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):not(.ozl-nav-cta) > .wp-block-navigation-item__content { padding-inline-end: 1.75rem; }
/* Smallere schermen (tot 80rem): overal iets minder ruimte (1.25rem), zodat het menu op één regel past. */
@media (max-width: 79.99rem) {
	.ozl-hoofdnav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon { margin-inline-end: 1.25rem; }
	.ozl-hoofdnav .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child):not(.ozl-nav-cta) > .wp-block-navigation-item__content { padding-inline-end: 1.25rem; }
}
.ozl-header .ozl-hoofdnav .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation-item__content,
.ozl-header .ozl-hoofdnav .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon,
.ozl-header .ozl-hoofdnav .wp-block-navigation-submenu__toggle[aria-expanded="true"],
.ozl-header .ozl-hoofdnav .current-menu-item > .wp-block-navigation-item__content { color: var(--ozl-primair); }
.ozl-hoofdnav .wp-block-navigation-submenu__toggle { background: transparent; border: 0; cursor: pointer; font-family: inherit; }
/* Pijltje even groot als op de hoofdsite (± 7px breed, lijn 1,35px). */
.ozl-hoofdnav .wp-block-navigation__submenu-icon { align-items: center; display: inline-flex; justify-content: center; }
.ozl-hoofdnav .wp-block-navigation__submenu-icon svg { height: 0.625rem; stroke-width: 2; transition: transform 160ms ease; width: 0.625rem; }
.ozl-hoofdnav .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }
/* Dropdown (zoals .oz-submenu--dropdown): 12px onder de header, links gelijk met het item. */
.ozl-hoofdnav .wp-block-navigation__submenu-container { background: #fff !important; border: 1px solid var(--ozl-rand) !important; border-radius: var(--ozl-r-middel); box-shadow: 0 16px 40px rgb(22 22 23 / 10%); min-width: 16rem !important; padding: 0.75rem !important; top: calc(100% + (var(--ozl-header-hoogte) - 2.75rem) / 2 + 0.75rem) !important; }
.ozl-header .ozl-hoofdnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: var(--ozl-r-middel); font-size: 1rem; line-height: 1.6; min-height: 2.75rem; padding: 0.625rem 0.75rem !important; width: 100%; }
.ozl-header .ozl-hoofdnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: var(--ozl-oppervlak); color: var(--ozl-primair); }
/* Openen bij hover (desktop), zoals op de hoofdsite. Het ::before-vlak overbrugt de ruimte tot de dropdown. */
@media (min-width: 600px) {
	.ozl-hoofdnav .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container { height: auto !important; opacity: 1 !important; overflow: visible !important; visibility: visible !important; width: auto !important; }
	.ozl-hoofdnav .has-child:hover > .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }
	.ozl-hoofdnav .wp-block-navigation__submenu-container::before { content: ""; height: calc((var(--ozl-header-hoogte) - 2.75rem) / 2 + 0.75rem); inset-inline: 0; position: absolute; top: calc(-1 * ((var(--ozl-header-hoogte) - 2.75rem) / 2 + 0.75rem)); }
}
/* Paarse knop (zoals het uitgelichte item "Lesmateriaal"): 44px hoog, radius 12px. */
.ozl-header .ozl-hoofdnav .ozl-nav-cta > .wp-block-navigation-item__content { background: var(--ozl-primair); border-radius: var(--ozl-r-middel); color: #fff; margin-inline-start: 0.375rem; min-height: 2.75rem; padding: 0 0.375rem; }
.ozl-header .ozl-hoofdnav .wp-block-navigation__container > .ozl-nav-cta:is(:hover, :focus-within) > .wp-block-navigation-item__content, .ozl-header .ozl-hoofdnav .ozl-nav-cta > .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: var(--ozl-primair-hover); color: #fff; }
@media (min-width: 64rem) {
	.ozl-header__inner { gap: 0.5rem; }
	.ozl-hoofdnav { flex: 1 1 auto; order: 2; }
	.ozl-header__acties { margin-inline-start: 0; order: 3; }
}
@media (min-width: 80rem) {
	.ozl-header__inner { gap: 1.5rem; }
	.ozl-header .ozl-hoofdnav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 1rem; padding-inline-start: 0.75rem; }
	.ozl-header .ozl-hoofdnav .ozl-nav-cta > .wp-block-navigation-item__content { margin-inline-start: 0.75rem; padding-inline: 0.75rem; }
}
/* ---------- 6b. Mobiel (tot 64rem): menuknop en een lade van rechts, zoals .oz-mobile-drawer ---------- */
.ozl-menuknop svg { height: 1.375rem; width: 1.375rem; }
@media (max-width: 63.99rem) {
	.ozl-header__inner { gap: 0.5rem; padding-inline: 1rem; }
	.ozl-header .ozl-hoofdnav.wp-block-navigation { display: none; }
	.ozl-header__acties { gap: 0; margin-inline-start: auto; }
}
@media (min-width: 64rem) {
	.ozl-menuknop, .ozl-lade, .ozl-lade-overlay { display: none !important; }
}
.ozl-lade-overlay { background: rgb(22 22 23 / 48%); inset: 0; position: fixed; z-index: 1000; }
.ozl-lade { background: #fff; bottom: 0; box-shadow: var(--ozl-schaduw-verhoogd); display: flex; flex-direction: column; font-family: var(--ozl-header-font); max-width: calc(100% - 1rem); position: fixed; right: 0; top: 0; width: 26rem; z-index: 1001; }
.admin-bar .ozl-lade { top: 46px; }
@media (min-width: 48.875rem) { .admin-bar .ozl-lade { top: 32px; } }
.ozl-lade[hidden], .ozl-lade-overlay[hidden], .ozl-lade__sub[hidden] { display: none; }
.ozl-lade__kop { align-items: center; border-bottom: 1px solid var(--ozl-rand); display: flex; justify-content: space-between; min-height: 4.5rem; padding: 0.75rem 1rem; }
.ozl-lade__titel { color: var(--ozl-tekst); font-size: var(--wp--preset--font-size--lead); font-weight: 700; }
.ozl-lade__inhoud { display: flex; flex: 1; flex-direction: column; gap: 1.5rem; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }
.ozl-lade__menu, .ozl-lade__sub { display: flex; flex-direction: column; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.ozl-lade__menu > li, .ozl-lade__sub > li { margin: 0; }
.ozl-lade__sub { padding: 0.5rem 0 1rem 1rem; }
.ozl-lade__link, .ozl-lade__groep { align-items: center; background: transparent; border: 0; border-radius: var(--ozl-r-middel); color: var(--ozl-inkt); cursor: pointer; display: flex; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.6; min-height: 2.75rem; padding: 0.5rem 0.75rem; text-align: left; text-decoration: none; width: 100%; }
.ozl-lade__groep { justify-content: space-between; padding-inline-end: 0; }
.ozl-lade__link:is(:hover, :focus-visible), .ozl-lade__groep:is(:hover, :focus-visible) { background: var(--ozl-oppervlak); color: var(--ozl-primair); }
.ozl-lade__groep[aria-expanded="true"] svg { color: var(--ozl-primair); transform: rotate(180deg); }
/* Pijltje in een vak van 44px, zoals .oz-submenu-toggle. */
.ozl-lade__groep svg { fill: none; flex: none; height: 1rem; margin-inline: 0.875rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 1rem; }
.ozl-lade__knop { align-items: center; background: var(--ozl-primair); border-radius: var(--ozl-r-middel); color: #fff; display: flex; font-size: 1rem; font-weight: 700; min-height: 2.75rem; padding: 0.5rem 0.75rem; text-decoration: none; }
.ozl-lade__knop:is(:hover, :focus-visible) { background: var(--ozl-primair-hover); color: #fff; }
.ozl-lade__sluiten:is(:hover, :focus-visible) { background: var(--ozl-oppervlak); color: var(--ozl-primair); }
/* Pagina vast zolang de lade open is (zoals body.oz-drawer-open). */
body.ozl-lade-open { left: 0; overflow: hidden; position: fixed; right: 0; width: 100%; }
/* Beweging zoals motion.css van ozobot-benelux.nl: lade schuift in, overlay vervaagt, submenu valt in. */
@keyframes ozl-slide-in-right { from { translate: 100% 0; } to { translate: 0 0; } }
@keyframes ozl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ozl-drop-in { from { opacity: 0; translate: 0 -0.5rem; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
	.ozl-lade:not([hidden]) { animation: ozl-slide-in-right 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
	.ozl-lade-overlay:not([hidden]) { animation: ozl-fade-in 0.24s ease; }
	.ozl-lade__sub:not([hidden]) { animation: ozl-drop-in 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
	.ozl-lade__groep svg { transition: transform 0.16s ease; }
	.ozl-header-actie, .ozl-lade__link, .ozl-lade__groep { transition: color 0.16s ease, background-color 0.16s ease; }
}

/* ---------- 7. Zoekdialoog (zoals .oz-dialog / #oz-search-panel) ---------- */
.ozl-dialoog:not([open]) { display: none; }
.ozl-dialoog { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-xl); box-shadow: var(--ozl-schaduw-verhoogd); box-sizing: border-box; color: var(--ozl-tekst); margin: auto; max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; padding: clamp(1.25rem, 4vw, 2.5rem); width: min(60rem, calc(100% - 2rem)); }
.ozl-dialoog::backdrop { background: rgb(22 22 23 / 55%); }
html.ozl-dialoog-open { overflow: hidden; }
.ozl-dialoog__kop { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.ozl-dialoog__kop .ozl-eyebrow { margin: 0; }
.ozl-dialoog__sluiten { align-items: center; background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-pil); color: var(--ozl-tekst); cursor: pointer; display: grid; flex: none; min-height: 44px; min-width: 44px; place-items: center; }
.ozl-dialoog__sluiten:hover { background: var(--ozl-oppervlak); }
.ozl-zoekpaneel h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; margin: 1.25rem 0; }
.ozl-zoekformulier label { color: var(--ozl-tekst); display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; }
.ozl-zoekformulier__velden { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ozl-zoekformulier__velden input[type="search"] { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-middel); color: var(--ozl-tekst); flex: 1 1 12rem; font: inherit; min-height: 3.25rem; min-width: 0; padding: 0.75rem 1rem; }
.ozl-zoekformulier__velden input[type="search"]:focus { border-color: var(--ozl-focus); box-shadow: var(--ozl-focus-ring); outline: 2px solid var(--ozl-focus); }
.ozl-zoekformulier__velden button { min-height: 3.25rem; }
.ozl-zoekstatus { color: var(--ozl-gedempt); font-size: 0.95rem; margin: 1rem 0; }
.ozl-zoekgroep__titel { font-size: 1.1rem; letter-spacing: 0; line-height: 1.3; margin: 1.5rem 0 0.65rem; }
.ozl-zoekgroep__lijst { list-style: none; margin: 0; padding: 0; }
.ozl-zoekgroep__lijst li + li { border-top: 1px solid var(--ozl-rand); }
.ozl-zoekresultaat { align-items: center; background: var(--ozl-oppervlak); border-radius: var(--ozl-r-middel); color: var(--ozl-tekst); display: flex; gap: 1rem; padding: 0.9rem; text-decoration: none; }
.ozl-zoekresultaat:hover { background: var(--ozl-primair-zacht); }
.ozl-zoekresultaat__afbeelding { border-radius: var(--ozl-r-klein); flex: none; height: 56px; object-fit: cover; width: 56px; }
.ozl-zoekresultaat__icoon { align-items: center; background: #fff; border-radius: var(--ozl-r-klein); display: flex; flex: none; height: 56px; justify-content: center; width: 56px; }
.ozl-zoekresultaat__icoon::before { color: var(--ozl-primair); content: "#"; font-size: 1.5rem; font-weight: 700; }
.ozl-zoekresultaat__icoon--leerdoelen::before { content: "◎"; }
.ozl-zoekresultaat__tekst { min-width: 0; overflow-wrap: anywhere; }
.ozl-zoekresultaat__titel { color: var(--ozl-primair); display: block; }
.ozl-zoekresultaat__meta, .ozl-zoekresultaat__omschrijving { display: block; font-size: 0.875rem; margin-top: 0.2rem; }
.ozl-zoekresultaat__meta { color: var(--ozl-gedempt); font-weight: 600; }
.ozl-zoekresultaat__omschrijving { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; }
.ozl-zoekgroep__meer { margin-top: 0.75rem; }
@media (max-width: 600px) {
	.ozl-dialoog { max-height: calc(100dvh - 1rem); padding: 1rem; width: calc(100% - 1rem); }
	.ozl-zoekresultaat { gap: 0.65rem; padding: 0.75rem; }
	.ozl-zoekresultaat__afbeelding, .ozl-zoekresultaat__icoon { height: 44px; width: 44px; }
}

/* ---------- 8. Footer (zoals .oz-site-footer) ---------- */
.ozl-footer { background: var(--ozl-inkt); border-radius: var(--ozl-r-xl) var(--ozl-r-xl) 0 0; color: #fff; margin-block-start: var(--ozl-sectie-compact); }
.ozl-footer__inner { margin-inline: auto; padding: 3rem var(--ozl-container-padding) 2rem; width: min(100%, var(--ozl-container-breed)); }
.ozl-footer a { color: rgb(255 255 255 / 86%); }
.ozl-footer a:hover { color: var(--ozl-mint); }
.ozl-footer .ozl-logo img { width: 10rem; }
.ozl-footer__omschrijving { color: rgb(255 255 255 / 78%); margin: 1rem 0 0; max-width: 34rem; }
.ozl-footer a.ozl-footer__knop { align-items: center; background: var(--ozl-primair); border-radius: var(--ozl-r-middel); color: #fff; display: inline-flex; font-family: var(--ozl-header-font); font-size: 1rem; font-weight: 700; gap: 0.4rem; margin-block-start: 1.5rem; min-height: 2.75rem; padding: 0.625rem 1.5rem; text-decoration: none; }
.ozl-footer a.ozl-footer__knop:is(:hover, :focus-visible) { background: var(--ozl-primair-hover); color: #fff; }
/* Desktop: knop rechts naast logo en omschrijving. */
@media (min-width: 64rem) {
	.ozl-footer__merk { align-items: center; column-gap: var(--ozl-grid-gap); display: grid; grid-template-columns: minmax(0, 1fr) auto; }
	.ozl-footer__merk > :not(.ozl-footer__knop) { grid-column: 1; }
	.ozl-footer a.ozl-footer__knop { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
.ozl-footer__navigatie { display: grid; margin-block-start: 3rem; }
.ozl-footer__groep { border-top: 1px solid rgb(255 255 255 / 18%); }
.ozl-footer__groeptitel { color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin: 0; }
.ozl-footer__toggle { align-items: center; background: transparent; border: 0; color: #fff; cursor: pointer; display: flex; font: inherit; font-weight: 700; justify-content: space-between; line-height: 1.2; min-height: 3.5rem; padding: 1rem 0; text-align: start; width: 100%; }
.ozl-footer__toggle svg { fill: none; height: 1.25rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 160ms ease; width: 1.25rem; }
.ozl-footer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ozl-footer__paneel { padding-block-end: 1.5rem; }
.ozl-footer__paneel[hidden] { display: none; }
.ozl-footer__menu { display: grid; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.ozl-footer__menu a { align-items: center; border-radius: var(--ozl-r-klein); display: flex; min-height: 2.75rem; padding-block: 0.5rem; text-decoration: none; }
.ozl-footer__juridisch { border-top: 1px solid rgb(255 255 255 / 18%); color: rgb(255 255 255 / 72%); display: flex; flex-direction: column; font-size: 0.875rem; gap: 0.75rem; margin-block-start: 2rem; padding-block-start: 1.5rem; }
.ozl-footer__juridisch p { margin: 0; }
/* De zwevende knop van Ozo (rechtsonder) mag de laatste regel ("Cookie-instellingen") niet bedekken. */
body:has(.ozai-launcher) .ozl-footer__juridisch { padding-block-end: 5rem; }
.ozl-footer__juridisch .ozl-footer__menu { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.ozl-footer :focus-visible { box-shadow: 0 0 0 3px rgb(163 240 198 / 32%); outline-color: var(--ozl-mint); }
@media (min-width: 64rem) {
	.ozl-footer__inner { padding-block-start: clamp(4rem, 6vw, 6rem); }
	.ozl-footer__navigatie { gap: var(--ozl-grid-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ozl-footer__groep { border: 0; }
	.ozl-footer__toggle { cursor: default; min-height: auto; padding: 0 0 1rem; pointer-events: none; }
	.ozl-footer__toggle svg { display: none; }
	.ozl-footer__paneel { padding: 0; }
	.ozl-footer__juridisch { align-items: center; flex-direction: row; justify-content: space-between; }
	.ozl-footer__juridisch > nav { flex-shrink: 0; }
}

/* ---------- 9. Kruimelpad, paginakop, filterknoppen, zoekbalk ---------- */
.ozl-kruimelpad { color: var(--ozl-gedempt); font-size: 0.875rem; }
.ozl-kruimelpad__lijst { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.ozl-kruimelpad__lijst li { display: flex; gap: 0.5rem; overflow-wrap: anywhere; }
.ozl-kruimelpad__lijst li + li::before { color: var(--ozl-gedempt); content: "/"; }
.ozl-kruimelpad a { color: var(--ozl-link); }
.ozl-kruimelpad [aria-current="page"] { color: var(--ozl-context-accent); }
/* Paginakop als kaart (zoals de shopkop en .oz-content-hero) */
.ozl-paginakop { background: linear-gradient(115deg, var(--ozl-oppervlak) 15%, var(--ozl-context-zacht)); border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-xl); display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.ozl-paginakop > *, .ozl-paginakop__tekst > * { margin: 0; }
.ozl-paginakop h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); font-weight: 700; line-height: 1.1; }
.ozl-paginakop .ozl-eyebrow { color: var(--ozl-context-accent); }
.ozl-paginakop .ozl-zoekbalk { margin-top: 0.5rem; max-width: 36rem; }
.ozl-paginakop .wp-block-term-description p { margin: 0; }
/* Lespagina: tekst + beeld, zoals een onderwijspagina op ozobot-benelux.nl */
.ozl-paginakop--les { align-items: center; display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 3rem); }
.ozl-paginakop__tekst { display: flex; flex-direction: column; gap: 1.25rem; }
.ozl-paginakop--les h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); font-weight: 700; line-height: 1.1; }
.ozl-paginakop__beeld { border-radius: var(--ozl-r-groot); margin: 0; overflow: hidden; }
.ozl-paginakop__beeld img { border-radius: var(--ozl-r-groot); display: block; }
@media (min-width: 64rem) { .ozl-paginakop--les { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .ozl-paginakop__beeld { justify-self: end; max-width: 28rem; width: 100%; } }
/* Filterknoppen (zoals .oz-shop-categories) */
.ozl-filters { display: flex; flex-direction: column; gap: 0.75rem; }
.ozl-filterknoppen { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.ozl-filterknoppen__label { color: var(--ozl-gedempt); font-size: 0.875rem; font-weight: 700; margin: 0; min-width: 4.5rem; }
.ozl-filterknoppen__lijst { display: flex; flex-wrap: wrap; gap: 0.5rem 0.625rem; list-style: none; margin: 0; padding: 0; }
.ozl-filterknoppen__lijst li { max-width: 100%; }
.ozl-filterknop { align-items: center; background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); display: flex; font-size: 0.875rem; font-weight: 600; min-height: 2.75rem; overflow-wrap: anywhere; padding: 0.5rem 1rem; text-decoration: none; }
.ozl-filterknop:hover { border-color: var(--ozl-primair); color: var(--ozl-primair); }
.ozl-filterknop[aria-current="page"] { background: var(--ozl-mint); border-color: transparent; color: var(--ozl-inkt); font-weight: 700; }
/* Zoekbalk (core/search) */
.ozl-zoekbalk .wp-block-search__inside-wrapper { background: transparent; border: 0; gap: 0.5rem; padding: 0; }
.ozl-zoekbalk .wp-block-search__input { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-middel); color: var(--ozl-tekst); font: inherit; min-height: 3.25rem; padding: 0.75rem 1rem; }
.ozl-zoekbalk .wp-block-search__input:focus { border-color: var(--ozl-focus); box-shadow: var(--ozl-focus-ring); outline: 2px solid var(--ozl-focus); }
.ozl-zoekbalk .wp-block-search__button { margin: 0; min-height: 3.25rem; }
.ozl-paginering { margin-block-start: 2rem; }
.ozl-paginering :is(a, .page-numbers) { align-items: center; background: var(--ozl-oppervlak); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); display: inline-flex; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0.75rem; text-decoration: none; }
.ozl-paginering .page-numbers.current { background: var(--ozl-primair); color: #fff; }
.ozl-leeg { background: var(--ozl-oppervlak); border-radius: var(--ozl-r-xl); padding: 2rem; text-align: center; }

/* ---------- 10. Leskaarten (zoals de productkaarten in de shop) ---------- */
.ozl-kaarten { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 36rem) { .ozl-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ozl-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wp-block-post-template.ozl-kaarten > li { display: flex; margin: 0; }
.ozl-kaart { background: var(--ozl-oppervlak); border-radius: var(--ozl-r-groot); display: flex; flex-direction: column; margin: 0; overflow: clip; padding: 0 0 1.25rem; position: relative; width: 100%; }
@media (hover: hover) and (pointer: fine) {
	.ozl-kaart { transition: box-shadow 180ms ease, transform 180ms ease; }
	.ozl-kaart:hover { box-shadow: var(--ozl-schaduw-kaart); transform: translateY(-0.25rem); }
}
.ozl-vlak--grijs .ozl-kaart, .ozl-vlak--grijs .ozl-gids { background: #fff; }
.ozl-kaart__media { aspect-ratio: 1; background: #fff; border: 1px solid var(--ozl-oppervlak); border-radius: var(--ozl-r-groot) var(--ozl-r-groot) 0 0; margin: 0; overflow: hidden; }
.ozl-kaart__media img, .ozl-kaart__afbeelding { display: block; height: 100%; object-fit: cover; width: 100%; }
/* Downloadbadge op de afbeelding van een les (kaart en paginakop). */
.ozl-kaart__media, .ozl-paginakop__beeld { position: relative; }
.ozl-downloads { align-items: center; background: rgb(255 255 255 / 94%); border-radius: var(--ozl-r-pil); bottom: 0.75rem; box-shadow: 0 2px 10px rgb(22 22 23 / 14%); color: var(--ozl-inkt); display: inline-flex; font-size: 0.8125rem; font-weight: 700; gap: 0.35rem; left: 0.75rem; line-height: 1.2; padding: 0.35rem 0.7rem 0.35rem 0.55rem; pointer-events: none; position: absolute; }
.ozl-downloads svg { fill: none; flex: none; height: 1rem; stroke: var(--ozl-primair); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 1rem; }
.ozl-paginakop__beeld .ozl-downloads { bottom: 1rem; font-size: 0.875rem; left: 1rem; }
/* "Nieuw"-badge (eerste 30 dagen na publicatie), linksboven op de afbeelding van een les. */
.ozl-nieuw { background: var(--ozl-primair); border-radius: var(--ozl-r-pil); box-shadow: 0 2px 10px rgb(22 22 23 / 18%); color: #fff; font-size: 0.8125rem; font-weight: 700; left: 0.75rem; letter-spacing: 0.01em; line-height: 1.2; padding: 0.35rem 0.75rem; pointer-events: none; position: absolute; top: 0.75rem; }
.ozl-paginakop__beeld .ozl-nieuw { font-size: 0.875rem; left: 1rem; top: 1rem; }
.ozl-kaart__placeholder { background: linear-gradient(135deg, var(--ozl-primair-zacht), var(--ozl-mint-zacht)); display: block; height: 100%; }
.ozl-kaart__body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.25rem 0; }
.ozl-kaart__body > * { margin: 0; }
.ozl-kaart__titel { color: var(--ozl-inkt); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.ozl-kaart__titel a { color: inherit; text-decoration: none; }
.ozl-kaart__titel a::after { content: ""; inset: 0; position: absolute; z-index: 1; }
.ozl-kaart__titel a:focus-visible { box-shadow: none; outline: none; }
.ozl-kaart:has(.ozl-kaart__titel a:focus-visible) { outline: 3px solid var(--ozl-focus); outline-offset: 4px; }
.ozl-kaart__tekst, .ozl-kaart__tekst p { color: var(--ozl-gedempt); font-size: 0.9375rem; line-height: 1.55; margin: 0; }
.ozl-kaart__meer { color: var(--ozl-link); font-size: 0.9375rem; font-weight: 700; margin-top: auto !important; }
.ozl-kaart:hover .ozl-kaart__meer::after { transform: translateX(0.25rem); }

/* Chips (kenmerken van een les; zoals de badges in de shop) */
.ozl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.ozl-chip { align-items: center; background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); display: inline-flex; font-size: 0.875rem; font-weight: 700; gap: 0.35rem; line-height: 1.2; margin: 0; padding: 0.45rem 0.85rem; }
.ozl-chip a, .ozl-chip__link { color: inherit; text-decoration: none; }
.ozl-chip a:hover, .ozl-chip__link:hover { color: var(--ozl-primair); }
.ozl-chip--niveau { background: var(--ozl-mint-zacht); border-color: transparent; color: #147a4b; }
.ozl-chip--duur::before { background: currentcolor; border-radius: 50%; content: ""; display: inline-block; height: 0.9em; mask: radial-gradient(circle, transparent 0 45%, #000 46%); width: 0.9em; }
.ozl-chip--methode { background: var(--ozl-primair-zacht); border-color: transparent; color: var(--ozl-primair-actief); }
.ozl-chip--vak { background: var(--ozl-werkkaart-zacht); border-color: transparent; color: var(--ozl-werkkaart); }
.ozl-lessen--vakken { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.ozl-chip--methode-kleurcodes::before { background: linear-gradient(90deg, var(--ozl-code-rood) 0 33%, var(--ozl-code-groen) 33% 66%, var(--ozl-code-blauw) 66%); border-radius: 2px; content: ""; display: inline-block; height: 0.55em; width: 1.4em; }
.ozl-chip--taalarm { background: var(--ozl-leerling-zacht); border-color: transparent; color: var(--ozl-leerling); }
.ozl-chip--materiaal { font-weight: 600; }
.ozl-kaart .ozl-chip { font-size: 0.8125rem; padding: 0.35rem 0.7rem; }

/* ---------- 11. Home ---------- */
/* Hero (zoals .oz-home-hero) */
.ozl-home-hero { background: radial-gradient(circle at 8% 18%, rgb(163 240 198 / 38%) 0 4.5rem, transparent 4.6rem), linear-gradient(135deg, #f7f5ff 0%, #fff 58%, #eefcf4 100%); overflow: clip; padding-block: var(--ozl-sectie-padding); }
.ozl-home-hero__raster { align-items: center; display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); margin-inline: auto; width: min(var(--ozl-container-breed), calc(100% - 2 * var(--ozl-container-padding))); }
@media (min-width: 64rem) { .ozl-home-hero__raster { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }
.ozl-home-hero__tekst { display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 1; }
.ozl-home-hero__tekst > * { margin: 0; }
.ozl-home-hero__titel { font-size: clamp(2.7rem, 2rem + 3.25vw, 5.5rem); font-weight: 600; line-height: 1; max-width: 12ch; }
/* Bold is breder dan Semibold: in de tweekolomshero mag 'programmeren' niet midden in het woord breken. */
@media (min-width: 64rem) and (max-width: 79.99rem) { .ozl-home-hero__titel { font-size: min(clamp(2.7rem, 2rem + 3.25vw, 5.5rem), 5.25vw); } }
.ozl-home-hero__tekst .ozl-lead, .ozl-home-hero__tekst .ozl-zoekbalk { max-width: 38rem; }
.ozl-home-hero__snel { gap: 0.5rem 0.75rem; }
.ozl-home-hero__snel .ozl-filterknoppen__label { min-width: auto; }
.ozl-home-hero__beeld { background: var(--ozl-primair); border-radius: clamp(1.5rem, 4vw, 3.25rem); box-shadow: var(--ozl-schaduw-verhoogd); isolation: isolate; margin: 0; overflow: hidden; padding: clamp(1.25rem, 3vw, 2.5rem); position: relative; }
.ozl-home-hero__beeld::before, .ozl-home-hero__beeld::after { border-radius: 50%; content: ""; pointer-events: none; position: absolute; z-index: -1; }
.ozl-home-hero__beeld::before { background: var(--ozl-mint); height: 11rem; right: -3rem; top: -3rem; width: 11rem; }
.ozl-home-hero__beeld::after { background: var(--ozl-geel); bottom: -2.5rem; height: 7rem; left: -2rem; width: 7rem; }
.ozl-home-hero__beeld img { aspect-ratio: 1400 / 991; background: #fff; border-radius: var(--ozl-r-groot); box-shadow: 0 16px 40px rgb(22 22 23 / 24%); display: block; object-fit: cover; transform: rotate(1.5deg); width: 100%; }
.ozl-home-hero__notitie { color: #fff; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; margin-top: 1.25rem; text-align: center; text-transform: uppercase; }
@media (max-width: 29.99rem) { .ozl-home-hero__titel { font-size: clamp(2.45rem, 12vw, 3.35rem); } .ozl-home-hero__beeld img { transform: none; } }
/* USP-strip (zoals .oz-home-trust) */
.ozl-home-usp { background: #fff; border-block: 1px solid var(--ozl-rand); margin-block-start: calc(-1 * var(--ozl-sectie)); }
.ozl-home-usp__lijst { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0 auto; padding: 0; width: min(var(--ozl-container-breed), calc(100% - 2 * var(--ozl-container-padding))); }
.ozl-home-usp__item { align-items: center; display: flex; font-weight: 700; gap: 0.75rem; justify-content: flex-start; line-height: 1.35; padding: 1rem; }
.ozl-home-usp__vink { align-items: center; background: var(--ozl-mint); border-radius: 50%; color: var(--ozl-inkt); display: inline-flex; flex-shrink: 0; font-size: 0.75rem; height: 1.375rem; justify-content: center; width: 1.375rem; }
@media (min-width: 48rem) { .ozl-home-usp__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ozl-home-usp__item:nth-child(even) { border-left: 1px solid var(--ozl-rand); } }
@media (min-width: 64rem) { .ozl-home-usp__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ozl-home-usp__item { justify-content: center; } .ozl-home-usp__item + .ozl-home-usp__item { border-left: 1px solid var(--ozl-rand); } }
/* Van kleur naar code (zoals .oz-home-journey) */
.ozl-stappen { align-items: stretch; display: grid; gap: var(--ozl-grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .ozl-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ozl-stap { background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 22%); border-radius: var(--ozl-r-xl); display: flex; flex-direction: column; gap: 1rem; padding: var(--ozl-kaart-padding); position: relative; }
.ozl-stap > * { margin: 0; }
.ozl-stap--teken { background: rgb(255 255 255 / 13%); }
.ozl-stap--code { background: rgb(163 240 198 / 14%); border-color: rgb(163 240 198 / 34%); }
.ozl-stap--verken { background: rgb(255 216 77 / 12%); border-color: rgb(255 216 77 / 28%); }
.ozl-stap__nummer { font-size: clamp(3rem, 7vw, 5rem); font-weight: 600; line-height: 0.9; }
.ozl-stap h3 a { text-decoration: none; }
.ozl-stap h3 a::after { content: ""; inset: 0; position: absolute; }
.ozl-stap:hover h3 a { text-decoration: underline; }
/* Onderwijsniveaus (zoals .oz-home-choice met context) */
.ozl-keuzes { align-items: stretch; display: grid; gap: var(--ozl-grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .ozl-keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ozl-keuze { background: var(--ozl-context-zacht); border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-xl); box-shadow: var(--ozl-schaduw-kaart); display: flex; flex-direction: column; gap: 1rem; padding: var(--ozl-kaart-padding); position: relative; }
.ozl-keuze > * { margin: 0; }
.ozl-keuze .ozl-eyebrow { color: var(--ozl-context-accent); }
.ozl-keuze h3 { margin-top: 2.5rem; }
.ozl-keuze h3 a { color: var(--ozl-tekst); text-decoration: none; }
.ozl-keuze h3 a::after { content: ""; inset: 0; position: absolute; }
.ozl-keuze .ozl-pijllink { color: var(--ozl-context-accent); font-weight: 700; margin-top: auto; }
@media (hover: hover) and (pointer: fine) { .ozl-keuze { transition: transform 180ms ease; } .ozl-keuze:hover { transform: translateY(-0.25rem); } .ozl-keuze:hover .ozl-pijllink::after { transform: translateX(0.25rem); } }
/* SLO (zoals .oz-home-slo) */
.ozl-slo { align-items: start; display: grid; gap: var(--ozl-grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .ozl-slo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.ozl-slo__tekst { display: flex; flex-direction: column; gap: 1.5rem; }
.ozl-slo__tekst > * { margin: 0; }
.ozl-slo__tegels { display: grid; gap: var(--ozl-grid-gap); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 30rem) { .ozl-slo__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ozl-slo__tegel { align-items: center; aspect-ratio: 16 / 9; background: linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 7%)); border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--ozl-r-groot); color: #fff; display: flex; font-size: var(--wp--preset--font-size--kop-4); font-weight: 600; height: 100%; justify-content: center; letter-spacing: -0.025em; line-height: 1.2; min-height: 8rem; padding: 1.5rem 1rem; text-align: center; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ozl-slo__tegel { transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease; } .ozl-slo__tegel:hover { background: rgb(255 255 255 / 16%); box-shadow: var(--ozl-schaduw-kaart); transform: translateY(-0.25rem); } }

/* ---------- 12. Lespagina ---------- */
.ozl-lesinfo--hero { display: flex; flex-direction: column; gap: 1.25rem; }
.ozl-lesinfo__samenvatting { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; margin: 0; max-width: 40rem; }
.ozl-download { display: flex; flex-direction: column; gap: 0.6rem; }
.ozl-download__knop { align-self: flex-start; }
.ozl-download__knop::before { background: currentcolor; content: ""; display: inline-block; height: 1.1em; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat; width: 1.1em; }
.ozl-download__knop.is-uitgeschakeld { background: var(--ozl-oppervlak-sterk); color: var(--ozl-gedempt); cursor: not-allowed; }
.ozl-download__knop.is-uitgeschakeld::before { display: none; }
.ozl-download__meta { color: var(--ozl-gedempt); font-size: 0.875rem; margin: 0; }
/* Lerarengidsen en workshops (ozl/gidsen): drie kaarten, elk met een eigen accentkleur. */
.ozl-gidsen { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 36rem) { .ozl-gidsen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ozl-gidsen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ozl-gids { --ozl-gids-accent: var(--ozl-leerkracht); --ozl-gids-zacht: var(--ozl-leerkracht-zacht); background: var(--ozl-oppervlak); border-radius: var(--ozl-r-groot); display: flex; flex-direction: column; margin: 0; overflow: clip; }
.ozl-gids--ai-lerarengids { --ozl-gids-accent: var(--ozl-primair); --ozl-gids-zacht: var(--ozl-primair-zacht); }
.ozl-gids--workshops { --ozl-gids-accent: var(--ozl-werkkaart); --ozl-gids-zacht: var(--ozl-werkkaart-zacht); }
.ozl-gids--kleurcodekaart, .ozl-gids--slo-leerdoelen { --ozl-gids-accent: var(--ozl-primair); --ozl-gids-zacht: var(--ozl-primair-zacht); }
.ozl-gids--lijnen-tekenen { --ozl-gids-accent: var(--ozl-werkkaart); --ozl-gids-zacht: var(--ozl-werkkaart-zacht); }
.ozl-gids__media { align-items: center; aspect-ratio: 16 / 10; background: var(--ozl-gids-zacht); display: flex; justify-content: center; overflow: hidden; padding: 1.25rem 1.5rem 0; }
/* De hele omslag als boekje: rechtop, met schaduw, onderaan iets afgesneden. */
.ozl-gids__afbeelding { align-self: flex-end; aspect-ratio: 210 / 297; border-radius: 0.25rem 0.25rem 0 0; box-shadow: 0 10px 30px rgb(22 22 23 / 18%); display: block; height: auto; max-height: 100%; object-fit: cover; object-position: top; width: 58%; }
.ozl-gids__icoon { background: var(--ozl-gids-accent); height: 3.5rem; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5zM4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5'/%3E%3C/svg%3E") center / contain no-repeat; width: 3.5rem; }
.ozl-gids__body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem 1.5rem; }
.ozl-gids__body > * { margin: 0; }
.ozl-gids__label { color: var(--ozl-gids-accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ozl-gids .ozl-gids__titel { color: var(--ozl-inkt); font-size: var(--wp--preset--font-size--kop-3); line-height: 1.1; }
.ozl-gids__tekst { color: var(--ozl-tekst); line-height: 1.6; }
.ozl-gids__actie { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto !important; padding-top: 0.5rem; }
.ozl-gids__actie > * { margin: 0; }
.ozl-gids__knop { align-self: flex-start; }
.ozl-gids__knop.is-uitgeschakeld { background: var(--ozl-oppervlak-sterk); color: var(--ozl-gedempt); cursor: not-allowed; }
.ozl-gids__meta { color: var(--ozl-gedempt); font-size: 0.875rem; }
/* Lessenoverzicht: de gidsen uitklapbaar (details/summary), standaard dicht. */
.ozl-gidsen-uitklap { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-groot); }
.ozl-gidsen-uitklap__kop { align-items: center; border-radius: var(--ozl-r-groot); cursor: pointer; display: grid; gap: 0.15rem 1rem; grid-template-columns: minmax(0, 1fr) auto; list-style: none; padding: 1rem 1.25rem; }
.ozl-gidsen-uitklap__kop::-webkit-details-marker { display: none; }
.ozl-gidsen-uitklap__kop::after { grid-column: 2; grid-row: 1 / span 2; height: 1.25rem; width: 1.25rem; }
.ozl-gidsen-uitklap__kop::after, .ozl-facet__kop::after, .ozl-facetten__knop::after { background: currentcolor; content: ""; flex: none; -webkit-mask: var(--ozl-chevron) center / contain no-repeat; mask: var(--ozl-chevron) center / contain no-repeat; transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ozl-gidsen-uitklap[open] > .ozl-gidsen-uitklap__kop::after, .ozl-facet[open] > .ozl-facet__kop::after, .ozl-facetten[open] > .ozl-facetten__knop::after { transform: rotate(180deg); }
.ozl-gidsen-uitklap__kop:hover .ozl-gidsen-uitklap__titel { color: var(--ozl-primair); }
.ozl-gidsen-uitklap__kop:focus-visible { outline: 3px solid var(--ozl-focus); outline-offset: 2px; }
.ozl-gidsen-uitklap__titel { color: var(--ozl-inkt); font-size: 1.125rem; font-weight: 700; transition: color 0.16s ease; }
.ozl-gidsen-uitklap__sub { color: var(--ozl-gedempt); font-size: 0.9375rem; }
.ozl-gidsen-uitklap__inhoud { padding: 0 1.25rem 1.25rem; }
/* In- en uitklappen (zoals motion.css van de hoofdsite): hoogte schuift waar de browser dat kan, anders vervaagt de inhoud in. */
@keyframes ozl-disclose { from { opacity: 0; translate: 0 -0.35rem; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
	.ozl-gidsen-uitklap[open] .ozl-gidsen-uitklap__inhoud { animation: ozl-disclose 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); }
	@supports selector(::details-content) {
		.ozl-gidsen-uitklap { interpolate-size: allow-keywords; }
		.ozl-gidsen-uitklap::details-content { block-size: 0; overflow: clip; transition: block-size 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.32s allow-discrete; }
		.ozl-gidsen-uitklap[open]::details-content { block-size: auto; }
	}
}
.ozl-les-body { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .ozl-les-body { grid-template-columns: 13rem minmax(0, 1fr); } }
.ozl-les-body__zijbalk { margin: 0; }
.ozl-les-body__inhoud { margin: 0; min-width: 0; }
.ozl-les-body__inhoud > * + * { margin-block-start: 1.5rem; }
.ozl-inhoud { background: var(--ozl-oppervlak); border-radius: var(--ozl-r-groot); padding: 1rem; }
@media (min-width: 64rem) { .ozl-inhoud { background: transparent; padding: 0; position: sticky; top: calc(var(--ozl-header-hoogte) + 2rem); } }
.ozl-inhoud__titel { color: var(--ozl-gedempt); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; margin: 0 0 0.75rem; text-transform: uppercase; }
.ozl-inhoud__lijst { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 64rem) { .ozl-inhoud__lijst { border-left: 2px solid var(--ozl-rand); flex-direction: column; gap: 0; } }
.ozl-inhoud__link { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); display: block; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1rem; text-decoration: none; }
@media (min-width: 64rem) { .ozl-inhoud__link { background: transparent; border: 0; border-left: 2px solid transparent; border-radius: 0; font-size: 1rem; margin-left: -2px; padding: 0.45rem 1rem; } }
.ozl-inhoud__link:hover, .ozl-inhoud__link.is-actief { border-left-color: var(--ozl-primair); color: var(--ozl-primair); }
/* Secties met accentkleur per kaarttype */
.ozl-sectie { --ozl-accent: var(--ozl-primair); --ozl-accent-zacht: var(--ozl-primair-zacht); }
.ozl-sectie--leerkracht { --ozl-accent: var(--ozl-leerkracht); --ozl-accent-zacht: var(--ozl-leerkracht-zacht); }
.ozl-sectie--leerling { --ozl-accent: var(--ozl-leerling); --ozl-accent-zacht: var(--ozl-leerling-zacht); }
.ozl-sectie--werkkaart { --ozl-accent: var(--ozl-werkkaart); --ozl-accent-zacht: var(--ozl-werkkaart-zacht); }
.ozl-sectie--knipkaart { --ozl-accent: var(--ozl-knipkaart); --ozl-accent-zacht: var(--ozl-knipkaart-zacht); }
.ozl-sectie.ozl-video, .ozl-sectie.ozl-slides { --ozl-accent: var(--ozl-primair); --ozl-accent-zacht: var(--ozl-primair-zacht); }
.ozl-sectie.ozl-slo-doelen { --ozl-accent: var(--ozl-inkt); --ozl-accent-zacht: var(--ozl-oppervlak); }
.ozl-les-body__inhoud > .ozl-sectie { margin-block-start: clamp(2.5rem, 6vw, 4rem); }
.ozl-les-body__inhoud > .ozl-sectie:first-child { margin-block-start: 0; }
.ozl-sectie > h2:first-child, .ozl-leerlingdeel__titel, .ozl-werkkaarten__titel, .ozl-video__titel, .ozl-slides__titel, .ozl-slo-doelen__titel, .ozl-gerelateerd__titel { font-size: var(--wp--preset--font-size--kop-2); margin-block: 0 1.25rem; }
.ozl-sectie > h2:first-child::before, .ozl-leerlingdeel__titel::before, .ozl-werkkaarten__titel::before { background: var(--ozl-accent); border-radius: var(--ozl-r-pil); content: ""; display: block; height: 0.35rem; margin-block-end: 1rem; width: 3rem; }
/* Lessecties: de titel als gekleurd blok, zoals de sectiekop in de PDF. Leerkracht blauw, leerling
   groen, werkkaarten oranje, video en presentatie paars, SLO-leerdoelen inkt. */
.ozl-sectie--leerkracht > h2:first-child, .ozl-leerlingdeel__titel, .ozl-werkkaarten__titel, .ozl-video__titel, .ozl-slides__titel, .ozl-slo-doelen__titel { background: var(--ozl-accent); border-radius: var(--ozl-r-groot); color: #fff; line-height: 1.15; padding: clamp(1rem, 0.8rem + 1vw, 1.5rem) clamp(1.25rem, 1rem + 1vw, 2rem); }
.ozl-sectie--leerkracht > h2:first-child::before, .ozl-sectie > h2:is(.ozl-leerlingdeel__titel, .ozl-werkkaarten__titel, .ozl-video__titel, .ozl-slides__titel, .ozl-slo-doelen__titel)::before { display: none; }
.ozl-sectie h3 { margin-block: 2.25rem 0.75rem; }
.ozl-sectie h4 { font-size: 1.0625rem; letter-spacing: 0; line-height: 1.3; margin-block: 1.25rem 0.5rem; }
.ozl-leerdoelen { background: var(--ozl-accent-zacht, var(--ozl-leerkracht-zacht)); border-radius: var(--ozl-r-groot); padding: var(--ozl-kaart-padding); }
.ozl-leerdoelen__titel { margin-block-start: 0 !important; }
.ozl-leerdoelen__intro { font-weight: 700; margin-block: 0 0.5rem; }
.ozl-leerdoelen__lijst { margin: 0; padding-inline-start: 1.4rem; }
.ozl-leerdoelen__item { margin-block: 0.35rem; }
.ozl-leerdoelen__item::marker { color: var(--ozl-accent, var(--ozl-leerkracht)); font-weight: 700; }
/* Materiaalkaarten (voorbereiding en "Je hebt nodig"): naast elkaar, met een kleurcode als accent. */
.ozl-materialen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-block: 1rem 1.5rem; }
.ozl-materiaal { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-groot); box-shadow: var(--ozl-schaduw-subtiel); padding: 1.25rem 1.25rem 1rem; }
.ozl-sectie .ozl-materiaal__titel { align-items: center; display: flex; font-size: 1.0625rem; font-weight: 700; gap: 0.6rem; line-height: 1.3; margin: 0 0 0.75rem; }
.ozl-materiaal__titel::before { background: linear-gradient(90deg, var(--ozl-inkt) 0 25%, var(--ozl-code-rood) 25% 50%, var(--ozl-code-groen) 50% 75%, var(--ozl-code-blauw) 75%); border-radius: 2px; content: ""; flex: none; height: 0.5rem; width: 1.75rem; }
.ozl-afvinklijst { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.ozl-afvinklijst li { line-height: 1.45; margin: 0; padding-inline-start: 1.85rem; position: relative; }
.ozl-afvinklijst li::before { background: var(--ozl-accent, var(--ozl-primair)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat; border-radius: 0.375rem; content: ""; height: 1.25rem; left: 0; position: absolute; top: 0.08rem; width: 1.25rem; }
.ozl-tip { background: var(--ozl-oppervlak); border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-groot); padding: 1.25rem 1.5rem; }
.ozl-tip--let-op { background: #fff4d6; border-color: #f0dca1; }
.ozl-tip--voorkennis { background: var(--ozl-leerkracht-zacht); border-color: #cdd9f5; }
.ozl-tip__titel { font-weight: 700; margin: 0 0 0.35rem; }
.ozl-tip__titel::before { content: "💡"; margin-inline-end: 0.4em; }
.ozl-tip--voorkennis .ozl-tip__titel::before { content: "📚"; }
.ozl-tip--let-op .ozl-tip__titel::before { content: "⚠️"; }
.ozl-tip--afsluiting { background: var(--ozl-accent-zacht, var(--ozl-leerling-zacht)); border-color: transparent; }
.ozl-tip--afsluiting .ozl-tip__titel::before { content: "🏁"; }
.ozl-tip__inhoud > :last-child { margin-block-end: 0; }
.ozl-lesverloop__stappen { list-style: none; margin: 0; padding: 0; }
.ozl-lesstap { display: grid; gap: 1rem; grid-template-columns: 2.75rem minmax(0, 1fr); margin: 0; padding-block: 1.25rem; }
.ozl-lesstap + .ozl-lesstap { border-top: 1px solid var(--ozl-rand); }
.ozl-lesstap__nummer { align-items: center; background: var(--ozl-accent, var(--ozl-leerkracht)); border-radius: 50%; color: #fff; display: flex; font-size: 1.125rem; font-weight: 700; height: 2.75rem; justify-content: center; width: 2.75rem; }
.ozl-lesstap__kop { font-size: 1.25rem !important; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3 !important; margin: 0.45rem 0 0.5rem !important; }
.ozl-lesstap__fase { color: var(--ozl-accent, var(--ozl-leerkracht)); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; margin: 0.6rem 0 0; text-transform: uppercase; }
.ozl-lesstap--zonder-kop .ozl-lesstap__body { align-self: center; }
.ozl-lesstap__inhoud > :first-child { margin-block-start: 0; }
.ozl-lesstap__inhoud > :last-child { margin-block-end: 0; }
.ozl-leerlingdeel__intro > h3:first-child { margin-block-start: 0; }
.ozl-leerlingdeel__intro p { font-size: 1.125rem; }
.ozl-werkkaarten__intro { background: var(--ozl-werkkaart-zacht); border-radius: var(--ozl-r-middel); font-size: 0.9375rem; padding: 0.85rem 1.1rem; }
.ozl-werkkaarten__lijst { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ozl-werkkaarten__item { margin: 0; }
.ozl-werkkaarten__link { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-middel); box-shadow: var(--ozl-schaduw-subtiel); display: block; overflow: hidden; padding: 0.5rem; transition: box-shadow 180ms ease, transform 180ms ease; }
.ozl-werkkaarten__link:hover { box-shadow: var(--ozl-schaduw-kaart); transform: translateY(-0.25rem); }
.ozl-werkkaarten__afbeelding { display: block; width: 100%; }
.ozl-werkkaarten__label { color: var(--ozl-gedempt); display: block; font-size: 0.875rem; font-weight: 700; margin-block-start: 0.5rem; text-align: center; }
.ozl-werkkaarten__download { margin-block-start: 1.25rem; }
.ozl-video__lijst { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .ozl-video__lijst--meer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ozl-video__item { margin: 0; }
.ozl-video__embed, .ozl-slides__embed { aspect-ratio: 16 / 9; background: var(--ozl-inkt); border-radius: var(--ozl-r-groot); overflow: hidden; }
.ozl-slides__embed { border: 1px solid var(--ozl-rand); }
.ozl-video__embed iframe, .ozl-slides__embed iframe { border: 0; height: 100%; width: 100%; }
.ozl-video__bijschrift { color: var(--ozl-gedempt); font-size: 0.9375rem; margin-block-start: 0.5rem; }
.ozl-slo-doelen__lijst { display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.ozl-slo-doelen__item { align-items: start; background: var(--ozl-oppervlak); border-radius: var(--ozl-r-middel); display: grid; gap: 1rem; grid-template-columns: auto minmax(0, 1fr); padding: 1rem 1.25rem; }
.ozl-slo-doelen__code { background: var(--ozl-primair); border-radius: var(--ozl-r-pil); color: #fff; font-size: 0.875rem; font-weight: 700; min-width: 3.25rem; padding: 0.3rem 0.6rem; text-align: center; }
.ozl-slo-doelen__link { color: var(--ozl-inkt); font-weight: 700; text-decoration: none; }
.ozl-slo-doelen__link:hover { color: var(--ozl-primair); text-decoration: underline; }
.ozl-slo-doelen__domein { color: var(--ozl-gedempt); display: block; font-size: 0.875rem; margin-block-start: 0.2rem; }
.ozl-les-meer:not(:has(.ozl-gerelateerd)) { display: none; }

/* ---------- 15. Lessenoverzicht met filters, leerdoelen, tellers (fase 5) ---------- */
.ozl-lesoverzicht__form { display: flex; flex-direction: column; gap: 1.5rem; }
.ozl-lesoverzicht__balk { align-items: end; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.ozl-lesoverzicht__zoekveld { flex: 1 1 18rem; }
.ozl-lesoverzicht__zoek,
.ozl-lesoverzicht__sorteren select { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-middel); color: var(--ozl-tekst); font: inherit; min-height: 3.25rem; padding: 0.75rem 1rem; width: 100%; }
.ozl-lesoverzicht__zoek:focus,
.ozl-lesoverzicht__sorteren select:focus { border-color: var(--ozl-focus); box-shadow: var(--ozl-focus-ring); outline: 2px solid var(--ozl-focus); }
.ozl-lesoverzicht__sorteren { display: flex; flex-direction: column; gap: 0.25rem; }
/* Eigen chevron i.p.v. de pijl van de browser: zelfde vorm als de uitklappers, met ruimte rechts. */
.ozl-lesoverzicht__sorteren select { -webkit-appearance: none; appearance: none; background: #fff var(--ozl-chevron-tekst) no-repeat right 1rem center / 1.125rem; cursor: pointer; padding-inline-end: 3rem; }
.ozl-lesoverzicht__sorteren select:hover { border-color: var(--ozl-gedempt); }
.ozl-lesoverzicht__sorteren label { color: var(--ozl-gedempt); font-size: 0.875rem; font-weight: 600; }
.ozl-lesoverzicht__toepassen { min-height: 3.25rem; }
.ozl-lesoverzicht.is-js .ozl-lesoverzicht__toepassen { display: none; }
.ozl-lesoverzicht__kolommen { align-items: start; display: grid; gap: var(--ozl-grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .ozl-lesoverzicht__kolommen { grid-template-columns: 17rem minmax(0, 1fr); } }
.ozl-lesoverzicht__resultaten { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; transition: opacity 150ms ease; }
.ozl-lesoverzicht.is-laden .ozl-lesoverzicht__resultaten { opacity: 0.5; }
.ozl-lesoverzicht__resultaten > * { margin: 0; }
.ozl-lesoverzicht__aantal { color: var(--ozl-gedempt); font-weight: 600; }
.ozl-lesoverzicht .ozl-kaarten { list-style: none; margin: 0; padding: 0; }
/* Overzicht: 3 lessen per rij (15 per pagina = 5 rijen). */
@media (min-width: 64rem) { .ozl-lesoverzicht .ozl-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ozl-facetten { background: var(--ozl-oppervlak); border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-groot); padding: 1rem 1.25rem; }
@media (min-width: 64rem) { .ozl-facetten { position: sticky; top: calc(var(--ozl-header-hoogte) + 1rem); } }
.ozl-facetten__knop { align-items: center; cursor: pointer; display: flex; font-size: 1.125rem; font-weight: 700; gap: 0.35rem; list-style: none; min-height: 2.75rem; padding: 0.25rem 0; }
.ozl-facetten__knop::-webkit-details-marker { display: none; }
.ozl-facetten__knop::after { height: 1.125rem; margin-inline-start: auto; width: 1.125rem; }
@media (min-width: 64rem) { .ozl-facetten__knop { cursor: default; min-height: 0; pointer-events: none; } .ozl-facetten__knop::after { display: none; } }
.ozl-facetten__inhoud { display: flex; flex-direction: column; margin-top: 0.5rem; }
/* Elk filter als uitklapbare keuzelijst (details/summary), zonder eigen kader: alleen een scheidingslijn. */
.ozl-facet { border-top: 1px solid var(--ozl-rand); margin: 0; min-width: 0; }
.ozl-facet__kop { align-items: center; border-radius: var(--ozl-r-klein); cursor: pointer; display: flex; gap: 0.5rem; list-style: none; min-height: 2.75rem; padding: 0.5rem 0.25rem; }
.ozl-facet__kop::-webkit-details-marker { display: none; }
.ozl-facet__kop::after { height: 1rem; margin-inline-end: 0.125rem; width: 1rem; }
.ozl-facet__kop:hover { color: var(--ozl-primair); }
.ozl-facet__kop:focus-visible { outline: 3px solid var(--ozl-focus); outline-offset: 2px; }
.ozl-facet__titel { color: inherit; flex: 1; font-size: 0.9375rem; font-weight: 700; }
.ozl-facet__gekozen { background: var(--ozl-mint); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); flex: none; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; }
.ozl-facet__veld { border: 0; margin: 0; min-width: 0; padding: 0 0 0.75rem; }
.ozl-facet__lijst,
.ozl-facet__sublijst { display: flex; flex-direction: column; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.ozl-facet__sublijst { margin-left: 1.75rem; }
.ozl-facet__label { align-items: center; border-radius: var(--ozl-r-klein); cursor: pointer; display: flex; gap: 0.6rem; min-height: 2.25rem; padding: 0.25rem 0.375rem; }
.ozl-facet__label:hover { background: #fff; }
.ozl-facet__label input { accent-color: var(--ozl-primair); flex: none; height: 1.125rem; margin: 0; width: 1.125rem; }
.ozl-facet__naam { flex: 1; line-height: 1.3; min-width: 0; }
.ozl-facet__aantal { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-pil); color: var(--ozl-gedempt); flex: none; font-size: 0.75rem; font-weight: 600; min-width: 1.75rem; padding: 0.05rem 0.4rem; text-align: center; white-space: nowrap; }
.ozl-facet__optie.is-actief > .ozl-facet__label .ozl-facet__aantal { background: var(--ozl-mint); border-color: transparent; color: var(--ozl-inkt); }
/* Keuzes zonder lessen bij de huidige filters blijven zichtbaar, maar gedempt. */
.ozl-facet__optie.is-leeg > .ozl-facet__label .ozl-facet__naam { color: var(--ozl-gedempt); }
.ozl-facet__optie.is-leeg > .ozl-facet__label .ozl-facet__aantal { background: transparent; border-style: dashed; }
.ozl-facet__optie.is-actief > .ozl-facet__label .ozl-facet__naam { font-weight: 700; }
.ozl-facetten__wis { border-top: 1px solid var(--ozl-rand); margin: 0; padding-top: 0.75rem; }
.ozl-facetten__wis a,
.ozl-actieve-filters__wis { color: var(--ozl-link); font-weight: 600; }

.ozl-actieve-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.ozl-actief-filter { align-items: center; background: var(--ozl-mint); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); display: inline-flex; font-size: 0.875rem; font-weight: 700; gap: 0.4rem; min-height: 2.5rem; padding: 0.4rem 0.9rem; text-decoration: none; }
.ozl-actief-filter:hover { background: var(--ozl-mint-zacht); }
.ozl-lesoverzicht__paginering { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ozl-lesoverzicht__paginering [aria-current="page"] { align-items: center; background: var(--ozl-primair); border-radius: var(--ozl-r-pil); color: #fff; display: inline-flex; font-weight: 700; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0.75rem; }

/* Leerdoelenpagina */
.ozl-leerdoelen-overzicht { display: flex; flex-direction: column; gap: var(--ozl-sectie-compact); }
.ozl-leerdoelen-overzicht__intro { display: flex; flex-direction: column; gap: 1rem; }
.ozl-leerdoelen-overzicht__intro p { margin: 0; }
.ozl-leerdoelen-overzicht__inhoud ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.ozl-leerdoelen-overzicht__inhoud a { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); display: inline-flex; font-size: 0.875rem; font-weight: 600; min-height: 2.75rem; padding: 0.6rem 1rem; text-decoration: none; }
.ozl-leerdoelen-overzicht__inhoud a:hover { border-color: var(--ozl-primair); color: var(--ozl-primair); }
.ozl-leerdoelen-overzicht__domein { background: var(--ozl-oppervlak); border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-xl); display: flex; flex-direction: column; gap: 1rem; padding: var(--ozl-kaart-padding); scroll-margin-top: calc(var(--ozl-header-hoogte) + 1rem); }
.ozl-leerdoelen-overzicht__domein > * { margin: 0; }
.ozl-leerdoelen-overzicht__titel { align-items: center; display: flex; font-size: var(--wp--preset--font-size--kop-3); gap: 0.75rem; hyphens: auto; min-width: 0; overflow-wrap: anywhere; }
.ozl-leerdoelen-overzicht__titel .ozl-leerdoelen-overzicht__code { align-items: center; background: var(--ozl-primair); border-radius: var(--ozl-r-pil); color: #fff; display: inline-flex; flex: none; font-size: 1rem; height: 2.5rem; justify-content: center; width: 2.5rem; }
.ozl-leerdoelen-overzicht__omschrijving { color: var(--ozl-gedempt); max-width: 45rem; }
.ozl-leerdoelen-overzicht__alle a { color: var(--ozl-link); font-weight: 700; }
.ozl-leerdoelen-overzicht__doelen { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 64rem) { .ozl-leerdoelen-overzicht__doelen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ozl-leerdoelen-overzicht__doel { align-items: baseline; background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-middel); display: grid; gap: 0.25rem 1rem; grid-template-columns: 3rem minmax(0, 1fr); padding: 0.75rem 1rem; }
@media (min-width: 48rem) { .ozl-leerdoelen-overzicht__doel { grid-template-columns: 3rem minmax(0, 1fr) auto; } }
.ozl-leerdoelen-overzicht__doel .ozl-leerdoelen-overzicht__code { color: var(--ozl-primair); font-weight: 700; }
.ozl-leerdoelen-overzicht__lessen,
.ozl-leerdoelen-overzicht__geen { font-size: 0.875rem; grid-column: 2; white-space: nowrap; }
@media (min-width: 48rem) { .ozl-leerdoelen-overzicht__lessen, .ozl-leerdoelen-overzicht__geen { grid-column: auto; } }
.ozl-leerdoelen-overzicht__lessen { background: var(--ozl-mint); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); font-weight: 700; padding: 0.2rem 0.75rem; text-decoration: none; }
.ozl-leerdoelen-overzicht__lessen:hover { background: var(--ozl-mint-zacht); }
.ozl-leerdoelen-overzicht__geen { color: var(--ozl-gedempt); }

/* Tellers en SLO-tegels op de home */
.ozl-aantal-lessen { color: var(--ozl-context-accent, var(--ozl-primair)); font-size: 0.875rem; font-weight: 700; margin: 0; }
.ozl-slo__tegel { flex-direction: column; gap: 0.5rem; }
.ozl-slo__tegel-aantal { color: var(--ozl-mint); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; }

/* ---------- 13. Lightbox, tekstpagina's ---------- */
.ozl-lightbox { background: transparent; border: 0; max-height: 100vh; max-width: 100vw; padding: 0; }
.ozl-lightbox::backdrop { background: rgb(22 22 23 / 85%); }
.ozl-lightbox__inhoud { align-items: center; display: flex; flex-direction: column; gap: 1rem; padding: 3.5rem 1rem 1rem; }
.ozl-lightbox__afbeelding { background: #fff; border-radius: var(--ozl-r-klein); max-height: calc(100vh - 6rem); max-width: min(92vw, 60rem); object-fit: contain; }
.ozl-lightbox__sluiten, .ozl-lightbox__nav { background: #fff; border: 0; border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); cursor: pointer; font: inherit; font-weight: 700; min-height: 2.75rem; padding: 0.5rem 1rem; }
.ozl-lightbox__sluiten { position: fixed; right: 1rem; top: 1rem; }
.ozl-lightbox__knoppen { display: flex; gap: 0.5rem; }
.ozl-tekstpagina > * { max-width: 45rem; }
.ozl-tekstpagina > :is(.alignwide, .alignfull) { max-width: none; }
.ozl-tekstpagina h2 { margin-block: 2.5rem 1rem; }
.ozl-tekstpagina :where(p, li), .ozl-les-body__inhoud :where(p, li) { line-height: 1.7; }
.ozl-404 .wp-block-buttons { margin-top: 0.5rem; }

/* ---------- 14. Editor en print ---------- */
.ozl-editor-leeg, .ozl-editor-hint { background: var(--ozl-primair-zacht); border: 1px dashed var(--ozl-primair); border-radius: var(--ozl-r-middel); color: var(--ozl-primair-actief); font-size: 0.875rem; padding: 0.75rem 1rem; }
.ozl-editor-hint { background: #fff4d6; border-color: #7a5000; color: #7a5000; }
.ozl-editor-video { border-bottom: 1px solid var(--ozl-rand); margin-bottom: 1rem; padding-bottom: 0.5rem; }
@media print {
	.ozl-header, .ozl-footer, .ozl-les-body__zijbalk, .ozl-les-meer, .ozl-download, .ozl-kruimelpad { display: none !important; }
	.ozl-les-body { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* ---------- 16. Cookiebanner (plugin ozobot-cookie-consent van de website) ---------- */
/* De plugin levert de banner, het venster en de video-placeholder met eigen CSS die de --oz-tokens van de website gebruikt;
   hier koppelen we die aan de tokens van dit thema en geven we de knoppen en het venster de vorm van de website. */
:root {
	--oz-color-primary: var(--ozl-primair);
	--oz-color-primary-hover: var(--ozl-primair-hover);
	--oz-color-primary-active: var(--ozl-primair-actief);
	--oz-color-on-primary: #fff;
	--oz-color-text: var(--ozl-tekst);
	--oz-color-heading: var(--ozl-inkt);
	--oz-color-text-muted: var(--ozl-gedempt);
	--oz-color-border: var(--ozl-rand);
	--oz-color-link: var(--ozl-primair);
	--oz-color-focus: var(--ozl-focus);
	--oz-radius-large: var(--ozl-r-groot);
	--oz-radius-xl: var(--ozl-r-xl);
	--oz-radius-pill: var(--ozl-r-pil);
	--oz-shadow-elevated: var(--ozl-schaduw-verhoogd);
}
.oz-button { align-items: center; border: 2px solid transparent; border-radius: var(--ozl-r-pil); cursor: pointer; display: inline-flex; font: inherit; font-size: 1rem; font-weight: 700; gap: 0.5rem; justify-content: center; line-height: 1.2; min-height: 2.75rem; padding: 0.75rem 1.5rem; text-align: center; text-decoration: none; }
.oz-button.oz-button--primary { background: var(--ozl-primair); color: #fff; }
.oz-button.oz-button--primary:hover { background: var(--ozl-primair-hover); }
.oz-button.oz-button--primary:active { background: var(--ozl-primair-actief); }
.oz-button.oz-button--outline { background: transparent; border-color: var(--ozl-primair); color: var(--ozl-primair); }
.oz-button.oz-button--outline:hover { background: var(--ozl-primair); color: #fff; }
.oz-dialog:not([open]) { display: none; }
.oz-dialog { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-xl); box-shadow: var(--ozl-schaduw-verhoogd); box-sizing: border-box; color: var(--ozl-tekst); margin: auto; max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; padding: clamp(1.25rem, 4vw, 2.5rem); width: min(48rem, calc(100% - 2rem)); }
.oz-dialog::backdrop { background: rgb(22 22 23 / 55%); }
.oz-dialog-header { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.oz-dialog-header h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 0; }
.oz-dialog .oz-dialog-close { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-pil); color: var(--ozl-tekst); cursor: pointer; display: grid; flex: none; font-size: 1.5rem; min-height: 44px; min-width: 44px; place-items: center; }
.oz-dialog .oz-dialog-close:hover { background: var(--ozl-primair-zacht); }
.oz-dialog-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
html.oz-dialog-open { overflow: hidden; }
@media (max-width: 600px) {
	.oz-dialog { max-height: calc(100dvh - 1rem); padding: 1rem; width: calc(100% - 1rem); }
	.oz-dialog-actions > button { flex: 1 1 auto; }
}

/* 17. Duitse lessensite: lange samengestelde woorden ("Programmieren", "Kompetenzbereiche")
   netjes afbreken in koppen en kaarten. Alleen bij lang="de-…"; de NL-site verandert niet. */
:lang(de) :is(h1, h2, h3, h4, .ozl-kaart__titel, .ozl-facet__naam) {
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* ---------- 18. Communitylessen (lesmaker): archief /communitylessen/ en de lespagina ---------- */
/* Het archief gebruikt het lessenoverzicht met filters (sectie 15); .ozl-communitylessen is alleen nog de lege staat. */
/* Label "Communityles": een gevuld mintkleurig pilletje (geen gekleurde rand), op de kaart en boven de titel. */
.ozl-communitylabel { align-self: flex-start; background: var(--ozl-mint); border-radius: var(--ozl-r-pil); color: var(--ozl-inkt); display: inline-flex; font-size: 0.875rem; font-weight: 700; line-height: 1.2; margin: 0; padding: 0.4rem 0.85rem; width: fit-content; }
.ozl-kaart__media .ozl-communitylabel { box-shadow: 0 2px 10px rgb(22 22 23 / 14%); font-size: 0.8125rem; left: 0.75rem; padding: 0.35rem 0.75rem; pointer-events: none; position: absolute; top: 0.75rem; }
/* Alle communitykaarten 4:3 (R63), met of zonder werkkaartbeeld, zodat de rijen gelijk lopen. */
.ozl-kaart--community .ozl-kaart__media { aspect-ratio: 4 / 3; }
/* Met werkkaartbeeld (R57): de hele werkkaart (contain, niet bijgesneden) op wit, onder het label "Communityles";
   met de downloadbadge linksonder ook onderaan ruimte, zodat de badge de route nooit bedekt. */
.ozl-kaart__media .ozl-kaart__werkkaart { background: #fff; box-sizing: border-box; object-fit: contain; padding: 3rem 1rem 1rem; }
.ozl-kaart__media:has(.ozl-downloads) .ozl-kaart__werkkaart { padding-bottom: 3rem; }
.ozl-kaart__maker { color: var(--ozl-tekst); font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.ozl-communitylessen { display: flex; flex-direction: column; gap: 1.5rem; }
.ozl-communitylessen > * { margin: 0; }
.ozl-leeg--community { align-items: center; display: flex; flex-direction: column; gap: 1.25rem; }
.ozl-leeg--community p { margin: 0; }
/* Lespagina: credits in de rechterkolom van de paginakop (waar bij eigen lessen de afbeelding staat). */
.ozl-maker { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-groot); display: flex; flex-direction: column; gap: 0.75rem; padding: var(--ozl-kaart-padding); }
.ozl-maker > * { margin: 0; }
.ozl-maker__naam { color: var(--ozl-inkt); font-size: var(--wp--preset--font-size--lead); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.ozl-maker__link { align-items: center; align-self: flex-start; color: var(--ozl-link); display: inline-flex; font-weight: 700; min-height: 2.75rem; }
.ozl-maker__link:hover { color: var(--ozl-primair-actief); }
@media (min-width: 64rem) { .ozl-paginakop--community .ozl-maker { justify-self: end; max-width: 28rem; width: 100%; } }
/* Met werkkaartbeeld (R57): het beeld boven de credits, samen in de rechterkolom; het beeld is een link naar de werkkaart-PDF. */
.ozl-maker-kolom { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ozl-werkkaartbeeld { background: #fff; border: 1px solid var(--ozl-rand); border-radius: var(--ozl-r-groot); display: block; overflow: hidden; padding: 0.75rem; }
.ozl-werkkaartbeeld__afbeelding { display: block; height: auto; width: 100%; }
@media (hover: hover) and (pointer: fine) {
	a.ozl-werkkaartbeeld { transition: box-shadow 180ms ease; }
	a.ozl-werkkaartbeeld:hover { box-shadow: var(--ozl-schaduw-kaart); }
}
@media (min-width: 64rem) { .ozl-paginakop--community .ozl-maker-kolom { justify-self: end; max-width: 28rem; width: 100%; } }