/* ════════════════════════════════════════════════════════════
   InFrame — Merkrichtlijnen 2026
   Deep Royal en Vivid Cyan zijn de basis. Electric Yellow is het
   accent. Charcoal en Bone White geven rust.
   ════════════════════════════════════════════════════════════ */
:root{
  /* ── Basiskleuren ───────────────────────────────────── */
  --royal:#103590;          /* Deep Royal  · RGB 16 53 144   */
  --cyan:#00AEEF;           /* Vivid Cyan  · RGB 0 174 239   */
  --yellow:#FFE600;         /* Electric Yellow · RGB 255 230 0 */
  --charcoal:#1A1D23;       /* Charcoal    · RGB 26 29 35    */
  --bone:#F7F5F2;           /* Bone White  · RGB 247 245 242 */
  --mid:#0A63B4;            /* middenkleur van het kleurverloop */

  /* ── Tinten Deep Royal (over wit) ───────────────────── */
  --royal-80:#405CA6;--royal-60:#708CBC;--royal-40:#9FADD3;--royal-20:#CFD6E9;
  --royal-wash:#EDF1F9;     /* lichtste vlak, voor subtiele blokken */
  /* ── Tinten Vivid Cyan ──────────────────────────────── */
  --cyan-80:#33BEF1;--cyan-60:#66CEF5;--cyan-40:#99DFF8;--cyan-20:#CCEFFC;
  /* ── Tinten Electric Yellow ─────────────────────────── */
  --yellow-80:#FFEB33;--yellow-60:#FFF066;--yellow-40:#FFF599;--yellow-20:#FFFACC;
  /* ── Bone White wordt donkerder: vlak, lijn, rand ───── */
  --bone-vlak:#EFECE7;--bone-lijn:#DCD9D2;--bone-rand:#B9B3A7;

  /* ── Kleurverloop · altijd drie stops ───────────────── */
  --gradient:linear-gradient(45deg,#103590 0%,#0A63B4 50%,#00AEEF 100%);        /* Basis      */
  --gradient-h:linear-gradient(90deg,#103590 0%,#0A63B4 50%,#00AEEF 100%);      /* Horizontaal */
  --gradient-v:linear-gradient(0deg,#103590 0%,#0A63B4 60%,#00AEEF 115%);       /* Social      */

  /* ── Rollen in de interface ─────────────────────────── */
  --blue:#103590;           /* hoofdkleur voor interactie   */
  --blue-light:#EDF1F9;
  --black:#1A1D23;
  --dark:#103590;           /* dragende vlakken, zijbalk    */
  --white:#ffffff;
  --off:#F7F5F2;
  --muted:#5F6165;
  --border:#DCD9D2;

  /* ── Status ─────────────────────────────────────────── */
  --success:#13703A;--success-bg:#E8F3EC;
  --warning:#8A5A00;--warning-bg:#FFF6E0;
  --danger:#B0121C;--danger-bg:#FCEEEF;

  /* ── Vorm ───────────────────────────────────────────────
     De kadervorm komt uit het logo: afgerond rechtsboven en
     linksonder, recht op de andere twee hoeken.            */
  --r:12px;--rsm:8px;
  /* De overgang die de website gebruikt voor de hero. */
  --soepel:cubic-bezier(.23,1,.32,1);
  --kader:0 16px 0 16px;
  --kader-sm:0 10px 0 10px;
  --kader-xs:0 7px 0 7px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Montserrat',sans-serif;background:var(--off);color:var(--black);font-size:14px;line-height:1.6;}
button,input,select,textarea{font-family:'Montserrat',sans-serif;}
.screen{display:none;width:100%;height:100%;}
.screen.active{display:flex;}

/* ADMIN SHELL */
#s-admin{flex-direction:row;overflow:hidden;width:100%;height:100%;}
#s-admin.active{display:flex!important;}
/* De zijbalk draagt het merk: Deep Royal met het rasterpatroon van het
   icoon erachter, toon op toon. Wit en Vivid Cyan erop, geel als accent. */
.sidebar{width:250px;min-width:250px;height:100vh;background:var(--royal);display:flex;flex-direction:column;padding:1.5rem 0;overflow-y:auto;overflow-x:hidden;flex-shrink:0;scrollbar-width:none;position:relative;}.sidebar::-webkit-scrollbar{display:none;}
.sb-logo{display:flex;align-items:center;gap:10px;padding:0 1.25rem 1.75rem;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:1.5rem;position:relative;}
/* Het gele lint onder het logo, zoals op de website. */
.sb-logo::after{content:'';position:absolute;left:1.25rem;right:1.25rem;bottom:-1px;height:2px;background:var(--yellow);}
.sb-lmark{width:30px;height:30px;background:#fff;border-radius:24%;display:flex;align-items:center;justify-content:center;}
.sb-lmark span{color:var(--royal);font-size:10px;font-weight:900;font-style:italic;}
.sb-lname{font-size:13px;font-weight:800;color:#fff;letter-spacing:.01em;}
.sb-ltag{font-size:10px;color:rgba(255,255,255,.45);margin-left:auto;}
.sb-sec{padding:0 .875rem;margin-bottom:1.25rem;position:relative;}
.sb-lbl{font-size:10px;color:rgba(255,255,255,.42);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:0 .375rem;margin-bottom:4px;}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--kader-xs);cursor:pointer;font-size:12px;font-weight:600;color:rgba(255,255,255,.6);transition:background .15s,color .15s;margin-bottom:1px;letter-spacing:.02em;outline:none;}
.sb-item:hover{background:rgba(255,255,255,.1);color:#fff;}
.sb-item:focus{outline:none;background:rgba(255,255,255,.1);color:#fff;}
.sb-item.active{background:rgba(0,174,239,.26);color:#fff;box-shadow:inset 2px 0 0 var(--yellow);}
.sb-item.active:hover{background:rgba(0,174,239,.34);color:#fff;}
.sb-item.active:focus{background:rgba(0,174,239,.26);color:#fff;outline:none;}
.sb-item svg{opacity:.6;flex-shrink:0;width:16px;height:16px;}
.sb-item.active svg{opacity:1;}
.sb-badge{margin-left:auto;font-size:10px;background:rgba(255,255,255,.16);color:rgba(255,255,255,.75);padding:2px 7px;border-radius:var(--kader);font-weight:700;}
.sb-badge.blue{background:rgba(0,174,239,.35);color:#CCEFFC;}
.sb-badge.orange{background:var(--yellow);color:var(--charcoal);}
.sb-bottom{margin-top:auto;padding:0 .875rem;position:relative;}
/* Startpagina staat los bovenaan, Beheer los onderaan bij je naam */
.sb-sec-start{margin-bottom:1rem;}
.sb-bottom .sb-sec-onder{padding:0;margin:0 0 .75rem;}
.sb-user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--kader-sm);border:1px solid rgba(255,255,255,.18);}
.sb-av{width:30px;height:30px;border-radius:50%;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--charcoal);flex-shrink:0;}
.sb-uname{font-size:12px;color:rgba(255,255,255,.75);font-weight:700;}
.sb-urole{font-size:10px;color:rgba(255,255,255,.3);}
.sb-out{margin-left:auto;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.25);padding:4px;transition:color .15s;}
.sb-out:hover{color:rgba(255,255,255,.7);}

/* MAIN */
.admin-main{flex:1;min-width:0;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);height:100vh;overflow:hidden;position:relative;}
/* Elke pagina heeft zijn eigen titel, en op tablet en telefoon zit het
   menu achter de zwevende knop. De oude balk bovenaan blijft dus weg; hij
   stond op grote schermen als losse kolom tussen het menu en de pagina.
   De pagina vult de hele hoogte. */
#main-topbar{display:none!important;}
.admin-main{grid-template-rows:minmax(0,1fr)!important;}
.topbar-big{background:var(--white);border-bottom:1px solid var(--border);padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between;}
.topbar-big h1{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;}
.topbar-big p{font-size:12px;color:var(--muted);margin-top:3px;}
.topbar-right{display:flex;gap:8px;align-items:center;}
.apage{display:none;overflow-y:scroll;padding:1.5rem 2rem 3rem;flex-direction:column;gap:1.25rem;min-width:0;width:100%;box-sizing:border-box;}
.apage.active{display:flex;}
/* Scrollbar altijd aan de rechterkant, smal en subtiel */
.apage::-webkit-scrollbar{width:5px;}
.apage::-webkit-scrollbar-track{background:transparent;}
.apage::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--kader-xs);}
.apage::-webkit-scrollbar-thumb:hover{background:#DCD9D2;}
.portal-body::-webkit-scrollbar{width:5px;}
.portal-body::-webkit-scrollbar-track{background:transparent;}
.portal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--kader-xs);}
.portal-body::-webkit-scrollbar-thumb:hover{background:#DCD9D2;}

/* DASHBOARD GRID */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.dash-widget{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;position:relative;transition:box-shadow .15s;}
.dash-widget.col-12{grid-column:span 2;}
.dash-widget.col-8{grid-column:span 2;}
.dash-widget.col-6{grid-column:span 1;}
.dash-widget.col-4{grid-column:span 1;}
.dash-widget.col-3{grid-column:span 1;}
.dash-widget.dragging{opacity:.55;box-shadow:0 8px 32px rgba(0,0,0,.18);}
.dash-widget.drag-over{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,174,239,.3);}
.dash-widget-inner{padding:1.25rem 1.5rem;}
.dash-drag-handle{cursor:grab;color:var(--muted);font-size:12px;padding:2px 4px;opacity:0;transition:opacity .15s;display:inline-block;}
.dash-widget:hover .dash-drag-handle{opacity:1;}
.dash-widget-hidden{display:none!important;}
/* DOCUMENT EDITOR */
.doc-editor-wrap{background:var(--white);}
.doc-toolbar{display:flex;gap:2px;padding:8px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;background:var(--off);}
.doc-tb-btn{padding:4px 8px;background:none;border:none;border-radius:var(--kader-xs);cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);transition:all .15s;line-height:1.4;font-family:'Montserrat',sans-serif;}
.doc-tb-btn:hover{background:var(--border);color:var(--black);}
.doc-tb-sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0;}
.doc-content{min-height:420px;max-height:70vh;overflow-y:auto;padding:1.75rem 2.5rem;outline:none;font-size:14px;line-height:1.8;}
.doc-content:focus{outline:none;}
.doc-content h1{font-size:26px;font-weight:700;margin-bottom:.75rem;letter-spacing:-.02em;line-height:1.2;}
.doc-content h2{font-size:19px;font-weight:700;margin-bottom:.5rem;margin-top:1.5rem;letter-spacing:-.01em;}
.doc-content h3{font-size:15px;font-weight:700;margin-bottom:.4rem;margin-top:1rem;}
.doc-content p{margin-bottom:.75rem;}
.doc-content ul,.doc-content ol{padding-left:1.5rem;margin-bottom:.75rem;}
.doc-content li{margin-bottom:.25rem;}
.doc-content table{width:100%;border-collapse:collapse;margin:1rem 0;}
.doc-content table td,.doc-content table th{border:1px solid var(--border);padding:8px 12px;font-size:13px;min-width:60px;}
.doc-content table th{background:var(--off);font-weight:700;}
.doc-content img{max-width:100%;border-radius:var(--kader-sm);margin:.5rem 0;display:block;}
.doc-content blockquote{border-left:3px solid var(--blue);padding:.5rem 1rem;color:var(--muted);margin:.75rem 0;font-style:italic;background:rgba(0,174,239,.06);border-radius:0 8px 0 0;}
.doc-title-inp{width:100%;border:none;border-bottom:2px solid var(--border);outline:none;font-size:20px;font-weight:700;font-family:'Montserrat',sans-serif;background:transparent;color:var(--black);padding:4px 0 8px;margin-bottom:12px;transition:border-color .15s;}
.doc-title-inp:focus{border-bottom-color:var(--blue);}
.doc-list-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;}
.doc-list-item:last-child{border-bottom:none;}
.doc-list-item:hover{background:var(--off);}
/* NOTES TAB */
#ap-documenten.editing{padding:0!important;gap:0!important;overflow:hidden!important;}
/* Doc-editor overlay neemt grid-row 2, topbar blijft in grid-row 1 */
.doc-editor-overlay{grid-row:2;display:flex;flex-direction:column;background:var(--off);overflow:hidden;}
@media(max-width:640px){
  /* Op mobiel: editor scrollbaar, topbar (met hamburger) blijft boven */
  .doc-editor-overlay{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .doc-content{padding:24px 16px;min-height:400px;}
}
/* Doc editor fills full admin-main content area */
.doc-editor-overlay{grid-row:2;display:flex;flex-direction:column;background:var(--off);overflow:hidden;}
.note-item{background:var(--off);border:1px solid var(--border);border-radius:var(--kader-sm);padding:12px 14px;margin-bottom:8px;position:relative;}
.note-item.pinned{background:var(--warning-bg);border-color:rgba(122,74,0,.2);}
.note-item-meta{font-size:10px;color:var(--muted);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.note-item-text{font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
/* CARDS */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:1.25rem 1.5rem;}
.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;}
.card-title{font-size:13px;font-weight:700;letter-spacing:-.01em;}

/* METRICS */
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.mgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.mcard{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:1.1rem 1.25rem;}
.mcard-lbl{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.mcard-val{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.mcard-delta{font-size:11px;margin-top:5px;font-weight:600;}
.dup{color:var(--success);}.dwarn{color:var(--warning);}

/* KNOPPEN · altijd in de kadervorm
   Hoofdknop geel met Charcoal tekst, tweede knop wit omlijnd.
   Deep Royal draagt de gewone acties. Geel blijft accent: één per scherm. */
.btn-blue{padding:8px 16px;background:var(--royal);color:#fff;border:none;border-radius:var(--kader-sm);font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.03em;transition:background .15s,box-shadow .15s;}
.btn-blue:hover{background:var(--mid);}
.btn-blue:active{background:#0C2A73;}
.btn-geel{padding:8px 18px;background:var(--yellow);color:var(--charcoal);border:none;border-radius:var(--kader-sm);font-size:12px;font-weight:800;cursor:pointer;letter-spacing:.02em;transition:background .15s;}
.btn-geel:hover{background:var(--yellow-80);}
.btn-ghost{padding:8px 14px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:12px;font-weight:600;cursor:pointer;color:var(--black);transition:border-color .15s,color .15s;}
.btn-ghost:hover{border-color:var(--royal);color:var(--royal);}
.btn-smb{padding:5px 10px;background:none;border:none;font-size:11px;font-weight:700;color:var(--blue);cursor:pointer;border-radius:var(--kader-xs);transition:all .15s;}
.btn-smb:hover{background:var(--blue-light);}
.btn-smr{padding:5px 10px;background:none;border:none;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;border-radius:var(--kader-xs);transition:all .15s;}
.btn-smr:hover{background:var(--danger-bg);color:var(--danger);}
.btn-back{display:flex;align-items:center;gap:6px;background:none;border:none;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;padding:0;margin-bottom:.25rem;transition:color .15s;}
.btn-back:hover{color:var(--black);}

/* TABLE */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{text-align:left;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;padding:14px 14px 10px;border-bottom:1px solid var(--border);}
.tbl th.stat-sort-th:hover,.tbl th[onclick]:hover{color:var(--blue);background:var(--off);}
.sth-arrow{color:var(--blue);font-size:9px;margin-left:2px;}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover td{background:var(--off);}

/* PILLS */
.pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--kader);white-space:nowrap;letter-spacing:.03em;display:inline-block;}
.p-active{background:var(--success-bg);color:var(--success);}
.p-review{background:var(--warning-bg);color:var(--warning);}
.p-pending{background:#EFECE7;color:var(--muted);}
.p-approved{background:var(--success-bg);color:var(--success);}
.p-changes{background:var(--danger-bg);color:var(--danger);}
.p-new{background:rgba(0,174,239,.12);color:var(--blue);}
.p-awaiting{background:var(--warning-bg);color:var(--warning);}
.p-link{background:#EFECE7;color:var(--muted);}

/* PROGRESS */
.prog{display:inline-flex;align-items:center;gap:8px;}
.prog-track{width:72px;height:5px;background:var(--border);border-radius:var(--kader-xs);overflow:hidden;}
.prog-fill{height:100%;background:var(--gradient);border-radius:var(--kader-xs);}
.prog-pct{font-size:11px;color:var(--muted);font-weight:600;}

/* TOGGLE */
.toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
/* De aan-uitschakelaars blijven helemaal afgerond: een pil met een rond knopje. */
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:999px;cursor:pointer;transition:background .2s;}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;}
.toggle input:checked+.toggle-slider{background:var(--gradient);}
.toggle input:checked+.toggle-slider:before{transform:translateX(16px);}
.widget-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.widget-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--kader-sm);transition:border-color .15s;}
.widget-item.on{border-color:var(--blue);background:rgba(0,174,239,.08);}
.stat-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);}
.stat-toggle-row:last-child{border-bottom:none;}
.section-div{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding:4px 0 8px;border-bottom:1px solid var(--border);margin-bottom:12px;margin-top:4px;}

/* CLIENT GRID */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.client-block{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:1.25rem;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,box-shadow .2s;}
.client-block:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(16,53,144,.07);}
.cb-btns{display:flex;gap:6px;}
.cb-portal{flex:1;padding:9px;background:var(--gradient);color:#fff;border:none;border-radius:var(--kader-sm);font-size:11px;font-weight:700;cursor:pointer;transition:opacity .15s;letter-spacing:.02em;}
.cb-portal:hover{opacity:.88;}
.cb-icon{width:34px;height:34px;background:none;border:1.5px solid var(--border);border-radius:var(--kader-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.cb-icon:hover{border-color:var(--blue);background:var(--blue-light);}
.cb-icon svg{width:14px;height:14px;stroke:var(--muted);}
.cb-icon:hover svg{stroke:var(--blue);}

/* TODO */
.phase-section{margin-bottom:1.25rem;}
.phase-header{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding-bottom:6px;border-bottom:1.5px solid var(--border);}
.phase-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.phase-title{font-size:12px;font-weight:700;letter-spacing:.03em;}
.phase-count{font-size:10px;font-weight:700;background:var(--off);color:var(--muted);padding:2px 7px;border-radius:var(--kader);}
.todo-item{display:flex;align-items:flex-start;gap:8px;padding:5px 8px;border-radius:var(--kader-sm);transition:background .1s;margin-bottom:1px;}
.todo-item:hover{background:var(--off);}
.todo-body{flex:1;min-width:0;}
.todo-text{font-size:12px;font-weight:600;line-height:1.35;}
.todo-text.done{text-decoration:line-through;color:var(--muted);}
.todo-tags{display:flex;gap:4px;margin-top:2px;flex-wrap:wrap;align-items:center;}
.todo-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--kader);background:var(--off);color:var(--muted);}
.todo-tag.client{background:var(--blue-light);color:var(--blue);}
.assignee-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px 2px 3px;border-radius:var(--kader);background:var(--off);}
.assignee-dot{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;}
.todo-actions{display:flex;gap:4px;flex-shrink:0;align-items:center;}
.phase-sel{padding:4px 8px;border:1px solid var(--border);border-radius:var(--kader-xs);font-size:10px;font-weight:600;cursor:pointer;background:var(--white);outline:none;color:var(--black);}
.todo-del{padding:3px 7px;background:none;border:none;font-size:11px;color:var(--muted);cursor:pointer;border-radius:var(--kader-xs);transition:all .15s;}
.todo-del:hover{background:var(--danger-bg);color:var(--danger);}
.todo-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-top:6px;padding:8px 10px;background:var(--off);border-radius:var(--kader-sm);border-left:2.5px solid var(--border);display:none;}
.todo-item.expanded .todo-desc{display:block;}
.todo-expand-btn{background:none;border:none;cursor:pointer;padding:2px 5px;color:var(--muted);font-size:10px;border-radius:var(--kader-xs);transition:all .15s;line-height:1;margin-top:1px;}
.todo-expand-btn:hover{background:var(--off);color:var(--black);}
.todo-add-row{display:flex;gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1.5px solid var(--border);flex-wrap:wrap;}
.todo-add-row input,.todo-add-row select{padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:12px;outline:none;transition:border-color .15s;background:var(--white);}
.todo-add-row input:focus,.todo-add-row select:focus{border-color:var(--blue);}
.todo-add-row .t-main{flex:1;min-width:180px;}
.todo-add-row button{padding:8px 16px;background:var(--blue);color:#fff;border:none;border-radius:var(--kader-sm);font-size:12px;font-weight:700;cursor:pointer;}

/* PW */
.pw-row{display:flex;align-items:center;gap:8px;}
.pw-dots{font-family:monospace;letter-spacing:2px;color:var(--muted);font-size:13px;display:inline-block;min-width:10ch;}
.pw-show{background:none;border:none;font-size:10px;font-weight:700;color:var(--blue);cursor:pointer;padding:2px 7px;border-radius:var(--kader-xs);}
.pw-show:hover{background:var(--blue-light);}

/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;align-items:center;justify-content:center;}
.modal-bg.open{display:flex;}
.modal{background:var(--white);border-radius:var(--kader);padding:2rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;}
.modal-title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:1.5rem;}
.mf{margin-bottom:1rem;}
.mf label{display:block;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px;}
.mf input,.mf select,.mf textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:13px;color:var(--black);background:var(--white);outline:none;transition:border-color .15s;}
/* Aankruisvakjes en keuzerondjes zijn geen invoervelden. De regel
   hierboven rekt ze over de volle breedte uit, waardoor het bijschrift
   ernaast geen ruimte meer overhoudt — in de planning verdwenen zo de
   namen van de teamleden. Ze houden hier hun eigen maat. */
.mf input[type=checkbox],.mf input[type=radio]{
  width:auto;height:auto;min-width:0;flex:none;
  padding:0;vertical-align:middle;
}
/* Een label dat zélf een keuze is — vakje plus naam — is geen bijschrift
   boven een veld. Het bijschrift hierboven staat in kleine hoofdletters;
   een naam hoort gewoon te staan zoals iemand heet. */
.mf label.keuzeveld{
  text-transform:none;letter-spacing:normal;
  font-size:12.5px;font-weight:600;color:var(--black);margin-bottom:0;
}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--blue);}
.mf textarea{resize:vertical;min-height:80px;}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--white);z-index:1;}

/* TOAST */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--dark);color:#fff;padding:11px 18px;border-radius:var(--kader-sm);font-size:13px;font-weight:600;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;z-index:999;}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto;}

/* CLIENT DETAIL */
.client-detail-hero{background:var(--dark);border-radius:var(--kader);padding:1.5rem 2rem;color:#fff;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.client-detail-hero h2{font-size:20px;font-weight:700;letter-spacing:-.02em;}
.client-detail-hero p{font-size:12px;color:rgba(255,255,255,.5);margin-top:3px;}
.ctabs{display:flex;border-bottom:1px solid var(--border);background:var(--white);border-radius:0 16px 0 0;}
.ctab{padding:12px 20px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:all .15s;}
.ctab:hover{color:var(--black);}
.ctab.active{color:var(--blue);border-bottom-color:var(--blue);}
.ctab-page{display:none;background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 0 16px;padding:1.5rem;}
.ctab-page.active{display:block;}
.milestone-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.milestone-row:last-child{border-bottom:none;}
.ms-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}

/* CHAT */
.chat-wrap{display:flex;flex-direction:column;height:300px;}
.chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px;}
.chat-msg{display:flex;gap:8px;align-items:flex-end;}
.chat-msg.mine{flex-direction:row-reverse;}
.chat-msg.mine>div:last-child{align-items:flex-end;display:flex;flex-direction:column;}
.chat-bubble{max-width:78%;padding:9px 13px;font-size:12px;line-height:1.5;word-break:break-word;}
.chat-msg:not(.mine) .chat-bubble{background:var(--off);color:var(--black);border-radius:var(--kader-sm);}
.chat-msg.mine .chat-bubble{background:var(--gradient);color:#fff;border-radius:var(--kader-sm);}
.chat-cav{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0;}
.chat-meta{font-size:10px;color:var(--muted);margin-top:2px;}
.chat-msg.mine .chat-meta{text-align:right;}
.chat-input-row{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--border);margin-top:10px;}
.chat-inp{flex:1;padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:12px;outline:none;transition:border-color .15s;}
.chat-inp:focus{border-color:var(--blue);}
.chat-send{padding:9px 16px;background:var(--gradient);color:#fff;border:none;border-radius:var(--kader-sm);font-size:12px;font-weight:700;cursor:pointer;}

/* CONTACT */
.contact-person{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--kader-sm);margin-bottom:8px;}
.contact-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.contact-name{font-size:13px;font-weight:700;}
.contact-role{font-size:11px;color:var(--muted);}
.contact-btns{display:flex;gap:6px;margin-left:auto;}
.cta-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;text-decoration:none;}
.cta-btn:hover{background:var(--blue);border-color:var(--blue);}
.cta-btn:hover svg{stroke:#fff;}
.cta-btn svg{width:14px;height:14px;stroke:var(--muted);transition:stroke .15s;}

/* PORTAL */
#s-portal{flex-direction:column;height:100vh;overflow:hidden;background:var(--white);}
@supports(height:100dvh){#s-portal{height:100dvh;}}
@media(max-width:640px){
  #s-portal{height:100vh;height:-webkit-fill-available;}
  @supports(height:100dvh){#s-portal{height:100dvh;}}
}
.portal-nav{background:var(--white);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:58px;flex-shrink:0;}
.p-logo{display:flex;align-items:center;gap:10px;}
.p-lmark{width:28px;height:28px;background:var(--black);border-radius:var(--kader-xs);display:flex;align-items:center;justify-content:center;}
.p-lmark span{color:#fff;font-size:10px;font-weight:700;}
.p-lname{font-size:13px;font-weight:700;}
.p-ctag{font-size:12px;color:var(--muted);font-weight:600;padding-left:12px;border-left:1.5px solid var(--border);margin-left:2px;}
.kb-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--off);border-radius:var(--kader-sm);padding:3px;}
.kb-tabs::-webkit-scrollbar{display:none;}
.kb-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--kader-xs);cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);transition:background .15s,color .15s;white-space:nowrap;outline:none;}
.kb-tab:hover{color:var(--black);background:rgba(0,0,0,.04);}
.kb-tab:focus{outline:none;}
.kb-tab.active{background:var(--white);color:var(--black);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.kb-tab.active:hover{background:var(--white);color:var(--black);}
.kb-tab.active:focus{background:var(--white);color:var(--black);outline:none;}
.kb-tab svg{opacity:.5;flex-shrink:0;}
.kb-tab.active svg{opacity:1;}
.kb-page{display:none;}
.kb-page.active{display:block;}
.ptabs{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex-shrink:0;}.ptabs::-webkit-scrollbar{display:none;}
.ptab{padding:0 16px;height:58px;display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s;outline:none;}
.ptab:hover{color:var(--black);}
.ptab:focus{outline:none;color:var(--black);}
.ptab.active{color:var(--blue);border-bottom-color:var(--blue);}
.ptab.active:hover{color:var(--blue);}
.ptab.active:focus{color:var(--blue);outline:none;}
/* Portaalmenu dat niet past: eerst smallere tabbladen, dan het menu
   achter de knop (zie pNavPassend in stats.js) */
.portal-nav.p-nav-krap .ptab{padding:0 10px;}
.portal-nav.p-nav-vol #portal-mob-btn{display:flex;}
.portal-nav.p-nav-vol #portal-mob-logout{display:flex;}
.portal-nav.p-nav-vol .ptabs,.portal-nav.p-nav-vol .p-out{display:none;}
.portal-nav.p-nav-vol{justify-content:flex-start;gap:8px;}
.p-out{background:none;border:none;font-size:12px;color:var(--muted);cursor:pointer;font-weight:700;padding:7px 14px;border-radius:var(--kader-sm);}
.p-out:hover{background:var(--off);color:var(--black);}
/* Portal body: max-width voor alle tabs behalve planning */
.portal-body{flex:1;overflow-y:auto;padding:1.75rem 2rem 3rem;width:100%;display:flex;flex-direction:column;gap:1.25rem;background:var(--white);min-height:0;}
/* Alle ptab-pages behalve planning krijgen max-width centrering */
.ptab-page:not(#pp-planning){max-width:1000px;margin-left:auto;margin-right:auto;width:100%;}
/* Planning tab volledige breedte — zie regels boven bij content kalender CSS */
.ptab-page{display:none;flex-direction:column;gap:1.25rem;width:100%;min-width:0;}
.ptab-page.active{display:flex;}
/* De kop van het klantportaal is een cover: het kleurverloop met het
   Kader-patroon erachter, de tekst op de Deep Royal kant. */

/* Egaal Deep Royal: op de Vivid Cyan kant van het verloop mag geen
   witte of gele tekst staan. Vlak, zonder patroon. */
.p-hero{background:var(--royal);border-radius:var(--kader);padding:1.75rem 2rem;color:#fff;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;}
.p-hero > *{position:relative;z-index:1;}
.p-hero h2{font-size:22px;font-weight:900;font-style:italic;letter-spacing:-.025em;line-height:1.1;}
/* Eén gele onderstreping per pagina, nooit in lopende tekst. */
.p-hero h2 span{color:#fff;font-style:italic;
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;background-size:100% 4px;background-position:0 100%;padding-bottom:2px;}
.p-hero p{font-size:12px;color:rgba(255,255,255,.72);margin-top:6px;font-weight:500;}

/* PORTAL PROJECT CARDS */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.proj-card{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:1.25rem;cursor:pointer;transition:border-color .2s,box-shadow .2s;}
.proj-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(16,53,144,.08);}
.proj-card-type{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.proj-card-name{font-size:14px;font-weight:700;margin-bottom:4px;}
.proj-card-sub{font-size:11px;color:var(--muted);margin-bottom:14px;}
.proj-card-bar{height:5px;background:var(--border);border-radius:var(--kader-xs);overflow:hidden;margin-bottom:8px;}
.proj-card-fill{height:100%;background:var(--gradient);border-radius:var(--kader-xs);}
.proj-card-foot{display:flex;align-items:center;justify-content:space-between;}
.proj-card-pct{font-size:12px;font-weight:700;color:var(--blue);}
.proj-card-due{font-size:11px;color:var(--muted);}

/* PROJECT DETAIL */
.proj-detail-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--white);border-radius:0 16px 0 0;}
.pdtab{padding:12px 20px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s;outline:none;}
.pdtab:hover{color:var(--black);}
.pdtab:focus{outline:none;color:var(--black);}
.pdtab.active{color:var(--blue);border-bottom-color:var(--blue);}
.pdtab.active:hover{color:var(--blue);}
.pdtab.active:focus{color:var(--blue);outline:none;}
.pdtab-page{display:none;background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 0 16px;padding:1.5rem;}
.pdtab-page.active{display:block;}

/* STATUS TIMELINE */
.status-timeline{display:flex;align-items:flex-start;margin:1rem 0;}
.st-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;}
.st-step:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--border);z-index:0;}
.st-step.done::after{background:var(--blue);}
.st-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;z-index:1;position:relative;}
.st-step.done .st-dot{background:var(--gradient);border-color:transparent;color:#fff;}
.st-step.current .st-dot{border-color:var(--blue);color:var(--blue);}
.st-label{font-size:10px;font-weight:700;color:var(--muted);margin-top:6px;text-align:center;letter-spacing:.03em;}
.st-step.done .st-label,.st-step.current .st-label{color:var(--blue);}

/* DELIV ROW */
.deliv-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.deliv-row:last-child{border-bottom:none;}
.deliv-row-icon{width:36px;height:28px;background:var(--blue-light);border-radius:var(--kader-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.deliv-row-info{flex:1;}
.deliv-row-name{font-size:13px;font-weight:700;}
.deliv-row-meta{font-size:11px;color:var(--muted);}
.deliv-row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.btn-approve-sm{padding:6px 14px;background:var(--gradient);color:#fff;border:none;border-radius:var(--kader-xs);font-size:11px;font-weight:700;cursor:pointer;}
.btn-req-sm{padding:6px 12px;background:none;border:1.5px solid var(--border);border-radius:var(--kader-xs);font-size:11px;font-weight:700;cursor:pointer;color:var(--black);}
.btn-req-sm:hover{border-color:var(--blue);color:var(--blue);}
.approved-note{font-size:12px;font-weight:700;color:var(--success);display:flex;align-items:center;gap:6px;}
.comments-wrap{margin-top:.875rem;border-top:1px solid var(--border);padding-top:.875rem;display:none;flex-direction:column;gap:10px;}
.comment{display:flex;gap:10px;}
.c-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;}
.c-av.agency{background:var(--dark);color:#fff;}
.c-av.client{background:var(--blue-light);color:var(--blue);}
.c-body{flex:1;}
.c-author{font-size:11px;font-weight:700;}
.c-time{font-weight:400;color:var(--muted);margin-left:6px;}
.c-text{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5;}
.c-input-row{display:flex;gap:8px;}
.c-input-row input{flex:1;padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:12px;outline:none;transition:border-color .15s;}
.c-input-row input:focus{border-color:var(--blue);}
.c-input-row button{padding:9px 16px;background:var(--blue);color:#fff;border:none;border-radius:var(--kader-sm);font-size:12px;font-weight:700;cursor:pointer;}

/* STATS SORT */
.sort-btn{padding:6px 14px;border-radius:var(--kader);font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--muted);transition:all .15s;}
.sort-btn.active{background:var(--gradient);color:#fff;border-color:var(--blue);}
.sort-dir{padding:6px 12px;border-radius:var(--kader);font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--black);transition:all .15s;}
.sort-dir:hover{border-color:var(--blue);}
.tc-bar-wrap{flex:1;height:5px;background:var(--border);border-radius:var(--kader-xs);overflow:hidden;margin:0 10px;}
.tc-bar-fill{height:100%;background:var(--blue);border-radius:var(--kader-xs);}

/* SUBTASKS */
.subtask-list{margin-top:8px;padding-left:26px;display:flex;flex-direction:column;gap:4px;}
.subtask-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
.subtask-check{width:13px;height:13px;border-radius:var(--kader-xs);border:1.5px solid var(--border);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.subtask-check:hover{border-color:var(--blue);}
.subtask-check.done{background:var(--blue);border-color:var(--blue);}
.subtask-check.done::after{content:'';width:5px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translateY(-1px);display:block;}
.subtask-text.done{text-decoration:line-through;color:var(--muted);}
.add-subtask-row{display:flex;gap:6px;margin-top:6px;padding-left:26px;}
.add-subtask-row input{flex:1;padding:5px 10px;border:1px solid var(--border);border-radius:var(--kader-xs);font-size:11px;outline:none;}
.add-subtask-row input:focus{border-color:var(--blue);}
.add-subtask-row button{padding:5px 10px;background:var(--blue);color:#fff;border:none;border-radius:var(--kader-xs);font-size:10px;font-weight:700;cursor:pointer;}
/* MULTI-ASSIGNEE */
.assignee-checks{display:flex;gap:6px;flex-wrap:wrap;}
.assignee-check-item{display:flex;align-items:center;gap:5px;padding:4px 10px;border:1.5px solid var(--border);border-radius:var(--kader);cursor:pointer;font-size:11px;font-weight:700;color:var(--muted);transition:all .15s;user-select:none;}
.assignee-check-item.selected{color:#fff;border-color:transparent;}
/* BEHEER / INVOICE */
.inv-status-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--kader);}
.inv-betaald{background:var(--success-bg);color:var(--success);}
.inv-openstaand{background:var(--warning-bg);color:var(--warning);}
/* TEAM CARDS */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.team-card{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:1.25rem;display:flex;flex-direction:column;gap:10px;}
.team-card-top{display:flex;align-items:center;gap:10px;}
.team-card-name{font-size:14px;font-weight:700;}
.team-card-role{font-size:11px;color:var(--muted);}
.team-card-btns{display:flex;gap:6px;margin-top:4px;}
/* CLIENT ACCOUNTS TABLE */
.ca-table-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
/* MONTH TABS */
.month-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem;}
.month-tab{padding:6px 14px;border-radius:var(--kader);font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--muted);transition:all .15s;}
.month-tab.active{background:var(--gradient);color:#fff;border-color:var(--blue);}
/* HERO PORTAL EXTENDED */
.portal-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.phs-item{background:rgba(255,255,255,.07);border-radius:var(--kader-sm);padding:10px 14px;}
.phs-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.phs-val{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1;}
.phs-delta{font-size:10px;font-weight:600;color:rgba(255,255,255,.5);margin-top:3px;}

/* PROJECT FEEDBACK */
.proj-feedback-approved{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--success);background:var(--success-bg);padding:10px 14px;border-radius:var(--kader-sm);}
.proj-feedback-changes{font-size:12px;color:var(--danger);font-weight:700;background:var(--danger-bg);padding:10px 14px;border-radius:var(--kader-sm);}
.proj-status-note{font-size:12px;color:rgba(255,255,255,.65);background:rgba(255,255,255,.07);border-radius:var(--kader-sm);padding:10px 14px;margin-top:10px;line-height:1.55;border-left:3px solid rgba(16,53,144,.5);}
.feedback-textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:12px;resize:vertical;min-height:80px;outline:none;font-family:'Montserrat',sans-serif;transition:border-color .15s;margin-bottom:8px;}
.feedback-textarea:focus{border-color:var(--blue);}
/* DELIVERABLES */
.deliv-type-icon{width:36px;height:36px;border-radius:var(--kader-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
.deliv-card{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:1rem 1.25rem;display:flex;align-items:center;gap:14px;transition:border-color .15s;}
.deliv-card:hover{border-color:var(--blue);}
.deliv-proj-section{margin-bottom:1.25rem;}
.deliv-proj-header{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;padding-bottom:6px;border-bottom:1.5px solid var(--border);}
/* LINK CARD */
.link-row-card:hover{border-color:var(--blue);}
.link-icon{width:32px;height:32px;background:var(--blue-light);border-radius:var(--kader-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.link-title{font-size:13px;font-weight:700;flex:1;}
.link-sub{font-size:11px;color:var(--muted);}
.link-open-btn{padding:6px 13px;background:var(--gradient);color:#fff;border:none;border-radius:var(--kader-xs);font-size:11px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;}

/* ═══ BRANDBOOK ════════════════════════════════════════ */
.bb-section{margin-bottom:2rem;}
.bb-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.bb-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.bb-field{margin-bottom:12px;}
.bb-field label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.04em;}
.bb-field input,.bb-field textarea,.bb-field select{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:13px;background:var(--white);transition:border .15s;box-sizing:border-box;font-family:inherit;}
.bb-field input:focus,.bb-field textarea:focus{outline:none;border-color:var(--blue);}
.bb-field textarea{resize:vertical;min-height:72px;line-height:1.6;}
.bb-colors{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px;}
.bb-color-chip{width:36px;height:36px;border-radius:var(--kader-sm);border:2px solid rgba(0,0,0,.08);cursor:pointer;position:relative;flex-shrink:0;transition:transform .1s;display:flex;align-items:center;justify-content:center;}
.bb-color-chip:hover{transform:scale(1.1);}
.bb-color-chip input[type=color]{opacity:0;position:absolute;inset:0;cursor:pointer;width:100%;height:100%;border:none;padding:0;}
.bb-add-color{width:36px;height:36px;border-radius:var(--kader-sm);border:1.5px dashed var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);background:none;transition:all .15s;flex-shrink:0;}
.bb-add-color:hover{border-color:var(--blue);color:var(--blue);}
.bb-font-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.bb-font-row input{flex:1;}
.bb-font-preview{font-size:20px;min-width:60px;text-align:center;padding:4px 8px;background:var(--off);border-radius:var(--kader-sm);}
.bb-remove{background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;padding:4px;line-height:1;transition:color .15s;}
.bb-remove:hover{color:var(--danger,#B0121C);}
.bb-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--off);border:1px solid var(--border);border-radius:var(--kader);font-size:12px;font-weight:600;margin:3px;}
.bb-tag button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:12px;line-height:1;padding:0;}
.bb-tag-input{display:flex;gap:6px;margin-top:6px;}
.bb-tag-input input{flex:1;padding:6px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:12px;}
.bb-tag-input button{padding:6px 12px;background:var(--blue);color:#fff;border:none;border-radius:var(--kader-sm);cursor:pointer;font-size:12px;font-weight:700;}
.bb-save-row{position:sticky;bottom:0;background:var(--white);padding:12px 0 4px;border-top:1px solid var(--border);margin-top:1rem;display:flex;gap:8px;align-items:center;}
/* ═══ CONTENT KALENDER ═══ */
.cal-tabs{display:flex;gap:2px;background:#EFECE7;border-radius:var(--kader-sm);padding:3px;margin-bottom:1.25rem;width:fit-content;}
.cal-tab{padding:7px 18px;border-radius:var(--kader-xs);font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);transition:background .15s,color .15s;border:none;background:none;letter-spacing:.02em;outline:none;}
.cal-tab:hover{background:rgba(0,0,0,.05);color:var(--black);}
.cal-tab:focus{outline:none;}
.cal-tab.active{background:var(--white);color:var(--black);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.cal-tab.active:hover{background:var(--white);color:var(--black);}
.cal-tab.active:focus{background:var(--white);color:var(--black);outline:none;}
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
/* Portal planning tab: neemt volledige breedte van portal-body */
#pp-planning{
  padding:0!important;
  max-width:none!important;
  margin:0!important;
  width:100%!important;
  gap:0!important;
}
/* Koptekst planning heeft eigen padding */
#pp-planning-header{
  padding:1.75rem 2rem .75rem;
  flex-shrink:0;
}
/* Maandkalender neemt resterende breedte */
#pp-planning #p-cal-grid{width:100%;padding:0 2rem 2rem;}
#pp-planning .month-cal-wrap{width:100%;box-sizing:border-box;}
#pp-planning .cal-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));width:100%;}
.cal-card{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s;position:relative;}
.cal-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(0,174,239,.08);}
.cal-card-platform{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.cal-platform-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--kader);letter-spacing:.04em;}
.plat-tiktok{background:#EFECE7;color:#1A1D23;}
.plat-instagram{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;}
.plat-linkedin{background:#0077b5;color:#fff;}
.cal-card-time{font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:4px;}
.cal-card-desc{font-size:12px;color:var(--black);line-height:1.55;flex:1;}
.cal-card-link{font-size:11px;color:var(--blue);font-weight:700;text-decoration:none;display:flex;align-items:center;gap:4px;width:fit-content;}
.cal-card-link:hover{text-decoration:underline;}
.cal-card-status{display:flex;align-items:center;gap:6px;margin-top:4px;padding-top:8px;border-top:1px solid var(--border);}
.cal-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cal-status-label{font-size:10px;font-weight:700;letter-spacing:.04em;}
.cal-card-actions{position:absolute;top:10px;right:10px;display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.cal-card:hover .cal-card-actions{opacity:1;}
.cal-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--muted);text-align:center;gap:8px;grid-column:1/-1;}
.cal-sort-bar{display:flex;align-items:center;gap:8px;margin-bottom:1rem;flex-wrap:wrap;}

/* ═══ MONTHLY CALENDAR GRID ═══ */
.month-cal-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.month-cal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--dark);}
.month-cal-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.02em;}
/* Maandnaam als kop op Deep Royal: Black Italic in Electric Yellow. */
.month-cal-title span{color:var(--yellow);font-style:italic;font-weight:900;}
.month-cal-nav{display:flex;gap:6px;align-items:center;}
.month-cal-nav button{width:32px;height:32px;border:1.5px solid rgba(255,255,255,.15);border-radius:var(--kader-sm);background:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:'Montserrat',sans-serif;}
.month-cal-nav button:hover{border-color:var(--cyan);color:#fff;background:rgba(0,174,239,.15);}
.month-cal-nav .today-btn{width:auto;padding:0 14px;font-size:11px;font-weight:700;letter-spacing:.04em;}
.month-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.month-cal-dayname{padding:8px 4px;text-align:center;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);background:var(--off);}
.month-cal-cell{min-height:96px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:4px;position:relative;transition:background .1s;vertical-align:top;}
.month-cal-cell:nth-child(7n){border-right:none;}
.month-cal-cell:hover{background:rgba(0,174,239,.03);}
.month-cal-cell.other-month{background:var(--off);}
/* Dagen buiten de maand: de lichtere cel maakt al duidelijk dat ze
   erbuiten vallen, dus het cijfer blijft gewoon leesbaar. */
.month-cal-cell.other-month .month-cal-daynr{color:var(--muted);opacity:.7;}
.month-cal-cell.today .month-cal-daynr{background:var(--blue);color:#fff;border-radius:50%;}
.month-cal-cell.today{background:rgba(0,174,239,.04);}
.month-cal-daynr{font-size:11px;font-weight:700;color:var(--muted);width:22px;height:22px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;cursor:default;}
.month-cal-event{font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--kader-xs);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:opacity .1s;display:flex;align-items:center;gap:3px;}
.month-cal-event:hover{opacity:.8;}
.month-cal-event .evdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.month-cal-more{font-size:10px;font-weight:700;color:var(--blue);cursor:pointer;padding:1px 4px;border-radius:var(--kader-xs);}
.month-cal-more:hover{background:var(--blue-light);}
.month-cal-add-cell{position:absolute;bottom:4px;right:4px;width:18px;height:18px;border-radius:var(--kader-xs);background:none;border:1px dashed var(--border);color:var(--muted);font-size:14px;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;line-height:1;}
.month-cal-cell:hover .month-cal-add-cell{display:flex;}
.month-cal-add-cell:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}

/* Portal mobiele kalender lijstweergave */
.p-cal-list-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 12px;border-radius:var(--kader-sm);margin-bottom:4px;
  background:var(--white);border:1px solid var(--border);
  cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.p-cal-list-item:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(0,174,239,.1);}
.p-cal-list-today{border-left:3px solid var(--blue)!important;}
.p-cal-list-icon{
  width:32px;height:32px;border-radius:var(--kader-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}

/* Cal event context menu button hover fix */
.cal-event-menu-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 12px;background:none;border:none;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--black);
  border-radius:var(--kader-xs);font-family:'Montserrat',sans-serif;
  transition:background .12s,color .12s;outline:none;
}
.cal-event-menu-btn:hover{background:var(--off);}
.cal-event-menu-btn:focus{outline:none;background:var(--off);}
.cal-event-menu-btn.danger{color:var(--danger);}
.cal-event-menu-btn.danger:hover{background:var(--danger-bg);}
.cal-event-menu-btn.danger:focus{background:var(--danger-bg);outline:none;}
.cal-event-menu-link{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 12px;background:none;border:none;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--blue);
  border-radius:var(--kader-xs);text-decoration:none;font-family:'Montserrat',sans-serif;
  transition:background .12s;outline:none;
}
.cal-event-menu-link:hover{background:var(--off);}
.cal-event-menu-link:focus{outline:none;background:var(--off);}

/* SLIDE-IN ANIMATIE TABBLADEN */
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-22px);}
  to{opacity:1;transform:translateX(0);}
}
.apage.slide-in{animation:slideInLeft .22s cubic-bezier(.4,0,.2,1) both;}

/* ═══ MOBILE: Responsiviteit ═══ */
@media(max-width:640px){
  /* Kalenderraster */
  .month-cal-cell{min-height:60px;padding:2px;}
  .month-cal-event{font-size:9px;padding:1px 4px;}
  .month-cal-daynr{font-size:10px;width:18px;height:18px;}
  .month-cal-header{padding:.75rem 1rem;flex-wrap:wrap;gap:8px;}
  .month-cal-title{font-size:15px;}
  .month-cal-nav{gap:4px;}
  .month-cal-nav button{width:28px;height:28px;font-size:14px;}

  /* Sidebar als slide-over overlay */
  .sidebar{
    transform:translateX(-100%);
    position:fixed;z-index:500;top:0;left:0;height:100vh;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    width:260px!important;min-width:260px!important;
    overflow-y:auto;padding:1.5rem 0;
  }
  .sidebar.mob-open{transform:translateX(0);}

  /* Admin main neemt volledige breedte */
  .admin-main{width:100%;margin-left:0;}

  /* Topbar */
  .topbar-big{padding:.875rem 1rem;flex-wrap:nowrap;gap:8px;align-items:center;}
  .topbar-big h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar-big > div:nth-child(2){flex:1;min-width:0;}
  .topbar-big p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar-right{flex-wrap:wrap;gap:6px;flex-shrink:0;}

  /* Paginascrolling: altijd naar beneden scrollbaar */
  .apage{
    padding:.875rem 1rem 4rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* grid-row zit al correct in admin-main */
  }

  /* Grids */
  .mgrid{grid-template-columns:1fr 1fr;}
  .mgrid3{grid-template-columns:1fr;}
  .dash-grid{grid-template-columns:1fr;}
  .dash-widget.col-6,.dash-widget.col-4,.dash-widget.col-3{grid-column:span 1;}
  .proj-grid{grid-template-columns:1fr;}
  .clients-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}

  /* Knoppen: minimale raakoppervlakte 44px */
  .btn-blue,.btn-ghost,.btn-main{min-height:44px;padding:10px 14px;}
  .btn-smb,.btn-smr{min-height:36px;padding:5px 10px;font-size:11px;}
  .cb-portal{min-height:40px;}
  .cb-btns{flex-wrap:wrap;}

  /* Modals: bottom-sheet stijl */
  .modal-bg{align-items:flex-end;}
  .modal{
    padding:1.25rem 1rem 2rem;
    max-width:100%!important;
    width:100%;
    margin:0;
    border-radius:0 16px 0 0;
    max-height:90vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .modal-title{font-size:17px;margin-bottom:1.25rem;}
  .mrow{grid-template-columns:1fr;}
  .modal-footer{flex-direction:column-reverse;gap:8px;padding-top:1rem;}
  .modal-footer .btn-ghost,
  .modal-footer .btn-blue{width:100%;text-align:center;justify-content:center;min-height:48px;}

  /* Tabellen: wrapper horizontaal scrollbaar, tabel zelf heeft min-width */
  .tbl{font-size:12px;min-width:500px;}
  .tbl th,.tbl td{padding:8px 10px;white-space:nowrap;}
  /* Elke card met een tabel erin moet overflow:auto krijgen */
  .card{overflow:hidden;}
  .card > div{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ca-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Klantdetail */
  .ctabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;border-radius:0 16px 0 0;}
  .ctab{white-space:nowrap;flex-shrink:0;padding:10px 14px;font-size:11px;}
  .ctab-page{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* Voorkomt dat content buiten het scherm valt */
    max-width:100vw;
  }
  .proj-detail-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
  .pdtab{white-space:nowrap;flex-shrink:0;font-size:11px;padding:10px 14px;}
  .pdtab-page{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .client-detail-hero{flex-direction:column;gap:10px;padding:1rem;}
  .client-detail-hero > div:last-child{align-items:flex-start!important;}

  /* Kaartkoppen */
  .card-hdr{flex-wrap:wrap;gap:8px;}

  /* Content kalender tabs */
  .cal-tabs{flex-wrap:wrap;width:100%;}
  .cal-tab{flex:1;text-align:center;font-size:11px;padding:7px 10px;}

  /* Content kalender grid: altijd één kolom op mobiel */
  .cal-grid{grid-template-columns:1fr!important;}
  #pp-planning .cal-grid{grid-template-columns:1fr!important;padding:0 1rem 1rem;}
  .cal-card{min-width:0;}

  /* Rapportage grids naar kolom */
  #ap-rapportage > div[style*="grid-template-columns:1.6fr"],
  #ap-rapportage > div[style*="grid-template-columns:1fr 1fr"]{
    display:flex!important;flex-direction:column!important;
  }

  /* Portal navigatie: hamburgermenu tonen, tabs verbergen */
  #portal-mob-btn{display:flex!important;}
  #portal-mob-logout{display:flex!important;margin-left:auto;}
  .ptabs{display:none!important;}
  .p-out{display:none!important;}
  .portal-nav{padding:.75rem 1rem;height:auto;justify-content:flex-start;gap:8px;}
  .portal-nav .p-logo{flex:1;min-width:0;justify-content:center;}

  .portal-body{
    padding:1rem 1rem 4rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--white);
    flex:1;
    min-height:0;
  }

  /* Portal tab-pages: volledig doorzichtig — witte portal-body is de achtergrond */
  .ptab-page{
    width:100%;
    min-width:0;
    overflow-x:visible;
    overflow-y:visible;
    background:transparent!important;
  }
  .ptab-page.active{
    background:transparent!important;
    display:flex;
  }

  /* Overview hero compacter */
  .p-hero{flex-direction:column;padding:1.25rem;}
  .portal-hero-stats{grid-template-columns:1fr 1fr;}
  #pp-overview > div[style*="grid-template-columns:1.4fr"]{
    display:flex!important;flex-direction:column!important;
  }

  /* Portal planning: volledige breedte, scrollbaar, zichtbaar */
  #pp-planning{
    overflow-x:visible!important;
    overflow-y:visible!important;
    padding:0!important;
    max-width:none!important;
    margin:0!important;
    width:100%!important;
    gap:0!important;
  }
  #pp-planning-header{padding:1rem 0 .75rem!important;}
  #pp-planning #p-cal-grid{
    padding:0!important;
    width:100%;
  }
  #pp-planning .month-cal-wrap{width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #pp-planning .month-cal-grid{min-width:320px;}

  /* Projectdetail tabs: niet-actieve pages transparant (geen grijs) */
  .proj-detail-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
  .pdtab{white-space:nowrap;flex-shrink:0;font-size:11px;padding:10px 14px;}
  .pdtab-page{
    display:none;
    background:var(--white);
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 0 16px;
    padding:1rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .pdtab-page.active{display:block;}

  /* Contactpersonen wrappen op smal scherm */
  .contact-person{flex-wrap:wrap;gap:8px;}
  .contact-btns{margin-left:0;flex-wrap:wrap;}

  /* Projectfasen stepper: fix overflow op smal scherm */
  .status-timeline{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .st-step{min-width:56px;}
  .st-dot{width:26px;height:26px;font-size:9px;}
  .st-label{font-size:9px;}

}

/* Portal hamburger knop — standaard verborgen, mobiel zichtbaar */
#portal-mob-btn{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;
  background:none;border:1.5px solid var(--border);border-radius:var(--kader-sm);
  cursor:pointer;flex-shrink:0;margin-right:8px;transition:border-color .15s;
}
#portal-mob-btn:hover{border-color:var(--blue);}
#portal-mob-btn svg{pointer-events:none;}

/* Uitlogknop mobiel portaal — standaard verborgen, alleen mobiel zichtbaar */
#portal-mob-logout{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;
  background:none;border:1.5px solid var(--border);border-radius:var(--kader-sm);
  cursor:pointer;flex-shrink:0;margin-left:auto;
  color:var(--muted);transition:border-color .15s,color .15s;
}
#portal-mob-logout:hover{border-color:var(--danger);color:var(--danger);}

/* Hamburger-knop admin - standaard onzichtbaar, mobiel zichtbaar via media query */
#mob-menu-btn{
  display:none;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);
  cursor:pointer;flex-shrink:0;margin-right:12px;transition:border-color .15s;
  color:var(--dark);
}
#mob-menu-btn:hover{border-color:var(--blue);color:var(--blue);}
#mob-menu-btn svg{pointer-events:none;}

/* Mobiele backdrop */
#mob-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:499;
}
#mob-backdrop.open{display:block;}

/* Hyperlinks in document editor */
.doc-content a{color:var(--blue);text-decoration:underline;cursor:pointer;}
.doc-content a:hover{opacity:.75;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  /* Sidebar smaller on tablet */
  .sidebar{width:220px;min-width:220px;}
  .sb-logo{padding:1.25rem 1rem;}

  /* Grids: 2 columns on tablet */
  .mgrid{grid-template-columns:repeat(2,1fr);}
  .clients-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}

  /* Pipeline kanban: 3 columns max */
  #ctab-cpipeline [style*="grid-template-columns:repeat(auto-fill,minmax(320px"],
  [id^="portal-pipeline-items"] [style*="grid-template-columns:repeat(auto-fill"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* Portal dashboard cards: 2 cols */
  #p-dashboard-grid{grid-template-columns:1fr 1fr!important;}

  /* Stats table: allow horizontal scroll */
  #ap-stats .card{overflow-x:auto;}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET PORTRAIT (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* ── Hamburger zichtbaar op tablet ── */
  #mob-menu-btn{display:flex!important;}

  /* ── Admin sidebar als slide-over ── */
  .sidebar{
    transform:translateX(-100%);
    position:fixed;z-index:500;top:0;left:0;height:100vh;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    width:260px!important;min-width:260px!important;
    overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.15);
  }
  .sidebar.mob-open{transform:translateX(0);}
  .admin-main{margin-left:0;width:100%;}

  /* ── Grids naar 1 kolom ── */
  .mgrid{grid-template-columns:1fr!important;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .clients-grid{grid-template-columns:1fr!important;}
  .team-grid{grid-template-columns:1fr!important;}
  .dash-grid{grid-template-columns:1fr!important;}
  .dash-widget.col-6,.dash-widget.col-4,.dash-widget.col-3{grid-column:span 1!important;}

  /* ── Pipeline op tablet ── */
  #ctab-cpipeline [style*="grid-template-columns:repeat(auto-fill,minmax(320px"],
  [id^="portal-pipeline-items"] [style*="grid-template-columns:repeat(auto-fill"]{
    grid-template-columns:1fr!important;
  }
  /* Fase summary kaarten: 3 kolommen */
  #ctab-cpipeline > div:first-child{
    grid-template-columns:repeat(3,1fr)!important;
  }

  /* ── Portal ── */
  #p-dashboard-grid{grid-template-columns:1fr!important;}
  .p-hero{flex-direction:column;padding:1.25rem;}
  .portal-hero-stats{grid-template-columns:1fr 1fr;}
  #pp-overview > div[style*="grid-template-columns"]{
    display:flex!important;flex-direction:column!important;
  }

  /* Portal tabs: scrollbaar */
  .ptabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;}
  .ptab{white-space:nowrap;flex-shrink:0;font-size:12px;padding:10px 14px;}

  /* ── Modals: bottom sheet ── */
  .modal-bg{align-items:flex-end!important;}
  .modal{
    padding:1.25rem 1.1rem 2rem;
    max-width:100%!important;width:100%;margin:0;
    border-radius:0 16px 0 0;
    max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .mrow{grid-template-columns:1fr!important;}
  .modal-footer{flex-direction:column-reverse;gap:8px;padding-top:1rem;}
  .modal-footer .btn-ghost,.modal-footer .btn-blue{
    width:100%;text-align:center;justify-content:center;min-height:48px;
  }

  /* ── Klantdetail tabs ── */
  .ctabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;}
  .ctab{white-space:nowrap;flex-shrink:0;padding:10px 14px;font-size:11px;}

  /* ── Topbar ── */
  .topbar-big{padding:.875rem 1rem;flex-wrap:nowrap;gap:8px;}
  .topbar-big h1{font-size:16px;}
  .topbar-big p{font-size:11px;}

  /* ── Knoppen ── */
  .btn-blue,.btn-ghost,.btn-main{min-height:44px;}
  .cb-btns{flex-wrap:wrap;}

  /* ── Facturen/Offertes tabel ── */
  .tbl{font-size:12px;}
  .card{overflow:hidden;}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TELEFOON (max-width: 640px)
   — bestaande rules aangevuld hieronder
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  /* ── Hamburger zichtbaar op mobiel ── */
  #mob-menu-btn{display:flex!important;}

  /* ── Pipeline kaartjes: volledig breed ── */
  [id^="pipeline-kanban-"] [style*="grid-template-columns"],
  [id^="portal-pipeline-items"] [style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
  }
  /* Fase summary kaarten: 3 per rij op telefoon */
  .plcard-fase-summary{grid-template-columns:repeat(3,1fr)!important;}

  /* ── Portal bottom nav: alleen op portaal scherm ── */
  body[data-screen="s-portal"] #p-bottom-nav{display:flex!important;}
  .ptabs{display:none!important;}
  .p-out{display:none!important;}
  .portal-nav{padding:.75rem 1rem;}

  /* Bottom nav items */
  #p-bottom-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;z-index:200;
    background:var(--white);border-top:1.5px solid var(--border);
    padding:6px 8px max(8px,env(safe-area-inset-bottom));
    flex-direction:row;justify-content:space-around;align-items:center;
    gap:4px;
  }
  .p-bnav-item{
    display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:6px 12px;border-radius:var(--kader-sm);
    font-size:9px;font-weight:700;color:var(--muted);
    background:none;border:none;cursor:pointer;
    transition:all .15s;font-family:'Montserrat',sans-serif;
    letter-spacing:.04em;text-transform:uppercase;
    flex:1;max-width:80px;
  }
  .p-bnav-item svg{width:20px;height:20px;}
  .p-bnav-item.active{color:var(--blue);}
  .p-bnav-item.active svg{stroke:var(--blue);}

  /* Extra padding onderaan portal body voor bottom nav */
  .portal-body{padding-bottom:80px!important;}
  .ptab-page{padding-bottom:80px;}

  /* ── Pipeline maand-selector op mobiel ── */
  #pipeline-month-sel-,
  [id^="pipeline-month-sel-"],
  [id^="portal-pipeline-month-"]{
    max-width:100%!important;width:100%!important;
  }
  [id^="pipeline-month-sel-"] + button{
    width:100%!important;
  }

  /* ── Portal dashboard grid: 1 kolom ── */
  #p-dashboard-grid{grid-template-columns:1fr!important;}

  /* ── Video embed op smal scherm ── */
  .plcard-embed-wrap{padding-top:56.25%;}

  /* ── Script modal fields ── */
  [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr!important;
  }

  /* ── KPI grid: 2 kolommen ── */
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* ── Fase summary 3 kolommen ── */
  #ctab-cpipeline > div:first-child{
    grid-template-columns:repeat(3,1fr)!important;
  }
}

/* ── Portal bottom nav: standaard verborgen (desktop) ── */
#p-bottom-nav{display:none;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — AANVULLINGEN v2.8.6
   Nieuwe componenten (platform-uitsplitsing, vergelijkings-KPI's,
   sorteerbare tabellen) + touch-verfijningen. Eén samenhangend blok
   zodat het onderhoudbaar blijft.
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: platform-uitsplitsing en KPI-grid naar 2 kolommen */
@media(max-width:768px){
  .platform-split-grid{grid-template-columns:repeat(2,1fr)!important;}
  .stat-kpi-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* Sorteerbare kolomkoppen: groter tikgebied */
  .stat-sort-th,.tbl th[onclick]{padding-top:16px;padding-bottom:12px;}

  /* Sorteerpijl iets groter zodat de actieve kolom duidelijk is */
  .sth-arrow{font-size:11px;}
}

/* Telefoon: alles naar 1 kolom waar het krap wordt */
@media(max-width:640px){
  .platform-split-grid{grid-template-columns:1fr!important;}
  .stat-kpi-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* Statistiek-KPI kaarten compacter zodat 2 naast elkaar passen */
  .stat-kpi-grid .mcard{padding:12px 14px;}
  .stat-kpi-grid .mcard-val{font-size:20px;}

  /* Tabellen: comfortabele leesgrootte + tikbare rijen */
  .tbl td{padding-top:12px;padding-bottom:12px;}

  /* Actieknoppen in tabelrijen: mogen wrappen i.p.v. overlopen */
  #stats-body td:last-child,
  #projects-body td:last-child{flex-wrap:wrap;}
  #stats-body td:last-child button,
  #stats-body td:last-child .btn-smb,
  #stats-body td:last-child .btn-ghost{min-height:36px;}

  /* Inline token-waarschuwing: tekst mag afbreken */
  [style*="border-left:3px solid"]{word-break:break-word;}

  /* Sorteerbare koppen: nog iets groter tikgebied op telefoon */
  .stat-sort-th,.tbl th[onclick]{padding:16px 12px 12px;}
}

/* Zeer smal (kleine telefoons): platform-uitsplitsing blijft leesbaar */
@media(max-width:380px){
  .stat-kpi-grid{grid-template-columns:1fr!important;}
  .topbar-big h1{font-size:15px;}
  .p-bnav-item{font-size:8px;padding:6px 8px;}
  .p-bnav-item svg{width:18px;height:18px;}
}

/* Touch-apparaten algemeen: hover-effecten niet plakken, tikgebieden ruim */
@media(hover:none){
  .tbl th[onclick]:active,.stat-sort-th:active{background:var(--off);}
  .btn-blue,.btn-ghost,.btn-main,.btn-smb{touch-action:manipulation;}
}

/* iOS zoomt automatisch in wanneer een invoerveld < 16px is en focus
   krijgt -- dat geeft een schokkerige ervaring. Op telefoon forceren we
   daarom 16px op alle invoervelden. De visuele maatvoering blijft gelijk
   via padding; alleen de tekst wordt iets groter. */
@media(max-width:640px){
  input,select,textarea,
  .c-input-row input,.add-subtask-row input,.bb-tag-input input,
  .modal input,.modal select,.modal textarea{
    font-size:16px!important;
  }
}

/* Meting-invoerrijen in de statistieken-modal: op telefoon stapelen
   zodat de 3 platformknoppen + views + interacties niet samendrukken. */
@media(max-width:640px){
  .esm-row2{
    grid-template-columns:1fr 1fr!important;
    grid-auto-rows:auto;
  }
  /* Platformknoppen op eigen volle regel boven de cijfervelden */
  .esm-row2 > div:first-child{
    grid-column:1 / -1;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  /* Engagement-uitkomst naast de cijfers, niet als losse smalle kolom */
  .esm-row2 > div:last-child{
    grid-column:1 / -1;
    text-align:left!important;
    padding-top:2px;
  }
  .esm-row1{grid-template-columns:1fr auto!important;}
  /* Datum en naam onder elkaar op smal scherm */
  .esm-row1 input[type="date"]{grid-column:1 / -1;}
}

/* ═══ PLANNING — weekweergave ═══ */
.plan-week-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
}
.plan-day-col{
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);
  padding:8px;min-height:140px;display:flex;flex-direction:column;gap:6px;
}
.plan-day-col.plan-today{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.plan-day-hdr{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:700;color:var(--muted);
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.plan-today .plan-day-hdr{color:var(--blue);}
.plan-block{
  background:var(--off);border-radius:var(--kader-xs);padding:7px 8px;cursor:pointer;
  transition:transform .1s,box-shadow .1s;
}
.plan-block:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.plan-add-cell{
  margin-top:auto;background:none;border:1.5px dashed var(--border);border-radius:var(--kader-xs);
  color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;padding:4px;
  transition:all .12s;
}
.plan-add-cell:hover{border-color:var(--blue);color:var(--blue);}

/* Tablet: 2 kolommen naast elkaar, dagen stapelen */
@media(max-width:1024px){
  .plan-week-grid{grid-template-columns:repeat(2,1fr);}
  .plan-day-col{min-height:100px;}
}
/* Telefoon: dagen onder elkaar, weekend compact */
@media(max-width:640px){
  .plan-week-grid{grid-template-columns:1fr;}
  .plan-day-col{min-height:0;}
}

/* Afwezigheid-stroken in de weekweergave */
.plan-absence{
  display:flex;align-items:center;gap:5px;
  border-radius:var(--kader-xs);padding:5px 8px;font-size:10px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

/* Beschikbaarheids-chips in de weekweergave */
.plan-avail{
  display:flex;align-items:center;gap:4px;
  font-size:9px;font-weight:700;color:var(--muted);
  padding:3px 6px;background:var(--off);border-radius:var(--kader-xs);
}

/* ═══════════════════════════════════════════════════════════════
   INZICHTEN — adviespagina
   Rustige kaarten met ruime marges. De tekst krijgt een maximale
   leesbreedte zodat regels niet van rand tot rand lopen, en het
   kerncijfer staat los rechtsboven in plaats van tegen de tekst aan.
   ═══════════════════════════════════════════════════════════════ */

.inz-card{
  background:var(--white);
  border:1px solid var(--border);
  border-left:3px solid var(--sev,var(--border));
  border-radius:var(--kader);
  overflow:hidden;
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.inz-card:hover{
  box-shadow:0 3px 14px rgba(20,20,40,.07);
  border-color:var(--sev,var(--border));
}
.inz-card.inz-af{opacity:.55;}
.inz-card.inz-af:hover{opacity:.8;}

/* Ruime binnenmarge = de gevraagde witruimte */
.inz-body{padding:20px 24px 14px;}
.inz-card [role="button"]{cursor:pointer;}

/* Bovenrij: labels links, kerncijfer rechts — met echte afstand ertussen */
.inz-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;margin-bottom:10px;
}
.inz-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.inz-sev{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--sev);background:var(--sev-bg);
  padding:3px 10px;border-radius:var(--kader);white-space:nowrap;
}
.inz-cat{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);white-space:nowrap;
}
.inz-metric{
  font-size:22px;font-weight:700;color:var(--sev);
  white-space:nowrap;line-height:1;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}

/* Tekst met leesbreedte: voorkomt regels van rand tot rand */
.inz-title{
  font-size:15px;font-weight:700;line-height:1.35;
  margin:0 0 6px;max-width:62ch;
}
.inz-text{
  font-size:12.5px;line-height:1.65;color:var(--black);
  margin:0;max-width:68ch;
}

/* Advies duidelijk afgescheiden van de constatering */
.inz-action{
  display:flex;gap:8px;align-items:flex-start;
  margin-top:12px;padding-top:12px;
  border-top:1px dashed var(--border);
  font-size:12.5px;line-height:1.55;font-weight:600;color:var(--blue);
  max-width:68ch;
}
.inz-action-arrow{flex-shrink:0;opacity:.8;}

/* Voetrij: onderbouwing links, afvinken rechts */
.inz-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:14px;
}
.inz-expand{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;padding:0;cursor:pointer;
  font-size:11px;font-weight:700;color:var(--muted);
  font-family:inherit;transition:color .14s;
}
.inz-expand:hover{color:var(--blue);}
.inz-chev{display:inline-block;transition:transform .18s ease;font-size:10px;}
.inz-chev[data-open]{transform:rotate(180deg);}

.inz-btn{
  background:none;border:1.5px solid var(--border);border-radius:var(--kader-sm);
  padding:5px 12px;font-size:10.5px;font-weight:700;color:var(--muted);
  cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:all .14s;
}
.inz-btn-done:hover{border-color:var(--success);color:var(--success);background:#13703A0D;}
.inz-btn-back:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}

/* Onderbouwing */
.inz-bewijs{
  display:none;border-top:1px solid var(--border);
  background:var(--off);padding:16px 24px 18px;
}
.inz-bewijs-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:12px;
}
.inz-bewijs-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px 28px;margin:0;
}
.inz-bewijs-rij{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.inz-bewijs-rij dt{font-size:11.5px;color:var(--muted);margin:0;min-width:0;}
.inz-bewijs-rij dd{
  font-size:12.5px;font-weight:700;margin:0;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Telefoon: kerncijfer onder de labels i.p.v. ernaast */
@media(max-width:640px){
  .inz-body{padding:16px 16px 12px;}
  .inz-top{flex-direction:column;gap:8px;}
  .inz-metric{font-size:19px;}
  .inz-bewijs{padding:14px 16px 16px;}
  .inz-bewijs-grid{grid-template-columns:1fr;gap:8px;}
  .inz-foot{flex-wrap:wrap;gap:10px;}
}

/* ── Inzichten: samenvattingsbalk bovenaan ── */
.inz-hero{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:22px 26px;margin-bottom:18px;
}
.inz-hero-oordeel{display:flex;align-items:center;gap:14px;min-width:0;}
.inz-hero-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
}
.inz-hero-titel{font-size:17px;font-weight:700;line-height:1.3;}
.inz-hero-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.inz-hero-cijfers{display:flex;gap:34px;flex-wrap:wrap;}
.inz-hero-kpi{min-width:96px;}
.inz-hero-kpi-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:4px;
}
.inz-hero-kpi-val{
  font-size:24px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.inz-hero-kpi-eenheid{font-size:13px;font-weight:600;opacity:.6;margin-left:1px;}
.inz-hero-kpi-sub{font-size:11px;color:var(--muted);margin-top:5px;}

/* ── Filterbalk ── */
.inz-filters{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
}
.inz-filter{
  padding:6px 14px;font-size:11px;font-weight:700;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--kader);
  background:var(--white);color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:all .14s;
}
.inz-filter:hover{border-color:var(--blue);color:var(--blue);}
.inz-filter-on{
  border-color:var(--blue);background:var(--blue-light);color:var(--blue);
}
.inz-filter-n{opacity:.65;margin-left:2px;}
.inz-filter-div{width:1px;height:20px;background:var(--border);margin:0 5px;}

/* ── Lijst met ruime tussenafstand ── */
.inz-lijst{display:flex;flex-direction:column;gap:12px;}

/* ── Afgevinkte sectie ── */
.inz-afsectie{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);}
.inz-afkop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.inz-link{
  background:none;border:none;padding:0;cursor:pointer;
  font-size:11px;font-weight:700;color:var(--blue);font-family:inherit;
}
.inz-link:hover{text-decoration:underline;}

/* ── Lege staten ── */
.inz-leeg{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:26px;
  text-align:center;color:var(--muted);font-size:12.5px;
}
.inz-leeg-groot{padding:44px 26px;}
.inz-leeg-icon{
  width:42px;height:42px;border-radius:50%;
  background:#13703A18;color:#13703A;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;margin:0 auto 12px;
}
.inz-leeg-titel{font-size:15px;font-weight:700;color:var(--black);margin-bottom:5px;}
.inz-leeg p{margin:0;max-width:44ch;margin-inline:auto;line-height:1.6;}

.inz-voet{
  font-size:11px;color:var(--muted);margin-top:20px;
  line-height:1.7;max-width:80ch;
}

@media(max-width:768px){
  .inz-hero{padding:18px 18px;gap:20px;}
  .inz-hero-cijfers{gap:24px;width:100%;}
  .inz-hero-kpi-val{font-size:21px;}
}
@media(max-width:640px){
  .inz-hero-titel{font-size:15px;}
  .inz-hero-cijfers{justify-content:space-between;}
  .inz-hero-kpi{min-width:0;flex:1;}
  .inz-filters{gap:6px;}
  .inz-filter{padding:5px 11px;font-size:10.5px;}
}

/* ═══ WEEKSTART ═══ */
.ws-hero{
  display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);
  padding:22px 26px;margin-bottom:16px;
}
.ws-hero-eyebrow{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:5px;
}
.ws-hero-titel{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.ws-hero-cap{display:flex;gap:22px;flex-wrap:wrap;}
.ws-cap{min-width:150px;}
.ws-cap-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;}
.ws-cap-naam{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;}
.ws-cap-naam i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.ws-cap-uren{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.ws-cap-baan{height:5px;background:var(--off);border-radius:var(--kader-xs);overflow:hidden;}
.ws-cap-baan div{height:100%;border-radius:var(--kader-xs);transition:width .2s;}

.ws-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.ws-kaart{
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);
  padding:18px 20px;
}
.ws-breed{grid-column:1/-1;}
.ws-kaart-kop{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:14px;
}
.ws-dag{margin-bottom:14px;}
.ws-dag:last-child{margin-bottom:0;}
.ws-dag-kop{
  font-size:12px;font-weight:700;margin-bottom:6px;
  padding-bottom:5px;border-bottom:1px solid var(--border);
}
.ws-dag-nu .ws-dag-kop{color:var(--blue);border-color:var(--blue);}
.ws-nu{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  background:var(--blue-light);color:var(--blue);padding:2px 7px;border-radius:var(--kader);margin-left:6px;
}
.ws-blok{
  display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:12px;
}
.ws-blok-tijd{
  font-size:11px;font-weight:700;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums;min-width:82px;
}
.ws-blok-txt{flex:1;min-width:0;line-height:1.5;}
.ws-blok-wie{display:flex;gap:3px;flex-shrink:0;}
.ws-blok-wie i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.ws-afwezig{
  font-size:11px;padding:4px 8px;background:var(--off);border-radius:var(--kader-xs);
  margin:3px 0;color:var(--muted);
}
.ws-lijst{list-style:none;display:flex;flex-direction:column;gap:11px;}
.ws-lijst li{display:flex;gap:11px;align-items:flex-start;font-size:12px;line-height:1.5;}
.ws-badge{
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--kader);
  background:var(--off);color:var(--muted);white-space:nowrap;flex-shrink:0;
}
.ws-badge-oranje{background:var(--warning-bg);color:var(--warning);}
/* Attenties: geel is hier het accent, dus Charcoal erop. Geel op wit
   mag niet, vandaar het gevulde vlakje in plaats van gele tekst. */
.ws-badge-geel{background:var(--yellow);color:var(--charcoal);}
/* Het sterretje is overal geel — dat is de enige kleur die het icoon
   mag hebben. In een geel vlak valt het daardoor volledig weg, dus
   hier wint Charcoal. */
.ws-badge-geel i[class^="ico-"]{color:var(--charcoal);}
.ws-mijlpalen .ws-sub{line-height:1.5;}
.ws-badge-rood{background:var(--danger-bg);color:var(--danger);}
.ws-sub{font-size:11px;color:var(--muted);}
.ws-leeg{font-size:12px;color:var(--muted);padding:6px 0;}
.ws-acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}

/* ═══ FINANCIËN ═══ */
.fin-tabs{
  display:flex;gap:4px;background:var(--off);border-radius:var(--kader-sm);
  padding:3px;margin-bottom:16px;width:fit-content;flex-wrap:wrap;
}
.fin-tab{
  padding:7px 16px;font-size:11.5px;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--kader-xs);background:none;
  color:var(--muted);cursor:pointer;transition:all .14s;white-space:nowrap;
}
.fin-tab:hover{color:var(--blue);}
.fin-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}

.fin-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:16px;
}
.fin-kpi{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:14px 16px;
}
.fin-kpi-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:6px;
}
.fin-kpi-val{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;}
.fin-kpi-sub{font-size:10.5px;color:var(--muted);margin-top:4px;}

.fin-prog{display:flex;flex-direction:column;gap:10px;}
.fin-prog-rij{display:flex;align-items:center;gap:14px;}
.fin-prog-lbl{
  font-size:11px;font-weight:700;color:var(--muted);
  min-width:58px;white-space:nowrap;
}
.fin-prog-baan{
  flex:1;height:20px;background:var(--off);border-radius:var(--kader-xs);
  overflow:hidden;display:flex;
}
.fin-prog-deel{height:100%;transition:width .2s;}
.fin-prog-val{
  font-size:12px;font-weight:700;min-width:76px;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fin-legenda{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--muted);
}
.fin-legenda span{display:flex;align-items:center;gap:6px;}
.fin-legenda i{width:9px;height:9px;border-radius:2px;display:inline-block;}

/* ═══ OFFERTE-ASSISTENT ═══ */
.ofa-sjablonen{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px;}
.ofa-sjabloon{
  padding:7px 14px;font-size:11px;font-weight:700;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--kader);background:var(--white);
  color:var(--muted);cursor:pointer;transition:all .14s;
}
.ofa-sjabloon:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}

.ofa-panel{
  background:var(--off);border:1px solid var(--border);
  border-radius:var(--kader-sm);padding:14px 16px;
}
.ofa-top{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px;}
.ofa-veld{flex:1;min-width:130px;}
.ofa-veld label{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:5px;
}
.ofa-veld input{
  width:100%;padding:7px 10px;border:1.5px solid var(--border);
  border-radius:var(--kader-sm);font-size:13px;font-family:inherit;
  outline:none;background:var(--white);
}
.ofa-veld input:focus{border-color:var(--blue);}
.ofa-kpi{min-width:96px;}
.ofa-kpi-lbl{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:5px;
}
.ofa-kpi-val{font-size:19px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.ofa-kpi-val span{font-size:11px;font-weight:600;opacity:.6;}

.ofa-waarschuwing{
  background:var(--warning-bg);color:var(--warning);
  border-radius:var(--kader-sm);padding:10px 13px;font-size:11.5px;line-height:1.6;
}
.ofa-goed{
  background:var(--success-bg);color:var(--success);
  border-radius:var(--kader-sm);padding:10px 13px;font-size:11.5px;line-height:1.6;
}
.ofa-hist{
  margin-top:10px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader-sm);padding:12px 14px;
}
.ofa-hist-kop{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:9px;
}
.ofa-hist-rij{
  display:flex;justify-content:space-between;gap:14px;font-size:11.5px;
  padding:4px 0;border-bottom:1px dotted var(--border);
}
.ofa-hist-rij:last-child{border-bottom:none;}
.ofa-hist-rij span:last-child{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}

@media(max-width:640px){
  .ws-hero{padding:16px 18px;gap:18px;}
  .ws-hero-cap{width:100%;gap:16px;}
  .ws-cap{flex:1;min-width:120px;}
  .ws-blok{flex-wrap:wrap;gap:5px;}
  .ws-blok-tijd{min-width:0;}
  .fin-kpis{grid-template-columns:repeat(2,1fr);}
  .fin-prog-lbl{min-width:44px;font-size:10px;}
  .fin-prog-val{min-width:62px;font-size:11px;}
  .ofa-top{gap:14px;}
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE v3 — volledige telefoon- en tabletoptimalisatie
   Dekt alle onderdelen gebouwd na de eerste mobiele ronde:
   Planning, Inzichten, Financiën, Weekstart en de offerte-assistent.
   Plus fundamentele fixes: iOS-invoerzoom, safe-areas (notch),
   aanraakdoelen en touch-gedrag.
   ═══════════════════════════════════════════════════════════════════ */

/* ── FUNDAMENT: geldt voor alle telefoons en tablets ─────────────── */
@media(max-width:768px){

  /* iOS Safari zoomt in op invoervelden kleiner dan 16px. Eén regel
     die dat overal voorkomt — de belangrijkste mobiele fix die er is. */
  input[type="text"],input[type="number"],input[type="date"],
  input[type="time"],input[type="email"],input[type="password"],
  input[type="search"],select,textarea{
    font-size:16px!important;
  }

  /* Aanraakdoelen: knoppen buiten modals waren 24-32px hoog.
     Richtlijn is minimaal 44px; 42px met marge is werkbaar. */
  .btn-ghost,.btn-blue{
    min-height:42px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .inz-btn,.inz-expand,.fin-tab,.inz-filter,.ofa-sjabloon{
    min-height:40px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .plan-add-cell{min-height:42px;}
  .sb-item{padding:12px;min-height:44px;}

  /* Safe-areas voor telefoons met notch/home-balk
     (viewport-fit=cover staat al in de meta-tag) */
  .sidebar{
    padding-top:calc(1.5rem + env(safe-area-inset-top,0px));
    padding-left:env(safe-area-inset-left,0px);
  }
  .modal{
    padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px));
    max-height:88vh;max-height:92dvh;
  }
  /* Horizontaal scrollende tabellen: momentum-scroll + geen
     dubbele randen als de kaart de tabel al omkadert */
  [style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch;}

  /* Toasts niet achter de home-balk */
  .toast{bottom:calc(18px + env(safe-area-inset-bottom,0px));}
}

/* ── PLANNING ────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* De kopbalk had zeven bedieningselementen op één rij. Op telefoon:
     nette rijen — tabs volle breedte, dan filter, dan weeknavigatie,
     dan de actieknoppen naast elkaar. */
  .plan-hdr{gap:10px!important;}
  .plan-hdr>div:first-child{ /* weergave-tabs */
    width:100%;display:flex;
  }
  .plan-hdr>div:first-child button{flex:1;min-height:42px;}
  .plan-hdr>select{ /* teamlid-filter */
    flex:1;min-width:0;min-height:42px;
  }
  .plan-hdr-right{
    width:100%;margin-left:0!important;
    display:grid!important;
    grid-template-columns:auto auto 1fr;
    gap:8px!important;align-items:center;
  }
  .plan-hdr-right>span{ /* weeklabel */
    grid-column:1/-1;order:-1;
    white-space:normal!important;text-align:center;
    font-size:13px!important;padding:2px 0;
  }
  .plan-hdr-right .btn-blue,
  .plan-hdr-right .btn-ghost{width:100%;}

  /* Capaciteitskaarten onder elkaar, volle breedte */
  #planning-body [style*="min-width:160px"]{min-width:100%!important;}

  /* Blokken: groter aanraakvlak */
  .plan-block{padding:10px 11px;}

  /* Afwezigheids-paneel: goedkeurknoppen volle breedte */
  #planning-body .card [onclick*="decideAbsence"]{
    flex:1;min-height:42px;
  }
}
@media(max-width:640px){
  /* Urenrapport-tabellen: kolom Omschrijving smaller afkappen */
  #planning-body .tbl td{font-size:12px;}
}

/* Tablet: weekraster als 7 kolommen is te krap, 2 te leeg — 4+3 werkt */
@media(min-width:641px) and (max-width:1024px){
  .plan-week-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ── INZICHTEN ───────────────────────────────────────────────────── */
@media(max-width:768px){
  /* Filters: één horizontaal scrollende rij in plaats van drie
     omgeklapte rijen chips die het scherm vullen */
  .inz-filters{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;margin-bottom:12px;
    scrollbar-width:none;
  }
  .inz-filters::-webkit-scrollbar{display:none;}
  .inz-filter{flex-shrink:0;}
  .inz-filter-div{flex-shrink:0;}

  /* Voetrij van een kaart: knoppen goed uit elkaar */
  .inz-foot{flex-wrap:wrap;gap:10px;}
  .inz-btn{padding:8px 16px;}
}

/* ── FINANCIËN ───────────────────────────────────────────────────── */
@media(max-width:768px){
  .fin-tabs{width:100%;}
  .fin-tab{flex:1;padding:9px 8px;font-size:11px;}
  .fin-kpis{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:641px) and (max-width:1024px){
  .fin-kpis{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:400px){
  .fin-kpi-val{font-size:16px;}
  .fin-prog-lbl{min-width:40px;}
}

/* ── WEEKSTART ───────────────────────────────────────────────────── */
@media(max-width:768px){
  .ws-grid{grid-template-columns:1fr;}
  .ws-acties{display:grid;grid-template-columns:1fr;gap:8px;}
  .ws-acties .btn-ghost{width:100%;}
  .ws-hero-titel{font-size:17px;}
}

/* ── OFFERTEMODAL: assistent + sjablonen ─────────────────────────── */
@media(max-width:768px){
  /* Sjablonen: horizontaal scrollend, niet stapelen */
  .ofa-sjablonen{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:none;
  }
  .ofa-sjablonen::-webkit-scrollbar{display:none;}
  .ofa-sjabloon{flex-shrink:0;}

  /* Assistent: urenveld volle breedte, de twee KPI's ernaast
     als rij eronder */
  .ofa-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;}
  .ofa-top .ofa-veld{grid-column:1/-1;min-width:0;}
  .ofa-top .ofa-kpi{min-width:0;}
}

/* ── BESCHIKBAARHEID & CAPACITEIT modals ─────────────────────────── */
@media(max-width:640px){
  /* Toggle-raster: grotere aanraakvlakken */
  #avail-grid button{min-height:44px;}
  #avail-week-nav .btn-ghost{flex:1;}
  /* Teamlid-checkboxes in planblok-modal: onder elkaar */
  #plb-tm-wrap{flex-direction:column;}
  #plb-tm-wrap label{min-height:46px;}
}

/* ── TOUCH-GEDRAG: geen hover-effecten die blijven plakken ───────── */
@media(hover:none){
  .plan-block:hover{transform:none;box-shadow:none;}
  .inz-card:hover{box-shadow:none;transform:none;border-color:var(--border);}
  .inz-card:hover{border-left-color:var(--sev,var(--border));}
  .plan-block,.inz-body,.fin-tab,.inz-filter,.ofa-sjabloon,
  .plan-add-cell,.inz-btn,.inz-expand{touch-action:manipulation;}
  /* Actieve staat als feedback in plaats van hover */
  .plan-block:active{background:var(--border);}
  .inz-btn:active,.fin-tab:active,.inz-filter:active{opacity:.7;}
}

/* ── TABLET LANDSCAPE: benut de breedte ──────────────────────────── */
@media(min-width:769px) and (max-width:1024px){
  .inz-hero{padding:20px 22px;}
  .ws-grid{grid-template-columns:repeat(2,1fr);}
  .ws-breed{grid-column:1/-1;}
}

/* ── KLEINE TELEFOONS (≤380px) ───────────────────────────────────── */
@media(max-width:380px){
  .inz-metric{font-size:18px;}
  .inz-hero-kpi-val{font-size:19px;}
  .plan-hdr-right{grid-template-columns:1fr 1fr;}
  .plan-hdr-right>button:first-of-type{grid-column:auto;}
  .fin-tab{font-size:10px;padding:9px 4px;}
}

/* ═══ COMMANDOPALET ═══ */
#cmd-zoek-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-left:auto;margin-right:10px;
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);
  color:var(--muted);cursor:pointer;transition:all .15s;flex-shrink:0;
}
#cmd-zoek-btn:hover{border-color:var(--blue);color:var(--blue);}
.topbar-right{margin-left:0;}

#cmd-palet{display:none;position:fixed;inset:0;z-index:600;}
.cp-bg{position:absolute;inset:0;background:rgba(20,20,35,.45);backdrop-filter:blur(2px);}
.cp-box{
  position:relative;max-width:560px;margin:12vh auto 0;
  background:var(--white);border-radius:var(--kader);
  box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;
}
#cp-input{
  width:100%;border:none;outline:none;padding:17px 20px;
  font-size:15px;font-family:inherit;
  border-bottom:1px solid var(--border);
}
.cp-lijst{max-height:46vh;overflow-y:auto;padding:7px;}
.cp-item{
  display:flex;align-items:baseline;gap:10px;
  padding:10px 13px;border-radius:var(--kader-sm);cursor:pointer;font-size:13px;
}
.cp-actief{background:var(--blue-light);}
.cp-type{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:2px 8px;border-radius:var(--kader);flex-shrink:0;
  background:var(--off);color:var(--muted);
}
.cp-type-klant{background:#E8F3EC;color:#13703A;}
.cp-type-project{background:#EDF1F9;color:#0A63B4;}
.cp-naam{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-leeg{padding:22px;text-align:center;color:var(--muted);font-size:13px;}
.cp-voet{
  display:flex;gap:16px;justify-content:center;
  padding:9px;border-top:1px solid var(--border);
  font-size:10px;color:var(--muted);background:var(--off);
}
@media(max-width:640px){
  .cp-box{margin:0;max-width:100%;height:100%;border-radius:0;display:flex;flex-direction:column;}
  .cp-lijst{max-height:none;flex:1;}
  #cp-input{padding-top:calc(17px + env(safe-area-inset-top,0px));}
  .cp-voet{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   RAAD VAN COMMISSARISSEN
   Bestuurlijke toon: rustiger dan de rest van het dashboard, meer
   leesruimte, en de commissarissen visueel herkenbaar per portefeuille.
   ═══════════════════════════════════════════════════════════════════ */

.rvc-tabs{
  display:flex;gap:4px;background:var(--off);border-radius:var(--kader-sm);
  padding:3px;margin-bottom:16px;width:fit-content;flex-wrap:wrap;
}
.rvc-tab{
  padding:7px 18px;font-size:11.5px;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--kader-xs);background:none;
  color:var(--muted);cursor:pointer;transition:all .14s;white-space:nowrap;
}
.rvc-tab:hover{color:var(--blue);}
.rvc-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}

/* Kop van de vergadering */
.rvc-hero{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:28px;flex-wrap:wrap;
  background:var(--dark);color:#fff;border-radius:var(--kader);
  padding:24px 28px;margin-bottom:18px;
}
.rvc-hero-links{min-width:0;flex:1;}
.rvc-hero-eyebrow{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.55);margin-bottom:8px;
}
.rvc-hero-titel{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;}
.rvc-hero-sub{
  font-size:12px;color:rgba(255,255,255,.7);margin-top:8px;
  line-height:1.65;max-width:64ch;
}
.rvc-hero-raad{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0;}

/* Commissaris-avatars */
.rvc-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  color:#fff;font-size:9px;font-weight:700;letter-spacing:.04em;
  flex-shrink:0;
}
.rvc-avatar-sm{width:32px;height:32px;font-size:9.5px;}
.rvc-avatar-xs{width:20px;height:20px;font-size:7px;}
.rvc-lid{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.rvc-lid-naam{font-size:11px;font-weight:700;color:var(--muted);}

/* Agendapunten */
.rvc-agenda{display:flex;flex-direction:column;gap:12px;}
.rvc-punt{
  background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--border);border-radius:var(--kader);
  padding:20px 24px;
}
.rvc-punt.rvc-hoog{border-left-color:var(--danger);}
.rvc-punt.rvc-midden{border-left-color:var(--warning);}
.rvc-punt.rvc-laag{border-left-color:var(--success);}
.rvc-punt-kop{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px;}
.rvc-nr{
  font-size:15px;font-weight:700;color:var(--border);
  font-variant-numeric:tabular-nums;line-height:1.2;flex-shrink:0;
}
.rvc-punt-kop-txt{flex:1;min-width:0;}
.rvc-punt-kop-txt h3{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:7px;}
.rvc-urg{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:2px 9px;border-radius:var(--kader);
}
.rvc-urg-hoog{background:var(--danger-bg);color:var(--danger);}
.rvc-urg-midden{background:var(--warning-bg);color:var(--warning);}
.rvc-urg-laag{background:var(--success-bg);color:var(--success);}
.rvc-punt-txt{
  font-size:12.5px;line-height:1.7;color:var(--black);
  max-width:70ch;margin:0;
}

/* Cijferblok onder een punt of standpunt */
.rvc-cijfers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px 24px;margin-top:14px;padding-top:13px;border-top:1px solid var(--border);
}
.rvc-cijfer{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:11.5px;padding-bottom:4px;border-bottom:1px dotted var(--border);
}
.rvc-cijfer span{color:var(--muted);}
.rvc-cijfer strong{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* Balk boven besluiten */
.rvc-balk{
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;margin-bottom:16px;
}
.rvc-balk-titel{font-size:15px;font-weight:700;}
.rvc-balk-sub{font-size:12px;color:var(--muted);margin-top:3px;max-width:62ch;line-height:1.6;}

/* Besluiten */
.rvc-lijst{display:flex;flex-direction:column;gap:12px;}
.rvc-besluit{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);overflow:hidden;
}
.rvc-besluit-kop{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:22px;padding:18px 22px;cursor:pointer;flex-wrap:wrap;
}
.rvc-besluit-af .rvc-besluit-kop{cursor:default;}
.rvc-besluit-kop-txt{flex:1;min-width:0;}
.rvc-besluit-kop-txt h3{font-size:15px;font-weight:700;line-height:1.35;margin:5px 0 0;}
.rvc-type{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);background:var(--off);padding:3px 9px;border-radius:var(--kader);
}
.rvc-besluit-klant{font-size:11.5px;color:var(--muted);display:block;margin-top:5px;}
.rvc-besluit-advies{text-align:right;flex-shrink:0;}
.rvc-oordeel{display:block;font-size:12.5px;font-weight:700;line-height:1.4;}
.rvc-stemmen{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;}

.rvc-context{
  font-size:12.5px;line-height:1.7;color:var(--muted);
  padding:0 22px 14px;margin:0;max-width:70ch;font-style:italic;
}

/* Standpunten van de commissarissen */
.rvc-standpunten{border-top:1px solid var(--border);}
.rvc-standpunt{padding:18px 22px;border-bottom:1px solid var(--border);}
.rvc-standpunt:last-child{border-bottom:none;}
.rvc-badge{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:3px 10px;border-radius:var(--kader);
}
.rvc-kern{font-size:13px;line-height:1.65;margin:10px 0 0;max-width:70ch;font-weight:600;}
.rvc-vraag{
  font-size:12px;line-height:1.6;color:var(--blue);
  margin:12px 0 0;padding-top:11px;border-top:1px dashed var(--border);
  max-width:70ch;
}

.rvc-voorwaarden{
  background:var(--off);padding:16px 22px;border-top:1px solid var(--border);
}
.rvc-voorwaarden-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:9px;
}
.rvc-voorwaarden ul{margin:0;padding-left:18px;}
.rvc-voorwaarden li{font-size:12px;line-height:1.65;margin-bottom:5px;max-width:70ch;}

.rvc-acties{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:14px 22px;border-top:1px solid var(--border);background:var(--off);
}

/* Terugblik */
.rvc-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:16px;
}
.rvc-kpi{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:14px 16px;
}
.rvc-kpi-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:6px;
}
.rvc-kpi-val{font-size:21px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.rvc-kpi-sub{font-size:10.5px;color:var(--muted);margin-top:4px;}

.rvc-keuze{
  display:inline-block;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:3px 11px;border-radius:var(--kader);
}
.rvc-keuze-doorgegaan{background:var(--blue-light);color:var(--blue);}
.rvc-keuze-aangepast{background:var(--warning-bg);color:var(--warning);}
.rvc-keuze-afgezien{background:var(--off);color:var(--muted);}

.rvc-mini{
  display:flex;gap:14px;flex-wrap:wrap;
  padding:0 22px 16px;
}
.rvc-mini-lid{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;
}
.rvc-uitkomst{
  font-size:12.5px;line-height:1.7;
  padding:14px 22px;border-top:1px solid var(--border);
  background:var(--blue-light);max-width:none;
}

.rvc-leeg{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:34px 26px;text-align:center;
  color:var(--muted);font-size:12.5px;line-height:1.7;
}

@media(max-width:768px){
  .rvc-tabs{width:100%;}
  .rvc-tab{flex:1;padding:9px 8px;font-size:11px;}
  .rvc-hero{padding:18px 20px;gap:16px;}
  .rvc-hero-titel{font-size:16px;}
  .rvc-punt{padding:16px 18px;}
  .rvc-punt-kop{gap:10px;}
  .rvc-cijfers{grid-template-columns:1fr;gap:7px;}
  .rvc-besluit-kop{padding:16px 18px;gap:12px;}
  .rvc-besluit-advies{text-align:left;}
  .rvc-standpunt{padding:16px 18px;}
  .rvc-acties{padding:12px 18px;}
  .rvc-acties button{flex:1;min-width:130px;}
  .rvc-context,.rvc-mini{padding-left:18px;padding-right:18px;}
  .rvc-uitkomst,.rvc-voorwaarden{padding:14px 18px;}
  .rvc-kpis{grid-template-columns:repeat(2,1fr);}
}

/* ── Kosten (binnen Financiën) ── */
.kost-saldo{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;padding:16px 20px;
}
.kost-saldo-titel{font-size:13px;font-weight:700;}
.kost-saldo-sub{font-size:11.5px;color:var(--muted);margin-top:3px;max-width:56ch;line-height:1.6;}
.kost-saldo-velden{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.kost-saldo-velden input{
  padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--kader-sm);
  font-size:13px;font-family:inherit;outline:none;background:var(--white);
  min-width:130px;
}
.kost-saldo-velden input:focus{border-color:var(--blue);}

/* ── Precedenten in een besluit ── */
.rvc-precedent{
  background:var(--blue-light);padding:16px 22px;
  border-top:1px solid var(--border);
}
.rvc-precedent-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--blue);margin-bottom:9px;
}
.rvc-precedent-waarschuwing{
  font-size:12.5px;line-height:1.65;font-weight:600;
  margin:0 0 10px;max-width:70ch;
}
.rvc-precedent ul{margin:0;padding-left:18px;}
.rvc-precedent li{font-size:12px;line-height:1.65;margin-bottom:6px;max-width:70ch;}

@media(max-width:640px){
  .kost-saldo{padding:14px 16px;}
  .kost-saldo-velden{width:100%;}
  .kost-saldo-velden input{flex:1;min-width:0;}
  .kost-saldo-velden button{width:100%;}
  .rvc-precedent{padding:14px 18px;}
}

/* Tabrij van Rentabiliteit: met de raad erbij zijn het vijf knoppen.
   Op telefoon horizontaal scrollend in plaats van omklappen. */
@media(max-width:768px){
  .rent-tabs{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%;scrollbar-width:none;
  }
  .rent-tabs::-webkit-scrollbar{display:none;}
  .rent-tabs button{flex-shrink:0;min-height:40px;}
}

/* ═══ ZWEVENDE MENUKNOP ═══
   Eén hamburger linksboven is op een telefoon te fragiel: zodra je
   gescrold bent of in een detailweergave zit, is menutoegang ver weg.
   Deze knop staat vast op duimhoogte en is altijd zichtbaar. */
#mob-fab-menu{display:none;}
@media(max-width:768px){
  #mob-fab-menu{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:52px;height:52px;border-radius:50%;
    background:var(--dark);color:#fff;border:none;cursor:pointer;
    box-shadow:0 6px 18px rgba(26,29,35,.38);
    z-index:190;
    transition:transform .18s,opacity .18s;
  }
  #mob-fab-menu:active{transform:scale(.92);}
  /* Weg zodra het menu zelf open is */
  body.mob-menu-open #mob-fab-menu{opacity:0;pointer-events:none;}
}

/* ═══ RAAD — VISUEEL ONTWERP ═══ */
.rvc-portret{display:block;flex-shrink:0;border-radius:50%;}

/* Hero als raadskamer: donker paneel met gloed en de bank */
.rvc-hero{
  background:
    radial-gradient(circle at 88% 115%, rgba(0,174,239,.28) 0%, rgba(0,174,239,0) 55%),
    radial-gradient(circle at -5% -30%, rgba(0,174,239,.14) 0%, rgba(0,174,239,0) 45%),
    var(--dark);
  position:relative;overflow:hidden;
}
.rvc-hero::before{
  content:'⚖';position:absolute;right:26px;top:14px;
  font-size:64px;line-height:1;color:rgba(255,255,255,.06);
  pointer-events:none;
}
.rvc-bank{
  display:flex;gap:14px;flex-shrink:0;align-items:flex-end;
  padding:10px 14px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--kader);
}
.rvc-bank-lid{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:default;transition:transform .16s;
}
.rvc-bank-lid:hover{transform:translateY(-3px);}
.rvc-bank-lid .rvc-portret{box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.rvc-bank-naam{
  font-size:8px;font-weight:700;letter-spacing:.1em;
  color:rgba(255,255,255,.65);
}

/* Profielkaarten: wie let waarop */
.rvc-profielen{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:12px;margin-bottom:18px;
}
.rvc-profiel{
  background:var(--white);border:1px solid var(--border);
  border-top:3px solid var(--border);border-radius:var(--kader);
  padding:16px 16px 14px;display:flex;flex-direction:column;
}
.rvc-profiel-kop{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.rvc-profiel-naam{font-size:12.5px;font-weight:700;line-height:1.25;}
.rvc-profiel-focus{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.45;}
.rvc-profiel-let{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:7px;
}
.rvc-profiel-lijst{list-style:none;margin:0 0 12px;padding:0;flex:1;}
.rvc-profiel-lijst li{
  display:flex;align-items:baseline;gap:7px;
  font-size:11px;line-height:1.5;margin-bottom:6px;color:var(--black);
}
.rvc-stip{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  position:relative;top:-1px;
}
.rvc-profiel-motto{
  font-size:10.5px;font-weight:700;font-style:italic;line-height:1.45;
  padding-top:10px;border-top:1px dashed var(--border);
}

/* Standpunten dragen de lidkleur al via inline border; wat lucht erbij */
.rvc-standpunt{padding-left:20px;}

@media(max-width:1180px){
  .rvc-profielen{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
  /* Profielen als horizontale strook, één veeg langs de hele raad */
  .rvc-profielen{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:10px;margin:0 -1rem 16px;padding:0 1rem 6px;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .rvc-profielen::-webkit-scrollbar{display:none;}
  .rvc-profiel{min-width:230px;scroll-snap-align:start;}
  .rvc-hero{flex-direction:column;}
  .rvc-hero::before{font-size:44px;right:16px;top:10px;}
  .rvc-bank{
    width:100%;justify-content:space-between;gap:6px;
    padding:10px 12px;box-sizing:border-box;
  }
  .rvc-bank-lid .rvc-portret{width:40px;height:40px;}
}

/* ═══════════════════════════════════════════════════════════════════
   VANDAAG — PERSOONLIJKE ASSISTENT
   Rustige dagweergave: lucht, grote begroeting, en per kaart één
   duidelijke taak. Zakelijk en persoonlijk staan naast elkaar.
   ═══════════════════════════════════════════════════════════════════ */

/* Tabrij van Weekstart */
.ws-tabs{
  display:flex;gap:4px;background:var(--off);border-radius:var(--kader-sm);
  padding:3px;width:fit-content;margin-bottom:16px;
}
.ws-tab{
  padding:8px 20px;font-size:11.5px;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--kader-xs);background:none;
  color:var(--muted);cursor:pointer;transition:all .14s;
}
.ws-tab:hover{color:var(--blue);}
.ws-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}

/* Kop */
.vd-kop{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:28px;flex-wrap:wrap;margin-bottom:18px;
}
.vd-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.vd-datum{font-size:12px;color:var(--muted);font-weight:600;}
.vd-klok{
  font-size:11.5px;font-weight:700;color:var(--dark);
  background:var(--white);border:1px solid var(--border);
  padding:4px 12px;border-radius:var(--kader);font-variant-numeric:tabular-nums;
}
.vd-groet{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;}
.vd-cijfers{display:flex;gap:26px;flex-shrink:0;}
.vd-cijfer{text-align:center;}
.vd-cijfer-val{
  font-size:26px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.vd-cijfer-lbl{
  font-size:9.5px;color:var(--muted);margin-top:5px;
  text-transform:lowercase;letter-spacing:.02em;
}

/* Dagcheck-in */
.vd-checkin{
  background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--blue);border-radius:var(--kader);
  padding:16px 20px;margin-bottom:14px;
}
.vd-checkin-af{border-left-color:var(--success);background:var(--success-bg);}
.vd-checkin-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);display:block;margin-bottom:9px;
}
.vd-checkin-rij{display:flex;gap:8px;}
.vd-checkin-rij input{
  flex:1;min-width:0;padding:10px 13px;font-size:13.5px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  outline:none;background:var(--white);
}
.vd-checkin-rij input:focus{border-color:var(--blue);}

/* Rooster */
/* Bovenste rij: agenda, taken en de smalle kolom met thema en doelen.
   Onderste rij staat in een eigen rooster (.vd-onder) dat zich naar de
   paginabreedte voegt; anders bleef de laatste kaart alleen links staan
   met de halve pagina leeg ernaast. */
.vd-grid{
  display:grid;grid-template-columns:1.35fr 1.15fr .85fr;
  gap:14px;align-items:start;
}
.vd-onder{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;align-items:start;
}
/* Staat de laatste kaart alleen op een rij, dan vult hij de rij.
   Zonder deze regel bleef er een lege helft naast staan. */
.vd-onder > *:last-child:nth-child(odd){grid-column:1 / -1;}
@media(min-width:1400px){
  .vd-onder{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vd-onder > *:last-child:nth-child(odd){grid-column:auto;}
  /* Bij twee kaarten vult de tweede de resterende twee kolommen. */
  .vd-onder > *:last-child:nth-child(2){grid-column:span 2;}
}
.vd-kaart{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:20px 22px;
}
.vd-kaart-kop{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px;
}
.vd-kaart-kop h3{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.vd-telling{
  font-size:11px;font-weight:700;color:var(--muted);
  background:var(--off);padding:2px 9px;border-radius:var(--kader);
}
.vd-kaart-sub{font-size:11px;color:var(--muted);margin-left:auto;}
.vd-leeg{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0;}
.vd-leeg-donker{color:rgba(255,255,255,.55);}

/* Tijdlijn van vandaag */
.vd-tijdlijn{display:flex;flex-direction:column;}
.vd-blok{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px dotted var(--border);
}
.vd-blok:last-child{border-bottom:none;}
.vd-blok-af{opacity:.5;}
.vd-blok-tijd{
  font-size:12px;font-weight:700;color:var(--blue);
  font-variant-numeric:tabular-nums;flex-shrink:0;width:42px;
}
.vd-blok-body{flex:1;min-width:0;}
.vd-blok-titel{
  font-size:13px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vd-blok-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.vd-blok-tot{font-size:10.5px;color:var(--muted);flex-shrink:0;}

/* Takenkaart in het donker */
.vd-kaart-taken{background:var(--dark);border-color:var(--dark);color:#fff;}
.vd-kaart-taken h3{color:#fff;}
.vd-kaart-taken .vd-telling{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75);}
.vd-taken{display:flex;flex-direction:column;}
.vd-taak{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.vd-taak:last-child{border-bottom:none;}
.vd-taak-vink{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;
  border:1.6px solid rgba(255,255,255,.35);background:none;
  cursor:pointer;margin-top:1px;transition:all .15s;
}
.vd-taak-vink:hover{border-color:var(--blue);background:rgba(0,174,239,.18);}
.vd-taak-body{flex:1;min-width:0;}
.vd-taak-titel{font-size:12.5px;font-weight:600;line-height:1.4;}
.vd-taak-meta{
  display:flex;gap:10px;flex-wrap:wrap;
  font-size:10.5px;color:rgba(255,255,255,.5);margin-top:4px;
}
.vd-laat{color:#B0121C;font-weight:700;}
.vd-nu{color:var(--blue);font-weight:700;}
.vd-voortgang{display:flex;align-items:center;gap:8px;margin-top:8px;}
.vd-voortgang-baan{
  flex:1;height:3px;background:rgba(255,255,255,.14);
  border-radius:2px;overflow:hidden;
}
.vd-voortgang-deel{height:100%;background:var(--success);border-radius:2px;}
.vd-voortgang span{font-size:9.5px;color:rgba(255,255,255,.5);font-weight:700;}
.vd-taak-fase{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.1);
  padding:3px 8px;border-radius:var(--kader);flex-shrink:0;
}
.vd-meer{
  width:100%;margin-top:14px;padding:9px;font-size:11px;font-weight:700;
  font-family:inherit;background:rgba(255,255,255,.1);color:#fff;
  border:none;border-radius:var(--kader-sm);cursor:pointer;transition:background .15s;
}
.vd-meer:hover{background:rgba(255,255,255,.18);}

/* Rechterkolom */
.vd-kolom{display:flex;flex-direction:column;gap:14px;}

/* Maandthema — het gele accent uit het voorbeeld */
.vd-kaart-thema{background:#FFE600;border-color:#FFE600;}
.vd-thema-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(26,29,35,.55);margin-bottom:8px;
}
.vd-thema-tekst{font-size:17px;font-weight:700;line-height:1.25;color:var(--dark);}
.vd-thema-edit{
  margin-top:12px;padding:5px 12px;font-size:10.5px;font-weight:700;
  font-family:inherit;background:rgba(26,29,35,.1);color:var(--dark);
  border:none;border-radius:var(--kader);cursor:pointer;
}
.vd-thema-rij{display:flex;gap:6px;}
.vd-thema-rij input{
  flex:1;min-width:0;padding:8px 11px;font-size:12.5px;font-family:inherit;
  border:1.5px solid rgba(26,29,35,.18);border-radius:var(--kader-sm);
  outline:none;background:rgba(255,255,255,.6);
}
.vd-thema-rij button{
  padding:8px 14px;font-size:11.5px;font-weight:700;font-family:inherit;
  background:var(--dark);color:#fff;border:none;border-radius:var(--kader-sm);cursor:pointer;
}

/* Doelen */
.vd-plus{
  margin-left:auto;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--white);
  color:var(--muted);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.vd-plus:hover{border-color:var(--blue);color:var(--blue);}
.vd-doelen{list-style:none;margin:0;padding:0;}
.vd-doel{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;border-bottom:1px dotted var(--border);
}
.vd-doel:last-child{border-bottom:none;}
.vd-doel-nr{
  font-size:10px;font-weight:700;color:var(--blue);
  font-variant-numeric:tabular-nums;flex-shrink:0;padding-top:2px;
}
.vd-doel-tekst{flex:1;font-size:12.5px;line-height:1.5;cursor:pointer;}
.vd-doel-af .vd-doel-tekst{text-decoration:line-through;color:var(--muted);}
.vd-doel-af .vd-doel-nr{color:var(--muted);}
.vd-doel-x{
  background:none;border:none;color:var(--border);font-size:16px;
  cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0;
}
.vd-doel-x:hover{color:var(--danger);}

/* Mijn lijst */
.vd-filters{display:flex;gap:3px;margin-left:auto;background:var(--off);border-radius:var(--kader);padding:2px;}
.vd-filter{
  padding:4px 11px;font-size:10px;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--kader);background:none;color:var(--muted);cursor:pointer;
}
.vd-filter-on{background:var(--white);color:var(--blue);}
.vd-toevoeg{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;}
.vd-toevoeg input{
  flex:1;min-width:150px;padding:9px 12px;font-size:12.5px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);outline:none;
}
.vd-toevoeg input:focus{border-color:var(--blue);}
.vd-toevoeg select{
  padding:9px 10px;font-size:12px;font-family:inherit;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);outline:none;cursor:pointer;
}
.vd-items{display:flex;flex-direction:column;}
.vd-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 0;border-bottom:1px dotted var(--border);
}
.vd-item:last-child{border-bottom:none;}
.vd-item-vink{
  width:17px;height:17px;border-radius:var(--kader-xs);flex-shrink:0;
  border:1.6px solid var(--border);background:var(--white);cursor:pointer;
  transition:all .15s;
}
.vd-item-vink:hover{border-color:var(--blue);}
.vd-item-af .vd-item-vink{background:var(--success);border-color:var(--success);}
.vd-item-tekst{flex:1;font-size:12.5px;line-height:1.45;min-width:0;}
.vd-item-af .vd-item-tekst{text-decoration:line-through;color:var(--muted);}
.vd-item-soort{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:var(--kader);flex-shrink:0;
}
.vd-soort-zakelijk{background:var(--blue-light);color:var(--blue);}
.vd-soort-prive{background:#EDF1F9;color:#103590;}
.vd-item-x{
  background:none;border:none;color:var(--border);font-size:16px;
  cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0;
}
.vd-item-x:hover{color:var(--danger);}

/* Vraagt aandacht */
.vd-aandacht{display:flex;flex-direction:column;gap:12px;}
.vd-aandacht-rij{display:flex;align-items:center;gap:13px;}
.vd-aandacht-nr{
  width:30px;height:30px;border-radius:var(--kader-sm);flex-shrink:0;
  background:var(--warning-bg);color:var(--warning);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;
}
.vd-aandacht-rij strong{font-size:12.5px;font-weight:700;display:block;}
.vd-aandacht-rij span{font-size:11px;color:var(--muted);display:block;margin-top:2px;}

@media(max-width:1180px){
  .vd-grid{grid-template-columns:1fr 1fr;}
  .vd-kolom{grid-column:span 2;flex-direction:row;}
  .vd-kolom>*{flex:1;}
}
@media(max-width:768px){
  .ws-tabs{width:100%;}
  .ws-tab{flex:1;padding:10px 8px;}
  .vd-grid,.vd-onder{grid-template-columns:1fr;}
  .vd-kolom{grid-column:span 1;}
  .vd-kolom{flex-direction:column;}
  .vd-kop{align-items:flex-start;gap:16px;}
  .vd-groet{font-size:24px;}
  .vd-cijfers{gap:0;justify-content:space-between;width:100%;}
  .vd-cijfer-val{font-size:22px;}
  .vd-kaart{padding:16px 18px;}
  .vd-checkin-rij{flex-direction:column;}
  .vd-checkin-rij button{width:100%;}
  .vd-toevoeg input{min-width:0;flex-basis:100%;}
  .vd-toevoeg select,.vd-toevoeg button{flex:1;}
  .vd-filters{width:100%;margin:8px 0 0;justify-content:space-between;}
  .vd-filter{flex:1;}
  .vd-blok-titel{white-space:normal;}
}

/* ═══ VANDAAG — DE HELPENDE LAAG ═══
   Het advies staat visueel boven alles; de opsomming komt daarna. */

.vd-advies{
  background:var(--dark);color:#fff;border-radius:var(--kader);
  padding:22px 26px;margin-bottom:12px;position:relative;overflow:hidden;
}
.vd-advies::after{
  content:'';position:absolute;right:-60px;top:-60px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,174,239,.22) 0%,rgba(0,174,239,0) 70%);
  pointer-events:none;
}
.vd-advies-leeg{background:var(--white);color:var(--black);border:1px solid var(--border);}
.vd-advies-leeg .vd-advies-lbl{color:var(--muted);}
.vd-advies-kop{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:10px;
}
.vd-advies-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--blue);
}
.vd-reeks{
  font-size:9.5px;font-weight:700;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.1);padding:3px 10px;border-radius:var(--kader);
}
.vd-advies-titel{
  font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.02em;
  max-width:38ch;
}
.vd-advies-titel-rustig{font-size:15px;font-weight:600;line-height:1.55;max-width:60ch;}
.vd-advies-waarom{
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.7);
  margin:8px 0 0;max-width:60ch;
}
.vd-advies-leeg .vd-advies-waarom{color:var(--muted);}
.vd-advies-vg{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:340px;}
.vd-advies-vg-baan{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;}
.vd-advies-vg-deel{height:100%;background:var(--success);border-radius:2px;}
.vd-advies-vg span{font-size:10px;color:rgba(255,255,255,.55);font-weight:700;white-space:nowrap;}
.vd-advies-acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.vd-advies-acties .btn-ghost{
  background:rgba(255,255,255,.1);color:#fff;border:none;
}
.vd-advies-acties .btn-ghost:hover{background:rgba(255,255,255,.18);}
.vd-weg{
  padding:10px 14px;font-size:11.5px;font-weight:700;font-family:inherit;
  background:none;color:rgba(255,255,255,.45);border:none;
  cursor:pointer;border-radius:var(--kader-sm);transition:color .15s;
}
.vd-weg:hover{color:#B0121C;}

/* Alternatieven */
.vd-alt{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.11);
}
.vd-alt-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.4);
}
.vd-alt-knop{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 13px;font-size:11.5px;font-weight:600;font-family:inherit;
  background:rgba(255,255,255,.08);color:#fff;border:none;
  border-radius:var(--kader);cursor:pointer;transition:background .15s;
  text-align:left;max-width:100%;
}
.vd-alt-knop:hover{background:rgba(255,255,255,.16);}
.vd-alt-knop em{font-style:normal;font-size:9.5px;color:rgba(255,255,255,.5);white-space:nowrap;}

/* De rekening van de dag */
.vd-rekening{
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--success);
  border-radius:var(--kader);padding:14px 20px;margin-bottom:12px;
}
.vd-rekening-vol{border-left-color:var(--warning);background:var(--warning-bg);}
.vd-rekening-tekst{font-size:12.5px;line-height:1.6;flex:1;min-width:0;max-width:76ch;}
.vd-rekening-rechts{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.vd-week{font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap;}
.vd-afsluit{
  padding:8px 15px;font-size:11px;font-weight:700;font-family:inherit;
  background:var(--off);color:var(--dark);border:1.5px solid var(--border);
  border-radius:var(--kader-sm);cursor:pointer;white-space:nowrap;transition:all .15s;
}
.vd-afsluit:hover{border-color:var(--blue);color:var(--blue);}

/* Ritmesignaal */
.vd-ritme{
  font-size:12px;line-height:1.6;color:var(--muted);
  padding:0 4px 14px;max-width:80ch;
}
.vd-ritme strong{color:var(--black);}

/* Blijft liggen */
.vd-kaart-liggen{border-left:3px solid var(--warning);}
.vd-liggen-uitleg{
  font-size:11.5px;color:var(--muted);line-height:1.6;
  margin:0 0 13px;max-width:64ch;
}
.vd-liggen-lijst{display:flex;flex-direction:column;}
.vd-liggen{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px dotted var(--border);
}
.vd-liggen:last-child{border-bottom:none;}
.vd-liggen-body{flex:1;min-width:0;}
.vd-liggen-tekst{font-size:12.5px;font-weight:600;line-height:1.4;}
.vd-liggen-reden{font-size:10.5px;color:var(--warning);font-weight:600;margin-top:3px;}
.vd-liggen-acties{display:flex;gap:6px;flex-shrink:0;}
.vd-aandacht-btn{margin-left:auto;flex-shrink:0;}

@media(max-width:768px){
  .vd-advies{padding:18px 18px;}
  .vd-advies-titel{font-size:17px;}
  .vd-advies-acties{gap:6px;}
  .vd-advies-acties button{flex:1;min-width:calc(50% - 3px);}
  .vd-weg{min-width:100%;}
  .vd-alt{flex-direction:column;align-items:stretch;}
  .vd-alt-knop{justify-content:space-between;}
  .vd-rekening{padding:14px 16px;}
  .vd-rekening-rechts{width:100%;justify-content:space-between;}
  .vd-afsluit{flex:1;}
  .vd-liggen{flex-wrap:wrap;}
  .vd-liggen-acties{width:100%;}
  .vd-liggen-acties button{flex:1;}
}

/* ═══════════════════════════════════════════════════════════════════
   PROJECTOVERZICHT — kaarten en tijdlijn
   Eén kaart per project met alles bij elkaar, in plaats van een brede
   tabel die je op telefoon moet wegscrollen.
   ═══════════════════════════════════════════════════════════════════ */

.po-balk{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
.po-filters,.po-views{display:flex;gap:3px;background:var(--off);border-radius:var(--kader);padding:3px;}
.po-views{align-items:center;background:none;padding:0;gap:6px;}
.po-filter,.po-view{
  padding:6px 14px;font-size:11px;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--kader);background:none;color:var(--muted);cursor:pointer;
  transition:all .14s;white-space:nowrap;
}
.po-filter:hover,.po-view:hover{color:var(--blue);}
.po-filter-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.07);}
.po-view{background:var(--off);border:1.5px solid transparent;}
.po-view-on{background:var(--white);border-color:var(--blue);color:var(--blue);}

/* Kaarten */
.po-kaarten{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;
}
.po-kaart{
  background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--border);border-radius:var(--kader);
  padding:16px 18px;display:flex;flex-direction:column;
}
.po-kaart.po-laat{border-left-color:var(--danger);}
.po-kaart.po-risico{border-left-color:var(--warning);}
.po-kaart.po-wacht{border-left-color:var(--blue);}
.po-kaart.po-ok{border-left-color:var(--success);}
.po-kaart.po-af{opacity:.55;}

.po-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;cursor:pointer;}
.po-kop-txt{flex:1;min-width:0;}
.po-klant{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:4px;
}
.po-naam{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;}
.po-kop-rechts{flex-shrink:0;text-align:right;}
.po-volgend{
  background:var(--off);border-radius:var(--kader-sm);padding:5px 10px;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
}
.po-volgend-laat{background:var(--danger-bg);}
.po-volgend-lbl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.po-volgend-datum{font-size:12px;font-weight:700;white-space:nowrap;}
.po-volgend-laat .po-volgend-datum{color:var(--danger);}
.po-geen-datum{font-size:10.5px;color:var(--muted);font-weight:600;font-style:italic;}

/* Fasestappen met eigen datum */
.po-stappen{
  display:flex;gap:2px;margin:14px 0 12px;
  padding-top:12px;border-top:1px solid var(--border);
}
.po-stap{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  position:relative;
}
.po-stap::before{
  content:'';position:absolute;top:5px;left:-50%;width:100%;height:1.5px;
  background:var(--border);z-index:0;
}
.po-stap:first-child::before{display:none;}
.po-stap-klaar::before{background:var(--success);}
.po-stap-bol{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;z-index:1;
  background:var(--white);border:2px solid var(--border);
}
.po-stap-klaar .po-stap-bol{background:var(--success);border-color:var(--success);}
.po-stap-bezig .po-stap-bol{
  background:var(--blue);border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-light);
}
.po-stap-laat .po-stap-bol{background:var(--danger);border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg);}
.po-stap-naam{
  font-size:8.5px;font-weight:700;color:var(--muted);text-align:center;
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.po-stap-bezig .po-stap-naam{color:var(--blue);}
.po-stap-klaar .po-stap-naam{color:var(--success);}
.po-stap-datum{font-size:8px;color:var(--muted);font-variant-numeric:tabular-nums;}
.po-stap-laat .po-stap-datum{color:var(--danger);font-weight:700;}

.po-cijfers{
  display:flex;gap:6px;flex-wrap:wrap;
  font-size:10px;color:var(--muted);
}
.po-cijfers span{
  background:var(--off);padding:3px 9px;border-radius:var(--kader);font-weight:600;
}
.po-offerte-geaccepteerd{background:var(--success-bg)!important;color:var(--success)!important;}
.po-offerte-verzonden{background:var(--warning-bg)!important;color:var(--warning)!important;}

/* Blokkades */
.po-blok{display:flex;flex-direction:column;gap:5px;margin-top:11px;}
.po-blok-rij{
  font-size:11px;line-height:1.45;padding:6px 10px;border-radius:var(--kader-sm);
  font-weight:600;
}
.po-blok-laat{background:var(--danger-bg);color:var(--danger);}
.po-blok-risico{background:var(--warning-bg);color:var(--warning);}
.po-blok-wacht{background:var(--blue-light);color:var(--blue);}
.po-blok-geld{background:var(--warning-bg);color:var(--warning);}

.po-detail{margin-top:13px;padding-top:13px;border-top:1px solid var(--border);}
.po-desc{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 10px;}
.po-fase-notitie{font-size:11.5px;line-height:1.55;margin-bottom:6px;}
.po-fase-notitie strong{color:var(--blue);}
.po-acties{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}

.po-leeg{
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);
  padding:32px 24px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.65;
}

/* ── Tijdlijn ── */
.po-tijdlijn{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:16px 18px;overflow-x:auto;
}
.po-tl-kop{display:flex;gap:10px;margin-bottom:10px;min-width:640px;}
.po-tl-naamkolom{width:150px;flex-shrink:0;}
.po-tl-schaal{flex:1;display:flex;}
.po-tl-week{
  flex:1;font-size:8.5px;color:var(--muted);font-weight:700;
  text-align:left;padding-left:3px;border-left:1px solid var(--border);
  overflow:hidden;white-space:nowrap;
}
.po-tl-nu{color:var(--blue);border-left-color:var(--blue);}
.po-tl-rijen{display:flex;flex-direction:column;gap:3px;min-width:640px;}
.po-tl-rij{
  display:flex;gap:10px;align-items:center;padding:7px 0;cursor:pointer;
  border-radius:var(--kader-sm);transition:background .14s;
}
.po-tl-rij:hover{background:var(--off);}
.po-tl-naam{
  font-size:11.5px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.po-tl-klant{font-size:9.5px;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.po-tl-baan{flex:1;position:relative;height:22px;}
.po-tl-lijn{
  position:absolute;top:0;bottom:0;width:1px;background:var(--border);
}
.po-tl-lijn-nu{background:var(--blue);opacity:.4;}
.po-tl-balk{
  position:absolute;top:8px;height:6px;border-radius:var(--kader-xs);
  background:var(--blue-light);
}
.po-tl-punt{
  position:absolute;top:5px;width:12px;height:12px;border-radius:50%;
  transform:translateX(-50%);
  background:var(--white);border:2px solid var(--muted);
}
.po-tl-punt-klaar{background:var(--success);border-color:var(--success);}
.po-tl-punt-bezig{background:var(--blue);border-color:var(--blue);}
.po-tl-punt-laat{background:var(--danger);border-color:var(--danger);}
.po-tl-zonder{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--border);
  font-size:11.5px;line-height:1.6;
}
.po-tl-zonder strong{display:block;margin-bottom:3px;}
.po-tl-zonder span{color:var(--muted);}

/* Fasedatums in het projectformulier.
   Het tekstveld staat buiten .mf, dus de breedte- en randregels van
   .mf input gelden er niet automatisch voor. Zonder deze regels valt
   het veel smaller uit dan de rest van het formulier. */
.pf-fase{margin-bottom:10px;}
.pf-fase-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;}
.pf-fase-kop label{
  font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:.07em;text-transform:uppercase;
}
.pf-fase-kop input[type=date]{
  width:132px;flex-shrink:0;padding:6px 10px;
  font-size:11.5px;font-family:inherit;color:var(--black);
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);outline:none;transition:border-color .15s;
}
.pf-fase-kop input[type=date]:focus{border-color:var(--blue);}
.pf-fase textarea{
  display:block;width:100%;min-height:48px;resize:vertical;
  padding:9px 12px;font-size:12.5px;font-family:inherit;color:var(--black);
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);outline:none;transition:border-color .15s;
}
.pf-fase textarea:focus{border-color:var(--blue);}

@media(max-width:768px){
  .po-balk{flex-direction:column;align-items:stretch;}
  .po-filters{width:100%;overflow-x:auto;scrollbar-width:none;}
  .po-filters::-webkit-scrollbar{display:none;}
  .po-filter{flex:1;white-space:nowrap;}
  .po-views{width:100%;}
  .po-view{flex:1;}
  .po-views .btn-blue{flex:1;}
  .po-kaarten{grid-template-columns:1fr;}
  .po-stap-naam{font-size:7.5px;}
  .po-stap-datum{font-size:7.5px;}
  .po-tijdlijn{padding:14px 12px;}
  .po-tl-naamkolom{width:110px;}
}

/* ═══ OFFERTEMODAL — soorten en extra velden ═══
   Volgt de bestaande modalopmaak: labels in kleinkapitaal, velden met
   dezelfde hoogte, randen en radius als .mf input. */

/* Optioneel-hint achter een label */
.mf-opt{color:var(--muted);font-weight:400;font-size:10px;text-transform:none;letter-spacing:0;}

/* Soortkeuze */
.of-soorten{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1rem;
}
.of-soort{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:11px 13px;font-family:inherit;cursor:pointer;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--kader-sm);transition:all .14s;
}
.of-soort:hover{border-color:var(--blue);}
.of-soort-on{
  border-color:var(--blue);background:var(--blue-light);
  box-shadow:inset 0 0 0 1px var(--blue);
}
.of-soort-naam{font-size:12.5px;font-weight:700;color:var(--black);}
.of-soort-on .of-soort-naam{color:var(--blue);}
.of-soort-uitleg{font-size:10px;color:var(--muted);line-height:1.4;}

/* Hint- en rekenregels */
.of-hint{
  font-size:11.5px;color:var(--muted);line-height:1.55;
  background:var(--off);border-radius:var(--kader-sm);
  padding:9px 12px;margin-bottom:12px;
}
.of-hint strong{color:var(--black);}
.of-hint-waarschuwing{background:var(--warning-bg);color:var(--warning);}
.of-hint-waarschuwing strong{color:var(--warning);}

/* Staffelregels */
.of-staffels{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
.of-staffel{display:flex;align-items:center;gap:7px;}
.of-staffel-lbl{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.of-staffel input{
  width:74px;flex-shrink:0;padding:7px 9px;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-staffel input:focus{border-color:var(--blue);}
.of-staffel-korting{
  flex:1;font-size:11px;font-weight:700;color:var(--blue);
  text-align:right;white-space:nowrap;
}

/* Losse regels (inbegrepen) */
.of-regel{display:flex;align-items:center;gap:7px;}
.of-regel input{
  flex:1;min-width:0;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-regel input:focus{border-color:var(--blue);}

/* Uitgangspunten: label plus toelichting */
.of-uitg{display:flex;align-items:center;gap:7px;}
.of-uitg input:first-child{
  width:118px;flex-shrink:0;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-uitg input:nth-child(2){
  flex:1;min-width:0;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-uitg input:focus{border-color:var(--blue);}

/* Inline invoerveld naast een toevoegknop */
.of-inline-inp{
  flex:1;min-width:0;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  font-size:12.5px;font-family:inherit;color:var(--black);
  background:var(--white);outline:none;transition:border-color .15s;
}
.of-inline-inp:focus{border-color:var(--blue);}

/* Verwijderknopje */
.of-x{
  width:26px;height:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--kader-sm);
  color:var(--border);font-size:17px;line-height:1;cursor:pointer;
  transition:all .14s;font-family:inherit;
}
.of-x:hover{color:var(--danger);background:var(--danger-bg);}

@media(max-width:640px){
  .of-soorten{grid-template-columns:1fr;}
  .of-staffel{flex-wrap:wrap;}
  .of-staffel input{flex:1;width:auto;min-width:70px;}
  .of-staffel-korting{width:100%;text-align:left;}
  .of-uitg{flex-wrap:wrap;}
  .of-uitg input:first-child{width:100%;}
  .of-uitg input:nth-child(2){flex-basis:calc(100% - 33px);}
}

/* ── Zwevende modalvoet: dekt de onderpadding af ──
   .modal-footer is sticky met bottom:0, maar dat is de onderkant van
   het padding-vak. Met 2rem onderpadding bleef er een strook over
   waar de inhoud onder de knoppen doorschoof. De negatieve marge trekt
   de voet tot de onderrand door, de padding houdt de knoppen op hun
   plek. */
.modal-footer{
  bottom:-2rem;
  margin-bottom:-2rem;
  padding-bottom:2rem;
}
@media(max-width:768px){
  .modal-footer{
    bottom:-2rem;
    margin-bottom:-2rem;
    padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  }
}

/* ── Weekpagina: ruimte-blok ── */
.ws-ruimte-kop{
  display:flex;align-items:baseline;gap:9px;
  padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--border);
}
.ws-ruimte-getal{
  font-size:24px;font-weight:800;color:var(--blue);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.ws-ruimte-lbl{font-size:11.5px;color:var(--muted);line-height:1.4;}

/* ── Standaardteksten in Beheer ── */
.od-tabs{
  display:flex;gap:3px;background:var(--off);border-radius:var(--kader);
  padding:3px;width:fit-content;margin-bottom:16px;flex-wrap:wrap;
}
.od-tab{
  padding:6px 15px;font-size:11px;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--kader);background:none;color:var(--muted);
  cursor:pointer;transition:all .14s;white-space:nowrap;
}
.od-tab:hover{color:var(--blue);}
.od-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.07);}
.od-blok{margin-bottom:20px;}
.od-blok:last-child{margin-bottom:0;}
.od-kop{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;margin-bottom:11px;
}
.od-titel{font-size:13px;font-weight:700;}
.od-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5;max-width:60ch;}
.od-herstel{font-size:10.5px!important;padding:5px 12px!important;white-space:nowrap;}
#od-uitg,#od-incl{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
.od-plus{font-size:11px!important;padding:5px 13px!important;}

@media(max-width:640px){
  .od-tabs{width:100%;}
  .od-tab{flex:1;}
}

/* Tekstvelden in het beheerscherm voor standaardteksten */
.od-tekst{
  display:block;width:100%;min-height:52px;resize:vertical;
  padding:9px 12px;font-size:12.5px;font-family:inherit;color:var(--black);
  line-height:1.55;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);outline:none;transition:border-color .15s;
}
.od-tekst:focus{border-color:var(--blue);}
#od-lever{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}

/* ═══════════════════════════════════════════════════════════════════
   KLANTPORTAAL — TIJDLIJN EN INVESTERING
   ═══════════════════════════════════════════════════════════════════ */

.pi-leeg{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0;}
.pi-voet{font-size:11px;color:var(--muted);line-height:1.6;margin-top:14px;}

/* Tijdlijn */
.pi-tl{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:16px 18px;overflow-x:auto;
}
.pi-tl-kop{display:flex;gap:12px;margin-bottom:9px;min-width:560px;}
.pi-tl-naam{width:150px;flex-shrink:0;}
.pi-tl-schaal{flex:1;display:flex;}
.pi-tl-week{
  flex:1;font-size:8.5px;font-weight:700;color:var(--muted);
  border-left:1px solid var(--border);padding-left:4px;
  overflow:hidden;white-space:nowrap;
}
.pi-tl-nu{color:var(--blue);border-left-color:var(--blue);}
.pi-tl-rij{
  display:flex;gap:12px;align-items:center;min-width:560px;
  padding:8px 0;cursor:pointer;border-radius:var(--kader-sm);transition:background .14s;
}
.pi-tl-rij:hover{background:var(--off);}
.pi-tl-titel{
  font-size:12px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pi-tl-fase{font-size:10px;color:var(--muted);margin-top:1px;}
.pi-tl-baan{flex:1;position:relative;height:22px;}
.pi-tl-lijn{position:absolute;top:0;bottom:0;width:1px;background:var(--border);}
.pi-tl-lijn-nu{background:var(--blue);opacity:.4;}
.pi-tl-balk{
  position:absolute;top:8px;height:6px;border-radius:var(--kader-xs);background:var(--blue-light);
}
.pi-tl-punt{
  position:absolute;top:5px;width:12px;height:12px;border-radius:50%;
  transform:translateX(-50%);background:var(--white);border:2px solid var(--border);
}
.pi-tl-punt.pi-klaar{background:var(--success);border-color:var(--success);}
.pi-tl-punt.pi-loopt{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}

.pi-legenda{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;
  font-size:10.5px;color:var(--muted);
}
.pi-legenda span{display:flex;align-items:center;gap:5px;}
.pi-legenda i{
  width:9px;height:9px;border-radius:50%;
  background:var(--white);border:2px solid var(--border);
}
.pi-legenda i.pi-klaar{background:var(--success);border-color:var(--success);}
.pi-legenda i.pi-loopt{background:var(--blue);border-color:var(--blue);}

.pi-zonder{
  margin-top:12px;padding:12px 15px;background:var(--off);
  border-radius:var(--kader-sm);font-size:11.5px;line-height:1.6;
}
.pi-zonder strong{display:block;margin-bottom:2px;}
.pi-zonder span{color:var(--muted);}

/* Investering */
.pi-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:18px;
}
.pi-kpi{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:15px 17px;
}
.pi-kpi-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:7px;
}
.pi-kpi-val{
  font-size:20px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.pi-kpi-sub{font-size:10.5px;color:var(--muted);margin-top:5px;}

.pi-blok{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:16px 18px;margin-bottom:14px;
}
.pi-blok-kop{font-size:13px;font-weight:700;margin-bottom:12px;}
.pi-rij{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:10px 0;border-bottom:1px dotted var(--border);
}
.pi-rij:last-child{border-bottom:none;}
.pi-rij-txt{flex:1;min-width:0;}
.pi-rij-titel{font-size:12.5px;font-weight:700;line-height:1.35;}
.pi-rij-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45;}
.pi-rij-rechts{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.pi-bedrag{
  font-size:13px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pi-status{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:var(--kader);white-space:nowrap;
}
.pi-betaald{background:var(--success-bg);color:var(--success);}
.pi-open{background:var(--warning-bg);color:var(--warning);}
.pi-telaat{background:var(--danger-bg);color:var(--danger);}

@media(max-width:640px){
  .pi-tl{padding:14px 12px;}
  .pi-tl-naam{width:110px;}
  .pi-kpis{grid-template-columns:1fr;}
  .pi-rij{flex-wrap:wrap;}
  .pi-rij-rechts{width:100%;justify-content:space-between;}
}

/* ═══ PORTAALPANEEL IN HET KLANTDETAIL ═══
   Drie kolommen die samen laten zien hoe het portaal van deze klant
   ervoor staat: wat bij hen ligt, wat bij ons, en wat ze te zien
   krijgen. */

.kp-paneel{
  display:grid;grid-template-columns:1fr 1fr 1.15fr;
  gap:12px;margin-bottom:1.25rem;
}
.kp-kolom{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:15px 17px;
}
.kp-kop{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:11px;
}
.kp-titel{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);
}
.kp-telling{
  font-size:11px;font-weight:700;color:var(--muted);
  background:var(--off);padding:2px 9px;border-radius:var(--kader);min-width:24px;text-align:center;
}
.kp-telling-aan{background:var(--blue-light);color:var(--blue);}
.kp-telling-actie{background:var(--warning-bg);color:var(--warning);}

.kp-rij{
  display:flex;align-items:center;gap:9px;
  padding:6px 0;border-bottom:1px dotted var(--border);
}
.kp-rij:last-child{border-bottom:none;}
.kp-stip{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.kp-rij-txt{
  flex:1;min-width:0;font-size:12px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kp-sinds{font-size:10.5px;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.kp-lang{color:var(--warning);font-weight:700;}
.kp-leeg{font-size:11.5px;color:var(--muted);line-height:1.6;margin:0;}

/* Schakelaars: één klik aan of uit */
.kp-schakels{display:flex;flex-wrap:wrap;gap:5px;}
.kp-schakel{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px 4px 7px;font-size:10.5px;font-weight:600;font-family:inherit;
  background:var(--off);color:var(--muted);
  border:1.5px solid transparent;border-radius:var(--kader);cursor:pointer;
  transition:all .14s;
}
.kp-schakel:hover{border-color:var(--border);}
.kp-schakel.kp-aan{
  background:var(--blue-light);color:var(--blue);border-color:var(--blue);
}
.kp-vink{
  width:13px;height:13px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;
  background:var(--white);border:1.5px solid var(--border);color:var(--blue);
}
.kp-schakel.kp-aan .kp-vink{background:var(--blue);border-color:var(--blue);color:#fff;}

.kp-toegang{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:2px;
}
.kp-toegang-ok{font-size:11.5px;font-weight:700;color:var(--success);}
.kp-toegang-nee{font-size:11.5px;font-weight:700;color:var(--warning);}
.kp-toegang-sub{font-size:10.5px;color:var(--muted);}

@media(max-width:1100px){
  .kp-paneel{grid-template-columns:1fr 1fr;}
  .kp-kolom:last-child{grid-column:span 2;}
}
@media(max-width:640px){
  .kp-paneel{grid-template-columns:1fr;}
  .kp-kolom:last-child{grid-column:span 1;}
}

/* Gegroepeerde tabbladen in het klantdetail */
.ctabs-groepen{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:0 12px;
}
.ctabs-groepen .ctab{padding:12px 12px;}
.ctab-groep{
  display:flex;align-items:center;gap:3px;
  padding-right:12px;margin-right:4px;
  border-right:1px solid var(--border);
}
.ctab-groep:last-child{border-right:none;padding-right:0;margin-right:0;}
/* De groepslabels boven de tabbladen van een klant. Deze stonden in de
   randkleur, en dat is geen tekstkleur: contrast 1,41 op de
   achtergrond, oftewel onleesbaar. Nu dezelfde kleur als alle andere
   bijschriften in het dashboard. */
.ctab-groep-lbl{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-right:3px;white-space:nowrap;
}
.ctabs-groepen .ctab{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.ctab-stip{
  width:6px;height:6px;border-radius:50%;background:var(--danger);
  flex-shrink:0;display:inline-block;
}

@media(max-width:768px){
  .ctabs-groepen{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -1rem;padding:0 1rem;
  }
  .ctabs-groepen::-webkit-scrollbar{display:none;}
  .ctab-groep{flex-shrink:0;}
}

/* ═══════════════════════════════════════════════════════════════════
   JAARVERSLAG — BEHEER
   ═══════════════════════════════════════════════════════════════════ */

.jv-kop{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.jv-jaren{display:flex;gap:3px;background:var(--off);border-radius:var(--kader);padding:3px;}
.jv-jaar{
  padding:6px 16px;font-size:11.5px;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--kader);background:none;color:var(--muted);cursor:pointer;transition:all .14s;
}
.jv-jaar-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.07);}

.jv-leeg{
  background:var(--off);border-radius:var(--kader);padding:22px 24px;
  font-size:12.5px;line-height:1.7;
}
.jv-leeg strong{display:block;margin-bottom:4px;}
.jv-leeg span{color:var(--muted);}

.jv-schakelaar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--off);border-radius:var(--kader);padding:15px 18px;margin-bottom:16px;
  border-left:3px solid var(--border);
}
.jv-schakelaar.jv-aan{background:var(--success-bg);border-left-color:var(--success);}
.jv-schakelaar-titel{font-size:13px;font-weight:700;}
.jv-schakelaar-sub{font-size:11.5px;color:var(--muted);margin-top:3px;max-width:58ch;line-height:1.5;}

.jv-reacties-kop{
  font-size:11.5px;font-weight:700;color:var(--blue);
  margin-bottom:10px;
}

.jv-lijst{display:flex;flex-direction:column;gap:8px;}
.jv-klant{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.jv-klant-live{border-left:3px solid var(--success);}
.jv-klant-kop{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:13px 16px;cursor:pointer;flex-wrap:wrap;
}
.jv-klant-naam{font-size:13px;font-weight:700;}
.jv-klant-cijfers{font-size:11px;color:var(--muted);margin-top:3px;}
.jv-klant-status{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.jv-pil{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:var(--kader);white-space:nowrap;
}
.jv-pil-concept{background:var(--off);color:var(--muted);}
.jv-pil-klaar{background:var(--warning-bg);color:var(--warning);}
.jv-pil-live{background:var(--success-bg);color:var(--success);}
.jv-pil-reactie{background:var(--blue-light);color:var(--blue);}

.jv-bewerk{padding:0 16px 16px;border-top:1px solid var(--border);}
.jv-veld{margin-top:14px;}
.jv-veld label{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:5px;
}
.jv-veld textarea,.jv-veld input{
  display:block;width:100%;padding:9px 12px;font-size:12.5px;font-family:inherit;
  color:var(--black);line-height:1.55;background:var(--white);
  border:1.5px solid var(--border);border-radius:var(--kader-sm);outline:none;
  transition:border-color .15s;resize:vertical;
}
.jv-veld textarea:focus,.jv-veld input:focus{border-color:var(--blue);}
.jv-hoogtepunt{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.jv-hoogtepunt-naam{
  width:150px;flex-shrink:0;font-size:11.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jv-hoogtepunt input{flex:1;min-width:0;}

.jv-reactie{
  background:var(--blue-light);border-radius:var(--kader-sm);padding:12px 14px;margin-top:14px;
}
.jv-reactie-kop{font-size:11px;font-weight:700;color:var(--blue);margin-bottom:5px;}
.jv-reactie p{font-size:12.5px;line-height:1.6;margin:0;}
.jv-stil{color:var(--muted);font-style:italic;}

.jv-acties{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;}
.jv-acties-sub{font-size:10.5px;color:var(--muted);margin-left:auto;}

/* Voorbeeldvenster */
.jv-voorbeeld-modal{max-width:720px!important;max-height:88vh;overflow-y:auto;}
.jv-voorbeeld-kop{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);
}
.jv-voorbeeld-kop span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}

/* ═══ JAARVERSLAG — KLANTKANT ═══ */

.jvk-hero{
  background:var(--dark);color:#fff;border-radius:var(--kader);
  padding:30px 32px;margin-bottom:16px;position:relative;overflow:hidden;
}
.jvk-hero::after{
  content:'';position:absolute;right:-80px;top:-80px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,174,239,.25) 0%,rgba(0,174,239,0) 70%);
}
.jvk-jaar{
  font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--blue);
  margin-bottom:10px;position:relative;
}
.jvk-titel{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.02em;position:relative;}
.jvk-opening{
  font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.78);
  margin-top:14px;max-width:62ch;position:relative;
}

.jvk-cijfers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-bottom:16px;
}
.jvk-cijfer{
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);
  padding:18px 16px;text-align:center;
}
.jvk-cijfer-val{
  font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--blue);
}
.jvk-cijfer-lbl{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.4;}

.jvk-blok{
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);
  padding:20px 22px;margin-bottom:14px;
}
.jvk-blok h3{font-size:14px;font-weight:700;margin-bottom:14px;}

.jvk-hoogte{display:flex;flex-direction:column;gap:14px;}
.jvk-hoogte-item{padding-left:14px;border-left:3px solid var(--blue);}
.jvk-hoogte-naam{font-size:13.5px;font-weight:700;}
.jvk-hoogte-type{font-size:10.5px;color:var(--muted);margin-top:2px;}
.jvk-hoogte-item p{font-size:12.5px;line-height:1.7;color:var(--black);margin:6px 0 0;max-width:64ch;}

.jvk-tijdlijn{display:flex;flex-direction:column;}
.jvk-maand{
  display:flex;gap:16px;align-items:flex-start;
  padding:10px 0;border-bottom:1px dotted var(--border);
}
.jvk-maand:last-child{border-bottom:none;}
.jvk-maand-naam{
  width:88px;flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--blue);
  text-transform:capitalize;padding-top:2px;
}
.jvk-maand-items{display:flex;gap:6px;flex-wrap:wrap;}
.jvk-item{
  font-size:11px;padding:4px 10px;border-radius:var(--kader);
  background:var(--off);color:var(--black);
}
.jvk-project{background:var(--success-bg);color:var(--success);font-weight:600;}
.jvk-draaidag{background:var(--blue-light);color:var(--blue);}

.jvk-resultaat-rij{display:flex;gap:32px;flex-wrap:wrap;}
.jvk-resultaat-rij>div{display:flex;flex-direction:column;}
.jvk-resultaat-rij span{font-size:24px;font-weight:800;color:var(--blue);line-height:1;letter-spacing:-.02em;}
.jvk-resultaat-rij small{font-size:11px;color:var(--muted);margin-top:5px;max-width:22ch;line-height:1.4;}

.jvk-vooruit p{font-size:13px;line-height:1.75;margin:0;max-width:64ch;}

.jvk-cta{
  background:linear-gradient(135deg,var(--blue-light) 0%,var(--white) 100%);
  border:1.5px solid var(--blue);border-radius:var(--kader);
  padding:26px 28px;text-align:center;
}
.jvk-cta h3{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;}
.jvk-cta p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 auto 18px;max-width:52ch;}
.jvk-keuzes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
.jvk-keuze{
  padding:12px 24px;font-size:13px;font-weight:700;font-family:inherit;
  border-radius:var(--kader-sm);cursor:pointer;transition:all .15s;
  background:var(--white);color:var(--blue);border:1.5px solid var(--blue);
}
.jvk-keuze:hover{background:var(--blue-light);}
.jvk-keuze-ja{background:var(--gradient);color:#fff;border-color:transparent;}
.jvk-keuze-ja:hover{opacity:.92;background:var(--gradient);}
.jvk-cta textarea{
  display:block;width:100%;max-width:520px;margin:0 auto;
  padding:11px 14px;font-size:12.5px;font-family:inherit;line-height:1.6;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);outline:none;resize:vertical;
}
.jvk-cta textarea:focus{border-color:var(--blue);}
.jvk-bedankt{
  background:var(--white);border-radius:var(--kader-sm);padding:16px 20px;
  display:flex;flex-direction:column;gap:4px;
}
.jvk-bedankt strong{font-size:13.5px;}
.jvk-bedankt span{font-size:12px;color:var(--muted);}

@media(max-width:640px){
  .jv-kop{flex-direction:column;align-items:stretch;}
  .jv-jaren{width:100%;}
  .jv-jaar{flex:1;}
  .jv-hoogtepunt{flex-wrap:wrap;}
  .jv-hoogtepunt-naam{width:100%;}
  .jv-acties-sub{margin-left:0;width:100%;}
  .jvk-hero{padding:22px 20px;}
  .jvk-titel{font-size:21px;}
  .jvk-cijfers{grid-template-columns:repeat(2,1fr);}
  .jvk-maand{flex-direction:column;gap:6px;}
  .jvk-maand-naam{width:auto;}
  .jvk-resultaat-rij{gap:20px;}
  .jvk-cta{padding:22px 18px;}
  .jvk-keuze{width:100%;}
}

/* Compleetheid van het klantdossier */
.kc-balk{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--warning-bg);border-left:3px solid var(--warning);
  border-radius:var(--kader);padding:13px 17px;
}
.kc-balk.kc-ernstig{background:var(--danger-bg);border-left-color:var(--danger);}
.kc-txt{flex:1;min-width:0;}
.kc-txt strong{display:block;font-size:12.5px;font-weight:700;}
.kc-txt span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.55;max-width:70ch;}

/* ═══ BEDRIJFSGEGEVENS ═══ */
.bg-waarschuwing{
  background:var(--danger-bg);border-left:3px solid var(--danger);
  border-radius:var(--kader-sm);padding:12px 15px;margin-bottom:18px;
}
.bg-waarschuwing strong{display:block;font-size:12.5px;}
.bg-waarschuwing span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.55;}
.bg-goed{
  background:var(--success-bg);color:var(--success);border-radius:var(--kader-sm);
  padding:9px 15px;margin-bottom:18px;font-size:11.5px;font-weight:700;
}
.bg-groep{margin-bottom:18px;}
.bg-groep:last-of-type{margin-bottom:0;}
.bg-groep-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid var(--border);
}
.bg-rij{display:flex;gap:12px;flex-wrap:wrap;}
.bg-veld{flex:1;min-width:190px;display:flex;flex-direction:column;}
.bg-veld.bg-kort{flex:0 0 140px;min-width:140px;}
.bg-veld label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:5px;
}
.bg-ster{color:var(--danger);margin-left:3px;}
.bg-veld input{
  padding:9px 12px;font-size:12.5px;font-family:inherit;color:var(--black);
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);outline:none;transition:border-color .15s;
}
.bg-veld input:focus{border-color:var(--blue);}
.bg-uitleg{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.5;}
.bg-voet{font-size:11px;color:var(--muted);margin-top:16px;line-height:1.6;}
@media(max-width:640px){.bg-veld,.bg-veld.bg-kort{flex:1 1 100%;min-width:0;}}

/* Tabbladen in de klantmodal — zelfde vorm als de tabrij van
   Weekstart, zodat het dashboard één taal spreekt. */
.cm-tabs{
  display:flex;gap:4px;background:var(--off);border-radius:var(--kader-sm);
  padding:3px;margin-bottom:18px;
}
.cm-tab{
  flex:1;padding:8px 12px;font-size:11.5px;font-weight:700;font-family:inherit;
  border:none;border-radius:var(--kader-xs);background:none;
  color:var(--muted);cursor:pointer;transition:all .14s;white-space:nowrap;
}
.cm-tab:hover{color:var(--blue);}
.cm-tab-on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.cm-paneel{display:none;}
.cm-paneel-on{display:block;}
.cm-paneel .section-div:first-child{margin-top:0;}
.cm-uitleg{
  font-size:11.5px;color:var(--muted);line-height:1.6;
  background:var(--off);border-radius:var(--kader-sm);padding:9px 12px;margin-bottom:14px;
}

/* ═══ AFSPRAKEN IN DE PLANNING ═══
   Bewust een andere vorm dan een werkblok: gestreepte rand en een
   lichte achtergrond, zodat je een overleg nooit aanziet voor een
   draaidag. */
.plan-block.plan-afspraak{
  border-style:dashed!important;
  background:var(--off);
}
.plan-afspraak-teken{font-size:9px;flex-shrink:0;}
.plan-afspraak-sub{
  font-size:9.5px;color:var(--muted);margin-top:3px;line-height:1.4;
}

/* Werkblok of afspraak: zelfde tabrij als elders in het dashboard,
   met de uitleg eronder in plaats van in de knop. */
.pb-soorten{
  display:flex;gap:4px;background:var(--off);border-radius:var(--kader-sm);
  padding:3px;margin-bottom:6px;
}
.pb-soort{
  flex:1;padding:8px 14px;font-family:inherit;cursor:pointer;
  border:none;border-radius:var(--kader-xs);background:none;
  transition:all .14s;text-align:center;
}
.pb-soort:hover .pb-soort-naam{color:var(--blue);}
.pb-soort-on{background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pb-soort-naam{
  display:block;font-size:11.5px;font-weight:700;color:var(--muted);transition:color .14s;
}
.pb-soort-on .pb-soort-naam{color:var(--blue);}
/* De uitleg staat onder de rij, van de gekozen soort */
.pb-soort-uitleg{display:none;}
.pb-soort-hint{
  font-size:11px;color:var(--muted);line-height:1.5;
  margin-bottom:1rem;padding:0 2px;
}

/* Agenda-abonnement */
.ag-uitleg{font-size:12px;color:var(--muted);line-height:1.65;margin-bottom:14px;max-width:72ch;}
.ag-rij{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px dotted var(--border);
}
.ag-rij:last-of-type{border-bottom:none;}
.ag-naam{font-size:12.5px;font-weight:700;min-width:130px;}
.ag-link{
  flex:1;min-width:180px;font-size:10.5px;color:var(--muted);
  background:var(--off);padding:5px 9px;border-radius:var(--kader-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;
}
.ag-klein{font-size:10.5px!important;padding:5px 11px!important;}
.ag-geen{flex:1;font-size:11.5px;color:var(--muted);}
.ag-waarschuwing{
  font-size:11px;color:var(--warning);line-height:1.6;margin-top:12px;
  background:var(--warning-bg);border-radius:var(--kader-sm);padding:9px 12px;
}
@media(max-width:640px){.ag-naam{min-width:100%;}.ag-link{min-width:100%;}}

/* ═══ WEEKMAIL ═══
   Eén schakelaar bovenaan die de rest aan- of uitzet. Staat hij uit,
   dan blijven de instellingen zichtbaar maar gedempt: je ziet nog wat
   er zou gebeuren zonder dat het iets doet. */
.wm-kop{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--border);
}
.wm-kop-titel{font-size:14px;font-weight:800;color:var(--royal);letter-spacing:-.01em;}
.wm-kop-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.55;max-width:60ch;}
.wm-inhoud{padding-top:4px;transition:opacity .2s;}
.wm-inhoud.wm-uit{opacity:.45;}
.wm-inhoud.wm-uit .wm-vak,
.wm-inhoud.wm-uit .wm-knoppen{pointer-events:none;}
.wm-inhoud.wm-uit .wm-cron{opacity:1;}

.wm-vak{padding:14px 0;border-bottom:1px dotted var(--border);}
.wm-label{
  font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;
}
.wm-regel{font-size:13px;color:var(--black);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.wm-sel{
  font-family:inherit;font-size:13px;font-weight:700;color:var(--royal);
  padding:6px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);cursor:pointer;
}
.wm-sel:focus{outline:none;border-color:var(--royal);}
.wm-klein{font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:8px;max-width:72ch;}

.wm-rij{display:flex;align-items:center;gap:10px;padding:7px 0;}
.wm-stip{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.wm-naam{font-size:12.5px;font-weight:700;min-width:140px;}
.wm-mail{flex:1;min-width:0;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wm-geen{font-size:11px;color:var(--muted);font-style:italic;}

.wm-keuze{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;}
.wm-keuze i{color:var(--royal);}
.wm-keuze span{font-size:12.5px;}

.wm-knoppen{display:flex;gap:9px;flex-wrap:wrap;padding:14px 0 2px;}

.wm-cron{margin-top:10px;border-top:1px solid var(--border);padding-top:12px;}
.wm-cron > summary{
  font-size:12px;font-weight:700;color:var(--royal);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:7px;
}
.wm-cron > summary::-webkit-details-marker{display:none;}
.wm-cron > summary::before{
  content:'';width:6px;height:6px;flex-shrink:0;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s;
}
.wm-cron[open] > summary::before{transform:rotate(45deg);}
.wm-cron-body{padding-top:12px;}
.wm-cron-body p{font-size:12px;color:var(--muted);line-height:1.65;margin-bottom:10px;max-width:72ch;}
.wm-cron-body .wm-label{margin-top:14px;}
.wm-code{
  display:block;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bone-vlak);color:var(--black);
  padding:9px 12px;border-radius:var(--kader-sm);margin-bottom:9px;
  overflow-x:auto;white-space:nowrap;
}
.wm-klein-knop{font-size:11px!important;padding:6px 12px!important;}
@media(max-width:640px){
  .wm-kop{flex-direction:row;align-items:flex-start;}
  /* Naam en schakelaar op de eerste regel, het adres eronder,
     ingesprongen tot onder de naam. Zonder flex-wrap kneep het adres
     de naam over twee regels en stond het bolletje tussen de regels. */
  .wm-rij{flex-wrap:wrap;row-gap:2px;}
  .wm-naam{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wm-mail{flex-basis:100%;order:3;padding-left:19px;}
}

/* ═══ KLANTVOORSTELLEN ═══ */
.vs-blok{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:18px 20px;
}
.vs-kop{margin-bottom:14px;}
.vs-titel{font-size:14px;font-weight:700;}
.vs-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.55;max-width:66ch;}
.vs-lijst{margin-bottom:14px;}
.vs-rij{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px dotted var(--border);
}
.vs-rij:last-child{border-bottom:none;}
.vs-stip{width:7px;height:7px;border-radius:50%;background:var(--warning);flex-shrink:0;}
.vs-stip.vs-ok{background:var(--success);}
.vs-stip.vs-nee{background:var(--border);}
.vs-rij-txt{flex:1;min-width:0;}
.vs-rij-txt strong{display:block;font-size:12.5px;}
.vs-rij-txt span{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.vs-pil{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:var(--kader);white-space:nowrap;
  background:var(--warning-bg);color:var(--warning);
}
.vs-pil-ok{background:var(--success-bg);color:var(--success);}
.vs-pil-nee{background:var(--off);color:var(--muted);}

.vs-formulier{
  background:var(--off);border-radius:var(--kader-sm);padding:14px 16px;
}
.vs-velden{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.vs-veld{flex:1;min-width:150px;display:flex;flex-direction:column;margin-bottom:10px;}
.vs-veld.vs-kort{flex:0 0 120px;min-width:120px;}
.vs-velden .vs-veld{margin-bottom:0;}
.vs-veld label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:5px;
}
.vs-opt{font-weight:400;text-transform:none;letter-spacing:0;}
.vs-veld input,.vs-veld select{
  padding:9px 11px;font-size:12.5px;font-family:inherit;color:var(--black);
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);outline:none;transition:border-color .15s;
}
.vs-veld input:focus,.vs-veld select:focus{border-color:var(--blue);}
.vs-historie{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.vs-reactie{
  font-size:11.5px;color:var(--muted);line-height:1.6;
  background:var(--off);border-radius:var(--kader-sm);padding:9px 12px;margin-top:8px;
}

/* Dashboardkant */
.vs-leeg{font-size:12.5px;color:var(--muted);margin:0;}
.vs-kaart{
  background:var(--white);border:1px solid var(--border);border-left:3px solid var(--blue);
  border-radius:var(--kader);padding:15px 18px;margin-bottom:10px;
  transition:box-shadow .15s;
}
.vs-kaart:hover{box-shadow:0 2px 10px rgba(0,0,0,.05);}
.vs-kaart-kop{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.vs-kaart-klant{font-size:13px;font-weight:700;}
.vs-kaart-wanneer{font-size:11.5px;color:var(--blue);font-weight:600;margin-top:3px;}
.vs-kaart-datum{font-size:10.5px;color:var(--muted);white-space:nowrap;}
.vs-kaart-onderwerp{font-size:12.5px;line-height:1.6;margin:9px 0 0;max-width:70ch;}
.vs-botsing{
  font-size:11.5px;color:var(--danger);background:var(--danger-bg);
  border-radius:var(--kader-sm);padding:8px 11px;margin-top:10px;line-height:1.5;
}
.vs-kaart-acties{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
@media(max-width:640px){
  .vs-veld,.vs-veld.vs-kort{flex:1 1 100%;min-width:0;}
}

/* Contentkalender: eigen momenten van de klant */
.kk-blok{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:16px 18px;
}
.kk-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.kk-titel{font-size:13.5px;font-weight:700;}
.kk-sub{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.55;max-width:60ch;}
.kk-lijst{display:flex;flex-direction:column;}
.kk-rij{
  display:flex;align-items:center;gap:11px;
  padding:8px 0;border-bottom:1px dotted var(--border);
}
.kk-rij:last-child{border-bottom:none;}
.kk-datum{
  font-size:11px;font-weight:700;color:var(--blue);
  min-width:64px;flex-shrink:0;
}
.kk-titel-rij{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kk-x{
  width:26px;height:26px;flex-shrink:0;background:var(--off);border:none;
  color:var(--muted);font-size:16px;cursor:pointer;border-radius:var(--kader-sm);
  transition:all .14s;font-family:inherit;line-height:1;
}
.kk-x:hover{color:var(--danger);background:var(--danger-bg);}
.kk-leeg{font-size:12px;color:var(--muted);margin:0;}
.kk-verzet{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.kk-verzet-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin-bottom:6px;
}
.vs-kaart-kalender{border-left-color:var(--blue);}

/* ═══ EFFECTRAPPORT ═══ */
.ef-wrap{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border);}
.ef-wrap-kop{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px;}
.ef-wrap-kop span{font-size:13px;font-weight:700;}
.ef-knop{font-size:11px!important;padding:6px 13px!important;}
.ef-laden,.ef-leeg{font-size:12.5px;color:var(--muted);margin:0;line-height:1.6;}
.ef-fout{background:var(--warning-bg);border-radius:var(--kader-sm);padding:12px 15px;}
.ef-fout strong{display:block;font-size:12.5px;}
.ef-fout span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.55;}
.ef-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.ef-titel{font-size:13px;font-weight:700;}
.ef-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.ef-geen-basis{
  font-size:10.5px;color:var(--warning);background:var(--warning-bg);
  padding:4px 10px;border-radius:var(--kader);line-height:1.4;
}
.ef-grafiek{margin-bottom:14px;}
.ef-svg{width:100%;height:120px;display:block;background:var(--off);border-radius:var(--kader-sm);}
.ef-as{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);margin-top:5px;}
.ef-legenda{color:var(--warning);}
.ef-lijst{display:flex;flex-direction:column;gap:2px;}
.ef-rij{display:flex;gap:12px;padding:10px 12px;border-radius:var(--kader-sm);border-left:3px solid var(--border);}
.ef-rij.ef-op{background:var(--success-bg);border-left-color:var(--success);}
.ef-rij.ef-neer{background:var(--danger-bg);border-left-color:var(--danger);}
.ef-rij.ef-vlak{background:var(--off);}
.ef-rij-datum{font-size:11px;font-weight:700;color:var(--muted);min-width:52px;flex-shrink:0;padding-top:1px;}
.ef-rij-txt{flex:1;min-width:0;}
.ef-rij-txt strong{display:block;font-size:12.5px;}
.ef-rij-txt span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6;}
.ef-uitleg{
  font-size:11px;color:var(--muted);line-height:1.7;margin-top:14px;
  background:var(--off);border-radius:var(--kader-sm);padding:12px 14px;max-width:80ch;
}
.ef-uitleg strong{color:var(--black);}

/* Planningmodal: datum, start en eind naast elkaar.
   Tijdvelden hebben een eigen minimumbreedte van de browser; zonder
   min-width:0 duwen ze de laatste kolom buiten de modal. */
#modal-addPlanBlock .mf{min-width:0;}
#modal-addPlanBlock .mf input:not([type=checkbox]):not([type=radio]),
#modal-addPlanBlock .mf select{width:100%;min-width:0;box-sizing:border-box;}
#modal-addPlanBlock input[type=time],
#modal-addPlanBlock input[type=date]{max-width:100%;}
@media(max-width:420px){
  /* Op een smal scherm passen drie tijdvelden niet meer naast elkaar */
  #modal-addPlanBlock > .modal > div[style*="1.2fr"]{grid-template-columns:1fr 1fr!important;}
}

/* Bedrijfsgegevens als tegels met icoon */
.bg-tegels{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
}
.bg-tegel{
  display:flex;align-items:center;gap:13px;text-align:left;
  padding:15px 17px;font-family:inherit;cursor:pointer;position:relative;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--kader);transition:all .14s;
}
.bg-tegel:hover{border-color:var(--blue);transform:translateY(-1px);}
.bg-tegel-mist{border-color:var(--danger);background:var(--danger-bg);}
.bg-icoon{
  width:40px;height:40px;flex-shrink:0;border-radius:var(--kader-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-light);color:var(--blue);
}
.bg-tegel-mist .bg-icoon{background:var(--white);color:var(--danger);}
.bg-icoon svg{width:20px;height:20px;}
.bg-tegel-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.bg-tegel-naam{font-size:12.5px;font-weight:700;color:var(--black);}
.bg-tegel-sub{
  font-size:10.5px;color:var(--muted);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bg-tegel-vlag{
  position:absolute;top:10px;right:12px;
  min-width:18px;height:18px;border-radius:var(--kader-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--danger);color:#fff;font-size:10px;font-weight:700;
}
.bg-modal-uitleg{font-size:11.5px;color:var(--muted);margin-bottom:14px;line-height:1.55;}
#bg-modal-body .bg-rij{flex-direction:column;}
#bg-modal-body .bg-veld,#bg-modal-body .bg-veld.bg-kort{flex:1 1 100%;min-width:0;}
#bg-modal-body textarea{
  padding:9px 12px;font-size:11.5px;font-family:inherit;color:var(--black);
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);outline:none;resize:vertical;line-height:1.5;
}
#bg-modal-body textarea:focus{border-color:var(--blue);}

/* ═══ URENTEGOED ═══ */
.us-blok{
  background:var(--white);border:1px solid var(--border);border-left:3px solid var(--blue);
  border-radius:var(--kader);padding:16px 18px;margin-bottom:1.25rem;
}
.us-blok.us-bijna{border-left-color:var(--warning);}
.us-blok.us-over{border-left-color:var(--danger);background:var(--danger-bg);}
.us-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.us-titel{font-size:13px;font-weight:700;}
.us-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.us-groot{text-align:right;}
.us-getal{
  display:block;font-size:20px;font-weight:800;color:var(--blue);
  line-height:1;letter-spacing:-.02em;white-space:nowrap;
}
.us-over .us-getal{color:var(--danger);}
.us-bijna .us-getal{color:var(--warning);}
.us-getal-lbl{display:block;font-size:10px;color:var(--muted);margin-top:4px;}

.us-balk{
  display:flex;height:9px;border-radius:var(--kader-xs);overflow:hidden;
  background:var(--off);margin-bottom:9px;
}
.us-balk-klein{height:6px;margin-bottom:0;flex:1;min-width:70px;}
.us-gewerkt{background:var(--blue);transition:width .3s;}
.us-gepland{background:var(--blue);opacity:.32;transition:width .3s;}
.us-over .us-gewerkt{background:var(--danger);}

.us-cijfers{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);}
.us-cijfers>div{display:flex;align-items:center;gap:5px;}
.us-stip{width:7px;height:7px;border-radius:2px;flex-shrink:0;}
.us-stip-gewerkt{background:var(--blue);}
.us-stip-gepland{background:var(--blue);opacity:.32;}
.us-van{margin-left:auto;}
.us-melding{
  font-size:11.5px;color:var(--danger);line-height:1.6;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--border);
}
.us-melding-zacht{color:var(--warning);}

/* Overzicht op de planningpagina */
.us-overzicht-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:9px;
}
.us-overzicht-lijst{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:6px 16px;
}
.us-ov-rij{
  display:flex;align-items:center;gap:14px;padding:11px 0;cursor:pointer;
  border-bottom:1px dotted var(--border);
}
.us-ov-rij:last-child{border-bottom:none;}
.us-ov-rij:hover .us-ov-naam{color:var(--blue);}
.us-ov-naam{font-size:12.5px;font-weight:700;min-width:130px;flex-shrink:0;transition:color .14s;}
.us-ov-rest{font-size:11px;color:var(--muted);min-width:132px;text-align:right;flex-shrink:0;}
.us-ov-over .us-ov-rest{color:var(--danger);font-weight:700;}
.us-ov-over .us-gewerkt{background:var(--danger);}
.us-ov-over .us-gepland{background:var(--danger);opacity:.3;}

/* Klantkant */
.us-klant{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:18px 20px;
}
.us-klant-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.us-klant-titel{font-size:14px;font-weight:700;}
.us-klant-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.us-klant-groot{text-align:right;}
.us-klant-groot span{font-size:22px;font-weight:800;color:var(--blue);line-height:1;letter-spacing:-.02em;}
.us-klant-groot small{display:block;font-size:10px;color:var(--muted);margin-top:4px;}
.us-klant-gepland{font-size:11.5px;color:var(--muted);margin:0 0 10px;}
.us-klant-afspraak{list-style:none;margin:10px 0 0;padding-top:11px;border-top:1px solid var(--border);}
.us-klant-afspraak li{
  position:relative;padding:3px 0 3px 16px;font-size:11.5px;color:var(--muted);line-height:1.55;
}
.us-klant-afspraak li::before{
  content:'';position:absolute;left:2px;top:10px;
  width:5px;height:5px;border-radius:50%;background:var(--blue);
}
@media(max-width:640px){
  .us-ov-rij{flex-wrap:wrap;}
  .us-ov-naam,.us-ov-rest{min-width:0;}
  .us-ov-rest{margin-left:auto;text-align:right;}
}

/* Tegoedschakelaar in de planningmodal */
.plb-tegoed{
  background:var(--blue-light);border-radius:var(--kader-sm);
  padding:11px 14px;margin-bottom:1rem;transition:all .16s;
}
.plb-tegoed.plb-tegoed-uit{background:var(--off);}
.plb-schakel{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin:0;}
.plb-schakel input{position:absolute;opacity:0;width:0;height:0;}
.plb-schakel-vorm{
  width:36px;height:20px;border-radius:var(--kader-sm);flex-shrink:0;margin-top:1px;
  background:var(--border);position:relative;transition:background .16s;
}
.plb-schakel-vorm::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:var(--white);transition:transform .16s;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.plb-schakel input:checked + .plb-schakel-vorm{background:var(--blue);}
.plb-schakel input:checked + .plb-schakel-vorm::after{transform:translateX(16px);}
.plb-schakel-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.plb-schakel-txt strong{font-size:12px;font-weight:700;color:var(--black);}
.plb-schakel-txt small{font-size:10.5px;color:var(--muted);line-height:1.45;}
.plb-tegoed-uit .plb-schakel-txt strong{color:var(--muted);}

/* Markering op een blok dat buiten het tegoed valt */
.plan-buiten{
  display:inline-block;margin-top:4px;
  font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--off);
  padding:2px 7px;border-radius:var(--kader);
}

/* Waarschuwing wanneer een klant geen enkel portaalonderdeel ziet */
.kp-alles-uit{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--danger-bg);border-left:3px solid var(--danger);
  border-radius:var(--kader);padding:13px 17px;margin-bottom:12px;
}
.kp-alles-uit strong{display:block;font-size:12.5px;}
.kp-alles-uit span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.55;max-width:66ch;}

/* ═══ ROLLEN EN TOEGANG ═══ */
.rol-uitleg{font-size:12px;color:var(--muted);line-height:1.65;margin-bottom:16px;max-width:76ch;}
.rol-slot{
  background:var(--warning-bg);color:var(--warning);border-radius:var(--kader-sm);
  padding:9px 13px;font-size:11.5px;font-weight:700;margin-bottom:14px;
}
.rol-lijst{display:flex;flex-direction:column;}
.rol-rij{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:13px 0;border-bottom:1px dotted var(--border);
}
.rol-rij:last-child{border-bottom:none;}
.rol-persoon{display:flex;align-items:center;gap:11px;min-width:190px;}
.rol-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;
}
.rol-naam{font-size:12.5px;font-weight:700;}
.rol-functie{font-size:10.5px;color:var(--muted);margin-top:1px;}
.rol-keuze{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:1;min-width:230px;}
.rol-keuze select{
  padding:7px 11px;font-size:12px;font-family:inherit;color:var(--black);
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);outline:none;min-width:190px;
}
.rol-keuze select:focus{border-color:var(--blue);}
.rol-keuze select:disabled{background:var(--off);color:var(--muted);cursor:not-allowed;}
.rol-tip{font-size:10.5px;color:var(--muted);text-align:right;max-width:46ch;line-height:1.45;}
.rol-waarschuwing{font-size:10px;color:var(--warning);font-weight:700;}

.rol-matrix{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.rol-matrix-kop{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:10px;
}
.rol-matrix table{width:100%;border-collapse:collapse;}
.rol-matrix th{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);text-align:center;padding:6px 8px;border-bottom:1px solid var(--border);
}
.rol-matrix th:first-child{text-align:left;}
.rol-matrix td{font-size:11.5px;padding:7px 8px;text-align:center;border-bottom:1px dotted var(--border);}
.rol-matrix td:first-child{text-align:left;color:var(--black);}
.rol-ja{color:var(--success);font-weight:700;}
.rol-nee{color:var(--border);}

@media(max-width:640px){
  .rol-rij{flex-direction:column;align-items:stretch;}
  .rol-keuze{align-items:stretch;}
  .rol-tip{text-align:left;}
  .rol-matrix{overflow-x:auto;}
}

/* ════════════════════════════════════════════════════════════
   MERKLAAG — InFrame Merkrichtlijnen 2026
   Vorm, typografie en patroon. Staat onderaan zodat deze regels
   over de bestaande opmaak heen gaan.
   ════════════════════════════════════════════════════════════ */

.sidebar > *{position:relative;z-index:1;}

/* ── Typografie ─────────────────────────────────────────────
      Montserrat. Black Italic is de stem: alleen voor paginatitels
      en uitspraken, nooit voor lopende tekst. Koppen nooit in
      hoofdletters. Titels eindigen met een punt.               */
.topbar-big h1{
  font-size:25px;font-weight:900;font-style:italic;
  letter-spacing:-.025em;line-height:1.08;color:var(--royal);
}
.topbar-big p{font-size:12px;color:var(--muted);margin-top:5px;font-weight:500;}
/* Het kopje boven de titel, klein en vet in grijs. */
.topbar-eyebrow{
  font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;
}
/* Tussenkoppen zijn vet en recht, in Deep Royal — niet cursief,
   zodat een scherm vol kaarten leesbaar blijft. */
.card-title,.modal-title{color:var(--royal);}
.modal-title{font-size:19px;font-weight:800;letter-spacing:-.02em;}

/* Nadruk: vet, geel arceren of geel onderstrepen. Maximaal twee
   per uiting, en nooit vet en arceren in hetzelfde zinsdeel. */
.merk-arceer{background:var(--yellow);color:var(--charcoal);
  padding:0 .22em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.merk-streep{background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;background-size:100% 4px;background-position:0 100%;
  padding-bottom:1px;}

/* ── Kadervorm ──────────────────────────────────────────────
      Afgerond rechtsboven en linksonder, recht op de andere twee
      hoeken. Komt uit het logo en loopt door over de hele app.  */
.card,.mcard,.modal,.dash-widget{border-radius:var(--kader);}
.sb-badge,.badge,.chip,.tag,.pill{border-radius:var(--kader-xs);}

/* Kerncijfers: alleen het Deep Royal getal, zonder streepje. */
.mcard{position:relative;}
.mcard-val{color:var(--royal);font-weight:800;letter-spacing:-.035em;}

/* ── Vlakken in het kleurverloop ────────────────────────────
      Altijd drie stops. Tekst en logo staan op de Deep Royal kant,
      nooit geel in het verloop, geen lange lopende tekst erop.   */
.merk-verloop{background:var(--gradient);color:#fff;position:relative;overflow:hidden;}
.merk-verloop-h{background:var(--gradient-h);color:#fff;position:relative;overflow:hidden;}
.merk-verloop h1,.merk-verloop h2,.merk-verloop h3,
.merk-verloop-h h1,.merk-verloop-h h2,.merk-verloop-h h3{color:#fff;}

/* ── Het lint: diensten achter elkaar met gele sterretjes ──── */
.merk-lint{background:var(--royal);color:#fff;font-size:11px;font-weight:700;
  padding:9px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;letter-spacing:.02em;}
.merk-lint .ster{color:var(--yellow);font-size:12px;line-height:1;}

/* ── Vivid Cyan draagt nooit witte tekst ────────────────────
      Tekst op Vivid Cyan staat altijd in Charcoal.             */
.op-cyaan{background:var(--cyan);color:var(--charcoal);}
.op-geel{background:var(--yellow);color:var(--charcoal);}
.op-royal{background:var(--royal);color:#fff;}

/* ── Lijniconen: ronde uiteinden, lijndikte 1,8 op een raster
      van 24. Nooit gevuld, nooit geel, nooit meerkleurig.      */
svg[stroke]{stroke-linecap:round;stroke-linejoin:round;}

/* ── Focus volgt het merk ───────────────────────────────────── */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

/* Paginatitels: Black Italic in Deep Royal, met een punt erachter. */
.pagina-titel{font-size:21px;font-weight:900;font-style:italic;color:var(--royal);
  letter-spacing:-.025em;line-height:1.1;}
.pagina-sub{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500;}

/* ── Kleine vlakken krijgen een egale kleur ─────────────────
   Het kleurverloop is bedoeld voor covers, headers en grote
   vlakken. Op knoppen, chips en balkjes wordt het onrustig en
   loopt het per element anders. Daar: egaal Deep Royal.      */
.cb-portal,.chat-send,.btn-approve-sm,.link-open-btn,
.sort-btn.active,.month-tab.active,.jvk-keuze-ja,.jvk-keuze-ja:hover,
.chat-msg.mine .chat-bubble,.st-step.done .st-dot,
.prog-fill,.proj-card-fill,.toggle input:checked+.toggle-slider{
  background:var(--royal);
}
.cb-portal,.chat-send,.btn-approve-sm,.link-open-btn{border-radius:var(--kader-sm);}
.cb-portal:hover,.chat-send:hover,.btn-approve-sm:hover,.link-open-btn:hover{background:var(--mid);opacity:1;}
.sort-btn.active,.month-tab.active{border-color:var(--royal);}
/* De voortgangsbalk mag het verloop wel dragen: het is één lang vlak. */
.prog-fill,.proj-card-fill{background:var(--gradient-h);}
/* Eigen chatbericht: kadervorm in plaats van de losse hoekjes. */
.chat-msg.mine .chat-bubble{border-radius:var(--kader-sm);}

/* De zijbalk mag het raster alleen fluisteren. */

/* ── Kop van het klantdossier: dezelfde cover als het portaal ── */
.client-detail-hero{
  background:var(--royal);border-radius:var(--kader);
  position:relative;overflow:hidden;padding:1.6rem 2rem;
}
.client-detail-hero > *{position:relative;z-index:1;}
.client-detail-hero h2{font-size:22px;font-weight:900;font-style:italic;letter-spacing:-.025em;line-height:1.1;}
.client-detail-hero p{color:rgba(255,255,255,.75);margin-top:5px;font-weight:500;}
/* Een Deep Royal knop zou wegvallen op blauw: hier het gele accent. */
.client-detail-hero .btn-blue{background:var(--yellow);color:var(--charcoal);font-weight:800;}
.client-detail-hero .btn-blue:hover{background:var(--yellow-80);}

/* Kerncijfers in Financiën dezelfde behandeling als elders:
   kadervorm en een Deep Royal getal. */
.fin-kpi{border-radius:var(--kader);position:relative;}
.fin-kpi-val{color:var(--royal);font-weight:800;letter-spacing:-.035em;}

/* Grote koppen: egaal Deep Royal in de kadervorm, zonder patroon. */
.rvc-hero,.jvk-hero{background:var(--royal);border-radius:var(--kader);}
.rvc-hero{position:relative;overflow:hidden;}
.rvc-hero > *,.jvk-hero > *{position:relative;z-index:1;}
/* Adviesblok blijft egaal Deep Royal, in de kadervorm. */
.vd-advies,.vd-kaart-taken,.toast{border-radius:var(--kader);}

/* ════════════════════════════════════════════════════════════
   LIJNICONEN — InFrame Merkrichtlijnen 2026
   Eenvoudige lijniconen met ronde uiteinden, lijndikte 1,8 op een
   raster van 24. Ze ondersteunen de tekst, ze vervangen hem niet.
   Als masker nemen ze de tekstkleur over: Deep Royal op licht, wit
   op blauw. Nooit gevuld, nooit meerkleurig. Het gele sterretje is
   het enige accenticoon.
   ════════════════════════════════════════════════════════════ */
i[class^="ico-"],i[class*=" ico-"]{
  display:inline-block;width:1.08em;height:1.08em;
  background-color:currentColor;vertical-align:-.17em;flex-shrink:0;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
/* Statusstip: geen icoon maar een markering, neemt de kleur van de tekst. */
i.stip{display:inline-block;width:.52em;height:.52em;border-radius:50%;
  background:currentColor;vertical-align:.08em;flex-shrink:0;}
/* Het sterretje uit het lint: het enige icoon dat geel mag zijn. */
i.ico-ster{color:var(--yellow);}

i.ico-vink{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E");}
i.ico-kruis{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");}
i.ico-kalender{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v13H4zM8 3.5v4M16 3.5v4M4 11.5h16'/%3E%3C/svg%3E");}
i.ico-klok{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a8.8 8.8 0 100 17.6 8.8 8.8 0 000-17.6zM12 7.2v5l3.2 2'/%3E%3C/svg%3E");}
i.ico-lamp{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.3 18.5h5.4M10.4 21.2h3.2M12 3.2a5.9 5.9 0 00-3.7 10.5c.7.6 1.1 1.4 1.1 2.3h5.2c0-.9.4-1.7 1.1-2.3A5.9 5.9 0 0012 3.2z'/%3E%3C/svg%3E");}
i.ico-video{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 6h17.6v12H3.2zM10 9.2l4.8 2.8L10 14.8z'/%3E%3C/svg%3E");}
i.ico-waarschuwing{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8L2.6 20.2h18.8zM12 9.8v4.2M12 17.4v.01'/%3E%3C/svg%3E");}
i.ico-chat{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5h17v11H9.5l-6 4.2z'/%3E%3C/svg%3E");}
i.ico-grafiek{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.2h18M6.6 17V11M11.6 17V5.6M16.6 17v-7.4'/%3E%3C/svg%3E");}
i.ico-stijging{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.8l6.2-6.2 3.8 3.8 8-8M14.6 6.4h6.4v6.4'/%3E%3C/svg%3E");}
i.ico-document{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3h8l3.8 3.8v14.2H6.2zM14.2 3v3.8H18'/%3E%3C/svg%3E");}
i.ico-potlood{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.1-4.2L17.2 3.7l3.1 3.1L8.2 18.9z'/%3E%3C/svg%3E");}
i.ico-pakket{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8l8.8-4.8L20.8 8v8l-8.8 4.8L3.2 16zM3.2 8l8.8 4.8L20.8 8M12 12.8v8'/%3E%3C/svg%3E");}
i.ico-tosti{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5A4 4 0 0 1 8 3h8a4 4 0 0 1 2 7.5V19a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9.5 13.5l5 3M14.5 13.5l-5 3'/%3E%3C/svg%3E");}
i.ico-ster{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9'/%3E%3C/svg%3E");}
i.ico-mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 6h17.6v12H3.2zM3.4 6.8l8.6 5.8 8.6-5.8'/%3E%3C/svg%3E");}
i.ico-zon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.4a4.6 4.6 0 100 9.2 4.6 4.6 0 000-9.2zM12 2.4v2M12 19.6v2M4.4 12h-2M21.6 12h-2M6.1 6.1L4.7 4.7M19.3 19.3l-1.4-1.4M19.3 4.7l-1.4 1.4M6.1 17.9l-1.4 1.4'/%3E%3C/svg%3E");}
i.ico-thermometer{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 14.8V5.4a2.4 2.4 0 10-4.8 0v9.4a4.2 4.2 0 104.8 0z'/%3E%3C/svg%3E");}
i.ico-verboden{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a8.8 8.8 0 100 17.6 8.8 8.8 0 000-17.6zM5.8 5.8l12.4 12.4'/%3E%3C/svg%3E");}
i.ico-bel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16.2V11a6 6 0 10-12 0v5.2l-2 3h16zM10 20.4h4'/%3E%3C/svg%3E");}
i.ico-opslaan{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v11.8M7.2 10.6L12 15.4l4.8-4.8M4 20.4h16'/%3E%3C/svg%3E");}
i.ico-camera{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8h3.9l1.9-3h6l1.9 3h3.9v11.8H3.2zM12 10.2a3.8 3.8 0 100 7.6 3.8 3.8 0 000-7.6z'/%3E%3C/svg%3E");}
i.ico-muziek{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l10.2-2v13M6 21a3 3 0 100-6 3 3 0 000 6zM16.2 19a3 3 0 100-6 3 3 0 000 6z'/%3E%3C/svg%3E");}
i.ico-koffer{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8h17.6v12H3.2zM9 8V5h6v3M3.2 13.2h17.6'/%3E%3C/svg%3E");}
i.ico-printer{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.2V3.2h10v5M5 8.2h14v8h-3v4.6H8v-4.6H5zM8.4 16.2h7.2'/%3E%3C/svg%3E");}
i.ico-personen{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 11.4a4 4 0 100-8 4 4 0 000 8zM2.4 21v-1a6 6 0 016-6h2a6 6 0 016 6v1M16.6 3.8a4 4 0 010 7.6M21.6 21v-1a6 6 0 00-3.8-5.6'/%3E%3C/svg%3E");}
i.ico-persoon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12.2a4.1 4.1 0 100-8.2 4.1 4.1 0 000 8.2zM4.4 21v-1.2a6 6 0 016-6h3.2a6 6 0 016 6V21'/%3E%3C/svg%3E");}
i.ico-link{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.2a5 5 0 007.5.5l2.6-2.6a5 5 0 00-7.1-7.1L11.6 5.4M14 10.8a5 5 0 00-7.5-.5L3.9 12.9a5 5 0 007.1 7.1l1.4-1.4'/%3E%3C/svg%3E");}
i.ico-quote{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 7.2c-2.2.9-3.4 2.8-3.4 5H8v4.6H3.6V12c0-2.9 1.6-4.4 4.8-4.8zM19 7.2c-2.2.9-3.4 2.8-3.4 5h3v4.6h-4.4V12c0-2.9 1.6-4.4 4.8-4.8z'/%3E%3C/svg%3E");}
i.ico-prullenbak{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6.2 7l1 13.8h9.6L18 7M10.2 10.8v6M13.8 10.8v6'/%3E%3C/svg%3E");}
i.ico-doel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a8.8 8.8 0 100 17.6 8.8 8.8 0 000-17.6zM12 8.2a3.8 3.8 0 100 7.6 3.8 3.8 0 000-7.6zM12 11.9v.01'/%3E%3C/svg%3E");}
i.ico-oog{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6 6.2 12 6.2 21.6 12 21.6 12 18 17.8 12 17.8 2.4 12 2.4 12zM12 9.2a2.8 2.8 0 100 5.6 2.8 2.8 0 000-5.6z'/%3E%3C/svg%3E");}
i.ico-vernieuwen{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 12a8.2 8.2 0 11-2.4-5.8M20.6 4.2v5h-5'/%3E%3C/svg%3E");}
i.ico-omlaag{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2v14M6.4 12.8l5.6 5.6 5.6-5.6'/%3E%3C/svg%3E");}
i.ico-verder{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");}
i.ico-telefoon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.4h4.2l2 5-2.6 1.6a11.2 11.2 0 005 5l1.6-2.6 5 2v4.2a2 2 0 01-2 2A16.4 16.4 0 014 5.4a2 2 0 012-2z'/%3E%3C/svg%3E");}
i.ico-mobiel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 2.4h9.6v19.2H7.2zM10.2 18.6h3.6'/%3E%3C/svg%3E");}
i.ico-palet{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a8.8 8.8 0 000 17.6c1 0 1.6-.7 1.6-1.6 0-1.5 1-2.1 2.1-2.1h2.1a3 3 0 003-3A8.8 8.8 0 0012 3.2zM7.6 10.6v.01M10.6 7.4v.01M15 7.4v.01'/%3E%3C/svg%3E");}
i.ico-map{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 6h5.8l2 3h9.8v11H3.2z'/%3E%3C/svg%3E");}
i.ico-website{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a8.8 8.8 0 100 17.6 8.8 8.8 0 000-17.6zM3.4 12h17.2M12 3.2c2.6 2.8 2.6 14.8 0 17.6M12 3.2c-2.6 2.8-2.6 14.8 0 17.6'/%3E%3C/svg%3E");}
i.ico-locatie{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.8-6.1 6.8-10.8a6.8 6.8 0 10-13.6 0C5.2 14.9 12 21 12 21zM12 7.8a2.6 2.6 0 100 5.2 2.6 2.6 0 000-5.2z'/%3E%3C/svg%3E");}
i.ico-instagram{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 3.4h9.6a3.8 3.8 0 013.8 3.8v9.6a3.8 3.8 0 01-3.8 3.8H7.2a3.8 3.8 0 01-3.8-3.8V7.2a3.8 3.8 0 013.8-3.8zM12 8.4a3.6 3.6 0 100 7.2 3.6 3.6 0 000-7.2zM17 6.8v.01'/%3E%3C/svg%3E");}

i.ico-koffie{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h12v6a5 5 0 01-5 5H9a5 5 0 01-5-5zM16 9.4h2.2a2.6 2.6 0 010 5.2H16M5 3.4v1.6M9 2.6v2.4M13 3.4v1.6'/%3E%3C/svg%3E");}
i.ico-instellingen{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9.2a2.8 2.8 0 100 5.6 2.8 2.8 0 000-5.6zM19.2 14a1.6 1.6 0 00.3 1.8l.1.1a1.9 1.9 0 11-2.7 2.7l-.1-.1a1.6 1.6 0 00-2.7 1.1v.2a1.9 1.9 0 11-3.8 0v-.1a1.6 1.6 0 00-2.7-1.2l-.1.1a1.9 1.9 0 11-2.7-2.7l.1-.1A1.6 1.6 0 004 14.2h-.2a1.9 1.9 0 110-3.8h.1A1.6 1.6 0 005.1 7.7L5 7.6a1.9 1.9 0 112.7-2.7l.1.1a1.6 1.6 0 001.8.3h.1a1.6 1.6 0 001-1.5v-.2a1.9 1.9 0 113.8 0v.1a1.6 1.6 0 002.7 1.2l.1-.1a1.9 1.9 0 112.7 2.7l-.1.1a1.6 1.6 0 00-.3 1.8v.1a1.6 1.6 0 001.5 1h.2a1.9 1.9 0 110 3.8h-.1a1.6 1.6 0 00-1.5 1z'/%3E%3C/svg%3E");}
i.ico-weegschaal{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v17.2M6.6 6.2L3 13.4a3.6 3.6 0 007.2 0zM17.4 6.2L21 13.4a3.6 3.6 0 01-7.2 0zM6.6 20.6h10.8M4.4 6.2h15.2'/%3E%3C/svg%3E");}

/* ── Het lint onderaan het klantportaal ─────────────────────
   De diensten achter elkaar met gele sterretjes, als doorlopende
   band — hetzelfde element dat onder de header van de website en
   onderaan elke offerte staat. */
/* Onderaan het klantportaal loopt hetzelfde lint als op het inlogscherm. */
@media (max-width:760px){
  .lint{padding:11px 0;}
  .lint-i{font-size:11px;gap:16px;padding-left:16px;}
  .lint-ster{width:11px;height:11px;}
}

/* ═══════════════════════════════════════════════════════════════
   TOESTEMMINGEN
   De verklaringen die binnenkomen op toestemming.inframeagency.nl.
   Zelfde vormentaal als de rest: kadervorm, Deep Royal koppen,
   Bone White vlakken, geel alleen als accent.
   ═══════════════════════════════════════════════════════════════ */
.tv-laden{padding:2.5rem 0;text-align:center;font-size:13px;color:var(--muted);}
.tv-leeg{
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);
  padding:1.8rem 1.6rem;text-align:center;
}
.tv-leeg strong{display:block;font-size:15px;color:var(--royal);margin-bottom:6px;}
.tv-leeg span{font-size:13px;color:var(--muted);line-height:1.65;}
.tv-leeg code{background:var(--bone-vlak);padding:1px 6px;border-radius:var(--kader-xs);font-size:12px;}
.tv-leeg-blij strong{color:var(--success);}

/* ── Kerncijfers ─────────────────────────────────────────────── */
.tv-cijfers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.25rem;
}
.tv-cijfer{
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);
  padding:14px 16px;
}
.tv-cijfer-lbl{
  font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;
}
.tv-cijfer-val{font-size:26px;font-weight:800;color:var(--royal);letter-spacing:-.035em;line-height:1;}
.tv-cijfer.let-op{background:var(--warning-bg);border-color:#F0DFB4;}
.tv-cijfer.let-op .tv-cijfer-val{color:var(--warning);}
.tv-cijfer.rood{background:var(--danger-bg);border-color:#F3D4D6;}
.tv-cijfer.rood .tv-cijfer-val{color:var(--danger);}
@media(max-width:760px){.tv-cijfers{grid-template-columns:repeat(2,1fr);}}

/* ── Tabbladen ───────────────────────────────────────────────── */
.tv-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:1.25rem;flex-wrap:wrap;}
.tv-tab{
  font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);
  background:none;border:none;border-bottom:2.5px solid transparent;
  padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:8px;
  transition:color .15s,border-color .15s;margin-bottom:-1px;
}
.tv-tab:hover{color:var(--royal);}
.tv-tab.active{color:var(--royal);border-bottom-color:var(--royal);}
.tv-tab-n{
  background:var(--yellow);color:var(--charcoal);font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:var(--kader-xs);
}

/* ── Tabblad 1: nog niet gekoppeld ───────────────────────────── */
.tv-balk{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--royal-wash);border-radius:var(--kader-sm);
  padding:11px 14px;margin-bottom:1rem;font-size:13px;
}
.tv-nieuw{display:grid;gap:12px;}
.tv-kaart{
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);
  padding:15px 17px;transition:border-color .15s;
}
.tv-kaart.gekozen{border-color:var(--royal);background:var(--royal-wash);}
.tv-kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tv-kies{display:flex;align-items:center;gap:10px;cursor:pointer;}
.tv-kies input{width:auto;height:auto;flex:none;accent-color:var(--royal);cursor:pointer;}
.tv-naam{font-size:15px;font-weight:800;color:var(--royal);letter-spacing:-.01em;}
.tv-wanneer{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.tv-kaart-regels{display:grid;gap:3px;margin:10px 0 0;}
.tv-regel{display:flex;gap:10px;font-size:12.5px;line-height:1.5;}
.tv-regel-lbl{
  flex:0 0 108px;font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;padding-top:2px;
}
.tv-regel-val{color:var(--black);min-width:0;}
.tv-voorstel{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--bone-vlak);border-radius:var(--kader-sm);
  padding:11px 14px;margin-top:12px;
}
.tv-voorstel-tekst{font-size:13px;color:var(--black);}
.tv-voorstel-tekst strong{color:var(--royal);}
.tv-voorstel-leeg{background:var(--off);}
.tv-voorstel-leeg .tv-voorstel-tekst{color:var(--muted);}
.tv-zeker{font-size:11px;color:var(--muted);margin-left:8px;}
.tv-kaart-voet{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;}
.btn-smb-groot{padding:9px 16px!important;font-size:12.5px!important;}
.tv-kiezer{
  font-family:inherit;font-size:12.5px;padding:8px 11px;max-width:320px;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);color:var(--black);cursor:pointer;flex:1 1 220px;min-width:0;
}
.tv-kiezer:focus{outline:none;border-color:var(--royal);}

/* ── Tabblad 2: alle toestemmingen ───────────────────────────── */
.tv-zoekbalk{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.tv-zoekbalk input,.tv-zoekbalk select{
  font-family:inherit;font-size:12.5px;padding:9px 12px;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);color:var(--black);
}
.tv-zoekbalk input:focus,.tv-zoekbalk select:focus{outline:none;border-color:var(--royal);}
.tv-zoek{flex:1 1 240px;min-width:0;}
.tv-acties{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:1rem;}
.tv-telling{font-size:12px;color:var(--muted);margin-right:auto;}

.tv-groep{margin-bottom:1rem;}
.tv-groep-kop{
  width:100%;display:flex;align-items:center;gap:10px;
  font-family:inherit;font-size:14px;font-weight:800;color:var(--royal);
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader-sm);
  padding:11px 14px;cursor:pointer;text-align:left;
}
.tv-groep-pijl{
  width:6px;height:6px;flex-shrink:0;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg);transition:transform .15s;
}
.tv-groep-kop.dicht .tv-groep-pijl{transform:rotate(-45deg);}
.tv-groep-naam{flex:1;}
.tv-groep-n{
  background:var(--bone-vlak);color:var(--muted);font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:var(--kader-xs);
}
.tv-subgroep{margin:8px 0 0 14px;}
.tv-subgroep-kop{
  display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
  padding:9px 2px 6px;
}
.tv-subgroep-n{
  background:var(--bone-vlak);padding:1px 7px;border-radius:var(--kader-xs);letter-spacing:0;
}
.tv-tabel{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;}
.tv-tabel th{
  font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;text-align:left;padding:9px 12px;
  background:var(--off);border-bottom:1px solid var(--border);
}
.tv-tabel td{padding:10px 12px;font-size:12.5px;border-bottom:1px solid var(--bone-lijn);vertical-align:middle;}
.tv-tabel tr:last-child td{border-bottom:none;}
.tv-tabel tr.ingetrokken{background:var(--danger-bg);}
.tv-tabel tr.ingetrokken td{color:var(--danger);}
.tv-link{
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--royal);
  background:none;border:none;padding:0;cursor:pointer;text-align:left;
}
.tv-link:hover{text-decoration:underline;}
.tv-merk{
  margin-left:7px;font-size:9.5px;font-weight:700;color:var(--warning);
  background:var(--warning-bg);padding:1px 6px;border-radius:var(--kader-xs);
}
.tv-status-groen{color:var(--success);font-weight:700;}
.tv-status-rood{color:var(--danger);font-weight:700;}
.tv-rij-acties{display:flex;gap:4px;justify-content:flex-end;}

/* ── Het zijpaneel ───────────────────────────────────────────── */
.tv-overlay{position:fixed;inset:0;background:rgba(26,29,35,.45);z-index:1400;}
.tv-zij{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);z-index:1401;
  background:var(--white);display:flex;flex-direction:column;
  box-shadow:-18px 0 50px rgba(10,25,60,.22);
}
.tv-zij-kop{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--border);
}
.tv-zij-kenmerk{
  font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.1em;margin-bottom:3px;
}
.tv-zij-kop h3{font-size:19px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.02em;}
.tv-sluit{
  font-family:inherit;font-size:24px;line-height:1;color:var(--muted);
  background:none;border:none;cursor:pointer;padding:0 4px;
}
.tv-sluit:hover{color:var(--black);}
.tv-zij-body{flex:1;overflow-y:auto;padding:1.1rem 1.25rem;}
.tv-zij-body h4{
  font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.12em;
  text-transform:uppercase;margin:1.4rem 0 .6rem;
}
.tv-zij-body h4:first-child{margin-top:0;}
.tv-dl{display:grid;grid-template-columns:132px 1fr;gap:5px 12px;font-size:12.5px;}
.tv-dl dt{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.08em;
  text-transform:uppercase;padding-top:2px;}
.tv-dl dd{color:var(--black);word-break:break-word;}
.tv-dl-klein dd{font-size:11px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;}
.tv-handtekening{
  border:1px solid var(--border);border-radius:var(--kader-sm);
  background:var(--off);padding:12px;text-align:center;
}
.tv-handtekening img{max-width:100%;max-height:120px;margin:0 auto;}
.tv-geen-hand{font-size:12px;color:var(--muted);font-style:italic;}
.tv-gekoppeld{font-size:13px;font-weight:700;color:var(--royal);}
.tv-gekoppeld .tv-klein{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px;}
.tv-zij-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center;}
.tv-notitie{
  width:100%;font-family:inherit;font-size:12.5px;padding:10px 12px;
  border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);color:var(--black);resize:vertical;
}
.tv-notitie:focus{outline:none;border-color:var(--royal);}
.tv-zij-voet{
  display:flex;gap:8px;flex-wrap:wrap;padding:1rem 1.25rem;
  border-top:1px solid var(--border);background:var(--off);
}
.tv-knop-rood{color:var(--danger)!important;border-color:#F3D4D6!important;}
.tv-knop-rood:hover{background:var(--danger-bg)!important;}
.tv-waarschuwing{
  background:var(--danger-bg);border-radius:var(--kader-sm);padding:11px 14px;
  margin-bottom:1.1rem;font-size:12.5px;line-height:1.6;color:var(--danger);
}
.tv-waarschuwing strong{display:block;}

/* ── Tabblad 3: delen op de set ──────────────────────────────── */
.tv-delen{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:860px){.tv-delen{grid-template-columns:1fr;}}
.tv-delen-vak{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--kader);padding:1.2rem 1.3rem;
}
.tv-delen-vak h3{font-size:15px;font-weight:800;color:var(--royal);margin-bottom:6px;}
.tv-delen-vak p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:1rem;}
.tv-qr{
  background:var(--white);border:2px solid var(--royal);border-radius:var(--kader);
  padding:16px;width:fit-content;margin:0 auto 1rem;
}
.tv-qr img{width:200px;height:200px;display:block;}
.tv-delen-knoppen{display:flex;gap:8px;flex-wrap:wrap;}
.tv-link-vak,.tv-bericht{
  display:block;background:var(--bone-vlak);border-radius:var(--kader-sm);
  padding:11px 13px;font-size:12.5px;color:var(--black);line-height:1.6;
  margin-bottom:10px;word-break:break-word;
}
.tv-link-vak{font-family:ui-monospace,Menlo,monospace;font-size:12px;}

/* ── De teller op de projectkaart ────────────────────────────── */
.po-toestemming{cursor:pointer;color:var(--royal);font-weight:700;}
.po-toestemming:hover{text-decoration:underline;}

/* ── De melding op de weekstart ──────────────────────────────── */
.ws-sein{font-size:13px;line-height:1.6;margin-bottom:10px;}
.ws-sein strong{color:var(--royal);}

/* Een knop die eigenlijk een link is, hoort geen streep te krijgen. */
a.btn-blue, a.btn-ghost, a.btn-smb, a.knop{text-decoration:none;}

/* ── Een verklaring definitief verwijderen ─────────────────────
   Onomkeerbaar, dus met een scherm eromheen dat laat zien wat er
   weggaat en wat het verschil met intrekken is. */
.tv-knop-weg{margin-left:auto;}
.tv-smb-rood{color:var(--danger)!important;}
.tv-smb-rood:hover{background:var(--danger-bg)!important;}

#tv-weg{position:fixed; inset:0; z-index:1600;}
.tv-weg-laag{position:absolute; inset:0; background:rgba(26,29,35,.5);}
.tv-weg-venster{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(30rem,calc(100vw - 2rem)); max-height:calc(100vh - 2rem); overflow-y:auto;
  background:var(--white); border-radius:var(--kader);
  padding:1.4rem 1.5rem 1.3rem; box-shadow:0 24px 60px rgba(10,25,60,.3);
}
.tv-weg-venster h3{
  font-size:20px; font-weight:900; font-style:italic; color:var(--danger);
  letter-spacing:-.02em; margin-bottom:.6rem;
}
.tv-weg-uit{font-size:13px; line-height:1.6; color:var(--black);}
.tv-weg-lijst{
  list-style:none; margin:1rem 0; padding:0;
  background:var(--danger-bg); border-radius:var(--kader-sm); padding:10px 13px;
  max-height:12rem; overflow-y:auto;
}
.tv-weg-lijst li{display:flex; flex-direction:column; gap:1px; padding:5px 0; font-size:12.5px;}
.tv-weg-lijst li + li{border-top:1px solid rgba(176,18,28,.14);}
.tv-weg-lijst strong{color:var(--danger);}
.tv-weg-lijst span{font-size:11px; color:var(--muted);}
.tv-weg-meer{font-size:11.5px; color:var(--muted); font-style:italic;}
.tv-weg-tip{
  background:var(--bone-vlak); border-radius:var(--kader-sm);
  padding:11px 13px; font-size:12.5px; line-height:1.6; color:var(--muted);
}
.tv-weg-tip strong{color:var(--royal); display:block; margin-bottom:2px;}
.tv-weg-tip em{font-style:normal; font-weight:700; color:var(--black);}
.tv-weg-knoppen{display:flex; gap:9px; justify-content:flex-end; margin-top:1.2rem; flex-wrap:wrap;}
.tv-weg-doen{
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  background:var(--danger); color:#fff; border:2px solid var(--danger);
  border-radius:var(--kader-sm); padding:11px 18px; transition:background .15s;
}
.tv-weg-doen:hover{background:#8E0E16;}
.tv-weg-doen[disabled]{opacity:.6; cursor:not-allowed;}

/* ════════════════════════════════════════════════════════════════
   KANTOORSCHERM

   Alles hier is op afstand lezen. De maten staan in vw zodat het
   beeld meeschaalt van een laptop tot een scherm van 55 duim: op
   een breder scherm wordt de tekst groter mee, in plaats van dat
   er alleen meer witruimte bij komt. clamp() houdt hem leesbaar
   aan beide uiteinden.

   De achtergrond loopt van Deep Royal naar de middenkleur en stopt
   daar. Het volledige verloop eindigt in Vivid Cyan, en witte
   letters op Vivid Cyan is een van de vier combinaties die de
   merkrichtlijnen verbieden.

   Drie lagen: de kop staat altijd (logo, dag, tijd), het podium
   rouleert, en de viering legt zich er overheen maar blijft onder
   de kop, zodat het logo en de tijd ook tijdens een viering staan.
   ════════════════════════════════════════════════════════════════ */
#s-kantoor{
  position:relative; overflow:hidden; flex-direction:column;
  background:linear-gradient(135deg,#103590 0%,#0A63B4 100%);
  color:#fff; cursor:none;
}
/* In kantoormodus is er geen zijbalk, geen topbalk en geen scrollbalk:
   het beeld moet precies passen en verder niets doen. */
body.kantoormodus{overflow:hidden;}
body.kantoormodus #db-indicator{display:none;}

.ks-kader{
  position:absolute; right:-6vw; bottom:4vh; height:62vh; width:auto;
  opacity:.1; pointer-events:none; user-select:none;
  animation:ksKaderDrift 240s ease-in-out infinite alternate;
}
/* Tegen inbranden: het Kader kruipt heel langzaam rond. Vier minuten
   per richting, onzichtbaar als je ernaar kijkt. */
@keyframes ksKaderDrift{
  from{transform:translate(-8px,-6px) rotate(0deg);}
  to  {transform:translate(8px,6px) rotate(-.7deg);}
}
.ks-sluit{
  position:absolute; top:1.4vh; right:1.2vw; z-index:8;
  width:2.4vw; height:2.4vw; min-width:34px; min-height:34px;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(18px,1.5vw,30px); line-height:1; font-family:inherit;
  background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
  border:none; border-radius:50%; opacity:0; transition:opacity .2s;
}
#s-kantoor:hover .ks-sluit{opacity:1;}
.ks-sluit:focus-visible{opacity:1; outline:3px solid var(--yellow); outline-offset:2px;}

/* ── De kop · staat altijd ─────────────────────────────────────── */
.ks-kop{
  position:relative; z-index:6; flex-shrink:0;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:2vw; padding:3vh 3vw 0;
}
.ks-logo{height:clamp(30px,3.1vw,62px); width:auto;}
.ks-tijd{text-align:right;}
.ks-klok{
  font-size:clamp(34px,4.4vw,88px); font-weight:900; font-style:italic;
  line-height:.95; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.ks-datum{
  margin-top:.5vh; font-size:clamp(13px,1.15vw,23px); font-weight:600;
  color:rgba(255,255,255,.8);
}

/* ── De voortgangsstreep tussen kop en podium ──────────────────── */
.ks-balk{
  position:relative; z-index:3; flex-shrink:0;
  height:2px; margin:2.4vh 3vw 0; background:rgba(255,255,255,.14);
  border-radius:2px; overflow:hidden;
}
.ks-balk > span{
  display:block; height:100%; width:100%; background:var(--yellow);
  transform-origin:left center;
  animation:ksBalk 30s linear forwards;
}
@keyframes ksBalk{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* ── Het podium · hier rouleren de beelden ─────────────────────── */
.ks-podium{
  position:relative; z-index:2; flex:1; min-height:0;
  padding:2.6vh 3vw 2.4vh; display:flex;
}
.ks-beeld{flex:1; min-width:0; display:flex; flex-direction:column;}
/* De uitloop: het hele beeld stapt naar boven weg en vervaagt. */
.ks-beeld.is-weg{
  animation:ksBeeldWeg 400ms cubic-bezier(.4,0,.8,.3) forwards;
}
@keyframes ksBeeldWeg{
  to{opacity:0; transform:translateY(-2.2vh); filter:blur(5px);}
}

/* ── De opkomst · zoals de kop op de website ───────────────────────
   Twee lagen: een masker dat niets doet, en de tekst die daar van
   onderuit in schuift. Een enkele regel kan niet uit zijn eigen
   masker komen, vandaar de span in een span. --soepel is dezelfde
   curve als de hero op het inlogscherm. */
.ks-regel{display:block; overflow:hidden;}
.ks-regel > span{
  display:block;
  animation:ksRegelOp 980ms var(--soepel) both;
  animation-delay:var(--d,0ms);
}
@keyframes ksRegelOp{
  from{transform:translateY(112%) skewY(2.6deg); opacity:0;}
  60% {opacity:1;}
  to  {transform:translateY(0) skewY(0); opacity:1;}
}
/* Alles wat geen losse regel is, komt als blok op: iets omhoog, uit
   het vage, in hetzelfde ritme. */
[data-op]{
  animation:ksOp 900ms var(--soepel) both;
  animation-delay:var(--d,0ms);
}
@keyframes ksOp{
  from{opacity:0; transform:translateY(2.4vh);}
  to  {opacity:1; transform:none;}
}
/* Een element dat zelf al een regel-masker bevat, mag niet twee keer
   bewegen: dan loopt de tekst uit zijn masker. */
.ks-titel[data-op],.ks-wielijst li[data-op],.ks-attlijst li[data-op],
.ks-leeg-kop[data-op],.ks-vier-kop[data-op],.ks-vier-titel[data-op],
.ks-vier-klant[data-op],[data-op]:has(> .ks-regel){animation-name:ksOpStil;}
@keyframes ksOpStil{from{opacity:0;}to{opacity:1;}}

/* Een stille verversing (nieuwe gegevens binnen, zelfde beeld) tekent
   zonder opkomst. Anders springt het scherm elke drie minuten opnieuw
   aan terwijl er niets veranderd is. */
.ks-beeld.is-stil [data-op],
.ks-beeld.is-stil .ks-regel > span,
.ks-beeld.is-stil .ks-weekstaaf > span,
.ks-beeld.is-stil .ks-titel::after{animation:none;}
.ks-beeld.is-stil .ks-titel::after{transform:scaleX(1);}

/* ── De kop van een beeld ──────────────────────────────────────── */
.ks-titel{
  flex-shrink:0; position:relative; margin-bottom:2.6vh;
  font-size:clamp(26px,3.4vw,68px); font-weight:900; font-style:italic;
  line-height:1; letter-spacing:-.03em;
}
/* De gele onderstreping uit de huisstijl trekt zichzelf, nadat de
   regel is geland. */
.ks-titel::after{
  content:''; display:block; width:2.4em; height:.1em; max-height:7px;
  margin-top:.3em; background:var(--yellow); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  animation:ksStreep 760ms var(--soepel) 520ms both;
}
@keyframes ksStreep{to{transform:scaleX(1);}}
.ks-titel-bij{
  position:absolute; right:0; bottom:.42em;
  font-size:.34em; font-style:normal; font-weight:700;
  letter-spacing:.01em; color:rgba(255,255,255,.72);
}

/* ── Beeld · Vandaag ───────────────────────────────────────────── */
/* Met twee of drie blokken staat de dag anders bovenin geplakt met een
   halve meter leeg scherm eronder. Centreren vult het vlak; bij een
   volle dag vult de lijst hem vanzelf. */
.ks-blokken{
  list-style:none; margin:0; padding:0; flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:1.3vh; overflow:hidden;
}
.ks-blok{
  display:flex; gap:1.8vw; align-items:flex-start;
  background:rgba(255,255,255,.08); border-radius:var(--kader);
  padding:1.7vh 1.8vw; border-left:.32vw solid rgba(255,255,255,.22);
}
.ks-blok-tijd{
  flex-shrink:0; font-size:clamp(16px,1.6vw,32px); font-weight:800;
  line-height:1.25; font-variant-numeric:tabular-nums;
}
.ks-blok-tijd span{
  display:block; font-size:.74em; font-weight:600;
  color:rgba(255,255,255,.62);
}
.ks-blok-tekst{min-width:0; flex:1;}
.ks-blok-kop{display:flex; align-items:baseline; gap:.7vw; flex-wrap:wrap;}
.ks-blok-klant{font-size:clamp(16px,1.65vw,33px); font-weight:800; line-height:1.15;}
.ks-blok-wat{
  margin-top:.4vh; font-size:clamp(13px,1.2vw,24px); line-height:1.35;
  color:rgba(255,255,255,.9);
}
.ks-blok-wie{
  margin-top:.5vh; font-size:clamp(11px,1vw,20px); font-weight:600;
  color:rgba(255,255,255,.68);
}
.ks-merk{
  font-size:clamp(9px,.74vw,15px); font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:.35em .7em; border-radius:var(--kader-xs);
  background:rgba(255,255,255,.16); color:#fff; white-space:nowrap;
}
/* "nu bezig" hangt in elk blok klaar en verschijnt alleen op het blok
   dat loopt. Zo kan de markering elke vijftien tellen verspringen
   zonder dat het beeld opnieuw getekend hoeft te worden. */
.ks-merk-nu{display:none; background:var(--yellow); color:var(--charcoal);}
.ks-blok.ks-nu .ks-merk-nu{display:inline-block;}
.ks-blok.ks-nu{background:rgba(255,255,255,.16); border-left-color:var(--yellow);}
.ks-blok.ks-gehad{opacity:.44;}

.ks-leeg{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  background:rgba(255,255,255,.06); border-radius:var(--kader);
  padding:3vh 2vw;
}
.ks-leeg-kop{
  font-size:clamp(22px,2.4vw,46px); font-weight:900; font-style:italic;
  letter-spacing:-.025em;
}
.ks-leeg-sub{
  margin-top:1vh; font-size:clamp(13px,1.2vw,24px);
  color:rgba(255,255,255,.72);
}

/* ── Beeld · Wie waar is ───────────────────────────────────────── */
.ks-wielijst{
  list-style:none; margin:0; padding:0; flex:1; min-height:0; overflow:hidden;
  /* Met twee of drie man blijft er anders een halve meter scherm leeg
     onder de laatste naam; zo verdeelt de lijst zich over het vlak. */
  display:flex; flex-direction:column; justify-content:space-evenly;
}
.ks-wielijst li{
  display:flex; align-items:baseline; gap:2vw;
  padding:1.5vh 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.ks-wielijst li:last-child{border-bottom:none;}
.ks-wie-naam{
  flex-shrink:0; min-width:7.5em;
  font-size:clamp(22px,2.5vw,50px); font-weight:900; font-style:italic;
  letter-spacing:-.025em;
}
.ks-wie-waar{
  flex:1; min-width:0;
  font-size:clamp(16px,1.7vw,34px); font-weight:600;
  color:rgba(255,255,255,.76);
}
.ks-wie-waar > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ks-wielijst li.ks-aanwezig .ks-wie-waar{color:var(--yellow); font-weight:700;}
.ks-wielijst li.ks-weg{opacity:.52;}

/* ── Beeld · Deze week ─────────────────────────────────────────── */
.ks-weekraster{
  flex:1; min-height:0; display:grid; grid-template-columns:repeat(7,1fr);
  gap:1.1vw; align-items:end;
}
.ks-weekdag{display:flex; flex-direction:column; height:100%; justify-content:flex-end;}
/* Geen vlak achter de staaf: een leeg spoor van vloer tot plafond leest
   van drie meter afstand als een volle dag. Alleen de staaf zelf, met
   een dunne vloer eronder om op te staan. */
.ks-weekstaaf{
  flex:1; min-height:0; display:flex; align-items:flex-end;
  border-bottom:2px solid rgba(255,255,255,.22);
}
.ks-weekstaaf > span{
  display:block; width:100%; min-height:3px; background:rgba(255,255,255,.5);
  border-radius:var(--kader-sm) var(--kader-sm) 0 0;
  /* De hoogte staat als stijl op het element zelf, dus de staaf groeit
     via schaal en niet via hoogte: een keyframe kan die inline hoogte
     toch niet overrulen. */
  transform-origin:bottom center;
  animation:ksStaaf 1100ms var(--soepel) both;
  animation-delay:calc(var(--d,0ms) + 220ms);
}
@keyframes ksStaaf{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.ks-weeknaam{
  margin-top:1.2vh; font-size:clamp(13px,1.3vw,26px); font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
}
.ks-weekcijfer{
  margin-top:.2vh; font-size:clamp(16px,1.9vw,38px); font-weight:900;
  font-style:italic; letter-spacing:-.025em; color:rgba(255,255,255,.78);
  font-variant-numeric:tabular-nums;
}
.ks-weekdag.ks-vandaagdag .ks-weekstaaf > span{background:var(--yellow);}
.ks-weekdag.ks-vandaagdag .ks-weeknaam,
.ks-weekdag.ks-vandaagdag .ks-weekcijfer{color:var(--yellow);}

/* ── Beeld · Even bij stilstaan ────────────────────────────────── */
.ks-attlijst{
  list-style:none; margin:0; padding:0; flex:1; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-evenly;
}
.ks-attlijst li{padding:1.6vh 0; border-bottom:1px solid rgba(255,255,255,.14);}
.ks-attlijst li:last-child{border-bottom:none;}
.ks-att-titel{
  font-size:clamp(19px,2.2vw,44px); font-weight:800; line-height:1.2;
}
.ks-att-sub{
  display:block; margin-top:.6vh; font-size:clamp(13px,1.25vw,25px);
  font-weight:700; color:var(--yellow);
}

/* ── Beeld · De tellers ────────────────────────────────────────── */
.ks-tellers{
  flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr);
  gap:2vw; align-content:center;
}
.ks-teller + .ks-teller{
  padding-left:2vw; border-left:1px solid rgba(255,255,255,.18);
}
.ks-teller-val{
  font-size:clamp(50px,6.6vw,136px); font-weight:900; font-style:italic;
  line-height:.92; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.ks-teller-lbl{
  margin-top:1vh; font-size:clamp(11px,1.12vw,23px); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.74);
}

/* Het lint onderaan, in dezelfde maat als de rest van het scherm. */
.ks-lint{position:relative; z-index:3; padding:1.3vh 0;}
.ks-lint .lint-i{font-size:clamp(11px,.95vw,19px); gap:1.6vw; padding-left:1.6vw;}
.ks-lint .lint-ster{width:clamp(11px,.95vw,19px); height:clamp(11px,.95vw,19px);}

/* ── Het moment van opleveren ──────────────────────────────────────
   Legt zich over het hele scherm, maar onder de kop: het logo, de dag
   en de tijd blijven ook tijdens een viering staan. */
.ks-viering{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  padding:14vh 6vw 8vh; text-align:center;
  background:
    radial-gradient(60% 70% at 50% 46%, rgba(0,174,239,.3) 0%, rgba(0,174,239,0) 70%),
    linear-gradient(135deg,#0D2F82 0%,#0A63B4 100%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 620ms var(--soepel), visibility 0s linear 620ms;
}
.ks-viering.is-aan{opacity:1; visibility:visible; transition-delay:0s;}
.ks-vier-in{max-width:88%;}
.ks-vier-kop{
  font-size:clamp(12px,1.15vw,23px); font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:2.2vh;
}
.ks-vier-titel{
  font-size:clamp(34px,6vw,120px); font-weight:900; font-style:italic;
  line-height:1.02; letter-spacing:-.035em;
}
.ks-vier-klant{
  margin-top:2.4vh; font-size:clamp(17px,2vw,40px); font-weight:400;
  color:rgba(255,255,255,.88);
}
.ks-vier-klant b{
  font-weight:800; color:#fff;
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat; background-size:100% .1em; background-position:0 100%;
  padding-bottom:.06em;
}
.ks-vier-bij{
  margin-top:1.4vh; font-size:clamp(12px,1.1vw,22px); font-weight:600;
  letter-spacing:.04em; color:rgba(255,255,255,.66);
}

/* Een smal of laag scherm: alles iets compacter en scrollbaar. Handig
   om hem even op een laptop of tablet te bekijken. */
@media (max-width:900px),(max-height:560px){
  .ks-podium{overflow-y:auto;}
  .ks-wielijst,.ks-attlijst,.ks-blokken{overflow:visible;}
  .ks-kader{display:none;}
  #s-kantoor{cursor:auto;}
  .ks-sluit{opacity:1;}
  .ks-tellers{grid-template-columns:repeat(2,1fr); gap:3vh 2vw;}
  .ks-teller + .ks-teller{padding-left:0; border-left:none;}
  .ks-wie-naam{min-width:5.4em;}
  .ks-weekraster{gap:1.6vw;}
  .ks-wielijst,.ks-attlijst{justify-content:flex-start;}
}
/* Wie beweging liever niet heeft, krijgt een stilstaand scherm: geen
   opkomst, geen drift en geen confetti. Het rouleren blijft, want dat
   is geen animatie maar een andere pagina. */
@media (prefers-reduced-motion:reduce){
  .ks-kader{animation:none;}
  .ks-beeld.is-weg{animation:none; opacity:0;}
  .ks-regel > span,[data-op],.ks-weekstaaf > span{animation:none;}
  .ks-titel::after{animation:none; transform:scaleX(1);}
  .ks-viering{transition:none;}
}

/* ════════════════════════════════════════════════════════════════
   ONBOARDING — het opstarten van een nieuwe klant
   ════════════════════════════════════════════════════════════════ */
.ws-badge-blauw{background:var(--blue-light); color:var(--royal);}
.ws-onboarding a{color:var(--royal); font-weight:700; text-decoration:underline;}

.onb-balkje{margin-bottom:1rem;}
.onb-modal{max-height:86vh; display:flex; flex-direction:column;}
.onb-modal #onb-body{flex:1; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px;}

.onb-top{display:flex; align-items:center; gap:12px; margin-bottom:4px;}
.onb-balk{
  flex:1; height:7px; background:var(--bone-vlak);
  border-radius:99px; overflow:hidden;
}
.onb-balk > span{
  display:block; height:100%; background:var(--royal);
  border-radius:99px; transition:width .35s var(--soepel);
}
.onb-stand{
  font-size:11.5px; font-weight:700; color:var(--muted);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.onb-volgende{font-size:12.5px; color:var(--muted); margin:8px 0 14px;}
.onb-volgende strong{color:var(--black);}

.onb-lijst{list-style:none; margin:0; padding:0;}
.onb-stap{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-bottom:1px solid var(--bone-lijn);
}
.onb-stap:last-child{border-bottom:none;}
/* Het rondje is de knop. Groot genoeg om op een tablet te raken. */
.onb-vink{
  flex-shrink:0; width:22px; height:22px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bone-rand); border-radius:50%;
  background:var(--white); cursor:pointer; padding:0;
  color:var(--white); font-size:11px; transition:all .15s;
}
.onb-vink:hover{border-color:var(--royal);}
.onb-vink:focus-visible{outline:2px solid var(--royal); outline-offset:2px;}
.onb-klaar .onb-vink{background:var(--success); border-color:var(--success);}
.onb-tekst{flex:1; min-width:0;}
.onb-kop{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:13.5px; font-weight:700; color:var(--black); line-height:1.4;
}
.onb-klaar .onb-kop{color:var(--muted); text-decoration:line-through;
  text-decoration-color:var(--bone-rand);}
.onb-merk{
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--kader-xs);
  background:var(--success-bg); color:var(--success);
  text-decoration:none; flex-shrink:0;
}
.onb-waarom{font-size:12px; color:var(--muted); line-height:1.6; margin-top:3px;}
.onb-klaar .onb-waarom{display:none;}
.onb-op{font-size:11px; color:var(--muted); margin-top:3px; font-style:italic;}
.onb-rechts{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.onb-weg{
  border:none; background:none; cursor:pointer; color:var(--muted);
  font-size:17px; line-height:1; padding:2px 5px; border-radius:var(--kader-xs);
}
.onb-weg:hover{color:var(--danger); background:var(--danger-bg);}

.onb-nieuw{display:flex; gap:8px; margin-top:14px;}
.onb-nieuw input{
  flex:1; padding:9px 12px; font-family:inherit; font-size:12.5px;
  border:1.5px solid var(--border); border-radius:var(--kader-sm);
  background:var(--white); color:var(--black); outline:none;
}
.onb-nieuw input:focus{border-color:var(--royal);}
.onb-voet{
  font-size:11.5px; color:var(--muted); line-height:1.6;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--bone-lijn);
}

/* ════════════════════════════════════════════════════════════════
   URENSTAAT
   ════════════════════════════════════════════════════════════════ */
.plan-urenstaat{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
  background:var(--royal-wash); border-radius:var(--kader);
  padding:14px 18px;
}
.plan-urenstaat strong{display:block; font-size:13px; color:var(--royal);}
.plan-urenstaat span{
  display:block; font-size:12px; color:var(--muted);
  line-height:1.6; margin-top:2px; max-width:58ch;
}
.us-snel{display:flex; gap:6px; flex-wrap:wrap;}
.us-snel .btn-ghost{font-size:11.5px; padding:6px 12px;}
.us-vinkjes{display:flex; flex-direction:column; gap:9px; margin:4px 0 14px;}
.us-vinkjes label{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--black); cursor:pointer;
}
.us-vinkjes input[type="checkbox"]{width:16px; height:16px; accent-color:var(--royal); cursor:pointer;}
.us-tarief{
  width:72px; padding:5px 9px; font-family:inherit; font-size:12.5px;
  border:1.5px solid var(--border); border-radius:var(--kader-xs);
  background:var(--white); color:var(--black); outline:none;
}
.us-tarief:focus{border-color:var(--royal);}
.us-voorbeeld{
  font-size:12.5px; line-height:1.65; color:var(--muted);
  background:var(--bone-vlak); border-radius:var(--kader-sm); padding:11px 14px;
}
.us-voorbeeld strong{color:var(--royal);}
.us-leeg{color:var(--muted); font-style:italic;}

/* ════════════════════════════════════════════════════════════════
   GELDKALENDER
   ════════════════════════════════════════════════════════════════ */
.gk-kaart{padding:18px 22px; margin-bottom:14px;}
.gk-kop{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:14px;
}
.gk-kop-titel{font-size:13px; font-weight:700; color:var(--black);}
.gk-kop-sub{
  font-size:12px; color:var(--muted); line-height:1.65;
  margin-top:3px; max-width:76ch;
}
.gk-legenda{display:flex; gap:14px; font-size:11px; font-weight:700; color:var(--muted);}
.gk-legenda span{display:flex; align-items:center; gap:5px; white-space:nowrap;}
.gk-stip{width:9px; height:9px; border-radius:2px; display:inline-block;}
.gk-stip-in{background:var(--success);}
.gk-stip-uit{background:var(--royal-40);}
.gk-stip-lijn{background:var(--royal); height:3px; width:14px; border-radius:2px;}

/* De grafiek: staven in een raster, met de saldolijn er als svg
   overheen. De svg rekt mee met de breedte; de lijndikte niet, dank
   zij non-scaling-stroke. */
.gk-grafiek{position:relative;}
/* Ingesprongen met een halve kolom aan weerszijden, zodat het eerste
   en het laatste punt precies boven hun eigen staaf vallen in plaats
   van tegen de rand van de kaart. */
.gk-lijn{
  position:absolute; top:0; height:150px;
  left:calc(100% / 24); right:calc(100% / 24); width:auto;
  pointer-events:none; z-index:2; overflow:visible;
}
.gk-kolommen{
  display:grid; grid-template-columns:repeat(12,1fr); gap:5px;
  align-items:end;
}
.gk-kolom{display:flex; flex-direction:column; min-width:0;}
.gk-staven{
  height:150px; display:flex; align-items:flex-end; justify-content:center;
  gap:3px;
}
.gk-staaf{
  width:9px; max-width:42%; border-radius:3px 3px 0 0;
  min-height:2px; transition:height .4s var(--soepel);
}
.gk-staaf-in{background:var(--success);}
.gk-staaf-uit{background:var(--royal-40);}
.gk-maandnaam{
  margin-top:8px; font-size:10.5px; font-weight:800; text-align:center;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
}
.gk-maandsaldo{
  margin-top:2px; font-size:10.5px; font-weight:700; text-align:center;
  color:var(--royal); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gk-negatief{color:var(--danger);}
.gk-kolom-rood .gk-maandnaam{color:var(--danger);}

.gk-lijst{list-style:none; margin:0; padding:0;}
.gk-rij{
  display:grid; grid-template-columns:5.5rem 1fr auto 6rem;
  gap:12px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--bone-lijn);
  font-size:12.5px;
}
.gk-rij:last-child{border-bottom:none;}
.gk-datum{font-weight:700; color:var(--muted); white-space:nowrap;}
.gk-tekst{min-width:0; color:var(--black); font-weight:600;}
.gk-bij{display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:1px;}
.gk-bedrag{
  font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums;
  text-align:right;
}
.gk-in .gk-bedrag{color:var(--success);}
.gk-uit .gk-bedrag{color:var(--danger);}
.gk-stand{
  text-align:right; font-weight:700; color:var(--royal);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.gk-meer,.gk-leeg{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.6;}
.gk-voet{
  font-size:11.5px; color:var(--muted); line-height:1.7;
  max-width:88ch; margin-top:4px;
}
.gk-veld label{
  display:block; font-size:10.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px;
}
.gk-veld-rij{display:flex; gap:7px;}
.gk-veld-rij input{
  width:120px; padding:8px 11px; font-family:inherit; font-size:13px;
  border:1.5px solid var(--border); border-radius:var(--kader-sm);
  background:var(--white); color:var(--black); outline:none;
}
.gk-veld-rij input:focus{border-color:var(--royal);}

.gk-melding{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--royal-wash); border-radius:var(--kader);
  padding:13px 18px; margin-bottom:14px;
}
.gk-melding strong{display:block; font-size:12.5px; color:var(--royal); width:100%;}
.gk-melding span{
  flex:1; min-width:16rem; font-size:12px; color:var(--muted); line-height:1.6;
}
.gk-melding.gk-rood{background:var(--danger-bg);}
.gk-melding.gk-rood strong{color:var(--danger);}

@media (max-width:860px){
  .gk-kolommen{grid-template-columns:repeat(6,1fr); gap:8px;}
  /* Met zes kolommen per rij klopt de lijn niet meer; die laten we
     dan weg in plaats van hem ernaast te laten lopen. */
  .gk-lijn{display:none;}
  .gk-rij{grid-template-columns:4.6rem 1fr auto; }
  .gk-stand{grid-column:2 / -1; text-align:left; font-size:11px; color:var(--muted);}
  .plan-urenstaat{flex-direction:column; align-items:stretch;}
}

/* ════════════════════════════════════════════════════════════════
   KENNISBANK

   Drie weergaven in één pagina: de bibliotheek, het artikel en de
   schrijfkant. Ze delen dezelfde ruimte, dus ze moeten ook dezelfde
   maatvoering aanhouden, anders springt het beeld bij elke wissel.

   Het leesgedeelte is bewust smal. Een regel van meer dan zo'n 72
   tekens leest slecht; een artikel dat over de volle breedte van een
   scherm van 27 duim loopt, lees je niet maar scan je, en dat is
   precies niet wat hier de bedoeling is.
   ════════════════════════════════════════════════════════════════ */

/* Het vergrootglas ontbrak nog in de iconenset. */
i.ico-speld{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 3.2h5.6l-.8 5.1 3 2.9v1.6H6.9v-1.6l3-2.9zM12 12.8V20.8'/%3E%3C/svg%3E");}
i.ico-zoek{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.8 3.6a7.2 7.2 0 100 14.4 7.2 7.2 0 000-14.4zM16 16l4.5 4.5'/%3E%3C/svg%3E");}

/* ── De kop van de bibliotheek ─────────────────────────────────── */
.kn-hero{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:1.1rem;
}
.kn-hero-kop{
  font-size:clamp(26px,2.6vw,38px); font-weight:900; font-style:italic;
  line-height:1.02; letter-spacing:-.035em; color:var(--royal);
}
.kn-hero-sub{
  margin-top:7px; font-size:13px; color:var(--muted);
  line-height:1.65; max-width:62ch;
}
.kn-nieuwknop{flex-shrink:0;}

/* ── Zoeken ────────────────────────────────────────────────────── */
.kn-zoekbalk{
  position:relative; display:flex; align-items:center;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--kader); padding:0 16px;
  transition:border-color .15s, box-shadow .15s;
}
.kn-zoekbalk:focus-within{
  border-color:var(--royal); box-shadow:0 0 0 3px rgba(16,53,144,.08);
}
.kn-zoekbalk > i{
  color:var(--muted); font-size:17px; flex-shrink:0; margin-right:11px;
}
.kn-zoekbalk input{
  flex:1; min-width:0; border:none; outline:none; background:none;
  font-family:inherit; font-size:15px; color:var(--black);
  padding:15px 0; appearance:none;
}
.kn-zoekbalk input::-webkit-search-cancel-button{display:none;}
.kn-zoekbalk input::placeholder{color:var(--muted);}
.kn-zoekwis{
  border:none; background:none; cursor:pointer; color:var(--muted);
  font-size:21px; line-height:1; padding:4px 2px 6px; flex-shrink:0;
}
.kn-zoekwis:hover{color:var(--black);}

/* ── De categorierail ──────────────────────────────────────────── */
.kn-rail{
  display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 4px;
}
.kn-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; font-size:12px; font-weight:700;
  padding:7px 13px; border-radius:var(--kader-sm); cursor:pointer;
  border:1.5px solid var(--border); background:var(--white);
  color:var(--muted); transition:all .14s; white-space:nowrap;
}
.kn-chip i{color:var(--royal); font-size:13px;}
.kn-chip span{
  font-size:10.5px; font-weight:800; color:var(--muted);
  background:var(--bone-vlak); border-radius:99px; padding:1px 6px;
}
.kn-chip:hover{border-color:var(--royal-40); color:var(--black);}
.kn-chip.aan{
  background:var(--royal); border-color:var(--royal); color:#fff;
}
.kn-chip.aan i{color:var(--yellow);}
.kn-chip.aan span{background:rgba(255,255,255,.18); color:#fff;}

/* ── Wat aandacht vraagt ───────────────────────────────────────── */
.kn-aandacht{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 4px;}
.kn-aandacht-blok{
  flex:1; min-width:19rem;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--royal-wash); border-radius:var(--kader);
  padding:13px 17px;
}
.kn-aandacht-blok strong{
  width:100%; font-size:12.5px; color:var(--royal); line-height:1.4;
}
.kn-aandacht-blok span{
  flex:1; min-width:12rem; font-size:11.5px; color:var(--muted); line-height:1.6;
}
.kn-aandacht-oud{background:var(--warning-bg);}
.kn-aandacht-oud strong{color:var(--warning);}

.kn-telling{font-size:12.5px; color:var(--muted); margin:18px 0 2px;}
.kn-sectiekop{
  font-size:10.5px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
  margin:24px 0 11px;
}

/* ── De kaarten ────────────────────────────────────────────────── */
.kn-raster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
  gap:13px;
}
.kn-kaart{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1.5px solid var(--bone-lijn);
  border-radius:var(--kader); padding:17px 19px 15px;
  cursor:pointer; overflow:hidden;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
/* Een streepje in de kleur van de categorie langs de linkerkant. Het
   is de enige plek waar de categoriekleur echt zichtbaar is, en dat is
   genoeg om een raster van twintig kaarten leesbaar te houden. */
.kn-kaart::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--royal);
}
.kn-kaart:hover{
  border-color:var(--royal-40); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(16,53,144,.07);
}
.kn-kaart:focus-visible{outline:2px solid var(--royal); outline-offset:2px;}
.kn-kaart.kn-sjabloon{border-style:dashed; background:var(--off);}
.kn-kaart-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:8px;
}
.kn-cat{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.kn-cat i{color:var(--royal);}
/* De speld is Deep Royal en niet geel: een geel icoon op een witte
   kaart is geel op wit, en dat is een van de vier combinaties die de
   merkrichtlijnen verbieden. */
.kn-speld{color:var(--royal); font-size:12px; line-height:1;}
.kn-speld i{color:var(--royal);}
.kn-kaart-titel{
  font-size:15.5px; font-weight:800; line-height:1.32;
  color:var(--black); margin-bottom:6px;
}
.kn-kaart-sub{
  flex:1; font-size:12.5px; line-height:1.6; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.kn-kaart-voet{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:13px; padding-top:11px; border-top:1px solid var(--bone-lijn);
}
.kn-tag{
  font-family:inherit; font-size:10.5px; font-weight:700;
  background:var(--bone-vlak); color:var(--muted);
  padding:3px 8px; border-radius:var(--kader-xs);
  border:none; cursor:pointer;
}
button.kn-tag:hover{background:var(--royal-20); color:var(--royal);}
.kn-kaart-meta{
  margin-left:auto; font-size:10.5px; color:var(--muted); white-space:nowrap;
}
.kn-kaart-meta.kn-oud{color:var(--warning); font-weight:700;}
.kn-kaart mark{background:var(--yellow-40); color:inherit; border-radius:2px;}

/* ── Niets gevonden ────────────────────────────────────────────── */
.kn-niets{
  background:var(--white); border:1.5px dashed var(--border);
  border-radius:var(--kader); padding:34px 30px; text-align:center;
  margin-top:18px;
}
.kn-niets p{font-size:13.5px; color:var(--muted); line-height:1.7; max-width:48ch; margin:0 auto 4px;}
.kn-niets strong{color:var(--black); font-size:15px;}
.kn-niets .btn-blue{margin-top:16px;}

/* ── De lege staat met de startset ─────────────────────────────── */
.kn-start{
  background:var(--gradient); border-radius:var(--kader);
  padding:clamp(28px,4vw,54px); color:#fff; overflow:hidden; position:relative;
}
/* Tekst op dit verloop: het loopt af naar Vivid Cyan, en wit op Vivid
   Cyan mag niet. Daarom een laag Deep Royal eroverheen aan de kant
   waar de tekst staat, precies zoals de merkrichtlijnen het bij
   beeldposts doen. */
.kn-start::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,53,144,.97) 0%,
    rgba(16,53,144,.9) 52%, rgba(16,53,144,.55) 82%, rgba(16,53,144,.35) 100%);
}
.kn-start-in{position:relative; z-index:2; max-width:72ch;}
.kn-start .kn-hero-kop{color:#fff;}
.kn-start-uit{
  margin-top:13px; font-size:14.5px; line-height:1.75;
  color:rgba(255,255,255,.9);
}
.kn-start-kaarten{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:14px; margin-top:26px;
}
.kn-start-kaarten > div{
  background:rgba(255,255,255,.1); border-radius:var(--kader-sm);
  padding:18px 20px; display:flex; flex-direction:column; gap:8px;
}
.kn-start-kaarten strong{font-size:14px; color:#fff;}
.kn-start-kaarten span{
  flex:1; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.84);
}
.kn-start-kaarten button{align-self:flex-start; margin-top:4px;}
.kn-start-kaarten .btn-ghost{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff;
}
.kn-start-kaarten .btn-ghost:hover{background:rgba(255,255,255,.22);}

/* ── De balk boven lezen en bewerken ───────────────────────────── */
.kn-leesbalk{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:1.4rem;
}
.kn-leesknoppen{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.kn-opslaghint{font-size:11.5px; color:var(--warning); font-weight:700;}
/* btn-main is gemaakt voor onder een formulier en neemt daar de volle
   breedte. In een knoppenbalk hoort hij zich naar zijn tekst te
   voegen. */
.kn-opslaan{width:auto; margin-top:0; padding:11px 22px;}

/* ── Het artikel ───────────────────────────────────────────────── */
.kn-lees{
  display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:40px;
  align-items:start;
}
/* Zonder dit rekt een brede tabel het rastervak op in plaats van zelf
   te gaan schuiven, en duwt hij op een telefoon de hele pagina opzij. */
.kn-lees > *{min-width:0;}
.kn-artikel{max-width:72ch;}
.kn-artikel-cat{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:10px;
}
.kn-artikel-cat i{color:var(--royal);}
.kn-artikel-klant{color:var(--muted); letter-spacing:.04em;}
.kn-artikel-titel{
  font-size:clamp(28px,3vw,42px); font-weight:900; font-style:italic;
  line-height:1.06; letter-spacing:-.035em; color:var(--royal);
}
/* De gele onderstreping uit de huisstijl, als een streep onder de kop
   in plaats van onder één woord: bij een titel die kan afbreken is dat
   het enige wat op elke regellengte klopt. */
.kn-artikel-titel::after{
  content:''; display:block; width:3.2em; height:5px; max-width:160px;
  background:var(--yellow); border-radius:2px; margin-top:16px;
}
.kn-artikel-sam{
  margin-top:18px; font-size:16px; line-height:1.7; color:var(--black);
  font-weight:500;
}

.kn-sjabloonmelding,.kn-oudmelding{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-radius:var(--kader); padding:14px 18px; margin-top:22px;
}
.kn-sjabloonmelding{background:var(--royal-wash);}
.kn-oudmelding{background:var(--warning-bg);}
.kn-sjabloonmelding strong,.kn-oudmelding strong{
  display:block; font-size:12.5px; color:var(--royal); margin-bottom:3px;
}
.kn-oudmelding strong{color:var(--warning);}
.kn-sjabloonmelding span,.kn-oudmelding span{
  font-size:12px; color:var(--muted); line-height:1.65;
}
.kn-oudmelding > div{flex:1; min-width:16rem;}

/* ── De opgemaakte tekst ───────────────────────────────────────── */
.kn-tekst{
  margin-top:26px; font-size:14.5px; line-height:1.78; color:var(--black);
}
.kn-tekst > *:first-child{margin-top:0;}
.kn-tekst p{margin-bottom:1.05em;}
.kn-tekst h2{
  font-size:20px; font-weight:800; color:var(--royal);
  margin:2.1em 0 .6em; letter-spacing:-.015em; line-height:1.3;
  padding-bottom:.4em; border-bottom:1px solid var(--bone-lijn);
}
.kn-tekst h3{font-size:16px; font-weight:800; margin:1.7em 0 .45em; line-height:1.35;}
.kn-tekst h4{font-size:14.5px; font-weight:800; margin:1.5em 0 .35em; color:var(--muted);}
.kn-tekst ul,.kn-tekst ol{margin:0 0 1.05em 1.3em;}
.kn-tekst li{margin-bottom:.4em;}
.kn-tekst li::marker{color:var(--royal-60);}
.kn-tekst strong{font-weight:800;}
.kn-tekst a{color:var(--royal); text-decoration:underline; text-underline-offset:2px;}
.kn-tekst a:hover{color:var(--mid);}
.kn-tekst hr{border:none; border-top:1px solid var(--bone-lijn); margin:2em 0;}
.kn-tekst code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em; background:var(--bone-vlak); color:var(--royal);
  padding:2px 6px; border-radius:var(--kader-xs);
}
.kn-code{
  background:var(--charcoal); border-radius:var(--kader-sm);
  padding:15px 18px; margin:0 0 1.2em; overflow-x:auto;
}
.kn-code code{
  background:none; color:#F7F5F2; padding:0; font-size:12.5px; line-height:1.7;
  white-space:pre;
}
/* Het let-op-blok: een gele streep ernaast, geen geel vlak. Geel vlak
   met tekst erin kan maar met één tekstkleur, en dan wordt de rest van
   de pagina onrustig. */
.kn-letop{
  border-left:4px solid var(--yellow);
  background:var(--bone-vlak); border-radius:0 var(--kader-sm) var(--kader-sm) 0;
  padding:13px 18px; margin:0 0 1.2em; color:var(--black);
  font-size:14px; line-height:1.72;
}
.kn-tabelwrap{overflow-x:auto; margin:0 0 1.3em;}
.kn-tabel{width:100%; border-collapse:collapse; font-size:13.5px; min-width:22rem;}
.kn-tabel th{
  text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  padding:9px 12px; border-bottom:2px solid var(--royal);
}
.kn-tabel td{
  padding:9px 12px; border-bottom:1px solid var(--bone-lijn);
  vertical-align:top; line-height:1.6;
}
.kn-tabel tbody tr:nth-child(even) td{background:var(--off);}

.kn-vinklijst{list-style:none; margin:0 0 1.2em; padding:0;}
.kn-vinklijst li{
  display:flex; gap:11px; align-items:flex-start; margin-bottom:.5em;
}
.kn-vink{
  flex-shrink:0; width:18px; height:18px; margin-top:3px;
  border:2px solid var(--bone-rand); border-radius:var(--kader-xs);
  background:var(--white); cursor:pointer; padding:0; position:relative;
  transition:all .14s;
}
.kn-vink:hover{border-color:var(--royal);}
.kn-vink.aan{background:var(--success); border-color:var(--success);}
.kn-vink.aan::after{
  content:''; position:absolute; left:4.5px; top:1px;
  width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(42deg);
}

/* Verwijzing naar een ander artikel. Bestaat het nog niet, dan staat
   er een plusje om het meteen aan te maken; zo groeit de bank uit het
   schrijven zelf. */
.kn-link{
  color:var(--royal); text-decoration:none;
  background:linear-gradient(var(--royal-20),var(--royal-20)) no-repeat 0 100%/100% 1.5px;
  padding-bottom:1px;
}
.kn-link:hover{background-image:linear-gradient(var(--yellow),var(--yellow)); background-size:100% 4px;}
.kn-link-leeg{
  color:var(--muted); border-bottom:1.5px dashed var(--bone-rand);
  display:inline-flex; align-items:baseline; gap:3px;
}
.kn-link-leeg button{
  border:none; background:var(--bone-vlak); color:var(--royal);
  font-family:inherit; font-size:11px; font-weight:800; line-height:1;
  padding:2px 5px; border-radius:var(--kader-xs); cursor:pointer;
}
.kn-link-leeg button:hover{background:var(--royal); color:#fff;}

/* ── De voet van een artikel ───────────────────────────────────── */
.kn-artikel-voet{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--bone-lijn);
}
.kn-tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.kn-herkomst{font-size:11.5px; color:var(--muted); line-height:1.75;}
.kn-nagekeken,.kn-weg{
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  background:none; border:1.5px solid var(--border); border-radius:var(--kader-sm);
  padding:7px 13px; margin:14px 7px 0 0; color:var(--muted);
}
.kn-nagekeken:hover{border-color:var(--success); color:var(--success);}
.kn-weg:hover{border-color:var(--danger); color:var(--danger);}

/* ── De zijkolom ───────────────────────────────────────────────── */
.kn-zij{
  position:sticky; top:1rem; display:flex; flex-direction:column; gap:16px;
}
.kn-zijblok{
  background:var(--white); border:1.5px solid var(--bone-lijn);
  border-radius:var(--kader); padding:15px 17px;
}
.kn-zijkop{
  font-size:10px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.kn-zijlijst{list-style:none; margin:0; padding:0;}
.kn-zijlijst li{padding:6px 0; border-bottom:1px solid var(--bone-lijn);}
.kn-zijlijst li:last-child{border-bottom:none;}
.kn-zijlijst a{
  display:block; font-size:12.5px; font-weight:700; color:var(--black);
  text-decoration:none; line-height:1.45;
}
.kn-zijlijst a:hover{color:var(--royal);}
.kn-zijlijst span{display:block; font-size:10.5px; color:var(--muted); margin-top:2px;}
.kn-opgave .kn-zijlijst a{font-weight:600; color:var(--muted);}
.kn-opgave .kn-zijlijst a:hover{color:var(--royal);}

/* ── Schrijven ─────────────────────────────────────────────────── */
.kn-bewerk{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px;
  align-items:start;
}
.kn-schrijf{display:flex; flex-direction:column; gap:11px;}
.kn-veld-titel,.kn-veld-sam{
  width:100%; font-family:inherit; border:none; outline:none;
  background:none; color:var(--black); padding:0;
}
.kn-veld-titel{
  font-size:clamp(24px,2.4vw,34px); font-weight:900; font-style:italic;
  letter-spacing:-.03em; line-height:1.12; color:var(--royal);
  border-bottom:3px solid var(--yellow); padding-bottom:9px;
}
.kn-veld-titel::placeholder{color:var(--royal-40); font-style:italic;}
.kn-veld-sam{font-size:14.5px; line-height:1.6; color:var(--muted);}
.kn-veld-sam::placeholder{color:var(--bone-rand);}

.kn-velden{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:10px; margin-top:4px;
}
.kn-velden label{
  display:block; font-size:10.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.kn-velden select,.kn-velden input{
  width:100%; margin-top:5px; padding:9px 11px;
  font-family:inherit; font-size:12.5px; text-transform:none; letter-spacing:0;
  font-weight:500; color:var(--black);
  border:1.5px solid var(--border); border-radius:var(--kader-sm);
  background:var(--white); outline:none;
}
.kn-velden select:focus,.kn-velden input:focus{border-color:var(--royal);}

.kn-werkbalk{
  display:flex; gap:5px; flex-wrap:wrap;
  background:var(--bone-vlak); border-radius:var(--kader-sm); padding:6px;
}
.kn-werkbalk button{
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  border:none; background:var(--white); color:var(--muted);
  padding:6px 11px; border-radius:var(--kader-xs); transition:all .13s;
}
.kn-werkbalk button:hover{background:var(--royal); color:#fff;}

.kn-veld-inhoud{
  width:100%; min-height:48vh; resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px; line-height:1.75; color:var(--black);
  border:1.5px solid var(--border); border-radius:var(--kader-sm);
  padding:16px 18px; background:var(--white); outline:none;
  tab-size:2;
}
.kn-veld-inhoud:focus{border-color:var(--royal);}
.kn-schrijfhulp{font-size:11.5px; color:var(--muted); line-height:1.7;}

.kn-voorbeeld{
  position:sticky; top:1rem; min-height:34rem;
  background:var(--white); border:1.5px solid var(--bone-lijn);
  border-radius:var(--kader); padding:22px 26px 26px;
  max-height:calc(100vh - 7rem); overflow-y:auto;
}
.kn-voorbeeld-kop{
  font-size:10px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:11px; border-bottom:1px solid var(--bone-lijn);
}
.kn-voorbeeld .kn-tekst{margin-top:18px;}
.kn-voorbeeld-leeg{color:var(--muted); font-style:italic;}

/* ── Smaller scherm ────────────────────────────────────────────── */
@media (max-width:1100px){
  .kn-lees{grid-template-columns:1fr; gap:26px;}
  /* Onder het artikel hoeft de zijkolom niet meer mee te schuiven. */
  .kn-zij{position:static; flex-direction:row; flex-wrap:wrap;}
  .kn-zij > *{flex:1; min-width:15rem;}
  .kn-bewerk{grid-template-columns:1fr;}
  .kn-voorbeeld{position:static; max-height:none;}
}
@media (max-width:640px){
  /* Twee zijblokken naast elkaar passen hier niet meer; met een
     minimumbreedte van 15rem duwen ze de pagina opzij. */
  .kn-zij{flex-direction:column;}
  .kn-zij > *{min-width:0;}
  .kn-tabel{min-width:17rem; font-size:12.5px;}
  .kn-tabel th,.kn-tabel td{padding:7px 9px;}
  .kn-hero{align-items:stretch;}
  .kn-nieuwknop{width:100%;}
  .kn-raster{grid-template-columns:1fr;}
  .kn-leesbalk{align-items:stretch;}
  .kn-leesknoppen{justify-content:space-between;}
  .kn-artikel-titel::after{margin-top:12px;}
}

/* ── Kennisbank: niveau en de tweede set ───────────────────────────
   Het niveau is het label waarmee je in een zoekresultaat met acht
   treffers ziet welke je zoekt zonder te openen. Het moet dus opvallen
   zonder de kaart over te nemen: een klein vlakje naast de categorie,
   in grijs en Deep Royal in plaats van in een eigen kleur. */
.kn-niveau{
  font-size:9.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 7px; border-radius:var(--kader-xs);
  white-space:nowrap; flex-shrink:0;
}
.kn-niveau-basis{background:var(--bone-vlak); color:var(--muted);}
.kn-niveau-verdieping{background:var(--royal-wash); color:var(--royal);}
.kn-kaart-top{align-items:baseline;}
.kn-kaart-top .kn-cat{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.kn-kaart-top .kn-niveau{margin-left:auto;}
.kn-kaart-top .kn-speld{margin-left:6px;}
.kn-artikel-cat .kn-niveau{margin-left:4px;}

.kn-niveaurail{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:11px 0 4px;
}
.kn-niveaulbl{
  font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-right:2px;
}
.kn-niv{
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  padding:5px 11px; border-radius:var(--kader-xs);
  border:1.5px solid var(--border); background:var(--white); color:var(--muted);
  transition:all .14s; white-space:nowrap;
}
.kn-niv span{
  font-size:10px; font-weight:800; color:var(--muted); margin-left:4px;
}
.kn-niv:hover{border-color:var(--royal-40); color:var(--black);}
.kn-niv.aan{background:var(--royal); border-color:var(--royal); color:#fff;}
.kn-niv.aan span{color:rgba(255,255,255,.75);}
.kn-niveauhint{
  font-size:11.5px; color:var(--muted); line-height:1.5;
  margin-left:4px; flex:1; min-width:14rem;
}

/* Het aanbod onderaan: een uitnodiging en geen taak, dus rustig en
   onderaan in plaats van bovenaan in het blok met aandachtspunten. */
.kn-aanbod{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-top:26px;
  background:var(--white); border:1.5px dashed var(--border);
  border-radius:var(--kader); padding:16px 20px;
}
.kn-aanbod strong{display:block; font-size:13px; color:var(--black);}
.kn-aanbod span{
  display:block; font-size:12px; color:var(--muted);
  line-height:1.65; margin-top:3px; max-width:70ch;
}
.kn-aanbod b{color:var(--royal); font-weight:700;}
.kn-aanbod-knoppen{display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0;}

/* Het vinkje voor naslag in de schrijfkant. */
.kn-naslagvink{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  background:var(--bone-vlak); border-radius:var(--kader-sm); padding:12px 14px;
}
.kn-naslagvink input{
  width:16px; height:16px; margin-top:2px; accent-color:var(--royal);
  cursor:pointer; flex-shrink:0;
}
.kn-naslagvink span{font-size:12px; color:var(--muted); line-height:1.65;}
.kn-naslagvink strong{color:var(--black);}

@media (max-width:640px){
  .kn-niveauhint{display:none;}
  .kn-aanbod{flex-direction:column; align-items:stretch;}
}

/* ═══ FEEDBACKRONDES ═══════════════════════════════════════════════
   Eén kaart per lopende ronde, het gesprek eronder, de punten
   daaronder. Wat afgerond is klapt dicht maar blijft leesbaar.
   Dezelfde opmaak in de admin en in het klantportaal. */

.fb-project{margin-bottom:22px;}
.fb-project + .fb-project{padding-top:18px; border-top:1px solid var(--border);}
.fb-project-kop{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px; flex-wrap:wrap;
}
.fb-project-kop > span{font-size:13px; font-weight:700; color:var(--black);}

.fb-kaart{
  background:var(--white); border:1px solid var(--border);
  border-left:3px solid var(--royal); border-radius:var(--kader-sm);
  padding:16px 18px; margin-bottom:10px;
}
.fb-kop{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:10px; flex-wrap:wrap;
}
.fb-kop-titel{font-size:13px; font-weight:700; color:var(--black); line-height:1.4;}
.fb-kop-sub{font-size:11px; color:var(--muted); margin-top:2px;}
.fb-lang{outline:1.5px solid var(--warning); outline-offset:1px;}

.fb-vraag{
  font-size:12.5px; color:var(--black); line-height:1.65; margin:0 0 12px;
  padding:10px 14px; background:var(--off); border-radius:var(--kader-xs);
}
.fb-leeg{font-size:12px; color:var(--muted); line-height:1.65; margin:0;}

/* Het gesprek */
.fb-draad{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.fb-bel{
  border-radius:var(--kader-xs); padding:9px 13px; max-width:92%;
  border:1px solid var(--border);
}
.fb-bel-klant{background:var(--off); align-self:flex-start;}
.fb-bel-wij{background:var(--blue-light); border-color:transparent; align-self:flex-end;}
.fb-bel-kop{
  font-size:10px; font-weight:700; color:var(--royal);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
}
.fb-bel-kop span{font-weight:600; color:var(--muted); letter-spacing:0; text-transform:none;}
.fb-bel-txt{font-size:12.5px; color:var(--black); line-height:1.6; word-break:break-word;}

.fb-antwoord{display:flex; gap:8px; align-items:flex-end; margin-bottom:4px;}
.fb-antwoord textarea{
  flex:1; min-width:0; font-family:inherit; font-size:12.5px; line-height:1.6;
  padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--kader-xs);
  background:var(--white); color:var(--black); resize:vertical; outline:none;
}
.fb-antwoord textarea:focus{border-color:var(--royal);}
.fb-antwoord button{flex-shrink:0;}

/* De punten: wat de klant vroeg, afgevinkt */
.fb-vak{margin-top:14px; padding-top:12px; border-top:1px solid var(--border);}
.fb-vak-kop{
  font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px;
}
.fb-vak-kop span{font-weight:600; text-transform:none; letter-spacing:0; opacity:.8;}

.fb-punt{display:flex; align-items:flex-start; gap:9px; padding:5px 0;}
.fb-punt-af .fb-punt-txt{color:var(--muted); text-decoration:line-through;}
.fb-punt-txt{font-size:12.5px; color:var(--black); line-height:1.55; flex:1; min-width:0; word-break:break-word;}
.fb-tik{
  width:17px; height:17px; flex-shrink:0; margin-top:1px; padding:0;
  border:1.5px solid var(--bone-rand); border-radius:5px; background:var(--white);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--white); transition:background .15s var(--soepel), border-color .15s var(--soepel);
}
.fb-tik:hover:not(:disabled){border-color:var(--royal);}
.fb-tik-aan{background:var(--royal); border-color:var(--royal);}
.fb-tik i{width:11px; height:11px;}
.fb-vervalt{
  font-size:10px; font-weight:700; color:var(--muted); background:var(--off);
  padding:1px 7px; border-radius:var(--kader-xs); flex-shrink:0; align-self:center;
}
.fb-punt-knoppen{display:flex; gap:4px; flex-shrink:0; opacity:0; transition:opacity .15s;}
.fb-punt:hover .fb-punt-knoppen, .fb-punt:focus-within .fb-punt-knoppen{opacity:1;}
.fb-punt-knoppen button{
  font-size:10px; font-weight:700; color:var(--muted); background:none;
  border:1px solid var(--border); border-radius:var(--kader-xs);
  padding:1px 7px; cursor:pointer; line-height:1.6;
}
.fb-punt-knoppen button:hover{border-color:var(--royal); color:var(--royal);}
.fb-punt-knoppen i{width:9px; height:9px;}

.fb-puntnieuw{display:flex; gap:6px; margin-top:8px;}
.fb-puntnieuw input{
  flex:1; min-width:0; font-family:inherit; font-size:12px; padding:6px 11px;
  border:1.5px dashed var(--bone-lijn); border-radius:var(--kader-xs);
  background:transparent; color:var(--black); outline:none;
}
.fb-puntnieuw input:focus{border-style:solid; border-color:var(--royal);}

.fb-knoppen{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px;}
.fb-waarsch{font-size:11px; color:var(--warning); font-weight:600;}
.fb-notitie{font-size:11.5px; color:var(--muted); font-style:italic; margin:10px 0 0;}

/* Het archief: dicht, maar niets weg */
.fb-oud-groep{margin-top:10px;}
.fb-oud{
  border:1px solid var(--border); border-radius:var(--kader-xs);
  background:var(--off); margin-bottom:6px;
}
.fb-oud > summary{
  cursor:pointer; padding:9px 13px; display:flex; gap:10px;
  align-items:baseline; flex-wrap:wrap; list-style:none;
}
.fb-oud > summary::-webkit-details-marker{display:none;}
.fb-oud > summary:hover .fb-oud-titel{color:var(--royal);}
.fb-oud > summary:focus-visible{outline:2px solid var(--royal); outline-offset:-2px;}
.fb-oud-nr{
  font-size:10px; font-weight:700; color:var(--white); background:var(--royal);
  padding:2px 8px; border-radius:var(--kader-xs); flex-shrink:0;
}
.fb-oud-titel{font-size:12.5px; font-weight:700; color:var(--black); flex:1; min-width:0;}
.fb-oud-oordeel{font-size:11px; color:var(--muted); font-weight:600;}
.fb-oud-datum{font-size:11px; color:var(--muted);}
.fb-oud-body{padding:4px 13px 13px; border-top:1px solid var(--border);}
.fb-oud[open] > summary{border-bottom:0;}

/* Projecten waar nog nooit om feedback is gevraagd */
.fb-nog{margin-top:18px; padding-top:14px; border-top:1px solid var(--border);}
.fb-nog-kop{
  font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px;
}
.fb-nog-rij{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--border);
}
.fb-nog-rij:last-child{border-bottom:0;}
.fb-nog-rij > span{font-size:12.5px; color:var(--black); min-width:0; word-break:break-word;}

@media (max-width:640px){
  .fb-kaart{padding:14px;}
  .fb-bel{max-width:100%;}
  .fb-antwoord{flex-direction:column; align-items:stretch;}
  .fb-punt-knoppen{opacity:1;}
  .fb-oud-datum{display:none;}
}

/* ═══ RETAINERS ═══════════════════════════════════════════════════
   Het maandschema van een doorlopende samenwerking. Eén blokje per
   maand van de looptijd: hoever ben je, en welke maand is nu aan de
   beurt. */

.ret-balk{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
  background:var(--blue-light); border-radius:var(--kader-sm);
  padding:14px 18px; border-left:3px solid var(--royal);
}
.ret-balk strong{display:block; font-size:13px; color:var(--black); margin-bottom:2px;}
.ret-balk span{font-size:11.5px; color:var(--muted); line-height:1.6;}
.ret-balk button{flex-shrink:0;}

.ret-kaart{padding:18px 22px; margin-bottom:14px;}
.ret-kop{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:14px;
}
.ret-klant{
  font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em;
}
.ret-naam{font-size:15px; font-weight:700; color:var(--black); margin-top:2px;}
.ret-cijfers{display:flex; gap:22px; flex-wrap:wrap;}
.ret-cijfers > div{font-size:10.5px; color:var(--muted); text-align:right; line-height:1.5;}
.ret-cijfers span{
  display:block; font-size:14px; font-weight:700; color:var(--black);
  letter-spacing:-.01em;
}

/* Het strookje maanden */
.ret-strook{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px;}
.ret-maand{
  flex:1 1 52px; min-width:52px; border-radius:var(--kader-xs);
  padding:9px 4px 7px; text-align:center; border:1px solid transparent;
  position:relative;
}
.ret-maand-lbl{
  font-size:9.5px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; display:block;
}
.ret-m-betaald{background:var(--success-bg); color:var(--success);}
.ret-m-open{background:var(--blue-light); color:var(--royal);}
.ret-m-nu{background:var(--warning-bg); color:var(--warning); border-color:var(--warning);}
.ret-m-later{background:var(--off); color:var(--muted); border-color:var(--bone-lijn);}

.ret-actie{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; background:var(--off);
  border-radius:var(--kader-sm); padding:13px 16px;
}
.ret-actie-txt strong{display:block; font-size:12.5px; color:var(--black); margin-bottom:2px;}
.ret-actie-txt span{font-size:11px; color:var(--muted);}
.ret-actie-knoppen{display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0;}
.ret-klaar{font-size:12px; color:var(--muted); margin:0; line-height:1.65;}

.ret-facturen{margin-top:14px; padding-top:12px; border-top:1px solid var(--border);}
.ret-facturen > summary{
  cursor:pointer; font-size:11px; font-weight:700; color:var(--muted);
  list-style:none; text-transform:uppercase; letter-spacing:.06em;
}
.ret-facturen > summary::-webkit-details-marker{display:none;}
.ret-facturen > summary:hover{color:var(--royal);}
.ret-facturen > summary:focus-visible{outline:2px solid var(--royal); outline-offset:2px;}
.ret-tabel{margin-top:8px; width:100%;}
.ret-tabel td{padding:7px 8px; font-size:12px; vertical-align:middle;}
.ret-tabel td:first-child{padding-left:0;}
.ret-tabel td:last-child{padding-right:0;}
.ret-tabel button{margin-left:4px;}

.ret-uitleg{
  font-size:11px; color:var(--muted); line-height:1.75;
  max-width:80ch; margin-top:12px;
}
.ret-uitleg strong{color:var(--black); font-weight:700;}

/* ═══ EXTRA'S OP EEN FACTUUR ═════════════════════════════════════ */
.inv-extra{
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--border);
}
.inv-extra:last-of-type{border-bottom:0;}
.inv-extra-oms{flex:1; min-width:0; font-size:12.5px; color:var(--black); word-break:break-word;}
.inv-extra-bedrag{font-size:12.5px; font-weight:700; color:var(--black); white-space:nowrap;}
.inv-extra button{
  background:none; border:1px solid var(--border); border-radius:var(--kader-xs);
  padding:2px 6px; cursor:pointer; color:var(--muted); flex-shrink:0;
  display:flex; align-items:center;
}
.inv-extra button:hover{border-color:var(--danger); color:var(--danger);}
.inv-extra button i{width:10px; height:10px;}
.inv-extra-leeg{font-size:11.5px; color:var(--muted); margin:0 0 4px; line-height:1.6;}

.inv-extra-nieuw{display:flex; gap:6px; margin-top:8px;}
.inv-extra-nieuw input[type=text]{flex:1; min-width:0;}
.inv-extra-nieuw input[type=number]{width:96px; flex-shrink:0;}
.inv-extra-nieuw input{
  font-family:inherit; font-size:12px; padding:7px 11px;
  border:1.5px dashed var(--bone-lijn); border-radius:var(--kader-xs);
  background:transparent; color:var(--black); outline:none;
}
.inv-extra-nieuw input:focus{border-style:solid; border-color:var(--royal);}
.inv-extra-nieuw button{flex-shrink:0;}

.inv-som{
  margin-top:14px; padding:12px 14px; background:var(--off);
  border-radius:var(--kader-sm);
}
.inv-som > div{
  display:flex; justify-content:space-between; gap:12px;
  font-size:12px; color:var(--muted); padding:2px 0;
}
.inv-som .inv-som-tot{
  font-size:13px; font-weight:700; color:var(--black);
  border-top:1px solid var(--bone-lijn); margin-top:4px; padding-top:6px;
}

@media (max-width:640px){
  .ret-kaart{padding:16px;}
  .ret-cijfers{gap:14px;}
  .ret-cijfers > div{text-align:left;}
  .ret-maand{flex:1 1 44px; min-width:44px;}
  .ret-actie{flex-direction:column; align-items:stretch;}
  .inv-extra-nieuw{flex-wrap:wrap;}
  .inv-extra-nieuw input[type=number]{width:100px;}
}

/* Een vervallen punt: geen leeg hokje (dat leest als "nog te doen")
   maar een dichtgestreept vakje. */
.fb-tik-nee{background:var(--bone-vlak); border-color:var(--bone-lijn); position:relative;}
.fb-tik-nee::after{
  content:''; position:absolute; left:3px; right:3px; top:50%;
  height:1.5px; background:var(--bone-rand); border-radius:1px;
}

/* Wat de kleuren in het maandstrookje betekenen. */
.ret-legenda{
  display:flex; gap:16px; flex-wrap:wrap; margin:-6px 0 14px;
  font-size:10.5px; color:var(--muted);
}
.ret-legenda span{display:flex; align-items:center; gap:5px;}
.ret-legenda i{
  width:11px; height:11px; border-radius:3px; display:block;
  border:1px solid transparent;
}

/* ═══ DELIVERABLES IN HET PORTAAL ═════════════════════════════════
   Waar de klant voor komt. Een voorbeeldbeeld links, de naam en de
   datum ernaast, en een markering op wat er net bij is gekomen. */

.dv-kaart{align-items:center; gap:14px;}
.dv-kaart-nieuw{border-color:var(--royal); box-shadow:0 2px 10px rgba(16,53,144,.07);}

.dv-beeld{
  width:72px; height:48px; flex-shrink:0; border-radius:var(--kader-xs);
  overflow:hidden; background:var(--bone-vlak); position:relative;
  display:flex; align-items:center; justify-content:center;
}
.dv-beeld img{width:100%; height:100%; object-fit:cover; display:block;}
.dv-beeld-ico{display:none; color:var(--royal); opacity:.55;}
.dv-beeld-ico i{width:20px; height:20px;}
.dv-beeld-leeg{background:var(--blue-light);}
.dv-beeld-leeg .dv-beeld-ico{display:flex;}
.dv-beeld-groot{width:104px; height:68px;}

.dv-tekst{flex:1; min-width:0;}
.dv-titel{
  font-size:13px; font-weight:700; color:var(--black); line-height:1.4;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.dv-sub{font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5; word-break:break-word;}

.dv-nieuw{
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--royal); color:var(--white);
  padding:2px 7px; border-radius:var(--kader-xs); flex-shrink:0;
}
.dv-nieuwbalk{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; color:var(--black); margin-bottom:14px;
  background:var(--blue-light); border-radius:var(--kader-sm);
  padding:10px 14px;
}
.dv-geenlink{font-size:11px; color:var(--muted); padding:4px 8px; flex-shrink:0;}

/* Het uploadblok in de beheermodal */
.dv-upload{display:flex; gap:12px; align-items:flex-start; margin-top:4px;}
.dv-upload-prev{
  width:88px; height:58px; flex-shrink:0; border-radius:var(--kader-xs);
  border:1.5px solid var(--border); background:var(--off); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.dv-upload-prev img{width:100%; height:100%; object-fit:cover;}
.dv-upload-rechts{flex:1; min-width:0;}
.dv-upload-rechts input[type=text]{
  width:100%; padding:7px 10px; border:1.5px solid var(--border);
  border-radius:var(--kader-sm); font-size:12px; outline:none;
  font-family:'Montserrat',sans-serif; color:var(--black);
}
.dv-upload-rechts input[type=text]:focus{border-color:var(--royal);}
.dv-upload-knop{
  display:inline-flex; align-items:center; gap:5px; margin-top:5px;
  cursor:pointer; font-size:11px; font-weight:700; color:var(--royal);
}
.dv-upload-uitleg{font-size:10.5px; color:var(--muted); line-height:1.6; margin:6px 0 0;}

@media (max-width:640px){
  .dv-kaart{flex-wrap:wrap;}
  .dv-beeld{width:56px; height:40px;}
  .dv-upload{flex-direction:column;}
  .dv-upload-prev{width:100%; height:120px;}
}

/* Waar een feedbackronde over gaat: de oplevering, met een knop om
   hem te openen. Staat boven de vraag, want dat is waar je eerst
   naar kijkt. */
.fb-waarover{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--off); border:1px solid var(--border);
  border-radius:var(--kader-xs); padding:10px 12px; margin-bottom:10px;
}
.fb-waarover-txt{flex:1; min-width:0;}
.fb-waarover-txt span{
  display:block; font-size:12.5px; font-weight:700; color:var(--black);
  line-height:1.4; word-break:break-word;
}
.fb-waarover-txt small{display:block; font-size:11px; color:var(--muted); margin-top:2px;}
.fb-waarover > a{flex-shrink:0;}

/* Uitleg onder een veld in een modal */
.mf-hint{font-size:10.5px; color:var(--muted); line-height:1.6; margin:5px 0 0;}

@media (max-width:640px){
  .fb-waarover > a{width:100%; text-align:center;}
}

/* De knop waarmee de klant zijn maandrapportage ophaalt. */
.p-rapportknop{
  margin-left:auto; display:flex; align-items:center; gap:5px;
  background:var(--royal); color:var(--white); border:1.5px solid var(--royal);
  border-radius:var(--kader-sm); font-size:11px; font-weight:700;
  padding:6px 12px; cursor:pointer; font-family:inherit;
  transition:background .15s var(--soepel);
}
.p-rapportknop:hover{background:var(--mid); border-color:var(--mid);}
.p-rapportknop i{width:12px; height:12px;}
/* Staat de rapportknop er, dan duwt die de verversknop al naar rechts. */
.p-rapportknop + button{margin-left:8px !important;}

/* De foto in het contactblok, zodat de maatvoering niet in de JS staat. */
.contact-foto{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  flex-shrink:0; border:2px solid var(--royal);
}

/* ═══ MAIL STUREN ═════════════════════════════════════════════════
   Breed op de computer: links schrijf je, rechts zie je meteen wat
   de klant krijgt. Op een smal scherm onder elkaar. */
.modal.mail-modal{max-width:1200px; width:96vw; max-height:94vh; padding:1.75rem 2rem;}
.mail-raster{display:grid; grid-template-columns:minmax(0,1fr); gap:22px;}
@media (min-width:1000px){
  .mail-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:start;}
  .mail-rechts{position:sticky; top:0;}
}
.mail-aan{display:flex; flex-direction:column; gap:6px; margin-top:6px;}
.mail-veld{font-size:13px; line-height:1.65; resize:vertical;}
.mail-afzender{
  font-size:11.5px; color:var(--muted); line-height:1.65;
  background:var(--off); border-radius:var(--kader-sm); padding:10px 13px;
}
.mail-afzender strong{color:var(--black);}
.mail-afz-mist{display:block; margin-top:4px; color:var(--warning); font-weight:600;}

.mail-voorbeeld-kop{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  flex-wrap:wrap; margin-bottom:8px;
}
.mail-voorbeeld-kop > span:first-child{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--royal);
}
.mail-voorbeeld-tip{font-size:10.5px; color:var(--muted);}
.mail-voorbeeld{
  width:100%; height:min(68vh,720px); border:1px solid var(--border);
  border-radius:var(--kader-sm); background:var(--off); display:block;
}
@media (max-width:999px){
  .mail-voorbeeld{height:560px;}
}
@media (max-width:640px){
  .modal.mail-modal{width:100%; padding:1.25rem;}
}
/* De contactpersonen zijn labels binnen een veld, en namen dus de
   hoofdletters van een veldlabel over. */
.mail-aan label{text-transform:none !important; letter-spacing:0 !important; font-size:12px; font-weight:600;}
.mail-aan label span:last-child{font-weight:500;}

/* ═══ KNOPPENSYSTEEM ══════════════════════════════════════════════
   Alle knoppen hadden hun eigen opbouw. De omlijnde knop had een rand
   van 1,5 px en de gevulde niet, dus stonden ze naast elkaar altijd
   net niet even hoog (32 tegen 30 px). De regelhoogte stond overal op
   "normal", wat per lettertype verschilt, en een icoon in een knop
   zat op de tekstregel in plaats van in het midden.

   Nu twee maten, met elk één opbouw:
     gewoon  34 px   .btn-blue  .btn-ghost  .btn-geel
     klein   26 px   .btn-smb   .btn-smr    .link-open-btn
   Elke knop heeft een rand (bij gevulde knoppen onzichtbaar), een
   vaste regelhoogte, en de inhoud in het midden, ook met een icoon. */

.btn-blue, .btn-ghost, .btn-geel,
.btn-smb, .btn-smr, .link-open-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  box-sizing:border-box; line-height:1.25; white-space:nowrap;
  vertical-align:middle; font-family:inherit; text-align:center;
}
.btn-blue, .btn-ghost, .btn-geel{
  min-height:34px; padding:7px 16px; border-width:1.5px; border-style:solid;
}
.btn-blue{border-color:var(--royal);}
.btn-blue:hover{border-color:var(--mid);}
.btn-blue:active{border-color:#0C2A73;}
.btn-geel{border-color:var(--yellow);}
.btn-geel:hover{border-color:var(--yellow-80);}

.btn-smb, .btn-smr, .link-open-btn{
  min-height:26px; padding:4px 10px; border:1.5px solid transparent;
}
/* Effen Deep Royal: het kleurverloop liep rechts uit in Vivid Cyan, en
   wit op Vivid Cyan is een van de vier verboden combinaties. */
.link-open-btn{background:var(--royal); border-color:var(--royal);}
.link-open-btn:hover{background:var(--mid); border-color:var(--mid);}

/* Iconen in een knop: op maat van de tekst, en niet meer op de basislijn */
.btn-blue i[class*=ico-], .btn-ghost i[class*=ico-], .btn-geel i[class*=ico-],
.btn-smb i[class*=ico-], .btn-smr i[class*=ico-], .link-open-btn i[class*=ico-]{
  width:1.15em; height:1.15em; flex-shrink:0; vertical-align:0; margin:0;
}
.btn-blue svg, .btn-ghost svg, .btn-geel svg, .btn-smb svg, .btn-smr svg{flex-shrink:0; display:block;}

/* Een knop die de volle breedte moet hebben, blijft dat */
.btn-blue[style*="width:100%"], .btn-ghost[style*="width:100%"]{display:flex;}

/* Velden naast een gewone knop: dezelfde hoogte, zodat een rij klopt */
.modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
.modal select{min-height:34px;}

@media (max-width:640px){
  /* Raakoppervlakte op de telefoon */
  .btn-blue, .btn-ghost, .btn-geel{min-height:44px; padding:10px 14px;}
  .btn-smb, .btn-smr, .link-open-btn{min-height:36px;}
}

/* Een verwijderknop naast een gewone knop: zelfde maat, rood bij hover */
.btn-ghost.btn-gevaar:hover{border-color:var(--danger); color:var(--danger);}
/* De weergavekeuze bij projecten staat naast "+ Nieuw project" */
.po-view{min-height:34px; display:inline-flex; align-items:center; box-sizing:border-box; line-height:1.25;}
/* De rapportknop staat naast de maandkeuze en de verversknop */
.p-rapportknop{min-height:34px; box-sizing:border-box; padding:6px 12px; line-height:1.25;}

/* ═══ UITLIJNING: losse reparaties uit de rondgang ═══════════════ */

/* Een brede tabel in een kaart scrolt binnen de kaart in plaats van
   eruit te steken. */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tbl-scroll > .tbl{width:100%;}

/* Tabbladen die niet passen, scrollen in plaats van om te klappen.
   Een tablabel over twee regels, met het icoon erboven, staat scheef
   naast een label op één regel. */
.rent-tabs{flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none;}
.rent-tabs::-webkit-scrollbar{display:none;}
.rent-tabs button{flex-shrink:0; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
.cal-tabs{max-width:100%; overflow-x:auto; scrollbar-width:none;}
.cal-tabs::-webkit-scrollbar{display:none;}
.cal-tab{white-space:nowrap; flex-shrink:0;}
.sort-dir{white-space:nowrap;}

/* Knoppen in een klantblok op één lijn */
.cb-btns{align-items:center;}

/* De weergavekeuze bij projecten: tekst in het midden, ook als de
   knoppen op de telefoon de volle breedte krijgen. */
.po-view{justify-content:center;}

@media (max-width:640px){
  /* Velden zo hoog als de knoppen ernaast */
  .modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
  .modal select{min-height:44px;}
  .po-view{min-height:44px;}
}

/* Vandaag: het cijfer in "Vraagt aandacht" stond linksboven in zijn
   vakje. De regel voor de tekstregels (.vd-aandacht-rij span) is
   specifieker dan .vd-aandacht-nr en maakte het vakje een blok. */
.vd-aandacht-rij .vd-aandacht-nr{
  display:flex; align-items:center; justify-content:center;
  margin-top:0; font-size:12.5px; color:var(--warning);
}
/* Op de donkere takenkaart: rood en blauw op Deep Royal zijn onleesbaar */
.vd-kaart-taken .vd-laat{color:var(--yellow);}
.vd-kaart-taken .vd-nu{color:#fff;}
/* Kaarten op één rij even hoog; de rechterkolom vult tot onderaan */
.vd-grid, .vd-onder{align-items:stretch;}
.vd-kolom > :last-child{flex:1;}

/* De knoppenrij onder een factuurkaartje: vier knoppen pasten niet in
   200 px, "Openstaand" werd afgekapt en het kruisje viel buiten de
   kaart. Nu breder, en de verwijderknop is een icoon aan het eind. */
.inv-kaart-acties{
  display:flex; align-items:center; gap:4px; margin-top:auto;
  padding-top:8px; border-top:1px solid var(--border);
}
.inv-kaart-acties .btn-smb, .inv-kaart-acties .btn-smr{font-size:10.5px; padding:4px 8px;}
.inv-kaart-acties .inv-pdf{background:var(--dark); color:#fff; border-color:var(--dark);}
.inv-kaart-acties .inv-pdf:hover{background:var(--mid); border-color:var(--mid);}
.inv-kaart-acties .inv-weg{margin-left:auto; padding:4px 6px;}
.inv-kaart-acties .inv-weg i{width:13px; height:13px;}

/* Een tabel in een kaart met binnenmarge begint onder de kaarttitel,
   niet 14 px verder. De buitenste cellen krijgen daarom geen eigen
   inspringing; die levert de kaart al. Kaarten zonder binnenmarge
   (padding:0) houden hun celmarge. */
.card:not([style*="padding:0"]) .tbl th:first-child,
.card:not([style*="padding:0"]) .tbl td:first-child{padding-left:0;}
.card:not([style*="padding:0"]) .tbl th:last-child,
.card:not([style*="padding:0"]) .tbl td:last-child{padding-right:0;}

/* Klantaccounts: wachtwoord, oogje en knop even hoog (26 px, het kleine
   knopformaat) en op smalle schermen netjes onder de naam. */
.acc-rij{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 14px;border-radius:var(--kader-sm);background:var(--off);border:1px solid var(--border);}
.acc-wie{flex:1;min-width:180px;}
.acc-naam{font-size:13px;font-weight:700;}
.acc-sub{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere;}
.acc-ww{display:flex;align-items:center;gap:6px;}
.acc-ww code{display:inline-flex;align-items:center;height:26px;box-sizing:border-box;font-size:11px;background:var(--white);border:1px solid var(--border);padding:0 8px;border-radius:var(--kader-xs);letter-spacing:.1em;}
.acc-oog{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:none;border:none;cursor:pointer;font-size:12px;color:var(--muted);border-radius:var(--kader-xs);}
.acc-oog:hover{color:var(--blue);background:var(--white);}

/* Planning op telefoon: de weeknavigatie en de actieknoppen staken tot
   aan de schermrand (kolommen op 'auto' plus een inline marge). Nu een
   raster van zes gelijke kolommen: ‹ Vandaag › elk een derde,
   Beschikbaarheid en Afwezigheid elk de helft, Inplannen de hele breedte. */
@media(max-width:768px){
  .plan-hdr-right{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
  .plan-hdr-right>button{grid-column:span 2!important;margin-left:0!important;min-width:0;}
  .plan-hdr-right>button:nth-of-type(4),
  .plan-hdr-right>button:nth-of-type(5){grid-column:span 3!important;}
  .plan-hdr-right>button.btn-blue{grid-column:1/-1!important;}
}

/* To-do op telefoon: de knoppen (potlood, fase, kruisje) namen 264 px
   van de rij en kneepen de taak zelf tot 30 px; een datum brak over drie
   regels. Nu staat de taak op volle breedte en de knoppen eronder. */
@media(max-width:640px){
  .todo-item{flex-wrap:wrap;row-gap:6px;}
  .todo-body{flex:1 1 100%;}
  .todo-actions{width:100%;justify-content:flex-end;}
  .todo-actions .phase-sel{flex:1;max-width:240px;}
}

/* Portaal, statistieken op telefoon: periode en keuzelijst op de eerste
   regel, Maandrapportage en Vernieuwen eronder, binnen de kantlijn. */
@media(max-width:640px){
  .p-periode > select{flex:1;min-width:0;}
  .p-periode > .p-rapportknop{margin-left:0;}
}

/* Projectfasen in het portaal: zes stappen passen op een telefoon als
   de labels iets kleiner zijn; eerder viel "Opgeleverd" van de kaart. */
@media(max-width:480px){
  .st-step{min-width:0;}
  .st-label{font-size:9px;letter-spacing:0;}
}

/* Klantdossier-kop op telefoon: de latere coverregel zette de binnenmarge
   terug op 2rem en de kolommen bleven gecentreerd, waardoor "Klant sinds"
   en de knop in het midden stonden en de titel links. Nu alles links. */
@media(max-width:640px){
  .client-detail-hero{padding:1.25rem;align-items:stretch;}
  .client-detail-hero > div:last-child{flex-direction:row!important;flex-wrap:wrap;align-items:center!important;justify-content:space-between;}
}

/* Centrale kalender op telefoon: legenda over de hele breedte, daaronder
   de twee filters naast elkaar en de maandknoppen; niets meer buiten de
   kaart. */
@media(max-width:640px){
  #central-month-cal .month-cal-nav{flex-wrap:wrap;width:100%;gap:6px;}
  #cal-central-legend{width:100%;margin-right:0!important;}
  #central-month-cal .month-cal-nav select{flex:1 1 40%;min-width:0;min-height:32px;font-size:12px!important;}
}

/* Maandkeuze in "Statistieken bijwerken": pijlen, keuzelijst en knop
   even hoog (34 px, op telefoon 44 px). De pijlen waren 30 px naast een
   keuzelijst van 36 en op telefoon 44. */
.es-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.es-pijl{width:34px;height:34px;flex-shrink:0;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:var(--black);font-family:'Montserrat',sans-serif;transition:border-color .15s,color .15s;}
.es-pijl:hover{border-color:var(--blue);color:var(--blue);}
#es-month-select{height:34px;box-sizing:border-box;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:13px;font-weight:700;font-family:'Montserrat',sans-serif;outline:none;min-width:140px;background:var(--white);}
@media(max-width:640px){
  .es-nav{width:100%;}
  .es-pijl{width:44px;height:44px;}
  #es-month-select{height:44px;min-height:44px;flex:1;min-width:0;}
  .es-nav .btn-ghost{width:100%;}
}

/* Financieel overzicht op telefoon: het bedrag viel rechts buiten beeld
   en moest je erbij scrollen. Nu valt de omschrijving weg en past de
   rij: naam, termijn, bedrag. */
@media(max-width:640px){
  .tbl.fin-kort{min-width:0!important;width:100%;}
  .tbl.fin-kort td:nth-child(2){display:none;}
  .tbl.fin-kort td:first-child{white-space:normal;padding-left:1.5rem!important;}
  .tbl.fin-kort td:last-child{padding-right:1.5rem!important;}
}

/* Offertes op telefoon en tablet: geen tabel van 700 px met rijen van 140 px hoog
   (de drie knoppen stonden onder elkaar in een smalle kolom), maar per
   offerte een blok: naam en bedrag bovenaan, klant en datum, status en
   reactie, en de knoppen over de hele breedte. */
@media(max-width:900px){
  .tbl.of-tabel{min-width:0!important;width:100%;}
  .tbl.of-tabel thead{display:none;}
  .tbl.of-tabel tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--border);align-items:center;}
  .tbl.of-tabel tbody td{display:block;padding:0!important;border:0!important;white-space:normal!important;max-width:none!important;}
  .tbl.of-tabel td:nth-child(1){grid-column:1;grid-row:1;}
  .tbl.of-tabel td:nth-child(3){grid-column:2;grid-row:1;text-align:right;}
  .tbl.of-tabel td:nth-child(2){grid-column:1;grid-row:2;}
  .tbl.of-tabel td:nth-child(5){grid-column:2;grid-row:2;text-align:right;}
  .tbl.of-tabel td:nth-child(4){grid-column:1;grid-row:3;}
  .tbl.of-tabel td:nth-child(6){grid-column:2;grid-row:3;text-align:right;}
  .tbl.of-tabel td:nth-child(7){grid-column:1/-1;grid-row:4;padding-top:4px!important;}
  .tbl.of-tabel td:nth-child(7) > div{justify-content:flex-start;}
  .tbl.of-tabel tbody tr:last-child{border-bottom:0;}
}
@media(max-width:900px){
  .tbl.of-tabel tbody td[colspan]{grid-column:1/-1;padding:8px 10px!important;}
}
@media(max-width:640px){
  /* keuzelijst krijgt zijn eigen regel; de knoppen lopen eronder door */
  .p-periode > select{flex:1 1 calc(100% - 80px);}
  /* kalenderfilters samen op één regel, de maandknoppen op de volgende */
  #central-month-cal .month-cal-nav select{flex:1 1 calc(50% - 3px);}
  #central-month-cal .month-cal-nav .today-btn{flex:1;}
}

/* Maandkalender: zeven even brede kolommen, ook als een label lang is.
   Met 1fr (= minmax(auto,1fr)) duwde een lange titel zijn kolom breder. */
.month-cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
.month-cal-cell{min-width:0;}

/* Saldolijn in de geldkalender: een svg is een vervangen element en rekt
   niet uit tussen left en right; met width:auto bleef hij 150 px breed en
   stopte de lijn na twee maanden. Nu een expliciete breedte. */
.gk-lijn{width:calc(100% - 100% / 12);}

/* Kantoorscherm op een smal scherm: daar is het sluitkruisje altijd
   zichtbaar, dus schuift de klok opzij in plaats van eronder te vallen. */
@media (max-width:900px),(max-height:560px){
  .ks-kop{padding-right:46px;}
}

/* Metingen in "Statistieken bijwerken": de platformknopjes waren 24 px
   naast velden van 32; nu rekt de rij alles op dezelfde hoogte. */
.esm-row2{align-items:stretch!important;}
.esm-row2 > div:first-child > button{display:inline-flex;align-items:center;}
.esm-row2 > div:last-child{display:flex;align-items:center;justify-content:center;}
@media(max-width:640px){
  .esm-row2 > div:last-child{justify-content:flex-start;}
}

/* Kennisbank: de knop staat bovenaan naast de titel, net als op elke
   andere pagina (Documenten, Klanten, Content Kalender), niet onderaan. */
.kn-hero{align-items:flex-start;}
@media(max-width:640px){ .kn-hero{align-items:stretch;} }

/* Portaal, planning op desktop: kop en kalender springen 2rem in, het
   voorstelblok en het urensaldo nu ook, zodat alles op één lijn begint. */
@media(min-width:641px){
  #pp-planning #p-voorstel-body,
  #pp-planning #p-urensaldo{padding:0 2rem;}
}

/* Kostenposten op telefoon en tablet: per post een blok (naam en bedrag,
   soort en periode, knoppen) in plaats van een tabel waarvan Bewerken en
   Verwijderen rechts buiten beeld vielen. */
@media(max-width:900px){
  .tbl.kost-tabel{min-width:0!important;width:100%;}
  .tbl.kost-tabel tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 1.5rem;border-bottom:1px solid var(--border);align-items:center;}
  .tbl.kost-tabel tbody tr:last-child{border-bottom:0;}
  .tbl.kost-tabel tbody td{display:block;padding:0!important;border:0!important;white-space:normal!important;text-align:left!important;}
  .tbl.kost-tabel td:nth-child(1){grid-column:1;grid-row:1;}
  .tbl.kost-tabel td:nth-child(4){grid-column:2;grid-row:1;text-align:right!important;}
  .tbl.kost-tabel td:nth-child(2){grid-column:1;grid-row:2;}
  .tbl.kost-tabel td:nth-child(3){grid-column:2;grid-row:2;text-align:right!important;}
  .tbl.kost-tabel td:nth-child(5){grid-column:1/-1;grid-row:3;padding-top:6px!important;}
}

/* Statistieken-tabel: de knoppencel was zelf display:flex, waardoor hij
   geen tabelcel meer was en zijn rand niet met de rij meeliep. Nu een
   gewone cel met een rij erin, alle knoppen op het kleine formaat (26 px). */
.st-acties{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.st-acties .btn-ghost{min-height:26px;height:26px;padding:0 10px;font-size:11px;}
.st-acties .st-ico{width:26px;padding:0;}

/* Centrale kalender op tablet en kleine laptop: dezelfde opbouw als op
   telefoon (legenda over de hele breedte, daaronder filters en
   maandknoppen). Op 834 px brak de maandnaam en viel ‹ van de kaart. */
@media(max-width:1100px){
  #central-month-cal .month-cal-header{flex-wrap:wrap;gap:10px;}
  #central-month-cal .month-cal-title{white-space:nowrap;}
  #central-month-cal .month-cal-nav{flex-wrap:wrap;width:100%;gap:6px;}
  #cal-central-legend{width:100%;margin-right:0!important;}
}

/* Planning tussen telefoon en breed scherm: de werkbalk mag naar een
   tweede regel in plaats van rechts buiten de pagina te lopen. */
@media(min-width:769px) and (max-width:1250px){
  .plan-hdr-right{flex-wrap:wrap;margin-left:0!important;width:100%;}
}
/* Lange klant- en projectnamen in een planblok breken af in plaats van
   over de rand van de dagkolom te lopen. */
.plan-block{overflow-wrap:anywhere;min-width:0;}

/* Vandaag-raster: kolommen op minmax(0,1fr), anders duwt een lange
   taaknaam de kolom breder dan het scherm (op 834 px liep "Mijn taken"
   50 px buiten de pagina). */
.vd-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1.15fr) minmax(0,.85fr);}
.vd-grid > *, .vd-onder > *, .vd-kolom > *{min-width:0;}
@media(max-width:1180px){ .vd-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:768px){ .vd-grid,.vd-onder{grid-template-columns:minmax(0,1fr);} }

/* Mijn taken: is de kaart smal, dan zakt het fasebadge onder de taak
   (ingesprongen tot onder de titel) in plaats van over de titel te vallen
   of een woord in tweeën te breken. */
.vd-taak{flex-wrap:wrap;row-gap:6px;}
.vd-taak-body{flex:1 1 150px;min-width:0;}
.vd-taak-titel{overflow-wrap:break-word;}
.vd-taak-fase{margin-left:auto;}

/* Afwezigheid goedkeuren op telefoon: naam en datum op volle breedte,
   de twee knoppen eronder naast elkaar. */
@media(max-width:640px){
  .abs-rij{flex-wrap:wrap;}
  .abs-rij > div{flex:1 1 calc(100% - 40px)!important;}
  .abs-rij > button{flex:1;}
}

/* Factuurkaart, knoppen onderaan: Bewerken en de statusknop kregen geen
   zichtbaar vlak, waardoor de tekst 8 px inliep ten opzichte van de
   kaarttekst erboven en alleen PDF als knop las. Nu hebben alle drie
   een vlak en rand van gelijke hoogte, staat de eerste precies op de
   linkerlijn en het prullenbakje met zijn icoon op de rechterlijn. */
.inv-kaart-acties .btn-smb:not(.inv-pdf){background:var(--white);border-color:var(--border);}
.inv-kaart-acties .btn-smb:not(.inv-pdf):hover{border-color:var(--blue);}
.inv-kaart-acties .inv-weg{margin-right:-6px;}

/* ═══ CONTENT KALENDER: kalenderkeuze ═══
   De wisselknop tussen alles samen, eigen socials en per klant viel weg
   tegen de achtergrond (lichtgrijs op bone, grijze tekst). Nu een
   duidelijk gelabelde keuze: witte balk met rand, de gekozen kalender
   in Deep Royal met witte tekst. */
.cal-kiezer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 1.25rem;}
.cal-kiezer-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.cal-kiezer .cal-tabs{margin-bottom:0;background:var(--white);border:1.5px solid var(--border);padding:3px;gap:3px;}
.cal-kiezer .cal-tab{min-height:30px;padding:0 16px;display:inline-flex;align-items:center;color:var(--black);font-size:12px;}
.cal-kiezer .cal-tab:hover{background:var(--off);color:var(--blue);}
.cal-kiezer .cal-tab.active,
.cal-kiezer .cal-tab.active:hover,
.cal-kiezer .cal-tab.active:focus{background:var(--royal);color:#fff;box-shadow:none;}
.cal-kiezer .cal-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
@media(max-width:640px){
  .cal-kiezer{gap:6px;}
  .cal-kiezer .cal-tabs{width:100%;flex-wrap:nowrap;}
  .cal-kiezer .cal-tab{flex:1;justify-content:center;padding:0 8px;min-height:38px;font-size:11.5px;}
}

/* ═══ BEHEER: overzicht met tegels ═══ */
.bh-groep{margin-top:1.4rem;}
.bh-groep:first-child{margin-top:.6rem;}
.bh-groep-titel{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.bh-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;}
.bh-tegel{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  padding:16px 16px 16px 18px;min-height:76px;box-sizing:border-box;
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);
  font-family:inherit;color:var(--black);cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.bh-tegel:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(16,53,144,.08);}
.bh-tegel:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.bh-ico{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--kader-sm);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-light);color:var(--royal);font-size:16px;
}
.bh-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.bh-naam{font-size:13.5px;font-weight:700;line-height:1.3;}
.bh-stand{font-size:11.5px;color:var(--muted);line-height:1.4;display:flex;align-items:center;gap:6px;}
.bh-let .bh-stand{color:var(--warning);font-weight:600;}
.bh-stip{width:7px;height:7px;border-radius:50%;background:var(--warning);flex-shrink:0;}
.bh-pijl{font-size:20px;line-height:1;color:var(--muted);flex-shrink:0;transition:transform .15s,color .15s;}
.bh-tegel:hover .bh-pijl{color:var(--blue);transform:translateX(2px);}

/* Een geopend onderdeel */
.bh-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:.25rem 0 1.1rem;}
.bh-kop-actie:empty{display:none;}
.bh-sectie{display:none;}
.bh-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;}
.bh-twee .card{margin-bottom:0;}
.bh-leeg{font-size:13px;color:var(--muted);}
.bh-fase{margin-bottom:12px;}
.bh-fase-rij{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:12px;font-weight:600;}
.bh-fase-baan{height:6px;background:var(--border);border-radius:var(--kader-xs);overflow:hidden;}
.bh-fase-baan > div{height:100%;border-radius:var(--kader-xs);transition:width .4s;}
.bh-klaar{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.bh-klaar:last-child{border-bottom:0;}
.bh-klaar-stip{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0;}
.bh-klaar-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bh-klaar-tekst strong{font-size:13px;font-weight:600;}
.bh-klaar-tekst span{font-size:11px;color:var(--muted);}
.bh-klaar .pill{font-size:10px;flex-shrink:0;}
@media(max-width:768px){
  .bh-twee{grid-template-columns:minmax(0,1fr);}
  .bh-raster{grid-template-columns:minmax(0,1fr);}
  .bh-kop-actie, .bh-kop-actie .btn-blue{width:100%;}
}

/* Statistieken: kop met de knoppen van het tabblad InFrame rechts */
.st-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 0 .5rem;}
.st-kop-acties{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.st-tabs{margin-bottom:1.1rem;}

/* ═══ PROJECTMODAL in drie stappen ═══ */
.pm-modal{max-width:680px;}
.pm-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.pm-kop .modal-title{margin-bottom:0;}
.pm-template{display:flex;align-items:center;gap:6px;}
.pm-template select{height:34px;box-sizing:border-box;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:12px;font-family:'Montserrat',sans-serif;background:var(--white);outline:none;max-width:210px;}
.pm-template .btn-ghost{font-size:11px;}
.pm-template .pm-ico{width:34px;padding:0;color:var(--muted);}
.pm-template .pm-ico:hover{color:var(--danger);border-color:var(--danger);}

.pm-stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--off);border-radius:var(--kader-sm);padding:4px;margin-bottom:18px;}
.pm-stap{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 10px;border:none;border-radius:var(--kader-xs);background:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;}
.pm-stap:hover{color:var(--blue);}
.pm-nr{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;background:var(--border);color:var(--black);flex-shrink:0;}
.pm-stap-on{background:var(--white);color:var(--royal);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pm-stap-on .pm-nr{background:var(--royal);color:#fff;}

.pm-verplicht{color:var(--danger);}
.pm-fout{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(176,18,28,.12);}
.pm-uitleg{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 12px;}
.pm-verborgen{display:none!important;}

.pm-blok{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center;padding:12px 14px;background:var(--off);border:1.5px solid var(--border);border-radius:var(--kader-sm);margin-bottom:4px;}
.pm-blok-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pm-blok-tekst strong{font-size:12.5px;}
.pm-blok-tekst span{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;}
.pm-blok .pm-vink{grid-column:1/-1;}
.pm-vink{display:flex;align-items:flex-start;gap:9px;font-size:12px;font-weight:600;cursor:pointer;line-height:1.5;}
.pm-vink input{accent-color:var(--royal);width:15px;height:15px;margin:2px 0 0;flex-shrink:0;}

/* Planning: een rij per fase */
.pm-fasen{display:flex;flex-direction:column;border:1.5px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;margin-bottom:14px;}
.pm-fase{padding:8px 10px 8px 6px;border-bottom:1px solid var(--border);background:var(--white);}
.pm-fase:last-child{border-bottom:0;}
.pm-fase-rij{display:grid;grid-template-columns:minmax(0,1fr) 150px 70px;align-items:center;gap:8px;}
.pm-fase-kies{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 8px;border:none;background:none;border-radius:var(--kader-xs);font-family:inherit;font-size:12.5px;font-weight:600;color:var(--black);cursor:pointer;text-align:left;}
.pm-fase-kies:hover{background:var(--off);}
.pm-fase-stip{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--white);flex-shrink:0;box-sizing:border-box;}
.pm-fase-nu{display:none;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--royal);color:#fff;padding:2px 7px;border-radius:var(--kader);}
.pm-fase-rij input[type="date"]{height:34px;box-sizing:border-box;padding:0 8px;border:1.5px solid var(--border);border-radius:var(--kader-xs);font-size:12px;font-family:'Montserrat',sans-serif;background:var(--white);outline:none;width:100%;}
.pm-fase-rij input[type="date"]:focus{border-color:var(--blue);}
.pm-fase-klaar .pm-fase-stip{background:var(--success);border-color:var(--success);}
.pm-fase-klaar .pm-fase-naam{color:var(--muted);}
.pm-fase-huidig{background:var(--royal-wash);}
.pm-fase-huidig .pm-fase-stip{border-color:var(--royal);box-shadow:inset 0 0 0 3px var(--white);background:var(--royal);}
.pm-fase-huidig .pm-fase-naam{color:var(--royal);font-weight:700;}
.pm-fase-huidig .pm-fase-nu{display:inline-block;}
.pm-fase-notitie{width:100%;box-sizing:border-box;margin:8px 0 2px;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-xs);font-size:12px;font-family:'Montserrat',sans-serif;resize:vertical;outline:none;}
.pm-fase-notitie:focus{border-color:var(--blue);}
.pm-tekstknop{background:none;border:none;padding:0 6px;min-height:34px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--blue);cursor:pointer;white-space:nowrap;}
.pm-tekstknop:hover{text-decoration:underline;}

/* Klant op de hoogte */
.pm-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;}
.pm-hulp{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--muted);}
.pm-hulp .pm-tekstknop{padding:0;min-height:24px;}
.pm-oud{color:var(--warning);font-weight:700;}
.pm-mailvink{padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-weight:400;color:var(--muted);font-size:11.5px;}
.pm-mailvink strong{color:var(--black);font-size:12.5px;}
.pm-voorbeeld-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.pm-voorbeeld{border:1.5px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;background:var(--white);}
.pm-vb-kop{background:var(--royal);color:#fff;padding:16px 18px;}
.pm-vb-soort{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:4px;}
.pm-vb-naam{font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;}
.pm-vb-desc{font-size:11px;color:rgba(255,255,255,.75);margin-top:3px;line-height:1.5;}
.pm-vb-status{margin-top:10px;padding:9px 11px;background:rgba(255,255,255,.1);border-radius:var(--kader-xs);font-size:11.5px;line-height:1.55;color:#fff;white-space:pre-line;overflow-wrap:anywhere;}
.pm-vb-leeg{color:rgba(255,255,255,.7);font-style:italic;}
.pm-vb-datum{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:3px;white-space:normal;}
.pm-vb-fasen{display:flex;flex-wrap:wrap;gap:4px;padding:12px 14px;}
.pm-vb-fasen span{font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--kader);background:var(--off);color:var(--muted);}
.pm-vb-fasen .pm-vb-klaar{background:var(--success-bg);color:var(--success);}
.pm-vb-fasen .pm-vb-nu{background:var(--royal);color:#fff;}

.pm-voet{justify-content:space-between;flex-wrap:wrap;gap:8px;}
.pm-voet-links,.pm-voet-rechts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

/* Portaal: datum boven het statusbericht */
.proj-status-note{white-space:pre-line;}
.proj-status-datum{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:3px;white-space:normal;}

@media(max-width:640px){
  .pm-template{width:100%;}
  .pm-template select{flex:1;max-width:none;height:44px;}
  .pm-template .pm-ico{width:44px;}
  .pm-stap{flex-direction:column;gap:3px;font-size:10.5px;min-height:52px;white-space:normal;text-align:center;line-height:1.2;}
  .pm-twee{grid-template-columns:minmax(0,1fr);}
  .pm-fase-rij{grid-template-columns:minmax(0,1fr) auto;}
  .pm-fase-rij input[type="date"]{grid-column:1/-1;grid-row:2;height:44px;}
  .pm-blok{grid-template-columns:minmax(0,1fr);}
  .pm-voet, .pm-voet-links, .pm-voet-rechts{width:100%;}
  .pm-voet-rechts{order:-1;}
  .pm-voet-rechts > *{flex:1;}
}

/* Statistieken: de keuze Klanten / InFrame even duidelijk als de
   kalenderkeuze; de grijze tabbalk viel weg tegen de achtergrond. */
.st-tabs{background:var(--white);border:1.5px solid var(--border);padding:3px;gap:3px;margin-bottom:1rem;}
.st-tabs .fin-tab{min-height:30px;padding:0 18px;display:inline-flex;align-items:center;color:var(--black);font-size:12px;}
.st-tabs .fin-tab:hover{background:var(--off);color:var(--blue);}
.st-tabs .fin-tab-on, .st-tabs .fin-tab-on:hover{background:var(--royal);color:#fff;box-shadow:none;}
#st-klanten > .mgrid:first-child, #st-inframe > .mgrid:first-child{margin-top:0;}
.cal-kiezer{margin-bottom:1rem;}
#cal-view-central > .month-cal-wrap, #cal-view-inframe, #cal-view-clients{margin-top:0;}
.pm-template .pm-ico:last-child:hover{color:var(--blue);border-color:var(--blue);}
@media(max-width:640px){
  /* Voet op één regel: Annuleren, Volgende, Opslaan */
  .pm-voet{flex-wrap:nowrap;}
  .pm-voet, .pm-voet-links, .pm-voet-rechts{width:auto;}
  .pm-voet-links{flex:0 0 auto;}
  .pm-voet-rechts{order:0;flex:1;flex-wrap:nowrap;}
  .pm-voet{flex-direction:row;}
  .pm-voet .btn-ghost, .pm-voet .btn-blue{width:auto;min-height:44px;padding:0 12px;}
  .pm-voet-rechts > *{flex:1;}
}
.pm-factuurknop{grid-column:1/-1;justify-self:start;border-color:var(--success)!important;color:var(--success)!important;}
/* De pagina zet al 1,25rem tussen blokken; geen extra marge eronder */
.st-tabs, .cal-kiezer{margin-bottom:0;}
#st-klanten, #st-inframe, #bh-hub, #bh-paneel{display:flex;flex-direction:column;gap:1.25rem;}
#st-klanten[style*="none"], #st-inframe[style*="none"], #bh-hub[style*="none"], #bh-paneel[style*="none"]{display:none!important;}
#st-klanten .card, #st-inframe .card, #st-inframe .mgrid{margin-bottom:0!important;}
@media(max-width:640px){
  .pm-template{flex-wrap:wrap;}
  .pm-template select{flex:1 1 100%;}
  .pm-template .btn-ghost:not(.pm-ico){flex:1;}
}
#bh-paneel{gap:.4rem;}
#bh-hub{gap:0;}
#bh-paneel > .btn-back{align-self:flex-start;width:auto!important;justify-content:flex-start;}

/* ═══ VERSTUURDE MAILS ═══ */
.ml-lijst{display:flex;flex-direction:column;border:1.5px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;background:var(--white);}
.ml-rij{border-bottom:1px solid var(--border);}
.ml-rij:last-child{border-bottom:0;}
.ml-kop{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:none;background:none;text-align:left;font-family:inherit;color:var(--black);cursor:pointer;}
.ml-kop:hover{background:var(--off);}
.ml-kop:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.ml-ico{width:30px;height:30px;flex-shrink:0;border-radius:var(--kader-xs);display:inline-flex;align-items:center;justify-content:center;background:var(--blue-light);color:var(--royal);font-size:13px;}
.ml-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ml-onderwerp{font-size:12.5px;font-weight:700;overflow-wrap:anywhere;}
.ml-meta{font-size:11px;color:var(--muted);overflow-wrap:anywhere;}
.ml-fout{color:var(--danger);font-weight:700;}
.ml-soort{flex-shrink:0;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--kader);background:var(--off);color:var(--black);}
.ml-pijl{flex-shrink:0;font-size:18px;line-height:1;color:var(--muted);transition:transform .15s;}
.ml-open .ml-pijl{transform:rotate(90deg);}
.ml-inhoud{padding:0 14px 14px 56px;display:flex;flex-direction:column;gap:10px;}
.ml-blok{background:var(--off);border-radius:var(--kader-xs);padding:10px 12px;}
.ml-blok p{margin:4px 0 0;font-size:12px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere;}
.ml-lbl{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.ml-voet{font-size:11px;color:var(--muted);overflow-wrap:anywhere;}
.ml-leeg{font-size:12.5px;color:var(--muted);margin:0;}
.ml-meer{font-size:11px;color:var(--muted);margin:8px 0 0;}
.ml-klantkop{margin-bottom:12px;}
.ml-klantkop strong{display:block;font-size:14px;margin-bottom:3px;}
.ml-klantkop span{font-size:12px;color:var(--muted);line-height:1.6;}
.pm-mails{margin-top:18px;}
.mail-laatst{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;padding:9px 12px;margin:-4px 0 14px;background:var(--royal-wash);border-radius:var(--kader-sm);color:var(--black);}
.mail-laatst i{color:var(--royal);margin-top:2px;flex-shrink:0;}
.mail-kopie{margin-top:10px;}
@media(max-width:640px){
  .ml-inhoud{padding-left:14px;}
  .ml-soort{display:none;}
}

/* ═══ BETAALSCHEMA ═══ */
.bs-editor{margin-bottom:10px;}
.bs-keuzes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.bs-keuze{min-height:34px;padding:0 14px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);font-family:inherit;font-size:12px;font-weight:700;color:var(--black);cursor:pointer;display:inline-flex;align-items:center;}
.bs-keuze:hover{border-color:var(--blue);color:var(--blue);}
.bs-keuze-on, .bs-keuze-on:hover{background:var(--royal);border-color:var(--royal);color:#fff;}
.bs-rijen{display:flex;flex-direction:column;gap:6px;}
.bs-rij{display:grid;grid-template-columns:minmax(0,1.4fr) 64px minmax(0,1.6fr) 34px;gap:6px;align-items:center;}
.bs-rij-kop{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.bs-rij input,.bs-rij select{height:34px;box-sizing:border-box;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--kader-xs);font-size:12px;font-family:'Montserrat',sans-serif;background:var(--white);outline:none;width:100%;min-width:0;}
.bs-rij input:focus,.bs-rij select:focus{border-color:var(--blue);}
.bs-moment{display:flex;gap:6px;min-width:0;}
.bs-moment select{flex:1;}
.bs-moment input[type="date"]{flex:1;}
.bs-weg{width:34px;height:34px;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.bs-weg:hover:not(:disabled){color:var(--danger);border-color:var(--danger);}
.bs-weg:disabled{opacity:.35;cursor:default;}
.bs-onder{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;}
.bs-onder .btn-ghost{font-size:11px;}
.bs-som{font-size:12px;font-weight:600;}
.bs-som-ok{color:var(--success);}
.bs-som-fout{color:var(--danger);}
.bs-let{font-size:11.5px;color:var(--warning);margin:8px 0 0;line-height:1.5;}

.bs-paneel{border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);padding:12px 14px;margin-top:10px;}
.pm-bs{grid-column:1/-1;min-width:0;}
.pm-bs:empty{display:none;}
.pm-bs .bs-paneel{margin-top:2px;}
.bs-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12.5px;}
.bs-tekstknop{background:none;border:none;padding:0;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--blue);cursor:pointer;}
.bs-tekstknop:hover{text-decoration:underline;}
.bs-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px;}
.bs-cijfers div{background:var(--off);border-radius:var(--kader-xs);padding:7px 9px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.bs-cijfers span{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.bs-cijfers strong{font-size:12.5px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.bs-fout{font-size:11.5px;color:var(--danger);background:#FCEEEF;border-radius:var(--kader-xs);padding:8px 10px;margin-bottom:10px;}
.bs-termijnen{display:flex;flex-direction:column;gap:6px;}
.bs-termijn{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 10px;border:1px solid var(--border);border-radius:var(--kader-xs);}
.bs-klaar{border-color:var(--royal);background:var(--royal-wash);}
.bs-t-links{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 220px;}
.bs-t-nr{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--off);color:var(--black);}
.bs-gefactureerd .bs-t-nr{background:var(--warning-bg,#FFF6E0);color:var(--warning);}
.bs-betaald .bs-t-nr{background:var(--success-bg);color:var(--success);}
.bs-klaar .bs-t-nr{background:var(--royal);color:#fff;}
.bs-t-tekst{display:flex;flex-direction:column;gap:1px;min-width:0;}
.bs-t-tekst strong{font-size:12.5px;}
.bs-t-pct{font-weight:600;color:var(--muted);margin-left:4px;}
.bs-t-tekst span{font-size:11px;color:var(--muted);overflow-wrap:anywhere;}
.bs-t-rechts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.bs-t-bedrag{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.bs-status{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--kader);white-space:nowrap;}
.bs-status-gepland{background:var(--off);color:var(--black);}
.bs-klaar .bs-status-gepland{background:var(--royal);color:#fff;}
.bs-status-gefactureerd{background:var(--warning-bg,#FFF6E0);color:var(--warning);}
.bs-status-betaald{background:var(--success-bg);color:var(--success);}
.bs-maak-nu{background:var(--royal)!important;border-color:var(--royal)!important;color:#fff!important;}
.of-bs-stand{display:block;font-size:10px;color:var(--muted);margin-top:4px;white-space:nowrap;}

.bs-klaarkaart{border-left:3px solid var(--royal);}
.bs-klaar-rij{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--border);}
.bs-klaar-tekst{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bs-klaar-tekst strong{font-size:13px;}
.bs-klaar-tekst span{font-size:11.5px;color:var(--muted);}
.bs-klaar-bedrag{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;}

.bs-balk{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:400;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);box-sizing:border-box;
  background:var(--white);border:1.5px solid var(--royal);border-radius:var(--kader-sm);box-shadow:0 10px 30px rgba(16,53,144,.18);padding:10px 12px 10px 16px;font-size:12.5px;}
.bs-balk strong{color:var(--royal);}
.bs-balk-sluit{width:30px;height:30px;border:none;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;}
@media(max-width:640px){
  .bs-rij{grid-template-columns:minmax(0,1fr) 64px 34px;}
  .bs-rij .bs-moment{grid-column:1/-1;grid-row:2;}
  .bs-rij-kop span:nth-child(3){display:none;}
  .bs-cijfers{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bs-balk{flex-wrap:wrap;left:16px;right:16px;transform:none;bottom:84px;}
}

/* Portaal: betaling en algemene voorwaarden bij de offerte */
.p-of-vw{border-top:1px solid var(--border);padding-top:16px;margin:4px 0 18px;}
.p-of-vw-rij{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;font-size:13px;line-height:1.6;margin-bottom:10px;}
.p-of-vw-rij span:first-child{font-weight:700;}
.avp-zin{font-size:12.5px;color:var(--black);line-height:1.6;margin:0 0 8px;}
.avp-link{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);font-size:12.5px;font-weight:700;color:var(--royal);text-decoration:none;transition:border-color .15s;}
.avp-link:hover{border-color:var(--royal);}
.avp-link small{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted);}
.avp-link::after{content:'↗';font-size:14px;color:var(--muted);}

/* ═══ KENNISBANK: categorieën eerst ═══ */
.kn-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.kn-cattegel{display:flex;align-items:center;gap:14px;text-align:left;width:100%;box-sizing:border-box;min-height:84px;padding:14px 14px 14px 16px;
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);font-family:inherit;color:var(--black);cursor:pointer;
  transition:border-color .15s,box-shadow .15s;}
.kn-cattegel:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(16,53,144,.08);}
.kn-cattegel:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.kn-cat-ico{width:40px;height:40px;flex-shrink:0;border-radius:var(--kader-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--blue-light);color:var(--royal);font-size:17px;}
.kn-cat-ico-groot{width:48px;height:48px;font-size:20px;}
.kn-cat-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.kn-cat-naam{font-size:14px;font-weight:700;line-height:1.3;}
.kn-cat-tel{font-size:11.5px;color:var(--muted);}
.kn-cat-vb{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kn-cat-pijl{font-size:20px;line-height:1;color:var(--muted);flex-shrink:0;}
.kn-cattegel:hover .kn-cat-pijl{color:var(--blue);}
.kn-vast{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.kn-vast-item{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);font-family:inherit;font-size:12px;font-weight:700;color:var(--black);cursor:pointer;max-width:100%;}
.kn-vast-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kn-vast-item i{color:var(--royal);}
.kn-vast-item:hover{border-color:var(--blue);color:var(--blue);}
.kn-pad{margin:4px 0 6px;}
.kn-terugknop{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;}
.kn-terugknop:hover{color:var(--blue);}
.kn-catkop{display:flex;align-items:center;gap:14px;margin:6px 0 14px;}
.kn-catkop h3{font-size:20px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.02em;margin:0;}
.kn-catkop p{font-size:12px;color:var(--muted);margin:2px 0 0;}
#kn-resultaat .kn-sectiekop:first-child{margin-top:4px;}
.kn-aandacht{margin-top:18px;}
@media(max-width:640px){
  .kn-cats{grid-template-columns:minmax(0,1fr);}
}

/* ═══ CONCEPTPRESENTATIES ═══ */
.c-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--kader-xs);white-space:nowrap;line-height:1.4;}
.c-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.c-chip-open{background:#FFF8C2;color:#6B5B00;}
.c-chip-feedback{background:#E6F1FB;color:var(--royal);}
.c-chip-akkoord,.c-chip-weg{background:var(--success-bg);color:var(--success);}
.c-chip-leeg{background:var(--off);color:var(--muted);}
.dv-titel .c-chip{margin-left:8px;vertical-align:2px;}
.c-let{color:#8A5A00;font-weight:600;}
button.link-open-btn{font-family:inherit;cursor:pointer;border:none;}

.df-concept{border:1.5px solid var(--border);background:var(--off);border-radius:var(--kader-sm);padding:12px 14px;margin:2px 0 14px;}
.df-concept-kop strong{display:block;font-size:12.5px;color:var(--royal);}
.df-concept-kop span{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px;}
.df-concept-rij{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
.df-c-status{flex:1;min-width:180px;font-size:12px;line-height:1.5;color:var(--black);}
.df-c-status.df-c-fout{color:var(--danger);font-weight:600;}

body.cv-open{overflow:hidden;}
/* De presentatie: donker Royal, wit logo, gele voortgangslijn, Bone paneel */
.cv{position:fixed;inset:0;z-index:1300;color:#fff;font-family:inherit;
  background:radial-gradient(120% 90% at 30% 20%,#14378F 0%,#0C2468 45%,#081A4D 100%);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;}
.cv-kop{position:relative;display:flex;align-items:center;gap:18px;padding:14px 22px 15px;background:rgba(6,18,54,.55);}
.cv-logo{height:22px;width:auto;flex-shrink:0;}
.cv-titel{min-width:0;flex:1;display:flex;flex-direction:column;padding-left:18px;border-left:1px solid rgba(255,255,255,.18);}
.cv-titel span{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#FFE600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cv-titel strong{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.cv-kop-rechts{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.cv-teller{font-size:13px;font-weight:600;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;white-space:nowrap;}
.cv-teller em{font-style:italic;font-weight:900;font-size:20px;color:#fff;letter-spacing:-.01em;}
.cv-voortgang{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1);}
.cv-voortgang span{display:block;height:100%;width:0;background:#FFE600;transition:width .25s ease;}
.cv-sluit{width:38px;height:38px;border-radius:0 10px 0 10px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .15s;}
.cv-sluit:hover{background:rgba(255,255,255,.12);}
.cv-paneelknop{display:none;height:36px;padding:0 14px;border-radius:0 10px 0 10px;border:none;background:#FFE600;color:#1A1D23;font:inherit;font-size:12px;font-weight:800;cursor:pointer;}
.cv-lijf{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0;}
.cv-lijf-overzicht{grid-template-columns:minmax(0,1fr);}
.cv-lijf-overzicht .cv-paneel{display:none;}
.cv-podium{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden;}
.cv-dia{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.cv-blad{position:relative;flex-shrink:0;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.cv-blad canvas{display:block;border-radius:4px;background:#fff;}
.cv-blad-wijs{cursor:crosshair;}
.cv-in-r{animation:cvInR .24s ease;}
.cv-in-l{animation:cvInL .24s ease;}
@keyframes cvInR{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}
@keyframes cvInL{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:none;}}
.cv-laden{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.cv-melding{max-width:440px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;padding:20px;}
.cv-melding strong{font-size:17px;}
.cv-melding span{font-size:13px;color:rgba(255,255,255,.75);}
.cv-melding .btn-blue{margin-top:8px;text-decoration:none;background:#FFE600;color:#1A1D23;}
.cv-pijl{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(8,26,77,.55);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:2;transition:background .15s,border-color .15s;}
.cv-pijl:hover:not(:disabled){background:#FFE600;border-color:#FFE600;color:#1A1D23;}
.cv-pijl:disabled{opacity:.2;cursor:default;}
.cv-pijl-l{left:16px;} .cv-pijl-r{right:16px;}

/* Spelden op de dia */
.cv-spelden{position:absolute;inset:0;pointer-events:none;}
.cv-speld{position:absolute;width:28px;height:28px;margin:-28px 0 0 -2px;padding:0;border:2px solid #fff;
  border-radius:50% 50% 50% 0;background:#FFE600;color:#1A1D23;font:inherit;font-size:12px;font-weight:900;line-height:24px;text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.35);cursor:pointer;pointer-events:auto;transition:transform .12s;}
.cv-speld:hover,.cv-speld.cv-licht{transform:scale(1.18);z-index:2;}
.cv-speld.cv-licht{box-shadow:0 0 0 5px rgba(255,230,0,.4),0 4px 12px rgba(0,0,0,.35);}
.cv-speld-klaar{background:#13703A;color:#fff;}
.cv-speld-nieuw{animation:cvSpeld 1.2s ease-in-out infinite;pointer-events:none;}
@keyframes cvSpeld{0%,100%{box-shadow:0 0 0 0 rgba(255,230,0,.6),0 4px 12px rgba(0,0,0,.35);}50%{box-shadow:0 0 0 8px rgba(255,230,0,0),0 4px 12px rgba(0,0,0,.35);}}

/* Kleine dia's */
.cv-strook{display:flex;gap:10px;overflow-x:auto;padding:12px 22px 14px;background:rgba(6,18,54,.55);scrollbar-width:thin;}
.cv-duim{position:relative;flex:0 0 auto;width:120px;padding:0;border:2px solid #2A4FB0;border-radius:0 8px 0 8px;background:#0C2468;cursor:pointer;overflow:hidden;transition:border-color .15s,transform .15s;}
.cv-duim:hover{border-color:#5B7FD6;}
.cv-duim-beeld{display:block;aspect-ratio:16/9;}
.cv-duim-beeld canvas{display:block;width:100%;height:100%;object-fit:contain;}
.cv-duim-nr{position:absolute;left:5px;bottom:4px;font-size:10px;font-weight:800;color:#fff;background:rgba(8,26,77,.8);padding:1px 6px;border-radius:0 4px 0 4px;}
.cv-duim-tel{position:absolute;right:5px;top:5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#FFE600;color:#1A1D23;font-size:10px;font-weight:900;line-height:18px;text-align:center;}
.cv-duim-nu{border-color:#FFE600;}
.cv-duim-slot .cv-duim-beeld{display:flex;align-items:center;justify-content:center;}
.cv-duim-slot .cv-duim-beeld span{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FFE600;}

/* Feedbackpaneel */
.cv-paneel{background:#F7F5F2;color:var(--black);display:flex;flex-direction:column;min-height:0;}
.cv-tabs{display:flex;gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--border);background:#fff;}
.cv-tabs button{flex:1;padding:10px 6px;border:none;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;}
.cv-tabs button.aan{color:var(--royal);border-bottom-color:#FFE600;}
.cv-tabs em{font-style:normal;background:var(--royal);color:#fff;border-radius:9px;padding:1px 7px;font-size:10.5px;margin-left:4px;}
.cv-reacties{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:0;}
.cv-leeg{font-size:12.5px;color:var(--muted);line-height:1.6;}
.cv-reactie{border:1px solid var(--border);border-radius:0 10px 0 10px;padding:11px 13px;background:#fff;transition:border-color .15s,box-shadow .15s;}
.cv-reactie.cv-licht{border-color:#FFE600;box-shadow:0 0 0 3px rgba(255,230,0,.35);}
.cv-reactie-klaar{opacity:.65;}
.cv-reactie-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted);}
.cv-reactie-kop strong{font-size:12px;color:var(--black);}
.cv-reactie-kop > span:last-child{margin-left:auto;}
.cv-reactie p{font-size:13px;line-height:1.55;margin-top:5px;overflow-wrap:anywhere;}
.cv-reactie-knoppen{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.cv-antwoord{margin-top:10px;padding:8px 11px;border-left:3px solid var(--royal);background:#F3F6FC;border-radius:0 8px 0 0;}
.cv-badge-speld{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:50% 50% 50% 0;background:#FFE600;color:#1A1D23;font-size:10.5px;font-weight:900;}
.cv-badge-speld.cv-speld-klaar{background:#13703A;color:#fff;}
.cv-mini{border:1px solid var(--border);background:#fff;border-radius:0 7px 0 7px;font:inherit;font-size:11px;font-weight:700;color:var(--royal);padding:4px 10px;cursor:pointer;}
.cv-mini:hover{border-color:var(--royal);}
.cv-mini-aan{background:var(--success-bg);border-color:var(--success-bg);color:var(--success);}
.cv-mini-weg{color:var(--muted);}
.cv-diabadge{display:inline-flex;align-items:center;gap:5px;border:none;background:#E9EEF8;color:var(--royal);font:inherit;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:9px;cursor:pointer;}
.cv-naaralles{align-self:flex-start;}
.cv-schrijf{border-top:1px solid var(--border);padding:12px 16px;display:flex;flex-direction:column;gap:8px;background:#fff;}
.cv-schrijf-keuze{display:flex;background:#F7F5F2;border-radius:0 8px 0 8px;padding:3px;}
.cv-schrijf-keuze button{flex:1;border:none;background:none;font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);padding:7px;border-radius:0 6px 0 6px;cursor:pointer;}
.cv-schrijf-keuze button.aan{background:var(--royal);color:#fff;}
.cv-hint-plek{font-size:11px;color:var(--muted);line-height:1.45;}
.cv-schrijf-op{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:800;color:var(--royal);}
.cv-schrijf-op > span{display:inline-flex;align-items:center;gap:7px;}
.cv-schrijf textarea{width:100%;border:1.5px solid var(--border);border-radius:0 10px 0 10px;padding:9px 11px;font:inherit;font-size:13px;resize:vertical;min-height:72px;max-height:220px;}
.cv-schrijf textarea:focus{outline:none;border-color:var(--royal);}
.cv-schrijf-voet{display:flex;justify-content:flex-end;}
.cv-akkoord{border-top:1px solid var(--border);padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.5;background:#F7F5F2;}
.cv-akkoord strong{font-size:13px;}
.cv-akkoord-start{align-self:stretch;}
.cv-akkoord-vraag{background:#FFFBE0;}
.cv-akkoord-knoppen{display:flex;gap:8px;}
.cv-akkoord-knoppen button{flex:1;}
.cv-akkoord-klaar{background:var(--success-bg);color:var(--success);}
.cv-akkoord-klaar span{color:var(--black);}
.cv-akkoord-team span{color:var(--muted);}
.cv-akkoord-team .cv-let{color:#8A5A00;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cv-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.cv button:focus-visible{outline:3px solid #00AEEF;outline-offset:2px;}
.cv-paneel-dicht{display:none;}
.cv-pk-kort{display:none;}

/* Overzicht na de laatste dia */
.cv-overzicht{width:min(860px,calc(100% - 140px));max-height:calc(100% - 32px);overflow-y:auto;background:#F7F5F2;color:var(--black);
  border-radius:0 22px 0 22px;padding:30px 34px;box-shadow:0 24px 60px rgba(0,0,0,.4);}
.cv-ov-label{display:inline-block;background:#FFE600;color:var(--royal);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border-radius:0 7px 0 7px;}
.cv-ov-kop h2{font-size:28px;font-weight:900;font-style:italic;color:var(--royal);margin:12px 0 6px;letter-spacing:-.01em;}
.cv-ov-kop p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:18px;}
.cv-ov-dia{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--border);}
.cv-ov-alg{grid-template-columns:minmax(0,1fr);}
.cv-ov-duim{position:relative;padding:0;border:2px solid var(--royal);border-radius:0 8px 0 8px;background:#0C2468;cursor:pointer;overflow:hidden;align-self:start;aspect-ratio:16/9;}
.cv-ov-duim canvas{display:block;width:100%;height:100%;object-fit:contain;}
.cv-ov-nr{position:absolute;left:5px;bottom:4px;font-size:10px;font-weight:800;color:#fff;background:rgba(8,26,77,.8);padding:1px 6px;border-radius:0 4px 0 4px;}
.cv-ov-lijst{display:flex;flex-direction:column;gap:8px;min-width:0;}
.cv-ov-lijst h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--royal);}
.cv-ov-slot{margin-top:6px;border-top:1px solid var(--border);}
.cv-ov-slot .cv-akkoord{border-top:none;background:transparent;padding:16px 0 0;}
.cv-ov-slot .cv-akkoord-vraag,.cv-ov-slot .cv-akkoord-klaar{padding:14px 16px;border-radius:0 12px 0 12px;margin-top:14px;}
.cv-ov-slot .cv-akkoord-vraag{background:#FFFBE0;}
.cv-ov-slot .cv-akkoord-klaar{background:var(--success-bg);}
.cv-ov-slot .cv-akkoord-start{align-self:flex-start;min-width:220px;}

.c-balk{max-width:min(640px,calc(100vw - 32px));}

@media (prefers-reduced-motion:reduce){
  .cv-in-r,.cv-in-l,.cv-speld-nieuw{animation:none;}
  .cv-voortgang span{transition:none;}
}
@media (max-width:980px){
  .cv-lijf{grid-template-columns:minmax(0,1fr);}
  .cv-paneelknop{display:inline-flex;align-items:center;gap:4px;}
  .cv-paneel{position:fixed;left:0;right:0;bottom:0;max-height:80vh;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.35);transform:translateY(105%);transition:transform .22s ease;z-index:3;}
  .cv-paneel-open .cv-paneel{transform:none;}
  .cv-plek .cv-paneel{max-height:56vh;}
  .cv-paneel-dicht{display:block;margin:10px auto 0;border:none;background:#fff;color:var(--royal);font:inherit;font-size:12px;font-weight:700;padding:7px 16px;border-radius:999px;cursor:pointer;}
  .cv-overzicht{width:calc(100% - 100px);}
}
@media (max-width:600px){
  .cv-kop{padding:10px 12px 11px;gap:10px;}
  .cv-logo{display:none;}
  .cv-titel{padding-left:0;border-left:none;}
  .cv-titel span{display:none;}
  .cv-titel strong{font-size:13px;}
  .cv-kopchip{display:none;}
  .cv-teller em{font-size:16px;}
  .cv-kop-rechts{gap:8px;}
  .cv-pk-tekst{font-size:0;}
  .cv-pk-tekst::before{content:attr(data-kort);font-size:12px;}
  .cv-pijl{width:36px;height:36px;font-size:22px;}
  .cv-pijl-l{left:4px;} .cv-pijl-r{right:4px;}
  .cv-duim{width:84px;}
  .cv-strook{padding:8px 12px 10px;gap:8px;}
  .cv-overzicht{width:calc(100% - 16px);padding:20px 18px;border-radius:0 16px 0 16px;}
  .cv-ov-kop h2{font-size:22px;}
  .cv-ov-dia{grid-template-columns:minmax(0,1fr);gap:10px;}
  .cv-ov-duim{max-width:220px;}
  .cv-speld{width:26px;height:26px;line-height:22px;margin-top:-26px;}
}
/* Wijzigingen aanvragen */
.c-chip-wijzigingen{background:#FFEBD9;color:#9A4B00;}
.cv-akkoord-keuze{display:flex;gap:8px;flex-wrap:wrap;}
.cv-akkoord-keuze button{flex:1 1 160px;}
.cv-akkoord-wijz{background:#FFF3E6;}
.cv-akkoord-wijz strong{color:#9A4B00;}
.cv-wijz-label{font-size:12px;font-weight:800;color:var(--black);margin-top:2px;}
.cv-wijz-label em{font-style:normal;font-weight:500;color:var(--muted);}
#cv-wijz-tekst{width:100%;border:1.5px solid var(--border);border-radius:0 10px 0 10px;padding:9px 11px;font:inherit;font-size:13px;resize:vertical;min-height:70px;background:#fff;}
#cv-wijz-tekst:focus{outline:none;border-color:var(--royal);}
#cv-wijz-tekst.cv-veld-fout{border-color:var(--danger);}
.cv-nieuwe-versie{align-self:flex-start;margin-top:4px;}
.cv-ov-slot .cv-akkoord-keuze{justify-content:flex-start;}
.cv-ov-slot .cv-akkoord-keuze button{flex:0 1 220px;}
.cv-ov-slot .cv-akkoord-wijz{padding:14px 16px;border-radius:0 12px 0 12px;margin-top:14px;background:#FFF3E6;}

/* ═══ PROJECTPAGINA ═══ */
.cd-projkaart{background:var(--off);border:1px solid var(--border);border-radius:var(--kader-sm);padding:12px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;}
.cd-projkaart:hover{border-color:var(--royal);box-shadow:0 6px 18px rgba(16,53,144,.1);}
.cd-projkaart:focus-visible{outline:3px solid var(--cyan,#00AEEF);outline-offset:2px;}
.po-kop[role="button"]{cursor:pointer;}
.po-kaart{cursor:pointer;transition:box-shadow .15s,transform .15s;}
.po-kaart:hover{box-shadow:0 8px 24px rgba(16,53,144,.09);}
.po-kaart:hover .po-naam{color:var(--royal);}
.pp-naamlink{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--royal);cursor:pointer;text-align:left;}
.pp-naamlink:hover{text-decoration:underline;}

#ap-project-detail{max-width:1280px;}
.pp-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--royal) 0%,#0D2B78 100%);color:#fff;border-radius:var(--kader);padding:26px 30px 22px;margin:.35rem 0 16px;}
.pp-hero::after{content:'';position:absolute;right:-60px;top:-80px;width:320px;height:320px;border:44px solid rgba(255,255,255,.045);border-radius:0 90px 0 90px;transform:rotate(12deg);pointer-events:none;}
.pp-hero > *{position:relative;z-index:1;}
.pp-hero-boven{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.pp-hero-tekst{min-width:0;}
.pp-hero-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.pp-hero-label button{background:none;border:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--yellow);cursor:pointer;}
.pp-hero-label button:hover{text-decoration:underline;text-underline-offset:3px;}
.pp-hero-label span{color:rgba(255,255,255,.55);}
.pp-hero-label button + span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);margin-right:10px;vertical-align:middle;}
.pp-hero h2{font-size:30px;font-weight:900;font-style:italic;letter-spacing:-.02em;line-height:1.1;margin:8px 0 6px;}
.pp-hero p{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.55;max-width:640px;}
.pp-zacht{color:rgba(255,255,255,.5);}
.pp-kaart .pp-zacht{color:var(--muted);}
.pp-hero-acties{display:flex;gap:8px;flex-shrink:0;}
.pp-knop-geel,.pp-knop-wit{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border-radius:var(--kader-sm);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;}
.pp-knop-geel{background:var(--yellow);color:var(--charcoal);border:none;}
.pp-knop-geel:hover{background:var(--yellow-80);}
.pp-knop-wit{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);}
.pp-knop-wit:hover{border-color:#fff;background:rgba(255,255,255,.08);}

.pp-stappen{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14);}
.pp-stap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;}
.pp-stap::before{content:'';position:absolute;top:10px;left:-50%;width:100%;height:2px;background:rgba(255,255,255,.18);}
.pp-stap:first-child::before{display:none;}
.pp-stap-klaar::before,.pp-stap-bezig::before{background:var(--yellow);}
.pp-stap-bol{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.35);background:#0F2F80;color:var(--charcoal);}
.pp-stap-klaar .pp-stap-bol{background:var(--yellow);border-color:var(--yellow);}
.pp-stap-bezig .pp-stap-bol{background:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(255,230,0,.28);}
.pp-stap-bezig .pp-stap-bol::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--royal);}
.pp-stap-laat .pp-stap-bol{border-color:#FF8A8A;}
.pp-stap-naam{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.pp-stap-klaar .pp-stap-naam{color:rgba(255,255,255,.85);}
.pp-stap-bezig .pp-stap-naam{color:#fff;font-weight:800;}
.pp-stap-datum{font-size:10.5px;color:rgba(255,255,255,.5);}
.pp-stap-laat .pp-stap-datum{color:#FFB3B3;font-weight:700;}

.pp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.pp-kpi{background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:15px 18px;min-width:0;}
.pp-kpi-lbl{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.pp-kpi-val{font-size:22px;font-weight:800;color:var(--royal);letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-kpi-val span{font-size:12.5px;font-weight:600;color:var(--muted);}
.pp-kpi-sub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4;}
.pp-rood{color:var(--danger);font-weight:700;}
.pp-meter{height:6px;background:var(--off);border-radius:3px;margin-top:8px;overflow:hidden;}
.pp-meter span{display:block;height:100%;background:var(--royal);border-radius:3px;}

.pp-aandacht{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.pp-aandacht-rij{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:8px 12px;border-radius:var(--kader-xs);background:#FFF6E0;color:#8A5A00;}
.pp-aandacht-rij::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.pp-aandacht-laat{background:var(--danger-bg);color:var(--danger);}
.pp-aandacht-wacht{background:#E9EEF8;color:var(--royal);}
.pp-aandacht-geld{background:var(--success-bg);color:var(--success);}

.pp-raster{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start;}
.pp-kolom{display:flex;flex-direction:column;gap:16px;min-width:0;}
.pp-kaart{background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.pp-kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--border);}
.pp-kaart-kop h3{font-size:14px;font-weight:800;color:var(--black);display:flex;align-items:center;gap:8px;}
.pp-tel{font-size:10.5px;font-weight:800;background:var(--royal);color:#fff;border-radius:9px;padding:1px 8px;}
.pp-kaart-lijf{padding:14px 20px 16px;}
.pp-leeg{font-size:12.5px;color:var(--muted);line-height:1.6;}
.pp-voet{font-size:11.5px;color:var(--muted);margin-top:10px;}
.pp-lbl{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.pp-blok-knop{margin-top:10px;}

.pp-deliv{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border);}
.pp-deliv:first-child{border-top:none;padding-top:2px;}
.pp-deliv-tekst{flex:1;min-width:0;}
.pp-deliv-naam{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pp-deliv-sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.pp-deliv-acties{display:flex;gap:6px;flex-shrink:0;}

.pp-feedback .fb-kaart{margin:0;}
.pp-feedback .fb-oud-groep{margin-top:10px;}

.pp-blokken{display:flex;flex-direction:column;gap:6px;}
.pp-blok{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--border);border-radius:var(--kader-xs);background:var(--white);font:inherit;cursor:pointer;transition:border-color .15s;}
.pp-blok:hover{border-color:var(--royal);}
.pp-blok-dag{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;padding:5px 0;border-radius:var(--kader-xs);background:#E9EEF8;color:var(--royal);font-size:11px;line-height:1.25;}
.pp-blok-dag b{font-size:10px;text-transform:uppercase;letter-spacing:.1em;}
.pp-blok-tekst{display:flex;flex-direction:column;min-width:0;}
.pp-blok-tekst strong{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-blok-tekst span{font-size:11.5px;color:var(--muted);}

.pp-klantziet p{font-size:13px;line-height:1.55;}
.pp-feitjes{display:flex;flex-direction:column;margin-top:12px;}
.pp-feitjes > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:12.5px;}
.pp-feitjes span{color:var(--muted);}
.pp-feitjes strong{text-align:right;}
.pp-feitjes .pp-feit-breed{flex-direction:column;align-items:flex-start;gap:2px;}
.pp-feitjes .pp-feit-breed strong{text-align:left;font-weight:600;}
.pp-link{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--royal);cursor:pointer;}
.pp-link:hover{text-decoration:underline;}
.pp-offerte{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.pp-offerte strong{font-size:13.5px;}
.pp-pil{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--kader-xs);background:var(--off);color:var(--muted);white-space:nowrap;}
.pp-pil-groen{background:var(--success-bg);color:var(--success);}
.pp-pil-geel{background:#FFF8C2;color:#6B5B00;}
.pp-pil-rood{background:var(--danger-bg);color:var(--danger);}
.pp-schema{margin-top:12px;}
.pp-schema .bs-paneel{margin:0;border:none;padding:0;}
.pp-facturen,.pp-links{display:flex;flex-direction:column;}
.pp-factuur{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 0;border:none;border-top:1px solid var(--border);background:none;font:inherit;text-align:left;cursor:pointer;}
.pp-factuur:first-child{border-top:none;padding-top:0;}
.pp-factuur:hover strong{color:var(--royal);}
.pp-factuur > span:first-child{display:flex;flex-direction:column;min-width:0;}
.pp-factuur strong{font-size:12.5px;}
.pp-factuur small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-factuur-rechts{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:12.5px;}
.pp-linkrij{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;padding:9px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--black);}
.pp-linkrij:first-child{border-top:none;padding-top:0;}
.pp-linkrij span{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-linkrij small{grid-column:1;font-size:11px;color:var(--muted);}
.pp-linkrij i{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;color:var(--royal);font-weight:800;}
.pp-linkrij:hover span{color:var(--royal);}
.pp-verwijder{align-self:center;background:none;border:none;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;padding:6px 10px;}
.pp-verwijder:hover{color:var(--danger);}

@media (max-width:1180px){
  .pp-raster{grid-template-columns:minmax(0,1fr);}
  .pp-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
  .pp-hero{padding:20px 18px 18px;}
  .pp-hero-boven{flex-direction:column;}
  .pp-hero h2{font-size:24px;}
  .pp-hero-acties{width:100%;}
  .pp-hero-acties button{flex:1;justify-content:center;height:44px;}
  .pp-hero-acties .pp-knop-weg{flex:0 0 48px;padding:0;}
  .pp-stappen{overflow-x:auto;grid-auto-columns:minmax(74px,1fr);padding-bottom:4px;}
  .pp-kpi{padding:13px 14px;}
  .pp-kpi-val{font-size:18px;}
  .pp-kaart-kop{padding:13px 16px;}
  .pp-kaart-lijf{padding:12px 16px 14px;}
  .pp-deliv{flex-wrap:wrap;}
  .pp-deliv-acties{width:100%;justify-content:flex-end;}
}
@media (max-width:420px){
  .pp-kpis{gap:8px;}
  .pp-kpi{padding:12px;}
  .pp-kpi-val{font-size:17px;}
  .pp-kpi-sub{font-size:11px;}
}

/* ═══ KLANTPAGINA ═══ */
#ap-client-detail{max-width:1280px;}
.kd-kop{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  background:linear-gradient(135deg,var(--royal) 0%,#0D2B78 100%);color:#fff;border-radius:var(--kader);padding:24px 28px;margin:.35rem 0 14px;}
.kd-kop::after{content:'';position:absolute;right:-50px;top:-90px;width:280px;height:280px;border:40px solid rgba(255,255,255,.045);border-radius:0 80px 0 80px;transform:rotate(12deg);pointer-events:none;}
.kd-kop > *{position:relative;z-index:1;}
.kd-kop-tekst{min-width:0;}
.kd-kop-label{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);}
.kd-kop h2{font-size:28px;font-weight:900;font-style:italic;letter-spacing:-.02em;line-height:1.1;margin:6px 0 6px;}
.kd-kop-contact{font-size:13px;color:rgba(255,255,255,.82);}
.kd-kop-contact a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);}
.kd-kop-contact a:hover{border-bottom-color:#fff;}
.kd-kop-regel{font-size:12px;color:rgba(255,255,255,.55);margin-top:4px;}
.kd-kop-acties{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0;}
.kd-kop-knoppen{display:flex;gap:8px;}
.kd-dossier{display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;padding:6px 6px 6px 12px;border-radius:var(--kader-xs);background:rgba(255,230,0,.16);color:#FFF3A0;}
.kd-dossier span{background:var(--yellow);color:var(--charcoal);font-weight:800;padding:3px 9px;border-radius:var(--kader-xs);}
.kd-dossier-ernstig{background:rgba(255,120,120,.2);color:#FFD0D0;}
.kd-dossier:hover span{background:var(--yellow-80);}

.kd-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.kd-tab{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border:1.5px solid var(--border);border-radius:var(--kader-sm);
  background:var(--white);font:inherit;font-size:12.5px;font-weight:700;color:var(--black);cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.kd-tab:hover{border-color:var(--royal);color:var(--royal);}
.kd-tab.active{background:var(--royal);border-color:var(--royal);color:#fff;}
.kd-tab em{font-style:normal;font-size:10.5px;font-weight:800;background:var(--off);color:var(--royal);border-radius:9px;padding:1px 7px;}
.kd-tab.active em{background:rgba(255,255,255,.18);color:#fff;}
.kd-stip{position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--warning,#C27A00);box-shadow:0 0 0 2px var(--bone,#F7F5F2);}
.kd-tab.active .kd-stip{background:var(--yellow);}
.kd-tab:focus-visible{outline:3px solid var(--cyan,#00AEEF);outline-offset:2px;}
.kd-pagina{display:none;}
.kd-pagina.active{display:block;}

.kd-kaart{background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:16px 20px 18px;}
.kd-kaart > header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 12px;}
.kd-kaart > header h3{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;}
.kd-tel{font-size:10.5px;font-weight:800;background:var(--off);color:var(--muted);border-radius:9px;padding:1px 8px;}
.kd-tel-actie{background:#FFF1D6;color:#8A5A00;}
.kd-leeg{font-size:12.5px;color:var(--muted);line-height:1.6;}
.kd-rood{color:var(--danger)!important;}
.kd-uit{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:2.5rem 1rem;background:var(--white);border:1.5px dashed var(--border);border-radius:var(--kader);}
.kd-uit strong{font-size:13.5px;}
.kd-uit span{font-size:12px;color:var(--muted);max-width:420px;line-height:1.5;}
.kd-uit .btn-blue{margin-top:8px;}
.kd-uit-klein{border:none;padding:1.5rem 1rem;}

/* Overzicht */
.kd-overzicht{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;}
.kd-sectiekop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.kd-sectiekop h3{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.kd-projecten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.kd-proj{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:16px 16px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.kd-proj::before{content:'';position:absolute;left:-1.5px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--success);}
.kd-proj-wacht::before{background:var(--royal);}
.kd-proj-risico::before{background:#C27A00;}
.kd-proj-laat::before{background:var(--danger);}
.kd-proj:hover{border-color:var(--royal);box-shadow:0 8px 22px rgba(16,53,144,.1);}
.kd-proj:hover h3{color:var(--royal);}
.kd-proj:focus-visible{outline:3px solid var(--cyan,#00AEEF);outline-offset:2px;}
.kd-proj-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.kd-proj-kop h3{font-size:14.5px;font-weight:800;line-height:1.3;transition:color .15s;}
.kd-proj-kop > div:first-child span{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.kd-proj-volgend{flex-shrink:0;text-align:right;background:var(--off);border-radius:var(--kader-xs);padding:4px 9px;}
.kd-proj-volgend small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.kd-proj-volgend b{font-size:13px;color:var(--royal);}
.kd-proj-fases{display:flex;align-items:center;gap:4px;}
.kd-fase{flex:1;height:5px;border-radius:3px;background:var(--off);}
.kd-fase-klaar{background:var(--royal);}
.kd-fase-bezig{background:var(--yellow);}
.kd-fase-laat{background:var(--danger);}
.kd-proj-fases em{font-style:normal;font-size:11px;font-weight:800;color:var(--royal);margin-left:6px;white-space:nowrap;}
.kd-proj-feiten{display:flex;flex-wrap:wrap;gap:6px;}
.kd-proj-feiten span{font-size:11px;font-weight:600;color:var(--muted);background:var(--off);border-radius:var(--kader-xs);padding:3px 8px;}
.kd-proj-feiten .kd-off-geaccepteerd{background:var(--success-bg);color:var(--success);}
.kd-proj-feiten .kd-off-verzonden{background:#FFF8C2;color:#6B5B00;}
.kd-proj-feiten .kd-off-afgewezen{background:var(--danger-bg);color:var(--danger);}
.kd-proj-let{font-size:11.5px;font-weight:700;padding:7px 10px;border-radius:var(--kader-xs);background:#FFF6E0;color:#8A5A00;}
.kd-proj-let small{font-weight:800;opacity:.7;}
.kd-let-laat{background:var(--danger-bg);color:var(--danger);}
.kd-let-wacht{background:#E9EEF8;color:var(--royal);}
.kd-let-geld{background:var(--success-bg);color:var(--success);}
.kd-proj-nieuw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;border:1.5px dashed var(--border);border-radius:var(--kader-sm);background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s;}
.kd-proj-nieuw span{font-size:22px;line-height:1;font-weight:500;}
.kd-proj-nieuw:hover{border-color:var(--royal);color:var(--royal);}
.kd-af{margin-top:12px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);}
.kd-af summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:12.5px;font-weight:800;color:var(--muted);}
.kd-af summary::-webkit-details-marker{display:none;}
.kd-af summary::after{content:'›';margin-left:auto;font-size:18px;transition:transform .15s;}
.kd-af[open] summary::after{transform:rotate(90deg);}
.kd-af summary em{font-style:normal;font-size:10.5px;background:var(--off);border-radius:9px;padding:1px 8px;}
.kd-af-lijst{display:flex;flex-direction:column;padding:0 16px 10px;}
.kd-af-lijst button{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 0;border:none;border-top:1px solid var(--border);background:none;font:inherit;text-align:left;cursor:pointer;}
.kd-af-lijst button span{font-size:12.5px;font-weight:700;}
.kd-af-lijst button small{font-size:11px;color:var(--muted);}
.kd-af-lijst button:hover span{color:var(--royal);}
.kd-zij{display:flex;flex-direction:column;gap:12px;}
.kd-zij .kc-balk{margin:0;}
.kd-wacht{padding:14px 16px;}
.kd-wacht > header{margin-bottom:6px;}
.kd-wacht-rij{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;padding:8px 0;border:none;border-top:1px solid var(--border);background:none;font:inherit;text-align:left;}
button.kd-wacht-rij{cursor:pointer;}
button.kd-wacht-rij:hover .kd-wacht-tekst{color:var(--royal);text-decoration:underline;text-underline-offset:2px;}
.kd-wacht > header + .kd-wacht-rij{border-top:none;}
.kd-wacht-tekst{position:relative;padding-left:14px;font-size:12.5px;line-height:1.45;color:var(--black);}
.kd-wacht-tekst::before{content:'';position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:var(--royal);}
.kd-wacht-ons .kd-wacht-tekst::before{background:#C27A00;}
.kd-wacht-sinds{flex-shrink:0;font-size:11px;color:var(--muted);}

/* Deliverables */
.kd-delivs .pp-deliv:first-child{border-top:none;padding-top:0;}

/* Content */
.kd-wissel{display:flex;background:var(--off);border-radius:var(--kader-xs);padding:3px;}
.kd-wissel button{border:none;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--muted);padding:6px 14px;border-radius:var(--kader-xs);cursor:pointer;}
.kd-wissel button.aan{background:var(--royal);color:#fff;}
.kd-content-cijfers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.kd-content-cijfers span{font-size:12px;color:var(--muted);background:var(--off);border-radius:var(--kader-xs);padding:5px 10px;}
.kd-content-cijfers b{color:var(--royal);font-size:13px;margin-right:2px;}

/* Chat */
.kd-chat{padding:0;overflow:hidden;}
.kd-chat .chat-wrap{border:none;border-radius:0;}

/* Merk */
.kd-merk{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;}
.kd-merk-veld{margin-bottom:14px;}
.kd-merk-veld p{font-size:13px;line-height:1.6;white-space:pre-line;}
.kd-merk-veld .pp-lbl small{text-transform:none;letter-spacing:0;font-weight:600;}
.kd-chips{display:flex;flex-wrap:wrap;gap:6px;}
.kd-chips span{font-size:12px;font-weight:700;background:#E9EEF8;color:var(--royal);border-radius:var(--kader-xs);padding:4px 10px;}
.kd-kleuren{display:flex;flex-wrap:wrap;gap:10px;}
.kd-kleur{display:flex;flex-direction:column;align-items:center;gap:5px;border:none;background:none;padding:0;cursor:pointer;font:inherit;}
.kd-kleur span{width:58px;height:58px;border-radius:0 12px 0 12px;border:1px solid var(--border);transition:transform .12s;}
.kd-kleur:hover span{transform:scale(1.06);}
.kd-kleur code{font-size:10.5px;color:var(--muted);}
.kd-font{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--border);}
.kd-font:first-of-type{border-top:none;}
.kd-font > span{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--off);border-radius:var(--kader-xs);font-size:22px;}
.kd-font strong{display:block;font-size:13px;}
.kd-font small{font-size:11px;color:var(--muted);}

/* Beheer */
.kd-beheer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;}
.kd-beheer-links{display:flex;flex-direction:column;gap:16px;}
.kd-accounts{display:flex;flex-direction:column;gap:8px;}
#kp-zichtbaar .kp-toegang{margin-top:12px;}

@media (max-width:1100px){
  .kd-overzicht{grid-template-columns:minmax(0,1fr);}
  .kd-zij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .kd-zij > .kc-balk{grid-column:1 / -1;}
  .kd-beheer{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:700px){
  .kd-kop{flex-direction:column;align-items:stretch;padding:20px 18px;}
  .kd-kop h2{font-size:23px;}
  .kd-kop-acties{align-items:stretch;}
  .kd-kop-knoppen button{flex:1;justify-content:center;height:44px;}
  .kd-dossier{justify-content:space-between;}
  .kd-knoppen{flex-wrap:nowrap;overflow-x:auto;padding:5px 5px 4px 0;margin-top:-5px;scrollbar-width:none;}
  .kd-knoppen::-webkit-scrollbar{display:none;}
  .kd-tab{flex-shrink:0;height:40px;}
  .kd-zij{grid-template-columns:minmax(0,1fr);}
  .kd-kaart{padding:14px 16px 16px;}
  .kd-merk{grid-template-columns:minmax(0,1fr);gap:8px;}
  .kd-projecten{grid-template-columns:minmax(0,1fr);}
}
/* De oude kaartrand van de tabbladen hoort niet om de nieuwe pagina's */
.ctab-page.kd-pagina{background:none;border:none;box-shadow:none;padding:0;border-radius:0;}
@media (max-width:700px){ .kd-proj-nieuw{min-height:60px;flex-direction:row;} }

/* ═══ BEELDBANK ═════════════════════════════════════════════════════
   Mappen als kaarten met één voorbeeldbeeld. De ster is geel in een
   Deep Royal-rondje: geel op wit is in de huisstijl verboden. */
.bb-kop-acties{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.bb-schakel{display:inline-flex;align-items:center;gap:8px;background:none;border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:5px 12px 5px 7px;font:700 11.5px 'Montserrat',sans-serif;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s;}
.bb-schakel:hover{border-color:var(--royal-40);color:var(--black);}
.bb-schakel-baan{width:28px;height:16px;border-radius:8px;background:var(--bone-lijn);position:relative;transition:background .2s var(--soepel);flex-shrink:0;}
.bb-schakel-baan span{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--soepel);}
.bb-schakel.bb-aan{border-color:var(--royal-20);color:var(--royal);background:var(--royal-wash);}
.bb-schakel.bb-aan .bb-schakel-baan{background:var(--royal);}
.bb-schakel.bb-aan .bb-schakel-baan span{transform:translateX(12px);}
.bb-uitbalk{display:flex;flex-direction:column;gap:2px;background:var(--off);border-left:3px solid var(--royal-40);padding:10px 14px;margin:0 0 14px;font-size:12px;line-height:1.5;border-radius:0 var(--rsm) var(--rsm) 0;}
.bb-uitbalk span{color:var(--muted);}
.bb-samen{font-size:12px;color:var(--muted);margin:-4px 0 14px;}

.bb-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.bb-kaart{position:relative;display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);overflow:hidden;transition:border-color .15s,box-shadow .2s var(--soepel),transform .2s var(--soepel);}
.bb-kaart:hover{border-color:var(--royal-20);box-shadow:0 8px 24px rgba(16,53,144,.08);}
.bb-cover{position:relative;display:block;aspect-ratio:4/3;background:var(--bone-vlak);overflow:hidden;color:var(--royal-60);text-decoration:none;}
.bb-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--soepel);}
a.bb-cover:hover img{transform:scale(1.04);}
.bb-cover-leeg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--royal-wash),var(--bone-vlak));}
.bb-cover-leeg svg{width:40px;height:40px;}
.bb-label{position:absolute;left:10px;top:10px;background:var(--charcoal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:var(--kader-xs);}
.bb-favlabel,.bb-projster{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--royal);}
.bb-favlabel{position:absolute;right:10px;top:10px;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.bb-favlabel svg,.bb-projster svg{width:14px;height:14px;fill:var(--yellow);}
.bb-verborgen .bb-cover img,.bb-verborgen .bb-cover-leeg{opacity:.45;filter:grayscale(.6);}
.bb-kaart-tekst{padding:12px 14px 4px;flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.bb-kaart-tekst h4{font-size:13.5px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;}
.bb-kaart-tekst p{font-size:11.5px;color:var(--muted);line-height:1.45;}
.bb-favregel{color:var(--royal)!important;font-weight:600;}
.bb-favregel q{font-weight:500;color:var(--black);}
.bb-let{color:var(--warning)!important;font-weight:600;}
.bb-kaart-acties{display:flex;flex-wrap:wrap;gap:4px;padding:8px 8px 10px;border-top:1px solid var(--bone-vlak);margin-top:8px;}
.bb-raster-admin{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.bb-leeg{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:2.25rem 1rem;border:1.5px dashed var(--border);border-radius:var(--kader);}
.bb-leeg strong{font-size:13.5px;}
.bb-leeg span{font-size:12px;color:var(--muted);max-width:420px;line-height:1.5;}
.bb-leeg .btn-blue{margin-top:8px;}
.bb-leeg-icoon{color:var(--royal-60);}
.bb-leeg-icoon svg{width:36px;height:36px;}

/* Modal */
.bb-klantregel{font-size:12px;color:var(--muted);margin:-6px 0 14px;}
.bb-cover-prev{color:var(--royal-60);display:flex;align-items:center;justify-content:center;}
.bb-cover-prev svg{width:22px;height:22px;}
.bb-zichtbaarvink{margin:6px 0 4px;}
.bb-fout{font-size:12px;font-weight:600;color:var(--danger);min-height:1em;margin:6px 0 0;}
.bb-modal .modal-footer{align-items:center;}
.bb-verwijder{margin-right:auto;}

/* Projectpagina */
.bb-projlijst{display:flex;flex-direction:column;gap:6px;}
.bb-projrij{display:flex;align-items:center;gap:10px;width:100%;background:none;border:1.5px solid transparent;border-radius:var(--kader-sm);padding:5px;text-align:left;cursor:pointer;font-family:inherit;}
.bb-projrij:hover{border-color:var(--border);background:var(--off);}
.bb-projcover{position:relative;width:52px;height:39px;flex-shrink:0;border-radius:var(--kader-xs);overflow:hidden;background:var(--bone-vlak);color:var(--royal-60);}
.bb-projcover img{width:100%;height:100%;object-fit:cover;}
.bb-projcover .bb-cover-leeg svg{width:18px;height:18px;}
.bb-projtekst{display:flex;flex-direction:column;min-width:0;flex:1;}
.bb-projtekst b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bb-projtekst small{font-size:11px;color:var(--muted);}
.bb-projster{width:22px;height:22px;}
.bb-projster svg{width:12px;height:12px;}
.bb-projuit{margin-top:8px;}

/* Klantportaal */
.bb-portaal{display:flex;flex-direction:column;gap:16px;}
.bb-p-kop p{font-size:13px;color:var(--muted);line-height:1.6;max-width:640px;margin-top:6px;}
.bb-titel{font-family:'Montserrat',sans-serif;font-weight:900;font-style:italic;font-size:28px;color:var(--royal);letter-spacing:-.01em;}
.bb-titel span{color:inherit;}  /* de punt in dezelfde kleur als de titel, net als elke andere titel in het portaal */
.bb-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bb-zoek{position:relative;flex:1 1 220px;max-width:360px;display:flex;align-items:center;color:var(--muted);}
.bb-zoek svg{position:absolute;left:11px;pointer-events:none;}
.bb-zoek input{width:100%;padding:9px 12px 9px 32px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font:500 12.5px 'Montserrat',sans-serif;background:var(--white);outline:none;transition:border-color .15s;}
.bb-zoek input:focus{border-color:var(--royal);}
.bb-chips{display:flex;gap:6px;flex-wrap:wrap;}
.bb-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);background:var(--white);border-radius:var(--kader-sm);padding:6px 11px;font:700 12px 'Montserrat',sans-serif;color:var(--black);cursor:pointer;transition:all .15s;}
.bb-chip em{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:700;}
.bb-chip svg{width:12px;height:12px;fill:currentColor;}
.bb-chip:hover{border-color:var(--royal-40);}
.bb-chip.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.bb-chip.aan em{color:var(--royal-20);}
.bb-chip.aan svg{fill:var(--yellow);}
.bb-projkeuze{padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font:600 12px 'Montserrat',sans-serif;background:var(--white);}
.bb-portaal .bb-raster{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
.bb-open{position:absolute;left:10px;bottom:10px;background:rgba(16,53,144,.92);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--kader-xs);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s var(--soepel);}
a.bb-cover:hover .bb-open,a.bb-cover:focus-visible .bb-open{opacity:1;transform:none;}
@media (hover:none){ .bb-open{opacity:1;transform:none;} }
.bb-ster{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.16);transition:transform .2s var(--soepel),background .15s;}
.bb-ster svg{width:18px;height:18px;fill:none;stroke:var(--royal);stroke-width:1.8;stroke-linejoin:round;}
.bb-ster:hover{transform:scale(1.08);}
.bb-ster.aan{background:var(--royal);}
.bb-ster.aan svg{fill:var(--yellow);stroke:var(--yellow);}
.bb-ster.aan{animation:bbPlop .35s var(--soepel);}
@keyframes bbPlop{0%{transform:scale(.8);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){ .bb-ster.aan{animation:none;} .bb-cover img{transition:none;} }
.bb-omschr{color:var(--black)!important;margin-top:3px;}
.bb-kaart-klant .bb-kaart-tekst{padding-bottom:14px;}
.bb-notitieknop{align-self:flex-start;margin-top:6px;background:var(--royal-wash);border:none;border-radius:var(--kader-xs);padding:6px 10px;font:600 11.5px 'Montserrat',sans-serif;color:var(--royal);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;}
.bb-notitieknop q{color:var(--black);font-weight:500;}
.bb-notitieknop q + span{font-size:10.5px;}
.bb-notitie{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.bb-notitie textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--kader-xs);padding:8px 10px;font:500 12px/1.5 'Montserrat',sans-serif;resize:vertical;outline:none;}
.bb-notitie textarea:focus{border-color:var(--royal);}
.bb-notitie div{display:flex;gap:6px;justify-content:flex-end;}
.bb-geen{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:2rem 1rem;font-size:12.5px;color:var(--muted);border:1.5px dashed var(--border);border-radius:var(--kader);}
@media (max-width:600px){
  .bb-raster,.bb-portaal .bb-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
  .bb-raster.bb-raster-admin{grid-template-columns:minmax(0,1fr);}
  .bb-kaart-tekst{padding:10px 10px 4px;}
  .bb-kaart-acties{padding:6px 10px 10px;}
  .bb-titel{font-size:24px;}
  .bb-zoek{max-width:none;}
  .bb-kop-acties{width:100%;justify-content:space-between;}
  .bb-beheer > header{flex-wrap:wrap;}
}
@media (max-width:380px){ .bb-raster,.bb-portaal .bb-raster{grid-template-columns:minmax(0,1fr);} }
.bb-raster-admin .bb-cover{aspect-ratio:16/9;}

/* Beeldbank: tags */
.bb-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.bb-tag{display:inline-flex;align-items:center;gap:5px;background:var(--off);border:1px solid var(--bone-lijn);border-radius:var(--kader-xs);padding:2px 8px;font:600 10.5px 'Montserrat',sans-serif;color:var(--black);line-height:1.6;}
button.bb-tag{cursor:pointer;transition:border-color .15s,background .15s;}
button.bb-tag:hover{border-color:var(--royal-40);}
.bb-tag.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.bb-tag em{font-style:normal;font-size:10px;color:var(--muted);}
.bb-tag.aan em{color:var(--royal-20);}
.bb-tagbalk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:-6px;}
.bb-tagbalk > span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px;}
.bb-tagbalk .bb-tag{font-size:11.5px;padding:4px 10px;}
.bb-tagsuggesties{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px;min-height:0;}
.bb-tagsuggesties:empty{display:none;}
.bb-tagsuggesties span{font-size:11px;color:var(--muted);}
.bb-tagsuggesties button{background:var(--royal-wash);border:none;border-radius:var(--kader-xs);padding:3px 8px;font:600 11px 'Montserrat',sans-serif;color:var(--royal);cursor:pointer;}
.bb-tagsuggesties button:hover{background:var(--royal-20);}

/* ═══ DEEP DIVE: INVULSCHERM ════════════════════════════════════════ */
.dd-titel{font-weight:900;font-style:italic;font-size:30px;color:var(--royal);letter-spacing:-.01em;line-height:1.1;}
.dd-lijstkop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.dd-lijstkop p{font-size:13px;color:var(--muted);margin-top:6px;max-width:560px;line-height:1.55;}
.dd-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.dd-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);background:var(--white);border-radius:var(--kader-sm);padding:6px 12px;font:700 12px 'Montserrat',sans-serif;color:var(--black);cursor:pointer;}
.dd-chip em{font-style:normal;font-size:10.5px;color:var(--muted);}
.dd-chip.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.dd-chip.aan em{color:var(--royal-20);}
.dd-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.dd-kaart{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:16px 18px;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .2s var(--soepel),transform .2s var(--soepel);}
.dd-kaart:hover{border-color:var(--royal-20);box-shadow:0 10px 28px rgba(16,53,144,.09);transform:translateY(-1px);}
.dd-kaart-kop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
.dd-kaart-klant{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);}
.dd-kaart strong{font-size:16px;font-weight:800;color:var(--black);line-height:1.3;}
.dd-kaart-voet{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted);}
.dd-kaart-reacties{font-size:11px;font-weight:700;color:var(--royal);background:var(--royal-wash);padding:2px 8px;border-radius:var(--kader-xs);}
.dd-kaart-let{font-size:11.5px;font-weight:700;color:var(--warning);}
.dd-status{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:var(--kader-xs);background:var(--off);color:var(--muted);}
.dd-status-gepubliceerd{background:var(--success-bg);color:var(--success);}
.dd-status-gearchiveerd{background:var(--royal-wash);color:var(--royal);}
.dd-status-groot{font-size:12px;padding:5px 12px;}
.dd-meter{height:6px;border-radius:3px;background:var(--bone-vlak);overflow:hidden;margin:6px 0 2px;}
.dd-meter span{display:block;height:100%;background:var(--gradient-h);border-radius:3px;transition:width .4s var(--soepel);}
.dd-meter-dun{height:3px;margin:0 12px 4px;}
.dd-meter-licht{background:rgba(255,255,255,.2);}
.dd-meter-licht span{background:var(--yellow);}
.dd-leeg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:3rem 1rem;background:var(--white);border:1.5px dashed var(--border);border-radius:var(--kader);}
.dd-leeg strong{font-size:15px;} .dd-leeg span{font-size:12.5px;color:var(--muted);max-width:460px;line-height:1.6;}
.dd-leeg .btn-blue{margin-top:8px;}
.dd-leeg-vorm{position:relative;width:64px;height:64px;margin-bottom:6px;}
.dd-leeg-vorm span{position:absolute;inset:0;border:2px solid var(--royal);border-radius:0 22px 0 22px;}
.dd-leeg-vorm span:nth-child(2){inset:10px;border-color:var(--mid);border-radius:0 15px 0 15px;}
.dd-leeg-vorm span:nth-child(3){inset:20px;border-color:var(--cyan);border-radius:0 9px 0 9px;}
.dd-fout{display:flex;flex-direction:column;gap:4px;padding:14px 18px;background:var(--danger-bg);color:var(--danger);border-radius:var(--kader-sm);font-size:12.5px;}
.dd-geen{font-size:12.5px;color:var(--muted);}
.dd-laden{padding:3rem;text-align:center;color:var(--muted);font-size:13px;}

/* Archief en losse bedrijven */
.dd-chips-tus{width:1.5px;align-self:stretch;background:var(--border);margin:2px 6px;}
.dd-archiefuitleg{font-size:12.5px;color:var(--black);background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:10px 14px;margin:-4px 0 16px;line-height:1.55;max-width:720px;}
.dd-kaart-kop{justify-content:flex-start;flex-wrap:wrap;}
.dd-kaart-kop .dd-kaart-reacties{margin-left:auto;}
.dd-status-archief{background:var(--charcoal,#1A1D23);color:#fff;}
.dd-los-label{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:var(--kader-xs);border:1.5px dashed var(--royal-40);color:var(--royal);}
.dd-kaart-archief{background:var(--off);border-style:dashed;}
.dd-kaart-archief strong,.dd-kaart-archief .dd-kaart-klant{color:var(--muted);}
.dd-kaart-archief .dd-meter span{background:var(--muted);}
.dd-archiefbalk{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--charcoal,#1A1D23);color:#fff;border-radius:var(--kader);padding:14px 18px;margin:0 0 14px;}
.dd-archiefbalk > div{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px;}
.dd-archiefbalk strong{font-size:14px;font-weight:800;}
.dd-archiefbalk span{font-size:12.5px;line-height:1.5;}
.dd-archiefbalk .btn-blue{background:#fff;color:var(--royal);border-color:#fff;}
.dd-kop-los{display:inline-block;margin-left:10px;font-style:normal;font-size:10px;letter-spacing:.06em;padding:2px 8px;border:1.5px dashed rgba(255,255,255,.7);border-radius:var(--kader-xs);color:#fff;vertical-align:1px;}
.dd-keuzes{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.dd-keuze{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:12px 14px;cursor:pointer;}
.dd-keuze:has(input:checked){border-color:var(--royal);background:var(--royal-wash);}
.dd-keuze:has(input:disabled){opacity:.5;cursor:default;}
.dd-keuze input{accent-color:var(--royal);margin-top:3px;}
.dd-keuze span{display:flex;flex-direction:column;gap:3px;}
.dd-keuze strong{font-size:13px;font-weight:800;}
.dd-keuze small{font-size:12px;color:var(--muted);line-height:1.5;}

/* Modals */
.dd-modal{max-width:560px;}
.dd-modal-breed{max-width:720px;}
.dd-los{background:var(--off);border-radius:var(--kader-sm);padding:12px 14px 4px;margin:-4px 0 14px;}
.dd-los p{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5;}
.dd-hulp{font-size:11.5px;color:var(--muted);line-height:1.5;margin:4px 0 0;}
.dd-fouttekst{font-size:12px;font-weight:600;color:var(--danger);min-height:1em;}
.dd-details{border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:10px 14px;margin-top:4px;}
.dd-details summary{cursor:pointer;font-size:12.5px;font-weight:700;display:flex;gap:8px;align-items:center;}
.dd-details summary span{font-weight:500;color:var(--muted);font-size:11.5px;}
.dd-modelkeuze{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:10px;}
.dd-modelgroep{display:flex;flex-direction:column;gap:5px;}
.dd-modelgroep > span{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);}
.dd-vink{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:600;cursor:pointer;line-height:1.35;}
.dd-vink input{accent-color:var(--royal);margin-top:2px;width:15px;height:15px;flex-shrink:0;}
.dd-vink small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);}
.dd-inst{display:flex;flex-direction:column;gap:18px;}
.dd-inst section{border-bottom:1px solid var(--bone-vlak);padding-bottom:16px;}
.dd-inst h4{font-size:13px;font-weight:800;color:var(--royal);margin-bottom:8px;}
.dd-pdffasen{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.dd-pdffasen > span{font-size:11.5px;font-weight:700;color:var(--muted);}
.dd-inst-weg{border-bottom:none!important;}
.dd-weg{color:var(--danger)!important;background:var(--danger-bg)!important;margin-top:8px;}
.dd-schakel{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:600;cursor:pointer;line-height:1.4;margin:6px 0;}
.dd-schakel input{accent-color:var(--royal);width:16px;height:16px;margin-top:1px;flex-shrink:0;}
.dd-schakel small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px;}

/* Kop van het invulscherm */
.dd-balk{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.dd-balk .btn-back{margin:0;}
.dd-balk-acties{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.dd-opslag{font-size:11.5px;color:var(--muted);margin-right:6px;}
.dd-kop{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--royal);color:#fff;border-radius:var(--kader);padding:22px 26px;margin-bottom:16px;position:relative;overflow:hidden;}
.dd-kop::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border:2px solid rgba(255,255,255,.09);border-radius:0 80px 0 80px;pointer-events:none;}
.dd-kop-tekst{flex:1 1 320px;min-width:0;position:relative;z-index:1;}
.dd-kop-klant{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);}
.dd-kop-naam{display:block;width:100%;background:none;border:none;border-bottom:1.5px dashed transparent;color:#fff;font:900 italic 28px/1.15 'Montserrat',sans-serif;padding:2px 0;margin:4px 0 8px;outline:none;}
.dd-kop-naam:hover,.dd-kop-naam:focus{border-bottom-color:rgba(255,255,255,.4);}
.dd-kop-meter{display:flex;align-items:center;gap:10px;max-width:380px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85);}
.dd-kop-meter .dd-meter{flex:1;margin:0;}
.dd-kop-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;position:relative;z-index:1;}
.dd-kop-status small{font-size:11.5px;color:rgba(255,255,255,.8);text-align:right;max-width:260px;}
.dd-kop-let{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font:700 11px 'Montserrat',sans-serif;padding:5px 10px;border-radius:var(--kader-xs);cursor:pointer;}

/* De drie zones */
.dd-werk{display:grid;grid-template-columns:220px minmax(0,1fr) 270px;gap:16px;align-items:start;}
.dd-werk.dd-zonder-notities{grid-template-columns:220px minmax(0,1fr) 120px;}
.dd-fasen{position:sticky;top:12px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:12px 8px;max-height:calc(100vh - 40px);overflow:auto;}
.dd-fasen-kop{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:2px 10px 8px;}
.dd-fase{border-radius:var(--kader-sm);margin-bottom:2px;}
.dd-fase.aan{background:var(--royal-wash);}
.dd-fase-knop{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:9px 10px;cursor:pointer;text-align:left;font-family:inherit;border-radius:var(--kader-sm);}
.dd-fase-knop:hover{background:var(--off);}
.dd-fase.aan .dd-fase-knop:hover{background:none;}
.dd-fase-nr{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;background:var(--off);color:var(--muted);border:1.5px solid var(--border);flex-shrink:0;}
.dd-fase-bezig .dd-fase-nr{border-color:var(--royal);color:var(--royal);background:#fff;}
.dd-fase.aan .dd-fase-nr{background:var(--royal);border-color:var(--royal);color:#fff;}
.dd-fase-af .dd-fase-nr{background:var(--success);border-color:var(--success);color:#fff;}
.dd-fase-uit{opacity:.55;}
.dd-fase-tekst{display:flex;flex-direction:column;min-width:0;flex:1;}
.dd-fase-tekst b{font-size:12.5px;font-weight:700;color:var(--black);line-height:1.3;}
.dd-fase-tekst small{font-size:10.5px;color:var(--muted);}
.dd-fase-pct{font-size:11px;font-weight:800;color:var(--royal);}
.dd-vraaglijst{list-style:none;margin:2px 0 6px;padding:0 6px 4px 22px;}
.dd-vraaglijst button{display:flex;gap:8px;align-items:flex-start;width:100%;background:none;border:none;padding:5px 6px;font:500 11.5px/1.35 'Montserrat',sans-serif;color:var(--muted);text-align:left;cursor:pointer;border-radius:var(--kader-xs);}
.dd-vraaglijst button:hover{background:#fff;color:var(--black);}
.dd-vraaglijst i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--royal-40);margin-top:4px;flex-shrink:0;}
.dd-vraaglijst .klaar i{background:var(--success);border-color:var(--success);}
.dd-vraaglijst .klaar{color:var(--black);}

.dd-midden{min-width:0;}
.dd-fasekop{background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:16px 20px;margin-bottom:14px;}
.dd-fasekop-nr{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);}
.dd-fasekop-titel{display:block;width:100%;border:none;border-bottom:1.5px dashed transparent;background:none;font:900 italic 24px/1.2 'Montserrat',sans-serif;color:var(--royal);padding:2px 0;margin:2px 0 6px;outline:none;}
.dd-fasekop-titel:hover,.dd-fasekop-titel:focus{border-bottom-color:var(--royal-20);}
.dd-fasekop-intro{width:100%;border:1.5px solid transparent;border-radius:var(--kader-xs);background:var(--off);font:500 12.5px/1.55 'Montserrat',sans-serif;color:var(--black);padding:8px 10px;resize:vertical;outline:none;}
.dd-fasekop-intro:focus{border-color:var(--royal-40);background:#fff;}
.dd-uitbalk{background:var(--warning-bg);color:var(--warning);font-size:12.5px;font-weight:600;padding:10px 14px;border-radius:var(--kader-sm);margin-bottom:14px;}

.dd-veld{background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:16px 18px 12px;margin-bottom:12px;scroll-margin-top:20px;transition:border-color .2s,box-shadow .2s;}
.dd-veld:focus-within{border-color:var(--royal-40);box-shadow:0 6px 20px rgba(16,53,144,.07);}
.dd-is-key{border-left:4px solid var(--royal);}
.dd-veld-kop{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;}
.dd-veld-nr{font-weight:900;font-style:italic;font-size:15px;color:var(--cyan);min-width:30px;line-height:1.4;}
.dd-veld-vraag{flex:1;min-width:0;}
.dd-veld-vraag h3{font-size:15px;font-weight:800;color:var(--black);line-height:1.35;}
.dd-instructie{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:4px;}
.dd-modelbadge{display:inline-block;margin-top:7px;font-size:10.5px;font-weight:800;color:var(--royal);background:var(--royal-wash);padding:3px 9px;border-radius:var(--kader-xs);letter-spacing:.02em;}
.dd-modelbadge-uit{color:var(--muted);background:var(--off);}
.dd-veld-opslag{font-size:10.5px;color:var(--muted);white-space:nowrap;padding-top:3px;}
.dd-fout-tekst{color:var(--danger)!important;font-weight:700;}
.dd-schrijf{border:1.5px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;background:#fff;}
.dd-schrijf:focus-within{border-color:var(--royal);}
.dd-werkbalk{display:flex;gap:2px;padding:4px;background:var(--off);border-bottom:1px solid var(--bone-vlak);}
.dd-werkbalk button{background:none;border:none;font:600 11.5px 'Montserrat',sans-serif;color:var(--black);padding:4px 9px;border-radius:var(--kader-xs);cursor:pointer;}
.dd-werkbalk button:hover{background:#fff;}
.dd-antwoord{display:block;width:100%;border:none;outline:none;resize:none;font:500 13.5px/1.65 'Montserrat',sans-serif;color:var(--black);padding:12px 14px;min-height:110px;overflow:hidden;}
.dd-veld-voet{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.dd-teller{font-size:11.5px;font-weight:700;color:var(--muted);min-width:96px;}
.dd-teller small{font-weight:500;}
.dd-teller.ok{color:var(--success);}
.dd-prio{display:inline-flex;border:1.5px solid var(--border);border-radius:var(--kader-xs);overflow:hidden;}
.dd-prio button{background:#fff;border:none;font:700 11px 'Montserrat',sans-serif;color:var(--muted);padding:5px 10px;cursor:pointer;}
.dd-prio button + button{border-left:1.5px solid var(--border);}
.dd-prio-hoog.aan{background:var(--danger-bg);color:var(--danger);}
.dd-prio-middel.aan{background:var(--warning-bg);color:var(--warning);}
.dd-prio-laag.aan{background:var(--success-bg);color:var(--success);}
.dd-key{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1.5px solid var(--border);border-radius:var(--kader-xs);font:700 11px 'Montserrat',sans-serif;color:var(--muted);padding:4px 10px;cursor:pointer;}
.dd-key svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;}
.dd-key.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.dd-key.aan svg{fill:var(--yellow);stroke:var(--yellow);}
.dd-veld-menu{margin-left:auto;display:flex;align-items:center;gap:4px;}
.dd-notitieknop{background:none;border:none;font:700 11px 'Montserrat',sans-serif;color:var(--royal);cursor:pointer;padding:5px 8px;border-radius:var(--kader-xs);}
.dd-notitieknop:hover{background:var(--royal-wash);}
.dd-notitieknop em{font-style:normal;background:var(--royal-wash);padding:0 6px;border-radius:8px;}
.dd-meer{position:relative;}
.dd-meer summary{list-style:none;cursor:pointer;font-weight:800;color:var(--muted);padding:3px 9px;border-radius:var(--kader-xs);}
.dd-meer summary::-webkit-details-marker{display:none;}
.dd-meer summary:hover{background:var(--off);}
.dd-meer > div{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1.5px solid var(--border);border-radius:var(--kader-sm);box-shadow:0 10px 26px rgba(0,0,0,.1);padding:5px;z-index:20;min-width:170px;display:flex;flex-direction:column;}
.dd-meer > div button{background:none;border:none;text-align:left;font:600 12px 'Montserrat',sans-serif;padding:7px 10px;border-radius:var(--kader-xs);cursor:pointer;color:var(--black);}
.dd-meer > div button:hover{background:var(--off);}
.dd-rood{color:var(--danger)!important;}
.dd-vraagbij{display:block;width:100%;background:none;border:1.5px dashed var(--royal-20);border-radius:var(--kader);padding:12px;font:700 12.5px 'Montserrat',sans-serif;color:var(--royal);cursor:pointer;margin-bottom:18px;}
.dd-vraagbij:hover{background:var(--royal-wash);}
.dd-samen{background:var(--royal-wash);border-radius:var(--kader);padding:16px;margin-bottom:20px;}
.dd-samen-kop span{font-weight:900;font-style:italic;font-size:17px;color:var(--royal);}
.dd-samen-kop p{font-size:12px;color:var(--muted);margin:2px 0 12px;}
.dd-veld-samen{border-color:var(--royal-20);}
.dd-validatie{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 14px;border-radius:var(--kader-sm);background:var(--success-bg);}
.dd-val-niet_akkoord{background:var(--danger-bg);}
.dd-val-icoon{display:inline-flex;width:20px;height:20px;color:var(--royal);flex-shrink:0;}
.dd-validatie strong{font-size:12.5px;}
.dd-validatie p{font-size:12.5px;margin:3px 0;line-height:1.5;}
.dd-validatie small{font-size:10.5px;color:var(--muted);}

/* Model invullen */
/* Alles onder de vraag lijnt uit met de vraagtitel, niet met het nummer */
.dd-veld:not(.dd-veld-samen) > .dd-schrijf,
.dd-veld:not(.dd-veld-samen) > .dd-veld-voet,
.dd-veld:not(.dd-veld-samen) > .dd-model,
.dd-veld:not(.dd-veld-samen) > .dd-validatie{margin-left:42px;}
.dd-veld-nr{min-width:30px;width:30px;}

/* Model in de vraag: rustig blok met voorbeeld en een duidelijke knop */
.dd-model{margin-top:14px;}
.dd-mblok{border:1.5px solid var(--bone-lijn);border-radius:var(--kader-sm);background:var(--off);overflow:hidden;}
.dd-mblok-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;}
.dd-mblok-kop > div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:160px;}
.dd-mblok-kop strong{font-size:14px;font-weight:800;color:var(--black);}
.dd-mblok-stand{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap;}
.dd-mblok-stand.klaar{color:var(--success);}
.dd-mblok-voorbeeld{display:block;width:100%;border:none;border-top:1.5px solid var(--bone-lijn);background:#fff;padding:14px;cursor:pointer;text-align:left;font:inherit;color:inherit;max-height:420px;overflow:hidden;position:relative;}
.dd-mblok-voorbeeld::after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;}
.dd-mblok-voorbeeld:hover{background:var(--royal-wash);}
.dd-mblok-voorbeeld .ddm,.dd-mo-links .ddme-voorbeeld .ddm{border:none;padding:0;margin:0;background:none;box-shadow:none;}
.dd-mblok-voorbeeld .ddm-kop,.dd-mo-links .ddme-voorbeeld .ddm-kop{display:none;}
.dd-mblok-voorbeeld:focus-visible{outline:2px solid var(--royal);outline-offset:-2px;}
.dd-mblok-leeg{border-top:1.5px solid var(--bone-lijn);padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--muted);margin:0;background:#fff;}

/* Het modelvenster */
.dd-mo{position:fixed;inset:0;z-index:1200;background:rgba(26,29,35,.55);display:none;align-items:stretch;justify-content:center;padding:24px;}
.dd-mo.open{display:flex;animation:ddMoIn .18s ease-out;}
@keyframes ddMoIn{from{opacity:0}to{opacity:1}}
.dd-mo-paneel{background:var(--bone,#F7F5F2);border-radius:var(--kader);width:min(1320px,100%);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(16,53,144,.25);}
.dd-mo-kop{display:flex;align-items:flex-start;gap:20px;padding:20px 24px;background:#fff;border-bottom:1.5px solid var(--border);}
.dd-mo-titel{flex:1;min-width:0;}
.dd-mo-titel h2{font:900 italic 22px/1.2 'Montserrat',sans-serif;color:var(--royal);margin:3px 0 4px;}
.dd-mo-titel h2 small{font:600 normal 12px 'Montserrat',sans-serif;color:var(--muted);margin-left:6px;}
.dd-mo-titel p{font-size:12.5px;line-height:1.55;color:var(--black);max-width:72ch;margin:0;}
.dd-mo-acties{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.dd-mo-stand{font-size:12px;font-weight:800;color:var(--royal);}
.dd-mo-stand.klaar{color:var(--success);}
.dd-mo-opslag{font-size:10.5px;color:var(--muted);}
.dd-mo-acties .btn-blue{min-width:120px;justify-content:center;margin-top:2px;}
.dd-mo-lijf{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);overflow:hidden;}
.dd-mo-links{overflow:auto;padding:24px;border-right:1.5px solid var(--border);}
.dd-mo-plakker{position:sticky;top:0;}
.dd-mo-links .ddme-teken,.dd-mo-links .ddme-voorbeeld{background:#fff;border-radius:var(--kader-sm);padding:16px;border:1.5px solid var(--bone-lijn);}
.dd-mo-tip{font-size:11.5px;color:var(--muted);margin:10px 2px 0;line-height:1.5;}
.dd-mo-rechts{overflow:auto;padding:24px;display:flex;flex-direction:column;gap:12px;}

/* Velden als kaarten */
.ddme-veld{display:flex;flex-direction:column;gap:6px;background:#fff;border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:12px 14px;transition:border-color .2s,box-shadow .3s;}
.ddme-veld:focus-within{border-color:var(--royal);box-shadow:0 6px 18px rgba(16,53,144,.08);}
.ddme-veld > label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--royal);}
.ddme-hint{font-size:12px;line-height:1.5;color:var(--muted);margin:0;}
.ddme-veld textarea,.ddme-veld input[type=text]{width:100%;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:#fff;font:500 13.5px/1.55 'Montserrat',sans-serif;padding:9px 11px;resize:none;outline:none;color:var(--black);min-height:46px;overflow:hidden;}
.ddme-veld input[type=text]{min-height:0;}
.ddme-veld textarea:focus,.ddme-veld input:focus{border-color:var(--royal);}
.ddme-kern textarea{font-weight:800;font-style:italic;color:var(--royal);}
.ddme-flits{animation:ddFlits 1.1s var(--soepel);}
.ddme-groep{font-size:12px;font-weight:800;color:var(--black);margin:8px 0 -2px;padding-top:4px;}
.ddme-groep:first-child{margin-top:0;padding-top:0;}

/* Journey: per fase een groep */
.ddme-fase{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ddme-fase + .ddme-fase{padding-top:14px;border-top:1.5px solid var(--border);}
.ddme-fase legend{display:flex;align-items:center;gap:10px;font:900 italic 16px 'Montserrat',sans-serif;color:var(--royal);margin-bottom:8px;padding:0;}
.ddme-fase legend span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--royal);color:#fff;font-size:12px;font-style:normal;}
.ddme-gevoel,.ddme-knoppen{display:flex;flex-wrap:wrap;gap:6px;}
.ddme-gevoel button,.ddme-knoppen button{border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:7px 13px;font:700 12px 'Montserrat',sans-serif;cursor:pointer;color:var(--black);}
.ddme-gevoel button:hover,.ddme-knoppen button:hover{border-color:var(--royal-40);}
.ddme-gevoel button.aan,.ddme-knoppen button.aan{background:var(--royal);border-color:var(--royal);color:#fff;}

/* Rijen als kaarten */
.ddme-rijen{display:flex;flex-direction:column;gap:10px;}
.ddme-rij{background:#fff;border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.ddme-rij:focus-within{border-color:var(--royal-40);}
.ddme-rij-kop{display:flex;align-items:center;gap:8px;}
.ddme-rij-kop strong{flex:1;min-width:0;font:900 italic 14.5px 'Montserrat',sans-serif;color:var(--royal);overflow-wrap:anywhere;}
.ddme-rij .ddme-veld{border:none;padding:0;box-shadow:none;}
.ddme-weg{background:none;border:1.5px solid transparent;font:700 11.5px 'Montserrat',sans-serif;color:var(--muted);cursor:pointer;padding:5px 9px;border-radius:var(--kader-xs);}
.ddme-weg:hover{background:var(--danger-bg);color:var(--danger);}
.ddme-vink{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;cursor:pointer;}
.ddme-vink input{accent-color:var(--royal);width:17px;height:17px;}
.ddme-schuif label{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--royal);margin-bottom:4px;}
.ddme-schuif-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,2fr) minmax(0,1fr);align-items:center;gap:10px;}
.ddme-schuif-rij span{font-size:11.5px;color:var(--muted);line-height:1.3;}
.ddme-schuif-rij span:last-child{text-align:right;}
.ddme-schuif input[type=range]{width:100%;accent-color:var(--royal);}
.ddme-rijbij{align-self:flex-start;background:none;border:1.5px dashed var(--royal-40);border-radius:var(--kader-sm);padding:10px 16px;font:700 12.5px 'Montserrat',sans-serif;color:var(--royal);cursor:pointer;}
.ddme-rijbij:hover{background:var(--royal-wash);}

@media (max-width:1000px){
  .dd-mo{padding:0;}
  .dd-mo-paneel{border-radius:0;}
  .dd-mo-lijf{display:block;overflow:auto;}
  .dd-mo-links{border-right:none;border-bottom:1.5px solid var(--border);padding:16px;overflow:visible;}
  .dd-mo-plakker{position:static;}
  .dd-mo-rechts{overflow:visible;padding:16px;}
  .dd-mo-kop{padding:14px 16px;gap:12px;}
  .dd-mo-titel h2{font-size:19px;}
}
@media (max-width:560px){
  .dd-mo-kop{flex-direction:column;}
  .dd-mo-acties{flex-direction:row;align-items:center;width:100%;flex-wrap:wrap;}
  .dd-mo-acties .btn-blue{margin-left:auto;}
  .dd-mo-titel p{font-size:12px;}
}

/* Notities */
.dd-notities{position:sticky;top:12px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:14px;max-height:calc(100vh - 40px);overflow:auto;}
.dd-notities-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dd-notities-kop h3{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:6px;}
.dd-inklap{background:none;border:none;font:700 11px 'Montserrat',sans-serif;color:var(--royal);cursor:pointer;padding:4px 6px;}
.dd-zonder-notities .dd-notities-lijf,.dd-zonder-notities .dd-notities-kop h3{display:none;}
.dd-zonder-notities .dd-notities{padding:10px;}
.dd-intern{font-size:11px;color:var(--muted);margin:6px 0 10px;}
.dd-notitie-nieuw{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.dd-notitie-nieuw textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--kader-xs);font:500 12.5px/1.5 'Montserrat',sans-serif;padding:8px 10px;resize:vertical;outline:none;}
.dd-notitie-nieuw textarea:focus{border-color:var(--royal);}
.dd-notitie-nieuw .btn-blue{align-self:flex-start;}
.dd-notitie-bij{font-size:11px;color:var(--muted);background:var(--royal-wash);padding:5px 8px;border-radius:var(--kader-xs);display:flex;gap:6px;align-items:flex-start;}
.dd-notitie-bij b{color:var(--royal);flex:1;}
.dd-notitie-bij button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;}
.dd-notitielijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.dd-notitielijst li{background:var(--off);border-radius:var(--kader-xs);padding:9px 10px;font-size:12px;line-height:1.5;}
.dd-notitielijst li.dd-notitie-hier{background:var(--royal-wash);}
.dd-notitie-meta{display:flex;gap:6px;align-items:center;font-size:10.5px;color:var(--muted);margin-bottom:3px;}
.dd-notitie-meta b{color:var(--black);}
.dd-notitie-meta button{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;}
.dd-notitie-vraag{display:block;background:none;border:none;padding:0;margin-bottom:3px;font:700 11px/1.35 'Montserrat',sans-serif;color:var(--royal);text-align:left;cursor:pointer;}
.dd-notitielijst p{margin:0;}

@media (max-width:1180px){
  .dd-werk,.dd-werk.dd-zonder-notities{grid-template-columns:220px minmax(0,1fr);}
  .dd-notities{grid-column:1/-1;position:static;max-height:none;}
}
@media (max-width:760px){
  .dd-werk,.dd-werk.dd-zonder-notities{grid-template-columns:minmax(0,1fr);}
  .dd-fasen{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;padding:8px;}
  .dd-fasen-kop,.dd-vraaglijst,.dd-meter-dun{display:none;}
  .dd-fase{flex:0 0 auto;margin:0;}
  .dd-fase-knop{padding:7px 10px;}
  .dd-fase-tekst small{display:none;}
  .dd-kop{padding:18px;}
  .dd-kop-naam{font-size:22px;}
  .dd-kop-status{align-items:flex-start;}
  .dd-kop-status small{text-align:left;}
  .dd-veld{padding:14px 12px 10px;}
  .dd-veld-kop{flex-wrap:wrap;}
  .dd-veld-opslag{order:3;width:100%;padding-left:0;}
  .dd-veld:not(.dd-veld-samen) > .dd-schrijf,.dd-veld:not(.dd-veld-samen) > .dd-veld-voet,.dd-veld:not(.dd-veld-samen) > .dd-model,.dd-veld:not(.dd-veld-samen) > .dd-validatie{margin-left:0;}
  .dd-veld-menu{margin-left:0;}
  .dd-titel{font-size:26px;}
}

/* ═══ DEEP DIVE: RAPPORT VOOR DE KLANT ══════════════════════════════
   Volgens merk.inframeagency.nl. Cover in het kleurverloop met het
   Kader-patroon, tekst op de donkere kant. Titels Black Italic met
   punt, hoofdstuknummer in Vivid Cyan. Geen tinten voor tekst, geen
   geel op wit, lijniconen op 1,8. */
#pp-deepdive.ptab-page{max-width:none!important;}
#pp-deepdive.ptab-page.active{display:block;}
.ddk{--ddk-max:880px;--ddk-rand:32px;margin:-1.75rem -2rem -3rem;color:var(--charcoal);background:#fff;}
.ddk-kopje{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);}
.ddk-onder{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.085em;text-underline-offset:.14em;text-decoration-skip-ink:none;}

/* Cover */
.ddk-cover{position:relative;overflow:hidden;min-height:max(560px,78vh);display:flex;align-items:flex-end;
  background:linear-gradient(45deg,#103590 0%,#0A63B4 55%,#00AEEF 100%);color:#fff;}
.ddk-kader{position:absolute;pointer-events:none;user-select:none;}
.ddk-cover .ddk-kader{right:-9%;top:-14%;height:96%;width:auto;max-width:none;}
.ddk-cover-binnen{position:relative;z-index:1;width:100%;max-width:var(--ddk-max);margin:0 auto;padding:120px var(--ddk-rand) 56px;}
.ddk-cover h1{font-weight:900;font-style:italic;font-size:clamp(44px,8vw,96px);line-height:1;letter-spacing:-.02em;margin:18px 0 22px;max-width:840px;color:#fff;}
.ddk-cover-sub{font-weight:300;font-size:clamp(20px,2.6vw,28px);line-height:1.3;color:#fff;margin:0 0 34px;}
.ddk-cover-meta{display:flex;flex-wrap:wrap;gap:10px 40px;margin:0 0 36px;font-size:13px;color:#fff;}
.ddk-cover-meta div{display:flex;gap:12px;}
.ddk-cover-meta dt{font-weight:600;}
.ddk-cover-meta dd{margin:0;font-weight:400;}
.ddk-cover-acties{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.ddk-tagline{margin:56px 0 0;font-weight:800;font-style:italic;font-size:14px;color:#fff;}
.ddk-knop-geel,.ddk-knop-lijn,.ddk-knop-royal{display:inline-flex;align-items:center;gap:10px;border-radius:var(--kader-sm);font:800 14px 'Montserrat',sans-serif;cursor:pointer;padding:14px 22px;transition:transform .25s var(--soepel),box-shadow .25s var(--soepel),background .2s;}
.ddk-knop-geel svg,.ddk-knop-lijn svg,.ddk-knop-royal svg{width:18px;height:18px;}
.ddk-knop-geel{background:var(--yellow);color:var(--charcoal);border:none;}
.ddk-knop-geel:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22);}
.ddk-knop-lijn{background:none;color:#fff;border:1.5px solid #fff;}
.ddk-knop-lijn:hover{background:#fff;color:var(--royal);}
.ddk-knop-royal{background:var(--royal);color:#fff;border:none;padding:10px 18px;font-size:13px;}
.ddk-knop-royal:hover{background:var(--mid);}

/* Navigatie die meeloopt */
.ddk-nav{position:sticky;top:-1.75rem;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bone-lijn);}
.ddk-nav-binnen{display:flex;gap:2px;width:100%;max-width:var(--ddk-max);margin:0 auto;padding:10px calc(var(--ddk-rand) - 12px);overflow-x:auto;scrollbar-width:none;}
.ddk-nav-binnen::-webkit-scrollbar{display:none;}
.ddk-nav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--kader-xs);font-size:12.5px;font-weight:600;color:var(--charcoal);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s;}
.ddk-nav a b{font-weight:900;font-style:italic;color:var(--royal);}
.ddk-nav a:hover{background:var(--bone);}
.ddk-nav a.aan{background:var(--royal);color:#fff;}
.ddk-nav a.aan b{color:#fff;}
.ddk-nav-af{display:inline-flex;width:14px;height:14px;color:var(--success);}
.ddk-nav a.aan .ddk-nav-af{color:#fff;}
.ddk-nav-meter{height:3px;background:var(--bone);}
.ddk-nav-meter span{display:block;height:100%;width:0;background:var(--gradient-h);transition:width .15s linear;}

/* Lijf */
.ddk-lijf{max-width:var(--ddk-max);margin:0 auto;padding:0 var(--ddk-rand) 40px;}
.ddk-intro{padding:72px 0 8px;}
.ddk-aanloop{font-weight:300;font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:var(--charcoal);margin:0;}
.ddk-aanloop-klein{font-weight:300;font-size:18px;line-height:1.55;color:var(--charcoal);margin:6px 0 0;max-width:640px;}
.ddk-uitleg{margin:22px 0 0;padding-left:16px;border-left:3px solid var(--royal);font-size:14px;line-height:1.6;color:var(--charcoal);}
.ddk-hoofdkop h2,.ddk-hoofdstuk h2,.ddk-kies h2{font-weight:900;font-style:italic;color:var(--royal);font-size:clamp(32px,4.4vw,48px);line-height:1.05;letter-spacing:-.015em;margin:0;}

/* De kern */
.ddk-kern{padding:80px 0 10px;scroll-margin-top:70px;}
.ddk-hoofdkop{margin-bottom:28px;}
.ddk-uitgelicht{position:relative;display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;border:none;
  background:var(--royal);color:#fff;border-radius:var(--kader);padding:38px 40px 34px;overflow:hidden;transition:transform .35s var(--soepel),box-shadow .35s var(--soepel);}
.ddk-uitgelicht:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(16,53,144,.28);}
.ddk-uitgelicht-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);}
.ddk-ster{width:14px;height:14px;fill:var(--yellow);}
.ddk-uitgelicht strong{display:block;font-weight:900;font-style:italic;font-size:clamp(24px,3vw,32px);line-height:1.15;margin:14px 0 12px;max-width:640px;}
.ddk-uitgelicht p{font-size:16px;line-height:1.65;color:#fff;margin:0;max-width:640px;}
.ddk-lees{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;font-weight:800;}
.ddk-lees svg{width:16px;height:16px;transition:transform .25s var(--soepel);}
.ddk-uitgelicht:hover .ddk-lees svg,.ddk-inzicht:hover .ddk-lees svg{transform:translateX(4px);}
.ddk-inzichten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px;}
.ddk-inzicht{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;font-family:inherit;cursor:pointer;
  background:#fff;border:1.5px solid var(--bone-lijn);border-radius:var(--kader);padding:24px 24px 22px;transition:transform .35s var(--soepel),box-shadow .35s var(--soepel),border-color .2s;transition-delay:var(--vertraging,0ms);}
.ddk-inzicht:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,53,144,.12);border-color:var(--royal);}
.ddk-inzicht-nr{font-weight:900;font-style:italic;font-size:30px;line-height:1;color:var(--cyan);}
.ddk-inzicht small{font-size:11.5px;font-weight:600;color:var(--royal);}
.ddk-inzicht strong{font-size:16px;font-weight:800;line-height:1.35;color:var(--charcoal);}
.ddk-inzicht p{font-size:14px;line-height:1.6;color:var(--charcoal);margin:0;}
.ddk-inzicht .ddk-lees{margin-top:auto;padding-top:8px;color:var(--royal);}

/* Fasen */
.ddk-fase{padding-top:96px;scroll-margin-top:60px;}
.ddk-hoofdstuk{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding-bottom:26px;margin-bottom:34px;border-bottom:2px solid var(--royal);}
.ddk-hoofdstuk-nr{font-weight:900;font-style:italic;font-size:clamp(56px,8vw,92px);line-height:.82;color:var(--cyan);letter-spacing:-.03em;}
.ddk-samen{background:var(--bone);border-left:6px solid var(--royal);padding:28px 32px 24px;margin-bottom:24px;}
.ddk-samen-titel{font-size:16px;font-weight:800;color:var(--royal);margin:0 0 16px;}
.ddk-samen-delen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px 32px;}
.ddk-samen-deel{scroll-margin-top:80px;}
.ddk-samen-deel h5{font-size:14px;font-weight:600;color:var(--royal);margin:0 0 8px;}
.ddk-vraag{padding:34px 0;border-bottom:1px solid var(--bone-lijn);scroll-margin-top:70px;}
.ddk-vraag:last-child{border-bottom:none;}
.ddk-vraag-kop{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:baseline;margin-bottom:12px;}
.ddk-vraag-nr{font-weight:900;font-style:italic;font-size:17px;color:var(--cyan);}
.ddk-vraag h3{font-size:clamp(19px,2.3vw,23px);font-weight:800;color:var(--royal);line-height:1.3;margin:0;}
.ddk-keylabel{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px 52px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--royal);padding:5px 11px;border-radius:var(--kader-xs);}
.ddk-tekst{font-size:16px;line-height:1.75;color:var(--charcoal);max-width:66ch;}
.ddk-vraag > .ddk-tekst,.ddk-vraag > .ddm,.ddk-vraag > .ddk-val,.ddk-vraag > .ddk-val-vast{margin-left:52px;}
.ddk-tekst p{margin:0 0 14px;}
.ddk-tekst p:last-child{margin-bottom:0;}
.ddk-tekst h4{font-size:16px;font-weight:800;color:var(--royal);margin:20px 0 6px;}
.ddk-tekst ul{margin:0 0 14px 20px;padding:0;}
.ddk-tekst li{margin-bottom:6px;}
.ddk-tekst strong{font-weight:700;}

/* Herken je je hierin? */
.ddk-val{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding:14px 16px;border:1.5px solid var(--bone-lijn);border-radius:var(--kader-sm);}
.ddk-val-klein{margin-top:16px;background:#fff;}
.ddk-val-vraag{font-size:13px;font-weight:600;color:var(--charcoal);}
.ddk-val-knoppen{display:flex;gap:8px;}
.ddk-val-knoppen button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--royal);background:#fff;color:var(--royal);border-radius:var(--kader-xs);padding:7px 13px;font:700 12.5px 'Montserrat',sans-serif;cursor:pointer;transition:background .2s,color .2s;}
.ddk-val-knoppen button svg{width:17px;height:17px;}
.ddk-val-knoppen button:hover{background:var(--royal-wash);}
.ddk-val-knoppen button.aan{background:var(--royal);color:#fff;}
.ddk-val-toel{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;width:100%;}
.ddk-val-toel textarea{flex:1 1 280px;border:1.5px solid var(--bone-lijn);border-radius:var(--kader-xs);font:400 14px/1.55 'Montserrat',sans-serif;padding:10px 12px;resize:vertical;outline:none;background:#fff;color:var(--charcoal);}
.ddk-val-toel textarea:focus{border-color:var(--royal);}
.ddk-val-ok{font-size:12.5px;font-weight:600;color:var(--success);align-self:center;}
.ddk-val-vast{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;background:var(--bone);border-radius:var(--kader-sm);font-size:14px;line-height:1.55;}
.ddk-val-icoon{display:inline-flex;width:20px;height:20px;color:var(--royal);flex-shrink:0;}
.ddk-val-vast p{margin:0;}

/* Laten we praten */
.ddk-slot{position:relative;overflow:hidden;background:linear-gradient(45deg,#103590 0%,#0A63B4 55%,#00AEEF 100%);color:#fff;margin-top:80px;}
.ddk-slot .ddk-kader{right:-12%;top:-18%;height:92%;width:auto;max-width:none;}
.ddk-slot-binnen{position:relative;z-index:1;max-width:var(--ddk-max);margin:0 auto;padding:96px var(--ddk-rand) 88px;}
.ddk-slot h2{font-weight:900;font-style:italic;font-size:clamp(40px,6.4vw,76px);line-height:1;letter-spacing:-.02em;margin:14px 0 20px;color:#fff;}
.ddk-slot-sub{font-weight:300;font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:#fff;max-width:600px;margin:0 0 40px;}
.ddk-plaatjes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-bottom:44px;max-width:760px;}
.ddk-plaatje{display:flex;align-items:center;gap:18px;min-width:0;}
.ddk-portret{flex:0 0 84px;width:84px;height:84px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.18);border:2px solid #fff;}
.ddk-portret img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;}
.ddk-plaatje-tekst{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ddk-plaatje strong{font-weight:900;font-style:italic;font-size:21px;line-height:1.15;}
.ddk-plaatje-tekst > span{font-size:13.5px;margin-bottom:6px;}
.ddk-plaatje a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff;text-decoration:none;overflow-wrap:anywhere;}
.ddk-plaatje a svg{width:16px;height:16px;}
.ddk-plaatje a:hover{text-decoration:underline;}

/* Inkomen */
.ddk-in{opacity:0;transform:translateY(22px);transition:opacity .9s var(--soepel),transform .9s var(--soepel);}
.ddk-in.ddk-zichtbaar{opacity:1;transform:none;}
.ddk-inzicht.ddk-in.ddk-zichtbaar{transition:opacity .9s var(--soepel) var(--vertraging,0ms),transform .9s var(--soepel) var(--vertraging,0ms),box-shadow .35s var(--soepel),border-color .2s;}
.ddk-cover-binnen > *{animation:ddkOp .9s var(--soepel) both;}
.ddk-cover-binnen > :nth-child(2){animation-delay:.08s;} .ddk-cover-binnen > :nth-child(3){animation-delay:.16s;}
.ddk-cover-binnen > :nth-child(4){animation-delay:.24s;} .ddk-cover-binnen > :nth-child(5){animation-delay:.32s;}
.ddk-cover .ddk-kader{animation:ddkKader 1.6s var(--soepel) both;}
@keyframes ddkOp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes ddkKader{from{opacity:0;transform:translate(30px,-20px) scale(1.04);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .ddk-in{opacity:1;transform:none;transition:none;}
  .ddk-cover-binnen > *,.ddk-cover .ddk-kader{animation:none;}
  .ddk-uitgelicht,.ddk-inzicht,.ddk-knop-geel{transition:none;}
}

/* Overig */
.ddk-leeg{padding:3rem 1rem;text-align:center;color:var(--charcoal);font-size:14px;}
.ddk-laden{display:flex;align-items:center;justify-content:center;gap:12px;padding:5rem 1rem;color:var(--charcoal);font-size:14px;}
.ddk-laden span{width:18px;height:18px;border:2px solid var(--bone-lijn);border-top-color:var(--royal);border-radius:50%;animation:ddkDraai .8s linear infinite;}
@keyframes ddkDraai{to{transform:rotate(360deg);}}
.ddk-terug{display:block;margin:24px auto 0;background:none;border:1.5px solid var(--royal);color:var(--royal);border-radius:var(--kader-xs);padding:9px 16px;font:700 13px 'Montserrat',sans-serif;cursor:pointer;}
.ddk-kies{max-width:var(--ddk-max);margin:0 auto;padding:24px 0;}
.ddk-kies-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:22px;}
.ddk-kies-kaart{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:180px;justify-content:flex-end;text-align:left;
  background:linear-gradient(45deg,#103590 0%,#0A63B4 55%,#00AEEF 100%);color:#fff;border:none;border-radius:var(--kader);padding:24px;cursor:pointer;font-family:inherit;transition:transform .3s var(--soepel);}
.ddk-kies-kaart .ddk-kader{right:-30%;top:-30%;height:130%;width:auto;}
.ddk-kies-kaart > :not(.ddk-kader){position:relative;}
.ddk-kies-kaart:hover{transform:translateY(-3px);}
.ddk-kies-kaart strong{font-size:24px;font-weight:900;font-style:italic;}
.ddk-kies-kaart small{font-size:13px;}
.ddk-overlay{position:fixed;inset:0;z-index:400;background:#fff;display:none;flex-direction:column;}
.ddk-overlay.open{display:flex;}
.ddk-overlay-balk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:var(--charcoal);color:#fff;font-size:12.5px;font-weight:600;}
.ddk-overlay-lijf{flex:1;overflow:auto;}
.ddk-overlay .ddk{margin:0;}
.ddk-overlay .ddk-nav{top:0;}
@media (max-width:640px){
  .ddk{margin:-1rem -1rem -4rem;--ddk-rand:20px;}
  .ddk-nav{top:-1rem;}
  .ddk-cover{min-height:max(520px,86vh);}
  .ddk-cover .ddk-kader{right:-38%;top:-6%;height:62%;}
  .ddk-cover-binnen{padding:90px var(--ddk-rand) 36px;}
  .ddk-cover-meta{gap:6px 24px;}
  .ddk-tagline{margin-top:36px;}
  .ddk-nav-binnen{padding:8px 8px;}
  .ddk-lijf{padding:0 var(--ddk-rand) 30px;}
  .ddk-intro{padding-top:48px;}
  .ddk-kern{padding-top:56px;}
  .ddk-uitgelicht{padding:28px 24px 26px;}
  .ddk-fase{padding-top:64px;}
  .ddk-hoofdstuk{grid-template-columns:1fr;gap:6px;}
  .ddk-samen{padding:22px 20px 18px;}
  .ddk-vraag-kop{grid-template-columns:1fr;gap:2px;}
  .ddk-vraag > .ddk-tekst,.ddk-vraag > .ddm,.ddk-vraag > .ddk-val,.ddk-vraag > .ddk-val-vast{margin-left:0;}
  .ddk-keylabel{margin-left:0;}
  .ddk-tekst{font-size:15.5px;}
  .ddk-slot-binnen{padding:64px var(--ddk-rand) 60px;}
  .ddk-plaatjes{grid-template-columns:1fr;gap:22px;}
  .ddk-portret{flex-basis:68px;width:68px;height:68px;}
  .ddk-plaatje strong{font-size:18px;}
  .ddk-plaatje a{font-size:13px;}
  .ddk-slot .ddk-kader{right:-45%;top:-4%;height:42%;}
}

/* ═══ DEEP DIVE IN TWEE DELEN: DE KENNISMAKING ══════════════════════ */
.dd-opzet{border:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:8px;}
.dd-opzet legend{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;padding:0;}
.dd-inst .dd-keuze{margin-bottom:8px;}
.dd-kaart-deel{font-size:11.5px;font-weight:700;color:var(--royal);}
.dd-delen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px;}
.dd-delen button{display:flex;align-items:center;gap:12px;text-align:left;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:12px 16px;cursor:pointer;font-family:inherit;color:var(--black);transition:border-color .15s,background .15s;}
.dd-delen button:hover{border-color:var(--royal-40);}
.dd-delen button.aan{border-color:var(--royal);background:var(--royal-wash);}
.dd-delen b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--white);border:1.5px solid var(--royal);color:var(--royal);font:900 italic 14px 'Montserrat',sans-serif;flex-shrink:0;}
.dd-delen .aan b{background:var(--royal);color:#fff;}
.dd-delen span{display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:800;}
.dd-delen small{font-size:11.5px;font-weight:500;color:var(--muted);}

.km{display:flex;flex-direction:column;gap:14px;}
.km-balk{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:20px 22px;}
.km-balk-tekst{flex:1;min-width:280px;}
.km-balk h2{font:900 italic 26px/1.15 'Montserrat',sans-serif;color:var(--royal);margin:4px 0 6px;}
.km-balk p{font-size:13px;line-height:1.55;color:var(--black);max-width:620px;margin:0;}
.km-stand{display:flex;align-items:center;gap:12px;margin-top:12px;max-width:420px;}
.km-stand .dd-meter{flex:1;margin:0;}
.km-stand span{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;}
.km-al{font-size:12.5px;line-height:1.5;color:var(--success);background:var(--success-bg);border-radius:var(--kader-sm);padding:8px 12px;margin:12px 0 0 !important;}
.km-balk-acties{display:flex;flex-direction:column;gap:8px;min-width:220px;}
.km-balk-acties button{justify-content:center;}
.km-balk-acties small{font-size:11.5px;color:var(--muted);line-height:1.45;max-width:240px;}

.km-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:22px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader);padding:20px 22px;scroll-margin-top:20px;}
.km-blok:focus-within{border-color:var(--royal-40);box-shadow:0 6px 20px rgba(16,53,144,.07);}
.km-dianr{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}
.km-blok h3{font:900 italic 20px/1.2 'Montserrat',sans-serif;color:var(--royal);margin:2px 0 4px;}
.km-blok-uitleg{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0 0 12px;}
.km-velden{display:flex;flex-direction:column;gap:12px;}
.km-kansen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;}
.km-veld{position:relative;display:flex;flex-direction:column;gap:5px;}
.km-veld > label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--royal);}
.km-veld textarea,.km-veld input{width:100%;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:#fff;font:500 13.5px/1.55 'Montserrat',sans-serif;padding:9px 11px;outline:none;color:var(--black);resize:none;}
.km-veld textarea{min-height:46px;overflow:hidden;padding-bottom:20px;}
.km-veld input[type=number]{max-width:160px;}
.km-veld input[type=date]{max-width:220px;}
.km-veld textarea:focus,.km-veld input:focus{border-color:var(--royal);}
.km-veld-kop input{font-weight:800;}
.km-teller{position:absolute;right:9px;bottom:6px;font-size:10px;color:var(--muted);pointer-events:none;}
.km-veld input[type=text] + .km-teller{bottom:12px;}
.km-blok-dia{position:sticky;top:12px;align-self:start;min-width:0;}
.km-blok-velden{min-width:0;}
.km-mini{display:block;width:100%;padding:0;border:1.5px solid var(--bone-lijn);border-radius:var(--kader-sm);overflow:hidden;background:var(--off);cursor:zoom-in;aspect-ratio:16/9;}
.km-mini:hover{border-color:var(--royal-40);}
.km-mini .km-schaal{width:1280px;height:720px;transform-origin:0 0;transform:scale(.34);}
.km-past{font-size:12px;font-weight:700;color:var(--warning);background:var(--warning-bg);border-radius:var(--kader-xs);padding:7px 10px;margin:8px 0 0;}
.km-dia-laden{display:grid;place-items:center;width:1280px;height:720px;font-size:28px;color:var(--muted);}
.km-verder{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--royal);color:#fff;border-radius:var(--kader);padding:18px 22px;}
.km-verder > div{flex:1;min-width:240px;display:flex;flex-direction:column;gap:4px;}
.km-verder strong{font:900 italic 18px 'Montserrat',sans-serif;}
.km-verder span{font-size:13px;line-height:1.5;}
.km-verder .btn-blue{background:var(--yellow);color:var(--charcoal);border-color:var(--yellow);}
.km-mist{margin:6px 0 4px 18px;font-size:13px;line-height:1.7;}
.km-voortgang{font-size:12.5px;font-weight:700;color:var(--royal);min-height:1.2em;margin:4px 0 0;}

/* De dia zelf: 1280 bij 720, net als het sjabloon */
.km-dia{position:relative;width:1280px;height:720px;overflow:hidden;font-family:'Montserrat',sans-serif;}
.km-dia .km-pic{position:absolute;display:block;object-fit:fill;max-width:none;}
.km-dia .km-vorm{position:absolute;box-sizing:border-box;}
.km-dia .km-tekst{display:flex;flex-direction:column;overflow:visible;overflow-wrap:break-word;}
.km-dia .km-tekst p{margin:0;white-space:pre-wrap;}
.km-render{position:fixed;left:-20000px;top:0;width:1280px;height:720px;pointer-events:none;}

/* Bekijken */
.km-kijk{position:fixed;inset:0;z-index:1300;background:#0d1426;display:none;flex-direction:column;color:#fff;}
.km-kijk.open{display:flex;}
.km-kijk-laden{margin:auto;font-size:14px;display:flex;gap:12px;align-items:center;}
.km-kijk-kop{display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.12);}
.km-kijk-kop strong{font:900 italic 16px 'Montserrat',sans-serif;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.km-kijk-kop > span{font-size:12px;opacity:.85;}
.km-kijk-knop{background:var(--yellow);color:var(--charcoal);border:none;border-radius:var(--kader-sm);padding:8px 14px;font:800 12.5px 'Montserrat',sans-serif;cursor:pointer;}
.km-kijk-dicht{background:none;border:none;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:0 6px;}
.km-kijk-podium{flex:1;min-height:0;display:grid;place-items:center;cursor:pointer;}
.km-kijk-podium > .km-schaal{transform-origin:0 0;width:1280px;height:720px;}
.km-kijk-podium{--km-b:1280px;--km-h:720px;}
.km-kijk-podium > .km-schaal{margin-right:calc(var(--km-b) - 1280px);margin-bottom:calc(var(--km-h) - 720px);box-shadow:0 20px 60px rgba(0,0,0,.45);}
.km-kijk-strook{display:flex;gap:8px;overflow-x:auto;padding:10px 18px 14px;border-top:1px solid rgba(255,255,255,.12);}
.km-kijk-strook button{flex:0 0 auto;width:128px;aspect-ratio:16/9;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:#000;position:relative;}
.km-kijk-strook button.aan{border-color:var(--yellow);}
.km-kijk-strook .km-schaal{width:1280px;height:720px;transform:scale(.1);transform-origin:0 0;pointer-events:none;}
.km-kijk-strook button > span{position:absolute;right:4px;bottom:2px;font:800 10px 'Montserrat',sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);}

@media (max-width:900px){
  .km-blok{grid-template-columns:1fr;}
  .km-blok-dia{position:static;order:-1;}
  .km-kansen{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .dd-delen{grid-template-columns:1fr;}
  .km-balk,.km-blok{padding:16px 14px;}
  .km-balk-acties{width:100%;}
  .km-kijk-strook{display:none;}
}

/* ════════════════════════════════════════════════════════════
   STARTPAGINA (3.49.0)
   Drie lagen: Nu doen, Vandaag en deze week, Bureau in cijfers.
   Op maandag het weekoverleg en op vrijdag de weekafsluiting als
   blauw vlak erboven. Getekend door js/startpagina.js.
   ════════════════════════════════════════════════════════════ */
#startpagina-body{display:flex;flex-direction:column;gap:26px;min-width:0;}

/* Kop */
.sp-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.sp-kop-tekst{min-width:0;flex:1 1 320px;}
.sp-eyebrow{font-size:12px;font-weight:300;color:var(--charcoal);letter-spacing:.01em;margin-bottom:6px;}
.sp-titel{font-size:32px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.03em;line-height:1.05;}
.sp-zin{font-size:14px;color:var(--charcoal);margin-top:8px;max-width:640px;}
.sp-modi{display:flex;gap:4px;background:var(--bone-vlak);border-radius:var(--kader-sm);padding:3px;flex-shrink:0;}
.sp-modus-knop{
  padding:8px 16px;font-size:12px;font-weight:700;font-family:inherit;border:none;
  border-radius:var(--kader-xs);background:none;color:var(--charcoal);cursor:pointer;transition:background .14s,color .14s;
}
.sp-modus-knop:hover{color:var(--royal);}
.sp-modus-knop.aan{background:var(--royal);color:#fff;}

/* Lagen */
.sp-laag{min-width:0;}
.sp-laag-kop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.sp-laag-titel{font-size:19px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.02em;line-height:1.15;}
.sp-laag-uitleg{font-size:12.5px;font-weight:300;}
.sp-telling{font-size:11px;font-weight:700;color:var(--charcoal);background:var(--bone-vlak);padding:2px 9px;border-radius:var(--kader-xs);}
.sp-kop-rechts{margin-left:auto;}
.sp-link{
  background:none;border:none;padding:4px 0;font-family:inherit;font-size:12px;font-weight:600;
  color:var(--royal);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--royal-40);
}
.sp-link:hover{text-decoration-color:var(--royal);}
.sp-leeg{font-size:12.5px;color:var(--muted);line-height:1.6;}

/* Knoppen */
.sp-knop{
  padding:7px 12px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;
  background:var(--white);color:var(--charcoal);border:1.5px solid var(--border);border-radius:var(--kader-xs);
  cursor:pointer;transition:border-color .14s,color .14s,background .14s;
}
.sp-knop:hover{border-color:var(--royal);color:var(--royal);}
.sp-knop-hoofd{background:var(--royal);border-color:var(--royal);color:#fff;font-weight:700;}
.sp-knop-hoofd:hover{background:var(--mid);border-color:var(--mid);color:#fff;}
.sp-knop-stil{border-color:transparent;background:none;color:var(--muted);}
.sp-knop-stil:hover{border-color:var(--border);color:var(--charcoal);}
.sp-knop:focus-visible,.sp-link:focus-visible,.sp-modus-knop:focus-visible,.sp-tegel:focus-visible,.sp-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

/* ── Laag 1: Nu doen ───────────────────────────────────────── */
.sp-punten{list-style:none;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.sp-punt{
  display:grid;grid-template-columns:108px minmax(0,1fr) auto auto;align-items:center;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--border);position:relative;
}
.sp-punt:last-child{border-bottom:none;}
.sp-punt-later{background:var(--bone);}
.sp-punt-later .sp-punt-titel{color:var(--muted);}
.sp-soort{
  justify-self:start;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 8px;border-radius:var(--kader-xs);white-space:nowrap;
}
.sp-klant .sp-soort{background:var(--royal);color:#fff;}
.sp-geld .sp-soort{background:var(--warning-bg);color:var(--warning);}
.sp-deadline .sp-soort{background:var(--danger-bg);color:var(--danger);}
.sp-taak .sp-soort{background:var(--bone-vlak);color:var(--charcoal);}
.sp-team .sp-soort{background:var(--cyan-20);color:var(--charcoal);}
.sp-draaidag .sp-soort{background:var(--royal-wash);color:var(--royal);}
.sp-klant::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--royal);}
.sp-punt-tekst{min-width:0;}
.sp-punt-titel{font-size:13.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere;}
.sp-punt-sub{font-size:11.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere;}
.sp-wacht{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:80px;text-align:right;}
.sp-punt-acties{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;}
.sp-meer{
  display:block;width:100%;margin-top:8px;padding:10px;font-family:inherit;font-size:12px;font-weight:700;
  background:none;border:1.5px dashed var(--border);border-radius:var(--kader-sm);color:var(--royal);cursor:pointer;
}
.sp-meer:hover{border-color:var(--royal);}
.sp-leeg-groot{
  background:var(--white);border:1px solid var(--border);border-left:3px solid var(--success);
  border-radius:var(--kader);padding:20px 22px;display:flex;flex-direction:column;gap:4px;
}
.sp-leeg-groot strong{font-size:14px;}
.sp-leeg-groot span{font-size:12.5px;color:var(--muted);}

/* ── Laag 2: Vandaag en deze week ──────────────────────────── */
.sp-duo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-bottom:14px;}
.sp-vandaag{display:flex;flex-direction:column;}
.sp-vandaag .sp-kaart-voet{margin-top:auto;}
.sp-vandaag .sp-haalbaar{margin-bottom:14px;}
.sp-kaart{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:18px 20px;min-width:0;}
.sp-kaart-kop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.sp-kaart-kop h4{font-size:14px;font-weight:700;}
.sp-kaart-sub{font-size:11.5px;color:var(--muted);}
.sp-kaart-voet{border-top:1px solid var(--border);margin-top:14px;padding-top:10px;display:flex;justify-content:flex-end;}

.sp-tijdlijn{list-style:none;display:flex;flex-direction:column;}
.sp-blok{display:flex;gap:12px;padding:9px 0;border-bottom:1px dotted var(--border);}
.sp-blok:last-child{border-bottom:none;}
.sp-blok-tijd{font-size:12px;font-weight:700;color:var(--royal);font-variant-numeric:tabular-nums;width:44px;flex-shrink:0;line-height:1.3;}
.sp-blok-tijd em{display:block;font-style:normal;font-weight:500;font-size:10.5px;color:var(--muted);}
.sp-blok-tekst{min-width:0;flex:1;}
.sp-blok-titel{font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;}
.sp-blok-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.sp-blok-sub strong{color:var(--royal);}
.sp-blok-nu{background:var(--royal-wash);margin:0 -10px;padding:9px 10px;border-radius:var(--kader-xs);border-bottom-color:transparent;}
.sp-blok-voorbij{opacity:.55;}
.sp-haalbaar{font-size:12px;line-height:1.55;margin-top:12px;padding:10px 12px;border-radius:var(--kader-xs);background:var(--bone);}
.sp-haalbaar-vol{background:var(--warning-bg);color:var(--warning);}

.sp-eigen-leeg{margin-top:10px;}
.sp-eigen-invoer{display:flex;gap:6px;}
.sp-eigen-invoer input{
  flex:1;min-width:0;padding:8px 11px;font-family:inherit;font-size:12.5px;
  border:1.5px solid var(--border);border-radius:var(--kader-xs);outline:none;background:var(--white);
}
.sp-eigen-invoer input:focus{border-color:var(--royal);}
.sp-eigen-lijst{list-style:none;margin-top:8px;display:flex;flex-direction:column;}
.sp-eigen-lijst li{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px;border-bottom:1px dotted var(--border);}
.sp-eigen-lijst li:last-child{border-bottom:none;}
.sp-eigen-lijst span{flex:1;min-width:0;overflow-wrap:anywhere;}
.sp-eigen-lijst em{font-style:normal;font-size:10px;font-weight:600;color:var(--muted);}
.sp-vink{
  width:18px;height:18px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--bone-rand);
  background:var(--white);cursor:pointer;padding:0;
}
.sp-vink:hover{border-color:var(--royal);background:var(--royal-wash);}

.sp-dagen{display:grid;grid-template-columns:repeat(var(--sp-dagen,5),minmax(0,1fr));gap:8px;}
.sp-dag{background:var(--bone);border:1.5px solid transparent;border-radius:var(--kader-sm);padding:10px;min-width:0;}
.sp-dag-nu{background:var(--white);border-color:var(--royal);}
.sp-dag-voorbij{opacity:.6;}
.sp-dag-kop{display:flex;align-items:baseline;gap:5px;}
.sp-dag-naam{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.sp-dag-nr{font-size:17px;font-weight:800;line-height:1;}
.sp-dag-nu .sp-dag-nr{color:var(--royal);}
.sp-dag-uren{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.sp-dag-balk{height:3px;background:var(--bone-lijn);border-radius:2px;margin:8px 0;overflow:hidden;}
.sp-dag-balk i{display:block;height:100%;background:var(--royal);}
.sp-dag-inhoud{display:flex;flex-direction:column;gap:5px;}
.sp-chip{
  display:block;width:100%;text-align:left;font-family:inherit;font-size:11px;font-weight:600;line-height:1.3;
  padding:4px 7px;border-radius:var(--kader-xs);border:none;cursor:pointer;
  background:var(--royal-wash);color:var(--royal);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.sp-chip:hover{background:var(--royal-20);}
.sp-chip-fase{background:var(--bone-vlak);color:var(--charcoal);}
.sp-chip-offerte,.sp-chip-factuur{background:var(--warning-bg);color:var(--warning);}
.sp-chip-draaidag{background:var(--royal);color:#fff;}
.sp-draaidagen{margin-top:14px;}
.sp-dg-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;}
.sp-dg{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:4px;align-items:center;
  padding:10px 12px;background:var(--bone);border:1.5px solid transparent;border-radius:var(--kader-sm);font:inherit;text-align:left;color:var(--charcoal);cursor:pointer;transition:border-color .14s;}
.sp-dg:hover{border-color:var(--royal);}
.sp-dg-datum{grid-row:1 / span 2;width:44px;height:44px;border-radius:var(--kader-xs);background:var(--royal);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;}
.sp-dg-datum b{font-size:17px;font-weight:900;}
.sp-dg-datum span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.sp-dg-tekst{min-width:0;display:flex;flex-direction:column;}
.sp-dg-tekst strong{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-dg-tekst span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-dg-tel{grid-column:2;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--royal);}
.sp-dg-meer{margin-top:8px;}
.sp-chip-draaidag:hover{background:var(--mid);}
.sp-dag-blok{font-size:11px;line-height:1.35;color:var(--charcoal);min-width:0;}
.sp-dag-blok span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.sp-dag-blok b{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.sp-dag-meer{color:var(--muted);}
.sp-dag-afwezig{font-size:10.5px;font-weight:600;color:var(--muted);}
.sp-dag-leeg{font-size:11px;color:var(--bone-rand);}

/* ── Laag 3: Bureau in cijfers ─────────────────────────────── */
.sp-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.sp-tegel{
  display:flex;flex-direction:column;gap:4px;text-align:left;font-family:inherit;cursor:pointer;min-width:0;
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:16px 18px;
  transition:border-color .14s;
}
.sp-tegel:hover{border-color:var(--royal);}
.sp-tegel-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.sp-tegel-val{font-size:22px;font-weight:800;color:var(--royal);font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.01em;}
.sp-tegel-sub{font-size:11.5px;color:var(--muted);}
.sp-tegel-let .sp-tegel-val{color:var(--warning);}
.sp-bureau-dicht .sp-laag-kop{margin-bottom:0;}

/* ── Weekoverleg en weekafsluiting: het blauwe vlak ────────── */
.sp-modus{background:var(--gradient);border-radius:var(--kader);padding:22px 24px 24px;color:#fff;}
.sp-modus .sp-laag-titel{color:#fff;}
.sp-modus .sp-laag-titel{background-image:linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-size:100% 3px;background-position:0 100%;padding-bottom:3px;}
.sp-modus .sp-laag-uitleg{color:#fff;flex:1 1 260px;}
.sp-modus .sp-link{color:#fff;text-decoration-color:rgba(255,255,255,.5);}
.sp-modus .sp-link:hover{text-decoration-color:#fff;}
.sp-subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:6px;}
.sp-sub{background:var(--white);color:var(--charcoal);border-radius:var(--kader-sm);padding:16px 18px;min-width:0;}
.sp-sub h5{font-size:13px;font-weight:700;color:var(--royal);margin-bottom:10px;}
.sp-sub .sp-h5-los{margin-top:14px;}
.sp-sub .sp-knop{margin-top:10px;}
.sp-getal{font-size:12.5px;margin-bottom:8px;}
.sp-getal b{font-size:20px;font-weight:800;color:var(--royal);margin-right:3px;font-variant-numeric:tabular-nums;}
.sp-uitleg{font-size:12px;color:var(--muted);line-height:1.55;margin-top:6px;}
.sp-mini{list-style:none;display:flex;flex-direction:column;gap:7px;}
.sp-mini li{font-size:12.5px;line-height:1.4;display:flex;flex-wrap:wrap;column-gap:7px;}
.sp-mini a{color:var(--charcoal);font-weight:600;text-decoration:none;}
.sp-mini a:hover{color:var(--royal);text-decoration:underline;}
.sp-mini em{font-style:normal;font-size:11px;color:var(--muted);flex-basis:100%;}
.sp-datum{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;min-width:38px;font-variant-numeric:tabular-nums;}
.sp-rood{color:var(--danger) !important;}
.sp-bezetting{list-style:none;display:flex;flex-direction:column;gap:10px;}
.sp-bezet-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;}
.sp-bezet-top span{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.sp-bezet-baan{height:5px;background:var(--bone-vlak);border-radius:3px;overflow:hidden;margin-top:4px;}
.sp-bezet-baan i{display:block;height:100%;background:var(--royal);}
.sp-bezet-baan i.sp-goed{background:var(--success);}
.sp-bezet-baan i.sp-vol{background:var(--danger);}
.sp-bezet-sub{font-size:10.5px;color:var(--muted);margin-top:3px;}

/* ── Breedtes ──────────────────────────────────────────────── */
@media(max-width:834px){
  .sp-duo{grid-template-columns:minmax(0,1fr);}
}
/* Onder 1100 pixels worden de dagkolommen te smal voor projectnamen:
   dan wordt de week een lijst met per dag een rij. */
@media(max-width:1100px){
  .sp-dagen{grid-template-columns:minmax(0,1fr);gap:6px;}
  .sp-dag{display:grid;grid-template-columns:70px minmax(0,1fr);gap:4px 12px;padding:9px 12px;}
  .sp-dag-kop{flex-wrap:wrap;align-items:baseline;gap:0 5px;}
  .sp-dag-uren{margin-left:0;flex-basis:100%;}
  .sp-dag-balk{display:none;}
  .sp-dag-inhoud{align-self:center;flex-direction:row;flex-wrap:wrap;gap:5px 10px;}
  .sp-chip{width:auto;max-width:100%;}
  .sp-dag-blok{display:flex;gap:5px;max-width:100%;}
  .sp-dag-blok span{-webkit-line-clamp:1;}
}
@media(max-width:1024px){
  .sp-tegels{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sp-punt{grid-template-columns:96px minmax(0,1fr) auto;}
  .sp-punt-acties{grid-column:2 / -1;justify-content:flex-start;}
  .sp-wacht{min-width:0;}
}
@media(max-width:700px){
  #startpagina-body{gap:22px;}
  .sp-titel{font-size:26px;}
  .sp-modi{width:100%;}
  .sp-modus-knop{flex:1;}
  .sp-punt{grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:14px 16px;}
  .sp-punt-tekst{grid-column:1 / -1;grid-row:2;}
  .sp-wacht{justify-self:end;text-align:right;}
  .sp-wacht-leeg{display:none;}
  .sp-punt-acties{grid-column:1 / -1;}
  .sp-punt-acties .sp-knop{flex:1 1 auto;min-height:38px;}
  .sp-kaart{padding:16px;}
  .sp-modus{padding:18px 16px;}
}
@media(max-width:420px){
  .sp-tegels{gap:8px;}
  .sp-tegel{padding:12px 13px;}
  .sp-tegel-val{font-size:18px;}
  .sp-tegel-lbl{font-size:9px;}
}

/* ════════════════════════════════════════════════════════════
   WEBSITES TER BEOORDELING (3.51.0)
   Dezelfde viewer als de conceptpresentaties (.cv), met in het
   midden de echte site in een kader. js/website.js tekent hem.
   ════════════════════════════════════════════════════════════ */
.wv .cv-lijf{min-height:0;}
.wv-podium{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;}
.wv-balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px 6px;}
.wv-pagina{min-width:0;flex:0 1 340px;}
.wv-pagina select,.wv-versie select{
  width:100%;height:34px;padding:0 30px 0 12px;font:inherit;font-size:12px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1px solid rgba(255,255,255,.25);border-radius:0 8px 0 8px;appearance:none;-webkit-appearance:none;cursor:pointer;
}
.wv-pagina select option,.wv-versie select option{color:#1A1D23;background:#fff;}
.wv-versie select{width:auto;}
.wv-schakel{display:flex;background:rgba(255,255,255,.1);border-radius:0 8px 0 8px;padding:3px;flex-shrink:0;}
.wv-schakel button{border:none;background:none;font:inherit;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.8);padding:6px 12px;border-radius:0 6px 0 6px;cursor:pointer;white-space:nowrap;}
.wv-schakel button:hover{color:#fff;}
.wv-schakel button.aan{background:#fff;color:var(--royal);}
.wv-schakel button.aan.geel{background:#FFE600;color:#1A1D23;}
.wv-tab{margin-left:auto;font-size:12px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5);white-space:nowrap;}
.wv-uitleg{flex-basis:100%;font-size:12px;color:rgba(255,255,255,.8);margin:0;}
.wv-vak{position:relative;flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:10px 16px 14px;overflow:hidden;}
.wv-scherm{position:relative;flex-shrink:0;overflow:hidden;background:#fff;border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.wv-scherm iframe{display:block;border:0;background:#fff;transform-origin:0 0;}
.wv-telefoon{border-radius:22px;box-shadow:0 0 0 8px #081A4D,0 0 0 9px rgba(255,255,255,.2),0 24px 60px rgba(0,0,0,.45);margin-top:8px;}
.wv-melding{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:420px;width:calc(100% - 40px);
  background:#F7F5F2;color:var(--black);border-radius:0 16px 0 16px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;box-shadow:0 24px 60px rgba(0,0,0,.4);}
.wv-melding[hidden]{display:none;}
.wv-melding strong{font-size:15px;}
.wv-melding span{font-size:12.5px;color:var(--muted);line-height:1.55;}
.wv-paneelpagina{padding:10px 16px;background:#fff;border-bottom:1px solid var(--border);font-size:12.5px;font-weight:700;color:var(--royal);display:flex;flex-direction:column;gap:1px;}
.wv-paneelpagina span{font-size:10.5px;font-weight:500;color:var(--muted);overflow-wrap:anywhere;}
.wv-speldknop{border:none;background:none;padding:0;cursor:pointer;line-height:0;}
.df-website .df-c-status a{color:var(--royal);font-weight:700;}
@media (max-width:980px){
  .wv-balk{padding:10px 12px 4px;}
}
@media (max-width:600px){
  .wv-balk{gap:6px;}
  .wv-pagina{flex:1 1 100%;}
  .wv-tab{display:none;}
  .wv-schakel button{padding:6px 10px;font-size:11px;}
  .wv-modus{flex:1;}
  .wv-modus button{flex:1;}
  .wv-vak{padding:6px 4px 8px;}
  .wv-versie select{max-width:120px;}
}
@media (max-width:980px){
  /* In het onderpaneel moet alles bereikbaar blijven, ook het akkoord */
  .wv .cv-paneel{overflow-y:auto;}
  .wv .cv-reacties{flex:0 0 auto;max-height:none;}
}
@media (min-width:981px) and (max-width:1180px){
  .wv .cv-lijf{grid-template-columns:minmax(0,1fr) 320px;}
}

/* ════════════════════════════════════════════════════════════
   DRAAIDAGEN (3.52.0)
   De werkplek (Dag, Shotlist, Paklijst), de kaart op de
   projectpagina en de kaart in het klantportaal.
   js/draaidag.js tekent het.
   ════════════════════════════════════════════════════════════ */
.dg-chip{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  padding:4px 8px;border-radius:var(--kader-xs);white-space:nowrap;line-height:1.2;}
.dg-chip-concept{background:var(--bone-vlak);color:var(--charcoal);}
.dg-chip-gedeeld{background:var(--success-bg);color:var(--success);}
.dg-chip-planning{background:var(--royal-wash);color:var(--royal);}
.dg-chip-extern{background:var(--cyan-20);color:var(--charcoal);}

/* ── De werkplek ── */
.dgw{position:fixed;inset:0;z-index:1300;background:var(--off);color:var(--charcoal);display:grid;grid-template-rows:auto minmax(0,1fr);}
.dgw-kop{background:var(--royal);color:#fff;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:14px 24px 0;}
.dgw-terug{width:38px;height:38px;border-radius:var(--kader-sm);border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;}
.dgw-terug:hover{background:rgba(255,255,255,.12);}
.dgw-titel{min-width:0;}
.dgw-titel span{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dgw-titel h2{font-size:22px;font-weight:900;font-style:italic;letter-spacing:-.02em;line-height:1.2;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dgw-titel h2 em{font-style:normal;font-weight:300;font-size:15px;letter-spacing:0;margin-left:12px;opacity:.9;}
.dgw-kop-rechts{display:flex;align-items:center;gap:12px;}
.dgw-kop .dg-chip-concept{background:rgba(255,255,255,.16);color:#fff;}
.dgw-opslag{font-size:11px;font-weight:600;color:rgba(255,255,255,.75);opacity:0;transition:opacity .2s;}
.dgw-opslag.aan{opacity:1;}
.dgw-tabs{grid-column:1/-1;display:flex;gap:4px;margin-top:12px;overflow-x:auto;scrollbar-width:none;}
.dgw-tabs::-webkit-scrollbar{display:none;}
.dgw-tabs button{border:none;background:none;color:rgba(255,255,255,.75);font:inherit;font-size:13px;font-weight:700;
  padding:10px 16px 12px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;}
.dgw-tabs button:hover{color:#fff;}
.dgw-tabs button.aan{color:#fff;border-bottom-color:var(--yellow);}
.dgw-tabs em{font-style:normal;font-size:11px;font-weight:700;background:rgba(255,255,255,.16);padding:2px 7px;border-radius:9px;margin-left:6px;}
.dgw-lijf{overflow-y:auto;overflow-x:hidden;}
.dgw-binnen{max-width:1240px;margin:0 auto;padding:24px 24px 64px;}
.dgw button:focus-visible,.dgw input:focus-visible,.dgw select:focus-visible,.dgw textarea:focus-visible,.dgw label.dg-knop:focus-within{outline:2px solid var(--cyan);outline-offset:2px;}

/* Kaarten en velden */
.dg-raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start;}
.dg-kolom{display:flex;flex-direction:column;gap:16px;min-width:0;}
.dg-kaart{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:18px 20px;min-width:0;}
.dg-kaart h3{font-size:14px;font-weight:800;margin-bottom:12px;}
.dg-kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.dg-kaart-kop h3{margin-bottom:0;}
.dg-kaart-gedeeld{border-left:3px solid var(--success);}
.dg-kaart-intern{background:transparent;border-style:dashed;}
.dg-velden{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
.dg-veld{grid-column:span 2;display:flex;flex-direction:column;gap:5px;min-width:0;}
.dg-veld-half{grid-column:span 3;}
.dg-veld-breed{grid-column:1/-1;}
.dg-veld > span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.dg-veld input,.dg-veld textarea,.dg-prog input,.dg-crew input,.dg-crew-erbij input,.dg-crew-erbij select,.dg-zoek input{
  width:100%;min-width:0;font:inherit;font-size:13px;color:var(--charcoal);background:var(--white);
  border:1.5px solid var(--border);border-radius:var(--kader-xs);padding:0 11px;height:38px;outline:none;}
.dg-veld textarea{height:auto;padding:9px 11px;resize:vertical;line-height:1.5;}
.dg-veld input:focus,.dg-veld textarea:focus,.dg-prog input:focus,.dg-crew input:focus,.dg-crew-erbij input:focus,.dg-crew-erbij select:focus,.dg-zoek input:focus{border-color:var(--royal);}
.dg-veld input:disabled,.dg-veld textarea:disabled,.dg-prog input:disabled{background:var(--bone);color:var(--charcoal);}
.dg-uitleg{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:12px;}
.dg-kaart .dg-veld-breed + .dg-uitleg{margin-top:12px;}
.dg-hint{font-size:11.5px;color:var(--muted);margin-top:8px;}
.dg-hint-let{color:var(--warning);font-weight:600;}
.dg-leeg{font-size:12.5px;color:var(--muted);line-height:1.6;}
.dg-leeg-midden{text-align:center;padding:30px 0;}

/* Knoppen */
.dg-knoppen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dg-knoppen-midden{justify-content:center;}
.dg-knop{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;font:inherit;font-size:12px;font-weight:700;
  color:var(--charcoal);background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-xs);cursor:pointer;white-space:nowrap;
  transition:border-color .14s,color .14s,background .14s;}
.dg-knop:hover{border-color:var(--royal);color:var(--royal);}
.dg-knop:disabled{opacity:.45;cursor:not-allowed;}
.dg-knop-hoofd{background:var(--royal);border-color:var(--royal);color:#fff;}
.dg-knop-hoofd:hover{background:var(--mid);border-color:var(--mid);color:#fff;}
.dg-knop-klein{border:none;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--royal);cursor:pointer;padding:4px 2px;white-space:nowrap;}
.dg-knop-klein:hover{text-decoration:underline;}
.dg-bestand input{display:none;}
.dg-x{width:28px;height:28px;flex-shrink:0;border:none;border-radius:50%;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;}
.dg-x:hover{background:var(--danger-bg);color:var(--danger);}
.dg-verwijder{text-align:right;}
.dg-link-rood{border:none;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--danger);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}

/* Programma */
.dg-prog{list-style:none;display:flex;flex-direction:column;gap:8px;}
.dg-prog li{display:grid;grid-template-columns:128px minmax(0,1.6fr) minmax(0,1fr) 28px;gap:8px;align-items:center;}
.dg-prog-tijd{font-variant-numeric:tabular-nums;font-weight:700 !important;}

/* Crew */
.dg-crew{list-style:none;display:flex;flex-direction:column;}
.dg-crew li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--border);}
.dg-crew li .dg-chip,.dg-crew li .dg-x{margin-top:6px;}
.dg-crew-tekst strong{line-height:1.3;margin-top:2px;}
.dg-crew li:first-child{border-top:none;padding-top:0;}
.dg-av,.dgk-av{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--royal);color:#fff;font-size:13px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;}
.dg-av img,.dgk-av img{width:100%;height:100%;object-fit:cover;}
.dg-av-extern{background:var(--cyan-20);color:var(--charcoal);}
.dg-crew-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.dg-crew-tekst strong{font-size:13.5px;}
.dg-crew-tekst > span{font-size:12px;color:var(--muted);}
.dg-crew-tekst input{height:32px;font-size:12.5px;}
.dg-crew-erbij{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.dg-crew-extern{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:8px;align-items:center;}

/* Voortgang */
.dg-voortgang{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.dg-voortgang > div{flex:1;height:8px;background:var(--bone-vlak);border-radius:4px;overflow:hidden;}
.dg-voortgang i{display:block;height:100%;background:var(--success);border-radius:4px;transition:width .3s;}
.dg-voortgang span{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;}
.dg-voortgang-groot{margin:0;width:100%;}
.dg-voortgang-groot > div{height:10px;}

/* ── Shotlist ── */
.dg-sl-kop{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:16px 20px;}
.dg-sl-stand{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:8px;max-width:520px;}
.dg-sl-getal{display:flex;align-items:baseline;gap:8px;}
.dg-sl-getal b{font-size:30px;font-weight:900;font-style:italic;color:var(--royal);line-height:1;font-variant-numeric:tabular-nums;}
.dg-sl-getal span{font-size:13px;color:var(--muted);font-weight:600;}
.dg-sl-acties{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dg-schakel{display:inline-flex;background:var(--bone-vlak);border-radius:var(--kader-sm);padding:3px;flex-shrink:0;}
.dg-schakel button{border:none;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--charcoal);padding:7px 14px;border-radius:var(--kader-xs);cursor:pointer;white-space:nowrap;}
.dg-schakel button.aan{background:var(--royal);color:#fff;}
.dg-status-import{font-size:12.5px;color:var(--charcoal);margin:10px 2px 0;min-height:0;}
.dg-status-import:empty{display:none;}
.dg-status-import.fout{color:var(--danger);font-weight:600;}

.dg-checks{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:6px 20px;margin-top:14px;}
.dg-check{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;}
.dg-check + .dg-check{border-top:1px solid var(--border);}
.dg-check-titel{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--royal);}
.dg-check-items{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.dg-check-item{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:600;color:var(--charcoal);
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-xs);padding:6px 10px;cursor:pointer;transition:all .14s;}
.dg-check-item:hover{border-color:var(--royal);}
.dg-check-item i{width:14px;height:14px;border:1.5px solid var(--bone-rand);border-radius:3px;flex-shrink:0;position:relative;}
.dg-check-item.aan{background:var(--success-bg);border-color:var(--success-bg);color:var(--success);}
.dg-check-item.aan i{background:var(--success);border-color:var(--success);}
.dg-check-item.aan i::after{content:'';position:absolute;left:3.5px;top:0.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.dg-check-bewerk{display:inline-flex;align-items:center;gap:2px;}
.dg-check-bewerk input{font:inherit;font-size:12px;height:30px;padding:0 9px;border:1.5px solid var(--border);border-radius:var(--kader-xs);width:180px;outline:none;}
.dg-check-bewerk input:focus{border-color:var(--royal);}

.dg-sl-balk{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:20px 0 10px;}
.dg-zoek{flex:0 1 320px;min-width:0;}
.dg-zoek input{height:36px;}

/* Rijen: zes kolommen, ook voor de kopjes erboven */
.dg-kolomkoppen,.dg-shot{display:grid;grid-template-columns:44px minmax(0,2.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) 128px;column-gap:16px;}
.dg-kolomkoppen{padding:0 16px 6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.dg-kolomkoppen span:first-child{text-align:center;}

.dg-scene{margin-top:12px;}
.dg-scene-kop{width:100%;display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--royal-wash);border:1px solid var(--royal-wash);
  border-radius:0 var(--r) 0 0;font:inherit;color:var(--royal);cursor:pointer;text-align:left;}
.dg-scene.dicht .dg-scene-kop{border-radius:var(--kader);}
.dg-scene-naam{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dg-scene-tel{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;}
.dg-scene-balk{flex:0 0 110px;height:6px;background:var(--white);border-radius:3px;overflow:hidden;}
.dg-scene-balk i{display:block;height:100%;background:var(--success);}
.dg-scene-pijl{flex-shrink:0;transition:transform .2s;}
.dg-scene.dicht .dg-scene-pijl{transform:rotate(-90deg);}
.dg-shots{list-style:none;background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 0 var(--r);overflow:hidden;}
.dg-shot{align-items:start;padding:14px 16px;border-top:1px solid var(--border);transition:background .14s;}
.dg-shot:first-child{border-top:none;}
.dg-shot:hover{background:#FCFBF9;}
.dg-vink{width:36px;height:36px;margin:0 auto;border-radius:50%;border:2px solid var(--royal-20);background:var(--white);color:var(--royal);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .14s;}
.dg-vink:hover{border-color:var(--royal);}
.dg-vink-nr{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;}
.dg-vink-v{display:none;}
.dg-vink.aan{background:var(--success);border-color:var(--success);color:#fff;}
.dg-vink.aan .dg-vink-nr{display:none;}
.dg-vink.aan .dg-vink-v{display:block;}
.dg-shot-kern{min-width:0;}
.dg-type{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--royal);
  background:var(--royal-wash);padding:3px 7px;border-radius:var(--kader-xs);margin-bottom:6px;}
.dg-oms{font-size:13.5px;font-weight:600;line-height:1.45;color:var(--charcoal);overflow-wrap:anywhere;}
.dg-notitie{margin-top:7px;font-size:12px;line-height:1.5;color:var(--charcoal);background:var(--bone);padding:7px 10px;border-radius:var(--kader-xs);overflow-wrap:anywhere;}
.dg-cel{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:2px;}
.dg-cel span{font-size:12px;line-height:1.4;color:var(--charcoal);overflow-wrap:anywhere;}
.dg-cel span:first-child{font-weight:600;}
.dg-cel-leeg span{color:var(--bone-rand);}
.dg-shot-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.dg-status{appearance:none;-webkit-appearance:none;width:100%;max-width:128px;font:inherit;font-size:11.5px;font-weight:700;height:32px;padding:0 26px 0 10px;
  border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F6165' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center;
  color:var(--charcoal);cursor:pointer;}
.dg-status-bezig{background-color:var(--warning-bg);border-color:var(--warning-bg);color:var(--warning);}
.dg-status-gedraaid{background-color:var(--success-bg);border-color:var(--success-bg);color:var(--success);}
.dg-status-goed{background-color:var(--royal-wash);border-color:var(--royal-wash);color:var(--royal);}
.dg-status-over{background-color:var(--danger-bg);border-color:var(--danger-bg);color:var(--danger);}
.dg-door{font-size:10.5px;color:var(--muted);}
.dg-st-gedraaid .dg-shot-kern,.dg-st-gedraaid .dg-cel,.dg-st-goed .dg-shot-kern,.dg-st-goed .dg-cel{opacity:.5;}
.dg-st-over{background:#FFFBFB;}

/* Bewerken: de tabel */
.dg-tabel-wrap{margin-top:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow-x:auto;}
.dg-tabel{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;}
.dg-tabel th{position:sticky;top:0;background:var(--royal);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  text-align:left;padding:10px 8px;white-space:nowrap;}
.dg-tabel td{padding:5px 4px;border-bottom:1px solid var(--border);vertical-align:top;background:var(--white);}
.dg-tabel tbody tr:nth-child(even) td{background:var(--bone);}
.dg-tabel input,.dg-tabel select,.dg-tabel textarea{width:100%;font:inherit;font-size:12.5px;color:var(--charcoal);background:transparent;
  border:1.5px solid transparent;border-radius:var(--kader-xs);padding:6px 7px;outline:none;}
.dg-tabel input,.dg-tabel select{height:34px;}
.dg-tabel textarea{resize:vertical;min-height:34px;line-height:1.4;}
.dg-tabel input:hover,.dg-tabel textarea:hover,.dg-tabel select:hover{border-color:var(--border);}
.dg-tabel input:focus,.dg-tabel textarea:focus,.dg-tabel select:focus{border-color:var(--royal);background:var(--white);}
.dg-t-nr{position:sticky;left:0;z-index:1;width:44px;min-width:44px;text-align:center;font-weight:800;color:var(--royal);font-size:12.5px;padding-top:13px !important;}
.dg-tabel th.dg-t-nr{z-index:2;color:#fff;padding-top:10px !important;}
.dg-t-xs{width:70px;min-width:70px;}
.dg-t-s{width:126px;min-width:126px;}
.dg-t-m{width:160px;min-width:160px;}
.dg-t-xl{width:300px;min-width:300px;}
.dg-t-acties{width:132px;min-width:132px;white-space:nowrap;}
.dg-t-acties button{width:28px;height:28px;border:none;background:none;border-radius:var(--kader-xs);color:var(--muted);font-size:14px;cursor:pointer;margin-top:3px;}
.dg-t-acties button:hover:not(:disabled){background:var(--royal-wash);color:var(--royal);}
.dg-t-acties button:disabled{opacity:.3;cursor:default;}
.dg-t-acties .dg-t-weg:hover{background:var(--danger-bg) !important;color:var(--danger) !important;}
.dg-tabel-voet{margin-top:14px;}
.dg-tabel-voet .dg-hint{margin:0 0 0 6px;}

/* Lege staat */
.dg-leegstaat{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:44px 24px;text-align:center;}
.dg-leegstaat h3{font-size:21px;font-weight:900;font-style:italic;color:var(--royal);margin-bottom:8px;}
.dg-leegstaat p{font-size:13px;color:var(--muted);max-width:520px;margin:0 auto 18px;line-height:1.6;}
.dg-kopie{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;margin-top:20px;font-size:12px;color:var(--muted);}

/* ── Paklijst ── */
.dg-pak{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-items:start;margin-top:14px;}
.dg-pak-groep ul{list-style:none;}
.dg-pak-groep li + li{border-top:1px solid var(--border);}
.dg-pak-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 0;border:none;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--charcoal);}
.dg-pak-item i{width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--bone-rand);border-radius:4px;position:relative;}
.dg-pak-item.aan i{background:var(--success);border-color:var(--success);}
.dg-pak-item.aan i::after{content:'';position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.dg-pak-item.aan .dg-pak-titel{color:var(--muted);text-decoration:line-through;}
.dg-pak-naam{flex:1;min-width:0;font-size:13px;font-weight:600;display:flex;flex-direction:column;}
.dg-pak-naam small{font-size:11px;font-weight:500;color:var(--muted);text-decoration:none;}
.dg-pak-tel{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ── Op de projectpagina ── */
.dg-pp-lijst{display:flex;flex-direction:column;}
.dg-pp-rij{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;padding:11px 0;border:none;
  border-top:1px solid var(--border);background:none;font:inherit;text-align:left;color:var(--charcoal);cursor:pointer;}
.dg-pp-rij:first-child{border-top:none;padding-top:0;}
.dg-pp-rij:hover .dg-pp-tekst strong{color:var(--royal);}
.dg-pp-rij.voorbij{opacity:.6;}
.dg-pp-datum{width:48px;height:48px;border-radius:var(--kader-xs);background:var(--royal-wash);color:var(--royal);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;}
.dg-pp-datum b{font-size:18px;font-weight:900;}
.dg-pp-datum span{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.dg-pp-tekst{min-width:0;display:flex;flex-direction:column;gap:2px;}
.dg-pp-tekst strong{font-size:13.5px;font-weight:700;transition:color .14s;}
.dg-pp-tekst span{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;}
.dg-pp-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}

/* ── In het klantportaal ── */
.dgk-sectie{margin-bottom:16px;}
.dgk-sectie-titel{font-size:19px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.02em;margin-bottom:10px;}
.dgk{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;margin-bottom:12px;}
.dgk-datum{background:var(--royal);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 6px;line-height:1.1;gap:2px;}
.dgk-datum span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.85;}
.dgk-datum b{font-size:34px;font-weight:900;font-style:italic;letter-spacing:-.02em;}
.dgk-lijf{padding:18px 22px 20px;min-width:0;}
.dgk-eyebrow{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.dgk-eyebrow em{font-style:normal;color:var(--royal);}
.dgk-kop h3{font-size:18px;font-weight:800;color:var(--charcoal);margin:4px 0 6px;line-height:1.3;}
.dgk-waar{font-size:13px;color:var(--charcoal);line-height:1.5;}
.dgk-waar a{color:var(--royal);font-weight:700;text-decoration:none;white-space:nowrap;margin-left:4px;}
.dgk-waar a:hover{text-decoration:underline;}
.dgk-contact{font-size:12.5px;color:var(--muted);margin-top:3px;}
.dgk-contact strong{color:var(--charcoal);}
.dgk-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.dgk-blok h4,.dgk-nodig h4{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--royal);margin-bottom:10px;}
.dgk-crew{list-style:none;display:flex;flex-direction:column;gap:10px;}
.dgk-crew li{display:flex;align-items:center;gap:11px;min-width:0;}
.dgk-crew li > span:last-child{display:flex;flex-direction:column;min-width:0;}
.dgk-crew strong{font-size:13px;}
.dgk-crew small{font-size:11.5px;color:var(--muted);}
.dgk-av.dg-av-extern{background:var(--cyan-20);color:var(--charcoal);}
.dgk-prog{list-style:none;display:flex;flex-direction:column;}
.dgk-prog li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:7px 0;border-top:1px dotted var(--border);}
.dgk-prog li:first-child{border-top:none;padding-top:0;}
.dgk-prog time{font-size:12.5px;font-weight:800;color:var(--royal);font-variant-numeric:tabular-nums;}
.dgk-prog span{font-size:13px;line-height:1.45;display:flex;flex-direction:column;}
.dgk-prog small{font-size:11.5px;color:var(--muted);}
.dgk-nodig{margin-top:16px;background:var(--bone);border-left:3px solid var(--royal);border-radius:0 var(--rsm) 0 0;padding:12px 16px;}
.dgk-nodig p{font-size:13px;line-height:1.6;}

/* ── Breedtes ── */
@media (max-width:1100px){
  .dg-kolomkoppen,.dg-shot{grid-template-columns:44px minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 120px;column-gap:12px;}
}
@media (max-width:980px){
  .dg-raster{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:900px){
  .dg-kolomkoppen{display:none;}
  .dg-shot{grid-template-columns:40px minmax(0,1fr);row-gap:8px;column-gap:12px;padding:12px 14px;}
  .dg-shot-kern,.dg-cel,.dg-shot-status{grid-column:2;}
  .dg-cel{flex-direction:row;flex-wrap:wrap;gap:2px 10px;padding-top:0;}
  .dg-cel::before{content:attr(data-lbl);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);flex-basis:100%;}
  .dg-cel span:first-child{font-weight:500;}
  .dg-cel-leeg{display:none;}
  .dg-shot-status{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;}
  .dg-vink{width:34px;height:34px;}
}
@media (max-width:700px){
  .dgw-kop{padding:10px 14px 0;column-gap:10px;}
  .dgw-titel h2{font-size:18px;white-space:normal;}
  .dgw-kop-rechts .dg-chip{font-size:8.5px;padding:3px 6px;}
  .dgw-titel h2 em{display:none;}
  .dgw-opslag{display:none;}
  .dgw-tabs button{padding:9px 12px 11px;font-size:12.5px;}
  .dgw-binnen{padding:14px 12px 48px;}
  .dg-kaart{padding:16px;}
  .dg-velden{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dg-veld,.dg-veld-half{grid-column:span 1;}
  .dg-veld:first-child,.dg-veld-breed{grid-column:1/-1;}
  .dg-prog li{grid-template-columns:116px minmax(0,1fr) 28px;row-gap:6px;padding-bottom:10px;border-bottom:1px dotted var(--border);}
  .dg-prog li:last-child{border-bottom:none;padding-bottom:0;}
  .dg-prog-tijd{grid-column:1;grid-row:1;}
  .dg-prog-wat{grid-column:2;grid-row:1;}
  .dg-prog .dg-x{grid-column:3;grid-row:1;}
  .dg-prog-waar{grid-column:2;grid-row:2;}
  .dg-crew-extern{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .dg-crew-extern .dg-knop-klein{grid-column:1/-1;justify-self:start;}
  .dg-sl-kop{padding:14px 16px;}
  .dg-sl-acties{width:100%;}
  .dg-sl-acties .dg-schakel{width:100%;}
  .dg-sl-acties .dg-schakel button{flex:1;}
  .dg-sl-acties .dg-knop{flex:1;}
  .dg-checks{padding:4px 14px;}
  .dg-check{grid-template-columns:minmax(0,1fr);gap:8px;}
  .dg-sl-balk .dg-schakel{width:100%;}
  .dg-sl-balk .dg-schakel button{flex:1;}
  .dg-zoek{flex:1 1 100%;}
  .dg-scene-balk{flex-basis:60px;}
  .dg-pp-rij{grid-template-columns:48px minmax(0,1fr);}
  .dg-pp-chips{grid-column:2;justify-content:flex-start;}
  .dgk{grid-template-columns:minmax(0,1fr);}
  .dgk-datum{flex-direction:row;justify-content:flex-start;align-items:baseline;gap:8px;padding:12px 16px;}
  .dgk-datum b{font-size:24px;}
  .dgk-lijf{padding:16px;}
  .dgk-raster{grid-template-columns:minmax(0,1fr);gap:18px;}
}

/* ═══ PORTAAL: DEEP DIVE OP HET DASHBOARD (3.52.2) ═══ */
.p-ddkaart{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;background:var(--white);border:1.5px solid var(--blue);border-radius:0 16px 0 16px;padding:1.25rem 1.5rem;}
.p-ddkaart-tekst{min-width:0;}
.p-ddkaart-kopje{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:4px;}
.p-ddkaart h2{font-size:20px;font-weight:900;font-style:italic;color:var(--charcoal);margin:0 0 4px;line-height:1.2;}
.p-ddkaart p{font-size:13px;color:var(--muted);margin:0;line-height:1.5;}
.p-ddkaart-knop{flex-shrink:0;}
@media(max-width:640px){
  .p-ddkaart{flex-direction:column;align-items:flex-start;padding:1.1rem 1.15rem;}
  .p-ddkaart-knop{width:100%;}
}

/* Oud-klant op de klantkaart (3.52.2) */
.kb-oud{flex-shrink:0;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--off);border:1px solid var(--border);padding:2px 7px;border-radius:0 6px 0 6px;}

/* ════════════════════════════════════════════════════════════
   VOORBEELDWEBSITES (3.53.0)
   De pagina, het venster per preview, de kaarten bij project, klant
   en portaal, en Beheer › Verbinding testen.
   ════════════════════════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ws-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:0 0 .25rem;}
.ws-kop .btn-blue{flex-shrink:0;}

/* Status */
.ws-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--kader-xs);white-space:nowrap;line-height:1.5;}
.ws-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.ws-chip-open{background:var(--success-bg);color:var(--success);}
.ws-chip-verlopen{background:var(--warning-bg);color:var(--warning);}
.ws-chip-dicht{background:var(--bone-vlak);color:var(--charcoal);}
.ws-chip-leeg{background:var(--royal-wash);color:var(--royal);}
.ws-chip-nu{background:var(--royal);color:#fff;}
.ws-chip-nu::before{background:var(--cyan);}
.ws-grijs{color:var(--muted);}

/* Knoppen met alleen een icoon */
.ws-ic-knop{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);color:var(--royal);cursor:pointer;transition:border-color .15s,background .15s;}
.ws-ic-knop:hover{border-color:var(--royal);background:var(--royal-wash);}
.ws-ic-knop:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.ws-ic-knop svg{width:16px;height:16px;}

/* De code, groot en te kopiëren */
.ws-code{background:var(--royal-wash);border-radius:var(--kader);padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
.ws-code-rij{display:flex;align-items:center;gap:12px;min-width:0;}
.ws-code-lbl{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--royal);flex-shrink:0;}
.ws-code-waarde{font-size:26px;font-weight:900;letter-spacing:.04em;color:var(--royal);line-height:1.1;min-width:0;overflow-wrap:anywhere;flex:1;}
.ws-link-rij{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;}
.ws-link-tekst{flex:1 1 220px;min-width:0;font-size:12.5px;color:var(--charcoal);background:var(--white);border:1px solid var(--border);border-radius:var(--kader-xs);padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-open-knop{display:inline-flex;align-items:center;gap:6px;height:34px;}
.ws-open-knop svg{width:14px;height:14px;}
.ws-code-compact{padding:12px 14px;}
.ws-code-compact .ws-code-waarde{font-size:21px;}

/* Vraag na akkoord */
.ws-vraag{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--white);border:1.5px solid var(--royal);border-radius:var(--kader);padding:12px 16px;margin-bottom:12px;}
.ws-vraag-tekst{font-size:13px;color:var(--charcoal);min-width:0;}
.ws-vraag-knoppen{display:flex;gap:8px;flex-wrap:wrap;}

/* Filters */
.ws-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 14px;}
.ws-zoek{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:0 12px;color:var(--muted);}
.ws-zoek:focus-within{border-color:var(--royal);}
.ws-zoek svg{width:15px;height:15px;flex-shrink:0;}
.ws-zoek input{flex:1;min-width:0;border:none;outline:none;background:none;padding:9px 0;font:inherit;font-size:13px;color:var(--charcoal);}
.ws-chips{display:flex;gap:6px;flex-wrap:wrap;}
.ws-fchip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:700;color:var(--charcoal);background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:6px 11px;cursor:pointer;}
.ws-fchip em{font-style:normal;font-size:11px;color:var(--muted);font-weight:700;}
.ws-fchip.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.ws-fchip.aan em{color:var(--cyan-40);}
.ws-klantkeuze{font:inherit;font-size:13px;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-width:0;max-width:100%;}

.ws-leeg{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:22px 24px;font-size:13px;color:var(--muted);}
.ws-leeg strong{color:var(--charcoal);font-size:14px;}

/* De lijst: een tabel in de huisstijl, op de telefoon kaarten */
.ws-tabel{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.ws-tr{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(150px,1.3fr) minmax(110px,.9fr) 70px minmax(110px,.9fr) 84px;align-items:center;gap:12px;padding:11px 16px;font-size:13px;}
.ws-tr:not(.ws-th){cursor:pointer;}
.ws-tr:not(.ws-th):nth-child(odd){background:var(--bone);}
.ws-tr:not(.ws-th):hover{background:var(--royal-wash);}
.ws-tr:not(.ws-th):focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.ws-th{background:var(--royal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;}
.ws-tr > span{min-width:0;}
.ws-tr strong{display:block;font-weight:700;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-td-code strong{color:var(--royal);font-weight:800;letter-spacing:.02em;}
.ws-tr small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-td-status{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.ws-td-acties{display:flex;gap:6px;justify-content:flex-end;}
.ws-mlbl{display:none;}
@media(max-width:1180px){
  .ws-th{display:none;}
  .ws-tr{grid-template-columns:1fr auto;grid-template-areas:"code status" "klant klant" "versie versie" "upload acties";gap:6px 12px;padding:14px 16px;}
  .ws-td-code{grid-area:code;}
  .ws-td-klant{grid-area:klant;}
  .ws-td-status{grid-area:status;align-items:flex-end;}
  .ws-td-versie{grid-area:versie;}
  .ws-td-upload{grid-area:upload;}
  .ws-td-acties{grid-area:acties;align-self:end;}
  .ws-td-versie,.ws-td-upload{font-size:12.5px;display:flex;gap:8px;align-items:baseline;}
  .ws-mlbl{display:inline;font-size:11px;color:var(--muted);min-width:104px;}
  .ws-td-versie small{display:inline;}
}

/* Het venster per preview */
.ws-overlay{position:fixed;inset:0;z-index:600;background:rgba(26,29,35,.55);display:none;align-items:center;justify-content:center;padding:24px;}
.ws-overlay.open{display:flex;}
body.ws-detail-open{overflow:hidden;}
.ws-venster{background:var(--white);border-radius:var(--kader);width:100%;max-width:680px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(10,25,60,.3);overflow:hidden;}
.ws-v-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 12px;}
.ws-v-boven{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.ws-v-kop h2{font-size:22px;font-weight:900;font-style:italic;color:var(--royal);line-height:1.15;margin:0;overflow-wrap:anywhere;}
.ws-v-sluit{flex-shrink:0;width:36px;height:36px;border:none;background:var(--off);border-radius:var(--kader-xs);font-size:22px;line-height:1;color:var(--charcoal);cursor:pointer;}
.ws-v-sluit:hover{background:var(--bone-vlak);}
.ws-v-lijf{padding:4px 24px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;}
.ws-v-feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;}
.ws-v-feiten > div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ws-v-feiten > div > span:first-child{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ws-v-feiten strong{font-size:13.5px;font-weight:700;color:var(--charcoal);}
.ws-v-feiten small{font-weight:500;color:var(--muted);}
.ws-v-feiten .ws-chip{align-self:flex-start;}
.ws-v-blok{border-top:1px solid var(--border);padding-top:14px;}
.ws-v-blok h3{font-size:14px;font-weight:800;color:var(--royal);margin:0 0 10px;}
.ws-v-status{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:10px;align-items:end;}
.ws-v-veld{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:var(--muted);min-width:0;}
.ws-v-veld em{font-style:normal;font-weight:500;}
.ws-v-veld select,.ws-v-veld input{font:inherit;font-size:13px;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-width:0;width:100%;}
.ws-v-opslaan{height:38px;}
.ws-v-uitleg{font-size:12.5px;color:var(--muted);line-height:1.6;margin:8px 0 0;}
.ws-v-uitleg a{color:var(--royal);font-weight:700;overflow-wrap:anywhere;}
.ws-versies{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.ws-versies li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px dotted var(--border);}
.ws-versies li:last-child{border-bottom:none;}
.ws-v-nr{width:30px;height:30px;border-radius:50%;background:var(--off);color:var(--royal);font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;}
.ws-v-nu .ws-v-nr{background:var(--royal);color:#fff;}
.ws-v-tekst{min-width:0;}
.ws-v-tekst strong{display:block;font-size:13px;font-weight:700;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-v-tekst small{display:block;font-size:11.5px;color:var(--muted);}
.ws-versies .btn-smb{display:inline-flex;align-items:center;gap:6px;}
.ws-versies .btn-smb svg{width:14px;height:14px;}
.ws-versies .ws-grijs{font-size:11.5px;}
.ws-v-voet{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--border);background:var(--bone);}
@media(max-width:640px){
  .ws-overlay{padding:0;align-items:flex-end;}
  .ws-venster{max-width:none;max-height:92vh;border-radius:16px 16px 0 0;}
  .ws-v-kop{padding:16px 16px 10px;}
  .ws-v-lijf{padding:4px 16px 16px;}
  .ws-v-voet{padding:12px 16px;}
  .ws-v-voet > *{flex:1 1 auto;}
  .ws-v-status{grid-template-columns:1fr 1fr;}
  .ws-v-opslaan{grid-column:1 / -1;}
  .ws-code-waarde{font-size:20px;}
  .ws-v-feiten{grid-template-columns:1fr 1fr;}
}

/* Bij het project en op de klantpagina */
.ws-rijen{display:flex;flex-direction:column;}
.ws-rij{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--border);}
.ws-rij:first-child{border-top:none;}
.ws-rij-hoofd{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:none;border:none;padding:0;font:inherit;cursor:pointer;}
.ws-rij-hoofd:hover .ws-rij-code{text-decoration:underline;}
.ws-rij-code{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--royal);}
.ws-rij-sub{font-size:12px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-rij-rechts{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.ws-kd{margin-bottom:14px;}
.ws-kd .ws-rij{padding-left:0;padding-right:0;}
@media(max-width:560px){
  .ws-rij{flex-wrap:wrap;}
  .ws-rij-rechts{width:100%;justify-content:flex-start;}
}

/* In het portaal */
.wsk-sectie{display:flex;flex-direction:column;gap:12px;}
.wsk-titel{font-size:19px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.02em;margin:0;}
.wsk-kaart{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.wsk-beeld{position:relative;background:var(--gradient);min-height:190px;display:flex;align-items:flex-end;}
.wsk-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;}
.wsk-beeld-naam{display:none;}
.wsk-beeld-leeg .wsk-beeld-naam{display:block;position:relative;padding:18px 20px;color:#fff;font-weight:900;font-style:italic;font-size:22px;line-height:1.15;overflow-wrap:anywhere;}
.wsk-tekst{padding:20px 22px;display:flex;flex-direction:column;gap:8px;min-width:0;}
.wsk-kopje{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.wsk-tekst h3{font-size:18px;font-weight:800;color:var(--charcoal);margin:0;line-height:1.3;}
.wsk-feiten{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.wsk-code strong{color:var(--royal);letter-spacing:.04em;font-weight:800;}
.wsk-tekst p{font-size:13px;color:var(--muted);line-height:1.6;margin:0;}
.wsk-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.wsk-knop{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.wsk-dicht .wsk-beeld{filter:grayscale(.85);opacity:.75;}
@media(max-width:700px){
  .wsk-kaart{grid-template-columns:1fr;}
  .wsk-beeld{min-height:150px;}
  .wsk-tekst{padding:16px 18px;}
  .wsk-knop{flex:1 1 100%;}
}

/* In het venster Deliverable */
.df-w-codeblok{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
#df-w-vast:not(:empty){margin-top:12px;}
.df-w-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.df-w-coderij{display:flex;gap:8px;align-items:stretch;}
.df-w-coderij input{flex:1;min-width:0;font:inherit;font-size:18px;font-weight:800;letter-spacing:.06em;color:var(--royal);padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--kader-sm);text-transform:uppercase;}
.df-w-coderij input:focus{border-color:var(--royal);outline:none;}
.df-w-hint{font-size:11.5px;color:var(--muted);min-height:1em;}
.df-w-hint.df-c-fout{color:var(--danger);}
.df-w-bron{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px;}
#df-w-vast .ws-code{margin-bottom:4px;}
#df-w-vast .df-w-hint{margin:6px 0 0;}
.df-website .mrow{margin-top:8px;}

/* Beheer › Verbinding testen */
.wsb-uitleg{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 12px;}
.wsb-uitleg code,.wsb-tabel code,.wsb-config code{font-size:12px;background:var(--off);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere;}
.wsb-tabel{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:0;margin:0;border:1px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;}
.wsb-tabel dt,.wsb-tabel dd{margin:0;padding:10px 14px;font-size:13px;}
.wsb-tabel dt{font-weight:700;color:var(--charcoal);}
.wsb-tabel dt:nth-of-type(odd),.wsb-tabel dt:nth-of-type(odd) + dd{background:var(--bone);}
.wsb-ja{color:var(--success);font-weight:700;}
.wsb-nee{color:var(--danger);font-weight:700;}
.wsb-melding{font-size:12px;color:var(--muted);}
.wsb-config{margin-top:14px;display:flex;flex-direction:column;gap:6px;background:var(--royal-wash);border-radius:var(--kader-sm);padding:14px 16px;font-size:13px;}
.wsb-config pre{margin:4px 0 0;background:var(--white);border:1px solid var(--border);border-radius:var(--kader-xs);padding:10px 12px;font-size:12px;overflow-x:auto;white-space:pre;}
@media(max-width:640px){
  .wsb-tabel{grid-template-columns:1fr;}
  .wsb-tabel dt{padding-bottom:2px;}
  .wsb-tabel dd{padding-top:0;}
  .wsb-tabel dt:nth-of-type(odd),.wsb-tabel dt:nth-of-type(odd) + dd{background:none;}
}

/* ════════════════════════════════════════════════════════════
   LEADS EN ACQUISITIE (3.54.0)
   ════════════════════════════════════════════════════════════ */
.sp-lead .sp-soort{background:var(--royal-20);color:var(--royal);}
.sp-chip-lead{background:var(--royal-20);color:var(--royal);}
.sp-chip-lead:hover{background:var(--royal-40);}
.todo-tag.lead{background:var(--royal-20);color:var(--royal);cursor:pointer;}
.ld-offlabel{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--royal-20);color:var(--royal);padding:1px 6px;border-radius:var(--kader-xs);margin-left:4px;}
.ld-offkop{margin:0 0 10px;font-size:12.5px;background:var(--royal-wash);color:var(--royal);padding:8px 12px;border-radius:var(--kader-sm);}

/* Overzicht bovenaan */
.ld-overzicht{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.ld-tegel{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.ld-tegel > span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ld-tegel b{font-size:22px;font-weight:900;color:var(--royal);line-height:1.2;}
.ld-tegel small{font-size:11.5px;color:var(--muted);}
.ld-let{font-style:normal;color:var(--danger);font-weight:700;}
.ld-meer{grid-column:1 / -1;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:0 16px;}
.ld-meer summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--royal);padding:11px 0;}
.ld-meer-inhoud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:4px 0 14px;}
.ld-meer h4{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
.ld-meer ul{list-style:none;margin:0;padding:0;}
.ld-meer li{display:flex;align-items:center;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px dotted var(--border);}
.ld-meer li:last-child{border-bottom:none;}
.ld-meer li span{flex:0 0 150px;min-width:0;}
.ld-meer li b{margin-left:auto;font-weight:800;color:var(--charcoal);}
.ld-staaf{display:block;height:8px;background:var(--royal);border-radius:0 4px 0 4px;min-width:4px;flex:0 1 auto;}
.ld-avg{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--white);border:1.5px solid var(--royal);border-radius:var(--kader);padding:12px 16px;margin-bottom:12px;font-size:13px;}

/* Filters en weergave */
.ld-balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.ld-zoek{flex:1 1 240px;}
.ld-schakel{display:flex;gap:6px;margin-left:auto;}

/* Het bord */
.ld-bord{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.ld-kolom{background:var(--bone-vlak);border-radius:var(--kader);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0;scroll-snap-align:start;transition:background .15s,box-shadow .15s;}
.ld-kolom.ld-over{background:var(--royal-wash);box-shadow:inset 0 0 0 2px var(--royal);}
.ld-kolom header{display:flex;flex-direction:column;gap:1px;padding:2px 4px 4px;}
.ld-kolom h3{font-size:12px;font-weight:800;color:var(--royal);margin:0;}
.ld-kolom header span{font-size:11px;color:var(--muted);font-weight:600;}
.ld-kolom-gewonnen h3{color:var(--success);}
.ld-kolom-verloren h3{color:var(--muted);}
.ld-kolom-lijst{display:flex;flex-direction:column;gap:8px;min-height:40px;}
.ld-kolom-leeg{font-size:11.5px;color:var(--muted);text-align:center;padding:12px 6px;border:1.5px dashed var(--bone-lijn);border-radius:var(--kader-sm);margin:0;}
.ld-nieuwknop{font:inherit;font-size:12px;font-weight:700;color:var(--royal);background:none;border:1.5px dashed var(--royal-40);border-radius:var(--kader-sm);padding:8px;cursor:pointer;}
.ld-nieuwknop:hover{background:var(--white);}
.ld-kaart{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--royal-20);border-radius:var(--kader-sm);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:5px;min-width:0;}
.ld-kaart:hover{border-color:var(--royal-40);}
.ld-kaart:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.ld-kaart.ld-sleept{opacity:.4;}
.ld-kaart.ld-actie-telaat,.ld-kaart.ld-actie-geen{border-left-color:var(--danger);}
.ld-kaart.ld-actie-vandaag{border-left-color:var(--cyan);}
.ld-k-kop{display:flex;align-items:flex-start;gap:8px;}
.ld-k-kop strong{flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--charcoal);overflow-wrap:anywhere;}
.ld-av{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--royal);color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.ld-k-zoekt{font-size:12px;color:var(--muted);margin:0;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ld-k-voet{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:11.5px;}
.ld-k-actie{min-width:0;max-width:100%;color:var(--charcoal);display:flex;align-items:baseline;gap:5px;line-height:1.4;}
.ld-k-actie i{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--danger);transform:translateY(-1px);}
.ld-actie-telaat .ld-k-actie,.ld-actie-geen .ld-k-actie{color:var(--danger);font-weight:700;}
.ld-k-waarde{flex-shrink:0;font-weight:800;color:var(--royal);}

/* De lijst */
.ld-tabel{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.ld-tr{display:grid;grid-template-columns:minmax(180px,1.6fr) 170px minmax(180px,1.6fr) 110px 80px 90px;gap:12px;align-items:center;padding:10px 16px;font-size:13px;}
.ld-tr:not(.ld-th){cursor:pointer;}
.ld-tr:not(.ld-th):nth-child(odd){background:var(--bone);}
.ld-tr:not(.ld-th):hover{background:var(--royal-wash);}
.ld-th{background:var(--royal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.ld-tr > span{min-width:0;}
.ld-td-bedrijf strong{display:block;font-weight:800;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ld-td-bedrijf small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ld-td-actie{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ld-td-actie b{font-weight:700;}
.ld-td-actie.ld-actie-telaat,.ld-td-actie.ld-actie-geen{color:var(--danger);}
.ld-td-waarde{font-weight:700;color:var(--royal);text-align:right;}
.ld-stapkeuze{font:inherit;font-size:12.5px;padding:6px 8px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);width:100%;min-width:0;}
.ld-mlbl{display:none;}
@media(max-width:1100px){
  .ld-overzicht{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ld-th{display:none;}
  .ld-tr{grid-template-columns:1fr auto;grid-template-areas:"bedrijf waarde" "stap stap" "actie actie" "bron wie";gap:6px 12px;padding:13px 16px;}
  .ld-td-bedrijf{grid-area:bedrijf;}
  .ld-td-waarde{grid-area:waarde;}
  .ld-td-stap{grid-area:stap;}
  .ld-td-actie{grid-area:actie;white-space:normal;}
  .ld-td-bron{grid-area:bron;}
  .ld-td-wie{grid-area:wie;text-align:right;}
  .ld-mlbl{display:inline;font-size:11px;color:var(--muted);margin-right:6px;}
  .ld-td-waarde .ld-mlbl{display:none;}
}
@media(max-width:640px){
  .ld-schakel{margin-left:0;}
  .ld-balk .ws-klantkeuze{flex:1 1 140px;}
  .ld-bord{grid-template-columns:repeat(5,82%);}
  .ld-meer-inhoud{grid-template-columns:1fr;}
  .ld-meer li span{flex-basis:120px;}
}


/* Tabbladen en samenvatting (3.56.0) */
.ld-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border-bottom:1.5px solid var(--border);margin-bottom:14px;}
.ld-tab{font:inherit;font-size:13px;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1.5px;padding:9px 14px;cursor:pointer;}
.ld-tab:hover{color:var(--royal);}
.ld-tab.aan{color:var(--royal);border-bottom-color:var(--royal);}
.ld-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.ld-samen{margin-left:auto;font-size:12.5px;color:var(--muted);padding:6px 0;}
.ld-samen b{color:var(--danger);font-weight:700;}

/* Te doen: groepen met compacte regels */
.ld-groep{margin-bottom:18px;}
.ld-groep h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--royal);margin:0 0 8px;}
.ld-groep h3 > span{font-size:11px;font-weight:800;letter-spacing:0;background:var(--royal);color:#fff;border-radius:var(--kader-xs);padding:1px 7px;}
.ld-groep h3 small{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);}
.ld-groep-nu h3,.ld-groep-geen h3{color:var(--danger);}
.ld-groep-nu h3 > span,.ld-groep-geen h3 > span{background:var(--danger);}
.ld-rijen{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.ld-rij{font:inherit;width:100%;text-align:left;background:var(--white);border:none;border-left:3px solid transparent;display:grid;grid-template-columns:minmax(0,1.5fr) 150px minmax(0,1.7fr) 30px 90px;gap:14px;align-items:center;padding:10px 16px;cursor:pointer;font-size:13px;color:var(--charcoal);}
.ld-rij:nth-child(even){background:var(--bone);}
.ld-rij:hover{background:var(--royal-wash);}
.ld-rij:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.ld-rij.ld-actie-telaat,.ld-rij.ld-actie-geen{border-left-color:var(--danger);}
.ld-rij.ld-actie-vandaag{border-left-color:var(--cyan);}
.ld-rij > span{min-width:0;}
.ld-rij-bedrijf strong{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ld-rij-bedrijf small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ld-rij-stap{justify-self:start;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--kader-xs);background:var(--royal-wash);color:var(--royal);white-space:nowrap;}
.ld-stapchip-gewonnen{background:var(--success);color:#fff;}
.ld-stapchip-verloren{background:var(--bone-vlak);color:var(--muted);}
.ld-rij-actie{display:flex;align-items:baseline;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ld-rij-actie b{font-weight:700;}
.ld-rij-actie i{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--danger);}
.ld-actie-telaat .ld-rij-actie,.ld-actie-geen .ld-rij-actie{color:var(--danger);}
.ld-actie-dicht .ld-rij-actie{color:var(--muted);}
.ld-rij-waarde{text-align:right;font-weight:800;color:var(--royal);}
.ld-afgerond summary{list-style:none;cursor:pointer;}
.ld-afgerond summary::-webkit-details-marker{display:none;}
.ld-afgerond summary h3{color:var(--muted);}
.ld-afgerond summary h3 > span{background:var(--muted);}
.ld-afgerond summary h3::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-right:2px;align-self:center;transition:transform .15s;}
.ld-afgerond[open] summary h3::before{transform:rotate(45deg);}

/* Bord: eindvakken */
.ld-eindvakken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}
.ld-eindvak{border:1.5px dashed var(--bone-lijn);border-radius:var(--kader);padding:12px 16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);transition:background .15s,border-color .15s;}
.ld-eindvak strong{font-size:13px;color:var(--charcoal);}
.ld-eindvak-gewonnen strong{color:var(--success);}
.ld-eindvak.ld-over{background:var(--royal-wash);border-color:var(--royal);}

/* Funnel */
.ld-f-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.ld-tegel-klein{font-size:17px !important;}
.ld-funnel{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:8px 18px;margin-bottom:14px;}
.ld-f-rij{display:grid;grid-template-columns:170px minmax(0,1fr) 230px;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.ld-f-rij:last-child{border-bottom:none;}
.ld-f-naam strong{display:block;font-size:13px;font-weight:800;color:var(--charcoal);}
.ld-f-naam small{font-size:11.5px;color:var(--muted);}
.ld-f-balk{background:var(--bone);border-radius:0 6px 0 6px;height:30px;overflow:hidden;}
.ld-f-balk i{display:flex;align-items:center;justify-content:flex-end;height:100%;background:var(--royal);border-radius:0 6px 0 6px;padding:0 10px;box-sizing:border-box;min-width:32px;}
.ld-f-balk b{color:#fff;font-size:12.5px;font-weight:800;}
.ld-f-uit{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px;}
.ld-f-uit small{flex-basis:100%;font-size:11.5px;color:var(--muted);}
.ld-f-verloren{font-weight:700;color:var(--danger);}
.ld-f-hier{color:var(--muted);}
.ld-f-let{background:linear-gradient(90deg,rgba(176,18,28,.06),transparent 60%);margin:0 -18px;padding:10px 18px;}
.ld-f-let .ld-f-naam strong::after{content:"Meeste verlies";margin-left:8px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--danger);padding:2px 6px;border-radius:var(--kader-xs);vertical-align:2px;display:inline-block;white-space:nowrap;}
.ld-f-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.ld-f-blok{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:14px 18px;min-width:0;}
.ld-f-blok h3{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.ld-f-lijst{list-style:none;margin:0;padding:0;}
.ld-f-lijst li{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px dotted var(--border);}
.ld-f-lijst li:last-child{border-bottom:none;}
.ld-f-lijst li span{flex:0 0 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ld-f-lijst li b{margin-left:auto;font-weight:800;color:var(--charcoal);white-space:nowrap;}
.ld-f-lijst li em{font-style:normal;color:var(--muted);font-size:12px;}
@media(max-width:1100px){
  .ld-rij{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"bedrijf waarde" "actie stap";gap:4px 12px;}
  .ld-rij-bedrijf{grid-area:bedrijf;}
  .ld-rij-waarde{grid-area:waarde;}
  .ld-rij-stap{grid-area:stap;justify-self:end;}
  .ld-rij-actie{grid-area:actie;}
  .ld-rij-wie{display:none;}
  .ld-f-rij{grid-template-columns:130px minmax(0,1fr);}
  .ld-f-uit{grid-column:2;}
  .ld-f-twee{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .ld-samen{margin-left:0;flex-basis:100%;padding:4px 0 8px;}
  .ld-tab{padding:9px 10px;}
  .ld-f-rij{grid-template-columns:1fr;gap:6px;}
  .ld-f-uit{grid-column:auto;}
  .ld-eindvakken{grid-template-columns:1fr;}
  .ld-f-lijst li span{flex-basis:110px;}
}

/* Het venster */
.ld-v{max-width:760px;}
.ld-stappen{display:flex;flex-wrap:wrap;gap:6px;}
.ld-stapknop{font:inherit;font-size:11.5px;font-weight:700;color:var(--charcoal);background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:6px 10px;cursor:pointer;}
.ld-stapknop:hover{border-color:var(--royal);}
.ld-stapknop.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.ld-stapknop.ld-stap-gewonnen.aan{background:var(--success);border-color:var(--success);}
.ld-stapknop.ld-stap-verloren.aan{background:var(--charcoal);border-color:var(--charcoal);}
.ld-v-verloren{font-size:13px;background:var(--bone-vlak);padding:10px 14px;border-radius:var(--kader-sm);margin:0;}
.ld-v-anoniem{font-size:13px;background:var(--bone-vlak);padding:10px 14px;border-radius:var(--kader-sm);margin:0;color:var(--muted);}
.ld-v-eerste{border-top:none;padding-top:0;}
.ld-v-actie{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:10px;padding:12px;border-radius:var(--kader-sm);background:var(--royal-wash);}
.ld-v-actie.ld-actie-telaat,.ld-v-actie.ld-actie-geen{background:var(--danger-bg);}
.ld-v-actie.ld-actie-vandaag{background:var(--cyan-20);}
.ld-v-let{font-size:12.5px;color:var(--danger);font-weight:700;margin:8px 0 0;}
.ld-v-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
.ld-v-breed{grid-column:1 / -1;}
.ld-v .ws-v-veld textarea{font:inherit;font-size:13px;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);resize:vertical;min-width:0;width:100%;}
.ld-v .ws-v-veld input:focus,.ld-v .ws-v-veld select:focus,.ld-v .ws-v-veld textarea:focus{border-color:var(--royal);outline:none;}
.ld-koppel{display:flex;flex-direction:column;}
.ld-koppel-rij{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dotted var(--border);font-size:13px;}
.ld-koppel-rij:last-child{border-bottom:none;}
.ld-koppel-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ld-koppel-wat{min-width:0;overflow-wrap:anywhere;}
.ld-koppel-wat a{color:var(--royal);font-weight:700;}
.ld-koppel-wat small{color:var(--muted);}
.ld-notitie-nieuw{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--bone);border-radius:var(--kader-sm);padding:12px;margin-bottom:12px;}
.ld-notitie-nieuw .ld-v-velden{width:100%;}
.ld-notities{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ld-notities > li{border-left:3px solid var(--royal-20);padding:2px 0 2px 12px;}
.ld-n-kop{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.ld-n-kop strong{color:var(--charcoal);}
.ld-n-kop span{color:var(--muted);}
.ld-n-weg{margin-left:auto;background:none;border:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;}
.ld-n-weg:hover{color:var(--danger);}
.ld-notities p{font-size:13px;margin:4px 0 0;line-height:1.6;}
.ld-punten{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
.ld-punten li{display:flex;align-items:center;gap:8px;font-size:12.5px;background:var(--bone);padding:5px 8px;border-radius:var(--kader-xs);}
.ld-punten li > span:first-child{flex:1;min-width:0;}
.ld-punt-ok{font-size:11px;font-weight:700;color:var(--success);flex-shrink:0;}
.ld-verloop{list-style:none;margin:0;padding:0;font-size:12.5px;}
.ld-verloop li{display:flex;gap:10px;padding:3px 0;}
.ld-verloop li span{flex:0 0 70px;color:var(--muted);}
.ld-verloop small{color:var(--muted);}
.ld-avg-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.ld-weg{border:1.5px solid var(--danger) !important;color:var(--danger) !important;background:var(--white) !important;padding:8px 14px !important;font-size:12px !important;font-weight:700;border-radius:var(--kader-sm) !important;}
.ld-klein .ws-venster{max-width:520px;}
.ld-redenen{display:flex;flex-wrap:wrap;gap:6px;}
.ld-reden{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:6px 10px;cursor:pointer;}
.ld-reden:has(input:checked){border-color:var(--royal);background:var(--royal-wash);}
.ld-schoon{list-style:none;margin:0;padding:0;}
.ld-schoon li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px dotted var(--border);}
.ld-schoon li span{color:var(--muted);}
@media(max-width:640px){
  .ld-v-velden{grid-template-columns:1fr;}
  .ld-v-actie{grid-template-columns:1fr;}
  .ld-koppel-rij{grid-template-columns:1fr auto;}
  .ld-koppel-lbl{grid-column:1 / -1;}
}

/* ════════════════════════════════════════════════════════════
   APPARATUUR (3.55.0)
   ════════════════════════════════════════════════════════════ */
.ap-kopknoppen{display:flex;gap:8px;flex-wrap:wrap;}
.ap-agenda{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:12px 16px;margin-bottom:14px;}
.ap-agenda h3{font-size:12px;font-weight:800;color:var(--royal);margin:0 0 6px;}
.ap-agenda ul{list-style:none;margin:0;padding:0;}
.ap-agenda li{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:baseline;font-size:12.5px;padding:5px 0;border-bottom:1px dotted var(--border);}
.ap-agenda li:last-child{border-bottom:none;}
.ap-ag-datum{color:var(--muted);font-weight:600;}
.ap-ag-item{font:inherit;font-weight:700;color:var(--royal);background:none;border:none;padding:0;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ap-ag-item:hover{text-decoration:underline;}
.ap-ag-wat{color:var(--charcoal);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ap-cats{margin:-4px 0 12px;}
.ap-selbalk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.ap-alles{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--charcoal);cursor:pointer;}
.ap-selbalk .btn-ghost{margin-left:auto;}
.ap-selbalk .btn-ghost:disabled{opacity:.45;cursor:default;}

.ap-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;}
.ap-kaart{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;min-width:0;}
.ap-kaart:hover{border-color:var(--royal-40);}
.ap-kaart.ap-defect{border-color:var(--danger);}
.ap-kies{position:absolute;top:11px;right:12px;z-index:1;line-height:0;}
.ap-kies input{width:16px;height:16px;margin:0;cursor:pointer;}
.ap-kaart-knop{display:flex;flex-direction:column;width:100%;background:none;border:none;padding:0;text-align:left;font:inherit;cursor:pointer;}
.ap-kaart-knop:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.ap-k-tekst{display:flex;flex-direction:column;gap:3px;padding:12px 40px 14px 14px;min-width:0;}
.ap-k-cat{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ap-k-tekst strong{font-size:14px;font-weight:800;color:var(--charcoal);overflow-wrap:anywhere;}
.ap-k-merk{font-size:12px;color:var(--muted);min-height:1.4em;}
.ap-k-stand{font-size:12.5px;color:var(--charcoal);font-weight:600;}
.ap-k-stand.ap-uit{color:var(--royal);}
.ap-let{color:var(--danger);font-weight:800;}
.ap-k-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;}
.ap-chip{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:var(--kader-xs);}
.ap-chip-matig{background:var(--bone-vlak);color:var(--charcoal);}
.ap-chip-defect,.ap-chip-reparatie{background:var(--danger-bg);color:var(--danger);}
.ap-chip-onderhoud{background:var(--warning-bg);color:var(--warning);}
.ap-chip-verzekerd{background:var(--success-bg);color:var(--success);}

/* Het venster */
.ap-v-nu{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--royal-wash);border-radius:var(--kader-sm);padding:12px 14px;}
.ap-v-wie{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ap-v-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ap-v-wie strong{font-size:15px;font-weight:800;color:var(--royal);}
.ap-v-wie small{font-size:12px;color:var(--muted);}
.ap-v-uitleen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ap-v-uitleen select,.ap-v-uitleen input{font:inherit;font-size:12.5px;padding:7px 9px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-width:0;}
.ap-v-klein{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600;}
.ap-v-check{flex-direction:row !important;align-items:center;gap:8px !important;align-self:end;padding-bottom:9px;}
.ap-v-check input{width:18px;height:18px;margin:0;}
.ap-v-check span{font-size:13px;color:var(--charcoal);font-weight:700;}
.ap-v-let{color:var(--warning) !important;font-weight:700;}
.ap-v-res{display:grid;grid-template-columns:150px 150px minmax(0,1fr) auto;gap:10px;align-items:end;}
.ap-v-melding:not(:empty){margin-top:8px;font-size:12.5px;padding:8px 12px;border-radius:var(--kader-sm);}
.ap-let-vak{background:var(--warning-bg);color:var(--warning);}
.ap-v-reslijst{list-style:none;margin:10px 0 0;padding:0;}
.ap-v-reslijst li{display:grid;grid-template-columns:150px minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:12.5px;padding:6px 0;border-bottom:1px dotted var(--border);}
.ap-v-reslijst li:last-child{border-bottom:none;}
.ap-v-reslijst li span{color:var(--muted);}
.ap-v-reslijst li strong{font-weight:700;color:var(--charcoal);min-width:0;overflow-wrap:anywhere;}
.ap-v-reslijst li small{color:var(--muted);}
.ap-v-eerder{margin-top:8px;font-size:12.5px;}
.ap-v-eerder summary{cursor:pointer;color:var(--royal);font-weight:700;}
.ap-v-labelrij{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.ap-v-labelrij .ws-v-uitleg{flex:1 1 180px;margin:0;}
.ap-label{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--bone-lijn);border-radius:var(--kader-sm);padding:10px 14px;background:var(--white);max-width:100%;}
.ap-label-qr svg{width:96px;height:96px;display:block;}
.ap-label-tekst{display:flex;flex-direction:column;gap:2px;font-size:11.5px;min-width:0;color:var(--muted);}
.ap-label-merk{font-weight:900;font-style:italic;color:var(--royal);font-size:12px;}
.ap-label-tekst strong{font-size:14px;font-weight:800;color:var(--charcoal);overflow-wrap:anywhere;}
@media(max-width:640px){
    .ap-v-res{grid-template-columns:1fr 1fr;}
  .ap-v-res-voor{grid-column:1 / -1;}
  .ap-v-res .btn-ghost{grid-column:1 / -1;}
  .ap-v-reslijst li{grid-template-columns:1fr auto;}
  .ap-v-reslijst li span{grid-column:1 / -1;}
  .ap-agenda li{grid-template-columns:1fr;gap:0;}
  .ap-agenda li:nth-child(n+6){display:none;}
  .ap-raster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
    .ap-selbalk .btn-ghost{margin-left:0;}
}

/* Paklijst van een draaidag: vertrek en terugkomst, reserveren */
.dg-pak-res{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--royal-wash);border-radius:var(--kader-sm);padding:10px 14px;margin:0 0 12px;font-size:13px;}
.dg-pak-botst{display:block;color:var(--warning) !important;font-weight:700;}
.dg-pak-uitleg{font-size:13px;color:var(--muted);margin:0 0 12px;}
.ws-v-weg{margin-right:auto;}

/* Sets (3.56.0) */
.ap-tabtel{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-left:2px;}
.ld-tab.aan .ap-tabtel{color:var(--royal);}
.ap-sets-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.ap-sets-kop .ws-v-uitleg{margin:0;max-width:640px;}
.ap-setkaart .ap-k-tekst{padding-left:14px;}
.ap-setkaart{border-left:3px solid var(--royal);}
.as-tel{display:inline-block;font-size:11px;font-weight:800;background:var(--royal);color:#fff;border-radius:var(--kader-xs);padding:1px 7px;margin-left:6px;letter-spacing:0;vertical-align:1px;}
.as-zoek{margin-bottom:10px;}
.as-kies{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:var(--kader-sm);padding:10px 12px;background:var(--white);}
.as-groep{border:none;margin:0;padding:0;min-width:0;}
.as-groep legend{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:4px;}
.as-item{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px dotted var(--border);cursor:pointer;font-size:13px;}
.as-item:last-child{border-bottom:none;}
.as-item:hover{background:var(--royal-wash);}
.as-item input{width:16px;height:16px;margin:0;flex-shrink:0;cursor:pointer;}
.as-item > span{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.as-item strong{font-weight:700;color:var(--charcoal);}
.as-item small{font-size:11.5px;color:var(--muted);}
.as-item[hidden],.as-groep[hidden]{display:none;}
.dg-pak-set{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--royal-wash);border-radius:var(--kader-sm);padding:10px 14px;margin:0 0 12px;font-size:13px;color:var(--charcoal);}
.dg-pak-set label{font-weight:700;}
.dg-pak-set .dg-knop{margin-left:auto;}
.dg-pak-set select{font:inherit;font-size:12.5px;padding:7px 9px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-width:0;max-width:100%;}
.pp-knop-weg{padding:0 10px;}
.pp-knop-weg:hover{border-color:#fff;background:var(--danger);}
.ap-v-res input,.ap-v-res select,.ap-v-res .btn-ghost{height:42px;box-sizing:border-box;}

/* ════════════════════════════════════════════════════════════
   ACQUISITIE (3.57.0)
   ════════════════════════════════════════════════════════════ */
.aq-leeg .aq-snel{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:4px;}
.aq-groep{margin-bottom:22px;}
.aq-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.aq-kaart{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--royal);border-radius:var(--kader);min-width:0;overflow:hidden;}
.aq-kaart:hover{border-color:var(--royal-40);border-left-color:var(--royal);}
.aq-st-gepland{border-left-color:var(--cyan);}
.aq-st-gepland:hover{border-left-color:var(--cyan);}
.aq-st-idee{border-left:1px dashed var(--bone-rand);border-style:dashed;}
.aq-st-klaar{border-left-color:var(--bone-rand);}
.aq-kaart-knop{display:flex;flex-direction:column;gap:6px;width:100%;background:none;border:none;padding:14px 16px;text-align:left;font:inherit;color:var(--charcoal);cursor:pointer;min-width:0;}
.aq-kaart-knop:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.aq-k-kop{display:flex;align-items:center;gap:8px;min-width:0;}
.aq-kanaal{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--royal-wash);color:var(--royal);padding:3px 8px;border-radius:var(--kader-xs);white-space:nowrap;}
.aq-k-periode{font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.aq-k-naam{font-size:15px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;}
.aq-k-doelgroep{font-size:12px;color:var(--muted);margin-top:-3px;}
.aq-k-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--border);}
.aq-k-cijfers > span{display:flex;flex-direction:column;min-width:0;}
.aq-k-cijfers b{font-size:18px;font-weight:900;color:var(--royal);line-height:1.15;}
.aq-k-cijfers b em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);}
.aq-k-cijfers small{font-size:11px;color:var(--muted);}
.aq-k-balk{display:block;height:6px;background:var(--bone);border-radius:0 4px 0 4px;overflow:hidden;}
.aq-k-balk i{display:block;height:100%;background:var(--royal);border-radius:0 4px 0 4px;}
.aq-k-stap{display:flex;align-items:baseline;gap:6px;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.aq-k-stap b{font-weight:700;}
.aq-k-stap i,.aq-stap-datum i{flex-shrink:0;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--danger);margin-right:5px;}
.aq-k-stap.aq-stap-telaat{color:var(--danger);}
.aq-st-klaar .aq-k-stap{white-space:normal;color:var(--charcoal);}

/* Stappen deze week */
.aq-stappen{margin-bottom:22px;}
.aq-stappenlijst{list-style:none;margin:0;padding:0;}
.aq-stap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 90px 30px;gap:14px;align-items:center;padding:9px 16px;font-size:13px;border-left:3px solid transparent;}
.aq-stap:nth-child(even){background:var(--bone);}
.aq-stap-telaat{border-left-color:var(--danger);}
.aq-stap-vandaag{border-left-color:var(--cyan);}
.aq-vink{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;}
.aq-vink input{width:17px;height:17px;margin:0;flex-shrink:0;cursor:pointer;accent-color:var(--royal);}
.aq-vink span{min-width:0;overflow-wrap:anywhere;}
.aq-stap-actie{font:inherit;font-size:12.5px;font-weight:700;color:var(--royal);background:none;border:none;padding:0;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.aq-stap-actie:hover{text-decoration:underline;}
.aq-stap-datum{font-size:12.5px;color:var(--charcoal);white-space:nowrap;}
.aq-stap-telaat .aq-stap-datum{color:var(--danger);font-weight:700;}
.aq-stap-wie{justify-self:end;}

/* Per kanaal */
.aq-kanalen{margin-top:6px;}
.aq-kanalen h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--royal);margin:0 0 4px;}
.aq-kanalen .ws-v-uitleg{margin:0 0 10px;}
.aq-tabel{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.aq-tr{display:grid;grid-template-columns:minmax(130px,1.4fr) repeat(5,minmax(70px,1fr));gap:12px;align-items:center;padding:10px 16px;font-size:13px;}
.aq-tr.aq-geld{grid-template-columns:minmax(130px,1.4fr) repeat(6,minmax(70px,1fr));}
.aq-tr:not(.aq-th):nth-child(odd){background:var(--bone);}
.aq-th{background:var(--royal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.aq-tr > span{min-width:0;}
.aq-tr small{color:var(--muted);font-size:11.5px;}
.aq-td-naam{font-weight:800;}
.aq-beste .aq-td-naam::after{content:"Meeste opbrengst";margin-left:8px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--royal);padding:2px 6px;border-radius:var(--kader-xs);vertical-align:1px;display:inline-block;white-space:nowrap;}
.aq-mlbl{display:none;}

/* Het venster */
.aq-v-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;background:var(--royal);border-radius:var(--kader-sm);padding:14px 16px;margin-top:4px;}
.aq-v-cijfers > div{display:flex;flex-direction:column;gap:1px;min-width:0;}
.aq-v-cijfers span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);}
.aq-v-cijfers b{font-size:22px;font-weight:900;color:var(--yellow);line-height:1.2;}
.aq-v-cijfers b em{font-style:normal;font-size:13px;color:rgba(255,255,255,.7);}
.aq-v-cijfers small{font-size:11.5px;color:#fff;}
.aq-v-stappen{list-style:none;margin:0 0 12px;padding:0;}
.aq-v-stappen li{display:grid;grid-template-columns:minmax(0,1fr) 80px 70px 26px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dotted var(--border);font-size:13px;}
.aq-v-stappen li:last-child{border-bottom:none;}
.aq-v-stappen .aq-stap-klaar .aq-vink span{text-decoration:line-through;color:var(--muted);}
.aq-v-stappen .aq-stap-wie{font-size:12px;color:var(--muted);justify-self:start;}
.aq-v-stapnieuw{display:grid;grid-template-columns:minmax(0,1fr) 150px 150px auto;gap:10px;align-items:end;}
.aq-v-stapnieuw input,.aq-v-stapnieuw select,.aq-v-stapnieuw .btn-ghost{height:42px;box-sizing:border-box;}
.aq-v-leads{margin-bottom:12px;}
.aq-v-lead{font:inherit;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 80px;gap:12px;align-items:center;padding:9px 14px;background:var(--white);border:none;text-align:left;cursor:pointer;font-size:13px;color:var(--charcoal);}
.aq-v-lead:nth-child(even){background:var(--bone);}
.aq-v-lead:hover{background:var(--royal-wash);}
.aq-v-lead strong{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.aq-v-lead-w{text-align:right;font-weight:800;color:var(--royal);}
.aq-v-leadknoppen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.aq-v-koppel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;min-width:0;}
.aq-v-koppel select{font:inherit;font-size:12.5px;padding:8px 9px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-width:0;max-width:240px;}
.ld-f-actiekeuze{max-width:280px;}
@media(max-width:1100px){
  .aq-tr,.aq-tr.aq-geld{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px;padding:12px 16px;}
  .aq-th{display:none;}
  .aq-td-naam{grid-column:1 / -1;}
  .aq-mlbl{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
  .aq-stap{grid-template-columns:minmax(0,1fr) auto auto;}
  .aq-stap-actie{grid-column:1;grid-row:2;padding-left:27px;}
  .aq-stap-wie{grid-row:1 / span 2;grid-column:3;}
  .aq-stap-datum{grid-row:1;grid-column:2;}
}
@media(max-width:640px){
  .aq-raster{grid-template-columns:1fr;}
  .aq-tr,.aq-tr.aq-geld{grid-template-columns:repeat(2,minmax(0,1fr));}
  .aq-v-stapnieuw{grid-template-columns:1fr 1fr;}
  .aq-v-stapnieuw .ws-v-veld:first-child{grid-column:1 / -1;}
  .aq-v-stapnieuw .btn-ghost{grid-column:1 / -1;}
  .aq-v-stappen li{grid-template-columns:minmax(0,1fr) auto 26px;}
  .aq-v-stappen .aq-stap-wie{display:none;}
  .aq-v-koppel{margin-left:0;width:100%;}
  .aq-v-koppel select{flex:1;max-width:none;}
  .aq-v-lead{grid-template-columns:minmax(0,1fr) auto;}
  .aq-v-lead-w{grid-column:1 / -1;text-align:left;}
}
.aq-voorbij{color:var(--danger);font-weight:700;}
.aq-snel-lbl{font-size:12.5px;color:var(--muted);font-weight:600;}
.sb-item-lang{white-space:nowrap;letter-spacing:0;}
.tv-leeg .tv-fout-server{display:block;margin-top:8px;font-size:12.5px;color:var(--danger);overflow-wrap:anywhere;}
.tv-leeg .tv-opnieuw{margin-top:14px;}
.tv-leeg .tv-fout-uitleg{display:block;margin-top:6px;}

/* ════════════════════════════════════════════════════════════
   STATISTIEKEN PER PLATFORM (3.58.0)
   sti = de inzichten (klant en team), stv = het venster, sto = overzicht
   ════════════════════════════════════════════════════════════ */
.sti{display:flex;flex-direction:column;gap:14px;min-width:0;}
.sti-kop{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;}
.sti-maand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);}
.sti-maand select{font:inherit;font-size:13px;font-weight:700;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-height:38px;}
.sti-vgl{font-size:12px;color:var(--muted);line-height:1.4;}
.sti-vgl small{display:block;font-size:11px;}
.sti-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
.sti-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1.5px solid var(--border);}
.sti-tab{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1.5px;padding:9px 14px;cursor:pointer;}
.sti-tab i{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.sti-tab:hover{color:var(--royal);}
.sti-tab.aan{color:var(--royal);border-bottom-color:var(--royal);}
.sti-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.sti-let{background:var(--warning-bg);color:var(--charcoal);border-left:3px solid var(--warning);border-radius:var(--kader-sm);padding:10px 14px;font-size:12.5px;margin:0;}
.sti-let .btn-smb{margin-left:6px;}
.sti-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.sti-tegel{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;cursor:help;}
.sti-tegel-lbl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.sti-tegel b{font-size:22px;font-weight:900;color:var(--royal);line-height:1.2;}
.sti-tegel small{font-size:11.5px;color:var(--muted);}
.sti-d{font-weight:700;}
.sti-d.op{color:var(--success);}
.sti-d.neer{color:var(--danger);}
.sti-blok{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:16px 18px;min-width:0;}
.sti-blok h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--royal);margin:0 0 10px;}
.sti-blok-kop{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-bottom:10px;}
.sti-blok-kop h3{margin:0;}
.sti-sub{font-size:12px;color:var(--muted);margin:0;}
.sti-opvalt{background:var(--royal);border:none;color:#fff;}
.sti-opvalt h3{color:var(--yellow);}
.sti-opvalt ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;}
.sti-opvalt li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;}
.sti-opvalt li i{flex-shrink:0;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:var(--ic) center/16px no-repeat;mask:var(--ic) center/16px no-repeat;color:var(--yellow);}
.sti-c-op i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");}
.sti-c-neer i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6 6 4-4 8 8'/%3E%3Cpath d='M15 17h6v-6'/%3E%3C/svg%3E");}
.sti-c-ster i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E");}
.sti-c-tip i,.sti-c-gelijk i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");}
.sti-c-neer i{color:#fff;}
.sti-platforms{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.sti-pk{font:inherit;text-align:left;color:var(--charcoal);background:var(--white);border:1px solid var(--border);border-top:4px solid var(--pk);border-radius:var(--kader);padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:10px;min-width:0;}
.sti-pk:hover{border-color:var(--royal-40);border-top-color:var(--pk);}
.sti-pk:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.sti-pk-kop{display:flex;align-items:center;gap:8px;}
.sti-pk-kop i{width:10px;height:10px;border-radius:50%;background:var(--pk);}
.sti-pk-kop b{font-size:14px;font-weight:800;}
.sti-pk-kop small{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.sti-pk-cijfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;}
.sti-pk-cijfers > span{display:flex;flex-direction:column;min-width:0;}
.sti-pk-cijfers b{font-size:16px;font-weight:900;color:var(--royal);}
.sti-pk-cijfers small{font-size:10.5px;color:var(--muted);}
.sti-pk-cijfers em{font-style:normal;font-weight:700;}
.sti-pk-cijfers em.op,.sto-getal small.op{color:var(--success);}
.sti-pk-cijfers em.neer,.sto-getal small.neer{color:var(--danger);}
.sti-pk-beste{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px dotted var(--border);padding-top:8px;}
.sti-grafiek{position:relative;height:240px;}
.sti-ww{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;}
.sti-staaf-blok{min-width:0;}
.sti-staaf-blok h4{font-size:13px;font-weight:800;color:var(--charcoal);margin:0;}
.sti-staaf-blok .sti-sub{margin-bottom:8px;}
.sti-staven{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.sti-staven li{display:grid;grid-template-columns:minmax(90px,130px) minmax(0,1fr) 62px;gap:10px;align-items:center;font-size:12.5px;}
.sti-st-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sti-st-n small{color:var(--muted);margin-left:5px;font-size:11px;}
.sti-st-b{display:block;height:10px;background:var(--bone);border-radius:0 5px 0 5px;overflow:hidden;}
.sti-st-b i{display:block;height:100%;background:var(--royal-40);border-radius:0 5px 0 5px;}
.sti-staven li.beste .sti-st-b i{background:var(--royal);}
.sti-staven li.beste b{color:var(--royal);}
.sti-staven b{text-align:right;font-weight:800;color:var(--charcoal);white-space:nowrap;}
.sti-staven li > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sti-opbouw{display:flex;height:14px;border-radius:0 7px 0 7px;overflow:hidden;gap:2px;}
.sti-opbouw span:nth-child(1),.sti-ob-0{background:var(--royal);}
.sti-opbouw span:nth-child(2),.sti-ob-1{background:var(--cyan);}
.sti-opbouw span:nth-child(3),.sti-ob-2{background:#0A63B4;}
.sti-opbouw span:nth-child(4),.sti-ob-3{background:var(--charcoal);}
.sti-opbouw-leg{list-style:none;margin:10px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;}
.sti-opbouw-leg li{display:flex;align-items:center;gap:6px;}
.sti-opbouw-leg i{width:10px;height:10px;border-radius:2px;}
.sti-opbouw-leg small{color:var(--muted);}
.sti-posts{border:1px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;}
.sti-pr{display:grid;grid-template-columns:110px minmax(0,1fr) 100px 100px 100px;gap:12px;align-items:center;padding:9px 14px;font-size:13px;}
.sti-pr:not(.sti-ph):nth-child(odd){background:var(--bone);}
.sti-ph{background:var(--royal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:0 14px;}
.sti-th-knop{font:inherit;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:none;border:none;padding:10px 0;cursor:pointer;}
.sti-th-knop.aan{color:var(--yellow);}
.sti-ph > span:nth-child(n+3),.sti-pg{text-align:right;}
.sti-pr > span{min-width:0;}
.sti-pd{font-size:12.5px;}
.sti-pd small{display:block;color:var(--muted);font-size:11px;}
.sti-pn-kop{display:flex;align-items:center;gap:7px;min-width:0;}
.sti-pn-kop i{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.sti-pn-kop b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sti-pn small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:15px;}
.sti-pn a{color:var(--royal);font-weight:700;}
.sti-pg{font-weight:700;white-space:nowrap;}
.sti-pg small{font-weight:500;color:var(--muted);}
.sti-pe.g{color:var(--royal);}
.sti-pe.hg{color:var(--success);}
.sti-top .sti-pn-kop b::after{content:"Top 3";margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--royal);color:#fff;padding:1px 6px;border-radius:var(--kader-xs);vertical-align:1px;}
.sti-mlbl{display:none;}
.sti-meer{margin-top:10px;}
.sti-notitie p{margin:0;font-size:13.5px;line-height:1.6;}
.sti-uitleg summary{cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--royal);}
.sti-uitleg dl{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 16px;margin:12px 0 0;font-size:13px;}
.sti-uitleg dt{font-weight:800;}
.sti-uitleg dd{margin:0;color:var(--muted);line-height:1.5;}
@media(max-width:1100px){
  .sti-pr{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"naam naam naam" "datum bereik eng";gap:4px 12px;}
  .sti-ph{display:none;}
  .sti-pd{grid-area:datum;}
  .sti-pn{grid-area:naam;}
  .sti-pr > span:nth-child(3){grid-area:bereik;}
  .sti-pr > span:nth-child(4){display:none;}
  .sti-pr > span:nth-child(5){grid-area:eng;}
  .sti-mlbl{display:inline;font-size:10px;font-weight:700;color:var(--muted);margin-right:5px;text-transform:uppercase;letter-spacing:.06em;}
  .sti-pd small{display:inline;margin-left:5px;}
}
@media(max-width:760px){
  .sti-opvalt ul,.sti-ww{grid-template-columns:1fr;}
  .sti-uitleg dl{grid-template-columns:1fr;gap:2px;}
  .sti-uitleg dd{margin-bottom:8px;}
}
@media(max-width:640px){
  .sti-knoppen{margin-left:0;width:100%;}
  .sti-knoppen > *{flex:1 1 auto;}
  .sti-vgl{flex-basis:100%;}
  .sti-tegels{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sti-tab{padding:9px 10px;}
  .sti-grafiek{height:200px;}
  .sti-staven li{grid-template-columns:minmax(80px,100px) minmax(0,1fr) 54px;}
  .sti-blok{padding:14px;}
}

/* Het venster */
.stv{max-width:980px;}
.stv .ws-v-kop{align-items:center;gap:12px;flex-wrap:wrap;}
.stv-maandnav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.stv-maandnav select{font:inherit;font-size:13px;font-weight:700;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);height:34px;}
.stv-maandnav .es-pijl:disabled{opacity:.35;cursor:default;}
.stv-tabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;padding:0 24px;border-bottom:1.5px solid var(--border);scrollbar-width:none;flex-shrink:0;}
.stv-tabs::-webkit-scrollbar{display:none;}
.stv-tab{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1.5px;padding:10px 12px;cursor:pointer;white-space:nowrap;}
.stv-tab i{width:9px;height:9px;border-radius:50%;}
.stv-tab.aan{color:var(--royal);border-bottom-color:var(--royal);}
.stv-tab:hover{color:var(--royal);}
.stv-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.stv-ophalen{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;}
.stv-ophalen h3{margin-bottom:4px;}
.stv-ophalen .ws-v-uitleg{margin:0;}
.stv-ophaalknoppen{display:flex;gap:8px;flex-wrap:wrap;}
.stv-stand{flex-basis:100%;min-width:0;border-top:1px solid var(--border);padding-top:12px;}
.stv-stand-kop{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:8px;}
.stv-stand-kop small{font-size:11.5px;color:var(--muted);}
.stv-stand-kop .btn-smb{padding-left:0;padding-right:0;}
.stv-stand-kop .btn-smb:hover{background:none;text-decoration:underline;}
.stv-stand-rij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;}
.stv-stand-m{width:100%;height:34px;border-radius:var(--kader-xs);font:600 11px Montserrat,sans-serif;cursor:pointer;border:1px solid transparent;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stv-stand-m.ok{background:var(--royal);color:#fff;}
.stv-stand-m.half{background:var(--royal-wash);color:var(--royal);border:1px dashed var(--royal);}
.stv-stand-m.mist{background:#fff;color:var(--danger);border-color:var(--danger);}
.stv-stand-m:focus-visible{outline:2px solid var(--royal);outline-offset:2px;}
.stv-stand-m:disabled{opacity:.6;cursor:wait;}
.stv-stand-leg{font-size:11.5px;color:var(--muted);margin:8px 0 0;display:flex;align-items:center;gap:4px 6px;flex-wrap:wrap;}
.stv-stand-leg{gap:4px 14px;}
.stv-stand-leg>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.stv-stand-leg>span:last-child{white-space:normal;}
.stv-stand-leg i{display:inline-block;width:10px;height:10px;border-radius:2px;box-sizing:border-box;}
.stv-stand-leg .ok{background:var(--royal);}
.stv-stand-leg .half{background:var(--royal-wash);border:1px dashed var(--royal);}
.stv-stand-leg .mist{background:#fff;border:1px solid var(--danger);}
@media (max-width:700px){.stv-stand-rij{grid-template-columns:repeat(6,minmax(0,1fr));}}
.stv-overzicht{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.stv-pk{font:inherit;text-align:left;color:var(--charcoal);background:var(--white);border:1px solid var(--border);border-top:4px solid var(--pk);border-radius:var(--kader-sm);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-width:0;}
.stv-pk:hover{border-color:var(--royal-40);border-top-color:var(--pk);}
.stv-pk-kop{display:flex;flex-direction:column;gap:1px;}
.stv-pk-kop i{display:none;}
.stv-pk-kop b{font-size:13.5px;font-weight:800;}
.stv-pk-kop small{font-size:10.5px;color:var(--muted);font-weight:600;}
.stv-pk-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;font-size:10.5px;color:var(--muted);}
.stv-pk-cijfers span{display:flex;flex-direction:column;min-width:0;}
.stv-pk-cijfers b{font-size:14px;font-weight:900;color:var(--royal);}
.stv-pk-leeg{font-size:12px;color:var(--muted);}
.stv-rij{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.stv-rij .ws-v-veld{flex:0 1 260px;}
.stv-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;background:var(--royal-wash);border-radius:var(--kader-sm);padding:10px 14px;margin:0 0 4px;}
.stv-meta i{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.stv-meta .btn-smb{margin-left:auto;}
.stv-velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;}
.stv-uit{display:block;font-size:15px;font-weight:800;color:var(--royal);padding:9px 0;}
.stv-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.stv-kop h3{margin:0;}
.stv-posts{border:1px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;}
.stv-pr{display:grid;grid-template-columns:128px minmax(0,1fr) 108px 88px 88px 88px 30px;gap:8px;align-items:center;padding:8px 10px;font-size:12.5px;}
.stv-pr:not(.stv-ph):nth-child(odd){background:var(--bone);}
.stv-ph{background:var(--royal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:9px 10px;}
.stv-pr input,.stv-pr select{font:inherit;font-size:12.5px;width:100%;min-width:0;padding:6px 8px;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);box-sizing:border-box;height:34px;}
.stv-pr .stv-uit{font-size:12.5px;padding:0;font-weight:700;}
.stv-pr > span{min-width:0;}
.stv-pn b{font-weight:700;}
.stv-pn a{font-size:11.5px;color:var(--royal);font-weight:700;}
.stv-ow{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;align-items:center;}
.stv-ow select{width:auto;height:26px;padding:2px 6px;font-size:11px;color:var(--muted);}
.stv-chip{font:inherit;font-size:10.5px;font-weight:700;color:var(--royal);background:var(--royal-wash);border:none;border-radius:var(--kader-xs);padding:3px 8px;cursor:pointer;}
.stv-chip:hover{background:var(--royal-20);}
.stv-mlbl{display:none;}
.stv-gekoppeld{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:var(--royal-wash);border-radius:var(--kader-sm);padding:12px 14px;margin-bottom:10px;}
.stv-gekoppeld > div{display:flex;flex-direction:column;gap:1px;min-width:0;}
.stv-lbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.stv-gekoppeld strong{font-size:13.5px;color:var(--royal);overflow-wrap:anywhere;}
.stv-gekoppeld small{font-size:11.5px;color:var(--muted);}
.stv-fout{font-size:12.5px;color:var(--danger);margin:0 0 8px;}
.stv-opm{border:1px solid var(--border);border-radius:var(--kader-sm);padding:10px 14px;margin:0 0 10px;font-size:12.5px;}
.stv-opm ul{margin:6px 0;padding-left:18px;}
.stv-opm li{margin:3px 0;line-height:1.45;overflow-wrap:anywhere;}
.stv-opm small{color:var(--muted);}
.stv-opm-let{border-color:var(--danger);background:var(--danger-bg);}
.stv-opm-let .stv-lbl{color:var(--danger);}
.stv-test{border:1px solid var(--border);border-radius:var(--kader-sm);padding:12px 14px;margin:12px 0 0;min-width:0;}
.stv-test-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;}
.stv-test h4{font-size:13px;color:var(--royal);margin:12px 0 6px;}
.stv-test details{border-top:1px solid var(--border);padding:7px 0;}
.stv-test summary{cursor:pointer;font-size:12px;font-family:monospace;overflow-wrap:anywhere;line-height:1.5;}
.stv-test pre{margin:8px 0 2px;padding:10px 12px;background:var(--bone-vlak);border-radius:var(--kader-xs);font-size:11.5px;line-height:1.45;max-height:280px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;}
.stv-t-ok,.stv-t-fout{display:inline-block;font-family:Montserrat,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:var(--kader-xs);margin-right:4px;}
.stv-t-ok{background:var(--royal-wash);color:var(--royal);}
.stv-t-fout{background:var(--danger-bg);color:var(--danger);}
.stv-koppelvelden{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:10px;align-items:end;margin:12px 0 8px;}
.stv-koppelvelden input,.stv-koppelvelden .btn-blue{height:42px;box-sizing:border-box;}
.stv-koppelvelden input{font-family:monospace;}
.stv-hoe summary{cursor:pointer;font-size:12.5px;font-weight:800;color:var(--royal);}
.stv-hoe ol{margin:10px 0 0;padding-left:20px;font-size:13px;line-height:1.6;}
.stv-schakel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dotted var(--border);cursor:pointer;}
.stv-schakel:last-child{border-bottom:none;}
.stv-schakel > span:first-child{display:flex;flex-direction:column;min-width:0;}
.stv-schakel b{font-size:13.5px;font-weight:700;}
.stv-schakel small{font-size:12px;color:var(--muted);}
.stv-hoofd{border-bottom:none;}
.stv-bewaard{margin-right:auto;font-size:12px;color:var(--muted);}
@media(max-width:900px){
  .stv-overzicht{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stv-pr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 30px;grid-template-areas:"naam naam naam weg" "datum formaat formaat formaat" "bereik weergaven interacties interacties";gap:6px 8px;padding:10px;}
  .stv-ph{display:none;}
  .stv-pr > span:nth-child(1){grid-area:datum;}
  .stv-pr > span:nth-child(2){grid-area:naam;}
  .stv-pr > span:nth-child(3){grid-area:formaat;}
  .stv-pr > span:nth-child(4){grid-area:bereik;}
  .stv-pr > span:nth-child(5){grid-area:weergaven;}
  .stv-pr > span:nth-child(6){grid-area:interacties;}
  .stv-pr > span:nth-child(7){grid-area:weg;justify-self:end;}
  .stv-mlbl{display:block;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
  .stv-koppelvelden{grid-template-columns:1fr;}
  .stv-gekoppeld{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .stv-velden{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stv-tabs{padding:0 12px;}
  .stv-maandnav{margin-left:0;width:100%;}
  .stv-maandnav select{flex:1;}
  .stv .ws-v-kop .ws-v-sluit{position:absolute;top:14px;right:14px;}
  .stv .ws-v-kop{position:relative;padding-right:56px;}
}

/* Overzicht op de pagina Statistieken */
.sto-hint{font-size:11.5px;color:var(--muted);}
.sto-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.sto-tabel{min-width:860px;}
.sto-tabel thead th{background:var(--royal);color:#fff;border-bottom:none;padding:10px 14px;}
.sto-tabel thead th:first-child{border-radius:0;}
.sto-tabel tbody tr:nth-child(even) td{background:var(--bone);}
.sto-tabel tbody tr:hover td{background:var(--royal-wash);}
.sto-th button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;letter-spacing:inherit;text-transform:inherit;}
.sto-th button:hover{color:var(--yellow);}
.sto-klant{font:inherit;font-weight:800;color:var(--charcoal);background:none;border:none;padding:0;cursor:pointer;text-align:left;}
.sto-klant:hover{color:var(--royal);text-decoration:underline;}
.sto-uit{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:var(--kader-xs);background:var(--bone-vlak);color:var(--muted);vertical-align:1px;}
.sto-plat{white-space:normal;}
.sto-p{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;margin:2px 8px 2px 0;white-space:nowrap;}
.sto-p i{width:8px;height:8px;border-radius:50%;background:var(--pk);}
.sto-p em{font-style:normal;color:var(--success);font-size:8px;}
.sto-getal{font-weight:800;white-space:nowrap;}
.sto-getal small{font-weight:700;}
.sto-getal.g{color:var(--royal);}
.sto-getal.hg{color:var(--success);}
.sto-wanneer{font-size:12px;color:var(--muted);white-space:nowrap;}
.sto-fout{display:block;color:var(--danger);font-size:11px;font-weight:700;}
.sto-acties{white-space:nowrap;text-align:right;}
.sto-acties > *{margin-left:4px;}
.sti-nieuw{margin-top:-6px;}
.stv{height:min(880px,calc(100vh - 48px));}
.stv .ws-v-veld textarea{font:inherit;font-size:13px;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);resize:vertical;min-width:0;width:100%;box-sizing:border-box;}
.stv .ws-v-veld input:focus,.stv .ws-v-veld select:focus,.stv .ws-v-veld textarea:focus,.stv-pr input:focus,.stv-pr select:focus{border-color:var(--royal);outline:none;}
.stv .ws-v-veld{display:flex;flex-direction:column;gap:5px;}
.stv-rij .ws-v-veld{flex:0 1 340px;}
@media(max-width:640px){.stv{height:92vh;}}
.sto-wrap,.stv-posts,.sti-posts{position:relative;}
@media(max-width:640px){
  .sti-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .sti-tabs::-webkit-scrollbar{display:none;}
  .sti-tab{white-space:nowrap;flex-shrink:0;}
}
.sto-tabel thead th{vertical-align:middle;line-height:1.3;}
.sto-th button{display:inline-flex;align-items:center;gap:4px;line-height:1.3;}
.sto-tabel td{vertical-align:middle;}
.stv-velden{align-items:end;}
.stv .ws-v-lijf{flex:1 1 auto;overflow-y:auto;}
.sti-d-op{font-weight:500;color:var(--muted);}
.stv-knoppenrij{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.stv-knoppenrij{column-gap:18px;}
.stv-knoppenrij>.btn-smb{padding-left:0;padding-right:0;}
.stv-knoppenrij>.btn-smb:hover{background:none;text-decoration:underline;}
.stv-keuze{margin-bottom:10px;}

/* ═══ Maandrapportage mailen (3.61.0) ═══ */
.stv-rapport{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.stv-rapport-knoppen{display:flex;gap:8px;flex-wrap:wrap;}
.stv-rapport .ws-v-uitleg{margin:0;}
.ws-venster.mrm{max-width:1080px;height:min(820px,calc(100vh - 48px));}
.mrm-lijf{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;}
.mrm-form{overflow-y:auto;padding:4px 24px 18px;display:flex;flex-direction:column;gap:16px;min-width:0;}
.mrm-form .ws-v-veld textarea{min-height:0;resize:vertical;}
.mrm-aan{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.mrm-ontv{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--kader-sm);cursor:pointer;background:var(--white);}
.mrm-ontv:has(input:checked){border-color:var(--royal);background:var(--royal-wash);}
.mrm-ontv input{margin-top:3px;accent-color:var(--royal);}
.mrm-ontv span{display:flex;flex-direction:column;min-width:0;}
.mrm-ontv b{font-size:13px;color:var(--black);overflow-wrap:anywhere;}
.mrm-ontv small{font-size:12px;color:var(--muted);overflow-wrap:anywhere;}
.mrm-bijlage{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--kader-sm);background:var(--bone);}
.mrm-pdf-ico{width:38px;height:38px;flex-shrink:0;border-radius:var(--kader-xs);background:var(--royal);color:#fff;display:flex;align-items:center;justify-content:center;}
.mrm-pdf-tekst{flex:1;min-width:0;display:flex;flex-direction:column;}
.mrm-pdf-tekst b{font-size:13px;color:var(--royal);overflow-wrap:anywhere;}
.mrm-pdf-tekst small{font-size:12px;color:var(--muted);}
.mrm-bijlage .btn-smb{text-decoration:none;flex-shrink:0;}
.mrm-draai{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--royal);border-radius:50%;animation:mrm-draai .8s linear infinite;flex-shrink:0;}
@keyframes mrm-draai{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.mrm-draai{animation:none;}}
.mrm-kopie{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:10px;cursor:pointer;}
.mrm-kopie input{accent-color:var(--royal);}
.mrm-vb{display:flex;flex-direction:column;background:var(--bone-vlak);border-left:1px solid var(--border);min-width:0;min-height:0;}
.mrm-vb-lbl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:12px 18px 8px;}
.mrm-vb iframe{flex:1;width:100%;border:0;background:#fff;min-height:0;}
.mrm-status{flex:1;align-self:center;font-size:12.5px;color:var(--muted);min-width:0;}
@media (max-width:900px){
  .ws-venster.mrm{height:calc(100vh - 32px);}
  .mrm-lijf{display:flex;flex-direction:column;overflow-y:auto;}
  .mrm-form{overflow:visible;}
  .mrm-vb{border-left:0;border-top:1px solid var(--border);min-height:520px;}
}
.mrm-form .ws-v-veld textarea{font:inherit;font-weight:500;font-size:13px;line-height:1.55;color:var(--charcoal);padding:9px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);width:100%;min-width:0;}
.mrm-form .ws-v-veld textarea:focus,.mrm-form .ws-v-veld input:focus{outline:none;border-color:var(--royal);}
.mrm-form .ws-v-blok > .ws-v-uitleg{margin:0 0 10px;}
.mrm-form .ws-v-veld + .ws-v-veld{margin-top:10px;}

/* ═══ Per platform als rij (3.62.0) ═══ */
.sti-prijen{display:flex;flex-direction:column;gap:8px;}
.sti-prij{font:inherit;text-align:left;color:var(--charcoal);background:var(--white);border:1px solid var(--border);border-left:4px solid var(--pk);border-radius:var(--kader);padding:12px 16px;cursor:pointer;width:100%;min-width:0;
  display:grid;grid-template-columns:minmax(120px,1.1fr) repeat(5,minmax(0,.8fr)) minmax(0,1.7fr);gap:6px 16px;align-items:center;}
.sti-prij:hover{border-color:var(--royal-40);border-left-color:var(--pk);background:var(--bone);}
.sti-prij:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.sti-prij-naam{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sti-prij-titel{display:flex;align-items:center;gap:8px;min-width:0;}
.sti-prij-titel i{width:10px;height:10px;border-radius:50%;background:var(--pk);flex-shrink:0;}
.sti-prij-titel b{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sti-prij-naam small{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-left:18px;}
.sti-prij-c{display:flex;flex-direction:column;min-width:0;}
.sti-prij-c small,.sti-prij-beste small{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sti-prij-c b{font-size:17px;font-weight:900;color:var(--royal);line-height:1.25;white-space:nowrap;}
.sti-prij-c em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);}
.sti-prij-c em.op{color:var(--success);}
.sti-prij-c em.neer{color:var(--danger);}
.sti-prij-beste{display:flex;flex-direction:column;min-width:0;border-left:1px dotted var(--border);padding-left:14px;}
.sti-prij-beste > span{font-size:12.5px;color:var(--charcoal);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;}
@media (max-width:1280px){
  .sti-prij{grid-template-columns:minmax(110px,1.2fr) repeat(5,minmax(0,1fr));}
  .sti-prij-beste{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px dotted var(--border);padding-top:8px;flex-direction:row;gap:8px;align-items:baseline;}
  .sti-prij-beste > span{-webkit-line-clamp:1;}
}
@media (max-width:700px){
  .sti-prij{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;}
  .sti-prij-naam{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;}
  .sti-prij-naam small{padding-left:0;}
  .sti-prij-beste{flex-direction:column;gap:2px;}
}

/* ═══ Statistiekenpagina (3.62.0) ═══ */
.sto-balk{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-bottom:14px;}
.sto-maand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);}
.sto-maand select{font:inherit;font-size:13px;font-weight:700;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);}
.sto-balk-tekst{font-size:12.5px;color:var(--muted);flex:1;min-width:200px;}
.sto-kpis{grid-template-columns:repeat(6,minmax(0,1fr));}
.sto-van{font-size:13px;font-weight:700;color:var(--muted);}
.sto-twee{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:stretch;}
.sto-twee > .card{margin-bottom:0;min-width:0;}
.sto-grafiek-kaart .card-hdr,.sto-aandacht-kaart .card-hdr{flex-wrap:wrap;gap:8px 12px;}
.sto-grafiek{position:relative;height:260px;}
.sto-grafiek .sto-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.sto-aandacht{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.sto-aandacht li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--border);font-size:12.5px;line-height:1.45;}
.sto-aandacht li:first-child{border-top:0;padding-top:2px;}
.sto-aandacht li svg{margin-top:1px;}
.sto-aandacht li span{min-width:0;overflow-wrap:anywhere;}
.sto-aandacht li b{font-weight:800;color:var(--charcoal);}
.sto-aandacht .btn-smb{padding:2px 0;white-space:nowrap;}
.sto-a-fout svg{color:var(--danger);}
.sto-a-gat svg{color:var(--warning);}
.sto-a-rapport svg{color:var(--royal);}
.sto-alles-goed{font-size:13px;color:var(--muted);line-height:1.5;margin:0;}
.sto-tabel{min-width:980px;}
.sto-tabel th.sto-r,.sto-tabel td.sto-getal{text-align:right;}
.sto-tabel th.sto-r button{justify-content:flex-end;}
.sto-getal small{display:block;font-size:11px;line-height:1.2;}
.sto-getal small.op{color:var(--success);} .sto-getal small.neer{color:var(--danger);}
.sto-tabel tr.sto-leeg td.sto-getal{color:var(--muted);font-weight:600;}
.sto-rapport{white-space:nowrap;font-size:12px;}
.sto-r-ok{display:inline-block;font-weight:700;color:var(--success);}
.sto-r-open{font:inherit;font-size:12px;font-weight:700;color:var(--royal);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.sto-naam{min-width:150px;}
.sto-naam .sto-fout,.sto-naam .sto-uit{margin:3px 0 0;}
.sto-naam .sto-uit{display:table;margin-left:0;}
.sto-acties .btn-smb{padding-left:6px;padding-right:0;}
.sto-acties .btn-ghost:disabled{opacity:.45;cursor:default;}
@media (max-width:1280px){ .sto-kpis{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:1100px){ .sto-twee{grid-template-columns:1fr;} }
@media (max-width:600px){ .sto-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} .sto-grafiek{height:220px;} }
.ddown{color:var(--danger);}
@media (max-width:1280px){ .sti-prij-beste small{overflow:visible;flex-shrink:0;} }
.sto-acties .st-ico{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;}
.sto-acties .btn-smb{vertical-align:middle;}
@media (max-width:600px){ #stats-overview-metrics.sto-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;} #stats-overview-metrics .mcard{padding:12px 14px;} #stats-overview-metrics .mcard-val{font-size:22px;} }
#st-klanten > .sto-balk, #st-klanten > .sto-twee{margin-bottom:0;}

/* ═══ ONZE WEBSITE (3.63.0) ═══════════════════════════════════════
   De pagina Onze website (js/site-beheer.js): projecten, cases,
   klantlogo's en versies van inframeagency.nl. */
.ow-kopknoppen{display:flex;gap:8px;flex-wrap:wrap;}
.ow-flex{flex:1 1 auto;}
.ow-start{max-width:640px;}
.ow-stand{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px 16px;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:14px 18px;margin:4px 0 14px;}
.ow-stand-stip{width:10px;height:10px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px var(--success-bg);}
.ow-stand-open .ow-stand-stip{background:#C98A00;box-shadow:0 0 0 4px var(--warning-bg);}
.ow-stand-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12.5px;color:var(--muted);}
.ow-stand-tekst strong{font-size:13.5px;color:var(--charcoal);}
.ow-stand-cijfers{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.ow-stand-cijfers b{color:var(--charcoal);font-weight:800;}
.ow-stand-cijfers i{font-style:normal;margin:0 7px;color:var(--bone-rand);}
.ow-stand-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--royal);text-decoration:none;white-space:nowrap;}
.ow-stand-link svg{width:15px;height:15px;}
.ow-stand-link:hover span{text-decoration:underline;}
.ow-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 4px;}
.ow-tab{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:700;color:var(--charcoal);background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:7px 13px;cursor:pointer;}
.ow-tab em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);}
.ow-tab:hover{border-color:var(--royal);}
.ow-tab.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.ow-tab.aan em{color:var(--cyan-40);}
.ow-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.ow-rij{margin-top:18px;}
.ow-rij-kop{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
.ow-rij-kop h3{font-size:15px;font-weight:800;color:var(--royal);margin:0;}
.ow-rij-kop span{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:760px;}
.ow-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.ow-kaart{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;min-width:0;}
.ow-kaart-beeld{position:relative;display:block;width:100%;aspect-ratio:380/260;border:none;padding:0;cursor:pointer;background:var(--gradient);background-size:cover;background-position:center;}
.ow-kaart-beeld:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.ow-kaart-chips{position:absolute;top:10px;left:10px;display:flex;gap:6px;}
.ow-chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:0 8px 0 8px;line-height:1.2;}
.ow-chip-case{background:var(--royal);color:#fff;}
.ow-chip-uit{background:var(--charcoal);color:#fff;}
.ow-kaart-leeg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:12px;font-weight:700;}
.ow-kaart-leeg svg{width:24px;height:24px;}
.ow-verborgen .ow-kaart-beeld,.ow-verborgen .ow-logo-beeld img{filter:grayscale(1);opacity:.55;}
.ow-kaart-tekst{display:flex;flex-direction:column;gap:2px;padding:12px 14px 4px;min-width:0;}
.ow-kaart-soort{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ow-kaart-tekst strong{font-size:14px;font-weight:800;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ow-kaart-acties{display:flex;align-items:center;gap:6px;padding:8px 14px 12px;margin-top:auto;}
.ow-kaart-acties .ws-ic-knop:disabled,.ow-blok-kop .ws-ic-knop:disabled{opacity:.35;cursor:default;border-color:var(--border);background:var(--white);}
.ow-nieuw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;font:inherit;font-size:12.5px;font-weight:700;color:var(--royal);background:var(--bone);border:1.5px dashed var(--bone-rand);border-radius:var(--kader);cursor:pointer;padding:16px;}
.ow-nieuw svg{width:22px;height:22px;}
.ow-nieuw:hover{border-color:var(--royal);background:var(--royal-wash);}
.ow-nieuw:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
/* Klantlogo's */
.ow-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.ow-logo{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;min-width:0;}
.ow-logo-beeld{position:relative;display:flex;align-items:center;justify-content:center;height:110px;padding:16px;border:none;border-bottom:1px solid var(--border);background:var(--white);cursor:pointer;}
.ow-logo-beeld img{max-height:56px;max-width:80%;object-fit:contain;}
.ow-logo-beeld .ow-kaart-leeg{color:var(--royal);}
.ow-logo-beeld .ow-chip{position:absolute;top:10px;left:10px;}
.ow-logo-beeld:hover{background:var(--bone);}
.ow-logo-naam{font:inherit;font-size:13px;font-weight:700;color:var(--charcoal);margin:10px 14px 0;padding:7px 9px;border:1.5px solid transparent;border-radius:var(--kader-xs);background:var(--bone);min-width:0;}
.ow-logo-naam:hover{border-color:var(--border);}
.ow-logo-naam:focus{outline:none;border-color:var(--royal);background:var(--white);}
.ow-nieuw-logo{min-height:200px;}
/* Versies */
.ow-versies{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:4px 16px;}
.ow-opnieuw{display:flex;align-items:center;gap:16px;margin-top:14px;padding:14px 16px;background:var(--bone);border-radius:var(--kader);font-size:12.5px;color:var(--muted);line-height:1.55;}
.ow-opnieuw strong{color:var(--charcoal);}
.ow-opnieuw .btn-ghost{flex-shrink:0;}
/* Het venster van een project */
.ws-venster.ow-venster{max-width:880px;}
.ow-v-tabs{padding:0 24px 12px;border-bottom:1px solid var(--border);margin:0;}
.ow-venster .ws-v-lijf{padding-top:16px;}
.ow-venster .ws-v-veld textarea{font:inherit;font-size:13px;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-width:0;width:100%;resize:vertical;line-height:1.55;}
.ow-venster .ws-v-veld input:focus,.ow-venster .ws-v-veld textarea:focus,.ow-venster .ws-v-veld select:focus,.ow-cijfer input:focus{outline:none;border-color:var(--royal);}
.ow-veld > small,.ow-hint{display:block;font-size:11.5px;font-weight:500;color:var(--muted);line-height:1.5;}
.ow-velden{display:flex;flex-direction:column;gap:12px;min-width:0;}
.ow-veld-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;}
.ow-schakel{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--charcoal);cursor:pointer;min-height:38px;}
.ow-schakel input{width:16px;height:16px;accent-color:var(--royal);flex-shrink:0;margin:0;}
.ow-schakel-groot{align-items:flex-start;background:var(--royal-wash);border-radius:var(--kader-sm);padding:12px 14px;}
.ow-schakel-groot input{margin-top:2px;}
.ow-schakel-groot span{display:flex;flex-direction:column;gap:2px;}
.ow-schakel-groot strong{font-size:13.5px;color:var(--royal);}
.ow-schakel-groot small{font-size:12px;font-weight:500;color:var(--muted);}
.ow-tegel-twee{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start;}
.ow-tegel-voorbeeld{display:flex;flex-direction:column;gap:10px;}
.ow-tegel{position:relative;aspect-ratio:380/260;border-radius:18px;overflow:hidden;background:var(--gradient);background-size:cover;background-position:center;}
.ow-tegel-verloop{position:absolute;inset:0;background:linear-gradient(145deg,#103590,#00aeef);opacity:.55;}
.ow-tegel-tekst{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:4px;color:#fff;}
.ow-tegel-tekst small{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.9;}
.ow-tegel-tekst b{font-size:18px;font-weight:900;line-height:1.15;overflow-wrap:anywhere;}
.ow-tegel-knoppen{display:flex;gap:8px;flex-wrap:wrap;}
.ow-tegel-knoppen .btn-ghost,.ow-media-knoppen .btn-ghost{display:inline-flex;align-items:center;gap:7px;}
.ow-tegel-knoppen svg{width:15px;height:15px;}
.ow-case{display:flex;flex-direction:column;gap:16px;}
.ow-case-uit{opacity:.45;pointer-events:none;}
.ow-feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-bottom:8px;}
.ow-blokken{display:flex;flex-direction:column;gap:12px;}
.ow-blokken-leeg{font-size:12.5px;color:var(--muted);background:var(--bone);border-radius:var(--kader-sm);padding:14px 16px;line-height:1.55;}
.ow-blok{border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;background:var(--white);}
.ow-blok-kop{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 14px;background:var(--bone);border-bottom:1px solid var(--border);}
.ow-blok-kop strong{font-size:13px;font-weight:800;color:var(--charcoal);}
.ow-blok-ic{display:inline-flex;color:var(--royal);}
.ow-blok-ic svg{width:18px;height:18px;}
.ow-blok-kop .ws-ic-knop{width:30px;height:30px;}
.ow-blok-kop .ws-ic-knop svg{width:15px;height:15px;}
.ow-blok-velden{padding:14px;display:flex;flex-direction:column;gap:12px;}
.ow-toevoegen{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:12px;}
.ow-toevoeg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:11.5px;font-weight:700;color:var(--charcoal);background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:12px 6px;cursor:pointer;text-align:center;}
.ow-toevoeg svg{width:20px;height:20px;color:var(--royal);}
.ow-toevoeg:hover{border-color:var(--royal);background:var(--royal-wash);}
.ow-toevoeg:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.ow-media{display:flex;align-items:center;gap:14px;}
.ow-media-beeld{position:relative;flex-shrink:0;width:168px;aspect-ratio:3/2;border-radius:0 12px 0 12px;overflow:hidden;background:var(--gradient);}
.ow-media-beeld img,.ow-media-beeld video{width:100%;height:100%;object-fit:cover;display:block;}
.ow-media-beeld .ow-kaart-leeg{font-size:11px;}
.ow-media-knoppen{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.ow-galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;}
.ow-galerij-item{position:relative;aspect-ratio:4/5;border-radius:0 12px 0 12px;overflow:hidden;background:var(--bone);}
.ow-galerij-item img,.ow-galerij-item video{width:100%;height:100%;object-fit:cover;display:block;}
.ow-galerij-weg{position:absolute;top:6px;right:6px;width:28px;height:28px;border:none;border-radius:50%;background:rgba(26,29,35,.7);color:#fff;font-size:17px;line-height:1;cursor:pointer;}
.ow-galerij-schuif{position:absolute;left:6px;bottom:6px;display:flex;gap:4px;}
.ow-galerij-schuif button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--kader-xs);background:rgba(255,255,255,.92);color:var(--royal);cursor:pointer;padding:0;}
.ow-galerij-schuif button:disabled{opacity:.4;cursor:default;}
.ow-galerij-schuif svg{width:15px;height:15px;}
.ow-galerij-nieuw{min-height:0;aspect-ratio:4/5;padding:8px;}
.ow-bt{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;align-items:start;}
.ow-bt .ow-media{flex-direction:column;align-items:stretch;}
.ow-bt .ow-media-beeld{width:100%;}
.ow-cijfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.ow-cijfer{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--royal-wash);border-radius:var(--kader-sm);}
.ow-cijfer input{font:inherit;font-size:13px;color:var(--charcoal);padding:7px 9px;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);min-width:0;width:100%;}
.ow-cijfer input:first-child{font-size:17px;font-weight:900;font-style:italic;color:var(--royal);}
.ow-v-voet{align-items:center;}
.ow-v-upload{font-size:12px;font-weight:600;color:var(--muted);}
.ow-v-voet .btn-blue:disabled{opacity:.5;cursor:default;}
/* Voorbeeld */
.ws-overlay.ow-vb-overlay{z-index:610;padding:16px;}
.ow-vb{display:flex;flex-direction:column;width:100%;max-width:1440px;height:100%;background:var(--white);border-radius:var(--kader);overflow:hidden;box-shadow:0 24px 60px rgba(10,25,60,.3);}
.ow-vb-balk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px 10px 18px;border-bottom:1px solid var(--border);}
.ow-vb-balk strong{font-size:14px;font-weight:900;font-style:italic;color:var(--royal);}
.ow-vb-uitleg{font-size:12px;color:var(--muted);}
.ow-vb-maat{display:flex;gap:6px;}
.ow-vb-vlak{flex:1 1 auto;min-height:0;display:flex;justify-content:center;background:var(--bone-vlak);}
.ow-vb-vlak iframe{width:100%;height:100%;border:0;background:#fff;}
.ow-vb-vlak.ow-vb-tel{padding:16px 0;}
.ow-vb-vlak.ow-vb-tel iframe{width:400px;max-width:100%;border-radius:var(--kader);box-shadow:0 10px 30px rgba(10,25,60,.18);}
.ow-vb-laden{align-self:center;}
@media(max-width:900px){
  .ow-stand{grid-template-columns:auto minmax(0,1fr);}
  .ow-stand-cijfers,.ow-stand-link{grid-column:2;}
  .ow-tegel-twee{grid-template-columns:240px minmax(0,1fr);}
}
@media(max-width:640px){
  .ow-kopknoppen{width:100%;}
  .ow-kopknoppen > *{flex:1 1 auto;}
  .ow-stand{padding:12px 14px;}
  .ow-stand-cijfers{white-space:normal;}
  .ow-raster{grid-template-columns:1fr;}
  .ow-nieuw{min-height:84px;flex-direction:row;}
  .ow-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .ow-nieuw-logo{min-height:84px;grid-column:1 / -1;}
  .ow-opnieuw{flex-direction:column;align-items:flex-start;}
  .ow-v-tabs{padding:0 16px 10px;}
  .ow-tegel-twee,.ow-bt{grid-template-columns:1fr;}
  .ow-veld-rij{grid-template-columns:1fr;}
  .ow-feiten{grid-template-columns:1fr;}
  .ow-media-beeld{width:128px;}
  .ow-v-voet .ow-flex{display:none;}
  .ow-v-voet .ow-v-upload:empty{display:none;}
  .ow-v-voet .btn-gevaar{flex:0 0 100%;order:9;}
  .ws-overlay.ow-vb-overlay{padding:0;}
  .ow-vb{border-radius:0;}
  .ow-vb-uitleg{display:none;}
}
/* Ingevulde tekst gewoon, voorbeeldtekst duidelijk lichter: anders lijkt een leeg veld al gevuld */
.ow-venster .ws-v-veld input,.ow-venster .ws-v-veld textarea,.ow-venster .ws-v-veld select{font-weight:500;}
.ow-venster input::placeholder,.ow-venster textarea::placeholder{color:#A4A6AA;font-weight:500;font-style:normal;opacity:1;}
.ow-cijfer input:first-child::placeholder{font-weight:800;font-style:italic;color:#B5BCD3;}
.ow-venster .ws-v-lijf > *{flex-shrink:0;}
.ow-logo-naam{width:calc(100% - 28px);box-sizing:border-box;}

/* Onze website: de teksten van de homepage (3.64.0) */
.ow-rij-kop-knop{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;}
.ow-rij-kop-knop > div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ow-rij-kop-knop .btn-ghost{flex-shrink:0;}
.ow-tekens{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12px;color:var(--muted);background:var(--royal-wash);border-radius:var(--kader-sm);padding:9px 14px;margin-bottom:12px;}
.ow-tekens strong{color:var(--royal);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.ow-tekens code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--charcoal);background:var(--white);border-radius:4px;padding:1px 5px;}
.ow-tekens kbd{font:inherit;font-size:11px;font-weight:700;color:var(--charcoal);background:var(--white);border:1px solid var(--border);border-radius:4px;padding:0 5px;}
.ow-tekstkaart{display:flex;flex-direction:column;gap:12px;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:16px 18px;margin-bottom:12px;}
.ow-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start;}
.ow-tekstkaart.ow-twee{display:grid;}
.ow-tekstkaart .ws-v-veld textarea,.ow-lijst .ws-v-veld textarea{font:inherit;font-size:13px;font-weight:500;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-width:0;width:100%;resize:vertical;line-height:1.55;}
.ow-tekstkaart .ws-v-veld input,.ow-lijst .ws-v-veld input{font-weight:500;}
.ow-tekstkaart .ws-v-veld input:focus,.ow-tekstkaart .ws-v-veld textarea:focus,.ow-lijst .ws-v-veld input:focus,.ow-lijst .ws-v-veld textarea:focus{outline:none;border-color:var(--royal);}
.ow-tekstkaart input::placeholder,.ow-tekstkaart textarea::placeholder,.ow-lijst input::placeholder,.ow-lijst textarea::placeholder{color:#A4A6AA;opacity:1;}
.ow-tekstkaart .ow-schakel{min-height:0;align-items:flex-start;line-height:1.5;}
.ow-tekstkaart .ow-schakel input{margin-top:2px;}
.ow-tekstkaart .ow-schakel span{font-weight:500;color:var(--muted);}
.ow-tekstkaart .ow-schakel strong{color:var(--charcoal);font-weight:700;}
.ow-lijst{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.ow-lijst-item{border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;background:var(--white);}
.ow-lijst-item .ow-blok-kop strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.ow-nieuw-rij{min-height:0;flex-direction:row;padding:14px;}
.ow-vraag-nr{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--royal);color:#fff;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
.ow-iconen{display:flex;flex-wrap:wrap;gap:6px;}
.ow-icoon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);color:var(--royal);cursor:pointer;padding:0;font-size:9px;}
.ow-icoon svg{width:20px;height:20px;}
.ow-icoon:hover{border-color:var(--royal);}
.ow-icoon.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.ow-icoon:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.ow-lid{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start;}
.ow-lid-foto{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;padding:0;cursor:pointer;font:inherit;}
.ow-lid-foto img,.ow-lid-foto > span{width:104px;height:104px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--gradient);color:#fff;}
.ow-lid-foto > span svg{width:26px;height:26px;}
.ow-lid-foto em{font-style:normal;font-size:12px;font-weight:700;color:var(--royal);}
.ow-lid-foto:hover em{text-decoration:underline;}
.ow-lid-foto:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:var(--kader-xs);}
@media(max-width:640px){
  .ow-rij-kop-knop{flex-direction:column;align-items:flex-start;}
  .ow-twee,.ow-tekstkaart.ow-twee{grid-template-columns:1fr;}
  .ow-tekstkaart{padding:14px;}
  .ow-lid{grid-template-columns:1fr;}
  .ow-lid-foto{flex-direction:row;}
  .ow-lid-foto img,.ow-lid-foto > span{width:72px;height:72px;}
}
@media(max-width:900px){ .ow-twee,.ow-tekstkaart.ow-twee{grid-template-columns:1fr;} }

/* ═══ MERK: WEBSITE EN MAILHANDTEKENING (3.65.0) ═══════════════════ */
.merk-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:6px 0 16px;}
.merk-tab{font:inherit;font-size:13.5px;font-weight:800;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;padding:10px 16px 9px;margin-bottom:-1px;cursor:pointer;}
.merk-tab:hover{color:var(--charcoal);}
.merk-tab.active{color:var(--royal);border-bottom-color:var(--royal);}
.merk-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.mh-wie{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.mh-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start;}
.mh-velden{display:flex;flex-direction:column;gap:0;min-width:0;}
.mh-kop{font-size:14px;font-weight:800;color:var(--royal);margin:0;}
.mh-foto{display:flex;align-items:center;gap:16px;}
.mh-foto-rond{flex-shrink:0;width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-style:italic;font-size:24px;}
.mh-foto-rond img{width:100%;height:100%;object-fit:cover;display:block;}
.mh-foto-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.mh-foto-knoppen .ow-hint{flex-basis:100%;}
.mh-stijl{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mh-stijl-knop{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:inherit;text-align:left;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:10px 12px;cursor:pointer;}
.mh-stijl-knop strong{font-size:13px;font-weight:800;color:var(--charcoal);}
.mh-stijl-knop span{font-size:11.5px;color:var(--muted);}
.mh-stijl-knop:hover{border-color:var(--royal);}
.mh-stijl-knop.aan{border-color:var(--royal);background:var(--royal-wash);}
.mh-stijl-knop.aan strong{color:var(--royal);}
.mh-stijl-knop:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.mh-voorbeeld{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.mh-vb-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.mh-vb-achter{display:flex;gap:6px;}
.mh-vb-vlak{background:var(--bone-vlak);border-radius:var(--kader);padding:18px;overflow-x:auto;}
.mh-vb-mail{background:#fff;border-radius:var(--kader-sm);padding:20px 22px 18px;box-shadow:0 6px 20px rgba(10,25,60,.08);min-width:0;}
.mh-vb-regel{height:8px;border-radius:4px;background:#ECEAE6;margin-bottom:8px;}
.mh-vb-regel.kort{width:62%;}
.mh-vb-groet{font-size:13px;color:var(--charcoal);margin:14px 0 10px;font-family:Arial,Helvetica,sans-serif;}
.mh-vb-mail iframe{display:block;width:100%;min-width:300px;height:220px;border:0;background:transparent;}
.mh-donker .mh-vb-mail{background:#1E1F22;}
.mh-donker .mh-vb-regel{background:#3A3B3F;}
.mh-donker .mh-vb-groet{color:#E6E6E6;}
.mh-knoppen{display:flex;flex-wrap:wrap;gap:8px;}
.mh-uitleg{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:12px 16px;font-size:12.5px;color:var(--muted);line-height:1.6;}
.mh-uitleg summary{cursor:pointer;font-weight:800;color:var(--royal);font-size:13px;}
.mh-uitleg ol{margin:10px 0 6px;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.mh-uitleg strong{color:var(--charcoal);}
.mh-uitleg p{margin:6px 0 0;}
@media(max-width:1100px){
  .mh-twee{grid-template-columns:1fr;}
  .mh-voorbeeld{position:static;}
}
@media(max-width:640px){
  .merk-tab{padding:10px 12px 9px;font-size:13px;}
  .mh-vb-vlak{padding:10px;}
  .mh-vb-mail{padding:14px 12px;}
  .mh-knoppen > *{flex:1 1 auto;}
  .mh-foto{align-items:flex-start;}
  .mh-foto-rond{width:64px;height:64px;font-size:19px;}
}
@media(max-width:640px){
  .mh-foto-knoppen{flex-direction:column;align-items:flex-start;gap:2px;}
  .mh-foto-knoppen .btn-smb{padding-left:0;}
}

/* ═══ PLANNING 2.0 (3.66.0) ═══════════════════════════════════════
   Kop, waarschuwingen, strook, tijdlijn, dag, mijn dag, bezetting en
   nog in te plannen. Zie js/planning-tijdlijn.js. */
#planning-body{--pt-baan:34px;}
.pt-kop{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:14px;}
.pt-weergaven{display:flex;gap:2px;background:var(--bone-vlak);border-radius:var(--kader-sm);padding:3px;flex-wrap:wrap;}
.pt-weergave{font:inherit;font-size:12px;font-weight:700;color:var(--muted);background:none;border:none;border-radius:var(--kader-xs);padding:7px 12px;cursor:pointer;}
.pt-weergave:hover{color:var(--charcoal);}
.pt-weergave.aan{background:var(--white);color:var(--royal);box-shadow:0 1px 3px rgba(16,53,144,.12);}
.pt-weergave:focus-visible,.pt-nav-knop:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.pt-nav{display:flex;align-items:center;gap:4px;}
.pt-nav-knop{font:inherit;font-size:13px;font-weight:700;color:var(--charcoal);background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-xs);height:32px;min-width:32px;padding:0 8px;cursor:pointer;}
.pt-nav-knop:hover{border-color:var(--royal);color:var(--royal);}
.pt-nav-nu{font-size:11.5px;}
.pt-nav-label{font-size:13px;font-weight:800;color:var(--charcoal);margin-left:6px;white-space:nowrap;}
.pt-acties{display:flex;align-items:center;gap:8px;margin-left:auto;}
.pt-filter{font:inherit;font-size:12px;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);cursor:pointer;}
.pt-meer{position:relative;}
.pt-meer-knop{font-size:12px;}
.pt-meer-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--white);border:1px solid var(--border);border-radius:var(--kader-sm);box-shadow:0 12px 30px rgba(10,25,60,.16);padding:6px;display:flex;flex-direction:column;min-width:240px;}
.pt-meer-menu[hidden]{display:none;}
.pt-meer-menu button{font:inherit;font-size:12.5px;font-weight:600;text-align:left;color:var(--charcoal);background:none;border:none;border-radius:var(--kader-xs);padding:9px 12px;cursor:pointer;}
.pt-meer-menu button:hover,.pt-meer-menu button:focus-visible{background:var(--royal-wash);color:var(--royal);outline:none;}
.pt-inplannen{white-space:nowrap;}
/* Waarschuwingen */
.pt-waar{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.pt-w{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--white);border:1px solid var(--border);border-radius:var(--kader-sm);padding:9px 12px 9px 14px;}
.pt-w-stip{width:9px;height:9px;border-radius:50%;}
.pt-w-rood{border-color:#E9B3B7;background:var(--danger-bg);}
.pt-w-rood .pt-w-stip{background:var(--danger);}
.pt-w-oranje .pt-w-stip{background:#C98A00;}
.pt-w-blauw .pt-w-stip{background:var(--mid);}
.pt-w-tekst{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pt-w-tekst strong{font-size:12.5px;font-weight:700;color:var(--charcoal);}
.pt-w-tekst span{font-size:11.5px;color:var(--muted);}
.pt-w-knoppen{display:flex;gap:6px;}
.pt-w-knop{font-size:11.5px;padding:6px 12px;white-space:nowrap;}
.pt-w-meer{align-self:flex-start;}
/* Strook */
.pt-strook{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--royal-wash);border-radius:var(--kader-sm);padding:7px 10px;margin-bottom:10px;}
.pt-strook-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--royal);}
.pt-strook-items{display:flex;gap:6px;flex-wrap:wrap;min-width:0;}
.pt-chip{font:inherit;font-size:11px;font-weight:700;color:var(--charcoal);background:var(--white);border:1px solid var(--border);border-radius:var(--kader-xs);padding:4px 9px;cursor:pointer;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.pt-chip:hover{border-color:var(--royal);}
.pt-chip-draai{background:var(--royal);border-color:var(--royal);color:#fff;}
.pt-chip-draai em{font-style:normal;color:var(--yellow);}
.pt-chip-krap{border-color:var(--danger);color:var(--danger);background:var(--danger-bg);}
.pt-chip-ok{color:var(--success);border-color:#A9D3B8;}
/* Gemeenschappelijk */
.pt-schuif{overflow-x:auto;border-radius:var(--kader);}
.pt-wie-naam{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--charcoal);}
.pt-wie-naam i{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.pt-meter{display:block;height:5px;border-radius:3px;background:var(--bone-vlak);overflow:hidden;}
.pt-meter i{display:block;height:100%;background:var(--mid);border-radius:3px;}
.pt-meter i.over{background:var(--danger);}
.pt-uitleg{font-size:12px;color:var(--muted);line-height:1.55;margin:8px 0 0;}
/* Tijdlijn */
.pt-tl{display:grid;grid-template-columns:136px repeat(var(--dagen),minmax(150px,1fr));background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;min-width:900px;}
.pt-tl-hd{background:var(--bone);border-bottom:1px solid var(--border);border-left:1px solid var(--border);padding:7px 8px 3px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.pt-tl-hoek{border-left:none;}
.pt-tl-hd.pt-vandaag{background:var(--royal-wash);}
.pt-tl-dag{font:inherit;font-size:11.5px;font-weight:800;color:var(--muted);background:none;border:none;padding:0;text-align:left;cursor:pointer;}
.pt-tl-dag:hover{color:var(--royal);text-decoration:underline;}
.pt-vandaag .pt-tl-dag{color:var(--royal);}
.pt-tl-uren{position:relative;height:12px;}
.pt-tl-uren i{position:absolute;top:0;font-style:normal;font-size:9px;font-weight:700;color:var(--muted);transform:translateX(-50%);font-variant-numeric:tabular-nums;}
.pt-tl-uren i:first-child{transform:none;}
.pt-tl-strook{grid-column:1 / -1;border-bottom:1px solid var(--border);}
.pt-tl-strook .pt-strook{border-radius:0;margin:0;padding:7px 10px;}
.pt-tl-wie{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px 12px;border-bottom:1px solid var(--border);min-width:0;}
.pt-tl-wie small{font-size:10.5px;font-weight:600;color:var(--muted);}
.pt-cel{position:relative;border-bottom:1px solid var(--border);border-left:1px solid var(--border);cursor:copy;}
.pt-tl .pt-cel{min-height:46px;height:calc(10px + var(--banen,1) * var(--pt-baan));
  background-image:repeating-linear-gradient(90deg,var(--bone-lijn) 0 1px,transparent 1px calc(100% / var(--asuren) * 2));opacity:1;}
.pt-tl .pt-cel.pt-vandaag{background-color:#FAFBFE;}
.pt-cel.pt-doel{outline:2px solid var(--cyan);outline-offset:-2px;background-color:var(--royal-wash);}
.pt-niet{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(26,29,35,.045) 0 5px,transparent 5px 10px);pointer-events:none;}
.pt-niet-v{left:0;right:0;bottom:auto;}
.pt-afw{position:absolute;inset:4px;border-radius:var(--kader-xs);background:repeating-linear-gradient(135deg,var(--bone-vlak) 0 6px,transparent 6px 12px);border:1px dashed var(--bone-rand);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);pointer-events:none;}
.pt-nu{position:absolute;top:0;bottom:0;width:2px;background:var(--cyan);z-index:0;pointer-events:none;}
/* Een blok */
.pt-blok{position:absolute;z-index:1;border-radius:0 8px 0 8px;padding:3px 7px;font-size:10.5px;line-height:1.2;overflow:hidden;cursor:grab;display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:5px;box-shadow:0 1px 2px rgba(16,53,144,.15);transition:box-shadow .15s;}
.pt-tl .pt-blok{height:calc(var(--pt-baan) - 4px);}
.pt-blok:hover{box-shadow:0 3px 10px rgba(16,53,144,.25);z-index:3;}
.pt-blok:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.pt-b-titel{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pt-b-sub{font-size:9.5px;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pt-blok.pt-kort{padding:0;}
.pt-blok.pt-afspraak{border:1.5px dashed var(--pt-kl);box-shadow:none;}
.pt-blok.pt-afspraak .pt-b-titel{color:var(--royal);}
.pt-blok.pt-af{opacity:.6;}
.pt-blok.pt-draai{cursor:pointer;}
.pt-blok.pt-conflict{outline:2px solid var(--danger);outline-offset:1px;}
.pt-rek{position:absolute;right:0;top:0;bottom:0;width:7px;cursor:ew-resize;}
.pt-v .pt-rek{left:0;right:0;top:auto;bottom:0;width:auto;height:7px;cursor:ns-resize;}
.pt-blok.pt-zweeft{z-index:20;box-shadow:0 10px 24px rgba(16,53,144,.35);opacity:.92;cursor:grabbing;}
.pt-blok.pt-label-aan::after{content:attr(data-label);position:absolute;left:0;top:-22px;white-space:nowrap;font-size:10.5px;font-weight:800;color:#fff;background:var(--charcoal);border-radius:0 6px 0 6px;padding:2px 7px;}
.pt-tl .pt-blok.pt-label-aan,.pt-blok.pt-label-aan{overflow:visible;}
body.pt-sleept{cursor:grabbing;user-select:none;}
.pt-geest{position:fixed;z-index:700;pointer-events:none;background:var(--royal);color:#fff;font-size:12px;font-weight:800;border-radius:0 8px 0 8px;padding:7px 11px;box-shadow:0 10px 24px rgba(16,53,144,.35);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Dag */
.pt-dv{display:grid;grid-template-columns:52px repeat(var(--kolommen),minmax(170px,1fr));gap:0 10px;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:14px 14px 16px 6px;}
.pt-dv-as{position:relative;margin-top:48px;}
.pt-dv-ik .pt-dv-as{margin-top:0;}
.pt-dv-as span{position:absolute;right:6px;transform:translateY(-50%);font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.pt-dv-nulbl{position:absolute;right:2px;transform:translateY(-50%);z-index:2;font-size:9.5px;font-weight:800;color:#fff;background:var(--royal);border-radius:0 6px 0 6px;padding:1px 5px;}
.pt-dv-kol{display:flex;flex-direction:column;min-width:0;}
.pt-dv-naam{height:48px;display:flex;flex-direction:column;justify-content:center;gap:2px;border-bottom:2px solid var(--royal);}
.pt-dv-naam small{font-size:10.5px;font-weight:600;color:var(--muted);}
.pt-cel.pt-dv-vlak{border:none;background-image:repeating-linear-gradient(180deg,var(--bone-lijn) 0 1px,transparent 1px var(--uurpx));background-color:var(--bone);}
.pt-v{padding:5px 8px;font-size:11px;justify-content:flex-start;}
.pt-v .pt-b-titel{white-space:normal;}
.pt-v .pt-b-sub{font-size:10px;}
.pt-v.pt-laag{flex-direction:row;align-items:center;gap:6px;padding:1px 8px;}
.pt-v.pt-laag .pt-b-titel{white-space:nowrap;}
.pt-dv-nu{position:absolute;left:0;right:0;height:2px;background:var(--cyan);z-index:0;pointer-events:none;}
.pt-dv-leeg{position:absolute;left:0;right:0;top:12px;text-align:center;font-size:11.5px;font-weight:600;color:var(--muted);pointer-events:none;}
/* Mijn dag */
.pt-mijn{display:flex;flex-direction:column;gap:10px;}
.pt-mijn-kop{display:flex;align-items:baseline;justify-content:space-between;}
.pt-mijn-kop strong{font-size:22px;font-weight:900;font-style:italic;color:var(--royal);}
.pt-mijn-kop span{font-size:12px;font-weight:700;color:var(--muted);}
.pt-mijn-dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.pt-mijn-dag{font:inherit;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;background:var(--bone-vlak);border:none;border-radius:var(--kader-xs);color:var(--muted);cursor:pointer;}
.pt-mijn-dag span{font-size:10px;font-weight:700;text-transform:uppercase;}
.pt-mijn-dag b{font-size:14px;font-weight:800;color:var(--charcoal);}
.pt-mijn-dag i{position:absolute;top:3px;right:4px;font-style:normal;font-size:9px;font-weight:800;color:var(--royal);}
.pt-mijn-dag.nu b{color:var(--royal);}
.pt-mijn-dag.aan{background:var(--royal);}
.pt-mijn-dag.aan span,.pt-mijn-dag.aan b,.pt-mijn-dag.aan i{color:#fff;}
.pt-dv-ik{grid-template-columns:48px minmax(0,1fr);padding:10px 10px 12px 4px;}
/* Bezetting */
.pt-bz{display:grid;grid-template-columns:120px repeat(8,minmax(78px,1fr));gap:5px;align-items:stretch;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:14px;min-width:820px;}
.pt-bz-h{display:flex;flex-direction:column;align-items:center;font-size:11px;font-weight:800;color:var(--muted);padding-bottom:4px;}
.pt-bz-h small{font-size:10px;font-weight:600;}
.pt-bz-h.nu{color:var(--royal);}
.pt-bz-naam{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--charcoal);}
.pt-bz-naam i{width:9px;height:9px;border-radius:50%;}
.pt-bz-zonder{font-size:12px;font-weight:700;color:var(--muted);}
.pt-bz-cel{position:relative;overflow:hidden;font:inherit;min-height:46px;border:none;border-radius:var(--kader-xs);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;font-variant-numeric:tabular-nums;}
.pt-bz-cel b{font-size:12.5px;font-weight:800;}
.pt-bz-cel small{font-size:9.5px;font-weight:700;opacity:.9;}
.pt-bz-cel:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.pt-bz-open{position:absolute;right:0;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 4px,transparent 4px 8px);pointer-events:none;}
.pt-bz-leeg{background:var(--bone);color:var(--muted);font-size:11px;font-weight:700;cursor:default;}
.pt-p0{background:var(--bone-vlak);color:var(--muted);}
.pt-p1{background:var(--royal-20);color:var(--royal);}
.pt-p2{background:var(--royal-40);color:#0C2A73;}
.pt-p3{background:var(--royal-80);color:#fff;}
.pt-p4{background:var(--royal);color:#fff;}
.pt-p5{background:var(--danger);color:#fff;}
.pt-bz-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px;}
.pt-bz-legenda span{display:inline-flex;align-items:center;gap:6px;}
.pt-bz-legenda i{width:14px;height:14px;border-radius:4px;display:inline-block;}
.pt-bz-lg-open{background:repeating-linear-gradient(135deg,var(--royal-40) 0 3px,var(--royal-20) 3px 6px);}
/* Nog in te plannen */
.pt-backlog{margin-top:16px;background:var(--bone-vlak);border-radius:var(--kader);padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.pt-backlog-kop{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;}
.pt-backlog-kop h3{font-size:14px;font-weight:800;color:var(--royal);margin:0;}
.pt-backlog-kop span{font-size:12px;color:var(--muted);flex:1 1 300px;}
.pt-backlog-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;}
.pt-werk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;background:var(--white);border:1px solid var(--border);border-left:4px solid var(--pt-kl);border-radius:var(--kader-sm);padding:10px 12px;cursor:grab;}
.pt-werk-klaar{cursor:default;opacity:.75;}
.pt-werk-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pt-werk-tekst b{font-size:13px;font-weight:800;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pt-werk-tekst span{font-size:11.5px;color:var(--muted);}
.pt-werk-uren{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;}
.pt-werk-uren b{font-size:14px;font-weight:900;color:var(--royal);}
.pt-werk-uren small{font-size:10.5px;color:var(--muted);}
.pt-werk-knoppen{grid-column:1 / -1;display:flex;gap:6px;align-items:center;}
.pt-werk-knoppen .btn-blue,.pt-werk-knoppen .btn-ghost{font-size:11.5px;padding:6px 12px;}
.pt-backlog-leeg{font-size:12.5px;color:var(--muted);background:var(--white);border-radius:var(--kader-sm);padding:12px 14px;line-height:1.55;}
/* Vensters */
.pt-wv .ws-v-veld select,.pt-wv .ws-v-veld input{font-weight:500;}
.pt-wv .ws-v-veld small{font-size:11px;font-weight:500;color:var(--muted);}
.pt-wv-twee{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
.pt-wv-wie{display:flex;gap:6px;flex-wrap:wrap;}
.pt-wv-tm{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--charcoal);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:7px 11px;cursor:pointer;}
.pt-wv-tm input{margin:0;accent-color:var(--royal);}
.pt-wv-tm i{width:8px;height:8px;border-radius:50%;}
.pt-wv-tm:has(input:checked){border-color:var(--royal);background:var(--royal-wash);}
@media(max-width:1100px){
  .pt-acties{margin-left:0;width:100%;}
  .pt-acties .pt-inplannen{margin-left:auto;}
}
@media(max-width:640px){
  .pt-kop{gap:8px;}
  .pt-weergaven{width:100%;overflow-x:auto;flex-wrap:nowrap;}
  .pt-weergave{flex:1 0 auto;padding:7px 10px;}
  .pt-nav{width:100%;}
  .pt-nav-label{margin-left:auto;font-size:12px;}
  .pt-acties{flex-wrap:nowrap;}
  .pt-filter{flex:1;min-width:0;}
  .pt-inplannen{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:90;padding:12px 18px!important;font-size:13px!important;box-shadow:0 10px 26px rgba(16,53,144,.35);}
  .pt-w{grid-template-columns:auto minmax(0,1fr);}
  .pt-w-knoppen{grid-column:2;}
  .pt-strook{align-items:flex-start;}
  .pt-wv-twee{grid-template-columns:1fr;}
  .pt-dv{padding-right:10px;}
}
.pt-waar-sam{font:inherit;display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--white);border:1px solid var(--border);border-radius:var(--kader-sm);padding:10px 14px;margin-bottom:12px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--charcoal);}
.pt-waar-sam .pt-w-stip{background:#C98A00;flex-shrink:0;}
.pt-waar-sam.pt-waar-rood{border-color:#E9B3B7;background:var(--danger-bg);}
.pt-waar-sam.pt-waar-rood .pt-w-stip{background:var(--danger);}
.pt-waar-sam b{margin-left:auto;color:var(--royal);font-size:12px;}

/* ═══ TAKEN (3.67.0) ═══ */
.tk-wrap{min-width:0;}
.tk-snel{background:var(--royal);border-radius:var(--kader);padding:14px 16px 12px;margin-bottom:14px;}
.tk-snel-veld{display:flex;align-items:center;gap:10px;background:var(--white);border-radius:var(--kader-sm);padding:4px 4px 4px 12px;}
.tk-snel-veld svg{width:18px;height:18px;color:var(--royal);flex-shrink:0;}
.tk-snel-veld input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--charcoal);padding:9px 0;}
.tk-snel-veld input::placeholder{color:var(--muted);font-weight:500;}
.tk-snel-veld .btn-blue{flex-shrink:0;padding:9px 16px;font-size:12.5px;}
.tk-snel-uitleg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:9px;font-size:11.5px;color:rgba(255,255,255,.78);min-height:24px;}
.tk-snel-uitleg b{color:var(--yellow);font-weight:800;}
.tk-snel-uitleg .btn-smb{color:var(--yellow);margin-left:auto;padding:4px 8px;}
.tk-snel-uitleg .btn-smb:hover{background:rgba(255,255,255,.12);}
.tk-herkend{background:rgba(255,255,255,.14);color:#fff;font-weight:700;padding:3px 9px;border-radius:var(--kader-xs);}
.tk-onbekend{background:var(--yellow);color:var(--royal);font-weight:700;padding:3px 9px;border-radius:var(--kader-xs);}
.tk-balk{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px;}
.tk-tellers{display:flex;flex-wrap:wrap;gap:6px;}
.tk-teller{font:inherit;display:inline-flex;align-items:baseline;gap:6px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:6px 12px;font-size:12px;font-weight:600;color:var(--charcoal);cursor:pointer;transition:border-color .15s,background .15s;}
.tk-teller b{font-size:14px;font-weight:900;color:var(--royal);font-variant-numeric:tabular-nums;}
.tk-teller:hover{border-color:var(--royal-40);}
.tk-teller.aan{border-color:var(--royal);background:var(--royal-wash);}
.tk-t-laat b{color:var(--danger);}
.tk-t-vandaag b{color:#B4500A;}
.tk-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;}
.tk-filters select{font:inherit;font-size:12.5px;font-weight:600;border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:7px 10px;background:var(--white);color:var(--charcoal);max-width:170px;}
.tk-zoek{display:flex;align-items:center;gap:6px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:0 10px;}
.tk-zoek svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.tk-zoek input{border:none;outline:none;background:transparent;font:inherit;font-size:12.5px;padding:7px 0;width:130px;min-width:0;}
.tk-view{display:inline-flex;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:2px;}
.tk-view button{font:inherit;border:none;background:none;padding:5px 12px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border-radius:var(--kader-xs);}
.tk-view button.aan{background:var(--royal);color:#fff;}
/* Bord */
.tk-bord{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start;}
.tk-kolom{background:var(--bone-vlak);border-radius:var(--kader);padding:10px 8px 8px;min-width:0;transition:background .15s,box-shadow .15s;}
.tk-kolom.tk-doel{background:var(--royal-wash);box-shadow:inset 0 0 0 2px var(--royal);}
.tk-kolom-kop{display:flex;align-items:center;gap:7px;padding:0 4px 8px;}
.tk-kolom-kop h3{font-size:12px;font-weight:800;color:var(--charcoal);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.tk-kolom-kop em{font-style:normal;font-size:11px;font-weight:800;color:var(--muted);background:var(--white);border-radius:10px;padding:0 7px;}
.tk-stip{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.tk-kolom-plus{margin-left:auto;border:none;background:none;font-size:18px;line-height:1;font-weight:600;color:var(--royal);cursor:pointer;padding:0 4px;border-radius:var(--kader-xs);}
.tk-kolom-plus:hover{background:var(--white);}
.tk-kolom-lijf{display:flex;flex-direction:column;gap:7px;min-height:60px;}
.tk-kolom-leeg{font-size:11.5px;color:var(--muted);text-align:center;padding:16px 6px;border:1.5px dashed var(--bone-lijn);border-radius:var(--kader-sm);}
.tk-kaart{background:var(--white);border:1px solid var(--border);border-left:3px solid transparent;border-radius:var(--kader-sm);padding:9px 10px;cursor:grab;display:flex;flex-direction:column;gap:6px;transition:box-shadow .15s,transform .15s;min-width:0;}
.tk-kaart:hover{box-shadow:0 4px 14px rgba(16,53,144,.1);}
.tk-kaart:focus-visible{outline:2px solid var(--royal);outline-offset:2px;}
.tk-kaart.tk-sleept{opacity:.4;}
.tk-kaart.tk-laat{border-left-color:var(--danger);background:#FFF8F8;}
.tk-kaart.tk-vandaag{border-left-color:#E07A1F;}
.tk-kaart.tk-af .tk-k-tekst{text-decoration:line-through;color:var(--muted);}
.tk-k-boven{display:flex;align-items:flex-start;gap:8px;}
.tk-k-tekst{font-size:12.5px;font-weight:700;color:var(--charcoal);line-height:1.4;overflow-wrap:anywhere;min-width:0;}
.tk-k-desc{font-size:11.5px;color:var(--muted);line-height:1.45;margin:0;overflow-wrap:anywhere;}
.tk-k-tags{display:flex;flex-wrap:wrap;gap:4px;}
.tk-k-tags:empty{display:none;}
.tk-tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--kader-xs);background:var(--bone);color:var(--charcoal);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.tk-tag-klant{background:var(--royal-wash);color:var(--royal);}
.tk-ingepland{background:var(--success-bg);color:var(--success);}
.tk-tag-lead{background:var(--cyan-20);color:var(--royal);cursor:pointer;}
.tk-datum.tk-d-laat{background:var(--danger-bg);color:var(--danger);}
.tk-datum.tk-d-vandaag{background:#FFF1E6;color:#B4500A;}
.tk-k-voet{display:flex;align-items:center;gap:6px;}
.tk-wie{display:inline-flex;align-items:center;}
.tk-av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;border:2px solid var(--white);margin-left:-5px;overflow:hidden;flex-shrink:0;}
.tk-av:first-child{margin-left:0;}
.tk-av img{width:100%;height:100%;object-fit:cover;}
.tk-niemand{font-size:10.5px;color:var(--muted);font-style:italic;}
.tk-k-knop{margin-left:auto;border:none;background:none;color:var(--muted);cursor:pointer;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--kader-xs);font-size:13px;flex-shrink:0;}
.tk-k-knop:hover{background:var(--royal-wash);color:var(--royal);}
.tk-vink{flex-shrink:0;width:18px;height:18px;margin-top:1px;border:1.8px solid var(--bone-rand);border-radius:50%;background:var(--white);cursor:pointer;padding:0;position:relative;transition:border-color .15s,background .15s;}
.tk-vink:hover{border-color:var(--success);}
.tk-vink.aan{background:var(--success);border-color:var(--success);}
.tk-vink.aan::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);}
.tk-meer{align-self:center;}
/* Lijst */
.tk-groep{margin-bottom:16px;}
.tk-groep h3{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--charcoal);margin:0 0 7px;}
.tk-groep h3 em{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:0;}
.tk-g-laat h3{color:var(--danger);}
.tk-g-vandaag h3{color:#B4500A;}
.tk-rijen{background:var(--white);border:1px solid var(--border);border-radius:var(--kader-sm);overflow:hidden;}
.tk-rij{display:grid;grid-template-columns:18px minmax(0,1fr) 140px 112px 70px 62px;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--bone-lijn);}
.tk-rij:nth-child(even){background:var(--bone);}
.tk-rij:last-of-type{border-bottom:none;}
.tk-g-laat .tk-rij{box-shadow:inset 3px 0 0 var(--danger);}
.tk-g-vandaag .tk-rij{box-shadow:inset 3px 0 0 #E07A1F;}
.tk-rij-hoofd{font:inherit;text-align:left;background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;min-width:0;}
.tk-rij-tekst{font-size:13px;font-weight:700;color:var(--charcoal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-rij-hoofd:hover .tk-rij-tekst{color:var(--royal);}
.tk-rij-sub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-rij-sub:empty{display:none;}
.tk-rij.tk-af .tk-rij-tekst{text-decoration:line-through;color:var(--muted);}
.tk-fase{font-size:11px;font-weight:700;color:var(--fk);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;}
.tk-fase::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--fk);flex-shrink:0;}
.tk-rij .tk-datum{justify-self:start;}
.tk-rij .tk-datum:empty{visibility:hidden;}
.tk-rij-knoppen{display:flex;gap:2px;justify-content:flex-end;}
.tk-rij-knoppen .tk-k-knop{margin-left:0;}
.tk-leeg{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;background:var(--white);border:1.5px dashed var(--bone-lijn);border-radius:var(--kader);padding:32px 16px;color:var(--muted);font-size:12.5px;}
.tk-leeg strong{color:var(--charcoal);font-size:14px;}
@media(max-width:1280px){.tk-bord{grid-template-columns:repeat(5,minmax(200px,1fr));overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;}.tk-kolom{scroll-snap-align:start;}}
@media(max-width:900px){
  .tk-filters{margin-left:0;width:100%;}
  .tk-rij{grid-template-columns:18px minmax(0,1fr) auto 62px;}
  .tk-rij .tk-fase,.tk-rij .tk-wie{display:none;}
}
@media(max-width:640px){
  .tk-snel{padding:12px;}
  .tk-snel-veld .btn-blue{padding:9px 12px;}
  .tk-snel-uitleg .btn-smb{margin-left:0;}
  .tk-zoek{flex:1 1 100%;}
  .tk-zoek input{width:100%;}
  .tk-filters select{flex:1;max-width:none;min-width:0;}
  .tk-rij{gap:8px;padding:8px 10px;}
  .tk-rij-knoppen .tk-k-knop:last-child{display:none;}
  .tk-rij{grid-template-columns:18px minmax(0,1fr) auto 28px;}
}

/* ═══ KLANTPORTAAL STARTPAGINA (3.67.0) ═══ */
.ps-hero{align-items:stretch;gap:24px;padding:1.75rem 2rem;}
.ps-hero::after{content:'';position:absolute;right:-70px;bottom:-110px;width:300px;height:300px;border:42px solid rgba(255,255,255,.05);border-radius:0 90px 0 90px;transform:rotate(12deg);z-index:0;pointer-events:none;}
.ps-hero-tekst{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.ps-datum{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);}
.ps-hero h2{font-size:30px;margin-top:8px;overflow-wrap:anywhere;}
.ps-hero p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82);margin-top:10px;max-width:560px;}
.ps-volgende{flex:0 0 300px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--kader-sm);padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.ps-volgende[hidden]{display:none;}
.ps-v-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.ps-v-hoofd{display:flex;gap:12px;align-items:center;}
.ps-v-datum{flex:0 0 58px;height:66px;background:var(--yellow);color:var(--royal);border-radius:var(--kader-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.ps-v-datum b{font-size:24px;font-weight:900;margin:2px 0;}
.ps-v-datum span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.ps-v-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ps-v-soort{font-size:11px;font-weight:700;color:var(--yellow);}
.ps-v-tekst strong{font-size:15px;font-weight:800;color:#fff;line-height:1.3;overflow-wrap:anywhere;}
.ps-v-tijd{font-size:11.5px;color:rgba(255,255,255,.7);}
.ps-v-daarna{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:4px;}
.ps-v-daarna li{font-size:11.5px;color:rgba(255,255,255,.78);display:flex;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ps-v-daarna li span{flex:0 0 44px;font-weight:800;color:#fff;}
.ps-v-knop{align-self:flex-start;font:inherit;font-size:11.5px;font-weight:700;color:var(--yellow);background:none;border:none;padding:0;cursor:pointer;}
.ps-v-knop:hover{text-decoration:underline;text-underline-offset:3px;}
.ps-kop{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-width:0;}
.ps-kop .card-title{font-size:15px;font-weight:900;font-style:italic;margin:0;}
.ps-kop-sub{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);}
.ps-kop-knop{margin-left:auto;}
.ps-badge{margin-left:auto;font-size:11px;font-weight:800;background:var(--danger-bg);color:var(--danger);padding:2px 9px;border-radius:var(--kader-xs);}
.ps-boven{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px;align-items:start;}
.ps-video{position:relative;padding-top:56.25%;background:#000;border-radius:var(--kader-sm);overflow:hidden;}
.ps-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ps-beeld .dv-beeld{width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--kader-sm);}
.ps-beeld .dv-beeld-ico i{width:40px;height:40px;}
.ps-leeg-beeld{aspect-ratio:16/9;background:var(--bone);border:1.5px dashed var(--bone-lijn);border-radius:var(--kader-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;color:var(--muted);font-size:12.5px;}
.ps-leeg-beeld i{width:30px;height:30px;color:var(--royal);opacity:.5;}
.ps-n-tekst{display:flex;flex-direction:column;gap:2px;margin-top:12px;min-width:0;}
.ps-n-tekst strong{font-size:16px;font-weight:800;color:var(--charcoal);overflow-wrap:anywhere;}
.ps-n-tekst span{font-size:12px;color:var(--muted);}
.ps-n-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.ps-n-knoppen > *{text-decoration:none;}
.ps-acties{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.ps-acties li{display:flex;align-items:center;gap:10px;padding:10px 0 10px 12px;border-bottom:1px solid var(--bone-lijn);box-shadow:inset 3px 0 0 var(--royal);}
.ps-acties li:last-child{border-bottom:none;}
.ps-acties li > div{flex:1;min-width:0;display:flex;flex-direction:column;}
.ps-acties strong{font-size:13px;font-weight:700;color:var(--charcoal);overflow-wrap:anywhere;}
.ps-acties span{font-size:11.5px;font-weight:600;}
.ps-a-rood{box-shadow:inset 3px 0 0 var(--danger)!important;}.ps-a-rood span{color:var(--danger);}
.ps-a-oranje{box-shadow:inset 3px 0 0 #E07A1F!important;}.ps-a-oranje span{color:#B4500A;}
.ps-a-blauw span{color:var(--royal);}
.ps-niets{display:flex;gap:12px;align-items:center;padding:6px 0;}
.ps-niets-ico{width:36px;height:36px;border-radius:50%;background:var(--success-bg);color:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ps-niets div{display:flex;flex-direction:column;}
.ps-niets strong{font-size:13px;color:var(--charcoal);}
.ps-niets span{font-size:12px;color:var(--muted);}
.ps-maand[hidden]{display:none;}
.ps-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.ps-cijfer{background:var(--bone);border-radius:var(--kader-sm);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.ps-cijfer span{font-size:11px;font-weight:700;color:var(--muted);}
.ps-cijfer b{font-size:24px;font-weight:900;color:var(--royal);font-variant-numeric:tabular-nums;line-height:1.15;}
.ps-cijfer em{font-style:normal;font-size:11px;font-weight:800;}
.ps-op{color:var(--success);}.ps-neer{color:var(--danger);}
.ps-voetnoot{font-size:11.5px;color:var(--muted);margin:8px 0 0;}
.ps-pijp{margin-top:14px;}
.ps-cijfers + .ps-voetnoot + .ps-pijp,.ps-cijfers + .ps-pijp{border-top:1px solid var(--bone-lijn);padding-top:14px;}
.ps-pijp-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.ps-pijp-kop strong{font-size:13px;color:var(--charcoal);}
.ps-pijp-balk{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;background:var(--bone);}
.ps-pijp-balk i{display:block;min-width:6px;}
.ps-pijp-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:11.5px;color:var(--muted);}
.ps-pijp-legenda span{display:inline-flex;align-items:center;gap:6px;}
.ps-pijp-legenda i{width:8px;height:8px;border-radius:50%;}
.ps-pijp-legenda b{color:var(--charcoal);}
.ps-maand-voet{margin-top:8px;display:flex;justify-content:flex-end;}
.ps-proj{display:flex;flex-direction:column;}
.ps-p{font:inherit;text-align:left;width:100%;background:none;border:none;border-top:1px solid var(--bone-lijn);padding:12px 0;cursor:pointer;display:flex;flex-direction:column;gap:10px;}
.ps-kop + .ps-p{border-top:none;padding-top:0;}
.ps-p:hover strong{color:var(--royal);}
.ps-p-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.ps-p-kop strong{font-size:14px;font-weight:800;color:var(--charcoal);overflow-wrap:anywhere;}
.ps-p-fb{font-size:10.5px;font-weight:700;background:var(--warning-bg);color:var(--warning);padding:2px 8px;border-radius:var(--kader-xs);}
.ps-p-fase{display:none;font-size:10.5px;font-weight:800;color:var(--royal);background:var(--royal-wash);padding:2px 8px;border-radius:var(--kader-xs);}
.ps-p-due{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);}
.ps-stappen{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;}
.ps-stappen li{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ps-stappen li::before{content:'';height:6px;border-radius:3px;background:var(--bone-vlak);}
.ps-stappen li.af::before{background:var(--royal-40);}
.ps-stappen li.nu::before{background:var(--royal);}
.ps-stappen span{font-size:10.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ps-stappen li.nu span{color:var(--royal);font-weight:800;}
.ps-onder{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.ps-onder .chat-wrap{height:auto;}
.ps-onder .chat-msgs{max-height:240px;min-height:60px;}
.ps-onder .chat-msg>div:last-child{max-width:80%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;}
.ps-onder .chat-msg.mine>div:last-child{align-items:flex-end;}
.ps-onder .chat-bubble{max-width:100%;}
#p-contact-block .card-title{font-size:15px;font-weight:900;font-style:italic;}
.ps-updates{list-style:none;margin:0;padding:0;}
.ps-updates li{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--bone-lijn);}
.ps-updates li:last-child{border-bottom:none;}
.ps-updates strong{font-size:12.5px;color:var(--charcoal);overflow-wrap:anywhere;}
.ps-updates span{font-size:11.5px;color:var(--muted);}
.ps-stil{font-size:12.5px;color:var(--muted);margin:0;}
@media(max-width:900px){
  .ps-hero{flex-direction:column;}
  .ps-volgende{flex:none;}
  .ps-boven{grid-template-columns:1fr;}
  .ps-cijfers{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .ps-hero{padding:1.25rem;}
  .ps-hero h2{font-size:24px;}
  .ps-onder{grid-template-columns:1fr;}
  .ps-stappen span{display:none;}
  .ps-p-fase{display:inline;}
  .ps-cijfer b{font-size:20px;}
}

/* ═══ FINANCIËN EN HERINNERINGEN (3.69.0) ═══ */
.sb-badge.rood{background:#E5484D;color:#fff;}
.fin-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.fin-kop .fin-tabs{margin-bottom:0;}
.fin-nieuw{margin-left:auto;}
.fin-tab-tel{display:inline-block;margin-left:6px;background:var(--danger);color:#fff;border-radius:var(--kader-xs);padding:0 6px;font-size:10px;line-height:16px;}
.fin-kpis-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.fin-kpi-knop{font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;transition:border-color .15s;}
.fin-kpi-knop:hover:not(:disabled){border-color:var(--royal-40);}
.fin-kpi-knop:disabled{cursor:default;color:inherit;}
.fin-kpi-rood{border-color:#E9B3B7;background:var(--danger-bg);}
.fin-kpi-rood .fin-kpi-val{color:var(--danger);}
.fin-twee{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start;}
.fin-kol{display:flex;flex-direction:column;gap:14px;min-width:0;}
.fin-blok{padding:16px 18px;}
.fin-blok-kop{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.fin-blok-kop .card-title{font-size:15px;font-weight:900;font-style:italic;margin:0;}
.fin-tel{font-size:11px;font-weight:800;color:var(--muted);background:var(--off);border-radius:var(--kader-xs);padding:1px 8px;}
.fin-tel-rood{background:var(--danger-bg);color:var(--danger);}
.fin-kop-sub{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);}
.fin-rij{display:flex;align-items:center;gap:10px;padding:9px 0 9px 12px;border-top:1px solid var(--bone-lijn);box-shadow:inset 3px 0 0 var(--royal);}
.fin-blok-kop + .fin-rij{border-top:none;}
.fin-rij-oranje{box-shadow:inset 3px 0 0 #E07A1F;}
.fin-rij-rood{box-shadow:inset 3px 0 0 var(--danger);}
.fin-rij-grijs{box-shadow:inset 3px 0 0 var(--bone-rand);}
.fin-rij-tekst{flex:1;min-width:0;display:flex;flex-direction:column;}
.fin-rij-tekst strong{font-size:12.5px;font-weight:700;color:var(--charcoal);overflow-wrap:anywhere;}
.fin-rij-tekst span{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;}
.fin-rij-oranje .fin-rij-tekst span{color:#B4500A;}
.fin-rij-rood .fin-rij-tekst span{color:var(--danger);}
.fin-rij-bedrag{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--charcoal);}
.fin-rij-knoppen{display:flex;gap:4px;align-items:center;flex-shrink:0;}
.fin-knop{font-size:11.5px!important;padding:6px 11px!important;white-space:nowrap;}
.fin-leeg{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55;}
.fin-ow{display:flex;flex-direction:column;gap:9px;margin-bottom:10px;}
.fin-ow-rij{display:grid;grid-template-columns:62px minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:12px;}
.fin-ow-rij > span{font-weight:700;color:var(--charcoal);display:flex;flex-direction:column;line-height:1.2;}
.fin-ow-rij small{font-size:9.5px;font-weight:600;color:var(--muted);}
.fin-ow-rij b{text-align:right;font-variant-numeric:tabular-nums;color:var(--royal);}
.fin-ow-baan{display:flex;height:14px;background:var(--off);border-radius:7px;overflow:hidden;gap:2px;}
.fin-ow-baan i{display:block;height:100%;}
.fin-ow-open{background:var(--royal);} .fin-ow-termijn{background:var(--mid);} .fin-ow-retainer{background:var(--cyan);}
.fin-legenda i.fin-ow-open,.fin-legenda i.fin-ow-termijn,.fin-legenda i.fin-ow-retainer{border-radius:50%;}
.fin-mogelijk{margin-top:12px;padding-top:12px;border-top:1px solid var(--bone-lijn);}
.fin-mogelijk h4{font-size:12px;font-weight:800;margin:0;color:var(--charcoal);}
.fin-mogelijk p{font-size:11px;color:var(--muted);margin:2px 0 6px;}
.fin-mog-rij{font:inherit;width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:none;border-top:1px dashed var(--bone-lijn);padding:7px 0;cursor:pointer;}
.fin-mog-rij span{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--charcoal);display:flex;flex-direction:column;}
.fin-mog-rij small{font-size:11px;font-weight:500;color:var(--muted);}
.fin-mog-rij b{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
.fin-mog-rij:hover span{color:var(--royal);}
.fin-jaar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;height:130px;align-items:end;margin-bottom:8px;}
.fin-jaar-kol{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;}
.fin-jaar-kol > span{font-size:10px;font-weight:700;color:var(--muted);}
.fin-jaar-staaf{position:relative;flex:1;width:100%;max-width:26px;display:flex;flex-direction:column-reverse;background:var(--off);border-radius:4px 4px 0 0;}
.fin-jaar-staaf i{display:block;width:100%;}
.fin-jaar-betaald{background:var(--royal);}
.fin-jaar-open{background:var(--royal-40);}
.fin-jaar-vorig{position:absolute;left:-3px;right:-3px;height:2px;background:#E07A1F;}
.fin-legenda i.fin-jaar-streep{background:#E07A1F;height:2px;width:12px;border-radius:0;}
.fin-jaar-later .fin-jaar-staaf{opacity:.45;}
.fin-voet{font-size:11.5px;color:var(--muted);margin:8px 0 0;line-height:1.55;}
.fin-bt{display:flex;flex-direction:column;}
.fin-bt-rij{display:grid;grid-template-columns:minmax(0,1fr) auto 86px;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--bone-lijn);font-size:12.5px;}
.fin-bt-rij:first-child{border-top:none;}
.fin-bt-rij span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fin-bt-rij b{font-variant-numeric:tabular-nums;}
.fin-bt-rij small{font-size:11px;color:var(--muted);text-align:right;}
.fin-rood{color:var(--danger);}
/* Facturentabel */
.fin-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px;}
.fin-chips{display:flex;gap:6px;flex-wrap:wrap;}
.fin-chip{font:inherit;font-size:12px;font-weight:700;background:var(--white);border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:6px 12px;cursor:pointer;color:var(--charcoal);}
.fin-chip b{color:var(--royal);margin-left:4px;font-variant-numeric:tabular-nums;}
.fin-chip.aan{border-color:var(--royal);background:var(--royal-wash);}
.fin-chip-rood b{color:var(--danger);}
.fin-filter-rechts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
.fin-filter-rechts select{font:inherit;font-size:12.5px;font-weight:600;border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:7px 10px;background:var(--white);max-width:180px;}
.fin-zoek{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:0 10px;background:var(--white);}
.fin-zoek i{width:14px;height:14px;color:var(--muted);}
.fin-zoek input{border:none;outline:none;background:transparent;font:inherit;font-size:12.5px;padding:7px 0;width:140px;min-width:0;}
.fin-tabel-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--kader-sm);background:var(--white);}
.fin-tabel{width:100%;border-collapse:collapse;min-width:780px;font-size:12.5px;}
.fin-tabel th{background:var(--royal);color:#fff;text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;white-space:nowrap;}
.fin-tabel td{padding:9px 12px;border-top:1px solid var(--bone-lijn);vertical-align:middle;}
.fin-tabel tbody tr:nth-child(even) td{background:var(--bone);}
.fin-tr{cursor:pointer;}
.fin-tr:hover td{background:var(--royal-wash)!important;}
.fin-tr:focus-visible{outline:2px solid var(--royal);outline-offset:-2px;}
.fin-tabel td small{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;}
.fin-tabel td strong{font-weight:700;color:var(--charcoal);}
.fin-nr{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.fin-dt{white-space:nowrap;}
.fin-num{text-align:right!important;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.fin-acties{white-space:nowrap;text-align:right;}
.fin-ico{border:none;background:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--kader-xs);color:var(--muted);cursor:pointer;vertical-align:middle;}
.fin-ico:hover{background:var(--royal-wash);color:var(--royal);}
.fin-ico i{width:15px;height:15px;}
.fin-tabel-leeg{text-align:center;color:var(--muted);padding:24px!important;}
.geld-chip{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--kader-xs);white-space:nowrap;}
.geld-chip-r{background:var(--danger-bg);color:var(--danger);}
.geld-chip-o{background:#FFF1E6;color:#B4500A;}
.geld-chip-g{background:var(--success-bg);color:var(--success);}
.geld-chip-b{background:var(--royal-wash);color:var(--royal);}
/* Factuurdetail */
.geld-detail{border:1px solid var(--border);border-radius:var(--kader-sm);padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px;background:var(--off);}
.geld-detail-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.geld-detail-sub{font-size:12px;color:var(--muted);}
.geld-log{list-style:none;margin:0;padding:0;font-size:12px;display:flex;flex-direction:column;gap:3px;}
.geld-log li{color:var(--charcoal);}
.geld-detail-knoppen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.geld-detail-knoppen .btn-blue,.geld-detail-knoppen .btn-ghost{font-size:12px;padding:7px 12px;}
.geld-uit{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);margin-left:auto;cursor:pointer;}
.geld-uit input{accent-color:var(--royal);}
.geld-klein{max-width:420px;}
.geld-klein .ws-v-lijf{padding:14px 22px;display:flex;flex-direction:column;gap:10px;}
/* Herinneringsmail */
.hr-soorten{display:flex;gap:6px;flex-wrap:wrap;}
.hr-soort{font:inherit;font-size:12px;font-weight:700;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);padding:7px 12px;cursor:pointer;color:var(--charcoal);}
.hr-soort.aan{border-color:var(--royal);background:var(--royal-wash);color:var(--royal);}
/* Factuurvenster */
.modal.inv-modal{max-width:780px;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 250px;overflow:hidden;}
.inv-m-links{padding:1.6rem 1.75rem;overflow-y:auto;max-height:90vh;min-width:0;}
.inv-m-rechts{background:var(--royal);color:#fff;padding:1.6rem 1.25rem;display:flex;flex-direction:column;gap:8px;}
.inv-r-lbl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);}
.inv-r-tot{font-size:26px;font-weight:900;color:var(--yellow);font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:6px;overflow-wrap:anywhere;}
.inv-r-rij{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums;padding:5px 0;border-top:1px solid rgba(255,255,255,.14);}
.inv-r-rij span:last-child{font-weight:700;color:#fff;text-align:right;}
.inv-r-noot{font-size:11.5px;color:rgba(255,255,255,.72);line-height:1.5;margin:6px 0 0;}
.inv-r-knoppen{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;}
.inv-r-knoppen .btn-blue{background:var(--yellow);color:var(--royal);border:none;}
.inv-r-knoppen .btn-blue:hover{background:#FFF066;}
.inv-r-knoppen .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);}
.inv-bronnen{display:flex;gap:6px;flex-wrap:wrap;}
.inv-bron{font:inherit;font-size:12px;font-weight:700;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);padding:7px 13px;cursor:pointer;color:var(--charcoal);}
.inv-bron.aan{border-color:var(--royal);background:var(--royal-wash);color:var(--royal);}
.inv-hint{font-size:11.5px;color:var(--muted);margin:5px 0 0;line-height:1.5;}
.inv-hint:empty{display:none;}
.inv-hoort{font-size:12px;font-weight:600;color:var(--royal);background:var(--royal-wash);border-radius:var(--kader-xs);padding:7px 10px;margin:0 0 10px;}
.inv-meer{margin-top:6px;border-top:1px solid var(--border);padding-top:10px;}
.inv-meer summary{font-size:12px;font-weight:700;color:var(--royal);cursor:pointer;padding:4px 0;list-style-position:inside;}
.inv-meer[open] summary{margin-bottom:8px;}
/* Offerte in stappen */
.of-stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:4px 0 16px;}
.of-stap-knop{font:inherit;background:none;border:none;border-bottom:3px solid var(--border);padding:8px 4px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
.of-stap-knop b{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;font-size:10px;background:var(--off);color:var(--muted);}
.of-stap-knop.aan{border-color:var(--royal);color:var(--royal);}
.of-stap-knop.aan b{background:var(--royal);color:#fff;}
.of-voet-tot{margin-right:auto;font-size:12.5px;font-weight:800;color:var(--royal);font-variant-numeric:tabular-nums;}
#modal-addOfferte .modal-footer{position:sticky;bottom:-2rem;background:var(--white);padding-top:12px;padding-bottom:4px;margin-bottom:-4px;flex-wrap:wrap;}
/* Projectpagina: geld */
.pp-geld{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.pp-geld-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;}
.pp-geld-cijfers div{background:var(--off);border-radius:var(--kader-xs);padding:8px 10px;display:flex;flex-direction:column;min-width:0;}
.pp-geld-cijfers span{font-size:10.5px;font-weight:700;color:var(--muted);}
.pp-geld-cijfers b{font-size:14px;font-weight:800;color:var(--royal);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.pp-geld-baan{display:flex;height:8px;background:var(--off);border-radius:4px;overflow:hidden;}
.pp-geld-baan i{display:block;height:100%;}
.pp-geld-betaald{background:var(--success);} .pp-geld-open{background:var(--royal-40);}
.pp-geld-uitleg{font-size:11px;color:var(--muted);margin:0;}
.pp-geld-tfs{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.pp-geld-tf{display:flex;align-items:center;gap:10px;background:var(--royal-wash);border-radius:var(--kader-xs);padding:8px 10px;}
.pp-geld-tf span{flex:1;min-width:0;display:flex;flex-direction:column;}
.pp-geld-tf strong{font-size:12.5px;}
.pp-geld-tf small{font-size:11px;color:var(--muted);}
.pp-geld-tf b{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pp-geld-tf .btn-blue{font-size:11.5px;padding:6px 10px;white-space:nowrap;}
.pp-factuur .btn-smb{padding:4px 8px;}
/* Klantpagina: geld */
.geld-kd-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px;}
.geld-kd-cijfers div{display:flex;flex-direction:column;background:var(--off);border-radius:var(--kader-xs);padding:7px 8px;min-width:0;}
.geld-kd-cijfers span{font-size:10px;font-weight:700;color:var(--muted);}
.geld-kd-cijfers b{font-size:13.5px;font-weight:800;color:var(--royal);font-variant-numeric:tabular-nums;}
.geld-kd-cijfers small{font-size:10px;color:var(--muted);line-height:1.35;}
.geld-kd-rij{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--bone-lijn);font-size:12px;}
.geld-kd-rij span{flex:1;min-width:0;color:var(--danger);}
.geld-kd-rij small{display:block;color:var(--muted);}
.geld-kd-alle{font:inherit;background:none;border:none;padding:6px 0 0;font-size:12px;font-weight:700;color:var(--royal);cursor:pointer;text-align:left;}
/* Beheer: betaalherinneringen */
.hrb{display:flex;flex-direction:column;gap:14px;}
.hrb-uitleg{font-size:13px;color:var(--muted);line-height:1.6;margin:0;max-width:72ch;}
.hrb-dagen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.hrb-mail{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.hrb-mail h4{margin:0;font-size:14px;font-weight:900;font-style:italic;color:var(--royal);}
.hrb-mail .ws-v-veld{width:100%;}
.hrb-vars{font-size:12px;color:var(--muted);line-height:1.8;margin:0;}
.hrb-vars code{background:var(--off);border-radius:4px;padding:1px 5px;font-size:11.5px;color:var(--charcoal);}
.hrb-voet{display:flex;justify-content:flex-end;}
@media(max-width:1100px){.fin-twee{grid-template-columns:1fr;}}
@media(max-width:900px){.fin-kpis-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:720px){
  .modal.inv-modal{grid-template-columns:1fr;max-height:92vh;overflow-y:auto;}
  .inv-m-links{max-height:none;overflow:visible;padding:1.25rem 1.1rem;}
  .inv-m-rechts{padding:1.1rem;}
  .fin-nieuw{margin-left:0;}
  .fin-kop{align-items:stretch;}
  .fin-filter-rechts{margin-left:0;width:100%;}
  .fin-zoek{flex:1 1 100%;}
  .fin-zoek input{width:100%;}
  .fin-filter-rechts select{flex:1;max-width:none;min-width:0;}
  .fin-rij{flex-wrap:wrap;}
  .fin-rij-knoppen{width:100%;justify-content:flex-end;}
  .hrb-dagen{grid-template-columns:1fr;}
  .of-stap-knop{font-size:11px;flex-direction:column;gap:2px;}
  .geld-kd-cijfers{grid-template-columns:1fr 1fr;}
}
#of-vorige[hidden],#of-volgende[hidden],.of-stap[hidden]{display:none!important;}
.hrb .ws-v-veld{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:var(--muted);}
.hrb .ws-v-veld em{font-style:normal;font-weight:500;}
.hrb input,.hrb textarea{font:inherit;font-size:13px;font-weight:500;color:var(--charcoal);border:1.5px solid var(--border);border-radius:var(--kader-xs);padding:8px 11px;background:var(--white);width:100%;line-height:1.55;}
.hrb textarea{resize:vertical;min-height:120px;}
.hrb input:focus,.hrb textarea:focus{outline:none;border-color:var(--royal);}

/* ═══ TOSTIWIEL (3.70.0) ═══ */
.ts{display:flex;flex-direction:column;gap:14px;}
.ts-blok{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.ts-kop{font-size:15px;font-weight:900;font-style:italic;color:var(--royal);margin:0;}
.ts-kop-rij{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ts-sub{font-size:12px;font-weight:800;color:var(--charcoal);margin:6px 0 0;}
.ts-uitleg{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55;}
.ts-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);}
.ts-vandaag{background:var(--royal);color:#fff;border-radius:var(--kader);padding:18px 22px;display:flex;flex-direction:column;gap:6px;}
.ts-vandaag h3{font-size:clamp(24px,4vw,34px);font-weight:900;font-style:italic;margin:0;color:#fff;}
.ts-vandaag p{margin:0;font-size:13px;color:rgba(255,255,255,.86);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ts-vandaag .ts-link{color:var(--yellow);align-self:flex-start;}
.ts-link{font:inherit;background:none;border:none;padding:0;font-size:12.5px;font-weight:700;color:var(--royal);cursor:pointer;}
.ts-link:hover{text-decoration:underline;text-underline-offset:3px;}
.ts-av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;overflow:hidden;flex-shrink:0;}
.ts-av img{width:100%;height:100%;object-fit:cover;}
.ts-av-k{width:22px;height:22px;font-size:8.5px;}
.ts-mee{display:flex;flex-wrap:wrap;gap:8px;}
.ts-mee-knop{font:inherit;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);opacity:.65;}
.ts-mee-knop.aan{border-color:var(--royal);background:var(--royal-wash);color:var(--royal);opacity:1;}
.ts-spellen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.ts-spel{font:inherit;text-align:left;background:var(--off);border:1.5px solid transparent;border-radius:var(--kader-sm);padding:14px;display:flex;flex-direction:column;gap:5px;cursor:pointer;color:var(--charcoal);transition:border-color .15s,transform .15s;}
.ts-spel:hover:not(:disabled){border-color:var(--royal);transform:translateY(-1px);}
.ts-spel:disabled{opacity:.5;cursor:default;}
.ts-spel svg{width:28px;height:28px;color:var(--royal);}
.ts-spel b{font-size:14px;font-weight:800;}
.ts-spel span{font-size:12px;color:var(--muted);line-height:1.45;}
.ts-twee{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:start;}
.ts-kaart{display:flex;flex-direction:column;}
.ts-tosti{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--bone-lijn);}
.ts-tosti:first-child{border-top:none;}
.ts-tosti.ts-op .ts-tosti-tekst{opacity:.5;}
.ts-tosti-tekst{flex:1;min-width:0;display:flex;flex-direction:column;}
.ts-tosti-tekst b{font-size:13px;color:var(--charcoal);}
.ts-tosti-tekst small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ts-chip{font-size:10px;font-weight:800;background:var(--success-bg);color:var(--success);padding:1px 7px;border-radius:var(--kader-xs);}
.ts-fav{border:none;background:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;flex-shrink:0;}
.ts-fav svg{width:17px;height:17px;fill:none;stroke:var(--bone-rand);stroke-width:1.8;}
.ts-fav.aan svg{fill:#E5484D;stroke:#E5484D;}
.ts-voorraad{font:inherit;font-size:11px;font-weight:800;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);padding:3px 9px;cursor:pointer;color:var(--muted);white-space:nowrap;}
.ts-voorraad.aan{border-color:var(--success);color:var(--success);}
.ts-ico{border:none;background:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);border-radius:var(--kader-xs);}
.ts-ico:hover{background:var(--royal-wash);color:var(--royal);}
.ts-ico i{width:14px;height:14px;}
.ts-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.ts-cijfers div{background:var(--off);border-radius:var(--kader-xs);padding:8px 10px;display:flex;flex-direction:column;min-width:0;}
.ts-cijfers span{font-size:10.5px;font-weight:700;color:var(--muted);}
.ts-cijfers b{font-size:14px;color:var(--royal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ts-bak{display:grid;grid-template-columns:22px 70px minmax(0,1fr) 20px;gap:8px;align-items:center;font-size:12px;}
.ts-bak-baan{height:8px;background:var(--off);border-radius:4px;overflow:hidden;}
.ts-bak-baan i{display:block;height:100%;background:#C98A2E;}
.ts-bak b{text-align:right;}
.ts-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.ts-hist li{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:8px;padding:5px 0;border-top:1px solid var(--bone-lijn);font-size:12.5px;align-items:baseline;}
.ts-hist li:first-child{border-top:none;}
.ts-hist span,.ts-hist small{color:var(--muted);font-size:11.5px;}
.ts-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;}
.ts-weg{margin-right:auto;color:var(--danger)!important;}
/* Spel */
.ts-speelt{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:16px 18px 22px;}
.ts-spel-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--bone-lijn);padding-bottom:10px;}
.ts-spel-kop h3{margin:0;font-size:18px;font-weight:900;font-style:italic;color:var(--royal);}
.ts-spel-mee{margin-left:auto;display:flex;gap:2px;}
.ts-podium{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:10px;}
.ts-groot{font-size:17px;color:var(--charcoal);margin:0;text-align:center;line-height:1.6;}
.ts-groot .ts-av{vertical-align:middle;margin-right:6px;}
.ts-geel{font:inherit;background:var(--royal);color:var(--yellow);border:none;border-radius:var(--kader-sm);padding:11px 22px;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #0A2266;}
.ts-geel:hover:not(:disabled){filter:brightness(1.03);}
.ts-geel:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #0A2266;}
.ts-geel:disabled{opacity:.45;cursor:default;}
.ts-groot-knop{padding:15px 34px;font-size:17px;}
.ts-wiel-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px;align-items:center;width:100%;}
.ts-wiel{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto;touch-action:none;}
.ts-wiel canvas{width:100%;height:100%;display:block;}
.ts-pijl{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid #0A2266;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 2px rgba(0,0,0,.35));z-index:1;}
.ts-wiel-zij{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.ts-uitslag{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:10px;}
.ts-uitslag .ts-eyebrow{color:var(--muted);}
.ts-uitslag h2{font-size:clamp(28px,6vw,46px);font-weight:900;font-style:italic;color:var(--royal);margin:0;line-height:1.1;}
.ts-uitslag-sub{font-size:13.5px;color:var(--muted);margin:0;max-width:52ch;}
.ts-bakker{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;background:var(--off);border-radius:var(--kader-sm);padding:6px 10px;}
.ts-bakker select{font:inherit;font-weight:700;border:1.5px solid var(--border);border-radius:var(--kader-xs);padding:4px 8px;background:var(--white);}
.ts-uitslag-knoppen{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px;}
.ts-duel{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}
.ts-duel .ts-eyebrow{color:var(--muted);}
.ts-duel-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;width:100%;max-width:620px;}
.ts-duel-kant{background:var(--royal);color:#fff;border-radius:var(--kader-sm);padding:16px;display:flex;flex-direction:column;gap:4px;text-align:center;min-height:96px;justify-content:center;}
.ts-duel-kant b{font-size:17px;font-weight:900;font-style:italic;}
.ts-duel-kant small{font-size:11.5px;color:rgba(255,255,255,.78);}
.ts-vs{font-size:14px;font-weight:900;font-style:italic;color:var(--muted);}
.ts-stemmers{display:flex;flex-direction:column;gap:6px;width:100%;max-width:620px;}
.ts-stemmer{display:grid;grid-template-columns:22px 80px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;font-size:13px;font-weight:700;}
.ts-stem{font:inherit;font-size:12px;font-weight:700;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);padding:7px 8px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--charcoal);}
.ts-stem.aan{border-color:var(--royal);background:var(--royal);color:#fff;}
.ts-reactie{width:100%;max-width:560px;min-height:300px;border-radius:var(--kader);background:var(--off);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;user-select:none;-webkit-user-select:none;touch-action:manipulation;}
.ts-reactie.ts-warm{background:#3B1E10;cursor:pointer;}
.ts-reactie.ts-warm .ts-groot,.ts-reactie.ts-warm .ts-uitleg{color:#F3C9A6;}
.ts-reactie.ts-piep{background:var(--royal);cursor:pointer;}
.ts-reactie.ts-piep .ts-groot{color:var(--yellow);font-size:42px;font-weight:900;font-style:italic;}
.ts-stapel{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.ts-stapel canvas{width:100%;max-width:360px;aspect-ratio:480/560;background:var(--off);border-radius:var(--kader-sm);touch-action:manipulation;cursor:pointer;}
.ts-roulette{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;}
.ts-kaarten{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.ts-kaart-dicht,.ts-kaart-open{width:104px;height:144px;border-radius:var(--kader-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:8px;}
.ts-kaart-dicht{font:inherit;border:none;background:var(--royal);color:var(--yellow);cursor:pointer;font-size:34px;font-weight:900;font-style:italic;box-shadow:0 4px 0 #0C2A73;transition:transform .15s;}
.ts-kaart-dicht:hover:not(:disabled){transform:translateY(-3px);}
.ts-kaart-dicht:disabled{opacity:.6;cursor:default;}
.ts-kaart-open{background:var(--off);border:1.5px solid var(--border);}
.ts-kaart-open b{font-size:13px;font-weight:900;}
.ts-kaart-open span{font-size:12px;color:var(--muted);}
.ts-k-goud{background:var(--royal);border-color:var(--royal);} .ts-k-goud b{color:var(--yellow);} .ts-k-goud span{color:rgba(255,255,255,.8);}
.ts-k-bak{background:#F3DFC9;border-color:#C98A2E;} .ts-k-bak b{color:#7A4A10;}
.ts-gok{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;}
.ts-rollen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:620px;background:var(--royal);border-radius:var(--kader);padding:14px;}
.ts-rol{display:flex;flex-direction:column;gap:6px;align-items:center;}
.ts-rol-lbl{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);}
.ts-rol-raam{background:var(--white);border-radius:var(--kader-xs);width:100%;min-height:74px;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;}
.ts-rol-raam b{font-size:15px;font-weight:900;color:var(--charcoal);overflow-wrap:anywhere;}
.ts-rol-stop{box-shadow:inset 0 0 0 3px var(--yellow);}
.ts-kies{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;}
.ts-kies-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;width:100%;}
.ts-kies-knop{font:inherit;text-align:left;background:var(--off);border:1.5px solid transparent;border-radius:var(--kader-sm);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;}
.ts-kies-knop:hover{border-color:var(--royal);}
.ts-kies-knop b{font-size:13.5px;color:var(--charcoal);}
.ts-kies-knop small{font-size:11.5px;color:var(--muted);}
.sp-tosti{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;background:var(--royal-wash);border-radius:var(--kader-xs);font-size:13px;}
.sp-tosti span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.sp-tosti b{color:var(--royal);font-weight:900;font-style:italic;}
.sp-tosti em{font-style:normal;color:var(--muted);font-size:12px;}
@media(max-width:900px){.ts-twee{grid-template-columns:1fr;}.ts-spellen{grid-template-columns:repeat(2,minmax(0,1fr));}.ts-wiel-blok{grid-template-columns:1fr;}.ts-wiel-zij{align-items:center;text-align:center;}}
@media(max-width:520px){
  .ts-spellen{grid-template-columns:1fr;}
  .ts-cijfers{grid-template-columns:1fr 1fr;}
  .ts-stemmer{display:flex;flex-wrap:wrap;gap:6px 8px;}
  .ts-stemmer > span:not(.ts-av){flex:1 1 calc(100% - 40px);}
  .ts-stemmer .ts-stem{flex:1 1 calc(50% - 4px);min-width:0;}
  .ts-duel-vs{grid-template-columns:1fr;}
  .ts-kaart-dicht,.ts-kaart-open{width:86px;height:120px;}
  .ts-rol-raam b{font-size:13px;}
}

/* ═══ VASTLEGMOMENTEN (3.70.0) ═══ */
.of-br{border:1.5px solid var(--border);border-radius:var(--kader-sm);padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
.of-br-rij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.of-br input,.of-br textarea{font-family:'Montserrat',sans-serif;font-size:12px;padding:5px 8px;border:1.5px solid var(--border);border-radius:var(--kader-sm);outline:none;background:var(--white);color:var(--charcoal);}
.of-br input:focus,.of-br textarea:focus{border-color:var(--blue);}
.of-br textarea{font-size:11px;resize:vertical;}
.of-br-label{flex:1 1 180px;min-width:0;}
.of-br-veld{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);}
.of-br-veld small{font-size:9px;}
.of-br-veld input{width:84px;}
.of-br-veld:last-of-type input{width:64px;}
.of-br-weg{background:none;border:none;cursor:pointer;color:var(--muted);font-size:12px;opacity:.55;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;}
.of-br-weg:hover{opacity:1;}
.of-totaal-blok{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.of-uren{font-size:11px;color:var(--muted);}
.of-reden-knop{display:block;margin-top:4px;font:inherit;font-size:10.5px;font-weight:700;color:var(--danger);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.vl-uitleg{font-size:12.5px;color:var(--muted);margin:0;}
#vl-venster .ws-v-veld textarea{font:inherit;font-size:13px;font-weight:500;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);resize:vertical;width:100%;}
.vl-klant{margin:0;padding:10px 12px;background:var(--off);border-left:3px solid var(--royal);font-size:12.5px;color:var(--charcoal);display:flex;flex-direction:column;gap:3px;}
.vl-klant span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.vl-keuzes{display:flex;flex-wrap:wrap;gap:6px;}
.vl-keuze{position:relative;}
.vl-keuze input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
.vl-keuze span{display:inline-block;padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font-size:12.5px;font-weight:700;color:var(--charcoal);background:var(--white);}
.vl-keuze input:checked + span{border-color:var(--royal);background:var(--royal);color:#fff;}
.vl-keuze input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px;}
.ps-tevreden{display:flex;flex-direction:column;gap:10px;}
.ps-tevreden .ps-kop{margin:0;}
.ps-cijfer-uitleg{margin:0;font-size:13px;color:var(--muted);line-height:1.5;}
.ps-sterren{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.ps-ster{border:none;background:none;padding:2px;width:40px;height:40px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--kader-xs);}
.ps-ster svg{width:30px;height:30px;fill:none;stroke:var(--bone-rand);stroke-width:1.8;stroke-linejoin:round;transition:fill .12s,stroke .12s;}
.ps-ster.aan svg{fill:var(--royal);stroke:var(--royal);}
.ps-ster:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.ps-ster-woord{font-size:13px;font-weight:800;color:var(--royal);margin-left:6px;}
.ps-cijfer-veld{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted);}
.ps-cijfer-veld em{font-style:normal;font-weight:500;}
.ps-cijfer-veld textarea{font:inherit;font-size:13px;font-weight:500;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);resize:vertical;}
.ps-cijfer-knoppen{display:flex;justify-content:flex-end;gap:8px;}

/* ═══ RENTABILITEIT (3.70.0) ═══ */
.ra-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.ra-kop .fin-tabs{margin-bottom:0;}
.ra-periode{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--muted);}
.ra-periode select{font-family:inherit;font-size:12px;font-weight:600;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);color:var(--charcoal);cursor:pointer;}
.ra-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.ra-kpi{font:inherit;text-align:left;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:14px 16px 12px;display:flex;flex-direction:column;gap:3px;cursor:pointer;color:var(--charcoal);position:relative;overflow:hidden;min-width:0;transition:border-color .15s;}
.ra-kpi:hover{border-color:var(--royal);}
.ra-kpi-lbl::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bone-rand);margin-right:7px;vertical-align:1px;}
.ra-goed .ra-kpi-lbl::before{background:var(--success);} .ra-let .ra-kpi-lbl::before{background:var(--warning);} .ra-slecht .ra-kpi-lbl::before{background:var(--danger);}
.ra-kpi-lbl{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ra-kpi-val{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--royal);}
.ra-slecht .ra-kpi-val{color:var(--danger);}
.ra-kpi-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ra-spark{position:relative;width:100%;height:34px;margin-top:8px;}
.ra-spark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.ra-spark-lijn{fill:none;stroke:var(--royal);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.ra-spark-punt{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--royal);transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--white);}
.ra-spark-streef{stroke:var(--bone-rand);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;}
.ra-spark-geen{display:flex;align-items:center;justify-content:center;border-bottom:1px dashed var(--border);}
.ra-spark-geen span{font-size:10.5px;color:var(--muted);}
.ra-spark-as{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:3px;}
.ra-noot{font-size:11px;color:var(--muted);margin:10px 0 18px;line-height:1.55;}
.ra-sectie-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.ra-h{font-size:15px;font-weight:900;font-style:italic;color:var(--royal);margin:0;}
.ra-pad{padding:14px 18px 0;}
.ra-top{margin-bottom:6px;}
.ra-alle .inz-hero{display:none;}
.ra-leeg{padding:1.75rem;text-align:center;color:var(--muted);font-size:13px;}
.ra-leeg-tekst{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.55;}
.ra-blok{padding:16px 18px;margin-bottom:14px;min-width:0;}
.ra-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.ra-twee > .ra-blok{margin-bottom:14px;}
.ra-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.ra-tegels-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0;}
.ra-tegel{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.ra-tegels-2 .ra-tegel{background:var(--off);border-color:transparent;}
.ra-tegel span{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ra-tegel b{font-size:18px;font-weight:800;color:var(--royal);font-variant-numeric:tabular-nums;}
.ra-tegel small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ra-tabelkaart{padding:0;overflow:hidden;margin-bottom:14px;}
.ra-tabelkaart .ra-sectie-kop{margin-bottom:12px;}
.ra-tabelwrap{overflow-x:auto;}
.ra-tabel{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px;}
.ra-tabel th{background:var(--royal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:9px 12px;white-space:nowrap;}
.ra-tabel td{padding:9px 12px;border-top:1px solid var(--bone-lijn);vertical-align:middle;}
.ra-tabel tbody tr:nth-child(even) td{background:var(--off);}
.ra-tabel th:first-child,.ra-tabel td:first-child{padding-left:18px;}
.ra-tabel th:last-child,.ra-tabel td:last-child{padding-right:18px;}
.ra-r{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ra-vet{font-weight:700;}
.ra-grijs{color:var(--muted);}
.ra-klein{font-size:11px;}
.ra-naam{font:inherit;font-weight:700;background:none;border:none;padding:0;cursor:pointer;color:var(--charcoal);text-align:left;}
.ra-naam:hover{color:var(--royal);text-decoration:underline;text-underline-offset:3px;}
.ra-balk{height:4px;background:var(--bone-lijn);border-radius:2px;margin-top:5px;max-width:160px;overflow:hidden;}
.ra-balk i{display:block;height:100%;background:var(--royal);}
.ra-trend{font-size:11px;font-weight:800;white-space:nowrap;}
.ra-trend-groeit,.ra-trend-nieuw{color:var(--success);} .ra-trend-krimpt{color:var(--danger);} .ra-trend-stabiel{color:var(--muted);}
.ra-kleur-groen{color:var(--success);font-weight:700;} .ra-kleur-geel{color:var(--warning);font-weight:700;} .ra-kleur-rood{color:var(--danger);font-weight:700;}
.ra-pil{font-size:11px;font-weight:800;padding:3px 9px;border-radius:var(--kader-xs);white-space:nowrap;}
.ra-pil-groen{background:var(--success-bg);color:var(--success);}
.ra-pil-geel{background:var(--warning-bg);color:var(--warning);}
.ra-pil-rood{background:var(--danger-bg);color:var(--danger);}
.ra-nac{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.ra-nac li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 110px;gap:14px;align-items:center;padding:8px 0;border-top:1px solid var(--bone-lijn);}
.ra-nac li:first-child{border-top:none;}
.ra-nac-naam{display:flex;flex-direction:column;min-width:0;}
.ra-nac-naam b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ra-nac-naam small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ra-nac-baan{position:relative;height:16px;}
.ra-nac-baan i{position:absolute;left:0;border-radius:2px;}
.ra-nac-b{top:0;height:16px;background:var(--bone-lijn);display:inline-block;}
.ra-nac-g{top:4px;height:8px;display:inline-block;}
.ra-nac-groen{background:var(--royal);} .ra-nac-geel{background:var(--warning);} .ra-nac-rood{background:var(--danger);}
.ra-nac-cijfer{display:flex;flex-direction:column;align-items:flex-end;}
.ra-nac-cijfer b{font-size:14px;}
.ra-nac-cijfer small{font-size:11px;color:var(--muted);white-space:nowrap;}
.ra-legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--muted);}
.ra-legenda span{display:inline-flex;align-items:center;gap:6px;}
.ra-legenda i{position:static!important;width:12px;height:8px!important;border-radius:2px;display:inline-block;}
.ra-legenda .ra-nac-b{height:8px;}
.ra-staaf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ra-staaf li{display:grid;grid-template-columns:92px minmax(0,1fr) 52px 54px;gap:10px;align-items:center;font-size:12.5px;}
.ra-staaf-smal li{grid-template-columns:130px minmax(0,1fr) 52px 40px;}
.ra-staaf-naam{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ra-staaf-baan{height:12px;background:var(--off);border-radius:2px;display:flex;overflow:hidden;}
.ra-staaf-baan i{display:block;height:100%;}
.ra-staaf b{text-align:right;font-variant-numeric:tabular-nums;}
.ra-staaf small{text-align:right;color:var(--muted);font-size:11px;white-space:nowrap;}
.ra-decl{background:var(--royal);}
.ra-intern{background:#8FA6D9;}
.ra-afw{background:var(--danger);}
.ra-kolommen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:150px;}
.ra-kolom{display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;min-width:0;}
.ra-kolom-staaf{flex:1;width:100%;max-width:34px;display:flex;flex-direction:column-reverse;justify-content:flex-start;background:var(--off);border-radius:2px 2px 0 0;overflow:hidden;}
.ra-kolom-staaf i{display:block;width:100%;}
.ra-kolom span{font-size:10px;color:var(--muted);font-weight:700;}
.ra-trap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ra-trap li{display:grid;grid-template-columns:120px minmax(0,1fr) 36px minmax(0,110px);gap:10px;align-items:center;font-size:12.5px;}
.ra-trap-naam{font-weight:700;}
.ra-trap-baan{height:16px;background:var(--off);border-radius:2px;overflow:hidden;}
.ra-trap-baan i{display:block;height:100%;background:var(--royal);}
.ra-trap li:last-child .ra-trap-baan i{background:var(--success);}
.ra-trap b{text-align:right;font-size:14px;font-variant-numeric:tabular-nums;}
.ra-trap small{font-size:11px;color:var(--muted);line-height:1.3;}
@media(max-width:1100px){.ra-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}.ra-tegels{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:900px){.ra-twee{grid-template-columns:1fr;}}
@media(max-width:560px){
  .ra-kpis{grid-template-columns:1fr 1fr;gap:8px;}
  .ra-kpi{padding:12px 12px 10px;}
  .ra-kpi-val{font-size:18px;}
  .ra-kpi-sub{white-space:normal;}
  .ra-tegels{grid-template-columns:1fr 1fr;gap:8px;}
  .ra-nac li{grid-template-columns:minmax(0,1fr) 90px;}
  .ra-nac-baan{grid-column:1/-1;grid-row:2;}
  .ra-staaf li,.ra-staaf-smal li{grid-template-columns:76px minmax(0,1fr) 46px;}
  .ra-staaf small{display:none;}
  .ra-trap li{grid-template-columns:96px minmax(0,1fr) 30px;}
  .ra-trap small{grid-column:2/-1;margin-top:-6px;}
  .ra-kolommen{gap:3px;height:120px;}
  .ra-kolom span{font-size:8.5px;}
  .ra-kop{align-items:stretch;}
  .ra-kop .fin-tabs{width:100%;}
  .ra-tabs .fin-tab{padding:7px 10px;flex:1;}
}
.pp-klantcijfer{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--royal-wash);border-radius:var(--kader-sm);margin-bottom:10px;}
.pp-kc-sterren{font-size:16px;color:var(--royal);letter-spacing:1px;white-space:nowrap;line-height:1.3;}
.pp-kc-sterren i{font-style:normal;color:var(--bone-rand);}
.pp-klantcijfer b{font-size:13px;}
.pp-klantcijfer p{margin:3px 0 0;font-size:12.5px;color:var(--charcoal);}
.pp-klantcijfer small{display:block;font-size:11px;color:var(--muted);margin-top:3px;}

/* ═══ RAAD VAN COMMISSARISSEN, UITGEBOUWD (3.71.0) ═══ */
.rd-balk{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:12px 16px;margin:14px 0;}
.rd-balk-tekst{font-size:13px;font-weight:700;display:flex;flex-direction:column;gap:2px;min-width:0;}
.rd-balk-tekst span{font-size:12px;font-weight:500;color:var(--muted);}
.rd-balk-knoppen{display:flex;gap:8px;flex-wrap:wrap;}
.rd-twee-kol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:16px;}
.rd-kaart{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0;margin-bottom:14px;}
.rd-twee-kol .rd-kaart{margin-bottom:0;}
.rd-h{font-size:15px;font-weight:900;font-style:italic;color:var(--royal);margin:0;}
.rd-kop-rij{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.rd-leeg,.rd-uitleg{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55;}
.rd-sinds,.rd-opdr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.rd-sinds li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--bone-lijn);font-size:12.5px;}
.rd-sinds li:first-child,.rd-opdr li:first-child{border-top:none;}
.rd-opdr li{display:grid;grid-template-columns:minmax(0,1fr) auto 26px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--bone-lijn);}
.rd-opdr li div{display:flex;flex-direction:column;min-width:0;}
.rd-opdr b{font-size:13px;}
.rd-opdr small{font-size:11.5px;color:var(--muted);}
.rd-chip{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:var(--kader-xs);white-space:nowrap;text-align:center;}
.rd-chip-g{background:var(--success-bg);color:var(--success);}
.rd-chip-o{background:var(--warning-bg);color:var(--warning);}
.rd-chip-r{background:var(--danger-bg);color:var(--danger);}
.rd-chip-b{background:var(--royal-wash);color:var(--royal);}
.rd-weg{border:none;background:none;width:26px;height:26px;cursor:pointer;color:var(--muted);font-size:17px;border-radius:var(--kader-xs);}
.rd-weg:hover{background:var(--danger-bg);color:var(--danger);}
.rd-link{font:inherit;font-size:12px;font-weight:700;color:var(--royal);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;align-self:flex-start;}
.rd-klein-knop{font-size:11.5px!important;padding:5px 12px!important;}
.rd-knoppen{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.rd-vraag{font-size:12.5px;font-weight:700;margin-right:auto;}
.rd-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
.rvc-punt-actie{display:flex;justify-content:flex-end;margin-top:8px;}
/* vaste lasten */
.rd-lasten{display:flex;flex-direction:column;gap:6px;}
.rd-last{display:grid;grid-template-columns:minmax(0,1fr) 130px 28px;gap:8px;align-items:center;}
.rd-last input,.rd-invoer input{font:inherit;font-size:13px;color:var(--charcoal);padding:7px 9px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);min-width:0;width:100%;}
.rd-last-bedrag{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--muted);}
.rd-lasten-som{font-size:12.5px;color:var(--muted);text-align:right;}
.rd-lasten-som b{color:var(--royal);font-size:14px;}
/* koers */
.rd-doel{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 150px;gap:14px;align-items:center;padding:8px 0;border-top:1px solid var(--bone-lijn);}
.rd-doel:first-of-type{border-top:none;}
.rd-doel-naam,.rd-doel-stand{display:flex;flex-direction:column;min-width:0;}
.rd-doel-naam b{font-size:13px;}
.rd-doel-naam small,.rd-doel-stand small{font-size:11.5px;color:var(--muted);}
.rd-doel-stand{text-align:right;}
.rd-doel-stand b{font-size:15px;color:var(--royal);font-variant-numeric:tabular-nums;}
.rd-doel-stand small.rd-op,.rd-op{color:var(--success)!important;font-weight:700;}
.rd-doel-stand small.rd-neer,.rd-neer{color:var(--danger)!important;font-weight:700;}
.rd-doel-baan{position:relative;height:14px;background:var(--off);border-radius:2px;}
.rd-doel-baan i,.rd-doel-baan s{position:absolute;left:0;border-radius:2px;text-decoration:none;}
.rd-doel-baan i{top:0;bottom:0;background:var(--royal);}
.rd-doel-baan i.rd-rood{background:var(--danger);}
.rd-doel-baan s{top:3px;bottom:3px;background:var(--royal);opacity:.3;}
.rd-doel-baan u{position:absolute;top:-5px;bottom:-5px;width:0;border-left:2px dashed var(--charcoal);margin-left:-1px;}
.rd-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:4px;}
.rd-legenda span{display:inline-flex;align-items:center;gap:6px;}
.rd-legenda i{display:inline-block;width:12px;height:8px;border-radius:2px;}
.rd-l-nu{background:var(--royal);} .rd-l-verw{background:var(--royal);opacity:.3;} .rd-l-doel{width:0!important;height:12px!important;border-left:2px dashed var(--charcoal);border-radius:0!important;}
.rd-doel-velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.rd-doel-velden .ws-v-veld em{font-style:normal;font-weight:500;display:block;}
.rd-invoer{display:flex;align-items:center;gap:6px;}
.rd-invoer i{font-style:normal;font-weight:700;color:var(--muted);font-size:12px;}
/* scenario's */
.rd-sc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;}
.rd-sc-in{display:flex;flex-direction:column;gap:12px;background:var(--off);border-radius:var(--kader-sm);padding:14px;}
.rd-sc-in label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted);}
.rd-sc-in label span{display:flex;justify-content:space-between;gap:8px;}
.rd-sc-in output{color:var(--royal);font-variant-numeric:tabular-nums;}
.rd-sc-in input[type=range]{width:100%;accent-color:var(--royal);}
.rd-sc-in select{font:inherit;font-size:13px;padding:7px 9px;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);color:var(--charcoal);}
.rd-sc-uit{display:flex;flex-direction:column;gap:10px;min-width:0;align-items:flex-start;}
.rd-uitkomst{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
.rd-uitkomst div{border:1px solid var(--border);border-radius:var(--kader-sm);padding:10px 12px;display:flex;flex-direction:column;gap:1px;min-width:0;}
.rd-uitkomst span{font-size:9.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.rd-uitkomst b{font-size:18px;color:var(--royal);font-variant-numeric:tabular-nums;}
.rd-uitkomst em{font-style:normal;font-size:11.5px;color:var(--muted);}
.rd-oordeel{font-size:13px;margin:0;padding:10px 12px;border-radius:var(--kader-sm);background:var(--royal-wash);color:var(--charcoal);line-height:1.5;width:100%;}
/* evaluatie */
.rd-eval-keuze{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);margin-right:auto;}
.rd-eval-keuze select{font:inherit;font-size:12px;padding:5px 8px;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);color:var(--charcoal);}
.rd-beurt{border-color:var(--royal);}
.rd-eval{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--bone-lijn);}
.rd-eval:first-of-type{border-top:none;}
.rd-eval-kop{display:flex;flex-direction:column;gap:2px;}
.rd-eval-kop b{font-size:14px;}
.rd-eval-kop small{font-size:12px;color:var(--muted);}
.rd-tabel{width:100%;border-collapse:collapse;font-size:12.5px;}
.rd-tabel th{background:var(--royal);color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;text-align:left;}
.rd-tabel td{padding:6px 10px;border-top:1px solid var(--bone-lijn);}
.rd-tabel tbody tr:nth-child(even) td{background:var(--off);}
.rd-eval-regel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:0 18px 4px;}
.rd-tref{margin-bottom:8px;}
.rd-kpi-naam{font-size:17px!important;}
.rd-leden{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.rd-lid-score{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--border);border-radius:var(--kader-sm);padding:4px 10px 4px 4px;font-size:11.5px;font-weight:700;}
.rd-lid-score b{color:var(--royal);}
@media(max-width:900px){.rd-twee-kol,.rd-sc{grid-template-columns:1fr;}.rd-doel-velden{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){
  .rd-doel{grid-template-columns:minmax(0,1fr) auto;}
  .rd-doel-baan{grid-column:1/-1;grid-row:2;}
  .rd-doel-velden,.rd-twee{grid-template-columns:1fr;}
  .rd-last{grid-template-columns:minmax(0,1fr) 110px 28px;}
  .rd-uitkomst b{font-size:16px;}
  .rd-balk-knoppen{width:100%;}
  .rd-balk-knoppen button{flex:1 1 auto;}
}
.sp-raad .sp-soort{background:var(--royal-wash);color:var(--royal);}
.rd-sc-in{min-width:0;}
.rd-sc-in select{width:100%;min-width:0;}
@media(max-width:560px){.rvc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}.rvc-tabs::-webkit-scrollbar{display:none;}.rvc-tab{padding:8px 6px;font-size:10.5px;flex:1 0 auto;}}

/* ═══ CONTENTKALENDER (3.72.0) ═══ */
.ck{display:flex;flex-direction:column;gap:12px;min-width:0;}
.ck-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.ck-kop .fin-tabs,.ck-portaal .fin-tabs{margin-bottom:0;}
.ck-filters{display:flex;gap:8px;flex-wrap:wrap;}
.ck-filters select{font:inherit;font-size:12px;font-weight:600;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);color:var(--charcoal);max-width:220px;}
.ck-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.ck-h{font-size:17px;font-weight:900;font-style:italic;color:var(--royal);margin:0;}
.ck-h small{font-size:12.5px;font-weight:600;font-style:normal;color:var(--muted);margin-left:6px;}
.ck-nav-knoppen{display:flex;gap:4px;}
.ck-pijl,.ck-vandaag{font:inherit;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:var(--white);color:var(--charcoal);border-radius:var(--kader-xs);padding:6px 12px;cursor:pointer;}
.ck-pijl{font-size:16px;line-height:1;padding:5px 11px;}
.ck-pijl:hover,.ck-vandaag:hover{border-color:var(--royal);color:var(--royal);}
.ck-omzet{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--royal-wash);border-radius:var(--kader-sm);padding:10px 14px;font-size:12.5px;}
.ck-gat{margin:0;font-size:12.5px;background:var(--warning-bg);color:var(--warning);border-radius:var(--kader-xs);padding:8px 12px;}
/* week */
.ck-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.ck-dag{background:var(--white);border:1px solid var(--border);border-radius:var(--kader-sm);padding:8px;display:flex;flex-direction:column;gap:6px;min-height:220px;min-width:0;transition:background .12s,border-color .12s;}
.ck-dag.ck-nu{border-color:var(--royal);box-shadow:inset 0 3px 0 var(--royal);}
.ck-dag.ck-voorbij{background:var(--off);}
.ck-dag.ck-over,.ck-cel.ck-over,.ck-kolom.ck-over{border-color:var(--royal);background:var(--royal-wash);}
.ck-dag-kop{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:var(--muted);}
.ck-dag-kop b{color:var(--charcoal);font-size:12.5px;}
.ck-dag-kop span{font-size:10px;font-weight:800;color:var(--royal);text-transform:uppercase;letter-spacing:.06em;}
.ck-thema{font-size:10px;font-weight:700;color:var(--muted);background:var(--off);border-radius:var(--kader-xs);padding:2px 6px;align-self:flex-start;}
.ck-post{position:relative;background:var(--off);border-left:3px solid var(--k,var(--royal));border-radius:0 8px 0 8px;padding:7px 8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;font-size:11.5px;line-height:1.35;min-width:0;}
.ck-post:hover{background:var(--royal-wash);}
.ck-post:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.ck-post.ck-sleept{opacity:.4;}
.ck-post.ck-oud{border-left-style:dashed;}
.ck-post b{font-size:12px;font-weight:700;color:var(--charcoal);overflow-wrap:anywhere;}
.ck-ster{color:var(--royal);margin-right:3px;}
.ck-rij{display:flex;gap:3px;flex-wrap:wrap;align-items:center;}
.ck-pf{font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:4px;background:var(--white);color:var(--royal);border:1px solid var(--border);}
.ck-fase{font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:4px;}
.ck-f-idee{background:#EFECE7;color:var(--muted);} .ck-f-brief{background:var(--blue-light);color:var(--royal);} .ck-f-prod{background:var(--warning-bg);color:var(--warning);}
.ck-f-rev{background:var(--danger-bg);color:var(--danger);} .ck-f-klaar{background:var(--royal);color:#fff;} .ck-f-live{background:var(--success-bg);color:var(--success);}
.ck-tijd{font-size:10px;font-weight:700;color:var(--muted);margin-left:auto;}
.ck-klant{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ck-wacht{font-size:10px;font-weight:800;color:var(--warning);}
.ck-wacht-r{color:var(--danger);}
.ck-stats{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--muted);}
.ck-stats b{color:var(--royal);}
.ck-plus{font:inherit;margin-top:auto;font-size:11px;font-weight:700;color:var(--muted);background:none;border:1.5px dashed var(--border);border-radius:var(--kader-xs);padding:5px;cursor:pointer;opacity:.0;transition:opacity .12s;}
.ck-dag:hover .ck-plus,.ck-plus:focus-visible{opacity:1;}
.ck-plus:hover{color:var(--royal);border-color:var(--royal);}
.ck-niets{font-size:11px;color:var(--muted);margin-top:4px;}
@media(hover:none){.ck-plus{opacity:1;}}
/* maand */
.ck-maand{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);overflow:hidden;}
.ck-maand-kop{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--royal);}
.ck-maand-kop span{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-align:center;padding:8px 0;}
.ck-maand-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.ck-cel{position:relative;min-height:104px;border-top:1px solid var(--bone-lijn);border-left:1px solid var(--bone-lijn);padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.ck-cel:nth-child(7n+1){border-left:none;}
.ck-cel.ck-buiten{background:var(--off);}
.ck-cel.ck-buiten .ck-cel-kop span{color:var(--muted);opacity:.6;}
.ck-cel.ck-nu .ck-cel-kop span{background:var(--royal);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;}
.ck-cel-kop{display:flex;align-items:center;gap:6px;min-width:0;}
.ck-cel-kop span{font-size:11.5px;font-weight:800;}
.ck-cel-kop em{font-style:normal;font-size:9.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ck-mini{font:inherit;text-align:left;display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--charcoal);background:var(--off);border:none;border-radius:4px;padding:3px 5px;cursor:pointer;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ck-mini i{width:7px;height:7px;border-radius:50%;background:var(--k);flex-shrink:0;}
.ck-mini small{font-size:9.5px;color:var(--muted);font-weight:700;}
.ck-mini.ck-f-klaar{background:var(--royal-wash);color:var(--charcoal);}
.ck-mini.ck-f-live{background:var(--success-bg);color:var(--charcoal);}
.ck-mini.ck-f-rev{background:var(--danger-bg);color:var(--charcoal);}
.ck-mini.ck-f-prod{background:var(--warning-bg);color:var(--charcoal);}
.ck-meer{font:inherit;font-size:10.5px;font-weight:800;color:var(--royal);background:none;border:none;padding:0 5px;cursor:pointer;text-align:left;}
.ck-cel-plus{position:absolute;top:4px;right:4px;width:22px;height:22px;border:none;border-radius:var(--kader-xs);background:var(--royal-wash);color:var(--royal);font-weight:800;cursor:pointer;opacity:0;}
.ck-cel:hover .ck-cel-plus,.ck-cel-plus:focus-visible{opacity:1;}
@media(hover:none){.ck-cel-plus{display:none;}}
.ck-legenda{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);}
.ck-legenda span{display:inline-flex;align-items:center;gap:5px;}
.ck-legenda i{display:inline-block;width:12px;height:8px;border-radius:2px;background:var(--off);border:1px solid var(--border);}
.ck-legenda i[class]{border:none;}
/* bord */
.ck-bord-wrap{overflow-x:auto;padding-bottom:4px;}
.ck-bord{display:grid;grid-template-columns:repeat(6,minmax(170px,1fr));gap:8px;}
.ck-kolom{background:var(--off);border:1px solid transparent;border-radius:var(--kader-sm);padding:8px;display:flex;flex-direction:column;gap:6px;min-height:200px;}
.ck-kolom h4{margin:0 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;}
.ck-kolom .ck-post{background:var(--white);}
/* ritme */
.ck-blok{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:14px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;}
.ck-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.ck-ritme-rij{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,150px);gap:14px;align-items:center;padding:8px 0;border-top:1px solid var(--bone-lijn);}
.ck-ritme-rij:first-child{border-top:none;}
.ck-ritme-naam{display:flex;flex-direction:column;min-width:0;}
.ck-ritme-naam b{font-size:13px;}
.ck-ritme-pf{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted);}
.ck-ritme-baan{display:flex;gap:3px;}
.ck-ritme-baan i{flex:1;height:14px;border-radius:2px;background:var(--off);border:1px solid var(--border);}
.ck-r-l{background:var(--success)!important;border-color:var(--success)!important;}
.ck-r-g{background:var(--royal)!important;border-color:var(--royal)!important;}
.ck-r-m{background:#C98A2E!important;border-color:#C98A2E!important;}
.ck-ritme-stand{display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.ck-ritme-stand b{font-size:14px;color:var(--royal);font-variant-numeric:tabular-nums;}
.ck-ritme-stand small{font-size:11px;color:var(--muted);}
.ck-rood{color:var(--danger)!important;}
.ck-leeg,.ck-klein,.ck-uitleg{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55;}
.ck-link{font:inherit;font-weight:700;color:var(--royal);background:none;border:none;padding:0;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:2px;}
.ck-top{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;}
.ck-top li{font-size:12.5px;}
.ck-top li b{float:right;margin-left:10px;}
.ck-top li small{display:block;color:var(--muted);font-size:11px;}
.ck-top li b{color:var(--royal);font-variant-numeric:tabular-nums;}
.ck-werkt{display:flex;flex-direction:column;gap:3px;padding:6px 0;border-top:1px solid var(--bone-lijn);font-size:12.5px;}
.ck-werkt:first-of-type{border-top:none;}
.ck-werkt span em{font-style:normal;color:var(--muted);font-size:11px;}
.ck-werkt-top{font-weight:800;color:var(--royal);}
/* venster */
.ck-v{max-width:640px;}
.ck-v-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
.ck-v-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
#ck-venster .ws-v-veld textarea{font:inherit;font-size:13px;font-weight:500;color:var(--charcoal);padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);resize:vertical;width:100%;}
.ck-v-pf{border:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.ck-v-pf legend{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px;padding:0;}
.ck-chip{position:relative;}
.ck-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
.ck-chip span{display:inline-block;padding:6px 11px;border:1.5px solid var(--border);border-radius:var(--kader-xs);font-size:12px;font-weight:700;background:var(--white);color:var(--charcoal);}
.ck-chip input:checked + span{border-color:var(--royal);background:var(--royal);color:#fff;}
.ck-chip input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px;}
.ck-v-res{background:var(--off);border-radius:var(--kader-sm);padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
.ck-v-res-kop{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.ck-v-res-kop em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;}
.ck-weg{margin-right:auto;color:var(--danger)!important;}
.ck-dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;margin:0;font-size:13px;}
.ck-dl dt{color:var(--muted);font-weight:700;font-size:12px;}
.ck-dl dd{margin:0;}
.ck-tabel-wrap{overflow-x:auto;}
.ck-tabel{width:100%;border-collapse:collapse;font-size:12.5px;}
.ck-tabel th{background:var(--royal);color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:7px 10px;text-align:left;}
.ck-tabel td{padding:7px 10px;border-top:1px solid var(--bone-lijn);}
.ck-tabel tbody tr:nth-child(even) td{background:var(--off);}
.ck-r{text-align:right!important;}
.ck-grijs{color:var(--muted);}
.ck-mail{max-width:980px;}
.ck-mail-lijf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.ck-mail-links{display:flex;flex-direction:column;gap:10px;}
.ck-mail-rechts{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ck-mail-rechts iframe{width:100%;height:420px;border:1px solid var(--border);border-radius:var(--kader-sm);background:#fff;}
/* klantpagina en portaal */
.ck-klant-acties{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.ck-portaal .ck-dag{min-height:120px;}
.ck-wachtblok{background:var(--white);border:1.5px solid var(--royal);border-radius:var(--kader);padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.ck-wacht-kaart{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--bone-lijn);}
.ck-wacht-kaart:first-of-type{border-top:none;}
.ck-wacht-kaart > div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ck-wacht-kaart small{color:var(--muted);font-size:12px;}
.ck-wacht-acties{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;}
.ck-opm{min-width:min(100%,320px);}
.ck-portaal-link{display:inline-block;margin-top:10px;text-decoration:none;}
/* beheer */
.ck-weergaven{display:flex;flex-direction:column;gap:18px;}
.ck-schakel{display:flex;gap:12px;align-items:flex-start;cursor:pointer;position:relative;}
.ck-schakel input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer;}
.ck-schakel-baan{width:44px;height:24px;border-radius:12px;background:var(--border);position:relative;flex-shrink:0;transition:background .15s;}
.ck-schakel-baan::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.ck-schakel input:checked + .ck-schakel-baan{background:var(--royal);}
.ck-schakel input:checked + .ck-schakel-baan::after{left:23px;}
.ck-schakel input:focus-visible + .ck-schakel-baan{outline:2px solid var(--blue);outline-offset:2px;}
.ck-schakel b{display:block;font-size:13.5px;}
.ck-schakel small{display:block;font-size:12px;color:var(--muted);line-height:1.5;max-width:60ch;}
.ck-ritme-inf{display:flex;flex-direction:column;gap:8px;align-items:flex-start;border-top:1px solid var(--bone-lijn);padding-top:14px;}
.ck-ritme-inf small{font-size:12px;color:var(--muted);}
.ck-ritme-inf .ck-v-drie{grid-template-columns:repeat(4,minmax(0,110px));}
.cf-ritme-voorstel{font-size:12px;color:var(--royal);background:var(--royal-wash);border-radius:var(--kader-xs);padding:6px 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
@media(max-width:1100px){.ck-dag{min-height:180px;}.ck-post{font-size:11px;}}
@media(max-width:900px){
  .ck-week{grid-template-columns:1fr;}
  .ck-dag{min-height:0;flex-direction:column;}
  .ck-twee,.ck-mail-lijf{grid-template-columns:1fr;}
  .ck-ritme-rij{grid-template-columns:minmax(0,1fr) auto;}
  .ck-ritme-baan{grid-column:1/-1;grid-row:2;}
}
@media(max-width:560px){
  .ck-filters{width:100%;}
  .ck-filters select{flex:1 1 140px;max-width:none;}
  .ck-cel{min-height:64px;padding:4px;}
  .ck-mini{font-size:0;padding:3px;justify-content:center;}
  .ck-mini i{width:8px;height:8px;}
  .ck-mini small{display:none;}
  .ck-cel-kop em{display:none;}
  .ck-v-twee,.ck-v-drie{grid-template-columns:1fr;}
  .ck-ritme-inf .ck-v-drie{grid-template-columns:1fr 1fr;}
  .ck-dl{grid-template-columns:1fr;}
}

/* ═══ BEHEER ALS INSTELLINGENSCHERM (3.73.0) ═══ */
.bh-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start;}
.bh-nav{position:sticky;top:12px;background:var(--royal);border-radius:var(--kader);padding:14px 10px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 40px);overflow:auto;}
.bh-zoek input{width:100%;font:inherit;font-size:12.5px;color:#fff;background:rgba(255,255,255,.12);border:1.5px solid transparent;border-radius:var(--kader-xs);padding:7px 10px;margin-bottom:6px;}
.bh-zoek input::placeholder{color:rgba(255,255,255,.7);}
.bh-zoek input:focus{outline:none;border-color:var(--yellow);}
.bh-nav-groep{margin:12px 10px 4px;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);}
.bh-nav-item{font:inherit;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;background:none;border:none;color:#fff;font-size:13px;font-weight:600;padding:7px 10px;border-radius:var(--kader-xs);cursor:pointer;}
.bh-nav-item:hover{background:rgba(255,255,255,.1);}
.bh-nav-item.aan{background:rgba(255,255,255,.18);font-weight:800;}
.bh-nav-item:focus-visible{outline:2px solid var(--yellow);outline-offset:1px;}
.bh-nav-item em{font-style:normal;font-size:10.5px;font-weight:800;background:var(--yellow);color:var(--royal);border-radius:9px;padding:1px 7px;}
.bh-nav-leeg{color:rgba(255,255,255,.75);font-size:12px;margin:6px 10px;}
#bh-paneel{min-width:0;}
#bh-paneel .bh-kop{margin-top:0;}
.bh-gz{padding:20px 22px;display:flex;flex-direction:column;gap:14px;}
.bh-gz-kop{display:flex;align-items:center;gap:16px;}
.bh-ring{--p:0;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--royal) calc(var(--p)*1%),var(--off) 0);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bh-ring span{width:64px;height:64px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:var(--royal);}
.bh-gz-titel{margin:0;font-size:17px;font-weight:900;font-style:italic;color:var(--royal);}
.bh-gz-sub{margin:2px 0 0;font-size:12.5px;color:var(--muted);}
.bh-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.bh-check li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--bone-lijn);}
.bh-check li:first-child{border-top:none;}
.bh-check li > div{display:flex;flex-direction:column;gap:1px;min-width:0;}
.bh-check b{font-size:13.5px;}
.bh-check small{font-size:12px;color:var(--muted);line-height:1.45;}
.bh-check-ico{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;}
.bh-check-ico svg{width:13px;height:13px;}
.bh-check-ok .bh-check-ico{background:var(--success-bg);color:var(--success);}
.bh-check-let .bh-check-ico{background:var(--warning-bg);color:var(--warning);}
.bh-check-knop{font-size:12px!important;padding:6px 12px!important;white-space:nowrap;}
.bh-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;margin-bottom:16px;}
.bh-persoon{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.bh-persoon-kop{display:flex;align-items:center;gap:12px;}
.bh-persoon-kop > div{display:flex;flex-direction:column;min-width:0;}
.bh-persoon-kop b{font-size:14.5px;}
.bh-persoon-kop small{font-size:12px;color:var(--muted);}
.bh-persoon-av,.bh-persoon-foto{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
.bh-persoon-foto{object-fit:cover;border:2px solid;}
.bh-persoon-gegevens{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0;}
.bh-persoon-gegevens dt{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.bh-persoon-gegevens dd{margin:2px 0 0;font-size:12.5px;font-weight:600;min-width:0;overflow-wrap:anywhere;}
.bh-persoon-gegevens dd small{display:block;font-size:10.5px;color:var(--muted);font-weight:500;}
.bh-persoon-gegevens select{font:inherit;font-size:12.5px;font-weight:700;padding:4px 6px;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);color:var(--charcoal);max-width:100%;}
.bh-persoon-gegevens code{font-size:12px;background:var(--off);padding:2px 6px;border-radius:var(--kader-xs);}
.bh-breed{grid-column:1/-1;}
.bh-persoon-knoppen{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;}
.bh-grijs{color:var(--muted);font-weight:500;}
.bh-oranje{color:var(--warning);font-weight:700;}
.bh-wzw .rol-uitleg,.bh-wzw .rol-lijst,.bh-wzw .rol-slot{display:none;}
.bh-melding{margin:0 0 12px;font-size:12.5px;background:var(--warning-bg);color:var(--warning);border-radius:var(--kader-xs);padding:8px 12px;}
.bh-tabelkaart{padding:0;overflow:hidden;}
.bh-tabelwrap{overflow-x:auto;}
.bh-tabel{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px;}
.bh-tabel th{background:var(--royal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:9px 12px;}
.bh-tabel td{padding:9px 12px;border-top:1px solid var(--bone-lijn);vertical-align:top;}
.bh-tabel tbody tr:nth-child(even) td{background:var(--off);}
.bh-tabel th:first-child,.bh-tabel td:first-child{padding-left:18px;}
.bh-tabel code{font-size:11px;background:var(--white);border:1px solid var(--border);padding:1px 5px;border-radius:4px;margin-left:4px;}
.bh-voet{font-size:11.5px;color:var(--muted);margin:10px 0 0;}
.bh-backup{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.bh-backup-stand{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--kader-sm);background:var(--success-bg);color:var(--success);}
.bh-backup-stand span{font-size:12.5px;}
.bh-backup-let{background:var(--warning-bg);color:var(--warning);}
.bh-uitleg{margin:0;font-size:13px;color:var(--muted);line-height:1.6;max-width:68ch;}
@media(max-width:900px){
  .bh-layout{grid-template-columns:1fr;gap:12px;}
  .bh-nav{position:static;max-height:none;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:8px;gap:4px;}
  .bh-zoek{display:none;}
  #bh-nav-lijst{display:flex;gap:4px;}
  .bh-nav-groep{display:none;}
  .bh-nav-item{width:auto;white-space:nowrap;flex:0 0 auto;}
}
@media(max-width:560px){
  .bh-check li{grid-template-columns:24px minmax(0,1fr);}
  .bh-check-knop{grid-column:2;justify-self:start;}
  .bh-gz-kop{align-items:flex-start;}
  .bh-ring{width:64px;height:64px;} .bh-ring span{width:48px;height:48px;font-size:14px;}
}

/* ═══ KLANTEN (3.73.0) ═══ */
.kb{display:flex;flex-direction:column;gap:16px;min-width:0;}
.kb-zoekbalk{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.kb-zoek input{font:inherit;font-size:13px;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);color:var(--charcoal);width:min(100%,320px);}
.kb-zoek{flex:1 1 220px;}
.kb-tel{font-size:12px;color:var(--muted);font-weight:700;}
.kb-banen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;}
.kb-baan{background:var(--off);border-radius:var(--kader);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:inset 0 3px 0 var(--bk,var(--border));}
.kb-baan-wij{--bk:var(--danger);} .kb-baan-klant{--bk:var(--warning);} .kb-baan-loopt{--bk:var(--success);}
.kb-baan-kop{margin:2px 4px 2px;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.kb-baan-wij .kb-baan-kop{color:var(--danger);} .kb-baan-klant .kb-baan-kop{color:var(--warning);} .kb-baan-loopt .kb-baan-kop{color:var(--success);}
.kb-baan-kop b{font-size:12px;}
.kb-baan-leeg{margin:4px;font-size:12px;color:var(--muted);}
.kb-kaart{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:12px 14px;display:flex;flex-direction:column;gap:10px;cursor:pointer;min-width:0;transition:border-color .15s;}
.kb-kaart:hover{border-color:var(--royal);}
.kb-kaart:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.kb-kaart-kop{display:flex;align-items:center;gap:10px;min-width:0;}
.kb-kaart-naam{flex:1;min-width:0;display:flex;flex-direction:column;}
.kb-kaart-naam b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kb-kaart-naam small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kb-logo{width:38px;height:38px;border-radius:var(--kader-xs);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.kb-logo-img{object-fit:contain;background:#fff;border:1px solid var(--border);padding:2px;}
.kb-logo-k{width:28px;height:28px;font-size:10px;}
.kb-logo[hidden]{display:none;}
.kb-speelt{margin:0;font-size:12px;font-weight:700;border-radius:var(--kader-xs);padding:5px 8px;}
.kb-speelt em{font-style:normal;font-weight:800;opacity:.75;}
.kb-speelt-wij{background:var(--danger-bg);color:var(--danger);}
.kb-speelt-klant{background:var(--warning-bg);color:var(--warning);}
.kb-ringen{display:flex;gap:12px;}
.kb-ring{--p:0;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;}
.kb-ring::before{content:'';width:36px;height:36px;border-radius:50%;background:conic-gradient(var(--rk) calc(var(--p)*1%),var(--off) 0);}
.kb-ring i{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:9.5px;font-weight:800;color:var(--charcoal);}
.kb-ring small{font-size:9.5px;font-weight:700;color:var(--muted);}
.kb-ring-rood{--rk:var(--danger);} .kb-ring-royal{--rk:var(--royal);} .kb-ring-groen{--rk:var(--success);} .kb-ring-leeg{--rk:var(--off);}
.kb-ring-leeg i{color:var(--muted);}
.kb-labels{display:flex;gap:5px;flex-wrap:wrap;}
.kb-labels button{font:inherit;font-size:11px;font-weight:700;background:var(--off);border:none;border-radius:var(--kader-xs);padding:3px 8px;cursor:pointer;color:var(--charcoal);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kb-labels button:hover{background:var(--royal-wash);color:var(--royal);}
.kb-labels button span{color:var(--muted);font-weight:600;}
.kb-labels-meer{font-size:11px;color:var(--muted);font-weight:700;align-self:center;}
.kb-kaart-compact{flex-direction:row;align-items:center;gap:10px;padding:8px 10px;}
.kb-kaart-compact > b{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kb-kaart-compact .kb-ringen{gap:6px;}
.kb-kaart-compact .kb-ring::before{width:26px;height:26px;}
.kb-kaart-compact .kb-ring i{top:4px;width:18px;height:18px;font-size:7.5px;}
.kb-kaart-compact .kb-ring small{display:none;}
.kb-menu{position:relative;}
.kb-menu summary{list-style:none;cursor:pointer;width:28px;height:28px;border-radius:var(--kader-xs);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--muted);}
.kb-menu summary::-webkit-details-marker{display:none;}
.kb-menu summary:hover,.kb-menu[open] summary{background:var(--off);color:var(--royal);}
.kb-menu > div{position:absolute;right:0;top:30px;z-index:20;background:var(--white);border:1px solid var(--border);border-radius:var(--kader-sm);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px;display:flex;flex-direction:column;min-width:170px;}
.kb-menu > div button{font:inherit;font-size:12.5px;font-weight:600;text-align:left;background:none;border:none;padding:7px 10px;border-radius:var(--kader-xs);cursor:pointer;color:var(--charcoal);}
.kb-menu > div button:hover{background:var(--royal-wash);}
.kb-menu-weg{color:var(--danger)!important;}
/* projecten */
.kb-projecten{display:flex;flex-direction:column;gap:10px;}
.kb-proj-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.kb-h{margin:0;font-size:18px;font-weight:900;font-style:italic;color:var(--royal);}
.kb-proj-knoppen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.kb-wissel{display:inline-flex;background:var(--off);border-radius:var(--kader-sm);padding:3px;gap:2px;}
.kb-wissel button{font:inherit;font-size:11.5px;font-weight:700;border:none;background:none;color:var(--muted);padding:6px 12px;border-radius:var(--kader-xs);cursor:pointer;}
.kb-wissel button.aan{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.kb-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.kb-chips{display:flex;gap:5px;flex-wrap:wrap;}
.kb-chip{font:inherit;font-size:12px;font-weight:700;padding:5px 10px;border:1.5px solid var(--border);border-radius:var(--kader-xs);background:var(--white);color:var(--charcoal);cursor:pointer;}
.kb-chip b{color:var(--royal);margin-left:3px;}
.kb-chip.aan{background:var(--royal);border-color:var(--royal);color:#fff;}
.kb-chip.aan b{color:var(--yellow);}
.kb-filters select{font:inherit;font-size:12px;font-weight:600;padding:6px 10px;border:1.5px solid var(--border);border-radius:var(--kader-sm);background:var(--white);color:var(--charcoal);}
.kb-tabelwrap{overflow-x:auto;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);}
.kb-tabel{width:100%;border-collapse:collapse;font-size:12.5px;min-width:860px;}
.kb-tabel th{background:var(--royal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:10px 12px;white-space:nowrap;}
.kb-tabel td{padding:10px 12px;border-top:1px solid var(--bone-lijn);vertical-align:middle;}
.kb-tabel tbody tr:nth-child(even) td{background:var(--off);}
.kb-tabel th:first-child,.kb-tabel td:first-child{padding-left:18px;}
.kb-tabel td small{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.kb-naam{font:inherit;font-weight:800;font-size:13px;background:none;border:none;padding:0;cursor:pointer;color:var(--charcoal);text-align:left;}
.kb-naam:hover{color:var(--royal);text-decoration:underline;text-underline-offset:3px;}
.kb-fasen{display:flex;gap:3px;}
.kb-fasen i{width:14px;height:5px;border-radius:2px;background:var(--border);}
.kb-fasen i.af{background:var(--success);} .kb-fasen i.nu{background:var(--royal);}
.kb-uren{font-weight:700;white-space:nowrap;}
.kb-balk{display:block;height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:4px;max-width:110px;}
.kb-balk i{display:block;height:100%;background:var(--royal);}
.kb-balk i.kb-balk-rood{background:var(--danger);}
.kb-geld{font-weight:700;}
.kb-groen{color:var(--success);} .kb-oranje{color:var(--warning);} .kb-rood{color:var(--danger)!important;} .kb-royal{color:var(--royal);} .kb-grijs{color:var(--muted);}
.kb-stip{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;}
.kb-stip-rood{background:var(--danger);} .kb-stip-oranje{background:var(--warning);} .kb-stip-groen{background:var(--success);}
.kb-acties{text-align:right;white-space:nowrap;}
.kb-leeg{padding:1.5rem;text-align:center;color:var(--muted);font-size:13px;background:var(--white);border:1px solid var(--border);border-radius:var(--kader);}
.kb-oud{background:var(--white);border:1px solid var(--border);border-radius:var(--kader);padding:12px 16px;}
.kb-oud summary{cursor:pointer;font-size:13px;font-weight:800;color:var(--muted);}
.kb-oud summary span{background:var(--off);border-radius:8px;padding:1px 7px;margin-left:4px;font-size:11px;}
.kb-oud-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;margin-top:10px;}
.kb-oud-kaart{font:inherit;display:flex;align-items:center;gap:10px;background:var(--off);border:none;border-radius:var(--kader-sm);padding:8px 10px;cursor:pointer;text-align:left;color:var(--charcoal);}
.kb-oud-kaart span{display:flex;flex-direction:column;min-width:0;}
.kb-oud-kaart small{font-size:11px;color:var(--muted);}
@media(max-width:1100px){.kb-banen{grid-template-columns:1fr 1fr;}.kb-baan-loopt{grid-column:1/-1;}}
@media(max-width:700px){.kb-banen{grid-template-columns:1fr;}}

/* 3.73.1 klantkaart: logo, naam, drie rondjes */
.kb-grid{margin-bottom:28px;}
.kb-leeg{color:var(--muted);font-size:13px;}
.kb-blok{cursor:pointer;gap:16px;}
.kb-blok:focus-visible{outline:2px solid var(--royal);outline-offset:2px;}
.kb-blok-kop{display:flex;align-items:center;gap:12px;min-width:0;}
.kb-blok-kop .kb-logo{width:44px;height:44px;}
.kb-blok-naam{flex:1;min-width:0;font-size:15px;font-weight:800;line-height:1.25;color:var(--charcoal);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.kb-blok .kb-ringen{justify-content:space-around;gap:8px;}
.kb-blok .kb-ring::before{width:52px;height:52px;}
.kb-blok .kb-ring i{top:7px;width:38px;height:38px;font-size:11px;}
.kb-blok .kb-ring small{font-size:10.5px;}

/* 3.77.0 draaiboek */
.dgw-pdf{gap:6px;}
.dgk-acties{margin-top:16px;display:flex;justify-content:flex-end;}
.dgk-pdf{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;background:var(--royal);color:var(--yellow);border:0;border-radius:var(--kader-sm);font:inherit;font-size:13px;font-weight:800;cursor:pointer;}
.dgk-pdf:hover{background:#0d2c78;}
.dgk-pdf:focus-visible{outline:2px solid var(--royal);outline-offset:3px;}
@media (max-width:600px){.dgk-acties{justify-content:stretch;}.dgk-pdf{width:100%;justify-content:center;}}

/* ════════════════════════════════════════════════════════════
   KLANTPORTAAL ALS STUDIO (3.78.0)
   Drie kolommen: de plekken, wat er speelt, het gesprek. Witte vlakken
   zonder rand op Bone; geel alleen op Deep Royal.
   ════════════════════════════════════════════════════════════ */
#s-portal.pst.screen.active{display:grid;grid-template-columns:248px minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr);background:var(--off);}
#s-portal.pst.pst-zonder-chat.screen.active{grid-template-columns:248px minmax(0,1fr);}
#s-portal.pst > .lint,#s-portal.pst #portal-mob-btn,#s-portal.pst #portal-mob-logout{display:none!important;}
body[data-screen="s-portal"] #p-bottom-nav{display:none!important;}

/* ── Links: de plekken ── */
.pst-nav{grid-column:1;grid-row:1;background:var(--white);border-right:1px solid var(--bone-vlak);display:flex;flex-direction:column;min-height:0;padding:22px 14px 16px;gap:6px;overflow-y:auto;}
.pst-klant{display:flex;align-items:center;gap:14px;padding:0 6px 18px;margin-bottom:8px;border-bottom:1px solid var(--bone-vlak);min-width:0;}
.pst-logo{width:68px;height:68px;flex-shrink:0;border-radius:var(--kader-sm);background:var(--white);border:1px solid var(--bone-vlak);display:flex!important;align-items:center;justify-content:center;overflow:hidden;padding:3px!important;border-left:1px solid var(--bone-vlak)!important;}
.pst-logo img{max-width:100%!important;max-height:100%!important;height:auto!important;object-fit:contain;}
.pst-logo span{font-size:15px!important;font-weight:900!important;color:var(--royal);text-align:center;line-height:1.1;overflow:hidden;}
.pst-klant-tekst{display:flex;flex-direction:column;min-width:0;}
.pst-klant-tekst b{font-size:14px;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pst-klant-tekst small{font-size:11.5px;color:var(--muted);}
#s-portal.pst .ptabs{display:flex;flex-direction:column;gap:3px;height:auto;}
#s-portal.pst .ptab{height:auto;display:flex;align-items:center;gap:12px;padding:11px 12px;border:0;border-radius:var(--kader-sm);background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;text-align:left;position:relative;transition:background .15s,color .15s;}
#s-portal.pst .ptab svg{width:19px;height:19px;flex-shrink:0;}
#s-portal.pst .ptab:hover{background:var(--off);color:var(--black);}
#s-portal.pst .ptab.active{background:var(--royal);color:#fff;}
#s-portal.pst .ptab.active::before{content:'';position:absolute;left:6px;top:10px;bottom:10px;width:3px;background:var(--yellow);border-radius:0 2px 0 2px;}
#s-portal.pst .ptab:focus-visible{outline:2px solid var(--royal);outline-offset:2px;}
#s-portal.pst .ptab.pst-extra{margin-top:2px;}
.pst-tel{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--royal);color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
#s-portal.pst .ptab.active .pst-tel{background:var(--yellow);color:var(--royal);}
.pst-nav-voet{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 8px 0;border-top:1px solid var(--bone-vlak);}
.pst-nav-voet img{height:18px;width:auto;}
#s-portal.pst .p-out{padding:6px 8px;font-size:12px;}
.pst-top{display:none;}

/* ── Midden: wat er speelt ── */
#s-portal.pst .portal-body{grid-column:2;grid-row:1;background:var(--off);padding:36px clamp(20px,3.2vw,48px) 64px;min-height:0;overflow-y:auto;}
#s-portal.pst .ptab-page,#s-portal.pst .ptab-page:not(#pp-planning){max-width:1040px;margin-left:auto;margin-right:auto;width:100%;gap:22px;}
#s-portal.pst .card{border:0;border-radius:var(--kader);box-shadow:0 1px 2px rgba(16,53,144,.04),0 10px 30px -18px rgba(16,53,144,.22);}
#s-portal.pst .card-title{font-size:16px;font-weight:900;font-style:italic;letter-spacing:-.015em;}
.pst-kop.ps-hero{background:none;color:var(--black);padding:0;border-radius:0;display:block;overflow:visible;}
.pst-kop.ps-hero::after{display:none;}
.pst-kop .ps-datum{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
#s-portal.pst .pst-kop h2{font-size:clamp(30px,3.4vw,42px);font-weight:900;font-style:italic;letter-spacing:-.025em;line-height:1.05;color:var(--royal);margin-top:8px;}
#s-portal.pst .pst-kop p{font-size:15px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:640px;}
.pst-paginakop{display:flex;flex-direction:column;gap:6px;}
.pst-paginakop h2{font-size:clamp(26px,3vw,36px);font-weight:900;font-style:italic;letter-spacing:-.025em;line-height:1.05;color:var(--royal);}
.pst-paginakop p{font-size:14.5px;color:var(--muted);max-width:640px;}
.pst-sectie{display:flex;flex-direction:column;gap:14px;}
.pst-sectie[hidden]{display:none;}
.pst-sectiekop{font-size:19px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.02em;}
.pst-sectie-uitleg{font-size:13px;color:var(--muted);margin-top:-8px;}
.pst-stil{font-size:13.5px;color:var(--muted);line-height:1.6;}
.pst-link{background:none;border:0;padding:4px 0;font:inherit;font-size:13px;font-weight:700;color:var(--royal);cursor:pointer;}
.pst-link:hover{text-decoration:underline;}

/* Aan jou */
.pst-aanjou{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px;}
.pst-aj{background:var(--royal);color:#fff;border-radius:var(--kader);padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.pst-aj small{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);}
.pst-aj b{font-size:16px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;}
.pst-aj span{font-size:13px;color:rgba(255,255,255,.78);line-height:1.45;}
.pst-aj button{align-self:flex-start;margin-top:8px;background:var(--yellow);color:var(--royal);border:0;border-radius:var(--kader-sm);padding:9px 18px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;}
.pst-aj button:hover{filter:brightness(.96);}
.pst-aj button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.pst-aj-meer{margin-top:-8px;}
.pst-aj-meer summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--royal);padding:4px 0 10px;}

/* Projecten met fases */
.pst-blok{display:flex;flex-direction:column;gap:12px;}
.pst-blok-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.pst-blok-kop h3{font-size:19px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.02em;}
.pst-proj-lijst,#s-portal.pst .proj-grid{display:flex;flex-direction:column;gap:12px;}
.pst-proj{display:flex;flex-direction:column;gap:14px;width:100%;text-align:left;background:var(--white);border:0;border-radius:var(--kader);padding:20px 22px;cursor:pointer;font:inherit;color:inherit;box-shadow:0 1px 2px rgba(16,53,144,.04),0 10px 30px -18px rgba(16,53,144,.22);transition:box-shadow .2s,transform .2s;}
.pst-proj:hover{box-shadow:0 1px 2px rgba(16,53,144,.06),0 16px 36px -18px rgba(16,53,144,.32);transform:translateY(-1px);}
.pst-proj:focus-visible{outline:2px solid var(--royal);outline-offset:3px;}
.pst-proj-aanjou{box-shadow:inset 3px 0 0 var(--royal),0 10px 30px -18px rgba(16,53,144,.22);}
.pst-proj-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
.pst-proj-kop b{font-size:17px;font-weight:900;font-style:italic;color:var(--royal);letter-spacing:-.015em;}
.pst-proj-kop span{font-size:12.5px;color:var(--muted);font-weight:600;}
.pst-proj-zin{font-size:13.5px;color:var(--black);}
.pst-fases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative;}
.pst-fases li{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;font-size:11px;font-weight:600;color:var(--muted);text-align:center;min-width:0;}
.pst-fases li::before{content:'';position:absolute;top:7px;right:50%;width:100%;height:2px;background:var(--border);z-index:0;}
.pst-fases li:first-child::before{display:none;}
.pst-fases li.af::before,.pst-fases li.nu::before{background:var(--royal);}
.pst-fases i{width:16px;height:16px;border-radius:50%;background:var(--white);border:2px solid var(--border);position:relative;z-index:1;}
.pst-fases li.af i{background:var(--royal);border-color:var(--royal);}
.pst-fases li.nu i{background:var(--yellow);border-color:var(--royal);box-shadow:0 0 0 5px rgba(16,53,144,.12);}
.pst-fases li.af,.pst-fases li.nu{color:var(--royal);}
.pst-fases li.nu{font-weight:800;}
.pst-fases span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}

/* Nieuwste werk en deze week */
.pst-rij{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start;}
.pst-week-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.pst-week-lijst li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--bone-vlak);}
.pst-week-lijst li:last-child{border-bottom:0;}
.pst-wk-d{display:flex;flex-direction:column;align-items:center;line-height:1.05;}
.pst-wk-d small{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.pst-wk-d b{font-size:20px;font-weight:900;color:var(--royal);}
.pst-wk-t{display:flex;flex-direction:column;min-width:0;}
.pst-wk-t b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pst-wk-t small{font-size:12px;color:var(--muted);}
.pst-updates[hidden],#s-portal.pst .ps-nieuwste[hidden]{display:none;}
.pst-rij.pst-rij-een{grid-template-columns:1fr;}

/* ── Rechts: het gesprek ── */
.pst-chat{display:none;}
#s-portal.pst .pst-chat{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-height:0;background:var(--white);border-left:1px solid var(--bone-vlak);}
#s-portal.pst.pst-zonder-chat .pst-chat,#s-portal.pst.pst-zonder-chat .pst-chat-knop{display:none!important;}
.pst-chat-kop{display:flex;align-items:flex-start;gap:6px;padding:18px 18px 14px;border-bottom:1px solid var(--bone-vlak);flex-shrink:0;}
.pst-chat-terug{display:none;width:36px;height:36px;margin-top:2px;border:0;background:none;border-radius:var(--kader-xs);color:var(--royal);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;}
.pst-chat-terug:hover{background:var(--off);}
.pst-team{flex:1;min-width:0;}
.pst-team summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer;border-radius:var(--kader-sm);padding:4px;}
.pst-team summary::-webkit-details-marker{display:none;}
.pst-team summary:focus-visible{outline:2px solid var(--royal);outline-offset:2px;}
.pst-team-av{display:flex;flex-shrink:0;}
.pst-av{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:var(--blue-light);color:var(--royal);border:2px solid var(--white);overflow:hidden;flex-shrink:0;}
.pst-av img{width:100%;height:100%;object-fit:cover;display:block;}
.pst-team-av .pst-av + .pst-av{margin-left:-12px;}
.pst-team-tekst{display:flex;flex-direction:column;min-width:0;flex:1;}
.pst-team-tekst b{font-size:15px;font-weight:800;}
.pst-team-tekst small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pst-team-pijl{color:var(--muted);transition:transform .2s;flex-shrink:0;}
.pst-team[open] .pst-team-pijl{transform:rotate(180deg);}
.pst-team-lijst{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;}
.pst-team-lijst li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:var(--kader-sm);}
.pst-team-lijst li:hover{background:var(--off);}
.pst-av-groot{width:36px;height:36px;}
.pst-team-lijst li > span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1;}
.pst-team-lijst b{font-size:13px;}
.pst-team-lijst small{font-size:11.5px;color:var(--muted);}
.pst-team-knoppen{display:flex;gap:4px;}
.pst-team-knoppen a{width:32px;height:32px;border-radius:var(--kader-xs);display:flex;align-items:center;justify-content:center;color:var(--royal);border:1px solid var(--border);}
.pst-team-knoppen a:hover{background:var(--royal);color:#fff;border-color:var(--royal);}
.pst-team-knoppen svg{width:15px;height:15px;}
#s-portal.pst .chat-msgs{flex:1;min-height:0;overflow-y:auto;background:#FBFAF8;padding:18px;gap:14px;}
#s-portal.pst .chat-msg{gap:10px;}
#s-portal.pst .chat-cav{width:30px;height:30px;font-size:10px;}
#s-portal.pst .chat-bubble{max-width:100%;font-size:13.5px;line-height:1.5;padding:11px 14px;border-radius:0 14px 0 14px;}
#s-portal.pst .chat-msg > div:last-child{max-width:82%;min-width:0;display:flex;flex-direction:column;}
#s-portal.pst .chat-msg:not(.mine) .chat-bubble{background:var(--white);border:1px solid var(--bone-vlak);}
#s-portal.pst .chat-msg.mine .chat-bubble{background:var(--royal);color:#fff;}
#s-portal.pst .chat-meta{font-size:11px;margin-top:4px;}
.pst-snel{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px 0;background:var(--white);flex-shrink:0;}
.pst-snel button{border:1px solid var(--border);background:var(--white);color:var(--royal);font:inherit;font-size:12px;font-weight:700;padding:6px 12px;border-radius:var(--kader-xs);cursor:pointer;}
.pst-snel button:hover{border-color:var(--royal);}
#s-portal.pst .chat-input-row{display:flex;align-items:flex-end;gap:8px;margin:0;padding:12px 18px 18px;border-top:0;background:var(--white);flex-shrink:0;}
#s-portal.pst .chat-inp{flex:1;min-height:44px;max-height:140px;resize:none;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--kader-sm);font:inherit;font-size:14px;line-height:1.45;outline:none;background:var(--white);}
#s-portal.pst .chat-inp:focus{border-color:var(--royal);}
#s-portal.pst .chat-send{width:44px;height:44px;flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center;background:var(--royal);color:var(--yellow);border:0;border-radius:var(--kader-sm);cursor:pointer;}
#s-portal.pst .chat-send:hover{background:#0d2c78;}
.pst-chat-knop{display:none;}
.pst-teller{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--white);}
.pst-teller[hidden]{display:none!important;}
.pst-onder,.pst-meer{display:none;}

/* ── Tussen 901 en 1199: het gesprek achter een knop ── */
@media (max-width:1199px) and (min-width:901px){
  #s-portal.pst.screen.active{grid-template-columns:236px minmax(0,1fr);}
  #s-portal.pst .pst-chat{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:600;box-shadow:-18px 0 40px rgba(16,53,144,.18);transform:translateX(105%);transition:transform .3s var(--soepel);}
  #s-portal.pst.pst-chat-open .pst-chat{transform:none;}
  #s-portal.pst .pst-chat-terug{display:flex;}
  .pst-chat-knop{display:flex;position:fixed;right:24px;bottom:24px;z-index:550;width:58px;height:58px;border-radius:var(--kader);border:0;background:var(--royal);color:var(--yellow);align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 28px rgba(16,53,144,.35);}
  #s-portal.pst.pst-chat-open .pst-chat-knop{display:none;}
  .pst-rij{grid-template-columns:1fr;}
}

/* ── Telefoon en tablet staand: één kolom, balk onderin ── */
@media (max-width:900px){
  #s-portal.pst.screen.active,#s-portal.pst.pst-zonder-chat.screen.active{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;}
  #s-portal.pst .pst-nav{display:none;}
  #s-portal.pst .pst-top{display:flex;grid-column:1;grid-row:1;align-items:center;justify-content:space-between;gap:12px;background:var(--white);border-bottom:1px solid var(--bone-vlak);padding:12px max(16px,env(safe-area-inset-left,0px));padding-top:calc(12px + env(safe-area-inset-top,0px));}
  .pst-top img{height:20px;}
  .pst-top-klant{font-size:13px;font-weight:800;color:var(--black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;}
  #s-portal.pst .portal-body{grid-column:1;grid-row:2;padding:22px 16px 28px;}
  #s-portal.pst .pst-chat{position:fixed;inset:0;z-index:650;border:0;transform:translateY(100%);transition:transform .28s var(--soepel);padding-bottom:env(safe-area-inset-bottom,0px);}
  #s-portal.pst.pst-chat-open .pst-chat{transform:none;}
  #s-portal.pst .pst-chat-terug{display:flex;}
  .pst-chat-kop{padding-top:calc(14px + env(safe-area-inset-top,0px));}
  #s-portal.pst .pst-onder{display:grid;grid-column:1;grid-row:3;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--white);border-top:1px solid var(--bone-vlak);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:100;}
  .pst-o{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 5px;border:0;background:none;font:inherit;font-size:10.5px;font-weight:700;color:var(--muted);cursor:pointer;min-width:0;}
  .pst-o span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pst-o svg{width:22px;height:22px;}
  .pst-o.aan{color:var(--royal);}
  .pst-o.aan::before{content:'';position:absolute;top:-6px;left:50%;width:26px;height:3px;margin-left:-13px;background:var(--royal);border-radius:0 0 3px 3px;}
  .pst-o .pst-teller{top:2px;right:calc(50% - 22px);}
  #s-portal.pst .pst-meer:not([hidden]){display:block;position:fixed;inset:0;z-index:700;}
  .pst-meer-achter{position:absolute;inset:0;background:rgba(16,22,40,.45);}
  .pst-meer-vel{position:absolute;left:0;right:0;bottom:0;background:var(--white);border-radius:0 18px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px;}
  .pst-meer-greep{width:40px;height:4px;border-radius:2px;background:var(--border);margin:2px auto 10px;}
  .pst-meer-item{display:flex;align-items:center;gap:14px;padding:14px 10px;border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--black);cursor:pointer;border-radius:var(--kader-sm);text-align:left;}
  .pst-meer-item svg{width:22px;height:22px;color:var(--royal);}
  .pst-meer-item:hover{background:var(--off);}
  .pst-meer-uit{margin-top:8px;padding:13px;border:1.5px solid var(--border);background:var(--white);border-radius:var(--kader-sm);font:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;}
  .pst-rij{grid-template-columns:1fr;}
  .pst-fases span{font-size:9.5px;}
  #s-portal.pst .pst-kop h2{font-size:30px;}
}
@media (max-width:420px){
  .pst-fases span{display:none;}
  .pst-fases li.nu span{display:block;position:absolute;top:24px;white-space:nowrap;font-size:10.5px;}
  .pst-fases{padding-bottom:18px;}
}
@media (prefers-reduced-motion:reduce){
  #s-portal.pst .pst-chat,.pst-proj{transition:none!important;}
}

.kp-uitleg{font-size:11.5px;color:var(--muted);margin:-2px 0 8px;line-height:1.45;}

/* 3.78.2 alleen het logo van de klant */
.pst-klant.met-logo{padding:4px 8px 20px;}
.pst-klant.met-logo .pst-klant-tekst{display:none;}
.pst-klant.met-logo .pst-logo{width:100%;height:auto;border:0!important;background:none;padding:0!important;border-radius:0;overflow:visible;justify-content:flex-start;flex-shrink:1;}
/* Languit: een breed logo vult de hele breedte van de zijbalk */
.pst-klant.met-logo .pst-logo img{width:100%!important;height:auto!important;max-width:100%!important;max-height:110px!important;object-fit:contain;object-position:left center;display:block;}

/* Hoort als laatste: main.css is binnen, dus alles mag zichtbaar worden
   (zie login.css). */
body > :not(#s-login){visibility:inherit;}