/* =========================================================================
   Doorklikpagina's (werkgevers, werknemers, ondernemingsraden, bestuurders, reorganisaties,
   ondernemingsrechtkantoren, meldingen ongewenst gedrag, mediation, expats) — keuze klant: optie 4 'redactioneel'.
   De pagina's worden gebouwd met _bron/bouw-doorklik.js; deze stijl geldt ook voor doorklik-optie-1..5.html.
   ========================================================================= */
/* label: 13 px kapitalen, 0,14 em */
.dk-lbl { display: block; font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); font-weight: 400; }
/* kruimelpad */
.dk-kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.dk-kruimel a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.dk-kruimel a:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dk-kruimel [aria-current] { color: var(--inkt); }
.dk-donker .dk-kruimel [aria-current] { color: var(--wit); }
/* regellengte lopende tekst */
main p { max-width: 60ch; }
/* intro onder de paginatitel (zelfde rol als .x-intro op actueel/team) */
.dk-intro { margin-top: 28px; max-width: 46ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--grijs); }
.sectiekop:not(.zonder-schaduw) + .dk-intro { margin-top: 12px; }
/* knop: 16 px / 500, 15/24/14, hoek 2, min. 44 px, geel vult van links */
.dk-knop { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 15px 24px 14px; border: 0; border-radius: 2px; background: var(--inkt); color: var(--wit); font: inherit; font-size: 16px; font-weight: 500; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: color .3s var(--ease); }
.dk-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.dk-knop:hover, .dk-knop:focus-visible { color: var(--inkt); }
.dk-knop:hover::before, .dk-knop:focus-visible::before { transform: scaleX(1); }
.dk-knop svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.dk-knop:hover svg { transform: translateY(2px); }
/* document-icoon voor de Legal Graphic (decoratief) */
.dk-doc { container-type: inline-size; position: relative; aspect-ratio: 210 / 297; background: var(--wit); border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 14px 26px -18px rgba(0,0,0,.45); padding: 16% 0 0; flex: none; }
.dk-doc .dk-doc-band { display: block; height: 24cqw; background: var(--geel); margin: 0 4cqw 14cqw; }
.dk-doc i { display: block; height: 4cqw; min-height: 2px; margin: 0 13cqw 9cqw; background: var(--spoor); border-radius: 2px; }
.dk-doc i.kort { width: 45cqw; }
.dk-doc .dk-doc-pdf { position: absolute; right: 9%; bottom: 7%; font-size: 10px; letter-spacing: .14em; font-weight: 500; color: var(--inkt); }
.dk-doc.groot .dk-doc-pdf { font-size: 13px; }
/* OR-logo's: dezelfde tegels als op de klantenpagina */
/* flex in plaats van grid: een onvolle laatste rij (7 tegels: 5+2, 3+3+1, 2+2+2+1) staat in het midden, met dezelfde tegelbreedte */
.dk-logos { --kol: 4; --gat: 16px; list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gat); }
.dk-logos > li { flex: 0 0 calc((100% - (var(--kol) - 1) * var(--gat)) / var(--kol)); min-width: 0; }
.dk-logo { aspect-ratio: 340 / 198; background: var(--tegel); border-radius: var(--hoek); display: block; place-items: center; overflow: hidden; position: relative; }
.beige .dk-logo { background: var(--wit); }
.dk-logo img { width: 100%; max-width: none; height: auto; filter: grayscale(1) var(--toon,); mix-blend-mode: multiply; opacity: .86; }
@media (max-width: 1100px) { .dk-logos { --kol: 3; } }
@media (min-width: 861px) and (max-width: 1100px) { .dk-logos:has(> li:nth-child(7):last-child) { --kol: 4; } } /* 7 logo's: 4 + 3 zoals op desktop, niet 3 + 3 + 1 */
@media (max-width: 860px) { .dk-logos { --kol: 2; --gat: 12px; } }
/* contact: zwart vlak, kop + direct bellen/mailen links, formulier op een witte kaart */
.dk-contact { background: var(--inkt); color: var(--op-inkt-2); padding-block: clamp(72px, 9vw, 128px); }
.dk-contact { padding-bottom: clamp(56px, 6vw, 80px); } /* zelfde overgang naar de zwarte footer als op home (.contact.avond) */
.dk-contact .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.dk-contact .sectiekop h2 { color: var(--wit); }
.dk-direct { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 22px; }
.dk-direct .dk-lbl { color: var(--steen-licht); margin-bottom: 4px; }
.dk-direct a { color: var(--geel); text-decoration: none; font-size: clamp(18px, 1.5vw, 21px); display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; overflow-wrap: anywhere; }
.dk-direct a[href^="mailto"] { white-space: normal; }
.dk-direct a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.dk-form { box-shadow: none; }
.dk-form .verstuur { min-height: 44px; background: var(--inkt); color: var(--wit); padding: 15px 24px 14px; }
.dk-form .verstuur::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.dk-form .verstuur:focus-visible { background: var(--inkt); color: var(--inkt); transform: none; }
.dk-form .verstuur:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) { .dk-form .verstuur:hover { background: var(--inkt); color: var(--inkt); transform: none; } .dk-form .verstuur:hover::before { transform: scaleX(1); } } /* niet blijven hangen na een tik */
@media (hover: none) { .dk-form .verstuur:hover { transform: none; } .dk-form .verstuur:hover svg { transform: none; } }
.dk-form input:focus-visible { box-shadow: 0 1.5px 0 var(--inkt); }
.dk-form textarea:focus-visible { box-shadow: 1.5px 0 0 var(--inkt); }
.dk-form .melding { min-height: 1.4em; color: var(--grijs); }
.dk-form .melding.fout { color: var(--fout); }
/* lege melding houdt geen ruimte vast: anders stond er onder de knop ruim twee keer zoveel wit als erboven */
.dk-form .melding:empty { min-height: 0; margin: 0; }
.dk-form [aria-invalid="true"] { border-color: var(--fout) !important; }
.dk-contact :focus-visible { outline-color: var(--wit); }
.dk-contact .formulier :focus-visible { outline-color: var(--inkt); }
.dk-donker :focus-visible { outline-color: var(--wit); }
@media (max-width: 860px) {
  .dk-contact .wrap { grid-template-columns: minmax(0, 1fr); }
  .dk-direct { margin-top: 24px; }
  .dk-form textarea:focus-visible { box-shadow: 0 1.5px 0 var(--inkt); }
}
@media (prefers-reduced-motion: reduce) {
  .dk-knop, .dk-knop::before, .dk-knop svg { transition: none; }
}

/* ===================================================================== de doorklikpagina's zelf */
/* kop: titel, intro en kantoorfoto met geel etiket — elke pagina dezelfde uitsnede (4:3, midden) */
.dk-kop { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(72px, 9vw, 128px); }
.dk-kop .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
.dk-kop .dk-kruimel { grid-column: 1 / -1; }
.dk-kop h1 { overflow-wrap: break-word; hyphens: manual; }
.dk-naar-contact { margin-top: 8px; font-size: 17px; color: var(--inkt); }
.dk-foto { position: relative; margin: 0; }
.dk-foto .beeld { border-radius: var(--hoek); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tegel); }
.dk-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.dk-foto.in img, html:not(.js) .dk-foto img { transform: none; }
html.wx-vt-in .dk-foto:not(.vt-wacht) img { transform: none; transition: none; } /* binnen via een paginaovergang: de foto staat er al, niet nog 1,6 s krimpen (test 2 nov) */
/* kernzin met gele markering en de overige tekst in twee kolommen */
.dk-waarom .dk-lead, .dk-lead { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.22; letter-spacing: -.01em; color: var(--inkt); max-width: 28ch; margin: clamp(28px, 3vw, 40px) 0 clamp(28px, 3vw, 40px); }
.dk-lead.zonder-kop { margin-top: 0; }
.dk-lead span { background: linear-gradient(var(--geel), var(--geel)) 0 88% / 0% 30% no-repeat; transition: background-size .9s var(--ease) .3s; }
.dk-lead.in span, html:not(.js) .dk-lead span { background-size: 100% 30%; }
.dk-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 6vw, 96px); border-top: 1px solid var(--inkt); padding-top: 28px; }
.dk-twee p { margin: 0; }
/* gestapeld: twee alinea's van ongelijke lengte onder elkaar in de linkerkolom (reorganisaties) */
.dk-twee.gestapeld > p { grid-column: 1; }
.dk-twee.gestapeld p + p { margin-top: 1em; }
/* punten (of stappen): kolommen met een dunne lijn en een zwart streepje dat bij het inkomen 'neergelegd' wordt */
.dk-aanloop { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; color: var(--inkt); max-width: 40ch; margin: 0; }
.dk-punten { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--kol, 4), minmax(0, 1fr)); gap: 48px clamp(24px, 2.6vw, 40px); }
.dk-punten-sectie .wrap > .dk-punten:first-child { margin-top: 0; } /* zonder kop of aanloop (stappen op reorganisaties): niet bij de sectiewitruimte optellen */
.dk-punt { position: relative; padding-top: 30px; border-top: 1px solid var(--inkt); isolation: isolate; }
.dk-punt::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 4px; background: var(--inkt); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease) calc(var(--vertraging, 0s) + .2s); }
.dk-punt.in::before, html:not(.js) .dk-punt::before { transform: scaleX(1); }
.dk-punt h3 { font-size: 21px; font-weight: 500; line-height: 1.25; margin: 14px 0 12px; }
.dk-punt p { margin: 0; font-size: 16px; color: var(--grijs); }
/* uitlijning (Jochem 29 okt): binnen een rij beginnen de teksten op dezelfde hoogte, ook als een kop op twee regels staat */
.dk-punten > .dk-punt { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.dk-punt-tekst > :first-child { margin-top: 0; }
.dk-punt p + p, .dk-punt ul + p, .dk-punt p + ul { margin-top: .9em; }
.dk-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; line-height: 1.6; color: var(--grijs); }
.dk-lijst li { position: relative; padding-left: 20px; max-width: 56ch; }
.dk-lijst li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 1px rgba(30,30,30,.35); }
/* Legal Graphic: als document naast de tekst (ondernemingsraden) of als regel onder de stappen (reorganisaties) */
.dk-samen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(32px, 6vw, 96px); align-items: start; }
.dk-samen .sectiekop { margin-bottom: clamp(28px, 3vw, 40px); }
.dk-papier { justify-self: center; display: grid; justify-items: start; gap: 22px; }
.dk-papier .dk-doc { width: clamp(180px, 18vw, 230px); transform: rotate(3deg); box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); transition: transform .5s var(--ease); }
.dk-papier:hover .dk-doc { transform: rotate(0deg) translateY(-4px); }
.dk-papier h3, .dk-doc-rij h3 { font-size: 21px; font-weight: 500; line-height: 1.25; margin-top: 4px; }
.dk-doc-rij { margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px clamp(20px, 3vw, 40px); align-items: center; border-top: 1px solid var(--inkt); border-bottom: 1px solid var(--inkt); padding: 26px 0; }
.dk-doc-rij .dk-doc { width: 64px; }
/* slotzin van de pagina boven bellen/mailen */
.dk-slot { margin: 24px 0 0; font-size: 18px; line-height: 1.55; color: var(--op-inkt-3); max-width: 34ch; }
@media (max-width: 1100px) {
  .dk-punten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* drie stappen (reorganisaties) tussen 861 en 1100 naast elkaar: in 2 kolommen stond stap 3 alleen, met een leeg vak ernaast */
@media (min-width: 861px) and (max-width: 1100px) { .dk-punten.stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* hetzelfde voor de lijsten van drie of vijf punten (--kol:3): anders stond het laatste punt alleen naast een leeg vak */
@media (min-width: 861px) and (max-width: 1100px) { .dk-punten[style*="--kol:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .dk-kop .wrap, .dk-twee, .dk-samen { grid-template-columns: minmax(0, 1fr); }
  .dk-twee p + p { margin-top: 1em; }
  .dk-punten { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dk-punt h3, .dk-papier h3, .dk-doc-rij h3 { font-size: 19px; }
  .dk-papier { justify-self: start; }
  .dk-papier .dk-doc { width: 150px; margin-left: 10px; }
  .dk-doc-rij { grid-template-columns: auto minmax(0, 1fr); }
  .dk-doc-rij .dk-knop { grid-column: 1 / -1; justify-self: start; }
}
/* knoppen even hoog als alle andere knoppen op de site (55 px: 15 + regel 1.6 + 14); dk-knop was 48 px door regelhoogte 1.2 */
.dk-knop { line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .dk-foto img { transform: none; }
  .dk-lead span { background-size: 100% 30%; }
  .dk-punt::before { transform: scaleX(1); }
}
/* OR-logo's (28 okt): klikbaar naar het klantverhaal; logo in een vast vak (op één lijn), 'Works Council' als vast label, geel bij aanwijzen/klik */
.dk-logo-link { position: absolute; inset: 0; display: block; color: var(--inkt); text-decoration: none; border-radius: inherit; isolation: isolate; overflow: hidden; }
.dk-logo-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); display: none; }
.dk-logo-link:hover::before, .dk-logo-link:focus-visible::before, .dk-logo-link:active::before { transform: none; }
.dk-logo-vak { position: absolute; left: 16%; right: 16%; top: 18%; bottom: 34%; display: flex; align-items: center; justify-content: center; }
.dk-logo-vak picture { display: contents; }
.dk-logo .dk-logo-vak img { width: 100%; height: 100%; object-fit: contain; }
.dk-logo-link .wc-label { position: absolute; left: 0; right: 0; bottom: 16%; }
/* zelfde label als op de klantenpagina: ook op mobiel 13 px / 0,14 em; alleen onder 360 (tegels ±134 px) minder spatiëring */
@media (max-width: 860px) { .dk-logo-link .wc-label { bottom: 12%; } }
@media (max-width: 359px) { .dk-logo-link .wc-label { letter-spacing: .06em; padding-left: .06em; bottom: 8%; } }
.dk-logo-link:hover img, .dk-logo-link:focus-visible img { filter: none; opacity: 1; mix-blend-mode: normal; }
.dk-logo-link:focus-visible { outline: 2px solid var(--inkt); outline-offset: -4px; }
/* de tegel knipt (overflow: hidden) een ring buiten de link af: daarom de ring om de tegel zelf */
@supports selector(:has(a)) { .dk-logo:has(.dk-logo-link:focus-visible) { outline: 2px solid var(--inkt); outline-offset: 3px; } .dk-logo-link:focus-visible { outline: none; } }
/* kolommen (pluspunten/stappen) leven op: bij aanwijzen loopt een geel vlak van onder naar boven (28 okt) */
.dk-punt::after { content: ""; position: absolute; inset: 0 -16px -20px; z-index: -1; background: var(--geel); border-radius: 2px; transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.dk-punt:focus-within::after { transform: none; }
/* alleen bij een echte muis: op touch bleef het geel na een tik staan (sticky hover) */
@media (hover: hover) { .dk-punt:hover::after { transform: none; } .dk-punt:hover p, .dk-punt:hover li { color: var(--inkt); } }
/* kop 'Waarom ondernemingsraden …': de vaste regelbreuk gaf op mobiel losse woorden; daar gebalanceerd afbreken */
@media (max-width: 560px) { .dk-pagina .sectiekop h2 br.br-breed { display: none; } .dk-pagina .sectiekop h2:has(br.br-breed) { text-wrap: balance; } }
/* lopende tekst: geen los laatste woord op de laatste regel */
.dk-pagina main p, .dk-pagina .dk-lijst li { text-wrap: pretty; }
/* intro onder de h1: op smalle schermen bleef met pretty nog een los woord staan (mediation, 320) */
@media (max-width: 560px) { .dk-pagina .dk-intro { text-wrap: balance; } }
/* kop 'De bijzondere positie van expats': op 320 gaf de vaste regelbreuk 'positie' alleen op een regel */
@media (max-width: 374px) { .dk-pagina .sectiekop h2 br.dk-br-breed { display: none; } .dk-pagina .sectiekop h2:has(br.dk-br-breed) { text-wrap: balance; } }
@media (prefers-reduced-motion: reduce) { .dk-punt::after, .dk-logo-link::before { transition: none; } }
/* OR-logo's: geen geel vlak meer bij aanwijzen (wens Jochem 28 okt), maar dezelfde rustige reactie als de tegels op de klantenpagina */
/* de lift loopt via 'translate', zodat hij niet botst met de inkomst-transform van [data-in] (die won van transform) */
.dk-logo, .js .dk-logo[data-in] { transition: opacity .45s var(--ease) var(--vertraging, 0s), transform .45s var(--ease) var(--vertraging, 0s), translate .4s var(--ease), box-shadow .4s var(--ease); }
.dk-logo:hover, .dk-logo:focus-within { translate: 0 -3px; box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .dk-logo, .js .dk-logo[data-in] { transition: none; } .dk-logo:hover, .dk-logo:focus-within { translate: none; } }
/* op beige haalt --zacht maar 4,3:1 (WCAG AA vraagt 4,5:1 voor kleine tekst), bv. het label 'Pdf' bij de Legal Graphic */
.dk-pagina .beige { --zacht: var(--grijs); }
/* OR-logo's optisch even zwaar: script.js (gelijkTrekken) zet --t per logo, dezelfde regel als op de klantenpagina */
.dk-logo .dk-logo-vak img.gelijk { transform: var(--t); }
/* en de toon gelijktrekken: lichte logo's een gammacurve (SVG-filters lg14 t/m lg30 in de pagina, zoals relaties.html); bij aanwijzen blijft de eigen kleur */
.dk-logo .dk-logo-vak img.toon14 { filter: url(#lg14); } .dk-logo .dk-logo-vak img.toon18 { filter: url(#lg18); } .dk-logo .dk-logo-vak img.toon22 { filter: url(#lg22); } .dk-logo .dk-logo-vak img.toon26 { filter: url(#lg26); } .dk-logo .dk-logo-vak img.toon30 { filter: url(#lg30); }
.dk-logo .dk-logo-link:is(:hover, :focus-visible) .dk-logo-vak img:is(.toon14, .toon18, .toon22, .toon26, .toon30) { filter: none; }
/* ===== kop en vervolg als één geheel (29 okt, keuze Jochem: optie 1 'doorlopend vlak') =====
   De foto staat over de naad: het beige van het eerste deel begint al achter de foto. Het beige is de laatste rij van het
   kopraster (van onder de tekst tot onder de foto) en loopt via een schaduw over de volle breedte door. Bovenkant foto =
   bovenkant titel, onderkant foto = onderkant kop = begin van het eerste deel. Niet op de werkpagina doorklik-opties.html. */
html:not([data-optie]) .dk-kop { --k: clamp(72px, 9vw, 128px); position: relative; isolation: isolate; padding-bottom: 0; }
html:not([data-optie]) .dk-kop .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(calc(var(--k) / 2), 1fr); align-items: start; }
html:not([data-optie]) .dk-kop .wrap::before { content: ""; grid-column: 1 / -1; grid-row: 3; z-index: -1; align-self: stretch; margin-top: -1px; background: var(--beige); box-shadow: 0 0 0 100vmax var(--beige); clip-path: inset(0 -100vmax); transform-origin: 50% 100%; }
.js:not([data-optie]) .dk-kop .wrap::before { animation: dkNaad 1s var(--ease) .15s both; }
@keyframes dkNaad { from { transform: scaleY(0); } }
html.wx-vt-in:not([data-optie]) .dk-kop .wrap::before { animation: none; } /* binnen via een paginaovergang: de band staat er al (test 2 nov) */
html:not([data-optie]) .dk-kop .wrap > div { grid-row: 2; }
html:not([data-optie]) .dk-kop .dk-foto { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; }
/* is de tekst hoger dan de foto (lange intro of titel), dan wordt het beeld iets hoger dan 4:3 (cover, midden), zodat het toch van titel tot onder de kop loopt */
html:not([data-optie]) .dk-kop .dk-foto .beeld { width: 100%; min-height: 100%; }
@media (min-width: 861px) {
  html:not([data-optie]) .dk-kop + .dk-waarom { padding-top: 0; } /* het beige onder de tekst is hier de witruimte boven het eerste deel */
  html:not([data-optie]) .dk-kop + .dk-contact { padding-top: clamp(40px, 4.5vw, 64px); } /* geen leeg zwart vlak, maar wel ademruimte boven de kop (testronde 31 okt: kop plakte tegen de rand) */ /* ook op contact is de band onder de kop de witruimte boven het eerste deel (anders ±370 px leeg zwart vlak) */
  /* de eerste kop (of kernzin) begint op de onderrand van de foto: binnen de linkerkolom houden, anders loopt een lange kop onder de foto door */
  html:not([data-optie]) .dk-kop + .dk-waarom .sectiekop, html:not([data-optie]) .dk-kop + .dk-waarom .dk-lead.zonder-kop, html:not([data-optie]) .dk-kop + .dk-waarom .dk-lead { max-width: calc((100% - clamp(32px, 6vw, 96px)) / 2); }
}
/* 861–1019: een kop met vaste regelbreuk (ondernemingsraden) past niet in de halve kolom en breekt dan midden in een woord af; hier de volle breedte (begint toch onder de foto), zodat hij op twee regels blijft */
@media (min-width: 861px) and (max-width: 1019px) { html:not([data-optie]) .dk-kop + .dk-waarom .sectiekop:has(br.br-breed) { max-width: none; } }
/* 861–1100: de tekst is daar naar verhouding hoog; titel over de volle breedte, foto begint op de lijn van de intro */
@media (min-width: 861px) and (max-width: 1100px) {
  html:not([data-optie]) .dk-kop .wrap { grid-template-rows: auto auto auto auto minmax(calc(var(--k) / 2), 1fr); }
  html:not([data-optie]) .dk-kop .wrap > div { display: contents; }
  html:not([data-optie]) .dk-kop .sectiekop { grid-column: 1 / -1; grid-row: 2; }
  html:not([data-optie]) .dk-kop .dk-intro { grid-column: 1; grid-row: 3; margin-top: -12px; margin-bottom: 0; }
  html:not([data-optie]) .dk-kop .dk-naar-contact { grid-column: 1; grid-row: 4; justify-self: start; margin-top: -14px; }
  html:not([data-optie]) .dk-kop .dk-foto { grid-row: 3 / span 3; margin-top: -12px; }
  html:not([data-optie]) .dk-kop .wrap::before { grid-row: 5; }
}
@media (max-width: 860px) {
  html:not([data-optie]) .dk-kop .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto var(--k); }
  html:not([data-optie]) .dk-kop .wrap::before { grid-row: 4; }
  html:not([data-optie]) .dk-kop .dk-foto { grid-column: 1; grid-row: 3 / span 2; align-self: start; }
  html:not([data-optie]) .dk-kop .dk-foto .beeld { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .js:not([data-optie]) .dk-kop .wrap::before { animation: none; } }
/* ===== aanspreekpunten (31 okt, indeling Jochem): bestuurders, reorganisaties, ondernemingsraden, ondernemingsrechtkantoren,
   meldingen ongewenst gedrag. Het teamraster van home ('ons team': .team-raster + team-kaart.js/.css): portret met plusje, een
   klik klapt onder de rij de strook met het korte profiel open (Jochem 31 okt: 'mooier dan de tekst onder de foto').
   Raster gelijk aan het contactblok eronder: kop links (4/12), kaarten rechts (8/12) op de lijn van het formulier, drie
   kolommen, ook bij twee mensen (zelfde kaartmaat op elke pagina). */
.dk-mensen .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.dk-mensen .team-raster.dk-team { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-team .lid .naam { text-wrap: balance; }
/* vier mensen: kop erboven over de volle breedte, de vier kaarten op één rij (telefoon en tablet: twee bij twee); de strook
   heeft dan de volle breedte en houdt de indeling van home (drie kolommen) */
.dk-mensen-vier .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
.dk-mensen-vier .sectiekop { margin-bottom: clamp(36px, 4vw, 56px); }
.dk-mensen-vier .team-raster.dk-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .dk-mensen-vier .team-raster.dk-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .dk-mensen .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dk-mensen .sectiekop { margin-bottom: 36px; }
}
@media (max-width: 560px) {
  .dk-mensen .team-raster.dk-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* de strook staat hier in de smallere rechterkolom: indeling zoals op WorkxIN (twee kolommen, feiten en knop als rij eronder);
   met drie kolommen brak de knop 'Meer over …' over drie regels */
@media (min-width: 861px) {
  .dk-mensen:not(.dk-mensen-vier) .dk-team .tk-strook-inhoud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dk-mensen:not(.dk-mensen-vier) .dk-team .tk-strook-inhoud > .tk-punten { padding-right: 52px; }
  .dk-mensen:not(.dk-mensen-vier) .dk-team .tk-strook .tk-slot { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 0; border-top: 1px solid var(--lijn); }
  .dk-mensen:not(.dk-mensen-vier) .dk-team .tk-strook .tk-feiten { margin: 0; padding-top: 0; border-top: 0; flex: none; flex-wrap: nowrap; }
  .dk-mensen:not(.dk-mensen-vier) .dk-team .tk-strook .tk-knop { width: auto; flex: none; }
}

/* telefoon en tablet: de foto bovenaan komt alleen zacht op, zonder 14 px omhoog te schuiven en zonder in te zoomen.
   Samen gaf dat onderaan het scherm de indruk dat de foto 'even raar omhoog gaat' (iPhone-opname Jochem 31 okt). */
@media (max-width: 860px) {
  .dk-foto img { transform: none; transition: none; }
  .js .pagina-kop .dk-foto[data-in] { animation-name: dkFotoIn; }
}
@keyframes dkFotoIn { from { opacity: 0; } to { opacity: 1; } }

/* label 'Ondernemingsraad' onder de OR-logo's: kleiner en rustiger, zodat het het logo niet overschreeuwt (Jochem 31 okt,
   telefoon: liep van rand tot rand). Zelfde maat op de klantenpagina (style.css, .relatie-tegel). */
.dk-logo-link .wc-label { font-size: 11px; font-weight: 400; letter-spacing: .12em; padding-left: .12em; color: var(--grijs); }
@media (max-width: 560px) { .dk-logo-link .wc-label { font-size: 10px; letter-spacing: .1em; padding-left: .1em; } }

/* ---------- onepagers voor werkgevers (werkgevers.html; _bron/bouw-doorklik.js, 1 nov). Stijl van de Legal Graphic:
   klein papiertje (het echte A4-voorbeeld), label 'Pdf · grootte', titel en de downloadpijl; drie kolommen tussen lijnen ---------- */
.dk-ops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--inkt); }
.dk-ops > li { border-bottom: 1px solid var(--lijn); }
.dk-op { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 18px; align-items: center; padding: 20px 0; color: var(--inkt); text-decoration: none; }
.dk-op-papier { display: block; width: 56px; aspect-ratio: 480 / 678; background: var(--wit); border-radius: 2px; overflow: hidden; transform: rotate(-2deg);
  box-shadow: 0 0 0 1px rgba(30,30,30,.1), 0 12px 18px -12px rgba(0,0,0,.45); transition: transform .45s var(--ease); }
.dk-op-papier img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dk-op-tekst { min-width: 0; }
.dk-op-titel { display: block; margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.3; text-wrap: pretty; }
.dk-op > svg { width: 20px; height: 20px; transition: transform .35s var(--ease); }
@media (hover: hover) {
  .dk-op:hover .dk-op-papier { transform: rotate(0deg) translateY(-3px); }
  .dk-op:hover > svg { transform: translateY(3px); }
  .dk-op:hover .dk-op-titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
.dk-op:focus-visible { outline: 2px solid var(--inkt); outline-offset: 4px; }
.dk-op-meer { margin: 28px 0 0; font-size: 16px; }
.dk-op-meer a { color: var(--inkt); }
@media (max-width: 1100px) { .dk-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dk-ops { grid-template-columns: minmax(0, 1fr); } .dk-op { grid-template-columns: 48px minmax(0, 1fr) 20px; padding: 16px 0; } .dk-op-papier { width: 48px; } .dk-op-titel { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .dk-op-papier, .dk-op > svg { transition: none; } }

/* ---------- legal graphics naast elkaar (reorganisaties: met en zonder OR; 1 nov). Papier zoals de Legal Graphic op
   Ondernemingsraden (licht gedraaid, schaduw), met het echte A4-voorbeeld; de hele kaart is de link ---------- */
.dk-infos { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); border-top: 1px solid var(--inkt); padding-top: clamp(28px, 3vw, 40px); }
.dk-infos.enkel { grid-template-columns: minmax(0, 1fr); }
.dk-info { display: grid; grid-template-columns: clamp(120px, 13vw, 170px) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); align-items: center; color: var(--inkt); text-decoration: none; }
.dk-info-papier { display: block; aspect-ratio: 480 / 678; background: var(--wit); border-radius: 2px; overflow: hidden; transform: rotate(3deg); box-shadow: 0 0 0 1px rgba(30,30,30,.08), 0 30px 50px -30px rgba(0,0,0,.45); transition: transform .5s var(--ease); }
.dk-info-papier img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dk-info-tekst { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.dk-info-titel { font-size: 21px; font-weight: 500; line-height: 1.25; margin-bottom: 14px; text-wrap: balance; }
@media (hover: hover) {
  .dk-info:hover .dk-info-papier { transform: rotate(0deg) translateY(-4px); }
  .dk-info:hover .dk-knop { color: var(--inkt); }
  .dk-info:hover .dk-knop::before { transform: scaleX(1); }
  .dk-info:hover .dk-knop svg { transform: translateY(2px); }
}
.dk-info:focus-visible { outline: 2px solid var(--inkt); outline-offset: 6px; }
.dk-info:focus-visible .dk-knop { color: var(--inkt); }
.dk-info:focus-visible .dk-knop::before { transform: scaleX(1); }
@media (max-width: 860px) { .dk-infos { grid-template-columns: minmax(0, 1fr); } .dk-info-titel { font-size: 19px; } }
@media (max-width: 400px) { .dk-info { grid-template-columns: 104px minmax(0, 1fr); } .dk-info .dk-knop { padding: 13px 18px 12px; } }
@media (prefers-reduced-motion: reduce) { .dk-info-papier { transition: none; } }

/* samenwerking op Ondernemingsraden met echte pdf-voorbeelden: tekst boven, de downloads eronder over de volle breedte (1 nov) */
.dk-samen:has(.dk-infos) { grid-template-columns: minmax(0, 1fr); }
.dk-samen:has(.dk-infos) > div:first-child { max-width: 720px; }

/* smalle telefoon: een lang woord in de onepagertitel ('Klokkenluidersregeling:') stak 16 px buiten het scherm (320, 1 nov) */
@media (max-width: 400px) { .dk-info-titel { min-width: 0; max-width: 100%; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } }

/* band 'Samen met onder meer' op ondernemingsrechtkantoren (1 nov): de logo's van werken-bij.html, rustig en zonder vlak */
.dk-samen-band { margin-top: clamp(48px, 5vw, 72px); min-width: 0; }
.dk-samen-band > .dk-lbl { display: block; margin-bottom: 10px; }
.dk-samen-band .wb-deal-band { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.dk-samen-band .wb-deal-rail { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: nowrap; width: max-content; animation: band 26s linear infinite; will-change: transform; } /* zelfde tempo als werken bij (Jochem 1 nov) */
.dk-samen-band .wb-deal-rail li { flex: none; display: flex; align-items: center; height: 52px; margin-right: 56px; }
.dk-samen-band img { width: auto; max-width: none; filter: grayscale(1) var(--toon,); opacity: .72; }
.dk-samen-band .wb-deal-band:hover .wb-deal-rail, .dk-samen-band .wb-deal-band:focus-within .wb-deal-rail, .dk-samen-band .wb-deal-band.buiten .wb-deal-rail { animation-play-state: paused; }
@media (max-width: 860px) { .dk-samen-band .wb-deal-rail li { margin-right: 40px; zoom: .82; } }
@media (prefers-reduced-motion: reduce) {
  .dk-samen-band .wb-deal-band { -webkit-mask-image: none; mask-image: none; }
  .dk-samen-band .wb-deal-rail { animation: none; flex-wrap: wrap; width: auto; gap: 8px 32px; }
  .dk-samen-band .wb-deal-rail li { margin-right: 0; }
  .dk-samen-band .wb-deal-rail li[aria-hidden] { display: none; }
}

/* Kennis & actueel op Werkgevers (10 nov 2026): de kolommen van de homepage (kennis.css + ttwwoo.css kn-vijf), maar drie:
   onepager, artikel, Legal Short (_bron/kennis-werkgevers.js) */
.dk-kn.kn-kolommen.kn-vijf { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: clamp(28px, 3.4vw, 56px) !important; margin-top: clamp(28px, 3vw, 44px); }
.dk-kn-meer { margin-top: clamp(32px, 3.4vw, 48px); }
@media (max-width: 860px) { .dk-kn.kn-kolommen.kn-vijf { grid-template-columns: minmax(0, 1fr) !important; } }

/* Logo's (Ondernemingsraden): bij aanwijzen geel, net als de tegels op de klantenpagina (ttwwoo.css 'klanten'), zodat
   duidelijk is dat je erop kunt klikken (Jochem 10 nov 2026) */
.dk-logo { transition: background-color .35s var(--ease); }
@media (hover: hover) {
  .dk-logo:has(.dk-logo-link:hover) { background: var(--geel); box-shadow: none; translate: none; }
  .dk-logo-link:hover img { filter: grayscale(1) var(--toon,) contrast(1.1); opacity: 1; mix-blend-mode: multiply; }
}
.dk-logo:has(.dk-logo-link:focus-visible) { background: var(--geel); box-shadow: none; translate: none; }
.dk-logo-link:focus-visible img { filter: grayscale(1) var(--toon,) contrast(1.1); opacity: 1; mix-blend-mode: multiply; }
/* en het logo groeit een fractie mee, zoals op Klanten (style.css .relatie-tegel:hover img: scale 1.03) */
.dk-logo .dk-logo-vak img { transition: filter .4s, opacity .4s, transform .5s var(--ease); }
@media (hover: hover) {
  .dk-logo .dk-logo-link:hover .dk-logo-vak img { transform: scale(1.03); }
  .dk-logo .dk-logo-link:hover .dk-logo-vak img.gelijk { transform: var(--t) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .dk-logo .dk-logo-vak img { transition: none; } }

/* toelichting onder een logo (doorklik.js): het gele vlak van de klantenpagina (style.css/ttwwoo.css .relatie-detail), hier
   als volle regel in de flexlijst; dicht neemt het geen ruimte in */
.dk-logos > li.dk-logo-detail { flex: 0 0 100%; margin-block: calc(var(--gat) * -1) 0; }
.dk-logos > li.dk-logo-detail.open { margin-block: 0; }
.dk-logo:has(.dk-logo-link[aria-expanded="true"]) { background: var(--geel); }