/* Cockpit — stijl naar het voorbeeld van 15-10: donkere zijbalk met bedrijfskaart en groen accent, lichte werkvlakken, blauw voor voortgang en links. */
:root{
  --side:#15181c; --side-fg:#d7dde3; --side-muted:#8a949e; --side-hover:#1f2428; --side-line:#262c32;
  --green:#22a35b; --green-bg:#153324; --green-ink:#5ee09a;
  --bg:#f4f6f8; --surface:#ffffff; --fg:#1b2026; --muted:#6b7682; --line:#e4e8ec;
  --accent:#2563eb; --accent-ink:#ffffff; --soft:#eaf1fe;
  --ok:#1a8a4a; --ok-bg:#e6f6ec; --warn:#a05a0c; --warn-bg:#fdf1dc; --bad:#c0362c; --bad-bg:#fbe5e2; --grey:#6b7682; --grey-bg:#eceff2;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14.5px/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100%}
.side{background:var(--side);color:var(--side-fg);padding:18px 12px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;height:100vh}
.side svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.logo{font-weight:800;letter-spacing:.16em;font-size:15px;color:#fff;text-decoration:none;padding:4px 10px 8px}
.bselect{position:relative}
.bselect summary{list-style:none;display:flex;align-items:center;gap:10px;background:var(--green-bg);border:1px solid #1f4a33;border-radius:10px;padding:9px 10px;cursor:pointer}
.bselect summary::-webkit-details-marker{display:none}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.avatar.klein{width:22px;height:22px;font-size:11px}
.bnaam{display:flex;flex-direction:column;min-width:0;flex:1}
.bnaam b{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnaam small{font-size:11.5px;color:var(--side-muted)}
.chev{font-size:10px;color:var(--side-muted);letter-spacing:-3px}
.bmenu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#1d2227;border:1px solid var(--side-line);border-radius:10px;padding:6px;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.bmenu a{display:flex;align-items:center;gap:10px;color:var(--side-fg);text-decoration:none;padding:8px 10px;border-radius:8px;font-size:14px}
.bmenu a:hover{background:var(--side-hover)}
.bmenu a.actief{background:var(--green-bg);color:var(--green-ink)}
.zoek{display:flex;align-items:center;gap:8px;background:#1d2227;border:1px solid var(--side-line);border-radius:9px;padding:7px 10px;color:var(--side-muted)}
.zoek input{flex:1;background:transparent;border:0;color:var(--side-fg);font-size:14px;outline:none;min-width:0}
.zoek kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--side-line);border-radius:5px;padding:1px 5px;color:var(--side-muted)}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:11px;color:var(--side-fg);text-decoration:none;padding:9px 10px;border-radius:9px;font-size:14.5px}
.nav a:hover{background:var(--side-hover)}
.nav a.actief{background:var(--green-bg);color:var(--green-ink);font-weight:600}
.nav .scheiding{height:1px;background:var(--side-line);margin:8px 6px}
.chip{margin-left:auto;font-size:10.5px;padding:1px 7px;border-radius:999px;font-family:var(--mono);line-height:1.6}
.chip.gepland{background:#262c32;color:var(--side-muted)}.chip.bouw{background:#3a3030;color:#f0d9c8}.chip.test{background:#4a3c10;color:#ffe08a}.chip.live{background:var(--green-bg);color:var(--green-ink)}
.side .onder{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--side-muted);font-size:14px;padding:8px 10px}
.side .onder .mono{margin-left:auto;font-size:11px}
.rechts{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--line)}
.kruimel{font-size:14px;color:var(--fg);font-weight:500}
.knoppen{display:flex;gap:10px;align-items:center}
.rond{position:relative;width:36px;height:36px;border-radius:50%;background:#f0f2f5;color:#444c56;display:grid;place-items:center;text-decoration:none;font-weight:600}
.rond svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rond.blauw{background:var(--accent);color:#fff}
.rond.avatar-knop{background:#1b2026;color:#fff}
.rond .dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:#f5a623;border:2px solid #f0f2f5}
main{padding:26px 32px 64px;min-width:0}
.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
h1{font-size:22px;margin:0;font-weight:600}
h2{font-size:16px;margin:0 0 10px;font-weight:600}
.sub{color:var(--muted);font-size:13px;font-weight:400}
.focus,.card,.kolom{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.tile .l{font-size:12px;color:var(--muted)}
.tile .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
th{font-size:12px;color:var(--muted);font-weight:600}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.st{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.st.ok{background:var(--ok-bg);color:var(--ok)}.st.let{background:var(--warn-bg);color:var(--warn)}.st.fout,.st.achter{background:var(--bad-bg);color:var(--bad)}.st.geen,.st.eigen{background:var(--grey-bg);color:var(--grey)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:7px 14px;font-size:14px;cursor:pointer;text-decoration:none}
.btn.licht{background:var(--soft);color:var(--accent)}
.btn.klein{padding:4px 10px;font-size:13px}
ul.lijst{margin:6px 0;padding-left:20px}ul.lijst li{margin:4px 0}
.muted{color:var(--muted)}.mono{font-family:var(--mono);font-size:13px}
form.inline{display:inline}
.login{max-width:360px;margin:12vh auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px}
.login .logo{color:var(--fg);padding:0}
.login label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
.login input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.fout{color:var(--bad);font-size:13px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0}
.blok{border-left:3px solid var(--line);padding:4px 0 4px 14px;margin:10px 0}.blok.ok{border-color:var(--ok)}.blok.let{border-color:var(--warn)}.blok.fout{border-color:var(--bad)}
/* taken */
.kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:0 0 16px}
.kolommen .kolom{margin:0}
.sectie{margin:10px 0 14px}.sectie-kop{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.taak{display:grid;grid-template-columns:26px 1fr 22px;gap:8px;align-items:start;padding:7px 0;border-bottom:1px solid var(--line)}.taak:last-child{border-bottom:0}
.taak .vink{width:20px;height:20px;border:2px solid var(--green);border-radius:6px;background:var(--surface);cursor:pointer;color:var(--green);font-size:13px;line-height:1;padding:0;margin-top:2px}
.taak.gedaan .vink{background:var(--green);color:#fff}.taak.gedaan .titel{color:var(--muted);text-decoration:line-through}.taak.te-laat .titel{color:var(--bad)}
.taak .tekst{min-width:0}.taak .titel{font-size:14px}.taak .meta{display:block;font-size:12px;color:var(--muted)}
.taak .meer summary{cursor:pointer;color:var(--muted);list-style:none;font-size:16px;line-height:1}.taak .meer{grid-column:3}.taak .meer[open]{grid-column:1 / -1}
.taak.groot{grid-template-columns:30px 1fr 22px;padding:9px 0}.taak.groot .vink{width:24px;height:24px;border-radius:7px;font-size:15px}.taak.groot .titel{font-size:15.5px}
.bewerk,.nieuw{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.bewerk input,.bewerk select,.nieuw input,.nieuw select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;background:var(--surface);color:var(--fg)}
.nieuw.groot{margin:0 0 16px}.nieuw.groot input[name=titel]{flex:1;min-width:240px;font-size:15px;padding:9px 12px}
.opties summary{cursor:pointer;color:var(--muted);font-size:13px}.opties{flex-basis:100%}.opties select,.opties input{margin:6px 6px 0 0}
.leeg{font-size:13px;margin:4px 0}
details.card summary{cursor:pointer;font-weight:600}
.letop{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.45}.letop:last-child{border-bottom:0}
.letop .bron{color:var(--muted);font-size:12.5px;text-decoration:none;padding-top:2px}.letop.klein{font-size:13.5px;color:var(--muted)}
.meerlijst{margin-top:10px}.meerlijst summary{cursor:pointer;color:var(--accent);font-size:13.5px}
.regel-status{font-size:13px;color:var(--muted);margin:8px 2px}.regel-status a{color:var(--muted)}
.tabs{display:flex;gap:4px}.tabs a{text-decoration:none;color:var(--muted);padding:6px 12px;border-radius:999px;font-size:14px}.tabs a.actief{background:var(--accent);color:#fff}.tabs .tel{font-family:var(--mono);font-size:12px;opacity:.8}
.md h1,.md h2,.md h3{margin:18px 0 6px;font-size:16px}.md h1{font-size:20px}.md p,.md li{font-size:14.5px}.md table{font-size:13px;margin:8px 0}.md code{font-family:var(--mono);font-size:12.5px;background:var(--soft);padding:1px 4px;border-radius:4px}.md pre{overflow-x:auto;font-size:12.5px}.md blockquote{border-left:3px solid var(--line);margin:8px 0;padding:2px 12px;color:var(--muted)}
.letop .md p{margin:0}
.funnel{display:grid;gap:8px}.row{display:grid;grid-template-columns:150px 1fr 60px;align-items:center;gap:12px;font-size:14px}.bar{height:18px;background:var(--accent);border-radius:4px;min-width:4px}.bar.light{background:var(--soft);outline:1px solid var(--line)}
.voortgang{height:8px;background:#e6eaef;border-radius:999px;overflow:hidden;margin:6px 0 2px}.voortgang i{display:block;height:100%;background:var(--accent);border-radius:999px}
@media (max-width:760px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}main{padding:18px 16px 48px}.topbar{padding:0 16px}.letop{grid-template-columns:1fr;gap:2px}.row{grid-template-columns:110px 1fr 48px;font-size:13px}}
/* modules op maat */
.neg{color:var(--bad)}
.geval{border-bottom:1px solid var(--line);padding:12px 0}.geval:last-child{border-bottom:0}
.focus.geval{border-bottom:1px solid var(--line);padding:16px 20px}
.geval .kop{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.bericht{background:#f3f7f4;border:1px solid #d6e9dc;border-radius:10px;padding:10px 12px;font-size:14px;margin:8px 0;white-space:pre-wrap}
.controle{font-size:13.5px;background:#f6f8fa;border-radius:8px;padding:8px 10px;margin:6px 0}
.acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.acties input{padding:5px 8px;border:1px solid var(--line);border-radius:7px}
.formulier{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px;margin-top:10px}
.formulier label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.formulier input,.formulier select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--fg);background:var(--surface)}
.formulier .breed{grid-column:1/-1}
details.focus>summary{cursor:pointer;list-style:none}details.focus>summary::-webkit-details-marker{display:none}
.trechter-kop{display:flex;gap:10px;align-items:center;margin:10px 0 6px;text-transform:capitalize}
.bord{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.kolom-bord{background:#eef1f4;border-radius:12px;padding:10px;min-width:150px}
.kolom-kop{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;justify-content:space-between}
.kolom-kop .tel{font-family:var(--mono)}
.kaartje{display:block;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:6px;text-decoration:none;color:var(--fg);font-size:13px}
.kaartje b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kaartje span{color:var(--muted);font-size:11.5px}
.stappenrij{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.stapje{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--muted)}
.stapje.klaar{background:var(--ok-bg);border-color:#bfe3cc;color:var(--ok)}
.trap{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:6px 0 10px}
.trede{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:2px;background:var(--surface)}
.trede b{font-size:18px}.trede span{font-size:12.5px;color:var(--muted)}.trede small{font-size:11px;color:var(--muted)}
.trede.klaar{opacity:.55}.trede.nu{border-color:var(--accent);box-shadow:0 0 0 2px var(--soft)}
.gids{display:grid;grid-template-columns:230px 1fr;gap:18px;margin-bottom:16px}
.fasen{display:flex;flex-direction:column;gap:4px}
.fasen a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--fg);font-size:14.5px}
.fasen a small{display:block;color:var(--muted);font-size:12px}
.fasen a.actief{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.08);color:var(--accent);font-weight:600}
.ring{width:22px;height:22px;border-radius:50%;flex:none;background:conic-gradient(var(--accent) calc(var(--p)*1%), #dfe4ea 0);position:relative}
.ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg)}
.fasen a.actief .ring::after{background:var(--surface)}
.ring.vol{background:var(--ok)}
.stappen{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stap{border-bottom:1px solid var(--line);padding:14px 18px}.stap:last-child{border-bottom:0}
.stap summary{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none}.stap summary::-webkit-details-marker{display:none}
.stap[open]{background:#f8fafc}
.stap-tekst{flex:1;min-width:0}.stap-tekst b{display:block;font-weight:500;font-size:15px}.stap.klaar .stap-tekst b{color:var(--muted)}
.stap-tekst small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.vinkrond{width:22px;height:22px;border-radius:50%;border:2px solid #cfd6de;display:grid;place-items:center;font-size:12px;color:#fff;flex:none}
.vinkrond.klaar{background:var(--ok);border-color:var(--ok)}.vinkrond.bezig{border-color:var(--warn)}.vinkrond.wacht{border-color:var(--bad)}
@media (max-width:760px){.gids{grid-template-columns:1fr}.trap{grid-template-columns:repeat(2,1fr)}.bord{grid-template-columns:repeat(6,160px)}}
.tegel{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--fg)}.tegel:hover{border-color:var(--accent)}
.tegel b{font-size:24px}.tegel .l{font-size:12px;color:var(--muted)}
.kolommen .tegel{padding:14px 16px}

/* schermbreed: op brede schermen twee kolommen op overzichtspagina's */
main.twee{display:grid;grid-template-columns:1fr;gap:16px;align-content:start}
main.twee>*{margin:0;min-width:0}
@media (min-width:1280px){
  main.twee{grid-template-columns:1fr 1fr;align-items:start}
  main.twee>.top,main.twee>.tiles,main.twee>.kolommen,main.twee>.regel-status,main.twee>p,main.twee>nav,main.twee>.gids,main.twee>.bord,main.twee>.vol{grid-column:1/-1}
}
.tiles{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* LodyFair-overzicht */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.kpi{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px 14px;text-decoration:none;color:var(--fg);overflow:hidden;min-height:150px;transition:border-color .15s, box-shadow .15s}
.kpi:hover{border-color:#c9d3df;box-shadow:0 4px 14px rgba(20,30,40,.06)}
.kpi-label{font-size:12.5px;color:var(--muted);font-weight:500}
.kpi-waarde{font-size:30px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi-voet{margin-top:auto;font-size:12px;color:var(--muted)}
.kpi-sub{font-size:13px;color:var(--muted)}
.kpi.status.goed{background:linear-gradient(160deg,#e9f8ef 0%,#ffffff 70%);border-color:#c8ebd5}
.kpi.status.goed .kpi-waarde{color:var(--ok)}
.kpi.status.slecht{background:linear-gradient(160deg,#fde8e5 0%,#ffffff 70%);border-color:#f3c5bf}
.kpi.status.slecht .kpi-waarde{color:var(--bad)}
.kpi-icoon{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.kpi-icoon svg{width:18px;height:18px;fill:none;stroke:var(--ok);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chip-delta{align-self:flex-start;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.chip-delta.op{background:var(--ok-bg);color:var(--ok)}.chip-delta.neer{background:var(--bad-bg);color:var(--bad)}.chip-delta.neutraal{background:var(--grey-bg);color:var(--grey)}
.spark{width:100%;height:38px;margin-top:6px;overflow:visible}
.spark polyline{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.spark.rood polyline{stroke:var(--bad)}
.meter{position:relative;height:10px;border-radius:999px;background:#e8edf2;margin:12px 0 4px;overflow:visible}
.meter i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.meter b{position:absolute;top:-4px;width:2px;height:18px;background:#1b2026;border-radius:2px}
.beslis{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg);font-size:14.5px}
.beslis:last-child{border-bottom:0}
details.beslis{display:block}
details.beslis summary{display:flex;gap:12px;align-items:center;cursor:pointer;list-style:none}
details.beslis summary::-webkit-details-marker{display:none}
details.beslis p{margin:8px 0 2px 104px;font-size:14px;color:var(--muted)}
details.beslis[open] .pijl{transform:rotate(180deg)}
.beslis>span:nth-child(2),details.beslis summary>span:nth-child(2){flex:1;min-width:0}
.pijl{color:var(--muted);font-size:16px;transition:transform .15s}
.tag{flex:none;width:92px;text-align:center;font-size:11.5px;font-weight:600;padding:3px 0;border-radius:999px}
.tag.paars{background:#efe9fe;color:#6d3fd6}.tag.oranje{background:#fff0e0;color:#b4570b}.tag.blauw{background:#e6efff;color:#2459c9}.tag.groen{background:var(--ok-bg);color:var(--ok)}.tag.grijs{background:var(--grey-bg);color:var(--grey)}
.staven{display:block;max-height:180px}
.staven rect{fill:#c7d8fb}.staven rect.laatste{fill:var(--accent)}
.staven text{font-size:10px;fill:var(--muted)}
.staven .gemlijn{stroke:#1b2026;stroke-width:1;stroke-dasharray:4 4;opacity:.45}
.trechter2{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.tstap{flex:1;min-width:100px;background:#f6f8fb;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tstap b{font-size:22px}.tnaam{font-size:12px;color:var(--muted)}
.tconv{font-size:12.5px;font-weight:600;color:var(--ok)}.tconv small{font-weight:400;color:var(--muted)}
.tstap.lek{background:#fff4f2;border-color:#f3c5bf}.tstap.lek .tconv{color:var(--bad)}
.tpijl{align-self:center;color:var(--muted);font-size:18px}
.modkaarten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.modkaart{display:flex;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--fg);transition:border-color .15s, transform .15s}
.modkaart:hover{border-color:#c9d3df;transform:translateY(-1px)}
.modkaart b{font-size:26px;line-height:1.15}
.mk-l{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:8px}.mk-s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-icoon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center}
.mk-icoon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mk-icoon.blauw{background:#e6efff;color:#2459c9}.mk-icoon.paars{background:#efe9fe;color:#6d3fd6}.mk-icoon.oranje{background:#fff0e0;color:#b4570b}.mk-icoon.groen{background:var(--ok-bg);color:var(--ok)}.mk-icoon.roze{background:#fde7f1;color:#b8336a}
@media (max-width:1280px){.kpis,.modkaarten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.kpis,.modkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}details.beslis p{margin-left:0}}

/* DirectScale-overzicht */
.legenda{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--accent);vertical-align:-1px;margin:0 3px 0 8px}.legenda.licht{background:#c7d8fb}
.klantrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.klantkaart{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--fg)}
.klantkaart:hover{border-color:#c9d3df}
.klantkaart .mk-icoon{font-weight:700;font-size:15px}
.kk-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.kk-tekst .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk-tekst .voortgang{margin:4px 0 0}.kk-pct{font-weight:700;font-size:18px}

/* bouw-overzicht */
.ringgroot{width:84px;height:84px;border-radius:50%;margin:6px 0 4px;background:conic-gradient(var(--accent) calc(var(--p)*1%), #e3e8ee 0);display:grid;place-items:center;position:relative}
.ringgroot::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.kpi.status.goed .ringgroot::before,.kpi.status.slecht .ringgroot::before{background:#fff}
.ringgroot b{position:relative;font-size:20px}
.kpis:has(.ringgroot){grid-template-columns:repeat(4,minmax(0,1fr))}
.tijdlijn{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative;overflow-x:auto}
.tijdlijn::before{content:"";position:absolute;left:5%;right:5%;top:22px;height:2px;background:#e3e8ee}
.fase{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--fg);padding:10px 6px;min-width:96px;text-align:center}
.fase .ring{width:26px;height:26px;box-shadow:0 0 0 4px var(--surface)}
.fase .ring::after{background:var(--surface)}
.fase b{font-size:13.5px;font-weight:600}.fase small{font-size:12px;color:var(--muted)}
.fase:hover b{color:var(--accent)}
.fase.klaar b{color:var(--ok)}
@media (max-width:1280px){.kpis:has(.ringgroot){grid-template-columns:repeat(2,minmax(0,1fr))}}
.tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px;padding-right:6px}

/* team-overzicht */
.ringgroot.klein{width:70px;height:70px}.ringgroot.klein b{font-size:16px}
.mensen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.persoon{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.p-kop{display:flex;gap:12px;align-items:center}.p-kop b{display:block;font-size:16px}
.persoon .voortgang{margin:4px 0 6px}
.nieuw.snel{margin-top:auto;padding-top:8px}.nieuw.snel input[name=titel]{flex:1;min-width:0}
.mk-icoon.grijs{background:var(--grey-bg);color:var(--grey)}.mk-icoon.klein{width:28px;height:28px;border-radius:9px;font-size:12px;font-weight:700}
.activiteit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.act{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;min-width:0}
.act-tekst{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md.kort{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.mensen{grid-template-columns:1fr}.activiteit{grid-template-columns:1fr}}

/* logo's per bedrijf */
.logo-tegel{width:32px;height:32px;border-radius:9px;flex:none;object-fit:cover;background:#fff}
.bselect summary.breed{padding:8px 10px}
.logo-strook{flex:1;background:#fff;border-radius:8px;height:38px;display:flex;align-items:center;justify-content:center;padding:0 12px}
.logo-strook img{max-width:100%;max-height:20px}
.logo-mini{width:22px;height:22px;border-radius:6px;flex:none;background:#fff}
.logo-mini-breed{background:#fff;border-radius:6px;height:24px;padding:0 8px;display:flex;align-items:center}
.logo-mini-breed img{height:11px}
h1.met-logo{display:flex;align-items:center;gap:12px}
.kop-logo{width:36px;height:36px;border-radius:10px}
.kop-logo-breed{height:26px;width:auto}

/* ===== modulepagina's in dashboardstijl ===== */
h1.met-icoon{display:flex;align-items:center;gap:12px}
.kop-icoon{width:38px;height:38px;border-radius:11px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.kop-icoon svg{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.top{align-items:center}
/* tegels → kpi-kaarten */
.tiles{gap:14px}
.tile{border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-height:96px}
.tile .l{font-size:12.5px;color:var(--muted);font-weight:500}
.tile .v{font-size:28px;letter-spacing:-.01em;line-height:1.15}
.kpis.rij{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi-klein{min-height:118px}
.kpi.groen{background:linear-gradient(160deg,#e9f8ef 0%,#fff 70%);border-color:#c8ebd5}.kpi.groen .kpi-waarde{color:var(--ok)}
.kpi.rood{background:linear-gradient(160deg,#fde8e5 0%,#fff 70%);border-color:#f3c5bf}.kpi.rood .kpi-waarde{color:var(--bad)}
.kpi.oranje{background:linear-gradient(160deg,#fff3e3 0%,#fff 70%);border-color:#f5d8b0}.kpi.oranje .kpi-waarde{color:var(--warn)}
.kpi.blauw{background:linear-gradient(160deg,#eaf1fe 0%,#fff 70%);border-color:#cddcfb}.kpi.blauw .kpi-waarde{color:var(--accent)}
/* kaarten */
.focus,.card,.kolom{border-radius:14px}
.focus>h2:first-child,.card>h2:first-child{margin-top:0}
.focus h2{font-size:16.5px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* lijstregels: bron als label */
.letop{grid-template-columns:132px 1fr;align-items:start;padding:11px 0}
.letop .bron{display:inline-block;align-self:start;justify-self:start;max-width:100%;background:var(--grey-bg);color:#4f5a66;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
a.bron:hover{background:#e0e6ec}
.letop .bron:empty{display:none}
.letop.klein .bron{font-weight:500}
/* tabellen */
table{font-size:14px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7a8591;font-weight:600;background:transparent;border-bottom:1px solid var(--line);padding:10px}
td{padding:11px 10px}
tr:hover td{background:#f8fafc}
tr:last-child td{border-bottom:0}
td a b,td>a{font-weight:600}
/* tabs als segmenten */
.tabs{background:#e9edf2;border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.tabs a{padding:6px 14px;font-weight:500;color:#4f5a66}
.tabs a.actief{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.1)}
/* formulieren en knoppen */
.btn{font-weight:600;transition:filter .15s}.btn:hover{filter:brightness(1.08)}
.btn.licht:hover{filter:none;background:#dde8fd}
.nieuw input,.nieuw select,.bewerk input,.bewerk select{border-radius:9px;padding:8px 10px}
.nieuw input:focus,.nieuw select:focus,.formulier input:focus,.formulier select:focus{outline:2px solid #cddcfb;border-color:var(--accent)}
.muted.leeg,p.muted{color:#8a949e}
.leeg-staat{text-align:center;padding:26px 10px;color:var(--muted)}
.leeg-staat b{display:block;color:var(--fg);font-size:15px;margin-bottom:4px}
.geval{padding:14px 0}
.bericht{border-radius:12px}
.controle{border-radius:10px;background:#f4f7fa}
.regel-status{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;display:inline-flex;gap:6px;align-items:center;justify-self:start}

.plankaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.plankaart{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--fg);transition:border-color .15s,transform .15s}
.plankaart:hover{border-color:#c9d3df;transform:translateY(-1px)}
.plankaart .tag{align-self:flex-start;width:auto;padding:3px 10px}
.plankaart b{font-size:15.5px;line-height:1.3}
main.twee>.kpis{grid-column:1/-1}
/* ===== Svens portaal ===== */
main.sven{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
main.sven>*{margin:0}
.sven-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sven-logo{height:18px;display:block;margin-bottom:12px;opacity:.85}
.sven-kop h1{font-size:28px}
.btn.groot{padding:11px 20px;font-size:15px;border-radius:11px}
.melding-ok{background:var(--ok-bg);border:1px solid #c8ebd5;color:#145c33;border-radius:12px;padding:12px 16px}
.sectie-titel{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:6px 2px -4px}
.sven-geval{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(20,30,40,.04)}
.sg-kop{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-size:15.5px}
.sg-kop .tag{width:auto;padding:3px 10px;margin-right:4px}
.sg-bedrag{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.sg-product{margin:0;color:var(--muted);font-size:14px}
.sg-stap{display:flex;gap:10px;align-items:flex-start;background:#fff8ec;border:1px solid #f5dfb8;border-radius:12px;padding:10px 12px;font-weight:600;color:#7a4a0a}
.sg-nr{font-size:16px}
.wa-bubbel{position:relative;background:#dcf8c6;border-radius:4px 14px 14px 14px;padding:12px 14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;color:#1b2a1b;max-width:620px}
.sg-acties{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sg-acties input{padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.btn.wa{background:#25d366;color:#fff}.btn.wa:hover{filter:brightness(1.05)}
.sg-acties .btn{padding:9px 16px;border-radius:10px}
.sven-leeg{background:var(--surface);border:1px dashed #cfd6de;border-radius:16px;padding:28px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.sven-leeg span{font-size:28px}.sven-leeg b{color:var(--fg);font-size:16px}
.sven-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.sven-form summary{display:flex;gap:14px;align-items:center;cursor:pointer;list-style:none}
.sven-form summary::-webkit-details-marker{display:none}
.sf-plus{width:36px;height:36px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:700;flex:none}
.sven-form summary b{display:block;font-size:15.5px}.sven-form summary small{color:var(--muted)}
.sven-form[open] summary{margin-bottom:14px}
.keuze{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.keuze label{cursor:pointer}
.keuze input{position:absolute;opacity:0;pointer-events:none}
.keuze span{display:block;text-align:center;border:1.5px solid var(--line);border-radius:12px;padding:12px 8px;font-weight:600;font-size:14.5px;background:#fafbfc}
.keuze input:checked+span{border-color:var(--accent);background:var(--soft);color:var(--accent)}
.keuze input:focus-visible+span{outline:2px solid var(--accent)}
.formulier label[hidden]{display:none}
@media (max-width:640px){.keuze{grid-template-columns:1fr}.sven-kop h1{font-size:24px}.sg-kop{font-size:14.5px}}
main.sven .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){
  main.sven .kpi{min-height:0;padding:12px 12px 10px}
  main.sven .kpi-waarde{font-size:24px}
  main.sven .kpi-sub{display:none}
  main.sven .kpi-label{font-size:11.5px}
  .sven-kop .btn.groot{width:100%;text-align:center}
}
/* ===== Samenwerkingen ===== */
.fasebalk{display:flex;gap:6px;margin:0 0 14px}
.fb-deel{display:flex;align-items:baseline;gap:8px;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--fg);border:1.5px solid transparent;min-width:90px}
.fb-deel b{font-size:20px}.fb-deel span{font-size:12.5px;color:var(--muted)}
.fb-deel.grijs{background:#eef1f4}.fb-deel.oranje{background:#fff3e3}.fb-deel.groen{background:#e9f8ef}.fb-deel.rood{background:#fde8e5}
.fb-deel.actief{border-color:#1b2026}
.balk{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-bottom:14px}
.swkaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:16px}
.swkaart{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}
.swkaart:hover{border-color:#c9d3df;box-shadow:0 4px 14px rgba(20,30,40,.06)}
.swkaart::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:#e3e8ee}
.swkaart.rood::before{background:var(--bad)}.swkaart.oranje::before{background:#f0a23a}.swkaart.groen::before{background:var(--ok)}
.sw-boven{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--fg)}
.sw-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.sw-avatar.grijs{background:#eef1f4;color:#4f5a66}.sw-avatar.groen{background:var(--ok-bg);color:var(--ok)}.sw-avatar.oranje{background:#fff0e0;color:#b4570b}.sw-avatar.rood{background:var(--bad-bg);color:var(--bad)}
.sw-avatar.groot{width:60px;height:60px;font-size:21px}
.sw-naam{flex:1;min-width:0;display:flex;flex-direction:column}.sw-naam b{font-size:15.5px}.sw-naam small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-code{font-family:var(--mono);font-size:12px;font-weight:600;background:#1b2026;color:#fff;border-radius:7px;padding:3px 8px}
.sw-code.groot{font-size:14px;padding:5px 12px}
.sw-stap{display:flex;justify-content:space-between;font-size:13.5px;font-weight:500}
.swkaart .voortgang{margin:0;height:6px}
.sw-cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#f6f8fb;border-radius:12px;padding:10px}
.sw-cijfers div{display:flex;flex-direction:column;align-items:center}.sw-cijfers b{font-size:18px}.sw-cijfers b small{font-size:12px;color:var(--muted);font-weight:500}.sw-cijfers span{font-size:11px;color:var(--muted)}
.sw-voet{display:flex;gap:8px;align-items:center;justify-content:space-between}
.sw-post{display:flex;gap:6px;flex:1;justify-content:flex-end;min-width:0}
.sw-post input{flex:1;min-width:0;max-width:150px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.sw-detailkop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.sw-detailnaam{flex:1;min-width:200px}.sw-detailnaam h1{margin:0}
.route{display:grid;grid-template-columns:repeat(14,minmax(52px,1fr));gap:4px;overflow-x:auto;padding-bottom:4px}
.rstap{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative}
.rstap i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#eef1f4;color:#7a8591;z-index:1}
.rstap::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:2px;background:#e3e8ee}
.rstap:first-child::before{display:none}
.rstap.klaar i{background:var(--ok);color:#fff}.rstap.klaar::before{background:var(--ok)}
.rstap.nu i{background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--soft)}.rstap.nu::before{background:var(--ok)}
.rstap small{font-size:10.5px;color:var(--muted);line-height:1.2}
.rstap.nu small{color:var(--accent);font-weight:600}
.twee-kol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:start}
.twee-kol>.focus{margin:0}
.tijdlijn-posts{margin-top:10px;display:flex;flex-direction:column}
.tp{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.tp-dot{width:10px;height:10px;border-radius:50%;background:#c7d8fb;margin-top:5px;flex:none}.tp-dot.voor-ons{background:var(--ok)}
@media (max-width:1100px){.twee-kol{grid-template-columns:1fr}}
/* ===== Taken ===== */
.personen{display:flex;gap:6px;background:#e9edf2;border-radius:14px;padding:4px}
.personen a{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:11px;text-decoration:none;color:#4f5a66;font-weight:600;font-size:14px}
.personen a small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.personen a.actief{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.kpi .ringgroot.klein{margin:4px 0 0}
.snelinvoer{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:8px 10px;margin:0 0 16px;transition:border-color .15s,box-shadow .15s}
.snelinvoer:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
.si-plus{width:30px;height:30px;border-radius:9px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.snelinvoer input[name=titel]{flex:1;min-width:220px;border:0;font-size:15.5px;padding:8px 4px;outline:none;background:transparent}
.snelinvoer select,.snelinvoer input[type=date],.snelinvoer input[name=wacht_op]{border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:13px;background:#fafbfc;color:var(--fg)}
.takenraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:16px}
.takenraster>.focus{margin:0}
.taakrij{display:flex;gap:12px;align-items:flex-start;padding:11px 4px;border-bottom:1px solid var(--line);border-radius:8px;position:relative}
.taakrij:last-child{border-bottom:0}
.taakrij:hover{background:#f8fafc}
.vinkrond-knop{width:24px;height:24px;border-radius:50%;border:2px solid #b9c3cd;background:var(--surface);cursor:pointer;color:#fff;font-size:12px;font-weight:700;padding:0;margin-top:1px;flex:none;transition:border-color .15s,background .15s}
.vinkrond-knop:hover{border-color:var(--ok)}
.vinkrond-knop.aan{background:var(--ok);border-color:var(--ok)}
.tr-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tr-titel{font-size:15px;line-height:1.35}
.taakrij.gedaan .tr-titel{color:var(--muted);text-decoration:line-through}
.tr-labels{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.pil{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.pil.grijs{background:var(--grey-bg);color:#4f5a66}.pil.rood{background:var(--bad-bg);color:var(--bad)}.pil.oranje{background:#fff0e0;color:#b4570b}
.pil.blauw{background:#e6efff;color:#2459c9}.pil.groen{background:var(--ok-bg);color:var(--ok)}.pil.paars{background:#efe9fe;color:#6d3fd6}
.tr-van{font-size:12px;color:var(--muted)}
.taakrij .meer{position:static}
.taakrij .meer summary{list-style:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:2px 6px;border-radius:6px}
.taakrij .meer summary:hover{background:#eef1f4}
.taakrij .meer summary::-webkit-details-marker{display:none}
.meer-paneel{position:absolute;right:0;top:100%;z-index:10;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(20,30,40,.12);padding:12px;width:min(560px,90vw)}
@media (max-width:1100px){.takenraster{grid-template-columns:1fr}.personen a small{display:none}}
.filterlabel{display:inline-flex;gap:6px;align-items:center;background:#eaf1fe;color:#2459c9;border-radius:999px;padding:5px 14px;font-size:13px;margin:0 0 10px}
.filterlabel a{font-weight:600}
.pil.roze{background:#fde7f1;color:#b8336a}.tag.roze{background:#fde7f1;color:#b8336a}

/* ===== Monvaylo ===== */
.mv-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:center;background:linear-gradient(135deg,#111316 0%,#23272d 100%);color:#fff;border-radius:18px;padding:28px 30px;overflow:hidden}
.mv-hero h2{font-size:30px;margin:10px 0 4px;letter-spacing:-.01em}
.mv-hero p{color:#b9c1ca;margin:0 0 6px}
.mv-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px}
.mv-status i{width:8px;height:8px;border-radius:50%}
.mv-status.open{background:rgba(46,204,113,.15);color:#7ef0a8}.mv-status.open i{background:#2ecc71;box-shadow:0 0 0 4px rgba(46,204,113,.2)}
.mv-status.dicht{background:rgba(255,166,0,.15);color:#ffcf7a}.mv-status.dicht i{background:#ffa600}
.mv-waarschuwing{background:rgba(255,120,90,.14);color:#ffb3a1!important;border-radius:10px;padding:8px 12px;font-size:13.5px;margin:10px 0!important}
.mv-knoppen{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mv-knoppen .btn.licht{background:rgba(255,255,255,.1);color:#fff}
.mv-schermen{position:relative;height:250px}
.mv-desktop{position:absolute;right:60px;top:0;width:calc(100% - 60px);height:230px;object-fit:cover;object-position:top;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1)}
.mv-mobiel{position:absolute;right:0;bottom:-30px;width:118px;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.5);border:3px solid #0b0c0e}
.fase-lijst{display:flex;flex-direction:column;gap:4px}
.fase-rij{display:grid;grid-template-columns:24px 170px 1fr 90px;gap:12px;align-items:center;padding:8px 6px;border-radius:9px;text-decoration:none;color:var(--fg);font-size:14px}
.fase-rij:hover{background:#f6f8fb}.fase-rij .voortgang{margin:0}.fase-rij .ring::after{background:var(--surface)}
.prodrij{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.prodkaart{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--fg)}
.pk-beeld{aspect-ratio:3/4;background:#f3f4f6;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.pk-beeld img{width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box;transition:transform .2s}
.prodkaart:hover .pk-beeld img{transform:scale(1.04)}
.pk-titel{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prodkaart b{font-size:14px}
.mv-checkout{width:100%;border-radius:10px;border:1px solid var(--line);max-height:260px;object-fit:cover;object-position:top}
@media (max-width:1280px){.prodrij{grid-template-columns:repeat(4,minmax(0,1fr))}.mv-hero{grid-template-columns:1fr}.mv-schermen{height:220px}}
@media (max-width:760px){.prodrij{grid-template-columns:repeat(2,minmax(0,1fr))}.fase-rij{grid-template-columns:24px 1fr 70px}.fase-rij .voortgang{display:none}}
/* ===== Agenda ===== */
.volgende{display:flex;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:16px;border-left-width:6px}
.volgende.groen{border-left-color:var(--ok)}.volgende.blauw{border-left-color:var(--accent)}.volgende.paars{border-left-color:#7c4ddb}.volgende.oranje{border-left-color:#f0a23a}.volgende.roze{border-left-color:#d6457f}
.vg-tijd{display:flex;flex-direction:column;align-items:center;min-width:86px}.vg-tijd b{font-size:30px;line-height:1}.vg-tijd span{font-size:12px;color:var(--muted)}.vg-tijd small{font-size:13px;font-weight:600;margin-top:4px;color:#4f5a66}
.vg-tekst{flex:1;display:flex;flex-direction:column;gap:2px}.vg-tekst b{font-size:19px}.vg-tekst span{color:var(--muted);font-size:14px}
.vg-label{font-size:12px!important;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--accent)!important}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:16px}
.dagkolom{background:#eef1f4;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:7px;min-width:0}
.dagkolom.vandaag{background:#e6efff;box-shadow:inset 0 0 0 2px #cddcfb}
.dk-kop{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 4px}.dk-kop b{font-size:14px}.dk-kop span{font-size:12px;color:var(--muted)}
.call{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;background:var(--surface);border-radius:10px;padding:8px 9px;border-left:4px solid #cfd6de;font-size:13px}
.call.groen{border-left-color:var(--ok)}.call.blauw{border-left-color:var(--accent)}.call.paars{border-left-color:#7c4ddb}.call.oranje{border-left-color:#f0a23a}.call.roze{border-left-color:#d6457f}
.call.voorbij{opacity:.45}.call.nu{box-shadow:0 0 0 2px var(--ok)}
.c-tijd{display:flex;flex-direction:column}.c-tijd b{font-size:14px}.c-tijd small{font-size:11px;color:var(--muted)}
.c-tekst{min-width:0;display:flex;flex-direction:column}.c-tekst b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-tekst small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-knop{font-size:11px;font-weight:700;background:var(--soft);color:var(--accent);border-radius:7px;padding:4px 7px;text-decoration:none}
@media (max-width:1400px){.week{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.week{grid-template-columns:1fr}.volgende{flex-wrap:wrap}}
.week .call{grid-template-columns:1fr auto;grid-template-areas:"tijd knop" "tekst tekst";row-gap:3px}
.week .c-tijd{grid-area:tijd;flex-direction:row;align-items:baseline;gap:6px}
.week .c-knop{grid-area:knop}
.week .c-tekst{grid-area:tekst}
.week .c-tekst b,.week .c-tekst small{white-space:normal}