/* Kennis & actueel (keuze Jochem 28 okt: optie 3) — blok op de homepage en de overzichtspagina actueel.html.
   Zakelijk: beige vlak, dunne lijnen, zwart-wit; geen speelse elementen. */
.kn-blok { background: var(--beige); padding-block: clamp(72px, 9vw, 128px); }
/* homepage: de fotobaan (ook beige) gaat direct over in dit blok; samen met de ruimte onder de baanknoppen precies één sectiewitruimte */
.fotobaan + .kn-blok { padding-top: clamp(36px, 5vw, 72px); }
.kn-kopregel { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.kn-lbl { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.kn-lbl b { color: var(--inkt); font-weight: 500; }
.kn-titel { display: block; color: var(--inkt); text-decoration: none; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
a.kn-titel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kn-knop { display: inline-flex; align-items: center; gap: 12px; padding: 14px 23px 13px; border: 1px solid var(--inkt); color: var(--inkt); text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: .01em; border-radius: 2px; white-space: nowrap; transition: background .25s, color .25s; }
.kn-knop svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.kn-knop { position: relative; isolation: isolate; overflow: hidden; } .kn-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.kn-knop:hover, .kn-knop:focus-visible { color: var(--inkt); } .kn-knop:hover::before, .kn-knop:focus-visible::before { transform: scaleX(1); } .kn-knop:hover svg { transform: translateX(4px); }
.kn-knop.vol { background: var(--inkt); color: var(--wit); position: relative; isolation: isolate; overflow: hidden; border-color: var(--inkt); } .kn-knop.vol:hover { background: var(--zwart); }
/* vier kolommen */
.kn-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--inkt); }
.kn-kol { display: flex; flex-direction: column; padding: 26px 26px 30px 0; }
.kn-kol + .kn-kol { padding-left: 26px; border-left: 1px solid var(--lijn); }
.kn-kol .kn-titel { margin: 14px 0 10px; font-size: clamp(17px, 2.6vw, 20px); }
.kn-kol p { margin: 0; font-size: 15px; color: var(--grijs); text-wrap: pretty; }
.kn-kol .kn-meta { margin-top: auto; padding-top: 22px; font-size: 14px; color: var(--zacht); }
.kn-kol .pijllink { margin-top: 12px; font-size: 15px; color: var(--inkt); }
.kn-inschrijf { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.kn-inschrijf input { min-width: 0; padding: 14px 14px 13px; border: 1px solid var(--inkt); border-radius: 2px; font: inherit; font-size: 18px; line-height: 1.6; color: var(--inkt); background: var(--wit); }
.kn-inschrijf input::placeholder { color: var(--veld-hint); opacity: 1; }
.kn-inschrijf button { padding: 15px 24px 14px; border: 1px solid var(--inkt); background: var(--inkt); color: var(--wit); font: inherit; font-size: 16px; letter-spacing: .01em; font-weight: 500; border-radius: 2px; cursor: pointer; }
.kn-inschrijf-melding { min-height: 1.4em; margin: 6px 0 0; font-size: 13px; color: var(--zacht); }
.kn-inschrijf-melding.fout { color: var(--fout); }
.kn-inschrijf input[aria-invalid="true"] { border-color: var(--fout); }
/* overzichtspagina */
.kn-pagina-kop { background: var(--beige); padding: clamp(56px, 7vw, 96px) 0 0; }
.kn-subnav { display: flex; gap: 32px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--inkt); }
.kn-subnav a { padding: 16px 0; color: var(--inkt); text-decoration: none; font-size: 16px; }
.kn-subnav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.kn-rubriek { padding-block: clamp(72px, 9vw, 128px); scroll-margin-top: 80px; }
.kn-rubriek ~ .kn-rubriek { padding-top: 0; }
.kn-rubriek-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.kn-rubriek-kop h2 { margin: 0; font-size: clamp(22px, 1.9vw, 26px); font-weight: 500; line-height: 1.2; }
.kn-rubriek-kop p { margin: 0; color: var(--grijs); font-size: 15px; max-width: 60ch; }
.kn-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; list-style: none; margin: 0; padding: 0; }
.kn-kaart { display: flex; flex-direction: column; padding-top: 18px; border-top: 1px solid var(--lijn); }
.kn-kaart .kn-titel { margin: 12px 0 10px; font-size: clamp(17px, 2.6vw, 20px); }
.kn-kaart p { margin: 0; font-size: 15px; color: var(--grijs); }
.kn-kaart .kn-meta { margin-top: auto; font-size: 14px; color: var(--zacht); padding-top: 14px; }
.kn-kaart.leeg { padding: 22px; border: 1px dashed var(--steen-licht); grid-column: 1 / -1; }
.kn-kaart.leeg p { max-width: 70ch; }
/* seminars: datumblok + tekst + knop op één regel */
.kn-sems { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.kn-sem { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--lijn); }
.kn-sem-datum { font-size: 13px; color: var(--zacht); text-transform: uppercase; letter-spacing: .14em; }
.kn-sem-datum b { display: block; font-size: 40px; line-height: 1; letter-spacing: 0; font-weight: 500; color: var(--inkt); }
.kn-sem h3 { margin: 0 0 6px; font-size: clamp(17px, 2.6vw, 20px); line-height: 1.3; font-weight: 500; }
.kn-sem p { margin: 0; color: var(--grijs); font-size: 15px; }
.kn-sem-melding { grid-column: 2 / -1; margin: 0; font-size: 14px; color: var(--zacht); }
.kn-sem-melding:empty { display: none; }
.kn-leeg { padding: 24px 0; color: var(--grijs); }
.kn-leeg a { color: var(--inkt); }
@media (max-width: 1100px) {
  .kn-kolommen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kn-kol:nth-child(3) { padding-left: 0; border-left: 0; }
  .kn-kol:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  .kn-kaarten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .kn-kolommen, .kn-kaarten { grid-template-columns: minmax(0, 1fr); }
  .kn-kol, .kn-kol + .kn-kol { padding: 24px 0; border-left: 0; }
  .kn-kol + .kn-kol { border-top: 1px solid var(--lijn); }
  .kn-sem { grid-template-columns: 72px minmax(0, 1fr); }
  .kn-sem-datum b { font-size: 30px; }
  .kn-sem .kn-knop { grid-column: 2; justify-self: start; }
  .kn-subnav { gap: 6px 22px; }
}
.kn-inschrijf-rij { flex-direction: row; max-width: 560px; }
.kn-inschrijf-rij input { flex: 1; }
@media (max-width: 560px) { .kn-inschrijf-rij { flex-direction: column; } }
.kn-kol .kn-inschrijf { max-width: 420px; }
/* regellengte gelijk aan de rest van de site (.sectie p max 52ch); koppen iets ruimer */
.kn-kol p, .kn-kaart p { max-width: 58ch; }
.kn-kaart .kn-titel, .kn-kol .kn-titel { max-width: 46ch; }
/* Lange titelwoorden in kaarten breken af in plaats van uit te steken op smalle schermen (320 px). Koppeltekens alleen onder 375 px, zodat bredere schermen ongewijzigd blijven. */
@media (max-width: 374px) { .kn-titel { -webkit-hyphens: auto; hyphens: auto; } }
/* Engelse koppen niet afbreken: de afbreking is voor lange Nederlandse samenstellingen (Nederlandse titels houden lang="nl") */
:lang(en) .kn-titel { -webkit-hyphens: manual; hyphens: manual; }
/* knop naar het overzicht: gevuld, met een regel die laat zien wat er te vinden is (verzoek Jochem 28 okt) */
.kn-meer { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; justify-content: flex-end; }
.kn-meer-tekst { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--grijs); text-align: right; }
.kn-knop.vol::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.kn-knop.vol:hover, .kn-knop.vol:focus-visible { background: var(--inkt); color: var(--inkt); }
.kn-knop.vol:hover::before, .kn-knop.vol:focus-visible::before { transform: scaleX(1); }
.kn-sem-acties .kn-knop { min-height: 44px; cursor: pointer; font-family: inherit; line-height: 1.4; }
@media (max-width: 860px) { .kn-meer { justify-content: flex-start; } .kn-meer-tekst { text-align: left; } }
/* gevulde knoppen zonder rand: even hoog als de andere knoppen volgens de norm (54,6px) */
.kn-knop.vol, .kn-inschrijf button { border: 0; }
.kn-knop.vol { padding: 15px 24px 14px; }
/* knop en tekst sluiten aan op de onderste kopregel, niet op de veeg eronder (30px + 6px) */
@media (min-width: 861px) { .kn-kopregel .kn-meer { margin-bottom: 36px; } }
/* vier gelijke kolommen: tussenruimte in plaats van padding, scheidingslijn midden in de tussenruimte */
.kn-kolommen { column-gap: 52px; }
.kn-kol, .kn-kol + .kn-kol { padding-left: 0; padding-right: 0; border-left: 0; position: relative; }
.kn-kol + .kn-kol::before { content: ""; position: absolute; left: -26px; top: 0; bottom: 0; border-left: 1px solid var(--lijn); }
.kn-kol .kn-titel { text-wrap: balance; }
@media (max-width: 1100px) {
  .kn-kol:nth-child(3)::before { display: none; }
  .kn-kol:nth-child(3)::after { content: ""; position: absolute; top: -1px; right: -52px; width: 52px; border-top: 1px solid var(--lijn); }
}
@media (max-width: 860px) { .kn-kol + .kn-kol::before, .kn-kol:nth-child(3)::after { display: none; } }
/* podcast: meteen zien dat het om luisteren gaat */
.kn-luister { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; min-height: 44px; color: var(--inkt); text-decoration: none; }
.kn-play { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--geel); box-shadow: inset 0 0 0 1px rgba(30, 30, 30, .12); transition: transform .3s var(--ease), background .3s; }
.kn-play svg { width: 18px; height: 18px; margin-left: 2px; }
.kn-luister:hover .kn-play, .kn-luister:focus-visible .kn-play { transform: scale(1.08); background: var(--geel-diep); }
.kn-golf { display: flex; align-items: center; gap: 3px; height: 24px; }
.kn-golf i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--inkt); opacity: .55; transform-origin: center; transform: scaleY(.3); animation: knGolf 1.6s ease-in-out infinite; }
.kn-golf i:nth-child(3n+1) { animation-delay: -.4s; } .kn-golf i:nth-child(3n+2) { animation-delay: -.9s; } .kn-golf i:nth-child(4n) { animation-delay: -1.2s; animation-duration: 1.3s; }
.kn-golf i:nth-child(5n) { animation-duration: 1.9s; }
@keyframes knGolf { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(.95); } }
.kn-luister:hover .kn-golf i { opacity: .85; }
.kn-luister-tekst { font-size: 15px; font-weight: 500; }
.kn-luister-tekst span { font-weight: 400; color: var(--zacht); }
@media (prefers-reduced-motion: reduce) { .kn-golf i { animation: none; transform: scaleY(.6); } }
/* buiten beeld stil op dezelfde stand (script.js zet .buiten-beeld) */
.kn-golf.buiten-beeld i { animation-play-state: paused; }
/* luisterknoppen en datums onderaan de kaart, zodat ze per rij op één lijn staan (verzoek Jochem 28 okt) */
.kn-kaart .kn-luister { margin-top: auto; padding-top: 18px; }
.kn-kaart .kn-luister + .kn-meta { margin-top: 0; padding-top: 10px; }
/* Nieuwsartikel (artikel.html?a=slug, uit het dashboard). Zelfde beige kop als het overzicht; tekst 18 px op een leesbare breedte. */
.ka-kop { background: var(--beige); padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); }
/* op het beige vlak haalt --zacht (#6b6b6b) maar 4,3:1, onder WCAG AA (4,5:1) voor kleine tekst: daar --grijs */
.kn-blok, .ka-kop { --zacht: var(--grijs); }
.ka-smal { max-width: calc(760px + 2 * var(--rand)); }
.ka-lbl { margin: clamp(20px, 3vw, 36px) 0 0; }
.ka-lbl:empty::before { content: "\00a0"; }
.ka-titel { margin: 16px 0 0; font-size: clamp(30px, 4.2vw, 52px); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; color: var(--inkt); text-wrap: balance; }
.ka-intro { margin: 20px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--grijs); }
.ka-intro a { color: var(--inkt); }
.ka-foto { margin: 0; padding-top: clamp(32px, 4vw, 56px); }
.ka-foto[hidden] { display: none; }
.ka-foto .beeld { border-radius: var(--hoek); overflow: hidden; aspect-ratio: 16 / 9; background: var(--tegel); }
.ka-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ka-romp { padding-bottom: clamp(72px, 9vw, 128px); }
/* artikel: tot artikel.js het artikel heeft neergezet de romp onzichtbaar en schermvullend houden, zodat de footer
   niet eerst in beeld staat en dan wegschiet (layoutverschuiving was 0,57); het label houdt alvast zijn regel */
.ka[data-laden] .ka-romp { min-height: 100vh; visibility: hidden; }
/* ook de kop pas tonen als label, titel, intro en foto er staan (anders verspringt 'Artikel laden…'); zonder JS blijft hij zichtbaar */
.js .ka[data-laden] .ka-kop2 { visibility: hidden; }
/* vooraf gebouwde pagina (vooraf/, _bron/bouw-vooraf.js): label, titel, intro en foto staan al in de HTML, dus meteen tonen */
.js .ka[data-laden][data-ka-vooraf] .ka-kop2 { visibility: visible; }
.ka-tekst { padding-top: clamp(32px, 4vw, 56px); font-size: 18px; line-height: 1.65; color: var(--tekst); }
.ka-tekst > :first-child { margin-top: 0; }
.ka-tekst p, .ka-tekst ul, .ka-tekst ol, .ka-tekst blockquote { margin: 0 0 1.1em; }
.ka-tekst h2, .ka-tekst h3 { margin: 1.8em 0 .5em; color: var(--inkt); font-weight: 500; line-height: 1.25; }
.ka-tekst h2 { font-size: clamp(22px, 2.2vw, 26px); }
.ka-tekst h3, .ka-tekst h2.ka-h3 { font-size: clamp(19px, 1.8vw, 21px); }
.ka-tekst ul, .ka-tekst ol { padding-left: 1.3em; }
.ka-tekst li { margin-bottom: .4em; }
/* lange woorden en adressen uit het dashboard niet uit de kolom laten lopen; tabellen met eigen opmaak en eigen scroll */
.ka-tekst :is(p, li) { overflow-wrap: break-word; }
@media (max-width: 374px) { .ka-tekst :is(p, li) { -webkit-hyphens: auto; hyphens: auto; } }
.ka-tekst table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1.1em; font-size: 16px; }
.ka-tekst :is(th, td) { padding: 8px 12px; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.ka-tekst th { font-weight: 500; color: var(--inkt); }
.ka-tekst li::marker { color: var(--zacht); }
.ka-tekst a { color: var(--inkt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ka-tekst a:hover { background: var(--geel); }
.ka-tekst strong { font-weight: 500; color: var(--inkt); }
.ka-tekst blockquote { padding-left: 20px; border-left: 3px solid var(--geel-diep); color: var(--grijs); }
.ka-tekst img { max-width: 100%; height: auto; }
.ka-tekst > :last-child { margin-bottom: 0; }
.ka-auteur { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--lijn); font-size: 15px; color: var(--zacht); }
.ka-meer { background: var(--tegel); }
.ka-meer[hidden] { display: none; }
.kn-meer-knop { margin-top: clamp(32px, 4vw, 48px); cursor: pointer; background: transparent; font-family: inherit; }
/* seminar-aanmelding: klein formulier dat onder het seminar uitklapt (naam, e-mail, organisatie).
   Velden als de nieuwsbrief (.kn-inschrijf): wit, dunne inktlijn, hoek 2px; 16px zodat iOS niet inzoomt. */
.kn-sem-form { grid-column: 2 / -1; display: grid; gap: 20px; padding: 4px 0 6px; opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.kn-sem-form[hidden] { display: none; }
.kn-sem-form.open { opacity: 1; transform: none; }
.kn-sem-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.kn-sem-veld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kn-sem-veld input { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px 11px; border: 1px solid var(--inkt); border-radius: 2px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--inkt); background: var(--wit); }
.kn-sem-veld input:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.kn-sem-veld input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--inkt); background: var(--geel); }
.kn-sem-acties { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.kn-sem-annuleer { background: transparent; }
.kn-sem-form[aria-busy="true"] [type="submit"] { opacity: .6; cursor: progress; }
@media (max-width: 860px) { .kn-sem-velden { grid-template-columns: minmax(0, 1fr); max-width: 480px; } }
@media (prefers-reduced-motion: reduce) { .kn-sem-form { transition: none; opacity: 1; transform: none; } }

/* ===== detailtoets gewone site (28 okt) ===== */
.kn-sem-melding.fout { color: var(--fout); font-weight: 500; }
.kn-sem-melding:focus { outline: none; }
@media (max-width: 560px) { .kn-sem-form, .kn-sem-melding { grid-column: 1 / -1; } }
/* ===== ronde 1 grafisch (29 okt): actueel + artikel ===== */
.kn-inschrijf button { position: relative; isolation: isolate; overflow: hidden; transition: color .25s; }
.kn-inschrijf button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.kn-inschrijf button:hover, .kn-inschrijf button:focus-visible { color: var(--inkt); }
.kn-inschrijf button:hover::before, .kn-inschrijf button:focus-visible::before { transform: scaleX(1); }
/* knoppennorm (30 okt): ook 'Inschrijven' krijgt de pijl, net als de andere zwarte knoppen */
.kn-inschrijf button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.kn-inschrijf button svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.kn-inschrijf button:hover svg, .kn-inschrijf button:focus-visible svg { transform: translateX(4px); }
button.kn-knop { cursor: pointer; font-family: inherit; }
.kn-titel, .kn-sem h3, .kn-rubriek-kop h2, .kn-pagina-kop .x-intro, .ka-intro, .kn-kaart p, .kn-sem p, .kn-kol p { text-wrap: pretty; }
#artikelen { scroll-margin-top: calc(90px - clamp(72px, 9vw, 128px)); }
@media (max-width: 560px) { .kn-subnav { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 24px; } .kn-subnav a { display: block; min-height: 44px; padding: 10px 0; white-space: nowrap; } }
/* elk item op één regel (podcastnaam niet in tweeën); past de langste naast de eerste kolom niet meer, dan één kolom */
@media (max-width: 370px) { .kn-subnav { grid-template-columns: minmax(0, 1fr); } }
/* ===== artikeloverzicht (keuze Jochem 29 okt: optie 1 van actueel-opties.html) =====
   Nieuwste artikel groot met foto, daaronder kaarten met foto. De hele kaart is klikbaar; bij aanwijzen een gele
   markeerstift onder de titel, de foto zoomt licht in en de pijl schuift op (alleen op apparaten met een muis). */
.kn-kaarten.kn-art { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 64px) 32px; }
.kn-klik { position: relative; cursor: pointer; }
.kn-link { color: var(--inkt); text-decoration: none; }
.kn-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.kn-link:focus-visible { outline: none; }
.kn-klik:has(.kn-link:focus-visible) { outline: 2px solid var(--inkt); outline-offset: 6px; border-radius: 6px; }
.kn-mk { background-image: linear-gradient(transparent 60%, var(--geel) 60%, var(--geel) 94%, transparent 94%); background-repeat: no-repeat; background-size: 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .55s var(--ease); }
.kn-beeld { position: relative; display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 3 / 2; background: var(--tegel); isolation: isolate; }
.kn-beeld > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.kn-geen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--beige); }
.kn-geen img { display: block; width: auto; height: 74%; }
.kn-pijl { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--inkt); }
.kn-pijl svg { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.kn-verder { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--inkt); }
.kn-art-titel { margin: 0; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; text-wrap: balance; }
.kn-sam { margin: 0; font-size: 15px; line-height: 1.55; color: var(--grijs); text-wrap: pretty; max-width: 58ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.kn-art-voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 16px; font-size: 14px; color: var(--zacht); }
.kn-uit { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-bottom: clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--lijn); }
.kn-uit-tekst { display: flex; flex-direction: column; }
.kn-uit .kn-art-titel { margin-top: 16px; font-size: clamp(22px, 2vw, 26px); line-height: 1.25; max-width: 30ch; }
.kn-uit .kn-sam { margin-top: 16px; font-size: 17px; -webkit-line-clamp: 5; max-width: 46ch; }
.kn-uit .kn-art-voet { margin-top: 28px; padding-top: 0; justify-content: flex-start; gap: 28px; }
.kn-fk { display: flex; flex-direction: column; }
.kn-fk .kn-lbl { margin-top: 20px; }
.kn-fk .kn-art-titel { margin: 10px 0; font-size: 20px; }
.kn-klik:has(.kn-link:focus-visible) .kn-mk { background-size: 100% 100%; }
.kn-klik:has(.kn-link:focus-visible) .kn-beeld > img { transform: scale(1.04); }
.kn-klik:has(.kn-link:focus-visible) .kn-pijl svg { transform: translateX(5px); }
@media (hover: hover) {
  .kn-klik:hover .kn-mk { background-size: 100% 100%; }
  .kn-klik:hover .kn-beeld > img { transform: scale(1.04); }
  .kn-klik:hover .kn-pijl svg { transform: translateX(5px); }
}
.kn-in { animation: knIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes knIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .kn-kaarten.kn-art { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .kn-uit { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kn-uit .kn-art-titel { margin-top: 12px; }
}
@media (max-width: 560px) {
  .kn-kaarten.kn-art { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .kn-fk .kn-art-titel, .kn-uit .kn-art-titel, .kn-kaart .kn-titel { font-size: 19px; }
  .kn-uit .kn-sam { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .kn-in { animation: none; } .kn-beeld > img, .kn-pijl svg, .kn-mk { transition: none; } }
/* kaarten in een rij lopen als subgrid mee: label, titel, tekst, luisterknop en datum staan per rij op dezelfde hoogte,
   ook als de titels een ander aantal regels hebben. De rijafstand zit dan als marge onder elke kaart (de negatieve marge
   onder de lijst houdt de afstand eronder gelijk). Elke kaart heeft daarvoor evenveel delen (kennis.js: altijd een <p>). */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .kn-kaarten[data-kn="podcast"] { row-gap: 0; margin-bottom: -40px; }
    .kn-kaarten[data-kn="podcast"] > .kn-kaart:not(.leeg) { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; margin-bottom: 40px; }
  }
  @media (min-width: 561px) {
    .kn-kaarten.kn-art { row-gap: 0; margin-bottom: calc(-1 * clamp(48px, 5vw, 64px)); }
    .kn-kaarten.kn-art > li { margin-bottom: clamp(48px, 5vw, 64px); }
    /* artikelkaarten (optie 1): samenvatting direct onder de titel (10px); alleen de datum-/pijlregel lijnt per rij uit
       op de onderlijn. De kaart vult de rijhoogte en de voetregel staat met margin-top: auto in de laatste ruimte. */
    .kn-kaarten.kn-art > .kn-fk { align-self: stretch; }
  }
}
/* homepage, kolom seminar: het uitnodigingsbeeld (witte tekening) onder de tekst, zoals de speler bij Marnix legt het uit (titels blijven op één lijn) */
.kn-sem-thuis-beeld { display: block; margin-top: 20px; background: var(--wit, #fff); border-radius: 6px; overflow: hidden; max-width: 360px; }
.kn-sem-thuis-beeld img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 435; object-fit: cover; transition: transform .5s var(--ease); }
.kn-kol:hover .kn-sem-thuis-beeld img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .kn-sem-thuis-beeld img { transition: none; } }
/* tussenstand 2×2: het seminarbeeld niet kolombreed, anders wordt de tweede rij te hoog en ontstaan gaten */
@media (min-width: 861px) and (max-width: 1100px) { .kn-sem-thuis-beeld { max-width: 260px; } }
/* titellink: onzichtbaar tikvlak van ten minste 44px hoog (zoals .pijllink), zonder visuele wijziging */
.kn-kol a.kn-titel { position: relative; }
.kn-kol a.kn-titel::before { content: ""; position: absolute; inset: -11px -6px; }
/* Marnix legt het uit: drie afleveringen ook tussen 861 en 1100 px op één rij (anders staat de derde alleen) */
@media (min-width: 861px) and (max-width: 1100px) { .kn-kaarten[data-kn="podcast"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- onepagers (actueel.html#onepagers; _bron/bouw-onepagers.js). Het A4-voorbeeld als papier op de pagina,
   rubriek en titel zoals de artikelkaarten, onderaan downloaden (pdf, grootte) en het artikel waarop hij gebaseerd is ---------- */
.kn-ops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px 28px; }
.kn-op { display: flex; flex-direction: column; min-width: 0; }
.kn-op-beeld { display: block; aspect-ratio: 480 / 678; margin-bottom: 18px; background: var(--wit); overflow: hidden; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(30,30,30,.08), 0 22px 34px -26px rgba(0,0,0,.42); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.kn-op-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .kn-op:hover .kn-op-beeld { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(30,30,30,.1), 0 30px 40px -26px rgba(0,0,0,.45); } }
.kn-op-titel { margin: 10px 0 16px; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--inkt); text-wrap: pretty; overflow-wrap: break-word; }
.kn-op-acties { margin: auto 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 15px; }
.kn-op-acties a { color: var(--inkt); }
.kn-op-pdf small { font-size: 13px; color: var(--zacht); white-space: nowrap; }
.kn-op-pdf:hover svg { transform: translateY(2px); }
@media (max-width: 1100px) { .kn-ops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kn-ops { gap: 40px 20px; } .kn-op-titel { font-size: 16px; } .kn-op-acties { font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .kn-op-beeld { transition: none; } }
@media (max-width: 600px) { .kn-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kn-op-titel { -webkit-hyphens: auto; hyphens: auto; } .kn-op .kn-lbl { font-size: 11.5px; letter-spacing: .05em; overflow-wrap: anywhere; } } /* 'ARBEIDSOVEREENKOMST' liep door in het label ernaast */

@media (min-width: 601px) { .kn-op-acties a { white-space: nowrap; } } /* pijl blijft bij de tekst; op de telefoon (2 smalle kolommen) mag hij breken */
@media (max-width: 400px) { .kn-op-acties { overflow-x: clip; } .kn-op-pdf { flex-wrap: wrap; row-gap: 2px; } .kn-op-pdf small { order: 3; flex-basis: 100%; } } /* 320: grootte onder "Download", anders steekt de pijl uit */
@media (max-width: 600px) { .kn-ops { overflow-x: clip; overflow-clip-margin: 0; } } /* smalle telefoon: onderstreepjes van de links staken 40 px uit (1 nov) */

/* bevindingen ronde 1 (1 nov): kaarttitels gebalanceerd (laatste regel niet één los woord, zoals de artikeltitels),
   intro boven de onepagers ook 'pretty'; nieuwsbrief op de telefoon (veld en knop onder elkaar): even hoog */
.kn-titel { text-wrap: balance; }
.kn-rubriek-kop p { text-wrap: pretty; }
@media (max-width: 560px) { .kn-inschrijf-rij input, .kn-inschrijf-rij button { min-height: 58px; } }

/* ===== Legal Shorts (2 nov): korte tekenfilm op de kennispagina. Kaart naar het voorbeeld van het nieuwste artikel
   (.kn-uit: beeld links, tekst rechts, centreren op elkaar). De film (Vimeo) wordt pas na een klik geladen, in een venster
   dat via legal-shorts.js direct in <body> hangt (nooit binnen een kaart: een getransformeerde ouder zou position: fixed
   verschuiven, zie CLAUDE.md). ===== */
.ls-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 72px) clamp(32px, 4vw, 56px); }
.ls-kaart { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 28px; }
.ls-beeld { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--tegel); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; cursor: pointer; isolation: isolate; box-shadow: 0 0 0 1px var(--lijn); }
.ls-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ls-speel { position: absolute; left: 50%; top: 50%; width: clamp(64px, 6vw, 84px); aspect-ratio: 1; margin: calc(clamp(64px, 6vw, 84px) / -2) 0 0 calc(clamp(64px, 6vw, 84px) / -2); border-radius: 50%; background: var(--geel); box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); transition: transform .35s var(--ease); }
.ls-speel::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -7px; border-left: 20px solid var(--inkt); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
@media (hover: hover) { .ls-kaart:has(.ls-beeld:hover, .ls-open:hover) .ls-beeld img { transform: scale(1.03); } .ls-kaart:has(.ls-beeld:hover, .ls-open:hover) .ls-speel { transform: scale(1.08); } }
.ls-tekst { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ls-tekst .kn-art-titel { margin-top: 16px; font-size: clamp(22px, 2vw, 26px); line-height: 1.25; max-width: 30ch; }
.ls-tekst .kn-sam { margin: 16px 0 28px; font-size: 17px; max-width: 40ch; display: block; overflow: visible; }
.ls-acties { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: auto; }
.ls-acties .pijllink { color: var(--inkt); font-size: 15px; }
.ls-open { min-height: 44px; }
.ls-open svg { fill: currentColor; }
@media (max-width: 860px) { .ls-lijst { grid-template-columns: minmax(0, 1fr); } }

/* het filmvenster: laag over de hele pagina, direct in <body>; het paneel centreert met margin: auto (hoger dan het scherm: scrollbaar) */
.ls-venster { position: fixed; inset: 0; z-index: 1000; display: flex; overflow-y: auto; padding: 20px; background: rgba(20,20,20,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s; }
.ls-venster.open { opacity: 1; visibility: visible; pointer-events: auto; }
.ls-paneel { position: relative; width: min(1100px, 100%, calc((100svh - 40px - 84px) * 16 / 9 + 24px)); margin: auto; padding: 0 12px 12px; background: var(--wit); border-radius: 10px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); transform: scale(.96); transition: transform .4s var(--ease); }
.ls-venster.open .ls-paneel { transform: none; }
.ls-balk { display: flex; align-items: center; gap: 16px; padding: 12px 2px; }
.ls-titel { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ls-titel b { font-size: 16px; font-weight: 500; color: var(--inkt); }
.ls-titel small { font-size: 13px; color: var(--grijs); }
.ls-dicht { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--beige); color: var(--inkt); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; transition: background .25s; }
.ls-dicht:hover { background: var(--geel); }
.ls-dicht:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.ls-film { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--zwart); }
.ls-film iframe { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; }
.ls-film > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; pointer-events: none; }
/* "Even laden" op een eigen grijze balk onderin het beeld (Jochem 8 nov): leesbaar los van de tekening en op elke film gelijk. */
.ls-film > span { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; place-items: center; height: 9%; min-height: 22px; background: #e6e6e1; border-top: 1px solid rgba(30, 30, 30, .12); font-size: clamp(11px, 1vw, 13px); line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt); transition: opacity .4s; pointer-events: none; }
.ls-venster.speelt .ls-film > img, .ls-venster.speelt .ls-film > span { opacity: 0; }
html.ls-open-venster { overflow: hidden; }
@media (max-width: 600px) { .ls-paneel { padding: 0 6px 6px; } .ls-balk { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .ls-venster, .ls-paneel, .ls-beeld img, .ls-speel { transition: none; } .ls-paneel { transform: none; } }

/* Homepage: smalle strook onder de drie kolommen met de nieuwste onepager en Legal Short (Jochem 8 nov, optie 3).
   Zelfde raster als .kn-kolommen, zodat beide items onder artikel en podcast uitlijnen. */
.kn-strook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 52px; margin: 8px 0 32px; border-top: 1px solid var(--lijn, rgba(30,30,30,.18)); border-bottom: 1px solid var(--lijn, rgba(30,30,30,.18)); }
.kn-strook-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 18px 0; color: var(--inkt); text-decoration: none; }
.kn-strook-item .kn-lbl { grid-column: 1; }
.kn-strook-titel { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 17px; line-height: 1.35; font-weight: 500; }
.kn-strook-play { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--geel); }
.kn-strook-play svg { width: 12px; height: 12px; margin-left: 1px; }
.kn-strook-item > svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; transition: transform .35s var(--ease); }
.kn-strook-item:hover > svg, .kn-strook-item:focus-visible > svg { transform: translateX(4px); }
.kn-strook-item:hover .kn-strook-titel, .kn-strook-item:focus-visible .kn-strook-titel { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .kn-strook { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .kn-strook { grid-template-columns: minmax(0, 1fr); }
  .kn-strook-item + .kn-strook-item { border-top: 1px solid var(--lijn, rgba(30,30,30,.18)); }
}