/* ttwwoo-v2-kennis.css — Kennis & actueel volgens de mockups van ttwwoo (feedback V2, 6 nov 2026).
   Het menu links is weg (tabs 10: balk onderin); alles lijnt links met de paginakop. Onepagers, Legal Shorts en het
   seminar delen één kolomverdeling (1 : 2), zodat de linkerkolommen onder elkaar gelijk staan. */

/* ---------- balk onderin ---------- */
/* optie 3: de actieve rubriek onderstreept in plaats van vet */
html[data-k-knbalk="3"] .kn-subnav-balk { background: var(--geel); border-top: 0; }
html[data-k-knbalk="3"] .kn-subnav-balk .kn-subnav a[aria-current="true"] { background: none; font-weight: 400; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
html:is([data-k-knbalk="1"], [data-k-knbalk="2"]) .kn-subnav-balk { background: var(--geel); border-top: 0; }
html[data-k-knbalk] .kn-subnav-balk .kn-subnav { justify-content: safe center; }
html[data-k-knbalk] .kn-subnav-balk .kn-subnav a { min-height: 54px; padding: 17px 20px 15px; font-size: 16px; color: var(--inkt); }
html:is([data-k-knbalk="1"], [data-k-knbalk="2"]) .kn-subnav-balk .kn-subnav a[aria-current="true"] { background: none; font-weight: 500; }
html:is([data-k-knbalk="1"], [data-k-knbalk="2"]) .kn-subnav-balk .kn-subnav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (min-width: 1101px) { html[data-k-knbalk] .kn-subnav-balk .kn-subnav a:first-child { margin-left: 0 !important; } }
/* optie 2: de balk komt pas omhoog als de paginakop voorbij is */
html[data-k-knbalk="2"] .kn-subnav-balk { transform: translateY(105%); transition: transform .45s var(--ease); }
html[data-k-knbalk="2"].v2-kop-voorbij .kn-subnav-balk { transform: none; }
@media (prefers-reduced-motion: reduce) { html[data-k-knbalk="2"] .kn-subnav-balk { transition: none; } }

/* ---------- Meer artikelen / Meer afleveringen: geel, in het midden onder de drie ---------- */
.v2-meer { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 52px); }
.v2-meer .uk-meer { position: relative; }
.v2-meer .uk-meer-knop { min-height: 54px; padding: 15px 26px 14px; border: 0; background: var(--geel); color: var(--inkt); font-weight: 400; font-size: 18px; }
.v2-meer .uk-meer-knop::before { background: var(--inkt); }
.v2-meer .uk-meer-knop:hover, .v2-meer .uk-meer-knop:focus-visible, .v2-meer .uk-meer.open .uk-meer-knop { color: var(--wit); }
.v2-meer .uk-meer .uk-vak { left: 50%; right: auto; transform: translateX(-50%); }

/* ---------- harmonica (onepagers en Legal Shorts) ---------- */
.v2-op, .v2-ls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(8px, 1vw, 16px); }
.v2-hr-lijst { border-top: 1px solid var(--lijn); }
.v2-hr { border-bottom: 1px solid var(--lijn); }
.v2-hr-kop { margin: 0; font: inherit; }
.v2-hr-knop { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 14px 10px 13px 0; border: 0; background: none; color: var(--inkt); font: inherit; font-size: 19px; line-height: 1.3; letter-spacing: .01em; text-align: left; cursor: pointer; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.v2-hr-titel { flex: 0 1 auto; }
.v2-hr-tel { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--geel); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1; }
.v2-hr-icoon { flex: none; margin-left: auto; width: 22px; height: 22px; transition: transform .35s var(--ease); }
.v2-hr-icoon svg { display: block; width: 100%; height: 100%; }
.v2-hr-knop:hover .v2-hr-titel { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.v2-hr.open .v2-hr-knop { background: var(--geel); }
.v2-hr.open .v2-hr-knop:hover .v2-hr-titel { text-decoration: none; }
.v2-hr.open .v2-hr-tel { background: var(--wit); }
.v2-hr.open .v2-hr-icoon { transform: rotate(45deg); }
.v2-hr-paneel { padding: 16px 0 20px; }

/* ---------- onepagers ---------- */
#onepagers .wrap > :not(.kn-rubriek-kop):not(.v2-op):not(script) { display: none !important; }
.v2-op-voorbeeld { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 12px 24px -16px rgba(0, 0, 0, .35); }
.v2-op-voorbeeld img { display: block; width: 100%; height: auto; }
.v2-op-items { display: grid; gap: 4px; max-height: 236px; overflow-y: auto; margin: 0; padding: 0 12px 0 0; list-style: none; overscroll-behavior: contain; }
.v2-op-items a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--grijs); font-size: 16px; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.v2-op-items a svg { flex: none; width: 17px; height: 17px; color: var(--inkt); transition: transform .25s var(--ease); }
.v2-op-items a:hover, .v2-op-items a:focus-visible { color: var(--inkt); }
.v2-op-items a:hover svg { transform: translateY(2px); }
/* optie 3: het aantal als grijs getal */
html[data-k-onep2="3"] .v2-op .v2-hr-tel { min-width: 0; padding: 0; background: none; color: var(--zacht); font-size: 15px; font-weight: 400; }

/* ---------- Legal Shorts ---------- */
#legal-shorts .wrap > :not(.kn-rubriek-kop):not(.v2-ls):not(script) { display: none !important; }
#legal-shorts .kn-rubriek-kop p { display: none; }
.v2-ls-intro { display: grid; gap: 16px; }
.v2-ls-speel { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--inkt); color: var(--wit); }
.v2-ls-speel svg { width: 14px; height: 14px; margin-left: 2px; }
.v2-ls-intro p { margin: 0; max-width: 26ch; font-size: 18px; line-height: 1.45; color: var(--inkt); }
.v2-ls-film { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: start; }
.v2-ls-still { position: relative; display: block; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn); cursor: pointer; aspect-ratio: 16 / 10; }
.v2-ls-still img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.v2-ls-still i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s var(--ease); }
.v2-ls-still i svg { width: 40px; height: 40px; padding: 11px 10px 11px 13px; border-radius: 50%; background: var(--inkt); color: var(--wit); }
.v2-ls-still:hover i { opacity: 1; }
.v2-ls-still:hover img { transform: scale(1.03); }
.v2-ls-tekst p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--tekst); max-width: 44ch; }
.v2-ls-af { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--inkt); font: inherit; font-size: 16px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.v2-ls-af svg { width: 12px; height: 12px; }
.v2-ls-af:hover { text-decoration-thickness: 2px; }
/* optie 3: grotere still */
html[data-k-ls2="3"] .v2-ls-film { grid-template-columns: 280px minmax(0, 1fr); }

/* ---------- seminar over de volle breedte ---------- */
#seminars .v2-sem { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 80px); }
.v2-sem .kn-sem-etiket { display: inline-block; margin: 0 0 16px; padding: 6px 10px 5px; background: var(--geel); color: var(--inkt); font-size: 15px; letter-spacing: 0; text-transform: none; line-height: 1.2; }
.v2-sem .kn-sem-wanneer { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--tekst); }
.v2-sem .kn-sem-intro { margin-bottom: 20px; }
.v2-sem .kn-sem-intro { order: -1; }
.v2-sem .kn-sem-inhoud { display: flex; flex-direction: column; align-items: flex-start; }
.v2-sem .kn-sem-inhoud > * { max-width: 100%; }
.v2-sem .kn-sem-prog { align-self: stretch; margin: 6px 0 30px; }
.v2-sem-route { color: var(--inkt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.v2-sem-route:hover { text-decoration-thickness: 2px; }
.v2-sem-knoppen { display: flex; flex-wrap: wrap; gap: 14px; }
.v2-sem-knoppen .kn-knop.vol { background: var(--geel); color: var(--inkt); }
.v2-sem-knoppen .kn-knop.vol::before { background: var(--inkt); }
.v2-sem-knoppen .kn-knop.vol:hover, .v2-sem-knoppen .kn-knop.vol:focus-visible { color: var(--wit); }
.v2-sem-info { background: none; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.v2-sem .kn-sem-meer { margin-top: 24px; }
.v2-sem .kn-sem-meer > summary { display: none; }
.v2-sem .kn-sem-form { margin-top: 22px; }
/* de intro staat in de mockup boven de datum: volgorde label, kop, intro, datum, programma, knoppen */
.v2-sem .kn-sem-etiket { order: -3; } .v2-sem h3 { order: -2; }
/* optie 2: het beeld iets groter */
html[data-k-sem2="2"] #seminars .v2-sem { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); }
/* optie 3: de aanmeldknop zwart, zoals de hoofdknoppen elders */
html[data-k-sem2="3"] .v2-sem-knoppen .kn-knop.vol { background: var(--inkt); color: var(--wit); }
html[data-k-sem2="3"] .v2-sem-knoppen .kn-knop.vol::before { background: var(--geel); }
html[data-k-sem2="3"] .v2-sem-knoppen .kn-knop.vol:hover, html[data-k-sem2="3"] .v2-sem-knoppen .kn-knop.vol:focus-visible { color: var(--inkt); }

/* ---------- nieuwsbrief: geel ---------- */
#nieuwsbrief.v2-nb { background: var(--geel); padding-block: clamp(44px, 5vw, 64px); }
#nieuwsbrief.v2-nb .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
#nieuwsbrief.v2-nb .kn-rubriek-kop { display: block; margin: 0; border: 0; padding: 0; }
#nieuwsbrief.v2-nb h2 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
.v2-nb-tekst { margin: 0 0 22px; font-size: 18px; line-height: 1.45; color: var(--inkt); max-width: 40ch; }
.v2-nb-tekst b { font-weight: 500; }
#nieuwsbrief.v2-nb .kn-inschrijf { display: flex; flex-wrap: wrap; gap: 12px; max-width: 520px; margin: 0; }
#nieuwsbrief.v2-nb .kn-inschrijf input { flex: 1 1 240px; min-height: 52px; border: 1px solid var(--inkt); background: var(--wit); border-radius: 2px; }
/* Op smalle schermen staat het formulier in een kolom: daar werd 240px de hoogte van het veld. */
@media (max-width: 560px) { #nieuwsbrief.v2-nb .kn-inschrijf input { flex: none; } }
#nieuwsbrief.v2-nb .kn-inschrijf button { flex: none; }
#nieuwsbrief.v2-nb .kn-inschrijf button::before { background: var(--wit); }
/* optie 2: geel vlak binnen de marges */
html[data-k-nb2="2"] #nieuwsbrief.v2-nb { background: none; padding-block: 0; margin-block: clamp(56px, 6vw, 88px); }
html[data-k-nb2="2"] #nieuwsbrief.v2-nb .wrap { background: var(--geel); padding: clamp(32px, 4vw, 52px); border-radius: var(--hoek); max-width: calc(var(--breed)); }
/* optie 3: de kop in twee diktes, zoals de andere koppen (eerste regel licht, tweede vet) */
html[data-k-nb2="3"] #nieuwsbrief.v2-nb h2 { font-weight: 400; }
html[data-k-nb2="3"] #nieuwsbrief.v2-nb h2 .v2-nb-vet { font-weight: 500; }

/* ---------- smal scherm: één kolom ---------- */
@media (max-width: 860px) {
  .v2-op, .v2-ls, #seminars .v2-sem, #nieuwsbrief.v2-nb .wrap { grid-template-columns: minmax(0, 1fr); }
  .v2-op-voorbeeld { max-width: 420px; }
  .v2-ls-film, html[data-k-ls2="3"] .v2-ls-film { grid-template-columns: minmax(0, 1fr); }
  .v2-ls-still { max-width: 360px; }
  .v2-hr-knop { font-size: 17px; }
}

/* ronde 3: de gele balk van een open regel loopt iets links en rechts uit, zodat de tekst niet tegen de rand van het
   geel staat; de tekst zelf blijft op de lijn van de rest */
.v2-hr.open .v2-hr-knop { box-shadow: -14px 0 0 var(--geel), 14px 0 0 var(--geel); }
/* Legal Shorts per onderwerp met voorbeeldfilm links (Jochem 8 nov) */
.v2-ls-voorbeeld { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 12px 24px -16px rgba(0, 0, 0, .35); aspect-ratio: 16 / 9; cursor: pointer; }
.v2-ls-voorbeeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.v2-ls-voorbeeld i { position: absolute; left: 16px; bottom: 16px; display: grid; place-items: center; }
.v2-ls-voorbeeld i svg { width: 44px; height: 44px; padding: 13px 12px 13px 15px; border-radius: 50%; background: var(--inkt); color: var(--wit); }
.v2-ls-voorbeeld:hover img { transform: scale(1.03); }
.v2-ls-items { display: grid; gap: 28px; padding-bottom: 8px; }
.v2-ls-titel { margin: 0 0 12px; font-size: 18px; font-weight: 500; color: var(--inkt); }
.v2-ls-titel span { margin-left: 6px; font-size: 15px; font-weight: 400; color: var(--zacht); }
@media (max-width: 860px) { .v2-ls-voorbeeld { max-width: 420px; } }
.v2-ls-onder { margin: -6px 0 0; font-size: 15px; color: var(--tekst); }
.v2-ls-onder span { margin-left: 4px; color: var(--zacht); }