@charset "utf-8";
/* Studio.Shifft — beheer (CMS). Zichtbaar alleen voor wie mag bewerken. */
.waarde.breukflits{animation:glitchT .3s steps(1);text-shadow:-.04em 0 var(--koel),.04em 0 var(--warm)}

.cms-balk{position:fixed;left:max(12px, env(safe-area-inset-left,0px));bottom:max(12px, env(safe-area-inset-bottom,0px));z-index:960;display:flex;flex-wrap:wrap;align-items:center;gap:2px;max-width:calc(100vw - 24px);background:var(--papier);color:var(--inkt);box-shadow:0 10px 40px rgba(0,0,0,.45);font:400 12px/16px var(--f-blok);letter-spacing:.04em}
.cms-balk button{min-height:40px;padding:0 12px;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.cms-balk button:hover{background:var(--inkt);color:var(--papier)}
.cms-balk .schakel{display:inline-flex;align-items:center;gap:8px}
.cms-balk .bol{width:26px;height:14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px currentColor;position:relative}
.cms-balk .bol::after{content:'';position:absolute;left:3px;top:3px;width:8px;height:8px;border-radius:50%;background:currentColor;transition:transform .2s}
.cms-balk [aria-pressed=true] .bol{background:var(--inkt)}
.cms-balk [aria-pressed=true] .bol::after{transform:translateX(12px);background:var(--papier)}
.cms-balk [aria-pressed=true]:hover .bol{background:var(--papier)}
.cms-balk [aria-pressed=true]:hover .bol::after{background:var(--inkt)}
.cms-balk .status{padding:0 12px;color:var(--grafiet);text-transform:none;white-space:nowrap}
.cms-balk .status.fout{color:#B3261E}
.cms-balk .scheid{width:1px;align-self:stretch;background:rgba(18,18,17,.15);margin:6px 2px}

body.bewerk .cursor{display:none}
body.bewerk.eigen-cursor, body.bewerk.eigen-cursor a, body.bewerk.eigen-cursor button, body.bewerk.eigen-cursor .kaart{cursor:auto}
body.bewerk [data-veld]{outline:1px dashed transparent;outline-offset:3px;cursor:text;min-width:1ch;border-radius:1px}
body.bewerk [data-veld]:hover{outline-color:rgba(0,233,198,.7)}
body.bewerk [data-veld]:focus{outline:1.5px solid var(--koel);background:rgba(0,233,198,.06)}
body.bewerk [data-veld]:empty::before{content:attr(data-leeg);opacity:.45}
body.bewerk .papier [data-veld]:hover{outline-color:rgba(18,18,17,.5)}
body.bewerk .papier [data-veld]:focus{outline-color:var(--inkt);background:rgba(18,18,17,.04)}
body.bewerk .sitekop{position:absolute}
body.bewerk .zijlabel{display:none}

/* sectie-gereedschap */
body.bewerk .sectie{position:relative}
.cms-sectiegreep{position:sticky;top:12px;z-index:60;height:0;display:flex;justify-content:flex-end;align-items:flex-start;padding-right:max(12px, env(safe-area-inset-right,0px));margin-top:calc(-1 * var(--sectie) + 12px);margin-bottom:calc(var(--sectie) - 12px)}
.s-logo>.cms-sectiegreep{align-self:stretch;margin-top:calc(-96px + 12px);margin-bottom:calc(96px - 12px)}
.cms-sectiebalk{position:relative;display:flex;align-items:center;gap:2px;background:var(--papier);color:var(--inkt);font:400 11px/14px var(--f-blok);letter-spacing:.04em;text-transform:uppercase;box-shadow:0 6px 24px rgba(0,0,0,.35);opacity:.0;transition:opacity .15s}
body.bewerk .sectie:hover>.cms-sectiegreep>.cms-sectiebalk,.cms-sectiebalk:focus-within{opacity:1}
.cms-sectiebalk .naam{padding:0 10px;color:var(--grafiet)}
.cms-sectiebalk button{min-width:34px;min-height:34px;padding:0 9px;border:0;background:transparent;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.cms-sectiebalk button:hover{background:var(--inkt);color:var(--papier)}
.cms-sectiebalk button.gevaar:hover{background:#B3261E;color:#fff}
.cms-erbij{position:relative;z-index:55;display:flex;justify-content:center;height:0}
.cms-erbij button{transform:translateY(-50%);min-height:34px;padding:0 14px;border:0;background:var(--koel);color:var(--inkt);font:400 11px/14px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .15s;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.cms-erbij:hover button,.cms-erbij button:focus{opacity:1}
.cms-erbij.altijd button{opacity:1}

/* lijsten en beelden */
.cms-weg{position:absolute;right:-6px;top:-6px;z-index:20;width:26px;height:26px;border:0;border-radius:50%;background:var(--warm);color:#fff;font:500 15px/1 var(--f-kop);cursor:pointer;display:flex;align-items:center;justify-content:center}
body.bewerk [data-item]{position:relative}
.cms-voegtoe{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:16px;padding:0 14px;border:0;background:transparent;box-shadow:inset 0 0 0 1px currentColor;font:400 12px/16px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;color:inherit;cursor:pointer;opacity:.75}
.cms-voegtoe:hover{opacity:1}
.cms-beeldknoppen{position:absolute;left:10px;top:10px;z-index:20;display:flex;flex-wrap:wrap;gap:2px}
.cms-beeldknoppen button,.cms-beeldknoppen label{min-height:32px;padding:0 10px;border:0;background:var(--papier);color:var(--inkt);font:400 11px/32px var(--f-blok);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.cms-beeldknoppen button:hover,.cms-beeldknoppen label:hover{background:var(--inkt);color:var(--papier)}
.cms-beeldknoppen .gevaar:hover{background:#B3261E;color:#fff}
.cms-beeldknoppen input{position:absolute;width:1px;height:1px;opacity:0}
.cms-stilltoe{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border:1.5px dashed var(--lijn);color:var(--as);font:400 12px/16px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;position:relative}
.cms-stilltoe:hover{color:var(--papier);border-color:var(--papier)}
.cms-stilltoe input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* panelen */
.cms-paneel{position:fixed;top:0;right:0;bottom:0;z-index:970;width:min(560px,100vw);background:var(--papier);color:var(--inkt);box-shadow:-20px 0 60px rgba(0,0,0,.5);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cms-paneel.open{transform:none}
.cms-paneel header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(18px, env(safe-area-inset-top,0px)) max(22px, env(safe-area-inset-right,0px)) 16px 22px;border-bottom:1.5px solid var(--inkt)}
.cms-paneel header h2{margin:0;font-weight:500;font-size:26px;letter-spacing:-.02em}
.cms-paneel header button{width:40px;height:40px;border:0;background:transparent;cursor:pointer;color:inherit}
.cms-paneel header button:hover{background:var(--inkt);color:var(--papier)}
.cms-paneel .romp{flex:1;overflow:auto;padding:20px max(22px, env(safe-area-inset-right,0px)) 40px 22px;display:flex;flex-direction:column;gap:22px}
.cms-paneel .voetbalk{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px max(18px, env(safe-area-inset-bottom,0px));border-top:1.5px solid var(--inkt)}
.cms-veld{display:flex;flex-direction:column;gap:6px}
.cms-veld>span{font:400 11px/14px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
.cms-veld input[type=text],.cms-veld input[type=password],.cms-veld input[type=url],.cms-veld input[type=email],.cms-veld input[type=tel],.cms-veld textarea,.cms-veld select{width:100%;min-height:44px;padding:10px 12px;border:0;box-shadow:inset 0 0 0 1px rgba(18,18,17,.35);background:#F5F4F1;color:var(--inkt);font:400 16px/1.4 var(--f-kop);border-radius:0}
.cms-veld textarea{min-height:110px;resize:vertical;font:400 14px/1.5 var(--f-blok)}
.cms-veld input:focus,.cms-veld textarea:focus,.cms-veld select:focus{outline:2px solid var(--inkt);outline-offset:0}
.cms-veld small{font:400 12px/1.4 var(--f-blok);color:var(--grafiet)}
.cms-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px}
.cms-vink{display:flex;align-items:center;gap:10px;min-height:40px;font:400 14px/1.3 var(--f-kop);cursor:pointer}
.cms-vink input{width:20px;height:20px;accent-color:var(--inkt)}
.cms-knop{min-height:44px;padding:0 16px;border:0;background:var(--inkt);color:var(--papier);font:400 12px/16px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:8px;position:relative}
.cms-knop:hover{background:#000}
.cms-knop.licht{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
.cms-knop.licht:hover{background:var(--inkt);color:var(--papier)}
.cms-knop.gevaar{background:transparent;color:#B3261E;box-shadow:inset 0 0 0 1px #B3261E}
.cms-knop.gevaar:hover{background:#B3261E;color:#fff}
.cms-knop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.cms-kop{margin:0;padding-top:14px;border-top:1.5px solid var(--inkt);font:400 11px/14px var(--f-blok);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
.cms-uitleg{margin:0;font:400 13px/1.55 var(--f-blok);color:var(--grafiet)}
.cms-melding{padding:12px 14px;background:var(--papier2);font:400 13px/1.5 var(--f-blok)}

.cms-projectlijst{display:flex;flex-direction:column}
.cms-project{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(18,18,17,.18)}
.cms-project img{width:96px;aspect-ratio:16/9;object-fit:cover;background:var(--papier2)}
.cms-project .wie{display:flex;flex-direction:column;min-width:0}
.cms-project .wie b{font-weight:500;font-size:16px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cms-project .wie span{font:400 11px/16px var(--f-blok);letter-spacing:.04em;text-transform:uppercase;color:var(--grafiet)}
.cms-project .doe{display:flex;gap:2px}
.cms-project .doe button{min-width:34px;min-height:34px;border:0;background:transparent;font:400 12px/1 var(--f-blok);cursor:pointer;color:inherit;padding:0 8px}
.cms-project .doe button:hover{background:var(--inkt);color:var(--papier)}
.cms-project.verborgen{opacity:.5}

.cms-stillsraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cms-still{position:relative;aspect-ratio:16/9;background:var(--papier2)}
.cms-still img{width:100%;height:100%;object-fit:cover}
.cms-still .knoppen{position:absolute;left:4px;bottom:4px;display:flex;gap:2px}
.cms-still .knoppen button{min-width:30px;min-height:30px;border:0;background:var(--papier);color:var(--inkt);font:400 12px/1 var(--f-blok);cursor:pointer}
.cms-still .knoppen button:hover{background:var(--inkt);color:var(--papier)}
.cms-thumb{position:relative;aspect-ratio:16/9;background:var(--papier2);overflow:hidden}
.cms-thumb img,.cms-thumb video{width:100%;height:100%;object-fit:cover}

.cms-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:8px}
.cms-type{display:flex;flex-direction:column;gap:6px;min-height:110px;padding:14px;border:0;background:#F5F4F1;box-shadow:inset 0 0 0 1px rgba(18,18,17,.2);text-align:left;cursor:pointer;color:var(--inkt)}
.cms-type:hover{background:var(--inkt);color:var(--papier)}
.cms-type b{font-weight:500;font-size:18px;letter-spacing:-.01em}
.cms-type span{font:400 12px/1.45 var(--f-blok);opacity:.75}

.cms-toast{position:fixed;left:50%;bottom:max(70px, calc(env(safe-area-inset-bottom,0px) + 70px));z-index:990;transform:translate(-50%,20px);opacity:0;padding:12px 16px;background:var(--inkt);color:var(--papier);box-shadow:inset 0 0 0 1px var(--lijn);font:400 13px/1.4 var(--f-blok);max-width:min(560px, calc(100vw - 32px));transition:opacity .2s,transform .2s;pointer-events:none}
.cms-toast.zichtbaar{opacity:1;transform:translate(-50%,0)}

.cms-login{position:fixed;inset:0;z-index:995;display:flex;align-items:center;justify-content:center;background:rgba(15,15,14,.82);padding:16px}
.cms-login form{width:min(420px,100%);background:var(--papier);color:var(--inkt);padding:28px;display:flex;flex-direction:column;gap:16px}
.cms-login h2{margin:0;font-weight:500;font-size:28px;letter-spacing:-.02em}
.cms-zeker{display:inline-flex;gap:2px;align-items:center}