/* ═════════════════════════════════════════════════════════════════
   Weblogic 2026 · globale header en footer (hele site)
   Alles is afgeschermd met #wl26-kop / #wl26-voet, zodat het thema
   en Elementor er niet aan zitten en wij niets van de oude pagina's raken.
   Geladen door weblogic-2026.php op elke pagina.
   ═════════════════════════════════════════════════════════════════ */
#wl26-kop,#wl26-voet{--program: 'program',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; --proxima: 'proxima-nova',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; --owners: 'owners-text','proxima-nova',sans-serif; --ui: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; --mono: ui-monospace,'SF Mono',Menlo,Consolas,monospace; --pink: #E6007E; --ink: #141219; --paper: #ECEAE5; --moss: #5FA043; --wood: #C4914E; --ease: cubic-bezier(.19,1,.22,1);--plum: #3A0B34; --plum2: #5E0F4F; --blush: #FFE3F1; --mint: #E4F1DC; --sand: #F6E7D2;
  font-family:var(--ui);line-height:normal;letter-spacing:normal;text-transform:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#wl26-kop{color:var(--ink)}
#wl26-voet{color:#fff}

/* thema-afscherming: wat Hello/Elementor op kale elementen zet, hier neutraal */
#wl26-kop button{background:none;border:0;border-radius:0;box-shadow:none;color:inherit;font:inherit;
  text-transform:none;letter-spacing:normal;min-height:0;line-height:normal}
#wl26-kop button:hover,#wl26-kop button:focus{background:none;color:inherit}
#wl26-kop h1,#wl26-kop h2,#wl26-kop h3,#wl26-kop h4,#wl26-kop h5,
#wl26-voet h1,#wl26-voet h2,#wl26-voet h3,#wl26-voet h4,#wl26-voet h5{color:inherit;line-height:normal;text-transform:none;margin:0;padding:0}
#wl26-kop ul,#wl26-kop li,#wl26-voet ul,#wl26-voet li{list-style:none;margin:0;padding:0}
#wl26-kop img,#wl26-voet img{height:auto;border:0;border-radius:0;box-shadow:none}
#wl26-kop a:hover,#wl26-voet a:hover,#wl26-kop a:focus,#wl26-voet a:focus{text-decoration:none}
#wl26-kop svg,#wl26-voet svg{display:inline-block}

#wl26-kop *, #wl26-voet *{margin: 0px; padding: 0px; box-sizing: border-box;}
#wl26-kop a, #wl26-voet a{color: inherit; text-decoration: none;}
#wl26-kop img, #wl26-voet img{display: block; max-width: 100%;}
#wl26-kop .hdr{position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100; padding: 18px 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; transition: padding .45s var(--ease);}
#wl26-kop .brand{justify-self: start; display: flex; align-items: center; padding: 6px;}
#wl26-kop .brand img{width: 66px; display: block; transform-origin: 50% 58%; animation: 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0s 1 normal both running markIn, 7s ease-in-out 0.9s infinite normal none running markFloat; transition: filter 0.6s;}
#wl26-kop .brand:hover img{animation-play-state: paused; filter: drop-shadow(rgba(230, 0, 126, 0.55) 0px 14px 28px) saturate(1.15);}
#wl26-kop .glass{background: rgba(255, 255, 255, 0.42); backdrop-filter: blur(20px) saturate(1.9); border: 1px solid rgba(255, 255, 255, 0.62); box-shadow: rgba(20, 18, 25, 0.26) 0px 8px 26px -12px, rgba(255, 255, 255, 0.8) 0px 1px 0px inset;}
#wl26-kop .hdr-nav{justify-self: center; display: flex; align-items: center; gap: 3px; padding: 7px; border-radius: 999px;}
#wl26-kop .hdr-nav a{display: inline-flex; align-items: center; gap: 6px; padding: 12px 21px; border-radius: 999px; font-family: var(--ui); font-weight: 450; letter-spacing: -0.004em; font-size: 0.855rem; color: var(--ink); opacity: 0.72; transition: opacity 0.3s, background 0.3s;}
#wl26-kop .hdr-nav a:hover{opacity: 1; background: rgba(255, 255, 255, 0.62);}
#wl26-kop .hdr-nav svg{opacity: 0.5;}
#wl26-kop .hdr-r{justify-self: end; display: flex; align-items: center; gap: 3px; padding: 7px; border-radius: 999px;}
#wl26-kop .hdr-link{padding: 12px 18px; border-radius: 999px; font-family: var(--ui); font-weight: 450; letter-spacing: -0.004em; font-size: 0.855rem; color: var(--ink); opacity: 0.64; transition: opacity 0.3s, background 0.3s;}
#wl26-kop .hdr-link:hover{opacity: 1; background: rgba(255, 255, 255, 0.62);}
#wl26-kop .pill, #wl26-voet .pill{display: inline-flex; align-items: center; gap: 0.5em; padding: 12px 23px; border-radius: 999px; font-family: var(--ui); font-weight: 500; letter-spacing: -0.004em; font-size: 0.855rem; transition: 0.35s; will-change: transform;}
#wl26-kop .pill--pink{background: var(--pink); color: rgb(255, 255, 255); box-shadow: rgba(230, 0, 126, 0.75) 0px 6px 18px -8px;}
#wl26-kop .pill--pink:hover{background: var(--ink); box-shadow: none;}
#wl26-kop .burger{display: none; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; padding: 0px; border: 0px; background: transparent; color: var(--ink);}
#wl26-kop .burger i{position: relative; display: block; width: 19px; height: 1.7px; border-radius: 2px; background: currentcolor; transition: transform .45s var(--ease),opacity .25s;}
#wl26-kop .burger i::before, #wl26-kop .burger i::after{content: ""; position: absolute; left: 0px; width: 19px; height: 1.7px; border-radius: 2px; background: currentcolor; transition: transform .45s var(--ease);}
#wl26-kop .burger i::before{top: -6px;}
#wl26-kop .burger i::after{top: 6px;}
body.menu-open #wl26-kop .burger i{background: transparent;}
body.menu-open #wl26-kop .burger i::before{transform: translateY(6px) rotate(45deg);}
body.menu-open #wl26-kop .burger i::after{transform: translateY(-6px) rotate(-45deg);}
#wl26-kop .mnav{position: fixed; inset: 0px; z-index: 99; display: none; padding: 96px 18px 26px; background: rgba(246, 243, 238, 0.86); backdrop-filter: blur(26px) saturate(1.7); opacity: 0; transition: opacity .4s var(--ease);}
#wl26-kop .mnav.open{display: block;}
#wl26-kop .mnav.show{opacity: 1;}
#wl26-kop .mnav a{display: flex; align-items: center; justify-content: space-between; padding: 19px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.8); margin-bottom: 9px; font-family: var(--program); font-weight: 500; letter-spacing: -0.026em; font-size: 1.5rem; color: var(--ink); opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease),transform .55s var(--ease),background .3s;}
#wl26-kop .mnav.show a{opacity: 1; transform: none;}
#wl26-kop .mnav.show a:nth-child(1){transition-delay: 0.06s;}
#wl26-kop .mnav.show a:nth-child(2){transition-delay: 0.11s;}
#wl26-kop .mnav.show a:nth-child(3){transition-delay: 0.16s;}
#wl26-kop .mnav.show a:nth-child(4){transition-delay: 0.21s;}
#wl26-kop .mnav.show a:nth-child(5){transition-delay: 0.26s;}
#wl26-kop .mnav a svg{opacity: 0.32;}
#wl26-kop .mnav .mnav-cta{background: var(--pink); border-color: var(--pink); color: rgb(255, 255, 255); justify-content: center; margin-top: 16px; font-weight: 700;}
@media (max-width: 1040px){#wl26-kop .hdr-nav{display: none;}}
@media (max-width: 1040px){#wl26-kop .hdr{grid-template-columns: auto 1fr; padding: 14px 16px;}}
@media (max-width: 1040px){#wl26-kop .burger{display: inline-flex;}}
@media (max-width: 1040px){#wl26-kop .hdr-r .hdr-link{display: none;}}
@media (max-width: 1040px){#wl26-kop .hdr-r{gap: 6px; padding: 6px 6px 6px 16px;}}
@media (max-width: 1040px){#wl26-kop .hdr-r .pill{padding: 11px 17px; font-size: 0.82rem;}}
@media (min-width: 1041px){#wl26-kop .mnav{display: none !important;}}
#wl26-voet .ftr{position: relative; overflow: hidden; color: rgb(255, 255, 255); background: rgb(38, 35, 44); border-radius: 52px 52px 0px 0px; margin-top: -58px; z-index: 3;}
#wl26-voet .ftr .fglow{position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0;}
#wl26-voet .fg1{width: min(680px, 58vw); aspect-ratio: 1 / 1; top: -34%; left: -8%; background: rgba(230, 0, 126, 0.3); animation: 22s ease-in-out 0s infinite alternate none running fdrift;}
#wl26-voet .fg2{width: min(600px, 50vw); aspect-ratio: 1 / 1; bottom: -40%; right: -6%; background: rgba(95, 160, 67, 0.24); animation: 28s ease-in-out 0s infinite alternate-reverse none running fdrift;}
#wl26-voet .ftr > *{position: relative; z-index: 1;}
#wl26-voet .ftr-cta{max-width: 1620px; margin: 0px auto; padding: clamp(54px, 6vw, 80px) clamp(24px, 3.6vw, 56px) clamp(40px, 4vw, 54px); display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;}
#wl26-voet .ftr-cta h2{font-family: var(--program); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 0px;}
#wl26-voet .ftr-cta h2 b{font-weight: 700;}
#wl26-voet .ftr-cta p{margin: 9px 0px 0px; max-width: 42ch; color: rgba(255, 255, 255, 0.6); line-height: 1.55; font-size: 0.92rem;}
#wl26-voet .ftr-act{display: flex; gap: 9px; flex-wrap: wrap; flex-shrink: 0;}
#wl26-voet .pill--white{background: rgb(255, 255, 255); color: var(--ink); padding: 13px 26px; font-size: 0.88rem;}
#wl26-voet .pill--white:hover{background: var(--pink); color: rgb(255, 255, 255);}
#wl26-voet .pill--glass{padding: 13px 26px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.86); background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);}
#wl26-voet .pill--glass:hover{border-color: rgba(255, 255, 255, 0.5); color: rgb(255, 255, 255);}
#wl26-voet .ftr-main{max-width: 1620px; margin: 0px auto; padding: clamp(30px, 3.4vw, 42px) clamp(24px, 3.6vw, 56px) clamp(28px, 3vw, 38px); border-top: 1px solid rgba(255, 255, 255, 0.09); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: clamp(24px, 3vw, 44px);}
@media (max-width: 820px){#wl26-voet .ftr-main{grid-template-columns: 1fr 1fr; gap: 26px 22px;}}
@media (max-width: 820px){#wl26-voet .ftr-main > div:first-child, #wl26-voet .ftr-main > div:last-child{grid-column: 1 / -1;}}
@media (max-width: 820px){#wl26-voet .ftr-main .intro{max-width: none;}}
#wl26-voet .ftr-logo img{width: 132px; display: block; opacity: 0.92;}
#wl26-voet .ftr-main .intro{margin-top: 14px; color: rgba(255, 255, 255, 0.5); font-size: 0.86rem; line-height: 1.6; max-width: 280px;}
#wl26-voet .ftr-main h5{font-family: var(--ui); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); margin-bottom: 13px;}
#wl26-voet .ftr-main ul{list-style: none; display: grid; gap: 8px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.72);}
#wl26-voet .ftr-main ul a{transition: color 0.3s;}
#wl26-voet .ftr-main ul a:hover{color: rgb(255, 255, 255);}
#wl26-voet .fsoc{display: flex; gap: 9px; margin-top: 20px;}
#wl26-voet .fsoc a{width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); transition: color .3s,background .3s,border-color .3s,transform .5s var(--ease);}
#wl26-voet .fsoc a svg{width: 17px; height: 17px; display: block;}
#wl26-voet .fsoc a:hover{color: rgb(255, 255, 255); background: var(--pink); border-color: var(--pink); transform: translateY(-3px);}
#wl26-voet .ftr-bot{max-width: 1620px; margin: 0px auto; padding: 16px clamp(24px, 3.6vw, 56px) 26px; border-top: 1px solid rgba(255, 255, 255, 0.09); display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--ui); font-weight: 450; font-size: 0.75rem; color: rgba(255, 255, 255, 0.42);}
#wl26-voet .ftr-bot nav{display: flex; gap: 20px; flex-wrap: wrap;}
#wl26-voet .ftr-bot a{transition: color 0.3s;}
#wl26-voet .ftr-bot a:hover{color: rgb(255, 255, 255);}
@media (max-width: 700px){#wl26-voet .ftr{border-radius: 34px 34px 0px 0px;}}
@media (max-width: 700px){#wl26-voet .ftr-cta{flex-direction: column; align-items: stretch; gap: 20px; padding: 44px 20px 34px;}}
@media (max-width: 700px){#wl26-voet .ftr-cta h2{font-size: clamp(1.5rem, 6.4vw, 2rem);}}
@media (max-width: 700px){#wl26-voet .ftr-cta p{font-size: 0.88rem; max-width: none;}}
@media (max-width: 700px){#wl26-voet .ftr-act{width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}}
@media (max-width: 700px){#wl26-voet .ftr-act .pill{width: 100%; justify-content: center; text-align: center; padding: 13px 8px; font-size: 0.78rem; white-space: nowrap;}}
@media (max-width: 700px){#wl26-voet .ftr-main{padding: 26px 20px 24px;}}
@media (max-width: 700px){#wl26-voet .ftr-bot{padding: 14px 20px 24px; font-size: 0.72rem; gap: 10px;}}
@media (max-width: 700px){#wl26-voet .ftr-bot nav{gap: 16px;}}
@media (max-width: 380px){#wl26-voet .ftr-act .pill{font-size: 0.72rem; padding: 13px 6px;}}
#wl26-kop .hdr-nav a[aria-current="page"]{opacity: 1; background: rgba(255, 255, 255, 0.5);}
@media (max-width: 620px){#wl26-voet .ftr-cta{padding: 28px 18px 22px !important; gap: 14px !important;}}
@media (max-width: 620px){#wl26-voet .ftr-cta h2{font-size: 1.5rem !important;}}
@media (max-width: 620px){#wl26-voet .ftr-main{padding: 22px 18px !important; gap: 18px 12px !important; grid-template-columns: 1fr 1fr !important;}}
@media (max-width: 620px){#wl26-voet .ftr-main > div:first-child{grid-column: 1 / -1;}}
@media (max-width: 620px){#wl26-voet .ftr-main li{font-size: 0.84rem !important;}}
@media (max-width: 620px){#wl26-voet .ftr-bot{padding: 14px 18px 22px !important; font-size: 0.7rem !important;}}
@keyframes markIn { 
  0% { opacity: 0; transform: translateY(-14px) rotate(-22deg) scale(0.55); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0px); }
  100% { opacity: 1; transform: none; filter: blur(0px); }
}
@keyframes markFloat { 
  0% { transform: translateY(0px) rotate(0deg) scale(1); filter: drop-shadow(rgba(230, 0, 126, 0.26) 0px 6px 14px); }
  22% { transform: translateY(-6px) rotate(-8deg) scale(1.07); filter: drop-shadow(rgba(230, 0, 126, 0.46) 0px 12px 24px); }
  46% { transform: translateY(2px) rotate(5deg) scale(0.97); filter: drop-shadow(rgba(95, 160, 67, 0.34) 0px 4px 10px); }
  68% { transform: translateY(-3px) rotate(-3deg) scale(1.03); filter: drop-shadow(rgba(230, 0, 126, 0.36) 0px 9px 18px); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); filter: drop-shadow(rgba(230, 0, 126, 0.26) 0px 6px 14px); }
}
@keyframes fdrift { 
  0% { transform: translate(0px, 0px) scale(1); }
  100% { transform: translate(4%, -5%) scale(1.14); }
}

/* ruimte onder de vaste header op pagina's die nog niet in het nieuwe ontwerp zitten */
#wl26-kop .wl26-ruimte{height:92px}
@media(max-width:1040px){#wl26-kop .wl26-ruimte{height:76px}}
body.wl26-vol #wl26-kop .wl26-ruimte{display:none}
/* footer: alleen op nieuwe pagina's over de laatste sectie heen */
#wl26-voet .ftr{margin-top:0}
body.wl26-vol #wl26-voet .ftr{margin-top:-58px}
/* WordPress-balk (ingelogd) */
body.admin-bar #wl26-kop .hdr{top:32px}
@media(max-width:782px){body.admin-bar #wl26-kop .hdr{top:46px}}
/* Elementor-omhulsel van de template neutraal */
.elementor-location-header .elementor-widget-html,.elementor-location-footer .elementor-widget-html{margin:0!important}
.elementor-location-header .elementor-element-populated,.elementor-location-footer .elementor-element-populated{padding:0!important}
/* "Ga naar de inhoud": alleen zichtbaar bij toetsenbordfocus */
.skip-link.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link.screen-reader-text:focus{clip:auto;width:auto;height:auto;z-index:100000;top:8px;left:8px;padding:12px 18px;background:#fff;color:#141219;border-radius:10px}

/* ── snelheid: vervaagde lichtvlekken als verloop i.p.v. filter:blur (veel lichter bij scrollen) ── */
#wl26-voet .fg1{background:radial-gradient(closest-side,rgba(230, 0, 126, 0.3) 0%,transparent 100%)!important}
#wl26-voet .fg2{background:radial-gradient(closest-side,rgba(95, 160, 67, 0.24) 0%,transparent 100%)!important}
.glow,.gl,.fglow,.flowbg .gl,#wl26-voet .fglow{filter:none!important}
.brand img,#wl26-kop .brand img{animation:none!important;filter:none!important}
body.admin-bar #wl26-kop .mnav{padding-top:142px}

/* reveal sneller op mobiel: korter en zonder wachttijd */
@media (max-width:820px){body.wl26-vol .reveal{transition-duration:.45s!important;transition-delay:0s!important}}
@media (prefers-reduced-motion:reduce){body.wl26-vol .reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ═════════ soepel scrollen ═════════ */
/* 1 · animaties buiten beeld staan stil (global.js zet .wl26-uit) */
body.wl26-vol .wl26-uit,body.wl26-vol .wl26-uit *,body.wl26-vol .wl26-uit *::before,body.wl26-vol .wl26-uit *::after{animation-play-state:paused!important}
/* 2 · telefoon: geen eindeloze sier-bewegingen en geen glas-vervaging buiten de header */
@media (max-width:820px),(hover:none){
  body.wl26-vol .card.reveal.in,body.wl26-vol .shot.reveal.in,body.wl26-vol .gf.reveal.in,body.wl26-vol .calc--solo.reveal.in,
  body.wl26-vol .pk-pol,body.wl26-vol .c2-pol--a,body.wl26-vol .c2-pol--b,body.wl26-vol .glow,body.wl26-vol .fglow,
  body.wl26-vol .ah-ft--a,body.wl26-vol .ah-ft--b,body.wl26-vol .bstap.in .bs-vis img,body.wl26-vol .stap-baan.in .st-vis img,
  body.wl26-vol .swipe-lbl svg,body.wl26-vol .lk-badge,body.wl26-vol .card.in .bubble,body.wl26-vol .pk-slides::before,
  body.wl26-vol .wijz.aan,body.wl26-vol .plek-b i{animation:none!important}
  body.wl26-vol *,body.wl26-vol *::before,body.wl26-vol *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body.wl26-vol #wl26-kop .glass{background:rgba(255,255,255,.9)!important}
  body.wl26-vol #wl26-kop .mnav{background:rgba(246,243,238,.98)!important}
}
/* telefoon: micro-animaties in kaarten en de bouwbaan spelen één keer en blijven dan staan */
@media (max-width:820px),(hover:none){
  body.wl26-vol .card.in *,body.wl26-vol .card.in *::before,body.wl26-vol .card.in *::after,
  body.wl26-vol .stap-baan.in *,body.wl26-vol .stap-baan.in *::before,body.wl26-vol .stap-baan.in *::after,
  body.wl26-vol .lk-badge,body.wl26-vol .sp-dot,body.wl26-vol .pk-tag i,body.wl26-vol .pk-cap i,body.wl26-vol .bsp-tag i,body.wl26-vol .s2-tag i,
  body.wl26-vol .bar .cur{animation-iteration-count:1!important;animation-fill-mode:both!important}
}

/* telefoon: de lichtlaag achter de tweede helft van de pagina is ~8000px hoog.
   Safari op iPhone kan zo'n laag niet in één keer tekenen en laat dan gaten vallen.
   Daarom op mobiel een vaste, zachte achtergrond in plaats van die laag. */
@media (max-width:820px),(hover:none){
  body.wl26-vol .flowbg .glowlayer{display:none!important}
  body.wl26-vol .flowbg{background:
      radial-gradient(90% 30% at 0% 8%,rgba(230,0,126,.10),transparent 70%),
      radial-gradient(90% 30% at 100% 38%,rgba(95,160,67,.10),transparent 70%),
      radial-gradient(90% 30% at 0% 70%,rgba(95,160,67,.08),transparent 70%),
      radial-gradient(90% 30% at 100% 96%,rgba(230,0,126,.09),transparent 70%),#F6F3EE}
}