/* Sitevlot platform-UI */
:root{
  --product-bg:#0b0d12; --product-surface:#13161d; --product-raised:#191d25;
  --product-line:#2a303b; --product-text:#f7f5ef; --product-muted:#a6afbd;
  --product-accent:#3f72ff;
  --bg:var(--product-bg); --surface:var(--product-surface); --ink:var(--product-text);
  --muted:var(--product-muted); --accent:var(--product-accent); --accent-ink:#ffffff;
  --lijn:var(--product-line);
  --r:14px; --schaduw:0 18px 44px -24px rgba(0,0,0,.78);

  /* ---- designsysteem van het klantdashboard (25-08) ----------------------
     Vijf lettergroottes, zeven ruimtestappen, drie radii, drie statuskleuren.
     Additief: de landingspagina gebruikt ze niet en verandert dus niet. --t1
     is 14px en is de ondergrens -- daaronder gaat niets meer, want de klant is
     een ondernemer van veertig-plus die dit op een laptop leest. */
  --t1:.875rem; --t2:1rem; --t3:1.125rem; --t4:1.5rem;
  --t5:clamp(1.75rem,3.4vw,2.25rem);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-s:8px; --r-m:14px; --r-p:999px;
  --vlak:var(--product-raised); --rand:#626d7d;
  --ok:#62d596; --let:#f2bd61; --fout:#ff827c;
  --ok-vlak:#102c21; --let-vlak:#332713; --fout-vlak:#35191a;
}
/* Alleen in het dashboard: donkerder grijs (7,7:1 in plaats van 5,4:1) en een
   zichtbare kaartrand. Buiten `body.dash` blijft alles zoals het was. */
body.dash{
  --product-text:#e3e7ee;
  --accent-ink:#edf2ff;
  --muted:#9fa9b8;
  --lijn:#303744;
  --dash-tint:#171c25;
  --dash-tint-blue:#16213a;
  --dash-hover:#1b212b;
}
body.dash :focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;color-scheme:dark}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.15}
a{color:var(--accent)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.wrap.smal{max-width:780px}

/* nav */
.topnav{background:var(--surface);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:40}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{font-family:'Sora',sans-serif;font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none}
.logo b{color:var(--accent)}
.navr{display:flex;gap:16px;align-items:center}
.navr a{text-decoration:none;font-weight:600;font-size:.93rem;color:var(--muted)}
.navr a:hover{color:var(--ink)}
/* een knop in de menubalk houdt zijn eigen tekstkleur: .navr a (0-1-1) won van .btn (0-1-0),
   waardoor de knoptekst de gedempte grijstint kreeg op een blauwe knop */
.navr a.btn{color:var(--accent-ink)}
.navr a.btn:hover{color:var(--accent-ink)}
@media(max-width:860px){.alleen-breed{display:none}}
/* wie is er ingelogd: rechtsboven, met de weg naar /account */
.navacc{display:inline-flex;text-decoration:none}
.navacc-bol{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:'Sora',sans-serif;font-weight:700;font-size:.82rem}
.navacc:hover .navacc-bol{background:var(--accent)}
.navacc:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}

/* knoppen */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:none;padding:12px 26px;border-radius:10px;font-weight:700;font-size:.97rem;text-decoration:none;cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(36,86,230,.6)}
.btn.groot{padding:15px 34px;font-size:1.05rem}
.btn.stil{background:var(--surface);color:var(--ink);border:1px solid var(--lijn)}
.btn.stil:hover{box-shadow:0 6px 18px -10px rgba(16,24,40,.35)}
.btn.klein{padding:8px 16px;font-size:.86rem}
.btn.rood{background:#fff;border:1px solid #f1c5c5;color:#b42318}

/* kaarten & forms */
.kaart{background:var(--surface);border:1px solid var(--lijn);border-radius:var(--r);padding:30px;box-shadow:var(--schaduw)}
label{display:block;font-weight:600;font-size:.9rem;margin:16px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],input[type=date],textarea,select{width:100%;padding:12px 14px;border:1px solid var(--lijn);border-radius:10px;font:inherit;background:var(--product-raised);color:var(--ink)}
input:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-color:var(--accent)}
textarea{min-height:110px;resize:vertical}
.hint{font-size:.84rem;color:var(--muted);margin-top:4px}
.hint.groot{font-size:1.02rem;margin:14px 0 22px}
.fout{background:#fef3f2;border:1px solid #f9c3c0;color:#b42318;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.93rem}
.ok{background:#ecfdf3;border:1px solid #abe8c5;color:#067647;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.93rem}

/* wizard: stappenbalk */
.stappen{display:flex;gap:4px;margin:26px 0;flex-wrap:wrap}
.stappen a{flex:1;min-width:96px;text-align:center;text-decoration:none;font-size:.8rem;font-weight:600;color:var(--muted);padding:9px 6px;border-radius:9px;background:var(--surface);border:1px solid var(--lijn)}
.stappen a.actief{background:var(--accent);color:#fff;border-color:var(--accent)}
.stappen a.klaar{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--lijn));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.wizfoot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px}

/* keuze-grids */
.keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:18px}
.keuze{position:relative;border:2px solid var(--lijn);border-radius:var(--r);padding:20px;background:var(--surface);cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.keuze:hover{transform:translateY(-2px)}
.keuze input{position:absolute;opacity:0;pointer-events:none}
.keuze.aan{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.keuze h3{font-size:1.02rem;margin-bottom:4px}
.keuze .sub{font-size:.85rem;color:var(--muted)}
.keuze .emoji{font-size:1.6rem;display:block;margin-bottom:8px}
.keuze.toon:hover{transform:none;border-color:var(--lijn)}

/* concept-preview mini */
.mini{height:120px;border-radius:9px;margin-bottom:14px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--lijn)}
.mini .mb{flex:1;display:flex;align-items:center;padding:0 12px}
.mini .mt{font-size:.62rem;padding:4px 10px;display:flex;justify-content:space-between;opacity:.85}
.mini .kop{font-weight:800;font-size:.95rem}
.mini .kn{margin-left:auto;font-size:.55rem;padding:3px 9px;border-radius:99px;color:#fff}

/* paletjes */
.pal{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.pal i{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.08)}

/* secties-lijst */
.seclijst{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.secrij{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--lijn);border-radius:11px;padding:13px 16px}
.secrij.uit{opacity:.5}
.secrij .naam{flex:1;font-weight:600;font-size:.95rem}
.secrij .naam .hint{display:block;font-weight:400}
.secrij .pijlen button{background:var(--bg);border:1px solid var(--lijn);border-radius:7px;width:30px;height:30px;cursor:pointer;font-size:.85rem}
.secrij input[type=checkbox]{width:19px;height:19px;accent-color:var(--accent)}

/* inhoud-stap: split-editor met live preview */
.wrap.breed{max-width:1560px}
.editor-layout{display:grid;grid-template-columns:minmax(420px,540px) 1fr;gap:24px;align-items:start}
.editor-paneel{min-width:0}
.editor-kop{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--lijn);border-radius:var(--r);padding:16px 20px;margin-bottom:14px;box-shadow:var(--schaduw)}
.editor-kop b{font-family:'Sora',sans-serif;font-size:1.05rem}
.editor-kop .hint{max-width:26em}
.voortgang{display:flex;align-items:center;gap:10px;flex:none}
.vg-balk{width:110px;height:8px;background:var(--bg);border:1px solid var(--lijn);border-radius:99px;overflow:hidden}
.vg-balk div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#12b76a);border-radius:99px;transition:width .35s}
.voortgang span{font-size:.82rem;font-weight:700;color:var(--muted);min-width:34px}
.secblok{margin-bottom:12px;border:1px solid var(--lijn);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.secblok[open]{border-color:color-mix(in srgb,var(--accent) 45%,var(--lijn));box-shadow:var(--schaduw)}
.secblok summary{padding:14px 18px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:13px}
.secblok summary::-webkit-details-marker{display:none}
.secblok summary::after{content:"▾";color:var(--muted);margin-left:4px}
.secblok[open] summary::after{content:"▴"}
.sec-ico{flex:none;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 14%,var(--lijn));display:grid;place-items:center;font-size:1.15rem}
.secblok[open] .sec-ico{background:color-mix(in srgb,var(--accent) 14%,#fff);border-color:color-mix(in srgb,var(--accent) 38%,var(--lijn))}
.sec-titel{font-weight:700;font-family:'Sora',sans-serif;line-height:1.25;min-width:0}
.sec-titel small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.78rem;color:var(--muted);margin-top:1px}
.secblok summary .badge{margin-left:auto;flex:none;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--bg);color:var(--muted);border:1px solid var(--lijn);white-space:nowrap}
.secblok summary .badge.deels{background:#fffaeb;color:#b54708;border-color:#fedf89}
.secblok summary .badge.vol{background:#ecfdf3;color:#067647;border-color:#abe8c5}
.secblok .binnen{padding:2px 18px 20px;border-top:1px solid var(--lijn)}
.sectip{display:flex;gap:10px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--lijn));border-radius:10px;padding:10px 13px;font-size:.85rem;color:var(--muted);margin:14px 0 0}
.varianten{margin:12px 0 4px;padding:13px 15px;background:var(--bg);border:1px dashed color-mix(in srgb,var(--accent) 30%,var(--lijn));border-radius:12px}
.var-kop{font-size:.83rem;font-weight:600;color:var(--muted);margin-bottom:10px}
.var-rij{display:flex;gap:8px;flex-wrap:wrap}
.var-knop{background:var(--surface);border:1px solid var(--lijn);border-radius:99px;padding:8px 16px;font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.var-knop:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px -6px rgba(36,86,230,.4)}
.var-knop.aan{background:color-mix(in srgb,var(--accent) 9%,#fff);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.var-knop.aan::before{content:"✓ "}
.veld{margin-bottom:2px}
.itemrij{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:12px;background:var(--bg);border:1px solid var(--lijn);border-radius:10px;margin-top:10px}
.itemrij>div{flex:1;min-width:140px}
.itemrij label{margin-top:0;font-size:.8rem}
.itemrij .weg{flex:none;background:none;border:none;color:#b42318;cursor:pointer;font-size:1.05rem;padding:9px 4px}
.fotos-nu{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.fotos-nu .f{position:relative}
.fotos-nu img{width:86px;height:86px;object-fit:cover;border-radius:9px;border:1px solid var(--lijn)}
.fotos-nu label{position:absolute;inset:auto 4px 4px auto;display:flex;align-items:center;gap:4px;background:#fff;border-radius:6px;font-size:.66rem;padding:2px 6px;margin:0;cursor:pointer;border:1px solid var(--lijn)}
.fotos-nu input[type=checkbox]{width:auto}
.upload{display:flex;align-items:center;gap:13px;border:2px dashed var(--lijn);border-radius:12px;padding:13px 16px;cursor:pointer;margin-top:8px;font-weight:500;transition:border-color .2s,background .2s}
.upload:hover,.upload.sleep{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.upload .up-icoon{font-size:1.4rem}
.upload .up-tekst b{font-size:.92rem}
.upload .up-tekst small{display:block;font-weight:400;font-size:.78rem;color:var(--muted)}
.up-nieuw{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.up-nieuw img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid #12b76a}
.editor-preview{position:sticky;top:80px;min-width:0}
.preview-balk{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--lijn);border-bottom:none;border-radius:var(--r) var(--r) 0 0;padding:10px 16px;font-size:.88rem}
.live-dot{width:9px;height:9px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 3px #12b76a33;animation:pols 1.6s infinite}
@keyframes pols{50%{box-shadow:0 0 0 6px #12b76a1a}}
.preview-balk .viewswitch{margin:0 0 0 auto}
.viewswitch.mini button{padding:5px 11px;font-size:.9rem}
.preview-dicht{display:none;background:none;border:none;font-size:1.05rem;cursor:pointer;color:var(--muted);padding:4px 6px}
.frame-houder{background:#e9edf3;border:1px solid var(--lijn);border-radius:0 0 var(--r) var(--r);padding:12px;text-align:center}
#liveframe{width:100%;max-width:100%;height:calc(100vh - 230px);min-height:420px;border:1px solid var(--lijn);border-radius:10px;background:#fff;transition:width .25s ease}
.preview-fab{display:none;position:fixed;right:16px;bottom:16px;z-index:60;box-shadow:0 10px 28px -8px rgba(16,24,40,.4)}
@media(max-width:1080px){
  .editor-layout{grid-template-columns:1fr}
  .editor-preview{display:none}
  .editor-preview.open{display:flex;flex-direction:column;position:fixed;inset:0;z-index:70;background:var(--bg);padding:12px}
  .editor-preview.open .preview-balk{border-bottom:1px solid var(--lijn);border-radius:var(--r) var(--r) 0 0}
  .editor-preview.open .frame-houder{flex:1;overflow:auto}
  .editor-preview.open #liveframe{height:100%;min-height:0}
  .editor-preview.open .preview-dicht{display:block}
  .preview-fab{display:inline-block}
}

/* preview */
.previewframe{width:100%;height:72vh;border:1px solid var(--lijn);border-radius:var(--r);background:#fff}
.viewswitch{display:flex;gap:8px;margin-bottom:12px}
.viewswitch button{background:var(--surface);border:1px solid var(--lijn);padding:8px 16px;border-radius:9px;cursor:pointer;font-weight:600;font-size:.85rem}
.viewswitch button.aan{background:var(--ink);color:#fff;border-color:var(--ink)}

/* customer dashboard */
.status{font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:99px}
.status.live{background:#ecfdf3;color:#067647}
.status.draft{background:#f2f4f7;color:#475467}
.dash-eyebrow{display:block;color:var(--accent);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em}
.empty-dashboard{text-align:center;background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:70px 24px}.empty-dashboard>span{display:grid;place-items:center;width:70px;height:70px;border-radius:20px;background:#edf3ff;color:var(--accent);margin:0 auto 18px}.empty-dashboard p{color:var(--muted);margin:8px auto 22px}

/* per-site workspace */
.site-workspace{padding-top:28px;padding-bottom:76px}.workspace-header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.back-link{display:inline-block;color:var(--muted);font-size:.78rem;font-weight:600;text-decoration:none;margin-bottom:7px}.workspace-title{display:flex;align-items:center;gap:12px}.workspace-title h1{font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.025em}.workspace-actions{display:flex;gap:9px;flex-wrap:wrap}
.workspace-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:26px;align-items:start}.workspace-sidebar{position:sticky;top:82px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--lijn);border-radius:16px;padding:12px;box-shadow:var(--schaduw);scrollbar-width:thin;scrollbar-color:#ccd2dc transparent}.workspace-sidebar::-webkit-scrollbar{width:8px}.workspace-sidebar::-webkit-scrollbar-thumb{background:#ccd2dc;border-radius:99px;border:2px solid var(--surface)}.workspace-sidebar::-webkit-scrollbar-track{background:transparent}
.side-group{display:grid;gap:3px}.side-group+.side-group{margin-top:13px;padding-top:13px;border-top:1px solid var(--lijn)}.side-group>span{font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:#8a95a6;padding:0 10px 5px}
.side-group a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:#4d5a6e;transition:background .15s,color .15s}.side-group a>svg{flex:none}.side-group a>span{display:grid;min-width:0}.side-group a b{font-size:.82rem;line-height:1.3}.side-group a small{font-size:.66rem;color:#8390a3;line-height:1.35;margin-top:1px}.side-group a:hover{background:#f4f6fa;color:var(--ink)}.side-group a.active{background:#edf3ff;color:var(--accent)}.side-group a.active small{color:#536fae}.side-group a.help-link{border:1px solid #dfe6fb;background:#f8f9ff}.side-group a.help-link.active{border-color:#b9c9f7;background:#edf3ff}
.workspace-content{min-width:0}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.feature-card{padding:24px}.feature-card h3{margin-bottom:6px}.feature-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{display:grid;gap:6px;font-weight:600}.form-grid input,.form-grid textarea,.form-grid select{font:inherit;border:1px solid #ccd2dc;border-radius:9px;padding:11px;width:100%}.wide{grid-column:1/-1}.check{display:flex!important;align-items:center;gap:9px}.check input{width:auto}.setting-section{padding:25px;margin-bottom:16px}.setting-section>p.hint{margin:5px 0 20px}.savebar{position:sticky;bottom:14px;display:flex;justify-content:flex-end;padding:12px;background:#ffffffee;border:1px solid #e3e6ec;border-radius:12px;z-index:20}.notice{padding:12px 15px;background:#eaf8ef;color:#17653a;border-radius:9px;margin-bottom:16px}.warning{padding:12px 15px;background:#fff6df;color:#74510b;border-radius:9px;margin-bottom:16px}

/* site overview */
.overview-welcome{display:flex;justify-content:space-between;align-items:center;gap:26px;background:linear-gradient(130deg,#17233f,#243c77);color:#fff;border-radius:18px;padding:28px 30px;overflow:hidden}.overview-welcome>div:first-child{max-width:650px}.overview-welcome .dash-eyebrow{color:#a9c1ff}.overview-welcome h2{font-size:clamp(1.65rem,3vw,2.35rem);margin:6px 0 9px}.overview-welcome p{color:#c4d0e8;max-width:600px}.overview-score{min-width:145px;text-align:right}.overview-score>b{display:block;font:700 2.5rem/1 'Sora',sans-serif}.overview-score>span{font-size:.7rem;color:#c4d0e8}.overview-score>div{width:145px;height:6px;background:#ffffff2b;border-radius:99px;overflow:hidden;margin-top:10px}.overview-score i{display:block;height:100%;background:#80a4ff;border-radius:inherit}
.primary-task{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #d7e3ff;border-left:4px solid var(--accent);border-radius:14px;padding:18px 20px;margin-top:16px;box-shadow:var(--schaduw)}.task-icon{width:43px;height:43px;display:grid;place-items:center;color:var(--accent);background:#edf3ff;border-radius:12px;flex:none}.primary-task>div:nth-child(2){flex:1}.primary-task span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#657cae;font-weight:800}.primary-task h3{font-size:1rem;margin:2px 0}.primary-task p{font-size:.8rem;color:var(--muted)}
.overview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.overview-stats a{display:grid;background:#fff;border:1px solid var(--lijn);border-radius:13px;padding:16px;text-decoration:none;color:var(--ink)}.overview-stats a>span{display:flex;align-items:center;gap:7px;font-size:.7rem;color:var(--muted);font-weight:600}.overview-stats a>b{font:700 1.55rem 'Sora',sans-serif;margin:5px 0 1px}.overview-stats a>small{font-size:.68rem;color:#8a95a6}.overview-stats a:hover{border-color:#b9c9f7}
.overview-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.overview-panel,.tool-directory{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px;box-shadow:var(--schaduw)}.panel-heading{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:16px}.panel-heading h3{font-size:1.05rem}.panel-heading p{font-size:.76rem;color:var(--muted);margin-top:3px}.panel-heading>span{background:#edf3ff;color:var(--accent);font-size:.75rem;font-weight:800;padding:5px 10px;border-radius:99px}.panel-heading a{font-size:.76rem;font-weight:700;text-decoration:none}
.checklist-list{display:grid}.checklist-list a{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid #edf0f4;text-decoration:none;color:var(--ink)}.checklist-list a>i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#edf3ff;color:var(--accent);font-size:.72rem;font-style:normal;font-weight:800;flex:none}.checklist-list a.done>i{background:#eaf8ef;color:#078047}.checklist-list a>span{display:grid;min-width:0}.checklist-list b{font-size:.8rem}.checklist-list small{font-size:.68rem;color:var(--muted)}.checklist-list strong{margin-left:auto;color:#a0a8b5}.checklist-list a.done b{text-decoration:line-through;color:#778397}.checklist-list a.done small{display:none}
.recent-list{display:grid}.recent-list a{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #edf0f4;text-decoration:none;color:var(--ink)}.avatar-letter{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f0f3f8;color:#536072;font-weight:800;flex:none}.recent-list a>span:nth-child(2){display:grid;min-width:0}.recent-list b{font-size:.8rem}.recent-list small{font-size:.67rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-list strong{margin-left:auto;color:#a0a8b5}.empty-mini{text-align:center;padding:30px 12px;color:var(--muted)}.empty-mini svg{color:#9ba7b8;margin-bottom:7px}.empty-mini b{display:block;color:var(--ink);font-size:.86rem}.empty-mini p{font-size:.75rem;margin:4px 0 10px}.empty-mini a{font-size:.76rem;font-weight:700;text-decoration:none}
.tool-directory{margin-top:16px}.tool-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.tool-groups article{border:1px solid var(--lijn);border-radius:13px;padding:17px;display:flex;flex-direction:column;align-items:flex-start}.tool-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px}.tool-icon.blue{background:#edf3ff;color:#2456e6}.tool-icon.green{background:#eaf8ef;color:#078047}.tool-icon.purple{background:#f4efff;color:#7848c7}.tool-groups h4{font-family:'Sora',sans-serif;font-size:.87rem}.tool-groups p{font-size:.72rem;color:var(--muted);margin:5px 0 12px;min-height:3.3em}.tool-groups a{font-size:.73rem;font-weight:700;text-decoration:none;padding:5px 0}.help-strip{display:flex;align-items:center;gap:13px;background:#f8f9ff;border:1px solid #dfe6fb;border-radius:14px;padding:17px 20px;margin-top:16px}.help-strip>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#fff;color:var(--accent);flex:none}.help-strip>div{flex:1}.help-strip b{font-size:.86rem}.help-strip p{font-size:.72rem;color:var(--muted)}

/* help bot */
.help-hero{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#f0f4ff,#faf8ff);border:1px solid #dce5fb;border-radius:17px;padding:26px}.bot-orb{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#2456e6,#7949c8);color:#fff;box-shadow:0 12px 24px -12px #2456e6;flex:none}.help-hero h2{font-size:clamp(1.4rem,3vw,2rem);margin:5px 0}.help-hero p{color:var(--muted)}
.help-question-form{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px;margin-top:16px;box-shadow:var(--schaduw)}.help-question-form>label{margin:0 0 8px}.help-question-form>div{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}.help-question-form textarea{min-height:92px}.help-question-form small{display:block;color:var(--muted);font-size:.7rem;margin-top:8px}
.bot-answer{background:#fff;border:1px solid #cfdcff;border-radius:16px;padding:23px;margin-top:16px;box-shadow:var(--schaduw)}.bot-answer-head{display:flex;align-items:center;gap:10px;margin-bottom:15px}.bot-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#edf3ff;color:var(--accent)}.bot-answer-head>div{display:grid}.bot-answer-head b{font-size:.8rem}.bot-answer-head small{color:var(--muted);font-size:.68rem}.bot-answer h3{font-size:1.05rem;margin-bottom:8px}.bot-answer p{white-space:pre-wrap;color:#3f4c60;margin-bottom:16px}
.suggested-help{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px;margin-top:16px}.question-chips{display:flex;flex-wrap:wrap;gap:8px}.question-chips button{background:#f6f8fb;border:1px solid var(--lijn);border-radius:99px;padding:9px 13px;color:#3f4c60;font:600 .74rem 'Inter',sans-serif;cursor:pointer}.question-chips button:hover{border-color:#9db3f0;background:#edf3ff;color:var(--accent)}
.help-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}.help-topics>a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--lijn);border-radius:13px;padding:16px;text-decoration:none;color:var(--ink)}.help-topics>a>svg{color:var(--accent);flex:none}.help-topics span{display:grid}.help-topics b{font-size:.8rem}.help-topics small{font-size:.68rem;color:var(--muted)}.help-topics strong{margin-left:auto;color:#a0a8b5}.help-topics>a:hover{border-color:#b9c9f7}

@media(max-width:1100px){.workspace-layout{grid-template-columns:215px minmax(0,1fr)}.tool-groups{grid-template-columns:1fr}.tool-groups p{min-height:0}.overview-columns{grid-template-columns:1fr}}
@media(max-width:900px){
  .workspace-layout{display:block}.workspace-sidebar{position:static;max-height:none;margin-bottom:18px;overflow:hidden}.workspace-sidebar nav{display:flex;overflow-x:auto;gap:5px;padding-bottom:3px}.side-group{display:contents}.side-group>span{display:none}.side-group a{min-width:max-content;border:1px solid var(--lijn);padding:8px 11px}.side-group a small{display:none}.side-group a b{font-size:.76rem}.side-group+.side-group{margin:0;padding:0;border:0}
  .overview-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .workspace-header{align-items:flex-start;flex-direction:column}
  .workspace-actions{width:100%}.workspace-actions .btn{flex:1;text-align:center}.overview-welcome{align-items:flex-start;flex-direction:column;padding:23px}.overview-score{text-align:left;width:100%}.overview-score>div{width:100%}.primary-task{align-items:flex-start;flex-wrap:wrap}.primary-task .btn{width:100%;text-align:center}.overview-stats{grid-template-columns:1fr 1fr}.overview-panel,.tool-directory{padding:17px}.help-strip{align-items:flex-start;flex-wrap:wrap}.help-strip .btn{width:100%;text-align:center}
  .help-hero{align-items:flex-start;flex-direction:column}.help-question-form>div{grid-template-columns:1fr}.help-question-form button{width:100%}.help-topics{grid-template-columns:1fr}.form-grid,.feature-grid{grid-template-columns:1fr}.wide{grid-column:1}.setting-section{padding:19px}
}

/* ============================== landing ============================== */
.lp-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);padding:5px 14px;border-radius:99px;margin-bottom:18px}
.lp-kicker.midden{display:table;margin:0 auto 18px}
.lp-intro{text-align:center;font-size:1.05rem;color:var(--muted);max-width:42em;margin:14px auto 0}

/* hero */
.hero-lp{padding:80px 0 70px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}.hero-visual{display:none}}
.hero-tekst h1{font-size:clamp(2.3rem,5vw,3.5rem);letter-spacing:-.02em;margin-bottom:22px}
.hero-tekst h1 b{color:var(--accent)}
.hero-tekst>p{font-size:1.15rem;color:var(--muted);max-width:34em;margin-bottom:30px}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.trust{list-style:none;display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:22px}
.trust li{font-size:.86rem;color:var(--muted);font-weight:500}

/* mock browser + phone */
.hero-visual{position:relative;min-height:420px}
.mock-browser{background:#fff;border:1px solid var(--lijn);border-radius:14px;box-shadow:0 30px 60px -30px rgba(16,24,40,.35);overflow:hidden;width:100%;max-width:520px}
.mock-browser.klein{max-width:440px;margin-left:auto}
.mock-bar{display:flex;align-items:center;gap:6px;background:#f2f4f7;border-bottom:1px solid var(--lijn);padding:10px 14px}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#d7dce3}
.mock-bar i:nth-child(1){background:#f97066}.mock-bar i:nth-child(2){background:#fdb022}.mock-bar i:nth-child(3){background:#32d583}
.mock-bar span{margin-left:12px;background:#fff;border:1px solid var(--lijn);border-radius:7px;font-size:.68rem;color:var(--muted);padding:3px 12px;flex:1;text-align:center}
.mock-body{padding:22px 26px 26px;background:#f6f1e8}
.mock-body.warm{background:#f6f1e8}
.mock-nav{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.mock-nav b{font-family:'Sora',sans-serif;font-size:.82rem;color:#2a2118;margin-right:auto}
.mock-nav span{width:34px;height:6px;border-radius:4px;background:#d9cdb8}
.mock-hero{padding:8px 0 22px}
.mock-hero.midden{text-align:center}
.mock-hero.midden .mock-kop,.mock-hero.midden .mock-sub,.mock-hero.midden .mock-knop{margin-inline:auto}
.mock-kop{width:72%;height:18px;border-radius:5px;background:#2a2118;margin-bottom:10px}
.mock-sub{width:52%;height:9px;border-radius:5px;background:#c9bda6;margin-bottom:16px}
.mock-knop{width:110px;height:26px;border-radius:7px;background:#c1922f}
.mock-kaarten{display:flex;gap:12px}
.mock-kaarten i{flex:1;height:64px;border-radius:9px;background:#fdfaf4;border:1px solid #e8dfcd}
.mock-phone{position:absolute;right:-8px;bottom:-26px;width:150px;background:#101828;border-radius:22px;padding:8px;box-shadow:0 26px 50px -24px rgba(16,24,40,.5)}
.mock-phone-scherm{background:#121417;border-radius:16px;padding:20px 14px 24px}
.mp-kop{width:80%;height:11px;border-radius:4px;background:#f2f3f5;margin-bottom:8px}
.mp-sub{width:55%;height:7px;border-radius:4px;background:#565f6b;margin-bottom:14px}
.mp-foto{height:64px;border-radius:8px;background:linear-gradient(135deg,#1b1e23,#2a2f37);margin-bottom:14px}
.mp-knop{width:76px;height:20px;border-radius:6px;background:#d9a441}

/* stats */
.lp-stats{background:var(--ink);color:#fff;padding:34px 0}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-align:center}
.stats-grid b{display:block;font-family:'Sora',sans-serif;font-size:1.9rem}
.stats-grid span{font-size:.82rem;color:#98a2b3}
@media(max-width:820px){.stats-grid{grid-template-columns:repeat(2,1fr)}.stats-grid div:last-child{grid-column:1/-1}}

/* secties algemeen */
.lp-secties{padding:78px 0}
.lp-secties.wit{background:#fff;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.lp-secties.wit+.lp-secties.wit{border-top:none}
.lp-grid{display:grid;gap:20px;margin-top:34px}
.lp-grid.drie{grid-template-columns:repeat(3,1fr)}
.lp-grid.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.lp-grid.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.lp-grid.drie{grid-template-columns:1fr}}
@media(max-width:620px){.lp-grid.vier{grid-template-columns:1fr}}

/* stappen-kaarten */
.kaart.stap{position:relative;padding-top:56px}
.stapnr{position:absolute;top:22px;left:26px;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;font-family:'Sora',sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center}
.kaart.stap h3{font-size:1.05rem;margin-bottom:6px}

/* features */
.kaart.feat .fico{font-size:1.7rem;display:block;margin-bottom:12px}
.kaart.feat h3{font-size:1.05rem;margin-bottom:6px}

/* onderdelen */
.twee-kolom{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
@media(max-width:900px){.twee-kolom{grid-template-columns:1fr;gap:34px}}
.cat-lijst{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.cat-rij{display:flex;gap:12px;align-items:baseline}
.cat-rij .emoji{font-size:1.2rem}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.chips{grid-template-columns:1fr}}
.chip{background:var(--surface);border:1px solid var(--lijn);border-radius:12px;padding:14px 16px}
.chip b{display:block;font-size:.9rem}
.chip span{font-size:.8rem;color:var(--muted)}

/* demo */
.demo-kaart{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:44px}
@media(max-width:900px){.demo-kaart{grid-template-columns:1fr;padding:28px}}

/* vergelijking */
.kaart.verg{position:relative}
.kaart.verg h3{font-size:1.05rem;margin-bottom:6px}
.verg-prijs{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;margin-bottom:14px}
.verg-prijs span{font-size:.85rem;color:var(--muted);font-weight:500}
.kaart.verg ul{list-style:none}
.kaart.verg li{padding:5px 0 5px 26px;position:relative;font-size:.92rem;color:var(--muted)}
.kaart.verg li::before{content:"✓";position:absolute;left:0;color:#12b76a;font-weight:700}
.kaart.verg li.min::before{content:"✕";color:#d92d20}
.kaart.verg li.plus::before{content:"✓";color:#12b76a}
.kaart.verg.uitgelicht{border:2px solid var(--accent);box-shadow:0 20px 50px -25px rgba(36,86,230,.45)}
.kaart.verg.uitgelicht li{color:var(--ink)}
.verg-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.74rem;font-weight:700;padding:4px 16px;border-radius:99px}

/* prijs */
.prijs-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-top:38px;align-items:start}
@media(max-width:900px){.prijs-duo{grid-template-columns:1fr}}
.prijsbox{text-align:center;padding:40px}
.prijs-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.prijsbox .p{font-family:'Sora',sans-serif;font-size:3.2rem;font-weight:800}
.prijsbox .p span{font-size:1rem;color:var(--muted);font-weight:500}
.prijsbox ul{list-style:none;margin:20px 0 28px;color:var(--muted);text-align:left;display:table;margin-inline:auto}
.prijsbox li{padding:5px 0}
.prijs-punten{display:flex;flex-direction:column;gap:14px}
.prijs-punten .kaart{padding:22px 26px}
.prijs-punten h3{font-size:.98rem;margin-bottom:4px}

/* faq */
.lp-faq{margin-top:34px}
.lp-faq details{background:var(--surface);border:1px solid var(--lijn);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.lp-faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;font-weight:700;flex:none}
.lp-faq details[open] summary::after{content:"–"}
.lp-faq details p{margin-top:10px;color:var(--muted);font-size:.95rem}

/* slot-cta */
.slot-cta{background:linear-gradient(135deg,var(--accent),#173db0);border-radius:20px;padding:64px 40px;text-align:center;color:#fff}
.slot-cta h2{font-size:clamp(1.6rem,3.5vw,2.3rem);margin-bottom:12px}
.slot-cta p{color:rgba(255,255,255,.82);max-width:34em;margin:0 auto 28px}
.btn.wit-knop{background:#fff;color:var(--accent)}
.btn.wit-knop:hover{box-shadow:0 8px 22px -8px rgba(0,0,0,.4)}
@media(max-width:700px){.slot-cta{padding:44px 22px}}

/* footer */
footer.voet{background:var(--surface);border-top:1px solid var(--lijn);margin-top:60px;padding:52px 0 30px}
.voet-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){.voet-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.voet-grid{grid-template-columns:1fr}}
.voet-merk p{font-size:.88rem;color:var(--muted);margin-top:12px;max-width:26em}
.voet h4{font-family:'Sora',sans-serif;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
footer.voet a{display:block;text-decoration:none;color:var(--ink);font-size:.9rem;padding:4px 0}
footer.voet a:hover{color:var(--accent)}
footer.voet .logo{display:inline-block}
.voet-onder{border-top:1px solid var(--lijn);margin-top:38px;padding-top:20px;font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
footer.voet .voet-juridisch a{display:inline;padding:0;margin-left:18px;color:var(--muted)}
footer.voet .voet-juridisch a:first-child{margin-left:0}

/* schrijfassistent: de varianten waaruit de eigenaar er één kiest */
.draft-optie{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--lijn);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;cursor:pointer;background:var(--surface)}
.draft-optie:hover{border-color:var(--accent)}
.draft-optie:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.draft-optie input{margin-top:5px;flex:none;accent-color:var(--accent)}
.draft-optie span{white-space:pre-wrap;font-size:1.02rem;line-height:1.5}

/* ------------------------------------------------------------------ *
 * Websiteoverzicht (/dashboard) — één regel per site, live bovenaan.
 * Nieuwe klassen (ov-*), zodat de oude kaartweergave hierboven blijft
 * werken zolang die nog in het draaiende proces zit.
 * ------------------------------------------------------------------ */
.ov{padding:44px 0 80px;min-height:72vh}
.ov-kop{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:26px}
.ov-kop h1{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.03em}
.ov-kop p{color:var(--muted);margin-top:8px;max-width:56ch}
.ov-kop-acties{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.ov-kop-acties form{display:flex}
.ov-trash-link{display:inline-flex;align-items:center;gap:8px}
.ov-trash-link b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--dash-tint-blue);color:var(--accent);font-size:.72rem}
.ov-notice{margin-bottom:16px}

.ov-stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);
  border:1px solid var(--lijn);border-radius:16px;box-shadow:var(--schaduw);margin-bottom:26px}
.ov-stats>div{padding:18px 22px;border-right:1px solid var(--lijn)}
.ov-stats>div:last-child{border-right:0}
.ov-stats span{display:block;color:var(--muted);font-size:.78rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.ov-stats b{display:block;font:700 1.7rem/1.2 'Sora',sans-serif;margin-top:6px;
  font-variant-numeric:tabular-nums}
.ov-stats small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.ov-stats .let-op b{color:var(--accent)}

.ov-balk{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.ov-filters{display:flex;gap:8px;flex-wrap:wrap}
.ov-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--lijn);background:var(--surface);color:var(--muted);
  text-decoration:none;font-size:.87rem;font-weight:600}
.ov-chip b{font-size:.78rem;font-weight:700;color:var(--muted)}
.ov-chip:hover{border-color:var(--ink);color:var(--ink)}
.ov-chip.aan{background:var(--ink);border-color:var(--ink);color:#fff}
.ov-chip.aan b{color:#fff;opacity:.7}
.ov-zoek{display:flex;gap:8px}
.ov-zoek input{width:230px;max-width:44vw;padding:9px 14px;border:1px solid var(--lijn);
  border-radius:10px;background:var(--surface);font:inherit;font-size:.9rem;color:var(--ink)}
.ov-zoek input:focus{outline:2px solid var(--accent);outline-offset:1px}

.ov-lijst{list-style:none;background:var(--surface);border:1px solid var(--lijn);
  border-radius:16px;box-shadow:var(--schaduw)}
.ov-selectbar{display:flex;align-items:center;gap:14px;min-height:54px;padding:9px 12px 9px 16px;
  margin-bottom:10px;background:var(--surface);border:1px solid var(--lijn);border-radius:13px}
.ov-selectbar label{display:flex;align-items:center;gap:9px;margin:0;font-size:.86rem;cursor:pointer}
.ov-selectbar input,.ov-site-check{width:19px;height:19px;accent-color:var(--accent);cursor:pointer}
.ov-selectbar>span{color:var(--muted);font-size:.8rem}
.ov-selectbar form{margin-left:auto}
.ov-selectbar button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.ov-koprij,.ov-rij{display:grid;grid-template-columns:22px minmax(0,2.9fr) .75fr .8fr 1.5fr auto;
  gap:18px;align-items:center;padding:16px 22px}
.ov-koprij{padding-top:13px;padding-bottom:13px;background:#fafbfd;border-bottom:1px solid var(--lijn);
  border-radius:16px 16px 0 0;color:var(--muted);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.ov-rij:last-child{border-radius:0 0 16px 16px}
.ov-rij+.ov-rij{border-top:1px solid var(--lijn)}
.ov-rij:hover{background:#fafbfd}
.ov-rij:has(.ov-site-check:checked){background:var(--dash-tint-blue);box-shadow:inset 3px 0 var(--accent)}
.ov-selectcell{display:grid;place-items:center;align-self:stretch}

.ov-naam{display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none;color:inherit}
.ov-hero{position:relative;display:block;flex:none;width:176px;height:110px;overflow:hidden;
  border:1px solid var(--lijn);border-radius:10px;background:var(--product-raised)}
.ov-hero-fallback{position:absolute;inset:0;display:grid;place-items:center;
  align-content:center;justify-items:start;gap:4px;padding:12px 14px;
  z-index:0;font-family:'Sora',sans-serif}
.ov-hero-fallback small{font-size:.56rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.ov-hero-fallback b{max-width:100%;font-size:.9rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-hero-fallback i{position:absolute;inset:auto 0 0;height:9px}
/* De preview gebruikt een vaste interne desktopbreedte. Zo herkent de klant
   de hero van zijn site en niet een toevallige mobiele variant. */
.ov-hero iframe{position:absolute;inset:0;z-index:1;width:800px;height:500px;border:0;
  transform:scale(.22);transform-origin:0 0;pointer-events:none;background:transparent}
.ov-naam:focus-visible .ov-hero{outline:3px solid var(--accent);outline-offset:3px}
.ov-vlag{flex:none;position:relative;width:52px;height:40px;border-radius:9px;overflow:hidden;
  border:1px solid var(--lijn);display:grid;place-items:center;
  font:700 1rem 'Sora',sans-serif;line-height:1}
.ov-vlag i{position:absolute;left:0;right:0;bottom:0;height:7px}
.ov-naam-tekst{min-width:0}
.ov-naam-tekst b{display:flex;align-items:center;gap:9px;font-size:1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-naam-tekst .status{flex:none;font-size:.7rem;padding:3px 9px}
.ov-naam-tekst small{display:block;color:var(--muted);font-size:.8rem;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-naam:hover .ov-naam-tekst b{color:var(--accent)}

.ov-cijfer b{display:block;font:700 1.15rem/1.2 'Sora',sans-serif;font-variant-numeric:tabular-nums}
.ov-cijfer small{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}
.ov-nieuw{display:inline-block;margin-top:3px;padding:2px 9px;border-radius:99px;
  background:#eef3ff;color:var(--accent);font-size:.74rem;font-weight:700;text-decoration:none}
.ov-nieuw:hover{background:var(--accent);color:#fff}

.ov-klaar{min-width:0}
.ov-klaar b{font-size:.86rem;font-variant-numeric:tabular-nums}
.ov-balkje{display:block;height:6px;border-radius:99px;background:#eef1f6;overflow:hidden;margin-bottom:6px}
.ov-balkje i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.ov-klaar small{color:var(--muted);font-size:.76rem}
.ov-volgende{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--muted);font-size:.76rem;text-decoration:none;line-height:1.35}
.ov-volgende:hover{color:var(--accent);text-decoration:underline}

.ov-acties{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.ov-menu{position:relative}
.ov-menu summary{list-style:none;cursor:pointer;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--lijn);display:grid;place-items:center;color:var(--muted);
  font-size:.8rem;letter-spacing:.05em;background:var(--surface)}
.ov-menu summary::-webkit-details-marker{display:none}
.ov-menu summary:hover{border-color:var(--ink);color:var(--ink)}
.ov-menu[open] summary{border-color:var(--ink);color:var(--ink)}
.ov-menu-blad{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:232px;
  background:var(--surface);border:1px solid var(--lijn);border-radius:12px;
  box-shadow:0 18px 40px -20px rgba(16,24,40,.45);padding:6px}
.ov-menu-blad a,.ov-verwijder{display:block;width:100%;text-align:left;padding:9px 12px;
  border-radius:8px;text-decoration:none;color:var(--ink);font-size:.88rem;
  background:none;border:0;font:inherit;font-size:.88rem;cursor:pointer}
.ov-menu-blad a:hover{background:#f2f5fa}
.ov-menu-blad form{border-top:1px solid var(--lijn);margin-top:6px;padding-top:6px}
.ov-verwijder{color:#b42318}
.ov-verwijder:hover{background:#fef3f2}

.ov-leeg{text-align:center;background:var(--surface);border:1px solid var(--lijn);
  border-radius:18px;padding:46px 24px}
.ov-leeg.groot{padding:70px 24px}
.ov-leeg>span{display:grid;place-items:center;width:66px;height:66px;border-radius:19px;
  background:#edf3ff;color:var(--accent);margin:0 auto 16px}
.ov-leeg p{color:var(--muted);margin:8px auto 20px;max-width:46ch}
.ov-leeg-knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Herstelbare verwijdering: bewust eenvoudiger dan het actieve dashboard. */
.trash-page{padding:44px 0 64px}
.trash-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}
.trash-head h1{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.03em}
.trash-head p{color:var(--muted);margin-top:8px}
.trash-list{list-style:none;display:grid;gap:10px}
.trash-list>li{display:grid;grid-template-columns:144px minmax(0,1fr) auto minmax(280px,auto);
  align-items:center;gap:16px;padding:17px 18px;background:var(--surface);border:1px solid var(--lijn);
  border-radius:14px;box-shadow:var(--schaduw)}
.trash-preview{position:relative;width:144px;height:82px;display:grid;align-content:center;
  justify-items:start;gap:3px;overflow:hidden;padding:11px 13px;border:1px solid var(--lijn);
  border-radius:10px;font-family:'Sora',sans-serif}
.trash-preview small{font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.trash-preview b{max-width:100%;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-preview i{position:absolute;inset:auto 0 0;height:8px}
.trash-copy{display:grid;min-width:0}
.trash-copy>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-copy small{color:var(--muted);font-size:.76rem}
.trash-state{padding:4px 10px;border-radius:999px;background:var(--fout-vlak);color:var(--fout);
  font-size:.72rem;font-weight:700}
.trash-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.trash-actions form{display:flex}
.trash-blocked{max-width:220px;color:var(--let);font-size:.72rem;line-height:1.35}

/* Groter overzicht (26-09): bredere lijst, grotere previews en tekst. */
.ov .wrap{max-width:1320px}
.ov-koprij,.ov-rij{grid-template-columns:22px minmax(0,3.6fr) .7fr .75fr 1.3fr auto;gap:24px;padding:22px 28px}
.ov-koprij{padding-top:15px;padding-bottom:15px;font-size:.78rem}
.ov-naam{gap:22px}
.ov-hero{width:256px;height:160px;border-radius:12px}
.ov-hero iframe{transform:scale(.32)}
.ov-hero-fallback b{font-size:1.1rem}
.ov-naam-tekst b{font-size:1.2rem}
.ov-naam-tekst .status{font-size:.76rem}
.ov-naam-tekst small{font-size:.9rem;margin-top:5px}
.ov-cijfer b{font-size:1.45rem}
.ov-cijfer small{font-size:.84rem}
.ov-klaar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.ov-klaar>:not(.ov-balkje):not(b){grid-column:1/-1}
.ov-klaar b{font:700 1rem/1 'Sora',sans-serif;min-width:3.2ch;text-align:right}
.ov-balkje{height:10px;margin:0;box-shadow:inset 0 1px 2px rgba(15,23,42,.08)}
.ov-balkje i{min-width:10px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff));
  box-shadow:0 1px 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.ov-klaar.af .ov-balkje i{background:var(--ok);box-shadow:none}
.ov-klaar.af b{color:var(--ok)}
.ov-selectbar input,.ov-site-check{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;
  border:1.5px solid color-mix(in srgb,var(--muted) 70%,transparent);border-radius:7px;background:var(--surface);
  display:grid;place-items:center;transition:background .15s,border-color .15s,box-shadow .15s}
.ov-selectbar input:hover,.ov-site-check:hover{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.ov-selectbar input:is(:checked,:indeterminate),.ov-site-check:checked{background:var(--accent);border-color:var(--accent)}
.ov-selectbar input:checked::after,.ov-site-check:checked::after{content:"";width:6px;height:11px;margin-top:-2px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ov-selectbar input:indeterminate::after{content:"";width:10px;height:2.5px;border-radius:2px;background:#fff}
.ov-selectbar label{font-weight:600}
.ov-klaar small,.ov-volgende{font-size:.84rem}

/* Grote preview tegen de linkerrand (30-09): de homepage vult de hele
   rijhoogte, het selectievakje staat linksboven op de preview. */
@media(min-width:901px){
  .ov-koprij,.ov-rij{grid-template-columns:minmax(0,4.2fr) .7fr .75fr 1.3fr auto}
  .ov-koprij>span:first-child{display:none}
  .ov-rij{position:relative;padding:0 28px 0 0}
  .ov-selectcell{position:absolute;left:14px;top:14px;z-index:2}
  .ov-site-check{box-shadow:0 1px 4px rgba(15,23,42,.25)}
  /* vinkje valt over het logo van de preview: pas tonen bij aanwijzen */
  @media(hover:hover){
    .ov-selectcell{opacity:0;transition:opacity .15s}
    .ov-rij:is(:hover,:focus-within) .ov-selectcell,.ov-selectcell:has(:checked),
    .ov-lijst:has(.ov-site-check:checked) .ov-selectcell{opacity:1}
  }
  .ov-naam{gap:28px}
  .ov-hero{width:480px;height:300px;border:0;border-right:1px solid var(--lijn);border-radius:0}
  .ov-hero iframe{transform:scale(.6)}
  .ov-hero-fallback{padding:20px 24px}
  .ov-hero-fallback b{font-size:1.35rem}
  /* lijst loopt aan beide kanten door tot de schermrand; clip vangt de
     scrollbalkbreedte op die in 100vw zit */
  .ov{overflow-x:clip}
  .ov-lijst{margin:0 calc(50% - 50vw);border:0;border-radius:0;background:none;box-shadow:none;
    display:grid;gap:14px}
  /* elke site een eigen band met een strookje achtergrond ertussen */
  .ov-koprij,.ov-rij{border-radius:0;border-block:1px solid var(--lijn)}
  .ov-rij{background:var(--surface)}
  .ov-rij+.ov-rij{border-top:1px solid var(--lijn)}
}

@media(max-width:900px){
  .ov-koprij{display:none}
  .ov-rij{grid-template-columns:22px 1fr 1fr;gap:14px 18px;padding:18px}
  .ov-selectcell{grid-column:1;grid-row:1}
  .ov-naam{grid-column:2/-1}
  .ov-rij>.ov-cijfer:nth-child(3){grid-column:2}
  .ov-rij>.ov-cijfer:nth-child(4){grid-column:3}
  .ov-klaar{grid-column:2/-1}
  .ov-acties{grid-column:2/-1;justify-content:flex-start}
  .ov-cijfer:before{content:attr(data-kop);display:block;color:var(--muted);font-size:.7rem;
    font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
  .ov-stats{grid-template-columns:repeat(2,1fr)}
  .ov-stats>div:nth-child(2){border-right:0}
  .ov-stats>div:nth-child(-n+2){border-bottom:1px solid var(--lijn)}
  .trash-list>li{grid-template-columns:144px 1fr auto}
  .trash-actions{grid-column:2/-1;justify-content:flex-start}
}
@media(max-width:620px){
  body.dash .topnav .navr>a{white-space:nowrap}
  .ov{padding-top:26px}
  /* op een telefoon liever twee regels dan een adres dat halverwege ophoudt */
  .ov-naam-tekst small{white-space:normal}
  .ov-hero{width:132px;height:83px}
  .ov-hero iframe{transform:scale(.165)}
  .ov-naam-tekst b{display:grid;justify-items:start;gap:4px;overflow:visible;white-space:normal}
  .ov-kop{flex-direction:column;align-items:stretch}
  .ov-kop-acties{display:grid;grid-template-columns:1fr 1fr}
  .ov-kop-acties form,.ov-kop-acties button,.ov-kop-acties>a{width:100%;text-align:center;justify-content:center}
  .ov-selectbar{align-items:stretch;flex-wrap:wrap}
  .ov-selectbar form{width:100%;margin:0}
  .ov-selectbar button{width:100%}
  .ov-balk{flex-direction:column;align-items:stretch}
  .ov-zoek input{width:100%;max-width:none}
  .ov-acties .btn{flex:1;text-align:center}
  .ov-menu-blad{width:min(260px,78vw)}
  .trash-page{padding-top:26px}
  .trash-head{align-items:stretch;flex-direction:column}
  .trash-head>.btn{text-align:center}
  .trash-list>li{grid-template-columns:112px 1fr;gap:12px;padding:15px}
  .trash-preview{width:112px;height:70px;padding:9px 10px}
  .trash-state{grid-column:2;justify-self:start}
  .trash-actions{grid-column:1/-1}
  .trash-actions form,.trash-actions .btn{width:100%}
  .trash-blocked{max-width:none}
}
@media(max-width:380px){
  body.dash .topnav .navr>a.btn[href="/dashboard"]{display:none}
  .ov-naam{gap:12px}
  .ov-hero{width:112px;height:70px}
  .ov-hero iframe{transform:scale(.14)}
}

/* ---- verder op dit scherm (25-08) --------------------------------------
   Het zijmenu ging van 22 naar 11 items. De schermen die eruit gingen zijn
   niet weg: ze staan onderaan de pagina waar ze bij horen. Zonder deze rij
   is er geen weg meer naartoe. Staat in app.css en niet in dashboard.css,
   want twee van de zes gastheren zijn wizardstappen en die laden alleen
   deze bestandsnaam. */
.verder{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s3);margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--lijn)}
.verder a{display:grid;gap:2px;padding:var(--s3) var(--s4);background:#fff;
  border:1px solid var(--lijn);border-radius:var(--r-s);text-decoration:none;
  color:var(--ink);font-size:var(--t2);font-weight:600}
.verder a:hover{border-color:var(--rand)}
.verder small{font-size:var(--t1);color:var(--muted);font-weight:400;line-height:1.4}

/* Selected direction B: dark Sitevlot chrome. Generated website previews keep
   their own palettes inside isolated iframes. */
.voet{background:#090b0f;border-top-color:var(--lijn)}
.voet h4,.voet a,.voet-onder{color:var(--muted)}
.voet a:hover{color:var(--ink)}
.navacc-bol{background:var(--product-raised);border:1px solid var(--lijn)}
.btn.stil,.btn.rood{background:var(--product-raised)}
.btn.rood{border-color:#643234;color:var(--fout)}
.fout{background:var(--fout-vlak);border-color:#643234;color:var(--fout)}
.ok,.notice{background:var(--ok-vlak);border-color:#24583c;color:var(--ok)}
.warning{background:var(--let-vlak);color:var(--let)}
.kaart,.empty-dashboard,.paneel,.overview-panel,.tool-directory,.primary-task,
.overview-stats a,.tool-groups article,.help-strip,.help-question-form,.bot-answer,
.suggested-help,.help-topics>a,.feature-hero,.dashboard-list-card,.command-grid>a,
.notice-row,.activity-timeline,.dashboard-form,.task-list,.domain-card,
.check-grid article,.range-links,.funnel-visual,.integration-grid article,
.message-list article,.savebar,.verder a{background:var(--surface);border-color:var(--lijn)}
.workspace-sidebar,.workspace-sidebar nav{scrollbar-color:#4a5361 transparent}
.side-group a:hover,.side-group a.actief{background:var(--product-raised);color:var(--ink)}
.side-group a.actief{border-left-color:var(--accent)}
.overview-welcome{background:linear-gradient(135deg,#111722,#18254a)}
.help-hero{background:linear-gradient(135deg,#121a31,#1b1830);border-color:#2c3c67}
.question-chips button,.range-links,.task-list article form:first-child button{
  background:var(--product-raised);border-color:var(--lijn);color:var(--muted)
}
.question-chips button:hover{background:#1b2851;border-color:#496ecf;color:var(--ink)}

/* Dark-dashboard safety net. The older dashboard declarations above still
   contain light-theme colours. Keep every platform surface calm and dark;
   customer website previews stay isolated in their iframe. */
body.dash .btn:not(.stil):not(.rood),
body.dash :is(.navacc-bol,.acc-bol),
body.dash .funnel-visual>div{color:var(--accent-ink)}
body.dash :is(.status.draft,.acc-pil){
  background:var(--dash-tint);color:var(--muted);border-color:var(--lijn)
}
body.dash :is(.status.live,.acc-pil.live){
  background:var(--ok-vlak);color:var(--ok);border-color:#24583c
}
body.dash :is(.ov-koprij){background:#10131a}
body.dash :is(.ov-rij:hover,.ov-menu-blad a:hover){background:var(--dash-hover)}
body.dash .ov-rij:has(.ov-site-check:checked){background:var(--dash-tint-blue)}
body.dash .ov-verwijder:hover{background:var(--fout-vlak);color:var(--fout)}
body.dash :is(.ov-balkje,.vg-balk){background:#252c37}
body.dash :is(.ov-nieuw,.ov-leeg>span,.empty-dashboard>span,
  .panel-heading>span,.checklist-list a>i,.task-icon,.avatar-letter,
  .tool-icon.blue,.tool-icon.green,.tool-icon.purple,.help-strip>span,
  .bot-avatar){background:var(--dash-tint-blue)}
body.dash .ov-vlag{
  background:var(--dash-tint)!important;color:var(--muted)!important
}
body.dash :is(.checklist-list a,.recent-list a){border-color:var(--lijn)}
body.dash :is(.overview-welcome,.funnel-visual>div){color:var(--ink)}
body.dash .bot-answer p{color:var(--muted)}
.auth-shell{max-width:440px;padding-top:70px;padding-bottom:60px}
.auth-title{margin-bottom:6px}
@media(max-width:640px){.auth-shell{padding-top:34px;padding-bottom:40px}}