/* iGenia marketingmodule: tokens en componenten.
   Schalen volgens Venture Foundation 01 (8px-grid, phi-type, discrete stappen); kleur uit het huisstijlhandboek.
   Breakpoints (vast): mobiel < 640, tablet 640 tot 1023, desktop >= 1024. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/DMSans-var.woff2') format('woff2')}
:root{
  --ig-bg:#ffffff;--ig-surface:#F5F6F5;--ig-surface-2:#ECEEED;--ig-text:#101211;--ig-text-muted:#5d6260;--ig-text-faint:#8a8f8d;
  --ig-ink:#000000;--ig-accent:#00E494;--ig-accent-strong:#00C97F;--ig-accent-soft:#DDF9EE;--ig-line:rgba(0,0,0,.12);--ig-line-strong:rgba(0,0,0,.28);
  --ig-success:#0B7A4B;--ig-success-bg:#CDF2DF;--ig-info:#1E4FBF;--ig-info-bg:#D9E4FA;--ig-warn:#9A5B00;--ig-warn-bg:#FAE6C3;--ig-danger:#B3261E;--ig-danger-bg:#F9D9D6;
  --ig-cat-1:#0B6B43;--ig-cat-1-bg:#CFF3E0;--ig-cat-2:#1E4FBF;--ig-cat-2-bg:#DCE6FA;--ig-cat-3:#5B36B8;--ig-cat-3-bg:#E8DFF9;--ig-cat-4:#B0296B;--ig-cat-4-bg:#F9DCEA;--ig-cat-5:#A24E00;--ig-cat-5-bg:#FBE4CC;--ig-cat-6:#6E5A00;--ig-cat-6-bg:#F5EDB8;--ig-cat-7:#0F6E6A;--ig-cat-7-bg:#D2F0EE;--ig-cat-8:#3C4F63;--ig-cat-8-bg:#E0E7EE;
  --ig-space-half:.25rem;--ig-space-1:.5rem;--ig-space-2:1rem;--ig-space-3:1.5rem;--ig-space-4:2rem;--ig-space-5:3rem;--ig-space-6:4rem;
  --ig-phi-1:.5rem;--ig-phi-2:.75rem;--ig-phi-3:1.25rem;--ig-phi-4:2rem;--ig-phi-5:3.25rem;--ig-phi-6:5.25rem;
  --ig-type-xs:.618rem;--ig-type-sm:.79rem;--ig-type-base:1rem;--ig-type-lead:1.272rem;--ig-type-h3:1.618rem;--ig-type-h2:2.058rem;--ig-type-h1:2.618rem;--ig-type-display:4.236rem;
  --ig-radius-sm:4px;--ig-radius:8px;--ig-radius-lg:12px;--ig-radius-pill:999px;
  --ig-shadow:0 8px 24px -16px rgba(0,0,0,.3);--ig-shadow-lg:0 24px 48px -24px rgba(0,0,0,.35);
  --ig-t-fast:.15s;--ig-t-base:.25s;--ig-t-slow:.5s;--ig-ease:cubic-bezier(.16,1,.3,1);--ig-ease-in:cubic-bezier(.77,0,.18,1);
  --ig-font:"Moderat","DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--ig-gutter:clamp(1rem,4vw,3rem);--ig-topbar:3.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ig-bg);color:var(--ig-text);font-family:var(--ig-font);font-size:var(--ig-type-base);line-height:1.5;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
/* VF 01_UI 5.8: elk tekstkader is zo hoog als zijn inhoud; ig.js zet de hoogte, dus geen sleepgreep en geen scrollbalk binnenin */
textarea{resize:none;overflow-y:hidden}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ig-ink);outline-offset:2px;border-radius:var(--ig-radius-sm)}
.ig-sr{position:absolute;left:0;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;contain:strict}
.ig-wrap{max-width:82rem;margin:0 auto;padding:0 var(--ig-gutter)}
.ig-center{max-width:62ch}

/* ---------- typografie ---------- */
.ig-display{font-weight:800;line-height:.92;letter-spacing:-.04em;text-transform:lowercase;font-size:clamp(3rem,9vw,var(--ig-type-display))}
.ig-h1{font-weight:800;line-height:1;letter-spacing:-.035em;text-transform:lowercase;font-size:clamp(var(--ig-type-h2),4vw,var(--ig-type-h1))}
.ig-h2{font-weight:800;line-height:1.05;letter-spacing:-.03em;font-size:var(--ig-type-h3)}
.ig-h3{font-weight:700;line-height:1.2;letter-spacing:-.01em;font-size:var(--ig-type-lead)}
.ig-lead{font-size:var(--ig-type-lead);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.ig-sm{font-size:var(--ig-type-sm)}
.ig-xs{font-size:var(--ig-type-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.ig-muted{color:var(--ig-text-muted)}
.ig-faint{color:var(--ig-text-faint)}
.ig-num{font-variant-numeric:tabular-nums}
.ig-label{display:block;font-size:var(--ig-type-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ig-text-muted);margin-bottom:var(--ig-space-half)}

/* ---------- primitieven ---------- */
.ig-stack{display:flex;flex-direction:column;gap:var(--ig-space-2)}
.ig-stack-1{display:flex;flex-direction:column;gap:var(--ig-space-1)}
.ig-stack-3{display:flex;flex-direction:column;gap:var(--ig-space-3)}
.ig-cluster{display:flex;flex-wrap:wrap;gap:var(--ig-space-1);align-items:center}
.ig-cluster-2{display:flex;flex-wrap:wrap;gap:var(--ig-space-2);align-items:center}
.ig-tussen{display:flex;justify-content:space-between;align-items:center;gap:var(--ig-space-2);flex-wrap:wrap}
/* alleen boven en onder: de zijmarge komt van .ig-wrap (de hoofdinhoud is ig-wrap ig-sectie); met 'padding: ... 0' viel die weg en raakte
   de inhoud op gsm en laptop de rand (founder 2026-10-04: "los op", VF 01_UI: 16 px zijmarge op gsm) */
.ig-sectie{padding-top:var(--ig-space-4);padding-bottom:var(--ig-space-4)}
.ig-sectie > .ig-sectiekop + *{margin-top:var(--ig-space-4)}
.ig-filters{display:flex;flex-direction:column;gap:var(--ig-space-1);margin-top:var(--ig-space-1)}
.ig-filters + *{margin-top:var(--ig-space-3)}

/* ---------- knoppen ---------- */
.ig-knop{display:inline-flex;align-items:center;justify-content:center;gap:var(--ig-space-1);min-height:2.75rem;padding:0 var(--ig-phi-3);border-radius:var(--ig-radius-pill);background:var(--ig-ink);color:var(--ig-bg);border:1px solid var(--ig-ink);font-size:var(--ig-type-sm);font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:transform var(--ig-t-base) var(--ig-ease),background var(--ig-t-fast),color var(--ig-t-fast),opacity var(--ig-t-fast)}
.ig-knop:hover{background:#1c1c1c;transform:translateY(-1px)}
.ig-knop:active{transform:none}
.ig-knop:disabled{opacity:.5;cursor:default;transform:none}
.ig-knop--licht{background:transparent;color:var(--ig-ink)}
.ig-knop--licht:hover{background:var(--ig-ink);color:var(--ig-bg)}
.ig-knop--accent{background:var(--ig-accent);color:var(--ig-ink);border-color:var(--ig-accent)}
.ig-knop--accent:hover{background:var(--ig-accent-strong);border-color:var(--ig-accent-strong)}
.ig-knop--klein{min-height:2.25rem;padding:0 var(--ig-phi-2);font-size:var(--ig-type-xs);letter-spacing:.04em}
.ig-knop--stil{background:transparent;border-color:transparent;color:var(--ig-text-muted)}
.ig-knop--stil:hover{background:var(--ig-surface);color:var(--ig-text);transform:none}
.ig-knop svg{width:1rem;height:1rem}
.ig-ikoon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--ig-radius-pill);color:var(--ig-text-muted);transition:background var(--ig-t-fast),color var(--ig-t-fast)}
.ig-ikoon:hover{background:var(--ig-surface);color:var(--ig-text)}
.ig-ikoon svg{width:1.125rem;height:1.125rem}

/* ---------- pills (status, read-only) en tags (filter / categorie) ---------- */
.ig-pill,.ig-tag{display:inline-flex;align-items:center;gap:var(--ig-space-half);font-size:var(--ig-type-xs);font-weight:700;letter-spacing:.04em;line-height:1;white-space:nowrap;border-radius:var(--ig-radius-pill);padding:var(--ig-space-half) var(--ig-phi-2);min-height:1.5rem}
.ig-pill{border:1px solid transparent}
.ig-pill--neutraal{background:var(--ig-surface-2);color:var(--ig-text-muted)}
.ig-pill--info{background:var(--ig-info-bg);color:var(--ig-info)}
.ig-pill--warn{background:var(--ig-warn-bg);color:var(--ig-warn)}
.ig-pill--success{background:var(--ig-success-bg);color:var(--ig-success)}
.ig-pill--danger{background:var(--ig-danger-bg);color:var(--ig-danger)}
.ig-pill--muted{background:transparent;color:var(--ig-text-faint);border-color:var(--ig-line)}
.ig-pill--gate{background:transparent;color:var(--ig-text);border-color:var(--ig-ink)}
.ig-pill--wacht{background:transparent;color:var(--ig-text-muted);border:1px dashed var(--ig-line-strong)}
/* live (founder 2026-09-30, keuze A): wat buiten staat is de enige volle donkere pil in de app, met een vinkje; per kanaal geteld (m.live) */
.ig-pill--live{display:inline-flex;align-items:center;gap:.3em;background:var(--ig-ink);color:var(--ig-bg);border-color:var(--ig-ink);font-weight:700}
.ig-pill--live::before{content:"";width:.85em;height:.85em;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ig-tag{background:var(--ig-bg);color:var(--ig-text);border:1px solid var(--ig-line);font-weight:500;letter-spacing:0;font-size:var(--ig-type-sm);max-width:100%;overflow:hidden;text-overflow:ellipsis}  /* een lange doelgroepnaam kapt af in plaats van de rij uit te rekken */
button.ig-tag{min-height:2.75rem;padding:0 var(--ig-phi-2);transition:background var(--ig-t-fast),border-color var(--ig-t-fast),transform var(--ig-t-fast)}
button.ig-tag:hover{border-color:var(--ig-ink)}
button.ig-tag:active{transform:scale(.97)}
button.ig-tag[aria-pressed=true]{background:var(--ig-accent);border-color:var(--ig-accent);color:var(--ig-ink)}
.ig-tag small{font-weight:600;color:var(--ig-text-faint);font-variant-numeric:tabular-nums;font-size:var(--ig-type-xs)}
.ig-tag--stil{border-style:dashed;color:var(--ig-text-muted)}
/* categorische tagkleur (VF 01 sectie 5.6 v1.58): herkenning, geen status; dezelfde tekst krijgt overal dezelfde kleur */
.ig-tag[data-kleur="1"]{background:var(--ig-cat-1-bg);color:var(--ig-cat-1);border-color:transparent;font-weight:600}
.ig-tag[data-kleur="2"]{background:var(--ig-cat-2-bg);color:var(--ig-cat-2);border-color:transparent;font-weight:600}
.ig-tag[data-kleur="3"]{background:var(--ig-cat-3-bg);color:var(--ig-cat-3);border-color:transparent;font-weight:600}
.ig-tag[data-kleur="4"]{background:var(--ig-cat-4-bg);color:var(--ig-cat-4);border-color:transparent;font-weight:600}
.ig-tag[data-kleur="5"]{background:var(--ig-cat-5-bg);color:var(--ig-cat-5);border-color:transparent;font-weight:600}
.ig-tag[data-kleur="6"]{background:var(--ig-cat-6-bg);color:var(--ig-cat-6);border-color:transparent;font-weight:600}
.ig-tag[data-kleur="7"]{background:var(--ig-cat-7-bg);color:var(--ig-cat-7);border-color:transparent;font-weight:600}
.ig-tag[data-kleur="8"]{background:var(--ig-cat-8-bg);color:var(--ig-cat-8);border-color:transparent;font-weight:600}
.ig-tag--soort[data-kleur="1"]{background:var(--ig-cat-1);color:#fff;border-color:var(--ig-cat-1)}
.ig-tag--soort[data-kleur="2"]{background:var(--ig-cat-2);color:#fff;border-color:var(--ig-cat-2)}
.ig-tag--soort[data-kleur="3"]{background:var(--ig-cat-3);color:#fff;border-color:var(--ig-cat-3)}
.ig-tag--soort[data-kleur="4"]{background:var(--ig-cat-4);color:#fff;border-color:var(--ig-cat-4)}
.ig-tag--soort[data-kleur="5"]{background:var(--ig-cat-5);color:#fff;border-color:var(--ig-cat-5)}
.ig-tag--soort[data-kleur="6"]{background:var(--ig-cat-6);color:#fff;border-color:var(--ig-cat-6)}
.ig-tag--soort[data-kleur="7"]{background:var(--ig-cat-7);color:#fff;border-color:var(--ig-cat-7)}
.ig-tag--soort[data-kleur="8"]{background:var(--ig-cat-8);color:#fff;border-color:var(--ig-cat-8)}
.ig-tag[aria-pressed="true"][data-kleur="1"],button.ig-tag[aria-pressed="true"][data-kleur="1"]{background:var(--ig-cat-1);color:#fff;border-color:var(--ig-cat-1)}
.ig-tag[aria-pressed="true"][data-kleur="2"],button.ig-tag[aria-pressed="true"][data-kleur="2"]{background:var(--ig-cat-2);color:#fff;border-color:var(--ig-cat-2)}
.ig-tag[aria-pressed="true"][data-kleur="3"],button.ig-tag[aria-pressed="true"][data-kleur="3"]{background:var(--ig-cat-3);color:#fff;border-color:var(--ig-cat-3)}
.ig-tag[aria-pressed="true"][data-kleur="4"],button.ig-tag[aria-pressed="true"][data-kleur="4"]{background:var(--ig-cat-4);color:#fff;border-color:var(--ig-cat-4)}
.ig-tag[aria-pressed="true"][data-kleur="5"],button.ig-tag[aria-pressed="true"][data-kleur="5"]{background:var(--ig-cat-5);color:#fff;border-color:var(--ig-cat-5)}
.ig-tag[aria-pressed="true"][data-kleur="6"],button.ig-tag[aria-pressed="true"][data-kleur="6"]{background:var(--ig-cat-6);color:#fff;border-color:var(--ig-cat-6)}
.ig-tag[aria-pressed="true"][data-kleur="7"],button.ig-tag[aria-pressed="true"][data-kleur="7"]{background:var(--ig-cat-7);color:#fff;border-color:var(--ig-cat-7)}
.ig-tag[aria-pressed="true"][data-kleur="8"],button.ig-tag[aria-pressed="true"][data-kleur="8"]{background:var(--ig-cat-8);color:#fff;border-color:var(--ig-cat-8)}
.ig-tag[data-kleur]:is(a,button):hover{filter:brightness(.94)}
/* socialicoontjes: merkkleur van het kanaal, ring als de post al geplaatst is; klein in lijsten, met label op een werkblad */
.ig-kanaal{--k:#3C4F63;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--k);color:#fff;text-decoration:none;flex:none;transition:transform var(--ig-t-fast),box-shadow var(--ig-t-fast)}
.ig-kanaal svg{width:1rem;height:1rem;display:block}
/* een campagne of advertentie op meer platformen (founder 2026-09-29): de kanaaliconen over elkaar, in de plaats van een icoon */
.ig-kanaalstapel{display:inline-flex;align-items:center;flex:none;min-width:1.75rem}
.ig-kanaalstapel .ig-kanaal{opacity:1;box-shadow:0 0 0 2px var(--ig-bg)}
.ig-kanaalstapel .ig-kanaal + .ig-kanaal{margin-left:-.55rem}
.ig-kanaal--klein{width:1.5rem;height:1.5rem}.ig-kanaal--klein svg{width:.875rem;height:.875rem}
.ig-kanaal--mail{--k:#0B7A4B}.ig-kanaal--video{--k:#5B36B8}.ig-kanaal--opname{--k:#3C4F63}.ig-kanaal--campagne{--k:#B0296B}.ig-kanaal--advertentie{--k:#A24E00}.ig-kanaal--werkdag{--k:#3C4F63}
.ig-kanaal--linkedin{--k:#0A66C2}.ig-kanaal--facebook{--k:#1877F2}.ig-kanaal--instagram{--k:#D6249F;background:linear-gradient(135deg,#F9A21B 0%,#E1306C 50%,#7B3FE4 100%)}
a.ig-kanaal:hover{transform:translateY(-1px) scale(1.06);box-shadow:0 2px 6px rgba(0,0,0,.2)}
span.ig-kanaal{opacity:.55}
.ig-kanaal.is-geplaatst{box-shadow:0 0 0 2px var(--ig-bg),0 0 0 4px var(--ig-accent)}
.ig-kanaal .ig-kanaal__label{font-size:var(--ig-type-xs);font-weight:700;white-space:nowrap}
.ig-kanaal:has(.ig-kanaal__label){width:auto;border-radius:var(--ig-radius-pill);padding:0 .625rem 0 .375rem}
.ig-tag--kanaal{gap:.4rem;padding-left:.375rem}
.ig-tag--kanaal .ig-kanaal{opacity:1}
/* triggertag (founder 2026-09-29): icoon zonder tekst, vaste tint per trigger, naam in de tooltip; een rij triggers staat naast elkaar */
.ig-tag--trigger{justify-content:center;min-width:2rem;min-height:2rem;padding:0 var(--ig-space-half);gap:.25rem;overflow:visible;vertical-align:middle;text-decoration:none}
.ig-tag--trigger .ig-ico{width:1.125rem;height:1.125rem;flex:none}
.ig-tag--trigger small{padding-right:.2rem}
.ig-triggers{display:inline-flex;flex-wrap:nowrap;gap:var(--ig-space-half);align-items:center;vertical-align:middle}
a.ig-tag{text-decoration:none}  /* een tag die filtert of doorlinkt is een knop, geen tekstlink */
/* voorbeeld van een post zoals het platform ze toont: een kaart per kanaal, tekst klapt in op de vouw van dat kanaal */
.ig-vb{display:flex;flex-direction:column;align-items:center;background:#F0F2F5;border-radius:var(--ig-radius);padding:var(--ig-space-2)}
.ig-vb__kaart{width:100%;max-width:31rem;background:#fff;border-radius:.5rem;box-shadow:0 1px 2px rgba(0,0,0,.15);font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.875rem;line-height:1.35;color:#191919;overflow:hidden}
.ig-vb__kaart--linkedin{border-radius:.5rem;border:1px solid #E0DFDC}
.ig-vb__kaart--instagram{max-width:26rem;border:1px solid #DBDBDB;box-shadow:none}
.ig-vb__kop{display:flex;align-items:center;gap:.6rem;padding:.75rem .75rem .5rem}
.ig-vb__kop small{color:#666;font-size:.75rem}
.ig-vb__avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ig-ink);display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.ig-vb__kaart--instagram .ig-vb__avatar{width:2rem;height:2rem;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #E1306C}
.ig-vb__avatar img{width:70%;height:auto}
.ig-vb__tekst{padding:0 .75rem .6rem;white-space:pre-wrap;word-wrap:break-word}
.ig-vb__kaart--instagram .ig-vb__tekst{display:inline;padding:0}
.ig-vb__rest{white-space:pre-wrap}
.ig-vb__meer{color:#666;font:inherit;padding:0;margin-left:.15rem;cursor:pointer}
.ig-vb__meer:hover{color:#0A66C2;text-decoration:underline}
.ig-vb__link{color:#0A66C2}
.ig-vb__kaart--instagram .ig-vb__link{color:inherit;text-decoration:none}
.ig-vb__tag{color:#0A66C2}
.ig-vb__kaart--instagram .ig-vb__tag{color:#00376B}
.ig-vb__beeld{position:relative;background:#111;overflow:hidden}
.ig-vb__beeld img,.ig-vb__beeld video{width:100%;height:auto;display:block;max-height:26rem;object-fit:cover}
.ig-vb__beeld--instagram{aspect-ratio:4/5}  /* Instagram toont een staand feedbeeld (1080x1350) volledig; onze tekstkaarten en fotos zijn 4:5 */
.ig-vb__beeld--instagram img,.ig-vb__beeld--instagram video{height:100%;max-height:none;object-fit:cover}
.ig-vb__beeld--reel{aspect-ratio:9/16;max-height:70vh;margin:0 auto}  /* een reel staat rechtop over het hele scherm */
.ig-vb__beeld--reel video{width:100%;height:100%;max-height:none;object-fit:contain;background:#000}
.ig-vb__beeld--reel .ig-vb__speler{width:100%;height:100%;min-height:32rem;border:0;display:block;background:#000}
.gk-gates__lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-half)}
.gk-gates__lijst li{font-size:var(--ig-fs-sm, .875rem);line-height:1.45}
.ig-vb__beeld--leeg{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:#999;background:#FAFAFA;font-size:.8rem;padding:1rem;text-align:center}
.ig-vb__meerbeeld{position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;padding:.15rem .45rem;border-radius:999px}
.ig-vb__acties{display:flex;gap:1rem;padding:.6rem .75rem;border-top:1px solid #EEE;color:#666;font-size:.8rem}
.ig-vb__kaart--instagram .ig-vb__acties{border-top:0;font-size:1.25rem;color:#262626;padding:.5rem .75rem .25rem}
.ig-vb__acties--tekst span{font-weight:600}
.ig-vb__caption{padding:0 .75rem .75rem;white-space:pre-wrap;word-wrap:break-word}
.ig-vb__cijfers{width:100%;max-width:31rem;margin:var(--ig-space-1) auto 0;text-align:center}
.gk-tekst{white-space:pre-wrap;line-height:1.55;border-left:3px solid var(--ig-accent);padding-left:var(--ig-space-2);margin:0}
.gk-brief{width:100%;height:36rem;border:1px solid var(--ig-line);border-radius:var(--ig-radius);background:#F5F6F5}
.gk-vb-rij>td{background:var(--ig-surface);padding:var(--ig-space-2)}
.gk-vb-rij .ig-vb{max-width:36rem}
.ig-vb-waarschuwingen{list-style:none;margin:var(--ig-space-1) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-half)}
.ig-vb__w{padding:.35rem .6rem;border-radius:var(--ig-radius-sm);background:var(--ig-surface);color:var(--ig-text-muted)}
.ig-vb__w--let_op{background:var(--ig-warn-bg);color:var(--ig-warn)}
.ig-vb__w--blokkeer{background:var(--ig-danger-bg);color:var(--ig-danger);font-weight:600}
/* campagne: de fasen naast elkaar, elk met zijn onderdelen eronder */
.ig-fasen{display:flex;flex-direction:column;gap:var(--ig-space-2)}
.ig-fase{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--ig-space-1);background:var(--ig-surface);border-radius:var(--ig-radius);padding:var(--ig-space-2);min-width:0}
.ig-fase__kop,.ig-fase > .ig-cluster{grid-column:1 / -1}
.ig-fase__kop{display:flex;align-items:center;justify-content:space-between;gap:var(--ig-space-1)}
.ig-fase__n{font-size:var(--ig-type-xs);font-weight:700;color:var(--ig-text-faint);font-variant-numeric:tabular-nums}
.ig-onderdeel{background:var(--ig-bg);border:1px solid var(--ig-line);border-radius:var(--ig-radius);padding:var(--ig-space-1);display:flex;flex-direction:column;gap:.25rem;min-width:0}
.ig-onderdeel .ig-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ig-onderdeel a{text-decoration:none;font-weight:600;font-size:var(--ig-type-sm);overflow-wrap:anywhere}
.ig-onderdeel a:hover{text-decoration:underline}
.ig-onderdeel__rij{display:flex;align-items:center;gap:var(--ig-space-half);flex-wrap:wrap;font-size:var(--ig-type-xs)}
.ig-adslijst{max-height:16rem;overflow-y:auto;gap:var(--ig-space-half)}
.ig-tabel--platform td.ig-num,.ig-tabel--platform td .ig-muted{white-space:nowrap}
.ig-camp-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--ig-space-2)}
.ig-camp-kpi > div{background:var(--ig-surface);border-radius:var(--ig-radius);padding:var(--ig-space-2)}
.ig-camp-kpi b{display:block;font-size:var(--ig-type-h3);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.ig-camp-kpi small{color:var(--ig-text-muted);font-size:var(--ig-type-xs)}
.ig-budgetbalk{height:.5rem;border-radius:999px;background:var(--ig-line);overflow:hidden}
.ig-budgetbalk span{display:block;height:100%;background:var(--ig-accent)}
.ig-budgetbalk.is-over span{background:var(--ig-danger)}
.ig-tag[data-kleur] small{color:inherit;opacity:.75}
.ig-tag[aria-pressed="true"][data-kleur] small{opacity:.85}


/* ---------- velden ---------- */
.ig-veld{display:flex;flex-direction:column;gap:var(--ig-space-half)}
.ig-veld label,.ig-veld .ig-label{margin:0}
.ig-input,.ig-select,.ig-textarea{width:100%;min-height:2.75rem;padding:0 var(--ig-phi-2);border:1px solid var(--ig-line);border-radius:var(--ig-radius);background:var(--ig-bg);color:var(--ig-text);transition:border-color var(--ig-t-fast),background var(--ig-t-fast),box-shadow var(--ig-t-fast)}
.ig-textarea{padding:var(--ig-phi-2);line-height:1.5}
.ig-input:focus,.ig-select:focus,.ig-textarea:focus{outline:none;border-color:var(--ig-ink);box-shadow:0 0 0 3px var(--ig-accent-soft)}
.ig-input::placeholder,.ig-textarea::placeholder{color:var(--ig-text-faint)}
.ig-select{appearance:none;padding-right:2.25rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23101211' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem}
.ig-select--auto{width:auto;max-width:100%}
@media (max-width:639px){.ig-select--auto{width:100%}.ig-zoek{min-width:0;flex-basis:100%}}
@media (pointer:coarse){.ig-knop--klein,.ig-select--klein{min-height:2.75rem}}
.ig-select--klein{min-height:2.25rem;font-size:var(--ig-type-sm);padding:0 2rem 0 var(--ig-phi-2);border-radius:var(--ig-radius-pill)}
.ig-zoek{position:relative;flex:1;min-width:14rem}
.ig-zoek .ig-input{padding-left:2.5rem;border-radius:var(--ig-radius-pill);background:var(--ig-surface)}
.ig-zoek .ig-input:focus{background:var(--ig-bg)}
.ig-zoek svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;pointer-events:none}
.ig-fout{color:var(--ig-danger);background:var(--ig-danger-bg);border-radius:var(--ig-radius);padding:var(--ig-phi-2) var(--ig-phi-3);font-size:var(--ig-type-sm);font-weight:500}
.ig-opgeslagen{position:fixed;left:50%;bottom:var(--ig-space-4);transform:translate(-50%,1rem);opacity:0;background:var(--ig-ink);color:var(--ig-bg);padding:var(--ig-phi-2) var(--ig-phi-3);border-radius:var(--ig-radius-pill);font-size:var(--ig-type-sm);font-weight:600;pointer-events:none;transition:opacity var(--ig-t-base),transform var(--ig-t-base) var(--ig-ease);z-index:80}
.ig-opgeslagen.aan{opacity:1;transform:translate(-50%,0)}
.ig-opgeslagen.fout{background:var(--ig-danger)}

/* ---------- topbar ---------- */
.ig-topbar{position:sticky;top:0;z-index:50;height:var(--ig-topbar);background:var(--ig-bg);border-bottom:1px solid var(--ig-line)}
.ig-topbar .ig-wrap{position:relative;height:100%;display:flex;align-items:center;gap:var(--ig-space-3)}
.ig-logo{display:block;height:1.875rem;color:var(--ig-ink);text-decoration:none;flex:none}
.ig-logo svg{height:100%;width:auto;display:block}
.ig-logo .mark{fill:var(--ig-accent)}
.ig-nav{display:flex;gap:var(--ig-space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:center}
.ig-nav::-webkit-scrollbar{display:none}
.ig-nav a{position:relative;display:inline-flex;align-items:center;min-height:2.25rem;padding:0 var(--ig-phi-2);border-radius:var(--ig-radius-pill);font-size:var(--ig-type-sm);font-weight:600;text-decoration:none;color:var(--ig-text-muted);white-space:nowrap;transition:background var(--ig-t-fast),color var(--ig-t-fast)}
.ig-nav a:hover{background:var(--ig-surface);color:var(--ig-text)}
.ig-nav a[aria-current=page]{background:var(--ig-accent);color:var(--ig-ink)}
/* lichte scheiding tussen de menu-items: een haarlijn midden in de tussenruimte, niet op de pil zelf */
.ig-nav a + a::before{content:"";position:absolute;left:calc(var(--ig-space-1) / -2 - .5px);top:50%;transform:translateY(-50%);width:1px;height:1.125rem;background:var(--ig-line)}
.ig-topbar-rechts{display:flex;align-items:center;gap:var(--ig-space-1);flex:none}
/* de hoofdnavigatie hoort in het midden van het scherm te staan, niet in het midden van de ruimte
   die logo, modulekeuze en de rechterkant overlaten. Vanaf 1200px is er plaats om ze los te maken
   uit de rij en op de as van het venster te zetten; daaronder blijft ze meeschuiven in de flexrij. */
@media (min-width:1200px){
  .ig-nav{position:absolute;left:50%;transform:translateX(-50%);flex:none;max-width:calc(100% - 2 * var(--ig-gutter))}
  .ig-topbar-rechts{margin-left:auto}
}
.ig-wie{display:inline-flex;align-items:center;gap:var(--ig-space-1);font-size:var(--ig-type-sm);font-weight:600;color:var(--ig-text-muted)}
.ig-wie .ig-vak{width:1.125rem;height:1.125rem}

/* ---------- submenu: clean, gecentreerd; alleen tekst, de actieve pagina zwart met groene onderlijn ---------- */
.ig-funnel .ig-wrap{height:2.75rem;gap:var(--ig-space-3);justify-content:safe center}
.ig-funnel__stappen{display:flex;align-items:center;gap:var(--ig-space-3);list-style:none;margin:0;padding:0;min-width:max-content}
.ig-funnel__stap{display:flex;align-items:center}
.ig-subnav.ig-funnel a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--ig-space-half);border:0;background:none;box-shadow:none;border-radius:0;font-size:var(--ig-type-sm);font-weight:500;letter-spacing:0;color:var(--ig-text-muted);text-decoration:none;white-space:nowrap;transition:color var(--ig-t-fast)}
.ig-subnav.ig-funnel a:hover{color:var(--ig-text);transform:none;box-shadow:none}
.ig-subnav.ig-funnel a[aria-current=page]{color:var(--ig-text);font-weight:700;background:none;box-shadow:inset 0 -2px 0 var(--ig-accent)}
.ig-funnel__bol{display:none}
@media (max-width:899px){.ig-funnel .ig-wrap,.ig-funnel__stappen{gap:var(--ig-space-2)}.ig-subnav.ig-funnel a{font-size:var(--ig-type-xs)}}
/* Cijfers: "Alle cijfers verversen" als icoon rechtsboven in het hoofddeel, op elke cijfertab dezelfde plaats; draait zolang het ophalen loopt */
.ig-ververs{float:right;margin:0 0 var(--ig-space-2) var(--ig-space-2)}
.ig-ververs .ig-actie[aria-busy=true]{cursor:progress}
.ig-ververs .ig-actie[aria-busy=true] .ig-ico{animation:ig-draai .9s linear infinite}
@keyframes ig-draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ig-ververs .ig-actie[aria-busy=true] .ig-ico{animation:none}}

/* ---------- subnav, tabs, kpi's, home ---------- */
/* Onder 900px is er geen plaats voor naam en uitlogknop naast de hoofdnavigatie; die houdt voorrang
   en blijft schuifbaar. Uitloggen staat dan op de keuzepagina (via het logo) en bij Instellingen. */
@media (max-width:899px){
  .ig-wie,.ig-uitloggen{display:none}
  .ig-topbar .ig-wrap{gap:var(--ig-space-1)}
  .ig-nav{flex:1 1 5rem;min-width:5rem}
}
.ig-subnav{position:sticky;top:var(--ig-topbar);z-index:45;background:var(--ig-surface);border-bottom:1px solid var(--ig-line)}
.ig-subnav .ig-wrap{display:flex;gap:var(--ig-space-half);height:2.5rem;align-items:center;overflow-x:auto;scrollbar-width:none}
.ig-subnav .ig-wrap::-webkit-scrollbar{display:none}
.ig-subnav a{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 var(--ig-phi-2);border-radius:var(--ig-radius-pill);font-size:var(--ig-type-xs);font-weight:600;letter-spacing:.02em;text-decoration:none;color:var(--ig-text-muted);white-space:nowrap}
.ig-subnav a:hover{color:var(--ig-text)}
.ig-subnav a[aria-current=page]{color:var(--ig-text);box-shadow:inset 0 -2px 0 var(--ig-accent);border-radius:0}
.ig-tabs{display:flex;gap:var(--ig-space-1);flex-wrap:wrap}
.ig-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--ig-space-2);margin-top:var(--ig-space-4)}
.ig-kpi{display:flex;flex-direction:column;min-width:0;gap:var(--ig-space-half);padding:var(--ig-phi-3);border-radius:var(--ig-radius-lg);background:var(--ig-surface);text-decoration:none;transition:transform var(--ig-t-base) var(--ig-ease),box-shadow var(--ig-t-base)}
a.ig-kpi:hover{transform:translateY(-2px);box-shadow:var(--ig-shadow)}
.ig-kpi__waarde{font-weight:800;font-size:var(--ig-type-h1);letter-spacing:-.03em;line-height:1}
.ig-kpi .ig-label{margin:0}
.ig-kol2{display:grid;grid-template-columns:1fr 1fr;gap:var(--ig-space-3)}
.ig-lijstje li > span{min-width:0}
.ig-lijstje li{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--ig-space-1);padding:var(--ig-space-1) 0;border-top:1px solid var(--ig-line);font-size:var(--ig-type-sm);line-height:1.45}
.ig-lijstje li:first-child{border-top:0}
.ig-lijstje li.ig-leeg{display:block;color:var(--ig-text-muted)}
@media (max-width:1023px){.ig-kol2{grid-template-columns:1fr}}

/* ---------- handtekens ---------- */
.ig-vak{width:1.5rem;height:1.5rem;display:block;overflow:visible;flex:none}
.ig-vak .box{fill:none;stroke:var(--ig-ink);stroke-opacity:.35;stroke-width:1.2}
.ig-vak .ink{fill:none;stroke:var(--ig-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ig-vak .vol{fill:var(--ig-ink)}
.ig-vak--klein{width:1.125rem;height:1.125rem}
.ig-stem{display:inline-flex;gap:var(--ig-space-half)}
.ig-stemknop{display:inline-flex;align-items:center;gap:var(--ig-space-half);min-height:2.75rem;padding:0 var(--ig-phi-2);border:1px solid var(--ig-line);border-radius:var(--ig-radius-pill);font-size:var(--ig-type-sm);font-weight:500}
.ig-stemknop[aria-pressed=true]{background:var(--ig-accent);border-color:var(--ig-accent)}

/* ---------- login / split ---------- */
.ig-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh}
.ig-split-groen{position:relative;background:var(--ig-accent);color:var(--ig-ink);padding:var(--ig-space-4);display:flex;flex-direction:column;justify-content:space-between;gap:var(--ig-space-5);overflow:hidden}
.ig-split-groen .ig-display{color:var(--ig-bg);position:relative}
.ig-split-groen .mark-groot{position:absolute;right:-18%;top:-20%;width:78%;height:auto;color:rgba(255,255,255,.22);pointer-events:none}
.ig-split-wit{display:flex;align-items:center;justify-content:center;padding:var(--ig-space-4)}
.ig-split-wit > *{width:100%;max-width:26rem}
.ig-eyebrow{display:flex;align-items:center;gap:var(--ig-space-1);font-size:var(--ig-type-sm);font-weight:600;position:relative}
.ig-eyebrow::before{content:"";width:1.375rem;height:2px;background:currentColor}

/* ---------- werkbank ---------- */
.ig-blok{margin-top:var(--ig-space-3)}
.ig-blokkop{display:flex;align-items:center;justify-content:space-between;gap:var(--ig-space-2);min-height:3rem;padding:0 var(--ig-space-2);border-radius:var(--ig-radius);background:var(--ig-accent);font-weight:700;font-size:var(--ig-type-sm)}
.ig-blok[data-groep=B] .ig-blokkop{background:var(--ig-surface);box-shadow:inset 0 -2px 0 var(--ig-accent)}
.ig-blok[data-groep=N] .ig-blokkop{background:var(--ig-ink);color:var(--ig-bg)}
.ig-blokkop small{font-weight:600;opacity:.7;font-variant-numeric:tabular-nums}
.ig-rijen{min-height:1rem;border-radius:var(--ig-radius)}
.ig-rijen.leeg{border:1px dashed var(--ig-line);padding:var(--ig-space-2);color:var(--ig-text-faint);font-size:var(--ig-type-sm);text-align:center}
.ig-rijen.leeg:empty::before{content:"Sleep hier een idee naartoe"}
.ig-rijen.over{background:var(--ig-accent-soft)}
.ig-rij{display:grid;grid-template-columns:2rem 3rem 5.5rem minmax(0,1fr) auto auto 7rem 8rem 2.75rem;align-items:center;gap:var(--ig-space-2);height:4rem;border-bottom:1px solid var(--ig-line);position:relative;background:var(--ig-bg);transition:background var(--ig-t-fast),opacity var(--ig-t-base),transform var(--ig-t-base) var(--ig-ease)}
.ig-rij:last-child{border-bottom:0}
.ig-rij.sleept{opacity:.4}
.ig-rij.plaats-boven::before,.ig-rij.plaats-onder::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--ig-accent);border-radius:2px;z-index:2}
.ig-rij.plaats-boven::before{top:-2px}
.ig-rij.plaats-onder::after{bottom:-2px}
.ig-rij.nieuw{animation:ig-verschijn var(--ig-t-slow) var(--ig-ease)}
@keyframes ig-verschijn{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
.ig-greep{display:flex;align-items:center;justify-content:center;width:2rem;height:2.75rem;color:var(--ig-text-faint);cursor:grab;border-radius:var(--ig-radius-sm);touch-action:none}
.ig-greep:hover{color:var(--ig-text);background:var(--ig-surface)}
.ig-greep:active{cursor:grabbing}
.ig-greep svg{width:1rem;height:1rem}
.ig-rang{font-weight:800;font-size:var(--ig-type-lead);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ig-nr{font-size:var(--ig-type-xs);font-weight:700;letter-spacing:.06em;color:var(--ig-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ig-titel{min-width:0;display:flex;align-items:center;gap:var(--ig-space-1)}
.ig-titel a{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-weight:500;font-size:var(--ig-type-base)}
.ig-titel a:hover{text-decoration:underline;text-underline-offset:3px}
.ig-dienst{font-size:var(--ig-type-sm);color:var(--ig-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-menu{position:relative}
.ig-menu-paneel{position:absolute;right:0;top:calc(100% + .25rem);z-index:20;min-width:16rem;background:var(--ig-bg);border:1px solid var(--ig-line);border-radius:var(--ig-radius-lg);box-shadow:var(--ig-shadow-lg);padding:var(--ig-space-1);display:none;flex-direction:column;gap:var(--ig-space-half)}
.ig-menu.open .ig-menu-paneel{display:flex;animation:ig-verschijn var(--ig-t-base) var(--ig-ease)}
.ig-menu-paneel button,.ig-menu-paneel .ig-select{width:100%;text-align:left;min-height:2.75rem;padding:0 var(--ig-phi-2);border-radius:var(--ig-radius);font-size:var(--ig-type-sm)}
.ig-menu-paneel button:hover{background:var(--ig-surface)}
.ig-menu-paneel .gevaar{color:var(--ig-danger)}

/* ---------- statusflow: een balk met pijlvormige schotten; waar het item zit is zwart met groen, wat erachter ligt donker, wat komt licht ---------- */
.ig-statusflow{--pijl:.85rem;grid-column:1 / -1;display:flex;align-items:stretch;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;border-radius:var(--ig-radius-pill);background:var(--ig-surface);border:1px solid var(--ig-line)}
.ig-statusflow::-webkit-scrollbar{display:none}
.ig-statusflow__stap{display:flex;flex:1 1 0;min-width:max-content}
.ig-statusflow__stap + .ig-statusflow__stap{margin-left:calc(var(--pijl) * -1 + 2px)}
.ig-statusflow__stap > *{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.25rem;padding:0 calc(var(--pijl) + .75rem) 0 calc(var(--pijl) + .5rem);border:0;background:var(--ig-surface);font:inherit;font-size:var(--ig-type-sm);font-weight:600;color:var(--ig-text-muted);white-space:nowrap;cursor:default;clip-path:polygon(0 0,calc(100% - var(--pijl)) 0,100% 50%,calc(100% - var(--pijl)) 100%,0 100%,var(--pijl) 50%);transition:background var(--ig-t-fast),color var(--ig-t-fast)}
.ig-statusflow__stap:first-child > *{padding-left:1rem;clip-path:polygon(0 0,calc(100% - var(--pijl)) 0,100% 50%,calc(100% - var(--pijl)) 100%,0 100%)}
.ig-statusflow__stap:last-child > *{padding-right:1rem;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--pijl) 50%)}
.ig-statusflow__stap > button{cursor:pointer;color:var(--ig-text)}
.ig-statusflow__stap > button:hover{background:var(--ig-line)}
.ig-statusflow__stap > button:disabled{opacity:.5;cursor:wait}
.ig-statusflow__stap.is-gedaan > *{background:var(--ig-surface-2);color:var(--ig-text)}
.ig-statusflow__stap.is-hier > *{background:var(--ig-ink);color:var(--ig-bg);font-weight:700}
.ig-statusflow__stap.is-hier.is-afgekeurd > *{background:var(--ig-danger)}
.ig-statusflow__bol{display:inline-block;width:.375rem;height:.375rem;border-radius:50%;background:var(--ig-line-strong);flex:none}
.is-gedaan .ig-statusflow__bol{background:var(--ig-ink);opacity:.45}
.is-hier .ig-statusflow__bol{background:var(--ig-accent)}
/* een post die op een deel van zijn kanalen live staat: de stap Gepubliceerd draagt al de live-pil (m.live) */
.ig-statusflow__stap .ig-pill--live{margin-left:.4em;font-size:.72em;padding-block:0}
.is-hier.is-afgekeurd .ig-statusflow__bol{background:var(--ig-bg)}

/* ---------- kanaal als iconknop: aan is vol in merkkleur, uit is grijs ---------- */
.ig-kanaalknop{background:none;border:0;padding:0;margin:0;border-radius:50%;cursor:pointer;line-height:0;transition:transform var(--ig-t-fast)}
.ig-kanaalknop:hover{transform:translateY(-1px) scale(1.06)}
.ig-kanaalknop:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ig-accent-soft)}
.ig-kanaalknop .ig-kanaal{opacity:1;transition:opacity var(--ig-t-fast),filter var(--ig-t-fast)}
.ig-kanaalknop[aria-pressed=false] .ig-kanaal,.ig-kanaalknop--tab[aria-selected=false] .ig-kanaal{opacity:.3;filter:grayscale(1)}
.ig-kanaalknop[aria-pressed=true] .ig-kanaal{box-shadow:0 0 0 2px var(--ig-bg),0 0 0 4px var(--ig-accent)}
.ig-kanaalkeuze{display:flex;justify-content:space-around;align-items:flex-start;padding:var(--ig-space-half) 0}
.ig-kanaalkeuze__kanaal{display:flex;flex-direction:column;align-items:center;gap:var(--ig-space-half)}
.ig-kanaalkeuze__link{color:var(--ig-text-muted);text-decoration:none;font-size:var(--ig-type-xs);font-weight:600}
.ig-kanaalkeuze__link:hover{color:var(--ig-text);text-decoration:underline}
.ig-medialijst--rooster{flex-direction:row;flex-wrap:wrap}
.ig-medialijst--rooster .ig-media{flex-direction:column;align-items:stretch;width:11rem;max-width:100%}
.ig-medialijst--rooster .ig-media img{width:100%;height:8rem;object-fit:cover;border-radius:calc(var(--ig-radius) - 2px)}
.ig-medialijst--rooster .ig-media figcaption{display:flex;justify-content:space-between;align-items:center;gap:var(--ig-space-half);min-width:0}
#ig-post.ig-werkblad{grid-template-columns:minmax(14rem,.9fr) minmax(0,1.5fr) minmax(20rem,1.2fr)}
@media (max-width:1100px){#ig-post.ig-werkblad{grid-template-columns:minmax(0,1fr) minmax(18rem,1fr)}#ig-post .ig-werkblad__zij{grid-column:1 / -1}}
@media (max-width:700px){#ig-post.ig-werkblad{grid-template-columns:minmax(0,1fr)}#ig-post .ig-werkblad__zij{grid-column:auto}}

/* ---------- agenda: zicht-schakelaar en de zone 'nog te plannen' ---------- */
.ig-zicht{display:inline-flex;padding:.2rem;border-radius:var(--ig-radius-pill);background:var(--ig-surface-2)}
.ig-zicht a{display:inline-flex;align-items:center;min-height:2rem;padding:0 .875rem;border-radius:var(--ig-radius-pill);font-size:var(--ig-type-sm);font-weight:600;color:var(--ig-text-muted);text-decoration:none}
.ig-zicht a[aria-current=page]{background:var(--ig-bg);color:var(--ig-text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ig-plannen{margin-top:var(--ig-space-5)}
.ig-rij:focus-visible{outline:2px solid var(--ig-accent);outline-offset:2px}
.ig-rij .ig-greep{width:2rem;height:2.75rem;display:flex;align-items:center;justify-content:center;padding:0}
.ig-rij .ig-titel .ig-pill{flex:none}
.ig-agendarij .ig-menu{margin-left:auto}

/* ---------- publicatiekalender: uur en kanaal in de rij; slots op de postpagina ---------- */
.ig-uur{min-width:3rem;font-size:var(--ig-type-sm);font-weight:700;color:var(--ig-text-muted);font-variant-numeric:tabular-nums}
.ig-uur--leeg{color:var(--ig-text-faint);font-weight:500;letter-spacing:.06em}
.ig-afvink--leeg{visibility:hidden;cursor:default}
.ig-slots{display:flex;flex-direction:column;gap:var(--ig-space-half)}
.ig-slot{display:flex;align-items:center;gap:var(--ig-space-1)}
.ig-slot .ig-input{flex:1;min-height:2.25rem;font-size:var(--ig-type-sm)}

/* ---------- werkblad 1:2:1 ---------- */
.ig-werkblad{display:grid;grid-template-columns:1fr 2fr 1fr;gap:var(--ig-space-4);align-items:start;margin-top:var(--ig-space-4)}
.ig-werkblad__zij,.ig-werkblad__hoofd,.ig-werkblad__tools{min-width:0;display:flex;flex-direction:column;gap:var(--ig-space-3)}
.ig-functiebalk{display:flex;flex-wrap:wrap;gap:var(--ig-space-1);align-items:center;padding:var(--ig-space-2) 0;border-top:1px solid var(--ig-line);border-bottom:1px solid var(--ig-line);margin-top:var(--ig-space-3)}
.ig-kaart{background:var(--ig-surface);border-radius:var(--ig-radius-lg);padding:var(--ig-phi-3);display:flex;flex-direction:column;gap:var(--ig-space-2)}
.ig-kaart--wit{background:var(--ig-bg);border:1px solid var(--ig-line)}
.ig-kaart--zwart{background:var(--ig-ink);color:var(--ig-bg)}
.ig-kaart--zwart .ig-label{color:var(--ig-accent)}
.ig-kv{display:grid;grid-template-columns:auto 1fr;gap:var(--ig-space-half) var(--ig-space-2);font-size:var(--ig-type-sm)}
.ig-kv dt{color:var(--ig-text-muted);font-weight:600;white-space:nowrap}
.ig-kv dd{min-width:0;overflow-wrap:anywhere}
.ig-spoor li{display:grid;grid-template-columns:auto 1fr;gap:var(--ig-space-1);font-size:var(--ig-type-xs);padding:var(--ig-space-1) 0;border-top:1px solid var(--ig-line);color:var(--ig-text-muted)}
.ig-spoor li b{color:var(--ig-text);font-weight:600}
.ig-titelveld{width:100%;border:0;border-bottom:2px solid transparent;background:transparent;font-weight:800;font-size:var(--ig-type-h3);letter-spacing:-.02em;line-height:1.15;padding:0}
.ig-titelveld:focus{outline:none;border-bottom-color:var(--ig-accent)}

/* ---------- tabellen: een dichte opmaak voor elke tabel (founder 2026-09-29) ----------
   Tags, pills en acties klein, zodat de titel en de cijfers de plaats krijgen; koppen breken, de titel mag over twee regels. */
.ig-tabelwrap{overflow-x:auto}
.ig-tabel{width:100%;border-collapse:collapse;font-size:var(--ig-type-sm)}
.ig-tabel th{text-align:left;white-space:normal;vertical-align:bottom;line-height:1.25;min-width:3rem;font-size:var(--ig-type-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ig-text-muted);padding:0 var(--ig-space-half) var(--ig-space-1);border-bottom:1px solid var(--ig-line-strong)}
.ig-tabel td{height:3rem;vertical-align:middle;padding:0 var(--ig-space-half);border-bottom:1px solid var(--ig-line);color:var(--ig-text)}
.ig-tabel tr:last-child td{border-bottom:0}
.ig-tabel td.primair{width:100%;max-width:1px;min-width:15rem;white-space:normal;overflow:hidden;font-weight:500}
.ig-tabel td.primair>a:only-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}  /* een titel alleen: hoogstens twee regels */
.ig-tabel td.primair .ig-sm.ig-muted{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  /* een beschrijving onder de titel: een regel */
.ig-tabel td.ig-num{white-space:nowrap}  /* een getal of datum breekt nooit */
.ig-tabel td.ig-dienst{max-width:28rem}
.ig-tabel--klanten td:nth-child(6){max-width:22rem;overflow:hidden}  /* de tagkolom mag de naam niet wegdrukken */
.ig-tabel td.primair a{text-decoration:none;font-weight:500}
.ig-tabel td.primair a:hover{text-decoration:underline}

/* ---------- klanten ---------- */
.ig-bulkbalk{position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--ig-ink);color:var(--ig-bg);padding:var(--ig-space-1) 0;box-shadow:var(--ig-shadow-lg)}
.ig-bulkbalk .ig-input{background:var(--ig-bg);color:var(--ig-text)}
.ig-bulkbalk .ig-knop--licht{color:var(--ig-bg);border-color:var(--ig-bg)}
.ig-bulkbalk .ig-knop--stil{color:var(--ig-bg)}
.ig-taginvoer{display:flex;flex-direction:column;gap:var(--ig-space-1)}
.ig-tag__weg{margin-left:var(--ig-space-half);min-width:1.5rem;min-height:1.5rem;border-radius:var(--ig-radius-pill);color:var(--ig-text-muted);font-size:var(--ig-type-base);line-height:1}
.ig-tag__weg:hover{background:var(--ig-surface-2);color:var(--ig-text)}
.ig-tabel input[type=checkbox]{width:1.25rem;height:1.25rem}
/* Geen kolom verdwijnt (VF 01_UI 6.2, v1.62): op geen enkele breedte wordt een kolom verborgen; de tabel scrolt binnen .ig-tabelwrap. */

/* ---------- rij-acties (VF 01_UI 6.2 en sectie 10 regel 15-16): de laatste kolom, iconen met tooltip, kleeft rechts ---------- */
.ig-tabel{--ig-rij-bg:var(--ig-bg);--ig-rij-hover:var(--ig-surface)}
.ig-kaart:not(.ig-kaart--wit) .ig-tabel{--ig-rij-bg:var(--ig-surface);--ig-rij-hover:var(--ig-surface-2)}
.ig-tabel th.ig-acties,.ig-tabel td.ig-acties{position:sticky;right:0;z-index:1;width:1%;white-space:nowrap;text-align:right;background:var(--ig-rij-bg);box-shadow:-8px 0 8px -8px rgba(0,0,0,.22)}
.ig-tabel td.ig-acties{padding-left:var(--ig-space-1)}
.ig-tabel tbody tr:has(> td.ig-acties):hover > td{background:var(--ig-rij-hover)}
.ig-acties__rij{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--ig-space-half);vertical-align:middle}
span.ig-acties{display:inline-flex;align-items:center;justify-content:flex-end;flex:none;margin-left:auto;white-space:nowrap}
.ig-actie{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--ig-line);border-radius:var(--ig-radius-pill);background:var(--ig-bg);color:var(--ig-text);cursor:pointer;text-decoration:none;line-height:1;transition:transform var(--ig-t-base) var(--ig-ease),background var(--ig-t-fast),color var(--ig-t-fast),border-color var(--ig-t-fast)}
.ig-actie .ig-ico{width:1.25rem;height:1.25rem;flex:none;pointer-events:none}
.ig-actie:hover{background:var(--ig-surface-2);border-color:var(--ig-line-strong);transform:translateY(-1px)}
.ig-actie:active{transform:scale(.94)}
.ig-actie:focus-visible{outline:2px solid var(--ig-accent);outline-offset:2px}
.ig-actie[disabled]{opacity:.45;cursor:default;transform:none}
.ig-actie--accent{background:var(--ig-accent-soft);border-color:var(--ig-accent-strong);color:var(--ig-ink)}
.ig-actie--accent:hover{background:var(--ig-accent);border-color:var(--ig-accent-strong)}
.ig-actie--succes{color:var(--ig-success)}
.ig-actie--succes:hover{background:var(--ig-success-bg);border-color:var(--ig-success)}
.ig-actie--gevaar{color:var(--ig-danger)}
.ig-actie--gevaar:hover{background:var(--ig-danger-bg);border-color:var(--ig-danger)}
.ig-actieplek{display:inline-block;flex:none;width:2.75rem;height:2.75rem}
.ig-gk-stand{display:contents}

/* ---------- import ---------- */
.ig-stappen{display:flex;flex-wrap:wrap;gap:var(--ig-space-1) var(--ig-space-3);list-style:none;margin:var(--ig-space-3) 0 0;padding:0}
.ig-stappen li{display:inline-flex;align-items:center;gap:var(--ig-space-1);font-size:var(--ig-type-sm);color:var(--ig-text-muted);min-height:2.75rem}
.ig-stappen li.actief{color:var(--ig-text);font-weight:600}
.ig-stap__nr{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--ig-radius-pill);border:1px solid var(--ig-line-strong);font-size:var(--ig-type-xs);font-weight:700}
.ig-stappen li.actief .ig-stap__nr{background:var(--ig-accent);border-color:var(--ig-accent);color:var(--ig-ink)}
.ig-stappen li.klaar .ig-stap__nr{background:var(--ig-ink);border-color:var(--ig-ink);color:var(--ig-bg)}
.ig-rooster-2-1{display:grid;grid-template-columns:1fr;gap:var(--ig-space-3);margin-top:var(--ig-space-3)}
@media (min-width:1024px){.ig-rooster-2-1{grid-template-columns:2fr 1fr}}
.ig-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ig-space-1);min-height:9rem;padding:var(--ig-space-3);border:2px dashed var(--ig-line-strong);border-radius:var(--ig-radius-lg);text-align:center;cursor:pointer;transition:border-color var(--ig-t-fast),background var(--ig-t-fast)}
.ig-dropzone:hover,.ig-dropzone.over{border-color:var(--ig-accent);background:var(--ig-surface)}
.ig-dropzone input{position:absolute;width:1px;height:1px;opacity:0}
.ig-dropzone:focus-within{outline:2px solid var(--ig-accent);outline-offset:2px}
.ig-dropzone__naam{font-weight:600}
.ig-tabel--mapping td{height:3.5rem}
.ig-dubbel__paar{display:grid;grid-template-columns:1fr;gap:var(--ig-space-2)}
@media (min-width:640px){.ig-dubbel__paar{grid-template-columns:1fr 1fr}}
.ig-dubbel__kant{display:flex;flex-direction:column;gap:var(--ig-space-1);padding:var(--ig-space-2);border-radius:var(--ig-radius);background:var(--ig-surface)}

/* ---------- segmentbouwer ---------- */
.ig-groep{display:flex;flex-direction:column;gap:var(--ig-space-1);padding:var(--ig-space-1) 0 var(--ig-space-1) var(--ig-space-2);border-left:3px solid var(--ig-line-strong)}
.ig-groep--not{border-left-color:var(--ig-danger)}
.ig-groep__kop{display:flex;flex-wrap:wrap;gap:var(--ig-space-1);align-items:center}
.ig-groep__items{display:flex;flex-direction:column;gap:var(--ig-space-1)}
.ig-groep__items > .ig-groep{margin-left:var(--ig-space-1)}
.ig-voorwaarde{display:flex;flex-wrap:wrap;gap:var(--ig-space-1);align-items:center;padding:var(--ig-space-half) 0}
.ig-voorwaarde .ig-input--klein{min-height:2.25rem;width:auto;max-width:12rem;font-size:var(--ig-type-sm)}
.ig-groep__leeg{margin:0}
.ig-rooster-2-1 > *{min-width:0}
.ig-tabel--mapping select{min-width:13rem}
.ig-tabelwrap{max-width:100%}

/* ---------- doelgroepen ---------- */
.ig-rooster-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:var(--ig-space-2)}
.ig-kaart--link{display:flex;flex-direction:column;gap:var(--ig-space-1);text-decoration:none;color:inherit;transition:transform var(--ig-t-base) var(--ig-ease),box-shadow var(--ig-t-base)}
.ig-kaart--link:hover{transform:translateY(-2px);box-shadow:var(--ig-shadow)}
.ig-regels-2{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ig-tabel--compact td{height:2.75rem}
.ig-tabel__groep td{height:2.25rem;font-size:var(--ig-type-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ig-text-muted);background:var(--ig-surface)}

.ig-meertags{margin-top:var(--ig-space-1)}
.ig-meertags > summary{cursor:pointer;font-size:var(--ig-type-sm);color:var(--ig-text-muted);min-height:2.25rem;display:flex;align-items:center}
.ig-meertags[open] > summary{margin-bottom:var(--ig-space-1)}
.ig-meertags > div{max-height:14rem;overflow-y:auto}

/* ---------- dashboard ---------- */
.ig-rooster-grafieken{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:var(--ig-space-2)}
.ig-grafiek{margin:0;display:flex;flex-direction:column;gap:var(--ig-space-1)}
.ig-balken{display:flex;flex-direction:column;gap:var(--ig-space-half)}
.ig-balk{display:grid;grid-template-columns:minmax(6rem,38%) 1fr auto;align-items:center;gap:var(--ig-space-1);min-height:2rem;text-decoration:none;color:var(--ig-text);font-size:var(--ig-type-sm);border-radius:var(--ig-radius);padding:0 var(--ig-space-half)}
.ig-balk:hover{background:var(--ig-surface)}
.ig-balk__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-balk__spoor{display:block;height:.75rem;border-radius:var(--ig-radius-pill);background:var(--ig-surface-2);overflow:hidden}
.ig-balk__vulling{display:block;height:100%;width:var(--p);background:var(--ig-accent);border-radius:var(--ig-radius-pill);transition:width var(--ig-t-base) var(--ig-ease)}
.ig-balk__n{min-width:2.5rem;text-align:right;color:var(--ig-text-muted)}
@media (prefers-reduced-motion:reduce){.ig-balk__vulling{transition:none}}
.ig-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.ig-kpi{color:inherit}

/* ---------- merk en assets ---------- */
.ig-rooster-merk{display:grid;grid-template-columns:1fr;gap:var(--ig-space-2);margin-top:var(--ig-space-4)}
@media (min-width:640px){.ig-rooster-merk{grid-template-columns:repeat(3,1fr)}}
.ig-kleuren{display:flex;flex-direction:column;gap:var(--ig-space-2);margin-top:var(--ig-space-1)}
.ig-kleur{display:flex;gap:var(--ig-space-2);align-items:flex-start;font-size:var(--ig-type-sm)}
.ig-kleur__staal{flex:0 0 auto;width:3rem;height:3rem;border-radius:var(--ig-radius);border:1px solid var(--ig-line)}
.ig-regels{margin:var(--ig-space-1) 0 0;padding-left:1.1rem;font-size:var(--ig-type-sm);line-height:1.6}
.ig-galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--ig-space-2);margin-top:var(--ig-space-3)}
.ig-asset{margin:0;display:flex;flex-direction:column;gap:var(--ig-space-1);padding:var(--ig-space-1);border-radius:var(--ig-radius-lg);background:var(--ig-surface)}
.ig-asset__beeld{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:var(--ig-radius);background:var(--ig-bg);overflow:hidden}
.ig-asset__beeld img{width:100%;height:100%;object-fit:contain}
.ig-asset__type{font-size:var(--ig-type-sm);font-weight:700;letter-spacing:.08em;color:var(--ig-text-muted)}
.ig-asset figcaption{display:flex;flex-direction:column;gap:var(--ig-space-half)}
.ig-input--klein{min-height:2.25rem;font-size:var(--ig-type-sm)}
.ig-rooster-grafieken{align-items:start}

[hidden]{display:none !important}  /* componenten zetten display:flex of grid; dat wint anders van het hidden-attribuut */

/* ---------- videofiche ---------- */
.ig-anatomie{list-style:none;margin:var(--ig-space-1) 0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-half)}
.ig-anatomie li{display:grid;grid-template-columns:6rem 1fr;gap:var(--ig-space-1);font-size:var(--ig-type-sm);padding:var(--ig-space-half) 0;border-top:1px solid var(--ig-line)}
.ig-script{font-family:var(--ig-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);font-size:var(--ig-type-sm);line-height:1.7}
.ig-gatelagen{display:flex;flex-direction:column;gap:var(--ig-space-1);margin-top:var(--ig-space-1)}
.ig-gatelaag{display:flex;flex-wrap:wrap;gap:var(--ig-space-1);align-items:center;justify-content:space-between;padding:var(--ig-space-1) 0;border-top:1px solid rgba(255,255,255,.15)}
.ig-kaart--wit .ig-gatelaag,.ig-kaart:not(.ig-kaart--zwart) .ig-gatelaag{border-top-color:var(--ig-line)}
.ig-preflight{list-style:none;margin:var(--ig-space-1) 0 0;padding:0;counter-reset:pf}
.ig-preflight li{padding:var(--ig-space-1) 0;border-top:1px solid var(--ig-line);font-size:var(--ig-type-sm)}
.ig-preflight label{display:grid;grid-template-columns:1.5rem 1fr;gap:var(--ig-space-1);align-items:baseline;cursor:pointer;min-height:2.25rem}
.ig-preflight input{width:1.25rem;height:1.25rem}
.ig-preflight li > span{display:block;margin-left:2.5rem}  /* de faalactie onder de regel, niet ernaast: de middenkolom is smal */
.ig-voorraad{display:flex;flex-wrap:wrap;gap:var(--ig-space-2);align-items:center;justify-content:space-between;margin-top:var(--ig-space-3);padding:var(--ig-phi-3);border-radius:var(--ig-radius-lg);background:var(--ig-surface)}
.ig-voorraad--tekort{background:var(--ig-ink);color:var(--ig-bg)}
.ig-voorraad--tekort .ig-muted,.ig-voorraad--tekort .ig-label{color:rgba(255,255,255,.7)}
.ig-voorraadbalk{display:block;flex:1;min-width:10rem;max-width:22rem;height:.75rem;border-radius:var(--ig-radius-pill);background:var(--ig-surface-2);overflow:hidden}
.ig-voorraad--tekort .ig-voorraadbalk{background:rgba(255,255,255,.2)}
.ig-voorraadbalk span{display:block;height:100%;width:var(--p);background:var(--ig-accent);border-radius:var(--ig-radius-pill)}

/* ---------- posts, media en de assetkiezer ---------- */
.ig-minithumb{width:3rem;height:3rem;object-fit:cover;border-radius:var(--ig-radius);display:block}
.ig-medialijst{display:flex;flex-direction:column;gap:var(--ig-space-1);margin-top:var(--ig-space-1)}
.ig-media{margin:0;display:flex;gap:var(--ig-space-1);align-items:center;padding:var(--ig-space-half);border-radius:var(--ig-radius);background:var(--ig-surface)}
.ig-media img{width:4rem;height:4rem;object-fit:cover;border-radius:var(--ig-radius);flex:0 0 auto}
.ig-media figcaption{display:flex;gap:var(--ig-space-half);align-items:center;justify-content:space-between;flex:1;min-width:0}
.ig-dialoog--breed{width:min(56rem,100vw)}
.ig-pickerraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:var(--ig-space-1);max-height:22rem;overflow-y:auto;padding:var(--ig-space-half)}
.ig-pickeritem{display:flex;flex-direction:column;gap:var(--ig-space-half);align-items:center;padding:var(--ig-space-half);border:2px solid transparent;border-radius:var(--ig-radius);background:var(--ig-surface);text-align:center;cursor:pointer}
.ig-pickeritem img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--ig-bg);border-radius:var(--ig-radius)}
.ig-pickeritem span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-pickeritem[aria-selected=true]{border-color:var(--ig-accent);background:var(--ig-bg)}
.ig-fout{color:var(--ig-danger)}
[role=tab][aria-selected=true]{background:var(--ig-ink);color:var(--ig-bg);border-color:var(--ig-ink)}

/* ---------- agenda ---------- */
.ig-week{margin-top:var(--ig-space-4)}
.ig-weekkop{font-size:var(--ig-type-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ig-text-muted);margin:0 0 var(--ig-space-1);padding-bottom:var(--ig-space-half);border-bottom:1px solid var(--ig-line-strong)}
.ig-dag{padding:var(--ig-space-1) 0;border-bottom:1px solid var(--ig-line)}
.ig-dag.vandaag{background:var(--ig-surface);border-radius:var(--ig-radius);padding-left:var(--ig-space-1);padding-right:var(--ig-space-1)}
.ig-dagkop{margin:0 0 var(--ig-space-half);font-size:var(--ig-type-sm);font-weight:600}
/* dagen tot de publicatie (founder 2026-09-29): een pil naast de dag, groen gevuld op de dag zelf */
.ig-dagentot{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:var(--ig-radius-pill);background:var(--ig-accent-soft);color:var(--ig-ink);font-size:var(--ig-type-xs);font-weight:700;letter-spacing:.02em;line-height:1.2;white-space:nowrap;vertical-align:middle}
.ig-dagentot .ig-ico{width:.9rem;height:.9rem;flex:none}
.ig-dagentot.is-vandaag{background:var(--ig-accent)}
.ig-dagentot.is-voorbij{background:var(--ig-surface-2);color:var(--ig-text-faint);font-weight:600}
.ig-maanddag__nr .ig-dagentot{padding:.1rem .4rem;font-size:.6rem}
/* de voorvertoning links (founder 2026-09-29): klik op een item, links de voorvertoning, de details en de knop; vast bij het scrollen.
   Twee staten: vanaf 1024px een kolom naast de agenda (sticky), smaller een onderblad over de pagina. */
main.ig-wrap:has(.ig-agendasplit.is-open){max-width:min(100rem,calc(100% - 2 * var(--ig-gutter)))}
.ig-vv{background:var(--ig-bg);border:1px solid var(--ig-line);border-radius:var(--ig-radius-lg);padding:var(--ig-space-2) var(--ig-space-2) 0;animation:ig-vv-in var(--ig-t-base) var(--ig-ease)}
.ig-vv[hidden]{display:none}
.ig-vv[aria-busy=true] [data-vv-inhoud]{opacity:.45;transition:opacity var(--ig-t-fast)}
@keyframes ig-vv-in{from{opacity:0;transform:translateX(-.75rem)}to{opacity:1;transform:none}}
.ig-vv__kop{display:flex;align-items:center;justify-content:space-between;gap:var(--ig-space-1)}
.ig-vv__titel{margin:var(--ig-space-1) 0 var(--ig-space-2);font-size:var(--ig-type-lead);font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.ig-vv__beeld .ig-vb{padding:var(--ig-space-1)}
.ig-vv__beeld .ig-vb__kaart{max-width:18rem}
.ig-vv__beeld .ig-vb + .ig-vb{margin-top:var(--ig-space-1)}
.ig-vv__beeld .gk-brief{height:30rem}
.ig-vv__brief{overflow:hidden;border:1px solid var(--ig-line);border-radius:var(--ig-radius);background:#F5F6F5}
.ig-vv__brief .gk-brief{display:block;max-width:none;border:0;border-radius:0;transform-origin:0 0}
.ig-vv__reel{display:block;width:100%;max-width:12.5rem;aspect-ratio:9/16;border-radius:.75rem;background:#111;object-fit:cover}
.ig-vv__speler{display:block;width:100%;max-width:19rem;aspect-ratio:9/18.4;border:0;border-radius:.75rem;background:#0d0f0e}
.ig-vv__reel--leeg{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--ig-space-1);padding:var(--ig-space-2);color:#fff;background:linear-gradient(165deg,#26302c 0%,#000 70%)}
.ig-vv__reel--leeg p{margin:0;font-size:.95rem;font-weight:700;line-height:1.3}
.ig-vv__reel--leeg small{color:rgba(255,255,255,.7);font-size:var(--ig-type-xs)}
.ig-vv__bijschrift{margin:var(--ig-space-1) 0 0;max-width:18rem;font-size:var(--ig-type-sm);line-height:1.4;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
/* een advertentie zoals op Meta en LinkedIn (founder 2026-09-29: geen Google-zoekadvertentie meer als voorvertoning) */
.ig-vv__adbalk{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;background:#F0F2F5;font-size:.8rem}
.ig-vv__adbalk span:first-child{display:flex;flex-direction:column;min-width:0}
.ig-vv__adbalk small{color:#65676B;text-transform:uppercase;font-size:.65rem}
.ig-vv__adbalk b{font-weight:600;line-height:1.25}
.ig-vv__adknop{flex:none;padding:.35rem .7rem;border-radius:.375rem;background:#E4E6EB;font-weight:600;white-space:nowrap}
.ig-vv__adverhaal{width:55%;aspect-ratio:9/16;object-fit:cover;border-radius:.75rem;display:block}
.ig-adbeeld{gap:.4rem;align-items:center}
.ig-adbeeld img{display:block;height:3.75rem;border-radius:.3rem;object-fit:cover}
.ig-adbeeld .ig-adbeeld__feed{width:3rem}.ig-adbeeld .ig-adbeeld__verhaal{width:2.1rem}
.ig-vv__ad{width:100%;display:grid;gap:.3rem;padding:var(--ig-space-2);background:#fff;border-radius:.5rem;box-shadow:0 1px 2px rgba(0,0,0,.15);font-family:Arial,Helvetica,sans-serif}
.ig-vv__ad small{color:#202124;font-size:.75rem}
.ig-vv__ad b{color:#1a0dab;font-size:1.1rem;font-weight:400;line-height:1.3}
.ig-vv__ad p{margin:0;color:#4d5156;font-size:.85rem;line-height:1.45;white-space:pre-wrap}
.ig-vv__details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ig-space-1) var(--ig-space-2);align-items:center;margin:var(--ig-space-2) 0;font-size:var(--ig-type-sm)}
.ig-vv__details dt{color:var(--ig-text-muted);font-weight:600}
.ig-vv__details dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ig-vv__details .ig-pill .ig-ico{width:.9rem;height:.9rem;flex:none}
.ig-vv__stappen{margin:0 0 var(--ig-space-2);padding:var(--ig-space-1) var(--ig-space-2);border-radius:var(--ig-radius);background:var(--ig-surface)}
/* de knop sluit het paneel af en blijft onderaan zichtbaar, ook als de voorvertoning langer is dan het scherm */
.ig-vv__voet{position:sticky;bottom:0;margin:0 calc(-1 * var(--ig-space-2));padding:var(--ig-space-3) var(--ig-space-2) var(--ig-space-2);background:linear-gradient(to bottom,rgba(255,255,255,0),var(--ig-bg) 40%)}
.ig-vv__open{display:flex;justify-content:center;gap:var(--ig-space-1);width:100%}
.ig-vv__open .ig-ico{width:1.1rem;height:1.1rem}
.ig-agendasplit .ig-agendarij[data-soort],.ig-agendasplit .ig-bordkaart[data-soort],.ig-agendasplit .ig-rij[data-soort]{cursor:pointer}
.ig-agendasplit li.is-gekozen{box-shadow:0 0 0 2px var(--ig-ink)}
/* met het paneel open is de lijst smaller dan het scherm: de rijen van 'nog te plannen' nemen dan hun compacte stand (zelfde als onder 1024px) */
.ig-agendasplit__lijst{min-width:0;container-type:inline-size}
@container (max-width:56rem){
  .ig-rij{grid-template-columns:2rem auto auto minmax(0,1fr) 2.75rem;grid-template-areas:"greep rang nr formaat menu" "greep titel titel titel titel" "greep stem status dienst dienst";height:auto;padding:var(--ig-space-1) 0;row-gap:var(--ig-space-1);column-gap:var(--ig-space-1)}
  .ig-rij .ig-greep{grid-area:greep;align-self:start}
  .ig-rij .ig-rang{grid-area:rang}
  .ig-rij .ig-nr{grid-area:nr;align-self:center}
  .ig-rij .ig-titel{grid-area:titel}
  .ig-rij .ig-titel a{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
  .ig-rij .ig-stem{grid-area:stem}
  .ig-rij .ig-status{grid-area:status}
  .ig-rij .ig-dienst{grid-area:dienst;justify-self:end;max-width:100%}
  .ig-rij .ig-menu{grid-area:menu;justify-self:end}
  .ig-rij .ig-formaat{grid-area:formaat;justify-self:start;max-width:100%;overflow:hidden}
}
@media (min-width:1024px){
  .ig-agendasplit.is-open{display:grid;grid-template-columns:minmax(20rem,23rem) minmax(0,1fr);gap:var(--ig-space-3);align-items:start}
  /* een nieuwsbrief leest pas op ware grootte: het paneel groeit tot de 600px van de brief, de lijst houdt minstens 24rem */
  .ig-agendasplit.is-open.is-breed{grid-template-columns:minmax(20rem,40rem) minmax(24rem,1fr)}
  .ig-agendasplit.is-open .ig-vv{position:sticky;top:calc(var(--vv-top,6.5rem) + var(--ig-space-2));margin-top:var(--ig-space-3);max-height:calc(100vh - var(--vv-top,6.5rem) - var(--ig-space-4));overflow-y:auto;overscroll-behavior:contain}
}
@media (max-width:1023px){
  .ig-vv{position:fixed;left:0;right:0;bottom:0;z-index:72;max-height:85vh;overflow-y:auto;overscroll-behavior:contain;border-radius:var(--ig-radius-lg) var(--ig-radius-lg) 0 0;box-shadow:0 0 0 100vmax rgba(0,0,0,.35),0 -10px 40px rgba(0,0,0,.25);animation-name:ig-vv-op}
  .ig-vv__voet{padding-bottom:calc(var(--ig-space-2) + env(safe-area-inset-bottom))}
  @keyframes ig-vv-op{from{transform:translateY(1.5rem);opacity:0}to{transform:none;opacity:1}}
}
.ig-dagrijen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-half);min-height:2.5rem}
.ig-dagrijen.over{outline:2px dashed var(--ig-accent);outline-offset:2px;border-radius:var(--ig-radius)}
.ig-agendarij{display:flex;flex-wrap:wrap;gap:var(--ig-space-1);align-items:center;min-height:4rem;padding:var(--ig-space-half) var(--ig-space-1);border-radius:var(--ig-radius);background:var(--ig-bg);border:1px solid var(--ig-line)}
.ig-agendarij.sleept{opacity:.5}
.ig-agendarij:focus-visible,.ig-bordkaart:focus-visible{outline:2px solid var(--ig-accent);outline-offset:2px}
.ig-agendarij.nieuw,.ig-bordkaart.nieuw{animation:ig-verschijn var(--ig-t-slow) var(--ig-ease)}
.ig-agendarij.plaats-boven{box-shadow:0 -3px 0 var(--ig-accent)}
.ig-agendarij.plaats-onder{box-shadow:0 3px 0 var(--ig-accent)}
.ig-agendarij.is-af{background:var(--ig-surface);border-color:transparent}
.ig-agendarij.is-af .ig-agendarij__titel{color:var(--ig-text-muted)}
.ig-afvink{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;border:0;background:transparent;cursor:pointer;padding:0;flex:none}
.ig-afvink__ring{position:absolute;inset:.125rem;border-radius:50%;background:conic-gradient(var(--ig-ink) var(--p),var(--ig-line) 0)}
.ig-afvink__ring::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ig-bg)}
.ig-afvink__tekst{position:relative;font-size:.625rem;font-weight:700;color:var(--ig-text)}
.ig-afvink.is-af .ig-afvink__ring{background:var(--ig-accent)}
.ig-afvink.is-af .ig-afvink__ring::after{background:var(--ig-accent)}
.ig-afvink.is-af .ig-afvink__tekst{color:var(--ig-ink);font-size:.875rem}
/* af = een echt vinkje in de ronde, geen letter (founder 2026-09-30: "G verander naar een vinkje wanneer gepubliceerd is");
   de kleur volgt de ronde: groen op zwart in een goedgekeurde rij, zwart op groen elders */
.ig-afvink.is-af .ig-afvink__tekst{display:block;width:1rem;height:1rem;font-size:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* goedgekeurd: een G in een zwarte cirkel (leesbaar op het volle groen van de rij); bij de bestuurders: de telling in zwart op geel */
.ig-afvink.is-goedgekeurd .ig-afvink__ring,.ig-afvink.is-goedgekeurd .ig-afvink__ring::after{background:var(--ig-ink)}
.ig-afvink.is-goedgekeurd .ig-afvink__tekst{color:var(--ig-accent);font-size:.875rem;font-weight:800}
.is-goedgekeurd .ig-afvink.is-af .ig-afvink__ring,.is-goedgekeurd .ig-afvink.is-af .ig-afvink__ring::after{background:var(--ig-ink)}
.is-goedgekeurd .ig-afvink.is-af .ig-afvink__tekst{color:var(--ig-accent)}
.ig-afvink.is-bij-bestuurders .ig-afvink__ring{background:conic-gradient(var(--ig-ink) var(--p),rgba(0,0,0,.18) 0)}
.ig-afvink.is-bij-bestuurders .ig-afvink__ring::after{background:var(--ig-vol,#FFD43B)}
.ig-afvink.is-opmerking .ig-afvink__ring{background:conic-gradient(var(--ig-ink) var(--p),rgba(0,0,0,.18) 0)}
.ig-afvink.is-opmerking .ig-afvink__ring::after{background:var(--ig-vol,#7DB0FF)}
.ig-afvink[aria-expanded=true] .ig-afvink__ring{box-shadow:0 0 0 2px var(--ig-bg),0 0 0 3px var(--ig-ink)}
.ig-afvink:hover .ig-afvink__ring{filter:brightness(.92)}
.ig-substappen{flex-basis:100%;padding:var(--ig-space-1) 0 var(--ig-space-half) 2.5rem;display:flex;flex-direction:column;gap:var(--ig-space-half);border-top:1px dashed var(--ig-line);margin-top:var(--ig-space-half)}
.ig-substappen .ig-knop{align-self:flex-start}
/* founder 2026-09-29 ("tags verkleinen of we komen dit tegen"): de tags van een agendarij zijn klein zoals in de dichte tabellen en staan
   in een strook die mee krimpt; zo slaat een rij niet om naar een tweede regel en blijven de acties rechts op dezelfde plaats */
/* de strook krijgt de ruimte die de titel laat (basis 0), dus de rij slaat niet om op de breedte van de tags; 'safe' houdt de eerste tag
   (de vorm) zichtbaar als de strook te smal is */
.ig-agendarij__tags{display:flex;align-items:center;justify-content:safe flex-end;gap:.25rem;flex:1 1 0;min-width:0;overflow:hidden;flex-wrap:nowrap}
.ig-agendarij:has(> .ig-agendarij__tags) > .ig-agendarij__titel{flex:0 1 auto;max-width:55%}  /* een lange titel eindigt op ... in plaats van de rij te laten omslaan */
.ig-agendarij__tags .ig-tag,.ig-agendarij__tags .ig-pill,.ig-bordkaart .ig-tag,.ig-bordkaart .ig-pill{font-size:var(--ig-type-xs);min-height:1.25rem;padding:.125rem .45rem;gap:.25rem;white-space:nowrap;flex:none}
.ig-agendarij__tags .ig-cluster,.ig-agendarij__tags .ig-gk-stand{gap:.25rem;flex-wrap:nowrap;flex:none}
/* de live-pil staat vooraan: op een smalle rij vallen de labels van rechts weg, nooit wat al buiten staat */
.ig-agendarij__tags > .ig-pill--live{order:-1}
.ig-agendarij__titel{flex:1;min-width:8rem;text-decoration:none;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-tag--soort{background:var(--ig-ink);color:var(--ig-bg);border-color:var(--ig-ink)}
.ig-greep{cursor:grab;color:var(--ig-text-muted);letter-spacing:-.15em;font-weight:700;touch-action:none;padding:0 var(--ig-space-half);min-width:1.25rem}
.ig-greep--uit{visibility:hidden}
.ig-bordwrap{overflow-x:auto;margin-top:var(--ig-space-3);padding-bottom:var(--ig-space-2)}
.ig-bord{display:flex;gap:var(--ig-space-2);min-width:min-content}
.ig-bordkolom{flex:0 0 17rem;display:flex;flex-direction:column;gap:var(--ig-space-half);padding:var(--ig-space-1);border-radius:var(--ig-radius-lg);background:var(--ig-surface)}
.ig-bordkolom--voorraad{background:var(--ig-ink);color:var(--ig-bg)}
.ig-bordkolom--voorraad .ig-muted{color:rgba(255,255,255,.7)}
.ig-bordkolom.vandaag{outline:2px solid var(--ig-accent)}
.ig-bordkop{margin:0;font-size:var(--ig-type-sm);font-weight:700;display:flex;gap:var(--ig-space-half);align-items:center;justify-content:space-between}
.ig-baanlabel{margin:var(--ig-space-1) 0 0}
.ig-bordkolom--voorraad .ig-baanlabel,.ig-bordkolom--voorraad .ig-label{color:rgba(255,255,255,.7)}
.ig-bordbaan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-half);min-height:3rem;border-radius:var(--ig-radius)}
.ig-bordbaan.over{outline:2px dashed var(--ig-accent);outline-offset:2px}
.ig-bordkaart{display:flex;flex-direction:column;gap:var(--ig-space-half);padding:var(--ig-space-1);border-radius:var(--ig-radius);background:var(--ig-bg);color:var(--ig-text);border:1px solid var(--ig-line);cursor:grab}
.ig-bordkaart a{text-decoration:none;font-weight:500;font-size:var(--ig-type-sm)}
.ig-bordkaart.sleept{opacity:.5}
.ig-bordkaart.plaats-boven{box-shadow:0 -3px 0 var(--ig-accent)}
.ig-bordkaart.plaats-onder{box-shadow:0 3px 0 var(--ig-accent)}

/* ---------- nieuwsbrief ---------- */
.ig-checklist{list-style:none;margin:var(--ig-space-1) 0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-half);font-size:var(--ig-type-sm)}
.ig-checklist li{display:grid;grid-template-columns:1.25rem 1fr;gap:var(--ig-space-1);align-items:baseline}
.ig-checklist li span:first-child{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:var(--ig-radius-pill);font-size:var(--ig-type-xs);font-weight:700;text-transform:uppercase}
.ig-checklist li.ok span:first-child{background:var(--ig-accent);color:var(--ig-ink)}
.ig-checklist li.open span:first-child{background:var(--ig-surface-2);color:var(--ig-text-muted)}
.ig-checklist li.open{color:var(--ig-text-muted)}
.ig-preview{width:100%;height:26rem;border:1px solid var(--ig-line);border-radius:var(--ig-radius);background:#fff;margin-top:var(--ig-space-1)}
/* nieuwsbrief: het voorbeeld van de mail staat altijd rechts en blijft in beeld tijdens het schrijven */
#ig-nieuwsbrief.ig-werkblad{grid-template-columns:minmax(14rem,1fr) minmax(0,1.5fr) minmax(20rem,1.3fr)}
.ig-preview-kaart{position:sticky;top:var(--ig-space-3)}
/* alleen het voorbeeld staat in die kolom (een sticky kaart schuift over wat eronder staat); de kolom rekt mee met de rij zodat hij kan blijven staan */
#ig-nieuwsbrief .ig-werkblad__tools--preview{align-self:stretch}
/* de mail is 600 px breed; het vak schaalt hem naar de kolombreedte (nieuwsbrief.js zet --ig-schaal) */
.ig-preview-vak{--ig-schaal:1;overflow:hidden;height:calc(100vh - 10rem);min-height:24rem;border:1px solid var(--ig-line);border-radius:var(--ig-radius);background:#F5F6F5;margin-top:var(--ig-space-1)}
.ig-preview-kaart .ig-preview{width:640px;height:calc((100vh - 10rem) / var(--ig-schaal));min-height:calc(24rem / var(--ig-schaal));margin:0;border:0;border-radius:0;transform:scale(var(--ig-schaal));transform-origin:0 0}
/* smaller dan 1100 px: links alles onder elkaar (zoals op de gsm), rechts het voorbeeld dat blijft staan */
@media (max-width:1100px){#ig-nieuwsbrief.ig-werkblad{grid-template-columns:minmax(0,1fr) minmax(18rem,1fr);grid-template-areas:"zij preview" "hoofd preview"}#ig-nieuwsbrief .ig-werkblad__zij{grid-area:zij}#ig-nieuwsbrief .ig-werkblad__hoofd{grid-area:hoofd}#ig-nieuwsbrief .ig-werkblad__tools--preview{grid-area:preview}.ig-preview-vak{height:32rem}.ig-preview-kaart .ig-preview{height:calc(32rem / var(--ig-schaal))}}
@media (max-width:700px){#ig-nieuwsbrief.ig-werkblad{grid-template-columns:minmax(0,1fr);grid-template-areas:none}#ig-nieuwsbrief.ig-werkblad > *{grid-area:auto}}
.ig-kaart--zwart .ig-kv dt,.ig-kaart--zwart .ig-kv dd{color:rgba(255,255,255,.85)}

/* ---------- home ---------- */
.ig-rooster-home{display:grid;grid-template-columns:1fr;gap:var(--ig-space-2);margin-top:var(--ig-space-4)}
.ig-rooster-home > *{min-width:0}  /* zonder dit groeit een rastercel mee met zijn langste regel */
@media (min-width:1024px){.ig-rooster-home{grid-template-columns:3fr 2fr}}
.ig-aandacht{list-style:none;margin:var(--ig-space-1) 0 0;padding:0;display:flex;flex-direction:column}
.ig-aandacht li a{display:grid;grid-template-columns:.75rem 1fr;gap:var(--ig-space-1);align-items:baseline;padding:var(--ig-space-1) 0;border-top:1px solid var(--ig-line);text-decoration:none;color:var(--ig-text);font-size:var(--ig-type-sm);min-height:2.75rem}
.ig-aandacht li a:hover{color:var(--ig-text);text-decoration:underline}
.ig-aandacht li a > span:last-child{min-width:0;overflow-wrap:anywhere}
.ig-aandacht__stip{width:.6rem;height:.6rem;border-radius:50%;display:inline-block}
.ig-aandacht li.hoog .ig-aandacht__stip{background:var(--ig-danger)}
.ig-aandacht li.midden .ig-aandacht__stip{background:var(--ig-warn, #e8a33d)}
.ig-aandacht li.laag .ig-aandacht__stip{background:var(--ig-line-strong)}
.ig-aandacht li.ig-leeg{color:var(--ig-text-muted);padding:var(--ig-space-1) 0;font-size:var(--ig-type-sm)}

/* ---------- meld-knop ---------- */
.ig-meld-knop{position:fixed;right:var(--ig-space-3);bottom:var(--ig-space-3);z-index:70;box-shadow:var(--ig-shadow-lg)}
.ig-meld{position:fixed;z-index:75;background:var(--ig-bg);border:1px solid var(--ig-line);box-shadow:var(--ig-shadow-lg);display:none;flex-direction:column;gap:var(--ig-space-2);padding:var(--ig-phi-3);max-height:min(80vh,40rem);overflow:auto}
.ig-meld.open{display:flex;animation:ig-verschijn var(--ig-t-base) var(--ig-ease)}
.ig-meld-lijst li{display:flex;justify-content:space-between;gap:var(--ig-space-1);padding:var(--ig-space-1) 0;border-top:1px solid var(--ig-line);font-size:var(--ig-type-sm)}
.ig-meld-lijst li span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:640px){.ig-meld{right:var(--ig-space-3);bottom:calc(var(--ig-space-3) + 3.5rem);width:24rem;border-radius:var(--ig-radius-lg)}}
@media (max-width:639px){.ig-meld{left:0;right:0;bottom:0;border-radius:var(--ig-radius-lg) var(--ig-radius-lg) 0 0}}

/* ---------- dialoog ---------- */
.ig-dialoog{border:0;padding:0;background:transparent;max-width:none}
.ig-dialoog::backdrop{background:rgba(0,0,0,.4)}
.ig-dialoog > form{background:var(--ig-bg);border-radius:var(--ig-radius-lg);padding:var(--ig-space-4);display:flex;flex-direction:column;gap:var(--ig-space-2);box-shadow:var(--ig-shadow-lg)}
@media (min-width:640px){.ig-dialoog{width:32rem}}
@media (max-width:639px){.ig-dialoog{width:100vw;margin:auto 0 0;max-height:90vh}.ig-dialoog > form{border-radius:var(--ig-radius-lg) var(--ig-radius-lg) 0 0}}

/* ---------- smal scherm: ontworpen staten ---------- */
@media (max-width:1023px){
  .ig-split{grid-template-columns:1fr}
  .ig-split-groen{min-height:46vh}
  .ig-werkblad{grid-template-columns:1fr}
  .ig-rij{grid-template-columns:2rem auto auto minmax(0,1fr) 2.75rem;grid-template-areas:"greep rang nr formaat menu" "greep titel titel titel titel" "greep stem status dienst dienst";height:auto;padding:var(--ig-space-1) 0;row-gap:var(--ig-space-1);column-gap:var(--ig-space-1)}
  .ig-rij .ig-greep{grid-area:greep;align-self:start}
  .ig-rij .ig-rang{grid-area:rang}
  .ig-rij .ig-nr{grid-area:nr;align-self:center}
  .ig-rij .ig-titel{grid-area:titel}
  .ig-rij .ig-titel a{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
  .ig-rij .ig-stem{grid-area:stem}
  .ig-rij .ig-status{grid-area:status}
  .ig-rij .ig-dienst{grid-area:dienst;justify-self:end;max-width:100%}
  .ig-rij .ig-menu{grid-area:menu;justify-self:end}
  .ig-rij .ig-formaat{grid-area:formaat;justify-self:start;max-width:100%;overflow:hidden}  /* geen kolom verdwijnt (VF 6.2): het format schuift naast het nummer */
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- dashboard: verhoudingen en kolommen (reeks 1 = accent, 2 = inkt, 3 = lichtgrijs, 4 = donkergrijs; tekst draagt nooit de reekskleur) ---------- */
.ig-reeks-1{background:var(--ig-accent)}.ig-reeks-2{background:var(--ig-ink)}.ig-reeks-3{background:#B9BEBC}.ig-reeks-4{background:#6E7573}
.ig-kpi__waarde--lang{font-size:var(--ig-type-h2);white-space:nowrap}
.ig-kpi__sub{font-size:var(--ig-type-sm);color:var(--ig-text-muted)}
.ig-dash-sectie{margin-top:var(--ig-space-5)}
.ig-dash-sectie > .ig-sectiekop{margin-bottom:var(--ig-space-2)}
.ig-rooster-verdelingen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:var(--ig-space-2);align-items:stretch}
.ig-rooster-verdelingen > .ig-kaart{justify-content:flex-start}
.ig-rooster-tijd{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:var(--ig-space-2);align-items:start}
.ig-verdeling,.ig-kolommen{display:flex;flex-direction:column;gap:var(--ig-space-1)}
.ig-verdeling figcaption,.ig-kolommen figcaption{display:flex;flex-direction:column;gap:2px}
.ig-verdeling figcaption .ig-label,.ig-kolommen figcaption .ig-label{margin:0}
.ig-verdeling__balk{display:flex;gap:2px;height:1.5rem;border-radius:var(--ig-radius-sm);overflow:hidden;background:var(--ig-surface-2)}
.ig-verdeling__seg{display:flex;align-items:center;justify-content:center;flex:0 0 var(--p);min-width:0;text-decoration:none;transition:filter var(--ig-t-fast)}
a.ig-verdeling__seg:hover{filter:brightness(.92)}
.ig-verdeling__in{font-size:var(--ig-type-xs);font-weight:700;color:var(--ig-ink);white-space:nowrap}
.ig-reeks-2 .ig-verdeling__in,.ig-reeks-4 .ig-verdeling__in{color:var(--ig-bg)}
.ig-legende{display:flex;flex-wrap:wrap;gap:var(--ig-space-half) var(--ig-space-2);font-size:var(--ig-type-sm)}
.ig-legende li{display:inline-flex;align-items:center;gap:var(--ig-space-1)}
.ig-legende__stip{display:inline-block;width:.6rem;height:.6rem;border-radius:2px;flex:none}
.ig-kolommen__vlak{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--ig-space-half);align-items:end;height:11rem;flex:1;margin-bottom:1.5rem;border-bottom:1px solid var(--ig-line)}
.ig-kolom{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;position:relative;border-radius:var(--ig-radius-sm)}
.ig-kolom:hover{background:var(--ig-surface)}
.ig-kolom__staaf{display:flex;flex-direction:column-reverse;gap:2px;width:min(100%,24px);height:calc(var(--h) * .85);border-radius:4px 4px 0 0;overflow:hidden}
.ig-kolom__seg{display:block;flex:0 0 var(--d);width:100%}
.ig-kolom__waarde{font-size:var(--ig-type-xs);color:var(--ig-text-muted);white-space:nowrap;margin-bottom:2px}
.ig-kolom__label{font-size:var(--ig-type-xs);color:var(--ig-text-muted);white-space:nowrap;position:absolute;top:100%;padding-top:var(--ig-space-half);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ig-vergelijk{overflow-x:auto}
.ig-vergelijk .ig-tabel td{height:2.75rem}
.ig-vergelijk .ig-tabel th:not(:first-child),.ig-vergelijk .ig-tabel td:not(:first-child){text-align:right}
.ig-vergelijk .ig-tabel th a{text-decoration:none;border-bottom:1px solid var(--ig-line-strong)}
.ig-vergelijk .ig-tabel th a:hover{border-bottom-color:var(--ig-ink)}
.ig-verhouding{display:inline-block;width:4rem;height:.4rem;border-radius:var(--ig-radius-pill);background:var(--ig-surface-2);vertical-align:middle;margin-left:var(--ig-space-1);overflow:hidden}
.ig-verhouding span{display:block;height:100%;width:var(--p);background:var(--ig-accent)}
@media (max-width:639px){.ig-kolommen__vlak{height:8rem;flex:none}.ig-kolom:nth-child(even) .ig-kolom__label{visibility:hidden}.ig-verhouding{display:none}}

/* ---------- dashboard-lay-out: twaalfkoloms rooster zonder gaten, daaronder kolommen (masonry) voor de rest ---------- */
.ig-kpis--dash{grid-template-columns:repeat(4,1fr);margin-top:var(--ig-space-3)}
.ig-dash{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ig-space-2);margin-top:var(--ig-space-2);align-items:stretch}
.ig-dash > .ig-kaart{min-width:0}
.ig-dash__c4{grid-column:span 4}.ig-dash__c5{grid-column:span 5}.ig-dash__c6{grid-column:span 6}.ig-dash__c7{grid-column:span 7}.ig-dash__c8{grid-column:span 8}
.ig-dash__stapel{justify-content:space-between;gap:var(--ig-space-3)}
.ig-dash-kolommen{columns:3;column-gap:var(--ig-space-2);margin-top:var(--ig-space-2)}
.ig-dash-kolommen > .ig-kaart{break-inside:avoid;margin-bottom:var(--ig-space-2)}
.ig-vergelijk > div{display:flex;flex-direction:column;gap:2px}
.ig-vergelijk > div .ig-label{margin:0}
.ig-vergelijk .ig-tabel td:first-child{white-space:nowrap}
.ig-meertags summary{cursor:pointer;font-size:var(--ig-type-sm);color:var(--ig-text-muted)}
@media (max-width:1023px){.ig-kpis--dash{grid-template-columns:repeat(2,1fr)}.ig-dash__c4,.ig-dash__c5,.ig-dash__c6,.ig-dash__c7,.ig-dash__c8{grid-column:span 12}.ig-dash-kolommen{columns:2}}
@media (max-width:639px){.ig-dash-kolommen{columns:1}.ig-vergelijk .ig-tabel td:first-child{white-space:normal}}
.ig-dash > .ig-kaart > .ig-kolommen{flex:1}
.ig-dash__stapel > .ig-kolommen{flex:1}
.ig-tabel--compact td{height:2.5rem}
.ig-kpi--leeg{border:1px dashed var(--ig-line-strong);background:transparent}
.ig-kpi--leeg .ig-kpi__waarde{font-size:var(--ig-type-h2)}

.ig-kpis--vloei{display:flex;flex-wrap:wrap;margin-top:var(--ig-space-3)}
.ig-kpis--vloei > .ig-kpi{flex:1 1 14rem}
/* Google Ads-dashboard */
.ig-kpis--stil .ig-kpi{opacity:.55}
.ig-dash__c12{grid-column:span 12}
.ig-ads-filter{margin-top:var(--ig-space-3);align-items:flex-end;justify-content:flex-start}
.ig-veld--rij{flex-direction:column;gap:2px}
.ig-veld--rij .ig-input--klein{width:auto}
.ig-aandeel{display:inline-block;width:3.5rem;height:.4rem;vertical-align:middle;background:var(--ig-surface-2);border-radius:var(--ig-radius-pill);overflow:hidden}
.ig-aandeel > span{display:block;height:100%;width:var(--p);background:var(--ig-accent)}
.ig-tabel--num td:not(:first-child),.ig-tabel--num th:not(:first-child){text-align:right}
.ig-tabel--num td:first-child{max-width:18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-vergelijk tfoot td{font-weight:700;border-top:2px solid var(--ig-line-strong)}
.ig-details summary{cursor:pointer;color:var(--ig-text-muted)}
.ig-details[open] summary{margin-bottom:var(--ig-space-1)}
@media (max-width:1023px){.ig-dash__c12{grid-column:span 12}}
@media (max-width:639px){.ig-veld--rij .ig-input--klein{width:100%}.ig-tabel--num td:first-child{max-width:10rem}}

.ig-stempel{margin-top:var(--ig-space-half)}

/* ---------- dashboard: leesbare kaarttitels, sectiekoppen en een sprongbalk ---------- */
.ig-figtitel{display:block;font-size:var(--ig-type-base);font-weight:700;line-height:1.25;letter-spacing:-.012em;color:var(--ig-text);margin-bottom:2px}
.ig-sectietitel{font-size:var(--ig-type-h3);font-weight:800;line-height:1.15;letter-spacing:-.025em;margin:var(--ig-space-5) 0 var(--ig-space-1);scroll-margin-top:calc(var(--ig-topbar) + 3.5rem)}
.ig-sectietitel:first-of-type{margin-top:var(--ig-space-4)}
.ig-sectietitel small{display:block;font-size:var(--ig-type-sm);font-weight:500;letter-spacing:0;color:var(--ig-text-muted);margin-top:2px}
.ig-sectietitel + .ig-dash,.ig-sectietitel + .ig-kpis,.ig-sectietitel + .ig-rooster-verdelingen,.ig-sectietitel + .ig-dash-kolommen{margin-top:var(--ig-space-2)}
.ig-sprong{display:flex;flex-wrap:wrap;gap:var(--ig-space-half);margin-top:var(--ig-space-2)}
.ig-sprong a{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 var(--ig-phi-2);border-radius:var(--ig-radius-pill);background:var(--ig-surface);color:var(--ig-text-muted);font-size:var(--ig-type-sm);font-weight:600;text-decoration:none;transition:background var(--ig-t-fast),color var(--ig-t-fast)}
.ig-sprong a:hover{background:var(--ig-surface-2);color:var(--ig-text)}
@media (max-width:639px){.ig-sectietitel{margin-top:var(--ig-space-4)}}

/* ---------- verandering tegenover de vorige periode: pijl, kleur, oude waarde en periode ---------- */
.ig-verschil{display:inline-flex;align-items:center;gap:.3em;font-size:var(--ig-type-sm);font-weight:700;line-height:1.2;margin-top:var(--ig-space-half)}
.ig-verschil__pijl{font-size:.8em;line-height:1}
.ig-verschil__was{display:block;font-size:var(--ig-type-xs);color:var(--ig-text-muted);margin-top:1px}
.ig-verschil__periode{display:block;font-size:var(--ig-type-xs);color:var(--ig-text-faint)}
.ig-kaart--zwart .ig-verschil__was,.ig-kaart--zwart .ig-verschil__periode{color:rgba(255,255,255,.7)}

/* een tabel in een kaart mag schuiven in plaats van de pagina breder te maken */
.ig-rol{overflow-x:auto;max-width:100%}

/* raster- en flexkinderen mogen krimpen; anders duwt een brede tabel de hele pagina breder */
.ig-kol2 > *,.ig-vergelijk,.ig-rol,.ig-dash-kolommen > .ig-kaart,.ig-rooster-verdelingen > .ig-kaart{min-width:0}

/* Een kaart mag krimpen en houdt een te brede tabel bij zich: die schuift dan in de kaart,
   in plaats van de hele pagina horizontaal te laten schuiven op een telefoon. */
.ig-kaart{min-width:0;overflow-x:auto}

/* ---------- oordeel: een kleurtaal voor goed, stabiel, let op, slecht, te weinig en geen ---------- */
.ig-oordeel--goed{--o:var(--ig-success);--o-bg:var(--ig-success-bg)}
.ig-oordeel--stabiel{--o:var(--ig-text-muted);--o-bg:var(--ig-surface-2)}
.ig-oordeel--let-op{--o:var(--ig-warn);--o-bg:var(--ig-warn-bg)}
.ig-oordeel--slecht{--o:var(--ig-danger);--o-bg:var(--ig-danger-bg)}
.ig-oordeel--te-weinig,.ig-oordeel--geen{--o:var(--ig-text-faint);--o-bg:transparent}
.ig-verschil,.ig-tempo__delta,.ig-impact__index{color:var(--o,var(--ig-text-faint))}
.ig-verschil.ig-oordeel--stabiel,.ig-verschil.ig-oordeel--geen{font-weight:600}
.ig-verschil.ig-oordeel--geen{font-size:var(--ig-type-xs)}
.ig-kpi--oordeel{position:relative;box-shadow:inset 4px 0 0 var(--o);background:color-mix(in srgb,var(--o-bg) 45%,var(--ig-surface))}
.ig-kpi--oordeel.ig-oordeel--te-weinig,.ig-kpi--oordeel.ig-oordeel--geen{box-shadow:inset 4px 0 0 var(--ig-line-strong)}
.ig-kpi__kop{display:flex;align-items:center;justify-content:space-between;gap:var(--ig-space-half)}
.ig-kpi__kop .ig-label{margin:0}
.ig-oordeel__stip{width:.6rem;height:.6rem;border-radius:50%;background:var(--o);flex:none}
.ig-oordeel__delta{display:inline-flex;align-items:center;gap:.3em;color:var(--o);font-weight:800;font-size:var(--ig-type-lead);letter-spacing:-.01em}
.ig-oordeel__delta--leeg{color:var(--ig-text-faint);font-size:var(--ig-type-sm);font-weight:600}
.ig-oordeel__delta-naam{font-size:var(--ig-type-xs);font-weight:600;color:var(--ig-text-muted)}
.ig-oordeel__was{display:flex;flex-direction:column;font-size:var(--ig-type-xs);color:var(--ig-text-muted)}
.ig-oordeel__reden{font-size:var(--ig-type-sm);color:var(--ig-text);line-height:1.35}
.ig-spark{margin:var(--ig-space-half) 0 0;color:var(--o,var(--ig-accent-strong))}
.ig-spark svg{display:block;width:100%;height:2rem;overflow:visible}
.ig-stoplicht{margin-top:var(--ig-space-3);padding:var(--ig-phi-3);border-radius:var(--ig-radius-lg);background:color-mix(in srgb,var(--o-bg) 60%,var(--ig-surface));box-shadow:inset 0 0 0 1px var(--ig-line),inset 6px 0 0 var(--o);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:var(--ig-space-1) var(--ig-space-4);align-items:start}
.ig-stoplicht__score{display:flex;align-items:center;gap:var(--ig-space-1);flex-wrap:wrap}
.ig-stoplicht__stip{width:1rem;height:1rem;border-radius:50%;background:var(--o);flex:none}
.ig-stoplicht__getal{font-weight:800;font-size:var(--ig-type-h2);letter-spacing:-.03em;line-height:1}
.ig-stoplicht__periode{font-size:var(--ig-type-sm);color:var(--ig-text-muted);width:100%}
.ig-stoplicht__kop{grid-column:1;margin:0;font-size:var(--ig-type-lead);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.ig-stoplicht__lijsten{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:var(--ig-space-2)}
.ig-stoplicht__lijsten ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:var(--ig-type-sm)}
.ig-stoplicht__lijsten li .ig-num{font-weight:700;color:var(--o)}
.ig-stoplicht__lijsten > div:first-child li .ig-num{color:var(--ig-success)}
@media (max-width:1023px){.ig-stoplicht{grid-template-columns:1fr}.ig-stoplicht__lijsten{grid-column:1;grid-row:auto}}
@media (max-width:639px){.ig-stoplicht__lijsten{grid-template-columns:1fr}}

/* ---- resultatentab: funnel en impact-index ---- */
.ig-trap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-half)}
.ig-trap__stap{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:var(--ig-space-half) var(--ig-space-2);align-items:center}
.ig-trap__kop{display:flex;flex-direction:column;gap:2px;min-width:0}
.ig-trap__kop .ig-figtitel{margin:0}
.ig-trap__balk{width:var(--w);min-width:3.5rem;height:2.5rem;border-radius:var(--ig-radius);background:var(--ig-accent);color:var(--ig-ink);display:flex;align-items:center;padding:0 var(--ig-space-1);font-weight:800;font-size:var(--ig-type-h3);letter-spacing:-.02em;transition:width var(--ig-t-base) var(--ig-ease)}
.ig-trap__stap > .ig-sm{grid-column:2}
.ig-trap__stap--onbekend .ig-trap__balk{background:var(--ig-surface-2);border:1px dashed var(--ig-line-strong);color:var(--ig-text-muted)}
.ig-trap__over{grid-column:1 / -1;padding-left:calc(14rem + var(--ig-space-2));font-size:var(--ig-type-sm);color:var(--ig-text-muted)}
.ig-trap__over .ig-num{font-weight:700;color:var(--ig-text)}
.ig-trap__over--onbekend .ig-num{color:var(--ig-text-muted);font-style:italic}
.ig-impact th.ig-impact__nul,.ig-impact td.ig-impact__nul{background:color-mix(in srgb,var(--ig-accent) 12%,transparent)}
.ig-impact__index{font-size:var(--ig-type-xs,.75rem)}
@media (max-width:639px){.ig-trap__stap{grid-template-columns:1fr}.ig-trap__stap > .ig-sm{grid-column:1}.ig-trap__over{padding-left:0}}
.ig-dash--res .ig-kolommen__vlak{flex:none;height:11rem}
@media (max-width:639px){.ig-dash--res .ig-kolommen__vlak{height:8rem}}
.ig-tempo th.ig-tempo__nu,.ig-tempo td.ig-tempo__nu{background:color-mix(in srgb,var(--ig-accent) 12%,transparent);font-weight:700}
.ig-tempo__delta{font-size:var(--ig-type-xs);font-weight:700}

/* ---------- periodepillen: dezelfde knoppen op elke dashboardtab ---------- */
.ig-pillen{display:flex;flex-wrap:wrap;gap:var(--ig-space-half);align-items:center;margin-top:var(--ig-space-3)}
.ig-pil{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 var(--ig-phi-2);border-radius:var(--ig-radius-pill);background:var(--ig-surface);color:var(--ig-text-muted);font-size:var(--ig-type-sm);font-weight:600;text-decoration:none;cursor:pointer;list-style:none;transition:background var(--ig-t-fast),color var(--ig-t-fast)}
.ig-pil:hover{background:var(--ig-surface-2);color:var(--ig-text)}
.ig-pil--actief,.ig-pil--actief:hover{background:var(--ig-ink);color:var(--ig-bg)}
.ig-pillen__eigen{display:contents}
.ig-pillen__eigen summary::-webkit-details-marker{display:none}
.ig-pillen__form{flex-basis:100%;align-items:flex-end;margin-top:var(--ig-space-half)}

/* ---------- dynamische laag: laden, enter-animaties (uit bij prefers-reduced-motion) ---------- */
#ig-inhoud.ig-laden{opacity:.55;transition:opacity var(--ig-t-fast)}
.ig-kolom__staaf{transition:height .6s var(--ig-ease)}
.ig-balk__vulling,.ig-verhouding > span,.ig-aandeel > span{transition:width .6s var(--ig-ease)}
.ig-spark polyline{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ig-ease)}
.ig-start .ig-trap__balk{width:0!important}
.ig-start .ig-kolom__staaf{height:0!important}
.ig-start .ig-balk__vulling,.ig-start .ig-verhouding > span,.ig-start .ig-aandeel > span{width:0!important}
.ig-start .ig-spark polyline{stroke-dashoffset:1}
@media (prefers-reduced-motion:reduce){.ig-kolom__staaf,.ig-balk__vulling,.ig-verhouding > span,.ig-aandeel > span,.ig-spark polyline,.ig-trap__balk{transition:none}}

/* ---------- sorteerbare kolomkoppen ---------- */
th[data-sorteer]{cursor:pointer;user-select:none;white-space:nowrap}
table[data-sorteerbaar] > thead th:not([data-geen-sortering]){cursor:pointer;user-select:none}
table[data-sorteerbaar] > thead th:not([data-geen-sortering]):hover,table[data-sorteerbaar] > thead th:focus-visible{color:var(--ig-text)}
th[data-sorteer]:hover,th[data-sorteer]:focus-visible{color:var(--ig-text)}
.ig-sorteer::after{content:"\2195";display:inline-block;margin-left:.3em;opacity:.35;font-size:.85em}
th[aria-sort="ascending"] .ig-sorteer::after{content:"\2191";opacity:1}
th[aria-sort="descending"] .ig-sorteer::after{content:"\2193";opacity:1}

/* ---------- dashboards: geen bijschriften (founder 2026-09-17). Sectie-uitleg, grafiek-uitleg en intro blijven in de HTML voor
   schermlezers en tests, maar worden niet getekend: grafiek, kleur en percentage zijn beeldend genoeg. ---------- */
#ig-inhoud[data-tab^="dash_"] .ig-sectietitel small,
#ig-inhoud[data-tab^="dash_"] figcaption .ig-muted,
#ig-inhoud[data-tab^="dash_"] .ig-sectiekop > div > p.ig-muted,
#ig-inhoud[data-tab^="dash_"] .ig-oordeel__reden,
#ig-inhoud[data-tab^="dash_"] .ig-vergelijk > div > .ig-muted{display:none}
#ig-inhoud[data-tab^="dash_"] .ig-sectietitel{margin-bottom:var(--ig-space-2)}

/* ---------- onvolledig gedekt, voorlopige definitie, aanraakbaar detail (regel 27 vorm b: frame op inhoudshoogte, de overlay scrolt) ---------- */
.ig-oordeel--onvolledig{--o:var(--ig-text-faint);--o-bg:transparent}
.ig-kpi--oordeel.ig-oordeel--onvolledig,.ig-kpi--oordeel.ig-oordeel--te-weinig{box-shadow:inset 4px 0 0 var(--ig-line-strong);border:1px dashed var(--ig-line-strong)}
.ig-kpi--oordeel[role="button"]{cursor:pointer}
.ig-kpi--oordeel[role="button"]:focus-visible{outline:2px solid var(--ig-accent-strong);outline-offset:2px}
.ig-pil--klein{min-height:1.25rem;padding:0 .5em;font-size:var(--ig-type-xs);background:var(--ig-warn-bg);color:var(--ig-warn);vertical-align:middle;margin-left:.4em}
.ig-kaartdetail{border:0;padding:0;background:transparent;max-width:min(36rem,calc(100vw - 2rem));width:100%;margin:auto}
.ig-kaartdetail::backdrop{background:rgba(0,0,0,.45)}
.ig-kaartdetail__frame{position:relative;background:var(--ig-bg);border-radius:var(--ig-radius-lg);padding:var(--ig-phi-3);box-shadow:var(--ig-shadow)}
.ig-kaartdetail__sluit{position:absolute;top:var(--ig-space-1);right:var(--ig-space-1)}
.ig-kaartdetail dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--ig-space-half) var(--ig-space-2);margin:var(--ig-space-2) 0 0;font-size:var(--ig-type-sm)}
.ig-kaartdetail dt{color:var(--ig-text-muted)}
.ig-kaartdetail dd{margin:0}
.ig-kaartdetail__waarde{font-weight:800;font-size:var(--ig-type-h2);letter-spacing:-.03em;line-height:1}
.ig-kaartdetail__oordeel{display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--o)}
.ig-kaartdetail__oordeel::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--o)}

/* ---------- jaren en maandrapport ---------- */
.ig-jaren td.ig-jaren__onvolledig{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--ig-surface-2) 6px 8px);color:var(--ig-text-muted)}
.ig-jaren tr.ig-jaren__kern td{font-weight:700;background:color-mix(in srgb,var(--ig-accent) 8%,transparent)}
.ig-jaren__spark{min-width:9rem}
.ig-jaren__spark .ig-spark{margin:0}
.ig-rapport__stip{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--ig-success);margin-left:.3em;vertical-align:middle}
.ig-rapport__score{display:inline-flex;align-items:center;gap:.4em;font-size:var(--ig-type-sm);font-weight:700;color:var(--o);vertical-align:middle;margin-left:.5em}
.ig-rapport__score .ig-stoplicht__stip{width:.7rem;height:.7rem}
@page{size:A4;margin:14mm 12mm}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff!important;color:#000;font-size:10.5pt}
  .ig-topbar,.ig-subnav,.ig-rapport__acties,.ig-rapport__maanden,.ig-sprong,#ig-toast,#ig-meld-knop,.ig-meld,.ig-kaartdetail,#rap-snapshots,#rap-snapshots + .ig-kaart,.ig-stempel a{display:none!important}
  #ig-inhoud,.ig-wrap{max-width:none;width:100%;padding:0;margin:0}
  .ig-rapport{padding:0}
  .ig-h1{font-size:22pt;margin:0 0 4pt}
  .ig-sectietitel{font-size:14pt;margin:14pt 0 6pt;break-after:avoid;page-break-after:avoid}
  .ig-rapport__sectie{break-before:page;page-break-before:always}
  .ig-kaart,.ig-rapport__blok,.ig-stoplicht{box-shadow:none;border:1px solid #d6d9d8;border-radius:4pt;break-inside:avoid;page-break-inside:avoid;overflow:visible;padding:8pt}
  .ig-dash{display:grid;grid-template-columns:1fr 1fr;gap:8pt}
  .ig-dash > .ig-kaart{grid-column:auto}
  .ig-dash > .ig-dash__c12{grid-column:1 / -1}
  .ig-tabel{font-size:9pt;width:100%}
  .ig-tabel th,.ig-tabel td{padding:3pt 5pt;height:auto}
  .ig-tabel tr{break-inside:avoid;page-break-inside:avoid}
  .ig-tabel thead{display:table-header-group}
  .ig-rol{overflow:visible}
  .ig-kolommen__vlak{height:7rem}
  .ig-stoplicht{grid-template-columns:1fr 2fr}
  .ig-kpis{grid-template-columns:repeat(4,1fr)}
  a{text-decoration:none;color:inherit}
}

/* ---------- verschil als kader met pijl; cellen met twee vaste regels zodat cijfers op gelijke hoogte staan ---------- */
.ig-badge{display:inline-flex;align-items:center;gap:.25em;min-height:1.25rem;padding:0 .45em;border-radius:var(--ig-radius-pill);font-size:var(--ig-type-xs);font-weight:700;line-height:1;color:var(--o);background:color-mix(in srgb,var(--o-bg) 85%,var(--ig-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--o) 35%,transparent);white-space:nowrap}
.ig-badge--leeg{background:transparent;box-shadow:none;min-width:1rem}
.ig-badge.ig-oordeel--stabiel{--o:var(--ig-text-muted);--o-bg:var(--ig-surface-2)}
.ig-cel__w,.ig-cel__d{display:block}
.ig-cel__w{font-weight:600}
.ig-cel__d{margin-top:2px;height:1.25rem;line-height:1.25rem}
.ig-tabel td .ig-cel__w{line-height:1.2}
@media print{.ig-badge{box-shadow:inset 0 0 0 1px var(--o)}}
.ig-jaren .ig-jaren__stuk{background:color-mix(in srgb,var(--ig-surface-2) 60%,transparent);color:var(--ig-text-muted)}
.ig-jaren td.ig-num,.ig-jaren th.ig-num{white-space:nowrap}
.ig-rapport .ig-rapport__blok,.ig-rapport .ig-dash,.ig-rapport .ig-stoplicht{margin-top:var(--ig-space-2)}
.ig-rapport .ig-sectietitel + .ig-rapport__blok,.ig-rapport .ig-sectietitel + .ig-stoplicht{margin-top:var(--ig-space-2)}
.ig-rapport .ig-rapport__blok > .ig-figtitel{margin-bottom:var(--ig-space-1)}
.ig-rapport__kpis{margin-top:var(--ig-space-2)}
@media print{.ig-rapport__kpis{grid-template-columns:repeat(3,1fr);gap:6pt}.ig-rapport__kpis .ig-kpi{padding:6pt;break-inside:avoid}.ig-kpi__waarde{font-size:16pt}}
.ig-kpi__rechts{display:inline-flex;align-items:center;gap:.4em;flex:none}
.ig-kpi__periode{background:var(--ig-surface-2);color:var(--ig-text-muted);margin-left:0;letter-spacing:0;text-transform:none;font-weight:600}
/* meetbaarheid van een metric (Hormozi-laag op Resultaten): gemeten, benadering of onbekend */
.ig-meet{display:inline-flex;align-items:center;min-height:1.25rem;padding:0 .5em;border-radius:var(--ig-radius-pill);font-size:var(--ig-type-xs);font-weight:700;white-space:nowrap}
.ig-meet--gemeten{background:var(--ig-success-bg);color:var(--ig-success)}
.ig-meet--benadering{background:var(--ig-warn-bg);color:var(--ig-warn)}
.ig-meet--onbekend{background:var(--ig-surface-2);color:var(--ig-text-muted)}
.ig-hormozi td:nth-child(2){max-width:18rem;white-space:normal}
.ig-hormozi tr[data-meet="onbekend"] td:first-child{color:var(--ig-text-muted)}
.ig-regels li{margin-bottom:.4em}
.ig-regels li.geldt{color:var(--ig-danger)}
.ig-regels li.geldt-niet{color:var(--ig-text-muted)}
.ig-regels li.gedaan{text-decoration:line-through;color:var(--ig-text-muted)}
/* twee reeksen naast elkaar per periode (jaarrapport: dit jaar tegenover vorig jaar) */
.ig-kolom--paar{justify-content:flex-end}
.ig-kolom__duo{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%;height:100%}
.ig-kolom__duo > .ig-kolom__staaf{width:min(45%,14px);height:calc(var(--h) * .85);border-radius:3px 3px 0 0;display:block}
.ig-kolompaar .ig-kolommen__vlak{gap:var(--ig-space-1)}
/* een KPI-kaart waarvan de waarde een naam is (dienst, campagne): die mag wel breken, anders zet ze de kolom uit */
.ig-kpi__waarde--naam{font-size:var(--ig-type-h3);line-height:1.15;white-space:normal;overflow-wrap:anywhere}
/* een maand die nog loopt: beide jaren tot dezelfde dag geteld, met een streepje eronder */
.ig-kolom--stuk::after{content:"";position:absolute;bottom:-3px;left:20%;right:20%;border-bottom:2px dotted var(--ig-line-strong)}
/* KPI-kaart: cijfer links, rechts VP en VJ als badges (founder 2026-09-17) */
.ig-kpi__rij{display:flex;align-items:center;justify-content:space-between;gap:var(--ig-space-1);flex-wrap:wrap}
.ig-kpi__vergelijk{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:auto}
.ig-badge--vp{font-size:var(--ig-type-sm);min-height:1.5rem;padding:0 .55em;gap:.3em}
.ig-badge__naam{font-weight:600;color:var(--ig-text-muted);letter-spacing:.02em;margin-right:.15em}
.ig-badge.ig-oordeel--geen{color:var(--ig-text-faint);background:transparent;box-shadow:inset 0 0 0 1px var(--ig-line)}
/* kaartkop: de periodepil mag de kaart nooit breder maken dan haar kolom; op een telefoon verdwijnt hij (elke kaart op het rapport draagt dezelfde periode) */
.ig-kpi__kop{min-width:0}
.ig-kpi__rechts{min-width:0;flex:0 1 auto}
.ig-kpi__periode{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:639px){.ig-kpi__periode{display:none}}
/* te weinig of onvolledig: klein rechts van het cijfer, op een regel */
.ig-kpi__rij > .ig-oordeel__delta{margin-left:auto;font-size:var(--ig-type-sm);white-space:nowrap;text-align:right}
/* founder 2026-09-18: de kaart draagt haar oordeelkleur als tint (niet grijs) en krijgt diepte: zachte schaduw, lichte rand */
.ig-kpi--oordeel{background:color-mix(in srgb,var(--o-bg) 55%,#fff);box-shadow:inset 4px 0 0 var(--o),0 1px 2px rgba(20,30,25,.06),0 10px 24px -14px rgba(20,30,25,.28);border:1px solid color-mix(in srgb,var(--o) 14%,var(--ig-line))}
.ig-kpi--oordeel:hover{transform:translateY(-1px);box-shadow:inset 4px 0 0 var(--o),0 2px 4px rgba(20,30,25,.07),0 16px 32px -14px rgba(20,30,25,.32)}
.ig-kpi--oordeel.ig-oordeel--geen,.ig-kpi--oordeel.ig-oordeel--te-weinig,.ig-kpi--oordeel.ig-oordeel--onvolledig{background:#fff}
.ig-badge--vp{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--o) 45%,transparent),0 1px 2px rgba(20,30,25,.08)}
/* founder 2026-09-17, "geen spacing tussen tabel = ui fout": cijfer en badge in een cel staan niet op elkaar */
.ig-rapporttype td,.ig-diensten td{padding-top:.55rem;padding-bottom:.55rem;vertical-align:middle;line-height:1.35}
.ig-rapporttype td .ig-badge,.ig-diensten td .ig-badge,.ig-hormozi td .ig-badge{margin-top:.3rem}
.ig-rapporttype th,.ig-diensten th{padding-bottom:.55rem}
.ig-diensten td .ig-verhouding{margin-top:.3rem}

/* ---- het maandbord: maandag tot zondag, kleine kaarten van de posts (founder 2026-09-23) ---- */
.ig-maand{margin-top:var(--ig-space-3)}
.ig-maandkop{display:flex;align-items:center;justify-content:space-between;gap:var(--ig-space-2);flex-wrap:wrap;margin-bottom:var(--ig-space-2)}
.ig-maandtitel{margin:0;min-width:11rem;text-align:center;text-transform:capitalize}
.ig-maandrooster{border:1px solid var(--ig-line);border-radius:var(--ig-radius-lg);overflow:hidden;background:var(--ig-line)}
.ig-maandrij{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}
.ig-maandrij+.ig-maandrij{margin-top:1px}
.ig-maanddagkop{padding:var(--ig-space-half) var(--ig-space-1);background:var(--ig-surface);font-size:var(--ig-type-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ig-text-muted)}
.ig-maanddag{min-height:7.5rem;padding:var(--ig-space-half);background:var(--ig-bg);display:flex;flex-direction:column;gap:var(--ig-space-half);min-width:0}
.ig-maanddag.is-weekend{background:var(--ig-surface)}
.ig-maanddag.is-buiten{background:var(--ig-surface-2)}
.ig-maanddag.is-buiten .ig-maanddag__nr{color:var(--ig-text-faint)}
.ig-maanddag.vandaag{box-shadow:inset 0 0 0 2px var(--ig-accent)}
.ig-maanddag__nr{margin:0;display:flex;align-items:center;gap:var(--ig-space-half);font-size:var(--ig-type-sm);font-weight:700;line-height:1}
.ig-maanddag.vandaag .ig-maanddag__nr .ig-num{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ig-accent);color:var(--ig-ink)}
.ig-maandwerkdag{font-size:var(--ig-type-xs);font-weight:500;color:var(--ig-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-maandrijen{flex:1;min-height:2rem;gap:3px}
.ig-maandkaart{flex-direction:row;align-items:center;gap:.3rem;padding:.2rem .35rem .2rem .45rem;border-left:3px solid var(--ig-line-strong);font-size:var(--ig-type-xs);line-height:1.2;min-width:0}
.ig-maandkaart .ig-kanaal--klein{width:1.125rem;height:1.125rem}.ig-maandkaart .ig-kanaal--klein svg{width:.7rem;height:.7rem}
.ig-maandkaart__soort{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--ig-ink);color:var(--ig-bg);font-size:.6rem;font-weight:800}
.ig-maandkaart__soort--mg{width:auto;padding:0 .3rem;border-radius:var(--ig-radius-pill);font-size:.55rem;letter-spacing:.02em}
.ig-maandkaart__uur{flex:none;color:var(--ig-text-muted);font-weight:600}
.ig-maandkaart__titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;text-decoration:none;color:var(--ig-text)}
.ig-maandkaart--success{border-left-color:var(--ig-success)}
.ig-maandkaart--live{border-left-color:var(--ig-ink)}
.ig-maandkaart--info{border-left-color:var(--ig-info)}
.ig-maandkaart--warn{border-left-color:var(--ig-warn)}
.ig-maandkaart--accent{border-left-color:var(--ig-accent)}
.ig-maandkaart--werkdag{cursor:default;background:var(--ig-surface-2);border-style:dashed;border-left-style:solid}
.ig-maandkaart{flex-wrap:wrap}
/* de actie staat als icoon rechts in elke kaart, op dezelfde plaats; klein getekend, maar de raakzone blijft 44px (5.4) */
.ig-maandkaart .ig-actie,.ig-maandkaart .ig-actieplek{width:1.5rem;height:1.5rem}
.ig-maandkaart .ig-actie .ig-ico{width:1rem;height:1rem}
.ig-maandkaart .ig-actie::before{content:"";position:absolute;left:50%;top:50%;width:2.75rem;height:2.75rem;transform:translate(-50%,-50%)}
.ig-maandkaart .ig-pill{min-height:1.25rem;padding:.1rem .45rem;font-size:.6rem}
.ig-bordkaart__kop{display:flex;align-items:center;justify-content:space-between;gap:var(--ig-space-half)}
.ig-maandkaart.is-af .ig-maandkaart__titel{color:var(--ig-text-muted)}
@media (max-width:899px){.ig-maandkaart__uur{display:none}.ig-maanddag{min-height:5.5rem}}
@media (max-width:639px){.ig-maanddag__nr .ig-dagentot{display:none}.ig-maandkaart__titel{display:none}.ig-maandkaart{padding:.2rem .25rem;justify-content:center}.ig-maanddag{min-height:4rem;padding:.25rem}.ig-maandrijen{flex-direction:row;flex-wrap:wrap}}
.ig-maanddagkop__kort{display:none}
@media (max-width:899px){.ig-maanddagkop__lang{display:none}.ig-maanddagkop__kort{display:inline}}

/* runbook op de fiche */
.ig-runbook__sectie{border-top:1px solid var(--ig-line);padding:var(--ig-space-1) 0}
.ig-runbook__sectie summary{cursor:pointer;font-size:var(--ig-type-sm)}
.ig-runbook__inhoud{font-size:var(--ig-type-sm);padding:var(--ig-space-1) 0 0}
.ig-runbook__inhoud p{margin:0 0 var(--ig-space-1)}
.ig-runbook__inhoud ul{margin:0 0 var(--ig-space-1);padding-left:1.2rem}
.ig-runbook__inhoud h4{margin:var(--ig-space-1) 0 var(--ig-space-half);font-size:var(--ig-type-sm)}
.ig-runbook__inhoud .ig-tabel td,.ig-runbook__inhoud .ig-tabel th{height:auto;padding:var(--ig-space-half) var(--ig-space-1);vertical-align:top;overflow-wrap:anywhere}

/* ---- media-to-do (beeldpagina, post, fiche): eerst leesbaar, bewerken achter het potlood ---- */
.ig-mt-lijst{list-style:none;margin:var(--ig-space-half) 0 0;padding:0;display:flex;flex-direction:column}
.ig-mt--fragment{display:grid;grid-template-columns:1.25rem 5.5rem minmax(0,1fr) auto;gap:var(--ig-space-half) var(--ig-space-1);align-items:start;padding:var(--ig-space-half) 0;border-top:1px solid var(--ig-line)}
.ig-mt--fragment:first-child{border-top:0}
.ig-mt--fragment>input[type=checkbox],.ig-mt__kop>input[type=checkbox]{margin-top:.2rem}
.ig-mt__tijd{font-size:var(--ig-type-sm);font-weight:700;color:var(--ig-text-muted)}
.ig-mt__wat{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ig-mt__tekst{font-size:var(--ig-type-sm);line-height:1.45}
.ig-mt__meta{display:flex;flex-wrap:wrap;gap:var(--ig-space-half);align-items:center}
.ig-mt__meta>:empty{display:none}
.ig-mt__acties{white-space:nowrap;display:flex;gap:var(--ig-space-half);align-items:center;margin-left:auto}
.ig-mt__bewerk{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:var(--ig-space-1);padding:var(--ig-space-1);border-radius:var(--ig-radius);background:var(--ig-surface)}
.ig-mt__bewerk[hidden]{display:none}
.ig-mt__breed{grid-column:1 / -1}
.ig-mt.is-klaar .ig-mt__tekst,.ig-mt.is-klaar .ig-mt__titel,.ig-mt.is-klaar .ig-mt__lees{color:var(--ig-text-muted);text-decoration:line-through}
.ig-mt--foto{display:flex;flex-direction:column;gap:var(--ig-space-half);padding:var(--ig-space-1) 0;border-top:1px solid var(--ig-line)}
.ig-mt--foto:first-child{border-top:0}
.ig-mt__kop{display:flex;flex-wrap:wrap;gap:var(--ig-space-1);align-items:center}
.ig-mt__lees{margin:0;font-size:var(--ig-type-sm);line-height:1.45;padding-left:calc(1.25rem + var(--ig-space-1))}
.ig-mt__promptvak{padding-left:calc(1.25rem + var(--ig-space-1))}
.ig-mt__promptvak>summary{display:flex;flex-wrap:wrap;gap:var(--ig-space-1);align-items:center;cursor:pointer}
.ig-mt__promptvak>summary .ig-label{margin:0}
.ig-mt__promptvak[open]>summary{margin-bottom:var(--ig-space-half)}
.ig-mt__prompt{font-family:var(--ig-mono,ui-monospace,monospace);font-size:var(--ig-type-xs);line-height:1.5}
.ig-mt__asset img{display:block}
.ig-mt__lijstkop{margin:var(--ig-space-1) 0 0}
.ig-mt-post{margin-top:var(--ig-space-1);border-top:1px solid var(--ig-line)}
.ig-beeldtel{margin-top:var(--ig-space-1);gap:var(--ig-space-half)}
.ig-beeldtel a{text-decoration:none}
.ig-beeldrij__links{margin-left:auto;gap:var(--ig-space-half)}
.ig-beeldrij__taken{padding-left:var(--ig-space-1);padding-right:var(--ig-space-1)}
.ig-agendarij:target{outline:2px solid var(--ig-accent);outline-offset:2px}
.ig-opnamedag{margin-top:var(--ig-space-3);display:flex;flex-direction:column;gap:var(--ig-space-2)}
.ig-opnamedag.is-voorbij{opacity:.8}
.ig-opnamedag__videos{gap:var(--ig-space-half)}
.ig-opnamedag__videos a{text-decoration:none}
.ig-opnamedag__raster{display:grid;grid-template-columns:minmax(0,1fr) 16rem;gap:var(--ig-space-3);align-items:start}
.ig-opnamedag__locatie{margin:var(--ig-space-2) 0 0;display:flex;gap:var(--ig-space-1);align-items:center}
.ig-opnamedag__pak{position:sticky;top:var(--ig-space-2);padding:var(--ig-space-2);border-radius:var(--ig-radius);background:var(--ig-surface)}
.ig-paklijst{list-style:none;margin:var(--ig-space-1) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-half);font-size:var(--ig-type-sm)}
@media (max-width:899px){.ig-opnamedag__raster{grid-template-columns:1fr}.ig-opnamedag__pak{position:static}}
@media (max-width:639px){.ig-mt--fragment{grid-template-columns:1.25rem minmax(0,1fr)}.ig-mt--fragment .ig-mt__wat,.ig-mt--fragment .ig-mt__acties{grid-column:2}.ig-mt--fragment .ig-mt__acties{margin-left:0}}
@media print{
  body.ig-print-een .ig-opnamedag:not(.is-print),body.ig-print-een .ig-plannen,body.ig-print-een .ig-sectiekop,body.ig-print-een .ig-opnamedag__videos+.ig-cluster{display:none!important}
  body.ig-print-een #ig-inhoud>.ig-cluster{display:none!important}
  .ig-opnamedag [data-print-dag],.ig-opnamedag .ig-mt__acties,.ig-opnamedag .ig-mt__bewerk{display:none!important}
  .ig-opnamedag{margin:0;border:0;padding:0}
  .ig-opnamedag__raster{grid-template-columns:1fr 5cm}
  .ig-mt--fragment{grid-template-columns:1.25rem 5.5rem 1fr;break-inside:avoid}
}

/* ---- verhaalkaart in het voorbeeld: een telefoonkader van 9:16 ---- */
.ig-vb__verhaal{width:min(100%,16rem);aspect-ratio:9/16;border-radius:1.25rem;overflow:hidden;background:#000;box-shadow:0 0 0 6px #111,0 12px 30px rgba(0,0,0,.25)}
.ig-vb__verhaal img{width:100%;height:100%;object-fit:cover;display:block}
.ig-mt__prompt.is-vers{outline:2px solid var(--ig-accent);outline-offset:2px;transition:outline-color .6s}

/* scores op het werkblad van een landingspagina */
.ig-stat{display:flex;flex-direction:column;min-width:4.5rem}.ig-stat__getal{font-size:1.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.ig-stat__getal--ok{color:#0A5C42}.ig-stat__getal--warn{color:#9A6700}.ig-stat__getal--nee{color:#B00020}.ig-stat__label{font-size:.75rem;color:#7C7C7C;text-transform:uppercase;letter-spacing:.06em}.ig-checklist__nee{color:#B00020}
/* tekstkaart op het post-werkblad: onderwerp, titel en een knop; de kaart zelf komt als beeld in de lijst erboven */
.ig-tekstkaart{margin-top:var(--ig-space-3);border-top:1px solid var(--ig-line);padding-top:var(--ig-space-2)}
.ig-tekstkaart summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.ig-tekstkaart__form{display:grid;gap:var(--ig-space-2);margin-top:var(--ig-space-2)}
.ig-tekstkaart__form label{display:grid;gap:.25rem}
.ig-tekstkaart__form button{justify-self:start}

/* ---- invalshoeken (founder 2026-09-24): minstens drie per stuk, elk een andere trigger; de gekozen hoek draagt de accentrand ---- */
.ig-hoeken{display:grid;gap:var(--ig-space-1)}
.ig-hoek{background:var(--ig-bg);border:1px solid var(--ig-line);border-radius:var(--ig-radius);padding:var(--ig-space-1) var(--ig-space-2);display:flex;flex-direction:column;gap:var(--ig-space-half);min-width:0}
.ig-hoek.is-gekozen{border-color:var(--ig-accent-strong);box-shadow:inset 4px 0 0 var(--ig-accent)}
.ig-hoek__kop{display:flex;align-items:center;gap:var(--ig-space-half);flex-wrap:wrap}
.ig-hoek__letter{display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--ig-ink);color:#fff;font-weight:700;font-size:var(--ig-type-xs);flex:none}
.ig-hoek.is-gekozen .ig-hoek__letter{background:var(--ig-accent);color:var(--ig-ink)}
.ig-hoek__actie{margin-left:auto}
.ig-hoek__veld{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ig-hoek__kop + .ig-hoek__veld .ig-hoek__tekst{font-weight:700}
.ig-hoek__tekst{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.ig-hoek__tel{margin:0;font-size:var(--ig-type-xs);color:var(--ig-text-faint)}
.ig-hoek__let{color:var(--ig-warn);font-weight:600}
.ig-hoek__voorkeur{margin:0}
/* feed: Instagram als gsm met raster van 3 (vakken 3:4 zoals het profiel), LinkedIn als tijdlijn van 555 px; beeld = eerste beeld van de post */
.ig-gsm{max-width:400px;margin:var(--ig-space-4) auto 0;padding:10px;border-radius:44px;background:#111;box-shadow:0 20px 50px -24px rgba(0,0,0,.45)}
.ig-gsm__scherm{background:#fff;color:#000;border-radius:35px;overflow:hidden;padding-bottom:10px;font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif}
.ig-gsm__kop{padding:22px 16px 8px;font-size:18px}
.ig-gsm__profiel{display:flex;align-items:center;gap:14px;padding:4px 16px 14px;font-size:14px;border-bottom:1px solid #dbdbdb}
.ig-gsm__avatar{width:64px;height:64px;border-radius:50%;border:1px solid #dbdbdb;display:grid;place-items:center;overflow:hidden}
.ig-gsm__avatar img{width:36px;height:auto}
.ig-gsm__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-gsm__cel{position:relative;aspect-ratio:3/4;overflow:hidden;background:#eee;display:block}
.ig-gsm__cel img{width:100%;height:100%;object-fit:cover;display:block}
.ig-gsm__cel.is-leeg{background:repeating-linear-gradient(135deg,#f4f4f4 0 8px,#ececec 8px 16px);outline:1px dashed #b9b9b9;outline-offset:-1px}
.ig-gsm__cel.is-af::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--ig-warn,#c77700)}
.ig-gsm__leeg{position:absolute;inset:0;display:grid;place-content:center;gap:2px;text-align:center;font-size:12px;color:#555}
.ig-gsm__leeg b{font-size:12px}
.ig-gsm__reel{position:absolute;top:6px;right:6px;width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}
.ig-gsm__niets{grid-column:1/-1;padding:24px 16px}
.ig-lifeed{max-width:555px;margin:var(--ig-space-4) auto 0;display:grid;gap:var(--ig-space-3)}
.ig-lipost{padding:0;overflow:hidden}
.ig-lipost__kop{display:flex;align-items:center;gap:10px;padding:12px 16px}
.ig-lipost__kop > span:nth-child(2){display:grid;flex:1;min-width:0}
.ig-lipost__logo{width:44px;height:44px;border:1px solid var(--ig-line);border-radius:6px;display:grid;place-items:center;background:#fff}
.ig-lipost__logo img{width:28px;height:auto}
.ig-lipost__tekst{padding:0 16px 12px;white-space:pre-line;overflow-wrap:anywhere}
.ig-lipost__meer{border:0;background:none;padding:0;font:inherit;color:var(--ig-text-muted);cursor:pointer}
.ig-lipost__beeld{display:block;width:100%;height:auto}
.ig-lipost__leeg{display:grid;place-content:center;aspect-ratio:2/1;background:repeating-linear-gradient(135deg,var(--ig-surface-2) 0 8px,var(--ig-bg) 8px 16px);color:var(--ig-text-muted);text-decoration:none;text-align:center}
.ig-lipost__af{margin:0;padding:8px 16px;color:var(--ig-warn)}
/* feed: het echte profiel (kop, bio, knoppen, highlights, tabs), Facebook als tijdlijn en de verhalen als gsm 9:16 */
.ig-fp__status{display:flex;justify-content:space-between;padding:14px 22px 2px;font-weight:600;font-size:13px}
.ig-fp__bar{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 10px;font-size:17px}
.ig-fp__profiel{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:center;padding:0 14px 10px}
.ig-fp__avatar{display:block;width:86px;height:86px;border-radius:50%;padding:3px}
.ig-fp__avatar.is-verhaal{background:conic-gradient(#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.ig-fp__avatar > span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff;border:3px solid #fff;overflow:hidden}
.ig-fp__avatar img{width:100%;height:100%;object-fit:cover}
.ig-fp__avatar img.is-merk,.ig-fbkop__av img.is-merk,.ig-fbpost__av img.is-merk,.ig-verhaal__av img.is-merk{width:60%;height:auto;object-fit:contain}
.ig-fp__stats{display:flex;justify-content:space-around;text-align:center;font-size:13px}
.ig-fp__stats b{display:block;font-size:16px}
.ig-fp__bio{display:grid;padding:0 14px 10px;font-size:13.5px;line-height:1.35;white-space:pre-line}
.ig-fp__bio a{color:#00376b;font-weight:600;text-decoration:none}
.ig-fp__knoppen{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;padding:0 14px 12px}
.ig-fp__knoppen span{background:#efefef;border-radius:8px;text-align:center;padding:7px 12px;font-weight:600;font-size:13px}
.ig-fp__knoppen span.is-blauw{background:#0095f6;color:#fff}
.ig-fp__hl{display:flex;gap:14px;padding:0 14px 12px;overflow-x:auto;scrollbar-width:none}
.ig-fp__hl figure{margin:0;display:grid;justify-items:center;gap:4px;font-size:11.5px;width:64px;text-align:center}
.ig-fp__hl figure > span{width:62px;height:62px;border-radius:50%;border:1px solid #dbdbdb;padding:3px;display:block}
.ig-fp__hl img{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#00b074,#005c3c);padding:14px;display:block;box-sizing:border-box}
.ig-fp__hl figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px}
.ig-fp__tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dbdbdb;text-align:center;color:#8e8e8e}
.ig-fp__tabs span{padding:9px 0}
.ig-fp__tabs span.is-aan{color:#000;border-top:1px solid #000;margin-top:-1px}
.ig-fp__leeg{position:absolute;inset:0;display:grid;place-content:center;gap:2px;text-align:center;font-size:12px;color:#555}
.ig-fp__meer{border:0;background:none;padding:0;font:inherit;color:var(--ig-text-muted);cursor:pointer}
.ig-kaart.ig-fbkop{display:flex;gap:14px;align-items:center;padding:16px}
.ig-kaart.ig-fbkop > div{display:grid;justify-items:start;text-align:left}
.ig-fbkop__av,.ig-fbpost__av{display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#fff;border:1px solid var(--ig-line);flex:none}
.ig-fbkop__av{width:72px;height:72px}
.ig-fbpost__av{width:40px;height:40px}
.ig-fbkop__av img,.ig-fbpost__av img{width:100%;height:100%;object-fit:cover}
.ig-fbpost.is-oud{opacity:.9}
.ig-fbpost__acties{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;border-top:1px solid var(--ig-line);margin:0 12px;padding:8px 0;font-size:var(--ig-type-sm);font-weight:600;color:var(--ig-text-muted)}
.ig-verhaal{padding:10px}
.ig-verhaal__scherm{position:relative;aspect-ratio:9/16;border-radius:35px;overflow:hidden;background:#000}
.ig-verhaal__kaart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-verhaal__balken{position:absolute;z-index:2;top:12px;left:10px;right:10px;display:flex;gap:3px}
.ig-verhaal__balken span{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.ig-verhaal__balken span.is-gezien,.ig-verhaal__balken span.is-nu{background:#fff}
.ig-verhaal__kop{position:absolute;z-index:2;top:24px;left:12px;right:12px;display:flex;align-items:center;gap:8px;color:#fff;font-size:13px}
.ig-verhaal__kop .ig-num{opacity:.75}
.ig-verhaal__av{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
.ig-verhaal__av img{width:100%;height:100%;object-fit:cover}
.ig-verhaal__vorige,.ig-verhaal__volgende{position:absolute;z-index:1;top:0;bottom:0;width:40%;border:0;background:transparent;cursor:pointer}
.ig-verhaal__vorige{left:0}
.ig-verhaal__volgende{right:0}
.ig-verhaal__strip{display:flex;gap:8px;overflow-x:auto;max-width:680px;margin:var(--ig-space-3) auto 0;padding-bottom:6px}
.ig-verhaal__strip button{flex:none;display:grid;gap:4px;justify-items:center;border:2px solid transparent;border-radius:10px;background:none;padding:2px;cursor:pointer;font-size:var(--ig-type-xs);color:var(--ig-text-muted)}
.ig-verhaal__strip button.is-nu{border-color:var(--ig-accent,#00E494)}
.ig-verhaal__strip img{width:54px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;display:block}
.ig-gsm__cel.is-oud{opacity:.92}

/* motion reels (reeks 2): links de voorvertoning, rechts de lijst die openklapt; de gsm-stijl zelf staat in motion_speler.css */
.mg-pagina{display:grid;grid-template-columns:minmax(15rem,21rem) minmax(0,1fr);gap:var(--ig-space-4);align-items:start}
/* de voorvertoning blijft altijd volledig in beeld: breedte volgt uit de hoogte die onder de vaste balken overblijft (founder 2026-09-29) */
.mg-pagina{--mg-kop:calc(var(--ig-topbar) + 3.25rem)}
.mg-links{position:sticky;top:calc(var(--mg-kop) + var(--ig-space-1));display:grid;gap:var(--ig-space-1);justify-items:center;max-height:calc(100vh - var(--mg-kop) - var(--ig-space-2))}
.mg-gsm{width:min(100%,calc((100vh - var(--mg-kop) - 9.5rem) * 9 / 16));width:min(100%,calc((100dvh - var(--mg-kop) - 9.5rem) * 9 / 16))}
.mg-knoppen{display:flex;flex-wrap:wrap;gap:var(--ig-space-half);align-items:center}
.mg-knoppen #mg-tijd{margin-left:auto}
.mg-lijst{display:grid;gap:var(--ig-space-1);min-width:0}
.mg-reel{background:var(--ig-surface);border:1px solid var(--ig-line);border-radius:var(--ig-radius-lg);transition:border-color var(--ig-t-base) var(--ig-ease),box-shadow var(--ig-t-base) var(--ig-ease)}
.mg-reel.is-actief{border-color:var(--ig-accent);box-shadow:0 0 0 1px var(--ig-accent)}
.mg-reel__kop{display:flex;align-items:center;gap:var(--ig-space-1);padding-right:var(--ig-space-1)}
.mg-reel__knop{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"nr hook" ". meta";gap:.25rem var(--ig-space-1);align-items:baseline;text-align:left;font:inherit;color:inherit;background:none;border:0;padding:var(--ig-space-1) var(--ig-space-2);cursor:pointer;border-radius:var(--ig-radius-lg)}
.mg-reel__knop:hover{background:var(--ig-rij-hover)}
.mg-reel__knop:focus-visible{outline:2px solid var(--ig-accent);outline-offset:-2px}
.mg-reel__knop .ig-nr{grid-area:nr}
.mg-reel__hook{grid-area:hook;font-weight:700;line-height:1.3}
.mg-reel__meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:var(--ig-space-half);align-items:center}
.mg-reel__detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ig-t-slow) var(--ig-ease)}
.mg-reel.is-open .mg-reel__detail{grid-template-rows:1fr}
.mg-reel__binnen{overflow:hidden;min-height:0;display:grid;gap:var(--ig-space-1);padding:0 var(--ig-space-2);opacity:0;transition:opacity var(--ig-t-base) var(--ig-ease),padding var(--ig-t-slow) var(--ig-ease)}
.mg-reel.is-open .mg-reel__binnen{opacity:1;padding:0 var(--ig-space-2) var(--ig-space-2)}
.mg-alt{margin:0;padding-left:1.1rem;color:var(--ig-text-muted)}
.mg-dl{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.4rem var(--ig-space-2);margin:0;font-size:var(--ig-type-sm)}
.mg-dl dt{color:var(--ig-text-muted)}
.mg-dl dd{margin:0}
.mg-gate{max-width:100%}
.mg-scenes tr[data-s]{cursor:pointer}
.mg-scenes tr.is-nu td{background:var(--ig-accent-soft)}
.mg-kaart{display:block}
.mg-te-maken{margin:var(--ig-space-2) 0 0}
.mg-reel--leeg{background:var(--ig-bg);border-style:dashed}
a.mg-reel__knop{text-decoration:none}
.mg-phone .stage,.mg-phone .subw{transition:opacity .26s var(--ig-ease),transform .26s var(--ig-ease)}
.mg-phone.mg-wissel .stage,.mg-phone.mg-wissel .subw{opacity:0;transform:translateY(2%) scale(.97)}
.mg-phone .bar i{transition:none}
.ig-reelkaart{display:grid;gap:var(--ig-space-1);justify-items:start}
.ig-reelkaart .mg-gsm{max-width:15rem}
@media (max-width:56rem){.mg-pagina{grid-template-columns:1fr}.mg-links{position:static;max-width:20rem;margin-inline:auto;justify-items:stretch}.mg-dl{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mg-reel__detail,.mg-reel__binnen,.mg-phone .stage,.mg-phone .subw{transition:none}}

/* goedgekeurd en bij de bestuurders (founder 2026-09-29): het hele item vol groen of vol geel, met een rand in dezelfde kleur
   die rondom het item loopt (conic-gradient op een gemaskerde ::after, hoek via @property). Onder prefers-reduced-motion staat de rand stil. */
@property --ig-rand-hoek{syntax:'<angle>';inherits:false;initial-value:0deg}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-goedgekeurd{--ig-vol:#00E494;--ig-rand:#00C97F;--ig-rand-donker:#0B7A4B;--ig-rand-licht:#C4FBE4}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-bij-bestuurders{--ig-vol:#FFD43B;--ig-rand:#F2B705;--ig-rand-donker:#9A5B00;--ig-rand-licht:#FFF4BF}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart):is(.is-goedgekeurd,.is-bij-bestuurders){position:relative;background:var(--ig-vol);border-color:transparent;box-shadow:none;color:var(--ig-ink)}
.ig-maandkaart:is(.is-goedgekeurd,.is-bij-bestuurders){border-left-color:transparent}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart):is(.is-goedgekeurd,.is-bij-bestuurders)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--ig-rand-hoek),var(--ig-rand) 0deg,var(--ig-rand) 150deg,var(--ig-rand-donker) 235deg,var(--ig-rand-licht) 295deg,var(--ig-rand) 350deg);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ig-rand-loopt var(--ig-rand-duur,6s) linear var(--ig-rand-start,0s) infinite var(--ig-rand-richting,normal)}
@keyframes ig-rand-loopt{to{--ig-rand-hoek:360deg}}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart):is(.is-goedgekeurd,.is-bij-bestuurders) .ig-uur{color:var(--ig-ink)}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart):is(.is-goedgekeurd,.is-bij-bestuurders) span.ig-kanaal{opacity:.9}
.ig-agendarij:is(.is-goedgekeurd,.is-bij-bestuurders).plaats-boven{box-shadow:0 -3px 0 var(--ig-ink)}
.ig-agendarij:is(.is-goedgekeurd,.is-bij-bestuurders).plaats-onder{box-shadow:0 3px 0 var(--ig-ink)}
/* live (founder 2026-09-30: "maak het groen ook wat feller als = live"): wat buiten staat is feller groen dan goedgekeurd, met een gloed;
   de titel blijft zwart, ook al is het item af. Zelfde rondlopende rand. De class zet m.live_klasse (per kanaal voor een post). */
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-live{--ig-vol:#1CFFAA;--ig-rand:#00E494;--ig-rand-donker:#00A86B;--ig-rand-licht:#E8FFF6;
  position:relative;background:var(--ig-vol);border-color:transparent;color:var(--ig-ink);box-shadow:0 0 0 1px rgba(0,228,148,.4),0 6px 22px -6px rgba(28,255,170,.95)}
.ig-maandkaart.is-live{border-left-color:transparent}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-live::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--ig-rand-hoek),var(--ig-rand) 0deg,var(--ig-rand) 150deg,var(--ig-rand-donker) 235deg,var(--ig-rand-licht) 295deg,var(--ig-rand) 350deg);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ig-rand-loopt var(--ig-rand-duur,6s) linear var(--ig-rand-start,0s) infinite var(--ig-rand-richting,normal)}
.ig-agendarij.is-live .ig-agendarij__titel,.ig-maandkaart.is-live .ig-maandkaart__titel,:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-live .ig-uur{color:var(--ig-ink)}
/* goedgekeurd met opmerking (founder 2026-09-29: "dan komt het item in blauw te staan"): vol blauw tot de opmerking verwerkt is,
   met dezelfde rondlopende rand als groen en geel */
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-opmerking{--ig-vol:#7DB0FF;--ig-rand:#3D7EF0;--ig-rand-donker:#1E4FBF;--ig-rand-licht:#DCE8FF;
  position:relative;background:var(--ig-vol);border-color:transparent;box-shadow:none;color:var(--ig-ink)}
.ig-maandkaart.is-opmerking{border-left-color:transparent}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-opmerking::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--ig-rand-hoek),var(--ig-rand) 0deg,var(--ig-rand) 150deg,var(--ig-rand-donker) 235deg,var(--ig-rand-licht) 295deg,var(--ig-rand) 350deg);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ig-rand-loopt var(--ig-rand-duur,6s) linear var(--ig-rand-start,0s) infinite var(--ig-rand-richting,normal)}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-opmerking .ig-uur{color:var(--ig-ink)}
:is(.ig-agendarij,.ig-bordkaart,.ig-maandkaart).is-opmerking span.ig-kanaal{opacity:.9}
.ig-agendarij.is-opmerking.plaats-boven{box-shadow:0 -3px 0 var(--ig-ink)}
.ig-agendarij.is-opmerking.plaats-onder{box-shadow:0 3px 0 var(--ig-ink)}
/* on hold: wacht op iets buiten ons, zonder datum */
.ig-agendarij--hold{background:var(--ig-surface);border-style:dashed}
.ig-agendarij--hold .ig-agendarij__titel{color:var(--ig-text-muted)}

/* wie al goedkeurde (founder 2026-09-29): een rondje per persoon naast de goedkeuringspil, in elke lijst (macro gk_wie) */
.ig-gk-wie{display:inline-flex;gap:0;vertical-align:middle}
.ig-gk-wie .ig-gk-persoon{position:relative;box-shadow:0 0 0 2px var(--ig-vol,var(--ig-bg));transition:transform var(--ig-t-fast)}
.ig-gk-wie .ig-gk-persoon + .ig-gk-persoon{margin-left:-6px}
.ig-gk-wie .ig-gk-persoon:hover{z-index:1;transform:translateY(-2px)}
.ig-gk-persoon{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;border:1.5px solid transparent;cursor:default}
.ig-gk-persoon--goed{background:var(--ig-success,#1E8E5A);color:#fff}
.ig-gk-persoon--af{background:var(--ig-danger,#C0392B);color:#fff}
.ig-gk-persoon--open{border:1.5px dashed var(--ig-text-muted,#7C7C7C);color:var(--ig-text-muted,#7C7C7C);background:var(--ig-vol,var(--ig-bg))}
.ig-gk-persoon--geen{border:1.5px solid var(--ig-line,#DDD);color:var(--ig-text-muted,#7C7C7C);opacity:.6;background:var(--ig-vol,var(--ig-bg))}
/* opmerking (nawoord, geen afkeuring) en een oordeel op een vorige versie: rand + letter in de kleur, binnenin leeg (founder 2026-09-29) */
.ig-gk-persoon--opm{background:var(--ig-warn,#C77700);color:#fff}
.ig-gk-persoon--vorig-goed,.ig-gk-persoon--vorig-af,.ig-gk-persoon--vorig-opm{background:var(--ig-vol,var(--ig-bg));border-width:2px}
.ig-gk-persoon--vorig-goed{border-color:var(--ig-success,#1E8E5A);color:var(--ig-success,#1E8E5A)}
.ig-gk-persoon--vorig-af{border-color:var(--ig-danger,#C0392B);color:var(--ig-danger,#C0392B)}
.ig-gk-persoon--vorig-opm{border-color:var(--ig-warn,#C77700);color:var(--ig-warn,#C77700)}
/* melding 'te beantwoorden' naast de bolletjes: link naar het blok goedkeuring op het werkblad */
/* het meldingsbolletje, een voor de hele app (founder 2026-09-29: "rood 1 icoontje, rechtsboven aan het kaderitem en aan de menubalk"):
   macro m.teller. Rechtsboven op het kader dat het draagt; zonder bekend kader staat het in de regel (nooit ergens los op de pagina). */
.ig-teller{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--ig-danger,#B3261E);color:#fff;font-size:11px;font-weight:700;line-height:1;text-decoration:none;vertical-align:middle;
  box-shadow:0 0 0 2px var(--ig-bg,#fff);font-variant-numeric:tabular-nums;letter-spacing:0}
a.ig-teller:hover{filter:brightness(1.12);color:#fff}
.ig-tabel tr:has(.ig-teller),.ig-agendarij:has(.ig-teller),.ig-bordkaart:has(.ig-teller),.ig-nav a:has(.ig-teller),.ig-funnel__stap a:has(.ig-teller),.ig-teller-plek{position:relative}
.ig-tabel tr .ig-teller,.ig-agendarij .ig-teller,.ig-bordkaart .ig-teller,.ig-nav a .ig-teller,.ig-funnel__stap a .ig-teller,.ig-teller-plek > .ig-teller{position:absolute;top:-7px;right:-7px;z-index:3}
/* founder 2026-09-29: het bolletje hangt op de hoek van het kader, niet erin, ook op een tabelrij en een agendarij; de tabelwrap
   scrolt horizontaal en knipt af wat erbuiten valt, dus ze krijgt rechts en boven de ruimte van het bolletje */
.ig-tabel tr .ig-teller,.ig-agendarij .ig-teller{top:-7px;right:-7px}
.ig-tabelwrap:has(.ig-teller){padding:9px 9px 0 0}
/* in de menubalk: beide balken scrollen horizontaal en knippen alles buiten hun kader af, dus het bolletje blijft erbinnen */
.ig-nav{padding-block:6px;margin-block:-6px}
.ig-nav a .ig-teller{top:-5px;right:-6px}
.ig-funnel__stap a .ig-teller{top:4px;right:-14px}
.ig-gk-antwoorden{border-top:1px solid var(--ig-line,#DDD);padding-top:var(--ig-space-2)}
.ig-gk-antwoorden blockquote{margin:0;padding:.35rem .6rem;border-left:3px solid var(--ig-warn,#C77700);white-space:pre-line;font-size:var(--ig-type-sm,.875rem);line-height:1.45}

/* ---- tabelinhoud (founder 2026-09-29): kleine tags en triggericonen, cijfers rechts, score = getal + balk ---- */
.ig-tabel td .ig-tag,.ig-tabel td .ig-pill{font-size:var(--ig-type-xs);min-height:1.25rem;padding:.125rem .45rem;gap:.25rem}
.ig-tabel td .ig-cluster{gap:.25rem}
.ig-tabel td .ig-tag--trigger{min-width:1.5rem;min-height:1.5rem;padding:0 .25rem}
.ig-tabel td .ig-tag--trigger .ig-ico{width:.875rem;height:.875rem}
.ig-tabel .ig-triggers{gap:.2rem}
.ig-tabel th.ig-num,.ig-tabel td.ig-num{text-align:right}
.ig-eenheid{font-size:.8em;font-weight:500;color:var(--ig-text-muted);margin-left:.1em}
@media (pointer:fine){
  .ig-tabel .ig-actie,.ig-tabel .ig-actieplek{width:2rem;height:2rem}
  .ig-tabel .ig-actie .ig-ico{width:1rem;height:1rem}
}
.ig-score{display:inline-flex;flex-direction:column;align-items:flex-end;gap:.2rem;min-width:2rem;font-variant-numeric:tabular-nums}
.ig-score b{font-weight:700;line-height:1}
.ig-score i{display:block;width:2rem;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--k) var(--w),var(--ig-line) var(--w))}
.ig-score--success{--k:var(--ig-success)}.ig-score--success b{color:var(--ig-success)}
.ig-score--warn{--k:var(--ig-warn)}.ig-score--warn b{color:var(--ig-warn)}
.ig-score--danger{--k:var(--ig-danger)}.ig-score--danger b{color:var(--ig-danger)}

/* Beeld: galerij links 3/4, "te maken" rechts 1/4 met een tag per soort content (founder 2026-09-29). Split met twee staten (VF 01 r. 175):
   naast elkaar vanaf 1100 px, daaronder onder elkaar met de lijst eerst (anders staat ze onder honderden beelden). De lijst blijft staan en scrolt apart. */
.ig-beeldsplit{display:grid;grid-template-columns:minmax(0,3fr) minmax(17rem,1fr);gap:var(--ig-space-4);align-items:start;margin-top:var(--ig-space-2)}
.ig-beeldsplit__galerij{min-width:0}
.ig-beeldsplit__todo{position:sticky;top:var(--ig-space-2);max-height:calc(100vh - 2 * var(--ig-space-2));overflow:auto;background:var(--ig-surface);border-radius:var(--ig-radius-lg);padding:0 var(--ig-space-2) var(--ig-space-2)}
.ig-beeldsplit__kop{position:sticky;top:0;z-index:1;background:var(--ig-surface);padding:var(--ig-space-2) 0 var(--ig-space-1)}
.ig-todolijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ig-space-1)}
.ig-todo{background:var(--ig-bg);border-radius:var(--ig-radius);padding:var(--ig-space-1) var(--ig-space-2);display:flex;flex-direction:column;gap:var(--ig-space-half)}
.ig-todo__kop{display:flex;align-items:center;gap:var(--ig-space-half);flex-wrap:wrap}
.ig-todo__datum{margin-left:auto}
.ig-todo__titel{font-weight:600;color:var(--ig-ink);text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-todo__titel:hover{text-decoration:underline}
.ig-todo__wat{margin:0}
@media (max-width:1100px){.ig-beeldsplit{grid-template-columns:minmax(0,1fr)}.ig-beeldsplit__todo{position:static;max-height:24rem;order:-1}}
main.ig-wrap:has(.ig-beeldsplit){max-width:none;padding-left:var(--ig-gutter);padding-right:var(--ig-gutter)}  /* werkpagina: volle schermbreedte (VF 01 7.8), 3/4 galerij + 1/4 te maken */

/* Beeld: tegels (founder 2026-09-29): enkel de content, afgeronde tegels in rijen van gelijke hoogte (flex-grow en -basis evenredig
   met de verhouding, dus niets bijgesneden), video's spelen vanzelf; titel en potlood pas bij hover
   (op een aanraakscherm altijd). Het bewerkvenster toont het beeld groot naast titel, soort, dienst en tags. */
.ig-galerij--tegels{display:flex;flex-wrap:wrap;gap:var(--ig-space-1)}
.ig-galerij--tegels::after{content:"";flex-grow:999999}
.ig-tegel{position:relative;margin:0;flex:calc(var(--ar,1) * 100) 1 calc(var(--ar,1) * 13rem);aspect-ratio:var(--ar,1);max-width:100%;border-radius:var(--ig-radius-lg);overflow:hidden;background:var(--ig-surface);isolation:isolate}
.ig-tegel__media{display:block;width:100%;height:100%}
.ig-tegel__media img,.ig-tegel__media video{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--ig-t-base) var(--ig-ease)}
.ig-tegel__media .ig-asset__type{display:flex;align-items:center;justify-content:center;height:100%}
.ig-tegel__titel{position:absolute;left:0;right:0;bottom:0;padding:1.75rem var(--ig-space-1) var(--ig-space-half);background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));color:#fff;font-size:var(--ig-type-xs);font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--ig-t-fast);pointer-events:none}
.ig-tegel__bewerk{position:absolute;top:var(--ig-space-half);right:var(--ig-space-half);width:2.25rem;height:2.25rem;display:grid;place-items:center;padding:0;border:0;border-radius:var(--ig-radius-pill);background:rgba(255,255,255,.94);color:var(--ig-ink);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;opacity:0;transform:scale(.9);transition:opacity var(--ig-t-fast),transform var(--ig-t-fast)}
.ig-tegel__bewerk .ig-ico{width:1.1rem;height:1.1rem}
.ig-tegel:hover .ig-tegel__titel,.ig-tegel:focus-within .ig-tegel__titel,.ig-tegel:hover .ig-tegel__bewerk,.ig-tegel:focus-within .ig-tegel__bewerk{opacity:1;transform:none}
.ig-tegel:hover .ig-tegel__media img,.ig-tegel:hover .ig-tegel__media video{transform:scale(1.03)}
@media (hover:none){.ig-tegel__titel,.ig-tegel__bewerk{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ig-tegel__media img,.ig-tegel__media video{transition:none}.ig-tegel:hover .ig-tegel__media img,.ig-tegel:hover .ig-tegel__media video{transform:none}}
.ig-tegeldlg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ig-space-3);align-items:start}
.ig-tegeldlg__media{border-radius:var(--ig-radius-lg);overflow:hidden;background:#111}
.ig-tegeldlg__media img,.ig-tegeldlg__media video{display:block;width:100%;max-height:60vh;object-fit:contain}
.ig-tegeldlg__media p{margin:0;padding:var(--ig-space-4);text-align:center;color:#fff}
@media (max-width:700px){.ig-tegeldlg{grid-template-columns:1fr}}

/* ---------- het belletje (founder 2026-09-30, VF 01_UI regel 12): meldingen van de app zelf, rechtsboven in de topbalk ----------
   Knop met het rode tellertje (m.teller, zelfde bolletje als overal); het paneel valt eronder open, op een gsm over de volle breedte.
   Per melding een icoon in de toon (wekker = vooraf, vink = geplaatst, kruis = niet geplaatst), de zin, de reden en het uur; rechts de link naar de live post. */
.ig-bel{position:relative;flex:none}
.ig-bel__knop{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid transparent;border-radius:var(--ig-radius-pill);background:none;color:var(--ig-text-muted);cursor:pointer;transition:background var(--ig-t-fast),color var(--ig-t-fast)}
.ig-bel__knop:hover,.ig-bel__knop[aria-expanded=true]{background:var(--ig-surface);color:var(--ig-text)}
.ig-bel__knop .ig-ico{width:1.3rem;height:1.3rem}
.ig-bel__knop.ig-teller-plek > .ig-teller{top:-2px;right:-4px}
.ig-bel__paneel{position:absolute;right:0;top:calc(100% + var(--ig-space-1));z-index:80;width:min(26rem,calc(100vw - 2 * var(--ig-gutter)));max-height:min(70vh,34rem);overflow:auto;background:var(--ig-bg);border:1px solid var(--ig-line);border-radius:var(--ig-radius-lg);box-shadow:var(--ig-shadow-lg);animation:ig-verschijn var(--ig-t-base) var(--ig-ease)}
.ig-bel__paneel[hidden]{display:none}
.ig-bel__kop{margin:0;padding:var(--ig-space-2) var(--ig-space-3);font-size:var(--ig-type-sm);font-weight:700;letter-spacing:.02em;border-bottom:1px solid var(--ig-line);position:sticky;top:0;background:var(--ig-bg);z-index:1}
.ig-bel__lijst{list-style:none;margin:0;padding:0}
.ig-bel__item{display:flex;align-items:center;gap:var(--ig-space-1);padding-right:var(--ig-space-2);border-bottom:1px solid var(--ig-line)}
.ig-bel__item:last-child{border-bottom:0}
.ig-bel__item.is-nieuw{background:var(--ig-surface)}
.ig-bel__link{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--ig-space-2);align-items:start;padding:var(--ig-space-2) var(--ig-space-3);color:var(--ig-text);text-decoration:none}
a.ig-bel__link:hover b{text-decoration:underline}
.ig-bel__ico{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--ig-info-bg);color:var(--ig-info)}
.ig-bel__ico .ig-ico{width:1.1rem;height:1.1rem}
.ig-bel__item--succes .ig-bel__ico{background:var(--ig-success-bg);color:var(--ig-success)}
.ig-bel__item--waarschuwing .ig-bel__ico{background:var(--ig-warn-bg);color:var(--ig-warn)}
.ig-bel__item--gevaar .ig-bel__ico{background:var(--ig-danger-bg);color:var(--ig-danger)}
.ig-bel__tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.ig-bel__tekst b{font-size:var(--ig-type-sm);font-weight:600;line-height:1.35}
.ig-bel__tekst small{font-size:var(--ig-type-sm);color:var(--ig-text-muted);line-height:1.4;overflow-wrap:anywhere}
.ig-bel__tijd{font-size:var(--ig-type-sm);color:var(--ig-text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.ig-bel__live{width:2.25rem;height:2.25rem}
.ig-bel__leeg{padding:var(--ig-space-3);font-size:var(--ig-type-sm);color:var(--ig-text-muted)}
@media (max-width:639px){.ig-bel__paneel{position:fixed;left:0;right:0;top:var(--ig-topbar);width:auto;max-height:calc(100vh - var(--ig-topbar));border-radius:0 0 var(--ig-radius-lg) var(--ig-radius-lg)}}
@media print{.ig-bel{display:none}}

/* ---- Leesmodus (founder 2026-10-04: "Lowie en Stiev zijn kijkers en goedkeurders"). De server zet <html data-leesmodus> voor een rol
   met leesmodus (app/rollen.py). Een allowlist zoals de server: een knop blijft alleen staan als hij leest (tab, uitklap, sluiten,
   voorbeeld) of data-lezer draagt (oordelen, opmerking, voorkeur, stem, meld iets), zelf of op een ouder. Een aan/uit-knop op een
   werkblad toont alleen wat aan staat en klikt niet; daarbuiten is hij een filter en blijft hij werken. ig.js maakt de velden
   alleen-lezen; ze lezen dan als gewone tekst. De server weigert de rest hoe dan ook. */
html[data-leesmodus] button:not([data-lezer]):not([data-lezer] *):not([role="tab"]):not([aria-expanded]):not([aria-controls]):not([data-sluit]):not([data-vb-meer]):not([data-vb-tab]):not([aria-pressed]):not(.ig-statusflow *):not(form[method="get"] *),
html[data-leesmodus] label:has(> input[type="file"]):not([data-lezer]),
html[data-leesmodus] [data-schrijft]:not([data-lezer]){display:none !important}
html[data-leesmodus] .ig-werkblad button[aria-pressed="false"]:not([data-lezer]):not([data-lezer] *){display:none !important}
html[data-leesmodus] .ig-werkblad button[aria-pressed]:not([data-lezer]):not([data-lezer] *),
html[data-leesmodus] .ig-statusflow button{pointer-events:none;cursor:default}
html[data-leesmodus] [data-leesveld]{background:transparent;border-color:transparent;box-shadow:none;resize:none;cursor:text;color:var(--ig-text);opacity:1;padding-left:0;padding-right:0}
html[data-leesmodus] select[data-leesveld]{appearance:none;-webkit-appearance:none;background-image:none;cursor:default}
html[data-leesmodus] input[type="checkbox"][data-leesveld],html[data-leesmodus] input[type="radio"][data-leesveld]{opacity:.6}
html[data-leesmodus] [data-leesveld]::placeholder{color:transparent}
html[data-leesmodus] [data-leesveld]:focus{outline:none}
html[data-leesmodus] .ig-greep{visibility:hidden}  /* slepen kan niet: geen sleepgreep, de rij houdt haar uitlijning */
/* een kijker die moet oordelen: het oordeel staat bovenaan, onder de titel (VF 01_UI 7.9 regel 1: wat je het vaakst doet, staat bij het anker) */
.ig-kijker-oordeel{border:2px solid var(--ig-accent, #00E494)}
.ig-kijker-geen{color:var(--ig-text-muted);font-size:var(--ig-type-sm);margin:0}
/* wat veranderde sinds de vorige versie (_beoordelen.html): op de /g/-pagina en op de detailpagina van een bestuurder */
.gk-diff del{background:var(--ig-danger-bg);color:var(--ig-danger);text-decoration:line-through}
.gk-diff ins{background:var(--ig-success-bg);color:var(--ig-success);text-decoration:none}
.gk-diff dd{margin:0 0 var(--ig-space-2);white-space:pre-wrap;line-height:1.5}
/* een blok dat een rol op een detailpagina niet ziet (app/weergave.py, Instellingen, Rollen): het staat in de pagina voor het script, niet in beeld */
[data-verborgen]{display:none !important}
/* Instellingen, Rollen (founder 2026-10-04): een kaart per rol naast elkaar */
.ig-rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:var(--ig-space-3);margin-top:var(--ig-space-3);align-items:stretch}
.ig-rollen > .ig-kaart{display:flex;flex-direction:column;gap:var(--ig-space-2);min-width:0}
/* de nieuwsbrief op het werkblad van een bestuurder: het vak waarin goedkeuring.js de brief verkleint */
.gk-brief-vak{overflow:hidden;border:1px solid var(--ig-line);border-radius:var(--ig-radius);background:#F5F6F5}
.gk-brief-vak .gk-brief{border:0;border-radius:0;max-width:none}
/* het zicht-schakelaartje (agenda) ook met knoppen als tabs (Instellingen, Rollen) */
.ig-zicht button{display:inline-flex;align-items:center;min-height:2rem;padding:0 .875rem;border:0;background:none;border-radius:var(--ig-radius-pill);font:inherit;font-size:var(--ig-type-sm);font-weight:600;color:var(--ig-text-muted);cursor:pointer}
.ig-zicht button[aria-selected="true"]{background:var(--ig-bg);color:var(--ig-text);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Campagne: de onderdelen over de volle breedte, de media naast elkaar (founder 2026-10-09: "zorg dat de media's naast elkaar staan, alle
   voorbeelden"). Een advertentie toont haar feedbeeld 4:5 en haar verhaal 9:16 op dezelfde hoogte, of de reel waarop ze loopt; een post
   zijn beeld en de video van zijn idee (app/campagnes.py _media). */
.ig-werkblad__breed{grid-column:1 / -1}
#ig-fasen .ig-fase{grid-template-columns:repeat(auto-fill,minmax(19.5rem,1fr))}
.ig-onderdeel__media{display:flex;gap:var(--ig-space-half);height:13rem}
.ig-onderdeel__media > *{height:100%;flex:none;border-radius:.4rem;overflow:hidden;background:var(--ig-surface);display:block}
.ig-onderdeel__media .is-feed,.ig-onderdeel__media .is-beeld{aspect-ratio:4 / 5}
.ig-onderdeel__media .is-verhaal,.ig-onderdeel__media .is-video{aspect-ratio:9 / 16}
.ig-onderdeel__media img{display:block;width:100%;height:100%;object-fit:cover}
.ig-onderdeel__media > video{width:auto;object-fit:cover;background:#000}
.ig-onderdeel__media--leeg{align-items:center;justify-content:center;border:1px dashed var(--ig-line);border-radius:.4rem;font-size:var(--ig-type-xs);color:var(--ig-text-faint)}
@media (max-width:700px){.ig-onderdeel__media{height:11rem}}

/* ---------- Resultaten op Meta op het werkblad van een advertentiecampagne (templates/_advertentie_cijfers.html, founder 2026-10-12).
   Volgt de tabelstandaard (VF 01_UI 6, 6.1, 6.2) en de werkbladregel (10.7: paneeltabs, geen stapel kaarten): de tabel krijgt geen eigen
   rijregels bovenop .ig-tabel, alleen de totaalrijen onderaan (hetzelfde rijsjabloon) en de adcontentcel op een regel. ---------- */
.ig-adcijfers{min-width:0}  /* een rasterkind krimpt anders niet onder de breedte van de tabel: op een gsm liep de hele pagina over */
.ig-adcijfers__kop,.ig-adcijfers__balk{flex-wrap:wrap;gap:var(--ig-space-1) var(--ig-space-2)}
.ig-adcijfers__balk{margin-top:var(--ig-space-2)}
.ig-adcijfers__balk .ig-pillen{margin-top:0}
.ig-adcijfers .ig-stempel{margin:0}
.ig-adcijfers .ig-pill{display:inline-flex;align-items:center;gap:.3rem}
.ig-adcijfers .ig-pill .ig-ico{width:.9rem;height:.9rem;flex:none}
.ig-adcijfers__paneel{margin-top:var(--ig-space-3)}
.ig-adcijfers__leeg{margin:var(--ig-space-3) 0 0}
.ig-adcijfers__tabel tfoot td{font-weight:600;background:var(--ig-surface)}
.ig-adcijfers__tabel tfoot tr:first-child td{border-top:1px solid var(--ig-line-strong)}
.ig-adcijfers__tabel tfoot .ig-adcijfers__totaal td{font-weight:800;border-bottom:0}
.ig-adcontent{display:inline-flex;align-items:center;gap:var(--ig-space-1);max-width:12rem;white-space:nowrap}
.ig-adcontent img{flex:none;width:1.125rem;height:2rem;object-fit:cover;border-radius:.2rem;background:var(--ig-ink)}
.ig-adcontent > .ig-tag{min-width:0}
.ig-adcijfers__twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ig-space-2)}
.ig-adcijfers__twee > .ig-kaart{min-width:0;display:flex;flex-direction:column}
.ig-adcijfers__twee .ig-kolommen__vlak{flex:none;height:12rem}
@media (max-width:767px){.ig-adcijfers__twee{grid-template-columns:minmax(0,1fr)}}
.ig-adcijfers .ig-pillen .ig-pil{border:0;font-family:inherit}
.ig-adhooks{margin:var(--ig-space-2) 0 0}
.ig-adhooks__lijst{list-style:none;margin:0;padding:0}
.ig-adhooks__rij{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(6rem,1fr) 5.5rem;align-items:center;gap:var(--ig-space-2);height:3rem;border-bottom:1px solid var(--ig-line);font-size:var(--ig-type-sm)}
.ig-adhooks__rij:last-child{border-bottom:0}
.ig-adhooks__hook{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;font-weight:500}
.ig-adhooks__spoor{display:block;height:.75rem;border-radius:var(--ig-radius-pill);background:var(--ig-surface-2);overflow:hidden}
.ig-adhooks__vulling{display:block;height:100%;width:var(--p);border-radius:var(--ig-radius-pill);transition:width var(--ig-t-base) var(--ig-ease)}
.ig-adhooks__n{text-align:right;font-weight:600}
@media (prefers-reduced-motion:reduce){.ig-adhooks__vulling{transition:none}}
@media (max-width:639px){.ig-adhooks__rij{grid-template-columns:minmax(0,1fr) 4.5rem;grid-template-rows:auto auto;height:auto;padding:var(--ig-space-1) 0;row-gap:var(--ig-space-half)}.ig-adhooks__spoor{grid-column:1 / -1;grid-row:2}}
/* VF 01_UI 6.3: per kolomsoort een eigen opmaak. Volume: de databalk (aandeel in het totaal) in een neutrale tint, want kleur draagt
   enkel het oordeel; verhouding: de voorwaardelijke pil (.ig-badge met ig-oordeel--goed/stabiel/slecht/geen) en de basis zonder oordeel;
   categorie: de tag in haar categoriekleur, ook in de dagdiagrammen (de reeksen volgen de adcontent, niet haar rang). */
.ig-databalk{display:inline-block;vertical-align:middle;width:2.5rem;height:.4rem;margin-right:var(--ig-space-1);border-radius:var(--ig-radius-pill);background:linear-gradient(90deg,color-mix(in srgb,var(--ig-ink) 55%,transparent) var(--p),var(--ig-surface-2) var(--p))}
.ig-adcijfers .ig-badge.ig-oordeel--basis{--o:var(--ig-text);--o-bg:transparent;background:transparent;box-shadow:inset 0 0 0 1px var(--ig-line-strong)}
.ig-adcijfers td .ig-badge--vp{font-variant-numeric:tabular-nums}
.ig-adcijfers .ig-reeks-1{background:var(--ig-ad-r1,var(--ig-accent))}.ig-adcijfers .ig-reeks-2{background:var(--ig-ad-r2,var(--ig-ink))}
.ig-adcijfers .ig-reeks-3{background:var(--ig-ad-r3,#B9BEBC)}.ig-adcijfers .ig-reeks-4{background:var(--ig-ad-r4,#6E7573)}
.ig-adcijfers .ig-actie[aria-busy=true]{cursor:progress}
.ig-adcijfers .ig-actie[aria-busy=true] .ig-ico{animation:ig-draai .9s linear infinite}
@media (prefers-reduced-motion:reduce){.ig-adcijfers .ig-actie[aria-busy=true] .ig-ico{animation:none}}
.ig-onderdeel__cijfers{color:var(--ig-text);text-decoration:none;font-weight:600}
.ig-onderdeel__cijfers:hover{text-decoration:underline}
.ig-adcijfers__tabel th{white-space:nowrap}  /* VF 01_UI 6 regel 4: een kop staat op een regel */
.ig-adcijfers .ig-zicht{flex-wrap:wrap;max-width:100%}
.ig-adcijfers .ig-zicht button{white-space:nowrap}
/* inschrijvingen voor de beurs op het campagnewerkblad (founder 2026-10-20): na het bijwerken tekent het vinkje zich */
.ig-registratie-plak{margin-top:var(--ig-space-2)}
.ig-registratie-plak summary{cursor:pointer;color:var(--ig-text-muted)}
.ig-registratie-plak .ig-textarea{margin:var(--ig-space-1) 0}
#ig-registratielijst td{white-space:nowrap}
.ig-registratie-ok{display:inline-flex;align-items:center;gap:var(--ig-space-half);font-weight:600}
.ig-vink{width:1.25rem;height:1.25rem;fill:none;stroke:var(--ig-accent-strong);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:ig-vink-teken .5s var(--ig-ease) forwards}
@keyframes ig-vink-teken{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ig-vink{animation:none;stroke-dashoffset:0}}
