@font-face{font-family:"Outfit";font-style:normal;font-display:swap;font-weight:100 900;src:url("lettertype-outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-display:swap;font-weight:100 900;src:url("lettertype-outfit.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Eyefly tokens. Gegenereerd door tools/bouw.py uit tokens/tokens.json. Niet met de hand wijzigen. */

:root,[data-theme="light"]{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-30:120px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:28px;
  --radius-pill:999px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-16:16px;
  --fs-18:18px;
  --fs-22:22px;
  --fs-26:26px;
  --fs-34:34px;
  --row-cockpit:40px;
  --row-portal:56px;
  --bp-phone:700px;
  --bp-tablet:1024px;
  --bp-laptop:1280px;
  --web-container:1280px;
  --web-gutter:48px;
  --prose-max:680px;
  --sidebar-cockpit:248px;
  --sidebar-portal:276px;
  --rail:64px;
  --page-detail-max:1200px;
  --info-rail:320px;
  --form-max:760px;
  --dialog-s:460px;
  --dialog-m:620px;
  --dialog-l:940px;
  --drawer:480px;
  --font-sans:Outfit, system-ui, sans-serif;
  --font-mono:Outfit, system-ui, sans-serif;
  --brand-purple:#592582;
  --brand-purple-line:#592582;
  --brand-blue:#009add;
  --brand-navy:#2e2872;
  --on-brand-blue:#0b1026;
  --canvas:#f3f4f8;
  --panel:#ffffff;
  --surface:#ffffff;
  --sunken:#eef0f5;
  --raised:#ffffff;
  --ink:#171530;
  --ink-2:#4a4e6b;
  --ink-3:#5e6284;
  --line:rgba(23,21,48,.10);
  --line-2:rgba(23,21,48,.16);
  --line-ctl:rgba(23,21,48,.5);
  --action:#2e2872;
  --on-action:#ffffff;
  --accent:#006c9c;
  --accent-bg:rgba(0,108,156,.1);
  --new:#592582;
  --new-bg:rgba(89,37,130,.1);
  --ok:#0a6b4c;
  --ok-bg:rgba(10,107,76,.1);
  --warn:#8a5200;
  --warn-bg:rgba(138,82,0,.1);
  --crit:#b01f38;
  --crit-bg:rgba(176,31,56,.1);
  --glow1:rgba(0,154,221,.15);
  --glow2:rgba(89,37,130,.12);
  --tb:rgba(0,154,221,.09);
  --tp:rgba(89,37,130,.08);
  --tn:rgba(46,40,114,.06);
  --stage:#0a0917;
  --chrome:rgba(16,14,33,.88);
  --chrome-ink:#f0f1f7;
  --chrome-ink-2:#bcc2da;
  --chrome-line:rgba(255,255,255,.28);
  --chrome-selected:rgba(255,255,255,.16);
  --cat-geo:#1f7fbf;
  --cat-geo-bg:rgba(31,127,191,.12);
  --cat-vastgoed:#7a4ab0;
  --cat-vastgoed-bg:rgba(122,74,176,.11);
  --cat-kunstwerk:#b06f12;
  --cat-kunstwerk-bg:rgba(176,111,18,.12);
  --cat-promotie:#be3b74;
  --cat-promotie-bg:rgba(190,59,116,.11);
  --cat-solar:#6f7f12;
  --cat-solar-bg:rgba(111,127,18,.13);
  --cat-water:#11806f;
  --cat-water-bg:rgba(17,128,111,.11);
  --cat-inspectie:#4656c2;
  --cat-inspectie-bg:rgba(70,86,194,.11);
  --cat-onbekend:#64688a;
  --cat-onbekend-bg:rgba(100,104,138,.12);
  --viz-ok:#3e9e7b;
  --viz-warn:#b98234;
  --viz-crit:#cf6577;
  --viz-info:#3d93c9;
  --viz-muted:#b4b8cc;
  --viz-track:rgba(23,21,48,.08);
  --shadow-card:0 1px 2px rgba(23,21,48,.05), 0 4px 16px rgba(23,21,48,.04);
  --shadow-pop:0 12px 32px rgba(10,9,23,.18);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand-purple:#592582;
    --brand-purple-line:#9255c9;
    --brand-blue:#009add;
    --brand-navy:#2e2872;
    --on-brand-blue:#0b1026;
    --canvas:#0e0c1e;
    --panel:#131129;
    --surface:#1a1835;
    --sunken:#0e0c1e;
    --raised:#24214a;
    --ink:#f0f1f7;
    --ink-2:#a8adca;
    --ink-3:#9aa0be;
    --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.16);
    --line-ctl:rgba(255,255,255,.42);
    --action:#009add;
    --on-action:#0b1026;
    --accent:#4fc3f2;
    --accent-bg:rgba(79,195,242,.14);
    --new:#c79ae6;
    --new-bg:rgba(199,154,230,.14);
    --ok:#63d3aa;
    --ok-bg:rgba(99,211,170,.14);
    --warn:#f0bd77;
    --warn-bg:rgba(240,189,119,.14);
    --crit:#ff9aa9;
    --crit-bg:rgba(255,154,169,.14);
    --glow1:rgba(0,154,221,.22);
    --glow2:rgba(146,85,201,.20);
    --tb:rgba(0,154,221,.14);
    --tp:rgba(199,154,230,.12);
    --tn:rgba(255,255,255,.05);
    --stage:#0a0917;
    --chrome:rgba(16,14,33,.88);
    --chrome-ink:#f0f1f7;
    --chrome-ink-2:#bcc2da;
    --chrome-line:rgba(255,255,255,.28);
    --chrome-selected:rgba(255,255,255,.16);
    --cat-geo:#5cb8ee;
    --cat-geo-bg:rgba(92,184,238,.16);
    --cat-vastgoed:#b792e3;
    --cat-vastgoed-bg:rgba(183,146,227,.16);
    --cat-kunstwerk:#e6b062;
    --cat-kunstwerk-bg:rgba(230,176,98,.16);
    --cat-promotie:#f08cb6;
    --cat-promotie-bg:rgba(240,140,182,.15);
    --cat-solar:#bfcb5e;
    --cat-solar-bg:rgba(191,203,94,.15);
    --cat-water:#5acdb9;
    --cat-water-bg:rgba(90,205,185,.15);
    --cat-inspectie:#909df2;
    --cat-inspectie-bg:rgba(144,157,242,.16);
    --cat-onbekend:#9aa0be;
    --cat-onbekend-bg:rgba(154,160,190,.15);
    --viz-ok:#4fb890;
    --viz-warn:#d9a85e;
    --viz-crit:#e8899a;
    --viz-info:#5aaee0;
    --viz-muted:#4a4868;
    --viz-track:rgba(255,255,255,.08);
    --shadow-card:none;
    --shadow-pop:0 12px 32px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}

[data-theme="dark"]{
  --brand-purple:#592582;
  --brand-purple-line:#9255c9;
  --brand-blue:#009add;
  --brand-navy:#2e2872;
  --on-brand-blue:#0b1026;
  --canvas:#0e0c1e;
  --panel:#131129;
  --surface:#1a1835;
  --sunken:#0e0c1e;
  --raised:#24214a;
  --ink:#f0f1f7;
  --ink-2:#a8adca;
  --ink-3:#9aa0be;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-ctl:rgba(255,255,255,.42);
  --action:#009add;
  --on-action:#0b1026;
  --accent:#4fc3f2;
  --accent-bg:rgba(79,195,242,.14);
  --new:#c79ae6;
  --new-bg:rgba(199,154,230,.14);
  --ok:#63d3aa;
  --ok-bg:rgba(99,211,170,.14);
  --warn:#f0bd77;
  --warn-bg:rgba(240,189,119,.14);
  --crit:#ff9aa9;
  --crit-bg:rgba(255,154,169,.14);
  --glow1:rgba(0,154,221,.22);
  --glow2:rgba(146,85,201,.20);
  --tb:rgba(0,154,221,.14);
  --tp:rgba(199,154,230,.12);
  --tn:rgba(255,255,255,.05);
  --stage:#0a0917;
  --chrome:rgba(16,14,33,.88);
  --chrome-ink:#f0f1f7;
  --chrome-ink-2:#bcc2da;
  --chrome-line:rgba(255,255,255,.28);
  --chrome-selected:rgba(255,255,255,.16);
  --cat-geo:#5cb8ee;
  --cat-geo-bg:rgba(92,184,238,.16);
  --cat-vastgoed:#b792e3;
  --cat-vastgoed-bg:rgba(183,146,227,.16);
  --cat-kunstwerk:#e6b062;
  --cat-kunstwerk-bg:rgba(230,176,98,.16);
  --cat-promotie:#f08cb6;
  --cat-promotie-bg:rgba(240,140,182,.15);
  --cat-solar:#bfcb5e;
  --cat-solar-bg:rgba(191,203,94,.15);
  --cat-water:#5acdb9;
  --cat-water-bg:rgba(90,205,185,.15);
  --cat-inspectie:#909df2;
  --cat-inspectie-bg:rgba(144,157,242,.16);
  --cat-onbekend:#9aa0be;
  --cat-onbekend-bg:rgba(154,160,190,.15);
  --viz-ok:#4fb890;
  --viz-warn:#d9a85e;
  --viz-crit:#e8899a;
  --viz-info:#5aaee0;
  --viz-muted:#4a4868;
  --viz-track:rgba(255,255,255,.08);
  --shadow-card:none;
  --shadow-pop:0 12px 32px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* Varianten voor ontwerpschermen: beide thema's naast elkaar op een pagina. */

.t-light{
  --brand-purple:#592582;
  --brand-purple-line:#592582;
  --brand-blue:#009add;
  --brand-navy:#2e2872;
  --on-brand-blue:#0b1026;
  --canvas:#f3f4f8;
  --panel:#ffffff;
  --surface:#ffffff;
  --sunken:#eef0f5;
  --raised:#ffffff;
  --ink:#171530;
  --ink-2:#4a4e6b;
  --ink-3:#5e6284;
  --line:rgba(23,21,48,.10);
  --line-2:rgba(23,21,48,.16);
  --line-ctl:rgba(23,21,48,.5);
  --action:#2e2872;
  --on-action:#ffffff;
  --accent:#006c9c;
  --accent-bg:rgba(0,108,156,.1);
  --new:#592582;
  --new-bg:rgba(89,37,130,.1);
  --ok:#0a6b4c;
  --ok-bg:rgba(10,107,76,.1);
  --warn:#8a5200;
  --warn-bg:rgba(138,82,0,.1);
  --crit:#b01f38;
  --crit-bg:rgba(176,31,56,.1);
  --glow1:rgba(0,154,221,.15);
  --glow2:rgba(89,37,130,.12);
  --tb:rgba(0,154,221,.09);
  --tp:rgba(89,37,130,.08);
  --tn:rgba(46,40,114,.06);
  --stage:#0a0917;
  --chrome:rgba(16,14,33,.88);
  --chrome-ink:#f0f1f7;
  --chrome-ink-2:#bcc2da;
  --chrome-line:rgba(255,255,255,.28);
  --chrome-selected:rgba(255,255,255,.16);
  --cat-geo:#1f7fbf;
  --cat-geo-bg:rgba(31,127,191,.12);
  --cat-vastgoed:#7a4ab0;
  --cat-vastgoed-bg:rgba(122,74,176,.11);
  --cat-kunstwerk:#b06f12;
  --cat-kunstwerk-bg:rgba(176,111,18,.12);
  --cat-promotie:#be3b74;
  --cat-promotie-bg:rgba(190,59,116,.11);
  --cat-solar:#6f7f12;
  --cat-solar-bg:rgba(111,127,18,.13);
  --cat-water:#11806f;
  --cat-water-bg:rgba(17,128,111,.11);
  --cat-inspectie:#4656c2;
  --cat-inspectie-bg:rgba(70,86,194,.11);
  --cat-onbekend:#64688a;
  --cat-onbekend-bg:rgba(100,104,138,.12);
  --viz-ok:#3e9e7b;
  --viz-warn:#b98234;
  --viz-crit:#cf6577;
  --viz-info:#3d93c9;
  --viz-muted:#b4b8cc;
  --viz-track:rgba(23,21,48,.08);
  --shadow-card:0 1px 2px rgba(23,21,48,.05), 0 4px 16px rgba(23,21,48,.04);
  --shadow-pop:0 12px 32px rgba(10,9,23,.18);
  color-scheme:light;
}

.t-dark{
  --brand-purple:#592582;
  --brand-purple-line:#9255c9;
  --brand-blue:#009add;
  --brand-navy:#2e2872;
  --on-brand-blue:#0b1026;
  --canvas:#0e0c1e;
  --panel:#131129;
  --surface:#1a1835;
  --sunken:#0e0c1e;
  --raised:#24214a;
  --ink:#f0f1f7;
  --ink-2:#a8adca;
  --ink-3:#9aa0be;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-ctl:rgba(255,255,255,.42);
  --action:#009add;
  --on-action:#0b1026;
  --accent:#4fc3f2;
  --accent-bg:rgba(79,195,242,.14);
  --new:#c79ae6;
  --new-bg:rgba(199,154,230,.14);
  --ok:#63d3aa;
  --ok-bg:rgba(99,211,170,.14);
  --warn:#f0bd77;
  --warn-bg:rgba(240,189,119,.14);
  --crit:#ff9aa9;
  --crit-bg:rgba(255,154,169,.14);
  --glow1:rgba(0,154,221,.22);
  --glow2:rgba(146,85,201,.20);
  --tb:rgba(0,154,221,.14);
  --tp:rgba(199,154,230,.12);
  --tn:rgba(255,255,255,.05);
  --stage:#0a0917;
  --chrome:rgba(16,14,33,.88);
  --chrome-ink:#f0f1f7;
  --chrome-ink-2:#bcc2da;
  --chrome-line:rgba(255,255,255,.28);
  --chrome-selected:rgba(255,255,255,.16);
  --cat-geo:#5cb8ee;
  --cat-geo-bg:rgba(92,184,238,.16);
  --cat-vastgoed:#b792e3;
  --cat-vastgoed-bg:rgba(183,146,227,.16);
  --cat-kunstwerk:#e6b062;
  --cat-kunstwerk-bg:rgba(230,176,98,.16);
  --cat-promotie:#f08cb6;
  --cat-promotie-bg:rgba(240,140,182,.15);
  --cat-solar:#bfcb5e;
  --cat-solar-bg:rgba(191,203,94,.15);
  --cat-water:#5acdb9;
  --cat-water-bg:rgba(90,205,185,.15);
  --cat-inspectie:#909df2;
  --cat-inspectie-bg:rgba(144,157,242,.16);
  --cat-onbekend:#9aa0be;
  --cat-onbekend-bg:rgba(154,160,190,.15);
  --viz-ok:#4fb890;
  --viz-warn:#d9a85e;
  --viz-crit:#e8899a;
  --viz-info:#5aaee0;
  --viz-muted:#4a4868;
  --viz-track:rgba(255,255,255,.08);
  --shadow-card:none;
  --shadow-pop:0 12px 32px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* Eyefly bouwstenen. Leest alleen tokens (tokens.css). Thema via data-theme op de root. */
.ef{font-family:var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.ef *,.ef *::before,.ef *::after{box-sizing:border-box}
.ef-mono{font-family:var(--font-mono)}
/* Iconenpaar: licht standaard; donker bij data-theme="dark" of bij de systeeminstelling zonder expliciete keuze */
.ef-ic-d{display:none!important}
[data-theme="dark"] .ef-ic-l{display:none!important}
[data-theme="dark"] .ef-ic-d{display:revert!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ef-ic-l{display:none!important}:root:not([data-theme="light"]) .ef-ic-d{display:revert!important}}
.ef a:focus-visible,.ef button:focus-visible,.ef input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Gradient B */
.ef-sig{display:block;width:72px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}

/* Button */
.ef-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border-radius:var(--radius-sm);border:1px solid transparent;font:500 var(--fs-14)/1 var(--font-sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.ef-btn--primary{background:var(--action);color:var(--on-action)}
.ef-btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line-ctl)}
.ef-btn--ghost{background:transparent;color:var(--accent)}
.ef-btn--lg{min-height:46px;padding:0 20px;font-size:15px;border-radius:11px}
.ef-btn--sm{min-height:32px;padding:0 12px;font-size:var(--fs-13)}
.ef-btn--danger{background:var(--crit);color:var(--on-action)}
.ef-btn--danger-ghost{background:transparent;color:var(--crit);padding:0 8px}
.ef-btn--danger-ghost:hover{background:var(--crit-bg)}
.ef-btn--touch{min-height:52px;width:100%;font-size:var(--fs-16);font-weight:600;border-radius:var(--radius-md)}
.ef-btn[aria-disabled="true"],.ef-btn:disabled{opacity:.5;cursor:not-allowed}
.ef-btn--image{background:var(--brand-blue);color:var(--on-brand-blue)}
.ef-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Pill */
.ef-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:2px 10px;font:500 var(--fs-12)/1.5 var(--font-sans);white-space:nowrap}
.ef-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ef-pill--ok{background:var(--ok-bg);color:var(--ok)}
.ef-pill--warn{background:var(--warn-bg);color:var(--warn)}
.ef-pill--crit{background:var(--crit-bg);color:var(--crit)}
.ef-pill--accent{background:var(--accent-bg);color:var(--accent)}
.ef-pill--new{background:var(--new-bg);color:var(--new)}
.ef-pill--neutral{background:var(--sunken);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}

/* Tabs */
.ef-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line-2)}
.ef-tabs a{position:relative;padding:8px 0 11px;font:500 var(--fs-14) var(--font-sans);color:var(--ink-3);text-decoration:none}
.ef-tabs a:hover{color:var(--ink)}
.ef-tabs a[aria-current="page"]{color:var(--ink)}
.ef-tabs a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-tabs .ef-count{font:500 11.5px var(--font-mono);color:var(--ink-3);margin-left:5px}

/* NavItem (zijbalk) */
.ef-nav{display:flex;flex-direction:column;gap:1px;padding:12px;background:var(--canvas)}
.ef-nav-grp{font:500 11.5px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:12px 10px 4px;margin:0}
.ef-nav-item{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--radius-sm);color:var(--ink-2);font:500 var(--fs-14) var(--font-sans);text-decoration:none}
.ef-nav-item:hover{background:var(--sunken);color:var(--ink)}
.ef-nav-item[aria-current="page"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-card)}
.ef-nav-item[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--brand-blue),var(--brand-purple-line))}
.ef-nav-item[aria-current="page"] svg{color:var(--accent)}
.ef-nav-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ef-nav-count{margin-left:auto;font:500 11.5px var(--font-mono);color:var(--ink-3)}
.ef-nav-count--crit{color:var(--crit);background:var(--crit-bg);border-radius:var(--radius-pill);padding:0 7px}
.ef-nav-item--project{height:auto;padding:6px 8px}
.ef-nav-item--project img{width:44px;height:34px;border-radius:7px;object-fit:cover;flex:none}
.ef-nav-item--project small{display:block;font-size:var(--fs-12);font-weight:400;color:var(--ink-3)}

/* PageHeader */
.ef-hd{position:relative;padding:16px 24px 0;background:var(--panel);overflow:hidden}
.ef-hd::before{content:"";position:absolute;left:-10%;top:-160px;width:60%;height:360px;background:radial-gradient(closest-side,var(--glow1),transparent);pointer-events:none}
.ef-hd::after{content:"";position:absolute;right:-6%;top:-150px;width:50%;height:330px;background:radial-gradient(closest-side,var(--glow2),transparent);pointer-events:none}
.ef-hd>*{position:relative}
.ef-crumb{font-size:var(--fs-13);color:var(--ink-3)}
.ef-crumb b{color:var(--ink);font-weight:500}
.ef-hd-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:16px 0}
.ef-hd h1{margin:10px 0 0;font:600 var(--fs-34)/40px var(--font-sans);letter-spacing:-.03em}
.ef-hd-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.ef-hd-meta b{color:var(--ink);font-weight:600}
.ef-hd-acts{display:flex;gap:8px;flex:none}

/* KeyFacts */
.ef-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.ef-facts div{background:var(--sunken);border-radius:var(--radius-md);padding:9px 12px}
.ef-facts dt{font-size:var(--fs-12);color:var(--ink-3)}
.ef-facts dd{margin:2px 0 0;font:600 var(--fs-16) var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.ef-facts dd small{font-weight:400;font-size:var(--fs-12);color:var(--ink-3)}

/* ProductCard */
.ef-product{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:6px 12px 12px;color:var(--ink);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.ef-product:hover{transform:translateY(-3px);border-color:var(--line-ctl)}
.ef-product-ill{display:grid;place-items:center;height:86px;margin:4px -4px 10px;border-radius:var(--radius-md)}
.ef-product-ill img{width:90px;height:auto;display:block}
.ef-product b{font-weight:600;font-size:var(--fs-14)}
.ef-product small{font-size:12.5px;color:var(--ink-3)}
.ef-product-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px}
.ef-fmt{font:500 11.5px var(--font-mono);color:var(--ink-2);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px}
.ef-tint-b{background:var(--tb)}.ef-tint-p{background:var(--tp)}.ef-tint-n{background:var(--tn)}
@media (prefers-reduced-motion:reduce){.ef-product{transition:none}.ef-product:hover{transform:none}}

/* ImageDock: bediening over beeld */
.ef-stage{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--stage)}
.ef-stage>img{display:block;width:100%;height:100%;object-fit:cover}
.ef-dock{position:absolute;left:14px;bottom:14px;display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--chrome);border:1px solid var(--chrome-line)}
.ef-dock button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--chrome-ink-2);padding:4px 12px 4px 4px;border-radius:10px;font:500 var(--fs-13) var(--font-sans);cursor:pointer}
.ef-dock button img{width:30px;height:auto}
.ef-dock button[aria-pressed="true"]{background:var(--chrome-selected);color:var(--chrome-ink)}

/* Timeline */
.ef-tl{position:relative;height:60px;margin:30px 24px 4px}
.ef-tl-ax{position:absolute;left:0;right:0;top:20px;height:2px;background:var(--line-2);border-radius:2px}
.ef-tl-ax i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-tl-pt{position:absolute;top:13px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.ef-tl-pt b{display:block;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--brand-blue)}
.ef-tl-pt.is-now b{border:4px solid var(--brand-purple);box-shadow:0 0 0 5px var(--new-bg)}
.ef-tl-pt.is-todo b{border:2px dashed var(--line-ctl)}
.ef-tl-pt em{position:absolute;bottom:24px;white-space:nowrap;font:600 12.5px var(--font-sans);font-style:normal;color:var(--ink)}
.ef-tl-pt.is-now em{background:var(--new-bg);color:var(--new);border-radius:8px;padding:1px 8px}
.ef-tl-pt small{position:absolute;top:24px;white-space:nowrap;font:500 11.5px var(--font-mono);color:var(--ink-3)}

/* Board: overzicht per fase (Sales, Projecten, Operations) */
.ef-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;overflow-x:auto;padding-bottom:4px}
.ef-col{background:var(--sunken);border-radius:var(--radius-lg);padding:12px 10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ef-col-hd{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 4px;font:600 15px var(--font-sans);color:var(--ink)}
.ef-col-hd span{font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:0 9px}
.ef-col-sum{font-size:12.5px;color:var(--ink-3);padding:0 6px}
.ef-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none;transition:border-color .15s ease}
.ef-card:hover{border-color:var(--line-ctl)}
.ef-card b{font-weight:600;font-size:15px;line-height:1.3}
.ef-card small{font-size:var(--fs-13);color:var(--ink-2)}
.ef-card-meta{display:flex;align-items:center;gap:7px;font-size:var(--fs-13);color:var(--ink-2)}
.ef-card-meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3)}
.ef-card-ft{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}

/* Veld en venster rekenen vanaf de rand, zodat 38 px en 460 px ook echt zo breed zijn */
.ef-input,.ef-dlg,.ef-drawer,.ef-toast,.ef-dlg-opt{box-sizing:border-box}

/* Field: label, invoer, hulptekst en foutmelding */
.ef-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.ef-field>label,.ef-label{font:500 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-2)}
.ef-input{display:block;width:100%;min-height:38px;border:1px solid var(--line-ctl);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);padding:0 12px;font:400 var(--fs-14)/1.4 var(--font-sans)}
.ef-input::placeholder{color:var(--ink-3)}
.ef-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-input--sm{min-height:32px;padding:0 10px;font-size:var(--fs-13)}
textarea.ef-input{min-height:0;padding:8px 12px;line-height:1.5;resize:vertical}
select.ef-input{appearance:none;-webkit-appearance:none;padding-right:36px}
.ef-select{position:relative}
.ef-select svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ef-input[aria-invalid="true"]{border-color:var(--crit)}
.ef-input[readonly]{background:var(--sunken)}
.ef-input:disabled{opacity:.5;cursor:not-allowed}
.ef-help{font-size:12.5px;color:var(--ink-3)}
.ef-error{font-size:12.5px;color:var(--crit)}

/* Chip: een aan te klikken filter in een rij (per verantwoordelijke, per soort); een statuslabel is een Pill */
.ef-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--line-ctl);border-radius:var(--radius-pill);background:transparent;color:var(--ink-2);font:500 var(--fs-13)/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.ef-chip:hover{color:var(--ink);border-color:var(--ink-3)}
.ef-chip[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.ef-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-chip-count{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ef-chip[aria-pressed="true"] .ef-chip-count{color:var(--accent)}

/* Segmented: lokaal filter of weergave binnen een sectie (tabs wisselen van sectie) */
.ef-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--sunken)}
.ef-seg button{border:0;background:transparent;color:var(--ink-2);padding:5px 12px;border-radius:var(--radius-sm);font:500 var(--fs-13)/1.4 var(--font-sans);cursor:pointer}
.ef-seg button:hover{color:var(--ink)}
.ef-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}
.ef-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Table */
.ef-table{width:100%;border-collapse:collapse;font:400 var(--fs-14)/1.45 var(--font-sans);color:var(--ink)}
.ef-table th{padding:8px 12px;text-align:left;font:500 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-3);border-bottom:1px solid var(--line-2);white-space:nowrap}
.ef-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ef-table tbody tr:hover{background:var(--sunken)}
.ef-table .ef-num{text-align:right;font-variant-numeric:tabular-nums}
.ef-table--sticky th{position:sticky;top:0;background:var(--panel);z-index:1}
.ef-table--dense td{padding:6px 12px}

/* Stat: kerncijfer */
.ef-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.ef-stat dt,.ef-stat-label{font:400 var(--fs-12)/1.4 var(--font-sans);color:var(--ink-3)}
.ef-stat dd,.ef-stat-value{margin:0;font:600 var(--fs-22)/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ef-stat-sub{font-size:12.5px;color:var(--ink-3)}

/* EmptyState */
.ef-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:32px 20px;color:var(--ink-2)}
.ef-empty-ic{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--tb);color:var(--accent);margin-bottom:4px}
.ef-empty-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ef-empty b{font:600 var(--fs-16)/1.3 var(--font-sans);color:var(--ink)}
.ef-empty p{margin:0;max-width:340px;font-size:var(--fs-14)}
.ef-empty .ef-btn{margin-top:8px}

/* Dialog: een venster op een gedimde pagina. Maten S, M en L; het zijpaneel is de lade. */
.ef-scrim{position:fixed;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:clamp(48px,10vh,120px) 24px 24px;background:color-mix(in srgb,var(--canvas) 74%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
[data-theme="light"] .ef-scrim{background:color-mix(in srgb,var(--ink) 42%,transparent)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ef-scrim{background:color-mix(in srgb,var(--ink) 42%,transparent)}}
.ef-scrim--side{justify-content:flex-end;align-items:stretch;padding:0}
.ef-dlg{position:relative;display:flex;flex-direction:column;width:var(--dialog-s);max-width:100%;max-height:85vh;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);overflow:hidden;text-align:left;font:400 var(--fs-14)/1.5 var(--font-sans)}
.ef-dlg::before,.ef-drawer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-dlg--m{width:var(--dialog-m)}
.ef-dlg--l{width:var(--dialog-l)}
.ef-dlg-head{position:relative;flex:none;padding:24px 60px 0 24px}
.ef-dlg-head--icon{display:flex;gap:14px;align-items:flex-start}
.ef-dlg-ic{width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;flex:none;background:var(--accent-bg);color:var(--accent)}
.ef-dlg-ic--crit{background:var(--crit-bg);color:var(--crit)}
.ef-dlg-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-dlg-eyebrow{font:500 11.5px/1.4 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ef-dlg-title{margin:3px 0 0;font:600 var(--fs-18)/1.3 var(--font-sans);letter-spacing:-.01em}
.ef-dlg-x{position:absolute;z-index:1;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);display:grid;place-items:center;padding:0;cursor:pointer}
.ef-dlg-x:hover{background:var(--sunken);color:var(--ink)}
.ef-dlg-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-dlg-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ef-dlg-body{padding:10px 24px 20px;color:var(--ink-2);font-size:var(--fs-14);overflow:auto;flex:1;min-height:0}
.ef-dlg-head--icon+.ef-dlg-body{padding-left:78px}
.ef-dlg--m .ef-dlg-head,.ef-dlg--l .ef-dlg-head,.ef-drawer .ef-dlg-head{padding-bottom:16px;border-bottom:1px solid var(--line)}
.ef-dlg--m .ef-dlg-body,.ef-dlg--l .ef-dlg-body{padding:18px 24px 22px;color:var(--ink)}
.ef-dlg-points{list-style:none;margin:12px 0 0;padding:0}
.ef-dlg-points li{position:relative;padding:7px 0 7px 18px;border-top:1px solid var(--line);font-size:13.5px}
.ef-dlg-points li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ef-dlg-points--crit li{color:var(--ink)}
.ef-dlg-points--crit li::before{background:var(--viz-crit)}
.ef-dlg-foot{flex:none;display:flex;align-items:center;gap:8px;padding:14px 20px 16px 24px;border-top:1px solid var(--line);background:var(--surface)}
.ef-dlg-foot .ef-kbd-hint{margin-right:auto}
.ef-dlg-foot--end{justify-content:flex-end}
.ef-kbd-hint{font-size:var(--fs-12);color:var(--ink-3)}
.ef-kbd-hint kbd{font:500 11px var(--font-sans);border:1px solid var(--line-2);border-radius:5px;padding:0 5px;margin-right:5px}
.ef-dlg-tech{margin-top:12px;border:1px solid var(--line-2);border-radius:10px;background:var(--sunken)}
.ef-dlg-tech summary{display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;font:500 var(--fs-13) var(--font-sans);color:var(--ink-2);list-style:none}
.ef-dlg-tech summary::-webkit-details-marker{display:none}
.ef-dlg-tech pre{margin:0;padding:0 12px 10px;font:400 var(--fs-12)/1.55 var(--font-sans);color:var(--ink-2);white-space:pre-wrap}
.ef-dlg-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 24px 22px}
.ef-dlg-opt{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:14px;border:1.5px solid var(--line-ctl);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.ef-dlg-opt:hover{border-color:var(--accent);background:var(--accent-bg)}
.ef-dlg-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-dlg-opt b{font:600 15px/1.3 var(--font-sans)}
.ef-dlg-opt span{font-size:var(--fs-13);color:var(--ink-2);line-height:1.45}

/* Drawer: de lade rechts voor een detail naast een lijst */
.ef-drawer{position:relative;display:flex;flex-direction:column;width:var(--drawer);max-width:100%;height:100%;flex:none;background:var(--surface);color:var(--ink);border-left:1px solid var(--line-2);box-shadow:var(--shadow-pop);text-align:left;font:400 var(--fs-14)/1.5 var(--font-sans)}

/* Toast: terugmelding na een omkeerbare actie, 8 tot 11 seconden */
.ef-toast-stack{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
.ef-toast{position:relative;display:flex;align-items:center;gap:12px;min-width:340px;max-width:520px;padding:13px 12px 15px 16px;border-radius:14px;overflow:hidden;background:var(--chrome);border:1px solid var(--chrome-line);color:var(--chrome-ink);font:500 var(--fs-14)/1.4 var(--font-sans);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ef-toast-tx{flex:1}
.ef-toast-act{border:0;background:transparent;color:var(--chrome-ink);font:600 var(--fs-14) var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 6px;border-radius:6px}
.ef-toast-act:hover,.ef-toast-x:hover{background:var(--chrome-selected)}
.ef-toast-x{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--chrome-ink-2);display:grid;place-items:center;padding:0;cursor:pointer}
.ef-toast-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ef-toast button:focus-visible{outline:2px solid var(--brand-blue);outline-offset:1px}
.ef-toast-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--chrome-selected)}
.ef-toast-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line));animation:ef-toast-bar 9s linear forwards}
@keyframes ef-toast-bar{from{width:100%}to{width:0}}
@media (prefers-reduced-motion:reduce){.ef-toast-bar i{animation:none}}

/* Telefoon: elk venster wordt een onderblad, de lade een volledig scherm; knoppen onder elkaar */
@media (max-width:700px){
  .ef-scrim{padding:0;align-items:flex-end}
  .ef-dlg{width:100%;max-height:92dvh;border-bottom:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .ef-dlg::after{content:"";order:-1;flex:none;width:40px;height:4px;border-radius:2px;background:var(--line-ctl);margin:10px auto 0}
  .ef-dlg-head{padding:12px 60px 0 20px}
  .ef-dlg-x{right:8px;top:6px;width:44px;height:44px}
  .ef-dlg-body,.ef-dlg--m .ef-dlg-body,.ef-dlg--l .ef-dlg-body{padding:8px 20px 16px}
  .ef-dlg-head--icon+.ef-dlg-body{padding-left:20px}
  .ef-dlg-foot{flex-direction:column-reverse;align-items:stretch;gap:8px;padding:12px 16px 22px}
  .ef-dlg-foot .ef-btn{min-height:52px;font-size:var(--fs-16);font-weight:600;border-radius:var(--radius-md)}
  .ef-dlg-foot .ef-kbd-hint{display:none}
  .ef-dlg-opts{grid-template-columns:1fr;padding:0 20px 20px}
  .ef-scrim--side{align-items:stretch}
  .ef-drawer{width:100%;border-left:0}
  .ef-toast-stack{left:16px;right:16px;transform:none;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .ef-toast{min-width:0;width:100%}
}

/* ===================================================================================================
   1.3.0 — bouwstenen uit de ontwerpborden en de pagina-mockups van de cockpit.
   Alleen var(--…). Lettergroottes uit de schaal fs-12 … fs-34.
   =================================================================================================== */

/* Nieuwe vaste maten rekenen vanaf de rand, ook buiten .ef */
.ef-btn--icon,.ef-search,.ef-av,.ef-ring,.ef-ic-tile,.ef-datetile,.ef-cel,.ef-day,.ef-drop,.ef-subnav,.ef-subnav-item,.ef-menu,.ef-menu-item,.ef-banner,.ef-kpi,.ef-panel,.ef-signal,.ef-row,.ef-gantt-bar,.ef-block,.ef-check input,.ef-radio input,.ef-switch input,.ef-stepper .n{box-sizing:border-box}

/* Tekst-hulpklassen: gedempt, toon, bedrag */
.ef-mut{color:var(--ink-3)}
.ef-tone-ok{color:var(--ok)}.ef-tone-warn{color:var(--warn)}.ef-tone-crit{color:var(--crit)}
.ef-val{font:600 var(--fs-14) var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Panel: een vlak met kop (titel, teller, actie), inhoud en optioneel een voet */
.ef-panel{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);min-width:0}
.ef-panel-hd{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
.ef-panel-hd h3{margin:0;font:600 var(--fs-16)/1.3 var(--font-sans);letter-spacing:-.005em}
.ef-panel-meta{font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:0 9px}
.ef-panel-act{margin-left:auto;font:500 var(--fs-13) var(--font-sans);color:var(--accent);text-decoration:none}
.ef-panel-act:hover{text-decoration:underline}
.ef-panel-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.ef-panel-body{padding:12px 16px 16px}
.ef-panel--flush .ef-panel-body{padding:8px 0 0}
.ef-panel-ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px 14px;border-top:1px solid var(--line)}
.ef-panel-ft-l{margin-right:4px;font:500 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-panel-ft-end{margin-left:auto}

/* IcTile: icoon in een tegel; de toon volgt de status */
.ef-ic-tile{width:32px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;flex:none;background:var(--tb);color:var(--accent)}
.ef-ic-tile svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ef-ic-tile--ok{background:var(--ok-bg);color:var(--ok)}
.ef-ic-tile--warn{background:var(--warn-bg);color:var(--warn)}
.ef-ic-tile--crit{background:var(--crit-bg);color:var(--crit)}
.ef-ic-tile--new{background:var(--new-bg);color:var(--new)}

/* Kpi: kerncijfertegel met label, getal, regel eronder en rechts een ring, sparkline of icoon */
.ef-kpis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ef-kpi{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none;min-width:0}
.ef-kpi>div{min-width:0}
.ef-kpi-l{display:flex;align-items:center;gap:8px;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-3)}
.ef-kpi-v{margin-top:6px;font:600 var(--fs-26)/1.15 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ef-kpi-v small{font:400 var(--fs-14) var(--font-sans);letter-spacing:0;color:var(--ink-3)}
.ef-kpi-s{display:flex;align-items:center;gap:8px;margin-top:2px;font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-kpi-chev{flex:none;width:16px;height:16px;margin-top:3px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.ef-kpi:hover{border-color:var(--line-ctl)}
a.ef-kpi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-delta{border-radius:var(--radius-pill);padding:0 7px;font:500 var(--fs-12) var(--font-sans)}
.ef-delta--up{background:var(--ok-bg);color:var(--ok)}
.ef-delta--down{background:var(--crit-bg);color:var(--crit)}

/* Ring: voortgang als cirkel; --p is het percentage */
.ef-ring{--p:72;--c:var(--viz-ok);position:relative;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--viz-track) 0);display:grid;place-items:center;flex:none}
.ef-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ef-ring b{position:relative;font:600 var(--fs-12) var(--font-sans);font-variant-numeric:tabular-nums}
.ef-ring--lg{width:64px;height:64px}
.ef-ring--lg::before{inset:6px}
.ef-ring--lg b{font-size:var(--fs-14)}
.ef-ring--sm{width:36px;height:36px}
.ef-ring--sm::before{inset:4px}
.ef-ring--warn{--c:var(--viz-warn)}
.ef-ring--crit{--c:var(--viz-crit)}
.ef-ring--info{--c:var(--viz-info)}

/* Spark: lijntje met vlak, een inline svg met de klasse a op het vlak */
.ef-spark{display:block;width:96px;height:32px;fill:none;stroke:var(--viz-info);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-spark .a{fill:var(--viz-info);stroke:none;opacity:.14}

/* Legend: bolletje met label, eventueel met een waarde */
.ef-legend{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;font:400 var(--fs-13) var(--font-sans);color:var(--ink-2)}
.ef-legend span{display:inline-flex;align-items:center;gap:7px}
.ef-legend i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--viz-info));flex:none}
.ef-legend b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ef-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--viz-info));margin-right:8px;flex:none}
.ef-prog-stack+.ef-legend{margin-top:12px}

/* Avatar: initialen in een cirkel (of vierkant voor een relatie), met maten en persoonskleuren */
.ef-av{--bg:var(--accent-bg);--fg:var(--accent);--ring:transparent;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ring);display:grid;place-items:center;flex:none;font:600 var(--fs-12) var(--font-sans);background:var(--bg);color:var(--fg)}
.ef-av--sm{width:22px;height:22px}
.ef-av--lg{width:36px;height:36px;font-size:var(--fs-13)}
.ef-av--xl{width:48px;height:48px;font-size:var(--fs-16)}
.ef-av--p1{--bg:var(--cat-geo-bg);--fg:var(--ink);--ring:var(--cat-geo)}
.ef-av--p2{--bg:var(--cat-vastgoed-bg);--fg:var(--ink);--ring:var(--cat-vastgoed)}
.ef-av--p3{--bg:var(--cat-kunstwerk-bg);--fg:var(--ink);--ring:var(--cat-kunstwerk)}
.ef-av--p4{--bg:var(--cat-promotie-bg);--fg:var(--ink);--ring:var(--cat-promotie)}
.ef-av--p5{--bg:var(--cat-solar-bg);--fg:var(--ink);--ring:var(--cat-solar)}
.ef-av--p6{--bg:var(--cat-water-bg);--fg:var(--ink);--ring:var(--cat-water)}
.ef-av--sq{border-radius:var(--radius-sm)}
.ef-av-stack{display:inline-flex}
.ef-av-stack .ef-av{box-shadow:0 0 0 2px var(--surface)}
.ef-av-stack .ef-av+.ef-av{margin-left:-6px}

/* Progress: balk met toon; --lg, de verhouding-balk en de verbruiksregel (meter) */
.ef-prog{height:4px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:4px}
.ef-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-prog--lg{height:6px}
.ef-prog--ok i{background:var(--viz-ok)}
.ef-prog--warn i{background:var(--viz-warn)}
.ef-prog--crit i{background:var(--viz-crit)}
.ef-prog--muted i{background:var(--viz-muted)}
.ef-prog-stack{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--viz-track);gap:2px}
.ef-prog-stack--lg{height:10px}
.ef-prog-stack i{display:block;height:100%;background:var(--c,var(--viz-info))}
.ef-meter{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ef-meter-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:400 var(--fs-13) var(--font-sans);color:var(--ink-2)}
.ef-meter-v{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ef-meter--warn .ef-meter-v{color:var(--warn)}
.ef-meter--crit .ef-meter-v{color:var(--crit)}
.ef-meter .ef-prog{margin-top:0}

/* Row: rij in een lijst (voorop iets, titel met regel eronder, achteraan een pil of waarde) */
.ef-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.ef-row:first-child{border-top:0}
.ef-row>*{min-width:0}
a.ef-row:hover{background:var(--sunken)}
a.ef-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-row b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-row small{display:block;font:400 var(--fs-13)/1.35 var(--font-sans);color:var(--ink-3)}
.ef-row--inline small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-row--wrap b,.ef-row--wrap small{overflow:visible;text-overflow:clip;white-space:normal}
.ef-row b .ef-pill{margin-left:6px;vertical-align:1px}
.ef-row--inline{display:flex;gap:10px;padding:0;border-top:0}
.ef-row--inline>div{min-width:0}
.ef-row-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.ef-row-end--stack{flex-direction:column;align-items:flex-end;flex-wrap:nowrap;gap:4px}
.ef-row-end--start{flex-direction:column;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;gap:3px}
.ef-row-end small{font-size:var(--fs-12)}
.ef-row-flags{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px}

/* Signal: aandachtrij met toon-icoon, tekst, waarde of pil en een chevron */
.ef-signal{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.ef-signal:first-child{border-top:0}
.ef-signal>*{min-width:0}
a.ef-signal:hover{background:var(--sunken)}
a.ef-signal:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-signal b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-signal small{display:block;font:400 var(--fs-13)/1.35 var(--font-sans);color:var(--ink-3)}
.ef-signal--ok .ef-ic-tile{background:var(--ok-bg);color:var(--ok)}
.ef-signal--warn .ef-ic-tile{background:var(--warn-bg);color:var(--warn)}
.ef-signal--crit .ef-ic-tile{background:var(--crit-bg);color:var(--crit)}
.ef-signal--new .ef-ic-tile{background:var(--new-bg);color:var(--new)}
.ef-signal--ok .ef-val{color:var(--ok)}
.ef-signal--warn .ef-val{color:var(--warn)}
.ef-signal--crit .ef-val{color:var(--crit)}
.ef-signal-chev{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Stepper: stappen met nummer, vinkje of aantal; een stap mag een link zijn met een tweede regel */
.ef-stepper{display:flex;gap:0;align-items:center;list-style:none;margin:0;padding:0}
.ef-stepper li{display:flex;align-items:center;gap:8px;font:500 var(--fs-14) var(--font-sans);color:var(--ink-3)}
.ef-stepper li+li::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--line-2);margin:0 8px}
.ef-stepper .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 var(--fs-12) var(--font-sans);border:1.5px solid var(--line-ctl);color:var(--ink-2);flex:none}
.ef-stepper .n svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ef-stepper .c{font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ef-stepper .t{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.ef-stepper .t b{font-weight:500}
.ef-stepper li.is-done{color:var(--ink)}
.ef-stepper li.is-done .n{background:var(--action);border-color:var(--action);color:var(--on-action)}
.ef-stepper li.is-done+li::before{background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
.ef-stepper li.is-now{color:var(--ink)}
.ef-stepper li.is-now .n{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}
.ef-stepper a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 6px;border-radius:var(--radius-sm);color:var(--ink);text-decoration:none}
.ef-stepper a:hover{background:var(--sunken)}
.ef-stepper a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-stepper--fill{width:100%}
.ef-stepper--fill li+li{flex:1}
.ef-stepper--fill li+li::before{flex:1;width:auto;min-width:16px}
.ef-stepper--lg .n{width:34px;height:34px;font-size:var(--fs-16);background:var(--surface);color:var(--ink)}
@media (max-width:900px){
  .ef-stepper--fill{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ef-stepper--fill li{padding:8px 12px;border-radius:var(--radius-md);background:var(--sunken)}
  .ef-stepper--fill li+li{flex:none}
  .ef-stepper--fill li+li::before{display:none}
  .ef-stepper--fill a{width:100%;padding:0}
}

/* Banner: melding in de pagina, met toon en eventueel een actie */
.ef-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-md);background:var(--accent-bg);color:var(--ink);font:400 var(--fs-14)/1.45 var(--font-sans)}
.ef-banner svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-banner b{font-weight:600}
.ef-banner .ef-btn{margin-left:auto;flex:none}
.ef-banner--ok{background:var(--ok-bg)}
.ef-banner--ok svg{stroke:var(--ok)}
.ef-banner--warn{background:var(--warn-bg)}
.ef-banner--warn svg{stroke:var(--warn)}
.ef-banner--crit{background:var(--crit-bg)}
.ef-banner--crit svg{stroke:var(--crit)}

/* Menu: uitklapmenu bij een knop (werkomgeving, "…", versies) */
.ef-menu{display:flex;flex-direction:column;gap:1px;min-width:220px;padding:6px;background:var(--raised);border:1px solid var(--line-2);border-radius:var(--radius-md);box-shadow:var(--shadow-pop)}
.ef-menu-hd{padding:8px 10px 4px;font:500 var(--fs-12) var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ef-menu-item{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:500 var(--fs-14) var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.ef-menu-item:hover{background:var(--sunken)}
.ef-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-menu-item svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ef-menu-item.is-on{color:var(--accent)}
.ef-menu-item.is-on svg{stroke:var(--accent)}
.ef-menu-item--danger{color:var(--crit)}
.ef-menu-item--danger svg{stroke:var(--crit)}
.ef-menu-sep{height:1px;background:var(--line);margin:4px 2px}

/* Button: icoonknop en meldpunt */
.ef-btn--icon{width:34px;min-height:34px;padding:0;position:relative;background:var(--surface);color:var(--ink);border-color:var(--line-ctl)}
.ef-btn--icon svg{width:17px;height:17px}
.ef-badge-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--crit);box-shadow:0 0 0 2px var(--surface)}

/* Dl: definitielijst, label links en waarde rechts; --wide zet de waarde links bij het label */
.ef-dl{display:grid;grid-template-columns:minmax(120px,40%) 1fr;margin:0}
.ef-dl dt,.ef-dl dd{margin:0;padding:8px 0;border-top:1px solid var(--line)}
.ef-dl dt:first-of-type,.ef-dl dd:first-of-type{border-top:0}
.ef-dl dt{font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-dl dd{font:500 var(--fs-14) var(--font-sans);color:var(--ink);text-align:right}
.ef-dl--wide{grid-template-columns:minmax(160px,260px) 1fr}
.ef-dl--wide dd{text-align:left}

/* Grid: tabel van div-rijen op een kolomtemplate (--cols), met kop, groepskop en totaalrij */
.ef-grid{display:grid;grid-template-columns:var(--cols,1fr);column-gap:var(--gap,14px);font:400 var(--fs-14) var(--font-sans);color:var(--ink)}
.ef-grid>div{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;padding:8px 16px;border-top:1px solid var(--line)}
.ef-grid>.h{font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);border-top:0;border-bottom:1px solid var(--line-2)}
.ef-grid>.g{background:var(--sunken);font:600 var(--fs-13) var(--font-sans);border-top:1px solid var(--line-2)}
.ef-grid>.t{font-weight:600;border-top:1px solid var(--line-ctl)}
.ef-grid .r{text-align:right;font-variant-numeric:tabular-nums}
.ef-grid>div[id]{scroll-margin-top:16px}
.ef-grid-group{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ef-grid-group .ef-dot{margin-right:0}
.ef-grid-group b{font:600 var(--fs-13) var(--font-sans)}
.ef-grid-group-sub{font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-grid-group-sum{margin-left:auto;font:600 var(--fs-13) var(--font-sans);font-variant-numeric:tabular-nums}
.ef-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.ef-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-panel--flush>.ef-scroll>.ef-grid>div:last-child{border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* DateTile: datum als tegel (dag en nummer) */
.ef-datetile{width:44px;height:50px;border-radius:var(--radius-md);background:var(--sunken);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.ef-datetile small{font:500 var(--fs-12) var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.ef-datetile b{font:600 var(--fs-18)/1.1 var(--font-sans);font-variant-numeric:tabular-nums}

/* Check: selectievakje, keuzerondje en schakelaar met eigen vorm */
.ef-check,.ef-radio{display:inline-flex;align-items:center;gap:10px;min-height:32px;font:400 var(--fs-14) var(--font-sans);color:var(--ink);cursor:pointer}
.ef-check input,.ef-radio input{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;border:1.5px solid var(--line-ctl);border-radius:6px;background:var(--surface);display:grid;place-items:center;flex:none;cursor:pointer}
.ef-radio input{border-radius:50%}
.ef-check input:checked,.ef-radio input:checked{background:var(--action);border-color:var(--action)}
.ef-check input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--on-action);border-bottom:2px solid var(--on-action);transform:rotate(-45deg) translate(1px,-1px)}
.ef-radio input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-action)}
.ef-check input:focus-visible,.ef-radio input:focus-visible,.ef-switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-check input:disabled,.ef-radio input:disabled,.ef-switch input:disabled{opacity:.55;cursor:not-allowed}
.ef-switch{display:inline-flex;align-items:center;gap:10px;font:400 var(--fs-14) var(--font-sans);color:var(--ink);cursor:pointer}
.ef-switch input{appearance:none;-webkit-appearance:none;margin:0;position:relative;width:38px;height:22px;border-radius:99px;background:var(--line-ctl);cursor:pointer;transition:background .15s}
.ef-switch input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s}
.ef-switch input:checked{background:var(--action)}
.ef-switch input:checked::after{transform:translateX(16px);background:var(--on-action)}
@media (prefers-reduced-motion:reduce){.ef-switch input,.ef-switch input::after{transition:none}}

/* Search: zoekveld met een echt invoerveld, pilvorm; --kbd toont de toetsenhint */
.ef-search{display:flex;align-items:center;gap:8px;min-height:34px;min-width:240px;padding:0 12px 0 10px;border:1px solid var(--line-ctl);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-3);font:400 var(--fs-14) var(--font-sans);cursor:text}
.ef-search svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ef-search input{flex:1;min-width:0;min-height:32px;border:0;padding:0;background:transparent;color:var(--ink);font:inherit;outline:0}
.ef-search input::placeholder{color:var(--ink-3)}
.ef-search input::-webkit-search-cancel-button{display:none}
.ef-search:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.ef-search kbd{display:none;margin-left:auto;padding:0 5px;border:1px solid var(--line-2);border-radius:5px;font:500 var(--fs-12) var(--font-sans);color:var(--ink-3)}
.ef-search--kbd kbd{display:inline-block}

/* DateField: invoerveld met kalendericoon (datum of tijd) */
.ef-datefield{position:relative}
.ef-datefield .ef-input{padding-right:38px}
.ef-datefield svg{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ef-datefield input[type="date"]::-webkit-calendar-picker-indicator,.ef-datefield input[type="time"]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:38px;height:100%;opacity:0;cursor:pointer}

/* Log: gebeurtenissen onder elkaar met een lijn; de stip krijgt een toon of een eigen kleur (--c) */
.ef-log{list-style:none;margin:0;padding:0}
.ef-log li{position:relative;display:grid;grid-template-columns:20px 1fr auto;gap:10px;padding:0 0 14px}
.ef-log li>div{min-width:0}
.ef-log li::before{content:"";position:absolute;left:9px;top:20px;bottom:0;width:2px;background:var(--line-2);border-radius:2px}
.ef-log li:last-child::before{display:none}
.ef-log i{--c:var(--brand-blue);width:10px;height:10px;border-radius:50%;margin:5px 0 0 5px;background:var(--surface);border:2px solid var(--c)}
.ef-log .ef-log-dot--ok{--c:var(--viz-ok)}
.ef-log .ef-log-dot--warn{--c:var(--viz-warn)}
.ef-log .ef-log-dot--crit{--c:var(--viz-crit)}
.ef-log .ef-log-dot--new{--c:var(--brand-purple)}
.ef-log b{font:600 var(--fs-14)/1.3 var(--font-sans)}
.ef-log small{display:block;font:400 var(--fs-13) var(--font-sans);color:var(--ink-3)}
.ef-log time{font:400 var(--fs-12) var(--font-sans);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Subnav: verticale navigatie in een paneel (Instellingen); de zijbalk zelf houdt geen submenu's */
.ef-subnav{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg)}
.ef-subnav .ef-nav-grp{padding:8px 10px 4px}
.ef-subnav-item{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-2);font:500 var(--fs-14) var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.ef-subnav-item:hover{background:var(--sunken);color:var(--ink)}
.ef-subnav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-subnav-item[aria-current="page"]{background:var(--sunken);color:var(--ink)}
.ef-subnav-item[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--brand-blue),var(--brand-purple-line))}

/* Card: standen van de bordkaart, en een kaart die als geheel een link is */
.ef-card--stil{background:linear-gradient(var(--warn-bg),var(--warn-bg)),var(--surface)}
.ef-card--groot{border-left:3px solid var(--accent);padding-left:12px}
.ef-card--link{position:relative}
.ef-card--link>b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ef-card-link{color:inherit;text-decoration:none}
.ef-card-link::after{content:"";position:absolute;inset:0;border-radius:var(--radius-md)}
.ef-card-link:focus-visible{outline:none}
.ef-card-link:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.ef-card--link .ef-btn,.ef-card--link .ef-input{position:relative;z-index:1}

/* Chip: telling in een toon, en een chip die een link is */
a.ef-chip{text-decoration:none}
.ef-chip-count--crit,.ef-chip[aria-pressed="true"] .ef-chip-count--crit{color:var(--crit)}
.ef-chip-count--warn,.ef-chip[aria-pressed="true"] .ef-chip-count--warn{color:var(--warn)}

/* Segmented: pilvorm voor filters in een paginakop of filterbalk, en een uitgeschakelde keuze */
.ef-seg--pill,.ef-seg--pill button{border-radius:var(--radius-pill)}
.ef-seg button:disabled{opacity:.5;cursor:not-allowed}

/* FilterBar: rij met chips, keuzelijsten en zoekveld; een groepskop en een scheiding */
.ef-fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ef-fbar-grow{flex:1}
.ef-fbar-lb{margin-right:2px;font:500 var(--fs-12) var(--font-sans);color:var(--ink-3);white-space:nowrap}
.ef-fbar-sep{width:1px;align-self:stretch;min-height:22px;background:var(--line-2);margin:0 2px}

/* Table: sorteerbare kolomkop */
.ef-sort{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;min-height:24px}
.ef-sort:hover{color:var(--ink)}
.ef-sort:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
.ef-sort svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.ef-table th[aria-sort="ascending"] .ef-sort,.ef-table th[aria-sort="descending"] .ef-sort{color:var(--ink)}
.ef-table th[aria-sort] .ef-sort svg{opacity:1}
.ef-table th[aria-sort="ascending"] .ef-sort svg{transform:rotate(180deg)}
.ef-table th.ef-num .ef-sort{flex-direction:row-reverse}

/* Dialog: somregel links in de voet */
.ef-dlg-sum{margin-right:auto;display:flex;flex-direction:column;gap:1px;min-width:0;font:400 var(--fs-14) var(--font-sans);color:var(--ink-2)}
.ef-dlg-sum b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ef-dlg-sum small{font-size:var(--fs-12);color:var(--ink-3)}

/* Drop: bestandszone voor bijlagen; .is-over terwijl er iets boven hangt */
.ef-drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:16px;border:1.5px dashed var(--line-ctl);border-radius:var(--radius-md);background:var(--sunken);color:var(--ink-2);font:400 var(--fs-14)/1.4 var(--font-sans)}
.ef-drop b{color:var(--ink)}
.ef-drop small{font-size:var(--fs-13);color:var(--ink-3)}
.ef-drop svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ef-drop.is-over{border-color:var(--accent);background:var(--accent-bg);color:var(--ink)}

/* Gantt: planningsraster (weekkoppen, projectrijen met balken, capaciteit, personen). Werkgebiedkleur via ef-cat--*. */
/* Werkgebied-kleur (B05): zet --c (rand/inkt) en --cbg (vlak). Werkt op balk, legenda-item en pil. */
.ef-cat--geo{--c:var(--cat-geo);--cbg:var(--cat-geo-bg)}
.ef-cat--vastgoed{--c:var(--cat-vastgoed);--cbg:var(--cat-vastgoed-bg)}
.ef-cat--kunstwerk{--c:var(--cat-kunstwerk);--cbg:var(--cat-kunstwerk-bg)}
.ef-cat--promotie{--c:var(--cat-promotie);--cbg:var(--cat-promotie-bg)}
.ef-cat--solar{--c:var(--cat-solar);--cbg:var(--cat-solar-bg)}
.ef-cat--water{--c:var(--cat-water);--cbg:var(--cat-water-bg)}
.ef-cat--inspectie{--c:var(--cat-inspectie);--cbg:var(--cat-inspectie-bg)}
.ef-cat--onbekend{--c:var(--cat-onbekend);--cbg:var(--cat-onbekend-bg)}
.ef-pill--cat{background:var(--cbg);color:var(--ink)}
.ef-pill--cat::before{background:var(--c)}

/* Grip: pakpunt van iets dat je kunt slepen (kaart in de rail, balk, rij) */
.ef-grip{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--ink-3);cursor:grab;touch-action:none}
.ef-grip svg{width:14px;height:14px;fill:currentColor;stroke:none}

/* Gantt: weekkoppen, een rij per project met balken, sommatie-rij en persoonsrijen op dezelfde weekkolommen.
   --weeks = aantal weken, --days = dagen in beeld, --label = breedte van de linkerkolom (blijft staan bij zijwaarts scrollen). */
.ef-gantt{--label:220px;--weeks:8;--wk-min:72px;--days:calc(var(--weeks) * 7);--bar-h:30px;position:relative;min-width:calc(var(--label) + var(--weeks) * var(--wk-min));font:400 var(--fs-14) var(--font-sans);color:var(--ink)}
.ef-gantt-head,.ef-gantt-sum,.ef-gantt-person{display:grid;grid-template-columns:var(--label) repeat(var(--weeks),minmax(0,1fr))}
.ef-gantt-head{border-bottom:1px solid var(--line-2)}
.ef-gantt-lab{position:sticky;left:0;z-index:3;min-width:0;padding:9px 14px;background:var(--row-bg,var(--surface))}
.ef-gantt-corner{align-self:end;padding:0 14px 10px;font:500 var(--fs-12) var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

.ef-gantt-wk{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:9px 2px 6px;border-left:1px solid var(--line);color:var(--ink);text-decoration:none}
.ef-gantt-wk:hover{background:var(--sunken)}
.ef-gantt-wk:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-gantt-wk.is-now{background:var(--tb)}
.ef-gantt-wkn{font:600 var(--fs-12)/1.2 var(--font-sans);letter-spacing:.05em}
.ef-gantt-wkd{font:400 var(--fs-12)/1.3 var(--font-sans);color:var(--ink-3)}
.ef-gantt-wk .ef-pill{gap:4px;padding:0 7px;font-size:var(--fs-12)}
.ef-gantt-days{display:flex;width:100%;padding:0 1px;margin-top:1px}
.ef-gantt-days i{flex:1;text-align:center;font:500 var(--fs-12)/1.3 var(--font-sans);color:var(--ink-3)}
.ef-gantt-days i.we{font-weight:400;opacity:.7}

.ef-gantt-body{position:relative}
.ef-gantt-row{display:grid;grid-template-columns:var(--label) minmax(0,1fr);border-bottom:1px solid var(--line)}
.ef-gantt-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 var(--fs-14)/1.3 var(--font-sans);color:var(--ink);text-decoration:none}
.ef-gantt-name:hover{text-decoration:underline}
.ef-gantt-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.ef-gantt-lab small{display:flex;align-items:center;gap:6px;min-width:0;margin-top:1px;font:400 var(--fs-13)/1.4 var(--font-sans);color:var(--ink-3)}
.ef-gantt-lab small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-gantt-lab small svg{width:12px;height:12px;flex:none}
.ef-gantt-track{position:relative;padding:10px 0 8px;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(90deg,transparent 71.43%,var(--tn) 71.43%);background-size:calc(100% / var(--weeks)) 100%}
.ef-gantt-lane{position:relative;height:var(--bar-h)}

.ef-gantt-bar{position:absolute;top:0;left:calc(var(--s) / var(--days) * 100%);width:calc(var(--d) / var(--days) * 100%);min-width:10px;height:var(--bar-h);display:flex;align-items:center;gap:6px;padding:0 16px;border:0;border-left:3px solid var(--c);border-radius:var(--radius-sm);background:var(--cbg);color:var(--ink);font:500 var(--fs-13) var(--font-sans);white-space:nowrap;overflow:hidden;text-align:left;cursor:pointer}
.ef-gantt-bar:hover{box-shadow:0 0 0 2px var(--line-ctl)}
.ef-gantt-bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-gantt-bar b{font-weight:600;color:var(--ink)}
.ef-gantt-bar em{font-style:normal;color:var(--ink-2)}
.ef-gantt-bar>span.t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ef-gantt-bar>svg{width:14px;height:14px;flex:none;margin-left:auto;color:var(--ink-2)}
.ef-gantt-bar.is-sm{padding:0}
.ef-gantt-bar.is-cut-l{border-left-style:dashed;border-top-left-radius:0;border-bottom-left-radius:0}
.ef-gantt-bar.is-cut-r{border-right:3px dashed var(--c);border-top-right-radius:0;border-bottom-right-radius:0}
/* Trekzone aan de rand: in- of uitrekken. Midden van de balk = verplaatsen. */
.ef-gantt-rz{position:absolute;top:0;bottom:0;width:12px;cursor:ew-resize}
.ef-gantt-rz::after{content:"";position:absolute;top:9px;bottom:9px;left:4px;width:5px;background:repeating-linear-gradient(90deg,var(--ink-3) 0 1px,transparent 1px 3px);opacity:.6}
.ef-gantt-rz--l{left:0}
.ef-gantt-rz--r{right:0}
.ef-gantt-bar.is-sm .ef-gantt-rz{display:none}
.ef-gantt-ol{position:absolute;top:0;left:calc((var(--s) + var(--d)) / var(--days) * 100% + 8px);display:flex;align-items:center;gap:6px;height:var(--bar-h);font:500 var(--fs-13) var(--font-sans);color:var(--ink-2);white-space:nowrap;pointer-events:none}
.ef-gantt-ol::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.ef-gantt-ol b{font-weight:600;color:var(--ink)}
.ef-gantt-ol--l{left:auto;right:calc(100% - var(--s) / var(--days) * 100% + 8px)}
.ef-gantt-bar.is-short .t{display:none}
.ef-gantt-note{display:flex;align-items:flex-start;gap:6px;max-width:300px;margin:6px 0 0 min(calc(var(--s) / var(--days) * 100%),calc(100% - 300px));font:500 var(--fs-13)/1.35 var(--font-sans);color:var(--warn)}
.ef-gantt-note svg{width:14px;height:14px;flex:none;margin-top:1px}

/* Sleepstaat: oorspronkelijke plek (spoor), balk in de hand, droplijnen op de landingsdagen, live label */
.ef-gantt-bar.is-ghost{background:transparent;border:1.5px dashed var(--c);border-left-style:dashed;cursor:default;opacity:.8}
.ef-gantt-bar.is-drag{z-index:5;padding-left:10px;cursor:grabbing;box-shadow:0 0 0 2px var(--accent),var(--shadow-pop)}
.ef-gantt-bar.is-drag .ef-grip{cursor:grabbing;color:var(--ink-2)}
.ef-gantt-drop{position:absolute;top:0;bottom:0;left:calc(var(--s) / var(--days) * 100%);width:0;border-left:2px dashed var(--accent);z-index:4;pointer-events:none}
.ef-gantt-tip{position:absolute;z-index:6;top:6px;left:calc(var(--s) / var(--days) * 100% + 12px);padding:2px 8px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--raised);box-shadow:var(--shadow-pop);font:600 var(--fs-12)/1.5 var(--font-sans);white-space:nowrap;pointer-events:none}
.ef-gantt-row.is-dragging .ef-gantt-track{padding-top:40px}

.ef-gantt-today{position:absolute;top:0;bottom:0;left:calc(var(--label) + (100% - var(--label)) * var(--t));width:2px;margin-left:-1px;background:var(--accent);z-index:2;pointer-events:none}
.ef-gantt-today::before{content:"";position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Sommatie-rij (capaciteit) en cellen */
.ef-gantt-sum{--row-bg:var(--sunken);background:var(--sunken);border-bottom:1px solid var(--line)}
.ef-gantt-sum .ef-gantt-lab b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans)}
.ef-gantt-sum .ef-gantt-lab small{display:block}
.ef-gantt-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:9px 6px 8px;border-left:1px solid var(--line)}
.ef-gantt-cell.is-now{background:var(--tb)}
.ef-gantt-cell .ef-prog{width:100%;margin-top:0}
.ef-gantt-capv{font:400 var(--fs-13)/1.2 var(--font-sans);color:var(--ink-3);white-space:nowrap}
.ef-gantt-capv b{font-weight:600;color:var(--ink)}
.ef-gantt-capw{font:500 var(--fs-12)/1.2 var(--font-sans);white-space:nowrap}
.ef-gantt-capw.is-ok{color:var(--ok)}
.ef-gantt-capw.is-warn{color:var(--warn)}
.ef-gantt-capw.is-crit{color:var(--crit)}

/* Persoonsrij: vijf dagpunten per week (ma-vr). De vorm draagt de betekenis, niet alleen de kleur. */
.ef-gantt-sub{--row-bg:var(--sunken);background:var(--sunken);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.ef-gantt-sub .ef-gantt-lab b{display:block;font:600 var(--fs-14)/1.3 var(--font-sans)}
.ef-gantt-sub .ef-gantt-lab small{display:block}
.ef-gantt-person{border-bottom:1px solid var(--line)}
.ef-gantt-person .ef-gantt-lab{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px}
.ef-gantt-person .ef-gantt-lab b{display:block;font:500 var(--fs-14)/1.25 var(--font-sans)}
.ef-gantt-person .ef-gantt-lab small{display:block;margin:0;font-size:var(--fs-12);line-height:1.25}
.ef-gantt-person .ef-gantt-cell{flex-direction:row;justify-content:center;gap:3px;height:44px;padding:0}
.ef-gantt-dot{display:block;flex:none;width:11px;height:11px;border-radius:50%;box-sizing:border-box}
.ef-gantt-dot--a{background:var(--viz-ok)}
.ef-gantt-dot--e{background:var(--viz-info);box-shadow:0 0 0 2px var(--accent-bg)}
.ef-gantt-dot--p{background:linear-gradient(90deg,var(--viz-ok) 50%,transparent 50%);border:1.5px solid var(--viz-ok)}
.ef-gantt-dot--n{background:linear-gradient(135deg,transparent 40%,var(--viz-crit) 40% 60%,transparent 60%),var(--crit-bg);border:1.5px solid var(--viz-crit)}
.ef-gantt-dot--r{border:1.5px dashed var(--line-ctl)}
.ef-gantt-dot--l{background:var(--viz-warn)}
.ef-gantt-dot--q{border:1.5px dashed var(--viz-warn)}
.ef-gantt-dot--u{border:1.5px dotted var(--ink-3)}

@media (max-width:700px){
  .ef-gantt{--label:140px;--bar-h:44px}
  .ef-gantt-rz{display:none}
  .ef-gantt-lab{padding:9px 10px}
  .ef-gantt-person .ef-gantt-lab{padding:0 10px}
  .ef-gantt-person .ef-gantt-lab .ef-av{display:none}
}

/* Calendar: urenkalender met tijdas, blokken per urensoort (ef-cat--*), nu-lijn en dagstrip voor de telefoon */
/* ef-calendar (.ef-cal): weekkalender met tijdas, dagkolommen, blokken, nu-lijn en leeg vak. Samen met ef-block. */
.ef-cal{--n:5;--hour:62px;--gut:48px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;min-width:0}
.ef-cal[data-n="5"]{--n:5}.ef-cal[data-n="7"]{--n:7}
.ef-cal[data-n="5"] .is-we{display:none}
.ef-cal-hd,.ef-cal-bd{display:grid;grid-template-columns:var(--gut) repeat(var(--n),minmax(0,1fr))}
.ef-cal-hd{border-bottom:1px solid var(--line-2)}
.ef-cal-dh{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:8px 8px 8px 10px;min-height:76px;min-width:0;border-left:1px solid var(--line)}
.ef-cal-r1,.ef-cal-r2{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.ef-cal-r2{justify-content:flex-start}
.ef-cal-dn{display:flex;align-items:center;gap:6px;font:400 var(--fs-13) var(--font-sans);color:var(--ink-2);white-space:nowrap}
.ef-cal-dn b{color:var(--ink)}
.ef-cal-dd{border-radius:var(--radius-pill);padding:0 7px;line-height:20px}
.ef-cal-dh.is-today .ef-cal-dd{background:var(--action);color:var(--on-action);font-weight:500}
.ef-cal-tt{font:600 var(--fs-14) var(--font-sans);color:var(--ink)}
.ef-cal-tt.is-nul{font-weight:400;color:var(--ink-3)}
.ef-cal[data-n="7"] .ef-cal-dn .ef-cal-mnd{display:none}
.ef-cal[data-n="7"] .ef-cal-dh{padding-left:8px;padding-right:6px}
.ef-cal-gut{position:relative;height:calc(var(--hour)*12)}
.ef-cal-gut span{position:absolute;right:8px;font:500 var(--fs-12)/14px var(--font-sans);color:var(--ink-3);transform:translateY(-50%);font-variant-numeric:tabular-nums}
.ef-cal-gut span:first-child{transform:none;top:2px}
.ef-cal-gut span:nth-last-child(2){transform:translateY(-100%)}
.ef-cal-gut .ef-cal-nu{color:var(--accent);background:var(--surface);z-index:3}
.ef-cal-col{position:relative;height:calc(var(--hour)*12);border-left:1px solid var(--line);min-width:0;
  background-image:
    repeating-linear-gradient(to bottom,var(--line-2) 0,var(--line-2) 1px,transparent 1px,transparent var(--hour)),
    repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour)/2),var(--line) calc(var(--hour)/2),var(--line) calc(var(--hour)/2 + 1px),transparent calc(var(--hour)/2 + 1px),transparent var(--hour))}
.ef-cal-col.is-we{background-color:var(--tn)}
.ef-cal-col.is-today{background-color:var(--tb)}
.ef-cal-slot{position:absolute;left:0;right:0;z-index:1;height:calc(var(--hour)/2);border:0;border-radius:var(--radius-sm);background:transparent;padding:0;color:var(--accent);font:500 var(--fs-12) var(--font-sans);text-align:left;cursor:pointer}
.ef-cal-slot:hover,.ef-cal-slot:focus-visible{background:var(--accent-bg)}
.ef-cal-slot:hover::after,.ef-cal-slot:focus-visible::after{content:"+ " attr(data-t);position:absolute;left:8px;top:6px}
.ef-cal-slot:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ef-cal-leeg{position:absolute;left:6px;right:6px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:8px;border:1.5px dashed var(--line-ctl);border-radius:var(--radius-md);background:transparent;color:var(--ink-3);font:400 var(--fs-13)/1.35 var(--font-sans);cursor:pointer}
.ef-cal-leeg b{font-size:var(--fs-13);color:var(--ink-2)}
.ef-cal-leeg svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.ef-cal-leeg:hover{border-color:var(--accent);background:var(--accent-bg)}
.ef-cal-leeg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ef-cal-now{position:absolute;left:0;right:0;z-index:4;height:0;border-top:2px solid var(--accent);pointer-events:none}
.ef-cal-now::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
/* ef-block: een geboekt blok in de kalender, tint per urensoort uit de tokens */
.ef-block{position:absolute;left:3px;right:3px;z-index:2;display:flex;flex-direction:column;text-align:left;border:0;border-left:3px solid var(--c,var(--cat-geo));border-radius:var(--radius-sm);color:var(--ink);padding:3px 6px 3px 7px;overflow:hidden;cursor:pointer;font:400 var(--fs-12)/14px var(--font-sans);font-variant-numeric:tabular-nums;background-image:linear-gradient(var(--cbg,var(--cat-geo-bg)),var(--cbg,var(--cat-geo-bg))),linear-gradient(var(--surface),var(--surface))}
.ef-block:hover{box-shadow:inset 0 0 0 1px var(--c,var(--cat-geo))}
.ef-block:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ef-block.is-sel{box-shadow:inset 0 0 0 2px var(--accent)}
.ef-block-t{display:flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.ef-block-d{font-weight:500;color:var(--ink-2)}
.ef-block-p{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ef-block-n{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ef-block-n em{font-style:normal;font-weight:500;color:var(--ink)}
.ef-block-lock{display:none;width:12px;height:12px;margin-left:auto;flex:none;color:var(--ink-2)}
.ef-block.is-lock .ef-block-lock{display:block}
.ef-block.is-lock{cursor:not-allowed}
.ef-block--aanvraag{background-image:linear-gradient(var(--surface),var(--surface));border:1.5px dashed var(--c,var(--cat-geo));border-left-width:3px}
/* ef-day: dagpil voor de telefoon (dag, nummer, uren) */
.ef-days{display:none;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ef-day{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:68px;padding:8px 0 9px;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--ink-3);font:inherit;cursor:pointer}
.ef-day small{font:500 var(--fs-12) var(--font-sans)}
.ef-day b{font:600 var(--fs-18)/1.3 var(--font-sans);color:var(--ink)}
.ef-day i{font:400 var(--fs-12) var(--font-sans);font-style:normal;color:var(--ink-3)}
.ef-day.is-today{border-color:var(--line-2)}
.ef-day[aria-pressed="true"]{background:var(--action);border-color:var(--action)}
.ef-day[aria-pressed="true"] small,.ef-day[aria-pressed="true"] b,.ef-day[aria-pressed="true"] i{color:var(--on-action)}
.ef-day:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Cel: dagcel in een matrix van medewerkers bij dagen; zegt alleen of er die dag geboekt is */
.ef-cel{display:grid;grid-auto-flow:column;gap:2px;place-items:center;justify-self:center;width:44px;height:30px;border-radius:var(--radius-sm);border:1px solid transparent;font:500 var(--fs-13)/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.ef-cel small{font:600 var(--fs-12) var(--font-sans);color:var(--accent)}
.ef-cel--ok{background:var(--ok-bg);color:var(--ok)}
.ef-cel--deels{background:var(--ok-bg);color:var(--ok);border-color:var(--accent)}
.ef-cel--verlof{background:var(--accent-bg);color:var(--accent)}
.ef-cel--mist{background:var(--warn-bg);color:var(--warn);font-size:var(--fs-12)}
.ef-cel--komt{border:1px dashed var(--line-ctl)}
.ef-cel--vrij{color:var(--ink-3);opacity:.7}
.ef-cel--sm{width:auto;min-width:26px;height:20px;padding:0 5px;font-size:var(--fs-12)}

/* Telefoon (onder 700 px): tikvlakken van 44 px, kalender met één dag, gantt met smalle labelkolom */
@media (max-width:700px){
  .ef-btn--icon{min-width:44px;min-height:44px}
  .ef-check,.ef-radio,.ef-switch{min-height:44px}
  .ef-check input{width:24px;height:24px}
  .ef-search,.ef-search input{min-height:44px}
  .ef-search{min-width:0}
  .ef-chip,.ef-seg button{min-height:44px}
  .ef-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ef-kpi{padding:12px}
  .ef-kpi-v{font-size:var(--fs-22)}
  .ef-kpi-chev{display:none}
  .ef-banner{flex-wrap:wrap}
  .ef-dlg-sum{order:3;margin:0 0 4px}
  .ef-banner .ef-btn{margin-left:30px}
  .ef-fbar-sep{display:none}
  .ef-panel-hd{flex-wrap:wrap}
  .ef-panel-hd h3{flex:1 1 auto}
  .ef-panel-act{display:inline-flex;align-items:center;min-height:44px}
  .ef-dl{grid-template-columns:minmax(96px,34%) 1fr}
  .ef-dl--wide{grid-template-columns:minmax(120px,40%) 1fr}
  .ef-dl--wide dd{text-align:right}
  .ef-days{display:grid}
  .ef-cal[data-n]{--n:1;--gut:44px}
  .ef-cal-hd{display:none}
  .ef-cal .ef-cal-col:not(.is-sel){display:none}
  .ef-cal[data-n="5"] .ef-cal-col.is-we.is-sel{display:block}
}

/* ===== 1.4.0 · Portaal: schil, ruime dichtheid, aanmeldkaart, skeleton, tijdlijn ===== */

/* AppShell: de zijbalk staat op het canvas, het werkpaneel is een afgerond vlak ernaast. Boven 1024 px staat de zijbalk er altijd,
   daaronder is hij een lade (.is-open met een .ef-scrim ervoor) en komt er een bovenbalk. Onder 700 px komt er een tabbalk (.ef-tabbar). */
.ef-app{display:grid;grid-template-columns:var(--sidebar-portal) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--canvas);color:var(--ink)}
.ef-side{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;height:100dvh;padding:16px 12px;overflow:auto;background:var(--canvas)}
.ef-side .ef-nav{padding:0;background:transparent}
.ef-side-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 14px;color:var(--ink);text-decoration:none;font:600 var(--fs-16)/1 var(--font-sans);letter-spacing:-.01em}
.ef-side-brand img{width:34px;height:auto}
.ef-side-org{margin:0 0 6px;padding:10px 12px;border-radius:var(--radius-md);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-2);font-size:var(--fs-13);color:var(--ink-3)}
.ef-side-org b{display:block;margin-top:2px;font:600 var(--fs-14) var(--font-sans);color:var(--ink)}
.ef-side-foot{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:12px}
.ef-me{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:400 var(--fs-14) var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.ef-me[hidden]{display:none}
.ef-me:hover{background:var(--sunken)}
.ef-me small{display:block;font-size:var(--fs-12);color:var(--ink-3)}
.ef-main{min-width:0;margin:8px 8px 8px 0;overflow:clip;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.ef-topbar{display:none}
@media (max-width:1023px){
  .ef-app{grid-template-columns:minmax(0,1fr)}
  .ef-side{position:fixed;left:0;top:0;bottom:0;z-index:var(--z-drawer,40);height:auto;width:min(var(--sidebar-portal),88vw);visibility:hidden;transform:translateX(-100%);box-shadow:var(--shadow-pop);transition:transform .2s ease,visibility 0s linear .2s}
  .ef-side.is-open{visibility:visible;transform:none;transition:transform .2s ease}
  .ef-app>.ef-scrim{z-index:calc(var(--z-drawer,40) - 1)}
  .ef-main{margin:0;border:0;border-radius:0}
  .ef-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:var(--z-bar,5);padding:10px 16px;background:var(--canvas);border-bottom:1px solid var(--line)}
  .ef-topbar .ef-side-brand{padding:0}
  .ef-topbar .ef-btn--icon{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){.ef-side{transition:none}}

/* Ruime dichtheid: zet .ef-ruim op de wortel van het portaal. Ruimer dan de cockpit: tekst 16 px, tikvlakken van 44 px,
   titel 44 px, binnenmarge 32 px (README, Typografie en Layout). Geen tokenwijziging: de cockpit merkt hier niets van. */
.ef-ruim{font-size:var(--fs-16);line-height:1.55}
.ef-ruim .ef-nav-item{height:44px}
.ef-ruim .ef-nav-item--project{height:auto;min-height:44px;padding:6px 8px}
.ef-ruim .ef-nav-item--project img{width:48px;height:36px}
.ef-ruim .ef-btn:not(.ef-btn--sm):not(.ef-btn--icon):not(.ef-btn--touch):not(.ef-btn--ghost){min-height:46px;padding:0 20px;font-size:15px;border-radius:11px}
.ef-ruim .ef-btn--sm,.ef-ruim .ef-btn--ghost{min-height:44px}
.ef-ruim .ef-btn--icon{min-width:44px;min-height:44px}
.ef-ruim .ef-hd{padding:20px var(--space-8) 0}
.ef-ruim .ef-hd h1{margin-top:12px;font-size:44px;line-height:50px;text-wrap:balance}
.ef-ruim .ef-hd-meta{font-size:var(--fs-14)}
.ef-ruim .ef-hd-row{padding:18px 0 20px}
.ef-ruim .ef-tabs{gap:28px}
.ef-ruim .ef-hd .ef-tabs{margin-inline:calc(var(--space-8) * -1);padding-inline:var(--space-8)}
.ef-ruim .ef-tabs a:not([hidden]){display:inline-flex;align-items:center;min-height:44px;padding:12px 0 14px;font-size:15px}
.ef-ruim .ef-tabs a[aria-current="page"]{font-weight:600}
.ef-ruim .ef-input:not(.ef-input--sm){min-height:46px;font-size:var(--fs-16)}
.ef-ruim .ef-table th{padding-top:14px;padding-bottom:14px}
.ef-ruim .ef-table td{height:var(--row-portal)}
.ef-ruim .ef-product{padding:8px 14px 14px}
.ef-ruim .ef-product-ill{height:96px}
.ef-ruim .ef-product b{font-size:var(--fs-16)}
.ef-ruim .ef-product small{display:block;margin-top:2px;font-size:var(--fs-13)}
.ef-ruim .ef-facts div{padding:12px 14px}
@media (max-width:700px){
  .ef-ruim .ef-hd{padding:14px var(--space-4) 0}
  .ef-ruim .ef-hd h1{font-size:var(--fs-34);line-height:40px}
  .ef-ruim .ef-hd-row{flex-direction:column;align-items:stretch}
  .ef-ruim .ef-hd-acts{flex-direction:column}
  .ef-ruim .ef-hd-acts .ef-btn{width:100%}
  .ef-ruim .ef-tabs{gap:24px;overflow-x:auto;white-space:nowrap}
  .ef-ruim .ef-hd .ef-tabs{margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4)}
}

/* Pagina-inhoud in het paneel en sectiekop (portaal: 19 px; de cockpit gebruikt een Panel-kop van 16 px) */
.ef-page{display:grid;gap:var(--space-8);padding:28px var(--space-8) 40px}
.ef-page>*{min-width:0}
.ef-sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.ef-sec-hd h2{margin:0;font:600 19px/1.3 var(--font-sans);letter-spacing:-.01em}
@media (max-width:700px){.ef-page{gap:28px;padding:20px var(--space-4) 96px}}

/* Auth: aanmelden, tweede stap, welkom. Een kaart op het canvas met de zachte gloed; geen zijbalk. */
.ef-auth{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px var(--space-4);overflow:hidden;background:var(--canvas);color:var(--ink)}
.ef-auth::before{content:"";position:absolute;left:-10%;top:-20%;width:60%;height:70%;background:radial-gradient(closest-side,var(--glow1),transparent);pointer-events:none}
.ef-auth::after{content:"";position:absolute;right:-10%;bottom:-25%;width:55%;height:70%;background:radial-gradient(closest-side,var(--glow2),transparent);pointer-events:none}
.ef-auth-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}
.ef-auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px;font:600 var(--fs-18)/1 var(--font-sans);letter-spacing:-.01em}
.ef-auth-brand img{width:40px;height:auto}
.ef-auth-card{width:100%;max-width:440px;padding:36px 36px 32px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.ef-auth-card .ef-sig{margin-bottom:22px}
.ef-auth-card h1{margin:0 0 6px;font:600 var(--fs-26)/1.2 var(--font-sans);letter-spacing:-.02em}
.ef-auth-card>p{margin:0 0 22px;color:var(--ink-2)}
.ef-auth-card form{display:grid;gap:var(--space-4)}
.ef-auth-card .ef-btn{width:100%}
.ef-auth-foot{margin-top:18px;font-size:var(--fs-13);color:var(--ink-3);text-align:center}
.ef-auth-foot a{color:var(--accent)}
@media (max-width:700px){.ef-auth-card{padding:28px 20px 24px}}

/* Skeleton: een plek die nog laadt. Alleen opacity beweegt. */
.ef-skel{display:block;min-height:1em;border-radius:var(--radius-sm);background:var(--line-2);animation:ef-skel 1.4s ease-in-out infinite}
.ef-skel--titel{width:220px;max-width:100%;height:44px}
.ef-skel--regel{height:14px}
.ef-skel--tegel{height:180px;border-radius:var(--radius-lg)}
@keyframes ef-skel{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ef-skel{animation:none}}

/* Tijdlijn met twee vormen: horizontaal (ef-tl, tot zes punten, vanaf 700 px) en verticaal (ef-log). Een wrapper kiest. */
.ef-tl-wrap .ef-tl{margin:44px 56px 8px}
.ef-tl-wrap .ef-tl-list{display:none}
.ef-tl-wrap--lijst .ef-tl-wide{display:none}
.ef-tl-wrap--lijst .ef-tl-list{display:block}
@media (max-width:700px){
  .ef-tl-wrap .ef-tl-wide{display:none}
  .ef-tl-wrap .ef-tl-list{display:block}
}


.ef-crumb a{color:inherit;text-decoration:none}
.ef-crumb a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:700px){.ef-crumb a:not([hidden]){display:inline-flex;align-items:center;min-height:44px}}

/* Tabbalk voor de telefoon (variant H, besluit Remco 12-10-2026): één vorm voor cockpit en portaal. Opaak vlak, actief = dunne verloopstreep
   boven, label 600 (inactief 500) en icoon in accent. De hoogte volgt de dichtheid: 44 px compact, 52 px in ef-ruim. Een bestemming is een a of een button. */
.ef-tabbar{--tb-h:44px;display:none}
.ef-ruim .ef-tabbar{--tb-h:52px}
@media (max-width:700px){
  .ef-tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar,5);padding:0 4px env(safe-area-inset-bottom,0px);background:var(--panel);border-top:1px solid var(--line-2)}
  .ef-tabbar :is(a,button):not([hidden]){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tb-h);border:0;border-radius:0;background:transparent;color:var(--ink-3);font:500 var(--fs-12)/1.1 var(--font-sans);text-decoration:none;cursor:pointer}
  .ef-tabbar :is(a,button) svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .ef-tabbar :is(a,button)[aria-current="page"]{color:var(--ink);font-weight:600}
  .ef-tabbar :is(a,button)[aria-current="page"] svg{color:var(--accent)}
  .ef-tabbar :is(a,button)[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple-line))}
}

/* Klikvlak van minstens 44 px in ef-ruim (uitvoering C, besluit Remco 12-10-2026): de zichtbare maat blijft, het klikvlak wordt groter met een
   onzichtbare ::after. Menu-items en gestapelde vinkjes staan tegen elkaar en worden zichtbaar 44 px (anders overlappen hun vlakken).
   Het echte klikvlak meet tools/klikvlak.py met elementFromPoint; deze vlakken breken stil. */
.ef-ruim :is(.ef-chip,.ef-seg button,.ef-crumb a,.ef-check,.ef-radio,.ef-switch){position:relative}
.ef-ruim :is(.ef-chip,.ef-seg button,.ef-crumb a,.ef-check,.ef-radio,.ef-switch)::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.ef-ruim .ef-check.ef-check--solo::after{left:-12px;right:-12px}
.ef-ruim .ef-search{position:relative}
.ef-ruim .ef-search::before,.ef-ruim .ef-search::after{content:"";position:absolute;left:-1px;right:-1px;height:6px}
.ef-ruim .ef-search::before{top:-6px}
.ef-ruim .ef-search::after{bottom:-6px}
.ef-ruim .ef-dlg-x::after{content:"";position:absolute;inset:-4px}
.ef-ruim .ef-crumb{position:relative;z-index:1}
.ef-ruim .ef-menu-item{min-height:44px}
.ef-checks{display:flex;flex-direction:column;gap:var(--space-1)}
.ef-ruim .ef-checks{gap:12px}
.ef-ruim .ef-fbar{row-gap:12px}

/* Een container met het attribuut hidden blijft verborgen, ook waar zijn eigen regel display zet (een tabbalk die op het aanmeldscherm niet hoort). */
.ef-tabbar[hidden],.ef-topbar[hidden],.ef-side[hidden],.ef-checks[hidden]{display:none}