/* ---------------------------------------------------------------------------
   Oostwoud Sales Intelligence Dashboard (OSI)

   Huisstijl overgenomen van oostwoud.com: blauw #3066BE als hoofdkleur, met
   oranje, groen en paars als accenten. Op de site staat elke kleur voor een
   productgroep; die koppeling houden we hier aan, zodat een postkastenlead er
   in het dashboard hetzelfde uitziet als op de website.
--------------------------------------------------------------------------- */
:root{
  /* huisstijl */
  --blauw:#3066be;      --blauw-donker:#1b3a6d;   --blauw-tint:#d6e0f2;
  --oranje:#f07848;     --oranje-donker:#93330c;  --oranje-tint:#fce4da;
  --groen:#2e9e44;      --groen-donker:#174f22;   --groen-tint:#d5ecda;
  --paars:#820bcb;      --paars-donker:#44066a;   --paars-tint:#e6cef5;
  --rood:#cf2e2e;       --rood-tint:#fbe3e3;

  /* vlakken en tekst */
  /* --zacht op 5,5:1 tegen de grond: grijze bijschriften moeten leesbaar zijn
     op een laptop in daglicht, niet 'elegant' licht. */
  --inkt:#313131;  --zacht:#5f6875;  --lijn:#d6d6d6;  --lijn-zacht:#eaeaea;
  --vlak:#ffffff;  --grond:#f5f7fa;
  --merk:var(--blauw);  --merk-tint:var(--blauw-tint);
  /* Het donkere paneel (zijbalk, hero, assistent, recorder) heeft vaste witte
     tekst en blijft dus ook in de donkere stand donker. Voorheen werd hij
     lichtblauw en stond er wit op lichtblauw: 1,3:1. */
  --paneel:#1b3a6d; --paneel-diep:#12294f; --paneel-tekst:#cfdcf0;

  /* prioriteitsbanden - donker genoeg voor witte cijfers */
  --a:#237a35; --b:var(--blauw); --c:#c85a2a; --d:#6b7583; --x:var(--rood);
  --plus:var(--groen-donker); --min:var(--rood);
  --radius:8px; --radius-groot:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --blauw:#6f9de6; --blauw-donker:#a9c4ee; --blauw-tint:#1a2740;
    --oranje:#f59a72; --oranje-donker:#f7b899; --oranje-tint:#33211a;
    --groen:#5cc172; --groen-donker:#8ed79e; --groen-tint:#162a1b;
    --paars:#b378e8; --paars-donker:#cba4f0; --paars-tint:#241832;
    --rood:#e57373; --rood-tint:#33201f;
    --inkt:#e9ecef; --zacht:#a3adb8; --lijn:#2c3440; --lijn-zacht:#232a34;
    --vlak:#161c24; --grond:#0f141a;
    --paneel:#152a4d; --paneel-diep:#0d1a30; --paneel-tekst:#cfdcf0;
    --a:#3d9a52; --c:#e08a5e; --d:#7c8794;
    --plus:var(--groen); --min:var(--rood);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--grond);color:var(--inkt);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif}
a{color:var(--blauw);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0 0 4px;letter-spacing:-.015em}
h2{font-size:1.05rem;margin:0 0 10px;letter-spacing:-.01em}
h3{font-size:.78rem;margin:20px 0 8px;color:var(--zacht);text-transform:uppercase;
  letter-spacing:.07em;font-weight:700}

/* ---------------------------------------------------------------------------
   SCHIL: vaste zijbalk links, werkvlak rechts.

   De navigatie stond eerst bovenin en liep bij tien menu-items over twee
   regels. Links staat de lijst rechtop en is er ruimte om te groeperen: eerst
   je eigen werk, dan het team, dan het beheer.
--------------------------------------------------------------------------- */
.schil{display:grid;grid-template-columns:240px 1fr;min-height:100vh}

.zijbalk{background:var(--paneel);color:var(--paneel-tekst);display:flex;
  flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.merk{display:flex;align-items:center;gap:10px;padding:20px 20px 22px;
  color:#fff;font-weight:700;letter-spacing:-.02em}
.merk:hover{text-decoration:none}
.merk .osi{background:#fff;color:var(--paneel);border-radius:7px;
  padding:4px 9px;font-size:.85rem;font-weight:800;letter-spacing:.02em;
  line-height:1}
.zijbalk .merk .naam{display:flex;flex-direction:column;line-height:1.2;
  color:#fff;font-weight:700}
.zijbalk .merk .lang{font-weight:400;font-size:.68rem;color:#8fa8cc;
  letter-spacing:.02em}

.zijbalk .groep{padding:0 12px;margin-bottom:4px}
.zijbalk .groeptitel{padding:14px 10px 6px;font-size:.66rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#7e97bd}
.zijbalk a.menu{display:flex;align-items:center;gap:11px;padding:9px 11px;
  border-radius:9px;color:var(--paneel-tekst);font-size:.88rem;font-weight:500;
  margin-bottom:2px;transition:background .12s,color .12s}
.zijbalk a.menu:hover{background:rgba(255,255,255,.09);color:#fff;
  text-decoration:none}
.zijbalk a.menu.actief{background:var(--blauw);color:#fff;font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.zijbalk a.menu svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.zijbalk a.menu.actief svg{opacity:1}
.zijbalk .telbol{margin-left:auto;background:var(--oranje);color:#fff;
  border-radius:999px;padding:1px 7px;font-size:.68rem;font-weight:700;
  line-height:1.5}
.zijbalk .voet{margin-top:auto;padding:16px 20px;font-size:.7rem;color:#6d86ab;
  border-top:1px solid rgba(255,255,255,.09)}

/* ---- bovenbalk ---- */
.werkvlak{display:flex;flex-direction:column;min-width:0}
.bovenbalk{display:flex;align-items:center;gap:16px;padding:0 26px;height:62px;
  background:var(--vlak);border-bottom:1px solid var(--lijn-zacht);
  position:sticky;top:0;z-index:9}
.bovenbalk .paginanaam{font-weight:650;font-size:1rem;letter-spacing:-.01em}
.bovenbalk .rechts{margin-left:auto;display:flex;align-items:center;gap:12px}
.wie{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;
  border-radius:999px;border:1px solid var(--lijn-zacht);color:var(--inkt);
  font-size:.84rem}
.wie:hover{text-decoration:none;border-color:var(--blauw)}
.wie .bol{width:29px;height:29px;border-radius:50%;background:var(--blauw);
  color:#fff;display:grid;place-items:center;font-size:.76rem;font-weight:700;
  letter-spacing:.02em}
.wie .rol{color:var(--zacht);font-size:.72rem;display:block;line-height:1.2}
.wie b{font-weight:600;display:block;line-height:1.2}
main{padding:24px 26px 64px;max-width:1560px;width:100%}

@media (max-width:900px){
  .schil{grid-template-columns:1fr}
  .zijbalk{position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;padding-bottom:8px}
  .zijbalk .groep{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px}
  .zijbalk .groeptitel,.zijbalk .voet{display:none}
  .zijbalk a.menu{margin-bottom:0;min-height:44px}
  main{padding:18px 16px 48px}
  /* Onder 16px zoomt Safari op iOS in bij elke focus - in de auto irritant. */
  input,select,textarea{font-size:16px}
  .knop{min-height:44px;padding:10px 16px}
  .knop.mini{min-height:36px}
  .tabelwrap,.tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* De bovenbalk moet op een telefoon binnen de rand blijven. Zonder deze
     regels duwt de 'Bekijk als'-keuzelijst de hele pagina 180px naar rechts,
     en dat is precies het scherm waarop de buitendienst werkt. */
  .bovenbalk{height:auto;min-height:56px;padding:8px 16px;flex-wrap:wrap;
    row-gap:8px}
  .bovenbalk .rechts{margin-left:auto;flex-wrap:wrap;gap:8px;min-width:0}
  .bovenbalk .wisselaar{min-width:0}
  .bovenbalk .wisselaar select{max-width:46vw}
}
@media (max-width:560px){
  /* Op de kleinste schermen is 'Bekijk als' een beheerdersding en kost het
     alleen ruimte; de keuzelijst zelf blijft staan. */
  .bovenbalk .wisselaar > span{display:none}
  /* De initialenbol blijft; de naam en rol eronder kosten de breedte die de
     keuzelijst nodig heeft. */
  .bovenbalk .wie > span:not(.bol){display:none}
}

/* ---- algemeen ---- */
.titelbalk{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-bottom:16px;flex-wrap:wrap}
.knoppen{display:flex;gap:8px;flex-wrap:wrap}
.sub{color:var(--zacht);font-size:.88rem;margin:2px 0 0}
.hint{color:var(--zacht);font-size:.86rem;background:var(--grond);padding:10px 12px;
  border-radius:var(--radius);border-left:3px solid var(--blauw)}
.knop{background:var(--blauw);color:#fff;border:0;border-radius:var(--radius);
  padding:8px 15px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  display:inline-block}
.knop:hover{background:var(--blauw-donker);text-decoration:none;color:#fff}
.knop.licht{background:var(--vlak);color:var(--inkt);border:1px solid var(--lijn)}
.knop.licht:hover{border-color:var(--blauw);color:var(--blauw);background:var(--vlak)}
.knop.mini{padding:6px 11px;font-size:.78rem;background:var(--vlak);color:var(--inkt);
  border:1px solid var(--lijn);font-weight:600;min-height:32px}
.knop.mini:hover{color:var(--blauw);border-color:var(--blauw);background:var(--vlak)}
.knop.groot{padding:12px 22px;font-size:.98rem}
.wis{color:var(--zacht);font-size:.85rem;align-self:center}

.melding{padding:11px 14px;border-radius:var(--radius);margin-bottom:14px;font-size:.9rem}
.melding.ok{background:var(--groen-tint);color:var(--groen-donker);
  border-left:3px solid var(--groen)}
.melding.fout{background:var(--rood-tint);color:var(--rood);border-left:3px solid var(--rood)}

.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters input[type=search]{min-width:250px}
input,select,textarea{font:inherit;font-size:.88rem;padding:7px 10px;
  border:1px solid var(--lijn);border-radius:var(--radius);background:var(--vlak);
  color:var(--inkt)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blauw)}
/* Eén focusring voor toetsenbordgebruik: zichtbaar, niet bij muisklik. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blauw);outline-offset:2px;border-radius:4px}
label{font-size:.88rem;color:var(--zacht);display:inline-flex;gap:6px;align-items:center}
.vink{gap:5px}

/* ---- periodetegels ---- */
.perioden{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.periode{display:flex;flex-direction:column;gap:1px;background:var(--vlak);
  border:1px solid var(--lijn-zacht);border-radius:var(--radius);padding:10px 16px;
  min-width:108px;color:var(--inkt)}
.periode:hover{border-color:var(--blauw);text-decoration:none}
.periode.actief{border-color:var(--blauw);background:var(--blauw-tint)}
.p-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--zacht);
  font-weight:700}
.p-getal{font-size:1.55rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.p-warm{font-size:.72rem;color:var(--groen-donker);font-weight:700}
.periode.actief .p-label{color:var(--blauw-donker)}

/* ---- filterstrips ---- */
.productbalk{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.strip-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--zacht);margin-right:4px;font-weight:700}
.prod{border:1px solid var(--lijn);background:var(--vlak);border-radius:99px;
  padding:4px 13px;font-size:.82rem;color:var(--zacht)}
.prod b{color:var(--inkt);font-variant-numeric:tabular-nums}
.prod:hover{border-color:var(--blauw);color:var(--blauw);text-decoration:none}
.prod.actief{background:var(--blauw);border-color:var(--blauw);color:#fff}
.prod.actief b{color:#fff}

/* ---- tabellen ---- */
table{width:100%;border-collapse:collapse;background:var(--vlak);
  border-radius:var(--radius);overflow:hidden}
.leads{table-layout:fixed;box-shadow:0 1px 3px rgba(27,58,109,.07);
  border:1px solid var(--lijn-zacht)}
.leads th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--zacht);padding:10px;border-bottom:1px solid var(--lijn);font-weight:700;
  background:var(--grond)}
.leads td{padding:10px;border-bottom:1px solid var(--lijn-zacht);vertical-align:top;
  font-size:.88rem}
.leads tr:last-child td{border-bottom:0}
.leads tbody tr:hover{background:var(--grond)}
.w-score{width:80px}.w-prod{width:150px}.w-type{width:108px}
.w-crm{width:104px}.w-gedrag{width:108px}.w-datum{width:98px}
.w-werk{width:108px}.w-plaats{width:118px}
.leeg{text-align:center;color:var(--zacht);padding:40px}

/* ---- score ---- */
.score a{display:flex;align-items:center;gap:8px;color:var(--inkt)}
.score a:hover{text-decoration:none}
.bol{width:23px;height:23px;border-radius:50%;color:#fff;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;background:var(--d);flex:none}
.band-a .bol{background:var(--a)} .band-b .bol{background:var(--b)}
.band-c .bol{background:var(--c)} .band-d .bol{background:var(--d)}
.band-x .bol{background:var(--x)}
.cijfer{font-weight:700;font-variant-numeric:tabular-nums}
.bol.groot{width:46px;height:46px;font-size:1.15rem}
.cijfer.groot{font-size:2rem}
.dekking{font-size:.66rem;color:var(--zacht);border:1px solid var(--lijn);border-radius:4px;
  padding:0 4px;margin-left:31px;display:inline-block}

.naam{font-weight:700;color:var(--inkt)}
.meta{color:var(--zacht);font-size:.78rem;margin-top:2px}
.segment{background:var(--blauw-tint);color:var(--blauw-donker);padding:1px 7px;
  border-radius:4px;font-size:.78rem;font-weight:600}
.vlag{color:var(--oranje-donker);font-size:.76rem;font-weight:700;margin-top:3px}
.pil{background:var(--grond);border:1px solid var(--lijn);border-radius:99px;
  padding:1px 9px;font-size:.72rem;color:var(--zacht)}
.telling{font-weight:400;color:var(--zacht);font-size:.85rem}

/* productgroepen krijgen de kleur die ze op de website ook hebben */
.prodpil{display:inline-block;border-radius:5px;padding:1px 8px;font-size:.76rem;
  margin:0 3px 3px 0;font-weight:600;background:var(--grond);color:var(--zacht)}
.prodpil.postkasten{background:var(--blauw-tint);color:var(--blauw-donker)}
.prodpil.pakket{background:var(--oranje-tint);color:var(--oranje-donker)}
.prodpil.lockers{background:var(--groen-tint);color:var(--groen-donker)}
.prodpil.medisch{background:var(--paars-tint);color:var(--paars-donker)}
.prodpil.service{background:var(--lijn-zacht);color:var(--zacht)}

.crm-ja{color:var(--groen-donker);font-weight:700;font-size:.82rem}
.crm-nee{color:var(--zacht);font-size:.82rem}
.reden{display:block;font-size:.8rem;line-height:1.45;padding-left:13px;position:relative;
  color:var(--zacht);margin-top:4px}
.reden:before{position:absolute;left:0;font-weight:700}
.reden.plus{color:var(--plus)} .reden.plus:before{content:"+"}
.reden.min{color:var(--min)} .reden.min:before{content:"−"}
.reden.info:before{content:"·"}
.actie{font-size:.83rem;line-height:1.45}

/* ---- detailpagina ---- */
.terug{font-size:.85rem;color:var(--zacht);display:inline-block;margin-bottom:12px}
.detailkop{display:flex;gap:24px;align-items:flex-start;background:var(--vlak);
  border:1px solid var(--lijn-zacht);border-radius:var(--radius);padding:20px;
  margin-bottom:16px;border-top:3px solid var(--blauw)}
.detailkop.band-a{border-top-color:var(--groen)}
.detailkop.band-c{border-top-color:var(--oranje)}
.detailkop.band-d{border-top-color:var(--d)}
.scoreblok{text-align:center;min-width:84px}
.scoreblok .bol{margin:0 auto 6px}
.scoreblok .dekking{margin:4px 0 0}
.contact{font-size:.86rem;margin:6px 0 0}
.aanbeveling{margin:10px 0 0;font-weight:700;background:var(--groen-tint);
  color:var(--groen-donker);display:inline-block;padding:7px 13px;
  border-radius:var(--radius);font-size:.9rem}

.kolommen{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:960px){.kolommen{grid-template-columns:1fr}}
.kaart{background:var(--vlak);border:1px solid var(--lijn-zacht);
  border-radius:var(--radius);padding:18px;margin-bottom:16px}
.kaart.let-op{border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-tint)}
.kaart form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.kaart form.inline{display:inline-flex;margin-right:8px}
.kolomform{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:10px}
.kolomform label{flex-direction:row}

.balken{margin-bottom:14px}
.balk{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:.82rem}
.balk .label{width:92px;color:var(--zacht);font-weight:600}
.staaf{flex:1;height:8px;background:var(--grond);border-radius:99px;overflow:hidden}
.staaf i{display:block;height:100%;background:var(--blauw)}
.staaf i.bonus{background:var(--oranje)}
.staaf.onbekend i{background:repeating-linear-gradient(90deg,var(--lijn) 0 4px,transparent 4px 8px)}
.balk .waarde{width:66px;text-align:right;color:var(--zacht);font-variant-numeric:tabular-nums}

.redenlijst{list-style:none;padding:0;margin:0}
.redenlijst li{padding:6px 0 6px 17px;position:relative;font-size:.86rem;
  border-top:1px solid var(--lijn-zacht)}
.redenlijst li:before{position:absolute;left:0;font-weight:700}
.redenlijst li.plus{color:var(--plus)} .redenlijst li.plus:before{content:"+"}
.redenlijst li.min{color:var(--min)} .redenlijst li.min:before{content:"−"}
.redenlijst li.info:before{content:"·";color:var(--zacht)}

.opvolgform{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.opvolgform select,.opvolgform input{width:100%}
.opvolgform .knop{align-self:flex-start}
.tijdlijn{list-style:none;padding:0;margin:12px 0 0;font-size:.86rem}
.tijdlijn li{border-top:1px solid var(--lijn-zacht);padding:8px 0}
.contactlijst{list-style:none;padding:0;margin:0 0 8px}
.contactlijst li{border-top:1px solid var(--lijn-zacht);padding:8px 0;font-size:.88rem}
.contactlijst .meta{display:inline;margin-left:6px}

.kerncijfers{display:flex;gap:24px;margin:12px 0;flex-wrap:wrap}
.kerncijfers.breed{gap:30px;background:var(--vlak);border:1px solid var(--lijn-zacht);
  border-radius:var(--radius);padding:16px 20px;margin-bottom:16px}
.kerncijfers div{display:flex;flex-direction:column}
.kerncijfers b{font-size:1.3rem;font-variant-numeric:tabular-nums;font-weight:700}
.kerncijfers span{font-size:.74rem;color:var(--zacht);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600}

.klein th{text-align:left;font-size:.7rem;text-transform:uppercase;color:var(--zacht);
  padding:7px 8px;border-bottom:1px solid var(--lijn);font-weight:700;letter-spacing:.06em}
.klein td{padding:7px 8px;border-bottom:1px solid var(--lijn-zacht);font-size:.84rem}
.signaaltabel td{vertical-align:top;font-size:.85rem}
.datumcel b{font-variant-numeric:tabular-nums;font-size:.84rem}
.nieuwvlag{display:inline-block;background:var(--oranje);color:#fff;border-radius:4px;
  padding:0 5px;font-size:.64rem;font-weight:800;text-transform:uppercase;margin-top:3px;
  letter-spacing:.04em}
.werkpil{display:inline-block;border-radius:5px;padding:1px 8px;font-size:.74rem;
  font-weight:600;background:var(--grond);border:1px solid var(--lijn);color:var(--zacht)}
.werkpil.nieuwbouw{background:var(--groen-tint);color:var(--groen-donker);border-color:transparent}
.werkpil.uitbreiding{background:var(--blauw-tint);color:var(--blauw-donker);border-color:transparent}
.werkpil.transformatie{background:var(--paars-tint);color:var(--paars-donker);border-color:transparent}
.werkpil.renovatie{background:var(--oranje-tint);color:var(--oranje-donker);border-color:transparent}

.aanvraag{border-top:1px solid var(--lijn-zacht);padding:10px 0}
.aanvraag .wie{font-weight:700;font-size:.9rem}
.aanvraag .product{color:var(--blauw);font-size:.85rem}
.aanvraag blockquote{margin:6px 0 0;padding-left:12px;border-left:2px solid var(--lijn);
  color:var(--zacht);font-size:.86rem}

.zoeklijst{list-style:none;padding:0;margin:0}
.zoeklijst li{padding:6px 0;border-bottom:1px solid var(--lijn-zacht)}
.zoekterm{background:var(--oranje-tint);border:1px solid transparent;border-radius:5px;
  padding:1px 8px;font-size:.84rem;font-weight:700;display:inline-block;
  color:var(--oranje-donker)}
.zoekterm:before{content:"\201C"} .zoekterm:after{content:"\201D"}
.zoekterm.klein{font-size:.74rem;font-weight:600;margin-bottom:4px}
.paginalijst{list-style:none;padding:0;margin:0;max-height:300px;overflow:auto;font-size:.82rem}
.paginalijst li{padding:5px 0;border-bottom:1px solid var(--lijn-zacht);word-break:break-word}
.paginalijst .n{color:var(--zacht);display:inline-block;min-width:30px;font-weight:700}
.paginalijst a{color:var(--inkt)}
.signalen{list-style:none;padding:0;margin:0;font-size:.86rem}
.signalen li{padding:7px 0;border-top:1px solid var(--lijn-zacht)}

.code,.code-inline{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}
.code{background:var(--grond);padding:11px 13px;border-radius:var(--radius);overflow-x:auto;
  border:1px solid var(--lijn-zacht)}
.code-inline{background:var(--grond);padding:1px 5px;border-radius:4px}
.editor{width:100%;height:60vh;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8rem;line-height:1.6;margin-bottom:10px}
.klaar{background:var(--groen-tint);color:var(--groen-donker);padding:9px 13px;
  border-radius:var(--radius);font-size:.86rem}
.mislukt{background:var(--rood-tint);color:var(--rood);padding:9px 13px;
  border-radius:var(--radius);font-size:.86rem}
.loginvak{max-width:340px;margin:12vh auto;background:var(--vlak);padding:30px;
  border:1px solid var(--lijn-zacht);border-radius:var(--radius);
  border-top:3px solid var(--blauw)}
.loginvak form{display:flex;flex-direction:column;gap:10px;margin-top:14px}

.w-team{width:126px}
.afdeling{font-size:.78rem;font-weight:700;color:var(--blauw-donker)}
.team .meta{margin-top:1px}

/* Brede tabellen mogen horizontaal scrollen; de pagina zelf nooit.
   Zonder dit persen de vaste kolombreedtes zich in elkaar op een smal scherm. */
.tabelwrap{overflow-x:auto;border-radius:var(--radius);
  border:1px solid var(--lijn-zacht);background:var(--vlak);margin-bottom:4px}
.tabelwrap .leads{border:0;box-shadow:none;margin:0}
.leads{min-width:1560px}
.signaaltabel{min-width:980px}
@media(max-width:820px){
  .zijbalk .merk .lang{display:none}
}

.klantstrip .prod.klant.actief{background:var(--groen);border-color:var(--groen)}
.klantstrip .prod.oudklant.actief{background:var(--oranje);border-color:var(--oranje)}
.orderdatum{font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600}
.crm-bekend{color:var(--blauw-donker);font-weight:600;font-size:.82rem}
.w-crm{width:118px}
.koppelkaart{padding:14px 18px}
.koppelbalk{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.zekerheid{min-width:64px;text-align:center;font-size:1.15rem;font-weight:700;
  border-radius:var(--radius);padding:8px 4px;background:var(--grond);color:var(--zacht)}
.zekerheid span{display:block;font-size:.62rem;text-transform:uppercase;font-weight:600;
  letter-spacing:.06em}
.zekerheid.hoog{background:var(--groen-tint);color:var(--groen-donker)}
.zekerheid.midden{background:var(--oranje-tint);color:var(--oranje-donker)}
.kant{flex:1;min-width:230px}
.kant h3{margin:0 0 3px}
.knaam{font-weight:700;font-size:.95rem}
.pijl{color:var(--zacht);font-size:1.3rem}
.besluitknoppen form{display:flex;gap:8px;margin:0}
.waarom{margin-top:8px;padding-top:8px;border-top:1px solid var(--lijn-zacht);
  font-size:.8rem;color:var(--zacht)}
/* ---- kansen ---- */
.kansentabel{min-width:1320px}
.w-waarde{width:140px}.w-stil{width:118px}.w-taak{width:104px}
.bronpil{display:inline-block;border-radius:4px;padding:0 7px;font-size:.68rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 4px 4px 0}
.bronpil.bezoeker{background:var(--blauw-tint);color:var(--blauw-donker)}
.bronpil.signaal{background:var(--oranje-tint);color:var(--oranje-donker)}
.bronpil.klant{background:var(--groen-tint);color:var(--groen-donker)}
.actietekst{font-size:.82rem;margin-top:4px;color:var(--inkt)}
.waarde b{font-size:1rem;font-variant-numeric:tabular-nums}
.niemand{color:var(--rood);font-size:.8rem;font-weight:600}
.stil .nooit{color:var(--oranje-donker);font-weight:700;font-size:.82rem}
.stil .meta.lang{color:var(--oranje-donker);font-weight:600}
.taakcel form{margin:0}
.knop.mini.taak{background:var(--blauw);color:#fff;border-color:var(--blauw);
  font-weight:600;white-space:nowrap}
.knop.mini.taak:hover{background:var(--blauw-donker);color:#fff}
.knop.mini.taak:disabled{background:var(--grond);color:var(--zacht);
  border-color:var(--lijn);cursor:not-allowed}
td.goed{color:var(--groen-donker);font-weight:700}
td.slecht{color:var(--rood);font-weight:700}
.klein .staaf{display:inline-block;width:110px;vertical-align:middle}

.teamtegels .periode{min-width:150px}
.teamtegels .p-label{font-size:.74rem;color:var(--inkt);font-weight:700;
  text-transform:none;letter-spacing:0;margin-bottom:2px}
.teamtegels .p-warm{color:var(--zacht);font-weight:600}
.teamtegels .periode.geen{border-color:var(--oranje)}
.teamtegels .periode.geen .p-label{color:var(--oranje-donker)}
.teamtegels .periode.actief .p-warm{color:var(--blauw-donker)}

.signaaltabel{min-width:1420px}

.taakkaart{border-left:3px solid var(--blauw)}
.taakform{align-items:center;gap:12px}
.taakform label{flex-direction:column;align-items:flex-start;gap:3px}
.taakform select{min-width:210px}
.voorbeeld{margin-top:10px}
.voorbeeld summary{cursor:pointer;font-size:.86rem;color:var(--blauw);
  font-weight:600;padding:6px 0}
.voorbeeld summary:hover{text-decoration:underline}
.onderwerpregel{font-size:.86rem;margin:6px 0}
.brieftekst{max-height:460px;overflow:auto;white-space:pre-wrap;line-height:1.5;
  font-size:.78rem}
.trechter{margin:12px 0}
.trap{display:flex;align-items:center;gap:12px;margin-bottom:7px;font-size:.85rem}
.trap-tekst{flex:1 1 200px;min-width:0;color:var(--zacht)}
.trap-balk{flex:1;height:20px;background:var(--grond);border-radius:5px;overflow:hidden}
.trap-balk i{display:block;height:100%;background:var(--blauw);
  transition:width .3s}
.trap:first-child .trap-balk i{background:var(--blauw-donker)}
.trap-getal{width:44px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.trap-pct{width:46px;text-align:right;color:var(--zacht);font-variant-numeric:tabular-nums}
.stappenrij td{padding-top:0;border-bottom:1px solid var(--lijn)}
.stappil{display:inline-block;background:var(--groen-tint);color:var(--groen-donker);
  border-radius:4px;padding:1px 8px;font-size:.72rem;margin:0 4px 3px 0}
.conversie{font-weight:700}
.conversie.hoog{color:var(--groen-donker)}
.conversie.laag{color:var(--oranje-donker)}
/* ---- mijn dag ---- */
.periode.alarm{border-color:var(--rood);background:var(--rood-tint)}
.periode.alarm .p-label,.periode.alarm .p-warm{color:var(--rood)}
.alarmkaart{border-left:3px solid var(--rood)}
.takenlijst{list-style:none;padding:0;margin:0}
.takenlijst li{border-top:1px solid var(--lijn-zacht);padding:10px 0}
.takenlijst li:first-child{border-top:0}
.taakkop{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.deadline{font-size:.78rem;color:var(--zacht);font-variant-numeric:tabular-nums;flex:none}
.deadline.telaat{color:var(--rood);font-weight:700}
.stappen{font-size:.78rem;color:var(--groen-donker);font-weight:600;margin-top:3px}
/* ---- doelen ---- */
.doelen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  margin-top:12px}
.doel{border:1px solid var(--lijn);border-radius:var(--radius);padding:12px 14px}
.doel.goed{border-left:3px solid var(--groen)}
.doel.matig{border-left:3px solid var(--oranje)}
.doel.slecht{border-left:3px solid var(--rood)}
.doellabel{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--zacht);font-weight:700;margin-bottom:7px}
.doelbalk.compact{position:relative;height:10px;background:var(--grond);border-radius:99px;
  overflow:visible;margin-bottom:8px}
.doelbalk .behaald{display:block;height:100%;background:var(--groen);border-radius:99px}
.doel.matig .behaald{background:var(--oranje)}
.doel.slecht .behaald{background:var(--rood)}
.doelbalk .streep{position:absolute;top:-3px;width:2px;height:16px;
  background:var(--inkt);opacity:.55}
.doelcijfers{font-size:.9rem}
.doelcijfers b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.persoonkaart{padding:16px 18px}
.persoonkop{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;gap:14px}
.persoonkop h2{margin:0;display:inline-block;margin-right:10px}
.statuspil{display:inline-block;border-radius:99px;padding:2px 11px;font-size:.76rem;
  font-weight:700}
.statuspil.goed{background:var(--groen-tint);color:var(--groen-donker)}
.statuspil.slecht{background:var(--rood-tint);color:var(--rood)}
.doellabel .bronpil{margin-left:5px;font-size:.6rem}
.doelinvoer{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--zacht)}
.doelinvoer input{width:100%;font-size:.84rem;padding:4px 8px}
.kop nav a.wie{margin-left:auto;color:#7f9ac4;font-size:.82rem;border-bottom:0}
.kop nav{flex:1}

.marktabel{min-width:900px}
.marktabel td{vertical-align:top;padding:8px}
.marktcel input{width:100%;max-width:170px;font-size:.84rem;padding:4px 8px;
  text-align:right;font-variant-numeric:tabular-nums}
.realisatie{font-size:.82rem;font-weight:700;margin-top:4px}
.realisatie.goed{color:var(--groen-donker)}
.realisatie.slecht{color:var(--oranje-donker)}
.realisatie .meta{display:inline;font-weight:400;margin-left:4px}
.totaalrij td{border-top:2px solid var(--lijn);background:var(--grond)}
/* ---- KPI-rij ---- */
.kpirij{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:12px;margin-bottom:18px}
@media(max-width:1100px){.kpirij{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.kpi{background:var(--vlak);border:1px solid var(--lijn-zacht);border-radius:var(--radius);
  padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.kpi.groot{border-left:4px solid var(--blauw)}
.kpi.groot.goed{border-left-color:var(--groen)}
.kpi.groot.matig{border-left-color:var(--oranje)}
.kpi.groot.slecht{border-left-color:var(--rood)}
.kpi-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--zacht);font-weight:700}
.kpi-getal{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi-sub{font-size:.78rem;color:var(--zacht)}
.kpi-status{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  margin-top:2px}
.kpi-status.goed{color:var(--groen-donker)}
.kpi-status.matig{color:var(--oranje-donker)}
.kpi-status.slecht{color:var(--rood)}
.kpi .doelbalk{margin:6px 0 2px}
/* ---- Sales Assistant ---- */

.actiekaart{display:flex;gap:14px;border-top:1px solid var(--lijn-zacht);padding:12px 0}
.actiescore{flex:none;width:42px;height:42px;border-radius:var(--radius);
  display:grid;place-items:center;font-weight:800;font-size:1rem;
  background:var(--grond);color:var(--zacht)}
.actiekaart.phoog .actiescore{background:var(--rood-tint);color:var(--rood)}
.actiekaart.pmidden .actiescore{background:var(--oranje-tint);color:var(--oranje-donker)}
.actiekaart.plaag .actiescore{background:var(--blauw-tint);color:var(--blauw-donker)}
.actieinhoud{flex:1;min-width:0}
.actietitel{font-weight:700;font-size:.95rem}
.actietitel a{color:var(--inkt)}
.waarom{margin-top:4px}
.afronden summary{cursor:pointer;font-size:.82rem;color:var(--blauw);font-weight:600;
  padding:6px 0}
.afrondform{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px;
  background:var(--grond);padding:12px;border-radius:var(--radius)}
.keuzes{display:flex;flex-wrap:wrap;gap:6px}
.keuze{background:var(--vlak);border:1px solid var(--lijn);border-radius:99px;
  padding:4px 12px;font-size:.82rem;cursor:pointer;color:var(--inkt)}
.keuze input{margin:0}
.afrondform textarea{width:100%}
.afrondform .knop{align-self:flex-start}

.todobalk{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.todotel{background:var(--grond);border:1px solid var(--lijn);border-radius:99px;
  padding:3px 12px;font-size:.8rem;color:var(--zacht);font-weight:600}
.todotel.alarm{background:var(--rood-tint);color:var(--rood);border-color:transparent}
.todotel.goed{background:var(--groen-tint);color:var(--groen-donker);border-color:transparent}
h3.alarm{color:var(--rood)}
.actieknoppen{display:flex;gap:12px;align-items:center;margin-top:6px;flex-wrap:wrap}
.actieknoppen form{margin:0}
.notitie{font-size:.86rem;background:var(--grond);padding:6px 10px;border-radius:6px;
  margin-top:4px}
.tijdlijn .taakkop{margin-bottom:2px}
/* ---- compacte kop en tabs ---- */
.minibalk{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.minikpi{flex:1;min-width:210px;background:var(--vlak);border:1px solid var(--lijn-zacht);
  border-radius:var(--radius);padding:10px 14px;display:flex;flex-direction:column;
  gap:1px;color:var(--inkt)}
.minikpi:hover{text-decoration:none}
a.minikpi:hover{border-color:var(--blauw)}
.minikpi span{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--zacht);font-weight:700}
.minikpi b{font-size:1.2rem;font-variant-numeric:tabular-nums}
.minikpi em{font-style:normal;font-size:.76rem;color:var(--zacht)}
.minikpi.goed{border-left:3px solid var(--groen)}
.minikpi.matig{border-left:3px solid var(--oranje)}
.minikpi.slecht{border-left:3px solid var(--rood)}
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--lijn);
  flex-wrap:wrap}
.tabs a{padding:9px 15px;font-size:.9rem;color:var(--zacht);font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a b{background:var(--grond);border-radius:99px;padding:0 7px;font-size:.76rem;
  margin-left:4px;color:var(--inkt)}
.tabs a:hover{color:var(--inkt);text-decoration:none}
.tabs a.actief{color:var(--blauw);border-bottom-color:var(--blauw)}
.tabs a.actief b{background:var(--blauw-tint);color:var(--blauw-donker)}
.takenblok.alarm{border-left:3px solid var(--rood)}
.takenblok.nu{border-left:3px solid var(--blauw)}
.teamtabel{min-width:1250px}
.teamtabel td{vertical-align:top}
.teamtabel .doelbalk{margin-bottom:5px}
.activiteit{display:flex;flex-direction:column;gap:1px;font-size:.8rem;color:var(--zacht)}
.activiteit b{color:var(--inkt);font-variant-numeric:tabular-nums;min-width:22px;
  display:inline-block}
.activiteit .goed b{color:var(--groen-donker)}
.aandacht{border-left:3px solid var(--oranje)}
.puntenlijst{list-style:none;padding:0;margin:0}
.puntenlijst li{padding:6px 0 6px 20px;border-top:1px solid var(--lijn-zacht);
  font-size:.88rem;position:relative}
.puntenlijst li:before{content:"!";position:absolute;left:0;font-weight:800;
  color:var(--oranje-donker)}
.puntenlijst li.target:before,.puntenlijst li.forecast:before{color:var(--rood)}
.puntenlijst li.stil:before,.puntenlijst li.liggen:before{color:var(--oranje-donker)}
.wisselaar{display:flex;align-items:center;gap:8px}
.wisselaar span{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--zacht);font-weight:700}
.wisselaar select{background:var(--vlak);color:var(--inkt);
  border:1px solid var(--lijn);border-radius:8px;font-size:.85rem;
  padding:6px 10px;font-family:inherit}
.wisselaar select:hover{border-color:var(--blauw)}
.wisselaar select option{color:var(--inkt);background:var(--vlak)}
/* ---- taakkaart ---- */
.taak{border:1px solid var(--lijn);border-radius:var(--radius);margin-bottom:12px;
  overflow:hidden;background:var(--vlak)}
.taak.phoog{border-left:4px solid var(--rood)}
.taak.pmidden{border-left:4px solid var(--oranje)}
.taak.plaag{border-left:4px solid var(--blauw)}
.taakhoofd{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;
  border-bottom:1px solid var(--lijn-zacht);background:var(--grond)}
.taakscore{flex:none;text-align:center;min-width:46px}
.taakscore b{display:block;font-size:1.25rem;font-weight:800;line-height:1}
.taakscore span{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--zacht);font-weight:700}
.taak.phoog .taakscore b{color:var(--rood)}
.taak.pmidden .taakscore b{color:var(--oranje-donker)}
.taak.plaag .taakscore b{color:var(--blauw)}
.taakwie{flex:1;min-width:0}
.taakwie h4{margin:0 0 3px;font-size:1rem}
.taakwie h4 a{color:var(--inkt)}
.taakdatum{flex:none;text-align:right;font-size:.8rem;color:var(--zacht);
  font-variant-numeric:tabular-nums}
.taakdatum .telaat{color:var(--rood);font-weight:700}
.taakvak{padding:10px 14px;border-bottom:1px solid var(--lijn-zacht)}
.taakvak p{margin:0 0 4px;font-size:.88rem;line-height:1.5}
.taakvak p:last-child{margin-bottom:0}
.vaklabel{display:block;font-size:.64rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--zacht);font-weight:800;margin-bottom:4px}
.taakvak.stap{background:var(--blauw-tint)}
.taakvak.stap .vaklabel{color:var(--blauw-donker)}
.taakvak.stap p{color:var(--blauw-donker)}
.taakvoet{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;flex-wrap:wrap}
.taakcontact{display:flex;gap:12px;flex-wrap:wrap;font-size:.85rem}
.belknop{background:var(--groen-tint);color:var(--groen-donker);font-weight:700;
  min-height:40px;display:inline-flex;align-items:center;
  padding:3px 11px;border-radius:99px}
.belknop:hover{text-decoration:none;filter:brightness(.96)}
.taakknoppen{display:flex;gap:10px;align-items:center}
.taakknoppen form{margin:0}
/* ---- begroeting ---- */
.begroeting{position:fixed;inset:0;background:rgba(27,58,109,.55);z-index:100;
  display:grid;place-items:center;padding:20px}
.begroetingsvak{background:var(--vlak);border-radius:12px;padding:28px 32px;
  max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.begroetingsvak h2{font-size:1.4rem;margin-bottom:2px}
.begroetingscijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:18px 0}
.begroetingscijfers div{text-align:center;background:var(--grond);
  border-radius:var(--radius);padding:12px 6px}
.begroetingscijfers b{display:block;font-size:1.7rem;font-weight:700;line-height:1.1}
.begroetingscijfers span{font-size:.7rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--zacht);font-weight:700}
.begroetingscijfers .alarm{background:var(--rood-tint)}
.begroetingscijfers .alarm b{color:var(--rood)}
.begroetingscijfers .nu{background:var(--blauw-tint)}
.begroetingscijfers .nu b{color:var(--blauw-donker)}
.begroetingslijn{font-size:.9rem;margin:6px 0}
.begroetingsvak .knop{margin-top:14px;width:100%;text-align:center;padding:11px}

.teamtabel tr.leadrij td{background:var(--grond)}
.teamtabel tr.leadrij .naam{font-size:.98rem}

.rayonstaven{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin-top:12px}
.rayonstaaf{border:1px solid var(--lijn);border-radius:var(--radius);padding:12px 14px}
.rayonstaaf.goed{border-left:4px solid var(--groen)}
.rayonstaaf.slecht{border-left:4px solid var(--oranje)}
.rayonkop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-bottom:8px;flex-wrap:wrap}
.rayonkop b{font-size:1rem}
.rayoncijfers{margin-top:7px}
.rayoncijfers b{font-size:1.15rem;font-variant-numeric:tabular-nums}
/* ---- projecten ---- */
.uitleg{background:var(--blauw-tint);border-color:transparent}
.uitleg .sub{color:var(--blauw-donker)}
.project{border:1px solid var(--lijn);border-radius:var(--radius);
  background:var(--vlak);margin-bottom:14px;overflow:hidden}
.projecthoofd{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;
  background:var(--grond);border-bottom:1px solid var(--lijn-zacht)}
.projectscore{flex:none;text-align:center;min-width:46px}
.projectscore b{display:block;font-size:1.25rem;font-weight:800;line-height:1;
  color:var(--blauw)}
.projectscore span{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--zacht);font-weight:700}
.projectwie{flex:1;min-width:0}
.projectwie h3{margin:0 0 3px;font-size:1rem;text-transform:none;letter-spacing:0;
  color:var(--inkt)}
.projectstatus{flex:none}
.projectvak{padding:10px 14px;border-bottom:1px solid var(--lijn-zacht)}
.projectvak:last-child{border-bottom:0}
.projectvak p{margin:0;font-size:.88rem;line-height:1.5}
.stappenvak{background:var(--vlak)}
.stappenrij{display:flex;flex-wrap:wrap;gap:7px}
.stappenrij form{margin:0}
.stapknop{background:var(--vlak);border:1px solid var(--lijn);border-radius:99px;
  padding:5px 13px;font:inherit;font-size:.82rem;cursor:pointer;color:var(--zacht)}
.stapknop:hover{border-color:var(--blauw);color:var(--blauw)}
.stapknop.gedaan{background:var(--groen-tint);border-color:transparent;
  color:var(--groen-donker);font-weight:700}
.notitieform{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:0}
.notitieform textarea{width:100%}
.werkpil.ontwerp{background:var(--groen-tint);color:var(--groen-donker);border-color:transparent}
.werkpil.gegund{background:var(--oranje-tint);color:var(--oranje-donker);border-color:transparent}
.werkpil.uitvoering{background:var(--lijn-zacht);color:var(--zacht);border-color:transparent}

/* Waarom staat dit project op mijn lijst? */
.afdelingpil {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  background: var(--merk-tint); color: var(--blauw-donker);
  font-size: .72rem; font-weight: 600;
}
.meta.waarom {
  margin-top: .35rem; padding-left: .6rem;
  border-left: 3px solid var(--oranje); color: var(--inkt); font-style: italic;
}

/* Leveradvies en actueel nieuws op de projectkaart */
.grondslag { float: right; font-style: normal; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--zacht); font-size: .74rem; }
.levertabel { width: 100%; border-collapse: collapse; }
.levertabel td { padding: .45rem .5rem; border-top: 1px solid var(--lijn-zacht);
  vertical-align: top; }
.levertabel tr:first-child td { border-top: 0; }
.leveraantal { white-space: nowrap; width: 8.5rem; color: var(--blauw-donker); }
.leveraantal b { font-size: 1.15rem; }
.rekensom { margin-left: .5rem; font-size: .74rem; color: var(--zacht);
  font-variant-numeric: tabular-nums; }
.onzeker { margin-top: .5rem; font-style: italic; }
.nieuwslijst { list-style: none; margin: 0 0 .6rem; padding: 0; }
.nieuwslijst li { padding: .4rem 0; border-top: 1px solid var(--lijn-zacht);
  line-height: 1.45; }
.nieuwslijst li:first-child { border-top: 0; }
.fasepil, .zekerpil { display: inline-block; padding: .05rem .45rem;
  border-radius: 999px; font-size: .7rem; font-weight: 600; margin-right: .3rem; }
.fasepil.verleend { background: var(--groen-tint); color: var(--groen-donker); }
.fasepil.aangevraagd { background: var(--oranje-tint); color: var(--oranje-donker); }
.fasepil.ingetrokken { background: var(--rood-tint); color: var(--rood); }
.fasepil.onbekend { background: var(--lijn-zacht); color: var(--zacht); }
.zekerpil.zeker { background: var(--blauw-tint); color: var(--blauw-donker); }
.zekerpil.mogelijk { background: transparent; color: var(--zacht);
  border: 1px solid var(--lijn); }
.projectstatus .fasepil { display: block; margin: 0 0 .35rem; text-align: center; }

/* Testmodus: zichtbaar maken dat je meekijkt als iemand anders */
.meekijkbalk {
  margin-bottom: 1rem; padding: .6rem .9rem; border-radius: var(--radius);
  background: var(--oranje-tint); color: var(--oranje-donker);
  border: 1px solid var(--oranje); font-size: .85rem;
}
.meekijkbalk a { margin-left: .5rem; font-weight: 600; color: inherit; }

/* ---------------------------------------------------------------------------
   MIJN DAG — kop, doelkaart en 'wat heb je gedaan'
--------------------------------------------------------------------------- */
.dagkop{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-bottom:16px}

.hero{background:linear-gradient(135deg,var(--paneel),var(--paneel-diep));
  color:#fff;border-radius:14px;padding:24px 26px;display:flex;
  flex-direction:column;justify-content:space-between;gap:20px;
  box-shadow:0 6px 20px rgba(16,38,74,.16)}
.herolabel{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:#93b2dc;font-weight:700}
.hero h1{font-size:1.72rem;margin:6px 0 6px;color:#fff;letter-spacing:-.02em;
  line-height:1.2}
.hero p{margin:0;color:#c3d5ee;font-size:.9rem;max-width:46ch}
.herocijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.herocijfer{background:rgba(255,255,255,.1);border-radius:10px;padding:11px 12px;
  color:#fff;display:block;border:1px solid rgba(255,255,255,.13)}
.herocijfer:hover{background:rgba(255,255,255,.19);text-decoration:none}
.herocijfer b{display:block;font-size:1.5rem;line-height:1.1;font-weight:700}
.herocijfer span{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:#a8c2e4}
.herocijfer.alarm{background:rgba(240,120,72,.26);border-color:rgba(240,120,72,.5)}
.herocijfer.alarm b{color:#ffcbb4}
.herocijfer.nu{background:rgba(255,255,255,.2)}

.doelkaart{display:flex;flex-direction:column;justify-content:center;margin:0}
.doelkop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.doelkop h2{margin:0}
.doelgetal{font-size:1.95rem;font-weight:700;letter-spacing:-.025em;
  margin-top:10px;font-variant-numeric:tabular-nums}
.doelsub{color:var(--zacht);font-size:.84rem;margin-bottom:14px}
.doelbalk{position:relative;height:11px;border-radius:999px;
  background:var(--lijn-zacht);overflow:visible}
.doelvulling{height:100%;border-radius:999px;background:var(--blauw);
  transition:width .4s ease}
.doelvulling.goed{background:var(--groen)}
.doelvulling.achter{background:var(--oranje)}
.doelmarkering{position:absolute;top:-4px;width:2px;height:19px;
  background:var(--inkt);opacity:.55;border-radius:2px}
.doelvoet{display:flex;justify-content:space-between;gap:10px;margin-top:11px;
  font-size:.78rem;color:var(--zacht)}
.doelvoet b{color:var(--inkt)}

.gedaanstrip{background:var(--vlak);border:1px solid var(--lijn-zacht);
  border-radius:12px;padding:14px 18px;margin-bottom:18px}
.gedaankop{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:10px}
.gedaankop a{font-size:.8rem}
.gedaanrij{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gedaan{background:var(--groen-tint);border-radius:10px;padding:8px 14px;
  min-width:112px}
.gedaan b{display:block;font-size:1.3rem;font-weight:700;color:var(--groen-donker);
  line-height:1.15}
.gedaan span{font-size:.72rem;color:var(--zacht)}
.gedaan.leeg{background:var(--grond)}
.gedaan.leeg b{color:var(--zacht)}
.gedaanknop{margin-left:auto}

.taakmeer{margin:0 14px 10px}
.taakmeer summary{cursor:pointer;font-size:.79rem;color:var(--zacht);
  padding:6px 0;list-style:none}
.taakmeer summary::-webkit-details-marker{display:none}
.taakmeer summary:before{content:"▸ ";color:var(--blauw)}
.taakmeer[open] summary:before{content:"▾ "}
.taakmeer summary:hover{color:var(--blauw)}
.naarbedrijf{font-weight:600}
.leegvak{text-align:center;padding:38px 24px}

@media (max-width:1050px){
  .dagkop{grid-template-columns:1fr}
  .herocijfers{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:560px){
  .hero h1{font-size:1.35rem}
  .herocijfers{grid-template-columns:repeat(2,1fr)}
}
.vastfilter{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:999px;background:var(--merk-tint);color:var(--blauw-donker);
  font-size:.8rem;font-weight:600}

/* ---- checklist in de taakkaart ---- */
.checklist .voortgang{float:right;font-style:normal;text-transform:none;
  letter-spacing:0;font-weight:600;color:var(--blauw)}
.stapjes{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.stapje{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stapvink button{display:flex;align-items:center;gap:9px;width:100%;
  text-align:left;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:9px;padding:7px 12px;font:inherit;font-size:.85rem;
  color:var(--inkt);cursor:pointer;transition:border-color .12s,background .12s}
.stapvink button:hover{border-color:var(--blauw);background:var(--merk-tint)}
.stapje.gedaan .stapvink button{background:var(--groen-tint);
  border-color:var(--groen);color:var(--groen-donker);font-weight:600}
.vinkje{width:18px;height:18px;flex:0 0 18px;border-radius:5px;
  border:1.5px solid var(--lijn);display:grid;place-items:center;
  font-size:.72rem;font-weight:800;line-height:1}
.stapje.gedaan .vinkje{background:var(--groen);border-color:var(--groen);
  color:#fff}
.stapvink{flex:1 1 260px}
.stapnotitie{display:flex;gap:6px;flex:2 1 320px}
.stapnotitie input[type=text]{flex:1;border:1px solid var(--lijn-zacht);
  border-radius:8px;padding:6px 10px;font:inherit;font-size:.82rem;
  background:var(--grond);color:var(--inkt)}
.stapnotitie input[type=text]:focus{outline:none;border-color:var(--blauw);
  background:var(--vlak)}

/* ---------------------------------------------------------------------------
   GRAFIEKEN — kale SVG, geen bibliotheek van buiten
--------------------------------------------------------------------------- */
.grafiek{margin:0}
.grafiek svg{width:100%;height:190px;display:block;overflow:visible}
.hulplijn{stroke:var(--lijn-zacht);stroke-width:1;vector-effect:non-scaling-stroke}
.hulplijn.doellijn{stroke:var(--rood);stroke-width:1.5;stroke-dasharray:5 4;
  opacity:.7}
.staaf{fill:var(--blauw-tint)}
.staaf.toekomst{fill:var(--lijn-zacht)}
.lijn{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.lijn.verwacht{stroke:var(--zacht);stroke-dasharray:6 5;stroke-width:1.5;
  opacity:.75}
.lijn.echt{stroke:var(--blauw)}
.punt{fill:var(--blauw);stroke:var(--vlak);stroke-width:1.5}
.punt.achter{fill:var(--oranje)}
.punt.voor{fill:var(--groen)}
.maandnamen{display:grid;grid-template-columns:repeat(12,1fr);margin-top:4px}
.maandnamen span{text-align:center;font-size:.68rem;color:var(--zacht);
  text-transform:capitalize}
.maandnamen span.toekomst{opacity:.4}
.grafieklegenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;
  font-size:.74rem;color:var(--zacht)}
.grafieklegenda .uitleg{display:inline-flex;align-items:center;gap:6px;
  background:none;border:0}
.uitleg:before{content:"";width:16px;height:3px;border-radius:2px}
.uitleg.echt:before{background:var(--blauw)}
.uitleg.verwacht:before{background:var(--zacht);height:0;
  border-top:2px dashed var(--zacht)}
.uitleg.staaf:before{background:var(--blauw-tint);height:11px;width:7px}

.minibalk-doel{position:relative;height:8px;border-radius:999px;
  background:var(--lijn-zacht);min-width:110px;overflow:visible}
.minibalk-doel .vulling{height:100%;border-radius:999px;background:var(--blauw)}
.minibalk-doel .vulling.voor{background:var(--groen)}
.minibalk-doel .vulling.achter{background:var(--oranje)}
.minibalk-doel .markering{position:absolute;top:-3px;width:2px;height:14px;
  background:var(--inkt);opacity:.5;border-radius:2px}
.rayontabel input{width:8.5rem;border:1px solid var(--lijn);border-radius:7px;
  padding:6px 9px;font:inherit;font-size:.88rem;text-align:right;
  font-variant-numeric:tabular-nums;background:var(--vlak);color:var(--inkt)}
.rayontabel input:focus{outline:none;border-color:var(--blauw)}
.meta.waarschuwing{color:var(--oranje-donker);font-weight:600}
.formvoet{display:flex;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.formvoet .sub{flex:1 1 340px;margin:0}

/* Brede tabellen mogen zelf schuiven; de pagina zelf nooit. */
.tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rayontabel{min-width:760px}
.grafieklegenda{margin-top:14px}
.grafiek svg{margin-bottom:2px}

/* ---- gebruikersbeheer ---- */
/* Elk veld is een gelijke kolom met label, invoer en hint onder elkaar; zo
   staan de invoervakken op één lijn ook als de ene hint langer is dan de andere. */
/* Specifieker dan de algemene '.kaart form'-regel, anders wint die met zijn
   flexbox en staan de invoervakken alsnog niet op één lijn. */
.kaart form.gebruikerform{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;align-items:start}
.kaart form.gebruikerform label{display:flex;flex-direction:column;gap:5px;
  font-size:.8rem;font-weight:600;color:var(--zacht);margin:0}
/* Elk veld even hoog: label één regel, dan de invoer, dan de hint. */
.kaart form.gebruikerform label > input,
.kaart form.gebruikerform label > select{margin-top:auto}
.kaart form.gebruikerform > button{align-self:end;margin-bottom:1.15rem}
.gebruikerform input,.gebruikerform select{border:1px solid var(--lijn);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:.9rem;
  background:var(--vlak);color:var(--inkt);font-weight:400}
.gebruikerform input:focus,.gebruikerform select:focus{outline:none;
  border-color:var(--blauw)}
.veldhint{font-weight:400;font-size:.72rem;color:var(--zacht)}
.gebruikertabel input,.gebruikertabel select{border:1px solid var(--lijn-zacht);
  border-radius:7px;padding:5px 8px;font:inherit;font-size:.85rem;width:100%;
  max-width:190px;min-width:120px;background:var(--vlak);color:var(--inkt)}
.gebruikertabel td{vertical-align:top}
.gebruikertabel td .meta{margin-top:4px;max-width:230px;line-height:1.35}
.gebruikertabel input:focus,.gebruikertabel select:focus{outline:none;
  border-color:var(--blauw)}
.gebruikertabel tr.geblokkeerd{opacity:.5}
.gebruikeracties{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wachtwoordvak{border-color:var(--oranje);box-shadow:0 0 0 3px var(--oranje-tint)}
.wachtwoordregel{display:flex;align-items:center;gap:12px;margin-top:12px}
.wachtwoordregel code{font-size:1.25rem;font-weight:700;letter-spacing:.02em;
  background:var(--grond);border:1px dashed var(--lijn);border-radius:9px;
  padding:11px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* Inlogscherm: geen navigatie, alleen het formulier gecentreerd. */
.schil.kaal{grid-template-columns:1fr;background:var(--grond)}
.schil.kaal main{display:grid;place-items:center;min-height:100vh;padding:24px}

/* Terugknop in de meekijkbalk: dezelfde toon als de balk zelf. */
.meekijkbalk .terugform{display:inline;margin:0}
.meekijkbalk .terugform button{margin-left:.5rem;background:var(--oranje-donker);
  color:#fff;border:0;border-radius:7px;padding:5px 12px;font:inherit;
  font-size:.82rem;font-weight:600;cursor:pointer}
.meekijkbalk .terugform button:hover{background:var(--inkt)}

/* ---- inlogformulier ---- */
.loginform{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.loginform label{font-size:.76rem;font-weight:700;color:var(--zacht);
  letter-spacing:.03em;margin-top:10px}
.loginform input{width:100%;border:1px solid var(--lijn);border-radius:9px;
  padding:10px 12px;font:inherit;font-size:.95rem;background:var(--vlak);
  color:var(--inkt)}
.loginform input:focus{outline:none;border-color:var(--blauw);
  box-shadow:0 0 0 3px var(--merk-tint)}
.wachtwoordveld{position:relative;display:flex;align-items:center}
.wachtwoordveld input{padding-right:4.6rem}
.toonknop{position:absolute;right:6px;background:transparent;border:0;
  color:var(--blauw);font:inherit;font-size:.78rem;font-weight:600;
  cursor:pointer;padding:6px 8px;border-radius:6px}
.toonknop:hover{background:var(--merk-tint)}
.loginform .knop{margin-top:16px;padding:11px}

/* ---------------------------------------------------------------------------
   PIJPLIJN — open trajecten die aandacht vragen
--------------------------------------------------------------------------- */
.prognosehero{margin-bottom:16px}
.prognosehero .herocijfers{grid-template-columns:repeat(4,1fr)}
.prognosehero .herocijfer b{font-size:1.15rem}

.traject{display:grid;grid-template-columns:64px 1fr auto;gap:14px;
  align-items:start;padding:13px 0;border-top:1px solid var(--lijn-zacht)}
.traject:first-of-type{border-top:0}
.trajectscore{text-align:center}
.trajectscore b{display:block;font-size:1.35rem;font-weight:700;line-height:1.1;
  color:var(--oranje-donker)}
.trajectscore span{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--zacht)}
.trajectkern h4{margin:0 0 2px;font-size:1rem;letter-spacing:-.01em}
.trajectredenen{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.trajectgeld{text-align:right;min-width:150px;display:flex;
  flex-direction:column;align-items:flex-end;gap:2px}
.trajectgeld b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.trajectgeld span{font-size:.74rem;color:var(--zacht)}
.kanspil{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:999px;
  background:var(--merk-tint);color:var(--blauw-donker);font-size:.7rem;
  font-weight:700}
@media (max-width:760px){
  .traject{grid-template-columns:52px 1fr}
  .trajectgeld{grid-column:1 / -1;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:10px;text-align:left}
}

/* ---------------------------------------------------------------------------
   KANSEN — de commerciële inbox
   Rustige regels, kleur alleen waar het betekenis heeft.
--------------------------------------------------------------------------- */
.kansrij{display:grid;grid-template-columns:52px 1fr 190px;gap:16px;
  align-items:start;padding:14px 0;border-top:1px solid var(--lijn-zacht)}
.kansrij:first-of-type{border-top:0}
.kansrij.rustig{opacity:.62}
.kansscore{display:grid;place-items:center;height:44px;border-radius:11px;
  font-weight:700;font-size:1.05rem;background:var(--grond);color:var(--inkt);
  border:1px solid var(--lijn-zacht)}
.kansscore:hover{text-decoration:none;border-color:var(--blauw)}
.kansscore.hoog{background:var(--groen-tint);color:var(--groen-donker);
  border-color:var(--groen)}
.kansscore.midden{background:var(--merk-tint);color:var(--blauw-donker);
  border-color:var(--blauw)}
.kansscore.laag{background:var(--oranje-tint);color:var(--oranje-donker)}
.kanskern h4{margin:0 0 3px;font-size:.98rem;letter-spacing:-.01em}
.kansadvies{margin:6px 0 0;font-size:.87rem;color:var(--inkt);max-width:72ch}
.kansactie{text-align:right;display:flex;flex-direction:column;align-items:flex-end;
  gap:3px}
.actiepil{display:inline-block;padding:3px 11px;border-radius:999px;
  background:var(--blauw);color:#fff;font-size:.76rem;font-weight:650}
.actiepil.rustig{background:var(--grond);color:var(--zacht);
  border:1px solid var(--lijn)}
.wanneer{font-size:.76rem;color:var(--zacht);font-weight:600}
.scorepil{display:inline-block;padding:2px 11px;border-radius:999px;
  font-size:.85rem;font-weight:700;background:var(--grond);vertical-align:middle}
.scorepil.hoog{background:var(--groen-tint);color:var(--groen-donker)}
.scorepil.midden{background:var(--merk-tint);color:var(--blauw-donker)}

/* ---- adviescard ---- */
.advies{border:1px solid var(--lijn-zacht);border-left:3px solid var(--blauw);
  border-radius:12px;padding:16px 18px;margin:14px 0;background:var(--grond)}
.advieskop{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px}
.timingpil{padding:2px 11px;border-radius:999px;background:var(--vlak);
  border:1px solid var(--lijn);font-size:.74rem;font-weight:700;
  color:var(--zacht)}
.timingpil.nu{background:var(--oranje);border-color:var(--oranje);color:#fff}
.adviesvakken{margin:0;display:grid;gap:3px}
.adviesvakken dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--zacht);margin-top:9px}
.adviesvakken dt:first-child{margin-top:0}
.adviesvakken dd{margin:0;font-size:.9rem;line-height:1.5;max-width:74ch}
.adviesvakken dd.doedit{font-weight:600}
.adviesknoppen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:14px}
.afwijzen summary{cursor:pointer;font-size:.82rem;color:var(--zacht);
  padding:7px 12px;border:1px solid var(--lijn);border-radius:8px;
  background:var(--vlak);list-style:none}
.afwijzen summary::-webkit-details-marker{display:none}
.afwijzen summary:hover{color:var(--rood);border-color:var(--rood)}
.afwijsform{margin-top:10px}

/* ---- tijdlijn ---- */
.tijdlijn{list-style:none;margin:8px 0 0;padding:0}
.tijdlijn li{display:grid;grid-template-columns:110px 88px 1fr;gap:10px;
  padding:7px 0;border-top:1px solid var(--lijn-zacht);align-items:baseline;
  font-size:.86rem}
.tijdlijn li:first-child{border-top:0}
.tijdstip{color:var(--zacht);font-size:.78rem;font-variant-numeric:tabular-nums}
.tijdtekst .sub{display:block;margin-top:2px}
.bronpil.website{background:var(--merk-tint);color:var(--blauw-donker)}
.bronpil.crm{background:var(--paars-tint);color:var(--paars-donker)}
.bronpil.bouwproject{background:var(--oranje-tint);color:var(--oranje-donker)}
.bronpil.bekendmaking{background:var(--groen-tint);color:var(--groen-donker)}
.kansdetail{border-color:var(--blauw);box-shadow:0 4px 18px rgba(48,102,190,.1)}

@media (max-width:820px){
  .kansrij{grid-template-columns:46px 1fr}
  .kansactie{grid-column:1 / -1;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:10px}
  .tijdlijn li{grid-template-columns:1fr;gap:2px}
}

/* ---------------------------------------------------------------------------
   DAGELIJKSE BRIEFING — drie kansen, meer niet
--------------------------------------------------------------------------- */
.briefing{margin-bottom:18px}
.briefingkop{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:10px}
.briefingkop h2{margin:0}
.briefingkop a{font-size:.82rem}
.briefingrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:12px}
.briefkaart{background:var(--vlak);border:1px solid var(--lijn-zacht);
  border-radius:13px;padding:16px 17px;display:flex;flex-direction:column;
  gap:9px;transition:box-shadow .18s,border-color .18s}
.briefkaart:hover{box-shadow:0 4px 18px rgba(16,38,74,.08);
  border-color:var(--lijn)}
.briefkaart header{display:flex;gap:11px;align-items:flex-start}
.briefkaart .rang{flex:0 0 26px;height:26px;border-radius:8px;
  background:var(--paneel);color:#fff;display:grid;place-items:center;
  font-size:.8rem;font-weight:700}
.briefkaart h3{margin:0 0 3px;font-size:.97rem;letter-spacing:-.01em;
  line-height:1.3}
.briefwaarom{margin:0;font-size:.85rem;color:var(--zacht);line-height:1.5}
.briefadvies{margin:0;font-size:.89rem;font-weight:600;line-height:1.5}
.briefkaart footer{display:flex;gap:8px;align-items:center;margin-top:auto;
  padding-top:4px}
.meerlink{font-size:.8rem;color:var(--zacht);margin-left:auto}
.meerlink:hover{color:var(--blauw)}

/* Kans voor een collega: opvallend genoeg om te zien, rustig genoeg om niet
   met het eigen advies te concurreren. */
.kanscross,.adviesvakken dd.crosssell{margin:6px 0 0;padding:7px 11px;
  border-radius:9px;background:var(--paars-tint);color:var(--paars-donker);
  font-size:.83rem;line-height:1.45;font-weight:500}
.uitlegvak{background:var(--grond)}
.uitlegrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin:12px 0}
.uitlegrij h3{margin:0 0 5px;font-size:.8rem;color:var(--blauw-donker);
  text-transform:none;letter-spacing:0}
.uitlegrij .sub{margin:0;max-width:52ch}

/* 'Waarom staat dit bij mij?' — uitklapbaar, zodat de kaart rustig blijft. */
.waaromvak{margin:0 14px 12px;border:1px solid var(--lijn-zacht);
  border-radius:10px;background:var(--grond)}
.waaromvak summary{cursor:pointer;padding:9px 13px;font-size:.83rem;
  font-weight:600;color:var(--blauw);list-style:none}
.waaromvak summary::-webkit-details-marker{display:none}
.waaromvak summary:before{content:"? ";font-weight:800}
.waaromvak[open] summary{border-bottom:1px solid var(--lijn-zacht)}
.waarominhoud{padding:12px 13px}
.waaromregel{margin:0 0 9px;font-size:.85rem;line-height:1.55;max-width:76ch}
.waaromregel:last-child{margin-bottom:0}
details.uitlegvak{padding:0;margin-bottom:14px}
details.uitlegvak summary{cursor:pointer;padding:13px 18px;font-weight:600;
  font-size:.88rem;color:var(--blauw);list-style:none}
details.uitlegvak summary::-webkit-details-marker{display:none}
details.uitlegvak summary:before{content:"? ";font-weight:800}
details.uitlegvak[open] summary{border-bottom:1px solid var(--lijn-zacht)}
details.uitlegvak .uitlegrij{padding:16px 18px;margin:0}
.taakvak.waaromregel-kort{background:var(--grond)}
.taakvak.waaromregel-kort p{margin:0;font-size:.87rem;color:var(--inkt)}

/* ---------------------------------------------------------------------------
   UITLIJNING VAN KOPPEN
   h3 is in deze stijl een sectielabel in kapitalen. Waar een kop een naam is -
   een bedrijf, een rayon, een kaarttitel - is dat verkeerd: dan is het inhoud
   en hoort het gewoon leesbaar te zijn.
--------------------------------------------------------------------------- */
.briefkaart h3,
.uitlegrij h3,
.doelkop h2,
.kansdetail h2,
.briefingkop h2,
.gedaankop .vaklabel{text-transform:none; letter-spacing:-.01em}
.briefkaart h3{font-size:.97rem; color:var(--inkt); margin:0 0 3px}
.uitlegrij h3{font-size:.86rem; color:var(--blauw-donker); margin:0 0 5px;
  font-weight:650}
.doelkop h2,.briefingkop h2{font-size:1.05rem; color:var(--inkt)}
.gedaankop .vaklabel{font-size:.82rem; font-weight:600; color:var(--inkt);
  letter-spacing:0}
/* Briefkaarten even hoog, zonder dat de tekst wordt afgekapt. */
.briefingrij{align-items:stretch}
.briefkaart{min-height:0; overflow:visible}
.briefkaart h3{overflow-wrap:anywhere}

/* ---------------------------------------------------------------------------
   FEITENLIJST — waar sta ik mee te maken?
   Label links, waarde rechts. Een groen streepje helpt mee, oranje schuurt.
--------------------------------------------------------------------------- */
.feiten{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:1px;
  background:var(--lijn-zacht);border:1px solid var(--lijn-zacht);
  border-radius:9px;overflow:hidden}
.feiten li{display:grid;grid-template-columns:112px 1fr;gap:10px;
  padding:6px 11px;background:var(--vlak);font-size:.82rem;align-items:baseline;
  border-left:3px solid transparent}
.feiten li.goed{border-left-color:var(--groen)}
.feiten li.let-op{border-left-color:var(--oranje)}
.flabel{color:var(--zacht);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;font-weight:600}
.fwaarde{font-weight:600;color:var(--inkt)}
.fextra{grid-column:2;color:var(--zacht);font-size:.78rem;font-weight:400}
.feiten li.goed .fwaarde{color:var(--groen-donker)}
.feiten li.let-op .fwaarde{color:var(--oranje-donker)}
@media (max-width:520px){
  .feiten li{grid-template-columns:1fr;gap:0}
  .fextra{grid-column:1}
}

/* ---------------------------------------------------------------------------
   TAAK OPPAKKEN — bellen, mailen, afspraak maken, zonder naar ZOHO te gaan
--------------------------------------------------------------------------- */
.oppakken{margin:0 14px 12px;border:1px solid var(--lijn);border-radius:11px;
  background:var(--vlak);overflow:hidden}
.oppakken summary{cursor:pointer;padding:11px 15px;list-style:none;
  display:flex;align-items:center;gap:10px}
.oppakken summary::-webkit-details-marker{display:none}
.oppaktekst{background:var(--blauw);color:#fff;border-radius:8px;
  padding:6px 15px;font-size:.86rem;font-weight:650}
.oppakken summary:hover .oppaktekst{background:var(--blauw-donker)}
.oppakken[open] summary{border-bottom:1px solid var(--lijn-zacht)}
.afspraakpil{background:var(--groen-tint);color:var(--groen-donker);
  border-radius:999px;padding:3px 11px;font-size:.77rem;font-weight:650}
.oppakinhoud{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:16px 15px}
.oppakkolom > .vaklabel{margin-bottom:8px;display:block}
.personen{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:9px}
.personen li{padding:9px 12px;background:var(--vlak);border:1px solid var(--lijn-zacht);
  border-radius:9px}
.contactrij{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px;font-size:.84rem}
.belknop.groot{font-size:.95rem;padding:7px 14px}
.bedrijfsgegevens{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:10px;border-top:1px solid var(--lijn-zacht);font-size:.84rem}
.afspraakform{display:grid;gap:9px}
.afspraakform label{display:grid;gap:4px;font-size:.74rem;font-weight:600;
  color:var(--zacht);text-transform:uppercase;letter-spacing:.05em}
.afspraakform input,.afspraakform textarea{border:1px solid var(--lijn);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:.88rem;
  font-weight:400;text-transform:none;letter-spacing:0;background:var(--vlak);
  color:var(--inkt)}
.afspraakform input:focus,.afspraakform textarea:focus{outline:none;
  border-color:var(--blauw)}
.afspraakrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
@media (max-width:760px){ .oppakinhoud{grid-template-columns:1fr} }

/* ---------------------------------------------------------------------------
   RELATIE versus BRON — twee verschillende vragen
   'CRM' als badge las als 'dit is een klant', terwijl het alleen zei dat er
   iets over dit bedrijf in ZOHO stond. De relatie staat nu apart en met kleur;
   de bronnen staan eronder als 'gezien via', in grijs.
--------------------------------------------------------------------------- */
.relatiepil{display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:.75rem;font-weight:650;border:1px solid transparent}
.relatiepil.goed{background:var(--groen-tint);color:var(--groen-donker);
  border-color:var(--groen)}
.relatiepil.let-op{background:var(--oranje-tint);color:var(--oranje-donker);
  border-color:var(--oranje)}
.relatiepil.neutraal{background:var(--grond);color:var(--zacht);
  border-color:var(--lijn)}
.bronregel{margin-top:4px;font-size:.73rem;color:var(--zacht)}
.bronregel .bronpil{font-weight:500;font-size:.7rem;text-transform:none;
  letter-spacing:0}

/* ---------------------------------------------------------------------------
   BOUWPROJECT VAN VANDAAG
   Andere bron dan de kansen, dus een eigen gezicht — maar rustig, want het is
   werk voor over twee jaar, niet voor vanmiddag.
--------------------------------------------------------------------------- */
.dagproject{margin-top:12px;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:13px;padding:16px 18px}
.dagprojectkop{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.dagprojectlabel{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--oranje-donker);background:var(--oranje-tint);
  padding:3px 10px;border-radius:999px}
.dagprojectscore{margin-left:auto;font-weight:700;font-size:.95rem;
  color:var(--inkt);background:var(--grond);border:1px solid var(--lijn);
  border-radius:8px;padding:2px 11px}
.dagproject h3{margin:0 0 4px;font-size:1.02rem;text-transform:none;
  letter-spacing:-.01em;color:var(--inkt)}
.dagprojectwaarom{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;
  margin:13px 0 0;align-items:baseline}
.dagprojectwaarom dt{font-size:.68rem;text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;color:var(--zacht);white-space:nowrap}
.dagprojectwaarom dd{margin:0;font-size:.87rem;line-height:1.5;max-width:78ch}
.dagprojectwaarom dd.doedit{font-weight:600}
.dagprojectvoet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px}
@media (max-width:640px){
  .dagprojectwaarom{grid-template-columns:1fr;gap:2px}
  .dagprojectwaarom dt{margin-top:8px}
}

/* ---------------------------------------------------------------------------
   ZELF VERDER ZOEKEN — kant-en-klare zoekopdrachten
--------------------------------------------------------------------------- */
.zoekvak{margin:0 14px 12px;border:1px solid var(--lijn-zacht);
  border-radius:10px;background:var(--grond)}
.zoekvak summary{cursor:pointer;padding:9px 13px;font-size:.83rem;
  font-weight:600;color:var(--blauw);list-style:none}
.zoekvak summary::-webkit-details-marker{display:none}
.zoekvak summary:before{content:"↗ "}
.zoekvak[open] summary{border-bottom:1px solid var(--lijn-zacht)}
.zoekinhoud{padding:12px 13px}
.zoekrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:8px;margin-top:10px}
.zoekknop{display:block;padding:9px 12px;border:1px solid var(--lijn);
  border-radius:9px;background:var(--vlak);color:var(--inkt);
  transition:border-color .15s,background .15s}
.zoekknop:hover{border-color:var(--blauw);background:var(--merk-tint);
  text-decoration:none}
.zoekknop b{display:block;font-size:.85rem;font-weight:600;color:var(--blauw)}
.zoekknop span{display:block;font-size:.74rem;color:var(--zacht);margin-top:2px;
  line-height:1.4}
.bronpil.aanbesteding{background:var(--paars-tint);color:var(--paars-donker)}

/* ---------------------------------------------------------------------------
   MENUTIP — één zin bij het menu-item waar de muis op staat
   Als position:fixed buiten de zijbalk, want die heeft overflow-y:auto en zou
   alles wat uitsteekt afkappen.
--------------------------------------------------------------------------- */
#menutip{
  position:fixed; z-index:60; left:-999px; top:-999px;
  max-width:270px; padding:9px 13px; border-radius:10px;
  background:var(--inkt); color:var(--vlak);
  font-size:.79rem; line-height:1.45; font-weight:400;
  box-shadow:0 6px 22px rgba(15,25,40,.28);
  opacity:0; transform:translateX(-4px); pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}
#menutip.zichtbaar{opacity:1; transform:translateX(0)}
/* Pijltje naar het menu-item toe. */
#menutip:before{
  content:""; position:absolute; left:-5px; top:50%; margin-top:-5px;
  border:5px solid transparent; border-right-color:var(--inkt);
  border-left:0;
}
@media (prefers-reduced-motion:reduce){
  #menutip{transition:none; transform:none}
}
/* Op smalle schermen staat het menu horizontaal; dan is een tip in de weg. */
@media (max-width:900px){ #menutip{display:none} }

/* ---------------------------------------------------------------------------
   ZOEKEN en VERLOPEN TRAJECTEN
--------------------------------------------------------------------------- */
.zoekbalk-groot{display:flex;gap:9px;margin-bottom:18px}
.zoekbalk-groot input[type=search]{flex:1;border:1px solid var(--lijn);
  border-radius:11px;padding:12px 16px;font:inherit;font-size:1rem;
  background:var(--vlak);color:var(--inkt)}
.zoekbalk-groot input[type=search]:focus{outline:none;border-color:var(--blauw);
  box-shadow:0 0 0 3px var(--merk-tint)}
.zoektabel td{vertical-align:top}
.zoektabel .meta{line-height:1.4}
.uitslagpil{display:inline-block;padding:1px 8px;border-radius:999px;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  margin-right:4px}
.uitslagpil.open{background:var(--merk-tint);color:var(--blauw-donker)}
.uitslagpil.gewonnen{background:var(--groen-tint);color:var(--groen-donker)}
.uitslagpil.verloren{background:var(--lijn-zacht);color:var(--zacht)}
.uitslagpil.verlopen{background:var(--rood-tint);color:var(--rood)}

.filterbalk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-bottom:16px}
.filterbalk select{border:1px solid var(--lijn);border-radius:9px;
  padding:8px 11px;font:inherit;font-size:.88rem;background:var(--vlak);
  color:var(--inkt)}
.filterbalk select:hover{border-color:var(--blauw)}
.verlopentabel{min-width:1180px}
.verlopentabel tr.oud td{background:var(--rood-tint)}
.verlopentabel tr.oud td:first-child{border-left:3px solid var(--rood)}

/* Bronnen op de tijdlijn 'wat is besproken' */
.bronpil.actie{background:var(--groen-tint);color:var(--groen-donker)}
.bronpil.afspraak{background:var(--merk-tint);color:var(--blauw-donker)}
.bronpil.stap{background:var(--lijn-zacht);color:var(--zacht)}
.bronpil.notitie{background:var(--oranje-tint);color:var(--oranje-donker)}
.bronpil.opvolging{background:var(--paars-tint);color:var(--paars-donker)}

/* Bevindingen en doorsnedes op de pagina 'waar loopt het vast' */
.bevindingen{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:12px;margin-top:12px}
.bevinding{background:var(--grond);border:1px solid var(--lijn-zacht);
  border-radius:11px;padding:14px 16px}
.bevinding h3{margin:0 0 6px;font-size:.94rem;color:var(--inkt);
  text-transform:none;letter-spacing:-.01em;font-weight:650}
.bevinding p{margin:0;font-size:.85rem;line-height:1.5;color:var(--tekst,var(--inkt))}
.doorsnedes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:16px}
.doorsnedes .kaart{margin:0}
.aandeel{display:flex;align-items:center;gap:8px;min-width:104px}
.aandeelbalk{flex:1;height:7px;border-radius:999px;background:var(--lijn-zacht);
  overflow:hidden;min-width:44px}
.aandeelbalk > span{display:block;height:100%;background:var(--blauw);
  border-radius:999px}
.aandeelgetal{font-size:.76rem;color:var(--zacht);
  font-variant-numeric:tabular-nums;min-width:32px;text-align:right}

/* ---- meetypen in het zoekveld ---- */
.zoekveld{position:relative;flex:1}
.zoekveld input[type=search]{width:100%}
.livelijst{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;
  box-shadow:0 10px 30px rgba(15,25,40,.16);overflow:hidden;max-height:64vh;
  overflow-y:auto}
.liverij{display:grid;grid-template-columns:78px 1fr auto;gap:11px;
  align-items:baseline;padding:10px 14px;color:var(--inkt);
  border-top:1px solid var(--lijn-zacht)}
.liverij:first-child{border-top:0}
.liverij:hover,.liverij:focus{background:var(--merk-tint);text-decoration:none;
  outline:none}
.livesoort{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;padding:2px 7px;border-radius:5px;text-align:center}
.livesoort.bedrijf{background:var(--merk-tint);color:var(--blauw-donker)}
.livesoort.traject{background:var(--groen-tint);color:var(--groen-donker)}
.livesoort.project{background:var(--oranje-tint);color:var(--oranje-donker)}
.livekern{min-width:0}
.livekern b{display:block;font-size:.9rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.livesub{display:block;font-size:.76rem;color:var(--zacht);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.livelaatst{font-size:.73rem;color:var(--zacht);white-space:nowrap}
.liveleeg,.livemeer{padding:12px 14px;font-size:.82rem;color:var(--zacht)}
.livemeer{border-top:1px solid var(--lijn-zacht);background:var(--grond)}

/* ---- offerte-aanvragen ---- */
.aanvraag{padding:14px 0;border-top:1px solid var(--lijn-zacht)}
.aanvraag:first-of-type{border-top:0}
.aanvraagkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:5px}
.aanvraagnummer{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;font-weight:600;color:var(--zacht);background:var(--grond);
  border:1px solid var(--lijn-zacht);border-radius:6px;padding:2px 8px}
.volledig{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:.76rem;color:var(--zacht);font-variant-numeric:tabular-nums}
.volledigbalk{width:76px;height:6px;border-radius:999px;
  background:var(--lijn-zacht);overflow:hidden}
.volledigbalk > span{display:block;height:100%;background:var(--blauw)}
.aanvraag h3{margin:0 0 3px;font-size:1rem;text-transform:none;
  letter-spacing:-.01em;color:var(--inkt)}
.aanvraagsamenvatting{margin:8px 0 0;font-size:.87rem;line-height:1.5;
  color:var(--inkt);max-width:80ch}
.ontbreekt{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.aanvraagvoet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:12px}

/* ---------------------------------------------------------------------------
   OFFERTE-AANVRAAG — inspreken, nakijken, aanvullen
--------------------------------------------------------------------------- */
.openvraag{display:grid;grid-template-columns:1fr auto;gap:16px;
  align-items:center;padding:11px 0;border-top:1px solid var(--lijn-zacht)}
.openvraag:first-of-type{border-top:0}
.openvraagtekst b{display:block;font-size:.92rem}
.openvraagtekst .sub{font-size:.78rem}
.veldform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.veldform input[type=text],.veldform input[type=number],.veldform input[type=date],
.veldform select{border:1px solid var(--lijn);border-radius:8px;padding:6px 10px;
  font:inherit;font-size:.86rem;background:var(--vlak);color:var(--inkt);
  min-width:130px}
.veldform input:focus,.veldform select:focus{outline:none;border-color:var(--blauw)}

.blokkop{margin:18px 0 6px;font-size:.72rem}
.veldtabel td{vertical-align:middle}
.veldtabel tr.leeg .veldnaam{color:var(--zacht)}
.veldnaam{font-weight:600;min-width:190px}
.verplichtpil{display:inline-block;margin-left:6px;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  color:var(--oranje-donker);background:var(--oranje-tint);padding:1px 6px;
  border-radius:999px}
.veldwaarde{min-width:120px}
.onbekendpil{font-size:.75rem;color:var(--zacht);background:var(--grond);
  border:1px dashed var(--lijn);border-radius:999px;padding:2px 9px}
.bewijs{font-size:.74rem;color:var(--zacht);font-style:italic;margin-top:3px;
  max-width:44ch;line-height:1.4}
.bronpil.tekst{background:var(--groen-tint);color:var(--groen-donker)}
.bronpil.afgeleid{background:var(--oranje-tint);color:var(--oranje-donker)}
.bronpil.ingevuld,.bronpil.bevestigd{background:var(--merk-tint);
  color:var(--blauw-donker)}
.regelform{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.regelform input{border:1px solid var(--lijn);border-radius:8px;padding:7px 10px;
  font:inherit;font-size:.86rem;background:var(--vlak);color:var(--inkt)}
.ruwetekst{white-space:pre-wrap;font-family:inherit;font-size:.86rem;
  line-height:1.6;margin:0;color:var(--inkt)}
#aanvraagform > .vaklabel{display:block;margin-bottom:2px}

.veldtabel{min-width:820px}
.veldherkomst{min-width:190px}
.veldinvoer{min-width:220px}
.bewijs{max-width:34ch;overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------------------
   DE ASSISTENT — wat hij begrijpt en wat hij nog wil weten
--------------------------------------------------------------------------- */
.assistent{background:linear-gradient(135deg,var(--blauw-donker),#12294f);
  color:#fff;border-radius:16px;padding:22px 24px;margin-bottom:16px;
  box-shadow:0 6px 20px rgba(16,38,74,.16)}
.assistentkop{display:grid;grid-template-columns:auto 1fr auto;gap:16px;
  align-items:center}
.assistentbol{width:44px;height:44px;border-radius:13px;
  background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff}
.assistentbol svg{width:24px;height:24px}
.assistentlabel{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:#93b2dc}
.assistentzegt{margin:3px 0 0;font-size:1.02rem;line-height:1.45;color:#fff;
  max-width:62ch}
.assistentmeter{flex:0 0 auto}
.meterring{width:62px;height:62px;border-radius:50%;display:grid;
  place-items:center;
  background:conic-gradient(var(--oranje) calc(var(--vulling) * 1%),
             rgba(255,255,255,.16) 0)}
.meterring b{width:48px;height:48px;border-radius:50%;background:var(--paneel);
  display:grid;place-items:center;font-size:.9rem;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums}
.meterring em{font-size:.62rem;font-style:normal;opacity:.7}
.samenvattingvak{margin-top:18px;padding:15px 17px;border-radius:12px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.samenvattingvak .vaklabel{color:#93b2dc}
.samenvattingtekst{margin:6px 0 0;font-size:.94rem;line-height:1.6;color:#eaf1fb;
  max-width:74ch}

/* ---- één vraag per keer ---- */
.vraagvak{background:var(--vlak);border:1px solid var(--blauw);
  border-radius:16px;padding:24px 26px;margin-bottom:18px;
  box-shadow:0 4px 14px rgba(48,102,190,.1)}
.vraagvak.klaar{border-color:var(--groen)}
.vraagkop{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.vraagteller{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--zacht)}
.vraagvak h2{font-size:1.32rem;letter-spacing:-.02em;margin:0 0 4px}
.vraagvak .sub{max-width:62ch}
.vraagrest{margin-top:12px;font-size:.8rem}
.antwoordform{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;
  align-items:flex-start}
.antwoordrij{display:flex;gap:8px;flex:1 1 320px}
.antwoordform input[type=text],.antwoordform input[type=number],
.antwoordform input[type=date]{flex:1;border:1px solid var(--lijn);
  border-radius:10px;padding:11px 14px;font:inherit;font-size:.97rem;
  background:var(--grond);color:var(--inkt);min-width:0}
.antwoordform textarea{flex:1 1 100%;border:1px solid var(--lijn);
  border-radius:10px;padding:11px 14px;font:inherit;font-size:.94rem;
  line-height:1.55;background:var(--grond);color:var(--inkt)}
.antwoordform input:focus,.antwoordform textarea:focus{outline:none;
  border-color:var(--blauw);box-shadow:0 0 0 3px var(--merk-tint)}
.keuzeknoppen{display:flex;flex-wrap:wrap;gap:8px}
.keuzeknop{border:1px solid var(--lijn);border-radius:999px;padding:9px 17px;
  background:var(--grond);color:var(--inkt);font:inherit;font-size:.88rem;
  font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}
.keuzeknop:hover{border-color:var(--blauw);background:var(--merk-tint)}
.keuzeknop.gekozen{background:var(--blauw);border-color:var(--blauw);color:#fff;
  font-weight:600}

/* ---- het overzicht van het gesprek ---- */
.gesprekslijst{display:grid;gap:1px;background:var(--lijn-zacht);
  border:1px solid var(--lijn-zacht);border-radius:12px;overflow:hidden;
  margin-top:12px}
.gespreksregel{display:grid;grid-template-columns:1fr auto auto;gap:14px;
  align-items:center;padding:11px 15px;background:var(--vlak)}
.gespreksregel.nodig{background:var(--oranje-tint)}
.gesprekvraag{display:flex;gap:11px;align-items:flex-start;min-width:0}
.gesprekvraag b{font-size:.89rem;font-weight:600;display:block}
.vinkbol{width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  border:1.5px solid var(--lijn);display:grid;place-items:center;
  font-size:.7rem;font-weight:800;color:transparent;margin-top:1px}
.gespreksregel.gevuld .vinkbol{background:var(--groen);border-color:var(--groen);
  color:#fff}
.gespreksregel.nodig .vinkbol{border-color:var(--oranje)}
.gesprekantwoord{text-align:right;font-size:.88rem;min-width:130px}
.gesprekantwoord .bronpil{margin-left:6px}
.gesprekwijzig summary{cursor:pointer;font-size:.76rem;color:var(--blauw);
  list-style:none;padding:3px 8px;border:1px solid var(--lijn);
  border-radius:7px;background:var(--grond)}
.gesprekwijzig summary::-webkit-details-marker{display:none}
.gesprekwijzig[open]{grid-column:1 / -1}
.gesprekwijzig[open] summary{margin-bottom:8px;display:inline-block}
.gesprekvraag .bewijs{display:block;margin-top:2px}

@media (max-width:760px){
  .opname{grid-template-columns:auto 1fr;gap:12px}
  .golf{grid-column:1 / -1}
  .opnametekst{grid-column:2;text-align:left}
  .assistentkop{grid-template-columns:auto 1fr}
  .assistentmeter{grid-column:2;justify-self:start}
  .gespreksregel{grid-template-columns:1fr}
  .gesprekantwoord{text-align:left}
}

/* ---------------------------------------------------------------------------
   OFFERTE-INTAKE — één werkvlak voor één handeling

   Bedacht voor de auto na een klantbezoek: telefoon in één hand, weinig
   aandacht, soms fel licht. Daarom een donker paneel (minder weerspiegeling,
   en de golf leest er beter op), een duimgrote microfoon, en de woorden die
   meteen verschijnen zodat je ziet dat het klopt.
--------------------------------------------------------------------------- */
.intakekop{display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;margin-bottom:20px;flex-wrap:wrap}
.intakekop h1{font-size:1.62rem;letter-spacing:-.022em;margin:0 0 5px}
.intakekop p{margin:0;color:var(--zacht);font-size:.94rem;max-width:52ch;
  line-height:1.55}
.terugtekst{font-size:.86rem;color:var(--zacht);white-space:nowrap;padding-top:5px}
.terugtekst:hover{color:var(--blauw)}

.intake{margin:0}
.recorder{background:#14243c;border-radius:18px;padding:22px;
  box-shadow:0 10px 32px rgba(12,26,46,.18);
  transition:box-shadow .25s cubic-bezier(.22,1,.36,1)}
.recorder.luistert{box-shadow:0 10px 40px rgba(48,102,190,.34)}

/* De bovenste rij: microfoon, golf, stand. Op de telefoon eronder elkaar. */
.recorderbalk{display:flex;align-items:center;gap:20px;margin-bottom:18px}

.mic{position:relative;width:74px;height:74px;flex:0 0 74px;border:0;
  border-radius:50%;background:var(--blauw);color:#fff;display:grid;
  place-items:center;cursor:pointer;
  transition:background .18s,transform .12s cubic-bezier(.22,1,.36,1)}
.mic svg{width:29px;height:29px;transition:opacity .18s}
.mic:hover{background:#3f78d4}
.mic:active{transform:scale(.95)}
.mic:focus-visible{outline:3px solid #8fb4ec;outline-offset:3px}
/* Tijdens opnemen wordt de microfoon een stopvierkant: dezelfde knop, ander
   doel — dat is duidelijker dan een tweede knop ernaast. */
.micstop{position:absolute;width:22px;height:22px;border-radius:5px;
  background:#fff;opacity:0;transform:scale(.6);
  transition:opacity .18s,transform .18s cubic-bezier(.22,1,.36,1)}
.recorder.luistert .mic{background:var(--rood)}
.recorder.luistert .mic:hover{background:#e04b4b}
.recorder.luistert .mic svg{opacity:0}
.recorder.luistert .micstop{opacity:1;transform:scale(1)}
/* Een rustige ring die meeademt: laat zien dat hij aan staat zonder te
   knipperen in het ooghoekbeeld. */
.recorder.luistert .mic::after{content:"";position:absolute;inset:-9px;
  border-radius:50%;border:2px solid rgba(207,46,46,.55);
  animation:ademt 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes ademt{
  0%{transform:scale(.94);opacity:.9}
  70%{transform:scale(1.18);opacity:0}
  100%{transform:scale(1.18);opacity:0}
}

.golf{width:320px;max-width:100%;height:56px;display:block;flex:0 1 320px}

.recorderstand{margin:0;flex:1 1 auto;min-width:0}
.recorderstand b{display:block;font-size:1rem;font-weight:600;color:#fff;
  letter-spacing:-.01em}
.recorderstand span{display:block;font-size:.85rem;color:#a9c0de;margin-top:2px}

/* Het schrijfveld hoort bij het paneel: spreken en zien is één ding. */
.schrijfveld{display:block}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.schrijfveld textarea{width:100%;border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:15px 17px;font:inherit;font-size:1rem;
  line-height:1.62;background:rgba(255,255,255,.06);color:#fff;
  resize:vertical;min-height:112px;
  transition:border-color .18s,background .18s}
.schrijfveld textarea::placeholder{color:#8aa4c6}
.schrijfveld textarea:focus{outline:none;border-color:#5b8ede;
  background:rgba(255,255,255,.1)}
.recorder.luistert .schrijfveld textarea{border-color:rgba(91,142,222,.5)}

.recordervoet{display:flex;align-items:center;gap:16px;margin-top:16px;
  flex-wrap:wrap}
.knop.primair{background:#fff;color:#14243c;padding:12px 22px;font-size:.95rem;
  font-weight:650;border-radius:11px}
.knop.primair:hover{background:#e7eefa;color:#14243c}
.voetregel{font-size:.83rem;color:#a9c0de;font-variant-numeric:tabular-nums}

.recorder.alleenschrijven .golf{display:none}

.intakevoet{margin:16px 0 0;font-size:.86rem;line-height:1.6;color:var(--zacht);
  max-width:74ch;text-wrap:pretty}

@media (max-width:720px){
  .recorderbalk{flex-direction:column;align-items:stretch;gap:14px;
    text-align:center}
  .mic{margin:0 auto;width:82px;height:82px;flex-basis:82px}
  .mic svg{width:32px;height:32px}
  .golf{margin:0 auto;flex:0 0 auto}
  .recordervoet{flex-direction:column;align-items:stretch}
  .knop.primair{width:100%;padding:15px}
  .voetregel{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .recorder.luistert .mic::after{animation:none;opacity:.5;transform:scale(1.06)}
  .mic,.micstop,.schrijfveld textarea,.recorder{transition:none}
}

/* De doelmarkt in de leadlijst. De verdeling van de buitendienst loopt via
   deze elf markten, dus die naam hoort in de kolom te staan - niet het ruwe
   branchesegment, dat alleen de onderbouwing is. */
.marktcel .markt{display:inline-block;max-width:100%;font-size:.82rem;
  font-weight:600;color:var(--blauw-donker);background:var(--blauw-tint);
  border-radius:5px;padding:2px 7px;line-height:1.35;
  white-space:normal;overflow-wrap:anywhere}
.marktcel .meta{margin-top:3px;font-size:.76rem;color:var(--zacht);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Versnippering laten zien in plaats van wegpoetsen: negen losse accounts op
   één schoolgroep is een verkoopprobleem, geen opmaakdetail. */
.versnipperd{margin-top:4px;font-size:.75rem;font-weight:600;color:var(--oranje);
  cursor:help}


/* ---------------------------------------------------------------------------
   HERKOMST — waar een taak vandaan komt. Eén vorm, vier bronnen. De kleur
   volgt de bron zoals elders in OSI: website blauw, CRM paars, Cobouw oranje,
   bekendmaking groen.
--------------------------------------------------------------------------- */
.herkomstpil{display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:2px 10px;font-size:.72rem;font-weight:600;letter-spacing:.01em;
  background:var(--grond);color:var(--inkt);border:1px solid var(--lijn-zacht);
  vertical-align:middle}
.herkomstpil::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--zacht)}
.herkomstpil.website::before{background:var(--blauw)}
.herkomstpil.crm::before{background:var(--paars,#6d4fc2)}
.herkomstpil.website\+crm{background:linear-gradient(90deg,var(--blauw-tint),var(--paars-tint,#ece6fa))}
.herkomstpil.website\+crm::before{background:linear-gradient(90deg,var(--blauw),var(--paars,#6d4fc2))}
.herkomstpil.cobouw::before{background:var(--oranje)}
.herkomstpil.bekendmaking::before{background:var(--groen)}
.taakwie .meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.pil.telaat{background:var(--rood-tint);color:var(--rood)}
.uitlegkaart p{margin:0}


/* ---------------------------------------------------------------------------
   MARKT — doorsnedes over de Cobouw-projecten. Staafjes als spoor met vulling,
   zoals de aandeelbalk elders; geen nieuwe grafiekvorm.
--------------------------------------------------------------------------- */
.marktrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap:16px;margin-bottom:16px}
.marktrij .kaart{margin-bottom:0}
.marktmijn{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.marktgetal{font-size:1.05rem}
.marktgetal b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin-right:4px}
.marktregel{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.marktenlijst{list-style:none;margin:6px 0 0;padding:0}
.marktenlijst li{padding:7px 0;border-bottom:1px solid var(--lijn-zacht);display:flex;
  justify-content:space-between;gap:12px;font-size:.9rem}
.marktenlijst li:last-child{border-bottom:0}
.markttabel td.getal,.markttabel th.getal,table.klein td.getal,table.klein th.getal{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.jaarstaven,.fasetrechter{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.jaarstaaf,.fasetrede{display:grid;grid-template-columns:96px 1fr 120px;gap:12px;align-items:center}
.jaarstaaf .jaar{font-weight:700;font-variant-numeric:tabular-nums}
.jaarstaaf.onbekend .jaar{color:var(--zacht);font-weight:600}
.staafspoor{display:block;height:12px;border-radius:6px;background:var(--grond);overflow:hidden}
.staafvulling{display:block;height:100%;border-radius:6px;background:var(--blauw)}
.fasetrede .staafvulling{background:var(--oranje)}
.jaaraantal{font-variant-numeric:tabular-nums;white-space:nowrap}
.plaatsenwolk{display:flex;flex-wrap:wrap;gap:6px}
.plaatsenwolk .pil b,.marktregel .pil b{margin-left:3px;color:var(--blauw-donker)}
@media (max-width:720px){
  .marktmijn{grid-template-columns:1fr}
  .jaarstaaf,.fasetrede{grid-template-columns:72px 1fr 96px}
}


/* ---------------------------------------------------------------------------
   INTAKE — het gesprek na het inspreken en de lijst met aanvragen.
--------------------------------------------------------------------------- */
.melding.fout{background:var(--rood-tint);color:#8f1d1d;border:1px solid #f3c4c4}
.intakehulp{margin:14px 0 0;max-width:74ch;font-size:.86rem;color:var(--zacht)}
.intakehulp summary{cursor:pointer;font-weight:600;color:var(--inkt)}
.intakehulp p{margin:8px 0 0;line-height:1.6}
.wisknop{background:none;border:0;color:#a9c0de;font:inherit;font-size:.83rem;
  cursor:pointer;text-decoration:underline;margin-left:auto;padding:6px}
.wisknop:hover{color:#fff}
.correcties{margin:6px 0 0;font-size:.85rem;color:var(--zacht);display:flex;
  flex-wrap:wrap;gap:6px;align-items:center}
.correctie{display:inline-flex;gap:4px;align-items:center;background:var(--grond);
  border-radius:6px;padding:1px 8px;color:var(--inkt)}
.correctie s{color:var(--zacht)}
.waarschuwing{margin:6px 0 0;font-size:.85rem;color:var(--oranje-donker)}
.keuzeknop.onbekend{border-style:dashed}
.spreekknop{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--lijn);
  background:var(--vlak);color:var(--inkt);border-radius:999px;padding:8px 14px;
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;min-height:40px}
.spreekknop svg{width:16px;height:16px}
.spreekknop:hover{border-color:var(--blauw);color:var(--blauw)}
.spreekknop.aan{background:var(--rood);border-color:var(--rood);color:#fff}
.weetniet{background:none;border:0;color:var(--zacht);font:inherit;font-size:.84rem;
  text-decoration:underline;cursor:pointer;padding:6px 0;margin-top:4px}
.weetniet:hover{color:var(--inkt)}
.knop.mini.gevaar:hover{background:var(--rood);color:#fff}
.indienrij{margin-top:12px}
.statuspil.neutraal{background:var(--grond);color:var(--zacht)}

.aanvraaglijst{display:flex;flex-direction:column;gap:10px}
.aanvraagkaart{display:grid;grid-template-columns:76px 1fr auto;gap:16px;
  align-items:start;border:1px solid var(--lijn-zacht);border-radius:var(--radius);
  padding:14px 16px;background:var(--vlak)}
.volledigvak{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:76px;height:64px;border-radius:10px;text-decoration:none;
  background:var(--grond);color:var(--inkt)}
.volledigvak b{font-size:1.3rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.volledigvak em{font-style:normal;font-size:.75rem;font-weight:600}
.volledigvak span{font-size:.66rem;color:var(--zacht);margin-top:3px}
.aanvraagkaart.compleet .volledigvak{background:var(--groen-tint);color:var(--groen-donker)}
.aanvraagkaart.compleet .volledigvak span{color:var(--groen-donker)}
.aanvraagkaart.onvolledig .volledigvak{background:var(--oranje-tint);color:var(--oranje-donker)}
.aanvraagkaart.onvolledig .volledigvak span{color:var(--oranje-donker)}
.aanvraagkern h3{margin:0 0 4px;font-size:1rem;text-transform:none;letter-spacing:0;
  color:var(--inkt);font-weight:700}
.aanvraagkern .meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.aanvraagsamenvatting{margin:8px 0 0;font-size:.9rem;line-height:1.55}
.ontbreekt{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.aanvraagactie{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
@media (max-width:720px){
  .aanvraagkaart{grid-template-columns:64px 1fr}
  .aanvraagactie{grid-column:1 / -1;flex-direction:row;justify-content:space-between}
  .volledigvak{width:64px;height:56px}
}


/* ---------------------------------------------------------------------------
   MOBIEL MENU — op de telefoon één knop in plaats van drie regels pillen.
   Zonder JavaScript: een verborgen checkbox schakelt de groepen.
--------------------------------------------------------------------------- */
.menuknop{display:none}
.voet{color:#a9bfe0;font-size:.74rem}
.groeptitel{color:#a9bfe0}
@media (max-width:900px){
  .zijbalk{justify-content:space-between;padding:6px 10px 6px 4px}
  .merk{padding:10px 12px}
  .menuknop{display:inline-flex;align-items:center;gap:7px;color:var(--paneel-tekst);
    border:1px solid rgba(255,255,255,.22);border-radius:9px;padding:8px 12px;
    font-size:.86rem;font-weight:600;cursor:pointer;min-height:44px}
  .menuknop svg{width:18px;height:18px}
  .zijbalk .groep{display:none;flex-basis:100%;flex-direction:column;gap:0;padding:6px 6px 8px}
  .zijbalk .groeptitel{display:block;padding:8px 11px 4px}
  .menutoggle:checked ~ .zijbalk .groep{display:flex}
  .menutoggle:checked ~ .zijbalk .menuknop{background:rgba(255,255,255,.12)}
}