/* Flexbuddy micro-animaties — speelt 1x af zodra het in beeld komt */
:root{--fba-accent:oklch(38% .07 240)}
.fba-wrap{width:100%;max-width:560px;aspect-ratio:560/430;position:relative;overflow:hidden;margin:0 auto}
/* schaduw van afgeronde kaarten niet rechthoekig afknippen ("hoekjes"); met JS is het canvas altijd
   passend geschaald, en box-shadow telt niet mee voor scrollbreedte, dus geen horizontale scroll */
.js .fba-wrap{overflow:visible}
.fba-urenbon,.fba-compliance,.fba-shortlist,.fba-eenchat{overflow:visible!important}
.fba{position:absolute!important;top:0;left:0;transform-origin:top left;font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;color:#091F3B;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;line-height:normal}
.fba *{box-sizing:border-box}
/* mobiele varianten: onder 760 px vervangt .fba-m (eigen staand canvas, tekst op ware grootte) de desktopversie .fba-d */
.fba-wrap.fba-m{display:none}
@media (max-width:760px){.fba-wrap.fba-d{display:none}.fba-wrap.fba-m{display:block}}

/* ---------- De stapel — uren binnen ---------- */
.js .fba-stapel .drop, .js .fba-stapel .up, .js .fba-stapel .fade{opacity:0}
.fba-stapel.run .drop{animation:fbDrop-stapel 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-stapel.run .up{animation:fbUp-stapel 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-stapel.run .fade{animation:fbFade-stapel .71s ease-out calc(var(--d,0ms) * 1.4) both}
@keyframes fbDrop-stapel{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbUp-stapel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-stapel{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fba-stapel .drop,.fba-stapel .up,.fba-stapel .fade{animation:none!important;opacity:1!important;transform:none!important}}

/* ---------- Shortlist in 60 seconden ---------- */
.js .fba-shortlist .drop, .js .fba-shortlist .fade, .js .fba-shortlist .pop, .js .fba-shortlist .fly{opacity:0}
.fba-shortlist.run .drop{animation:fbDrop-shortlist 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-shortlist.run .fade{animation:fbFade-shortlist .71s ease-out calc(var(--d,0ms) * 1.4) both}
.fba-shortlist.run .pop{animation:fbPop-shortlist .71s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-shortlist.run .dim{animation:fbDim-shortlist .85s ease-out calc(var(--d,0ms) * 1.4) both}
.fba-shortlist.run .fly{animation:fbFly-shortlist 2.67s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
@keyframes fbDrop-shortlist{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbFade-shortlist{from{opacity:0}to{opacity:1}}
@keyframes fbPop-shortlist{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes fbDim-shortlist{from{opacity:1}to{opacity:.38}}
@keyframes fbFly-shortlist{0%{opacity:0;transform:translate(var(--fx),calc(var(--fy) - 14px)) rotate(var(--fr))}25%{opacity:1;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}50%{opacity:1;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fba-shortlist .drop,.fba-shortlist .fade,.fba-shortlist .pop,.fba-shortlist .fly{animation:none!important;opacity:1!important;transform:none!important}.fba-shortlist .dim{animation:none!important;opacity:.38!important}}

/* ---------- Van vacature tot factuur ---------- */
.js .fba-proces .drop, .js .fba-proces .up, .js .fba-proces .fade, .js .fba-proces .grow, .js .fba-proces .pop{opacity:0}
.fba-proces.run .drop{animation:fbDrop-proces 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-proces.run .up{animation:fbUp-proces 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-proces.run .fade{animation:fbFade-proces .71s ease-out calc(var(--d,0ms) * 1.4) both}
.fba-proces.run .grow{animation:fbGrow-proces var(--t,.3s) linear calc(var(--d,0ms) * 1.4) both;transform-origin:left center}
.fba-proces.run .pop{animation:fbPop-proces .64s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-proces.run .travel{animation:fbTravel-proces 3.1s ease-in-out calc(var(--d,0ms) * 1.4) both}
@keyframes fbDrop-proces{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbUp-proces{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-proces{from{opacity:0}to{opacity:1}}
@keyframes fbGrow-proces{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes fbPop-proces{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes fbTravel-proces{0%,14%{transform:translateX(0)}28%,42%{transform:translateX(133px)}56%,70%{transform:translateX(266px)}84%,100%{transform:translateX(399px)}}
@media (prefers-reduced-motion:reduce){.fba-proces .drop,.fba-proces .up,.fba-proces .fade,.fba-proces .grow,.fba-proces .pop{animation:none!important;opacity:1!important;transform:none!important}.fba-proces .travel{animation:none!important;transform:translateX(399px)!important}}

/* ---------- Vijf tools, één chat ---------- */
.js .fba-eenchat .up, .js .fba-eenchat .pop, .js .fba-eenchat .gather{opacity:0}
.fba-eenchat.run .up{animation:fbUp-eenchat 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-eenchat.run .pop{animation:fbPop-eenchat .64s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-eenchat.run .gather{animation:fbGather-eenchat 3.21s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
@keyframes fbUp-eenchat{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbPop-eenchat{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes fbGather-eenchat{0%{opacity:0;transform:translateY(-14px) rotate(var(--r,0deg))}18.4%{opacity:1;transform:rotate(var(--r,0deg))}65.1%{opacity:1;transform:rotate(var(--r,0deg))}100%{opacity:0;transform:translate(var(--gx,0px),var(--gy,0px)) scale(.25) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.fba-eenchat .up,.fba-eenchat .pop{animation:none!important;opacity:1!important;transform:none!important}.fba-eenchat .gather{display:none!important}}

/* ---------- Een week wordt een halve dag ---------- */
.js .fba-weekagenda .up, .js .fba-weekagenda .fade, .js .fba-weekagenda .growy, .js .fba-weekagenda .burn, .js .fba-weekagenda .pop{opacity:0}
.fba-weekagenda.run .up{animation:fbUp-weekagenda 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-weekagenda.run .fade{animation:fbFade-weekagenda .71s ease-out calc(var(--d,0ms) * 1.4) both}
.fba-weekagenda.run .pop{animation:fbPop-weekagenda .71s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-weekagenda.run .growy{animation:fbGrowY-weekagenda .85s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both;transform-origin:center top}
.fba-weekagenda.run .burn{animation:fbBurn-weekagenda 3.1s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both;transform-origin:center top}
@keyframes fbUp-weekagenda{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-weekagenda{from{opacity:0}to{opacity:1}}
@keyframes fbPop-weekagenda{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes fbGrowY-weekagenda{from{opacity:1;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@keyframes fbBurn-weekagenda{0%{opacity:0;transform:translateY(-14px)}25%{opacity:1;transform:none}60%{opacity:1;transform:none}100%{opacity:0;transform:scaleY(.12)}}
@media (prefers-reduced-motion:reduce){.fba-weekagenda .up,.fba-weekagenda .fade,.fba-weekagenda .growy,.fba-weekagenda .pop{animation:none!important;opacity:1!important;transform:none!important}.fba-weekagenda .burn{display:none!important}}

/* ---------- Live sync met AFAS ---------- */
.js .fba-afas .drop, .js .fba-afas .up, .js .fba-afas .fade, .js .fba-afas .grow, .js .fba-afas .pop, .js .fba-afas .hop{opacity:0}
.fba-afas.run .drop{animation:fbDrop-afas 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-afas.run .up{animation:fbUp-afas 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-afas.run .fade{animation:fbFade-afas .57s ease-out calc(var(--d,0ms) * 1.4) both}
.fba-afas.run .grow{animation:fbGrow-afas .64s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both;transform-origin:left center}
.fba-afas.run .pop{animation:fbPop-afas .64s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-afas.run .dim{animation:fbDim-afas .85s ease-out calc(var(--d,0ms) * 1.4) both}
.fba-afas.run .hop{animation:fbHop-afas 1.41s cubic-bezier(.45,0,.25,1) calc(var(--d,0ms) * 1.4) both}
@keyframes fbDrop-afas{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbUp-afas{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-afas{from{opacity:0}to{opacity:1}}
@keyframes fbGrow-afas{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes fbPop-afas{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes fbDim-afas{from{opacity:1}to{opacity:.35}}
@keyframes fbHop-afas{0%{opacity:0;transform:translate(-292px,0) rotate(0deg)}10%{opacity:1;transform:translate(-292px,0) rotate(-3deg)}50%{opacity:1;transform:translate(-146px,-34px) rotate(2deg)}88%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){.fba-afas .drop,.fba-afas .up,.fba-afas .fade,.fba-afas .grow,.fba-afas .pop{animation:none!important;opacity:1!important;transform:none!important}.fba-afas .dim{animation:none!important;opacity:.35!important}.fba-afas .hop{display:none!important}}

/* ---------- Compliance zonder eraan te denken ---------- */
.js .fba-compliance .drop, .js .fba-compliance .up, .js .fba-compliance .fade, .js .fba-compliance .pop, .js .fba-compliance .stamp, .js .fba-compliance .scan{opacity:0}
.fba-compliance.run .drop{animation:fbDrop-compliance 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-compliance.run .up{animation:fbUp-compliance 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-compliance.run .fade{animation:fbFade-compliance .71s ease-out calc(var(--d,0ms) * 1.4) both}
.fba-compliance.run .pop{animation:fbPop-compliance .64s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-compliance.run .stamp{animation:fbStamp-compliance .64s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-compliance.run .scan{animation:fbScan-compliance .98s ease-in-out calc(var(--d,0ms) * 1.4) both}
.js .fba-compliance .sig{stroke-dasharray:260;stroke-dashoffset:260}
.fba-compliance.run .sig{animation:fbDraw-compliance 1.13s ease-out calc(var(--d,0ms) * 1.4) both}
@keyframes fbDrop-compliance{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbUp-compliance{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-compliance{from{opacity:0}to{opacity:1}}
@keyframes fbPop-compliance{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes fbStamp-compliance{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
@keyframes fbScan-compliance{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(94px)}}
@keyframes fbDraw-compliance{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.fba-compliance .drop,.fba-compliance .up,.fba-compliance .fade,.fba-compliance .pop,.fba-compliance .stamp{animation:none!important;opacity:1!important;transform:none!important}.fba-compliance .sig{animation:none!important;stroke-dashoffset:0!important}.fba-compliance .scan{display:none!important}}


/* geen eigen achtergrond: de animatie staat op de sectie zelf */
.fba{background:transparent!important}
.fba-wrap{perspective:900px}
/* transitie pas na de eerste fit() (class .fba-ready), anders krimpt elke animatie zichtbaar bij het laden */
.fba.fba-ready{transition:transform 0.45s cubic-bezier(.22,1,.36,1)}
.fba-wrap:hover .fba{transition:transform 0.16s linear}
@media (prefers-reduced-motion:reduce){.fba{transition:none!important}}


/* ---------- 60 uur wordt 4 uur ---------- */
.js .fba-balken .fade, .js .fba-balken .up, .js .fba-balken .grow{opacity:0}
.fba-balken.run .fade{animation:fbFade-balken .71s ease-out calc(var(--d,0ms) * 1.4) both}
.fba-balken.run .up{animation:fbUp-balken 1.06s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both}
.fba-balken.run .grow{animation:fbGrow-balken 1.27s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * 1.4) both;transform-origin:left center}
@keyframes fbFade-balken{from{opacity:0}to{opacity:1}}
@keyframes fbUp-balken{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbGrow-balken{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.fba-balken .fade,.fba-balken .up,.fba-balken .grow{animation:none!important;opacity:1!important;transform:none!important}}

.fba span{display:inline-block}
/* ---------- Hero-chat: 4 orderpickers in Venlo ---------- */
/* --fbo: alles schuift naar voren zodat de chat direct begint (eerste stap --d:650ms -> 250ms) */
.fba-herochat{--fbo:400ms}
.js .fba-herochat .up, .js .fba-herochat .fade, .js .fba-herochat .pop, .js .fba-herochat .dots{opacity:0}
.js .fba-herochat .type{clip-path:inset(0 100% 0 0)}
.fba-herochat.run .up{animation:fbUp-herochat .75s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat.run .fade{animation:fbFade-herochat .5s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat.run .pop{animation:fbPop-herochat .5s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat.run .type{animation:fbType-herochat 1.6s steps(44,end) calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat.run .send{animation:fbSend-herochat .25s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat.run .ph{animation:fbPh-herochat var(--t,2s) linear calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat.run .dots{animation:fbDots-herochat var(--t,.9s) linear calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat.run .press{animation:fbPress-herochat .35s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat.run .used{animation:fbUsed-herochat .5s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fba-herochat .dots i{display:block;width:7px;height:7px;border-radius:50%;background:#3F78DB}
.fba-herochat .dots i:nth-child(3){background:#EC8159}
.fba-herochat.run .dots i{animation:mzBob-herochat .6s ease-in-out calc(var(--d,0ms) - var(--fbo)) 2}
.fba-herochat.run .dots i:nth-child(2){animation-delay:calc(var(--d,0ms) - var(--fbo) + 120ms)}
.fba-herochat.run .dots i:nth-child(3){animation-delay:calc(var(--d,0ms) - var(--fbo) + 240ms)}
.fba-herochat .mz-actor{transform-origin:50% 92%}
.fba-herochat.run .mz-actor{animation:mzGreet-herochat 1.6s ease-in-out var(--g,200ms) 1,mzJump-herochat 1.7s ease-in-out calc(var(--j,4000ms) - var(--fbo)) 1}
.fba-herochat.run .mzd{animation:mzBob-herochat 1.25s ease-in-out calc(var(--d,0ms) - var(--fbo)) var(--n,3)}
.fba-herochat.run .mzs{animation:mzTw-herochat .85s ease-in-out calc(var(--j,4000ms) - var(--fbo)) 2;transform-origin:center}
@keyframes mzGreet-herochat{0%,100%{transform:none}25%{transform:rotate(8deg) translateY(-7px)}50%{transform:rotate(-5deg)}75%{transform:rotate(8deg) translateY(-7px)}}
@keyframes mzJump-herochat{0%,100%{transform:none}28%,46%{transform:translateY(-30px)}70%{transform:none}80%{transform:translateY(-7px)}90%{transform:none}}
@keyframes mzBob-herochat{0%,60%,100%{transform:none}30%{transform:translateY(-8px)}}
@keyframes mzTw-herochat{0%,100%{transform:none}50%{transform:scale(1.35) rotate(45deg)}}
@keyframes fbUp-herochat{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-herochat{from{opacity:0}to{opacity:1}}
@keyframes fbPop-herochat{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fbType-herochat{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fbSend-herochat{from{opacity:1}to{opacity:0}}
@keyframes fbPh-herochat{0%{opacity:1}4%{opacity:0}96%{opacity:0}100%{opacity:1}}
@keyframes fbDots-herochat{0%{opacity:0}12%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes fbPress-herochat{0%{transform:none}40%{transform:scale(.94);filter:brightness(.75)}100%{transform:none;filter:none}}
@keyframes fbUsed-herochat{from{opacity:1}to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.fba-herochat .up,.fba-herochat .fade,.fba-herochat .pop{animation:none!important;opacity:1!important;transform:none!important}.fba-herochat .send{animation:none!important;opacity:0!important}.fba-herochat .used{animation:none!important;opacity:.45!important}.fba-herochat .ph,.fba-herochat .press,.fba-herochat .mz-actor,.fba-herochat .mzd,.fba-herochat .mzs{animation:none!important}.fba-herochat .dots{display:none!important}}

/* ---------- Foto van een urenbon ---------- */
.js .fba-urenbon .drop, .js .fba-urenbon .up, .js .fba-urenbon .fade, .js .fba-urenbon .pop, .js .fba-urenbon .dots, .js .fba-urenbon .scan{opacity:0}
.fba-urenbon.run .drop{animation:fbDrop-urenbon .68s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * .9) both}
.fba-urenbon.run .up{animation:fbUp-urenbon .68s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * .9) both}
.fba-urenbon.run .fade{animation:fbFade-urenbon .5s ease-out calc(var(--d,0ms) * .9) both}
.fba-urenbon.run .pop{animation:fbPop-urenbon .5s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * .9) both}
.fba-urenbon.run .dots{animation:fbDots-urenbon calc(var(--t,.8s) * .9) linear calc(var(--d,0ms) * .9) both}
.fba-urenbon.run .scan{animation:fbScan-urenbon .81s ease-in-out calc(var(--d,0ms) * .9) both}
.fba-urenbon .dots i{display:block;width:7px;height:7px;border-radius:50%;background:#3F78DB}
.fba-urenbon .dots i:nth-child(3){background:#EC8159}
.fba-urenbon.run .dots i{animation:mzBob-urenbon .54s ease-in-out calc(var(--d,0ms) * .9) 2}
.fba-urenbon.run .dots i:nth-child(2){animation-delay:calc(var(--d,0ms) * .9 + 120ms)}
.fba-urenbon.run .dots i:nth-child(3){animation-delay:calc(var(--d,0ms) * .9 + 240ms)}
.fba-urenbon .mz-actor{transform-origin:50% 92%}
.fba-urenbon.run .mz-actor{animation:mzGreet-urenbon 1.44s ease-in-out var(--g,200ms) 1,mzJump-urenbon 1.53s ease-in-out calc(var(--j,4000ms) * .9) 1}
.fba-urenbon.run .mzd{animation:mzBob-urenbon 1.12s ease-in-out calc(var(--d,0ms) * .9) var(--n,3)}
.fba-urenbon.run .mzs{animation:mzTw-urenbon .76s ease-in-out calc(var(--j,4000ms) * .9) 2;transform-origin:center}
@keyframes mzGreet-urenbon{0%,100%{transform:none}25%{transform:rotate(8deg) translateY(-7px)}50%{transform:rotate(-5deg)}75%{transform:rotate(8deg) translateY(-7px)}}
@keyframes mzJump-urenbon{0%,100%{transform:none}28%,46%{transform:translateY(-30px)}70%{transform:none}80%{transform:translateY(-7px)}90%{transform:none}}
@keyframes mzBob-urenbon{0%,60%,100%{transform:none}30%{transform:translateY(-8px)}}
@keyframes mzTw-urenbon{0%,100%{transform:none}50%{transform:scale(1.35) rotate(45deg)}}
@keyframes fbDrop-urenbon{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbUp-urenbon{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-urenbon{from{opacity:0}to{opacity:1}}
@keyframes fbPop-urenbon{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes fbDots-urenbon{0%{opacity:0}12%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes fbScan-urenbon{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(118px)}}
@media (prefers-reduced-motion:reduce){.fba-urenbon .drop,.fba-urenbon .up,.fba-urenbon .fade,.fba-urenbon .pop{animation:none!important;opacity:1!important;transform:none!important}.fba-urenbon .dots,.fba-urenbon .scan{display:none!important}.fba-urenbon .mz-actor,.fba-urenbon .mzd,.fba-urenbon .mzs{animation:none!important}}


/* balken: geen vast kader, vult de kolom netjes */
.fba-balken{width:560px}
.fba-wrap.balken{max-width:560px;aspect-ratio:560/320}

/* ==========================================================================
   Rennende Buddy (concept 1A: "eenmalig langs de sectierand")
   Buddy rent 1x per bezoek over de naad boven een sectie met [data-buddy-run],
   springt over het pijltje (notch) en verdwijnt rechts. Alles strikt 2D:
   alleen translate, rotate in het vlak en scale; alleen transform/opacity.
   De laag (.fb-run) wordt door animaties.js onderin de sectie BOVEN de naad
   gezet: absoluut, overflow hidden, geen pointer-events, aria-hidden.
   Timing (--dur, --stw, --hs, --hl, --ts, --tl) rekent animaties.js uit op
   basis van de echte breedte en de plek van het pijltje.
   ========================================================================== */
.fb-run{position:absolute;left:0;right:0;bottom:0;z-index:4;overflow:hidden;pointer-events:none;
  --bh:46px;--hh:20px;--dir:1;--step:.42s;height:calc(var(--bh) + var(--hh) + 8px)}
@media (max-width:760px){.fb-run{--bh:34px;--hh:15px}}
.fb-run-defs{position:absolute;width:0;height:0;overflow:hidden}
.fb-run .runner{position:absolute;left:0;bottom:0;visibility:hidden;transform:translateX(-70px)}
.fb-run .actor{transform-origin:50% 92%;--lean:6deg}
.fb-run .hop{transform-origin:50% 100%}
.fb-run .bd{display:block;height:var(--bh);width:calc(var(--bh) * 150 / 154);overflow:visible}
.fb-run .bd .f1o{--n:5px}
.fb-run .bd .f2o{--n:-5px}
.fb-run .dust{position:absolute;inset:0;display:block}
.fb-run .puff{position:absolute;bottom:0;left:calc(50% - 5px - 12px * var(--dir));width:10px;height:10px;border-radius:50%;background:oklch(87% .02 225);opacity:0}
.fb-run .puff.p4{left:calc(50% - 5px + 12px * var(--dir))}
@media (max-width:760px){.fb-run .puff{width:8px;height:8px}}

/* afspelen: rennen met constante snelheid van links naar rechts */
.fb-run .runner.play{visibility:visible;animation:bdTravelA var(--dur) linear both}
.fb-run .runner.play .bd .f1o,.fb-run .runner.play .bd .f2o{transform:translateX(var(--n))}
.fb-run .runner.play .bd-e{transform:translateX(calc(9px * var(--dir)))}
.fb-run .runner.play .puff{animation:bdPuff var(--step) ease-out infinite}
.fb-run .runner.play .puff.p2{animation-delay:calc(var(--step) / -2)}
/* sprong over het pijltje: venster --hs/--hl (fractie van --dur), apex op 50% = midden van de notch; lucht = --ts/--tl */
.fb-run .runner.play .hop{animation:bdLeap calc(var(--dur) * var(--hl)) linear calc(var(--dur) * var(--hs)) 1}
.fb-run .runner.play .actor{animation:bdBob calc(var(--step) / 2) ease-in-out infinite,bdAir calc(var(--dur) * var(--tl)) linear calc(var(--dur) * var(--ts)) 1}
.fb-run .runner.play .bd .f1i{animation:bdFoot var(--step) linear infinite,bdTuck1 calc(var(--dur) * var(--tl)) linear calc(var(--dur) * var(--ts)) 1}
.fb-run .runner.play .bd .f2i{animation:bdFoot var(--step) linear calc(var(--step) / -2) infinite,bdTuck2 calc(var(--dur) * var(--tl)) linear calc(var(--dur) * var(--ts)) 1}
.fb-run .runner.play .dust{animation:bdNoDust calc(var(--dur) * var(--tl)) linear calc(var(--dur) * var(--ts)) 1}
.fb-run .runner.play .puff.p3{animation:bdPuff .4s ease-out calc(var(--dur) * (var(--ts) + var(--tl))) 1}
.fb-run .runner.play .puff.p4{animation:bdPuffFwd .4s ease-out calc(var(--dur) * (var(--ts) + var(--tl))) 1}

@keyframes bdTravelA{from{transform:translateX(-70px)}to{transform:translateX(calc(var(--stw) + 40px))}}
@keyframes bdFoot{
  0%{transform:translate(calc(26px * var(--dir)),0)}
  50%{transform:translate(calc(-26px * var(--dir)),0)}
  75%{transform:translate(0,-8px)}
  100%{transform:translate(calc(26px * var(--dir)),0)}}
@keyframes bdBob{
  0%,100%{transform:rotate(calc(var(--lean) * var(--dir))) translateY(0) scale(1.03,.97)}
  50%{transform:rotate(calc(var(--lean) * var(--dir))) translateY(-4px) scale(.98,1.02)}}
@keyframes bdPuff{
  0%{opacity:0;transform:translateX(0) scale(.3)}
  15%{opacity:.95}
  100%{opacity:0;transform:translate(calc(-24px * var(--dir)),-5px) scale(1.25)}}
@keyframes bdPuffFwd{
  0%{opacity:0;transform:translateX(0) scale(.3)}
  15%{opacity:.95}
  100%{opacity:0;transform:translate(calc(18px * var(--dir)),-4px) scale(1.15)}}
@keyframes bdLeap{
  0%{transform:none;animation-timing-function:ease-out}
  14%{transform:translateY(1px) scale(1.1,.88);animation-timing-function:cubic-bezier(.3,.6,.5,1)}
  24%{transform:translateY(calc(var(--hh) * -.5)) scale(.95,1.07);animation-timing-function:cubic-bezier(.3,.5,.6,1)}
  50%{transform:translateY(calc(var(--hh) * -1)) scale(1);animation-timing-function:cubic-bezier(.4,0,.7,.5)}
  76%{transform:translateY(calc(var(--hh) * -.45)) scale(.97,1.04);animation-timing-function:cubic-bezier(.4,0,.8,.6)}
  85%{transform:translateY(0) scale(1.1,.88);animation-timing-function:ease-out}
  100%{transform:none}}
@keyframes bdAir{from,to{transform:rotate(calc(var(--lean) * var(--dir)))}}
@keyframes bdTuck1{from,to{transform:translate(4px,-2px)}}
@keyframes bdTuck2{from,to{transform:translate(-4px,-2px)}}
@keyframes bdNoDust{from,to{opacity:0}}
/* minder beweging: Buddy verschijnt nooit */
@media (prefers-reduced-motion:reduce){.fb-run{display:none!important}}

/* ==========================================================================
   Mobiele varianten (fbm-*), zie .fba-m hierboven. Elk blok hoort bij één animatie.
   ========================================================================== */

/* ---------- mobiel: Hero-chat (fbm-herochat) ---------- */
/* zelfde verloop en timing als fba-herochat; canvas 352 x 528, tekst een stap groter */
.fbm-herochat{--fbo:400ms}
.js .fbm-herochat .up, .js .fbm-herochat .fade, .js .fbm-herochat .pop, .js .fbm-herochat .dots{opacity:0}
.js .fbm-herochat .type{clip-path:inset(0 100% 0 0)}
.fbm-herochat.run .up{animation:fbUp-mherochat .75s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat.run .fade{animation:fbFade-mherochat .5s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat.run .pop{animation:fbPop-mherochat .5s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat.run .type{animation:fbType-mherochat 1.6s steps(44,end) calc(var(--d,0ms) - var(--fbo)) both}
/* invoerveld schuift mee zodra de zin langer wordt dan het veld, in de maat van het typen */
.fbm-herochat.run .tscroll{animation:fbScroll-mherochat 1.6s linear calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat.run .send{animation:fbSend-mherochat .25s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat.run .ph{animation:fbPh-mherochat var(--t,2s) linear calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat.run .dots{animation:fbDots-mherochat var(--t,.9s) linear calc(var(--d,0ms) - var(--fbo)) both}
/* knopdruk: transform plus een donkere laag (zwart 25%) in plaats van filter:brightness */
.fbm-herochat .press{position:relative}
.fbm-herochat .press::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:0;pointer-events:none}
.fbm-herochat.run .press{animation:fbPress-mherochat .35s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat.run .press::after{animation:fbDim-mherochat .35s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat.run .used{animation:fbUsed-mherochat .5s ease-out calc(var(--d,0ms) - var(--fbo)) both}
.fbm-herochat .dots i{display:block;width:7px;height:7px;border-radius:50%;background:#3F78DB}
.fbm-herochat .dots i:nth-child(3){background:#EC8159}
.fbm-herochat.run .dots i{animation:mzBob-mherochat .6s ease-in-out calc(var(--d,0ms) - var(--fbo)) 2}
.fbm-herochat.run .dots i:nth-child(2){animation-delay:calc(var(--d,0ms) - var(--fbo) + 120ms)}
.fbm-herochat.run .dots i:nth-child(3){animation-delay:calc(var(--d,0ms) - var(--fbo) + 240ms)}
.fbm-herochat .mz-actor{transform-origin:50% 92%}
.fbm-herochat.run .mz-actor{animation:mzGreet-mherochat 1.6s ease-in-out var(--g,200ms) 1,mzJump-mherochat 1.7s ease-in-out calc(var(--j,4000ms) - var(--fbo)) 1}
.fbm-herochat.run .mzd{animation:mzBob-mherochat 1.25s ease-in-out calc(var(--d,0ms) - var(--fbo)) var(--n,3)}
.fbm-herochat.run .mzs{animation:mzTw-mherochat .85s ease-in-out calc(var(--j,4000ms) - var(--fbo)) 2;transform-origin:center}
@keyframes mzGreet-mherochat{0%,100%{transform:none}25%{transform:rotate(8deg) translateY(-7px)}50%{transform:rotate(-5deg)}75%{transform:rotate(8deg) translateY(-7px)}}
@keyframes mzJump-mherochat{0%,100%{transform:none}28%,46%{transform:translateY(-30px)}70%{transform:none}80%{transform:translateY(-7px)}90%{transform:none}}
@keyframes mzBob-mherochat{0%,60%,100%{transform:none}30%{transform:translateY(-8px)}}
@keyframes mzTw-mherochat{0%,100%{transform:none}50%{transform:scale(1.35) rotate(45deg)}}
@keyframes fbUp-mherochat{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-mherochat{from{opacity:0}to{opacity:1}}
@keyframes fbPop-mherochat{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fbType-mherochat{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* veld 240 px, zin ~296 px: na 81% van het typen 8 stappen van 7 px naar links (zelfde tempo als de 44 typstappen) */
@keyframes fbScroll-mherochat{0%{transform:none}81%{transform:none;animation-timing-function:steps(8,end)}100%{transform:translateX(-56px)}}
@keyframes fbSend-mherochat{from{opacity:1}to{opacity:0}}
@keyframes fbPh-mherochat{0%{opacity:1}4%{opacity:0}96%{opacity:0}100%{opacity:1}}
@keyframes fbDots-mherochat{0%{opacity:0}12%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes fbPress-mherochat{0%{transform:none}40%{transform:scale(.94)}100%{transform:none}}
@keyframes fbDim-mherochat{0%{opacity:0}40%{opacity:.25}100%{opacity:0}}
@keyframes fbUsed-mherochat{from{opacity:1}to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.fbm-herochat .up,.fbm-herochat .fade,.fbm-herochat .pop{animation:none!important;opacity:1!important;transform:none!important}.fbm-herochat .send{animation:none!important;opacity:0!important}.fbm-herochat .used{animation:none!important;opacity:.45!important}.fbm-herochat .ph,.fbm-herochat .press,.fbm-herochat .press::after,.fbm-herochat .tscroll,.fbm-herochat .mz-actor,.fbm-herochat .mzd,.fbm-herochat .mzs{animation:none!important}.fbm-herochat .dots{display:none!important}}

/* ---------- mobiel: Uren-balken (fbm-balken-b) ---------- */
/* twee kolommen 140 x 190 die vanaf de basis groeien; canvas 335 x 360 (voor-wie: 335 x 296, zonder kopregel) */
.fbm-balken-b .lbl{font-size:15px;line-height:20px;font-weight:600;color:#476271;white-space:nowrap}
.fbm-balken-b .num{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.fbm-balken-b .kop{display:flex;flex-direction:column;gap:6px;width:335px}
.fbm-balken-b .kop-h{display:block;font-family:Manrope,sans-serif;font-size:24px;line-height:29px;font-weight:800;letter-spacing:-.024em;color:#091F3B;text-wrap:balance}
.fbm-balken-b .kop-s{display:block;font-size:15px;line-height:21px;color:#476271}
.fbm-balken-b .col{position:absolute;top:0;width:140px;height:190px;border-radius:12px;background:#E1EAEF;overflow:hidden}
.fbm-balken-b .colfill{position:absolute;left:0;right:0;bottom:0}
.fbm-balken-b .val{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fbm-balken-b .per{font-size:15px;line-height:1;font-weight:500;white-space:nowrap}
.fbm-balken-b .cap{position:absolute;top:204px;width:167px;display:flex;flex-direction:column;align-items:center;text-align:center}
.fbm-balken-b .who{font-size:15px;line-height:20px;color:#476271;white-space:nowrap}
.js .fbm-balken-b .fade, .js .fbm-balken-b .up, .js .fbm-balken-b .rise{opacity:0}
.fbm-balken-b.run .fade{animation:fbFade-mbalken .5s ease-out var(--d,0ms) both}
.fbm-balken-b.run .up{animation:fbUp-mbalken .9s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-balken-b.run .rise{animation:fbGrowY-mbalken var(--t,1s) cubic-bezier(.22,1,.36,1) var(--d,0ms) both;transform-origin:center bottom}
@keyframes fbFade-mbalken{from{opacity:0}to{opacity:1}}
@keyframes fbUp-mbalken{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fbGrowY-mbalken{from{opacity:1;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.fbm-balken-b .fade,.fbm-balken-b .up,.fbm-balken-b .rise{animation:none!important;opacity:1!important;transform:none!important}}

/* ---------- mobiel: Van vacature tot factuur (fbm-proces) ---------- */
/* canvas 335 x 420; het dossier blijft staan, de tijdlijn schuift per stap 160 px naar links */
.fbm-proces{--teal-mproces:#6EBFB9;--ease-mproces:cubic-bezier(.65,0,.35,1)}
/* dossier gecentreerd; staat buiten de clip, dus de schaduw wordt niet afgeknipt */
.fbm-proces .dos{position:absolute;top:14px;left:37.5px;width:260px}
.fbm-proces .dos-tab{width:72px;height:14px;background:#F4EFE3;border-radius:5px 5px 0 0}
.fbm-proces .dos-body{padding:14px 20px 16px;background:#F4EFE3;color:#091F3B;border-radius:0 6px 6px 6px;box-shadow:0 14px 30px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:10px}
.fbm-proces .dos-head{display:flex;flex-direction:column;padding-bottom:8px;border-bottom:1px solid #E2D9C4}
.fbm-proces .dos-kick{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6B6455}
.fbm-proces .dos-name{font-size:18px;line-height:24px;font-weight:700;color:#091F3B}
/* padding/border-top: neutraliseert .row uit style.css */
.fbm-proces .row{display:flex;align-items:center;gap:10px;padding:0;border-top:0;font-size:16px;line-height:22px;font-weight:500;color:#091F3B;transform-origin:left center}
.fbm-proces .chk{width:20px;height:20px;border-radius:10px;background:var(--fba-accent);color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex:none}
/* tijdlijn: alleen deze strook clipt, met een zachte fade aan beide randen */
.fbm-proces .tl{position:absolute;top:250px;left:0;width:335px;height:80px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 295px,transparent 335px);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 295px,transparent 335px)}
.fbm-proces .rail{position:absolute;top:0;left:0;width:335px;height:80px;transform:translateX(-480px)}
.fbm-proces .base{position:absolute;top:25px;left:167.5px;width:480px;height:2px;background:var(--line)}
.fbm-proces .seg{position:absolute;top:25px;width:160px;height:2px;background:var(--teal-mproces);transform-origin:left center}
.fbm-proces .node{position:absolute;top:17px;width:18px;height:18px;margin-left:-9px}
.fbm-proces .node::before{content:"";position:absolute;inset:0;border-radius:9px;border:2px solid var(--line);background:#fff;box-sizing:border-box}
.fbm-proces .node i{position:absolute;inset:0;border-radius:9px;background:var(--teal-mproces);box-shadow:0 0 0 6px rgba(110,191,185,.28)}
.fbm-proces .lbl{position:absolute;top:48px;width:170px;margin-left:-85px;text-align:center;font-size:15px;line-height:20px;font-weight:600;color:var(--text);white-space:nowrap}
/* slotzin */
.fbm-proces .pill{position:absolute;top:346px;left:0;right:0;margin:0 auto;width:max-content;padding:12px 18px 12px 12px;background:#FFFFFF;color:#091F3B;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px;font-size:15px;line-height:20px;font-weight:600}
.fbm-proces .pill-ic{width:26px;height:26px;border-radius:13px;background:var(--fba-accent);color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex:none}
.js .fbm-proces .drop,.js .fbm-proces .fade,.js .fbm-proces .pop,.js .fbm-proces .grow,.js .fbm-proces .up{opacity:0}
.fbm-proces.run .drop{animation:fbDrop-mproces .9s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-proces.run .fade{animation:fbFade-mproces .6s ease-out var(--d,0ms) both}
.fbm-proces.run .pop{animation:fbPop-mproces .55s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-proces.run .grow{animation:fbGrow-mproces .7s var(--ease-mproces) var(--d,0ms) both}
.fbm-proces.run .rail{animation:fbRail-mproces 3s var(--ease-mproces) 1.1s both}
.fbm-proces.run .up{animation:fbUp-mproces .9s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
@keyframes fbDrop-mproces{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbFade-mproces{from{opacity:0}to{opacity:1}}
@keyframes fbPop-mproces{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes fbGrow-mproces{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes fbUp-mproces{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 3 stappen van 0,7 s met 0,45 s rust; elk lijnstuk groeit gelijk op, zodat de teal punt onder het dossier blijft */
@keyframes fbRail-mproces{0%{transform:translateX(0)}23.333%,38.333%{transform:translateX(-160px)}61.667%,76.667%{transform:translateX(-320px)}100%{transform:translateX(-480px)}}
@media (prefers-reduced-motion:reduce){.fbm-proces .drop,.fbm-proces .fade,.fbm-proces .pop,.fbm-proces .grow,.fbm-proces .up{animation:none!important;opacity:1!important;transform:none!important}.fbm-proces .rail{animation:none!important;transform:translateX(-480px)!important}}

/* ---------- mobiel: Vier tools, één chat (fbm-eenchat) ---------- */
/* canvas 335 x 360; 4 toolkaarten in 2 x 2 (Backoffice valt weg), chat over de volle breedte */
.fbm-eenchat .tool{position:absolute;width:160px;height:140px;background:#FFFFFF;border:1px solid #D4E0E6;border-radius:10px;box-shadow:0 6px 16px rgba(9,31,59,.10);display:flex;flex-direction:column}
.fbm-eenchat .tool-h{flex:none;height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #E8EFF3}
.fbm-eenchat .tool-n{font-size:15px;font-weight:600;line-height:1.2}
.fbm-eenchat .badge{min-width:24px;height:24px;border-radius:12px;background:#C2410C;color:#FFFFFF;font-size:14px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 7px}
.fbm-eenchat .tool-b{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:10px 12px}
/* padding/border-top: neutraliseert .row uit style.css */
.fbm-eenchat .row{display:flex;align-items:center;gap:8px;padding:0;border-top:0}
.fbm-eenchat .dot{flex:none;width:16px;height:16px;border-radius:8px;background:#D4E7EC}
.fbm-eenchat .env{flex:none;width:18px;height:13px;border-radius:3px;border:1.5px solid #B9C1CE}
.fbm-eenchat .bar{height:7px;border-radius:4px;background:#E1EAEF}
.fbm-eenchat .bar.dk{background:#C9D6DD}
.fbm-eenchat .sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #E1EAEF;border-left:1px solid #E1EAEF}
.fbm-eenchat .sheet span{height:20px;border-right:1px solid #E1EAEF;border-bottom:1px solid #E1EAEF}
.fbm-eenchat .sheet .hd{background:#EEF4F7}
.fbm-eenchat .sheet .hl{background:#FDECD8}
.fbm-eenchat .wa{gap:8px}
.fbm-eenchat .wa span{height:18px;border-radius:9px;background:#EEF4F7;align-self:flex-start}
.fbm-eenchat .wa .out{background:#DCEFE3;align-self:flex-end}
/* .chat, .chat-h en .chat-b bestaan ook in style.css: kleur, achtergrond en min-height hier expliciet */
.fbm-eenchat .chat{position:absolute;top:0;left:0;width:335px;background:#FFFFFF;border:1px solid #D4E0E6;border-radius:16px;box-shadow:0 1px 2px rgba(9,31,59,.06),0 12px 28px rgba(9,31,59,.12);display:flex;flex-direction:column;overflow:hidden}
.fbm-eenchat .chat-h{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #E8EFF3}
.fbm-eenchat .chat-who{display:flex;flex-direction:column;gap:1px}
.fbm-eenchat .chat-n{font-size:16px;font-weight:600;line-height:1.3;color:#091F3B}
.fbm-eenchat .chat-s{font-size:14px;line-height:1.35;color:#476271}
.fbm-eenchat .chat-b{display:flex;flex-direction:column;gap:12px;padding:16px 16px 18px;background:none;min-height:0}
.fbm-eenchat .me{align-self:flex-end;max-width:80%;background:#091F3B;color:#FFFFFF;font-size:15px;line-height:1.45;padding:10px 14px;border-radius:16px 16px 4px 16px}
.fbm-eenchat .bot{align-self:stretch;background:color-mix(in srgb,var(--fba-accent) 9%,#FFFFFF);font-size:15px;line-height:1.45;padding:12px 13px 13px;border-radius:16px 16px 16px 4px;display:flex;flex-direction:column;gap:10px}
.fbm-eenchat .list{background:#FFFFFF;border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.35}
.fbm-eenchat .li{display:flex;align-items:center;gap:9px}
.fbm-eenchat .ck{flex:none;width:18px;height:18px;border-radius:9px;background:var(--fba-accent);color:#FFFFFF;display:flex;align-items:center;justify-content:center}
/* zelfde keyframes en duur als fba-eenchat; --d is hier al de echte vertraging (origineel x 1,4) */
.js .fbm-eenchat .up,.js .fbm-eenchat .pop,.js .fbm-eenchat .gather{opacity:0}
.fbm-eenchat.run .up{animation:fbUp-meenchat 1.06s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-eenchat.run .pop{animation:fbPop-meenchat .64s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-eenchat.run .gather{animation:fbGather-meenchat 3.21s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
@keyframes fbUp-meenchat{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbPop-meenchat{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes fbGather-meenchat{0%{opacity:0;transform:translateY(-14px) rotate(var(--r,0deg))}18.4%{opacity:1;transform:rotate(var(--r,0deg))}65.1%{opacity:1;transform:rotate(var(--r,0deg))}100%{opacity:0;transform:translate(var(--gx,0px),var(--gy,0px)) scale(.25) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.fbm-eenchat .up,.fbm-eenchat .pop{animation:none!important;opacity:1!important;transform:none!important}.fbm-eenchat .gather{display:none!important}}

/* ---------- mobiel: Compliance (fbm-compliance) ---------- */
/* eerst de documenten groot in beeld met scanlijn, daarna op dezelfde plek de checklist */
.fbm-compliance{overflow:visible!important}
.fbm-compliance .docs{position:absolute;inset:0;transform-origin:50% 45%}
.fbm-compliance .doc-pos{position:absolute}
.fbm-compliance .cao{width:150px;height:196px;padding:14px;background:#F4EFE3;border:1px solid #E6DECB;border-radius:4px;box-shadow:0 6px 16px rgba(9,31,59,.08);display:flex;flex-direction:column;gap:8px}
.fbm-compliance .cao-t{font-family:'Manrope','DM Sans',sans-serif;font-size:20px;font-weight:700;color:#091F3B}
.fbm-compliance .cao-s{font-size:14px;color:#6B6455}
.fbm-compliance .ln{display:block;height:5px;border-radius:3px;background:#E1EAEF}
.fbm-compliance .cao .ln{background:#E4DCC8}
.fbm-compliance .contract{width:170px;height:226px;padding:16px 14px 12px;background:#FFFFFF;border:1px solid #D4E0E6;border-radius:4px;box-shadow:0 8px 20px rgba(9,31,59,.10);display:flex;flex-direction:column;gap:8px}
.fbm-compliance .contract-t{font-size:15px;font-weight:600;color:#091F3B;margin-bottom:2px}
.fbm-compliance .sign{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.fbm-compliance .sign svg{width:132px;height:40px}
.fbm-compliance .sign-rule{height:1px;background:#C9D6DD}
.fbm-compliance .sign-l{font-size:14px;color:#476271}
.fbm-compliance .idk{width:224px;height:118px;padding:13px 14px;background:#E7ECF6;border:1px solid #D5DDEB;border-radius:9px;box-shadow:0 10px 22px rgba(9,31,59,.14);display:flex;flex-direction:column;gap:10px}
.fbm-compliance .idk-l{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#476271}
.fbm-compliance .idk-b{display:flex;gap:14px}
.fbm-compliance .idk-foto{width:46px;height:58px;border-radius:5px;background:#C6D0E2;flex:none}
.fbm-compliance .idk-r{flex:1;display:flex;flex-direction:column;gap:9px;padding-top:4px}
.fbm-compliance .idk .ln{background:#CBD4E5}
.fbm-compliance .scan{position:absolute;top:14px;left:8px;width:313px;height:3px;border-radius:2px;background:var(--fba-accent);box-shadow:0 0 12px 2px color-mix(in srgb,var(--fba-accent) 55%,transparent)}
.fbm-compliance .scan::before{content:"";position:absolute;left:0;right:0;bottom:3px;height:44px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--fba-accent) 14%,transparent))}
/* checklist: ck-* i.p.v. card/row, die botsen met .card en .row in style.css */
.fbm-compliance .ck-card{position:absolute;top:34px;left:14px;width:301px;background:#FFFFFF;border-radius:16px;box-shadow:0 1px 2px rgba(9,31,59,.06),0 14px 34px rgba(9,31,59,.10);padding:18px 20px 10px;display:flex;flex-direction:column}
.fbm-compliance .ck-h{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;border-bottom:1px solid #E8EFF3;margin-bottom:4px}
.fbm-compliance .ck-k{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#476271}
.fbm-compliance .ck-n{font-family:'Manrope','DM Sans',sans-serif;font-size:18px;font-weight:700;color:#091F3B}
.fbm-compliance .ck-row{display:flex;align-items:center;gap:12px;padding:10px 0}
.fbm-compliance .box{position:relative;width:24px;height:24px;flex:none}
.fbm-compliance .ring{position:absolute;inset:0;border-radius:12px;border:2px solid #C9D6DD}
.fbm-compliance .tick{position:absolute;inset:0;border-radius:12px;background:var(--fba-accent);color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.fbm-compliance .tick svg{width:13px;height:13px}
.fbm-compliance .txt{display:flex;flex-direction:column;min-width:0}
.fbm-compliance .t{font-size:16px;font-weight:600;color:#091F3B}
.fbm-compliance .s{font-size:14px;color:#476271}
.js .fbm-compliance .drop, .js .fbm-compliance .up, .js .fbm-compliance .fade, .js .fbm-compliance .pop, .js .fbm-compliance .scan{opacity:0}
.js .fbm-compliance .sig{stroke-dasharray:260;stroke-dashoffset:260}
.fbm-compliance.run .drop{animation:fbDrop-mcompliance .8s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-compliance.run .sig{animation:fbDraw-mcompliance .9s ease-out var(--d,0ms) both}
.fbm-compliance.run .scan{animation:fbScan-mcompliance 1s ease-in-out var(--d,0ms) both}
.fbm-compliance.run .docs{animation:fbLeave-mcompliance .45s ease-in var(--d,0ms) both}
.fbm-compliance.run .up{animation:fbUp-mcompliance .7s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-compliance.run .pop{animation:fbPop-mcompliance .5s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-compliance.run .fade{animation:fbFade-mcompliance .5s ease-out var(--d,0ms) both}
@keyframes fbDrop-mcompliance{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbDraw-mcompliance{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes fbScan-mcompliance{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(368px)}}
@keyframes fbLeave-mcompliance{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-12px) scale(.94)}}
@keyframes fbUp-mcompliance{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fbPop-mcompliance{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes fbFade-mcompliance{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fbm-compliance .up,.fbm-compliance .pop,.fbm-compliance .fade{animation:none!important;opacity:1!important;transform:none!important}.fbm-compliance .docs,.fbm-compliance .scan{display:none!important}}

/* ---------- mobiel: Shortlist in 60 seconden (fbm-shortlist) ---------- */
.fbm-shortlist{line-height:1.25;color:#091F3B}
.fbm-shortlist .ms-vac{position:absolute;top:4px;left:6px;width:317px;height:106px;padding:14px 16px;background:#091F3B;color:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(9,31,59,.08),0 8px 18px rgba(9,31,59,.12);display:flex;flex-direction:column;justify-content:center;gap:10px}
.fbm-shortlist .ms-head{display:flex;flex-direction:column;gap:2px}
.fbm-shortlist .ms-kicker{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.fbm-shortlist .ms-job{font-size:17px;font-weight:600;line-height:1.3;color:#fff}
.fbm-shortlist .ms-tags{display:flex;gap:6px}
.fbm-shortlist .ms-tag{font-size:14px;font-weight:600;line-height:1.2;color:#091F3B;background:#C7EDEF;border-radius:999px;padding:4px 10px;white-space:nowrap}
.fbm-shortlist .ms-pool{position:absolute;top:130px;left:6px;width:317px;height:40px;display:flex;align-items:center;gap:12px}
.fbm-shortlist .ms-stack{display:flex;flex:none}
.fbm-shortlist .ms-sav{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#DDEFF1;color:#476271;display:grid;place-items:center}
.fbm-shortlist .ms-sav + .ms-sav{margin-left:-10px}
.fbm-shortlist .ms-sav:nth-child(2){background:#E6EDF1}
.fbm-shortlist .ms-sav:nth-child(3){background:#C7EDEF}
.fbm-shortlist .ms-pooltxt{font-size:15px;font-weight:500;color:#476271;white-space:nowrap}
.fbm-shortlist .ms-pooltxt b{font-weight:700;color:#091F3B}
.fbm-shortlist .ms-scan{position:absolute;top:182px;left:6px;width:317px;height:4px;border-radius:2px;background:#E1EAEF;overflow:hidden}
.fbm-shortlist .ms-scan-fill{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--fba-accent);border-radius:2px;transform-origin:left center}
.fbm-shortlist .ms-label{position:absolute;top:204px;left:6px;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#476271}
.fbm-shortlist .ms-match{position:absolute;left:6px;width:317px;height:64px;padding:0 14px;background:#fff;border:1px solid #D4E0E6;border-radius:10px;box-shadow:0 1px 2px rgba(9,31,59,.05),0 6px 14px rgba(9,31,59,.07);display:flex;align-items:center;gap:12px}
.fbm-shortlist .ms-match.is-top{border-color:#C9D6DD;box-shadow:0 1px 2px rgba(9,31,59,.06),0 8px 18px rgba(9,31,59,.10)}
.fbm-shortlist .ms-av{width:40px;height:40px;border-radius:50%;background:#DDEFF1;color:#091F3B;font-size:14px;font-weight:700;display:grid;place-items:center;flex:none}
.fbm-shortlist .ms-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.fbm-shortlist .ms-name{font-size:15px;font-weight:600;color:#091F3B;white-space:nowrap}
.fbm-shortlist .ms-track{position:relative;height:6px;border-radius:3px;background:#E1EAEF;overflow:hidden}
.fbm-shortlist .ms-fill{position:absolute;top:0;bottom:0;left:0;width:var(--w);border-radius:3px;background:#A9C3CF;transform-origin:left center}
.fbm-shortlist .is-top .ms-fill{background:var(--fba-accent)}
.fbm-shortlist .ms-score{flex:none;min-width:54px;text-align:center;font-size:14px;font-weight:700;line-height:1.2;color:#091F3B;background:#fff;border:1px solid #D4E0E6;border-radius:999px;padding:5px 10px}
.fbm-shortlist .is-top .ms-score{background:var(--fba-accent);border-color:transparent;color:#fff;box-shadow:0 4px 10px rgba(9,31,59,.15)}
.fbm-shortlist .ms-foot{position:absolute;top:460px;left:6px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#476271}
.fbm-shortlist .ms-foot svg{color:#EC8159}
.js .fbm-shortlist .mdrop, .js .fbm-shortlist .mpop, .js .fbm-shortlist .mfade{opacity:0}
.js .fbm-shortlist .mgrow{transform:scaleX(0)}
.fbm-shortlist.run .mdrop{animation:fbDrop-mshortlist .7s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-shortlist.run .mpop{animation:fbPop-mshortlist .5s cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.fbm-shortlist.run .mfade{animation:fbFade-mshortlist .6s ease-out var(--d,0ms) both}
.fbm-shortlist.run .mgrow{animation:fbGrow-mshortlist var(--t,.7s) cubic-bezier(.45,0,.2,1) var(--d,0ms) both}
@keyframes fbDrop-mshortlist{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbPop-mshortlist{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fbFade-mshortlist{from{opacity:0}to{opacity:1}}
@keyframes fbGrow-mshortlist{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.fbm-shortlist .mdrop,.fbm-shortlist .mpop,.fbm-shortlist .mfade,.fbm-shortlist .mgrow{animation:none!important;opacity:1!important;transform:none!important}}

/* ---------- mobiel: Foto van een urenbon (fbm-urenbon) ---------- */
/* zelfde verloop en timing als fba-urenbon; canvas = de chatkaart zelf */
.fbm-urenbon{overflow:visible!important}
.js .fbm-urenbon .drop, .js .fbm-urenbon .up, .js .fbm-urenbon .fade, .js .fbm-urenbon .pop, .js .fbm-urenbon .dots, .js .fbm-urenbon .scan{opacity:0}
.fbm-urenbon.run .drop{animation:fbDrop-murenbon .68s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * .9) both}
.fbm-urenbon.run .up{animation:fbUp-murenbon .68s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * .9) both}
.fbm-urenbon.run .fade{animation:fbFade-murenbon .5s ease-out calc(var(--d,0ms) * .9) both}
.fbm-urenbon.run .pop{animation:fbPop-murenbon .5s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) * .9) both}
.fbm-urenbon.run .dots{animation:fbDots-murenbon calc(var(--t,.8s) * .9) linear calc(var(--d,0ms) * .9) both}
.fbm-urenbon.run .scan{animation:fbScan-murenbon .81s ease-in-out calc(var(--d,0ms) * .9) both}
.fbm-urenbon .dots i{display:block;width:7px;height:7px;border-radius:50%;background:#3F78DB}
.fbm-urenbon .dots i:nth-child(3){background:#EC8159}
.fbm-urenbon.run .dots i{animation:mzBob-murenbon .54s ease-in-out calc(var(--d,0ms) * .9) 2}
.fbm-urenbon.run .dots i:nth-child(2){animation-delay:calc(var(--d,0ms) * .9 + 120ms)}
.fbm-urenbon.run .dots i:nth-child(3){animation-delay:calc(var(--d,0ms) * .9 + 240ms)}
.fbm-urenbon .mz-actor{transform-origin:50% 92%}
.fbm-urenbon.run .mz-actor{animation:mzGreet-murenbon 1.44s ease-in-out var(--g,200ms) 1,mzJump-murenbon 1.53s ease-in-out calc(var(--j,4000ms) * .9) 1}
.fbm-urenbon.run .mzd{animation:mzBob-murenbon 1.12s ease-in-out calc(var(--d,0ms) * .9) var(--n,3)}
.fbm-urenbon.run .mzs{animation:mzTw-murenbon .76s ease-in-out calc(var(--j,4000ms) * .9) 2;transform-origin:center}
@keyframes mzGreet-murenbon{0%,100%{transform:none}25%{transform:rotate(8deg) translateY(-7px)}50%{transform:rotate(-5deg)}75%{transform:rotate(8deg) translateY(-7px)}}
@keyframes mzJump-murenbon{0%,100%{transform:none}28%,46%{transform:translateY(-30px)}70%{transform:none}80%{transform:translateY(-7px)}90%{transform:none}}
@keyframes mzBob-murenbon{0%,60%,100%{transform:none}30%{transform:translateY(-8px)}}
@keyframes mzTw-murenbon{0%,100%{transform:none}50%{transform:scale(1.35) rotate(45deg)}}
@keyframes fbDrop-murenbon{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fbUp-murenbon{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fbFade-murenbon{from{opacity:0}to{opacity:1}}
@keyframes fbPop-murenbon{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes fbDots-murenbon{0%{opacity:0}12%{opacity:1}85%{opacity:1}100%{opacity:0}}
/* scanlijn over het hogere bonnetje: 136 px i.p.v. 118 px, zelfde duur */
@keyframes fbScan-murenbon{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(136px)}}
@media (prefers-reduced-motion:reduce){.fbm-urenbon .drop,.fbm-urenbon .up,.fbm-urenbon .fade,.fbm-urenbon .pop{animation:none!important;opacity:1!important;transform:none!important}.fbm-urenbon .dots,.fbm-urenbon .scan{display:none!important}.fbm-urenbon .mz-actor,.fbm-urenbon .mzd,.fbm-urenbon .mzs,.fbm-urenbon .dots i{animation:none!important}}