/* Werken bij Workx — conceptversie. Bouwt voort op style.css (zelfde letter, kleuren en kop/voet).
 * Iets speelser dan de hoofdsite: post-its, krabbels, polaroids. Wel binnen geel/zwart/beige. */

.wb { overflow-x: clip; --grijs: var(--tekst); }
.wb-kop { line-height: 1.05; font-weight: 400; text-transform: uppercase; margin: 0 0 28px; color: var(--inkt); letter-spacing: -.005em; }
.wb-kop strong { font-weight: 500; }
.wb-boventitel { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--zacht); margin: 0 0 18px; }
.wb-klein { font-size: 14px; color: var(--zacht); }
.wb-klein a { color: var(--inkt); }
.wb-knop { display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; font-family: inherit; }

.wb-naar-site { font-size: 14px; text-decoration: none; color: var(--zacht); }
.wb-naar-site:hover { color: var(--inkt); }
.wb-markeer { background: linear-gradient(transparent 58%, var(--geel) 58%, var(--geel) 92%, transparent 92%); padding: 0 .06em; }

/* koffiekopje als cursor op de foto's (23) */

/* ---------- 1 · hero ---------- */

.wb-held .wrap { display: grid; align-items: center; }
.wb-held h1 { text-transform: uppercase; margin: 0 0 28px; color: var(--inkt); }
.wb-intro { margin: 0 0 30px; }
.wb-knoppen { display: flex; flex-wrap: wrap; }

.wb-plekken { overflow: hidden; background: var(--beige); }
.wb-plekken img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.wb-plekken img.aan { opacity: 1; }

/* ---------- 8 · getallen ---------- */
.wb-getallen { background: var(--beige); padding-block: 8px clamp(48px, 6vw, 80px); }
.wb-getallen .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 20px 40px; }
.wb-getallen .wrap > div { border-top: 1.5px solid var(--inkt); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.wb-getallen strong { font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; color: var(--inkt); line-height: 1; font-variant-numeric: tabular-nums; }
.wb-getallen .wrap > div > span { font-size: 15px; color: var(--grijs); }

/* ---------- mix ---------- */

/* handgeschreven krabbels (10) */

/* ---------- 3, 4, 11 · pand ---------- */
.wb-pand { background: var(--beige); padding-block: clamp(72px, 9vw, 128px); }
.wb-pand .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }

.wb-pand-beeld { display: flex; justify-content: center; }
.wb-pand .held-pand { position: relative; top: auto; right: auto; width: min(100%, 460px); margin: 0; animation: none; }

.js .wb-pand:not(.aan) .held-pand .licht { animation-play-state: paused; }
.js .wb-pand:not(.aan) .kb-glimp { opacity: 0; }

/* ---------- 12 · uitjes en polaroids ---------- */
.wb-uitjes { padding-block: clamp(72px, 9vw, 128px); }
.wb-uitjes > .wrap:first-child { display: grid; gap: clamp(32px, 6vw, 90px); align-items: center; }

.wb-films { margin-top: clamp(40px, 5vw, 70px); }
.wb-films-kop { font-size: 20px; font-weight: 500; margin: 0 0 16px; color: var(--inkt); }
.wb-films ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wb-films li { display: grid; gap: 8px; font-size: 14px; color: var(--grijs); }
.wb-films video { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; background: var(--inkt); border-radius: 6px; }

/* ---------- 29 · proces ---------- */
.wb-proces { background: var(--beige); padding-block: clamp(72px, 9vw, 128px); }
.wb-stappen { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; position: relative; }
.wb-stappen::before { content: ""; position: absolute; left: 22px; top: 22px; border-top: 1.5px dashed var(--inkt); z-index: 0; }
.wb-stappen li { position: relative; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.wb-stappen strong { font-size: 19px; color: var(--inkt); margin-top: 8px; }
.wb-stap-nr { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--geel); border: 1.5px solid var(--inkt); font-weight: 500; }

/* ---------- 37 · sparren ---------- */
.wb-sparren { padding-block: clamp(60px, 8vw, 110px); }
.wb-sparren .wrap { display: grid; grid-template-columns: 180px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }

.wb-sparren h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; margin: 0 0 10px; color: var(--inkt); }

/* ---------- 6 · fiets ---------- */
.wb-fiets { position: fixed; z-index: 40; --p: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.wb-fiets.zichtbaar { opacity: 1; }
.wb-fiets svg { display: block; transition: transform .3s ease; }

.wb-wiel { transform: rotate(var(--draai, 0deg)); }

/* ---------- 39 · plakknop ---------- */
.wb-plakknop { display: none; }

/* ---------- vacaturepagina ---------- */

.wb-vac-held h1 { line-height: .95; font-weight: 500; text-transform: uppercase; margin: 0 0 24px; letter-spacing: -.02em; color: inherit; }
.wb-vac-held .wb-boventitel { color: inherit; opacity: .75; }
.wb-terug { margin-bottom: 28px; color: inherit; text-decoration: none; font-size: 15px; }

.wb-vac-held .wb-intro { max-width: 36em; }
.wb-vac-inhoud { padding-block: clamp(60px, 8vw, 110px); }
.wb-vac-inhoud .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); }
.wb-vac-inhoud h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; margin: 0 0 20px; color: var(--inkt); }

.wb-sollicitatie { background: var(--inkt); color: var(--op-inkt-2); padding-block: clamp(70px, 9vw, 120px); }
.wb-sollicitatie .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); }
.wb-sollicitatie h2 { font-size: clamp(44px, 5.5vw, 76px); line-height: .95; text-transform: uppercase; font-weight: 500; margin: 0 0 24px; color: var(--geel); }
.wb-sollicitatie a { color: var(--wit); }
.wb-mini-stappen { display: grid; gap: 6px; margin: 22px 0; }
.wb-sollicitatie .wb-klein { color: var(--steen-licht); }
.wb-sollicitatie .wb-klein a { color: var(--geel); }
.wb-form { display: grid; gap: 16px; }
.wb-veld { display: grid; gap: 6px; }
.wb-veld label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); } /* labelnorm, gelijk aan het formulier op werken-bij */
.wb-veld label span { color: var(--label-op-inkt); text-transform: none; letter-spacing: normal; }
.wb-veld input { font: inherit; font-size: 17px; padding: 13px 14px; border: 1.5px solid var(--veld-rand-donker); background: var(--tekst); color: var(--wit); border-radius: 2px; }
.wb-veld input:focus { outline: none; border-color: var(--geel); box-shadow: 0 0 0 3px rgba(249,255,133,.25); }
.wb-drop { position: relative; display: grid; gap: 4px; padding: 20px; border: 1.5px dashed var(--veld-hint); border-radius: 4px; cursor: pointer; transition: border-color .2s, background .2s; }
.wb-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wb-drop:focus-within { border-color: var(--geel); }
.wb-drop.erboven { border-color: var(--geel); background: rgba(249,255,133,.08); }
.wb-drop.gevuld { border-style: solid; border-color: var(--geel); }
.wb-drop.fout { border-color: var(--fout-op-inkt); }
.wb-veld input[aria-invalid="true"] { border-color: var(--fout-op-inkt); } /* ook met focus */
.wb-form .wb-klein.fout { color: var(--fout-op-inkt); }
.wb-drop-kop { font-weight: 500; color: var(--wit); }
.wb-drop-hulp { font-size: 14px; color: var(--mos); }
.wb-drop-tik { display: none; }
@media (hover: none) { .wb-drop-muis { display: none; } .wb-drop-tik { display: inline; } } /* touch: tikken i.p.v. slepen/klikken */
.wb-drop-naam { font-size: 14px; color: var(--geel); }
.wb-form .wb-knop { justify-self: start; border-color: var(--geel); box-shadow: 3px 3px 0 var(--geel); }
.wb-form-klaar { padding: 30px; border: 1.5px solid var(--geel); }
.wb-form-klaar h3 { color: var(--geel); font-size: 28px; margin: 0 0 10px; }

/* 7 · de knop laat even los */

/* ---------- mobiel ---------- */
@media (max-width: 900px) {
  .wb-held .wrap, .wb-pand .wrap, .wb-uitjes > .wrap:first-child, .wb-vac-inhoud .wrap, .wb-sollicitatie .wrap { grid-template-columns: 1fr; }

  .wb-getallen .wrap { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

  .wb-films ul { grid-template-columns: 1fr 1fr; }
  .wb-stappen { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .wb-stappen::before { display: none; }

}
@media (max-width: 600px) {

  .wb-stappen { grid-template-columns: 1fr; }
  .wb-sparren .wrap { grid-template-columns: 1fr; }

  .wb-fiets { display: none; }
  .wb-plakknop { position: fixed; z-index: 50; text-align: center; text-decoration: none; }
  .wb-plakknop.zichtbaar { transform: none; }

}
@media (prefers-reduced-motion: reduce) {
  .wb-plekken img { transition: none !important; }
  .wb-fiets { display: none; }
}

/* ---------- relaties: banier + spotlight ---------- */
.wb .banier { margin: 0; }
.wb-spot { background: var(--inkt); color: var(--op-inkt-4); padding-block: clamp(72px, 9vw, 128px); }
.wb-spot .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.wb-spot .wb-kop { color: var(--wit); }
.wb-spot .pijllink { color: var(--wit); margin-top: clamp(24px, 3vw, 36px); }
.wb-spot-kaart { margin-top: clamp(24px, 3vw, 36px); border-left: 3px solid var(--geel); padding: 4px 0 4px 18px; }
.wb-spot-naam { display: block; color: var(--geel); font-size: 22px; font-weight: 500; line-height: 1.2; margin-bottom: 8px; }
.wb-spot-zin { display: block; font-size: 17px; line-height: 1.5; color: var(--op-inkt-2); }
.wb-spot-kaart.wissel .wb-spot-naam, .wb-spot-kaart.wissel .wb-spot-zin { opacity: 0; transform: translateY(4px); }
.wb-spot-naam, .wb-spot-zin { transition: opacity .35s ease, transform .35s ease; }
@property --spot-x { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --spot-y { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
.wb-spot-muur { position: relative; --r: 120px; border-radius: 10px; overflow: hidden; background: var(--tegel); touch-action: pan-y; }
.wb-spot-laag { list-style: none; margin: 0; padding: 18px; display: grid; gap: 8px; }
.wb-spot-kleur { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--spot-x) var(--spot-y), var(--zwart) 55%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--spot-x) var(--spot-y), var(--zwart) 55%, transparent 100%); }
.wb-spot-tegel { aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 14%; }
.wb-spot-tegel img { width: auto; max-width: 100%; object-fit: contain; }
.wb-spot-grijs img { filter: grayscale(1) var(--toon,) contrast(1.1); opacity: .3; mix-blend-mode: multiply; }
.wb-spot-kleur .wb-spot-tegel { background: var(--wit); border-radius: 6px; }
.wb-spot-schaduw { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle calc(var(--r) * 1.15) at var(--spot-x) var(--spot-y), rgba(255,255,220,.0) 0, rgba(255,255,220,0) 60%, rgba(30,30,30,.38) 100%); }
.wb-spot-muur:hover { cursor: none; }
@media (max-width: 900px) {
  .wb-spot .wrap { grid-template-columns: 1fr; }
  .wb-spot-laag { padding: 10px; }
  .wb-spot-muur { --r: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-spot-kleur { -webkit-mask-image: none; mask-image: none; }
  .wb-spot-schaduw { display: none; }
}

/* ---------- 7, 8, 9 · deal ---------- */
.wb-deal { padding-block: clamp(30px, 4vw, 60px) clamp(72px, 9vw, 128px); }
.wb-deal .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.wb-deal-citaat { margin: 26px 0 0; padding-left: 18px; border-left: 3px solid var(--geel); }
.wb-deal-citaat p { margin: 0 0 6px; font-size: 18px; font-style: normal; }
.wb-deal-citaat footer { font-size: 14px; color: var(--zacht); }
.wb-deal-kaart { padding: clamp(26px, 3vw, 40px); border-radius: 6px; }
.wb-deal-getal { margin: 0 0 28px; display: flex; flex-direction: column; }
.wb-deal-getal strong { font-size: clamp(72px, 8vw, 116px); line-height: .95; color: var(--geel); font-weight: 500; }
.wb-deal-getal span { font-size: 18px; }
.wb-deal-samen > span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--mos); margin-bottom: 12px; }
.wb-deal-samen ul { list-style: none; margin: 0; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; background: var(--tegel); border-radius: 4px; }
.wb-deal-samen img { width: auto; filter: grayscale(1) var(--toon,); opacity: .86; height: 28px; max-width: none; }

/* ---------- 2 · stemmen ---------- */

@media (max-width: 900px) {
  .wb-deal .wrap { grid-template-columns: 1fr; }

}

.wb-deal-getal strong { font-variant-numeric: normal; letter-spacing: -.02em; }

/* ---------- fotomuur: drie tegelijk, steeds een nieuwe ---------- */
.wb-uitjes > .wrap:first-child { grid-template-columns: 1fr; }
.wb-uitjes-tekst { max-width: 760px; }
.wb-fotomuur { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); padding-top: 10px; }
.wb-fm-vak { position: relative; margin: 0; aspect-ratio: 1; background: var(--wit); padding: 12px 12px 40px; box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 34px -12px rgba(0,0,0,.3); }
.wb-fm-vak:nth-child(1) { transform: rotate(-2deg); } .wb-fm-vak:nth-child(2) { transform: rotate(1.2deg) translateY(14px); } .wb-fm-vak:nth-child(3) { transform: rotate(-.8deg); }
.wb-fm-vak img { position: absolute; left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 52px); object-fit: cover; opacity: 0; transition: opacity 1.2s ease; background: var(--beige); }
.wb-fm-vak img.aan { opacity: 1; }
/* Zelf bladeren: pijlen onder de fotomuur; bij klikken wisselt het sneller dan in de automatische stand */
.wb-fotomuur.snel .wb-fm-vak img { transition-duration: .35s; }
.wb-fm-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }
.wb-fm-nav button { display: grid; place-items: center; border-radius: 50%; background: var(--wit); color: var(--inkt); cursor: pointer; transition: background .3s, border-color .3s, transform .15s var(--ease); }
.wb-fm-nav button:hover { background: var(--geel); border-color: var(--inkt); }
.wb-fm-nav button:active { transform: scale(.94); }
.wb-fm-nav button:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.wb-fm-vorige svg { transform: rotate(180deg); }

@media (max-width: 600px) { .wb-fotomuur { grid-template-columns: 1fr 1fr; } .wb-fm-vak:nth-child(3) { display: none; } }

/* ---------- 17 + 26 · de agenda van Marlieke ---------- */
.wb-agenda { background: var(--inkt); color: var(--op-inkt-2); padding-block: clamp(72px, 9vw, 128px); }
.wb-agenda .wb-kop { color: var(--wit); }
.wb-ag-tekst { max-width: 640px; margin-bottom: 34px; }
.wb-ag-scroll { overflow-x: auto; margin-inline: calc(var(--rand) * -1); padding: 6px var(--rand) 70px; }
.wb-ag { position: relative; min-width: 860px; background: var(--wit); color: var(--tekst); border-radius: 18px; padding: 26px 26px 18px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.wb-ag-wie { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.wb-ag-wie img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 3px var(--wit), 0 2px 8px rgba(0,0,0,.2); }
.wb-ag-wie strong { display: block; font-size: 20px; font-weight: 500; color: var(--inkt); line-height: 1.2; }
.wb-ag-wie span { font-size: 15px; color: var(--zacht); }
.wb-ag-raster { display: grid; grid-template-columns: 54px 1fr; border-top: 1px solid #e3e5e1; }
.wb-ag-uren { position: relative; margin-top: 74px; height: 520px; }
.wb-ag-uren span { position: absolute; right: 10px; transform: translateY(-50%); font-size: 12px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.wb-ag-dagen { display: grid; grid-template-columns: repeat(7, 1fr); }
.wb-ag-dag { border-left: 1px solid #e3e5e1; min-width: 0; }
.wb-ag-kop { height: 74px; padding: 10px 8px 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--zacht); position: relative; }
.wb-ag-kop strong { font-size: 15px; color: var(--inkt); }
.wb-ag-kop em { position: absolute; left: 4px; right: 4px; bottom: 6px; font-style: normal; text-align: center; background: var(--geel); color: var(--inkt); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 0; border-radius: 3px; }
.wb-ag-vakken { position: relative; list-style: none; margin: 0; padding: 0; height: 520px; background: repeating-linear-gradient(to bottom, #fafbf9 0, #fafbf9 51px, #eef0ec 51px, #eef0ec 52px); }
.wb-ag-weekend .wb-ag-vakken { background: repeating-linear-gradient(135deg, #f1f2ef 0 6px, #e1e3de 6px 7px); }
.wb-ag-blok { position: absolute; left: 4px; right: 4px; background: var(--agenda-werk); border-radius: 5px; padding: 6px 8px; font-size: 12.5px; line-height: 1.25; color: var(--inkt); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.wb-ag-blok span { display: block; }
.wb-ag-sport { background: var(--agenda-sport); }
.wb-ag-workx { background: var(--geel); }
.wb-ag-blok:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 14px rgba(0,0,0,.14); z-index: 2; }
.js .wb-ag-blok { opacity: 0; transform: scale(.92) translateY(6px); transform-origin: top; }
.js .wb-ag.in .wb-ag-blok { opacity: 1; transform: none; transition: opacity .4s ease calc(var(--n) * 70ms), transform .45s var(--ease) calc(var(--n) * 70ms); }
.wb-ag-briefje { position: absolute; right: -20px; bottom: -46px; width: 300px; background: var(--geel); color: var(--inkt); border-radius: 18px; padding: 24px 26px; box-shadow: 0 18px 40px rgba(0,0,0,.28); transform: rotate(-2.5deg); }
.wb-ag-briefje strong { display: block; font-size: 26px; font-weight: 500; margin-bottom: 8px; }
.wb-ag-briefje ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 17px; line-height: 1.3; }
.js .wb-ag-briefje { opacity: 0; transform: translateY(30px) rotate(6deg) scale(.9); }
.js .wb-ag.in .wb-ag-briefje { opacity: 1; transform: rotate(-2.5deg); transition: opacity .4s ease 1.7s, transform .6s cubic-bezier(.3,1.5,.5,1) 1.7s; }
@media (max-width: 900px) { .wb-ag-briefje { right: 10px; bottom: -60px; width: 270px; } }
@media (prefers-reduced-motion: reduce) { .js .wb-ag-blok, .js .wb-ag-briefje { opacity: 1 !important; transform: none !important; transition: none !important; } }
.wb-ag-kop em { position: static; margin-top: 5px; align-self: stretch; }
.wb-ag-kop { height: 84px; }
.wb-ag-uren { margin-top: 84px; }
.wb-spot-tegel img[src*="kantoren/"] { max-height: 70%; }
.wb-spot-laag { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wb-spot-tegel { min-width: 0; }
.wb-spot-tegel img[src$=".svg"] { width: 100%; height: auto; max-height: 60%; }
@media (max-width: 900px) { .wb-spot-laag { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wb-deal-band { overflow: hidden; background: var(--tegel); position: relative; }
.wb-deal-samen .wb-deal-rail { display: flex; flex-wrap: nowrap; width: max-content; gap: 0; padding: 16px 0; background: none; border-radius: 0; animation: wbDealBand 26s linear infinite; will-change: transform; }
.wb-deal-rail li { flex: none; display: flex; align-items: center; height: 52px; margin-right: 44px; }
.wb-deal-band:hover .wb-deal-rail, .wb-deal-band:focus-within .wb-deal-rail, .wb-deal-band.buiten .wb-deal-rail { animation-play-state: paused; }
@keyframes wbDealBand { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wb-deal-samen .wb-deal-rail { animation: none; flex-wrap: wrap; width: auto; } .wb-deal-rail li[aria-hidden] { display: none; } }

.wb-deal-band::before, .wb-deal-band::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
.wb-deal-band::before { left: 0; background: linear-gradient(90deg, var(--tegel), rgba(244,244,240,0)); }
.wb-deal-band::after { right: 0; background: linear-gradient(-90deg, var(--tegel), rgba(244,244,240,0)); }
.wb-deal-label { margin-bottom: 14px; }

/* ---------- filmpjes als filmstrook: schuift open naar het eigen formaat, speelt ter plekke ---------- */
.wb-filmrij { display: flex !important; gap: clamp(10px, 1.4vw, 18px) !important; align-items: flex-start; }
.wb-filmrij > li { flex: 1 1 0; min-width: 0; transition: flex-grow .55s var(--ease); --h: clamp(380px, 38vw, 520px); }
/* open: de breedte volgt het formaat van de film (vierkant wordt breder dan staand) */
.wb-filmrij > li.open { flex-grow: calc(1 + var(--ar) * 1.2); }
/* boven 900px precies zo breed als de film bij de beeldhoogte, plus 2 x 22px perforatie: geen zwarte balken naast de video */
@media (min-width: 901px) {
  .wb-filmrij > li { transition: flex .55s var(--ease); }
  .wb-filmrij > li.open { flex: 0 1 calc(var(--h) * var(--ar) + 44px); }
  /* twee open (een met geluid + een aangewezen) op 901-1000px: de dichte stroken blijven een smalle strook in plaats van te verdwijnen */
  .wb-filmrij > li:not(.open) { min-width: 96px; }
}
.wb-strook { --gat: 7px; position: relative; display: block; width: 100%; padding: 0 22px; border: 0; background: var(--strook); cursor: pointer; font: inherit; color: var(--op-inkt-2); text-align: left; border-radius: 3px; box-shadow: 0 18px 34px -14px rgba(0,0,0,.45); }
/* perforatie links en rechts */
.wb-strook::before, .wb-strook::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, var(--strook-gat) 7px 17px, transparent 17px 24px);
  -webkit-mask: linear-gradient(90deg, transparent 6px, var(--zwart) 6px, var(--zwart) 16px, transparent 16px); mask: linear-gradient(90deg, transparent 6px, var(--zwart) 6px, var(--zwart) 16px, transparent 16px); }
.wb-strook::before { left: 0; } .wb-strook::after { right: 0; }
.wb-strook-beeld { position: relative; display: block; height: var(--h); overflow: hidden; background: var(--zwart); border-radius: 2px; }
.wb-strook-beeld img, .wb-strook-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb-strook-beeld video { opacity: 0; transition: opacity .35s; }
.wb-strook.loopt .wb-strook-beeld video { opacity: 1; }
.open .wb-strook-beeld video, .open .wb-strook-beeld img { object-fit: contain; }
.wb-strook-speel { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: var(--geel); box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .3s var(--ease), opacity .3s; z-index: 2; }
.wb-strook-speel::after { content: ""; position: absolute; left: 25px; top: 19px; border-left: 18px solid var(--inkt); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.wb-strook.loopt .wb-strook-speel { opacity: 0; transform: scale(.7); }
.wb-strook.met-geluid.gepauzeerd .wb-strook-speel { opacity: 1; transform: none; }
/* geluid-icoon: doorgestreept zolang het voorproefje stil is */
.wb-strook-geluid { position: absolute; right: 10px; top: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .3s; }
.wb-strook.loopt .wb-strook-geluid { opacity: 1; }
.wb-strook-geluid::before { content: ""; position: absolute; left: 8px; top: 10px; width: 5px; height: 10px; background: var(--wit); clip-path: polygon(0 25%, 45% 25%, 100% 0, 100% 100%, 45% 75%, 0 75%); width: 11px; }
.wb-strook-geluid::after { content: ""; position: absolute; left: 7px; top: 14px; width: 17px; height: 2px; background: var(--geel); transform: rotate(-45deg); }
.wb-strook.met-geluid .wb-strook-geluid::after { display: none; }
.wb-strook-voortgang { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); z-index: 2; opacity: 0; transition: opacity .3s; }
.wb-strook.loopt .wb-strook-voortgang { opacity: 1; }
.wb-strook-voortgang i { display: block; height: 100%; width: 0; background: var(--geel); }
.wb-strook-onder { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 2px 12px; font-size: 14px; }
.wb-strook-titel { font-weight: 500; color: var(--wit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-strook-tijd { color: var(--mos); font-variant-numeric: tabular-nums; font-size: 13px; }
.wb-strook:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }
@media (max-width: 900px) {
  .wb-filmrij { flex-wrap: wrap; }
  .wb-filmrij > li { flex: 1 1 calc(50% - 10px); --h: min(62vw, calc(100svh - 140px)); }
  .wb-filmrij > li.open { flex-basis: 100%; }
  /* een dichte strook die alleen op een regel overblijft, houdt zijn halve breedte (clamp = de helft van de gap) */
  .wb-filmrij > li:not(.open) { flex-grow: 0; flex-basis: calc(50% - clamp(5px, .7vw, 9px) - 1px); /* -1px: Firefox rondde de som soms boven 100% en zette de films onder elkaar */ }
}
@media (prefers-reduced-motion: reduce) { .wb-filmrij > li { transition: none; } }
.wb-filmrij > li { display: block !important; }
.wb-strook-beeld video { aspect-ratio: auto; border-radius: 0; background: transparent; }

/* ---------- de mix: één zin met een wisselend woord ---------- */

/* opening helemaal wit: geen kleurgrens door de tekst */
.wb-held { background: var(--wit); padding-bottom: clamp(56px, 7vw, 96px); }
.wb-getallen { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }

/* ---------- de boom achter het pand (linde in contourlijn) ---------- */
.wx-boom-vorm { fill: var(--wit); stroke: var(--boom-lijn); stroke-width: .9; stroke-linejoin: round; transition: fill .4s ease; }
.wx-boom-binnen { fill: none; stroke: var(--boom-lijn); stroke-width: .55; stroke-linecap: round; }
.wx-boom-stam { fill: none; stroke: var(--boom-lijn); stroke-width: .9; stroke-linecap: round; }
.wx-boom-kruin { transform-box: fill-box; transform-origin: 50% 100%; animation: wxWieg 7s ease-in-out infinite; }
@keyframes wxWieg { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1.2deg); } }
.held-pand svg[data-kb-hover="tuin"] .wx-boom-vorm { fill: var(--boom-hover); }
@media (prefers-reduced-motion: reduce) { .wx-boom-kruin { animation: none; } }

.wb-pand .held-pand svg { overflow: visible; clip-path: inset(calc((1 - var(--bouw, 1)) * 100% - 90px) -40px 0 -40px); }

/* boom nodigt uit: lampjes, dwarrelend blad, en reageert op de muis */
.held-pand { --kb-nabij: 0; }
.wx-boom-snoer { fill: none; stroke: var(--boom-lijn); stroke-width: .45; }
/* lampje (binnen.js): een groep met de gele bol en een lichtere kopie (.wx-boom-lamp-glans) die in opacity in- en
   uitvloeit. Zelfde beeld als de vroegere fill-animatie (#f9ff85 <-> #fdffd0, 3,6 s ease-in-out), maar alleen opacity. */
.wx-boom-lamp { fill: var(--geel); stroke: var(--boom-lijn); stroke-width: .45; opacity: calc(.55 + var(--kb-nabij) * .45); transition: opacity .4s; }
.wx-boom-lamp-glans { fill: var(--lamp-glans); opacity: 0; animation: wxLamp 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes wxLamp { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.held-pand svg .wx-boom-kruin { filter: drop-shadow(0 0 calc(var(--kb-nabij) * 6px) rgba(249,255,133,.9)); }
.held-pand svg[data-kb-hover="tuin"] .wx-boom-lamp { opacity: 1; }
.held-pand svg[data-kb-hover="tuin"] .wx-boom-kruin { animation-duration: 2.6s; }
.wx-boom-val { fill: var(--wit); stroke: var(--boom-lijn); stroke-width: .5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wxVal 11s ease-in infinite; animation-delay: calc(var(--v) * 5.5s + 3s); }
@keyframes wxVal { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 4% { opacity: 1; } 22% { opacity: 1; transform: translate(-10px, 34px) rotate(160deg); } 30% { opacity: 0; transform: translate(-4px, 46px) rotate(240deg); } 100% { opacity: 0; transform: translate(-4px, 46px) rotate(240deg); } }
@media (prefers-reduced-motion: reduce) { .wx-boom-lamp-glans, .wx-boom-val { animation: none; } .wx-boom-val { display: none; } }
/* buiten beeld stil op dezelfde stand (script.js zet .buiten-beeld op het pand) */
.buiten-beeld .wx-boom-kruin, .buiten-beeld .wx-boom-lamp-glans, .buiten-beeld .wx-boom-val { animation-play-state: paused; }

/* bij het opbouwen van het pand mag de boomkruin boven de tekening uitsteken */

.wb-pand.af .held-pand svg { clip-path: none; }

/* mobiel: niets mag breder worden dan het scherm */
.wb-deal .wrap > *, .wb-deal-kaart, .wb-deal-samen { min-width: 0; }
@media (max-width: 900px) {
  .wb-held .wrap, .wb-pand .wrap, .wb-uitjes > .wrap:first-child, .wb-vac-inhoud .wrap, .wb-sollicitatie .wrap, .wb-deal .wrap, .wb-spot .wrap, .wb-agenda .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .wb-strook-titel { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .wb-strook-onder { align-items: flex-start; }
}
@media (max-width: 560px) { .wb-strook-onder { flex-direction: column; gap: 2px; } }
@media (max-width: 900px) { .wb-pand .held-pand { width: min(82%, 400px); margin-right: auto; margin-left: 0; } .wb-pand-beeld { justify-content: flex-start; } }

/* ---------- opening: rustiger titel, foto mooier in beeld ---------- */
.wb-held { padding-block: clamp(110px, 12vw, 150px) clamp(64px, 8vw, 110px); overflow: hidden; }
.wb-held .wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); }
.wb-held h1 { line-height: 1.02; font-weight: 400; letter-spacing: -.015em; margin-bottom: 26px; }
.wb-held h1 strong { font-weight: 500; }
.wb-held .wb-markeer { background: linear-gradient(transparent 60%, var(--geel) 60%, var(--geel) 90%, transparent 90%); }
/* wachtstand vanaf het eerste beeld (staat in de HTML): beweging.js draait pas daarna en tekent de streep; zonder script of zonder beweging blijft hij gewoon staan */
@media (prefers-reduced-motion: no-preference) { html.js .wb-held .wb-markeer.bw-teken-wacht { background-repeat: no-repeat; background-size: 0% 100%; } }
.wb-intro { font-size: clamp(17px, 1.3vw, 19px); max-width: 28em; }

.wb-plekken { position: relative; z-index: 1; aspect-ratio: 5 / 4; border-radius: 4px 0 0 4px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.35); }
.wb-plekken img { transform: scale(1.08); transition: opacity 1.6s ease, transform 9s cubic-bezier(.2,.6,.3,1); }
.wb-plekken img.aan { transform: scale(1); }

@media (max-width: 900px) {

  .wb-plekken { aspect-ratio: 4 / 3.2; }
}

/* ---------- knoppen: rustiger en verfijnder ---------- */
.wb-knop { position: relative; isolation: isolate; overflow: hidden; padding: 15px 24px 14px; background: var(--inkt); color: var(--wit); border: 0; border-radius: 2px; box-shadow: none; font-weight: 500; font-size: 16px; letter-spacing: .01em; transition: color .35s var(--ease); }
.wb-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.wb-knop::after { display: inline-block; transition: transform .35s var(--ease); }
.wb-knop:hover { transform: none; box-shadow: none; }
/* aanwijzen alleen met een muis: op de telefoon bleef de knop na een tik in de hover-stand hangen (ronde 3) */
@media (hover: hover) { .wb-knop:hover { color: var(--inkt); } .wb-knop:hover::before { transform: scaleX(1); } .wb-knop:hover::after { transform: translateX(4px); } }
.wb-knop:active { transform: none; box-shadow: none; }
.wb-knop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.wb-knop-licht { background: transparent; color: var(--inkt); padding-inline: 4px; }

@media (hover: hover) { .wb-knop-licht:hover::before { background: var(--geel); } }
.wb-knoppen { align-items: center; gap: 14px 28px; }
.wb-sollicitatie .wb-knop, .wb-form .wb-knop { background: var(--geel); color: var(--inkt); box-shadow: none; }
.wb-sollicitatie .wb-knop::before { background: var(--wit); }
.wb-vac-held .wb-knop { background: var(--inkt); color: var(--wit); }
@media (max-width: 900px) {
  .wb-held .wrap { grid-template-columns: minmax(0, 1fr); }
  .wb-knoppen { gap: 10px 22px; }
}

/* ---------- opening: één foto over de volle breedte ---------- */
.wb-held-vol { position: relative; display: flex; align-items: center; min-height: min(88vh, 860px); padding-block: clamp(120px, 12vw, 160px) clamp(70px, 8vw, 110px); overflow: hidden; background: var(--op-inkt); }
.wb-held-vol .wrap { display: block; position: relative; z-index: 2; }
.wb-held-vol .wb-held-tekst { max-width: 560px; }
.wb-held-foto { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: var(--op-inkt-2); }
.wb-held-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.07); transition: opacity 1.8s ease, transform 10s cubic-bezier(.2,.6,.3,1); }
.wb-held-foto img.aan { opacity: 1; transform: scale(1); }
/* zachte witte verloop links, zodat de tekst rustig leesbaar blijft */
.wb-held-vol::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 28%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 66%); }

@media (max-width: 900px) {

  .wb-held-foto { margin-top: 30px; position: absolute; inset: 0; order: 0; aspect-ratio: auto; margin: 0; }

}
/* mobiel: ook een volle foto, tekst onderaan op een zacht wit verloop */
@media (max-width: 900px) {
  .wb-held-vol { flex-direction: row; padding-block: 120px 34px; background: var(--wit); padding-bottom: 28px; }

  .wb-held-vol .wrap { order: 0; }

}

@media (max-width: 380px) { .taal .wb-naar-site { display: none; } }
@media (max-width: 600px) {
  .wb-plakknop { transform: translateY(calc(100% + 40px)); }
  .wb-plakknop.zichtbaar { transform: none; }
}
@media (max-width: 600px) { body:has(.wb-plakknop.zichtbaar) .naarboven { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } }
/* spotlight: lichter voor de telefoon (kleiner masker, eigen laag) */
.wb-spot-kleur, .wb-spot-schaduw { will-change: mask-position, -webkit-mask-position, background; transform: translateZ(0); }
.wb-getallen strong, .wb-deal-getal strong, .wb-getallen strong span { font-variant-numeric: normal; font-feature-settings: normal; letter-spacing: -.01em; }

/* ---------- vraagformulier in het avondblok: donker, verfijnd ---------- */
.wb .contact.avond .formulier { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: clamp(28px, 3vw, 40px); gap: 0 clamp(32px, 4vw, 56px); }
.wb .contact.avond .formulier:not(.zweef) .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.wb .contact.avond .formulier:not(.zweef) textarea, .wb .contact.avond .formulier:not(.zweef) input { color: var(--wit); font-size: 17px; }
.wb .contact.avond .formulier:not(.zweef) ::placeholder { color: rgba(255,255,255,.32); }
.wb .contact.avond .formulier:not(.zweef) textarea { min-height: 190px; padding: 0 28px 0 0; border-right: 1px solid rgba(255,255,255,.12); }
@media (min-width: 861px) { .wb .contact.avond .formulier:not(.zweef) label:has(> textarea) { flex-direction: column; } }
.wb .contact.avond .formulier .velden { gap: 22px; }
.wb .contact.avond .formulier:not(.zweef) input { padding: 4px 0 12px; border-bottom: 1px solid rgba(255,255,255,.18); }
.wb .contact.avond .formulier:not(.zweef) input:focus { border-bottom-color: var(--geel); }
.wb .contact.avond .formulier:not(.zweef) textarea:focus { border-right-color: var(--geel); border-bottom-color: var(--geel); } /* zichtbare focus, ook op mobiel (lijn onder het veld) */
.wb .contact.avond .formulier:not(.zweef) input:focus-visible { box-shadow: 0 1.5px 0 var(--geel); }
.wb .contact.avond .formulier:not(.zweef) textarea:focus-visible { box-shadow: 1.5px 0 0 var(--geel); }
@media (max-width: 860px) { .wb .contact.avond .formulier:not(.zweef) textarea:focus-visible { box-shadow: 0 1.5px 0 var(--geel); } }
.wb .contact.avond .formulier .verstuur { position: relative; isolation: isolate; overflow: hidden; margin-top: 10px; padding: 14px 24px 13px; background: var(--geel); color: var(--inkt); text-transform: none; letter-spacing: .01em; font-size: 16px; font-weight: 500; border-radius: 2px; transition: color .35s var(--ease); }
.wb .contact.avond .formulier .verstuur::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wit); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.wb .contact.avond .formulier .verstuur:hover { background: var(--geel); transform: none; }
@media (hover: hover) { .wb .contact.avond .formulier .verstuur:hover::before { transform: scaleX(1); } }
.wb .contact.avond .formulier .verstuur svg { transition: transform .35s var(--ease); }
@media (hover: hover) { .wb .contact.avond .formulier .verstuur:hover svg { transform: translateX(4px); } }
.wb .contact.avond .formulier .melding { color: rgba(255,255,255,.55); }
.wb .contact.avond .formulier .melding.fout { color: var(--fout-op-inkt); } /* foutmelding op inkt: het lichte fouttoken (AA) */
.wb .contact.avond .formulier:not(.zweef) [aria-invalid="true"] { border-color: var(--fout-op-inkt); }
/* ook als het foute veld focus heeft (zoals .formulier in style.css en .wb-veld): rood wint van de gele focuslijn */
.wb .contact.avond .formulier:not(.zweef) input[aria-invalid="true"]:focus, .wb .contact.avond .formulier:not(.zweef) textarea[aria-invalid="true"]:focus { border-color: var(--fout-op-inkt); }
.wb .contact.avond .formulier:not(.zweef) input[aria-invalid="true"]:focus-visible { box-shadow: 0 1.5px 0 var(--fout-op-inkt); }
.wb .contact.avond .formulier:not(.zweef) textarea[aria-invalid="true"]:focus-visible { box-shadow: 1.5px 0 0 var(--fout-op-inkt); }
@media (max-width: 860px) { .wb .contact.avond .formulier:not(.zweef) textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 1.5px 0 var(--fout-op-inkt); } }
@media (max-width: 760px) {
  .wb .contact.avond .formulier:not(.zweef) textarea { border-right: 0; min-height: 130px; padding: 0 0 12px; margin-bottom: 22px; }
}

/* ---------- Waarom we hier werken: groepschat die vanzelf verder loopt ---------- */
.wb-chat { padding-block: clamp(72px, 9vw, 128px); background: var(--beige); }
.wb-chat .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.wb-chat-tekst p { color: var(--grijs); max-width: 22em; }
.wb-chat-mensen { display: flex; align-items: center; margin-top: clamp(24px, 3vw, 36px); }
.wb-chat-mensen img { width: 40px; height: 40px; margin-right: -14px; border-radius: 50%; border: 3px solid var(--beige); object-fit: cover; object-position: top; }
.wb-chat-mensen span { margin-left: 18px; font-size: 14px; font-weight: 500; color: var(--inkt); }
.wb-chat-scherm { width: 100%; max-width: 540px; justify-self: center; background: var(--tegel); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 40px 70px -40px rgba(0,0,0,.4); }
.wb-chat-kop { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--wit); border-bottom: 1px solid var(--beige); }
.wb-chat-av { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--geel); font-weight: 500; color: var(--inkt); }
.wb-chat-kop > div { flex: 1; min-width: 0; }
.wb-chat-kop strong { display: block; font-size: 16px; color: var(--inkt); line-height: 1.2; }
.wb-chat-status { display: block; font-size: 13px; min-height: 1.3em; transition: color .3s; }
.wb-chat-status.typt { color: var(--chat-typt); }
.wb-chat-venster { position: relative; height: clamp(440px, 52vh, 540px); overflow: hidden; }
.wb-chat-venster::before { content: ""; left: 0; right: 0; top: 0; height: 44px; z-index: 1; background: linear-gradient(var(--tegel), rgba(246,245,240,0)); pointer-events: none; }
.wb-chat-stroom { list-style: none; margin: 0; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.wb-chat-stroom > li { display: none; }
.wb-chat-stroom > li.zicht { display: flex; animation: wbBel .5s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes wbBel { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.wb-chat-vraag { align-self: flex-end; margin-top: 8px; }
.wb-chat-vraag p { margin: 0; color: var(--wit); font-size: 15px; line-height: 1.4; }
.wb-chat-msg { align-items: flex-end; gap: 8px; max-width: 88%; transform-origin: left bottom; }
.wb-chat-msg img, .wb-chat-typt img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top; }
.wb-chat-msg div { padding: 9px 14px 10px; background: var(--wit); border-radius: 18px 18px 18px 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.wb-chat-msg b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 500; }
.wb-chat-msg[data-wie="Erika"] b { color: var(--chat-erika); } .wb-chat-msg[data-wie="Wies"] b { color: var(--chat-wies); } .wb-chat-msg[data-wie="Emma"] b { color: var(--chat-emma); }
 .wb-chat-msg[data-wie="Kay"] b { color: var(--chat-kay); } .wb-chat-msg[data-wie="Alexander"] b { color: var(--chat-alexander); }
.wb-chat-msg p { margin: 0; font-size: 15px; line-height: 1.42; color: var(--inkt); }
.wb-chat-typt { align-items: flex-end; gap: 8px; }
.wb-chat-bol { display: flex; gap: 4px; padding: 13px 15px; background: var(--wit); border-radius: 18px 18px 18px 4px; }
.wb-chat-bol i { width: 7px; height: 7px; border-radius: 50%; background: var(--steen-licht); animation: wbTypt 1.2s ease-in-out infinite; }
.wb-chat-bol i:nth-child(2) { animation-delay: .15s; } .wb-chat-bol i:nth-child(3) { animation-delay: .3s; }
.wb-chat-typt.jij { align-self: flex-end; }  .wb-chat-typt.jij .wb-chat-bol { background: var(--chat-bol-jij); } .wb-chat-typt.jij .wb-chat-bol i { background: var(--steen-donker); }
.wb-chat-slot { justify-content: center; padding-top: 10px; }
@keyframes wbTypt { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (max-width: 900px) {
  .wb-chat .wrap { grid-template-columns: minmax(0, 1fr); }
  .wb-chat-venster { height: min(460px, calc(100svh - 60px - 78px - 96px)); min-height: 300px; }
  .wb-chat-scherm { justify-self: stretch; max-width: none; }
}
/* zonder beweging: gewoon alles tonen, met scroll */
@media (prefers-reduced-motion: reduce) {
  .wb-chat-venster { overflow: auto; }

  .wb-chat-stroom > li:not(.wb-chat-typt) { display: flex; animation: none; }
}

/* ---------- film: optie 3 (kaartje in de opening) en 1+2 (groot blok met voorproefje) ---------- */

.wb-filmkaartje { position: absolute; z-index: 3; right: max(var(--rand), calc((100% - var(--breed)) / 2)); bottom: clamp(28px, 4vw, 48px); display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; background: rgba(255,255,255,.94); border: 0; border-radius: 6px; box-shadow: 0 16px 40px -18px rgba(0,0,0,.45); cursor: pointer; font: inherit; text-align: left; transition: transform .35s var(--ease); }
.wb-filmkaartje:hover { transform: translateY(-3px); }
/* zwaardere schaduw bij hover via opacity (geen box-shadow-animatie) */
.wb-filmkaartje::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 22px 46px -18px rgba(0,0,0,.5); opacity: 0; transition: opacity .35s; pointer-events: none; }
@media (min-width: 901px) { .wb-filmkaartje:hover::after { opacity: 1; } }

.wb-fk-beeld { position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: var(--inkt); }
.wb-fk-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wb-filmkaartje:hover .wb-fk-beeld img { transform: scale(1.06); }
.wb-fk-beeld i { position: absolute; left: 50%; top: 50%; border-radius: 50%; background: var(--geel); }
.wb-fk-beeld i::after { content: ""; position: absolute; border-left: 9px solid var(--inkt); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.wb-fk-tekst strong { display: block; font-size: 15px; font-weight: 500; color: var(--inkt); }
.wb-fk-tekst span { font-size: 13px; color: var(--zacht); }
.wb-filmkaartje.speelt { display: none; }

@media (max-width: 900px) {
  .wb-filmkaartje { right: 16px; bottom: auto; top: 96px; padding: 8px 14px 8px 8px; }

}

/* 2: telefoon */

/* ---------- Groeien bij Workx: basis ---------- */
.wb-lb { padding-block: clamp(64px, 8vw, 110px); border-top: 1px solid var(--lijn); }

.wb-lb-intro { max-width: 34em; margin: 0 0 clamp(24px, 3vw, 36px); color: var(--grijs); }

/* ---------- Groeien bij Workx: drie combinaties ---------- */
.wb-lb-noot { margin-top: 18px; font-size: 14px; color: var(--zacht); }
.wb-lb-kies { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; }
.wb-lb-kies > span { margin-right: 6px; font-size: 14px; color: var(--zacht); }
.wb-lb-kies button { padding: 9px 16px; border: 1px solid var(--lijn); border-radius: 30px; background: var(--wit); font: inherit; font-size: 15px; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.wb-lb-kies button:hover { border-color: var(--inkt); }
.wb-lb-kies button[aria-pressed="true"] { border-color: var(--inkt); }

/* C: meerdere voorbeelden bij dezelfde instap naast elkaar */

@keyframes wbKaartIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Groeien bij Workx: drie groei-varianten ---------- */
.wb-gr-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.wb-gr-kaart { display: none; margin: 0; padding: 22px 24px 24px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; }
.wb-gr-kaart.aan { display: block; animation: wbKaartIn .5s var(--ease) both; }
.wb-gr-wie { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; margin-bottom: 22px; }
.wb-gr-wie img { width: 56px; height: 56px; object-fit: cover; }
.wb-gr-wie b { display: block; font-size: 17px; font-weight: 500; color: var(--inkt); }
.wb-gr-wie span { display: block; font-size: 14px; line-height: 1.45; color: var(--grijs); }

/* 1: reizende groeilijn */
.wb-g1 { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-top: 62px; }
.wb-g1-lijn { position: absolute; left: calc(100% / 14); right: calc(100% / 14); height: 4px; background: var(--op-inkt-2); border-radius: 2px; }
.wb-g1-vol { position: absolute; top: 0; bottom: 0; left: calc(var(--van) / 6 * 100%); width: 0; background: var(--geel-diep); border-radius: 2px; }
.wb-g1-tree { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.wb-g1-tree i { width: 18px; height: 18px; border-radius: 50%; background: var(--wit); border: 2px solid var(--ladder-lijn); transition: border-color .3s, background .3s; transition-delay: calc((var(--i) - var(--van)) * .55s + .3s); }
.wb-g1-tree b { margin-top: 6px; font-weight: 400; line-height: 1.2; }
.wb-g1-tree em { font-style: normal; color: var(--zacht); }
.wb-g1-reiziger { position: absolute; left: calc((var(--van) + .5) / 7 * 100%); width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--wit), 0 0 0 5px var(--inkt), 0 8px 16px rgba(0,0,0,.25); z-index: 2; }
.wb-gr-kaart.speel .wb-g1-vol { width: calc((var(--tot) - var(--van)) / 6 * 100%); transition: width calc((var(--tot) - var(--van)) * .55s + .2s) cubic-bezier(.45,0,.25,1) .3s; }
.wb-gr-kaart.speel .wb-g1-reiziger { left: calc((var(--tot) + .5) / 7 * 100%); transition: left calc((var(--tot) - var(--van)) * .55s + .2s) cubic-bezier(.45,0,.25,1) .3s; }
.wb-gr-kaart.speel .wb-g1-tree.op i { border-color: var(--inkt); background: var(--geel); }
.wb-gr-kaart.speel .wb-g1-tree.op b { color: var(--inkt); font-weight: 500; }
.wb-g1-tree.op b { transition: color .3s; transition-delay: calc((var(--i) - var(--van)) * .55s + .3s); }

/* 3: groeiende tijdlijn (van onder naar boven) */

@media (max-width: 600px) {

  .wb-g1-reiziger, .wb-g2-klimmer { width: 32px; height: 32px; margin-left: -16px; }
}
@media (prefers-reduced-motion: reduce) { .wb-gr-kaart * { transition: none !important; animation: none !important; } }
/* optie 1 en 2: één brede kaart per rij, tekst links, groei rechts */
.wb-gr1 .wb-gr-kaarten { grid-template-columns: minmax(0, 1fr); }
.wb-gr1 .wb-gr-kaart.aan { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: center; }
.wb-gr1 .wb-gr-wie { margin-bottom: 0; }
.wb-g1-tree b { font-size: 12.5px; } .wb-g1-tree em { font-size: 12px; }

@media (max-width: 900px) {
  .wb-gr1 .wb-gr-kaart.aan { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.wb-g1-lijn { top: 69px; }
.wb-g1-reiziger { top: 4px; }
.wb-g1-reiziger::after { content: ""; }
@media (max-width: 600px) { .wb-g1 { padding-top: 48px; } .wb-g1-lijn { top: 55px; } .wb-g1-reiziger { top: 6px; } .wb-g1-tree b, .wb-g1-tree em { font-size: 8.5px; } }
/* mobiel: filmkaartje onder de knoppen in plaats van over de foto */
@media (max-width: 900px) {
  .wb-held-vol .wb-filmkaartje { position: relative; z-index: 2; top: auto; right: auto; bottom: auto; align-self: flex-start; box-shadow: 0 8px 24px -14px rgba(0,0,0,.35); border: 1px solid var(--lijn); }
}
@media (max-width: 900px) {
  .wb-held-vol { flex-wrap: wrap; align-content: flex-end; }
  .wb-held-vol > .wrap { flex: 0 0 100%; order: 1; }
  .wb-held-vol .wb-filmkaartje { order: 3; margin: 20px var(--rand) 0; }
}

/* ---------- Dit biedt Workx: vijf bewegende varianten ---------- */
.wb-bo { padding-block: clamp(64px, 8vw, 110px); border-top: 1px solid var(--lijn); }
.wb-bo .wb-kop { margin-bottom: clamp(26px, 3vw, 40px); }

/* 2: lijst met wisselend beeld */

.wb-bo2-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.wb-bo2-lijst li { position: relative; border-bottom: 1px solid var(--lijn); }
.wb-bo2-lijst button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.wb-bo2-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--beige); transition: background .3s, color .3s; flex: none; }
.wb-bo2-ico svg { width: 18px; height: 18px; }
.wb-bo2-lijst strong { font-size: 18px; font-weight: 400; color: var(--grijs); transition: color .3s, font-weight .3s; }
.wb-bo2-lijst p { max-height: 0; overflow: hidden; margin: 0 0 0 52px; font-size: 15px; color: var(--grijs); transition: max-height .45s ease, margin .45s ease; }
.wb-bo2-lijst li.aan strong { color: var(--inkt); font-weight: 500; }
.wb-bo2-lijst li.aan .wb-bo2-ico { background: var(--inkt); color: var(--geel); }
.wb-bo2-lijst li.aan p { margin-bottom: 14px; }
.wb-bo2-tijd { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--inkt); }
.wb-bo2-lijst li.aan .wb-bo2-tijd { animation: wbBo2 4.5s linear forwards; }
.wb-bo2.pauze .wb-bo2-tijd { animation-play-state: paused; }
@keyframes wbBo2 { to { width: 100%; } }

/* 5: grote woorden, één tegelijk */

@media (prefers-reduced-motion: reduce) {

  .wb-bo4-klok i, .wb-bo4-pins i, .wb-bo4-bol svg, .wb-bo2-tijd { animation: none !important; }
}

/* Dit biedt Workx: lijst zonder foto, in twee kolommen naast elkaar */
.wb-bo2.zonder-beeld .wb-bo2-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; align-items: start; }
.wb-bo2.zonder-beeld .wb-bo2-lijst li { border-top: 1px solid var(--lijn); border-bottom: 0; break-inside: avoid; }
.wb-bo2.zonder-beeld .wb-bo2-lijst strong { font-size: 19px; }
@media (max-width: 760px) { .wb-bo2.zonder-beeld .wb-bo2-lijst { grid-template-columns: minmax(0, 1fr); } }

/* Dit biedt Workx: twee onafhankelijke kolommen (geen gaten als er één openklapt) */
.wb-bo2.zonder-beeld .wb-bo2-lijst { display: block; columns: 2; column-gap: clamp(32px, 5vw, 72px); }

.wb-bo2.zonder-beeld .wb-bo2-lijst li:nth-child(7) { break-before: column; }
@media (max-width: 760px) { .wb-bo2.zonder-beeld .wb-bo2-lijst li:nth-child(7) { break-before: auto; } }
@media (max-width: 760px) { .wb-bo2.zonder-beeld .wb-bo2-lijst { columns: 1; } }

/* 1: markeerstift die over de kop trekt */
.wb-bv1 .wb-bo2-lijst strong { background: linear-gradient(transparent 58%, var(--geel) 58%, var(--geel) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; }
.wb-bv1 .wb-bo2-lijst li.aan strong { background-size: 100% 100%; transition: background-size .9s cubic-bezier(.65,0,.25,1); }
.wb-bv1 .wb-bo2-tijd { display: none; }
.wb-bv1 .wb-bo2-lijst li.aan .wb-bo2-ico { background: var(--geel); color: var(--inkt); }

/* 2: typemachine */

/* 5: iconen tekenen zichzelf; afgeronde punten krijgen een vinkje */

@keyframes wbTeken { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }

/* Dit biedt Workx: link in de uitleg, en de arbeidsvoorwaarden als eigen onderdeel */
.wb-bo2-lijst p a { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--geel-diep); text-underline-offset: 3px; white-space: nowrap; }
.wb-bo2-lijst li.aan p { max-height: 170px; padding-bottom: 8px; margin-bottom: 6px; } /* ruimte voor het tikvlak van de link (zelfde 14px tussenruimte) */
.wb-bo2-lijst p { transition: max-height .45s ease, margin .45s ease, padding .45s ease; }
.wb-loon { margin-top: clamp(48px, 6vw, 80px); }
.wb-loon-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 22px; font-size: 13px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt); }
.wb-loon-kop span { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 15px; color: var(--grijs); }
.wb-loon-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.wb-loon-rij li { position: relative; padding: 22px 24px 0 0; }
.wb-loon-rij li + li { padding-left: 24px; }
.wb-loon-rij li + li::before { content: "+"; position: absolute; left: -7px; top: 5px; font-size: 16px; line-height: 1; color: var(--grijs); background: var(--wit, var(--wit)); padding: 0 3px; z-index: 1; }
.wb-loon-balk { position: absolute; left: 0; right: 0; top: 10px; height: 6px; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.65,0,.25,1) calc(var(--i) * .35s); }
.wb-loon-rij li:first-child .wb-loon-balk { background: var(--inkt); }
.wb-loon.zichtbaar .wb-loon-balk { transform: none; }
.wb-loon-rij strong { display: block; font-size: 18px; font-weight: 500; color: var(--inkt); margin-bottom: 6px; }
.wb-loon-rij p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--grijs); }
@media (max-width: 760px) {
  .wb-loon-rij { grid-template-columns: minmax(0, 1fr); }
  .wb-loon-rij li, .wb-loon-rij li + li { padding: 20px 0 14px; }
  .wb-loon-rij li + li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wb-loon-balk { transform: none; transition: none; } }

/* ---------- Arbeidsvoorwaarden: vijf opties ---------- */
.wb-loon + .wb-loon { padding-top: clamp(48px, 6vw, 80px); border-top: 1px dashed var(--lijn); }

.wb-loon1 .wb-loon-rij { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wb-loon1 .wb-loon-rij li { padding-right: 18px; }
.wb-loon1 .wb-loon-rij li + li { padding-left: 0; }
.wb-loon1 .wb-loon-rij strong { font-size: 17px; line-height: 1.25; }
@media (min-width: 1101px) { .wb-loon1 .wb-loon-rij strong { min-height: calc(2 * 1.25em); } }
@media (max-width: 1100px) and (min-width: 761px) { .wb-loon1 .wb-loon-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .wb-loon1 .wb-loon-rij li:nth-child(4)::before { display: none; } .wb-loon1 .wb-loon-rij li:nth-child(4) { padding-left: 0; } }

/* 5: drie groepen */

@media (prefers-reduced-motion: reduce) { .wb-loon * { transition: none !important; } }
@media (max-width: 760px) {
  .wb-loon1 .wb-loon-rij { grid-template-columns: minmax(0, 1fr); }
  .wb-loon1 .wb-loon-rij li, .wb-loon1 .wb-loon-rij li + li { padding: 20px 0 14px; }
}

/* ---------- Arbeidsvoorwaarden optie 1: drie actievere uitwerkingen ---------- */
.wb-lv { --duur: 2.2s; }
.wb-lv .wb-loon-rij li { cursor: default; }
.wb-lv .wb-loon-rij li strong, .wb-lv .wb-loon-rij li p { transition: color .4s, opacity .4s; }

.wb-lv.loopt .wb-loon-rij li:not(.aan) strong { color: var(--grijs); }
.wb-lv .wb-loon-balk { transform: none; background: var(--beige); overflow: hidden; transition: none; }
.wb-lv .wb-loon-rij li:first-child .wb-loon-balk { background: var(--beige); }
.wb-lv .wb-loon-balk b { position: absolute; inset: 0; background: var(--geel-diep); transform: scaleX(0); transform-origin: left; }
.wb-lv .wb-loon-rij li:first-child .wb-loon-balk b { background: var(--inkt); }
.wb-lv .wb-loon-rij li.gehad .wb-loon-balk b { transform: none; }
.wb-lv .wb-loon-rij li.aan .wb-loon-balk b { animation: wbLvVul var(--duur) linear forwards; }
.wb-lv.pauze .wb-loon-rij li.aan .wb-loon-balk b { animation: none; transform: none; }
@keyframes wbLvVul { to { transform: none; } }
.wb-lv-ico { display: grid; place-items: center; margin: 4px 0 12px; border-radius: 50%; background: var(--beige); color: var(--grijs); transition: background .4s, color .4s, transform .5s cubic-bezier(.3,1.4,.5,1); }
.wb-lv-ico svg { width: 18px; height: 18px; }
.wb-lv .wb-loon-rij li.aan .wb-lv-ico { background: var(--inkt); color: var(--geel); }
.wb-lv .wb-loon-rij li.gehad .wb-lv-ico { background: var(--geel); color: var(--inkt); }
.wb-lv .wb-loon-rij li.aan .wb-lv-ico svg * { stroke-dasharray: 80; animation: wbTeken 1s ease forwards; }
.wb-lv .wb-loon-rij li + li::before { transition: transform .4s, color .4s; }
.wb-lv .wb-loon-rij li.aan::before { color: var(--inkt); transform: scale(1.4); }

/* 1c: een punt loopt over één doorlopend spoor en laat geel achter zich */
.wb-lv-baan { position: relative; }

@media (prefers-reduced-motion: reduce) { .wb-lv .wb-loon-balk b { transform: none; animation: none !important; }  }

/* ---------- Vacatures: vijf opties ---------- */
.wb-vo { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.wb-vo + .wb-vo { border-top: 1px dashed var(--lijn); }
.wb-vo-kopregel { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.wb-vo-kopregel .wb-kop { margin: 0; }
.wb-nu-open { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid currentColor; font-size: 14px; letter-spacing: .02em; }
.wb-nu-open i { position: relative; border-radius: 50%; background: var(--groen-open); }
.wb-nu-open i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--groen-open); animation: wbOpen 1.8s ease-out infinite; }
@keyframes wbOpen { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.wb-nu-open.buiten-beeld i::after { animation-play-state: paused; }
.wb-vo svg { width: 1.1em; height: 1.1em; flex: none; }

/* 5: instappen op de trap */

@media (prefers-reduced-motion: reduce) { .wb-vo li, .wb-vo img { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }

/* ---------- vacaturepagina: meer beeld en beweging ---------- */
.wb-vac-held { position: relative; overflow: hidden; }
.wb-vac-held .wrap { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

.wb-vh-boven { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.wb-vh-boven .wb-nu-open { margin: 0; }
.wb-vac-held h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.wb-vac-held h1 .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.1s + var(--i) * .09s); }
.wb-vac-held.zichtbaar h1 .w > span { transform: none; }
.wb-vac-held .wb-intro { font-size: clamp(17px, 1.4vw, 20px); opacity: .001; /* onzichtbaar, maar telt zo meteen mee voor de LCP */ transform: translateY(14px); transition: opacity .7s .5s, transform .7s var(--ease) .5s; }
.wb-vac-held.zichtbaar .wb-intro { opacity: 1; transform: none; }
.wb-vh-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.wb-vh-knop { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px; background: var(--inkt); font-size: 17px; font-weight: 500; text-decoration: none; overflow: hidden; isolation: isolate; transition: gap .3s, color .3s; }
.wb-vh-knop svg { width: 20px; height: 20px; }
/* knoppennorm (30 okt): vulling van links, vaste afstand tekst→pijl, alleen de pijl schuift 4 px; wit omdat de held geel is */
.wb-vh-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wit); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
@media (hover: hover) { .wb-vh-knop:hover { color: var(--inkt); } .wb-vh-knop:hover::before { transform: scaleX(1); } }
.wb-vh-knop svg { transition: transform .35s var(--ease); }
@media (hover: hover) { .wb-vh-knop:hover svg { transform: translateX(4px); } }
.wb-vh-knop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-100%); animation: wbGlans 4s ease-in-out 1.5s infinite; }
@keyframes wbGlans { 30%, 100% { transform: translateX(100%); } }
.wb-vh-zacht { color: inherit; font-size: 15px; text-underline-offset: 4px; }

/* wat ga je doen: grote nummers, een lijn die meeloopt */
.wb-vi .wrap { align-items: start; }
.wb-vi h2 { font-size: clamp(28px, 3vw, 40px); }

/* wie zoeken we: zelf aanvinken */
.wb-vi-hint { margin: -10px 0 18px; font-size: 15px; color: var(--grijs); }
.wb-vi-vink { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wb-vi-vink li { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); transition-delay: calc(var(--i) * .08s); }
.wb-vi-zoeken.zichtbaar .wb-vi-vink li { opacity: 1; transform: none; }
.wb-vi-vink button { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid var(--lijn); background: var(--wit); font: inherit; text-align: left; color: var(--tekst); cursor: pointer; transition: border-color .3s, background .3s, transform .2s; }
.wb-vi-vink button:hover { border-color: var(--inkt); }
.wb-vi-vink button:active { transform: scale(.98); }
.wb-vi-vink .vak { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--inkt); background: var(--wit); transition: background .3s; }
.wb-vi-vink .vak svg { width: 18px; height: 18px; fill: none; stroke: var(--inkt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s ease; }
.wb-vi-vink button[aria-pressed="true"] { border-color: var(--inkt); background: var(--vink-aan); }
.wb-vi-vink button[aria-pressed="true"] .vak { background: var(--geel); }
.wb-vi-vink button[aria-pressed="true"] .vak svg { stroke-dashoffset: 0; }
.wb-vi-meter { margin-top: 20px; }
.wb-vi-meter .balk { height: 8px; background: var(--beige); overflow: hidden; }
.wb-vi-meter .balk i { display: block; height: 100%; background: var(--inkt); transform: scaleX(var(--vol, 0)); transform-origin: left; transition: transform .5s cubic-bezier(.3,1.3,.5,1), background .3s; }

.wb-vi-meter p { margin: 10px 0 0; font-size: 15px; color: var(--grijs); }
.wb-vi-meter a { display: inline-block; margin-top: 12px; padding: 14px 20px; background: var(--geel); color: var(--inkt); font-weight: 500; text-decoration: none; border: 1.5px solid var(--inkt); box-shadow: 3px 3px 0 var(--inkt); animation: wbRaak .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes wbRaak { from { transform: scale(.85); opacity: 0; } }

/* hier kom je te werken */

/* sollicitatiestappen: tellen af naar je eerste dag */
:where(html.js) .wb-mini-stappen li { opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s var(--ease); } /* alleen met JS verborgen (zonder JS of als werken-bij.js niet laadt blijven ze zichtbaar); :where houdt de specificiteit gelijk */
.wb-mini-stappen li:nth-child(2) { transition-delay: .25s; } .wb-mini-stappen li:nth-child(3) { transition-delay: .5s; }
.wb-mini-stappen.zichtbaar li { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .wb-vac-held .wrap { grid-template-columns: minmax(0, 1fr); }

}

@media (prefers-reduced-motion: reduce) {
  .wb-vh-knop::after, .wb-vi-gezichten .jij a { animation: none; }
  .wb-vac-held h1 .w > span, .wb-vac-held .wb-intro, .wb-vh-foto img, .wb-vi-punten li, .wb-vi-vink li, .wb-vi-gezichten li, .wb-mini-stappen li { transition: none; opacity: 1; transform: none; clip-path: none; }
}

/* vacaturepagina, korte versie: eisen + compact Dit biedt Workx */
.wb-vi-eisen .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.wb-vi.wb-vi-eisen h2.wb-kop { margin-bottom: 28px; } /* 28px van kop tot inhoud, net als 'Dit biedt Workx' */
.wb-vi-eisen .wb-vi-hint { margin: 0 0 18px; }
.wb-vi-zoeken-kop { position: sticky; top: 100px; }
.wb-vi-eisen .wb-vi-vink li { opacity: 1; transform: none; }
.wb-bk { padding-block: clamp(56px, 7vw, 96px); }
.wb-bk .wb-kop { margin-bottom: 28px; }
.wb-bk-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
/* 11 kaarten: de laatste over twee kolommen, zodat de laatste rij in 4, 3 en 2 kolommen vol is */
@media (min-width: 600px) { .wb-bk-raster > li:last-child { grid-column: span 2; } }
.wb-bk-raster li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; transition-delay: calc(var(--i) * .05s); }
:where(html.js) .wb-bk-raster li { opacity: 0; transform: translateY(10px); } /* alleen met JS verborgen, zie .wb-mini-stappen */
.wb-bk.zichtbaar .wb-bk-raster li { opacity: 1; transform: none; }

.wb-bk-raster .wb-bo2-ico { flex: none; transition: background .3s, color .3s; }
.wb-bk-raster li:hover .wb-bo2-ico { background: var(--inkt); color: var(--geel); }
.wb-bk-raster strong { font-size: 17px; font-weight: 500; color: var(--inkt); margin: 6px 0 4px; }
.wb-bk-raster p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--grijs); }
.wb-bk-raster p a { color: var(--inkt); text-decoration-color: var(--geel-diep); text-underline-offset: 3px; white-space: nowrap; } /* pijltje blijft bij 'workxin.nl' */
.wb-bk .wb-loon { margin-top: 40px; padding: 24px clamp(16px, 2.5vw, 28px); background: var(--wit); }
.wb-bk .wb-lv-ico { width: 28px; height: 28px; margin-bottom: 8px; }
.wb-bk .wb-lv-ico svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .wb-vi-eisen .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .wb-vi-zoeken-kop { display: contents; } .wb-vi-eisen .wb-vi-meter { order: 2; } } /* meter en knop onder de vinklijst, zodat je ze ziet na het aanvinken */
@media (prefers-reduced-motion: reduce) { .wb-bk-raster li { opacity: 1; transform: none; } }
.wb-vi-meter a[hidden] { display: none; }
@media (max-width: 760px) {
  .wb-bk-raster { gap: 6px; }
  .wb-bk-raster li { padding: 12px 14px; }
  .wb-bk-raster strong { margin-top: 4px; }
  .wb-bk .wb-loon { padding-bottom: 10px; } /* plus 14px li-padding = 24px, gelijk aan de bovenkant; iconen staan er net als op werken-bij gewoon bij */
}

/* ---------- Vacatures: vijf rustige varianten op paneel + lijst ---------- */
.wb-vm .wb-nu-open { font-size: 13px; padding: 6px 14px; }
.wb-vm svg { width: 18px; height: 18px; flex: none; }
.wb-vm .chip { display: inline-block; text-transform: uppercase; line-height: 1.4; }
.wb-vm .paneel { display: grid; }
.wb-vm .dia { grid-area: 1 / 1; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .18s, transform .3s var(--ease), visibility 0s .18s; }
.wb-vm .dia.aan { opacity: 1; visibility: visible; transform: none; transition: opacity .3s .16s, transform .45s var(--ease) .16s, visibility 0s; } /* eerst de oude weg, dan de nieuwe: nooit twee teksten door elkaar */
.wb-vm .dia .boven { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; font-size: 14px; color: var(--grijs); }
.wb-vm .dia h3 { margin: 0 0 10px; font-size: clamp(26px, 2.3vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--inkt); }
.wb-vm .dia .z { margin: 0 0 18px; max-width: 34em; font-size: 16px; color: var(--grijs); }
.wb-eis { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.wb-eis li { position: relative; padding-left: 26px; font-size: 15px; color: var(--tekst); }
.wb-eis li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 12px; height: 7px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); }
.wb-vm .knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; }
.wb-vk-knop { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--inkt); color: var(--wit); font-size: 15px; font-weight: 500; text-decoration: none; transition: color .3s; }
/* knoppennorm (30 okt): geel schuift van links in, vaste afstand tekst→pijl, alleen de pijl schuift 4 px (zoals .wb-knop) */
.wb-vk-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.wb-vk-knop svg { transition: transform .35s var(--ease); }
@media (hover: hover) { .wb-vk-knop:hover, a:hover > .wb-vk-knop { color: var(--inkt); } .wb-vk-knop:hover::before, a:hover > .wb-vk-knop::before { transform: scaleX(1); } .wb-vk-knop:hover svg, a:hover > .wb-vk-knop svg { transform: translateX(4px); } }
.wb-vm .zacht { font-size: 15px; color: inherit; text-underline-offset: 4px; text-decoration-color: var(--lijn); }
.wb-vm .zacht:hover { text-decoration-color: currentColor; }

/* de lijst om te kiezen */
.wb-vm-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.wb-vm .kiezer { list-style: none; margin: 0; padding: 0; }
.wb-vm-rij .kiezer { display: flex; flex-direction: column; border-top: 1px solid var(--lijn); }
.wb-vm-rij .kiezer li { flex: 1; border-bottom: 1px solid var(--lijn); }
.wb-vm-rij .kiezer a { position: relative; display: flex; align-items: center; gap: 16px; height: 100%; min-height: 72px; padding: 12px 10px; color: var(--grijs); text-decoration: none; transition: background .3s, color .3s; }
.wb-vm-rij .kiezer .stip { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.12); transition: transform .4s cubic-bezier(.3,1.5,.5,1); }
.wb-vm-rij .kiezer .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wb-vm-rij .kiezer b { font-size: 17px; font-weight: 400; color: var(--inkt); }
.wb-vm-rij .kiezer small { font-size: 14px; }
.wb-vm-rij .kiezer a > svg { opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .35s var(--ease); }
.wb-vm-rij .kiezer li.aan a { background: rgba(0,0,0,.025); }
.wb-vm-rij .kiezer li.aan b { font-weight: 500; }
.wb-vm-rij .kiezer li.aan .stip { transform: scale(1.4); }
.wb-vm-rij .kiezer li.aan a > svg, .wb-vm-rij .kiezer a:hover > svg { opacity: 1; transform: none; color: var(--inkt); }
.wb-vm .tijd { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--inkt); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.wb-vm.loopt .kiezer li.aan .tijd { animation: wbLvVul 5s linear forwards; }
.wb-vm.pauze .kiezer li.aan .tijd { animation: none; transform: scaleX(0); }

/* 1: wit paneel met een kleurrand */
.wb-vm1 .paneel { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek, 14px); box-shadow: 0 24px 40px -32px rgba(0,0,0,.35); overflow: hidden; }
.wb-vm1 .dia { box-shadow: inset 6px 0 0 var(--accent); }
.wb-vm1 .dia[style*="#f9ff85"] { box-shadow: inset 6px 0 0 var(--geel-diep); }

/* 5: tabs met een vacaturekaart */

@media (max-width: 900px) {
  .wb-vm-rij { grid-template-columns: minmax(0, 1fr); }
  .wb-vm-rij .paneel { order: -1; }
  .wb-vm-rij .kiezer a { min-height: 60px; }

}
@media (prefers-reduced-motion: reduce) { .wb-vm .dia { transition: none; } }

/* vacaturepagina, Dit biedt Workx: een licht dat langs de tegels loopt */
.wb-bk { background: var(--wit); }
.wb-bk-raster li { position: relative; overflow: hidden; background: var(--raster-vlak); border: 1px solid var(--lijn); transition: opacity .4s, transform .5s var(--ease), box-shadow .4s, background .4s, border-color .4s; }
.wb-bk-raster li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--geel-diep); transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.65,0,.25,1); }
.wb-bk-raster strong { display: inline; background: linear-gradient(transparent 60%, var(--geel) 60%, var(--geel) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size .7s cubic-bezier(.65,0,.25,1); }
.wb-bk-raster li > div > strong + p { margin-top: 6px; }
.wb-bk-raster li > div { padding-top: 6px; }
:where(html.js) .wb-bk-raster .wb-bo2-ico svg * { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1.1s ease; transition-delay: calc(.2s + var(--i) * .08s); }
.wb-bk.zichtbaar .wb-bk-raster .wb-bo2-ico svg * { stroke-dashoffset: 0; }
.wb-bk-raster li.aan { background: var(--wit); border-color: var(--inkt); box-shadow: 0 14px 26px -18px rgba(0,0,0,.4); transform: translateY(-3px); }
.wb-bk-raster li.aan::before { transform: none; }
.wb-bk-raster li.aan strong { background-size: 100% 100%; }
.wb-bk-raster li.aan .wb-bo2-ico { background: var(--inkt); color: var(--geel); }
.wb-bk-raster li.aan .wb-bo2-ico svg * { animation: wbTeken .9s ease; }
.wb-bk-raster li:hover { box-shadow: 0 14px 26px -18px rgba(0,0,0,.4); }
.wb-bk .wb-loon { border: 1px solid var(--lijn); }
@media (prefers-reduced-motion: reduce) { .wb-bk-raster .wb-bo2-ico svg * { stroke-dashoffset: 0; transition: none; } .wb-bk-raster li.aan .wb-bo2-ico svg * { animation: none; } }

/* vacaturepagina: de lunchtafel in de tuin als achtergrond, met een zacht wit verloop */
.wb-vac-held { display: flex; align-items: center; color: var(--inkt); }
.wb-vac-held .wrap { display: block; }
.wb-vh-tekst { max-width: 600px; }
.wb-vh-achter { position: absolute; inset: 0; z-index: 0; }
.wb-vh-achter img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; opacity: .001; transform: scale(1.07); transition: opacity 1.6s ease, transform 12s cubic-bezier(.2,.6,.3,1); }
.wb-vac-held.zichtbaar .wb-vh-achter img { transform: scale(1); opacity: .8; filter: saturate(.7) blur(1px); }
.wb-vac-held::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wb-vac-held h1, .wb-vac-held .wb-terug, .wb-vh-boven, .wb-vac-held .wb-intro, .wb-vh-zacht { color: var(--inkt); }
.wb-vac-held h1 { position: relative; padding-bottom: 18px; }
.wb-vac-held h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 6px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.65,0,.25,1) .7s; }
.wb-vac-held.zichtbaar h1::after { transform: none; }
.wb-vh-boven .wb-nu-open { border-color: var(--lijn); }

@media (max-width: 900px) {
  .wb-vac-held { align-items: flex-end; }

  .wb-vh-achter img { object-position: 60% 60%; }

}
/* foto minder nadruk dan op de startpagina: lager, lichter, minder kleur */
.wb-vac-held { min-height: min(62vh, 600px); padding-block: clamp(110px, 10vw, 140px) 72px; background: var(--vlak); --vlak: var(--accent); }

@media (max-width: 900px) {
  .wb-vac-held { min-height: 0; padding-top: 250px; }
  .wb-vh-achter { bottom: auto; height: 300px; }

}
/* groter wit vlak bij de functie; de foto alleen als sfeer rechts */

.wb-vh-achter { left: 35%; }
/* het vlak in een zachte tint van de vacaturekleur, in plaats van wit */

.wb-vac-held::before { background: linear-gradient(90deg, var(--vlak) 0%, var(--vlak) 48%, color-mix(in srgb, var(--vlak) 80%, transparent) 62%, color-mix(in srgb, var(--vlak) 50%, transparent) 80%, color-mix(in srgb, var(--vlak) 36%, transparent) 100%); }
@media (max-width: 900px) {
  .wb-vac-held::before { background: linear-gradient(0deg, var(--vlak) 0%, var(--vlak) calc(100% - 300px), color-mix(in srgb, var(--vlak) 60%, transparent) calc(100% - 170px), color-mix(in srgb, var(--vlak) 25%, transparent) 100%); }
  .wb-vh-achter { left: 0; }
}
/* het vlak in de volle vacaturekleur (zoals het blauw bij junior) */

.donker .wb-vac-held { --vlak: var(--inkt); }
.donker .wb-vac-held h1, .donker .wb-vac-held .wb-terug, .donker .wb-vh-boven, .donker .wb-vac-held .wb-intro, .donker .wb-vh-zacht { color: var(--geel); }
.donker .wb-vac-held h1::after { background: var(--geel); }
.donker .wb-vh-knop { background: var(--geel); }
.donker .wb-vh-boven .wb-nu-open { color: var(--inkt); }
.wb-vac-held:not(.x) h1::after { background: var(--inkt); }
.donker .wb-vac-held:not(.x) h1::after { background: var(--geel); }

/* menu: gele knop Solliciteer rechts */
.taal { display: flex; align-items: center; gap: 18px; }
.wb-sol-knop { font-size: 16px; font-weight: 500; text-decoration: none; }

#waarom, #klanten { scroll-margin-top: 80px; }
@media (max-width: 1180px) { .taal .wb-naar-site { display: none; } }
@media (max-width: 600px) { .wb-sol-knop { font-size: 14px; } }
/* werken-bij: zes knoppen passen pas vanaf 1180px; daaronder het uitklapmenu */
/* link naar de hoofdsite in de kopbalk alleen waar hij past (vanaf 1520 px; daaronder liep de balk over de rand). Altijd ook in de voet (Jochem 31 okt: anders geen weg terug naar workxadvocaten.nl) */
.wb-body .taal .wb-naar-site { display: none; }
@media (min-width: 1520px) { .wb-body .taal .wb-naar-site { display: inline; white-space: nowrap; } } /* pijl niet los op een tweede regel */
@media (max-width: 1320px) and (min-width: 1181px) { .wb-body .hoofdmenu { gap: 22px; } .wb-body .hoofdmenu a { font-size: 16px; } }
/* touch-tablets liggend (desktopnavigatie): tikvlak 44px hoog zonder dat de opmaak verschuift */
@media (pointer: coarse) and (min-width: 1181px) { .wb-body .hoofdmenu a { display: inline-block; padding-block: 9px; margin-block: -9px; } }
@media (max-width: 1180px) and (min-width: 861px) {
  /* hier is het menu een vaste laag in de nav: een transform op de nav maakte er een klein vakje van na scrollen (testronde 1 nov) */
  body.wb-body .kop-balk.compact .wrap > .logo + nav { transform: none; }
  .wb-body .menuknop { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; z-index: 3; }
  .wb-body .menuknop span, .wb-body .menuknop span::before, .wb-body .menuknop span::after { display: block; width: 24px; height: 1.6px; background: var(--inkt); position: relative; transition: transform .35s var(--ease), background-color .2s; }
  .wb-body .menuknop span::before, .wb-body .menuknop span::after { content: ""; position: absolute; left: 0; }
  .wb-body .menuknop span::before { top: -7px; } .wb-body .menuknop span::after { top: 7px; }
  .wb-body.menu-open .menuknop span, .menu-open .wb-body .menuknop span { background: transparent; }
  .menu-open .wb-body .menuknop span::before, .wb-body.menu-open .menuknop span::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .wb-body .menuknop span::after, .wb-body.menu-open .menuknop span::after { transform: translateY(-7px) rotate(-45deg); }
  .wb-body .hoofdmenu { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; z-index: 2; background: var(--wit); flex-direction: column; gap: 4px; padding: 110px var(--rand) 40px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .wb-body .hoofdmenu a { font-size: 30px; display: inline-block; padding: 6px 0; }
  .menu-open .wb-body .hoofdmenu, .wb-body.menu-open .hoofdmenu { opacity: 1; visibility: visible; }
  .menu-open .wb-body .logo, .menu-open .wb-body .taal, .wb-body.menu-open .logo, .wb-body.menu-open .taal { position: relative; z-index: 3; }
  .wb-body .taal { margin-left: auto; }
}

/* ---------- groepschat: hersteld (logo, vragen van Workx, terugscrollen) ---------- */
/* chat: vragen komen duidelijk van Workx, met logo */
.wb-chat-vraag { display: none; gap: 8px; max-width: 84%; }
.wb-chat-stroom > li.wb-chat-vraag.zicht { display: flex; }
.wb-chat-vraag > div { padding: 9px 14px 10px; background: var(--inkt); border-radius: 18px 18px 4px 18px; }
.wb-chat-vraag b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 500; color: var(--geel); }
.wb-chat-vraag p { padding: 0; background: none; border-radius: 0; }
.wb-chat-logo, .wb-chat-av { place-items: center; flex: none; }
.wb-chat-av { height: 40px; }
.wb-chat-logo img, .wb-chat-av img { width: 30px; height: auto; margin-left: 2px; }

@media (prefers-reduced-motion: reduce) { .wb-chat-stroom > li.wb-chat-vraag { display: flex; } }
.wb-chat-typt.jij { flex-direction: row-reverse; }
.wb-chat-typt.jij img { width: 34px; height: 34px; padding: 9px 2px; background: var(--geel); object-fit: contain; }
/* chat: echt Workx-logo (zoals linksboven), en zelf terugscrollen */
.wb-chat-logo, .wb-chat-av { display: block; width: 48px; height: auto; border-radius: 0; background: none; overflow: visible; }
.wb-chat-av { width: 58px; }
.wb-chat-logo svg, .wb-chat-av svg { display: block; width: 100%; height: auto; }
.wb-chat-vraag { align-items: center; }
.wb-chat-typt .wb-chat-logo { display: none; }
.wb-chat-typt.jij img { display: none; }
.wb-chat-typt.jij .wb-chat-logo { display: block; }
.wb-chat-venster { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }
/* Op een touchscreen mag een veeg in het chatvenster doorlopen naar de pagina; anders blijft je vinger daar hangen. */
@media (pointer: coarse) { .wb-chat-venster { overscroll-behavior-y: auto; } }
.wb-chat-venster::-webkit-scrollbar { width: 6px; } .wb-chat-venster::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
.wb-chat-venster::before { position: sticky; display: block; margin-bottom: -44px; }
.wb-chat-stroom { position: relative; left: auto; right: auto; bottom: auto; min-height: 100%; justify-content: flex-end; }
.wb-chat-terug { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: none; padding: 7px 12px; border: 0; border-radius: 20px; background: var(--inkt); color: var(--wit); font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.wb-chat-terug.zicht { display: block; }
.wb-chat-scherm { position: relative; }

/* klanten: smalle tussenbanner (de echte uitleg staat in Voor wie we werken) */
.wb-banier-smal { padding-block: clamp(22px, 2.6vw, 34px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 3vw, 44px); padding-left: max(var(--rand, 20px), calc((100% - 1200px) / 2)); }
.wb-banier-smal .wrap { display: block; width: auto; max-width: none; margin: 0; padding: 0; }
.wb-banier-smal h2 { margin: 0; max-width: none; font-size: clamp(16px, 1.25vw, 18px); font-weight: 500; line-height: 1.3; letter-spacing: .01em; white-space: nowrap; }
.wb-banier-smal .logoband { margin-top: 0; }
.wb-banier-smal .logoband-item { margin-right: 48px; }

@media (max-width: 760px) {
  .wb-banier-smal { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding-left: 0; }
  .wb-banier-smal .wrap { padding-inline: var(--rand, 20px); }
}
/* stilstaand raster bij 'minder beweging' (30 okt, zoals .banier-smal op home): de lopende band loopt bewust door tot
   de schermrand, het raster niet; het eindigt rechts op de kantlijn (1200 px-inhoud) en op mobiel ook links op de rand. */
@media (prefers-reduced-motion: reduce) {
  .wb-banier-smal .logoband { box-sizing: border-box; padding-right: max(var(--rand, 20px), calc((100vw - 1200px) / 2)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .wb-banier-smal .logoband { padding-inline: var(--rand, 20px); }
}

/* het arbeidsrecht in de deal: hoort bij Boutique van formaat, dus ook zwart */
.wb-deal { background: var(--inkt); color: var(--op-inkt-4); }
.wb-deal .wb-kop, .wb-deal .wb-kop strong { color: var(--wit); }
.wb-deal .wb-boventitel { color: var(--geel); }
.wb-deal-tekst p { color: var(--op-inkt-4); }
.wb-deal-citaat { border-left-color: var(--geel); }
.wb-deal-citaat p { color: var(--wit); }
.wb-deal-citaat footer, .wb-deal-citaat footer a { color: var(--steen-licht); }
.wb-deal-kaart { background: var(--geel); color: var(--inkt); box-shadow: none; }
.wb-deal-kaart .wb-deal-getal strong { color: var(--inkt); }
.wb-deal-kaart * { color: inherit; }

/* wat voor zaken: los blok onder 'Een week bij Workx', in geel */

.wb-deal .wb-deal-kaart p, .wb-deal .wb-deal-kaart span, .wb-deal .wb-deal-kaart small { color: rgba(30,30,30,.72); }
.wb-deal .wb-deal-kaart .wb-deal-getal strong { color: var(--inkt); }
.wb-deal { padding-top: clamp(10px, 2vw, 30px); }
 /* zelfde donkere vlak: alleen de sectiewitruimte van .wb-spot ertussen */
.wb-deal .wb-deal-samen > span { color: rgba(30,30,30,.65); }

/* film: stil voorproefje (eerste 12 seconden) in het kaartje en in het grote blok */
.wb-fk-beeld { width: 132px; }
.wb-fk-beeld video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wb-filmkaartje:hover .wb-fk-beeld video { transform: scale(1.06); }
.wb-fk-beeld i { width: 26px; height: 26px; margin: -13px 0 0 -13px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.wb-fk-beeld i::after { left: 10px; top: 7px; }

@media (max-width: 900px) { .wb-fk-beeld { width: 96px; } }

/* filmvenster: opent vanuit het kaartje in de opening */
.wb-filmvenster { 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; transition: opacity .3s; }
.wb-filmvenster.open { opacity: 1; }
.wb-fv-paneel { position: relative; width: min(1100px, 100%, calc((100svh - 40px - 84px) * 16 / 9 + 24px)); margin: auto; transform: scale(.96); transition: transform .4s var(--ease); }
.wb-filmvenster.open .wb-fv-paneel { transform: none; }
.wb-fv-beeld { position: relative; aspect-ratio: 16 / 9; background: var(--zwart); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.wb-fv-beeld iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wb-fv-dicht { position: absolute; right: 0; top: -52px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--geel); color: var(--inkt); font-size: 26px; line-height: 1; cursor: pointer; }
.wb-fv-dicht:hover { background: var(--wit); }
.wb-fv-open { overflow: hidden; }
.wb-voorproef { pointer-events: none; }
/* filmvenster: wordt vooraf klaargezet (onzichtbaar), pas bij openen zichtbaar */
.wb-filmvenster { visibility: hidden; pointer-events: none; }
.wb-filmvenster.open { visibility: visible; pointer-events: auto; }
.wb-fv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity .4s; }

.wb-filmvenster.speelt .wb-fv-poster { opacity: 0; pointer-events: none; }
.wb-fv-beeld iframe { z-index: 0; }
.wb-fv-poster { pointer-events: none; }

/* ---------- film onderaan: vijf opties, middelgroot en scherp ---------- */
.wb-fo { padding-block: clamp(60px, 8vw, 110px); }
.wb-fo + .wb-fo { border-top: 1px dashed var(--lijn); }
.wb-fo.beige { background: var(--beige); }
.wb-fo.donker { background: var(--inkt); }

.wb-fo .wb-kop.licht, .wb-fo .wb-kop.licht strong { color: var(--wit); }
.wb-fo-label { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); }
.wb-fo.donker .wb-fo-label { color: var(--geel); }
.wb-fo-scherm { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--inkt) url(img/werkenbij/film/voorproef-400.webp) center / cover no-repeat; cursor: pointer; box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.wb-fo-scherm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.wb-fo-scherm:hover video { transform: scale(1.03); }
.wb-fo-speel { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--geel); box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.wb-fo-speel::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 20px solid var(--inkt); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.wb-fo-scherm:hover .wb-fo-speel { transform: scale(1.1); }
.wb-fo-knop { display: inline-flex; align-items: baseline; gap: 12px; padding: 15px 22px; border: 0; background: var(--inkt); color: var(--wit); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background .3s, color .3s; }
.wb-fo-knop span { font-size: 13px; font-weight: 400; opacity: .7; }
.wb-fo-knop:hover { background: var(--geel); color: var(--inkt); }
.wb-fo-knop.geel { background: var(--geel); color: var(--inkt); }
.wb-fo-knop.geel:hover { background: var(--wit); }

/* 2, 4: gecentreerd, maximaal 720px */
.wb-fo-midden { max-width: 720px; margin: 0 auto; text-align: center; }
.wb-fo-midden .wb-kop { margin-bottom: 26px; }
.wb-fo-onder { margin: 24px 0 0; }
/* 3: geel vlak achter de film */
.wb-fo-geel { position: relative; padding: 0 22px 22px 0; }
.wb-fo-geel::before { content: ""; position: absolute; background: var(--geel); border-radius: 6px; }
/* 5: momenten */

@media (max-width: 900px) {  .wb-fo-speel { width: 58px; height: 58px; margin: -29px 0 0 -29px; } .wb-fo-speel::after { left: 23px; top: 18px; border-left-width: 16px; border-top-width: 11px; border-bottom-width: 11px; } }
.wb-fo-midden .wb-fo-geel { text-align: left; }
/* filmvenster met eigen filmbestand */
.wb-fv-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--zwart); }

/* ---------- filmvenster: eigen Workx-filmkader met aftelling ---------- */
.wb-fv-paneel { background: var(--wit); padding: 0 12px 12px; border-radius: 10px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); }
.wb-fv-balk { display: flex; align-items: center; gap: 16px; padding: 12px 2px; }
.wb-fv-logo { flex: none; display: block; width: 84px; }
.wb-fv-logo svg { display: block; width: 100%; height: auto; }
.wb-fv-titel { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wb-fv-titel b { font-size: 16px; font-weight: 500; color: var(--inkt); }
.wb-fv-titel small { font-size: 13px; color: var(--grijs); }
.wb-fv-balk .wb-fv-dicht { position: static; flex: none; width: 44px; height: 44px; background: var(--beige); font-size: 24px; transition: background .25s; }
.wb-fv-balk .wb-fv-dicht:hover { background: var(--geel); }
.wb-fv-beeld { border-radius: 4px; overflow: hidden; box-shadow: none; }

/* aftelling, als de leader van een filmrol */
.wb-fv-aftel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(20,20,20,.55); color: var(--wit); transition: opacity .45s; }
.wb-fv-rond { position: relative; width: clamp(96px, 14vw, 150px); aspect-ratio: 1; }
.wb-fv-rond svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wb-fv-rond circle { fill: rgba(0,0,0,.25); stroke: var(--geel); stroke-width: 5; stroke-dasharray: 277; stroke-dashoffset: 277; }
.wb-fv-aftel.tik circle { animation: wbAftel .9s linear forwards; }
@keyframes wbAftel { to { stroke-dashoffset: 0; } }
.wb-fv-rond b { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(46px, 7vw, 76px); font-weight: 500; line-height: 1; color: var(--wit); }
.wb-fv-aftel.tik b { animation: wbCijfer .9s ease; }
@keyframes wbCijfer { from { transform: scale(1.35); opacity: 0; } 25% { transform: scale(1); opacity: 1; } }
.wb-fv-aftel p { margin: 0; font-size: 15px; letter-spacing: .06em; }
.wb-fv-aftel.bijna circle { stroke-dasharray: 70 207; animation: wbDraai 1s linear infinite; transform-origin: 50% 50%; }
@keyframes wbDraai { to { transform: rotate(360deg); } }
.wb-fv-aftel p span { animation: wbPunt 1.2s infinite; opacity: 0; }
.wb-fv-aftel p span:nth-child(2) { animation-delay: .2s; } .wb-fv-aftel p span:nth-child(3) { animation-delay: .4s; }
@keyframes wbPunt { 40% { opacity: 1; } }
.wb-filmvenster.speelt .wb-fv-aftel { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .wb-fv-paneel { padding: 0 6px 6px; } .wb-fv-logo { width: 64px; } .wb-fv-balk { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .wb-fv-aftel circle, .wb-fv-aftel b { animation: none !important; } }
/* aftelling in Workx-stijl: licht vlak, groot cijfer in de Workx-letter, gele markeerstreep die per seconde volloopt */
.wb-fv-aftel { background: rgba(255,255,255,.86); color: var(--inkt); gap: 10px; }
.wb-fv-rond { width: auto; aspect-ratio: auto; padding: 0 .12em; isolation: isolate; }
.wb-fv-rond svg { display: none; }
.wb-fv-rond b { position: relative; display: block; font-size: clamp(72px, 11vw, 140px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--inkt); }
.wb-fv-rond::after { content: ""; position: absolute; z-index: -1; left: -.1em; right: -.1em; bottom: .08em; height: .32em; font-size: clamp(72px, 11vw, 140px); background: var(--geel); transform: scaleX(0); transform-origin: left; }
.wb-fv-aftel.tik .wb-fv-rond::after { animation: wbStreep .9s cubic-bezier(.65,0,.25,1) forwards; }
@keyframes wbStreep { to { transform: scaleX(1); } }
.wb-fv-aftel.tik b { animation: wbCijfer2 .9s ease; }
@keyframes wbCijfer2 { from { transform: translateY(18px); opacity: 0; } 30% { transform: none; opacity: 1; } }
.wb-fv-aftel p { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); }
.wb-fv-aftel.bijna .wb-fv-rond { width: clamp(120px, 16vw, 200px); height: 14px; }
.wb-fv-aftel.bijna .wb-fv-rond::after { font-size: 14px; inset: 0; height: auto; transform: none; background: linear-gradient(90deg, transparent, var(--geel) 30%, var(--geel) 70%, transparent) 0 0 / 50% 100% no-repeat, var(--beige); animation: wbBijna 1.1s ease-in-out infinite alternate; }
@keyframes wbBijna { from { background-position: 0 0, 0 0; } to { background-position: 100% 0, 0 0; } }
.wb-fv-rond b { min-width: .62em; text-align: center; }
/* aftelling rustiger: vanaf 5, 1,15 seconde per cijfer */
.wb-fv-aftel.tik .wb-fv-rond::after { animation-duration: 1.15s; animation-timing-function: cubic-bezier(.45,0,.25,1); }
.wb-fv-aftel.tik b { animation: wbCijfer3 1.15s ease; }
@keyframes wbCijfer3 { from { transform: translateY(14px); opacity: 0; } 35% { transform: none; opacity: 1; } }

/* mobiel: meer vervaging naar wit, zodat de titel leesbaar is en de introtekst helemaal op wit staat */
@media (max-width: 900px) {
  .wb-held-vol::before { background: linear-gradient(0deg, var(--wit) 0%, var(--wit) 52%, rgba(255,255,255,.93) 60%, rgba(255,255,255,.72) 68%, rgba(255,255,255,.3) 78%, rgba(255,255,255,0) 88%); display: none; }
}
@media (max-width: 900px) {
  /* de vervaging hangt aan het tekstblok zelf: vlak boven de titel is het altijd (bijna) wit, op elk schermformaat */
  .wb-held-vol > .wrap { position: relative; z-index: 2; isolation: isolate; }
  .wb-held-vol > .wrap::before { content: ""; position: absolute; z-index: -1; left: -50vw; right: -50vw; pointer-events: none; }
}
@media (max-width: 900px) {
  /* altijd een vast, helder stuk foto boven de tekst (ook als de browserbalken het scherm lager maken) */
  .wb-held-vol { min-height: 0; padding-top: 78vw; align-items: flex-end; }

  .wb-held-foto { top: 0; bottom: auto; height: calc(78vw + 150px); }
  /* korte vervaging vlak boven de titel; de tekst zelf staat op wit */
  .wb-held-vol > .wrap::before { top: -110px; bottom: -400px; background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,.55) 50px, rgba(255,255,255,.9) 88px, var(--wit) 112px); }
}
/* liggende telefoons (laag scherm): titel en knoppen direct in beeld in plaats van alleen foto */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .wb-held-vol { padding-top: 110px; }
  .wb-vac-held { padding-top: 48px; } /* de held begint hier al onder de kopbalk */
  .wb-vh-achter { height: 100%; }
}

@media (max-width: 900px) { .wb-held-foto img { inset: auto; left: 0; top: -32%; width: 100%; height: 132%; object-position: 58% 50% !important; } }

/* Workx-fiets: half zo groot, op een dun lijntje tegen de onderrand van het scherm */
.wb-fiets { left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); height: 34px; transform: none; }
.wb-fiets::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: rgba(30,30,30,.16); }
.wb-fiets svg { position: absolute; bottom: 4px; left: 0; width: 46px; height: 28px; transform: translateX(calc(var(--p) * (100vw - 140px) + 6px)); }
.wb-fiets.terug svg { transform: translateX(calc(var(--p) * (100vw - 140px) + 6px)) scaleX(-1); }

/* solliciteerknop rechtsboven (gekozen optie 13): geel, tekst rolt omhoog bij aanwijzen */
.wb-sol-knop { color: var(--inkt); }
.wb-sol-knop:hover { background: var(--geel); color: var(--inkt); }
.wb-sol-knop .rol { position: relative; display: block; height: 1.3em; overflow: hidden; }
.wb-sol-knop .rol span { display: block; line-height: 1.3em; white-space: nowrap; transition: transform .4s cubic-bezier(.65,0,.25,1); text-align: center; }
.wb-sol-knop:hover .rol span, .wb-sol-knop:focus-visible .rol span { transform: translateY(-100%); }

@media (hover: none) { .wb-sol-knop .rol span + span { visibility: hidden; } .wb-sol-knop:hover .rol span { transform: none; } } /* aanraakscherm houdt :hover vast na een tik: anders bleef de knop leeg (testronde 1 nov) */
/* gekozen: 12 + 13 — afgerond kader met groen 'nu open'-stipje; bij aanwijzen geel en de tekst rolt omhoog */
.wb-sol-knop { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border: 1.5px solid var(--inkt); border-radius: 999px; background: transparent; transition: background .25s; }
.wb-sol-knop:hover, .wb-sol-knop:focus-visible { background: var(--geel); }
.wb-sol-knop .stip { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--groen-open); }
.wb-sol-knop .stip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--groen-open); animation: wbOpen 1.8s ease-out infinite; }

@media (max-width: 600px) { .wb-sol-knop { padding: 7px 14px 7px 12px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .wb-sol-knop .stip::after { animation: none; } }

/* Heel smalle telefoons (320 px): logo, knop en menuknop passen anders niet naast elkaar en de pagina schuift zijwaarts. */
@media (max-width: 360px) { .wb-body .kop-balk .wrap { gap: 10px; padding-left: 16px; padding-right: 16px; } }
@media (max-width: 360px) and (hover: none) { .wb-sol-knop .rol span + span { display: none; } }

/* ---------- Wat voor zaken als smalle strook (zoals de klantenbanner) ---------- */

.wb-zs { background: var(--geel); padding-block: clamp(22px, 2.6vw, 34px); }
.wb-zs .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 4vw, 56px); }
.wb-zs-titel { margin: 0; font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.3; white-space: nowrap; }
.wb-zs-titel span { display: block; font-weight: 400; font-size: 14px; color: var(--grijs); }
.wb-zs-rechts { display: flex; align-items: center; gap: 22px; min-width: 0; }

/* 3: kleine ring */
.wb-zs-ring { flex: none; width: 64px; height: 64px; transform: rotate(0); }
.wb-zs-ring circle { fill: none; stroke: var(--k); stroke-width: 9; opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i) * .15s); }
.wb-zs.in .wb-zs-ring circle { opacity: 1; }
.wb-zs-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; }
.wb-zs-leg li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wb-zs-leg i { width: 12px; height: 12px; background: var(--k); box-shadow: inset 0 0 0 1.5px var(--inkt); }
.wb-zs-leg b { font-weight: 500; font-size: 16px; }
/* waar de percentages over gaan, gelijk aan de bron (keuze 30 okt) */
.wb-zs-tekst { min-width: 0; }
.wb-zs-noot { margin: 10px 0 0; font-size: 14px; color: var(--grijs); }
/* past de legenda niet op één regel, dan twee nette rijen van twee (geen losse post op de tweede regel) */
@media (min-width: 561px) and (max-width: 1199px) { .wb-zs-leg { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px 26px; } }

/* 5: lopende band */

@media (max-width: 760px) {
  .wb-zs .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .wb-zs-rechts { flex-wrap: wrap; }

}
@media (prefers-reduced-motion: reduce) { .wb-zs * { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } }
/* strook: opmaak alleen op de vakjes zelf, niet op het getal erin */
.wb-zs [data-tel] { all: unset; }

/* Wat voor zaken (ring): aanwijzen tilt het onderwerp op en schuift het vlakje in de ring naar buiten */
.wb-zs3 .wb-zs-ring { width: 76px; height: 76px; overflow: visible; }
.wb-zs3 .wb-zs-ring circle { transform-box: view-box; transform-origin: 21px 21px; transition: opacity .4s, transform .35s cubic-bezier(.3,1.5,.5,1), filter .25s, stroke-width .3s; cursor: default; }
.wb-zs3 .wb-zs-leg li { padding: 6px 10px; margin: -6px -10px; border-radius: 4px; cursor: default; transition: transform .3s cubic-bezier(.3,1.5,.5,1), background .25s, box-shadow .25s; }
.wb-zs3 .wb-zs-leg li.aan { transform: translateY(-4px); background: var(--wit); box-shadow: 0 8px 18px -10px rgba(0,0,0,.35); }
.wb-zs3.kies .wb-zs-ring circle { filter: opacity(.4); }
.wb-zs3.kies .wb-zs-ring circle.aan { filter: none; transform: translate(var(--dx), var(--dy)); stroke-width: 10.5; }

/* ── Een week bij Workx: compact rooster (okt 2026, vervangt het grote weekrooster) ──
   Ma–Vr van 08.30 tot 19.00 op 332px hoog. Op een telefoon swipe je zijwaarts door de
   dagen; de tijden blijven links staan. Kleuren: werk grijs, sport & privé blauw, Team Workx (borrel,
   bootcamp, rondje lopen) groen. Geel is geen categorie; de thuiswerkdag heeft een eigen warme
   kolom en een donker label. */
.wb-agenda .wb-ag-tekst { margin-bottom: 26px; }
.wb-agenda .werk { --c: var(--agenda-werk); } .wb-agenda .sport { --c: var(--agenda-sport); } .wb-agenda .team { --c: var(--agenda-team); } .wb-agenda .thuis { --c: var(--agenda-thuis); }
.wb-agenda .ao5-kader { background: var(--wit); color: var(--inkt); border-radius: 18px; padding: 18px 18px 16px; }
.wb-agenda .ao-wie { display: flex; align-items: center; gap: 10px; }
.wb-agenda .ao-wie img { border-radius: 50%; width: 40px; height: 40px; object-fit: cover; }
.wb-agenda .ao-wie strong { display: block; font-weight: 500; font-size: 15px; }
.wb-agenda .ao-wie span { font-size: 13px; color: var(--steen-donker); }
.wb-agenda .ao-leg { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 14px 0 0; padding: 0; font-size: 12.5px; color: var(--agenda-legenda); }
.wb-agenda .ao-leg li::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.wb-agenda .ao5 { display: grid; grid-template-columns: 44px 1fr; margin-top: 12px; overflow: auto hidden; scroll-snap-type: x mandatory; scroll-padding-left: 44px; scrollbar-width: thin; }
.wb-agenda .ao5-uren { position: sticky; left: 0; z-index: 2; background: var(--wit); margin-top: 30px; height: 332px; }
.wb-agenda .ao5-uren span { position: absolute; left: 0; transform: translateY(-50%); }
.wb-agenda .ao5-dagen { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.wb-agenda .ao5-dag { scroll-snap-align: start; border-left: 1px solid var(--op-inkt-2); }
.wb-agenda .ao5-kop { height: 30px; padding: 0 6px; font-size: 12.5px; white-space: nowrap; }
.wb-agenda .ao5-kop em { font-style: normal; font-size: 10px; background: var(--agenda-werk); padding: 1px 5px; border-radius: 3px; }
.wb-agenda .ao5-kop em.vrij { background: var(--agenda-werk); }
.wb-agenda .ao5-dag ol { position: relative; list-style: none; margin: 0; padding: 0; height: 332px; background: repeating-linear-gradient(var(--wit) 0 calc(332px / 10.5 - 1px), var(--op-inkt) calc(332px / 10.5 - 1px) calc(332px / 10.5)); background-position: 0 calc(332px / 10.5 * .5); }
.wb-agenda .ao5-dag li { position: absolute; left: 3px; right: 3px; background: var(--c); border-radius: 4px; padding: 2px 5px; font-size: 11px; line-height: 1.2; overflow: hidden; }
.wb-agenda .ao5-vrij ol { background: var(--papier); }
/* thuiswerkdag: warme kolom en een donker label met huisje */
.wb-agenda .ao5-kop em.thuis { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 2px 7px 2px 6px; vertical-align: 1px; }
.wb-agenda .ao5-thuis { background: var(--agenda-thuis-vlak); }
.wb-agenda .ao5-thuis ol { background: repeating-linear-gradient(var(--agenda-thuis-vlak) 0 calc(332px / 10.5 - 1px), var(--agenda-thuis-lijn) calc(332px / 10.5 - 1px) calc(332px / 10.5)); background-position: 0 calc(332px / 10.5 * .5); }
.wb-agenda .ao-leg li.thuis::before { border: 1px solid var(--agenda-thuis-rand); }
.wb-agenda .ao5-dag li.ao5-vrij-vlak { bottom: 0; height: auto; display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--agenda-vrij) 0 6px, var(--papier) 6px 12px); color: var(--steen-donker); font-size: 12px; }
/* telefoon: één dag tegelijk. Een dag is zo breed als het rooster naast de tijdkolom
   (schermbreedte − marges − 2×18px binnenrand − 44px tijden); een swipe gaat precies één dag verder. */
@media (max-width: 600px) {
  /* keuze 30 okt (optie 1): 24px smaller, zodat de volgende dag in beeld piept en duidelijk is dat je kunt vegen */
  .wb-agenda .ao5-dagen { grid-template-columns: repeat(5, calc(100vw - 2 * var(--rand) - 36px - 44px - 24px)); }
  /* liever de breedte van het rooster zelf: dan klopt het ook met een schuifbalk in beeld */
  .wb-agenda .ao5 { container-type: inline-size; }
  @supports (width: 1cqw) { .wb-agenda .ao5-dagen { grid-template-columns: repeat(5, calc(100cqw - 44px - 24px)); } }
  .wb-agenda .ao5-dag { scroll-snap-stop: always; }
  .wb-agenda .ao5-kop { font-size: 14px; }
  .wb-agenda .ao5-dag li { font-size: 12px; padding: 2px 7px; }
}
/* afspraken verschijnen één voor één als het rooster in beeld komt (werken-bij.js zet .in op .wb-ag) */
.js .wb-agenda .wb-ag .ao5-dag li { opacity: 0; transform: translateY(4px); }
.js .wb-agenda .wb-ag.in .ao5-dag li { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--n) * 45ms), transform .4s var(--ease) calc(var(--n) * 45ms); }
@media (prefers-reduced-motion: reduce) { .js .wb-agenda .wb-ag .ao5-dag li { opacity: 1; transform: none; transition: none; } }
/* het oude rooster gaf .wb-ag een vaste breedte van 860px (daardoor paste het niet op een telefoon) */
.wb-agenda .wb-ag { min-width: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.wb-agenda .ao5-kader { box-shadow: 0 30px 70px rgba(0,0,0,.35); }
/* rechtspraak lunch op de thuiswerkdag: doe mee via Teams */
.wb-agenda .ao5-dag li.ao5-online { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.wb-agenda .ao5-teams { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 9.5px; line-height: 1.2; background: var(--agenda-teams); border-radius: 3px; padding: 0 4px; }

/* ── Groepschat: zelf een vraag kiezen (okt 2026) ──
   Naast de chat (op een telefoon erboven) staan de vragen. Een gekozen vraag verschijnt als "Jij"
   in de chat. Je kunt altijd een nieuwe vraag kiezen, ook als de vorige nog wordt beantwoord.
   Gestelde vragen: vinkje.
   Jouw vraag is geel in de chat, het openingsbericht van Workx donker. */
.wb-chat-vraag.van-jij .wb-chat-logo { display: none; }
.wb-chat-vraag.van-jij > div { background: var(--geel); box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.wb-chat-vraag.van-jij b { color: var(--inkt); opacity: .6; }
.wb-chat-vraag.van-jij p { color: var(--inkt); }
/* Breed scherm: de chat blijft in beeld staan terwijl je langs de vragen scrolt, en is nooit
   hoger dan het scherm, zodat het nieuwste bericht (onderaan) altijd te zien is. */
@media (min-width: 901px) {
  .wb-chat .wrap { align-items: start; }
  .wb-chat-scherm { position: sticky; top: 96px; }
  .wb-chat-scherm .wb-chat-venster { height: min(540px, calc(100dvh - 96px - 78px - 32px)); min-height: 340px; }
}
.wb-chat-keuze { margin-top: clamp(24px, 3vw, 36px); }
.wb-chat-keuze-kop { margin: 0 0 12px; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--inkt); }
.wb-chat-keuzes { list-style: none; margin: 0; padding: 0; }
.wb-chat-keuzeknop { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 0; font: inherit; color: var(--inkt); text-align: left; cursor: pointer; transition: background .2s, color .2s, opacity .2s, transform .15s var(--ease); }
.wb-chat-keuzeknop span { flex: 1; }
.wb-chat-keuzeknop i { flex: none; font-style: normal; }
.wb-chat-keuzeknop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.wb-chat-keuzeknop:disabled { cursor: default; }
.wb-chat-keuzeknop.gesteld { opacity: .5; }
.wb-chat-opnieuw { margin-top: 14px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; color: var(--grijs); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wb-chat-opnieuw:hover { color: var(--inkt); }
.wb-chat-opnieuw[hidden] { display: none; }
.wb-held-tekst .wb-intro { margin-bottom: clamp(24px, 3vw, 36px); }

/* vragen als labels die naast elkaar doorlopen */
.wb-chat .wb-chat-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 901px) { .wb-chat .wb-chat-keuzes { flex-direction: column; align-items: flex-start; } }
.wb-chat .wb-chat-keuzeknop { width: auto; padding: 8px 14px; border: 1.5px solid var(--inkt); border-radius: 999px; background: var(--wit); font-size: 14px; line-height: 1.3; }
.wb-chat .wb-chat-keuzeknop:not(:disabled):hover { background: var(--geel); }
.wb-chat .wb-chat-keuzeknop.gesteld { border-color: var(--steen-licht); }
.wb-chat .wb-chat-keuzeknop.gesteld i::before { content: '✓'; }

@media (prefers-reduced-motion: reduce) { .wb-chat-keuze { display: none !important; } }
/* vragen vallen open zodra de kop in beeld komt (werken-bij.js): het vak groeit mee, de vragen zakken één voor één in */
.wb-chat-keuzes-vak { display: grid; grid-template-rows: 1fr; }
.wb-chat-keuzes-vak > .wb-chat-keuzes { min-height: 0; }
.wb-chat-keuze.dicht .wb-chat-keuzes-vak { grid-template-rows: 0fr; }
.wb-chat-keuze.dicht .wb-chat-keuzes, .wb-chat-keuze.valt .wb-chat-keuzes { overflow: hidden; }
.wb-chat-keuze.dicht .wb-chat-keuzes > li { opacity: 0; transform: translateY(-18px); }
.wb-chat-keuze.valt .wb-chat-keuzes > li { transition: opacity .45s ease, transform .6s var(--ease); transition-delay: calc(120ms + var(--i, 0) * 90ms); }

/* ===== grafisch strak (27 okt) ===== */
/* Alle inhoudssecties dezelfde witruimte boven en onder (was 110 / 115 / 130px) */
.wb-chat, .wb-bo, .wb-lb, .wb-fo, .wb-sparren, .wb-vac-inhoud, .wb-bk, .wb-sollicitatie { padding-block: clamp(72px, 9vw, 128px); }
.wb-vi-eisen + .wb-bk { padding-top: 0; } /* twee witte secties: één sectiewitruimte ertussen */
.wb-vh-boven span[data-vac] { text-wrap: balance; }
.wb-form .wb-drop { border-radius: 2px; } /* zelfde hoek als de invoervelden erboven */
/* Kop → introtekst overal 28px (Groeien had 14px) */
.wb-lb .wb-kop { margin-bottom: 28px; }
/* Primaire knoppen: zelfde maat, spatiëring en hoeken als .wb-knop */
.wb-fo-knop, .wb-vk-knop, .wb-vh-knop, .wb .contact.avond .formulier .verstuur { font-size: 16px; letter-spacing: .01em; padding: 15px 24px 14px; border-radius: 2px; }
/* Kleine kapitale labels: zelfde letterspatiëring als .wb-boventitel */
.wb-loon-kop, .wb-deal-samen > span { letter-spacing: .14em; }
/* Filmkaartjes in een rij even hoog, ook als een titel korter is (op alle breedtes) */
.wb-filmrij { align-items: stretch; }
.wb-filmrij > li > .wb-strook { height: 100%; }

/* ===== grafisch strak, ronde 2 (27 okt) ===== */
/* Logowand: alle tegels even hoog (3:2); hoge logo's schalen binnen de tegel */
.wb-spot-tegel { min-height: 0; grid-template: 100% / 100%; overflow: hidden; }
.wb-spot-tegel img { max-height: 100%; }
/* Contactformulier stapelt in style.css al op 860px: lijn rechts van het berichtveld dan ook weg */
@media (max-width: 860px) {
  .wb .contact.avond .formulier:not(.zweef) textarea { border-right: 0; min-height: 130px; padding: 0 0 12px; margin-bottom: 22px; }
}
/* Koppen: vloeiend van mobiel naar desktop, zonder sprong bij 900px en zonder minimummaat op tablet */
.wb-kop { font-size: clamp(30px, 24.4px + 1.5vw, 46px); }
.wb-held h1 { font-size: clamp(38px, 26px + 3.2vw, 72px); }
.wb-vac-held h1 { font-size: clamp(38px, 28px + 2.63vw, 66px); }
/* Geen los woord op de laatste regel van een kop */
.wb-body h1, .wb-body h2, .wb-body h3 { text-wrap: pretty; }
/* WebKit (Safari) crasht op 400–700px op 'pretty' in deze kop (vaste <br>); balance oogt hier gelijk */
.wb-body #kop-contact { text-wrap: balance; }
/* Tekstlinks: onderstreping wordt bij hover sterker, zoals .wb-vm .zacht */
.wb-sparren-contact a:hover, .wb-bo2-lijst p a:hover, .wb-bk-raster p a:hover { text-decoration-color: currentColor; }
.wb-vh-zacht:hover, .wb-sollicitatie p a:hover { text-decoration-thickness: 2px; }
/* Kop → eerste inhoud overal 28px */
.wb-bo .wb-kop, .wb-fo-midden .wb-kop { margin-bottom: 28px; }
/* Geen extra witruimte onder het laatste element van een sectie */
.wb-proces .wb-stappen, .wb-lb-noot { margin-bottom: 0; }
/* Vinkvakje optisch op de eerste tekstregel */
.wb-vi-vink .vak { margin-top: 2px; }
/* Mobiel: zwevende knoppen op de zijmarge van het grid */
@media (max-width: 900px) { .wb-plakknop { left: var(--rand); right: var(--rand); } }
@media (max-width: 600px) { .naarboven { right: var(--rand); } }

/* ===== grafisch strak, ronde 3: kolommen (27 okt) ===== */
/* Twee kolommen overal tekst : beeld = 2 : 3, zoals Waarom en Klanten; het beeld vult de kolom tot de rechterrand.
   Pas vanaf 1181px: smaller breken de koppen van Pand en Deal anders in drie regels. */
@media (min-width: 1181px) {
  .wb-pand .wrap, .wb-deal .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .wb-chat-scherm { max-width: none; justify-self: stretch; }
}

/* ===== ontwerpcheck (27 okt, debug-sessie) — onder het grafische blok, raakt dat niet ===== */
/* Vacaturepagina: "Wat we graag zien" in hetzelfde kopsysteem als "Dit biedt Workx." op dezelfde pagina */
.wb-vi h2.wb-kop { font-size: clamp(30px, 24.4px + 1.5vw, 46px); font-weight: 400; margin-bottom: 18px; }
/* Leesbare regellengte (45–75 tekens): deze teksten liepen tot 91 tekens per regel */
.wb-uitjes-tekst p, .wb-sparren p, .wb-bo2-lijst li p { max-width: 46ch; text-wrap: pretty; }
/* Loopbaanladder op een telefoon: alleen de treden die de collega doorliep plus de volgende (werken-bij.js zet
   --n en .buiten), zodat de labels leesbaar groot kunnen. Desktop blijft de volledige ladder van zeven treden. */
@media (max-width: 600px) {
  .wb-gr-kaart .wb-g1 { grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
  .wb-gr-kaart .wb-g1-tree.buiten { display: none; }
  .wb-gr-kaart .wb-g1-lijn { left: calc(50% / var(--n, 7)); right: calc(50% / var(--n, 7)); }
  .wb-gr-kaart .wb-g1-vol { left: 0; }
  .wb-gr-kaart.speel .wb-g1-vol { width: calc((var(--tot) - var(--van)) / (var(--n, 7) - 1) * 100%); }
  .wb-gr-kaart .wb-g1-reiziger { left: calc(50% / var(--n, 7)); }
  .wb-gr-kaart.speel .wb-g1-reiziger { left: calc((var(--tot) - var(--van) + .5) / var(--n, 7) * 100%); }
  .wb-gr-kaart .wb-g1-tree b { font-size: 12px; }
  .wb-gr-kaart .wb-g1-tree em { font-size: 12px; }
}
/* Optie 4 (Jochem): lopende tekst in drie maten — intro var(--brood) (18 desktop / 17 mobiel), tekst 16, klein 14 —
   en drie grijzen: --inkt (koppen), --tekst (lopende tekst), --zacht (bijschriften). --grijs viel bijna samen met --tekst. */

.wb-held-tekst .wb-intro, .wb-vh-tekst .wb-intro { font-size: var(--brood); }
.wb-spot-zin, .wb-eis li, .wb-bo2-lijst li p { font-size: 16px; }
.wb-vi-hint { font-size: 14px; }

/* ===== grafisch strak, ronde 4: contactkop (27 okt) ===== */
/* "Vragen over werken bij Workx?" in dezelfde maat als de andere sectiekoppen (.wb-kop), niet de hoofdsitemaat */
/* Op smalle schermen niet: de tekening rechts laat dan te weinig ruimte en "over" komt los op een regel */
@media (min-width: 601px) { .wb .contact.avond .sectiekop h2 { font-size: clamp(30px, 24.4px + 1.5vw, 46px); line-height: 1.05; letter-spacing: -.005em; } }
/* "Eerst kennismaken?" (Jochem, 27 okt): geen foto en geen vaste contactpersoon meer, maar drie manieren om contact op te nemen */
.wb-sparren-kies .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(28px, 6vw, 90px); }
.wb-sparren-opties { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--inkt); }
.wb-sparren-opties li { border-bottom: 1px solid var(--lijn); }
.wb-sparren-opties a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 4px; color: var(--inkt); text-decoration: none; transition: background-color .25s, padding .25s var(--ease); }
.wb-sparren-opties a:hover, .wb-sparren-opties a:focus-visible { background: var(--geel); }
.wb-sparren-opties b { display: block; font-size: 18px; font-weight: 500; }
.wb-sparren-opties small { display: block; margin-top: 2px; font-size: 14px; color: var(--zacht); }
.wb-sparren-opties svg { flex: none; width: 22px; height: 22px; transition: transform .3s var(--ease); }
.wb-sparren-opties a:hover svg { transform: translateX(4px); }
.wb-nowrap { white-space: nowrap; }
@media (max-width: 760px) { .wb-sparren-kies .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; } .wb-sparren-opties b { font-size: 17px; } }
/* Knoppen strak (Jochem, 27 okt): overal dezelfde getekende pijl, dezelfde afstand tekst→pijl en dezelfde binnenruimte.
   De pijl in .wb-knop was een letterteken (→); nu hetzelfde icoon als de andere pijlen op de site. */
.wb-knop { gap: 12px; }
.wb-knop::after { content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* De lichte knop naast de donkere: zelfde maat en binnenruimte, met een dunne zwarte rand; bij aanwijzen vult hij geel */
.wb-knop-licht { padding: 15px 24px 14px; box-shadow: inset 0 0 0 1px var(--inkt); } /* 1 px, gelijk aan .kn-knop en .wi-knop-rand (30 okt) */
.wb-knop-licht::before { top: 0; height: auto; background: var(--geel); transform: scaleX(0); transition: transform .45s var(--ease); }
@media (hover: hover) { .wb-knop-licht:hover::before { height: auto; transform: scaleX(1); } }
/* Chatvragen: het vinkje-vak achteraan neemt pas ruimte in als de vraag gesteld is */
.wb-chat .wb-chat-keuzeknop:not(.gesteld) i { display: none; }

/* =====================================================================================
   WORKX-DETAILNORM (28 okt) — werken-bij en vacatures. Zie workx-detailnorm.md.
   ===================================================================================== */
/* B · knoppen */
.wb-knop, .wb-vk-knop, .wb-fo-knop, .wb-vh-knop { gap: 12px; padding: 15px 24px 14px; font-size: 16px; font-weight: 500; border-radius: 2px; }
.wb-vk-knop svg, .wb-vh-knop svg, .wb-fo-knop svg { width: 18px; height: 18px; flex: none; }
.wb-vk-knop svg *, .wb-vh-knop svg * { stroke-width: 1.6; }
.wb-vh-knop { color: var(--wit); }
.donker .wb-vh-knop { color: var(--inkt); }
.wb-held .wb-knoppen .wb-knop { min-width: 236px; }
/* mobiel: filmkaartje onder de knoppen even breed als die knoppen (rechterkanten op één lijn) */
@media (max-width: 900px) { .wb-held-vol .wb-filmkaartje { min-width: 236px; } }
/* ronde pijlknoppen: 44 px, rand 1,5 px inkt */
.wb-fm-nav button { width: 44px; height: 44px; border: 1.5px solid var(--inkt); }
/* pijl-iconen die lettertekens vervingen */
.wb-pijl { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; margin-left: .35em; }
.wb-pijl-terug { margin: 0 .4em 0 0; }
.wb-terug { display: inline-flex; align-items: center; }

/* C · tekstlinks: één onderlijn; klikvlak ruimer zonder dat de opmaak verschuift */
.wb-terug, .wb-vh-zacht, .wb-vo .zacht, .wb-bo2-lijst p a, .wb-bk-raster p a, .wb-sol-tekst .wb-klein a, .wb-deal-citaat footer a { position: relative; }
.wb-terug::before, .wb-vh-zacht::before, .wb-vo .zacht::before, .wb-bo2-lijst p a::before, .wb-bk-raster p a::before, .wb-sol-tekst .wb-klein a::before, .wb-deal-citaat footer a::before { content: ""; position: absolute; inset: -12px -6px; }
.wb-terug:hover { text-decoration: none; }

/* D · chips: één stijl, 44 px, rand 1,5 px inkt, rond, gekozen = zwart */
.wb-chat .wb-chat-keuzeknop, .wb-lb-kies button { min-height: 44px; padding: 9px 16px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--inkt); font-size: 14px; line-height: 1.3; }
.wb-lb-kies button[aria-pressed="true"] { background: var(--inkt); color: var(--wit); }
@media (max-width: 600px) { .wb-lb-kies > span { flex-basis: 100%; } }

/* D13 · labels 13 px / 0,14 em */
.wb-deal-samen > span, .wb-vh-boven .wb-nu-open { letter-spacing: .14em; }

/* E17 · afrondingen: kaarten en beeld 14, kleine vlakken 2 */
.wb-chat-scherm, .wb-agenda .ao5-kader, .wb-gr-kaart, .wb-spot-muur, .wb-deal-kaart, .wb-filmkaartje, .wb-fo-scherm, .wb .contact.avond .formulier, .wb-drop, .wb-fo-geel::before { border-radius: var(--hoek); }
.wb-deal-band, .wb-deal-samen ul, .wb-agenda .ao5-dag li, .wb-agenda .ao5-kop em, .wb-agenda .ao5-teams, .wb-fk-beeld { border-radius: 2px; }
.wb-agenda .ao5-thuis { border-radius: 2px 2px 0 0; }

/* G/A · uitlijning */
.wb-held .wb-markeer, .wb-markeer { margin-left: -.06em; }
.wb-sparren-opties a { padding-inline: 0; }
.wb-sparren-opties a:hover, .wb-sparren-opties a:focus-visible { padding-inline: 0; box-shadow: -14px 0 0 var(--geel), 14px 0 0 var(--geel); }
.wb-stappen::before { right: calc((100% - 60px) / 4 - 22px); }
.wb-fo-midden .wb-fo-geel, .wb-fo-geel { padding: 0; margin-bottom: clamp(10px, 3vw, 22px); }
.wb-fo-geel::before { left: clamp(10px, 3vw, 22px); top: clamp(10px, 3vw, 22px); right: calc(-1 * clamp(10px, 3vw, 22px)); bottom: calc(-1 * clamp(10px, 3vw, 22px)); }
.wb-lv-ico { width: 38px; height: 38px; margin-left: 0; }
.wb-lv .wb-loon-rij li.aan .wb-lv-ico { transform: none; }
@media (min-width: 1101px) { .wb-loon-rij strong { min-height: 2.6em; } }
.wb-agenda .ao5-kop { display: flex; align-items: center; gap: 4px; }
.wb-agenda .ao5-kop em { margin-left: 0; vertical-align: 0; }
.wb-agenda .ao5-dag li.ao5-vrij-vlak { top: calc(332px / 10.5 * .5); }

.wb-agenda .ao5-uren span { font-size: 11px; color: var(--zacht); }
.wb-deal-band::before, .wb-deal-band::after { width: 56px; }
.wb-gr-wie img { border-radius: 50%; }
.wb-vm-rij .kiezer .stip { transform: none !important; }
.wb-vi-meter p, .wb-vi-hint { font-size: 14px; }

/* F · koppen in het kopsysteem; regels en losse woorden */
.wb-sparren h2.wb-kop { font-size: clamp(30px, 24.4px + 1.5vw, 46px); font-weight: 400; line-height: 1.05; margin: 0 0 28px; }
.wb-sollicitatie h2.wb-kop { font-size: clamp(30px, 24.4px + 1.5vw, 46px); font-weight: 400; line-height: 1.05; color: var(--wit); }
.wb-sollicitatie h2.wb-kop strong { font-weight: 500; }
.wb-strook-titel, .wb-films h3, .wb-filmrij b { text-wrap: balance; }
/* vanaf 901 px mag de titel over twee regels, met vaste ruimte: bij aanwijzen werd een buurtitel anders afgekapt
   ('Op weg naar de …') en sprong de rijhoogte (testronde 1 nov) */
/* 901-1130 px: de kaarten zijn te smal voor titel en speelduur op één regel ('Workx Weekend F…', testronde 31 okt): daar mag de
   titel over twee regels, en de ruimte daarvoor staat altijd vast, zodat de rij niet verspringt als een kaart bij aanwijzen breder wordt */
@media (min-width: 901px) {
  .wb-strook-titel { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; line-height: 1.25; min-height: 2.5em; }
  .wb-strook-onder { align-items: flex-start; }
}
@media (max-width: 600px) { .wb-zs-leg { display: grid; grid-template-columns: 1fr; gap: 8px; } }

/* contrast: inactieve teksten en de toekomstige treden leesbaar */
.wb-g1-tree b { color: var(--zacht); }
.wb-chat-status { color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* focusrand zichtbaar op donkere secties */
.wb-spot :focus-visible, .wb-deal :focus-visible, .wb-agenda :focus-visible, .wb-sollicitatie :focus-visible { outline-color: var(--wit); }
.donker .wb-vac-held :focus-visible { outline-color: var(--geel); }

/* contactblok: het vraagveld krijgt een zichtbare onderlijn (zoals de andere velden) */
.wb .contact.avond .formulier:not(.zweef) textarea { border-bottom: 1px solid rgba(255,255,255,.28); }
@media (max-width: 760px) { .wb .contact.avond .avond-pand { width: 42%; } }

/* I · mobiel: op telefoons staat de vaste solliciteerbalk onderin, dus geen tweede knop in de kop */
@media (max-width: 600px) { .wb-body .kop-balk .wb-sol-knop { display: none; } }
.wb-vo .chip, .wb-vo span.chip { font-size: 13px; letter-spacing: .14em; }
/* klantlogo's in de smalle banier iets groter en beter leesbaar (wens Jochem 27 okt) */
.wb-banier-smal .logoband-item { height: 66px; }
.wb-banier-smal .logoband-item img { height: var(--h, 32px); opacity: .9; }
/* klantenband op werken-bij iets sneller (wens Jochem 27 okt) */
.wb-banier-smal .logoband-rail { animation-duration: 100s; }
/* spotlight op de klantenmuur: zijwaarts schuiven met de vinger, verticaal blijft scrollen */

/* vaste hoogte voor de klantkaart: werken-bij.js reserveert de ruimte voor de langste naam + tekst als marge onder de kaart,
   zodat de muur eronder niet verspringt en de gele lijn alleen langs de tekst loopt */
/* Solliciteer-knop op mobiel: rustig wit knopje rechtsonder met groen bolletje, zoals de knop bovenin op desktop (keuze Jochem 27 okt) */
@media (max-width: 600px) {
  .wb-plakknop { left: auto; right: var(--rand, 20px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 20px 12px 16px; background: rgba(255,255,255,.96); color: var(--inkt); border: 1.5px solid var(--inkt); border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.10); font-size: 15px; font-weight: 500; line-height: 1.2; }
  .wb-plakknop::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--groen-stip); box-shadow: 0 0 0 3px rgba(47,191,113,.18); flex: none; }
  .wb-plakknop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
}

/* ===== QA-RONDE 28 okt ===== */
/* na versturen: formulier echt weg (display:grid overschreef het hidden-attribuut) */
.wb-form[hidden] { display: none !important; }
.wb-form-klaar { align-self: start; }
/* spotlight: oude naam verdwijnt meteen als de spot vertrekt, zodat er nooit een verkeerde naam bij een klant staat */
.wb-spot-kaart.wissel .wb-spot-naam, .wb-spot-kaart.wissel .wb-spot-zin { transition-duration: .1s; }
/* groepschat: kopregel altijd één regel (namen of 'X typt…'), anders springt alles eronder bij elk bericht */

/* scrollwiel boven de chat mag aan het eind gewoon de pagina scrollen */
.wb-chat-venster { overscroll-behavior: auto; }
/* "Klinkt als jij"-knop volgens de knopnorm (primair zwart, mask-pijl), geen eigen gele variant */
.wb-vi-meter a.wb-knop { display: inline-flex; margin-top: 14px; padding: 15px 24px 14px; background: var(--inkt); color: var(--wit); border: 0; box-shadow: none; }
.wb-vi-meter a.wb-knop:hover { color: var(--inkt); }
.wb-vi-meter a.wb-knop[hidden] { display: none; }
/* hoeken: kaarten 14px, net als chat, spotmuur en deal (norm E17) */
.wb-vm1 .dia { box-shadow: inset 6px 0 0 var(--accent); } /* rand, hoek en schaduw staan op het vaste .paneel (wisselen zonder dat de kaart vervaagt) */
.wb-vm1 .dia[style*="#f9ff85"] { box-shadow: inset 6px 0 0 var(--geel-diep); }
.wb-bk-raster > li, .wb-loon, .wb-vi-vink button { border-radius: var(--hoek, 14px); }
/* statuslabels: overal dezelfde sticker als op de startpagina (geel, kapitalen, licht gedraaid; norm D15) */
.wb-nu-open, .wb-vm .wb-nu-open { padding: 7px 12px 6px; border: 0; border-radius: 2px; background: var(--geel); color: var(--inkt); font-size: 13px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-2deg); gap: 8px; }
.wb-vh-boven .wb-nu-open { background: var(--wit); padding: 7px 12px 6px; font-size: 13px; letter-spacing: .14em; }
.wb-nu-open i { width: 8px; height: 8px; }
/* label 'Vacature' als dezelfde chip als elders (grijs vlak, geen rand) */
.wb-vm .chip { border: 0; background: var(--tegel, var(--op-inkt)); color: var(--grijs); border-radius: 30px; padding: 4px 10px 3px; font-size: 13px; letter-spacing: .14em; }
/* lijniconen: overal lijndikte 1.6, icoon 18px in een cirkel van 38px (norm H24) */
.wb-bo2-ico svg *, .wb-lv-ico svg *, .wb-vi-vink svg * { stroke-width: 1.6; }
.wb-bo2-ico, .wb-bk .wb-lv-ico { width: 38px; height: 38px; }
.wb-bk .wb-lv-ico svg, .wb-bo2-ico svg { width: 18px; height: 18px; }
/* spotmuur: logo's bijgesneden en per logo optisch gelijk geschaald (zelfde maat als de klantenband) */
.wb-spot-tegel img[style*="--s"] { height: calc(var(--s) * 100%); max-height: none; width: auto; max-width: 100%; }
/* held: twee knoppen even breed, pijl rechts op 24px; tussenruimte 18 (norm B6/B8) */
.wb-held .wb-knoppen { gap: 18px; }
.wb-held .wb-knoppen .wb-knop { justify-content: space-between; }
/* filmknop vrij van het gele vlak */
.wb-fo-onder { margin-top: 32px; }
/* Solliciteer-pil in de kop: klikvlak 44px, rand 1,5px */
.wb-body .kop-balk .wb-sol-knop { min-height: 44px; border-width: 1.5px; }
/* genummerde stappen bij 'Solliciteer': cijfers op de linkerrand */
.wb-mini-stappen { padding-left: 0; list-style-position: inside; }
/* niet-actieve kolommen: gewoon de bijschriftgrijs, geen vierde, nog lichtere grijs */
.wb-lv.loopt .wb-loon-rij li:not(.aan) p { opacity: 1; color: var(--grijs); }
.wb-loon-rij li strong { text-wrap: balance; }
/* agenda: 'Thuiswerkdag' en 'parttime' als hetzelfde labeltje */
.wb-agenda .ao5-kop em.thuis { background: var(--agenda-thuis); color: var(--inkt); border-radius: 2px; }
/* deal-strook: uitvloeien met één masker (geen zichtbare banden); hoek 2 als klein vlak (E17) */
.wb-deal-band { -webkit-mask-image: linear-gradient(90deg, transparent, var(--zwart) 9%, var(--zwart) 91%, transparent); mask-image: linear-gradient(90deg, transparent, var(--zwart) 9%, var(--zwart) 91%, transparent); }
.wb-deal-band::before, .wb-deal-band::after { display: none; }
/* 'Samen met' bij 'minder beweging' (30 okt): de band staat stil, dus geen vervagende randen (die sneden de buitenste
   logo's half weg); de logo's lopen binnen het vak door op regels, met dezelfde binnenruimte als de vaste lijst. */
@media (prefers-reduced-motion: reduce) {
  .wb-deal-band { -webkit-mask-image: none; mask-image: none; }
  .wb-deal-samen .wb-deal-rail { padding: 14px 18px; gap: 6px 30px; }
  .wb-deal-rail li { margin-right: 0; }
}

/* ===== detailtoets (28 okt) ===== */
/* vacature: inhoud pas tonen als de vacaturetekst erin staat (geen verspringende eerste weergave) */
html.js .wb-vacature:not(.gevuld) { visibility: hidden; }
/* groepschat: de ruimte voor de vragen staat er meteen; de vragen vallen erin (alleen transform/opacity),
   zodat de chat en alles eronder niet meer verschuift terwijl de lijst uitklapt */
.wb-chat-keuze.dicht .wb-chat-keuzes-vak { grid-template-rows: 1fr; }
.wb-chat-keuzes-vak { transition: none; }
/* gezichtjes boven de chat: '+ jij?' bleef op een telefoon niet op één regel */
.wb-chat-mensen span { white-space: nowrap; flex: none; }
.wb-chat-mensen img { flex: none; }
@media (max-width: 560px), (min-width: 901px) and (max-width: 1180px) {
  .wb-chat-mensen img { width: 32px; height: 32px; margin-right: -13px; }
  .wb-chat-mensen span { margin-left: 14px; }
}
@media (max-width: 360px) { .wb-chat-mensen img { width: 28px; height: 28px; margin-right: -10px; } }
/* minder beweging: voorproefjes als stilstaand beeld tonen in plaats van een leeg vlak */
@media (prefers-reduced-motion: reduce) { .wb-voorproef { display: block; } }
/* uploadvakken: focus met dezelfde gele gloed als de invoervelden (alleen een gele stippellijn viel weg) */
.wb-drop:focus-within { box-shadow: 0 0 0 3px rgba(249,255,133,.25); }
/* contrast (WCAG AA) en alleen kleuren uit de tokens: grijze bijschriften in de agenda op --zacht,
   de naam van Heleen in de groepschat een tint donkerder (4,0 → 4,9 : 1) */
.wb-agenda .ao-wie span, .wb-agenda .ao5-uren span, .wb-agenda .ao5-dag li.ao5-vrij-vlak { color: var(--zacht); }
.wb-chat-msg[data-wie="Heleen"] b { color: var(--chat-heleen); }
.wb-agenda .ao5-teams { color: var(--grijs); }

/* ---------- Zo gaat solliciteren: optie 1 (keuze Jochem 28 okt) ----------
   Terwijl je scrolt tekent de stippellijn zich uit; elke cirkel kleurt geel zodra de lijn hem bereikt en dan
   verschijnt die stap. Alleen transform/opacity. Tijdens het tekenen (.wb-zg-teken) neemt een eigen lijn de plaats
   van de vaste ::before-lijn over; na afloop gaat die klasse eraf en staat het blok er precies zo als voorheen.
   Op mobiel (≤600px) staat de cirkel links naast de tekst, met een verticale stippellijn (die blijft staan).
   Zonder JS of met 'minder beweging': direct het eindbeeld. Zie de IIFE "Zo gaat solliciteren" in werken-bij.js. */
/* houvast voor de lijn alleen zolang die er is: een vaste position:relative op .wrap verschuift in Chromium de tekst subpixel */
.wb-zg.wb-zg-teken .wrap { position: relative; }
.wb-zg-route { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; }
.wb-zg.wb-zg-teken .wb-zg-route { display: block; }
.wb-zg.wb-zg-teken .wb-stappen::before { display: none; }
.wb-zg-lijn { position: absolute; overflow: hidden; }
.wb-zg-lijn > i, .wb-zg-lijn > i > i { display: block; width: 100%; height: 100%; }
.wb-zg-lijn > i { overflow: hidden; }
.wb-zg-lijn.h { height: 1.5px; }
.wb-zg-lijn.v { width: 1.5px; margin-left: -.75px; }
.wb-zg-lijn.h > i > i { border-top: 1.5px dashed var(--inkt); }
.wb-zg-lijn.v > i > i { border-left: 1.5px dashed var(--inkt); }
.js .wb-zg-teken .wb-stap-nr { background: var(--beige); }
.js .wb-zg-teken .wb-stap-nr::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--geel); transition: transform .45s var(--ease); }
.js .wb-zg-teken li:not(.wb-zg-aan) .wb-stap-nr::before { transform: scale(0); }
.js .wb-zg-teken strong, .js .wb-zg-teken .wb-stap-tekst { transition: opacity .5s ease, transform .6s var(--ease); }
.js .wb-zg-teken .wb-stap-tekst { transition-delay: .08s; }
.js .wb-zg-teken li:not(.wb-zg-aan) strong, .js .wb-zg-teken li:not(.wb-zg-aan) .wb-stap-tekst { opacity: 0; transform: translateY(10px); }
.wb-zg li.wb-zg-ping::after { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--inkt); opacity: 0; pointer-events: none; animation: wbZgPing .7s var(--ease); }
@keyframes wbZgPing { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@media (max-width: 600px) {
  .js .wb-proces .wb-stappen li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-content: start; }
  .js .wb-proces .wb-stap-nr { grid-row: 1 / span 2; align-self: start; }
  .js .wb-proces .wb-stappen strong { margin-top: 8px; }
  .wb-zg .wrap { position: relative; }
  .wb-zg .wb-zg-route { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-zg *, .wb-zg *::before, .wb-zg *::after { transition: none !important; animation: none !important; }
}

/* Normcheck (28 okt): citaatstipjes krijgen een onzichtbaar aanraakvlak van 44 px (beeld ongewijzigd), zoals op de homepage */

/* contrast AA (beeld-techniek 28 okt): label 'via Teams' in de agenda haalde 4,43:1 op het lila vlak; nu --grijs (8,4:1). */
.wb-agenda .ao5-teams, .wb-agenda .ao5-teams * { color: var(--grijs) !important; }

/* toegankelijkheid (beeld-techniek 28 okt): de zwevende solliciteerknop staat buiten beeld zolang hij niet .zichtbaar is,
   maar was nog met Tab te bereiken (focus op iets onzichtbaars). Nu pas focusbaar als hij in beeld schuift; het in- en
   uitschuiven zelf is ongewijzigd. */
.wb-plakknop { visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
.wb-plakknop.zichtbaar { visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
body.menu-open .wb-plakknop { visibility: hidden; transition: none; } /* nooit over het geopende menu (zoals toestemming.css) */

/* grafisch 29 okt (bovenste helft): geen los woord in chips; inleiding klantenmuur op leesbare regellengte */
.wb-chat .wb-chat-keuzeknop span { text-wrap: balance; }
.wb-spot-tekst > p { max-width: 30em; }
/* klantenmuur met toetsenbord: de gekozen tegel krijgt een focusrand op de kleurlaag (die ligt erboven) */
.wb-spot-grijs .wb-spot-tegel:focus { outline: none; }
.wb-spot-kleur .wb-spot-tegel.focus { box-shadow: inset 0 0 0 2px var(--inkt); }
/* herstel 29 okt (bovenste helft): kolommen gelijk bovenaan, cijfers op het 2:3-raster, held leesbaar op 901–1300, geen weeswoorden */
@media (min-width: 901px) {
  .wb-spot .wrap { align-items: start; }
  .wb-getallen .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px clamp(32px, 6vw, 90px); }
  .wb-getallen .wrap > div { max-width: 340px; }
}
.wb-held-vol .wb-knop-licht { background: var(--wit); }
@media (min-width: 901px) and (max-width: 1300px) {
  .wb-held-vol::before { background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 40%, rgba(255,255,255,.55) 60%, rgba(255,255,255,0) 80%); }
}
.wb-intro, .wb-chat-tekst > p, .wb-spot-tekst > p, .wb-spot-zin, .wb-chat-keuze-kop { text-wrap: pretty; }
.wb-chat .wb-chat-keuzeknop { border-radius: 22px; }

/* Vacaturepagina (29 okt): terug-pijl reageert op hover, vinkteksten zonder los woord */
.wb-pijl-terug { transition: transform .3s var(--ease); }
.wb-terug:hover .wb-pijl-terug { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { .wb-pijl-terug { transition: none; } }
.wb-vi-vink .t { text-wrap: balance; }
/* herstel 29 okt (onderste helft): uitlijning, witruimte op de norm, tikvlak 44px, beeld binnen de marge, leesbare maten */
.wb-spot + .wb-deal { padding-top: 0; }
.wb-filmrij > li > .wb-strook { display: flex; flex-direction: column; justify-content: flex-start; }
@media (max-width: 1100px) { .wb-g1-tree b { display: block; min-height: 2.4em; } }
.wb-vm .knoppen .zacht { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) { .wb-fo-geel { margin-right: clamp(10px, 3vw, 22px); } }
@media (min-width: 901px) and (max-width: 1180px) { .wb-pand-beeld { justify-content: flex-start; } .wb-pand .held-pand { width: min(460px, 92%); } }
.wb-loon-rij p { text-wrap: pretty; }
/* agenda liggend / kleine tablet: niet kleiner dan staand (onder 861 zijn de kolommen te smal voor 12px) */
@media (min-width: 861px) and (max-width: 1100px) { .wb-agenda .ao5-dag li { font-size: 12px; } }
@media (max-width: 560px) {
  .wb-agenda .ao5-uren span, .wb-agenda .ao5-dag li, .wb-agenda .ao-leg, .wb-agenda .ao5-kop em, .wb-agenda .ao5-kop em.thuis { font-size: 13px; }
  .wb-agenda .ao-leg { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 22px; }
}
/* Vanaf een vacature terug naar 'Alle vacatures' (werken-bij.html#vacatures): meteen daar staan, zonder zichtbaar te scrollen
   en zonder dat de blokken opnieuw infaden (zelfde aanpak als team.html#<id> in style.css) */
html:has(#vacatures:target):not(.wb-vac-los) { scroll-behavior: auto; } /* .wb-vac-los: werken-bij.js, na de eerste handeling */
.js:has(#vacatures:target) #vacatures [data-in] { opacity: 1; transform: none; transition: none; }
/* herstel 30 okt (grafische controle, ronde 2-A1) */
/* Groeien: de labels onder de tijdlijn blijven binnen hun eigen kolom. 601–1100: twee regels zodra een label de kolom
   bijna vult ('Jur. / medewerker'); telefoons tot 409px: afbreken op de zachte afbreekstreepjes in de HTML (Werk-student,
   mede-werker), die verder nergens gebruikt worden; 320: iets kleiner en ruimte voor drie regels, zodat de data gelijk staan. */
.wb-g1-tree b { -webkit-hyphens: none; hyphens: none; }
@media (min-width: 601px) and (max-width: 1100px) { .wb-g1-tree b { max-width: calc(100% - 16px); min-width: min-content; } }
@media (max-width: 409px) { .wb-gr-kaart .wb-g1-tree b { -webkit-hyphens: manual; hyphens: manual; } }
@media (max-width: 360px) {
  .wb-gr-kaart .wb-g1-tree b, .wb-gr-kaart .wb-g1-tree em { font-size: 11px; }
  .wb-gr-kaart .wb-g1-tree b { min-height: 3.6em; }
}
/* De film: knop overal 24px onder de onderrand van het gele vlak (het vlak steekt clamp(10px, 3vw, 22px) uit) */
.wb-fo-geel + .wb-fo-onder { margin-top: calc(24px + clamp(10px, 3vw, 22px)); }
/* Solliciteer in de kop: even breed op werken-bij en de vacaturepagina's (de langste rolltekst, 'Naar het formulier') */
.kop-balk .wb-sol-knop .rol { min-width: 7.78em; }
/* Agenda 601–1023: de dagkolom is te smal voor 'Thuiswerkdag' naast de datum; dan alleen het huisje (de legenda noemt het) */
@media (min-width: 601px) and (max-width: 1023px) {
  .wb-agenda .ao5-kop em.thuis { padding: 2px 4px; }
  .wb-agenda .ao5-kop em.thuis span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 901–1180: de chat even breed als de klantenmuur eronder (zoals vanaf 1181) */
@media (min-width: 901px) and (max-width: 1180px) { .wb-chat-scherm { max-width: none; justify-self: stretch; } }
/* 901–1180 (keuze 30 okt, optie 1): Deal in dezelfde kolomverdeling als vanaf 1181, zodat de 20%-kaart op de lijn van chat en klantenmuur begint */
@media (min-width: 901px) and (max-width: 1180px) { .wb-deal .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
/* Liggende telefoon: de strook foto boven de titel toont de mensen in plaats van boomkruinen (per foto het juiste stuk) */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .wb-held-foto { height: 25vw; }
  .wb-held-foto img { top: 0; height: 100%; object-position: 58% 65% !important; }
  .wb-held-foto picture:nth-child(1) img { object-position: 58% 90% !important; }
  .wb-held-foto picture:nth-child(4) img { object-position: 58% 50% !important; }
  .wb-held-foto picture:nth-child(5) img { object-position: 58% 85% !important; }
  .wb-held-foto picture:nth-child(8) img { object-position: 58% 35% !important; }
}

/* knoppennorm (30 okt): toetsenbordfocus geeft dezelfde inschuivende vulling als hover (zoals .kn-knop en .wi-knop) */
.wb-knop:focus-visible { color: var(--inkt); }
.wb-knop:focus-visible::before { transform: scaleX(1); }
.wb-knop:focus-visible::after { transform: translateX(4px); }
.wb-vh-knop:focus-visible { color: var(--inkt); }
.wb-vh-knop:focus-visible::before { transform: scaleX(1); }
.wb-vh-knop:focus-visible svg { transform: translateX(4px); }
.wb-vk-knop:focus-visible, a:focus-visible > .wb-vk-knop { color: var(--inkt); }
.wb-vk-knop:focus-visible::before, a:focus-visible > .wb-vk-knop::before { transform: scaleX(1); }
.wb-vk-knop:focus-visible svg, a:focus-visible > .wb-vk-knop svg { transform: translateX(4px); }
.wb-vi-meter a.wb-knop:focus-visible { color: var(--inkt); }
/* 'Bekijk de film': geel schuift van links in in plaats van een harde wissel van achtergrond */
.wb-fo-knop { position: relative; isolation: isolate; overflow: hidden; transition: color .3s; }
.wb-fo-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.wb-fo-knop:focus-visible { background: var(--inkt); color: var(--inkt); }
.wb-fo-knop:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) { .wb-fo-knop:hover { background: var(--inkt); color: var(--inkt); } .wb-fo-knop:hover::before { transform: scaleX(1); } }
.wb-fo-knop.geel::before { background: var(--wit); }
.wb-fo-knop.geel:hover, .wb-fo-knop.geel:focus-visible { background: var(--geel); }

/* ===== ronde 4 (31 okt): contactformulier werken bij naar variant A (zwevend label, zie style.css .formulier.zweef),
   op het eigen donkere glaspaneel met de gele knop; de pandtekening in deze sectie is weg (het pand staat al in de footer) ===== */
.wb .contact.avond .sectiekop { min-height: 0; padding-right: 0; }
.wb .contact.avond .formulier.zweef .zv-veld { border-bottom-color: rgba(255,255,255,.28); }
.wb .contact.avond .formulier.zweef .zv-veld :is(input, textarea) { color: var(--wit); caret-color: var(--geel); }
.wb .contact.avond .formulier.zweef .zv-groot { color: rgba(255,255,255,.55); }
.wb .contact.avond .formulier.zweef :is(.zv-klein, .zv-noot) { color: rgba(255,255,255,.55); }
.wb .contact.avond .formulier.zweef .zv-veld:focus-within { border-bottom-color: var(--geel); box-shadow: 0 1px 0 var(--geel); }
.wb .contact.avond .formulier.zweef .zv-veld:focus-within .zv-klein { color: var(--wit); }
.wb .contact.avond .formulier.zweef .zv-veld:has([aria-invalid="true"]) { border-bottom-color: var(--fout-op-inkt); box-shadow: 0 1px 0 var(--fout-op-inkt); }
.wb .contact.avond .formulier.zweef .zv-veld:has([aria-invalid="true"]) .zv-klein, .wb .contact.avond .formulier.zweef .zv-fout { color: var(--fout-op-inkt); }
.wb .contact.avond .formulier.zweef .zv-slot .verstuur { margin: 0; }
.wb .contact.avond .formulier.zweef .zv-uitleg { color: rgba(255,255,255,.55); }
.wb .contact.avond .formulier.zweef .zv-uitleg a:hover { color: var(--wit); }
.wb .contact.avond .formulier.zweef :focus-visible { outline-color: var(--wit); }
@media (max-width: 860px) {
  .wb .contact.avond .formulier.zweef { padding: 10px 22px 24px; }
  .wb .contact.avond .formulier.zweef .zv-slot .verstuur { padding-left: 22px; padding-right: 20px; }
}
@media (min-width: 861px) { .wb .contact.avond .formulier.zweef { padding-top: 22px; } }
/* de knop 'naar boven' wijkt zolang hij over het formulier zou vallen (werken-bij.js) */
.naarboven.zichtbaar.wb-wijk { opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; }
/* Groeien: vaste hoogte (werken-bij.js zet min-height op de hoogste keuze); de kaart zelf rekt niet mee */
.wb-gr-kaarten { align-content: start; }

/* ===== Vacatures als kaartendek (variant B uit demo-vacaturedek, gekozen door Jochem 31 okt) =====
   De vacaturekaarten liggen op elkaar; de randen van de volgende twee steken rechts uit. Op een aanraakscherm veeg je de
   bovenste weg. Plek van elke kaart in data-pos (0 = bovenop); werken-bij.js zet data-pos en tijdens het vegen de transform. */
:root { --dv-in: var(--bw-in, cubic-bezier(.16, 1, .3, 1)); --dv-uit: var(--bw-uit, cubic-bezier(.4, 0, .2, 1)); --dv-veer: cubic-bezier(.3, 1.35, .5, 1); }


/* ---------- het dek: alle kaarten in één rastervak, dus het dek is zo hoog als de hoogste kaart ---------- */
.dv .dv-kolom { display: flex; flex-direction: column; min-width: 0; }
.dv .dv-dek { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); isolation: isolate; touch-action: pan-y; }
/* 320 px: 'juridisch&nbsp;medewerker' (26 px) is breder dan de kaart en viel 9 px buiten het paneel */
@media (max-width: 359px) { .dv .dv-dek .dia h3 { font-size: 22px; } }
.dv .dv-dek:focus-visible { outline: none; }
.dv .dv-dek .dia {
  position: relative; grid-area: 1 / 1; opacity: 1; visibility: visible;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek, 14px);
  box-shadow: inset 6px 0 0 var(--accent), 0 24px 40px -32px rgba(0, 0, 0, .35);
  transform-origin: 50% 50%; transform: none; z-index: 1; will-change: transform;
  transition: transform .6s var(--dv-in), opacity .35s var(--dv-uit), visibility 0s;
  -webkit-tap-highlight-color: transparent;
}
/* achterkant: een vlak in de kleur van de vacature over de kaart heen (één laag, dus vloeiend in en uit te faden) */
.dv .dv-dek .dia::before { content: ""; position: absolute; inset: -1px; z-index: 2; border: 1px solid rgba(0, 0, 0, .1); border-radius: inherit; background: var(--accent); opacity: 0; pointer-events: none; transition: opacity .3s var(--dv-uit); }
.dv .dv-dek .dia > * { transition: opacity .3s var(--dv-in) .12s; }
.dv .dv-dek .dia:not([data-pos="0"])::before { opacity: 1; }
.dv .dv-dek .dia:not([data-pos="0"]) { pointer-events: none; box-shadow: 0 10px 22px -18px rgba(0, 0, 0, .35); }
.dv .dv-dek .dia:not([data-pos="0"]) > * { opacity: 0; transition: opacity .12s linear; }
.dv .dv-dek .dia[data-pos="0"] { z-index: 9; }

/* vegen: de kaart volgt de vinger zonder vertraging; de kaart die eronder vandaan komt kleurt mee (--dv-p 0…1) */
.dv .dv-dek .dia.dv-sleept, .dv .dv-dek .dia.dv-volgt { transition: none; }
.dv .dv-dek .dia.dv-sleept, .dv .dv-dek .dia.dv-sleept * { -webkit-user-select: none; user-select: none; }
.dv .dv-dek .dia.dv-volgt::before { opacity: calc(1 - var(--dv-p, 0)); transition: none; }
.dv .dv-dek .dia.dv-volgt > * { opacity: var(--dv-p, 0); transition: none; }
.dv .dv-dek .dia.dv-veert { transition: transform .5s var(--dv-veer), opacity .35s var(--dv-uit); }
.dv .dv-dek .dia.dv-weg.dv-weg.dv-weg { z-index: 11; transition: transform .32s cubic-bezier(.25, .5, .5, 1), opacity .32s var(--dv-uit); box-shadow: inset 6px 0 0 var(--accent), 0 24px 40px -32px rgba(0, 0, 0, .35); }
.dv .dv-dek .dia.dv-weg.dv-weg.dv-weg::before { opacity: 0; transition: none; }
.dv .dv-dek .dia.dv-weg.dv-weg.dv-weg > * { opacity: 1; transition: none; }
.dv .dv-dek .dia.dv-terug { transition: transform .6s cubic-bezier(.45, 0, .25, 1), opacity .35s var(--dv-uit); }
/* via lijst, toetsenbord of vanzelf: de oude kaart vervaagt bovenop en gaat pas daarna onder in het dek */
.dv .dv-dek .dia.dv-zakt.dv-zakt.dv-zakt { z-index: 11; opacity: 0 !important; box-shadow: inset 6px 0 0 var(--accent), 0 24px 40px -32px rgba(0, 0, 0, .35); transition: opacity .22s var(--dv-uit), transform 0s .24s; }
.dv .dv-dek .dia.dv-zakt.dv-zakt.dv-zakt::before { opacity: 0; transition: none; }
.dv .dv-dek .dia.dv-zakt.dv-zakt.dv-zakt > * { opacity: 1; transition: none; }


/* ---------- B · rustige stapel: de volgende twee kaarten steken 12 en 24 px rechts uit ---------- */
.dv-b .dv-dek { padding-right: 24px; }
.dv-b .dv-dek .dia { transform-origin: 100% 50%; }
.dv-b .dv-dek .dia[data-pos="1"] { z-index: 8; transform: translateX(12px) scale(.94); }
.dv-b .dv-dek .dia[data-pos="2"] { z-index: 7; transform: translateX(24px) scale(.88); }
.dv-b .dv-dek .dia:is([data-pos="3"], [data-pos="4"], [data-pos="5"], [data-pos="6"], [data-pos="7"]) { z-index: 6; opacity: 0; transform: translateX(24px) scale(.88); }
/* de vorige kaart wacht links buiten beeld, zodat hij bij terugvegen van links binnenschuift */
.dv-b .dv-dek .dia.dv-vorige.dv-vorige { z-index: 10; opacity: 0; transform: translateX(calc(-100% - 24px)); }

/* ---------- vegen-hint en teller (alleen op een aanraakscherm) ---------- */
.dv-hint { display: none; }
.dv-hint[hidden] { display: none !important; } /* maar één vacature open: niets te vegen */
@media (hover: none) and (pointer: coarse) {
  .dv-hint { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 0; font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); }
  .dv-hint-t { display: inline-flex; align-items: center; gap: 10px; }
  .dv-hint svg { width: 18px; height: 18px; }
  .dv-tel { font-variant-numeric: tabular-nums; }
  .dv-tel b { font-weight: 500; color: var(--inkt); }
  .dv-b .dv-hint { margin-right: 24px; } /* gelijk met de rechterrand van de bovenste kaart */
}

/* ---------- mobiel: dek boven de lijst, zoals de echte pagina ---------- */
@media (max-width: 900px) {
  .dv .wb-vm-rij .dv-kolom { order: -1; }
}

/* ---------- toetsenbord: focus op het dek zelf (pijltjes werken dan) geeft een rand om de bovenste kaart ---------- */
.dv .dv-dek .dia a:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.dv .dv-dek:focus-visible .dia[data-pos="0"] { outline: 2px solid var(--inkt); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .dv .dv-dek .dia, .dv .dv-dek .dia::before, .dv .dv-dek .dia > *, .dv .dv-dek .dia.dv-veert, .dv .dv-dek .dia.dv-weg, .dv .dv-dek .dia.dv-terug, .dv .dv-dek .dia.dv-zakt.dv-zakt.dv-zakt { transition: none !important; }
}

/* B: kaarten die van of naar 'vorige' gaan zonder dat de bezoeker ze meesleept: niet zichtbaar door het beeld schuiven */
.dv-b .dv-dek .dia.dv-sprong { transition: opacity .35s var(--dv-uit) .1s; } /* stond onzichtbaar links: springt, vervaagt dan in */
.dv-b .dv-dek .dia.dv-stilweg.dv-stilweg.dv-stilweg { z-index: 1; opacity: 0 !important; transition: opacity .2s var(--dv-uit), transform 0s .22s; } /* stond zichtbaar: vervaagt ter plekke, springt dan */
.dv .dv-dek .dia.dv-direct::before { transition: none; }
.dv .dv-dek .dia.dv-direct > * { transition: opacity .3s var(--dv-in) .22s; } /* pas als de oude kaart weg is: nooit twee teksten door elkaar (zoals de echte pagina) */

/* ===== Iets terugdoen (klassen wb-mvo: wb-terug is al de link 'Terug naar alle vacatures') (Jochem 31 okt): onder de filmpjes, in een rustig kader met kleine grijze logo's (zoals de andere
   logo's op deze pagina). Beweging bewust ingetogen: het kader komt op met de pagina ([data-in]), dan groeit een dunne gele lijn
   langs de bovenrand (zoals onder de grote koppen) en komen de logo's kort na elkaar op; aanwijzen geeft een logo zijn kleur. ===== */
.wb-mvo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px clamp(40px, 6vw, 96px); margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3vw, 40px); background: var(--tegel); border: 1px solid rgba(0,0,0,.06); border-radius: var(--hoek, 14px); overflow: hidden; }
.wb-mvo::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--geel); transform-origin: 0 50%; }
.wb-mvo-tekst p { margin: 0; max-width: 60ch; text-wrap: pretty; }
.wb-mvo-kop { margin: 0 0 10px; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--inkt); }
.wb-mvo-logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 36px; flex: none; }
.wb-mvo-logos img { display: block; width: auto; filter: grayscale(1); opacity: .8; transition: filter .45s var(--ease), opacity .45s var(--ease); }
.wb-mvo-logos li:hover img { filter: none; opacity: 1; }
.wb-mvo-logos li:first-child img { height: 64px; }
.wb-mvo-logos li:last-child img { height: 36px; }
.js .wb-mvo[data-in]::before { transform: scaleX(0); transition: transform 1.2s var(--ease) .3s; }
.js .wb-mvo[data-in].in::before { transform: none; }
.js .wb-mvo[data-in] .wb-mvo-logos li { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .wb-mvo[data-in].in .wb-mvo-logos li { opacity: 1; transform: none; }
.js .wb-mvo[data-in].in .wb-mvo-logos li:first-child { transition-delay: .45s; }
.js .wb-mvo[data-in].in .wb-mvo-logos li:last-child { transition-delay: .6s; }
@media (max-width: 860px) {
  .wb-mvo { flex-direction: column; align-items: flex-start; }
  .wb-mvo-logos { gap: 28px; }
  .wb-mvo-logos li:first-child img { height: 54px; }
  .wb-mvo-logos li:last-child img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .wb-mvo[data-in]::before, .js .wb-mvo[data-in] .wb-mvo-logos li { transform: none; opacity: 1; transition: none; }
}

/* sollicitatieformulier: melding onder elk fout veld, zoals de zwevende contactformulieren (Jochem 31 okt) */
.wb-form .wb-fout { margin: -2px 0 0; font-size: 14px; line-height: 1.4; color: var(--fout-op-inkt); }
.wb-form .wb-fout:empty { display: none; }

/* aanraakscherm: na een tik geen vastgehouden gele hover op Solliciteer (testronde 1 nov) */
@media (hover: none) { .wb-sol-knop:hover:not(:focus-visible) { background: transparent; } }

/* vacatures op de telefoon: alleen de teller, zonder 'Veeg voor de volgende' (keuze Jochem 1 nov) */
.dv-hint { justify-content: flex-end; }

/* vacature: eisen selecteerbaar (keuze Jochem 1 nov). De rij is het kader; alleen het vinkvakje is de knop (tikvlak 44px),
   de tekst is gewone tekst. Zelfde beeld als de knop van daarvoor. */
.wb-vi-vink li.wb-vink-rij { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--hoek, 14px); background: var(--wit); color: var(--tekst); transition: opacity .4s, transform .5s var(--ease), border-color .3s, background .3s; }
.wb-vi-vink li.wb-vink-rij:hover { border-color: var(--inkt); }
.wb-vi-vink li.wb-vink-rij button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.wb-vi-vink li.wb-vink-rij button:active { transform: scale(.92); }
.wb-vi-vink li.wb-vink-rij button:focus-visible { outline: 2px solid var(--inkt); outline-offset: -6px; }
.wb-vi-vink li.wb-vink-rij .t { padding-top: 1px; }
.wb-vi-vink li.wb-vink-rij:has(button[aria-pressed="true"]) { border-color: var(--inkt); background: var(--vink-aan); }
.wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak { background: var(--geel); }
.wb-vi-vink li.wb-vink-rij button[aria-pressed="true"] .vak svg { stroke-dashoffset: 0; }

/* vacature: blok 'Wat ga je doen' (teruggezet, keuze Jochem 1 nov): genummerde punten naast de kop, zelfde raster als de eisen */
.wb-vi-doen { padding-bottom: 0; }
.wb-vi-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.wb-vi-punten li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--lijn); }
.wb-vi-punten li:last-child { border-bottom: 1px solid var(--lijn); }
.wb-vi-punten .nr { font-size: 14px; letter-spacing: .08em; color: var(--zacht); font-variant-numeric: tabular-nums; padding-top: 3px; }
.wb-vi-punten p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tekst); }

/* Vacaturepagina, Dit biedt Workx: één fotolijst naast het lijstje; de foto's komen rustig na elkaar (werken-bij.js) */
.wb-bk-foto { position: relative; margin: 0 0 20px; aspect-ratio: 16 / 10; border-radius: var(--hoek, 14px); overflow: hidden; background: var(--raster-vlak); }
.wb-bk-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.wb-bk-foto img.aan { opacity: 1; }
@media (min-width: 1000px) {
  .wb-bk .wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 25vw, 330px); column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  .wb-bk .wrap > * { grid-column: 1; }
  .wb-bk .wrap > .wb-loon { grid-column: 1 / -1; }
  .wb-bk .wrap > .wb-bk-foto { grid-column: 2; grid-row: 2; margin: 0; aspect-ratio: 1; position: sticky; top: 110px; }
}
@media (prefers-reduced-motion: reduce) { .wb-bk-foto img { transition: none; } }

/* boom naast het pand (9 nov, keuze Jochem): de iep met witte blaadjes uit boom-varianten.js, zoals op de proefsite (wbboom 9) */
/* bomen in de lijnstijl van het pand (wbboom 1-10, boom-varianten.js): wit, bij de tuin-hover lichtgeel */
.wx-boom-vorm2 { fill: #fff; transition: fill .4s ease; }
.held-pand svg[data-kb-hover="tuin"] .wx-boom-vorm2 { fill: var(--boom-hover); }
/* bomen zonder omtrek (7 nov): een zachte gele rand rond de takken (in de tekening zelf, boom-varianten.js), iets voller als de muis
   in de buurt komt of de tuin aangewezen wordt; alleen opacity, zodat het soepel blijft */
.held-pand svg .wx-boom-nieuw .wx-boom-kruin { filter: none !important; }
.wx-boom-gloed { opacity: .7; transition: opacity .4s ease; }
/* de nieuwe bomen wiegen niet: zo hoeft de browser ze niet elk beeldje opnieuw te tekenen */
.wx-boom-nieuw .wx-boom-kruin { animation: none !important; }
.held-pand svg[data-kb-hover="tuin"] .wx-boom-gloed { opacity: 1; }
/* de boom tekent zich (boom-varianten.js): lijnen per vertakkingsniveau, daarna het wit en de gloed */
.wx-boom-nieuw.wacht { visibility: hidden; }
.wx-boom-nieuw.tekent .wxb-lijn { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wxbLijn .75s ease-out forwards; animation-delay: calc(var(--n) * .32s); }
.wx-boom-nieuw.tekent .wxb-vlak { opacity: 0; animation: wxbVlak .5s ease forwards; animation-delay: calc(var(--n) * .32s + .45s); }
.wx-boom-nieuw.tekent .wx-boom-gloed { opacity: 0; animation: wxbGloed 1s ease forwards; animation-delay: 2.4s; }
@keyframes wxbLijn { to { stroke-dashoffset: 0; } }
@keyframes wxbVlak { to { opacity: 1; } }
@keyframes wxbGloed { to { opacity: .7; } }
/* tijdens de pen: alleen de boom van de tekening zichtbaar (boom-varianten.js), de rest tekent de pen */
.held-pand svg.bw-tekent.wxb-pen { opacity: 1 !important; visibility: hidden; }
.held-pand svg.bw-tekent.wxb-pen .wx-boom { visibility: visible; }
.held-pand svg.bw-tekent.wxb-pen mask, .held-pand svg.bw-tekent.wxb-pen mask *, .held-pand svg.bw-tekent.wxb-pen clipPath, .held-pand svg.bw-tekent.wxb-pen clipPath * { visibility: visible; }
/* de boom groeit (boom-varianten.js, 9 nov): na de takken lopen de blaadjes uit vanaf hun steeltje */
.wx-boom-nieuw.groeit .wxb-knop { transform-box: view-box; transform: scale(0); animation: wxbKnop .55s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes wxbKnop { to { transform: scale(1); } }

/* boom van Jury (boom-varianten.js soort 11, boom-jury.js): groeit uit de grond; lijnen tekenen zich, de kruin groeit vanaf de stam */
.wxb-jury { pointer-events: none; }
.wxb-jury.wxj-groeit .wxj-l { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation-name: wxjLijn; animation-timing-function: cubic-bezier(.4, 0, .2, 1); animation-fill-mode: forwards; }
@keyframes wxjLijn { to { stroke-dashoffset: 0; } }
.wxb-jury .wxj-kruin { transform-box: view-box; }
.wxb-jury.wxj-groeit .wxj-kruin { animation: wxjKruin 1.9s cubic-bezier(.2, .8, .25, 1) .65s both; }
@keyframes wxjKruin { from { transform: scale(.12); } }
.wxb-jury.wxj-groeit .wxj-grijs { opacity: 0; animation: wxjVlak .7s ease 2.3s forwards; }
@keyframes wxjVlak { to { opacity: 1; } }
.wxb-jury .wxj-vlinder { transform-box: fill-box; transform-origin: center; animation: wxjFladder 4.2s ease-in-out infinite; animation-delay: calc(var(--v, 0) * -1.4s); }
@keyframes wxjFladder { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(2.5px, -3.5px) rotate(-5deg); } 65% { transform: translate(-1.5px, -1px) rotate(3deg); } }
.buiten-beeld .wxj-vlinder { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wxb-jury .wxj-vlinder, .wxb-jury .wxj-kruin { animation: none; } }

/* klikbare plekken in het pand (binnen.js): geel rondje met plus; bij aanwijzen een kwartslag en zwart (ttwwoo V5) */
.kb-plus { pointer-events: none; }
.kb-plus-in { transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.kb-plus circle { fill: var(--geel); transition: fill .3s ease; }
.kb-plus path { fill: none; stroke: var(--inkt); stroke-width: 1.2; stroke-linecap: round; transition: stroke .3s ease; }
.held-pand svg[data-kb-hover="boven"] .kb-plus[data-zone="boven"] .kb-plus-in,
.held-pand svg[data-kb-hover="beneden"] .kb-plus[data-zone="beneden"] .kb-plus-in,
.held-pand svg[data-kb-hover="tuin"] .kb-plus[data-zone="tuin"] .kb-plus-in { transform: rotate(90deg); }
.held-pand svg[data-kb-hover="boven"] .kb-plus[data-zone="boven"] circle,
.held-pand svg[data-kb-hover="beneden"] .kb-plus[data-zone="beneden"] circle,
.held-pand svg[data-kb-hover="tuin"] .kb-plus[data-zone="tuin"] circle { fill: var(--inkt); }
.held-pand svg[data-kb-hover="boven"] .kb-plus[data-zone="boven"] path,
.held-pand svg[data-kb-hover="beneden"] .kb-plus[data-zone="beneden"] path,
.held-pand svg[data-kb-hover="tuin"] .kb-plus[data-zone="tuin"] path { stroke: var(--geel); }
@media (prefers-reduced-motion: reduce) { .kb-plus-in { transition: none; } }
.wxb-jury.wxj-groeit .wxj-vul { opacity: 0; animation: wxjVlak .6s ease 2.9s forwards; }

/* Werken bij (ttwwoo V5, 9 nov): de plusjes laten zien dat je kunt klikken, dus geen gele gloed meer bij het pand:
   de ramen en de boom lichten niet op als de muis in de buurt komt, en het licht gaat niet meer af en toe feller aan */
.wb-pand .held-pand { --kb-nabij: 0 !important; }
/* telefoon: de boom iets kleiner en naar links, zodat kruin en vlinder niet tegen de schermrand worden afgesneden */
@media (max-width: 560px) { .wxb-jury { transform-box: view-box; transform-origin: 353px 398px; transform: translateX(-12px) scale(.94); } }
/* Werken bij: geen licht en gloed bij de voordeur (Jochem 9 nov); de ramen houden hun licht. Verborgen met visibility,
   niet display:none: binnen.js meet de deur nog mee voor het klikvlak van de begane grond */
.wb-pand .held-pand .wx-deur.licht, .wb-pand .held-pand .wx-gloed[data-verd="2"] { visibility: hidden; }