.b-belofte{--bb-band:1.15rem;--bb-haak:2.3rem}
.b-belofte .b-kopgroep--midden{margin-inline:auto;text-align:center}
.b-belofte .b-kopgroep--midden .b-lead{margin-inline:auto}
.b-belofte__baan{position:relative;isolation:isolate;padding-top:calc(var(--bb-band) / 2)}
.b-belofte__baan::before{content:"";position:absolute;z-index:-2;left:0;right:0;top:45%;bottom:-2rem;
background:linear-gradient(180deg,var(--b-roze),rgba(255,244,244,0));clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}
.b-belofte__band{position:absolute;z-index:1;left:0;right:0;top:0;height:var(--bb-band);background:var(--b-signaal);
box-shadow:0 6px 14px -8px rgba(171,54,6,.7)}
.b-belofte__lijst{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:clamp(.8rem,calc(1.6*var(--vw)),1.3rem);align-items:start}
.b-belofte__kaart{--r:-1.6deg;position:relative;margin-top:var(--bb-haak);padding:1.15rem 1.05rem 1.25rem;border-radius:var(--b-r-kaart);
background:var(--b-wit);box-shadow:var(--b-schaduw);rotate:var(--r);transform-origin:50% calc(-1 * var(--bb-haak))}
.b-belofte__kaart:nth-child(even){--r:1.3deg}
.b-belofte__kaart:nth-child(3n){--r:-.8deg}
.b-belofte__haak{position:absolute;left:50%;bottom:100%;width:.9rem;height:calc(var(--bb-haak) + .4rem);translate:-50% 0;
border:2px solid var(--b-inkt);border-bottom:0;border-radius:.45rem .45rem 0 0}
.b-belofte__haak::after{content:"";position:absolute;left:50%;bottom:-.35rem;width:1.6rem;height:.55rem;translate:-50% 0;
border-radius:.2rem;background:var(--b-inkt)}
.b-belofte__ico{display:block;width:2.6rem;height:2.6rem;margin:.2rem 0 .8rem;color:var(--b-bordeaux);
stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--b-ease),color .45s var(--b-ease)}
.js .b-belofte__kaart:not(.in) .b-belofte__ico{stroke-dashoffset:1}
.b-belofte__kaart h3{margin:0;font:600 1.02rem/1.3 var(--font-kop);color:var(--b-inkt)}
.b-belofte__kaart p{margin:.45rem 0 0;color:var(--b-zacht);font-size:.9rem;line-height:1.5}
.b-belofte__knoppen{justify-content:center;margin-top:clamp(2rem,calc(4*var(--vw)),3rem)}
.b-belofte__lijst>.b-belofte__kaart{
transition:opacity .55s var(--ease),transform .55s var(--ease),rotate 1.5s cubic-bezier(.3,1.45,.45,1);
transition:opacity .55s var(--ease),transform .55s var(--ease),rotate 1.8s linear(0,0.17 5%,0.50 10%,0.88 15%,1.23 20%,1.48 25%,1.60 30%,1.57 35%,1.43 40%,1.22 45%,1.00 50%,0.82 55%,0.72 60%,0.70 65%,0.75 70%,0.85 75%,0.95 80%,1.02 85%,1.05 90%,1.04 95%,1)}
.b-belofte__lijst>.b-belofte__kaart:nth-child(1){transition-delay:0ms,0ms,0s!important}
.b-belofte__lijst>.b-belofte__kaart:nth-child(2){transition-delay:70ms,70ms,0s!important}
.b-belofte__lijst>.b-belofte__kaart:nth-child(3){transition-delay:140ms,140ms,0s!important}
.b-belofte__lijst>.b-belofte__kaart:nth-child(4){transition-delay:210ms,210ms,0s!important}
.b-belofte__lijst>.b-belofte__kaart:nth-child(5){transition-delay:280ms,280ms,0s!important}
.b-belofte__lijst>.b-belofte__kaart:nth-child(6){transition-delay:350ms,350ms,0s!important}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.b-belofte__lijst>.b-belofte__kaart:hover{rotate:0deg;
transition:opacity .55s var(--ease),transform .55s var(--ease),rotate 1.2s cubic-bezier(.3,1.7,.45,1);
transition:opacity .55s var(--ease),transform .55s var(--ease),rotate 1.5s linear(0,0.12 5%,0.42 10%,0.85 15%,1.30 20%,1.68 25%,1.90 30%,1.92 35%,1.74 40%,1.41 45%,1.00 50%,0.62 55%,0.36 60%,0.27 65%,0.35 70%,0.57 75%,0.84 80%,1.07 85%,1.18 90%,1.14 95%,1)}
}
@media (hover:hover){
.b-belofte__kaart:hover .b-belofte__ico{color:var(--b-signaal)}
}
@media (max-width:1180px){
.b-belofte__lijst{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.4rem}
.b-belofte__kaart:nth-child(n+4){margin-top:0;rotate:0deg}
.b-belofte__kaart:nth-child(n+4) .b-belofte__haak{display:none}
}
@media (max-width:760px){
.b-belofte{--bb-haak:1.4rem}
.b-belofte__baan{padding-top:0}
.b-belofte__baan::before{display:none}
.b-belofte__band{left:calc(var(--pad, 1rem) + .2rem);right:auto;top:-.6rem;bottom:-.6rem;width:var(--bb-band);height:auto}
.b-belofte__lijst{grid-template-columns:minmax(0,1fr);row-gap:.9rem;padding-left:calc(var(--bb-band) + var(--bb-haak) + .2rem)}
.b-belofte__kaart,.b-belofte__kaart:nth-child(n+4){margin-top:0;rotate:0deg;display:grid;grid-template-columns:2.4rem minmax(0,1fr);
column-gap:.9rem;align-items:start;padding:1rem 1rem 1.05rem}
.b-belofte__kaart .b-belofte__ico{grid-row:1 / span 2;width:2.3rem;height:2.3rem;margin:.1rem 0 0}
.b-belofte__kaart p{margin-top:.25rem}
.b-belofte__haak,.b-belofte__kaart:nth-child(n+4) .b-belofte__haak{display:block;left:auto;right:100%;bottom:auto;top:1.4rem;translate:0 0;
width:calc(var(--bb-haak) + .5rem);height:.8rem;border:2px solid var(--b-inkt);border-right:0;border-radius:.4rem 0 0 .4rem}
.b-belofte__haak::after{left:auto;right:-.3rem;bottom:auto;top:50%;width:.5rem;height:1.4rem;translate:0 -50%}
}
@media (prefers-reduced-motion:reduce){
.b-belofte__ico{transition:none}
.js .b-belofte__kaart:not(.in) .b-belofte__ico{stroke-dashoffset:0}
}