/* =========================================================
   Helder Salesdesk 2.0 — vormtaal
   Tokens staan in drie sets: licht, systeem-donker, gekozen donker.
   Verander een kleur alleen hier, nooit verderop in het bestand.
   ========================================================= */

/* ---------- tokens: licht ---------- */
:root{
  color-scheme:light;
  --navy:#142536; --blue:#1f6f89; --blue-2:#2f8ea8; --gold:#c39a37;
  --ink:#16181d; --ink-2:#3a3d45; --muted:#6b7078; --soft:#8b9099; --faint:#aeb3bb;
  --bg:#f4f5f7; --bg-2:#eceef2; --card:#ffffff; --tint:#f8f9fb; --raise:#ffffff;
  --nav-bg:rgba(252,252,253,.72);
  --hair:rgba(16,20,28,.09); --hair-2:rgba(16,20,28,.055);
  --hover:rgba(16,20,28,.04); --chip:rgba(16,20,28,.05); --chip-2:rgba(16,20,28,.08);
  --green:#127a52; --green-bg:#e4f4ec;
  --amber:#8a5b00; --amber-bg:#fbf0dd;
  --red:#b0241c;   --red-bg:#fcebe9;
  --sky:#e6f1f5; --sky-2:#d5e8ee;
  --ring:rgba(47,142,168,.28);
  --knop-ink:#ffffff;
  --data:#0e7fb5; --data-wash:rgba(14,127,181,.12); --data-spoor:rgba(16,20,28,.07);
  --sh-1:0 1px 2px rgba(16,20,28,.05);
  --sh-2:0 1px 2px rgba(16,20,28,.05), 0 10px 24px -14px rgba(16,20,28,.22);
  --sh-3:0 2px 6px rgba(16,20,28,.07), 0 28px 56px -24px rgba(16,20,28,.32);
  --sh-pop:0 8px 20px -8px rgba(16,20,28,.2), 0 40px 80px -30px rgba(16,20,28,.45);
  --r-xl:22px; --r-lg:18px; --r-md:13px; --r-sm:10px;
}
/* ---------- tokens: donker (systeemvoorkeur, tenzij expliciet licht) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --blue:#63bcd6; --blue-2:#84d0e5; --gold:#dcb75f;
    --ink:#f2f3f5; --ink-2:#d2d5da; --muted:#979ba3; --soft:#7d818a; --faint:#5e626b;
    --bg:#1a1c20; --bg-2:#151719; --card:#24272c; --tint:#2a2e34; --raise:#2c3038;
    --nav-bg:rgba(33,36,41,.78);
    --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.055);
    --hover:rgba(255,255,255,.055); --chip:rgba(255,255,255,.08); --chip-2:rgba(255,255,255,.13);
    --green:#5ed0a0; --green-bg:rgba(94,208,160,.14);
    --amber:#e8b45e; --amber-bg:rgba(232,180,94,.14);
    --red:#ff8f85;   --red-bg:rgba(255,143,133,.14);
    --sky:rgba(99,188,214,.15); --sky-2:rgba(99,188,214,.24);
    --ring:rgba(99,188,214,.35);
    --knop-ink:#10242a;
    --data:#2d9ec9; --data-wash:rgba(45,158,201,.16); --data-spoor:rgba(255,255,255,.08);
    --sh-1:0 1px 2px rgba(0,0,0,.3);
    --sh-2:0 1px 2px rgba(0,0,0,.28), 0 10px 24px -16px rgba(0,0,0,.5);
    --sh-3:0 2px 6px rgba(0,0,0,.3), 0 28px 56px -26px rgba(0,0,0,.6);
    --sh-pop:0 8px 20px -8px rgba(0,0,0,.5), 0 40px 80px -30px rgba(0,0,0,.75);
  }
}
/* ---------- tokens: donker (expliciet gekozen) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --blue:#63bcd6; --blue-2:#84d0e5; --gold:#dcb75f;
  --ink:#f2f3f5; --ink-2:#d2d5da; --muted:#979ba3; --soft:#7d818a; --faint:#5e626b;
  --bg:#1a1c20; --bg-2:#151719; --card:#24272c; --tint:#2a2e34; --raise:#2c3038;
  --nav-bg:rgba(33,36,41,.78);
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.055);
  --hover:rgba(255,255,255,.055); --chip:rgba(255,255,255,.08); --chip-2:rgba(255,255,255,.13);
  --green:#5ed0a0; --green-bg:rgba(94,208,160,.14);
  --amber:#e8b45e; --amber-bg:rgba(232,180,94,.14);
  --red:#ff8f85;   --red-bg:rgba(255,143,133,.14);
  --sky:rgba(99,188,214,.15); --sky-2:rgba(99,188,214,.24);
  --ring:rgba(99,188,214,.35);
  --knop-ink:#10242a;
  --data:#2d9ec9; --data-wash:rgba(45,158,201,.16); --data-spoor:rgba(255,255,255,.08);
  --sh-1:0 1px 2px rgba(0,0,0,.3);
  --sh-2:0 1px 2px rgba(0,0,0,.28), 0 10px 24px -16px rgba(0,0,0,.5);
  --sh-3:0 2px 6px rgba(0,0,0,.3), 0 28px 56px -26px rgba(0,0,0,.6);
  --sh-pop:0 8px 20px -8px rgba(0,0,0,.5), 0 40px 80px -30px rgba(0,0,0,.75);
}

/* ---------- basis ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",system-ui,sans-serif;
  font-size:15px;line-height:1.55;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--blue);text-decoration:none}
button{font:inherit}
svg.i{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:15px;height:15px}
svg.i.xs{width:11px;height:11px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--card);padding:10px 14px;border-radius:var(--r-sm);z-index:99}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px;border-radius:6px}

.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}

/* ---------- zijbalk ---------- */
.nav{
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  border-right:1px solid var(--hair);
  display:flex;flex-direction:column;padding:22px 12px 16px;position:sticky;top:0;height:100vh;
}
/* Het huisstijllogo. Twee bestanden: het woordmerk is zwart of wit, de zon blijft
   goud. Als achtergrondafbeelding, zodat de themaschakelaar hem ook meeneemt —
   een <picture> luistert alleen naar de systeemvoorkeur en dus niet naar de knop. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:2px 10px 18px}
/* SALESDESK staat tussen de streepjes, op de plek waar in het logo van de site
   REAL ESTATE staat. Het logo van de site zelf blijft ongemoeid: dit is een
   eigen bestand, net als bij Mijn Helder. */
.brand-logo{
  display:block;width:150px;aspect-ratio:689.6/463.69;margin-left:-8px;
  background:center/contain no-repeat url(helder-logo-salesdesk.svg);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-logo{background-image:url(helder-logo-salesdesk-licht.svg)}
}
:root[data-theme="dark"] .brand-logo{background-image:url(helder-logo-salesdesk-licht.svg)}

.zk-open{
  display:flex;align-items:center;gap:9px;width:100%;margin:0 0 6px;padding:8px 10px;
  background:var(--chip);border:0;border-radius:var(--r-md);
  color:var(--soft);font-size:13.5px;cursor:pointer;text-align:left;transition:background .15s
}
.zk-open:hover{background:var(--chip-2)}
.zk-open span{flex:1}
.zk-open kbd{
  font:inherit;font-size:11px;font-weight:600;color:var(--soft);background:var(--card);
  border:1px solid var(--hair);border-radius:6px;padding:1px 5px;box-shadow:var(--sh-1)
}

.groep{font-size:10.5px;font-weight:640;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:14px 12px 6px}
.nav nav{display:flex;flex-direction:column;gap:1px}
.nav nav a,.nav nav .soon{
  padding:8px 11px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;font-size:14px;
  display:flex;align-items:center;gap:11px;transition:background .15s,color .15s
}
.nav nav a:hover{background:var(--hover)}
.nav nav a .i{color:var(--soft);transition:color .15s}
.nav nav a:hover .i{color:var(--ink-2)}
.nav nav a.on{background:var(--sky);color:var(--blue);font-weight:600}
.nav nav a.on .i{color:var(--blue)}
.nav nav a .tel-badge{
  margin-left:auto;font-size:11px;font-weight:650;line-height:1;padding:3px 7px;border-radius:980px;
  background:var(--red-bg);color:var(--red);font-variant-numeric:tabular-nums
}
.nav nav .soon{color:var(--faint);font-weight:450;cursor:default}
.nav nav .soon .i{color:var(--faint);opacity:.6}
.nav nav .soon em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.03em;opacity:.8}

.thema{display:flex;gap:2px;background:var(--chip);border-radius:var(--r-md);padding:3px;margin-top:auto}
.thema button{
  flex:1;border:0;background:transparent;font-size:12.5px;font-weight:520;
  color:var(--muted);padding:6px 4px;border-radius:9px;cursor:pointer;letter-spacing:-.008em;
  display:flex;align-items:center;justify-content:center;gap:5px;transition:color .15s
}
.thema button .i{width:14px;height:14px}
.thema button[aria-pressed="true"]{background:var(--raise);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.me{margin-top:8px;padding:8px 10px;border-radius:var(--r-md);display:flex;align-items:center;gap:10px}
.me>span:nth-of-type(2){min-width:0;flex:1}
.me-uit{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  color:var(--soft);transition:background .15s,color .15s
}
.me-uit:hover{background:var(--chip);color:var(--ink)}
.me .avatar{width:30px;height:30px;border-radius:9px;font-size:11.5px}
.me strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.012em;line-height:1.25}
.me small{display:block;color:var(--soft);font-size:11.5px;line-height:1.25}

/* ---------- pagina ---------- */
/* De inhoud vult het venster. Er stond hier een harde grens van 1560px, en op een
   breder scherm bleef daar rechts een strook leeg — de tabellen hebben die ruimte juist
   nodig. Wat lange lopende tekst is (de kennisbank, een antwoord) heeft zijn eigen
   leesbreedte; die blijft dus wel netjes smal. */
main{padding:36px 40px 90px;min-width:0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
h1{margin:0;font-size:33px;line-height:1.08;letter-spacing:-.034em;font-weight:670}
.sub{margin:7px 0 0;color:var(--muted);font-size:14px}
h2{font-size:17px;margin:0;letter-spacing:-.02em;font-weight:620}
.blok{margin-bottom:26px}
.blok-kop{display:flex;align-items:center;gap:9px;margin:0 0 11px;padding:0 3px;flex-wrap:wrap}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.crit{background:var(--red)} .dot.warn{background:var(--amber)} .dot.info{background:var(--blue)}
.tel{color:var(--soft);font-weight:520;font-size:12.5px;background:var(--chip);border-radius:980px;padding:1px 8px;font-variant-numeric:tabular-nums}

.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-md);font-size:13.5px;margin:0 0 22px;line-height:1.5}
.banner .i{margin-top:2px}
.banner.warn{background:var(--amber-bg);color:var(--amber)}
.banner.err{background:var(--red-bg);color:var(--red)}
.banner code{background:var(--chip-2);padding:1px 6px;border-radius:5px;font-size:.9em}

/* ---------- kerncijfers ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:30px}
.tile{
  background:var(--card);border-radius:var(--r-lg);padding:17px 18px 16px;color:inherit;display:block;
  box-shadow:var(--sh-2);position:relative;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s
}
.tile:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.tile .ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--chip);color:var(--muted);margin-bottom:13px}
.tile .n{display:block;font-size:34px;font-weight:640;letter-spacing:-.042em;line-height:1;font-variant-numeric:tabular-nums}
.tile .k{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);margin-top:7px}
.tile .k .i{width:13px;height:13px;opacity:0;transform:translateX(-3px);transition:opacity .2s,transform .2s}
.tile:hover .k .i{opacity:.7;transform:none}
.tile.crit .n{color:var(--red)} .tile.crit .ico{background:var(--red-bg);color:var(--red)}
.tile.warn .n{color:var(--amber)} .tile.warn .ico{background:var(--amber-bg);color:var(--amber)}
.tile.info .n{color:var(--blue)} .tile.info .ico{background:var(--sky);color:var(--blue)}
.tile.muted .n{color:var(--soft)}
.tile.goed .n{color:var(--green)} .tile.goed .ico{background:var(--green-bg);color:var(--green)}

/* ---------- tabel ---------- */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;position:relative}
.card:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.tabel{--cols:minmax(230px,1.6fr) 158px minmax(190px,1.25fr) minmax(120px,.8fr) 178px}
.kop{
  display:grid;grid-template-columns:var(--cols);gap:18px;padding:10px 22px;
  border-bottom:1px solid var(--hair);background:var(--tint);
  font-size:10.5px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)
}
.kop .rechts{text-align:right}
.rijen{list-style:none;margin:0;padding:0}
.rij{
  display:grid;grid-template-columns:var(--cols);gap:18px;padding:14px 22px;align-items:center;
  position:relative;transition:background .13s
}
.rij+.rij:before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--hair-2)}
.rij:hover{background:var(--tint)}

.wie{display:flex;gap:12px;align-items:center;min-width:0}
.avatar{
  width:36px;height:36px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--sky);color:var(--blue);font-weight:640;font-size:12.5px;letter-spacing:-.01em
}
.wie .nm{min-width:0}
.wie .nm strong,.wie .nm .naam{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.017em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.wie .nm .naam:hover{color:var(--blue)}
.wie .nm small{display:block;color:var(--soft);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kol{min-width:0}
.kol .vl{font-size:14px;letter-spacing:-.01em;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kol .vl.dim{color:var(--soft)}
.kol .bij{display:block;font-size:12px;color:var(--soft);margin-top:2px}
.rechts{text-align:right}
.mist{color:var(--red)}
.punt{display:flex;align-items:center;gap:5px;color:var(--amber);font-size:12px;margin-top:3px}
.punt .i{width:12px;height:12px}
.taakregel{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--blue);margin-top:3px}
.taakregel .i{width:12px;height:12px}
.taakregel.telaat{color:var(--red)}

/* snelacties, alleen zichtbaar bij hover of toetsenbordfocus */
.acties{display:flex;gap:5px;justify-content:flex-end;margin-top:6px;opacity:0;transition:opacity .15s}
.rij:hover .acties,.rij:focus-within .acties{opacity:1}
.acties a{
  width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  background:var(--chip);color:var(--muted);transition:background .13s,color .13s
}
.acties a:hover{background:var(--blue);color:var(--knop-ink)}

/* ---------- labels ---------- */
.pil{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:980px;background:var(--chip);color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;letter-spacing:-.005em}
.pil:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.pil.faselead{background:var(--sky);color:var(--blue)}
.pil.fasekoper,.pil.fasekoperaftersales{background:var(--green-bg);color:var(--green)}
.pil.faseoptiereservering{background:var(--amber-bg);color:var(--amber)}
.urg{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:980px;white-space:nowrap;font-variant-numeric:tabular-nums}
.urg.telaat{background:var(--red-bg);color:var(--red)}
.urg.vandaag{background:var(--amber-bg);color:var(--amber)}
.urg.week{background:var(--sky);color:var(--blue)}
.urg.later,.urg.geen{background:var(--chip);color:var(--soft)}

/* ---------- reizen ---------- */
.reisraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-items:start}
.reiskaart{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:18px 20px 16px;
  position:relative;display:flex;flex-direction:column;gap:12px
}
.reiskaart:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.reiskaart.dichtbij{box-shadow:var(--sh-2),inset 3px 0 0 var(--blue)}
.verleden .reiskaart{opacity:.72}
.verleden .reiskaart:hover{opacity:1}
.reis-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.reis-kop h2{font-size:16.5px;font-weight:640;letter-spacing:-.024em;line-height:1.25}
.reis-meta{margin:3px 0 0;font-size:13px;color:var(--muted)}
.reis-titel{
  display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 12px;border-radius:var(--r-md);
  background:var(--sky);color:var(--blue);font-size:13px;line-height:1.5
}
.reis-titel .i{margin-top:2px;flex:0 0 auto}
.verblijf{padding:11px 13px;border-radius:var(--r-md);background:var(--tint);border:1px solid var(--hair-2)}
.verblijf .lb{
  display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:640;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soft);margin-bottom:5px
}
.verblijf .lb .i{width:14px;height:14px}
.verblijf p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.verblijf p + p{margin-top:5px}
.kaartlink{font-size:12px;color:var(--blue);white-space:nowrap;margin-left:6px}
.kaartlink:hover{text-decoration:underline}

.reizigers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.reizigers li{display:flex;flex-direction:column}
.reizigers a{
  display:flex;align-items:center;gap:11px;padding:8px 10px;margin:0 -10px;border-radius:var(--r-md);
  color:inherit;transition:background .13s
}
.reizigers a:hover{background:var(--tint)}
.reizigers .avatar{width:32px;height:32px;border-radius:10px;font-size:11.5px}
.rz-nm{flex:1;min-width:0}
.rz-nm strong{display:block;font-size:14px;font-weight:590;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-nm small{display:block;font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reizigers .punt{margin:0 0 4px 43px}
.programma{
  display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:var(--r-md);
  background:var(--sky);color:var(--blue);font-size:13px;font-weight:520;transition:background .14s
}
.programma:hover{background:var(--sky-2)}
.programma .pijl{margin-left:auto;opacity:.6}
.programma.leegprog{background:var(--chip);color:var(--muted)}
.programma .res{margin-left:auto}
.programma .res + .pijl{margin-left:0}
.reis-voet{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--hair-2)}
.reis-voet .lb{font-size:11px;font-weight:620;letter-spacing:.055em;text-transform:uppercase;color:var(--soft)}
.reis-voet .ref{color:var(--blue);background:var(--sky);letter-spacing:normal;font-weight:520}
@media (max-width:640px){ .reisraster{grid-template-columns:1fr} }

/* ---------- rapportage ----------
   Eén datakleur per grafiek (sequentieel), gevalideerd tegen de kaartachtergrond:
   licht #0e7fb5 op wit, donker #2d9ec9 op #24272c. Tekst draagt nooit de datakleur.  */
.rapraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;align-items:start}
/* Een grafiekkaart heeft zelf géén zijmarge: de blokken erbinnen (.gr-kop, .vlak,
   .regels, .som, .schemakop) brengen hun eigen 20px mee, want sommige mogen juist
   randloos zijn — een tabelkop met achtergrond loopt van rand tot rand.
   Alles wat dat niet zelf regelt komt daardoor tegen de kaartrand te staan, en dat
   viel op bij de knoppenrijen ("Regel erbij") in het woningformulier: die stonden een
   halve gutter links van de invoervelden erboven. Vandaar deze regel. */
.grafiek{padding:18px 0 6px;--gutter:20px}
.grafiek>.planknoppen{padding-left:var(--gutter);padding-right:var(--gutter)}
.grafiek.breed{grid-column:1 / -1}
.gr-kop{padding:0 20px 14px}
.gr-kop h2{font-size:16px;font-weight:640;letter-spacing:-.022em}
.gr-sub{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
/* flex-start, niet center: een voetnoot van drie regels zette het icoontje anders
   midden in de alinea in plaats van bij de eerste regel — dezelfde afspraak als bij
   .banner. */
.gr-voet{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;padding:12px 20px 6px;border-top:1px solid var(--hair-2);font-size:12.5px;color:var(--muted);line-height:1.5}
.gr-voet .i{margin-top:2px}

.balken,.trechter{list-style:none;margin:0;padding:0 20px 12px;display:flex;flex-direction:column;gap:9px}
.balken li,.trechter li{display:grid;grid-template-columns:minmax(84px,1fr) minmax(90px,2.4fr) auto;gap:12px;align-items:center}
/* In een smalle kaart past een lange bronnaam niet naast de balk: dan boven de balk. */
.grafiek:not(.breed) .balken li{grid-template-columns:1fr auto;grid-template-areas:"naam waarde" "balk balk";gap:3px 12px;margin-bottom:4px}
.grafiek:not(.breed) .balken .bl-naam{grid-area:naam;white-space:normal;overflow:visible}
.grafiek:not(.breed) .balken .bl-waarde{grid-area:waarde}
.grafiek:not(.breed) .balken .bl-spoor{grid-area:balk}
.bl-naam,.tr-naam{
  font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.bl-spoor{height:14px;background:var(--data-spoor);border-radius:3px;position:relative;overflow:hidden}
.bl-balk{
  position:absolute;left:0;top:0;bottom:0;background:var(--data);
  border-radius:0 4px 4px 0;   /* afgeronde datakant, recht op de basislijn */
}
.bl-waarde,.tr-waarde{
  font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
  text-align:right;min-width:34px
}
.tr-waarde{display:flex;align-items:baseline;gap:8px;justify-content:flex-end;min-width:74px}
.tr-conv{font-size:11.5px;font-weight:560;color:var(--soft);font-variant-numeric:tabular-nums}

.lijn{display:block;width:100%;height:auto;padding:0 6px 4px}
.gr-lijn{stroke:var(--hair-2);stroke-width:1}
.gr-as{fill:var(--soft);font-size:11px;font-family:inherit}
.gr-vlak{fill:var(--data-wash)}
.gr-pad{fill:none;stroke:var(--data);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gr-punt{fill:var(--data);stroke:var(--card);stroke-width:2}
.gr-punt.eind{stroke-width:2.5}
.gr-eind{fill:var(--ink);font-size:13px;font-weight:640;font-family:inherit}

.kwaliteit{list-style:none;margin:0;padding:0 0 6px}
.kwaliteit a{
  display:flex;align-items:center;gap:13px;padding:11px 20px;color:inherit;transition:background .13s
}
.kw-tekst small{max-width:none}
.kwaliteit a:hover{background:var(--tint)}
.kwaliteit li + li a{border-top:1px solid var(--hair-2)}
.kw-n{
  min-width:34px;font-size:19px;font-weight:660;color:var(--amber);text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em
}
.kw-tekst{flex:1;min-width:0}
.kw-tekst strong{display:block;font-size:14px;font-weight:570;letter-spacing:-.014em}
.kw-tekst small{display:block;font-size:12.5px;color:var(--soft);line-height:1.45}
.kwaliteit .i{color:var(--faint);flex:0 0 auto}

@media (max-width:640px){
  .rapraster{grid-template-columns:1fr}
  .balken li,.trechter li{grid-template-columns:minmax(70px,1fr) minmax(60px,1.8fr) auto;gap:9px}
}

/* ---------- instellingen ---------- */
.statuslijst{list-style:none;margin:0;padding:0 0 6px}
.statuslijst li{display:flex;align-items:flex-start;gap:13px;padding:13px 20px}
.statuslijst li + li{border-top:1px solid var(--hair-2)}
.st-bol{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:6px;background:var(--soft)}
.st-goed .st-bol{background:var(--green)}
.st-voorbeeld .st-bol{background:var(--amber)}
.st-fout .st-bol{background:var(--red)}
.st-tekst{flex:1;min-width:0}
.st-tekst strong{display:block;font-size:14.5px;font-weight:590;letter-spacing:-.014em}
.st-tekst small{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px}
.st-tekst em{display:block;font-style:normal;font-size:12.5px;color:var(--soft);line-height:1.5;margin-top:5px}
.st-merk{
  font-size:11px;font-weight:640;letter-spacing:.04em;text-transform:uppercase;
  border-radius:980px;padding:3px 9px;flex:0 0 auto;background:var(--chip);color:var(--soft)
}
.st-goed .st-merk{background:var(--green-bg);color:var(--green)}
.st-voorbeeld .st-merk{background:var(--amber-bg);color:var(--amber)}
.st-fout .st-merk{background:var(--red-bg);color:var(--red)}

/* Was `auto 1fr` met nowrap op het label. In een smalle kaart at het label daardoor de
   hele regel op — het waardespoor werd 8px breed en de waarde ("7 uur oud") viel buiten
   de kaart. Nu andersom: het label mag afbreken en krimpen, de waarde krijgt precies
   wat ze nodig heeft. Dezelfde vorm als .som en .keuzesom. */
.inst{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;margin:0;padding:0 20px 16px;font-size:13.5px}
/* Ook het label mag afbreken: er staan cachebestandsnamen in, en die hebben geen enkel
   punt waarop een browser uit zichzelf afbreekt. */
.inst dt{color:var(--soft);overflow-wrap:anywhere}
.inst dd{margin:0;text-align:right;font-weight:520;overflow-wrap:anywhere}
.inst code{background:var(--chip);border-radius:5px;padding:1px 6px;font-size:.92em}
.bl-bij{color:var(--faint);font-weight:400}

/* ---------- kennisbank ---------- */
.filters .hint{font-size:12.5px;color:var(--soft)}
.head .veld.zoek input{
  width:320px;max-width:44vw;padding:10px 16px 10px 40px;border:1px solid var(--hair);border-radius:980px;
  font:inherit;font-size:14px;background:var(--card);color:var(--ink);box-shadow:var(--sh-1)
}
.head .veld.zoek input:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 4px var(--ring)}
.kb-lijst{padding:4px 0}
.kb-item{border-bottom:1px solid var(--hair-2)}
.kb-item:last-child{border-bottom:0}
.kb-item summary{
  display:flex;align-items:center;gap:12px;padding:14px 22px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:560;letter-spacing:-.014em;transition:background .12s
}
.kb-item summary::-webkit-details-marker{display:none}
.kb-item summary:hover{background:var(--tint)}
.kb-item .klap{margin-left:auto;color:var(--faint);transform:rotate(90deg);transition:transform .18s}
.kb-item[open] .klap{transform:rotate(-90deg)}
.kb-item[open] summary{color:var(--blue)}
.kb-antwoord{padding:0 22px 16px 22px}
.kb-antwoord p{margin:0;font-size:14px;line-height:1.62;color:var(--ink-2);max-width:78ch}

.bzraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;align-items:start}
.bzkaart{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:18px 20px 16px;
  position:relative;display:flex;flex-direction:column;gap:10px
}
.bzkaart:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.bzkaart h2{font-size:16px;font-weight:640;letter-spacing:-.022em;line-height:1.3;color:var(--ink)}
.bz-betekenis{margin:-4px 0 0;font-size:13px;color:var(--muted);font-style:italic}
.bz-blok{padding:11px 13px;border-radius:var(--r-md)}
.bz-blok .lb{display:block;font-size:10.5px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.bz-blok p{margin:0;font-size:13.5px;line-height:1.55}
.bz-blok.antwoord{background:var(--sky)}
.bz-blok.antwoord .lb{color:var(--blue)}
.bz-blok.antwoord p{color:var(--ink-2)}
.bz-blok.vraag{background:var(--amber-bg)}
.bz-blok.vraag .lb{color:var(--amber)}
.bz-blok.vraag p{color:var(--ink-2);font-weight:520}
.bz-actie{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;color:var(--green);font-weight:520}

.actielijst{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px}
.actielijst a{
  font-size:13px;padding:7px 13px;border-radius:980px;background:var(--chip);color:var(--ink-2);
  transition:background .13s,color .13s
}
.actielijst a:hover{background:var(--sky);color:var(--blue)}

/* oefenen */
.quiz{padding:24px 26px}
.quiz-onderwerpen{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.quiz-onderwerpen .knop{font-size:13.5px;padding:9px 15px}
.quiz-onderwerpen .n{
  font-size:11px;font-weight:650;opacity:.7;background:rgba(255,255,255,.22);
  border-radius:980px;padding:1px 6px;margin-left:2px
}
.quiz-onderwerpen .knop.stil .n{background:var(--chip);opacity:1;color:var(--soft)}
.quiz-kop{display:flex;justify-content:space-between;font-size:12.5px;color:var(--soft);font-weight:520}
.quiz-balk{height:4px;border-radius:4px;background:var(--chip);margin:8px 0 18px;overflow:hidden}
.quiz-balk span{display:block;height:100%;background:var(--blue);border-radius:4px;transition:width .3s cubic-bezier(.2,.7,.3,1)}
.quiz-onderwerp{margin:0;font-size:11px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.quiz-vraag{margin:6px 0 16px;font-size:20px;font-weight:620;letter-spacing:-.024em;line-height:1.35;max-width:60ch}
.quiz-opties{display:flex;flex-direction:column;gap:8px;max-width:640px}
.quiz-optie{
  text-align:left;padding:13px 16px;border:1px solid var(--hair);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);font-size:14.5px;cursor:pointer;
  transition:background .13s,border-color .13s
}
.quiz-optie:hover:not(:disabled){border-color:var(--blue-2);background:var(--tint)}
.quiz-optie:disabled{cursor:default}
.quiz-optie.goed{border-color:var(--green);background:var(--green-bg);color:var(--green);font-weight:590}
.quiz-optie.mis{border-color:var(--red);background:var(--red-bg);color:var(--red)}
.quiz-uitleg{
  margin-top:14px;padding:13px 16px;border-radius:var(--r-md);background:var(--tint);
  border:1px solid var(--hair-2);font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:640px
}
.quiz-knoppen{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.quiz-eindscore{margin:0;font-size:26px;font-weight:660;letter-spacing:-.03em}
.quiz-terugblik{
  padding:13px 16px;border-radius:var(--r-md);background:var(--tint);border:1px solid var(--hair-2);
  margin-top:10px;max-width:720px
}
.quiz-terugblik strong{display:block;font-size:14px;font-weight:590;letter-spacing:-.014em}
.quiz-terugblik .goed-was{margin:5px 0 0;font-size:13.5px;color:var(--green);font-weight:520}
.quiz-terugblik .uitleg{margin:5px 0 0;font-size:13px;color:var(--muted);line-height:1.55}
@media (max-width:640px){
  .bzraster{grid-template-columns:1fr}
  .quiz{padding:18px}
  .quiz-vraag{font-size:17.5px}
  .head .veld.zoek input{width:100%;max-width:none}
}

/* ---------- reisprogramma ---------- */
.banner.ok{background:var(--green-bg);color:var(--green)}
.rooster{list-style:none;margin:0;padding:6px 0}
.rooster li{display:grid;grid-template-columns:64px 22px 1fr;gap:0 12px;padding:0 22px}
.ro-tijd{
  padding:14px 0 0;font-size:13.5px;font-weight:640;color:var(--ink-2);
  font-variant-numeric:tabular-nums;text-align:right
}
.ro-lijn{position:relative;display:flex;justify-content:center}
.ro-lijn:before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--hair-2)}
.rooster li:first-child .ro-lijn:before{top:20px}
.rooster li:last-child .ro-lijn:before{bottom:calc(100% - 20px)}
.ro-bol{
  width:11px;height:11px;border-radius:50%;background:var(--card);margin-top:18px;
  box-shadow:0 0 0 2px var(--soft);position:relative;z-index:1
}
.soort-project .ro-bol{box-shadow:0 0 0 2px var(--blue);background:var(--blue)}
.soort-lunch .ro-bol,.soort-diner .ro-bol{box-shadow:0 0 0 2px var(--amber);background:var(--amber)}
.soort-hotel .ro-bol{box-shadow:0 0 0 2px var(--green);background:var(--green)}
.ro-tekst{padding:12px 0 14px;min-width:0}
.rooster li + li .ro-tekst{border-top:1px solid var(--hair-2)}
.ro-kop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ro-kop strong{font-size:14.5px;font-weight:600;letter-spacing:-.016em}
.ro-soort{font-size:11px;font-weight:620;letter-spacing:.03em;text-transform:uppercase;color:var(--soft);background:var(--chip);border-radius:980px;padding:2px 8px}
.res{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:620;border-radius:980px;padding:2px 9px}
.res.ja{background:var(--green-bg);color:var(--green)}
.res.nee{background:var(--red-bg);color:var(--red)}
.res .i{width:12px;height:12px}
.ro-plaats{margin:4px 0 0;font-size:13px;color:var(--muted)}
.ro-notitie{margin:4px 0 0;font-size:13px;color:var(--ink-2)}

.dagkaart{padding:16px 18px;margin-bottom:14px;overflow-x:auto}
.dag-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dag-kop label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--soft)}
.dag-kop input[type=date]{
  font:inherit;font-size:13.5px;padding:6px 10px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink)
}
.mini{
  border:1px solid var(--hair);background:var(--card);color:var(--muted);font-size:12.5px;font-weight:520;
  padding:6px 12px;border-radius:var(--r-sm);cursor:pointer
}
.mini:hover{color:var(--ink-2);background:var(--tint)}
.punten{display:flex;flex-direction:column;gap:7px}
.puntrij{
  display:grid;grid-template-columns:70px 118px minmax(128px,1.3fr) minmax(118px,1.1fr) 118px minmax(118px,1fr);
  gap:7px;border:0;margin:0;padding:0;min-width:0
}
.puntrij input,.puntrij select{
  font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);min-width:0;width:100%
}
.puntrij input:focus,.puntrij select:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px var(--ring)}
.puntrij input::placeholder{color:var(--faint)}
.p-tijd{text-align:center;font-variant-numeric:tabular-nums}
.planknoppen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
/* Een toelichting is kleine, zachte tekst — waar hij ook staat. Dit stond er nog niet,
   dus een <p class="hint"> kwam eruit als gewone bodytekst: even groot als de rest en
   daardoor precies niet leesbaar als bijzin. */
.hint{font-size:12.5px;color:var(--soft);line-height:1.5}
/* Idem voor .klein: dat werd op 34 plekken gebruikt maar was maar in zes contexten
   gedefinieerd. Overal elders kwam de bijzin er even groot en even zwart uit als de
   hoofdzin — vandaar dat regels langer werden dan bedoeld en scheef gingen lopen.
   .pil.klein betekent iets anders (een klein pilletje) en blijft buiten schot. */
.klein:not(.pil){font-size:12px;font-weight:400;letter-spacing:0;color:var(--soft)}
/* In een knoppenrij is de toelichting geen knop maar een alinea: laat hem de rest van
   de regel vullen en gewoon afbreken in plaats van tot één woord te worden geperst. */
.planknoppen .hint{flex:1 1 240px;min-width:0}
@media (max-width:1320px){
  .puntrij{grid-template-columns:70px 118px 1fr 1fr}
  .puntrij .p-res,.puntrij .p-notitie{grid-column:span 2}
}
@media (max-width:640px){
  .puntrij{grid-template-columns:70px 1fr}
  .puntrij .p-titel,.puntrij .p-plaats,.puntrij .p-res,.puntrij .p-notitie{grid-column:span 2}
  .rooster li{grid-template-columns:52px 20px 1fr;padding:0 16px}
}

/* ---------- projecten ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.pkaart{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:17px 18px 14px;
  display:flex;flex-direction:column;gap:6px;position:relative;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s
}
.pkaart:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.pkaart:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
/* De foto van het project, bovenaan de kaart. Hij loopt door tot de rand, vandaar de
   negatieve marges die de padding van de kaart terugnemen. De vaste verhouding is er
   voor het raster: zonder die verhouding wordt de ene kaart hoog van een staande foto
   en de andere plat van een liggende, en staat er niets meer op één lijn. */
.pkaart-foto{
  margin:-17px -18px 3px;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;
  aspect-ratio:5/2;background:var(--tint);display:grid;place-items:center;flex:0 0 auto
}
.pkaart-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pkaart-foto.geenfoto .i{width:24px;height:24px;color:var(--faint);opacity:.5}
.pkaart-kop{display:flex;align-items:flex-start;gap:10px}
.pkaart-kop h2{font-size:16px;font-weight:640;letter-spacing:-.024em;line-height:1.25;flex:1;min-width:0}
.ref{
  font-size:10.5px;font-weight:640;letter-spacing:.03em;color:var(--soft);background:var(--chip);
  border-radius:6px;padding:3px 7px;white-space:nowrap;flex:0 0 auto
}
.pkaart-plek{margin:0;font-size:13px;color:var(--muted)}
.pkaart-prijs{margin:4px 0 0;font-size:21px;font-weight:640;letter-spacing:-.032em;font-variant-numeric:tabular-nums}
.pkaart-specs{display:flex;gap:14px;flex-wrap:wrap;margin:0;font-size:12.5px;color:var(--soft)}
.pkaart-voet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.ontw{font-size:12px;color:var(--muted)}
.pil.statusinverkoop{background:var(--green-bg);color:var(--green)}
.pil.statusinaanbouw{background:var(--sky);color:var(--blue)}
.pil.statuslaatstewoningen{background:var(--amber-bg);color:var(--amber)}
.pil.statusuitverkocht{background:var(--chip);color:var(--soft)}
.pkaart-klanten{
  display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:11px;
  border-top:1px solid var(--hair-2);font-size:12.5px;font-weight:520;color:var(--blue)
}
.pkaart-link{
  display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:8px;
  font-size:12.5px;color:var(--muted);font-weight:500
}
.pkaart-link:hover{color:var(--blue)}
.pkaart-link .i{width:13px;height:13px}
.diag{display:grid;grid-template-columns:minmax(190px,.65fr) minmax(320px,1.35fr);gap:14px;align-items:start}
.diag .paneel.breed{grid-column:1 / -1}
.diag .paneel:nth-of-type(2){grid-column:2}
.diag .paneel dl{grid-template-columns:auto 1fr;font-size:12.5px;gap:5px 12px}
.diag .paneel dt{white-space:normal;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--ink-2)}
.diag .paneel dd{display:flex;align-items:baseline;gap:8px;justify-content:flex-end;font-weight:400}
.diag .vb{
  color:var(--soft);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:420px;text-align:right
}
.diag .aant{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;flex:0 0 auto}
@media (max-width:900px){ .diag{grid-template-columns:1fr} .diag .paneel.breed,.diag .paneel:nth-of-type(2){grid-column:1} .diag .vb{max-width:150px} }

/* ---------- zoeken en filters ---------- */
.zoek{display:flex;gap:8px;align-items:center}
.veld{position:relative;display:flex;align-items:center}
.veld .i{position:absolute;left:14px;color:var(--faint);pointer-events:none}
.zoek input[name=q]{
  width:300px;max-width:44vw;padding:10px 16px 10px 40px;border:1px solid var(--hair);border-radius:980px;
  font:inherit;font-size:14px;background:var(--card);color:var(--ink);box-shadow:var(--sh-1);letter-spacing:-.01em
}
.zoek input[name=q]::placeholder{color:var(--faint)}
.zoek input[name=q]:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 4px var(--ring)}
.knop{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border:0;border-radius:980px;
  background:var(--blue);color:var(--knop-ink);font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s,transform .1s
}
.knop:hover{background:var(--blue-2)}
.knop:active{transform:scale(.97)}

.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:var(--muted)}
.seg{display:inline-flex;background:var(--chip);border-radius:var(--r-md);padding:3px;gap:2px;
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg a{flex:0 0 auto}
.seg a{padding:5px 11px;border-radius:9px;color:var(--muted);font-size:13px;font-weight:520;transition:background .14s,color .14s}
.seg a:hover{color:var(--ink-2)}
.seg a.on{background:var(--raise);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.filters label{display:inline-flex;align-items:center;gap:5px;background:var(--card);padding:4px 5px 4px 11px;border-radius:var(--r-md);box-shadow:var(--sh-1);color:var(--soft);font-size:12.5px;border:1px solid var(--hair-2)}
.filters select{padding:4px 6px;border:0;border-radius:7px;font:inherit;font-size:13px;background:transparent;color:var(--ink);font-weight:520}
.filters select:focus{outline:2px solid var(--blue-2);outline-offset:1px}
.schakel,.wis{
  display:inline-flex;align-items:center;gap:6px;background:var(--card);padding:7px 13px;border-radius:var(--r-md);
  color:var(--muted);font-weight:520;font-size:13px;box-shadow:var(--sh-1);border:1px solid var(--hair-2)
}
.schakel:hover,.wis:hover{color:var(--ink-2)}
.schakel.on{background:var(--blue);color:var(--knop-ink);border-color:transparent}
.filters .rechtsuit{margin-left:auto}

.leeg{
  color:var(--muted);background:var(--card);border:1px solid var(--hair-2);border-radius:var(--r-lg);
  padding:52px 24px;text-align:center;box-shadow:var(--sh-2)
}
.leeg .i{width:26px;height:26px;color:var(--faint);margin-bottom:8px}
.leeg strong{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:3px}

/* ---------- pipeline ---------- */
.board{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);gap:14px;
  overflow-x:auto;padding:2px 2px 14px;margin:0 -2px;align-items:start;
  scrollbar-width:thin;scroll-snap-type:x proximity
}
.kolom{scroll-snap-align:start}
.kolom{
  background:var(--bg-2);border-radius:var(--r-lg);padding:12px;min-width:0;
  display:flex;flex-direction:column;gap:10px
}
:root[data-theme="dark"] .kolom{background:var(--bg-2)}
.kolom-kop{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:24px}
.kolom-kop .pil{font-size:11.5px}
.kolom-laat{font-size:11px;font-weight:620;color:var(--red);background:var(--red-bg);border-radius:980px;padding:2px 8px;white-space:nowrap}
.kolom-som{margin:-4px 0 0;padding:0 2px;font-size:12.5px;color:var(--soft);font-variant-numeric:tabular-nums}
.stapel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.kolom-leeg{
  border:1px dashed var(--hair);border-radius:var(--r-md);padding:18px 10px;
  text-align:center;color:var(--faint);font-size:12.5px
}
.kaart{
  display:flex;flex-direction:column;gap:9px;background:var(--card);border-radius:var(--r-md);
  padding:12px;color:inherit;box-shadow:var(--sh-1);position:relative;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s
}
.kaart:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.kaart:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.kaart.laat{box-shadow:var(--sh-1),inset 3px 0 0 var(--red)}
.kaart.laat:hover{box-shadow:var(--sh-2),inset 3px 0 0 var(--red)}
.kaart-kop{display:flex;align-items:center;gap:10px;min-width:0}
.kaart-kop .avatar{width:30px;height:30px;border-radius:9px;font-size:11px}
.kaart-nm{min-width:0}
.kaart-nm strong{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaart-nm small{display:block;font-size:11.5px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaart-actie{font-size:13px;line-height:1.45;color:var(--ink-2)}
.kaart-actie.dim{color:var(--faint)}
.kaart-voet{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kaart-voet .urg{font-size:11.5px;padding:3px 9px}
.kaart-voet .taakregel{margin:0;font-size:11.5px;font-weight:600}
.kaart-eur{margin-left:auto;font-size:11.5px;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.kaart-mist{font-size:11.5px;color:var(--red)}
.buiten{margin-top:26px}
.buiten-tabel .rij{grid-template-columns:1fr auto}

/* ---------- klantdossier ---------- */
.terug{
  display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:520;
  margin:0 0 16px;transition:color .15s
}
.terug:hover{color:var(--ink-2)}
.terug .i{transform:rotate(180deg)}

.dossier-kop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.avatar.groot{width:56px;height:56px;border-radius:17px;font-size:18px}
.dossier-wie{flex:1;min-width:220px}
.dossier-wie h1{font-size:29px;letter-spacing:-.032em}
.dossier-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0;color:var(--muted);font-size:13.5px}
.dossier-meta > span + span:before{content:"·";margin-right:8px;color:var(--faint)}
.dossier-meta .pil + span:before{content:none}
.dossier-acties{display:flex;gap:8px;flex-wrap:wrap}
.knop.stil{background:var(--card);color:var(--ink-2);border:1px solid var(--hair);box-shadow:var(--sh-1)}
.knop.stil:hover{background:var(--tint)}

/* klantreis */
.reis{
  display:flex;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:16px 20px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none;position:relative
}
.reis::-webkit-scrollbar{display:none}
.reis:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.stap{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;text-align:center}
.stap:before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--hair);border-radius:2px}
.stap:first-child:before{display:none}
.stap .bol{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  background:var(--chip);color:transparent;border:2px solid var(--card);box-shadow:0 0 0 2px var(--hair)
}
.stap .bol .i{width:11px;height:11px;stroke-width:2.4}
.stap .lb{font-size:11.5px;color:var(--soft);letter-spacing:-.006em;line-height:1.25}
.stap.gehad:before{background:var(--blue);opacity:.55}
.stap.gehad .bol{background:var(--blue);color:var(--knop-ink);box-shadow:0 0 0 2px transparent}
.stap.gehad .lb{color:var(--muted)}
.stap.nu:before{background:var(--blue);opacity:.55}
.stap.nu .bol{background:var(--blue);box-shadow:0 0 0 4px var(--sky)}
.stap.nu .lb{color:var(--blue);font-weight:640}

.reis-let{
  display:flex;gap:9px;align-items:flex-start;margin:-12px 0 22px;padding:11px 16px;
  border-radius:var(--r-md);background:var(--sky);color:var(--blue);font-size:13px;line-height:1.5
}
.reis-let .i{margin-top:2px;flex:0 0 auto}
.reis-let strong{font-weight:640}

/* twee kolommen */
.twee{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.85fr);gap:22px;align-items:start}
.zij{display:flex;flex-direction:column;gap:14px;position:sticky;top:28px}

/* vervolgactie */
.card.nu{padding:20px 22px;margin-bottom:26px}
/* Twee soorten kaarten, twee manieren om de zijmarge te regelen. Een .grafiek-kaart
   heeft er zelf geen, dus brengen de blokken erbinnen hun eigen 20px mee. Een .nu-kaart
   heeft er wél een. Zet je zo'n blok in een .nu-kaart, dan tellen die twee op en staat
   het 20px verder naar binnen dan de kop erboven — dat is precies wat je ziet als "de
   uitlijning klopt niet". Hier halen we die tweede marge er weer af. */
.card.nu .gr-kop,.card.nu .gr-voet,.card.nu .vlak,.card.nu .blok-sub,.card.nu .regels,
.card.nu .som,.card.nu .schemastand,.card.nu .werkblok,.card.nu .inst,
.card.nu .verkoopsom,.card.nu .doclijst,.card.nu .staffel,.card.nu.kiezer .zoek{
  padding-left:0;padding-right:0;margin-left:0;margin-right:0
}
.nu-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.nu-actie{margin:0;font-size:19px;font-weight:600;letter-spacing:-.024em;line-height:1.35}
.nu-actie.dim{color:var(--soft);font-weight:500}
.nu-datum{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.nu-punt{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;padding:10px 12px;border-radius:var(--r-md);background:var(--amber-bg);color:var(--amber);font-size:13.5px;line-height:1.5}
.nu-punt .i{margin-top:2px;flex:0 0 auto}
.nu-schoon{display:flex;align-items:center;gap:7px;margin:0;color:var(--green);font-size:13.5px}
.taaklijst{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--hair-2);display:flex;flex-direction:column;gap:9px}
.taaklijst li{display:flex;align-items:center;gap:10px}
.taaklijst .vink{
  width:17px;height:17px;border-radius:50%;flex:0 0 auto;
  border:1.8px solid var(--hair);background:transparent
}
.taaklijst .tt{flex:1;min-width:0;font-size:14px;letter-spacing:-.012em}
.taaklijst .urg{font-size:11.5px;padding:3px 9px}

/* tijdlijnfilter */
.tl-filter{margin-left:auto;padding:3px}
.tl-filter button{
  border:0;background:transparent;padding:5px 11px;border-radius:9px;cursor:pointer;
  color:var(--muted);font-size:12.5px;font-weight:520;display:inline-flex;align-items:center;gap:6px
}
.tl-filter button .n{
  font-size:10.5px;font-weight:650;background:var(--chip-2);color:var(--soft);
  border-radius:980px;padding:1px 6px;font-variant-numeric:tabular-nums
}
.tl-filter button[aria-pressed="true"]{background:var(--raise);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.tl-item[hidden]{display:none}

/* tijdlijn */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl:before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--hair-2);border-radius:2px}
.tl-item{display:grid;grid-template-columns:32px 1fr;gap:14px;padding-bottom:12px;position:relative}
.tl-bol{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:var(--card);
  color:var(--soft);box-shadow:0 0 0 1px var(--hair-2);position:relative;z-index:1
}
.tl-item.soort-mijlpaal .tl-bol{background:var(--sky);color:var(--blue);box-shadow:0 0 0 1px transparent}
.tl-item.soort-taak.stand-af .tl-bol{background:var(--green-bg);color:var(--green);box-shadow:0 0 0 1px transparent}
.tl-item.soort-taak.stand-open .tl-bol{background:var(--amber-bg);color:var(--amber);box-shadow:0 0 0 1px transparent}
.tl-item.stand-open .tl-kaart{border-left:3px solid var(--amber);border-radius:var(--r-md)}
.tl-item.soort-taak.stand-af .tl-kop strong{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.tl-item.soort-gesprek .tl-bol{background:var(--amber-bg);color:var(--amber);box-shadow:0 0 0 1px transparent}
.tl-kaart{background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:12px 15px;position:relative;min-width:0}
.tl-kaart:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.tl-kop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tl-kop strong{font-size:14.5px;font-weight:600;letter-spacing:-.016em}
.tl-tag{font-size:11px;font-weight:620;letter-spacing:.02em;text-transform:uppercase;color:var(--soft);background:var(--chip);border-radius:980px;padding:2px 8px}
.stand-open .tl-tag{background:var(--amber-bg);color:var(--amber)}
.soort-taak.stand-af .tl-tag{background:var(--green-bg);color:var(--green)}
.tl-tijd{margin-left:auto;font-size:12.5px;color:var(--soft);white-space:nowrap}
.tl-tekst{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
/* Het soort erbij, zodat een notitie niet op een mail lijkt. Zacht en klein: het is een
   etiket, geen nieuws. */
.tl-soort{font-size:11px;color:var(--faint);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
/* De stand staat alleen bij taken, want alleen een taak kan open zijn. Een mail of
   gesprek is gebeurd; daar valt niets af te ronden. Eerder stond bij alles hetzelfde en
   zei het dus niets. */
.tl-stand{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:620;
  letter-spacing:.02em;text-transform:uppercase;border-radius:980px;padding:2px 9px
}
.tl-stand.is-af{background:var(--green-bg);color:var(--green)}
.tl-stand.is-open{background:var(--amber-bg);color:var(--amber)}
.tl-voet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 0}
.tl-door{margin:0;font-size:12px;color:var(--soft)}

/* Openklappen. De kaart is nu een <details>: de samenvatting draagt wat je in de lijst
   ziet, eronder staat de rest. De marker van de browser gaat weg — hij staat links van
   de tekst en duwt de hele kop scheef; het pijltje rechts doet hetzelfde werk netter. */
.tl-kaart>summary{list-style:none;cursor:pointer;border-radius:var(--r-md);margin:-12px -15px;padding:12px 15px}
.tl-kaart>summary::-webkit-details-marker{display:none}
.tl-kaart>summary:hover{background:var(--tint)}
.tl-kaart>summary:focus-visible{outline:2px solid var(--blue-2);outline-offset:-2px}
.tl-meer{display:inline-flex;color:var(--faint);transition:transform .15s ease;transform:rotate(90deg)}
.tl-kaart[open]>summary .tl-meer{transform:rotate(-90deg)}
/* Openstaand wil je in één oogopslag zien, dus daar blijft de tekst volledig staan als
   hij al kort is; ingeklapt toont hij dezelfde regel als voorheen. */
.tl-kaart[open]>summary .tl-tekst{display:none}
.tl-uit{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair-2)}
.tl-heel{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.tl-heel.leegtekst{color:var(--faint);font-style:italic}
.tl-feiten{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:12px 0 0;font-size:12.5px}
.tl-feiten dt{color:var(--soft)}
.tl-feiten dd{margin:0;color:var(--ink-2)}

/* zijpanelen */
.card.paneel{padding:16px 18px}
.card.paneel h2{font-size:13px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin:0 0 10px}
.card.paneel dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:13.5px}
.card.paneel dt{color:var(--soft);white-space:nowrap}
.card.paneel dd{margin:0;text-align:right;font-weight:520;letter-spacing:-.01em;overflow-wrap:anywhere}
.card.paneel dd.dim{color:var(--soft);font-weight:400}

@media (max-width:1100px){
  .twee{grid-template-columns:1fr}
  .zij{position:static;flex-direction:row;flex-wrap:wrap}
  .zij > .card{flex:1 1 240px}
}
@media (max-width:640px){
  .board{grid-auto-columns:86vw;scroll-snap-type:x mandatory}
  .tl-filter{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .tl-filter::-webkit-scrollbar{display:none}
  .tl-filter button{white-space:nowrap}
  .taaklijst li{flex-wrap:wrap}
  .taaklijst .tt{flex:1 1 100%}
  .dossier-acties{width:100%}
  .knop{flex:1;justify-content:center}
  .stap{min-width:78px}
  .stap .lb{font-size:10.5px}
}

/* ---------- snelzoeker (Cmd+K) ---------- */
.zk{position:fixed;inset:0;z-index:80;display:none;padding:12vh 20px 20px;justify-content:center;align-items:flex-start}
.zk.aan{display:flex}
.zk-waas{position:absolute;inset:0;background:rgba(10,12,16,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:vervaag .16s ease-out}
.zk-doos{
  position:relative;width:min(620px,100%);max-height:70vh;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--sh-pop);
  overflow:hidden;animation:opkomst .18s cubic-bezier(.2,.8,.3,1)
}
@keyframes vervaag{from{opacity:0}to{opacity:1}}
@keyframes opkomst{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.zk-veld{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--hair-2)}
.zk-veld .i{color:var(--faint)}
.zk-veld input{flex:1;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);letter-spacing:-.015em}
.zk-veld input:focus{outline:none}
.zk-veld input::placeholder{color:var(--faint)}
.zk-veld kbd{font:inherit;font-size:11px;font-weight:600;color:var(--soft);background:var(--chip);border-radius:6px;padding:2px 6px}
.zk-lijst{list-style:none;margin:0;padding:6px;overflow:auto}
.zk-lijst li a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);color:var(--ink);transition:background .1s}
.zk-lijst li a .i{color:var(--soft)}
.zk-lijst li[aria-selected="true"] a{background:var(--sky)}
.zk-lijst li[aria-selected="true"] a .i{color:var(--blue)}
.zk-lijst .t{flex:1;min-width:0}
.zk-lijst .t b{display:block;font-size:14px;font-weight:570;letter-spacing:-.014em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zk-lijst .t span{display:block;font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zk-lijst .zij{font-size:11.5px;color:var(--soft);flex:0 0 auto}
.zk-niets{padding:28px 18px;text-align:center;color:var(--soft);font-size:13.5px}
.zk-voet{display:flex;gap:16px;padding:9px 18px;border-top:1px solid var(--hair-2);background:var(--tint);font-size:11.5px;color:var(--soft)}
.zk-voet kbd{font:inherit;font-size:11px;font-weight:600;background:var(--chip);border-radius:5px;padding:1px 5px;margin-right:4px}

/* ---------- responsief ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Let op bij het kiezen van deze grenzen: een tabel krijgt niet het hele venster. De
   zijbalk is 252px en main heeft 2×40px marge, dus een kaart is 332px smaller dan het
   getal in de @media. De oude grenzen waren gekozen alsof dat verschil er niet was, en
   daardoor sloegen ze te laat aan: tussen 1240 en 1324px liep de laatste kolom de kaart
   uit, en een kaart snijdt af — dat is de "halve zin" rechts in de tabel.
   De vuistregel: minimumbreedte van de kolommen + gaps + 44px kaartmarge + 332px. */
@media (max-width:1340px){          /* kolommen vragen 992px, kaart heeft er 1008 bij 1340 */
  .tabel{--cols:minmax(210px,1.6fr) 150px minmax(180px,1.2fr) 170px}
  .verberg-md{display:none}
}
/* Onder deze grens houdt een kolomindeling het niet meer: naast een zijbalk van 252px
   blijft er dan minder dan 800px over voor vier tot zeven kolommen. Dus wordt elke rij
   een kaartje met de kopjes ervoor — dat leest daar beter, en het kán niet scheef.
   De omslag stond op 860px, dezelfde grens waarop de zijbalk zelf verdwijnt, en juist
   daar zat het gat: tussen 860 en 1340 stonden er kolomsets die niet pasten.
   Hier stond ook een nóg smallere set, die één kolom minder aannam via .verberg-sm.
   Die klasse staat in geen enkel scherm: de tabel kreeg dus drie sporen voor vier
   kolommen, en de vierde viel buiten de kaart. Die set is weg. */
@media (max-width:1160px){
  .kop{display:none}
  .rij{grid-template-columns:1fr;gap:10px;padding:16px 18px}
  .rechts{text-align:left}
  .acties{opacity:1;justify-content:flex-start}
  .kol[data-kop]:before{
    content:attr(data-kop);display:block;font-size:10.5px;font-weight:640;letter-spacing:.06em;
    text-transform:uppercase;color:var(--soft);margin-bottom:2px
  }
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .nav{
    position:sticky;top:0;z-index:20;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    padding:10px 14px;gap:8px;border-right:0;border-bottom:1px solid var(--hair)
  }
  .nav nav{flex-direction:row;flex-wrap:wrap;gap:3px;order:3;width:100%}
  .nav nav .soon,.groep,.zk-open span,.zk-open kbd{display:none}
  .nav nav a{padding:6px 11px;font-size:13.5px}
  /* In de balk staat het logo naast de naam in plaats van erboven. */
  .brand{padding:0;margin-right:auto;flex-direction:row;align-items:center;gap:7px}
  .brand-logo{width:104px;margin-left:-6px}
  .brand-naam{width:auto;margin:0;text-align:left;font-size:10px}
  .zk-open{width:auto;margin:0;padding:9px}
  .thema{margin:0;padding:2px}
  .thema button{font-size:0;gap:0;padding:7px 9px}
  .thema button .i{width:16px;height:16px}
  .me{margin:0;padding:0}
  .me strong,.me small{display:none}
  .seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg a{white-space:nowrap}
  .filters{gap:7px}
  .filters label,.schakel,.wis{flex:0 1 auto}
  .filters .rechtsuit{margin-left:0}
  .zoek{width:100%}
  .zoek .veld{flex:1}
  .zoek input[name=q]{width:100%;max-width:none}
  main{padding:22px 16px 60px}
  h1{font-size:26px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .tile{padding:14px}
  .tile .ico{margin-bottom:10px}
  .tile .n{font-size:28px}
}

/* ---------- ontwikkelaars en commissie ---------- */
.ontwtabel{--cols:minmax(190px,1.4fr) 116px 92px 96px 132px 148px minmax(170px,1fr)}
.ontwtabel.zonder-commissie{--cols:minmax(190px,1.5fr) 116px 92px 96px 132px minmax(170px,1fr)}
.pkaart-commissie{
  display:flex;flex-direction:column;gap:2px;margin:8px 0 0;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--data-wash);color:var(--data);font-variant-numeric:tabular-nums
}
.pkaart-commissie .pc-kop{
  display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:560;color:var(--muted);
  letter-spacing:-.005em
}
.pkaart-commissie .i{width:13px;height:13px;opacity:.7;flex:0 0 auto}
.pkaart-commissie strong{font-size:15.5px;font-weight:640;letter-spacing:-.022em;white-space:nowrap}
.pkaart-prijs .tot{font-size:13px;font-weight:500;color:var(--soft);letter-spacing:-.01em;margin-left:6px}
.pil.let-op{background:var(--amber-bg);color:var(--amber)}
.oordeelkol .sterren{font-size:14px}
.m-bouwer{display:block;margin-top:3px}
.plantabel{--cols:minmax(190px,1.5fr) minmax(130px,1fr) 150px 150px minmax(200px,1.3fr)}
@media (max-width:1240px){.plantabel{--cols:minmax(160px,1.4fr) minmax(110px,1fr) 140px 130px minmax(170px,1.2fr)}}
@media (max-width:860px){.plantabel{--cols:minmax(140px,1.4fr) 130px 130px minmax(150px,1fr)}.plantabel .kop span:nth-child(2),.plantabel .rij .kol:nth-child(2){display:none}}
.verberg{display:none!important}
.schemakaart{padding-top:0;padding-bottom:0}
.schemakaart>summary{display:flex;align-items:baseline;gap:10px;padding:18px 0;cursor:pointer;list-style:none}
.schemakaart>summary::-webkit-details-marker{display:none}
.schemakaart>summary h2{margin:0}
.schemakaart>summary .klein{margin-left:auto}
.schemakaart>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--soft);border-bottom:1.6px solid var(--soft);transform:rotate(45deg);transition:transform .15s;flex:0 0 auto}
.schemakaart[open]>summary::after{transform:rotate(-135deg)}
.schemakaart[open]{padding-bottom:18px}

.mensenkaart{padding:0}
.mensenkaart>summary{display:flex;align-items:center;gap:8px;padding:16px 20px;cursor:pointer;list-style:none;font-size:15px;font-weight:560}
.mensenkaart>summary::-webkit-details-marker{display:none}
.mensenkaart>summary .klein{margin-left:auto}
.mensenkaart>summary:hover{background:var(--chip)}
.mk-body{padding:0 20px 18px}
.mk-kop{margin:18px 0 4px;font-size:13px;font-weight:620;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.mk-body .gr-sub{margin:0 0 10px}
.schakelveld{display:flex;align-items:center;gap:9px;margin:8px 0 12px;font-size:13.5px;cursor:pointer}
.schakelveld input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--blue)}
.hrnlijst{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:2px}
.hrn{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:var(--r-sm);background:var(--chip)}
.hrn.nu{background:var(--amber-bg)}
.hrn-wat{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hrn-wanneer{display:flex;flex-direction:column;gap:1px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.hrn-doen{display:flex;gap:6px;flex:0 0 auto}
.hrn-doen form{margin:0}
.hrn-nieuw{border-top:1px solid var(--lijn);padding-top:14px}
@media (max-width:620px){.hrn{flex-wrap:wrap}.hrn-wanneer{text-align:left}}
.feedcheck{padding:0;margin-bottom:16px}
.feedcheck>summary{display:flex;align-items:center;gap:8px;padding:14px 20px;cursor:pointer;font-size:14px;list-style:none}
.feedcheck>summary::-webkit-details-marker{display:none}
.feedcheck>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.6px solid var(--soft);border-bottom:1.6px solid var(--soft);transform:rotate(45deg);transition:transform .15s}
.feedcheck[open]>summary::after{transform:rotate(-135deg)}
.feedcheck>summary:hover{background:var(--chip)}
.fc-body{padding:0 20px 16px}
.fc-regel{display:flex;align-items:baseline;gap:8px;margin:10px 0 0;font-size:13.5px}
.fc-regel .klein{flex:1;min-width:0}

.v-ontw .boordeel{margin-left:6px}
.boordeel{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none}
a.boordeel:hover .sterren{filter:brightness(1.15)}
.oordeelkol .bij{margin-top:1px}
@media (max-width:1340px){
  .ontwtabel{--cols:minmax(175px,1.4fr) 110px 88px 92px 128px 144px}
  .ontwtabel.zonder-commissie{--cols:minmax(175px,1.5fr) 110px 88px 92px 128px}
}
@media (max-width:820px){
  .ontwtabel{--cols:minmax(130px,1.4fr) 100px 84px 124px 140px}
  .ontwtabel.zonder-commissie{--cols:minmax(130px,1.5fr) 100px 84px 124px}
  .ontwtabel .verberg-xs{display:none}
}
.meer{margin:16px 2px 0;font-size:13px;color:var(--soft)}
.meer a{color:var(--blue);font-weight:520}

/* ---------- gekozen woning ---------- */
.kruimel{margin:0 0 4px}
.kiezer{margin-bottom:16px;padding-bottom:18px}
.kiezer .zoek{padding:0 20px}
.kiezer .zoek .veld{flex:1;max-width:520px}
.kiezer .zoek input[name=zoek]{
  width:100%;font:inherit;font-size:13.5px;padding:9px 12px 9px 34px;border:1px solid var(--hair);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink)
}
.kiezer .zoek input[name=zoek]::placeholder{color:var(--faint)}
.kiezer .zoek input[name=zoek]:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 4px var(--ring)}
.vondsten,.units ul{list-style:none;margin:12px 0 0;padding:0}
.vondsten li+li,.units li+li{border-top:1px solid var(--hair-2)}
.vondsten a,.units a{
  display:grid;align-items:center;gap:14px;padding:10px 20px;transition:background .13s
}
.vondsten a{grid-template-columns:minmax(160px,1.6fr) minmax(140px,1.1fr) 140px 96px}
.vondsten a:hover,.units a:hover{background:var(--tint)}
.vondsten a.on{background:var(--sky)}
.v-naam,.v-prijs{display:block;min-width:0}
.v-naam strong,.v-naam{font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.v-naam small,.v-prijs small{display:block;font-size:12px;font-weight:400;color:var(--soft)}
.v-ontw{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-prijs{text-align:right;font-variant-numeric:tabular-nums}
.units{margin-top:16px;border-top:1px solid var(--hair);padding-top:4px}
.units-kop{margin:10px 20px 2px;font-size:11px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.units a{grid-template-columns:96px minmax(120px,1fr) minmax(180px,1.3fr) 116px}
.u-ref{font-size:13px;font-weight:640;color:var(--blue)}
.u-type{font-size:13.5px}
.u-spec{font-size:12.5px;color:var(--soft)}
.u-prijs{text-align:right;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}

.keuzeraster{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.keuzeraster .breed{grid-column:1/-1}
.vlak{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 12px;padding:4px 20px 16px}
.vld{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--soft);grid-column:span 2;min-width:0}
.vld.breed{grid-column:1/-1}
.vld.sm{grid-column:span 1}
.vld input,.vld select,.vld textarea{
  font:inherit;font-size:13.5px;font-weight:400;letter-spacing:-.01em;text-transform:none;color:var(--ink);
  padding:8px 11px;border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--card);width:100%;min-width:0
}
.vld textarea{resize:vertical;line-height:1.5}
.vld input:focus,.vld select:focus,.vld textarea:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px var(--ring)}
.vld input[readonly]{background:var(--tint);color:var(--soft)}

.blok-sub{margin:2px 20px 8px;font-size:11px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.regels{display:flex;flex-direction:column;gap:7px;padding:0 20px}
.extrarij{display:grid;grid-template-columns:1fr 132px;gap:7px;border:0;margin:0;padding:0}
.extrarij input,.termijnrij input,.termijnrij select{
  font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);min-width:0;width:100%
}
.extrarij input:focus,.termijnrij input:focus,.termijnrij select:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px var(--ring)}
.bedrag{text-align:right;font-variant-numeric:tabular-nums}

/* Kortingsregel: omschrijving, bedrag, en waar het vandaan komt. Die derde kolom is het
   hele punt van de regel, dus hij is breed genoeg voor het langste antwoord zonder af te
   kappen — een half gelezen "Van de koopsom én…" is erger dan geen keuzelijst. */
.kortrij{display:grid;grid-template-columns:1fr 132px 210px;gap:7px;border:0;margin:0;padding:0;align-items:center}
.kortrij input,.kortrij select{
  font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);min-width:0;width:100%
}
.kortrij input:focus,.kortrij select:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px var(--ring)}
.schemakop.kortkop{grid-template-columns:1fr 132px 210px;gap:7px}

/* Het tarief en de eenheid horen bij elkaar, dus staan ze in één vak naast elkaar. */
.tariefpaar{display:grid;grid-template-columns:1fr 62px;gap:7px}

/* Velden met een toelichting eronder, naast elkaar.
   Zonder gedeelde rijen bepaalt elke veldnaam zelf waar zíjn invoervak begint, en dan
   hangt "Advocaat" een halve regel hoger dan "AJD / zegelrecht" omdat die naam op twee
   regels valt. Met subgrid delen de drie velden dezelfde drie rijen — naam, vak, uitleg —
   en staan ze gelijk, hoe lang een naam ook is. Kent de browser subgrid niet, dan is het
   resultaat wat het eerst was: leesbaar, alleen niet kaarsrecht. */
.kostenrij{grid-template-rows:auto auto auto;align-items:start}
.kostenrij .vld{grid-row:span 3;display:grid;grid-template-rows:subgrid;gap:5px}

.som{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:14px 20px 0;padding-top:12px;border-top:1px solid var(--hair-2)}
.som dt{font-size:13px;color:var(--muted)}
.som dd{margin:0;text-align:right;font-size:13.5px;font-variant-numeric:tabular-nums}
.som .groot{font-size:16px;font-weight:640;letter-spacing:-.02em;color:var(--ink);padding-top:6px;border-top:1px solid var(--hair-2)}
.som .af{color:var(--red)}
/* Een regel die op nul staat laat je niet meerekenen in het beeld. */
.som .weg{display:none}
.som-bij{display:block;font-size:11.5px;color:var(--soft)}

/* De gap stond op 7px. In de rijen zie je dat niet — daar staan invoervakjes met een
   eigen rand — maar in de kop staan alleen woorden, en "WAARDE" is rechts uitgelijnd
   terwijl "MOMENT" links begint. Met 7px ertussen las dat als één woord. 10px, en de
   twee vaste kolommen iets smaller zodat het geheel even breed blijft als eerst. */
.schemakop,.termijnrij{
  display:grid;
  grid-template-columns:minmax(170px,1.5fr) 62px 96px minmax(130px,1fr) 140px 78px 74px 70px 124px;
  gap:10px;align-items:center
}
.schemakop{padding:8px 20px;margin-top:4px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--tint);font-size:10.5px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.schemakop .rechts{text-align:right} .schemakop .mid{text-align:center}
.termijnrij{border:0;margin:0;padding:0}
.regels#kz-termijnen{padding-top:8px}
.termijnrij .vink{display:grid;place-items:center;margin:0}
.termijnrij .vink input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.t-bedrag{text-align:right;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

.schemastand{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px;margin:14px 20px 18px;padding:0}
.schemastand li{display:grid;grid-template-columns:16px 1fr;gap:4px 9px;padding:10px 12px;border-radius:var(--r-sm);background:var(--tint)}
/* align-self:center zette het icoontje midden tussen kop en toelichting — en als de kop
   over twee regels liep, stond het opeens naast de tóelichting in plaats van bij de kop.
   Bovenaan uitlijnen, net als bij .banner en .pk-stand. */
.schemastand .i{grid-row:1/3;align-self:start;margin-top:2px;color:var(--soft)}
.schemastand strong{font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.schemastand span{font-size:12px;color:var(--soft);line-height:1.45}
.schemastand .goed{background:var(--green-bg)} .schemastand .goed .i,.schemastand .goed strong{color:var(--green)}
.schemastand .let{background:var(--amber-bg)} .schemastand .let .i,.schemastand .let strong{color:var(--amber)}

.bewaarbalk{margin-top:16px;padding:14px 18px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-2)}

.gekozen .nu-volgende{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:13px;color:var(--muted)}
.gekozen .nu-volgende .i{color:var(--blue);flex:0 0 auto}
.keuzesom{display:grid;grid-template-columns:1fr auto;gap:5px 14px;margin:12px 0 0;padding-top:11px;border-top:1px solid var(--hair-2)}
.keuzesom dt{font-size:13px;color:var(--muted)}
.keuzesom dd{margin:0;text-align:right;font-size:13.5px;font-variant-numeric:tabular-nums}
.pil.keuze-reservering,.pil.keuze-contract{background:var(--green-bg);color:var(--green)}
.pil.keuze-optie{background:var(--amber-bg);color:var(--amber)}
.pil.keuze-opgeleverd{background:var(--sky);color:var(--blue)}
.pil.keuze-vervallen{background:var(--chip);color:var(--soft)}

@media (max-width:1400px){
  .schemakop,.termijnrij{grid-template-columns:minmax(140px,1.4fr) 56px 84px minmax(108px,1fr) 130px 66px 64px 60px 112px;gap:9px}
}
/* De negen kolommen van het betaalschema hebben samen ruim 940px nodig. Daaronder liep
   de rij de kaart uit, en omdat een kaart afsnijdt (overflow:hidden) zag je de kop
   "Bedrag" letterlijk half. De kanteling stond op 1180px — te laat: met een zijbalk van
   252px en 40px marge houdt een venster van 1280px 948px over. Daar dus. */
@media (max-width:1280px){
  .schemakop{display:none}
  .termijnrij{grid-template-columns:1fr 58px 96px 1fr;grid-auto-rows:min-content}
  .termijnrij input[type=date]{grid-column:span 2}
  .termijnrij .vink{grid-column:span 1;justify-items:start;padding-left:4px}
  .t-bedrag{grid-column:span 1;text-align:left}
  /* De kortingsregel heeft er maar drie, en die passen hier nog ruim. Zonder deze
     uitzondering verloor hij zijn kop terwijl de rijen gewoon naast elkaar bleven
     staan — dan raad je bij de derde kolom waar je naar kijkt. */
  .schemakop.kortkop{display:grid}
}
@media (max-width:820px){
  .schemakop.kortkop{display:none}
  .kortrij{grid-template-columns:1fr 118px;grid-auto-rows:min-content}
  .kortrij select{grid-column:1/-1}
}
@media (max-width:1180px){
  .keuzeraster{grid-template-columns:1fr}
}
@media (max-width:820px){
  .vlak{grid-template-columns:repeat(2,1fr)}
  .vld,.vld.sm{grid-column:span 1}
  .vondsten a{grid-template-columns:1fr 96px}
  .vondsten .v-ontw,.vondsten .ref{display:none}
  .units a{grid-template-columns:1fr 110px}
  .units .u-type,.units .u-spec{display:none}
}
.vondsten{max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.units ul{max-height:300px;overflow-y:auto;overscroll-behavior:contain}
.termijntabel{--cols:minmax(190px,1.4fr) minmax(170px,1.3fr) minmax(160px,1.2fr) 132px 152px}
.kop-bij{font-size:12.5px;color:var(--soft)}
@media (max-width:1340px){ .termijntabel{--cols:minmax(170px,1.4fr) minmax(150px,1.2fr) 124px 144px} }
@media (max-width:1160px){ .termijntabel{--cols:minmax(140px,1.3fr) 118px 136px} }
.verkoopsom{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:2px 20px 16px}
.verkoopsom div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r-sm);background:var(--tint)}
.vs-n{font-size:21px;font-weight:640;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.vs-k{font-size:12px;color:var(--soft)}
.verkooptabel{--cols:minmax(180px,1.4fr) minmax(180px,1.4fr) 150px 130px 158px;margin-top:6px;border-top:1px solid var(--hair)}
.verkooptabel:after{content:none}
@media (max-width:1340px){ .verkooptabel{--cols:minmax(160px,1.4fr) minmax(160px,1.3fr) 124px 148px} }
@media (max-width:1160px){ .verkooptabel{--cols:minmax(140px,1.3fr) 118px 140px} }
.verkooptabel{--cols:minmax(170px,1.3fr) minmax(170px,1.3fr) 148px 126px 126px 152px}
.verkooptabel.zonder-commissie{--cols:minmax(180px,1.4fr) minmax(180px,1.4fr) 150px 130px 158px}
.vs-commissie{background:var(--data-wash)} .vs-commissie .vs-n{color:var(--data)}
.kwaliteit .kw-rij{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:14px;padding:11px 18px}
@media (max-width:1340px){ .verkooptabel{--cols:minmax(150px,1.3fr) minmax(150px,1.2fr) 118px 118px 144px} }
@media (max-width:1160px){ .verkooptabel,.verkooptabel.zonder-commissie{--cols:minmax(140px,1.3fr) 114px 118px 138px} }

/* ---------- producten per klant ---------- */
.productraster{grid-template-columns:repeat(auto-fill,minmax(368px,1fr))}
.productkaart .pkaart-kop h2 a{color:var(--ink)}
.productkaart .pkaart-kop h2 a:hover{color:var(--blue)}
.productkaart.vervallen{opacity:.62}
.productkaart .pkaart-prijs .tot{font-size:12px}
.pk-stand{list-style:none;display:flex;flex-direction:column;gap:6px;margin:12px 0 0;padding-top:11px;padding-left:0;border-top:1px solid var(--hair-2)}
.pk-stand li{display:grid;grid-template-columns:15px 1fr;align-items:start;gap:8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pk-stand .i{margin-top:2px;color:var(--soft)}
/* Geen nowrap: "€ 12.500 · over 3 maanden" past niet altijd naast de regel ervoor, en
   met nowrap liep die staart de kaart uit — de kaart snijdt af, dus je zag een halve
   zin. Laat hem gewoon meelopen en afbreken. */
.pk-stand .klein{color:var(--soft);font-size:12px}
.pk-stand .af,.pk-stand .af .i{color:var(--green)}
.pk-stand .let,.pk-stand .let .i{color:var(--amber)}
.pk-stand .dim,.pk-stand .dim .i{color:var(--faint)}
/* De toelichting bij een bedrag hoort eronder, niet erachter: achter het bedrag rekt
   hij de rechterkolom op en schuift het label links weg. */
.keuzesom .klein{display:block;font-size:11.5px;color:var(--soft);line-height:1.35}

.woninglijst{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.woninglijst a{
  display:flex;flex-direction:column;gap:5px;padding:12px 13px;border-radius:var(--r-sm);
  background:var(--tint);border:1px solid transparent;transition:border-color .13s,background .13s
}
.woninglijst a:hover{border-color:var(--hair);background:var(--card)}
.wl-kop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.wl-kop strong{font-size:14.5px;font-weight:600;letter-spacing:-.017em;color:var(--ink)}
.wl-bij{font-size:12.5px;color:var(--soft)}
.wl-cijfers{display:flex;gap:18px;flex-wrap:wrap;margin-top:3px}
.wl-cijfers>span{display:flex;flex-direction:column;font-size:14px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--ink)}
.wl-cijfers small{font-size:11px;font-weight:400;letter-spacing:0;color:var(--soft)}
.wl-cijfers .wl-calida{color:var(--data)}
.wl-let,.wl-volgende{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-top:2px}
.wl-let{color:var(--amber)} .wl-volgende{color:var(--muted)}
.wl-let .i,.wl-volgende .i{flex:0 0 auto}
.wl-volgende .i{color:var(--blue)}
.mini.gevaar{color:var(--red);border-color:var(--hair)}
.mini.gevaar:hover{background:var(--red-bg);color:var(--red)}

/* ---------- Calida ---------- */
.calidablok{border-top:0}
.groot-getal{margin:0 20px;font-size:44px;font-weight:640;letter-spacing:-.04em;line-height:1.05;color:var(--data)}
.groot-bij{margin:6px 20px 12px;font-size:12.5px;color:var(--soft);line-height:1.55}
.aandeelbalk{height:8px;margin:0 20px 18px;border-radius:980px;background:var(--data-spoor);overflow:hidden}
.aandeelbalk span{display:block;height:100%;border-radius:980px;background:var(--data)}
.pil.cal-verkocht,.pil.cal-geplaatst{background:var(--green-bg);color:var(--green)}
.pil.cal-aangeboden{background:var(--amber-bg);color:var(--amber)}
.pil.cal-afgewezen,.pil.cal-geen{background:var(--chip);color:var(--soft)}
.plaatstabel{--cols:minmax(180px,1.4fr) minmax(180px,1.4fr) minmax(160px,1.2fr) 132px 150px;border-top:1px solid var(--hair)}
.calidatabel{--cols:minmax(170px,1.3fr) minmax(160px,1.2fr) minmax(150px,1.1fr) 140px 124px 138px;border-top:1px solid var(--hair)}
.plaatstabel:after,.calidatabel:after{content:none}
.oplevertabel{--cols:minmax(180px,1.4fr) minmax(180px,1.4fr) minmax(160px,1.2fr) 140px 152px}
@media (max-width:1340px){
  .plaatstabel{--cols:minmax(160px,1.4fr) minmax(160px,1.2fr) 124px 144px}
  .calidatabel{--cols:minmax(150px,1.3fr) minmax(140px,1.1fr) minmax(140px,1fr) 118px 132px}
  .oplevertabel{--cols:minmax(160px,1.4fr) minmax(160px,1.2fr) 132px 144px}
}
@media (max-width:1160px){
  .plaatstabel,.oplevertabel{--cols:minmax(140px,1.3fr) 122px 138px}
  .calidatabel{--cols:minmax(140px,1.3fr) minmax(130px,1fr) 114px 130px}
}

/* ---------- rechten en commissie ---------- */
.commissietabel{--cols:minmax(180px,1.3fr) minmax(170px,1.3fr) 148px 140px 158px}
.commissietabel:after{content:none}
.rij.isuit{opacity:.72}
.urg.af{background:var(--green-bg);color:var(--green)}
.pil.mijl-sleutel{background:var(--sky);color:var(--blue)}
.pil.mijl-calida{background:var(--data-wash);color:var(--data)}
.verkooptabel.zonder-omzet{--cols:minmax(180px,1.4fr) minmax(180px,1.4fr) 150px 130px 158px}
.verkooptabel.zonder-omzet.zonder-commissie{--cols:minmax(200px,1.5fr) minmax(200px,1.5fr) 160px 170px}
@media (max-width:1340px){
  .commissietabel{--cols:minmax(160px,1.3fr) minmax(150px,1.2fr) 128px 144px}
}
@media (max-width:1160px){
  .commissietabel{--cols:minmax(140px,1.3fr) 124px 140px}
}

/* ---------- woningen in lijsten ---------- */
.pil.klein{font-size:10.5px;padding:2px 7px}
.pil.klein:before{width:4px;height:4px}
.kol .bij .pil.klein{vertical-align:middle}
.kol .bij .i.let{width:12px;height:12px;color:var(--amber);vertical-align:-2px;margin-left:2px}
.kaart-woning{
  display:flex;align-items:center;gap:6px;margin-top:7px;padding-top:8px;
  border-top:1px solid var(--hair-2);font-size:12px;color:var(--muted);min-width:0
}
.kaart-woning>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.kaart-woning .i{flex:0 0 auto;color:var(--soft)}
.kaart-woning .pil{flex:0 0 auto}
.commissietabel.met-bruto{--cols:minmax(170px,1.3fr) minmax(160px,1.2fr) 140px 132px 128px 150px}
@media (max-width:1340px){ .commissietabel.met-bruto{--cols:minmax(150px,1.3fr) minmax(140px,1.1fr) 118px 118px 138px} }
@media (max-width:1160px){ .commissietabel.met-bruto{--cols:minmax(140px,1.3fr) 118px 124px 136px} }

/* ---------- cashflow ----------
   Drie stappen van dezelfde vraag "hoe zeker is dit geld": ontvangen, te factureren,
   verwacht. Gevalideerd met de palettecontrole voor licht én donker; de middelste is
   bewust amber omdat het geen zekerheidsstap is maar een werklijst. */
:root{
  --cf-ontvangen:#0e6f4c; --cf-factureren:#a86a12; --cf-verwacht:#3fa17d;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cf-ontvangen:#2b8e6c; --cf-factureren:#b07c1e; --cf-verwacht:#46a382;
  }
}
:root[data-theme="dark"]{
  --cf-ontvangen:#2b8e6c; --cf-factureren:#b07c1e; --cf-verwacht:#46a382;
}
.cashtabel{--cols:minmax(140px,1fr) minmax(200px,2fr) 120px 130px 140px}
@media (max-width:1340px){ .cashtabel{--cols:minmax(120px,.9fr) minmax(160px,1.8fr) 104px 116px 120px} }
.cashtabel .rij.nu{background:var(--tint)}
.cf-balk{
  display:flex;gap:2px;height:9px;border-radius:99px;overflow:hidden;
  background:var(--chip);max-width:100%;margin-bottom:5px
}
.cf-balk>span{display:block;height:100%;border-radius:3px}
.cf-ontvangen{background:var(--cf-ontvangen)}
.cf-factureren{background:var(--cf-factureren)}
.cf-verwacht{background:var(--cf-verwacht)}
.legenda{
  list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin:0;padding:0 20px 12px;
  font-size:12px;color:var(--muted)
}
.legenda li{display:flex;align-items:center;gap:6px}
.lg-vlak{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.lg-lijn{width:12px;height:2px;border-radius:2px;background:var(--red);flex:0 0 auto}
.blok.let-op .bl-waarde{color:var(--amber)}
.lijstjes{list-style:none;margin:0;padding:0 0 6px}
.lijstjes li{
  display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,1.6fr) auto;
  gap:12px;align-items:baseline;padding:10px 20px;font-size:13px
}
.lijstjes li + li{border-top:1px solid var(--hair-2)}

/* ---------- trechter per kanaal ---------- */
.trechtertabel{--cols:minmax(220px,1.7fr) 92px 100px 118px 132px 140px}
@media (max-width:1340px){ .trechtertabel{--cols:minmax(180px,1.5fr) 78px 88px 104px 118px 124px} }

/* ---------- Calida Interiors ---------- */
.calidatabel{--cols:minmax(180px,1.4fr) minmax(140px,1fr) minmax(120px,.9fr) 132px 178px}
.calidageld{--cols:minmax(190px,1.5fr) 112px 120px 128px 132px 124px}
.pakkettabel{--cols:minmax(190px,1.7fr) 100px 132px 132px 140px}
.besteltabel{--cols:minmax(150px,1.1fr) minmax(105px,.75fr) minmax(115px,.85fr) 96px 150px 246px}
/* Eigen naam: .commissietabel is al van het Commissie-scherm van Helder. */
.calidacommissie{--cols:minmax(200px,1.5fr) minmax(130px,.9fr) 120px 140px 150px}

/* De knopjes op een regel: geleverd, betaald, wijzig. Het formulier zelf mag geen
   eigen doos worden — display:contents laat de knop zelf in de flexrij staan. */
.bestelknoppen{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;margin-top:6px}
.bestelknoppen form{display:contents}
.kol:not(.rechts) .bestelknoppen{justify-content:flex-start}
.bestelknoppen .mini{padding:3px 8px;font-size:11.5px}
/* Een aan/uit-vinkje: hetzelfde woord blijft staan, het vinkje zegt of het aanstaat. */
.mini.vink{display:inline-flex;align-items:center;gap:4px}
.mini.vink.aan{background:var(--green-bg);color:var(--green);border-color:transparent;font-weight:600}
.mini.vink.aan:hover{background:var(--green-bg);color:var(--green)}
@media (max-width:1340px){
  .calidatabel{--cols:minmax(150px,1.3fr) minmax(110px,.9fr) minmax(100px,.8fr) 118px 156px}
  .calidageld{--cols:minmax(160px,1.4fr) 98px 106px 112px 118px 106px}
  .pakkettabel{--cols:minmax(160px,1.5fr) 88px 112px 116px 120px}
  .besteltabel{--cols:minmax(132px,1fr) minmax(96px,.75fr) minmax(96px,.75fr) 88px 128px 222px}
  .calidacommissie{--cols:minmax(170px,1.4fr) minmax(110px,.8fr) 104px 124px 132px}
}

/* ---------- documenten uit de klantmap ---------- */
.doctabel{--cols:minmax(200px,1.3fr) minmax(240px,1.9fr) 110px 130px}

.doclijst{list-style:none;margin:0;padding:0 20px}
.doclijst li{
  display:grid;grid-template-columns:18px 1fr auto;gap:9px;align-items:baseline;
  padding:6px 0;font-size:13px
}
.doc-bol{
  width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  background:var(--chip);color:transparent;align-self:center
}
.doc-er .doc-bol{background:var(--green);color:#fff}
.doc-bol .i{width:9px;height:9px}
.doc-niet>span:nth-child(2){color:var(--soft)}
.doc-bij{font-size:11.5px;color:var(--faint);white-space:nowrap}
.doc-niet .doc-bij{color:var(--amber)}
/* Een groep waar nog niets uit binnen is, is nog niet aan de beurt. Die in oranje
   zetten maakt een lijst die vanaf dag één alarmerend oogt en dus niets zegt. */
.doc-later>span:nth-child(2){color:var(--soft)}
.doc-later .doc-bij{color:var(--faint)}
/* Waar het bestand heen moet. Dat is het hele punt van mappen: je hoeft niet te weten
   hoe je iets moet noemen, alleen waar je het neerzet. */
.doc-map{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:99px;
  background:var(--chip);color:var(--soft);font-size:10.5px;font-weight:600;
  font-variant-numeric:tabular-nums
}
.doc-telling{
  margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--chip);
  color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none
}
.stap-drive{background:var(--green-bg);color:var(--green);text-decoration:none}
.stap-drive:hover{text-decoration:underline}

/* ---------- dossiervoortgang ---------- */
.voortgangtabel{--cols:minmax(210px,1.4fr) minmax(230px,1.6fr) minmax(150px,1fr) 130px}
.vg-balk{
  display:block;height:6px;border-radius:99px;background:var(--chip);overflow:hidden;
  max-width:170px;margin-bottom:5px
}
.vg-balk>span{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .3s}
.stappen{list-style:none;margin:0;padding:0}
/* De kaart staat in een kolom van ~600px, dus de naam en de invulvelden onder elkaar.
   Een mediaquery helpt hier niet: die kijkt naar het venster, niet naar de kolom. */
.stappen>li{
  display:grid;grid-template-columns:26px 1fr;gap:4px 11px;align-items:start;padding:12px 20px
}
.stappen>li>:nth-child(2){grid-column:2}
.stappen>li>:nth-child(3),
.stappen>li>:nth-child(4){grid-column:2}
.stap-regel{display:flex;gap:9px;align-items:center;margin-top:6px}
.stap-regel select{flex:0 0 118px}
.stap-regel input[type=date]{flex:0 0 148px}
.stap-regel input[name*="notitie"]{flex:1 1 auto;min-width:0}
.stappen>li + li{border-top:1px solid var(--hair-2)}
.stap-bol{
  width:19px;height:19px;border-radius:50%;margin-top:2px;display:grid;place-items:center;
  background:var(--chip);color:transparent;flex:0 0 auto
}
.stap-klaar .stap-bol{background:var(--green);color:#fff}
.stap-bezig .stap-bol{background:var(--amber-bg);box-shadow:inset 0 0 0 2px var(--amber)}
.stap-nvt .stap-bol{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hair)}
.stap-bol .i{width:11px;height:11px}
.stap-naam{font-size:13.5px;font-weight:560;color:var(--ink);line-height:1.3}
.stap-nvt .stap-naam{color:var(--soft);text-decoration:line-through}
.stap-uitleg{display:block;font-size:11.5px;color:var(--soft);line-height:1.4;margin-top:2px;font-weight:400}
.stap-hs{
  display:inline-block;margin-top:3px;padding:1px 7px;border-radius:99px;
  background:var(--sky);color:var(--blue);font-size:10.5px;font-weight:600
}
.stappen select,.stappen input{
  width:100%;padding:6px 9px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px
}
.stappen input:focus-visible,.stappen select:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
@media (max-width:620px){
  .stap-regel{flex-wrap:wrap}
  .stap-regel select,.stap-regel input[type=date]{flex:1 1 130px}
}

/* ---------- het werkblok: afvinken, loggen, opnieuw plannen ---------- */
.werkblok{
  margin:14px 20px 4px;padding-top:13px;border-top:1px solid var(--hair-2);
  display:flex;flex-direction:column;gap:8px
}
.wb-regel{display:flex;align-items:center;gap:9px}
.wb-vink{
  flex:0 0 auto;width:22px;height:22px;padding:0;border:1.5px solid var(--hair);border-radius:7px;
  background:var(--card);color:var(--soft);display:grid;place-items:center;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s
}
.wb-vink:hover{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.wb-taak{font-size:13px;color:var(--ink-2);line-height:1.35}
.wb-notitie{display:flex;gap:7px}
.wb-notitie input{flex:1;min-width:0}
.wb-opvolging{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wb-label{font-size:12px;color:var(--soft);margin-right:1px}
.wb-opvolging input[type=date]{width:auto;flex:0 1 150px}
.werkblok input{
  padding:7px 10px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font:inherit;font-size:13px
}
.werkblok input:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--blue-2)}
.werkblok textarea,.werkblok select{
  padding:7px 10px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font:inherit;font-size:13px;width:100%;min-width:0
}
.werkblok textarea{resize:vertical;line-height:1.5}

/* Een openstaande taak: afvinken links, wie en wanneer eronder, en een uitklapper om
   hem door te schuiven. Die stond er niet — je kon een taak afvinken maar niet
   verzetten, en dus ging je er toch voor naar HubSpot. */
.wb-taakrij{display:flex;flex-direction:column;gap:4px}
/* Bij een taak met datum en toelichting is de regel drie regels hoog. Het vinkje hoort
   dan bij de eerste regel, niet in het midden van het blok. */
.wb-taakrij .wb-regel{align-items:flex-start}
.wb-taakrij .wb-vink{margin-top:1px}
.wb-taak .klein{display:block;color:var(--soft);font-size:11.5px;line-height:1.35}
/* De gap stond op 7px en dat plakte: driehoekje, icoontje en tekst raakten elkaar bijna.
   11px tussen de onderdelen, en wat meer lucht boven en onder de regel zelf. */
.wb-taakbewerk>summary,.wb-uit>summary{
  display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;
  font-size:13px;font-weight:560;color:var(--muted);padding:9px 0;user-select:none
}
.wb-taakbewerk>summary::-webkit-details-marker,.wb-uit>summary::-webkit-details-marker{display:none}
.wb-taakbewerk>summary{margin-left:31px;color:var(--blue);font-size:12px;padding:0}
.wb-taakbewerk>summary:hover,.wb-uit>summary:hover{color:var(--ink-2)}
.wb-uit>summary .i{color:var(--soft);flex:0 0 auto}
.wb-uit>summary .klein{margin-left:auto;color:var(--soft);font-weight:400}
/* Het driehoekje zelf, want de standaardmarkering is weg. */
.wb-uit>summary:before{
  content:"";width:0;height:0;flex:0 0 auto;
  border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
  opacity:.5;transition:transform .15s
}
.wb-uit[open]>summary:before{transform:rotate(90deg)}
.wb-uit{border-top:1px solid var(--hair-2);padding-top:4px}

/* Het formulier binnen zo'n uitklapper. Zelfde raster als de rest van de app, maar
   binnen een kaart die zijn eigen zijmarge al heeft — dus zonder padding. */
.wb-vlak{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;
  padding:8px 0 4px;margin:0
}
.wb-vlak .vld{grid-column:span 1}
.wb-vlak .vld.breed{grid-column:1/-1}
.wb-vlak .planknoppen{grid-column:1/-1;margin-top:2px}
/* Een losse toelichting onder de knoppen loopt over de volle breedte. Zonder deze regel
   werd hij één kolom breed en las hij als een smalle kolom naast leegte. */
.wb-vlak>.hint{grid-column:1/-1;margin:0}
.wb-vlak .planknoppen .hint{flex:1 1 200px;min-width:0}

/* Contactmoment: één regel tekst, dan de knoppen die zeggen wát er gebeurde. */
.wb-contact{display:flex;flex-direction:column;gap:7px}
.wb-contact>input{width:100%}
.wb-knoppen{display:flex;gap:6px;flex-wrap:wrap}
.wb-bij{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--soft)}
.wb-bij label{display:flex;align-items:center;gap:7px}
.wb-bij input[type=date]{flex:0 0 auto}

/* De vervolgactie: de regel die bovenaan de kaart staat. Die kwam uit HubSpot en was
   hier niet te veranderen — precies het verkeerde om. */
.wb-actie{display:flex;align-items:center;gap:7px;flex:1 1 260px;min-width:0;font-size:12px;color:var(--soft)}
.wb-actie input{flex:1;min-width:0}

/* Het bewerkscherm voor de klantgegevens. Een kaart die dichtklapt, want je hebt hem
   niet elk bezoek nodig — maar hij staat wel op de plek waar je de waarde ziet. */
.gegevenskaart>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;margin-bottom:0;user-select:none
}
.gegevenskaart>summary::-webkit-details-marker{display:none}
.gegevenskaart[open]>summary{margin-bottom:10px}
.gegevenskaart>summary .klein{color:var(--soft)}
.gegevenskaart>summary:hover h2{color:var(--blue)}
.gegevensvlak{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:2px}
/* Uitleg onder één veld, voor het geval waar de veldnaam de bedoeling niet verraadt. */
.veld-uitleg{
  display:block;margin-top:4px;font-size:11.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--soft);line-height:1.45
}

/* ---------- alles-doen achter één knop ---------- */
/* Een dossier open je om te lézen. Pas als je besluit iets te doen wil je de velden
   zien. Vandaar dat het hele werkblok op de klantkaart achter deze knop zit. */
.wb-actie-uit{margin:14px 0 0;border-top:1px solid var(--hair-2)}
.wb-actie-uit>summary{
  display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;user-select:none;
  padding:12px 0 2px;font-size:13.5px;font-weight:600;color:var(--blue);letter-spacing:-.01em
}
.wb-actie-uit>summary::-webkit-details-marker{display:none}
.wb-actie-uit>summary:hover{color:var(--ink)}
.wb-actie-uit>summary .i{color:currentColor;flex:0 0 auto}
.wb-actie-uit>summary .klein{margin-left:auto;color:var(--soft);font-weight:400}
.wb-actie-uit>summary:before{
  content:"";width:0;height:0;flex:0 0 auto;
  border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
  opacity:.6;transition:transform .15s
}
.wb-actie-uit[open]>summary:before{transform:rotate(90deg)}
/* Binnen de uitklapper heeft het werkblok zijn eigen scheidingslijn niet meer nodig. */
.wb-actie-uit .werkblok{border-top:0;margin-top:6px;padding-top:0}

/* De leadkaart klapt ook in: naslag die je één keer invult. */
.leadkaart>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;user-select:none;margin-bottom:0
}
.leadkaart>summary::-webkit-details-marker{display:none}
.leadkaart[open]>summary{margin-bottom:10px}
.leadkaart>summary:hover h2{color:var(--blue)}
@media (max-width:1180px){ .gegevensvlak{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:720px){ .wb-vlak,.gegevensvlak{grid-template-columns:1fr} }

/* Op Vandaag staat het blok binnen een rij: smaller. Het stond hier dicht en ging open
   bij hover, maar dan groeit de rij onder je muis en klapt weer dicht zodra je een
   centimeter beweegt — je klikt mis en je raakt kwijt wat je aan het typen was. Open
   staat nu in de uitklapper zelf (details.wb-actie-uit): openen is een klik, en wat
   open is blijft open. De openstaande taken met hun afvinkknop staan er altijd, want
   dat is de handeling die je het vaakst doet. */
.werkblok-kort{grid-column:1/-1;margin:10px 0 0;padding-top:10px;gap:6px}
.werkblok-kort .wb-opvolging .wb-label{display:none}
.werkblok-kort .wb-actie-uit{margin-top:8px}

/* ---------- leads en beloning ---------- */
.pil.lead-helder{background:var(--chip);color:var(--muted)}
.pil.lead-gedeeld{background:var(--sky);color:var(--blue)}
.pil.lead-agent{background:var(--green-bg);color:var(--green)}
.leadkaart .vlak{grid-template-columns:repeat(4,1fr);gap:9px 10px}
/* Het invulblok hoort zichtbaar los te staan van wat erboven wordt verteld. */
.leadkaart .leadform{margin-top:14px;padding-top:13px;border-top:1px solid var(--hair-2)}
.leadform .planknoppen{margin-top:10px}
.beloningtabel{--cols:minmax(180px,1.3fr) minmax(200px,1.5fr) minmax(150px,1fr) 124px 138px}
.beloningtabel:after{content:none}
.rij.isverwacht{opacity:.78}
.kol .vl.min,.som .min,.regeling .min{color:var(--red)}
.regeling{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:2px 20px 14px}
.regeling>div{padding:13px 15px;border-radius:var(--r-sm);background:var(--tint)}
.rg-kop{margin:0 0 3px;font-size:13.5px;font-weight:640;letter-spacing:-.015em;color:var(--ink)}
.rg-uit{margin:0 0 9px;font-size:12px;color:var(--soft);line-height:1.45}
.regeling dl{display:grid;grid-template-columns:1fr auto;gap:4px 14px;margin:0}
.regeling dt{font-size:12.5px;color:var(--muted)}
.regeling dd{margin:0;text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.urg.geen{background:var(--chip);color:var(--soft)}
@media (max-width:1340px){
  .beloningtabel{--cols:minmax(160px,1.3fr) minmax(180px,1.4fr) 116px 130px}
  .leadkaart .vlak{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1160px){
  .beloningtabel{--cols:minmax(140px,1.3fr) minmax(150px,1.2fr) 126px}
  .regeling{grid-template-columns:1fr}
}
.vld .opt{font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint);margin-left:5px}

/* ---------- leveranciers en netwerk ---------- */
.formkaart{margin-bottom:16px}
.levraster,.netraster{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.levkaart .pkaart-kop h2 a,.netkaart .pkaart-kop h2 a{color:var(--ink)}
.levkaart .pkaart-kop h2 a:hover,.netkaart .pkaart-kop h2 a:hover{color:var(--blue)}
.lev-tarief{display:flex;align-items:flex-start;gap:7px;margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.lev-tarief .i{margin-top:2px;flex:0 0 auto;color:var(--soft)}
.lev-notitie{margin:6px 0 0;font-size:12.5px;color:var(--soft);line-height:1.5}
.lev-contact{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair-2)}
.lev-contact a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--blue);font-weight:520}
.lev-contact .i{color:var(--soft)}
.pil.lev-actief{background:var(--green-bg);color:var(--green)}
.pil.lev-soms{background:var(--amber-bg);color:var(--amber)}
.pil.lev-nieuw{background:var(--sky);color:var(--blue)}
.pil.lev-niet{background:var(--chip);color:var(--soft)}
.levkaart.status-niet{opacity:.66}

.pil.net-benaderd{background:var(--chip);color:var(--muted)}
.pil.net-gesprek{background:var(--sky);color:var(--blue)}
.pil.net-afspraak{background:var(--amber-bg);color:var(--amber)}
.pil.net-levert{background:var(--green-bg);color:var(--green)}
.pil.net-afgehaakt{background:var(--chip);color:var(--soft)}
.net-eig{color:var(--faint)}
.net-afspraak{display:flex;flex-direction:column;gap:2px;margin:8px 0 0;padding:9px 12px;border-radius:var(--r-sm);background:var(--data-wash)}
.net-afspraak strong{font-size:14.5px;font-weight:640;letter-spacing:-.018em;color:var(--data)}
.net-afspraak span{font-size:12px;color:var(--muted);line-height:1.45}
.net-afspraak.leeg-afspraak{background:var(--tint)}
.net-afspraak.leeg-afspraak span{color:var(--soft)}
.netkaart .pkaart-kop{flex-wrap:wrap}
.netkaart .pkaart-specs{margin-top:9px}
.netkaart .pkaart-specs .min{color:var(--red)}
.net-volgende{display:flex;align-items:center;gap:7px;margin:9px 0 0;font-size:12.5px;color:var(--muted)}
.net-volgende .i{flex:0 0 auto;color:var(--blue)}
.net-volgende .klein{color:var(--soft);font-size:12px}
.net-volgende.dim,.net-volgende.dim .i{color:var(--soft)}

.netacties{list-style:none;margin:0;padding:0;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.netacties li+li{border-top:1px solid var(--hair-2)}
.netacties a{display:grid;grid-template-columns:minmax(180px,1.2fr) 1fr 140px;gap:14px;align-items:center;padding:12px 20px;transition:background .13s}
.netacties a:hover{background:var(--tint)}
.ac-naam strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.ac-naam small{display:block;font-size:12px;color:var(--soft)}
.ac-actie{font-size:13px;color:var(--muted)}
.netacties .urg{justify-self:end}
.vld.uit input{background:var(--tint);color:var(--faint)}
@media (max-width:820px){
  .netacties a{grid-template-columns:1fr 118px}
  .netacties .ac-actie{grid-column:1/-1;padding-top:2px}
}
.nu-aanbrenger{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 10px;padding:8px 11px;
  border-radius:var(--r-sm);background:var(--data-wash);font-size:13px;color:var(--data)}
.nu-aanbrenger .i{flex:0 0 auto;opacity:.8}
.nu-aanbrenger strong{font-weight:640;letter-spacing:-.012em}
.nu-aanbrenger .klein{font-size:12px;color:var(--muted)}
.avatar.kost{background:var(--amber-bg);color:var(--amber)}
.net-kosten{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:8px 0 0;padding:9px 12px;
  border-radius:var(--r-sm);background:var(--amber-bg)}
.net-kosten .i{align-self:center;flex:0 0 auto;color:var(--amber)}
.net-kosten strong{font-size:14.5px;font-weight:640;letter-spacing:-.018em;color:var(--amber)}
.net-kosten span{font-size:12px;color:var(--muted);line-height:1.45}


/* ---------- marge: wat een verkoop ons oplevert ---------- */
.margesom dd.af,.margesom dd.min{color:var(--red)}
.margesom .groot.negatief,.negatief{color:var(--red)}
.margetabel{--cols:minmax(200px,1.5fr) 138px 120px 104px 96px 96px 112px}
.kanaaltabel{--cols:minmax(96px,1.4fr) 72px 96px}
.mini.aan{background:var(--chip-2);color:var(--ink);font-weight:600}
/* Vier van de zeven kolommen hebben verberg-md, dus vanaf 1340 blijven er drie over —
   maar de sporen bleven met zeven staan. Een grid maakt die lege sporen gewoon aan, dus
   de kolom "Marge" landde buiten de kaart en werd afgesneden. Drie kolommen, drie
   sporen. */
@media (max-width:1340px){
  .margetabel{--cols:minmax(200px,1.6fr) 150px 140px}
}
.ivalijst{list-style:none;margin:12px 20px 4px;padding:0;display:grid;gap:8px}
.ivalijst li{border-top:1px solid var(--hair-2);padding-top:8px}
.ivalijst form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ivalijst .ivanaam{flex:1;min-width:180px;font-size:13.5px;font-weight:560}
.ivalijst select{min-width:210px}
.som .groot .margepct{margin-left:8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.net-model,.net-omslag{display:flex;gap:8px;align-items:flex-start;margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.net-model .i,.net-omslag .i{margin-top:2px;flex:none}
.net-model strong{color:var(--ink)}
.net-omslag strong{color:var(--ink)}
.regeling2{grid-template-columns:repeat(2,minmax(0,1fr))}
.regeling3{grid-template-columns:repeat(3,minmax(0,1fr))}
.regeling2 .rg-tot,.regeling3 .rg-tot{font-weight:640;color:var(--ink);padding-top:5px;border-top:1px solid var(--hair-2)}
@media (max-width:820px){.regeling2,.regeling3{grid-template-columns:1fr}}
.pil.lead-helder{background:var(--chip-2);color:var(--muted)}
.pil.lead-gedeeld{background:var(--amber-bg);color:var(--amber)}
.pil.lead-agent{background:var(--green-bg);color:var(--green)}
.nu-tarief{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:8px 0 2px;font-size:13px;color:var(--muted)}
.nu-tarief .i{align-self:center;flex:none}
.nu-tarief strong{font-size:15px;color:var(--ink);letter-spacing:-.01em}
.staffel{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px;margin:14px 20px 4px}
.st-trede{background:var(--chip);border-radius:var(--r-md);padding:10px 12px;text-align:center}
.st-trede .st-n{display:block;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.st-trede .st-b{display:block;font-size:17px;font-weight:640;letter-spacing:-.02em;margin-top:3px}
.st-trede .st-k{display:block;font-size:11px;color:var(--soft);margin-top:1px}
.st-nul .st-b{color:var(--soft)}
.bonustabel{--cols:minmax(180px,1.6fr) 120px 120px 120px}
@media (max-width:900px){.bonustabel .kop{display:none}}
.poolbalk{height:6px;border-radius:3px;background:var(--green-bg);overflow:hidden;margin:6px 0 0}
.poolbalk span{display:block;height:100%;background:var(--amber);border-radius:3px}
.net-teveel{color:var(--red)}
.wie .nm small.leadregel{white-space:normal;overflow:visible;text-overflow:clip;display:flex;flex-wrap:wrap;align-items:center;gap:5px;line-height:1.5}
.verlooptabel{--cols:minmax(220px,2fr) 120px 120px 120px}
.leadstabel{--cols:minmax(200px,1.6fr) 150px minmax(160px,1.2fr) 120px 130px}
@media (max-width:900px){.verlooptabel .kop,.leadstabel .kop{display:none}}
.net-stand{display:flex;gap:8px;align-items:flex-start;margin:6px 0 0;font-size:12.5px;line-height:1.45}
.net-stand .i{margin-top:2px;flex:none}
.net-stand.goed{color:var(--green)} .net-stand.bezig{color:var(--muted)}
.net-stand strong{color:inherit}
.acttabel{--cols:minmax(220px,2fr) 90px 130px 130px 120px}
/* Twee kolommen met verberg-md, dus drie sporen zodra die verdwijnen. */
@media (max-width:1340px){.acttabel{--cols:minmax(200px,2fr) 100px 130px}}

/* Een knop binnen een melding: de melding zegt wat er moet gebeuren, de knop doet het.
   Op een eigen regel, zodat hij niet tussen de woorden verdwijnt. */
.banner-doen{margin:10px 0 2px}

/* ---------- automatische selectie ----------
   Eén blok per woning. Smal staat alles onder elkaar; is er ruimte, dan schuiven de
   cijfers en de knoppen naast de naam.

   Dat hangt af van de breedte van de kaart, niet van die van het venster: dit blok staat
   in de linkerkolom van het dossier en is op een scherm van 1440 nog geen 700 pixels
   breed. Op vensterbreedte afgaan gaf een rij van vijf kolommen in 700 pixels, waarin
   "appartement begane grond · COSTA BLANCA NUCIA SL · 3 slaapk." over zes regels viel.
   Vandaar een containervraag. Kent de browser die niet, dan blijft alles onder elkaar
   staan — smaller, maar leesbaar. */
.selectie{container-type:inline-size}
.matchlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.match{
  display:grid;gap:7px 12px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--card);box-shadow:var(--sh-1);position:relative;
  grid-template-columns:64px 52px minmax(0,1fr);
  grid-template-areas:"foto score wie" "foto score cijfers" "foto score redenen" "foto score doen";
  align-items:center
}
/* Het beeld in de selectie is klein met opzet: het is een geheugensteun bij de
   plaatsnaam, niet de reden om de woning te kiezen. Daarvoor is de knop naar de site. */
.m-foto{
  grid-area:foto;align-self:start;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;
  background:var(--tint);display:grid;place-items:center
}
.m-foto img{width:100%;height:100%;object-fit:cover;display:block}
.m-foto.geenfoto .i{width:18px;height:18px;color:var(--faint);opacity:.5}
.match:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
/* Het cijfer draagt geen kleur die "goed" of "fout" zegt: 62% kan de juiste woning zijn
   als de klant op één punt water bij de wijn doet. Het is een volgorde, geen oordeel. */
.m-score{
  grid-area:score;display:grid;place-items:center;align-content:center;align-self:start;
  height:44px;border-radius:var(--r-sm);background:var(--tint);
  font-size:16px;font-weight:660;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums
}
.m-score small{font-size:10px;font-weight:500;color:var(--soft);margin-top:-2px}
.m-wie{grid-area:wie;display:flex;flex-direction:column;gap:2px;min-width:0}
.m-wie strong{font-size:14.5px;font-weight:600;letter-spacing:-.016em}
.m-bij{font-size:12.5px;color:var(--soft);overflow-wrap:anywhere}
.m-cijfers{grid-area:cijfers;display:flex;gap:18px}
.m-cijfers span{display:flex;flex-direction:column;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.m-cijfers small{font-size:10.5px;font-weight:500;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.m-redenen{grid-area:redenen;display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0}
.m-plus,.m-min{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:1.4}
.m-plus{color:var(--green)}
.m-min{color:var(--amber)}
.m-plus .i,.m-min .i{flex:0 0 auto}
.m-doen{grid-area:doen;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-doen .klein{color:var(--faint)}
.wenform .vlak{padding:0}

@container (min-width:720px){
  .match{
    grid-template-columns:64px 52px minmax(0,1fr) auto auto;
    grid-template-areas:"foto score wie cijfers doen" "foto score redenen redenen redenen"
  }
  .m-cijfers{text-align:right}
  .m-cijfers span{align-items:flex-end}
  .m-doen{justify-content:flex-end;white-space:nowrap;flex-wrap:nowrap}
}
@media (max-width:520px){
  .match{grid-template-columns:48px 44px minmax(0,1fr);gap:6px 9px}
  .m-score{height:38px;font-size:14px}
}

/* Het gebied bij elke woning, en hoe ver hij van de rest van het groepje ligt. Klein en
   zacht: het is context bij de plaatsnaam, geen tweede kop. */
.m-gebied{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--faint);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.m-km{text-transform:none;letter-spacing:0;font-weight:500;color:var(--soft)}
.selgebied{background:var(--tint);box-shadow:none}
.selgebied:after{display:none}
/* Een vinkje met uitleg eronder, in dezelfde vorm als de andere velden. */
.vink-rij{text-transform:none;letter-spacing:0;font-weight:400}
.vink-uit{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:500}
.vink-uit input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer;flex:0 0 auto}

/* De toppers die buiten het groepje vallen: dezelfde regels, maar duidelijk een tweede
   lijst. Een lijn erboven en wat lucht — zonder die scheiding lijken het er tien in
   plaats van vijf plus een paar uitschieters. */
.toppers{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair-2)}
.toppers-kop{display:flex;align-items:baseline;gap:9px;margin-left:0;margin-right:0}
.topdrempel{font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint)}
.toppers .hint{margin-left:0;margin-right:0}

/* ---------- nieuwe leads ---------- */

/* Het blok op Vandaag. Staat bovenaan omdat een lead die niemand belt het enige werk op
   dat scherm is dat écht weg kan lopen: hij belt ondertussen de volgende makelaar. */
.nieuwleads{border:1px solid var(--hair-2)}
.nl-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nl-tel{
  flex:0 0 auto;display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;
  border-radius:var(--r-sm);background:var(--sky);color:var(--blue);
  font-size:20px;font-weight:660;letter-spacing:-.02em;font-variant-numeric:tabular-nums
}
.nl-tel.urg{background:var(--amber-bg);color:var(--amber)}
.nl-tekst{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.nl-tekst strong{font-size:15px;font-weight:620;letter-spacing:-.018em}
.nl-lijst{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--hair-2);
  display:flex;flex-direction:column;gap:7px}
.nl-lijst li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nl-lijst a{font-weight:560;color:var(--ink)}
.nl-lijst a:hover{color:var(--blue)}

/* De teller in het menu is blauw en niet rood: dit is werk dat klaarligt, geen
   achterstand. Rood hoort bij "te laat" en verliest zijn betekenis als alles rood is. */
.nav nav a .tel-badge.nieuw{background:var(--sky);color:var(--blue)}

/* De wachtrij zelf. */
.uitleg{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.55;max-width:74ch}
.leadrij{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  container-type:inline-size}
.lkaart{
  display:grid;gap:8px 16px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--card);box-shadow:var(--sh-1);position:relative;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"wacht" "wie" "zoekt" "doen";
  align-items:center
}
.lkaart:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--hair-2);pointer-events:none}
.lkaart.laat:after{border-color:var(--amber)}
.l-wacht{grid-area:wacht;font-size:11.5px;font-weight:620;letter-spacing:.03em;
  text-transform:uppercase;color:var(--faint)}
.l-wacht.urg{color:var(--amber)}
.l-wie{grid-area:wie;display:flex;flex-direction:column;gap:3px;min-width:0}
.l-wie strong{font-size:15px;font-weight:620;letter-spacing:-.018em}
.l-contact{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.l-contact a{color:var(--blue)}
.l-zoekt{grid-area:zoekt;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--soft);min-width:0}
.l-kanaal{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--soft);background:var(--chip);border-radius:980px;padding:2px 9px}
.l-doen{grid-area:doen;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.l-doen form{margin:0}

@container (min-width:760px){
  .lkaart{
    grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr) auto;
    grid-template-areas:"wacht wie zoekt doen"
  }
  .l-wacht{white-space:nowrap}
  .l-doen{justify-content:flex-end;flex-wrap:nowrap}
}

.opschonen{margin-top:22px;font-size:13px}
.opschonen summary{cursor:pointer;color:var(--soft);font-weight:520}
.opschonen .vlak{margin-top:10px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:var(--r-md);background:var(--tint)}
.opschonen .vlak p{margin:0;max-width:70ch}

/* Het intakeformulier. De blokken erven de kaartopmaak; alleen de voet is eigen. */
.leadform{display:flex;flex-direction:column;gap:0}
.leadvoet{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.leadvoet .klein{color:var(--soft);max-width:62ch;line-height:1.55}

/* De losse eisen bij de intake. De vinkjes staan in een wrappende rij en niet onder
   elkaar: het zijn er zeven, en zeven regels onder elkaar lezen als een checklist die je
   moet aflopen in plaats van als een rijtje waar je er een paar uit pikt.

   De opsomming staat in een fieldset binnen een .vld, en die geeft alles hoofdletters en
   letterafstand mee omdat hij voor veldlabels is gemaakt. Voor de vinkjes zetten we dat
   terug: het zijn zinnen, geen kopjes. */
.eisvinkjes{
  border:0;margin:0;padding:0;min-width:0;
  display:flex;flex-flow:row wrap;gap:8px 20px;align-items:center
}
.eisvinkjes legend{
  flex:0 0 100%;padding:0;margin-bottom:2px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--soft)
}
.eisvinkjes .vink-uit{margin:0;flex:0 0 auto}
.eisvinkjes .vink-uit span{
  text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--ink)
}
.eisvinkjes .veld-uitleg{flex:0 0 100%;margin-top:2px}

/* De pakketwensen die nog naar de HubSpot van Calida moeten. */
.naarcalida{margin-bottom:24px}
.brugrij{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  container-type:inline-size}
.brugkaart{
  display:grid;gap:7px 16px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--tint);grid-template-columns:minmax(0,1fr);
  grid-template-areas:"wie" "wat" "doen";align-items:center
}
.bk-wie{grid-area:wie;display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-wie strong{font-size:14.5px;font-weight:620;letter-spacing:-.016em}
.bk-wat{grid-area:wat;font-size:13px;color:var(--soft);min-width:0}
.bk-doen{grid-area:doen;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bk-doen form{margin:0}

@container (min-width:720px){
  .brugkaart{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;
    grid-template-areas:"wie wat doen"
  }
  .bk-doen{justify-content:flex-end;flex-wrap:nowrap}
}

/* De ruwe foutregel van HubSpot, weggevouwen onder de uitleg. */
.ruwefout{margin-top:8px;font-size:12.5px}
.ruwefout summary{cursor:pointer;opacity:.8}
.ruwefout code{display:block;margin-top:6px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--chip-2);font-size:11.5px;line-height:1.5;overflow-wrap:anywhere}

/* Recht voor recht: mag dit token het wel of niet. */
.rechtencheck{margin-bottom:22px}
.rechtenlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rechtenlijst li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.rechtenlijst .rl-wat{font-weight:520}
.rechtenlijst code{font-size:11.5px;color:var(--soft);background:var(--chip);
  border-radius:6px;padding:2px 7px}
.rechtenlijst .mag{color:var(--green)}
.rechtenlijst .mag .rl-wat{color:var(--ink)}
.rechtenlijst .magniet{color:var(--red)}
.rechtenlijst .magniet .rl-wat{color:var(--ink)}

/* Welke velden werkelijk gebruikt worden.
   Een lijst van honderdtwintig veldnamen zegt op zichzelf niets: de helft is ooit
   aangemaakt en nooit ingevuld, en juist die staan er net zo overtuigend bij als de
   rest. Het vinkje en de telling erachter maken dat verschil zichtbaar, en het lege
   veld wordt gedempt in plaats van verborgen — het bestaat immers echt, je moet het
   alleen niet kiezen. */
.doclijst li.doc-later:not(.leegveld) .doc-bol{background:var(--green);color:#fff}
.doclijst li.doc-later:not(.leegveld)>span:nth-child(2){color:var(--ink)}
.veldtel{display:block;font-style:normal;font-size:11px;color:var(--faint);margin-top:1px}
.doclijst li.leegveld{opacity:.6}
.doclijst li.leegveld .veldtel{color:var(--amber)}

/* ---------- projecten van Calida: bewerken in de rij ----------
   Een plaatsing die een week opschuift is één handeling, geen formulier. Dus staat het
   invulveld in de kolom zelf en slaat het op zodra je het loslaat. Het veld moet daarbij
   níet schreeuwen dat het een invulveld is: zolang je er niet in staat leest de rij als
   een rij, en pas bij hover of focus krijgt hij een rand. Anders kijk je naar een
   spreadsheet in plaats van naar een overzicht. */
.calidatabel{--cols:minmax(190px,1.5fr) minmax(150px,1.05fr) 118px 150px 150px 150px}
.calidatabel.zonder-opgeleverd{--cols:minmax(200px,1.6fr) minmax(160px,1.1fr) 122px 154px 154px}
.rijveld{display:block;margin:0}
.rijveld input,.rijveld select{
  font:inherit;font-size:13px;color:var(--ink);width:100%;
  padding:5px 7px;border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;transition:border-color .13s,background .13s
}
.rijveld .rijdatum,.rijveld .rijgetal{text-align:right}
.rij:hover .rijveld input,.rij:hover .rijveld select{border-color:var(--hair);background:var(--card)}
.rijveld input:focus,.rijveld select:focus{
  outline:none;border-color:var(--blue);background:var(--card);
  box-shadow:0 0 0 3px var(--sky)
}
.rijveld input:placeholder-shown,.rijveld .rijdatum:not(:focus):invalid{color:var(--faint)}
.rijveld .rijdatum.telaat{color:var(--red);font-weight:560}
.rijveld .rijkeuze{text-align:left}
/* Afgerond werk mag er zijn, maar hoeft niet net zo hard te staan als wat nog moet. */
.rij.isaf .kol .vl,.rij.isaf .kol .bij{opacity:.72}
@media (max-width:1340px){
  .calidatabel{--cols:minmax(160px,1.4fr) minmax(132px,1fr) 106px 140px 140px 140px}
  .calidatabel.zonder-opgeleverd{--cols:minmax(170px,1.5fr) minmax(140px,1fr) 110px 144px 144px}
}
@media (max-width:1160px){
  .calidatabel,.calidatabel.zonder-opgeleverd{--cols:minmax(150px,1.4fr) minmax(124px,1fr) 138px 138px}
  .calidatabel .verberg-s{display:none}
}
/* Een lege datum toont in elke browser "dd-mm-jjjj". In achttien van de eenentwintig
   rijen is dat achttien keer hetzelfde woord dat niets zegt; gedempt leest het als de
   plaatshouder die het is, en springt de rij met een échte datum eruit. */
.rijveld .rijdatum.leeg:not(:focus){color:var(--faint)}

/* ---------- het geldverhaal van Calida ----------
   Vier getallen naast elkaar: wat eruit komt, wat er binnen is, wat er nog moet komen en
   wat er onder de streep overblijft. Dat laatste is de reden dat dit blok bestaat — een
   project van €22.000 zegt niets zolang je niet weet dat er €14.000 aan inkoop tegenover
   stond. "Niet bekend" is daarom een eigen toestand en nadrukkelijk geen nul: nul zou
   zeggen dat er niets is verdiend, terwijl het zegt dat er een veld leeg staat. */
.geldrij{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))
}
.geldrij>li{
  background:var(--tint);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:11px 13px;display:flex;flex-direction:column;gap:2px;min-width:0
}
.geldrij .gr-wat{
  font-size:10.5px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)
}
.geldrij strong{
  font-size:18px;font-weight:640;letter-spacing:-.025em;color:var(--ink);
  font-variant-numeric:tabular-nums
}
.geldrij .gr-bij{font-size:11.5px;color:var(--soft);line-height:1.35}
.geldrij>li.goed strong{color:var(--green)}
.geldrij>li.let strong{color:var(--amber)}
.geldrij>li.onbekend strong{font-size:14px;font-weight:560;color:var(--soft)}
/* In de rij zelf: één regel onder de prijs die zegt waar dit project financieel staat. */
.kol .bij.openstaat{color:var(--amber);font-weight:560}
.kol .bij.verloren{color:var(--soft);font-weight:560}
.rij.isverloren .kol .vl strong{text-decoration:line-through;text-decoration-thickness:1px}

/* De bestellingen bij één project. Smaller dan de projectentabel: hier hoeft geen naam van
   veertig tekens in, maar wel vier kolommen waar je in kunt typen. */
.besteltabel{--cols:minmax(170px,1.6fr) 76px 108px minmax(130px,1fr) 136px 136px;border-top:1px solid var(--hair)}
.besteltabel:after{content:none}
@media (max-width:1160px){
  .besteltabel{--cols:minmax(150px,1.6fr) 68px 100px minmax(110px,1fr) 128px}
  /* Geleverd valt als eerste weg: die kolom vul je één keer, de verwachte datum kijk je na. */
  .besteltabel .kop>span:nth-child(6),.besteltabel .rij>div:nth-child(6){display:none}
}

/* ---------- wat een project nog nodig heeft ----------
   Een formulier met dertig velden zegt niet welke ervan ertoe doen. Zonder dat verschil
   vult iemand netjes de makkelijke velden en blijft juist het veld leeg waar de rest van
   het scherm op rekent — precies wat er met de plaatsingsdatum gebeurde: leeg in 18 van de
   21 projecten, terwijl de hele planning erop sorteert. Vandaar twee dingen: een merkje
   achter het label dat zegt hoe hard het veld nodig is, en bovenaan de lijst van wat er
   bij dít project nu nog mist, met de reden erbij. Niet "verplicht veld", maar wat er
   níét klopt zolang het leeg is. */
.vldkop{display:flex;align-items:center;gap:7px;min-width:0}
.vldkop .eis{
  font-style:normal;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 5px;border-radius:4px;flex:0 0 auto;
  background:var(--chip);color:var(--soft)
}
.vldkop .eis.moet{background:var(--amber-bg);color:var(--amber)}
/* Alleen een randje, geen rode waarschuwing: het is een leeg veld, geen fout. */
.vld.mistnog input,.vld.mistnog select,.vld.mistnog textarea{border-color:var(--amber)}

.banner.mist{background:var(--tint);border:1px solid var(--hair);color:var(--ink-2)}
.banner.mist strong{color:var(--ink)}
.mistlijst{margin:5px 0 0;padding-left:17px;display:flex;flex-direction:column;gap:2px}
.mistlijst li{color:var(--muted)}

/* De uitleg staat dicht: wie het al weet wil hem niet elke keer wegscrollen, en wie het
   niet weet zoekt hem precies hier. */
.uitleg{
  margin:0 0 22px;border:1px solid var(--hair);border-radius:var(--r-md);
  background:var(--tint);font-size:13.5px;line-height:1.55;color:var(--muted)
}
.uitleg>summary{
  cursor:pointer;padding:11px 16px;font-size:13px;font-weight:620;color:var(--ink-2);
  list-style:none;display:flex;align-items:center;gap:7px
}
.uitleg>summary::-webkit-details-marker{display:none}
.uitleg>summary:before{content:"?";flex:0 0 17px;height:17px;border-radius:50%;
  background:var(--chip-2);color:var(--soft);font-size:11px;font-weight:700;
  display:grid;place-items:center}
.uitleg>summary:hover{background:var(--hover)}
.uitleg[open]>summary{border-bottom:1px solid var(--hair)}
.uitleg p{margin:0;padding:11px 16px 0}
.uitleg p:last-child{padding-bottom:14px}
.uitleg strong{color:var(--ink-2)}
.uitleg em{font-style:normal;font-weight:600;color:var(--ink-2)}

/* Een waarde die je niet kunt wijzigen ziet er ook niet uit als een invulvak. */
.vld .vast{
  margin:0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);
  padding:9px 0 0;min-height:22px
}
.vld .vast.dim{color:var(--soft)}
.vld .vast a{color:var(--blue);text-decoration:none}
.vld .vast a:hover{text-decoration:underline}

/* ---------- bestellingen bij een project ----------
   Een bestelling is een leverancier met daaronder producten. De kop draagt de naam en het
   totaal, de regels dragen wat er precies besteld is en hoe ver het staat. Zonder die
   tweedeling wordt een bestelling één regel "Muebles Vega — € 8.900" en is een maand later
   niet meer na te gaan wat erin zat, of wat er al geleverd is. */
.bestelkop{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:16px 20px 8px;border-top:1px solid var(--hair);margin-top:4px
}
.bestelkop:first-of-type{border-top:none}
.bestelkop strong{font-size:14.5px;font-weight:640;color:var(--ink)}
.bestelkop .bij{display:block;font-size:12px;color:var(--soft);margin-top:2px}
.bestelkop .bij a{color:var(--blue);text-decoration:none}
.bestelkop .bij a:hover{text-decoration:underline}
.bestelkop .bedrag{font-variant-numeric:tabular-nums;white-space:nowrap}

/* De popups. Eén paneel, geen wizard: wie midden in een bestelling zit wil hem afmaken,
   niet door drie stappen klikken. */
.popup{
  border:none;border-radius:var(--r-lg);padding:0;max-width:560px;width:calc(100% - 32px);
  background:var(--card);color:var(--ink);box-shadow:0 24px 64px rgba(16,20,28,.28)
}
.popup.breed{max-width:860px}
.popup::backdrop{background:rgba(16,20,28,.45)}
.popup form{padding:22px 24px 18px}
.popup h3{margin:0;font-size:17px;font-weight:640;letter-spacing:-.015em}
.popup-sub{margin:6px 0 16px;font-size:13px;line-height:1.5;color:var(--muted)}
.popup .vlak{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 16px;padding:0 0 4px}
.popup .blok-sub{margin:18px 0 8px;font-size:11.5px;font-weight:640;letter-spacing:.04em;
  text-transform:uppercase;color:var(--soft)}
.popup .planknoppen{padding:16px 0 0;display:flex;gap:10px;align-items:center}
.popup input[type=file]{
  font-size:13px;padding:9px 11px;border:1px dashed var(--hair);border-radius:var(--r-sm);
  background:var(--tint);color:var(--muted);width:100%
}

/* De productregels. Een tabel en geen kaartjes: je typt hier vier dingen per regel en
   wil van de ene naar de andere kunnen tabben zonder te zoeken. */
.regeltabel{width:100%;border-collapse:collapse;font-size:13px}
.regeltabel th{
  text-align:left;font-size:10.5px;font-weight:640;letter-spacing:.04em;text-transform:uppercase;
  color:var(--soft);padding:0 0 6px
}
.regeltabel th:nth-child(3),.regeltabel th:nth-child(4){width:110px}
.regeltabel th:nth-child(1){width:150px}
.regeltabel td{padding:0 6px 8px 0}
.regeltabel td:last-child{padding-right:0}
.regeltabel input{
  width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--raise);
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:9px 11px
}
.regeltabel input:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px var(--ring)}

/* Een knop die eruitziet als een link, voor iets kleins midden in een uitlegregel. */
.alslink{
  background:none;border:none;padding:0;font:inherit;font-size:inherit;color:var(--blue);
  cursor:pointer;text-decoration:underline
}
.alslink:hover{color:var(--blue-2)}

@media (max-width:720px){
  .popup .vlak{grid-template-columns:1fr 1fr}
  .popup .vld.breed,.popup .vld{grid-column:span 2}
  .regeltabel,.regeltabel tbody,.regeltabel tr,.regeltabel td{display:block;width:100%}
  .regeltabel thead{display:none}
  .regeltabel tr{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
  .regeltabel td{padding:0 0 6px}
}

/* Het totaal onder het bestelformulier. In twee vormen naast elkaar, want de regels typ je
   exclusief over van de factuur en het bedrag onderaan diezelfde factuur is inclusief — en
   die twee tegen elkaar kunnen houden is precies waarmee je ziet of je goed hebt gekeken. */
.besteltel{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:8px 0 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--tint);
  border:1px solid var(--hair)
}
.besteltel>span:first-child{
  font-size:10.5px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)
}
.besteltel strong{font-size:17px;font-weight:640;color:var(--ink);font-variant-numeric:tabular-nums}
.besteltel .bij{font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.bestelkop .bedrag{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.bestelkop .bedrag .bij{font-size:11.5px}

/* De facturen bij een project: datum, leverancier, bedrag, en de pdf zelf. Vier kolommen,
   want meer heb je niet nodig om te zien of er iets ontbreekt. */
.factuurtabel{--cols:130px minmax(160px,1.6fr) 150px 96px;border-top:1px solid var(--hair)}
.factuurtabel:after{content:none}
.factuurtabel .knop.mini{padding:4px 11px;font-size:11.5px}
@media (max-width:820px){
  .factuurtabel{--cols:110px minmax(120px,1fr) 120px}
  .factuurtabel .kop>span:nth-child(4),.factuurtabel .rij>div:nth-child(4){display:none}
}
.factuurtabel{--cols:130px minmax(160px,1.6fr) 150px 150px}
.factuurknoppen{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.factuurknoppen form{margin:0}
.knop.mini.weg{color:var(--red)}
.knop.mini.weg:hover{background:var(--red-bg);border-color:var(--red)}


/* ---------- spiekbriefjes ----------
   De kern per onderwerp, kort genoeg om te blijven hangen. Bewust rustig: wie hier komt
   wil lezen, niet klikken. */
.spiekraster{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.spiekkaart{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:18px 20px 16px;position:relative
}
.spiekkaart:after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--hair-2);pointer-events:none}
.spiekkaart h2{
  font-size:15px;margin:0 0 6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap
}
.spiekkaart h2 .tel{font-size:11px;font-weight:500;color:var(--faint)}
.spiek-kern{
  margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.45
}
.spiekkaart ul{margin:0;padding-left:18px;display:grid;gap:6px}
.spiekkaart li{font-size:13px;line-height:1.5;color:var(--soft)}
.spiek-voet{margin:14px 0 0}

/* Hetzelfde briefje, maar dan aan het eind van een oefenronde. */
.quiz-spiek{
  margin:18px 0 0;padding:16px 18px;border-radius:12px;
  background:var(--tint);border:1px solid var(--hair-2)
}
.quiz-spiek h3{font-size:14px;margin:0 0 6px}
.quiz-spiek ul{margin:0;padding-left:18px;display:grid;gap:5px}
.quiz-spiek li{font-size:13px;line-height:1.5;color:var(--soft)}


/* ---------- zijbalk: de menulijst scrollt zelf ----------
   Het menu is langer dan het scherm zodra er een paar items bij komen: op een
   laptop van 1366x768 vallen de onderste er al af. De balk staat op height:100vh
   en plakt mee (position:sticky), dus de pagina verder scrollen hielp niet -- die
   items waren simpelweg onbereikbaar, en niets liet zien dat er meer stond.
   De twee <nav>-blokken met hun kopjes zitten nu samen in .navlijst, dat een eigen
   scrollgebied heeft. Logo en zoekknop blijven bovenaan, de themaknop en de
   gebruiker onderaan; daartussen schuift het menu.
   De scrollbalk is met opzet altijd zichtbaar, rail en al. Een dunne overlay-balk
   die pas bij hover opdoemt lost dit niet op: het punt is juist dat je in een
   oogopslag ziet DAT er meer onder staat. Elders in dit bestand worden
   scrollbalken verstopt (.seg, .reis, .tl-filter) -- hier dus met opzet niet. */
.nav{overflow:hidden;min-height:0}
.nav > *{flex:none}
.nav > .navlijst{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  /* ruimte voor de balk, zonder dat de menu-items smaller worden dan voorheen */
  padding-right:8px;margin-right:-4px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--muted) 55%,transparent) var(--chip);
}
/* Chrome en Safari negeren ::-webkit-scrollbar zodra scrollbar-color gezet is, en
   scrollbar-width:thin levert daar een overlay-balk op die op macOS weer wegvalt.
   Dus die twee terugzetten en de pseudo-elementen gebruiken -- maar alleen waar ze
   bestaan. Firefox kent selector(::-webkit-scrollbar) niet en houdt de regels
   hierboven. */
@supports selector(::-webkit-scrollbar){
  .nav > .navlijst{scrollbar-width:auto;scrollbar-color:auto}
  .navlijst::-webkit-scrollbar{width:10px}
  .navlijst::-webkit-scrollbar-track{background:var(--chip);border-radius:99px}
  .navlijst::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--muted) 55%,transparent);
    border:2px solid transparent;background-clip:content-box;border-radius:99px;
  }
  .navlijst::-webkit-scrollbar-thumb:hover{
    background:var(--muted);border:2px solid transparent;background-clip:content-box;
  }
}
/* Smal scherm: daar is de balk een rij bovenaan (height:auto, flex-wrap) en moet
   het menu gewoon doorlopen. display:contents haalt de wikkel uit de opmaak, zodat
   de twee <nav>-blokken weer directe flex-items van .nav zijn -- anders werkt hun
   order:3 niet meer. */
@media (max-width:860px){
  .nav{overflow:visible}
  .nav > .navlijst{display:contents}
}

/* De kennishulp op het leadscherm: drie knoppen, een paneel tegelijk, en een
   zoekveld erboven.
   Dicht is een omlijnde knop, open is de gevulde -- meer hoeven deze knoppen je
   niet te vertellen. Beide standen krijgen dezelfde randdikte, anders springt de
   knop een pixel als je hem aanzet. Gemeten op de kaart: de omlijnde tekst haalt
   10,9:1 in licht en 10,2:1 in donker, de rand zelf 3,2:1 en 3,8:1 (voor een rand
   is 3:1 de ondergrens) en de gevulde knop 7,4:1.
   De kaart heeft in deze huisstijl geen eigen padding -- die zit normaal in het
   kopblok, en dat heeft dit blok niet -- dus die zetten we hier zelf. */
.kennishulp{padding:14px 20px 16px}
.kennishulp .kb-knoppen{display:flex;gap:6px;flex-wrap:wrap}
.kennishulp .kb-knoppen .knop{border:1px solid transparent}
.kennishulp .kb-knoppen .knop[aria-expanded="false"]{background:transparent;color:var(--ink-2);border-color:var(--soft)}
.kennishulp .kb-knoppen .knop[aria-expanded="true"]{font-weight:600}
.kennishulp .kb-paneel{margin-top:10px;border-top:1px solid var(--hair-2);padding-top:8px}
.kennishulp .kb-paneel[hidden]{display:none}

/* Het zoekveld. Een input type="search" valt buiten de selector die de rest van de
   formuliervelden opmaakt, dus zonder deze regels krijg je het grijze standaardveld
   van de browser. Maten overgenomen van een gewoon tekstveld op ditzelfde scherm.
   De suggesties eronder zijn chips: klikbaar, maar ze mogen niet harder roepen dan
   de drie knoppen eronder.
   Tijdens het zoeken komen er treffers uit meer dan een categorie, en dan moet je
   kunnen zien waar een regel vandaan komt -- vandaar dat de kopjes dan wel
   verschijnen en bij gewoon bladeren niet. */
.kennishulp .kb-zoek{margin-bottom:9px}
.kennishulp .kb-zoekveld{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;
  padding:8px 11px;border:.8px solid var(--hair);border-radius:10px;
  background:var(--card);color:var(--ink)}
.kennishulp .kb-tips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.kennishulp .kb-tips[hidden]{display:none}
.kennishulp .kb-tip{padding:4px 10px;font-size:12.5px;font-weight:400;border-radius:999px;
  border:1px solid var(--soft);background:transparent;color:var(--ink-2)}
.kennishulp .kb-telling{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.kennishulp .kb-telling[hidden]{display:none}
.kennishulp .kb-kop{display:none}
.kennishulp.kb-zoekt .kb-kop{display:block;margin:0 0 5px;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* De vraag "van wie wordt dit dossier" vlak voor het versturen. Hij leent de doos van het
   zoekvenster, maar niet de rasterklassen uit het formulier: die zetten label en veld naast
   elkaar, en dan staat de vraag naast het antwoord in plaats van erboven. */
.eig-pop{padding:18px 20px 16px}
.eig-pop h2{margin:0 0 6px;font-size:17px;line-height:1.3}
.eig-pop .sub{margin:0 0 13px}
.eig-pop .vld{display:block;margin:0 0 15px}
.eig-pop select{width:100%;box-sizing:border-box}
.eig-pop .planknoppen{display:flex;gap:8px;flex-wrap:wrap;margin:0;align-items:center}

/* De eigenaar bovenin de klantkaart is een knop: hij is te wijzigen. Hij hoort er wel uit
   te zien als de tekst ernaast en niet als een formulierknop -- op een regel die je leest
   schreeuwt een echte knop. De puntjes tussen de onderdelen moeten blijven kloppen, want
   die hangen aan "span + span" en een knop is geen span. */
.dossier-meta > .pil-knop + span:before,
.dossier-meta > span + .pil-knop:before{content:"·";margin-right:8px;color:var(--faint)}
.pil-knop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:2px 6px;margin:-2px -6px;border-radius:8px;color:inherit;font:inherit;cursor:pointer}
.pil-knop:hover,.pil-knop:focus-visible{background:var(--tint);color:var(--ink)}
.pil-knop .i{opacity:.5}
.pil-knop:hover .i,.pil-knop:focus-visible .i{opacity:1}

/* --- Cashflow: de maand opengeklapt -------------------------------------
   Onder "Eruit" stond alleen een bedrag. Wie het krijgt en waarvoor stond er
   niet bij, en daardoor was een cashflow die onder nul duikt niet na te lopen.
   De knop klapt de posten van die maand uit. ----------------------------- */
.cashtabel .cf-opb-knop{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:6px}
.cashtabel .cf-opb-knop::before{content:"";flex:0 0 auto;width:0;height:0;border-left:5px solid var(--blue);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .16s ease}
.cashtabel .cf-opb-knop[aria-expanded="true"]::before{transform:rotate(90deg)}
.cashtabel .cf-opb-knop:hover .vl{color:var(--blue)}
.cashtabel .cf-opb-knop:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cashtabel .cf-opb-knop::before{transition:none}}
.cashtabel .cf-opbouw{padding:4px 0 14px 28px;border-bottom:1px solid var(--hair);background:var(--tint)}
.cashtabel .cf-posten{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.cashtabel .cf-posten>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;align-items:baseline;gap:12px;padding:8px 14px 8px 11px;border-left:3px solid var(--green);background:var(--card);border-radius:0 7px 7px 0}
.cashtabel .cf-posten>li.eruit{border-left-color:var(--red)}
.cashtabel .cf-posten .cf-pk{font-weight:600;min-width:0}
.cashtabel .cf-posten .cf-pk a{color:inherit}
.cashtabel .cf-posten .cf-pw{color:var(--soft);font-size:12.5px;min-width:0}
.cashtabel .cf-posten strong{justify-self:end;white-space:nowrap}
.cashtabel .cf-posten strong.min{color:var(--red)}
@media (max-width:720px){
  .cashtabel .cf-opbouw{padding-left:10px}
  .cashtabel .cf-posten>li{grid-template-columns:1fr auto}
  .cashtabel .cf-posten .cf-pw{grid-column:1 / -1}
}

/* --- Bewaarde projecten -------------------------------------------------
   Wat ooit in de feed stond. Een project dat er niet meer in zit krijgt een
   vlag en een amberkleurige rand: dat is de reden dat deze lijst bestaat. */
.bewaardlijst{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bw-kaart{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;background:var(--card);border:1px solid var(--hair);border-radius:12px;overflow:hidden;box-shadow:var(--sh-1)}
.bw-kaart.bw-weg{border-color:var(--amber)}
.bw-foto{background:var(--tint);display:flex;align-items:center;justify-content:center;min-height:116px}
.bw-foto img{width:100%;height:100%;min-height:116px;object-fit:cover;display:block}
.bw-geenfoto{color:var(--soft);opacity:.55}
.bw-geenfoto .i{width:28px;height:28px}
.bw-tekst{padding:14px 16px 13px 0;min-width:0}
.bw-tekst h3{margin:0 0 3px;font-size:15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bw-vlag{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--amber);background:var(--amber-bg);border-radius:999px;padding:2px 9px}
.bw-bij{margin:0 0 7px;font-size:12.5px;color:var(--soft)}
.bw-om{margin:0 0 9px;font-size:12.5px;color:var(--ink);opacity:.82;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bw-voet{margin:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11.5px;color:var(--soft)}
.bw-voet a{color:var(--blue)}
@media (max-width:640px){
  .bw-kaart{grid-template-columns:1fr}
  .bw-foto img,.bw-foto{min-height:150px}
  .bw-tekst{padding:0 16px 14px}
}

/* --- Zijmenu: onderdelen van de kennisbank -------------------------------
   Sta je op de kennisbank, dan schuift het menu open met de vier onderdelen.
   Een randje links houdt ze visueel onder hun hoofditem in plaats van ernaast. */
.nav nav .subnav{list-style:none;margin:2px 0 6px;padding:2px 0 2px 21px;display:grid;gap:1px;border-left:2px solid var(--hair);margin-left:17px}
.nav nav .subnav a{display:block;padding:6px 10px;border-radius:7px;font-size:13px;color:var(--soft);text-decoration:none}
.nav nav .subnav a:hover{background:var(--tint);color:var(--ink)}
.nav nav .subnav a.on{background:var(--sky);color:var(--blue);font-weight:600}
.nav nav .subnav a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .nav nav .subnav{animation:subnav-open .16s ease-out}
}
@keyframes subnav-open{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* --- Zijmenu: een menu-item dat open- en dichtklapt ----------------------
   De kop ziet eruit als elk ander menu-item; het driehoekje van de browser
   gaat eraf en er komt een pijltje voor in de plaats dat meedraait. */
.nav nav .navblok{margin:0}
.nav nav .navblok > summary{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;color:var(--ink);font-size:14px;list-style:none;user-select:none}
.nav nav .navblok > summary::-webkit-details-marker{display:none}
.nav nav .navblok > summary::marker{content:""}
.nav nav .navblok > summary:hover{background:var(--tint)}
.nav nav .navblok > summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav nav .navblok > summary.on{background:var(--sky);color:var(--blue);font-weight:600}
.nav nav .navblok > summary.on .i{color:var(--blue)}
.nav nav .navblok > summary > span{flex:1 1 auto;min-width:0}
.nav nav .navblok > summary .klap{flex:0 0 auto;opacity:.5;transform:rotate(90deg);transition:transform .16s ease}
.nav nav .navblok[open] > summary .klap{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.nav nav .navblok > summary .klap{transition:none}}

/* --- Kennisbank: vragen per onderwerp -----------------------------------
   Honderdnegenenvijftig vragen onder elkaar is geen lijst meer maar een muur.
   Per onderwerp een kaart, en bovenaan knoppen om er een uit te lichten. */
.kb-onderwerpen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.kb-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--hair);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.kb-chip:hover{border-color:var(--hair-2);background:var(--tint)}
.kb-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kb-chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.kb-chip .tel{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--tint);color:var(--soft);font-size:11px;font-weight:600;text-align:center}
.kb-chip.on .tel{background:rgba(255,255,255,.18);color:#fff}

.kb-groepen{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;align-items:start}
.kb-groep{padding:4px 0 2px;overflow:hidden}
.kb-groep-kop{display:flex;align-items:center;gap:9px;margin:0;padding:13px 18px 11px;font-size:14px;font-weight:650;letter-spacing:.01em;border-bottom:1px solid var(--hair)}
.kb-groep-kop .tel{min-width:20px;padding:1px 7px;border-radius:999px;background:var(--chip);color:var(--soft);font-size:11px;font-weight:600;text-align:center}
.kb-groep .kb-item:last-child{border-bottom:0}
@media (max-width:720px){
  .kb-groepen{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Voorbeeldmodus
   ---------------------------------------------------------------------------
   De balk bovenaan elk scherm. Hij mag opvallen: de hele bedoeling is dat je
   nooit per ongeluk een verzonnen cijfer voor een echt cijfer aanziet. Daarom
   amber en niet grijs, over de volle breedte, en niet weg te klikken.

   Amber en niet rood: er is niets kapot. Rood zou zeggen dat er iets mis is,
   en dan ga je zoeken naar een fout die er niet is. */
.demobalk {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
  border-radius: 10px;
  background: var(--amber-bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.demobalk .i { color: var(--amber); flex: none; }
.demobalk span { flex: 1 1 260px; }
.demobalk strong { font-weight: 700; }
.demobalk form { margin: 0; flex: none; }
.demobalk .knop { white-space: nowrap; }

/* Het blok op Instellingen. */
.demostand { padding: 4px 20px 18px; }
.demostand p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.demostand p.demo-nu { color: var(--ink); }
.demostand ul { margin: 0 0 14px 18px; padding: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.demostand ul li { margin: 0 0 4px; }
.demostand .demo-knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.demostand .demo-knoppen form { margin: 0; }

/* De stand zelf, als chip. */
.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.demo-chip.uit { background: var(--chip); color: var(--muted); }
.demo-chip.aan { background: var(--amber-bg); color: #8a6511; border: 1px solid var(--amber); }

/* De knoppen rechts in een paginakop: de Van mij/Iedereen-schakelaar en de
   testknop ernaast. Ze horen op één lijn te staan en bij smal beeld netjes
   onder elkaar te vallen in plaats van de kop uit elkaar te duwen. */
.kop-acties {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kop-acties form { margin: 0; }
.kop-acties .knop { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Staat de voorbeeldmodus aan, dan is de knop zelf ook amber. Je moet hem kunnen
   vinden zonder eerst de balk bovenaan te lezen. */
.knop.demo-staat-aan {
  background: var(--amber-bg);
  border-color: var(--amber);
  color: #8a6511;
}
.knop.demo-staat-aan .i { color: var(--amber); }
.knop.demo-staat-aan:hover { background: var(--amber); color: #fff; }
.knop.demo-staat-aan:hover .i { color: #fff; }
/* ---------- voorraad (Calida Interiors) ---------- */
.vrdtabel{--cols:minmax(170px,1.4fr) minmax(104px,.9fr) 88px 56px 56px 56px 262px}
.lijsttabel{--cols:minmax(200px,1.7fr) 78px 86px minmax(110px,1fr) 86px 124px 104px}
.vrdpak{--cols:minmax(240px,2fr) 92px 108px 104px 92px}
.vrdpakl{--cols:minmax(190px,1.5fr) 140px 68px 100px 140px 76px}
.logtabel{--cols:148px minmax(170px,1.3fr) 76px 66px minmax(150px,1.2fr) 118px}

.vrd-boek{display:flex;align-items:center;gap:6px}
.vrd-boek input[type=number]{width:54px;padding:5px 7px;border:1px solid var(--hair);border-radius:7px;font:inherit;font-size:13px;background:var(--card);color:var(--ink)}
.vrd-boek select{max-width:92px;padding:5px 6px;border:1px solid var(--hair);border-radius:7px;font:inherit;font-size:12.5px;background:var(--card);color:var(--ink)}
.vrd-boek .mini{min-width:26px;padding-left:8px;padding-right:8px;justify-content:center;font-size:15px;line-height:1}
.vrd-rijknop{margin:0}
.rij .bij{color:var(--green)}
.rij .af{color:var(--red)}

/* Alleen op papier zichtbaar: de kopregel van de uitdraai en het vakje om de
   telling met de hand in te vullen. Op het scherm zouden ze alleen in de weg staan. */
.printkop,.telvak,.kop-tel{display:none}

@media print{
  .nav,.demobalk,.head form,.filters,.formkaart,.planknoppen,.tiles,
  .vrd-boek,.kop-boek,.vrd-rijknop,.kop-knop{display:none !important}
  .printkop{display:block;margin:0 0 12px;font-size:12px;color:#000}
  .kop-tel,.telvak{display:block}
  .telvak{height:15px;border-bottom:1px solid #999;margin-left:auto;width:70px}
  .vrdtabel{--cols:minmax(170px,1.6fr) minmax(100px,1fr) 64px 48px 48px 48px 80px}
  .lijsttabel{--cols:minmax(190px,1.7fr) 70px 80px minmax(100px,1fr) 80px 120px}
  .vrdpakl{--cols:minmax(190px,1.5fr) 140px 68px 100px 140px}
  body,.app,main#main{background:#fff;display:block;padding:0;margin:0}
  .card,.card.tabel{box-shadow:none !important;border:1px solid #999;border-radius:0}
  .card:after{display:none}
  .kop{background:#eee;padding:5px 10px;color:#000}
  .rij{padding:5px 10px;break-inside:avoid;page-break-inside:avoid}
  .rij:before{background:#ccc}
  .head h1{font-size:18px;margin:0}
  .sub,.klein{color:#333}
  a{color:#000;text-decoration:none}
  @page{margin:12mm}
}

/* De sterrenwaardering bij een bouwer. Tekst en geen plaatjes, zodat hij
   meekomt als je de lijst kopieert of uitprint. */
.sterren{color:var(--amber);letter-spacing:1px;font-size:12.5px}


/* De kaart 'Mijn Helder' op het klantscherm --------------------------------
   Zelfde opmaak als de panelen rechts: label links, waarde rechts op dezelfde
   regel. Zonder deze regels valt een <dl> terug op de browserstandaard en
   springt elke waarde onder zijn label in. */
.mijnkaart dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0 0 16px;font-size:13.5px}
.mijnkaart dt{color:var(--soft);white-space:nowrap}
.mijnkaart dd{margin:0;text-align:right;font-weight:520;overflow-wrap:anywhere}
.mijnknoppen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.mijnkaart .gr-sub{margin:0 0 16px}
.mijnkaart .mk-kop{margin:22px 0 10px}
.mijnkaart form{margin:0 0 8px}
.mijnkaart .lijst{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.mijnkaart .lijst li{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--hair);border-radius:9px}
.mijnkaart .lijst li>span:nth-of-type(2){flex:1 1 auto;min-width:0}
.mijnkaart .lijst form{margin:0}
.mijnkaart .pil{flex:0 0 auto;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg-2);color:var(--soft)}
.mijnkaart .pil.goud{background:var(--amber-bg);color:var(--ink)}
.mijnkaart .bedrag{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600}
.mijnkaart .doczeil{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:8px;margin:0 0 6px}
.mijnkaart .melding{
  margin:0 0 12px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--hair);background:var(--bg-2);font-size:13.5px;line-height:1.45}
.mijnkaart .melding.ok{border-color:rgba(37,120,70,.35);background:var(--green-bg)}
/* De eenmalige link moet in zijn geheel te zien en te kopiëren zijn. */
.mijnkaart input[readonly]{
  width:100%;margin:0 0 14px;padding:10px 12px;border:1px solid var(--hair);border-radius:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--bg)}
@media (max-width:620px){
  .mijnkaart .doczeil{grid-template-columns:1fr}
}