/* 2C Web · lichte huisstijl over de samensteller (pz3/bk3).
   Basis = pz3.css in 2C-kleuren; dit bestand zet alles wat op de pagina zelf staat om naar licht.
   Apparaten (telefoon, laptop, camera) blijven donker navy, zoals echte toestellen. */

/* ---------- integratie in het 2C-thema ---------- */
body.f22-pz3 .twoc-pz-section,body.f22-pz3 .f22-pz-sec{position:relative;isolation:isolate;overflow:hidden;background:#F4F7F9!important;padding-top:24px!important;padding-bottom:72px!important}
body.f22-pz3 .twoc-pz-section::before,body.f22-pz3 .f22-pz-sec::before{display:none!important}
body.f22-pz3 .twoc-pz-section>.twoc-inner,body.f22-pz3 .twoc-pz-section .twoc-inner{position:relative;z-index:1;max-width:none!important}
body.f22-pz3 .c2-hero-hide{display:none!important}
body.f22-pz3 .twoc-bkv-section.c2-hero-hide{display:none!important}
.c2-rook{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.pz3,.pz3 *{box-sizing:border-box}
.pz3 h1,.pz3 h2,.pz3 h3,.pz3 h4{font-family:var(--f22-sans);color:inherit;margin-top:0}
.pz3 p{margin-top:0}
.pz3 button{font-family:var(--f22-sans)}

/* ---------- basis ---------- */
body.f22-pz3 .pz3{--esp:#F4F7F9;--cream:#FFFFFF;--beige:#F4F7F9;--sal:#00ACEA;--sald:#0079AD;--mute:#66757F;color:#0E1A23;background:transparent!important}
body.f22-pz3 .pz3 a{color:#0079AD}
body.f22-pz3 .pz3 .mono,body.f22-pz3 .pz3 em.s,body.f22-pz3 .pz3 .kies .kk,body.f22-pz3 .pz3 .kies .kh em{color:#0079AD}
body.f22-pz3 .pz3 em.s,body.f22-pz3 .pz3 .kies .kh em{font-style:italic}
body.f22-pz3 .pz3 .kies .kh,body.f22-pz3 .pz3 #ptitle,body.f22-pz3 .pz3 .opts h2,body.f22-pz3 .pz3 .pk,body.f22-pz3 .pz3 .tl{color:#0E1A23}
body.f22-pz3 .pz3 .kies .kp,body.f22-pz3 .pz3 .kd,body.f22-pz3 .pz3 .kfree,body.f22-pz3 .pz3 .onote,body.f22-pz3 .pz3 .pk small,body.f22-pz3 .pz3 .tl small,body.f22-pz3 .pz3 .oc small,body.f22-pz3 .pz3 .pc small,body.f22-pz3 .pz3 .cap p,body.f22-pz3 .pz3 .inh small,body.f22-pz3 .pz3 .st p,body.f22-pz3 .pz3 .pk .full,body.f22-pz3 .pz3 .hero p.l{color:#66757F}

/* koppen: accentwoord in 2C-stijl (blauw, zelfde letter) */
body.f22-pz3 .pz3 em.s,body.f22-pz3 .pz3 .kh em,body.f22-pz3 .pz3 h1>em,body.f22-pz3 .pz3 h2>em{font-family:var(--f22-sans)!important;font-style:normal!important;font-weight:inherit!important;letter-spacing:inherit}
body.f22-pz3 .pzwho .wo,body.f22-pz3 .pzwho .wo b{color:#0E1A23}
/* knoppen */
body.f22-pz3 .pz3 .btn.dark{background:#0E1A23;color:#fff}
body.f22-pz3 .pz3 .btn.dark:hover{background:#0079AD}
body.f22-pz3 .pz3 .btn.ghost{color:#0E1A23;box-shadow:inset 0 0 0 1.5px #0E1A23}
body.f22-pz3 .pz3 .btn.ghost:hover{background:#0E1A23;color:#fff}
body.f22-pz3 .pz3 .chips button.on{background:#0E1A23;color:#fff;border-color:#0E1A23}
body.f22-pz3 .pz3 .seg{background:#fff;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3 .seg button{color:#3D4B57}
body.f22-pz3 .pz3 .seg button:hover{background:#F4F7F9}
body.f22-pz3 .pz3 .seg button.on{background:#0E1A23;color:#fff}

/* mandje */
body.f22-pz3 .cartbtn,body.f22-pz3 .pz3 .cartbtn{background:#fff;color:#0E1A23;box-shadow:0 0 0 1px #E1E7EC,0 10px 24px -14px rgba(14,26,35,.35)}
body.f22-pz3 .cartbtn span,body.f22-pz3 .pz3 .cartbtn span{background:#00ACEA;color:#0E1A23}
body.f22-pz3 .pz3 .cpanel{background:#fff;color:#0E1A23}
body.f22-pz3 .pz3 .cart.open .cpanel{box-shadow:-30px 0 60px -30px rgba(14,26,35,.35)}
body.f22-pz3 .pz3 .cx{background:#F4F7F9;color:#0E1A23}
body.f22-pz3 .pz3 .citems li{background:#F4F7F9}
body.f22-pz3 .pz3 .cbg,body.f22-pz3 .pz3 .ask{background:rgba(14,26,35,.45)}

/* ---------- stap 0: kies een dienst ---------- */
body.f22-pz3 .pz3 .kcard{background:#fff;color:#0E1A23;box-shadow:inset 0 0 0 1px #E1E7EC,0 18px 40px -30px rgba(14,26,35,.28)}
body.f22-pz3 .pz3 .kcard:hover,body.f22-pz3 .pz3 .kcard:focus-visible{box-shadow:inset 0 0 0 1.5px #00ACEA,0 30px 50px -28px rgba(14,26,35,.35)}
body.f22-pz3 .pz3 .kcard.top{box-shadow:inset 0 0 0 1.5px #00ACEA,0 18px 40px -30px rgba(14,26,35,.28)}
body.f22-pz3 .pz3 .kcard.on,body.f22-pz3 .pz3 .kcards.x-oth .kcard.in{box-shadow:inset 0 0 0 2px #00ACEA}
body.f22-pz3 .pz3 .kill{background:#EAF1F6}
body.f22-pz3 .pz3 .kt{color:#0E1A23}
body.f22-pz3 .pz3 .kpr{color:#66757F}
body.f22-pz3 .pz3 .kpr b{color:#0E1A23}
body.f22-pz3 .pz3 .kgo{background:#0E1A23;color:#fff}
body.f22-pz3 .pz3 .kback,body.f22-pz3 .pz3 .kwback{color:#3D4B57;box-shadow:inset 0 0 0 1px #E1E7EC;background:#fff}
body.f22-pz3 .pz3 .kback:hover,body.f22-pz3 .pz3 .kwback:hover{color:#0E1A23;background:#E5F6FD}
body.f22-pz3 .pz3 .kw{box-shadow:0 10px 24px -14px rgba(14,26,35,.35)}
body.f22-pz3 .pz3 .kg i{background:#C9D8E3}
body.f22-pz3 .pz3 .kg i:nth-child(5){background:#0E1A23}
body.f22-pz3 .pz3 .kc{background:#fff}
body.f22-pz3 .pz3 .kc:after{background:#fff}
body.f22-pz3 .pz3 .kw-card .kl,body.f22-pz3 .pz3 .kill .kwarrow{color:#0079AD}
body.f22-pz3 .pz3 .ksteps{color:#66757F}
body.f22-pz3 .pz3 .ksteps li+li:before{background:#D3DDE4}
body.f22-pz3 .pz3 .ksteps b{box-shadow:inset 0 0 0 1px #C4D0D9;color:#3D4B57}
body.f22-pz3 .pz3 .ksteps li.on{color:#0E1A23}
body.f22-pz3 .pz3 .ksteps li.done b{background:#E5F6FD;color:#0079AD}
body.f22-pz3 .pz3 .kl22{background:#fff;box-shadow:0 0 0 8px rgba(0,172,234,.14)}

/* ---------- stap 1-3: samenstellen ---------- */
body.f22-pz3 .pz3 .pk,body.f22-pz3 .pz3 .tl,body.f22-pz3 .pz3 .oc{background:#fff;border-color:#E1E7EC;box-shadow:0 12px 30px -26px rgba(14,26,35,.3)}
body.f22-pz3 .pz3 .oc{box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3 .pk:hover,body.f22-pz3 .pz3 .tl:hover{border-color:#9BD9F2}
body.f22-pz3 .pz3 .pk.on,body.f22-pz3 .pz3 .tl.on{border-color:#00ACEA;background:#F2FAFE}
body.f22-pz3 .pz3 .pk .tg,body.f22-pz3 .bk3 .pk.on .full{color:#0079AD}
body.f22-pz3 .pz3 .tl .bx{box-shadow:inset 0 0 0 1.5px #A9B7C2;background:#fff}
body.f22-pz3 .pz3 .tl.on .bx{background:#00ACEA;box-shadow:inset 0 0 0 5px #fff,0 0 0 1.5px #00ACEA}
body.f22-pz3 .pz3 .tot,body.f22-pz3 .pz3 .panel,body.f22-pz3 .pz3 .form,body.f22-pz3 .pz3 .askbox{background:#fff;box-shadow:0 0 0 1px #E1E7EC,0 30px 60px -40px rgba(14,26,35,.4)}
body.f22-pz3 .pz3 .tot small,body.f22-pz3 .pz3 .pm,body.f22-pz3 .pz3 .u{color:#66757F}
body.f22-pz3 .pz3 .card,body.f22-pz3 .pz3 .ohero,body.f22-pz3 .pz3 .pc{background:#fff;color:#0E1A23;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3 .cap{border-top-color:#E1E7EC}
body.f22-pz3 .pz3 .incl{background:#E5F6FD;box-shadow:inset 0 0 0 1.5px rgba(0,172,234,.35)}
body.f22-pz3 .pz3 .incl li{background:#fff;color:#0E1A23}
body.f22-pz3 .pz3 .oinh{background:#fff;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3 .oinh li{background:#E5F6FD}
body.f22-pz3 .pz3 .addb{background:#F4F7F9;color:#0E1A23;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3 .addb:hover,body.f22-pz3 .pz3 .addb.in{background:#00ACEA;color:#0E1A23}
body.f22-pz3 .pz3 .qty button{background:#F4F7F9}
body.f22-pz3 .pz3 .st i{background:#0E1A23;color:#fff}
/* plakkerige telefoonkolom: fade naar de lichte achtergrond */
body.f22-pz3 .pz3 .phonecol,body.f22-pz3 .pz3 .ohero.is-stuck,body.f22-pz3 .pz3 .phonecol.is-stuck{background:linear-gradient(180deg,rgba(244,247,249,.96) 0%,rgba(244,247,249,.9) 45%,rgba(244,247,249,.55) 72%,rgba(244,247,249,.18) 90%,rgba(244,247,249,0) 100%)!important}
body.f22-pz3 .pz3 .phonecol:before,body.f22-pz3 .pz3 .ohero:before{background:linear-gradient(180deg,rgba(244,247,249,.96) 0%,rgba(244,247,249,.9) 50%,rgba(244,247,249,.7) 62%,rgba(244,247,249,.44) 75%,rgba(244,247,249,.2) 87%,rgba(244,247,249,.06) 95%,rgba(244,247,249,0) 100%)!important}
@media (min-width:861px){body.f22-pz3 .pz3 .phonecol,body.f22-pz3 .pz3 .phonecol.is-stuck{background:none!important}body.f22-pz3 .pz3 .phonecol:before{display:none!important}}
body.f22-pz3 .pz3 .ohero{background:#fff!important}
body.f22-pz3 .pz3 .phone,body.f22-pz3 .pz3 .sp-phone{box-shadow:0 0 0 1.5px rgba(14,26,35,.1),0 50px 90px -40px rgba(14,26,35,.55)}
body.f22-pz3 .pz3 .sp-lbl{color:#0079AD}
body.f22-pz3 .pz3 .sp-poses span,body.f22-pz3 .pz3 .sp-scenes span{background:#fff;color:#3D4B57;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3 .sp-cal{background:#fff;box-shadow:inset 0 0 0 1px #E1E7EC;color:#0E1A23}
body.f22-pz3 .pz3 .sp-tl{background:#D3DDE4}
body.f22-pz3 .pz3 .sp-vid .ctl{color:#0E1A23}
body.f22-pz3 .pz3 .sp-vid .ctl .tr{background:#D3DDE4}
body.f22-pz3 .pz3 .sp-reelx .nfo{background:#fff;color:#66757F;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3 .sp-reelx .nfo b{color:#0E1A23}
body.f22-pz3 .pz3 .sp-logo .sw span,body.f22-pz3 .pz3 .sp-logo .hl span,body.f22-pz3 .pz3 .sp-logo.only-hs .hs-t{color:#3D4B57}
body.f22-pz3 .pz3 .sp-shadow{background:rgba(14,26,35,.25)}

/* ---------- bestaande klanten (bk3) ---------- */
body.f22-pz3 .pz3.bk3 .bk-top h1,body.f22-pz3 .pz3.bk3 .opts h2,body.f22-pz3 .pz3.bk3 .bk-s1 h2,body.f22-pz3 .pz3.bk3 .bk-s2h h2,body.f22-pz3 .pz3.bk3 .bk-more h2,body.f22-pz3 .pz3.bk3 .bk-sum h2{color:#0E1A23!important}
body.f22-pz3 .pz3.bk3 .bk-top .lead,body.f22-pz3 .pz3.bk3 .bk-links,body.f22-pz3 .pz3.bk3 .opts .sub,body.f22-pz3 .pz3.bk3 .bk-s1 .hint,body.f22-pz3 .pz3.bk3 .bk-s2h p,body.f22-pz3 .pz3.bk3 .oinh .pick,body.f22-pz3 .pz3.bk3 .bk-cap,body.f22-pz3 .pz3.bk3 .hsub,body.f22-pz3 .pz3.bk3 .bk-alt,body.f22-pz3 .pz3.bk3 .bk-ms small,body.f22-pz3 .pz3.bk3 .bk-mini small,body.f22-pz3 .pz3.bk3 .bk-free small,body.f22-pz3 .pz3.bk3 .bk-dg span{color:#66757F}
body.f22-pz3 .pz3.bk3 .bk-links a{box-shadow:inset 0 0 0 1px #E1E7EC;color:#0E1A23!important;background:#fff}
body.f22-pz3 .pz3.bk3 .bk-links a:first-child{background:#0E1A23;color:#fff!important}
body.f22-pz3 .pz3.bk3 .grp,body.f22-pz3 .pz3.bk3 .bk-svcw>.mono,body.f22-pz3 .pz3.bk3 .bk-more>.mono,body.f22-pz3 .pz3.bk3 .bk-s1 .tt,body.f22-pz3 .pz3.bk3 .bk-s1 .f22n,body.f22-pz3 .pz3.bk3 .bk-mini span,body.f22-pz3 .pz3.bk3 .bk-ms b,body.f22-pz3 .pz3.bk3 .bk-dg small,body.f22-pz3 .pz3.bk3 .bk-dg .on small{color:#0079AD}
body.f22-pz3 .pz3.bk3 .bk-adv .lk a,body.f22-pz3 .pz3.bk3 .bk-s1 .lk a,body.f22-pz3 .pz3.bk3 .bk-alt a{color:#0079AD!important}
body.f22-pz3 .pz3.bk3 .bk-chips button,body.f22-pz3 .pz3.bk3 .bk-dg>*,body.f22-pz3 .pz3.bk3 .bk-free,body.f22-pz3 .pz3.bk3 .bk-mini div{background:#fff;color:#0E1A23;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3.bk3 .bk-dg a{color:#0E1A23!important}
body.f22-pz3 .pz3.bk3 .bk-chips button.on,body.f22-pz3 .pz3.bk3 .bk-seg button.on{background:#00ACEA;color:#0E1A23}
body.f22-pz3 .pz3.bk3 .bk-dg .on{background:#F2FAFE;box-shadow:inset 0 0 0 2px #00ACEA}
body.f22-pz3 .pz3.bk3 .bk-adv,body.f22-pz3 .pz3.bk3 .bk-s1 .r{background:#E5F6FD;box-shadow:inset 0 0 0 1.5px rgba(0,172,234,.35);color:#0E1A23}
body.f22-pz3 .pz3.bk3 .bk-adv ul,body.f22-pz3 .pz3.bk3 .bk-s1 .r ul{color:#3D4B57}
body.f22-pz3 .pz3.bk3 .bk-s1 .r h3{color:#0E1A23}
body.f22-pz3 .pz3.bk3 .bk-adv button,body.f22-pz3 .pz3.bk3 .bk-s1 .r button{background:#0E1A23;color:#fff}
body.f22-pz3 .pz3.bk3 .bk-s1{background:#fff;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3.bk3 .bk-seg{background:#fff;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3.bk3 .bk-seg button{color:#3D4B57}
body.f22-pz3 .pz3.bk3 .bk-ms .m{background:#fff;box-shadow:inset 0 0 0 1px #E1E7EC}
body.f22-pz3 .pz3.bk3 .bk-ms .br{background:#E1E7EC}
body.f22-pz3 .pz3.bk3 .bk-ms s{color:#8D9BA6}
body.f22-pz3 .pz3.bk3 .bk-sum,body.f22-pz3 .pz3.bk3 .bk-rec{background:#fff;box-shadow:0 0 0 1px #E1E7EC,0 30px 60px -40px rgba(14,26,35,.4)}
body.f22-pz3 .pz3.bk3 .bk-form input,body.f22-pz3 .pz3.bk3 .bk-form textarea{background:#F4F7F9}
body.f22-pz3 .pz3.bk3 .bk-form button{background:#0E1A23;color:#fff}
body.f22-pz3 .bk-bar{background:rgba(255,255,255,.97);box-shadow:0 0 0 1px #E1E7EC,0 20px 40px -14px rgba(14,26,35,.35)}
body.f22-pz3 .bk-ask{background:rgba(14,26,35,.45)}
body.f22-pz3 .bk-ask .in{background:#fff}

/* meldingen */
body.f22-pz3 .f22-added{background:#fff;box-shadow:0 0 0 1px #E1E7EC,0 24px 50px -18px rgba(14,26,35,.4)}
body.f22-pz3 .f22-subj{background:rgba(255,255,255,.95);color:#0E1A23;box-shadow:inset 0 0 0 1px #E1E7EC,0 10px 24px -12px rgba(14,26,35,.3)}
body.f22-pz3 .f22-subj b{color:#0079AD}

/* "Wat past bij jou?" */
body.f22-pz3 .pzwho .wi22{background:#fff;box-shadow:inset 0 0 0 1px #E1E7EC;padding:5px}

/* ---------- 2C-beeldmerk (PNG, onveranderd) i.p.v. het getekende 22-teken ---------- */
.pz3 img.c2mk{display:block;max-width:100%;height:auto;object-fit:contain}
.pzwho .wi22 img.c2mk,.pz3 .wi22 img.c2mk{width:100%;height:100%}
.pz3 .sp-anim img.sp-22{width:150px;height:auto;animation:c2mkLoop 3s ease-in-out infinite}
.pz3 .sp-vid .s4 img.c2mk{width:96px;animation:vLogo 10s 7.5s infinite}
.pz3 .sp-vid .s4{background:#fff!important}
@keyframes c2mkDraw{0%{opacity:0;transform:scale(.82);clip-path:inset(0 100% 0 0)}55%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes c2mkLoop{0%{opacity:0;transform:scale(.8);clip-path:inset(0 100% 0 0)}40%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}80%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}100%{opacity:0;transform:scale(1.04);clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.pz3 img.c2mk{animation:none!important;clip-path:none!important;opacity:1!important}}

/* ---------- openingsanimatie (uit f22-intro.css, selectors voor het 2C-thema) ---------- */
.f22-ia-layer{position:fixed;inset:0;z-index:9990;pointer-events:none}
.f22-ia-wait{visibility:hidden!important}
html.f22-ia-pre main .entry-content>*,html.f22-ia-pre .pz3 .c>*,html.f22-ia-pre .wp-site-blocks>footer,html.f22-ia-pre .wp-site-blocks>.wp-block-template-part:last-child,html.f22-ia-pre .cartbtn{visibility:hidden}
html.f22-ia-pre .f22-ia-target:not(.f22-ia-wait){visibility:visible}
html.f22-ia-reveal .pz3 .opts>*,html.f22-ia-reveal .pz3 .c>div:first-child,html.f22-ia-reveal .pz3 .kies>*:not(.kcards){animation:f22iaUp .7s cubic-bezier(.2,.7,.2,1) both}
html.f22-ia-reveal .pz3 .opts>*:nth-child(2){animation-delay:.1s}html.f22-ia-reveal .pz3 .opts>*:nth-child(3){animation-delay:.18s}html.f22-ia-reveal .pz3 .opts>*:nth-child(n+4){animation-delay:.26s}
@keyframes f22iaUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* rook over de volle breedte (het thema begrenst kinderen van een constrained-sectie) */
body.f22-pz3 .twoc-pz-section>.c2-rook{position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;margin:0!important}