.hbf-houder{max-width:80rem;margin:0 auto;container:hbf/inline-size}.hbf{--ease:cubic-bezier(.22, 1, .36, 1);--schuif:cubic-bezier(.65, 0, .35, 1);--coal:#0c0908;--creme:#f5f1e8;--geel:#fada5e;background:var(--bg);height:clamp(36rem,84vh,48rem);color:var(--fg);font-family:var(--font-display), system-ui, sans-serif;font-variant-numeric:tabular-nums;transition:background-color .6s var(--ease), color .6s var(--ease);border-radius:1.25rem;grid-template-columns:15.5rem minmax(0,1fr);display:grid;position:relative;overflow:hidden}.hbf[data-thema=coal],.hbf-scene[data-thema=coal]{--bg:var(--coal);--fg:var(--creme);--zacht:#bdb6a8;--lijn:#f5f1e829;--rand:#f5f1e880;--vul:var(--geel);--mk-bg:var(--geel);--mk-fg:var(--coal)}.hbf[data-thema=creme],.hbf-scene[data-thema=creme]{--bg:var(--creme);--fg:var(--coal);--zacht:#514b44;--lijn:#0c090824;--rand:#0c090880;--vul:var(--coal);--mk-bg:var(--geel);--mk-fg:var(--coal)}.hbf[data-thema=geel],.hbf-scene[data-thema=geel]{--bg:var(--geel);--fg:var(--coal);--zacht:#3b3221;--lijn:#0c09082e;--rand:#0c09088c;--vul:var(--coal);--mk-bg:var(--coal);--mk-fg:var(--geel)}.hbf-rail{border-right:1px solid var(--lijn);flex-direction:column;justify-content:space-between;gap:2rem;padding:2rem 1.5rem;display:flex}.hbf-stappen{gap:.25rem;margin:0;padding:0;list-style:none;display:grid}.hbf-stappen button{width:100%;min-height:3rem;color:var(--zacht);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:.1875rem auto minmax(0,1fr);align-items:center;gap:.75rem;padding:.25rem 0;font-size:1rem;font-weight:500;display:grid}.hbf-stappen button[aria-current]{color:var(--fg);font-weight:600}.hbf-stappen button:hover{color:var(--fg)}.hbf-stap-nr{font-family:var(--font-mono), monospace;font-size:.875rem;font-weight:500}.hbf-stap-balk{background:var(--lijn);border-radius:.125rem;align-self:stretch;width:.1875rem;overflow:hidden}.hbf-stap-balk b{background:var(--vul);transform-origin:top;height:100%;transform:scaleY(var(--p,0));transition:transform .15s linear;display:block}.hbf-bediening{flex-wrap:wrap;gap:.5rem;display:flex}.hbf-bediening button{border:1px solid var(--rand);min-width:2.75rem;min-height:2.75rem;color:var(--fg);font:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:0 1rem;font-size:.9375rem;font-weight:600}.hbf-bediening button:hover:not(:disabled){border-color:var(--fg)}.hbf-bediening button:disabled{opacity:.45;cursor:default}.hbf-bediening .hbf-volgende:not(:disabled){background:var(--mk-bg);color:var(--mk-fg);border-color:#0000}.hbf button:focus-visible,.hbf a:focus-visible{outline:3px solid var(--fg);outline-offset:3px}.hbf-doek{position:relative;overflow:hidden;container-type:size}.hbf-scene{background:var(--bg);color:var(--fg);position:absolute;inset:0}.hbf-scene[data-fase=in]{z-index:1;animation:hbf-van-onder .9s var(--schuif) both}.hbf-scene[data-fase=in][data-richting=terug]{animation-name:hbf-van-boven}.hbf-scene[data-fase=uit]{animation:hbf-naar-boven .9s var(--schuif) both}.hbf-scene[data-fase=uit][data-richting=terug]{animation-name:hbf-naar-onder}@keyframes hbf-van-onder{0%{transform:translateY(100%)}}@keyframes hbf-van-boven{0%{transform:translateY(-100%)}}@keyframes hbf-naar-boven{to{transform:translateY(-100%)}}@keyframes hbf-naar-onder{to{transform:translateY(100%)}}.hbf-scene-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:4cqw;height:100%;padding:3rem 4.5cqw;display:grid}.hbf-tekst>p:first-child{margin:0 0 1rem}.hbf-label{color:var(--zacht);font-size:.9375rem;font-weight:500}.hbf-tekst h3{letter-spacing:-.035em;text-wrap:balance;max-width:14ch;margin:0 0 1.25rem;font-size:clamp(1.875rem,5.4cqw,3.75rem);font-weight:600;line-height:1.08}.hbf-tekst mark{background:var(--mk-bg);color:var(--mk-fg);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}.hbf-zin{max-width:30rem;color:var(--zacht);margin:0;font-size:clamp(1rem,1.7cqw,1.1875rem);line-height:1.5}.hbf-beeld{min-width:0}.hbf-tijd{--rij:3.75rem;height:calc(var(--rij) * 5);position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 28% 72%,#0000);mask-image:linear-gradient(#0000,#000 28% 72%,#0000)}.hbf-tijd:before{content:"";border-left:.125rem dashed #fada5e8c;position:absolute;top:0;bottom:0;left:.3125rem}.hbf-tijd-lijst{transform:translateY(calc((2 - var(--nu)) * var(--rij)));transition:transform .8s var(--ease);margin:0;padding:0;list-style:none}.hbf-tijd-lijst li{height:var(--rij);letter-spacing:-.015em;color:var(--zacht);align-items:center;gap:1.25rem;font-size:clamp(1.0625rem,2.1cqw,1.5rem);transition:color .4s;display:flex}.hbf-tijd-lijst i{border:.125rem solid var(--zacht);background:var(--bg);width:.75rem;height:.75rem;transition:transform .4s var(--ease), background-color .4s ease, border-color .4s ease;border-radius:50%;flex:none;position:relative}.hbf-tijd-lijst li[data-voorbij] i{background:var(--zacht)}.hbf-tijd-lijst li[data-nu]{color:var(--fg);font-weight:600}.hbf-tijd-lijst li[data-nu] i{background:var(--geel);border-color:var(--geel);transform:scale(1.35)}.hbf-tijd[data-stil]{--rij:2.75rem;height:auto;-webkit-mask-image:none;mask-image:none}.hbf-tijd[data-stil] .hbf-tijd-lijst{transform:none}.hbf-oefen{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:2.5rem;display:grid}.hbf-stapel{perspective:75rem;height:17rem;position:relative}.hbf-stapel>div{left:0;right:0;top:calc(var(--k) * 1.75rem);width:min(100%,19rem);height:11rem;z-index:var(--k);transform:rotate(calc((var(--k) - 1) * -2.5deg));margin:0 auto;position:absolute}.hbf-kaart{color:var(--coal);letter-spacing:-.025em;backface-visibility:hidden;background:#fff;border-radius:1rem;flex-direction:column;justify-content:center;gap:.5rem;padding:1.25rem 1.5rem;font-size:clamp(1.5rem,3cqw,2.125rem);font-weight:600;line-height:1.1;display:flex;position:absolute;inset:0;box-shadow:0 1.25rem 2.5rem -1.5rem #0c090873}.hbf-kaart small{letter-spacing:0;color:#5a534b;font-size:.875rem;font-weight:500}.hbf-kaart-draai{transform-style:preserve-3d;animation:hbf-draai .8s var(--ease) 2.9s both;position:absolute;inset:0}.hbf-kaart-achter{background:var(--geel);transform:rotateY(180deg)}.hbf-kaart-achter small{color:#3b3221}@keyframes hbf-draai{to{transform:rotateY(180deg)}}.hbf[data-stil] .hbf-kaart-draai{transform:rotateY(180deg)}.hbf-tellers{margin:0;padding:0;list-style:none}.hbf-tellers li{border-top:1px solid var(--lijn);color:var(--zacht);align-items:baseline;gap:.6rem;padding:.6rem 0;font-size:1rem;display:flex}.hbf-tellers b{letter-spacing:-.03em;min-width:3ch;color:var(--fg);font-size:clamp(1.75rem,3.4cqw,2.625rem);font-weight:600}.hbf-micro{justify-content:center;align-items:center;gap:1.25rem;display:flex}.hbf-telefoon{aspect-ratio:720/1559;background:#000;border:.375rem solid #2a2420;border-radius:2rem;height:min(34rem,80cqh);overflow:hidden;box-shadow:0 2rem 4rem -2rem #000c}.hbf-swipe{height:100%;transform:translateY(calc(var(--les) * -100%));transition:transform .9s var(--schuif)}.hbf-swipe img{object-fit:cover;width:100%;height:100%;display:block}.hbf-lesteller{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.hbf-lesteller li{background:var(--lijn);width:.3125rem;height:1.5rem;transition:background-color .4s ease, height .4s var(--ease);border-radius:.25rem}.hbf-lesteller li[data-nu]{background:var(--geel);height:2.5rem}.hbf-analyse{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:2rem;display:grid}.hbf-donut{aspect-ratio:1;width:min(100%,19rem);margin:0 auto;position:relative}.hbf-donut svg{width:100%;height:100%;display:block;overflow:visible;transform:rotate(-90deg)}.hbf-donut circle{fill:none;stroke-width:12px}.hbf-donut-spoor{stroke:var(--lijn)}.hbf-boog{stroke:var(--coal);stroke-dasharray:var(--d);animation-name:hbf-boog;animation-duration:.7s}.hbf-boog[data-zwaar]{stroke-width:18px}@keyframes hbf-boog{0%{stroke-dasharray:0 100}}.hbf-donut-mid{color:var(--zacht);place-content:center;justify-items:center;margin:0;font-size:.875rem;display:grid;position:absolute;inset:0}.hbf-donut-mid b{letter-spacing:-.04em;color:var(--fg);font-size:clamp(2.5rem,5.4cqw,3.75rem);font-weight:600;line-height:1}.hbf-legenda{margin:0;padding:0;list-style:none}.hbf-legenda li{border-bottom:1px solid var(--lijn);justify-content:space-between;gap:1rem;padding:.28rem 0;font-size:.875rem;line-height:1.3;display:flex}.hbf-legenda li[data-zwaar]{font-weight:700}.hbf-legenda b{white-space:nowrap;flex:none;font-weight:600}.hbf-steden{width:100%;max-width:32rem;margin:0 auto}.hbf-builds,.hbf-lijnen{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;display:grid}.hbf-builds>div{background:var(--coal);min-height:8.5rem;color:var(--creme);border-radius:.875rem;align-content:end;gap:.4rem;padding:1rem;display:grid}.hbf-builds b{letter-spacing:-.025em;font-size:clamp(1.25rem,2.5cqw,1.75rem);font-weight:600}.hbf-builds small,.hbf-code small{color:#cfc8ba;font-size:.8125rem;line-height:1.35}.hbf-lijnen i{background:var(--coal);transform-origin:50% 100%;width:.125rem;height:3rem;margin:0 auto;display:block}.hbf-code{background:var(--coal);color:var(--creme);border-radius:.875rem;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;padding:1rem 1.25rem;display:flex}.hbf-code span{font-family:var(--font-mono), monospace;font-weight:600}.hbf-acties{flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin:1.75rem 0 0;display:flex}.hbf-knop{background:var(--coal);min-height:3rem;color:var(--geel);border-radius:999px;align-items:center;padding:0 1.5rem;font-weight:600;text-decoration:none;transition:background-color .18s;display:inline-flex}.hbf-knop:hover{background:#2e2723}.hbf-link{min-height:2.75rem;color:var(--fg);border-bottom:.09375rem solid var(--rand);align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.hbf-link:hover{border-bottom-color:var(--fg)}.hbf-a{animation:.7s var(--ease) both}.hbf-op{animation-name:hbf-op}.hbf-kaartop{animation-name:hbf-kaartop;animation-duration:.9s}.hbf-toestel{animation-name:hbf-toestel;animation-duration:1s}.hbf-stijg{animation-name:hbf-stijg;animation-duration:.8s}.hbf-lijn{animation-name:hbf-lijn;animation-duration:.5s}@keyframes hbf-op{0%{opacity:0;transform:translateY(1.25em)}}@keyframes hbf-kaartop{0%{opacity:0;transform:translateY(16rem)rotate(8deg)}}@keyframes hbf-toestel{0%{opacity:0;transform:translateY(40%)}}@keyframes hbf-stijg{0%{opacity:0;transform:translateY(5rem)}}@keyframes hbf-lijn{0%{transform:scaleY(0)}}.hbf:not([data-gestart]) .hbf-a,.hbf:not([data-gestart]) .hbf-scene,.hbf:not([data-gestart]) .hbf-kaart-draai{animation-play-state:paused}@container hbf (max-width:760px){.hbf{border-radius:1rem;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:46rem}.hbf-rail{display:contents}.hbf-stappen{grid-row:1}.hbf-doek{grid-row:2}.hbf-bediening{grid-row:3}.hbf-stappen{grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;padding:.75rem 1rem .25rem}.hbf-stappen button{grid-template-columns:minmax(0,1fr);gap:.4rem;min-height:2.75rem}.hbf-stap-balk{grid-row:2;width:auto;height:.1875rem}.hbf-stap-balk b{transform-origin:0;transform:scaleX(var(--p,0))}.hbf-stap-naam{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hbf-bediening{gap:.4rem;padding:.75rem 1rem 1rem}.hbf-bediening button{padding:0 .85rem;font-size:.875rem}.hbf-scene-in{grid-template-columns:minmax(0,1fr);align-content:start;gap:1.5rem;padding:1.25rem 1.25rem 1rem}.hbf-tekst>p:first-child{margin-bottom:.5rem}.hbf-tekst h3{margin-bottom:.75rem;font-size:1.875rem}.hbf-zin{font-size:1rem}.hbf-tijd{--rij:2.75rem}.hbf-tijd-lijst li{font-size:1.0625rem}.hbf-tijd[data-stil]{--rij:2.25rem}.hbf-tijd[data-stil] .hbf-tijd-lijst li{font-size:.9375rem}.hbf-oefen{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:1.25rem}.hbf-stapel{height:11rem}.hbf-stapel>div{height:7.5rem;top:calc(var(--k) * 1.1rem)}.hbf-kaart{padding:.85rem 1rem;font-size:1.25rem}.hbf-kaart small{font-size:.75rem}.hbf-tellers li{flex-direction:column;gap:0;padding:.35rem 0;font-size:.875rem}.hbf-tellers b{font-size:1.5rem}.hbf-telefoon{border-width:.25rem;border-radius:1.5rem;height:min(22rem,52cqh)}.hbf-analyse{grid-template-columns:minmax(0,1fr)}.hbf-donut{width:min(100%,14rem)}.hbf-legenda{display:none}.hbf-builds,.hbf-lijnen{gap:.5rem}.hbf-builds>div{min-height:6.5rem;padding:.625rem}.hbf-builds b{font-size:1.0625rem}.hbf-builds small{overflow-wrap:anywhere;font-size:.75rem}.hbf-tekst h3{line-height:1.12}.hbf-lijnen i{height:1.75rem}.hbf-acties{margin-top:1.25rem}}@media (prefers-reduced-motion:reduce){.hbf,.hbf *{transition:none!important;animation:none!important}}.hb-motor{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;gap:clamp(2.5rem,6vw,6rem);display:grid}.hb-rijen{border-top:1px solid var(--ink-12);margin:0;padding:0;list-style:none}.hb-rijen li{border-bottom:1px solid var(--ink-12);grid-template-columns:9rem minmax(0,1fr);gap:1.5rem;padding:1.75rem 0;display:grid}.hb-rijen h3{letter-spacing:-.015em;color:var(--ink);margin:0;font-size:1.25rem;font-weight:500;line-height:1.3}.hb-rijen p{color:var(--ink-70);margin:0;font-size:1.0625rem;line-height:1.6}.hb-scherm{margin:0;position:sticky;top:6rem}.hb-scherm img{border-radius:.875rem;width:100%;height:auto;display:block;box-shadow:0 2.5rem 5rem -3rem #0b254580}.hb-scherm figcaption{color:var(--ink-70);margin-top:.875rem;font-size:.9375rem;line-height:1.5}@media (max-width:900px){.hb-motor{grid-template-columns:minmax(0,1fr)}.hb-scherm{position:static}}@media (max-width:520px){.hb-rijen li{grid-template-columns:minmax(0,1fr);gap:.5rem}}