/* Kolommen en onderbalk vallen binnen de CTA-kaart (bestond al). Baan 2 en 3 zijn omgewisseld voor het lange e-mailadres. */
@media (min-width:1024px){
.footer-widget-wrapper .footer-grid{grid-template-columns:2fr 1.5fr 1fr 1.5fr;padding:0 3rem;gap:2rem}
.footer-widget-wrapper .footer-bottom{margin-left:3rem;margin-right:3rem;column-gap:2rem}
/* De letters groeien mee met het scherm, de container stopte bij 1400px. Boven 1536 breed liep het logo daardoor over de kop Contact heen. */
.footer-widget-wrapper .footer-container{max-width:none}
}
/* Vanaf 1200 breed krijgt Contact iets meer en Diensten iets minder. Dan past het e-mailadres op een regel. */
@media (min-width:1200px){.footer-widget-wrapper .footer-grid{grid-template-columns:2fr 1.65fr 1fr 1.35fr}}
/* De Webflow-klasse zet dit blok tussen 480 en 991 breed op hoogte 0. De footer viel daar buiten de pagina. */
.footer-section{background:transparent;height:auto}
/* Iso-iconen staan er altijd. Bij hover maakt het icoon een sprongetje in plaats van in te schuiven. */
.footer-widget-wrapper .footer-nav-bullet{opacity:1;transform:none;transition:transform .35s cubic-bezier(.175,.885,.32,1.275)}
.footer-widget-wrapper .footer-nav-link:hover{padding-left:0}
.footer-widget-wrapper .footer-nav-link:hover .footer-nav-bullet{transform:translateY(-3px)}
@media (min-width:1024px){
.footer-widget-wrapper .footer-nav-bullet{width:clamp(22px,1.7vw,30px);height:clamp(22px,1.7vw,30px)}
.footer-widget-wrapper .footer-contact-icon{width:clamp(22px,1.85vw,32px)!important;height:clamp(22px,1.85vw,32px)!important;margin-top:calc((2.5vw - clamp(22px,1.85vw,32px))/2)}
}
/* Rechte lijnen weg. Boven de onderbalk blijft een zachte lijn die naar de randen uitdooft. */
.footer-widget-wrapper .footer-bottom{border-top:0;position:relative}
.footer-widget-wrapper .footer-bottom::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16) 20%,rgba(255,255,255,.16) 80%,rgba(255,255,255,0))}
div.zbfb-band{border-top:0;padding-top:14px}
/* De kaart "Klaar om te groeien?" krijgt een echte vorm. De gloed gaat trager en pauzeert nu echt buiten beeld. */
.footer-widget-wrapper .footer-cta{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);border-radius:24px;box-shadow:0 30px 60px -44px rgba(0,0,0,.9)}
.footer-widget-wrapper .footer-cta::before{animation-duration:40s}
.footer-widget-wrapper .footer-cta[style*="paused"]::before{animation-play-state:paused}
@media (max-width:767px){.footer-widget-wrapper .footer-cta{padding:2rem 1.25rem}}
/* Knop in huisstijl: massief oranje, witte iso-pijl. */
.footer-widget-wrapper .footer-cta-link{background:#EA580C;color:#fff;border-bottom:0;padding:14px 22px;font-size:clamp(13px,.95vw,16px);font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 8px 18px -8px rgba(234,88,12,.6)}
.footer-widget-wrapper .footer-cta-link:hover{background:#C2410C;color:#fff}
@media (min-width:768px){.footer-widget-wrapper .footer-cta-link{white-space:nowrap;flex-shrink:0}}
.footer-widget-wrapper .footer-cta-link .footer-cta-arrow{width:26px!important;flex-shrink:0}
.footer-widget-wrapper .footer-cta-arrow polygon[fill="#c2410c"]{fill:#ffc29e}
.footer-widget-wrapper .footer-cta-arrow polygon[fill="#ea580c"]{fill:#ffd9c2}
.footer-widget-wrapper .footer-cta-arrow polygon[fill="#f97316"]{fill:#ffe6d5}
.footer-widget-wrapper .footer-cta-arrow polygon[fill="#fb923c"]{fill:#fff4ec}
.footer-widget-wrapper .footer-cta-arrow polygon[fill="#ff9c54"]{fill:#fff}
/* Penseelstreek onder de kopjes en onder het laatste woord van de CTA-kop (het script zet daar een span om). */
.footer-widget-wrapper .footer-column-title{z-index:0}
.footer-widget-wrapper .zbf-streep{position:relative;display:inline-block;z-index:0}
.footer-widget-wrapper .footer-column-title::after,.footer-widget-wrapper .zbf-streep::after{content:'';position:absolute;left:-.04em;right:-.04em;bottom:-.1em;width:auto;height:.24em;z-index:-1;border-radius:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23EA580C'/%3E%3Cstop offset='1' stop-color='%23FB923C'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23g)' d='M2 8.6C50 5.6 120 3.4 197 1.8C199.4 1.6 199.8 5.2 197.6 5.8C140 8.6 70 10.9 5 11.7C1.4 11.9 .2 9.2 2 8.6Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.footer-widget-wrapper .zbf-js .footer-column-title::after,.footer-widget-wrapper .zbf-js .zbf-streep::after{clip-path:inset(0 100% 0 0)}
.footer-widget-wrapper .zbf-js .zbf-zie .footer-column-title::after,.footer-widget-wrapper .zbf-js .zbf-zie .zbf-streep::after{animation:zbf-streep .6s cubic-bezier(.65,0,.35,1) .15s forwards}
.footer-widget-wrapper .zbf-js .zbf-zie>div:nth-child(3) .footer-column-title::after{animation-delay:.35s}
.footer-widget-wrapper .zbf-js .zbf-zie>div:nth-child(4) .footer-column-title::after{animation-delay:.55s}
@keyframes zbf-streep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Zoeklicht: de oude oranje streep is nu een ronde lichtvlek die heel traag heen en weer schuift. */
/* Het iso-raster erin schuift precies even hard terug, dus het raster staat stil en je ziet het alleen waar het licht valt. */
/* Beide bewegen alleen met transform. */
.footer-widget-wrapper .footer-container{position:relative;z-index:1}
.footer-widget-wrapper .footer-top-border{top:50%;left:0;width:46vw;height:46vw;margin:-23vw 0 0 -23vw;border-radius:50%;overflow:hidden;pointer-events:none;background:radial-gradient(circle,rgba(249,115,22,.17) 0,rgba(249,115,22,.075) 38%,rgba(249,115,22,0) 68%);-webkit-mask-image:radial-gradient(circle,#000 28%,transparent 68%);mask-image:radial-gradient(circle,#000 28%,transparent 68%);transform:translate3d(8vw,-4vw,0);animation:zbf-licht 45s ease-in-out infinite alternate}
.footer-widget-wrapper .footer-top-border::before{content:'';position:absolute;left:8vw;top:-4vw;width:130vw;height:54vw;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpath d='M0 16L32 0L64 16L32 32Z' fill='none' stroke='%23fdba74' stroke-opacity='.22'/%3E%3C/svg%3E");transform:translate3d(-8vw,4vw,0);animation:zbf-raster 45s ease-in-out infinite alternate}
@keyframes zbf-licht{to{transform:translate3d(92vw,4vw,0)}}
@keyframes zbf-raster{to{transform:translate3d(-92vw,-4vw,0)}}
.footer-widget-wrapper .zbf-uit .footer-top-border,.footer-widget-wrapper .zbf-uit .footer-top-border::before{animation-play-state:paused}
@media (max-width:767px){
.footer-widget-wrapper .footer-top-border{width:110vw;height:110vw;margin:-55vw 0 0 -55vw;transform:translate3d(10vw,-30vw,0);animation-name:zbf-licht-m}
.footer-widget-wrapper .footer-top-border::before{left:10vw;top:-30vw;width:200vw;height:170vw;transform:translate3d(-10vw,30vw,0);animation-name:zbf-raster-m}
}
@keyframes zbf-licht-m{to{transform:translate3d(90vw,30vw,0)}}
@keyframes zbf-raster-m{to{transform:translate3d(-90vw,-30vw,0)}}
/* Wie minder beweging vraagt krijgt een stilstaand beeld: licht rechts van het midden, strepen meteen getekend. */
@media (prefers-reduced-motion:reduce){
.footer-widget-wrapper .footer-top-border{animation:none;transform:translate3d(64vw,1vw,0)}
.footer-widget-wrapper .footer-top-border::before{animation:none;transform:translate3d(-64vw,-1vw,0)}
.footer-widget-wrapper .footer-cta::before{animation:none}
.footer-widget-wrapper .zbf-js .zbf-zie .footer-column-title::after,.footer-widget-wrapper .zbf-js .zbf-zie .zbf-streep::after,.footer-widget-wrapper .zbf-js .footer-column-title::after,.footer-widget-wrapper .zbf-js .zbf-streep::after{clip-path:none;animation:none}
.footer-widget-wrapper .footer-nav-bullet{transition:none}
}
/* Buitenvorm: de bovenrand is een heuvel. Boven de boog is de footer doorzichtig, dus de pagina loopt door. */
.footer-widget-wrapper .footer-main{--zbf-h:84px;padding-top:calc(4rem + 40px);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 84' preserveAspectRatio='none'%3E%3Cpath d='M0 84V46C150 18 330 4 560 16C800 28 960 70 1180 52C1300 42 1390 22 1440 26V84Z'/%3E%3C/svg%3E") 0 0/100% var(--zbf-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--zbf-h) - 1px)/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 84' preserveAspectRatio='none'%3E%3Cpath d='M0 84V46C150 18 330 4 560 16C800 28 960 70 1180 52C1300 42 1390 22 1440 26V84Z'/%3E%3C/svg%3E") 0 0/100% var(--zbf-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--zbf-h) - 1px)/100% 100% no-repeat}
.footer-widget-wrapper .footer-main::before{content:'';position:absolute;top:0;left:0;width:100%;height:var(--zbf-h);pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 84' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ea580c' stop-opacity='0'/%3E%3Cstop offset='.16' stop-color='%23ea580c'/%3E%3Cstop offset='.4' stop-color='%23fdba74'/%3E%3Cstop offset='.72' stop-color='%23ea580c'/%3E%3Cstop offset='1' stop-color='%23ea580c' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-5%' y='-80%' width='110%' height='260%'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cpath d='M0 46C150 18 330 4 560 16C800 28 960 70 1180 52C1300 42 1390 22 1440 26' fill='none' stroke='url(%23g)' stroke-width='18' opacity='.55' filter='url(%23b)'/%3E%3Cpath d='M0 46C150 18 330 4 560 16C800 28 960 70 1180 52C1300 42 1390 22 1440 26' fill='none' stroke='url(%23g)' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
@media (min-width:1024px){.footer-widget-wrapper .footer-main{padding-top:calc(6vh + 44px)}}
@media (max-width:767px){.footer-widget-wrapper .footer-main{--zbf-h:48px;padding-top:calc(4rem + 22px)}}