/*
 * Kijk op Sportbeleid
 *
 * Huisstijl uit de Elementor-kit van de vorige site: turquoise #24C7B1, aubergine #420E50,
 * zwart #080A0A, roze #EDDDD4. Koppen DM Serif Display, tekst DM Sans, labels en cijfers NORD.
 * Kenmerkend: dunne turquoise lijnen (rasters, tegels), ronde fotokaders, zwarte knoppen met
 * NORD-hoofdletters.
 *
 * Opbouw: 1 fonts en tokens, 2 basis, 3 onderdelen, 4 header en menu, 5 blokken,
 * 6 artikel, 7 professionals en profiel, 8 zoeker, 9 voet, 10 hulpklassen.
 */

/* 1. Fonts en tokens ------------------------------------------------------------------- */

@font-face { font-family: "DM Serif Display"; src: url(../fonts/dm-serif-display-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url(../fonts/dm-serif-display-italic-latin.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans-latin.woff2) format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans-italic-latin.woff2) format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "NORD"; src: url(../fonts/nord.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
	--ks-turquoise: #24C7B1;
	--ks-turquoise-donker: #0f7d6f;   /* turquoise als tekst: 5,0:1 op wit, 4,5:1 op roze-licht */
	--ks-aubergine: #420E50;
	--ks-zwart: #080A0A;
	--ks-roze: #EDDDD4;
	--ks-roze-licht: #f8f2ef;
	--ks-grijs: #F3F3F3;
	--ks-grijs-tekst: #5c6060;
	--ks-wit: #fff;
	--ks-lijn: 1px solid var(--ks-turquoise);

	--ks-serif: "DM Serif Display", Georgia, serif;
	--ks-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ks-nord: "NORD", "DM Sans", sans-serif;

	--ks-breed: 1360px;
	--ks-gutter: clamp(16px, 4vw, 40px);
	--ks-sectie: clamp(64px, 9vw, 120px);
	--ks-header: 100px;

	/* Typografie op de gulden snede: elke stap is x1,618 (φ), de tussenstappen x1,272 (√φ). Basis 16 px:
	   16 · 20,4 · 25,9 · 32,9 · 41,9 · 67,8. Koppen schalen van de mobiele naar de desktopstap. */
	--ks-t1: 1.272rem;   /* 20,4 px */
	--ks-t2: 1.618rem;   /* 25,9 px */
	--ks-t3: 2.058rem;   /* 32,9 px */
	--ks-t4: 2.618rem;   /* 41,9 px */
	--ks-h1: clamp(2.058rem, 1.291rem + 3.272vw, 4.236rem);   /* 33 tot 68 px */
	--ks-h2: clamp(1.618rem, 1.266rem + 1.502vw, 2.618rem);   /* 26 tot 42 px */
	--ks-h3: clamp(1.272rem, 1.150rem + 0.520vw, 1.618rem);   /* 20 tot 26 px */
	--ks-h4: clamp(1.125rem, 1.073rem + 0.221vw, 1.272rem);   /* 18 tot 20 px */
}

/* 2. Basis ------------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ks-header) + 24px); }
body {
	margin: 0;
	background: var(--ks-wit);
	color: var(--ks-zwart);
	font: 400 1rem/1.618 var(--ks-sans);
	letter-spacing: .01em;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ks-serif); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; letter-spacing: 0; }
/* Lange samenstellingen (sportaccommodaties) breken op smalle schermen af in plaats van uit te steken. */
h1, h2, h3, .ks-tegel__titel { overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 600px) {
	h1, h2, h3, .ks-tegel__titel { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; }
}
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ks-aubergine); outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ks-skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ks-zwart); color: #fff; padding: 12px 18px; text-decoration: none; }
.ks-skip:focus { top: 12px; }

.ks-wrap { width: 100%; max-width: calc(var(--ks-breed) + 2 * var(--ks-gutter)); margin-inline: auto; padding-inline: var(--ks-gutter); }
.ks-sectie { padding-block: var(--ks-sectie); }
.ks-sectie + .ks-sectie { padding-top: 0; }
.ks-sectie__titel { font-size: var(--ks-h2); margin-bottom: 40px; }

/* Lopende tekst uit editors en artikelen. */
.ks-opmaak { max-width: 68ch; }
.ks-opmaak > :last-child { margin-bottom: 0; }
.ks-opmaak a { color: var(--ks-turquoise-donker); font-weight: 600; text-decoration: none; }
.ks-opmaak a:hover { text-decoration: underline; }
.ks-opmaak a.ks-knop { font-weight: 400; text-decoration: none; }
.ks-opmaak a.ks-knop--donker { color: var(--ks-wit); }
.ks-opmaak a.ks-knop--licht { color: var(--ks-zwart); }
.ks-opmaak h2 { font-size: var(--ks-h3); margin: 1.6em 0 .55em; }
.ks-opmaak h3 { font-size: var(--ks-h4); margin: 1.5em 0 .5em; }
.ks-opmaak h4 { font-size: 1.125rem; margin: 1.4em 0 .4em; }
.ks-opmaak ul, .ks-opmaak ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.ks-opmaak li { margin-bottom: .35em; }
.ks-opmaak li::marker { color: var(--ks-turquoise); }
.ks-opmaak blockquote, .ks-opmaak .wp-block-quote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--ks-turquoise); font-family: var(--ks-serif); font-size: var(--ks-t1); line-height: 1.4; }
.ks-opmaak img { margin-block: 1.4em; }
.ks-opmaak hr { border: 0; border-top: var(--ks-lijn); margin: 2.4em 0; }
.ks-opmaak li a, .ks-opmaak p a { overflow-wrap: anywhere; }

/* Tabellen: altijd horizontaal scrollbaar in plaats van de pagina breder te maken. */
.ks-opmaak .wp-block-table, .ks-opmaak .scrollable-table { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.ks-opmaak table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1.6em 0; }
.ks-opmaak .wp-block-table table { margin: 0; min-width: 560px; }
.ks-opmaak > table { display: block; overflow-x: auto; }
.ks-opmaak th, .ks-opmaak td { text-align: left; vertical-align: top; padding: 14px 16px; border: 1px solid #d9dede; }
.ks-opmaak thead th, .ks-opmaak tr:first-child > td strong:only-child { font-weight: 700; }
.ks-opmaak tbody tr:nth-child(even) { background: var(--ks-grijs); }
.ks-opmaak .wp-block-table figcaption { font-size: .85rem; color: var(--ks-grijs-tekst); margin-top: 8px; }
/* Speelveld-tabel: op mobiel gestapeld (klasse uit de oude site). */
@media (max-width: 767px) {
	.responsive-table-wrapper table, .responsive-table-wrapper tbody, .responsive-table-wrapper tr, .responsive-table-wrapper td { display: block; width: 100%; min-width: 0; }
	.responsive-table-wrapper tr { margin-bottom: 1.5rem; border-bottom: 1px solid #ccc; }
	.responsive-table-wrapper td { border: 0; padding: 10px 0; }
}

/* 3. Onderdelen ------------------------------------------------------------------------- */

.ks-icoon { width: 1em; height: 1em; flex: none; }

.ks-knop {
	display: inline-flex; align-items: center; gap: 18px;
	min-height: 48px; padding: 12px 24px;
	font: 400 .875rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .06em;
	text-decoration: none; border: 1px solid var(--ks-zwart); border-radius: 0;
	transition: background-color .2s, color .2s, border-color .2s;
}
.ks-knop .ks-icoon { font-size: 18px; transition: transform .2s; }
.ks-knop:hover .ks-icoon { transform: translateX(4px); }
.ks-knop--donker { background: var(--ks-zwart); color: var(--ks-wit); }
.ks-knop--donker:hover { background: var(--ks-aubergine); border-color: var(--ks-aubergine); }
.ks-knop--licht { background: var(--ks-wit); color: var(--ks-zwart); }
.ks-knop--licht:hover { background: var(--ks-zwart); color: var(--ks-wit); }
.ks-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ks-opmaak + .ks-knop, .ks-opmaak ~ .ks-knop { margin-top: 28px; }

.ks-tekstlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; text-decoration: none; }
.ks-tekstlink .ks-icoon { font-size: 22px; transition: transform .2s; }
.ks-tekstlink:hover .ks-icoon { transform: translateX(3px); }
.ks-label-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: .875rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.ks-label-link .ks-icoon { font-size: 18px; transition: transform .2s; }
.ks-label-link:hover .ks-icoon { transform: translateX(3px); }

.ks-label { font: .8125rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.ks-nummer { display: block; font: 400 .875rem/1 var(--ks-nord); color: var(--ks-turquoise-donker); letter-spacing: .06em; }
.ks-nummer--groot { font-size: var(--ks-h2); color: var(--ks-zwart); margin-bottom: 18px; }

/* Tegel: nummer, titel, ronde pijl, turquoise rand. Overal hetzelfde (themabalk, menu, overzicht). */
.ks-tegel {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
	height: 100%; min-height: 140px; padding: 20px 52px 20px 16px;
	background: var(--ks-wit); border: var(--ks-lijn); text-decoration: none;
	transition: background-color .2s;
}
.ks-tegel__titel { font: 400 1.0625rem/1.25 var(--ks-serif); }
.ks-tegel > .ks-icoon { position: absolute; right: 16px; bottom: 18px; font-size: 22px; transition: transform .2s; }
/* Hover alleen waar echt gehoverd kan worden: op touch blijft een tik anders als "hover" hangen. */
@media (hover: hover) {
	.ks-tegel:hover { background: var(--ks-roze-licht); }
	.ks-tegel:hover > .ks-icoon { transform: translateX(3px); }
}
.ks-tegel:active { background: var(--ks-roze-licht); }
.ks-tegel.is-actief { background: var(--ks-zwart); color: var(--ks-wit); border-color: var(--ks-zwart); }
.ks-tegel.is-actief .ks-nummer { color: var(--ks-turquoise); }
.ks-tegel--hoog { min-height: 200px; }

.ks-tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; }
.ks-tegels > li { margin: 0 -1px -1px 0; }
/* Mobiel: twee kolommen met lagere tegels, zodat het overzicht niet eindeloos wordt. */
@media (max-width: 700px) {
	.ks-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ks-tegels .ks-tegel { min-height: 120px; justify-content: flex-start; gap: 8px; padding: 14px 14px 44px; }
	.ks-tegels .ks-tegel__titel { font-size: 1rem; }
	.ks-tegels .ks-tegel > .ks-icoon { right: 14px; bottom: 14px; }
}


/* Rond fotokader met de turquoise/paarse boog. */
.ks-fotokader { position: relative; aspect-ratio: 1; width: 100%; max-width: 460px; margin-left: auto; }
.ks-fotokader__foto { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: cover; border-radius: 50%; }
.ks-fotokader__vorm { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ks-chip { display: inline-block; padding: 9px 14px; background: var(--ks-aubergine); color: var(--ks-wit); font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: background-color .2s; }
.ks-chip:hover { background: var(--ks-zwart); }
.ks-chip--licht { background: #f3e6f7; color: var(--ks-aubergine); }
.ks-chip--licht:hover { background: var(--ks-aubergine); color: var(--ks-wit); }
.ks-labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.ks-sterren { display: inline-flex; align-items: center; gap: 2px; color: #d4d7d7; }
.ks-sterren__cijfer { font-weight: 700; color: var(--ks-zwart); margin-right: 6px; }
.ks-ster { display: inline-flex; font-size: 16px; }
.ks-ster.is-vol { color: #f5b400; }
.ks-ster.is-half { position: relative; }
.ks-ster__half { position: absolute; inset: 0 50% 0 0; overflow: hidden; color: #f5b400; display: flex; }
.ks-ster__half .ks-icoon { flex: none; max-width: none; height: 1em; }
.ks-score { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .9rem; }
.ks-score > span:last-child { white-space: nowrap; }
.ks-score--leeg > span:last-child { color: var(--ks-turquoise-donker); }
.ks-score__aantal { color: var(--ks-grijs-tekst); }
.ks-score--link { text-decoration: none; color: inherit; min-height: 24px; }
.ks-score--link:hover .ks-score__aantal { color: var(--ks-turquoise-donker); text-decoration: underline; }

.ks-gegevens { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.ks-gegevens li { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.ks-gegevens .ks-icoon { color: var(--ks-turquoise); font-size: 20px; }
.ks-gegevens a { text-decoration: none; }
.ks-gegevens a:hover { text-decoration: underline; }

.ks-sociaal { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.ks-sociaal a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ks-wit); color: var(--ks-zwart); transition: background-color .2s; }
.ks-sociaal a:hover { background: var(--ks-turquoise); }
.ks-sociaal .ks-icoon { font-size: 20px; }

.ks-kruimel ol { list-style: none; margin: 0 0 clamp(32px, 6vw, 96px); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .95rem; }
.ks-kruimel li + li::before { content: "»"; margin-right: 6px; }
.ks-kruimel a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--ks-turquoise-donker); text-decoration: none; }
.ks-kruimel a:hover { text-decoration: underline; }

.ks-melding { padding: 16px 20px; border-left: 4px solid; margin: 0 0 24px; }
.ks-melding--goed { border-color: var(--ks-turquoise); background: #e9f9f6; }
.ks-melding--fout { border-color: #b00020; background: #fdecee; }

/* Formuliervelden (contact en zoeker). */
.ks-veld { display: grid; gap: 8px; margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.ks-veld__label { font-size: 1rem; font-weight: 500; }
.ks-veld__label abbr { text-decoration: none; color: var(--ks-turquoise-donker); }
.ks-veld input:not([type=checkbox]), .ks-veld select, .ks-veld textarea {
	width: 100%; min-height: 50px; padding: 12px 14px;
	font: inherit; font-size: 1rem; color: var(--ks-zwart);
	background: var(--ks-wit); border: 1px solid #869090; border-radius: 0;
	appearance: none;
}
.ks-veld select { padding-right: 42px; background: var(--ks-wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080A0A' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.ks-veld select:disabled { opacity: .5; cursor: not-allowed; }
.ks-veld input:focus, .ks-veld select:focus, .ks-veld textarea:focus { outline: 2px solid var(--ks-turquoise); outline-offset: 0; border-color: var(--ks-turquoise); }
.ks-veld__hint { font-size: .875rem; color: var(--ks-grijs-tekst); }
.ks-vinkje { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; font-size: 1rem; cursor: pointer; }
.ks-vinkje input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ks-aubergine); flex: none; }

/* 4. Header en menu ------------------------------------------------------------------------ */

.ks-header { position: sticky; top: 0; z-index: 100; background: var(--ks-wit); border-bottom: var(--ks-lijn); transition: box-shadow .2s; }
.admin-bar .ks-header { top: 32px; }
.ks-header.is-gescrold { box-shadow: 0 6px 24px rgba(8, 10, 10, .06); }
.ks-header__binnen { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--ks-header); padding-inline: var(--ks-gutter); max-width: calc(var(--ks-breed) + 2 * var(--ks-gutter)); margin: 0 auto; }
.ks-header__logo img { width: clamp(180px, 20vw, 286px); height: auto; }

.ks-nav__lijst { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.ks-nav__item { display: flex; align-items: center; gap: 4px; }
.ks-nav__item > a { font: 400 1.125rem/1 var(--ks-serif); text-decoration: none; padding-block: 38px; transition: color .2s; }
.ks-nav__item > a:hover, .ks-nav__item.is-actief > a { color: var(--ks-turquoise-donker); }
.ks-nav__uitklap { background: none; border: 0; padding: 6px; display: flex; }
.ks-nav__uitklap .ks-icoon { font-size: 16px; stroke-width: 2.4; transition: transform .2s; }
.ks-nav__item--mega.is-open .ks-nav__uitklap .ks-icoon { transform: rotate(180deg); }

.ks-mega {
	position: absolute; left: 50%; top: calc(100% - 8px); transform: translateX(-50%);
	width: min(1220px, calc(100vw - 2 * var(--ks-gutter)));
	background: var(--ks-wit); box-shadow: 0 20px 60px rgba(8, 10, 10, .14);
	opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s;
}
.ks-nav__item--mega.is-open .ks-mega { opacity: 1; visibility: visible; }
.ks-mega__binnen { display: grid; grid-template-columns: 312px 1fr; gap: 32px; padding: 32px; max-height: calc(100vh - var(--ks-header) - 48px); overflow-y: auto; }
.ks-mega__tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.ks-mega__tabs button {
	width: 100%; text-align: left; padding: 15px 24px; border: 0;
	background: #e7e7e7; font: .875rem/1.6 var(--ks-nord); text-transform: uppercase; letter-spacing: .06em;
	transition: background-color .15s, color .15s;
}
.ks-mega__tabs button[aria-selected=true], .ks-mega__tabs button:hover { background: var(--ks-zwart); color: var(--ks-wit); }
.ks-mega__tabs button { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.ks-mega__tabs button svg { width: 16px; height: 16px; flex: none; opacity: 0; transition: opacity .15s, transform .15s; }
.ks-mega__tabs button[aria-selected=true] svg { opacity: 1; }
.ks-mega__tabs button:hover svg { transform: translateX(3px); }
.ks-mega__kop { font: var(--ks-t1)/1.3 var(--ks-serif); margin-bottom: 18px; }
.ks-mega__kop a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.ks-mega__kop svg { width: 18px; height: 18px; }
.ks-mega__kop a:hover { color: var(--ks-turquoise-donker); }
.ks-mega__tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ks-mega__tegels .ks-tegel { min-height: 120px; padding: 16px 48px 16px 16px; }
.ks-mega__tegels .ks-tegel__titel { font-size: 1rem; }

.ks-header__menuknop { display: none; background: none; border: 0; padding: 8px; }
.ks-header__menuknop .ks-icoon { font-size: 30px; }
.ks-header__menuknop-dicht { display: none; }
.ks-header__menuknop[aria-expanded=true] .ks-header__menuknop-open { display: none; }
.ks-header__menuknop[aria-expanded=true] .ks-header__menuknop-dicht { display: block; }

.ks-mobiel { border-top: var(--ks-lijn); max-height: calc(100vh - 80px); overflow-y: auto; padding: 8px var(--ks-gutter) 32px; background: var(--ks-wit); }
.ks-mobiel__lijst, .ks-mobiel ul { list-style: none; margin: 0; padding: 0; }
.ks-mobiel__item { border-bottom: 1px solid #e3e8e8; }
.ks-mobiel__item > a, .ks-mobiel summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: var(--ks-t1)/1.2 var(--ks-serif); text-decoration: none; cursor: pointer; list-style: none; }
.ks-mobiel summary::-webkit-details-marker { display: none; }
.ks-mobiel details[open] > summary .ks-icoon { transform: rotate(180deg); }
.ks-mobiel summary .ks-icoon { transition: transform .2s; }
.ks-mobiel details ul { padding: 0 0 12px 12px; }
.ks-mobiel .ks-nummer { min-width: 2.2em; font-variant-numeric: tabular-nums; }
.ks-mobiel details details summary { font: .875rem/1.4 var(--ks-nord); text-transform: uppercase; letter-spacing: .05em; padding: 14px 0; }
.ks-mobiel details details a, .ks-mobiel__themas > ul > li > a { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; text-decoration: none; font-family: var(--ks-serif); font-size: 1.05rem; }
.ks-mobiel__contact { padding-top: 24px; }
.ks-mobiel__contact .ks-sociaal a { background: var(--ks-zwart); color: var(--ks-wit); }

@media (max-width: 1180px) {
	:root { --ks-header: 80px; }
	.ks-nav { display: none; }
	.ks-header__menuknop { display: block; }
}
@media (min-width: 1181px) { .ks-mobiel { display: none; } }

/* 5. Blokken ---------------------------------------------------------------------------- */

/* Paginakop met lijnenraster en optionele turquoise band. */
.ks-kop { position: relative; padding-block: clamp(32px, 4vw, 48px) clamp(48px, 6vw, 72px); }
.ks-kop--band { border-top: 40px solid var(--ks-turquoise); }
.ks-kop--compact { padding-block: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); }
.ks-kop--compact .ks-kop__titel { margin-bottom: 8px; }
.ks-kop__raster { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; z-index: 0; }
.ks-kop__raster span { border-right: 1px solid rgba(36, 199, 177, .35); }
.ks-kop__raster span:first-child { grid-column: 2; }
.ks-kop__binnen { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.ks-kop--beeld .ks-kop__binnen { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ks-kop__tekst { background: linear-gradient(var(--ks-wit), var(--ks-wit)) no-repeat 0 0 / 100% 100%; padding-block: 8px; }
.ks-kop__titel { font-size: var(--ks-h1); margin-bottom: 20px; }
.ks-kop__ondertitel { font: 400 var(--ks-h4)/1.3 var(--ks-serif); margin-bottom: 20px; }
.ks-kop__intro { max-width: 720px; }
.ks-kop__beeld { margin-top: -20px; }
@media (max-width: 860px) {
	.ks-kop--beeld .ks-kop__binnen { grid-template-columns: 1fr; }
	.ks-kop__beeld { order: -1; margin-top: 0; }
	.ks-kop__beeld .ks-fotokader { max-width: 180px; margin: 0 auto; }
	.ks-kop__raster { display: none; }
	.ks-kop--band { border-top-width: 20px; }
}

/* Homepage-kop. */
.ks-hero { display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); min-height: 545px; }
.ks-hero__tekst { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 64px clamp(24px, 5vw, 70px) 64px max(var(--ks-gutter), (100vw - var(--ks-breed)) / 2); } /* links gelijk met het logo in de header */
.ks-hero__titel { font-size: var(--ks-h1); line-height: 1.05; margin-bottom: 40px; }
.ks-hero__intro { max-width: 580px; margin-bottom: 28px; }
.ks-hero .ks-knoppen { margin-top: 0; }
.ks-hero__intro strong { font-weight: 700; }
.ks-hero__pijlen { display: flex; gap: 6px; align-self: flex-end; margin-top: 40px; }
.ks-hero__pijlen button { background: none; border: 0; padding: 6px; color: var(--ks-turquoise-donker); }
.ks-hero__pijlen .ks-icoon { font-size: 22px; }
.ks-hero__slider { position: relative; overflow: hidden; background: var(--ks-zwart); }
.ks-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.ks-hero__slide.is-actief { opacity: 1; }
.ks-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.ks-hero__onderschrift, .ks-hero__tijd { display: none; }
@keyframes ks-tijd { from { width: 0; } to { width: 100%; } }
.ks-hero__bolletjes { position: absolute; left: 14px; bottom: 0; display: flex; gap: 0; z-index: 2; }
.ks-hero__bolletjes button { width: 24px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; }
.ks-hero__bolletjes button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ks-wit); transition: background-color .2s; }
.ks-hero__bolletjes button.is-actief::before { background: var(--ks-turquoise); }
@media (max-width: 900px) {
	.ks-hero { grid-template-columns: 1fr; min-height: 0; }
	.ks-hero__slider { order: -1; aspect-ratio: 4 / 3; }
	/* Geen hover op mobiel: het thema van de foto staat als tikbaar onderschrift op de foto, vegen
	   wisselt de foto en een dunne lijn laat zien wanneer de volgende komt. */
	.ks-hero__onderschrift { position: absolute; left: var(--ks-gutter); right: var(--ks-gutter); bottom: 44px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ks-wit); color: var(--ks-zwart); text-decoration: none; box-shadow: 0 10px 30px rgba(8, 10, 10, .25); transform: translateY(8px); opacity: 0; transition: transform .5s ease .2s, opacity .5s ease .2s; }
	.ks-hero__slide.is-actief .ks-hero__onderschrift { transform: none; opacity: 1; }
	.ks-hero__onderschrift .ks-nummer { flex: none; }
	.ks-hero__onderschrift-naam { flex: 1; min-width: 0; font: 400 1.0625rem/1.25 var(--ks-serif); }
	.ks-hero__onderschrift .ks-icoon { flex: none; font-size: 24px; }
	.ks-hero__bolletjes { left: auto; right: 10px; }
	.ks-hero__tijd { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255, 255, 255, .25); }
	.ks-hero__tijd::after { content: ""; display: block; height: 100%; width: 0; background: var(--ks-turquoise); }
	.ks-hero__slider.is-loopt .ks-hero__tijd::after { animation: ks-tijd 6s linear forwards; }
	.ks-hero__tekst { padding: 40px var(--ks-gutter) 56px; }
	.ks-hero__titel { margin-bottom: 24px; }
	.ks-hero__pijlen { display: none; }
}

/* Themabalk onder de homepage-kop. */
.ks-themabalk { padding-left: max(4%, 100% - 1383px); border-bottom: var(--ks-lijn); } /* Als de vorige site: max. 1383 px breed, rechts tegen de rand; op brede schermen schuift de balk naar rechts. */
.ks-themabalk__binnen { border-left: var(--ks-lijn); }
.ks-themabalk__titel { margin: 0; padding: 14px 22px; background: var(--ks-turquoise); font-size: var(--ks-t2); }
.ks-themabalk__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--ks-kolommen, 5), minmax(0, 1fr)); }
.ks-themabalk__lijst .ks-tegel { border-width: 0 1px 0 0; min-height: 176px; padding: 30px clamp(12px, 1.2vw, 16px); justify-content: space-between; min-width: 0; }
.ks-themabalk__lijst li:last-child .ks-tegel { border-right: 0; }
.ks-themabalk__lijst .ks-tegel__titel { font-size: clamp(1rem, .5rem + .85vw, var(--ks-t1)); display: block; margin-block: auto; min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; } /* Zes of meer thema's: lange namen netjes afbreken. */
.ks-themabalk__lijst .ks-tegel > .ks-icoon { position: static; }
.ks-themabalk__lijst .ks-tegel { transition: background-color .3s, box-shadow .3s; }
.ks-themabalk__lijst .ks-tegel.is-getoond { background: var(--ks-turquoise); }
.ks-themabalk__lijst .ks-tegel.is-getoond .ks-nummer { color: var(--ks-zwart); }
@media (max-width: 1000px) {
	.ks-themabalk { padding-left: 0; }
	.ks-themabalk__binnen { border-left: 0; }
	.ks-themabalk__lijst { grid-template-columns: 1fr; }
	.ks-themabalk__lijst .ks-tegel { border-width: 0 0 1px; min-height: 0; flex-direction: row; align-items: center; gap: 16px; padding: 20px var(--ks-gutter); }
	.ks-themabalk__lijst li:last-child .ks-tegel { border-bottom: 0; }
}

/* Tekst met beeld. */
.ks-tb__binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ks-tb--beeld-links .ks-tb__beeld { order: -1; }
.ks-tb--zonder-beeld .ks-tb__binnen { grid-template-columns: minmax(0, 720px); }
.ks-tb__titel { font-size: var(--ks-h2); margin-bottom: 28px; }
.ks-tb__beeld img { margin-inline: auto; max-height: 440px; width: auto; }
.ks-tb--accent .ks-tb__tekst { border-left: 2px solid var(--ks-turquoise); padding: 16px 0 16px clamp(16px, 2vw, 24px); }
@media (max-width: 860px) {
	.ks-tb__binnen { grid-template-columns: 1fr; }
	.ks-tb__beeld, .ks-tb--beeld-links .ks-tb__beeld { order: 1; } /* Op mobiel eerst de tekst, dan het beeld. */
	.ks-tb__beeld img { max-height: 320px; }
}

/* Thema-overzicht, als op de vorige site: kopvak over drie kolommen, foto in de vierde
   (afwisselend links en rechts), tegels zonder nummer, lijnen over de volle breedte. */
.ks-overzicht { padding-bottom: clamp(48px, 5.6vw, 80px); }
.ks-overzicht { padding-top: clamp(32px, 3.4vw, 48px); }
.ks-overzicht + .ks-overzicht { padding-top: 0; }
.ks-overzicht__wrap { width: 100%; max-width: calc(1200px + 2 * var(--ks-gutter)); margin-inline: auto; padding-inline: var(--ks-gutter); }
.ks-overzicht__kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 75%; min-height: 78px; padding: 14px 16px; border: var(--ks-lijn); border-bottom: 0; text-decoration: none; }
.ks-overzicht--links .ks-overzicht__kop { margin-left: 25%; }
.ks-overzicht--zonder-beeld .ks-overzicht__kop { margin-left: 0; }
.ks-overzicht__kop h2 { margin: 0; font-size: var(--ks-h2); }
.ks-overzicht__kop .ks-icoon { flex: none; font-size: 22px; transition: transform .2s; }
.ks-overzicht__kop:hover .ks-icoon { transform: translateX(4px); }
.ks-overzicht__rij { border-top: var(--ks-lijn); border-bottom: var(--ks-lijn); }
.ks-overzicht__raster { display: grid; grid-template-columns: 1fr 3fr; }
.ks-overzicht--rechts .ks-overzicht__raster { grid-template-columns: 3fr 1fr; }
.ks-overzicht--rechts .ks-overzicht__beeld { order: 2; }
.ks-overzicht--zonder-beeld .ks-overzicht__raster { grid-template-columns: 1fr; }
.ks-overzicht__beeld { position: relative; min-height: 300px; }
.ks-overzicht__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ks-overzicht .ks-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -1px; align-content: start; }
.ks-overzicht .ks-tegel { min-height: 150px; padding: 20px 52px 20px 16px; }
.ks-overzicht .ks-tegel .ks-nummer { display: none; }
@media (max-width: 1023px) {
	.ks-overzicht__kop, .ks-overzicht--links .ks-overzicht__kop { width: 100%; margin-left: 0; }
	.ks-overzicht__raster, .ks-overzicht--rechts .ks-overzicht__raster { grid-template-columns: 1fr; }
	.ks-overzicht--rechts .ks-overzicht__beeld { order: 0; }
	.ks-overzicht__beeld { min-height: 0; aspect-ratio: 16 / 7; margin-top: -1px; }
	.ks-overzicht .ks-tegels { margin-top: 0; }
}
@media (max-width: 700px) {
	.ks-overzicht__kop { min-height: 0; }
	.ks-overzicht__kop h2 { font-size: var(--ks-h3); }
	.ks-overzicht__beeld { aspect-ratio: 16 / 9; }
	.ks-overzicht .ks-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ks-overzicht .ks-tegel { min-height: 120px; padding: 14px 14px 44px; justify-content: flex-start; }
	.ks-overzicht .ks-tegel__titel { font-size: 1rem; }
}

/* Tekst met tegels. */
.ks-tt__binnen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.ks-tt__binnen--vol { grid-template-columns: minmax(0, 860px); }
.ks-tt__titel { font-size: var(--ks-h2); margin-bottom: 16px; }
.ks-tt__ondertitel { font: 400 var(--ks-h4)/1.3 var(--ks-serif); margin-bottom: 28px; }
.ks-tt__beeld { margin-bottom: 32px; }
.ks-tt__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ks-tt__tegels { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: sticky; top: calc(var(--ks-header) + 32px); }
.ks-tt__tegels li + li { margin-top: -1px; }
@media (max-width: 860px) {
	.ks-tt__binnen { grid-template-columns: 1fr; }
	.ks-tt__tegels { position: static; grid-template-columns: 1fr 1fr; }
	.ks-tt__tegels li + li { margin: 0 0 0 -1px; }
	.ks-tegel--hoog { min-height: 140px; }
}

/* Expertise nodig? */
.ks-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin: 2.4em 0; padding: 36px 32px 0 36px; background: var(--ks-roze-licht); border-left: 6px solid var(--ks-turquoise); }
.ks-cta__tekst { padding-bottom: 36px; }
.ks-cta__titel { font-size: var(--ks-h4); margin: 0 0 24px !important; }
.ks-cta .ks-opmaak { max-width: 720px; }
.ks-cta .ks-knop { margin-top: 24px; }
/* Praktijkvoorbeelden van het subthema, als blok in een artikel. */
.ks-praktijkblok { margin: 2.4em 0; padding-top: 28px; border-top: 3px solid var(--ks-turquoise); }
.ks-praktijkblok__kop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 20px; }
.ks-praktijkblok__kop .ks-label { flex-basis: 100%; margin: 0; }
.ks-praktijkblok .ks-praktijkblok__titel { margin: 0 auto 0 0; font-size: var(--ks-h4); }
.ks-voorbeelden--artikel { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ks-voorbeelden--artikel .ks-voorbeeld__titel { font-size: 1.0625rem; }
/* Het blok staat binnen de artikeltekst (.ks-opmaak): die opmaak hier terugzetten. */
.ks-praktijkblok img { margin: 0; }
.ks-praktijkblok .ks-voorbeeld__titel { margin: 0; }
.ks-praktijkblok .ks-voorbeeld__titel a { color: inherit; font-weight: inherit; }
.ks-praktijkblok .ks-voorbeeld__titel a:hover { text-decoration: none; }
.ks-praktijkblok p { margin: 0; }
.ks-cta__illustratie { width: 150px; height: auto; align-self: end; }
.ks-main > .ks-cta { max-width: var(--ks-breed); margin: var(--ks-sectie) auto; }
@media (max-width: 640px) {
	.ks-cta { grid-template-columns: 1fr; padding: 28px 20px 0 22px; }
	.ks-cta__illustratie { width: 110px; justify-self: end; margin-top: -24px; }
	.ks-cta__tekst { padding-bottom: 0; }
}

/* Contact: donker vlak met direct contact links, formulier in een kaart rechts. */
.ks-contact { padding-top: clamp(16px, 2vw, 32px); }
.ks-contact__binnen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: stretch; box-shadow: 0 30px 60px rgba(66, 14, 80, .10); }
.ks-contact__direct { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(32px, 4vw, 56px); background: var(--ks-aubergine); color: var(--ks-wit); overflow: hidden; }
.ks-contact__direct::after { content: ""; position: absolute; width: 360px; aspect-ratio: 1; right: -120px; bottom: -150px; border-radius: 50%; border: 24px solid var(--ks-turquoise); border-left-color: transparent; border-top-color: var(--ks-aubergine-licht, #6b2a7d); transform: rotate(-25deg); pointer-events: none; }
.ks-contact__direct .ks-label { color: var(--ks-turquoise); margin: 0; }
.ks-contact__directkop { position: relative; z-index: 1; margin: 0 0 12px; color: var(--ks-wit); font-size: var(--ks-h3); }
.ks-contact__kanaal { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .22); color: var(--ks-wit); text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.ks-contact__kanaal:hover { background: var(--ks-turquoise); border-color: var(--ks-turquoise); color: var(--ks-zwart); }
.ks-contact__kanaal > .ks-icoon { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--ks-turquoise); color: var(--ks-zwart); }
.ks-contact__kanaal:hover > .ks-icoon { background: var(--ks-zwart); color: var(--ks-turquoise); }
.ks-contact__kanaal span { display: flex; flex-direction: column; gap: 2px; font: 400 var(--ks-t1)/1.2 var(--ks-serif); overflow-wrap: anywhere; }
.ks-contact__kanaal small { font: .75rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.ks-contact__reactie { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; color: rgba(255, 255, 255, .85); }
.ks-contact__reactie .ks-icoon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ks-turquoise); color: var(--ks-zwart); stroke-width: 2.4; }
.ks-contact__direct .ks-sociaal { position: relative; z-index: 1; }
.ks-contact__routes { position: relative; z-index: 1; list-style: none; margin: 8px 0 0; padding: 20px 0 0; max-width: 70%; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 14px; }
.ks-contact__routes li { display: flex; flex-direction: column; gap: 2px; }
.ks-contact__routes span { font-size: .875rem; color: rgba(255, 255, 255, .7); }
.ks-contact__routes a { display: inline-flex; align-items: center; gap: 8px; color: var(--ks-turquoise); font-weight: 600; text-decoration: none; min-height: 32px; }
.ks-contact__routes a:hover { text-decoration: underline; }
.ks-contact__formulier { padding: clamp(32px, 4vw, 56px); background: var(--ks-wit); border: var(--ks-lijn); border-left: 0; }
.ks-contact__formulier h2 { font-size: var(--ks-h3); margin-bottom: 8px; }
.ks-contact__intro { color: var(--ks-grijs-tekst); }
.ks-formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 28px; }
.ks-formulier .ks-veld--breed, .ks-formulier .ks-vinkje, .ks-formulier button { grid-column: 1 / -1; }
.ks-formulier .ks-vinkje { margin-bottom: 28px; }
.ks-formulier button { justify-self: start; }
.ks-formulier__honing { position: absolute; left: -9999px; }
.ks-onderwerp { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.ks-onderwerp__keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-onderwerp__keuze { position: relative; cursor: pointer; }
.ks-onderwerp__keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ks-onderwerp__keuze span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: var(--ks-lijn); border-radius: 999px; font-size: .9375rem; transition: background-color .2s, color .2s, border-color .2s; }
.ks-onderwerp__keuze:hover span { background: var(--ks-roze-licht); }
.ks-onderwerp__keuze input:checked + span { background: var(--ks-zwart); border-color: var(--ks-zwart); color: var(--ks-wit); }
.ks-onderwerp__keuze input:focus-visible + span { outline: 2px solid var(--ks-turquoise-donker); outline-offset: 2px; }
@media (max-width: 960px) {
	.ks-contact__binnen { grid-template-columns: 1fr; box-shadow: none; }
	.ks-contact__formulier { border-left: var(--ks-lijn); border-top: 0; order: -1; }
	.ks-contact__direct { order: 1; }
}
@media (max-width: 600px) {
	.ks-contact__binnen { padding-inline: 0; }
	.ks-contact__routes { max-width: none; }
	.ks-contact__direct::after { display: none; }
	.ks-contact__directkop { max-width: none; }
	.ks-contact__kanaal span { font-size: 1.0625rem; }
	.ks-contact__formulier { border-inline: 0; padding-inline: var(--ks-gutter); padding-top: 8px; }
	.ks-contact__direct { padding-inline: var(--ks-gutter); }
	.ks-formulier { grid-template-columns: 1fr; }
}

/* Statement: grote uitspraak op het lijnenraster. */
.ks-statement { position: relative; padding-block: var(--ks-sectie); border-top: var(--ks-lijn); overflow: hidden; }
.ks-statement__binnen { position: relative; z-index: 1; }
.ks-statement__uitspraak { position: relative; margin: 0; max-width: 1040px; padding-left: clamp(48px, 7vw, 110px); }
.ks-statement__uitspraak::before { content: "\201C"; position: absolute; left: 0; top: -.15em; font: 400 clamp(5rem, 3rem + 7vw, 10rem)/1 var(--ks-serif); color: var(--ks-turquoise); }
.ks-statement__uitspraak p { margin: 0; font: 400 var(--ks-h2)/1.2 var(--ks-serif); background: linear-gradient(var(--ks-wit), var(--ks-wit)); }
.ks-statement__voet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; max-width: 1040px; margin-top: 40px; padding-left: clamp(48px, 7vw, 110px); }
.ks-statement__tekst { background: var(--ks-wit); max-width: 62ch; }
.ks-statement__tekst > :last-child, .ks-statement__knop { margin-bottom: 0; }
@media (max-width: 700px) {
	.ks-statement__voet { grid-template-columns: 1fr; padding-left: 0; }
	.ks-statement__uitspraak { padding-left: 0; padding-top: 56px; }
	.ks-statement__uitspraak::before { top: -.1em; font-size: 6rem; }
}

/* Tekst en team. */
.ks-tekst__binnen { max-width: 860px; }
.ks-tekst--breed .ks-tekst__binnen, .ks-tekst--breed .ks-opmaak { max-width: none; }
.ks-team__intro { margin-bottom: 40px; max-width: 68ch; }
.ks-team__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
/* Teamkaart: ronde foto links, naam, functie, expertise, contact-iconen, Meer informatie. */
.ks-teamlid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; padding: 28px; border: var(--ks-lijn); background: #fbfbfb; }
.ks-teamlid__foto { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--ks-grijs); color: #b9c0c0; font-size: 44px; }
.ks-teamlid__foto img { width: 100%; height: 100%; object-fit: cover; }
.ks-teamlid__naam { margin: 0 0 6px; font-size: var(--ks-t1); }
.ks-teamlid__functie { margin: 0 0 12px; line-height: 1.45; }
.ks-teamlid__expertise { margin: 0 0 14px; gap: 6px; }
.ks-teamlid__expertise .ks-chip { padding: 5px 10px; font-size: .8125rem; }
.ks-teamlid__contact { display: flex; gap: 14px; margin: 0 0 14px; }
.ks-teamlid__contact a { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px; color: var(--ks-turquoise); font-size: 22px; }
.ks-teamlid__contact a:hover { color: var(--ks-turquoise-donker); }
@media (max-width: 480px) { .ks-teamlid { grid-template-columns: 1fr; } }
.ks-team__themas { margin-top: clamp(40px, 5vw, 64px); }
.ks-team__themaskop { font-size: var(--ks-h3); margin-bottom: 16px; }
.ks-team__themalijst { margin: 0; border-top: var(--ks-lijn); }
.ks-team__themarij { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid #e6eaea; }
.ks-team__themarij dt { font: 400 1.0625rem/1.3 var(--ks-serif); }
.ks-team__themarij dt a { text-decoration: none; }
.ks-team__themarij dd { margin: 0; }
.ks-team__themarij.is-open dd { color: var(--ks-grijs-tekst); font-style: italic; }
@media (max-width: 600px) { .ks-team__themarij { grid-template-columns: 1fr; } }

.ks-pros__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 40px; }
.ks-pros__kop .ks-sectie__titel { margin-bottom: 0; }
.ks-pros__tekst { max-width: 56ch; margin: 12px 0 0; color: var(--ks-grijs-tekst); }
.ks-pros__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.ks-recent, .ks-sectie + .ks-recent, .ks-recent + .ks-sectie { padding-top: var(--ks-sectie); }
.ks-recent { background: var(--ks-roze-licht); }
.ks-recent__binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ks-recent__kop { position: sticky; top: calc(var(--ks-header) + 32px); }
.ks-recent__kop .ks-sectie__titel { margin-bottom: 20px; }
.ks-recent__kop .ks-knop { margin-top: 28px; }
.ks-recent__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ks-zwart); }
.ks-recent__item { position: relative; display: grid; gap: 6px; padding: 22px 56px 22px 0; border-bottom: 1px solid rgba(8, 10, 10, .18); text-decoration: none; }
.ks-recent__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font: .75rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-grijs-tekst); }
.ks-recent__thema { color: var(--ks-turquoise-donker); }
.ks-recent__titel { font: 400 var(--ks-t1)/1.25 var(--ks-serif); }
.ks-recent__item > .ks-icoon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 30px; transition: transform .2s; }
.ks-recent__item:hover .ks-recent__titel { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ks-recent__item:hover > .ks-icoon { transform: translate(4px, -50%); }
@media (max-width: 860px) {
	.ks-recent__binnen { grid-template-columns: 1fr; }
	.ks-recent__kop { position: static; }
}

/* Gridkinderen mogen smaller worden dan hun inhoud (brede tabellen scrollen dan zelf). */
.ks-artikel__binnen > *, .ks-profiel__binnen > *, .ks-zoeker__binnen > *, .ks-contact__binnen > *, .ks-tt__binnen > *, .ks-tb__binnen > *, .ks-kop__binnen > * { min-width: 0; }

/* 6. Artikel ----------------------------------------------------------------------------- */

.ks-submenu { position: relative; border-bottom: 1px solid #dfe3e3; background: var(--ks-wit); }
.ks-submenu__kop { display: flex; align-items: center; gap: 12px 24px; padding: 22px max(var(--ks-gutter), (100% - var(--ks-breed)) / 2) 16px; border-bottom: 1px solid #dfe3e3; }
.ks-submenu__titel { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0; min-width: 0; }
.ks-submenu__label { font: .75rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .1em; color: var(--ks-grijs-tekst); }
.ks-submenu__titel a { font: var(--ks-t1)/1.2 var(--ks-serif); text-decoration: none; }
.ks-submenu__titel a:hover { color: var(--ks-turquoise-donker); }
.ks-submenu__stand { margin: 0 0 0 auto; font-size: .875rem; color: var(--ks-grijs-tekst); white-space: nowrap; }
.ks-submenu__stand strong { font: 400 .875rem/1 var(--ks-nord); color: var(--ks-zwart); letter-spacing: .06em; }
.ks-submenu__pijlen { display: flex; gap: 6px; }
.ks-submenu__pijlen button { display: grid; place-items: center; width: 40px; height: 40px; border: var(--ks-lijn); border-radius: 50%; background: var(--ks-wit); color: var(--ks-zwart); padding: 0; transition: background-color .2s, color .2s, opacity .2s; }
.ks-submenu__pijlen button:hover:not(:disabled) { background: var(--ks-zwart); border-color: var(--ks-zwart); color: var(--ks-wit); }
.ks-submenu__pijlen button:disabled { opacity: .3; cursor: default; }
.ks-submenu.past .ks-submenu__pijlen { visibility: hidden; }
.ks-submenu__pijlen .ks-icoon { font-size: 20px; stroke-width: 2; }

.ks-submenu__venster { position: relative; }
.ks-submenu__venster::before, .ks-submenu__venster::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--ks-gutter) + 8px); z-index: 1; pointer-events: none; opacity: 0; transition: opacity .2s; }
.ks-submenu__venster::before { left: 0; background: linear-gradient(90deg, var(--ks-wit), rgba(255, 255, 255, 0)); }
.ks-submenu__venster::after { right: 0; background: linear-gradient(270deg, var(--ks-wit), rgba(255, 255, 255, 0)); }
.ks-submenu.kan-links .ks-submenu__venster::before, .ks-submenu.kan-rechts .ks-submenu__venster::after { opacity: 1; }
.ks-submenu__lijst { list-style: none; margin: 0; padding: 0 max(var(--ks-gutter), (100% - var(--ks-breed)) / 2); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--ks-gutter), (100% - var(--ks-breed)) / 2); scrollbar-width: none; scroll-behavior: smooth; }
.ks-submenu__lijst::-webkit-scrollbar { display: none; }
.ks-submenu__lijst li { flex: 0 0 clamp(220px, 21vw, 290px); scroll-snap-align: start; }
.ks-submenu__lijst li + li .ks-subtegel { border-left: 1px solid #dfe3e3; }

.ks-subtegel { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; height: 100%; min-height: 148px; padding: 22px 20px 18px; text-decoration: none; background: var(--ks-wit); transition: background-color .2s; }
.ks-subtegel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ks-turquoise); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.ks-subtegel__nummer { font: 400 .8125rem/1 var(--ks-nord); letter-spacing: .08em; color: var(--ks-turquoise-donker); }
.ks-subtegel__titel { font: 400 1.0625rem/1.3 var(--ks-serif); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ks-subtegel > .ks-icoon { justify-self: end; font-size: 22px; color: var(--ks-turquoise-donker); transition: transform .2s; }
@media (hover: hover) {
	.ks-subtegel:hover { background: var(--ks-roze-licht); }
	.ks-subtegel:hover::before { transform: scaleX(1); }
	.ks-subtegel:hover > .ks-icoon { transform: translateX(3px); }
}
.ks-subtegel:focus-visible::before { transform: scaleX(1); }
.ks-subtegel.is-actief { background: var(--ks-zwart); color: var(--ks-wit); }
.ks-subtegel.is-actief::before { transform: scaleX(1); height: 4px; }
.ks-subtegel.is-actief .ks-subtegel__nummer { color: var(--ks-turquoise); }
.ks-subtegel__nu { justify-self: start; font: .75rem/1 var(--ks-nord); text-transform: uppercase; letter-spacing: .1em; color: var(--ks-turquoise); }

/* Experts van het thema, direct boven het artikel. */
.ks-themaexperts { margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid #dfe3e3; }
.ks-themaexperts__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.ks-themaexperts__kop h2 { font-size: var(--ks-h4); margin: 0; }
.ks-themaexperts__kop h2 { margin-right: auto; }
.ks-themaexperts__raster { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.ks-themaexperts__raster::-webkit-scrollbar { display: none; }
.ks-themaexperts__raster > li { flex: 0 0 calc((100% - 24px) / 3); scroll-snap-align: start; }
.ks-themaexperts__raster > li > .ks-pro { height: 100%; }
.ks-themaexperts.past .ks-themaexperts__pijlen { visibility: hidden; }
.ks-themaexperts__leeg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; padding: 22px 24px; background: var(--ks-roze-licht); border-left: 3px solid var(--ks-turquoise); }
.ks-pro--kort { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px; background: var(--ks-wit); align-items: start; }
.ks-pro--kort .ks-pro-logo { width: 56px; height: 56px; }
.ks-pro--kort .ks-pro__naam { font-size: 1.125rem; line-height: 1.2; margin: 2px 0 8px; }
.ks-pro--kort .ks-score { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: .8125rem; }
.ks-pro--kort .ks-tekstlink { margin-top: 14px; font-size: .9rem; }
.ks-pro--kort .ks-tekstlink .ks-icoon { font-size: 18px; }
.ks-pro--kort.is-uitgelicht { padding: 19px; }

.ks-artikel__binnen { display: grid; grid-template-columns: 356px minmax(0, 1fr); gap: clamp(32px, 7vw, 106px); padding-block: 48px clamp(40px, 5vw, 64px); align-items: start; }
.ks-artikel__binnen--smal { grid-template-columns: minmax(0, 1fr); }
.ks-artikel__binnen--smal .ks-artikel__hoofd { max-width: 860px; }
.ks-artikel__zij { position: sticky; top: calc(var(--ks-header) + 24px); display: grid; gap: 24px; }
.admin-bar .ks-artikel__zij { top: calc(var(--ks-header) + 56px); }
.ks-artikel__tekst { max-width: 68ch; }

.ks-artikel__tekst > h2:first-child { margin-top: 0; }

.ks-toc { background: #fafafa; border: 1px solid #e7e7e7; }
.ks-toc__kop { display: flex; align-items: center; gap: 14px; margin: 0; padding: 22px 22px; background: var(--ks-grijs); font: var(--ks-t1)/1.2 var(--ks-serif); }
.ks-toc__kop .ks-icoon { font-size: 24px; }
.ks-toc ol { list-style: none; margin: 0; padding: 16px 22px 20px; max-height: 50vh; overflow-y: auto; counter-reset: toc; }
.ks-toc li { margin: 0; }
.ks-toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: .95rem; line-height: 1.4; text-decoration: none; }
.ks-toc a:hover { color: var(--ks-turquoise-donker); }
.ks-toc a.is-actief { border-color: var(--ks-turquoise); font-weight: 600; }

.ks-gerelateerd { margin-top: 64px; padding-top: 48px; border-top: var(--ks-lijn); }
.ks-gerelateerd__kop { font-size: var(--ks-h3); margin-bottom: 28px; }
.ks-gerelateerd__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-bottom: 24px; }

.ks-leesook { background: var(--ks-roze-licht); padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 80px); border-top: 4px solid var(--ks-turquoise); }
.ks-leesook__kop { margin-bottom: 28px; }
.ks-leesook__kop .ks-label { color: var(--ks-turquoise-donker); margin-bottom: 6px; }
.ks-leesook__kop .ks-sectie__titel { margin: 0; }
.ks-leesook .ks-tegels { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 700px) {
	.ks-submenu__kop { flex-wrap: wrap; padding-block: 14px 12px; }
	.ks-submenu__titel { flex: 1 1 100%; gap: 8px; }
	.ks-submenu__titel a { font-size: 1.125rem; }
	.ks-submenu__stand { margin-left: 0; }
	.ks-submenu__pijlen { margin-left: auto; }
	.ks-submenu__lijst li { flex-basis: 72vw; }
	.ks-subtegel { min-height: 128px; }
	.ks-themaexperts { margin-bottom: 32px; padding-bottom: 32px; }
	.ks-themaexperts__raster { margin-inline: calc(var(--ks-gutter) * -1); padding-inline: var(--ks-gutter); scroll-padding-inline: var(--ks-gutter); }
	.ks-themaexperts__raster > li { flex-basis: 80vw; }
}
@media (max-width: 1024px) {
	.ks-artikel__binnen { grid-template-columns: 1fr; padding-top: 24px; }
	.ks-artikel__zij { position: static; order: 2; }
	.ks-toc { order: -1; }
	.ks-artikel__hoofd { order: 1; }
	.ks-artikel__binnen > .ks-artikel__zij .ks-toc { display: none; }
}


/* Themamenu op mobiel: één balk die een sheet van onderen opent. Op desktop verborgen. */
.ks-themaknop-balk, .ks-artikel__themalabel { display: none; }
.ks-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 85dvh; margin: 0; padding: 0; border: 0; border-radius: 16px 16px 0 0; background: var(--ks-wit); color: var(--ks-zwart); overflow-y: auto; overscroll-behavior: contain; }
.ks-sheet[open] { animation: ks-sheet-in .25s ease-out; }
.ks-sheet::backdrop { background: rgba(8, 10, 10, .5); }
@keyframes ks-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ks-sheet[open] { animation: none; } }
.ks-sheet__binnen { padding: 8px var(--ks-gutter) calc(24px + env(safe-area-inset-bottom)); }
.ks-sheet__binnen::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: #d4d7d7; }
.ks-sheet__kop { position: relative; padding: 4px 52px 14px 0; border-bottom: var(--ks-lijn); }
.ks-sheet__kop .ks-submenu__label { margin: 0 0 4px; }
.ks-sheet__kop h2 { margin: 0; font-size: var(--ks-h4); }
.ks-sheet__kop h2 a { text-decoration: none; }
.ks-sheet__sluit { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border: var(--ks-lijn); border-radius: 50%; background: none; color: var(--ks-zwart); font-size: 18px; }
.ks-sheet__lijst { list-style: none; margin: 0; padding: 0; }
.ks-sheet__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid #e6eaea; text-decoration: none; }
.ks-sheet__item .ks-icoon { color: var(--ks-turquoise-donker); font-size: 18px; }
.ks-sheet__titel { font: 400 1rem/1.3 var(--ks-serif); }
.ks-sheet__item.is-actief { margin-inline: calc(var(--ks-gutter) * -1); padding-inline: var(--ks-gutter); background: var(--ks-zwart); color: var(--ks-wit); border-bottom-color: var(--ks-zwart); }
.ks-sheet__item.is-actief .ks-subtegel__nummer { color: var(--ks-turquoise); }
.ks-sheet__stappen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.ks-sheet__stappen .ks-knop { justify-content: center; gap: 10px; }
.ks-sheet__stappen .ks-knop:only-child { grid-column: 1 / -1; }

@media (max-width: 700px) {
	.ks-artikel .ks-submenu { display: none; }
	.ks-themaknop-balk { display: block; position: sticky; top: 80px; z-index: 50; background: var(--ks-wit); border-block: 1px solid #dfe3e3; }
	.ks-themaknop { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px var(--ks-gutter); border: 0; background: none; color: var(--ks-zwart); text-align: left; cursor: pointer; }
	.ks-themaknop__tekst { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
	.ks-themaknop__tekst .ks-submenu__label { font-size: .6875rem; }
	.ks-themaknop__naam { font: 400 1.0625rem/1.2 var(--ks-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.ks-themaknop__stand { font-size: .875rem; color: var(--ks-grijs-tekst); white-space: nowrap; }
	.ks-themaknop__stand strong { font: 400 .875rem/1 var(--ks-nord); color: var(--ks-zwart); }
	.ks-themaknop > .ks-icoon { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--ks-turquoise); color: var(--ks-zwart); }

	/* Paginakop op subpagina's: kruimelpad op één regel, titel naast een kleine foto, de rest eronder. */
	.ks-kop { padding-block: 20px 36px; }
	.ks-kop--compact { padding-bottom: 12px; }
	.ks-kop--band { border-top-width: 12px; }
	.ks-kop--beeld .ks-kop__binnen { grid-template-columns: minmax(0, 1fr) 96px; gap: 0 16px; align-items: center; }
	.ks-kop--beeld .ks-kop__tekst { display: contents; }
	.ks-kop--beeld .ks-kop__tekst > * { grid-column: 1 / -1; }
	.ks-kop--beeld .ks-kop__tekst > .ks-kruimel { grid-row: 1; }
	.ks-kop--beeld .ks-kop__tekst > .ks-kop__titel { grid-column: 1; grid-row: 2; margin: 0; }
	.ks-kop--beeld .ks-kop__beeld { grid-column: 2; grid-row: 2; margin: 0; }
	.ks-kop--beeld .ks-kop__beeld .ks-fotokader { max-width: 96px; }
	.ks-kop--beeld .ks-kop__tekst > .ks-kop__ondertitel { margin-top: 18px; }
	.ks-kruimel ol { flex-wrap: nowrap; overflow: hidden; margin-bottom: 12px; font-size: .875rem; white-space: nowrap; }
	.ks-kruimel li { flex: none; }
	.ks-kruimel li:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	.ks-kop__titel { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.4rem); line-height: 1.08; }
	.ks-kop__knoppen .ks-knop { flex: 1 1 auto; justify-content: space-between; }

	/* Kop van een artikel: compact, titel naast een kleine foto, kruimelpad op één regel. */
	.ks-artikel .ks-kop { padding-block: 20px 28px; }
	.ks-artikel .ks-kop--band { border-top-width: 12px; }
	.ks-artikel .ks-kop--beeld .ks-kop__binnen { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; align-items: end; }
	.ks-artikel .ks-kop__beeld { grid-column: 2; grid-row: 2 / 4; align-self: center; }
	.ks-artikel .ks-kop__beeld .ks-fotokader { max-width: 96px; }
	.ks-artikel .ks-kop__tekst { display: contents; }
	.ks-artikel .ks-kruimel { grid-column: 1 / -1; grid-row: 1; }
	.ks-artikel .ks-kruimel ol { flex-wrap: nowrap; overflow: hidden; margin-bottom: 4px; font-size: .875rem; white-space: nowrap; }
	.ks-artikel .ks-kruimel li { flex: none; }
	.ks-artikel .ks-kruimel li:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	.ks-artikel .ks-kop__tekst > .ks-nummer { grid-column: 1; grid-row: 2; }
	.ks-artikel .ks-kop__tekst > .ks-kop__titel { grid-column: 1; grid-row: 3; }
	.ks-artikel .ks-kop:not(.ks-kop--beeld) .ks-kop__tekst > * { grid-column: 1 / -1; }
	.ks-artikel .ks-nummer--groot { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1rem; color: var(--ks-turquoise-donker); }
	.ks-artikel__themalabel { display: inline; font: .75rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-grijs-tekst); }
	.ks-artikel__themalabel::before { content: "·"; margin-right: 10px; color: var(--ks-turquoise-donker); }
	.ks-artikel .ks-kop__titel { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.058rem); line-height: 1.1; }
}

/* 7. Professionals en profiel ----------------------------------------------------------- */

.ks-pro { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 24px; border: var(--ks-lijn); background: #fbfbfb; transition: box-shadow .2s; }
.ks-pro:hover { box-shadow: 0 10px 30px rgba(8, 10, 10, .07); }
.ks-pro.is-uitgelicht { border-color: var(--ks-aubergine); border-width: 2px; padding: 23px; }
.ks-pro__uitgelicht { position: absolute; top: -1px; right: -1px; padding: 6px 12px; background: var(--ks-aubergine); color: var(--ks-wit); font: .75rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .06em; }
.ks-pro-logo { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--ks-wit); box-shadow: 0 0 0 1px #eceeee; }
.ks-pro-logo img { width: 100%; height: 100%; object-fit: contain; }
.ks-pro-logo--marge img { width: 84%; height: 84%; }
.ks-pro-logo .ks-icoon { font-size: 34px; color: #9ca3af; }
.ks-pro__naam { font-size: var(--ks-t1); margin: 2px 0 6px; }
.ks-pro__naam a { text-decoration: none; }
.ks-pro__naam a:hover { color: var(--ks-turquoise-donker); }
.ks-pro__contact { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.ks-pro__contact li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ks-pro__contact a { text-decoration: none; overflow-wrap: anywhere; }
.ks-pro__contact a:hover { text-decoration: underline; }
.ks-pro__contact .ks-icoon { color: var(--ks-turquoise); font-size: 16px; }
.ks-pro--klein { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px; background: var(--ks-wit); }
.ks-pro--klein .ks-pro-logo { width: 52px; height: 52px; }
.ks-pro--klein .ks-pro__naam { font-size: 1.0625rem; }
.ks-pro--klein .ks-pro__contact { margin: 10px 0 12px; font-size: .85rem; }
.ks-pro--klein.is-uitgelicht { padding: 15px; }

.ks-profiel { padding-bottom: var(--ks-sectie); position: relative; }
.ks-profiel__binnen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 72px); align-items: start; }
/* Twee kopniveaus op het profiel: Kop 2 en de vaste kopjes (Praktijkvoorbeelden, Gespecialiseerde
   thema's, Werkgebied) even groot, Kop 3 een maat kleiner. */
.ks-profiel__bio h2, .ks-profiel__blok h2 { font-size: var(--ks-h3); line-height: 1.2; margin: 1.6em 0 .6em; }
.ks-profiel__bio > h2:first-child { margin-top: 0; }
.ks-profiel__bio h3, .ks-profiel__bio h4 { font-size: var(--ks-h4); line-height: 1.25; margin: 1.5em 0 .5em; }
.ks-profiel__blok { margin-top: clamp(56px, 6vw, 80px); }
.ks-profiel__blok h2 { margin: 0 0 24px; font-size: var(--ks-h3); }
.ks-portfolio { margin-top: 40px; padding: clamp(24px, 3vw, 36px); background: var(--ks-roze-licht); }
.ks-portfolio h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ks-portfolio__filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ks-portfolio__filter .ks-chip { border: 0; cursor: pointer; font-family: inherit; font-size: .875rem; background: var(--ks-wit); color: var(--ks-aubergine); box-shadow: inset 0 0 0 1px rgba(66, 14, 80, .25); }
.ks-portfolio__filter .ks-chip:hover { box-shadow: inset 0 0 0 2px var(--ks-aubergine); background: var(--ks-wit); }
.ks-portfolio__filter .ks-chip[aria-pressed=true] { background: var(--ks-aubergine); color: var(--ks-wit); box-shadow: none; }
.ks-portfolio .ks-voorbeeld[hidden] { display: none; }
.ks-portfolio__aantal { font: .8125rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-turquoise-donker); }
@media (max-width: 600px) { .ks-portfolio { padding: 20px 16px; margin-inline: calc(var(--ks-gutter) * -1); } }
.ks-onswerk { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ks-onswerk .ks-tegel { min-height: 130px; }
.ks-onswerk__thema { overflow-wrap: anywhere; font: .6875rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-turquoise-donker); }

/* Thema's per hoofdthema: kaarten met nummer, kop en specialismen. */
.ks-themagroepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ks-themagroep { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid #e4e8e8; border-top: 3px solid var(--ks-turquoise); background: var(--ks-wit); transition: box-shadow .25s, transform .25s; }
@media (hover: hover) { .ks-themagroep:hover { box-shadow: 0 14px 36px rgba(66, 14, 80, .09); transform: translateY(-2px); } }
.ks-themagroep__nr { margin: 0; font: .75rem/1 var(--ks-nord); letter-spacing: .08em; color: var(--ks-turquoise-donker); }
.ks-themagroep__kop { margin: 0; font: 400 var(--ks-t1)/1.2 var(--ks-serif); }
.ks-themagroep__kop a { text-decoration: none; }
.ks-themagroep__kop a:hover { color: var(--ks-turquoise-donker); }
.ks-themagroep__aantal { margin: 0 0 6px; font-size: .875rem; color: var(--ks-grijs-tekst); }
.ks-themagroep .ks-labels { gap: 6px; }
.ks-themagroep .ks-chip { padding: 6px 11px; font-size: .875rem; }
.ks-themagroep a.ks-chip { display: inline-flex; align-items: center; gap: 8px; }
.ks-themagroep a.ks-chip::after { content: "\2192"; color: var(--ks-turquoise); transition: transform .2s; }
.ks-themagroep a.ks-chip:hover::after { transform: translateX(3px); color: currentColor; }
.ks-themagroep .ks-chip--stil { background: var(--ks-grijs); color: var(--ks-grijs-tekst); } /* nog geen artikel */
.ks-themagroep .ks-chip { background: var(--ks-aubergine); color: var(--ks-wit); } /* Thema's aubergine, werkgebied lichtlila, als op de vorige site. */
@media (hover: hover) { .ks-themagroep a.ks-chip:hover { background: var(--ks-turquoise); color: var(--ks-zwart); } }
.ks-chip--stil { cursor: default; }
.ks-gerelateerd-art { margin-top: 20px; }
.ks-gerelateerd-art__lijst { list-style: none; margin: 0; padding: 0; }
.ks-gerelateerd-art__lijst a { display: block; padding: 9px 0; border-bottom: 1px solid #eef0f0; font-size: .95rem; line-height: 1.35; text-decoration: none; }
.ks-gerelateerd-art__lijst a:hover { color: var(--ks-turquoise-donker); text-decoration: underline; }
.ks-gerelateerd-art__voet { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: .8125rem; color: var(--ks-grijs-tekst); }
.ks-gerelateerd-art__pijlen { display: flex; }
.ks-gerelateerd-art__pijlen button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ks-turquoise-donker); cursor: pointer; font-size: 18px; }
.ks-gerelateerd-art__pijlen button:disabled { opacity: .3; cursor: default; }

/* Praktijkvoorbeelden. */
.ks-voorbeelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ks-voorbeelden--drie { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ks-voorbeeld { position: relative; display: flex; flex-direction: column; background: var(--ks-wit); border: var(--ks-lijn); transition: box-shadow .2s; }
.ks-voorbeeld:hover { box-shadow: 0 10px 30px rgba(8, 10, 10, .08); }
.ks-voorbeeld__beeld { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ks-roze-licht); }
.ks-voorbeeld__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ks-voorbeeld:hover .ks-voorbeeld__beeld img { transform: scale(1.03); }
.ks-voorbeeld__leeg { display: grid; place-items: center; height: 100%; font-size: 40px; color: var(--ks-turquoise); }
.ks-voorbeeld__tekst { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.ks-voorbeeld--artikel .ks-voorbeeld__meta { color: var(--ks-aubergine, #5b2a4e); }
.ks-voorbeeld__expert { margin: 0 0 10px; font-size: .875rem; color: var(--ks-grijs-tekst); }
.ks-voorbeeld__meta { margin: 0; font: .75rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-turquoise-donker); }
.ks-voorbeeld__titel { margin: 0; font-size: var(--ks-t1); line-height: 1.25; }
.ks-voorbeeld__titel a { text-decoration: none; }
.ks-voorbeeld__titel a::after { content: ""; position: absolute; inset: 0; }
.ks-voorbeeld__intro { margin: 0; font-size: .95rem; color: var(--ks-grijs-tekst); }
.ks-voorbeeld__lees { margin-top: auto; padding-top: 8px; font-size: .9rem; }
.ks-voorbeeld:hover .ks-voorbeeld__lees .ks-icoon { transform: translateX(3px); }

/* Pagina van een praktijkvoorbeeld. */
.ks-voorbeeldpagina__intro { font-size: 1.125rem; }
.ks-feiten { border-block: 1px solid #e6eaea; }
.ks-feiten__lijst { display: flex; flex-wrap: wrap; gap: 16px 56px; margin-block: 0; padding-block: 20px; }
.ks-feiten__lijst dt { font: .75rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-grijs-tekst); margin-bottom: 4px; }
.ks-feiten__lijst dd { margin: 0; font: 400 1.125rem/1.3 var(--ks-serif); }
.ks-voorbeeldpagina__binnen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 6vw, 96px); padding-block: 56px var(--ks-sectie); align-items: start; }
.ks-voorbeeldpagina__binnen > * { min-width: 0; }
.ks-voorbeeldpagina__tekst { max-width: 780px; }
.ks-voorbeeldpagina__tekst > h2:first-child { margin-top: 0; }
.ks-voorbeeldpagina__zij { position: sticky; top: calc(var(--ks-header) + 24px); }
.ks-voorbeeldpagina__zij .ks-kaartje { display: grid; gap: 14px; }
.ks-voorbeeldpagina__zij .ks-kaartje h2 { margin: 0; }
.ks-voorbeeldpagina__zij .ks-knop { justify-content: space-between; }
@media (max-width: 960px) {
	.ks-voorbeeldpagina__binnen { grid-template-columns: 1fr; }
	.ks-voorbeeldpagina__zij { position: static; }
}
.ks-profiel__zij { display: grid; gap: 20px; position: sticky; top: calc(var(--ks-header) + 24px); }
.ks-kaartje { padding: 24px; background: var(--ks-wit); box-shadow: 0 6px 28px rgba(8, 10, 10, .08); }
.ks-kaartje h2 { font-size: var(--ks-t1); margin-bottom: 18px; }
.ks-kaartje__regel { font-size: .95rem; }
.ks-kaartje__knoppen { display: grid; gap: 10px; margin: 8px 0 0; }
.ks-kaartje__knoppen .ks-knop { justify-content: space-between; }
@media (max-width: 960px) {
	.ks-profiel__binnen { grid-template-columns: 1fr; }
	.ks-profiel__zij { position: static; }
}

/* Profielkop: logo, typering, acties en cijfers. Kleuren via --ph-*, zodat de ontwerpvarianten
   (klasse ks-phero--<naam>, voorbeeld via ?ontwerp=) alleen tokens en een paar regels hoeven te wijzigen.
   Standaard "zacht": lichtroze vlak, aubergine alleen als accent. De contactkaart schuift er op brede
   schermen half overheen; de kop houdt daarvoor rechts ruimte vrij. */
.ks-phero {
	--ph-bg: var(--ks-roze-licht); --ph-tekst: var(--ks-zwart); --ph-zacht: #4a4f4f; --ph-label: var(--ks-turquoise-donker);
	--ph-cijfer: var(--ks-aubergine); --ph-lijn: rgba(36, 199, 177, .55); --ph-raster: rgba(36, 199, 177, .22);
	--ph-decor: .16; --ph-knop-bg: var(--ks-zwart); --ph-knop-tekst: var(--ks-wit); --ph-knop-hover: var(--ks-aubergine);
	--ph-rand: var(--ks-zwart);
	position: relative; overflow: hidden; background: var(--ph-bg); color: var(--ph-tekst); border-bottom: var(--ks-lijn);
}
.ks-phero__decor { position: absolute; inset: 0; pointer-events: none; }
.ks-phero__decor .ks-kop__raster span { border-right-color: var(--ph-raster); }
.ks-phero__decor img { position: absolute; width: min(720px, 60vw); right: -12%; bottom: -46%; opacity: var(--ph-decor); }
.ks-phero__binnen { position: relative; padding-block: clamp(28px, 4vw, 44px) clamp(40px, 5vw, 56px); }
.ks-phero__binnen > * { max-width: calc(100% - 360px - clamp(32px, 5vw, 72px)); }
.ks-phero__terug { color: var(--ph-zacht); margin-bottom: clamp(20px, 3vw, 32px); }
.ks-phero__terug:hover { color: var(--ph-label); }
.ks-phero__id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; }
.ks-phero .ks-pro-logo { width: clamp(96px, 10vw, 140px); height: clamp(96px, 10vw, 140px); box-shadow: 0 0 0 1px var(--ph-lijn), 0 0 0 8px var(--ks-wit), 0 0 0 9px var(--ph-lijn), 0 18px 40px rgba(66, 14, 80, .12); }
.ks-phero__soort { margin: 0 0 10px; font: .8125rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .1em; color: var(--ph-label); }
.ks-phero__naam { margin: 0; color: var(--ph-tekst); font-size: var(--ks-h1); line-height: 1.02; }
.ks-phero__ondertitel { margin: 16px 0 0; max-width: 46ch; font-size: clamp(1.0625rem, .98rem + .35vw, var(--ks-t1)); line-height: 1.5; color: var(--ph-zacht); }
.ks-phero__regel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(24px, 3vw, 32px); }
.ks-phero__score { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ph-tekst); text-decoration: none; font-size: .9375rem; }
.ks-phero__score .ks-sterren__cijfer, .ks-phero__score .ks-score__aantal { color: var(--ph-tekst); }
.ks-phero__score--leeg .ks-icoon { color: #f5b400; font-size: 18px; }
.ks-phero__score:hover { color: var(--ph-label); text-decoration: underline; }
.ks-keurmerken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ks-keurmerken a, .ks-keurmerken__item { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: var(--ks-wit); color: var(--ks-zwart); text-decoration: none; font-size: .8125rem; line-height: 1.25; border-radius: 999px; box-shadow: 0 0 0 1px rgba(8, 10, 10, .08); }
.ks-keurmerken img { height: 32px; width: auto; }
.ks-keurmerken small { display: block; font-size: .75rem; color: var(--ks-turquoise-donker); text-decoration: underline; }
.ks-keurmerken a:hover { box-shadow: 0 0 0 2px var(--ks-turquoise); }
.ks-phero__cijfers { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: clamp(32px, 4vw, 44px) 0 0; padding: 0; border-top: 1px solid var(--ph-lijn); }
.ks-phero__cijfers li + li { border-left: 1px solid var(--ph-lijn); }
.ks-phero__cijfers a { display: grid; gap: 4px; padding: 18px 18px 0; color: inherit; text-decoration: none; }
.ks-phero__cijfers li:first-child a { padding-left: 0; }
.ks-phero__cijfers strong { font: 400 clamp(2rem, 1.6rem + 1.6vw, var(--ks-t4))/1 var(--ks-serif); color: var(--ph-cijfer); }
.ks-phero__cijfers span { font-size: .875rem; line-height: 1.35; color: var(--ph-zacht); }
.ks-phero__cijfers a:hover span { color: var(--ph-tekst); text-decoration: underline; }

/* Contactkaart steekt omhoog in de kop (zacht en paars). */
@media (min-width: 961px) {
	.ks-profiel__zij > .ks-kaartje:first-child { border-top: 4px solid var(--ks-turquoise); }
	:is(.ks-phero--zacht, .ks-phero--paars) + .ks-profiel .ks-profiel__zij { margin-top: -260px; z-index: 2; }
	:is(.ks-phero--zacht, .ks-phero--paars) + .ks-profiel .ks-profiel__zij > .ks-kaartje:first-child { box-shadow: 0 24px 60px rgba(8, 10, 10, .12); }
	:is(.ks-phero--wit, .ks-phero--band, .ks-phero--duo) + .ks-profiel .ks-profiel__zij { margin-top: 40px; }
}

/* Variant paars: de eerste opzet, heel het vlak aubergine. */
.ks-phero--paars {
	--ph-bg: var(--ks-aubergine); --ph-tekst: var(--ks-wit); --ph-zacht: rgba(255, 255, 255, .82); --ph-label: var(--ks-turquoise);
	--ph-cijfer: var(--ks-turquoise); --ph-lijn: rgba(36, 199, 177, .45); --ph-raster: rgba(255, 255, 255, .07); --ph-decor: .5;
	--ph-knop-bg: var(--ks-turquoise); --ph-knop-tekst: var(--ks-zwart); --ph-knop-hover: var(--ks-wit); --ph-rand: rgba(255, 255, 255, .5);
	border-bottom: 0;
}
.ks-phero--paars .ks-knop--accent:hover { color: var(--ks-zwart); }
.ks-phero--paars .ks-pro-logo { box-shadow: 0 0 0 6px rgba(36, 199, 177, .9), 0 20px 50px rgba(0, 0, 0, .3); }

/* Variant wit: wit vlak met de turquoise rasterlijnen van de site, geen decor, cijfers als vakken. */
.ks-phero--wit { --ph-bg: var(--ks-wit); --ph-raster: rgba(36, 199, 177, .3); --ph-decor: 0; --ph-cijfer: var(--ks-zwart); }
.ks-phero--wit .ks-phero__binnen > * { max-width: none; }
.ks-phero--wit .ks-phero__id { max-width: 1120px; }
.ks-phero--wit .ks-phero__id { grid-template-columns: minmax(0, 1fr) auto; }
.ks-phero--wit .ks-pro-logo { order: 2; width: clamp(96px, 13vw, 184px); height: clamp(96px, 13vw, 184px); box-shadow: 0 0 0 1px var(--ks-turquoise); }
.ks-phero--wit .ks-phero__naam { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.2rem); }
.ks-phero--wit .ks-phero__cijfers { gap: 12px; border-top: 0; }
.ks-phero--wit .ks-phero__cijfers li { border: var(--ks-lijn); background: var(--ks-wit); }
.ks-phero--wit .ks-phero__cijfers li + li { border-left: var(--ks-lijn); }
.ks-phero--wit .ks-phero__cijfers a, .ks-phero--wit .ks-phero__cijfers li:first-child a { padding: 20px 22px; }
.ks-phero--wit .ks-phero__cijfers strong::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 12px; background: var(--ks-turquoise); }

/* Variant band: smalle aubergine band met de boog, daaronder een witte kaart die erover valt. */
.ks-phero--band { --ph-bg: var(--ks-wit); --ph-raster: transparent; --ph-decor: .55; border-bottom: 0; background: linear-gradient(var(--ks-aubergine) 0 clamp(150px, 16vw, 210px), var(--ks-wit) 0); }
.ks-phero--band .ks-phero__decor { height: clamp(150px, 16vw, 210px); overflow: hidden; }
.ks-phero--band .ks-phero__decor img { bottom: auto; top: -120%; right: -6%; }
.ks-phero--band .ks-phero__binnen { padding-top: 0; }
.ks-phero--band .ks-phero__terug { color: rgba(255, 255, 255, .85); margin: 0; padding-block: 20px 44px; }
.ks-phero--band .ks-phero__terug:hover { color: var(--ks-turquoise); }
.ks-phero--band .ks-phero__binnen > * { max-width: none; }
.ks-phero--band .ks-phero__kaart { background: var(--ks-wit); box-shadow: 0 20px 60px rgba(8, 10, 10, .1); border-top: 4px solid var(--ks-turquoise); padding: clamp(24px, 4vw, 48px); }
.ks-phero--band .ks-pro-logo { margin-top: calc(clamp(96px, 10vw, 140px) * -.5); align-self: start; }
.ks-phero--band .ks-phero__id { align-items: start; }

/* Variant duo: tekst links op wit, cijfers rechts in een lichtroze paneel. */
.ks-phero--duo { --ph-bg: var(--ks-wit); --ph-raster: transparent; --ph-decor: 0; }
.ks-phero--duo .ks-phero__binnen > * { max-width: none; }
@media (min-width: 961px) {
	.ks-phero--duo .ks-phero__kaart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 0 clamp(32px, 5vw, 72px); align-items: center; }
	.ks-phero--duo .ks-phero__kaart > :not(.ks-phero__cijfers) { grid-column: 1; }
	.ks-phero--duo .ks-phero__cijfers { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; margin: 0; }
}
.ks-phero--duo .ks-phero__cijfers { grid-template-columns: 1fr 1fr; align-content: center; border: 0; padding: clamp(20px, 3vw, 40px); background: var(--ks-roze-licht); position: relative; overflow: hidden; }
.ks-phero--duo .ks-phero__cijfers::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; bottom: -90px; border-radius: 50%; border: 18px solid rgba(36, 199, 177, .35); pointer-events: none; }
.ks-phero--duo .ks-phero__cijfers li, .ks-phero--duo .ks-phero__cijfers li + li { border: 0; }
.ks-phero--duo .ks-phero__cijfers li:nth-child(2n) { border-left: 1px solid var(--ph-lijn); }
.ks-phero--duo .ks-phero__cijfers li:nth-child(n+3) { border-top: 1px solid var(--ph-lijn); }
.ks-phero--duo .ks-phero__cijfers a, .ks-phero--duo .ks-phero__cijfers li:first-child a { padding: 18px 20px; }
.ks-phero--duo .ks-phero__cijfers strong { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }

/* Sectienavigatie: plakt onder de header, volgt de sectie in beeld. */
.ks-profielnav { position: sticky; top: var(--ks-header); z-index: 5; margin: 0 0 8px; background: var(--ks-wit); border-bottom: 1px solid #e4e8e8; }
.admin-bar .ks-profielnav { top: calc(var(--ks-header) + 32px); }
.ks-profielnav ul { list-style: none; display: flex; gap: clamp(16px, 3vw, 32px); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.ks-profielnav ul::-webkit-scrollbar { display: none; }
.ks-profielnav a { display: block; padding: 18px 0 15px; border-bottom: 3px solid transparent; font: .8125rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; text-decoration: none; color: var(--ks-grijs-tekst); transition: color .2s, border-color .2s; }
.ks-profielnav a:hover { color: var(--ks-zwart); }
.ks-profielnav a.is-actief { color: var(--ks-aubergine); border-bottom-color: var(--ks-turquoise); }
html:has(.ks-profielnav) { scroll-padding-top: calc(var(--ks-header) + 80px); }
.ks-sectiekop__label { margin: 0 0 10px; font: .75rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .1em; color: var(--ks-turquoise-donker); display: flex; align-items: center; gap: 12px; }
.ks-sectiekop__label::before { content: ""; width: 28px; height: 1px; background: var(--ks-turquoise); }

/* Over: eerste alinea als inleiding, lijsten met vinkjes. */
.ks-profiel__over { max-width: 72ch; }
.ks-profiel__bio > p:first-child, .ks-profiel__bio > h2:first-child + p { font-size: clamp(1.0625rem, 1rem + .3vw, var(--ks-t1)); line-height: 1.55; }
.ks-profiel__bio ul { list-style: none; padding: 20px 24px; background: var(--ks-roze-licht); display: grid; gap: 4px; }
.ks-profiel__bio ul li { position: relative; padding-left: 30px; margin: 0; }
.ks-profiel__bio ul li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--ks-turquoise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }

@media (max-width: 960px) {
	.ks-phero__binnen > * { max-width: none; }
	.ks-phero__decor img { width: 90vw; right: -40%; bottom: -30%; }
}
@media (max-width: 600px) {
	.ks-phero__id { grid-template-columns: 1fr; gap: 20px; }
	.ks-phero__cijfers { grid-template-columns: 1fr 1fr; }
	.ks-phero__cijfers li + li { border-left: 0; }
	.ks-phero__cijfers li:nth-child(2n) { border-left: 1px solid var(--ph-lijn); }
	.ks-phero__cijfers li:nth-child(n+3) { border-top: 1px solid var(--ph-lijn); }
	.ks-phero--wit .ks-phero__cijfers li { border: var(--ks-lijn); }
	.ks-phero--wit .ks-phero__cijfers li a { padding: 14px 16px; }
	.ks-phero--wit .ks-phero__id { grid-template-columns: 1fr; }
	.ks-phero--wit .ks-pro-logo { order: 0; }
	.ks-phero .ks-pro-logo { margin-left: 9px; } /* ring valt anders tegen de schermrand */
	.ks-phero--duo .ks-phero__cijfers li:nth-child(n) a { padding: 16px 18px; }
	.ks-phero__cijfers a, .ks-phero__cijfers li:first-child a { padding: 16px 12px 14px; }
	.ks-phero__cijfers li:nth-child(2n+1) a { padding-left: 0; }
}

/* Beoordelingen (Site Reviews in de huisstijl). */
.ks-reviews { margin-top: 64px; padding-top: 48px; border-top: var(--ks-lijn); }
.ks-reviews__kop { font-size: var(--ks-h3); margin-bottom: 28px; }
.ks-reviews__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ks-reviews__raster--leeg { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.ks-reviews__formulier, .ks-reviews__samenvatting, .ks-review, .ks-reviews__leeg { padding: 28px; border: var(--ks-lijn); background: var(--ks-wit); }
.ks-reviews__formulier h3 { font-size: var(--ks-t1); margin-bottom: 6px; }
.ks-reviews__intro { color: var(--ks-grijs-tekst); font-size: .95rem; margin-bottom: 24px; }
.ks-reviews__overzicht { display: grid; gap: 16px; min-width: 0; }

/* Sterreninvoer: radio's in omgekeerde volgorde, zodat hover en keuze de sterren ervoor meekleuren. */
.ks-sterkeuze__sterren { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.ks-sterkeuze { position: relative; }
.ks-sterkeuze legend { padding: 0; }
.ks-veld.ks-sterkeuze .ks-sterkeuze__sterren input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; clip: rect(0 0 0 0); }
.ks-sterkeuze__sterren label { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: #d4d7d7; cursor: pointer; transition: color .15s, transform .15s; }
.ks-sterkeuze__sterren label .ks-icoon { width: 34px; height: 34px; }
.ks-sterkeuze__sterren input:checked ~ label,
.ks-sterkeuze__sterren label:hover, .ks-sterkeuze__sterren label:hover ~ label { color: #f5b400; }
.ks-sterkeuze__sterren label:hover { transform: scale(1.08); }
.ks-sterkeuze__sterren input:focus-visible + label { outline: 2px solid var(--ks-turquoise); outline-offset: 2px; }
.ks-sterkeuze__oordeel { font-size: .875rem; color: var(--ks-grijs-tekst); }
.ks-reviewform__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ks-reviewform__uitleg { font-size: .9rem; color: var(--ks-grijs-tekst); }
.ks-reviewform .ks-vinkje { margin: 4px 0 24px; }

.ks-reviews__totaal { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: var(--ks-lijn); }
.ks-reviews__cijfer { font: var(--ks-t4)/1 var(--ks-serif); }
.ks-reviews__totaal .ks-ster { font-size: 20px; }
.ks-reviews__totaal p { margin: 4px 0 0; font-size: .9rem; color: var(--ks-grijs-tekst); }
.ks-reviews__verdeling { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ks-reviews__verdeling li { display: grid; grid-template-columns: 88px 1fr 28px; align-items: center; gap: 12px; font-size: .875rem; }
.ks-reviews__balk { height: 8px; background: var(--ks-grijs); overflow: hidden; }
.ks-reviews__balk > span { display: block; height: 100%; background: #f5b400; }
.ks-reviews__n { text-align: right; color: var(--ks-grijs-tekst); }

.ks-reviews__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ks-review__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ks-review__kop time { font-size: .85rem; color: var(--ks-grijs-tekst); }
.ks-review__titel { font: 400 var(--ks-t1)/1.3 var(--ks-serif); margin: 12px 0 8px; }
.ks-review__tekst p { margin: 0 0 10px; }
.ks-review__door { margin: 14px 0 0; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ks-review__bevestigd { display: inline-flex; align-items: center; gap: 4px; color: var(--ks-turquoise-donker); font-size: .8125rem; }
.ks-review__bevestigd .ks-icoon { width: 16px; height: 16px; stroke-width: 2.2; }
.ks-reviews__meer { justify-self: start; border: 1px solid var(--ks-zwart); }
.ks-reviews__leeg { display: grid; gap: 10px; color: var(--ks-grijs-tekst); }
.ks-reviews__leeg p { margin: 0; }
@media (max-width: 860px) { .ks-reviews__raster { grid-template-columns: 1fr; } .ks-reviews__overzicht { order: -1; } .ks-reviews--melding .ks-reviews__overzicht { order: 0; } }
@media (max-width: 480px) {
	.ks-reviews__formulier, .ks-reviews__samenvatting, .ks-review, .ks-reviews__leeg { padding: 20px; }
	.ks-reviewform__duo { grid-template-columns: 1fr; }
}

/* 8. Zoeker ----------------------------------------------------------------------------- */

.ks-zoeker { padding-top: 32px; }
.ks-zoeker__binnen { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: clamp(24px, 5vw, 62px); align-items: start; }
.ks-zoeker__filter { background: var(--ks-grijs); padding: 24px 18px 28px; position: sticky; top: calc(var(--ks-header) + 24px); }
.ks-zoeker__filterkop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ks-zoeker__filterkop h2 { font-size: var(--ks-t2); margin: 0; }
.ks-zoeker__sluit { display: none; background: none; border: 0; padding: 6px; }
.ks-zoeker__sluit .ks-icoon { font-size: 26px; }
.ks-zoeker__filter .ks-veld { margin-bottom: 18px; }
.ks-zoeker__filter .ks-veld input, .ks-zoeker__filter .ks-veld select { border-color: var(--ks-wit); }
.ks-veld--vinkjes { gap: 10px; }
.ks-zoeker__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.ks-zoeker__wis { font-size: .9rem; text-decoration: underline; }
.js .ks-zoeker__toepassen { display: none; }
.ks-zoeker__balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ks-zoeker__aantal { margin: 0; color: var(--ks-grijs-tekst); font-size: .95rem; }
.ks-zoeker__open { display: none; }
.ks-veld--sorteer { margin: 0 0 0 auto; width: 220px; }
.ks-filterchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 18px; }
.ks-filterchips:empty { display: none; }
.ks-filterchips__label { font: .75rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .1em; color: var(--ks-grijs-tekst); margin-right: 4px; }
.ks-filterchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 16px; border: var(--ks-lijn); border-radius: 999px; background: var(--ks-wit); font-size: .875rem; line-height: 1.2; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.ks-filterchip__soort { color: var(--ks-grijs-tekst); }
.ks-filterchip .ks-icoon { flex: none; box-sizing: border-box; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--ks-turquoise); color: var(--ks-zwart); font-size: 20px; stroke-width: 2.4; transition: background-color .2s, color .2s; }
.ks-filterchip:hover, .ks-filterchip:focus-visible { background: var(--ks-zwart); border-color: var(--ks-zwart); color: var(--ks-wit); }
.ks-filterchip:hover .ks-filterchip__soort, .ks-filterchip:focus-visible .ks-filterchip__soort { color: #c9cfcf; }
.ks-filterchip:hover .ks-icoon, .ks-filterchip:focus-visible .ks-icoon { background: var(--ks-wit); }
.ks-filterchips__wis { margin-left: 6px; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
.ks-filterchips__wis:hover { color: var(--ks-turquoise-donker); }
.ks-zoeker__lijst { transition: opacity .2s; }
.ks-zoeker__lijst.is-bezig { opacity: .45; }
.ks-zoeker__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ks-zoeker__leeg { padding: 40px; background: var(--ks-grijs); text-align: center; }
.ks-paginering { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.ks-paginering__nr { display: grid; place-items: center; min-width: 44px; height: 44px; border: var(--ks-lijn); text-decoration: none; }
.ks-paginering__nr.is-actief, .ks-paginering__nr:hover { background: var(--ks-zwart); color: var(--ks-wit); border-color: var(--ks-zwart); }

.ks-kaart { border: var(--ks-lijn); background: var(--ks-wit); display: flex; flex-direction: column; }
.ks-kaart__beeld { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ks-kaart__tekst { padding: 22px; display: grid; gap: 10px; }
.ks-kaart__titel { font-size: var(--ks-t1); margin: 0; }

@media (max-width: 1100px) { .ks-zoeker__raster { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 860px) { .ks-zoeker__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.ks-zoeker__binnen { grid-template-columns: 1fr; }
	.ks-zoeker__open { display: inline-flex; }
	.js .ks-zoeker__filter { position: fixed; inset: 0; z-index: 150; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; padding: 24px var(--ks-gutter) 40px; }
	.js .ks-zoeker.is-filter-open .ks-zoeker__filter { transform: none; }
	.js .ks-zoeker__toepassen { display: inline-flex; }
	.ks-zoeker__sluit { display: block; }
	.ks-zoeker__filter { position: static; }
	.ks-veld--sorteer { width: auto; flex: 1; max-width: 200px; }
	.ks-zoeker__aantal { display: none; }
}

/* 8b. Aansluiten: routes, voorbeeldprofiel, stappen ------------------------------------- */

.ks-kop__knoppen { margin-top: 28px; }
.ks-kop__citaat a { color: inherit; text-decoration-color: var(--ks-turquoise); text-underline-offset: 3px; }
.ks-kop__citaat { max-width: 720px; margin: 22px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--ks-turquoise); font: 400 var(--ks-h4)/1.4 var(--ks-serif); color: var(--ks-aubergine); }
/* Tegel met link: pijl onderaan in de doorloop van de tegel, zodat hij nooit over de tekst valt
   (stond absoluut, maar de rasterpadding overschreef de ruimte die daarvoor was gereserveerd). */
.ks-stap--link { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.ks-stap--link .ks-stap__titel a { text-decoration: none; color: inherit; }
.ks-stap--link .ks-stap__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ks-stap--link .ks-stap__titel a:focus-visible::after { outline: 2px solid var(--ks-turquoise-donker); outline-offset: -2px; }
.ks-stap__pijl { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 10px; font: .8125rem/1 var(--ks-nord); text-transform: uppercase; letter-spacing: .06em; }
.ks-stap__pijl .ks-icoon { font-size: 22px; transition: transform .2s; }
@media (hover: hover) { .ks-stap--link:hover .ks-stap__pijl .ks-icoon { transform: translateX(4px); } }

/* Twee routes op aubergine, met het lijnenraster van de huisstijl. */
.ks-routes { position: relative; overflow: hidden; background: var(--ks-aubergine); color: var(--ks-wit); padding-block: var(--ks-sectie); }
.ks-routes__raster { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.ks-routes__raster span { border-right: 1px solid rgba(255, 255, 255, .07); }
.ks-routes__binnen { position: relative; }
.ks-routes__kop { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.ks-routes__kop .ks-label { color: var(--ks-turquoise); }
.ks-routes__kop h2 { margin: 0; color: var(--ks-wit); font-size: var(--ks-h2); }
.ks-routes__tekst { margin: 16px 0 0; font-size: var(--ks-h4); line-height: 1.5; color: rgba(255, 255, 255, .82); }
.ks-routes__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.ks-route { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 48px); color: var(--ks-zwart); transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) { .ks-route:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(8, 10, 10, .28); } }
.ks-route--wit { background: var(--ks-wit); }
.ks-route--turquoise { background: var(--ks-turquoise); }
.ks-route__nummer { position: absolute; top: clamp(20px, 2.4vw, 32px); right: clamp(24px, 3vw, 40px); font: 400 clamp(3rem, 2rem + 3vw, 5.5rem)/1 var(--ks-nord); color: var(--ks-turquoise); opacity: .35; }
.ks-route--turquoise .ks-route__nummer { color: var(--ks-wit); opacity: .55; }
.ks-route__label { margin: 0 0 14px; font: .8125rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-turquoise-donker); max-width: 75%; }
.ks-route--turquoise .ks-route__label { color: var(--ks-zwart); }
.ks-route__titel { margin: 0 0 16px; font-size: var(--ks-h3); max-width: 85%; }
.ks-route__tekst { margin: 0 0 24px; }
.ks-route__punten { list-style: none; margin: 0 0 32px; padding: 24px 0 0; border-top: 1px solid rgba(8, 10, 10, .15); display: grid; gap: 12px; }
.ks-route--wit .ks-route__punten { border-top-color: var(--ks-turquoise); }
.ks-route__punten li { display: flex; align-items: flex-start; gap: 12px; }
.ks-route__punten .ks-icoon { flex: none; width: 24px; height: 24px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--ks-turquoise); color: var(--ks-zwart); stroke-width: 2.4; }
.ks-route--turquoise .ks-route__punten .ks-icoon { background: var(--ks-zwart); color: var(--ks-turquoise); }
.ks-route__knop { margin: auto 0 0; }
.ks-routes__cijfers { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 32px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ks-routes__cijfers li { display: flex; flex-direction: column; gap: 6px; }
.ks-routes__cijfers strong { font: 400 var(--ks-h1)/1 var(--ks-serif); color: var(--ks-turquoise); font-variant-numeric: tabular-nums; }
.ks-routes__cijfers span { font: .8125rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .8); }
@media (max-width: 860px) {
	.ks-routes__kaarten { grid-template-columns: 1fr; }
	.ks-routes__cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.ks-routes__raster { grid-template-columns: repeat(3, 1fr); }
}

/* Voorbeeldprofiel: tekst met genummerde punten naast een echte kaart in een zoekvenster. */
.ks-pu { overflow: clip; }
.ks-pu__binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ks-pu__titel { font-size: var(--ks-h2); margin: 0 0 16px; }
.ks-pu__intro { font-size: var(--ks-h4); line-height: 1.5; color: var(--ks-grijs-tekst); margin: 0 0 32px; max-width: 52ch; }
.ks-pu__punten { list-style: none; margin: 0; padding: 0; border-top: var(--ks-lijn); }
.ks-pu__punten li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: var(--ks-lijn); }
.ks-pu__nummer { font: 400 1.5rem/1 var(--ks-nord); color: var(--ks-turquoise-donker); padding-top: 2px; }
.ks-pu__punten h3 { margin: 0 0 4px; font-size: var(--ks-h4); }
.ks-pu__punten p { margin: 0; color: var(--ks-grijs-tekst); }
.ks-pu__knop { margin: 32px 0 0; }
.ks-pu__voorbeeld { position: relative; padding: clamp(28px, 4vw, 56px); background: var(--ks-roze-licht); }
.ks-pu__ring { position: absolute; width: 62%; aspect-ratio: 1; right: -12%; top: -14%; border-radius: 50%; border: clamp(14px, 1.6vw, 22px) solid var(--ks-turquoise); border-left-color: transparent; border-bottom-color: var(--ks-aubergine); transform: rotate(-20deg); pointer-events: none; }
.ks-pu__venster { position: relative; margin: 0; background: var(--ks-wit); box-shadow: 0 30px 60px rgba(66, 14, 80, .16); transform: rotate(-1.2deg); transition: transform .4s ease; }
.ks-pu__voorbeeld:hover .ks-pu__venster { transform: none; }
.ks-pu__balk { display: flex; align-items: center; padding: 14px 18px; border-bottom: var(--ks-lijn); background: var(--ks-grijs); }
.ks-pu__zoek { display: inline-flex; align-items: center; gap: 10px; font: .8125rem/1 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; }
.ks-pu__zoek .ks-icoon { font-size: 18px; }
.ks-pu__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 18px 18px 0; }
.ks-pu__chips .ks-filterchip { min-height: 34px; padding: 4px 14px; }
.ks-pu__kaart { padding: 18px; }
.ks-pu__kaart .ks-pro { box-shadow: none; }
.ks-pu__onderschrift { padding: 0 18px 18px; font-size: .8125rem; color: var(--ks-grijs-tekst); }
@media (max-width: 960px) {
	.ks-pu__binnen { grid-template-columns: 1fr; }
	.ks-pu__venster { transform: none; }
	.ks-pu__ring { display: none; }
}
@media (max-width: 600px) {
	.ks-pu__voorbeeld { padding: 16px 0; margin-inline: calc(var(--ks-gutter) * -1); }
	.ks-pu__venster { margin-inline: 12px; }
	.ks-pu__kaart, .ks-pu__chips { padding-inline: 12px; }
	.ks-pu__kaart .ks-pro { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 18px; }
}

/* Stappen naast elkaar met een lijn, of een raster met genummerde tegels. */
.ks-stappen--roze { background: var(--ks-roze-licht); }
.ks-stappen + .ks-stappen--roze, .ks-stappen--roze + .ks-sectie { padding-top: var(--ks-sectie); }
.ks-stappen__kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.ks-stappen__titel { font-size: var(--ks-h2); margin: 0; }
.ks-stappen__tekst > :last-child { margin-bottom: 0; }
.ks-stappen__lijst { list-style: none; margin: 0; padding: 0; display: grid; }
.ks-stappen--stappen .ks-stappen__lijst { grid-template-columns: repeat(var(--ks-aantal, 3), minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.ks-stappen--stappen .ks-stap { position: relative; padding-top: 28px; border-top: 2px solid var(--ks-turquoise); }
.ks-stappen--stappen .ks-stap::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ks-turquoise); box-shadow: 0 0 0 5px var(--ks-wit); }
.ks-stappen--roze.ks-stappen--stappen .ks-stap::before { box-shadow: 0 0 0 5px var(--ks-roze-licht); }
.ks-stap__nummer { display: block; font: 400 clamp(2.6rem, 1.8rem + 2.4vw, 4.236rem)/1 var(--ks-nord); color: var(--ks-turquoise-donker); margin-bottom: 18px; }
.ks-stap__titel { font-size: var(--ks-h3); margin: 0 0 10px; }
.ks-stap__tekst { margin: 0; color: var(--ks-grijs-tekst); }
.ks-stappen--raster .ks-stappen__lijst { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.ks-stappen--raster .ks-stap { position: relative; margin: 0 -1px -1px 0; padding: 28px 24px 32px; border: var(--ks-lijn); background: var(--ks-wit); transition: background-color .25s; }
@media (hover: hover) {
	.ks-stappen--raster .ks-stap:hover { background: var(--ks-turquoise); }
	.ks-stappen--raster .ks-stap:hover .ks-stap__nummer, .ks-stappen--raster .ks-stap:hover .ks-stap__tekst { color: var(--ks-zwart); }
}
.ks-stappen--raster .ks-stap__nummer { font-size: 1rem; margin-bottom: 40px; }
.ks-stappen--raster .ks-stap__titel { font-size: var(--ks-h4); }
.ks-stappen__knop { margin: clamp(32px, 4vw, 48px) 0 0; }
@media (max-width: 860px) {
	.ks-stappen__kop { grid-template-columns: 1fr; }
	.ks-stappen--stappen .ks-stappen__lijst { grid-template-columns: 1fr; gap: 0; }
	.ks-stappen--stappen .ks-stap { padding: 0 0 32px 36px; border-top: 0; border-left: 2px solid var(--ks-turquoise); }
	.ks-stappen--stappen .ks-stap:last-child { padding-bottom: 0; border-left-color: transparent; }
	.ks-stappen--stappen .ks-stap::before { top: 0; left: -8px; }
	.ks-stap__nummer { font-size: 2rem; margin-bottom: 10px; }
}

/* 9. Voet ------------------------------------------------------------------------------- */

.ks-voet { position: relative; background: var(--ks-zwart); color: var(--ks-wit); }
.ks-voet__raster { position: absolute; inset: 0 0 56px; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.ks-voet__raster span { border-right: 1px solid rgba(255, 255, 255, .05); }
.ks-voet a { color: inherit; text-decoration: none; }
.ks-voet .ks-label { color: var(--ks-turquoise); margin-bottom: 18px; }

/* Balk voor experts */
.ks-voet__cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px 64px; padding: 64px max(var(--ks-gutter), (100% - var(--ks-breed)) / 2); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ks-voet__cta .ks-label { margin-bottom: 12px; }
.ks-voet__cta-kop { margin: 0; max-width: 22ch; font: 400 var(--ks-h2)/1.12 var(--ks-serif); }
.ks-voet__cta-knoppen { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.ks-knop--turquoise, .ks-voet a.ks-knop--turquoise { background: var(--ks-turquoise); border-color: var(--ks-turquoise); color: var(--ks-zwart); }
.ks-knop--turquoise:hover, .ks-voet a.ks-knop--turquoise:hover { background: var(--ks-wit); border-color: var(--ks-wit); color: var(--ks-zwart); }
.ks-knop--rand, .ks-voet a.ks-knop--rand { background: transparent; border-color: rgba(255, 255, 255, .45); color: var(--ks-wit); }
.ks-knop--rand:hover, .ks-voet a.ks-knop--rand:hover { border-color: var(--ks-wit); background: var(--ks-wit); color: var(--ks-zwart); }

/* Merk, contact en linkkolommen */
.ks-voet__hoofd { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding: 72px max(var(--ks-gutter), (100% - var(--ks-breed)) / 2) 80px; }
.ks-voet__logo { display: inline-block; }
.ks-voet__logo img { width: clamp(190px, 16vw, 240px); height: auto; }
.ks-voet__over { max-width: 36ch; margin: 24px 0 28px; color: rgba(255, 255, 255, .72); font-size: .975rem; line-height: 1.6; }
.ks-voet__contact { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 4px; }
.ks-voet__contact a { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; font-size: 1rem; }
.ks-voet__contact .ks-icoon { width: 20px; height: 20px; color: var(--ks-turquoise); flex: none; }
.ks-voet__contact a:hover span { color: var(--ks-turquoise); }
.ks-voet .ks-sociaal a { background: transparent; color: var(--ks-wit); border: 1px solid rgba(255, 255, 255, .3); }
.ks-voet .ks-sociaal a:hover { background: var(--ks-turquoise); border-color: var(--ks-turquoise); color: var(--ks-zwart); }
.ks-voet__kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ks-voet__kolom a { display: inline-block; overflow-wrap: anywhere; padding: 7px 0; color: rgba(255, 255, 255, .82); font-size: .975rem; line-height: 1.35; transition: color .15s; }
.ks-voet__kolom a:hover { color: var(--ks-turquoise); }
.ks-voet a:focus-visible { outline: 2px solid var(--ks-turquoise); outline-offset: 3px; }

/* Onderbalk */
.ks-voet__onder { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; min-height: 56px; padding: 12px max(var(--ks-gutter), (100% - var(--ks-breed)) / 2); background: var(--ks-aubergine); font-size: .875rem; }
.ks-voet__juridisch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; color: rgba(255, 255, 255, .8); }
.ks-voet__juridisch a:hover { color: var(--ks-wit); text-decoration: underline; }
.ks-voet__boven { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: .8125rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; }
.ks-voet__boven .ks-icoon { width: 18px; height: 18px; transition: transform .2s; }
.ks-voet__boven:hover .ks-icoon { transform: translateY(-3px); }

@media (max-width: 900px) {
	.ks-voet__raster { display: none; }
	.ks-voet__cta { flex-direction: column; align-items: flex-start; padding-top: 48px; padding-bottom: 48px; }
	.ks-voet__hoofd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; padding-top: 48px; padding-bottom: 48px; }
	.ks-voet__merk { display: block; }
	.ks-voet__merk .ks-voet__over { margin-top: 20px; }
	.ks-voet__kolom--themas { grid-column: 1 / -1; }
	.ks-voet__kolom a { padding: 10px 0; }
}
@media (max-width: 480px) {
	.ks-voet__cta-knoppen, .ks-voet__cta-knoppen .ks-knop { width: 100%; }
	.ks-voet__cta-knoppen .ks-knop { justify-content: space-between; }
	.ks-voet__onder { flex-direction: column; align-items: flex-start; padding-top: 18px; padding-bottom: 8px; }
}

/* 9b. Feedback 16-10: score, reacties, praktijkvoorbeelden, team ----------------------- */

/* Kijk op Sportbeleid-score: label met uitklapbare opbouw (profiel) of klein label (kaartjes). */
.ks-kos { position: relative; font-size: .875rem; }
.ks-kos summary { display: inline-flex; gap: 4px; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--ks-wit); color: var(--ks-aubergine); box-shadow: inset 0 0 0 1px rgba(66, 14, 80, .2); cursor: pointer; list-style: none; }
.ks-kos summary::-webkit-details-marker { display: none; }
.ks-kos summary:hover, .ks-kos[open] summary { box-shadow: inset 0 0 0 2px var(--ks-aubergine); }
.ks-kos summary .ks-icoon { font-size: 14px; transform: rotate(90deg); transition: transform .2s; margin-left: 4px; }
.ks-kos[open] summary .ks-icoon { transform: rotate(-90deg); }
.ks-kos__cijfer { font: 400 1.25rem/1 var(--ks-serif); }
.ks-kos__max { font-size: .75rem; color: var(--ks-grijs-tekst); }
.ks-kos__naam { margin-left: 6px; font: .6875rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; }
.ks-kos__uitleg { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(380px, calc(100vw - 2 * var(--ks-gutter))); padding: 18px 20px; background: var(--ks-wit); color: var(--ks-zwart); box-shadow: 0 16px 40px rgba(8, 10, 10, .16); border-top: 3px solid var(--ks-turquoise); }
.ks-kos__uitleg p { margin: 0 0 12px; font-size: .875rem; line-height: 1.5; }
.ks-kos__uitleg ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.ks-kos__uitleg li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: var(--ks-lijn); font-size: .8125rem; color: var(--ks-grijs-tekst); }
.ks-kos__uitleg li.is-behaald { color: var(--ks-zwart); }
.ks-kos__uitleg li strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ks-kos__uitleg li small { font-weight: 400; color: var(--ks-grijs-tekst); }
.ks-kos__uitleg .ks-kos__voet { margin: 0; font-size: .75rem; color: var(--ks-grijs-tekst); }
/* In de kop van het profiel klapt de uitleg open in de regel zelf (de kop knipt alles erbuiten af). */
.ks-phero .ks-kos[open] { flex-basis: 100%; }
.ks-phero .ks-kos__uitleg { position: static; margin-top: 10px; box-shadow: 0 8px 24px rgba(8, 10, 10, .08); }
.ks-kos--klein { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 10px; border-radius: 999px; background: var(--ks-roze-licht); color: var(--ks-aubergine); font-size: .8125rem; }
.ks-kos--klein .ks-kos__cijfer { font-size: 1rem; }
.ks-kos--klein .ks-kos__naam { margin-left: 4px; font-size: .625rem; }
.ks-pro__scores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ks-pro__ondertitel { margin: 0 0 8px; font-size: .875rem; line-height: 1.4; color: var(--ks-grijs-tekst); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ks-pro--kort .ks-pro__ondertitel { font-size: .8125rem; }

/* Portfolio: tweede filterrij met subthema's. */
.ks-portfolio__filter--sub { margin-top: -8px; padding: 12px 14px; background: var(--ks-wit); align-items: center; }
.ks-portfolio__filter--sub[hidden] { display: none; }
.ks-portfolio__subkop { font: .6875rem/1.2 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-turquoise-donker); margin-right: 4px; }
.ks-portfolio__filter--sub .ks-chip { padding: 6px 11px; font-size: .8125rem; background: var(--ks-roze-licht); box-shadow: none; }
.ks-portfolio__filter--sub .ks-chip[aria-pressed=true] { background: var(--ks-turquoise); color: var(--ks-zwart); }

/* Praktijkvoorbeeld en expertartikel: label met streep, grotere eerste alinea, tags onderaan. */
.ks-voorbeeldpagina__ondertitel { font-size: clamp(1.0625rem, 1rem + .35vw, var(--ks-t1)); }
.ks-voorbeeldpagina__hoofd { min-width: 0; max-width: 780px; }
.ks-voorbeeldpagina__tekst > p:first-child, .ks-voorbeeldpagina__tekst > h2:first-child + p { font-size: clamp(1.0625rem, 1rem + .3vw, var(--ks-t1)); line-height: 1.55; }
.ks-voorbeeldpagina__tags { margin-top: 40px; padding-top: 24px; border-top: var(--ks-lijn); }
.ks-voorbeeldpagina__tagskop { margin: 0 0 12px; font: .75rem/1.3 var(--ks-nord); text-transform: uppercase; letter-spacing: .08em; color: var(--ks-grijs-tekst); }
.ks-voorbeeldpagina__tags .ks-chip { padding: 6px 12px; font-size: .875rem; }

/* Reacties. */
.ks-reacties { margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: var(--ks-lijn); }
.ks-reacties__kop { margin: 0 0 20px; font-size: var(--ks-h3); }
.ks-reacties__lijst { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 16px; }
.ks-reactie { padding: 18px 20px; background: var(--ks-roze-licht); }
.ks-reactie__wie { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 6px; }
.ks-reactie__wie time { font-size: .8125rem; color: var(--ks-grijs-tekst); }
.ks-reactie__tekst p { margin: 0 0 .6em; }
.ks-reactie__tekst p:last-child { margin: 0; }
.ks-reacties__formkop { margin: 0 0 6px; font-size: var(--ks-h4); }
.ks-reacties__uitleg { margin: 0 0 16px; font-size: .9rem; color: var(--ks-grijs-tekst); }
.ks-reacties__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ks-reacties__form > *, .ks-reacties__form .comment-form-comment { grid-column: 1 / -1; }
.ks-reacties__form .ks-veld:has(#author), .ks-reacties__form .ks-veld:has(#email) { grid-column: auto; }
.ks-reacties__form .ks-veld { margin: 0 0 16px; }
.ks-reacties__form textarea, .ks-reacties__form input[type=text], .ks-reacties__form input[type=email] { width: 100%; }
.ks-reacties__form .form-submit { margin: 0; }
@media (max-width: 600px) { .ks-reacties__form .ks-veld:has(#author), .ks-reacties__form .ks-veld:has(#email) { grid-column: 1 / -1; } }

/* Praktijkvoorbeelden als sectie op een pagina (homepage). */
.ks-praktijksectie__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.ks-praktijksectie__kop .ks-sectie__titel { margin-bottom: 0; }
.ks-praktijksectie__tekst { margin: 12px 0 0; max-width: 60ch; color: var(--ks-grijs-tekst); }

/* Tellers als link. */
.ks-routes__cijfers a { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.ks-routes__cijfers a .ks-icoon { font-size: 14px; vertical-align: -2px; transition: transform .2s; }
.ks-routes__cijfers a:hover span { color: var(--ks-wit); }
.ks-routes__cijfers a:hover .ks-icoon { transform: translateX(3px); }

.ks-team__knop { margin: 32px 0 0; }
.ks-mega__kop span { display: inline-flex; }

/* 10. Hulpklassen en editor ------------------------------------------------------------- */

.ks-leeg-blok { display: grid; gap: 4px; padding: 28px; border: 2px dashed var(--ks-turquoise); background: #f2fbfa; font-family: var(--ks-sans); }
.ks-leeg-blok span { font-size: .9rem; color: var(--ks-grijs-tekst); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}