/* Stijlproef 2 — Het affiche. Onderhouden bron, na de bestaande functionele basis. */
html { font-size:100%; }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:300 800; font-display:swap; src:url(fonts/bricolage-grotesque-normal-latin.woff2) format('woff2'); }
:root { --af-page-size:clamp(2rem,1.25rem + 2.5vw,3.5rem); --af-section-size:clamp(1.625rem,1.2rem + 1.5vw,2.25rem); --af-card-size:clamp(1.375rem,1.2rem + .5vw,1.5rem); --af-purple:#600f90; --af-yellow:#ffff54; --af-cyan:#74fbfd; --af-bg:#fff; --af-fg:#000; --af-soft:#3a2a49; --af-panel:#efe7f6; --af-line:#600f90; --af-focus:#245df6; --af-corner:64px; --af-gap:clamp(24px,4vw,48px); --font-tekst:'Bricolage Grotesque',sans-serif; --font-kop:'Bricolage Grotesque',sans-serif; }
html[data-theme="dark"] { color-scheme:dark; --af-bg:#000; --af-fg:#fff; --af-soft:#d7c9e6; --af-panel:#1c0d29; --af-line:#b981dd; --af-focus:#74fbfd; }
html[data-theme="light"] { color-scheme:light; }
body.affiche-site { margin:0; background:var(--af-bg); color:var(--af-fg); font:400 1.0625rem/1.55 var(--font-tekst); -webkit-font-smoothing:antialiased; font-optical-sizing:auto; }
html.af-form-open, html.af-form-open body.affiche-site { overflow:hidden; }
.affiche-site *, .affiche-site *::before, .affiche-site *::after { box-sizing:border-box; }
.affiche-site [hidden] { display:none !important; }
.affiche-site .site-wrapper { padding:0; background:var(--af-bg); overflow:clip; }
.affiche-site a { color:inherit; text-underline-offset:.2em; }
.affiche-site h1, .affiche-site h2, .affiche-site h3, .affiche-site h4 { color:inherit; font-family:var(--font-kop); font-weight:800; line-height:1.08; letter-spacing:-.03em; text-wrap:balance; }
.affiche-site main :is(h1,h2,h3) { overflow-wrap:anywhere; hyphens:auto; }
.affiche-site main p a:not(.button):not(.af-button) { text-decoration:underline; }
.affiche-site h1 { font-size:var(--af-page-size); }
.affiche-site h2 { font-size:var(--af-section-size); }
.affiche-site h3 { font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem); }
.affiche-site :focus-visible { outline:3px solid var(--af-focus); outline-offset:4px; }
.affiche-site .af-width, .affiche-site .container { width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--af-gap); }
.affiche-site .af-section { padding-block:clamp(2rem,4vw,3.5rem); }
.affiche-site .main-body, .affiche-site .main-page { margin-top:0; padding-top:0; }
.affiche-site.pagina-categorie .main-body { background:var(--af-bg); }
.affiche-site .af-header { background:var(--af-bg); position:relative; z-index:30; }
.af-header-row { display:flex; align-items:center; gap:1.5rem; min-height:76px; }
.af-language { display:flex; flex:none; border:1px solid var(--af-soft); border-radius:999px; padding:3px; gap:2px; }
.af-language a { display:flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; padding:4px 7px; border-radius:999px; font-size:.8rem; font-weight:700; text-decoration:none; color:inherit; }
.af-language a[aria-current="true"] { background:var(--af-fg); color:var(--af-bg); }
.af-language a:focus-visible { outline:3px solid currentColor; outline-offset:3px; }
@media (max-width:1100px) { .af-language { margin-left:auto; } .af-language + .af-theme { margin-left:0; } }
@media (max-width:380px) { .af-header-row { gap:.5rem; } .af-language a { min-width:30px; padding-inline:4px; } }
.af-logo { display:block; flex:none; }
.af-logo img { width:auto; height:46px; display:block; }
.af-logo .af-logo-dark { display:none; }
html[data-theme="dark"] .af-logo .af-logo-dark { display:block; }
html[data-theme="dark"] .af-logo .af-logo-light { display:none; }
.af-nav { flex:1; display:flex; align-items:center; gap:1.5rem; }
.af-nav ul { margin:0; padding:0; list-style:none; display:flex; align-items:center; gap:1.4rem; }
.af-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:1.0625rem; font-weight:500; text-decoration:none; border-bottom:3px solid transparent; }
.af-nav a:hover, .af-nav a[aria-current="page"] { border-color:var(--af-line); }
.af-nav .af-login { margin-left:auto; }
.af-header svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.af-theme, .af-menu-button { align-items:center; justify-content:center; flex:none; width:44px; height:44px; border:1px solid var(--af-soft); background:transparent; color:inherit; padding:0; border-radius:50%; cursor:pointer; }
.af-theme { display:flex; }
.af-theme[aria-pressed="true"] { background:var(--af-panel); }
.af-menu-button { display:none; border:0; border-radius:0; }
.af-menu-button span, .af-menu-button span::before, .af-menu-button span::after { display:block; width:24px; height:2px; background:currentColor; position:relative; }
.af-menu-button span::before, .af-menu-button span::after { content:""; position:absolute; }
.af-menu-button span::before { top:-7px; }
.af-menu-button span::after { top:7px; }
.af-menu-button[aria-expanded="true"] span { background:transparent; }
.af-menu-button[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.af-menu-button[aria-expanded="true"] span::after { top:0; transform:rotate(-45deg); }
.af-ribbon { background:var(--af-cyan); color:#000; }
.af-ribbon .af-width { display:flex; justify-content:flex-end; align-items:center; gap:2rem; min-height:44px; }
.af-ribbon p { margin:0; font-weight:700; font-size:1rem; }
.af-ribbon a { display:flex; align-items:center; gap:.5rem; min-height:44px; font-weight:600; text-decoration:none; }
.af-footer { padding-block:clamp(3rem,6vw,5rem); background:#000; color:#fff; }
.af-footer-grid { display:grid; grid-template-columns:80px minmax(0,1fr) minmax(0,1fr); gap:2.5rem 3rem; }
.af-footer .af-logo img { height:80px; }
.af-footer p { margin:0 0 1rem; }
.af-footer-info p { margin:0 0 1rem; max-width:48ch; }
.af-footer h2 { font-size:1.5rem; margin:0 0 1rem; }
.af-footer ul { list-style:none; padding:0; margin:0; }
.af-footer li a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.af-footer a:hover { text-decoration:underline; }
.af-socials { grid-column:2/-1; display:flex; flex-wrap:wrap; gap:1.5rem; }
.af-credits { grid-column:1/-1; border-top:1px solid #797079; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem 2rem; font-size:.875rem; }
.af-credits p { margin:0; }
.affiche-site .af-button, .affiche-site .button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:.9rem 1.4rem; border:2px solid var(--af-purple); border-radius:4px 4px 16px 4px; background:var(--af-purple); color:#fff; font-family:var(--font-tekst); font-weight:700; font-size:1rem; line-height:1.3; text-decoration:none; box-shadow:none; text-transform:none; white-space:normal; }
.affiche-site .button::before, .affiche-site .button::after { display:none; }
.affiche-site .af-button:hover, .affiche-site .button:hover { background:#451063; border-color:#451063; box-shadow:0 14px 22px -16px #600f9090; }
.affiche-site .button span { padding:0; }
.affiche-site .af-actions { display:flex; flex-wrap:wrap; gap:.75rem 1rem; }
.af-home-hero { background:var(--af-purple); color:#fff; }
.af-home-inner { padding-block:clamp(2.5rem,6vw,5rem); }
.af-home-top { display:grid; grid-template-columns:1.2fr 1fr; column-gap:3rem; }
.affiche-site .af-home-top h1 { margin:0; grid-row:span 2; color:var(--af-yellow); font-size:clamp(3rem,5.7vw,5.5rem); text-transform:uppercase; max-width:12ch; }
.af-home-top p { font-size:1.125rem; margin:0; max-width:40ch; }
.af-home-top .af-actions { margin-top:1.7rem; }
.affiche-site .af-home-top .af-button { background:var(--af-yellow); border-color:var(--af-yellow); color:#000; }
.affiche-site .af-home-top .af-parent { background:var(--af-cyan); border-color:var(--af-cyan); }
.af-home-photo { width:100%; max-width:780px; margin:1.5rem 0 12px auto; border-radius:0 0 var(--af-corner) 0; box-shadow:12px 12px 0 var(--af-cyan); overflow:hidden; animation:af-print .65s ease-out; }
.af-home-photo img { display:block; width:100%; height:auto; aspect-ratio:2.5; object-fit:cover; }
@keyframes af-print { from { transform:translate(-6px,-6px); box-shadow:0 0 0 var(--af-cyan); } to { transform:none; box-shadow:12px 12px 0 var(--af-cyan); } }
.af-moments { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; padding:0; margin:2rem 0 0; list-style:none; }
.af-moments li { border-top:3px solid var(--af-line); padding-top:1rem; }
.af-moments h3 { margin:0 0 .75rem; }
.af-moments a { text-decoration:none; }
.af-moments a:hover { text-decoration:underline; }
.af-moments p { margin:0; }
/* Four school moments: decorative line icons, coloured by the current theme. */
.af-moment-icon { display:block; width:2.75rem; height:2.75rem; margin-bottom:.875rem; color:var(--af-line); background:currentColor; -webkit-mask:var(--af-moment-art) center / contain no-repeat; mask:var(--af-moment-art) center / contain no-repeat; }
.af-moment-classroom { --af-moment-art:url("icons/moment-classroom.svg"); }
.af-moment-play { --af-moment-art:url("icons/moment-play.svg"); }
.af-moment-create { --af-moment-art:url("icons/moment-create.svg"); }
.af-moment-holiday { --af-moment-art:url("icons/moment-holiday.svg"); }
@media(max-width:1100px) {
  .af-header-row { flex-wrap:wrap; gap:1rem; padding-block:12px; }
  .af-nav { flex-basis:100%; order:3; }
  .af-theme { margin-left:auto; }
  .af-nav ul { flex-wrap:wrap; }
  .af-footer-grid { column-gap:2rem; }
  .af-js .af-header-row { min-height:64px; height:64px; padding-block:0; flex-wrap:nowrap; }
  .af-js .af-logo img { height:40px; }
  .af-js .af-menu-button { display:flex; }
  .af-js .af-nav { display:none; position:absolute; top:64px; left:0; right:0; background:var(--af-purple); color:#fff; padding:2rem var(--af-gap); max-height:calc(100dvh - 64px); overflow:auto; }
  .af-js .af-nav.af-open { display:flex; flex-direction:column; align-items:flex-start; }
  .af-js .af-nav ul { flex-direction:column; align-items:flex-start; gap:.4rem; }
  .af-js .af-nav a { font-size:1.5rem; font-weight:800; }
  .af-js .af-nav .af-login { font-size:1rem; margin:1rem 0 0; }
  .af-js .af-nav a:hover, .af-js .af-nav a[aria-current] { border-color:var(--af-yellow); }
}
@media(max-width:767px) {
  .af-home-top { grid-template-columns:1fr; gap:1.5rem; }
  .af-home-top .af-actions { margin-top:0; }
  .af-home-photo img { aspect-ratio:1.6; }
  .af-moments { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .af-footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .af-footer-grid > .af-logo { grid-column:1/-1; }
  .af-socials { grid-column:1/-1; }
  .af-ribbon p { display:none; }
}
@media(max-width:480px) {
  .af-moments, .af-footer-grid { grid-template-columns:1fr; }
  .af-home-top .af-actions { align-items:stretch; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { .affiche-site *, .affiche-site *::before, .affiche-site *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

/* CMS-paginatypen: dezelfde vorm, gevoed door de bestaande velden en codes. */
.affiche-site .af-title { margin:0; padding-block:clamp(1.5rem,3vw,2.5rem); border-radius:0 0 var(--af-corner) 0; background:var(--af-purple); color:#fff; }
.affiche-site .af-title .af-width { padding-inline:var(--af-gap); }
.affiche-site .af-title h1 { color:var(--af-yellow); margin:0; max-width:none; }
.affiche-site .af-title p, .af-title .af-intro { max-width:65ch; margin-top:1rem; font-size:1.0625rem; }
.af-title .af-intro:empty { display:none; }
.af-title .af-intro p { margin:0 0 .75rem; }
.af-title .af-intro p:last-child { margin-bottom:0; }
.affiche-site .af-reading { max-width:calc(76ch + 2 * var(--af-gap)); }
.af-reading .post-entry { margin-top:1.5rem; }
.af-reading .post-entry p, .af-school-copy p { margin:0 0 1.25rem; }
.af-reading .post-entry h2, .af-reading .post-entry h3 { margin:2rem 0 1rem; }
.affiche-site .mod-crumbs { margin:0; padding:1rem 0; background:var(--af-panel); color:var(--af-soft); font-size:.875rem; }
.affiche-site .mod-crumbs .path { background:none; color:inherit; }
.affiche-site .mod-crumbs a { color:inherit; }
.af-school-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:4rem; }
.af-school-copy { min-width:0; }
.af-school-copy h2 { margin:0 0 1.25rem; }
.af-school-copy table { width:100%; margin:0 0 1.5rem; border-collapse:collapse; table-layout:fixed; overflow-wrap:anywhere; hyphens:auto; font-size:1rem; line-height:1.5; }
.af-school-copy th, .af-school-copy td { padding:.75rem .5rem; border-bottom:1px solid var(--af-line); text-align:left; vertical-align:top; }
.af-school-copy thead { background:var(--af-panel); }
.af-school-copy th:first-child { width:35%; }
.af-school-copy tbody th { font-weight:600; }
/* Pasted text can carry fixed black ink or white backgrounds from an editor. */
html[data-theme="dark"] .affiche-site :is(.af-reading .post-entry, .af-school-copy .post-output) [style] { color:inherit !important; background-color:transparent !important; }
.af-school-address { align-self:start; min-width:0; padding:1.5rem; background:var(--af-panel); border-radius:0 0 var(--af-corner) 0; overflow-wrap:anywhere; hyphens:auto; }
.af-school-address img { display:block; width:100%; height:150px; object-fit:contain; background:#fff; padding:1rem; }
.af-school-address address { margin:1.5rem 0; font-style:normal; }
.affiche-site .af-offer { padding-block:clamp(2rem,4vw,3.5rem); background:var(--af-panel); }
.af-offer h2 { margin:0 0 1.5rem; }
.affiche-site .mod-lesblokken .lesblokken, .affiche-site .mod-lesblokken .lesblokken:first-child { margin:2rem 0; }
.affiche-site .mod-lesblokken .lesgroep { padding-top:1.5rem; border-top:3px solid var(--af-line); }
.affiche-site .mod-lesblokken .lesblok { border-bottom:1px solid var(--af-line); padding-bottom:1.5rem; }
.affiche-site .mod-lesblokken .lesblok-title { font-size:1.25rem; line-height:1.4; }
.affiche-site .mod-lesblokken .skill-output { font-size:1rem; line-height:1.55; }
.affiche-site .mod-lesblokken img { max-width:100%; height:auto; border-radius:0 0 32px 0; }
.affiche-site .mod-lesblokken .lesblok-datums .datum { background:var(--af-cyan); color:#000; padding:.25rem .65rem; font-size:.875rem; }
.affiche-site .mod-lesblokken .lesblok-datums .datum.past { background:var(--af-bg); color:var(--af-soft); }
.lesblok-inschrijfstatus { margin:1rem 0 0; color:var(--af-soft); font-size:1rem; }
.lesblok-inschrijfstatus a { text-decoration:underline; }
.af-skill-hero { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,4rem); row-gap:0; align-items:start; }
.affiche-site .af-skill-hero { --af-hero-gutter:max(var(--af-gap),calc((100vw - 1240px)/2 + var(--af-gap))); max-width:none; padding-top:0; padding-inline:var(--af-hero-gutter); }
.af-skill-title { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 2.5rem; background:var(--af-purple); color:#fff; margin-inline:calc(-1 * var(--af-hero-gutter)); padding:clamp(1.25rem,3vw,2.5rem) var(--af-hero-gutter) clamp(2.25rem,4.5vw,3.5rem); border-radius:0 0 var(--af-corner) 0; }
.affiche-site .af-skill-title h1 { color:var(--af-skill-ink,var(--af-yellow)); text-transform:uppercase; overflow-wrap:anywhere; max-width:100%; font-size:clamp(2.25rem,1.5rem + 4vw,5rem); line-height:1.02; hyphens:auto; margin:0; }
.affiche-site .af-skill-title h1.af-fit-title { flex-basis:100%; text-wrap:wrap; overflow-wrap:anywhere; }
.af-skill-title p { margin:0 0 .35em; max-width:32ch; font-size:clamp(1.125rem,1rem + .8vw,1.5rem); line-height:1.35; }
.af-skill-photo { grid-column:1; grid-row:2; position:relative; z-index:1; margin:-2.5rem 0 12px clamp(1.25rem,3vw,2.5rem); padding:clamp(.75rem,1.5vw,1rem); background:var(--af-skill-ink,var(--af-yellow)); border-radius:0 0 var(--af-corner) 0; box-shadow:12px 12px 0 var(--af-cyan); overflow:hidden; }
.af-skill-photo img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:0 0 calc(var(--af-corner) - 12px) 0; }
.af-skill-info { grid-column:2; grid-row:2; padding-top:clamp(1.25rem,2.5vw,2rem); }
.affiche-site .af-skill-info h2 { font-size:1.5rem; margin:0 0 1rem; }
.af-skill-info p { margin:0 0 1.5rem; }
.af-skill-info .af-parent-link { margin-top:1.5rem; font-size:1rem; color:var(--af-soft); }
.affiche-site .af-skill-body { padding-top:0; }
.af-skill-facts { margin:0 0 1.5rem; }
.af-skill-facts > div { display:grid; grid-template-columns:5rem minmax(0,1fr); gap:1rem; border-bottom:1px solid var(--af-line); padding:.85rem 0; }
.af-skill-facts > div:first-child { border-top:1px solid var(--af-line); }
.af-skill-facts dt { font-weight:700; }
.af-skill-facts dd { margin:0; min-width:0; overflow-wrap:anywhere; hyphens:auto; }
.affiche-site .af-button-parent { background:var(--af-cyan); border-color:var(--af-cyan); color:#000; }
.affiche-site .af-button-parent:hover { background:var(--af-cyan); color:#000; }
.affiche-site .af-button-outline { background:transparent; color:var(--af-fg); border:1px solid var(--af-line); }
.affiche-site .af-button-outline:hover { background:var(--af-panel); color:var(--af-fg); box-shadow:none; }
.af-program > p, .af-outcomes > p, .af-editorial-lead { max-width:70ch; }
.af-program > h2 { margin:0 0 1rem; }
.af-program-list { list-style:none; padding:0; margin:1.75rem 0; }
.af-program-list li { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:1rem 2rem; border-top:1px solid var(--af-line); padding:1.15rem 0; }
.af-program-list li:last-child { border-bottom:1px solid var(--af-line); }
.affiche-site .af-program-list h3 { font-size:var(--af-card-size); margin:0; }
.af-program-list p { margin:0; max-width:65ch; }
.af-program-note { color:var(--af-soft); font-size:1rem; }
.af-outcomes { background:var(--af-cyan); color:#000; border-radius:0 0 var(--af-corner) 0; padding:clamp(1.5rem,3vw,2.5rem); margin-top:2.5rem; }
.affiche-site .af-outcomes h2 { margin:0 0 1.25rem; }
.af-outcomes ul { display:flex; flex-wrap:wrap; gap:.65rem 2rem; padding:0; list-style:none; margin:0; }
.af-outcomes li { font-size:var(--af-card-size); font-weight:700; line-height:1.3; overflow-wrap:anywhere; hyphens:auto; }
.af-outcomes p { margin:1.25rem 0 0; }
.af-audience { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 3rem; }
.af-audience > div { border-top:1px solid var(--af-line); padding-top:1.5rem; }
.af-audience h2 { margin:0 0 1rem; }
.af-audience p { max-width:65ch; }
.af-audience a, .af-program a { text-decoration:underline; text-underline-offset:.2em; }
.af-teacher-route { grid-column:1/-1; border-top:1px solid var(--af-line); padding-top:1.5rem; margin:0; max-width:none !important; }
.af-form-anchor { scroll-margin-top:5rem; }
.af-form-intro { max-width:65ch; margin:1rem 0 1.5rem; }
@media (max-width:767px) {
  .af-program-list li, .af-audience { grid-template-columns:minmax(0,1fr); }
  .af-program-list li { gap:.5rem; padding:1rem 0; }
  .af-skill-facts > div { grid-template-columns:4.5rem minmax(0,1fr); gap:.75rem; }
  .af-outcomes { margin-top:2rem; }
  .af-outcomes ul { display:grid; gap:.75rem; }
}
@media (max-width:400px) {
  .af-skill-facts > div { grid-template-columns:minmax(0,1fr); gap:.25rem; }
}
.affiche-site .mod-block-cta .inner { background:var(--af-panel); color:var(--af-fg); border-radius:0 0 var(--af-corner) 0; }
.affiche-site .mod-block-cta h2 { color:var(--af-fg); font-size:var(--af-section-size); }
.affiche-site .af-search { padding-top:1.5rem; padding-bottom:1rem; }
.af-search label { display:block; font-weight:700; margin-bottom:.5rem; }
.af-search input { width:100%; max-width:600px; padding:.8rem 1rem; border:1px solid var(--af-soft); border-radius:0 0 10px 0; color:var(--af-fg); background:var(--af-bg); font:inherit; }
.affiche-site .af-search input { box-sizing:border-box; min-width:0; }
.af-count { margin:1rem 0 0; font-size:.875rem; color:var(--af-soft); }
.affiche-site .mod-filter { padding:1rem 0 2rem; background:var(--af-bg); }
.affiche-site .mod-filter .filter-categories { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:0; padding:0; list-style:none; }
.affiche-site .mod-filter .filter-categories li { float:none; width:auto; margin:0; }
.affiche-site .mod-filter .filter-categories a { display:inline-flex; align-items:center; gap:.3rem; min-height:44px; padding:.45rem .85rem; font-size:1rem; background:var(--af-panel); color:var(--af-fg); border:1px solid var(--af-line); border-radius:0 0 12px 0; text-decoration:none; }
.affiche-site .mod-filter .filter-categories a:hover, .affiche-site .mod-filter .filter-categories a[aria-current] { color:#000; background:var(--af-yellow); }
.affiche-site .skills-grid, .affiche-site .docenten-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.8rem 1.8rem; margin:0; padding-bottom:3rem; }
.affiche-site .skills-grid::before, .affiche-site .skills-grid::after, .affiche-site .docenten-grid::before, .affiche-site .docenten-grid::after { display:none; }
.affiche-site .skills-grid .item, .affiche-site .docenten-grid .item { width:auto; float:none; padding:0; margin:0; height:auto; min-width:0; }
.affiche-site .skills-grid .item .inner, .affiche-site .docenten-grid .item .inner { height:auto; margin:0; padding:0; background:transparent; color:var(--af-fg); overflow:visible; }
.affiche-site .skills-grid .item .inner::before, .affiche-site .docenten-grid .item .inner::before { display:none; }
.affiche-site .skills-grid .bv-image, .affiche-site .docenten-grid .bv-image { margin:0; position:relative; overflow:hidden; border-radius:0 0 var(--af-corner) 0; }
.affiche-site .skills-grid .bv-image img, .affiche-site .docenten-grid .bv-image img { display:block; width:100%; height:270px; object-fit:cover; opacity:1; transform:none; }
.affiche-site .skills-grid .bv-header { position:static; width:auto; height:auto; padding:1.25rem 0 0; margin:0; color:var(--af-fg); background:none; text-align:left; }
.affiche-site .skills-grid .bv-header h2 { font-size:var(--af-card-size); line-height:1.2; overflow-wrap:anywhere; hyphens:auto; color:inherit; margin:0 0 .5rem; }
.affiche-site .skills-grid .subtitle, .affiche-site .skills-grid .bv-header > span { display:block; color:var(--af-soft); font:400 1rem/1.5 var(--font-tekst); padding:0; }
.affiche-site .skills-grid .bv-header .icon, .affiche-site .skills-grid .arrow, .affiche-site .docenten-grid .arrow { display:none; }
.affiche-site .skills-grid .goto { position:static; display:inline-flex; align-items:center; min-height:44px; width:auto; height:auto; margin-top:.75rem; padding:0; text-indent:0; opacity:1; background:none; color:var(--af-fg); font-size:1rem; font-weight:600; text-decoration:underline; }
.affiche-site .skills-grid .article.hover .bv-header h2 { text-decoration:underline; text-underline-offset:.15em; }
/* Eén kader per school; logo, naam en aanbod vormen samen de kaart. */
.affiche-site .location-grid { gap:1.5rem; }
.affiche-site .location-grid .article:not(.cta-item) .inner { display:flex; flex-direction:column; height:100%; padding:1.5rem; border:2px solid var(--af-line); border-radius:0 0 32px 0; }
.affiche-site .location-grid .article:not(.cta-item) .inner:is(:hover,:focus-within) { background:var(--af-panel); }
.affiche-site .location-grid .bv-image { flex:none; height:190px; padding:1.5rem; background-color:#fff; background-size:contain; background-repeat:no-repeat; background-position:center; background-origin:content-box; border:0; border-radius:0; }
.affiche-site .location-grid .bv-image img { height:100%; }
.affiche-site .location-grid .goto { align-self:flex-start; margin-top:auto; padding-top:.75rem; }
.affiche-site .skills-grid .cta-item .inner, .affiche-site .docenten-grid .cta-item .inner { padding:1.5rem; height:100%; background:var(--af-panel); border-radius:0 0 var(--af-corner) 0; }
.affiche-site .skills-grid .cta-item .goto { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; font-size:1.375rem; color:var(--af-fg); text-decoration:none; margin:0; height:100%; transform:none; top:auto; left:auto; }
.affiche-site .docenten-grid .cta-item .goto { color:var(--af-fg); }
.affiche-site .skills-grid .cta-item .line { font-size:1rem; margin-top:1rem; }
.affiche-site .mod-skills-related { background:var(--af-panel); padding:3rem 0; }
.affiche-site .mod-skills-form::before, .affiche-site .mod-skills-related::before { display:none; }
.affiche-site .mod-skills-related .mod-header { margin-bottom:2rem; }
.affiche-site .mod-skills-related .mod-title { font-size:var(--af-section-size); width:auto; }
.affiche-site .mod-skills-related .skills-grid .item:nth-child(n) { display:block; }
.affiche-site .mod-skills-related .skills-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Bestaande formuliercontracten en panelen behouden hun selectors en states. */
.affiche-site input, .affiche-site select, .affiche-site textarea, .affiche-site button { font-family:var(--font-tekst); }
.affiche-site .form-default .field-row label, .affiche-site .form-wrap label.label { color:var(--af-fg); font-size:1rem; font-weight:600; padding:0; margin-bottom:.5rem; white-space:normal; line-height:1.4; }
.affiche-site .form-default .checkers { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; padding:.5rem 1rem; background:var(--af-panel); color:var(--af-fg); border:1px solid var(--af-soft); }
.affiche-site .form-default .checkers label { display:inline-flex; align-items:center; gap:.5rem; float:none; min-height:44px; margin:0; font-weight:400; }
.affiche-site .form-default .checkers input { flex:none; margin:0; }
.affiche-site .form-file-help { color:var(--af-soft); }
.affiche-site .form-default input.txt, .affiche-site .form-default textarea, .affiche-site .form-wrap input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), .affiche-site .form-wrap textarea, .affiche-site .form-wrap select, .affiche-site .form-default select, .affiche-site #search input, .affiche-site #search select { border:1px solid var(--af-soft); border-radius:0 0 10px 0; background:var(--af-bg); color:var(--af-fg); min-height:48px; padding:.75rem 1rem; font-size:1rem; box-shadow:none; width:100%; }
.affiche-site input::placeholder, .affiche-site textarea::placeholder { color:var(--af-soft); opacity:1; }
.affiche-site input[type="radio"], .affiche-site input[type="checkbox"] { accent-color:var(--af-purple); width:20px; height:20px; }
.affiche-site .radio-group label { display:inline-flex; gap:.5rem; align-items:center; min-height:44px; }
.affiche-site .mod-skills-form { background:var(--af-yellow); color:#000; margin:0 var(--af-gap) 3rem; border-radius:0 0 var(--af-corner) 0; padding:3rem 0; --af-bg:#fff; --af-fg:#000; --af-soft:#3a2a49; --af-focus:#245df6; }
.affiche-site .mod-skills-form .mod-title { font-size:var(--af-section-size); }
.affiche-site .mod-skills-form .form-default .field-row textarea { height:125px; }
.affiche-site .mod-inschrijven-form { background:var(--af-bg); color:var(--af-fg); overflow-y:auto; overscroll-behavior:contain; transition:left .25s ease; }
.affiche-site .mod-inschrijven-form .mod-header { background:var(--af-purple); color:#fff; border-radius:0 0 var(--af-corner) 0; }
.affiche-site .mod-inschrijven-form .mod-header h2 { color:var(--af-yellow); font-size:var(--af-section-size); }
.affiche-site .mod-inschrijven-form .mod-header h3 { opacity:1; font-size:1.0625rem; line-height:1.5; }
.affiche-site .mod-inschrijven-form .form-toggle { min-height:44px; display:inline-flex; align-items:center; text-transform:none; font-weight:600; }
.affiche-site .mod-inschrijven-form .mod-header .container { padding-top:5rem; }
.affiche-site .mod-inschrijven-form .inner > .container { max-width:900px; }
.affiche-site .form-wrap .form-group { margin-bottom:1.5rem; }
.affiche-site .af-form-section { border:0; padding:0; margin:0 0 2rem; min-width:0; }
.affiche-site .af-form-section legend { font-size:1.5rem; font-weight:800; padding:0; margin-bottom:1.5rem; color:var(--af-fg); }
.affiche-site .af-form-school { margin:1rem 0 0; font-weight:600; }
.affiche-site .form-wrap .group-6 { padding-right:1rem; }
.affiche-site .form-wrap .group-6:last-child { padding-right:0; }
.affiche-site .form-wrap .required, .affiche-site .form-default .required { color:inherit; }
.affiche-site .form-instroom { color:var(--af-fg); background:var(--af-panel); border-color:var(--af-line); }
.affiche-site .popup-venster { background:var(--af-bg); color:var(--af-fg); border-radius:0 0 32px 0; }
.affiche-site .popup-sluit { color:var(--af-fg); }
.affiche-site .field-error, .affiche-site .form-file-error { color:#aa180e; }
html[data-theme="dark"] .affiche-site .field-error, html[data-theme="dark"] .affiche-site .form-file-error { color:#ffb7ad; }
html[data-theme="dark"] .affiche-site .mod-skills-form .field-error { color:#aa180e; }

/* Inhoud in de negen Basis-pagina's blijft in het CMS bewerkbaar. */
.affiche-site .post-entry, .affiche-site .post-output, .affiche-site .page-output { font-size:1.0625rem; line-height:1.65; color:inherit; }
.affiche-site .post-entry h1, .affiche-site .post-entry h2, .affiche-site .post-entry h3, .affiche-site .page-header h1 { color:inherit; }
.affiche-site .post-header .maintitle, .affiche-site .post-header h1 { color:var(--af-fg); font-size:var(--af-page-size); }
.affiche-site .post-header .subtitle { font-family:var(--font-tekst); color:var(--af-soft); }
.affiche-site .post-header h2.maintitle { font-size:var(--af-section-size); }
.affiche-site .cms-block, .affiche-site .pagina-contact-detail { padding-block:clamp(2rem,4vw,3.5rem); }
.affiche-site .cms-block .post-entry { max-width:72ch; }
.affiche-site .cms-block img, .affiche-site .pagina-contact-detail .img-banner { border-radius:0 0 var(--af-corner) 0; }
.affiche-site .mod-teasers { padding-block:1rem 3rem; }
.affiche-site .mod-teasers .container { width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--af-gap); }
.affiche-site .mod-teasers .row { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin:0; }
.affiche-site .mod-teasers .row::before, .affiche-site .mod-teasers .row::after, .affiche-site .mod-teasers .item::before { display:none; }
.affiche-site .mod-teasers .item { width:auto; float:none; min-width:0; }
.affiche-site .mod-teasers .article { height:auto; background:var(--af-panel); border-radius:0 0 var(--af-corner) 0; overflow:hidden; }
.affiche-site .mod-teasers .article-info { color:var(--af-fg); padding:2rem; text-align:left; }
.affiche-site .mod-teasers .article-info .post-title { color:inherit; font-size:var(--af-section-size); }
.affiche-site .mod-teasers .article-info .post-header { margin-bottom:1rem; }
.affiche-site .mod-teasers .article-info .post-actions { margin-top:1.5rem; }
.affiche-site .mod-content-block-a { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; max-width:calc(1240px - 2 * var(--af-gap)); width:calc(100% - 2 * var(--af-gap)); margin:2rem auto 4rem; padding:0; }
.affiche-site .mod-content-block-a .bv-image { position:static; width:100%; height:auto; grid-column:2; grid-row:1; margin:0; background:none !important; }
.affiche-site .mod-content-block-a .bv-image img { display:block; width:100%; height:auto; border-radius:0 0 var(--af-corner) 0; }
.affiche-site .mod-content-block-a .container { grid-column:1; grid-row:1; padding:0; }
.affiche-site .mod-content-block-a .row { margin:0; }
.affiche-site .mod-content-block-a .col-left { width:auto; float:none; padding:0; }
.affiche-site .mod-content-block-a h2 { margin:0 0 1.5rem; }
.affiche-site .mod-usps { background:var(--af-panel); color:var(--af-fg); padding:3rem 0; }
.affiche-site .mod-usps h3 { font-size:1.5rem; }
.affiche-site .mod-usps .inner { height:auto; }
.affiche-site .mod-usps .bv-image img { border-radius:0 0 32px 0; }
.affiche-site .mod-quote { background:var(--af-purple); color:#fff; padding:3rem 0; margin:2rem var(--af-gap) 3rem; border-radius:0 0 var(--af-corner) 0; }
.affiche-site .mod-quote blockquote { font-size:clamp(1.5rem,1rem + 2vw,2.25rem); text-align:left; }
.affiche-site .mod-quote blockquote p { padding:0; color:#fff; }
.affiche-site .mod-quote cite { color:#e6d6f2; float:none; margin-top:1rem; }
.affiche-site .mod-blox .bv-header { background:var(--af-purple); color:#fff; border-radius:0 0 32px 0; }
.affiche-site .mod-blox .bv-header h2 { color:var(--af-yellow); }
.affiche-site .mod-vacature-blokken .inner { background:var(--af-purple); color:#fff; border-radius:0 0 32px 0; }
.affiche-site .mod-vacature-blokken .inner .maintitle { color:var(--af-yellow); }
.affiche-site .mod-cta, .affiche-site .cta-block { background:var(--af-cyan); color:#000; }
.affiche-site .cc-window { background:var(--af-panel); color:var(--af-fg); border-top:1px solid var(--af-line); font-family:var(--font-tekst); }
.affiche-site .cc-window .cc-message, .affiche-site .cc-window .cc-link { color:var(--af-fg); }
.affiche-site .cc-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; background:var(--af-purple); color:#fff; border-radius:0 0 12px 0; }
@media(max-width:900px) {
  .af-school-layout { grid-template-columns:minmax(0,1fr) 260px; gap:2rem; }
  .affiche-site .skills-grid, .affiche-site .docenten-grid, .affiche-site .mod-skills-related .skills-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .af-skill-hero { column-gap:1.5rem; }
}
@media(max-width:767px) {
  .af-school-layout, .af-skill-hero { grid-template-columns:minmax(0,1fr); }
  .af-skill-title { margin-inline:calc(-1 * var(--af-gap)); padding-inline:var(--af-gap); }
  .affiche-site .af-skill-title h1 { font-size:clamp(2.25rem,1.5rem + 4vw,2.75rem); }
  .af-skill-photo { grid-column:1; grid-row:auto; width:clamp(140px,42vw,220px); margin:-1.75rem 0 12px 1rem; box-shadow:8px 8px 0 var(--af-cyan); }
  .af-skill-info { grid-column:1; grid-row:auto; padding:1.25rem 0 0; }
  .af-school-address { max-width:450px; }
  .affiche-site .mod-content-block-a { grid-template-columns:1fr; gap:2rem; }
  .affiche-site .mod-content-block-a .container, .affiche-site .mod-content-block-a .bv-image { grid-column:1; grid-row:auto; }
  .affiche-site .mod-content-block-a .container { order:-1; }
  .affiche-site .mod-teasers .row { grid-template-columns:1fr; }
  .affiche-site .mod-skills-form { margin-inline:0; }
  .affiche-site .mod-inschrijven-form .mod-header .container { padding-bottom:2rem; }
}
@media(max-width:520px) {
  .affiche-site .skills-grid, .affiche-site .docenten-grid, .affiche-site .mod-skills-related .skills-grid { grid-template-columns:1fr; }
  .affiche-site .af-title { margin-inline:0; }
  .affiche-site .af-title .af-width { padding-inline:var(--af-gap); }
  .affiche-site .form-wrap .group-6 { float:none; width:100%; padding:0; margin-bottom:1rem; }
}

/* Mobiel is de hoofdroute: compacte keuzes, rustige koppen, aanbod vóór achtergrond. */
.affiche-site .mod-skills-related .mod-title { max-width:30ch; margin-inline:auto; text-wrap:balance; }
.affiche-site .pagina-contact-detail .contact-form h2 { font-size:var(--af-section-size); }
.affiche-site.pagina-contact .img-banner { height:280px; }
.affiche-site.pagina-contact .post-output { padding-right:0; max-width:65ch; }
.affiche-site .af-contact-map { margin-top:2rem; }
.affiche-site .af-contact-map iframe { width:100%; max-width:720px; height:280px; }
.affiche-site .cms-block .post-header { margin-bottom:1.5rem; }
.affiche-site .cms-block .post-header .subtitle { font-size:1.0625rem; font-weight:500; line-height:1.4; letter-spacing:0; }
.af-categories > summary { display:none; }
.af-responsive-details > summary { cursor:pointer; font-weight:700; min-height:48px; padding-block:.75rem; }
.af-school-details { margin-top:1.5rem; margin-bottom:1.5rem; }
.af-school-details > summary { color:var(--af-soft); display:list-item; list-style-position:inside; }
.affiche-site .pagina-contact-detail .post-output a { text-decoration:underline; text-underline-offset:.2em; }
.af-offer-description > summary { display:list-item; list-style-position:inside; cursor:pointer; min-height:44px; padding-block:.5rem; text-decoration:underline; text-underline-offset:.2em; }
.affiche-site .af-offer-description .skill-output { clear:both; padding-top:1rem; }
.affiche-site .af-school-details .af-school-layout { padding-top:1rem; padding-bottom:1rem; }
.af-school-copy h2:empty { display:none; }
.affiche-site .pagina-wat-wij-doen .mod-skills-intro { padding:clamp(2rem,4vw,3.5rem) 0; background:var(--af-purple); color:#fff; border-radius:0 0 var(--af-corner) 0; }
.affiche-site .pagina-wat-wij-doen .mod-skills-intro .row { margin:0; }
.affiche-site .pagina-wat-wij-doen .mod-skills-intro .col-sm-8 { width:100%; max-width:76ch; float:none; margin:0; padding:0; }
.affiche-site .pagina-wat-wij-doen .mod-skills-intro h1 { margin-bottom:1.25rem; line-height:1.08; color:var(--af-yellow); }
.affiche-site .pagina-wat-wij-doen .mod-skills-intro .page-output p:last-child { margin-bottom:0; }
.affiche-site .pagina-wat-wij-doen .mod-blox { padding-block:clamp(2rem,4vw,3.5rem); }
.affiche-site .pagina-wat-wij-doen .mod-blox .row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem 2rem; margin:0; }
.affiche-site .pagina-wat-wij-doen .mod-blox .row::before, .affiche-site .pagina-wat-wij-doen .mod-blox .row::after { display:none; }
.affiche-site .pagina-wat-wij-doen .mod-blox .item { --af-moment-bg:var(--af-cyan); --af-fg:#000; --af-line:#000; --af-focus:#600f90; display:flex; flex-direction:column; align-items:flex-start; float:none; width:auto; min-width:0; padding:clamp(1.5rem,3vw,2.5rem); border:0; border-radius:0 0 var(--af-corner) 0; background:var(--af-moment-bg); color:var(--af-fg); z-index:auto; }
/* The icon identifies the school moment in both languages, regardless of order. */
.affiche-site .pagina-wat-wij-doen .item:has(.af-moment-play) { --af-moment-bg:var(--af-yellow); }
.affiche-site .pagina-wat-wij-doen .item:has(.af-moment-create) { --af-moment-bg:var(--af-purple); --af-fg:#fff; --af-line:var(--af-yellow); --af-focus:var(--af-yellow); }
.affiche-site .pagina-wat-wij-doen .item:has(.af-moment-holiday) { --af-moment-bg:var(--kleur-oranje); --af-focus:#000; }
.affiche-site .pagina-wat-wij-doen .mod-blox .item .bv-header { padding:0; width:100%; min-height:0; background:transparent; border-radius:0; text-align:left; margin:0 0 .75rem; }
.affiche-site .pagina-wat-wij-doen .mod-blox .item .bv-header h2 { font-size:var(--af-card-size); color:var(--af-fg); margin:0; }
.affiche-site .pagina-wat-wij-doen .mod-blox .arrow { display:none; }
.affiche-site .pagina-wat-wij-doen .mod-blox .item .post-info { width:100%; min-width:0; margin:0 0 1.25rem; overflow-wrap:break-word; hyphens:auto; }
.affiche-site .pagina-wat-wij-doen .mod-blox .post-info p { margin:0; }
/* One shared brand button on every moment surface, in both themes. */
.affiche-site .pagina-wat-wij-doen .mod-blox .goto { margin-top:auto; max-width:100%; overflow-wrap:anywhere; background:var(--af-purple); color:#fff !important; border:2px solid #fff; }
.affiche-site .pagina-wat-wij-doen .mod-blox .goto:hover { background:#451063; color:#fff !important; border-color:#fff; box-shadow:none; }
.affiche-site .pagina-wat-wij-doen > .af-section { width:calc(100% - 2 * var(--af-gap)); max-width:calc(1240px - 2 * var(--af-gap)); margin:0 auto clamp(2rem,4vw,3.5rem); padding:clamp(1.5rem,3vw,2.5rem); background:var(--af-panel); border-radius:0 0 var(--af-corner) 0; }
.affiche-site .pagina-wat-wij-doen > .af-section p:last-child { margin-bottom:0; }
@media(max-width:767px) {
  .affiche-site .af-title { margin-top:0; }
  .af-title .af-intro { line-height:1.5; }
  .affiche-site .af-search { padding-top:1.25rem; padding-bottom:.75rem; }
  .af-count { margin-top:.5rem; }
  .af-categories { margin:0 var(--af-gap) 1.25rem; border-block:1px solid var(--af-line); }
  .af-categories > summary { display:list-item; }
  .af-categories > summary span { font-weight:400; }
  .affiche-site .af-categories .container { padding:0; }
  .affiche-site .af-categories .mod-filter { padding:.5rem 0 1rem; }
  .affiche-site .skills-grid, .affiche-site .mod-skills-related .skills-grid { grid-template-columns:1fr; gap:1.5rem; }
  .affiche-site .skills-grid .article:not(.cta-item) .inner { display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:1rem; }
  .affiche-site .skills-grid .article:not(.cta-item) .bv-image { grid-column:1; grid-row:1/3; border-radius:0 0 24px 0; align-self:start; }
  .affiche-site .skills-grid .bv-image img { height:136px; }
  .affiche-site .skills-grid .bv-header { grid-column:2; padding:0; }
  .affiche-site .skills-grid .goto { grid-column:2; align-self:start; justify-self:start; margin-top:.25rem; line-height:1.4; }
  .affiche-site .skills-grid .cta-item .inner { min-height:0; }
  .affiche-site .skills-grid .cta-item .goto { font-size:var(--af-card-size); }
  .affiche-site .location-grid .article:not(.cta-item) .inner { padding:16px; column-gap:16px; }
  .affiche-site .location-grid .article:not(.cta-item) .bv-image { height:96px; padding:12px; border-radius:0; }
  .affiche-site .location-grid .bv-image img { height:100%; }
  .affiche-site .location-grid .goto { padding-top:0; }
  .affiche-site.pagina-contact .img-banner { height:160px; }
  .affiche-site.pagina-contact .main-body { padding-block:2rem; }
  .affiche-site.pagina-contact .contact-form { margin-top:2rem; }
  .affiche-site .pagina-wat-wij-doen .mod-blox .row { grid-template-columns:1fr; gap:2rem; }
  .af-skill-info p { margin-bottom:1rem; }
  .af-skill-info .af-parent-link { margin-top:1rem; }
  .af-skill-info .af-button { width:100%; }
  .affiche-site .mod-lesblokken .lesblokken .l-col { float:left; width:96px; padding:0; margin:0 1rem 1rem 0; }
  .affiche-site .mod-lesblokken .lesblokken .r-col { float:none; width:auto; padding:0; }
  .affiche-site .mod-lesblokken .skill-poster { margin:0; }
  .affiche-site .mod-lesblokken .skill-poster img { width:96px; height:136px; object-fit:cover; border-radius:0 0 24px 0; }
  .affiche-site .mod-lesblokken .lesblokken .skill-info { min-height:136px; margin-bottom:1.25rem; }
  .affiche-site .mod-lesblokken .lesblokken h3 { font-size:var(--af-card-size); }
  .affiche-site .mod-lesblokken .lesblokken .lesblok { clear:both; }
}

/* Vacatures: open keuzes per vakgebied, met de bestaande sollicitatieroutes. */
.affiche-site .af-vacancy-intro { padding-bottom:0; }
.af-vacancy-intro h1 { margin:0 0 1rem; }
.af-vacancy-intro .post-entry, .af-vacancy-heading .post-entry { max-width:72ch; }
.af-vacancy-intro p, .af-vacancy-heading p { margin:0; }
.affiche-site .af-vacancy-open { padding-top:2rem; padding-bottom:3rem; }
.af-vacancy-heading h2 { margin:0 0 .75rem; }
.af-vacancy-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2.5rem; margin:2rem 0 0; padding:0; list-style:none; }
.af-vacancy-list li { min-width:0; border-top:1px solid var(--af-line); }
.affiche-site .af-vacancy-link { display:grid; grid-template-columns:24px minmax(0,1fr) 24px; align-items:start; gap:1rem; height:100%; padding:1.25rem 0; color:var(--af-fg); text-decoration:none; }
.af-vacancy-copy h3 { margin:0 0 .5rem; font-size:var(--af-card-size); line-height:1.2; text-wrap:wrap; }
.af-vacancy-copy p { margin:0; font-size:1.0625rem; line-height:1.55; color:var(--af-soft); }
.af-vacancy-symbol, .af-vacancy-arrow { color:var(--af-line); font-size:1.5rem; line-height:1.2; }
.af-vacancy-symbol::before, .af-vacancy-arrow::before { margin:0; }
.af-vacancy-symbol.af-logo img { width:24px; height:27px; }
.af-vacancy-link:hover h3, .af-vacancy-link:focus-visible h3 { text-decoration:underline; text-underline-offset:.2em; }
@media(max-width:767px) {
  .af-vacancy-list { grid-template-columns:1fr; margin-top:1.5rem; }
}

/* ==========================================================================
   Kleur: Lagunelicht (2026-09-25)
   Lagune-palet (turquoise, zeegroen, limoen; koraal voor acties) met mesh-
   verlopen, glazen panelen en gloed. Kleurdynamiek: meshkleuren per
   paginatype, tint per vakgebied (category-1..7), skilltitel en kopvlek uit de
   skillfoto en kopvlek uit het schoollogo (affiche.js).
   Bron: skillsforkids_herbouw/kleurproef (brug.css + tokens.py, variant 5); de
   contrastcontrole staat in tokens.py en kleurproef/qa/controle.cjs.
   Laag 1 wijst de bestaande --af-* tokens naar semantische --k-* tokens en
   zet elke kleurdragende regel hierboven om; laag 2 bevat de tokenwaarden
   (licht en donker) en de dynamiek. html:root heeft dezelfde selectorzwaarte
   als de geteste proeflaag.
   ========================================================================== */
/* 1. Bestaande affiche-tokens wijzen voortaan naar de semantische tokens. */
html:root {
  --af-bg: var(--k-grond);
  --af-fg: var(--k-tekst);
  --af-soft: var(--k-zacht);
  --af-panel: var(--k-vlak-kleur);
  --af-line: var(--k-lijn);
  --af-focus: var(--k-focus);
  --af-purple: var(--k-knop-kleur);
  --af-yellow: var(--k-accent-a);
  --af-cyan: var(--k-accent-b);
  --kleur-oranje: var(--k-accent-c);
  /* Oude merkpalet uit site.css (o.a. categoriekleuren achter skilltegels). */
  --kleur-paars-donker: var(--k-kop-kleur);
  --kleur-paars: var(--k-accent-c);
  --kleur-cyaan: var(--k-accent-b);
  --kleur-geel: var(--k-accent-a);
  --kleur-rood: var(--k-knop-kleur);
  --kleur-roze: var(--k-accent-c);
  --k-glas: none;
  --k-schaduw-kop: none;
  --k-schaduw-vlak: none;
  --k-schaduw-accent: none;
  --k-knop-schaduw: none;
  --k-knop-druk: none;
}
html:root body.affiche-site { background: var(--k-grond); color: var(--k-tekst); }
html:root .affiche-site .site-wrapper { background: var(--k-pagina, var(--k-grond)); background-attachment: fixed; }
html:root .affiche-site .af-header,
html:root .affiche-site .mod-filter,
html:root .affiche-site .main-body,
html:root .affiche-site.pagina-categorie .main-body { background: transparent; }

/* 2. Kopvlakken: hero, paginatitel, skilltitel, formulierkop, quote, blokkoppen.
   Mogen een verloop zijn; tekst en titel krijgen eigen tokens. */
html:root .af-home-hero,
html:root .affiche-site .af-title,
html:root .af-skill-title,
html:root .affiche-site .mod-inschrijven-form .mod-header,
html:root .affiche-site .mod-quote,
html:root .affiche-site .mod-blox .bv-header,
html:root .affiche-site .mod-vacature-blokken .inner,
html:root .affiche-site .pagina-wat-wij-doen .mod-skills-intro,
html:root .affiche-site .pagina-wat-wij-doen .mod-blox .item:has(.af-moment-create) {
  background: var(--k-kop);
  background-color: var(--k-kop-kleur);
  color: var(--k-kop-tekst);
  box-shadow: var(--k-schaduw-kop);
}
html:root .affiche-site .af-home-top h1,
html:root .affiche-site .af-title h1,
html:root .affiche-site .af-skill-title h1,
html:root .affiche-site .mod-inschrijven-form .mod-header h2,
html:root .affiche-site .mod-blox .bv-header h2,
html:root .affiche-site .mod-vacature-blokken .inner .maintitle,
html:root .affiche-site .pagina-wat-wij-doen .mod-skills-intro h1 { color: var(--k-kop-titel); }
html:root .affiche-site .mod-quote blockquote p { color: var(--k-kop-tekst); }
html:root .affiche-site .mod-quote cite { color: var(--k-kop-zacht); }
html:root .affiche-site .mod-inschrijven-form .form-toggle,
html:root .affiche-site .mod-inschrijven-form .form-toggle:hover { color: var(--k-kop-tekst); }
/* De thuisheld heeft geen hoek; de schaduw hoort bij losse vlakken. */
html:root .af-home-hero { box-shadow: none; }

/* 3. Panelen (ondersteunende vlakken). */
html:root .affiche-site .mod-crumbs,
html:root .af-school-address,
html:root .affiche-site .af-offer,
html:root .affiche-site .mod-block-cta .inner,
html:root .affiche-site .skills-grid .cta-item .inner,
html:root .affiche-site .docenten-grid .cta-item .inner,
html:root .affiche-site .mod-skills-related,
html:root .affiche-site .mod-teasers .article,
html:root .affiche-site .mod-usps,
html:root .affiche-site .pagina-wat-wij-doen > .af-section {
  background: var(--k-vlak);
  -webkit-backdrop-filter: var(--k-glas);
  backdrop-filter: var(--k-glas);
}
html:root .af-school-address,
html:root .affiche-site .mod-block-cta .inner,
html:root .affiche-site .skills-grid .cta-item .inner,
html:root .affiche-site .docenten-grid .cta-item .inner,
html:root .affiche-site .mod-teasers .article,
html:root .affiche-site .pagina-wat-wij-doen > .af-section { box-shadow: var(--k-schaduw-vlak); }
html:root .affiche-site .location-grid .article:not(.cta-item) .inner { border-color: var(--k-lijn); }
html:root .affiche-site .location-grid .article:not(.cta-item) .inner:is(:hover,:focus-within) { background: var(--k-vlak); box-shadow: var(--k-schaduw-vlak); }

/* 4. Accentvlakken (voorheen geel, cyaan, oranje). */
html:root .af-ribbon { background: var(--k-accent-b); color: var(--k-accent-b-tekst); }
html:root .affiche-site .mod-lesblokken .lesblok-datums .datum { background: var(--k-accent-b); color: var(--k-accent-b-tekst); }
html:root .affiche-site .mod-lesblokken .lesblok-datums .datum.past { background: var(--k-veld); color: var(--k-zacht); }
html:root .af-outcomes { background: var(--k-accent-b-vlak, var(--k-accent-b)); color: var(--k-accent-b-tekst); box-shadow: var(--k-schaduw-accent); }
html:root .affiche-site .mod-cta,
html:root .affiche-site .cta-block { background: var(--k-accent-b-vlak, var(--k-accent-b)); color: var(--k-accent-b-tekst); }
html:root .affiche-site .mod-filter .filter-categories a { background: var(--k-vlak); border-color: var(--k-lijn); color: var(--k-tekst); }
html:root .affiche-site .mod-filter .filter-categories a:hover,
html:root .affiche-site .mod-filter .filter-categories a[aria-current] { background: var(--k-accent-a); color: var(--k-accent-a-tekst); }
html:root .affiche-site .mod-skills-form {
  background: var(--k-accent-a-vlak, var(--k-accent-a));
  color: var(--k-accent-a-tekst);
  box-shadow: var(--k-schaduw-accent);
  --af-bg: var(--k-veld-licht, #fffdf8);
  --af-fg: var(--k-accent-a-tekst);
  --af-soft: var(--k-accent-a-zacht, var(--k-accent-a-tekst));
  --af-focus: var(--k-focus-licht, var(--k-focus));
}
html:root .affiche-site .mod-skills-form .field-error,
html:root[data-theme="dark"] .affiche-site .mod-skills-form .field-error { color: var(--k-fout-licht, #9c1a10); }
html:root .affiche-site .field-error,
html:root .affiche-site .form-file-error { color: var(--k-fout); }

/* Wat wij doen: vier momentkaarten. */
html:root .affiche-site .pagina-wat-wij-doen .mod-blox .item { --af-moment-bg: var(--k-accent-b); --af-fg: var(--k-accent-b-tekst); --af-line: var(--k-accent-b-tekst); --af-focus: var(--k-accent-b-tekst); box-shadow: var(--k-schaduw-accent); }
html:root .affiche-site .pagina-wat-wij-doen .item:has(.af-moment-play) { --af-moment-bg: var(--k-accent-a); --af-fg: var(--k-accent-a-tekst); --af-line: var(--k-accent-a-tekst); }
html:root .affiche-site .pagina-wat-wij-doen .item:has(.af-moment-holiday) { --af-moment-bg: var(--k-accent-c); --af-fg: var(--k-accent-c-tekst); --af-line: var(--k-accent-c-tekst); --af-focus: var(--k-accent-c-tekst); }
html:root .affiche-site .pagina-wat-wij-doen .item:has(.af-moment-create) { --af-fg: var(--k-kop-tekst); --af-line: var(--k-kop-titel); --af-focus: var(--k-kop-titel); box-shadow: var(--k-schaduw-kop); }
html:root .affiche-site .pagina-wat-wij-doen .mod-blox .item .bv-header { background: transparent; box-shadow: none; }
html:root .affiche-site .pagina-wat-wij-doen .mod-blox .goto,
html:root .affiche-site .pagina-wat-wij-doen .mod-blox .goto:hover { background: var(--k-knop); background-color: var(--k-knop-kleur); color: var(--k-knop-tekst) !important; border-color: transparent; }

/* 5. Knoppen. site.css zet .button-tekst met !important op wit; de tokens volgen die prioriteit. */
html:root .affiche-site .af-button,
html:root .affiche-site .button,
html:root .affiche-site .cc-btn {
  background: var(--k-knop);
  background-color: var(--k-knop-kleur);
  border-color: transparent;
  color: var(--k-knop-tekst) !important;
  box-shadow: var(--k-knop-schaduw);
}
html:root .affiche-site .af-button:hover,
html:root .affiche-site .button:hover {
  background: var(--k-knop-hover);
  border-color: transparent;
  color: var(--k-knop-tekst) !important;
  box-shadow: var(--k-knop-schaduw);
}
html:root .affiche-site .af-button:active,
html:root .affiche-site .button:active { box-shadow: var(--k-knop-druk); transform: var(--k-knop-druk-verschuif, none); }
html:root .affiche-site .af-home-top .af-button { background: var(--k-accent-a); color: var(--k-accent-a-tekst) !important; box-shadow: var(--k-schaduw-accent-knop, var(--k-knop-schaduw)); }
html:root .affiche-site .af-home-top .af-parent,
html:root .affiche-site .af-button-parent,
html:root .affiche-site .af-button-parent:hover { background: var(--k-accent-b); color: var(--k-accent-b-tekst) !important; box-shadow: var(--k-schaduw-accent-knop, var(--k-knop-schaduw)); }
html:root .affiche-site .af-button-outline { background: transparent; color: var(--k-tekst) !important; border: 1px solid var(--k-lijn); box-shadow: none; }
html:root .affiche-site .af-button-outline:hover { background: var(--k-vlak); color: var(--k-tekst) !important; }
html:root .affiche-site input[type="radio"],
html:root .affiche-site input[type="checkbox"] { accent-color: var(--k-knop-kleur); }

/* 6. Velden. */
html:root .affiche-site :is(.form-default, .form-wrap) :is(input.txt, textarea, select, input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])),
html:root .affiche-site #search :is(input, select),
html:root .affiche-site input[type="search"],
html:root .af-search input { background: var(--k-veld); color: var(--k-tekst); }
html:root .affiche-site .mod-skills-form :is(.form-default, .form-wrap) :is(input.txt, textarea, select, input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])) { background: var(--k-veld-licht, #fffdf8); color: var(--k-accent-a-tekst); }
html:root .affiche-site .mod-inschrijven-form,
html:root .affiche-site .popup-venster { background: var(--k-grond); }

/* 7. Foto's met offset (thuisfoto, skillfoto). */
html:root .af-home-photo { box-shadow: var(--k-foto-offset); animation: none; }
html:root .af-skill-photo { background: var(--k-foto-rand, var(--k-accent-a)); box-shadow: var(--k-foto-offset); }
@media (max-width:767px) { html:root .af-skill-photo { box-shadow: var(--k-foto-offset-klein, var(--k-foto-offset)); } }

/* 8. Navigatie. */
@media (max-width:1100px) {
  html:root .af-js .af-nav { background: var(--k-kop); background-color: var(--k-kop-kleur); color: var(--k-kop-tekst); }
  html:root .af-js .af-nav a:hover,
  html:root .af-js .af-nav a[aria-current] { border-color: var(--k-kop-titel); }
}
html:root .af-language a[aria-current="true"] { background: var(--k-tekst); color: var(--k-grond); }

/* 9. Voet. */
html:root .af-footer { background: var(--k-voet); color: var(--k-voet-tekst); }
html:root .af-credits { border-top-color: var(--k-voet-lijn); color: var(--k-voet-zacht); }

/* 10. Logo: de bestaande PNG dient als masker; de vulling komt uit een token
   (effen of verloop). Het beeld zelf wordt buiten het inhoudsvak geschoven. */
html:root .af-header .af-logo img,
html:root .af-footer .af-logo img {
  background: var(--k-logo);
  -webkit-mask: url(../img/skillsforkids-logo-black.png) center / contain no-repeat;
  mask: url(../img/skillsforkids-logo-black.png) center / contain no-repeat;
  object-position: -9999px 0;
}
html:root[data-theme="dark"] .af-header .af-logo img { background: var(--k-logo-donker, var(--k-logo)); }
html:root .af-footer .af-logo img { background: var(--k-logo-voet); }

/* 11. Cookiemelding. */
html:root .affiche-site .cc-window { background: var(--k-vlak-kleur); color: var(--k-tekst); border-top-color: var(--k-lijn); }

/* --- Lagunelicht: tokenwaarden en dynamiek --- */
html:root {
  --k-grond: #e8f4ef;
  --k-tekst: #0f2a2e;
  --k-zacht: #3d5b5d;
  --k-lijn: #2f9c90;
  --k-focus: #b83a24;
  --k-fout: #a3170c;
  --k-vlak-kleur: #dcefe9;
  --k-vlak: rgba(214, 240, 232, .55);
  --k-veld: rgba(246, 252, 250, .78);
  --k-glas: blur(16px) saturate(1.3);
  --k-kop-kleur: #8fdcc0;
  --k-kop-tekst: #0f2a2e;
  --k-kop-titel: #0a3438;
  --k-kop-zacht: #0f2a2e;
  --k-accent-a: #ffcdb8;
  --k-accent-a-tekst: #0f2a2e;
  --k-accent-b: #bde6f0;
  --k-accent-b-tekst: #0f2a2e;
  --k-accent-c: #f6e39a;
  --k-accent-c-tekst: #0f2a2e;
  --k-accent-a-vlak: radial-gradient(70% 90% at 0% 100%, #ffb9a0 0%, transparent 62%), radial-gradient(60% 80% at 100% 0%, #ffe2c4 0%, transparent 62%), #ffcdb8;
  --k-accent-b-vlak: radial-gradient(70% 90% at 0% 0%, #9fdcef 0%, transparent 62%), radial-gradient(60% 80% at 100% 100%, #c9f0d8 0%, transparent 62%), #bde6f0;
  --k-knop-kleur: #c2412a;
  --k-knop-tekst: #ffffff;
  --k-knop-schaduw: 0 12px 24px -12px rgba(194, 65, 42, .6);
  --k-schaduw-accent-knop: 0 12px 24px -14px rgba(15, 80, 80, .4);
  --k-voet-pagina: radial-gradient(50% 60% at 0% 0%, rgba(59, 184, 173, .32) 0%, transparent 62%), radial-gradient(50% 60% at 100% 100%, rgba(255, 138, 112, .22) 0%, transparent 62%), #0f2a2e;
  --k-voet: #0f2a2e;
  --k-voet-tekst: #e8f4ef;
  --k-voet-zacht: #a9c9c4;
  --k-voet-lijn: #2d4a4c;
  --k-logo: linear-gradient(to top right, #1c8f96, #4fb87d 60%, #8ccf5a);
  --k-logo-voet: linear-gradient(to top right, #5fd6c9, #b5e878);
  --k-foto-offset: 0 0 0 6px rgba(214, 240, 232, .8), 0 30px 60px -30px rgba(15, 110, 100, .5);
  --k-foto-offset-klein: 0 0 0 4px rgba(214, 240, 232, .8), 0 20px 40px -20px rgba(15, 110, 100, .5);
  --k-foto-rand: #bfe8e0;
  --k-schaduw-kop: 0 30px 60px -40px rgba(15, 110, 100, .45);
  --k-schaduw-vlak: inset 0 0 0 1px rgba(240, 255, 250, .7), 0 24px 48px -30px rgba(15, 90, 90, .35);
  --k-schaduw-accent: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 24px 48px -30px rgba(15, 90, 90, .3);
  --k-kop: linear-gradient(to top right, #3bb8ad, #6fd0a8, #c8e991, #8fdcc0);
  --k-knop: linear-gradient(to top right, #b83d28, #c9452c);
  --k-knop-hover: linear-gradient(to top right, #9a3120, #ad3a25);
}
html:root[data-theme="dark"] {
  --k-grond: #0a1c20;
  --k-tekst: #e2f3ee;
  --k-zacht: #a2c4bf;
  --k-lijn: #4cc7b5;
  --k-focus: #ffb199;
  --k-fout: #ffb7ad;
  --k-vlak-kleur: #12302f;
  --k-vlak: rgba(120, 220, 200, .07);
  --k-veld: rgba(255, 255, 255, .07);
  --k-glas: blur(16px) saturate(1.2);
  --k-kop-kleur: #0f3a3c;
  --k-kop-tekst: #effff9;
  --k-kop-titel: #bff0d8;
  --k-kop-zacht: #effff9;
  --k-accent-a: #f2b9a3;
  --k-accent-a-tekst: #0a1c20;
  --k-accent-b: #9fd6e2;
  --k-accent-b-tekst: #0a1c20;
  --k-accent-c: #e6d488;
  --k-accent-c-tekst: #0a1c20;
  --k-accent-a-vlak: radial-gradient(70% 90% at 0% 100%, #f5a98e 0%, transparent 62%), radial-gradient(60% 80% at 100% 0%, #f6d0b0 0%, transparent 62%), #f2b9a3;
  --k-accent-b-vlak: radial-gradient(70% 90% at 0% 0%, #86c9e0 0%, transparent 62%), radial-gradient(60% 80% at 100% 100%, #b3e6c8 0%, transparent 62%), #9fd6e2;
  --k-knop-kleur: #ff9e7d;
  --k-knop-tekst: #0a1c20;
  --k-knop-schaduw: 0 12px 26px -12px rgba(255, 138, 112, .55);
  --k-schaduw-accent-knop: 0 12px 26px -14px rgba(0, 0, 0, .6);
  --k-voet-pagina: radial-gradient(50% 60% at 0% 0%, rgba(59, 184, 173, .22) 0%, transparent 62%), radial-gradient(50% 60% at 100% 100%, rgba(255, 138, 112, .14) 0%, transparent 62%), #061316;
  --k-voet: #061316;
  --k-voet-tekst: #e2f3ee;
  --k-voet-zacht: #a2c4bf;
  --k-voet-lijn: #1d3538;
  --k-logo: linear-gradient(to top right, #5fd6c9, #b5e878);
  --k-logo-voet: linear-gradient(to top right, #5fd6c9, #b5e878);
  --k-foto-offset: 0 0 0 6px rgba(120, 220, 200, .12), 0 30px 70px -30px rgba(59, 184, 173, .45);
  --k-foto-offset-klein: 0 0 0 4px rgba(120, 220, 200, .12), 0 20px 50px -20px rgba(59, 184, 173, .45);
  --k-foto-rand: #1d5a55;
  --k-schaduw-kop: 0 30px 70px -40px rgba(59, 184, 173, .35);
  --k-schaduw-vlak: inset 0 0 0 1px rgba(160, 255, 230, .1), 0 24px 48px -30px rgba(0, 0, 0, .8);
  --k-schaduw-accent: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 24px 48px -30px rgba(0, 0, 0, .7);
  --k-kop: linear-gradient(to top right, #0e5f63, #137565, #3d6a2a, #0f3a3c);
  --k-knop: linear-gradient(to top right, #ff8a70, #ffb38a);
  --k-knop-hover: linear-gradient(to top right, #ffa08a, #ffc4a2);
}
/* Dynamiek: vlekken per paginatype en vakgebied; foto/logo via kleur-dynamiek.js. */
html:root body { --k-vlek-1: #6fd0a8; --k-vlek-2: #9fd8ef; --k-vlek-3: #c8e991; --k-kop-basis: #a8e3d3; --k-pvlek-1: #cdeee3; --k-pvlek-2: #dff3c6; --k-pvlek-3: #d2eaf6; }  /* standaard */
html:root[data-theme="dark"] body { --k-vlek-1: #137565; --k-vlek-2: #1d5a78; --k-vlek-3: #3d6a2a; --k-kop-basis: #0f3a3c; --k-pvlek-1: rgba(59, 184, 173, .13); --k-pvlek-2: rgba(200, 233, 145, .07); --k-pvlek-3: rgba(80, 160, 230, .08); }  /* standaard */
html:root body:has(main.pagina-home) { --k-vlek-1: #3bb8ad; --k-vlek-2: #c8e991; --k-vlek-3: #9fd8ef; --k-kop-basis: #7fd6be; --k-pvlek-1: #c6ede4; --k-pvlek-2: #e3f5c4; --k-pvlek-3: #cfe9f7; }  /* home */
html:root[data-theme="dark"] body:has(main.pagina-home) { --k-vlek-1: #0e5f63; --k-vlek-2: #3d6a2a; --k-vlek-3: #1d5a78; --k-kop-basis: #0f3a3c; --k-pvlek-1: rgba(59, 184, 173, .16); --k-pvlek-2: rgba(200, 233, 145, .08); --k-pvlek-3: rgba(80, 160, 230, .1); }  /* home */
html:root body:has(main.pagina-skills) { --k-vlek-1: #ff9f86; --k-vlek-2: #ffc9a8; --k-vlek-3: #3bb8ad; --k-kop-basis: #9fdcc8; --k-pvlek-1: #ffe0d4; --k-pvlek-2: #d2f0e8; --k-pvlek-3: #fff0c8; }  /* skillsoverzicht */
html:root[data-theme="dark"] body:has(main.pagina-skills) { --k-vlek-1: #7a3a2a; --k-vlek-2: #0e5f63; --k-vlek-3: #6a4a20; --k-kop-basis: #15333a; --k-pvlek-1: rgba(255, 138, 112, .12); --k-pvlek-2: rgba(59, 184, 173, .12); --k-pvlek-3: rgba(247, 231, 161, .06); }  /* skillsoverzicht */
html:root body:has(main.af-overview.pagina-docenten) { --k-vlek-1: #8fd3ef; --k-vlek-2: #a9c8ff; --k-vlek-3: #9fe3c9; --k-kop-basis: #b3e2e6; --k-pvlek-1: #d4ecfa; --k-pvlek-2: #d9e5ff; --k-pvlek-3: #d2f2e6; }  /* scholenoverzicht */
html:root[data-theme="dark"] body:has(main.af-overview.pagina-docenten) { --k-vlek-1: #1d4f7a; --k-vlek-2: #15607a; --k-vlek-3: #135a4a; --k-kop-basis: #0f2f40; --k-pvlek-1: rgba(80, 160, 230, .14); --k-pvlek-2: rgba(120, 150, 255, .1); --k-pvlek-3: rgba(59, 184, 173, .1); }  /* scholenoverzicht */
html:root body:has(main.pagina-school) { --k-vlek-1: #3bb8ad; --k-vlek-2: #9fd8ef; --k-vlek-3: #9fe3c9; --k-kop-basis: #9fdcd0; --k-pvlek-1: #d2f0e8; --k-pvlek-2: #d4ecfa; --k-pvlek-3: #ffe6da; }  /* school */
html:root[data-theme="dark"] body:has(main.pagina-school) { --k-vlek-1: #0e5f63; --k-vlek-2: #1d5a78; --k-vlek-3: #135a4a; --k-kop-basis: #0f3a3c; --k-pvlek-1: rgba(59, 184, 173, .14); --k-pvlek-2: rgba(80, 160, 230, .1); --k-pvlek-3: rgba(255, 138, 112, .07); }  /* school */
html:root body:has(main.pagina-skill-detail) { --k-vlek-1: #3bb8ad; --k-vlek-2: #3bb8ad; --k-vlek-3: #6fd0a8; --k-kop-basis: #9fdcd0; --k-pvlek-1: color-mix(in oklab, var(--k-vak, #3bb8ad) 55%, #e8f4ef); --k-pvlek-2: #e6f5cf; --k-pvlek-3: #d4ecfa; }  /* skill */
html:root[data-theme="dark"] body:has(main.pagina-skill-detail) { --k-vlek-1: #0e5f63; --k-vlek-2: #0e5f63; --k-vlek-3: #137565; --k-kop-basis: #0f3a3c; --k-pvlek-1: color-mix(in oklab, var(--k-vak, #0e5f63) 40%, transparent); --k-pvlek-2: rgba(200, 233, 145, .07); --k-pvlek-3: rgba(80, 160, 230, .08); }  /* skill */
html:root body:has(main.pagina-wat-wij-doen) { --k-vlek-1: #3bb8ad; --k-vlek-2: #ffc9a8; --k-vlek-3: #c8e991; --k-kop-basis: #8fdcc0; --k-pvlek-1: #cdeee3; --k-pvlek-2: #ffe6da; --k-pvlek-3: #e3f5c4; }  /* wat-wij-doen */
html:root[data-theme="dark"] body:has(main.pagina-wat-wij-doen) { --k-vlek-1: #0e5f63; --k-vlek-2: #7a3a2a; --k-vlek-3: #3d6a2a; --k-kop-basis: #0f3a3c; --k-pvlek-1: rgba(59, 184, 173, .14); --k-pvlek-2: rgba(255, 138, 112, .09); --k-pvlek-3: rgba(200, 233, 145, .07); }  /* wat-wij-doen */
html:root body:has(main.pagina-contact-detail) { --k-vlek-1: #ffc9a8; --k-vlek-2: #3bb8ad; --k-vlek-3: #9fd8ef; --k-kop-basis: #a8e3d3; --k-pvlek-1: #ffe0d4; --k-pvlek-2: #d2f0e8; --k-pvlek-3: #fff0c8; }  /* contact */
html:root[data-theme="dark"] body:has(main.pagina-contact-detail) { --k-vlek-1: #7a3a2a; --k-vlek-2: #0e5f63; --k-vlek-3: #1d5a78; --k-kop-basis: #0f3a3c; --k-pvlek-1: rgba(255, 138, 112, .13); --k-pvlek-2: rgba(59, 184, 173, .12); --k-pvlek-3: rgba(247, 231, 161, .06); }  /* contact */
html:root body:has(main.searchpage) { --k-vlek-1: #9fd8ef; --k-vlek-2: #ffc9a8; --k-vlek-3: #c8e991; --k-kop-basis: #a8e3d3; --k-pvlek-1: #d4ecfa; --k-pvlek-2: #ffe6da; --k-pvlek-3: #e3f5c4; }  /* zoeken */
html:root[data-theme="dark"] body:has(main.searchpage) { --k-vlek-1: #1d5a78; --k-vlek-2: #7a3a2a; --k-vlek-3: #3d6a2a; --k-kop-basis: #0f3a3c; --k-pvlek-1: rgba(80, 160, 230, .13); --k-pvlek-2: rgba(255, 138, 112, .09); --k-pvlek-3: rgba(200, 233, 145, .07); }  /* zoeken */
html:root body.category-0, html:root .category-0 { --k-vak: #7fd3c6; --k-vak-inkt: #0e5f58; --k-vak-actief: #7fd3c6; }  /* Overig */
html:root[data-theme="dark"] body.category-0, html:root[data-theme="dark"] .category-0 { --k-vak: #0f5f58; --k-vak-inkt: #7fd3c6; --k-vak-actief: #7fd3c6; }  /* Overig */
html:root body.category-1, html:root .category-1 { --k-vak: #ea9ae0; --k-vak-inkt: #8e1f78; --k-vak-actief: #ea9ae0; }  /* Expressie */
html:root[data-theme="dark"] body.category-1, html:root[data-theme="dark"] .category-1 { --k-vak: #6e1f5e; --k-vak-inkt: #ea9ae0; --k-vak-actief: #ea9ae0; }  /* Expressie */
html:root body.category-2, html:root .category-2 { --k-vak: #8fd8f5; --k-vak-inkt: #0b5f8a; --k-vak-actief: #8fd8f5; }  /* Taal */
html:root[data-theme="dark"] body.category-2, html:root[data-theme="dark"] .category-2 { --k-vak: #0f4f73; --k-vak-inkt: #8fd8f5; --k-vak-actief: #8fd8f5; }  /* Taal */
html:root body.category-3, html:root .category-3 { --k-vak: #8fe8a8; --k-vak-inkt: #17693a; --k-vak-actief: #8fe8a8; }  /* Media communicatie */
html:root[data-theme="dark"] body.category-3, html:root[data-theme="dark"] .category-3 { --k-vak: #17603a; --k-vak-inkt: #8fe8a8; --k-vak-actief: #8fe8a8; }  /* Media communicatie */
html:root body.category-4, html:root .category-4 { --k-vak: #d6f07a; --k-vak-inkt: #4d6608; --k-vak-actief: #d6f07a; }  /* Sport */
html:root[data-theme="dark"] body.category-4, html:root[data-theme="dark"] .category-4 { --k-vak: #4a6310; --k-vak-inkt: #d6f07a; --k-vak-actief: #d6f07a; }  /* Sport */
html:root body.category-5, html:root .category-5 { --k-vak: #ffc56b; --k-vak-inkt: #8a4a00; --k-vak-actief: #ffc56b; }  /* Beeldend */
html:root[data-theme="dark"] body.category-5, html:root[data-theme="dark"] .category-5 { --k-vak: #7a4a0c; --k-vak-inkt: #ffc56b; --k-vak-actief: #ffc56b; }  /* Beeldend */
html:root body.category-6, html:root .category-6 { --k-vak: #b3a6ff; --k-vak-inkt: #4a2bc4; --k-vak-actief: #b3a6ff; }  /* Techniek */
html:root[data-theme="dark"] body.category-6, html:root[data-theme="dark"] .category-6 { --k-vak: #3a2a8a; --k-vak-inkt: #b3a6ff; --k-vak-actief: #b3a6ff; }  /* Techniek */
html:root body.category-7, html:root .category-7 { --k-vak: #ff9fa0; --k-vak-inkt: #a1263a; --k-vak-actief: #ff9fa0; }  /* Maatschappelijke vorming */
html:root[data-theme="dark"] body.category-7, html:root[data-theme="dark"] .category-7 { --k-vak: #7a2330; --k-vak-inkt: #ff9fa0; --k-vak-actief: #ff9fa0; }  /* Maatschappelijke vorming */
html:root body.pagina-categorie.category-1 { --k-kop-basis: #ea9ae0; --k-vlek-1: #ea9ae0; --k-vlek-2: #c9a3f0; --k-vlek-3: #3bb8ad; --k-pvlek-1: color-mix(in oklab, #ea9ae0 50%, #e8f4ef); }  /* groepspagina Expressie */
html:root[data-theme="dark"] body.pagina-categorie.category-1 { --k-kop-basis: #6e1f5e; --k-vlek-1: #6e1f5e; --k-vlek-2: #4a2a7a; --k-vlek-3: #0e5f63; --k-pvlek-1: color-mix(in oklab, #6e1f5e 40%, transparent); }  /* groepspagina Expressie */
html:root body.pagina-categorie.category-1 .mod-filter .filter-categories a.category-1 { background: var(--k-vak-actief); color: var(--k-accent-a-tekst); }
html:root body.pagina-categorie.category-1 .mod-filter .filter-categories a.category-1 i { color: inherit; }
html:root body.pagina-categorie.category-2 { --k-kop-basis: #8fd8f5; --k-vlek-1: #8fd8f5; --k-vlek-2: #9bb8ff; --k-vlek-3: #3bb8ad; --k-pvlek-1: color-mix(in oklab, #8fd8f5 50%, #e8f4ef); }  /* groepspagina Taal */
html:root[data-theme="dark"] body.pagina-categorie.category-2 { --k-kop-basis: #0f4f73; --k-vlek-1: #0f4f73; --k-vlek-2: #1f3f80; --k-vlek-3: #0e5f63; --k-pvlek-1: color-mix(in oklab, #0f4f73 40%, transparent); }  /* groepspagina Taal */
html:root body.pagina-categorie.category-2 .mod-filter .filter-categories a.category-2 { background: var(--k-vak-actief); color: var(--k-accent-a-tekst); }
html:root body.pagina-categorie.category-2 .mod-filter .filter-categories a.category-2 i { color: inherit; }
html:root body.pagina-categorie.category-3 { --k-kop-basis: #8fe8a8; --k-vlek-1: #8fe8a8; --k-vlek-2: #8ff0cf; --k-vlek-3: #3bb8ad; --k-pvlek-1: color-mix(in oklab, #8fe8a8 50%, #e8f4ef); }  /* groepspagina Media communicatie */
html:root[data-theme="dark"] body.pagina-categorie.category-3 { --k-kop-basis: #17603a; --k-vlek-1: #17603a; --k-vlek-2: #0f5e4a; --k-vlek-3: #0e5f63; --k-pvlek-1: color-mix(in oklab, #17603a 40%, transparent); }  /* groepspagina Media communicatie */
html:root body.pagina-categorie.category-3 .mod-filter .filter-categories a.category-3 { background: var(--k-vak-actief); color: var(--k-accent-a-tekst); }
html:root body.pagina-categorie.category-3 .mod-filter .filter-categories a.category-3 i { color: inherit; }
html:root body.pagina-categorie.category-4 { --k-kop-basis: #d6f07a; --k-vlek-1: #d6f07a; --k-vlek-2: #a8f08a; --k-vlek-3: #3bb8ad; --k-pvlek-1: color-mix(in oklab, #d6f07a 50%, #e8f4ef); }  /* groepspagina Sport */
html:root[data-theme="dark"] body.pagina-categorie.category-4 { --k-kop-basis: #4a6310; --k-vlek-1: #4a6310; --k-vlek-2: #2f6a1a; --k-vlek-3: #0e5f63; --k-pvlek-1: color-mix(in oklab, #4a6310 40%, transparent); }  /* groepspagina Sport */
html:root body.pagina-categorie.category-4 .mod-filter .filter-categories a.category-4 { background: var(--k-vak-actief); color: var(--k-accent-a-tekst); }
html:root body.pagina-categorie.category-4 .mod-filter .filter-categories a.category-4 i { color: inherit; }
html:root body.pagina-categorie.category-5 { --k-kop-basis: #ffc56b; --k-vlek-1: #ffc56b; --k-vlek-2: #ffae80; --k-vlek-3: #3bb8ad; --k-pvlek-1: color-mix(in oklab, #ffc56b 50%, #e8f4ef); }  /* groepspagina Beeldend */
html:root[data-theme="dark"] body.pagina-categorie.category-5 { --k-kop-basis: #7a4a0c; --k-vlek-1: #7a4a0c; --k-vlek-2: #7a3514; --k-vlek-3: #0e5f63; --k-pvlek-1: color-mix(in oklab, #7a4a0c 40%, transparent); }  /* groepspagina Beeldend */
html:root body.pagina-categorie.category-5 .mod-filter .filter-categories a.category-5 { background: var(--k-vak-actief); color: var(--k-accent-a-tekst); }
html:root body.pagina-categorie.category-5 .mod-filter .filter-categories a.category-5 i { color: inherit; }
html:root body.pagina-categorie.category-6 { --k-kop-basis: #b3a6ff; --k-vlek-1: #b3a6ff; --k-vlek-2: #d3a6ff; --k-vlek-3: #3bb8ad; --k-pvlek-1: color-mix(in oklab, #b3a6ff 50%, #e8f4ef); }  /* groepspagina Techniek */
html:root[data-theme="dark"] body.pagina-categorie.category-6 { --k-kop-basis: #3a2a8a; --k-vlek-1: #3a2a8a; --k-vlek-2: #55267a; --k-vlek-3: #0e5f63; --k-pvlek-1: color-mix(in oklab, #3a2a8a 40%, transparent); }  /* groepspagina Techniek */
html:root body.pagina-categorie.category-6 .mod-filter .filter-categories a.category-6 { background: var(--k-vak-actief); color: var(--k-accent-a-tekst); }
html:root body.pagina-categorie.category-6 .mod-filter .filter-categories a.category-6 i { color: inherit; }
html:root body.pagina-categorie.category-7 { --k-kop-basis: #ff9fa0; --k-vlek-1: #ff9fa0; --k-vlek-2: #ff9a8a; --k-vlek-3: #3bb8ad; --k-pvlek-1: color-mix(in oklab, #ff9fa0 50%, #e8f4ef); }  /* groepspagina Maatschappelijke vorming */
html:root[data-theme="dark"] body.pagina-categorie.category-7 { --k-kop-basis: #7a2330; --k-vlek-1: #7a2330; --k-vlek-2: #7a2a1a; --k-vlek-3: #0e5f63; --k-pvlek-1: color-mix(in oklab, #7a2330 40%, transparent); }  /* groepspagina Maatschappelijke vorming */
html:root body.pagina-categorie.category-7 .mod-filter .filter-categories a.category-7 { background: var(--k-vak-actief); color: var(--k-accent-a-tekst); }
html:root body.pagina-categorie.category-7 .mod-filter .filter-categories a.category-7 i { color: inherit; }
html:root .af-home-hero, html:root .affiche-site .af-title, html:root .af-skill-title, html:root .affiche-site .mod-inschrijven-form .mod-header, html:root .affiche-site .mod-quote, html:root .affiche-site .mod-blox .bv-header, html:root .affiche-site .mod-vacature-blokken .inner, html:root .affiche-site .pagina-wat-wij-doen .mod-skills-intro, html:root .affiche-site .pagina-wat-wij-doen .mod-blox .item:has(.af-moment-create) { --k-kop: radial-gradient(70% 95% at 0% 100%, var(--k-vlek-1) 0%, transparent 62%), radial-gradient(60% 85% at 100% 0%, var(--k-vlek-2) 0%, transparent 62%), radial-gradient(50% 75% at 85% 100%, var(--k-vlek-3) 0%, transparent 62%), var(--k-kop-basis); --k-kop-kleur: var(--k-kop-basis); }
html:root .affiche-site .site-wrapper { --k-pagina: radial-gradient(70% 60% at 0% 0%, var(--k-pvlek-1) 0%, transparent 70%), radial-gradient(60% 60% at 100% 20%, var(--k-pvlek-2) 0%, transparent 70%), radial-gradient(80% 60% at 30% 100%, var(--k-pvlek-3) 0%, transparent 70%), var(--k-grond); }
html:root .af-skill-hero { --k-kop-basis: var(--k-vak, #9fdcd0); --k-vlek-1: var(--k-vak, var(--k-vlek-3)); --k-vlek-2: var(--k-foto-vlek, var(--k-vak, var(--k-vlek-3))); }
html:root .affiche-site .af-skill-title h1 { color: var(--af-skill-ink, var(--k-kop-titel)); }
html:root .af-skill-photo { background: var(--k-foto-vlek, var(--k-vak, var(--k-foto-rand))); }
html:root main.pagina-school .af-title { --k-vlek-2: var(--k-foto-vlek, #9fd8ef); --k-kop-basis: color-mix(in oklab, var(--k-foto-vlek, #9fdcd0) 45%, #e8f4ef); }
html:root[data-theme="dark"] main.pagina-school .af-title { --k-vlek-2: var(--k-foto-vlek, #1d5a78); --k-kop-basis: color-mix(in oklab, var(--k-foto-vlek, #0f3a3c) 55%, #0a1c20); }
html:root .affiche-site .skills-grid .item .bv-image { box-shadow: 0 0 0 5px var(--k-vak), 0 26px 40px -20px var(--k-vak); }
html:root .affiche-site .mod-filter .filter-categories a i { color: var(--k-vak-inkt); }
html:root .affiche-site .mod-filter .filter-categories a:is(:hover, [aria-current]) { background: var(--k-vak-actief, var(--k-accent-a)); color: var(--k-accent-a-tekst); }
html:root .affiche-site .mod-filter .filter-categories a:is(:hover, [aria-current]) i { color: inherit; }
html:root .af-footer { background: var(--k-voet-pagina); }
html:root .af-ribbon { background: var(--k-accent-b-vlak); }
html:root .affiche-site .af-button:hover, html:root .affiche-site .button:hover { transform: translateY(-1px); }