/* =========================================================================
   Workx — extra pagina's (begrippen, wetswijzigingen, OR-wegwijzer, reorganisatie)
   Bouwt voort op style.css; alle eigen klassen beginnen met x- of bt-.
   ========================================================================= */

/* ---------- gedeeld: paginakop met vogel, intro, disclaimer ---------- */
.x-kop { position: relative; overflow: hidden; }
.x-kop .wrap { position: relative; }
.x-intro { max-width: 46ch; font-size: clamp(18px, 1.5vw, 21px); color: var(--grijs); }
.x-sectie { padding-block: clamp(28px, 4vw, 56px) clamp(72px, 9vw, 128px); }
.x-disclaimer { display: grid; gap: 14px; align-items: start; margin-top: clamp(40px, 5vw, 64px); padding: 20px 22px; border-radius: 14px; background: var(--tegel); font-size: 15px; line-height: 1.55; color: var(--grijs); }
.x-disclaimer svg { color: var(--inkt); }
.x-disclaimer p { margin: 0; }
.x-disclaimer a { color: var(--inkt); }
.x-label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.x-chip { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; color: var(--grijs); background: var(--tegel); border-radius: 30px; padding: 4px 10px 3px; white-space: nowrap; }
.x-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.x-knop { display: inline-flex; align-items: center; gap: 12px; background: transparent; color: var(--inkt); cursor: pointer; text-decoration: none; transition: color .25s; isolation: isolate; overflow: hidden; letter-spacing: .01em; }
.x-knop svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.x-knop.stil { border-color: transparent; }
.x-knop.stil:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: 4px; }
.x-telling { margin: 14px 0 0; font-size: 15px; color: var(--zacht); min-height: 1.5em; }
.x-filtergroep { margin-top: 22px; }
.x-filtergroep .filter { margin-top: 8px; }
.x-filtergroep + .x-filtergroep { margin-top: 14px; }
.filter button:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }

/* ---------- 1. begrippenlijst ---------- */
/* tooltip-begrippen (begrippen-tip.js) */

/* ---------- 2. wetswijzigingen ---------- */
.x-jaar.nu span::after { content: "nu"; display: inline-block; margin-left: 8px; vertical-align: middle; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--geel); padding: 3px 7px 2px; border-radius: 20px; font-weight: 500; }
 /* erkenningen: jaartal staat in lopende tekst */

/* ---------- 3. OR-wegwijzer ---------- */
.x-voortgang li.klaar::after, .x-voortgang li.nu::after { transform: none; }
.x-voortgang li.nu::after { background: var(--inkt); }
@keyframes xStapIn { from { opacity: 0; transform: translateX(22px); } }
@keyframes xStapTerug { from { opacity: 0; transform: translateX(-22px); } }
.x-uitkomst .x-recht.grijs { background: var(--tegel); }
/* contactblok */
.x-contact { margin-top: 26px; padding: 22px 24px; border-radius: 16px; background: var(--inkt); color: var(--op-inkt); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.x-contact p { margin: 0; max-width: 40ch; font-size: 16px; }
.x-contact .x-knop { border-color: var(--geel); }
.x-contact .x-knop:hover { background: var(--wit); border-color: var(--wit); }
.x-contact .x-knop.licht { border-color: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.x-contact .x-knop.licht:hover { border-color: var(--wit); background: rgba(255,255,255,.08); color: var(--inkt); }
.x-contact div { display: flex; flex-wrap: wrap; gap: 10px; }
.x-contact :focus-visible { outline-color: var(--geel); }

/* ---------- 4. reorganisatie ---------- */
.x-stapknop.gehad .x-nr { background: var(--inkt); color: var(--wit); }
@keyframes xFade { from { opacity: 0; transform: translateY(6px); } }
.x-planlijst li.eind { border-bottom: 1px solid var(--inkt); }
.x-planlijst li.eind .x-pnr { background: var(--geel); }
.x-planlijst li.uit { opacity: .5; }

/* ---------- mobiel ---------- */
/* J · beweging binnen 150–450 ms */
@media print {
  .kop-balk, .conceptbalk, .naarboven, .voet, .x-filtergroep, .x-zoek, .x-az { display: none !important; }
}
/* h1 in de paginakop krijgt de huisstijl van de sectiekoppen */
.sectiekop .x-h1 { text-transform: uppercase; letter-spacing: .005em; font-weight: 400; }
.sectiekop .x-h1 strong { font-weight: 500; }
.sectiekop .x-h1 { font-size: clamp(32px, 2.6vw + 20px, 56px); line-height: 1.06; } /* gelijk aan de systeemregel .pagina-kop h1 (style.css) */
/* paginatitel: dezelfde rol als op team/klanten */
/* H · inklapblokken met een eigen plus in plaats van het browserdriehoekje */
.x-sectie { padding-top: clamp(16px, 2.4vw, 32px); }

/* ---------- 5. podcasts ---------- */
.x-podkop { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.x-podlinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.x-podbron { margin-top: 16px; margin-bottom: 0; font-size: 15px; color: var(--zacht); }
/* F · regellengte 45–75 tekens; geen losse woorden; geen afgebroken namen en tegels die niet meer buiten de kaart steken */
.x-begrip p, .x-begrip .x-wet, .x-wkaart p, .x-pod p, .x-podbron, .x-plannoot, .x-stroom span, .x-artikel p, .x-quote p { max-width: 52ch; }
.x-podfoto { margin: 0; position: relative; }
.x-podfoto img { width: 100%; aspect-ratio: 648 / 830; object-fit: cover; border-radius: 16px; }
.x-podfoto figcaption { position: absolute; left: -14px; bottom: 22px; background: var(--geel); padding: 8px 14px 7px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.4); }
.x-podfoto figcaption b { display: block; font-weight: 500; color: var(--inkt); font-size: 16px; line-height: 1.25; }
.x-podfoto figcaption span { display: block; font-size: 14px; color: var(--grijs); }
.x-podlijst { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.js .x-podlijst:empty, .js .x-erk:empty { min-height: 100vh; }
.x-pod[hidden] { display: none; }
.x-pod article { display: grid; grid-template-columns: 200px 1fr; gap: 0; background: var(--wit); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 50px -40px rgba(0,0,0,.45); }
.x-hoes { background: var(--inkt); color: var(--wit); display: flex; flex-direction: column; justify-content: space-between; padding: calc(clamp(20px, 2.6vw, 30px) + 4px) 20px clamp(22px, 2.6vw, 30px); min-height: 100%; position: relative; }
.x-hoes svg { width: 100%; height: auto; fill: var(--geel); margin: 16px 0; }
.x-hoes-naam { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--wit); }
.x-hoes-wie { font-size: 13px; color: var(--steen-licht); }
.x-pod:nth-child(even) .x-hoes { background: var(--grijs); }
.x-podtekst { padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px) clamp(22px, 2.6vw, 30px); }
.x-podmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--zacht); font-variant-numeric: tabular-nums; }
/* podcast-meta: '27 mei 2026', '18 min' blijven heel */
.x-podmeta time, .x-podmeta span { white-space: nowrap; }
.x-podduur { display: inline-flex; gap: 10px; }
@media (max-width: 560px) { .x-podduur { order: 3; flex-basis: 100%; } }
.x-nieuw { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; background: var(--geel); color: var(--inkt); }
.x-pod h2 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; line-height: 1.28; margin: 12px 0 8px; }
.x-pod p { margin: 0; color: var(--tekst); font-size: 16px; }
.x-podknoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.x-podknoppen .x-knop { padding: 15px 24px 14px; font-size: 16px; }
.x-podknoppen .x-knop svg { width: 18px; height: 18px; }
.x-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.x-knop:hover::before { transform: scaleX(1); }
.x-knop:hover svg { transform: translateX(4px); }
.x-knop.vol:hover { background: var(--inkt); color: var(--inkt); }
.x-podknoppen, .x-podlinks, .x-contact div { gap: 18px; }
@media (max-width: 560px) { .x-podknoppen .x-knop, .x-podlinks .x-knop, .x-contact div .x-knop { flex: 1 1 100%; justify-content: space-between; } }
.x-contact .x-knop::before { background: var(--wit); }
.x-contact .x-knop.licht { background: transparent; color: var(--wit); }
.x-knop.stil::before { display: none; }
.x-knop.stil:hover { background: none; }
.x-verder { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px !important; color: var(--zacht) !important; }
.x-verder .pijllink { color: var(--inkt); }
@media (max-width: 860px) {
  .x-podkop { grid-template-columns: minmax(0, 1fr); }
  .x-podfoto { max-width: 190px; order: -1; margin-left: 14px; }
  .x-pod article { grid-template-columns: minmax(0, 1fr); }
  .x-hoes { flex-direction: row; align-items: center; gap: 14px; padding: 14px clamp(20px, 3vw, 36px); }
  .x-hoes svg { width: 110px; margin: 0; flex: none; }
  .x-hoes-wie { display: none; }
}
.x-ondertitel { margin: 14px 0 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; color: var(--inkt); font-weight: 500; }
.x-speler { margin-top: 18px; border-radius: 14px; background: var(--tegel); min-height: 84px; display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.x-speler.geladen { display: block; padding: 0; background: transparent; }
.x-speler iframe { display: block; width: 100%; height: 180px; border: 0; border-radius: 12px; }
.x-speler.video iframe { height: 600px; max-height: 80vh; background: var(--tegel); }
.x-afspelen { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; border: 0; cursor: pointer; background: var(--geel); color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--inkt); transition: transform .25s var(--ease); }
.x-afspelen svg { width: 22px; height: 22px; margin-left: 3px; }
.x-afspelen:hover { transform: scale(1.06); background: var(--wit); }
.x-speler-tekst { font-size: 15px; color: var(--grijs); line-height: 1.45; }
.x-speler-tekst b { display: block; color: var(--inkt); font-weight: 500; font-size: 16px; }
.x-speler-alt { font-size: 14px; color: var(--zacht); margin-top: 8px !important; }
.x-speler-alt a { color: var(--inkt); }
.x-videokaart { margin-top: 14px; }

/* ---------- 6. betrokken ---------- */

/* ---------- 7. actueel ---------- */
section[id] { scroll-margin-top: 90px; }

/* ---------- 8. erkenningen ---------- */
.x-disclaimer p, .x-pod p, .x-wkaart .x-voor, .x-wkaart .x-bronlink, .x-quote figcaption, .x-podbron { text-wrap: pretty; }
.x-quote { margin: 16px 0 0; padding: 18px 20px 16px 22px; border-radius: 14px; background: var(--geel-licht); position: relative; }
.x-quote blockquote { margin: 0; }
.x-quote p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--inkt); font-style: italic; }
.x-quote figcaption { margin-top: 8px; font-size: 14px; color: var(--zacht); }
.x-quote figcaption a { color: var(--grijs); position: relative; }
.x-quote figcaption a::before { content: ""; position: absolute; inset: -14px -10px; }
.x-quote::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: var(--geel); }
@media (max-width: 860px) { .x-podfoto figcaption { left: -14px; bottom: 12px; } }

/* =====================================================================================
   WORKX-DETAILNORM (28 okt) — erkenningen en kennispagina's
   ===================================================================================== */
/* B · knoppen volgens de norm; primair = zwart, op donker = geel; geel vult van links; pijl 12 px */
.x-knop { position: relative; padding: 15px 24px 14px; border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--inkt); font-size: 16px; font-weight: 500; }
.x-knop:hover { background: transparent; color: var(--inkt); }
.x-knop.vol { background: var(--inkt); color: var(--wit); }
.x-contact .x-knop { background: var(--geel); color: var(--inkt); box-shadow: none; }
.x-knop.stil { box-shadow: none; padding-inline: 0; margin-left: 0; }
/* D · chips: subnavigatie in dezelfde chipstijl; status-chips van de tijdlijn blijven een legenda */
/* D13/D15 · labels 13 px / 0,14 em; badges geel en licht schuin */
.x-label, .x-detail h3, .x-uitkomst h3, .x-nr, .x-hoes-naam, .x-sem-datum span { font-size: 13px; letter-spacing: .14em; }
.x-nieuw, .x-relatie i { display: inline-block; font-size: 13px; letter-spacing: .14em; background: var(--geel); color: var(--inkt); transform: rotate(-2deg); }
/* E17 · afrondingen: kaarten 14 */
.x-wkaart, .x-artikel, .x-wkader, .x-detail, .x-sem, .x-thema, .x-mitem, .x-post, .x-zijkaart, .x-contact, .x-pform, .x-pod article, .x-sem-datum, .x-optie span, .x-termijn, .x-relatie img, .x-quote { border-radius: var(--hoek); }
.x-mitem img, .x-pod img { border-radius: var(--hoek); }
/* gele bovenrand van kaarten: als echte rand, zodat hij niet in de hoeken wegloopt */
/* citaatkaarten: de balk links als losse streep, niet krom in de hoek */
.x-quote { border-left: 0; padding-left: 26px; }
.x-disclaimer p { max-width: 58ch; }
/* A/G · uitlijning en afstanden */
.x-intro { margin-top: 28px; }
.x-disclaimer { grid-template-columns: 24px 1fr; }
.x-disclaimer svg { width: 24px; height: 24px; margin-top: 1px; }
.x-disclaimer a, .x-bronnen a, .x-bronlink a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
@media (max-width: 760px) {  .tv-segment { display: grid; grid-auto-flow: row; } }
@media (max-width: 560px) {  .x-quote { padding: 14px 12px 14px 16px; } }
/* resterende afrondingen en klikvlakken */
.x-detail .x-termijn, .x-planner .x-pform, .x-relatie, .x-mitem > a, .x-pod img, .x-pod article img { border-radius: var(--hoek); }
.x-zoek input, .tv-datum, .x-pform input { border-radius: 2px; }
.x-chip { font-size: 13px; letter-spacing: .14em; }
.pagina-kop img, .x-podhoes img { border-radius: var(--hoek); }
.x-linkedin p, #linkedin p { max-width: 52ch; }
/* sticker 'Nieuwste' zelfde vorm als de andere statuslabels; labelmaat 13 px / 0,14 em (normfix 28 okt) */
.x-nieuw { border-radius: 2px; padding: 4px 10px 3px; line-height: 1.6; font-weight: 500; }
/* knoppen 55px hoog zoals overal (15/24/14, regelhoogte 1,6) */
.x-knop { line-height: 1.6; }
/* tekstlinks met onderstreping: bij hover dikkere lijn en inktkleur, zoals elders */
.x-disclaimer a:hover, .x-bronlink a:hover { color: var(--inkt); background-size: 100% 2px; }