/* homepage-hero (origineel KadoCadeau-ontwerp) */
.kch{--red:#E5222F;--ink:#12359A;--mut:#4B5B80;font-family:'Nunito',system-ui,sans-serif;color:var(--ink);position:relative;overflow-x:clip}
.kch *{box-sizing:border-box}
.kch h1,.kch p{margin:0;padding:0}
.kch h1{font-family:'Fredoka','Nunito',system-ui,sans-serif;font-weight:600;color:var(--ink);font-size:clamp(44px,6vw,84px);line-height:1;letter-spacing:-.025em}
.kch h1 .ln{display:block}.kch .red{color:var(--red)}
.kch a,.kch a:hover{text-decoration:none!important}
.kch img{display:block;max-width:none;height:auto}
.kch .wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.kch .btn{font-family:'Fredoka','Nunito',system-ui,sans-serif;display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:99px;font-weight:800;font-size:16px;transition:transform .2s,box-shadow .2s,background .2s}
.kch .btn:hover{transform:translateY(-2px) scale(1.03)}.kch .btn:active{transform:scale(.97)}
.kch .btn.red{background:var(--red);color:#fff!important;box-shadow:0 10px 24px rgba(229,34,47,.35)}
.kch .btn.wh{background:#fff;color:var(--ink)!important;box-shadow:0 4px 18px rgba(18,53,154,.12)}
.kch.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.kch.js .rv.in{opacity:1;transform:none}
.kch .hero{position:relative;padding:72px 0 110px;min-height:660px;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,0) 62%),url(/wp-content/uploads/2026/10/kc-l-bg.jpg) center/cover,#EAF2FF}
.kch .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;min-height:520px;pointer-events:none}
.kch .hero .wrap>*{pointer-events:auto}
.kch .sub{font-size:19px;font-weight:600;color:var(--mut);margin:20px 0 28px;max-width:420px}
.kch .ctas{display:flex;gap:12px;flex-wrap:wrap}
.kch .scene{position:absolute;inset:0;pointer-events:none}
.kch .stack{position:absolute;inset:0}
.kch .comp{position:absolute;right:0;top:40px;width:66%;aspect-ratio:1.25/1}
.kch .comp .lay{position:absolute;will-change:transform}
.kch .comp .lay img{display:block;width:100%;height:auto;max-width:none;opacity:0;translate:var(--x0,0) var(--y0,0);scale:var(--s0,.9);rotate:0deg;pointer-events:none;transition:opacity .5s var(--d,0s),scale 1s cubic-bezier(.2,1.5,.4,1) var(--d,0s),translate 1.1s cubic-bezier(.2,1.1,.3,1) var(--d,0s),rotate 1.1s ease var(--d,0s)}
.kch .comp .lay.pt img{pointer-events:auto;cursor:pointer}
.kch .stack.in .comp .lay img{opacity:1;translate:0 0;scale:1;rotate:var(--r,0deg)}
.kch .comp .lay.ribn img{opacity:1;translate:0 0;scale:1;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.4,0,.2,1)}
.kch .stack.in .comp .lay.ribn img{clip-path:inset(0)}
.kch .stack.fl .comp .lay img{animation:kchfl var(--fs,7s) ease-in-out var(--fd,0s) infinite}
.kch .stack.fl .comp .lay.ribn img{animation:kchrfl 9s ease-in-out infinite}
.kch .stack.fl .comp .lay.pt:not(:nth-child(1)) img{--fs:9s}
.kch .cf{position:absolute;width:8px;height:13px;border-radius:2px;left:var(--x);top:var(--y);background:var(--c);pointer-events:none;animation:kchcf 1.1s cubic-bezier(.2,.7,.3,1) forwards;z-index:5}
@keyframes kchfl{0%,100%{translate:0 0;rotate:var(--r,0deg)}50%{translate:0 calc(var(--amp,10px)*-1);rotate:calc(var(--r,0deg) + 1.8deg)}}
@keyframes kchrfl{0%,100%{translate:0 0}50%{translate:6px -6px}}
@keyframes kchcf{100%{translate:var(--dx) var(--dy);rotate:var(--r);opacity:0}}
/* 1.6.3: tekst en knoppen altijd boven de afbeeldingen, en geen blauwe selectie bij klikken/tikken op de afbeeldingen */
.kch .hero .hl{position:relative;z-index:3}
.kch .scene,.kch .scene *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.kch .scene img{-webkit-user-drag:none;user-drag:none}
.kch .comp .lay.pt img{touch-action:manipulation}
.kch .scene ::selection,.kch .hl ::selection{background:transparent}
.kch .btn{position:relative;z-index:4;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(max-width:1000px){.kch .hero .wrap{grid-template-columns:1fr}}
@media(max-width:760px){
 .kch .ctas .btn.wh{display:none!important}
 .kch h1{font-size:36px;line-height:1.02}
 .kch .sub{max-width:58%;font-size:16px}
 .kch .hero{padding:36px 0 64px;min-height:670px}
 .kch .hero .wrap{display:block;min-height:0;padding:0 18px}
 .kch .comp{width:104%;right:-10%;top:250px}
 .kch .sub{max-width:92%}
 .kch .comp .lay.ribn{display:none}
}
@media(prefers-reduced-motion:reduce){.kch .comp .lay img{transition:none!important;animation:none!important}.kch.js .rv{opacity:1;transform:none;transition:none}}