/* Nieuwe kennisbankpagina (design handoff Danny, 3 nov 2026): kennisbank, handleidingen en uitlegfilms op één pagina.
   Template templates/site/paginas/kennisbank-overzicht.php. Tokens staan onder .kbo (niet globaal); de AI-kaart hangt
   in .aic[data-theme="site"] en krijgt zo de tokens en Public Sans uit ai-chat.css. De rest volgt de site (Roboto). */

/* Echt variabel Roboto (wght 100-900): het sitebrede roboto-variable.woff2 is statisch 400 en toont vet als regular. */
@font-face { font-family: 'Roboto VF'; src: url('fonts/roboto-vf-wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

.kbo {
	font-family: 'Roboto VF', 'Roboto', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
	--hero-gradient: linear-gradient(90deg, #152a80, #1d65af);
	--cta-gradient: linear-gradient(135deg, #1062fe 0%, #083fbf 100%);
	--brand-primary: #1062fe; --brand-primary-darker: #003cb2;
	--btn-primary: #1d65af; --btn-primary-hover: #1a5a9c;
	--sbt: #152a80; --kbo-geel: #ffd166;
	--gray-darker: #17191c; --gray-base: #5e636e; --gray-lighter: #979ba4; --gray-lighter-4: #e9eaec;
	--body-bg: #f7f8fa; --surface: #ffffff;
	--i1: #f4f6fa; --i2: #f0f2f6; --bds: #c9cdd6; --txs: #5e636e;
	--b05: rgba(16,98,254,.05); --b06: rgba(16,98,254,.06); --b08: rgba(16,98,254,.08); --b09: rgba(16,98,254,.09); --b12: rgba(16,98,254,.12); --b16: rgba(16,98,254,.16);
	--shadow-card: 0 1px 3px rgba(23,25,28,.04), 0 8px 24px rgba(23,25,28,.06);
	--shadow-lift: 0 2px 8px rgba(23,25,28,.06), 0 24px 48px rgba(23,25,28,.12);
	--shadow-badge: 0 2px 4px rgba(10,15,30,.08), 0 14px 28px -6px rgba(10,15,30,.3);
	--ease: cubic-bezier(.4, 0, .2, 1);
	/* Hoogte van de sticky sitekop (JS meet hem na) en van de sectienavigatie. */
	--kbo-kop: 56px; --kbo-navh: 46px;
	background: var(--body-bg); color: var(--gray-darker); font-size: 14px; line-height: 1.55;
}
.kbo *, .kbo *::before, .kbo *::after { box-sizing: border-box; }
.kbo a { color: var(--brand-primary); text-decoration: none; }
.kbo a:hover { color: var(--brand-primary-darker); }
.kbo h1, .kbo h2, .kbo h3, .kbo p { margin: 0; }
.kbo a:focus-visible, .kbo button:focus-visible, .kbo select:focus-visible, .kbo input:focus-visible, .kbo textarea:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.kbo [hidden] { display: none !important; }
.kbo-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kbo-verborgen { display: none; }
.kbo-c { max-width: 1288px; margin: 0 auto; padding: 0 24px; }
/* Ankers: html scroll-padding-top zet assets/kennisbank-overzicht.js op compacte kop + navigatie (de site zet 90px). */
.kbo .kbo-film { scroll-margin-top: 8px; }

/* ---------- 1. AI-kaart (gedeeld met dashboard en Supportcentrum: templates/site/paginas/deel/ai-kaart.php,
   assets/mijndashboard-ai.css) ---------- */
/* Hero (handoff Danny + taak 108, 3 nov 2026): navy band met chip en kop; daaroverheen een witte kaart die over de rand hangt.
   In de kaart is de grote artikelzoeker de hoofdkeuze; de AI-assistent zit als rustige voetbalk onderin (zelfde stijl als de
   EU-balk van de oude AI-kaart). */
.kbo-hero { position: relative; isolation: isolate; }
.kbo-hero__vlak { position: absolute; left: 0; right: 0; top: 0; bottom: 120px; z-index: -1; overflow: hidden;
	background: radial-gradient(640px 320px at 86% 0%, rgba(255,255,255,.12), transparent 60%), radial-gradient(520px 260px at 8% 100%, rgba(16,98,254,.35), transparent 70%), var(--hero-gradient); }
.kbo-hero__inhoud { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 24px 0; }
.kbo-chip { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #fff;
	padding: 6px 12px; border-radius: 50px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14); line-height: 1.2; }
.kbo-h1 { margin-top: 16px !important; font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.kbo-sub { margin-top: 12px !important; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 640px; }

.kbo-zoekkaart { width: 100%; max-width: 880px; margin-top: 32px; text-align: left; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-lift); overflow: hidden; }
.kbo-zoekkaart__binnen { padding: 22px 24px 20px; }
.kbo-zoek.kbo-zoek--groot { width: 100%; padding: 7px 7px 7px 20px; gap: 14px; border-radius: 16px; border: 1.5px solid var(--bds); background: var(--surface); color: var(--brand-primary);
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.kbo-zoek--groot:hover { border-color: var(--gray-lighter); }
.kbo-zoek--groot:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--b12); }
.kbo-zoek.kbo-zoek--groot input { padding: 15px 0; font-size: 18px; font-weight: 500; letter-spacing: -.005em; }
.kbo-zoek.kbo-zoek--groot input::placeholder { color: var(--gray-lighter); font-weight: 400; }
.kbo-zoek__knop { flex: none; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-family: inherit; font-size: 15.5px; font-weight: 700; color: #fff;
	background: var(--cta-gradient); border-radius: 11px; padding: 0 22px; align-self: stretch; box-shadow: 0 1px 2px rgba(8,63,191,.3), 0 6px 16px -4px rgba(16,98,254,.45);
	transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.kbo-zoek__knop svg { color: var(--kbo-geel); }
.kbo-zoek__knop:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(8,63,191,.3), 0 10px 22px -4px rgba(16,98,254,.5); }
.kbo-populair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.kbo-populair__label { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gray-base); margin-right: 2px; }
.kbo a.kbo-populair__pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 50px; background: var(--i1); border: 1px solid var(--gray-lighter-4);
	font-size: 13px; font-weight: 600; color: var(--sbt); transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
.kbo-populair__pil svg { color: var(--brand-primary); }
.kbo a.kbo-populair__pil:hover { border-color: var(--brand-primary); background: var(--b06); color: var(--brand-primary); }
.kbo-hero .kbo-resultaten { margin-top: 16px; }
.kbo-hero .kbo-reslijst { padding: 0; border-top: 1px solid var(--gray-lighter-4); }
.kbo-hero .kbo-resrij { padding: 12px 4px; }
.kbo-hero .kbo-resalle { margin-top: 12px; }
.kbo-hero .kbo-leeg { border: none; padding: 28px 16px 8px; border-top: 1px solid var(--gray-lighter-4); border-radius: 0; }

/* AI-voetbalk: tweede keuze, rustig maar volwaardig. */
.kbo-aibalk { display: flex; align-items: center; gap: 14px 20px; padding: 14px 24px; background: var(--i1); border-top: 1px solid var(--gray-lighter-4); }
.kbo-aibalk__tekst { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; max-width: 48%; }
.kbo-aibalk__tekst > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.kbo-aibalk__kern { display: inline-flex; background: none; }
.kbo-aibalk__kop { font-size: 14px; font-weight: 700; color: var(--gray-darker); }
.kbo-aibalk__eu { font-size: 11.5px; color: var(--gray-base); }
.kbo-ai { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 12px;
	background: var(--surface); border: 1px solid var(--gray-lighter-4); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.kbo-ai:hover { border-color: var(--bds); }
.kbo-ai:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--b12); }
.kbo .kbo-ai__veld { flex: 1; min-width: 0; height: 24px; resize: none; border: none; outline: none; background: transparent; box-shadow: none; padding: 2px 0; margin: 0;
	font-family: inherit; font-size: 14px; line-height: 20px; color: var(--gray-darker); }
.kbo .kbo-ai__veld::placeholder { color: var(--gray-base); }
.kbo .kbo-ai__veld:focus-visible { outline: none; }
.kbo-ai__stuur { flex: none; width: 34px; height: 34px; border-radius: 9px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	background: var(--b09); color: var(--brand-primary); transition: background .15s var(--ease), color .15s var(--ease); }
.kbo-ai__stuur:not(:disabled):hover { background: var(--btn-primary); color: #fff; }
.kbo-ai__stuur:disabled { cursor: default; opacity: .55; }

.kbo--portaal .kbo-hero__vlak { border-radius: 24px; }
.kbo--portaal .kbo-hero__inhoud { padding-top: 40px; }

/* ---------- Knoppen (Button.jsx) ---------- */
.kbo-knop { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; cursor: pointer; text-decoration: none; border: none; font-family: inherit;
	line-height: 1.2; padding: 10px 16px; font-size: 14px; border-radius: 8px; transition: background .15s var(--ease), transform .15s var(--ease); }
.kbo-knop--sm { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; }
.kbo-knop--prim, .kbo a.kbo-knop--prim { color: #fff; background: var(--btn-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(29,101,175,.35); }
.kbo-knop--prim:hover, .kbo a.kbo-knop--prim:hover { background: var(--btn-primary-hover); color: #fff; }
.kbo-knop--sec, .kbo a.kbo-knop--sec { color: var(--sbt); background: var(--b09); font-weight: 600; }
.kbo-knop--sec:hover, .kbo a.kbo-knop--sec:hover { background: var(--b16); color: var(--sbt); }
.kbo-knop--vol { display: flex; width: 100%; }
.kbo-knop svg { flex: none; }

/* ---------- 2. Sectienavigatie ---------- */
.kbo-nav { position: sticky; top: var(--kbo-kop); z-index: 20; margin-top: 36px; padding: 10px 0; background: rgba(247,248,250,.88);
	-webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.kbo-nav.is-plak { border-bottom-color: var(--gray-lighter-4); box-shadow: 0 6px 18px -12px rgba(23,25,28,.25); }
.kbo-nav__rij { display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto; padding: 5px; border-radius: 16px; background: var(--i2); border: 1px solid var(--gray-lighter-4);
	overflow-x: auto; scrollbar-width: none; }
.kbo-nav__rij::-webkit-scrollbar { display: none; }
.kbo-nav__link { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 12px; white-space: nowrap; color: var(--txs) !important;
	font-size: 14.5px; font-weight: 600; transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.kbo-nav__ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface); color: var(--gray-base);
	box-shadow: 0 0 0 1px var(--gray-lighter-4); transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.kbo-nav__aantal { min-width: 24px; padding: 2px 7px; border-radius: 50px; background: var(--gray-lighter-4); font-size: 11.5px; font-weight: 700; line-height: 1.4; text-align: center; color: var(--gray-base);
	font-variant-numeric: tabular-nums; transition: background .15s var(--ease), color .15s var(--ease); }
.kbo-nav__link:hover { color: var(--sbt) !important; background: rgba(255,255,255,.6); }
.kbo-nav__link:hover .kbo-nav__ico { color: var(--brand-primary); }
.kbo-nav__link[aria-current="true"] { background: var(--surface); color: var(--sbt) !important; font-weight: 700; box-shadow: 0 1px 2px rgba(23,25,28,.06), 0 4px 12px -2px rgba(23,25,28,.1); }
.kbo-nav__link[aria-current="true"] .kbo-nav__ico { background: var(--b08); color: var(--brand-primary); box-shadow: 0 0 0 1px var(--b12); }
.kbo-nav__link[aria-current="true"] .kbo-nav__aantal { background: var(--i2); color: var(--sbt); }

/* ---------- Sectiekoppen ---------- */
.kbo-h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--sbt); }
.kbo-intro { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--gray-base); max-width: 640px; }
.kbo-kaart { background: var(--surface); border: 1px solid var(--gray-lighter-4); border-radius: 18px; box-shadow: var(--shadow-card); }
.kbo-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--b08); color: var(--brand-primary); }
.kbo-ico--32 { width: 32px; height: 32px; border-radius: 9px; }
.kbo-ico--36 { width: 36px; height: 36px; border-radius: 10px; }
.kbo-ico--42 { width: 42px; height: 42px; border-radius: 12px; }
.kbo-pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; border-radius: 50px; padding: 3px 8px; background: var(--i2); color: var(--gray-darker); }

/* ---------- 3. Onderwerpen ---------- */
.kbo-sectie { padding: 44px 0 52px; }
.kbo-kopregel { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.kbo-zoek { width: min(300px, 100%); background: var(--surface); border: 1px solid var(--gray-lighter-4); border-radius: 9px; display: flex; align-items: center; gap: 9px; padding: 0 13px; color: var(--gray-lighter); margin: 0; }
.kbo-zoek:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--b12); }
.kbo-zoek input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 10px 0; font-size: 14px; font-family: inherit; color: var(--gray-darker); box-shadow: none; height: auto; margin: 0; }
.kbo .kbo-zoek input:focus-visible { outline: none; }
.kbo-reslijst { padding: 6px 22px 16px; }
.kbo-resrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--gray-lighter-4); color: var(--gray-darker) !important; }
.kbo-resrij > span { display: flex; flex-direction: column; min-width: 0; }
.kbo-resrij__titel { font-size: 14px; font-weight: 600; line-height: 1.4; }
.kbo-resrij__cat { font-size: 12px; color: var(--gray-base); }
.kbo-resrij svg { flex: none; color: var(--brand-primary); }
.kbo-resrij:hover, .kbo-resrij:hover .kbo-resrij__cat { color: var(--brand-primary) !important; }
.kbo-resalle { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 700; }

.kbo-leeg { background: var(--surface); border: 1px solid var(--gray-lighter-4); border-radius: 18px; padding: 52px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kbo-leeg__ico { width: 52px; height: 52px; border-radius: 16px; background: var(--b08); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.kbo-leeg__titel { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--gray-darker); margin-bottom: 5px !important; }
.kbo-leeg__tekst { font-size: 13.5px; color: var(--gray-base); line-height: 1.6; max-width: 380px; }
.kbo-leeg .kbo-knop { margin-top: 18px; }

.kbo-catgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.kbo-cat { padding: 20px 22px 18px; display: flex; flex-direction: column; }
.kbo-cat__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.kbo-cat__naam { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--gray-darker); overflow-wrap: anywhere; }
.kbo-cat__lijst { flex: 1; }
.kbo-cat__art { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-lighter-4); font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--gray-darker) !important; }
.kbo-cat__art svg { flex: none; color: var(--brand-primary); }
.kbo-cat__art:hover { color: var(--brand-primary) !important; }
.kbo-cat__alle { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 700; align-self: flex-start; }
.kbo-subkop { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; }
.kbo-subkop span { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-primary); }
.kbo-subkop::after { content: ""; flex: 1; height: 1px; background: var(--gray-lighter-4); }
.kbo-tegelgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 12px; }
.kbo-tegel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gray-lighter-4); background: var(--surface); transition: border-color .15s var(--ease); }
.kbo-tegel > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kbo-tegel__naam { font-size: 14px; font-weight: 700; color: var(--gray-darker); line-height: 1.35; overflow-wrap: anywhere; }
.kbo-tegel__aantal { font-size: 12px; color: var(--gray-base); }
.kbo-tegel:hover { border-color: var(--brand-primary); }
.kbo-tegel:hover .kbo-tegel__naam { color: var(--brand-primary); }

/* ---------- 4. Handleidingen ---------- */
.kbo-band { background: var(--surface); border-top: 1px solid var(--gray-lighter-4); border-bottom: 1px solid var(--gray-lighter-4); padding: 52px 0; }
.kbo-hlgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; margin-top: 22px; }
.kbo-hl { padding: 24px; display: flex; flex-direction: column; }
.kbo-hl__titel { margin: 14px 0 6px !important; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--sbt); }
.kbo-hl__tekst { flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--gray-base); }
.kbo-hl__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 16px !important; font-size: 12.5px; color: var(--gray-base); }
.kbo-hl__meta a { font-weight: 700; }

/* ---------- 5. Uitlegfilms ---------- */
.kbo-films { padding: 52px 0 40px; }
.kbo-filmrij { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 22px 0 18px; }
.kbo-filters { display: flex; gap: 2px; border-bottom: 1px solid var(--gray-lighter-4); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.kbo-filters::-webkit-scrollbar { display: none; }
.kbo-filter { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; color: var(--txs); background: none; border: none;
	border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; font-family: inherit; }
.kbo-filter span { font-size: 12px; font-weight: 600; color: var(--gray-base); }
.kbo-filter:hover { color: var(--brand-primary); }
.kbo-filter[aria-pressed="true"] { font-weight: 700; color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.kbo-filter[aria-pressed="true"] span { color: var(--brand-primary); }
.kbo-filmgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.kbo-film { background: var(--surface); border: 1px solid var(--gray-lighter-4); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.kbo-film:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.kbo-film__poster { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--i2); overflow: hidden; }
.kbo-film__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kbo-film video { display: block; width: 100%; aspect-ratio: 16 / 10; background: #000; object-fit: contain; }
.kbo-film__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: var(--shadow-badge);
	display: flex; align-items: center; justify-content: center; color: var(--sbt); padding-left: 2px; transition: transform .15s var(--ease); }
.kbo-film__poster:hover .kbo-film__play { transform: translate(-50%, -50%) scale(1.06); }
.kbo-film__duur { position: absolute; right: 8px; bottom: 8px; font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(13,18,38,.8); border-radius: 6px; padding: 2px 7px; line-height: 1.4; }
.kbo-film__tekst { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.kbo-film__product { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--brand-primary); }
.kbo-film__titel { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--gray-darker); }
.kbo-film__lees { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; font-size: 12.5px; font-weight: 600; }
.kbo-meer { display: flex; justify-content: center; margin-top: 20px; }
.kbo-meer:has(> [hidden]) { display: none; }
.kbo-yt { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 28px; background: var(--surface); padding: 18px 22px; border-radius: 18px; border: 1px solid var(--gray-lighter-4); }
.kbo-yt__logo { flex: none; }
.kbo-yt__tekst { flex: 1; min-width: 240px; }
.kbo-yt__tekst h3 { font-size: 15px; font-weight: 700; color: var(--gray-darker); }
.kbo-yt__tekst p { font-size: 13.5px; line-height: 1.5; color: var(--gray-base); }
.kbo-select { width: 170px; max-width: 100%; height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--gray-lighter-4); border-radius: 9px; background: var(--surface); font-size: 14px; font-family: inherit; color: var(--gray-darker); cursor: pointer; }

/* ---------- 6. Kom je er niet uit? ---------- */
.kbo-hulpsectie { padding: 0 0 72px; }
.kbo-films + .kbo-hulpsectie, .kbo-band + .kbo-hulpsectie { padding-top: 40px; }
.kbo-hulp { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; padding: 22px 24px; }
.kbo-hulp__tekst { flex: 1; min-width: 220px; }
.kbo-hulp__tekst h2 { font-size: 20px; font-weight: 800; color: var(--sbt); line-height: 1.25; }
.kbo-hulp__tekst p { font-size: 14px; line-height: 1.5; color: var(--gray-base); }
.kbo-hulp__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Portaal: de pagina staat in de portaal-shell, zonder hero over de volle breedte ---------- */
.kbo--portaal { background: transparent; margin-top: 8px; }
.kbo--portaal .kbo-c { padding: 0; }
.kbo--portaal .kbo-nav { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kbo--portaal .kbo-nav .kbo-c { padding: 0 12px; }
/* De portaalkolom is smaller (~1000px): vier handleidingen en vier films per rij in plaats van 3+1 en 3+3+2. */
.kbo--portaal .kbo-hlgrid { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.kbo--portaal .kbo-filmgrid { grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); }
.kbo--portaal .kbo-band { border-radius: 18px; border: 1px solid var(--gray-lighter-4); padding: 40px 28px; }
.kbo--portaal .kbo-band .kbo-c { padding: 0; }

/* ---------- Telefoon ---------- */
@media (max-width: 640px) {
	.kbo-c { padding: 0 16px; }
	.kbo-zoek, .kbo-zoek--film { width: 100%; }
	.kbo-hero__inhoud { padding: 36px 16px 0; }
	.kbo-zoekkaart { border-radius: 20px; }
	.kbo-zoekkaart__binnen { padding: 16px 14px 16px; }
	.kbo-zoek.kbo-zoek--groot { padding-left: 14px; gap: 10px; }
	.kbo-zoek.kbo-zoek--groot input { font-size: 16px; padding: 12px 0; }
	.kbo-zoek__knop { padding: 0 14px; font-size: 14.5px; }
	.kbo-zoek__knop svg { display: none; }
	.kbo-aibalk { flex-direction: column; align-items: stretch; padding: 14px; }
	.kbo-aibalk__tekst { max-width: none; }
	.kbo-nav__rij { width: 100%; justify-content: space-between; }
	.kbo-nav { padding: 8px 0; }
	.kbo-nav__rij { gap: 4px; padding: 4px; }
	.kbo-nav__link { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 4px 6px; font-size: 12.5px; }
	.kbo-nav__naam { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
	.kbo-nav__ico { width: 28px; height: 28px; }
	.kbo-nav__aantal { display: none; }
	.kbo-filmrij { flex-direction: column; align-items: stretch; }
	.kbo-select { width: 100%; }
}

/* ---------- Minder beweging: animaties echt uit (geen bijna-nul-duur bij oneindige animaties) ---------- */
@media (prefers-reduced-motion: reduce) {
	.kbo .aic-kern__glow, .kbo .aic-kern__body, .kbo .aic-kern__glans { animation: none !important; }
	.kbo-film, .kbo-film__play, .kbo-knop, .kbo-tegel { transition: none; }
	.kbo-film:hover { transform: none; }
}

/* ---------- Nachtmodus portaal (Danny 3 nov 2026): .kbo zet eigen tokens, dus hier de nachtwaarden van portal-shell.css
   opnieuw op .kbo. De publieke site kent geen nachtmodus. ---------- */
.wp-body[data-night="1"] .kbo {
	--body-bg: #0d1220; --surface: #151c2e; --gray-lighter-4: #27304a; --gray-darker: #e9ecf4; --gray-base: #a9b1c4; --gray-lighter: #6f7a92;
	--brand-primary: #ffa45c; --brand-primary-darker: #ffc79a; --btn-primary: #e07b1f; --btn-primary-hover: #f08a2e; --sbt: #ffd9b3; --txs: #a9b1c4;
	--hero-gradient: linear-gradient(90deg, #0f2a54, #123f6e);
	--i1: #0d1220; --i2: #242e49; --bds: #4a5573;
	--b05: rgba(255,164,92,.09); --b06: rgba(255,164,92,.11); --b08: rgba(255,164,92,.14); --b09: rgba(255,164,92,.15); --b12: rgba(255,164,92,.21); --b16: rgba(255,164,92,.27);
	--shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
	--shadow-lift: 0 2px 8px rgba(0,0,0,.35), 0 24px 48px rgba(0,0,0,.4);
	color-scheme: dark;
}
.wp-body[data-night="1"] .kbo-knop--prim, .wp-body[data-night="1"] .kbo a.kbo-knop--prim,
.wp-body[data-night="1"] .kbo-knop--prim:hover, .wp-body[data-night="1"] .kbo a.kbo-knop--prim:hover { color: #231303; box-shadow: none; }
.wp-body[data-night="1"] .kbo-film__play { background: rgba(21,28,46,.94); }