@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/fraunces.woff) format('woff')}@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;src:url(fonts/fraunces-italic.woff) format('woff')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/hanken-grotesk.woff) format('woff')}

/* Layout: vaste zijbalk + werkvlak; agenda vult het scherm, overige schermen scrollen. Tokens uit het design system Just Bren Studio (concept). */
:root{
  --canvas:#f7f2ec;--surface:#fffcf8;--sunk:#efe7dd;--line:#e3d7ca;--line-strong:#8f7c6e;
  --ink:#2a1f1a;--muted:#6b5a4f;--brand:#c08a55;--brand-strong:#8a5a30;--on-brand:#fffcf8;
  --rose:#94523f;--rose-soft:#f3e2da;
  --c-dames:#f3dcd3;--c-dames-ink:#8b4636;--c-heren:#dce4d3;--c-heren-ink:#4b6646;
  --c-kinderen:#f2e5bd;--c-kinderen-ink:#76601a;--c-kleur:#ebd3ba;--c-kleur-ink:#774a24;
  --success:#3f6b3f;--success-soft:#e1ebdd;--warning:#80580c;--warning-soft:#f5e8cc;--danger:#a23b2e;--danger-soft:#f6deda;
  --focus:#8a5a30;--scrim:rgba(42,31,26,.38);
  --shadow:0 1px 2px rgba(42,31,26,.06),0 8px 24px rgba(42,31,26,.08);--shadow-drag:0 12px 32px rgba(42,31,26,.2);
  --f-display:"Fraunces","Iowan Old Style",Georgia,serif;--f-sans:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --r-sm:6px;--r-md:12px;--r-lg:24px;--r-pill:999px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#16110e;--surface:#1f1814;--sunk:#120e0b;--line:#3a2e27;--line-strong:#7a6658;
  --ink:#f4ece4;--muted:#bdaea2;--brand:#d6a06c;--brand-strong:#e2b07f;--on-brand:#2a1a0e;
  --rose:#d9a190;--rose-soft:#3a2621;
  --c-dames:#4a2f29;--c-dames-ink:#e4a894;--c-heren:#2f3a2b;--c-heren-ink:#a9be9a;--c-kinderen:#403620;--c-kinderen-ink:#d8be73;--c-kleur:#4a3523;--c-kleur-ink:#e0a970;
  --success:#8fb487;--success-soft:#22301f;--warning:#e0b25a;--warning-soft:#382a12;--danger:#e78a7c;--danger-soft:#3a1f1b;
  --focus:#e2b07f;--scrim:rgba(0,0,0,.55);--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--shadow-drag:0 12px 32px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --canvas:#16110e;--surface:#1f1814;--sunk:#120e0b;--line:#3a2e27;--line-strong:#7a6658;
  --ink:#f4ece4;--muted:#bdaea2;--brand:#d6a06c;--brand-strong:#e2b07f;--on-brand:#2a1a0e;
  --rose:#d9a190;--rose-soft:#3a2621;
  --c-dames:#4a2f29;--c-dames-ink:#e4a894;--c-heren:#2f3a2b;--c-heren-ink:#a9be9a;--c-kinderen:#403620;--c-kinderen-ink:#d8be73;--c-kleur:#4a3523;--c-kleur-ink:#e0a970;
  --success:#8fb487;--success-soft:#22301f;--warning:#e0b25a;--warning-soft:#382a12;--danger:#e78a7c;--danger-soft:#3a1f1b;
  --focus:#e2b07f;--scrim:rgba(0,0,0,.55);--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--shadow-drag:0 12px 32px rgba(0,0,0,.6);color-scheme:dark}

html,body{height:100%}
@supports (height:100dvh){html,body{height:100dvh}}
body{background:var(--canvas);color:var(--ink);font:400 15px/22px var(--f-sans);-webkit-font-smoothing:antialiased;overflow:hidden}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tab-num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.serif{font-family:var(--f-display)}
.over{font:700 11px/16px var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Shell */
body{display:flex;flex-direction:column}
.app{display:grid;grid-template-columns:228px minmax(0,1fr);flex:1;min-height:0}
body.site-mode .app,body.site-mode .bottom-nav{display:none!important}
.side{background:var(--sunk);display:flex;flex-direction:column;padding:20px 12px max(16px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));gap:2px;overflow-y:auto}
.logo{font:italic 400 25px/1 var(--f-display);padding:4px 12px 4px;letter-spacing:-.01em}
.logo span{color:var(--brand)}
.logo-sub{font-size:12px;color:var(--muted);padding:0 12px 18px}
.nav-h{padding:16px 12px 6px}
.nav{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:var(--r-sm);padding:8px 12px;font-weight:500;color:var(--muted);cursor:pointer;min-height:38px}
.nav svg{width:18px;height:18px;flex:none}
.nav:hover{background:var(--surface);color:var(--ink)}
.nav[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
.nav[aria-disabled="true"]{opacity:.55;cursor:default}
.nav[aria-disabled="true"]:hover{background:none;color:var(--muted)}
.nav .soon{margin-left:auto;font-size:11px;font-weight:600}
.side-foot{margin-top:auto;padding:12px;font-size:12px;line-height:17px;color:var(--muted)}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:12px;padding:14px max(16px,env(safe-area-inset-right,0px)) 12px 28px;border-bottom:1px solid var(--line);background:var(--canvas);flex-wrap:wrap}
.top h1{font:600 20px/28px var(--f-sans);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-chip{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line-strong);background:var(--surface);border-radius:var(--r-pill);padding:4px 12px;font:600 12px/18px var(--f-sans);cursor:pointer;color:var(--ink)}
.demo-chip i{width:7px;height:7px;border-radius:50%;background:var(--warning)}
.view{flex:1;min-height:0;overflow:auto;padding:20px max(16px,env(safe-area-inset-right,0px)) 28px 28px}
.view.flush{padding:0;overflow:hidden;display:flex;flex-direction:column}
.bottom-nav{display:none}

/* Buttons & controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:var(--r-pill);border:1px solid transparent;font:600 14px/20px var(--f-sans);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn svg{width:16px;height:16px}
.btn-p{background:var(--brand-strong);color:var(--on-brand)}
.btn-p:hover{filter:brightness(1.07)}
.btn-s{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-s:hover{background:var(--sunk)}
.btn-g{background:transparent;color:var(--brand-strong);padding:0 10px}
.btn-g:hover{background:var(--sunk)}
.btn-d{background:var(--surface);border-color:var(--danger);color:var(--danger)}
.btn-dd{background:var(--danger);color:var(--surface)}
.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.icon-btn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink);padding:0}
.icon-btn:hover{background:var(--sunk)}
.icon-btn svg{width:16px;height:16px}
.icon-btn[disabled]{opacity:.35;cursor:default}
.seg{display:inline-flex;background:var(--sunk);border-radius:var(--r-pill);padding:3px}
.seg button{border:0;background:none;border-radius:var(--r-pill);padding:6px 14px;font:600 13px/18px var(--f-sans);color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{font:600 13px/18px var(--f-sans)}
.inp{width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:9px 12px;min-height:42px}
textarea.inp{min-height:96px;resize:vertical;line-height:21px}
.inp:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.hint{font-size:12px;line-height:16px;color:var(--muted)}
.chk{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.chk input{width:18px;height:18px;accent-color:var(--brand-strong)}
.chk input.switch{width:40px;height:24px}
.switch{position:relative;width:40px;height:24px;flex:none;appearance:none;-webkit-appearance:none;background:var(--line);border-radius:var(--r-pill);cursor:pointer;transition:background .15s;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch:checked{background:var(--brand-strong)}
.switch:checked::after{transform:translateX(16px)}
.badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/16px var(--f-sans);padding:3px 8px;border-radius:var(--r-sm);background:var(--sunk);color:var(--muted);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-ok{background:var(--success-soft);color:var(--success)}
.b-warn{background:var(--warning-soft);color:var(--warning)}
.b-bad{background:var(--danger-soft);color:var(--danger)}
.b-web{background:var(--rose-soft);color:var(--rose)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.dot-dames{background:var(--c-dames-ink)}.dot-heren{background:var(--c-heren-ink)}.dot-kinderen{background:var(--c-kinderen-ink)}.dot-kleur{background:var(--c-kleur-ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.card-h{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h h2,.card-h h3{margin:0;font:600 16px/22px var(--f-sans);flex:1;min-width:0}
.card-b{padding:16px}
.note-bar{display:flex;gap:10px;align-items:flex-start;background:var(--sunk);border-radius:var(--r-md);padding:10px 14px;font-size:13px;line-height:19px;color:var(--muted)}
.note-bar svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand-strong)}
.warn-box{background:var(--warning-soft);color:var(--ink);border-radius:var(--r-md);padding:10px 14px;font-size:14px;line-height:20px}
.warn-box b{color:var(--warning)}
.err-box{background:var(--danger-soft);border-radius:var(--r-md);padding:10px 14px;font-size:14px;line-height:20px}
.empty{padding:32px 16px;text-align:center;color:var(--muted)}
.empty .serif{font-size:20px;color:var(--ink);margin-bottom:4px}

/* Agenda */
.ag-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px 28px;border-bottom:1px solid var(--line)}
.ag-title{font:600 17px/24px var(--f-sans);min-width:0}
.ag-title small{display:block;font:500 12px/16px var(--f-sans);color:var(--muted)}
.ag-spacer{flex:1}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:8px max(16px,env(safe-area-inset-right,0px)) 8px 28px;align-items:center;border-bottom:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend-hatch{display:inline-block;width:14px;height:10px;border-radius:2px;background:var(--c-kleur);background-image:repeating-linear-gradient(135deg,transparent 0 3px,var(--surface) 3px 5px)}
.legend .hatch{width:14px;height:10px;border-radius:2px;background:var(--c-kleur);background-image:repeating-linear-gradient(135deg,transparent 0 3px,var(--surface) 3px 5px)}
.ag-scroll{flex:1;min-height:0;overflow:auto;position:relative;background:var(--surface)}
.grid{display:grid;min-width:100%}
.g-head{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding:8px 10px;min-height:54px;border-left:1px solid var(--line);cursor:pointer}
.g-head:hover{background:var(--sunk)}
.g-head b{font:600 14px/18px var(--f-sans)}
.g-head span{font-size:12px;line-height:16px;color:var(--muted)}
.g-head.today b{color:var(--brand-strong)}
.g-head.today b::after{content:"vandaag";margin-left:6px;font:700 10px/14px var(--f-sans);letter-spacing:.08em;text-transform:uppercase;background:var(--brand-strong);color:var(--on-brand);padding:1px 6px;border-radius:var(--r-pill);vertical-align:2px}
.g-corner{position:sticky;top:0;left:0;z-index:7;background:var(--surface);border-bottom:1px solid var(--line)}
.g-gut{position:sticky;left:0;z-index:4;background:var(--surface);font:500 11px/14px var(--f-sans);color:var(--muted);text-align:right}
.g-gut div{position:absolute;right:8px;transform:translateY(-7px)}
.col{position:relative;border-left:1px solid var(--line);cursor:crosshair}
.col-lines{position:absolute;inset:0;pointer-events:none}
.off{position:absolute;left:0;right:0;background:var(--sunk);pointer-events:none}
.off.pause{display:flex;align-items:center;justify-content:center}
.off-lbl{position:absolute;left:8px;top:6px;font:600 11px/14px var(--f-sans);color:var(--muted);letter-spacing:.04em}
.now{position:absolute;left:-1px;right:0;height:2px;background:var(--brand-strong);z-index:3;pointer-events:none}
.now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--brand-strong)}
.hover-slot{position:absolute;left:3px;right:3px;border:1px dashed var(--brand);border-radius:var(--r-sm);font:600 11px/14px var(--f-sans);color:var(--brand-strong);padding:2px 6px;pointer-events:none;z-index:1;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.ap{position:absolute;border-radius:var(--r-sm);overflow:hidden;cursor:grab;z-index:2;color:var(--ink);font-size:12px;line-height:15px;user-select:none;-webkit-user-select:none;border:1px solid var(--surface)}
.ap:hover{z-index:4;box-shadow:var(--shadow)}
.ap.cat-dames{background:var(--c-dames)}.ap.cat-heren{background:var(--c-heren)}.ap.cat-kinderen{background:var(--c-kinderen)}.ap.cat-kleur{background:var(--c-kleur)}
.ap-seg{position:absolute;left:0;right:0;pointer-events:none}
.ap-seg.wait{background-image:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface) 6px 8px);opacity:.85}
.ap-seg.buffer{background:var(--surface);opacity:.45}
.ap-seg.wait span{position:absolute;right:6px;bottom:3px;font:600 10px/12px var(--f-sans);color:var(--muted);background:var(--surface);padding:1px 4px;border-radius:3px}
.ap-txt{position:relative;padding:4px 7px;display:flex;flex-direction:column;gap:1px}
.ap-time{font:600 11px/14px var(--f-sans);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px}
.ap-time::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.cat-dames .ap-time{color:var(--c-dames-ink)}.cat-heren .ap-time{color:var(--c-heren-ink)}.cat-kinderen .ap-time{color:var(--c-kinderen-ink)}.cat-kleur .ap-time{color:var(--c-kleur-ink)}
.ap-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-svc{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-flags{display:inline-flex;gap:3px;margin-left:auto}
.ap-flag{font:700 9px/12px var(--f-sans);letter-spacing:.06em;text-transform:uppercase;padding:0 4px;border-radius:3px;background:var(--surface);color:var(--rose)}
.ap.st-geannuleerd{background:var(--surface)!important;border:1px dashed var(--line-strong);opacity:.8}
.ap.st-geannuleerd .ap-name{text-decoration:line-through}
.ap.st-noshow{border:1.5px solid var(--danger)}
.ap.st-voltooid{opacity:.82}
.ap-resize{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.ap-resize::after{content:"";position:absolute;left:50%;bottom:2px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:var(--ink);opacity:0;transition:opacity .15s}
.ap:hover .ap-resize::after{opacity:.35}
.ap.dragging{box-shadow:var(--shadow-drag);cursor:grabbing;z-index:20;opacity:.95}
.ap.compact .ap-txt{flex-direction:row;align-items:center;gap:6px;padding:2px 6px}
.ap.compact .ap-svc{display:none}
.ag-nav{display:flex;align-items:center;gap:6px;min-width:0}
.ag-sheet-sec{display:flex;flex-direction:column;gap:10px}
.wkstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:8px max(16px,env(safe-area-inset-right,0px)) 10px 28px;border-bottom:1px solid var(--line)}
.wkstrip button{border:0;background:none;border-radius:var(--r-md);padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--ink);transition:background .15s}
.wkstrip button span{font:700 10.5px/14px var(--f-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wkstrip button b{font:600 16px/22px var(--f-sans);font-variant-numeric:tabular-nums;width:32px;height:32px;display:grid;place-items:center;border-radius:50%}
.wkstrip button i{width:4px;height:4px;border-radius:50%;background:var(--brand);opacity:0}
.wkstrip button.has i{opacity:1}
.wkstrip button.closed b{color:var(--muted);font-weight:500}
.wkstrip button[aria-pressed="true"] b{background:var(--ink);color:var(--canvas)}
.wkstrip button.today:not([aria-pressed="true"]) b{color:var(--brand-strong)}
.fab{display:none}
.moment{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.moment div{flex:1;min-width:0}
.moment b{display:block;font-weight:600}
.moment span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
details.more{border-top:1px solid var(--line);padding-top:4px}
details.more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font:600 14px/20px var(--f-sans);color:var(--brand-strong);padding:10px 0}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s;margin-left:2px}
details.more[open] summary::after{transform:rotate(-135deg)}
.more-b{display:flex;flex-direction:column;gap:14px;padding:4px 0 8px}
.dr-actions{display:flex;gap:8px;flex-wrap:wrap}
.name-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px;text-decoration-thickness:1px}
.name-link:hover{text-decoration-color:var(--ink)}
.sheet-list{display:flex;flex-direction:column}
.sheet-list button{display:flex;align-items:center;gap:14px;background:none;border:0;border-bottom:1px solid var(--line);padding:16px 2px;font:500 16px/22px var(--f-sans);color:var(--ink);cursor:pointer;text-align:left}
.sheet-list button svg{width:20px;height:20px;color:var(--muted)}
.svc-row.click{cursor:pointer}
.svc-row.click:hover{background:var(--canvas)}
.lock-i{display:inline-flex;vertical-align:-2px;color:var(--danger)}
.lock-i svg{width:14px;height:14px}
.toast{animation:toastIn .22s ease both}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.slot{transition:background .15s,border-color .15s,color .15s}
.day-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);flex:1;min-height:0}
.day-wrap .ag-scroll{height:100%}
[hidden]{display:none!important}
.day-aside{border-left:1px solid var(--line);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--canvas)}
.imp{display:flex;flex-direction:column;gap:18px;max-width:980px}
.imp-note{display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.imp-note p{margin:0;font-size:14px;line-height:21px;max-width:72ch}
.imp-sec .card-h h2{display:flex;align-items:center;gap:10px}
.imp-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--canvas);font:600 12px/1 var(--f-sans)}
.imp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border:1.5px dashed color-mix(in srgb,var(--brand) 55%,var(--line));border-radius:var(--r-lg);padding:30px 16px;background:color-mix(in srgb,var(--brand) 5%,var(--surface));cursor:pointer;transition:background .15s,border-color .15s}
.imp-drop:hover,.imp-drop.over{background:color-mix(in srgb,var(--brand) 12%,var(--surface));border-color:var(--brand-strong)}
.imp-drop:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.imp-drop input{position:absolute;width:1px;height:1px;opacity:0}
.imp-drop b{font-size:15px}
.imp-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--brand-strong)}
.imp-ic svg{width:22px;height:22px}
.imp-ic.sm{width:38px;height:38px;flex:none}
.imp-try{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.imp-try .chips{display:flex;flex-wrap:wrap;gap:8px 14px}
.imp-tf{display:inline-flex;align-items:center;gap:8px}
.imp-tf a{font-size:12px}
.imp-file{display:flex;align-items:center;gap:12px}
.imp-file .grow{display:flex;flex-direction:column;min-width:0}
.imp-file b{overflow-wrap:anywhere}
.imp-busy{display:flex;align-items:center;gap:10px;color:var(--muted)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand-strong);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.info-box{background:color-mix(in srgb,var(--brand) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 25%,var(--line));border-radius:var(--r-md);padding:10px 14px;font-size:14px;line-height:21px}
.imp-type{display:grid;gap:10px;align-items:end}
.imp-type .field{max-width:260px}
.imp-sub{font-weight:600;font-size:15px}
.imp-map{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.imp-mr{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.imp-mr.unused .imp-col b{color:var(--muted);font-weight:500}
.imp-col{display:flex;flex-direction:column;min-width:0}
.imp-col .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-arrow{color:var(--muted)}.imp-arrow svg{width:16px;height:16px}
.imp-to{display:flex;align-items:center;gap:8px;min-width:0}
.imp-to select{min-width:0;flex:1}
.imp-tag{font:600 11px/16px var(--f-sans);color:var(--success);white-space:nowrap}
.imp-tag.own{color:var(--brand-strong)}
.imp-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.imp-stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;cursor:pointer;text-align:left;color:var(--ink);transition:border-color .15s,background .15s}
.imp-stat b{font:600 22px/26px var(--f-sans);font-variant-numeric:tabular-nums}
.imp-stat span{font-size:12px;color:var(--muted)}
.imp-stat[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.imp-stat.st-nieuw b{color:var(--success)}.imp-stat.st-fout b{color:var(--danger)}.imp-stat.st-let b{color:var(--warning)}
.imp-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.imp-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:20px}
.imp-rn{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;padding-top:1px}
.imp-row .grow{display:flex;flex-direction:column;min-width:0}
.imp-maps summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.imp-maps summary::-webkit-details-marker{display:none}
.imp-maps summary .lnk{font:600 13px/18px var(--f-sans);color:var(--brand-strong)}
.imp-maps[open] summary .lnk .c,.imp-maps:not([open]) summary .lnk .o{display:none}
.imp-row ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.imp-row li{position:relative;padding-left:14px;color:var(--muted);font-size:13px;line-height:18px}
.imp-row li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:var(--line)}
.imp-row li.l-fout{color:var(--danger)}.imp-row li.l-fout::before{background:var(--danger)}
.imp-row li.l-let{color:var(--ink)}.imp-row li.l-let::before{background:var(--warning)}
.imp-row li.l-info::before{background:var(--success)}
.badge.b-info{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand-strong)}
.imp-unk{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.imp-local{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.imp-local>div{flex:1 1 320px}
.est-card{border-style:dashed}
.kv.est dd{margin:0}
.imp-sum p{margin:0 0 6px}
.imp-sum ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.imp .btn svg{width:16px;height:16px}
@media (max-width:820px){
  .imp-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .imp-mr{grid-template-columns:minmax(0,1fr);gap:6px}
  .imp-arrow{display:none}
  .imp-row{grid-template-columns:minmax(0,1fr) auto}
  .imp-rn{grid-column:1/-1;padding:0}
}
.bday-bar{display:flex;align-items:center;gap:10px;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px 28px;background:color-mix(in srgb,var(--brand) 12%,var(--surface));border-bottom:1px solid var(--line);font-size:14px;line-height:20px}
.bday-bar .grow{flex:1;min-width:0}
.bday-ic{color:var(--brand-strong);display:grid}.bday-ic svg{width:20px;height:20px}
.ins{display:flex;flex-direction:column;gap:18px;max-width:1040px}
.ins-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ins-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;scroll-margin-top:12px}
.ins-sec h2{font:600 17px/24px var(--f-sans);margin:0 0 12px}
.ins-sec h2 .hint{font-weight:400;font-size:14px}
.ins-h3{font:600 14px/20px var(--f-sans);margin:18px 0 4px}
.ins-note{margin:12px 0 0}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:2px;background:var(--canvas)}
.kpi b{font:600 22px/28px var(--f-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi span{font-size:13px;color:var(--ink)}
.kpi small{font-size:12px;line-height:16px;color:var(--muted)}
.ins-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ins-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.ins-row .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.ins-row small,.bd-date small{font-size:12px;color:var(--muted)}
.ins-row .linkbtn{text-align:left;font-weight:600}
.ins-row.today .bd-date b{color:var(--brand-strong)}
.bd-date{width:96px;flex:none;display:flex;flex-direction:column}
.ins-tag{font:600 12px/16px var(--f-sans);color:var(--ink);background:var(--sunk);border-radius:999px;padding:3px 10px;white-space:nowrap}
.ins-row .btn svg{width:15px;height:15px}
.ins-chips{display:flex;gap:8px;flex-wrap:wrap}
.fw{display:flex;flex-direction:column;gap:8px}
.fw-row{display:grid;grid-template-columns:96px minmax(0,1fr) 170px;gap:12px;align-items:center}
.fw-l,.fw-v{display:flex;flex-direction:column;font-size:13px;line-height:18px}
.fw-l small,.fw-v small{color:var(--muted);font-size:12px}
.fw-v b{font-variant-numeric:tabular-nums;white-space:nowrap}
.fw-track{position:relative;height:14px;background:var(--sunk);border-radius:4px}
.fw-track i{position:absolute;left:0;top:0;bottom:0;background:var(--brand);border-radius:4px}
.fw-track em{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:1px;transform:translateX(-1px)}
.heat-wrap{overflow-x:auto}
.heat{border-collapse:separate;border-spacing:3px;font-size:13px;min-width:320px}
.heat th{font-weight:500;color:var(--muted);text-align:left;padding:4px 8px 4px 0;white-space:nowrap}
.heat thead th{text-align:center}
.heat td{width:110px;text-align:center;padding:9px 6px;border-radius:4px;font-variant-numeric:tabular-nums;color:var(--ink);background:color-mix(in srgb,var(--brand-strong) calc(var(--t) * 92%),var(--sunk))}
.heat td.dk{color:var(--on-brand)}
.tr{display:flex;flex-direction:column;gap:8px}
.tr-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 80px;gap:12px;align-items:center;font-size:13px}
.tr-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-track{height:10px;background:var(--sunk);border-radius:4px;position:relative}
.tr-track i{position:absolute;left:0;top:0;bottom:0;background:var(--brand);border-radius:4px}
.tr-v{display:flex;flex-direction:column;text-align:right}.tr-v small{color:var(--muted);font-size:12px}
@media (max-width:820px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ins-sec{padding:16px}
  .fw-row{grid-template-columns:70px minmax(0,1fr);row-gap:2px}
  .fw-v{grid-column:2;flex-direction:row;gap:8px;align-items:baseline}
  .tr-row{grid-template-columns:minmax(0,1fr) 70px}
  .tr-track{grid-column:1/-1;grid-row:2}
  .bday-bar{padding-left:max(16px,env(safe-area-inset-left,0px))}
  .bd-date{width:78px}
}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.stat b{display:block;font:600 20px/26px var(--f-sans);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
.mini-list{display:flex;flex-direction:column;gap:6px}
.mini{display:grid;grid-template-columns:48px 1fr;gap:8px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);cursor:pointer;text-align:left;width:100%}
.mini:hover{border-color:var(--brand)}
.mini .n,.mini .s{display:block}
.mini .t{font:600 13px/18px var(--f-sans);font-variant-numeric:tabular-nums}
.mini .n{font-weight:600;font-size:14px;line-height:18px}
.mini .s{font-size:12px;line-height:16px;color:var(--muted)}
.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(112px,auto);border-top:1px solid var(--line)}
.m-h{position:sticky;top:0;z-index:2;background:var(--surface);padding:8px 10px;font:600 12px/16px var(--f-sans);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
.m-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 6px 8px;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0;background:var(--surface)}
.m-cell:hover{background:var(--canvas)}
.m-cell.out{background:var(--sunk);opacity:.7}
.m-cell.closed{background:var(--sunk)}
.m-num{display:flex;align-items:center;justify-content:space-between;font:600 13px/20px var(--f-sans);font-variant-numeric:tabular-nums}
.m-num i{font-style:normal;font-weight:500;font-size:11px;color:var(--muted)}
.m-cell.today .m-num>span{background:var(--brand-strong);color:var(--on-brand);border-radius:var(--r-pill);padding:0 7px}
.m-ap{display:flex;align-items:center;gap:5px;font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;padding:1px 4px}
.m-ap .dot{width:7px;height:7px}
.m-ap.cx{text-decoration:line-through;color:var(--muted)}
.m-more{font-size:11px;color:var(--muted);padding-left:4px}
.m-tag{font-size:11px;color:var(--muted);font-weight:600}

/* Drawer & modal */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--canvas);z-index:41;transform:translateX(102%);transition:transform .22s ease;display:flex;flex-direction:column;box-shadow:var(--shadow-drag);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.drawer.on{transform:none}
.dr-h{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.dr-h h2{margin:0;font:420 24px/30px var(--f-display);flex:1;min-width:0}
.dr-b{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.dr-f{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface)}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.modal-box{pointer-events:auto;background:var(--canvas);border-radius:var(--r-lg);width:min(760px,100%);max-height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-drag);overflow:hidden}
.modal-box.sm{width:min(520px,100%)}
.md-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--surface)}
.md-h h2{margin:0;font:420 24px/30px var(--f-display);flex:1}
.md-b{overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:18px}
.md-f{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0}
.sec-t{font:600 13px/18px var(--f-sans);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.toast-wrap{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:calc(100% - 32px)}
.toast{background:var(--ink);color:var(--canvas);border-radius:var(--r-pill);padding:10px 10px 10px 18px;display:flex;align-items:center;gap:12px;font-size:14px;box-shadow:var(--shadow-drag)}
.toast button{background:none;border:0;color:var(--brand);font-weight:700;cursor:pointer;padding:4px 10px;border-radius:var(--r-pill)}
.toast.plain{padding-right:18px}

/* Appointment form */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-grid3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
.picked{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:500 15px/1 var(--f-display);background:var(--sunk);color:var(--ink);flex:none}
.res{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);max-height:220px;overflow-y:auto}
.res button{display:flex;width:100%;text-align:left;gap:10px;align-items:center;padding:8px 12px;border:0;background:none;cursor:pointer;border-bottom:1px solid var(--line)}
.res button:last-child{border-bottom:0}
.res button:hover,.res button:focus{background:var(--sunk)}
.cat-tabs{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:5px 12px;font:500 13px/18px var(--f-sans);cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--sunk);font-weight:600}
.svc-pick{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);max-height:240px;overflow-y:auto}
.svc-opt{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.svc-opt:last-child{border-bottom:0}
.svc-opt:hover{background:var(--canvas)}
.svc-opt input{width:18px;height:18px;accent-color:var(--brand-strong);margin:0}
.svc-opt small{display:block;color:var(--muted);font-size:12px;line-height:16px}
.svc-opt .pr{text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.sel-list{display:flex;flex-direction:column;gap:6px}
.sel-item{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:var(--r-sm);background:var(--sunk);font-size:14px}
.sel-item span:nth-child(2){flex:1;min-width:0}
.phbar{display:flex;height:12px;border-radius:4px;overflow:hidden;background:var(--sunk)}
.phbar i{display:block;height:100%}
.ph-prep{background:var(--line)}
.ph-work{background:var(--brand)}
.ph-wait{background:var(--brand);background-image:repeating-linear-gradient(135deg,transparent 0 3px,var(--surface) 3px 5px)}
.ph-finish{background:var(--brand-strong)}
.ph-buffer{background:var(--line-strong);opacity:.4}
.ph-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ph-legend span{display:inline-flex;gap:5px;align-items:center}
.ph-legend i{width:12px;height:8px;border-radius:2px;display:inline-block}
.slots{display:flex;flex-wrap:wrap;gap:6px}
.slot{min-width:64px;min-height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);font:600 13px/18px var(--f-sans);font-variant-numeric:tabular-nums;cursor:pointer;color:var(--ink)}
.slot:hover{border-color:var(--brand)}
.slot[aria-pressed="true"]{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--on-brand)}

/* Tables & lists */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search{position:relative;flex:1;min-width:200px;max-width:420px}
.search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted)}
.search .inp{padding-left:36px;border-radius:var(--r-pill)}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font:600 12px/16px var(--f-sans);color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:var(--canvas)}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.cname{display:flex;align-items:center;gap:10px;font-weight:600}
.cname small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.count{font-size:13px;color:var(--muted)}
.c-cards{display:none}

/* Client profile */
.prof{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.prof-card{padding:20px;display:flex;flex-direction:column;gap:14px}
.prof-name{font:420 30px/36px var(--f-display);margin:0}
.big-av{width:64px;height:64px;font-size:26px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;font:600 14px/20px var(--f-sans);color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.notes{display:flex;flex-direction:column;gap:10px}
.note{padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.note-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:4px}
.note.formula{background:var(--c-kleur);border-color:transparent}
.note.sens{background:var(--danger-soft);border-color:transparent}
.note-txt{white-space:pre-wrap;font-size:14px;line-height:21px}
.locked{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--r-md);font-size:14px;color:var(--muted)}
.next-card{padding:14px 16px;border-radius:var(--r-md);background:var(--sunk);display:flex;gap:14px;align-items:center}
.next-date{text-align:center;min-width:52px}
.next-date b{display:block;font:420 28px/30px var(--f-display)}
.next-date span{font:700 11px/14px var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Services */
.cat-sec{margin-bottom:20px}
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 100px 64px 76px 40px;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.svc-row:last-child{border-bottom:0}
.svc-row.head{font:600 12px/16px var(--f-sans);color:var(--muted);padding-block:8px}
.svc-row .nm{font-weight:600;font-size:14px;line-height:20px;min-width:0}
.svc-row .nm small{display:block;font-weight:400;color:var(--muted);font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-row .pr{text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.ord{display:flex;gap:2px}
.ord .icon-btn{width:30px;height:30px}
.color-pick{display:flex;gap:6px}
.color-pick button{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.color-pick button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}

/* Hours */
.hours-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
.day-row{display:grid;grid-template-columns:110px 44px 1fr;gap:12px;align-items:start;padding:12px 16px;border-bottom:1px solid var(--line)}
.day-row:last-child{border-bottom:0}
.day-row.today .dn{color:var(--brand-strong)}
.note-box{background:var(--sunk);border-radius:var(--r-md);padding:10px 14px;font-size:14px;line-height:20px}
.off[class*="blk-"]{background:repeating-linear-gradient(135deg,var(--sunk) 0 6px,color-mix(in srgb,var(--line) 70%,transparent) 6px 8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.day-row .dn{font-weight:600;padding-top:7px}
.day-row .switch{margin-top:8px}
.blocks{display:flex;flex-direction:column;gap:8px}
.blk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blk input[type=time]{width:136px;min-height:38px;padding:6px 10px}
.pause-lbl{font-size:12px;color:var(--muted);padding-left:4px}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.list-row:last-child{border-bottom:0}
.list-row .grow{flex:1;min-width:160px}

/* Messages */
.msg-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.tpl-list{display:flex;flex-direction:column}
.tpl-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;width:100%}
.tpl-item:last-child{border-bottom:0}
.tpl-item[aria-current="true"]{background:var(--sunk);box-shadow:inset 3px 0 0 var(--brand)}
.tpl-item small{display:block;color:var(--muted);font-size:12px}
.var-chips{display:flex;flex-wrap:wrap;gap:6px}
.var-chips button{font:600 12px/16px ui-monospace,Menlo,monospace;padding:4px 8px;border-radius:var(--r-sm);border:1px dashed var(--line-strong);background:var(--surface);cursor:pointer;color:var(--brand-strong)}
.mail-prev{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.mail-prev .mh{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;line-height:19px}
.mail-prev .mb{padding:20px 22px;font-size:15px;line-height:24px;white-space:pre-wrap}
.mail-prev .brandline{font:italic 400 20px/1 var(--f-display);padding:18px 22px 0}
.mail-prev .brandline span{color:var(--brand)}
.wa-prev{background:var(--sunk);border-radius:var(--r-md);padding:18px}
.wa-bubble{background:var(--c-heren);border-radius:12px 12px 4px 12px;padding:10px 14px;max-width:420px;margin-left:auto;white-space:pre-wrap;font-size:14px;line-height:21px}
.wa-bubble small{display:block;text-align:right;font-size:11px;color:var(--muted);margin-top:4px}
.nav .new{margin-left:auto;font:700 11px/16px var(--f-sans);background:var(--rose-soft);color:var(--rose);padding:1px 7px;border-radius:var(--r-pill)}
.ap.flash{animation:apflash 1.1s ease 4;z-index:6}
@keyframes apflash{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px var(--brand)}}

/* Openbare website — mobile-first */
.site{flex:1;min-height:0;overflow-y:auto;background:var(--canvas);display:flex;flex-direction:column;scroll-behavior:smooth}
.s-in{width:100%;max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.s-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--canvas) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.s-head.scrolled{border-bottom-color:var(--line)}
.s-head .s-in{display:flex;align-items:center;gap:16px;min-height:64px}
.s-logo{font:italic 400 28px/1 var(--f-display);letter-spacing:-.01em;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.s-logo span{color:var(--brand)}
.s-nav{display:none;gap:26px;margin-left:auto;align-items:center}
.s-nav button{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px 0;font:500 14px/20px var(--f-sans);transition:color .15s}
.s-nav button:hover{color:var(--ink)}
.s-head .head-book{display:none}
.s-ig{color:var(--ink);display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-left:auto}
.s-ig svg{width:20px;height:20px}
.s-sheet{position:fixed;inset:0;z-index:45;background:var(--canvas);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 12px) max(20px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));animation:enter .2s ease both}
.s-sheet nav{display:flex;flex-direction:column;margin-top:24px}
.s-sheet nav button{background:none;border:0;border-bottom:1px solid var(--line);text-align:left;padding:18px 0;font:400 28px/34px var(--f-display);color:var(--ink);cursor:pointer}
.btn{transition:transform .12s ease,background .15s,filter .15s,border-color .15s}
.btn:active:not([disabled]){transform:scale(.97)}
.btn-lg{min-height:52px;padding:0 26px;font-size:16px}
.photo{position:relative;overflow:hidden;display:flex;align-items:flex-end;background:var(--c-kleur);width:100%}
.photo.t2{background:var(--rose-soft)}.photo.t3{background:var(--sunk)}.photo.t4{background:var(--c-dames)}.photo.t5{background:var(--c-kinderen)}.photo.t6{background:var(--c-heren)}
.photo svg{position:absolute;inset:0;width:100%;height:100%}
.photo svg path{fill:none;stroke:var(--surface);stroke-width:1.6;opacity:.75}
.photo .cap{position:relative;margin:12px;font:600 11px/14px var(--f-sans);letter-spacing:.04em;background:var(--surface);color:var(--muted);padding:5px 10px;border-radius:var(--r-pill)}
.hero{display:grid;gap:24px;padding-block:8px 44px}
.hero-photo{aspect-ratio:4/5;border-radius:220px 220px var(--r-lg) var(--r-lg);max-height:58vh}
.hero .over{margin-top:4px}
.hero h1{font:360 44px/48px var(--f-display);letter-spacing:-.02em;margin:10px 0 14px;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--rose)}
.lead{font-size:17px;line-height:27px;color:var(--muted);margin:0 0 24px;max-width:40ch}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.next-free{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;line-height:20px;color:var(--muted)}
.next-free i{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}
.next-free b{color:var(--ink);font-weight:600}
.sec{padding-block:56px;border-top:1px solid var(--line);scroll-margin-top:64px}
.sec h2{font:380 34px/40px var(--f-display);letter-spacing:-.01em;margin:6px 0 12px;text-wrap:balance}
.sec .intro{color:var(--muted);font-size:16px;line-height:26px;max-width:56ch;margin:0 0 24px}
.about{display:grid;gap:28px}
.about-photo{aspect-ratio:4/5;border-radius:var(--r-lg)}
.about p{font-size:17px;line-height:28px;margin:0 0 14px;max-width:58ch}
.sign{font:italic 400 28px/1 var(--f-display);color:var(--brand-strong);margin-top:8px}
.tabs-s{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 4px;padding:2px 20px 8px}
.tabs-s::-webkit-scrollbar{display:none}
.tabs-s button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:8px 16px;font:600 14px/20px var(--f-sans);color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s;display:inline-flex;align-items:center;gap:8px}
.tabs-s button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.tabs-s .cnt{min-width:20px;height:20px;border-radius:10px;background:var(--brand-strong);color:var(--on-brand);font-size:11px;line-height:20px;text-align:center;padding:0 5px}
.price-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;width:100%;color:var(--ink);font:inherit}
.price-row b{font-weight:600;font-size:16px;line-height:22px}
.price-row small{grid-column:1;color:var(--muted);font-size:13px;line-height:18px}
.price-row .pr{grid-row:1/3;grid-column:2;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:10px}
.price-row .pr small{display:block;font-weight:500}
.price-row .pr svg{width:16px;height:16px;color:var(--muted);transition:transform .15s}
.price-row:hover .pr svg{transform:translateX(3px);color:var(--brand-strong)}
.portfolio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.portfolio .photo{aspect-ratio:4/5;border-radius:var(--r-md)}
.ig-band{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px}
.ig-band span{color:var(--muted);font-size:14px}
.contact{display:grid;gap:32px}
.hours{display:flex;flex-direction:column}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:21px}
.hours div span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours .today{font-weight:600}
.wk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px}
.wk-head h2{margin-bottom:2px}
.wk-range{margin:0;color:var(--muted);font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
.wk-nav{display:flex;gap:8px;flex:none;margin-bottom:2px}
.wk-nav .icon-btn{width:44px;height:44px}
.wk-nav .icon-btn[disabled]{opacity:.35;cursor:default}
.wk-pos{display:flex;gap:5px;margin:10px 0 4px}
.wk-pos i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s,width .2s}
.wk-pos i.on{background:var(--ink);width:16px;border-radius:3px}
.hours.wk-in{animation:wkIn .28s ease both}
.hours.wk-in.back{animation-name:wkInB}
@keyframes wkIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes wkInB{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hours.wk-in{animation:none}}
.hours .past{color:var(--muted)}
.hours .closed span:last-child{color:var(--muted)}
.hours .tag{display:inline-block;font:600 11px/16px var(--f-sans);letter-spacing:.02em;color:var(--brand-strong);background:color-mix(in srgb,var(--gold) 16%,transparent);border-radius:999px;padding:1px 8px;margin-right:8px;vertical-align:1px}
.hours-touch{touch-action:pan-y}
.hrs-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.hrs-foot .hint{margin:0;flex:1 1 220px}
.site-prev{--gold:#b0904f;background:var(--canvas);border-radius:var(--r-md);padding:4px 16px 14px}
.site-prev .hours div{font-size:14px;padding:9px 0}
.site-prev .wk-head h2{font:600 15px/22px var(--f-sans);margin:0}
.site-prev .wk-nav .icon-btn{width:36px;height:36px}
.addr{font-size:17px;line-height:27px;margin:0 0 14px}
.demo-tag{display:inline-block;font:600 11px/16px var(--f-sans);letter-spacing:.04em;color:var(--warning);background:var(--warning-soft);border-radius:var(--r-pill);padding:1px 8px;margin-left:6px;vertical-align:2px}
.s-foot{border-top:1px solid var(--line);padding-block:24px 28px;color:var(--muted);font-size:13px;line-height:19px}
.sbar-anchor{position:sticky;bottom:0;height:0;z-index:16;pointer-events:none;flex:none}
.sbar{position:absolute;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:480px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:6px 6px 6px 18px;border-radius:999px;background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line));box-shadow:0 1px 2px rgba(40,24,16,.06),0 10px 28px rgba(40,24,16,.14);pointer-events:auto;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s}
.sbar.hide{opacity:0;transform:translateY(calc(100% + 18px));pointer-events:none;visibility:hidden;transition:transform .3s ease,opacity .2s ease,visibility 0s .3s}
.sbar-t{flex:1;min-width:0;display:flex;flex-direction:column}
.sbar-t small{font:500 12px/16px var(--f-sans);color:var(--muted);display:flex;align-items:center;gap:6px}
.sbar-t small i{width:6px;height:6px;border-radius:50%;background:var(--success);flex:none}
.sbar-t b{font:600 14px/19px var(--f-sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar .btn{flex:none;min-height:46px;padding:0 20px;border-radius:999px;font-size:15px}
.site.has-sbar .s-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){.sbar,.sbar.hide{transition:opacity .15s linear,visibility 0s;transform:none}}
.sec-cta{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:24px}
.sec-cta .hint{margin:0;color:var(--muted);font-size:14px;line-height:20px}
.about-cta{margin-top:28px}
.price-row .pr-go{font:600 13px/18px var(--f-sans);color:var(--brand-strong);border:1px solid color-mix(in srgb,var(--brand-strong) 35%,transparent);border-radius:999px;padding:5px 12px;transition:background .15s,color .15s,border-color .15s}
.price-row:hover .pr-go,.price-row:focus-visible .pr-go{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--on-brand)}
.bk .inp{scroll-margin-bottom:120px;scroll-margin-top:90px}
.enter{animation:enter .24s ease both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Website op basis van salonbeelden: espresso knoppen, goud als detail, bloesemroze accent */
.site{--rose:#a3405c;--rose-soft:#f6e1e6;--gold:#b0904f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site{--rose:#e897ab;--rose-soft:#3b2229;--gold:#c9a862}}
:root[data-theme="dark"] .site{--rose:#e897ab;--rose-soft:#3b2229;--gold:#c9a862}
.site .btn-p{background:var(--ink);color:var(--canvas)}
.site .btn-p:hover{filter:none;background:color-mix(in srgb,var(--ink) 86%,var(--gold))}
.site .day[aria-pressed="true"],.site .slot[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.site .day[aria-pressed="true"] .dw,.site .day[aria-pressed="true"] .dm{color:var(--canvas)}
.site .bk-progress i{background:var(--gold)}
.site .svc-opt2 input:checked{background:var(--ink);border-color:var(--ink)}
.site .svc-opt2 input:checked::after{border-color:var(--canvas)}
.site .tabs-s .cnt{background:var(--gold);color:var(--ink)}
.site .over{color:var(--muted)}
.site .over::before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);vertical-align:4px;margin-right:10px}
.sign{color:var(--rose)}
.media-img{position:relative;overflow:hidden;background:var(--sunk)}
.media-img img,.media-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-media{aspect-ratio:4/5;border-radius:240px 240px var(--r-lg) var(--r-lg);max-height:60vh;width:100%;box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent)}
.hero-media img{animation:slowzoom 18s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.05)}}
.about-media{aspect-ratio:4/5;border-radius:var(--r-lg);max-height:78vh}
.portrait{margin:0;position:relative}
.portrait::after{content:"";position:absolute;inset:auto -10px -10px auto;width:46%;height:46%;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);border-radius:0 0 calc(var(--r-lg) + 6px) 0;pointer-events:none}
.about-txt h2 em{font-style:italic;color:var(--rose)}
.kijkje{margin-top:64px;display:flex;flex-direction:column;gap:20px}
.kj-head h2{margin-bottom:0}
.kj-head h2 em,.kj-inv h2 em{font-style:italic;color:var(--rose)}
.kijkje figure,.kj-end figure{margin:0;position:relative}
.kj-wide-img{aspect-ratio:3/2;border-radius:var(--r-lg)}
.kijkje figcaption{font-size:13px;line-height:18px;color:var(--muted);margin-top:8px}
.kj-row{display:grid;gap:24px}
.kj-story p{font-size:17px;line-height:28px;margin:0 0 14px;max-width:52ch}
.kj-story .kj-note{font-size:13px;line-height:18px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kj-grid{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;gap:12px}
.kj-grid .kj-d0{grid-row:1/3}
.kj-grid .kj-d0 .kj-img{aspect-ratio:auto;height:100%;min-height:260px}
.kj-img{aspect-ratio:4/3;border-radius:var(--r-md)}
.kj-grid .kj-d0{display:flex;flex-direction:column}
.kj-grid .kj-d0 .media-img{flex:1}
.kj-grid.n1,.kj-grid.n2{grid-template-columns:1fr 1fr;grid-template-rows:auto}.kj-grid.n1 .kj-d0,.kj-grid.n2 .kj-d0{grid-row:auto}
.kj-end{margin-top:64px;display:grid;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 22px}
.kj-me{width:min(220px,62vw);justify-self:center}
.kj-me-img,.kj-me-empty{aspect-ratio:1/1;border-radius:50%;box-shadow:0 0 0 6px var(--surface),0 0 0 7px color-mix(in srgb,var(--gold) 70%,transparent)}
.kj-me-img img{transform:scale(1.32);transform-origin:var(--pos,50% 40%)}
.kj-me-empty{display:grid;place-items:center;background:var(--sunk);color:var(--muted);font-size:13px;text-align:center;padding:20px}
.kj-inv h2{margin-top:6px}
.kj-inv p{font-size:17px;line-height:28px;margin:0 0 6px;max-width:48ch}
.kj-inv .sign{margin-bottom:20px}
.ai-tag{position:absolute;left:12px;bottom:12px;font:600 11px/14px var(--f-sans);background:var(--surface);color:var(--muted);padding:5px 10px;border-radius:var(--r-pill)}
.reels{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 12px;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel-wrap{flex:none;width:min(62vw,240px);position:relative;scroll-snap-align:start}
.reel{display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;border-radius:var(--r-md);overflow:hidden;position:relative;cursor:pointer;background:var(--sunk);color:#fff}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel video{opacity:0;transition:opacity .7s ease}
.reel video.on{opacity:1}
.reel .rc{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 12px;text-align:left;font:600 13px/18px var(--f-sans);color:#fff;background:linear-gradient(to top,rgba(20,14,10,.55),rgba(20,14,10,0))}
.reel-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(20,14,10,.42);display:grid;place-items:center;color:#fff;cursor:pointer;transition:background .2s}
.reel-x:hover{background:rgba(20,14,10,.62)}
.reel-x svg{width:15px;height:15px}
.reel-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.reel .rbar{position:absolute;left:12px;right:12px;bottom:10px;height:2px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;opacity:0;transition:opacity .4s ease}
.reel .rbar i{display:block;height:100%;width:0;background:#fff}
.reel-wrap.playing .rbar{opacity:1}
.reel .rc{transition:padding .4s ease}
.reel-wrap.playing .rc{padding-bottom:20px}
.reel .rstate{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:6px;font:600 11px/14px var(--f-sans);color:#fff;opacity:0;transition:opacity .4s ease;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.reel .rstate::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.reel-wrap.playing .rstate{opacity:.92}
.reel:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.reel .ai-tag{bottom:auto;top:10px}
.reel-wrap.playing .ai-tag{opacity:0}
.salon-wrap{display:grid;gap:20px}
.salon-wrap .reel-wrap{width:100%;max-width:300px}
.res-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.res-nav{display:none;gap:8px;margin-bottom:6px}
.res-nav .icon-btn{width:42px;height:42px}
@media (min-width:821px){.res-nav{display:flex}}
.reels{scroll-behavior:smooth}
.vw{position:fixed;inset:0;z-index:70;background:#0e0a08;display:flex;flex-direction:column;color:#fff;animation:enter .2s ease both;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.vw-top{display:flex;align-items:center;gap:12px;padding:12px 16px}
.vw-bars{flex:1;display:flex;gap:4px}
.vw-bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.vw-bars span i{display:block;height:100%;width:0;background:#fff}
.vw-bars span.done i{width:100%}
.vw-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.vw-x svg{width:18px;height:18px}
.vw-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
.vw-stage video{max-width:100%;max-height:100%;aspect-ratio:9/16;height:100%;object-fit:contain;border-radius:12px;background:#000}
.vw-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.vw-nav svg{width:20px;height:20px}
.vw-prev{left:16px}.vw-next{right:16px}
.vw-paused{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vw-paused span{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center}
.vw-paused svg{width:26px;height:26px}
.vw-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 16px;flex-wrap:wrap}
.vw-foot b{font:600 15px/20px var(--f-sans)}
.vw-foot small{display:block;font-size:12px;opacity:.7}
.vw .btn-p{background:#fff;color:#1a120e}
@media (max-width:820px){.vw-nav{display:none}}
@media (min-width:821px){
  .reels{gap:14px;margin:0;padding:0 0 4px}
  .reel-wrap{width:calc((100% - 3*14px)/4.25)}
  .salon-wrap{grid-template-columns:300px minmax(0,1fr);align-items:start}
}
/* Beeldbank */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mcard{display:flex;flex-direction:column;overflow:hidden}
.mthumb{position:relative;aspect-ratio:4/5;background:var(--sunk);overflow:hidden}
.mthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mthumb .mplay{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:rgba(20,14,10,.5);color:#fff;display:grid;place-items:center}
.mthumb .mplay svg{width:12px;height:12px}
.mkind{position:absolute;left:10px;top:10px;font:700 10.5px/14px var(--f-sans);letter-spacing:.06em;text-transform:uppercase;background:var(--surface);color:var(--ink);padding:3px 8px;border-radius:var(--r-pill)}
.mkind.ai{background:var(--warning-soft);color:var(--warning)}
.mbody{padding:14px;display:flex;flex-direction:column;gap:10px}
.mtitle{font-weight:600}
.mslots{display:flex;flex-wrap:wrap;gap:6px}
.chip-chk{position:relative;cursor:pointer}
.chip-chk input{position:absolute;opacity:0;pointer-events:none}
.chip-chk span{display:inline-block;border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;font:500 12px/16px var(--f-sans);color:var(--muted);background:var(--surface);transition:background .15s,color .15s,border-color .15s}
.chip-chk input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.chip-chk input:disabled+span{opacity:.4;cursor:not-allowed}
.chip-chk input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.mfoot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.slot-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:20px}
.slot-card{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.slot-card .t{width:44px;height:56px;border-radius:6px;overflow:hidden;background:var(--sunk);flex:none;position:relative}
.slot-card .t img{width:100%;height:100%;object-fit:cover}
.slot-card b{display:block;font-size:13px;line-height:18px}
.slot-card span{font-size:12px;color:var(--muted)}
.slot-card.empty .t{border:1px dashed var(--line-strong);background:none}
@media (prefers-reduced-motion:reduce){.hero-media img{animation:none}}
/* Afspraakmaker */
.bk{max-width:640px;margin:0 auto;padding-block:12px 32px}
.bk-top{display:flex;align-items:center;gap:12px}
.bk-step-lbl{font:600 13px/18px var(--f-sans);color:var(--muted)}
.bk-progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin:12px 0 26px}
.bk-progress i{display:block;height:100%;background:var(--brand-strong);border-radius:3px;transition:width .35s ease}
.bk h1{font:380 32px/38px var(--f-display);letter-spacing:-.01em;margin:0 0 6px;text-wrap:balance}
.bk h1 em{font-style:italic;color:var(--rose)}
.bk .sub{color:var(--muted);margin:0 0 20px;font-size:15px;line-height:23px}
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:8px}
.svc-opt2{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.svc-opt2 input{-webkit-appearance:none;appearance:none;width:22px;height:22px;border:1.5px solid var(--line-strong);border-radius:50%;margin:0;display:grid;place-items:center;transition:background .15s,border-color .15s;cursor:pointer}
.svc-opt2 input:checked{background:var(--brand-strong);border-color:var(--brand-strong)}
.svc-opt2 input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--on-brand);border-bottom:2px solid var(--on-brand);transform:translate(0,-1px) rotate(-45deg)}
.svc-opt2 b{display:block;font-weight:600;font-size:16px;line-height:22px}
.svc-opt2 small{display:block;color:var(--muted);font-size:13px;line-height:18px;margin-top:2px}
.svc-opt2 .desc{display:none;color:var(--muted);font-size:14px;line-height:20px;margin-top:4px}
.svc-opt2:has(input:checked) .desc{display:block;animation:enter .2s ease both}
.svc-opt2 .pr{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.svc-opt2 .pr small{font-weight:500;margin:0}
.days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -20px;padding:4px 20px 10px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:62px;scroll-snap-align:start;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:9px 2px 8px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink);transition:background .15s,border-color .15s,color .15s}
.day:hover{border-color:var(--brand)}
.day .dw{font:700 11px/14px var(--f-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.day .dn{font:420 24px/28px var(--f-display);font-variant-numeric:tabular-nums}
.day .dm{font:500 11px/14px var(--f-sans);color:var(--muted)}
.day[disabled]{cursor:default;background:transparent;border-style:dashed;opacity:.6}
.day[aria-pressed="true"]{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--on-brand)}
.day[aria-pressed="true"] .dw,.day[aria-pressed="true"] .dm{color:var(--on-brand)}
.t-group{margin-top:22px}
.t-group .lbl2{font:600 13px/18px var(--f-sans);color:var(--muted);margin-bottom:8px}
.slots2{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.site .slot{min-height:46px;font-size:15px;transition:background .15s,border-color .15s,color .15s,transform .12s}
.site .slot:active{transform:scale(.96)}
.fields{display:flex;flex-direction:column;gap:16px}
.linkbtn{background:none;border:0;padding:0;color:var(--brand-strong);font:600 14px/20px var(--f-sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.review{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px 16px;font-size:15px;line-height:22px;padding:20px;margin:0}
.review dt{color:var(--muted)}
.review dd{margin:0;min-width:0;word-break:break-word}
.terms{font-size:13px;line-height:19px;color:var(--muted);margin:16px 0 0}
details.demo{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);background:var(--surface);font-size:14px;line-height:21px}
details.demo summary{cursor:pointer;padding:12px 16px;font:700 11px/16px var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--warning);list-style:none;display:flex;align-items:center;gap:8px}
details.demo summary::-webkit-details-marker{display:none}
details.demo summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform .15s}
details.demo[open] summary::after{transform:rotate(-135deg)}
details.demo .db{padding:0 16px 14px}
details.demo ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.demo-cta{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.demo-cta .dn-h{font:700 11px/16px var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--warning)}
.ok-mark{width:56px;height:56px;border-radius:50%;background:var(--success-soft);color:var(--success);display:grid;place-items:center;animation:pop .4s ease both}
.ok-mark svg{width:28px;height:28px}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.bad-mark{background:var(--warning-soft);color:var(--warning)}
.field.err .inp{border-color:var(--danger)}
.field .ferr{font-size:13px;line-height:18px;color:var(--danger)}
.bk-bar{position:sticky;bottom:0;z-index:15;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px max(20px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.bk-bar .in{max-width:640px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bk-bar .t{font-size:13px;line-height:18px;color:var(--muted);min-width:0}
.bk-bar .t b{display:block;color:var(--ink);font-size:16px;line-height:22px}
.bk-bar .btn{min-width:140px}
@media (min-width:821px){
  .s-nav{display:flex}
  .s-head .head-book{display:inline-flex}
  .s-ig{margin-left:0}
  .s-menu{display:none}
  .hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;padding-block:40px 80px}
  .hero h1{font-size:66px;line-height:70px}
  .hero-photo{order:2;max-height:none}
  .sec{padding-block:88px}
  .sec h2{font-size:44px;line-height:50px}
  .about{grid-template-columns:.9fr 1.1fr;align-items:center;gap:72px}
  .about{align-items:start}
  .about-txt{padding-top:6px}
  .about-txt h2{margin-top:10px}
  .kj-wide-img{aspect-ratio:21/9}
  .kj-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;margin-top:12px}
  .kj-story{padding-top:4px}
  .kj-end{grid-template-columns:auto minmax(0,1fr);gap:48px;padding:40px 48px;max-width:920px;margin-left:auto;margin-right:auto}
  .kj-me{width:230px}
  .price-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px}
  .portfolio{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .contact{grid-template-columns:1fr 1fr;gap:64px}
  .sbar-anchor{display:none}
  .site.has-sbar .s-foot{padding-bottom:28px}
  .bk h1{font-size:40px;line-height:46px}
}
@media (max-width:820px){
  .review{grid-template-columns:minmax(0,1fr) auto}
  .review dt{grid-column:1/-1;margin-bottom:-10px;font-size:13px}
  .s-head .s-in{min-height:58px}
}

@media (max-width:1100px){
  .day-wrap{grid-template-columns:minmax(0,1fr)}
  .day-aside{display:none}
  .hours-grid,.msg-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .top{padding:12px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
  .view{padding:16px max(16px,env(safe-area-inset-right,0px)) 96px max(16px,env(safe-area-inset-left,0px))}
  .view.flush{padding-bottom:72px}
  .ag-bar,.legend{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .ag-bar{gap:8px;padding-top:10px;padding-bottom:10px}
  .ag-nav{flex:1}
  .ag-bar{flex-wrap:nowrap}
  .ag-title{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
  .ag-title small{overflow:hidden;text-overflow:ellipsis}
  .dayview .g-head,.dayview .g-corner{display:none}
  .hero-photo{max-height:46vh}
  .ag-seg,.ag-add,.ag-today-d,.ag-bar .ag-spacer{display:none}
  .wkstrip{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
  .fab{display:grid;place-items:center;position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;border:0;background:var(--brand-strong);color:var(--on-brand);box-shadow:var(--shadow);z-index:25;cursor:pointer;transition:transform .12s}
  .fab:active{transform:scale(.94)}
  .fab svg{width:24px;height:24px}
  .on-agenda .top{display:none}
  .bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:6px max(4px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
  .bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;font:600 11px/14px var(--f-sans);color:var(--muted);padding:6px 2px;cursor:pointer;border-radius:var(--r-sm)}
  .bottom-nav svg{width:20px;height:20px}
  .bottom-nav button[aria-current="page"]{color:var(--brand-strong)}
  .prof{grid-template-columns:minmax(0,1fr)}
  .f-grid,.f-grid3{grid-template-columns:minmax(0,1fr)}
  .tbl-desk{display:none}
  .c-cards{display:flex;flex-direction:column;gap:8px}
  .c-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;text-align:left;width:100%}
  .c-card .grow{flex:1;min-width:0}
  .svc-row{grid-template-columns:minmax(0,1fr) auto auto;}
  .svc-row .hide-m{display:none}
  .day-row{grid-template-columns:1fr auto}
  .day-row .blocks{grid-column:1/-1}
  .month{grid-auto-rows:minmax(76px,auto)}
  .m-ap span.nm{display:none}
  .modal{padding:0;place-items:end stretch}
  .modal-box{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:94%;width:100%}
  .md-f{padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
  .kv{grid-template-columns:96px 1fr}
}
@media (pointer:coarse){.ap{cursor:pointer}.ap-resize{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* ---------- Website: WhatsApp en Google-reviews ---------- */
.s-wa{color:var(--ink);display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:none;border:0;cursor:pointer}
.s-wa svg{width:22px;height:22px}
.s-wa{margin-left:auto}.s-wa+.s-ig{margin-left:0}
@media (min-width:820px){.s-wa{margin-left:0}}
.s-wa:hover,.s-wa:focus-visible{background:color-mix(in srgb,var(--gold) 16%,transparent)}
.btn-wa{background:var(--gold);color:#1d1510;border:1px solid color-mix(in srgb,var(--gold) 70%,#000)}
.btn-wa:hover{background:color-mix(in srgb,var(--gold) 88%,#fff)}
.btn-wa svg,.btn-s svg.wa,.wa-gen svg{width:20px;height:20px}
.btn-wa[disabled]{opacity:.55;cursor:not-allowed}
.wa-card{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;padding:28px 32px;border-radius:var(--r-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,var(--surface)),var(--surface) 60%);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line))}
.wa-card h3{font:500 26px/32px var(--f-display);margin:6px 0 8px}
.wa-card h3 em,.wa-p-head h2 em{color:var(--gold);font-style:italic}
.wa-card p{margin:0;color:var(--muted);max-width:60ch}
.wa-card.in-book{margin-top:28px;padding:20px 22px;grid-template-columns:1fr;gap:14px}
.wa-card.in-book h3{font-size:21px;line-height:27px}
.wa-scrim{position:fixed;inset:0;z-index:60;background:rgba(20,14,10,.55);animation:enter .2s ease both}
.wa-panel{position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:min(860px,calc(100dvh - 48px));display:flex;flex-direction:column;background:var(--canvas);color:var(--ink);border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(0,0,0,.35);overflow:hidden}
.wa-p-head{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 8px}
.wa-p-head>div{flex:1;min-width:0}
.wa-p-head h2{font:500 24px/30px var(--f-display);margin:4px 0 0}
.wa-p-body{padding:4px 24px 12px;overflow:auto;display:flex;flex-direction:column;gap:16px}
.wa-lead{margin:0;color:var(--muted)}
.wa-panel .field{max-width:none}
.wa-panel label,.wa-panel legend{font:600 13px/18px var(--f-sans)}
.wa-panel .opt{font-weight:400;color:var(--muted)}
.wa-panel textarea.inp{min-height:76px}
.wa-dp{border:0;padding:0;margin:0}
.wa-dp legend{margin-bottom:8px;padding:0}
.wa-chips{display:flex;flex-wrap:wrap;gap:8px}
.wa-chip{position:relative}
.wa-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wa-chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font:500 14px/20px var(--f-sans)}
.wa-chip input:checked+span{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.wa-chip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.wa-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--gold) 14%,var(--surface));font-size:14px;line-height:20px}
.wa-note svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--gold)}
.wa-prev summary{cursor:pointer;font:600 13px/18px var(--f-sans);color:var(--muted)}
.wa-prev pre{margin:8px 0 0;white-space:pre-wrap;font:14px/21px var(--f-sans);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.wa-p-foot{padding:14px 24px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--canvas);display:flex;flex-direction:column;gap:8px}
.wa-p-foot .btn{width:100%}
.wa-priv{margin:0;font-size:12px;line-height:17px;color:var(--muted);text-align:center}
.wa-gen{display:flex;gap:14px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.wa-gen p{margin:0;font-size:14px;line-height:20px;flex:1}
.rv-panel{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));background:var(--surface)}
.rv-big{padding:40px 36px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 18%,var(--surface)),var(--surface) 75%);border-right:1px solid color-mix(in srgb,var(--gold) 25%,var(--line))}
.rv-num{font:400 88px/88px var(--f-display);letter-spacing:-.02em;color:var(--ink);margin-top:6px}
.rv-big .rv-stars{font-size:24px;line-height:28px;letter-spacing:4px}
.rv-big p{margin:10px 0 0;font-size:15px;line-height:22px;color:var(--ink)}
.rv-big small{font-size:12px;line-height:16px;color:var(--muted)}
.rv-copy{padding:40px 40px 32px;display:flex;flex-direction:column;justify-content:center}
.rv-copy h2{margin:0 0 12px}
.rv-copy h2 em{color:var(--gold)}
.rv-copy>p{margin:0;color:var(--muted);max-width:56ch}
.rv-cta .btn-s .rv-stars{font-size:13px;letter-spacing:1px;margin-right:2px}
.rv-stars{color:var(--gold);letter-spacing:2px;font-size:18px;line-height:20px}
.rv-stars i{font-style:normal;color:var(--line-strong)}
.rv-list{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rv-card{margin:0;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.rv-card blockquote{margin:0;font:400 17px/27px var(--f-display);color:var(--ink)}
.rv-card figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;line-height:18px;color:var(--muted);margin-top:auto}
.rv-card figcaption b{color:var(--ink)}
.rv-src{margin-left:auto}
.rv-cta{margin-top:28px}
.rv-note{margin:14px 0 0;font-size:12px;line-height:17px;color:var(--muted)}
@media (max-width:819px){
  .wa-card{grid-template-columns:1fr;padding:22px 20px;gap:16px}
  .wa-card .btn{width:100%}
  .wa-card h3{font-size:23px;line-height:29px}
  .wa-panel{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;animation:waUp .25s cubic-bezier(.2,.8,.2,1) both}
  .wa-p-head{padding:18px 20px 6px}.wa-p-body{padding:4px 20px 12px}.wa-p-foot{padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px))}
  .rv-panel{grid-template-columns:minmax(0,1fr)}.rv-cta .btn{white-space:normal;text-align:center}.rv-big{padding:28px 22px;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--gold) 25%,var(--line))}.rv-num{font-size:68px;line-height:68px}.rv-copy{padding:24px 22px 26px}
  .rv-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-20px;padding:0 20px 6px}
  .rv-card{flex:0 0 84%;scroll-snap-align:start}
  .rv-cta .btn{width:100%}
  .wa-gen{flex-direction:column;align-items:stretch}
}
@keyframes waUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}


/* ==========================================================================
   JUST BREN · verfijningslaag (voorstel v0.3)
   - Bovenop v0.2; huisstijl, teksten, beelden en functies blijven gelijk.
   - Alles valt onder html.vf: schakelaar uit = exact v0.2.
   - Alleen transform/opacity/clip-path animeren (soepel, geen layout-schokken).
   - Geen extra lettertypes of bibliotheken.
   - "Minder beweging" ingesteld = geen animaties, alles direct zichtbaar.
   ========================================================================== */
html.vf{--vf-ease:cubic-bezier(.22,.8,.24,1);--vf-soft:cubic-bezier(.45,0,.2,1)}

/* ---------- Header ---------- */
html.vf .s-head{transition:border-color .3s,box-shadow .45s var(--vf-ease)}
html.vf .s-head.scrolled{border-bottom-color:transparent;box-shadow:0 1px 0 color-mix(in srgb,var(--gold) 26%,transparent),0 10px 26px -16px rgba(42,31,26,.28)}
html.vf .s-nav button{position:relative}
html.vf .s-nav button::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1.5px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--vf-ease)}
html.vf .s-nav button:hover::after,html.vf .s-nav button.vf-on::after{transform:scaleX(1)}
html.vf .s-nav button.vf-on{color:var(--ink)}
html.vf .s-logo span{display:inline-block;transition:transform .4s var(--vf-ease)}
html.vf .s-logo:hover span{transform:translateY(-2px) scale(1.25)}

/* ---------- Hero: binnenkomst ---------- */
html.vf .vf-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em 0;margin:0 -.04em -.12em 0}
html.vf .vf-w>span{display:inline-block}
html.vf .vf-intro .vf-w>span{transform:translateY(108%);animation:vfWord 1s var(--vf-ease) forwards;animation-delay:calc(var(--i)*75ms + 180ms)}
html.vf .vf-intro .vf-w.vf-em{overflow:visible}
html.vf .vf-intro .vf-w.vf-em>span{transform:translateY(40%);opacity:0;filter:blur(4px);animation:vfEm 1.1s var(--vf-ease) forwards;animation-delay:calc(var(--i)*75ms + 180ms)}
@keyframes vfWord{to{transform:none}}
@keyframes vfEm{to{transform:none;opacity:1;filter:none}}
html.vf .hero h1 em{position:relative}
html.vf .vf-swash{position:absolute;left:-3%;width:106%;bottom:-.2em;height:.34em;overflow:visible;pointer-events:none;color:var(--gold)}
html.vf .vf-swash path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
html.vf .vf-intro .vf-swash path{stroke-dasharray:1;stroke-dashoffset:1;animation:vfDraw 1.2s var(--vf-soft) forwards;animation-delay:1.05s}
@keyframes vfDraw{to{stroke-dashoffset:0}}
html.vf .hero.vf-intro .enter{animation:none}
html.vf .vf-intro .vf-in{opacity:0;transform:translateY(16px);animation:vfUp .9s var(--vf-ease) forwards;animation-delay:var(--d,0ms)}
@keyframes vfUp{to{opacity:1;transform:none}}

/* Hero-foto: boog onthult zich, gouden boog erachter, enkele bloesemblaadjes */
html.vf .hero{padding-bottom:48px}
html.vf .vf-arch{position:relative;isolation:isolate;min-width:0}
html.vf .vf-arch .hero-media{position:relative;z-index:1}
html.vf .vf-arch::before{content:"";position:absolute;inset:16px -14px -14px 16px;border:1px solid color-mix(in srgb,var(--gold) 70%,transparent);border-radius:240px 240px calc(var(--r-lg) + 4px) calc(var(--r-lg) + 4px);z-index:0;pointer-events:none}
html.vf .vf-intro .vf-arch .hero-media{animation:vfReveal 1.5s var(--vf-ease) .15s both}
html.vf .vf-intro .vf-arch::before{opacity:0;transform:translate(-14px,-14px);animation:vfArchLine 1.6s var(--vf-ease) .7s forwards}
@keyframes vfReveal{from{clip-path:inset(100% 0 0 0);transform:translateY(24px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes vfArchLine{to{opacity:1;transform:none}}
html.vf .vf-intro .vf-arch .hero-media img{animation:vfSettle 2.4s var(--vf-ease) .15s both,slowzoom 18s ease-in-out 2.6s infinite alternate}
@keyframes vfSettle{from{transform:scale(1.14)}to{transform:scale(1)}}
html.vf .vf-petals{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
html.vf .vf-petals i{position:absolute;top:-4%;width:13px;height:11px;border-radius:85% 15% 85% 15%;background:linear-gradient(135deg,#f7c6d2,#e590a8 70%,#d77c96);opacity:0;animation:vfPetal var(--t,14s) linear var(--dl,0s) infinite;box-shadow:inset -1px -1px 2px rgba(150,40,70,.18)}
html.vf .vf-petals i:nth-child(1){left:22%;--t:15s;--dl:1.8s;--x:60px;--r:340deg}
html.vf .vf-petals i:nth-child(2){left:58%;--t:18s;--dl:5.5s;--x:-50px;--r:-300deg;transform:scale(.8)}
html.vf .vf-petals i:nth-child(3){left:40%;--t:16s;--dl:9.5s;--x:80px;--r:280deg}
html.vf .vf-petals i:nth-child(4){left:74%;--t:20s;--dl:13s;--x:-70px;--r:-360deg}
@keyframes vfPetal{
  0%{opacity:0;transform:translate(0,0) rotate(0)}
  8%{opacity:.85}
  50%{transform:translate(var(--x),48cqh) rotate(calc(var(--r)/2))}
  85%{opacity:.75}
  100%{opacity:0;transform:translate(calc(var(--x)*.4),96cqh) rotate(var(--r))}
}
html.vf .vf-petals{container-type:size}
html.vf .next-free i{position:relative}
html.vf .next-free i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--success);opacity:0;animation:vfPulse 2.8s ease-out 2s infinite}
@keyframes vfPulse{0%{transform:scale(.45);opacity:.65}100%{transform:scale(1.7);opacity:0}}

/* ---------- Onthullen bij scrollen ---------- */
html.vf .vf-r{opacity:0;transform:translateY(26px);transition:opacity 1s var(--vf-ease),transform 1s var(--vf-ease);transition-delay:calc(var(--i,0)*80ms)}
html.vf .vf-r.vf-img{transform:translateY(26px) scale(.985)}
html.vf .vf-r.vf-v{opacity:1;transform:none}
html.vf .vf-r.vf-now{transition:none}
html.vf .site .vf-r.over::before{transform-origin:left center;transform:scaleX(0);transition:transform 1.1s var(--vf-ease) .25s}
html.vf .site .vf-r.vf-v.over::before{transform:none}
/* Na een tabwissel: prijsregels zacht laten instromen */
html.vf .vf-tabin>*{animation:vfUp .6s var(--vf-ease) both;animation-delay:calc(var(--i,0)*45ms);opacity:0;transform:translateY(10px)}

/* ---------- Knoppen en details ---------- */
html.vf .site .btn{transition:transform .25s var(--vf-ease),background .2s,box-shadow .35s var(--vf-ease),color .2s,border-color .2s}
html.vf .site .btn:active{transform:scale(.97)}
html.vf .site .btn-p{position:relative;overflow:hidden;isolation:isolate}
html.vf .site .btn-p::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,236,214,.24) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--vf-ease)}
@media (hover:hover){
  html.vf .site .btn-p:hover{box-shadow:0 10px 24px -10px rgba(42,31,26,.55)}
  html.vf .site .btn-p:hover::after{transform:translateX(120%)}
  html.vf .site .btn-s:hover{border-color:var(--gold)}
  html.vf .reel{transition:transform .6s var(--vf-ease),box-shadow .6s var(--vf-ease)}
  html.vf .reel-wrap:hover .reel{transform:translateY(-5px);box-shadow:0 18px 34px -18px rgba(42,31,26,.5)}
  html.vf .kj-d .media-img img,html.vf .kj-wide .media-img img{transition:transform 1.4s var(--vf-ease)}
  html.vf .kj-d:hover .media-img img,html.vf .kj-wide:hover .media-img img{transform:scale(1.04)}
}
html.vf .price-row{position:relative;isolation:isolate}
html.vf .price-row::before{content:"";position:absolute;inset:3px -14px;z-index:-1;border-radius:var(--r-md);background:color-mix(in srgb,var(--gold) 10%,var(--surface));opacity:0;transform:scaleY(.92);transition:opacity .3s,transform .4s var(--vf-ease)}
html.vf .price-row:hover::before,html.vf .price-row:focus-visible::before{opacity:1;transform:none}
html.vf .price-row:active::before{background:color-mix(in srgb,var(--gold) 18%,var(--surface))}
html.vf .tabs-s button{transition:background .3s var(--vf-ease),color .3s,border-color .3s,transform .2s}
html.vf .tabs-s button:active{transform:scale(.96)}
html.vf .tabs-s button:hover:not([aria-selected="true"]){border-color:var(--gold)}
/* Reviews: sterren één voor één */
html.vf .rv-big .vf-st{display:inline-block}
html.vf .rv-big.vf-go .vf-st{animation:vfStar .55s var(--vf-ease) both;animation-delay:calc(var(--i)*110ms + 250ms)}
@keyframes vfStar{0%{opacity:.15;transform:scale(.5) rotate(-25deg)}70%{transform:scale(1.18)}100%{opacity:1;transform:none}}
html.vf .rv-num{font-variant-numeric:tabular-nums}

/* Rand-vervaging bij horizontaal scrollende rijen (laat zien dat er meer is) */
@media (max-width:819px){
  html.vf .reels,html.vf .rv-list,html.vf .site .days,html.vf .tabs-s{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  html.vf .vf-endx{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Mobiel menu ---------- */
html.vf .s-sheet{animation:vfSheet .5s var(--vf-ease) both}
html.vf .s-sheet nav button{animation:vfUp .6s var(--vf-ease) both;opacity:0;transform:translateY(12px)}
html.vf .s-sheet nav button:nth-child(1){animation-delay:.08s}html.vf .s-sheet nav button:nth-child(2){animation-delay:.13s}html.vf .s-sheet nav button:nth-child(3){animation-delay:.18s}html.vf .s-sheet nav button:nth-child(4){animation-delay:.23s}html.vf .s-sheet nav button:nth-child(5){animation-delay:.28s}
@keyframes vfSheet{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* ---------- Telefoon ---------- */
@media (max-width:819px){
  html.vf .hero{gap:28px;padding-bottom:36px}
  html.vf .hero .cta-row{flex-wrap:nowrap;gap:10px}
  html.vf .hero .cta-row .btn{flex:1 1 0;min-width:0;padding-inline:12px;font-size:15px}
  html.vf .vf-arch::before{inset:12px -8px -10px 12px}
  html.vf .vf-petals i:nth-child(n+3){display:none}
  html.vf .site .btn,html.vf .price-row,html.vf .tabs-s button,html.vf .site .slot,html.vf .site .day{-webkit-tap-highlight-color:transparent}
}

/* ---------- Boekingsflow ---------- */
html.vf #bkStep.enter{animation:none}
html.vf #bkStep.vf-fwd{animation:vfFwd .55s var(--vf-ease) both}
html.vf #bkStep.vf-back{animation:vfBack .55s var(--vf-ease) both}
@keyframes vfFwd{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes vfBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
html.vf .bk-progress{height:4px;background:color-mix(in srgb,var(--gold) 18%,var(--line))}
html.vf .bk-progress i{transition:width .8s var(--vf-ease);background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 70%,#fff),var(--gold))}
html.vf .site .slot,html.vf .site .day{transition:background .25s,border-color .25s,color .25s,transform .2s var(--vf-ease),box-shadow .3s}
@media (hover:hover){html.vf .site .slot:not([aria-pressed="true"]):hover,html.vf .site .day:not([disabled]):not([aria-pressed="true"]):hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(42,31,26,.35)}}
html.vf .site .slot:active,html.vf .site .day:not([disabled]):active{transform:scale(.95)}
html.vf .site .vf-pop{animation:vfPop .42s var(--vf-ease)}
@keyframes vfPop{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:none}}
html.vf .site .day[disabled]{background:transparent;border-style:solid;border-color:color-mix(in srgb,var(--line) 70%,transparent);opacity:.6}
html.vf .ok-mark{position:relative;animation:vfPop .6s var(--vf-ease) both}
html.vf .ok-mark::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--success);opacity:0;animation:vfRing 1.4s ease-out .35s 2}
@keyframes vfRing{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.3);opacity:0}}
html.vf .ok-mark svg path,html.vf .ok-mark svg polyline{stroke-dasharray:1;stroke-dashoffset:1;animation:vfDraw .7s var(--vf-soft) .25s forwards}

/* ---------- Beheer ---------- */
html.vf .vf-greet{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;line-height:18px;color:var(--muted);animation:vfUp .6s var(--vf-ease) both;min-width:0}
html.vf .vf-greet b{color:var(--ink);font-weight:600}
html.vf .vf-greet .vf-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;position:relative}
html.vf .vf-greet .vf-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--success);opacity:0;animation:vfPulse 2.8s ease-out 1s infinite}
@media (max-width:819px){html.vf .vf-greet{display:none}}
html.vf .vf-greet span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.vf .top{display:flex;align-items:center;gap:16px}
html.vf .view.vf-page>*{animation:vfUp .45s var(--vf-ease) both}
html.vf .view.vf-page>*:nth-child(2){animation-delay:.05s}html.vf .view.vf-page>*:nth-child(3){animation-delay:.1s}html.vf .view.vf-page>*:nth-child(n+4){animation-delay:.14s}
html.vf .col.vf-today{background:color-mix(in srgb,var(--brand) 5%,transparent)}
html.vf .now{height:2px;background:var(--rose,#94523f);box-shadow:0 0 0 3px color-mix(in srgb,var(--rose,#94523f) 12%,transparent)}
html.vf .now::before{left:-6px;top:-4px;width:10px;height:10px;background:var(--rose,#94523f);box-shadow:0 0 0 3px var(--surface)}
html.vf .ap{transition:box-shadow .25s var(--vf-ease),filter .2s;border-left-width:3px}
html.vf .ap.cat-dames{border-left-color:var(--c-dames-ink)}html.vf .ap.cat-heren{border-left-color:var(--c-heren-ink)}html.vf .ap.cat-kinderen{border-left-color:var(--c-kinderen-ink)}html.vf .ap.cat-kleur{border-left-color:var(--c-kleur-ink)}
html.vf .ap:hover{box-shadow:0 8px 20px -8px rgba(42,31,26,.35);filter:saturate(1.08)}
html.vf .ap.st-geannuleerd{border-left-width:1px}
html.vf .drawer{transition:transform .42s var(--vf-ease)}
html.vf .modal-box{animation:vfModal .38s var(--vf-ease) both}
@keyframes vfModal{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
html.vf .side nav button,html.vf .side nav a{transition:background .25s var(--vf-ease),color .2s,transform .2s}
@media (hover:hover){html.vf .side nav button:not([aria-current="page"]):hover{transform:translateX(3px)}}
html.vf .bottom-nav button{position:relative;transition:color .25s}
html.vf .bottom-nav button svg{transition:transform .35s var(--vf-ease)}
html.vf .bottom-nav button::before{content:"";position:absolute;top:3px;left:50%;width:54px;height:30px;margin-left:-27px;border-radius:999px;background:color-mix(in srgb,var(--brand) 16%,transparent);opacity:0;transform:scaleX(.5);transition:opacity .3s,transform .4s var(--vf-ease);z-index:-1}
html.vf .bottom-nav{isolation:isolate}
html.vf .bottom-nav button[aria-current="page"]::before{opacity:1;transform:none}
html.vf .bottom-nav button[aria-current="page"] svg{transform:translateY(-1px)}
html.vf .card{transition:box-shadow .3s var(--vf-ease)}
html.vf .btn{transition:transform .2s var(--vf-ease),background .2s,box-shadow .3s,color .2s,border-color .2s}
html.vf .btn:active{transform:scale(.97)}
html.vf .fab:active,html.vf [class*="fab"]:active{transform:scale(.93)}

/* ---------- Minder beweging: alles direct in eindstand ---------- */
@media (prefers-reduced-motion:reduce){
  html.vf .vf-w>span,html.vf .vf-intro .vf-w>span,html.vf .vf-intro .vf-w.vf-em>span{transform:none!important;opacity:1!important;filter:none!important}
  html.vf .vf-in,html.vf .vf-intro .vf-in,html.vf .vf-r,html.vf .vf-tabin>*,html.vf .s-sheet nav button,html.vf .view.vf-page>*,html.vf .vf-greet{opacity:1!important;transform:none!important}
  html.vf .vf-swash path,html.vf .ok-mark svg path,html.vf .ok-mark svg polyline{stroke-dashoffset:0!important}
  html.vf .vf-arch .hero-media{clip-path:none!important;transform:none!important}
  html.vf .vf-arch::before{opacity:1!important;transform:none!important}
  html.vf .vf-petals{display:none}
  html.vf .site .vf-r.over::before{transform:none!important}
}

/* ==========================================================================
   KLEUR: warm beige/crème als vaste standaard (ook als het toestel op donker
   staat). Donker alleen als bewuste keuze via de knop (html.vf-donker).
   Specificiteit (0,2,1) wint van :root[data-theme] en de prefers-color-scheme-blokken van v0.2.
   ========================================================================== */
html.vf.vf-licht{
  --canvas:#f3eadf;--surface:#fbf7f1;--sunk:#e9ddce;--line:#e1d2c0;--line-strong:#8a7464;
  --ink:#2b1e17;--muted:#655246;--brand:#b7804f;--brand-strong:#85532b;--on-brand:#fbf7f1;
  --rose:#94523f;--rose-soft:#f2dfd5;
  --c-dames:#f2d9cf;--c-dames-ink:#8b4636;--c-heren:#dbe2d0;--c-heren-ink:#4b6646;
  --c-kinderen:#f0e2bb;--c-kinderen-ink:#735d18;--c-kleur:#e9d0b5;--c-kleur-ink:#774a24;
  --success:#3f6b3f;--success-soft:#e0e8d9;--warning:#80580c;--warning-soft:#f3e5c8;--danger:#a23b2e;--danger-soft:#f4dbd6;
  --focus:#85532b;--scrim:rgba(43,30,23,.4);
  --shadow:0 1px 2px rgba(60,38,24,.07),0 8px 24px rgba(60,38,24,.09);--shadow-drag:0 12px 32px rgba(60,38,24,.22);
  --vf-band:#ece0d1;--vf-hero-glow:#fbf3e9;
  color-scheme:light;
}
html.vf.vf-licht .site{--rose:#a3405c;--rose-soft:#f5dfe4;--gold:#a8874a}
html.vf.vf-donker{
  --canvas:#16110e;--surface:#1f1814;--sunk:#120e0b;--line:#3a2e27;--line-strong:#7a6658;
  --ink:#f4ece4;--muted:#bdaea2;--brand:#d6a06c;--brand-strong:#e2b07f;--on-brand:#2a1a0e;
  --rose:#d9a190;--rose-soft:#3a2621;
  --c-dames:#4a2f29;--c-dames-ink:#e4a894;--c-heren:#2f3a2b;--c-heren-ink:#a9be9a;--c-kinderen:#403620;--c-kinderen-ink:#d8be73;--c-kleur:#4a3523;--c-kleur-ink:#e0a970;
  --success:#8fb487;--success-soft:#22301f;--warning:#e0b25a;--warning-soft:#382a12;--danger:#e78a7c;--danger-soft:#3a1f1b;
  --focus:#e2b07f;--scrim:rgba(0,0,0,.55);--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--shadow-drag:0 12px 32px rgba(0,0,0,.6);
  --vf-band:#1b1511;--vf-hero-glow:#211913;
  color-scheme:dark;
}
html.vf.vf-donker .site{--rose:#e897ab;--rose-soft:#3b2229;--gold:#c9a862}
html.vf body{background:var(--canvas)}

/* Warme opbouw van de website: crème en beige banen wisselen elkaar af */
html.vf .site{background:var(--canvas)}
html.vf .site .hero{position:relative}
html.vf .site .s-main{background:radial-gradient(120% 60% at 85% 0%,var(--vf-hero-glow) 0%,transparent 60%) no-repeat}
html.vf #sec-over,html.vf #sec-reviews{background:var(--vf-band);border-top-color:color-mix(in srgb,var(--gold) 22%,var(--line))}
html.vf #sec-behandelingen,html.vf #sec-contact,html.vf #sec-resultaten{border-top-color:color-mix(in srgb,var(--gold) 22%,var(--line))}
html.vf .s-foot{background:var(--vf-band)}
html.vf #sec-over .kj-end,html.vf #sec-reviews .rv-panel,html.vf #sec-reviews .rv-card{background:var(--surface)}
html.vf .s-head{background:color-mix(in srgb,var(--canvas) 92%,transparent)}

/* Beheer in dezelfde warme tinten */
html.vf.vf-licht .side{background:var(--vf-band)}
html.vf.vf-licht .top,html.vf.vf-licht .main{background:var(--canvas)}

/* Weergaveknop (licht/donker) */
.vf-theme{display:inline-flex;align-items:center;gap:6px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 35%,transparent);background:none;color:inherit;border-radius:999px;padding:4px 10px;font:600 12px/16px var(--f-sans);cursor:pointer;white-space:nowrap}
.vf-theme svg{width:15px;height:15px;flex:none}
.vf-theme:focus-visible{outline:2px solid var(--gold,#c9a862);outline-offset:2px}
html:not(.vf) .vf-theme{display:none}
.s-foot .vf-theme{margin-top:12px;color:var(--muted)}
.side-foot .vf-theme{margin-bottom:10px;color:var(--muted)}

/* ==========================================================================
   Zwevend Google-reviewkaartje (alleen website-home, nooit in beheer of boeken)
   ========================================================================== */
.vf-rv{position:fixed;z-index:35;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(320px,calc(100vw - 32px));box-sizing:border-box;
  padding:16px 40px 14px 18px;border-radius:18px;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid color-mix(in srgb,var(--gold,#b0904f) 38%,var(--line));color:var(--ink);
  box-shadow:0 1px 2px rgba(60,38,24,.06),0 18px 40px -16px rgba(60,38,24,.32);
  font:400 14px/20px var(--f-sans);opacity:0;transform:translateY(14px) scale(.98);visibility:hidden;
  transition:opacity .9s var(--vf-ease,ease),transform 1s var(--vf-ease,ease),visibility 0s linear .9s}
.vf-rv.vf-on{opacity:1;transform:none;visibility:visible;transition:opacity .9s var(--vf-ease,ease),transform 1s var(--vf-ease,ease),visibility 0s}
.vf-rv::before{content:"";position:absolute;left:18px;top:0;width:36px;height:2px;border-radius:0 0 2px 2px;background:var(--rose,#a3405c);opacity:.75}
.vf-rv-stars{color:var(--gold,#b0904f);letter-spacing:2px;font-size:14px;line-height:16px}
.vf-rv-t{margin:6px 0 8px;font:400 16px/23px var(--f-display);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vf-rv-f{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:12px;line-height:16px;color:var(--muted)}
.vf-rv-f b{color:var(--ink);font-weight:600}
.vf-rv-demo{font:700 10px/14px var(--f-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--rose,#a3405c);background:var(--rose-soft,#f5dfe4);border-radius:999px;padding:1px 7px}
.vf-rv-more{margin-left:auto;background:none;border:0;padding:2px 0;color:var(--brand-strong);font:600 12px/16px var(--f-sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.vf-rv-x{position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.vf-rv-x:hover{background:color-mix(in srgb,var(--gold,#b0904f) 14%,transparent);color:var(--ink)}
.vf-rv-x:focus-visible,.vf-rv-more:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vf-rv-x svg{width:14px;height:14px}
@media (max-width:819px){
  .vf-rv{left:12px;right:12px;width:auto;max-width:420px;margin:0 auto;padding:11px 38px 10px 14px;border-radius:16px}
  .vf-rv::before{left:14px}
  .vf-rv-t{font-size:14px;line-height:20px;-webkit-line-clamp:2;margin:4px 0 6px}
  .vf-rv-stars{font-size:12px}
  .vf-rv-x{top:6px;right:6px}
}
@media (prefers-reduced-motion:reduce){.vf-rv,.vf-rv.vf-on{transform:none!important}}

/* ==========================================================================
   Reviewcarrousel in het reviewblok (rechts naast de score)
   ========================================================================== */
html.vf .rv-copy.vf-has-car>p:not(.rv-note){display:none}
html.vf .rv-copy.vf-has-car ~ .rv-list,html.vf #sec-reviews.vf-car-on .rv-list{display:none}
.vf-car{margin:4px 0 0;display:flex;flex-direction:column;gap:14px}
.vf-car-vp{display:grid;position:relative;touch-action:pan-y}
.vf-car-s{grid-area:1/1;margin:0;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .9s var(--vf-ease,ease),transform .9s var(--vf-ease,ease),visibility 0s linear .9s}
.vf-car-s.vf-cur{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--vf-ease,ease),transform .9s var(--vf-ease,ease),visibility 0s}
.vf-car-s .vf-car-st{color:var(--gold);letter-spacing:3px;font-size:17px;line-height:20px}
.vf-car-s blockquote{margin:0;font:400 21px/31px var(--f-display);color:var(--ink);text-wrap:pretty;position:relative}
.vf-car-s blockquote::before{content:"“";position:absolute;left:-.55em;top:-.12em;font-size:1.9em;line-height:1;color:color-mix(in srgb,var(--rose) 55%,transparent)}
.vf-car-s figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;line-height:18px;color:var(--muted)}
.vf-car-s figcaption b{color:var(--ink);font-weight:600}
.vf-car-demo{font:700 10px/14px var(--f-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--rose);background:var(--rose-soft);border-radius:999px;padding:1px 8px}
.vf-car-nav{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--gold) 25%,var(--line))}
.vf-car-nav .vf-nb{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.vf-car-nav .vf-nb:hover{border-color:var(--gold)}
.vf-car-nav .vf-nb svg{width:16px;height:16px}
.vf-car-dots{display:flex;gap:2px;align-items:center}
.vf-car-dots button{width:24px;height:24px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.vf-car-dots button i{width:7px;height:7px;border-radius:999px;background:var(--line-strong);opacity:.45;transition:width .4s var(--vf-ease,ease),opacity .3s,background .3s}
.vf-car-dots button[aria-current="true"] i{width:20px;background:var(--gold);opacity:1}
.vf-car-play{margin-left:auto;border:0;background:none;color:var(--muted);font:600 12px/16px var(--f-sans);display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:6px 2px}
.vf-car-play svg{width:14px;height:14px}
.vf-car :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* knoppen eronder bescheiden: als tekstlinks */
html.vf .rv-copy.vf-has-car .rv-cta{margin-top:18px;gap:6px 20px;flex-wrap:wrap}
html.vf .rv-copy.vf-has-car .rv-cta .btn{background:none;border:0;box-shadow:none;padding:4px 0;min-height:0;width:auto;font:600 14px/20px var(--f-sans);color:var(--brand-strong);text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
html.vf .rv-copy.vf-has-car .rv-cta .btn::after{display:none}
html.vf .rv-copy.vf-has-car .rv-cta .btn:hover{text-decoration-color:currentColor;transform:none}
html.vf .rv-copy.vf-has-car .rv-cta .btn .rv-stars{display:none}
@media (max-width:819px){
  .vf-car-s blockquote{font-size:18px;line-height:27px;margin-left:.5em}
  .vf-car-s blockquote::before{left:-.5em}
  html.vf .rv-copy.vf-has-car .rv-cta .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){.vf-car-s{transition:none!important;transform:none!important}}

/* ==========================================================================
   Persoonlijke WhatsApp-widget ("Vraagje aan Brenda?")
   ========================================================================== */
.vf-wa{position:fixed;z-index:36;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:12px;transition:bottom .45s var(--vf-ease,ease),opacity .4s,transform .45s var(--vf-ease,ease),visibility 0s}
.vf-wa[hidden]{display:none!important}
.vf-wa.vf-away{opacity:0;transform:translateY(10px);pointer-events:none;visibility:hidden;transition:bottom .45s var(--vf-ease,ease),opacity .35s,transform .45s var(--vf-ease,ease),visibility 0s linear .35s}
.vf-wa-btn{display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));background:color-mix(in srgb,var(--surface) 95%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);font:600 14px/20px var(--f-sans);cursor:pointer;box-shadow:0 1px 2px rgba(60,38,24,.06),0 12px 30px -14px rgba(60,38,24,.4);transition:transform .3s var(--vf-ease,ease),box-shadow .3s,border-color .3s}
.vf-wa-btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 1px 2px rgba(60,38,24,.06),0 16px 34px -14px rgba(60,38,24,.48)}
.vf-wa-btn:focus-visible,.vf-wa-card :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.vf-wa-av{position:relative;width:36px;height:36px;border-radius:50%;flex:none;background:var(--sunk) center/cover no-repeat;box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--gold) 55%,transparent)}
.vf-wa-av i{position:absolute;right:-4px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--rose);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.vf-wa-av i svg{width:11px;height:11px}
.vf-wa-btn em{font-style:italic;font-family:var(--f-display);font-weight:400;font-size:16px;color:var(--rose)}
.vf-wa-card{width:min(320px,calc(100vw - 32px));box-sizing:border-box;border-radius:20px;background:var(--surface);color:var(--ink);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));box-shadow:0 2px 4px rgba(60,38,24,.06),0 24px 50px -18px rgba(60,38,24,.45);overflow:hidden;transform-origin:100% 100%;animation:vfWaIn .45s var(--vf-ease,ease) both}
.vf-wa-card[hidden]{display:none}
@keyframes vfWaIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.vf-wa-head{display:flex;align-items:center;gap:12px;padding:16px 14px 12px 16px;background:linear-gradient(160deg,color-mix(in srgb,var(--rose) 10%,var(--surface)),var(--surface) 70%);border-bottom:1px solid color-mix(in srgb,var(--gold) 20%,var(--line))}
.vf-wa-head .vf-wa-av{width:46px;height:46px}
.vf-wa-head div{flex:1;min-width:0}
.vf-wa-head h2{margin:0;font:500 19px/24px var(--f-display);color:var(--ink)}
.vf-wa-head p{margin:1px 0 0;font-size:12px;line-height:16px;color:var(--muted)}
.vf-wa-x{width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none;align-self:flex-start}
.vf-wa-x:hover{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--ink)}
.vf-wa-x svg{width:15px;height:15px}
.vf-wa-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.vf-wa-bubble{margin:0;padding:12px 14px;border-radius:4px 16px 16px 16px;background:color-mix(in srgb,var(--gold) 12%,var(--canvas));font-size:14px;line-height:21px;color:var(--ink)}
.vf-wa-body .btn{width:100%;justify-content:center}
.vf-wa-alt{background:none;border:0;padding:2px;color:var(--brand-strong);font:600 13px/18px var(--f-sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);align-self:center}
.vf-wa-note{margin:0;font-size:11px;line-height:15px;color:var(--muted);text-align:center}
@media (max-width:819px){
  .vf-wa{right:max(12px,env(safe-area-inset-right,0px))}
  .vf-wa-btn{padding:4px;gap:0}
  .vf-wa-btn .vf-wa-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vf-wa-btn .vf-wa-av{width:46px;height:46px}
  .vf-wa-card{width:calc(100vw - 24px);max-width:400px}
  .vf-rv.vf-with-wa{right:calc(12px + 54px + 10px)}
}
@media (prefers-reduced-motion:reduce){.vf-wa-card{animation:none}.vf-wa,.vf-wa.vf-away{transform:none!important}}
html.vf .s-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
/* Accentkleuren ook voor de zwevende onderdelen buiten de website-container */
.vf-wa,.vf-rv{--rose:#a3405c;--rose-soft:#f5dfe4;--gold:#a8874a}
html.vf-donker .vf-wa,html.vf-donker .vf-rv{--rose:#e897ab;--rose-soft:#3b2229;--gold:#c9a862}

/* ==========================================================================
   Tijdelijke boekingspopup: online boeken via Salonized (tot de overstap)
   ========================================================================== */
.vf-bk{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));--rose:#a3405c;--rose-soft:#f5dfe4;--gold:#a8874a}
html.vf-donker .vf-bk{--rose:#e897ab;--rose-soft:#3b2229;--gold:#c9a862}
.vf-bk[hidden]{display:none}
.vf-bk-scrim{position:absolute;inset:0;background:rgba(43,30,23,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:enter .3s ease both}
.vf-bk-box{position:relative;width:min(420px,100%);max-height:calc(100dvh - 48px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));border-radius:24px;box-shadow:0 30px 70px -20px rgba(43,30,23,.5);animation:vfModal .45s var(--vf-ease,ease) both}
.vf-bk-top{position:relative;padding:24px 60px 14px 24px;background:linear-gradient(160deg,color-mix(in srgb,var(--rose) 9%,var(--surface)),var(--surface) 65%);border-bottom:1px solid color-mix(in srgb,var(--gold) 22%,var(--line))}
.vf-bk-top .over{color:var(--muted)}
.vf-bk-top .over::before{content:"";display:inline-block;width:18px;height:1px;background:var(--gold);vertical-align:4px;margin-right:10px}
.vf-bk-top h2{margin:0;font:400 28px/34px var(--f-display);letter-spacing:-.01em}
.vf-bk-top h2 em{font-style:italic;color:var(--rose)}
.vf-bk-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.vf-bk-x:hover{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--ink)}
.vf-bk-x svg{width:16px;height:16px}
.vf-bk-body{padding:16px 24px 22px;display:flex;flex-direction:column;gap:14px}
.vf-bk-body>p{margin:0;font-size:15px;line-height:23px;color:var(--ink)}
.vf-bk-pick{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--gold) 12%,var(--canvas));font-size:14px;line-height:20px}
.vf-bk-pick b{font-weight:600}
.vf-bk-go{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;background:var(--ink);color:var(--canvas);font:600 16px/20px var(--f-sans);text-decoration:none;transition:transform .25s var(--vf-ease,ease),box-shadow .3s}
.vf-bk-go:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(43,30,23,.6)}
.vf-bk-go svg{width:17px;height:17px}
.vf-bk-wa{align-self:center;display:inline-flex;align-items:center;gap:7px;color:var(--brand-strong);font:600 14px/20px var(--f-sans);text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.vf-bk-wa svg{width:17px;height:17px}
.vf-bk-body>.vf-bk-note{margin:0;font-size:12px;line-height:17px;color:var(--muted);text-align:center}
.vf-bk :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (max-width:819px){
  .vf-bk{place-items:end stretch;padding:0}
  .vf-bk-box{width:100%;border-radius:24px 24px 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom,0px);animation:waUp .35s cubic-bezier(.2,.8,.2,1) both}
  .vf-bk-top{padding:22px 60px 12px 20px}.vf-bk-body{padding:14px 20px 22px}
  .vf-bk-top h2{font-size:25px;line-height:31px}
}
@media (prefers-reduced-motion:reduce){.vf-bk-box,.vf-bk-scrim{animation:none}}
/* Beschikbaarheid uit het eigen systeem niet tonen zolang Salonized leidend is */
html.vf.vf-salonized .site .next-free{display:none}

/* Robuust bij echte lettertypes en smalle schermen */
@media (max-width:819px){html.vf .hero .cta-row{flex-wrap:wrap}html.vf .hero .cta-row .btn{flex:1 1 auto}}
html.vf .salon-wrap .wa-gen{flex-direction:column;align-items:stretch}
html.vf .salon-wrap .wa-gen .btn{white-space:normal;justify-content:center}
@media (min-width:820px) and (max-width:1199px){html.vf .salon-wrap{grid-template-columns:minmax(0,1fr)}}
html.vf .salon-wrap>*{min-width:0}


.jb-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--canvas);padding:10px 16px;border-radius:999px;font:600 14px/20px var(--f-sans);text-decoration:none}.jb-skip:focus{top:12px}