/* Website-CMS: overzicht, artikel-editor en bewerkmodus op de website */
.ws-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.ws-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ws-acts input{height:36px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--ink);font:inherit;font-size:.88rem;min-width:200px}
.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.ws-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.ws-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.ws-img{position:relative;aspect-ratio:16/8;background:var(--surface-2);cursor:pointer;overflow:hidden}
.ws-img img{width:100%;height:100%;object-fit:cover;display:block}
.ws-img .pill{position:absolute;top:10px;left:10px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ws-body{padding:14px 16px 6px;display:grid;gap:6px;flex:1}
.ws-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-ink,var(--teal))}
.ws-body h4{font-family:var(--f-display);font-size:1.02rem;line-height:1.3;margin:0;cursor:pointer}
.ws-body h4:hover{color:var(--teal-ink,var(--teal))}
.ws-body p{margin:0;font-size:.84rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ws-meta{display:flex;justify-content:space-between;gap:8px;padding:6px 16px 10px;font-size:.76rem;color:var(--muted)}
.ws-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.ws-foot .btn{flex:1;justify-content:center}
.ws-uitleg{display:flex;gap:10px;align-items:flex-start;background:var(--info-bg,var(--surface-2));color:var(--ink-2);border-radius:12px;padding:12px 14px;font-size:.86rem;line-height:1.5}
.ws-uitleg svg{flex:none;margin-top:2px;color:var(--info,var(--teal))}
.ws-pag{display:grid}
.ws-prow{display:grid;grid-template-columns:minmax(150px,220px) 1fr auto;gap:18px;align-items:center;padding:16px 4px;border-top:1px solid var(--line)}
.ws-prow:first-child{border-top:0}
.ws-pn{display:grid;gap:4px;justify-items:start}
.ws-pn a{color:var(--muted)}
.ws-pa{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ws-g{display:grid;gap:2px;font-family:Arial,Helvetica,sans-serif;min-width:0;max-width:600px}
.ws-gu{font-size:12px;color:#4d5156;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-gt{font-size:17px;color:#1a0dab;line-height:1.3}
.ws-gd{font-size:13px;color:#4d5156;line-height:1.45}
@media (max-width:860px){.ws-prow{grid-template-columns:1fr}.ws-pa{justify-content:flex-start}}

/* Artikel-editor (volledig scherm) */
body.ws-lock{overflow:hidden}
.ws-ov{position:fixed;inset:0;z-index:200;background:var(--bg,#F5F7FA);display:grid;grid-template-rows:auto 1fr;animation:wsIn .18s ease-out}
@keyframes wsIn{from{opacity:0;transform:translateY(8px)}}
.ws-oh{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.ws-ot{flex:1;display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.ws-oa{display:flex;gap:8px;flex-wrap:wrap}
.ws-warn{color:var(--crit)!important;border-color:var(--crit)!important}
.ws-ob{overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:28px max(20px,calc((100vw - 1180px)/2))}
.ws-main{display:grid;gap:10px;align-content:start;min-width:0}
.ws-cover{position:relative;aspect-ratio:21/8;border-radius:18px;overflow:visible;background:var(--surface-2)}
.ws-cover>img{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block}
.ws-cbtn{position:absolute;right:14px;bottom:14px;background:rgba(16,36,58,.78);color:#fff;border:0;backdrop-filter:blur(6px)}
.ws-cbtn:hover{background:rgba(16,36,58,.92)}
.ws-titel,.ws-intro{border:0;background:none;resize:none;font:inherit;color:var(--ink);padding:4px 2px;outline:none;width:100%;overflow:hidden}
.ws-titel{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;margin-top:12px}
.ws-intro{font-size:1.08rem;color:var(--ink-2);line-height:1.5}
.ws-titel::placeholder,.ws-intro::placeholder{color:var(--muted);opacity:.7}
.ws-tb{position:sticky;top:-28px;z-index:3;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 4px 14px rgba(16,36,58,.06);margin-top:8px}
.ws-tb button,.ws-tb select{border:0;background:none;color:var(--ink-2);font:inherit;font-size:.84rem;padding:6px 10px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ws-tb select{background:var(--surface-2);font-weight:600}
.ws-tb button:hover,.ws-tb button.on{background:var(--surface-2);color:var(--ink)}
.ws-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.ws-tbw{margin-left:auto;font-size:.76rem;color:var(--muted);padding-right:6px}
.ws-ed{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px clamp(18px,4vw,48px);min-height:420px;outline:none;max-width:none}
.ws-ed:focus{border-color:color-mix(in srgb,var(--teal) 50%,var(--line))}
.ws-ed figure{margin:18px 0}.ws-ed img{max-width:100%;border-radius:12px}
.ws-ed a{cursor:text}
.ws-lp{position:absolute;z-index:5;top:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow-lg,0 10px 30px rgba(0,0,0,.15))}
.ws-lp input{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;min-width:260px;font:inherit;font-size:.86rem}
.ws-side{display:grid;gap:14px;align-content:start;position:sticky;top:0}
.ws-side section{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px}
.ws-side h5{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ws-side input[type=date],.ws-side #edCat{height:38px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;background:var(--surface);color:var(--ink);width:100%}
.ws-st{width:100%}.ws-st button{flex:1}
.ws-slug{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ws-slug span{padding:0 4px 0 10px;color:var(--muted);font-size:.84rem}
.ws-slug input{border:0;height:38px;flex:1;min-width:0;font:inherit;font-size:.86rem;outline:none;background:none;color:var(--ink)}
.ws-del{color:var(--crit);justify-content:center}
.ws-pick{position:fixed;z-index:210;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 28px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg,0 10px 30px rgba(0,0,0,.18));padding:14px;display:grid;gap:12px}
.ws-pick-h{display:flex;align-items:center;gap:10px}.ws-pick-h b{flex:1}
.ws-pick-h .x{border:0;background:none;cursor:pointer;color:var(--muted)}
.ws-pick-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:260px;overflow:auto}
.ws-pick-g button{border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--surface-2)}
.ws-pick-g button.on,.ws-pick-g button:hover{border-color:var(--teal)}
.ws-pick-g img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:980px){.ws-ob{grid-template-columns:1fr}.ws-side{position:static}.ws-oh{flex-wrap:wrap}}

/* Voorbeeldbalk bij concept-artikelen */
.cms-vb{position:sticky;top:0;z-index:30;background:#F2A93B;color:#10243A;text-align:center;font-weight:700;font-size:.86rem;padding:8px 16px}

/* Bewerkmodus op de website */
body.cms-edit [data-cms]{outline:1.5px dashed color-mix(in srgb,#18B6A4 55%,transparent);outline-offset:4px;border-radius:3px;cursor:text;transition:outline-color .15s,background .15s}
body.cms-edit [data-cms]:hover{outline-color:#18B6A4;background:rgba(24,182,164,.07)}
body.cms-edit [data-cms][data-cms-aangepast]{outline-style:solid;outline-color:rgba(242,169,59,.75)}
body.cms-edit [data-cms].cms-vuil{outline:2px solid #F2A93B;background:rgba(242,169,59,.10)}
body.cms-edit [data-cms].cms-on{outline:2px solid #18B6A4;background:rgba(24,182,164,.08);cursor:text}
body.cms-edit #main a,body.cms-edit #main button{cursor:default}
body.cms-edit{padding-bottom:84px}
.cms-bar{position:fixed;z-index:9000;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#10243A;color:#F2F7FB;border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 14px 40px rgba(16,36,58,.35);font-family:var(--f-body,system-ui);font-size:.86rem;max-width:calc(100vw - 24px);flex-wrap:wrap}
.cms-dot{width:9px;height:9px;border-radius:50%;background:#18B6A4;box-shadow:0 0 0 4px rgba(24,182,164,.25)}
.cms-bt{display:grid;line-height:1.25;margin-right:8px}.cms-bt span{color:#9FB3C8;font-size:.78rem}
.cms-b{border:1px solid rgba(255,255,255,.18);background:none;color:#F2F7FB;border-radius:10px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.cms-b:hover{background:rgba(255,255,255,.08)}
.cms-p{background:#18B6A4;border-color:#18B6A4;color:#06231F}
.cms-p:hover{background:#25cbb8}.cms-p:disabled{opacity:.45;cursor:not-allowed;background:#18B6A4}
.cms-pop{position:absolute;z-index:9001;display:none;gap:2px;align-items:center;background:#10243A;border-radius:10px;padding:4px;box-shadow:0 8px 24px rgba(16,36,58,.3)}
.cms-pop.open{display:flex}
.cms-pop button{border:0;background:none;color:#F2F7FB;font:inherit;font-size:.84rem;padding:6px 10px;border-radius:7px;cursor:pointer}
.cms-pop button:hover{background:rgba(255,255,255,.12)}
.cms-pop span{width:1px;height:18px;background:rgba(255,255,255,.2);margin:0 2px}
.cms-hint{position:fixed;z-index:9000;left:50%;bottom:84px;transform:translateX(-50%);background:#18B6A4;color:#06231F;font-weight:700;font-size:.86rem;padding:8px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(24,182,164,.35);transition:opacity .4s,transform .4s}
.cms-hint.weg{opacity:0;transform:translate(-50%,10px);pointer-events:none}
.ws-tb select{width:auto;flex:none;height:auto}
.ws-acts input{width:220px;flex:none}
.ws-body p{line-height:1.5;max-height:3em}
.ws-bar{margin-top:22px}
.ws-pick-g{grid-auto-rows:92px}
.ws-pick-g button{aspect-ratio:auto;height:100%}
.ws-pick::before{content:"";position:fixed;inset:-100vmax;background:rgba(16,36,58,.35);z-index:-1}