/* proef-wb.css — alleen proefsite: opties voor Werken bij (zes per punt, html[data-k-<id>="1..6"]). Optie 1 is de aanbeveling.
   Binnen de huisregels: geel = aandacht, inkt = hoofdknop en voet, steen en wit = vlak, geen schaduw, hoek --hoek, knoppen recht. */

/* ============ wbheld · hero (foto zonder verloop) ============ */
@media (min-width: 901px) {
  /* 2: huidige opzet (wit verloop) blijft */
  html[data-k-wbheld="1"] .wb-held-vol::before, html[data-k-wbheld="3"] .wb-held-vol::before, html[data-k-wbheld="4"] .wb-held-vol::before,
  html[data-k-wbheld="5"] .wb-held-vol::before, html[data-k-wbheld="6"] .wb-held-vol::before { display: none; }
  html[data-k-wbheld="1"] .wb-held-vol, html[data-k-wbheld="5"] .wb-held-vol { background: var(--wit); }
  /* 1: foto rechts als kader met hoek, tekst op wit */
  html[data-k-wbheld="1"] .wb-held-foto { left: 46%; right: max(var(--rand), calc((100% - var(--breed)) / 2)); top: 104px; bottom: 56px; border-radius: var(--hoek); overflow: hidden; }
  /* 3: foto vult de rechterhelft, harde rand, geen verloop */
  html[data-k-wbheld="3"] .wb-held-vol { background: var(--wit); }
  html[data-k-wbheld="3"] .wb-held-foto { left: 52%; }
  /* 4: foto vol, tekst in een witte kaart */
  html[data-k-wbheld="4"] .wb-held-tekst { background: var(--wit); padding: clamp(28px, 3vw, 44px); border-radius: var(--hoek); max-width: 540px; }
  /* 5: gespiegeld, foto links in kader, tekst rechts */
  html[data-k-wbheld="5"] .wb-held-foto { left: max(var(--rand), calc((100% - var(--breed)) / 2)); right: 54%; top: 104px; bottom: 56px; border-radius: var(--hoek); overflow: hidden; }
  html[data-k-wbheld="5"] .wb-held-vol .wrap { display: flex; justify-content: flex-end; }
  html[data-k-wbheld="5"] .wb-held-tekst { width: 46%; max-width: 520px; }
  html[data-k-wbheld="5"] .wb-held-vol .wb-filmkaartje { right: auto; left: calc(max(var(--rand), (100% - var(--breed)) / 2) + 16px); bottom: 72px; }
  /* 6: steenvlak links, smalle foto rechts */
  html[data-k-wbheld="6"] .wb-held-vol { background: var(--beige); }
  html[data-k-wbheld="6"] .wb-held-foto { left: auto; width: 40%; right: max(var(--rand), calc((100% - var(--breed)) / 2)); top: 104px; bottom: 56px; border-radius: var(--hoek); overflow: hidden; }
}
@media (max-width: 900px) {
  html:is([data-k-wbheld="1"], [data-k-wbheld="3"], [data-k-wbheld="4"], [data-k-wbheld="5"], [data-k-wbheld="6"]) .wb-held-vol { display: block; min-height: 0; padding-block: 96px 40px; background: var(--wit); }
  html:is([data-k-wbheld="1"], [data-k-wbheld="3"], [data-k-wbheld="4"], [data-k-wbheld="5"], [data-k-wbheld="6"]) .wb-held-vol::before { display: none; }
  html:is([data-k-wbheld="1"], [data-k-wbheld="3"], [data-k-wbheld="4"], [data-k-wbheld="5"], [data-k-wbheld="6"]) .wb-held-foto { position: relative; inset: auto; aspect-ratio: 4 / 3; margin: 0 var(--rand) 24px; border-radius: var(--hoek); overflow: hidden; }
  html[data-k-wbheld="6"] .wb-held-vol { background: var(--beige); }
  html:is([data-k-wbheld="1"], [data-k-wbheld="3"], [data-k-wbheld="4"], [data-k-wbheld="5"], [data-k-wbheld="6"]) .wb-held-vol .wb-filmkaartje { position: relative; margin: 20px var(--rand) 0; right: auto; bottom: auto; }
  html[data-k-wbheld="4"] .wb-held-tekst { background: none; padding: 0; }
}

/* ============ wblogo · logobalk (korte tekst blijft; alle logo's optisch op één lijn via feedback-wb.js) ============ */
/* 1: huidige korte tekst links in het geel (alleen het label bij het logo vastgezet) */
html[data-k-wblogo="2"] .wb-banier-smal { background: var(--wit); border-block: 1px solid var(--lijn); }
html[data-k-wblogo="3"] .wb-banier-smal { background: var(--beige); }
html[data-k-wblogo="4"] .wb-banier-smal { display: block; text-align: center; padding-left: 0; }
html[data-k-wblogo="4"] .wb-banier-smal .wrap { text-align: center; margin: 0 auto 6px; padding-inline: var(--rand); }
html[data-k-wblogo="4"] .wb-banier-smal h2 { font-weight: 400; color: var(--zacht); }
html[data-k-wblogo="5"] .wb-banier-smal h2 { font-weight: 400; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; }
html[data-k-wblogo="6"] .wb-banier-smal { background: var(--wit); }
html[data-k-wblogo="6"] .wb-banier-smal h2 { background: linear-gradient(transparent 62%, var(--geel) 62%, var(--geel) 92%, transparent 92%); padding-inline: 4px; display: inline-block; }
@media (max-width: 760px) { html[data-k-wblogo="4"] .wb-banier-smal .wrap { text-align: left; margin-bottom: 10px; } }

/* ============ wbzwart · Boutique van formaat en Het arbeidsrecht in de deal ============ */
/* 1: inkt blijft, spotlight en citaat blijven; kleinere ruimtes, één doorlopend vlak, het getal rustiger */
html[data-k-wbzwart="1"] .wb-spot { padding-block: clamp(56px, 6.5vw, 96px) clamp(36px, 4vw, 56px); }
html[data-k-wbzwart="1"] .wb-deal { padding-block: clamp(36px, 4vw, 56px) clamp(56px, 6.5vw, 96px); }
html[data-k-wbzwart="1"] .wb-deal-getal strong { font-size: clamp(56px, 6vw, 84px); }
/* 2: inkt, de twee blokken scheiden met een dunne lijn en minder hoogte */
html[data-k-wbzwart="2"] .wb-spot { padding-block: clamp(56px, 6.5vw, 96px) clamp(48px, 5vw, 72px); }
html[data-k-wbzwart="2"] .wb-deal { padding-block: clamp(48px, 5vw, 72px) clamp(56px, 6.5vw, 96px); position: relative; }
html[data-k-wbzwart="2"] .wb-deal::before { content: ""; position: absolute; top: 0; left: max(var(--rand), calc((100% - var(--breed)) / 2)); right: max(var(--rand), calc((100% - var(--breed)) / 2)); border-top: 1px solid rgba(255,255,255,.2); }
/* 3: Boutique blijft inkt met spotlight, de deal staat op steen */
html[data-k-wbzwart="3"] .wb-spot { padding-block: clamp(56px, 6.5vw, 96px); }
html[data-k-wbzwart="3"] .wb-deal { background: var(--beige); color: var(--inkt); padding-block: clamp(56px, 6.5vw, 96px); }
html[data-k-wbzwart="3"] .wb-deal .wb-kop, html[data-k-wbzwart="3"] .wb-deal .wb-kop strong, html[data-k-wbzwart="3"] .wb-deal-citaat p { color: var(--inkt); }
html[data-k-wbzwart="3"] .wb-deal .wb-boventitel, html[data-k-wbzwart="3"] .wb-deal-tekst p, html[data-k-wbzwart="3"] .wb-deal-citaat footer { color: var(--inkt); }
html[data-k-wbzwart="3"] .wb-deal-kaart { background: var(--wit); }
/* 4: beide op steen (de lichte optie); spotlight werkt op de witte tegels */
html[data-k-wbzwart="4"] .wb-spot, html[data-k-wbzwart="4"] .wb-deal { background: var(--beige); color: var(--inkt); }
html[data-k-wbzwart="4"] .wb-spot { padding-block: clamp(56px, 6.5vw, 96px) clamp(36px, 4vw, 56px); }
html[data-k-wbzwart="4"] .wb-deal { padding-block: clamp(36px, 4vw, 56px) clamp(56px, 6.5vw, 96px); }
html[data-k-wbzwart="4"] :is(.wb-spot, .wb-deal) .wb-kop, html[data-k-wbzwart="4"] :is(.wb-spot, .wb-deal) .wb-kop strong, html[data-k-wbzwart="4"] .wb-spot .pijllink,
html[data-k-wbzwart="4"] .wb-spot-zin, html[data-k-wbzwart="4"] .wb-spot-naam, html[data-k-wbzwart="4"] .wb-deal-citaat p, html[data-k-wbzwart="4"] .wb-deal-tekst p,
html[data-k-wbzwart="4"] .wb-deal-citaat footer, html[data-k-wbzwart="4"] .wb-deal .wb-boventitel { color: var(--inkt); }
html[data-k-wbzwart="4"] .wb-spot-kaart, html[data-k-wbzwart="4"] .wb-deal-citaat { border-left-color: var(--inkt); }
html[data-k-wbzwart="4"] .wb-spot-muur { background: var(--beige); }
html[data-k-wbzwart="4"] .wb-deal-kaart { background: var(--geel); }
/* 5: inkt als afgeronde kaart binnen de marges, op wit */
html[data-k-wbzwart="5"] .wb-spot, html[data-k-wbzwart="5"] .wb-deal { background: var(--wit); padding-block: 0; }
html[data-k-wbzwart="5"] .wb-spot > .wrap, html[data-k-wbzwart="5"] .wb-deal > .wrap { background: var(--inkt); padding: clamp(32px, 4vw, 56px); }
html[data-k-wbzwart="5"] .wb-spot > .wrap { border-radius: var(--hoek) var(--hoek) 0 0; margin-top: clamp(56px, 6.5vw, 96px); }
html[data-k-wbzwart="5"] .wb-deal > .wrap { border-radius: 0 0 var(--hoek) var(--hoek); margin-bottom: clamp(56px, 6.5vw, 96px); padding-top: 0; }
/* 6: inkt, maar compact: kleinere koppen, de muur in kleinere tegels, geen losse ruimte */
html[data-k-wbzwart="6"] .wb-spot { padding-block: clamp(44px, 5vw, 72px) clamp(28px, 3vw, 40px); }
html[data-k-wbzwart="6"] .wb-deal { padding-block: clamp(28px, 3vw, 40px) clamp(44px, 5vw, 72px); }
html[data-k-wbzwart="6"] :is(.wb-spot, .wb-deal) .wb-kop { font-size: clamp(28px, 3vw, 40px); }
html[data-k-wbzwart="6"] .wb-deal-getal strong { font-size: clamp(48px, 5vw, 68px); }
html[data-k-wbzwart="6"] .wb-deal-kaart { padding: clamp(22px, 2.4vw, 32px); }
@media (max-width: 900px) { html[data-k-wbzwart="5"] .wb-spot > .wrap, html[data-k-wbzwart="5"] .wb-deal > .wrap { margin-inline: var(--rand); width: auto; padding: 28px 22px; } }

/* ============ wbpola · polaroids (Er is meer in het leven) ============ */
/* 1: het schuine idee blijft, zonder schaduw, met dunne rand */
html[data-k-wbpola="1"] .wb-fm-vak { box-shadow: none; border: 1px solid var(--lijn); border-radius: 2px; }
/* 2: rechte polaroids met steenkleurig kader */
html[data-k-wbpola="2"] .wb-fm-vak { box-shadow: none; transform: none !important; background: var(--beige); border-radius: var(--hoek); }
html[data-k-wbpola="2"] .wb-fm-vak img { border-radius: 6px; }
/* 3: alleen de foto's, rechte rij, geen kader */
html[data-k-wbpola="3"] .wb-fm-vak { box-shadow: none; transform: none !important; background: none; padding: 0; aspect-ratio: 4 / 5; }
html[data-k-wbpola="3"] .wb-fm-vak img { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--hoek); }
/* 4: alleen foto's, de middelste lager (verspringend) */
html[data-k-wbpola="4"] .wb-fm-vak { box-shadow: none; transform: none !important; background: none; padding: 0; aspect-ratio: 4 / 5; }
html[data-k-wbpola="4"] .wb-fm-vak img { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--hoek); }
html[data-k-wbpola="4"] .wb-fm-vak:nth-child(2) { transform: translateY(32px) !important; }
html[data-k-wbpola="4"] .wb-fotomuur { padding-bottom: 32px; }
/* 5: kleine schuine kaartjes in steen, geen wit kader */
html[data-k-wbpola="5"] .wb-fm-vak { box-shadow: none; background: var(--beige); border-radius: 2px; }
html[data-k-wbpola="5"] .wb-fm-vak:nth-child(1) { transform: rotate(-1.2deg); } html[data-k-wbpola="5"] .wb-fm-vak:nth-child(2) { transform: rotate(.8deg) translateY(10px); } html[data-k-wbpola="5"] .wb-fm-vak:nth-child(3) { transform: rotate(-.6deg); }
/* 6: twee grotere foto's, liggend */
html[data-k-wbpola="6"] .wb-fotomuur { grid-template-columns: repeat(2, 1fr); }
html[data-k-wbpola="6"] .wb-fm-vak { box-shadow: none; transform: none !important; background: none; padding: 0; aspect-ratio: 3 / 2; }
html[data-k-wbpola="6"] .wb-fm-vak img { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--hoek); }
html[data-k-wbpola="6"] .wb-fm-vak:nth-child(3) { display: none; }

/* ============ wbfilm · filmstroken (Even kijken) ============ */
/* 1: het filmstrookidee blijft, ingetogen: geen schaduw, fijnere gaatjes, recht */
html[data-k-wbfilm="1"] .wb-strook { box-shadow: none; border-radius: 2px; }
html[data-k-wbfilm="1"] .wb-strook::before, html[data-k-wbfilm="1"] .wb-strook::after { opacity: .55; }
html[data-k-wbfilm="1"] .wb-strook-speel { box-shadow: none; }
/* 2: lichte strook in steen met witte gaatjes */
html[data-k-wbfilm="2"] .wb-strook { --strook: var(--beige); --strook-gat: var(--wit); box-shadow: none; border-radius: 2px; color: var(--inkt); }
html[data-k-wbfilm="2"] .wb-strook-titel { color: var(--inkt); }
html[data-k-wbfilm="2"] .wb-strook-speel { box-shadow: none; }
html[data-k-wbfilm="2"] .wb-strook-tijd { color: var(--inkt); }
/* 3: geen gaatjes, losse kaarten met hoek */
html[data-k-wbfilm="3"] .wb-strook { --strook: transparent; box-shadow: none; padding: 0; color: var(--inkt); border-radius: 0; }
html[data-k-wbfilm="3"] .wb-strook::before, html[data-k-wbfilm="3"] .wb-strook::after { display: none; }
html[data-k-wbfilm="3"] .wb-strook-beeld { border-radius: var(--hoek); }
html[data-k-wbfilm="3"] .wb-strook-titel, html[data-k-wbfilm="3"] .wb-strook-tijd { color: var(--inkt); }
html[data-k-wbfilm="3"] .wb-strook-speel { box-shadow: none; }
/* 4: wit kaartje met dunne rand */
html[data-k-wbfilm="4"] .wb-strook { --strook: var(--wit); box-shadow: none; padding: 10px 10px 0; border: 1px solid var(--lijn); border-radius: var(--hoek); color: var(--inkt); }
html[data-k-wbfilm="4"] .wb-strook::before, html[data-k-wbfilm="4"] .wb-strook::after { display: none; }
html[data-k-wbfilm="4"] .wb-strook-beeld { border-radius: 6px; }
html[data-k-wbfilm="4"] .wb-strook-titel, html[data-k-wbfilm="4"] .wb-strook-tijd { color: var(--inkt); }
html[data-k-wbfilm="4"] .wb-strook-speel { box-shadow: none; }
html[data-k-wbfilm="4"] .wb-strook:hover { background: var(--geel); }
/* 5: steenkaartje, geel bij hover */
html[data-k-wbfilm="5"] .wb-strook { --strook: var(--beige); box-shadow: none; padding: 10px 10px 0; border-radius: var(--hoek); color: var(--inkt); transition: background-color .2s; }
html[data-k-wbfilm="5"] .wb-strook::before, html[data-k-wbfilm="5"] .wb-strook::after { display: none; }
html[data-k-wbfilm="5"] .wb-strook-beeld { border-radius: 6px; }
html[data-k-wbfilm="5"] .wb-strook-titel, html[data-k-wbfilm="5"] .wb-strook-tijd { color: var(--inkt); }
html[data-k-wbfilm="5"] .wb-strook:hover { background: var(--geel); }
html[data-k-wbfilm="5"] .wb-strook-speel { box-shadow: none; }
/* 6: donkere strook, kleiner en compact */
html[data-k-wbfilm="6"] .wb-strook { box-shadow: none; border-radius: 2px; }
html[data-k-wbfilm="6"] .wb-filmrij { --h: 300px; }
html[data-k-wbfilm="6"] .wb-strook-beeld { height: min(var(--h), 300px); }
html[data-k-wbfilm="6"] .wb-strook-speel { width: 48px; height: 48px; margin: -24px 0 0 -24px; box-shadow: none; }
html[data-k-wbfilm="6"] .wb-strook-speel::after { left: 19px; top: 14px; border-left-width: 14px; border-top-width: 10px; border-bottom-width: 10px; }

/* ============ wbvac · vacatures: lijst en kaart ============ */
/* alle opties: de gestapelde kaartranden achter de kaart blijven weg */
html[data-k-wbvac]:not([data-k-wbvac="7"]) .dv-b .dv-dek { padding-right: 0; }
html[data-k-wbvac]:not([data-k-wbvac="7"]) .dv .dv-dek .dia:not([data-pos="0"]) { transform: none !important; visibility: hidden; }
/* 1: lijst links, kaart rechts (zoals nu, zonder stapel) */
/* 2: alleen grote rijen, kaart weg */
html[data-k-wbvac="2"] .wb-vm-rij { grid-template-columns: minmax(0, 1fr); }
html[data-k-wbvac="2"] .wb-vm-rij .dv-kolom, html[data-k-wbvac="2"] .wb-vm-rij .paneel { display: none; }
html[data-k-wbvac="2"] .wb-vm-rij .kiezer li.aan a { background: none; }
html[data-k-wbvac="2"] .wb-vm-rij .kiezer a { min-height: 96px; }
html[data-k-wbvac="2"] .wb-vm-rij .kiezer b { font-size: clamp(22px, 2.2vw, 30px); }
html[data-k-wbvac="2"] .wb-vm-rij .kiezer a > svg { opacity: 1; transform: none; }
html[data-k-wbvac="2"] .wb-vm-rij .kiezer small { font-size: 15px; }
/* 3: kaart boven, de vijf vacatures als regel eronder */
html[data-k-wbvac="3"] .wb-vm-rij { grid-template-columns: minmax(0, 1fr); }
html[data-k-wbvac="3"] .wb-vm-rij .paneel { order: -1; }
html[data-k-wbvac="3"] .wb-vm-rij .kiezer { flex-direction: row; border-top: 0; gap: 12px; }
html[data-k-wbvac="3"] .wb-vm-rij .kiezer li { border: 0; flex: 1 1 0; min-width: 0; background: var(--beige); border-radius: 2px; }
html[data-k-wbvac="3"] .wb-vm-rij .kiezer li.aan { background: var(--geel); }
html[data-k-wbvac="3"] .wb-vm-rij .kiezer a { padding: 14px 16px; min-height: 0; align-items: flex-start; }
html[data-k-wbvac="3"] .wb-vm-rij .kiezer a > svg { display: none; }
html[data-k-wbvac="3"] .wb-vm-rij .kiezer a:hover { background: var(--geel); }
html[data-k-wbvac="3"] .wb-vm-rij .kiezer b { font-size: 16px; }
html[data-k-wbvac="3"] .wb-vm-rij .kiezer small { font-size: 13px; }
/* 4: gespiegeld: kaart links, lijst rechts */
html[data-k-wbvac="4"] .wb-vm-rij { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
html[data-k-wbvac="4"] .wb-vm-rij .kiezer { order: 2; }
/* 5: lijst op een steenvlak, kaart wit */
html[data-k-wbvac="5"] .wb-vm-rij .kiezer { background: var(--beige); border-top: 0; border-radius: var(--hoek); padding: 8px 0; }
html[data-k-wbvac="5"] .wb-vm-rij .kiezer li { border-bottom: 0; }
html[data-k-wbvac="5"] .wb-vm-rij .kiezer li.aan a { background: var(--wit); }
/* 6: smalle lijst, de kaart op steen met grote titel */
html[data-k-wbvac="6"] .wb-vm-rij { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
html[data-k-wbvac="6"] .wb-vm1 .paneel, html[data-k-wbvac="6"] .dv .dv-dek .dia { background: var(--beige); border-color: transparent; }
html[data-k-wbvac="6"] .dv .dv-dek .dia h3 { font-size: clamp(30px, 3.2vw, 44px); }
@media (max-width: 900px) {
  html[data-k-wbvac="3"] .wb-vm-rij .kiezer { flex-direction: column; }
  html[data-k-wbvac="4"] .wb-vm-rij, html[data-k-wbvac="6"] .wb-vm-rij { grid-template-columns: minmax(0, 1fr); }
  html[data-k-wbvac="4"] .wb-vm-rij .kiezer { order: 0; }
}

/* ============ wblang · lengte van de pagina (niets verdwijnt) ============ */
/* 1: alles blijft, strakkere ruimtes */
html[data-k-wblang] .wb-chat, html[data-k-wblang] .wb-bo, html[data-k-wblang] .wb-pand, html[data-k-wblang] .wb-agenda, html[data-k-wblang] .wb-uitjes,
html[data-k-wblang] .wb-lb, html[data-k-wblang] .wb-fo, html[data-k-wblang] .wb-vo, html[data-k-wblang] .wb-proces, html[data-k-wblang] .wb-sparren { padding-block: clamp(56px, 6.5vw, 96px); }
html[data-k-wblang="1"] .wb-agenda, html[data-k-wblang="1"] .wb-lb { padding-block: clamp(56px, 6.5vw, 96px); }
/* 2: strakker; de groepschat korter, Wat voor zaken en getallen compact */
html[data-k-wblang="2"] .wb-chat, html[data-k-wblang="2"] .wb-pand, html[data-k-wblang="2"] .wb-bo { padding-block: clamp(44px, 5vw, 72px); }
html[data-k-wblang="2"] .wb-chat-scherm { max-height: 440px; }
html[data-k-wblang="2"] .wb-getallen { padding-block: 40px; }
html[data-k-wblang="2"] .wb-lb .wb-kop, html[data-k-wblang="2"] .wb-vo-kopregel { margin-bottom: 20px; }
/* 3: strakker; Er is meer in het leven: tekst links, foto's en films kleiner */
html[data-k-wblang="3"] .wb-uitjes { padding-block: clamp(44px, 5vw, 72px); }
html[data-k-wblang="3"] .wb-fotomuur { max-width: 860px; margin-inline: auto; }
html[data-k-wblang="3"] .wb-fm-nav { margin-top: 20px; }
html[data-k-wblang="3"] .wb-filmrij { --h: 300px; }
html[data-k-wblang="3"] .wb-strook-beeld { height: min(var(--h), 300px); }
/* 4: strakker; Zo gaat solliciteren en Eerst kennismaken naast elkaar (breed scherm) */
@media (min-width: 1001px) {
  html[data-k-wblang="4"] main.wb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-k-wblang="4"] main.wb > * { grid-column: 1 / -1; }
  html[data-k-wblang="4"] main.wb > #solliciteren, html[data-k-wblang="4"] main.wb > #sparren { grid-column: auto; }
  html[data-k-wblang="4"] #solliciteren .wrap, html[data-k-wblang="4"] #sparren .wrap { display: block; width: auto; padding-inline: var(--rand); max-width: none; }
  html[data-k-wblang="4"] #sparren .wrap > div { margin-bottom: 24px; }
  html[data-k-wblang="4"] #solliciteren { padding-left: max(var(--rand), calc((100vw - var(--breed)) / 2)); padding-right: 0; }
  html[data-k-wblang="4"] #sparren { padding-right: max(var(--rand), calc((100vw - var(--breed)) / 2)); padding-left: 0; }
  html[data-k-wblang="4"] #sparren .wrap { padding-inline: 0 0; margin-left: clamp(24px, 3vw, 48px); }
}
/* 5: alles compact: 2 + 3 samen, nog krapper */
html[data-k-wblang="5"] .wb-chat, html[data-k-wblang="5"] .wb-pand, html[data-k-wblang="5"] .wb-bo, html[data-k-wblang="5"] .wb-agenda, html[data-k-wblang="5"] .wb-uitjes,
html[data-k-wblang="5"] .wb-lb, html[data-k-wblang="5"] .wb-fo, html[data-k-wblang="5"] .wb-vo, html[data-k-wblang="5"] .wb-proces, html[data-k-wblang="5"] .wb-sparren { padding-block: clamp(40px, 4.5vw, 64px); }
html[data-k-wblang="5"] .wb-chat-scherm { max-height: 440px; }
html[data-k-wblang="5"] .wb-getallen { padding-block: 32px; }
html[data-k-wblang="5"] .wb-fotomuur { max-width: 860px; margin-inline: auto; }
html[data-k-wblang="5"] .wb-filmrij { --h: 300px; }
html[data-k-wblang="5"] .wb-strook-beeld { height: min(var(--h), 300px); }
html[data-k-wblang="5"] .wb-fm-nav { margin-top: 16px; }
/* 6: de ruimtes blijven ruim, alleen de zwarte blokken en de agenda staan dichter op elkaar */
html[data-k-wblang="6"] .wb-spot { padding-block: clamp(56px, 6.5vw, 96px) clamp(32px, 3.6vw, 48px); }
html[data-k-wblang="6"] .wb-deal { padding-block: clamp(32px, 3.6vw, 48px) clamp(56px, 6.5vw, 96px); }
html[data-k-wblang="6"] .wb-agenda { padding-block: clamp(56px, 6.5vw, 96px); }
html[data-k-wblang="6"] .wb-chat { padding-block: clamp(56px, 6.5vw, 96px); }
html[data-k-wblang="6"] .wb-uitjes { padding-block: clamp(56px, 6.5vw, 96px); }

/* ============ wbvacp · vacaturepagina: kop en afvinkblok ============ */
/* 1: kop op steen (geen eigen kleur per vacature), afvinken als rijen met lijn, geel als aangevinkt */
html:is([data-k-wbvacp="1"], [data-k-wbvacp="3"], [data-k-wbvacp="4"], [data-k-wbvacp="6"]) .wb-vac-held { --vlak: var(--beige); }
html[data-k-wbvacp="2"] .wb-vac-held { --vlak: var(--geel); }
html[data-k-wbvacp="3"] .wb-vac-held { --vlak: var(--wit); }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="2"], [data-k-wbvacp="3"], [data-k-wbvacp="4"], [data-k-wbvacp="6"]) .donker .wb-vac-held :is(h1, .wb-terug, .wb-vh-boven, .wb-intro, .wb-vh-zacht) { color: var(--inkt); }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="2"], [data-k-wbvacp="3"], [data-k-wbvacp="4"], [data-k-wbvacp="6"]) .donker .wb-vac-held h1::after { background: var(--inkt); }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="2"], [data-k-wbvacp="3"], [data-k-wbvacp="4"], [data-k-wbvacp="6"]) .donker .wb-vh-knop { background: var(--inkt); }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="2"], [data-k-wbvacp="3"], [data-k-wbvacp="4"], [data-k-wbvacp="6"]) .donker .wb-vh-boven .wb-nu-open { background: var(--geel); }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="2"], [data-k-wbvacp="3"], [data-k-wbvacp="4"], [data-k-wbvacp="6"]) .wb-vac-held h1::after { background: var(--inkt); }
html[data-k-wbvacp="2"] .wb-vh-boven .wb-nu-open { background: var(--wit); }
html[data-k-wbvacp="3"] .wb-vac-held::before { background: linear-gradient(90deg, var(--wit) 0%, var(--wit) 48%, transparent 62%); }
/* afvinkblok (de rij is li.wb-vink-rij, het vakje een knop erin) */
html[data-k-wbvacp] .wb-vi-vink li.wb-vink-rij .vak { border-radius: 2px; }
html[data-k-wbvacp] .wb-vi-vink li.wb-vink-rij button { background: none; }
/* 1 en 5: rijen met een lijn; geel bij hover en als aangevinkt; vakje wordt inkt */
html:is([data-k-wbvacp="1"], [data-k-wbvacp="5"]) .wb-vi-vink { gap: 0; border-bottom: 1px solid var(--lijn); }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="5"]) .wb-vi-vink li.wb-vink-rij { border: 0; border-top: 1px solid var(--lijn); border-radius: 0; background: none; padding: 16px 14px; }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="5"]) .wb-vi-vink li.wb-vink-rij:hover, html:is([data-k-wbvacp="1"], [data-k-wbvacp="5"]) .wb-vi-vink li.wb-vink-rij:has(button[aria-pressed="true"]) { background: var(--geel); }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="5"]) .wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak { background: var(--inkt); border-color: var(--inkt); }
html:is([data-k-wbvacp="1"], [data-k-wbvacp="5"]) .wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak svg { stroke: var(--wit); }
/* 2 en 3: steenkaarten, geel als aangevinkt of bij hover */
html:is([data-k-wbvacp="2"], [data-k-wbvacp="3"]) .wb-vi-vink li.wb-vink-rij { border: 0; background: var(--beige); padding: 16px 18px; }
html:is([data-k-wbvacp="2"], [data-k-wbvacp="3"]) .wb-vi-vink li.wb-vink-rij:hover, html:is([data-k-wbvacp="2"], [data-k-wbvacp="3"]) .wb-vi-vink li.wb-vink-rij:has(button[aria-pressed="true"]) { background: var(--geel); }
html:is([data-k-wbvacp="2"], [data-k-wbvacp="3"]) .wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak { background: var(--inkt); border-color: var(--inkt); }
html:is([data-k-wbvacp="2"], [data-k-wbvacp="3"]) .wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak svg { stroke: var(--wit); }
/* 4: twee kolommen op steen */
html[data-k-wbvacp="4"] .wb-vi-vink { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-k-wbvacp="4"] .wb-vi-vink li.wb-vink-rij { border: 0; background: var(--beige); padding: 14px 16px; }
html[data-k-wbvacp="4"] .wb-vi-vink li.wb-vink-rij:hover, html[data-k-wbvacp="4"] .wb-vi-vink li.wb-vink-rij:has(button[aria-pressed="true"]) { background: var(--geel); }
html[data-k-wbvacp="4"] .wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak { background: var(--inkt); border-color: var(--inkt); }
html[data-k-wbvacp="4"] .wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak svg { stroke: var(--wit); }
/* 6: zonder kader, alleen vakje en tekst; aangevinkt krijgt een gele markering */
html[data-k-wbvacp="6"] .wb-vi-vink { gap: 2px; }
html[data-k-wbvacp="6"] .wb-vi-vink li.wb-vink-rij { border: 0; background: none; padding: 10px 0; border-radius: 0; }
html[data-k-wbvacp="6"] .wb-vi-vink li.wb-vink-rij:has(button[aria-pressed="true"]) .t { background: linear-gradient(transparent 55%, var(--geel) 55%, var(--geel) 92%, transparent 92%); }
html[data-k-wbvacp="6"] .wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak { background: var(--inkt); border-color: var(--inkt); }
html[data-k-wbvacp="6"] .wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak svg { stroke: var(--wit); }
@media (max-width: 900px) { html[data-k-wbvacp="4"] .wb-vi-vink { grid-template-columns: minmax(0, 1fr); } }
/* meter en knop in alle opties: geel balkje en recht */
html[data-k-wbvacp] .wb-vi-meter .balk i { background: var(--geel); }
html[data-k-wbvacp] .wb-vi-meter .balk { background: var(--beige); box-shadow: inset 0 0 0 1px var(--lijn); }
@media (min-width: 901px) { html[data-k-wbheld="4"] .wb-held-tekst { max-width: 600px; } html[data-k-wbheld="4"] .wb-held-vol .wb-filmkaartje { bottom: 24px; } }
@media (max-width: 900px) {
  html:is([data-k-wbheld="1"], [data-k-wbheld="3"], [data-k-wbheld="4"], [data-k-wbheld="5"], [data-k-wbheld="6"]) .wb-held-foto { height: auto; width: auto; }
  html:is([data-k-wbheld="1"], [data-k-wbheld="3"], [data-k-wbheld="4"], [data-k-wbheld="5"], [data-k-wbheld="6"]) .wb-held-foto img { inset: 0; top: 0; height: 100%; }
  html:is([data-k-wbheld="1"], [data-k-wbheld="3"], [data-k-wbheld="4"], [data-k-wbheld="5"], [data-k-wbheld="6"]) .wb-held-vol > .wrap::before { display: none; }
  html:is([data-k-wbheld="1"], [data-k-wbheld="3"], [data-k-wbheld="4"], [data-k-wbheld="5"], [data-k-wbheld="6"]) .wb-held-vol { padding-top: 96px; }
}
@media (min-width: 901px) {
  html[data-k-wbvacp="1"] .wb-vh-achter img { filter: none; opacity: 1; }
  html[data-k-wbvacp="1"] .wb-vac-held::before { background: linear-gradient(90deg, var(--vlak) 0, var(--vlak) 52%, transparent 52%); }
  html[data-k-wbvacp="1"] .wb-vh-achter { left: 52%; }
}
@media (min-width: 901px) { html[data-k-wbvacp="4"] .wb-vi-eisen .wrap { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); } }
@media (min-width: 1001px) {
  html[data-k-wblang="4"] #solliciteren .wb-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  html[data-k-wblang="4"] #solliciteren :is(.wb-zg-lijn, .wb-zg-route) { display: none; }
}

/* wbvac: de rustiger basis geldt voor alle opties behalve 7 (de oorspronkelijke vacatures) */
html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer .stip { display: none; }html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer li.aan a { background: var(--beige); }html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer a:hover, html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer a:focus-visible { background: var(--geel); }html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer a:hover b, html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer a:focus-visible b { color: var(--inkt); }html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer a { padding-inline: 16px; }html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer a > svg { width: 30px; height: 30px; }html:not([data-k-wbvac="7"]) .wb-vm-rij .kiezer a:hover > svg { transform: translateX(4px); }html:not([data-k-wbvac="7"]) .wb-vm .paneel, html:not([data-k-wbvac="7"]) .wb-vm1 .paneel { box-shadow: none; }html:not([data-k-wbvac="7"]) .wb-vm1 .dia, html:not([data-k-wbvac="7"]) .wb-vm1 .dia[style*="#f9ff85"], html:not([data-k-wbvac="7"]) .dv .dv-dek .dia, html:not([data-k-wbvac="7"]) .dv .dv-dek .dia:not([data-pos="0"]), html:not([data-k-wbvac="7"]) .dv .dv-dek .dia.dv-weg.dv-weg.dv-weg, html:not([data-k-wbvac="7"]) .dv .dv-dek .dia.dv-zakt.dv-zakt.dv-zakt { box-shadow: none; }html:not([data-k-wbvac="7"]) .dv .dv-dek .dia::before { background: var(--beige); border-color: var(--lijn); }html:not([data-k-wbvac="7"]) .dv .dv-dek .dia { border-color: var(--lijn); }