.kcl{--red:#E5222F;--ink:#12359A;--blue:#1E56C8;--yel:#FFC83D;--mut:#56638A;--line:#DCE6F8;--sky:#EEF4FF;font-family:Nunito,system-ui,sans-serif;color:var(--ink);max-width:1180px;margin:0 auto;padding:24px 16px 72px;box-sizing:border-box}
.kcl *{box-sizing:border-box}.kcl h1{font:900 clamp(30px,5vw,48px)/1.1 Nunito,system-ui,sans-serif;margin:0 0 8px;color:var(--ink)}.kcl h2{font:800 24px/1.2 Nunito,system-ui,sans-serif;margin:0 0 12px}.kcl h3{font:800 18px/1.3 Nunito,system-ui,sans-serif;margin:0 0 4px}
.kcl p{color:var(--mut);line-height:1.6;margin:0 0 12px}.kcl a{color:var(--blue)}
.kcl .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid transparent;font:800 16px Nunito,system-ui,sans-serif;cursor:pointer;text-decoration:none;background:var(--red);color:#fff;box-shadow:0 8px 18px rgba(229,34,47,.3);transition:transform .15s}
.kcl .btn:hover{transform:translateY(-2px)}.kcl .btn.s{background:var(--ink);box-shadow:none}.kcl .btn.g{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:none}.kcl .btn.sm{min-height:38px;padding:0 16px;font-size:14px}.kcl .btn.d{background:#fff;color:#B3141F;border-color:#F4C4C8;box-shadow:none}.kcl .btn[disabled]{opacity:.5;cursor:default}
.kcl label{display:block;font-weight:800;font-size:14px;margin:14px 0 6px}.kcl input[type=url],.kcl input[type=text],.kcl input[type=email],.kcl input[type=password],.kcl input[type=date],.kcl input[type=number],.kcl textarea,.kcl select{width:100%;min-height:48px;padding:10px 14px;border:2px solid var(--line);border-radius:12px;font:600 16px Nunito,system-ui,sans-serif;color:var(--ink);background:#fff}
.kcl input:focus,.kcl textarea:focus,.kcl select:focus,.kcl .btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.kcl textarea{min-height:90px}
.kcl .err{background:#FDECEE;color:#9B1019;border-radius:12px;padding:10px 14px;font-weight:700;margin:12px 0}.kcl .ok{background:#E8F7EE;color:#14663A;border-radius:12px;padding:10px 14px;font-weight:700;margin:12px 0}
.kcl .card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 6px 18px rgba(18,53,154,.10);overflow:hidden}
.kcl .split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.kcl .art{background:linear-gradient(160deg,#E3EDFF,#fff);border-radius:26px;min-height:420px;display:flex;align-items:center;justify-content:center;position:relative}
.kcl .box{width:150px;height:130px;background:var(--red);border-radius:14px;position:relative;box-shadow:0 18px 30px rgba(18,53,154,.2)}.kcl .box:before{content:"";position:absolute;left:62px;top:0;width:26px;height:100%;background:#fff;opacity:.9}.kcl .box:after{content:"";position:absolute;left:-10px;top:-28px;width:170px;height:34px;background:#C81B27;border-radius:10px}
.kcl .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.kcl .lc .cov{height:130px;background-size:cover;background-position:center;position:relative}.kcl .lc .in{padding:16px}.kcl .lc .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kcl .new{border:3px dashed var(--blue);background:var(--sky);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px;text-decoration:none;text-align:center;padding:20px;border-radius:20px;color:var(--ink)}.kcl .new b{font-size:48px;color:var(--red);line-height:1}
.kcl .badge{display:inline-block;background:var(--yel);color:var(--ink);font-weight:800;font-size:12px;padding:5px 10px;border-radius:999px}.kcl .muted{color:var(--mut)}
.kcl .steps{display:flex;gap:8px;margin:0 0 20px}.kcl .steps i{flex:1;height:8px;border-radius:99px;background:var(--line)}.kcl .steps i.on{background:var(--red)}
.kcl .opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.kcl .opt{border:2px solid var(--line);border-radius:18px;background:#fff;padding:18px 10px;text-align:center;font:800 16px Nunito,system-ui,sans-serif;color:var(--ink);cursor:pointer;min-height:84px}.kcl .opt[aria-pressed=true]{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,34,47,.18)}
.kcl .ed{display:grid;grid-template-columns:380px minmax(0,1fr);gap:24px;align-items:start}.kcl .tabs{display:none;gap:6px;margin-bottom:12px}.kcl .panel{padding:20px}
.kcl .sw{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.kcl .sw input[type=color]{width:48px;height:48px;border:2px solid var(--line);border-radius:12px;padding:2px;background:#fff}
.kcl .pv{border-radius:22px;overflow:hidden;border:1px solid var(--line)}.kcl .pv .hd{padding:36px 24px;text-align:center;background-size:cover;background-position:center}.kcl .pv .bd{padding:20px}
.kcl .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.kcl .it{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;color:#12359A}.kcl .it .im{height:160px;background:#EEF4FF center/cover;display:flex;align-items:center;justify-content:center;color:#4B5B80;font-weight:700}.kcl .it .ib{padding:14px;flex:1;display:flex;flex-direction:column;gap:6px}.kcl .it .ib p{margin:0;font-size:14px}.kcl .it .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.kcl .it.done{opacity:.6}.kcl .price{font-weight:900}
.kcl .mod{position:fixed;inset:0;background:rgba(18,53,154,.45);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px}.kcl .mod .dlg{background:#fff;border-radius:24px;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:24px;color:#12359A}
.kcl .pat-confetti{background-image:radial-gradient(circle,#FFC83D 3px,transparent 4px),radial-gradient(circle,#E5222F 3px,transparent 4px);background-size:48px 48px,72px 72px;background-position:0 0,24px 30px}.kcl .pat-lights{background-image:radial-gradient(circle,#FFC83D 4px,transparent 5px);background-size:36px 36px}.kcl .pat-stars{background-image:radial-gradient(circle,#fff 2px,transparent 3px);background-size:30px 30px}.kcl .pat-flowers{background-image:radial-gradient(circle,#fff 5px,transparent 6px);background-size:44px 44px}.kcl .pat-dots{background-image:radial-gradient(circle,rgba(0,0,0,.15) 2px,transparent 3px);background-size:20px 20px}
.kcl .confetti{position:fixed;inset:0;pointer-events:none;z-index:100000;overflow:hidden}.kcl .confetti i{position:absolute;top:-10px;width:10px;height:14px;animation:kcf 2.2s ease-in forwards}@keyframes kcf{to{transform:translateY(105vh) rotate(540deg);opacity:.8}}
.kcl .status{font-size:13px;font-weight:700;color:var(--mut)}.kcl .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
@media(max-width:800px){.kcl .split{grid-template-columns:1fr}.kcl .art{min-height:200px}.kcl .ed{grid-template-columns:1fr}.kcl .tabs{display:flex}.kcl .ed .pane[hidden]{display:none}.kcl .btn{width:100%}.kcl .btn.sm{width:auto}.kcl .mod{align-items:flex-end;padding:0}.kcl .mod .dlg{border-radius:24px 24px 0 0}}
@media(prefers-reduced-motion:reduce){.kcl *{animation:none!important;transition:none!important}}

/* 0.2.0: UX-verbeteringen */
.kcl .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:800;font-size:15px;opacity:0;pointer-events:none;transition:.25s;z-index:100001;max-width:calc(100vw - 32px);text-align:center}.kcl .toast.show{opacity:1;transform:translate(-50%,0)}.kcl .toast.bad{background:#9B1019}
.kcl .sk{display:grid;gap:14px}.kcl .sk i{display:block;height:120px;border-radius:20px;background:linear-gradient(90deg,#EEF4FF,#F8FAFF,#EEF4FF);background-size:200% 100%;animation:kcsk 1.2s linear infinite}@keyframes kcsk{to{background-position:-200% 0}}
.kcl .hint{font-size:13px;color:var(--mut);margin:6px 0 0}.kcl .stp{font-weight:800;font-size:14px;color:var(--mut);margin:-8px 0 14px}
.kcl .opt .em{display:block;font-size:28px;line-height:1.2;margin-bottom:4px}.kcl .opt small{display:block;margin-top:4px;font-weight:600;font-size:13px}
.kcl .opt:hover{border-color:var(--blue)}.kcl .opt:focus-visible,.kcl .mi:focus-visible,.kcl summary:focus-visible,.kcl .pwt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.kcl .wiz{max-width:760px;margin:0 auto}.kcl .wbar{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.kcl .wbar .btn[type=submit]{margin-left:auto}
.kcl .pw{position:relative}.kcl .pw input{padding-right:84px}.kcl .pwt{position:absolute;right:6px;top:6px;min-height:36px;padding:0 12px;border:0;background:transparent;color:var(--blue);font:800 14px Nunito,system-ui,sans-serif;cursor:pointer;border-radius:10px}
.kcl input[aria-invalid=true]{border-color:#B3141F}
.kcl .dact{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;justify-content:flex-end}.kcl .tabrow{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.kcl .btn.dd{background:#B3141F;box-shadow:none}
.kcl .thumb{display:flex;gap:12px;align-items:center;margin-top:8px}.kcl .thumb img{width:72px;height:72px;object-fit:cover;border-radius:12px}
.kcl .badge.gr{background:var(--line);margin-left:6px}
.kcl .more{display:inline-block;position:relative}.kcl .more summary{list-style:none}.kcl .more summary::-webkit-details-marker{display:none}.kcl .more[open] summary{background:var(--sky)}
.kcl .lc .row{align-items:center}.kcl .menu{display:flex;flex-direction:column;position:absolute;right:0;bottom:44px;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 24px rgba(18,53,154,.18);padding:6px;z-index:5}
.kcl .lc{overflow:visible}.kcl .lc .cov{border-radius:20px 20px 0 0}
.kcl .mi{background:none;border:0;text-align:left;padding:10px 12px;border-radius:10px;font:700 15px Nunito,system-ui,sans-serif;color:var(--ink);cursor:pointer;min-height:44px}.kcl .mi:hover{background:var(--sky)}.kcl .mi.d{color:#B3141F}
.kcl .empty{text-align:center;padding:28px 20px}.kcl .pv .empty{padding:40px 12px;text-align:center;grid-column:1/-1}.kcl .empty .btn{margin-top:6px}
.kcl .sharebox{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--sky);border-radius:16px;padding:12px;margin-bottom:18px}.kcl .sharebox .sl{flex:1;min-width:200px}.kcl .sharebox input{margin:0}
.kcl .ok.warn{background:#FFF4D6;color:#6B4A00}.kcl .tbar{display:flex;gap:8px;flex-wrap:wrap}
.kcl .tabs{display:flex;flex-wrap:wrap;gap:8px}.kcl .tabs .btn{width:auto}.kcl .tabs .btn[aria-pressed=true]{box-shadow:none}
.kcl .grid,.kcl .items{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}.kcl .grid>*,.kcl .items>*,.kcl .ed>*,.kcl .split>*{min-width:0}
.kcl h1,.kcl h2,.kcl h3,.kcl p,.kcl .badge,.kcl .price,.kcl .hd *{overflow-wrap:anywhere}.kcl .lc .in,.kcl .ib{min-width:0}.kcl .pvt{margin:0 0 8px;font-size:16px}
.kcl .irow{display:flex;gap:6px;align-items:center;margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:12px}.kcl .irow .nm{flex:1;font-weight:800;min-width:0;overflow-wrap:anywhere}.kcl .irow .btn{min-width:38px;padding:0 10px;width:auto}
.kcl .rsv{display:flex;gap:12px;align-items:center}.kcl .it .im{font-size:40px}.kcl .it .ib h3{overflow-wrap:anywhere}
.kcl .mod .dlg h2{margin-bottom:14px}.kcl .mod .dlg input[type=file]{width:100%;padding:8px 0}
@media(max-width:800px){.kcl .tabs{display:flex}.kcl .lc .row .btn,.kcl .acts .btn,.kcl .tbar .btn,.kcl .sharebox .btn{width:auto}.kcl .tbar{width:100%}.kcl .tbar .btn{flex:1}.kcl .wbar .btn{flex:1}.kcl .dact{position:sticky;bottom:-24px;background:#fff;padding:12px 0 0}.kcl .dact .btn{flex:1}.kcl .menu{bottom:44px}.kcl .toast{bottom:16px}}
@media(max-width:800px){.kcl .new{min-height:96px;flex-direction:row;gap:12px;padding:14px}.kcl .new b{font-size:36px}.kcl .new h3{margin:0}.kcl .lc .cov{height:90px}}
.kcl h1[tabindex="-1"]:focus{outline:none}
.kcl .opts{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.kcl .opt{padding:14px 8px;min-height:76px}
.kcl input[type=file]{font:600 14px Nunito,system-ui,sans-serif;color:var(--mut);max-width:100%}.kcl input[type=file]::file-selector-button{margin-right:12px;min-height:40px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);font:800 14px Nunito,system-ui,sans-serif;cursor:pointer}

/* 0.3.0: design-upgrade */
.kcl{--r:22px;--sh:0 10px 30px rgba(18,53,154,.10);--sh2:0 18px 40px rgba(18,53,154,.18)}
.kcl .userbar{justify-content:flex-end;margin-bottom:6px;font-size:14px;color:var(--mut)}.kcl .userbar .who a{font-weight:800}
.kcl .lead{font-size:18px;max-width:640px}
.kcl .stats{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.kcl .chip{display:inline-block;background:var(--sky);color:var(--ink);font-weight:800;font-size:14px;padding:6px 14px;border-radius:999px;border:1px solid var(--line)}
.kcl .card{border-radius:var(--r);box-shadow:var(--sh)}.kcl .lc{transition:transform .2s,box-shadow .2s}.kcl .lc:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.kcl .lc .cov{height:120px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}.kcl .lc .cov .ce{font-size:54px;filter:drop-shadow(0 6px 10px rgba(18,53,154,.25))}
.kcl .new{min-height:200px;border-radius:var(--r);transition:transform .2s,background .2s}.kcl .new:hover{transform:translateY(-4px);background:#E3EDFF}
/* kop van een lijstje */
.kcl .pv{border-radius:26px;box-shadow:var(--sh)}.kcl .pv .hd{padding:44px 24px 40px;position:relative}
.kcl .hd .oc{width:76px;height:76px;margin:0 auto 12px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 10px 22px rgba(18,53,154,.18);animation:kcb 3.2s ease-in-out infinite}
.kcl .hd .av{width:88px;height:88px;border-radius:50%;object-fit:cover;border:4px solid #fff;margin:0 auto 12px;display:block;box-shadow:0 10px 22px rgba(18,53,154,.2)}
.kcl .hd .pill{display:inline-block;background:rgba(255,255,255,.85);color:#12359A;font-weight:800;font-size:13px;padding:5px 14px;border-radius:999px}
.kcl .hd h1{margin:10px auto 6px;max-width:760px;font-size:clamp(30px,5.5vw,52px)}.kcl .hd .by{font-weight:800;opacity:.92}.kcl .hd .intro{color:inherit;max-width:560px;margin:12px auto 0;font-size:17px}
@keyframes kcb{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
/* cadeaukaarten */
.kcl .items{gap:18px}.kcl .it{border-radius:var(--r);box-shadow:0 4px 14px rgba(18,53,154,.08);transition:transform .2s,box-shadow .2s;content-visibility:auto;contain-intrinsic-size:auto 380px}
.kcl .it:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.kcl .it .im{position:relative;height:auto;aspect-ratio:4/3;overflow:hidden;background:var(--sky);display:flex;align-items:center;justify-content:center}.kcl .it .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.kcl .it:hover .im img{transform:scale(1.05)}.kcl .it .im .ph{font-size:48px}
.kcl .pp{position:absolute;left:10px;bottom:10px;background:#fff;color:var(--ink);font-weight:900;font-size:15px;padding:4px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(18,53,154,.22)}
.kcl .rib{position:absolute;top:12px;left:0;background:var(--ink);color:#fff;font-weight:800;font-size:12px;padding:5px 12px 5px 10px;border-radius:0 999px 999px 0}
.kcl .it.done{opacity:1}.kcl .it.done .im img,.kcl .it.done .im .ph{filter:grayscale(.85);opacity:.6}.kcl .it.done .ib h3{color:var(--mut)}
.kcl .it .ib{padding:16px;gap:6px}.kcl .it .ib h3{font-size:17px;margin:0}.kcl .it .ib .nt{color:#2B3A67;font-size:14px}.kcl .it .ib .sm{font-size:13px}.kcl .it .ib .qty{font-weight:800;color:var(--ink);font-size:13px}
.kcl .it .acts .btn{width:100%}.kcl .it .acts .btn.sm{width:auto;flex:1}.kcl .it .acts .badge{margin:4px 0}
.kcl .lnk{font-weight:800;font-size:14px;text-decoration:none;color:var(--blue);margin-top:6px}.kcl .lnk:hover{text-decoration:underline}
/* bezoekersweergave */
.kcl .shared .bd{padding:22px}.kcl .tools{background:rgba(255,255,255,.9);border-radius:18px;padding:14px 16px;margin-bottom:18px;display:grid;gap:12px}
.kcl .pt{font-weight:800;font-size:14px;color:var(--ink);margin-bottom:6px}.kcl .pbar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}.kcl .pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--yel));transition:width .6s}
.kcl .trow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.kcl .trow select{width:auto;min-height:38px;padding:4px 12px;font-size:14px;flex:1;min-width:170px}
.kcl .how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 8px;font-weight:700;color:var(--ink);font-size:14px}.kcl .how div{background:var(--sky);border-radius:16px;padding:14px;line-height:1.4}.kcl .how b{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;align-items:center;justify-content:center;margin-right:6px}
.kcl .status{line-height:1.6}
@media(max-width:800px){.kcl .how{grid-template-columns:1fr}.kcl .it .acts .btn{width:100%}.kcl .pv .hd{padding:32px 16px 28px}.kcl .shared .bd{padding:14px}}
@media print{.kcl .userbar,.kcl .tools,.kcl .how,.kcl .acts,.kcl .lnk,.kcl .toast{display:none!important}.kcl .it{break-inside:avoid;box-shadow:none}}
@media(max-width:800px){.kcl .trow .btn{flex:1;min-width:140px}.kcl .trow select{flex:1 1 100%}}